/* The fixed e-commerce layout.
 *
 * Structure, spacing and responsive behaviour live here and do not change
 * between projects. Visual identity -- colour, typeface, size, radius, shadow,
 * motion -- is read from whatever design system this run generated, through
 * `var(--token, fallback)`.
 *
 * **Every token reference carries a real fallback, deliberately.** The design
 * agent emits whatever tokens it invented (`designSystemCss` in
 * src/design/prototype.ts just serialises `system.tokens`), so no name is
 * guaranteed. Two observed runs agreed on the colour, type, radius and motion
 * names used below, and disagreed completely on spacing: one emitted
 * `--space-xs/sm/md/lg/xl`, the other `--space-1..7`. Spacing is therefore
 * never read from a token -- it is layout, and layout is what this file pins.
 *
 * The layout follows the patterns the large storefronts share (surveyed on
 * Mobbin, 2026-08-29: Etsy, IKEA, Nike, lululemon, Farfetch, Instacart):
 * search in the nav and a category bar under it, an image hero with side
 * tiles, category tiles, image-first square cards with no card chrome, a
 * product page with the image beside a sticky buy box and an accordion of
 * details, and a cart of divider rows with a sticky order summary.
 *
 * Three things the layout decides for itself, after a live run (2026-08-29)
 * showed a faithful rendering of a weak token set: the headline face is
 * `--font-family-display` (optional; falls back to the body face), the body
 * face is expected to be a sans, and both radius tokens are **clamped** --
 * `--radius-md` never renders above 12px, `--radius-sm` never above 6px --
 * because a rounded-everything page reads as a template, whatever the
 * palette. The token contract in .claude/skills/ecom-storefront-design/
 * SKILL.md §1 is otherwise unchanged.
 *
 * Class names are `ecom-` prefixed so they cannot collide with the design
 * system's own component classes, which are free to vary run to run.
 */

/* ---------- shell ---------- */

/* Several layout classes set `display`, which would beat the `hidden`
 * attribute's own `display: none`; scripts here toggle `hidden` on the cart
 * summary, the hero photo, panels and the admin shell, so it has to win. */
.ecom-page [hidden] { display: none !important; }

