/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--st-btn-primary-bg, var(--color-primary));
  --btn-fg: var(--st-btn-primary-text, var(--color-on-primary));
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-base);
  line-height: 1; letter-spacing: 0.01em;
  padding: 14px 24px; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform var(--t) var(--ease-luxury), background var(--t) var(--ease), box-shadow var(--t) var(--ease-luxury), color var(--t) var(--ease);
  will-change: transform;
}
.btn:hover { background: var(--st-btn-hover, var(--color-primary-hover)); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0) scale(0.98); transition-duration: var(--t-fast); }
.btn svg { width: 18px; height: 18px; transition: transform var(--t) var(--ease-soft); }

.btn-accent { --btn-bg: var(--color-accent); --btn-fg: var(--forest-900); }
/* Aligned to the Add-to-Cart interaction (honey-600 hover / honey-700 active,
   forest-900 text) so Pay online / Place order use the exact same gold. */
.btn-accent:hover, .btn-accent:focus-visible { background: var(--honey-600); color: var(--forest-900); }
.btn-accent:active { background: var(--honey-700); color: var(--forest-900); }

.btn-outline { --btn-bg: transparent; --btn-fg: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: var(--color-on-primary); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--color-text); }
.btn-ghost:hover { background: var(--forest-50); box-shadow: none; transform: none; }

