/* ============================================================
   Cream & Co · Liquid Glass layer  (v2: transparent + refractive)
   Recipe (after 21st.dev liquid-glass-button):
     1. no fill: the control is a clear lens over whatever is behind it
     2. refraction: an SVG displacement filter as the backdrop-filter
        (feTurbulence -> feDisplacementMap -> blur), injected by glass.js
     3. bevel: light rim on the top-left, dark rim on the bottom-right,
        an inner haze, and a curved gloss cap on the upper half
     4. motion: spring lift on hover, squash on press, specular follows
        the pointer
   Loaded LAST on every page. Remove two tags to switch it off.
   ============================================================ */
:root{
  --lg-blur:14px;
  --lg-sat:1.6;
  --lg-spring:cubic-bezier(.34,1.56,.64,1);
  --lg-ease:cubic-bezier(.23,1,.32,1);
  --mx:50%;
  --my:30%;
  /* tints: kept very light so the page shows through */
  --lg-tint-clear:rgba(255,255,255,.10);
  --lg-tint-sage:rgba(110,124,84,.82);
  --lg-tint-ivory:rgba(252,250,244,.30);
  --lg-tint-ink:rgba(38,33,27,.34);
  /* bevel (light page) */
  --lg-bevel:
    inset 2.5px 2.5px 1px -2px rgba(255,255,255,.95),
    inset -2.5px -2.5px 1px -2px rgba(38,33,27,.28),
    inset 1px 1px 1px -.5px rgba(255,255,255,.7),
    inset -1px -1px 1px -.5px rgba(38,33,27,.18),
    inset 0 0 8px 6px rgba(255,255,255,.14),
    inset 0 0 2px 2px rgba(255,255,255,.10),
    0 0 12px rgba(255,255,255,.25),
    0 2px 6px rgba(38,33,27,.08),
    0 10px 26px -12px rgba(38,33,27,.28);
  --lg-bevel-hover:
    inset 2.5px 2.5px 1px -2px #fff,
    inset -2.5px -2.5px 1px -2px rgba(38,33,27,.32),
    inset 1px 1px 1px -.5px rgba(255,255,255,.85),
    inset -1px -1px 1px -.5px rgba(38,33,27,.2),
    inset 0 0 10px 6px rgba(255,255,255,.2),
    inset 0 0 2px 2px rgba(255,255,255,.12),
    0 0 16px rgba(255,255,255,.35),
    0 4px 10px rgba(38,33,27,.1),
    0 18px 40px -14px rgba(38,33,27,.34);
  /* bevel on dark or photographic backgrounds */
  --lg-bevel-dark:
    inset 2.5px 2.5px 1px -2px rgba(255,255,255,.85),
    inset -2.5px -2.5px 1px -2px rgba(255,255,255,.35),
    inset 1px 1px 1px -.5px rgba(255,255,255,.6),
    inset -1px -1px 1px -.5px rgba(255,255,255,.3),
    inset 0 0 8px 6px rgba(255,255,255,.12),
    0 0 14px rgba(255,255,255,.12),
    0 10px 28px -10px rgba(0,0,0,.45);
}

