.nav-links a.active {
  color: var(--text);
}
.nav-links a.active::after {
  width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

    /* ── Reset & Base ─────────────────────────────── */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      /* Brand Palette - see claude.md */
      --color-off-white:  #EFEEED;
      --color-soft-blush: #EFE2DE;
      --color-warm-taupe: #BBABA2;
      --color-deep-stone: #7A766F;
      --color-sage-grey:  #B9BCB1;

      /* Aliases mapped to brand palette */
      --lavender:    #EFE2DE;
      --mint:        #B9BCB1;
      --blush:       #EFE2DE;
      --peach:       #EFE2DE;
      --cream:       #EFEEED;
      --cream-dark:  #EFE2DE;
      --text:        #7A766F;
      --text-light:  #BBABA2;
      --white:       #FFFFFF;
      --shadow:      0 4px 20px rgba(122, 118, 111, .12);
      --radius:      16px;
    }

    html { scroll-behavior: smooth; }

    html, body { overflow-x: clip; }

    body {
      font-family: 'Geist', system-ui, -apple-system, sans-serif;
      color: var(--text);
      background: var(--cream);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      letter-spacing: -0.005em;
    }

    h1, h2, h3, h4 {
      font-family: 'Outfit', 'Geist', system-ui, sans-serif;
      letter-spacing: -0.02em;
    }

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

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

    .container {
      width: 90%;
      max-width: 1140px;
      margin: 0 auto;
    }

    section { padding: 80px 0; position: relative; z-index: 4; }

    .section-title {
      text-align: center;
      font-size: 2rem;
      margin-bottom: .5rem;
      color: var(--text);
    }

    .section-subtitle {
      text-align: center;
      color: var(--text-light);
      font-size: 1.05rem;
      margin-bottom: 48px;
    }

    /* ── Navigation ───────────────────────────────── */
    nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(239, 238, 237, .72);
      backdrop-filter: blur(16px) saturate(140%);
      -webkit-backdrop-filter: blur(16px) saturate(140%);
      border-bottom: 1px solid rgba(187, 171, 162, .25);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .35),
        0 1px 0 rgba(122, 118, 111, .04);
      padding: 0 16px;
    }

    nav .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
    }

    .nav-logo {
      display: inline-flex;
      align-items: center;
      height: 100%;
    }

    .nav-logo-img {
      display: block;
      height: 36px;
      width: auto;
      /* The PNG ships near-white; this filter lands it on deep-stone for the light nav */
      filter: brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(380%) hue-rotate(345deg) brightness(95%) contrast(85%);
      transition: opacity .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
    }

    .nav-logo:hover .nav-logo-img {
      opacity: .75;
      transform: translateY(-1px);
    }

    @media (max-width: 480px) {
      .nav-logo-img { height: 30px; }
    }

    .nav-links { display: flex; gap: 28px; list-style: none; }

    .nav-links a {
      font-size: .9rem;
      font-weight: 500;
      color: var(--text-light);
      transition: color .2s;
    }

    .nav-links a:hover { color: var(--text); }

    .nav-toggle {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
    }

    .nav-toggle span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--text);
      border-radius: 2px;
      transition: .3s;
    }

    /* ── Hero ─────────────────────────────────────── */
    .hero {
      background: linear-gradient(135deg, rgba(239,226,222,.3) 0%, rgba(187,171,162,.18) 50%, rgba(185,188,177,.25) 100%);
      text-align: center;
      padding: 80px 0 100px;
      min-height: calc(100vh - 64px);
      min-height: calc(100dvh - 64px);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      overflow: hidden;
      background-size: 200% 200%;
      animation: gradientShift 10s ease infinite;
    }

    /* Parallax background image (JS-driven, works on all devices) */
    .hero::before {
      content: '';
      position: absolute;
      top: -10%;
      left: 0;
      width: 100%;
      height: 130%;
      background: url('hero/hand-color-light.jpeg') center 40%/cover no-repeat;
      z-index: 0;
      pointer-events: none;
      will-change: transform;
      transform: translate3d(0, var(--bg-offset, 0px), 0);
    }

    .hero h1 {
      font-size: 4.2rem;
      font-weight: 700;
      letter-spacing: -1px;
      margin-bottom: 16px;
      color: var(--text);
      animation: heroEnter .8s cubic-bezier(.22, 1, .36, 1) both;
    }

    .hero-logo {
      display: block;
      width: min(560px, 78vw);
      height: auto;
      margin: 0 auto 20px;
      filter: drop-shadow(0 4px 18px rgba(122, 118, 111, .55)) drop-shadow(0 1px 2px rgba(122, 118, 111, .35));
      animation: heroEnter .9s cubic-bezier(.22, 1, .36, 1) both;
      will-change: transform, opacity;
    }

    @media (max-width: 600px) {
      .hero-logo { width: min(440px, 86vw); }
    }

    .hero p {
      font-size: 1.2rem;
      color: var(--color-off-white);
      max-width: 520px;
      margin: 0 auto 36px;
      animation: heroEnter .8s cubic-bezier(.22, 1, .36, 1) .15s both;
      font-weight: 500;
      text-shadow: 0 2px 14px rgba(122, 118, 111, .55);
    }

    .hero .btn-primary {
      background: linear-gradient(140deg, var(--color-off-white) 0%, var(--color-soft-blush) 100%);
      color: var(--color-deep-stone);
      padding: 16px 30px;
      border-radius: 999px;
      box-shadow:
        0 14px 32px rgba(122, 118, 111, .35),
        inset 0 1px 0 rgba(255, 255, 255, .55);
      position: relative;
      overflow: hidden;
    }

    .hero-cta {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      letter-spacing: .03em;
    }

    .hero-cta-text {
      transition: transform .35s cubic-bezier(.16, 1, .3, 1);
    }

    .hero-cta-arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(122, 118, 111, .14);
      color: var(--color-deep-stone);
      transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .25s ease;
    }

    .hero-cta::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
      transform: translateX(-120%);
      transition: transform .9s cubic-bezier(.16, 1, .3, 1);
      pointer-events: none;
    }

    .hero .btn-primary:hover {
      background: linear-gradient(140deg, var(--color-soft-blush) 0%, var(--color-off-white) 100%);
      color: var(--color-deep-stone);
      box-shadow:
        0 18px 40px rgba(122, 118, 111, .42),
        inset 0 1px 0 rgba(255, 255, 255, .65);
    }

    .hero-cta:hover .hero-cta-arrow {
      transform: translateX(4px);
      background: rgba(122, 118, 111, .22);
    }

    .hero-cta:hover::before {
      transform: translateX(120%);
    }

    .hero .btn-primary:active {
      transform: translateY(0) scale(.97);
    }

    .btn {
      display: inline-block;
      padding: 14px 36px;
      border-radius: 50px;
      font-family: 'Outfit', 'Geist', system-ui, sans-serif;
      font-weight: 600;
      font-size: .95rem;
      letter-spacing: .01em;
      transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1), background .25s ease;
      cursor: pointer;
      border: none;
      will-change: transform;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(122, 118, 111, .15);
    }

    .btn:active {
      transform: translateY(0) scale(.97);
      transition-duration: .12s;
    }

    .btn-primary {
      background: var(--text);
      color: var(--cream);
    }

    .btn-primary:hover {
      background: #7A766F;
    }

    .btn-secondary {
      background: var(--white);
      color: var(--text);
      border: 2px solid var(--lavender);
    }

    .hero .btn {
      animation: heroEnter .8s cubic-bezier(.22, 1, .36, 1) .3s both;
    }

    /* ── Sparkle Canvas ──────────────────────────── */
    #sparkleCanvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    /* ── About ────────────────────────────────────── */
    .about {
      background: var(--white);
      position: relative;
      z-index: 5;
      border-radius: 24px 24px 0 0;
      margin-top: -24px;
      box-shadow: 0 -8px 30px rgba(122,118,111,.06);
    }

    .about-showcase {
      margin-top: 48px;
    }

    .about-showcase-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      max-width: 900px;
      margin: 0 auto;
    }

    .about-showcase-item {
      border-radius: var(--radius);
      overflow: hidden;
      aspect-ratio: 1;
      position: relative;
      transition: transform .35s ease, box-shadow .35s ease;
    }

    .about-showcase-item:hover {
      transform: translateY(-6px) scale(1.03);
      box-shadow: 0 12px 32px rgba(122, 118, 111, .12);
      z-index: 2;
    }

    .about-showcase-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .4s ease;
    }

    .about-showcase-item:hover img {
      transform: scale(1.08);
    }

    /* Crossfade slideshow layers (added by JS) */
    .about-showcase-item--shuffled .about-img-layer {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1), transform .4s ease;
      will-change: opacity;
    }

    .about-showcase-item--shuffled .about-img-layer.is-visible {
      opacity: 1;
    }

    .about-showcase-item--shuffled:hover .about-img-layer.is-visible {
      transform: scale(1.08);
    }

    @media (max-width: 768px) {
      .about-showcase-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }
    }

    @media (max-width: 480px) {
      .about-showcase-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .about-content {
      max-width: 700px;
      margin: 0 auto;
      text-align: center;
    }

    .about-content p {
      font-size: 1.05rem;
      color: var(--text-light);
      line-height: 1.8;
    }

    /* ── Services ─────────────────────────────────── */
    .services { background: var(--white); }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      max-width: 880px;
      margin: 0 auto;
    }

    @media (max-width: 720px) {
      .services-grid { grid-template-columns: 1fr; }
    }

    .service-card {
      background: #EFE2DE;
      border-radius: var(--radius);
      padding: 32px 28px;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
      transition: transform .3s ease, box-shadow .3s ease;
      text-align: left;
    }

    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 32px rgba(122, 118, 111, .1);
    }

    .service-card h3 {
      font-size: 1.15rem;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--lavender);
      color: #7A766F;
    }

    .price-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 6px 0;
      font-size: .9rem;
      color: #7A766F;
    }

    .price-row + .price-row {
      border-top: 1px solid rgba(239, 226, 222, .2);
    }

    .price-row span:last-child {
      font-family: 'Outfit', 'Geist', system-ui, sans-serif;
      font-weight: 700;
      color: #FFFFFF;
      white-space: nowrap;
      margin-left: 12px;
      text-shadow: 0 1px 2px rgba(122, 118, 111, .25);
    }

    .service-card .sub-heading {
      font-size: .8rem;
      font-weight: 600;
      color: var(--text);
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-top: 12px;
      margin-bottom: 4px;
    }

    /* ── Nail-Paint Brush Stroke Reveal ─────────── */

    /* The brush - tilted like someone is actually painting */
    .paint-brush {
      position: absolute;
      right: -15px;
      top: 0;
      width: 50px;
      z-index: 12;
      pointer-events: none;
      opacity: 0;
      filter: drop-shadow(0 4px 10px rgba(122, 118, 111, .2));
      transform-origin: bottom center;
    }

    .service-card.painting .paint-brush {
      animation: brushStroke 1.8s cubic-bezier(.25, .1, .25, 1) forwards;
    }

    @keyframes brushStroke {
      0%   { top: -18%; right: -15px; opacity: 0; transform: rotate(-35deg) scale(.9); }
      6%   { opacity: 1; }
      /* Brush touches down - slight pressure wobble */
      12%  { top: -5%; right: 5px; transform: rotate(-28deg) scale(1); }
      /* Long sweeping stroke across and down - hand wobble */
      25%  { top: 10%; right: 20%; transform: rotate(-22deg) scale(1.02); }
      35%  { top: 25%; right: 35%; transform: rotate(-18deg) scale(1); }
      42%  { top: 38%; right: 42%; transform: rotate(-20deg) scale(1.01); }
      55%  { top: 52%; right: 50%; transform: rotate(-16deg) scale(1); }
      65%  { top: 65%; right: 55%; transform: rotate(-19deg) scale(.99); }
      75%  { top: 78%; right: 60%; transform: rotate(-14deg) scale(1); }
      85%  { top: 90%; right: 65%; transform: rotate(-12deg) scale(.98); opacity: .9; }
      /* Brush lifts off */
      92%  { top: 98%; right: 70%; transform: rotate(-8deg) scale(.9); opacity: .5; }
      100% { top: 108%; right: 80%; transform: rotate(-5deg) scale(.8); opacity: 0; }
    }

    /* Brush stroke smear - thick diagonal paint trail */
    .brush-stroke {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      border-radius: var(--radius);
      overflow: hidden;
    }

    .brush-stroke::before {
      content: '';
      position: absolute;
      top: -10%;
      left: -20%;
      width: 160%;
      height: 0;
      background: linear-gradient(
        135deg,
        rgba(187, 171, 162, .06) 0%,
        rgba(187, 171, 162, .12) 30%,
        rgba(239, 226, 222, .14) 50%,
        rgba(239, 226, 222, .10) 70%,
        rgba(239, 226, 222, .06) 100%
      );
      transform: skewX(-12deg);
      opacity: 0;
    }

    .service-card.painting .brush-stroke::before {
      animation: strokeFill 1.6s cubic-bezier(.25, .1, .25, 1) forwards;
    }

    @keyframes strokeFill {
      0%   { height: 0; opacity: 0; }
      8%   { opacity: 1; }
      100% { height: 130%; opacity: 1; }
    }

    /* Wet-paint shimmer across the stroke */
    .brush-stroke::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        110deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 255, 255, .45) 48%,
        rgba(255, 255, 255, .65) 50%,
        rgba(255, 255, 255, .45) 52%,
        transparent 65%,
        transparent 100%
      );
      background-size: 300% 100%;
      opacity: 0;
    }

    .service-card.painting .brush-stroke::after {
      animation: strokeShimmer .9s ease-in-out 1.5s forwards;
    }

    @keyframes strokeShimmer {
      0%   { opacity: 0; background-position: 100% 0; }
      25%  { opacity: .7; }
      100% { opacity: 0; background-position: -100% 0; }
    }

    /* Small splatter dots left behind by the stroke */
    .paint-splatter {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 11;
      opacity: 0;
    }

    .service-card.painting .paint-splatter:nth-child(1) {
      width: 5px; height: 5px; top: 18%; left: 25%; background: rgba(187, 171, 162, .35);
      animation: splatterIn .3s ease-out .35s forwards;
    }
    .service-card.painting .paint-splatter:nth-child(2) {
      width: 4px; height: 4px; top: 40%; left: 48%; background: rgba(239, 226, 222, .4);
      animation: splatterIn .3s ease-out .6s forwards;
    }
    .service-card.painting .paint-splatter:nth-child(3) {
      width: 6px; height: 6px; top: 62%; left: 58%; background: rgba(239, 226, 222, .35);
      animation: splatterIn .3s ease-out .85s forwards;
    }
    .service-card.painting .paint-splatter:nth-child(4) {
      width: 3px; height: 3px; top: 30%; left: 65%; background: rgba(187, 171, 162, .3);
      animation: splatterIn .3s ease-out .5s forwards;
    }
    .service-card.painting .paint-splatter:nth-child(5) {
      width: 4px; height: 4px; top: 75%; left: 40%; background: rgba(239, 226, 222, .35);
      animation: splatterIn .3s ease-out 1s forwards;
    }

    @keyframes splatterIn {
      0%   { opacity: 0; transform: scale(0); }
      50%  { opacity: 1; transform: scale(1.5); }
      100% { opacity: .5; transform: scale(1); }
    }

    /* All text content stays above everything - always visible */
    .service-card h3,
    .service-card .price-row,
    .service-card .sub-heading {
      position: relative;
      z-index: 10;
    }

    /* When painting, text must not block the canvas from receiving mouse events */
    .service-card.paint-mode h3,
    .service-card.paint-mode .price-row,
    .service-card.paint-mode .sub-heading {
      pointer-events: none;
    }

    .service-card.paint-ready .price-row {
      opacity: 0;
      transform: translateX(-6px) skewX(-2deg);
    }

    .service-card.paint-ready .price-row span:last-child {
      opacity: 0;
      transform: scale(0.6) rotate(-4deg);
    }

    /* Price rows sweep in following the brush path */
    .service-card.painting .price-row {
      animation: priceStroke .5s cubic-bezier(.22, 1, .36, 1) forwards;
    }

    .service-card.painting .price-row:nth-child(2)  { animation-delay: .18s; }
    .service-card.painting .price-row:nth-child(3)  { animation-delay: .32s; }
    .service-card.painting .price-row:nth-child(4)  { animation-delay: .46s; }
    .service-card.painting .price-row:nth-child(5)  { animation-delay: .60s; }
    .service-card.painting .price-row:nth-child(6)  { animation-delay: .74s; }
    .service-card.painting .price-row:nth-child(7)  { animation-delay: .88s; }
    .service-card.painting .price-row:nth-child(8)  { animation-delay: 1.02s; }

    @keyframes priceStroke {
      0%   { opacity: 0; transform: translateX(-6px) skewX(-2deg); }
      60%  { transform: translateX(2px) skewX(0.5deg); }
      100% { opacity: 1; transform: translateX(0) skewX(0); }
    }

    /* Price amounts - painted on with a wet pop */
    .service-card.painting .price-row span:last-child {
      animation: pricePaint .45s cubic-bezier(.34, 1.56, .64, 1) forwards;
    }

    .service-card.painting .price-row:nth-child(2) span:last-child  { animation-delay: .28s; }
    .service-card.painting .price-row:nth-child(3) span:last-child  { animation-delay: .42s; }
    .service-card.painting .price-row:nth-child(4) span:last-child  { animation-delay: .56s; }
    .service-card.painting .price-row:nth-child(5) span:last-child  { animation-delay: .70s; }
    .service-card.painting .price-row:nth-child(6) span:last-child  { animation-delay: .84s; }
    .service-card.painting .price-row:nth-child(7) span:last-child  { animation-delay: .98s; }
    .service-card.painting .price-row:nth-child(8) span:last-child  { animation-delay: 1.12s; }

    @keyframes pricePaint {
      0%   { opacity: 0; transform: scale(0.6) rotate(-4deg); }
      50%  { transform: scale(1.18) rotate(1deg); }
      75%  { transform: scale(0.95) rotate(-0.5deg); }
      100% { opacity: 1; transform: scale(1) rotate(0); }
    }

    /* ── Mouse-Paint Hover ─────────────────────── */

    /* Canvas sits BEHIND the text content - paints the background */
    .paint-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      border-radius: var(--radius);
    }

    /* When paint mode is active, the canvas captures mouse events */
    .service-card.paint-mode .paint-canvas,
    .service-card.touch-painting .paint-canvas {
      pointer-events: auto;
      z-index: 5;
    }

    /* Hide the default cursor over paint-mode cards */
    .service-card.paint-mode {
      cursor: none;
    }

    /* Brush cursor follows the mouse */
    .brush-cursor {
      position: fixed;
      width: 36px;
      height: 100px;
      pointer-events: none;
      z-index: 300;
      /* Tip of the brush (bottom-center) aligns with cursor */
      transform: translate(-18px, -100px) rotate(-30deg);
      transform-origin: bottom center;
      display: none;
      filter: drop-shadow(0 2px 6px rgba(122,118,111,.25));
    }

    .brush-cursor.visible {
      display: block;
    }

    /* Clear paint button */
    .clear-paint-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 15;
      background: rgba(239,238,237,.75);
      border: 1px solid var(--lavender);
      border-radius: 6px;
      padding: 3px 10px;
      font-size: .7rem;
      font-family: 'Geist', system-ui, sans-serif;
      color: var(--text-light);
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease, background .2s ease;
      backdrop-filter: blur(4px);
    }

    .service-card.paint-mode .clear-paint-btn,
    .service-card.touch-painting .clear-paint-btn {
      opacity: 1;
      pointer-events: auto;
    }

    .clear-paint-btn:hover {
      background: rgba(239,238,237,.95);
      color: var(--text);
    }

    /* Paint mode toggle button (touch devices) */
    .paint-toggle-btn {
      position: absolute;
      top: 8px;
      left: 8px;
      z-index: 15;
      background: rgba(239,238,237,.75);
      border: 1px solid var(--lavender);
      border-radius: 6px;
      padding: 3px 10px;
      font-size: .7rem;
      font-family: 'Geist', system-ui, sans-serif;
      color: var(--text-light);
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease, background .2s ease;
      backdrop-filter: blur(4px);
      display: none;
    }

    .service-card.paint-mode .paint-toggle-btn {
      opacity: 1;
      pointer-events: auto;
    }

    .paint-toggle-btn.active {
      background: var(--lavender);
      color: var(--text);
      border-color: var(--text-light);
    }

    /* Show paint toggle only on touch devices */
    @media (pointer: coarse) {
      .paint-toggle-btn { display: block; }
      /* Hide brush cursor on touch */
      .brush-cursor { display: none !important; }
    }

    /* When touch-painting is active, card gets a subtle border glow */
    .service-card.touch-painting {
      box-shadow: 0 0 0 2px var(--lavender), var(--shadow);
    }

    /* ── Gallery ──────────────────────────────────── */
    .gallery { background: var(--cream); overflow: hidden; }

    .gallery-track-wrapper {
      overflow: hidden;
      width: 100vw;
      margin-left: calc(-50vw + 50%);
      padding: 20px 0;
    }

    .gallery-track {
      display: flex;
      gap: 20px;
      width: max-content;
      animation: marquee 55s linear infinite;
    }

    .gallery-track:hover {
      animation-play-state: paused;
    }

    @keyframes marquee {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    @keyframes marqueeReverse {
      0%   { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }

    .gallery-track-reverse {
      display: flex;
      gap: 20px;
      width: max-content;
      animation: marqueeReverse 60s linear infinite;
    }

    .gallery-track-reverse:hover {
      animation-play-state: paused;
    }

    /* Second row - hidden by default */
    .gallery-row2-wrapper {
      max-height: 0;
      overflow: hidden;
      transition: max-height .6s cubic-bezier(.4,0,.2,1), opacity .4s ease;
      opacity: 0;
    }

    .gallery-row2-wrapper.expanded {
      max-height: 400px;
      opacity: 1;
    }

    .gallery-expand-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin: 12px auto 4px;
      background: none;
      border: none;
      font-family: 'Geist', system-ui, sans-serif;
      font-size: .8rem;
      color: var(--text-light);
      cursor: pointer;
      padding: 6px 16px;
      transition: color .2s ease;
    }

    .gallery-expand-btn:hover {
      color: var(--text);
    }

    .gallery-expand-btn svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      transition: transform .3s ease;
    }

    .gallery-expand-btn.open svg {
      transform: rotate(180deg);
    }

    .gallery-shuffle-btn {
      background: rgba(239,238,237,.75);
      border: 1px solid var(--lavender);
      border-radius: 20px;
      padding: 8px 24px;
      font-size: .8rem;
      font-family: 'Geist', system-ui, sans-serif;
      color: var(--text-light);
      cursor: pointer;
      transition: background .3s ease, color .3s ease, transform .3s ease;
      backdrop-filter: blur(4px);
    }

    .gallery-shuffle-btn:hover {
      background: var(--lavender);
      color: var(--text);
      transform: scale(1.05);
    }

    .gallery-shuffle-btn:active {
      transform: scale(0.95);
    }

    /* Shuffle animation states */
    .gallery-item.shuffle-out {
      transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .4s ease;
      transform: scale(0.6) rotate(var(--rot)) translateY(var(--ty));
      opacity: 0;
    }

    .gallery-item.shuffle-in {
      transition: transform .6s cubic-bezier(.2,1,.3,1), opacity .5s ease;
      transform: scale(1) rotate(0deg) translateY(0);
      opacity: 1;
    }

    /* Smooth direction swap - never truly pause */
    .gallery-track,
    .gallery-track-reverse {
      transition: animation-duration .3s ease;
    }

    .gallery-item {
      flex-shrink: 0;
      width: 220px;
      height: 260px;
      border-radius: var(--radius);
      overflow: hidden;
      position: relative;
      cursor: pointer;
      transition: transform .35s ease, box-shadow .35s ease;
    }

    .gallery-item:hover {
      transform: scale(1.05) translateY(-6px);
      box-shadow: 0 16px 40px rgba(122, 118, 111, .15);
      z-index: 2;
    }

    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .4s ease, filter .4s ease;
    }

    .gallery-item:hover img {
      transform: scale(1.08);
    }

    .gallery-track:hover .gallery-item:not(:hover) {
      filter: brightness(.85);
      transition: filter .3s ease, transform .35s ease;
    }

    /* ── Lightbox ─────────────────────────────────── */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity .3s ease, visibility .3s ease;
    }

    .lightbox.active {
      opacity: 1;
      visibility: visible;
    }

    .lightbox-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(122, 118, 111, .88);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .lightbox-content {
      position: relative;
      z-index: 1;
      max-width: 90vw;
      max-height: 85vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lightbox-content img {
      max-width: 90vw;
      max-height: 85vh;
      border-radius: 12px;
      object-fit: contain;
      box-shadow: 0 20px 60px rgba(122, 118, 111, .5);
      transform: scale(.92);
      opacity: 0;
      transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
    }

    .lightbox.active .lightbox-content img {
      transform: scale(1);
      opacity: 1;
    }

    .lightbox-btn {
      position: absolute;
      z-index: 2;
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, .12);
      color: #fff;
      font-size: 1.3rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s, transform .2s;
      backdrop-filter: blur(4px);
    }

    .lightbox-btn:hover {
      background: rgba(255, 255, 255, .25);
      transform: translateY(-50%) scale(1.08);
    }

    .lightbox-prev { left: clamp(12px, 3vw, 32px); }
    .lightbox-next { right: clamp(12px, 3vw, 32px); }

    .lightbox-close {
      position: absolute;
      z-index: 2;
      top: clamp(12px, 2vw, 24px);
      right: clamp(12px, 2vw, 24px);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, .12);
      color: #fff;
      font-size: 1.4rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s, transform .2s;
      backdrop-filter: blur(4px);
    }

    .lightbox-close:hover {
      background: rgba(255, 255, 255, .25);
      transform: scale(1.08);
    }

    .lightbox-counter {
      position: absolute;
      z-index: 2;
      bottom: clamp(12px, 2vw, 24px);
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Outfit', 'Geist', system-ui, sans-serif;
      font-size: .85rem;
      font-weight: 500;
      color: rgba(255, 255, 255, .6);
      background: rgba(255, 255, 255, .08);
      padding: 6px 16px;
      border-radius: 20px;
      backdrop-filter: blur(4px);
    }

    @media (max-width: 768px) {
      .lightbox-btn { width: 40px; height: 40px; font-size: 1.1rem; }
    }

    /* ── Nail Try-On ─────────────────────────────── */
    .nail-tryon { background: var(--white); }

    .tryon-layout {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 48px;
      align-items: center;
      max-width: 960px;
      margin: 0 auto;
    }

    .tryon-hand {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .tryon-hand-wrapper {
      position: relative;
      width: 100%;
      max-width: 420px;
      border-radius: var(--radius);
      overflow: hidden;
    }

    .tryon-hand-wrapper svg.hand-svg {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Clickable nail groups in SVG */
    .nail-group {
      cursor: pointer;
      transition: transform .2s ease;
    }

    .nail-group:hover {
      transform: translateY(-3px);
    }

    .nail-group.selected .nail-base {
      stroke-width: 3;
    }

    .nail-color {
      transition: fill .3s ease, opacity .3s ease;
    }

    .nail-zone .nail-fill.painted ~ .nail-shine {
      opacity: 1;
    }

    .tryon-controls {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .tryon-controls h3 {
      font-size: 1.2rem;
      margin-bottom: 4px;
    }

    .tryon-controls p {
      font-size: .9rem;
      color: var(--text-light);
      margin-bottom: 12px;
    }

    .color-palette {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .color-swatch {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 3px solid transparent;
      cursor: pointer;
      transition: transform .2s, border-color .2s, box-shadow .2s;
      position: relative;
    }

    .color-swatch:hover {
      transform: scale(1.15);
    }

    .color-swatch.active {
      border-color: var(--text);
      box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--text);
      transform: scale(1.1);
    }

    .finish-options {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .finish-btn {
      padding: 8px 18px;
      border-radius: 20px;
      border: 1.5px solid #EFE2DE;
      background: var(--cream);
      font-family: 'Geist', system-ui, sans-serif;
      font-size: .85rem;
      color: var(--text-light);
      cursor: pointer;
      transition: all .2s;
    }

    .finish-btn:hover {
      border-color: var(--lavender);
    }

    .finish-btn.active {
      background: #BBABA2;
      color: white;
      border-color: #BBABA2;
    }

    .tryon-actions {
      display: flex;
      gap: 12px;
    }

    .tryon-actions .btn {
      padding: 10px 24px;
      font-size: .85rem;
    }

    /* ── Colour Collection ────────────────────────── */
    .colour-collection { background: var(--white); }

    .colour-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 20px;
      max-width: 900px;
      margin: 0 auto;
    }

    .colour-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: default;
    }

    .colour-swatch-lg {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      box-shadow: 0 3px 12px rgba(122,118,111,.1);
      transition: transform .3s ease, box-shadow .3s ease;
    }

    .colour-card:hover .colour-swatch-lg {
      transform: scale(1.12);
      box-shadow: 0 6px 20px rgba(122,118,111,.15);
    }

    .colour-card span {
      font-size: .75rem;
      color: var(--text-light);
      text-align: center;
    }

    /* Physics playground mode */
    .colour-play-btn {
      display: block;
      margin: 0 auto 24px;
      background: rgba(239,238,237,.75);
      border: 1px solid var(--lavender);
      border-radius: 20px;
      padding: 8px 24px;
      font-size: .8rem;
      font-family: 'Geist', system-ui, sans-serif;
      color: var(--text-light);
      cursor: pointer;
      transition: background .3s ease, color .3s ease, transform .3s ease;
      backdrop-filter: blur(4px);
    }

    .colour-play-btn:hover {
      background: var(--lavender);
      color: var(--text);
      transform: scale(1.05);
    }

    .colour-arena {
      position: relative;
      width: 100%;
      max-width: 900px;
      height: 500px;
      margin: 0 auto;
      border-radius: var(--radius);
      background: var(--cream);
      overflow: hidden;
      display: none;
      box-shadow: inset 0 2px 12px rgba(122,118,111,.06);
    }

    .colour-arena.active {
      display: block;
      animation: arenaFadeIn .4s ease both;
    }

    @keyframes arenaFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .colour-ball {
      position: absolute;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3px 10px rgba(122,118,111,.12);
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
      will-change: transform;
      transition: box-shadow .15s ease;
    }

    .colour-ball:active {
      cursor: grabbing;
      box-shadow: 0 6px 20px rgba(122,118,111,.2);
    }

    .colour-ball span {
      font-size: .55rem;
      color: rgba(0,0,0,.5);
      pointer-events: none;
      text-align: center;
      line-height: 1.1;
      text-shadow: 0 0 3px rgba(255,255,255,.8);
    }

    /* ── Nail Shape Guide ────────────────────────── */
    .nail-shapes { background: var(--cream); }

    .shapes-grid {
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
      margin-bottom: 32px;
    }

    .shape-card {
      background: var(--white);
      border-radius: var(--radius);
      padding: 24px 20px;
      text-align: center;
      width: 150px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1), background .25s ease, border-color .25s ease;
      box-shadow: var(--shadow);
    }

    .shape-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 28px rgba(122, 118, 111, .12);
    }

    .shape-card:active {
      transform: translateY(0) scale(.97);
      transition-duration: .12s;
    }

    .shape-card.active {
      border-color: #BBABA2;
      background: rgba(187, 171, 162, .06);
    }

    .shape-card svg {
      width: 60px;
      height: 80px;
      margin: 0 auto 12px;
    }

    .shape-card h4 {
      font-size: .9rem;
      color: var(--text);
    }

    .shape-info {
      background: var(--white);
      border-radius: var(--radius);
      padding: 32px;
      max-width: 600px;
      margin: 0 auto;
      box-shadow: var(--shadow);
      text-align: center;
      min-height: 160px;
      transition: opacity .3s ease;
    }

    .shape-info h3 {
      font-size: 1.3rem;
      margin-bottom: 12px;
      color: #BBABA2;
    }

    .shape-info p {
      font-size: .95rem;
      color: var(--text-light);
      line-height: 1.7;
    }

    .shape-info .shape-tags {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 16px;
      flex-wrap: wrap;
    }

    .shape-tag {
      display: inline-block;
      padding: 4px 14px;
      background: rgba(239, 226, 222, .2);
      border-radius: 20px;
      font-size: .8rem;
      color: var(--text-light);
    }

    /* ── Quiz ─────────────────────────────────────── */
    .nail-quiz { background: var(--white); }

    .quiz-card {
      background: var(--cream);
      border-radius: var(--radius);
      padding: 40px 36px;
      max-width: 650px;
      margin: 0 auto;
      box-shadow: var(--shadow);
      text-align: center;
    }

    .quiz-progress {
      display: flex;
      gap: 6px;
      justify-content: center;
      margin-bottom: 28px;
    }

    .quiz-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #EFE2DE;
      transition: background .3s, transform .3s;
    }

    .quiz-dot.active {
      background: #BBABA2;
      transform: scale(1.2);
    }

    .quiz-dot.done {
      background: var(--mint);
    }

    .quiz-question {
      font-family: 'Outfit', 'Geist', system-ui, sans-serif;
      font-size: 1.3rem;
      font-weight: 600;
      margin-bottom: 24px;
      color: var(--text);
      min-height: 40px;
    }

    .quiz-options {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .quiz-option {
      padding: 14px 20px;
      border-radius: 12px;
      border: 2px solid #EFE2DE;
      background: var(--white);
      font-family: 'Geist', system-ui, sans-serif;
      font-size: .95rem;
      color: var(--text);
      cursor: pointer;
      transition: all .25s ease;
      text-align: left;
    }

    .quiz-option:hover {
      border-color: var(--lavender);
      background: rgba(239, 226, 222, .1);
      transform: translateX(4px);
    }

    .quiz-option.selected {
      border-color: #BBABA2;
      background: rgba(187, 171, 162, .1);
    }

    .quiz-result {
      display: none;
      text-align: center;
      animation: fadeUp .5s ease both;
    }

    .quiz-result.show {
      display: block;
    }

    .quiz-result-icon {
      font-size: 3rem;
      margin-bottom: 16px;
    }

    .quiz-result h3 {
      font-size: 1.5rem;
      color: #BBABA2;
      margin-bottom: 12px;
    }

    .quiz-result p {
      font-size: 1rem;
      color: var(--text-light);
      line-height: 1.7;
      max-width: 450px;
      margin: 0 auto 24px;
    }

    .quiz-result .recommended {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      margin-bottom: 24px;
    }

    .quiz-result .recommended span {
      padding: 6px 16px;
      background: rgba(187, 171, 162, .12);
      border-radius: 20px;
      font-size: .85rem;
      color: var(--text);
      font-weight: 500;
    }

    @keyframes fadeUp {
      0%   { opacity: 0; transform: translateY(16px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    /* ── Calculator ───────────────────────────────── */
    .calculator { background: var(--cream); }

    .calc-card {
      background: var(--white);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      max-width: 600px;
      margin: 0 auto;
      padding: 36px 32px;
    }

    .calc-group {
      margin-bottom: 20px;
    }

    .calc-group label {
      display: block;
      font-size: .85rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 8px;
    }

    .calc-card select {
      width: 100%;
      padding: 12px 16px;
      border: 1.5px solid #EFE2DE;
      border-radius: 12px;
      font-family: 'Geist', system-ui, sans-serif;
      font-size: .95rem;
      background: var(--cream);
      color: var(--text);
      outline: none;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b5e74' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      transition: border-color .2s;
    }

    .calc-card select:focus,
    .calc-group select:focus {
      border-color: var(--lavender);
      box-shadow: 0 0 0 3px rgba(239, 226, 222, .25);
    }

    .calc-addons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .calc-addon {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border: 1.5px solid #EFE2DE;
      border-radius: 10px;
      font-size: .85rem;
      color: var(--text-light);
      cursor: pointer;
      transition: border-color .25s ease, background .25s ease, color .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
      user-select: none;
    }

    .calc-addon:hover {
      border-color: var(--lavender);
      transform: translateY(-1px);
    }

    .calc-addon:active {
      transform: scale(.97);
      transition-duration: .12s;
    }

    .calc-addon.active {
      border-color: #BBABA2;
      background: rgba(187, 171, 162, .08);
      color: var(--text);
    }

    .calc-addon input { display: none; }

    .calc-addon .addon-check {
      width: 18px;
      height: 18px;
      border-radius: 5px;
      border: 1.5px solid #BBABA2;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .7rem;
      color: transparent;
      transition: .2s;
      flex-shrink: 0;
    }

    .calc-addon.active .addon-check {
      border-color: #BBABA2;
      background: #BBABA2;
      color: #fff;
    }

    .calc-divider {
      border: none;
      border-top: 1px solid #EFE2DE;
      margin: 24px 0;
    }

    .calc-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .calc-total-label {
      font-size: 1rem;
      font-weight: 500;
      color: var(--text-light);
    }

    .calc-total-price {
      font-family: 'Outfit', 'Geist', system-ui, sans-serif;
      font-weight: 700;
      font-size: 1.8rem;
      color: #BBABA2;
      transition: transform .2s ease;
    }

    .calc-total-price.bump {
      transform: scale(1.12);
    }

    .calc-items {
      margin-top: 8px;
      font-size: .8rem;
      color: var(--text-light);
      min-height: 20px;
    }

    .calc-items span {
      display: inline-block;
      background: rgba(239, 226, 222, .2);
      padding: 2px 10px;
      border-radius: 8px;
      margin: 2px 4px 2px 0;
    }

    /* ── WhatsApp Calculator Button ──────────────── */
    .calc-whatsapp {
      background: #7A766F;
      color: #fff;
    }

    .calc-whatsapp:hover {
      background: #BBABA2;
    }

    /* ── Contact ──────────────────────────────────── */
    .contact { background: var(--white); }

    .contact-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: start;
    }

    .contact-info h3 {
      font-size: 1.25rem;
      margin-bottom: 20px;
    }

    .contact-info ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .contact-info li {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--text);
      font-size: .95rem;
    }

    .contact-info .icon-circle {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
    }

    .contact-info .icon-circle img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .socials a img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .contact-form {
      background: var(--cream);
      padding: 32px;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .contact-form h3 {
      font-size: 1.25rem;
      margin-bottom: 20px;
    }

    .form-group { margin-bottom: 16px; }

    .form-group label {
      display: block;
      font-size: .85rem;
      font-weight: 500;
      margin-bottom: 6px;
      color: var(--text-light);
    }

    .form-group input,
    .form-group textarea {
      width: 100%;
      padding: 12px 16px;
      border: 1.5px solid #EFE2DE;
      border-radius: 12px;
      font-family: 'Geist', system-ui, sans-serif;
      font-size: .95rem;
      background: var(--white);
      color: var(--text);
      outline: none;
      transition: border-color .2s;
    }

    .form-group input:focus,
    .form-group textarea:focus {
      border-color: var(--lavender);
      box-shadow: 0 0 0 3px rgba(239, 226, 222, .25);
    }

    .form-group textarea { resize: vertical; min-height: 100px; }

    .contact-form .btn {
      width: 100%;
      text-align: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .form-error {
      display: none;
      margin-top: 6px;
      font-size: .78rem;
      color: var(--color-deep-stone);
      letter-spacing: .01em;
    }

    .form-error::before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-deep-stone);
      margin-right: 8px;
      vertical-align: middle;
      transform: translateY(-1px);
    }

    .form-group.has-error input,
    .form-group.has-error textarea {
      border-color: var(--color-deep-stone);
      background: rgba(187, 171, 162, .08);
    }

    .form-group.has-error .form-error {
      display: block;
      animation: errorIn .25s cubic-bezier(.16, 1, .3, 1) both;
    }

    @keyframes errorIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .form-success {
      display: none;
      margin-top: 14px;
      padding: 12px 16px;
      background: rgba(185, 188, 177, .25);
      border: 1px solid rgba(185, 188, 177, .55);
      border-radius: 12px;
      color: var(--color-deep-stone);
      font-size: .88rem;
      text-align: center;
    }

    .contact-form.is-success .form-success {
      display: block;
      animation: errorIn .35s cubic-bezier(.16, 1, .3, 1) both;
    }

    .btn-spinner {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid rgba(239, 238, 237, .35);
      border-top-color: var(--color-off-white);
      animation: spin .8s linear infinite;
      display: none;
    }

    .contact-form.is-loading .btn-spinner { display: inline-block; }
    .contact-form.is-loading .btn-label   { opacity: .7; }
    .contact-form.is-loading button       { pointer-events: none; }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* ── FAQ ─────────────────────────────── */
    .faq {
      background: var(--color-soft-blush);
      padding: 80px 0;
    }

    .faq-list {
      max-width: 760px;
      margin: 32px auto 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .faq-item {
      background: var(--color-off-white);
      border: 1px solid rgba(122, 118, 111, .12);
      border-radius: var(--radius);
      padding: 18px 22px;
      box-shadow: var(--shadow);
      transition: box-shadow .25s ease, transform .25s ease;
    }

    .faq-item[open] {
      box-shadow: 0 6px 24px rgba(122, 118, 111, .18);
    }

    .faq-item summary {
      cursor: pointer;
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      font-size: 1.05rem;
      color: var(--color-deep-stone);
      list-style: none;
      position: relative;
      padding-right: 32px;
      outline: none;
    }

    .faq-item summary::-webkit-details-marker { display: none; }

    .faq-item summary::after {
      content: '+';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.4rem;
      font-weight: 400;
      color: var(--color-warm-taupe);
      transition: transform .25s ease;
    }

    .faq-item[open] summary::after {
      content: '–';
    }

    .faq-item p {
      margin-top: 12px;
      color: var(--color-deep-stone);
      line-height: 1.6;
      font-size: 0.97rem;
    }

    .faq-item a {
      color: var(--color-deep-stone);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .faq-item a:hover {
      color: var(--color-warm-taupe);
    }

    /* ── Social Links ─────────────────────────────── */
    .socials {
      display: flex;
      gap: 12px;
      margin-top: 28px;
    }

    .socials a {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      transition: transform .25s ease, opacity .25s ease;
    }

    .socials a:hover {
      opacity: .8;
      transform: scale(1.1);
    }

    /* ── Footer ───────────────────────────────────── */
    footer {
      background: var(--text);
      color: rgba(255, 255, 255, .65);
      text-align: center;
      padding: 32px 0;
      font-size: .85rem;
    }

    footer span { color: #EFE2DE; }

    .designed-by {
      margin-top: 10px;
      font-size: .65rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      opacity: .35;
      transition: opacity .3s ease;
    }
    .designed-by:hover { opacity: .7; }
    .designed-by strong { font-weight: 600; }

    .footer-logo-img {
      display: block;
      height: 44px;
      width: auto;
      margin: 0 auto 20px;
      opacity: .85;
    }

    .footer-socials {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-bottom: 16px;
    }

    .footer-socials a {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      overflow: hidden;
      display: block;
      transition: transform .25s ease, opacity .25s ease;
    }

    .footer-socials a:hover {
      transform: scale(1.1);
      opacity: .85;
    }

    .footer-socials a img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* ── Animations ───────────────────────────────── */
    @keyframes gradientShift {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    @keyframes heroEnter {
      0%   { opacity: 0; transform: translateY(24px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes subtleShimmer {
      0%, 100% { background-position: 0% center; }
      50%      { background-position: 250% center; }
    }

    /* Nail polish drip */
    .nail-drip {
      position: absolute;
      top: -2px;
      pointer-events: none;
    }

    .nail-drip .drip-path {
      fill: none;
      stroke-dasharray: 300;
      stroke-dashoffset: 300;
      animation: dripDown 2.5s ease-out .5s forwards;
    }

    @keyframes dripDown {
      0%   { stroke-dashoffset: 300; }
      100% { stroke-dashoffset: 0; }
    }

    .nail-drip .drip-fill {
      opacity: 0;
      animation: dripFillIn 1.2s ease-out 2.5s forwards;
    }

    @keyframes dripFillIn {
      0%   { opacity: 0; }
      100% { opacity: .3; }
    }

    /* Nav link underline slide */
    .nav-links a {
      position: relative;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--text);
      border-radius: 1px;
      transition: width .3s ease;
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    /* Scroll reveal */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal.visible .service-card {
      opacity: 0;
      animation: cardEnter .5s cubic-bezier(.22, 1, .36, 1) forwards;
    }

    .reveal.visible .service-card:nth-child(1) { animation-delay: .05s; }
    .reveal.visible .service-card:nth-child(2) { animation-delay: .1s; }
    .reveal.visible .service-card:nth-child(3) { animation-delay: .15s; }
    .reveal.visible .service-card:nth-child(4) { animation-delay: .2s; }

    @keyframes cardEnter {
      0%   { opacity: 0; transform: translateY(20px) scale(.97); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Reduce animations */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      .reveal { opacity: 1; transform: none; }
      .reveal.visible .service-card { opacity: 1; animation: none; }
      .gallery-track { animation: none; }
    }

    /* ── Mobile ───────────────────────────────────── */
    @media (max-width: 768px) {
      .nav-toggle { display: flex; }

      .nav-links {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: rgba(239, 238, 237, .97);
        backdrop-filter: blur(12px);
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease;
      }

      .nav-links.open { max-height: 500px; }

      .nav-links a {
        display: block;
        padding: 14px 24px;
        border-bottom: 1px solid rgba(239, 226, 222, .2);
      }

      .hero h1 { font-size: 2.4rem; }
      .hero p { font-size: 1rem; }
      section { padding: 56px 0; }
      .section-title { font-size: 1.6rem; }

      .tryon-layout {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .shapes-grid {
        gap: 12px;
      }

      .shape-card {
        width: 120px;
        padding: 16px 12px;
      }
    }

    @media (max-width: 480px) {
      .hero h1 { font-size: 2rem; }
      .services-grid { grid-template-columns: 1fr; }
      .gallery-item { width: 180px; height: 220px; }
      .shape-card { width: 100px; }
    }

    /* ── Floating Book Now ────────────────────────── */
    .floating-book {
      position: fixed;
      right: 32px;
      bottom: 32px;
      z-index: 200;
      display: flex;
      align-items: center;
      gap: 4px;
      color: var(--color-deep-stone);
      animation: floatBook 3.6s ease-in-out infinite;
      transition: opacity .35s cubic-bezier(.16, 1, .3, 1), transform .35s cubic-bezier(.16, 1, .3, 1);
    }

    .floating-book--hidden {
      opacity: 0;
      transform: translateY(20px) scale(.92);
      pointer-events: none;
    }

    .floating-book-label {
      position: relative;
      background: var(--color-off-white);
      color: var(--color-deep-stone);
      padding: 10px 18px 10px 18px;
      border-radius: 14px;
      font-family: 'Outfit', 'Geist', system-ui, sans-serif;
      box-shadow: 0 10px 28px rgba(122, 118, 111, .22);
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 1px solid rgba(187, 171, 162, .35);
    }

    .floating-book-label::after {
      content: "";
      position: absolute;
      right: -6px;
      top: 50%;
      width: 12px;
      height: 12px;
      background: var(--color-off-white);
      border-right: 1px solid rgba(187, 171, 162, .35);
      border-top: 1px solid rgba(187, 171, 162, .35);
      transform: translateY(-50%) rotate(45deg);
    }

    .floating-book-text {
      display: inline-flex;
      flex-direction: column;
      line-height: 1.05;
      align-items: flex-start;
    }

    .floating-book-text small {
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--color-warm-taupe);
    }

    .floating-book-text strong {
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--color-deep-stone);
    }

    .floating-book-arrow {
      color: var(--color-warm-taupe);
      margin-left: 6px;
      animation: arrowNudge 1.6s ease-in-out infinite;
    }

    .floating-book-btn {
      position: relative;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: linear-gradient(140deg, var(--color-deep-stone) 0%, #8d8980 100%);
      color: var(--color-off-white);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow:
        0 12px 28px rgba(122, 118, 111, .42),
        inset 0 1px 0 rgba(239, 238, 237, .25);
      transition: transform .25s ease, box-shadow .25s ease;
      margin-left: 14px;
    }

    .floating-book-btn svg {
      position: relative;
      z-index: 2;
    }

    .floating-book-pulse {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 2px solid var(--color-warm-taupe);
      opacity: 0;
      animation: bookPulse 2.4s ease-out infinite;
      pointer-events: none;
    }

    .floating-book-pulse--delay {
      animation-delay: 1.2s;
    }

    .floating-book:hover .floating-book-btn {
      transform: scale(1.08) rotate(-4deg);
      box-shadow:
        0 16px 36px rgba(122, 118, 111, .5),
        inset 0 1px 0 rgba(239, 238, 237, .3);
    }

    .floating-book:hover .floating-book-label {
      transform: translateX(-3px);
      box-shadow: 0 12px 32px rgba(122, 118, 111, .28);
    }

    .floating-book:active .floating-book-btn {
      transform: scale(0.96);
    }

    @keyframes floatBook {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-10px); }
    }

    @keyframes arrowNudge {
      0%, 100% { transform: translateX(0); opacity: .85; }
      50%      { transform: translateX(5px); opacity: 1; }
    }

    @keyframes bookPulse {
      0%   { transform: scale(1);    opacity: .55; }
      80%  { transform: scale(1.7);  opacity: 0; }
      100% { transform: scale(1.7);  opacity: 0; }
    }

    @media (max-width: 768px) {
      .floating-book {
        right: 16px;
        bottom: 16px;
      }
      .floating-book-label { display: none; }
      .floating-book-btn {
        width: 60px;
        height: 60px;
        margin-left: 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .floating-book,
      .floating-book-arrow,
      .floating-book-pulse {
        animation: none;
      }
    }

    /* ── Shop ─────────────────────────────────────── */
    .shop-hero {
      background:
        radial-gradient(circle at 20% 20%, rgba(239, 226, 222, .55), transparent 55%),
        radial-gradient(circle at 80% 30%, rgba(185, 188, 177, .35), transparent 55%),
        linear-gradient(135deg, var(--color-off-white) 0%, var(--color-soft-blush) 100%);
      padding: 72px 0 56px;
      text-align: center;
      border-bottom: 1px solid rgba(187, 171, 162, .22);
    }

    .shop-hero-eyebrow {
      font-family: 'Outfit', 'Geist', sans-serif;
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--color-warm-taupe);
      margin-bottom: 14px;
    }

    .shop-hero-title {
      font-size: 3.4rem;
      font-weight: 700;
      letter-spacing: -1.5px;
      color: var(--color-deep-stone);
      margin-bottom: 12px;
    }

    .shop-hero-sub {
      color: var(--text-light);
      font-size: 1.05rem;
      max-width: 580px;
      margin: 0 auto;
      line-height: 1.7;
    }

    @media (max-width: 600px) {
      .shop-hero { padding: 56px 0 40px; }
      .shop-hero-title { font-size: 2.4rem; }
      .shop-hero-sub { font-size: .98rem; }
    }

    .shop {
      background: var(--white);
    }

    .product-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 48px;
      max-width: 960px;
      margin: 0 auto;
      background: linear-gradient(180deg, var(--color-off-white) 0%, #F5F2F0 100%);
      border: 1px solid rgba(187, 171, 162, .25);
      border-radius: 24px;
      padding: 40px;
      box-shadow: 0 24px 60px rgba(122, 118, 111, .12);
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .product-card::before {
      content: '';
      position: absolute;
      top: -40%;
      right: -20%;
      width: 60%;
      height: 140%;
      background: radial-gradient(ellipse at center, rgba(185, 188, 177, .18), transparent 60%);
      pointer-events: none;
    }

    @media (max-width: 800px) {
      .product-card {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 24px;
      }
    }

    .product-media {
      position: relative;
      background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .55), transparent 50%),
        linear-gradient(160deg, var(--color-soft-blush) 0%, var(--color-warm-taupe) 100%);
      border-radius: 20px;
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 30px rgba(122, 118, 111, .15);
    }

    .product-media::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 70% 80%, rgba(122, 118, 111, .18), transparent 55%);
      pointer-events: none;
    }

    .product-bottle {
      width: 60%;
      max-width: 220px;
      height: auto;
      filter: drop-shadow(0 18px 30px rgba(122, 118, 111, .3));
      animation: bottleFloat 5.5s ease-in-out infinite;
      position: relative;
      z-index: 1;
    }

    @keyframes bottleFloat {
      0%, 100% { transform: translateY(0) rotate(-1.2deg); }
      50%      { transform: translateY(-10px) rotate(1.2deg); }
    }

    .product-badge {
      position: absolute;
      top: 16px;
      left: 16px;
      background: var(--color-deep-stone);
      color: var(--color-off-white);
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: .68rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      padding: 7px 14px;
      border-radius: 50px;
      z-index: 3;
      box-shadow: 0 4px 12px rgba(122, 118, 111, .25);
    }

    .product-info {
      position: relative;
      z-index: 2;
    }

    .product-eyebrow {
      font-family: 'Outfit', sans-serif;
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--color-warm-taupe);
      margin-bottom: 10px;
    }

    .product-title {
      font-size: 1.85rem;
      line-height: 1.2;
      color: var(--color-deep-stone);
      margin-bottom: 14px;
    }

    .product-desc {
      color: var(--text-light);
      font-size: 1rem;
      line-height: 1.7;
      margin-bottom: 26px;
    }

    .product-specs {
      list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 16px;
      margin: 0 0 22px;
      padding: 22px 0;
      border-top: 1px solid rgba(187, 171, 162, .3);
      border-bottom: 1px solid rgba(187, 171, 162, .3);
    }

    .product-specs li {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .product-specs span {
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--text-light);
    }

    .product-specs strong {
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      color: var(--color-deep-stone);
      font-size: 1.02rem;
    }

    .product-stock {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: .9rem;
      color: var(--color-deep-stone);
      margin-bottom: 22px;
    }

    .product-stock-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--color-sage-grey);
      box-shadow: 0 0 0 4px rgba(185, 188, 177, .28);
      animation: stockPulse 2s ease-in-out infinite;
      flex-shrink: 0;
    }

    @keyframes stockPulse {
      0%, 100% { box-shadow: 0 0 0 4px rgba(185, 188, 177, .28); }
      50%      { box-shadow: 0 0 0 9px rgba(185, 188, 177, .05); }
    }

    .product-buy {
      display: flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
    }

    .product-price {
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 2.2rem;
      color: var(--color-deep-stone);
      line-height: 1;
      letter-spacing: -1px;
    }

    .product-price small {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-light);
      margin-right: 2px;
      letter-spacing: 0;
    }

    .product-order {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex: 1;
      min-width: 200px;
      padding: 14px 28px;
    }

    .product-order-icon {
      flex-shrink: 0;
    }

    @media (max-width: 480px) {
      .product-title { font-size: 1.55rem; }
      .product-price { font-size: 1.9rem; }
      .product-buy { gap: 14px; }
      .product-order { width: 100%; flex: 0 0 100%; min-width: 0; }
    }

    /* ── Shop Steps ───────────────────────────────── */
    .shop-steps {
      background: var(--cream);
    }

    .steps-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: 920px;
      margin: 0 auto;
    }

    @media (max-width: 720px) {
      .steps-grid { grid-template-columns: 1fr; }
    }

    .step {
      background: var(--white);
      border: 1px solid rgba(187, 171, 162, .22);
      border-radius: var(--radius);
      padding: 30px 26px;
      text-align: center;
      position: relative;
      transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .25s ease;
    }

    .step:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 34px rgba(122, 118, 111, .1);
      border-color: rgba(187, 171, 162, .4);
    }

    .step-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: linear-gradient(140deg, var(--color-soft-blush) 0%, var(--color-warm-taupe) 120%);
      color: var(--color-deep-stone);
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      margin-bottom: 16px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
    }

    .step h3 {
      font-size: 1.05rem;
      color: var(--color-deep-stone);
      margin-bottom: 8px;
    }

    .step p {
      color: var(--text-light);
      font-size: .92rem;
      line-height: 1.6;
    }

    @media (prefers-reduced-motion: reduce) {
      .product-bottle,
      .product-stock-dot {
        animation: none;
      }
    }

    /* ── Nav Dropdowns ──────────────────────────────── */
    .nav-links { align-items: center; }

    .has-dropdown {
      position: relative;
    }

    .has-dropdown .nav-parent {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .nav-caret-icon {
      transition: transform .25s ease, opacity .25s ease;
      opacity: .65;
    }

    .has-dropdown:hover .nav-caret-icon,
    .has-dropdown:focus-within .nav-caret-icon {
      transform: rotate(180deg);
      opacity: 1;
    }

    /* Hover bridge - keeps dropdown open as cursor travels */
    .has-dropdown::before {
      content: '';
      position: absolute;
      top: 100%;
      left: -10px;
      right: -10px;
      height: 14px;
      pointer-events: none;
    }

    .has-dropdown:hover::before,
    .has-dropdown:focus-within::before {
      pointer-events: auto;
    }

    .nav-dropdown {
      position: absolute;
      top: calc(100% + 12px);
      left: 50%;
      transform: translateX(-50%) translateY(-6px);
      min-width: 220px;
      list-style: none;
      background: rgba(239, 238, 237, .94);
      backdrop-filter: blur(20px) saturate(140%);
      -webkit-backdrop-filter: blur(20px) saturate(140%);
      border: 1px solid rgba(187, 171, 162, .28);
      border-radius: 14px;
      padding: 8px;
      margin: 0;
      box-shadow: 0 18px 42px rgba(122, 118, 111, .14);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .22s ease, transform .26s cubic-bezier(.22, 1, .36, 1), visibility .22s;
      z-index: 110;
    }

    .has-dropdown:hover .nav-dropdown,
    .has-dropdown:focus-within .nav-dropdown {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    .nav-dropdown li { list-style: none; }

    .nav-dropdown a {
      display: block;
      padding: 10px 14px;
      border-radius: 9px;
      font-size: .88rem;
      color: var(--text-light);
      white-space: nowrap;
      transition: background .2s ease, color .2s ease, transform .2s ease, padding-left .2s ease;
    }

    .nav-dropdown a:hover,
    .nav-dropdown a:focus-visible {
      background: rgba(239, 226, 222, .55);
      color: var(--color-deep-stone);
      padding-left: 18px;
    }

    .nav-dropdown a::after { display: none; }

    /* Active parent in nav */
    .has-dropdown.active > .nav-parent {
      color: var(--text);
    }
    .has-dropdown.active > .nav-parent::after {
      width: 100%;
    }

    /* ── Shop CTA pill ─────────────────────────────── */
    .nav-shop-item { display: inline-flex; align-items: center; }

    .nav-shop-cta {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 18px;
      background: var(--color-deep-stone);
      color: var(--color-off-white) !important;
      border-radius: 50px;
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      font-size: .85rem;
      letter-spacing: .02em;
      transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, background .25s ease;
      box-shadow: 0 4px 14px rgba(122, 118, 111, .22);
      position: relative;
      overflow: hidden;
    }

    .nav-shop-cta::before {
      content: '';
      position: absolute;
      top: 0;
      left: -75%;
      width: 50%;
      height: 100%;
      background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .25), transparent);
      transform: skewX(-20deg);
      transition: left .65s ease;
    }

    .nav-shop-cta:hover {
      background: #6c6963;
      transform: translateY(-1.5px);
      box-shadow: 0 8px 22px rgba(122, 118, 111, .3);
    }

    .nav-shop-cta:hover::before {
      left: 130%;
    }

    .nav-shop-cta::after { display: none !important; }

    .nav-shop-cta.active {
      background: linear-gradient(140deg, var(--color-deep-stone) 0%, #5e5b56 100%);
      box-shadow: 0 8px 22px rgba(122, 118, 111, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
    }

    .nav-shop-cta svg { flex-shrink: 0; }

    /* ── Mobile: flatten dropdowns inside drawer ───── */
    @media (max-width: 768px) {
      .nav-links.open { max-height: 760px; }

      .has-dropdown { width: 100%; }

      .has-dropdown .nav-parent {
        display: block;
      }

      .has-dropdown::before { display: none; }

      .nav-caret-icon { display: none; }

      .nav-dropdown {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        background: rgba(239, 226, 222, .25);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        min-width: 0;
        transition: none;
      }

      .nav-dropdown a {
        padding: 12px 24px 12px 44px;
        font-size: .86rem;
        border-bottom: 1px solid rgba(239, 226, 222, .25);
        border-radius: 0;
        position: relative;
      }

      .nav-dropdown a::before {
        content: '';
        position: absolute;
        left: 28px;
        top: 50%;
        width: 6px;
        height: 1px;
        background: rgba(187, 171, 162, .55);
      }

      .nav-dropdown a:hover,
      .nav-dropdown a:focus-visible {
        padding-left: 44px;
      }

      .nav-shop-item {
        display: block;
        padding: 14px 24px;
        background: rgba(187, 171, 162, .08);
        border-bottom: 1px solid rgba(239, 226, 222, .2);
      }

      .nav-shop-cta {
        width: 100%;
        justify-content: center;
        padding: 12px 18px;
        font-size: .92rem;
        border-bottom: none !important;
      }

      .nav-shop-cta:hover {
        transform: none;
      }
    }

    /* ── Shop hero meta ────────────────────────────── */
    .shop-hero-meta {
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin-top: 22px;
      font-size: .82rem;
      color: var(--text-light);
      letter-spacing: .04em;
    }

    .shop-hero-meta span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .shop-hero-meta .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--color-sage-grey);
      box-shadow: 0 0 0 3px rgba(185, 188, 177, .25);
      animation: stockPulse 2s ease-in-out infinite;
    }

    /* ── Shop Layout (side nav + main) ────────────── */
    .shop {
      background: var(--white);
      padding-top: 56px;
    }

    .shop-layout {
      display: grid;
      grid-template-columns: 240px 1fr;
      gap: 48px;
      align-items: start;
    }

    @media (max-width: 960px) {
      .shop-layout {
        grid-template-columns: 1fr;
        gap: 24px;
      }
    }

    /* ── Side nav ─────────────────────────────────── */
    .shop-nav {
      position: sticky;
      top: 80px;
      align-self: start;
      max-height: calc(100vh - 96px);
      overflow-y: auto;
      padding-right: 8px;
      scrollbar-width: thin;
      scrollbar-color: rgba(187, 171, 162, .4) transparent;
    }

    .shop-nav::-webkit-scrollbar { width: 5px; }
    .shop-nav::-webkit-scrollbar-thumb {
      background: rgba(187, 171, 162, .4);
      border-radius: 3px;
    }

    .shop-nav-inner {
      background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
      border: 1px solid rgba(187, 171, 162, .25);
      border-radius: 18px;
      padding: 18px 14px;
    }

    .shop-nav-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 8px 14px;
      border-bottom: 1px solid rgba(187, 171, 162, .22);
      margin-bottom: 10px;
    }

    .shop-nav-head svg {
      color: var(--color-warm-taupe);
      flex-shrink: 0;
    }

    .shop-nav-title {
      font-family: 'Outfit', sans-serif;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--color-deep-stone);
      margin: 0;
    }

    .shop-nav-group {
      margin-top: 14px;
    }

    .shop-nav-group-title {
      font-family: 'Outfit', sans-serif;
      font-size: .64rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--text-light);
      padding: 0 10px;
      margin-bottom: 6px;
    }

    .shop-nav-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 9px 12px;
      border-radius: 9px;
      font-family: 'Outfit', sans-serif;
      font-size: .9rem;
      font-weight: 500;
      color: var(--text-light);
      transition: background .22s ease, color .22s ease, padding-left .22s ease;
      position: relative;
    }

    .shop-nav-link::before {
      content: '';
      position: absolute;
      left: 4px;
      top: 50%;
      width: 3px;
      height: 0;
      border-radius: 2px;
      background: var(--color-warm-taupe);
      transform: translateY(-50%);
      transition: height .25s cubic-bezier(.22, 1, .36, 1);
    }

    .shop-nav-link:hover {
      color: var(--color-deep-stone);
      background: rgba(239, 226, 222, .35);
      padding-left: 16px;
    }

    .shop-nav-link.is-active {
      color: var(--color-deep-stone);
      background: var(--color-soft-blush);
      padding-left: 16px;
      font-weight: 600;
    }

    .shop-nav-link.is-active::before {
      height: 60%;
    }

    .shop-nav-link.is-top {
      font-weight: 600;
      color: var(--color-deep-stone);
      padding: 11px 12px;
    }

    .shop-nav-count {
      font-size: .74rem;
      font-weight: 600;
      color: var(--text-light);
      background: rgba(187, 171, 162, .18);
      padding: 2px 8px;
      border-radius: 50px;
      min-width: 22px;
      text-align: center;
      transition: background .22s ease, color .22s ease;
    }

    .shop-nav-link.is-active .shop-nav-count {
      background: var(--color-warm-taupe);
      color: var(--color-off-white);
    }

    /* Mobile: side nav becomes horizontal sticky chip strip */
    @media (max-width: 960px) {
      .shop-nav {
        position: sticky;
        top: 64px;
        z-index: 8;
        max-height: none;
        overflow: visible;
        padding-right: 0;
        margin: 0 -16px 8px;
      }

      .shop-nav-inner {
        background: rgba(239, 238, 237, .92);
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 10px 16px;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
      }

      .shop-nav-inner::-webkit-scrollbar { display: none; }
      .shop-nav-head { display: none; }
      .shop-nav-group { margin-top: 0; display: contents; }
      .shop-nav-group-title { display: none; }

      .shop-nav-link {
        flex: 0 0 auto;
        padding: 8px 14px;
        border-radius: 50px;
        background: rgba(255, 255, 255, .7);
        border: 1px solid rgba(187, 171, 162, .25);
        font-size: .85rem;
        white-space: nowrap;
      }

      .shop-nav-link::before { display: none; }

      .shop-nav-link:hover { padding-left: 14px; }

      .shop-nav-link.is-active {
        background: var(--color-deep-stone);
        color: var(--color-off-white);
        border-color: var(--color-deep-stone);
        padding-left: 14px;
      }

      .shop-nav-link.is-active .shop-nav-count {
        background: rgba(255, 255, 255, .25);
      }
    }

    /* ── Promo Banner ─────────────────────────────── */
    .shop-promo {
      max-width: 1140px;
      width: 90%;
      margin: -32px auto 0;
      padding: 22px 26px;
      background: linear-gradient(115deg, var(--color-soft-blush) 0%, var(--color-off-white) 50%, var(--color-sage-grey) 100%);
      background-size: 200% 200%;
      border: 1px solid rgba(187, 171, 162, .35);
      border-radius: 18px;
      display: flex;
      align-items: center;
      gap: 22px;
      box-shadow: 0 14px 36px rgba(122, 118, 111, .14);
      position: relative;
      z-index: 6;
      overflow: hidden;
      animation: promoShine 12s ease-in-out infinite;
    }

    @keyframes promoShine {
      0%, 100% { background-position: 0% 50%; }
      50%      { background-position: 100% 50%; }
    }

    .shop-promo::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 90% -20%, rgba(255, 255, 255, .5), transparent 50%);
      pointer-events: none;
    }

    .shop-promo-tag {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: var(--color-deep-stone);
      color: var(--color-off-white);
      border-radius: 50px;
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: .68rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      box-shadow: 0 4px 14px rgba(122, 118, 111, .25);
    }

    .shop-promo-tag svg {
      animation: sparklePulse 2.4s ease-in-out infinite;
    }

    @keyframes sparklePulse {
      0%, 100% { transform: scale(1); opacity: .9; }
      50%      { transform: scale(1.2) rotate(15deg); opacity: 1; }
    }

    .shop-promo-text {
      flex: 1;
      font-family: 'Outfit', sans-serif;
      font-size: 1rem;
      color: var(--color-deep-stone);
      line-height: 1.4;
    }

    .shop-promo-text strong { font-weight: 700; }

    .shop-promo-link {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      font-size: .88rem;
      color: var(--color-deep-stone);
      padding: 8px 16px;
      border-radius: 50px;
      background: rgba(255, 255, 255, .7);
      border: 1px solid rgba(122, 118, 111, .2);
      transition: background .22s ease, transform .22s ease, gap .22s ease;
    }

    .shop-promo-link:hover {
      background: var(--white);
      transform: translateY(-1px);
      gap: 10px;
    }

    @media (max-width: 720px) {
      .shop-promo {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 18px 20px;
        margin: -20px auto 0;
      }
    }

    /* ── Shop Sections ────────────────────────────── */
    .shop-section,
    .colour-family,
    #featuredStrip {
      scroll-margin-top: 88px;
    }

    .shop-section {
      margin-bottom: 72px;
    }
    .shop-section:last-of-type { margin-bottom: 0; }

    .shop-section-head {
      margin-bottom: 28px;
    }

    .shop-section-title {
      font-size: 1.7rem;
      color: var(--color-deep-stone);
      margin-bottom: 4px;
      letter-spacing: -.5px;
    }

    .shop-section-sub {
      color: var(--text-light);
      font-size: .95rem;
    }

    .shop-empty {
      text-align: center;
      color: var(--text-light);
      padding: 32px 0;
    }

    .colour-family {
      margin-top: 48px;
    }

    .colour-family:first-of-type { margin-top: 0; }

    .colour-family-head {
      display: flex;
      align-items: baseline;
      gap: 14px;
      margin-bottom: 18px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(187, 171, 162, .22);
    }

    .colour-family-title {
      font-size: 1.2rem;
      color: var(--color-deep-stone);
      margin: 0;
      letter-spacing: -.3px;
    }

    .colour-family-count {
      font-family: 'Outfit', sans-serif;
      font-size: .78rem;
      font-weight: 600;
      color: var(--text-light);
      letter-spacing: .04em;
    }

    /* ── Featured Strip ───────────────────────────── */
    #featuredStrip {
      margin-bottom: 56px;
    }

    .shop-featured-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }

    .shop-featured-title {
      font-size: 1.3rem;
      color: var(--color-deep-stone);
      margin: 0;
    }

    .shop-featured-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      background: var(--color-soft-blush);
      color: var(--color-deep-stone);
      border-radius: 50px;
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .shop-featured-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    /* Mobile: switch to flex with hard widths - grid is misbehaving on iOS */
    @media (max-width: 720px) {
      .shop-featured-grid {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px !important;
        grid-template-columns: none !important;
      }
      .shop-featured-grid > .bottle-card {
        flex: 0 0 calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        min-width: 0 !important;
      }
    }

    /* ── Bottle Cards (the new colour cards) ──────── */
    .bottle-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 16px;
    }

    @media (max-width: 600px) {
      .bottle-grid {
        display: flex !important;
        flex-wrap: wrap;
        gap: 10px !important;
        grid-template-columns: none !important;
      }
      .bottle-grid > .bottle-card {
        flex: 0 0 calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        min-width: 0 !important;
      }
      .bottle-card-stage {
        aspect-ratio: auto !important;
        height: 170px !important;
        min-height: 0 !important;
        max-height: 170px !important;
      }
      .bottle-svg {
        width: auto !important;
        height: 130px !important;
      }
      .bottle-card-info {
        padding: 10px 11px 12px;
      }
      .bottle-card-name {
        font-size: .88rem;
      }
      .bottle-card-price {
        font-size: .85rem;
      }
      .bottle-card-cta {
        padding: 4px 9px;
        font-size: .68rem;
      }
    }

    @media (max-width: 380px) {
      .bottle-grid {
        gap: 8px;
      }
      .bottle-card-info {
        padding: 8px 10px 10px;
      }
    }

    .bottle-card {
      --gel: #EFE2DE;
      display: flex;
      flex-direction: column;
      min-width: 0;
      background: var(--white);
      border: 1px solid rgba(187, 171, 162, .22);
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease;
    }

    .bottle-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 22px 40px rgba(122, 118, 111, .15);
      border-color: rgba(187, 171, 162, .5);
    }

    .bottle-card-stage {
      position: relative;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 50% 110%, color-mix(in srgb, var(--gel) 45%, transparent) 0%, transparent 60%),
        radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--gel) 18%, transparent) 0%, transparent 65%),
        var(--white);
    }

    .bottle-card-stage::before {
      content: '';
      position: absolute;
      inset: auto 0 0 0;
      height: 22%;
      background: radial-gradient(ellipse at 50% 100%, rgba(122, 118, 111, .14), transparent 70%);
      pointer-events: none;
    }

    .bottle-card-stage::after {
      content: '';
      position: absolute;
      top: 0;
      left: -60%;
      width: 60%;
      height: 100%;
      background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .35), transparent);
      transform: skewX(-18deg);
      transition: left .8s cubic-bezier(.22, 1, .36, 1);
      pointer-events: none;
    }

    .bottle-card:hover .bottle-card-stage::after {
      left: 130%;
    }

    .bottle-svg {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 62%;
      height: auto;
      transform: translate(-50%, -50%) rotate(-1deg);
      filter: drop-shadow(0 14px 22px rgba(122, 118, 111, .25));
      transition: transform .5s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
    }

    .bottle-card:hover .bottle-svg {
      transform: translate(-50%, -54%) rotate(-5deg);
      filter: drop-shadow(0 22px 30px rgba(122, 118, 111, .3));
    }

    .bottle-card-info {
      display: flex;
      flex-direction: column;
      padding: 14px 14px 16px;
      gap: 4px;
      border-top: 1px solid rgba(187, 171, 162, .15);
    }

    .bottle-card-name {
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      color: var(--color-deep-stone);
      font-size: .98rem;
      line-height: 1.2;
    }

    .bottle-card-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 4px;
    }

    .bottle-card-price {
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      color: var(--color-deep-stone);
      font-size: .92rem;
      letter-spacing: -.3px;
    }

    .bottle-card-price small {
      font-size: .7rem;
      font-weight: 600;
      color: var(--text-light);
      margin-right: 1px;
    }

    .bottle-card-cta {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 11px;
      border-radius: 50px;
      background: var(--color-deep-stone);
      color: var(--color-off-white);
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      font-size: .72rem;
      letter-spacing: .03em;
      transform: translateX(8px);
      opacity: 0;
      transition: opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1), background .22s ease;
    }

    .bottle-card-cta::after { display: none !important; }

    .bottle-card:hover .bottle-card-cta,
    .bottle-card:focus-visible .bottle-card-cta {
      opacity: 1;
      transform: translateX(0);
    }

    /* Touch devices have no hover - keep the Order button visible and skip tilt */
    @media (hover: none) {
      .bottle-card-cta {
        opacity: 1;
        transform: translateX(0);
      }
      .bottle-card:hover .bottle-svg,
      .bottle-card .bottle-svg {
        transform: translate(-50%, -50%) rotate(-1deg);
      }
      .bottle-card-stage::after { display: none; }
    }

    /* ── Flag badges (NEW / BESTSELLER) ──────────── */
    .flag {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 9px;
      border-radius: 50px;
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: .6rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      box-shadow: 0 4px 12px rgba(122, 118, 111, .2);
    }

    .flag-new {
      background: var(--color-deep-stone);
      color: var(--color-off-white);
    }

    .flag-bestseller {
      background: linear-gradient(135deg, var(--color-soft-blush) 0%, var(--color-warm-taupe) 100%);
      color: var(--color-off-white);
    }

    .flag svg {
      width: 8px;
      height: 8px;
    }

    /* Featured cards = larger bottle cards with extra polish */
    .bottle-card.is-featured .bottle-card-stage {
      aspect-ratio: 5 / 6;
      background:
        radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--gel) 60%, transparent) 0%, transparent 65%),
        radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--gel) 25%, transparent) 0%, transparent 70%),
        linear-gradient(180deg, var(--cream) 0%, var(--white) 70%);
    }

    .bottle-card.is-featured .bottle-svg {
      width: 56%;
    }

    .bottle-card.is-featured {
      border-color: rgba(187, 171, 162, .4);
    }

    /* Mobile overrides - must come AFTER the desktop featured rules */
    @media (max-width: 720px) {
      .bottle-card.is-featured .bottle-card-stage {
        aspect-ratio: auto !important;
        height: 170px !important;
        min-height: 0 !important;
        max-height: 170px !important;
      }
      .bottle-card.is-featured .bottle-svg {
        width: auto !important;
        height: 130px !important;
      }
    }

    /* ── Essential / Structured Product Grid ──────── */
    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 22px;
    }

    @media (max-width: 480px) {
      .product-grid {
        grid-template-columns: 1fr;
      }
    }

    .essential-card {
      background: linear-gradient(180deg, var(--white) 0%, var(--cream) 100%);
      border: 1px solid rgba(187, 171, 162, .22);
      border-radius: 20px;
      padding: 26px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease;
      position: relative;
    }

    .essential-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 36px rgba(122, 118, 111, .12);
      border-color: rgba(187, 171, 162, .5);
    }

    .essential-card-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(140deg, var(--color-soft-blush) 0%, var(--color-warm-taupe) 100%);
      color: var(--color-off-white);
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 1.4rem;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px rgba(122, 118, 111, .15);
      margin-bottom: 4px;
    }

    .essential-card-name {
      font-size: 1.15rem;
      color: var(--color-deep-stone);
      margin: 0;
    }

    .essential-card-desc {
      color: var(--text-light);
      font-size: .92rem;
      line-height: 1.65;
      margin: 0;
    }

    .essential-card-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .78rem;
      color: var(--text-light);
      letter-spacing: .04em;
    }

    .essential-card-meta .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--color-sage-grey);
      box-shadow: 0 0 0 3px rgba(185, 188, 177, .25);
      animation: stockPulse 2s ease-in-out infinite;
      flex-shrink: 0;
    }

    .essential-card-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid rgba(187, 171, 162, .22);
    }

    .essential-card-price {
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      color: var(--color-deep-stone);
      font-size: 1.45rem;
      line-height: 1;
      letter-spacing: -.5px;
    }

    .essential-card-price small {
      font-size: .85rem;
      font-weight: 600;
      color: var(--text-light);
      margin-right: 1px;
    }

    .essential-card-order {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 9px 18px;
      background: var(--color-deep-stone);
      color: var(--color-off-white) !important;
      border-radius: 50px;
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      font-size: .82rem;
      transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
      box-shadow: 0 4px 12px rgba(122, 118, 111, .2);
    }

    .essential-card-order::after { display: none; }

    .essential-card-order:hover {
      background: #6c6963;
      transform: translateY(-1.5px);
      box-shadow: 0 8px 18px rgba(122, 118, 111, .28);
    }

    @media (prefers-reduced-motion: reduce) {
      .colour-card,
      .essential-card {
        animation: none;
      }
    }

    /* ── Coming Soon overlay (delete block to launch shop) ─── */
    .coming-soon {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 200;
      background:
        radial-gradient(ellipse at 50% 30%, rgba(122, 118, 111, .25), transparent 55%),
        radial-gradient(ellipse at 80% 90%, rgba(187, 171, 162, .14), transparent 50%),
        linear-gradient(180deg, #1a1714 0%, #0a0908 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px 24px;
      text-align: center;
      overflow-y: auto;
      animation: csFadeIn .55s cubic-bezier(.22, 1, .36, 1) both;
    }

    @keyframes csFadeIn {
      0%   { opacity: 0; }
      100% { opacity: 1; }
    }

    .coming-soon-dots {
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .14) 1px, transparent 1.4px),
        radial-gradient(circle at 88% 24%, rgba(255, 255, 255, .1)  1px, transparent 1.4px),
        radial-gradient(circle at 22% 78%, rgba(255, 255, 255, .08) 1px, transparent 1.4px),
        radial-gradient(circle at 78% 82%, rgba(255, 255, 255, .12) 1px, transparent 1.4px),
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, .06) 1px, transparent 1.4px),
        radial-gradient(circle at 62% 60%, rgba(255, 255, 255, .07) 1px, transparent 1.4px);
      background-size: 100% 100%;
      pointer-events: none;
      animation: csTwinkle 6s ease-in-out infinite;
    }

    @keyframes csTwinkle {
      0%, 100% { opacity: .85; }
      50%      { opacity: 1; }
    }

    .coming-soon-inner {
      position: relative;
      z-index: 2;
      max-width: 520px;
      animation: csRise .8s cubic-bezier(.22, 1, .36, 1) .12s both;
    }

    @keyframes csRise {
      0%   { opacity: 0; transform: translateY(18px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    .coming-soon-logo {
      display: block;
      width: 200px;
      height: auto;
      margin: 0 auto 32px;
      filter: brightness(0) invert(1) brightness(.96);
      opacity: .95;
    }

    .coming-soon-eyebrow {
      font-family: 'Outfit', 'Geist', sans-serif;
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--color-warm-taupe);
      margin-bottom: 18px;
    }

    .coming-soon-title {
      font-family: 'Outfit', 'Geist', sans-serif;
      font-weight: 700;
      font-size: clamp(2.4rem, 7vw, 4rem);
      letter-spacing: -1.5px;
      color: var(--color-off-white);
      line-height: 1.15;
      padding-bottom: .12em;
      margin-bottom: 20px;
      background: linear-gradient(120deg, var(--color-off-white) 0%, var(--color-soft-blush) 50%, var(--color-warm-taupe) 100%);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: csShimmer 6s ease-in-out infinite;
    }

    @keyframes csShimmer {
      0%, 100% { background-position: 0% 50%; }
      50%      { background-position: 100% 50%; }
    }

    .coming-soon-text {
      color: rgba(239, 238, 237, .72);
      font-size: 1.02rem;
      line-height: 1.7;
      margin-bottom: 32px;
    }

    .coming-soon-actions {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 32px;
    }

    .coming-soon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 26px;
      border-radius: 50px;
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      font-size: .9rem;
      letter-spacing: .02em;
      background: var(--color-off-white);
      color: var(--color-deep-stone);
      border: 1.5px solid transparent;
      transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, background .25s ease, border-color .25s ease;
    }

    .coming-soon-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
    }

    .coming-soon-btn--ghost {
      background: transparent;
      color: var(--color-off-white);
      border-color: rgba(239, 238, 237, .25);
    }

    .coming-soon-btn--ghost:hover {
      background: rgba(239, 238, 237, .08);
      border-color: rgba(239, 238, 237, .55);
    }

    .coming-soon-foot {
      font-size: .82rem;
      color: rgba(239, 238, 237, .45);
      letter-spacing: .02em;
    }

    .coming-soon-foot a {
      color: rgba(239, 238, 237, .85);
      text-decoration: underline;
      text-decoration-color: rgba(239, 238, 237, .35);
      text-underline-offset: 3px;
      transition: color .2s ease, text-decoration-color .2s ease;
    }

    .coming-soon-foot a:hover {
      color: var(--color-off-white);
      text-decoration-color: var(--color-soft-blush);
    }

    @media (max-width: 480px) {
      .coming-soon-logo { width: 150px; margin-bottom: 24px; }
      .coming-soon-text { font-size: .96rem; }
      .coming-soon-btn { width: 100%; }
    }

    @media (prefers-reduced-motion: reduce) {
      .coming-soon,
      .coming-soon-inner,
      .coming-soon-dots,
      .coming-soon-title {
        animation: none;
      }
    }

    /* Secret unlock button - invisible 22x22 dot in bottom-right of overlay */
    .cs-secret {
      position: absolute;
      bottom: 12px;
      right: 12px;
      width: 22px;
      height: 22px;
      padding: 0;
      background: transparent;
      border: none;
      cursor: default;
      z-index: 5;
      border-radius: 50%;
    }

    .cs-secret:focus-visible {
      outline: 1px dashed rgba(239, 238, 237, .25);
    }

    .cs-secret--wrong {
      animation: csSecretShake .4s ease-in-out;
      background: rgba(200, 30, 42, .25);
    }

    @keyframes csSecretShake {
      0%, 100% { transform: translateX(0); }
      25%      { transform: translateX(-3px); }
      75%      { transform: translateX(3px); }
    }

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  MOBILE SHOP REBUILD                                          ║
   ║  Clean, simple, bulletproof - no grid, no aspect-ratio,       ║
   ║  fixed pixel sizes everywhere. Last block in file =           ║
   ║  highest source-order priority. !important everywhere so      ║
   ║  no upstream rule can win.                                    ║
   ╚═══════════════════════════════════════════════════════════════╝ */