.btn-light { --btn-bg: var(--st-btn-secondary-bg, var(--paper)); --btn-fg: var(--st-btn-secondary-text, var(--color-primary)); border-color: var(--line); }
.btn-light:hover { background: #fff; border-color: var(--forest-300); }

/* ---- Primary (dark-green) buttons: adopt the Add-to-Cart gold on interaction.
   Reuses the same honey tokens as .pcard__quickadd (the single source of truth)
   — no new colour. Scoped to primary only: outline/ghost/light/accent keep
   their own states. The lift/box-shadow from `.btn:hover` still applies, so
   only colour changes (no layout shift). The global :focus-visible ring
   (base.css) is preserved for keyboard users. ---- */
.btn:not(.btn-outline):not(.btn-ghost):not(.btn-light):not(.btn-accent):hover,
.btn:not(.btn-outline):not(.btn-ghost):not(.btn-light):not(.btn-accent):focus-visible {
  background: var(--honey-600);
  color: var(--forest-900);
}
.btn:not(.btn-outline):not(.btn-ghost):not(.btn-light):not(.btn-accent):active {
  background: var(--honey-700);
  color: var(--forest-900);
}

/* Opt-in gold interaction for a light/link button that should behave like a
   primary CTA on hover (e.g. Purchase Passport "View Passport", which is a
   <Link> styled as .btn-light). Same honey tokens — not a parallel colour. */
.btn-goldhover:hover, .btn-goldhover:focus-visible {
  background: var(--honey-600); color: var(--forest-900); border-color: var(--honey-600);
}
.btn-goldhover:active {
  background: var(--honey-700); color: var(--forest-900); border-color: var(--honey-700);
}

.btn-block { width: 100%; }
.btn-lg { padding: 17px 30px; font-size: var(--text-md); }
.btn-sm { padding: 10px 16px; font-size: var(--text-sm); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Icon button */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r-pill);
  color: var(--color-text); background: transparent; position: relative;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t-fast) var(--ease-soft);
}
.iconbtn:hover { background: var(--forest-50); }
.iconbtn:active { transform: scale(0.9); }
.iconbtn svg { width: 22px; height: 22px; transition: transform var(--t) var(--ease-soft); }
.iconbtn:hover svg { transform: scale(1.06); }
.iconbtn .count {
  position: absolute; top: 3px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--color-accent); color: var(--forest-900);
  font-size: 11px; font-weight: 700; font-family: var(--font-sans);
  border-radius: 999px; display: grid; place-items: center; line-height: 1;
  border: 2px solid var(--color-bg);
  animation: countpop 0.45s var(--ease-soft);
}
@keyframes countpop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--forest-100); color: var(--forest-700);
}
.badge-sale { background: var(--clay-100); color: var(--clay-600); }
.badge-new { background: var(--st-new-bg, var(--forest-700)); color: var(--st-new-text, var(--forest-50)); }
.badge-best { background: var(--honey-200); color: var(--honey-700); }
.badge-soft { background: var(--paper); color: var(--color-text-muted); border: 1px solid var(--line); }
.badge-out { background: #EEE9E0; color: var(--ink-400); }

/* ---------- Star rating ---------- */
.stars { display: inline-flex; align-items: center; gap: 2px; }
.stars svg { width: 15px; height: 15px; }
.stars .s-full { color: var(--color-star); }
.stars .s-empty { color: var(--line); }
.rating-row { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Price ---------- */
.price { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price .now { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-text); }
.price .was { font-size: var(--text-sm); color: var(--price-mrp); text-decoration: line-through; }
.price .off { font-size: var(--text-xs); font-weight: 700; color: var(--clay-600); }

/* ---------- Product image (branded SVG placeholder) ---------- */
/* Product image "stage".
   Every product photo is shown COMPLETE — never cropped, never stretched.
   Source images vary a lot (tall bottles, wide cartons, square soaps), so
   instead of cropping to force uniformity we give every product a fixed,
   identical stage and centre the whole image inside it with object-fit:
   contain. Different aspect ratios then read as intentionally aligned
   rather than ragged, and it works automatically for any future image. */
.pimg { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); }
.pimg svg { width: 100%; height: 100%; }
.pimg img {
  width: 100%; height: 100%;
  object-fit: contain;     /* show the whole product — never crop */
  object-position: center; /* centred both axes */
  display: block;
}
.pimg.square { aspect-ratio: 1 / 1; }

/* ---------- Product card ---------- */
/* Cards are wrapped in a scroll-reveal <div class="reveal"> which becomes the
   actual grid/rail item. The grid stretches that wrapper to the row height,
   but the card inside kept its own content height — so cards in one row ended
   at different heights. Making the wrapper a flex column and the card fill it
   restores equal-height rows without touching the grid definitions. */
.pgrid > .reveal, .rail > .reveal, .bh-grid > .reveal { display: flex; flex-direction: column; }
.pgrid > .reveal > .pcard, .rail > .reveal > .pcard, .bh-grid > .reveal > .pcard { flex: 1; }

.pcard {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--st-card-bg, var(--paper)); border: 1px solid var(--line-soft);
  /* Retain the theme's border hue without a harsh outline on light cards. */
  border-color: color-mix(in srgb, var(--st-card-border, var(--line-soft)) 15%, var(--line-soft));
  border-radius: 2px; overflow: hidden;
  transition: transform var(--t-slow) var(--ease-luxury), box-shadow var(--t-slow) var(--ease-luxury), border-color var(--t) var(--ease);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line); }
.pcard__media { position: relative; overflow: hidden; border-radius: 0; }
.pcard__media .pimg { border-radius: 0; }
/* Keep every edge of the packaging visible, including on hover. */
.pcard__media .pimg img { object-fit: contain; }
.pcard__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.pcard__badges .badge { border-radius: 4px; }
.pcard__wish {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(4px);
  display: grid; place-items: center; color: var(--ink-500);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease);
}
/* Touch devices get a comfortable ~44px tap target for the wishlist heart. */
@media (hover: none), (max-width: 640px) {
  .pcard__wish { width: 44px; height: 44px; }
}
.pcard__wish svg { width: 20px; height: 20px; transition: transform var(--t) var(--ease-soft); }
.pcard__wish:hover { color: var(--color-sale); }
.pcard__wish:hover svg { transform: scale(1.1); }
.pcard__wish.active { color: var(--color-sale); }
.pcard__wish.active svg { fill: currentColor; animation: heartpop 0.55s var(--ease-soft); }
@keyframes heartpop { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }

.pcard__quick {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  display: flex; gap: 8px;
  transform: translateY(14px); opacity: 0;
  transition: transform var(--t-slow) var(--ease-luxury), opacity var(--t-slow) var(--ease-luxury);
}
.pcard:hover .pcard__quick { transform: none; opacity: 1; }
@media (hover: none) { .pcard__quick { transform: none; opacity: 1; position: static; margin: 12px; } }

