/* ==================== TOKENS — Ink & Paper ====================
   The palette is built on one near-black ink and a warm paper, with sage as
   a supporting colour rather than the loudest thing on screen. Colour is used
   sparingly so that where it does appear — a price, a single CTA — it means
   something. */
  :root{
    /* core */
    --ink:#14170F;          /* 17.36:1 on paper — headings, primary buttons */
    --ink-soft:#2A2F23;
    --paper:#FBFAF7;
    --surface:#F2EFE8;      /* tinted bands */
    --card:#FFFFFF;
    --muted:#5C6353;        /* 5.98:1 on paper */
    --border:#E4E0D6;
    --hairline:#EDE9E0;     /* structural rules that shouldn't read as borders */
    --line-strong:#868C7C;  /* 3.3:1 — outlines that alone mark a form control */
    --ink-hover:#22271C;
    --ink-glass:rgba(20,23,15,.88);
    --paper-glass:rgba(251,250,247,.9);

    /* accents — deployed, not decorated */
    --sage:#5F6E52;
    --sage-tint:#EDF0E8;
    --sage-pale:#F5F7F1;
    --clay:#A34E33;         /* 5.68:1 with white — sale/urgency only */
    --clay-tint:#FBF0EA;
    --ok:#5E7359;
    --sage-ink:#46533B;     /* text set on --sage-tint, 7.4:1 */
    --sage-line:#D5DCCB;    /* outlines drawn on --sage-pale */
    --on-sage:#FFFFFF;      /* text and glyphs on a solid --sage fill */

    /* chrome that keeps its own colour regardless of theme */
    --utility-bg:#14170F;
    --utility-fg:rgba(251,250,247,.82);
    --header-bg:rgba(251,250,247,.72);
    --header-bg-stuck:rgba(251,250,247,.86);
    --header-h:72px;        /* sticky bars below the header pin to this */

    /* type */
    --display:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
    --arab:"IBM Plex Sans Arabic","Noto Sans Arabic",system-ui,sans-serif;
    --lat:"IBM Plex Sans",system-ui,-apple-system,sans-serif;

    /* Modular scale (1.25) — every size on the page comes from this list.
       Fluid where it matters so headings don't step awkwardly at breakpoints. */
    --t-xs:12px; --t-sm:13.5px; --t-base:16px; --t-md:18px;
    --t-lg:clamp(20px,1.4vw + 16px,24px);
    --t-xl:clamp(26px,2.2vw + 18px,36px);
    --t-2xl:clamp(30px,3vw + 18px,46px);
    --t-3xl:clamp(34px,3.4vw + 20px,58px);

    /* radius hierarchy — the flat 4px everywhere was the strongest tell that
       nothing had been art-directed. Surfaces, controls and pills now differ. */
    --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:100px;

    /* spacing scale — 4px base */
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
    --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:72px; --s11:96px;
    --s12:128px;

    /* Layered shadows. A single soft blur reads as a default; two stacked
       layers (tight contact + wide ambient) reads as considered. */
    --sh-sm:0 1px 2px rgba(20,23,15,.04),0 1px 1px rgba(20,23,15,.03);
    --sh:0 1px 2px rgba(20,23,15,.04),0 8px 24px -12px rgba(20,23,15,.12);
    --sh-lg:0 2px 4px rgba(20,23,15,.04),0 18px 40px -16px rgba(20,23,15,.18);
    --sh-xl:0 4px 8px rgba(20,23,15,.05),0 32px 64px -24px rgba(20,23,15,.24);

    /* motion */
    --ease:cubic-bezier(.32,.72,0,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
    --dur:.24s;
  }

  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scrollbar-gutter:stable}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
  /* Looping decoration only runs while its section is on screen (motion.js). */
  .is-offscreen,.is-offscreen *{animation-play-state:paused!important}

  /* ==================== SCROLL REVEAL ====================
     A short rise, not a slide. Elements are only hidden once the script has
     confirmed it can reveal them again — without the .js-reveal gate a
     scripting failure would leave the page blank. */
  .js-reveal [data-reveal]{
    opacity:0;transform:translateY(14px);
    transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  }
  .js-reveal [data-reveal].is-revealed{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){
    .js-reveal [data-reveal]{opacity:1;transform:none}
  }

  body{
    background:var(--paper);color:var(--ink);overflow-x:hidden;
    font-family:var(--arab);font-size:var(--t-base);line-height:1.7;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    font-synthesis-weight:none;
  }

  /* Headings carry the display face and tighten as they scale up — large
     Arabic type set at default tracking looks loose and unfinished. */
  h1,h2,h3,h4,.display{
    font-family:var(--display);font-weight:600;
    line-height:1.35;letter-spacing:-.02em;
    text-wrap:balance;color:var(--ink);
  }
  h1{font-size:var(--t-2xl);letter-spacing:-.03em;line-height:1.28}
  h2{font-size:var(--t-xl);letter-spacing:-.025em;line-height:1.3}
  h3{font-size:var(--t-lg);letter-spacing:-.02em;line-height:1.4}
  h4{font-size:var(--t-md);letter-spacing:-.01em;line-height:1.45}
  p{text-wrap:pretty}

  /* Numerals are read as data throughout the store — prices, quantities,
     phone numbers — so they get tabular figures and Latin direction. */
  .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

  /* An eyebrow/label register: small, spaced, quiet. Used above headings
     instead of another bold line competing with the h2. */
  .eyebrow{
    font-family:var(--display);
    font-size:var(--t-xs);font-weight:500;
    letter-spacing:.14em;color:var(--muted);
    display:inline-block;
  }
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
  /* The ring follows each control's own shape: forcing a radius here made
     every pill and round button turn square the moment it took focus. */
  a:focus-visible,button:focus-visible,input:focus-visible{
    outline:2px solid var(--ink);outline-offset:3px;
  }
  .wrap{max-width:1180px;margin:0 auto;padding:0 20px}
  section[id]{scroll-margin-top:88px}

  /* ==================== UTILITY BAR ====================
     A quiet sage strip above the header: three promises, each with a small
     badge, and the WhatsApp number as a pill on the far end. */
  .utility{
    background:var(--sage-pale);border-bottom:1px solid var(--sage-line);
    font-size:13px;color:var(--sage-ink);
  }
  .utility .wrap{display:flex;align-items:center;gap:var(--s4);min-height:44px}
  .utility-promises{list-style:none;display:flex;align-items:center;gap:var(--s6);min-width:0}
  .utility-promises li{display:flex;align-items:center;gap:var(--s2);white-space:nowrap;font-weight:500}
  .utility-badge{
    display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;
    background:var(--card);border:1px solid var(--sage-line);
  }
  .utility-badge:has(.utility-art){background:none;border:0}
  .utility-badge svg{width:14px;height:14px;stroke:var(--sage-ink);fill:none;stroke-width:1.8}
  .utility-art{width:26px;height:26px;object-fit:contain;display:block}
  .utility-phone{
    margin-inline-start:auto;display:inline-flex;align-items:center;gap:var(--s2);
    min-height:32px;padding:0 6px 0 var(--s3);padding-inline-start:var(--s3);padding-inline-end:4px;
    border-radius:var(--r-pill);background:var(--card);border:1px solid var(--sage-line);
    color:var(--ink);font-weight:500;transition:border-color var(--dur) var(--ease);
  }
  .utility-phone:hover{border-color:var(--sage)}
  .utility-phone-label{font-size:12.5px;color:var(--muted)}
  .utility-phone .num{font-family:var(--lat);font-weight:600;letter-spacing:.02em}
  .utility-phone-ic{
    display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--sage-ink);
  }
  .utility-phone-ic svg{width:13px;height:13px;stroke:var(--paper);fill:none}
  /* The 3D phone disc is the whole circle, so the flat one steps aside. */
  .utility-phone-ic:has(.phone-art){background:none;width:28px;height:28px}
  .phone-art{display:block;width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(20,23,15,.18))}
  /* Both phone pills: an even 4px ring around the disc, room on the text side. */
  .utility-phone:has(.phone-art){min-height:36px;padding:4px;padding-inline-start:var(--s4);gap:var(--s2)}
  .foot-wa:has(.phone-art){min-height:44px;padding:4px;padding-inline-end:var(--s5);gap:var(--s3)}
  .foot-wa .phone-art{width:36px;height:36px}
  @media (max-width:1000px){.utility .hide-md{display:none}}
  @media (max-width:640px){
    .utility .hide-sm{display:none}
    .utility-phone-label{display:none}
  }

  /* ==================== HEADER ==================== */
  .site-header{
    position:sticky;top:0;z-index:60;
    background:var(--header-bg);
    backdrop-filter:blur(20px) saturate(1.8);
    -webkit-backdrop-filter:blur(20px) saturate(1.8);
    border-bottom:1px solid transparent;
    transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),
               box-shadow var(--dur) var(--ease);
  }
  /* The rule only appears once the page has moved, so the header sits flush
     with the hero at rest instead of drawing a line across it. */
  .site-header.is-stuck{
    border-bottom-color:var(--hairline);
    background:var(--header-bg-stuck);
    box-shadow:0 10px 30px -24px rgba(20,23,15,.35);
  }
  /* Three columns with equal outer tracks keep the menu on the true centre of
     the page, whatever the widths of the logo and the actions either side. */
  .nav{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    gap:var(--s6);height:var(--header-h);
  }
  .mark{
    display:inline-flex;align-items:center;gap:var(--s3);
    line-height:1;flex:none;min-height:44px;justify-self:start;
  }
  .mark-glyph{
    width:36px;height:36px;border-radius:var(--r-sm);
    display:grid;place-items:center;
    background:var(--ink);color:var(--paper);
    font-family:var(--display);font-size:20px;font-weight:600;line-height:1;
    padding-bottom:3px;
    transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);
  }
  .mark:hover .mark-glyph{transform:rotate(-6deg);background:var(--sage)}
  .mark-art{
    width:44px;height:44px;flex:none;object-fit:contain;
    filter:drop-shadow(0 4px 6px rgba(20,23,15,.12));
    transition:transform .5s var(--ease-out);
  }
  .mark:hover .mark-art{transform:rotate(-8deg) scale(1.05)}
  /* The lockup: leaf mark beside the Arabic name, one line, room to breathe. */
  /* The name in Ruqʿa calligraphy: the hand people actually write in,
     warm and personal beside the soft leaves. */
  .mark-ar{
    font-family:"Aref Ruqaa",var(--display);font-size:32px;font-weight:700;
    color:var(--ink);letter-spacing:0;line-height:1.2;
    padding-bottom:6px;transition:color var(--dur) var(--ease);
  }
  .mark:hover .mark-ar{color:var(--sage-ink)}

  /* The menu is a segmented track: the current section sits on a raised chip,
     so "where am I" reads at a glance instead of from a 1.5px underline. */
  .nav-links{
    display:flex;align-items:center;gap:2px;padding:4px;
    background:var(--surface);border:1px solid var(--hairline);
    border-radius:var(--r-pill);
    font-size:14.5px;color:var(--muted);
  }
  .nav-links a{
    display:inline-flex;align-items:center;min-height:40px;
    padding:0 var(--s5);border-radius:var(--r-pill);
    white-space:nowrap;
    transition:color var(--dur) var(--ease),background var(--dur) var(--ease),
               box-shadow var(--dur) var(--ease);
  }
  .nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.6)}
  /* Current state comes from a real page match, or from the scroll spy for
     same-page anchors — never from both at once. */
  .nav-links .current-menu-item > a,
  .nav-links .current_page_item > a,
  .nav-links a[aria-current],
  .nav-links a.is-current{
    color:var(--ink);font-weight:500;
    background:var(--card);box-shadow:var(--sh-sm),0 0 0 1px var(--hairline);
  }

  .nav-right{display:flex;align-items:center;gap:var(--s2);justify-self:end}
  .icon-btn{
    width:44px;height:44px;border-radius:var(--r-pill);
    display:grid;place-items:center;border:1px solid var(--border);
    background:var(--card);position:relative;
    transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
  }
  .icon-btn:hover{border-color:var(--ink);background:var(--surface)}
  .icon-btn svg{width:18px;height:18px;stroke:var(--ink)}

  /* Order basket: absent until something is in it, so an empty header never
     offers a button that does nothing. */
  .nav-cart{display:none}
  .nav-cart.has-items{display:grid}
  .nav-cart-n{
    position:absolute;top:-3px;inset-inline-end:-3px;
    min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-pill);
    background:var(--clay);color:#fff;border:2px solid var(--paper);
    font-family:var(--lat);font-size:10.5px;font-weight:600;line-height:15px;
    text-align:center;
  }

  /* ---------- WhatsApp button (lawazem_wa_button) ----------
     Deep sage rather than black, with the WhatsApp glyph in a pale circle:
     every "message us" action on the site shares this one shape. */
  .wa-btn{
    display:inline-flex;align-items:center;gap:var(--s3);min-height:52px;
    padding:5px;padding-inline-end:var(--s5);border-radius:var(--r-pill);
    background:var(--sage-ink);color:var(--paper);white-space:nowrap;
    font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:-.01em;
    box-shadow:0 1px 2px rgba(20,23,15,.08),0 10px 24px -12px rgba(70,83,59,.6);
    transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  }
  .wa-btn:hover{background:#3C4833;transform:translateY(-1px);box-shadow:0 1px 2px rgba(20,23,15,.08),0 14px 28px -12px rgba(70,83,59,.7)}
  .wa-btn:active{transform:none}
  .wa-btn-ic{
    display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;
    background:var(--sage-tint);
  }
  .wa-btn-ic svg{display:block;width:19px;height:19px;stroke:var(--sage-ink);fill:none}
  /* The 3D chat disc is a whole button face: it replaces the pale circle. */
  /* The 3D bubble sits straight on the button, cream on deep sage, with no
     disc behind it: at this size a disc only muddies the contrast. */
  .wa-btn-ic:has(.wa-btn-art){background:none}
  .wa-btn-art{display:block;width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))}
  .wa-btn--sm .wa-btn-art{width:28px;height:28px}
  .wa-btn-t{line-height:1.2}
  .wa-btn-go{display:grid;place-items:center;width:22px;height:22px;flex:none;margin-inline-start:var(--s2)}
  .wa-btn-go svg{display:block;width:17px;height:17px;stroke:currentColor;opacity:.8;transition:transform var(--dur) var(--ease)}
  .wa-btn:hover .wa-btn-go svg{transform:translateX(-4px)}
  /* compact, for the header */
  .wa-btn--sm{min-height:44px;padding:4px;padding-inline-end:var(--s4);gap:var(--s2);font-size:14px}
  .wa-btn--sm .wa-btn-ic{width:36px;height:36px}
  .wa-btn--sm .wa-btn-ic svg{width:17px;height:17px}
  /* full width, label taking the middle */
  .wa-btn--block{display:flex;width:100%;min-height:56px;padding:6px;padding-inline-end:var(--s5)}
  .wa-btn--block .wa-btn-ic{width:44px;height:44px}
  .wa-btn--block .wa-btn-t{flex:1;text-align:start;font-size:15.5px}

  @media (max-width:960px){
    .nav-links a{padding:0 var(--s4)}
  }
  @media (max-width:860px){
    :root{--header-h:64px}
    .nav{display:flex}
    .nav-links{display:none}
    .nav-right{margin-inline-start:auto}
  }
  @media (max-width:480px){.nav-cta{display:none}}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
    padding:15px var(--s7);border-radius:var(--r-pill);
    font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:-.01em;
    border:1px solid transparent;min-height:52px;position:relative;
    transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
               color var(--dur) var(--ease),transform var(--dur) var(--ease),
               box-shadow var(--dur) var(--ease);
  }
  /* Ink, not sage. The primary action should be the highest-contrast thing on
     the page — colour is saved for meaning elsewhere. */
  .btn-primary{background:var(--ink);color:var(--paper);box-shadow:var(--sh)}
  .btn-primary:hover{background:var(--ink-hover);transform:translateY(-1px);box-shadow:var(--sh-lg)}
  .btn-primary:active{transform:translateY(0);box-shadow:var(--sh-sm)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--border)}
  .btn-ghost:hover{border-color:var(--ink);background:var(--card);transform:translateY(-1px)}
  .btn-ghost:active{transform:translateY(0)}
  .btn svg{width:17px;height:17px;stroke:currentColor;flex:none;transition:transform var(--dur) var(--ease)}
  .btn:hover svg{transform:translateX(-3px)}

  /* ==================== FAQ ====================
     Shared by the homepage and the category guides. One column at reading
     width, closed by a contact bar instead of a sticky aside that competed
     with the questions for attention. */
  .faqwrap{max-width:820px}
  .faq{border-top:1px solid var(--border)}
  .faq details{border-bottom:1px solid var(--hairline)}
  .faq summary{
    padding:var(--s5) 0;font-family:var(--display);
    font-size:17px;font-weight:450;letter-spacing:-.02em;cursor:pointer;
    display:flex;align-items:center;gap:var(--s4);list-style:none;
    min-height:64px;transition:color var(--dur) var(--ease);
  }
  .faq summary:hover{color:var(--sage)}
  .faq summary::-webkit-details-marker{display:none}
  /* A rotating cross rather than a +/- glyph swap: the substitution jumped,
     this reads as one continuous control. */
  .faq summary::after{
    content:"";margin-inline-start:auto;flex:none;
    width:11px;height:11px;
    background:
      linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
      linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
    color:var(--muted);
    transition:transform .3s var(--ease),color var(--dur) var(--ease);
  }
  .faq details[open] summary::after{transform:rotate(135deg);color:var(--ink)}
  .faq details[open] summary{color:var(--ink)}
  .faq .a{
    padding:0 0 var(--s6);font-size:15px;color:var(--muted);
    line-height:1.85;max-width:62ch;
  }
  @media (prefers-reduced-motion:no-preference){
    .faq details[open] .a{animation:faqIn .34s var(--ease-out)}
  }
  @keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

  .faq-contact{
    display:flex;align-items:center;flex-wrap:wrap;gap:var(--s5) var(--s6);
    margin-top:var(--s8);padding:var(--s6) var(--s7);
    background:var(--sage-pale);border-radius:var(--r-lg);
  }
  .faq-contact > div{flex:1 1 260px}
  .faq-contact h3{font-size:18px;font-weight:500;margin-bottom:2px}
  .faq-contact p{font-size:14px;color:var(--muted)}
  @media (max-width:559px){
    .faq-contact{padding:var(--s6) var(--s5)}
    .faq-contact .btn{width:100%}
  }

  /* ---------- homepage FAQ ----------
     Two columns: heading and the way to ask on one side, the questions in
     a card on the other, so neither half of the band is left empty. */
  .faq-home{display:grid;grid-template-columns:1fr;gap:var(--s7)}
  /* Both columns end on the same line: the ask card stretches to the
     bottom of the questions, and the art takes the space that frees up. */
  @media (min-width:960px){
    .faq-home{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s9);align-items:stretch}
    .faq-side{display:flex;flex-direction:column}
    .faq-side .faq-ask{flex:1}
    .faq-ask-btn{margin-top:auto}
  }
  .faq-side .sec-head{margin-bottom:var(--s6)}
  /* One column: questions first, the way to ask after them. */
  @media (max-width:959px){
    .faq-home{gap:var(--s5)}
    .faq-side{display:contents}
    .faq-side .sec-head{margin-bottom:0}
    .faq-card{order:1}
    .faq-ask{order:2}
  }
  /* One centred axis: art, heading and sentence as a group, then the
     action across the full width at the foot with the hours under it. */
  .faq-ask{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    padding:var(--s8) var(--s7) var(--s6);border-radius:var(--r-lg);
    background:var(--sage-pale);border:1px solid var(--sage-line);
  }
  .faq-ask-art{
    position:relative;isolation:isolate;display:block;
    width:160px;height:160px;margin-bottom:var(--s5);
  }
  .faq-ask img{
    position:relative;z-index:1;width:100%;height:100%;object-fit:contain;
    filter:drop-shadow(0 14px 20px rgba(20,23,15,.12));
  }
  /* A short neon segment travelling round the art. The whole tube is drawn
     (white-hot core from the border, coloured glow from stacked shadows),
     and a rotating conic mask reveals only one short arc of it, fading
     out behind like a tail. The mask sits on a wrapper well larger than
     the tube, so the glow is never clipped. */
  @property --neon-a{syntax:"<angle>";inherits:false;initial-value:0deg}
  .faq-neon{
    position:absolute;z-index:0;inset:-32px;pointer-events:none;
    -webkit-mask:conic-gradient(from var(--neon-a),transparent 0deg,transparent 250deg,#000 330deg,#000 350deg,transparent 360deg);
    mask:conic-gradient(from var(--neon-a),transparent 0deg,transparent 250deg,#000 330deg,#000 350deg,transparent 360deg);
    animation:faqNeon 3.4s linear infinite;
  }
  .faq-neon i{
    position:absolute;inset:25px;border-radius:32%;
    /* Tinted from the art itself. On a light card neon reads through the
       tube's own colour, so the tube is a bright sage with a thin pale
       core, wrapped in the question mark's deeper sage. */
    border:3px solid #A7CC8E;
    box-shadow:
      0 0 0 1px rgba(244,249,236,.9) inset,
      0 0 4px #A7CC8E,
      0 0 10px #8BB373,
      0 0 22px rgba(107,145,86,.75),
      0 0 40px rgba(95,124,82,.4),
      inset 0 0 8px rgba(139,179,115,.7);
  }
  @keyframes faqNeon{to{--neon-a:360deg}}
  @media (max-width:959px){.faq-ask-art{width:112px;height:112px}}
  .faq-ask h3{font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em;margin-bottom:var(--s2)}
  .faq-ask p{font-size:16.5px;color:var(--ink-soft);line-height:1.8;max-width:30ch;margin-bottom:var(--s7)}

  .faq-hours{
    display:inline-flex;align-items:center;gap:6px;margin-top:var(--s3);
    font-size:13.5px;color:var(--muted);
  }
  .faq-hours svg{width:15px;height:15px;flex:none;stroke:var(--muted)}

  .faq-card{
    border:1px solid var(--border);border-radius:var(--r-lg);
    background:var(--card);padding:var(--s2) var(--s7);
  }
  .faq-card details:last-child{border-bottom:0}
  .faq-card summary::after{
    width:32px;height:32px;border-radius:50%;
    background:
      linear-gradient(currentColor,currentColor) center/11px 1.5px no-repeat,
      linear-gradient(currentColor,currentColor) center/1.5px 11px no-repeat,
      var(--surface);
  }
  .faq-card details[open] summary::after{
    background:
      linear-gradient(currentColor,currentColor) center/11px 1.5px no-repeat,
      linear-gradient(currentColor,currentColor) center/1.5px 11px no-repeat,
      var(--sage-tint);
  }
  @media (max-width:559px){
    .faq-card{padding:0 var(--s5)}
    .faq-ask{padding:var(--s6) var(--s5)}
  }

  /* ==================== FOOTER ====================
     Deliberately small: the mark, one line on what the store is, and the
     number on one row, the copyright under it. No menu: the header has it. */
  .site-footer{
    background:var(--surface);border-top:1px solid var(--hairline);
    padding:var(--s7) 0 var(--s6);
  }
  .foot-row{
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
    gap:var(--s4) var(--s6);
  }
  /* One line on what the store is, not a second copy of the header menu. */
  .foot-line{flex:1;min-width:0;font-size:14.5px;color:var(--muted);line-height:1.7;text-align:center;text-wrap:balance}
  .foot-wa{
    display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;
    padding:0 var(--s4);border-radius:var(--r-pill);
    background:var(--card);border:1px solid var(--border);
    font-size:14px;font-weight:500;color:var(--ink);
    transition:border-color var(--dur) var(--ease);
  }
  .foot-wa:hover{border-color:var(--sage)}
  .foot-wa svg{width:16px;height:16px;flex:none;stroke:var(--sage)}
  .foot-wa .num{font-family:var(--lat)}
  .foot-copy{
    margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--border);
    text-align:center;font-size:12.5px;color:var(--muted);
  }
  @media (max-width:759px){
    .foot-row{flex-direction:column;justify-content:center}
  }

/* ==================== SHARED ATOMS ==================== */
.sec-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s3);
  margin-bottom:var(--s8);
}
.sec-head .eyebrow{margin-bottom:var(--s3)}
.sec-head h1,
.sec-head h2{font-size:var(--t-xl);letter-spacing:-.025em;line-height:1.3}
.catalog-more{display:flex;justify-content:center;margin-top:var(--s8)}
.catalog-all{min-width:260px}
@media (max-width:559px){.catalog-all{width:100%}}
.sec-head .sub{
  font-size:15px;color:var(--muted);margin-top:var(--s2);
  max-width:52ch;line-height:1.7;
}
.sec-link{
  margin-inline-start:auto;font-size:14px;color:var(--ink);font-weight:500;
  font-family:var(--display);letter-spacing:-.01em;
  white-space:nowrap;display:inline-flex;align-items:center;gap:7px;min-height:44px;
  position:relative;
}
.sec-link::after{
  content:"";position:absolute;inset-inline:0;bottom:12px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur) var(--ease);
}
.sec-link:hover::after{transform:scaleX(1)}


