/* Rezin8 Arts — shared styles. Desktop target ~1280px. */

:root {
  --bg: #f9f8f4;
  --ink: #1a1a1a;
  --muted: #5e5a55;
  --teal: #7ec8c6;
  --teal-dark: #5eb3b1;
  --line: #1a1a1a;
  --bubble-outline: #6e6e6e;   /* bubble/pill outlines: same flat grey as the banner lightning card */
  --card: #fffdfb;
  --bar: #b7dcdc;
  --shadow: 0 10px 30px rgba(40, 30, 20, 0.06);
  --wrap: 1180px;
  --radius: 18px;
  --sans: "Outfit", "Avenir Next", "Trebuchet MS", sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --script: "Pacifico", "Segoe Script", cursive;
  --hand: "Caveat", "Segoe Script", cursive;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.5;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
/* keyboard focus ring on bubbles uses the bubble grey instead of black */
.btn:focus-visible,
.menu-toggle:focus-visible,
.hero-sound:focus-visible,
.close-x:focus-visible,
.cat-card:focus-visible { outline-color: var(--bubble-outline); }

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--ink);
  color: #fff;
  padding: 0.5rem 0.8rem;
  z-index: 100;
}
.skip:focus { top: 0.5rem; }

.wrap {
  width: min(var(--wrap), calc(100% - 40px));
  margin-inline: auto;
}

/* Header ---------------------------------------------------------- */

.util {
  background: var(--bar);
  color: #1c2830;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.48rem 4vw;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.util p { margin: 0; display: flex; align-items: center; gap: 0.45rem; white-space: nowrap; }

.util .heart { color: #e23b78; font-size: 0.85rem; }
.util .diamond {
  width: 6px;
  height: 6px;
  background: #1c2830;
  transform: rotate(45deg);
  display: inline-block;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
}

.nav-wrap {
  width: 100%;
  margin: 0;
  padding: 0.15rem 2.2vw;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  min-height: 128px;
  position: relative;
  overflow: visible;
  background:
    radial-gradient(circle at 18% 28%, rgba(255, 248, 236, 0.95) 0%, transparent 36%),
    radial-gradient(circle at 72% 18%, rgba(255, 214, 92, 0.9) 0%, transparent 34%),
    radial-gradient(circle at 38% 78%, rgba(255, 110, 176, 0.85) 0%, transparent 40%),
    radial-gradient(circle at 82% 72%, rgba(176, 120, 255, 0.9) 0%, transparent 42%),
    radial-gradient(circle at 55% 48%, rgba(255, 168, 120, 0.75) 0%, transparent 48%),
    linear-gradient(128deg, #ffb3d4, #e4b6ff 42%, #ffe7a8);
}
.nav-wrap::before,
.nav-wrap::after {
  content: "";
  position: absolute;
  inset: -20% 0;
  pointer-events: none;
  background-repeat: repeat;
}
.nav-wrap::before {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.95) 0 1.1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,214,120,0.95) 0 1.3px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.85) 0 0.7px, transparent 1.3px);
  background-size: 46px 38px, 72px 54px, 28px 32px;
  background-position: 0 0, 18px 12px, 8px 20px;
  animation: glitter-drift 3.2s linear infinite, glitter-flash 1.4s ease-in-out infinite;
}
.nav-wrap::after {
  background-image:
    radial-gradient(circle, rgba(255,255,255,1) 0 1.6px, transparent 2.4px),
    radial-gradient(circle, rgba(186,230,255,0.95) 0 1px, transparent 1.8px),
    linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
  background-size: 90px 64px, 36px 48px, 180% 100%;
  background-position: 30px 8px, 4px 16px, -80% 0;
  animation: glitter-drift 2.1s linear infinite reverse, glitter-sheen 2.8s ease-in-out infinite;
}
.nav-wrap > * { position: relative; z-index: 1; }
@keyframes glitter-drift {
  from { background-position: 0 0, 18px 12px, 8px 20px; }
  to { background-position: 46px -38px, -18px 28px, 20px -16px; }
}
@keyframes glitter-flash {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
@keyframes glitter-sheen {
  0% { background-position: 30px 8px, 4px 16px, -80% 0; }
  100% { background-position: -20px 24px, 24px -8px, 180% 0; }
}

.logo-link { display: flex; width: 118px; align-items: center; }
.logo-link .logo { width: 100%; height: auto; display: block; }

.primary-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
}

.primary-nav > a,
.primary-nav > .nav-item > a {
  font-family: "Baloo 2", "Fredoka", cursive;
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #ff7ec6;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  color: #111;
  -webkit-text-stroke: 0;
  paint-order: fill;
  text-shadow: none;
}
.primary-nav > a:hover,
.primary-nav > .nav-item > a:hover {
  color: #111;
  transform: translateY(-1px) scale(1.05);
}
.chev {
  color: #111;
  font-size: 0.86rem;
  font-weight: 600;
}

.nav-item { position: relative; display: flex; align-items: center; gap: 0.15rem; }

.icon-btn { color: #111; }
.menu-toggle { color: #111; border-color: var(--bubble-outline); }
body[data-page="shop"] [data-nav="shop"],
body[data-page="originals"] [data-nav="originals"],
body[data-page="about"] [data-nav="about"],
body[data-page="gallery"] [data-nav="gallery"],
body[data-page="contact"] [data-nav="contact"] {
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.95))
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 4px 0 #ff4fa3)
    drop-shadow(0 6px 4px rgba(0,0,0,0.35));
}

.chev { display: inline-flex; align-items: center; padding: 0.2rem; }
.chev svg { width: 12px; height: 12px; }

.dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1.5px solid var(--bubble-outline);
  border-radius: 12px;
  padding: 0.4rem;
  z-index: 50;
  box-shadow: var(--shadow);
}

.dropdown a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
}
.dropdown a { color: var(--ink); }
.dropdown a:hover { background: #f3f0ea; }

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown,
.nav-item.is-open .dropdown { display: block; }

.nav-tools { display: flex; align-items: center; gap: 0.35rem; }
.icon-btn {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  position: relative;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.35); }
.icon-btn svg { width: 32px; height: 32px; stroke-width: 2.6; }

.cart-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--teal);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.cart-count[hidden] { display: none; }

.menu-toggle {
  display: none;
  border: 1.5px solid var(--bubble-outline);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 12px;
  padding: 0.85rem 1.2rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.btn-teal { background: var(--teal); color: var(--ink); }
.btn-teal:hover { background: var(--teal-dark); }

.btn-outline { background: #fff; color: var(--ink); border-color: var(--bubble-outline); }
/* hover keeps the bubble fill (was a solid var(--ink) fill that hid the dark text); brightness hover comes from the bubble rule below */
.btn-outline:hover { color: #fff; }

.btn-block { width: 100%; }


/* Product banner -------------------------------------------------- */

.product-banner {
  padding: 0.85rem 0 1.15rem;
}

.product-banner-frame {
  border-radius: 22px;
  overflow: hidden;
  line-height: 0;
  background: #e8e6e2;
  max-width: 100%;
}

.product-banner-video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1080;
  object-fit: cover;
  background: #e8e6e2;
}

/* Hero ------------------------------------------------------------ */

.hero { position: relative; padding: 0.35rem 0 0.2rem; }

.hero-stage { position: relative; }

.hero-frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #efeae2;
  line-height: 0;
}

.hero-video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1120 / 816;
  object-fit: contain;
  background: #f4f1ea;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(249, 248, 244, 0.97) 0%,
    rgba(249, 248, 244, 0.94) 24%,
    rgba(249, 248, 244, 0.62) 40%,
    rgba(249, 248, 244, 0.18) 52%,
    rgba(249, 248, 244, 0) 62%
  );
  pointer-events: none;
}

