@font-face { font-family: 'League Gothic'; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 175%; src: url('/assets/fonts/league-gothic-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+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: 'League Gothic'; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 175%; src: url('/assets/fonts/league-gothic-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/outfit-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+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: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/outfit-latin-ext-wght-normal.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; }
/* Jay's Catalog storefront.
   Sizes come straight from the Canva layout (1366px artboard). 1rem = 10px at full width
   and the whole page scales down proportionally on narrower screens. */
:root {
  --ink: #000;
  --dark: #222;
  --muted: #737373;
  --soft: #b4b4b4;
  --line: #d9d9d9;
  --tile: #a6a6a6;
  --panel: #ebebeb;
  --accent: #454ec2;
  --green: #00bf63;
  --red: #ff5757;
  --white: #fff;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: min(10px, calc(100vw / 136.6)); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Outfit', system-ui, sans-serif; font-size: 2.4rem; line-height: 1.375; color: var(--ink); background: var(--white); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 0.3rem solid var(--accent); outline-offset: 0.3rem; }
.wrap { width: 100%; max-width: 136.6rem; margin: 0 auto; padding: 0 7.7rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- header ---------- */
.site-header { height: 9.7rem; background: var(--white); position: relative; z-index: 20; }
.site-header .logo { flex: none; display: flex; align-items: center; height: 100%; margin-right: 4rem; }
.site-header .logo img { height: 5.6rem; width: auto; max-width: 22rem; object-fit: contain; }
.site-header .logo ~ .nav-right { margin-left: auto; }
.site-header .wrap:has(.logo) { justify-content: flex-start; }
.site-header.ruled { border-bottom: 0.2rem solid var(--line); }
.site-header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; padding-top: 0.5rem; }
.nav { display: flex; align-items: center; gap: 3.6rem; }
.nav a, .nav button { font-size: 2.4rem; line-height: 3.3rem; }
.nav [aria-current='page'] { font-weight: 700; }
.nav a:hover, .nav button:hover { color: var(--accent); }
.nav-right { gap: 3.8rem; }
.icon-btn { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; }
.icon-btn svg { width: 100%; height: 100%; }
.cart-link { position: relative; display: block; width: 6.8rem; height: 5.1rem; margin-top: -1.6rem; }
.cart-link svg { position: absolute; left: 0; bottom: 0; width: 3.7rem; height: 3.5rem; }
.cart-count { position: absolute; right: 0; top: 0; min-width: 2.8rem; height: 2.8rem; padding: 0 0.6rem; border-radius: 1.4rem; background: var(--accent); color: var(--white); font-size: 1.33rem; font-weight: 800; display: grid; place-items: center; line-height: 1; }
.dropdown { position: relative; }
.menu { position: absolute; left: -2.6rem; top: calc(100% + 2rem); min-width: 16.4rem; background: var(--white); border-radius: 1rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3); padding: 2rem; z-index: 30; }
.menu a { display: block; font-size: 2.4rem; line-height: 4.2rem; white-space: nowrap; }
.menu-toggle { display: none; }

/* ---------- shared pieces ---------- */
/* Headings use League Gothic. It is a narrow face, so the font itself is scaled up 175% (size-adjust above) and given room to breathe. */
h1, h2 { font-family: 'League Gothic', 'Outfit', system-ui, sans-serif; font-weight: 400 !important; letter-spacing: 0.02em; line-height: 1.75 !important; overflow-wrap: anywhere; }
.section-title { margin: 0; font-size: 3.2rem; line-height: 4.4rem; font-weight: 700; text-align: center; text-transform: uppercase; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 6.3rem; padding: 0 2.6rem; border-radius: 1.5rem; background: var(--accent); color: #fafafa; font-size: 2.67rem; font-weight: 700; white-space: nowrap; transition: filter 0.15s; }
.btn:hover { filter: brightness(1.1); }
.btn[disabled], .btn.off { background: var(--tile); color: var(--white); cursor: not-allowed; filter: none; }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; height: 5.1rem; padding: 0 6rem; border: 0.1rem solid var(--muted); border-radius: 2.6rem; color: var(--muted); font-size: 2.67rem; }
.btn-outline:hover { border-color: var(--ink); color: var(--ink); }
.search { position: relative; display: block; }
.search input { width: 100%; height: 100%; border: 0.1rem solid var(--muted); border-radius: 99rem; background: var(--white); padding: 0 2rem 0 6rem; font-size: 2.4rem; outline-offset: 0; }
.search input::placeholder { color: var(--muted); opacity: 1; }
.search svg { position: absolute; left: 2rem; top: 50%; width: 2.5rem; height: 2.5rem; transform: translateY(-50%); color: var(--ink); pointer-events: none; }
.empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 6rem 0; }
.note { color: var(--muted); font-size: 1.87rem; line-height: 2.6rem; }