@media (max-width: 720px) {

  /* Layout: stack everything, no grid */
  .shop-layout {
    display: block !important;
  }

  /* Side nav becomes a simple sticky horizontal chip strip */
  .shop-nav {
    position: sticky !important;
    top: 64px !important;
    z-index: 8 !important;
    margin: 0 -16px 12px !important;
    overflow: visible !important;
    max-height: none !important;
    padding: 0 !important;
  }
  .shop-nav-inner {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    overflow-x: auto !important;
    background: rgba(239, 238, 237, .96) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .shop-nav-inner::-webkit-scrollbar { display: none; }
  .shop-nav-head { display: none !important; }
  .shop-nav-group { display: contents !important; margin: 0 !important; }
  .shop-nav-group-title { display: none !important; }
  .shop-nav-link {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 8px 14px !important;
    font-size: .85rem !important;
    border-radius: 50px !important;
    background: rgba(255, 255, 255, .7) !important;
    border: 1px solid rgba(187, 171, 162, .25) !important;
  }
  .shop-nav-link.is-active {
    background: var(--color-deep-stone) !important;
    color: var(--color-off-white) !important;
    border-color: var(--color-deep-stone) !important;
  }

  /* Promo banner - stack content */
  .shop-promo {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 16px 18px !important;
  }

  /* Featured strip - horizontal scroll cards */
  #featuredStrip { margin-bottom: 36px !important; }
  .shop-featured-head {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .shop-featured-title { font-size: 1.1rem !important; }
  .shop-featured-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 10px !important;
    padding: 4px 0 12px !important;
    margin: 0 -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .shop-featured-grid::-webkit-scrollbar { display: none; }
  .shop-featured-grid > .bottle-card {
    flex: 0 0 180px !important;
    width: 180px !important;
    max-width: 180px !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
  }

  /* Regular family bottle grids - 2-col flex */
  .bottle-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 10px !important;
  }
  .bottle-grid > .bottle-card {
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    min-width: 0 !important;
  }

  /* Bottle card - compact, fixed-size stage */
  .bottle-card {
    border-radius: 14px !important;
    min-width: 0 !important;
  }
  .bottle-card-stage {
    aspect-ratio: auto !important;
    height: 180px !important;
    min-height: 0 !important;
    max-height: 180px !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }
  /* SVG with explicit pixel sizes - bulletproof */
  .bottle-svg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 90px !important;
    height: 144px !important;
    transform: translate(-50%, -50%) !important;
  }
  .bottle-card-info {
    padding: 8px 10px 10px !important;
    gap: 2px !important;
  }
  .bottle-card-name {
    font-size: .82rem !important;
    line-height: 1.15 !important;
  }
  .bottle-card-foot {
    margin-top: 2px !important;
  }
  .bottle-card-price {
    font-size: .8rem !important;
  }
  .bottle-card-price small { font-size: .65rem !important; }
  .bottle-card-cta {
    opacity: 1 !important;
    transform: none !important;
    padding: 3px 8px !important;
    font-size: .65rem !important;
    gap: 3px !important;
  }
  /* Featured cards = same compact treatment as regular */
  .bottle-card.is-featured .bottle-card-stage,
  .bottle-card.is-featured .bottle-svg { /* inherit above */ }

  /* Flag badges */
  .flag {
    font-size: .55rem !important;
    padding: 3px 7px !important;
    top: 8px !important;
    left: 8px !important;
  }

  /* Section titles tighter */
  .shop-section-title { font-size: 1.3rem !important; }
  .shop-section-sub { font-size: .85rem !important; }
  .colour-family-title { font-size: 1rem !important; }
  .colour-family { margin-top: 32px !important; }

  /* Essentials / structured = single-column list */
  .product-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  .essential-card {
    padding: 18px !important;
  }
}

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  CART (floating button + drawer + toast)                       ║
   ╚═══════════════════════════════════════════════════════════════╝ */

