/* =========================================================
   EssentialsbyD — Design System v2 ("Editorial")
   Replaces the Phase 9 "apothecary" token set entirely.
   Direction: full-bleed photography grid, monochrome palette,
   single grotesk typeface, zero radius, hairline rules only.
   The one signature device carried over from the brand's lab
   heritage is the small "specimen tag" on every editorial
   image block — everything else stays quiet on purpose.
   ========================================================= */

:root {
  /* ---- palette (monochrome, warm-stone placeholders) ---- */
  --ebd-ink:        #0d0d0d;
  --ebd-white:      #ffffff;
  --ebd-paper:      #f7f7f5;   /* product-tile / panel background */
  --ebd-line:       #e4e4e1;   /* hairline rules */
  --ebd-mute:       #7a7a76;   /* secondary text */
  --ebd-mute-2:     #b9b8b3;
  --ebd-ph-a:       #dcd9d2;   /* image-placeholder duotone, stop A */
  --ebd-ph-b:       #b7b3a8;   /* image-placeholder duotone, stop B */

  /* ---- type ---- */
  --ebd-font: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ebd-tag-font: "Inter", monospace, sans-serif;

  /* ---- layout ---- */
  --ebd-gutter: 1px;           /* grid uses hairline gutters, not gaps */
  --ebd-container: 1600px;
  --ebd-nav-h: 64px;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  background: var(--ebd-white);
  color: var(--ebd-ink);
  font-family: var(--ebd-font);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font-family: inherit; font-size: inherit; }

/* focus visibility kept even in a quiet design */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--ebd-ink);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.ebd-container { max-width: var(--ebd-container); margin: 0 auto; padding: 0 24px; }

/* ---------------- header ---------------- */
.ebd-header {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--ebd-nav-h);
  padding: 0 24px;
  border-bottom: 1px solid var(--ebd-line);
  position: relative;
}
.ebd-logo {
  font-size: 15px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ebd-nav { display: flex; gap: 28px; }
.ebd-nav a {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ebd-mute);
}
.ebd-nav a:hover, .ebd-nav a.is-active { color: var(--ebd-ink); }
.ebd-header-icons { display: flex; gap: 18px; align-items: center; }
.ebd-icon-btn {
  background: none; border: 0; cursor: pointer; padding: 4px;
  display: flex; align-items: center; color: var(--ebd-ink);
}
.ebd-cart-badge {
  font-family: var(--ebd-tag-font); font-size: 10px;
  border: 1px solid var(--ebd-ink); border-radius: 50%;
  width: 15px; height: 15px; display: inline-flex;
  align-items: center; justify-content: center; margin-left: 4px;
}

/* ---------------- image placeholder (no product photography yet) ---------------- */
.ebd-ph {
  width: 100%; height: 100%;
  background: linear-gradient(155deg, var(--ebd-ph-a), var(--ebd-ph-b));
  position: relative; overflow: hidden;
}
.ebd-ph::after {
  content: attr(data-label);
  position: absolute; bottom: 12px; right: 14px;
  font-family: var(--ebd-tag-font); font-size: 10px; letter-spacing: 0.06em;
  color: rgba(13,13,13,0.55); text-transform: uppercase;
}

/* ---------------- specimen tag (signature device) ---------------- */
.ebd-tag {
  position: absolute; left: 16px; bottom: 16px;
  font-family: var(--ebd-tag-font); font-size: 10px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ebd-white);
  background: rgba(13,13,13,0.72);
  border: 1px solid rgba(255,255,255,0.4);
  padding: 5px 9px;
}

/* ---------------- editorial grid (homepage) ---------------- */
.ebd-editorial-row {
  display: grid; gap: var(--ebd-gutter);
  border-bottom: var(--ebd-gutter) solid var(--ebd-line);
}
.ebd-editorial-row[data-split="7-5"] { grid-template-columns: 7fr 5fr; }
.ebd-editorial-row[data-split="5-7"] { grid-template-columns: 5fr 7fr; }
.ebd-editorial-row[data-split="6-6"] { grid-template-columns: 1fr 1fr; }
.ebd-editorial-cell { position: relative; aspect-ratio: 4 / 5; }
.ebd-editorial-cell.is-tall { aspect-ratio: 3 / 4.4; }
.ebd-editorial-cell a { display: block; width: 100%; height: 100%; }
.ebd-editorial-caption {
  position: absolute; left: 16px; top: 16px;
  font-size: 11px; letter-spacing: 0.04em; color: var(--ebd-white);
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}

/* ---------------- product strip (4-across) ---------------- */
.ebd-product-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ebd-gutter);
  border-bottom: var(--ebd-gutter) solid var(--ebd-line);
}
.ebd-product-tile { background: var(--ebd-paper); }
.ebd-product-tile a { display: block; }
.ebd-product-tile .ebd-ph { aspect-ratio: 1 / 1; }
.ebd-product-meta { padding: 10px 12px 18px; }
.ebd-product-name { font-size: 12px; margin: 0 0 2px; }
.ebd-product-price { font-family: var(--ebd-tag-font); font-size: 12px; color: var(--ebd-mute); }

