/* VNIBUY storefront — site.css (G1.2 shell). All colours come from tokens.css; no hex literals here. */

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--color-text); background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0 0 var(--space-3); line-height: var(--lh-tight); font-weight: 700; color: var(--color-text); }
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--space-3); }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
dl { margin: 0; }
[hidden] { display: none !important; }

.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.site-main { flex: 1 0 auto; padding-block: var(--space-5) var(--space-8); }
.site-main:focus { outline: none; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-3); top: -100px; z-index: var(--z-modal);
  padding: var(--space-2) var(--space-4); background: var(--color-primary); color: var(--color-surface);
  border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: var(--space-3); text-decoration: none; }

.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--sm { width: 18px; height: 18px; }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent;
  font-weight: 600; line-height: 1; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.button--primary { background: var(--color-primary); color: var(--color-surface); }
.button--primary:hover { background: var(--color-primary-hover); color: var(--color-surface); text-decoration: none; }
.button--primary:active { background: var(--color-primary-active); }
.icon-button {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: transparent; border: 0; border-radius: var(--radius-md); color: var(--color-text);
}
.icon-button:hover { background: var(--color-surface-2); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.site-header__bar { border-bottom: 1px solid var(--color-border); }
.site-header__row {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; column-gap: var(--space-2);
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: center; color: var(--color-primary); }
.brand:hover { text-decoration: none; color: var(--color-primary-hover); }
.brand__mark {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--color-primary); color: var(--color-surface); font-weight: 700; font-size: 1.125rem;
}
.brand__name { font-weight: 800; font-size: 1.25rem; letter-spacing: .04em; }
.site-header__actions { display: flex; align-items: center; gap: var(--space-1); justify-self: end; }

.search { display: flex; align-items: stretch; width: 100%; }
.search__input {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong); border-right: 0; border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
}
.search__input::placeholder { color: var(--color-text-muted); }
.search__input:focus { border-color: var(--color-primary); }
.search__button {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 44px;
  border: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--color-primary); color: var(--color-surface);
}
.search__button:hover { background: var(--color-primary-hover); }
.search--large { max-width: 520px; margin-block: var(--space-4) var(--space-5); }

/* Mobile: search hidden until toggled; sits on its own row under the bar */
.site-header__menu { grid-row: 1; grid-column: 1; }
.site-header__row .brand { grid-row: 1; grid-column: 2; }
.site-header__actions { grid-row: 1; grid-column: 3; }
.site-header__search { display: none; grid-row: 2; grid-column: 1 / -1; padding-block: 0 var(--space-3); }
.site-header__search.is-open { display: flex; }

.hotline { display: none; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--color-text); }
.hotline:hover { background: var(--color-surface-2); text-decoration: none; color: var(--color-primary); }
.hotline__label { display: none; font-size: var(--fs-xs); color: var(--color-text-muted); }
.hotline__number { font-weight: 700; white-space: nowrap; }

/* Desktop primary navigation (hidden on mobile; drawer takes over) */
.primary-nav { display: none; background: var(--color-primary); color: var(--color-surface); }
.primary-nav__list { display: flex; align-items: stretch; min-height: var(--nav-h); }
.primary-nav__item { position: relative; display: flex; align-items: stretch; }
.primary-nav__link, .primary-nav__toggle {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-3);
  color: var(--color-surface); background: transparent; border: 0;
  /* Denser than body text on purpose: the bar has to hold the shortcut strip without truncating it. */
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
}
.primary-nav__link:hover, .primary-nav__toggle:hover, .primary-nav__item.is-open > .primary-nav__link, .primary-nav__item.is-open > .primary-nav__toggle {
  background: var(--color-primary-hover); color: var(--color-surface); text-decoration: none;
}
.primary-nav__link--button { padding-right: var(--space-3); }
.primary-nav__toggle { padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2)); }
.primary-nav__toggle .icon, .primary-nav__caret { transition: transform var(--dur-fast) var(--ease); }
.primary-nav__item.is-open > .primary-nav__toggle .icon,
.primary-nav__item.is-open > .primary-nav__link--button .primary-nav__caret { transform: rotate(180deg); }

/* The all-categories entry is the authoritative index: always first, always complete. */
.primary-nav__item--all { flex: none; }
.primary-nav__item--all > .primary-nav__link--button { background: var(--color-primary-active); padding-inline: var(--space-4); }

/* Shortcut strip: a convenience row that is clipped rather than allowed to widen the page.
   site.js hides the items that do not fit so nothing is rendered half-cut. */
.primary-nav__shortcuts { display: flex; flex: 1 1 auto; min-width: 0; }
.primary-nav__shortcut-list { display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.primary-nav__shortcut-list > .primary-nav__item { flex: 0 0 auto; }
.primary-nav__item--secondary { flex: none; }

.primary-nav__dropdown {
  display: none; position: absolute; left: 0; top: 100%; z-index: var(--z-dropdown); min-width: 240px;
  padding: var(--space-2) 0; background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-lg);
}
.primary-nav__dropdown a { display: block; padding: var(--space-2) var(--space-4); color: var(--color-text); }
.primary-nav__dropdown a:hover { background: var(--color-primary-tint); color: var(--color-primary); text-decoration: none; }
.primary-nav__item.is-open > .primary-nav__dropdown { display: block; }
@media (hover: hover) { .primary-nav__item.has-children:hover > .primary-nav__dropdown { display: block; } }

/* Panel behind the all-categories button. Width is bounded by the viewport so it can never
   reach past it, and a long tree scrolls inside the panel instead of growing the page. */
