/* ==========================================================================
   NIGHT GARDEN — visual layer for Persian Garden
   Loaded after the inline <style> in index.html and overrides it.

   The world the jar seal lives in, after dark: a forest-green-black night
   lit by warm gold, ivory text, berry-red prices. The seal's motifs recur —
   the double gold ring (medallion, badges, photo frames), the filigree, the
   crest fruits (pomegranate badge, blossoms), clean gold-edged frames for
   the product photos, and a faint girih-star lattice inside the big panels.

   Rules this file keeps:
   - no backdrop-filter anywhere (an animated canvas sits under the page)
   - no mask-image / clip-path on anything that moves; fades are gradient DIVs
   - only transform/opacity animate; glows are radial-gradients, not blur()
   - no letter-spacing on .fa (Persian script joins; tracking breaks it)
   - page background lives on <html>; <body> is transparent so the motion
     agent's fixed, z-index:-1 <canvas class="pg-sky"> shows through
   - every text/ground pair below was checked against WCAG AA (>= 4.5:1)

   Contract with assets/garden.js + garden-fx.css (motion agent):
   - start-up (html.pg-boot / html.pg-on) is theirs, including the failsafe
   - .pg-hero-media video[data-src]: they set src and add .pg-ready
   - .pg-split marks hero text for a word-by-word reveal
   - .pg-top (back to top): they add .pg-show after ~a screen of scroll and
     write scroll progress 0..1 into --p on it; the anchor works without JS
   ========================================================================== */

