/* Yarn Topia Designs — storefront styles.
   Every colour comes from tokens.css (source: shared/design/tokens.css, shop section). No gradients.
   Mobile first: phone layout is the base, larger screens scale up. Buttons never change colour:
   mouse-over, press and keyboard focus all show the focus ring. */

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
:focus-visible { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: var(--ring-gap); }

/* ---------- Coming Soon (and other pages outside the shop) ---------- */
.landing {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-body);
    text-align: center;
}
.landing__logo { display: block; width: 10rem; height: auto; margin: 0 auto 1.5rem; }
.landing__name { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.landing__divider { width: 4rem; height: 0.25rem; margin: 1.25rem auto; border: 0; border-radius: var(--radius-pill); background: var(--color-accent); }
.landing__status { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-primary); }
.landing__note { margin: 0 auto; max-width: 26rem; font-size: 1.05rem; line-height: 1.5; color: var(--color-muted); }
.landing__message { margin-top: 1rem; overflow-wrap: anywhere; }

/* Coming Soon sign-up box (Marketing part 1) and the small pages after it */
.landing__form { display: grid; gap: 10px; width: 100%; max-width: 26rem; margin: 2rem auto 0; padding: 1.25rem; border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-surface); text-align: left; }
.landing__form-h { margin: 0; font-family: var(--font-shop-display); font-size: 1.2rem; text-align: center; color: var(--color-ink); }
.landing__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.landing__row input { width: 100%; height: var(--control-height); padding: 0 12px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-btn); background: var(--color-bg); color: var(--color-ink); font: inherit; font-size: 16px; }
.landing__btn { min-height: var(--tap-min); padding: 0 18px; border: 0; border-radius: var(--radius-btn); background: var(--color-primary); color: var(--color-on-primary); font: inherit; font-weight: 700; cursor: pointer; }
.landing__btn:hover, .landing__btn:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: var(--ring-gap); }
.landing__btn[disabled] { opacity: .6; cursor: default; }
.landing__fine { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--color-muted); }
.landing__msg { margin: 0; font-weight: 600; color: var(--color-primary); }
.landing__msg.is-bad { color: var(--color-danger); }
.landing__human:empty { display: none; }
.landing .ct-trap { position: absolute; left: -10000px; width: 300px; overflow: hidden; }
.landing .ct-trap input { width: 100%; min-height: var(--control-height); font-size: 16px; }
.landing-box { display: grid; gap: 1rem; justify-items: center; max-width: 30rem; }
.landing__name--small { font-size: 1.6rem; }
.landing__link { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--color-primary); font-weight: 700; }
@media (min-width: 480px) {
    .landing__row { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (min-width: 768px) {
    .landing__logo { width: 13rem; margin-bottom: 2rem; }
    .landing__name { font-size: 3rem; }
    .landing__status { font-size: 1.5rem; }
}

/* ---------- shop fonts (self-hosted; families live in tokens.css) ---------- */
@font-face { font-family: "Lora"; font-style: normal; font-display: swap; font-weight: 400 700;
    src: url(../fonts/lora-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: "Lora"; font-style: normal; font-display: swap; font-weight: 400 700;
    src: url(../fonts/lora-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: "Work Sans"; font-style: normal; font-display: swap; font-weight: 100 900;
    src: url(../fonts/work-sans-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: "Work Sans"; font-style: normal; font-display: swap; font-weight: 100 900;
    src: url(../fonts/work-sans-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; }

/* ---------- shop frame: every shop page (approved mockups 2026-09-28) ---------- */
.shop { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-shop-body); font-size: 16px; line-height: 1.55; }
.shop h1, .shop h2, .shop h3 { font-family: var(--font-shop-display); line-height: 1.2; text-wrap: balance; }
.shop [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -100px; z-index: 50; padding: 12px 16px; border-radius: var(--radius-btn); background: var(--color-bg); color: var(--color-primary); font-weight: 700; }
.skip:focus { top: 8px; }
.ic { width: 24px; height: 24px; display: block; flex: none; }

.preview-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 8px 16px; background: var(--color-primary-soft); color: var(--color-ink); }
.preview-bar p { margin: 0; font-size: 15px; }
.preview-bar b { color: var(--color-primary); text-transform: uppercase; letter-spacing: .08em; margin-right: 6px; }
.preview-bar form { margin: 0; }
.preview-exit { min-height: 44px; padding: 0 16px; border: 2px solid var(--color-primary); border-radius: var(--radius-btn); background: var(--color-bg); color: var(--color-primary); font: inherit; font-weight: 700; cursor: pointer; }
.preview-exit:hover, .preview-exit:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: var(--ring-gap); }

.news { margin: 0; padding: 8px 16px; background: var(--color-accent-soft); color: var(--color-accent-ink); text-align: center; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }

/* Top bar. Phones: menu, logo + name … search button, cart. */
.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 4px; padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)); background: var(--color-bar); color: var(--color-on-bar); }
.bar-left { display: flex; align-items: center; gap: 4px; margin-right: auto; min-width: 0; }
.bar-right { display: flex; align-items: center; gap: 2px; }
.bar-ico { position: relative; width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-btn); background: transparent; color: inherit; cursor: pointer; text-decoration: none; }
.bar-ico:hover, .bar-ico:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: calc(var(--ring-width) * -1); }
.bar-ico:focus-visible { outline-offset: calc(var(--ring-width) * -1); }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; color: inherit; text-decoration: none; font-family: var(--font-shop-display); font-weight: 700; font-size: 19px; line-height: 1.1; border-radius: var(--radius-btn); }
.brand:hover, .brand:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: var(--ring-gap); }
.brand img { width: 34px; height: 34px; flex: none; padding: 3px; border-radius: 50%; background: var(--color-white); }
.count { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--color-accent); color: var(--color-on-accent); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.bar-search { display: none; margin: 0; }
.bar-search input, .search-row input { width: 100%; min-height: var(--control-height); padding: 0 18px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-ink); font: inherit; font-size: 16px; }
.bar-search input:focus-visible, .search-row input:focus-visible { outline-offset: 0; }
.search-row { padding: 10px 16px; background: var(--color-primary-soft); }
.search-row form { margin: 0; }

