/* ─── Cart page (overrides woocommerce/cart/cart.php template) ───
   Two-column layout: line-item cards on the left + sticky summary on the right.
   The page-wide hero handles the page title; this file styles the body. */

.vrl-cart { padding-bottom: 40px; }
/* Reset legacy Woo container constraints */
.woocommerce-cart .woocommerce { display: block; max-width: none; }
.woocommerce-cart .woocommerce-cart-form { background: transparent; border: none; box-shadow: none; border-radius: 0; max-width: none; margin: 0; }
/* Force name + button colors so legacy a-link rules can't bleed through */
.vrl-cart a.vrl-cart__item-name { color: var(--vrl-fg-base); }
.vrl-cart a.vrl-cart__item-name:hover { color: var(--vrl-link); }
.vrl-cart .btn--dark { color: #fff; }
.vrl-cart .btn--dark:hover, .vrl-cart .btn--dark:active { color: #fff; }
.vrl-cart .vrl-cart__continue { color: var(--vrl-fg-subtle); }
.vrl-cart .vrl-cart__continue:hover { color: var(--vrl-fg-base); }
.vrl-cart .vrl-cart__item-remove { color: var(--vrl-fg-muted); }
.vrl-cart .vrl-cart__item-remove:hover { color: #dc2626; }
.vrl-cart__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 20px; margin-bottom: 12px; }
.vrl-cart__head h2 { font-family: var(--vrl-font-display); font-weight: 800; font-size: 24px; line-height: 1.2; letter-spacing: 0; margin: 0; color: var(--vrl-fg-base); }
.vrl-cart__count { font-family: var(--vrl-font-ui); font-size: 13px; color: var(--vrl-fg-muted); }

.vrl-cart__benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 20px;
  background: var(--vrl-white);
  border: 1px solid var(--vrl-border);
  border-radius: 8px;
}
.vrl-cart__benefit {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 16px 20px;
}
.vrl-cart__benefit + .vrl-cart__benefit { border-left: 1px solid var(--vrl-border); }
.vrl-cart__benefit svg {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 10px;
  color: var(--vrl-savings-deep);
  background: var(--vrl-savings-bg);
  border-radius: 8px;
}
.vrl-cart__benefit div { min-width: 0; }
.vrl-cart__benefit strong,
.vrl-cart__benefit span { display: block; }
.vrl-cart__benefit strong { color: var(--vrl-navy); font-family: var(--vrl-font-display); font-size: 14px; font-weight: 700; line-height: 1.3; }
.vrl-cart__benefit span { margin-top: 2px; color: var(--vrl-fg-muted); font-family: var(--vrl-font-ui); font-size: 12px; line-height: 1.35; }

.vrl-cart__progress.vrl-cart__threshold {
  margin-bottom: 20px;
  padding: 14px 18px;
  background: var(--vrl-savings-bg);
  border: 1px solid var(--vrl-savings-border);
  border-radius: 8px;
}
.vrl-cart__progress .vrl-cart__threshold-msg { margin: 0 0 10px; color: var(--vrl-savings-deep); font-family: var(--vrl-font-ui); font-size: 13.5px; }
.vrl-cart__progress .vrl-cart__threshold-msg b { font-weight: 700; }
.vrl-cart__progress .vrl-cart__threshold-bar { height: 6px; overflow: hidden; background: rgba(22, 163, 74, 0.18); border-radius: 9999px; }
.vrl-cart__progress .vrl-cart__threshold-fill { height: 100%; background: linear-gradient(90deg, var(--vrl-savings), var(--vrl-savings-bright)); transition: width 0.4s ease; }
.vrl-cart__progress .vrl-cart__threshold-milestones { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--vrl-fg-muted); font-family: var(--vrl-font-ui); font-size: 11px; }
.vrl-cart__progress .vrl-cart__threshold-gift { display: flex; flex-direction: column; gap: 1px; }
.vrl-cart__progress .vrl-cart__threshold-gift b,
.vrl-cart__progress .vrl-cart__threshold-milestone.is-hit { color: var(--vrl-savings-deep); font-weight: 700; }
.vrl-cart__progress .vrl-cart__threshold-gift small { font-size: 10px; line-height: 1.25; }

