/* ============================================================
   Comic Con Baltics — Merch Shop
   Component styles (front page / global)
   ------------------------------------------------------------
   Depends on css/tokens.css. All colors, fonts and spacing come
   from tokens — do not hardcode values here.
   Class naming: BEM-ish (.block__element --modifier .is-state).
   JS hooks use [data-js] attributes, never style classes.
   ============================================================ */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--ccb-paper);
  color: var(--ccb-text);
  font-family: var(--ccb-font-body);
  font-size: var(--ccb-fs-body);
  line-height: var(--ccb-lh-body);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ccb-ink); color: var(--ccb-paper); }

img { display: block; max-width: 100%; }

a { color: var(--ccb-text); text-decoration: none; }
a:hover { color: var(--ccb-black); }

button { font: inherit; }

:focus-visible {
  outline: 2px solid var(--ccb-ink);
  outline-offset: 2px;
}
.site-footer :focus-visible { outline-color: var(--ccb-inv-text); }

.container {
  max-width: var(--ccb-container);
  margin-inline: auto;
  padding-inline: var(--ccb-gutter);
}

.skip-link {
  position: absolute;
  left: var(--ccb-sp-sm);
  top: calc(-1 * var(--ccb-sp-6xl));
  z-index: 200;
  background: var(--ccb-ink);
  color: var(--ccb-paper);
  padding: var(--ccb-sp-xs) var(--ccb-sp-sm);
  border-radius: var(--ccb-radius-sm);
  transition: top var(--ccb-dur-fast) var(--ccb-ease);
}
.skip-link:focus { top: var(--ccb-sp-sm); color: var(--ccb-paper); }

/* Reusable caps label */
.eyebrow {
  font-family: var(--ccb-font-display);
  font-weight: 700;
  font-size: var(--ccb-fs-label);
  letter-spacing: var(--ccb-ls-caps-xl);
  text-transform: uppercase;
  color: var(--ccb-text-muted);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ccb-font-display);
  font-weight: 700;
  font-size: var(--ccb-fs-btn);
  letter-spacing: var(--ccb-ls-caps-md);
  text-transform: uppercase;
  padding: var(--ccb-sp-sm) var(--ccb-sp-xl);
  border-radius: var(--ccb-radius-sm);
  cursor: pointer;
  transition: background var(--ccb-dur-fast) var(--ccb-ease),
              border-color var(--ccb-dur-fast) var(--ccb-ease),
              color var(--ccb-dur-fast) var(--ccb-ease);
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn--primary {
  color: var(--ccb-paper);
  background: var(--ccb-ink);
  border: none;
}
.btn--primary:hover:not(:disabled),
.btn--primary:active:not(:disabled) { background: var(--ccb-black); color: var(--ccb-paper); }

.btn--outline {
  color: var(--ccb-text);
  background: transparent;
  border: 1px solid var(--ccb-border-strong);
  padding-inline: var(--ccb-sp-lg);
}
.btn--outline:hover:not(:disabled),
.btn--outline:active:not(:disabled) { border-color: var(--ccb-ink); color: var(--ccb-text); }

/* Square icon button (wishlist) */
.btn--icon {
  width: 52px;
  height: 52px;
  flex: none;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ccb-border-mid);
  color: var(--ccb-text);
}
.btn--icon:hover:not(:disabled) { border-color: var(--ccb-ink); }
.btn--icon svg { width: 18px; height: 18px; }

/* ============================================================
   OPTIONAL MODULE — Announcement bar
   Hidden in the approved mock; controlled by a theme option
   ("show announcement bar" + free-shipping threshold).
   ============================================================ */
.announce {
  background: var(--ccb-ink);
  color: var(--ccb-paper);
  text-align: center;
  padding: var(--ccb-sp-2xs) var(--ccb-gutter);
  font-family: var(--ccb-font-display);
  font-weight: 600;
  font-size: var(--ccb-fs-label-xs);
  letter-spacing: var(--ccb-ls-caps-lg);
  text-transform: uppercase;
}

/* ---------- Site header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ccb-header-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ccb-hairline);
}
/* Logged-in: offset the sticky header below the WP admin bar (32px, 46px ≤782px). */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ccb-sp-md);
  padding-block: var(--ccb-sp-sm);
}

.site-header__brand {
  font-family: var(--ccb-font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: var(--ccb-ls-caps-lg);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ccb-text);
}

.site-header__nav { display: flex; gap: var(--ccb-sp-lg); }

.nav-link {
  font-family: var(--ccb-font-display);
  font-weight: 600;
  font-size: var(--ccb-fs-label-lg);
  letter-spacing: var(--ccb-ls-caps);
  text-transform: uppercase;
  color: var(--ccb-text-secondary);
  transition: color var(--ccb-dur-fast) var(--ccb-ease);
}
.nav-link:hover { color: var(--ccb-text); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--ccb-sp-md);
}

.bag {
  display: inline-flex;
  align-items: center;
  gap: var(--ccb-sp-2xs);
  font-family: var(--ccb-font-display);
  font-weight: 600;
  font-size: var(--ccb-fs-label-lg);
  letter-spacing: var(--ccb-ls-caps);
  text-transform: uppercase;
  color: var(--ccb-text);
}

.bag__count {
  min-width: 22px;
  height: 22px;
  padding: 0 var(--ccb-sp-2xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ccb-ink);
  color: var(--ccb-paper);
  border-radius: var(--ccb-radius-pill);
  font-size: var(--ccb-fs-label-xs);
  font-weight: 700;
}

