/* ==========================================================================
   Uwase Mart Storefront CSS
   Design tokens: ink #0B0B0B, paper #FAFAF7, card #FFFFFF, accent #FFC400,
   muted #6E6E68, hairline #E7E6DF
   Fonts: Bricolage Grotesque (display), Inter (body/UI)
   ========================================================================== */

:root {
  --ink: #0B0B0B;
  --paper: #FAFAF7;
  --card: #FFFFFF;
  --accent: #FFC400;
  --muted: #6E6E68;
  --hairline: #E7E6DF;
  --tile: #F6F5F1;
  --save: #1E7A3D;

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Content column width. The .wrap inner padding (1.25rem) insets content to
     match .section--full__inner's 1280px card box, so the whole chrome (header,
     nav, breadcrumb, rails, footer) lines up flush with the product cards. */
  --wrap-max: 1320px;
  --toggle-bar-h: 3.95rem;
  --radius: 12px;
  --radius-sm: 8px;
  --gap: 1.5rem;

  --shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.06), 0 1px 3px rgba(11, 11, 11, 0.08);
  --shadow-md: 0 4px 12px rgba(11, 11, 11, 0.08), 0 2px 4px rgba(11, 11, 11, 0.06);
  --radius-control: 12px;
  --shadow-lg: 0 12px 32px rgba(11, 11, 11, 0.12), 0 4px 8px rgba(11, 11, 11, 0.08);
  --transition-fast: 0.15s;
  --transition-med: 0.2s;
}

/* ==========================================================================
   Reset / Base
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  overflow-x: hidden;
}

main {
  flex: 1;
  background: #fff;
  /* Gap above the hero sits INSIDE main (padding, not margin) so the white
     background touches the header instead of showing the page background. */
  padding-top: 0.75rem;
  /* Clip the .section--full 100vw full-bleed breakout so it never causes a
     horizontal page scroll. iOS Safari does not clip a 100vw negative-margin
     child via body{overflow-x:hidden} (Android/Blink does), so clip here.
     main is a sibling of the sticky header, so this does not affect sticky;
     overflow-x:clip (not hidden) keeps overflow-y visible (no nested scroll). */
  overflow-x: clip;
}

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

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Layout: .wrap
   ========================================================================== */

.wrap {
  /* width:100% so the main content column fills the flex column and does not
     collapse. main.wrap is a flex child of the body flex column with
     margin-inline:auto; auto cross-axis margins disable align-items:stretch, so
     without an explicit width main is sized to its content. On a page whose only
     main content is a .section--full full-bleed element (the search results),
     that content contributes ~0 width (100vw via negative margins, clipped by
     main's overflow-x:clip), collapsing main to its padding and clipping the grid
     to a sliver on desktop. width:100% (capped by max-width, centered by the auto
     margins) keeps it full width regardless of content. */
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ==========================================================================
   Site Header
   ========================================================================== */

/* The header and category nav stick together as one chrome unit. The
   leaderboard ad sits above this wrapper and scrolls away with the page. */
.chrome-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

.header-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.75rem;
}

/* ==========================================================================
   Brand
   ========================================================================== */

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  flex-shrink: 0;
}

.brand b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.brand:hover {
  text-decoration: none;
  opacity: 0.85;
}

/* ==========================================================================
   Search
   ========================================================================== */

.search {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
}
.search__icon {
  position: absolute;
  left: 0.85rem;
  color: var(--muted);
  pointer-events: none;
}
.search input[type="search"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem 0.5rem 2.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--card);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search input[type="search"]::placeholder { color: var(--muted); }
.search input[type="search"]:focus {
  border-color: var(--ink);
}

/* ==========================================================================
   Mode Toggle (retail / wholesale)
   ========================================================================== */

.mode-toggle {
  display: flex;
  align-items: stretch;
  min-height: 2.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}

.mode-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0 0.9rem;
  border: none;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.mode-toggle button:hover {
  background: var(--hairline);
  color: var(--ink);
}

.mode-toggle button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--accent);
}

/* ==========================================================================
   Cart link + badge
   ========================================================================== */

.cart-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

.cart-link:hover {
  text-decoration: none;
  opacity: 0.75;
}

.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 0.25rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding: 3.5rem 1.5rem 2.75rem;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  background:
    radial-gradient(130% 105% at 50% -15%, rgba(255, 196, 0, 0.18), rgba(255, 196, 0, 0) 60%),
    linear-gradient(180deg, #FFFFFF, var(--paper));
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.hero .lede {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 480px;
  margin-inline: auto;
}

/* ==========================================================================
   Eyebrow + dot
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 1rem;
}

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ==========================================================================
   Home value strip + Prime band
   ========================================================================== */

.value-strip {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.value-strip__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.1rem;
  background: var(--card);
}
.value-strip__item svg {
  width: 24px;
  height: 24px;
  color: var(--ink);
  flex-shrink: 0;
}
.value-strip__item strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
}
.value-strip__item span {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
}

.prime-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 1.25rem;
  padding: 1.1rem 1.5rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
}
.prime-band__lead {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.prime-band__badge {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--accent);
  white-space: nowrap;
}
.prime-band__perks {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}
.prime-band__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  transition: filter 0.15s;
}
.prime-band__cta:hover { filter: brightness(0.94); }
.prime-band__cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7);
}

@media (max-width: 720px) {
  .value-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .prime-band { flex-direction: column; align-items: flex-start; }
  .prime-band__cta { width: 100%; justify-content: center; }
}
@media (max-width: 380px) {
  .value-strip { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Category strip / chips
   ========================================================================== */

.category-strip {
  padding-block: 1.5rem;
}
.category-strip--sub {
  padding-top: 0;
  padding-bottom: 1rem;
}
.category-strip--sub .chip {
  font-size: 0.8125rem;
  opacity: 0.92;
}
.category-strip__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--card);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.chip:hover {
  border-color: var(--ink);
  background: var(--paper);
  text-decoration: none;
}

/* ==========================================================================
   Section title
   ========================================================================== */

.section-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   Deals rail (home teaser: horizontal scroll of deal cards + See-all link)
   ========================================================================== */
.deals-rail {
  margin-block: 1.5rem;
}
.deals-rail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.deals-rail__title {
  margin-bottom: 0;
}
.deals-rail__more {
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.deals-rail__more:hover,
.deals-rail__more:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.deals-rail__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.deals-rail__track > .product-card {
  flex: 0 0 200px;
  scroll-snap-align: start;
}
@media (max-width: 599px) {
  .deals-rail__track > .product-card { flex-basis: 168px; }
}

/* ==========================================================================
   Product grid
   ========================================================================== */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 3rem;
}

/* ==========================================================================
   Product card
   ========================================================================== */

.product-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-med), transform var(--transition-med);
}

.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* The card clips overflow, so a keyboard focus ring on the inner link would be
   cut off; ring the whole card instead when its link has focus. */
.product-card:has(.product-card__link:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.product-card__link {
  text-decoration: none;
  color: inherit;
}

/* Stretched link: an invisible overlay makes the whole card open the product,
   while the category link and Buy button sit above it (z-index: 2) and stay
   independently clickable. */
.product-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.product-card__link:hover {
  text-decoration: none;
}

/* Square media tile: packshots sit on a soft tile with breathing room (contain)
   rather than being cropped, which reads more premium and keeps every card the
   same height. The ribbon and no-image placeholder live in here too. */
.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--tile);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-med);
}
/* Subtle zoom on hover; the media tile clips the overflow. */
.product-card:hover .product-card__img {
  transform: scale(1.04);
}
.product-card--oos .product-card__img {
  opacity: 0.5;
  filter: grayscale(0.25);
}
.product-card--oos:hover .product-card__img {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .product-card:hover .product-card__img { transform: none; }
}
.product-card__placeholder {
  display: grid;
  place-items: center;
  gap: 0.35rem;
  color: var(--muted);
}
.product-card__placeholder svg {
  width: 32px;
  height: 32px;
  opacity: 0.45;
}
.product-card__placeholder span {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.product-card__ribbon {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  background: var(--save);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.28em 0.55em;
  border-radius: 6px;
}
.product-card__oos-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: var(--ink);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.28em 0.55em;
  border-radius: 6px;
}
/* Bundled multi-variant card: a "N sizes" badge and a "From ..." price. */
.product-card__count {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  background: rgba(11, 11, 11, 0.72);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.28em 0.55em;
  border-radius: 6px;
}
.price-tag--from .role {
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
.product-card--bundled .add-form--card .btn-buy {
  text-decoration: none;
}
/* Default-led card: the "N options - from X" link to the full product page. */
.product-card__options {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  position: relative;
  z-index: 1;
}
.product-card__options:hover {
  color: var(--ink);
  text-decoration: underline;
}

.product-card__body {
  padding: 0.6rem 0.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.product-card__name {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
}

/* Category eyebrow: quiet wayfinding label above the name. Single line,
   muted, uppercase; tightened to the name (body has 0.4rem gap). */
.product-card__eyebrow {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: -0.2rem;
}

/* When the eyebrow is a link, only the words are the target (not the full row,
   so empty space still opens the product via the stretched link). It sits above
   the stretched overlay and gets a hover/focus cue to signal it is clickable. */
a.product-card__eyebrow {
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: 100%;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast, 0.15s);
}
/* Inside a category rail the heading already names the category, so the
   per-card category eyebrow is redundant. */
.category-rail__track .product-card__eyebrow { display: none; }
a.product-card__eyebrow:hover,
a.product-card__eyebrow:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn.btn-buy {
  width: calc(100% - 1.5rem);
  margin: 0 0.75rem 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  /* Quiet outline so a grid of cards is not a wall of solid-black buttons;
     fills ink + accent on hover/focus for a clear affordance. */
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn.btn-buy:hover,
.btn.btn-buy:focus-visible {
  background: var(--ink);
  color: var(--accent);
}

/* Keep the Buy control above the stretched card link so it stays clickable. */
.product-card .add-form--card {
  position: relative;
  z-index: 2;
}
.btn.btn-buy--disabled,
.btn.btn-buy:disabled {
  cursor: not-allowed;
  background: transparent;
  color: var(--muted);
  border-color: var(--hairline);
}
.btn.btn-buy--disabled:hover,
.btn.btn-buy:disabled:hover {
  background: transparent;
  color: var(--muted);
  border-color: var(--hairline);
}

/* ==========================================================================
   Price tag
   ========================================================================== */

.price-tag {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
  opacity: 0.75;
  transition: color 0.15s, opacity 0.15s;
}

/* Emphasized price: the one matching the current view mode, or the retail
   price when a product has no wholesale option. Driven by the body attribute
   so the JS toggle can re-emphasize instantly without a reload. */
body[data-view-mode="retail"] .price--retail,
body[data-view-mode="wholesale"] .price--wholesale,
.price-tag:not(.price-tag--has-wholesale) .price--retail {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  opacity: 1;
}

/* On cards, make the emphasized price the clear focal point after the image.
   Scoped to .product-card so the product page variant rows are unchanged.
   The phone-grid media query below keeps it compact on small screens. */
body[data-view-mode="retail"] .product-card .price--retail,
body[data-view-mode="wholesale"] .product-card .price--wholesale,
.product-card .price-tag:not(.price-tag--has-wholesale) .price--retail,
.product-card .price-tag--has-deal .price--deal {
  font-size: 1.12rem;
}

/* Keep the active price in the top slot in both modes: retail is first by
   default, so only wholesale mode needs to reorder. The inactive price stays
   below, muted and smaller; switching mode changes the top amount and label
   in place rather than moving the highlighted price up or down. */
body[data-view-mode="wholesale"] .price--wholesale {
  order: -1;
}

.price .role {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  vertical-align: baseline;
}


.moq {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  background: transparent;
  color: var(--ink);
  width: 100%;
}

.btn:hover {
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}

.btn-primary {
  background: var(--ink);
  color: var(--accent);
  border-color: var(--ink);
}

.btn-primary:hover {
  background: #222;
  border-color: #222;
  color: var(--accent);
}

/* ==========================================================================
   Site Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--hairline);
  margin-top: 0;
  padding-block: 2rem;
  background: var(--paper);
}

.site-footer a {
  color: var(--ink);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.site-footer__col { display: flex; flex-direction: column; gap: 0.4rem; }
.site-footer__name { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.site-footer__meta { font-size: 0.85rem; color: var(--muted); }
.site-footer__heading { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.1rem; }
.site-footer__phone, .site-footer__email { display: inline-flex; align-items: center; gap: 0.4rem; }
.site-footer .footer-link { font-size: 0.9rem; }

.site-footer__social-heading { margin-top: 1.1rem; }
.site-footer__social { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.site-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--hairline); color: var(--ink);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.site-footer__social a:hover {
  background: var(--save); border-color: var(--save); color: #fff; text-decoration: none;
}

@media (min-width: 700px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
}
.site-footer__bottom {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.8rem;
  color: var(--muted);
}

/* 404 page content (rendered inside the full storefront layout). */
.nf404 { text-align: center; padding: 1.5rem 0 3rem; }
.nf404__code {
  font-family: var(--font-display), 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; line-height: 1;
  font-size: clamp(4.5rem, 18vw, 8rem); letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--ink) 55%, var(--accent) 55%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nf404__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 5vw, 2rem); margin: 0.5rem 0 0.35rem; letter-spacing: -0.01em; }
.nf404__lede { color: var(--muted); font-size: 1rem; max-width: 34rem; margin: 0 auto 1.6rem; line-height: 1.5; }
.nf404__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.nf404__browse { margin-top: 2.25rem; }
.nf404__browse-label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.7rem; }
.nf404__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; }

/* ===== Uwase Prime pricing page ===== */
.prime2 { max-width: 960px; margin: 0 auto; }
.prime2__hero { text-align: center; padding: 1rem 0 1.5rem; }
.prime2__headline { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0.6rem 0; }
.prime2__subhead { color: var(--muted); font-size: 1.1rem; font-weight: 600; margin: 0 0 0.6rem; }
.prime2__lede { color: var(--muted); font-size: 0.95rem; max-width: 40rem; margin: 0 auto; line-height: 1.5; }
.prime2__topbar { display: flex; justify-content: center; padding: 0.75rem 0 0.25rem; }
.prime2__brand { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--ink); }
.prime2__brand img { width: 26px; height: 26px; }
.prime2__brand span { font-weight: 800; font-size: 0.95rem; letter-spacing: -0.01em; }
.prime2__brand:hover span { text-decoration: underline; }
.prime2__back { text-align: center; padding: 0.5rem 0 2rem; }
.prime2__back a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.prime2__back-icon { width: 1em; height: 1em; flex: none; }
.prime2__back a:hover { color: var(--ink); }
.prime2__back a:hover span { text-decoration: underline; }
/* Mobile sticky join bar (shown via .is-visible when the main field scrolls away). */
.prime2-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  background: var(--card);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.1);
  /* The bar is pinned to the bottom (fixed; bottom:0); keep a small, balanced
     inner padding so the rounded field/button are not clipped at the edge. */
  padding: 0.7rem 14px;
}
.prime2-sticky.is-visible { display: block; }
.prime2-sticky__form { display: flex; align-items: stretch; gap: 0.5rem; }
.prime2-sticky__field {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
}
.prime2-sticky__addon { padding: 0 0.2rem 0 0.65rem; color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.prime2-sticky__field input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0.62rem 0.45rem;
  font-size: 0.98rem;
  outline: none;
  color: var(--ink);
}
/* Override the base .btn width:100% so the button sizes to its label and the
   phone field keeps the rest of the row. */