/* product card */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { position: relative; display: block; min-width: 0; } /* min-width lets a long product name wrap instead of stretching the grid */
.card .tile { display: block; position: relative; aspect-ratio: 1; border-radius: 1.5rem; background: var(--tile); overflow: hidden; }
.card .tile img { width: 100%; height: 100%; object-fit: cover; }
.card .info { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.card h3 { margin: 0; font-weight: 700; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.card p { margin: 0; }
.card .text { min-width: 0; flex: 1; }
/* Add to cart on a card: a small outlined round button that fills on hover or press. */
.card .add { flex: none; display: grid; place-items: center; width: 4.4rem; height: 4.4rem; min-width: 32px; min-height: 32px; margin-top: 0.4rem; border: 0.15rem solid var(--accent); border-radius: 50%; background: var(--white); color: var(--accent); }
.card .add svg { width: 55%; height: 55%; margin: 0; }
.card .add:hover, .card .add:active { background: var(--accent); color: var(--white); }
.badge { position: absolute; display: inline-flex; white-space: nowrap; align-items: center; border-radius: 99rem; color: #fafafa; font-weight: 700; text-transform: uppercase; background: var(--accent); }
.badge.out { background: var(--red); }

/* ---------- home ---------- */
.hero { height: 60.8rem; background: var(--dark) center / cover no-repeat; }
.process { padding: 6.4rem 0 8.6rem; text-align: center; }
.steps { display: flex; justify-content: center; align-items: flex-start; margin: 5.5rem 0 0; padding: 0; list-style: none; }
.step { width: 17.3rem; }
.step svg { height: 10rem; width: 10rem; margin: 0 auto 1.9rem; display: block; }
.step span { display: block; font-weight: 700; font-size: 2.4rem; line-height: 3.3rem; white-space: nowrap; }
.steps .dash { width: 6.3rem; height: 0.4rem; border-radius: 0.2rem; background: var(--ink); margin: 5.6rem -1.2rem 0; flex: none; }
.status-pill { display: inline-flex; align-items: center; height: 6.4rem; padding: 0 3.6rem; margin-top: 7.7rem; border-radius: 3.2rem; color: var(--white); font-size: 2.93rem; font-weight: 700; background: var(--green); }
.status-pill.closed { background: var(--red); }
.featured { background: var(--panel); padding: 9rem 0 9.1rem; }
.featured .search { width: 34.9rem; height: 5.1rem; margin-top: 5.8rem; }
.featured .grid { gap: 6.6rem 4.35rem; margin-top: 5.3rem; }
.featured .card .info { margin-top: 2.3rem; }
.featured .card h3, .featured .card p { font-size: 2.93rem; line-height: 4.1rem; }

.featured .badge { top: 2rem; right: 2rem; height: 3.7rem; padding: 0 1.4rem; font-size: 2.67rem; }
.featured .more { display: flex; justify-content: center; margin-top: 11.2rem; }

/* ---------- catalog ---------- */
.catalog { padding: 7.3rem 0 10rem; }
.catalog .inner { padding: 0 7rem; }
.catalog .tools { display: flex; align-items: center; gap: 1.5rem; margin-top: 4.6rem; position: relative; }
.catalog .search { width: 30.9rem; height: 4.5rem; }
.catalog .search input { border-color: var(--soft); padding-left: 5.3rem; }
.catalog .search input::placeholder { color: var(--muted); }
.catalog .search svg { left: 1.8rem; width: 2.2rem; height: 2.2rem; }
.filter-btn { width: 3rem; height: 3rem; }
.filter-btn svg { width: 100%; height: 100%; }
.filter-btn.on { color: var(--accent); }
.filter-menu { position: absolute; left: 32.4rem; top: 4.7rem; min-width: 14rem; background: var(--white); border-radius: 0.85rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3); padding: 1.4rem 1.5rem; z-index: 10; }
.filter-menu label { display: flex; align-items: center; gap: 1rem; font-size: 2rem; line-height: 3.4rem; cursor: pointer; white-space: nowrap; }
.filter-menu input { appearance: none; width: 2rem; height: 2rem; margin: 0; border-radius: 0.5rem; background: var(--line) center / 1.5rem no-repeat; flex: none; cursor: pointer; }
.filter-menu input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M2 8.5l5.5 5L18 2.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.catalog .grid { gap: 5.8rem 3.8rem; margin-top: 4.8rem; }
.catalog .card .info { margin-top: 2rem; }
.catalog .card h3, .catalog .card p { font-size: 2.6rem; line-height: 3.6rem; }

.catalog .badge { top: 1.7rem; right: 1.7rem; height: 3.3rem; padding: 0 1.2rem; font-size: 2.37rem; }

/* ---------- product ---------- */
.product { padding: 7.4rem 0 14.8rem; }
.product .inner { padding: 0 10.6rem; }
.back { display: inline-flex; align-items: center; gap: 1rem; color: var(--muted); font-size: 2.4rem; line-height: 2.8rem; }
.back svg { width: 1.5rem; height: 2.8rem; }
.back:hover { color: var(--ink); }
.product .cols { display: flex; gap: 2.4rem; margin-top: 2.3rem; }
.product .photo { width: 50rem; height: 50rem; flex: none; border-radius: 1.5rem; background: var(--line); overflow: hidden; }
.product .photo img { width: 100%; height: 100%; object-fit: cover; }
.product .details { flex: 1; min-width: 0; max-width: 46rem; }
.product h1 { margin: 0; font-size: 2.93rem; line-height: 3.5rem; font-weight: 700; }
.product .desc { margin: 1rem 0 0; font-size: 1.87rem; line-height: 2.7rem; white-space: pre-line; min-height: 8.3rem; max-width: 37.1rem; }
.label { margin: 8.5rem 0 0; color: var(--muted); font-size: 1.87rem; line-height: 2.2rem; text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: 1.65rem; margin-top: 1.3rem; }
.chip { min-width: 10rem; height: 4.7rem; padding: 0 1.4rem; border: 0.1rem solid var(--muted); border-radius: 1rem; color: var(--muted); font-size: 2.13rem; }
.chip[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--white); }
.chip:disabled { text-decoration: line-through; opacity: 0.55; cursor: not-allowed; }
.product .price { margin: 4.8rem 0 0; font-size: 3.2rem; line-height: 3.8rem; font-weight: 700; }
.product .actions .btn { height: 5.6rem; padding: 0 2.4rem; font-size: 2.4rem; }
.product .no-var .price { margin-top: 8.5rem; }
.product .actions { margin-top: 1.3rem; display: flex; align-items: center; gap: 1.6rem; }
.stock-note { color: var(--muted); font-size: 1.87rem; }

/* ---------- cart ---------- */
.cart { padding: 10.8rem 0 15.3rem; }
.cart .inner { padding: 0 10.8rem; }
.cart-row { display: flex; align-items: center; gap: 2.8rem; padding: 2.7rem 2.7rem; border-bottom: 0.2rem solid var(--line); }
.cart-row .thumb { width: 12.5rem; height: 12.5rem; flex: none; border-radius: 1rem; background: var(--line); overflow: hidden; }
.cart-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-row .meta { flex: 1; min-width: 0; }
.cart-row h3 { margin: 0; font-size: 2.93rem; line-height: 3.5rem; font-weight: 700; }
.cart-row .var { margin: 1.4rem 0 0; color: var(--muted); font-size: 1.87rem; line-height: 2.2rem; text-transform: uppercase; }
.cart-row .warn { margin: 0.6rem 0 0; color: var(--red); font-size: 1.87rem; }
.cart-row .side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.9rem; }
.cart-row .amount { font-size: 2.67rem; line-height: 3.2rem; font-weight: 700; }
.qty { display: flex; align-items: center; }
.qty button { width: 3.5rem; height: 3.5rem; }
.qty button svg { width: 100%; height: 100%; }
.qty button:hover { color: var(--accent); }
.qty output { width: 7.5rem; text-align: center; font-weight: 700; font-size: 2.4rem; }
.cart-foot { display: flex; justify-content: flex-end; align-items: center; gap: 3rem; margin-top: 7.9rem; padding-right: 2.7rem; }
.cart-foot .sum { font-size: 2.4rem; }
.cart-foot .sum b { font-size: 2.67rem; margin-left: 1rem; }

