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

/* Quick view: hover launcher on the card media + iframe overlay modal.
   The launcher sits inside the card <a>; its click is intercepted in the
   page template's inline JS (preventDefault/stopPropagation). */
.atl-product-media .atl-qv-btn {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 10px 0;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--atl-surface);
  color: var(--atl-text);
  border: 1px solid var(--atl-border-strong);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.atl-product-card:hover .atl-qv-btn,
.atl-product-card:focus-within .atl-qv-btn,
.atl-qv-btn:focus-visible { opacity: 1; }
.atl-qv-btn:focus-visible { outline: 2px solid var(--atl-focus-ring); outline-offset: 2px; }

.atl-qv-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--atl-overlay-scrim);
}
.atl-qv-overlay[hidden] { display: none; }
.atl-qv-dialog {
  position: relative;
  width: min(960px, 100%);
  height: min(680px, 90vh);
  background: var(--atl-bg);
  border: 1px solid var(--atl-border-strong);
}
.atl-qv-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  background: var(--atl-surface);
  color: var(--atl-text);
  border: 1px solid var(--atl-border-strong);
  cursor: pointer;
}
.atl-qv-close:focus-visible { outline: 2px solid var(--atl-focus-ring); outline-offset: 2px; }
.atl-qv-frame { display: block; width: 100%; height: 100%; border: 0; }

/* 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);
}
/* Real image filling any themed media slot (hero, category, editorial, campaign,
   collection, lookbook, etc.). Loaded globally via default.xml, so it applies on
   every page. Sits over the placeholder gradient, which becomes a load fallback. */
.atl-media-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.atl-hero-media, .atl-editorial-media, .atl-category-image,
.atl-ed-hero-media, .atl-ed-collection-media, .atl-ed-lookbook-frame,
.atl-media-placeholder { overflow: hidden; }
/* When a real image is present, hide the placeholder label text behind it. */
.atl-media-placeholder:has(.atl-media-img) .atl-media-placeholder-label { display: none; }

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