button.bottle-card {
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
}

button.essential-card-order {
  border: none;
  font: inherit;
  cursor: pointer;
}

.floating-cart {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--color-deep-stone);
  animation: floatBook 3.6s ease-in-out infinite;
  transition: opacity .35s cubic-bezier(.16, 1, .3, 1), transform .35s cubic-bezier(.16, 1, .3, 1);
}

.floating-cart-label {
  position: relative;
  background: var(--color-off-white);
  color: var(--color-deep-stone);
  padding: 10px 18px;
  border-radius: 14px;
  font-family: 'Outfit', 'Geist', system-ui, sans-serif;
  box-shadow: 0 10px 28px rgba(122, 118, 111, .22);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(187, 171, 162, .35);
}

.floating-cart-label::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  background: var(--color-off-white);
  border-right: 1px solid rgba(187, 171, 162, .35);
  border-top: 1px solid rgba(187, 171, 162, .35);
  transform: translateY(-50%) rotate(45deg);
}

.floating-cart-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
  align-items: flex-start;
}

.floating-cart-text small {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-warm-taupe);
}

.floating-cart-text strong {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-deep-stone);
}

.floating-cart-btn {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--color-deep-stone) 0%, #8d8980 100%);
  color: var(--color-off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(122, 118, 111, .42), inset 0 1px 0 rgba(239, 238, 237, .25);
  transition: transform .25s ease, box-shadow .25s ease;
  margin-left: 14px;
}