/* ==================== CATALOGUE ====================
   The product card, its grid and the filter chips render on the homepage,
   the shop archive and as related products. They live here, once, so the
   three surfaces can't drift apart again — two page-scoped copies had
   already diverged in badge shape, chip colour and subtitle styling. */

/* ---------- filter chips ----------
   The homepage filters in place (aria-pressed buttons); the archive links
   between category pages (aria-current links). Same control, same look. */
.filters{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s7)}
.chip-f{
  padding:var(--s2) var(--s5);border-radius:var(--r-pill);
  border:1px solid var(--border);background:transparent;
  font-family:var(--display);font-size:13.5px;font-weight:400;
  letter-spacing:-.01em;color:var(--muted);
  min-height:44px;display:inline-flex;align-items:center;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.chip-f:hover{border-color:var(--ink);color:var(--ink)}
/* Phones: one row that scrolls sideways, the far edge fading to show it
   continues, instead of chips stacking into two or three lines. */
@media (max-width:759px){
  .filters{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:-20px;padding-inline:20px;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 36px);
    mask-image:linear-gradient(to right,transparent 0,#000 36px);
  }
  .filters::-webkit-scrollbar{display:none}
  .filters .chip-f{flex:none;white-space:nowrap}
}
.chip-f[aria-pressed="true"],
.chip-f[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ---------- grid ----------
   4-up only once cards can stay comfortably wide; 3-up covers the
   tablet/small-laptop range that would otherwise squeeze them to ~180px. */
.prods{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s4)}
@media (min-width:640px){.prods{grid-template-columns:repeat(3,1fr);gap:var(--s7) var(--s5)}}
@media (min-width:1080px){.prods{grid-template-columns:repeat(4,1fr)}}

/* ---------- card ----------
   Borderless. The image block carries its own tint, so the card reads as an
   object on the page rather than a box drawn around content. The link
   covers image + text; the add button sits outside it so the markup stays
   valid and the button keeps its own click target. */
.prod{background:transparent;display:flex;flex-direction:column;position:relative}
.prod-link{display:flex;flex-direction:column;flex:1;color:inherit}
.prod-art{
  aspect-ratio:4/5;position:relative;overflow:hidden;
  background:var(--surface);border-radius:var(--r-md);
  isolation:isolate;
}
.prod-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(20,23,15,.05);
}
.prod-art .shot{
  width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  filter:saturate(.94);
  transition:transform .7s var(--ease-out),filter .5s var(--ease);
}
.prod:hover .prod-art .shot{transform:scale(1.06);filter:saturate(1.04)}