/* Category row (tablets and computers) */
.catnav { display: none; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px 16px; border-bottom: 1px solid var(--color-line); background: var(--color-bg); }
.catnav a, .drawer nav a { display: flex; align-items: center; min-height: 44px; color: var(--color-ink); font-weight: 600; text-decoration: none; border-radius: var(--radius-btn); }
.catnav a { padding: 0 12px; }
.catnav a[aria-current="page"], .drawer nav a[aria-current="page"] { color: var(--color-primary); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.catnav a:hover, .catnav a:active, .drawer nav a:hover, .drawer nav a:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: calc(var(--ring-width) * -1); }

/* Menu drawer (phones and small tablets) */
.drawer { position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); max-width: none; height: 100%; max-height: none; margin: 0; padding: 12px 12px max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border: 0; background: var(--color-bg); color: var(--color-ink); overflow-y: auto; }
.drawer::backdrop { background: var(--color-overlay); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.drawer-head b { font-family: var(--font-shop-display); font-size: 20px; padding-left: 8px; }
.drawer nav { display: grid; gap: 2px; }
.drawer nav a { min-height: 48px; padding: 0 12px; font-size: 17px; }
.drawer-sep { width: 100%; margin: 8px 0; border: 0; border-top: 1px solid var(--color-line); }
.catnav-sep { align-self: stretch; width: 1px; margin: 10px 6px; background: var(--color-line); }

.shop-main { flex: 1 0 auto; width: 100%; max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; }
.shop-main:focus { outline: none; }
.shop-placeholder { text-align: center; padding: 48px 0; }
.shop-placeholder h1 { margin: 0 0 12px; font-size: 1.75rem; }
.shop-placeholder p { margin: 0 auto; max-width: 34rem; color: var(--color-muted); }
.shop-placeholder a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-primary); font-weight: 600; }

/* Footer */
.foot { padding: 28px 16px calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-line); background: var(--color-surface); }
.foot-in { max-width: 1100px; margin: 0 auto; display: grid; gap: 16px; }
.social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.social a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-line); border-radius: 50%; background: var(--color-bg); color: var(--color-primary); }
.social a:hover, .social a:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: var(--ring-gap); }
.social .ic { width: 22px; height: 22px; }
.copy { margin: 0; color: var(--color-muted); font-size: 14px; }

/* Footer information links (policies, and later About and Contact) */
.foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.foot-links a { display: flex; align-items: center; min-height: 44px; color: var(--color-ink); font-weight: 600; text-decoration: none; border-radius: var(--radius-btn); }
.foot-links a:hover, .foot-links a:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: var(--ring-gap); }