/* ---------------- hero / rich text blocks ---------------- */
.ebd-hero { position: relative; }
.ebd-hero .ebd-ph { aspect-ratio: 21 / 9; }
.ebd-hero-copy {
  position: absolute; left: 32px; bottom: 32px; max-width: 460px; color: var(--ebd-white);
}
.ebd-hero-eyebrow { font-family: var(--ebd-tag-font); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; margin-bottom: 8px; }
.ebd-hero-heading { font-size: 34px; font-weight: 500; margin: 0 0 6px; letter-spacing: -0.01em; }
.ebd-hero-sub { font-size: 13px; opacity: 0.9; margin: 0 0 16px; }
.ebd-btn {
  display: inline-block; padding: 12px 22px; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; border: 1px solid var(--ebd-ink); background: var(--ebd-ink); color: var(--ebd-white);
  cursor: pointer;
}
.ebd-btn.is-outline { background: transparent; color: var(--ebd-ink); }
.ebd-btn.is-outline-light { background: transparent; color: var(--ebd-white); border-color: var(--ebd-white); }

.ebd-richtext { padding: 48px 24px; max-width: 720px; margin: 0 auto; font-size: 15px; }
.ebd-richtext h2 { font-weight: 500; font-size: 22px; letter-spacing: -0.01em; }

/* ---------------- product detail page ---------------- */
.ebd-pdp { display: grid; grid-template-columns: 1fr 420px; gap: var(--ebd-gutter); align-items: start; }
.ebd-pdp-gallery { position: relative; }
.ebd-pdp-gallery .ebd-ph { aspect-ratio: 3 / 4; }
.ebd-pdp-dots { position: absolute; right: 18px; top: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.ebd-pdp-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--ebd-mute-2); }
.ebd-pdp-dots span.is-active { background: var(--ebd-ink); }
.ebd-pdp-info { position: sticky; top: 24px; padding: 48px 32px; }
.ebd-pdp-info h1 { font-size: 18px; font-weight: 500; margin: 0 0 6px; }
.ebd-pdp-tagline { color: var(--ebd-mute); font-size: 13px; margin: 0 0 24px; }
.ebd-swatches { display: flex; gap: 8px; margin-bottom: 24px; }
.ebd-swatch { width: 22px; height: 22px; border: 1px solid var(--ebd-line); cursor: pointer; }
.ebd-size-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 24px; }
.ebd-size-opt {
  border: 1px solid var(--ebd-line); background: var(--ebd-white); padding: 10px 0;
  text-align: center; font-size: 12px; cursor: pointer;
}
.ebd-size-opt.is-active { border-color: var(--ebd-ink); }
.ebd-add-to-cart {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 15px 18px; background: var(--ebd-ink); color: var(--ebd-white); border: 0;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.ebd-pdp-accordion { margin-top: 28px; border-top: 1px solid var(--ebd-line); }
.ebd-pdp-accordion summary {
  padding: 14px 0; font-size: 12px; letter-spacing: 0.03em; cursor: pointer;
  border-bottom: 1px solid var(--ebd-line);
}

/* ---------------- cart / checkout line items ---------------- */
.ebd-line-item { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--ebd-line); align-items: center; }
.ebd-line-item .ebd-ph { aspect-ratio: 3 / 4; }

/* ---------------- footer ---------------- */
.ebd-footer { border-top: 1px solid var(--ebd-line); padding: 56px 24px 32px; }
.ebd-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.ebd-footer h4 { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 14px; }
.ebd-footer a { display: block; font-size: 12px; color: var(--ebd-mute); margin-bottom: 8px; }
.ebd-newsletter-row { display: flex; gap: 0; margin-top: 14px; max-width: 340px; }
.ebd-newsletter-row input { flex: 1; border: 1px solid var(--ebd-line); border-right: 0; padding: 12px; font-size: 12px; }
.ebd-newsletter-row button { border: 1px solid var(--ebd-ink); background: var(--ebd-ink); color: var(--ebd-white); padding: 0 18px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.ebd-footer-base { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--ebd-line); font-size: 11px; color: var(--ebd-mute); display: flex; justify-content: space-between; }

/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
  .ebd-editorial-row[data-split] { grid-template-columns: 1fr; }
  .ebd-product-strip { grid-template-columns: repeat(2, 1fr); }
  .ebd-pdp { grid-template-columns: 1fr; }
  .ebd-pdp-info { position: static; padding: 24px; }
  .ebd-nav { display: none; }
  .ebd-footer-grid { grid-template-columns: 1fr 1fr; }
}