/* Hamburger — mobile only */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ccb-text);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---------- Mobile nav overlay ---------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ccb-paper);
  padding: calc(var(--ccb-sp-6xl) + var(--ccb-sp-md)) var(--ccb-gutter) var(--ccb-sp-xl);
  display: flex;
  flex-direction: column;
  gap: var(--ccb-sp-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-1 * var(--ccb-sp-2xs)));
  transition: opacity var(--ccb-dur-nav) var(--ccb-ease),
              transform var(--ccb-dur-nav) var(--ccb-ease),
              visibility 0s linear var(--ccb-dur-nav);
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
body.nav-open { overflow: hidden; }

.mobile-nav__link {
  font-family: var(--ccb-font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: var(--ccb-ls-title);
  text-transform: uppercase;
  color: var(--ccb-text);
  padding-block: var(--ccb-sp-2xs);
  border-bottom: 1px solid var(--ccb-hairline);
}
.mobile-nav__secondary {
  margin-top: auto;
  display: flex;
  gap: var(--ccb-sp-md);
}

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding-block: var(--ccb-sp-7xl) var(--ccb-sp-5xl);
}

.hero__logo { height: 128px; width: auto; margin: 0 auto var(--ccb-sp-xl); }

.hero__eyebrow {
  letter-spacing: var(--ccb-ls-caps-2xl);
  margin-bottom: var(--ccb-sp-md);
}

.hero__title {
  font-family: var(--ccb-font-display);
  font-weight: 900;
  font-size: var(--ccb-fs-display);
  line-height: var(--ccb-lh-display);
  letter-spacing: var(--ccb-ls-display);
  text-transform: uppercase;
  margin: 0 0 var(--ccb-sp-md);
}

.hero__lede {
  max-width: var(--ccb-measure-lede);
  margin: 0 auto var(--ccb-sp-xl);
  font-size: var(--ccb-fs-lede);
  color: var(--ccb-text-secondary);
}

.hero__actions {
  display: flex;
  gap: var(--ccb-sp-xs);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Marquee strip (static, no animation) ---------- */
.marquee {
  border-top: 1px solid var(--ccb-hairline);
  border-bottom: 1px solid var(--ccb-hairline);
}
.marquee__inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ccb-sp-2xl);
  padding-block: var(--ccb-sp-sm);
  font-family: var(--ccb-font-display);
  font-weight: 600;
  font-size: var(--ccb-fs-label-xs);
  letter-spacing: var(--ccb-ls-caps-xl);
  text-transform: uppercase;
  color: var(--ccb-text-muted);
}
.marquee__sep { color: var(--ccb-text-faint); }

/* ---------- Shared section head ---------- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ccb-sp-md);
  margin-bottom: var(--ccb-sp-lg);
}
.section-head .eyebrow { display: block; margin-bottom: var(--ccb-sp-2xs); }

.section-head__title {
  font-family: var(--ccb-font-display);
  font-weight: 800;
  font-size: var(--ccb-fs-lg);
  line-height: var(--ccb-lh-heading);
  letter-spacing: var(--ccb-ls-heading);
  text-transform: uppercase;
  margin: 0;
}

.section-head__fig {
  font-family: var(--ccb-font-display);
  font-weight: 700;
  font-size: var(--ccb-fs-label);
  letter-spacing: var(--ccb-ls-caps-lg);
  color: var(--ccb-text-faint);
  white-space: nowrap;
}

/* ---------- Featured product ---------- */
.feature { padding-block: var(--ccb-sp-6xl) var(--ccb-sp-5xl); }

.feature__cols {
  display: flex;
  gap: var(--ccb-sp-3xl);
  align-items: stretch;
}
/* Variant: image on the right (theme option "featured image side") */
.feature__cols--flip { flex-direction: row-reverse; }

.feature__media { flex: 1; min-width: 0; }

.feature__frame {
  position: relative;
  aspect-ratio: 1 / 1.12;
  background: var(--ccb-surface);
  border: 1px solid var(--ccb-hairline);
  border-radius: var(--ccb-radius-sm);
  overflow: hidden;
}

.feature__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* same no-crop rule as the product cards */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ccb-dur-slow) var(--ccb-ease);
}
.feature__img.is-active { opacity: 1; pointer-events: auto; }

.feature__panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--ccb-sp-2xs);
}

.feature__badges {
  display: flex;
  align-items: baseline;
  gap: var(--ccb-sp-xs);
  margin-bottom: var(--ccb-sp-xs);
}

.badge {
  font-family: var(--ccb-font-display);
  font-weight: 700;
  font-size: var(--ccb-fs-label-xs);
  letter-spacing: var(--ccb-ls-caps-lg);
  text-transform: uppercase;
  color: var(--ccb-paper);
  background: var(--ccb-ink);
  padding: var(--ccb-sp-3xs) var(--ccb-sp-2xs);
  border-radius: var(--ccb-radius-sm);
}
.badge--ghost {
  background: none;
  color: var(--ccb-text-muted); /* AA on paper (Phase 7) */
  padding: 0;
}

.feature__title {
  font-family: var(--ccb-font-display);
  font-weight: 800;
  font-size: var(--ccb-fs-lg);
  line-height: var(--ccb-lh-heading);
  letter-spacing: var(--ccb-ls-title);
  text-transform: none;
  margin: 0 0 var(--ccb-sp-2xs);
}

.feature__price {
  font-family: var(--ccb-font-display);
  font-weight: 600;
  font-size: var(--ccb-fs-sm);
  margin-bottom: var(--ccb-sp-md);
}

.feature__desc {
  max-width: var(--ccb-measure-body);
  margin: 0 0 var(--ccb-sp-lg);
  color: var(--ccb-text-secondary);
}

.field-label {
  font-family: var(--ccb-font-display);
  font-weight: 700;
  font-size: var(--ccb-fs-label-sm);
  letter-spacing: var(--ccb-ls-caps-lg);
  text-transform: uppercase;
  color: var(--ccb-text-muted);
  margin-bottom: var(--ccb-sp-xs);
}

