/* =============================================================
   Health Channels — Shop / Cart / Checkout
   Layers on top of main.css. Uses main.css tokens only —
   NO tokens redefined here. Load AFTER main.css.
   ============================================================= */

/* ---------- 1. Shop grid ---------- */
.shop-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6);
}
.shop-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.shop-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.shop-card__stage {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: var(--card-tint, var(--green-100));
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 4%, 2.5rem);
}
.shop-card__ghost {
  position: absolute; left: -0.08em; bottom: -0.25em;
  font-family: "Fraunces", serif; font-weight: 700; font-size: clamp(6rem, 22vw, 12rem);
  color: var(--card-acc, var(--green-700)); opacity: .1; line-height: 1;
  pointer-events: none; user-select: none;
}
.shop-card__packshot { position: relative; max-height: 100%; width: auto; object-fit: contain; }
.shop-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop-card__stage--photo { padding: 0; }
.shop-card__stage--photo .shop-card__ghost { color: var(--paper); opacity: .18; z-index: 1; }

.shop-card__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-6); flex: 1; }
.shop-card__cat { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--card-acc, var(--ink-faint)); }
.shop-card__name { font-family: "Fraunces", serif; font-weight: 600; font-size: var(--fs-h4); color: var(--green-800); }
.shop-card__pack { color: var(--ink-soft); font-size: var(--fs-sm); }
.shop-card__price {
  font-family: "Fraunces", serif; font-weight: 600; font-size: var(--fs-h3);
  color: var(--green-800); margin-top: var(--sp-2);
}
.shop-card__price .srp { font-family: "Inter", sans-serif; font-weight: 500; font-size: var(--fs-sm); color: var(--ink-faint); letter-spacing: .02em; }
.shop-card__price--request { font-family: "Fraunces", serif; font-style: italic; font-size: var(--fs-h4); color: var(--ink-soft); }
.shop-card__min { font-size: var(--fs-sm); color: var(--ink-faint); }
.shop-card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-4); }
.shop-card .btn { font-size: var(--fs-sm); }

/* accent-recolored add button per card */
.shop-card .btn-add { background: var(--card-acc, var(--green-700)); color: var(--paper); border-color: transparent; }
.shop-card .btn-add:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--sh-md); }
/* Whitelight accent is too light for white text -> darken it via color-mix */
.shop-card--whitelight .btn-add,
.shop-card--whitelight .btn-external { background: color-mix(in srgb, var(--card-acc) 55%, black); color: var(--paper); }

/* ---------- 2. Shop notes (discount / delivery) ---------- */
.shop-notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); margin-top: var(--sp-8); }
.shop-note {
  background: var(--paper-alt); border: 1px solid var(--line);
  border-left: 4px solid var(--green-700); border-radius: var(--r-md); padding: var(--sp-6);
}
.shop-note h3 { font-size: var(--fs-h4); color: var(--green-800); margin-bottom: var(--sp-2); }
.shop-note p { color: var(--ink-soft); font-size: var(--fs-sm); }

/* ---------- 3. Order strip (product-page drop-in helper) ---------- */
.order-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-5);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-6); box-shadow: var(--sh-sm);
}
.order-strip__price { display: flex; flex-direction: column; gap: 2px; flex: none; }
.order-strip__amount { font-family: "Fraunces", serif; font-weight: 600; font-size: var(--fs-h3); color: var(--green-800); line-height: 1.1; }
.order-strip__amount .srp { font-family: "Inter", sans-serif; font-weight: 500; font-size: var(--fs-sm); color: var(--ink-faint); }
.order-strip__amount--request { font-style: italic; font-size: var(--fs-h4); color: var(--ink-soft); }
.order-strip__pack { font-size: var(--fs-sm); color: var(--ink-soft); }
.order-strip__min { font-size: var(--fs-sm); color: var(--ink-faint); flex: 1 1 12rem; }
.order-strip .btn { flex: none; }
.order-strip .btn-add { background: var(--acc, var(--green-700)); color: var(--paper); border-color: transparent; }
.order-strip .btn-add:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--sh-md); }

/* ---------- 4. Nav cart button (matches sibling nav pattern) ---------- */
.nav-cart {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: none; border: 1px solid transparent; cursor: pointer; color: inherit;
  transition: background var(--dur-fast) var(--ease-out);
}
.nav-cart::before {
  /* simple bag glyph, drawn with borders so no icon dependency */
  content: ""; width: 15px; height: 14px; border: 2px solid currentColor;
  border-radius: 0 0 4px 4px; box-shadow: none;
}
.nav-cart::after {
  content: ""; position: absolute; top: 9px; width: 11px; height: 7px;
  border: 2px solid currentColor; border-bottom: 0; border-radius: 6px 6px 0 0;
}
.nav-cart:hover { background: rgba(0,0,0,.05); }
.site-nav--over .nav-cart:hover { background: rgba(255,255,255,.14); }
.nav-cart #cart-count {
  position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: var(--r-pill);
  background: var(--gold-cta); color: var(--green-900);
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 11px; line-height: 18px;
  text-align: center; letter-spacing: 0;
}
.nav-cart #cart-count[hidden] { display: none; }
.nav-links .nav-cart { color: var(--green-800); }
.site-nav--over .nav-links .nav-cart { color: var(--paper); }
.site-nav.is-scrolled .nav-links .nav-cart { color: var(--green-800); }