.primary-nav__panel { width: min(960px, calc(100vw - 2 * var(--gutter))); padding: var(--space-4) var(--space-3); max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
.primary-nav__panel-grid { columns: 3; column-gap: var(--space-5); }
.primary-nav__panel-group { break-inside: avoid; margin-bottom: var(--space-4); }
.primary-nav__panel-root { font-weight: 700; color: var(--color-primary); }
.primary-nav__panel-children a { padding-block: var(--space-1); color: var(--color-text-muted); font-size: var(--fs-sm); }
.primary-nav__panel-more { font-weight: 600; color: var(--color-primary); }

/* ---------- Mobile drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }
.drawer__backdrop { position: absolute; inset: 0; background: var(--color-overlay); }
.drawer__panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(85vw, 360px); display: flex; flex-direction: column;
  background: var(--color-surface); box-shadow: var(--shadow-lg); overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-100%); transition: transform var(--dur-base) var(--ease);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); min-height: var(--header-h); }
.drawer__title { font-weight: 700; color: var(--color-primary); }
.drawer__nav { padding-block: var(--space-2) var(--space-6); }
.drawer__list--secondary { margin-top: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
.drawer__link { display: block; padding: var(--space-3) var(--space-4); color: var(--color-text); }
.drawer__link--top, .drawer__summary { font-weight: 600; }
.drawer__link:hover { background: var(--color-primary-tint); text-decoration: none; }
.drawer__summary { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; }
.drawer__summary::-webkit-details-marker { display: none; }
.drawer__summary .icon { transition: transform var(--dur-fast) var(--ease); }
.drawer__group[open] > .drawer__summary { background: var(--color-primary-tint); color: var(--color-primary); }
.drawer__group[open] > .drawer__summary .icon { transform: rotate(180deg); }
.drawer__sublist .drawer__link { padding-left: var(--space-6); font-size: var(--fs-sm); }
.drawer__sublist--nested .drawer__link { padding-left: var(--space-8); color: var(--color-text-muted); }
.drawer__link--all { color: var(--color-primary); font-weight: 600; }
body.drawer-open { overflow: hidden; }
.noscript-nav { padding-block: var(--space-3); }
.noscript-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { margin-bottom: var(--space-4); font-size: var(--fs-sm); color: var(--color-text-muted); }
.breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.breadcrumb__item { display: inline-flex; align-items: center; gap: var(--space-1); }
.breadcrumb__item + .breadcrumb__item::before { content: "›"; color: var(--color-border-strong); }
.breadcrumb__item--home { display: none; }
.breadcrumb__item--home + .breadcrumb__item::before { content: none; }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: 600; }

/* ---------- Generic page / content ---------- */
.page__title { margin-bottom: var(--space-5); }
.page--narrow { max-width: calc(var(--content-narrow) + 2 * var(--gutter)); }
.contact-list__row { display: grid; grid-template-columns: 1fr; gap: var(--space-1); padding-block: var(--space-3); border-top: 1px solid var(--color-border); }
.contact-list__row:last-child { border-bottom: 1px solid var(--color-border); }
.contact-list dt { font-size: var(--fs-sm); color: var(--color-text-muted); }
.contact-list dd { margin: 0; font-weight: 600; }

.empty-state { padding: var(--space-7) var(--space-4); text-align: center; background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); }
.empty-state__title { margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.empty-state__message { color: var(--color-text-muted); margin-bottom: var(--space-5); }

.error-page { text-align: center; padding-block: var(--space-6); }
.error-page__code { font-size: var(--fs-display); font-weight: 800; color: var(--color-primary-soft); line-height: 1; margin-bottom: var(--space-2); }
.error-page__message { color: var(--color-text-muted); }
.error-page .search--large { margin-inline: auto; }

/* ---------- Footer ---------- */
.site-footer { margin-top: auto; background: var(--navy-900); color: var(--navy-100); }
.site-footer a { color: var(--navy-100); }
.site-footer a:hover { color: var(--color-surface); }
.site-footer__grid { display: grid; gap: var(--space-6); padding-block: var(--space-7) var(--space-6); }
.brand--footer { justify-self: start; color: var(--color-surface); margin-bottom: var(--space-3); }
.brand--footer .brand__mark { background: var(--color-surface); color: var(--navy-900); }
.site-footer__tagline { color: var(--navy-200); }
.site-footer__contact p { margin-bottom: var(--space-1); font-size: var(--fs-sm); }
.site-footer__heading { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--navy-300); margin-bottom: var(--space-3); }
.site-footer__links li { margin-bottom: var(--space-2); }
.site-footer__bottom { border-top: 1px solid var(--navy-700); padding-block: var(--space-4); font-size: var(--fs-sm); color: var(--navy-300); }
.site-footer__bottom p { margin: 0; }

/* ---------- Breakpoints ---------- */
@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
  .contact-list__row { grid-template-columns: 160px 1fr; gap: var(--space-4); }
}

@media (min-width: 768px) {
  .site-header__row { grid-template-columns: auto minmax(240px, 560px) auto; column-gap: var(--space-5); justify-content: space-between; }
  .site-header__menu { display: none; }
  .site-header__row .brand { grid-column: 1; justify-self: start; }
  .site-header__search { display: flex; grid-row: 1; grid-column: 2; padding-block: 0; }
  .site-header__search-toggle { display: none; }
  .hotline { display: inline-flex; }
  .breadcrumb__item--home { display: inline-flex; }
  .breadcrumb__item--home + .breadcrumb__item::before { content: "›"; }
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
  .site-footer__brand { grid-column: auto; }
}

@media (min-width: 1024px) {
  .primary-nav { display: block; }
  .drawer { display: none; }
  .hotline__label { display: block; line-height: 1; }
  .hotline { flex-direction: row; }
  .hotline .icon { color: var(--color-primary); }
}

/* Between 768 and 1023 the desktop bar is not shown, so keep the menu button available for the drawer. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .site-header__row { grid-template-columns: 44px auto minmax(200px, 1fr) auto; }
  .site-header__menu { display: inline-flex; }
  .site-header__row .brand { grid-column: 2; }
  .site-header__search { grid-column: 3; }
  .site-header__actions { grid-column: 4; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer__panel { transition: none; }
}

/* ======================================================================
   G2.2 — Listing (category / brand / search), product card, grid, filter, pagination
   ====================================================================== */

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; white-space: nowrap; }
.badge--navy { background: var(--color-primary); color: var(--color-surface); }
.badge--accent { background: var(--color-accent); color: var(--color-accent-ink); }
.badge--muted { background: var(--color-border); color: var(--color-text-muted); }
.badge--success { background: var(--color-success-soft); color: var(--color-success); }

/* ---------- Price ---------- */
.price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.price__amount { font-weight: 700; color: var(--color-text); }
.price__compare { font-size: var(--fs-sm); color: var(--color-text-muted); }
.price--contact { font-weight: 600; color: var(--color-primary); }