/* Colour swatches */
.swatches {
  display: flex;
  gap: var(--ccb-sp-xs);
  margin-bottom: var(--ccb-sp-lg);
}
.swatch {
  width: 34px;
  height: 34px;
  border-radius: var(--ccb-radius-full);
  border: 1px solid var(--ccb-border-mid);
  cursor: pointer;
  padding: 0;
  transition: box-shadow var(--ccb-dur-med) var(--ccb-ease);
}
.swatch.is-selected { box-shadow: var(--ccb-ring-swatch); }
.swatch--black  { background: var(--ccb-ink); }
.swatch--yellow { background: var(--ccb-yellow); }
.swatch--mint   { background: var(--ccb-mint); }

/* Size picker */
.sizes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ccb-sp-2xs);
  margin-bottom: var(--ccb-sp-lg);
}
.size {
  min-width: 48px;
  height: 44px;
  padding: 0 var(--ccb-sp-2xs);
  font-family: var(--ccb-font-display);
  font-weight: 700;
  font-size: var(--ccb-fs-btn);
  letter-spacing: var(--ccb-ls-size);
  cursor: pointer;
  border-radius: var(--ccb-radius-sm);
  background: transparent;
  color: var(--ccb-text);
  border: 1px solid var(--ccb-border-mid);
  transition: background var(--ccb-dur-fast) var(--ccb-ease),
              color var(--ccb-dur-fast) var(--ccb-ease),
              border-color var(--ccb-dur-fast) var(--ccb-ease);
}
.size:hover:not(.is-selected):not(:disabled) { border-color: var(--ccb-ink); }
.size.is-selected {
  background: var(--ccb-ink);
  color: var(--ccb-paper);
  border-color: var(--ccb-ink);
}
.size:disabled {           /* out-of-stock */
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.feature__cta {
  display: flex;
  gap: var(--ccb-sp-xs);
  align-items: center;
}
.feature__cta .btn--primary { flex: 1; padding-block: var(--ccb-sp-sm); }

/* ---------- Collection ---------- */
.collection { padding-block: var(--ccb-sp-xl) var(--ccb-sp-6xl); }

.collection .section-head {
  border-top: 1px solid var(--ccb-hairline);
  padding-top: var(--ccb-sp-xl);
}
.collection .section-head__title { font-size: var(--ccb-fs-md); }

.tabs { display: flex; gap: var(--ccb-sp-md); }
.tab {
  font-family: var(--ccb-font-display);
  font-weight: 700;
  font-size: var(--ccb-fs-label-lg);
  letter-spacing: var(--ccb-ls-caps);
  text-transform: uppercase;
  background: none;
  border: none;
  padding: var(--ccb-sp-2xs) 0;
  cursor: pointer;
  color: var(--ccb-text-muted); /* interactive text — faint fails AA (Phase 7) */
  border-bottom: 2px solid transparent;
  transition: color var(--ccb-dur-med) var(--ccb-ease),
              border-color var(--ccb-dur-med) var(--ccb-ease);
}
.tab:hover { color: var(--ccb-text); }
.tab.is-active { color: var(--ccb-text); border-bottom-color: var(--ccb-ink); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* theme option: 3 or 4 columns */
  gap: var(--ccb-sp-md);
}
.product-grid--3 { grid-template-columns: repeat(3, 1fr); }

.product-card { display: flex; flex-direction: column; position: relative; }
.product-card__link { position: absolute; inset: 0; z-index: 1; border-radius: var(--ccb-radius-sm); }
.product-card__add { position: relative; z-index: 2; }

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--ccb-surface);
  border: 1px solid var(--ccb-hairline);
  border-radius: var(--ccb-radius-sm);
  overflow: hidden;
}
.product-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain, not cover: product shots run taller than 4:5 — letterbox on the
     surface tone instead of cropping the garment. */
  object-fit: contain;
}

.product-card__index {
  position: absolute;
  z-index: 2;
  top: var(--ccb-sp-xs);
  left: var(--ccb-sp-xs);
  font-family: var(--ccb-font-display);
  font-weight: 700;
  font-size: var(--ccb-fs-label-xs);
  letter-spacing: var(--ccb-ls-caps-md);
  color: var(--ccb-text-faint);
}

.product-card__tag {
  position: absolute;
  z-index: 2;
  top: var(--ccb-sp-xs);
  right: var(--ccb-sp-xs);
  font-family: var(--ccb-font-display);
  font-weight: 700;
  font-size: var(--ccb-fs-label-2xs);
  letter-spacing: var(--ccb-ls-caps-lg);
  text-transform: uppercase;
  color: var(--ccb-paper);
  background: var(--ccb-ink);
  padding: var(--ccb-sp-3xs) var(--ccb-sp-2xs);
  border-radius: var(--ccb-radius-sm);
}

/* Placeholder until final product photography lands */
.product-card__photo-pending {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ccb-font-display);
  font-weight: 700;
  font-size: var(--ccb-fs-label-xs);
  letter-spacing: var(--ccb-ls-caps-lg);
  text-transform: uppercase;
  color: var(--ccb-text-faint);
}

.product-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ccb-sp-2xs);
  margin-top: var(--ccb-sp-sm);
}
.product-card__name { font-family: var(--ccb-font-display); font-weight: 700; }
.product-card__price { font-family: var(--ccb-font-display); font-weight: 600; }

.product-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ccb-sp-2xs);
  margin-top: var(--ccb-sp-3xs);
}
.product-card__sub {
  font-size: var(--ccb-fs-caption);
  letter-spacing: 0.03em;
  color: var(--ccb-text-muted);
}
.product-card__add {
  font-family: var(--ccb-font-display);
  font-weight: 700;
  font-size: var(--ccb-fs-label-sm);
  letter-spacing: var(--ccb-ls-caps);
  text-transform: uppercase;
  color: var(--ccb-text);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity var(--ccb-dur-fast) var(--ccb-ease);
}
.product-card__add:hover { opacity: 0.5; }

