/* ==========================================================================
   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;

  --wrap-max: 1280px;
  --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;
  /* 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
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  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;
}

/* ==========================================================================
   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;
  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 {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  flex: 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: 82%;
  height: 82%;
  object-fit: contain;
  display: block;
}
.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__body {
  padding: 0.6rem 0.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

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

.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);
}

/* ==========================================================================
   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.8rem;
  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;
}

/* 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;
}

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);
}

.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: 3rem;
  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; }

@media (min-width: 700px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
}

/* ==========================================================================
   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
   ========================================================================== */

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 440px) 1fr;
  gap: 2.5rem;
  align-items: start;
  padding-block: 2rem;
}

.product-detail__media {
  position: sticky;
  top: 1rem;
}
.product-detail__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--tile);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.product-detail__stage > img[data-gallery-main] {
  width: 86%;
  height: 86%;
  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); }

/* 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. */
.product-related {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}
.product-related .section-title {
  margin-bottom: 1.25rem;
}

/* Description moved below the fold so a long body never pushes the price and
   Add-to-cart button down. */
.product-description {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}
.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;
}

.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: 768px) {
  .product-detail {
    grid-template-columns: 1fr;
  }

  .product-detail__media {
    position: static;
  }
  .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
   ========================================================================== */

.cart {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.cart-line {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0.6rem 1rem;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}
.cart-line__close {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  margin: 0;
}
.cart-line__unlock {
  grid-column: 1 / -1;
  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-right: 1.25rem;
}
.cart-line__media { display: flex; }
.cart-line__img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--hairline);
  flex-shrink: 0;
}
.cart-line__img--placeholder { display: inline-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 { justify-self: end; text-align: right; font-weight: 600; white-space: nowrap; }
@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-summary {
  border-top: 1px solid var(--hairline);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
}

.cart-summary__row {
  display: flex;
  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) {
  .cart-line {
    gap: 0.4rem 0.6rem;
    padding: 0.85rem 0.75rem;
  }
  .cart-line__controls {
    padding-right: 1.1rem;
  }
  .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 340px;
  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;
}

.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;
}
/* 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);
  }
}

/* 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: baseline;
  gap: 0.3rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  line-height: 1.25;
}
.price-tag .role {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.price-tag .amt {
  font-weight: 600;
}
.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) {
  .product-card .price-tag .price { gap: 0.22rem; }
  .product-card .price-tag .role {
    font-size: 0.56rem;
    letter-spacing: 0.02em;
    padding: 0.08em 0.3em;
  }
  .product-card .price-tag .amt { font-size: 0.76rem; }
  .product-card .price-tag .moq {
    font-size: 0.54rem;
    padding: 0.03rem 0.28rem;
  }
  body[data-view-mode="retail"] .product-card .price--retail .amt,
  body[data-view-mode="wholesale"] .product-card .price--wholesale .amt,
  .product-card .price-tag:not(.price-tag--has-wholesale) .price--retail .amt {
    font-size: 0.95rem;
  }
}


/* ==========================================================================
   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: Scroll-aware header + hero controls + mobile toggle bar
   ========================================================================== */

/* Header controls (search + toggle) sit between the brand and the cart.
   Hidden by default; shown when the header is condensed (home, on scroll)
   or on any page that has no hero. */
.header-controls {
  display: none;
  flex: 1;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  min-height: 2.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--card);
  /* No overflow:hidden here - it would clip the search-as-you-type dropdown
     that hangs below the bar. The mode-toggle rounds its own right corners
     instead so its active fill still respects the bar's rounded corner. */
}
.site-header.is-condensed .header-controls,
body:not(.page-has-hero) .header-controls {
  display: flex;
}
.header-row .cart-link {
  margin-left: auto;
}

/* Hero controls: search + toggle shown in the hero on load (home only). */
.hero-controls {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  max-width: 760px;
  margin: 1.5rem auto 0;
  min-height: 2.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--card);
  /* No overflow:hidden - see .header-controls note (would clip the search
     suggestions dropdown). The toggle clips its own right corners. */
}
.hero-controls .search {
  flex: 1;
}

/* Unified search + mode bar: the search field and the retail/wholesale toggle
   share one outline and background, split by a hairline seam, with the active
   price mode filled. Focus lights the whole bar. Scoped to the header/hero
   wrappers so the standalone .search and the .mode-toggle in the mobile bottom
   bar keep their own chrome. */
.header-controls,
.hero-controls {
  transition: border-color 0.15s;
}
.header-controls:focus-within,
.hero-controls:focus-within {
  border-color: var(--ink);
}
/* The unified bar clips overflow, which would swallow an inner focus ring, so
   ring the whole bar when the search input is focused, and give the toggle
   buttons a two-tone inset ring that reads on both the light and dark-active
   states. */
.header-controls:has(.search input:focus-visible),
.hero-controls:has(.search input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.35);
}
.mode-toggle button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--accent);
}
.header-controls .search input[type="search"],
.hero-controls .search input[type="search"] {
  min-height: 0;
  height: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
}
.header-controls .mode-toggle,
.hero-controls .mode-toggle {
  border: none;
  border-left: 1px solid var(--hairline);
  /* Round the right corners (the toggle keeps its own overflow:hidden) so the
     active dark fill clips to the bar's corner now that the bar no longer
     clips overflow. Inset 1px to nest inside the bar's border. */
  border-radius: 0 calc(var(--radius-control) - 1px) calc(var(--radius-control) - 1px) 0;
  min-height: 0;
}
.header-controls .mode-toggle button + button,
.hero-controls .mode-toggle button + button {
  border-left: 1px solid var(--hairline);
}

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

@media (max-width: 699px) {
  /* Condensed header on mobile: brand + cart stay on the top row, the search
     wraps to a full-width second row. The toggle is NOT shown in the header
     here (the sticky bottom bar carries it), and the hero shows search only. */
  .header-row {
    flex-wrap: wrap;
    gap: 0.625rem;
  }
  .header-controls {
    order: 3;
    flex-basis: 100%;
    width: 100%;
  }
  .header-controls .mode-toggle,
  .hero-controls .mode-toggle {
    display: none;
  }
  .hero-controls {
    max-width: none;
  }

  /* On mobile the search lives in the sticky header from load (no hero search,
     no scroll-condense), which removes the header transition flicker. */
  .site-header .header-controls {
    display: flex;
  }
  .page-has-hero .hero-controls {
    display: none;
  }

  /* 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;
  }
}

/* ==========================================================================
   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 inline add-form
     controls (the variant label and price stay visible in the page). */
  body.has-buy-bar .variants .add-form {
    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;
    bottom: 0;
    z-index: 200;
    background: var(--paper);
    border-top: 1px solid var(--hairline);
    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%;
  }
  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 {
  flex: 1 1 0;
  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-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: center;
  margin: 1.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. */
.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.15rem 0.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
}
.price.price--deal .role { color: #C62828; }
.price.price--deal .amt { font-weight: 700; }
.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;
}