/* ---------- Product card ---------- */
.product-card { height: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius); overflow: hidden; transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.product-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.product-card:focus-within { box-shadow: var(--shadow-md); }
.product-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.product-card__link:hover { text-decoration: none; color: inherit; }
.product-card__link:focus-visible { outline-offset: -2px; }
.product-card__media { position: relative; aspect-ratio: var(--img-ratio-product); padding: var(--space-2); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-base) var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.03); }
.product-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: var(--color-primary-tint); color: var(--navy-300); border-radius: var(--radius-sm); }
.product-card__placeholder svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.product-card__badge { position: absolute; top: var(--space-2); left: var(--space-2); }
.product-card__body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); flex: 1; }
.product-card__brand { font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.product-card__name { margin: 0; font-size: var(--fs-body); font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(2 * 1.35em); }
.product-card__price { margin-top: auto; padding-top: var(--space-1); }

/* ---------- Grid ---------- */
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.product-grid > li { min-width: 0; }

/* ---------- Listing layout ---------- */
.listing__header { margin-bottom: var(--space-4); }
.listing__title { margin-bottom: var(--space-2); }
.listing__description { color: var(--color-text-muted); max-width: var(--content-narrow); margin: 0; }
.listing__layout { display: grid; gap: var(--space-5); align-items: start; }
.listing__content { margin-top: var(--space-7); max-width: var(--content-narrow); }

/* Child-category chips */
.chips { margin: var(--space-3) 0 var(--space-4); }
.chips__list { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--space-1); -webkit-overflow-scrolling: touch; }
.chips__list::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-surface); }

/* Toolbar */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); margin-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.toolbar__count { margin: 0; color: var(--color-text-muted); font-size: var(--fs-sm); }
.toolbar__controls { display: flex; align-items: center; gap: var(--space-2); }
.button--ghost { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text); min-height: 40px; padding: 0 var(--space-3); }
.button--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.sort { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.sort__label { color: var(--color-text-muted); display: none; }
.sort__select { min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-size: var(--fs-sm); font-weight: 600; }

/* Applied filter chips */
.applied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.applied__chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--fs-sm); font-weight: 600; }
.applied__chip:hover { background: var(--color-primary); color: var(--color-surface); text-decoration: none; }
.applied__clear { font-size: var(--fs-sm); color: var(--color-text-muted); text-decoration: underline; }

/* Filter panel (sidebar on desktop, bottom sheet on mobile) */
.filter-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.filter-panel__title { margin: 0; font-size: var(--fs-h3); }
.filter-group { margin: 0 0 var(--space-4); padding: 0 0 var(--space-4); border: 0; border-bottom: 1px solid var(--color-border); min-width: 0; }
.filter-group__title { margin: 0 0 var(--space-2); padding: 0; font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.filter-group__list { display: flex; flex-direction: column; gap: var(--space-1); }
.filter-link { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) 0; color: var(--color-text); }
.filter-link:hover { color: var(--color-primary); }
.filter-link__count { color: var(--color-text-muted); font-size: var(--fs-sm); }
.filter-check { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; cursor: pointer; }
.filter-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-primary); }
.filter-panel__actions { display: flex; gap: var(--space-2); padding-top: var(--space-2); }
.filter-panel__apply { flex: 1; }

/* Sheet mechanics (mobile) */
.sheet { position: fixed; inset: 0; z-index: var(--z-drawer); }
.sheet:not(.is-open) { display: none; }
.sheet__backdrop { position: absolute; inset: 0; background: var(--color-overlay); }
.sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4) var(--gutter) var(--space-5); background: var(--color-surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg); }
body.sheet-open { overflow: hidden; }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); font-size: var(--fs-sm); }
.pagination__pages { display: none; align-items: center; gap: var(--space-1); }
.pagination__link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-width: 40px; min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-weight: 600; }
.pagination__link:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.pagination__link.is-current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-surface); }
.pagination__link.is-disabled { color: var(--color-text-muted); border-color: var(--color-border); background: transparent; }
.pagination__gap { color: var(--color-text-muted); padding: 0 var(--space-1); }
.pagination__summary { color: var(--color-text-muted); }

@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .sort__label { display: inline; }
}

@media (min-width: 768px) {
  .pagination__pages { display: flex; }
  .pagination__summary { display: none; }
}

@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
  .product-grid--sidebar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .listing__layout { grid-template-columns: 260px minmax(0, 1fr); }
  .listing__layout--full { grid-template-columns: minmax(0, 1fr); }
  .chips { display: none; }
  /* Sidebar: static panel, no sheet mechanics */
  /* The sheet becomes a plain sidebar here. Dropping position:static is not enough: a grid
     item with a non-auto z-index still paints as a positioned box and would keep the drawer
     rung (300), covering the header and its mega-menu. Return it to the page-content rung. */
  .sheet { position: static; z-index: var(--z-base); display: block !important; }
  .sheet__backdrop { display: none; }
  .sheet__panel { position: static; max-height: none; overflow: visible; padding: var(--space-4); border-radius: var(--card-radius); border: 1px solid var(--color-border); box-shadow: none; }
  .filter-panel__close, .toolbar__filter { display: none; }
}

@media (min-width: 1280px) {
  .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .product-grid--sidebar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ======================================================================
   G2.3 — Product detail page
   ====================================================================== */
.pdp__top { display: grid; gap: var(--space-5); align-items: start; }

/* Gallery */
.gallery__stage { position: relative; aspect-ratio: var(--img-ratio-product); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius); overflow: hidden; padding: var(--space-3); }
.gallery__image { width: 100%; height: 100%; object-fit: contain; }
.gallery__placeholder { display: grid; place-content: center; justify-items: center; gap: var(--space-2); width: 100%; height: 100%; background: var(--color-primary-tint); color: var(--navy-300); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.gallery__placeholder svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gallery__thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-3); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--space-1); }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumbs li { flex: none; }
.gallery__thumb { display: block; width: 72px; height: 72px; padding: 4px; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumb:hover { border-color: var(--color-border-strong); }
.gallery__thumb.is-active { border-color: var(--color-primary); }
.gallery__thumb-link { display: block; font-size: var(--fs-xs); text-align: center; margin-top: 2px; }

/* Identity block */
.pdp__identity { display: flex; flex-direction: column; gap: var(--space-3); }
.pdp__brand { font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.pdp__brand:hover { color: var(--color-primary); }
.pdp__title { margin: 0; overflow-wrap: anywhere; }
.pdp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); }
.pdp__sku span { color: var(--color-text); font-weight: 600; }
.pdp__price { padding-block: var(--space-2); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.pdp__price .price__amount { font-size: var(--fs-price); }
.pdp__price .price--contact { font-size: var(--fs-price); }
.pdp__price .price__compare { font-size: var(--fs-body); }
.pdp__summary { display: grid; gap: var(--space-1); padding-left: 1.25em; list-style: disc; color: var(--color-text); }
.pdp__cta { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--color-primary-tint); border: 1px solid var(--color-primary-soft); border-radius: var(--card-radius); }
.pdp__cta-title { margin: 0; font-weight: 700; color: var(--color-primary); }
.pdp__cta-button { width: 100%; }
.pdp__category { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }

.pdp__content-layout { display: grid; gap: var(--space-7); margin-top: var(--space-6); align-items: start; }
.pdp__main, .pdp__sidebar { min-width: 0; }
.pdp__sidebar { display: grid; gap: var(--space-4); }
.pdp__sidebar-block { padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius); }
.pdp__toc { margin: 0; background: var(--color-surface-2); }
.pdp__toc h2 { margin: 0 0 var(--space-2); font-size: var(--fs-body); }
.pdp__toc ol { margin: 0; padding-left: 1.25em; }
.pdp__toc-item + .pdp__toc-item { margin-top: var(--space-2); }
.pdp__toc-item--h3 { margin-left: var(--space-4); font-size: var(--fs-sm); }
.pdp__toc a { color: var(--color-text); }
.pdp__summary { margin: 0; }
.pdp__summary:not(ul) { padding-left: 0; }
.pdp__video { display: block; width: 100%; max-width: 800px; height: auto; border-radius: var(--card-radius); background: #000; }
.pdp__video-facade { position: relative; display: block; width: 100%; max-width: 800px; padding: 0; border: 0; background: #000; cursor: pointer; }
.pdp__video-facade img { display: block; width: 100%; height: auto; }
.pdp__video-play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 4rem; height: 4rem; color: #fff; background: rgb(0 0 0 / .7); border-radius: 50%; font-size: 1.5rem; }

/* Section nav + sections */
.pdp__sections { display: flex; gap: var(--space-4); margin-top: var(--space-6); border-bottom: 1px solid var(--color-border); overflow-x: auto; }
.pdp__sections a { padding: var(--space-3) 0; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; border-bottom: 2px solid transparent; }
.pdp__sections a:hover { color: var(--color-primary); text-decoration: none; border-bottom-color: var(--color-primary); }
.pdp__section { margin-top: var(--space-6); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.pdp__section--first { margin-top: 0; }
.pdp__description :is(h2, h3)[id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
@media (min-width: 1024px) {
  .pdp__section,
  .pdp__description :is(h2, h3)[id] { scroll-margin-top: calc(var(--header-h) + var(--nav-h) + var(--space-4)); }
}
.pdp__section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.pdp__see-all { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }

/* Specifications */
.spec-group + .spec-group { margin-top: var(--space-4); }
.spec-group__title { font-size: var(--fs-body); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.spec-table { width: 100%; max-width: var(--content-narrow); border-collapse: collapse; font-size: var(--fs-sm); }
.spec-table th, .spec-table td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.spec-table th { width: 40%; font-weight: 600; color: var(--color-text-muted); background: var(--color-surface-2); }
.spec-table tr:nth-child(even) td { background: var(--color-surface); }

/* Description */
.prose { max-width: var(--content-narrow); line-height: 1.7; }
.prose :is(h2, h3, h4) { margin-top: var(--space-5); }
.prose p, .prose ul, .prose ol { margin-bottom: var(--space-3); }
.prose ul, .prose ol { padding-left: 1.5em; list-style: revert; }
.prose img { height: auto; border-radius: var(--radius-sm); }
.prose table { width: 100%; border-collapse: collapse; }
.prose td, .prose th { border: 1px solid var(--color-border); padding: var(--space-2); }
.pdp__description.is-collapsed { max-height: 480px; overflow: hidden; position: relative; }
.pdp__description.is-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: linear-gradient(to bottom, transparent, var(--color-bg)); }
.pdp__expand { margin-top: var(--space-3); }

.pdp__quick-info h2, .pdp__contact h2, .pdp__related h2 { margin-bottom: var(--space-3); font-size: var(--fs-h3); }
.pdp__quick-info dl { display: grid; gap: var(--space-2); }
.pdp__quick-info dl > div { display: flex; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.pdp__quick-info dt { color: var(--color-text-muted); font-size: var(--fs-sm); }
.pdp__quick-info dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.pdp__contact p { margin-bottom: var(--space-3); color: var(--color-text-muted); font-size: var(--fs-sm); }
.pdp__contact p a { color: var(--color-text); font-weight: 700; }
.pdp__contact .button { width: 100%; }
.pdp__related .pdp__section-head { align-items: center; }
.pdp__related-list { display: grid; gap: var(--space-3); }
.pdp__related-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-3); align-items: center; color: var(--color-text); }
.pdp__related-item img { width: 56px; height: 56px; object-fit: contain; background: var(--color-surface-2); border-radius: var(--radius-sm); }
.pdp__related-thumb { width: 56px; height: 56px; background: var(--color-primary-tint); border-radius: var(--radius-sm); }
.pdp__related-item > span { min-width: 0; }
.pdp__related-item strong { display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--fs-sm); }
.pdp__related-item small { display: block; margin-top: var(--space-1); color: var(--color-text-muted); }
.pdp__related-item:hover { color: var(--color-primary); text-decoration: none; }

@media (min-width: 640px) {
  .pdp__cta { grid-template-columns: 1fr auto; align-items: center; }
  .pdp__cta-button { width: auto; }
  .spec-table th { width: 30%; }
}

@media (min-width: 1024px) {
  .pdp__top { grid-template-columns: 58fr 42fr; gap: var(--space-7); }
  .pdp__content-layout { grid-template-columns: minmax(0, 72fr) minmax(240px, 28fr); }
  .pdp__sidebar { position: sticky; top: calc(var(--header-h) + var(--nav-h) + var(--space-4)); }
  .pdp__cta { grid-template-columns: 1fr; }
  .pdp__cta-button { width: 100%; }
}

/* ======================================================================
   G2.4 — Search + Brand
   ====================================================================== */
.listing__kicker { margin: 0 0 var(--space-1); font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.search__title { overflow-wrap: anywhere; }
.search__query { quotes: "“" "”"; color: var(--color-primary); }
.search__normalized { font-weight: 600; color: var(--color-text); }
.search__prompt { max-width: 560px; padding: var(--space-5) 0; }
.search__prompt-title { margin-bottom: var(--space-1); }
.search__prompt-text { color: var(--color-text-muted); }
.search__suggest { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.chips__list--wrap { flex-wrap: wrap; overflow: visible; }

.brand-header { display: flex; align-items: center; gap: var(--space-4); }
.brand-header__logo { flex: none; object-fit: contain; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius); padding: var(--space-2); }
.brand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.brand-tile { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); height: 100%; padding: var(--space-4); text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius); color: var(--color-text); transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.brand-tile:hover { text-decoration: none; color: var(--color-primary); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.brand-tile__logo { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 2; max-width: 160px; }
.brand-tile__logo img { object-fit: contain; width: 100%; height: 100%; }
.brand-tile__logo--text { font-size: var(--fs-display); font-weight: 800; color: var(--color-primary); background: var(--color-primary-tint); border-radius: var(--radius-sm); }
.brand-tile__name { font-weight: 600; overflow-wrap: anywhere; }
.brand-tile__count { font-size: var(--fs-sm); color: var(--color-text-muted); }

@media (min-width: 640px) { .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 1024px) { .brand-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5); } }

/* ======================================================================
   G2.6 — Home storefront
   ====================================================================== */
/* Hero (corrective): one static band on navy, no search and no hotline — the header owns both.
   .hero__media is the production asset slot; see Site:HeroImageUrl. */
.hero {
  margin-top: calc(-1 * var(--space-5)); padding-block: var(--space-7);
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 55%, var(--navy-600) 100%);
  color: var(--color-surface);
}
.hero__inner { display: grid; gap: var(--space-5); align-content: center; }
.hero__content { display: grid; gap: var(--space-4); justify-items: start; max-width: 34rem; }
.hero__title { margin: 0; font-size: var(--fs-hero); line-height: 1.15; color: var(--color-surface); text-wrap: balance; }
.hero__lede { margin: 0; font-size: var(--fs-h3); color: var(--navy-100); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.button--accent { background: var(--color-accent); color: var(--color-accent-ink); }
.button--accent:hover { background: var(--color-accent); color: var(--color-accent-ink); text-decoration: none; filter: brightness(1.06); }
.button--on-navy { border-color: var(--navy-300); color: var(--color-surface); background: transparent; }
.button--on-navy:hover { background: var(--navy-700); color: var(--color-surface); text-decoration: none; }
.hero :focus-visible { outline-color: var(--color-surface); }
.hero__media { display: none; }
.hero__image { width: 100%; height: auto; max-height: 320px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
/* No stand-in photography: an abstract branded panel holds the slot until real artwork exists. */
.hero__media-shell {
  display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 320px; border-radius: var(--radius-lg);
  border: 1px solid var(--navy-500);
  background:
    radial-gradient(circle at 72% 28%, rgba(200, 149, 42, .30), transparent 58%),
    radial-gradient(circle at 24% 78%, rgba(110, 143, 196, .32), transparent 60%),
    linear-gradient(150deg, var(--navy-800), var(--navy-600));
}
.home-section { padding-block: var(--space-8); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.home-section + .home-section { padding-top: 0; }
/* The first commerce section follows the hero closely so the category row needs no scrolling. */
.hero + .home-section { padding-top: var(--space-6); }
.home-section h2 { margin-bottom: var(--space-5); }
.home-section__heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.home-section__heading h2 { margin-bottom: var(--space-5); }
.category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.category-grid > li { min-width: 0; }
.category-card { display: flex; flex-direction: column; height: 100%; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius); color: var(--color-text); transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.category-card:hover { color: var(--color-primary); text-decoration: none; border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.category-card:focus-visible { outline-offset: -2px; }
.category-card__media { display: grid; place-items: center; aspect-ratio: var(--img-ratio-category); margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-3); overflow: hidden; background: var(--color-primary-tint); border-radius: var(--card-radius) var(--card-radius) 0 0; }
.category-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Without an image the tile carries a monogram, not a photo: it keeps the card compact instead of leaving a 4:3 empty slab. */
.category-card__media--mono { aspect-ratio: auto; min-height: 88px; }
.category-card__mono { color: var(--color-primary); font-size: var(--fs-display); font-weight: 800; }
.category-card__name { font-weight: 600; overflow-wrap: anywhere; }
.category-card__count { margin-top: auto; color: var(--color-text-muted); font-size: var(--fs-sm); }
.home-section--benefits { padding-top: 0; padding-bottom: 0; }
.benefits { display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--color-primary-tint); border: 1px solid var(--color-primary-soft); border-radius: var(--card-radius); }
.benefits__item { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--navy-800); }
.benefits__item .icon { color: var(--color-success); }

@media (min-width: 640px) {
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}
@media (min-width: 768px) {
  .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  .hero__actions { align-items: center; }
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: center; gap: var(--space-7); min-height: 260px; }
  .hero__media { display: block; }
}
@media (min-width: 1024px) {
  .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
  .hero { padding-block: var(--space-8); }
  .hero__inner { min-height: 288px; gap: var(--space-8); }
}
@media (max-width: 639.98px) {
  .hero { padding-block: var(--space-6); }
  .hero__content { max-width: none; justify-items: stretch; }
  .hero__actions { display: grid; }
  .hero__actions > a { width: 100%; }
}