/* Quick Add only — warm gold accent, scoped so it never touches .btn-accent
   (Buy now / Place order / Subscribe) or any other button. */
.pcard__quickadd { --btn-bg: var(--honey-500); --btn-fg: var(--forest-900); }
.pcard__quickadd:hover { background: var(--honey-600); color: var(--forest-900); }
.pcard__quickadd:active { background: var(--honey-700); }

.pcard__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
/* Small meta label (category · size). Kept to a single line so every card's
   title starts at the same baseline — long values ellipsize rather than
   wrapping and pushing the rest of the card down. */
.pcard__cat {
  font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Reserve two lines for the name so one- and two-line product titles start
   and end at the same baseline, keeping the price row aligned across a row.
   Longer names clamp to two lines instead of pushing the card taller. */
.pcard__name {
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 600;
  line-height: 1.35; color: var(--color-text);
  min-height: calc(2 * 1.35em);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard__name a:hover { color: var(--color-primary); }
.pcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.pcard__foot .price { column-gap: 6px; row-gap: 4px; }

/* Compact desktop cards without changing any grid/rail widths or controls.
   The square stage contains the complete image; PDP imagery is unaffected. */
@media (min-width: 901px) {
  .pcard__media .pimg { aspect-ratio: 1 / 1; }
  .pcard__body { padding: 11px 14px 12px; gap: 7px; }
  .pcard__foot { padding-top: 0; }
}

/* ---------- Cards / surfaces ---------- */
.surface { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); }
.pad { padding: var(--sp-6); }
.pad-lg { padding: var(--sp-8); }

/* ---------- Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.label { font-size: var(--text-sm); font-weight: 600; color: var(--ink-700); }
.input, .select, .textarea {
  width: 100%; padding: 13px 15px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--text-base); color: var(--color-text);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--color-ring); box-shadow: var(--shadow-focus); }
.textarea { min-height: 110px; resize: vertical; }
.field-error .input { border-color: var(--color-danger); }
.error-text { font-size: var(--text-xs); color: var(--color-danger); }
.hint { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Search box */
.searchbox { position: relative; display: flex; align-items: center; }
.searchbox svg { position: absolute; left: 15px; width: 19px; height: 19px; color: var(--ink-400); pointer-events: none; }
.searchbox input { padding-left: 44px; border-radius: var(--r-pill); background: var(--color-surface-2); border-color: transparent; }
.searchbox input:focus { background: var(--paper); }

/* Quantity stepper */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); overflow: hidden; }
.qty button { width: 42px; height: 44px; flex-shrink: 0; display: grid; place-items: center; color: var(--color-text); transition: background var(--t) var(--ease), transform var(--t-fast) var(--ease-soft); }
.qty button:hover { background: var(--forest-50); }
.qty button:active { transform: scale(0.88); }
.qty button:disabled { color: var(--line); cursor: not-allowed; }
.qty span { min-width: 40px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; transition: opacity var(--t-fast) var(--ease-soft); }

/* Chips / pills */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--paper);
  font-size: var(--text-sm); font-weight: 500; color: var(--ink-700);
  transition: background var(--t) var(--ease-soft), border-color var(--t) var(--ease-soft), color var(--t) var(--ease-soft), transform var(--t-fast) var(--ease-soft);
  white-space: nowrap;
}
.chip:hover { border-color: var(--forest-300); background: var(--forest-50); transform: translateY(-1px); }
.chip:active { transform: translateY(0) scale(0.97); }
.chip.active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }

/* ---------- Section header ---------- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); margin-bottom: var(--sp-10); }
.sec-head .sec-title { font-size: var(--text-3xl); }
.sec-head p { color: var(--color-text-muted); max-width: 52ch; margin-top: 8px; }
.sec-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--color-primary); white-space: nowrap; transition: gap var(--t) var(--ease); }
.sec-link:hover { gap: 11px; }
.sec-link svg { width: 17px; height: 17px; }
@media (max-width: 640px) { .sec-head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-8); } .sec-head .sec-title { font-size: var(--text-2xl); } }

/* ---------- Product grid ---------- */
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
@media (max-width: 1100px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } }

/* Horizontal rail (mobile scroll) */
.rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
@media (max-width: 900px) {
  .rail {
    grid-auto-flow: column; grid-auto-columns: 74%;
    grid-template-columns: none; overflow-x: auto;
    scroll-snap-type: x mandatory; padding-bottom: 8px;
    margin-inline: calc(-1 * var(--sp-4)); padding-inline: var(--sp-4);
  }
  .rail > * { scroll-snap-align: start; }
}
@media (max-width: 520px) { .rail { grid-auto-columns: 80%; } }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; z-index: 200; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
@media (max-width: 640px) { .toast-wrap { left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); max-width: none; } }
.toast {
  display: flex; align-items: center; gap: 12px;
  background: var(--forest-800); color: var(--forest-50);
  padding: 14px 16px; border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  animation: toastin 0.35s var(--ease);
}
.toast .t-ic { width: 34px; height: 34px; border-radius: 999px; background: var(--forest-600); display: grid; place-items: center; flex-shrink: 0; }
.toast .t-ic svg { width: 18px; height: 18px; color: var(--honey-400); }
.toast .t-body { font-size: var(--text-sm); line-height: 1.35; }
.toast .t-body strong { color: #fff; }
@keyframes toastin { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }

/* ---------- Modal ---------- */
.modal-scrim {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(20, 38, 28, 0.42); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: var(--sp-6);
  animation: fade 0.25s var(--ease);
}
.modal {
  background: var(--paper); border-radius: var(--r-xl);
  width: 100%; max-width: 880px; max-height: 90vh; overflow: hidden;
  box-shadow: var(--shadow-lg); position: relative;
  animation: modalin 0.32s var(--ease);
}
.modal__close { position: absolute; top: 14px; right: 14px; z-index: 4; background: var(--paper); box-shadow: var(--shadow-sm); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalin { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- Skeleton / loading ---------- */
.skeleton { background: linear-gradient(100deg, var(--sand) 30%, var(--cream) 50%, var(--sand) 70%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: var(--r-sm); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.spinner { width: 22px; height: 22px; border: 2.5px solid var(--forest-100); border-top-color: var(--color-primary); border-radius: 999px; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Empty / error states ---------- */
.state { text-align: center; max-width: 460px; margin: 0 auto; padding: var(--sp-16) var(--sp-4); }
.state .state-ic { width: 76px; height: 76px; margin: 0 auto var(--sp-5); border-radius: 999px; background: var(--forest-50); display: grid; place-items: center; color: var(--forest-400); }
.state .state-ic svg { width: 34px; height: 34px; }
.state h3 { font-size: var(--text-2xl); margin-bottom: 10px; }
.state p { color: var(--color-text-muted); margin-bottom: var(--sp-6); }

/* ---------- Divider ---------- */
.hr { height: 1px; background: var(--line); border: 0; }

/* ---------- Tag list ---------- */
.taglist { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============================================================
   MOBILE TOUCH TARGETS
   Sizes below are hit-area only — nothing changes visually on
   desktop, and the type/iconography stays exactly as designed.
   ============================================================ */
@media (max-width: 900px) {
  /* Wishlist toggle and the quick-add row sat 1-17px under the 44px
     minimum; the compact icon button beside "Quick add" was worst at 27px. */
  .pcard__wish { width: 46px; height: 46px; }
  .pcard__quick .btn-sm { min-height: 44px; }
  .pcard__quick .btn-light { min-width: 46px; }
  .pcard__foot .iconbtn { width: 44px; height: 44px; }

  /* Product name is the primary target in a grid card — give the link a
     comfortable band without changing the type. */
  .pcard__name a { display: block; padding-block: 6px; }

  /* Filters pill and breadcrumb links. */
  .browser__tools .chip { min-height: 44px; }
  .crumbs { gap: 4px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: 2px; }
}

/* Add-to-cart button on a product card. This was an inline style
   (width/height 40) on the element, which no stylesheet could override —
   so it stayed at 40px on touch devices. As a class it can respond. */
.pcard__add { width: 40px; height: 40px; background: var(--forest-50); }
@media (hover: none), (max-width: 900px) {
  .pcard__add { width: 44px; height: 44px; }
}

/* Safety net for very long product names in narrow grid cards. */
.pcard__name, .pcard__name a { overflow-wrap: anywhere; }

/* ============================================================
   COMMERCE PRICE HIERARCHY
   The price the customer pays leads; the struck MRP supports it and must
   never out-shout it. Colours come from tokens so cart, PDP, checkout and
   invoice all render the same money the same way.
   ============================================================ */
.price .now { color: var(--st-price, var(--price-now-strong)); font-weight: 600; }
.price .was { color: var(--st-mrp, var(--price-mrp)); opacity: 0.9; }
.price .was-lbl { color: var(--price-mrp); opacity: 0.75; font-weight: 600; }
.price .off {
  color: var(--price-save);
  background: rgba(95, 138, 99, 0.10);
  border-radius: var(--r-xs);
  padding: 2px 7px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* On the deep-green product hero the same tokens would sink into the
   background, so the sale price lifts to the light end of the scale. */
.pdp__buybox .price .now { color: var(--price-now); }

/* ============================================================
   MOBILE-FIRST PRODUCT CARDS  (<= 768px)  [reconciled onto ec8d78a]
   ec8d78a compacted desktop cards (>=901px square stage) and set the
   sharp 2px card radius; phones kept the tall 4:5 image + full body
   (~461px). This block adds the mobile compaction: the redundant hover
   quick-add pill + quick-view eye are dropped (tap the card for the PDP;
   the foot carries a compact filled add button), the size suffix and
   star row are trimmed so every card shares one structure, and the price
   sits right under the title. The card radius is left at ec8d78a's 2px.
   Desktop (>=901px) and the announcement ticker are untouched.
   ============================================================ */
@media (max-width: 768px) {
  /* Drop the hover quick-add row (pill + eye) — redundant on touch. */
  .pcard__quick { display: none; }
  /* Wishlist: smaller visible circle, ~46px invisible tap area. */
  .pcard__wish { width: 32px; height: 32px; top: 8px; right: 8px; }
  .pcard__wish svg { width: 16px; height: 16px; }
  .pcard__wish::before { content: ''; position: absolute; inset: -7px; border-radius: inherit; }
  /* Badges: compact, corner-tucked; theme-driven colours preserved. */
  .pcard__badges { top: 8px; left: 8px; gap: 5px; }
  .pcard .badge { font-size: 10px; padding: 3px 8px; letter-spacing: 0.04em; }
  /* Body: tight rhythm, single-line meta, 2-line title, price pulled up. */
  .pcard__body { padding: 9px 10px 11px; gap: 3px; }
  .pcard__cat { font-size: 10.5px; letter-spacing: 0.02em; }
  .pcard__cat-form { display: none; }             /* drop the size suffix — no ugly truncation */
  .pcard__name { font-size: 0.875rem; line-height: 1.2; min-height: calc(2 * 1.2em); }
  .pcard__name a { padding-block: 2px; }
  .pcard__body .rating-row { display: none; }      /* uniform heights; rating lives on the PDP */
  .pcard__foot { margin-top: 6px; padding-top: 0; gap: 8px; }
  .pcard__foot .price { row-gap: 0; column-gap: 6px; line-height: 1.15; }
  .pcard__foot .price .now { line-height: 1.1; }
  .pcard__foot .price .was { line-height: 1.05; }
  /* The foot add button is the mobile quick-add: compact, filled, obvious. */
  .pcard__add { width: 40px; height: 40px; background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-xs); }
  .pcard__add:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
  .pcard__add svg { width: 18px; height: 18px; }
  /* Tighter grid gap so the 2-up scans quickly without feeling cramped. */
  .pgrid { gap: 10px; }
}