.prime2-sticky__cta { flex: 0 0 auto; width: auto; gap: 0.4rem; white-space: nowrap; padding: 0.62rem 1.15rem; font-size: 0.98rem; border-radius: 9px; margin: 0; }
.prime2-sticky__arrow { width: 1.05em; height: 1.05em; flex: none; }
@media (min-width: 768px) { .prime2-sticky { display: none !important; } }
.prime2__alert { background: #FDECEC; color: #9B1C1C; border-radius: var(--radius); padding: 0.7rem 1rem; margin: 0 auto 1rem; max-width: 40rem; font-size: 0.9rem; }
.prime2__pricing { max-width: 460px; margin: 1rem auto 0.5rem; text-align: center; }
.prime2__toggle { display: inline-flex; gap: 0.25rem; background: var(--tile, #f1f1ee); border-radius: 999px; padding: 0.3rem; margin: 0 auto 1rem; box-shadow: inset 0 0 0 1px rgba(11,11,11,.06); }
.prime2__chip { border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 600; color: var(--muted); padding: 0.45rem 1.05rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.4rem; }
.prime2__chip.is-active { background: var(--ink); color: var(--accent); box-shadow: 0 1px 4px rgba(11,11,11,.28); }
.prime2__chip-save { background: #E9F7EF; color: #1B7A43; font-size: 0.68rem; font-weight: 700; padding: 0.12rem 0.42rem; border-radius: 999px; }
/* Pricing card pops out of the surrounding page card: crisp ink hairline,
   soft layered elevation and a generous radius for a premium feel. */
.prime2__card { background: #fff; border: 1.5px solid var(--ink); border-radius: 20px; box-shadow: 0 1px 2px rgba(11,11,11,.05), 0 18px 44px rgba(11,11,11,.14); padding: 1.75rem 1.55rem; text-align: left; }
.prime2__price-area { text-align: center; }
.prime2__steps { list-style: none; padding: 0; margin: 1.1rem 0; display: flex; flex-direction: column; gap: 0.55rem; }
.prime2__steps li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; line-height: 1.35; color: var(--ink); }
.prime2__step-n { flex: 0 0 auto; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--ink); color: var(--accent); font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.prime2__phone-hint { color: var(--muted); font-size: 0.8rem; margin: 0.4rem 0 0; }
.prime2__price { display: flex; align-items: baseline; justify-content: center; gap: 0.4rem; flex-wrap: wrap; }
.prime2__amount { font-family: var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: -0.02em; color: var(--ink); }
.prime2__per { color: var(--muted); font-size: 0.9rem; }
.prime2__strike { color: var(--muted); text-decoration: line-through; font-size: 1rem; }
.prime2__save { display: inline-block; margin-top: 0.5rem; background: #E9F7EF; color: #1B7A43; font-weight: 700; font-size: 0.82rem; padding: 0.3rem 0.6rem; border-radius: 8px; }
.prime2__note { color: var(--muted); font-size: 0.88rem; margin: 0.6rem 0 0.9rem; }
.prime2__form { margin-top: auto; }
.prime2__phone-label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.3rem; }
/* CTA is a stacked label: bold action over a quieter amount line, so it never
   splits into two awkwardly-wrapping columns on a narrow screen. */
.prime2__cta { width: 100%; margin-top: 0.85rem; flex-direction: column; gap: 0.1rem; padding: 0.8rem 1rem; line-height: 1.2; }
.prime2__cta-main { font-size: 1.1rem; font-weight: 800; letter-spacing: 0.01em; }
.prime2__cta-amount { font-size: 0.85rem; font-weight: 600; opacity: 0.85; }
.prime2__reassure { text-align: center; color: var(--muted); font-size: 0.85rem; margin: 0.25rem auto 2rem; max-width: 36rem; }
/* Benefits sit directly under .prime2 (not inside the narrow pricing column),
   so they span the same width as the hero and read left-aligned. */
.prime2__benefits { margin: 1.75rem 0 0.5rem; text-align: left; }
.prime2__benefits > .section-title { text-align: center; }
.prime2__benefit-list { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem 1.5rem; }
.prime2__benefit-list li { display: flex; flex-direction: column; text-align: left; padding-left: 1.5rem; position: relative; }
.prime2__benefit-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #1B7A43; font-weight: 800; }
.prime2__benefit-list strong { color: var(--ink); }
.prime2__benefit-list span { color: var(--muted); font-size: 0.9rem; }
/* FAQ is its own full-width page card (via the theme main-transparent rule),
   a sibling below the main .prime2 card. */
.prime2__faq { max-width: 960px; margin: 0 auto 1.5rem; }
.prime2__faq details { border-bottom: 1px solid var(--hairline); padding: 0.75rem 0; }
.prime2__faq summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; }
.prime2__faq summary::-webkit-details-marker { display: none; }
.prime2__faq p { color: var(--muted); margin: 0.5rem 0 0; font-size: 0.92rem; }
.prime2__gate { max-width: 34rem; margin: 1rem auto; text-align: center; }
.prime2__gate-title { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; margin: 0 0 0.5rem; }
.prime2__gate-text { color: var(--muted); margin-bottom: 1rem; }
.prime2__claim { text-align: left; }
@media (max-width: 860px) {
  .prime2__benefit-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .prime2__benefit-list { grid-template-columns: 1fr; }
  .prime2__card { padding: 1.4rem 1.2rem; border-radius: 18px; }
  .prime2__amount { font-size: 1.8rem; }
  .prime2__save { font-size: 0.78rem; }
  .prime2__cta-main { font-size: 1.04rem; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
  .hero {
    padding-block: 2.5rem 1.5rem;
  }

  .mode-toggle button {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
}

/* ==========================================================================
   Product Detail Page
   ========================================================================== */

/* The left column stacks the main card, description and related cards (all the
   same width); the sidebar card sits in the right column and spans all of them
   so it can stick the whole way down. A gutter separates the two columns. */
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 300px);
  grid-template-areas:
    "main     aside"
    "desc     aside"
    "content  aside"
    "feedback aside"
    "related  aside";
  gap: 1.5rem;
  align-items: start;
  padding-block: 2rem;
}
.product-detail__main {
  grid-area: main;
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.product-detail__media {
  position: static;
}
.product-detail__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 1.75rem;
}
.product-detail__stage > img[data-gallery-main] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.product-detail__placeholder {
  display: grid;
  place-items: center;
  gap: 0.5rem;
  color: var(--muted);
}
.product-detail__placeholder svg { width: 48px; height: 48px; opacity: 0.4; }
.product-detail__placeholder span {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-detail__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}

.product-detail__thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: none;
  line-height: 0;
}

.product-detail__thumb.is-active {
  border-color: var(--accent);
}

.product-detail__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-detail__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.product-detail__info h1 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.product-detail__info .description {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.product-detail__eyebrow {
  width: fit-content;
  margin-bottom: -0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.product-detail__eyebrow:hover { color: var(--ink); }

/* Product page sidebar: a single sticky card, sat in a gutter beside the main
   card. Delivery, payment, wholesale and help are rows within it, with an
   optional sticky buy row at the top. */
/* The aside is a transparent column of separate cards. It fills the tall grid
   cell (spanning all rows) so its inner sticky group can travel: the info card
   scrolls away while the section list + buy card stick below the chrome header. */
.product-detail__aside {
  grid-area: aside;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pdp-aside__sticky {
  position: sticky;
  top: 8.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* The delivery/pay/wholesale/help info card. */
.pdp-aside__card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Quick-buy card with a product thumbnail, revealed once the main Add to cart
   scrolls out of view (pdp-sticky-buy.js toggles [hidden]). */
.pdp-buy-card {
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.pdp-buy-card[hidden] { display: none; }
/* A fixed square thumbnail pinned to the top-left, inset from the card edges so
   its height is decoupled from the card height. object-fit:cover fills the
   square without distortion; the card can grow (variant chips, deposit chip)
   without stretching the image. */
.pdp-buy-card__img {
  width: 76px;
  height: 76px;
  align-self: flex-start;
  object-fit: cover;
  flex-shrink: 0;
  margin: 0.75rem 0 0.75rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}
.pdp-buy-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.9rem;
}
.pdp-buy-card__title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pdp-buy-card__variant {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.pdp-buy-card__placeholder {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}
/* In-card variant chooser: chips for a few variants, dropdown for many. */
.pdp-buy-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.pdp-buy-chip {
  font-family: var(--font-body);
  font-size: 0.76rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.pdp-buy-chip:hover { border-color: var(--ink); }
.pdp-buy-chip.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.pdp-buy-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pdp-buy-card__select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
}

/* Product taxonomies (brand / collections / tags) surfaced on the PDP. */
.product-tags {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 1rem;
}
.product-tags__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.product-tags__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.product-tags__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.product-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--card);
  transition: border-color var(--transition-fast);
}
a.product-tag:hover {
  border-color: var(--ink);
  text-decoration: none;
}
.product-tag--plain {
  color: var(--muted);
}

/* Searchable select (combobox) enhancement. */
.ss { position: relative; }
.ss__native { display: none; }
.ss__trigger {
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 0.35rem 1.6rem 0.35rem 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238E8E88' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 0.55rem center;
}
.ss__panel {
  /* public/js/searchable-select.js portals this panel to <body> and sets
     position/top/left/width/bottom inline (fixed, anchored to the trigger's
     own bounding rect) so it is never clipped by a scrolling/overflow:hidden
     ancestor such as .pdp-buy-card; the position/top/left/right below are
     only the pre-JS/no-JS fallback shape before the inline styles apply. */
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 950;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 240px;
  padding: 0.4rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.ss__panel[hidden] { display: none; }
.ss__search {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}
.ss__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
}
.ss__option {
  padding: 0.35rem 0.5rem;
  font-size: 0.82rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ss__option:hover { background: var(--tile); }
.ss__option.is-selected { background: var(--tile); font-weight: 600; }
.ss__option.is-disabled { color: var(--muted); cursor: not-allowed; }
.pdp-buy-card__price .price-tag { margin: 0; }
.pdp-buy-card .add-form { margin: 0; }
.pdp-buy-card .btn { width: 100%; white-space: nowrap; }
.pdp-aside__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pdp-aside__item {
  display: flex;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--hairline);
}
.pdp-aside__item:first-child { border-top: 0; }
.pdp-aside__item > svg {
  width: 22px;
  height: 22px;
  color: var(--ink);
  flex-shrink: 0;
  margin-top: 1px;
}
.pdp-aside__item strong {
  display: block;
  font-size: 0.9rem;
  line-height: 1.3;
}
.pdp-aside__item span {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}
.pdp-aside__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.55rem;
}
.pdp-aside__actions a {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
}
.pdp-aside__actions a:hover {
  background: var(--surface-2, #f4f5f6);
  text-decoration: none;
}

/* Delivery ETA area picker: lives inside a .pdp-aside__item, so it inherits
   that row's spacing; style just its own controls to match the rest of the
   aside (same select treatment as .pdp-buy-card__select, amber result pill
   matching the deposit-note affordance). */
.delivery-eta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}
/* Author display rules on the summary/form/hint outrank the UA [hidden] rule,
   so re-assert it (otherwise a hidden summary or form still shows). */
.delivery-eta [hidden] {
  display: none !important;
}
.delivery-eta__label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}
.delivery-eta__pick {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.delivery-eta [data-eta-district],
.delivery-eta [data-eta-sector] {
  width: 100%;
  max-width: 175px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  padding: 0.32rem 1.5rem 0.32rem 0.6rem;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background-color: var(--card);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237a5300' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 11px 7px;
  color: var(--ink);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
.delivery-eta [data-eta-district]:focus,
.delivery-eta [data-eta-sector]:focus {
  outline: none;
  border-color: #d9480f;
  box-shadow: 0 0 0 2px rgba(217, 72, 15, 0.15);
}
.delivery-eta__geo {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.delivery-eta__geo span {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.delivery-eta__geo-icon {
  width: 14px;
  height: 14px;
  flex: none;
}
.delivery-eta__geo:hover {
  color: var(--muted);
}
/* Header row: label on the left, Use-my-location on the right. */
.delivery-eta__pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
/* Actions row: Cancel + Save, right-aligned (Change flow only). */
.delivery-eta__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}
.delivery-eta__save {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  background: #d9480f;
  border: none;
  border-radius: 6px;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
}
.delivery-eta__save:disabled { opacity: 0.45; cursor: default; }
.delivery-eta__cancel {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}
.delivery-eta__cancel:hover { color: var(--ink); }
.delivery-eta__hint {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
/* Collapsed summary: compact "District, Sector - Change". */
.delivery-eta__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--ink);
}
.delivery-eta__summary-icon {
  width: 15px;
  height: 15px;
  flex: none;
  color: #d9480f;
}
.delivery-eta__summary-text { font-weight: 700; }
.delivery-eta__change {
  font-size: 0.75rem;
  font-weight: 600;
  color: #b45309;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.delivery-eta__summary:hover .delivery-eta__change { color: #d9480f; }
/* Standalone, full-width glowing delivery row that draws the eye: its own
   aside item (a highlighted sibling of the payment/wholesale rows) with a
   strong dark ETA headline over a quieter area + fee line and a fast-moto
   icon. The aside card clips overflow, so the glow is an inset ring pulse
   rather than an outer drop shadow (which would be clipped). */
/* Our scoped display rules override the UA [hidden] rule, so re-assert it for
   the band item itself and its children (otherwise a hidden band/line leaks). */
.pdp-aside__item--eta[hidden] {
  display: none !important;
}
.pdp-aside__item--eta [hidden] {
  display: none !important;
}
.pdp-aside__item--eta {
  align-items: center;
  gap: 0.55rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  background: linear-gradient(135deg, #FFF4D6, #FFE7AE);
  line-height: 1.2;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.16);
  animation: etaPop 0.28s ease-out both, etaGlowInset 2.2s ease-in-out 0.3s infinite;
}
.pdp-aside__item--eta > svg {
  width: 26px;
  height: 22px;
  margin-top: 0;
  color: #d9480f;
  animation: etaMoto 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* Scoped under the row so these beat the generic .pdp-aside__item span/strong
   rules (which otherwise force the fee/brand onto its own line at 0.9rem). */
.pdp-aside__item--eta .delivery-eta__lines {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.pdp-aside__item--eta .delivery-eta__eta {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ink);
}
.pdp-aside__item--eta .delivery-eta__sub {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: #7a5300;
}
.pdp-aside__item--eta .delivery-eta__fee {
  display: inline;
  font-size: inherit;
  font-weight: 700;
}
.pdp-aside__item--eta .delivery-eta__prime-line {
  color: inherit;
  text-decoration: none;
}
.pdp-aside__item--eta .delivery-eta__prime-line:hover { text-decoration: underline; }
.pdp-aside__item--eta .delivery-eta__upsell {
  display: inline-block;
  margin-top: 0.08rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: #b45309;
  text-decoration: none;
}
.pdp-aside__item--eta .delivery-eta__upsell strong {
  display: inline;
  font-size: inherit;
  font-weight: 700;
}
.pdp-aside__item--eta .delivery-eta__upsell:hover {
  text-decoration: underline;
}
.pdp-aside__item--eta .delivery-eta__upsell::before {
  content: "\2726  ";
  color: #d97706;
}
.delivery-eta__moto {
  width: 30px;
  height: 24px;
  flex: none;
  color: #d9480f;
  animation: etaMoto 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* Speed lines streak in to sell the "riding fast" feel, then settle. */
.delivery-eta__speed {
  animation: etaSpeed 0.7s ease-out 0.1s both;
}
@keyframes etaPop {
  from { opacity: 0; transform: translateY(3px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Gentle breathing glow so the row keeps drawing attention. Inset because the
   aside card clips overflow, which would swallow an outer drop shadow. */
@keyframes etaGlowInset {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.14), inset 0 0 12px rgba(245, 158, 11, 0.18); }
  50% { box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.30), inset 0 0 18px rgba(245, 158, 11, 0.42); }
}
@keyframes etaMoto {
  from { transform: translateX(-6px); }
  60% { transform: translateX(1px); }
  to { transform: translateX(0); }
}
@keyframes etaSpeed {
  0% { opacity: 0; transform: translateX(5px); }
  50% { opacity: 1; }
  100% { opacity: 0.55; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pdp-aside__item--eta,
  .pdp-aside__item--eta > svg,
  .delivery-eta__moto,
  .delivery-eta__speed { animation: none; }
}

/* ==========================================================================
   Product buy-box polish: savings callout, stock/delivery, full-width CTA
   ========================================================================== */
.buybox-signals {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.9rem;
}
.buybox-signal {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.9rem;
}
.buybox-signal--save {
  padding: 0.4rem 0.7rem;
  background: #e7f3ec;
  color: var(--save);
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.buybox-signal--save svg { width: 18px; height: 18px; flex-shrink: 0; }
.buybox-signal--stock { color: var(--muted); }
/* Preorder: a coming-soon state (soft amber), distinct from out-of-stock. */
.buybox-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.buybox-pill--preorder { background: #FFF4CC; color: #8A6D00; }
.buybox__preorder-note { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--muted); }
.buy-variant__preorder {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #8A6D00;
}
.product-card__oos-badge--preorder { background: #FFF4CC; color: #8A6D00; }
.buybox-signal__sep { opacity: 0.45; }
.stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stock-dot--in {
  background: var(--save);
  box-shadow: 0 0 0 3px rgba(30, 122, 61, 0.18);
}
.stock-dot--out { background: var(--muted); }

/* Buy box: one bordered panel with an optional variant selector, a quantity
   stepper and a full-width primary Add to cart. */
.buybox { margin-top: 0.25rem; }
/* Scoped under .buybox so it outranks the global .add-form flex rule (the form
   also carries the add-form class for the AJAX add handler). */
.buybox .buybox__form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  width: 100%;
  max-width: 460px;
  margin-top: 0;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.buybox .buy-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.buybox .buy-variant__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.buybox .buy-variant {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
/* Preorder sits on its own line ABOVE the size label. */
.buybox .buy-variant .buy-variant__preorder { display: block; margin-bottom: 1px; }
.buybox .buy-variant__input:checked + .buy-variant {
  background: var(--ink);
  color: var(--accent);
  border-color: var(--ink);
}
.buybox .buy-variant__input:focus-visible + .buy-variant {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.buybox .buy-variant--out {
  opacity: 0.5;
  text-decoration: line-through;
  cursor: not-allowed;
}
/* Many-variant (> 8) fallback: a compact dropdown instead of a wall of chips.
   Shared by the desktop buy box and the mobile buy bar. */
.buybox .buybox__variant-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
.buy-variant-select {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
}
.buy-variant-select:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.buybox .buy-variant-select { width: 100%; }
.buybox .buy-price { margin: 0; }
.buybox .buybox__actions {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
}
.buybox .buy-stepper {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  flex: 0 0 auto;
}
.buybox .buy-stepper__btn {
  width: 2.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.buybox .buy-stepper__val {
  width: 3rem;
  text-align: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: var(--font-body);
  background: var(--card);
  color: var(--ink);
  -moz-appearance: textfield;
}
.buybox .buy-stepper__val::-webkit-outer-spin-button,
.buybox .buy-stepper__val::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.buybox .buybox__add {
  flex: 1 1 auto;
  justify-content: center;
  padding-block: 0.7rem;
  font-size: 1rem;
}

/* Multi-option variant selector (Storage x Colour, etc). Pill buttons mirror
   the existing .buy-variant chip (ink-filled selected state, pill radius,
   hairline border) so the two selector styles read as one system. */
.variant-selector {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 0.1rem;
}
.variant-option {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.variant-option__name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.variant-option__values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.variant-value {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.15;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}
.variant-value:hover:not(:disabled) {
  border-color: var(--ink);
}
.variant-value.is-selected {
  background: var(--ink);
  color: var(--accent);
  border-color: var(--ink);
}
.variant-value:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.variant-value:disabled,
.variant-value.is-unavailable {
  opacity: 0.5;
  cursor: not-allowed;
  /* A diagonal strikethrough cue through the whole pill, distinct from the
     filled is-selected state and the plain default, so an unavailable
     combination reads as unavailable at a glance even without hover. */
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--hairline) calc(50% - 1px), var(--hairline) calc(50% + 1px), transparent calc(50% + 1px));
}
.variant-value:disabled.is-selected,
.variant-value.is-unavailable.is-selected {
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--muted) calc(50% - 1px), var(--muted) calc(50% + 1px), transparent calc(50% + 1px)), var(--ink);
  color: var(--accent);
}
.variant-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  flex-shrink: 0;
  vertical-align: middle;
}
.variant-status {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #B3261E;
}

/* Gallery: zoom cue on hover, and a full-screen lightbox on click. */
.product-detail__media.gallery-enhanced .product-detail__stage { cursor: zoom-in; }
.product-detail__media.gallery-enhanced .product-detail__stage > img {
  transition: transform var(--transition-med) ease;
}
.product-detail__media.gallery-enhanced .product-detail__stage:hover > img {
  transform: scale(1.04);
}
.pdp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp-lightbox[hidden] { display: none; }
.pdp-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}
.pdp-lightbox__img {
  position: relative;
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius);
  background: #fff;
}
.pdp-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.pdp-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}
.pdp-lightbox__nav[hidden] { display: none; }
.pdp-lightbox__nav--prev { left: 1rem; }
.pdp-lightbox__nav--next { right: 1rem; }
.pdp-lightbox__close:hover,
.pdp-lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }

/* Micro-polish: visible focus rings and a subtle press on the primary CTA. */
.product-detail__info .btn-primary:focus-visible,
.pdp-aside__actions a:focus-visible,
.product-detail__thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Reassurance row: what a shopper wants to know before buying. */
.product-trust {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 0.85rem;
}
.product-trust__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.product-trust__item svg {
  width: 22px;
  height: 22px;
  color: var(--ink);
  flex-shrink: 0;
}
.product-trust__item strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
}
.product-trust__item span {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
}

.product-meta {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 0.5rem;
}
.product-meta__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
}
.product-meta__row dt { color: var(--muted); }
.product-meta__row dd { margin: 0; color: var(--ink); font-weight: 500; }
.product-meta__row dd a { color: inherit; text-decoration: none; }
.product-meta__row dd a:hover { text-decoration: underline; }

/* "More in this category" keeps the page alive below the fold. */
/* Description and related are cards in the left column, the same width as the
   main card, so the sidebar can stick alongside all of them. */
.product-related {
  grid-area: related;
  margin: 0;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.product-related .section-title {
  margin-bottom: 1.25rem;
}

.product-description {
  grid-area: desc;
  margin: 0;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.product-description .section-title {
  margin-bottom: 0.9rem;
}
.product-description__body {
  max-width: 68ch;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Structured content blocks: each block is its own card, stacked in the left
   column between the description and the related products. */
.product-content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.product-content__card {
  margin: 0;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.pcb-title { font-size: 1.1rem; font-weight: 650; margin: 0 0 0.85rem; }
.pcb-text { color: var(--muted); font-size: 0.95rem; line-height: 1.7; }
.pcb-text p { margin: 0 0 0.75rem; }
.pcb-text img, .product-description__body img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 0.5rem 0; }
/* Image size + alignment classes set in the description editor. */
img.img-sm { width: 33%; } img.img-md { width: 60%; } img.img-full { width: 100%; }
img.img-left { float: left; margin: 0.25rem 1rem 0.5rem 0; }
img.img-right { float: right; margin: 0.25rem 0 0.5rem 1rem; }
img.img-center { display: block; margin-left: auto; margin-right: auto; float: none; }
.pcb-list { margin: 0; padding-left: 1.3rem; line-height: 1.75; color: var(--muted); }
.pcb-tablewrap { overflow-x: auto; }
.pcb-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.pcb-table th, .pcb-table td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.pcb-table th[scope="row"] { width: 38%; font-weight: 600; }
.pcb-table--grid thead th { font-weight: 650; border-bottom: 2px solid var(--hairline); white-space: nowrap; }
.pcb-faq { border-bottom: 1px solid var(--hairline); padding: 0.65rem 0; }
.pcb-faq summary { cursor: pointer; font-weight: 600; }
.pcb-faq summary::marker { color: var(--muted); }
.pcb-answer { margin-top: 0.5rem; color: var(--muted); line-height: 1.65; }

.variants {
  /* One bordered panel that hugs its content (so a single price + button does
     not float in a wide half-empty card) and caps its width so it never
     stretches the whole info column. Rows are divided by hairlines. */
  width: fit-content;
  max-width: min(460px, 100%);
  margin-top: 0.25rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}

.variant-row {
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.variant-row + .variant-row {
  border-top: 1px solid var(--hairline);
}

.variant-row__info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.variant-row__label {
  font-weight: 600;
  font-size: 0.9375rem;
}

/* The Add button sits to the right of the price, sized to its content rather
   than filling the row. On phones the sticky buy bar owns the action, so the
   inline form is hidden and the row shows just the price. */
.variant-row .add-form--row {
  margin: 0;
  flex-shrink: 0;
}

.add-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.add-form input[type="number"] {
  width: 5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
}

@media (max-width: 1080px) {
  /* Tablet: single column; the sidebar sits right after the main card, then the
     description and related cards. */
  .product-detail {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "aside"
      "desc"
      "content"
      "feedback"
      "related";
  }
  .product-detail__aside {
    align-self: start;
  }
  .pdp-aside__sticky {
    position: static;
  }
}

@media (max-width: 768px) {
  /* Phone: gallery stacks above the buy box inside the main card. */
  .product-detail__main {
    grid-template-columns: 1fr;
  }

  .product-detail__stage {
    max-width: 360px;
    margin-inline: auto;
  }
  .product-detail__stage {
    max-width: 360px;
    margin-inline: auto;
  }

  .product-detail__info h1 {
    font-size: 1.375rem;
  }

  .add-form {
    flex-direction: column;
    align-items: stretch;
  }

  .add-form input[type="number"] {
    width: 100%;
  }
}

/* ==========================================================================
   Cart Page
   ========================================================================== */

/* One background card holding the cart lines as separate item cards. */
.cart {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 0.75rem;
}

.cart-line {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 0;
  align-items: stretch;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 0;
}
/* Remove badge, offset off the top-right corner of each item card. */
.cart-line__close {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  z-index: 2;
  margin: 0;
}
/* Column 2 stacks the name/breakdown and the unlock nudge together, so the
   nudge sits directly under the breakdown in the same row (no extra grid row
   that made the card taller). */
.cart-line__body {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 0 0.85rem 0.85rem;
}
.cart-line__unlock {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.3;
}
.cart-line__unlock:empty {
  display: none;
}
.cart-line__controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  padding: 0.85rem 1.25rem;
}
/* Full-height thumbnail flush to the card's left edge. */
.cart-line__media { grid-column: 1; align-self: stretch; }
.cart-line__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius) - 1px) 0 0 calc(var(--radius) - 1px);
  background: var(--hairline);
}
.cart-line__img--placeholder { display: block; }
.cart-line__name {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  font-weight: 500;
}
.cart-line__title { font-weight: 500; }
.cart-line__unit { font-weight: 400; font-size: 0.85em; color: var(--muted); }
.cart-line__meta { font-size: 0.72rem; line-height: 1.35; color: var(--muted); }
.cart-line__qty { display: flex; align-items: center; gap: 0.4rem; }
.cart-qty { display: flex; align-items: center; gap: 0.15rem; }
.cart-qty__btn {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.cart-qty__btn:active { transform: translateY(1px); }
.cart-qty__val {
  width: 2rem;
  height: 2rem;
  text-align: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -moz-appearance: textfield;
}
.cart-qty__val::-webkit-outer-spin-button,
.cart-qty__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-line__total { text-align: right; font-weight: 600; white-space: nowrap; font-size: 1.05rem; }
@media (prefers-reduced-motion: reduce) {
  .cart-qty__btn:active { transform: none; }
}

.tier-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1em 0.45em;
  border-radius: 3px;
  background: var(--ink);
  color: var(--accent);
  vertical-align: middle;
}

.unlock {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink);
  background: #FFF9D6;
  border: 1px solid #FFC400;
  border-radius: var(--radius-sm);
  padding: 0.15em 0.5em;
}
.unlock__add {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.unlock__add:hover,
.unlock__add:focus-visible {
  text-decoration: none;
}

/* Cart: lines on the left, a sticky summary sidebar on the right (like the PDP
   aside). On phones the summary becomes the fixed bottom bar (rules below). */
.cart-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 1.5rem;
  align-items: start;
}
.cart-detail__main { min-width: 0; }
.cart-detail__aside {
  position: sticky;
  top: 8.5rem;
}
@media (max-width: 900px) {
  .cart-detail { grid-template-columns: 1fr; }
  .cart-detail__aside { position: static; }
}

.cart-summary {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: stretch;
}
.cart-summary .btn { width: 100%; }

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 1rem;
}

.cart-summary__row b {
  font-weight: 700;
}

.link-remove {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
}

.link-remove:hover {
  color: var(--ink);
}

.notice {
  background: #E8F5E9;
  border: 1px solid #A5D6A7;
  border-radius: var(--radius-sm);
  padding: 0.625rem 1rem;
  font-size: 0.9rem;
  color: #2E7D32;
  margin-bottom: 1rem;
}

.btn-ghost {
  background: transparent;
  border-color: var(--hairline);
  color: var(--ink);
  width: auto;
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
}

.btn-ghost:hover {
  background: var(--hairline);
  color: var(--ink);
}

.qty-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qty-form input[type="number"] {
  width: 2.25rem;
  padding: 0.3rem 0.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
}

@media (max-width: 640px) {
  /* Two columns on a phone: a full-height image, and everything else stacked so
     the product name gets the full width (no one-word-per-line wrap). The price
     and quantity stepper drop to their own row under the name. */
  .cart-line { grid-template-columns: 72px minmax(0, 1fr); }
  .cart-line__media { grid-row: 1 / -1; }
  .cart-line__body {
    grid-column: 2;
    grid-row: 1;
    padding: 0.7rem 0.7rem 0.35rem 0.7rem;
  }
  .cart-line__controls {
    grid-column: 2;
    grid-row: 2;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.7rem 0.7rem 0.7rem;
  }
  .cart-line__unlock { font-size: 0.68rem; }
}

.small {
  font-size: 0.8rem;
}

.muted {
  color: var(--muted);
}

/* ==========================================================================
   Toast (JS add-to-cart feedback)
   ========================================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 1rem);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(11, 11, 11, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 200;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: opacity 0.2s;
  }
}

/* ==========================================================================
   Checkout Page
   ========================================================================== */

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 2rem;
  align-items: start;
  padding-block: 1.5rem 3rem;
}
.checkout-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.checkout-col--side {
  position: sticky;
  top: 1.5rem;
}

/* Preorder "how it works" timeline. Sits under the details card in the left
   column on desktop; on mobile it drops below the summary (the Make Payment
   button is fixed, so it stays reachable). */
.checkout-timeline {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.25rem;
  background: var(--card);
}
.checkout-timeline__title {
  margin: 0 0 1.1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.checkout-timeline__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.checkout-timeline__step {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.75rem;
  padding-bottom: 1.15rem;
}
.checkout-timeline__step:last-child { padding-bottom: 0; }
.checkout-timeline__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: -2px;
  width: 2px;
  background: var(--hairline);
}
.checkout-timeline__node {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--card);
  border: 2px solid var(--hairline);
  color: var(--muted);
}
.checkout-timeline__step.is-now .checkout-timeline__node {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #3a2d00;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.16);
}
.checkout-timeline__body { padding-top: 0.15rem; min-width: 0; }
.checkout-timeline__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.checkout-timeline__label { font-weight: 700; font-size: 0.92rem; }
.checkout-timeline__date {
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #8a6d00;
  background: rgba(245, 158, 11, 0.12);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}