/* ---------- checkout / track / order / text pages ---------- */
.page { padding: 7.4rem 0 12rem; }
.page .inner { padding: 0 10.8rem; }
.page h1 { margin: 0 0 4.6rem; font-size: 3.2rem; line-height: 4.4rem; font-weight: 700; text-transform: uppercase; text-align: center; }
.two-col { display: grid; grid-template-columns: 1fr 42rem; gap: 6rem; align-items: start; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem 2rem; }
.form .full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 0.8rem; color: var(--muted); font-size: 1.87rem; line-height: 2.2rem; text-transform: uppercase; }
.field input, .field textarea { width: 100%; height: 5.4rem; border: 0.1rem solid var(--muted); border-radius: 1rem; padding: 0 1.6rem; font-size: 2.13rem; background: var(--white); }
.field textarea { height: 11rem; padding: 1.2rem 1.6rem; resize: vertical; }
.summary { background: var(--panel); border-radius: 1.5rem; padding: 3rem; }
.summary h2 { margin: 0 0 2rem; font-size: 2.4rem; font-weight: 700; }
.summary .line { display: flex; justify-content: space-between; gap: 2rem; font-size: 2.13rem; line-height: 2.9rem; padding: 0.6rem 0; }
.summary .line small { display: block; color: var(--muted); font-size: 1.73rem; text-transform: uppercase; }
.summary .total { border-top: 0.2rem solid var(--line); margin-top: 1.6rem; padding-top: 1.8rem; font-weight: 700; font-size: 2.4rem; }
.summary .btn { width: 100%; margin-top: 2.4rem; }
.code-row { margin: 1.8rem 0 0.6rem; }
.code-input { display: flex; gap: 1rem; }
.code-input input { flex: 1; min-width: 0; text-transform: uppercase; }
.code-input .chip { min-width: 9rem; height: 5.4rem; background: var(--white); border-color: var(--ink); color: var(--ink); }
.code-row .note { margin: 0.8rem 0 0; }
.code-row .note.bad { color: #d63a3a; }
.summary .line.less { color: #087a43; }
.order-list { list-style: none; margin: 0; padding: 0; }
.order-list a { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 2rem; padding: 2.2rem 0; border-bottom: 0.2rem solid var(--line); font-size: 2.13rem; }
.order-list a:hover b { color: var(--accent); }
.order-list b { font-size: 2.4rem; }
.order-list .sub { color: var(--muted); font-size: 1.87rem; }
.order-list .right { text-align: right; }
.account-bar { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; font-size: 2.13rem; }
.link-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: underline; color: var(--muted); font-size: 2rem; min-height: 44px; }
.error { color: var(--red); font-size: 2rem; margin: 1.6rem 0 0; }
.narrow { max-width: 62rem; margin: 0 auto; }
.narrow .form { grid-template-columns: 1fr; }
.narrow .btn { justify-self: start; }
.banner { border-radius: 1.5rem; padding: 2rem 2.6rem; margin-bottom: 3.4rem; font-size: 2.13rem; background: var(--panel); }
.banner.good { background: #e3f7ec; }
.banner.due { background: #eceefb; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
/* Order progress as words: done stages in black, the current one bold, the rest grey. */
.stages { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 0; margin: 0 0 4rem; padding: 0; list-style: none; font-size: 1.87rem; line-height: 3rem; text-transform: uppercase; letter-spacing: 0.02em; text-align: center; }
.stages li { color: var(--muted); white-space: nowrap; }
.stages li:not(:last-child)::after { content: '—'; margin: 0 1rem; color: var(--soft); font-weight: 400; }
.stages li.done { color: var(--ink); }
.stages li.now { color: var(--ink); font-weight: 700; }
.tracking { margin: -1.6rem 0 4rem; text-align: center; font-size: 2.13rem; line-height: 3rem; }
.tracking span { color: var(--muted); }
.tracking b { margin-left: 0.6rem; overflow-wrap: anywhere; }
.tracking .link-btn { min-height: 0; margin-left: 0.8rem; }
.steps.track-steps { margin: 0 0 5rem; }
.track-steps .step { opacity: 0.3; }
.track-steps .step.done { opacity: 1; }
.track-steps .dash { opacity: 0.3; }
.track-steps .dash.done { opacity: 1; }
.kv { display: grid; grid-template-columns: 16rem 1fr; gap: 0.8rem 2rem; font-size: 2.13rem; margin: 0; }
.kv dt { color: var(--muted); font-size: 1.87rem; text-transform: uppercase; padding-top: 0.3rem; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.prose { max-width: 90rem; margin: 0 auto; font-size: 2.13rem; line-height: 3.2rem; }
.prose h2 { margin: 4.6rem 0 1.2rem; font-size: 2.67rem; line-height: 3.4rem; }
.prose p { margin: 0 0 1.6rem; }
.prose ul { margin: 0 0 1.6rem; padding-left: 2.8rem; }
.prose li { margin-bottom: 0.8rem; }
.btn.danger-btn { background: var(--white); color: #d63a3a; border: 0.1rem solid #f3c2c2; }
.copyright span { display: inline-block; }
.copyright #f-seller:not(:empty) { margin-left: 0.4em; }
.consent { display: flex; gap: 1.2rem; align-items: flex-start; font-size: 1.87rem; line-height: 2.6rem; color: var(--muted); cursor: pointer; }
.consent { min-height: 44px; align-items: center; }
.consent input { width: max(2.4rem, 22px); height: max(2.4rem, 22px); margin: 0; flex: none; accent-color: var(--accent); }
.consent a, .legal a { text-decoration: underline; }
.legal { margin: 1.4rem 0 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--dark); color: var(--white); }
.site-footer .wrap { padding: 0; }
.foot-main { display: grid; grid-template-columns: 43.5rem 29.9rem 36.7rem 1fr; padding: 10.5rem 4.5rem 11.6rem; border-bottom: 0.2rem solid #545454; }
.foot-main ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2.9rem; align-content: start; }
.foot-main li, .foot-main a { font-size: 2rem; line-height: 2.6rem; }
.foot-main a:hover { text-decoration: underline; }
.contact li { display: flex; align-items: center; gap: 2.4rem; }
.contact svg { width: 3rem; height: 3rem; flex: none; }
.foot-main .track { font-size: 2.4rem; line-height: 3rem; font-weight: 700; }
.copyright { margin: 0; padding: 4.1rem 2rem; text-align: center; color: var(--muted); font-size: 1.87rem; line-height: 2.6rem; }

/* ---------- loading skeletons and motion ---------- */
.sk { background: linear-gradient(90deg, #e4e4e4 25%, #f1f1f1 37%, #e4e4e4 63%); background-size: 400% 100%; animation: sk 1.4s ease infinite; color: transparent !important; }
.featured .sk { background-image: linear-gradient(90deg, #dcdcdc 25%, #e8e8e8 37%, #dcdcdc 63%); }
.sk-line { height: 2.6rem; border-radius: 0.8rem; margin: 0.8rem 0; }
@keyframes sk { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
@keyframes rise { from { opacity: 0; transform: translateY(0.8rem); } to { opacity: 1; transform: none; } }
.grid > .card:not([aria-hidden]), .cart-row:not([aria-hidden]), #view > *, .cols > .details { animation: rise 0.28s ease both; }
.card .tile img { transition: transform 0.35s ease; }
.card:hover .tile img { transform: scale(1.04); }
.btn, .chip, .btn-outline, .card .add, .qty button { transition: filter 0.15s, transform 0.1s, background-color 0.15s, color 0.15s, border-color 0.15s; }
.btn:active:not([disabled]), .chip:active:not(:disabled), .card .add:active, .qty button:active { transform: scale(0.96); }
.grid[aria-busy='true'] { opacity: 0.55; transition: opacity 0.15s; }
.site-header:empty { border-bottom: 0.2rem solid transparent; }

/* ---------- pay by QR Ph ---------- */
.qr-pay { display: grid; grid-template-columns: 34rem 1fr; gap: 4.6rem; align-items: start; background: var(--panel); border-radius: 1.5rem; padding: 3.4rem; margin-bottom: 4rem; }
.qr-img { text-align: center; }
.qr-img img { width: 100%; height: auto; border-radius: 1.2rem; background: var(--white); }
.qr-steps h2 { margin: 0; font-size: 2.67rem; line-height: 3.4rem; }
.qr-amount { margin: 0.6rem 0 2rem; font-size: 4.4rem; line-height: 5rem; font-weight: 800; color: var(--accent); }
.qr-steps ol { margin: 0 0 2.4rem; padding-left: 2.8rem; font-size: 2.13rem; line-height: 3rem; }
.qr-steps li { margin-bottom: 1rem; }
.qr-steps .banner { margin-bottom: 2rem; }
.banner.bad { background: #ffe3e3; }
.proof .code-input .chip { background: var(--accent); border-color: var(--accent); color: var(--white); font-weight: 700; padding: 0 2.2rem; }

/* ---------- mini cart drawer ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 70; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(46rem, 100vw); background: var(--white); z-index: 71; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s ease; box-shadow: -1rem 0 3rem rgba(0, 0, 0, 0.18); }
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 2.6rem 3rem; border-bottom: 0.2rem solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 2.67rem; }
.drawer-body { flex: 1; overflow-y: auto; padding: 0 3rem; }
.drawer-body .cart-row { padding: 2rem 0; }
.mini-row { display: flex; gap: 2rem; align-items: center; padding: 2rem 0; border-bottom: 0.2rem solid var(--line); }
.mini-row .thumb { width: 9rem; height: 9rem; flex: none; border-radius: 1rem; background: var(--line); overflow: hidden; }
.mini-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.mini-row .meta { flex: 1; min-width: 0; display: grid; gap: 0.3rem; font-size: 2rem; }
.mini-row .meta b { font-size: 2.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-row .var { color: var(--muted); font-size: 1.73rem; text-transform: uppercase; }
.mini-row .warn { color: #d63a3a; font-size: 1.87rem; }
.drawer-foot { padding: 2.4rem 3rem 3rem; border-top: 0.2rem solid var(--line); display: grid; gap: 1.4rem; }
.drawer-total { display: flex; justify-content: space-between; margin: 0; font-size: 2.4rem; }
.drawer-foot .btn, .drawer-foot .btn-outline { width: 100%; padding: 0 2rem; }
.drawer-foot .btn-outline { height: 5.6rem; border-radius: 1.5rem; }

/* ---------- product gallery and quantity ---------- */
.gallery { flex: none; width: 50rem; }
.thumbs { display: flex; gap: 1.2rem; margin-top: 1.4rem; flex-wrap: wrap; }
.thumb-btn { width: 8.6rem; height: 8.6rem; border-radius: 1rem; overflow: hidden; background: var(--line); border: 0.3rem solid transparent; padding: 0; }
.thumb-btn[aria-pressed='true'] { border-color: var(--accent); }
.thumb-btn img { width: 100%; height: 100%; object-fit: cover; }
.product .actions .qty output { width: 5.4rem; }
.product .stock-note { margin: 1.2rem 0 0; min-height: 2.6rem; }
.qty button:disabled { opacity: 0.3; cursor: not-allowed; }

/* ---------- cart extras ---------- */
.cart-row h3 a:hover { color: var(--accent); }
.cart-row .remove { min-height: 44px; margin-top: 0.2rem; font-size: 1.87rem; justify-content: flex-start; }
.cart-row h3 a { display: inline-block; padding: 0.6rem 0; }
.cart-foot { align-items: flex-start; justify-content: space-between; }
.cart-foot .code-row { margin: 0; width: 38rem; max-width: 100%; }
.cart-total { display: grid; justify-items: end; gap: 1.2rem; }
.cart-total .sum { margin: 0; }
.cart-total .btn { margin-top: 1rem; }
.who { margin: -2.6rem 0 3.4rem; text-align: center; }

/* ---------- account ---------- */
.tabs { display: flex; gap: 0; margin-bottom: 3.4rem; border-bottom: 0.2rem solid var(--line); }
.tabs button { flex: 1; padding: 1.6rem 1rem; font-size: 2.4rem; color: var(--muted); border-bottom: 0.4rem solid transparent; margin-bottom: -0.2rem; min-height: 44px; }
.tabs button[aria-selected='true'] { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }
.sub-title { margin: 6rem 0 2.4rem; font-size: 2.67rem; line-height: 3.4rem; }
.form.two { grid-template-columns: 1fr 1fr; }
.form .full { grid-column: 1 / -1; }
.inline-form { grid-template-columns: 1fr auto; align-items: end; margin-top: 3rem; background: var(--panel); border-radius: 1.5rem; padding: 2.4rem; }
.inline-form .btn { height: 5.4rem; font-size: 2.13rem; }

/* ---------- order conversation ---------- */
.chat { margin-top: 6rem; }
.chat h2 { margin: 0 0 0.6rem; font-size: 2.67rem; }
.chat > .note { margin: 0 0 2rem; }
.chat-log { background: var(--panel); border-radius: 1.5rem; padding: 2.4rem; height: 46rem; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 1.4rem; }
.chat-log .empty { padding: 0; margin: auto; }
.bubble { max-width: 78%; padding: 1.4rem 1.8rem; border-radius: 1.8rem; font-size: 2.13rem; line-height: 2.9rem; background: var(--white); align-self: flex-start; border-bottom-left-radius: 0.5rem; }
.bubble.mine { align-self: flex-end; background: var(--accent); color: var(--white); border-bottom-left-radius: 1.8rem; border-bottom-right-radius: 0.5rem; }
.bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble img { max-width: min(32rem, 100%); border-radius: 1.2rem; margin-bottom: 0.8rem; }
.bubble time { display: block; margin-top: 0.4rem; font-size: 1.6rem; opacity: 0.7; }
.chat-form { display: flex; align-items: flex-end; gap: 1.2rem; margin-top: 1.6rem; }
.chat-form textarea { flex: 1; min-height: 5.4rem; max-height: 16rem; border: 0.1rem solid var(--muted); border-radius: 1rem; padding: 1.3rem 1.6rem; font-size: max(2.13rem, 16px); resize: vertical; }
.chat-form .btn { width: 6rem; height: 5.4rem; min-height: 44px; min-width: 44px; padding: 0; flex: none; }
.chat-form .btn svg { width: 2.6rem; height: 2.6rem; }
.chat-form .attach { width: 4.4rem; height: 5.4rem; cursor: pointer; flex: none; }
.chat-form .attach svg { width: 3.4rem; height: 3.4rem; }

/* ---------- page-to-page fade, so moving around feels like one app (browsers that support it) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.14s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- pay to the store's own accounts: method chooser, QR, proof upload ---------- */
.pay-card { max-width: 62rem; margin: 0 auto 4rem; padding: 3.4rem; background: var(--panel); border-radius: 1.5rem; text-align: center; }
.pay-card h2 { margin: 0; font-size: 2.67rem; line-height: 3.4rem; }
.pay-card .banner { margin-bottom: 2rem; text-align: left; }
.pay-select { width: 100%; height: 6rem; min-height: 48px; padding: 0 2rem; border: 0.1rem solid var(--muted); border-radius: 1.2rem; background: var(--white); font: inherit; font-size: max(2.2rem, 16px); font-weight: 700; text-align: center; text-align-last: center; }
.qr-box { margin: 1.8rem 0 0.6rem; padding: 1.6rem; border: 0.1rem solid var(--soft); border-radius: 1.5rem; background: var(--white); }
.qr-box img { display: block; width: 100%; height: auto; border-radius: 0.8rem; }
.qr-box.empty { display: grid; place-items: center; min-height: 24rem; color: var(--muted); font-size: 2rem; line-height: 2.8rem; padding: 3rem; }
.qr-box.empty p { margin: 0; }
.pay-info { margin: 1.4rem 0; display: grid; gap: 0.8rem; text-align: left; font-size: 2.13rem; line-height: 3rem; }
.pay-info div { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 0.8rem 0; border-bottom: 0.1rem solid var(--line); }
.pay-info dt { color: var(--muted); }
.pay-info dd { margin: 0; text-align: right; font-weight: 700; overflow-wrap: anywhere; }
.pay-info .link-btn { min-height: 0; font-weight: 400; margin-left: 0.6rem; }
.pay-card .note { text-align: left; }
.pay-upload { display: flex; width: 100%; margin-top: 2rem; cursor: pointer; }
.pay-upload.busy { opacity: 0.55; pointer-events: none; }
.ref-alt { margin-top: 1.6rem; text-align: left; }
.ref-alt summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: center; color: var(--muted); text-decoration: underline; font-size: 1.87rem; }

/* ---------- shipping notice under the pre-order status ---------- */
.ship-only { max-width: 76rem; margin: 3.4rem auto 0; text-align: center; font-size: 2.13rem; line-height: 3rem; }
.ship-only svg { display: inline-block; vertical-align: -0.6rem; width: 3rem; height: 3rem; margin-right: 0.6rem; color: var(--accent); }
.ship-only p { margin: 0; color: var(--muted); }
.ship-only b { display: block; color: var(--ink); }
.ship-only a { text-decoration: underline; color: var(--accent); }

/* ---------- special requests ---------- */
.requests-cta { padding: 9rem 0; text-align: center; }
.requests-cta p { max-width: 70rem; margin: 2.4rem auto 3.4rem; font-size: 2.4rem; line-height: 3.4rem; }

/* ---------- richer product cards ---------- */
.tile-wrap { position: relative; }
.wish { position: absolute; right: 1.2rem; bottom: 1.2rem; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: rgba(255, 255, 255, 0.92); display: grid; place-items: center; color: var(--ink); box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.18); transition: transform 0.1s, color 0.15s; }
.wish svg { width: 2.4rem; height: 2.4rem; }
.wish.on, .wish-btn.on { color: #e0245e; }
.wish.on svg, .wish-btn.on svg { fill: currentColor; }
.wish:active { transform: scale(0.9); }
.wish::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.off { position: absolute; left: 0; top: 1.6rem; background: var(--red); color: var(--white); font-size: 1.87rem; font-weight: 700; padding: 0.3rem 1rem; border-radius: 0 0.8rem 0.8rem 0; }
.card s, .price s { color: var(--muted); font-size: 0.72em; font-weight: 400; margin-left: 0.4em; }
.card .meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.8rem; margin-top: 0.4rem; font-size: 1.73rem !important; line-height: 2.4rem !important; color: var(--muted); }
.card .meta-line i { display: none; }
.product .card .price { margin: 0 !important; }
.pre { border: 0.1rem solid var(--accent); color: var(--accent); border-radius: 0.5rem; padding: 0 0.6rem; font-size: 1.47rem; font-weight: 700; text-transform: uppercase; }
.rating { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ink); font-weight: 700; }
.rating svg { width: 1.2em; height: 1.2em; color: #f5a623; }
.rating .rc { font-weight: 400; color: var(--muted); }
.row-grid, .wish-grid { gap: 5rem 3.4rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row-grid .card .info, .wish-grid .card .info { margin-top: 1.6rem; }
.row-grid .card h3, .row-grid .card .price, .wish-grid .card h3, .wish-grid .card .price { font-size: 2.2rem; line-height: 3rem; }
.row-grid .card .add, .wish-grid .card .add { width: 4rem; height: 4rem; }
.row-grid .badge, .wish-grid .badge { top: 1.2rem; right: 1.2rem; height: 3rem; padding: 0 1rem; font-size: 1.9rem; }
.recent-home { padding: 8rem 0 2rem; }
.recent-home .grid { margin-top: 4.6rem; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3rem 2.4rem; }
.recent-home .card h3, .recent-home .card .price { font-size: 1.87rem; line-height: 2.6rem; }
.recent-home .card .add, .recent-home .card .meta-line { display: none; }

/* ---------- pre-order batch countdown, notify-me, review photos, banners, app cards ---------- */
.batch { display: flex; align-items: flex-start; gap: 1.2rem; margin: 2.4rem 0 0; padding: 1.4rem 1.8rem; border-radius: 1.2rem; background: #eef0ff; color: var(--ink); font-size: 2rem; line-height: 2.8rem; }
.batch svg { flex: none; width: 2.8rem; height: 2.8rem; color: var(--accent); margin-top: 0.1rem; }
.batch .cd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.batch small { display: block; color: var(--muted); font-size: 1.73rem; line-height: 2.4rem; }
.batch.urgent { background: #fff1f0; }
.batch.urgent svg, .batch.urgent .cd b { color: var(--red); }
.batch.closed { background: var(--panel); }
.batch.closed svg { color: var(--muted); }
.pre.closing { border-color: var(--red); color: var(--red); }
.notify { margin-top: 2.4rem; padding: 1.8rem; border: 0.1rem solid var(--line); border-radius: 1.2rem; font-size: 2rem; line-height: 2.8rem; }
.notify > div { display: flex; gap: 1rem; margin-top: 1rem; }
.notify input { flex: 1; min-width: 0; height: 5rem; min-height: 44px; padding: 0 1.6rem; border: 0.1rem solid var(--muted); border-radius: 1rem; font: inherit; font-size: max(2rem, 16px); background: var(--white); }
.notify .chip { flex: none; }
.notify .chip:disabled, .app-card .chip:disabled { text-decoration: none; }
.notify .note { margin: 1rem 0 0; font-size: 1.73rem; line-height: 2.4rem; }
.notify .note a { text-decoration: underline; }
.rev-photos { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.2rem; }
.rev-photos:empty { display: none; }
.rev-photos button, .rev-photos span { position: relative; width: 9.6rem; height: 9.6rem; border-radius: 1rem; overflow: hidden; background: var(--tile); padding: 0; }
.rev-photos img { width: 100%; height: 100%; object-fit: cover; }
.rev-photos.edit span button { position: absolute; top: 0.4rem; right: 0.4rem; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: var(--white); display: grid; place-items: center; }
.rev-photos.edit span button svg { width: 1.8rem; height: 1.8rem; }
.rev-photos.edit span button::after { content: ''; position: absolute; inset: -0.8rem; }
.add-photo { display: inline-flex; align-items: center; gap: 0.8rem; min-height: 44px; cursor: pointer; }
.add-photo svg { width: 2.6rem; height: 2.6rem; }
.add-photo.busy { opacity: 0.5; pointer-events: none; }
.add-photo[hidden] { display: none; }
.hero.has-banners { position: relative; background-image: none !important; }
.banner-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.banner-track::-webkit-scrollbar { display: none; }
.banner-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; display: block; }
.banner-slide img { width: 100%; height: 100%; object-fit: cover; }
.banner-slide picture { display: block; width: 100%; height: 100%; }
.banner-dots { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 0; }
.banner-dots button { width: 44px; height: 44px; display: grid; place-items: center; }
.banner-dots button::before { content: ''; width: 1rem; height: 1rem; min-width: 8px; min-height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.4); transition: width 0.2s, background 0.2s; }
.banner-dots button[aria-pressed='true']::before { width: 2.6rem; border-radius: 1rem; background: var(--white); }
.app-card { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin: 2.4rem 0; padding: 1.8rem 2rem; border-radius: 1.2rem; background: #eef0ff; font-size: 2rem; line-height: 2.8rem; text-align: left; }
.app-card p { margin: 0.2rem 0 0; color: var(--muted); font-size: 1.87rem; line-height: 2.6rem; }
.app-card .chip { flex: none; background: var(--white); }

/* ---------- promotions: flash sale, bundle deals, points, referrals ---------- */
.batch.flash { background: #fff4e5; }
.batch.flash svg { color: #f08c00; fill: #f08c00; }
.batch + .batch { margin-top: 1.2rem; }
.pre.flash { display: inline-flex; align-items: center; gap: 0.3rem; border-color: #f08c00; color: #c56f00; }
.pre.flash svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.earn { display: flex; align-items: center; gap: 0.8rem; margin: 1.8rem 0 0; font-size: 1.87rem; line-height: 2.6rem; color: var(--muted); }
.earn svg { flex: none; width: 2.2rem; height: 2.2rem; color: #f5a623; }
.earn b { color: var(--ink); }
.earn[hidden] { display: none; }
.deal { margin-top: 2.8rem; padding: 2rem; border: 0.1rem dashed var(--accent); border-radius: 1.2rem; font-size: 2rem; line-height: 2.8rem; }
.deal h2 { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 0.6rem; font-size: 2.2rem; line-height: 3rem; }
.deal h2 svg { flex: none; width: 2.6rem; height: 2.6rem; color: var(--accent); }
.deal p { margin: 0; }
.deal ul { list-style: none; margin: 1.4rem 0; padding: 0; display: grid; gap: 1rem; }
.deal li a { display: flex; align-items: center; gap: 1.4rem; min-height: 44px; }
.deal li img, .deal li .ph { flex: none; width: 6.4rem; height: 6.4rem; border-radius: 0.8rem; object-fit: cover; background: var(--tile); }
.deal li small { display: block; color: var(--muted); font-size: 1.87rem; }
.deal .chip { width: auto; padding: 0 2rem; color: var(--accent); border-color: var(--accent); }
.promo-row span { display: inline-flex; align-items: center; gap: 0.6rem; }
.promo-row svg { flex: none; width: 1.2em; height: 1.2em; color: var(--accent); }
.promo-row b { color: var(--green); }
.line.promo-row { margin: 0; }
.line.promo-row b { font-weight: 400; }
.points-pick { margin: 1.6rem 0 0.8rem; }
.reward-card { padding: 2rem 2.2rem; border-radius: 1.2rem; background: var(--panel); font-size: 2rem; line-height: 2.8rem; }
.reward-card p { margin: 0 0 1rem; }
.reward-card .big { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 1rem; }
.reward-card .big b { font-size: 4.8rem; line-height: 5.2rem; }
.reward-card .big span { color: var(--muted); }
.reward-card summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; text-decoration: underline; color: var(--muted); }
.points-log { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.points-log li { display: flex; justify-content: space-between; gap: 2rem; padding: 1rem 0; border-top: 0.1rem solid var(--line); }
.points-log small { display: block; color: var(--muted); font-size: 1.73rem; line-height: 2.4rem; }
.points-log b { color: var(--green); white-space: nowrap; }
.points-log b.neg { color: var(--muted); }
.ref-code { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0.4rem 0 1.2rem; }
.ref-code code { padding: 0.9rem 1.6rem; border-radius: 1rem; background: var(--white); border: 0.1rem dashed var(--accent); font: inherit; font-weight: 700; letter-spacing: 0.08em; }
.ref-code .chip { width: auto; padding: 0 1.8rem; background: var(--white); }

/* ---------- search suggestions ---------- */
.has-suggest { position: relative; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 0.8rem); background: var(--white); border-radius: 1.2rem; box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.22); overflow: hidden; z-index: 40; min-width: 34rem; }
.suggest a { display: flex; align-items: center; gap: 1.4rem; padding: 1rem 1.6rem; font-size: 2rem; min-height: 44px; }
.suggest a:hover, .suggest a.active { background: var(--panel); }
.s-thumb { width: 5rem; height: 5rem; border-radius: 0.8rem; background: var(--line); overflow: hidden; flex: none; }
.s-thumb img { width: 100%; height: 100%; object-fit: cover; }
.s-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-price { font-weight: 700; white-space: nowrap; }
.suggest .s-all { color: var(--accent); border-top: 0.1rem solid var(--line); }

/* ---------- catalog sorting and chips ---------- */
.sort-select { margin-left: auto; height: 4.5rem; min-height: 44px; border: 0.1rem solid var(--soft); border-radius: 99rem; padding: 0 1.8rem; font-size: 2rem; background: var(--white); }
.cat-chips { display: none; }

/* ---------- product page: swipe gallery, zoom, extras ---------- */
.gallery { position: relative; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 1.5rem; background: var(--line); aspect-ratio: 1; }
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1; padding: 0; cursor: zoom-in; }
.slide.empty { cursor: default; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.counter { position: absolute; right: 1.4rem; top: 1.4rem; background: rgba(0, 0, 0, 0.55); color: var(--white); font-size: 1.73rem; padding: 0.3rem 1.2rem; border-radius: 99rem; }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.92); display: flex; flex-direction: column; }
.lb-scroll { flex: 1; overflow: auto; display: grid; place-items: center; -webkit-overflow-scrolling: touch; }
.lb-scroll img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.lb-scroll.zoomed { display: block; }
.lb-scroll.zoomed img { max-width: none; max-height: none; width: 250%; cursor: zoom-out; }
.lb-close { position: absolute; top: 2rem; right: 2rem; width: 5rem; height: 5rem; min-width: 44px; min-height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); z-index: 1; }
.lb-close svg { width: 2.6rem; height: 2.6rem; }
.lb-hint { margin: 0; padding: 1.4rem; text-align: center; color: #ccc; font-size: 1.87rem; }
.p-meta { display: flex; align-items: center; gap: 1rem; margin: 0.8rem 0 0; font-size: 2rem; color: var(--muted); }
.p-meta i { font-style: normal; }
.eta { display: flex; align-items: center; gap: 1rem; margin: 2rem 0 0; font-size: 2rem; }
.eta svg { width: 3rem; height: 3rem; flex: none; color: var(--accent); }
.vouchers { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.voucher { display: inline-flex; align-items: center; gap: 0.8rem; min-height: 44px; padding: 0.6rem 1.4rem; border: 0.1rem dashed var(--accent); border-radius: 1rem; background: #f4f5fd; font-size: 1.87rem; text-align: left; }
.voucher svg { width: 2.4rem; height: 2.4rem; color: var(--accent); flex: none; }
.voucher u { color: var(--accent); font-weight: 700; text-decoration: none; margin-left: 0.6rem; }
.product .label { margin-top: 3.4rem; }
.product .no-var .price { margin-top: 3.4rem; }
.product .desc { min-height: 0; }
.off-tag { background: var(--red); color: var(--white); font-size: 1.73rem; font-weight: 700; padding: 0.2rem 0.8rem; border-radius: 0.6rem; margin-left: 0.6rem; vertical-align: middle; }
.wish-btn { width: 6.3rem; height: 6.3rem; border: 0.1rem solid var(--line); border-radius: 1.5rem; }
.wish-btn svg { width: 3rem; height: 3rem; }
.p-section { margin-top: 9rem; }
.p-section h2 { margin: 0 0 3.4rem; font-size: 3.2rem; line-height: 4.4rem; }
.rev-summary { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; font-size: 2.13rem; color: var(--muted); margin-bottom: 2.6rem; }
.rev-summary b { font-size: 4.4rem; line-height: 1; color: var(--ink); }
.stars { display: inline-flex; gap: 0.2rem; color: var(--line); }
.stars svg { width: 2.4rem; height: 2.4rem; display: block; }
.stars .on { color: #f5a623; }
.rev-list { list-style: none; margin: 0; padding: 0; }
.rev-list li { padding: 2.4rem 0; border-top: 0.2rem solid var(--line); font-size: 2.13rem; line-height: 3rem; }
.rev-head { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.rev-head time { color: var(--muted); font-size: 1.87rem; }
.rev-list p { margin: 1rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rev-reply { background: var(--panel); border-radius: 1rem; padding: 1.2rem 1.6rem; }
.buybar { display: none; }

/* ---------- rate items on the order page ---------- */
.rate { margin-top: 6rem; }
.rate h2 { margin: 0 0 0.6rem; font-size: 2.67rem; }
.rate-form { display: grid; gap: 1.2rem; padding: 2.4rem 0; border-top: 0.2rem solid var(--line); font-size: 2.13rem; }
.rate-form textarea { width: 100%; height: 10rem; border: 0.1rem solid var(--muted); border-radius: 1rem; padding: 1.2rem 1.6rem; font-size: max(2.13rem, 16px); resize: vertical; }
.star-pick { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.4rem; }
.star-pick label { cursor: pointer; color: var(--line); display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.star-pick svg { width: 3.6rem; height: 3.6rem; }
.star-pick label:has(input:checked), .star-pick label:has(input:checked) ~ label, .star-pick label:hover, .star-pick label:hover ~ label { color: #f5a623; }
.star-pick label:has(input:focus-visible) { outline: 0.3rem solid var(--accent); border-radius: 0.8rem; }

/* ---------- phone-only chrome (hidden on larger screens) ---------- */
.m-search, .m-wish, .tabbar { display: none; }

/* ---------- shared UX ---------- */
.skip { position: absolute; left: 1rem; top: -10rem; z-index: 100; background: var(--white); padding: 1rem 1.6rem; border-radius: 1rem; font-size: 2rem; }
.skip:focus { top: 1rem; }
/* Small icon controls get a larger invisible hit area (44px minimum on touch). */
.icon-btn, .filter-btn, .qty button, .card .add, .cart-link, .back { position: relative; }
.icon-btn::after, .filter-btn::after, .qty button::after, .card .add::after, .cart-link::after, .back::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.toast { position: fixed; left: 50%; bottom: 3rem; transform: translate(-50%, 2rem); background: var(--dark); color: var(--white); font-size: max(1.87rem, 15px); padding: 1.4rem 2.4rem; border-radius: 1.5rem; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 60; max-width: calc(100vw - 4rem); display: flex; gap: 2rem; align-items: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { text-decoration: underline; font-weight: 700; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- tablet (761px to 1024px): same design, tighter gutters, 1rem = 8px ---------- */
@media (max-width: 1024px) {
  html { font-size: 8px; }
  .wrap { padding: 0 4rem; }
  .catalog .inner, .product .inner, .cart .inner, .page .inner { padding: 0; }
  .hero { height: 44rem; }
  .featured .grid, .catalog .grid { gap: 5rem 3rem; }
  .product .cols { gap: 3.4rem; }
  .product .photo { width: 42rem; height: 42rem; }
  .two-col { grid-template-columns: 1fr 36rem; gap: 4rem; }
  .gallery { width: 42rem; }
  .row-grid, .wish-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4rem 3rem; }
  .recent-home .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .qr-pay { grid-template-columns: 28rem 1fr; gap: 3.4rem; }
  .cart-row { padding-left: 0; padding-right: 0; }
  .cart-foot { padding-right: 0; }
  .site-footer .wrap { padding: 0; }
  .foot-main { grid-template-columns: 1.5fr 1fr 1.1fr auto; gap: 3rem; padding: 8rem 4rem; }
  .chip, .field input, .btn-outline, .search input { min-height: 44px; }
  .cart-row h3 a { min-height: 44px; display: inline-flex; align-items: center; padding: 0; }
  .catalog .search, .featured .search { height: auto; }
  /* text links and menu rows: at least 44px tall to tap */
  .nav a:not(.icon-btn):not(.cart-link), .nav button { padding: 1.2rem 0; min-height: 44px; display: inline-flex; align-items: center; }
  .nav .menu a { display: flex; width: 100%; align-items: center; min-height: 44px; padding: 0; }
  .foot-main ul { gap: 0.6rem; }
  .foot-main a { display: inline-flex; align-items: center; min-height: 44px; }
  .contact li { min-height: 44px; }
  .filter-menu label { min-height: 44px; }
  .card .text { min-height: 44px; }
  .field input, .field textarea, .search input { font-size: max(2.13rem, 16px); } /* 16px+ stops iOS zooming on focus */
}

/* ---------- phone (760px and below): single column, 1rem = 7.4px ---------- */
@media (max-width: 760px) {
  html { font-size: 7.4px; }
  .wrap { padding: 0 2.6rem; }
  .site-header { height: 8.6rem; }
  .site-header .wrap { padding-top: 0; }
  .menu-toggle { display: grid; }
  .nav-left { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem 2.6rem 2rem; background: var(--white); box-shadow: 0 1rem 1.4rem rgba(0, 0, 0, 0.15); display: none; }
  .nav-left.open { display: flex; }
  .nav-left > a, .nav-left .dropdown > button { display: flex; width: 100%; text-align: left; padding: 1.5rem 0; }
  .nav-right { gap: 3rem; }
  .cart-link { margin-top: -1.2rem; }
  .menu { position: static; box-shadow: none; padding: 0 0 1rem 2.4rem; min-width: 0; }
  .hero { height: 30rem; }
  .process { padding: 5rem 0 6rem; }
  .steps { flex-wrap: wrap; gap: 3.4rem 0; margin-top: 4rem; }
  .step { width: 50%; }
  .step svg { width: 8rem; height: 8rem; margin-bottom: 1.2rem; }
  .steps .dash { display: none; }
  .status-pill { margin-top: 5rem; font-size: 2.5rem; height: 6.4rem; padding: 0 3.2rem; border-radius: 3.2rem; }
  .featured { padding: 6rem 0; }
  .featured .search { width: 100%; height: 6rem; margin-top: 4rem; }
  .featured .more { margin-top: 6rem; }
  .btn-outline { width: 100%; padding: 0 2rem; height: 6rem; border-radius: 3rem; }
  .catalog { padding: 5rem 0 7rem; }
  .catalog .tools { gap: 2rem; }
  .catalog .search { flex: 1; width: auto; height: 6rem; }
  .filter-btn { width: 3.8rem; height: 3.8rem; }
  .filter-menu { left: auto; right: 0; top: 7rem; padding: 1.4rem 2rem; }
  .filter-menu label { font-size: 2.3rem; line-height: 6rem; gap: 1.6rem; }
  .filter-menu input { width: 3rem; height: 3rem; background-size: 2.2rem; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured .grid, .catalog .grid { gap: 4rem 2.2rem; margin-top: 3.6rem; }
  .card .info { margin-top: 1.4rem !important; }
  .card h3, .card p { font-size: 2.2rem !important; line-height: 3rem !important; }
  .card .add { width: 4.6rem; height: 4.6rem; }
  .badge { font-size: 1.8rem !important; height: 3rem !important; top: 1.2rem !important; right: 1.2rem !important; padding: 0 1rem !important; }
  .product { padding: 4rem 0 8rem; }
  .product .cols { flex-direction: column; gap: 3rem; }
  .product .photo { width: 100%; height: auto; aspect-ratio: 1; }
  .product .details { max-width: none; }
  .gallery { width: 100%; }
  .thumb-btn { width: 9rem; height: 9rem; }
  .product .actions .btn { flex: 1; width: auto; }
  .product .actions .qty output { width: 6rem; }
  .cart-foot .code-row { width: 100%; }
  .cart-total { justify-items: stretch; }
  .cart-total .sum { display: flex; justify-content: space-between; align-items: baseline; }
  .form.two { grid-template-columns: 1fr; }
  .inline-form { grid-template-columns: 1fr; }
  .inline-form .btn { width: 100%; height: 7rem; }
  .bubble { max-width: 90%; }
  .chat-log { height: 52rem; padding: 1.8rem; }
  .drawer-head, .drawer-foot { padding-left: 2.4rem; padding-right: 2.4rem; }
  .drawer-body { padding: 0 2.4rem; }
  .who { margin-top: -1.6rem; }
  .requests-cta { padding: 6rem 0; }

  /* app-style chrome: search bar on top, tabs along the bottom */
  body { padding-bottom: calc(8.6rem + env(safe-area-inset-bottom)); }
  .site-header { position: sticky; top: 0; box-shadow: 0 0.1rem 0 var(--line); }
  .site-header .wrap { gap: 1.6rem; padding-left: 2rem; padding-right: 2rem; }
  .menu-toggle, .nav-left, .nav-right { display: none !important; }
  .site-header .logo { margin-right: 1.6rem; }
  .site-header .logo img { height: 5.2rem; max-width: 12rem; }
  .m-search { display: block; flex: 1; height: 5.6rem; }
  .m-search input { border-color: var(--line); background: var(--panel); padding-left: 5.4rem; font-size: 16px; }
  .m-search svg { left: 1.8rem; width: 2.4rem; height: 2.4rem; color: var(--muted); }
  .m-wish { display: grid; width: 4.4rem; height: 4.4rem; min-width: 44px; min-height: 44px; }
  .m-wish svg { width: 3.4rem; height: 3.4rem; }
  .suggest { min-width: 0; right: -6rem; }
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--white); border-top: 0.1rem solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a { position: relative; display: grid; justify-items: center; gap: 0.4rem; padding: 1.2rem 0 1rem; font-size: 1.5rem; color: var(--muted); min-height: 8.4rem; }
  .tabbar svg { width: 3.4rem; height: 3.4rem; }
  .tabbar a[aria-current='page'] { color: var(--accent); font-weight: 700; }
  .tabbar .cart-count { position: absolute; top: 0.6rem; left: calc(50% + 0.8rem); min-width: 2.6rem; height: 2.6rem; padding: 0 0.6rem; border-radius: 1.3rem; background: var(--red); color: var(--white); font-size: 1.5rem; font-weight: 700; display: grid; place-items: center; line-height: 1; }
  .toast { bottom: calc(10.4rem + env(safe-area-inset-bottom)); }
  .site-footer { padding-bottom: 0; }

  /* product page: full-width swipe photos and a fixed buy bar instead of the tabs */
  body.has-buybar .tabbar { display: none; }
  body.has-buybar { padding-bottom: calc(9.6rem + env(safe-area-inset-bottom)); }
  .product { padding-top: 0; }
  .product .back { display: none; }
  .product .cols { margin-top: 0; }
  .gallery { margin: 0 -2.6rem; width: auto; }
  .slides { border-radius: 0; }
  .thumbs { display: none; }
  .product .actions .btn, .product .actions .wish-btn { display: none; }
  .buybar { display: flex; align-items: center; gap: 1.2rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--white); border-top: 0.1rem solid var(--line); padding: 1.2rem 2rem calc(1.2rem + env(safe-area-inset-bottom)); }
  .buybar .btn { flex: 1; height: 6.4rem; font-size: 2.2rem; padding: 0 1rem; }
  .buybar .icon-btn { width: 6.4rem; height: 7rem; border: 0.1rem solid var(--line); border-radius: 1.5rem; position: relative; flex: none; }
  .buybar .icon-btn svg { width: 3.2rem; height: 3.2rem; }
  .buybar .cart-count { position: absolute; top: 0.4rem; right: 0.4rem; min-width: 2.4rem; height: 2.4rem; padding: 0 0.5rem; border-radius: 1.2rem; background: var(--red); color: var(--white); font-size: 1.4rem; font-weight: 700; display: grid; place-items: center; line-height: 1; }
  .p-section { margin-top: 6rem; }
  .p-section h2 { font-size: 2.67rem; margin-bottom: 2.4rem; }

  /* horizontal product rows */
  .row-grid, .recent-home .grid { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 2.6rem; gap: 2rem; margin-left: -2.6rem; margin-right: -2.6rem; padding: 0 2.6rem 1rem; scrollbar-width: none; }
  .row-grid::-webkit-scrollbar, .recent-home .grid::-webkit-scrollbar { display: none; }
  .row-grid > .card, .recent-home .grid > .card { flex: 0 0 42%; scroll-snap-align: start; min-width: 0; }
  .recent-home .grid > .card { flex-basis: 30%; }
  .recent-home { padding: 5rem 0 0; }
  .wish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem 2.2rem; }
  .wish { width: 4.8rem; height: 4.8rem; right: 0.8rem; bottom: 0.8rem; }
  .off { font-size: 1.7rem; top: 1rem; }

  /* catalog: chips instead of the filter menu */
  .catalog .tools { flex-wrap: wrap; }
  .catalog .tools .search, .filter-btn, .filter-menu { display: none !important; }
  .sort-select { margin-left: 0; width: 100%; height: 6rem; font-size: 16px; }
  .cat-chips { display: flex; gap: 1.2rem; overflow-x: auto; margin: 2rem -2.6rem 0; padding: 0 2.6rem 0.6rem; scrollbar-width: none; }
  .cat-chips::-webkit-scrollbar { display: none; }
  .cat-chips .chip { flex: none; min-width: 0; padding: 0 2.4rem; height: 5.6rem; border-radius: 99rem; white-space: nowrap; }
  .rev-summary b { font-size: 3.8rem; }
  .product .desc { max-width: none; min-height: 0; }
  .label, .product .no-var .price { margin-top: 3.4rem; }
  .chip { min-width: 11rem; padding: 0 2rem; }
  .product .price { margin-top: 3.4rem; font-size: 3.2rem; }
  .product .actions { margin-top: 2rem; flex-wrap: wrap; }
  .product .actions .btn { height: 7rem; }
  .cart { padding: 3rem 0 8rem; }
  .cart-row { gap: 2rem; padding: 2.6rem 0; }
  .cart-row .thumb { width: 10rem; height: 10rem; }
  .cart-row h3 { font-size: 2.4rem; line-height: 3rem; }
  .cart-row .var { margin-top: 0.8rem; }
  .qty button { width: 4.4rem; height: 4.4rem; }
  .qty output { width: 5.6rem; }
  .cart-foot { flex-direction: column; align-items: stretch; gap: 3rem; margin-top: 4rem; }
  .cart-foot .btn, .summary .btn, .narrow .btn { width: 100%; height: 7rem; }
  .page { padding: 5rem 0 8rem; }
  .page h1 { margin-bottom: 3.4rem; font-size: 2.9rem; overflow-wrap: anywhere; }
  .two-col { grid-template-columns: 1fr; gap: 4rem; }
  .qr-pay { grid-template-columns: 1fr; gap: 3rem; padding: 2.6rem; }
  .qr-img img { max-width: 36rem; margin: 0 auto; }
  .qr-amount { font-size: 4rem; }
  .form { grid-template-columns: 1fr; }
  .field input { height: 6.4rem; }
  .code-input .chip { height: 6.4rem; }
  .summary { padding: 2.6rem; }
  .banner.due .btn { width: 100%; }
  .kv { grid-template-columns: 1fr; gap: 0.2rem; }
  .kv dd { margin-bottom: 1.6rem; }
  .foot-main { grid-template-columns: 1fr 1fr; gap: 5rem 3rem; padding: 6rem 2.6rem; }
  .foot-main .contact, .foot-main ul:last-child { grid-column: 1 / -1; }
  .copyright { color: #a6a6a6; padding: 3.4rem 2rem; }
}
@media (max-width: 340px) { html { font-size: 6.6px; } }

/* Drop-down arrows: our own, larger than the tiny native one. */
.pay-select, .sort-select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.8rem center; background-size: max(2.8rem, 22px);
}
.pay-select { padding: 0 5.6rem; }
.sort-select { padding-right: 5.6rem; }

/* Option picker (card "+" for products with several options): side panel on desktop, bottom sheet on phones. */
.pick-head { display: flex; align-items: center; gap: 2rem; padding: 2.4rem 0; }
.pick-head img { width: 9rem; height: 9rem; object-fit: cover; border-radius: 1.2rem; background: var(--line); }
.pick-head b { font-size: 2.4rem; line-height: 1.3; }
.pick-list { display: grid; gap: 1.4rem; }
.pick { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: 100%; min-height: 6.4rem; padding: 1.4rem 2.4rem; border: 0.15rem solid var(--soft); border-radius: 1.5rem; background: var(--white); font: inherit; font-size: 2.2rem; text-align: left; cursor: pointer; }
.pick:hover:not(:disabled) { border-color: var(--accent); }
.pick em { font-style: normal; color: var(--muted); font-size: 1.87rem; margin-left: 0.6rem; }
.pick:disabled { opacity: 0.5; cursor: not-allowed; }
.pick-more { display: block; margin: 2.4rem auto 3rem; }
@media (max-width: 700px) {
  .drawer.sheet { top: auto; left: 0; right: 0; width: 100%; max-height: 80vh; border-radius: 2rem 2rem 0 0; transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom); }
  .drawer.sheet.open { transform: none; }
}

/* Every section heading on the store is uppercase, for one consistent look. */
h2 { text-transform: uppercase; }

/* Payment: countdown to auto-cancel, and one button per payment method. */
.pay-timer { margin: -0.6rem 0 0.6rem; font-size: 2.2rem; line-height: 3rem; }
.pay-timer b { font-variant-numeric: tabular-nums; color: var(--ink); }
.pay-warn { margin: 0 0 2.4rem; }
.pay-methods-label { margin: 0 0 1.2rem; font-size: 1.87rem; line-height: 2.2rem; color: var(--muted); text-transform: uppercase; }
.pm-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 1.2rem; }
.pm { min-height: 6rem; padding: 0 1.2rem; border: 0.15rem solid var(--soft); border-radius: 1.2rem; background: var(--white); font: inherit; font-size: max(2.2rem, 16px); font-weight: 700; color: var(--ink); cursor: pointer; }
.pm:hover { border-color: var(--accent); }
.pm[aria-checked='true'] { border-color: var(--accent); background: var(--accent); color: #fff; }

/* Card "+" button: filled circle, like the design. */
.card .add { border: 0; background: var(--accent); color: #fff; }
.card .add svg { width: 62%; height: 62%; stroke-width: 2.6; }
.card .add:hover, .card .add:active { background: var(--accent); filter: brightness(1.12); color: #fff; }
/* "29 LEFT" on the product page photo. */
.gallery-badge { top: 2rem; right: 2rem; z-index: 2; height: 3.7rem; padding: 0 1.4rem; font-size: 2.2rem; pointer-events: none; }

/* Photo viewer: the close button sits inside the screen, and tall photos fit instead of being cut off. */
.lightbox { background: #000; }
.lightbox .lb-close { position: absolute; top: max(2rem, env(safe-area-inset-top)); right: max(2rem, env(safe-area-inset-right)); left: auto; }
.lb-scroll { display: flex; padding: 7rem 2rem 0; }
.lb-scroll img { margin: auto; max-width: 100%; max-height: calc(100dvh - 14rem); }
.lb-scroll.zoomed { display: block; padding: 0; }

/* "Only ships to the Philippines" note: roomier lines, plain accent link. */
.ship-only { line-height: 3.5rem; }
.ship-only a { color: var(--accent); font-weight: 700; text-decoration: none; }
.ship-only b { text-transform: uppercase; }
.ship-only a:hover { opacity: 0.8; }

/* Phone header: back arrow, search, wishlist, menu. */
.m-back, .m-menu { display: none; }
.site-menu { left: 0; right: auto; transform: translateX(-100%); width: min(40rem, 86vw); }
.site-menu.open { transform: none; }
.menu-links { display: flex; flex-direction: column; padding-top: 1rem; padding-bottom: 3rem; }
.menu-links a { display: flex; align-items: center; min-height: 6rem; font-size: 2.4rem; color: var(--ink); }
.menu-links a[aria-current='page'] { color: var(--accent); font-weight: 700; }
.menu-label { margin: 1.6rem 0 0.4rem; font-size: 1.87rem; color: var(--muted); text-transform: uppercase; }
.menu-cats { display: flex; flex-direction: column; padding-left: 2rem; }
.menu-cats a { min-height: 5.2rem; font-size: 2.2rem; }
.menu-links hr { width: 100%; margin: 1.6rem 0; border: 0; border-top: 0.2rem solid var(--line); }
@media (max-width: 760px) {
  .m-back, .m-menu { display: grid; flex: none; width: 4.4rem; height: 4.4rem; min-width: 44px; min-height: 44px; place-items: center; }
  .m-back svg { width: 1.6rem; height: 2.8rem; }
  .m-menu svg { width: 3.4rem; height: 3.4rem; }
  .m-back ~ .logo { display: none; }
}
.page .form h2 { font-size: 3.2rem; line-height: 4.4rem; text-align: center; }
/* Menu button on the left, next to where its panel slides in from; back arrow after it. */
@media (max-width: 760px) {
  .m-menu { order: -2; }
  .m-back { order: -1; }
}

/* Formatted text (policies, product descriptions): numbered lists, bold, links. */
.prose ol { margin: 0 0 1.6rem; padding-left: 3.2rem; }
.prose a, .product .desc a { color: var(--accent); font-weight: 600; text-decoration: underline; }
.product .desc { white-space: normal; }
.product .desc p { margin: 0 0 1rem; }
.product .desc h2 { margin: 1.6rem 0 0.6rem; font-size: 2.4rem; line-height: 3rem; }
.product .desc ul, .product .desc ol { margin: 0 0 1rem; padding-left: 2.8rem; }

/* Terms and Privacy: section headings well below the page title, and plain bold subheadings. */
.prose h2 { margin: 3.6rem 0 0.4rem; font-size: 2rem; line-height: 1.9 !important; }
.prose h3 { margin: 2.6rem 0 0.6rem; font-family: 'Outfit', system-ui, sans-serif; font-size: 2.13rem; line-height: 3rem; font-weight: 700; }
.product .desc h3 { margin: 1.2rem 0 0.4rem; font-size: 2rem; font-weight: 700; }

/* Home: "CLOSES IN 6D 23H 59M" under the pre-orders pill. */
.closes { margin-top: 1.6rem; text-align: center; }
.closes-in { margin: 0; font-size: 2.4rem; line-height: 3.2rem; font-weight: 700; letter-spacing: 0.02em; }
.closes-in b { color: var(--accent); font-variant-numeric: tabular-nums; }
.closes-on { margin: 0.4rem 0 0; font-size: 1.87rem; line-height: 2.6rem; color: var(--muted); }
.pay-warn { text-align: center; }