/* ---------- shared bits for shop pages ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: -8px 0 8px; font-size: 14px; color: var(--color-muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-muted); }
.round-btn { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--color-line); border-radius: 50%; background: var(--color-bg); color: var(--color-ink); cursor: pointer; }
.round-btn:hover, .round-btn:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: var(--ring-gap); }
.round-btn .ic { width: 20px; height: 20px; }
.was { color: var(--color-muted); font-weight: 400; }
.add { min-height: 56px; padding: 0 20px; border: 0; border-radius: var(--radius-btn); background: var(--color-primary); color: var(--color-on-primary); font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }
.add:hover, .add:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: var(--ring-gap); }
.add:disabled { background: var(--color-line); color: var(--color-muted); cursor: not-allowed; outline: none; }

/* Product cards (rows and lists) */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.card-p { display: grid; gap: 4px; align-content: start; color: var(--color-ink); text-decoration: none; border-radius: var(--radius-card); }
.card-p:hover, .card-p:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: var(--ring-gap); }
.card-ph { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-card); background: var(--color-surface); }
.card-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-ph .card-noph { width: 40%; height: auto; }
.card-name { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.card-price { display: flex; flex-wrap: wrap; gap: 0 8px; font-weight: 700; }
.card-out { color: var(--color-muted); font-weight: 600; }

/* ---------- product page ---------- */
.product { display: grid; gap: 22px; }
.gallery { position: relative; display: grid; gap: 10px; min-width: 0; align-content: start; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 14px; background: var(--color-surface); scrollbar-width: none; overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; aspect-ratio: 1; scroll-snap-align: center; display: block; cursor: zoom-in; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide:focus-visible { outline-offset: calc(var(--ring-width) * -1); }
.slide-empty { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--color-surface); }
.slide-empty img { width: 40%; height: auto; }
.gnav { display: flex; align-items: center; justify-content: center; gap: 10px; }
.dots { display: flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-line-strong); }
.dots i.on { background: var(--color-primary); }
.thumbs { display: none; flex-wrap: wrap; gap: 8px; }
.thumbs button { width: 72px; height: 72px; padding: 0; overflow: hidden; border: 2px solid var(--color-line); border-radius: var(--radius-btn); background: var(--color-surface); cursor: pointer; }
.thumbs button[aria-current="true"] { border-color: var(--color-primary); }
.thumbs button:hover, .thumbs button:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: var(--ring-gap); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.info { display: grid; gap: 16px; align-content: start; min-width: 0; }
.info h1 { margin: 0; font-size: 28px; overflow-wrap: anywhere; }
.price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.price { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.price-row .was { font-size: 18px; }
.tag { padding: 4px 12px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary); font-size: 14px; font-weight: 700; }
.tag.tag-out { background: var(--color-surface); color: var(--color-muted); }
.tag.tag-disc { background: var(--color-accent); color: var(--color-on-accent); }
/* Step 6: "Pre-order: ships around Nov 12" / "Made to order: ships in about 10 days" + the pre-order note */
.sale-note { display: grid; gap: 4px; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-ink); }
.sale-note b { color: var(--color-primary); }
.sale-note[hidden], .sale-note [hidden] { display: none; }
.pre-note { color: var(--color-primary); }
/* Step 6 phase 3: "Email me when it's back" box on product pages */
.notify { display: grid; gap: 10px; margin: 0 0 20px; padding: 16px; border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.notify h2 { margin: 0; font-size: 20px; }
.notify p { margin: 0; }
.notify form { display: grid; gap: 10px; min-width: 0; }
.notify-label { font-weight: 600; font-size: 15px; }
.notify-inp { width: 100%; min-width: 0; height: var(--control-height); padding: 0 14px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-btn); background: var(--color-bg); color: var(--color-ink); font: inherit; font-size: 16px; }
.notify-news { display: flex; gap: 10px; align-items: flex-start; min-height: var(--tap-min); cursor: pointer; }
.notify-news input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--color-primary); }
.notify-human { min-height: 65px; max-width: 100%; }
.notify-btn { justify-self: start; min-height: var(--tap-min); }
.notify-msg { min-height: 1.5em; color: var(--color-ink); }
.notify-msg.notify-ok { color: var(--color-primary); font-weight: 700; }
.notify[hidden] { display: none; }

.buy { display: grid; gap: 16px; margin: 0; }
.opt { margin: 0; padding: 0; border: 0; min-width: 0; }
.opt legend { margin-bottom: 10px; padding: 0; font-weight: 700; }
.opt-chosen { font-weight: 400; color: var(--color-muted); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 14px; border: 2px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-bg); font-weight: 600; font-size: 15px; cursor: pointer; overflow-wrap: anywhere; }
.choice:has(.swatch) { padding-left: 8px; }
.choice-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice:has(.choice-input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.choice:has(.choice-input:focus-visible), .choice:hover, .choice:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: var(--ring-gap); }
.choice.out { background: var(--color-surface); color: var(--color-muted); }
.choice.out > span:first-of-type { text-decoration: line-through; }
.choice.out .swatch { opacity: .45; }
.swatch { width: 26px; height: 26px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ink) 18%, transparent); }

.qty-row { display: flex; flex-wrap: wrap; gap: 12px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--color-line); border-radius: var(--radius-btn); }
.qty button { width: 48px; height: 54px; padding: 0; border: 0; border-radius: var(--radius-btn); background: transparent; color: var(--color-ink); font: inherit; font-size: 22px; cursor: pointer; }
.qty button:hover, .qty button:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: calc(var(--ring-width) * -1); }
.qty button:disabled { color: var(--color-faint); cursor: not-allowed; outline: none; }
.qty input { width: 48px; min-height: 48px; padding: 0; border: 0; background: transparent; color: var(--color-ink); font: inherit; font-size: 18px; font-weight: 700; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-row .add { flex: 1 1 200px; }

.ship b { font-size: 17px; }
.estimate { display: grid; gap: 8px; }
.estimate form { display: grid; gap: 6px; margin: 0; }
.estimate label { font-weight: 600; font-size: 15px; }
.estimate-row { display: flex; flex-wrap: wrap; gap: 8px; }
.estimate input { flex: 1 1 140px; min-width: 0; min-height: var(--control-height); padding: 0 14px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-btn); background: var(--color-bg); color: var(--color-ink); font: inherit; font-size: 16px; }
.estimate .btn-line { min-height: var(--control-height); }
.estimate-out { margin: 0; color: var(--color-ink); font-weight: 700; }
.estimate-out:empty { display: none; }