.prod-badge{
  position:absolute;top:10px;inset-inline-start:10px;z-index:2;
  background:var(--clay);color:#fff;
  font-family:var(--display);font-size:10.5px;font-weight:500;letter-spacing:.02em;
  padding:5px 10px;border-radius:var(--r-pill);
  box-shadow:0 2px 8px rgba(163,78,51,.25);
}
/* "Best seller" is information, not urgency — it shouldn't shout in the
   same red as a sale. */
.prod-badge--q{
  background:var(--ink-glass);box-shadow:0 2px 8px rgba(20,23,15,.2);
}

/* Availability matters at the moment of deciding, so it fades in on intent
   rather than sitting on every tile at rest. */
.stock{
  position:absolute;inset-block-end:10px;inset-inline-end:10px;z-index:2;
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:var(--r-pill);
  background:var(--paper-glass);
  box-shadow:0 1px 3px rgba(20,23,15,.08);
  font-size:10.5px;color:var(--ink);line-height:1.6;
  opacity:0;transform:translateY(4px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.prod:hover .stock,.prod:focus-within .stock{opacity:1;transform:none}
@media (hover:none){.stock{opacity:1;transform:none}}
.stock i{width:5px;height:5px;border-radius:50%;background:var(--ok);flex:none}
.stock--out{color:var(--muted)}

.prod-b{padding:var(--s4) 2px 0;display:flex;flex-direction:column;flex:1}
/* Tags read as quiet metadata, not as buttons competing with the title. */
.prod-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s2)}
/* "Who it suits", set on category guide pages in place of the tags. */
.prod-fit{
  align-self:flex-start;margin-bottom:var(--s2);
  padding:3px 10px;border-radius:var(--r-pill);
  background:var(--sage-tint);color:var(--sage-ink);
  font-family:var(--display);font-size:12px;font-weight:500;line-height:1.6;
}
.prod-tags .tag{
  font-size:10.5px;padding:3px 9px;border-radius:var(--r-xs);
  background:var(--surface);color:var(--muted);
}
/* The product name is the card's primary text, so it outranks the body copy
   around it rather than sitting below it. */