.hero-copy {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(46%, 34rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.25rem 0.8rem 1.25rem 1.55rem;
  pointer-events: none;
}

.hero-copy a,
.hero-copy .btn { pointer-events: auto; }



.hero-line {
  position: absolute;
  z-index: 4;
  left: 8%;
  right: 8%;
  bottom: 22%;
  transform: none;
  margin: 0;
  width: auto;
  max-width: none;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  text-align: center;
  font-family: "Baloo 2", "Outfit", sans-serif;
  font-weight: 800;
  font-size: clamp(1.35rem, 4.8vw, 4.6rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff;
  -webkit-text-stroke: 0.06em #1a1a1a;
  paint-order: stroke fill;
  text-shadow:
    0 0.06em 0 #ff4fa8,
    0 0.12em 0 #7a4dff,
    0 0.18em 0.12em rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.hero-line span {
  display: inline-block;
  flex: 1 1 0;
  margin: 0;
  text-align: center;
  opacity: 0;
  transform: scale(0.7);
}
.hero-line span.is-on {
  opacity: 1;
  animation: word-pop 0.32s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes word-pop {
  0% { opacity: 0; transform: scale(0.7); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.hero-sound {
  position: absolute;
  z-index: 3;
  right: 0.75rem;
  bottom: 0.75rem;
  background: rgba(249, 248, 244, 0.94);
  color: var(--ink);
  border: 1.5px solid var(--bubble-outline);
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}
.hero-sound:hover { background: var(--teal); }

.jen-intro { padding: 1.35rem 0 0.15rem; }

.hero h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.5rem, 6.5vw, 5.55rem);
  line-height: 0.86;
  letter-spacing: 0.005em;
  text-align: center;
  text-transform: uppercase;
}

.scribble {
  position: relative;
  display: inline-block;
  color: transparent;
  background-image: linear-gradient(
    180deg,
    #161616 0%,
    #161616 58%,
    #ff2d55 70%,
    #ff8a1a 78%,
    #ffe14a 84%,
    #3dcc5a 89%,
    #2aa8ff 94%,
    #9b4dff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0.04em 0 rgba(255, 45, 85, 0.18));
}

.hero-sub {
  font-family: "Caveat", cursive;
  font-size: clamp(1.7rem, 4.2vw, 2.35rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #1a1a1a;
  text-align: center;
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem; }
.hero-shop { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; }
.store-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.store-glitter { position: relative; overflow: hidden; isolation: isolate; }
.store-glitter > span { position: relative; z-index: 1; }
.store-glitter::before,
.store-glitter::after {
  content: "";
  position: absolute;
  inset: -40% 0;
  pointer-events: none;
  z-index: 0;
}
.store-glitter::before {
  background-image:
    radial-gradient(circle, rgba(255,255,255,1) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,236,160,0.95) 0 1.1px, transparent 1.8px);
  background-size: 18px 14px, 26px 20px;
  animation: store-glitter 1.6s linear infinite, store-flash 0.9s ease-in-out infinite;
}
.store-glitter::after {
  background-image:
    radial-gradient(circle, #fff 0 1.2px, transparent 1.9px),
    linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.7) 50%, transparent 58%);
  background-size: 22px 16px, 160% 100%;
  animation: store-sheen 2.2s ease-in-out infinite;
}
@keyframes store-glitter {
  from { background-position: 0 0, 8px 4px; }
  to { background-position: 18px -14px, -10px 12px; }
}
@keyframes store-flash {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@keyframes store-sheen {
  0% { background-position: 0 0, -80% 0; }
  100% { background-position: 10px -8px, 140% 0; }
}
.btn-teal,
.btn-outline {
  font-family: "Baloo 2", "Outfit", sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #fffefb;
  background:
    radial-gradient(circle at 18% 28%, rgba(255, 248, 236, 0.95) 0%, transparent 36%),
    radial-gradient(circle at 72% 18%, rgba(255, 214, 92, 0.9) 0%, transparent 34%),
    radial-gradient(circle at 38% 78%, rgba(255, 110, 176, 0.85) 0%, transparent 40%),
    radial-gradient(circle at 82% 72%, rgba(176, 120, 255, 0.9) 0%, transparent 42%),
    radial-gradient(circle at 55% 48%, rgba(255, 168, 120, 0.75) 0%, transparent 48%),
    linear-gradient(128deg, #ffb3d4, #e4b6ff 42%, #ffe7a8);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.95), 0 1px 2px rgba(90, 30, 70, 0.28);
  box-shadow: 0 8px 18px rgba(180, 90, 160, 0.28);
}
.btn-teal:hover,
.btn-outline:hover { filter: brightness(1.06); color: #fff; }
.btn-bubble {
  font-family: "Baloo 2", "Outfit", sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #111;
  background:
    radial-gradient(circle at 18% 28%, rgba(255, 248, 236, 0.95) 0%, transparent 36%),
    radial-gradient(circle at 72% 18%, rgba(255, 214, 92, 0.9) 0%, transparent 34%),
    radial-gradient(circle at 38% 78%, rgba(255, 110, 176, 0.85) 0%, transparent 40%),
    radial-gradient(circle at 82% 72%, rgba(176, 120, 255, 0.9) 0%, transparent 42%),
    radial-gradient(circle at 55% 48%, rgba(255, 168, 120, 0.75) 0%, transparent 48%),
    linear-gradient(128deg, #ffb3d4, #e4b6ff 42%, #ffe7a8);
  border: 1px solid var(--bubble-outline);
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 8px 18px rgba(180, 90, 160, 0.28);
}
.btn-bubble:hover { filter: brightness(1.06); color: #111; }
.btn-mini {
  padding: 0.38rem 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  border-radius: 999px;
}
.hero-shop > .btn-bubble { font-size: 1.15rem; padding: 0.7rem 1.4rem; }

.btn-bubble .shop-arrow {
  font-size: 1.35rem;
  line-height: 1;
  color: #111;
  text-shadow: none;
  animation: arrow-wave 1.1s ease-in-out infinite, arrow-spark 0.7s ease-in-out infinite;
}
.btn-bubble .shop-arrow-left { animation-name: arrow-wave, arrow-spark; }
.btn-bubble .shop-arrow-right { animation-name: arrow-wave-right, arrow-spark; }
@keyframes arrow-wave {
  0%, 100% { transform: translateX(0) rotate(-10deg); }
  50% { transform: translateX(5px) rotate(8deg); }
}
@keyframes arrow-wave-right {
  0%, 100% { transform: scaleX(-1) translateX(0) rotate(-10deg); }
  50% { transform: scaleX(-1) translateX(5px) rotate(8deg); }
}
@keyframes arrow-spark {
  0%, 100% { filter: brightness(1); opacity: 0.8; }
  50% { filter: brightness(1.9); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-bubble .shop-arrow { animation: none; }
}

.jen-actions { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0.7rem; width: 100%; }
.jen-actions .btn { flex: 1 1 0; justify-content: center; text-align: center; color: #111; text-shadow: none; min-width: 0; padding-inline: 0.8rem; font-size: 1.12rem; }
.jen-actions .btn:hover { color: #111; }

.jen-card {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  background: rgba(255, 252, 247, 0.94);
  border-radius: 26px;
  overflow: hidden;
  min-height: 360px;
  box-shadow: var(--shadow);
  position: relative;
}

.jen-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 42%;
  min-height: 240px;
}

.jen-copy {
  padding: 1.35rem 1.25rem 1.25rem 1.1rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wing-heart {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 92px;
  height: auto;
}

.jen-copy h2 {
  margin: 0.2rem 2.2rem 0.65rem 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.7rem, 2.3vw, 2.25rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.jen-copy h2 em {
  font-style: italic;
  font-weight: 800;
}

.jen-copy p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 28rem;
}

/* Categories + products ------------------------------------------ */

.band { padding: 1.6rem 0 0.4rem; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}

.cat-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.cat-card img {
  width: 100%;
  aspect-ratio: 16 / 6.4;
  object-fit: cover;
  object-position: center 32%;
  transition: transform 0.35s ease;
}
.cat-card.tall img {
  aspect-ratio: 4 / 5;
  object-position: center 18%;
}
.cat-card.keychain img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center; background: #fff; height: auto; }
.cat-card.fit img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center 46%; height: auto; }
.cat-card.earrings img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center center; height: auto; }
/* Earrings cover = Jen's pink-haired KISS photo with its flat pink wall swapped for the yellow background sampled from
   her sunglasses photo (graphics/earcover-kiss-yellow.png, 864x1152; model, hair, earring and clothes are the original pixels;
   only the wall and the edge pixels were re-composited). Shown through <picture> (WebP + JPG).
   Square card (65%): most of the crop comes off the TOP -> source rows ~187-1051: top of the ponytail loop trimmed;
   bangs, eye, lips, the full KISS earring, choker, neck and jacket collar in.
   Gallery page: tiles there render ~0.48:1 portrait (pre-existing), full height shows, sides cropped (centred: nose to earring in). */
picture.ear-cover { display: block; width: 100%; overflow: hidden; }
.cat-card.earrings picture.ear-cover img { object-position: 50% 65%; }
.gallery-grid picture.ear-cover img { object-position: 50% 50%; }
.cat-card:hover img { transform: scale(1.04); }
.cat-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  margin: 0.7rem 0.75rem 0.85rem;
  padding: 0.55rem 1rem;
  font-family: "Baloo 2", "Outfit", sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  font-size: 1.05rem;
  color: #111;
  background:
    radial-gradient(circle at 18% 28%, rgba(255, 248, 236, 0.95) 0%, transparent 36%),
    radial-gradient(circle at 72% 18%, rgba(255, 214, 92, 0.9) 0%, transparent 34%),
    radial-gradient(circle at 38% 78%, rgba(255, 110, 176, 0.85) 0%, transparent 40%),
    radial-gradient(circle at 82% 72%, rgba(176, 120, 255, 0.9) 0%, transparent 42%),
    radial-gradient(circle at 55% 48%, rgba(255, 168, 120, 0.75) 0%, transparent 48%),
    linear-gradient(128deg, #ffb3d4, #e4b6ff 42%, #ffe7a8);
  border: 1px solid var(--bubble-outline);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(180, 90, 160, 0.28);
}
.cat-card:hover .cat-bar { filter: brightness(1.06); }
.cat-bar .fit-label { text-transform: none; letter-spacing: 0.01em; font-size: 1.05rem; }
.cat-bar .arrow { display: inline-flex; }
.cat-bar .arrow svg { width: 18px; height: 18px; }

.section-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 2.4rem 0 1.2rem;
}

.section-head h2,
.page-hero h1,
.product-info h1 {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0;
}

.section-head h2 { font-size: clamp(2rem, 4vw, 2.8rem); }

.burst { display: inline-flex; gap: 3px; }
.burst i {
  display: block;
  width: 7px;
  height: 16px;
  border-radius: 4px;
}
.burst i:nth-child(1) { background: #7ec8c6; transform: rotate(-28deg); }
.burst i:nth-child(2) { background: #ff5d8f; transform: rotate(-8deg); height: 20px; }
.burst i:nth-child(3) { background: #ffcf70; transform: rotate(18deg); }
.burst.flip { transform: scaleX(-1); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem 0.55rem;
  padding-bottom: 1rem;
}

.sneak { padding: 1.2rem 0 0.4rem; }
.sneak-lede {
  text-align: center;
  max-width: 34rem;
  margin: -0.4rem auto 1.1rem;
}
.sneak-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  width: 100%;
}
.sneak-one { grid-template-columns: 1fr; width: 100%; }
.sneak-one figure { width: 100%; }
.sneak-grid figure {
  margin: 0;
  background: #05060a url("assets/images/neon-clouds.jpg?v=3&_ship=n9vd63j") center / 140% auto no-repeat;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  text-align: center;
  position: relative;
  isolation: isolate;
  animation: cloud-drift 14s ease-in-out infinite alternate;
}
@keyframes cloud-drift {
  from { background-position: 40% 40%; }
  to { background-position: 60% 60%; }
}
.sneak-grid img { position: relative; z-index: 2; mix-blend-mode: screen; }
.sneak-grid figcaption { position: relative; z-index: 3; color: #fff; }
.sneak-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
  background: transparent;
}
.sneak-grid figcaption {
  padding: 0.65rem 0.4rem 0.8rem;
  font-family: "Baloo 2", "Outfit", sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.86rem;
}
.sneak-cta { text-align: center; margin: 1.15rem 0 0.2rem; }
@media (max-width: 800px) {
  .sneak-one, .sneak-grid { grid-template-columns: 1fr; width: 100%; }
}

.product-card { text-align: left; color: inherit; }
.pair-photo { display: grid; grid-template-columns: 1fr 1fr; }
.pair-photo.trio { grid-template-columns: 1fr 1fr 1fr; }
.pair-photo.stack { grid-template-columns: 1fr; }
.pair-photo.stack img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; }
.pair-photo img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center 18%; }
.product-photo {
  display: block;
  background: #f4f1ea;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: none;
  border: 1px solid rgba(0,0,0,0.06);
}
.product-photo img,
.product-photo .ph {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.product-card:hover .product-photo img { transform: scale(1.03); }
.product-photo img { transition: transform 0.35s ease; }
.product-name {
  display: block;
  margin-top: 0.4rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.78rem;
  line-height: 1.25;
}
.product-sub { display: block; color: var(--muted); font-size: 0.72rem; margin-top: 0.08rem; }
.product-price { display: block; font-weight: 700; margin-top: 0.12rem; font-size: 0.82rem; color: #1a1a1a; }

.ph {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 28% 30%, #ff6fa5 0 28%, transparent 42%),
    radial-gradient(circle at 70% 32%, #ffd166 0 30%, transparent 46%),
    radial-gradient(circle at 48% 72%, #3dccc7 0 32%, transparent 48%),
    radial-gradient(circle at 78% 78%, #c9a0ff 0 22%, transparent 40%),
    #fff6ee;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1.35rem;
  line-height: 0.95;
}

.status-note { color: var(--muted); text-align: center; }

/* Newsletter ------------------------------------------------------ */

.newsletter { padding: 2rem 0 0.5rem; }

.news-band {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(90deg, #f6e7c4 0%, #fbf8f2 28%, #fbf8f2 72%, #d9f3ee 100%);
  text-align: center;
  padding: 2.5rem 1.4rem 2.1rem;
  min-height: 210px;
}

.wave {
  position: absolute;
  top: 0;
  height: 100%;
  width: 28%;
  pointer-events: none;
}
.wave-l { left: 0; }
.wave-r { right: 0; }

.news-copy { position: relative; z-index: 1; }
.news-copy h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 2.7rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.news-copy p { margin: 0.45rem auto 0; max-width: 34rem; font-size: 0.98rem; }

.news-form {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.4rem;
  max-width: 540px;
  margin: 1.1rem auto 0;
  background: #fff;
  border-radius: 14px;
  padding: 5px;
  border: 1px solid #ece7de;
}
.news-form input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.75rem 0.9rem;
  min-width: 0;
}
.news-form input:focus { outline: none; }
.news-form:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }

.thanks { margin: 1rem 0 0; font-weight: 600; }

/* Footer ---------------------------------------------------------- */

.site-footer { padding: 1.4rem 0 2rem; }

.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem 1.5rem;
}

.footer-logo { width: 92px; }

.footer-nav { text-align: center; }
.footer-nav a {
  display: inline-block;
  margin: 0.2rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-nav a.footer-url {
  display: block;
  margin-top: 0.45rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  font-size: 0.95rem;
}

.footer-tag {
  font-family: var(--hand);
  font-size: 1.55rem;
  line-height: 1.1;
  transform: rotate(-8deg);
  text-align: right;
  max-width: 11rem;
}
.footer-tag .heart { color: #e23b78; font-style: normal; }

/* Inner pages ----------------------------------------------------- */

.page-hero { padding: 1.4rem 0 0.4rem; }
.page-hero h1 { font-size: clamp(3rem, 6vw, 4.6rem); max-width: 16ch; }
.eyebrow {
  margin: 0 0 0.35rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
  color: #3d6f6e;
}
.lede { max-width: 40rem; font-size: 1.08rem; margin: 0.8rem 0 0; }
.prose { max-width: 42rem; }
.prose p { margin: 0 0 0.9rem; }

.about-grid,
.pd-grid,
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 1.5rem 2rem;
  align-items: center;
  padding: 1rem 0 2rem;
}
.about-grid img,
.frame img {
  width: 100%;
  border-radius: 24px;
  object-fit: cover;
  aspect-ratio: 16 / 11;
  box-shadow: var(--shadow);
}

.stack { display: grid; gap: 0.7rem; margin: 1rem 0 1.2rem; }
.stack div {
  background: #fff;
  border-radius: 14px;
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow);
}
.stack strong { display: block; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.82rem; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-bottom: 2rem;
}
.gallery-grid figure { margin: 0; }
.gallery-grid img,
.gallery-grid .ph {
  width: 100%;
  aspect-ratio: 1 / 0.86;
  object-fit: cover;
  border-radius: 18px;
  background: #fff;
}
.gallery-grid figcaption {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.form {
  display: grid;
  gap: 0.75rem;
  max-width: 640px;
  padding-bottom: 2.5rem;
}
.form label { display: grid; gap: 0.3rem; font-weight: 600; font-size: 0.92rem; }
.form input,
.form select,
.form textarea {
  background: #fff;
  border: 1.5px solid #e4dfd6;
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
}
.form textarea { min-height: 140px; resize: vertical; }
.form-note { color: var(--muted); font-size: 0.88rem; margin: 0; }

.pd-grid { align-items: start; padding-top: 1.4rem; }
.pd-photo img,
.pd-photo .ph {
  width: 100%;
  border-radius: 24px;
  aspect-ratio: 1 / 0.92;
  object-fit: cover;
  background: #fff;
  box-shadow: var(--shadow);
}
.product-info h1 { font-size: clamp(2.8rem, 5vw, 4.2rem); }
.product-info .price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2rem;
  margin: 0.3rem 0 0.6rem;
}
.qty-row { display: flex; gap: 0.6rem; align-items: center; margin: 1rem 0; }
.fine { color: var(--muted); font-size: 0.9rem; }
.back { display: inline-block; margin-bottom: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; font-weight: 700; }

.related { padding-bottom: 2rem; }
.related h2 {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 2rem;
}

/* Overlays -------------------------------------------------------- */

.overlay[hidden], .drawer[hidden] { display: none; }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 24, 20, 0.4);
  z-index: 70;
  display: grid;
  place-items: start center;
  padding: 10vh 1rem 1rem;
}

.modal {
  background: var(--bg);
  width: min(520px, 100%);
  border-radius: 20px;
  padding: 1.2rem 1.2rem 1.3rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}
.modal h2, .drawer h2 {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
  font-size: 2rem;
}
.modal-head, .drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.close-x {
  border: 1.5px solid var(--bubble-outline);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

#search-input {
  width: 100%;
  border: 1.5px solid #e4dfd6;
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  background: #fff;
  margin: 0.4rem 0 0.8rem;
}
.search-hit {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.45rem 0;
  border-top: 1px solid #ece7de;
}
.search-hit img, .search-hit .ph { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; aspect-ratio: auto; font-size: 0.7rem; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(400px, 100%);
  background: var(--bg);
  z-index: 80;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.1rem 1.2rem;
}
.drawer-items { flex: 1; overflow: auto; }
.cart-line {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0.7rem;
  padding: 0.7rem 0;
  border-top: 1px solid #ece7de;
}
.cart-line img, .cart-line .ph { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; aspect-ratio: auto; font-size: 0.7rem; }
.cart-line h3 { margin: 0; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; }
.cart-line p { margin: 0.15rem 0; }
.linkish { text-decoration: underline; font-size: 0.85rem; background: none; border: 0; padding: 0; }
.drawer-foot { border-top: 1px solid #ece7de; padding-top: 0.8rem; }
.subtotal { display: flex; justify-content: space-between; font-weight: 700; margin: 0 0 0.4rem; }

/* Responsive ------------------------------------------------------ */

@media (max-width: 980px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid, .pd-grid, .split { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 0.55rem 0.4rem; }
  .jen-card { min-height: 0; }
  .footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-tag { transform: none; text-align: center; }
}

@media (max-width: 860px) {
  .hero-scrim { display: none; }
  .hero-copy {
    position: static;
    width: auto;
    max-width: none;
    padding: 1.05rem 0.1rem 0.15rem;
    pointer-events: auto;
  }
  .menu-toggle { display: none; }
  .nav-wrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 0;
    padding: 0.35rem 0.45rem;
    gap: 0.25rem;
  }
  .logo-link { width: 52px; flex: 0 0 auto; }
  .nav-tools { margin-left: auto; flex: 0 0 auto; }
  .icon-btn { width: 32px; height: 32px; }
  .icon-btn svg { width: 20px; height: 20px; }
  .primary-nav {
    display: flex;
    position: static;
    order: 0;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: 0;
    padding: 0 0.35rem 0 0.45rem;
    gap: 0.55rem;
    min-width: 0;
  }
  .primary-nav > a,
  .primary-nav > .nav-item > a {
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: #ff7ec6;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1.5px;
    letter-spacing: 0.03em;
    -webkit-text-stroke: 0;
    text-shadow: none;
    color: #111;
  }
  .nav-item { flex-wrap: wrap; }
  .dropdown {
    position: absolute;
    display: none;
    background: #fff;
    border: 1.5px solid var(--bubble-outline);
    min-width: 180px;
  }
  .nav-item.is-open .dropdown,
  .nav-item:focus-within .dropdown { display: block; }
  .chev { display: inline-flex; }
  .cat-grid, .gallery-grid { grid-template-columns: 1fr; }
  .util { letter-spacing: 0.06em; font-size: 0.62rem; padding-inline: 0.7rem; }
  .util p:nth-child(2) { display: none; }
}

@media (max-width: 560px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem 0.4rem; }
  .jen-card { grid-template-columns: 1fr; }
  .hero h1 { font-size: 3.3rem; }
  .news-form { flex-direction: column; background: transparent; border: 0; padding: 0; }
  .news-form input { background: #fff; border-radius: 12px; border: 1px solid #ece7de; }
  .hero-shop { width: 100%; }
  .hero-shop > .btn { width: 100%; }
  .store-row { width: 100%; }
  .store-row .btn { flex: 1 1 0; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-wrap::before, .nav-wrap::after { animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

.cloud-stage { background: #8fd4ff !important; animation: none !important; min-height: 280px; }
.float-cloud { position: absolute; z-index: 1; pointer-events: none; width: 46%; opacity: 0.95; }
.float-cloud img { width: 100%; height: auto; mix-blend-mode: screen; display: block; }
.c1 { top: 6%; animation: float-by 16s linear infinite; }
.c2 { top: 28%; animation: float-by 20s linear infinite; animation-delay: -6s; }
.c3 { top: 52%; animation: float-by 18s linear infinite; animation-delay: -11s; }
.c4 { top: 8%; animation: float-by 22s linear infinite; animation-delay: -14s; width: 38%; }
.c5 { top: 62%; animation: float-by 19s linear infinite; animation-delay: -3s; width: 40%; }
@keyframes float-by {
  from { left: -50%; }
  to { left: 110%; }
}
.neon-sign { position: relative; z-index: 2; mix-blend-mode: normal; background: transparent; }
.float-cloud, .float-cloud img { background: transparent; border: 0; outline: 0; box-shadow: none; }



/* Phone layout: this block used to apply on EVERY screen (body capped at 430px), so desktop looked like a phone.
   desktop1: scoped to phones only (<=767px). Below 768px it is byte-for-byte the same rules as before. */
@media (max-width: 767px) {
  body {
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
  }
  .wrap { width: min(430px, calc(100% - 24px)); }
  .hero-scrim { display: none !important; }
  .hero-copy {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    padding: 1.05rem 0.1rem 0.15rem !important;
    pointer-events: auto;
  }
  .nav-wrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    min-height: 0 !important;
    padding: 0.35rem 0.45rem !important;
    gap: 0.25rem !important;
  }
  .logo-link { width: 52px !important; }
  .icon-btn { width: 32px !important; height: 32px !important; }
  .icon-btn svg { width: 20px !important; height: 20px !important; }
  .primary-nav {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 0.55rem !important;
    padding: 0 0.35rem 0 0.45rem !important;
  }
  .primary-nav > a,
  .primary-nav > .nav-item > a { font-size: 0.78rem !important; }
  .cat-grid, .gallery-grid, .jen-card, .about-grid, .pd-grid, .split, .footer-inner {
    grid-template-columns: 1fr !important;
  }
  .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem 0.4rem !important; }
  .hero h1 { font-size: 3.3rem !important; }
  .hero-shop, .hero-shop > .btn, .store-row { width: 100% !important; }
  .footer-inner { justify-items: center; text-align: center; }
}

.pair-photo [data-zoom], .pd-photo [data-zoom] { cursor: zoom-in; }
.photo-zoom {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 8, 12, 0.88);
  display: grid;
  place-items: center;
  padding: 1.2rem;
}
.photo-zoom[hidden] { display: none; }
.photo-zoom img { max-width: min(960px, 100%); max-height: 92vh; object-fit: contain; border-radius: 12px; }
.photo-zoom .close-x { position: absolute; top: 0.8rem; right: 0.8rem; }

/* Product banner in Jen's pink baroque frame (1432x1213, used exactly as uploaded, scaled evenly only) -----------
   Overlay = banner-pink-frame.webp (quality 95, PSNR 46 dB vs lossless) + .png fallback (lossless, oxipng), full source resolution. Retouch: the photo's damaged left
   side (expand icon over the top-left ornament, bottom-left ornament cut off by the screenshot) was rebuilt as
   the exact mirror of the intact right side after straightening the photo's slight perspective
   (banner-frame/build/frames/pink_symm.py); cut out with frame_cutout.py. The banner takes the frame's own
   aspect ratio; height is capped at 76vh; desktop width as roses2 (max 560px).
   Big products (as rosesframe2): the video is scaled so the product band (video rows 304-819 of 1080, the
   tallest keychains / earrings included) fills 77% of the frame's clear opening height, centred on it
   (scale 1.0406 frame-px per video-px). object-fit: cover crops the video's left/right (products enter and exit at
   the frame's inner edge); clip-path trims the element to the opening backing, which runs 6 source px under
   the frame's inner edge, so no gap shows anywhere. No card: soft drop shadow on the frame outline. */
.hero-product-banner {
  --banner-w: min(100%, calc(76vh * 1432 / 1213));
  position: relative;
  flex: 0 0 auto;
  width: var(--banner-w);
  max-width: 100%;
  min-width: 0;              /* flex/grid: don't grow to marquee intrinsic image width */
  aspect-ratio: 1432 / 1213;
  margin: 0.6rem calc((100% - var(--banner-w)) / 2) 0.9rem;
  border: 0;
  border-image: none;
  border-radius: 0;
  overflow: visible;         /* keep frame drop-shadow; marquee clips itself */
  line-height: 0;
  background: transparent;   /* no card: the frame hangs on the page */
  box-shadow: none;
  isolation: isolate;
  contain: layout;           /* isolate from overflowing marquee descendants */
}
@media (min-width: 720px) {   /* desktop: a bit wider than the 403px column, still proportional + height-capped */
  .hero-product-banner { --banner-w: min(560px, calc(100vw - 48px), calc(76vh * 1432 / 1213)); }
}
@supports not (aspect-ratio: 1 / 1) {
  .hero-product-banner { height: 0; padding-top: 84.707%; width: 100%; margin-left: 0; margin-right: 0; }
}
.hero-product-banner::before {   /* opening backing (video background colour) */
  content: "";
  position: absolute;
  left: 18.087%; top: 20.610%; width: 63.827%; height: 59.357%;
  background: #ffffff;
  z-index: 0;
}
.hero-product-banner .product-banner-video {
  position: absolute;
  left: 18.087%;    /* = opening backing, horizontally */
  top: 2.200%;
  width: 63.827%;
  height: 92.652%;    /* = full scaled video height */
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 50%;
  clip-path: inset(19.870% 0 16.066% 0);   /* show only the opening backing area */
  border-radius: 0;
  background: #ffffff;
  z-index: 1;
}
.hero-product-banner .lightning-overlay,
.hero-product-banner .lightning-overlay img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.hero-product-banner .lightning-overlay img {
  filter: drop-shadow(0 1px 1px rgba(60, 20, 40, 0.30)) drop-shadow(0 6px 9px rgba(50, 16, 34, 0.24));
}

/* Product marquee inside the pink frame opening (JS fills .pb-track).
   Must be out-of-flow: without this, banner webps lay out at intrinsic size and
   inflate .hero-product-banner width; aspect-ratio then stretches the frame. */
.hero-product-banner .pb-marquee {
  position: absolute;
  left: 18.087%;
  top: 20.610%;
  width: 63.827%;
  height: 59.357%;
  overflow: hidden;
  z-index: 1;
  background: #ffffff;
  pointer-events: none;
}
.hero-product-banner .pb-track {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-product-banner .pb-item {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 73%;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.hero-product-banner .pb-item img {
  display: block;
  max-width: 92%;
  max-height: 92%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* headline sits closer to the banner (was the default 1em paragraph margin) */
.hero-copy .hero-sub { margin-bottom: 0.35rem; }
/* end pink frame */

/* Netlify Forms (contactmail1): honeypot stays hidden; send-error line in the site's muted-pink alert style. */
.hp-field { display: none !important; }
.form-status { margin: 0.4rem 0 0; padding: 0.55rem 0.8rem; border-radius: 12px; border: 1px solid #f2b8cf; background: #fff0f6; color: #8a1f4a; font-size: 0.9rem; font-weight: 600; }
.form-status[hidden] { display: none; }
.news-copy .form-status { margin-top: 0.6rem; }
.form button[disabled], .news-form button[disabled] { opacity: 0.7; cursor: progress; }
.form[hidden], .news-form[hidden] { display: none; }   /* hide the form once it has been sent (display:grid/flex beat [hidden]) */

/* hide the "Powered by Netlify" badge iframe injected by /.netlify/scripts/hud (approved by Jen) */
#nl-badge-frame { display: none !important; }

/* about photo picture wrapper: keep img as the layout child */
.jen-pic { display: contents; }
/* About page hero: frame Jen plus the gloved hand and pour (portrait crop on narrow layouts) */
.about-grid .jen-pic img { object-position: 18% 50%; }

/* =====================================================================================================
   desktop1: tablet + desktop layout. Everything below is inside min-width media queries, so phones
   (<=767px) render exactly as before. Same brand styles (colours, fonts, bubbles, #6e6e6e outlines).
   ===================================================================================================== */
.contact-photo { display: none; }   /* desktop-only photo on the contact page (new element; never shown on phones) */

@media (min-width: 768px) {
  /* the About Jen card is a 2-column grid; <source> inside the display:contents <picture> must not take a cell */
  .jen-pic source { display: none; }

  /* hero: copy stacks under the brand video (as on phones), centred, until there is room for two columns */
  .hero-scrim { display: none; }
  .hero-copy { position: static; width: auto; max-width: none; padding: 1.1rem 0 0.2rem; pointer-events: auto; }
  .hero-actions { justify-content: center; }
  .hero-shop { width: min(100%, 560px); margin-inline: auto; align-items: stretch; }
  .hero-shop > .btn { width: 100%; }
  .store-row { width: 100%; }
  .store-row .btn { flex: 1 1 0; }
  .hero-frame { container-type: inline-size; }
  .hero-line { font-size: 5.1cqw; }   /* same size relative to the video as on phones (4.8vw of a 376px frame) */

  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }

  /* uniform tiles: the width/height attributes (e.g. 1200x780) were overriding aspect-ratio */
  .gallery-grid img, .gallery-grid .ph { height: auto; aspect-ratio: 1 / 1; }
  .gallery-grid picture.ear-cover img { object-position: 50% 65%; }

  /* product cards with a stacked photo set (model / product / profile): one card two columns wide,
     photos side by side, so rows stay even instead of one card being three photos tall */
  .product-grid { grid-auto-flow: row dense; align-items: start; }
  .product-grid:has(.tee-card) { align-items: stretch; }
  .product-grid > .product-card:has(> .pair-photo.stack) { grid-column: span 2; }
  .product-card > .pair-photo.stack { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
  .product-card > .pair-photo.stack img { aspect-ratio: 1 / 1; object-position: center 22%; }
  .product-card > .pair-photo.stack:has(img:nth-child(3)) img { aspect-ratio: 4 / 5; }

  .drawer { width: min(440px, 100%); }
}

@media (min-width: 1024px) {
  :root { --wrap: 1200px; }
  .wrap { width: min(var(--wrap), calc(100% - 64px)); }

  /* header: full-width glitter bar, contents lined up with the page container */
  .util { padding-inline: max(32px, calc((100% - var(--wrap)) / 2)); }
  .nav-wrap { min-height: 104px; padding-inline: max(28px, calc((100% - var(--wrap)) / 2)); gap: 1.5rem; }
  .logo-link { width: 96px; }
  .primary-nav { gap: 2rem; }
  .primary-nav > a, .primary-nav > .nav-item > a { font-size: 1.12rem; }
  .menu-toggle { display: none; }

  /* hero: brand video left, headline + shop buttons right; the framed product banner centred below */
  .hero { padding-top: 1.4rem; }
  .hero-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr auto;
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  .hero-frame { grid-column: 1; grid-row: 1 / 6; align-self: center; }
  .hero-copy, .hero-actions { display: contents; }
  .hero-copy h1 { grid-column: 2; grid-row: 2; font-size: clamp(4rem, 6.4vw, 5.8rem); }
  .hero-copy .hero-sub { grid-column: 2; grid-row: 3; margin: 1rem 0 1.5rem; font-size: clamp(2rem, 2.6vw, 2.5rem); }
  .hero-shop { grid-column: 2; grid-row: 4; justify-self: center; width: min(100%, 25rem); margin: 0; }
  .hero-shop > .btn-bubble { font-size: 1.25rem; padding: 0.85rem 1.4rem; }
  .store-row .btn-mini { font-size: 0.9rem; padding: 0.5rem 0.8rem; }
  .hero-product-banner {
    --banner-w: min(640px, calc(76vh * 1432 / 1213));
    grid-column: 1 / -1;
    grid-row: 6;
    justify-self: center;
    margin: 2.2rem 0 0.6rem;
  }

  /* About Jen card: photo left, text right */
  .jen-intro { padding-top: 2.2rem; }
  .jen-card { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 430px; }
  .jen-card img { min-height: 430px; object-position: 50% 40%; }
  .jen-copy { padding: 2.6rem 3rem 2.4rem 2.8rem; }
  .jen-copy h2 { font-size: clamp(2.4rem, 3vw, 3rem); margin-right: 5.5rem; }
  .jen-copy p { font-size: 1.06rem; max-width: 32rem; }
  .jen-actions { max-width: 30rem; }

  .band { padding-top: 2.4rem; }
  .cat-grid { gap: 1.6rem; }

  .newsletter { padding-top: 2.8rem; }
  .news-band { padding: 3.2rem 2rem 2.8rem; }

  /* product grids: 4 across, readable labels */
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: 1.6rem 1.2rem; }
  .product-name { font-size: 0.95rem; margin-top: 0.55rem; }
  .product-sub { font-size: 0.82rem; }
  .product-price { font-size: 0.95rem; }
  .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 1.4rem 1.1rem; }

  .page-hero { padding-top: 2.4rem; }

  /* About page hero: photo left at its real 16:11 shape, text right */
  .about-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem 3.5rem; padding-bottom: 3rem; }
  .about-grid img { height: auto; }
  .about-grid .jen-pic img { object-position: 50% 50%; }

  /* product page: photos left, details right and sticky while the photos scroll */
  .pd-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2rem 3.5rem; }
  .product-info { position: sticky; top: 150px; }
  .pd-photo .pair-photo.stack { grid-template-columns: 1fr 1fr; gap: 0.9rem; }
  .pd-photo .pair-photo.stack img { border-radius: 18px; }
  .pd-photo .pair-photo.stack img:first-child { grid-column: 1 / -1; aspect-ratio: 1 / 1; }
  .pd-photo .pair-photo.stack:not(:has(img:nth-child(3))) img { grid-column: auto; }

  /* contact page: intro (+ photo of Jen) left, form right */
  body[data-page="contact"] main {
    width: min(var(--wrap), calc(100% - 64px));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: 4rem;
    align-items: start;
  }
  body[data-page="contact"] main > section > .wrap { width: auto; }
  body[data-page="contact"] main > section:not(.page-hero) { padding-top: 2.4rem; }
  .contact-photo { display: block; margin-top: 1.6rem; }
  .contact-photo img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 45%; border-radius: 24px; box-shadow: var(--shadow); }
  .form { max-width: none; }

  /* footer: three columns lined up with the container */
  .site-footer { padding-top: 2.4rem; }
  .footer-inner { grid-template-columns: 1fr auto 1fr; }
  .footer-tag { justify-self: end; }
}

@media (min-width: 1024px) {
  /* finishing touches */
  .page-hero h1 { max-width: 22ch; }
  .product-info #add-to-cart { font-size: 1.1rem; padding: 0.9rem 2.4rem; margin-top: 0.4rem; }
  .product-info p { max-width: 34rem; }
  .prose .btn { font-size: 1.05rem; padding: 0.8rem 1.6rem; }
  .news-band { background: linear-gradient(90deg, #f6e7c4 0%, #fbf8f2 36%, #fbf8f2 64%, #d9f3ee 100%); }
  .wave { width: 22%; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* tablet header: keep the phone-style single row, but group the links instead of spreading them edge to edge */
  .logo-link { width: 68px; }
  .primary-nav { justify-content: center; gap: 2.2rem; }
}

/* desktop2: gallery 'In the studio' tile uses the new About photo; picture wrapper behaves like the old block <img> */
.gallery-grid picture.studio-pic { display: block; width: 100%; overflow: hidden; border-radius: 18px; }
.gallery-grid picture.studio-pic img { object-position: 48% 40%; }

/* opensoon1: "Opening Soon" sash. Big tilted ribbon layered over the top of the hero (homepage only).
   The wrapper covers the hero section and clips the ribbon (no sideways scroll). It sits under the sticky
   header (z 40) and ignores clicks, so the video, Mute and shop buttons keep working; only the Instagram
   link is clickable. */
.os-ribbon-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 6;
}
.os-ribbon {
  position: absolute;
  left: -15%;
  width: 130%;
  top: 58px;
  transform: rotate(-7deg);
  transform-origin: 50% 50%;
  padding: 0.55rem 0 0.6rem;
  text-align: center;
  background:
    radial-gradient(circle, rgba(255,255,255,0.95) 0 1px, transparent 1.7px) 0 0 / 30px 24px,
    radial-gradient(circle, rgba(255,236,160,0.95) 0 1.2px, transparent 1.9px) 11px 8px / 47px 35px,
    linear-gradient(100deg, #ffc2da 0%, #f0c8ff 30%, #ffd9ea 55%, #ffe6a6 80%, #ffc2da 100%);
  border-top: 2px solid var(--bubble-outline);
  border-bottom: 2px solid var(--bubble-outline);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,0.65),
    inset 0 -3px 0 rgba(255,255,255,0.45),
    0 14px 30px rgba(120, 40, 90, 0.28),
    0 3px 8px rgba(60, 20, 50, 0.18);
}

.os-band { display: none; }
.os-ribbon::before,
.os-ribbon::after {   /* stitched edge lines, like a satin sash */
  content: "";
  position: absolute;
  left: 0; right: 0;
  border-top: 1.5px dashed rgba(255,255,255,0.9);
}
.os-ribbon::before { top: 6px; }
.os-ribbon::after { bottom: 6px; }
.os-title {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  font-family: var(--display);
  font-weight: 900;
  font-size: 48px;
  line-height: 0.92;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #161616;
  text-shadow: 0 0.045em 0 #fff, 0 0.09em 0 #ff5fa6, 0 0.14em 0.08em rgba(70, 20, 60, 0.25);
}
.os-spark { font-size: 0.55em; color: #a777ff; text-shadow: 0 1px 0 #fff; }
.os-heart { font-size: 0.55em; color: #e23b78; text-shadow: 0 1px 0 #fff; }
.os-sub {
  margin: 0.2rem 0 0;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.1;
  color: #1a1a1a;
}
.os-sub a {
  pointer-events: auto;
  text-decoration: underline;
  text-decoration-color: #ff5fa6;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.15em;
}
.os-sub a:hover { color: #c2185b; }
@media (min-width: 768px) {
  .os-ribbon { top: 150px; transform: rotate(-6deg); }
  .os-title { font-size: 76px; }
  .os-sub { font-size: 1.5rem; }
}
@media (min-width: 1024px) {
  /* desktop: the sash crosses the brand video and ends in a swallowtail just before the headline column,
     so no headline letters are half covered. Its width follows the hero grid (video column = 1.3fr). */
  .os-ribbon {
    --hw: min(1200px, 100% - 64px);
    left: -70px;
    width: calc((100% - var(--hw)) / 2 + (var(--hw) - clamp(2rem, 4vw, 3.5rem)) * 0.5652 + 70px + 34px);
    top: 54px;
    transform: rotate(-6deg);
    padding: 0.75rem 34px 0.8rem 70px;
    background: none;
    border: 0;
    box-shadow: none;
    filter: drop-shadow(0 14px 18px rgba(120, 40, 90, 0.26)) drop-shadow(0 3px 5px rgba(60, 20, 50, 0.2));
  }
  .os-ribbon::before, .os-ribbon::after { display: none; }
  .os-band {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(circle, rgba(255,255,255,0.95) 0 1px, transparent 1.7px) 0 0 / 30px 24px,
      radial-gradient(circle, rgba(255,236,160,0.95) 0 1.2px, transparent 1.9px) 11px 8px / 47px 35px,
      linear-gradient(100deg, #ffc2da 0%, #f0c8ff 35%, #ffd9ea 62%, #ffe6a6 100%);
    clip-path: polygon(0 0, 100% 0, calc(100% - 46px) 50%, 100% 100%, 0 100%);
  }
  .os-band::before {   /* grey outline + stitching drawn inside the clipped band so they follow the swallowtail */
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(var(--bubble-outline), var(--bubble-outline)) top / 100% 2px no-repeat,
      linear-gradient(var(--bubble-outline), var(--bubble-outline)) bottom / 100% 2px no-repeat,
      repeating-linear-gradient(90deg, rgba(255,255,255,0.95) 0 7px, transparent 7px 12px) 0 6px / 100% 1.5px no-repeat,
      repeating-linear-gradient(90deg, rgba(255,255,255,0.95) 0 7px, transparent 7px 12px) 0 calc(100% - 6px) / 100% 1.5px no-repeat;
  }
  .os-ribbon > p { position: relative; }
  .os-title { font-size: clamp(76px, 6.6vw, 104px); }
  .os-sub { font-size: 1.7rem; margin-top: 0.3rem; }
}

/* ribbon link target: keep "Want first dibs?" clear of the sticky header after the smooth scroll */
#join { scroll-margin-top: 110px; }
.os-sub { max-width: 30ch; margin-left: auto; margin-right: auto; font-size: 1.05rem; line-height: 1.05; }
@media (min-width: 768px) { .os-sub { max-width: 40ch; font-size: 1.35rem; } }
@media (min-width: 1024px) { .os-sub { max-width: 34ch; font-size: 1.4rem; line-height: 1.05; } #join { scroll-margin-top: 150px; } }

/* 18+ Fun Designs card + page (CSS graphic, no product photo) */
.cat-card .adult-art { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; transition: transform 0.35s ease;
  background: radial-gradient(circle at 25% 25%, rgba(255,80,200,.75), transparent 45%), radial-gradient(circle at 78% 70%, rgba(80,220,255,.7), transparent 45%), radial-gradient(circle at 60% 20%, rgba(170,90,255,.8), transparent 40%), linear-gradient(135deg,#1a0b3d,#3b0f5e 50%,#0d1a4a); }
.cat-card:hover .adult-art { transform: scale(1.04); }
.adult-stars { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 12% 18%,#fff,transparent), radial-gradient(1.5px 1.5px at 30% 70%,#ffe7a8,transparent), radial-gradient(2px 2px at 70% 12%,#fff,transparent), radial-gradient(1.5px 1.5px at 85% 40%,#ffb3d4,transparent), radial-gradient(2px 2px at 50% 88%,#fff,transparent), radial-gradient(1.5px 1.5px at 20% 45%,#e4b6ff,transparent), radial-gradient(2px 2px at 90% 85%,#fff,transparent), radial-gradient(1.5px 1.5px at 60% 55%,#fff,transparent), radial-gradient(1.5px 1.5px at 40% 30%,#ffe7a8,transparent), radial-gradient(2px 2px at 8% 82%,#fff,transparent); }
.adult-num { position: relative; font-family: "Bagel Fat One", "Baloo 2", sans-serif; font-size: clamp(4rem, 9vw, 7rem); line-height: 1; color: #fff; text-shadow: 0 0 8px #ff4fd8, 0 0 22px #ff4fd8, 0 0 40px #8a5cff; }
.adult-sub { position: relative; font-family: "Pacifico", cursive; color: #ffe7a8; font-size: clamp(1.2rem, 2.4vw, 1.8rem); text-shadow: 0 0 10px #ff9ad6; margin-top: .3rem; }
.adult-soon { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; border: 1.5px dashed var(--bubble-outline); border-radius: 20px; background: linear-gradient(135deg,#1a0b3d,#3b0f5e 50%,#0d1a4a); color: #fff; }
.adult-soon .adult-num { font-size: 4rem; }
.adult-soon p { font-size: 1.2rem; margin: .6rem 0 0; }
.age-gate { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(20,8,45,.88); backdrop-filter: blur(6px); }
.age-gate[hidden] { display: none; }
.age-box { max-width: 440px; width: 100%; text-align: center; background: #fff; border: 1.5px solid var(--bubble-outline); border-radius: 20px; padding: 2rem 1.5rem; box-shadow: var(--shadow); }
.age-box .adult-num { font-size: 3.6rem; display: block; color: #fff; }
.age-box h2 { margin: .6rem 0 .4rem; }
.age-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.2rem; }
@media (min-width: 1100px) { .cat-grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (min-width: 700px) and (max-width: 1099px) { .cat-grid { grid-template-columns: repeat(2, 1fr) !important; } }
.age-actions .btn { color: #111; }

/* T-shirt cards: equal row baselines — photo top, then name, then shared controls */
.product-grid:has(.tee-card) { align-items: stretch !important; }
.tee-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  box-sizing: border-box;
}
.tee-card .product-photo { flex: 0 0 auto; min-width: 0; width: 100%; }
.tee-card .product-photo img { cursor: zoom-in; }
/* Tee product→model gallery: one slide at a time on phone and desktop; dots sit outside the track */
.tee-card .tee-gallery {
  display: flex;
  flex-flow: row nowrap;
  gap: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;
}
.tee-card .tee-gallery::-webkit-scrollbar { display: none; }
.tee-card .tee-gallery > img {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #f4f1ea;
}
.tee-card .tee-gallery > .tee-product-img {
  object-fit: contain;
  object-position: center center;
}
.tee-card .tee-gallery > .tee-model-img {
  object-fit: cover;
  object-position: center 18%;
}
.tee-card > .carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  margin: 0.15rem 0 0;
  padding: 0;
  flex: 0 0 auto;
}
.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  margin: 0.35rem 0 0;
}
.carousel-dot {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.carousel-dot[aria-pressed="true"] {
  background: rgba(0, 0, 0, 0.72);
}
.carousel-dot:focus-visible {
  outline: 2px solid #3dccc7;
  outline-offset: 2px;
}
.tee-card .product-name {
  flex: 0 0 auto;
  /* longest titles wrap to ~2 lines at mobile; reserve 4 for desktop-narrow / long names */
  min-height: calc(4 * 1.25em);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.tee-controls {
  margin-top: auto; /* park price + opts + button on a shared baseline across the row */
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.tee-controls .product-price { margin-top: 0; }
.tee-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.tee-opts label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tee-opts select {
  font: inherit;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
  padding: 8px 10px;
  border: 2px solid var(--bubble-outline, #6e6e6e);
  border-radius: 999px;
  background: #fff;
  color: inherit;
  min-height: 40px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.tee-card .tee-add { margin-top: 0; border: 2px solid var(--bubble-outline, #6e6e6e); width: 100%; box-sizing: border-box; }
.tee-note { min-height: 1em; margin: 0; }
/* Phone 2-col: stack Color above Size so selects never spill into the neighbor */
@media (max-width: 767px) {
  .tee-opts { grid-template-columns: 1fr; gap: 6px; }
  .tee-opts select { font-size: 0.85rem; padding: 7px 10px; min-height: 38px; }
  .tee-opts label { font-size: 0.72rem; }
  .tee-card .product-name { min-height: calc(3 * 1.25em); -webkit-line-clamp: 3; }
}