.details { border-top: 1px solid var(--color-line); }
.details details { border-bottom: 1px solid var(--color-line); }
.details summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; font-weight: 700; font-size: 17px; cursor: pointer; list-style: none; border-radius: var(--radius-btn); }
.details summary::-webkit-details-marker { display: none; }
.details summary::after { content: "+"; font-size: 24px; font-weight: 400; color: var(--color-muted); }
.details details[open] summary::after { content: "−"; }
.details summary:hover, .details summary:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: calc(var(--ring-width) * -1); }
.details-body { padding-bottom: 16px; overflow-wrap: anywhere; }
.details-body p { margin: 0 0 10px; }
.details-body a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-primary); font-weight: 600; }

.more { margin-top: 36px; }
.more h2 { margin: 0 0 12px; font-size: 24px; }

.sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; align-items: center; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border-top: 1px solid var(--color-line); background: var(--color-bg); box-shadow: var(--shadow-pop); }
body:has(.sticky-buy) .foot { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.sticky-what { display: grid; min-width: 0; }
.sticky-what b { font-size: 18px; }
.sticky-what small { overflow: hidden; color: var(--color-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sticky-buy .add { flex: 1; min-height: 50px; font-size: 17px; }

.zoom { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--color-bg); }
.zoom[open] { display: grid; grid-template-rows: auto 1fr; }
.zoom::backdrop { background: var(--color-overlay); }
.zoom-close { justify-self: end; margin: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 8px 8px; }
.zoom-pic { overflow: auto; display: flex; align-items: flex-start; justify-content: center; overscroll-behavior: contain; }
.zoom-pic img { width: min(200vw, 1200px); max-width: none; height: auto; display: block; }

/* ---------- product lists: Shop all, categories, search ---------- */
.list-h { margin: 0 0 16px; font-size: 30px; overflow-wrap: anywhere; }
.btn-line { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 2px solid var(--color-primary); border-radius: var(--radius-btn); background: var(--color-bg); color: var(--color-primary); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn-line:hover, .btn-line:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: var(--ring-gap); }
.btn-line .ic { width: 20px; height: 20px; }
.big-search { display: flex; gap: 8px; margin: 0 0 20px; }
.big-search input { flex: 1 1 auto; min-width: 0; min-height: var(--control-height); padding: 0 18px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-ink); font: inherit; font-size: 17px; }
.big-search .add { display: inline-flex; align-items: center; gap: 8px; min-height: var(--control-height); font-size: 17px; }
.big-search .add .ic { width: 20px; height: 20px; }
.list-tools { display: grid; gap: 12px; margin: 0 0 16px; }
.tools-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.list-count { margin: 0; color: var(--color-muted); font-weight: 600; overflow-wrap: anywhere; }
.sort { display: flex; align-items: center; gap: 8px; }
.sort label { font-weight: 700; }
/* Drop-downs: the site draws its own (iPhones otherwise shrink their built-in one to its own size — Mike 2026-09-30),
   so every drop-down is the same box as the text boxes around it, with the arrow in the shop's muted colour. */
.sel { position: relative; display: block; min-width: 0; }
.sel select { -webkit-appearance: none; appearance: none; width: 100%; padding-right: 44px; }
.sel::after { content: ""; position: absolute; top: 50%; right: 18px; width: 9px; height: 9px; border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.sort .sel { display: inline-block; }
.sort select { min-height: var(--control-height); max-width: 100%; padding: 0 12px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-btn); background: var(--color-bg); color: var(--color-ink); font: inherit; font-size: 16px; }
.sort .sel select { padding-right: 44px; }
.filters { border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-bg); }
.filters summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; font-weight: 700; cursor: pointer; list-style: none; border-radius: var(--radius-card); }
.filters summary::-webkit-details-marker { display: none; }
.filters summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--color-muted); }
.filters[open] summary::after { content: "−"; }
.filters summary:hover, .filters summary:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: calc(var(--ring-width) * -1); }
.filters-body { display: grid; gap: 16px; padding: 4px 16px 16px; }
.f-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.f-group legend { margin-bottom: 8px; padding: 0; font-weight: 700; }
.f-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.f-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px; border: 2px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-bg); font-weight: 600; font-size: 15px; cursor: pointer; overflow-wrap: anywhere; }
.f-chip:has(.swatch) { padding-left: 8px; }
.f-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.f-chip:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.f-chip:has(input:checked)::after { content: "✓"; color: var(--color-primary); font-weight: 800; }
.f-chip:has(input:focus-visible), .f-chip:hover, .f-chip:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: var(--ring-gap); }
.f-chip .swatch { width: 24px; height: 24px; }
.f-price { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.f-price label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.f-price input { width: 96px; min-height: var(--control-height); padding: 0 10px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-btn); background: var(--color-bg); color: var(--color-ink); font: inherit; font-size: 16px; }
.f-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.f-actions .add { min-height: 48px; font-size: 16px; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.active-filters a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px 0 14px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.active-filters a:hover, .active-filters a:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: var(--ring-gap); }
.active-filters .ic { width: 18px; height: 18px; }
.list-cards { margin-top: 8px; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 28px; font-weight: 600; }
.list-empty { padding: 32px 0; color: var(--color-muted); }
.list-empty p { margin: 0 0 8px; }
.list-empty a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-primary); font-weight: 700; }
.card-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 16px; }
.card-dots svg { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ink) 18%, transparent); }
.card-dots small { color: var(--color-muted); font-size: 12px; font-weight: 600; }
.card-ready { color: var(--color-primary); font-size: 13px; font-weight: 700; }