/* ---------- Newsletter ---------- */
.newsletter { border-top: 1px solid var(--ccb-hairline); }

.newsletter__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ccb-sp-2xl);
  padding-block: var(--ccb-sp-5xl);
  align-items: center;
}

.newsletter__title {
  font-family: var(--ccb-font-display);
  font-weight: 900;
  font-size: var(--ccb-fs-xl);
  line-height: var(--ccb-lh-heading);
  letter-spacing: var(--ccb-ls-heading);
  text-transform: uppercase;
  margin: 0 0 var(--ccb-sp-xs);
}

.newsletter__copy {
  max-width: var(--ccb-measure-caption);
  margin: 0;
  color: var(--ccb-text-secondary);
}

.newsletter__form { display: flex; gap: var(--ccb-sp-2xs); }

.newsletter__input {
  flex: 1;
  min-width: 0;
  background: var(--ccb-surface);
  border: 1px solid var(--ccb-border-mid);
  border-radius: var(--ccb-radius-sm);
  padding: var(--ccb-sp-sm);
  color: var(--ccb-text);
  font-family: var(--ccb-font-body);
  font-size: 14px;
  transition: border-color var(--ccb-dur-fast) var(--ccb-ease);
}
.newsletter__input::placeholder { color: var(--ccb-text-muted); }
.newsletter__input:focus { outline: 2px solid var(--ccb-ink); outline-offset: 1px; border-color: var(--ccb-ink); }

.newsletter__form .btn { padding-block: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ccb-ink); color: var(--ccb-inv-text); }

.site-footer__inner { padding-block: var(--ccb-sp-3xl) var(--ccb-sp-lg); }

.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ccb-sp-xl);
  flex-wrap: wrap;
  margin-bottom: var(--ccb-sp-2xl);
}

.site-footer__brand { max-width: 300px; }
.site-footer__logo { height: 72px; width: auto; margin-bottom: var(--ccb-sp-sm); }
.site-footer__blurb {
  margin: 0;
  font-size: var(--ccb-fs-small);
  line-height: var(--ccb-lh-small);
  color: var(--ccb-inv-muted);
}

.site-footer__cols { display: flex; gap: var(--ccb-sp-4xl); }

.site-footer__col { display: flex; flex-direction: column; gap: var(--ccb-sp-xs); }

.site-footer__col-title {
  font-family: var(--ccb-font-display);
  font-weight: 700;
  font-size: var(--ccb-fs-label-xs);
  letter-spacing: var(--ccb-ls-caps-lg);
  text-transform: uppercase;
  color: var(--ccb-inv-faint);
  margin-bottom: var(--ccb-sp-3xs);
}

.site-footer__link {
  font-size: var(--ccb-fs-small);
  color: var(--ccb-inv-secondary);
  transition: color var(--ccb-dur-fast) var(--ccb-ease);
}
.site-footer__link:hover { color: var(--ccb-inv-text); }

.site-footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ccb-sp-2xs);
  padding-top: var(--ccb-sp-md);
  border-top: 1px solid var(--ccb-inv-hairline);
  font-size: var(--ccb-fs-caption);
  letter-spacing: 0.05em;
  color: var(--ccb-inv-faint);
}

/* ============================================================
   Responsive — see docs/05-responsive-spec.md for the full spec
   Breakpoints: 1024 / 768 / 560
   ============================================================ */

@media (max-width: 1024px) {
  :root { --ccb-gutter: var(--ccb-sp-xl); }

  .feature__cols { gap: var(--ccb-sp-xl); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .site-footer__cols { gap: var(--ccb-sp-2xl); }
}

@media (max-width: 768px) {
  :root { --ccb-gutter: var(--ccb-sp-md); }

  /* Header: collapse nav + search into overlay */
  .site-header__nav { display: none; }
  .site-header__actions .nav-link { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header__inner { padding-block: var(--ccb-sp-xs); }

  .hero { padding-block: var(--ccb-sp-4xl) var(--ccb-sp-2xl); }
  .hero__logo { height: 88px; margin-bottom: var(--ccb-sp-lg); }
  .hero__lede { font-size: var(--ccb-fs-body); }

  .marquee__inner { gap: var(--ccb-sp-md); row-gap: var(--ccb-sp-2xs); }

  .feature { padding-block: var(--ccb-sp-3xl); }
  .feature__cols,
  .feature__cols--flip { flex-direction: column; gap: var(--ccb-sp-lg); }
  .feature__panel { padding-block: 0; }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ccb-sp-xs);
  }
  .section-head__fig { display: none; }

  .collection { padding-block: var(--ccb-sp-lg) var(--ccb-sp-3xl); }
  .collection .section-head { padding-top: var(--ccb-sp-lg); }
  .product-grid,
  .product-grid--3 { grid-template-columns: repeat(2, 1fr); gap: var(--ccb-sp-sm); }
  .product-card__row { margin-top: var(--ccb-sp-xs); }

  .newsletter__grid {
    grid-template-columns: 1fr;
    gap: var(--ccb-sp-md);
    padding-block: var(--ccb-sp-3xl);
  }

  .site-footer__top { flex-direction: column; gap: var(--ccb-sp-lg); }
  .site-footer__logo { height: 56px; }
}

@media (max-width: 560px) {
  .hero__actions .btn { width: 100%; }

  .newsletter__form { flex-direction: column; }
  .newsletter__form .btn { padding-block: var(--ccb-sp-sm); }

  .feature__cta { flex-wrap: wrap; }
  .feature__cta .btn--primary { flex-basis: 100%; }

  .tabs { flex-wrap: wrap; gap: var(--ccb-sp-sm); }

  .site-footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ccb-sp-3xs);
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .feature__img,
  .mobile-nav,
  .swatch { transition: none; }
}