/* ---------- the lens (shared) ---------- */
.lg,
.btn,.bagbtn,.burger,.xbtn,.fchip,.vchip,.tbtn,.sortwrap select,.apill,.shp,.tiles .tile,.paytab,.pmv,.tier,.shipopt,.fopt,.wafab,
.bar .back,.shapebtn,.finbtn,.ptab,.subtab,.btn.ghost{
  position:relative;
  isolation:isolate;
  border:0;
  background:var(--lg-tint-clear);
  background-image:none;
  color:var(--ink);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow:var(--lg-bevel);
  transition:transform .55s var(--lg-spring),box-shadow .35s var(--lg-ease),background-color .35s var(--lg-ease),color .3s;
  will-change:transform;
}
/* refraction: Chromium honours SVG filters in backdrop-filter; Safari ignores this line and keeps the blur above */
html.lg-refract .btn,html.lg-refract .bagbtn,html.lg-refract .burger,html.lg-refract .xbtn,html.lg-refract .fchip,html.lg-refract .vchip,html.lg-refract .tbtn,html.lg-refract .apill,html.lg-refract .shp,html.lg-refract .tiles .tile,html.lg-refract .paytab,html.lg-refract .pmv,html.lg-refract .tier,html.lg-refract .shipopt,html.lg-refract .fopt,html.lg-refract .wafab,html.lg-refract .bar .back,html.lg-refract .shapebtn,html.lg-refract .finbtn,html.lg-refract .ptab,html.lg-refract .subtab{
  backdrop-filter:url(#lg-refract) saturate(var(--lg-sat));
}
.stickybar,.wafab{position:fixed}
.mclose{position:absolute}
.nav .nlink{position:relative}

/* ::before = specular light that follows the pointer (behind text) */
.lg::before,.btn::before,.bagbtn::before,.burger::before,.xbtn::before,.fchip::before,.vchip::before,.tbtn::before,.apill::before,.shp::before,.tiles .tile::before,.paytab::before,.pmv::before,.tier::before,.shipopt::before,.fopt::before,.wafab::before,
.bar .back::before,.shapebtn::before,.finbtn::before,.ptab::before,.subtab::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(110px 80px at var(--mx) var(--my),rgba(255,255,255,.55),rgba(255,255,255,0) 72%);
  opacity:.65;transition:opacity .4s var(--lg-ease);
}
/* ::after = curved gloss cap on the upper half (the "glossy" part) */
.lg::after,.btn::after,.bagbtn::after,.burger::after,.xbtn::after,.fchip::after,.vchip::after,.tbtn::after,.apill::after,.shp::after,.tiles .tile::after,.paytab::after,.pmv::after,.tier::after,.shipopt::after,.fopt::after,.wafab::after,
.bar .back::after,.shapebtn::after,.finbtn::after,.ptab::after,.subtab::after{
  content:"";position:absolute;left:6%;right:6%;top:2px;height:46%;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.28) 55%,rgba(255,255,255,0) 100%);
  transform:none !important;transition:opacity .35s var(--lg-ease);opacity:.9;display:block !important;animation:none !important;
}
.btn:hover::before,.fchip:hover::before,.vchip:hover::before,.tbtn:hover::before,.tier:hover::before,.bagbtn:hover::before,.burger:hover::before,.xbtn:hover::before,.wafab:hover::before,.tiles .tile:hover::before,.shp:hover::before,.shapebtn:hover::before,.finbtn:hover::before,.ptab:hover::before,.subtab:hover::before{opacity:1}

/* ---------- motion ---------- */
.btn:hover,.bagbtn:hover,.burger:hover,.xbtn:hover,.fchip:hover,.vchip:hover,.tbtn:hover,.tier:hover,.shapebtn:hover,.finbtn:hover,.ptab:hover,.subtab:hover,.wafab:hover,.tiles .tile:hover,.shp:hover,.paytab:hover,.pmv:hover,.fopt:hover,.shipopt:hover,.bar .back:hover{
  transform:translateY(-1px) scale(1.04);
  box-shadow:var(--lg-bevel-hover);
}
.btn:active,.bagbtn:active,.burger:active,.xbtn:active,.fchip:active,.vchip:active,.tbtn:active,.tier:active,.shapebtn:active,.finbtn:active,.ptab:active,.subtab:active,.wafab:active,.tiles .tile:active,.shp:active,.paytab:active,.pmv:active,.fopt:active,.shipopt:active,
.lg-press{transform:scale(.955) !important;transition-duration:.12s !important}
.btn:focus-visible,.fchip:focus-visible,.vchip:focus-visible,.tbtn:focus-visible,.tier:focus-visible,.bagbtn:focus-visible,.burger:focus-visible,.xbtn:focus-visible{outline:2px solid rgba(110,124,84,.7);outline-offset:3px}