/* Suggestions while typing (top bar search) */
.bar-search, .search-row form { position: relative; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: min(70vh, 420px); margin: 0; padding: 6px; overflow-y: auto; list-style: none; border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-bg); color: var(--color-ink); box-shadow: var(--shadow-pop); text-align: left; }
.suggest a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 8px; border-radius: var(--radius-btn); color: var(--color-ink); text-decoration: none; }
.suggest img { width: 44px; height: 44px; flex: none; border-radius: 8px; object-fit: cover; background: var(--color-surface); }
.suggest .s-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.suggest .s-price { flex: none; font-weight: 700; }
.suggest .s-all { color: var(--color-primary); font-weight: 700; overflow-wrap: anywhere; }
.suggest [aria-selected="true"] a, .suggest a:hover { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: calc(var(--ring-width) * -1); }

/* ---------- home page (Etsy-style, approved mockup) ---------- */
.shop-main--wide { max-width: none; padding: 0 0 48px; }
.cover { display: block; width: 100%; height: auto; aspect-ratio: 5 / 2; object-fit: cover; background: var(--color-surface); }
.intro { display: grid; justify-items: center; gap: 6px; max-width: 1100px; margin: 0 auto; padding: 0 16px; text-align: center; }
.shop-icon { width: 96px; height: 96px; margin-top: -48px; padding: 8px; border: 4px solid var(--color-white); border-radius: 50%; background: var(--color-white); box-shadow: var(--shadow-pop); }
.intro--plain .shop-icon { margin-top: 24px; }
.intro h1 { margin: 6px 0 0; font-size: 30px; }
.headline { max-width: 36ch; margin: 0; color: var(--color-muted); font-size: 17px; overflow-wrap: anywhere; }
.home { display: grid; gap: 36px; max-width: 1100px; margin: 0 auto; padding: 20px 16px 0; }
.home h2 { margin: 0 0 12px; font-size: 24px; }
.home section[id] { scroll-margin-top: 120px; }
.featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.feat-big { grid-column: 1 / -1; }
.announce { margin: 0; padding: 14px 16px; border-radius: var(--radius-card); background: var(--color-surface); overflow-wrap: anywhere; }
.browse { display: grid; gap: 14px; }
.browse h2 { margin: 0; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 3px; scrollbar-width: thin; }
.chips a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-ink); font-weight: 700; font-size: 15px; text-decoration: none; }
.chips a[aria-current="true"] { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }
.chips a:hover, .chips a:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: var(--ring-gap); }
.browse .tools-row { margin: 0; }

/* ---------- policy pages ---------- */
.policy { max-width: 42rem; margin: 0 auto; }
.policy h1 { margin: 0 0 4px; font-size: 30px; }
.policy-updated { margin: 0 0 24px; color: var(--color-muted); font-size: 14px; }
.policy h2 { margin: 24px 0 8px; font-size: 21px; }
.policy p { margin: 0 0 12px; overflow-wrap: anywhere; }
.about-page h1 { margin-bottom: 16px; }

/* ---------- cart: slide-out cart + cart page (step 3, phase 3; approved mockup option A) ---------- */
.cpanel { 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(--color-bg); color: var(--color-ink); box-shadow: var(--shadow-pop); }
.cpanel[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.cpanel::backdrop { background: var(--color-overlay); }
.cpanel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px 16px; border-bottom: 1px solid var(--color-line); }
.cpanel-head h2 { margin: 0; font-size: 20px; }
.cpanel-in { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.cpanel-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 16px; }
.cpanel-added { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-btn); background: var(--color-primary-soft); color: var(--color-primary); font-weight: 700; overflow-wrap: anywhere; }
.cpanel-added:empty { display: none; }
.cpanel-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--color-line); }
.cpanel-foot .add, .cpanel-foot .btn-line { width: 100%; min-height: 52px; }

