/* Chicago Hat Club — lean site stylesheet (simplify rebuild, 2026-10-10).
One font pair, one accent, solid buttons, one spacing scale. Replaces styles.css page by page. */
/* Self-hosted fonts (POLISH_PLAN A): no Google request, visitors' IPs stay with us. Variable woff2,
Latin + Latin-Ext subsets. The ?v= stamps MUST equal the first 10 hex of each file's sha256 — the
page URLs are auto-stamped with the same hash, so they share one download
(bots/test_fonts_focus.py checks this). The "… Fallback" faces resize local Arial to the real
fonts' metrics so text doesn't jump when the font arrives. */
@font-face { font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap;
src: url("./fonts/sora-latin-wght.woff2?v=fa26406eed") 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: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap;
src: url("./fonts/sora-latin-ext-wght.woff2?v=c163c536f6") 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: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
src: url("./fonts/manrope-latin-wght.woff2?v=a30ddcd349") 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: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
src: url("./fonts/manrope-latin-ext-wght.woff2?v=3911b66d9f") 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: "Sora Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
size-adjust: 114.55%; ascent-override: 84.68%; descent-override: 25.32%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
size-adjust: 100.58%; ascent-override: 105.98%; descent-override: 29.83%; line-gap-override: 0%; }
:root {
--bg: #f7f4ef;
--surface: #ffffff;
--surface-2: #efebe4;
--ink: #141414;
--muted: #6b655e;
--line: #e3ddd4;
--accent: #c8651b;
--accent-soft: #f6e6d6;
--accent-ink: #8f430c; /* ORANGE TEXT: 6.4:1 on --bg, 7.1:1 on white (AA). Plain --accent is only 3.6:1 — never use it for text */
--accent-strong: #a4500f; /* orange BEHIND white text: 5.6:1 (AA). --accent behind white is only 3.9:1 */
--sale: #c0392b;
--radius: 18px;
--radius-sm: 12px;
--max: 1180px;
--gutter: clamp(16px, 4vw, 40px);
--section: clamp(56px, 9vw, 112px);
--font-head: "Sora", "Sora Fallback", system-ui, sans-serif;
--font-body: "Manrope", "Manrope Fallback", system-ui, sans-serif;
--shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 8px 24px rgba(20, 20, 20, 0.06);
--shadow-lift: 0 2px 4px rgba(20, 20, 20, 0.05), 0 18px 40px rgba(20, 20, 20, 0.1);
}
*,
*::before,
*::after { box-sizing: border-box; }
/* The hidden attribute always wins, even over component display rules. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: var(--type-scale, 100%); scroll-padding-top: 96px; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font: 400 1rem/1.6 var(--font-body);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
/* Focus system (POLISH_PLAN A): ONE ring everywhere — a cream halo with a 2px ink outline over it, so
it reads on cream, white, photos AND dark (ink) sections alike (WCAG 2.2 focus appearance). Keyboard
only (:focus-visible); scroll-padding-top keeps focused items out from under the floating header. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 4px var(--bg); border-radius: 6px; }
@media (forced-colors: active) { :focus-visible { outline: 3px solid CanvasText; box-shadow: none; } }
.skip-link {
position: fixed; top: 10px; left: 10px; z-index: 1000; transform: translateY(-160%);
padding: 12px 18px; border-radius: 999px; background: var(--ink); color: #fff;
font: 600 15px/1 var(--font-body); text-decoration: none; transition: transform 0.15s ease;
}
.skip-link:focus, .skip-link:focus-visible { transform: none; }
main:focus { outline: none; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.section-head p { color: var(--muted); max-width: 46ch; margin-top: 10px; }
.text-link { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; white-space: nowrap; }
.text-link:hover { color: var(--accent-ink); }
/* Buttons — solid, no gradients */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 48px; padding: 0 26px; border-radius: var(--btn-radius, 999px); border: 1.5px solid var(--ink);
font: 600 15px/1 var(--font-body); text-decoration: none; cursor: pointer;
text-transform: var(--btn-case, none); letter-spacing: var(--btn-track, 0);
transition: background 0.2s, color 0.2s, transform 0.2s;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #2c2c2c; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
/* Header — floating glass pill */
.site-header { position: sticky; top: 0; z-index: 50; padding: 14px var(--gutter) 0; pointer-events: none; }
.header-row {
pointer-events: auto; position: relative;
width: 100%; max-width: calc(var(--max) - 2 * var(--gutter)); margin: 0 auto;
display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 8px 0 18px;
background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(255, 255, 255, 0.95);
border-radius: 999px;
box-shadow: 0 1px 1px rgba(20, 20, 20, 0.03), 0 10px 30px -12px rgba(20, 20, 20, 0.18);
transition: box-shadow 0.3s ease, background 0.3s ease, height 0.3s ease;
}
@supports (backdrop-filter: blur(8px)) {
.header-row { background: rgba(255, 255, 255, 0.66); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); }
}
.site-header.is-scrolled .header-row {
height: 58px; background: rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 1px rgba(20, 20, 20, 0.04), 0 16px 40px -14px rgba(20, 20, 20, 0.28);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; margin-right: 8px; }
.brand .brand-mark { width: 38px; height: 38px; }
.brand .brand-word { display: none; width: auto; height: 15px; }
/* Wide screens show the CHICAGO ★★★★ HAT CLUB wordmark; phones and tablets show the round CHI mark. */
@media (min-width: 1000px) { .brand-has-word .brand-mark { display: none; } .brand-has-word .brand-word { display: block; } }
.brand span { font: 700 15px/1 var(--font-head); letter-spacing: -0.01em; }
.nav { display: flex; gap: 2px; margin: 0 auto; }
.nav a {
position: relative; padding: 9px 16px; border-radius: 999px; text-decoration: none;
font-weight: 600; font-size: 15px; color: var(--muted); transition: color 0.15s, background 0.15s;
}
.nav a:hover { color: var(--ink); background: rgba(20, 20, 20, 0.05); }
.nav a[aria-current="page"] { color: var(--ink); background: rgba(20, 20, 20, 0.07); }
/* Menu link set to "Button" style in the site editor (e.g. "Join the club"). */
.nav a.nav-cta { color: #fff; background: var(--accent-strong); }
.nav a.nav-cta:hover, .nav a.nav-cta[aria-current="page"] { color: #fff; background: var(--accent-strong); filter: brightness(0.94); }
.header-actions { display: flex; align-items: center; gap: 6px; }
.account-link {
white-space: nowrap;
display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px;
text-decoration: none; font-weight: 600; font-size: 15px; color: var(--ink); transition: background 0.15s;
}
.account-link:hover { background: rgba(20, 20, 20, 0.05); }
.account-link svg, .cart-link svg { width: 20px; height: 20px; flex-shrink: 0; }
.cart-link {
display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 14px; border-radius: 999px;
background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px;
transition: background 0.2s, transform 0.2s;
}
.cart-link:hover { background: #2c2c2c; transform: translateY(-1px); }
.cart-count {
min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
}
@media (max-width: 760px) {
.site-header { padding-top: 10px; }
.header-row { height: 56px; padding: 0 6px 0 14px; gap: 2px; }
.site-header.is-scrolled .header-row { height: 52px; }
.brand { margin-right: 2px; }
.brand .brand-mark { width: 32px; height: 32px; }
.brand span { display: none; }
.nav a { padding: 8px 9px; font-size: 14px; }
/* Phones keep the WORD ("Log in" / "Account"), not just an icon — the icon goes instead. */
.account-link { padding: 0 9px; gap: 0; font-size: 14px; }
.account-link svg { display: none; }
.cart-link { height: 42px; padding: 0 10px 0 11px; gap: 6px; }
}
@media (max-width: 360px) { .nav a { padding: 8px 7px; font-size: 13.5px; } }
/* Hero — still photo + headline */
.hero { padding: clamp(28px, 5vw, 64px) 0 var(--section); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero-copy p { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 34ch; margin-top: 20px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-photo { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface-2); box-shadow: var(--shadow-lift); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.eyebrow { font: 600 13px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 18px; }
@media (max-width: 820px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-photo { aspect-ratio: 4 / 4.4; order: -1; }
}
/* Product cards — soft glass, gentle lift */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 980px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.product-card {
display: flex; flex-direction: column; text-decoration: none;
background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product-card-media { position: relative; aspect-ratio: 1; background: #fff; overflow: hidden; }
.product-card-media img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; transition: transform 0.35s ease; }
.product-card-body { flex: 1; }
.product-card-body { padding: 14px 16px 18px; }
.product-card-body h3 { font-size: 0.98rem; line-height: 1.3; }
.product-price { margin-top: 6px; font-weight: 700; }
.product-price s { color: var(--muted); font-weight: 500; margin-right: 6px; }
.product-price .sale { color: var(--sale); }
@media (hover: hover) {
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.product-card:hover .product-card-media img { transform: scale(1.04); }
}
.product-grid-empty { color: var(--muted); grid-column: 1 / -1; }
/* Hat Club band */
.club-band {
display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center;
background: var(--ink); color: #fff; border-radius: 28px; padding: clamp(32px, 6vw, 72px);
}
.club-band .eyebrow { color: #f0a868; }
.club-price { font: 700 clamp(3rem, 7vw, 5rem)/1 var(--font-head); letter-spacing: -0.03em; margin-top: 18px; }
.club-price small { font-size: 0.32em; font-weight: 600; color: rgba(255, 255, 255, 0.7); letter-spacing: 0; }
.club-perks { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }
.club-perks li { display: flex; gap: 12px; align-items: baseline; color: rgba(255, 255, 255, 0.86); }
.club-perks li::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: #f0a868; transform: translateY(-2px); }
.club-perks strong { color: #fff; }
.club-band .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.club-band .btn-primary:hover { background: #f1ede7; }
.club-note { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, 0.6); }
@media (max-width: 820px) { .club-band { grid-template-columns: 1fr; } }
/* Worn in Chicago — horizontal photo strip */
.photo-strip {
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 16px;
overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none;
}
.photo-strip::-webkit-scrollbar { display: none; }
.photo-strip img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); scroll-snap-align: start; background: var(--surface-2); }
.photo-strip-item { position: relative; margin: 0; scroll-snap-align: start; }
.photo-strip-item img { display: block; object-position: center 30%; }
.photo-strip-item figcaption { position: absolute; left: 10px; bottom: 10px; padding: 6px 12px; border-radius: 999px;
background: rgba(20, 20, 20, .72); color: #fff; font: 600 13px/1.2 var(--font-body, inherit); letter-spacing: .02em; backdrop-filter: blur(6px); }
.photo-strip-item figcaption:empty { display: none; }
@media (max-width: 720px) { .photo-strip { grid-auto-columns: 62%; } }
/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 40px; margin-top: var(--section); font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 40px; }
.footer-nap { font-style: normal; color: var(--muted); line-height: 1.6; margin-bottom: 12px; }
.footer-nap strong { color: var(--ink); font-weight: 600; }
.footer-nap a { color: var(--muted); }
.footer-grid h3, .footer-grid .footer-heading { font-size: 0.95rem; margin-bottom: 14px; letter-spacing: -0.01em; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }
.footer-signup p { color: var(--muted); margin-bottom: 14px; max-width: 34ch; }
.signup-form { display: flex; gap: 8px; max-width: 380px; }
.signup-form input {
flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 999px;
border: 1px solid var(--line); background: var(--surface); font: inherit; color: var(--ink);
}
.signup-form .btn { min-height: 46px; padding: 0 20px; }
.signup-status { margin-top: 10px; font-size: 14px; color: var(--muted); min-height: 1.4em; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.footer-base a { color: var(--muted); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-signup { grid-column: 1 / -1; } }
/* One motion system: gentle fade-up as sections enter */
/* Content is visible by default; it only starts hidden once site.js is running (html.fade-ready). */
.fade-ready .fade { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-ready .fade.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.fade-ready .fade { opacity: 1; transform: none; transition: none; }
.product-card, .product-card-media img, .btn { transition: none; }
}
/* ---------- Shop (products.html) — styles the markup script.js renders ---------- */
.shop-head { padding: clamp(32px, 6vw, 72px) 0 24px; }
.shop-head p { color: var(--muted); margin-top: 12px; max-width: 46ch; }
.shop-body { padding-bottom: var(--section); }
.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.shop-search { position: relative; flex: 1 1 260px; max-width: 380px; }
.shop-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); }
.shop-search input, .shop-sort select {
width: 100%; height: 44px; border-radius: 999px; border: 1px solid var(--line);
background: var(--surface); font: inherit; font-size: 15px; color: var(--ink);
}
.shop-search input { padding: 0 16px 0 42px; }
.shop-toolbar-right { display: flex; align-items: center; gap: 16px; }
.shop-count { color: var(--muted); font-size: 15px; white-space: nowrap; }
.shop-sort select { padding: 0 36px 0 16px; appearance: none; cursor: pointer;
background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b655e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; }
.shop-status { text-align: center; color: var(--muted); margin-top: 24px; min-height: 1em; }
.shop-status:empty { display: none; }
.catalog-sentinel { height: 1px; }
.catalog-categories { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 24px; }
.catalog-categories:empty, .catalog-categories:has(> :only-child) { display: none; }
.catalog-category-chip { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: 600 14px var(--font-body); cursor: pointer; color: var(--ink); }
.catalog-category-chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.catalog-category-chip-emoji { display: none; }
.catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 980px) { .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.catalog-empty { grid-column: 1 / -1; color: var(--muted); padding: 40px 0; text-align: center; }
.catalog-card {
position: relative; display: flex; flex-direction: column; cursor: pointer;
background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.catalog-card-media { position: relative; aspect-ratio: 1; background: #fff; overflow: hidden; }
.catalog-card-media > img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; transition: transform 0.35s ease; }
@media (hover: hover) {
.catalog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.catalog-card:hover .catalog-card-media > img { transform: scale(1.04); }
}
.catalog-card-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.catalog-card-title { font-size: 0.98rem; line-height: 1.3; }
.catalog-card-open { all: unset; cursor: pointer; }
.catalog-card-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 4px var(--bg); border-radius: 4px; } /* `all: unset` above wipes the site focus ring — put it back (WCAG 2.4.7) */
.catalog-card-blurb, .catalog-card-stars[hidden] { display: none; }
.catalog-card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.catalog-card-meta:empty { display: none; }
.catalog-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--muted); }
.catalog-pill-sale { background: var(--sale); color: #fff; }
.catalog-pill-featured { background: var(--accent-soft); color: var(--accent-ink); }
.catalog-pill-stock-low { background: var(--accent-soft); color: var(--accent-ink); }
.catalog-pill-stock-out { background: var(--ink); color: #fff; }
.catalog-pill-selected { background: var(--ink); color: #fff; }
.catalog-price { font-weight: 700; }
.catalog-price s { color: var(--muted); font-weight: 500; margin-right: 4px; }
.catalog-price-sale { color: var(--sale); }
.catalog-card-stars { font-size: 13px; color: var(--muted); }
.catalog-card-actions { margin-top: auto; padding-top: 8px; }
.catalog-add-button {
width: 100%; min-height: 40px; border-radius: 999px; border: 1.5px solid var(--ink);
background: transparent; color: var(--ink); font: 600 14px var(--font-body); cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.catalog-add-button:hover { background: var(--ink); color: #fff; }
.catalog-add-soldout, .catalog-add-soldout:hover { border-color: var(--line); color: var(--muted); background: transparent; cursor: not-allowed; }
.catalog-wishlist {
position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%;
border: 0; background: rgba(255, 255, 255, 0.9); box-shadow: var(--shadow); cursor: pointer;
color: var(--muted); font-size: 16px; line-height: 34px; display: grid; place-items: center;
}
.catalog-wishlist.is-saved { color: var(--sale); }
.dk-photo-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: var(--surface-2); }
.dk-photo-fallback-label { font-size: 13px; font-weight: 600; color: var(--muted); }
/* Product popup — sheet on phones, dialog on desktop */
.catalog-modal[hidden] { display: none; }
.catalog-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.catalog-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.45); }
.catalog-modal-dialog {
position: relative; width: min(940px, 100%); max-height: calc(100vh - 48px); overflow: auto;
display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; background: var(--surface); border-radius: 24px;
box-shadow: 0 30px 80px rgba(20, 20, 20, 0.25); animation: modal-in 0.25s ease;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
body.catalog-modal-open { overflow: hidden; }
.catalog-modal-close {
position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
border: 0; background: var(--surface-2); font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink);
}
.catalog-modal-media { position: relative; background: #fff; aspect-ratio: 1; overflow: hidden; }
.catalog-modal-media > img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; }
.catalog-modal-nav {
position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%;
border: 0; background: rgba(255, 255, 255, 0.9); box-shadow: var(--shadow); font-size: 22px; cursor: pointer; color: var(--ink);
}
.catalog-modal-nav-prev { left: 12px; }
.catalog-modal-nav-next { right: 12px; }
.catalog-modal-content { min-width: 0; padding: 40px 32px 32px; display: flex; flex-direction: column; gap: 14px; }
.catalog-modal-option[hidden], .catalog-modal-why { display: none; }
.catalog-modal-reviews:has(.catalog-reviews-empty) { display: none; }
.catalog-modal-content h2 { font-size: 1.6rem; padding-right: 36px; }
#catalog-modal-price { font-size: 1.25rem; }
.catalog-modal-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.catalog-modal-thumbs:empty { display: none; }
.catalog-modal-thumb { width: 56px; height: 56px; padding: 4px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; }
.catalog-modal-thumb.is-active { border-color: var(--ink); }
.catalog-modal-thumb img { width: 100%; height: 100%; object-fit: contain; }
.catalog-modal-option strong { display: block; font-size: 14px; margin-bottom: 8px; }
.catalog-modal-variants { display: flex; flex-wrap: wrap; gap: 8px; }
.catalog-modal-variants.is-scrollable { max-height: 180px; overflow: auto; }
.catalog-variant-chip { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; text-align: left; line-height: 1.3; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font: 600 14px var(--font-body); color: var(--ink); }
.catalog-variant-chip-button { cursor: pointer; }
.catalog-variant-chip-button.is-selected { border-color: var(--ink); background: var(--ink); color: #fff; }
.catalog-modal-buy { display: flex; gap: 10px; margin-top: 6px; }
.catalog-modal-buy .btn { flex: 1; }
.catalog-quantity-stepper { display: flex; align-items: center; height: 48px; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.catalog-qty-button { width: 40px; height: 100%; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--ink); }
.catalog-quantity-stepper input { width: 36px; border: 0; text-align: center; font: 600 15px var(--font-body); background: none; color: var(--ink); -moz-appearance: textfield; }
.catalog-quantity-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.catalog-modal-status { font-size: 14px; color: var(--muted); min-height: 0; }
.catalog-modal-status:empty { display: none; }
.catalog-modal-status.is-error { color: var(--sale); }
.catalog-modal-cart { align-self: flex-start; font-size: 14px; }
.catalog-modal-why, .catalog-modal-reviews, .catalog-modal-also-bought { border-top: 1px solid var(--line); padding-top: 14px; font-size: 14px; color: var(--muted); }
.catalog-modal-why-title, .catalog-reviews-title, .catalog-also-bought-title { display: block; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.catalog-modal-why-list { margin: 0; padding-left: 18px; }
.catalog-review-form { display: grid; gap: 8px; margin-top: 10px; }
.catalog-review-form input, .catalog-review-form textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.catalog-also-bought-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.catalog-also-bought-grid img { aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 10px; }
@media (max-width: 720px) {
.catalog-modal { padding: 0; place-items: end stretch; }
.catalog-modal-dialog { grid-template-columns: minmax(0, 1fr); max-height: 92vh; border-radius: 22px 22px 0 0; animation-name: sheet-in; }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
.catalog-modal-media { aspect-ratio: 4 / 3; }
.catalog-modal-content { padding: 22px 20px 28px; }
}
/* Add-to-cart toast */
.dk-cart-toast {
position: fixed; left: 50%; bottom: 24px; z-index: 200; transform: translate(-50%, 20px);
width: max-content; padding: 14px 22px; border-radius: 16px; background: var(--ink); text-align: center; color: #fff; font-weight: 600; font-size: 15px;
box-shadow: var(--shadow-lift); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s;
max-width: calc(100vw - 32px);
}
.dk-cart-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.dk-cart-toast.is-error { background: var(--sale); }
.cart-count.is-pulsing { animation: pulse 0.7s ease; }
@keyframes pulse { 40% { transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) {
.catalog-card, .catalog-card-media > img, .dk-cart-toast { transition: none; }
.catalog-modal-dialog, .cart-count.is-pulsing { animation: none; }
}
#catalog-modal-meta { display: none; }
/* ---------- Cart + checkout (cart.html) ---------- */
.cart-page { padding: clamp(32px, 6vw, 64px) 0 var(--section); }
.cart-page h1 { margin-bottom: 28px; }
.cart-page h2 { font-size: 1.15rem; margin-bottom: 16px; }
.phone-only { display: none !important; }
/* Checkout runs one step at a time on every screen: Cart → Details → Review & pay. */
.checkout-steps { display: flex; gap: 10px; list-style: none; padding: 0; margin: -8px 0 28px; max-width: 640px; }
.checkout-step { flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.checkout-step::before { content: ""; height: 3px; border-radius: 3px; background: var(--line); }
.checkout-step.is-active, .checkout-step.is-done { color: var(--ink); }
.checkout-step.is-active::before, .checkout-step.is-done::before { background: var(--ink); }
.checkout-step-num { display: none; }
.checkout-step-pane { display: none; }
.checkout-step-pane.is-active { display: block; }
/* Desktop: the summary stays pinned on the right; its Checkout button only belongs to the cart step. */
.cart-layout:not(:has([data-step-pane="cart"].is-active)) .cart-step-nav-checkout { display: none; }
.checkout-step-pane[data-step-pane="details"] > h2, .checkout-step-pane[data-step-pane="review"] .checkout-review-heading { font: 700 1.35rem var(--font-head); margin: 0 0 16px; }
.checkout-step-pane[data-step-pane="details"] .cart-step-nav, .checkout-step-pane[data-step-pane="review"] .cart-step-nav { max-width: 520px; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.cart-layout:not(:has(.checkout-step-pane.is-active)) { display: none; } /* order placed → confirmation only */
.catalog-order-list { display: grid; border-top: 1px solid var(--line); }
.catalog-order-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.catalog-order-item-media { position: relative; width: 96px; aspect-ratio: 1; border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.catalog-order-item-media img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.catalog-order-item-copy strong { display: block; font-size: 1rem; }
.catalog-order-item-copy p { color: var(--muted); font-size: 14px; margin-top: 2px; }
.catalog-order-inline-stepper { display: inline-flex; align-items: center; margin-top: 10px; height: 36px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.catalog-order-step-button { width: 34px; height: 100%; border: 0; background: none; font-size: 17px; cursor: pointer; color: var(--ink); }
.catalog-order-item-qty { min-width: 22px; text-align: center; font-weight: 600; font-size: 14px; }
.catalog-order-item-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.catalog-order-item-price { font-size: 1rem; }
.catalog-order-remove { border: 0; background: none; padding: 0; font: 500 14px var(--font-body); color: var(--muted); text-decoration: underline; cursor: pointer; }
.catalog-order-remove:hover { color: var(--sale); }
.catalog-order-item.is-fresh { animation: line-in 0.5s ease; }
@keyframes line-in { from { background: var(--accent-soft); } }
.catalog-empty-cart { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 56px 16px; }
.catalog-empty-cart-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.catalog-empty-cart p { color: var(--muted); }
.catalog-empty-cart .button { display: inline-flex; align-items: center; min-height: 46px; padding: 0 24px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; margin-top: 6px; }
.cart-keep-shopping { display: inline-block; margin-top: 20px; font-size: 15px; }
.cart-items:has(.catalog-empty-cart) .cart-keep-shopping { display: none; }
.cart-summary { position: sticky; top: 100px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: clamp(20px, 3vw, 28px); background: var(--surface); border-radius: 24px; box-shadow: var(--shadow); }
.cart-layout:has(.catalog-empty-cart) { grid-template-columns: minmax(0, 1fr); }
.cart-layout:has(.catalog-empty-cart) .cart-summary { display: none; }
.cart-promo { display: flex; gap: 8px; align-items: center; }
.cart-promo input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font: inherit; font-size: 15px; color: var(--ink); text-transform: uppercase; }
.cart-promo input::placeholder { text-transform: none; }
.cart-promo .btn { min-height: 44px; padding: 0 18px; }
.cart-promo-remove { border: 0; background: none; color: var(--muted); font: 500 14px var(--font-body); text-decoration: underline; cursor: pointer; }
.cart-promo:not(:has(input:not(:placeholder-shown))) .cart-promo-remove { display: none; }
.catalog-promo-status { font-size: 14px; color: var(--muted); margin-top: 8px; }
.catalog-promo-status:empty { display: none; }
.catalog-promo-status.is-error { color: var(--sale); }
.catalog-promo-status.is-success { color: #2e7d4f; }
.cart-lines { margin: 18px 0 0; display: grid; gap: 10px; }
.cart-lines > div { display: flex; justify-content: space-between; color: var(--muted); }
.cart-lines dt, .cart-lines dd { margin: 0; }
.cart-lines dd { color: var(--ink); font-weight: 600; }
.cart-line-discount[hidden] { display: none; }
.cart-line-total { padding-top: 12px; border-top: 1px solid var(--line); }
.cart-line-total dt, .cart-line-total dd { color: var(--ink); font: 700 1.2rem var(--font-head); }
.checkout-signin-hint { font-size: 14px; color: var(--muted); background: var(--bg); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 14px; }
.checkout-signin-link { border: 0; background: none; padding: 0; font: 600 14px var(--font-body); color: var(--ink); text-decoration: underline; cursor: pointer; }
.checkout-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field span { font-size: 13px; font-weight: 600; }
.field em { font-style: normal; font-weight: 500; color: var(--muted); }
.field input, .field textarea {
width: 100%; min-height: 46px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line);
background: var(--bg); font: inherit; font-size: 16px; color: var(--ink); transition: border-color 0.15s, background 0.15s;
}
.field textarea { resize: vertical; min-height: 64px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid transparent; /* shows in Windows High Contrast, where box-shadow is dropped */ border-color: var(--ink); background: #fff; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink); }
.field-wide { grid-column: 1 / -1; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cart-step-nav { display: flex; gap: 10px; margin-top: 18px; }
.cart-step-nav .btn { flex: 1; }
.checkout-step-pane[data-step-pane="review"] .cart-step-nav { margin-top: 0; }
.cart-fine-print { text-align: center; font-size: 13px; color: var(--muted); margin-top: 10px; }
.catalog-order-status { font-size: 14px; }
.catalog-order-status:empty { display: none; }
.catalog-order-status.is-error { color: var(--sale); }
.checkout-review { display: grid; gap: 10px; margin-bottom: 18px; }
.checkout-review-heading { font: 700 1.15rem var(--font-head); margin: 0 0 6px; }
.checkout-review-rows { display: grid; gap: 8px; }
.checkout-review-line { display: flex; justify-content: space-between; color: var(--muted); }
.checkout-review-line strong { color: var(--ink); }
.checkout-review-total { padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 700; }
.checkout-review-contact, .checkout-review-ship { font-size: 14px; color: var(--muted); }
.order-done { max-width: 560px; margin: 24px auto 0; text-align: center; display: grid; justify-items: center; gap: 12px; padding: clamp(32px, 6vw, 56px) clamp(20px, 4vw, 40px); background: var(--surface); border-radius: 28px; box-shadow: var(--shadow); }
.order-done[hidden] { display: none; }
.order-done-check { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #e5f2ea; color: #2e7d4f; }
.order-done-check svg { width: 30px; height: 30px; }
.order-done.is-error .order-done-check { background: #fbe9e7; color: var(--sale); }
.order-done h2 { font-size: 1.6rem; margin: 0; }
.order-done p { color: var(--muted); }
.order-done-meta { font-weight: 600; color: var(--ink) !important; }
.order-done-meta:empty, .order-done-badges:empty { display: none; }
.order-done-steps { text-align: left; color: var(--muted); font-size: 15px; display: grid; gap: 6px; margin: 6px 0 0; padding-left: 20px; }
.order-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
/* Receipt: print-only (the confirmation card is the on-screen version) */
.order-receipt { display: none !important; max-width: 560px; margin: 24px auto 0; font-size: 14px; }
.order-receipt-head, .order-receipt-parties, .order-receipt-meta { display: grid; gap: 4px; margin-bottom: 14px; }
.order-receipt-brand { font: 700 1.2rem var(--font-head); }
.order-receipt-table { width: 100%; border-collapse: collapse; }
.order-receipt-table td, .order-receipt-table th { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; }
.order-receipt-total-line { display: flex; justify-content: space-between; padding: 4px 0; }
.order-receipt-total-grand { font-weight: 700; }
@media print {
.site-header, .site-footer, .order-done { display: none !important; }
.order-receipt:not([hidden]) { display: block !important; }
}
/* Sign-in popup on the cart */
.checkout-signin-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
.checkout-signin-modal[hidden] { display: none; }
.checkout-signin-backdrop { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.45); }
.checkout-signin-dialog { position: relative; width: min(420px, 100%); display: grid; gap: 14px; padding: 32px 28px 28px; background: var(--surface); border-radius: 24px; box-shadow: 0 30px 80px rgba(20, 20, 20, 0.25); }
.checkout-signin-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--surface-2); font-size: 20px; cursor: pointer; color: var(--ink); }
.checkout-signin-title { font: 700 1.3rem var(--font-head); margin: 0; }
.checkout-signin-copy { color: var(--muted); font-size: 15px; }
.checkout-signin-form { display: grid; gap: 12px; }
.checkout-signin-alt { display: grid; gap: 12px; justify-items: center; font-size: 14px; }
.checkout-signin-alt .btn { width: 100%; }
.form-status { font-size: 14px; color: var(--muted); }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--sale); }
@media (max-width: 899px) {
.phone-only { display: revert !important; }
.cart-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.cart-summary { position: static; padding: 20px; }
/* Phone: the summary card belongs to the cart step; Review & pay repeats the totals itself. */
.cart-layout:not(:has([data-step-pane="cart"].is-active)) .cart-summary { display: none; }
.checkout-steps { gap: 6px; margin: -12px 0 20px; }
.checkout-step { gap: 6px; font-size: 12px; }
.catalog-order-item { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; }
.catalog-order-item-media { width: 76px; }
.checkout-fields { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Hat Club (hat-club.html) ---------- */
.club-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
.club-hero-price { margin-top: 18px !important; color: var(--ink) !important; font-size: 1.1rem !important; }
.club-hero-price strong { font: 700 1.6rem var(--font-head); }
.club-checks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; color: var(--muted); max-width: 40ch; }
.club-checks li { position: relative; padding-left: 30px; }
.club-checks li::before {
content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") no-repeat center / 12px;
}
.club-checks strong { color: var(--ink); }
.club-steps-section { padding-top: 0; }
.club-steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.club-steps li { background: var(--surface); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.club-steps span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; margin-bottom: 18px; }
.club-steps p { color: var(--muted); margin-top: 8px; font-size: 15px; }
@media (max-width: 760px) { .club-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.join-card { max-width: 620px; margin: 0 auto; background: var(--surface); border-radius: 28px; box-shadow: var(--shadow-lift); padding: clamp(24px, 5vw, 44px); display: grid; gap: 20px; }
.join-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.join-price { color: var(--muted); }
.join-price strong { font: 700 1.6rem var(--font-head); color: var(--ink); }
.join-form { display: grid; gap: 16px; }
.join-form[hidden], .join-member[hidden], .join-fine[hidden] { display: none; }
.join-submit { width: 100%; min-height: 52px; font-size: 16px; }
.join-submit:disabled { opacity: 0.6; cursor: progress; }
.join-alt, .join-who { font-size: 15px; color: var(--muted); text-align: center; }
.join-who { text-align: left; }
.join-alt a { color: var(--ink); font-weight: 600; }
.join-member { display: grid; justify-items: center; text-align: center; gap: 12px; }
.join-member h3 { font-size: 1.4rem; }
.join-member p { color: var(--muted); }
.join-status { font-size: 14px; text-align: center; }
.join-status:empty { display: none; }
.join-status.is-error { color: var(--sale); }
.join-fine { font-size: 13px; color: var(--muted); text-align: center; }
.narrow { max-width: 760px; }
.faq { margin-top: 24px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 36px 20px 0; position: relative; font-weight: 600; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--muted); transition: transform 0.2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--muted); padding: 0 0 20px; max-width: 60ch; }
.join-member .hero-actions { justify-content: center; margin-top: 8px; }
/* ---------- Sign in (login.html) ---------- */
.auth-page { padding: clamp(32px, 7vw, 80px) 0 var(--section); }
.auth-card { max-width: 460px; margin: 0 auto; background: var(--surface); border-radius: 28px; box-shadow: var(--shadow-lift); padding: clamp(22px, 5vw, 36px); display: grid; gap: 20px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: var(--surface-2); border-radius: 999px; }
.auth-tab { height: 42px; border: 0; border-radius: 999px; background: none; font: 600 15px var(--font-body); color: var(--muted); cursor: pointer; transition: background 0.2s, color 0.2s; }
.auth-tab.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.auth-form { display: grid; gap: 14px; }
.auth-form[hidden] { display: none; }
.auth-form h1 { font-size: 1.7rem; margin-bottom: 4px; }
.auth-submit { width: 100%; min-height: 50px; margin-top: 4px; }
.auth-submit:disabled, .help-submit:disabled { opacity: 0.6; cursor: progress; }
.auth-link { border: 0; background: none; padding: 4px 0; font: 500 14px var(--font-body); color: var(--muted); text-decoration: underline; cursor: pointer; justify-self: center; }
.auth-link:hover { color: var(--ink); }
.auth-note { font-size: 14px; color: var(--muted); text-align: center; }
/* Sign-in page: "Forgot password?" sits under the password box, right-aligned (the usual spot). */
.auth-link.auth-forgot { justify-self: end; margin-top: -8px; padding: 2px 0; font-size: 13px; }
.auth-alt { width: 100%; min-height: 50px; }
.auth-sent { display: grid; gap: 12px; }
.auth-sent[hidden], [data-flow-ask][hidden] { display: none; }
.auth-sent b { color: var(--ink); word-break: break-all; }
.auth-status, .help-status, .account-msg { font-size: 14px; text-align: center; }
.auth-status:empty, .help-status:empty, .account-msg:empty { display: none; }
/* Status messages only — never a bare .is-error/.is-success (panels also get those classes). */
.auth-status.is-error, .help-status.is-error, .account-msg.is-error, .signup-status.is-error { color: var(--sale); }
.auth-status.is-success, .help-status.is-success, .account-msg.is-success, .signup-status.is-success { color: #2e7d4f; }
.auth-wholesale { max-width: 460px; margin: 20px auto 0; text-align: center; font-size: 14px; color: var(--muted); }
.auth-wholesale a { color: var(--ink); font-weight: 600; }
/* ---------- Account (account.html) ---------- */
.account-page { padding: clamp(32px, 6vw, 64px) 0 var(--section); }
.account-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.account-head .eyebrow { margin-bottom: 10px; }
.account-email { color: var(--muted); margin-top: 8px; }
.account-head .btn { min-height: 42px; }
.account-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: start; }
.account-panel { background: var(--surface); border-radius: 24px; box-shadow: var(--shadow); padding: clamp(20px, 3vw, 28px); display: grid; gap: 12px; }
.account-panel h2 { font-size: 1.2rem; }
.account-panel > div { display: grid; gap: 12px; justify-items: start; }
.account-panel > div[hidden] { display: none; }
.account-saved { grid-column: 1 / -1; }
.account-muted { color: var(--muted); font-size: 15px; }
.account-status { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #2e9d5f; box-shadow: 0 0 0 4px #e5f2ea; }
.account-danger { border: 0; background: none; padding: 0; font: 500 14px var(--font-body); color: var(--muted); text-decoration: underline; cursor: pointer; }
.account-danger:hover { color: var(--sale); }
.order-list { list-style: none; margin: 0; padding: 0; display: grid; }
.order-list li { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.order-list li:first-child { border-top: 0; padding-top: 0; }
.order-list li > div { display: grid; gap: 2px; }
.order-list span { color: var(--muted); font-size: 14px; }
.order-right { justify-items: end; text-align: right; }
.order-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink) !important; font-size: 12px !important; font-weight: 600; }
.order-right .order-pill { white-space: nowrap; }
.order-pill.is-good { background: #e5f2ea; color: #1f6b41 !important; }
.order-pill.is-moving { background: #e6eefb; color: #1d4f9c !important; }
.order-pill.is-warn { background: #fdf0d9; color: #8a5a00 !important; }
.order-pill.is-off { background: var(--surface-2); color: var(--muted) !important; }
.order-list li.order-card { display: grid; gap: 14px; justify-content: stretch; }
.order-top { display: flex !important; justify-content: space-between; gap: 12px; }
.order-top > div { display: grid; gap: 2px; }
.order-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.order-steps li { position: relative; display: grid !important; justify-content: stretch; justify-items: center; text-align: center; gap: 3px; padding: 0 !important; border: 0 !important; font-size: 13px; color: var(--muted); }
.order-steps li::before { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--line); }
.order-steps li:first-child::before { display: none; }
.order-steps li.is-done::before, .order-steps li.is-current::before { background: var(--ink); }
.order-dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); color: #fff !important; font-size: 12px !important; font-weight: 800; }
.order-steps li.is-done .order-dot { background: var(--ink); border-color: var(--ink); }
.order-steps li.is-current .order-dot { box-shadow: 0 0 0 4px var(--surface-2); }
.order-steps li.is-done strong { color: var(--ink); }
.order-steps small { font-size: 12px; color: var(--muted); min-height: 1.2em; }
.order-items { margin: 0; color: var(--muted); font-size: 14px; }
.order-foot { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.order-track { min-height: 38px; padding: 0 16px; font-size: 14px; }
.saved-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.saved-item { display: grid; gap: 8px; text-decoration: none; font-size: 14px; font-weight: 600; }
.saved-item img, .saved-ph { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: var(--radius-sm); border: 1px solid var(--line); padding: 8px; }
.account-help { margin-top: 28px; color: var(--muted); font-size: 15px; }
.account-help a { color: var(--ink); font-weight: 600; }
@media (max-width: 820px) { .account-grid { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Help (help.html) ---------- */
.help-page { padding: clamp(32px, 6vw, 64px) 0 var(--section); }
.help-lede { color: var(--muted); font-size: 1.1rem; margin-top: 12px; }
.help-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 8px; }
.help-jump a { padding: 9px 16px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); text-decoration: none; font-weight: 600; font-size: 14px; }
.help-jump a:hover { background: var(--ink); color: #fff; }
.help-section { padding-top: clamp(40px, 7vw, 72px); scroll-margin-top: 90px; }
.help-section h2 { margin-bottom: 12px; }
.help-section h3 { margin: 24px 0 6px; font-size: 1.05rem; }
.help-section p { color: var(--muted); }
.help-chat-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 20px; padding: 18px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.help-chat-card strong { display: block; font-family: var(--font-head); font-size: 1.05rem; color: var(--ink); }
.help-chat-card span { display: block; color: var(--muted); margin-top: 4px; max-width: 46ch; }
.help-chat-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) { .help-chat-actions, .help-chat-actions .btn { width: 100%; } }
.help-section a { color: var(--ink); font-weight: 600; }
.help-muted { max-width: 62ch; }
.help-form { margin-top: 22px; display: grid; gap: 16px; background: var(--surface); border-radius: 24px; box-shadow: var(--shadow); padding: clamp(20px, 4vw, 32px); }
.help-form select { width: 100%; min-height: 46px; padding: 0 40px 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); font: inherit; font-size: 16px; color: var(--ink); appearance: none;
background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b655e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; }
.help-submit { justify-self: start; min-height: 50px; padding: 0 30px; }
.help-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 8px; }
.help-facts div { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.help-facts dt { font-size: 13px; color: var(--muted); }
.help-facts dd { margin: 4px 0 0; font-weight: 700; }
.help-section .faq { margin-top: 12px; }
@media (max-width: 720px) {
.help-facts { grid-template-columns: minmax(0, 1fr); }
.help-submit { justify-self: stretch; }
}
.account-panel[hidden] { display: none; }
/* ---------- Legal pages + 404 ---------- */
.legal-page { padding: clamp(32px, 6vw, 64px) 0 var(--section); }
.legal-page h1 { margin-bottom: 8px; }
.legal-prose { color: var(--muted); font-size: 1rem; }
.legal-prose h2 { color: var(--ink); font-size: 1.25rem; margin: 36px 0 10px; }
.legal-prose p, .legal-prose ul { margin: 0 0 14px; max-width: 68ch; }
.legal-prose ul { padding-left: 20px; display: grid; gap: 6px; }
.legal-prose a { color: var(--ink); font-weight: 600; }
.legal-updated { font-size: 14px; }
.notfound { text-align: left; }
.notfound-lede { color: var(--muted); font-size: 1.1rem; margin-top: 14px; }
.smart-404-section { padding: 0 0 var(--section); }
.smart-404-section .legal-prose { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.smart-404-section h2 { margin-top: 0; }
/* ---------- Wholesale catalog (catalog.html) ---------- */
.catalog-session { color: var(--muted); margin-top: 10px; font-size: 15px; }
.catalog-categories-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.catalog-categories-scroll::-webkit-scrollbar { display: none; }
.catalog-categories-scroll .catalog-category-chip { flex: 0 0 auto; }
.catalog-categories:has(> :nth-child(2):last-child) { display: none; } /* only "All" + one bucket = no real choice */
.catalog-coming-soon { display: grid; gap: 8px; justify-items: center; padding: 72px 16px; background: var(--surface); border-radius: 24px; box-shadow: var(--shadow); }
.catalog-coming-soon strong { color: var(--ink); font: 700 1.3rem var(--font-head); }
.page-products .shop-toolbar:has(+ .catalog-categories + .catalog-grid .catalog-coming-soon) { display: none; }
/* ---------- Admin dashboard (admin-dashboard.html) — new look over the existing dash-* parts ---------- */
.page-admin-dashboard .admin-page { padding: 28px 0 80px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.admin-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.admin-header-actions { gap: 8px; }
.admin-operator { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); padding: 0 8px; }
.admin-operator[hidden] { display: none; }
.admin-operator strong { color: var(--ink); font-weight: 600; }
.admin-signout { border: 0; cursor: pointer; font: 600 15px var(--font-body); }
.page-admin-dashboard .account-link { width: auto; padding: 0 14px; }
.page-admin-dashboard .account-link span { display: inline; }
/* Section tabs: 5 main + small "more" tools */
.page-admin-dashboard .admin-tabs {
display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none;
padding: 6px; margin: 0 0 20px; background: var(--surface); border-radius: 999px; box-shadow: var(--shadow);
}
.page-admin-dashboard .admin-tabs::-webkit-scrollbar { display: none; }
.page-admin-dashboard .admin-tabs .admin-filter-chip {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
border: 0; border-radius: 999px; background: transparent; color: var(--muted); box-shadow: none;
font: 600 15px var(--font-body); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.page-admin-dashboard .admin-tabs .admin-filter-chip:hover { color: var(--ink); background: rgba(20, 20, 20, 0.05); }
.page-admin-dashboard .admin-tabs .admin-filter-chip.is-active { background: var(--ink); color: #fff; }
.page-admin-dashboard .admin-tabs .admin-filter-chip span {
min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--surface-2); color: var(--ink);
font-size: 12px; line-height: 22px; text-align: center;
}
.page-admin-dashboard .admin-tabs .admin-filter-chip.is-active span { background: #fff; color: var(--ink); }
.page-admin-dashboard .admin-tabs .admin-chip-minor { font-size: 14px; font-weight: 500; }
.admin-tabs-divider { flex: 0 0 1px; align-self: stretch; margin: 8px 6px; background: var(--line); }
.admin-workspace { background: var(--surface); border-radius: 24px; box-shadow: var(--shadow); padding: clamp(16px, 3vw, 28px); min-width: 0; }
.admin-workspace > div { min-width: 0; }
.admin-workspace h3 { font-size: 1.05rem; margin: 26px 0 10px; }
.admin-workspace h3:first-child { margin-top: 0; }
.page-admin-dashboard .form-meta { color: var(--muted); font-size: 14px; margin: 6px 0 10px; }
.page-admin-dashboard .form-meta:empty { display: none; }
/* Order/support status chip rows inside a pane: smaller, outlined */
.admin-workspace .dash-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.admin-workspace .dash-tabs .admin-filter-chip {
height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
font: 600 13px var(--font-body); color: var(--muted); cursor: pointer;
}
.admin-workspace .dash-tabs .admin-filter-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
/* Legacy buttons + form controls used throughout the dashboard */
.page-admin-dashboard .button {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 18px;
border-radius: 999px; border: 1.5px solid var(--ink); font: 600 14px var(--font-body); text-decoration: none; cursor: pointer;
background: transparent; color: var(--ink); transition: background 0.15s, color 0.15s;
}
.page-admin-dashboard .button-primary { background: var(--ink); color: #fff; }
.page-admin-dashboard .button-primary:hover { background: #2c2c2c; }
.page-admin-dashboard .button-secondary:hover { background: var(--ink); color: #fff; }
.page-admin-dashboard .button:disabled { opacity: 0.5; cursor: not-allowed; }
.page-admin-dashboard input[type="text"], .page-admin-dashboard input[type="search"], .page-admin-dashboard input[type="email"],
.page-admin-dashboard input[type="password"], .page-admin-dashboard input[type="number"], .page-admin-dashboard input[type="date"],
.page-admin-dashboard input[type="url"], .page-admin-dashboard input:not([type]), .page-admin-dashboard textarea, .page-admin-dashboard select {
min-height: 42px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line);
background: var(--bg); font: inherit; font-size: 15px; color: var(--ink); max-width: 100%;
}
.page-admin-dashboard textarea { min-height: 80px; width: 100%; }
.page-admin-dashboard input:focus, .page-admin-dashboard textarea:focus, .page-admin-dashboard select:focus { outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink); }
.page-admin-dashboard .dash-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.page-admin-dashboard .dash-toolbar input[type="search"] { flex: 1 1 220px; }
.page-admin-dashboard .dash-field { display: grid; gap: 6px; }
.page-admin-dashboard .dash-field > span { font-size: 13px; font-weight: 600; }
.page-admin-dashboard .dash-field input, .page-admin-dashboard .dash-field select, .page-admin-dashboard .dash-field textarea { width: 100%; }
.page-admin-dashboard .dash-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.page-admin-dashboard .dash-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.page-admin-dashboard .dash-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.page-admin-dashboard .dash-table tr:hover td { background: var(--bg); }
.page-admin-dashboard .dash-editor-backdrop { background: rgba(20, 20, 20, 0.45); }
.page-admin-dashboard .dash-editor { background: var(--surface); border-radius: 24px; box-shadow: 0 30px 80px rgba(20, 20, 20, 0.25); }
@media (max-width: 720px) {
.admin-head h1 { font-size: 1.7rem; }
/* Phones: keep the "View site" menu, as an icon button */
.page-admin-dashboard .admin-site-btn { width: 40px; padding: 0; justify-content: center; }
.page-admin-dashboard .admin-site-btn span { display: none; }
.admin-operator { display: none !important; }
}
.admin-site-btn { border: 0; background: none; cursor: pointer; font: 600 15px var(--font-body); }
.admin-header-actions { margin-left: auto; }
.page-admin-dashboard .dash-field.dash-field-check { display: flex; align-items: center; gap: 10px; }
.page-admin-dashboard .dash-field-check input { width: auto; min-height: 0; }
.page-admin-dashboard .admin-tabs .admin-chip-minor { padding: 0 12px; }
.page-admin-dashboard .dash-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
@media (max-width: 720px) { .page-admin-dashboard .dash-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page-admin-dashboard .admin-tabs .admin-filter-chip { padding: 0 14px; }
.page-admin-dashboard .admin-tabs .admin-chip-minor { padding: 0 10px; }
.auth-tabs { grid-template-columns: repeat(3, 1fr); }
.auth-tab { font-size: 14px; padding: 0 6px; }
.auth-subform { display: grid; gap: 14px; }
.auth-note-left { text-align: left; }
.auth-wholesale-panel h1 { font-size: 1.6rem; }
.account-guest-hint { font-size: 14px; color: var(--muted); margin-top: 4px; }
.account-guest-hint .auth-link { display: inline; padding: 0; font-size: 14px; color: var(--ink); }
/* Reserve room for the product grid while it loads so the footer doesn't jump (CLS). */
.shop-body { min-height: 70vh; }
.legal-callout { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin: 0 0 18px; }
.legal-callout p { color: var(--ink); margin: 0; }
.legal-prose h2[id] { scroll-margin-top: 90px; }
.join-consent { font-size: 13.5px; line-height: 1.55; }
.join-consent strong { color: var(--ink); font-weight: 600; }
.join-consent a { color: var(--ink); font-weight: 600; }
/* Hat Club admin bits */
.dash-hatclub-settings { display: grid; gap: 8px; padding: 16px 18px; margin-bottom: 18px; border-radius: 18px; background: var(--accent-soft); }
.dash-hatclub-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-admin-dashboard .dash-hatclub-row input { width: 90px; }
.dash-credit { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--bg); margin: 8px 0 12px; }
.dash-credit-head { display: flex; justify-content: space-between; align-items: baseline; }
.dash-credit-head span { font: 700 1.2rem var(--font-head); }
.dash-credit-row { display: flex; flex-wrap: wrap; gap: 8px; }
.page-admin-dashboard .dash-credit-row input[type="number"] { width: 120px; }
.page-admin-dashboard .dash-credit-row input[type="text"] { flex: 1 1 160px; }
.dash-credit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.dash-credit-list li { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.dash-credit-list .is-pos { color: #2e7d4f; } .dash-credit-list .is-neg { color: var(--sale); }
/* Hat Club member pricing on cards + popup (only when member pricing is live) */
.catalog-member-line { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: 2px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.catalog-member-line strong { color: var(--ink); }
.catalog-member-line:hover { background: #f1d9c1; }
.catalog-price-member { color: var(--accent-ink); }
.catalog-price-member s { color: var(--muted); font-weight: 500; margin-right: 4px; }
.catalog-pill-member { background: var(--ink); color: #fff; align-self: flex-start; }
#catalog-modal-price .catalog-member-line { margin: 8px 0 0; font-size: 14px; }
/* Account: Hat Club credit */
.account-credit { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); }
.account-credit strong { font: 700 1.4rem var(--font-head); color: var(--ink); }
.account-credit span { color: var(--accent-ink); font-weight: 600; font-size: 14px; }
.account-credit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--muted); width: 100%; }
.account-credit-list li { display: flex; justify-content: space-between; gap: 12px; }
.account-credit-list .is-pos { color: #2e7d4f; font-weight: 600; } .account-credit-list .is-neg { color: var(--ink); font-weight: 600; }
.account-panel > .account-credit-wrap { display: grid; gap: 10px; justify-items: stretch; width: 100%; margin-top: 6px; }
/* Cart: Hat Club member savings + credit */
.cart-line-member dd { color: var(--accent-ink); }
.cart-line-credit dd { color: #2e7d4f; }
.cart-credit-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink); font-weight: 600; }
.cart-credit-toggle input { width: 18px; height: 18px; accent-color: var(--ink); }
.cart-credit-hint, .cart-promo-note { font-size: 13.5px; color: var(--muted); margin-top: 10px; }
.cart-promo-note { background: var(--accent-soft); color: var(--accent-ink); padding: 8px 12px; border-radius: 10px; }
.catalog-order-item-price s { color: var(--muted); font-weight: 500; font-size: 0.9em; margin-right: 2px; }
.catalog-order-item-price .is-member { color: var(--accent-ink); }
.catalog-order-item-note { color: var(--sale) !important; font-weight: 600; }
.catalog-order-item.is-unavailable .catalog-order-item-media { opacity: 0.45; }
/* Order result card: alert icon on errors, spaced status badges */
.order-done .icon-alert { display: none; }
.order-done.is-error .icon-ok { display: none; }
.order-done.is-error .icon-alert { display: block; }
.order-done.is-error h2 { color: var(--sale); }
.order-done-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.flow-next-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 13px; font-weight: 600; }
.order-done.is-error .flow-next-badge { background: #fbe9e7; color: var(--sale); }
/* Hat Club paid join: card form + processing */
.club-card { display: grid; gap: 8px; }
.club-card-label { font-size: 13px; font-weight: 600; }
#club-card-container { min-height: 90px; }
.join-secure { font-size: 12.5px; color: var(--muted); }
.join-renew { font-size: 14px; color: var(--ink) !important; font-weight: 600; }
.join-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--ink); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .join-spinner { animation-duration: 3s; } }
/* Checkout payment step: secure header, card marks, wallets, divider */
.checkout-card { display: grid; gap: 12px; margin-bottom: 14px; }
.checkout-card[hidden] { display: none; }
.checkout-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.checkout-card-title { display: inline-flex; align-items: center; gap: 8px; font: 700 1.05rem var(--font-head); margin: 0; }
.checkout-card-title .lock { width: 18px; height: 18px; color: #2e7d4f; }
.card-marks { display: inline-flex; gap: 6px; }
.card-mark { display: inline-grid; place-items: center; height: 24px; min-width: 38px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--line); background: #fff; font: 800 9px/1 var(--font-body); letter-spacing: 0.02em; }
.card-visa { color: #1a1f71; font-style: italic; font-size: 11px; }
.card-amex { color: #fff; background: #2e77bc; border-color: #2e77bc; }
.card-disc { color: #231f20; font-size: 7.5px; }
.card-mc { position: relative; }
.card-mc i { position: absolute; top: 5px; width: 14px; height: 14px; border-radius: 50%; }
.card-mc i:first-child { left: 7px; background: #eb001b; }
.card-mc i:last-child { left: 15px; background: #f79e1b; mix-blend-mode: multiply; }
#checkout-wallets { display: grid; gap: 10px; }
#checkout-wallets:empty { display: none; }
#checkout-wallets > * { min-height: 48px; }
.checkout-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 2px 0; }
.checkout-or::before, .checkout-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.checkout-or[hidden] { display: none; }
.checkout-processed { font-size: 12.5px; color: var(--muted); text-align: center; margin: 0; }
.checkout-processed strong { color: var(--ink); }
.checkout-afterpay-message:empty { display: none; }
.checkout-afterpay-message { margin-top: 8px; font-size: 13px; }
#checkout-card-status:empty { display: none; }
/* Admin order drawer: payment / refunds / disputes */
.dash-payment { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--bg); margin: 6px 0 12px; }
.dash-payment-head { display: flex; justify-content: space-between; align-items: center; }
.dash-chip.pay-paid { background: #e5f2ea; color: #2e7d4f; }
.dash-chip.pay-refunded, .dash-chip.pay-partially_refunded { background: var(--accent-soft); color: var(--accent-ink); }
.dash-chip.pay-payment_failed { background: #fbe9e7; color: var(--sale); }
.dash-dispute { color: var(--sale); font-weight: 600; font-size: 14px; margin: 0; }
.dash-refund { display: flex; flex-wrap: wrap; gap: 8px; }
.page-admin-dashboard .dash-refund input[type="number"] { width: 120px; }
.page-admin-dashboard .dash-refund input[type="text"] { flex: 1 1 180px; }
/* Header: keep nav labels on one line on the narrowest phones */
.nav a { white-space: nowrap; }
@media (max-width: 380px) {
.header-row { padding: 0 4px 0 10px; }
.brand .brand-mark { width: 28px; height: 28px; }
.nav a { padding: 8px 6px; font-size: 13px; }
.account-link { padding: 0 6px; font-size: 13px; }
.cart-link { padding: 0 9px; }
}
.join-price-tax { font-size: 13px; color: var(--muted); }
.club-turnstile { min-height: 0; display: flex; justify-content: center; }
/* Placeholder (sample) products: clearly marked, never buyable */
.catalog-card-media { position: relative; }
.sample-ribbon {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
padding: 4px 10px;
border-radius: 999px;
background: var(--ink);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
pointer-events: none;
}
.catalog-add-sample { opacity: 0.7; cursor: not-allowed; }
/* Signed-in account menu (header) */
.account-menu-wrap { position: relative; display: inline-flex; }
.account-menu {
position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 230px;
padding: 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
box-shadow: var(--shadow-lift); display: grid; gap: 2px;
}
.account-menu[hidden] { display: none !important; }
.account-menu-who { padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.account-menu-who strong { display: block; font-size: 15px; }
.account-menu-who span { display: block; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.account-menu a, .account-menu button {
display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; border: 0;
background: none; font: inherit; font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; cursor: pointer;
}
.account-menu a:hover, .account-menu button:hover { background: rgba(20, 20, 20, 0.06); }
.account-menu a:focus-visible, .account-menu button:focus-visible { background: rgba(20, 20, 20, 0.06); outline: 2px solid var(--ink); outline-offset: -2px; box-shadow: none; }
.account-menu .account-menu-signout { color: var(--sale); }
/* Announcement bar (Edit site → Announcement bar) */
.announce-bar {
background: var(--ink); color: #fff; text-align: center; font: 600 13.5px/1.4 var(--font-body);
letter-spacing: 0.01em; padding: 10px var(--gutter); text-wrap: balance;
}
.announce-bar a {
color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45);
text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 0.2s;
}
.announce-bar a:hover { text-decoration-color: #fff; }
.announce-bar a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 560px) { .announce-bar { font-size: 12.5px; padding: 8px 16px; } }
/* Rotating bar (featured promotions + welcome message): every slide sits in ONE grid cell, so the
bar is as tall as its tallest slide and never jumps when the text changes. */
.announce-rotator { position: relative; }
.announce-rotator.is-many { padding-left: 40px; padding-right: 40px; }
.announce-track { display: grid; }
.announce-slide { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s linear 0.45s; }
.announce-slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.45s ease, visibility 0s; }
.announce-countdown { font-variant-numeric: tabular-nums; opacity: 0.85; white-space: nowrap; }
.announce-pause {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid;
place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer;
}
.announce-pause:hover { background: rgba(255, 255, 255, 0.22); }
.announce-pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.announce-pause .i-play, .announce-pause.is-paused .i-pause { display: none; }
.announce-pause.is-paused .i-play { display: block; }
@media (max-width: 560px) { .announce-rotator.is-many { padding-left: 16px; padding-right: 40px; } }
@media (prefers-reduced-motion: reduce) { .announce-slide, .announce-slide.is-active { transition: none; } }
/* Welcome offer — footer anchor + one-time popup (site.js). Desktop: centred card; phone: bottom sheet. */
#footer-signup { scroll-margin-top: 96px; }
html.promo-pop-open { overflow: hidden; }
.promo-pop { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; }
.promo-pop-backdrop {
position: absolute; inset: 0; background: rgba(20, 20, 20, 0.5); opacity: 0; transition: opacity 0.25s ease;
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.promo-pop-panel {
position: relative; width: min(440px, 100%); background: var(--surface); color: var(--ink);
border-radius: var(--radius); box-shadow: 0 24px 64px rgba(20, 20, 20, 0.28);
padding: 40px 32px 28px; text-align: center; opacity: 0; transform: translateY(14px) scale(0.98);
transition: opacity 0.25s ease, transform 0.25s ease; max-height: calc(100vh - 48px); overflow: auto;
}
.promo-pop.is-open .promo-pop-backdrop { opacity: 1; }
.promo-pop.is-open .promo-pop-panel { opacity: 1; transform: none; }
.promo-pop-close {
position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0;
background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer;
}
.promo-pop-close:hover { background: rgba(20, 20, 20, 0.06); }
.promo-pop-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.promo-pop-eyebrow {
display: inline-block; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft);
color: var(--accent-ink); font: 700 12px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
}
.promo-pop-title { font: 700 clamp(1.7rem, 5vw, 2.1rem)/1.1 var(--font-head); letter-spacing: -0.02em; margin: 0 0 10px; }
.promo-pop-text { color: var(--muted); margin: 0 auto 22px; max-width: 32ch; }
.promo-pop-form { display: grid; gap: 10px; }
.promo-pop-form input[type=email] {
width: 100%; height: 52px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line);
background: var(--bg); font: inherit; font-size: 16px; color: var(--ink); text-align: center;
}
.promo-pop-form input[type=email]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.promo-pop-form input[aria-invalid=true] { border-color: var(--sale); }
.promo-pop-form .btn { width: 100%; min-height: 52px; }
.promo-pop-status { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.promo-pop-status:empty { margin: 0; min-height: 0; }
.promo-pop-status.is-error { color: var(--sale); }
.promo-pop-fine { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.promo-pop-done { padding: 4px 0 4px; }
.promo-pop-done-title { font: 600 1.1rem/1.4 var(--font-body); margin: 0 0 18px; color: #2e7d4f; }
.promo-pop-done .btn { width: 100%; }
.promo-pop-panel.is-done .promo-pop-text { display: none; }
@media (max-width: 560px) {
.promo-pop { place-items: end stretch; padding: 0; }
.promo-pop-panel {
width: 100%; border-radius: 22px 22px 0 0; padding: 34px 20px calc(22px + env(safe-area-inset-bottom));
transform: translateY(100%); max-height: 88vh;
}
.promo-pop-panel::before {
content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
border-radius: 999px; background: var(--line);
}
.promo-pop-close { top: 8px; right: 8px; }
.promo-pop.is-open .promo-pop-panel { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.promo-pop-backdrop, .promo-pop-panel, .announce-bar a { transition: none; }
.promo-pop-panel { transform: none; }
}
@media print { .promo-pop { display: none !important; } }
/* Preview flash on the field being edited (only appears inside the admin's preview frame) */
@keyframes se-flash { 0%, 100% { outline-color: transparent; } 20%, 70% { outline-color: var(--accent); } }
.se-flash { outline: 3px solid transparent; outline-offset: 4px; border-radius: 6px; animation: se-flash 1.6s ease 1; }
/* ---------- Admin: Edit site ---------- */
.se-bar {
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
padding: 14px 18px; margin-bottom: 16px; border-radius: var(--radius-sm); background: var(--surface);
border: 1px solid var(--line); box-shadow: var(--shadow);
}
.se-bar.is-dirty { border-color: var(--accent); background: var(--accent-soft); }
.se-bar-actions { display: flex; gap: 8px; }
.se-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.se-layout.has-forms { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
@media (max-width: 980px) { .se-layout.has-forms { grid-template-columns: 1fr; } }
.se-bar-left, .se-bar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.se-bar-left select { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); font: 600 14px var(--font-body); background: #fff; }
.se-icon { border: 1px solid var(--line); background: #fff; border-radius: 10px; height: 38px; min-width: 38px; padding: 0 10px; font: 600 15px var(--font-body); cursor: pointer; }
.se-icon:disabled { opacity: 0.35; cursor: default; }
.se-icon.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.se-status { font-size: 14px; }
.se-modal { position: fixed; inset: 0; z-index: 200; background: rgba(20, 20, 20, 0.45); display: grid; place-items: center; padding: 16px; }
.se-modal[hidden] { display: none; }
.se-modal-card { background: #fff; border-radius: 20px; padding: 22px; width: min(620px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: grid; gap: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); }
.se-modal-card h3 { margin: 0; font-size: 1.25rem; } .se-modal-card h4 { margin: 8px 0 0; }
.se-modal-msg { color: var(--sale); font-weight: 600; min-height: 0; }
.se-np-url { display: flex; align-items: center; gap: 2px; font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.se-np-url input { flex: 1; min-width: 140px; }
.se-starters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.se-starter { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 14px; padding: 12px; cursor: pointer; }
.se-starter:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.se-starter input { margin: 0; } .se-starter small { color: var(--muted); }
.se-starter-copy select { margin-top: 6px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line); font: inherit; }
.se-linkbox { display: flex; gap: 8px; } .se-linkbox input { flex: 1; min-width: 0; font: 13px ui-monospace, monospace; }
.se-hint { margin: -6px 0 12px; font-size: 13px; color: var(--muted); }
.se-forms { display: grid; gap: 10px; max-height: calc(100vh - 160px); overflow: auto; padding-right: 4px; }
@media (max-width: 980px) { .se-forms { max-height: none; overflow: visible; } }
.se-section { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 4px 14px 12px; }
.se-section > summary { cursor: pointer; font-weight: 700; padding: 10px 0; list-style-position: inside; }
.se-field { display: grid; gap: 6px; margin: 10px 0; }
.se-field > span { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.se-field input[type=text], .se-field textarea {
width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line);
background: #fff; font: inherit; color: inherit;
}
.se-field textarea { resize: vertical; }
.se-count { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.se-help { color: var(--muted); font-size: 12px; }
.se-toggle { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-weight: 600; font-size: 14px; }
.se-image-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.se-image-row img { width: 64px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.se-image .linkish { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.se-upload { cursor: pointer; }
.se-preview { position: relative; }
@media (max-width: 980px) { .se-preview { position: static; } }
.se-preview-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.se-preview-bar select { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); font: inherit; background: #fff; }
.se-device { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.se-device button { border: 0; background: none; font: 600 13px var(--font-body); padding: 6px 12px; border-radius: 999px; cursor: pointer; color: var(--muted); }
.se-device button.is-on { background: var(--ink); color: #fff; }
.se-preview-tag { font-size: 12px; color: var(--muted); }
.se-frame-wrap { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--bg); box-shadow: var(--shadow); height: calc(100vh - 230px); min-height: 560px; }
.se-frame-wrap iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
.se-frame-wrap.is-phone { width: 390px; max-width: 100%; margin: 0 auto; border-radius: 32px; border-width: 8px; border-color: var(--ink); }
.se-history { margin: 18px 0; }
.se-history > summary { cursor: pointer; font-weight: 700; }
/* ---------- Visual editor output (presets only — what the owner can apply) ---------- */
/* Text sizes: body-text spots scale from their own size; headings get their own steps (an em step on
a big headline would SHRINK it, since em is relative to the parent). */
.ed-size-s { font-size: 0.85em !important; }
.ed-size-l { font-size: 1.25em !important; }
.ed-size-xl { font-size: 1.6em !important; line-height: 1.15; }
h1.ed-size-s { font-size: clamp(1.9rem, 4vw, 2.6rem) !important; }
h1.ed-size-l { font-size: clamp(3.2rem, 7.5vw, 5.4rem) !important; line-height: 1.02; }
h1.ed-size-xl { font-size: clamp(3.8rem, 9.5vw, 6.8rem) !important; line-height: 0.98; }
h2.ed-size-s { font-size: clamp(1.3rem, 2.4vw, 1.6rem) !important; }
h2.ed-size-l { font-size: clamp(2.4rem, 5vw, 3.6rem) !important; line-height: 1.05; }
h2.ed-size-xl { font-size: clamp(3rem, 6.5vw, 4.8rem) !important; line-height: 1; }
:is(h3, h4).ed-size-s { font-size: 1rem !important; }
:is(h3, h4).ed-size-l { font-size: 1.55rem !important; }
:is(h3, h4).ed-size-xl { font-size: 2rem !important; }
.ed-weight-bold { font-weight: 700 !important; }
.ed-weight-normal { font-weight: 400 !important; }
.ed-align-left { text-align: left !important; }
.ed-align-center { text-align: center !important; margin-left: auto; margin-right: auto; }
.ed-align-right { text-align: right !important; margin-left: auto; }
.ed-color-ink { color: var(--ink) !important; }
.ed-color-muted { color: var(--muted) !important; }
.ed-color-accent { color: var(--accent-ink) !important; }
.ed-color-sale { color: var(--sale) !important; }
.ed-color-white { color: #fff !important; }
/* section backgrounds */
.ed-bg { background-color: var(--ed-bg, transparent); }
.ed-bg-surface { --ed-bg: var(--surface); }
.ed-bg-bg { --ed-bg: var(--bg); }
.ed-bg-sand { --ed-bg: var(--surface-2); }
.ed-bg-accent-soft { --ed-bg: var(--accent-soft); }
.ed-bg-accent { --ed-bg: var(--accent); }
.ed-bg-ink { --ed-bg: var(--ink); }
.ed-bg-photo { background: linear-gradient(rgba(10, 10, 10, 0.45), rgba(10, 10, 10, 0.55)), var(--ed-bg-image) center / cover no-repeat; }
.ed-bg-dark, .ed-bg-dark h1, .ed-bg-dark h2, .ed-bg-dark h3, .ed-bg-dark p, .ed-bg-dark li, .ed-bg-dark .eyebrow { color: #fff; }
.ed-bg-dark .btn-primary { background: #fff; color: var(--ink); }
.ed-bg-dark .btn-ghost { color: #fff; border-color: #fff; }
/* added-section designs */
.ed-added .narrow, .wrap.narrow { max-width: 760px; }
.ed-text h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.ed-text p { color: var(--muted); font-size: 1.08rem; margin-top: 16px; white-space: normal; }
.ed-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.ed-split-photo { border-radius: var(--radius-lg, 28px); overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface-2); box-shadow: var(--shadow-lift); }
.ed-split-photo img { width: 100%; height: 100%; object-fit: cover; }
.ed-split-copy h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.ed-split-copy p:not(.eyebrow) { color: var(--muted); font-size: 1.08rem; margin-top: 16px; }
@media (max-width: 760px) { .ed-split { grid-template-columns: 1fr; } }
.ed-banner { background: var(--ink); color: #fff; border-radius: var(--radius-lg, 28px); padding: clamp(36px, 6vw, 72px); text-align: center; display: grid; justify-items: center; gap: 18px; }
.ed-banner h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); max-width: 22ch; }
.ed-banner .eyebrow { color: #f0a868; margin: 0; }
.ed-banner .btn-primary { background: #fff; color: var(--ink); }
.ed-photos h2 { margin-bottom: 28px; }
.ed-photos-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ed-photos-row img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius, 18px); }
@media (max-width: 760px) { .ed-photos-row { grid-template-columns: 1fr 1fr; } .ed-photos-row img:last-child { display: none; } }
.ed-quote { text-align: center; }
.ed-quote blockquote { font: 600 clamp(1.5rem, 3.2vw, 2.3rem)/1.25 var(--font-head); margin: 0; }
.ed-quote p { color: var(--muted); margin-top: 18px; font-weight: 600; }
.is-editing-site .admin-page > .wrap { max-width: none; }
/* ---------------------------------------------------------------- editor videos (assets/video.js) */
.dk-video { position: relative; width: 100%; margin: 0; border-radius: var(--radius-lg, 28px); overflow: hidden; background: #111; box-shadow: var(--shadow-lift); aspect-ratio: 16 / 9; }
.dk-video[hidden] { display: none; }
.dk-shape-wide { aspect-ratio: 16 / 9; }
/* tall/portrait: width derived from the height cap, so the box never collapses (video is absolutely placed) */
.dk-shape-tall { aspect-ratio: 9 / 16; width: min(100%, 82vh * 9 / 16, 520px); margin-inline: auto; }
.dk-shape-square { aspect-ratio: 1 / 1; }
.dk-shape-portrait { aspect-ratio: 4 / 5; width: min(100%, 86vh * 4 / 5, 720px); margin-inline: auto; }
.dk-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #111; }
.dk-video-feature.is-playing video { object-fit: contain; }
.dk-video-play {
position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer;
background: rgba(255, 255, 255, 0.94); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 10px rgba(255, 255, 255, 0.18);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dk-video-play span { position: absolute; left: 34px; top: 27px; border-style: solid; border-width: 15px 0 15px 24px; border-color: transparent transparent transparent var(--ink); }
.dk-video-play:hover, .dk-video-play:focus-visible { transform: scale(1.07); box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4), 0 0 0 14px rgba(255, 255, 255, 0.22); }
.dk-video.is-playing .dk-video-play { display: none; }
.dk-video-toggle {
position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
background: rgba(20, 20, 20, 0.55); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.dk-video-toggle::before { content: ""; position: absolute; left: 14px; top: 13px; width: 4px; height: 14px; background: #fff; box-shadow: 8px 0 0 #fff; }
.dk-video-toggle.is-paused::before { left: 16px; width: 0; height: 0; background: none; box-shadow: none; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; }
.ed-video { display: grid; gap: 28px; }
.ed-video-copy { max-width: 720px; }
.ed-video-copy h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.ed-video-copy p { color: var(--muted); font-size: 1.08rem; margin-top: 12px; }
.ed-bg-dark .ed-video-copy p { color: rgba(255, 255, 255, 0.86); }
/* section background video */
.ed-bg-video { position: relative; isolation: isolate; overflow: hidden; background: #111; }
.ed-bg-video > *:not(.dk-bg-video) { position: relative; z-index: 1; }
.dk-bg-video { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dk-bg-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-bg-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(10, 10, 10, 0.45), rgba(10, 10, 10, 0.6)); }
/* full-screen cinema */
.dk-cinema { position: fixed; inset: 0; z-index: 9999; background: rgba(8, 8, 8, 0.94); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px; }
.dk-cinema[hidden] { display: none; }
.dk-cinema video { width: min(1280px, 100%); max-height: 86vh; border-radius: var(--radius, 18px); background: #000; }
.dk-cinema-close { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
html.dk-cinema-open { overflow: hidden; }
/* Zoom lightbox over the product's own photos (script.js window.chcZoomLightbox) — always dark, phone-safe. */
.chc-zoom { position: fixed; inset: 0; z-index: 10000; background: #0a0a0a; color: #fff; overscroll-behavior: contain; }
.chc-zoom[hidden] { display: none; }
html.chc-zoom-open { overflow: hidden; }
.chc-zoom-stage {
position: absolute; inset: max(64px, env(safe-area-inset-top)) 0 calc(56px + env(safe-area-inset-bottom)); display: flex;
align-items: center; justify-content: center; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
}
.chc-zoom-img { max-width: 100%; max-height: 100%; transform-origin: center; cursor: zoom-in; -webkit-user-drag: none; transition: transform 0.18s ease, opacity 0.2s; }
.chc-zoom.is-zoomed .chc-zoom-img { cursor: grab; transition: none; }
.chc-zoom.is-loading .chc-zoom-img { opacity: 0.25; }
.chc-zoom-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.chc-zoom-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.chc-zoom-nav[hidden] { display: none; }
.chc-zoom-prev { left: 12px; }
.chc-zoom-next { right: 12px; }
.chc-zoom-close:focus-visible, .chc-zoom-nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.chc-zoom-caption { position: absolute; left: 16px; right: 16px; bottom: max(14px, env(safe-area-inset-bottom)); margin: 0; text-align: center; font: 500 14px/1.4 var(--font-body); color: rgba(255, 255, 255, 0.86); }
.chc-zoom-count { margin-left: 8px; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .chc-zoom-stage { bottom: calc(118px + env(safe-area-inset-bottom)); } .chc-zoom-nav { top: auto; bottom: calc(66px + env(safe-area-inset-bottom)); transform: none; width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .chc-zoom-img { transition: none; } }
@media (max-width: 760px) {
.dk-video { border-radius: var(--radius, 18px); }
.dk-video-play { width: 70px; height: 70px; }
.dk-video-play span { left: 28px; top: 22px; border-width: 13px 0 13px 20px; }
}
@media (prefers-reduced-motion: reduce) { .dk-video-play { transition: none; } }
/* ---------------------------------------------------------------- block system (site_copy LAYOUTS / SECTION_STYLE) */
/* Style tab: spacing, width, alignment, phone/computer only */
main > section.ed-space-s { padding-top: calc(var(--section) * 0.5); padding-bottom: calc(var(--section) * 0.5); }
main > section.ed-space-l { padding-top: calc(var(--section) * 1.5); padding-bottom: calc(var(--section) * 1.5); }
.ed-width-narrow > .wrap { max-width: 760px; }
.ed-width-full > .wrap { max-width: none; }
.ed-width-full > .wrap.narrow { max-width: none; }
.ed-align-center .ed-block, .ed-align-center .ed-video-copy { text-align: center; margin-inline: auto; }
.ed-align-center .hero-actions { justify-content: center; }
.ed-align-center .ed-photos-row, .ed-align-center .dk-video { text-align: initial; }
@media (min-width: 761px) { html:not(.ed-on) .ed-device-phone { display: none; } }
@media (max-width: 760px) { html:not(.ed-on) .ed-device-computer { display: none; } }
/* Layout tab: one class per variant (default variant = no class = the original v2 look) */
.ed-layout-center .ed-text { text-align: center; }
.ed-layout-center .ed-text .hero-actions { justify-content: center; }
.ed-layout-photo-right .ed-split-photo { order: 2; }
.ed-layout-photo-top .ed-split { grid-template-columns: 1fr; max-width: 860px; margin-inline: auto; }
.ed-layout-photo-top .ed-split-photo { aspect-ratio: 16 / 9; }
.ed-layout-split .ed-banner { grid-template-columns: 1fr auto; justify-items: start; text-align: left; align-items: center; column-gap: 32px; }
.ed-layout-split .ed-banner .eyebrow { grid-column: 1 / -1; }
.ed-layout-split .ed-banner h2 { max-width: none; }
.ed-layout-two .ed-photos-row { grid-template-columns: 1fr 1fr; }
.ed-layout-two .ed-photos-row img:nth-child(3) { display: none; }
.ed-layout-feature .ed-photos-row { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.ed-layout-feature .ed-photos-row img:first-child { grid-row: 1 / 3; height: 100%; aspect-ratio: auto; }
.ed-layout-feature .ed-photos-row img:not(:first-child) { aspect-ratio: 4 / 3; }
.ed-layout-left .ed-quote { text-align: left; border-left: 4px solid var(--accent); padding-left: clamp(18px, 3vw, 32px); }
.ed-layout-left .ed-video, .ed-layout-right .ed-video { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: clamp(28px, 5vw, 64px); }
.ed-layout-left .ed-video .dk-video { order: -1; }
.ed-layout-right .ed-video { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.ed-layout-right .ed-video .dk-video { order: 2; }
@media (max-width: 760px) {
.ed-layout-split .ed-banner { grid-template-columns: 1fr; }
.ed-layout-feature .ed-photos-row { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.ed-layout-feature .ed-photos-row img:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
.ed-layout-feature .ed-photos-row img:last-child { display: block; }
.ed-layout-left .ed-video, .ed-layout-right .ed-video { grid-template-columns: 1fr; }
.ed-layout-right .ed-video .dk-video { order: -1; }
}
/* ---------------------------------------------------------------- block library (site_blocks.py) */
.ed-block-empty { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--radius-sm, 12px); background: #fff4e5; color: #8a4b08; font-weight: 600; font-size: 14px; }
/* hero */
.ed-added-hero { position: relative; isolation: isolate; overflow: hidden; padding: 0 !important; }
.ed-added-hero .ed-hero-media { position: absolute; inset: 0; z-index: -1; }
.ed-added-hero .ed-hero-media .dk-bg-video { position: absolute; }
.ed-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-added-hero .ed-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 10, 0.68), rgba(10, 10, 10, 0.2) 70%); }
.ed-hero { min-height: clamp(420px, 72vh, 760px); display: flex; align-items: center; padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(48px, 8vw, 96px); }
.ed-hero-copy { max-width: 620px; color: #fff; }
.ed-hero-copy .eyebrow { color: #f0b27a; }
.ed-hero-title { color: #fff; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.02em; }
.ed-hero-body { color: rgba(255, 255, 255, 0.88); font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin-top: 18px; max-width: 46ch; }
.ed-added-hero .btn-primary { background: #fff; color: var(--ink); }
.ed-added-hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.85); }
.ed-added-hero .btn-ghost:hover { background: #fff; color: var(--ink); }
.ed-layout-center .ed-hero { justify-content: center; text-align: center; min-height: min(92vh, 900px); }
.ed-layout-center .ed-hero-copy { margin-inline: auto; } .ed-layout-center .ed-hero-body { margin-inline: auto; }
.ed-layout-center .ed-hero .hero-actions { justify-content: center; }
.ed-layout-center .ed-hero-media::after { background: rgba(10, 10, 10, 0.45); }
.ed-layout-split.ed-added-hero { padding: var(--section) 0 !important; }
.ed-layout-split .ed-hero-media { position: relative; z-index: 0; order: 2; border-radius: var(--radius-lg, 28px); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-lift); }
.ed-layout-split .ed-hero-media::after { display: none; }
.ed-layout-split.ed-added-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: clamp(28px, 5vw, 64px); max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter) !important; }
.ed-layout-split .ed-hero { min-height: 0; padding: 0; } .ed-layout-split .wrap.ed-hero { padding: 0; }
.ed-layout-split .ed-hero-copy { color: var(--ink); } .ed-layout-split .ed-hero-title { color: var(--ink); }
.ed-layout-split .ed-hero-body { color: var(--muted); } .ed-layout-split .ed-hero-copy .eyebrow { color: var(--accent-ink, var(--accent)); }
.ed-layout-split.ed-added-hero .btn-primary { background: var(--ink); color: #fff; }
.ed-layout-split.ed-added-hero .btn-ghost { color: var(--ink); border-color: var(--ink); }
@media (max-width: 760px) {
.ed-added-hero .ed-hero-media::after { background: linear-gradient(180deg, rgba(10, 10, 10, 0.25), rgba(10, 10, 10, 0.72)); }
.ed-hero { align-items: flex-end; min-height: 78vh; }
.ed-layout-split.ed-added-hero { grid-template-columns: 1fr; }
.ed-layout-split .ed-hero-media { order: -1; aspect-ratio: 4 / 3; }
}
/* product grid / featured */
.ed-layout-grid3 .ed-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ed-layout-row .ed-product-grid, .ed-layout-row .ed-gal, .ed-layout-row .ed-review-list, .ed-added-gallery:not(.ed-layout-grid) .ed-gal {
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 23%); grid-template-columns: none; overflow-x: auto;
scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 6px; }
.ed-layout-row .ed-product-grid > *, .ed-gal > *, .ed-layout-row .ed-review-list > * { scroll-snap-align: start; }
.ed-layout-row .ed-product-grid::-webkit-scrollbar, .ed-gal::-webkit-scrollbar, .ed-review-list::-webkit-scrollbar { display: none; }
@media (max-width: 720px) {
.ed-layout-grid3 .ed-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-layout-row .ed-product-grid, .ed-layout-row .ed-review-list, .ed-added-gallery:not(.ed-layout-grid) .ed-gal { grid-auto-columns: 72%; }
}
.dk-carousel-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.dk-carousel-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line, #e3ddd4); background: var(--surface, #fff); color: var(--ink); font-size: 20px; cursor: pointer; }
.dk-carousel-nav button:disabled { opacity: 0.35; cursor: default; }
.ed-featured { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ed-featured-photo { display: block; border-radius: var(--radius-lg, 28px); overflow: hidden; background: #fff; aspect-ratio: 1; box-shadow: var(--shadow-lift); }
.ed-featured-photo img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s ease; }
.ed-featured-photo:hover img { transform: scale(1.04); }
.ed-featured-copy h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
.ed-featured-price { font: 700 1.4rem/1.2 var(--font-head); margin: 12px 0 0; }
.ed-featured-price s { color: var(--muted); font-weight: 500; margin-right: 8px; } .ed-featured-price .sale { color: var(--sale); }
.ed-featured-copy p:not(.eyebrow):not(.ed-featured-price) { color: var(--muted); font-size: 1.08rem; margin-top: 14px; }
.ed-layout-photo-right .ed-featured-photo { order: 2; }
@media (max-width: 760px) { .ed-featured { grid-template-columns: 1fr; } .ed-layout-photo-right .ed-featured-photo { order: 0; } }
/* category tiles */
.ed-collections h2, .ed-gallery h2, .ed-icons h2, .ed-reviews h2 { margin-bottom: 28px; font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.ed-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.ed-tile { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-lg, 28px); overflow: hidden; background: var(--surface-2, #efe9e0); text-decoration: none; color: #fff; }
.ed-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.ed-tile:hover img { transform: scale(1.05); }
.ed-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10, 10, 10, 0.62)); }
.ed-tile span { position: absolute; left: 18px; bottom: 16px; z-index: 1; font: 700 1.25rem/1.1 var(--font-head); }
.ed-layout-round .ed-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); text-align: center; }
.ed-layout-round .ed-tile { aspect-ratio: 1; border-radius: 50%; color: var(--ink); overflow: visible; background: none; }
.ed-layout-round .ed-tile img { border-radius: 50%; background: var(--surface-2, #efe9e0); aspect-ratio: 1; }
.ed-layout-round .ed-tile::after { display: none; }
.ed-layout-round .ed-tile span { position: static; display: block; margin-top: 10px; font-size: 1.05rem; }
@media (max-width: 720px) { .ed-tiles { grid-template-columns: 1fr 1fr; gap: 12px; } }
/* gallery */
.ed-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ed-gal-item { margin: 0; border-radius: var(--radius, 18px); overflow: hidden; background: var(--surface-2, #efe9e0); }
.ed-gal-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
@media (max-width: 720px) { .ed-layout-grid .ed-gal { grid-template-columns: 1fr 1fr; gap: 10px; } }
/* icons */
.ed-icon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 3vw, 32px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ed-icon-list.ed-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ed-icon-list.ed-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ed-icon { width: 34px; height: 34px; color: var(--accent); margin-bottom: 12px; }
.ed-icon-item h3 { font-size: 1.15rem; margin: 0; } .ed-icon-item p { color: var(--muted); margin: 6px 0 0; }
.ed-layout-cards .ed-icon-item { background: var(--surface, #fff); border-radius: var(--radius, 18px); padding: 24px; box-shadow: var(--shadow-lift); }
.ed-bg-dark .ed-icon-item p { color: rgba(255, 255, 255, 0.82); } .ed-bg-dark.ed-layout-cards .ed-icon-item { color: var(--ink); }
.ed-bg-dark.ed-layout-cards .ed-icon-item h3 { color: var(--ink); } .ed-bg-dark.ed-layout-cards .ed-icon-item p { color: var(--muted); }
@media (max-width: 760px) { .ed-icon-list, .ed-icon-list.ed-n3 { grid-template-columns: 1fr 1fr; } }
/* reviews */
.ed-review-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.ed-review { margin: 0; background: var(--surface, #fff); border-radius: var(--radius, 18px); padding: 24px; box-shadow: var(--shadow-lift); display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.ed-review blockquote { margin: 0; font-size: 1.08rem; line-height: 1.5; color: var(--ink); }
.ed-review figcaption { color: var(--muted); font-weight: 600; margin-top: auto; }
.ed-stars { margin: 0; color: #e0a100; letter-spacing: 2px; } .ed-stars span { color: #d9d2c7; }
.ed-layout-big .ed-review-list { grid-auto-flow: column; grid-auto-columns: 100%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ed-layout-big .ed-review { scroll-snap-align: start; text-align: center; align-items: center; padding: clamp(28px, 5vw, 56px); }
.ed-layout-big .ed-review blockquote { font: 600 clamp(1.4rem, 3vw, 2.1rem)/1.3 var(--font-head); max-width: 30ch; }
/* faq */
.ed-faq h2 { margin-bottom: 18px; }
.ed-faq-item { border-bottom: 1px solid var(--line, #e3ddd4); }
.ed-faq-item summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; font-weight: 700; font-size: 1.08rem; position: relative; }
.ed-faq-item summary::-webkit-details-marker { display: none; }
.ed-faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; transition: transform 0.2s; }
.ed-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.ed-faq-item p { margin: 0 0 18px; color: var(--muted); }
.ed-layout-boxed .ed-faq-item { border: 0; background: var(--surface, #fff); border-radius: var(--radius-sm, 12px); padding: 0 20px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
.ed-bg-dark .ed-faq-item p { color: rgba(255, 255, 255, 0.82); } .ed-bg-dark.ed-layout-boxed .ed-faq-item, .ed-bg-dark.ed-layout-boxed .ed-faq-item summary { color: var(--ink); }
.ed-bg-dark.ed-layout-boxed .ed-faq-item p { color: var(--muted); }
/* sale countdown */
.ed-layout-accent .ed-sale { background: var(--accent-strong); }
.ed-layout-accent .ed-sale .eyebrow { color: rgba(255, 255, 255, 0.85); }
.ed-countdown { display: flex; gap: clamp(8px, 2vw, 18px); justify-content: center; }
.ed-countdown span { display: grid; justify-items: center; min-width: clamp(58px, 9vw, 86px); padding: 10px 6px; border-radius: var(--radius-sm, 12px); background: rgba(255, 255, 255, 0.1); }
.ed-countdown b { font: 700 clamp(1.6rem, 4vw, 2.6rem)/1 var(--font-head); color: #fff; font-variant-numeric: tabular-nums; }
.ed-countdown small { color: rgba(255, 255, 255, 0.75); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
/* signup */
.ed-signup { text-align: center; } .ed-signup h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.ed-signup > p { color: var(--muted); margin-top: 10px; }
.ed-signup-box { margin: 22px auto 0; max-width: 480px; }
.ed-signup .signup-form { display: flex; gap: 8px; }
.ed-signup .signup-form input[type=email] { flex: 1; min-width: 0; height: 52px; border-radius: var(--radius-lg, 28px); border: 1px solid var(--line, #e3ddd4); padding: 0 20px; font: inherit; background: #fff; }
.ed-signup-note { font-size: 13px; }
.ed-layout-box .ed-signup { background: var(--surface, #fff); border-radius: var(--radius-lg, 28px); padding: clamp(28px, 5vw, 56px); box-shadow: var(--shadow-lift); }
.ed-bg-dark .ed-signup > p { color: rgba(255, 255, 255, 0.85); } .ed-bg-dark.ed-layout-box .ed-signup h2, .ed-bg-dark.ed-layout-box .ed-signup > p { color: var(--ink); }
@media (max-width: 480px) { .ed-signup .signup-form { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .ed-tile img, .ed-featured-photo img { transition: none; } }
/* readable small labels on light backgrounds (plain --accent is only 3.2:1 on cream) */
.ed-featured-copy .eyebrow, .ed-split-copy .eyebrow, .ed-layout-split .ed-hero-copy .eyebrow, .ed-text .eyebrow, .ed-visit-card .eyebrow { color: var(--accent-ink); }
.ed-bg-dark .ed-featured-copy .eyebrow, .ed-bg-dark .ed-split-copy .eyebrow, .ed-bg-dark.ed-layout-split .ed-hero-copy .eyebrow { color: #f0b27a; }
[data-dk-carousel]:focus-visible { outline-offset: 4px; border-radius: var(--radius-sm, 12px); }
/* ---------------------------------------------------------------- design system (site_design.py) */
/* Colour schemes on sections follow the brand colours. Brand scheme text is white OR ink — whichever
reads (site_design.dark_schemes decides; light brand colours don't get .ed-bg-dark). */
.ed-bg-accent:not(.ed-bg-dark) { color: var(--ink); }
.ed-bg-dark .eyebrow { color: var(--accent-on-dark, #f0b27a); }
.ed-bg-accent.ed-bg-dark .eyebrow { color: rgba(255, 255, 255, 0.85); }
/* Cards stay light inside dark sections, so their words stay dark (a "light island"). */
.ed-bg-dark.ed-bg-dark :where(.product-card, .ed-review, .ed-layout-cards .ed-icon-item, .ed-layout-boxed .ed-faq-item, .ed-layout-box .ed-signup) :where(h1, h2, h3, h4, p, li, summary, blockquote, .eyebrow) { color: var(--ink); }
.ed-bg-dark.ed-bg-dark :where(.ed-review) figcaption, .ed-bg-dark.ed-bg-dark :where(.ed-layout-cards .ed-icon-item, .ed-layout-boxed .ed-faq-item) p { color: var(--muted); }
.ed-bg-dark.ed-bg-dark .ed-stars { color: #e0a100; }
.ed-bg-dark.ed-bg-dark .product-card .product-price .sale { color: var(--sale); }
/* draft preview link bar */
.dk-preview-bar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 9998; background: var(--ink); color: #fff; font: 600 13px/1.3 var(--font-body); padding: 10px 16px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); max-width: calc(100vw - 24px); text-align: center; }
/* Hat Club — account membership panel + cancel screen */
.account-club-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.account-club-actions:not(:has(> :not([hidden]))) { display: none; }
.account-club-actions [hidden], .cancel-flow[hidden], .cancel-offer[hidden] { display: none; }
.account-allowance { font-size: 14px; font-weight: 600; color: var(--ink); }
.status-dot.is-warn { background: var(--sale); }
.cancel-flow { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface, #fff); }
.cancel-flow h3 { font-size: 1.15rem; margin: 0; }
.cancel-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.cancel-facts li { padding-left: 22px; position: relative; }
.cancel-facts li::before { content: "•"; position: absolute; left: 6px; color: var(--accent); font-weight: 700; }
.cancel-facts strong { color: var(--ink); }
.cancel-offer { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); font-size: 14px; }
.cancel-offer p { margin: 0; color: var(--ink); }
.cancel-offer-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cancel-offer-row .btn { padding: 8px 6px; min-width: 0; min-height: 44px; white-space: nowrap; font-size: 14px; }
.cancel-reason select {
width: 100%; min-height: 46px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line);
background: var(--bg); font: inherit; font-size: 16px; color: var(--ink); transition: border-color 0.15s, background 0.15s;
appearance: auto; }
.cancel-final { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cancel-options[hidden], .cancel-options-ask[hidden] { display: none; }
.cancel-refund[hidden] { display: none; }
.cancel-refund { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); font-size: 14px; }
.cancel-refund p { margin: 0; color: var(--ink); }
.cancel-refund .btn { justify-self: start; }
.cancel-options { display: grid; gap: 12px; }
.cancel-options-ask { justify-self: start; }
.cancel-fine { font-size: 13px; margin: 0; }
.join-credit-waiting { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-weight: 600; font-size: 14px; }
.join-credit-waiting[hidden], [data-club-notes][hidden] { display: none; }
/* ---- Product copy + "Also available in" colour chips in the quick view (hat-drop session) ---- */
.catalog-modal-story { border-top: 1px solid var(--line); padding-top: 14px; font-size: 14px; color: var(--muted); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.catalog-modal-story[hidden] { display: none; }
.catalog-modal-story p { margin: 0; line-height: 1.6; }
.catalog-modal-color { color: var(--ink); font-weight: 600; }
.catalog-modal-color span { color: var(--muted); font-weight: 500; margin-right: 4px; }
.catalog-modal-details { margin: 0; padding-left: 18px; line-height: 1.6; }
.catalog-modal-sku { font-size: 12px; letter-spacing: .04em; }
.catalog-modal-colors-title { display: block; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.catalog-modal-colors-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.catalog-color-chip { flex: 0 0 auto; width: 92px; display: grid; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; text-align: left; font: inherit; font-size: 11px; color: var(--ink); }
.catalog-color-chip:hover { border-color: var(--ink); }
.catalog-color-chip img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: #fff; }
.catalog-color-chip-label { display: flex; align-items: center; gap: 5px; line-height: 1.2; }
.catalog-color-chip-label i { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
/* ---- Product pages (/hats/, product_pages.py) ------------------------------------------- */
.pp { padding-block: 24px var(--section); }
.pp-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 22px; padding: 0; font-size: 14px; color: var(--muted); }
.pp-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.pp-crumbs a { color: var(--muted); text-decoration: none; }
.pp-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.pp-crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.pp-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.pp-gallery { position: sticky; top: 96px; display: grid; gap: 12px; }
.pp-photo { position: relative; background: #fff; border-radius: var(--radius); aspect-ratio: 1; overflow: hidden; box-shadow: var(--shadow); }
.pp-photo.has-zoom img { cursor: zoom-in; }
.pp-zoom-pill, .catalog-modal-zoom {
position: absolute; left: 12px; bottom: 12px; z-index: 1; padding: 7px 12px; border: 0; border-radius: 999px; cursor: pointer;
background: rgba(20, 20, 20, 0.72); color: #fff; font: 600 13px/1.2 var(--font-body); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.pp-zoom-pill:hover, .catalog-modal-zoom:hover { background: rgba(20, 20, 20, 0.88); }
.pp-zoom-pill:focus-visible, .catalog-modal-zoom:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink); }
.pp-zoom-pill[hidden], .catalog-modal-zoom[hidden] { display: none; }
.pp-photo img { width: 100%; height: 100%; object-fit: contain; }
.pp-thumbs { display: flex; gap: 10px; overflow-x: auto; padding: 2px; }
.pp-thumb { flex: none; width: 76px; height: 76px; padding: 0; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: pointer; overflow: hidden; }
.pp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pp-thumb.is-active { border-color: var(--ink); }
.pp-info { display: grid; gap: 14px; min-width: 0; }
.pp-info .eyebrow { margin-bottom: 0; }
.pp-title { font-size: clamp(1.9rem, 4vw, 2.8rem); text-wrap: balance; }
.pp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.pp-price-now { font: 700 1.6rem/1 var(--font-head); letter-spacing: -0.02em; }
.pp-price-was { color: var(--muted); font-size: 1.05rem; }
.pp-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 700 12px/1.2 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; }
.pp-badge-sale { background: var(--sale); color: #fff; }
.pp-member { display: grid; gap: 6px; font-size: 15px; color: var(--ink); background: var(--accent-soft); border: 1.5px solid var(--accent); padding: 12px 14px; border-radius: var(--radius-sm); }
.pp-member a { color: var(--ink); font-weight: 700; }
.pp-member-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.pp-member-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pp-member-badge::before { content: "\2605"; color: #e8473c; }
.pp-member-price { font-size: 16px; }
.pp-member-price strong { font: 800 1.35rem/1 var(--font-head); letter-spacing: -0.01em; }
.pp-member-save { padding: 2px 8px; border-radius: 999px; background: #e5f2ea; color: #1f6b41; font-size: 12.5px; font-weight: 700; }
.pp-member-fine { margin: 0; font-size: 13.5px; color: var(--muted); }
.pp-member.is-member { background: #eef7f1; border-color: #2e9d5f; }
/* Header: Hat Club member badge next to Account (assets/site.js) */
.member-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.member-chip::before { content: "\2605"; color: #e8473c; }
@media (max-width: 420px) { .member-chip [data-chip-credit] { display: none; } }
.pp-color { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.pp-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(20, 20, 20, 0.2); flex: none; }
.pp-stock { font-size: 15px; font-weight: 600; }
.pp-stock-in { color: #1f7a3d; }
.pp-stock-low { color: var(--accent-ink); }
.pp-stock-out { color: var(--sale); }
.pp-note { font-size: 15px; background: var(--surface-2); padding: 10px 14px; border-radius: var(--radius-sm); }
.pp-buy { display: grid; gap: 14px; padding: 18px 0; border-block: 1px solid var(--line); }
.pp-variants { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.pp-variants legend { font-weight: 700; font-size: 15px; padding: 0; margin-bottom: 8px; }
.pp-variant-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-variant { position: relative; }
.pp-variant input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pp-variant span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-weight: 600; font-size: 15px; }
.pp-variant input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.pp-variant input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 4px var(--bg); }
.pp-buy-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pp-qty { display: inline-flex; align-items: center; height: 52px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; }
.pp-qty button { width: 44px; height: 100%; border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--ink); border-radius: 999px; }
.pp-qty input { width: 40px; border: 0; text-align: center; font: 600 16px var(--font-body); background: none; color: var(--ink); -moz-appearance: textfield; }
.pp-qty input::-webkit-outer-spin-button, .pp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-add { flex: 1 1 200px; height: 52px; font-size: 16px; }
.pp-add:disabled { opacity: 0.45; cursor: not-allowed; }
.pp-status { min-height: 1.4em; font-size: 15px; font-weight: 600; color: #1f7a3d; }
.pp-cart-link { justify-self: start; display: none; }
.pp-buy.is-added .pp-cart-link { display: inline-block; }
.pp-desc { display: grid; gap: 12px; color: var(--ink); max-width: 62ch; }
.pp-details { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.pp-details summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.pp-details ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.pp-details p { margin-top: 6px; color: var(--muted); font-size: 15px; }
.pp-sku { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }
.pp-colors, .pp-related { margin-top: clamp(40px, 7vw, 80px); display: grid; gap: 18px; }
.pp-colors h2, .pp-related h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.pp-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.pp-swatch { display: grid; gap: 8px; text-decoration: none; color: var(--ink); }
.pp-swatch img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: var(--radius-sm); border: 1.5px solid var(--line); transition: border-color 0.2s ease; }
.pp-swatch:hover img { border-color: var(--ink); }
.pp-swatch-label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
@media (max-width: 860px) {
.pp-grid { grid-template-columns: 1fr; }
.pp-gallery { position: static; }
}
@media (max-width: 720px) {
.pp-related .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------------------------------------------------------------- auto-scrolling strips + live reviews */
/* [data-dk-marquee]: the track holds the cards twice and slides left by half its width, so the loop
is seamless. Edges fade out; hover / focus / the Pause button stop it; reduced motion = swipe row. */
.dk-marquee { position: relative; overflow: hidden; padding: 6px 0 14px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.dk-marquee-track { display: flex; align-items: flex-start; gap: 16px; width: max-content; padding-inline: 8px; }
.dk-marquee.is-running .dk-marquee-track { animation: dk-marquee var(--dk-marquee-dur, 60s) linear infinite; }
.dk-marquee.is-paused .dk-marquee-track, .dk-marquee:hover .dk-marquee-track, .dk-marquee:focus-within .dk-marquee-track { animation-play-state: paused; }
@keyframes dk-marquee { to { transform: translateX(calc(-50% - 8px)); } }
.dk-marquee.is-static { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
.dk-marquee.is-static .dk-marquee-track > [aria-hidden="true"] { display: none; }
.dk-marquee.is-static .dk-marquee-track > * { scroll-snap-align: start; }
.dk-marquee-toggle { position: absolute; right: max(16px, calc((100% - var(--wrap, 1200px)) / 2)); bottom: 0; z-index: 2;
min-height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface, #fff);
color: var(--ink); font: 600 13px/1 var(--font-body, inherit); cursor: pointer; opacity: .85; }
.dk-marquee-toggle:hover { opacity: 1; }
.dk-marquee { padding-bottom: 46px; }
/* gallery strip */
.ed-gal-marquee .ed-gal-item { width: clamp(210px, 24vw, 300px); flex: 0 0 auto; position: relative; }
.ed-gal-cap { position: absolute; left: 10px; bottom: 10px; padding: 6px 12px; border-radius: 999px; background: rgba(20, 20, 20, .72);
color: #fff; font: 600 13px/1.2 var(--font-body, inherit); letter-spacing: .02em; backdrop-filter: blur(6px); }
.ed-gal-cap:empty { display: none; }
.ed-gallery .ed-gal-item { position: relative; }
/* live review cards */
.ed-live-reviews h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.ed-lrv-sub { color: var(--muted); margin: 8px 0 22px; }
.ed-lrv { margin: 0; flex: 0 0 auto; width: clamp(250px, 26vw, 300px); display: flex; flex-direction: column; overflow: hidden;
background: var(--surface, #fff); border-radius: var(--radius, 18px); box-shadow: var(--shadow-lift, 0 10px 30px rgba(0,0,0,.08)); color: var(--ink); }
.ed-lrv-photo { aspect-ratio: 1 / 1; background: var(--surface-2, #efebe4); }
.ed-lrv-photo:has(.ed-lrv-nophoto) { aspect-ratio: 2 / 1; }
.ed-lrv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-lrv-nophoto { height: 100%; display: grid; place-items: center; text-align: center; color: var(--muted);
background: repeating-linear-gradient(135deg, var(--surface-2, #efebe4) 0 14px, #e8e3da 14px 28px); }
.ed-lrv-nophoto span { padding: 8px 14px; border-radius: 999px; background: var(--surface, #fff); font: 600 13px/1.2 var(--font-body, inherit); }
.ed-lrv-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ed-lrv .ed-stars { margin: 0; }
.ed-lrv-title { font-weight: 700; margin: 0; }
.ed-lrv blockquote { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.ed-lrv figcaption { margin-top: auto; font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.ed-lrv figcaption strong { color: var(--ink); }
.ed-lrv-verified { color: #1f7a3d; font-weight: 600; font-size: 13px; }
/* FTC 16 CFR 465: a reviewer who got the hat free is labeled on the review itself. */
.ed-lrv-free, .catalog-review-free { display: inline-block; color: #7a4300; background: #fdf1df; border: 1px solid #e8c48f;
border-radius: 999px; padding: 1px 8px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.catalog-review-rules { margin: 6px 0 0; font-size: 13px; }
.catalog-review-rules a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ed-lrv-product { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ed-lrv-perk { margin: 0; font-size: 12px; color: var(--muted); }
.ed-lrv-row { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 26vw, 300px); gap: 16px; overflow-x: auto;
scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.ed-lrv-row .ed-lrv { width: auto; scroll-snap-align: start; }
@media (max-width: 720px) { .ed-lrv, .ed-gal-marquee .ed-gal-item { width: 72vw; } .ed-lrv-row { grid-auto-columns: 78%; } }
.ed-bg-dark .ed-lrv-sub { color: rgba(255, 255, 255, .8); }
.ed-bg-dark.ed-bg-dark .ed-lrv :where(p, blockquote, figcaption strong, .ed-lrv-product) { color: var(--ink); }
/* review form gate (product modal) + account prompts */
.catalog-review-locked { display: grid; gap: 6px; justify-items: start; margin-top: 14px; padding: 16px 18px; border-radius: var(--radius-sm, 12px);
background: var(--surface-2, #efebe4); color: var(--ink); }
.catalog-review-locked span { color: var(--muted); }
.catalog-review-locked .button { margin-top: 6px; }
.catalog-review-perk { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm, 12px); background: #eef6ef; color: #1f5a32; font-size: 14px; }
.catalog-review-perk-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.account-review-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.account-review-list li { display: flex; align-items: center; gap: 12px; }
.account-review-list img, .account-review-noimg { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--surface-2, #efebe4); flex: 0 0 auto; }
.account-review-name { flex: 1; min-width: 0; font-weight: 600; display: grid; }
.account-review-name small { color: #1f7a3d; font-weight: 600; }
/* ---------------------------------------------------------------- block library wave 2 */
/* logo strip */
.ed-logos { text-align: center; }
.ed-logos-head { font: 600 13px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.ed-logo-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(20px, 5vw, 56px); }
.ed-logo-row img { height: clamp(36px, 5vw, 56px); width: auto; max-width: 180px; object-fit: contain; }
.ed-added-logos:not(.ed-layout-color) .ed-logo-row img { filter: grayscale(1); opacity: 0.7; transition: filter 0.3s, opacity 0.3s; }
.ed-added-logos:not(.ed-layout-color) .ed-logo-row img:hover { filter: none; opacity: 1; }
/* size guide */
.ed-sizeguide h2 { margin-bottom: 12px; } .ed-sizeguide > p { color: var(--muted); }
.ed-size-wrap { overflow-x: auto; margin-top: 22px; }
.ed-size-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ed-size-table th, .ed-size-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.ed-size-table thead th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.ed-size-table tbody th { font-weight: 700; }
.ed-size-note { font-size: 14px; margin-top: 14px; }
.ed-layout-boxed .ed-sizeguide { background: var(--surface, #fff); border-radius: var(--radius-lg, 28px); padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow-lift); }
.ed-bg-dark .ed-size-table th, .ed-bg-dark .ed-size-table td { border-color: rgba(255, 255, 255, 0.18); }
/* visit us */
.ed-visit { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
.ed-layout-split .ed-visit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ed-visit-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg, 28px); }
.ed-visit-card { background: var(--surface, #fff); border-radius: var(--radius-lg, 28px); padding: clamp(24px, 4vw, 48px); box-shadow: var(--shadow-lift); color: var(--ink); max-width: 640px; }
.ed-added-visit:not(.ed-layout-split) .ed-visit-card { margin-inline: auto; text-align: center; }
.ed-added-visit:not(.ed-layout-split) .ed-visit-card .hero-actions { justify-content: center; }
.ed-visit-addr { font-size: 1.15rem; font-weight: 600; margin-top: 14px; }
.ed-visit-phone a { color: var(--accent-ink, var(--accent)); font-weight: 600; text-decoration: none; }
.ed-visit-hours { margin-top: 16px; } .ed-visit-hours h3 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 4px; }
.ed-bg-dark.ed-bg-dark :where(.ed-visit-card) :where(h2, h3, p, .eyebrow) { color: var(--ink); }
@media (max-width: 760px) { .ed-layout-split .ed-visit { grid-template-columns: 1fr; } }
/* shop the look */
.ed-shoplook h2 { margin-bottom: 24px; }
.ed-look-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.ed-layout-below .ed-look-grid { grid-template-columns: 1fr; }
.ed-layout-below .ed-look-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ed-look { position: relative; margin: 0; border-radius: var(--radius-lg, 28px); overflow: hidden; }
.ed-look img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.ed-layout-below .ed-look img { aspect-ratio: 16 / 10; }
.ed-dot { position: absolute; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center;
text-decoration: none; font: 700 14px/1 var(--font-body); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.35), 0 6px 18px rgba(0, 0, 0, 0.3); }
.ed-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.8); animation: ed-pulse 2.2s ease-out infinite; }
@keyframes ed-pulse { from { transform: scale(0.8); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.ed-look-list { display: grid; gap: 10px; }
.ed-look-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius, 18px); background: var(--surface, #fff); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.ed-look-item b { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 13px; flex: 0 0 auto; }
.ed-look-item img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: #fff; }
.ed-look-item span { display: grid; font-weight: 600; } .ed-look-item small { color: var(--muted); font-weight: 600; }
@media (max-width: 760px) { .ed-look-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ed-dot::after { animation: none; } }
/* before / after */
.ed-beforeafter > p { color: var(--muted); margin-top: 8px; }
.ed-ba { position: relative; margin-top: 22px; border-radius: var(--radius-lg, 28px); overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface-2); }
.ed-layout-narrow .ed-ba { max-width: 720px; margin-inline: auto; aspect-ratio: 4 / 5; }
.ed-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-ba-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ed-ba::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.35); pointer-events: none; }
.ed-ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ed-ba input[type=range]:focus-visible { opacity: 0.001; } .ed-ba:focus-within::after { width: 5px; background: var(--accent); }
.ed-ba-label { position: absolute; top: 14px; z-index: 1; background: rgba(20, 20, 20, 0.65); color: #fff; font: 600 12px/1 var(--font-body); padding: 7px 10px; border-radius: 999px; pointer-events: none; }
.ed-ba-l { left: 14px; } .ed-ba-r { right: 14px; }
.ed-on .ed-ba { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ed-on .ed-ba img { position: static; aspect-ratio: 4 / 3; clip-path: none; } .ed-on .ed-ba::after, .ed-on .ed-ba input { display: none; }
/* customer photos */
.ed-ugc-handle { color: var(--muted); margin-top: 6px; font-weight: 600; }
.ed-ugc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ed-ugc-grid.ed-n2 { grid-template-columns: repeat(2, 1fr); } .ed-ugc-grid.ed-n3, .ed-ugc-grid.ed-n5, .ed-ugc-grid.ed-n6 { grid-template-columns: repeat(3, 1fr); }
.ed-ugc-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius, 18px); }
.ed-layout-mosaic .ed-ugc-grid { grid-auto-flow: dense; } .ed-layout-mosaic .ed-ugc-grid img:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 760px) { .ed-ugc-grid, .ed-ugc-grid.ed-n3, .ed-ugc-grid.ed-n5, .ed-ugc-grid.ed-n6 { grid-template-columns: repeat(2, 1fr); } }
/* spacer */
.ed-added-spacer { padding: 0 !important; }
.ed-spacer { position: relative; display: grid; place-items: center; }
.ed-spacer-s { min-height: 24px; } .ed-spacer-m { min-height: 64px; } .ed-spacer-l { min-height: 128px; }
.ed-rule { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 0; }
.ed-dots { color: var(--muted); letter-spacing: 0.6em; margin: 0; }
.ed-spacer-label { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); font: 600 11px system-ui, sans-serif; color: #a79f94; background: #fff; padding: 2px 8px; border-radius: 999px; border: 1px dashed #d6cdbf; }
[data-ed-placeholder]:empty::before { content: attr(data-ed-placeholder); color: #a79f94; font-style: italic; }
/* ---- Local pickup choice in checkout (cart.html Details step) ----------------------------------- */
.checkout-fulfillment { border: 0; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; grid-column: 1 / -1; }
.checkout-fulfillment legend { font-weight: 700; font-size: 15px; padding: 0; margin-bottom: 8px; }
.fulfill-option { position: relative; display: block; cursor: pointer; }
.fulfill-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fulfill-option > span { display: grid; gap: 3px; height: 100%; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.fulfill-option strong { font-size: 15px; }
.fulfill-option small { font-size: 13px; color: var(--muted); line-height: 1.35; }
.fulfill-option input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.fulfill-option input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.checkout-address-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; grid-column: 1 / -1; }
@media (max-width: 520px) { .checkout-fulfillment { grid-template-columns: 1fr; } }
/* ---- Order tracking page (track.html) ---------------------------------------------------------- */
.track-page { padding: 48px 0 72px; }
.track-eyebrow { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin: 0 0 6px; }
.track-page h1 { font-size: clamp(2rem, 6vw, 2.8rem); margin: 0 0 8px; }
.track-sub { color: var(--muted); font-size: 1.05rem; margin: 0 0 24px; min-height: 1.4em; }
.track-card { background: var(--surface, #fff); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 16px; }
.track-card h2 { font-size: 1.05rem; margin: 0 0 14px; }
.track-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; }
.track-steps li { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; font-size: .85rem; color: var(--muted); }
.track-steps li::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--line); }
.track-steps li:first-child::before { display: none; }
.track-steps li.is-done::before, .track-steps li.is-current::before { background: var(--ink); }
.track-dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface, #fff); border: 2px solid var(--line); color: #fff; font-weight: 800; }
.track-steps li.is-done .track-dot { background: var(--ink); border-color: var(--ink); }
.track-steps li.is-current .track-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.track-steps li.is-done strong, .track-steps li.is-current strong { color: var(--ink); }
.track-steps small { font-size: .75rem; }
.track-carrier { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.track-carrier span, .track-carrier small { display: block; color: var(--muted); font-size: .8rem; }
.track-carrier span { letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.track-carrier strong { display: block; font-size: 1.05rem; letter-spacing: .02em; word-break: break-all; }
.track-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.track-items li { display: flex; gap: 14px; align-items: center; }
.track-items img, .track-thumb-empty { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--bg); flex: none; }
.track-thumb-empty { display: grid; place-items: center; font-weight: 800; font-size: .75rem; color: var(--muted); }
.track-items small { display: block; color: var(--muted); font-size: .85rem; }
.track-items a { color: inherit; }
.track-help { margin-top: 24px; color: var(--muted); font-size: .95rem; }
.track-help p { margin: 4px 0; }
@media (max-width: 560px) {
.track-steps { grid-template-columns: 1fr !important; gap: 12px; }
.track-steps li { grid-template-columns: 32px 1fr; justify-items: start; text-align: left; column-gap: 12px; }
.track-steps li::before { display: none; }
.track-steps small { grid-column: 2; }
}
/* ---------------------------------------------------------------- readability per colour scheme (QA sweep 2026-10-11) */
:root { --muted-light: var(--muted); --on-accent: #141414; } /* site_design overrides both when a design is set */
/* Brand scheme with DARK words (a light/mid brand colour like the default orange): grey text and the small
brand-colour labels would vanish on the brand colour — use the readable words colour instead. */
.ed-bg-accent:not(.ed-bg-dark) { --muted: var(--ink); --accent-ink: var(--ink); }
.ed-bg-accent.ed-bg-accent:not(.ed-bg-dark) .eyebrow { color: var(--ink); }
/* Dark schemes (Midnight, or a dark brand colour): grey text turns light grey… */
.ed-bg-dark { --muted: rgba(255, 255, 255, 0.78); --line: rgba(255, 255, 255, 0.18); }
/* …except inside the light cards that stay white there (their grey text stays grey). */
.ed-bg-dark :where(.product-card, .ed-review, .ed-layout-cards .ed-icon-item, .ed-layout-boxed .ed-faq-item, .ed-layout-box .ed-signup,
.ed-visit-card, .ed-look-item, .ed-layout-boxed .ed-sizeguide) { --muted: var(--muted-light); --line: #e3ddd4; }
/* Brand-colour sale banner: every word in the readable-on-brand colour (white OR dark, decided per design). */
.ed-layout-accent .ed-sale, .ed-layout-accent .ed-sale h2, .ed-layout-accent .ed-sale.ed-sale .eyebrow,
.ed-layout-accent .ed-countdown b, .ed-layout-accent .ed-countdown small, .ed-layout-accent .ed-sale .ed-block-empty { color: var(--on-accent); }
.ed-layout-accent .ed-countdown span { background: rgba(255, 255, 255, 0.22); }
/* Cart: Hat Club rewards line, join teaser, join-at-checkout box (assets/cart-club.js) */
.cart-reward-hint, .cart-club-teaser { font-size: 13.5px; margin-top: 10px; }
.cart-reward-hint { color: #1f6b41; font-weight: 600; }
.cart-club-teaser { color: var(--ink); font-weight: 600; }
.checkout-club-join { display: grid; gap: 8px; padding: 14px 16px; border: 1.5px dashed var(--ink); border-radius: var(--radius-sm, 12px); background: var(--surface-2); }
.checkout-club-join.is-joined { border-style: solid; border-color: #2e9d5f; background: #eef7f1; }
.checkout-club-join[hidden] { display: none; }
.checkout-club-title { margin: 0; font-size: 15px; }
.checkout-club-detail, .checkout-club-signin { margin: 0; font-size: 13.5px; color: var(--muted); }
.checkout-club-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.4; }
.checkout-club-consent input { margin-top: 3px; flex: none; }
.club-join-consent { margin: 12px 0; }
.club-join-consent[hidden] { display: none; }
.checkout-club-btn { justify-self: start; min-height: 40px; margin-top: 4px; }
.checkout-club-msg { margin: 0; font-size: 13.5px; font-weight: 600; color: #1f6b41; }
.checkout-club-msg:empty { display: none; }
.checkout-club-msg.is-error { color: var(--sale, #b42318); }
/* Account: rewards timeline (assets/site.js renderCredit) */
.account-rewards { display: grid; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.account-rewards[hidden] { display: none; }
.account-rewards-title { font-size: 15px; margin: 0; display: flex; align-items: baseline; gap: 8px; }
.account-rewards-title span { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.account-rewards-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.account-rewards-list li { display: grid; grid-template-columns: 10px 1fr; align-items: center; column-gap: 10px; row-gap: 1px; font-size: 14px; }
.account-rewards-list .rw-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.account-rewards-list li.is-done .rw-dot { background: #2e9d5f; }
.account-rewards-list li.is-wait .rw-dot { background: #e0a43a; }
.account-rewards-list li.is-off { color: var(--muted); }
.account-rewards-list .rw-when { grid-column: 2; color: var(--muted); font-size: 13px; }
/* Members-first drop (product page; product_pages.py early_html) */
.pp-early { display: grid; gap: 8px; justify-items: start; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--ink); color: #fff; }
.pp-early p { margin: 0; font-size: 14.5px; line-height: 1.45; color: #fff; }
.pp-early .pp-member-badge { background: #fff; color: var(--ink); }
.pp-early .pp-early-join { background: #fff; color: var(--ink); border-color: #fff; min-height: 40px; }
.pp-early.is-member { background: #eef7f1; color: var(--ink); border: 1.5px solid #2e9d5f; }
.pp-early.is-member p { color: var(--ink); }
.pp-early.is-member .pp-member-badge { background: var(--ink); color: #fff; }
/* Members-first drop (shop grid; script.js) */
.catalog-pill-early { background: var(--ink); color: #fff; align-self: flex-start; }
.catalog-card .catalog-add-early { display: flex; align-items: center; justify-content: center; text-decoration: none; background: var(--ink); color: #fff; border-color: var(--ink); }
.catalog-card .catalog-add-early:hover { background: #000; color: #fff; }
.catalog-early-line { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }
/* Referral program (script.js captureReferral + account card) */
.referral-welcome { position: sticky; top: 0; z-index: 60; padding: 10px 16px; background: var(--ink); color: #fff; text-align: center; font-weight: 600; font-size: 14px; }
.account-referral { display: grid; gap: 10px; }
.account-referral[hidden] { display: none; }
.account-panel > .referral-link-row, .referral-link-row { display: flex; justify-items: stretch; gap: 8px; flex-wrap: wrap; align-items: center; }
.referral-link-row input { width: 100%; flex: 1 1 220px; min-width: 0; min-height: 42px; border-radius: 999px; border: 1px solid var(--line); padding: 0 14px; font: 600 14px var(--font-body); background: var(--surface-2); color: var(--ink); }
.account-panel > .referral-stats, .referral-stats { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.referral-stats strong { display: block; font: 800 1.2rem/1.1 var(--font-head); color: var(--ink); }
/* Home: referral band (index.html #give-10, site.js) */
.referral-band { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: 28px; background: var(--accent-soft); border: 1.5px solid var(--accent); }
.referral-band h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin: 4px 0 10px; }
.referral-band-lead { color: var(--ink); font-size: 1.05rem; line-height: 1.5; margin: 0; }
.referral-steps { list-style: none; counter-reset: step; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.referral-steps li { counter-increment: step; display: flex; align-items: center; gap: 12px; font-size: 15.5px; }
.referral-steps li::before { content: counter(step); width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 800; font-size: 14px; }
.referral-band-mine { display: grid; gap: 6px; margin-bottom: 10px; }
.referral-band-mine[hidden] { display: none; }
.referral-band-note { margin: 0; font-size: 13.5px; color: var(--muted); }
.referral-eyebrow { margin: 0; }
@media (max-width: 820px) { .referral-band { grid-template-columns: 1fr; } }
/* ---------- Account v2 (2026-10-11): one column, glance chips, Orders → Hat Club & credit → referral →
reviews → quiet Settings list; settings open as in-page views (#saved #addresses #security #email) ---------- */
.acct-wrap { max-width: 760px; }
.acct-home > .account-head { align-items: flex-start; margin-bottom: 0; }
.acct-home h1, .acct-view h1 { font-size: clamp(1.8rem, 5vw, 2.2rem); letter-spacing: -0.02em; margin: 0; }
.acct-home .account-email { margin-top: 4px; font-size: 14px; }
.acct-signout { border: 0; background: none; padding: 6px 0; color: var(--muted); font: 600 14px var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.acct-signout:hover { color: var(--ink); }
.acct-glance { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }
.acct-glance:empty { display: none; }
.acct-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font: 600 14px var(--font-body); text-decoration: none; font-variant-numeric: tabular-nums; }
.acct-chip:hover { border-color: var(--ink); }
.acct-chip b { font-weight: 800; }
.acct-chip i { width: 8px; height: 8px; border-radius: 50%; background: #2e9d5f; }
.acct-chip.is-member { background: var(--ink); color: #fff; border-color: var(--ink); }
.acct-chip.is-member::before { content: "★"; color: #e8473c; }
.acct-chip.is-moving i { background: #2f6fd6; }
.acct-chip.is-todo i { background: var(--accent); }
.acct-home .account-panel.acct-sec { margin-bottom: 14px; gap: 10px; border-radius: 22px; }
.acct-sec-head { display: flex !important; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; width: 100%; }
.acct-sec-head h2 { margin: 0; }
.acct-sec-head .account-muted { font-size: 14px; }
.acct-sec-link { border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink); font: 700 14px var(--font-body); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.acct-sec-link:hover { text-decoration-color: var(--ink); }
.acct-sec-link[hidden] { display: none; }
.order-list li.order-line { display: flex; }
.order-list li.order-line .order-top { width: 100%; }
/* Hat Club & credit */
#club > div { width: 100%; }
.acct-club-row { display: grid !important; gap: 2px !important; }
.acct-club-row h2 { font-size: 1.05rem; margin: 0; }
.acct-since { color: var(--muted); font-weight: 600; font-size: 14px; }
.acct-since:has(> span:empty) { display: none; }
.acct-club-row .account-muted { font-size: 14px; }
.acct-facts { display: grid !important; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 10px !important; width: 100%; justify-items: stretch !important; }
.acct-fact { background: var(--bg); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.acct-fact span { font-size: 12.5px; color: var(--muted); }
.acct-fact strong { font: 800 1.25rem/1.2 var(--font-head); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.acct-fact.is-credit { background: var(--accent-soft); }
.acct-fact.is-credit strong { color: var(--accent-ink); }
.acct-perks { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px !important; width: 100%; justify-items: stretch !important; }
.acct-perk { background: var(--bg); border-radius: 14px; padding: 12px 14px; display: grid; font-size: 13.5px; color: var(--muted); }
.acct-perk strong { font: 800 1.05rem var(--font-head); color: var(--ink); }
.acct-join-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.acct-join-row .account-muted b { color: var(--ink); }
.acct-fold { width: 100%; border-top: 1px solid var(--line); padding-top: 10px; }
.acct-fold summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; font: 700 14px var(--font-body); color: var(--ink); min-height: 32px; align-items: center; }
.acct-fold summary::-webkit-details-marker { display: none; }
.acct-fold summary::after { content: "▾"; color: var(--muted); }
.acct-fold[open] summary::after { content: "▴"; }
.acct-fold > * + * { margin-top: 10px; }
.acct-fold .account-rewards { border-top: 0; padding-top: 0; margin-top: 8px; }
.account-panel > .acct-club-links { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding-top: 4px; }
.acct-home .account-panel > [data-acct-orders], .account-panel > .account-credit-wrap { justify-items: stretch; width: 100%; }
.acct-club-links[hidden] { display: none; }
.acct-club-links .account-danger { font-weight: 600; }
.cancel-flow h2 { font-size: 1.15rem; margin: 0; }
/* Referral + reviews */
#referral .referral-stats { gap: 16px; font-size: 13.5px; }
#referral .referral-stats strong { display: inline; font: 800 14px var(--font-body); }
.account-review-prompts .account-review-list { margin-top: 2px; }
/* Settings list */
.acct-settings { margin-top: 22px; }
.acct-settings h2 { font: 700 12.5px var(--font-body); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 8px 4px; }
.acct-settings-list { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); }
.acct-settings-list a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.acct-settings-list a:first-child { border-top: 0; }
.acct-settings-list a:hover { background: var(--bg); }
.acct-settings-list a::after { content: "›"; color: var(--muted); font-size: 20px; line-height: 1; }
.acct-count { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 14px; }
.acct-home .account-help { text-align: center; font-size: 14px; }
/* Settings views */
.acct-view { display: grid; gap: 14px; }
.acct-back { justify-self: start; color: var(--muted); font: 600 14px var(--font-body); text-decoration: none; padding: 6px 0; }
.acct-back:hover { color: var(--ink); }
.acct-view .account-panel { border-radius: 22px; }
.acct-form .field input { width: 100%; }
.acct-form > .acct-form-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 120px; gap: 10px; justify-items: stretch; }
.acct-form > .acct-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.acct-form-actions .account-msg { text-align: left; }
.acct-form .field em { font-style: normal; color: var(--muted); font-weight: 500; }
.acct-choice { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.acct-option { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 16px; cursor: pointer; }
.acct-option:has(input:checked) { border-color: var(--ink); }
.acct-option:has(input:disabled) { opacity: 0.55; cursor: default; }
.acct-option input { margin-top: 3px; accent-color: var(--ink); width: 18px; height: 18px; flex: 0 0 auto; }
.acct-option span { display: grid; gap: 2px; }
.acct-option small { color: var(--muted); font-size: 13.5px; }
.acct-always { font-size: 13.5px; }
@media (max-width: 600px) {
.acct-facts[data-count="3"], .acct-perks { grid-template-columns: 1fr 1fr; }
.acct-facts[data-count="3"] > :last-child, .acct-perks > :last-child { grid-column: 1 / -1; }
.acct-form > .acct-form-row { grid-template-columns: 1fr 1fr; }
.acct-form-row .field:first-child { grid-column: 1 / -1; }
}
/* Review & pay: the totals live in the pinned summary on desktop, so the review card only recaps
who/where (phones have no summary on this step and keep the full rows). */
@media (min-width: 900px) {
.checkout-review .checkout-review-rows { display: none; }
.checkout-review { padding: 14px 16px; background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); margin-bottom: 18px; }
.checkout-step-pane[data-step-pane="review"] .checkout-review-heading { font-size: 1rem; margin: 0; }
}
/* Payment method tabs: black pills across the top of the payment card; only the chosen one shows. */
.checkout-pay-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.checkout-pay-tabs[hidden] { display: none; }
.checkout-pay-tab { flex: 1 1 0; min-width: 92px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); font: 700 14px var(--font-body); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.checkout-pay-tab svg { width: 18px; height: 18px; }
.checkout-pay-tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.checkout-pay-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.checkout-card.has-pay-tabs .checkout-or { display: none !important; }
.checkout-card.has-pay-tabs #checkout-wallets > .checkout-wallet:not(.is-chosen),
.checkout-card.has-pay-tabs #checkout-wallets > .checkout-wallet-apple:not(.is-chosen) { display: none !important; }
.checkout-wallet-hint { margin: 0; font-size: 13.5px; color: var(--muted); text-align: center; }
.checkout-wallet-hint[hidden] { display: none; }
[data-step-pane="review"].pay-with-wallet #checkout-card-container,
[data-step-pane="review"].pay-with-wallet #checkout-club-join,
[data-step-pane="review"].pay-with-wallet #catalog-submit-order,
[data-step-pane="review"].pay-with-wallet #checkout-submit-note { display: none !important; }
[data-step-pane="review"].pay-with-wallet .cart-step-nav .btn { flex: 0 0 auto; padding: 0 28px; }
@media (max-width: 600px) { .checkout-pay-tabs { display: grid; grid-template-columns: 1fr 1fr; } }
/* Express checkout (cart top): Apple Pay / Google Pay, the wallet fills in the details. */
.express-checkout { display: grid; gap: 10px; margin: 0 0 22px; }
.express-checkout[hidden] { display: none; }
.cart-page .express-title { font: 700 13px var(--font-body); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.express-wallets { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.express-wallet { width: 100%; height: 48px; min-height: 48px; border: 0; border-radius: 999px; overflow: hidden; cursor: pointer; }
.express-apple { display: block; }
.express-note { margin: 0; font-size: 13px; color: var(--muted); }
.express-status { margin: 0; font-size: 14px; color: var(--sale); }
.express-status:empty { display: none; }
.express-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.express-or::before, .express-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cart-items:has(.catalog-empty-cart) .express-checkout { display: none; }
/* /review — the QR code's landing page: where would you like to leave a review? (same choices for
everyone — no "were you happy?" gate; COMPLIANCE.md rule 5) */
.review-hub { padding: clamp(40px, 7vw, 88px) 0; text-align: center; }
.review-hub .wrap { display: grid; gap: 18px; justify-items: center; }
.review-hub-logo { width: 72px; height: 72px; }
.review-hub .eyebrow { margin-bottom: 0; }
.review-hub h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); margin: 0; }
.review-hub-lead { max-width: 34em; color: var(--muted); font-size: 1.05rem; line-height: 1.55; margin: 0; }
.review-cards { list-style: none; padding: 0; margin: 14px 0 0; width: 100%; max-width: 620px; display: grid; gap: 14px; text-align: left; }
.review-card { display: grid; gap: 10px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.review-card-main { border: 2px solid var(--ink); box-shadow: var(--shadow); }
.review-card-head { display: flex; align-items: center; gap: 12px; }
.review-card-head h2 { font-size: 1.2rem; margin: 0; }
.review-card-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: var(--ink); }
.review-card-icon svg { width: 22px; height: 22px; }
.review-card-main .review-card-icon { background: var(--ink); color: #fff; }
.review-card-icon-logo { background: none !important; }
.review-card-icon-logo img { width: 40px; height: 40px; }
.review-card-why { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.review-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; font-size: .95rem; line-height: 1.45; }
.review-steps li::marker { font-weight: 700; }
.review-card-go { justify-self: start; min-height: 44px; }
@media (max-width: 480px) { .review-card-go { justify-self: stretch; text-align: center; } }
.review-hub-help { max-width: 34em; font-size: .95rem; color: var(--ink); margin: 6px 0 0; }
.review-hub-fine { font-size: .85rem; color: var(--muted); margin: 0; }
@media (prefers-reduced-motion: reduce) { .review-option { transition: none; } .review-option:hover { transform: none; } }
/* Address check on the Details step: "did you mean…?" (advice only) */
.address-check { display: grid; gap: 10px; margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm); border: 1.5px solid #e0a43a; background: #fdf6e7; }
.address-check[hidden] { display: none; }
.address-check p { margin: 0; font-size: 14.5px; color: var(--ink); }
.address-check-suggest { font-weight: 700; }
.address-check-suggest[hidden] { display: none; }
.address-check-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.address-check-actions .btn { min-height: 42px; padding: 0 18px; }
.address-check-actions [hidden] { display: none; }
/* Product page "Buy now" (assets/buy-now.js): Apple Pay / Google Pay for just this hat */
.pp-express { display: grid; gap: 10px; margin-top: 14px; }
.pp-express[hidden] { display: none; }
.pp-express-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 0; }
.pp-express-or::before, .pp-express-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pp-express-wallets { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.pp-express-wallet { width: 100%; height: 48px; min-height: 48px; border: 0; border-radius: 999px; overflow: hidden; cursor: pointer; display: block; }
.pp-express-note { margin: 0; font-size: 13px; color: var(--muted); }
.pp-express-status { margin: 0; font-size: 14px; }
.pp-express-status:empty { display: none; }
.pp-express-status.is-error { color: var(--sale); }
.pp-express-done { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--radius-sm); background: #e5f2ea; color: #1f6b41; font-size: 14.5px; }
.pp-express-done strong { color: #14532d; }
/* ---- Weekly Hot Deal (weekly_deal.py): home + shop block, product badge, shop pill, cart nudge ---- */
.hot-deal { padding-top: 28px; padding-bottom: 8px; }
.hd-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: center;
background: var(--surface); border: 2px solid var(--accent); border-radius: var(--radius); padding: 26px; }
.hd-eyebrow { margin: 0 0 6px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; color: var(--accent-ink); }
.hd-copy h2 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 38px); line-height: 1.08; }
.hd-lead { margin: 0 0 8px; font-size: 16px; }
.hd-was { color: var(--muted); }
.hd-timer { margin: 0 0 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.hd-add { width: 100%; max-width: 360px; }
.hd-status { min-height: 1.2em; margin: 8px 0 0; font-weight: 600; }
.hd-status a { color: var(--accent-ink); }
.hd-fine { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.hd-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.hd-hat { display: grid; gap: 4px; text-decoration: none; color: var(--ink); text-align: center; }
.hd-photo { display: block; aspect-ratio: 1; background: var(--surface-2); border-radius: var(--radius-sm); overflow: hidden; }
.hd-photo img { width: 100%; height: 100%; object-fit: contain; }
.hd-name { font-weight: 700; font-size: 14px; line-height: 1.25; }
.hd-reg { font-size: 13px; color: var(--muted); }
.hd-plus { font-size: 28px; font-weight: 800; color: var(--accent-ink); }
@media (max-width: 820px) {
.hd-band { grid-template-columns: 1fr; padding: 18px; gap: 18px; }
.hd-pair { order: -1; }
.hd-add { max-width: none; }
}
.pp-hotdeal { display: grid; gap: 8px; margin: 10px 0; padding: 12px 14px; border: 2px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface); }
.pp-hotdeal p { margin: 0; }
.pp-hotdeal a { color: var(--accent-ink); font-weight: 700; }
.pp-hotdeal .hd-add { justify-self: start; }
.pp-hotdeal-badge, .catalog-pill-hotdeal { display: inline-block; justify-self: start; font-weight: 800; font-size: 12px; letter-spacing: .02em;
background: var(--accent-strong); color: #fff; padding: 3px 9px; border-radius: 999px; }
.cart-hot-deal { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px 14px; align-items: center; margin: 14px 0;
padding: 14px; border: 2px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface); }
.cart-hot-deal img { width: 64px; height: 64px; object-fit: contain; background: var(--surface-2); border-radius: 10px; }
.cart-hot-deal p { margin: 0; }
.cart-hot-deal a { color: var(--accent-ink); font-weight: 700; }
.cart-hot-deal .btn { grid-column: 1 / -1; }
.cart-line-discount.is-hot-deal dt { color: var(--accent-ink); font-weight: 700; }
/* ---- "Pairs well with" (product page, quick view, cart) + free-shipping progress ---- */
.pairs { margin: 28px 0 8px; }
.pairs h2 { font-size: 20px; margin: 0 0 12px; }
.pairs-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pair-card { display: grid; gap: 8px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; }
.pair-link { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.pair-photo { display: block; aspect-ratio: 1; background: var(--surface-2); border-radius: 10px; overflow: hidden; }
.pair-photo img { width: 100%; height: 100%; object-fit: contain; }
.pair-name { font-weight: 700; font-size: 13.5px; line-height: 1.25; }
.pair-price { font-size: 13px; color: var(--muted); }
.pair-add { min-height: 44px; width: 100%; }
.pairs-status { min-height: 1.2em; margin: 8px 0 0; font-weight: 600; font-size: 14px; }
.catalog-modal-content .pairs-row, .cart-items .pairs-row { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
@media (max-width: 640px) {
.pairs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* phones: keep the order summary close — two suggestions in the cart */
.cart-items .pair-card:nth-child(n+3) { display: none; }
}
.cart-free-ship { margin: 6px 0 12px; }
.cart-free-ship-text { margin: 0 0 6px; font-weight: 700; font-size: 14px; }
.cart-free-ship-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cart-free-ship-bar span { display: block; height: 100%; width: 0; background: var(--accent-strong); border-radius: inherit; transition: width .3s ease; }
.cart-free-ship.is-unlocked .cart-free-ship-bar span { background: #2f7d4a; }
@media (prefers-reduced-motion: reduce) { .cart-free-ship-bar span { transition: none; } }
/* ---- Collection landing pages (/collections/, /hot-deal) + "Shop by style" links ---- */
.collection { padding-bottom: 48px; }
.collection-head { padding: 8px 0 18px; max-width: 760px; }
.collection-head h1 { margin: 4px 0 10px; font-size: clamp(30px, 5vw, 46px); line-height: 1.05; }
.collection-copy p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.collection-nav ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.collection-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; }
.collection-nav a:hover { border-color: var(--ink); }
.collection-nav a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.collection-grid { margin-top: 8px; }
.collection .hot-deal { padding-top: 0; }