/* G8 content and contact pages */
.contact-page, .doc-page { padding-block: var(--space-6) var(--space-8); }
.contact-page__head, .doc-page__head { margin-bottom: var(--space-6); }
.contact-page__head h1, .doc-page__head h1 { margin-bottom: var(--space-2); }
.contact-page__head p, .doc-page__summary, .doc-page__updated { margin: 0; color: var(--color-text-muted); }
.doc-page__updated { margin-top: var(--space-2); font-size: var(--fs-sm); }
.contact-page__layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.contact-page__info, .contact-page__form, .doc-page__nav, .doc-page__related { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius); }
.contact-page__info h2, .contact-page__form h2, .doc-page__nav h2, .doc-page__related h2 { margin-top: 0; font-size: var(--fs-h3); }
.contact-list { display: grid; gap: var(--space-3); }
.contact-list__row { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.contact-list__row dt { color: var(--color-text-muted); font-size: var(--fs-sm); }
.contact-list__row dd { margin: 0; overflow-wrap: anywhere; }
.contact-page__empty { color: var(--color-text-muted); }
.contact-page__form { display: grid; gap: var(--space-3); }
.contact-page__form h2 { margin-bottom: var(--space-1); }
.contact-page__form .field { margin: 0; }
.contact-page__form .field__input { width: 100%; }
.contact-page__form textarea { resize: vertical; }
.contact-page__privacy { margin: 0; color: var(--color-text-muted); font-size: var(--fs-sm); }
.contact-page__honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
.form-notice--success { background: var(--color-success-soft); color: var(--color-success); }
.form-notice--error { background: var(--color-danger-soft); color: var(--color-danger); }
.doc-page__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 280px); gap: var(--space-7); align-items: start; }
.doc-page__article { min-width: 0; }
.doc-page__article > h2:first-child { margin-top: 0; }
.doc-page__sidebar { display: grid; gap: var(--space-4); position: sticky; top: calc(var(--header-h) + var(--space-4)); }
.doc-page__nav ul, .doc-page__related ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.doc-page__nav a[aria-current="page"] { color: var(--color-primary); font-weight: 700; }
.doc-page__toc { margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.doc-page__toc summary { cursor: pointer; font-weight: 700; }
.doc-page__toc ol { margin: var(--space-3) 0 0; padding-left: 1.25em; }
.doc-page__toc li + li { margin-top: var(--space-2); }
@media (max-width: 1023.98px) { .contact-page__layout, .doc-page__layout { grid-template-columns: 1fr; } .doc-page__sidebar { position: static; } }
@media (max-width: 767.98px) { .contact-page, .doc-page { padding-block: var(--space-5) var(--space-7); } .contact-page__layout, .doc-page__layout { gap: var(--space-4); } .contact-page__info, .contact-page__form, .doc-page__nav, .doc-page__related { padding: var(--space-4); } }

/* ======================================================================
   G5.1 — Cart
   ====================================================================== */

/* Header cart control (§14.2). Badge is absolutely placed over the icon, so the
   count never changes the header row height whatever the digit count. */
.cart-button { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--color-text); }
.cart-button:hover { background: var(--color-surface-2); color: var(--color-primary); text-decoration: none; }
.cart-button .icon { color: var(--color-primary); }
.cart-button__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cart-button__count {
  position: absolute; top: 3px; left: calc(var(--space-3) + 13px); display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); border: 2px solid var(--color-surface);
  background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--fs-xs); font-weight: 800; line-height: 1;
}