.floating-cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 50px;
  background: var(--color-soft-blush);
  color: var(--color-deep-stone);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .72rem;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(122, 118, 111, .35);
  border: 2px solid var(--color-off-white);
  transition: opacity .2s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.floating-cart-count.is-empty {
  opacity: 0;
  transform: scale(.6);
}

.floating-cart:hover .floating-cart-btn {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 16px 36px rgba(122, 118, 111, .5), inset 0 1px 0 rgba(239, 238, 237, .3);
}

.floating-cart:hover .floating-cart-label {
  transform: translateX(-3px);
  box-shadow: 0 12px 32px rgba(122, 118, 111, .28);
}

.floating-cart.is-pulsing .floating-cart-btn {
  animation: cartPulse .6s cubic-bezier(.34, 1.56, .64, 1);
}

.floating-cart.is-pulsing .floating-cart-count {
  animation: countBump .45s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes cartPulse {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.18) rotate(-6deg); }
}

@keyframes countBump {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.4); }
}

@media (max-width: 768px) {
  .floating-cart { right: 16px; bottom: 16px; }
  .floating-cart-label { display: none; }
  .floating-cart-btn { width: 60px; height: 60px; margin-left: 0; }
}

/* ── Cart drawer ─────────────────────────────────── */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 250;
  visibility: hidden;
  pointer-events: none;
  transition: visibility .3s ease;
}

