/**
 * Atelier — Product card (C7). The most reused component (~45/48 pages).
 * Extracted from web/preview/home.html's inline-styled JS template — was a
 * critical architecture gap (no reusable class existed anywhere).
 */
.atl-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.atl-product-grid--3col { grid-template-columns: repeat(3, 1fr); gap: 24px 20px; }

.atl-product-card { text-decoration: none; color: var(--atl-text); display: flex; flex-direction: column; gap: 12px; }
.atl-product-card:focus-visible { outline: 2px solid var(--atl-focus-ring); outline-offset: 2px; }

.atl-product-media {
  aspect-ratio: 3/4;
  background: var(--atl-surface);
  border: 1px solid var(--atl-border);
  position: relative;
  /* Reserve height before JS/PHP populates content — prevents layout shift (CLS). */
  min-height: 200px;
}
.atl-product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--atl-accent);
  color: var(--atl-band-text);
  padding: 5px 10px;
}
.atl-product-info { display: flex; flex-direction: column; gap: 4px; }
.atl-product-name { font-size: 14px; }
.atl-product-price-row { display: flex; gap: 8px; align-items: baseline; }
.atl-product-price { font-size: 13px; color: var(--atl-text-muted); }
.atl-product-price--old { font-size: 12px; text-decoration: line-through; color: var(--atl-text-subtle); }

/* Color swatches: these render actual PRODUCT color-attribute values (e.g.
   Magento swatch_color), which are inherently dynamic per-product content —
   not theme chrome. Their inline background-color is intentional and exempt
   from the Gate B "no hard-coded colors" rule (that rule covers theme UI,
   not product data). */
.atl-product-swatches { display: flex; gap: 6px; }
.atl-product-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--atl-border-strong); }

/* Category card (C-adjacent, shares the same aspect-ratio/placeholder pattern).
   .atl-category-image intentionally uses its own text-tinted hatch ratio
   (8%/3% of --atl-text) rather than the shared .atl-media-placeholder recipe
   in _section.css (10%/4% of --atl-accent) -- a cooler/neutral treatment for
   category browsing vs. the warmer accent-tinted one used for generic
   "no photo yet" placeholders elsewhere. This is a deliberate visual choice,
   not drift; don't merge them without a design call, since doing so changes
   the shipped, palette-verified Category Grid look. */
.atl-category-card { text-decoration: none; color: var(--atl-text); display: flex; flex-direction: column; gap: 14px; }
.atl-category-card:focus-visible { outline: 2px solid var(--atl-focus-ring); outline-offset: 2px; }
.atl-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.atl-category-image {
  aspect-ratio: 3/4;
  background: repeating-linear-gradient(45deg,
    color-mix(in oklab, var(--atl-text) 8%, var(--atl-bg)),
    color-mix(in oklab, var(--atl-text) 8%, var(--atl-bg)) 10px,
    color-mix(in oklab, var(--atl-text) 3%, var(--atl-bg)) 10px,
    color-mix(in oklab, var(--atl-text) 3%, var(--atl-bg)) 20px);
}
.atl-category-name { font-family: 'Cormorant Garamond', serif; font-size: 24px; }
.atl-category-link { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--atl-accent); }

@media (max-width: 767px) {
  .atl-product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .atl-category-grid { grid-template-columns: 1fr; gap: 20px; }
  .atl-category-name { font-size: 20px; }
}