/**
 * Harvest — Mini-cart drawer (C5).
 *
 * Styles Magento's core minicart UI component (`.minicart-wrapper`,
 * `.block-minicart`, `.minicart-items`) so that when the money-path (cart) task
 * re-adds the live minicart block into the Harvest header, it renders as a right
 * side-drawer in the Harvest look — no core template edits, all --hrv-* tokens.
 * Also styles the header cart-count badge the theme header emits.
 */

/* Cart-count badge (theme header). */
.hrv-cart-count,
.minicart-wrapper .action.showcart .counter.qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--hrv-radius-pill);
  background: var(--hrv-accent);
  color: var(--hrv-accent-text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.minicart-wrapper .action.showcart .counter.qty.empty { display: none; }

/* Trigger link in the header — a FILLED ACCENT PILL, per the artboard (N-28c).
 *
 * The comp's header ends with "Basket · EUR 56" on the accent, 999px, padding 10px 20px, 14/700.
 * Core renders a bare icon. The label and total come from the theme's
 * Magento_Checkout/templates/cart/minicart.phtml override — core's trigger carries no subtotal,
 * and the value lives in the cart customer-data section.
 *
 * WHY THIS LIVES HERE AND NOT IN _header.css, WHERE I FIRST PUT IT. That copy was DEAD: this
 * exact selector was ALREADY declared in this file at IDENTICAL specificity, and _mini-cart.css
 * loads AFTER _header.css, so source order decided it. The symptom was the label rendering
 * accent-on-accent — invisible — and a declaration check could not have seen that; only the
 * computed value could. **The component that owns a skin is the file that must carry it.**
 * Raising specificity from the wrong file would have won the pixel and left two rules fighting
 * over one control.
 *
 * --hrv-accent-text IS NOT WHITE HERE. On Wheat the palette deliberately flips it to the dark
 * text colour (_derived.css:182) because white on this accent fails AA. So the comp's literal
 * #FFFFFF is not copied — the token is used and contrast is preserved. */
.minicart-wrapper .action.showcart {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 10px 20px;
  border-radius: var(--hrv-radius-pill);
  background: var(--hrv-accent);
  color: var(--hrv-accent-text);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
}
.minicart-wrapper .action.showcart:hover {
  background: var(--hrv-accent-hover);
  color: var(--hrv-accent-text);
}
/* Core hides `.text` on its icon-only default; the whole point of the comp's control is that it
   reads as words. */
.minicart-wrapper .action.showcart .text {
  display: inline;
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
  color: inherit;
}
/* Core draws its cart glyph with ::before on the trigger. Inside a labelled pill it competes
   with the text for space, and the comp has no icon there. */
.minicart-wrapper .action.showcart::before,
.minicart-wrapper .action.showcart::after {
  content: none;
}
/* The count badge sat on the accent — now the pill's own background, so it would vanish into
   it. Inverted to read against the fill. */
.minicart-wrapper .action.showcart .counter.qty {
  background: color-mix(in oklab, var(--hrv-accent-text) 20%, transparent);
  color: var(--hrv-accent-text);
}

/* ---------- Drawer panel ---------- */
.minicart-wrapper .block-minicart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 400px;
  max-width: 92vw;
  margin: 0;
  padding: 24px;
  background: var(--hrv-surface);
  border: none;
  border-left: 1px solid var(--hrv-border);
  border-radius: 0;
  box-shadow: -8px 0 32px var(--hrv-shadow-tint);
  overflow-y: auto;
  z-index: 90;
}
/* Kill the default caret/arrow of the dropdown. */
.minicart-wrapper .block-minicart::before,
.minicart-wrapper .block-minicart::after { display: none; }

.block-minicart .block-title,
.block-minicart .subtitle.empty {
  font-family: var(--hrv-font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--hrv-text);
  margin-bottom: 16px;
}

/* Line items. */
.minicart-items { list-style: none; margin: 0; padding: 0; }
.minicart-items .product-item {
  border-bottom: 1px solid var(--hrv-border);
  padding: 14px 0;
}
.minicart-items .product-item-name a { color: var(--hrv-text); text-decoration: none; font-size: 14px; }
.minicart-items .product-item-name a:hover { color: var(--hrv-accent); }
.minicart-items .price { font-family: var(--hrv-font-display); font-weight: 600; color: var(--hrv-text); }
.minicart-items .product-image-photo { border-radius: var(--hrv-radius-md); }

/* Subtotal + actions. */
.block-minicart .subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 18px 0;
  font-size: 15px;
}
.block-minicart .subtotal .price {
  font-family: var(--hrv-font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--hrv-text);
}
.block-minicart .block-content > .actions { display: flex; flex-direction: column; gap: 10px; }
.block-minicart .block-content > .actions .action.primary.checkout { width: 100%; }
.block-minicart .block-content > .actions .viewcart {
  text-align: center;
  color: var(--hrv-accent);
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 767px) {
  .minicart-wrapper .block-minicart { width: 100%; max-width: 100vw; padding: 20px; }
}
/* The subtotal is server-formatted price markup (`<span class="price">`), injected by a
   `html:` binding. It must read as part of the label, not inherit price styling from
   elsewhere in the theme. */
.minicart-wrapper .action.showcart .hrv-basket-total,
.minicart-wrapper .action.showcart .hrv-basket-total .price {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
}