/* GUTZY shared UI: tokens, buttons, steppers, overlays (drawer, nav, quick view, toast).
   Safe to load on the landing page: no global resets, no type classes. */
:root{
  --ink:#141210; --ink-2:#1e1418; --ink-3:#2a161b; --ink-soft:#5b514b; --muted:#6b5a5e;
  --cream:#fef7ec; --cream-2:#fff6ea; --cream-3:#f3ebdd; --line:#eee3d3; --white:#fff;
  --yolk:#fed917; --yolk-2:#f6d54a; --sage:#b7d072; --lime:#c8c64c; --lavender:#9b83c4;
  --cocoa:#5a3a2e; --cocoa-2:#8a6a5c; --cocoa-3:#b49c90;
  --coral:#e88079; --peach:#f3b276; --red:#c12e33; --red-bg:#fde7ea; --badge:#e0234e;
  --grad-band:linear-gradient(90deg,#e88079 0%,#f3b276 55%,#c8c64c 100%);
  --grad-lav:linear-gradient(141.12deg,#b994c2 7.14%,#9c7bb0 78.57%);
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --gutter:80px; --max:1280px; --r-card:24px; --r-lg:32px;
  --shadow-card:0 18px 40px -18px rgba(60,20,30,.28);
}
@media (max-width:1024px){:root{--gutter:40px}}
@media (max-width:640px){:root{--gutter:16px}}
.sr{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cap{font:400 12.5px/1.45 Lexend;color:var(--muted)}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ico.s16{width:16px;height:16px} .ico.s24{width:24px;height:24px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:999px;font:500 15px/1.2 Lexend;white-space:nowrap;transition:transform .25s var(--ease-spring),background .25s,color .25s,box-shadow .25s,opacity .2s;text-decoration:none}
.btn:active{transform:scale(.96)}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{background:var(--yolk);color:var(--ink)}
.btn-yolk{background:var(--yolk);color:var(--ink)}
.btn-yolk:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(60,20,30,.15)}
.btn-light{background:var(--cream-2);color:var(--ink-3)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(60,20,30,.15)}
.btn-line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(20,18,16,.16)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-full{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-dark[disabled]:hover{background:var(--ink);color:var(--cream)}
.btn .arr{width:24px;height:24px;border-radius:12px;background:var(--yolk-2);display:grid;place-items:center;transition:transform .35s var(--ease-spring);color:var(--ink)}
.btn:hover .arr{transform:translateX(4px) scale(1.1)}
.link{font:500 14px Lexend;text-decoration:underline;text-underline-offset:3px;padding:6px 2px;min-height:32px;display:inline-flex;align-items:center;gap:6px}
.link:hover{color:var(--cocoa)}
.iconbtn{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;flex:none;transition:background .2s,transform .25s var(--ease-spring)}
.iconbtn:hover{background:var(--cream-3)}

.seg{position:relative;display:inline-flex;gap:2px;padding:4px;background:#fff;border-radius:999px;filter:drop-shadow(0 6px 9px rgba(77,31,38,.12))}
.seg .ind{position:absolute;top:4px;bottom:4px;left:4px;border-radius:999px;background:linear-gradient(90deg,#bf99db,#9c7abd);transition:transform .45s var(--ease-spring),width .45s var(--ease-spring)}
.seg button{position:relative;min-height:40px;padding:10px 18px;border-radius:999px;font:500 13px/1.2 Lexend;color:var(--ink);transition:color .3s}
.seg button[aria-pressed="true"]{color:#fff}
.seg.sm button{min-height:34px;padding:7px 12px;font-size:12px}

/* Qty stepper */
.qty{display:inline-flex;align-items:center;background:#fff;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(20,18,15,.12);height:44px}
.qty button{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;transition:background .2s}
.qty button:hover:not([disabled]){background:var(--cream-3)}
.qty button[disabled]{opacity:.3;cursor:not-allowed}
.qty output{min-width:28px;text-align:center;font:600 14px Unbounded}
.qty.sm{height:38px}.qty.sm button{width:38px;height:38px}

/* Sample-data flag (prototype honesty) */
.sample{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:var(--cream-3);font:500 10.5px/1.6 Lexend;color:var(--cocoa);letter-spacing:.02em;vertical-align:middle;white-space:nowrap}

/* =========================================================
   Shared overlays (also loaded on the landing page) — gz- prefix
   ========================================================= */
.gz-scrim{position:fixed;inset:0;z-index:80;background:rgba(42,22,27,.28);opacity:0;pointer-events:none;transition:opacity .35s var(--ease-out)}
.gz-scrim.on{opacity:1;pointer-events:auto}

/* Mini-cart drawer */
.gz-drawer{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(440px,100vw);background:var(--cream);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .5s var(--ease-out);box-shadow:-24px 0 60px rgba(42,22,27,.18);font-family:Lexend,system-ui,sans-serif;color:var(--ink)}
.gz-drawer.on{transform:none}
.gz-dh{display:flex;align-items:center;gap:12px;padding:22px 20px 16px 24px}
.gz-dh h2{font:600 20px Unbounded;color:var(--ink-2)}
.gz-dh .c{font:400 14px Lexend;color:var(--muted)}
.gz-dh .iconbtn{margin-left:auto;background:#fff}
.gz-ship{margin:0 24px 8px;padding:14px 16px;border-radius:20px;background:#fff}
.gz-ship p{font:400 13px/1.4 Lexend}
.gz-bar{height:8px;border-radius:999px;background:var(--cream-3);overflow:hidden;margin-top:10px}
.gz-bar i{display:block;height:100%;border-radius:999px;background:var(--grad-band);transition:width .6s var(--ease-out)}
.gz-list{flex:1;overflow:auto;padding:8px 24px 16px;display:flex;flex-direction:column;gap:12px}
.gz-line{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:12px;border-radius:24px;background:#fff;position:relative}
.gz-thumb{width:76px;height:96px;border-radius:18px;display:flex;justify-content:center;align-items:center;overflow:hidden;padding:6px 0}
.gz-thumb img{height:100%;width:auto;max-width:none}
.gz-thumb.multi{display:flex;justify-content:center;align-items:flex-end;gap:0;padding:8px 2px}
.gz-thumb.multi img{height:72%;margin:0 -7px}
.gz-li-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.gz-li-name{font:500 15px/1.3 Lexend}
.gz-li-meta{font:400 12.5px/1.45 Lexend;color:var(--muted);margin-top:2px}
.gz-li-price{font:600 14px Unbounded;white-space:nowrap}
.gz-li-was{font:400 12px Lexend;color:var(--muted);text-decoration:line-through;text-align:right}
.gz-li-bot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px}
.gz-pill-sub{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:3px 10px;border-radius:999px;background:rgba(155,131,196,.18);font:500 11.5px Lexend;color:#5b3f86}
.gz-oos{display:inline-flex;margin-top:6px;padding:3px 10px;border-radius:999px;background:var(--red-bg);font:500 11.5px Lexend;color:var(--red)}
.gz-foot{padding:16px 24px 24px;background:#fff;border-radius:28px 28px 0 0;box-shadow:0 -10px 30px rgba(42,22,27,.06);display:flex;flex-direction:column;gap:12px}
.gz-sum{display:flex;justify-content:space-between;align-items:baseline;font:500 15px Lexend}
.gz-sum b{font:600 20px Unbounded}
.gz-foot .cap{margin-top:-6px}
.gz-btns{display:grid;grid-template-columns:1fr 1.3fr;gap:10px}
.gz-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:24px}
.gz-empty .cans{display:flex;align-items:flex-end;height:150px;margin-bottom:6px}
.gz-empty .cans img{height:100%;margin:0 -14px;filter:drop-shadow(0 8px 12px rgba(51,26,18,.16))}
.gz-empty .cans img:nth-child(1){transform:rotate(-10deg) translateY(6px);height:84%}
.gz-empty .cans img:nth-child(3){transform:rotate(10deg) translateY(6px);height:84%}
.gz-empty h3{font:600 20px Unbounded;color:var(--ink-2)}
.gz-empty p{font:300 15px/1.55 Lexend;color:var(--ink-soft);max-width:300px}

/* Nav overlay */
.gz-nav{position:fixed;inset:0;z-index:95;background:var(--cream);display:flex;flex-direction:column;clip-path:circle(0 at calc(100% - 60px) 60px);transition:clip-path .7s var(--ease-out);overflow:auto;font-family:Lexend,system-ui,sans-serif;color:var(--ink)}
.gz-nav.on{clip-path:circle(150% at calc(100% - 60px) 60px)}
.gz-nav::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(520px 420px at 0% 0%,rgba(236,127,142,.35),transparent 70%),
  radial-gradient(520px 420px at 100% 100%,rgba(195,192,74,.35),transparent 70%)}
.gz-nav-top{display:flex;justify-content:space-between;align-items:center;padding:28px var(--gutter)}
.gz-nav-top img{width:120px;height:auto;filter:brightness(0) saturate(100%) invert(9%) sepia(12%) saturate(1200%) hue-rotate(300deg)}
.gz-nav-top .iconbtn{width:52px;height:52px;background:var(--ink);color:var(--cream)}
.gz-nav-body{flex:1;display:grid;grid-template-columns:1.4fr 1fr;gap:48px;padding:24px var(--gutter) 48px;align-items:center}
.gz-nav ol{list-style:none;display:flex;flex-direction:column;gap:4px;counter-reset:n}
.gz-nav ol a{display:flex;align-items:baseline;gap:18px;padding:8px 0;font:500 clamp(34px,5.4vw,72px)/1.05 Lexend;letter-spacing:-.02em;text-decoration:none;color:var(--ink);transition:color .25s,transform .4s var(--ease-spring)}
.gz-nav ol a::before{counter-increment:n;content:"0" counter(n);font:500 13px Unbounded;color:var(--cocoa-2);transform:translateY(-1.4em)}
.gz-nav ol a:hover{color:var(--cocoa);transform:translateX(10px)}
.gz-nav ol a[aria-current="page"]{color:var(--cocoa-2)}
.gz-nav ol li{opacity:0;transform:translateY(24px);transition:opacity .5s,transform .7s var(--ease-out)}
.gz-nav.on ol li{opacity:1;transform:none}
.gz-nav.on ol li:nth-child(2){transition-delay:.05s}.gz-nav.on ol li:nth-child(3){transition-delay:.1s}.gz-nav.on ol li:nth-child(4){transition-delay:.15s}.gz-nav.on ol li:nth-child(5){transition-delay:.2s}.gz-nav.on ol li:nth-child(6){transition-delay:.25s}
.gz-nav-card{border-radius:28px;padding:28px;background:var(--grad-lav);color:#fff;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;min-height:320px}
.gz-nav-card h3{font:500 28px/1.15 Lexend;max-width:240px}
.gz-nav-card p{font:300 15px/1.5 Lexend;opacity:.9;max-width:260px}
.gz-nav-card .cans{position:absolute;right:-10px;bottom:-30px;height:230px;display:flex;align-items:flex-end}
.gz-nav-card .cans img{height:100%;margin-left:-40px;filter:drop-shadow(0 10px 16px rgba(51,26,18,.25))}
.gz-nav-card .cans img:first-child{transform:rotate(-8deg);height:88%}
.gz-nav-card .btn{align-self:flex-start;margin-top:auto;position:relative;z-index:1}
.gz-nav-foot{display:flex;gap:24px;flex-wrap:wrap;padding:0 var(--gutter) 32px;font:300 14px Lexend}
.gz-nav-foot a{text-decoration:none;opacity:.8}.gz-nav-foot a:hover{opacity:1;text-decoration:underline}
@media (max-width:860px){.gz-nav-body{grid-template-columns:1fr;align-items:start}.gz-nav-card{min-height:260px}}

/* Quick view (modal on desktop, bottom sheet on mobile) */
.gz-qv{position:fixed;z-index:90;left:50%;top:50%;width:min(920px,calc(100vw - 48px));max-height:calc(100vh - 48px);overflow:auto;transform:translate(-50%,-46%) scale(.96);opacity:0;pointer-events:none;background:var(--cream);border-radius:32px;display:grid;grid-template-columns:1fr 1.1fr;transition:transform .45s var(--ease-out),opacity .3s;box-shadow:0 40px 80px -20px rgba(42,22,27,.4);font-family:Lexend,system-ui,sans-serif;color:var(--ink)}
.gz-qv.on{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
.gz-qv-vis{position:relative;min-height:460px;display:grid;place-items:center;padding:32px;border-radius:32px 0 0 32px;overflow:hidden}
.gz-qv-vis img{height:400px;width:auto;filter:drop-shadow(0 18px 24px rgba(51,26,18,.25));transform:rotate(-4deg)}
.gz-qv-vis .price-oval{position:absolute;right:36px;top:36px}
.gz-qv-body{padding:36px 36px 32px;display:flex;flex-direction:column;gap:18px}
.gz-qv-body .x{position:absolute;right:16px;top:16px;background:#fff;z-index:2}
.gz-qv-body h2{font:500 34px/1.1 Lexend;letter-spacing:-.015em;padding-right:40px}
.gz-badges{display:flex;gap:8px;flex-wrap:wrap}
.gz-badges span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#fff;font:500 12.5px Lexend;box-shadow:inset 0 0 0 1px rgba(20,18,15,.08)}
.gz-detail{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.gz-detail dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font:400 14px/1.45 Lexend}
.gz-detail dt{color:var(--muted)}
.gz-mode{display:flex;flex-direction:column;gap:8px}
.gz-opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(20,18,15,.1);cursor:pointer;transition:box-shadow .2s}
.gz-opt:has(input:checked){box-shadow:inset 0 0 0 2px var(--ink)}
.gz-opt input{appearance:none;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(20,18,15,.35);display:grid;place-items:center;flex:none;margin:0}
.gz-opt input:checked{border-color:var(--ink);background:radial-gradient(circle,var(--ink) 0 5px,transparent 6px)}
.gz-opt .t{flex:1;font:500 14.5px Lexend}
.gz-opt .t small{display:block;font:300 12.5px Lexend;color:var(--muted)}
.gz-opt .p{font:600 14px Unbounded}
.gz-qv-cta{display:flex;gap:10px;align-items:center;margin-top:auto}
.gz-qv-cta .btn{flex:1}
@media (max-width:760px){
  .gz-qv{left:0;right:0;top:auto;bottom:0;width:100%;max-height:92vh;transform:translateY(105%);grid-template-columns:1fr;border-radius:28px 28px 0 0}
  .gz-qv.on{transform:none}
  .gz-qv-vis{min-height:260px;border-radius:28px 28px 0 0;padding:20px}
  .gz-qv-vis img{height:240px}
  .gz-qv-body{padding:22px 20px 24px}
  .gz-qv-body h2{font-size:26px}
}

/* Toast */
.gz-toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
.gz-toast{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 18px;border-radius:999px;background:var(--ink);color:var(--cream);font:400 14px/1.35 Lexend;box-shadow:0 14px 30px rgba(20,18,16,.3);animation:toastIn .45s var(--ease-spring)}
.gz-toast button{padding:8px 14px;border-radius:999px;background:var(--yolk);color:var(--ink);font:500 13px Lexend;min-height:36px}
.gz-toast.err{background:var(--red)}
@keyframes toastIn{from{transform:translateY(20px) scale(.9);opacity:0}}

/* Offline bar */
.gz-offline{position:fixed;top:0;left:0;right:0;z-index:110;display:none;align-items:center;justify-content:center;gap:10px;padding:10px 16px;background:var(--ink);color:var(--cream);font:400 13.5px/1.4 Lexend;text-align:center}
.gz-offline.on{display:flex}

/* Prototype states dock (outside the design) */
.gz-dock{position:fixed;right:16px;bottom:16px;z-index:70;font:500 13px Lexend}
.gz-dock>button{background:#141210;color:#fef7ec;padding:10px 16px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.25);min-height:40px}
.gz-dock-panel{position:absolute;right:0;bottom:52px;width:min(320px,calc(100vw - 32px));max-height:70vh;overflow:auto;background:#fffdf8;border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.22);padding:16px;display:none;flex-direction:column;gap:6px;color:#2a2420}
.gz-dock-panel.on{display:flex}
.gz-dock-panel h4{font:600 12px Lexend;text-transform:uppercase;letter-spacing:.06em;color:#8a6a5c;margin:8px 0 2px}
.gz-dock-panel button{text-align:left;padding:9px 12px;border-radius:12px;background:#f3ebdd;font:400 13px Lexend;min-height:36px}
.gz-dock-panel button:hover{background:#eee3d3}
.gz-dock-panel button[aria-pressed="true"]{background:#141210;color:#fef7ec}
.gz-dock-panel p{font:300 12px/1.45 Lexend;color:#6b5a5e}
@media (max-width:640px){.gz-dock{right:12px;bottom:12px}.gz-dock>button{padding:8px 12px;font-size:12px}}

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