.prod-b h2,
.prod-b h3{
  font-family:var(--display);font-size:16px;font-weight:500;
  line-height:1.35;letter-spacing:-.02em;margin-bottom:5px;
  transition:color var(--dur) var(--ease);
}
.prod:hover .prod-b :is(h2,h3){color:var(--sage)}
.prod-b .psub{font-size:12.5px;color:var(--muted);line-height:1.55}

.prod-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-top:auto;padding:var(--s4) 2px 0;
}
.price{
  font-family:var(--display);font-size:17px;font-weight:600;color:var(--ink);
  letter-spacing:-.03em;line-height:1.25;white-space:nowrap;
}

.prod-add{
  width:36px;height:36px;flex:none;border-radius:50%;
  background:var(--surface);display:grid;place-items:center;
  position:relative;color:var(--ink);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
/* The dot stays 36px for the card's visual rhythm, but the tap area is a
   full 44px so it clears the minimum touch target on phones. */
.prod-add::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;
}
.prod-add-plus{font-size:19px;line-height:1;color:currentColor}
.prod-add:hover{background:var(--ink);color:var(--paper);transform:scale(1.06)}
.prod-add:active{transform:scale(.94)}
/* Already in the order — the tray toggles this class. Sage marks "done". */
.prod-add.is-in-tray{background:var(--sage);color:var(--on-sage)}
/* With the 3D discs the button is the disc itself. */
.prod-add:has(.prod-add-art){background:none;width:40px;height:40px}
.prod-add:has(.prod-add-art):hover{background:none;transform:scale(1.08)}
.prod-add-art{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(20,23,15,.14))}
.prod-add-art--in{display:none}
.prod-add.is-in-tray .prod-add-art--add{display:none}
.prod-add.is-in-tray .prod-add-art--in{display:block}
.prod-add.is-in-tray:has(.prod-add-art){background:none}