/* ---------- 5. Cart drawer ---------- */
.hc-cart { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.hc-cart.is-open { visibility: visible; }
.hc-cart__overlay {
  position: absolute; inset: 0; background: rgba(18,39,29,.5);
  opacity: 0; transition: opacity var(--dur) var(--ease-out);
}
.hc-cart.is-open .hc-cart__overlay { opacity: 1; }
.hc-cart__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(420px, 100%); background: var(--paper);
  display: flex; flex-direction: column;
  box-shadow: var(--sh-lg); transform: translateX(100%);
  transition: transform var(--dur) var(--ease-out); outline: none;
}
.hc-cart.is-open .hc-cart__panel { transform: none; }
.hc-cart__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-6); border-bottom: 1px solid var(--line); flex: none;
}
.hc-cart__title { font-size: var(--fs-h4); color: var(--green-800); }
.hc-cart__close {
  width: 40px; height: 40px; background: none; border: 0; cursor: pointer;
  font-size: 1.8rem; line-height: 1; color: var(--ink-soft);
}
.hc-cart__list { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-6); }
.hc-cart__empty { color: var(--ink-soft); text-align: center; padding: var(--sp-8) var(--sp-4); }
.hc-cart__foot { flex: none; padding: var(--sp-6); border-top: 1px solid var(--line); background: var(--white); }
.hc-cart__totals { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-3); }
.hc-cart__totals span { color: var(--ink-soft); font-size: var(--fs-sm); }
.hc-cart__totals strong { font-family: "Fraunces", serif; font-weight: 600; font-size: var(--fs-h4); color: var(--green-800); }
.hc-cart__note { font-size: var(--fs-sm); color: var(--ink-faint); line-height: 1.5; margin-bottom: var(--sp-4); }
.hc-cart__checkout { width: 100%; }
.hc-cart__checkout.is-disabled { pointer-events: none; opacity: .55; }
body.hc-cart-open { overflow: hidden; }

/* Cart line */
.hc-line { display: grid; grid-template-columns: 60px 1fr auto; gap: var(--sp-4); padding: var(--sp-5) 0; border-bottom: 1px solid var(--line); }
.hc-line:last-child { border-bottom: 0; }
.hc-line__thumb { width: 60px; height: 60px; border-radius: var(--r-md); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hc-line__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.hc-line__name { font-weight: 600; color: var(--green-800); }
.hc-line__pack { font-size: var(--fs-sm); color: var(--ink-soft); }
.hc-line__min { font-size: var(--fs-eyebrow); color: var(--ink-faint); margin-bottom: var(--sp-2); }
.hc-line__side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.hc-line__total { font-family: "Fraunces", serif; font-weight: 600; color: var(--green-800); }
.hc-line__remove { background: none; border: 0; cursor: pointer; color: var(--ink-faint); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: .2em; padding: 0; }
.hc-line__remove:hover { color: var(--green-700); }

/* Stepper */
.hc-stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.hc-stepper__btn { width: 30px; height: 30px; background: var(--white); border: 0; cursor: pointer; color: var(--green-800); font-size: 1.1rem; line-height: 1; }
.hc-stepper__btn:hover { background: var(--green-050); }
.hc-stepper__qty { min-width: 34px; text-align: center; font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }

/* ---------- 6. Checkout ---------- */
.checkout-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.checkout-review { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: var(--sp-6); }
.checkout-review h2 { font-size: var(--fs-h4); color: var(--green-800); margin-bottom: var(--sp-4); }
.co-line { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.co-line__name { font-weight: 600; color: var(--green-800); }
.co-line__meta { font-size: var(--fs-sm); color: var(--ink-soft); }
.co-line__side { text-align: right; }
.co-line__total { font-family: "Fraunces", serif; font-weight: 600; color: var(--green-800); }
.co-line__qtyctl { display: inline-flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.co-remove { background: none; border: 0; cursor: pointer; color: var(--ink-faint); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: .2em; padding: 0; }
.co-remove:hover { color: var(--green-700); }
.checkout-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 2px solid var(--green-800); }
.checkout-total span { font-weight: 600; color: var(--green-800); }
.checkout-total strong { font-family: "Fraunces", serif; font-weight: 600; font-size: var(--fs-h3); color: var(--green-800); }
.checkout-empty { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--ink-soft); }

.checkout-rules { margin-top: var(--sp-5); background: var(--green-050); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); }
.checkout-rules h3 { font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--sp-3); }
.checkout-rules ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.checkout-rules li { position: relative; padding-left: var(--sp-4); color: var(--ink-soft); font-size: var(--fs-sm); }
.checkout-rules li::before { content: ""; position: absolute; left: 0; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: var(--green-600); }

/* radio payment options */
.pay-options { display: grid; gap: var(--sp-3); }
.pay-option { display: flex; align-items: flex-start; gap: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.pay-option:hover { border-color: var(--green-600); }
.pay-option input { margin-top: .2em; accent-color: var(--green-700); }
.pay-option__label { font-weight: 600; color: var(--green-800); }
.pay-option__hint { font-size: var(--fs-sm); color: var(--ink-soft); display: block; }

/* ---------- 7. Responsive ---------- */
@media (max-width: 1024px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .shop-notes { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .shop-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .order-strip { flex-direction: column; align-items: stretch; }
  .order-strip .btn { width: 100%; }
}