.clines { margin: 0; padding: 0; list-style: none; }
.cline { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--color-line); }
.cline:last-child { border-bottom: 0; }
.cline-photo img { display: block; width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-btn); background: var(--color-surface); }
.cline-photo .cline-nophoto { object-fit: contain; padding: 14px; }
.cline-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; }
.cline-top { display: flex; justify-content: space-between; gap: 10px; }
.cline-what { display: grid; min-width: 0; }
.cline-name { display: block; box-sizing: border-box; min-height: var(--tap-min); margin-block: -9px; padding-block: 9px; color: var(--color-ink); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; border-radius: 4px; }  /* 44px tall to tap, same look */
.cline-name:hover, .cline-name:active { text-decoration: underline; }
.cline-opts, .cline-each { color: var(--color-muted); font-size: 15px; }
.cline-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cline-price s { color: var(--color-muted); font-weight: 400; }
.cline-ship { display: block; color: var(--color-primary); font-size: 15px; font-weight: 600; }
.cart-together { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--radius-btn); background: var(--color-primary-soft); color: var(--color-ink); font-weight: 600; }
.cline-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.cline-ctl form { margin: 0; }
.qty-sm button { width: 44px; height: 44px; font-size: 20px; }
.qty-sm output { min-width: 28px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cline-remove { min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--radius-btn); background: transparent; color: var(--color-muted); font: inherit; text-decoration: underline; cursor: pointer; }
.cline-remove:hover, .cline-remove:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: calc(var(--ring-width) * -1); }
.cline-ctl [aria-busy="true"] button { cursor: progress; }