.cart-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.cart-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 16, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .3s ease;
}

.cart-drawer.is-open .cart-backdrop { opacity: 1; }

.cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background: var(--color-off-white);
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(122, 118, 111, .25);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.cart-drawer.is-open .cart-panel { transform: translateX(0); }

.cart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(187, 171, 162, .25);
}

.cart-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-warm-taupe);
  margin-bottom: 4px;
}

.cart-title {
  font-size: 1.5rem;
  color: var(--color-deep-stone);
  margin: 0;
  letter-spacing: -.5px;
}

.cart-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(187, 171, 162, .35);
  background: rgba(255, 255, 255, .65);
  color: var(--color-deep-stone);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .2s ease;
}

.cart-close:hover {
  background: var(--color-soft-blush);
  transform: scale(1.05);
}

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px;
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 16px;
  color: var(--text-light);
}

.cart-empty svg {
  color: var(--color-warm-taupe);
  margin-bottom: 16px;
}

.cart-empty-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-deep-stone);
  margin-bottom: 6px;
}

.cart-empty-sub {
  font-size: .9rem;
  max-width: 240px;
  line-height: 1.5;
}

.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 8px;
  border-bottom: 1px solid rgba(187, 171, 162, .2);
}

.cart-item:last-child { border-bottom: none; }