.checkout-timeline__desc {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}
.checkout-timeline__note {
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.checkout-fieldset {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.25rem;
  background: var(--card);
}

.checkout-legend {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding-inline: 0.25rem;
}

.form-field {
  margin-top: 1rem;
}

.form-field:first-of-type {
  margin-top: 0.75rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
  color: var(--ink);
}

.form-input {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
}

.form-input:focus {
  border-color: var(--ink);
}

.form-input.is-error {
  border-color: #D32F2F;
}

.form-error {
  color: #D32F2F;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

textarea.form-input {
  resize: vertical;
  min-height: 80px;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  cursor: pointer;
}

.radio-label input[type="radio"] {
  accent-color: var(--ink);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.checkout-submit {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

/* Checkout summary */
.checkout-summary {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.checkout-summary-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.checkout-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 40vh;
  overflow-y: auto;
}

.checkout-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.checkout-item__name {
  font-size: 0.9rem;
  font-weight: 500;
}

.checkout-item__qty-price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.checkout-item__total {
  font-size: 0.875rem;
  font-weight: 600;
}

.checkout-totals {
  border-top: 1px solid var(--hairline);
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.checkout-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.9rem;
}

.checkout-total-row--grand {
  font-size: 1.05rem;
  padding-top: 0.5rem;
  border-top: 2px solid var(--hairline);
  margin-top: 0.25rem;
}

/* Checkout: sticky side column */
@media (min-width: 900px) {
  .checkout-col--side {
    align-self: start;
  }
}

/* ==========================================================================
   Order confirmation page
   ========================================================================== */

.order-page {
  padding-block: 2rem 3rem;
  max-width: 860px;
  margin-inline: auto;
}

.order-header {
  margin-bottom: 1.5rem;
}

.order-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.order-number {
  color: var(--muted);
  font-weight: 600;
}

.order-placed {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

/* Status banner */
.order-status-banner {
  border-radius: var(--radius);
  padding: 0.875rem 1.25rem;
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.status-icon { flex: 0 0 auto; }
.payment-line { display: inline-flex; align-items: center; gap: 0.5rem; }
.payment-line__method { color: var(--muted); font-size: 0.85rem; letter-spacing: 0.02em; }

.order-status-banner--pending,
.order-status-banner--processing {
  background: #FFF8E1;
  border-color: #FFE082;
  color: #5D4037;
}

.order-status-banner--confirmed {
  background: #E8F5E9;
  border-color: #A5D6A7;
  color: #2E7D32;
}

.order-status-banner--out_for_delivery {
  background: #E3F2FD;
  border-color: #90CAF9;
  color: #1565C0;
}

.order-status-banner--completed {
  background: #E8F5E9;
  border-color: #A5D6A7;
  color: #2E7D32;
}

.order-status-banner--cancelled {
  background: #FDECEA;
  border-color: #F5C6C2;
  color: #C0392B;
}

/* MoMo pending panel */
.momo-pending-panel {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.momo-pending-icon {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 0.1rem;
}

.momo-pending-text {
  flex: 1;
}

.momo-pending-text strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.9375rem;
}

.momo-pending-text p {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
}

.momo-pending-spinner {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--hairline);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin-top: 0.25rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .momo-pending-spinner {
    animation: none;
    border-top-color: var(--hairline);
  }
}

/* Order body layout */
.order-body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 1.5rem;
}

.order-section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--ink);
}

/* Contact + Fulfillment side by side */
.order-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 600px) {
  .order-details-grid {
    grid-template-columns: 1fr;
  }
}

.order-detail-block {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.order-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
  font-size: 0.875rem;
}

.order-dl dt {
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.order-dl dd {
  color: var(--ink);
}

/* Items table */
.order-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}

.order-items-table th,
.order-items-table td {
  padding: 0.65rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
}

.order-items-table thead th {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--paper);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.order-items-table tbody tr:last-child td {
  border-bottom: 1px solid var(--hairline);
}

.order-items-table tfoot tr td {
  border-bottom: none;
}

.order-items-table .col-qty,
.order-items-table .col-total,
.order-items-table .totals-value {
  text-align: right;
}

.order-items-table .totals-label {
  color: var(--muted);
  font-size: 0.875rem;
}

.order-total-row td {
  font-size: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  border-top: 2px solid var(--hairline);
}

/* Notes */
.order-notes {
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* MoMo failed panel */
.momo-failed-panel {
    border: 1px solid #F5C6C2;
    border-left: 4px solid #C0392B;
    background: #FDECEA;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin: 1rem 0;
}
.momo-failed-panel strong { display: block; margin-bottom: 0.25rem; }
.momo-failed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.momo-failed-actions button {
    padding: 0.6rem 1rem;
    border-radius: var(--radius-control);
    border: 1px solid #0B0B0B;
    cursor: pointer;
    font: inherit;
}
.btn-retry { background: #FFC400; color: #0B0B0B; }
.btn-cod { background: #FAFAF7; color: #0B0B0B; }
.notice--success {
  background: #E8F5E9;
  border-color: #A5D6A7;
  color: #2E7D32;
}
.notice--error {
  background: #FDECEA;
  border-color: #F5C6C2;
  color: #C0392B;
}

/* MoMo approval countdown */
.momo-countdown {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 0.4rem;
}
.momo-countdown-value {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.momo-timeout-note {
  font-size: 0.875rem;
  color: #C0392B;
  margin-top: 0.4rem;
}

/* ==========================================================================
   Interactive button feedback (sitewide)
   ========================================================================== */

/* Instant press feedback on every button and button-styled link. */
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-danger:active,
.btn-buy:active,
.btn-ghost:active,
.btn-retry:active,
.btn-cod:active,
.mode-toggle button:active,
button:active {
  transform: translateY(1px);
}

/* Card press affordance. */
.product-card:active {
  transform: scale(0.99);
}

/* Disabled + loading states shared by all buttons. */
button:disabled,
.btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

button.is-loading,
.btn.is-loading {
  opacity: 0.75;
  cursor: progress;
}

/* Add-to-cart success confirmation. */
button.is-added,
.btn.is-added {
  background: #2E7D32;
  border-color: #2E7D32;
  color: #FFFFFF;
  opacity: 1;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .btn:active,
  .btn-primary:active,
  .btn-secondary:active,
  .btn-ghost:active,
  .btn-danger:active,
  .btn-buy:active,
  .btn-retry:active,
  .btn-cod:active,
  .mode-toggle button:active,
  button:active,
  .product-card:active,
  .product-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   Full-bleed section (home: New in store)
   ========================================================================== */
.section--full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.section--full__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
/* Fill the content column edge to edge (no side padding); the block inside
   relies on its own internal padding for spacing. Used by the hero slideshow,
   value strip and prime band. Keeps the base max-width: a wider 100vw inner
   would be positioned from the viewport edge and then clipped by main's
   max-width + overflow-x:clip, cropping the content. */
.section--full__inner--wide {
  padding-inline: 0;
}
/* Contained catalog grid: roomier cards, fewer per row. 5 large down to 2 on phones. */
.product-grid--wide {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 600px) {
  .product-grid--wide {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 900px) {
  .product-grid--wide {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1200px) {
  .product-grid--wide {
    grid-template-columns: repeat(5, 1fr);
  }
}
/* PDP "You might also like": always 4 across (2 rows of the 8 capped items). */
@media (min-width: 900px) {
  .product-related .product-grid--wide {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Compact pager (replaces the unstyled default Laravel pagination) */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0 1rem;
  flex-wrap: wrap;
}
.pager__btn {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
}
.pager__btn:hover {
  background: var(--ink);
  color: var(--paper);
}
.pager__btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.pager__info {
  font-size: 0.85rem;
  color: var(--muted);
}

/* Compact price tag */
.price-tag .price {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  line-height: 1.05;
}
/* Meta column: "RWF" on top, the RTL/WSL label below; equal width, centred. On
   the active price the column stretches to the number's height (align-items:
   stretch on .price) and space-between pins RWF to the top, the label to the
   bottom, so the pair is exactly as tall as the number. */
.price__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.14rem;
  line-height: 1;
}
/* The muted price hides "RWF"; only the active price shows it. */
.price__cur {
  display: none;
  width: 100%;
  text-align: center;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
body[data-view-mode="retail"] .price--retail .price__cur,
body[data-view-mode="wholesale"] .price--wholesale .price__cur,
.price-tag:not(.price-tag--has-wholesale) .price--retail .price__cur,
.price--deal .price__cur {
  display: block;
}
.price-tag .role {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border-radius: 3px;
  text-align: center;
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: inherit;
}
/* Active price label: slightly larger, black chip with yellow text. */
body[data-view-mode="retail"] .price--retail .role,
body[data-view-mode="wholesale"] .price--wholesale .role,
.price-tag:not(.price-tag--has-wholesale) .price--retail .role {
  background: var(--ink);
  color: var(--accent);
  font-size: 0.62rem;
  padding: 0.12em 0.2em;
}
.price__num {
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  align-self: center;
}
.price__sup {
  font-size: 0.58em;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.04em;
}
.price-tag .moq { align-self: center; }
/* Superscript-tail price: the thousands are the hero; the trailing three digits
   ride high and small, and the currency is small/muted. Sizes in em so they
   scale with whichever .amt context they sit in. */
.money { white-space: nowrap; font-size: 1.08em; }
.money__cur {
  font-size: 0.62em;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.03em;
  margin-right: 0.12em;
}
.money__sup {
  font-size: 0.62em;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.06em;
}
/* Inline breakdown / nudge helper text: the price reads at the surrounding text
   size (drop the emphasis bump) so the thousands match the rest of the line;
   only the currency stays tiny+muted and the tail rides high. */
.cart-line__meta .money,
.cart-line__unlock .money,
.checkout-item__qty-price .money {
  font-size: 1em;
}
.price-tag .moq {
  font-size: 0.62rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--tile);
  color: var(--ink);
}

/* On the 2-up phone grid the cards are ~150px wide, so compact the price a
   notch to keep the whole line (role + amount + MOQ) on one row without
   wrapping OR clipping. The emphasized price stays clearly larger than the
   muted one. */
@media (max-width: 599px) {
  /* The number scales with .price (em); size .price per active/muted state. */
  .product-card .price-tag .price { gap: 0.3rem; font-size: 0.61rem; }
  .product-card .price-tag .role,
  .product-card .price-tag .price__cur {
    font-size: 0.5rem;
    letter-spacing: 0.02em;
  }
  .product-card .price-tag .moq {
    font-size: 0.54rem;
    padding: 0.03rem 0.28rem;
  }
  body[data-view-mode="retail"] .product-card .price--retail,
  body[data-view-mode="wholesale"] .product-card .price--wholesale,
  .product-card .price-tag:not(.price-tag--has-wholesale) .price--retail {
    font-size: 0.76rem;
  }
}


/* ==========================================================================
   Footer auth + auth pages
   ========================================================================== */
.footer-link {
  color: inherit;
  font-size: 0.85rem;
}
.footer-link--button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.footer-logout {
  display: inline;
}

.auth-card {
  max-width: 420px;
  margin: 2.5rem auto;
  padding: 1.75rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.auth-card__title {
  margin-bottom: 1.25rem;
  font-size: 1.5rem;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.auth-card__alt {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--muted);
}
/* Product-card quantity stepper */
.qty-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: calc(100% - 1.5rem);
  margin: 0 0.75rem 0.75rem;
}
.qty-stepper__btn {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.qty-stepper__btn:active { transform: translateY(1px); }
.qty-stepper__val {
  font-weight: 600;
  min-width: 2ch;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .qty-stepper__btn:active { transform: none; }
}

/* Cart page: the Update button is a no-JS fallback. */
.js-cart-active .js-cart-update { display: none; }

.momo-retry-label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.5rem 0 0.25rem;
}

/* Active category chip */
.chip--active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Catalog: hide the numbered pager once JS enhancement (infinite scroll) is active. */
.catalog-enhanced .js-hide-when-enhanced { display: none; }
[data-scroll-sentinel] { height: 1px; width: 100%; }

/* Mobile category chips: wrap inside the content column (no 100vw, no
   horizontal scroll). Capped to about two rows with a checkbox expander. */
.category-strip__toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.chip--expand {
  display: none;
}
.chip--expand__less {
  display: none;
}
@media (max-width: 640px) {
  .category-strip {
    padding-block: 0.75rem;
  }
  .category-strip__chips {
    gap: 0.4rem;
    /* Clamp to about two rows; the expander below reveals the rest. */
    max-height: 4.3rem;
    overflow: hidden;
  }
  .category-strip__toggle-input:checked ~ .category-strip__chips {
    max-height: none;
  }
  .category-strip .chip {
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
  }
  /* The expander label sits outside the clamped chips, so it is always tappable
     (the previous version clipped it inside the clamp and hid it). */
  .chip--expand {
    display: inline-flex;
    margin-top: 0.4rem;
    cursor: pointer;
  }
  .category-strip__toggle-input:checked ~ .chip--expand .chip--expand__more {
    display: none;
  }
  .category-strip__toggle-input:checked ~ .chip--expand .chip--expand__less {
    display: inline;
  }
}

/* Skeleton loading cards (catalog fetches) */
.skeleton-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.skeleton-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
}
.skeleton-card__line {
  height: 0.7rem;
  margin: 0.6rem 0.75rem;
  border-radius: 4px;
}
.skeleton-card__line--short {
  width: 55%;
}
.skeleton-card__img,
.skeleton-card__line {
  background: linear-gradient(90deg, var(--hairline) 25%, #F3F2EC 50%, var(--hairline) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.3s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-card__img,
  .skeleton-card__line {
    animation: none;
    background: var(--hairline);
  }
}

/* ==========================================================================
   SP1: Mobile toggle bar
   ========================================================================== */

.mode-toggle button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--accent);
}

/* Mobile sticky bottom toggle bar (retail / wholesale). Desktop: hidden. */
.mobile-toggle-bar {
  display: none;
}

@media (max-width: 699px) {
  /* Drop the 100vw full-bleed on phones so iOS Safari cannot overflow the
     viewport horizontally. */
  .section--full {
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .mobile-toggle-bar {
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: var(--paper);
    border-top: 1px solid var(--hairline);
    padding: 0.6rem 1rem;
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  }
  .mobile-toggle-bar .mode-toggle {
    width: 100%;
    max-width: 360px;
  }
  .mobile-toggle-bar .mode-toggle button {
    flex: 1;
    min-height: 2.75rem;
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
  }

  /* Room so content and the footer are not hidden behind the fixed bar. */
  body {
    padding-bottom: 4rem;
  }

  /* The bottom toggle bar owns the retail/wholesale switch on phones, so the
     header's copy is redundant. Hiding it stops the two toggle buttons from
     squeezing the search field shut and shoving the cart off the right edge. */
  .header-cluster .mode-toggle { display: none; }
}

/* ==========================================================================
   Product page mobile: sticky add-to-cart bar (single-variant), stacked
   directly above the retail/wholesale toggle bar.
   ========================================================================== */
.product-buy-bar {
  display: none;
}

@media (max-width: 699px) {
  .product-buy-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--toggle-bar-h) + env(safe-area-inset-bottom, 0px));
    z-index: 200;
    background: var(--paper);
    border-top: 1px solid var(--hairline);
    padding: 0.55rem 1rem;
  }
  .product-buy-bar__form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    /* Wrap so a wide price plus the stepper never pushes the Add to cart
       button off the right edge; the button drops to a full-width second row
       instead of being clipped. Stays one row when everything fits. */
    flex-wrap: wrap;
    margin: 0;
  }
  /* Keep the quantity input compact: the shared .add-form mobile rule
     (input width: 100%) must not stretch the buy bar's stepper field. */
  .product-buy-bar__form input[name="quantity"] {
    width: 3rem;
  }
  .product-buy-bar .price-tag {
    flex: 0 0 auto;
    margin: 0;
  }
  .buy-stepper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
  }
  .buy-stepper__btn {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--ink);
    border-radius: var(--radius-sm);
    background: var(--paper);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
  }
  .buy-stepper__val {
    width: 3rem;
    height: 2.25rem;
    text-align: center;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: var(--font-body);
    background: var(--card);
    color: var(--ink);
    -moz-appearance: textfield;
  }
  .buy-stepper__val::-webkit-outer-spin-button,
  .buy-stepper__val::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .product-buy-bar--multi .product-buy-bar__form {
    flex-wrap: wrap;
  }
  .buy-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex-basis: 100%;
    width: 100%;
  }
  .buy-variant__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .buy-variant {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
  }
  .buy-variant__input:checked + .buy-variant {
    background: var(--ink);
    color: var(--accent);
    border-color: var(--ink);
  }
  .buy-variant__input:focus-visible + .buy-variant {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }
  .buy-prices {
    flex: 0 0 auto;
  }
  .buy-price {
    margin: 0;
  }

  .product-buy-bar .product-buy-bar__add {
    flex: 1 1 auto;
    width: auto;
    min-height: 2.75rem;
    white-space: nowrap;
  }

  /* The sticky bar owns the action on mobile, so hide the in-card buy actions
     (stepper + Add to cart). The variant chooser and price stay visible in the
     card. Targets the current .buybox markup (the old .variants selector no
     longer matched anything, leaving a duplicated, clipped Add button). */
  body.has-buy-bar .buybox__actions { display: none; }

  /* Clear both the buy bar and the toggle bar below the content. */
  body.has-buy-bar {
    padding-bottom: calc(var(--toggle-bar-h) + 4.25rem + env(safe-area-inset-bottom, 0px));
  }

  /* The multi-variant picker bar is taller (a pill row plus the action row). */
  body.has-buy-bar:has(.product-buy-bar--multi) {
    padding-bottom: calc(var(--toggle-bar-h) + 6rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================================
   Search-as-you-type dropdown
   ========================================================================== */
.search {
  position: relative;
}
.search-suggest {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 300;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 70vh;
  overflow-y: auto;
  /* The home hero centers its text; anchor the dropdown left so suggestion
     names and the View-all row read left-aligned everywhere. */
  text-align: left;
}
.search-suggest__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-right: 0.75rem;
}
.search-suggest__link,
.search-suggest__all {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: var(--ink);
}
.search-suggest__link {
  flex: 1;
  min-width: 0;
}
.search-suggest__link:hover,
.search-suggest__link.is-active,
.search-suggest__all:hover,
.search-suggest__all.is-active {
  background: var(--paper);
  text-decoration: none;
}
.search-suggest__img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: var(--hairline);
}
.search-suggest__img--placeholder {
  display: inline-block;
}
.search-suggest__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.search-suggest__name {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-suggest__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  line-height: 1.2;
}
.search-suggest__amt {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}
/* Emphasize the price matching the current view mode (or retail when there is
   no wholesale option), mute the other. Same body-attribute mechanism as the
   price-tag component, so the mode toggle re-emphasizes instantly. */
body[data-view-mode="retail"] .search-suggest__amt--retail,
body[data-view-mode="wholesale"] .search-suggest__amt--wholesale,
.search-suggest__price--single .search-suggest__amt--retail {
  color: var(--ink);
  font-weight: 700;
  font-size: 0.82rem;
}
/* Active price stays on top in both modes (retail is first by default). */
body[data-view-mode="wholesale"] .search-suggest__amt--wholesale {
  order: -1;
}
.search-suggest__action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.search-suggest__buy {
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  line-height: 1;
}
.search-suggest__buy:disabled { opacity: 0.6; cursor: default; }
.ss-step {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.ss-step__btn {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}
.ss-step__btn:active { transform: translateY(1px); }
.ss-step__btn:disabled { opacity: 0.5; cursor: default; }
.ss-step__val {
  font-weight: 600;
  min-width: 1.5ch;
  text-align: center;
  font-size: 0.85rem;
}
@media (prefers-reduced-motion: reduce) {
  .ss-step__btn:active { transform: none; }
}
.search-suggest__empty {
  padding: 0.6rem 0.75rem;
  color: var(--muted);
  font-size: 0.875rem;
}
.search-suggest__all {
  border-top: 1px solid var(--hairline);
  font-weight: 600;
  font-size: 0.875rem;
  justify-content: space-between;
}
/* ==========================================================================
   Lazy image fade-in (JS adds .img-fade only to not-yet-loaded images)
   ========================================================================== */
.img-fade {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.img-fade.is-loaded {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .img-fade {
    opacity: 1;
    transition: none;
  }
}
/* ==========================================================================
   Home hero: one-time soft entrance on load
   ========================================================================== */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero > * {
  animation: hero-rise 0.5s ease both;
}
.hero > *:nth-child(2) {
  animation-delay: 0.06s;
}
.hero > *:nth-child(3) {
  animation-delay: 0.12s;
}
.hero > *:nth-child(4) {
  animation-delay: 0.18s;
}
@media (prefers-reduced-motion: reduce) {
  .hero > * {
    animation: none;
  }
}

/* Cart page (mobile): hide the retail/wholesale toggle bar and make the
   cart summary a sticky checkout bar (subtotal + delivery notice + button). */
@media (max-width: 699px) {
  body.page-cart .mobile-toggle-bar {
    display: none;
  }
  body.page-cart .cart-summary {
    position: fixed;
    left: 0;
    right: 0;
    top: auto; /* the base .cart-detail__aside sets top:8.5rem; a fixed bottom bar must not inherit it, or it stretches over the items */
    bottom: 0;
    z-index: 200;
    max-height: 72vh;
    overflow-y: auto;
    background: var(--paper);
    /* Flush bottom bar: reset the desktop card border/radius. */
    border: 0;
    border-top: 1px solid var(--hairline);
    border-radius: 0;
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    align-items: stretch;
    gap: 0.4rem;
  }
  body.page-cart .cart-summary .btn {
    width: 100%;
  }
  /* The item list scrolls on its own between the "Your cart" title and the
     fixed summary footer; cart-widgets.js sets its exact height (viewport minus
     the title area minus the footer). Without JS it falls back to page scroll
     with the padding-bottom below reserving room for the footer. */
  body.page-cart .cart-detail__main {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  body.page-cart {
    padding-bottom: 9rem;
  }
  body.page-cart .site-footer {
    display: none;
  }
  body.page-cart .cart-summary__row {
    justify-content: space-between;
  }
}

/* Minimal checkout header */
.checkout-header {
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
}
.checkout-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.75rem;
}
.checkout-header__title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.ico {
  width: 1.4em;
  height: 1.4em;
  flex-shrink: 0;
  vertical-align: -0.15em;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Checkout: card chrome, inline radios, order-items toggle */
.checkout-summary__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
}
.checkout-summary__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.checkout-summary__body[hidden] {
  display: none;
}
.link-disclosure {
  background: none;
  border: none;
  padding: 0;
  margin-top: 0.5rem;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}
.checkout-form.js .disclosure {
  display: none;
}
.checkout-form.js .disclosure.is-open {
  display: block;
}
textarea#delivery_address.form-input {
  min-height: 3.25rem;
}
.checkout-summary__chevron {
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.checkout-summary__toggle[aria-expanded="true"] .checkout-summary__chevron {
  transform: rotate(-135deg);
}
@media (prefers-reduced-motion: reduce) {
  .checkout-summary__chevron { transition: none; }
}
.radio-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.radio-group--inline .radio-option {
  /* Two per row that wrap cleanly (a lone item grows to fill its row), instead
     of cramming every option into one row and wrapping the labels. */
  flex: 1 1 calc(50% - 0.4rem);
  min-width: 8rem;
  align-items: flex-start;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
}
.radio-group--inline .radio-option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.radio-group--inline .radio-option:has(input:checked) {
  border-color: var(--ink);
  background: var(--paper);
}
.radio-group--inline .radio-option:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.radio-group--inline .radio-option:has(#payment_momo:checked) .ico {
  color: #FFCB05;
}
.radio-group--inline .radio-option:has(#payment_cod:checked) .ico {
  color: #1E8449;
}
.radio-option__text {
  display: flex;
  flex-direction: column;
}
.radio-option__title {
  font-weight: 600;
  font-size: 0.9375rem;
}
.radio-option__hint {
  font-size: 0.78rem;
  color: var(--muted);
}
.form-hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.4rem;
}
.checkout-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.checkout-actions .checkout-submit {
  width: 100%;
}

/* Mobile: single column, Fulfillment first, Order summary last, fixed button */
@media (max-width: 800px) {
  .checkout-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .checkout-col {
    display: contents;
  }
  .checkout-card--delivery { order: 1; }
  .checkout-card--payment { order: 2; }
  .checkout-card--summary { order: 3; }
  .checkout-timeline { order: 4; }
  .checkout-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: var(--paper);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    padding: 0.75rem 1rem;
  }
  body.page-checkout {
    padding-bottom: var(--pay-bar-h, 6rem);
  }
  body.page-checkout .wrap {
    padding-inline: 0.75rem;
  }
  .checkout-card--delivery,
  .checkout-card--payment,
  .checkout-card--summary {
    width: 100%;
  }
  .checkout-card--summary:has(.checkout-summary__toggle[aria-expanded="false"]) {
    border: none;
    background: none;
    padding: 0;
  }
  .checkout-card--summary:has(.checkout-summary__toggle[aria-expanded="false"]) .checkout-summary-title {
    text-decoration: underline;
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   Checkout follow-ups: collapse fix, conditional-field transitions, +250
   prefix, red remove control, mobile full-width cards
   ========================================================================== */

/* The collapsible summary uses [hidden]; .checkout-items sets display:flex,
   which would otherwise beat the UA [hidden] rule, so restate it here. */
.checkout-items[hidden] {
  display: none;
}

/* Google PlaceAutocompleteElement (new Places API) renders its own input inside
   a shadow DOM. Keep the host a plain container (no box) to avoid a box-in-box,
   and style the inner input via ::part to match .form-input. */
gmp-place-autocomplete {
  display: block;
  width: 100%;
  margin-bottom: 0.25rem;
  box-sizing: border-box;
}

gmp-place-autocomplete::part(input),
gmp-place-autocomplete::part(prediction-item-container) {
  box-sizing: border-box;
  width: 100%;
}

gmp-place-autocomplete::part(input) {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
}

/* Delivery location map (Leaflet) + its action row. */
.delivery-map {
  height: 220px;
  border-radius: var(--radius);
  margin: 0.5rem 0;
  z-index: 0;
}

.map-actions {
  margin: 0.25rem 0 0.75rem;
}

.delivery-divider {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0.75rem 0;
}

/* Conditional reveals (delivery zone/address, pickup note, phone helper).
   Gated on the JS flag so JS-off users always see the sections. */
.checkout-form.js [data-when-delivery],
.checkout-form.js [data-when-pickup],
.checkout-form.js [data-when-momo],
.checkout-form.js [data-when-cod] {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
}
.checkout-form.js [data-when-delivery].is-revealed,
.checkout-form.js [data-when-pickup].is-revealed,
.checkout-form.js [data-when-momo].is-revealed,
.checkout-form.js [data-when-cod].is-revealed {
  max-height: 32rem;
  opacity: 1;
  visibility: visible;
}
.checkout-form.js.is-ready [data-when-delivery],
.checkout-form.js.is-ready [data-when-pickup],
.checkout-form.js.is-ready [data-when-momo],
.checkout-form.js.is-ready [data-when-cod] {
  transition: max-height 0.28s ease, opacity 0.28s ease, visibility 0s linear 0.28s;
}
.checkout-form.js.is-ready [data-when-delivery].is-revealed,
.checkout-form.js.is-ready [data-when-pickup].is-revealed,
.checkout-form.js.is-ready [data-when-momo].is-revealed,
.checkout-form.js.is-ready [data-when-cod].is-revealed {
  transition: max-height 0.28s ease, opacity 0.28s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .checkout-form.js.is-ready [data-when-delivery],
  .checkout-form.js.is-ready [data-when-pickup],
  .checkout-form.js.is-ready [data-when-momo],
  .checkout-form.js.is-ready [data-when-cod],
  .checkout-form.js.is-ready [data-when-delivery].is-revealed,
  .checkout-form.js.is-ready [data-when-pickup].is-revealed,
  .checkout-form.js.is-ready [data-when-momo].is-revealed,
  .checkout-form.js.is-ready [data-when-cod].is-revealed {
    transition: none;
  }
}

/* +250 prefix on the MoMo phone field */
.input-prefix {
  display: flex;
  align-items: stretch;
}
.input-prefix__addon {
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  border: 1px solid var(--hairline);
  border-right: none;
  border-radius: var(--radius-control) 0 0 var(--radius-control);
  background: var(--paper);
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
}
.input-prefix__input {
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
}

/* Cart: remove control as a red x */
.link-remove--x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--card);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
}
.link-remove--x:hover,
.link-remove--x:focus-visible {
  background: #D32F2F;
  border-color: #D32F2F;
  color: #fff;
}


/* Button loading state (spinner before the label) */
.btn.is-loading {
  pointer-events: none;
  opacity: 0.85;
}
.btn.is-loading::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.15em;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::before { animation: none; }
}