/* ============================================================
   Theme additions (ccb) — on top of the design export.
   ============================================================ */

/* Newsletter honeypot — visually gone, still in the POST for bots. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
}

.newsletter__error {
  margin: var(--ccb-sp-2xs) 0 0;
  font-size: var(--ccb-fs-caption);
  color: var(--ccb-text-muted);
}

/* Editorial-constraint clamps — field help text asks for the limits
   (hero ≤24/line, subtitle ≤28, marquee ≤26); these make sure editor
   overruns degrade to ellipsis instead of breaking the layout. */
.hero__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* min-width: 0 on the grid item — without it a nowrap subtitle inflates
   the card's min-content width and blows the 1fr column wider. */
.product-card { min-width: 0; }

.product-card__name,
.product-card__sub {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.product-card__price { flex-shrink: 0; }

.product-card__add {
  flex-shrink: 0;
  white-space: nowrap;
}

.marquee__inner span {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ============================================================
   Inner pages (Phase 5) — derived from the approved system:
   title block, prose column, news cards, pagination, search rows.
   ============================================================ */

/* Utility WP core expects (pagination headings, etc.) */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Title block ---------- */
.page-head {
  padding-block: var(--ccb-sp-7xl) var(--ccb-sp-2xl);
  border-bottom: 1px solid var(--ccb-hairline);
}

.page-head .eyebrow { display: block; margin-bottom: var(--ccb-sp-md); }

.page-head__title {
  font-family: var(--ccb-font-display);
  font-weight: 900;
  font-size: var(--ccb-fs-xxl);
  line-height: var(--ccb-lh-heading);
  letter-spacing: var(--ccb-ls-heading);
  text-transform: uppercase;
  margin: 0;
  overflow-wrap: break-word;
}

.page-head__meta {
  margin: var(--ccb-sp-md) 0 0;
  font-family: var(--ccb-font-display);
  font-weight: 600;
  font-size: var(--ccb-fs-label-xs);
  letter-spacing: var(--ccb-ls-caps-md);
  text-transform: uppercase;
  color: var(--ccb-text-faint);
}

/* ---------- Prose column ---------- */
.prose {
  max-width: var(--ccb-measure-prose);
  padding-block: var(--ccb-sp-2xl) var(--ccb-sp-6xl);
}

.prose--lede > p:first-child,
.prose .prose__lede {
  font-size: var(--ccb-fs-lede);
  color: var(--ccb-text-secondary);
}

/* Text-page rhythm (privacy-policy.html reference) — roomier than the
   theme.json defaults so legal/help pages don't read compressed. */
.prose p,
.prose ul,
.prose ol {
  margin-block: 0 var(--ccb-sp-md);
}
.prose li + li { margin-top: var(--ccb-sp-xs); }
.prose li::marker {
  color: var(--ccb-text-faint);
  font-weight: 600;
}

.prose h2 {
  font-family: var(--ccb-font-display);
  font-weight: 800;
  font-size: var(--ccb-fs-sm);
  line-height: var(--ccb-lh-heading);
  letter-spacing: var(--ccb-ls-heading);
  text-transform: uppercase;
  margin: var(--ccb-sp-3xl) 0 var(--ccb-sp-sm);
}

/* Auto-numbered sections — the "Fig. 01" conceit applied to prose h2s. */
.prose--numbered { counter-reset: prose-sec; }
.prose--numbered h2::before {
  counter-increment: prose-sec;
  content: counter(prose-sec, decimal-leading-zero);
  margin-right: var(--ccb-sp-sm);
  font-weight: 600;
  font-size: var(--ccb-fs-label-xs);
  letter-spacing: var(--ccb-ls-caps-md);
  color: var(--ccb-text-faint);
  vertical-align: 0.35em;
}

.prose blockquote {
  margin-inline: 0;
  padding-left: var(--ccb-sp-md);
  border-left: 1px solid var(--ccb-border-strong);
}
.prose blockquote cite {
  font-size: var(--ccb-fs-caption);
  color: var(--ccb-text-muted);
  font-style: normal;
}

/* ---------- Single post ---------- */
.post-figure { margin: var(--ccb-sp-2xl) auto 0; }
.post-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--ccb-hairline);
  border-radius: var(--ccb-radius-sm);
}

.more-news {
  border-top: 1px solid var(--ccb-hairline);
  padding-block: var(--ccb-sp-3xl) var(--ccb-sp-6xl);
}
.more-news .section-head__title { font-size: var(--ccb-fs-md); }

