/* ============================================================
 * dh-shop.css - cart · checkout · waitlist surfaces
 * Built on the dh-v2.css token system (terra apothecary-luxury).
 * Restraint first: type and negative space carry the weight,
 * one signature device per surface, single-gesture hovers.
 * Load order on shop pages: dh-v2.css, then dh-shop.css.
 * ============================================================ */

/* ---------- Page frame ---------- */
.dh-page { min-height:100vh; display:flex; flex-direction:column; background:var(--sand); }
.dh-page__main { flex:1 0 auto; position:relative; z-index:2; }
.dh-wrap { width:100%; max-width:1180px; margin-inline:auto; padding-inline:var(--gut); }
.dh-wrap--narrow { max-width:760px; }
.dh-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.dh-mt-lg { margin-top:2rem; }

/* ---------- Minimal shop header (low-distraction by design) ---------- */
.dh-head {
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--sand) 94%, transparent);
  -webkit-backdrop-filter:saturate(150%) blur(12px); backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line-2);
}
.dh-head__inner {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1rem; min-height:68px;
}
.dh-head__back {
  justify-self:start; display:inline-flex; align-items:center; gap:.5rem;
  font-size:.92rem; color:var(--ink-3); transition:color .2s var(--ease);
}
.dh-head__back svg { width:17px; height:17px; }
.dh-head__back:hover { color:var(--ink); }
.dh-head__logo { justify-self:center; display:inline-flex; align-items:center; color:var(--ink); }
.dh-head__logo-word { font-family:var(--serif); font-weight:520; font-size:1.42rem; letter-spacing:-.018em; line-height:1; }
.dh-head__logo-dot { color:var(--terra); }
.dh-head__secure {
  justify-self:end; display:inline-flex; align-items:center; gap:.42rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.dh-head__secure svg { width:14px; height:14px; }
.dh-head__cart { position:relative; justify-self:end; display:none; width:44px; height:44px; color:var(--ink); align-items:center; justify-content:center; }
.dh-head__cart svg { width:30px; height:30px; }
.dh-head__cart .cart-count-bubble {
  position:absolute; top:3px; right:1px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--terra); color:var(--paper); font-family:var(--mono); font-size:.62rem; font-weight:600;
  line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--sand);
}
.dh-head__cart .cart-count-bubble:empty { display:none; }
/* Declutter on small screens: arrow only, drop the secure label. The empty
   1fr cell keeps the logo optically centred. */
@media (max-width:560px){
  .dh-head__back span { display:none; }
  .dh-head__secure { display:none; }
  .dh-head__inner { min-height:60px; }
}

/* ---------- Page heading ---------- */
.dh-lede { padding-top:clamp(2.2rem, 1rem + 4vw, 4rem); padding-bottom:clamp(1.4rem, 1rem + 2vw, 2.4rem); }
.dh-lede__title { font-size:clamp(2.1rem, 1.3rem + 3vw, 3.3rem); line-height:1.02; letter-spacing:-.02em; }
.dh-lede__title em { font-style:italic; color:var(--terra); }
.dh-lede__meta { margin-top:.7rem; color:var(--ink-3); font-size:1.02rem; }

/* ---------- Shared field primitives ---------- */
.dh-field { display:flex; flex-direction:column; gap:.42rem; }
.dh-field > label, .dh-label {
  font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}
.dh-field__opt { text-transform:none; letter-spacing:0; font-family:var(--sans); color:var(--ink-3); opacity:.8; }
.dh-input, .dh-select {
  width:100%; font-family:var(--sans); font-size:1.02rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.92rem 1rem; line-height:1.3; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.dh-input::placeholder { color:var(--ink-3); opacity:.62; }
.dh-input:focus, .dh-select:focus {
  outline:none; border-color:var(--terra); box-shadow:0 0 0 3px rgba(184,85,67,.16);
}
.dh-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%236c655c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:18px; padding-right:2.6rem;
}
.dh-field.is-invalid .dh-input, .dh-field.is-invalid .dh-select { border-color:#b23b2c; box-shadow:0 0 0 3px rgba(178,59,44,.14); }
.dh-field__error { display:none; font-size:.85rem; color:#b23b2c; }
.dh-field.is-invalid .dh-field__error { display:block; }
.dh-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.dh-grid-2--tight { grid-template-columns:.42fr 1fr; }

/* ---------- Cart ---------- */
.dh-shop-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.6rem, 1rem + 3vw, 3.4rem); padding-bottom:clamp(3rem, 2rem + 4vw, 6rem); }
/* Grid tracks must be allowed to shrink below their content's min-content,
   or a single long token (price, variant) forces horizontal scroll on small phones. */