/* Plus -> check: the disc pops in and a ring of drops flies off it. */
.prod-add::after{
  content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  border-radius:50%;background:var(--sage);opacity:0;pointer-events:none;
  box-shadow:0 -22px 0 var(--sage),19px -11px 0 -1px var(--sage),19px 11px 0 var(--sage),
             0 22px 0 -1px var(--sage),-19px 11px 0 var(--sage),-19px -11px 0 -1px var(--sage);
}
@media (prefers-reduced-motion:no-preference){
  .prod-add.is-burst .prod-add-art--in{animation:add-pop .5s cubic-bezier(.34,1.56,.64,1)}
  .prod-add.is-burst::after{animation:add-drops .55s cubic-bezier(.2,.7,.3,1) forwards}
}
@keyframes add-pop{0%{transform:scale(.4) rotate(-25deg);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes add-drops{
  0%{transform:scale(.3) rotate(0);opacity:1}
  70%{opacity:1}
  100%{transform:scale(1.25) rotate(25deg);opacity:0}
}

/* ---------- guide cards ----------
   Shown on the homepage and on the blog listing, which loads only this file. */
.guides{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media (min-width:820px){.guides{grid-template-columns:repeat(3,1fr)}}
.guide{
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.guide:hover{border-color:var(--sage);box-shadow:var(--sh);transform:translateY(-2px)}
.guide-art{height:6px;background:linear-gradient(90deg,var(--sage),var(--clay));opacity:.75}
.guide-b{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.guide .kicker{
  align-self:flex-start;font-size:11px;color:var(--sage);font-weight:500;
  background:var(--sage-tint);padding:3px 10px;border-radius:var(--r-pill);
}
.guide h3{font-size:16.5px;font-weight:600;line-height:1.45}
.guide p{font-size:13.5px;color:var(--muted);line-height:1.7}
.guide .read{
  font-size:12.5px;color:var(--muted);margin-top:auto;padding-top:var(--s4);
  border-top:1px solid var(--border);display:flex;align-items:center;
  justify-content:space-between;gap:var(--s2);
}
.guide .read svg{width:15px;height:15px;stroke:var(--sage);transition:transform var(--dur) var(--ease)}
.guide:hover .read svg{transform:translateX(-3px)}

/* ==================== WORDPRESS BASICS ==================== */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;top:-100px;inset-inline-start:var(--s4);z-index:100;
  background:var(--card);padding:var(--s3) var(--s4);border-radius:var(--r-sm);
}
.skip-link:focus{top:var(--s3)}
.alignwide{max-width:1180px}
.aligncenter{margin-inline:auto}

/* menus come from wp_nav_menu, so style the generated lists.
   The link's own display/alignment is set with the header rules above — do not
   re-declare it here, or the flex centring is silently overridden and the
   labels ride high in their tap area. */
.nav-links{list-style:none}
.nav-links li{display:flex;align-items:center}

/* mobile menu */
.nav-toggle{display:none}
/* one glyph at a time: menu when closed, close mark when open */
.nav-toggle-close{display:none}
/* The 3D menu disc is the whole button face. */
.nav-toggle:has(.nav-toggle-art){border:0;background:none}
.nav-toggle-art{display:block;width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(20,23,15,.14))}
.nav-toggle[aria-expanded="true"] .nav-toggle-open{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle-close{display:block}
.tray-close:has(.tray-close-art):hover{background:none;transform:scale(1.06)}
.tray-close-art{display:block;width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(20,23,15,.14))}
.nav-toggle[aria-expanded="true"]{border-color:var(--ink);background:var(--surface)}

.mobile-menu{padding:0 0 var(--s5)}
/* The menu drops in rather than appearing in one frame. */
@media (prefers-reduced-motion:no-preference){
  .mobile-menu:not([hidden]){animation:menuIn .32s var(--ease-out)}
  .mobile-menu:not([hidden]) .mobile-links li{animation:menuItem .38s var(--ease-out) backwards}
  .mobile-menu:not([hidden]) .mobile-links li:nth-child(2){animation-delay:.04s}
  .mobile-menu:not([hidden]) .mobile-links li:nth-child(3){animation-delay:.08s}
  .mobile-menu:not([hidden]) .mobile-links li:nth-child(4){animation-delay:.12s}
  .mobile-menu:not([hidden]) .mobile-cta{animation:menuItem .38s var(--ease-out) .14s backwards}
}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes menuItem{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mobile-links{list-style:none;display:flex;flex-direction:column}
.mobile-menu{padding-top:var(--s2)}
/* Phones: the menu drops from under the header at its own height, over the
   page rather than pushing it down. Only the page below the panel is
   dimmed (its ::after); the header and close button stay clear. Tapping
   the dimmed area closes it (navigation.js). */
@media (max-width:860px){
  .mobile-menu{
    position:absolute;top:100%;inset-inline:0;z-index:70;
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
    padding:var(--s4) 20px var(--s5);
    background:var(--paper);border-top:1px solid var(--hairline);
    border-end-start-radius:var(--r-lg);border-end-end-radius:var(--r-lg);
    box-shadow:0 20px 40px -20px rgba(20,23,15,.4);
  }
  /* The dim sits over the page but under the header (z-index 60), so the
     header and the menu inside it stay clear. */
  body.menu-open::after{
    content:"";position:fixed;inset:0;z-index:55;
    background:rgba(20,23,15,.28);pointer-events:none;
  }
  @media (prefers-reduced-motion:no-preference){
    body.menu-open::after{animation:fadeIn .25s var(--ease)}
  }
  body.menu-open .site-header{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
  body.menu-open .utility{position:relative;z-index:60}
  .nav-toggle:focus-visible{outline-color:var(--sage);outline-offset:2px}
}
/* The links as one rounded card of rows: 3D icon, label, arrow. */
.mobile-links{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s1) var(--s2);
}
.mobile-links li + li{border-top:1px solid var(--hairline)}
.mobile-links a{
  display:flex;align-items:center;gap:var(--s3);min-height:60px;padding:0 var(--s2);
  font-family:var(--display);font-size:16px;font-weight:500;color:var(--ink);
  border-radius:var(--r-md);transition:background var(--dur) var(--ease);
}
.mobile-links a:active{background:var(--surface)}
.mobile-link-art{width:36px;height:36px;flex:none;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(20,23,15,.12))}
.mobile-link-t{flex:1}
.mobile-link-go{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface)}
.mobile-link-go svg{width:14px;height:14px;stroke:var(--muted)}
.mobile-links .current-menu-item > a,
.mobile-links .current_page_item > a{color:var(--ink);font-weight:600}
/* The header CTA is hidden at this width, so the menu has to carry it. */
.mobile-cta{width:100%;margin-top:var(--s5);min-height:48px}
.mobile-hours{
  margin-top:var(--s3);text-align:center;
  font-size:12.5px;color:var(--muted);
}
@media (max-width:860px){
  .nav-toggle{display:grid}
  .mobile-menu[hidden]{display:none}
  /* The menu is the only thing on screen while open — stop the page behind
     it from scrolling out from under the reader. */
  body.menu-open{overflow:hidden}
}


/* Nothing-published state. Not a dead end: it says what is coming and offers
   the two routes people actually want — the catalogue and WhatsApp. */
.empty-state{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:var(--s8);max-width:62ch;
}
.empty-state p{font-size:15px;color:var(--muted);line-height:1.8}
.empty-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
@media (max-width:560px){
  .empty-state{padding:var(--s6)}
  .empty-actions .btn{width:100%}
}
.is-disabled{opacity:.55;pointer-events:none}

/* ==================== ARTICLE / PAGE ==================== */
.entry{max-width:none}
.entry-head{margin-bottom:var(--s6)}
.entry-head h1{font-size:clamp(26px,3.4vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.3;text-wrap:balance}
.entry-head .kicker{
  display:inline-block;font-size:11.5px;color:var(--sage);font-weight:500;
  background:var(--sage-tint);padding:3px 10px;border-radius:100px;margin-bottom:var(--s3);
}
.entry--article .entry-head,
.entry--article .entry-content{max-width:66ch}
.entry-content{font-size:16px;line-height:1.9;color:var(--ink)}
.entry-content > * + *{margin-top:var(--s5)}
.entry-content h2{font-size:22px;font-weight:600;margin-top:var(--s8);letter-spacing:-.01em}
.entry-content h3{font-size:18px;font-weight:600;margin-top:var(--s7)}
.entry-content p{color:var(--muted)}
.entry-content a{color:var(--sage);text-decoration:underline;text-underline-offset:3px}
.entry-content ul,.entry-content ol{padding-inline-start:var(--s6);color:var(--muted)}
.entry-content li + li{margin-top:var(--s2)}
.entry-content img{border-radius:var(--r-sm)}
.entry-content blockquote{
  border-inline-start:2px solid var(--sage);padding-inline-start:var(--s5);color:var(--muted);
}
.entry-content table{width:100%;border-collapse:collapse;font-size:14px}
.entry-content th,.entry-content td{padding:var(--s3);border-bottom:1px solid var(--border);text-align:start}

/* ==================== PAGINATION ==================== */
.pagination{display:flex;gap:var(--s2);margin-top:var(--s8);justify-content:center}
.pagination .page-numbers{
  padding:var(--s2) var(--s4);border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--card);font-size:14px;color:var(--muted);
}
.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pagination a.page-numbers:hover{border-color:var(--ink);color:var(--ink)}

/* ==================== STATE ==================== */
.is-hidden{display:none!important}
.price-stock--out{color:var(--muted)}

/* ==================== WOOCOMMERCE PRICE MARKUP ==================== */
/* Woo emits <del>old</del> <ins>new</ins>; stack them so the sale price leads. */
.price del,
.price-now del{
  display:block;order:2;font-size:12px;font-weight:400;
  color:var(--muted);text-decoration:line-through;margin-top:2px;
}
.price ins,
.price-now ins{
  display:block;order:1;text-decoration:none;background:none;color:inherit;font-weight:inherit;
}
.price,
.price-now{display:flex;flex-direction:column;align-items:flex-start}
.price .woocommerce-Price-currencySymbol,
.price-now .woocommerce-Price-currencySymbol{
  font-size:.7em;font-weight:500;color:var(--muted);margin-inline-start:4px;
}


/* the old price on the product page needs to be legible, not a whisper */
.price-now del{font-size:15px;margin-top:4px}
.price-now del .woocommerce-Price-currencySymbol{font-size:.75em}

/* ==================== BASKET (ORDER TRAY) ====================
   Multi-item selection for a store that checks out over WhatsApp. The bar
   floats above content; the panel is a bottom sheet on mobile and a side
   sheet on wider screens. */
/* The 3D basket, used wherever the basket opens from: header, product bar. */
.basket-art{display:block;width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(20,23,15,.15))}

.tray[hidden]{display:none}

.tray{position:fixed;inset:0;z-index:90;display:flex}
.tray-scrim{
  position:absolute;inset:0;width:100%;height:100%;
  background:rgba(51,56,46,.42);border:0;cursor:pointer;
}
.tray-panel{
  position:relative;margin-block-start:auto;width:100%;
  display:flex;flex-direction:column;max-height:86vh;
  background:var(--paper);
  border-start-start-radius:var(--r-lg);border-start-end-radius:var(--r-lg);
  box-shadow:var(--sh-xl);
}
@media (prefers-reduced-motion:no-preference){
  .tray:not([hidden]) .tray-panel{animation:traySlide .38s var(--ease-out)}
  .tray:not([hidden]) .tray-scrim{animation:fadeIn .28s var(--ease)}
}
@keyframes traySlide{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.tray-head{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s5) var(--s5) var(--s4);border-bottom:1px solid var(--border);
}
.tray-head h2{font-size:18px;font-weight:600;display:flex;align-items:center;gap:var(--s2)}
.tray-head-n{
  display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;
  border-radius:var(--r-pill);background:var(--sage-tint);color:var(--sage-ink);
  font-size:12.5px;font-weight:600;
}
.tray-head-n[hidden]{display:none}
/* Grab handle on the bottom sheet; the side sheet on wider screens hides it. */
.tray-handle{
  display:block;width:40px;height:4px;border-radius:4px;margin:var(--s3) auto 0;
  background:var(--border);
}
.tray-close{
  margin-inline-start:auto;width:44px;height:44px;flex:none;margin-inline-end:-6px;
  display:grid;place-items:center;border-radius:50%;
  transition:background var(--dur) var(--ease);
}
.tray-close:hover{background:var(--surface)}
.tray-close svg{width:18px;height:18px;stroke:var(--ink)}

.tray-items{list-style:none;overflow-y:auto;padding:var(--s2) var(--s5);flex:1}
.tray-item{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) 0;border-bottom:1px solid var(--border);
}
.tray-item-thumb{
  width:52px;height:52px;flex:none;border-radius:var(--r-sm);overflow:hidden;
  background:var(--surface);
}
.tray-item-thumb img{width:100%;height:100%;object-fit:cover}
.tray-item:last-child{border-bottom:0}
.tray-item-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.tray-item-name{font-size:14px;font-weight:500;line-height:1.4}
.tray-item-price{font-size:13px;color:var(--muted)}
.tray-qty{
  display:flex;align-items:center;gap:var(--s1);flex:none;
  border:1px solid var(--border);border-radius:100px;background:var(--card);padding:2px;
}
.tray-qty-btn{
  width:32px;height:32px;border-radius:50%;flex:none;position:relative;
  display:grid;place-items:center;font-size:16px;line-height:1;
  color:var(--ink);transition:background var(--dur) var(--ease);
}
.tray-qty-btn:hover{background:var(--surface)}
/* The pill stays compact, but each step gets a full 44px tap area — these
   are the controls people use most on a phone, often one-handed. */