/* ---------- News cards (collection pattern for posts) ---------- */
.news-card .product-card__media { display: block; }
.news-card .product-card__name {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ---------- Pagination ---------- */
.pagination {
  margin-top: var(--ccb-sp-2xl);
  padding-top: var(--ccb-sp-md);
  border-top: 1px solid var(--ccb-hairline);
}
.pagination .nav-links {
  display: flex;
  gap: var(--ccb-sp-sm);
  justify-content: center;
}
.pagination .page-numbers {
  font-family: var(--ccb-font-display);
  font-weight: 700;
  font-size: var(--ccb-fs-label-lg);
  letter-spacing: var(--ccb-ls-caps);
  text-transform: uppercase;
  color: var(--ccb-text-muted);
}
.pagination a.page-numbers:hover,
.pagination .page-numbers.current { color: var(--ccb-text); }

/* ---------- Search results ---------- */
.search-results { padding-bottom: var(--ccb-sp-6xl); }
.result-row {
  padding-block: var(--ccb-sp-md);
  border-bottom: 1px solid var(--ccb-hairline);
}
.result-row__head {
  display: flex;
  align-items: center;
  gap: var(--ccb-sp-xs);
}
.result-row__title {
  font-family: var(--ccb-font-display);
  font-weight: 700;
}
.result-row__excerpt {
  margin: var(--ccb-sp-3xs) 0 0;
  font-size: var(--ccb-fs-caption);
  color: var(--ccb-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-hero__form {
  display: flex;
  gap: var(--ccb-sp-xs);
  max-width: var(--ccb-measure-lede);
  margin-inline: auto;
}
.search-hero__form .newsletter__input { flex: 1; min-width: 0; }

@media (max-width: 768px) {
  .page-head { padding-block: var(--ccb-sp-4xl) var(--ccb-sp-lg); }
  .page-head__title { font-size: var(--ccb-fs-xl); }
}

@media (max-width: 560px) {
  .news-grid { grid-template-columns: 1fr; }
  .search-hero__form { flex-direction: column; }
}

/* ============================================================
   Product page (Phase 6 ⚙) — hairline accordion rows.
   Native <details>; the +/– marker is generated, no JS.
   ============================================================ */
.accordion {
  margin-top: var(--ccb-sp-3xl);
  border-top: 1px solid var(--ccb-hairline);
}

.acc-row { border-bottom: 1px solid var(--ccb-hairline); }

.acc-row summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ccb-sp-sm);
  padding-block: var(--ccb-sp-md);
  cursor: pointer;
  list-style: none;
  font-family: var(--ccb-font-display);
  font-weight: 700;
  font-size: var(--ccb-fs-label-lg);
  letter-spacing: var(--ccb-ls-caps);
  text-transform: uppercase;
}
.acc-row summary::-webkit-details-marker { display: none; }
.acc-row summary::after {
  content: "+";
  font-weight: 600;
  color: var(--ccb-text-muted);
}
.acc-row[open] summary::after { content: "\2212"; }

.acc-row__body {
  padding-bottom: var(--ccb-sp-md);
  max-width: var(--ccb-measure-prose);
  color: var(--ccb-text-secondary);
  font-size: var(--ccb-fs-small);
}
.acc-row__body p { margin: 0 0 var(--ccb-sp-2xs); }

/* ============================================================
   Cart / checkout (Phase 6 ⚙) — light token styling only.
   Woo's classic markup in the 720px page column; layouts are
   Woo's own, nothing invented (§8).
   ============================================================ */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  margin-block: var(--ccb-sp-md);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  text-align: left;
  padding: var(--ccb-sp-xs) var(--ccb-sp-2xs);
  border-bottom: 1px solid var(--ccb-hairline);
  font-size: var(--ccb-fs-small);
}
.woocommerce table.shop_table thead th,
.woocommerce table.shop_table th {
  font-family: var(--ccb-font-display);
  font-weight: 700;
  font-size: var(--ccb-fs-label-sm);
  letter-spacing: var(--ccb-ls-caps);
  text-transform: uppercase;
  color: var(--ccb-text-muted);
}
.woocommerce table.shop_table img {
  width: 48px;
  height: auto;
  border: 1px solid var(--ccb-hairline);
  border-radius: var(--ccb-radius-sm);
}

.woocommerce .input-text,
.woocommerce select,
.woocommerce textarea {
  width: 100%;
  padding: var(--ccb-sp-xs) var(--ccb-sp-sm);
  background: var(--ccb-surface);
  border: 1px solid var(--ccb-border-mid);
  border-radius: var(--ccb-radius-sm);
  font: inherit;
  font-size: var(--ccb-fs-small);
  color: var(--ccb-text);
}
.woocommerce .input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus { outline: 2px solid var(--ccb-ink); outline-offset: 1px; }

.woocommerce .form-row { margin: 0 0 var(--ccb-sp-sm); }
.woocommerce .form-row label {
  display: block;
  margin-bottom: var(--ccb-sp-3xs);
  font-family: var(--ccb-font-display);
  font-weight: 600;
  font-size: var(--ccb-fs-label-sm);
  letter-spacing: var(--ccb-ls-caps);
  text-transform: uppercase;
  color: var(--ccb-text-muted);
}
.woocommerce .quantity .qty { width: 72px; text-align: center; }

/* Woo buttons → the theme's primary button */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce #place_order {
  display: inline-block;
  padding: var(--ccb-sp-xs) var(--ccb-sp-lg);
  background: var(--ccb-ink);
  color: var(--ccb-paper);
  border: 1px solid var(--ccb-ink);
  border-radius: var(--ccb-radius-sm);
  cursor: pointer;
  font-family: var(--ccb-font-display);
  font-weight: 700;
  font-size: var(--ccb-fs-btn);
  letter-spacing: var(--ccb-ls-caps-md);
  text-transform: uppercase;
  transition: background var(--ccb-dur-fast) var(--ccb-ease);
}
.woocommerce .button:hover,
.woocommerce #place_order:hover { background: var(--ccb-black); }
.woocommerce .button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Notices — hairline boxes, no invented colors */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  margin: 0 0 var(--ccb-sp-md);
  padding: var(--ccb-sp-xs) var(--ccb-sp-sm);
  border: 1px solid var(--ccb-border-strong);
  border-radius: var(--ccb-radius-sm);
  font-size: var(--ccb-fs-small);
}
.woocommerce-error { border-color: var(--ccb-ink); }
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button { float: right; padding: var(--ccb-sp-3xs) var(--ccb-sp-xs); margin-left: var(--ccb-sp-xs); }

/* Payment methods + totals boxes */
.woocommerce #payment {
  background: var(--ccb-surface);
  border: 1px solid var(--ccb-hairline);
  border-radius: var(--ccb-radius-sm);
  padding: var(--ccb-sp-md);
}
.woocommerce #payment ul.wc_payment_methods { list-style: none; margin: 0 0 var(--ccb-sp-md); padding: 0; }
.woocommerce #payment li { margin-bottom: var(--ccb-sp-2xs); }
.woocommerce #payment .payment_box {
  margin-top: var(--ccb-sp-2xs);
  font-size: var(--ccb-fs-caption);
  color: var(--ccb-text-secondary);
}
.woocommerce .wc-proceed-to-checkout { margin-top: var(--ccb-sp-md); }