.ecom-page {
  /* Layout-owned derived values. Read the tokens once, here, so every rule
   * below shares one clamp and one fallback chain. */
  --ecom-display: var(--font-family-display, var(--font-family, system-ui, -apple-system, "Segoe UI", sans-serif));
  --ecom-radius-sm: min(var(--radius-sm, 4px), 6px);
  --ecom-radius-md: min(var(--radius-md, 10px), 12px);
  --ecom-max: 1440px;
  --ecom-pad: clamp(16px, 4vw, 48px);

  margin: 0;
  font-family: var(--font-family, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: var(--font-size-base, 1rem);
  line-height: 1.5;
  background: var(--color-bg, #faf7f2);
  color: var(--color-text, #2b2620);
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ecom-container {
  max-width: var(--ecom-max);
  margin: 0 auto;
  padding: 28px var(--ecom-pad);
}

/* Headline type: the display face at a fluid size, tight leading, a touch
 * of negative tracking above 2rem. Every heading class below inherits this
 * treatment so a serif display and a sans display both sit right. */
.ecom-title,
.ecom-hero-title,
.ecom-section-title,
.ecom-detail-title,
.ecom-summary-title,
.ecom-empty-title,
.ecom-reviews-title,
.ecom-review-form-title {
  font-family: var(--ecom-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-text, #2b2620);
  text-wrap: balance;
}

.ecom-title {
  font-size: clamp(1.75rem, 1.15rem + 1.6vw, 2.5rem);
  margin: 0 0 6px;
}

.ecom-subtitle {
  margin: 0 0 24px;
  color: var(--color-text-muted, #6f6759);
}

.ecom-muted { color: var(--color-text-muted, #6f6759); }

.ecom-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6f6759);
}

.ecom-section { padding-top: 12px; }

.ecom-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
}

.ecom-section-title {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
  margin: 0;
}

.ecom-section-link {
  color: var(--color-text, #2b2620);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border, #e2dcd0);
  font-size: var(--font-size-sm, 0.85rem);
  font-weight: 600;
  white-space: nowrap;
}

.ecom-section-link:hover { text-decoration-color: currentColor; }

/* ---------- strip + navigation ---------- */

/* The strip repeats the trust claims the checkout already makes; it never
 * carries an offer of its own, because a discount the services do not honour
 * is a lie in a thin bar. */
.ecom-strip {
  background: var(--color-text, #2b2620);
  color: var(--color-bg, #faf7f2);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  padding: 8px 16px;
}

.ecom-strip span + span::before {
  content: "\00b7";
  margin: 0 12px;
  opacity: 0.5;
}

.ecom-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-surface, #ffffff);
  border-bottom: 1px solid var(--color-border, #e2dcd0);
}

.ecom-nav-inner {
  max-width: var(--ecom-max);
  margin: 0 auto;
  padding: 14px var(--ecom-pad);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
}

.ecom-nav-brand {
  font-family: var(--ecom-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-text, #2b2620);
  text-decoration: none;
  white-space: nowrap;
}

/* A <form>: the generated design-system.css resets bare forms to a flex row,
 * which is what this one wants anyway -- pinned here so a system that does
 * something else cannot break it. */
.ecom-nav-search {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  justify-self: center;
  margin: 0;
  padding: 0 16px;
  min-height: 44px;
  border: 1px solid var(--color-border, #e2dcd0);
  border-radius: 999px;
  background: var(--color-bg, #faf7f2);
  transition: border-color var(--motion-fast, 120ms ease), box-shadow var(--motion-fast, 120ms ease);
}

.ecom-nav-search:focus-within {
  border-color: var(--color-text, #2b2620);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.ecom-nav-search-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--color-text-muted, #6f6759);
  stroke-width: 2;
  stroke-linecap: round;
}

.ecom-search {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 6px 0;
  font: inherit;
  border: 0;
  background: transparent;
  color: var(--color-text, #2b2620);
}

.ecom-search:focus { outline: none; }
.ecom-search::placeholder { color: var(--color-text-muted, #6f6759); }

.ecom-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ecom-nav-link {
  color: var(--color-text, #2b2620);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  white-space: nowrap;
}

.ecom-nav-link:hover { background: var(--color-bg, #faf7f2); }
.ecom-nav-link:focus-visible {
  outline: 2px solid var(--color-primary, #8a4b2f);
  outline-offset: 2px;
}
.ecom-nav-link[aria-current="page"] { font-weight: 700; }

.ecom-nav-link-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ecom-cart-count {
  background: var(--color-primary, #8a4b2f);
  color: var(--color-primary-contrast, #ffffff);
  border-radius: 999px;
  padding: 0 7px;
  min-width: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ecom-cart-count[data-empty="true"] { opacity: 0.45; }

/* The category bar is filled by app.js from the catalog's own categories and
 * stays empty (and invisible) when the catalog has none. It scrolls sideways
 * on a narrow screen rather than wrapping into a second nav. */
.ecom-category-bar {
  background: var(--color-surface, #ffffff);
  border-bottom: 1px solid var(--color-border, #e2dcd0);
}

.ecom-category-bar:empty { display: none; }

.ecom-category-bar-inner {
  max-width: var(--ecom-max);
  margin: 0 auto;
  padding: 0 var(--ecom-pad);
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ecom-category-bar-inner::-webkit-scrollbar { display: none; }

.ecom-category-link {
  padding: 11px 12px 9px;
  text-decoration: none;
  font-size: var(--font-size-sm, 0.85rem);
  font-weight: 500;
  color: var(--color-text-muted, #6f6759);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.ecom-category-link:hover,
.ecom-category-link[aria-current="true"] {
  color: var(--color-text, #2b2620);
  border-bottom-color: var(--color-text, #2b2620);
}

/* ---------- buttons ---------- */

.ecom-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 46px;
  padding: 10px 24px;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  border-radius: var(--ecom-radius-sm);
  border: 1px solid var(--color-primary, #8a4b2f);
  background: var(--color-primary, #8a4b2f);
  color: var(--color-primary-contrast, #ffffff);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-fast, 120ms ease), border-color var(--motion-fast, 120ms ease), transform var(--motion-fast, 120ms ease);
}

.ecom-button:hover {
  background: var(--color-primary-hover, #713b23);
  border-color: var(--color-primary-hover, #713b23);
}
.ecom-button:active { transform: translateY(1px); }
.ecom-button:focus-visible {
  outline: 2px solid var(--color-text, #2b2620);
  outline-offset: 2px;
}
.ecom-button[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.ecom-button[data-state="added"] {
  background: var(--color-accent, #3f6b4f);
  border-color: var(--color-accent, #3f6b4f);
}

.ecom-button-secondary {
  background: var(--color-surface, #ffffff);
  color: var(--color-text, #2b2620);
  border-color: var(--color-text, #2b2620);
}
.ecom-button-secondary:hover {
  background: var(--color-text, #2b2620);
  color: var(--color-surface, #ffffff);
  border-color: var(--color-text, #2b2620);
}
.ecom-button-secondary[data-state="added"] {
  background: var(--color-accent, #3f6b4f);
  color: #ffffff;
}

.ecom-button-sm {
  min-height: 38px;
  padding: 6px 16px;
  font-size: var(--font-size-sm, 0.85rem);
  border-radius: 999px;
}

.ecom-button-block { width: 100%; }

/* ---------- landing: hero ---------- */

.ecom-hero {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 20px;
  max-width: var(--ecom-max);
  margin: 24px auto 0;
  padding: 0 var(--ecom-pad);
}

.ecom-hero-media {
  position: relative;
  min-height: clamp(380px, 46vw, 560px);
  border-radius: var(--ecom-radius-md);
  overflow: hidden;
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e2dcd0);
}

.ecom-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* White copy over a photo, whatever the palette: the gradient is what makes
 * it legible, so it is fixed rather than a token -- and so is the white,
 * because a base stylesheet that colours every h1 and p (the design gate's
 * prototype shell does) must not turn copy over a photo dark. */
.ecom-hero-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(24px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 100%);
  color: #ffffff;
}

.ecom-hero-copy .ecom-eyebrow { color: rgba(255, 255, 255, 0.82); }

.ecom-hero-title {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  margin: 0;
  line-height: 1.05;
  max-width: 20ch;
  letter-spacing: -0.025em;
  color: #ffffff;
}

.ecom-hero-tagline {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  line-height: 1.5;
  color: #ffffff;
  opacity: 0.92;
}

.ecom-hero-copy .ecom-button {
  margin-top: 6px;
  background: #ffffff;
  border-color: #ffffff;
  color: #111111;
}

.ecom-hero-copy .ecom-button:hover { background: rgba(255, 255, 255, 0.88); border-color: transparent; }

.ecom-hero-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
}

.ecom-hero-tile {
  position: relative;
  min-height: 200px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  border-radius: var(--ecom-radius-md);
  border: 1px solid var(--color-border, #e2dcd0);
  text-decoration: none;
  overflow: hidden;
  background: var(--color-surface, #ffffff);
  color: var(--color-text, #2b2620);
  transition: transform var(--motion-fast, 120ms ease), box-shadow var(--motion-fast, 120ms ease);
}

.ecom-hero-tile:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1); }

.ecom-hero-tile[data-tone="primary"] {
  background: var(--color-primary, #8a4b2f);
  color: var(--color-primary-contrast, #ffffff);
  border-color: transparent;
}

.ecom-hero-tile[data-tone="primary"] .ecom-eyebrow { color: inherit; opacity: 0.75; }

/* A tile with a photo: the photo fills it, a gradient keeps the copy legible,
 * and the copy is white for the same reason the hero's is. */
.ecom-hero-tile-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease;
}

.ecom-hero-tile:hover .ecom-hero-tile-bg { transform: scale(1.04); }

.ecom-hero-tile[data-media="true"] { color: #ffffff; border-color: transparent; background: #1a1a1a; }
.ecom-hero-tile[data-media="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0.05) 100%);
}
.ecom-hero-tile[data-media="true"] > :not(.ecom-hero-tile-bg) { position: relative; z-index: 1; }
.ecom-hero-tile[data-media="true"] .ecom-eyebrow { color: rgba(255, 255, 255, 0.85); }

.ecom-hero-tile-title {
  font-family: var(--ecom-display);
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  color: inherit;
  text-wrap: balance;
}

.ecom-hero-tile-link {
  font-weight: 600;
  font-size: var(--font-size-sm, 0.85rem);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ecom-hero-tile-link::after { content: "\2192"; transition: transform var(--motion-fast, 120ms ease); }
.ecom-hero-tile:hover .ecom-hero-tile-link::after { transform: translateX(3px); }

.ecom-hero-tile-meta {
  font-size: var(--font-size-sm, 0.85rem);
  opacity: 0.9;
}

/* ---------- landing: category tiles, trust, footer ---------- */

.ecom-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 160px));
  justify-content: start;
  gap: 24px;
}

.ecom-category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  text-align: center;
  font-weight: 600;
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--color-text, #2b2620);
}

.ecom-category-tile-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--color-border, #e2dcd0);
  background: var(--color-surface, #ffffff);
  transition: transform var(--motion-fast, 120ms ease), box-shadow var(--motion-fast, 120ms ease);
}

.ecom-category-tile:hover .ecom-category-tile-image { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); }

.ecom-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.ecom-trust {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e2dcd0);
  border-radius: var(--ecom-radius-md);
}

.ecom-trust-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  fill: none;
  stroke: var(--color-primary, #8a4b2f);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ecom-trust strong { display: block; font-weight: 600; }
.ecom-trust span { font-size: var(--font-size-sm, 0.85rem); color: var(--color-text-muted, #6f6759); }

.ecom-footer {
  margin-top: 64px;
  border-top: 1px solid var(--color-border, #e2dcd0);
  background: var(--color-surface, #ffffff);
}

.ecom-footer-inner {
  max-width: var(--ecom-max);
  margin: 0 auto;
  padding: 40px var(--ecom-pad);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  font-size: var(--font-size-sm, 0.85rem);
}

.ecom-footer-heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--color-text, #2b2620);
}

.ecom-footer-inner > div:first-child .ecom-footer-heading {
  font-family: var(--ecom-display);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-transform: none;
}

.ecom-footer-tagline {
  margin: 0;
  max-width: 40ch;
  color: var(--color-text-muted, #6f6759);
}

.ecom-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ecom-footer-list a {
  color: var(--color-text-muted, #6f6759);
  text-decoration: none;
}

.ecom-footer-list a:hover { color: var(--color-text, #2b2620); }

.ecom-footer-bottom {
  border-top: 1px solid var(--color-border, #e2dcd0);
  padding: 14px var(--ecom-pad);
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-muted, #6f6759);
}

/* ---------- product grid ---------- */

.ecom-shop-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ecom-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.ecom-chips:empty { display: none; }

.ecom-chip {
  min-height: 36px;
  padding: 6px 16px;
  font: inherit;
  font-size: var(--font-size-sm, 0.85rem);
  font-weight: 500;
  border: 1px solid var(--color-border, #e2dcd0);
  border-radius: 999px;
  background: var(--color-surface, #ffffff);
  color: var(--color-text, #2b2620);
  cursor: pointer;
  transition: border-color var(--motion-fast, 120ms ease), background var(--motion-fast, 120ms ease);
}

.ecom-chip:hover { border-color: var(--color-text, #2b2620); }
.ecom-chip:focus-visible {
  outline: 2px solid var(--color-primary, #8a4b2f);
  outline-offset: 2px;
}
.ecom-chip[aria-pressed="true"] {
  background: var(--color-text, #2b2620);
  color: var(--color-surface, #ffffff);
  border-color: var(--color-text, #2b2620);
}

.ecom-shop-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.ecom-filters {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 88px;
}

.ecom-filters-group { display: flex; flex-direction: column; }

.ecom-filters-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text, #2b2620);
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border, #e2dcd0);
}

.ecom-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--color-text, #2b2620);
  cursor: pointer;
}

/* The generated design-system.css resets every `input` to `min-height: 40px`
 * for text-style fields -- reasonable there, but it stretches an unstyled
 * checkbox (13px wide) into a tall rectangle instead of a square. Reset back
 * to a normal checkbox size and give it the same focus-visible treatment as
 * every other control in this layout. */
.ecom-filter-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--color-primary, #8a4b2f);
}

.ecom-filter-option input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary, #8a4b2f);
  outline-offset: 2px;
  min-height: 0;
}

.ecom-shop-main { min-width: 0; }

.ecom-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}

/* A custom chevron replaces the browser's native one, which renders with a
 * different size and inset in every browser -- most visibly next to this
 * layout's own square-cornered, evenly-padded inputs. Its colour is a fixed
 * neutral grey rather than a design token, the same reasoning as the star
 * rating's fixed gold: chrome, not brand, so it stays legible against every
 * design system's own background/border pairing. */
.ecom-sort,
select.ecom-field-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23767066' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 36px;
}

.ecom-sort {
  min-height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 14px;
  font: inherit;
  font-size: var(--font-size-sm, 0.85rem);
  font-weight: 500;
  border: 1px solid var(--color-border, #e2dcd0);
  border-radius: 999px;
  background-color: var(--color-surface, #ffffff);
  color: var(--color-text, #2b2620);
}

.ecom-sort:focus-visible {
  outline: 2px solid var(--color-primary, #8a4b2f);
  outline-offset: 1px;
}

/* auto-fit, not auto-fill: a row with fewer cards than tracks (the landing
 * page's four featured products on a wide screen) collapses the empty tracks
 * and the cards share the width, instead of a hole at the end of the row. */
.ecom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px 24px;
}

/* The card is the photo. No box, no border, no padding: the image carries
 * the product and the text sits under it, the way Etsy, Nike and Farfetch
 * do it -- a boxed card with a button in it reads as an admin table. */
.ecom-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  /* Pinned against base stylesheets that box every <article> (the design
   * gate's prototype shell does): no chrome of its own, ever. */
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ecom-card-media {
  position: relative;
  display: block;
  border-radius: var(--ecom-radius-md);
  overflow: hidden;
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e2dcd0);
}

/* A fixed aspect ratio, so the grid never shifts as photos arrive and a
 * portrait photo beside a landscape one crops to the same square. */
.ecom-card-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--color-bg, #faf7f2);
  display: block;
  transition: transform 400ms ease;
}

.ecom-card:hover .ecom-card-image { transform: scale(1.03); }

.ecom-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 2px;
  flex: 1;
}

.ecom-card-name {
  font-weight: 600;
  color: var(--color-text, #2b2620);
  text-decoration: none;
  line-height: 1.3;
}

.ecom-card-name:hover { text-decoration: underline; text-underline-offset: 3px; }

.ecom-card-meta {
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--color-text-muted, #6f6759);
}

.ecom-card .ecom-rating { font-size: var(--font-size-sm, 0.85rem); }

.ecom-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}

/* The price wears the text colour in a grid and the primary only on the
 * product page, so twelve prices are not twelve brand-coloured shouts. */
.ecom-price {
  color: var(--color-text, #2b2620);
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ecom-price[data-size="lg"] {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  color: var(--color-primary, #8a4b2f);
  letter-spacing: -0.01em;
}

.ecom-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 24px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.ecom-rail > * { scroll-snap-align: start; }

/* ---------- ratings & reviews ----------
 * Star colour is a fixed warm gold rather than a design token: a rating is
 * read the same way regardless of the palette underneath it, the same reason
 * every storefront's stars stay gold across a light or dark theme. */

.ecom-stars {
  color: #d99a1b;
  letter-spacing: 1px;
  line-height: 1;
}

.ecom-rating {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ecom-rating-count {
  color: var(--color-text-muted, #6f6759);
  font-size: var(--font-size-sm, 0.85rem);
}

.ecom-detail-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.ecom-detail-rating:hover .ecom-rating-count { text-decoration: underline; }

.ecom-detail-highlights {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--color-text, #2b2620);
  line-height: 1.5;
}

.ecom-reviews {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.ecom-reviews-title {
  grid-column: 1 / -1;
  font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem);
  margin: 0;
}

.ecom-review-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e2dcd0);
  border-radius: var(--ecom-radius-md);
}

.ecom-review-big {
  font-family: var(--ecom-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.ecom-review-bar {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 32px;
  gap: 8px;
  align-items: center;
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--color-text-muted, #6f6759);
  font-variant-numeric: tabular-nums;
}

.ecom-review-bar-track {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--color-bg, #faf7f2);
  overflow: hidden;
}

.ecom-review-bar-fill {
  display: block;
  height: 100%;
  background: #d99a1b;
}

.ecom-review-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

#reviewsList {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ecom-review-card {
  padding: 20px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border, #e2dcd0);
  border-radius: 0;
  box-shadow: none;
}

.ecom-review-card:last-child { border-bottom: 0; }

.ecom-review-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.ecom-review-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e2dcd0);
  font-weight: 700;
  color: var(--color-text, #2b2620);
}

.ecom-review-author { font-weight: 600; color: var(--color-text, #2b2620); }

.ecom-review-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.ecom-review-badge {
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--color-accent, #3f6b4f);
}

.ecom-review-badge-community { color: var(--color-text-muted, #6f6759); }

.ecom-review-title { font-weight: 600; margin-bottom: 2px; }

.ecom-review-date {
  color: var(--color-text-muted, #6f6759);
  font-size: var(--font-size-sm, 0.85rem);
  margin-bottom: 8px;
}

.ecom-review-body { margin: 0; color: var(--color-text, #2b2620); line-height: 1.6; }

/* This is a <form>, and the generated design-system.css always resets bare
 * `form` elements to `display: flex; align-items: center; flex-wrap: wrap`
 * for a one-line search-bar-style form. align-items and flex-wrap are never
 * touched by our own class-scoped rules unless stated explicitly here, so
 * without this override every field would shrink to its own content width
 * and sit centered instead of stretching to fill the card. */
.ecom-review-form {
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e2dcd0);
  border-radius: var(--ecom-radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 16px;
  margin: 0;
}

.ecom-review-form-title { margin: 0; font-size: 1.25rem; }

.ecom-review-form-row {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 16px;
}

.ecom-review-form-submit { align-self: flex-start; }

/* ---------- product detail ---------- */

.ecom-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--color-text-muted, #6f6759);
}

.ecom-breadcrumb a {
  color: var(--color-text-muted, #6f6759);
  text-decoration: none;
}

.ecom-breadcrumb a:hover { color: var(--color-text, #2b2620); text-decoration: underline; }

.ecom-breadcrumb span + span::before {
  content: "/";
  margin-right: 8px;
  opacity: 0.5;
}

.ecom-breadcrumb span:last-child { color: var(--color-text, #2b2620); }

.ecom-detail {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(340px, 5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.ecom-gallery { min-width: 0; }

.ecom-detail-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: var(--ecom-radius-md);
  border: 1px solid var(--color-border, #e2dcd0);
  background: var(--color-surface, #ffffff);
}

/* The buy box stays in view while the gallery scrolls: what the shopper
 * needs to decide (price, stock, the button) never leaves the screen. */
.ecom-buybox {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ecom-detail-title {
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.6rem);
  margin: 4px 0 0;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.ecom-detail-sub {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ecom-detail-desc {
  color: var(--color-text-muted, #6f6759);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}

.ecom-buy-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  margin-top: 4px;
}

.ecom-buy-row .ecom-button { min-height: 52px; font-size: 1.05rem; }

.ecom-delivery {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border, #e2dcd0);
  border-radius: var(--ecom-radius-md);
  overflow: hidden;
  background: var(--color-surface, #ffffff);
}

.ecom-delivery-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  font-size: var(--font-size-sm, 0.85rem);
}

.ecom-delivery-row + .ecom-delivery-row { border-top: 1px solid var(--color-border, #e2dcd0); }

.ecom-delivery-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--color-primary, #8a4b2f);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ecom-delivery-row strong { display: block; font-weight: 600; }
.ecom-delivery-row span { color: var(--color-text-muted, #6f6759); }

.ecom-accordion { border-top: 1px solid var(--color-border, #e2dcd0); }

.ecom-accordion details { border-bottom: 1px solid var(--color-border, #e2dcd0); }

.ecom-accordion summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  font-weight: 600;
}

.ecom-accordion summary::-webkit-details-marker { display: none; }

.ecom-accordion summary::after {
  content: "+";
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--color-text-muted, #6f6759);
}

.ecom-accordion details[open] summary::after { content: "\2212"; }

.ecom-accordion summary:focus-visible {
  outline: 2px solid var(--color-primary, #8a4b2f);
  outline-offset: 2px;
}

.ecom-accordion-body {
  padding: 0 0 18px;
  color: var(--color-text-muted, #6f6759);
  font-size: var(--font-size-sm, 0.85rem);
  line-height: 1.6;
}

.ecom-accordion-body .ecom-detail-highlights { font-size: var(--font-size-base, 1rem); }

.ecom-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  color: var(--color-text-muted, #6f6759);
  font-size: var(--font-size-sm, 0.85rem);
}

.ecom-trust-row span::before {
  content: "\2713";
  margin-right: 6px;
  font-weight: 700;
  color: var(--color-primary, #8a4b2f);
}

/* ---------- cart ---------- */

.ecom-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.ecom-cart-layout[data-empty="true"] { grid-template-columns: 1fr; }

/* Cart lines are rows on the page, divided by rules, not boxes in boxes. */
.ecom-lines {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border, #e2dcd0);
}

.ecom-cart-layout[data-empty="true"] .ecom-lines { border-top: 0; }

.ecom-line {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border, #e2dcd0);
}

.ecom-line-thumb {
  width: 104px;
  height: 104px;
  object-fit: cover;
  display: block;
  border-radius: var(--ecom-radius-md);
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e2dcd0);
}

.ecom-line-name { font-weight: 600; font-size: 1.05rem; }

.ecom-line-unit {
  color: var(--color-text-muted, #6f6759);
  font-size: var(--font-size-sm, 0.85rem);
  margin-top: 2px;
}

.ecom-line-remove {
  margin-top: 8px;
  padding: 0;
  font: inherit;
  font-size: var(--font-size-sm, 0.85rem);
  border: 0;
  background: none;
  color: var(--color-text-muted, #6f6759);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ecom-line-remove:hover { color: var(--color-text, #2b2620); }

.ecom-line-subtotal {
  font-weight: 700;
  font-size: 1.05rem;
  min-width: 80px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ecom-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border, #e2dcd0);
  border-radius: 999px;
  background: var(--color-surface, #ffffff);
  overflow: hidden;
}

.ecom-stepper-btn {
  min-width: 42px;
  min-height: 42px;
  font: inherit;
  font-size: 1.1rem;
  border: none;
  background: transparent;
  color: var(--color-text, #2b2620);
  cursor: pointer;
}

.ecom-stepper-btn:hover { background: var(--color-bg, #faf7f2); }
.ecom-stepper-btn:focus-visible {
  outline: 2px solid var(--color-primary, #8a4b2f);
  outline-offset: -2px;
}
.ecom-stepper-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.ecom-stepper-value {
  min-width: 36px;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ecom-buy-row .ecom-stepper { border-radius: var(--ecom-radius-sm); }
.ecom-buy-row .ecom-stepper-btn { min-height: 50px; min-width: 46px; }

.ecom-summary {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e2dcd0);
  border-radius: var(--ecom-radius-md);
  padding: 24px;
}

.ecom-summary-title {
  margin: 0 0 8px;
  font-size: 1.35rem;
}

.ecom-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  color: var(--color-text-muted, #6f6759);
  font-variant-numeric: tabular-nums;
}

.ecom-summary-total {
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid var(--color-border, #e2dcd0);
  font-weight: 700;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.ecom-summary-checkout-link {
  width: 100%;
  margin-top: 10px;
  min-height: 52px;
  font-size: 1.05rem;
}

.ecom-payments {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ecom-payments span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border: 1px solid var(--color-border, #e2dcd0);
  border-radius: 3px;
  color: var(--color-text-muted, #6f6759);
}

.ecom-summary .ecom-trust-row { justify-content: center; }

/* ---------- checkout ---------- */

.ecom-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.ecom-checkout-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 640px;
}

.ecom-checkout-aside { position: sticky; top: 88px; }

.ecom-checkout-aside .ecom-summary { position: static; }

.ecom-checkout-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border, #e2dcd0);
}

.ecom-checkout-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--color-text, #2b2620);
}

.ecom-checkout-item-qty { color: var(--color-text-muted, #6f6759); }

.ecom-checkout-item-subtotal { font-weight: 600; white-space: nowrap; }

.ecom-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ecom-field-label {
  font-weight: 600;
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--color-text, #2b2620);
}

.ecom-field-input {
  min-height: 46px;
  padding: 10px 14px;
  font: inherit;
  border: 1px solid var(--color-border, #e2dcd0);
  border-radius: var(--ecom-radius-sm);
  background: var(--color-surface, #ffffff);
  color: var(--color-text, #2b2620);
  transition: border-color var(--motion-fast, 120ms ease), box-shadow var(--motion-fast, 120ms ease);
}

.ecom-field-input:focus-visible {
  outline: none;
  border-color: var(--color-text, #2b2620);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.ecom-field-textarea {
  min-height: 96px;
  resize: vertical;
}

.ecom-payment-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  margin: 0;
  border: 1px solid var(--color-border, #e2dcd0);
  border-radius: var(--ecom-radius-md);
  background: var(--color-surface, #ffffff);
}

.ecom-payment-options legend { padding: 0 6px; }

.ecom-payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: var(--ecom-radius-sm);
}

.ecom-payment-option input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  accent-color: var(--color-primary, #8a4b2f);
}

.ecom-payment-option-name { color: var(--color-text, #2b2620); font-weight: 500; }

.ecom-payment-option-disabled { opacity: 0.55; }
.ecom-payment-option-disabled .ecom-payment-option-name { color: var(--color-text-muted, #6f6759); }

.ecom-payment-option-badge {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted, #6f6759);
  background: var(--color-bg, #faf7f2);
  border: 1px solid var(--color-border, #e2dcd0);
  border-radius: 999px;
  padding: 2px 10px;
}

/* ---------- stock ----------
 * Status colours are fixed, like the star rating's gold: "out of stock" has to
 * read as a warning on every palette, and a design token cannot promise that. */

.ecom-stock {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 3px 10px;
}

.ecom-stock[data-state="low"] { color: #92400e; background: #fef3c7; }
.ecom-stock[data-state="out"] { color: #991b1b; background: #fee2e2; }

/* ---------- feedback ---------- */

.ecom-empty {
  text-align: center;
  padding: 56px 20px;
  color: var(--color-text-muted, #6f6759);
}

.ecom-empty-title {
  font-size: 1.5rem;
  margin: 0 0 8px;
}

.ecom-empty-body { margin: 0 auto 24px; max-width: 46ch; color: inherit; }

.ecom-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--color-text, #2b2620);
  color: var(--color-surface, #ffffff);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: var(--font-size-sm, 0.85rem);
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast, 120ms ease);
  z-index: 50;
}

.ecom-toast[data-visible="true"] { opacity: 1; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .ecom-detail { grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); }
}

@media (max-width: 960px) {
  .ecom-hero { grid-template-columns: 1fr; }
  .ecom-hero-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .ecom-detail { grid-template-columns: 1fr; gap: 28px; }
  .ecom-buybox { position: static; }
  .ecom-reviews { grid-template-columns: 1fr; }
  .ecom-cart-layout { grid-template-columns: 1fr; }
  .ecom-summary { position: static; }
  .ecom-checkout-layout { grid-template-columns: 1fr; }
  .ecom-checkout-aside { position: static; }
  .ecom-footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .ecom-container { padding: 20px 16px; }
  .ecom-nav-inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding: 10px 16px;
    gap: 10px;
  }
  .ecom-nav-search { grid-column: 1 / -1; max-width: none; }
  .ecom-nav-link-text { display: none; }
  .ecom-category-bar-inner { padding: 0 16px; }
  .ecom-hero { padding: 0 16px; margin-top: 16px; }
  .ecom-hero-media { min-height: 360px; }
  .ecom-hero-copy { padding: 20px; }
  .ecom-hero-side { grid-template-columns: 1fr; }
  .ecom-shop-layout { grid-template-columns: 1fr; gap: 20px; }
  .ecom-filters {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 8px;
  }
  .ecom-filters-group { flex: 1 1 200px; }
  .ecom-toolbar { flex-direction: column; align-items: stretch; }
  .ecom-sort { flex: 1 1 auto; }
  .ecom-card-footer { flex-wrap: wrap; }
  .ecom-card-footer .ecom-button { flex: 1 1 100%; }
  .ecom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .ecom-line {
    grid-template-columns: 72px minmax(0, 1fr);
    row-gap: 12px;
  }
  .ecom-line-thumb { width: 72px; height: 72px; }
  .ecom-line-subtotal { text-align: left; }
  .ecom-review-form-row { grid-template-columns: 1fr; }
  .ecom-footer-inner { grid-template-columns: 1fr; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .ecom-card-image, .ecom-hero-tile, .ecom-category-tile-image, .ecom-button, .ecom-toast, .ecom-hero-tile-link::after { transition: none; }
  .ecom-card:hover .ecom-card-image { transform: none; }
}