/* ---------- tints ---------- */
/* primary: a sage-tinted lens. Text stays ivory with a soft shadow for legibility on the cream page */
.btn{background:var(--lg-tint-sage);color:var(--ivory);text-shadow:0 1px 2px rgba(38,33,27,.35)}
.btn:hover{background:rgba(110,124,84,.92)}
/* tinted lenses: a lighter gloss cap so the label stays readable */
.btn:not(.line):not(.ghost):not(.ink):not(.ivory)::after,.fchip.on::after,.vchip.on::after,.shp.on::after,.tiles .tile.on::after,.paytab.on::after,.finbtn.on::after,.ptab.on::after,.subtab.on::after{opacity:.55}
.btn:not(.line):not(.ghost):not(.ink):not(.ivory)::before,.fchip.on::before,.vchip.on::before,.shp.on::before,.tiles .tile.on::before,.paytab.on::before,.finbtn.on::before,.ptab.on::before,.subtab.on::before{background:radial-gradient(110px 80px at var(--mx) var(--my),rgba(255,255,255,.3),rgba(255,255,255,0) 72%)}
/* secondary / outline: clear lens, ink text */
.btn.line,.btn.ghost,.btn.ink{background:var(--lg-tint-clear);color:var(--ink);text-shadow:none}
.btn.line:hover,.btn.ghost:hover,.btn.ink:hover{background:rgba(255,255,255,.2);color:var(--ink)}
/* ivory: a milky lens for photography and the sage drench */
.btn.ivory{background:rgba(252,250,244,.78);color:var(--sage-ink);text-shadow:0 1px 0 rgba(255,255,255,.5)}
.btn.ivory:hover{background:rgba(252,250,244,.92)}
/* anything sitting on dark or photographic backgrounds: light bevel, light text */
.final .btn,.sfinal .btn,.epanel .btn,.ntier .btn,.wc-end .btn,footer .btn,.menu .btn,
.final .btn.line,.sfinal .btn.line{box-shadow:var(--lg-bevel-dark);color:var(--ivory);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.final .btn.line,.sfinal .btn.line{background:rgba(255,255,255,.08)}
.epanel .btn.ivory,.ntier .btn.ivory,.final .btn.ivory,.sfinal .btn.ivory,.wc-end .btn.ivory{background:rgba(252,250,244,.86);color:var(--sage-ink);text-shadow:0 1px 0 rgba(255,255,255,.55)}
.epanel .btn.ivory:hover,.ntier .btn.ivory:hover,.final .btn.ivory:hover,.sfinal .btn.ivory:hover{background:rgba(252,250,244,.96)}
.btn[disabled]{opacity:.42;transform:none !important;filter:grayscale(.3)}

/* ---------- navigation ---------- */
.nav.solid{background:rgba(252,250,244,.34);
  -webkit-backdrop-filter:blur(26px) saturate(1.9) brightness(1.03);backdrop-filter:blur(26px) saturate(1.9) brightness(1.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.4),0 1px 0 rgba(38,33,27,.05),0 14px 40px -26px rgba(38,33,27,.35)}
.nav.on-drench{background:rgba(38,33,27,.3);-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 40px -26px rgba(0,0,0,.5)}
/* nav links: a glass pill rises under the link; no underline */
.nlink{padding:9px 14px;border-radius:100px;transition:color .3s}
.nlink::after{display:none}
.nlink::before{content:"";position:absolute;inset:0;border-radius:100px;z-index:-1;background:rgba(255,255,255,.12);
  box-shadow:var(--lg-bevel);
  opacity:0;transform:scale(.8);transition:opacity .35s var(--lg-ease),transform .55s var(--lg-spring)}
.nlink:hover::before,.nlink.on::before{opacity:1;transform:scale(1)}
.nlink.on{color:var(--sage-ink)}
.nav.on-drench .nlink.on{color:var(--ivory)}
.nav.on-drench .nlink::before{box-shadow:var(--lg-bevel-dark)}
.nav .nleft{gap:clamp(4px,1vw,10px)}
.bagbtn,.burger{background:var(--lg-tint-clear)}
.nav .sicon{background:var(--lg-tint-clear);box-shadow:var(--lg-bevel);-webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat))}
.nav.on-drench .sicon{background:rgba(255,255,255,.08);box-shadow:var(--lg-bevel-dark);color:var(--ivory)}
.nav.on-drench .bagbtn,.nav.on-drench .burger{background:rgba(255,255,255,.08);box-shadow:var(--lg-bevel-dark)}
.bagbtn .count{background:rgba(110,124,84,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}

/* sticky mobile bar: one clear capsule holding two lenses */
.stickybar{background:rgba(252,250,244,.26);border:0;padding:6px;
  -webkit-backdrop-filter:blur(28px) saturate(1.9) brightness(1.03);backdrop-filter:blur(28px) saturate(1.9) brightness(1.03);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 1.5px 0 #fff,inset 0 -1px 0 rgba(38,33,27,.08),0 18px 44px -16px rgba(38,33,27,.45)}
.stickybar.show{transform:none}
.stickybar .btn{white-space:nowrap;padding:14px 10px;font-size:.62rem;letter-spacing:.16em}

/* WhatsApp fab: smoky lens */
.wafab{background:var(--lg-tint-ink);color:var(--ivory);text-shadow:0 1px 2px rgba(0,0,0,.35);box-shadow:var(--lg-bevel-dark)}
.wafab:hover{background:rgba(38,33,27,.46)}
.wafab::after{opacity:.45}

/* ---------- chips, tiles, tabs ---------- */
.tiles .tile,.paytab,.shipopt,.shapebtn{border-radius:16px}
.shp,.finbtn,.ptab,.subtab{border-radius:100px}
.fchip.on,.vchip.on,.pmv.on,.shp.on,.tiles .tile.on,.paytab.on,.fopt.on,.shipopt.on,.finbtn.on,.ptab.on,.subtab.on,.tier.on{
  background:var(--lg-tint-sage);color:var(--ivory);text-shadow:0 1px 1px rgba(38,33,27,.28)}
.tiles .tile.on b,.tiles .tile.on small,.paytab.on small,.shipopt.on .so-n,.shipopt.on .so-n span,.shipopt.on .so-p,.tier.on small,.tier.on b{color:var(--ivory) !important}
.shapebtn.on{background:rgba(255,255,255,.22);box-shadow:var(--lg-bevel),inset 0 0 0 1.5px rgba(110,124,84,.75)}
.sortwrap select{color:var(--ink)}
.apill{background:rgba(110,124,84,.16);color:var(--sage-ink)}
.xbtn{border-radius:50%}

/* studio panel tabs: pills with breathing room instead of touching */
.ptabs{gap:8px;padding:10px 12px 6px;border-bottom:0}
.ptab{padding:12px 6px;letter-spacing:.16em}
.ptab.on::after{display:none}
@media (max-width:700px){
  .bar{grid-template-columns:auto 1fr auto;gap:8px;padding:12px 12px}
  .bar .mark img{height:13px}
  .bar .back{padding:8px 11px}
  .bar .sub{display:none}
  .bar .acts{gap:6px}
  .bar .acts .btn{white-space:nowrap;padding:10px 11px;font-size:.56rem;letter-spacing:.1em}
  .ptab{font-size:.6rem;letter-spacing:.1em;padding:12px 4px}
}
/* studio top bar */
.bar{background:rgba(247,241,230,.42);border-bottom:0;
  -webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.6),0 1px 0 rgba(38,33,27,.05),0 14px 40px -26px rgba(38,33,27,.3)}
.bar .back{padding:9px 14px;border-radius:100px;width:max-content;justify-self:start}
.studio-page .btn,.fit-page .btn{border-radius:100px}

/* ---------- reduced motion / no backdrop support ---------- */
@media (prefers-reduced-motion:reduce){
  .btn,.bagbtn,.burger,.xbtn,.fchip,.vchip,.tbtn,.tier,.shapebtn,.finbtn,.ptab,.subtab,.wafab,.tiles .tile,.shp,.paytab,.pmv,.fopt,.shipopt,.nlink::before{transition:none}
  .btn:hover,.fchip:hover,.vchip:hover,.tbtn:hover,.tier:hover{transform:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--lg-tint-clear:rgba(252,250,244,.92);--lg-tint-sage:#6E7C54;--lg-tint-ivory:#FCFAF4;--lg-tint-ink:#26211B}
  .nav.solid{background:rgba(252,250,244,.96)}.stickybar{background:rgba(252,250,244,.96)}
}