.cart-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cart-status { margin: 0; font-weight: 700; color: var(--color-primary); overflow-wrap: anywhere; }
.cart-status:empty { display: none; }
.cart-notes { display: grid; gap: 6px; margin: 0; padding: 12px 14px 12px 32px; border-radius: var(--radius-btn); background: var(--color-warn-soft); color: var(--color-ink); }
.cart-undo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 10px 14px; border-radius: var(--radius-btn); background: var(--color-surface); overflow-wrap: anywhere; }
.cart-empty { display: grid; justify-items: center; gap: 10px; padding: 32px 0; text-align: center; }
.cart-empty p { margin: 0; color: var(--color-muted); font-size: 18px; }
.cart-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.cart-list { min-width: 0; }
.cart-list .clines { border-top: 1px solid var(--color-line); }
.cart-list .cline:last-child { border-bottom: 1px solid var(--color-line); }
.cart-count { margin: 0 0 8px; color: var(--color-muted); }
.cart-keep { margin: 8px 0 0; text-align: center; }
.cart-keep a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--color-primary); font-weight: 700; border-radius: var(--radius-btn); }
.summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; min-width: 0; padding: 16px; border: 1px solid var(--color-line); border-radius: var(--radius-card); scroll-margin-top: 80px; }
.summary h2 { margin: 0; font-size: 22px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.sum-row > :first-child { min-width: 0; overflow-wrap: anywhere; }
.sum-row > :last-child { flex: none; max-width: 60%; text-align: right; }
.sum-row .muted { color: var(--color-muted); }
.sum-total { padding-top: 10px; border-top: 1px solid var(--color-line); font-size: 19px; font-weight: 800; }
.sum-zip { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 12px; border-radius: var(--radius-btn); background: var(--color-primary-soft); }
.sum-zip label { font-weight: 700; }
.sum-zip-in { display: flex; gap: 8px; }
.sum-zip input { flex: 1 1 auto; min-width: 0; min-height: var(--control-height); padding: 0 14px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-btn); background: var(--color-bg); color: var(--color-ink); font: inherit; font-size: 16px; }
.sum-zip input[aria-invalid="true"] { border-color: var(--color-danger); }
.sum-zip .btn-line { min-height: var(--control-height); }
.sum-err { margin: 0; color: var(--color-danger); font-weight: 600; }
/* Step 7 — discounts in the cart, slide-out cart and checkout summary */
.sum-disc > :last-child, .sum-saving > :last-child { color: var(--color-primary); font-weight: 700; }
.sum-saving { color: var(--color-primary); font-weight: 600; }
.cline-deal, .co-deal { display: block; color: var(--color-primary); font-size: 14px; font-weight: 600; }
.codes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.code-chip { display: inline-flex; align-items: center; gap: 2px; margin: 0; padding-left: 14px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary); font-weight: 700; max-width: 100%; }
.code-chip > span { min-width: 0; overflow-wrap: anywhere; }
.code-chip small { font-weight: 600; }
.code-chip button { width: var(--tap-min); height: var(--tap-min); flex: none; border: 0; border-radius: 50%; background: none; color: inherit; font: inherit; font-size: 20px; cursor: pointer; }
.code-chip button:hover, .code-chip button:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: calc(-1 * var(--ring-width)); }
.code-off { background: var(--color-surface); color: var(--color-muted); }
.code-box > summary { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--color-primary); font-weight: 600; text-decoration: underline; cursor: pointer; list-style: none; }
.code-box > summary::-webkit-details-marker { display: none; }
.code-box[open] > summary { margin-bottom: 6px; }
.code-form { display: flex; gap: 8px; margin: 0; }
.code-form input { flex: 1 1 auto; min-width: 0; min-height: var(--control-height); height: var(--control-height); padding: 0 14px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-btn); background: var(--color-bg); color: var(--color-ink); font: inherit; font-size: 16px; text-transform: uppercase; }
.code-form input[aria-invalid="true"] { border-color: var(--color-danger); }
.code-form .btn-line { min-height: var(--control-height); }
.code-box .sum-err { margin-top: 6px; }
.free-bar { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--radius-btn); background: var(--color-surface); }
.free-bar p { margin: 0; }
.free-bar progress { appearance: none; -webkit-appearance: none; width: 100%; height: 10px; border: 0; border-radius: var(--radius-pill); background: var(--color-line); color: var(--color-primary); overflow: hidden; }
.free-bar progress::-webkit-progress-bar { background: var(--color-line); border-radius: var(--radius-pill); }
.free-bar progress::-webkit-progress-value { background: var(--color-primary); border-radius: var(--radius-pill); }
.free-bar progress::-moz-progress-bar { background: var(--color-primary); border-radius: var(--radius-pill); }
.deal-tag { padding: 3px 12px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary); font-size: 14px; font-weight: 700; }
.news-sale a { color: inherit; }
/* Step 7 phase 2 — buy more save more boxes (Kaching style, option A), deal notes, bundles, free gift picker */
.ph-badge--deal2 { background: var(--color-accent); color: var(--color-on-accent); }
.offer { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 14px; border-radius: var(--radius-btn); background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
.offer .ic { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.tiers { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.tiers legend { padding: 0; margin-bottom: 4px; font-weight: 700; }
.tier { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 64px; padding: 10px 14px; border: 2px solid var(--color-line); border-radius: var(--radius-btn); background: var(--color-bg); cursor: pointer; }
.tier:has(.tier-input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.tier:hover, .tier:has(.tier-input:focus-visible) { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: var(--ring-gap); }
.tier.out { opacity: .55; cursor: not-allowed; }
.tier-input { width: 22px; height: 22px; margin: 0; accent-color: var(--color-primary); }
.tier-what { min-width: 0; }
.tier-what small { display: block; color: var(--color-muted); font-size: 14px; }
.tier-price { text-align: right; font-variant-numeric: tabular-nums; }
.tier-price s { display: block; color: var(--color-muted); font-size: 14px; }
.tier-pop { position: absolute; top: -11px; right: 12px; padding: 1px 10px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent); font-size: 12px; font-weight: 700; }
.bundle { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.bundle h2 { margin: 0; font-size: 18px; }
.bundle ul { margin: 0; padding-left: 20px; }
.bundle a { color: var(--color-primary); font-weight: 600; }
.bundle-price, .bundle-how { margin: 0; }
.bundle-price s { color: var(--color-muted); }
.bundle-save { color: var(--color-primary); font-weight: 700; }
.bundle-how { color: var(--color-muted); font-size: 15px; }
.gifts { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.gifts h3 { margin: 0; font-size: 17px; }
.gifts-need { margin: 0; color: var(--color-muted); }
.gifts-need b { color: var(--color-primary); }
.gift-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.gift-opts form { margin: 0; height: 100%; }
.gift-opt { display: grid; gap: 6px; width: 100%; height: 100%; min-height: var(--tap-min); padding: 8px; border: 2px solid var(--color-line); border-radius: var(--radius-btn); background: var(--color-bg); color: var(--color-ink); font: inherit; font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; }
.gift-opt[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary-soft); }
.gift-opt:hover, .gift-opt:active { outline: var(--ring-width) solid var(--color-focus-ring); outline-offset: var(--ring-gap); }
.gift-ph img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--color-surface); }
.gift-nm { overflow-wrap: anywhere; }
.cart-checkout { display: inline-flex; align-items: center; justify-content: center; width: 100%; text-decoration: none; }

/* The smallest phones (320–359px): a slightly smaller shop name so it fits beside search, account and cart. */
@media (max-width: 359px) {
    .brand { gap: 5px; font-size: 15px; }
    .brand img { width: 28px; height: 28px; padding: 2px; }
}

/* Anything bigger than a phone (Mike, 2026-09-28): the search box sits in the exact centre of the top bar. */
@media (min-width: 600px) {
    .bar { display: grid; grid-template-columns: minmax(0, 1fr) min(420px, 34vw) minmax(0, 1fr); gap: 8px; padding-inline: 12px; }
    .bar-left { margin-right: 0; }
    .bar-right { justify-self: end; }
    .bar-search { display: block; }
    .searchbtn, .search-row { display: none !important; }
    .brand { gap: 6px; font-size: 16px; }
    .brand img { width: 30px; height: 30px; }
}
@media (min-width: 760px) {
    .bar { gap: 12px; padding-inline: 20px; }
    .menubtn { display: none; }
    .catnav { display: flex; }
    .brand { gap: 8px; font-size: 22px; }
    .brand img { width: 34px; height: 34px; }
    .shop-main { padding-top: 32px; }
    .product { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
    .gallery { position: sticky; top: 76px; }
    .thumbs { display: flex; }
    .info h1 { font-size: 34px; }
    .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 18px; }
    .sticky-buy { display: none !important; }
    body:has(.sticky-buy) .foot { padding-bottom: 28px; }
    .foot-links { grid-template-columns: repeat(auto-fill, minmax(180px, auto)); }
    .list-h { font-size: 36px; }
    .cover { aspect-ratio: 4 / 1; }
    .shop-icon { width: 128px; height: 128px; margin-top: -64px; }
    .intro--plain .shop-icon { margin-top: 32px; }
    .intro h1 { font-size: 40px; }
    .featured { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto; align-items: start; }
    .feat-big { grid-column: auto; }
    .suggest { min-width: 360px; }
    .zoom-pic img { width: min(100%, 1200px); }
    .cart-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
    .summary { position: sticky; top: 80px; }
}

/* Step 6 (pre-orders): one word on a product photo — on cards and the product page */
.ph-badge { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; line-height: 1.4; }
.ph-badge--preorder { background: var(--color-primary); color: var(--color-on-primary); }
.ph-badge--made { background: var(--color-bg); color: var(--color-primary); border: 1px solid var(--color-primary); }
.ph-badge--soon { background: var(--color-accent); color: var(--color-on-accent); }
.ph-badge--deal { background: var(--color-primary); color: var(--color-on-primary); }
.ph-badge--out { background: var(--color-ink); color: var(--color-bg); }

/* Blog & Pages: a page Roxann wrote (/pages/<handle>) — words like a policy page, plus photos, questions and item cards */
.cpage-draft { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-btn); background: var(--color-warn-soft); color: var(--color-warn); font-weight: 600; }
.cpage-photo { margin: 8px 0 20px; }
.cpage-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); background: var(--color-surface); }
.cpage-qa { margin: 8px 0 24px; }
.cpage-cards { margin: 8px 0 24px; }
@media (min-width: 760px) {
    .cpage-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Blog & Pages, part 2: the blog list (/blog) and a post (/blog/<handle>) */
.blog h1 { margin: 0 0 20px; font-size: 30px; }
.blog-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.blog-card { display: grid; gap: 6px; align-content: start; min-width: 0; }
.blog-card-ph { display: block; margin-bottom: 6px; border-radius: var(--radius-card); overflow: hidden; background: var(--color-surface); }
.blog-card-ph img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.blog-card h2 { margin: 0; font-size: 22px; }
.blog-card h2 a { color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; }
.blog-card h2 a:hover { color: var(--color-primary); text-decoration: underline; }
.blog-date { margin: 0; color: var(--color-muted); font-size: 14px; }
.blog-sum { margin: 0; color: var(--color-muted); overflow-wrap: anywhere; }
.crumb-back { margin: -8px 0 4px; }
.crumb-back a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--color-muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.crumb-back .ic { width: 18px; height: 18px; }
.post .blog-date { margin-bottom: 4px; }
.post-cover img { aspect-ratio: 3 / 2; }
.post .post-more { margin: 32px 0 0; }
@media (min-width: 600px) {
    .blog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
}
@media (min-width: 900px) {
    .blog-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Blog & Pages, part 3: comments under a post */
.comments { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--color-line); display: grid; gap: 16px; }
.comments h2 { margin: 0; }
.cmt { display: grid; gap: 4px; min-width: 0; }
.cmt + .cmt { padding-top: 16px; border-top: 1px solid var(--color-line); }
.cmt-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cmt-head span { color: var(--color-muted); font-size: 14px; }
.cmt-head .cmt-owner { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary); font-size: 13px; font-weight: 700; }
.cmt-body p { margin: 0 0 8px; overflow-wrap: anywhere; }
.cmt.cmt-reply { margin: 6px 0 0 16px; padding: 12px 0 0 14px; border-left: 3px solid var(--color-primary-soft); border-top: 0; }
.cmt-form-h { margin: 12px 0 0; font-size: 20px; }

/* Marketing part 1: shop news sign-up at the top of the footer (every shop page) */
.foot-news { display: grid; gap: 8px; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--color-line); }
.foot-news-h { margin: 0; font-size: 20px; }
.foot-news-p { margin: 0; color: var(--color-muted); }
.foot-news-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.foot-news-row input { width: 100%; height: var(--control-height); padding: 0 12px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-btn); background: var(--color-bg); color: var(--color-ink); font: inherit; font-size: 16px; }
.foot-news-human:empty { display: none; }
.foot-news-msg { margin: 0; font-weight: 600; color: var(--color-primary); }
.foot-news-msg.is-bad { color: var(--color-danger); }
.foot .ct-trap { position: absolute; left: -10000px; width: 300px; overflow: hidden; }
.foot .ct-trap input { width: 100%; min-height: var(--control-height); font-size: 16px; }
@media (min-width: 600px) {
    .foot-news { max-width: 34rem; }
    .foot-news-row { grid-template-columns: minmax(0, 1fr) auto; }
}