/*
  Shop pages (/s/{shop}) — v1.23 shopping app. Phones (< 900px) look and behave like an app: top bar, bottom tabs,
  bottom sheets, fixed buy / pay bars. Laptops get a normal online-store header with a category menu.
  Five layouts share one structure (body.layout-*): Classic (default, "clean store app"), Boutique (editorial),
  Bright (bold colour), Minimal, Food menu. The shop colour (html[data-theme]) sets --accent; fonts via body.font-*.
  Loaded after app.css + console.css on shop pages only (<body class="store">).
*/

.store {
  --canvas: #f4f5f7;
  --surface: #ffffff;
  --surface-soft: #f8f9fb;
  --surface-sunk: #eef0f3;
  --line: #e5e7eb;
  --line-strong: #d1d5db;
  --ink: #111827;
  --ink-2: #4b5563;
  --ink-3: #6b7280;
  --grad: var(--accent);
  --grad-soft: var(--accent-tint);
  --glow: transparent;
  --wash-1: transparent;
  --wash-2: transparent;
  --shadow-1: 0 1px 2px rgb(16 24 40 / 0.05);
  --shadow-2: 0 12px 32px -14px rgb(16 24 40 / 0.28);
  --shadow-pop: none;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --head: var(--font);
  --r-sm: 10px;
  --r: 12px;
  --r-lg: 16px;
  --card-r: 14px;
  --img-r: 0px;
  --btn-r: 999px;
  --bar-h: 56px;
  --tab-h: 64px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
body.store { background: var(--canvas); color: var(--ink-2); font: 400 14px/1.5 var(--font); -webkit-tap-highlight-color: transparent; }
.store h1, .store h2, .store h3 { color: var(--ink); font-family: var(--head); font-weight: 700; letter-spacing: -0.015em; }
.store strong, .store b { font-weight: 650; }
.store .icon { stroke-width: 1.75; }
.store-main { padding-bottom: 1.5rem; }

/* buttons: solid shop colour, pills (Boutique: square), press feedback */
.store .btn { border-radius: var(--btn-r); font-weight: 650; font-size: .875rem; min-height: 44px; padding: .5rem 1.15rem; box-shadow: none; transition: transform .16s var(--ease), background-color .15s var(--ease); }
.store .btn:active:not(:disabled) { transform: scale(.97); }
.store .btn-primary { background: var(--accent); color: #fff; border-color: transparent; }
.store .btn-primary:hover:not(:disabled) { background: var(--accent-strong); color: #fff; box-shadow: none; }
.store .btn-secondary { background: var(--surface); border: 1.5px solid var(--ink); color: var(--ink); box-shadow: none; }
.store .btn-secondary:hover:not(:disabled) { background: var(--surface-soft); border-color: var(--ink); }
.store .input, .store .select { border: 1px solid var(--line-strong); border-radius: var(--r-sm); min-height: 44px; font-weight: 400; box-shadow: none; }

/* ================================================================ top bar */
.store-announce { margin: 0; padding: .45rem 1rem; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 650; text-align: center; }
.sb { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); }
.sb-row { display: flex; align-items: center; gap: .5rem; height: var(--bar-h); }
.sb-brand { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1 1 auto; color: var(--ink); text-decoration: none; }
.sb-brand:hover { color: var(--ink); }
.sb-logo { flex: none; width: 34px; height: 34px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 750; }
.sb-logo img { width: 100%; height: 100%; object-fit: cover; }
.sb-name { font-family: var(--head); font-size: 1.0625rem; font-weight: 750; letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-title { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--ink); font-family: var(--head); font-size: 1.0625rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-actions { display: flex; align-items: center; gap: 0; margin-left: auto; flex: none; }
.sb-icon { position: relative; flex: none; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; color: var(--ink); cursor: pointer; transition: background-color .15s var(--ease), transform .16s var(--ease); }
.sb-icon:hover { background: var(--surface-sunk); color: var(--ink); }
.sb-icon:active { transform: scale(.92); }
.sb-icon .icon { width: 22px; height: 22px; }
.sb-back { margin-left: -10px; }
.sb-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: .6875rem; font-weight: 750; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.sb-count[hidden] { display: none; }
[data-cart-link].bump .sb-count { animation: bump .45s var(--ease); }
.sb-search, .sb-cats, .sb-account { display: none; }
/* phones: the bar shows the shop name on Home, a title on tab pages, ← + title elsewhere */
@media (max-width: 899px) {
  .bar-back .sb-brand, .bar-title .sb-brand { display: none; }
  .bar-float .sb { display: none; }
  .bar-title .sb-row { padding-left: 16px; }
  .store-main .store-back { display: none; }
}

/* laptop header: logo + name, wide search, account / wishlist / cart, then the category menu */
@media (min-width: 900px) {
  .sb-row { height: 68px; gap: 1.25rem; }
  .sb-brand { flex: 0 1 auto; }
  .sb-title, .sb-back { display: none; }
  .sb-search { position: relative; display: flex; align-items: center; flex: 1 1 auto; max-width: 560px; }
  .sb-search .icon { position: absolute; left: .95rem; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
  .sb-search input { width: 100%; min-height: 44px; padding: .5rem 1rem .5rem 2.7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); font: 400 .9375rem var(--font); color: var(--ink); }
  .sb-search input:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
  .sb-account { display: grid; }
  .sb-cats { display: block; border-top: 1px solid var(--line); }
  .sb-cats > ul { list-style: none; display: flex; align-items: center; gap: 1.75rem; height: 46px; margin-block: 0; }
  .sb-cats a, .sb-cats button { display: inline-flex; align-items: center; gap: .25rem; height: 46px; padding: 0; border: 0; background: none; color: var(--ink-2); font: 600 .875rem var(--font); text-decoration: none; cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color .15s var(--ease), box-shadow .15s var(--ease); }
  .sb-cats a:hover, .sb-cats button:hover, .sb-cats button[aria-expanded="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
  .sb-cats .icon { width: 16px; height: 16px; transition: transform .2s var(--ease); }
  .sb-cats button[aria-expanded="true"] .icon { transform: rotate(180deg); }
  .sb-sale a { color: var(--accent); }
  .sb-more { position: relative; }
  .sb-menu { position: absolute; top: 100%; left: -1rem; z-index: 40; min-width: 220px; margin: 0; padding: .4rem; list-style: none; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); display: none; }
  .sb-more button[aria-expanded="true"] + .sb-menu { display: block; transform-origin: top left; transition: opacity .18s var(--ease), transform .18s var(--ease); }
  @starting-style { .sb-more button[aria-expanded="true"] + .sb-menu { opacity: 0; transform: translateY(-4px) scale(.98); } }
  .sb-menu a { display: flex; height: auto; padding: .55rem .75rem; border-radius: 9px; box-shadow: none; }
  .sb-menu a:hover { background: var(--surface-sunk); box-shadow: none; }
}

/* demo shop / not taking orders: a card at the top of the page (Home: under the search) */
.store-main :is(.store-demo, .store-closed) { width: calc(100% - 32px); max-width: 1132px; margin: .75rem auto 0; border: 1px solid; border-radius: var(--card-r); }
.store-main .store-demo { border-color: #c7d7fe; }
.store-main .store-closed { border-color: var(--warn-line); }
.store-main :is(.store-demo, .store-closed) .store-wrap { padding: .65rem .85rem; }
.store-main :is(.store-demo, .store-closed) p { font-size: .8125rem; }
@media (min-width: 700px) { .store-main :is(.store-demo, .store-closed) { width: calc(100% - 48px); } }

/* ================================================================ bottom tabs (phones) */
.tabbar { display: none; }
@media (max-width: 899px) {
  body.has-tabs { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--line); }
  .tabbar a { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; color: var(--ink-3); font-size: .6875rem; font-weight: 600; text-decoration: none; transition: color .15s var(--ease), transform .16s var(--ease); }
  .tabbar a:active { transform: scale(.94); }
  .tabbar a[aria-current="page"] { color: var(--accent); }
  .tabbar a[aria-current="page"] .i-fill { display: inline; fill: currentColor; stroke: none; opacity: .14; }
  .tabbar .icon { width: 23px; height: 23px; }
  .tabbar-icon { position: relative; display: grid; }
  .tabbar .sb-count { top: -6px; right: -11px; }
}

/* ================================================================ home */
.hm-search { position: relative; display: flex; align-items: center; margin-top: .75rem; }
.hm-search .icon { position: absolute; left: 30px; width: 19px; height: 19px; color: var(--ink-3); pointer-events: none; }
.hm-search input { width: 100%; min-height: 46px; padding: .5rem 1rem .5rem 2.75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: 400 .9375rem var(--font); color: var(--ink); }
.hm-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
@media (min-width: 900px) { .hm-search { display: none; } }
@media (min-width: 700px) { .hm-search .icon { left: 38px; } }

/* banner slider */
.hs { padding-top: .85rem; }
.hs-wrap { position: relative; }
.hs-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--card-r); background: var(--surface-sunk); aspect-ratio: 2 / 1; }
.hs.has-phone .hs-track { aspect-ratio: 16 / 9; }
.hs-track::-webkit-scrollbar { display: none; }
.hs-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hs-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.hs-slide a, .hs-slide picture { display: block; width: 100%; height: 100%; }
.hs-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hs-ad-tag { position: absolute; right: 8px; top: 8px; padding: .05rem .45rem; border-radius: 6px; background: rgb(17 24 39 / .72); color: #fff; font-size: .625rem; font-weight: 600; pointer-events: none; }
.hs-controls { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: .4rem; }
.hs-dots { display: flex; gap: 2px; }
.hs-dots button { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.hs-dots button::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: var(--line-strong); transition: background-color .2s var(--ease); }
.hs-dots button[aria-current="true"]::before { width: 18px; background: var(--accent); }
.hs-btn { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.hs-btn .icon { width: 15px; height: 15px; }
.hs-prev, .hs-next { display: none; }
.hs-pause .icon:last-child { display: none; }
.hs-pause.is-paused .icon:first-child { display: none; }
.hs-pause.is-paused .icon:last-child { display: block; }
@media (min-width: 700px) { .hs.has-phone .hs-track { aspect-ratio: 2 / 1; } }
@media (min-width: 900px) {
  .hs { padding-top: 1.25rem; }
  .hs-track, .hs.has-phone .hs-track { aspect-ratio: 3 / 1; border-radius: var(--r-lg); }
  .hs-prev, .hs-next { display: grid; position: absolute; top: calc(50% - 1.4rem); z-index: 2; width: 42px; height: 42px; border-color: transparent; background: rgb(255 255 255 / .94); box-shadow: var(--shadow-1); }
  .hs-prev { left: 40px; }
  .hs-next { right: 40px; }
  .hs-btn .icon { width: 18px; height: 18px; }
}

/* category circles: swipe row on phones, one row on laptops */
.hm-cats { margin-top: 1rem; }
.hm-cat-row { list-style: none; display: flex; gap: 14px; margin: 0 -16px; padding: 2px 16px 4px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none; }
.hm-cat-row::-webkit-scrollbar { display: none; }
.hm-cat-row > li { flex: none; scroll-snap-align: start; }
.hm-cat { display: grid; justify-items: center; gap: .4rem; width: 72px; color: var(--ink-2); text-decoration: none; text-align: center; }
.hm-cat:hover { color: var(--ink); }
.hm-cat-img { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); box-shadow: 0 0 0 1.5px var(--line); border: 2px solid var(--surface); transition: transform .2s var(--ease); }
.hm-cat:active .hm-cat-img { transform: scale(.95); }
.hm-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.hm-cat-img .icon { width: 26px; height: 26px; }
.hm-cat-name { max-width: 100%; font-size: .75rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 700px) { .hm-cat-row { margin: 0; padding-inline: 0; } }
@media (min-width: 900px) {
  .hm-cats { margin-top: 1.75rem; }
  .hm-cat-row { gap: 1.5rem; justify-content: flex-start; flex-wrap: wrap; overflow: visible; }
  .hm-cat { width: 108px; font-size: .8125rem; }
  .hm-cat-img { width: 108px; height: 108px; }
  .hm-cat:hover .hm-cat-img { transform: scale(1.04); }
}

/* promises */
.hm-trust { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: .9rem; margin-bottom: 0; padding-block: 0; }
.hm-trust li { display: flex; align-items: center; gap: .45rem; min-height: 46px; padding: .45rem .6rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: .6875rem; font-weight: 600; line-height: 1.25; color: var(--ink-2); }
.hm-trust .icon { flex: none; width: 18px; height: 18px; color: var(--accent); }
@media (min-width: 900px) { .hm-trust { margin-top: 1.5rem; gap: 14px; } .hm-trust li { min-height: 52px; padding: .6rem 1rem; font-size: .8125rem; } .hm-trust .icon { width: 20px; height: 20px; } }

/* featured product */
.sp-spot { margin-top: 1.25rem; }
.sp-spot-card { display: grid; grid-template-columns: 40% minmax(0, 1fr); background: var(--surface); border-radius: var(--card-r); border: 1px solid var(--line); overflow: hidden; color: var(--ink); text-decoration: none; box-shadow: none; transition: transform .16s var(--ease); }
.sp-spot-card:active { transform: scale(.985); }
.sp-spot-media { position: relative; aspect-ratio: 4 / 5; max-height: none; background: var(--surface-sunk); }
.sp-spot-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-spot-body { display: grid; align-content: center; gap: .3rem; padding: .9rem 1rem; }
.sp-spot-tag { position: static; justify-self: start; padding: .1rem .55rem; border-radius: 999px; background: var(--accent-tint); color: var(--accent-strong); font-size: .6875rem; font-weight: 700; box-shadow: none; }
.sp-spot-name { font-family: var(--head); font-size: 1.0625rem; font-weight: 700; line-height: 1.25; }
.sp-spot-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.sp-spot-price strong { font-size: 1.0625rem; color: var(--ink); }
.sp-spot-price s { color: var(--ink-3); }
.sp-spot-note { color: var(--warn); font-size: .75rem; font-weight: 650; }
.sp-spot-cta { display: inline-flex; align-items: center; justify-self: start; gap: .3rem; margin-top: .35rem; min-height: 38px; padding: 0 1rem; border-radius: var(--btn-r); background: var(--accent); color: #fff; font-size: .8125rem; font-weight: 650; }
.sp-spot-cta .icon { width: 16px; height: 16px; }
@media (min-width: 900px) {
  .sp-spot { margin-top: 2rem; }
  .sp-spot-card { grid-template-columns: 360px minmax(0, 1fr); max-width: 820px; }
  .sp-spot-media { aspect-ratio: 5 / 4; }
  .sp-spot-body { padding: 2rem 2.5rem; gap: .5rem; }
  .sp-spot-name { font-size: 1.625rem; }
}
.pill-off { display: inline-flex; align-items: center; padding: .05rem .5rem; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: .75rem; font-weight: 700; }

/* section heads, rows, grids */
.sp-rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.sp-rail-head h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.125rem; }
.sp-rail-head a { display: inline-flex; align-items: center; gap: .1rem; flex: none; font-size: .8125rem; font-weight: 650; color: var(--accent); text-decoration: none; }
.sp-rail-head a .icon { width: 16px; height: 16px; }
.sp-rail { margin-top: 1.6rem; }
.sp-rail-scroll { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
.sp-rail-scroll::-webkit-scrollbar { display: none; }
.sp-rail-list { list-style: none; display: flex; gap: 10px; margin: 0; padding: 2px 16px 6px; width: max-content; }
.sp-rail-list > li { width: 42vw; max-width: 200px; scroll-snap-align: start; }
@media (min-width: 700px) {
  .sp-rail-scroll { scroll-padding-inline: max(24px, calc((100vw - 1180px) / 2 + 24px)); }
  .sp-rail-list { gap: 16px; padding-inline: max(24px, calc((100vw - 1180px) / 2 + 24px)); }
  .sp-rail-list > li { width: 220px; max-width: none; }
}
.hm-new, .hm-all { margin-top: 1.6rem; }
.sp-cat-count { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 .45rem; border-radius: 999px; background: var(--surface-sunk); color: var(--ink-2); font-family: var(--font); font-size: .75rem; font-weight: 650; letter-spacing: 0; }
.sp-empty { padding: 2.5rem 1rem; border-radius: var(--card-r); background: var(--surface); border: 1px solid var(--line); text-align: center; color: var(--ink-2); }
.sp-empty p { margin: 0 auto; max-width: 42ch; }
.sp-empty strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: .25rem; }
@media (min-width: 900px) { .sp-rail, .hm-new, .hm-all { margin-top: 2.5rem; } .sp-rail-head h2 { font-size: 1.375rem; } .sp-rail-head { margin-bottom: 1rem; } }

/* install strip (shown by store.js to returning visitors whose phone can install) */
.install-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; margin-top: 1.5rem; padding: .8rem .9rem; border-radius: var(--card-r); background: var(--accent-tint); border: 1px solid var(--accent-tint-2); }
.install-strip[hidden] { display: none; }
.install-strip p { display: grid; margin: 0; font-size: .8125rem; line-height: 1.35; color: var(--ink-2); }
.install-strip strong { color: var(--ink); font-size: .875rem; }
.install-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: #fff; }
.install-icon .icon { width: 20px; height: 20px; }

/* ================================================================ product cards */
.pc-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
@media (min-width: 700px) { .pc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1040px) { .pc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.pc { position: relative; height: 100%; }
.pc-link { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-r); overflow: hidden; color: var(--ink); text-decoration: none; box-shadow: none; transition: transform .16s var(--ease), box-shadow .2s var(--ease); }
.pc-link:hover { color: var(--ink); transform: none; }
.pc-link:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .pc-link:hover { box-shadow: var(--shadow-2); } .pc-link:hover .pc-media img { transform: scale(1.03); } }
.pc-media { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--surface-sunk); overflow: hidden; border-radius: var(--img-r); }
.pc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.pc-noimg { display: grid; place-items: center; height: 100%; color: var(--ink-3); }
.pc-flag { position: absolute; left: 8px; top: 8px; padding: .1rem .5rem; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: .6875rem; font-weight: 700; box-shadow: none; }
.pc-flag-out { background: rgb(255 255 255 / .94); color: var(--ink-2); }
.pc.is-out .pc-media img { opacity: .55; filter: saturate(.6); }
.pc-food { position: absolute; left: 8px; bottom: 8px; padding: 3px; border-radius: 6px; background: #fff; display: grid; box-shadow: none; }
.pc-food .fm-dot { width: 14px; height: 14px; border-width: 1.5px; }
.pc-food .fm-dot::after { width: 6px; height: 6px; }
.pc-food.food-veg { color: #15803d; } .pc-food.food-nonveg { color: #7c2d12; } .pc-food.food-egg { color: #b45309; }
.pc-food.food-nonveg .fm-dot::after { border-radius: 0; width: 0; height: 0; background: none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid currentColor; }
.pc-body { display: grid; gap: .1rem; padding: .55rem .7rem .75rem; }
.pc-name { font-size: .8125rem; font-weight: 500; color: var(--ink-2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .35rem; }
.pc-price strong { font-size: .9375rem; font-weight: 750; color: var(--ink); }
.pc-price s { color: var(--ink-3); font-size: .75rem; font-weight: 500; }
.pc-from { color: var(--ink-3); font-size: .75rem; font-weight: 600; }
.pc-note { color: var(--warn); font-size: .6875rem; font-weight: 650; }
/* heart */
.pc-wish { position: absolute; top: 7px; right: 7px; z-index: 2; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: transform .16s var(--ease), color .15s var(--ease); }
.pc-wish .icon, .pv-wish .icon { width: 18px; height: 18px; }
.pc-wish:active, .pv-wish:active { transform: scale(.88); }
[data-wish-btn][aria-pressed="true"] { color: #e11d48; }
[data-wish-btn][aria-pressed="true"] .i-fill { display: inline; fill: currentColor; stroke: none; }
[data-wish-btn].pop .icon { animation: bump .35s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ================================================================ product lists: chips, filter + sort, load more */
.lf-top { background: var(--canvas); }
.lf-title { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .6rem; font-size: 1.375rem; }
.lf-search { position: relative; display: flex; align-items: center; margin-bottom: .6rem; }
.lf-search .icon { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.lf-search input { width: 100%; min-height: 46px; padding: .5rem 1rem .5rem 2.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: 400 .9375rem var(--font); color: var(--ink); }
.lf-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.sp-chips { display: flex; gap: .45rem; overflow-x: auto; margin: 0 -16px; padding: 2px 16px; scrollbar-width: none; }
.sp-chips::-webkit-scrollbar { display: none; }
.sp-chips a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 .95rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: .8125rem; font-weight: 600; text-decoration: none; transition: background-color .15s var(--ease), color .15s var(--ease), transform .16s var(--ease); }
.sp-chips a:active { transform: scale(.96); }
.sp-chips a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.lf-tools { display: flex; align-items: center; gap: .5rem; padding: .6rem 0; }
.lf-tool { display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: 0 .9rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 .8125rem var(--font); cursor: pointer; transition: transform .16s var(--ease); }
.lf-tool:active { transform: scale(.96); }
.lf-tool .icon { width: 17px; height: 17px; }
.lf-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: .6875rem; }
.lf-count { margin: 0 0 0 auto; }
.lf-sortbox { display: none; }
.lf-body { display: block; }
.lf-side { display: none; }
.lf-active { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .75rem; padding: 0; }
.lf-active a { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; padding: 0 .65rem 0 .8rem; border-radius: 999px; background: var(--accent-tint); color: var(--accent-strong); font-size: .75rem; font-weight: 650; text-decoration: none; }
.lf-active a .icon { width: 14px; height: 14px; }
.lf-active .lf-clear { background: none; color: var(--ink-2); text-decoration: underline; }
.lf-more { display: grid; justify-items: center; gap: .4rem; margin-top: 1.5rem; }
.lf-more .btn { min-width: 220px; }
.lf-more p { margin: 0; }
.lf-more.is-loading .btn { opacity: .6; pointer-events: none; }
.lf-range { margin: .4rem 0 0; color: var(--ink-3); font-size: .75rem; }
@media (max-width: 899px) {
  /* the top bar already shows these titles; the heading stays for screen readers */
  .lf-title, .ac > h1, .ct-title, .wl-title, .sc-head h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .ct .ct-grid, .ac .ac-login, .wl .wl-note, .wl .pc-grid, .sc .sc-grid, .sc .sc-empty { margin-top: 1rem; }
  .lf-top { position: sticky; top: var(--bar-h); z-index: 20; padding-top: .6rem; border-bottom: 1px solid var(--line); }
  .lf-main { padding-top: .85rem; }
}
@media (min-width: 900px) {
  .sp-chips { margin: 0; padding: 0; flex-wrap: wrap; }
  .lf-title { margin: 1.5rem 0 .75rem; font-size: 1.75rem; }
  .lf-search { max-width: 560px; }
  .lf-tool { display: none; }
  .lf-tools { padding: .9rem 0; }
  .lf-count { display: none; }
  .lf-sortbox { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
  .lf-sortbox label { margin: 0; white-space: nowrap; }
  .lf-sortbox .select { width: auto; min-height: 38px; border-radius: 999px; }
  .lf-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2rem; align-items: start; }
  .lf-side { display: block; position: sticky; top: 130px; max-height: calc(100vh - 150px); overflow-y: auto; padding: 1.1rem; border-radius: var(--card-r); background: var(--surface); border: 1px solid var(--line); }
  .lf-side-h { margin: 0 0 .5rem; font-size: 1rem; }
  .lf-side .lf-actions { position: static; margin: .75rem 0 0; padding: 0; border: 0; background: none; }
  .lf-side .lf-actions .btn { min-height: 40px; font-size: .8125rem; padding-inline: .6rem; }
  .lf-main .pc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1180px) { .lf-main .pc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* filter form (sheet + sidebar) */
.lf-form { display: grid; gap: .25rem; }
.lf-group { margin: 0; padding: .75rem 0; border: 0; border-bottom: 1px solid var(--line); min-width: 0; }
.lf-group legend { float: left; width: 100%; margin-bottom: .55rem; padding: 0; color: var(--ink); font-size: .875rem; font-weight: 700; }
.lf-group legend + * { clear: both; }
.lf-price { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem; }
.lf-price .input { min-height: 42px; }
.lf-check { display: flex; align-items: center; gap: .6rem; min-height: 40px; color: var(--ink); font-size: .875rem; font-weight: 500; cursor: pointer; }
.lf-check input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.lf-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.lf-pill { position: relative; }
.lf-pill input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.lf-pill span { display: inline-grid; place-items: center; min-width: 44px; min-height: 38px; padding: 0 .75rem; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: .8125rem; font-weight: 600; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.lf-pill input:checked + span { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-strong); }
.lf-pill input:focus-visible + span { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.lf-actions { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1.6fr; gap: .6rem; margin: .5rem -1rem 0; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }

/* ================================================================ bottom sheets (filter, sort) */
.sheet { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.sheet::backdrop { background: rgb(17 24 39 / .45); }
.sheet[open]::backdrop { transition: opacity .3s var(--ease); }
@starting-style { .sheet[open]::backdrop { opacity: 0; } }
.sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 86dvh; padding: 0 1rem; border-radius: 22px 22px 0 0; background: var(--surface); box-shadow: 0 -12px 40px -16px rgb(16 24 40 / .35); transition: transform .4s var(--ease-drawer); }
@starting-style { .sheet[open] .sheet-panel { transform: translateY(100%); } }
.sheet-panel.is-dragging { transition: none; }
.sheet-grip { width: 40px; height: 5px; margin: 8px auto 2px; border-radius: 3px; background: var(--line-strong); flex: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: .25rem 0 .5rem; flex: none; touch-action: none; }
.sheet-grip { touch-action: none; }
.sheet-head h2 { margin: 0; font-size: 1.125rem; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; }
.sheet-list { list-style: none; margin: 0; padding: 0 0 calc(1rem + env(safe-area-inset-bottom)); }
.sheet-list a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 .25rem; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .9375rem; font-weight: 500; text-decoration: none; }
.sheet-list a[aria-current="true"] { color: var(--accent); font-weight: 700; }
.sheet-list .icon { width: 20px; height: 20px; }
@media (min-width: 900px) {
  .sheet-panel { left: 50%; right: auto; bottom: auto; top: 50%; width: min(520px, 92vw); max-height: 80vh; border-radius: 20px; transform: translate(-50%, -50%); }
  @starting-style { .sheet[open] .sheet-panel { transform: translate(-50%, -46%); opacity: 0; } }
  .sheet-grip { display: none; }
}

/* ================================================================ categories, search, wishlist tabs */
.ct-title, .wl-title { margin: 1rem 0 .9rem; font-size: 1.375rem; }
.ct-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.ct-tile { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-r); overflow: hidden; color: var(--ink); text-decoration: none; transition: transform .16s var(--ease); }
.ct-tile:active { transform: scale(.98); }
.ct-img { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--accent-tint); color: var(--accent); overflow: hidden; }
.ct-img img { width: 100%; height: 100%; object-fit: cover; }
.ct-img .icon { width: 30px; height: 30px; }
.ct-name { display: grid; padding: .6rem .75rem .7rem; font-size: .875rem; font-weight: 650; line-height: 1.3; }
.ct-count { color: var(--ink-3); font-size: .75rem; font-weight: 500; }
.ct-none { margin-top: 1rem; }
@media (min-width: 700px) { .ct-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1040px) { .ct-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .ct-title, .wl-title { margin-top: 1.75rem; font-size: 1.75rem; } }
@media (hover: hover) and (pointer: fine) { .ct-tile:hover { box-shadow: var(--shadow-2); } }

.se { max-width: 760px; }
.se-form { position: relative; display: flex; align-items: center; gap: .5rem; margin-top: .9rem; }
.se-form > .icon { position: absolute; left: 14px; width: 19px; height: 19px; color: var(--ink-3); pointer-events: none; }
.se-form input { flex: 1; min-width: 0; min-height: 48px; padding: .5rem 1rem .5rem 2.7rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font: 400 1rem var(--font); color: var(--ink); }
.se-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.se-form .btn { min-height: 46px; }
.se-block { margin-top: 1.5rem; }
.se-block[hidden] { display: none; }
.se-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .6rem; }
.se-head h2 { margin: 0; font-size: 1rem; }
.se-head a, .se-clear { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: var(--accent); font: 650 .8125rem var(--font); text-decoration: none; cursor: pointer; }
.se-head a .icon { width: 16px; height: 16px; }
.se-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.se-chips a { display: inline-flex; align-items: center; gap: .35rem; min-height: 38px; padding: 0 .95rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: .8125rem; font-weight: 550; text-decoration: none; }
.se-chips a .icon { width: 15px; height: 15px; color: var(--ink-3); }
.se .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .se .pc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.wl-note { display: flex; align-items: center; gap: .4rem; margin: -.3rem 0 .9rem; }
.wl-note .icon { width: 16px; height: 16px; color: var(--accent); }
.wl-empty[hidden] { display: none; }

/* ================================================================ product page */
.pv { padding-top: 0; }
.pv-float { display: none; }
.pv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; min-height: 40px; font-size: .75rem; font-weight: 500; }
.pv-crumbs a { color: var(--ink-2); text-decoration: none; }
.pv-crumbs .icon { width: 14px; height: 14px; color: var(--ink-3); }
.pv-grid { gap: 0; }
.pv-stage { max-height: none; background: var(--surface-sunk); }
.pv-dots { padding-top: .45rem; }
.pv-dots span.on { background: var(--accent); }
.pv-code { margin: 0; color: var(--ink-3); font-size: .75rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.pv-name { margin: .15rem 0 0; font-size: 1.3125rem; font-weight: 750; }
.pv-price { margin-top: .4rem; gap: .5rem; }
.pv-price strong { font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.pv-stock { margin-top: .35rem; font-size: .8125rem; font-weight: 650; }
.pv-facts { margin-top: .7rem; gap: .35rem; }
.pv-facts li { min-height: 30px; font-size: .75rem; font-weight: 550; }
.pv-buy { margin-top: .9rem; padding-top: .9rem; gap: .85rem; }
.pv-opt legend { margin-bottom: .45rem; font-size: .8125rem; font-weight: 700; }
.pv-pill span { min-height: 42px; min-width: 50px; padding: 0 .9rem; border: 1.5px solid var(--line-strong); border-radius: 12px; font-size: .875rem; font-weight: 600; }
.pv-pill input:checked + span { border: 1.5px solid var(--accent); background: var(--accent-tint); color: var(--accent-strong); font-weight: 700; }
.pv-actions { gap: .5rem; }
.pv-qty { height: 46px; border: 1.5px solid var(--line-strong); }
.pv-qty input { font-weight: 700; }
.pv-add { min-height: 46px; font-size: .9375rem; }
.pv-more-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pv-more-actions > :only-child { grid-column: 1 / -1; }
.pv-buynow, .pv-wa { width: 100%; min-height: 46px; padding-inline: .6rem; gap: .35rem; white-space: nowrap; font-size: .8125rem; }
.pv-wa { border-color: var(--line-strong); }
.pv-wa .icon { color: #16a34a; }
.pv-pin { margin-top: .85rem; padding: .75rem .85rem; border-radius: var(--r); }
.pv-secondary { margin-top: .5rem; gap: 0 1.25rem; }
.pv-link { min-height: 40px; font-weight: 600; font-size: .8125rem; }
/* fold-out sections */
.pv-folds { margin-top: .75rem; border-top: 1px solid var(--line); }
.pv-fold { border-bottom: 1px solid var(--line); }
.pv-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 54px; list-style: none; cursor: pointer; }
.pv-fold > summary::-webkit-details-marker { display: none; }
.pv-fold > summary h2 { margin: 0; font-size: .9375rem; }
.pv-fold > summary .icon { width: 18px; height: 18px; color: var(--ink-3); transition: transform .2s var(--ease); }
.pv-fold[open] > summary .icon { transform: rotate(180deg); }
.pv-fold-body { padding: 0 0 1rem; font-size: .875rem; line-height: 1.6; }
.pv-fold[open] .pv-fold-body { animation: fold-in .25s var(--ease); }
@keyframes fold-in { from { opacity: 0; transform: translateY(-4px); } }
.pv-fold-body h3 { margin: .5rem 0 .2rem; font-size: .8125rem; }
.pv-fold-body p { margin: 0 0 .5rem; }
.pv-about { margin: 0; padding-top: 0; border: 0; }
.pv-desc { font-size: .875rem; line-height: 1.65; color: var(--ink-2); }
.pv-details { margin-top: .75rem; border-radius: var(--r); }
.pv-details div { grid-template-columns: 110px minmax(0, 1fr); padding: .55rem .85rem; font-size: .8125rem; }
.pv-details dt { font-weight: 500; }
.pv-details dd { font-weight: 650; color: var(--ink); }
.pv-reviews { margin-top: 1.25rem; }
.pv-related { margin-top: 1.75rem; }
/* buy bar (phones) */
.pv-bar { display: none; }
@media (max-width: 899px) {
  .bar-float.store { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .pv-crumbs { display: none; }
  .pv-gallery { position: relative; margin-inline: -16px; }
  .pv-stage { aspect-ratio: 4 / 5; max-height: 72vh; }
  .pv-dots { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 2; padding: 0; }
  .pv-dots span { background: rgb(255 255 255 / .6); }
  .pv-dots span.on { background: #fff; }
  .pv-float { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: .4rem; height: 0; overflow: visible; margin-inline: -4px; }
  .pv-float > * { transform: translateY(32px); }
  .pv-float .sb-icon { background: rgb(255 255 255 / .94); box-shadow: 0 2px 10px rgb(0 0 0 / .1); }
  .pv-float .sb-icon:hover { background: #fff; }
  .pv-float-gap { flex: 1; }
  .pv-info { position: relative; z-index: 1; margin: -22px -16px 0; padding: 1.1rem 16px 0; border-radius: 22px 22px 0 0; background: var(--canvas); }
  .pv-actions .pv-add, .pv-more-actions .pv-buynow { display: none; }
  .pv-actions { display: block; }
  .pv-more-actions { grid-template-columns: 1fr; }
  .pv-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .5rem; padding: .6rem 14px calc(.6rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -14px rgb(16 24 40 / .3); animation: none; }
  .pv-bar[hidden] { display: grid; }
  .pv-bar-price { display: grid; line-height: 1.2; min-width: 0; }
  .pv-bar-price strong { font-size: 1.0625rem; font-weight: 800; color: var(--ink); }
  .pv-bar-price span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pv-bar .btn { min-height: 48px; padding-inline: 1rem; }
}
@media (min-width: 700px) and (max-width: 899px) {
  .pv-gallery { margin-inline: -24px; }
  .pv-info { margin-inline: -24px; padding-inline: 24px; }
  .sp-chips { margin-inline: -24px; padding-inline: 24px; }
}
@media (min-width: 900px) {
  .pv { padding-top: .5rem; }
  .pv-grid { gap: 3rem; }
  .pv-stage { border-radius: var(--r-lg); border: 1px solid var(--line); }
  .pv-name { font-size: 1.75rem; }
  .pv-info { padding-top: .5rem; }
}

/* ================================================================ cart, checkout, order, account, about: same cards */
.sc { padding-top: .5rem; }
.sc-head h1 { margin: .5rem 0 .85rem; font-size: 1.375rem; }
.sc-grid { gap: .85rem; }
.sc-lines { gap: .5rem; }
.sc-line { grid-template-columns: 68px minmax(0, 1fr) auto; gap: .75rem; padding: .7rem; border-radius: var(--card-r); border: 1px solid var(--line); box-shadow: none; }
.sc-thumb { width: 68px; height: 85px; border-radius: 10px; }
.sc-name { font-weight: 650; }
.sc-paybar { display: none; }
@media (max-width: 899px) {
  .store .sc-summary .btn-block { display: none; }
  .sc-paybar { position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 16px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -14px rgb(16 24 40 / .3); }
  .sc-paybar p { display: grid; margin: 0; line-height: 1.2; }
  .sc-paybar strong { font-size: 1.125rem; font-weight: 800; color: var(--ink); }
  .sc-paybar .btn { min-height: 48px; min-width: 150px; }
  .store:has(.sc-paybar) .store-main { padding-bottom: 5.5rem; }
}
.store .card { border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: none; padding: 1rem 1.1rem; }
.store .card + .card { margin-top: .75rem; }
.store :is(.sc-summary, .sc-empty, .sc-soon, .sa-section, .co-card, .co-summary, .so-main > section, .so-side > section, .pv-notify) {
  border-radius: var(--card-r); border: 1px solid var(--line); box-shadow: none; background: var(--surface);
}
.store .sc-summary, .store .co-summary { padding: 1rem 1.1rem; }
.store .co-card { padding: 1rem 1.1rem; }
.store .sa-section { padding: 1rem 1.1rem; margin-bottom: .6rem; }
.store :is(.sc-total, .sc-sub strong, .co-option-price, .co-line-total, .co-total dt, .co-total dd, .co-due dt, .co-due dd, .olist-total, .co-sum-toggle > summary > span, .pv-notify-title) { font-weight: 700; }
.store .co-total dd, .store .sc-sub strong { font-size: 1.25rem; color: var(--ink); }
.store .co-line-qty { font-weight: 650; background: var(--accent); }
.store .co-option { border-radius: var(--r); border-width: 1px; }
.store .co-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-tint); }
.store .step-num { background: var(--accent-tint); color: var(--accent-strong); font-weight: 650; }
.store .sc-head h1, .store .co-head h1, .store .so-head h1, .store .sa-head h1 { font-size: 1.5rem; letter-spacing: -0.02em; }
.store .store-back { font-weight: 500; font-size: .8125rem; min-height: 36px; }
.store .so-steps li { font-weight: 500; }
.store .confirm-total strong { color: var(--ink); font-weight: 700; }
.store .so-check { box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 60%, transparent); }
@media (max-width: 899px) { .store .sc-head h1, .store .co-head h1, .store .so-head h1, .store .sa-head h1 { font-size: 1.3rem; } }

/* account */
.ac h1 { margin: 1rem 0 .75rem; font-size: 1.375rem; }
.ac-login h2 { margin: 0 0 .2rem; font-size: 1.0625rem; }
.ac-me { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; margin: 1rem 0; padding: 1rem; border-radius: var(--card-r); background: var(--surface); border: 1px solid var(--line); }
.ac-me h1 { margin: 0; font-size: 1.125rem; overflow-wrap: anywhere; }
.ac-me p { margin: 0; }
.ac-avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.125rem; font-weight: 750; }
.ac-orders h2 { margin: 1.25rem 0 .6rem; font-size: 1rem; }
.ac-menu { margin: 1.25rem 0 .75rem; border-radius: var(--card-r); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.ac-menu ul { list-style: none; margin: 0; padding: 0; }
.ac-menu li + li { border-top: 1px solid var(--line); }
.ac-menu li[hidden] { display: none; }
.ac-row { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 54px; padding: 0 1rem; border: 0; background: none; color: var(--ink); font: 550 .9375rem var(--font); text-align: left; text-decoration: none; cursor: pointer; transition: background-color .15s var(--ease); }
.ac-row:hover { background: var(--surface-soft); color: var(--ink); }
.ac-row:active { background: var(--surface-sunk); }
.ac-row > .icon:first-child { width: 21px; height: 21px; color: var(--accent); }
.ac-row > span:first-of-type { flex: 1; }
.ac-meta { color: var(--ink-3); font-size: .8125rem; }
.ac-chev { width: 18px; height: 18px; color: var(--ink-3); }
.ac-ios { margin-bottom: .75rem; padding: .8rem 1rem; border-radius: var(--card-r); background: var(--accent-tint); font-size: .8125rem; }
.ac-ios[hidden] { display: none; }
.ac-ios p { margin: 0; }
.ac-ios .icon { width: 16px; height: 16px; vertical-align: -3px; }
@media (min-width: 900px) { .ac { max-width: 760px; } }

/* about */
.sa { padding-top: .5rem; }

/* ================================================================ footer, toast, cart drawer */
.store-foot { margin-top: 1.5rem; padding: 1.1rem 0; background: var(--surface); border-top: 1px solid var(--line); }
.store-foot-inner { gap: .35rem; }
.store-foot-shop strong { font-size: .9375rem; color: var(--ink); }
.store-foot-shop p { font-size: .8125rem; }
.store-foot-links { gap: 0 1.25rem; }
.store-foot-links a { min-height: 40px; font-size: .8125rem; font-weight: 550; }
.store-powered { margin-top: .6rem; padding-bottom: .25rem; font-size: .75rem; }
@media (min-width: 900px) { .store-foot { margin-top: 3rem; padding: 2rem 0 1.5rem; } }
.store .store-toast { font-weight: 600; border-radius: 14px; }
.store .store-toast a { font-weight: 700; }
@media (max-width: 899px) {
  .store.has-tabs .store-toast { bottom: calc(var(--tab-h) + 14px + env(safe-area-inset-bottom)); }
  .store.bar-float .store-toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
}
.cart-drawer { position: fixed; inset: 0 0 0 auto; width: min(420px, 100vw); max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--surface); box-shadow: -20px 0 50px -20px rgb(16 24 40 / .35); display: none; flex-direction: column; transition: transform .4s var(--ease-drawer); }
.cart-drawer[open] { display: flex; }
@starting-style { .cart-drawer[open] { transform: translateX(100%); } }
.cart-drawer::backdrop { background: rgb(17 24 39 / .35); }
.cart-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.cart-drawer-head h2 { margin: 0; font-size: 1.125rem; }
.cart-drawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.cart-drawer-body .sc-line { grid-template-columns: 56px minmax(0, 1fr) auto; }
.cart-drawer-body .sc-thumb { width: 56px; height: 70px; }
.cart-drawer-body .sc-controls { display: none; }
.cart-drawer-foot { display: grid; gap: .5rem; padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.cart-drawer-sub { display: flex; justify-content: space-between; margin: 0 0 .25rem; color: var(--ink); font-weight: 650; }
.cart-drawer-sub strong { font-size: 1.125rem; }

/* page-to-page fade where the browser supports it (Chrome, Safari 18.2+) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }

/* ================================================================ fonts */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/dmsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, 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"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/dmsans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/playfair-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/playfair-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root[data-theme="violet"] { --accent: #6d28d9; --accent-strong: #5b21b6; --accent-tint: #f3eefe; --accent-tint-2: #e4d8fd; --focus: #6d28d9; }
:root[data-theme="amber"] { --accent: #b45309; --accent-strong: #92400e; --accent-tint: #fdf4e7; --accent-tint-2: #fbe3c1; --focus: #b45309; }
:root[data-theme="forest"] { --accent: #15803d; --accent-strong: #166534; --accent-tint: #eaf7ee; --accent-tint-2: #cdebd6; --focus: #15803d; }
:root[data-theme="charcoal"] { --accent: #1f2937; --accent-strong: #111827; --accent-tint: #f1f2f4; --accent-tint-2: #e1e3e7; --focus: #1f2937; }
body.store.font-friendly { --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-family: var(--font); }
body.store.font-elegant { --head: "Playfair Display", Georgia, serif; }
.store.font-elegant :is(.sb-name, .sp-spot-name, .pv-name) { font-weight: 600; }

/* ================================================================ Boutique (B): editorial — warm canvas, serif, square corners, big photos */
.layout-boutique { --canvas: #faf7f2; --surface: #fffdf9; --surface-soft: #f6f1e9; --surface-sunk: #f1ebe1; --line: #e7e0d5; --line-strong: #d6cdbf;
  --ink: #1c1917; --ink-2: #44403c; --ink-3: #78716c; --head: "Playfair Display", Georgia, serif; --card-r: 2px; --img-r: 2px; --btn-r: 2px; --r-sm: 2px; --r: 2px; --r-lg: 2px; }
.layout-boutique h1, .layout-boutique h2, .layout-boutique h3, .layout-boutique .sb-name, .layout-boutique .sb-title { font-weight: 500; letter-spacing: 0; }
.layout-boutique .sb-name { font-size: 1.25rem; }
.layout-boutique .sb-logo { border-radius: 2px; }
.layout-boutique .store .btn, .layout-boutique .btn { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }
.layout-boutique .hm-search input, .layout-boutique .sb-search input, .layout-boutique .se-form input, .layout-boutique .lf-search input { border-radius: 2px; }
.layout-boutique .hs-wrap { padding: 0; max-width: none; }
.layout-boutique .hs { padding-top: 0; margin-top: .75rem; }
.layout-boutique .hs-track, .layout-boutique .hs.has-phone .hs-track { border-radius: 0; aspect-ratio: 4 / 3; }
.layout-boutique .hm-cat-img { border-radius: 2px; width: 84px; height: 104px; box-shadow: none; border: 0; }
.layout-boutique .hm-cat { width: 84px; text-transform: uppercase; letter-spacing: .08em; font-size: .6875rem; }
.layout-boutique .hm-trust li { background: transparent; border-width: 0 0 1px; border-radius: 0; justify-content: center; text-align: center; }
.layout-boutique .sp-rail-head { flex-direction: column; align-items: center; gap: .15rem; text-align: center; }
.layout-boutique .sp-rail-head h2 { font-size: 1.5rem; }
.layout-boutique .sp-rail-head a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-transform: uppercase; letter-spacing: .08em; font-size: .6875rem; }
.layout-boutique .sp-rail-head a .icon { display: none; }
.layout-boutique .pc-grid { gap: 18px 10px; }
.layout-boutique .pc-link { border: 0; background: transparent; }
.layout-boutique .pc-media { aspect-ratio: 3 / 4; }
.layout-boutique .pc-body { padding: .5rem .1rem 0; }
.layout-boutique .pc-flag { border-radius: 0; background: var(--surface); color: var(--accent); }
.layout-boutique .pc-wish { background: transparent; color: #fff; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .4)); }
.layout-boutique .sp-chips a, .layout-boutique .lf-tool, .layout-boutique .lf-active a { border-radius: 2px; }
.layout-boutique .sp-chips a[aria-current="true"] { background: var(--ink); }
.layout-boutique .pv-pill span, .layout-boutique .lf-pill span { border-radius: 2px; }
.layout-boutique .pv-pill input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.layout-boutique .pv-info { border-radius: 0; }
.layout-boutique .pv-name { font-size: 1.625rem; }
.layout-boutique .tabbar a[aria-current="page"] { color: var(--ink); }
.layout-boutique .tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 28px; height: 2px; background: var(--ink); }
.layout-boutique .sheet-panel { border-radius: 0; }
@media (min-width: 900px) {
  .layout-boutique .sb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .layout-boutique .sb-brand { grid-column: 2; grid-row: 1; justify-self: center; }
  .layout-boutique .sb-search { grid-column: 1; grid-row: 1; max-width: 300px; }
  .layout-boutique .sb-actions { grid-column: 3; grid-row: 1; justify-self: end; }
  .layout-boutique .sb-cats > ul { justify-content: center; }
  .layout-boutique .sb-cats a, .layout-boutique .sb-cats button { text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; }
  .layout-boutique .hs-track, .layout-boutique .hs.has-phone .hs-track { aspect-ratio: 21 / 8; }
  .layout-boutique .hm-cat-row { justify-content: center; }
  .layout-boutique .hm-cat, .layout-boutique .hm-cat-img { width: 140px; }
  .layout-boutique .hm-cat-img { height: 175px; }
  .layout-boutique .pc-grid { gap: 36px 22px; }
}

/* ================================================================ Bright (C): shop colour across the top, rounded and playful */
.layout-bright { --canvas: #ffffff; --surface: #ffffff; --surface-soft: #f7f5fa; --surface-sunk: #f3f0f7; --line: #ece8f2; --card-r: 20px; --img-r: 14px; }
.layout-bright .sb { background: var(--accent); border-bottom: 0; }
.layout-bright .sb-name, .layout-bright .sb-title, .layout-bright .sb .sb-icon { color: #fff; }
.layout-bright .sb .sb-icon:hover { background: rgb(255 255 255 / .14); }
.layout-bright .sb-logo { background: #fff; color: var(--accent); }
.layout-bright .sb-count { background: #fbbf24; color: #1f1235; box-shadow: 0 0 0 2px var(--accent); }
.layout-bright .hm-search { margin-top: 0; padding-top: .25rem; padding-bottom: 1.1rem; background: var(--accent); border-radius: 0 0 26px 26px; }
.layout-bright .hm-search input { border: 0; border-radius: 16px; }
.layout-bright .hs-track { border-radius: 22px; }
.layout-bright .hm-cat-img { border-radius: 22px; box-shadow: none; border: 0; }
.layout-bright .hm-tint-1 { background: #e0f2fe; } .layout-bright .hm-tint-2 { background: #fef3c7; } .layout-bright .hm-tint-3 { background: #dcfce7; }
.layout-bright .hm-trust li { background: var(--accent-tint); border: 0; border-radius: 14px; color: var(--ink); }
.layout-bright .sp-rail-head h2 { font-weight: 800; }
.layout-bright .pc-link { border: 0; background: var(--surface-soft); }
.layout-bright .pc-media { margin: 6px 6px 0; }
.layout-bright .pc-body { padding: .45rem .75rem .8rem; }
.layout-bright .pc-price strong { font-weight: 800; }
.layout-bright .pc-flag { background: #15803d; color: #fff; }
.layout-bright .sp-chips a[aria-current="true"] { background: var(--accent); border-color: var(--accent); }
.layout-bright .pv-pill input:checked + span { background: var(--accent); color: #fff; }
.layout-bright .store .btn, .layout-bright .btn { border-radius: 16px; }
.layout-bright .btn-secondary { border: 0; background: var(--surface-sunk); }
.layout-bright .ct-tile, .layout-bright .ac-menu, .layout-bright .ac-me { border: 0; background: var(--surface-soft); }
@media (max-width: 899px) {
  .layout-bright.has-tabs { padding-bottom: calc(var(--tab-h) + 24px + env(safe-area-inset-bottom)); }
  .layout-bright .tabbar { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); height: var(--tab-h); padding: 0; border: 0; border-radius: 32px; background: #1f1235; box-shadow: 0 10px 30px -10px rgb(31 18 53 / .6); }
  .layout-bright .tabbar a { color: rgb(255 255 255 / .62); }
  .layout-bright .tabbar a[aria-current="page"] { color: #fff; }
  .layout-bright .tabbar a[aria-current="page"] .icon { padding: 3px 7px; width: 37px; height: 29px; border-radius: 12px; background: var(--accent); }
  .layout-bright .tabbar a[aria-current="page"] .i-fill { display: none; }
  .layout-bright .tabbar .sb-count { box-shadow: 0 0 0 2px #1f1235; }
  .layout-bright .sc-paybar { bottom: calc(var(--tab-h) + 18px + env(safe-area-inset-bottom)); border-radius: 20px; margin-inline: 12px; border: 1px solid var(--line); }
  .layout-bright.has-tabs .store-toast { bottom: calc(var(--tab-h) + 28px + env(safe-area-inset-bottom)); }
}
@media (min-width: 900px) {
  .layout-bright .sb-cats { border-top-color: rgb(255 255 255 / .18); }
  .layout-bright .sb-cats a, .layout-bright .sb-cats button { color: rgb(255 255 255 / .85); }
  .layout-bright .sb-cats a:hover, .layout-bright .sb-cats button:hover, .layout-bright .sb-cats button[aria-expanded="true"] { color: #fff; box-shadow: inset 0 -2px 0 #fff; }
  .layout-bright .sb-menu a { color: var(--ink-2); }
  .layout-bright .sb-sale a { color: #fde68a; }
  .layout-bright .sb-search input { background: #fff; border-color: transparent; }
  .layout-bright .hm-cat-img { width: 120px; height: 120px; }
  .layout-bright .hm-cat { width: 120px; }
}

/* ================================================================ Minimal: quiet, borderless, dense */
.layout-minimal { --card-r: 8px; --img-r: 8px; }
.layout-minimal .hm-trust, .layout-minimal .sp-spot { display: none; }
.layout-minimal .hm-cat-img { width: 56px; height: 56px; }
.layout-minimal .hm-cat { width: 64px; }
.layout-minimal .hs-track { border-radius: 8px; }
.layout-minimal .pc-grid { gap: 14px 8px; }
.layout-minimal .pc-link { border: 0; background: transparent; }
.layout-minimal .pc-link:hover { box-shadow: none; }
.layout-minimal .pc-media { aspect-ratio: 1; }
.layout-minimal .pc-body { padding: .4rem 0 0; }
.layout-minimal .pc-name { font-size: .75rem; }
.layout-minimal .pc-price strong { font-size: .8125rem; }
@media (min-width: 700px) { .layout-minimal .pc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 14px; } }
@media (min-width: 1040px) { .layout-minimal .pc-grid, .layout-minimal .lf-main .pc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ================================================================ Food menu: menu rows (photo on the right), veg marks, sticky tabs */
.layout-food .hm-new, .layout-food .sp-spot, .layout-food .sp-rail[aria-labelledby^="rail-c"] { display: none; }
.layout-food .sp-chips a { border-radius: 8px; }
.layout-food :is(.hm-all, .lf-main, .wl, .se) .pc-grid { grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-r); overflow: hidden; }
.layout-food :is(.hm-all, .lf-main, .wl, .se) .pc-grid > li + li { border-top: 1px solid var(--line); }
.layout-food :is(.hm-all, .lf-main, .wl, .se) .pc-link { flex-direction: row-reverse; align-items: flex-start; gap: .85rem; padding: .85rem; border: 0; border-radius: 0; background: transparent; }
.layout-food :is(.hm-all, .lf-main, .wl, .se) .pc-link:hover { box-shadow: none; background: var(--surface-soft); }
.layout-food :is(.hm-all, .lf-main, .wl, .se) .pc-media { flex: none; width: 104px; aspect-ratio: 1; border-radius: 12px; }
.layout-food :is(.hm-all, .lf-main, .wl, .se) .pc-body { flex: 1; padding: 0 2.25rem 0 0; gap: .2rem; min-width: 0; }
.layout-food :is(.hm-all, .lf-main, .wl, .se) .pc-name { font-size: .9375rem; font-weight: 650; color: var(--ink); -webkit-line-clamp: 3; }
.layout-food :is(.hm-all, .lf-main, .wl, .se) .pc-wish { top: .7rem; right: auto; left: calc(100% - 104px - .85rem - 42px); background: var(--surface-sunk); }
.layout-food :is(.hm-all, .lf-main, .wl, .se) .pc-food { left: auto; right: 6px; bottom: 6px; }
@media (min-width: 900px) {
  .layout-food :is(.hm-all, .lf-main, .wl, .se) .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-food :is(.hm-all, .lf-main, .wl, .se) .pc-grid > li:nth-child(2) { border-top: 0; }
  .layout-food :is(.hm-all, .lf-main, .wl, .se) .pc-grid > li:nth-child(odd) { border-right: 1px solid var(--line); }
  .layout-food :is(.hm-all, .lf-main, .wl, .se) .pc-media { width: 128px; }
  .layout-food :is(.hm-all, .lf-main, .wl, .se) .pc-wish { left: calc(100% - 128px - .85rem - 42px); }
}

/* ================================================================ M17: return / exchange request + status on the order page */
.rt-page .rt-form { margin-top: 1rem; }
.rt-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.rt-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: .8rem; align-items: start; }
.rt-item.is-off { opacity: .6; }
.rt-item-body { display: grid; gap: .15rem; min-width: 0; }
.rt-pick { display: grid; gap: .6rem; margin-top: .5rem; }
.rt-pick .field { margin: 0; }
.rt-form .rt-swap { display: none; }
.rt-form:has(input[name="kind"][value="exchange"]:checked) .rt-swap { display: grid; }
@media (min-width: 600px) { .rt-pick { grid-template-columns: 140px minmax(0, 1fr); } }
.rt-note { margin-top: 1rem; }
.rt-policy p { margin: 0; }
.rt-status { display: grid; gap: .75rem; }
.rt-status h2 { margin-bottom: 0; }
.rt-req { display: grid; gap: .3rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.rt-req:last-of-type { border-bottom: 0; padding-bottom: 0; }
.rt-req-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .75rem; margin: 0; }
.rt-req p { margin: 0; }
.rt-until { margin: -.4rem 0 0; text-align: center; }
.so-exchange-of { margin: 0; }

/* ================================================================ M18: your data / delete my account */
.sa-data .btn-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.sa-data p { margin: .2rem 0 .75rem; }
.store .sa-delete { color: var(--bad); }
.dl-page .co-card + .co-card, .dl-page .co-card + .btn { margin-top: 1rem; }
.dl-list { margin: 0 0 .75rem; padding-left: 1.1rem; display: grid; gap: .45rem; font-size: .9375rem; }
.dl-wait { padding: .6rem .8rem; border-radius: 12px; background: var(--warn-bg, #fff7e6); }
.dl-resend { margin-top: .5rem; text-align: center; }
.store .alert-body > p { margin: 0 0 .5rem; }
.store .sc-lines + .sa-section, .store .sc-empty + .sa-section { margin-top: .75rem; }

/* ================================================================ reduced motion: fades only */
@media (prefers-reduced-motion: reduce) {
  .store *, .store *::before { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  @view-transition { navigation: none; }
}