/* ==========================================================================
   blend.html — page-specific styles (product detail).
   Builds on site.css tokens/components; nothing here overrides shared rules
   outside the page's own scopes (.blend-*, .ambient*, .pairs*).
   ========================================================================== */

/* ---------- Hero ---------- */
.blend-hero .hero__inner { max-width: 820px; }
.blend-hero .media-bg { --media-pos: center 40%; }
.blend-crumbs {
  display: flex;
  text-shadow: 0 1px 18px rgba(8, 16, 12, 0.7);
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 248, 241, 0.7);
}
.blend-crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: rgba(251, 248, 241, 0.4); }
.blend-crumbs a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.blend-crumbs a:hover { color: var(--gold-300); }
.blend-crumbs [aria-current] { color: var(--gold-300); }
.blend-hero .hero__meta { margin-top: var(--space-5); }
.blend-loading { background: var(--forest-975); }

/* ---------- Layout: buy box first in DOM, placed right + sticky on desktop ---------- */
.blend-layout {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1024px) {
  .blend-layout {
    grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
    gap: var(--space-9);
  }
  .blend-layout__aside {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--nav-h) + 2.25rem);
    align-self: start;
  }
  .blend-layout__main { grid-column: 1; grid-row: 1; }
}

.blend-block + .blend-block {
  margin-top: var(--space-9);
  padding-top: var(--space-9);
  border-top: 1px solid var(--hairline);
}
.blend-block > .eyebrow + h2 { margin-top: var(--space-5); }
.blend-block > h2 + * { margin-top: var(--space-6); }
.blend-block .prose p:first-child::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.08em 0.12em 0 0;
  color: var(--accent);
}
.blend-note { margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--text-faint); }

/* ---------- Buy box ---------- */
.blend-buy .buy-box { gap: var(--space-5); }
.blend-buy__head { display: grid; gap: var(--space-2); }
.blend-buy__title { font-size: var(--fs-xl); line-height: 1.15; }
.blend-buy__from { font-size: var(--fs-sm); color: var(--text-faint); }
.size-option__flag {
  min-height: 1.25em;
  margin-bottom: var(--space-1);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.blend-buy__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}