.tray-qty-btn::before{content:"";position:absolute;inset:-6px;border-radius:50%}
.tray-qty-n{min-width:20px;text-align:center;font-size:14px;font-weight:600}
/* With the 3D discs the pill outline goes: two buttons and the number
   between them, rather than buttons drawn inside a button. */
.tray-qty:has(.has-art){border:0;background:none;padding:0;gap:var(--s2)}
.tray-qty-btn.has-art{width:34px;height:34px;background:none;transition:transform var(--dur) var(--ease)}
.tray-qty-btn.has-art:hover{background:none;transform:translateY(-1px) scale(1.06)}
.tray-qty-btn.has-art:active{transform:scale(.92)}
.tray-qty-btn img{display:block;width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(20,23,15,.14))}
/* The count gets its own small window between the discs, same height, so
   the three read as one control instead of a loose digit. */
.tray-qty:has(.has-art) .tray-qty-n{
  display:grid;place-items:center;min-width:38px;height:34px;padding:0 6px;
  border-radius:var(--r-sm);background:var(--card);border:1px solid var(--border);
  font-family:var(--lat);font-size:15px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1;
}

.tray-foot{padding:var(--s4) var(--s5) var(--s6);border-top:1px solid var(--border);background:var(--card)}
.tray-total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--s4)}
.tray-total span{font-size:13.5px;color:var(--muted)}
.tray-total strong{font-size:20px;font-weight:700;letter-spacing:-.01em}
.tray-send{width:100%}
.tray-promises{
  list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s2) var(--s5);
  margin-top:var(--s4);
}
.tray-promises li{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.tray-promises svg{width:14px;height:14px;stroke:var(--sage);flex:none}
.tray-promise-art{width:28px;height:28px;flex:none;object-fit:contain}
.tray-head-art{width:44px;height:44px;flex:none;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(20,23,15,.10))}
.tray-toast-art{width:40px;height:40px;flex:none;object-fit:contain;margin-inline-start:-6px}