.dh-shop-grid > * { min-width:0; }
@media (min-width:920px){ .dh-shop-grid { grid-template-columns:minmax(0,1.6fr) minmax(330px,.95fr); align-items:start; } }
/* On checkout, surface the order summary above the form on small screens. */
@media (max-width:919px){ .dh-shop-grid--co > .dh-summary { order:-1; } }

.dh-cart__items { display:flex; flex-direction:column; }
.dh-line {
  display:grid; grid-template-columns:88px 1fr auto; gap:1.1rem; align-items:start;
  padding:1.5rem 0; border-top:1px solid var(--line-2);
}
.dh-line:first-child { border-top:none; }
.dh-line__media { width:88px; height:88px; border-radius:var(--radius-sm); overflow:hidden; background:var(--sand-2); border:1px solid var(--line-2); }
.dh-line__media img { width:100%; height:100%; object-fit:cover; }
.dh-line__name { font-family:var(--serif); font-size:1.24rem; font-weight:500; line-height:1.1; }
.dh-line__variant { margin-top:.25rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:var(--ink-3); }
.dh-line__caption { margin-top:.5rem; font-size:.94rem; color:var(--ink-3); max-width:42ch; }
.dh-line__controls { margin-top:.85rem; display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.dh-line__side { display:flex; flex-direction:column; align-items:flex-end; gap:.6rem; }
.dh-line__price { font-family:var(--mono); font-size:1.02rem; color:var(--ink); white-space:nowrap; }

.dh-stepper { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; background:var(--paper); }
.dh-stepper button {
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  color:var(--ink-2); border:none; background:none; -webkit-appearance:none; appearance:none;
  border-radius:999px; transition:background .18s var(--ease), color .18s var(--ease);
}
.dh-stepper button:hover { background:rgba(31,29,26,.06); color:var(--ink); }
.dh-stepper button:disabled { opacity:.32; cursor:not-allowed; }
.dh-stepper button svg { width:15px; height:15px; }
.dh-stepper__val { min-width:2ch; text-align:center; font-family:var(--mono); font-size:.92rem; }
.dh-line__remove {
  border:none; background:none; padding:0; font-size:.85rem; color:var(--ink-3);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line); transition:color .18s var(--ease);
}
.dh-line__remove:hover { color:#b23b2c; }

.dh-empty { text-align:center; padding:clamp(3rem, 2rem + 5vw, 6rem) 0; }
.dh-empty__title { font-family:var(--serif); font-size:1.8rem; font-weight:500; }
.dh-empty__text { margin-top:.7rem; color:var(--ink-3); }
.dh-empty__cta { margin-top:1.8rem; display:flex; justify-content:center; }

/* ---------- Order summary card ---------- */
.dh-summary { position:relative; background:var(--paper); border:1px solid var(--line-2); border-radius:var(--radius-lg); padding:1.7rem; box-shadow:var(--shadow-md); }
@media (min-width:920px){ .dh-summary--sticky { position:sticky; top:92px; } }
.dh-summary__title { font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.dh-summary__items { margin-top:1.1rem; display:flex; flex-direction:column; gap:.95rem; }
.dh-summary__item { display:grid; grid-template-columns:46px 1fr auto; gap:.8rem; align-items:center; }
.dh-summary__thumb { width:46px; height:46px; border-radius:9px; overflow:hidden; background:var(--sand-2); border:1px solid var(--line-2); position:relative; }
.dh-summary__thumb img { width:100%; height:100%; object-fit:cover; }
.dh-summary__qty { position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:.62rem; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--paper); }
.dh-summary__name { font-size:.94rem; line-height:1.25; }
.dh-summary__name span { display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; color:var(--ink-3); margin-top:.18rem; }
.dh-summary__line-price { font-family:var(--mono); font-size:.9rem; white-space:nowrap; }

.dh-summary__divider { height:1px; background:var(--line-2); margin:1.3rem 0; }
.dh-summary__rows { display:flex; flex-direction:column; gap:.6rem; }
.dh-summary__row { display:flex; justify-content:space-between; align-items:baseline; font-size:.96rem; color:var(--ink-2); }
.dh-summary__row span:last-child { font-family:var(--mono); }
.dh-summary__row--free span:last-child { color:#3f7a4f; }
.dh-summary__total { display:flex; justify-content:space-between; align-items:baseline; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line-2); }
.dh-summary__total-label { font-family:var(--serif); font-size:1.2rem; }
.dh-summary__total-figs { text-align:right; }
.dh-summary__total-price { font-family:var(--serif); font-size:1.7rem; font-weight:500; line-height:1; }
.dh-summary__total-tax { display:block; font-size:.76rem; color:var(--ink-3); margin-top:.25rem; }

.dh-summary__cta { margin-top:1.5rem; }
.dh-summary__cta .v2-btn { width:100%; }
.dh-summary__note { margin-top:.9rem; text-align:center; font-size:.82rem; color:var(--ink-3); }

.dh-reassure { margin-top:1.4rem; display:flex; flex-direction:column; gap:.6rem; }
.dh-reassure li { display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:var(--ink-2); }
.dh-reassure svg { width:17px; height:17px; flex:none; color:var(--terra); }
.dh-pay-icons { margin-top:1.3rem; display:flex; flex-wrap:wrap; gap:.45rem; }
.dh-pay-icons svg { width:38px; height:23px; border-radius:4px; box-shadow:inset 0 0 0 1px var(--line-2); }

/* ---------- Checkout steps ---------- */
.dh-co { display:flex; flex-direction:column; gap:1.5rem; }
.dh-step { background:var(--paper); border:1px solid var(--line-2); border-radius:var(--radius-lg); padding:clamp(1.3rem, 1rem + 1.5vw, 2rem); box-shadow:var(--shadow-sm); }
.dh-step__head { display:flex; align-items:center; gap:.9rem; }
/* Signature device for checkout: the terra step numerals. */
.dh-step__num {
  flex:none; width:30px; height:30px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.82rem; font-weight:600;
  background:var(--terra); color:var(--paper); box-shadow:var(--shadow-terra);
}
.dh-step__title { font-family:var(--serif); font-size:1.4rem; font-weight:500; line-height:1; }
.dh-step__body { margin-top:1.4rem; display:flex; flex-direction:column; gap:1rem; }

/* Shipping + payment selectable rows */
.dh-choice { display:flex; flex-direction:column; gap:.7rem; }
.dh-opt {
  position:relative; display:flex; align-items:center; gap:.9rem; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:1rem 1.05rem;
  background:var(--paper); transition:border-color .18s var(--ease), background .18s var(--ease);
}
.dh-opt:hover { border-color:var(--terra-soft); }
.dh-opt input { position:absolute; opacity:0; pointer-events:none; }
.dh-opt__mark { flex:none; width:20px; height:20px; border-radius:999px; border:1.5px solid var(--line); display:grid; place-items:center; transition:border-color .18s var(--ease); }
.dh-opt__mark::after { content:""; width:10px; height:10px; border-radius:999px; background:var(--terra); transform:scale(0); transition:transform .18s var(--ease); }
.dh-opt__main { flex:1; min-width:0; }
.dh-opt__name { display:block; font-weight:600; font-size:1rem; line-height:1.3; }
.dh-opt__desc { display:block; font-size:.86rem; color:var(--ink-3); margin-top:.18rem; line-height:1.4; }
.dh-opt__price { font-family:var(--mono); font-size:.94rem; white-space:nowrap; }
.dh-opt__price--free { color:#3f7a4f; }
.dh-opt:has(input:checked) { border-color:var(--terra); background:color-mix(in srgb, var(--terra) 5%, var(--paper)); }
.dh-opt:has(input:checked) .dh-opt__mark { border-color:var(--terra); }
.dh-opt:has(input:checked) .dh-opt__mark::after { transform:scale(1); }
/* Focus ring on the whole tile so it matches the actual hit target. */
.dh-opt:has(input:focus-visible) { outline:2px solid var(--terra); outline-offset:3px; }
.dh-opt input:focus-visible ~ .dh-opt__mark { outline:2px solid var(--terra); outline-offset:3px; }

/* Payment method tiles */
.dh-pay-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
@media (min-width:560px){ .dh-pay-grid { grid-template-columns:1fr 1fr 1fr; } }
.dh-pay-opt {
  position:relative; cursor:pointer; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.95rem .9rem; background:var(--paper); display:flex; flex-direction:column; gap:.55rem;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.dh-pay-opt:hover { border-color:var(--terra-soft); }
.dh-pay-opt input { position:absolute; opacity:0; pointer-events:none; }
.dh-pay-opt__badge { width:46px; height:28px; }
.dh-pay-opt__badge svg { width:100%; height:100%; border-radius:5px; box-shadow:inset 0 0 0 1px var(--line-2); }
.dh-pay-opt__name { font-size:.9rem; font-weight:600; }
.dh-pay-opt:has(input:checked) { border-color:var(--terra); background:color-mix(in srgb, var(--terra) 5%, var(--paper)); box-shadow:0 0 0 1px var(--terra); }
.dh-pay-opt:has(input:focus-visible) { outline:2px solid var(--terra); outline-offset:3px; }
.dh-pay-opt input:focus-visible ~ .dh-pay-opt__name { outline:2px solid var(--terra); outline-offset:3px; border-radius:3px; }
.dh-pay-hint { margin-top:.4rem; font-size:.82rem; color:var(--ink-3); }

/* Card fields (Stripe Elements live inside .dh-card-input) */
.dh-card { margin-top:1.1rem; display:flex; flex-direction:column; gap:1rem; }
.dh-card[hidden] { display:none; }
.dh-card__badge {
  display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); background:color-mix(in srgb, var(--terra) 7%, var(--paper));
  border:1px solid var(--line-2); border-radius:999px; padding:.35rem .7rem;
}
.dh-card__badge svg { width:15px; height:15px; color:var(--terra); }
/* Mirror .dh-input so the Stripe iframe sits in a matching box. Stripe sets the
   field height from font-size; the padding here gives the same rhythm. */
.dh-card-input {
  width:100%; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.92rem 1rem; line-height:1.3; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.dh-card-input.StripeElement--focus {
  border-color:var(--terra); box-shadow:0 0 0 3px rgba(184,85,67,.16);
}
.dh-card-input.StripeElement--invalid {
  border-color:#b23b2c; box-shadow:0 0 0 3px rgba(178,59,44,.14);
}
.dh-card__error { font-size:.82rem; color:#b23b2c; min-height:1.1em; }
.dh-card__error:empty { display:none; }

/* Consent + place order */
.dh-consent { display:flex; gap:.75rem; align-items:flex-start; }
.dh-consent input { margin-top:.2rem; width:19px; height:19px; flex:none; accent-color:var(--terra); }
.dh-consent label { font-size:.92rem; color:var(--ink-2); line-height:1.5; }
/* terra-deep clears WCAG AA (>=4.5:1) for these required legal links. */
.dh-consent a { color:var(--terra-deep); text-decoration:underline; text-underline-offset:2px; }
.dh-consent.is-invalid label { color:#b23b2c; }
.dh-consent__error { display:none; margin-top:.4rem; font-size:.85rem; color:#b23b2c; }
.dh-consent.is-invalid .dh-consent__error { display:block; }
.dh-place { margin-top:.4rem; }
.dh-place .v2-btn { width:100%; padding:1.18rem 2rem; font-size:1.08rem; }
.dh-place__sub { margin-top:.85rem; text-align:center; font-size:.82rem; color:var(--ink-3); }
.dh-place__sub svg { width:13px; height:13px; vertical-align:-2px; margin-right:.3rem; color:var(--ink-3); }

/* Mobile order-summary toggle */
.dh-summary-bar { display:flex; }
@media (min-width:920px){ .dh-summary-bar { display:none; } }

/* ---------- Waitlist ---------- */
.dh-wl { padding:clamp(2rem, 1.5rem + 3vw, 3.75rem) 0 clamp(2.5rem, 2rem + 3vw, 4rem); }
.dh-wl__inner { max-width:560px; margin-inline:auto; }
.dh-wl__title { font-size:clamp(1.5rem, 1.2rem + 1.3vw, 2.05rem); line-height:1.2; letter-spacing:-.014em; }
.dh-wl__lede { margin-top:.85rem; font-size:clamp(1rem, .96rem + .3vw, 1.12rem); color:var(--ink-2); line-height:1.6; }

/* Signature device for the waitlist: Lena's personal note */
.dh-note { margin-top:2.6rem; display:flex; gap:1.2rem; align-items:flex-start; padding:1.6rem; background:var(--paper); border:1px solid var(--line-2); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.dh-note__portrait { flex:none; width:62px; height:62px; border-radius:999px; overflow:hidden; border:2px solid var(--paper); box-shadow:var(--shadow-sm); }
.dh-note__portrait img { width:100%; height:100%; object-fit:cover; }
.dh-note__body p { color:var(--ink-2); line-height:1.6; }
.dh-note__sign { margin-top:.7rem; font-family:var(--script); font-size:1.9rem; color:var(--terra); line-height:1; }
.dh-note__role { display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-top:.25rem; }

.dh-wl__form { margin-top:1.5rem; display:flex; flex-direction:column; gap:1.1rem; }
.dh-wl__row { display:flex; gap:.8rem; align-items:flex-start; }
.dh-wl__row .dh-field { flex:1; }
.dh-wl__form .v2-btn { white-space:nowrap; }
@media (max-width:540px){ .dh-wl__row { flex-direction:column; } .dh-wl__form .v2-btn { width:100%; } }
.dh-wl__fineprint { font-size:.86rem; color:var(--ink-3); line-height:1.55; }
.dh-wl__order { margin-top:.4rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink-3); }

.dh-wl__success { display:none; margin-top:2.2rem; padding:1.8rem; background:var(--paper); border:1px solid var(--line-2); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.dh-wl.is-done .dh-wl__form, .dh-wl.is-done .dh-wl__fineprint { display:none; }
.dh-wl.is-done .dh-wl__success { display:block; }
.dh-wl__success-mark { width:46px; height:46px; border-radius:999px; background:color-mix(in srgb, var(--terra) 12%, var(--paper)); display:grid; place-items:center; color:var(--terra); }
.dh-wl__success-mark svg { width:24px; height:24px; }
.dh-wl__success-title { font-family:var(--serif); font-size:1.5rem; font-weight:500; margin-top:1rem; }
.dh-wl__success-text { margin-top:.6rem; color:var(--ink-2); line-height:1.6; }

/* ---------- Slim shop footer ---------- */
.dh-foot { position:relative; z-index:2; border-top:1px solid var(--line-2); padding:2rem 0; margin-top:auto; }
.dh-foot__inner { display:flex; flex-wrap:wrap; gap:1rem 1.4rem; align-items:center; justify-content:space-between; }
.dh-foot__copy { font-size:.84rem; color:var(--ink-3); }
.dh-foot__links { display:flex; flex-wrap:wrap; gap:1.1rem; }
.dh-foot__links a { font-size:.84rem; color:var(--ink-3); transition:color .18s var(--ease); }
.dh-foot__links a:hover { color:var(--ink); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .dh-opt__mark::after, .dh-stepper button, .v2-btn { transition:none; }
}