.blend-buy__qty { display: grid; gap: var(--space-2); }
.blend-buy__qty-label,
.blend-buy__total-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.blend-buy__total { display: grid; gap: var(--space-2); text-align: right; }
.blend-buy__total .price { color: var(--text); }
.blend-buy__calc { font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.blend-buy__ship {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.blend-buy__ship svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.blend-buy__notes {
  list-style: none;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.blend-buy__notes a { color: var(--accent); display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
.blend-buy__notes li { line-height: 1.5; }
/* every size card has the same rows, and price + unit sit on a shared baseline at the bottom */
.blend-buy .size-option__box { display: flex; flex-direction: column; gap: 0.15rem; }
.blend-buy .size-option__price { margin-top: auto; padding-top: var(--space-2); }
.size-option__flag--empty { visibility: hidden; }
.btn .btn__label-price { color: rgba(5, 5, 5, 0.72); font-variant-numeric: tabular-nums; }
.btn.is-added { --btn-bg: var(--cream-50); }

/* ---------- Brew stats with icons ---------- */
.blend-brew .brew-stat { justify-items: center; }
.brew-stat__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  color: var(--accent);
}
.brew-stat__icon svg { width: 18px; height: 18px; }
.blend-brew__steps { margin-top: var(--space-7); }
@media (max-width: 479px) {
  .blend-brew .brew-stat { padding-inline: var(--space-2); }
  .blend-brew .brew-stat__value { font-size: var(--fs-xl); }
}

/* ---------- Flavour ---------- */
.blend-flavour .pullquote { max-width: 30ch; }
.blend-flavour .pullquote::before {
  content: "\201C";
  display: block;
  height: 0.55em;
  font-size: 2.2em;
  line-height: 1;
  color: var(--accent);
}

/* ---------- Ambient ingredient reel (scroll-driven) ---------- */
.ambient { position: relative; background: var(--forest-975); }
.ambient__stage.media-section {
  min-height: 100dvh;
  align-items: center;
  padding-block: calc(var(--header-h) * 0.6) var(--space-9);
}
.ambient__stage .media-bg { transform: scale(calc(1.02 + var(--p, 0) * 0.08)); transform-origin: 60% 50%; }
.ambient__grid { display: grid; gap: var(--space-7); width: 100%; }
.ambient__copy { max-width: 34rem; display: grid; gap: var(--space-5); }
.ambient__copy h2 { color: var(--cream-50); }
.ambient__copy h2 em { color: var(--gold-300); }
.ambient__copy .lead { color: rgba(251, 248, 241, 0.82); }
.ambient__count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: rgba(251, 248, 241, 0.7);
}
.ambient__count strong { color: var(--gold-300); font-weight: 400; }
.ambient__progress {
  height: 1px;
  width: min(18rem, 100%);
  background: rgba(245, 239, 227, 0.18);
  overflow: hidden;
}
.ambient__progress span {
  display: block;
  height: 100%;
  background: var(--gold-300);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}

.ambient__chips {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.ambient__chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: 0.7rem 1.1rem 0.7rem 1.2rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(245, 239, 227, 0.22);
  background: rgba(8, 16, 12, 0.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--cream-50);
  box-shadow: 0 18px 40px -24px rgba(5, 5, 5, 0.8);
  opacity: 0;
  transform: translateY(1.5rem) scale(0.94);
  filter: blur(6px);
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform 1.1s var(--ease-spring),
    filter var(--dur-4) var(--ease-out);
}
.ambient__chip.is-in { opacity: 1; transform: none; filter: none; }
.ambient__chip-name { font-family: var(--font-display); font-size: var(--fs-md); line-height: 1.2; }
.ambient__chip-part { font-size: var(--fs-xs); color: rgba(251, 248, 241, 0.66); }
.ambient__chip-pct { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--gold-300); }

/* Desktop: pin the stage while chips float in around the right half */
@media (min-width: 900px) {
  .ambient.is-pinned { height: calc(100dvh + var(--n, 6) * 20vh); }
  .ambient.is-pinned .ambient__stage {
    position: sticky;
    top: 0;
    height: 100dvh;
  }
  .ambient__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; min-height: 60vh; }
  .ambient__chips { position: relative; display: block; height: min(70vh, 640px); }
  .ambient__chip {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    translate: -50% -50%;
    white-space: nowrap;
  }
  /* one gentle drift after the 1.1s entrance, then still (WCAG 2.2.2: no endless motion) */
  .ambient__chip.is-in { animation: blend-drift 4s var(--ease-in-out) 1.2s 1; }
}
@keyframes blend-drift {
  0%, 100% { transform: none; }
  50% { transform: translate3d(0, -7px, 0); }
}

/* Reduced motion / no JS progress: show everything, no pinning */
@media (prefers-reduced-motion: reduce) {
  .ambient.is-pinned { height: auto; }
  .ambient.is-pinned .ambient__stage { position: relative; height: auto; }
  .ambient__chip { opacity: 1; transform: none; filter: none; animation: none !important; }
  .ambient__stage .media-bg { transform: none; }
}
html.mk-motion-off .ambient__chip { opacity: 1; transform: none; filter: none; animation: none; }

/* ---------- Pairs well with ---------- */
.pairs-grid { display: grid; gap: var(--space-7) var(--space-5); grid-template-columns: minmax(0, 1fr); }
.pairs-grid .section-head { margin-bottom: 0; }
@media (min-width: 640px) {
  .pairs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pairs-grid .section-head { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .pairs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .pairs-grid .section-head { grid-column: auto; position: sticky; top: calc(var(--nav-h) + 3rem); }
  .pairs-grid > .product-card:last-child { transform: translateY(var(--space-8)); }
  .js .pairs-grid[data-reveal-stagger].is-visible > .product-card:last-child { transform: translateY(var(--space-8)); }
  .pairs-grid { padding-bottom: var(--space-8); }
}
.pairs-reason { font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------- Not found ---------- */
.blend-missing .product-grid { margin-top: var(--space-8); }

/* ---------- Sticky mobile purchase bar ---------- */
.sticky-buy { visibility: hidden; transition: transform var(--dur-3) var(--ease-spring), visibility 0s linear var(--dur-3); }
.sticky-buy.is-visible { visibility: visible; transition: transform var(--dur-3) var(--ease-spring), visibility 0s; }
.sticky-buy__info { min-width: 0; display: grid; }
.sticky-buy__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-buy .btn { flex-shrink: 0; }
@media (max-width: 1023px) {
  body.has-sticky-buy .toast-region { bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
}