/* PDP add-to-cart action block (§14.4). Desktop keeps quantity and both CTAs on one aligned row. */
.pdp__add { display: grid; grid-template-columns: 96px repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: end; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius); }
.pdp__quantity { display: grid; gap: var(--space-1); min-width: 0; }
.pdp__qty-label { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-muted); }
.pdp__qty { width: 96px; height: 44px; padding: 0 var(--space-2); text-align: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-weight: 600; }
.pdp__qty:focus { border-color: var(--color-primary); }
.pdp__add .button { width: 100%; min-width: 0; }
.pdp__or { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.pdp__or a { font-weight: 700; }
/* PDP marketplace outbound links (design lock ML §5). Secondary channel: ghost buttons, never louder than .pdp__add. Cell min 132px = widest label ("TikTok Shop", 14px/600) + dot + arrow + 8px padding; 375px therefore wraps 2+1. */
.pdp__marketplaces { display: grid; gap: var(--space-2); }
.pdp__marketplaces-title { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-muted); }
.pdp__marketplace-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--space-2); }
/* --brand defaults here so a marketplace created from the Admin renders with a real accent instead of an
   invisible dot; the per-marketplace rules below override it for the ones we have brand colours for. */
.pdp__marketplace { --brand: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; min-height: 44px; padding: 0 var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; }
.pdp__marketplace:hover, .pdp__marketplace:focus-visible { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.pdp__marketplace-dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--brand); flex: none; }
.pdp__marketplace-ext { font-size: var(--fs-xs); color: var(--color-text-muted); }
.pdp__marketplace--shopee { --brand: var(--brand-shopee); }
.pdp__marketplace--lazada { --brand: var(--brand-lazada); }
.pdp__marketplace--tiktok-shop { --brand: var(--brand-tiktokshop); }