/* "Added" toast: floats above whatever bar holds the bottom edge. */
.tray-toast{
  position:fixed;z-index:85;inset-inline:0;bottom:calc(24px + env(safe-area-inset-bottom,0px));
  width:calc(100% - 40px);max-width:440px;margin:0 auto;
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s2) var(--s2) var(--s2) var(--s4);padding-inline-start:var(--s5);
  border-radius:var(--r-md);background:var(--card);color:var(--ink);
  border:1px solid var(--border);box-shadow:var(--sh-xl);
  font-size:14px;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .2s var(--ease),transform .3s var(--ease-out);
}
.tray-toast.is-shown{opacity:1;transform:none;pointer-events:auto}
@media (max-width:899px){body:has(.buybar) .tray-toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}}
.tray-toast-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tray-toast-view{
  flex:none;min-height:40px;padding:0 var(--s4);border-radius:var(--r-sm);
  background:var(--sage-tint);color:var(--sage-ink);
  font-family:var(--display);font-size:13.5px;font-weight:500;
}
.tray-toast-view:hover{background:var(--sage-line)}

/* Count badges pulse once when something is added. */
@media (prefers-reduced-motion:no-preference){
  .is-bumped{animation:badgeBump .45s var(--ease-out)}
}
@keyframes badgeBump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

