/* aki.cw v18 */

:root{--navy:#0F2747;--lagoon:#00A98F;--coral:#FF6B4A;--sand:#F7F4EE;--mist:#E8F6F3;--ink:#17202A;--stone:#5A636E;--border:#DDE2E5;--flag:#F9E814;--sun:#FFD166;
 --r:12px;--nav:64px;--ease:cubic-bezier(.2,.7,.2,1);--t:200ms;--shadow:0 8px 24px rgba(15,39,71,.10)}
*{box-sizing:border-box;margin:0;padding:0}
body{color:var(--ink);background:#E9EDF1;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
button:focus-visible,input:focus-visible{outline:2px solid var(--lagoon);outline-offset:2px}
input{font:inherit}svg{display:block}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.shell{position:relative;width:100%;max-width:430px;height:100dvh;margin:0 auto;background:#fff;overflow:hidden}
/* (v18, CR-0017) the ≥640px phone-mockup frame was removed: tablets and laptops get real layouts, see the end of this file */
.screen{display:none;height:100%;overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(var(--nav) + 24px)}
.screen.active{display:block}
.pad{padding:0 16px}.sec{padding:22px 16px 0}
.wordmark{font-weight:800;letter-spacing:-.02em;line-height:1;display:inline-flex;align-items:baseline;gap:2px}
.wordmark .dot{width:.22em;height:.22em;border-radius:50%;background:var(--flag);margin:0 .04em}.wordmark .cw{font-weight:600;font-size:.74em}
.h1{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.15}.h2{font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.2}.h3{font-size:16px;font-weight:600}
.small{font-size:14px}.tiny{font-size:12px}.muted{color:var(--stone)}
.row{display:flex;align-items:center;gap:10px}.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:var(--r);font-weight:600;font-size:15px;transition:transform 100ms var(--ease)}
.btn:active{transform:scale(.98)}.btn-primary{background:var(--navy);color:#fff}.btn-secondary{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}.btn-soft{background:var(--mist);color:var(--navy)}.btn-block{width:100%}.btn-split{justify-content:space-between}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--border);background:#fff;font-size:14px;font-weight:500;white-space:nowrap}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 16px}.chips::-webkit-scrollbar{display:none}
.badge{display:inline-block;white-space:nowrap;font-size:11px;font-weight:700;padding:3px 7px;border-radius:6px;line-height:1.3}
.b-drop{background:var(--sun);color:var(--ink)}.b-pre{background:var(--navy);color:#fff}.b-hot{background:var(--coral);color:var(--ink)}.b-new{background:var(--mist);color:var(--navy)}.b-hur{background:var(--sand);color:var(--navy);border:1px solid var(--border)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--flag);flex:none;outline:1.5px solid rgba(15,39,71,.18)}
/* header */
.sky{background:var(--navy);color:#fff;padding:calc(14px + env(safe-area-inset-top)) 16px 18px;border-radius:0 0 24px 24px}
.sky .wordmark{color:#fff;font-size:34px}.sky .greet{font-size:14px;color:rgba(255,255,255,.72)}
.mode{display:inline-flex;background:rgba(255,255,255,.12);border-radius:999px;padding:3px}.mode button{height:30px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;color:rgba(255,255,255,.75)}.mode button.on{background:#fff;color:var(--navy)}
.search{display:flex;align-items:center;gap:10px;height:50px;padding:0 14px;background:#fff;border:1px solid var(--border);border-radius:var(--r)}.search input{flex:1;border:0;outline:0;background:transparent;font-size:16px;min-width:0}.search input::placeholder{color:var(--stone)}
/* delivery day strip — the memorable element */
.dday{margin:14px 0 0;background:#fff;color:var(--ink);border-radius:14px;padding:12px 14px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.dday .cal{width:46px;height:50px;border-radius:10px;background:var(--sand);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.dday .cal b{font-size:20px;font-weight:800}.dday .cal span{font-size:10px;font-weight:700;color:var(--stone);margin-top:3px}
.dday .tx b{display:block;font-size:14px}.dday .tx span{display:block;font-size:12.5px;color:var(--stone)}
.dday .zone{font-size:12px;font-weight:600;color:var(--navy);background:var(--mist);padding:6px 10px;border-radius:999px;white-space:nowrap}
.count{position:absolute;top:6px;right:6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--coral);color:var(--ink);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}.count[hidden]{display:none}
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;height:56px;padding:0 8px 0 4px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}.bar .title{flex:1;font-weight:700;font-size:17px}
.icon-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r);position:relative}
/* worlds grid */
.worlds{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.world{border-radius:14px;padding:14px 12px 12px;background:var(--sand);display:flex;flex-direction:column;gap:8px;min-height:118px;position:relative}
.world.alt{background:var(--mist)}.world svg{width:34px;height:34px}.world b{font-size:15px;line-height:1.2}.world span{font-size:12px;color:var(--stone);line-height:1.3}
.world .n{position:absolute;top:10px;right:12px;font-size:11px;font-weight:700;color:var(--stone)}
/* stepper */
.steps{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:12px 16px 4px}.steps::-webkit-scrollbar{display:none}
.step{flex:none;border-radius:10px;border:1px solid var(--border);padding:8px 10px;min-width:74px;background:#fff}
.step.on{border-color:var(--navy);background:var(--navy);color:#fff}.step small{display:block;font-size:10.5px;opacity:.7;margin-bottom:2px}.step b{font-size:13px;display:block;white-space:nowrap}
.step.gap{border-style:dashed}
/* cards */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.tile{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative;width:100%}.tile .badge{position:absolute;top:8px;left:8px}.tile svg,.tile .gph svg{width:56%;height:56%}.tile img{position:absolute;inset:0}.gph{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.card .body{padding:10px}.card .brand{font-size:12px;color:var(--stone);font-weight:500}.card .name{font-size:14px;font-weight:600;line-height:1.3;margin:2px 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%}
.card .foot{display:flex;align-items:center;justify-content:space-between;gap:8px}.price{font-weight:700;font-size:15px;white-space:nowrap}.price .alt{font-weight:500;font-size:12px;color:var(--stone);margin-left:4px}
.add{width:34px;height:34px;border-radius:10px;background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}.add.pre{background:var(--sun);color:var(--ink)}.add.done{background:var(--lagoon)}
.rail{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:0 16px 4px;margin:0 -16px}.rail::-webkit-scrollbar{display:none}.rail .card{flex:0 0 150px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;gap:10px}.link{color:var(--navy);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:2px}
.panel{border-radius:14px;padding:16px}.p-mist{background:var(--mist)}.p-sand{background:var(--sand)}.p-navy{background:var(--navy);color:#fff}.p-sun{background:var(--sun)}
.list{display:flex;flex-direction:column}.li{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--border);width:100%}.li:last-child{border-bottom:0}
.li .ic{width:40px;height:40px;border-radius:10px;background:var(--mist);display:flex;align-items:center;justify-content:center;flex:none;color:var(--navy)}.li .tx{flex:1;min-width:0}.li .tx b{display:block;font-weight:600;font-size:15px}.li .tx span{display:block;font-size:13px;color:var(--stone)}
.opt{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1.5px solid var(--border);border-radius:var(--r);width:100%;background:#fff}.opt.on{border-color:var(--navy);background:var(--mist)}
.opt .radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);flex:none;display:flex;align-items:center;justify-content:center}.opt.on .radio{border-color:var(--navy)}.opt.on .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--navy)}
.opt .tx{flex:1}.opt .tx b{display:block;font-size:15px}.opt .tx span{font-size:13px;color:var(--stone)}.opt .fee{font-weight:600;font-size:14px;white-space:nowrap}
.totals div{display:flex;justify-content:space-between;padding:6px 0;font-size:15px}.totals .total{font-weight:700;font-size:18px;border-top:1px solid var(--border);margin-top:6px;padding-top:12px}
.line{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}.line .thumb{width:64px;height:64px;border-radius:10px;background:var(--mist);display:flex;align-items:center;justify-content:center;flex:none}.line .thumb svg,.line .thumb .gph svg{width:60%;height:60%}.line .thumb img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:8px;height:36px}.qty button{width:36px;height:36px;font-size:18px;font-weight:600;text-align:center}.qty span{min-width:28px;text-align:center;font-weight:600}
.acc{border-top:1px solid var(--border)}.acc button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:15px 0;font-weight:600;font-size:15px}.acc .c{display:none;padding:0 0 16px;color:#3B4553;font-size:15px}.acc.open .c{display:block}
.sticky-cta{position:sticky;bottom:calc(var(--nav) + 8px);margin:16px;z-index:4}.sticky-cta .btn{box-shadow:var(--shadow)}
.gallery{aspect-ratio:1/1;background:var(--mist);display:flex;align-items:center;justify-content:center}.gallery svg,.gallery .gph svg{width:50%;height:50%}.gallery img{width:100%;height:100%;object-fit:cover}
.nav{position:absolute;left:0;right:0;bottom:0;height:calc(var(--nav) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(5,1fr);z-index:10}
.nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--stone);position:relative;height:var(--nav)}.nav button.on{color:var(--navy)}.nav button.on::after{content:"";position:absolute;bottom:6px;width:6px;height:6px;border-radius:50%;background:var(--flag)}.nav .count{top:8px;right:calc(50% - 22px)}
.scrim{position:absolute;inset:0;background:rgba(15,39,71,.45);opacity:0;pointer-events:none;transition:opacity var(--t);z-index:20}.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:20px 20px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform 260ms var(--ease);z-index:21;max-height:88%;overflow-y:auto;box-shadow:var(--shadow)}.sheet.on{transform:translateY(0)}
.grab{width:40px;height:4px;border-radius:2px;background:var(--border);margin:6px auto 14px}.sheet-x{position:absolute;top:10px;right:10px}
.toast{position:absolute;left:16px;right:16px;bottom:calc(var(--nav) + 16px);background:var(--ink);color:#fff;padding:12px 14px;border-radius:var(--r);font-size:14px;font-weight:500;display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(8px);transition:opacity var(--t),transform var(--t);z-index:30;pointer-events:none}.toast.on{opacity:1;transform:none}
.toast .tick{width:22px;height:22px;border-radius:50%;background:var(--lagoon);display:flex;align-items:center;justify-content:center;flex:none}
.ask-fab{position:absolute;right:16px;bottom:calc(var(--nav) + 16px);height:44px;padding:0 14px 0 10px;border-radius:999px;background:var(--navy);color:#fff;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow);z-index:9}.ask-fab .dot{width:8px;height:8px;border-radius:50%;background:var(--flag)}
.ask-out{background:var(--sand);border-radius:var(--r);padding:14px;font-size:15px;line-height:1.5;min-height:56px;white-space:pre-wrap}.ask-out.thinking{color:var(--stone)}
.ask-items{display:flex;flex-direction:column;gap:8px;margin-top:12px}.ask-item{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--border);border-radius:10px}.ask-item .thumb{width:40px;height:40px;border-radius:8px;background:var(--mist);display:flex;align-items:center;justify-content:center;flex:none}.ask-item .thumb svg,.ask-item .thumb .gph svg{width:60%;height:60%}.ask-item .thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px}.ask-item b{font-size:14px;display:block}.ask-item span{font-size:12px;color:var(--stone)}
.mark{display:inline-flex;align-items:baseline;gap:6px;font-weight:800;letter-spacing:.04em;font-size:14px;color:var(--navy)}.mark .by{font-weight:600;letter-spacing:0;font-size:12px;color:var(--stone)}.mark .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--flag);margin:0 1px}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:12px}.svc .panel{padding:14px;display:block}
.foot{padding:32px 16px 8px;color:var(--stone);font-size:13px;line-height:1.6}
.pay{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px;font-size:12px}.pay b{border:1px solid var(--border);border-radius:6px;padding:2px 8px;background:#fff;color:var(--navy);font-weight:700;letter-spacing:.02em}.foot .wordmark{color:var(--navy);font-size:22px;margin-bottom:6px}
.empty{padding:48px 16px;text-align:center}
.tl{display:flex;flex-direction:column}.tl .st{display:flex;gap:12px;align-items:flex-start;padding-bottom:16px;position:relative}.tl .st::before{content:"";position:absolute;left:9px;top:22px;bottom:0;width:2px;background:var(--border)}.tl .st:last-child::before{display:none}
.tl .k{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);background:#fff;flex:none;display:flex;align-items:center;justify-content:center}.tl .done .k{background:var(--lagoon);border-color:var(--lagoon);color:#fff}.tl .now .k{border-color:var(--lagoon)}.tl .now .k::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--lagoon)}
.tl b{display:block;font-weight:600;font-size:15px}.tl span{font-size:13px;color:var(--stone)}
.hero{background:var(--sand);border-radius:16px;padding:20px;position:relative;overflow:hidden}.hero p{margin:8px 0 16px;max-width:30ch;color:#3B4553;font-size:15px}
.steps-inline{display:grid;gap:8px;margin-top:6px}.steps-inline>div{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#3B4553}.steps-inline b{flex:0 0 22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;display:grid;place-items:center}
.dropbar{background:var(--sun);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px}.dropbar b{font-size:15px}.dropbar span{font-size:13px;color:#3B4553}
.pills{display:flex;gap:8px;flex-wrap:wrap}.pill{height:38px;padding:0 14px;border-radius:999px;border:1.5px solid var(--border);font-weight:600;font-size:14px}.pill.on{border-color:var(--navy);background:var(--navy);color:#fff}
.zonepick .opt{padding:11px 14px}
.lcpill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 8px;border-radius:999px;border:1.5px solid var(--border);font-size:12px;font-weight:700;letter-spacing:.02em;background:#fff;color:var(--navy)}
.lcpill svg{width:15px;height:15px}
.lcpill.dark{background:rgba(255,255,255,.12);border-color:transparent;color:#fff}

/* ===== v15 additions ===== */
:root{--stone:#5A636E}
[hidden]{display:none!important}
#main{height:100%}
.static{display:none}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:#fff;padding:8px 12px;border-radius:8px}
.skip:focus{left:8px}
a{color:inherit}
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
a.li{text-decoration:none}
.fake-search{display:flex;align-items:center;gap:8px;color:var(--stone);text-align:left}
.fake-search .ph{font-size:15px;color:#4B5563;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl{display:block;font-size:13px;font-weight:600;margin:6px 0 4px;color:var(--ink)}
.coform{display:flex;flex-direction:column;gap:6px}
.coform .btn{margin-top:10px}
select{font:inherit;border:0;background:transparent;width:100%;height:100%;color:inherit}
.launchbar{display:flex;align-items:center;gap:10px;background:var(--sun);color:var(--ink);border-radius:var(--r);padding:12px 14px;margin-bottom:12px;font-size:14px}
.how{margin:10px 0 14px 20px;font-size:14px;line-height:1.6}
.badge.b-hold{background:#FDE2E1;color:#7F1D1D}
.badge.b-health{background:#E7F5EC;color:#14532D;position:static;margin:4px 4px 0 0}
.hb{display:flex;flex-wrap:wrap}
.giftsave{margin-top:6px;color:#14532D;font-weight:600}
.gline{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--navy);text-decoration:none;margin:0 0 8px}
.gline svg{width:16px;height:16px;flex:none}
.footlinks{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 4px}
.footlinks a{display:inline-flex;align-items:center;gap:4px;text-decoration:underline;text-underline-offset:2px}
.footlinks svg{width:14px;height:14px}
.curnote{display:block;margin-top:10px;font-size:12px;opacity:.85}
.ver{margin-top:10px;font-size:11px;opacity:.7}
.consent{position:absolute;left:12px;right:12px;bottom:calc(var(--nav) + 12px);background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:var(--shadow);z-index:30}
.consent .row{justify-content:flex-end;margin-top:8px}
.btn[disabled],button[disabled]{opacity:.5;cursor:not-allowed}
.proof:empty{display:none}
/* standalone pages (guarantee, privacy, FAQ, pre-rendered product/world pages without JS) */
.page{max-width:720px;margin:0 auto;padding:24px 16px 48px;background:#fff;min-height:100vh;line-height:1.55}
.page h1{font-size:26px;line-height:1.2;margin:12px 0}
.page h2{font-size:19px;margin:24px 0 8px}
.page p,.page li{margin:8px 0;font-size:15.5px}
.page ul{padding-left:20px}
.page .crumbs{font-size:14px}
.page .crumbs a{text-decoration:underline}
.page .shield{display:inline-flex;align-items:center;gap:8px;background:var(--mist);color:var(--navy);border-radius:999px;padding:6px 12px;font-weight:700;font-size:14px}
.page section[lang]{border-top:1px solid var(--border);margin-top:28px;padding-top:8px}
.page .langnav{display:flex;gap:12px;flex-wrap:wrap;font-size:14px}
.page .langnav a{text-decoration:underline}
.page .price{font-size:20px;font-weight:700}
.page .muted{color:var(--stone)}
.page .plist{list-style:none;padding:0}
.page .plist li{padding:8px 0;border-bottom:1px solid var(--border)}
.sticky-cta .gline{background:#fff;border-radius:999px;padding:6px 12px;box-shadow:var(--shadow);width:max-content;max-width:100%}

/* v16 forms (CR-0011) */
.ta{display:block;width:100%;min-height:96px;padding:12px 14px;background:#fff;border:1px solid var(--border);border-radius:var(--r);font:inherit;font-size:16px;color:inherit;resize:vertical}
.ta:focus-visible{outline:2px solid var(--lagoon);outline-offset:2px}
.chk{display:flex;gap:10px;align-items:flex-start;margin:12px 0;font-size:14px;line-height:1.4;cursor:pointer}.chk input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--navy)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.footlinks .flink{display:inline-flex;align-items:center;gap:4px;text-decoration:underline;text-underline-offset:2px;text-align:left;font-size:inherit}
.opt[data-lfchip] .radio{border-radius:6px}.opt[data-lfchip].on .radio::after{border-radius:3px}
.sheet input[readonly]{text-overflow:ellipsis}

/* ===== v18 responsive layouts (CR-0017, 9 Oct 2026) =====
   Breakpoints are where the content stops working, not device names:
   < 600px   phone  — single column, bottom navigation, bottom sheets (unchanged from v17)
   600–1023  tablet — full-bleed page, bottom navigation kept for touch, content centred at 880px, 3–4 column grids,
                      product image and details side by side, sheets centred at 640px
   ≥ 1024    laptop — top navigation with brand, search, cart and account; bounded 1200px workspace;
                      side-by-side product page with its own buy box; two-column cart; centred dialogs
   Same DOM, same data and same cart state at every width: resizing only changes CSS, nothing re-renders. */
.nav .nav-desk,.buybox{display:none}
/* v18 fix: the product-card price row shares the class "foot" with the page footer and inherited its 32px/16px padding,
   which pushed the price inwards and the vote/notify button out of the card on phones */
.card .foot{padding:0;font-size:inherit;line-height:inherit;color:inherit;flex-wrap:wrap;row-gap:6px}
.card .foot .price{min-width:0;white-space:normal}
.pdp-top,.pdp-info,.cart-grid,.cart-main,.cart-side{min-width:0}
@media (min-width:600px){
 body{padding:0;background:#fff}
 .shell{max-width:none;height:100dvh;border:0;border-radius:0;box-shadow:none}
 .screen{padding-left:max(0px,calc((100% - 880px)/2));padding-right:max(0px,calc((100% - 880px)/2))}
 .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
 .worlds{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
 .rail .card{flex-basis:180px}
 .svc{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
 .pdp-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;padding:16px 16px 0}
 .pdp-top .gallery{border-radius:16px;overflow:hidden}
 .pdp-top .pdp-info .pad{padding-left:0;padding-right:0}
 .pdp-top .pdp-info .sec{padding-left:0;padding-right:0}
 .pdp-top .pdp-info>.pad:first-child{padding-top:0!important}
 .buybox{display:block;margin:6px 0 4px;max-width:440px}
 .buybox .btn{margin-top:8px}
 #s-pdp>.sticky-cta{display:none}
 .sheet{left:50%;right:auto;width:min(640px,100%);transform:translate(-50%,105%)}
 .sheet.on{transform:translate(-50%,0)}
 .toast{left:50%;right:auto;width:min(480px,calc(100% - 32px));transform:translate(-50%,8px)}
 .toast.on{transform:translate(-50%,0)}
 .consent{left:50%;right:auto;width:min(560px,calc(100% - 24px));transform:translateX(-50%)}
}
@media (min-width:1024px){
 :root{--top:68px}
 .nav{top:0;bottom:auto;height:var(--top);padding:0 max(24px,calc((100% - 1200px)/2));display:flex;align-items:center;gap:4px;border-top:0;border-bottom:1px solid var(--border);background:rgba(255,255,255,.97)}
 .nav button{flex-direction:row;height:44px;padding:0 14px;border-radius:10px;font-size:14px;gap:8px;color:var(--ink)}
 .nav button svg{width:20px;height:20px}
 .nav button:hover{background:var(--sand)}
 .nav button.on{background:var(--mist);color:var(--navy)}
 .nav button.on::after{display:none}
 .nav button[data-nav="home"]:not(.brand){display:none}
 .nav .nav-desk{display:flex}
 .nav .brand{padding:0 10px 0 4px;margin-right:8px}
 .nav .brand:hover,.nav .brand.on{background:none}
 .nav .brand .wordmark{font-size:28px;color:var(--navy)}
 .nav .nav-search{flex:1;max-width:520px;margin-right:auto;border:1px solid var(--border);background:#fff;color:var(--stone);font-weight:500;justify-content:flex-start;padding:0 14px;overflow:hidden}
 .nav .nav-search .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .nav .nav-search:hover{border-color:var(--navy);background:#fff}
 .nav .count{top:2px;right:2px}
 #main{position:absolute;top:var(--top);left:0;right:0;bottom:0;height:auto}
 .screen{padding-bottom:56px;padding-left:max(24px,calc((100% - 1200px)/2));padding-right:max(24px,calc((100% - 1200px)/2))}
 .bar{border-radius:0 0 12px 12px}
 .sky{border-radius:24px;margin:20px 16px 0;padding:28px 32px 30px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:20px;align-items:end}
 .sky>.between,.sky>.wordmark{grid-column:1/-1}
 .sky .wordmark{font-size:52px;margin-top:6px}
 .sky .dday{margin-top:14px}
 .hero{padding:32px 36px}.hero p{max-width:56ch}
 .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
 .worlds{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
 .world{min-height:132px;padding:18px 16px 16px}
 .rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));overflow:visible;margin:0;padding:0 0 4px}
 .rail .card{flex:none}
 .card .name{font-size:15px}
 .pdp-top{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;padding:28px 16px 0}
 .pdp-top .gallery{position:sticky;top:20px}
 .pdp-top .h1{font-size:28px!important}
 .cart-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(340px,1fr);gap:32px;align-items:start;padding-top:8px}
 .cart-side{position:sticky;top:72px;border:1px solid var(--border);border-radius:16px;padding:0 4px 20px;margin-top:16px}
 .sheet{top:50%;bottom:auto;width:min(600px,calc(100% - 48px));max-height:min(86vh,880px);border-radius:20px;padding:12px 24px 24px;opacity:0;visibility:hidden;transform:translate(-50%,-46%);transition:transform 220ms var(--ease),opacity 180ms var(--ease),visibility 0s linear 220ms}
 .sheet.on{opacity:1;visibility:visible;transform:translate(-50%,-50%);transition:transform 220ms var(--ease),opacity 180ms var(--ease),visibility 0s}
 .grab{display:none}
 .steps{flex-wrap:wrap;overflow:visible}
 .toast{bottom:24px}
 .consent{bottom:24px}
 .ask-fab{bottom:24px;right:max(24px,calc((100% - 1200px)/2))}
 .empty{padding:80px 16px}
 footer.foot{padding:48px 16px 16px}
}

/* ===================================================================================================
   v19 — v8 "AKI Photo storefront" design layer (approved design, 05-REFERENCE-SOURCE-v8.txt).
   Tokens first; every component below uses them, so the future app can inherit the same values
   (docs/SOURCE-MAP.md → design tokens). The page is now a normal scrolling document: brand-bar header,
   white navigation, content, blue footer — the same at every width; only the grid density changes.
   =================================================================================================== */
:root{
 --aki-brand:#0875b9;--aki-on-brand:#ffffff;--aki-sun:#f6d44b;--aki-sun-ink:#263348;--aki-sea:#f0f7ff;--aki-sea-ink:#12679f;
 --aki-ink:#26313f;--aki-muted:#566375;--aki-line:#e3e8ed;--aki-soft:#fafbfc;--aki-paper:#ffffff;--aki-radius:8px;--aki-photo:132px;
 --aki-font-body:Arial,Helvetica,sans-serif;--aki-font-display:var(--aki-font-body);--aki-font:var(--aki-font-body);--aki-gutter:24px;--aki-max:1280px;
 /* legacy tokens re-pointed at the v8 palette so every existing screen (cart, product, world, sheets) inherits it */
 --navy:var(--aki-brand);--lagoon:var(--aki-sea-ink);--flag:var(--aki-sun);--sun:var(--aki-sun);--mist:var(--aki-sea);--sand:#f5f8fb;
 --ink:var(--aki-ink);--stone:var(--aki-muted);--border:var(--aki-line);--coral:var(--aki-sun);--nav:0px
}
body{font-family:var(--aki-font);font-size:15px;line-height:1.45;color:var(--aki-ink);background:var(--aki-paper)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--aki-sea-ink);outline-offset:3px}
/* document flow instead of the v18 fixed app frame */
.shell,.shell{max-width:none;height:auto;min-height:100vh;overflow:visible;display:flex;flex-direction:column;background:var(--aki-paper)}
#main{height:auto;position:static;flex:1}
.screen{height:auto;overflow:visible;padding-bottom:40px}
.scrim{position:fixed}.sheet{position:fixed}.toast{position:fixed;bottom:16px}.consent{position:fixed;bottom:12px}.ask-fab{position:fixed;bottom:16px}
.sticky-cta{bottom:8px}
.bar{position:static;background:var(--aki-paper);backdrop-filter:none}
#s-home,#s-vote,#s-suggest,#s-partners,#s-partner,#s-makers,#s-experiences,#s-partner-enquiry,#s-experience-enquiry,#s-help{padding-left:0!important;padding-right:0!important}
.v8-container{max-width:var(--aki-max);margin:0 auto;padding-left:var(--aki-gutter);padding-right:var(--aki-gutter)}
.v8-main{padding-top:24px;padding-bottom:32px}
.v8-narrow{max-width:760px}

/* ---------- header ---------- */
.v8-brandbar{background:var(--aki-brand);color:var(--aki-on-brand)}
.v8-top{display:flex;gap:24px;align-items:center;padding-top:16px;padding-bottom:16px}
.v8-logo{border:0;background:none;padding:0;font-weight:800;font-size:31px;letter-spacing:-1.4px;white-space:nowrap;color:#fff;line-height:1;min-height:44px;display:inline-flex;align-items:center}
.v8-dot{color:var(--aki-sun)}.v8-cw{font-size:.7em;letter-spacing:-.7px}
.v8-search{flex:1;display:flex;min-width:0;background:#fff;border-radius:7px;overflow:hidden;align-items:stretch}
.v8-search input{border:0;background:transparent;color:var(--aki-ink);padding:12px 14px;min-width:0;width:100%;font-size:16px;outline-offset:-3px}
.v8-search input::placeholder{color:#677486}
.v8-search button{border:0;background:var(--aki-sun);color:var(--aki-sun-ink);padding:0 16px;font-weight:500;text-align:center}
.v8-brandbar button:focus-visible{outline-color:var(--aki-sun)}
.v8-brandbar .v8-search input:focus-visible{outline-color:var(--aki-sea-ink)}
.v8-actions{display:flex;gap:16px;font-size:13px;align-items:center}
.v8-quiet{border:0;background:transparent;color:#fff;min-height:44px;min-width:44px;padding:8px 3px;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:4px;position:relative}
.v8-quiet:hover{text-decoration:underline}
.v8-cartbtn svg{width:20px;height:20px}
.v8-count{position:absolute;top:2px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--aki-sun);color:var(--aki-sun-ink);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.v8-cartlbl{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.v8-navwrap{background:#fff;border-bottom:1px solid var(--aki-line)}
.v8-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px}
.v8-navlinks{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.v8-nav button{border:0;background:transparent;border-radius:7px;padding:8px 13px;font-weight:500;min-height:44px;color:var(--aki-ink);transition:background-color 140ms ease,color 140ms ease}
.v8-nav button:hover{background:var(--aki-soft)}
/* Tabs (Fayez 16 Oct): every tab reads as tappable (outlined pill); the selected one is filled. Suggest stays the one yellow CTA. */
/* Two tabs (Fayez 16 Oct): Vote = brand blue, Suggest = sun yellow; same shape, both filled, the page you are on gets a ring */
.v8-nav button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-weight:500}
.v8-nav .v8-votebtn,.v8-nav .v8-votebtn:hover{background:var(--aki-brand);color:var(--aki-on-brand)}
.v8-nav .v8-votebtn:hover{filter:brightness(1.08)}
.v8-nav .v8-votebtn[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--aki-on-brand),0 0 0 2px var(--aki-brand)}
.v8-nav .v8-tabic{width:16px;height:16px;flex:none}
.v8-nav .v8-suggestbtn,.v8-nav .v8-suggestbtn:hover{background:var(--aki-sun);color:var(--aki-sun-ink)}
.v8-nav .v8-suggestbtn:hover{filter:brightness(1.04)}
.v8-nav .v8-suggestbtn[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--aki-sun-ink)}
.v8-local{font-size:12px;color:var(--aki-muted);white-space:nowrap}
.v8-launch{background:#fff;color:var(--aki-muted);font-size:13px;padding:9px 24px;text-align:center;border-bottom:1px solid #eef1f4}
.v8-launch strong{color:var(--aki-ink);font-weight:600}

/* ---------- type & buttons ---------- */
.v8-main h1,.v8-pagehead h1{font-size:32px;line-height:1.15;letter-spacing:-1px;font-weight:600}
.v8-main h2{font-size:22px;line-height:1.25;letter-spacing:-.4px;font-weight:600}
.v8-main h3,.v8-h3{font-size:16px;line-height:1.3;font-weight:600}
.v8-eyebrow{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--aki-sea-ink);margin-bottom:8px}
.v8-btnrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}
.v8-btn{display:inline-flex;justify-content:center;align-items:center;gap:7px;border:1px solid var(--aki-line);background:var(--aki-paper);color:var(--aki-ink);border-radius:6px;padding:10px 14px;font-weight:500;min-height:44px;text-decoration:none;transition:background-color 140ms ease,color 140ms ease;text-align:center}
.v8-btn:hover{border-color:var(--aki-sea-ink)}
.v8-btn.v8-primary{border-color:var(--aki-brand);background:var(--aki-brand);color:#fff}
.v8-btn.v8-primary:hover{background:#0767a3}
.v8-btn.v8-yellow{border-color:var(--aki-sun);background:var(--aki-sun);color:var(--aki-sun-ink)}
.v8-btn.v8-link{border:0;background:none;padding-left:0;padding-right:0;color:var(--aki-sea-ink)}
.v8-btn.v8-link:hover{text-decoration:underline}
.v8-btn[disabled]{opacity:.6}
.v8-sechead{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:15px;flex-wrap:wrap}
.v8-sechead p,.v8-pagehead p{font-size:14px;color:var(--aki-muted);margin-top:8px;max-width:620px}
.v8-pagehead{margin-bottom:24px}
.v8-sec{margin-top:32px}
.v8-crumb{display:flex;gap:6px;font-size:13px;color:var(--aki-muted);align-items:center;margin-bottom:20px;flex-wrap:wrap}
.v8-crumb button{border:0;background:none;color:var(--aki-sea-ink);padding:3px 0;min-height:44px}
.v8-crumb button:hover{text-decoration:underline}

/* ---------- photos ---------- */
.v8-photo{display:block;width:100%;object-fit:cover;background:var(--aki-sea);border-radius:6px}
.v8-photo-empty{aspect-ratio:1}
.v8-iconph{display:flex;align-items:center;justify-content:center;background:var(--aki-sea)}
.v8-iconph svg{width:56px;height:56px}

/* ---------- home ---------- */
.v8-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;margin-bottom:32px}
.v8-herocopy{padding:20px 0}
.v8-hero h1{max-width:530px}
.v8-hero .v8-l1{display:block}
.v8-hero p{color:var(--aki-muted);margin-top:10px;max-width:450px}
.v8-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:center}
.v8-gallery .v8-photo{aspect-ratio:1;height:auto}
.v8-catgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:18px;row-gap:22px}
.v8-cat{padding:0;text-align:left;background:#fff;border:0;display:flex;flex-direction:column;min-width:0;color:var(--aki-ink)}
.v8-cat .v8-photo{height:var(--aki-photo)}
.v8-catlabel{padding:12px 0 0;display:flex;align-items:center;justify-content:flex-start;gap:5px;font-size:15px;font-weight:500;flex:1;min-height:44px}
.v8-catlabel span:first-child{overflow-wrap:anywhere}
.v8-cat:hover .v8-catlabel{color:var(--aki-sea-ink)}
.v8-arrow{color:var(--aki-sea-ink);font-weight:400}
.v8-count-sm{font-size:12px;color:var(--aki-muted);white-space:nowrap}
.v8-rail{margin:0}
.v8-insp{margin-top:34px;padding-top:24px;border-top:1px solid var(--aki-line)}
.v8-insphead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:16px}
.v8-motionctl{display:flex;align-items:center;gap:9px;flex-shrink:0}
.v8-motionctl button{width:44px;height:44px;padding:0;border:1px solid var(--aki-line);border-radius:50%;background:#fff;color:var(--aki-sea-ink);font-size:20px;text-align:center}
.v8-motionctl button[aria-disabled="true"]{opacity:.35}
.v8-mpos{font-size:12px;color:var(--aki-muted);min-width:38px;text-align:center}
.v8-mwindow{overflow:hidden;touch-action:pan-y}
.v8-mtrack{display:flex;gap:16px;transition:transform 400ms cubic-bezier(.2,.7,.2,1)}
.v8-mitem{min-width:0;flex:0 0 calc((100% - 32px)/3);border:0;padding:0;background:#fff;text-align:left;color:var(--aki-ink)}
.v8-mitem .v8-photo{height:150px}
.v8-mitem h3{margin:12px 0 4px;font-size:17px}
.v8-mitem p{font-size:13px;color:var(--aki-muted)}
.v8-mitem span{display:inline-block;margin-top:8px;font-size:13px;color:var(--aki-sea-ink)}
.v8-invite{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:28px;padding:24px;border-radius:8px;background:var(--aki-sea)}
.v8-invite h2,.v8-community h2{font-size:19px}
.v8-invite p{font-size:14px;color:var(--aki-muted);max-width:570px;margin-top:6px}
.v8-invite .v8-btnrow,.v8-community .v8-btnrow{margin:0;flex-shrink:0}
.v8-community{margin-top:30px;padding:22px 0;border-top:1px solid var(--aki-line);display:flex;align-items:center;justify-content:space-between;gap:20px}
.v8-community p{color:var(--aki-muted);font-size:13px;margin-top:5px}
.sec .v8-community{margin-top:8px}
.v8-trust{margin-top:24px}

/* ---------- product-style cards (vote ideas, partners, experiences) ---------- */
.v8-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.v8-product{border:1px solid var(--aki-line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;min-width:0;background:#fff}
.v8-product>.v8-photo,.v8-pimg{height:150px;border-radius:0;width:100%}
.v8-pimg{display:flex;align-items:center;justify-content:center;background:var(--aki-sea);border:0;padding:0;position:relative;overflow:hidden}
.v8-pimg img{width:100%;height:100%;object-fit:cover}.v8-pimg svg,.v8-pimg .gph svg{width:46%;height:46%}
.v8-pcopy{padding:14px;display:flex;flex-direction:column;align-items:flex-start;gap:9px;flex:1}
.v8-pcopy p{font-size:12px;color:var(--aki-muted)}
.v8-pcopy>.v8-btn{margin-top:auto;width:100%}
.v8-tag{font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--aki-sea-ink);font-weight:700}
.v8-ptitle{padding:0;border:0;background:transparent;font:inherit;font-weight:600;text-align:left;color:var(--aki-ink);min-height:44px}
.v8-ptitle:hover{text-decoration:underline}
.v8-votebtn[aria-pressed="true"]{background:var(--aki-sea);border-color:var(--aki-sea-ink);color:var(--aki-sea-ink)}
.v8-plink{border:0;background:none;padding:0;color:var(--aki-sea-ink);text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;font:inherit}
.v8-plink.v8-inline{min-height:0;padding:12px 0}
.v8-status{font-size:13px;margin-top:15px;color:var(--aki-sea-ink);min-height:20px}
.v8-empty{color:var(--aki-muted)}
.v8-emptybox{padding:24px;background:var(--aki-soft);border:1px solid var(--aki-line);border-radius:8px;max-width:720px}
.v8-emptybox p{color:var(--aki-muted);margin:8px 0 16px}
.v8-note{font-size:13px;padding:12px 0;border-top:1px solid var(--aki-line);margin-top:24px;color:var(--aki-muted)}

/* ---------- voting ---------- */
.v8-votelayout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:25px}
.v8-sidebar{align-self:start;border:1px solid var(--aki-line);border-radius:8px;padding:10px;background:#fff}
.v8-sidebar h2{font-size:16px;padding:8px 9px 12px}
.v8-sidebar button{display:flex;justify-content:space-between;gap:8px;text-align:left;align-items:center;width:100%;border:0;border-radius:6px;padding:10px;background:transparent;font-size:13px;min-height:44px;color:var(--aki-ink)}
.v8-sidebar button span{color:var(--aki-muted);font-size:12px}
.v8-sidebar button[aria-pressed="true"]{background:var(--aki-sea);color:var(--aki-sea-ink);font-weight:700}
.v8-results{min-width:0}
.v8-mobilecat{display:none}

/* ---------- forms ---------- */
.v8-form{max-width:620px;padding:24px;border:1px solid var(--aki-line);border-radius:8px;background:#fff;position:relative}
.v8-form label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.v8-form label small,.v8-help{font-weight:400;color:var(--aki-muted);font-size:12px}
.v8-help{display:block;margin-top:4px}
.v8-field{margin:0 0 18px}
.v8-form input,.v8-form textarea,.v8-form select{width:100%;font-size:16px;min-width:0;border:1px solid #c9d2db;border-radius:7px;padding:11px;background:#fff;color:var(--aki-ink);height:auto;font-family:inherit}
.v8-form textarea{min-height:85px;resize:vertical}
.v8-form [aria-invalid="true"]{border-color:#b42318;box-shadow:0 0 0 1px #b42318}
.v8-ferr{display:block;color:#b42318;font-size:13px;margin-top:4px}
.v8-ferr:empty{display:none}
.v8-result{margin-top:14px}
.v8-result:empty{display:none}
.v8-ok{padding:12px 14px;border-radius:7px;background:#e7f5ec;color:#14532d}
.v8-ref{font-family:ui-monospace,monospace;font-size:13px}
.v8-warn{padding:14px;border-radius:7px;background:#fff8db;color:var(--aki-sun-ink);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.v8-copytext{width:100%;font:13px/1.4 ui-monospace,monospace;border:1px solid var(--aki-line);border-radius:6px;padding:8px;background:#fff;color:var(--aki-ink)}
.v8-fine{font-size:12px;color:var(--aki-muted);margin-top:12px}

/* ---------- partners ---------- */
.v8-profile{display:grid;grid-template-columns:240px minmax(0,1fr);gap:30px;align-items:start;margin-bottom:30px}
.v8-profile>.v8-photo{height:240px;border-radius:8px}
.v8-story{max-width:620px}
.v8-story h1{margin:0 0 14px}
.v8-story p{margin:12px 0;color:var(--aki-muted)}
.v8-roles{margin:8px 0 0 20px;color:var(--aki-ink);font-size:14px}
.v8-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
/* Partners (16 Oct): cover photo + monogram logo cards, A–Z, category chips from 6 partners; rich profile */
.v8-pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.v8-pcard{min-width:0}
.v8-pcardbtn{display:flex;flex-direction:column;width:100%;height:100%;text-align:left;border:1px solid var(--aki-line);border-radius:10px;overflow:hidden;background:#fff;padding:0;color:var(--aki-ink);transition:box-shadow 140ms ease,border-color 140ms ease}
.v8-pcardbtn:hover{border-color:#cfd6de;box-shadow:0 6px 18px rgba(20,40,60,.08)}
.v8-pcover{position:relative;display:block}
.v8-pcover>.v8-photo{display:block;width:100%;height:160px;border-radius:0;object-fit:cover}
.v8-plogo{position:absolute;left:14px;bottom:-22px;width:48px;height:48px;border-radius:50%;background:var(--mono,#12679f);color:#fff;font-weight:700;font-size:17px;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.v8-plogo-lg{position:static;width:76px;height:76px;font-size:26px;flex:none}
.v8-pcbody{display:flex;flex-direction:column;gap:6px;padding:30px 14px 14px;flex:1}
.v8-pcname{font-size:18px;font-weight:700;line-height:1.25}
.v8-pcloc{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--aki-muted);margin:0}
.v8-pin{width:15px;height:15px;flex:none}
.v8-pcintro{font-size:13px;color:var(--aki-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v8-pcgo{margin-top:auto;padding-top:6px;font-weight:600;color:var(--aki-sea-ink);font-size:14px}
.v8-demo{background:#fff8dc;border:1px solid #f0dc8c;color:#5c4a00;border-radius:8px;padding:9px 12px;font-size:13px;margin:0 0 16px}
.v8-phero{border-radius:12px;overflow:hidden;border:1px solid var(--aki-line);margin-bottom:22px;background:#fff}
.v8-phcover>.v8-photo{display:block;width:100%;height:240px;border-radius:0;object-fit:cover}
.v8-phid{display:flex;gap:16px;align-items:flex-start;padding:0 22px 18px}
.v8-phid>div{padding-top:12px;min-width:0}
.v8-phid .v8-plogo-lg{border:4px solid #fff;margin-top:-34px}
.v8-phid h1{margin:2px 0 4px}
.v8-pbody{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.v8-plead{font-size:18px;color:var(--aki-ink)!important;line-height:1.5}
.v8-pfacts{border:1px solid var(--aki-line);border-radius:10px;padding:16px 18px;background:var(--aki-soft)}
.v8-pfacts .v8-h3{margin:0 0 8px;font-size:15px}
.v8-pfacts .v8-h3+*{margin-bottom:14px}
.v8-pwhat{margin:0;padding-left:18px;color:var(--aki-ink);font-size:14px;line-height:1.7}
.v8-filters button{border:1px solid var(--aki-line);border-radius:6px;min-height:44px;padding:9px 13px;background:#fff;color:var(--aki-ink)}
.v8-filters button[aria-pressed="true"]{background:var(--aki-sea);color:var(--aki-sea-ink);border-color:var(--aki-sea-ink)}

/* ---------- product page: seller / who does what ---------- */
.v8-who{margin:0 0 6px}
.v8-soldby{font-size:14px;color:var(--aki-muted);margin:0}
.v8-whodetails{font-size:13px;color:var(--aki-muted);margin-top:2px}
.v8-whodetails summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--aki-sea-ink)}
.v8-whodetails dl{display:grid;gap:6px;padding:4px 0 8px}
.v8-whodetails dl div{display:grid;grid-template-columns:110px 1fr;gap:10px}
.v8-whodetails dt{font-weight:600;color:var(--aki-ink)}
.v8-whodetails dd .v8-plink.v8-inline{padding:0}

/* ---------- help ---------- */
.v8-mode{background:var(--aki-sea);margin-top:10px}
.v8-mode button{color:var(--aki-sea-ink);height:44px;padding:0 16px}
.v8-mode button.on{background:var(--aki-brand);color:#fff}

/* ---------- footer ---------- */
.v8-footer{background:var(--aki-brand);color:#fff;margin-top:auto}
.v8-footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:36px;padding:32px 0 25px}
.v8-footer .v8-logo{font-size:30px}
.v8-footer h2{font-size:15px;font-weight:600;margin-bottom:10px}
.v8-footer p{font-size:13px;line-height:1.5;margin-top:7px;max-width:250px}
.v8-footlinks,.v8-social{display:flex;flex-direction:column;align-items:flex-start}
.v8-footlinks button,.v8-footlinks a,.v8-social a,.v8-social button{display:flex;align-items:center;min-height:44px;border:0;border-radius:4px;background:transparent;color:#fff;font-size:13px;padding:7px 0;text-align:left;text-decoration:none}
.v8-footlinks button:hover,.v8-footlinks a:hover,.v8-social a:hover,.v8-social button:hover{text-decoration:underline}
.v8-social span{margin-left:8px;font-size:12px}
.v8-footnote{font-size:12px!important;line-height:1.4!important}
.v8-socialstatus{min-height:18px;font-size:12px;margin-top:6px;max-width:250px}
.v8-footbottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.25);padding:17px 0 10px;font-size:12px}
.v8-footmeta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:0 0 22px;font-size:12px;color:#fff}
.v8-footer button:focus-visible,.v8-footer a:focus-visible{outline:3px solid var(--aki-sun);outline-offset:3px}

/* ---------- legacy screens in the v8 palette ---------- */
.btn{border-radius:6px;font-weight:500;min-height:44px}
.btn-primary{background:var(--aki-brand)}
.btn-secondary{border:1px solid var(--aki-brand);color:var(--aki-brand)}
.card{border-radius:8px}
.add{background:var(--aki-brand)}
.add.pre{background:var(--aki-sun);color:var(--aki-sun-ink)}
.panel{border-radius:8px}
.p-navy{background:var(--aki-brand)}
.badge.b-drop{background:var(--aki-sun);color:var(--aki-sun-ink)}
.badge.b-hot{background:var(--aki-sun);color:var(--aki-sun-ink)}
.chip.on,.pill.on,.step.on{background:var(--aki-brand);border-color:var(--aki-brand)}
.h1{font-weight:600;letter-spacing:-.5px}.h2{font-weight:600}
.world{border-radius:8px;background:var(--sand)}
.world.alt{background:var(--aki-sea)}
.bar .title{font-weight:600}
.foot{display:none}
.mode{background:rgba(8,117,185,.08)}
.mode button{color:var(--aki-sea-ink)}
.mode button.on{background:var(--aki-brand);color:#fff}

/* ---------- motion: restrained, opacity/transform only (never layout), and none at all when the visitor asks for less ----------
   Starting states (.v8-pre) are added by script only after the page is built, so without script everything is simply visible. */
@keyframes v8-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.v8-enter .v8-herocopy{animation:v8-rise 320ms ease-out var(--v8-skip,0ms) both}
.v8-enter .v8-gallery{animation:v8-rise 320ms ease-out calc(60ms + var(--v8-skip,0ms)) both}
.v8-pre{opacity:0;transform:translateY(12px)}
.v8-pre.v8-in{opacity:1;transform:none;transition:opacity 300ms ease-out var(--v8-d,0ms),transform 300ms ease-out var(--v8-d,0ms)}
.v8-pw{display:block;overflow:hidden;border-radius:6px}
.v8-mitem span.v8-pw{display:block;margin:0;font-size:inherit;color:inherit}
.v8-pw .v8-photo{transition:transform 400ms cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){.v8-cat:hover .v8-photo,.v8-mitem:hover .v8-photo,.v8-gallery .v8-pw:hover .v8-photo{transform:scale(1.05)}}
.v8-cat:active .v8-photo,.v8-mitem:active .v8-photo{transform:scale(1.03);transition-duration:120ms}
.v8-btn,.v8-motionctl button{transition:transform 120ms ease-out,background-color 150ms,border-color 150ms,color 150ms}
.v8-btn:active,.v8-motionctl button:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){
 .v8-mtrack,.v8-pw .v8-photo,.v8-btn,.v8-motionctl button,.v8-nav button{transition:none!important}
 .v8-enter .v8-herocopy,.v8-enter .v8-gallery{animation:none!important}
 .v8-pre,.v8-pre.v8-in{opacity:1;transform:none;transition:none}
 .v8-cat:hover .v8-photo,.v8-mitem:hover .v8-photo,.v8-cat:active .v8-photo,.v8-mitem:active .v8-photo,.v8-gallery .v8-pw:hover .v8-photo,.v8-btn:active,.v8-motionctl button:active{transform:none}
}

/* ---------- responsive: same content and actions, density only ---------- */
@media (min-width:1200px){.v8-catgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:1023px){
 .nav{display:none}
 #main{position:static}
}
@media (min-width:1024px){
 #main{position:static;top:auto;height:auto}
 .screen{padding-top:0}
}
@media (max-width:850px){
 .v8-catgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .v8-footgrid{grid-template-columns:1fr 1fr;gap:24px}
 .v8-actions{gap:10px}
 .v8-invite{align-items:flex-start;flex-direction:column}
 .v8-products{grid-template-columns:repeat(2,minmax(0,1fr))}
 .v8-pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .v8-pbody{grid-template-columns:1fr}
 .v8-hero{grid-template-columns:1fr;gap:20px}
 .v8-votelayout{grid-template-columns:1fr}
 .v8-sidebar{display:none}
 .v8-mobilecat{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}
 .v8-mobilecat select{border:1px solid #c9d2db;border-radius:7px;padding:11px;font-size:16px;min-height:44px;background:#fff;width:100%;height:auto}
}
@media (max-width:600px){
 :root{--aki-gutter:16px;--aki-photo:auto}
 .v8-top{flex-wrap:wrap;padding-top:8px;padding-bottom:12px;gap:7px}
 .v8-top>.v8-logo{font-size:25px;margin-right:auto}
 .v8-search{order:3;flex-basis:100%}
 .v8-actions{gap:8px;font-size:12px}
 .v8-nav{padding-top:7px;padding-bottom:7px}
 .v8-nav button{padding-left:9px;padding-right:9px;font-size:13px}
 .v8-local{display:none}
 .v8-launch{padding:9px 16px;font-size:12px}
 .v8-main h1,.v8-pagehead h1{font-size:26px}
 .v8-catgrid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:16px}
 .v8-cat .v8-photo{height:auto;aspect-ratio:1}
 .v8-gallery{display:none}
 .v8-hero{margin-bottom:24px}
 .v8-herocopy{padding:4px 0}
 .v8-products{grid-template-columns:1fr}
 .v8-pgrid{grid-template-columns:1fr}
 .v8-phcover>.v8-photo{height:180px}
 .v8-phid{padding:0 16px 16px}
 .v8-phid .v8-plogo-lg{margin-top:-28px}
 .v8-pgrid+.v8-filters,.v8-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px}
 .v8-filters::-webkit-scrollbar{display:none}
 .v8-filters button{flex:none}
 .v8-nav .v8-navlinks{flex-wrap:nowrap;gap:8px;width:100%}
 .v8-nav .v8-navlinks button{flex:1 1 auto;justify-content:center;font-size:14px;padding-left:8px;padding-right:8px}
 .v8-nav .v8-votebtn .v8-tabic{display:none}
 .v8-nav .v8-local{display:none}
 .v8-plogo-lg{width:64px;height:64px;font-size:22px}
 .v8-profile{grid-template-columns:1fr;gap:18px}
 .v8-profile>.v8-photo{height:200px}
 .v8-invite{padding:18px}
 .v8-invite .v8-btnrow{gap:8px}
 .v8-community{flex-direction:column;align-items:flex-start}
 .v8-form{padding:16px}
 .v8-footgrid{gap:22px 16px;padding-top:26px}
 .v8-footbrand,.v8-footsocial{grid-column:1/-1}
 .v8-social{flex-direction:row;flex-wrap:wrap;gap:4px 20px}
 .v8-socialstatus{max-width:none}
 .v8-footbottom{gap:8px}
}
/* v19: a closed sheet casts no shadow and is never painted (its shadow used to show at the viewport edge) */
.sheet:not(.on){visibility:hidden;box-shadow:none}
/* decorative photos never start a native drag (it cancelled the carousel swipe on laptops) */
.v8-photo{-webkit-user-drag:none;user-select:none}

/* v19.1: wordmark on one baseline; no ↗ glyphs (iOS draws U+2197 as a blue emoji tile) */
.v8-wm{display:inline-block;white-space:nowrap;line-height:1}
.v8-wm .v8-cw{vertical-align:baseline}

/* v19.1: home trust block — 4 short tiles, 2×2 on desktop, stacked on phone */
@media (min-width:768px){.v8-trustgrid{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}.v8-trustgrid .li{border-bottom:1px solid var(--aki-line)}}
.v8-trust .li .tx span{font-size:13px}

/* ---------- typography (v19.2) — the ONLY place font families are declared ----------
   Today (default): Arial/Helvetica for everything. The proposed direction is switched on for comparison only, with ?type=b on any
   app URL (e.g. https://…/?type=b): DM Sans for all everyday text (navigation, product names, prices, forms, buttons) and
   Bree Serif for the short campaign headline on the home hero only. Two families, never three. Prices, controls and routine
   product information always use --aki-font-body. Cooper Black is NOT in this build: it is a commercial typeface and no
   licence/webfont file exists in the repository (docs/TYPOGRAPHY.md).
   The web fonts are fetched only when a page actually uses them, so the default (Arial) page requests no font file.
   "DM Sans Fallback" is local Arial resized to DM Sans metrics, so the swap does not move the layout. */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url(/fonts/dm-sans-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bree Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/bree-serif-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:94.5%;ascent-override:105%;descent-override:32.8%;line-gap-override:0%}
:root[data-type="b"]{--aki-font-body:"DM Sans","DM Sans Fallback",Arial,Helvetica,sans-serif;--aki-font-display:"Bree Serif",Georgia,"Times New Roman",serif}
.v8-hero h1{font-family:var(--aki-font-display)}
:root[data-type="b"] .v8-hero h1{font-weight:400;letter-spacing:-.5px}

/* ---------- favourites (v19.2) ---------- */
.card{position:relative}
.fav-btn{position:absolute;top:2px;right:2px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;padding:0;color:var(--aki-sea-ink);z-index:2;cursor:pointer}
.fav-btn .fav-dot{width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(38,49,63,.25);display:flex;align-items:center;justify-content:center;transition:transform 140ms ease,background-color 140ms ease}
.fav-btn:hover .fav-dot{transform:scale(1.08)}
.fav-btn.on{color:#c2123f}
.fav-pdp{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--aki-line);border-radius:6px;background:var(--aki-paper);color:var(--aki-ink);font-weight:500;cursor:pointer;transition:background-color 140ms ease,border-color 140ms ease}
.fav-pdp:hover{border-color:var(--aki-sea-ink)}
.fav-pdp.on{color:#c2123f;border-color:#c2123f}
.fav-pdp.on span{color:var(--aki-ink)}
.fav-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0 4px}
.fav-row .link{color:var(--aki-sea-ink);text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:0 4px}
.v8-favbtn svg{width:22px;height:22px}
.v8-favlbl{display:none}
.v8-fcount{position:absolute;top:2px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--aki-sun);color:var(--aki-sun-ink);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.v8-fcount[hidden]{display:none}
@media (min-width:1024px){.v8-favlbl{display:inline;margin-left:2px}.v8-favbtn .v8-fcount{position:static;margin-left:2px}}
.toast.bad{background:#7a2e0e}
.fav-device{color:var(--aki-ink)}
.fav-alert{border:1px solid #e0b25a;background:#fff8e6;color:var(--aki-ink);padding:12px 14px;border-radius:6px;margin:0 0 16px}
.fav-list{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:900px){.fav-list{grid-template-columns:1fr 1fr}}
.fav-item{display:grid;grid-template-columns:104px 1fr;gap:14px;border:1px solid var(--aki-line);border-radius:8px;padding:12px;background:var(--aki-paper)}
.fav-off{background:var(--aki-soft)}
.fav-media{width:104px;height:104px;border-radius:6px;overflow:hidden;position:relative;background:var(--aki-sea);padding:0;border:0;display:block}
.fav-media img,.fav-media .gph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fav-media .gph{display:flex;align-items:center;justify-content:center}.fav-media .gph svg,.fav-media>svg{width:56%;height:56%}
.fav-info{min-width:0;display:flex;flex-direction:column;gap:4px}
.fav-name{font-size:16px!important;line-height:1.3!important;letter-spacing:0!important;font-weight:600!important}
.fav-link{border:0;background:none;padding:0;font:inherit;font-weight:inherit;color:var(--aki-ink);text-align:left;cursor:pointer;min-height:24px}
.fav-link:hover{text-decoration:underline}
.fav-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.fav-meta .badge{position:static}
.fav-state{font-weight:600}
.fav-warn{color:#8a3b0c}
.fav-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.fav-actions .v8-btn{padding:8px 12px}
.fav-empty{border:1px dashed var(--aki-line);border-radius:8px;padding:28px 20px;text-align:center;max-width:560px}
.fav-empty h2{margin-bottom:6px}.fav-empty p{color:var(--aki-muted);margin-bottom:14px}
@media (max-width:420px){.fav-item{grid-template-columns:80px 1fr}.fav-media{width:80px;height:80px}}
@media (prefers-reduced-motion:reduce){.fav-btn .fav-dot,.fav-pdp{transition:none}}
/* v20 pay-on-delivery line and checkout gift options (D-2026-10-16-E01) */
.pay-line{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:10px;color:var(--navy)}.pay-line svg{flex:none}
.gift-co{border:1px solid var(--border);border-radius:10px;padding:4px 14px;margin:14px 0;background:var(--sand)}
.gift-co .chk{margin:10px 0}.gift-co #coGiftOpts{padding-left:30px}
.gift-co textarea{width:100%;font:inherit;font-size:16px;min-height:72px;border:0;background:transparent;resize:vertical;color:var(--ink)}
.search.search-ta{height:auto;padding:10px 14px}