/* Checkout: nested order-items label + back-to-cart link */
.checkout-items-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
}
.checkout-items-toggle[aria-expanded="true"] .checkout-summary__chevron {
  transform: rotate(-135deg);
}
.checkout-back {
  text-align: left;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}
.checkout-back a {
  color: var(--muted);
  text-decoration: none;
}
.checkout-back a:hover {
  color: var(--ink);
}

/* Async navigation: dim the content region while a swap is in flight */
[data-async-root][aria-busy="true"] {
  opacity: 0.55;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-async-root][aria-busy="true"] { transition: none; }
}

/* Payment processing screen */
.page-processing main.wrap {
  max-width: 30rem;
}
.processing {
  text-align: center;
  padding: 3rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.processing__spinner {
  width: 3rem;
  height: 3rem;
  border: 3px solid var(--hairline);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: processing-spin 0.8s linear infinite;
}
@keyframes processing-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .processing__spinner { animation: none; }
}
.processing__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
}
.processing__text {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 26rem;
}
.processing__amount {
  font-weight: 700;
  font-size: 1.1rem;
}
.processing__fallback {
  font-size: 0.85rem;
}
.processing__fallback a,
.momo-timeout-note a {
  color: var(--muted);
  text-decoration: underline;
}

/* Checkout OTP screen */
.otp { max-width: 26rem; margin: 2rem auto; text-align: center; }
.otp__title { font-size: 1.4rem; margin-bottom: 0.5rem; }
.otp__lead { color: var(--muted, #555); margin-bottom: 1.25rem; }
.otp__form { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; }
.otp__input {
  font-size: 1.6rem; letter-spacing: 0.4em; text-align: center;
  padding: 0.6rem 0.5rem; font-variant-numeric: tabular-nums;
}
.otp__countdown { color: var(--muted, #555); font-size: 0.95rem; margin: 0.25rem 0; }
.otp__expired { color: #b42318; font-size: 0.95rem; }
.otp__resend { margin-top: 1rem; }
.otp__back { margin-top: 1.25rem; }

/* Order tracking gate */
.track { max-width: 26rem; margin: 2rem auto; text-align: center; }
.track__title { font-size: 1.4rem; margin-bottom: 0.5rem; }
.track__lead { color: var(--muted, #555); margin-bottom: 1.25rem; }
.track__form { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; text-align: left; }
.track__submit { margin-top: 0.5rem; }
.track__back { margin-top: 1.25rem; }

/* SP2b: variant card name can carry a unit label; keep it to two lines and
   reserve that height so prices and Buy buttons align across a grid row. */
.product-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* SP2b: product-page variant row add control mirrors the card. */
.variant-row .add-form--row .btn {
  width: auto;
  padding: 0.5rem 1.25rem;
}
.variant-row .add-form--row .qty-stepper {
  width: auto;
  margin: 0.4rem 0 0;
}

/* ==========================================================================
   Tier 0 primitives (card, buttons, badges, deal price)
   ========================================================================== */

.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--hairline);
  color: var(--ink);
  border-radius: var(--radius-control);
  padding: 0.55rem 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.btn-secondary:hover {
  border-color: var(--ink);
  text-decoration: none;
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: transparent;
  border: 1px solid #D32F2F;
  color: #D32F2F;
  border-radius: var(--radius-control);
  padding: 0.55rem 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-danger:hover {
  background: #D32F2F;
  color: #fff;
  text-decoration: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.badge--accent { background: var(--accent); color: var(--ink); }
.badge--muted  { background: var(--hairline); color: var(--muted); }
.badge--pending { background: #FFF4CC; color: #8A6D00; }
.badge--success { background: #E8F5E9; color: #2E7D32; }
.badge--info    { background: #E3F2FD; color: #1565C0; }
.badge--danger  { background: #FDECEA; color: #C62828; }

/* Deal price styling (consumed by price-tag partial on cards, product page, deals) */
.deal-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.15;
}
.price.price--deal .role { color: #C62828; }
/* The deal price is a focal point: a distinct sale red at full prominence
   (the base .price is muted + 0.75 opacity, and .price--deal is intentionally
   excluded from the retail/wholesale "active" selectors above). Cards bump the
   size to 1.12rem via the .product-card rule already defined. */
.price.price--deal { color: #C62828; opacity: 1; font-size: 1.15rem; }
/* Keep the RWF currency label in its default muted color, not the sale red. */
.price.price--deal .price__cur { color: var(--muted); }
/* Deal comparison: a tidy vertical block. Deal price on top (prominent); the
   struck original + "Save X%" sit quietly beneath it. No overlap; wraps cleanly. */
.deal-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
}
/* Cross the old price out with a thin diagonal X rather than a flat line. */
.price-was {
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: none;
  padding: 0 0.12em;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(to top right, transparent calc(50% - 0.6px), currentColor calc(50% - 0.6px), currentColor calc(50% + 0.6px), transparent calc(50% + 0.6px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), currentColor calc(50% - 0.6px), currentColor calc(50% + 0.6px), transparent calc(50% + 0.6px));
}
/* Product card: the deal badge sits in the top-right corner of the card media,
   opposite the top-left stock/wholesale ribbons; the inline price badge is hidden. */
.product-card__deal-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: var(--accent);
  color: var(--ink);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  padding: 0.18em 0.42em;
  border-radius: 6px;
}
.product-card .deal-badge { display: none; }
/* The savings percent sits alongside the label inside the deal badge. */
.deal-badge__pct { font-size: 0.85em; font-weight: 800; opacity: 0.9; margin-left: 0.1em; }
.price-tag--has-deal { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; }

/* ==========================================================================
   Tier 0 primitives (empty state, breadcrumbs, forms, focus)
   ========================================================================== */

.empty-state, .empty {
  max-width: 28rem;
  margin: 2.5rem auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.empty-state__icon { color: var(--muted); opacity: 0.7; }
.empty-state__title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.empty-state__text { color: var(--muted); }
.empty-state .btn, .empty-state .btn-primary { margin-top: 0.5rem; }

/* Popular products shown under an empty category so the page is never a
   dead end. */
.category-suggested {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}
.category-suggested .section-title {
  margin-bottom: 1.25rem;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
  padding-block: 1rem 0.5rem;
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--ink); text-decoration: none; }
.breadcrumbs > * + *::before { content: "/"; margin-right: 0.4rem; color: var(--hairline); }
.breadcrumbs [aria-current="page"] { color: var(--ink); }

.form-group { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.form-group > label { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.form-help { font-size: 0.8rem; color: var(--muted); }

.checkbox-field { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; }
.checkbox-field input[type="checkbox"] { margin-top: 0.15rem; width: 1rem; height: 1rem; flex-shrink: 0; }

select.form-input, input[type="number"].form-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--card);
  color: var(--ink);
}
select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238E8E88' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

:where(.form-input, .btn, .btn-primary, .btn-secondary, .btn-danger, .btn-ghost, select.form-input, input[type="number"].form-input):focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.35);
}

/* Cookie consent banner (native; replaces Tailwind version) */
.consent-banner {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--toggle-bar-h) + env(safe-area-inset-bottom, 0px));
  z-index: 300;
  display: flex;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  pointer-events: none;
}
.consent-banner.is-hidden { display: none; }
.consent-banner__card {
  pointer-events: auto;
  width: 100%;
  max-width: 560px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}
.consent-banner__text { flex: 1; font-size: 0.78rem; line-height: 1.4; color: var(--muted); }
.consent-banner__actions { display: flex; gap: 0.4rem; flex: 0 0 auto; }
.consent-banner__actions .btn-primary, .consent-banner__actions .btn-ghost {
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  flex: 0 0 auto;
  width: auto;
}

@media (min-width: 700px) {
  .consent-banner { bottom: 0; }
}

/* Prime landing */
.prime-landing { padding-bottom: 3rem; }
.prime-hero { padding-block: 3rem 1.5rem; }
.prime-benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-block: 1.5rem;
}
.prime-benefits h3 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 0.25rem; }
.prime-benefits p { color: var(--muted); font-size: 0.9rem; }
.prime-cta { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
.prime-plans { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.prime-plan__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.prime-plan__price { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; margin-block: 0.5rem 1rem; }
.prime-status { border-left: 4px solid var(--accent); }

@media (min-width: 700px) {
  .prime-benefits { grid-template-columns: repeat(3, 1fr); }
  .prime-plans { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
}

/* Account shell */
.account-shell { display: grid; grid-template-columns: 1fr; gap: 1.25rem; padding-block: 1.5rem; }
.account-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.account-nav__link.is-active { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.account-nav__logout { margin-left: auto; }
.account-panel { display: flex; flex-direction: column; gap: 0.75rem; }
.account-panel .form-group { flex-direction: row; justify-content: space-between; gap: 1rem; margin-bottom: 0; border-bottom: 1px solid var(--hairline); padding-bottom: 0.5rem; }
.account-panel .form-group > label { color: var(--muted); font-weight: 600; }
.account-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

@media (min-width: 800px) {
  .account-shell { grid-template-columns: 220px 1fr; align-items: start; }
  .account-nav { flex-direction: column; align-items: stretch; }
  .account-nav__logout { margin-left: 0; margin-top: 0.5rem; }
  /* On desktop the panel is a wide 1fr column; cap its content to a comfortable
     reading width and let its buttons size to their content instead of the base
     .btn width:100% (which otherwise stretches each action button across the
     whole panel). Mobile keeps the full-width CTA buttons. */
  .account-panel { max-width: 640px; }
  .account-panel .btn { width: auto; }
}

/* Account lists */
.order-list, .address-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.order-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.order-row__num { font-weight: 700; }
.order-row__date { color: var(--muted); font-size: 0.9rem; }
.order-row__total { margin-left: auto; font-weight: 700; }
.rewards-balances { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
.rewards-card { display: flex; flex-direction: column; gap: 0.25rem; }
.rewards-card__label { color: var(--muted); font-size: 0.85rem; }
.rewards-card__value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--accent); }
.rewards-redeem { margin-bottom: 1.5rem; }
.reward-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--hairline); font-size: 0.9rem; }
.address-item { display: flex; flex-direction: column; gap: 0.4rem; }
.address-item__label { font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
.address-item__text { color: var(--muted); }
.address-item__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }

@media (min-width: 700px) {
  .rewards-balances { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Masonry (JS-enhanced product grid)
   ========================================================================== */
/* masonry.js adds .is-masonry to each product grid and sets a grid-row-end span
   per card. Tiny auto rows + zero row-gap pack cards tightly; align-items:start
   keeps each card at its content height so the extra spanned rows read as the
   vertical gap. Column-gap stays 1rem from .product-grid. Falls back to the
   uniform grid when JS is off. */
.product-grid.is-masonry {
  grid-auto-rows: 4px;
  row-gap: 0;
  align-items: start;
}
/* Natural-aspect images so card heights vary (the point of masonry). Applied
   only when JS is active; without it the fixed 4:3 crop keeps the grid tidy. */
.masonry-enhanced .product-card__img {
  /* Images are uniform squares now, so keep the reserved 1:1 box in masonry mode
     too. This stops the card from growing when the image finishes loading. */
  aspect-ratio: 1 / 1;
}

/* ==========================================================================
   Featured strips
   ========================================================================== */
.featured-strip { display: flex; gap: var(--space-3, 12px); overflow-x: auto; padding-bottom: var(--space-2, 8px); }
.featured-card { flex: 0 0 auto; width: 200px; border-radius: var(--radius, 12px); background: var(--surface, #fff); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.08)); text-decoration: none; color: inherit; overflow: hidden; }
.featured-card__img { width: 100%; height: 120px; object-fit: cover; display: block; }
.featured-card__body { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2, 8px); }
.featured-card__title { font-weight: 600; }
.featured-card__sub { font-size: .85em; color: var(--muted, #667); }
.featured-card__cta { font-size: .85em; font-weight: 600; color: var(--brand, #0a7); margin-top: 4px; }

/* ==========================================================================
   Ad slots
   ========================================================================== */
.ad-slot { display: flex; align-items: center; justify-content: center; width: 100%; }
.ad-slot__link { display: inline-block; line-height: 0; }
.ad-slot__img { max-width: 100%; height: auto; display: block; }
/* HTML creatives must fill the slot. Without this the .ad-slot__html flex item
   shrinks to its content width, and a creative that derives its height from its
   width (aspect-ratio) then collapses to a sliver. */
.ad-slot__html { width: 100%; }

/* ==========================================================================
   Category nav bar
   ========================================================================== */
.category-nav { background: #fff; border-bottom: 1px solid var(--hairline); }
/* The row must NOT be a scroll container: overflow-x:auto forces overflow-y to
   clip too, which would cut off the dropdown that drops below the row. It wraps
   to lines instead (the top-level category set is small), so the panels escape
   freely and paint above the page content. */
.category-nav__viewport { position: relative; max-width: var(--wrap-max); margin-inline: auto; }
/* Single row that scrolls horizontally (swipe on touch, edge buttons on desktop)
   instead of wrapping to several lines. Scrollbar hidden; the open dropdown is
   repositioned to fixed by menus.js so this scroll container never clips it. */
.category-nav__row {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0.25rem;
  padding: 0.25rem 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.category-nav__row::-webkit-scrollbar { display: none; }
.category-nav__scroll {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;
  width: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 0;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.category-nav__scroll svg { width: 20px; height: 20px; }
.category-nav__scroll--prev { left: 0; justify-content: flex-start; padding-left: 0.35rem; box-shadow: 14px 0 12px -8px rgba(11, 11, 11, 0.18); }
.category-nav__scroll--next { right: 0; justify-content: flex-end; padding-right: 0.35rem; box-shadow: -14px 0 12px -8px rgba(11, 11, 11, 0.18); }
.category-nav__item { flex: 0 0 auto; position: relative; }
.category-nav__summary, .category-nav__toplink { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.5rem 0.6rem; white-space: nowrap; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.category-nav__summary::-webkit-details-marker { display: none; }
/* Flex column that WRAPS into extra columns once it exceeds max-height, so a
   category with many subcategories shows several short columns instead of one
   long list. Few items => a single column. */
.category-nav__panel { position: absolute; left: 0; top: 100%; z-index: 120; min-width: 200px; max-width: min(90vw, 640px); max-height: 17rem; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius, 12px); box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.14)); padding: 0.35rem; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 0 0.25rem; }
.category-nav__link { display: block; width: 190px; padding: 0.5rem 0.6rem; color: var(--ink); text-decoration: none; border-radius: 8px; }
.category-nav__link:hover { background: var(--surface-2, #f4f5f6); }
.category-nav__caret { flex: 0 0 auto; }
.category-nav__item[open] > .category-nav__summary .category-nav__caret { transform: rotate(180deg); }
/* category-nav-more.js hides overflowed items with [hidden]; a plain author
   rule guarantees it wins over the flex item display so they leave the rail
   (otherwise they show in BOTH the rail and the More menu). */
.category-nav__item[hidden] { display: none !important; }

/* Mega dropdown: subcategory groups (heading + grandchild leaves). A full-width
   "All <dept>" header sits above the groups, which wrap into short columns. */
.category-nav__panel--mega { flex-wrap: nowrap; max-width: min(96vw, 960px); max-height: min(80vh, 34rem); overflow-y: auto; overflow-x: auto; padding: 0.5rem; gap: 0; }
.category-nav__mega-all { display: block; font-weight: 700; font-size: 0.9rem; color: var(--ink); text-decoration: none; padding: 0.5rem 0.6rem; margin-bottom: 0.35rem; border-bottom: 1px solid var(--hairline); }
.category-nav__mega-all:hover { color: var(--accent, #0071e3); }
/* Taller columns pack more groups each, so the panel needs fewer columns and
   stays narrow enough to avoid a horizontal scroll on big departments. */
.category-nav__groups { display: flex; flex-flow: column wrap; align-content: flex-start; max-height: 30rem; gap: 0 0.5rem; }
.category-nav__group { display: flex; flex-direction: column; width: 180px; margin-bottom: 0.7rem; }
.category-nav__group-title { font-weight: 700; font-size: 0.82rem; color: var(--ink); text-decoration: none; padding: 0.3rem 0.6rem; }
.category-nav__group-title:hover { color: var(--accent, #0071e3); }
.category-nav__panel--mega .category-nav__link { width: 180px; font-size: 0.85rem; color: var(--muted); padding: 0.28rem 0.6rem; }
.category-nav__panel--mega .category-nav__link:hover { color: var(--ink); background: var(--surface-2, #f4f5f6); }
/* "More" dropdown: overflowed departments, each a heading + its subcategories. */
.category-nav__panel--more { flex-wrap: wrap; flex-flow: column wrap; align-content: flex-start; max-height: 30rem; max-width: min(92vw, 660px); overflow: auto; gap: 0 0.5rem; }
.category-nav__more-group { display: flex; flex-direction: column; width: 190px; margin-bottom: 0.6rem; }
.category-nav__more-head { font-weight: 700; font-size: 0.82rem; color: var(--ink); text-decoration: none; padding: 0.3rem 0.6rem; }
.category-nav__more-head:hover { color: var(--accent, #0071e3); }
.category-nav__panel--more .category-nav__link { width: 190px; font-size: 0.85rem; color: var(--muted); padding: 0.28rem 0.6rem; }
.category-nav__panel--more .category-nav__link:hover { color: var(--ink); background: var(--surface-2, #f4f5f6); }

/* ==========================================================================
   Header three-zone layout + cluster + dropdowns
   ========================================================================== */
.header-search { flex: 1 1 auto; min-width: 0; }
.header-cluster { flex: 0 0 auto; display: flex; align-items: center; gap: 0.35rem; }
.header-menu { position: relative; }
.header-menu__button { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.45rem 0.55rem; border-radius: 8px; color: var(--ink); }
.header-menu__button::-webkit-details-marker { display: none; }
.header-menu__button:hover { background: var(--surface-2, #f4f5f6); }
.header-menu__panel { position: absolute; right: 0; top: 100%; z-index: 60; min-width: 190px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius, 12px); box-shadow: var(--shadow-sm, 0 4px 14px rgba(0,0,0,.1)); padding: 0.35rem; display: flex; flex-direction: column; }
.header-menu__link { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.6rem; color: var(--ink); text-decoration: none; border-radius: 8px; background: none; border: 0; width: 100%; text-align: left; font: inherit; cursor: pointer; }
.header-menu__link:hover { background: var(--surface-2, #f4f5f6); }
@media (max-width: 640px) {
  .header-menu__label { display: none; }
}

/* Phone hamburger (left of the logo): holds the category tree + help links.
   Hidden on desktop. */
.header-nav-menu { display: none; }
.header-nav-menu__panel { min-width: 220px; }
.header-nav-menu__heading {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  padding: 0.45rem 0.6rem 0.15rem;
  margin: 0;
}
.header-nav-menu__heading + * { margin-top: 0; }
.header-nav-menu__panel > .header-nav-menu__heading:not(:first-child) {
  margin-top: 0.25rem;
  border-top: 1px solid var(--hairline);
  padding-top: 0.5rem;
}
/* Collapsible category groups inside the hamburger. */
.header-nav-menu__cat { width: 100%; }
.header-nav-menu__cat-summary { list-style: none; justify-content: space-between; }
.header-nav-menu__cat-summary::-webkit-details-marker { display: none; }
.header-nav-menu__caret { transition: transform 0.15s; flex: 0 0 auto; color: var(--muted); }
.header-nav-menu__cat[open] > .header-nav-menu__cat-summary .header-nav-menu__caret { transform: rotate(180deg); }
.header-nav-menu__cat-children { display: flex; flex-direction: column; padding-left: 0.5rem; }
.header-nav-menu__sublink { font-size: 0.9rem; color: var(--muted); }
.header-nav-menu__sublink:hover { color: var(--ink); }

@media (max-width: 699px) {
  /* Two-row header: row 1 is hamburger + logo + account + cart, row 2 is a
     full-width search. flex-wrap drops the search onto its own line. */
  .header-row { flex-wrap: wrap; row-gap: 0.5rem; }
  .header-nav-menu { display: block; order: 0; }
  .brand { order: 1; }
  .header-cluster { order: 2; margin-left: auto; }
  .header-search { order: 3; flex: 1 1 100%; min-width: 0; }
  /* Help moves into the hamburger; the toggle lives in the bottom bar. */
  .header-cluster [data-help-menu] { display: none; }
  /* Categories move into the hamburger; hide the horizontal bar. */
  .category-nav { display: none; }
  /* Anchor the hamburger panel to the left edge under its button. */
  .header-nav-menu__panel { left: 0; right: auto; width: min(88vw, 340px); max-height: 78vh; overflow-y: auto; }
}

/* Home hero slideshow (SP3) */
.hero-slideshow {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  background: var(--paper);
}
.hero-slideshow__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1248 / 357;
  min-height: 120px;
}
.hero-slideshow__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.hero-slideshow__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hero-slideshow__link,
.hero-slideshow__slide picture,
.hero-slideshow__html {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-slideshow__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-slideshow__nav,
.hero-slideshow__dots {
  display: none;
}
.hero-slideshow.is-enhanced .hero-slideshow__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--transition-med) ease;
}
.hero-slideshow.is-enhanced .hero-slideshow__nav--prev { left: 0.75rem; }
.hero-slideshow.is-enhanced .hero-slideshow__nav--next { right: 0.75rem; }
/* Fine-pointer (desktop): reveal the nav controls only while hovering the
   slideshow. Touch keeps them visible (there is no hover), alongside the dots. */
@media (hover: hover) and (pointer: fine) {
  .hero-slideshow.is-enhanced .hero-slideshow__nav {
    opacity: 0;
    pointer-events: none;
  }
  .hero-slideshow.is-enhanced:hover .hero-slideshow__nav {
    opacity: 1;
    pointer-events: auto;
  }
}
.hero-slideshow.is-enhanced .hero-slideshow__dots {
  position: absolute;
  bottom: 0.75rem;
  left: 0;
  right: 0;
  display: flex;
  gap: 0.4rem;
  justify-content: center;
}
.hero-slideshow__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}
.hero-slideshow__dot[aria-current="true"] { background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .hero-slideshow__slide { transition: none; }
}

/* Phone hero: Jumia-style peek carousel. Slides become inline rounded cards in
   a horizontal scroll-snap track with the neighbours peeking at each edge;
   swipe to move, dots below, no arrows. (Desktop keeps the fade slideshow.) */
@media (max-width: 699px) {
  .hero-slideshow {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    /* Break out of the .wrap 1.25rem side padding so the banner is as wide as
       Jumia's (nearly full screen, with a small peek). */
    margin-inline: -1.25rem;
  }
  .hero-slideshow__viewport {
    display: flex;
    gap: 0.4rem;
    aspect-ratio: auto;
    min-height: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: 2%;
  }
  .hero-slideshow__viewport::-webkit-scrollbar { display: none; }
  .hero-slideshow__slide {
    position: static;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    transition: none;
    flex: 0 0 96%;
    scroll-snap-align: center;
    aspect-ratio: 2 / 1;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }
  .hero-slideshow__img { border-radius: 14px; }
  /* No arrows on touch; dots sit below the track on the page background. */
  .hero-slideshow.is-enhanced .hero-slideshow__nav { display: none; }
  .hero-slideshow.is-enhanced .hero-slideshow__dots,
  .hero-slideshow__dots {
    position: static;
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    margin-top: 0.6rem;
  }
  .hero-slideshow__dot {
    width: 6px;
    height: 6px;
    background: rgba(11, 11, 11, 0.22);
  }
  .hero-slideshow__dot[aria-current="true"] {
    width: 18px;
    background: var(--ink);
  }
}

/* Home per-category product rails (SP4) */
/* margin-block only: `margin: 1.75rem 0` would reset margin-left/right to 0 and
   clobber .section--full's negative side margins, breaking the full-bleed
   breakout and pushing the rail's centered inner content to the right. */
.category-rail { margin-block: 1.75rem; }
.category-rail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}
.category-rail__seeall {
  flex: 0 0 auto;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
}
.category-rail__seeall:hover { text-decoration: underline; }
.category-rail__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  /* Free scroll (no scroll-snap): snapping tugged the rail back/forth on rest. */
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.category-rail__track > .product-card {
  flex: 0 0 200px;
}
@media (max-width: 640px) {
  .category-rail__track > .product-card { flex: 0 0 168px; }
}
/* Lazy-load trigger at the rail's end. Needs a non-zero width or the
   IntersectionObserver (which measures area) never fires. */
.rail-sentinel { flex: 0 0 1px; align-self: stretch; pointer-events: none; }
/* Shimmer placeholders shown at the end of a rail while the next page loads,
   sized to match the rail's cards (square media). */
.category-rail__track > .skeleton-card {
  flex: 0 0 200px;
  align-self: stretch;
}
.category-rail__track > .skeleton-card .skeleton-card__img { aspect-ratio: 1 / 1; }
@media (max-width: 640px) {
  .category-rail__track > .skeleton-card { flex: 0 0 168px; }
}

/* Featured categories as rounded images (SP4) */
.category-circle-strip {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.category-circle {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 116px;
  text-decoration: none;
  color: var(--ink);
}
.category-circle__img {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  object-fit: cover;
  background: var(--surface-2, #f4f5f6);
  display: grid;
  place-items: center;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--muted);
  transition: border-color var(--transition-fast, 0.15s);
}
.category-circle:hover .category-circle__img {
  border-color: var(--ink);
}
.category-circle__label {
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  width: 100%;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}

/* Normalize the generic featured strips to scroll-snap like the rails. */
.featured-strip { scroll-snap-type: x proximity; }
.featured-strip > .featured-card { scroll-snap-align: start; }

/* Full-width shop-by-category strip: fills the main content width (SP4b). */
.category-circle-strip--full { width: 100%; }

/* The leaderboard is a full-viewport-width strip whose background defaults to
   white and is set inline per ad to the creative's prominent color, so the area
   outside the boxed ad blends with it. The boxed ad column (.leaderboard-wrap)
   caps at --wrap-max and keeps the .wrap inline gutter so the banner's left and
   right edges line up exactly with the hero and the sections below it. */
.leaderboard-strip { width: 100%; background: #fff; }
.leaderboard-wrap { padding-block: 0; margin-block: 0; }
/* Always full-width with proportionate height: aspect-ratio scales the banner to
   the column width AND reserves the correct height (no layout shift, no mobile
   letterboxing). !important overrides the inline min-height the ad-slot partial
   emits per placement for layout-shift reservation. */
.ad-slot--header_leaderboard { min-height: 0 !important; }
.ad-slot--header_leaderboard .ad-slot__link {
  display: block;
  width: 100%;
  aspect-ratio: 1170 / 60;
}
/* The mobile leaderboard creative (animated GIF) is a taller 8:1 banner. */
@media (max-width: 699px) {
  .ad-slot--header_leaderboard .ad-slot__link { aspect-ratio: 1152 / 144; }
}
.ad-slot--header_leaderboard picture { display: block; width: 100%; height: 100%; }
.ad-slot--header_leaderboard .ad-slot__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Horizontal rails: subtle scrollbar (visible on hover) + hover scroll buttons
   ========================================================================== */
/* Scrollbar is hidden until the rail is hovered, then fades in subtly. The
   scrollbar gutter stays reserved so nothing shifts on hover. */
.category-rail__track,
.category-circle-strip,
.featured-strip,
.deals-rail__track {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color var(--transition-med) ease;
}
.category-rail__track:hover,
.category-circle-strip:hover,
.featured-strip:hover,
.deals-rail__track:hover {
  scrollbar-color: rgba(11, 11, 11, 0.28) transparent;
}
.category-rail__track::-webkit-scrollbar,
.category-circle-strip::-webkit-scrollbar,
.featured-strip::-webkit-scrollbar,
.deals-rail__track::-webkit-scrollbar {
  height: 8px;
}
.category-rail__track::-webkit-scrollbar-thumb,
.category-circle-strip::-webkit-scrollbar-thumb,
.featured-strip::-webkit-scrollbar-thumb,
.deals-rail__track::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  transition: background var(--transition-med) ease;
}
.category-rail__track:hover::-webkit-scrollbar-thumb,
.category-circle-strip:hover::-webkit-scrollbar-thumb,
.featured-strip:hover::-webkit-scrollbar-thumb,
.deals-rail__track:hover::-webkit-scrollbar-thumb {
  background: rgba(11, 11, 11, 0.28);
}

/* rails.js wraps each scrollable track in .rail-scroller and injects the two
   buttons. They surface only on hover, and only on fine-pointer devices. */
.rail-scroller { position: relative; }
/* Scope the transform under .rail-scroller (two classes) so it outranks the
   global `button:active { transform: translateY(1px) }` and the button does not
   drop vertically when pressed, matching the hero slideshow nav. */
.rail-scroller .rail-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: opacity var(--transition-med) ease;
  pointer-events: none;
}
.rail-btn--prev { left: 4px; }
.rail-btn--next { right: 4px; }
.rail-btn svg { width: 20px; height: 20px; }
.rail-btn[disabled] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .rail-scroller:hover .rail-btn:not([disabled]) {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ==========================================================================
   Theme: transparent main content area
   ========================================================================== */
/* When a theme opts into a transparent main, the theme background shows through
   the main content area across every storefront page. Each content block then
   carries its own white card so it stays readable, with the theme visible in
   the gutters and the gaps between cards:
     - full-bleed grid pages: whiten the centered inner column;
     - every other page: whiten each direct content child of main.
   Blocks that already own their background (value strip, prime band) and the
   full-bleed hero/section wrappers are excluded. */
/* Transactional / focused pages stay OFF the themed background image: they
   render on the plain neutral background so page titles and small links are
   always legible and the flow is uncluttered. `.no-theme-bg` is set by the
   layout for every minimal-chrome page (checkout, MoMo processing/split, OTP,
   order tracking) and the bare Prime page; cart and the order-confirmation page
   opt in by their own body class. `body.<class>` outranks the theme's injected
   `body{...}` rule (0,1,1 > 0,0,1). */
body.no-theme-bg,
body.page-cart,
body.page-order,
body.page-auth {
  background-image: none;
  background-color: var(--paper);
}
.theme-main-transparent main { background: transparent; }
.theme-main-transparent .section--full__inner,
.theme-main-transparent main > *:not(.section--full):not(.value-strip):not(.prime-band):not(.hero-slideshow):not(.hero):not(.product-detail):not(.checkout-form):not(.checkout-nudge):not([data-cart-page]):not(.prime2-sticky):not(.product-buy-bar):not(.prime2__topbar):not(.prime2__back) {
  background: #fff;
  border-radius: var(--radius);
  padding-block: 1rem;
  padding-inline: 1.25rem;
  margin-block: 0.75rem;
}
/* The full-width blocks (hero, value strip, prime band) fill the column with
   their own backgrounds, so they get no white card behind them. */
.theme-main-transparent .section--full__inner--wide {
  background: transparent;
  border-radius: 0;
  padding-block: 0;
  padding-inline: 0;
}

/* ==========================================================================
   Phone: full-bleed home strips (category rails, Featured, Shop by category)
   Break out of the .wrap side padding so cards scroll edge to edge, with the
   heading + first card at the SAME 1.25rem gutter as the Uwase Prime card
   (previously doubled to ~40px by the wrap padding plus the transparent-theme
   white-card padding). Placed after the theme rules so it wins on source order.
   ========================================================================== */
@media (max-width: 699px) {
  /* Scrolling strips break out to the screen edges. The New in store grid is
     NOT broken out (it keeps a side margin) but shares the same 1.25rem gutter. */
  .category-rail,
  [data-featured-strip],
  .deals-rail {
    margin-inline: -1.25rem;
  }
  /* Drop the transparent-theme white card and its padding so content sits at the
     single 1.25rem gutter (matching the Uwase Prime card). */
  .category-rail > .section--full__inner,
  [data-featured-strip] > .section--full__inner,
  [data-catalog-root] > .section--full__inner,
  .deals-rail > .section--full__inner {
    background: transparent;
    border-radius: 0;
    padding-inline: 0;
    padding-block: 0;
    margin-block: 0;
  }
  /* Headings align to the shared gutter. */
  .category-rail__head,
  .deals-rail__head,
  [data-featured-strip] .section-title {
    padding-inline: 1.25rem;
  }
  /* Strips: first item at the gutter, cards scroll to the screen edge, no snap tug. */
  .category-rail__track,
  .deals-rail__track,
  .featured-strip,
  .category-circle-strip {
    padding-inline: 1.25rem;
    scroll-snap-type: none;
  }
}

/* Alpine.js: hide elements gated by x-show/x-cloak until Alpine has initialized,
   preventing a flash of visible content (e.g. reply forms) on page load. */
[x-cloak] {
  display: none !important;
}

/* ==========================================================================
   Feedback: ratings summary, rating widget, comment threads (product page)
   Reuses the storefront tokens; one local token (--fb-star) is a slightly
   deeper gold than --accent so stars stay legible on the white card.
   ========================================================================== */

.feedback {
  grid-area: feedback;
  --fb-star: #F5A623;
  /* Its own white card (like .product-description/.product-related) so the
     Reviews section stays readable over a themed background image. */
  margin: 0;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.feedback__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.25rem;
}

/* Summary + rating widget sit side by side on wide screens, stack on mobile. */
.feedback__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
  margin-bottom: 2.25rem;
}

@media (max-width: 720px) {
  .feedback__top {
    grid-template-columns: 1fr;
  }
}

/* --- Ratings summary card ------------------------------------------------ */
.feedback-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.75rem;
}

.feedback-summary__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.feedback-summary__avg {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.feedback-summary__stars {
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: var(--fb-star);
}

.feedback-summary__count {
  font-size: 0.8rem;
  color: var(--muted);
}

/* Distribution bars: fills the remaining row width. */
.feedback-summary__bars {
  list-style: none;
  flex: 1 1 260px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.feedback-summary__bars li {
  display: grid;
  grid-template-columns: 1.2rem 1fr 1.6rem;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.feedback-summary__bars li > span:first-child {
  text-align: right;
  font-weight: 600;
  color: var(--ink);
}

.feedback-summary__bars li > span:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.feedback-summary .bar {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--tile);
  overflow: hidden;
}

.feedback-summary .bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--fb-star);
  transition: width var(--transition-med) ease;
}

/* --- Rating widget ------------------------------------------------------- */
.rating-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  background: var(--tile);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
}

.rating-form__stars {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
}

.rating-form__stars legend {
  width: 100%;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.6rem;
  padding: 0;
}

.rating-form__star {
  background: none;
  border: 0;
  padding: 0 0.05rem;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--fb-star);
  cursor: pointer;
  transition: transform var(--transition-fast) ease;
}

.rating-form__star:hover {
  transform: scale(1.12);
}

.rating-form__star:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.4);
}

/* Quiet the submit until a star is chosen (feedback.js toggles disabled). */
.rating-form .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: transparent;
  color: var(--ink);
}

.feedback-status {
  width: 100%;
  background: #E8F5E9;
  border: 1px solid #A5D6A7;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.85rem;
  font-size: 0.85rem;
  color: var(--save);
}

.review-stars {
  display: block;
  color: var(--fb-star);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  margin: 0.15rem 0 0.45rem;
}

/* --- Comments ------------------------------------------------------------ */
.comments__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.25rem;
}

/* The reviews list is its own card, a sibling to the summary and review-form
   cards above it (three cards under the Reviews heading). */
.comments--card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 0.25rem 1.5rem;
  margin-bottom: 2rem;
}

.comments__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Top-level reviews are split by a hairline; the first review has none. */
.comment {
  padding: 1.15rem 0;
  border-top: 1px solid var(--hairline);
}

.comments__list > .comment:first-child {
  border-top: 0;
}

/* Replies read as nested: a left accent rule and no top hairline. */
.comment--reply {
  border-top: 0;
  border-left: 2px solid var(--hairline);
  padding: 0.75rem 0 0.75rem 1rem;
  margin-top: 0.5rem;
}

.comment__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.comment__meta strong {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

.comment__badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--tile);
  color: var(--muted);
}

.comment__badge--staff {
  background: var(--ink);
  color: var(--accent);
}

.comment__badge--verified {
  background: #E8F5E9;
  color: var(--save);
}

.comment__body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

.comment__media {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.comment__media img,
.comment__media video {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
}

/* Report + Reply are quiet inline actions, not buttons. */
.comment__report {
  display: inline;
}

.comment .link {
  background: none;
  border: 0;
  padding: 0;
  margin-top: 0.5rem;
  margin-right: 1rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.comment .link:hover {
  color: var(--ink);
}

.comment__reply {
  display: inline;
}

.comments__empty {
  list-style: none;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.5rem 0 1.5rem;
}

/* --- Comment forms ------------------------------------------------------- */
.comment-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}

.comment-form input[type="text"],
.comment-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--card);
  color: var(--ink);
}

.comment-form textarea {
  resize: vertical;
  min-height: 90px;
}

.comment-form input[type="text"]:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.35);
}

.comment-form input[type="file"] {
  font-size: 0.8rem;
  color: var(--muted);
  max-width: 100%;
}

.comment-form .btn {
  align-self: flex-start;
}

/* A reply form is visually tucked under its parent comment. */
.comment-form--reply {
  margin-top: 0.75rem;
  background: var(--tile);
  border-left: 2px solid var(--accent);
}

/* Collapsed by default; feedback.js toggles the hidden attribute. The explicit
   rule is needed because .comment-form sets display:flex, which would
   otherwise override the browser default for [hidden]. */
.comment-form[hidden] {
  display: none;
}

/* Review form: an inviting prompt and styled text inputs (the star widget and
   submit are already styled by .rating-form; the text fields were not). */
.review-form__intro {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
}

/* Review modal: opened by feedback.js after a star is chosen. Lives inside the
   form so its fields submit together; fixed overlay so it escapes the card. */
.review-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(11, 11, 11, 0.5);
}

.review-modal[hidden] {
  display: none;
}

.review-modal__card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden; /* setting overflow-y alone would force x to auto too */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.75rem 1.5rem 1.5rem;
}

.review-modal__close {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  background: none;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.review-modal__close:hover {
  color: var(--ink);
}

.review-modal__hint {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.review-modal__lead {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* The modal's inputs reuse the .review-form input styles (the form still wraps
   them). Buttons sit inline: skip left, primary action right. */
.review-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.25rem;
}

/* Two balanced buttons filling the row: skip left, primary right. They share
   the width so a long label can never push the primary off the card. */
.review-modal__actions .btn {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}

/* Interactive star row in the modal header (adjust the rating in place). */
.review-modal__stars {
  display: flex;
  gap: 0.1rem;
  font-size: 1.9rem;
  line-height: 1;
}

.review-modal__star {
  background: none;
  border: 0;
  padding: 0 0.05rem;
  font-size: inherit;
  line-height: 1;
  color: var(--fb-star, #F5A623);
  cursor: pointer;
  transition: transform var(--transition-fast) ease;
}

.review-modal__star:hover {
  transform: scale(1.12);
}

.review-modal__star:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.4);
}

.review-modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Textarea with a live character count in its corner. */
.review-textarea {
  position: relative;
}

.review-textarea__count {
  position: absolute;
  right: 0.6rem;
  bottom: 0.5rem;
  font-size: 0.7rem;
  color: var(--muted);
  background: var(--card);
  padding: 0 0.2rem;
  pointer-events: none;
}

/* Media row: selected thumbnails, then a thumbnail-sized "add" tile that shifts
   right as photos are added. */
.review-media {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* display:contents lets the thumbnails flow in the same wrapping row as the add
   tile (which stays last), instead of sitting in one grouped block. */
.review-media__previews,
.review-media__existing {
  display: contents;
}

.review-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  order: 1; /* keep the add tile after the thumbnails */
  border: 1.5px dashed var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--tile);
  color: var(--muted);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.review-dropzone:hover,
.review-dropzone.is-drag {
  border-color: var(--accent);
  background: #FFFBEA;
  color: var(--ink);
}

.review-dropzone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.review-dropzone__icon {
  width: 1.15rem;
  height: 1.15rem;
}

.review-dropzone__label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.review-preview {
  position: relative;
}

.review-preview img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
}

.review-preview__file {
  display: inline-flex;
  align-items: center;
  max-width: 140px;
  height: 64px;
  padding: 0 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--tile);
  font-size: 0.72rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-preview__remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 0;
  background: var(--ink);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Entrance: a quiet fade + lift, honored only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .review-modal:not([hidden]) {
    animation: reviewModalFade 0.16s ease both;
  }
  .review-modal:not([hidden]) .review-modal__card {
    animation: reviewModalIn 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}

@keyframes reviewModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes reviewModalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* Subtle label above the media add tile. */
.review-media__label {
  margin: 0 0 -0.25rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.review-form__edit {
  align-self: flex-start;
}

/* "edited" marker next to a review author. */
.comment__edited {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--muted);
}

/* Comment media opens in the lightbox rather than a new tab. */
.comment__media-item {
  display: inline-block;
  cursor: pointer;
}

.comment__media-item--video {
  position: relative;
  cursor: pointer;
}

.comment__media-item--video video {
  display: block;
  pointer-events: none;
}

/* Play triangle over a video thumbnail. */
.comment__media-item--video::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 1px 2px rgba(11, 11, 11, 0.6));
}

/* ==========================================================================
   Lightbox (review media)
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(11, 11, 11, 0.85);
}

.lightbox[hidden] {
  display: none;
}

.lightbox__body {
  display: flex;
  max-width: 100%;
  max-height: 100%;
}

.lightbox__media {
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.3);
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox:not([hidden]) { animation: reviewModalFade 0.16s ease both; }
  .lightbox:not([hidden]) .lightbox__media { animation: reviewModalIn 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}

.review-form input[type="text"],
.review-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--card);
  color: var(--ink);
}

.review-form textarea {
  resize: vertical;
  min-height: 90px;
}

.review-form input[type="text"]:focus,
.review-form textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.35);
}

.review-form input[type="file"] {
  font-size: 0.8rem;
  color: var(--muted);
  max-width: 100%;
}

/* Friendlier empty state inside the reviews card. */
.comments__empty {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.5rem 0;
}

.comments__empty strong {
  font-size: 1rem;
  color: var(--ink);
}

.comments__empty span {
  font-size: 0.9rem;
  color: var(--muted);
}

.comments__empty-cta {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.comments__empty-cta:hover {
  color: var(--link, #0a58ca);
}

/* Product page table of contents (sidebar card). */
/* Section jump list: one connected card of rows (icon + label) split by
   hairlines; the row for the section in view is filled (scroll-spy). */
.pdp-toc {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.pdp-toc[hidden] { display: none; }

.pdp-toc__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  border-top: 1px solid var(--hairline);
  transition: background var(--transition-fast);
}

.pdp-toc__item:first-child { border-top: 0; }

.pdp-toc__item > svg {
  width: 20px;
  height: 20px;
  color: var(--ink);
  flex-shrink: 0;
}

.pdp-toc__item:hover {
  text-decoration: none;
  background: var(--tile);
}

.pdp-toc__item.is-active {
  background: #E7E6DF;
}

/* Jumped-to sections clear the sticky chrome header (~118px) with breathing room. */
.product-detail h2 {
  scroll-margin-top: 10rem;
}

/* ==========================================================================
   Manual payment page + order balance callout (SP5 polish)
   ========================================================================== */

/* Section rhythm on the pay page */
.pay-page > section { margin-top: 1.25rem; }

/* Amount-due hero: the one bold element */
.pay-summary {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.6rem;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.pay-summary__label { font-size: 0.85rem; font-weight: 600; color: var(--accent); }
.pay-summary__amount {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.04;
}
.pay-summary__meta { font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); }
.pay-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
  margin-top: 0.85rem;
}
.pay-progress > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.pay-deposit {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  line-height: 1.5;
  background: rgba(255, 196, 0, 0.14);
  border: 1px solid rgba(255, 196, 0, 0.4);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
}
.pay-deposit strong { color: var(--accent); }

/* Account cards */
.pay-account {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.pay-account + .pay-account { margin-top: 0.75rem; }
.pay-account--default { border-left: 3px solid var(--accent); }
.pay-account__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}
.pay-account__head h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; }
.pay-account__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
  font-size: 0.9rem;
  align-items: center;
}
.pay-account__dl dt { color: var(--muted); font-weight: 500; white-space: nowrap; }
.pay-account__dl dd { color: var(--ink); }
.pay-account__value { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pay-account__value span { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.pay-account__note { font-size: 0.85rem; color: var(--muted); line-height: 1.5; margin-top: 0.75rem; }

.pay-copy {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--tile);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.pay-copy:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pay-copy--done { background: var(--save); color: #fff; border-color: var(--save); }

/* Proof form */
.pay-field { margin-bottom: 1.1rem; }
.pay-form label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.35rem; }
.pay-optional { color: var(--muted); font-weight: 400; }

/* File dropzone */
.file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
  padding: 1.5rem 1rem;
  border: 1.5px dashed var(--hairline);
  border-radius: var(--radius);
  background: var(--tile);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.file-drop:hover,
.file-drop:focus-within { border-color: var(--ink); background: #fff; }
.file-drop__icon { color: var(--muted); margin-bottom: 0.25rem; }
.file-drop__text { font-size: 0.9rem; font-weight: 600; }
.file-drop__hint { font-size: 0.8rem; color: var(--muted); }
.file-drop__name { font-size: 0.85rem; font-weight: 600; color: var(--save); margin-top: 0.35rem; word-break: break-all; }
.file-drop--filled { border-style: solid; border-color: var(--save); background: #fff; }
.file-drop--filled .file-drop__icon { color: var(--save); }
.file-drop__input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Full-width primary CTA on the pay form */
.pay-cta { margin-top: 0.25rem; padding-block: 0.75rem; font-size: 0.95rem; }

/* Order page: balance-due callout */
.balance-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.9rem 1.25rem;
  margin-bottom: 1.25rem;
}
.balance-callout__text { display: flex; flex-direction: column; gap: 0.1rem; }
.balance-callout__amount { font-weight: 700; font-size: 1.05rem; }
.balance-callout__meta { font-size: 0.85rem; color: var(--muted); }
.balance-callout__btn { width: auto; flex-shrink: 0; }

@media (max-width: 480px) {
  .balance-callout { align-items: stretch; }
  .balance-callout__btn { width: 100%; }
}

/* Preorder deposit affordance (PDP buy box + cart summary + product tile) */
.deposit-note {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.7rem;
  background: #FFF4CC;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  line-height: 1.35;
  color: #6B5600;
}
.deposit-note__icon { flex-shrink: 0; margin-top: 1px; color: #8A6D00; }
.deposit-note strong { font-weight: 700; color: #8A6D00; white-space: nowrap; }
/* Main buy box: the "Pay X today" affordance is a soft amber panel with the
   figure on top and the balance note beneath it. */
.deposit-note--pay-today {
  align-items: center;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 0.55rem;
}
.deposit-note__full { display: flex; flex-direction: column; line-height: 1.2; }
.deposit-note__lead { font-weight: 700; }
.deposit-note__sub { font-size: 0.72rem; }
/* Compact form is hidden in the main buy box; only the sticky card reveals it. */
.deposit-note__compact { display: none; }

/* Sticky buy card: render the deposit note as a single compact pill (figure
   only), so the long sentence never crowds the narrow card. */
.pdp-buy-card__price .deposit-note {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0.35rem 0 0;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
}
.pdp-buy-card__price .deposit-note__icon,
.pdp-buy-card__price .deposit-note__full { display: none; }
.pdp-buy-card__price .deposit-note__compact { display: inline; }

/* Sticky buy card: condense the reservation nudge to a single urgency line -
   drop the progress track and the "N of M reserved" caption so the card stays
   short; the full bar still lives in the main buy box. */
.pdp-buy-card__price .preorder-resv { margin-top: 0.4rem; gap: 0; }
.pdp-buy-card__price .preorder-resv__track,
.pdp-buy-card__price .preorder-resv__count { display: none; }
.pdp-buy-card__price .preorder-resv__top { justify-content: flex-start; gap: 0.3rem; flex-wrap: wrap; }
.pdp-buy-card__price .preorder-pill { margin-top: 0.4rem; }

/* Product tile rating row: a star bar filled to the average + (average) on the
   left, a chat icon + (review count) on the right. Positive proof only. Compact:
   line-height 1, no vertical margins (the card body gap handles spacing). */
.rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--muted);
}
.rating-row__score { display: inline-flex; align-items: center; gap: 0.28rem; }
.rating-row__avg { font-weight: 700; color: var(--ink); }
.rating-row__comments { display: inline-flex; align-items: center; gap: 0.22rem; color: var(--muted); }
.rating-row__comments svg { flex-shrink: 0; }
/* Star bar: a gold fill layer clipped to the average width over a muted base. */
.stars {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-size: 0.82rem;
  line-height: 1;
  color: var(--hairline);
}
.stars::before { content: "\2605\2605\2605\2605\2605"; }
.stars__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--stars-pct, 0%);
  overflow: hidden;
  color: var(--accent);
}
.stars__fill::before { content: "\2605\2605\2605\2605\2605"; }

.cart-summary__deposit {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.7rem;
  background: #FFF4CC;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  line-height: 1.35;
  color: #6B5600;
}
.cart-summary__deposit strong { font-weight: 700; color: #8A6D00; }

/* Mixed-cart breakdown rows (ready items + preorder deposit), muted under the subtotal. */
.cart-summary__break {
  font-size: 0.86rem;
  color: var(--muted);
}
.cart-summary__break b { font-weight: 600; color: var(--ink); }

/* Per-line "deposit today" chip in the cart, so the shopper sees that a
   preorder line is charged only its deposit now (its full price stays above). */
.cart-line__deposit {
  display: inline-flex;
  align-self: flex-start; /* hug the text in the body column, do not stretch full width */
  align-items: center;
  gap: 0.25rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #8A6D00;
  background: rgba(245, 158, 11, 0.14);
  white-space: nowrap;
}
.cart-line__deposit .coins-glyph { color: #8A6D00; }
/* Standard weighted money format inside the amber deposit chip: keep the
   superscript styling but inherit the chip's colour and size so it reads as one
   cohesive pill rather than the default muted "RWF". */
.cart-line__deposit .money { font-size: 1em; }
.cart-line__deposit .money,
.cart-line__deposit .money__cur { color: inherit; }

/* PDP for a "Buy now" (direct-checkout) product: hide the retail/wholesale
   switchers - a single-purchase item does not use wholesale pricing. */
.pdp-no-wholesale .mode-toggle,
.pdp-no-wholesale .mobile-toggle-bar { display: none; }

.product-card__deposit {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #8A6D00;
}
.product-card__deposit-icon { flex-shrink: 0; color: #8A6D00; }
/* Inline coins glyph (deposit mentions in cart / checkout / pay / order pages). */
.coins-glyph { vertical-align: -0.16em; margin-right: 0.15em; flex-shrink: 0; }

/* PDP social share row (below the buy actions). Icon buttons, vanilla-JS copy +
   native-share; no Alpine. WhatsApp is the most prominent (brand-green tint). */
.pdp-share {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 6px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.pdp-share__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}
.pdp-share__buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pdp-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.pdp-share__btn:hover { background: var(--tile); border-color: #d8d7cf; }
.pdp-share__btn:active { transform: scale(0.94); }
.pdp-share__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pdp-share__btn--wa { color: #fff; background: #25D366; border-color: #25D366; }
.pdp-share__btn--wa:hover { background: #1ebe5a; border-color: #1ebe5a; }
/* Copy: swap the link icon for a checkmark briefly after copying. */
.pdp-share__ico-check { display: none; }
.pdp-share__btn--copy.is-copied { color: var(--save); border-color: var(--save); }
.pdp-share__btn--copy.is-copied .pdp-share__ico-link { display: none; }
.pdp-share__btn--copy.is-copied .pdp-share__ico-check { display: block; }


/* Eyebrow row: the category eyebrow (left) and the staff edit pill (right) share
   one line so the edit affordance adds no vertical space. Keeps the eyebrow's
   tight spacing to the title. */
.product-detail__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: -0.5rem; /* mirrors the eyebrow's own margin-bottom */
}
.product-detail__eyebrow-row .product-detail__eyebrow { margin-bottom: 0; }

/* Unified tag cloud: categories + taxonomy terms as plain chips, no labels. */
.product-tagcloud { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }

/* Staff-only PDP edit affordance (admins who can manage the product). Subtle:
   a small muted pill pushed to the right of the eyebrow, out of the buy flow. */
.pdp-admin-edit {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  color: var(--muted);
  background: var(--tile);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pdp-admin-edit:hover { opacity: 1; color: var(--ink); border-color: #d8d7cf; }
.pdp-admin-edit:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; opacity: 1; }