.cart-page { --cart-sticky-top: var(--header-h); }
.cart-page__heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.cart-page__heading h1 { margin-bottom: 0; }
.cart-page__heading p { margin: 0; color: var(--color-text-muted); }
.cart-notice, .cart-warning { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); border-radius: var(--radius-md); background: var(--color-primary-tint); color: var(--color-primary); }
.cart-warning { display: block; background: var(--color-warning-soft); color: var(--color-text); border-left: 3px solid var(--color-warning); }
.cart-notice .icon-button { flex: none; width: 32px; height: 32px; }
.cart-page__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-7); align-items: start; }
.cart-lines { min-width: 0; }
.cart-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto auto; gap: var(--space-4); align-items: center; padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); min-width: 0; }
.cart-line:first-child { padding-top: 0; }
.cart-line--unavailable { padding-inline: var(--space-3); background: var(--color-surface-2); border-left: 3px solid var(--color-warning); }
.cart-line--unavailable .cart-line__image { opacity: .55; }
.cart-line__image { display: grid; place-items: center; width: 96px; height: 96px; overflow: hidden; background: var(--color-surface-2); border-radius: var(--radius-sm); color: var(--color-primary); font-weight: 800; }
.cart-line__image img { width: 100%; height: 100%; object-fit: contain; }
.cart-line__info, .cart-line__name { min-width: 0; }
.cart-line__name { display: block; margin-bottom: var(--space-1); font-weight: 700; overflow-wrap: anywhere; }
.cart-line__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--fs-sm); }
.cart-line__price { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--fs-sm); }
.cart-line__price .price { color: var(--color-text); font-weight: 600; }
.cart-line__unavailable-message { margin: var(--space-3) 0 var(--space-1); color: var(--color-text-muted); font-size: var(--fs-sm); }
.cart-line__quantity { display: grid; gap: var(--space-1); justify-items: center; }
.cart-line__quantity label { font-size: var(--fs-xs); color: var(--color-text-muted); }
.cart-line__stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.cart-line__stepper button { width: 32px; height: 40px; border: 0; background: var(--color-surface-2); }
.cart-line__stepper input { width: 48px; height: 40px; padding: 0 var(--space-1); text-align: center; border: 0; border-inline: 1px solid var(--color-border); }
.cart-line__ajax-message { margin: var(--space-2) 0 0; color: var(--color-warning); font-size: var(--fs-sm); }
.cart-line__total { min-width: 110px; text-align: right; font-weight: 700; white-space: nowrap; }
.cart-line__remove { justify-self: end; }
.cart-line__remove .icon-button { color: var(--color-text-muted); }
.cart-summary { position: sticky; top: calc(var(--cart-sticky-top) + 16px); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); }
.cart-summary dl { display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.cart-summary dt { color: var(--color-text-muted); }
.cart-summary dd { margin: 0; color: var(--color-primary); font-size: var(--fs-h3); font-weight: 800; text-align: right; }
.cart-summary__note, .cart-summary__help, .cart-summary__unavailable { margin-block: var(--space-4); color: var(--color-text-muted); font-size: var(--fs-sm); }
.cart-summary__primary, .cart-summary__secondary { width: 100%; }
.cart-summary__secondary { margin-top: var(--space-2); }
.cart-summary__unavailable { color: var(--color-warning); }

@media (min-width: 1024px) {
  /* Real header is the bar plus the desktop nav row; both are tokenised, so the
     sticky offset is expressed from tokens rather than a magic number. site.js
     refines it to the measured height. */
  .cart-page { --cart-sticky-top: calc(var(--header-h) + var(--nav-h)); }
  .cart-button__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: var(--fs-sm); font-weight: 600; }
}
@media (max-width: 1023.98px) {
  .cart-page__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .cart-summary { position: static; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .cart-line { grid-template-columns: 80px minmax(0, 1fr) auto auto auto; }
  .cart-line__image { width: 80px; height: 80px; }
}
@media (max-width: 767.98px) {
  .pdp__add { grid-template-columns: minmax(0, 1fr); }
  .pdp__add .button { width: 100%; }
  .cart-line__stepper button, .cart-line__stepper input { height: 44px; }
  .cart-summary__primary, .cart-summary__secondary { min-height: 44px; }
  .cart-page__heading { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
  .cart-line { grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; }
  .cart-line__image { width: 72px; height: 72px; grid-row: 1; }
  .cart-line__info { grid-column: 2; }
  .cart-line__quantity { grid-column: 1 / 3; grid-row: 2; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
  .cart-line__total { grid-column: 3; grid-row: 2; align-self: center; min-width: 0; }
  .cart-line__remove { grid-column: 3; grid-row: 1; }
  .cart-summary { position: sticky; bottom: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); padding: var(--space-3); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); }
  .cart-summary dl { grid-column: 1 / -1; padding-bottom: var(--space-2); }
  .cart-summary__note, .cart-summary__help, .cart-summary__unavailable { grid-column: 1 / -1; margin-block: var(--space-1); }
  .cart-summary__primary, .cart-summary__secondary { margin: 0; }
}

.checkout-page { --cart-sticky-top: var(--header-h); }
@media (min-width: 1024px) {
  /* DOM order is summary-then-form for the mobile reading order; on desktop the
     form takes the wide column and the summary the fixed sticky rail. */
  .checkout-page { --cart-sticky-top: calc(var(--header-h) + var(--nav-h)); }
  .checkout-form { grid-column: 1; grid-row: 1; }
  .checkout-summary { grid-column: 2; grid-row: 1; }
}
.checkout-page > h1 { margin-bottom: var(--space-5); }
.checkout-page__layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-7); align-items: start; }
.checkout-form, .checkout-summary { min-width: 0; }
.checkout-summary { position: sticky; top: calc(var(--cart-sticky-top) + 16px); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); }
.checkout-summary__heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.checkout-summary__heading h2 { margin: 0; font-size: var(--fs-h3); }
.checkout-summary__heading a { font-size: var(--fs-sm); font-weight: 700; }
.checkout-summary__lines { display: grid; gap: var(--space-3); margin: var(--space-4) 0; padding: 0; list-style: none; }
.checkout-summary__lines li { display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); }
.checkout-summary__line-info { display: grid; gap: var(--space-1); min-width: 0; }
.checkout-summary__line-info strong { display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.checkout-summary__line-info span { color: var(--color-text-muted); }
.checkout-summary__lines li > span { flex: none; font-weight: 700; text-align: right; white-space: nowrap; }
.checkout-summary__total { display: flex; justify-content: space-between; gap: var(--space-3); margin: 0; padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.checkout-summary__total dt { color: var(--color-text-muted); }
.checkout-summary__total dd { margin: 0; color: var(--color-primary); font-size: var(--fs-h3); font-weight: 800; text-align: right; }
.checkout-summary__shipping, .checkout-form__hint { color: var(--color-text-muted); font-size: var(--fs-sm); }
.checkout-form fieldset { min-width: 0; margin: 0 0 var(--space-5); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--card-radius); }
.checkout-form legend { padding-inline: var(--space-2); color: var(--color-primary); font-weight: 800; }
.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.field:last-child { margin-bottom: 0; }
.field__label { font-weight: 700; }
.field__input { width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; }
.field__input:focus-visible { border-color: var(--color-primary); }
textarea.field__input { min-height: 96px; resize: vertical; }
.field__select { appearance: none; -webkit-appearance: none; padding-right: calc(var(--space-3) + 24px); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; cursor: pointer; }
.field__select:disabled { color: var(--color-text-muted); background-color: var(--color-surface-2); cursor: not-allowed; }
.field__select[aria-busy="true"] { opacity: .7; }
.field--invalid .field__input { border-color: var(--color-danger); background: var(--color-danger-soft); }
.field__error { margin: 0; color: var(--color-danger); font-size: var(--fs-sm); }
.form-errors { margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-danger); background: var(--color-danger-soft); }
.form-errors:focus { outline: 2px solid var(--color-danger); outline-offset: 2px; }
.form-errors__title { margin: 0 0 var(--space-2); font-weight: 800; }
.form-errors ul { margin: 0; padding-left: var(--space-5); }
.checkout-stale { margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-warning); background: var(--color-warning-soft); }
.checkout-stale p { margin: 0; }
.checkout-stale p + p { margin-top: var(--space-2); }
.checkout-payment { margin: 0; font-size: var(--fs-h3); }
.checkout-form__actions { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
.checkout-form__recap { margin: 0; color: var(--color-text-muted); font-size: var(--fs-sm); }
.checkout-form__actions .button { width: 100%; }
.checkout-page--submitted { max-width: 720px; }
.checkout-page--submitted > p { max-width: 65ch; overflow-wrap: anywhere; }

@media (max-width: 1023.98px) {
  .checkout-page__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .checkout-summary { position: static; }
}
@media (max-width: 767.98px) {
  .checkout-page__layout { gap: var(--space-4); }
  .checkout-form fieldset { padding: var(--space-3); }
  .checkout-form__actions .button { min-height: 44px; }
}
/* G9 article cards and article detail. */
.article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5); list-style:none; margin:0; padding:0; }
.article-card { position:relative; height:100%; border:1px solid var(--color-border); border-radius:var(--card-radius); background:var(--color-surface); overflow:hidden; box-shadow:var(--shadow-sm); }
.article-card__link { display:flex; height:100%; flex-direction:column; color:inherit; text-decoration:none; }
.article-card__media { display:block; aspect-ratio:var(--img-ratio-article); overflow:hidden; background:var(--color-surface-2); }
.article-card__media img { width:100%; height:100%; object-fit:cover; }
.article-card__media--mono { display:grid; place-items:center; background:var(--color-primary-soft); }
.article-card__mono { color:var(--color-primary); font-size:2.5rem; font-weight:700; }
.article-card__body { display:flex; flex:1; flex-direction:column; gap:var(--space-2); padding:var(--space-4); }
.article-card__title { margin:0; color:var(--color-text); font-size:var(--fs-h3); line-height:var(--lh-tight); }
.article-card__excerpt { display:-webkit-box; overflow:hidden; color:var(--color-text-muted); line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.article-card__date { margin-top:auto; color:var(--color-text-muted); font-size:var(--fs-xs); }
.article-card__link:focus-visible, .article-card__link:hover { text-decoration:none; }
.article-card__link:hover .article-card__title { color:var(--color-primary); }
.article-detail__cover { display:block; width:100%; height:auto; margin-bottom:var(--space-5); border-radius:var(--radius-md); }
.article-video__facade, .article-video__frame { width:100%; max-width:100%; aspect-ratio:16 / 9; height:auto; margin-bottom:var(--space-5); border:0; border-radius:var(--radius-md); }
.article-video__facade { display:grid; place-items:center; background:var(--color-primary); color:#fff; cursor:pointer; font-size:3rem; }
.article-video__frame { display:block; }
.article-related { margin-top:var(--space-7); }
@media (max-width:1023px) { .article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:639px) { .article-grid { grid-template-columns:1fr; } }

/* ======================================================================
   Home hero product slider (Hero Slider design lock §3, §4)
   Appended: nothing above is modified. The hero column is only 292–512px
   wide, so one horizontal composition (square picture left, text right)
   serves every breakpoint — a tall card would blow up the hero at desktop
   and collapse at 768. Slides live in a scroll-snap track, so swiping and
   focus-scrolling work with JavaScript switched off.
   ====================================================================== */
/* Overrides `.hero__media { display: none }` above by source order, and only
   when the media column actually carries a slider. */
.hero__media--slider { display: block; }
/* The second row is reserved even before site.js appends the controls (and when it never does),
   so enhancing the slider cannot shift the sections below the hero. */
.hero-slider { display: grid; gap: var(--space-3); grid-template-rows: auto 32px; }
.hero-slider__track {
  display: flex; gap: var(--space-3); margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
  /* overflow-x alone clips the off-screen slides visually, but their layout overflow still
     propagates into the root's scrollable-overflow rect: the page cannot actually scroll
     sideways, yet documentElement.scrollWidth reads ~1200px wider than the viewport.
     Paint containment ends the propagation, so the overflow audit stays honest. */
  contain: paint;
}
.hero-slider__track::-webkit-scrollbar { display: none; }
.hero-slider__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; }
.hero-slider__link {
  display: flex; align-items: center; gap: var(--space-3); height: 100%;
  padding: var(--space-3); color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius);
  box-shadow: var(--shadow-md);
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.hero-slider__link:hover { color: var(--color-text); text-decoration: none; border-color: var(--color-border-strong); box-shadow: var(--shadow-lg); }
/* Inset, like .product-card__link: the track's overflow clips at the link's own edge, so an outline drawn
   outside it is never painted. The card is white, so it also cannot use the hero's white outline colour. */
.hero-slider__link:focus-visible { outline-offset: -2px; outline-color: var(--color-focus); }
.hero-slider__media { flex: 0 0 clamp(88px, 30%, 140px); aspect-ratio: 1 / 1; background: var(--color-surface); border-radius: var(--radius-sm); }
/* contain, never cover: catalogue photography is packshots on white and must not be cropped. */
.hero-slider__media img { width: 100%; height: 100%; object-fit: contain; }
.hero-slider__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.hero-slider__brand { font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Same clamp as .product-card__name: two lines reserved, so a long name cannot push the price or CTA out. */
.hero-slider__name { font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.hero-slider__price { display: block; }
.hero-slider__cta { margin-top: var(--space-1); font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary); }
.hero-slider__link:hover .hero-slider__cta { text-decoration: underline; }

/* Dots and arrows exist only after site.js builds them; the row is laid out to
   the same height either way, so enhancing the slider never shifts the hero. */
.hero-slider__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 32px; }
.hero-slider__dots { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.hero-slider__dot {
  width: 10px; height: 10px; padding: 0; border: 1px solid var(--navy-200); border-radius: var(--radius-full);
  background: transparent; cursor: pointer;
}
.hero-slider__dot[aria-current="true"] { background: var(--color-surface); border-color: var(--color-surface); }
.hero-slider__arrow {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; line-height: 1;
  border: 1px solid var(--navy-300); border-radius: var(--radius-full);
  background: transparent; color: var(--color-surface); font-size: var(--fs-body); cursor: pointer;
}
.hero-slider__arrow:hover { background: var(--navy-700); }
.hero-slider__arrow[disabled] { opacity: .4; cursor: default; }
.hero-slider__arrow[disabled]:hover { background: transparent; }

@media (min-width: 768px) {
  .hero-slider__link { padding: var(--space-3); }
  .hero-slider__name { font-size: var(--fs-body); }
}
/* Mobile: the slider sits under the CTA block. Kept short (media 88px → slide ≈ 112px)
   so the first category card stays above the fold at 375×667. */
@media (max-width: 767.98px) {
  .hero-slider { gap: var(--space-2); grid-template-rows: auto 24px; }
  .hero-slider__link { padding: var(--space-2); }
  .hero-slider__media { flex: 0 0 88px; }
  .hero-slider__name { font-size: var(--fs-sm); }
  .hero-slider__cta { font-size: var(--fs-xs); }
  /* Every row here costs fold. The name, price and CTA all change a buying decision;
     the brand is the one line that does not, so it goes first and the slide stays ≤120px. */
  .hero-slider__brand { display: none; }
  .hero-slider__controls { min-height: 24px; }
  /* Swiping is the natural gesture here and arrows would eat scarce width. */
  .hero-slider__arrow { display: none; }
}