.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: .92rem;
  color: var(--color-deep-stone);
  line-height: 1.25;
}

.cart-item-line {
  font-size: .78rem;
  color: var(--text-light);
}

.cart-item-line strong {
  color: var(--color-deep-stone);
  font-weight: 700;
}

.cart-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(187, 171, 162, .35);
  border-radius: 50px;
  background: var(--white);
  overflow: hidden;
}

.qty-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--color-deep-stone);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}

.qty-btn:hover { background: var(--color-soft-blush); }
.qty-btn:active { background: var(--color-warm-taupe); color: var(--color-off-white); }

.qty-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: .85rem;
  color: var(--color-deep-stone);
  min-width: 22px;
  text-align: center;
}

.remove-btn {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(187, 171, 162, .25);
  border-radius: 50%;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.remove-btn:hover {
  color: var(--color-deep-stone);
  border-color: var(--color-warm-taupe);
  background: rgba(255, 255, 255, .6);
}

.cart-foot {
  border-top: 1px solid rgba(187, 171, 162, .25);
  padding: 18px 22px 22px;
  background: var(--white);
}

.cart-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.cart-total-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  color: var(--text-light);
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cart-total-amount {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--color-deep-stone);
  letter-spacing: -.5px;
}

.cart-send {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 22px;
  background: #25D366;
  color: #fff;
  border-radius: 50px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: .98rem;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 8px 22px rgba(37, 211, 102, .28);
}

.cart-send::after { display: none !important; }

.cart-send:hover {
  background: #1eb259;
  transform: translateY(-1.5px);
  box-shadow: 0 12px 28px rgba(37, 211, 102, .38);
}

.cart-send.is-disabled {
  background: rgba(187, 171, 162, .35);
  color: rgba(122, 118, 111, .55);
  pointer-events: none;
  box-shadow: none;
}

.cart-foot-note {
  font-size: .78rem;
  color: var(--text-light);
  text-align: center;
  margin-top: 10px;
}

/* ── Toast ─────────────────────────────────────── */
.cart-toast {
  position: fixed;
  bottom: 110px;
  left: 50%;
  transform: translate(-50%, 12px);
  z-index: 220;
  background: var(--color-deep-stone);
  color: var(--color-off-white);
  padding: 11px 18px;
  border-radius: 50px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: .85rem;
  box-shadow: 0 10px 28px rgba(122, 118, 111, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
  max-width: 80vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 600px) {
  .cart-toast { bottom: 90px; font-size: .8rem; padding: 9px 16px; }
}