/* ============================================================================
   site.css — page-level layout & component styles for the whole store.
   Built on the design-system tokens in _ds/.../styles.css (colors, type,
   spacing, buttons, inputs). Three colours only: red / black / white.
   ========================================================================== */

html, body { background: var(--color-bg); }
body { overflow-x: hidden; }
/* Full-width header/footer; the main content is a centered, bordered frame inset
   from the screen edges (a page with margins). Section dividers run the full frame
   width to meet the side borders; header/footer content aligns to the same column. */
:root { --gap: clamp(14px, 3vw, 48px); --pad: clamp(20px, 3vw, 44px); }
main { width: calc(100% - 2 * var(--gap)); max-width: 1440px; margin-inline: auto;
  border-left: 2px solid var(--color-divider); border-right: 2px solid var(--color-divider); }
main > section { border-bottom: 2px solid var(--color-divider); }
.wrap { max-width: none; margin: 0 auto; padding: 0 var(--pad); }
a.u-link { color: var(--color-text); text-decoration: none; }
a.u-link:hover { color: var(--color-accent); }
.kicker { font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.grayscale { filter: grayscale(1) contrast(1.08); }

/* ── Announcement + header ────────────────────────────────────────────── */
.anno {
  background: var(--color-text); color: var(--color-bg);
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 9px calc(var(--gap) + 2px + var(--pad)); display: flex; justify-content: space-between; gap: 16px;
}
.site-head { position: sticky; top: 0; z-index: 40; background: var(--color-bg); border-bottom: 2px solid var(--color-divider); }
.u-bar { width: calc(100% - 2 * var(--gap)); max-width: 1440px; margin-inline: auto; padding: 12px calc(2px + var(--pad)); display: flex; align-items: center; gap: 36px; min-height: 72px; }
.u-nav { display: flex; gap: 22px; font-size: 13px; font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.u-nav a { white-space: nowrap; }
.u-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.acct-link { font-size: 12px; font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.cart-btn { letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.menu-btn { display: none; font-size: 18px; }

@media (max-width: 1180px) { .u-nav a.u-sec { display: none; } }
@media (max-width: 900px) {
  .u-nav { display: none; }
  .menu-btn { display: inline-flex; }
  .u-bar { gap: 16px; padding: 10px 20px; }
  .wrap { padding: 0 20px; }
}

/* ── Buttons: block/hover accents specific to the store ───────────────── */
/* Outline block button (used on product cards). Text always centered. */
.btn-block { width: 100%; justify-content: center; text-align: center; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; padding: 11px 16px; border: 2px solid var(--color-text); background: transparent; }
.btn-block:hover:not(:disabled) { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.btn-primary { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.btn-primary:hover:not(:disabled) { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.btn-primary:active:not(:disabled) { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.cart-btn { padding: 10px 16px; font-size: 13px; }

/* ── Product cards + grid ─────────────────────────────────────────────────
   Grid lines are 2px gaps over a divider-coloured background, so they are
   always single and perfectly aligned. Cards fill to the frame's side rules. */
/* Fixed 4-up grid. Single 2px lines via a divider-coloured 2px gap + border box;
   JS adds page-bg filler cells so the last row is always complete (no gray block,
   no partial lines). A one-product collection still shows a 4-column grid. */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--color-divider); }
.prod-card { background: var(--color-bg); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.prod-card.gfill { padding: 0; }
.prod-stage { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; background: linear-gradient(180deg, #fcfbfb 0%, #efeeee 62%, #e2e0e0 100%); }
.stage-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.prod-stage .stage-inner { transform: scale(0.8); }  /* keep packs inside the card */
.stage-inner.big { transform: scale(1.12); }
@media (max-width: 1080px) { .prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .prod-grid { grid-template-columns: 1fr; } }
.card-badge { position: absolute; top: 0; left: 0; background: var(--color-accent); color: var(--color-bg); font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 10px; }
.prod-meta { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.prod-card .card-add { margin-top: auto; }
@media (max-width: 620px) { .prod-card { padding: 16px; } }

/* ── Collection header ────────────────────────────────────────────────── */
.coll-head { border-bottom: 2px solid var(--color-divider); }
.coll-head .wrap { padding-top: 56px; padding-bottom: 28px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-family: var(--font-heading); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 14px; border: 2px solid var(--color-divider); background: transparent; color: var(--color-text); cursor: pointer; }
.chip[data-on] { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.chip:hover:not([data-on]) { border-color: var(--color-text); }

/* ── Product detail page ─────────────────────────────────────────────────
   Standard 2-col top (image left · info right) + a horizontal 3-col detail row. */
.crumbs { padding: 16px var(--pad); font-size: 12px; letter-spacing: 0.04em; color: color-mix(in srgb, var(--color-text) 60%, transparent); text-transform: uppercase; border-bottom: 2px solid var(--color-divider); }
.crumbs span { opacity: 0.5; margin: 0 4px; }

.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pdp-stage { position: relative; min-height: 540px; background: linear-gradient(180deg, #fcfbfb 0%, #efeeee 62%, #e2e0e0 100%); overflow: hidden; }
.pdp-stage .card-badge { z-index: 2; }
.pdp-info { border-left: 2px solid var(--color-divider); padding: 48px clamp(24px,3.4vw,48px); display: flex; flex-direction: column; gap: 14px; }
.pdp-info h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.03em; margin: 2px 0 0; }
.pdp-rating { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pdp-rating .stars { color: var(--color-accent); letter-spacing: 2px; font-size: 15px; }
.pdp-lore { font-family: var(--font-heading); font-weight: 700; font-style: italic; font-size: clamp(16px,1.7vw,19px); line-height: 1.35; color: var(--color-accent); margin: 0; max-width: 34ch; }
.pdp-price { display: flex; align-items: baseline; gap: 12px; margin-top: 2px; }
.pdp-price .now { font-family: var(--font-heading); font-weight: 800; font-size: 30px; }
.pdp-was { text-decoration: line-through; font-size: 18px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.pdp-price .per { font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* Flavour selector */
.flavour-sel { display: flex; gap: 8px; flex-wrap: wrap; }
.flav-chip { font-family: var(--font-heading); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; padding: 9px 14px; border: 2px solid var(--color-divider); background: transparent; color: var(--color-text); cursor: pointer; }
.flav-chip.on { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.flav-chip:hover:not(.on) { border-color: var(--color-text); }

/* Subscribe / one-time + qty + add */
.buy-mode { display: flex; flex-direction: column; gap: 8px; }
.seg-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 2px solid var(--color-divider); padding: 13px 14px; font-size: 14px; cursor: pointer; color: var(--color-text); }
/* keep dark text when selected (design-system default flips it to white) */
.seg-opt:has(input:checked) { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 7%, transparent); color: var(--color-text); }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.so-main { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-heading); font-weight: 700; }
.so-main small { font-family: var(--font-body); font-weight: 400; font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); letter-spacing: 0; text-transform: none; }
.so-price { font-family: var(--font-heading); font-weight: 800; white-space: nowrap; }
.buy-row { display: flex; gap: 10px; }
.pdp-qty { display: inline-flex; align-items: center; border: 2px solid var(--color-text); flex: none; }
.pdp-qty button { width: 40px; min-height: 46px; background: transparent; border: 0; cursor: pointer; font-size: 20px; line-height: 1; color: var(--color-text); }
.pdp-qty span { min-width: 28px; text-align: center; font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.pdp-add { flex: 1; justify-content: center; padding: 0 18px; min-height: 46px; letter-spacing: 0.06em; text-transform: uppercase; font-size: 14px; }
.pdp-preorder { width: 100%; justify-content: center; min-height: 46px; border: 2px solid var(--color-text); background: transparent; color: var(--color-text); letter-spacing: 0.06em; text-transform: uppercase; font-size: 14px; }
.pdp-preorder:hover:not(:disabled) { background: var(--color-text); color: var(--color-bg); }
.pdp-preorder:disabled { opacity: 1; border-color: var(--color-divider); color: color-mix(in srgb, var(--color-text) 55%, transparent); cursor: default; }

/* 3-column detail row (gap-line divided) */
.pdp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--color-divider); border-bottom: 2px solid var(--color-divider); }
.pdp-col { background: var(--color-bg); padding: 40px clamp(20px, 3vw, 40px); }
.pdp-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-accent); margin: 0 0 16px; }
.pdp-col p { font-size: 15px; line-height: 1.6; margin: 0 0 16px; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.specs { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.spec { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--color-divider); }
.spec:last-child { border-bottom: 0; }
.spec dt { font-family: var(--font-heading); font-weight: 800; font-size: 13px; }
.spec dd { margin: 0; font-size: 14px; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.ing-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ing-chip { font-family: var(--font-heading); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; padding: 6px 11px; border: 1px solid var(--color-divider); background: var(--color-surface); }

@media (max-width: 860px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp-stage { min-height: 420px; }
  .pdp-info { border-left: 0; border-top: 2px solid var(--color-divider); padding: 32px 20px; }
  .pdp-cols { grid-template-columns: 1fr; }
}

/* sticky add-to-cart (mobile) */
.sticky-buy { position: sticky; bottom: 0; z-index: 30; background: var(--color-bg); border-top: 2px solid var(--color-text); display: none; }
.sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; }
@media (max-width: 900px) { .sticky-buy { display: block; } }

/* ── Cart drawer ──────────────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(32,30,29,0); pointer-events: none; transition: background 0.25s; }
body.cart-open .scrim { background: rgba(32,30,29,0.45); pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); z-index: 70; background: var(--color-bg); border-left: 2px solid var(--color-text); display: flex; flex-direction: column; transform: translateX(105%); transition: transform 0.28s cubic-bezier(0.2,0.7,0.2,1); box-shadow: var(--shadow-lg); }
body.cart-open .drawer { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 2px solid var(--color-divider); }
.drawer-body { flex: 1; overflow: auto; }
.drawer-foot { padding: 20px 24px; border-top: 2px solid var(--color-text); }
.drawer-foot:empty { display: none; }
.cart-line { display: flex; gap: 16px; padding: 20px 24px; border-bottom: 2px solid var(--color-divider); align-items: flex-start; }
.qty { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; border: 1px solid var(--color-divider); width: max-content; }
.qty button { width: 28px; height: 28px; background: transparent; border: 0; cursor: pointer; font-size: 16px; color: var(--color-text); }
.qty span { min-width: 16px; text-align: center; font-size: 14px; }

/* ── Login / account modal ────────────────────────────────────────────── */
.modal-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(32,30,29,0); pointer-events: none; transition: background 0.25s; }
body.login-open .modal-scrim { background: rgba(32,30,29,0.5); pointer-events: auto; }
.modal { position: fixed; z-index: 90; top: 50%; left: 50%; width: min(420px, 92vw); transform: translate(-50%, -46%) scale(0.98); opacity: 0; pointer-events: none; background: var(--color-bg); border: 2px solid var(--color-text); box-shadow: var(--shadow-lg); transition: opacity 0.2s, transform 0.2s; }
body.login-open .modal { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.login-form { padding: 8px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.field > span { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.u-toggle { color: var(--color-accent); }

/* ── Mobile menu ──────────────────────────────────────────────────────── */
.menu-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(32,30,29,0); pointer-events: none; transition: background 0.25s; }
body.menu-open .menu-scrim { background: rgba(32,30,29,0.45); pointer-events: auto; }
.mobile-menu { position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 86vw); z-index: 90; background: var(--color-bg); border-right: 2px solid var(--color-text); transform: translateX(-105%); transition: transform 0.28s cubic-bezier(0.2,0.7,0.2,1); display: flex; flex-direction: column; }
body.menu-open .mobile-menu { transform: translateX(0); }
.mm-links { display: flex; flex-direction: column; padding: 8px 0; }
.mm-links a { padding: 16px 24px; border-bottom: 1px solid var(--color-divider); font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; color: var(--color-text); text-decoration: none; }
.mm-links a:hover { color: var(--color-accent); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-foot { width: calc(100% - 2 * var(--gap)); max-width: 1440px; margin-inline: auto; padding: 56px calc(2px + var(--pad)) 32px; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 40px; padding-bottom: 40px; border-bottom: 2px solid var(--color-divider); }
.fcol { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.foot-legal { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 20px; }

/* ── Cart page ────────────────────────────────────────────────────────── */
.cart-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.cart-summary { border: 2px solid var(--color-text); padding: 20px; position: sticky; top: 96px; }
.cart-page .cart-line { padding: 20px 0; }
@media (max-width: 820px) { .cart-page { grid-template-columns: 1fr; } .cart-summary { position: static; } }

/* ── Generic section helpers used by home / content pages ─────────────── */
.section { border-bottom: 2px solid var(--color-divider); }
.acc-item { border-bottom: 2px solid var(--color-divider); }
.acc-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; background: transparent; border: 0; padding: 20px 0; cursor: pointer; text-align: left; font-family: var(--font-heading); font-weight: 800; font-size: 19px; color: var(--color-text); }
.acc-q:hover { color: var(--color-accent); }
.acc-a { display: none; }
.acc-item[data-open] .acc-a { display: block; }
.acc-a { font-size: 15px; max-width: 70ch; padding-bottom: 20px; margin: 0; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* ── Minimal scroll reveal (gentle fade + rise, once) ─────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ── Shared responsive helpers (usable on any page) ───────────────────── */
.grid-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: center; }
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; gap: 32px; } }

/* ── Tablet ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .site-foot { padding: 48px 24px 28px; }
  .foot-grid { gap: 28px; }
}
/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .anno { font-size: 10px; letter-spacing: 0.06em; padding: 8px 16px; }
  .anno span:last-child { display: none; }
  .crumbs { padding: 14px 20px; }
  .pdp-info { padding: 28px 20px; }
  .pdp-benefits { grid-template-columns: 1fr 1fr; }
  .pdp-benefits li:nth-child(3) { border-left: 0; }
  .buy-row { flex-wrap: wrap; }
  .pdp-add { width: 100%; flex: 1 1 100%; }
  .foot-legal { flex-direction: column; gap: 12px; }
  .cart-page { gap: 24px; }
}
@media (max-width: 400px) {
  .prod-grid { grid-template-columns: 1fr; }
}