/* Screen-reader-only bits Woo marks up */
.woocommerce .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ============================================================
   ⚙ Cart & checkout (cart.html / checkout.html references)
   ============================================================ */
.commerce-page { padding-block: var(--ccb-sp-xl) var(--ccb-sp-6xl); }

.cart,
.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--ccb-sp-2xl);
  align-items: start;
}

/* ---- Cart rows ---- */
.cart-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: var(--ccb-sp-md);
  padding-block: var(--ccb-sp-md);
  border-top: 1px solid var(--ccb-hairline);
}
.cart-items .cart-row:last-of-type { border-bottom: 1px solid var(--ccb-hairline); }

.cart-row__thumb {
  width: 96px;
  aspect-ratio: 4 / 5;
  background: var(--ccb-surface);
  border: 1px solid var(--ccb-hairline);
  border-radius: var(--ccb-radius-sm);
  overflow: hidden;
}
.cart-row__thumb img { width: 100%; height: 100%; object-fit: contain; }

.cart-row__name,
.cart-row__name a {
  font-weight: 700;
  color: var(--ccb-text);
  text-decoration: none;
}
.cart-row__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cart-row__variant {
  margin-top: var(--ccb-sp-3xs);
  font-size: var(--ccb-fs-caption);
  color: var(--ccb-text-muted);
}
.cart-row__controls {
  display: flex;
  align-items: center;
  gap: var(--ccb-sp-md);
  margin-top: var(--ccb-sp-sm);
}
.cart-row__price { font-family: var(--ccb-font-display); font-weight: 700; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ccb-border-mid);
  border-radius: var(--ccb-radius-sm);
  background: var(--ccb-surface);
}
.qty__btn {
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--ccb-fs-body);
  color: var(--ccb-text);
}
.qty__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.qty input.qty__value {
  width: 34px;
  border: none;
  background: transparent;
  text-align: center;
  font: inherit;
  font-weight: 600;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty input.qty__value::-webkit-outer-spin-button,
.qty input.qty__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-row__remove {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: var(--ccb-fs-caption);
  color: var(--ccb-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cart-row__remove:hover { color: var(--ccb-text); }

.cart-continue {
  display: inline-block;
  margin-top: var(--ccb-sp-lg);
  font-family: var(--ccb-font-display);
  font-weight: 700;
  font-size: var(--ccb-fs-label);
  letter-spacing: var(--ccb-ls-caps);
  text-transform: uppercase;
  color: var(--ccb-text);
  text-decoration: none;
}
.cart-continue:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- Summary card (cart + checkout aside) ---- */
.cart-summary {
  background: var(--ccb-paper);
  border: 1px solid var(--ccb-hairline);
  border-radius: var(--ccb-radius-sm);
  padding: var(--ccb-sp-lg);
  position: sticky;
  top: calc(var(--ccb-sp-6xl) + var(--ccb-sp-md));
}
.cart-summary__title {
  margin: 0 0 var(--ccb-sp-md);
  font-family: var(--ccb-font-display);
  font-weight: 800;
  font-size: var(--ccb-fs-body);
  letter-spacing: var(--ccb-ls-caps);
  text-transform: uppercase;
}
.cart-summary__rows { margin: 0; }
.cart-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--ccb-sp-sm);
  padding-block: var(--ccb-sp-2xs);
  font-size: var(--ccb-fs-small);
  color: var(--ccb-text-secondary);
}
.cart-summary__row dt,
.cart-summary__row dd { margin: 0; }
.cart-summary__row--total {
  margin-top: var(--ccb-sp-2xs);
  padding-top: var(--ccb-sp-sm);
  border-top: 1px solid var(--ccb-hairline);
  font-family: var(--ccb-font-display);
  font-weight: 700;
  font-size: var(--ccb-fs-body);
  color: var(--ccb-text);
}
.cart-summary .btn,
.cart-summary #place_order { width: 100%; margin-top: var(--ccb-sp-md); }
.cart-summary__note {
  margin: var(--ccb-sp-sm) 0 0;
  text-align: center;
  font-size: var(--ccb-fs-caption);
  color: var(--ccb-text-muted);
}

/* ---- Empty cart ---- */
.cart-empty { text-align: center; padding-block: var(--ccb-sp-7xl); }
.cart-empty__eyebrow { margin-bottom: var(--ccb-sp-sm); }
.cart-empty__title {
  margin: 0 0 var(--ccb-sp-lg);
  font-family: var(--ccb-font-display);
  font-weight: 900;
  font-size: var(--ccb-fs-xl);
  line-height: var(--ccb-lh-heading);
  letter-spacing: var(--ccb-ls-heading);
  text-transform: uppercase;
}

/* ---- Checkout form sections ---- */
.form-section {
  border-top: 1px solid var(--ccb-hairline);
  padding-block: var(--ccb-sp-lg) var(--ccb-sp-xl);
}
.form-section__title {
  margin: 0 0 var(--ccb-sp-md);
  font-family: var(--ccb-font-display);
  font-weight: 800;
  font-size: var(--ccb-fs-body);
  letter-spacing: var(--ccb-ls-caps);
  text-transform: uppercase;
}
.form-section__title .idx {
  margin-right: var(--ccb-sp-sm);
  font-weight: 600;
  font-size: var(--ccb-fs-label-xs);
  letter-spacing: var(--ccb-ls-caps-md);
  color: var(--ccb-text-faint);
  vertical-align: 0.18em;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--ccb-sp-sm);
}
.form-grid p.form-row { grid-column: span 2; margin: 0 0 var(--ccb-sp-sm); }
.form-grid p.form-row-first { grid-column: 1; }
.form-grid p.form-row-last { grid-column: 2; }
.form-grid label {
  display: block;
  margin-bottom: var(--ccb-sp-3xs);
  font-family: var(--ccb-font-display);
  font-weight: 600;
  font-size: var(--ccb-fs-label-sm);
  letter-spacing: var(--ccb-ls-caps);
  text-transform: uppercase;
  color: var(--ccb-text-secondary);
}
.form-grid label .required { color: var(--ccb-text-faint); text-decoration: none; }
.form-grid .woocommerce-input-wrapper { display: block; }
.form-grid .input-text,
.form-grid select {
  width: 100%;
  padding: var(--ccb-sp-xs) var(--ccb-sp-sm);
  background: var(--ccb-surface);
  border: 1px solid var(--ccb-border-mid);
  border-radius: var(--ccb-radius-sm);
  font-family: var(--ccb-font-body);
  font-size: 16px; /* not a token: <16px zooms the viewport on iOS focus */
  color: var(--ccb-text);
}
.form-grid .input-text:focus,
.form-grid select:focus {
  outline: 2px solid var(--ccb-ink);
  outline-offset: 1px;
  border-color: var(--ccb-ink);
}