body.tray-open{overflow:hidden}

/* Side sheet once there is room for one. */
@media (min-width:760px){
  .tray-panel{
    margin-block-start:0;margin-inline-start:auto;
    width:min(430px,100%);max-height:none;height:100%;
    border-radius:0;
  }
  .tray-handle{display:none}
  /* A side sheet should arrive from its own edge, not from the bottom. */
  @media (prefers-reduced-motion:no-preference){
    .tray:not([hidden]) .tray-panel{animation:trayIn .4s var(--ease-out)}
  }
  @keyframes trayIn{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
}


/* The bar floats over the page, so the last of the content needs room to
   clear it. Product pages reserve space for their own bar in shop.css. */

/* ---------- AI assistant button (coming soon) ---------- */
.ai-fab{
  position:fixed;z-index:60;left:auto;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);
}
.ai-btn{
  position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--sage-ink);color:var(--paper);
  box-shadow:0 10px 24px rgba(20,23,15,.22),0 2px 6px rgba(20,23,15,.12);
  transition:transform var(--dur) var(--ease);
}
.ai-btn:has(.ai-art){background:none;box-shadow:none}
.ai-btn:hover{transform:scale(1.06)}
.ai-btn:active{transform:scale(.95)}
.ai-art{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(20,23,15,.18))}
.ai-soon{
  position:absolute;top:-6px;right:auto;left:-10px;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--card);color:var(--sage-ink);border:1px solid var(--sage-line);
  font-size:11px;font-weight:600;line-height:1.5;white-space:nowrap;
}
.ai-note{
  width:min(260px,calc(100vw - 40px));padding:var(--s3) var(--s4);border-radius:var(--r-md);
  background:var(--card);border:1px solid var(--border);color:var(--ink);
  box-shadow:0 12px 32px rgba(20,23,15,.14);display:flex;flex-direction:column;gap:2px;
  font-size:13.5px;line-height:1.6;
}
.ai-note strong{font-size:14px}
.ai-note span{color:var(--muted)}
/* Hidden until the button is tapped; opens from the button's corner. */
.ai-note{
  transform-origin:bottom right;opacity:0;visibility:hidden;transform:translateY(14px) scale(.6);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s;
}
.ai-note.is-open{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .25s var(--ease-out),transform .5s cubic-bezier(.34,1.56,.64,1),visibility 0s;
}
.ai-note>*{opacity:0;transform:translateY(6px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.ai-note.is-open>*{opacity:1;transform:none;transition:opacity .35s var(--ease-out) .12s,transform .45s var(--ease-out) .12s}
.ai-note.is-open>span{transition-delay:.2s}
.ai-btn .ai-art,.ai-btn .ai-spark{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.ai-btn.is-open .ai-art,.ai-btn.is-open .ai-spark{transform:rotate(90deg) scale(.92)}
.ai-btn.is-open .ai-soon{opacity:0;transform:scale(.7)}
.ai-soon{transition:opacity .2s var(--ease),transform .2s var(--ease)}
/* Clear the mobile buy bar on product pages. */
@media (max-width:819px){.single-product .ai-fab{bottom:calc(88px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){.ai-note,.ai-note>*,.ai-btn .ai-art,.ai-btn .ai-spark{transition:none!important}}