@media screen {

  :root{
    /* night grounds */
    --night-0:#06100b;
    --night-1:#0d1a12;
    --night-2:#1f3325;
    --night-panel:#13241b;

    /* gold */
    --gold:#c0932e;
    --gold-light:#d9b45e;
    --foil:#f0d488;
    --gold-ink:#dcbb6a;                 /* gold that READS on the night grounds (8.8:1) */
    --gold-pale:rgba(217,180,94,.30);   /* hairlines & dividers */

    /* text */
    --ivory:#f3efe4;
    --ink:#f3efe4;
    --ink-soft:#cfc7ae;                 /* 9.6:1 on the panel ground */
    --on-dark:#f3efe4;
    --on-dark-dim:#cfc7ae;

    /* sage replaces the mid/soft greens that were used as text on ivory */
    --green-mid:#b7cfb4;                /* 9.7:1 on the panel ground */
    --green-soft:#7f9c7d;

    /* berry for prices: brighter than the seal's crest red so it reads on
       the night ground (5.4:1 / 6.7:1). The deep berry stays decorative. */
    --berry:#e9705e;
    --berry-bright:#f28a79;
    --berry-deep:#a8342a;

    /* the old paper tokens now point at night surfaces so anything still
       reading them (number discs, cart footer, mobile nav) goes dark */
    --paper:var(--night-1);
    --paper-warm:#15261b;
    --card:var(--night-panel);
    --rule:rgba(217,180,94,.22);

    --metal-gold:linear-gradient(120deg,#c0932e 0%,#dba946 25%,#f0d488 50%,#dba946 75%,#c0932e 100%);
    --metal-gold-deco:linear-gradient(100deg,#8a661c 0%,#c0932e 28%,#f2d98c 50%,#c0932e 72%,#8a661c 100%);
    --foil-text:linear-gradient(100deg,#c9a040 0%,#f0d488 38%,#f7e3a6 50%,#d9b45e 66%,#c0932e 100%);

    /* dark glass: a solid translucent gradient (no blur) ... */
    --pg-glass:linear-gradient(160deg,rgba(22,40,29,.93),rgba(9,19,13,.95));
    /* ... with a gold gradient running round its 1px edge */
    --pg-edge:linear-gradient(150deg,rgba(240,212,136,.85) 0%,rgba(192,147,46,.38) 26%,rgba(192,147,46,.12) 50%,rgba(192,147,46,.32) 74%,rgba(217,180,94,.8) 100%);
    /* girih: an eight-point star lattice, barely there */
    --pg-girih:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112' viewBox='0 0 112 112' fill='none' stroke='%23d9b45e' stroke-opacity='.11' stroke-width='1'%3E%3Crect x='37' y='37' width='38' height='38'/%3E%3Crect x='37' y='37' width='38' height='38' transform='rotate(45 56 56)'/%3E%3Crect x='-19' y='-19' width='38' height='38'/%3E%3Crect x='-19' y='-19' width='38' height='38' transform='rotate(45 0 0)'/%3E%3Crect x='93' y='-19' width='38' height='38'/%3E%3Crect x='93' y='-19' width='38' height='38' transform='rotate(45 112 0)'/%3E%3Crect x='-19' y='93' width='38' height='38'/%3E%3Crect x='-19' y='93' width='38' height='38' transform='rotate(45 0 112)'/%3E%3Crect x='93' y='93' width='38' height='38'/%3E%3Crect x='93' y='93' width='38' height='38' transform='rotate(45 112 112)'/%3E%3C/svg%3E");
    /* the crest's pomegranate, for the section badges */
    --pg-pom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3c66e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 8.6 8.8 5.2l1.8 1.2L12 4.4l1.4 2 1.8-1.2-.6 3.4'/%3E%3Cpath d='M12 8.4c-4 0-6.6 2.9-6.6 6.6S8 21.2 12 21.2s6.6-2.5 6.6-6.2S16 8.4 12 8.4Z'/%3E%3Ccircle cx='10.1' cy='13.7' r='.95' fill='%23e3c66e' stroke='none'/%3E%3Ccircle cx='13.9' cy='13.7' r='.95' fill='%23e3c66e' stroke='none'/%3E%3Ccircle cx='12' cy='16.8' r='.95' fill='%23e3c66e' stroke='none'/%3E%3C/svg%3E");
    /* white blossoms from the crest, for the story panel corner */
    --pg-blossom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 56'%3E%3Cpath d='M6 50C22 44 34 30 50 20' fill='none' stroke='%23d9b45e' stroke-opacity='.7' stroke-width='1'/%3E%3Cg transform='translate(22 26) scale(1.15)' fill='%23f3efe4'%3E%3Cellipse rx='2.6' ry='4.6' cy='-5.6'/%3E%3Cellipse rx='2.6' ry='4.6' cy='-5.6' transform='rotate(72)'/%3E%3Cellipse rx='2.6' ry='4.6' cy='-5.6' transform='rotate(144)'/%3E%3Cellipse rx='2.6' ry='4.6' cy='-5.6' transform='rotate(216)'/%3E%3Cellipse rx='2.6' ry='4.6' cy='-5.6' transform='rotate(288)'/%3E%3Ccircle r='2.3' fill='%23d9b45e'/%3E%3C/g%3E%3Cg transform='translate(52 16) scale(.78)' fill='%23f3efe4'%3E%3Cellipse rx='2.6' ry='4.6' cy='-5.6'/%3E%3Cellipse rx='2.6' ry='4.6' cy='-5.6' transform='rotate(72)'/%3E%3Cellipse rx='2.6' ry='4.6' cy='-5.6' transform='rotate(144)'/%3E%3Cellipse rx='2.6' ry='4.6' cy='-5.6' transform='rotate(216)'/%3E%3Cellipse rx='2.6' ry='4.6' cy='-5.6' transform='rotate(288)'/%3E%3Ccircle r='2.3' fill='%23d9b45e'/%3E%3C/g%3E%3Cg transform='translate(66 38) scale(.55)' fill='%23f3efe4'%3E%3Cellipse rx='2.6' ry='4.6' cy='-5.6'/%3E%3Cellipse rx='2.6' ry='4.6' cy='-5.6' transform='rotate(72)'/%3E%3Cellipse rx='2.6' ry='4.6' cy='-5.6' transform='rotate(144)'/%3E%3Cellipse rx='2.6' ry='4.6' cy='-5.6' transform='rotate(216)'/%3E%3Cellipse rx='2.6' ry='4.6' cy='-5.6' transform='rotate(288)'/%3E%3Ccircle r='2.3' fill='%23d9b45e'/%3E%3C/g%3E%3Cellipse cx='38' cy='30' rx='5' ry='2' fill='%237f9c7d' transform='rotate(-30 38 30)'/%3E%3C/svg%3E");
  }

  /* ---------- page ground ---------- */
  html{
    background:
      radial-gradient(60rem 36rem at 50% -8rem, rgba(217,180,94,.10), transparent 62%),
      radial-gradient(44rem 30rem at 85% 40%, rgba(31,51,37,.55), transparent 65%),
      radial-gradient(40rem 32rem at 12% 80%, rgba(31,51,37,.45), transparent 65%),
      var(--night-0);
    min-height:100%;
  }
  body{background:transparent;color:var(--ink)}
  body::before{display:none}           /* the old ivory ambient washes */
  h1,h2,h3{color:var(--ivory)}
  :focus-visible{outline:2px solid var(--foil);outline-offset:2px}
  ::selection{background:rgba(217,180,94,.35);color:#fff}

  /* ---------- start-up ----------
     Owned by assets/garden-fx.css (html.pg-boot hides the top bar and main,
     html.pg-on fades them in, and a failsafe shows everything if garden.js
     never runs). Nothing here, on purpose — a second copy would fight it. */

  /* ---------- top bar: instagram strip + header as one dark bar ---------- */
  .ig-bar{background:var(--night-0);border-bottom:none}
  .ig-bar:hover{background:#0a1710}
  .ig-bar .ig-msg{color:var(--on-dark-dim)}
  header{
    background:#06100b;   /* opaque: content must not ghost through the bar */
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-bottom:none;box-shadow:0 10px 30px rgba(0,0,0,.35);
  }
  header::after{bottom:0;height:1.5px;background:var(--metal-gold-deco)}   /* the single crisp gold edge */
  .logo img{border-color:var(--gold-light);box-shadow:0 0 0 2px var(--night-0),0 0 0 3px rgba(217,180,94,.55)}
  .logo-text{color:var(--ivory)}
  .logo-text small{color:var(--gold-ink)}
  .menu-toggle svg{stroke:var(--foil)}
  .nav-links a{color:var(--ivory)}
  .nav-links a:hover{color:var(--foil)}
  .nav-links .order-btn{
    background:var(--metal-gold);color:var(--night-2);border:1px solid var(--foil);
    box-shadow:0 0 0 1px rgba(6,16,11,.6) inset,0 4px 18px rgba(217,180,94,.22);
  }
  .nav-links .order-btn:hover{background:var(--metal-gold);color:var(--night-2);box-shadow:0 0 0 1px rgba(6,16,11,.6) inset,0 6px 26px rgba(217,180,94,.4)}
  @media(max-width:760px){
    .nav-links{background:var(--night-1);border-bottom:2px solid var(--gold);box-shadow:0 24px 40px rgba(0,0,0,.5)}
    .nav-links a:not(.order-btn):hover{background:rgba(217,180,94,.08)}
    .nav-links li:not(:last-child){border-bottom:1px solid rgba(217,180,94,.16)}
  }

  /* ---------- gold sheen on hover (transform only) ---------- */
  @keyframes pg-sheen{
    from{transform:translateX(-180%) skewX(-18deg)}
    to{transform:translateX(420%) skewX(-18deg)}
  }
  .cta,.submit-btn,.cart-go,.nav-links .order-btn{position:relative}
  /* (.cart-fab is position:fixed and must stay so — only clip + isolate it) */
  .cta,.submit-btn,.cart-go,.nav-links .order-btn,.cart-fab{overflow:hidden;isolation:isolate}
  .cta::after,.submit-btn::after,.cart-go::after,.nav-links .order-btn::after,.cart-fab::after{
    content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:30%;z-index:1;pointer-events:none;
    background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55) 50%,rgba(255,255,255,0));
    transform:translateX(-180%) skewX(-18deg);opacity:0;
  }
  .cta:hover::after,.submit-btn:hover::after,.cart-go:hover::after,
  .nav-links .order-btn:hover::after,.cart-fab:hover::after{opacity:1;animation:pg-sheen 1.1s ease-out forwards}

  /* ---------- hero: split — brand lockup left, product showcase right ---------- */
  .pg-hero{
    position:relative;overflow:hidden;text-align:center;
    padding:clamp(2.4rem,6vh,4.5rem) 1.3rem clamp(2.4rem,6vh,4rem);min-height:0;
  }
  .pg-hero-inner{position:relative;z-index:1;max-width:1140px;margin:0 auto;width:100%;
    display:grid;grid-template-columns:1fr;gap:2.4rem;align-items:center}
  .pg-hero-copy{max-width:600px;margin:0 auto}

  /* The showcase: three framed product photos, layered with a little depth,
     over a soft gold glow. The big frame is the hero media slot: its still
     is the poster, and garden.js swaps in Darvin's video (assets/media/
     hero.mp4) once the file exists. Frames float on transform only; nothing
     here is masked or blurred. */
  .pg-showcase{position:relative;width:min(100%,520px);aspect-ratio:1/1.04;margin:0 auto}
  .pg-show-glow{position:absolute;inset:-8% -6%;pointer-events:none;
    background:radial-gradient(55% 50% at 58% 50%, rgba(217,180,94,.26), rgba(217,180,94,.08) 45%, transparent 72%)}
  .pg-show-frame{position:absolute;margin:0;padding:6px;border-radius:16px;overflow:hidden;
    border:1px solid transparent;
    background:linear-gradient(160deg,#1a2f22,#0a1510) padding-box,var(--pg-edge) border-box;
    box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(6,16,11,.8),0 0 40px rgba(217,180,94,.12)}
  .pg-show-frame::after{content:"";position:absolute;inset:3px;border-radius:12px;pointer-events:none;
    border:1px solid rgba(240,212,136,.22)}
  .pg-show-frame img,.pg-show-frame video{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px}
  /* Collage on a 520x541 canvas: the main frame fills the right 62%; the
     small frame sits top-left with a 24px gutter to the main frame; the
     square frame is inset 24px from the left and deliberately overlaps the
     main frame's bottom-left corner by about a quarter of its width. */
  .pg-show-main{right:0;top:0;width:62%;aspect-ratio:4/5;z-index:1}
  .pg-show-main img{object-position:center 40%}
  .pg-show-main video{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px)}
  .pg-show-b{left:0;top:4.4%;width:33.5%;aspect-ratio:3/4;z-index:2}
  .pg-show-a{left:4.6%;bottom:0;width:46%;aspect-ratio:1/1;z-index:3}
  @keyframes pg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  .pg-show-main{animation:pg-float 7s ease-in-out infinite}
  .pg-show-a{animation:pg-float 8s ease-in-out -2.5s infinite}
  .pg-show-b{animation:pg-float 9s ease-in-out -5s infinite}

  @media(min-width:900px){
    .pg-hero{text-align:left;padding-top:clamp(2.6rem,6vh,4rem)}
    .pg-hero-inner{grid-template-columns:1.08fr .92fr;gap:3.2rem}
    .pg-hero-copy{margin:0;max-width:600px}
    .pg-medallion{margin:0 0 1.4rem}
    .pg-hero .fa-title{margin-left:0;margin-right:0}
    .pg-hero-title,.pg-hero p.tag{margin-left:0;margin-right:0}
    .badges,.hero-ctas{justify-content:flex-start;margin-left:0;margin-right:0}
    .pg-showcase{margin:0 0 0 auto}
  }

  /* the seal as a medallion: ivory disc, double gold ring, soft halo */
  .pg-medallion{position:relative;width:min(190px,52vw);aspect-ratio:1/1;margin:0 auto 1.2rem}
  .pg-medallion::before{content:"";position:absolute;inset:-45%;border-radius:50%;z-index:-1;pointer-events:none;
    background:radial-gradient(circle, rgba(217,180,94,.30) 0%, rgba(217,180,94,.10) 38%, transparent 62%)}
  .pg-medallion::after{content:"";position:absolute;inset:-18px;border-radius:50%;pointer-events:none;
    border:1px solid rgba(217,180,94,.38);
    box-shadow:0 0 0 10px transparent,0 0 0 11px rgba(217,180,94,.14)}
  .hero-seal{position:absolute;inset:0;max-width:none;margin:0;border-radius:50%;overflow:hidden;
    background:#f5f2ea;
    box-shadow:0 0 0 3px var(--gold),0 0 0 7px var(--night-0),0 0 0 8px rgba(217,180,94,.75),
      0 0 70px 12px rgba(217,180,94,.22),0 34px 70px rgba(0,0,0,.6)}
  /* images/seal-round.webp is already a round cut-out with transparent
     corners, so no blend or mask tricks: it just fills the ivory disc */
  .hero-seal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
    border-radius:50%;mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none}

  .pg-hero .fa-title{color:var(--gold-ink);font-size:1.3rem;margin:.1rem auto .5rem}
  .pg-hero-title{
    font-family:'Playfair Display',Georgia,serif;font-weight:600;line-height:1.1;
    font-size:clamp(2.1rem,4vw,3.4rem);margin:0 auto .9rem;max-width:16ch;color:#e3c66e;
  }
  /* Foil text. garden.js splits the line into .pg-w spans that it transforms,
     and Chrome drops background-clip:text through a transformed child, so the
     gradient is applied per word, not on the parent. */
  .pg-hero-title:not(:has(.pg-w)),.pg-hero-title .pg-w{
    background:var(--foil-text);-webkit-background-clip:text;background-clip:text;
    color:#e3c66e;-webkit-text-fill-color:transparent;
  }
  .pg-hero-title .pg-w{display:inline-block}
  .pg-hero p.tag{color:var(--ink-soft);font-size:1.1rem;max-width:52ch;margin-bottom:1.5rem}

  .badges{border:0;gap:.5rem;padding:0;margin-bottom:1.7rem}
  .badge svg{width:13px;height:13px}
  .badge,.badge:not(:last-child){
    width:auto;color:#e9e0c4;border:1px solid rgba(217,180,94,.38);border-radius:999px;
    background:rgba(6,16,11,.62);padding:.42rem .8rem;font-size:.68rem;letter-spacing:.1em;gap:.4rem
  }
  .badge:not(:last-child)::after{content:none}
  .badge svg{stroke:var(--gold-light)}
  @media(max-width:700px){.badge,.badge:not(:last-child){width:auto;justify-content:center}}

  .cta.solid{background:var(--metal-gold);color:var(--night-2);border:1px solid var(--foil);
    box-shadow:inset 0 0 0 1px rgba(6,16,11,.5),0 10px 30px rgba(0,0,0,.45),0 0 26px rgba(217,180,94,.22)}
  .cta.solid:hover{background:var(--metal-gold);color:var(--night-2);border-color:#fff3c9;
    box-shadow:inset 0 0 0 1px rgba(6,16,11,.5),0 14px 34px rgba(0,0,0,.5),0 0 36px rgba(217,180,94,.4)}
  .cta.ghost{color:var(--ivory);border:1px solid rgba(217,180,94,.6);background:rgba(6,16,11,.45)}
  .cta.ghost:hover{background:var(--metal-gold);color:var(--night-2);border-color:var(--foil)}

  /* ---------- category strip: four doors into the menu ---------- */
  .pg-cats{max-width:1140px;margin:.4rem auto 0;padding:0 1.3rem;
    display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
  .pg-cat{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--ivory);
    padding:.6rem 1rem .6rem .6rem;border-radius:999px;border:1px solid transparent;
    background:linear-gradient(160deg,rgba(22,40,29,.9),rgba(9,19,13,.92)) padding-box,
      linear-gradient(150deg,rgba(217,180,94,.55),rgba(192,147,46,.14) 50%,rgba(217,180,94,.5)) border-box;
    box-shadow:0 10px 26px rgba(0,0,0,.35);
    transition:transform .3s var(--ease)}
  .pg-cat:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.45),0 0 28px rgba(217,180,94,.14)}
  .pg-cat-img{flex:none;width:52px;height:52px;border-radius:50%;overflow:hidden;
    border:1px solid var(--gold-light);box-shadow:0 0 0 3px var(--night-0),0 0 0 4px rgba(217,180,94,.35)}
  .pg-cat-img img{display:block;width:100%;height:100%;object-fit:cover}
  .pg-cat-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
  .pg-cat-txt strong{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:1.08rem}
  .pg-cat-txt .fa{color:var(--gold-ink);font-size:.95rem;line-height:1.7;text-align:left}
  .pg-cat-arrow{margin-left:auto;flex:none;width:18px;height:18px;fill:none;stroke:var(--gold-light);stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
  .pg-cat:hover .pg-cat-arrow{transform:translateX(3px)}
  @media(max-width:900px){.pg-cats{grid-template-columns:repeat(2,1fr);gap:.7rem}}
  @media(max-width:480px){
    .pg-cats{padding:0 1.1rem;gap:.6rem}
    .pg-cat{padding:.5rem .7rem .5rem .5rem;gap:.6rem}
    .pg-cat-img{width:44px;height:44px}
    .pg-cat-txt strong{font-size:.98rem}
    .pg-cat-arrow{display:none}
  }

  /* ---------- flourish dividers: gold with a soft halo ---------- */
  .orn{position:relative;color:var(--gold-light)}
  .orn::before{content:"";position:absolute;left:10%;right:10%;top:-80%;bottom:-80%;pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(217,180,94,.16), transparent 62%)}
  .orn svg{position:relative}
  .rule-orn{max-width:360px;margin:2rem auto}

  /* ---------- sections ---------- */
  section{padding:3.4rem 1.3rem}
  .sec-head{margin-bottom:2.4rem}
  .sec-head h2{font-size:clamp(2rem,3.8vw,2.8rem)}
  .sec-head .fa-sub{font-size:1.3rem}
  .sec-note{max-width:62ch;margin-left:auto;margin-right:auto;font-size:1rem}
  /* a pomegranate inside the seal's double ring, above every section title */
  .sec-head::before{content:"";display:block;width:44px;height:44px;margin:0 auto 1rem;border-radius:50%;
    border:1px solid var(--gold-light);
    background:var(--pg-pom) center/22px 22px no-repeat, radial-gradient(circle, #1a2d21, var(--night-1));
    box-shadow:0 0 0 4px var(--night-0),0 0 0 5px rgba(217,180,94,.45),0 0 28px rgba(217,180,94,.22)}
  .sec-head h2{
    background:var(--foil-text);-webkit-background-clip:text;background-clip:text;
    color:#e3c66e;-webkit-text-fill-color:transparent;
    display:inline-block;padding:0 .1em;
  }
  .sec-head .fa-sub{color:var(--gold-ink)}
  .sec-note{color:var(--ink-soft)}

  /* ---------- dark glass panels (shared) ---------- */
  .card,.story-wrap,.order-wrap,.step,.contact-card{
    border:1px solid transparent;
    background:var(--pg-glass) padding-box,var(--pg-edge) border-box;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 18px 48px rgba(0,0,0,.45),inset 0 1px 0 rgba(240,212,136,.10);
  }
  .story-wrap,.order-wrap{background:var(--pg-girih) padding-box,var(--pg-glass) padding-box,var(--pg-edge) border-box}
  .card::after,.story-wrap::after,.order-wrap::after{border-color:rgba(217,180,94,.16)}
  .card:hover,.step:hover,.contact-card:hover{
    box-shadow:0 0 0 1px rgba(217,180,94,.28),0 26px 60px rgba(0,0,0,.55),0 0 44px rgba(217,180,94,.10),
      inset 0 1px 0 rgba(240,212,136,.16)}

  /* ---------- product cards ---------- */
  .grid{gap:1.5rem}
  /* the photo in a clean framed window: gold gradient edge, inner hairline,
     the whole picture visible. The hover zoom is a transform inside a
     rounded overflow:hidden box — no mask anywhere near it. */
  .card .art{
    margin:12px 12px 0;aspect-ratio:1/1;border-radius:10px;
    border:1px solid transparent;
    background:radial-gradient(circle at 50% 40%, #1f3527, #0c1912 72%) padding-box,var(--pg-edge) border-box;
    box-shadow:0 12px 28px rgba(0,0,0,.4);
  }
  .card .art::after{
    inset:4px;border-radius:7px;border:1px solid rgba(240,212,136,.16);
    background:linear-gradient(175deg, rgba(240,212,136,.08) 0%, rgba(0,0,0,0) 30%);
    box-shadow:none;
  }
  .card .art img{border-radius:9px}
  .card .art svg{color:#c9a040}
  .card:hover .art img{transform:scale(1.035)}
  .photo-note{color:var(--ink-soft)}
  .card .body{padding:1.1rem 1.25rem 1.3rem}
  .num{background:var(--night-1);border-color:var(--gold-light);color:var(--gold-ink);
    box-shadow:0 0 0 2px var(--night-0),0 0 0 3px rgba(217,180,94,.3)}
  .card h3{color:var(--ivory)}
  .card .fa-name{color:var(--gold-ink)}
  .card p.desc{color:var(--ink-soft)}
  .prices li.picked{background:rgba(217,180,94,.10);border-left-color:var(--gold-light)}
  .prices .sz{color:var(--green-mid)}
  .prices .lead{border-bottom-color:rgba(217,180,94,.38)}
  .prices .wt{color:var(--gold-ink);background:rgba(217,180,94,.07);border-color:rgba(217,180,94,.4)}
  .prices .pr{color:var(--berry)}
  .prices li.picked .pr{color:var(--berry-bright)}
  .qbtn{border-color:rgba(217,180,94,.55);color:var(--foil);background:rgba(217,180,94,.06)}
  .qbtn:hover{background:var(--metal-gold);color:var(--night-2);border-color:var(--foil)}
  .qbtn:disabled:hover{background:rgba(217,180,94,.06);color:var(--foil);border-color:rgba(217,180,94,.55)}
  .qn{color:var(--ivory)}
  .spice{border-top-color:rgba(217,180,94,.25)}
  .pepper{stroke:rgba(217,180,94,.35)}
  .pepper.on{stroke:var(--berry)}
  .sour .pips i{background:var(--night-0);border-color:var(--gold-light)}
  .sour-val{color:var(--ink-soft)}

  /* ---------- our story ---------- */
  .story-wrap{padding:clamp(1.6rem,4vw,3rem)}
  .story-wrap::before{content:"";position:absolute;top:14px;right:18px;width:80px;height:56px;pointer-events:none;
    background:var(--pg-blossom) center/contain no-repeat;opacity:.95}
  .lang-tabs{background:rgba(6,16,11,.6);border:1px solid rgba(217,180,94,.4);
    -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(240,212,136,.08)}
  .lang-tabs button{color:var(--ink-soft)}
  #tab-en[aria-selected="true"],#tab-fa[aria-selected="true"]{background:var(--metal-gold);color:var(--night-2)}
  .lang-tabs button:not([aria-selected="true"]):hover{background:rgba(217,180,94,.12);color:var(--ivory)}
  .story-body p{color:#ddd6c1}
  .story-body p:first-child{color:#efe3bd}
  .story-body.fa p{color:#ddd6c1}
  .story-body.fa p:first-child{color:#efe3bd}
  .story-sign{border-top-color:rgba(217,180,94,.3)}
  .story-sign .nm{color:var(--foil)}
  .story-sign .ttl{color:var(--gold-ink)}
  .story-photos figure{
    border:1px solid transparent;border-radius:10px;
    background:radial-gradient(circle at 50% 40%, #1f3527, #0c1912 72%) padding-box,var(--pg-edge) border-box;
    box-shadow:0 12px 28px rgba(0,0,0,.45)}
  .story-photos img{border-radius:9px}
  .story-photos figure::after{
    inset:4px;border-radius:7px;border:1px solid rgba(240,212,136,.16);
    background:linear-gradient(175deg, rgba(240,212,136,.08) 0%, rgba(0,0,0,0) 30%);
    box-shadow:none}
  .story-photos figcaption{background:linear-gradient(to top, rgba(6,16,11,.95), transparent);color:var(--foil)}

  /* ---------- steps ---------- */
  .step::before{background:var(--night-0);border-color:var(--gold-light);color:var(--foil);
    box-shadow:0 0 0 3px var(--night-0),0 0 0 4px rgba(217,180,94,.3)}
  .step h3{color:var(--ivory)}
  .step p{color:var(--ink-soft)}

  /* ---------- order ---------- */
  .sum-empty{color:var(--ink-soft)}
  .sum-line{border-bottom-color:rgba(217,180,94,.25)}
  .sum-line .sl-q{color:var(--ink-soft)}
  .sum-edit{border-color:rgba(217,180,94,.4);color:var(--ivory)}
  .sum-edit:hover{background:rgba(217,180,94,.12)}
  .order-total{background:rgba(6,16,11,.55);border:1px solid rgba(217,180,94,.22);
    -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(240,212,136,.08)}
  .order-total .t-lbl{color:var(--green-mid)}
  .order-total .t-val{color:var(--berry)}
  .order-total .t-note{color:var(--ink-soft)}
  .field label{color:var(--green-mid)}
  .field input,.field textarea{
    background:rgba(6,16,11,.6);color:var(--ivory);border:1px solid rgba(217,180,94,.38);
    transition:border-color .2s ease,box-shadow .25s ease}
  .field input::placeholder,.field textarea::placeholder{color:rgba(207,199,174,.55)}
  .field input:focus,.field textarea:focus{
    outline:none;border-color:var(--foil);
    box-shadow:0 0 0 3px rgba(217,180,94,.22),0 0 22px rgba(217,180,94,.28)}   /* gold focus glow */
  .submit-btn{background:var(--metal-gold);color:var(--night-2);border:1px solid var(--foil);
    box-shadow:inset 0 0 0 1px rgba(6,16,11,.5),0 10px 30px rgba(0,0,0,.4),0 0 24px rgba(217,180,94,.18)}
  .submit-btn:hover{background:var(--metal-gold);color:var(--night-2);border-color:#fff3c9;
    box-shadow:inset 0 0 0 1px rgba(6,16,11,.5),0 14px 34px rgba(0,0,0,.5),0 0 36px rgba(217,180,94,.38)}
  .submit-btn.ghost{background:rgba(6,16,11,.45);color:var(--ivory);border:1px solid rgba(217,180,94,.6);box-shadow:none}
  .submit-btn.ghost:hover{background:var(--metal-gold);color:var(--night-2);border-color:var(--foil)}
  .pay-note{color:var(--ink-soft)}
  .pay-note svg{stroke:var(--gold-light)}
  .or-rule{color:var(--ink-soft)}
  .or-rule::before,.or-rule::after{background:linear-gradient(90deg,transparent,rgba(217,180,94,.4),transparent)}
  .form-note{color:var(--ink-soft)}
  #orderStatus{color:var(--foil)}

  /* ---------- contact ---------- */
  .contact-card{color:var(--ivory)}
  .contact-ico{background:var(--night-0);border-color:var(--gold-light);
    box-shadow:0 0 0 3px var(--night-0),0 0 0 4px rgba(217,180,94,.3)}
  .contact-card .c-lbl{color:var(--ink-soft)}
  .contact-card .c-val{color:var(--ivory)}

  /* ---------- basket ---------- */
  .cart-fab{background:var(--metal-gold);color:var(--night-2);border:1px solid var(--foil);
    box-shadow:0 12px 32px rgba(0,0,0,.55),0 0 28px rgba(217,180,94,.35)}
  .cart-fab:hover{box-shadow:0 16px 38px rgba(0,0,0,.6),0 0 40px rgba(217,180,94,.5)}
  .cart-fab svg{stroke:var(--night-2)}
  .cart-fab .cf-count{background:var(--night-2);color:var(--foil)}
  .cart-backdrop{background:rgba(3,8,5,.72)}
  .cart-panel{
    background:linear-gradient(170deg,#132419,#0a1510);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 0 80px rgba(0,0,0,.7)}
  .cart-panel::after{border-color:rgba(217,180,94,.16)}
  @media(min-width:641px){.cart-panel{border-left:2px solid var(--gold)}}
  @media(max-width:640px){.cart-panel{border-top:2px solid var(--gold)}}
  .cart-grabber{background:rgba(217,180,94,.5)}
  .cart-head{border-bottom-color:rgba(217,180,94,.25)}
  .cart-head h2{color:var(--ivory)}
  .cart-head .fa{color:var(--gold-ink)}
  .cart-close svg{stroke:var(--ink-soft)}
  .cart-close:hover svg{stroke:var(--foil)}
  .cart-empty{color:var(--ink-soft)}
  .cart-empty-jar{color:rgba(217,180,94,.4)}
  .cart-line{border-bottom-color:rgba(217,180,94,.22)}
  .cart-line .cl-name{color:var(--ivory)}
  .cart-line .cl-var{color:var(--ink-soft)}
  .cart-line .cl-sum{color:var(--berry)}
  .cart-foot{background:var(--night-0);border-top-color:rgba(217,180,94,.25)}
  .cart-total .ct-lbl{color:var(--green-mid)}
  .cart-total .ct-val{color:var(--berry)}
  .cart-go{background:var(--metal-gold);color:var(--night-2);border:1px solid var(--foil);
    box-shadow:inset 0 0 0 1px rgba(6,16,11,.5),0 8px 24px rgba(0,0,0,.4)}
  .cart-go:hover{background:var(--metal-gold);color:var(--night-2);border-color:#fff3c9}
  .cart-clear{color:var(--ink-soft)}
  .cart-clear:hover{color:var(--ivory)}
  .fx-bloom{mix-blend-mode:screen}

  /* ---------- back to top (behaviour wired by garden.js: .pg-show + --p) ---------- */
  .pg-top{position:fixed;left:1.1rem;bottom:1.1rem;z-index:70;width:48px;height:48px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at 50% 35%,#1a2d21,#0a1510);
    box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 0 1px rgba(217,180,94,.25);
    opacity:0;transform:translateY(12px);pointer-events:none;
    transition:opacity .4s ease,transform .4s var(--ease)}
  .pg-top.pg-show{opacity:1;transform:none;pointer-events:auto}
  html:not(.pg-boot) .pg-top{opacity:1;transform:none;pointer-events:auto}   /* no script: always there */
  .pg-top:hover{box-shadow:0 14px 30px rgba(0,0,0,.55),0 0 0 1px rgba(217,180,94,.5),0 0 26px rgba(217,180,94,.3)}
  .pg-top svg{width:48px;height:48px;display:block;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .pg-top .pg-top-track{stroke:rgba(217,180,94,.22);stroke-width:1.5}
  .pg-top .pg-top-ring{stroke:var(--foil);stroke-width:1.5;transform:rotate(-90deg);transform-origin:50% 50%;
    stroke-dasharray:131.95;stroke-dashoffset:calc(131.95 * (1 - var(--p,0)))}
  .pg-top .pg-top-arrow{stroke:var(--foil);stroke-width:1.7;transition:transform .3s var(--ease)}
  .pg-top:hover .pg-top-arrow{transform:translateY(-2px)}
  @media(max-width:640px){
    .pg-top{left:.9rem;bottom:.9rem}
    body:has(.cart-fab.show) .pg-top{bottom:calc(.9rem + 58px)}   /* above the full-width basket bar */
  }

  /* ---------- footer ---------- */
  footer{background:linear-gradient(180deg,var(--night-0),#040b07);border-top:none;margin-top:3.2rem}
  footer::before{top:0;height:2px}       /* the foil ribbon is the edge */
  .foot-inner{padding-top:2.6rem;gap:1.6rem 2.4rem;align-items:center}
  .foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:center}
  .foot-nav a{color:var(--on-dark-dim);font-weight:500;font-size:1rem;letter-spacing:.02em;position:relative;padding-bottom:2px}
  .foot-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--foil);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
  .foot-nav a:hover{color:var(--foil);text-decoration:none}
  .foot-nav a:hover::after,.foot-nav a:focus-visible::after{transform:scaleX(1)}
  .foot-ig{display:flex;align-items:center;gap:.5rem}
  .foot-ig svg{width:16px;height:16px;fill:none;stroke:var(--gold-light);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  @media(max-width:760px){
    .foot-inner{flex-direction:column;align-items:center;text-align:center;gap:1.3rem}
    .foot-brand{flex-direction:column;text-align:center}
  }
  .foot-inner img{border-color:var(--gold-light);box-shadow:0 0 0 2px var(--night-0),0 0 0 3px rgba(217,180,94,.45)}
  .foot-brand strong{color:var(--ivory)}
  .foot-inner .fa{color:var(--gold-ink)}
  footer a{color:var(--foil)}
  .foot-orn{opacity:.8;max-width:240px}
  .foot-bar{border-top:none;padding-top:.4rem;color:var(--on-dark-dim)}
  .foot-small{color:var(--on-dark-dim);opacity:.8}

  /* ---------- phone ---------- */
  @media(max-width:480px){
    .pg-hero{padding:2rem 1.1rem 2.4rem;min-height:0}
    .pg-hero-inner{gap:2rem}
    .pg-medallion{width:min(180px,50vw);margin-bottom:1rem}
    .pg-hero-title{font-size:2rem}
    .badges{gap:.45rem}
    .pg-showcase{width:min(100%,360px)}
    .card .art{margin:10px 10px 0}
    section{padding:2.6rem 1.1rem}
  }

  /* ---------- reduced motion ---------- */
  @media(prefers-reduced-motion:reduce){
    .cta::after,.submit-btn::after,.cart-go::after,.nav-links .order-btn::after,.cart-fab::after{display:none}
  }
}