/* ─── Free-shipping progress strip ─── */

/* ─── Two-column layout ─── */
.vrl-cart__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) { .vrl-cart__grid { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
  .vrl-cart__head { align-items: flex-start; flex-direction: column; gap: 2px; padding-top: 16px; }
  .vrl-cart__grid { grid-template-columns: 1fr; }
  .vrl-cart__benefits { grid-template-columns: 1fr; }
  .vrl-cart__benefit { padding: 14px; }
  .vrl-cart__benefit + .vrl-cart__benefit { border-top: 1px solid var(--vrl-border); border-left: 0; }
  .vrl-cart__progress.vrl-cart__threshold { padding: 14px; }
}

/* ─── Line items column ─── */
.vrl-cart__items { display: flex; flex-direction: column; gap: 12px; }
.vrl-cart__item {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  grid-template-areas:
    "thumb info total"
    "thumb ctrls total";
  column-gap: 18px;
  row-gap: 10px;
  align-items: center;
  background: var(--vrl-white);
  border: 1px solid var(--vrl-border);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: var(--vrl-shadow-xs);
}
.vrl-cart__item-thumb     { grid-area: thumb; align-self: start; }
.vrl-cart__item-main      { grid-area: info; }
.vrl-cart__item-controls  { grid-area: ctrls; }
.vrl-cart__item-line-total { grid-area: total; align-self: center; }
.vrl-cart__item-thumb {
  display: block; width: 92px; height: 92px;
  border-radius: 12px;
  background: var(--vrl-mint);
  border: 1px solid var(--vrl-border);
  overflow: hidden;
  padding: 8px; box-sizing: border-box;
}
.vrl-cart__item-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vrl-cart__item-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vrl-cart__item-name { font-family: var(--vrl-font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.3px; color: var(--vrl-fg-base); text-decoration: none; }
.vrl-cart__item-name:hover { color: var(--vrl-link); }
.vrl-cart__item-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vrl-cart__item-price { font-family: var(--vrl-font-display); font-weight: 700; font-size: 16px; color: var(--vrl-fg-base); font-variant-numeric: tabular-nums; }
.vrl-cart__item-unit { margin-left: -5px; color: var(--vrl-fg-muted); font-family: var(--vrl-font-ui); font-size: 11px; font-weight: 600; }
.vrl-cart__item-was { font-family: var(--vrl-font-display); font-size: 13px; color: var(--vrl-fg-muted); text-decoration: line-through; }
.vrl-cart__item-save {
  font-family: var(--vrl-font-ui); font-size: 11px; font-weight: 700;
  color: var(--vrl-savings-deep);
  background: var(--vrl-savings-bg);
  border: 1px solid var(--vrl-savings-border);
  border-radius: 9999px; padding: 2px 8px;
}
.vrl-cart__item-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vrl-cart__item-controls .qty {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--vrl-border-strong); border-radius: 9999px; overflow: hidden;
}
.vrl-cart__item-controls .qty button { width: 32px; height: 32px; background: transparent; border: none; font-size: 15px; cursor: pointer; color: var(--vrl-fg-base); }
.vrl-cart__item-controls .qty button:hover { background: var(--vrl-bg-subtle); }
.vrl-cart__item-controls .qty input { width: 40px; text-align: center; border: none; outline: none; background: transparent; font: inherit; font-weight: 600; -moz-appearance: textfield; }
.vrl-cart__item-controls .qty input::-webkit-outer-spin-button, .vrl-cart__item-controls .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vrl-cart__item-remove { font-family: var(--vrl-font-ui); font-size: 13px; font-weight: 600; color: var(--vrl-fg-muted); text-decoration: none; }
.vrl-cart__item-remove:hover { color: #dc2626; }
.vrl-cart__item--gift { border-color: #bde9ca; background: linear-gradient(135deg, #f7fff9 0%, #effcf3 100%); }
.vrl-cart__gift-note { display: flex; flex-direction: column; gap: 2px; max-width: 46ch; font-family: var(--vrl-font-ui); }
.vrl-cart__gift-note strong { color: #0f6c35; font-size: 13px; line-height: 1.3; }
.vrl-cart__gift-note span { color: var(--vrl-fg-muted); font-size: 11.5px; line-height: 1.35; }
.vrl-cart__item-line-total { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-family: var(--vrl-font-display); font-weight: 800; font-size: 18px; color: var(--vrl-fg-base); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vrl-cart__item-line-total small { color: var(--vrl-fg-muted); font-family: var(--vrl-font-ui); font-size: 9.5px; font-weight: 600; letter-spacing: .02em; }

@media (max-width: 560px) {
  .vrl-cart__item {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
      "thumb info"
      "thumb ctrls"
      "total total";
    padding: 12px 14px;
    column-gap: 12px;
    row-gap: 8px;
  }
  .vrl-cart__item-thumb { width: 72px; height: 72px; }
  /* Line total drops to its own full-width row so it can't overlap the
     price row's SAVE pill once the grid loses its third column. */
  .vrl-cart__item-line-total {
    grid-area: total;
    justify-self: end;
    align-self: center;
    width: 100%;
    text-align: right;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--vrl-border);
  }
}

/* Automatic water gift: a compact included-item row, not a full paid-product card. */
.vrl-cart .vrl-cart__item--gift {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  grid-template-areas: "thumb info total";
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  box-shadow: none;
}
.vrl-cart__item--gift .vrl-cart__item-thumb {
  width: 48px;
  height: 48px;
  align-self: center;
  padding: 3px;
  border-radius: 8px;
  background: #fff;
}
.vrl-cart__item--gift .vrl-cart__item-main { gap: 3px; }
.vrl-cart__item--gift .vrl-cart__item-name { font-size: 14px; line-height: 1.3; letter-spacing: -.15px; }
.vrl-cart__item--gift .vrl-line-chips { display: none; }
.vrl-cart__item--gift .vrl-cart__gift-note span { color: #36734d; font-size: 12px; line-height: 1.35; }
.vrl-cart__item--gift .vrl-cart__item-line-total {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
}
.vrl-cart__gift-badge {
  padding: 4px 7px;
  border-radius: 6px;
  background: #dff5e7;
  color: #126635;
  font-family: var(--vrl-font-ui);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .04em;
}

/* ─── Cart actions row ─── */
.vrl-cart__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.vrl-cart__actions .btn { padding: 9px 16px; font-size: 13px; }
.vrl-cart__continue { font-family: var(--vrl-font-ui); font-size: 13.5px; font-weight: 600; color: var(--vrl-fg-subtle); text-decoration: none; }
.vrl-cart__continue:hover { color: var(--vrl-fg-base); }

/* ─── Summary card ─── */
.vrl-cart__summary {
  position: sticky; top: 96px;
  background: var(--vrl-white); border: 1px solid var(--vrl-border);
  border-radius: 18px; padding: 24px;
  box-shadow: 0 18px 40px -24px rgba(1,15,45,0.24);
}
@media (max-width: 900px) { .vrl-cart__summary { position: static; } }
.vrl-cart__summary h2 { font-family: var(--vrl-font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.3px; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--vrl-border); }
.vrl-cart-b2g1 { position: relative; margin: 0 0 12px; padding: 11px; overflow: hidden; border: 1px solid #c9daf3; border-radius: 12px; background: linear-gradient(135deg, #f5f9ff 0%, #fff 76%); color: var(--vrl-navy, #010f2d); font-family: var(--vrl-font-ui); }
.vrl-cart-b2g1--unlocked { border-color: #a7dfbb; background: linear-gradient(135deg, #effbf4 0%, #fff 76%); }
.vrl-cart-b2g1__head { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.vrl-cart-b2g1__badge { display: grid; place-items: center; width: 38px; height: 32px; border-radius: 9px; background: #e3edfc; color: #125db1; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .035em; }
.vrl-cart-b2g1--unlocked .vrl-cart-b2g1__badge { background: #15834a; color: #fff; }
.vrl-cart-b2g1__copy { display: block; min-width: 0; }
.vrl-cart-b2g1__copy strong,
.vrl-cart-b2g1__copy small { display: block; letter-spacing: 0; }
.vrl-cart-b2g1__copy strong { font-size: 13px; line-height: 1.2; font-weight: 850; }
.vrl-cart-b2g1__copy small { margin-top: 2px; overflow: hidden; color: #5b6879; font-size: 10.5px; line-height: 1.25; font-weight: 520; text-overflow: ellipsis; white-space: nowrap; }
.vrl-cart-b2g1__count { min-width: 38px; color: #31577f; font-size: 11px; line-height: 1; font-weight: 850; text-align: right; font-variant-numeric: tabular-nums; }
.vrl-cart-b2g1--unlocked .vrl-cart-b2g1__count { color: #117141; }
.vrl-cart-b2g1__track { position: relative; height: 6px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #dfe8f5; }
.vrl-cart-b2g1__fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #2788e6, #1765bd); transition: width 240ms ease; }
.vrl-cart-b2g1--unlocked .vrl-cart-b2g1__fill { background: linear-gradient(90deg, #34ce78, #15834a); }
.vrl-cart-b2g1__step { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.82); }
.vrl-cart-b2g1__step--one { left: 33.333%; }
.vrl-cart-b2g1__step--two { left: 66.666%; }
/* Cycling BOGO: the standing offer needs 3 units per free vial (two ticks dividing thirds); the
   cycling promotion needs only 2 (one tick at the midpoint), and 1 needs none. The template adds
   --gate-2/--gate-1 on the track only when the gate isn't 3, so flag-off markup is untouched. */
.vrl-cart-b2g1__track--gate-2 .vrl-cart-b2g1__step--one { left: 50%; }
.vrl-cart-b2g1__track--gate-2 .vrl-cart-b2g1__step--two { display: none; }
.vrl-cart-b2g1__track--gate-1 .vrl-cart-b2g1__step { display: none; }
.vrl-cart-b2g1__exclusion { margin: 7px 0 0; color: #6c7787; font-size: 10.5px; line-height: 1.3; font-weight: 600; }
.vrl-cart__clarity { margin: -3px 0 10px; padding: 10px 11px; border: 1px solid #d9e7f7; border-radius: 10px; background: #f6f9fd; color: #536174; font-family: var(--vrl-font-ui); font-size: 11px; line-height: 1.45; }
.vrl-cart__summary-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; font-family: var(--vrl-font-ui); font-size: 14px; color: var(--vrl-fg-subtle); }
.vrl-cart__summary-row b { color: var(--vrl-fg-base); font-family: var(--vrl-font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.vrl-cart__summary-row--save { color: var(--vrl-savings-deep); }
.vrl-cart__summary-row--save b { color: var(--vrl-savings-deep); }

.vrl-cart__coupon { display: flex; gap: 8px; margin: 12px 0; }
.vrl-cart__coupon input { flex: 1; min-width: 0; padding: 10px 14px; border: 1.5px solid var(--vrl-border-strong); border-radius: 10px; background: var(--vrl-white); font-family: var(--vrl-font-ui); font-size: 13.5px; outline: none; }
.vrl-cart__coupon input:focus { border-color: var(--vrl-link); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.vrl-cart__coupon .btn { padding: 10px 14px; font-size: 13px; }

.vrl-cart__summary-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--vrl-border);
  padding-top: 14px; margin-top: 6px;
  font-family: var(--vrl-font-display); font-weight: 800;
}
.vrl-cart__summary-total span { font-size: 15px; color: var(--vrl-fg-subtle); font-weight: 700; }
.vrl-cart__summary-total b { font-size: 22px; letter-spacing: -0.6px; color: var(--vrl-navy); font-variant-numeric: tabular-nums; }

.vrl-cart__minimum {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff7f7;
  font-family: var(--vrl-font-ui);
}
.vrl-cart__minimum-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #b91c1c;
  color: #fff;
  font-weight: 800;
  line-height: 1;
}
.vrl-cart__minimum > div > strong,
.vrl-cart__minimum > div > span { display: block; }
.vrl-cart__minimum strong { color: #7f1d1d; font-size: 13px; font-weight: 800; }
.vrl-cart__minimum div > span { margin-top: 3px; color: #7f1d1d; font-size: 12px; line-height: 1.45; }
.vrl-cart__minimum div > span b { display: inline; color: inherit; font-weight: 800; }
.vrl-cart__minimum .woocommerce-Price-amount,
.vrl-cart__minimum .woocommerce-Price-amount bdi,
.vrl-cart__minimum .woocommerce-Price-currencySymbol {
  display: inline;
  white-space: nowrap;
}

.vrl-cart__delivery {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--vrl-bg-subtle);
  border: 1px solid var(--vrl-border);
  border-radius: 10px;
  font-family: var(--vrl-font-ui);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--vrl-fg-muted);
}
.vrl-cart__delivery b { color: var(--vrl-fg-base); font-weight: 600; }
.vrl-cart__delivery svg { color: var(--vrl-savings); flex-shrink: 0; }

.vrl-cart__summary .btn--full { width: 100%; margin-top: 14px; padding: 14px; font-size: 15px; justify-content: center; }
.vrl-cart__checkout-disabled {
  min-height: 48px;
  border-color: #cbd5e1;
  background: #e2e8f0;
  color: #475569;
  cursor: not-allowed;
  text-align: center;
}

.vrl-cart__trust { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.vrl-cart__trust span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--vrl-font-ui); font-size: 12px; color: var(--vrl-fg-muted); }
.vrl-cart__trust svg { width: 14px; height: 14px; color: var(--vrl-savings); flex-shrink: 0; }

/* ─── Empty cart fallback (WC default markup) ─── */
.cart-empty { font-family: var(--vrl-font-ui); font-size: 16px; color: var(--vrl-fg-subtle); text-align: center; padding: 40px 0; }
.return-to-shop { text-align: center; margin-top: 16px; }

@media (max-width: 520px) {
  .vrl-cart-b2g1 { padding: 9px; border-radius: 10px; }
  .vrl-cart-b2g1__head { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; }
  .vrl-cart-b2g1__badge { width: 34px; height: 29px; border-radius: 8px; font-size: 9px; }
  .vrl-cart-b2g1__copy strong { font-size: 12.5px; }
  .vrl-cart-b2g1__copy small { font-size: 9.5px; }
  .vrl-cart-b2g1__count { min-width: 34px; font-size: 10.5px; }
  .vrl-cart-b2g1__track { height: 5px; margin-top: 7px; }
  .vrl-cart-b2g1__exclusion { margin-top: 6px; font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .vrl-cart-b2g1__fill { transition: none; }
}

/* ── Cart free-shipping progress — brand-blue restyle (overrides earlier green) ── */
.vrl-cart .vrl-cart__threshold { padding: 15px 18px; background: var(--vrl-mint); border: 1px solid var(--vrl-border); border-radius: var(--vrl-radius-card, 16px); }
.vrl-cart .vrl-cart__threshold.is-unlocked { background: linear-gradient(135deg, var(--vrl-savings-bg), #ecfdf5); border-color: var(--vrl-savings-border); }
.vrl-cart .vrl-cart__threshold-msg { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 13.5px; font-weight: 600; color: var(--vrl-fg-base); }
.vrl-cart .vrl-cart__threshold-msg b { color: var(--vrl-navy); font-weight: 800; }
.vrl-cart .vrl-cart__threshold.is-unlocked .vrl-cart__threshold-msg b { color: var(--vrl-savings-deep); }
.vrl-cart .vrl-cart__threshold-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: #1668d6; box-shadow: 0 1px 2px rgba(16,20,30,.12); }
.vrl-cart .vrl-cart__threshold-ic svg { width: 16px; height: 16px; }
.vrl-cart .vrl-cart__threshold.is-unlocked .vrl-cart__threshold-ic { color: var(--vrl-savings-bright); }
.vrl-cart .vrl-cart__threshold-bar { height: 8px; overflow: hidden; background: rgba(22,104,214,.14); border-radius: 9999px; }
.vrl-cart .vrl-cart__threshold-fill { height: 100%; background: linear-gradient(90deg, #2a93f5, #1668d6); border-radius: 9999px; transition: width .5s var(--vrl-ease-out, ease-out); }
.vrl-cart .vrl-cart__threshold.is-unlocked .vrl-cart__threshold-fill { background: linear-gradient(90deg, var(--vrl-savings-bright), var(--vrl-savings)); }
.vrl-cart .vrl-cart__threshold-milestones { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--vrl-fg-muted); font-size: 11px; }
.vrl-cart .vrl-cart__threshold-milestone { font-weight: 700; color: var(--vrl-navy); }
.vrl-cart .vrl-cart__threshold-milestone.is-hit { color: var(--vrl-savings-deep); }

/* Express wallet button (veyragate-pay-express injects .veyra-mce into the summary, between the delivery strip and
   Checkout). Give it the summary's 14px rhythm so it no longer sits flush against the delivery strip, and size it like
   the Checkout button below it. */
.vrl-cart__summary .veyra-mce { margin: 14px 0 0; }
.vrl-cart__summary .veyra-mce + .btn--full { margin-top: 12px; }
.vrl-cart__summary .veyra-mce-btn { min-height: 48px; border-radius: 999px; }
.vrl-cart__summary .veyra-mce-error:empty { display: none; }

/* ═══ Cycling BOGO — cart-page placement for the gold chip, and the outcome note (Task 10) ═══
   Append-only: nothing above this block is edited. The chip's own appearance is defined once, in
   cart-drawer.css, which is enqueued on every page; only what is specific to THIS surface is here.

   .vrl-cart__item-main is a flex COLUMN (line 121 above), so a chip dropped into it becomes a flex
   item and stretches to the full column width — a full-width gold bar, not a pill. align-self pins
   it back to its own content. The drawer's .cart-line__main is an ordinary block, so it needs
   nothing and gets nothing. */
.vrl-cart__item-main > .vrl-bogo-chip {
  align-self: flex-start;
  margin: 2px 6px 0 0;
}

/* Sits under the discount rows in the summary, in the same small-print register as
   .vrl-cart__clarity above. */
.vrl-cart__bogo-note {
  margin: 8px 0 0;
  padding: 9px 11px;
  border: 1px solid #ecd9a6;
  border-radius: 10px;
  background: #fffaef;
  color: #5c4a1e;
  font-family: var(--vrl-font-ui);
  font-size: 11px;
  line-height: 1.45;
}

/* ─── How the BOGO works, in the cart ──────────────────────────────────────
   A disclosure under the note. The padding sits on <summary>, not on <details> — padding on the
   wrapper leaves the actual tap target only as tall as the text, which is the trap this project has
   hit before. */
.vrl-cart__bogo-rules { margin: 6px 0 0; }
.vrl-cart__bogo-rules > summary {
  display: block;
  padding: 9px 2px;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--vrl-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  list-style: none;
}
.vrl-cart__bogo-rules > summary::-webkit-details-marker { display: none; }
.vrl-cart__bogo-rules > summary::after { content: " ▾"; font-size: 0.75em; opacity: 0.6; }
.vrl-cart__bogo-rules[open] > summary::after { content: " ▴"; }
.vrl-cart__bogo-rules ul {
  list-style: disc;
  margin: 2px 0 6px;
  padding-left: 18px;
  display: grid;
  gap: 5px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--vrl-ink-2, #4a5568);
}

/* Level the gold BOGO chip with the green "Stock up · Save X%" chip it sits beside. That chip is
   11px/700 with a 6px top margin (vrl-volume-bundle.php:511); the gold one was 10.5px/800 pushed up
   by a 2px margin and top-aligned, so the pair read as two different components on different lines. */
.vrl-line-chips > .vrl-bogo-chip {
  align-self: auto;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  /* The green chip carries a 12x12 icon, so ITS content box is 12px while text alone gives 11px —
     measured on live at 22px against this one's 21px, which is what read as uneven. Matching the
     line-height to the icon makes the two boxes the same height by the same arithmetic (12 + 8
     padding + 2 border), rather than pinning this one to a copied number that would drift if that
     icon ever resized. */
  line-height: 12px;
}

/* ─── One "Savings" line instead of a stack of discount rows ───────────────
   The summary was carrying up to four coloured rows before the total. They collapse into a single
   line that expands; a lone discount still renders outright, because hiding one row behind a
   disclosure is worse than showing it. The padding sits on <summary> so the whole row is the tap
   target rather than just the text. */
.vrl-cart__savings { margin: 0; }
.vrl-cart__savings > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}
.vrl-cart__savings > summary::-webkit-details-marker { display: none; }
.vrl-cart__savings > summary span::after { content: " \25BE"; font-size: 0.75em; opacity: 0.65; }
.vrl-cart__savings[open] > summary span::after { content: " \25B4"; }
.vrl-cart__savings-rows {
  margin: 2px 0 4px;
  padding-left: 12px;
  border-left: 2px solid rgba(18, 151, 80, 0.22);
}
.vrl-cart__savings-rows .vrl-cart__summary-row { font-size: 0.9em; opacity: 0.92; }

/* ─── The meter's BOGO state ───────────────────────────────────────────────
   Owner decision 2026-09-20: one block, two states. The sitewide buy-x-get-x sale is the default
   and keeps its blue; when the cycling BOGO is the offer the cart actually received, the same block
   turns gold. Two meters competing for one strip was the thing to avoid. Only the modifier's own
   colours are declared — the geometry, the track and the steps are untouched. */
.vrl-cart-b2g1--bogo {
  border-color: #e3c47e;
  background: linear-gradient(135deg, #fff8e8 0%, #fffdf8 76%);
}
.vrl-cart-b2g1--bogo .vrl-cart-b2g1__badge {
  background: linear-gradient(135deg, #f7d072 0%, #f5c451 55%, #d9a12a 100%);
  color: #010f2d;
  letter-spacing: .02em;
}
.vrl-cart-b2g1--bogo .vrl-cart-b2g1__count { color: #8a6410; }
.vrl-cart-b2g1--bogo .vrl-cart-b2g1__fill { background: linear-gradient(90deg, #f5c451 0%, #d9a12a 100%); }

/* The savings line above the total — the cart page's copy of the drawer's, same words, same helper.
   Green register, so it reads as a saving rather than another charge. */
.vrl-cart__saved {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 8px;
  padding: 9px 13px;
  border: 1px solid var(--vrl-savings-border);
  border-radius: 10px;
  background: var(--vrl-savings-bg);
  color: var(--vrl-savings-deep);
  font-family: var(--vrl-font-ui);
  font-size: 13px;
}
.vrl-cart__saved svg { flex: 0 0 auto; }
.vrl-cart__saved b { font-weight: 800; }

/* Both line chips on one row. The green chip carries its own 6px top margin from the volume
   plugin's inline CSS, so the row supplies the spacing above and zeroes the chips' own margins —
   otherwise the two contribute different offsets and stagger, which is what read as uneven. */
.vrl-line-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.vrl-line-chips > .vrl-bun-chip { margin: 0; }