/* Woo payment box — flat per the reference gateway-slot note */
.form-section--payment #payment { background: transparent; border-radius: var(--ccb-radius-sm); }
.form-section--payment .wc_payment_methods {
  list-style: none;
  margin: 0 0 var(--ccb-sp-md);
  padding: var(--ccb-sp-md);
  background: var(--ccb-surface);
  border: 1px solid var(--ccb-border-mid);
  border-radius: var(--ccb-radius-sm);
}
.form-section--payment .wc_payment_method + .wc_payment_method { margin-top: var(--ccb-sp-sm); }
.form-section--payment .wc_payment_method label { font-weight: 600; cursor: pointer; }
.form-section--payment .payment_box {
  margin-top: var(--ccb-sp-2xs);
  font-size: var(--ccb-fs-caption);
  color: var(--ccb-text-muted);
}
.form-section--payment .woocommerce-privacy-policy-text p,
.checkout__terms {
  font-size: var(--ccb-fs-caption);
  color: var(--ccb-text-muted);
}
#place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--ccb-sp-sm) var(--ccb-sp-lg);
  border: none;
  border-radius: var(--ccb-radius-sm);
  background: var(--ccb-ink);
  color: var(--ccb-paper);
  font-family: var(--ccb-font-display);
  font-weight: 700;
  font-size: var(--ccb-fs-btn);
  letter-spacing: var(--ccb-ls-caps-md);
  text-transform: uppercase;
  cursor: pointer;
}
#place_order:hover { background: var(--ccb-black); }

/* ---- Delivery options + mini items (checkout aside) ---- */
.cart-summary__delivery {
  border-top: 1px solid var(--ccb-hairline);
  padding-block: var(--ccb-sp-sm);
  margin-top: var(--ccb-sp-xs);
}
.cart-summary__delivery-title {
  display: block;
  margin-bottom: var(--ccb-sp-2xs);
  font-family: var(--ccb-font-display);
  font-weight: 600;
  font-size: var(--ccb-fs-label-sm);
  letter-spacing: var(--ccb-ls-caps);
  text-transform: uppercase;
  color: var(--ccb-text-secondary);
}
.option {
  display: flex;
  align-items: center;
  gap: var(--ccb-sp-xs);
  padding: var(--ccb-sp-xs) var(--ccb-sp-sm);
  margin-top: var(--ccb-sp-2xs);
  background: var(--ccb-surface);
  border: 1px solid var(--ccb-border-mid);
  border-radius: var(--ccb-radius-sm);
  cursor: pointer;
}
.option:has(input:checked) { border-color: var(--ccb-ink); }
.option input { accent-color: var(--ccb-ink); }
.option__label { flex: 1; font-size: var(--ccb-fs-small); font-weight: 600; }
.option__hint {
  display: block;
  font-weight: 400;
  font-size: var(--ccb-fs-caption);
  color: var(--ccb-text-muted);
}
.option__price { font-weight: 700; font-size: var(--ccb-fs-small); }

.summary-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: var(--ccb-sp-sm);
  align-items: center;
  padding-block: var(--ccb-sp-xs);
}
.summary-item__thumb {
  width: 48px;
  aspect-ratio: 4 / 5;
  background: var(--ccb-surface);
  border: 1px solid var(--ccb-hairline);
  border-radius: var(--ccb-radius-sm);
  overflow: hidden;
}
.summary-item__thumb img { width: 100%; height: 100%; object-fit: contain; }
.summary-item__name { font-size: var(--ccb-fs-small); font-weight: 600; }
.summary-item__variant { font-size: var(--ccb-fs-caption); color: var(--ccb-text-muted); }
.summary-item__price { font-family: var(--ccb-font-display); font-weight: 700; font-size: var(--ccb-fs-small); }

@media (max-width: 900px) {
  .cart,
  .checkout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}
@media (max-width: 560px) {
  .cart-row { grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--ccb-sp-sm); }
  .cart-row__thumb { width: 72px; }
}

/* ============================================================
   Phone-width header fix — the nowrap wordmark + actions row was
   26px wider than a 390px viewport (horizontal scroll, white gap).
   ============================================================ */
@media (max-width: 480px) {
  .site-header__inner { gap: var(--ccb-sp-xs); }
  .site-header__actions { gap: var(--ccb-sp-xs); }
  .site-header__brand { font-size: 13px; letter-spacing: var(--ccb-ls-caps); }
}
@media (max-width: 360px) {
  .site-header__inner { padding-inline: var(--ccb-sp-sm); }
}
/* Safety net: no element may widen the page into a side-scroll. */
html { overflow-x: clip; }