/* ═══════════════════════════════════════════
   Cart Page — /cart/
   Custom override of WooCommerce cart.php + cart-empty.php.
   Companion to parts/cart-drawer.php (#5 in COMPONENTS.md) — both
   read free-shipping threshold from wv_cart_thresholds() in
   functions.php.
   Mobile-first: base styles target ≤767, @media (min-width: 768px)
   and (min-width: 1280px) layer up.
   ═══════════════════════════════════════════ */

/* ── Page wrapper ───────────────────────────── */
.wv-cart {
  max-width: var(--wv-page-content-max);
  margin: 0 auto;
  padding: 16px;
}

.wv-cart__heading {
  margin: 0 0 16px;
}

.wv-cart__layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Before-cart slot — captured `woocommerce_before_cart` output,
      currently the YITH points-and-rewards earn-points callout.
      Mirrors the cart drawer's nudge-bar chrome so the rewards
      messaging lands in the brand's card aesthetic instead of WC's
      blue info-box default. ─────────────────── */
.wv-cart__before-slot {
  background: var(--wv-color-card-bg);
  border-radius: var(--wv-radius-md);
  padding: 16px;
  box-shadow: var(--wv-shadow-sm);
  margin-bottom: 16px;
  text-align: center;            /* center the redeem prompt within the card */
}

/* The earn callout was relocated under the CTA, so this slot now only carries
   the redeem form (logged-in + points). No redeem form → hide the empty card. */
.wv-cart__before-slot:not(:has(.ywpar_apply_discounts)) {
  display: none;
}

/* Reset the WC info-box default chrome that YITH carries with
   `.woocommerce-info` so the brand card surface shows through.
   The YITH callout markup is:
   <div id="yith-par-message-cart" class="woocommerce-cart-notice
        woocommerce-cart-notice-minimum-amount woocommerce-info">
     <img …/> If you proceed to checkout, you will earn <strong>N</strong> {label}!
   </div>
   These selectors are scoped under .wv-cart__before-slot so they
   only fire inside our cart-page card and don't leak elsewhere. */
.wv-cart__before-slot .woocommerce-info,
.wv-cart__before-slot #yith-par-message-cart,
.wv-cart__before-slot #yith-par-message-reward-cart {
  background: transparent;
  border: none;
  border-left: none;
  color: var(--wv-color-text-primary);
  padding: 0;
  margin: 0;
}

/* Strip YITH's info-icon ::before so only our toggle + panel show. */
.wv-cart__before-slot .woocommerce-info::before,
.wv-cart__before-slot #yith-par-message-reward-cart::before {
  content: none;
  display: none;
}

.wv-cart__before-slot #yith-par-message-cart img {
  flex-shrink: 0;
}

/* YITH renders a banner <img> with an empty/missing src when no image is
   configured → broken-image squares ("blue squares") above/around the
   points callout. Hide any src-less or empty-src image in the captured
   callout (the trophy/valid icons keep their real src and are unaffected). */
.wv-cart__before-slot img:not([src]),
.wv-cart__before-slot img[src=""],
.wv-cart__before-slot img[src="#"] {
  display: none;
}

.wv-cart__before-slot #yith-par-message-cart strong {
  color: var(--wv-color-olive-dark);
}

/* ── Line items card ───────────────────────── */
.wv-cart__items {
  background: var(--wv-color-card-bg);
  border-radius: var(--wv-radius-md);
  box-shadow: var(--wv-shadow-sm);
  padding: 16px;
}

.wv-cart__item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--wv-color-border);
}

.wv-cart__item:first-child {
  padding-top: 0;
}

.wv-cart__item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.wv-cart__item-image {
  width: 80px;
  height: 90px; /* portrait — fits the full card-image bottle, trims bottom padding */
  background: var(--wv-color-surface);
  border-radius: var(--wv-radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The WebP mu-plugin wraps wp_get_attachment_image output in
   <picture><source><img></picture>. display: contents lets the
   img's percentage-based sizing reference the fixed-size container,
   not the picture wrapper. Same fix as PDP hero containers. */
.wv-cart__item-image picture {
  display: contents;
}

.wv-cart__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top; /* card images have bottom padding — lock top, clip bottom */
}

.wv-cart__item-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.wv-cart__item-name {
  margin: 0;
}

.wv-cart__item-variant {
  color: var(--wv-color-text-secondary);
}

/* Practice pill — olive, on subscription lines. Uses accent token
   for the background and inverse text per the brand pattern. */
.wv-cart__practice-pill {
  display: inline-flex;
  align-items: center;
  background: var(--wv-color-accent);
  color: var(--wv-color-text-inverse);
  padding: 4px 10px;
  border-radius: var(--wv-radius-pill);
  margin-top: 2px;
  width: max-content;
  max-width: 100%;
}

/* Delivery cadence — plain text below the subscribe pill (no pill).
   Fixed monthly until the frequency selector ships. */
.wv-cart__delivery-meta {
  display: block;
  color: var(--wv-color-text-secondary);
  margin-top: 4px;
}

/* One-time line — meta label + upsell link to the F5 LP */
.wv-cart__onetime-meta {
  color: var(--wv-color-text-secondary);
}

.wv-cart__upsell {
  color: var(--wv-color-olive-dark);
  text-decoration: underline;
  margin-top: 2px;
  display: inline-block;
}

.wv-cart__upsell:hover {
  color: var(--wv-color-atc-hover);
}

/* Per-item action row — qty stepper + price + remove */
.wv-cart__item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.wv-cart__item-price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;               /* right-justify in the row (Remove dropped) */
}

.wv-cart__item-price-was {
  color: var(--wv-color-surface-2);
  text-decoration: line-through;
}

.wv-cart__item-remove {
  background: none;
  border: none;
  padding: 0;
  color: var(--wv-color-surface-2);
  cursor: pointer;
  text-decoration: underline;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.wv-cart__item-remove:hover {
  color: var(--wv-color-warning);
}

/* Pending state on AJAX qty/remove */
.wv-cart__item--updating {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity var(--wv-transition-base);
}

/* ── Notice / error panel ──────────────────── */
.wv-cart__notices {
  border: 1px solid var(--wv-color-warning);
  border-radius: var(--wv-radius-sm);
  padding: 12px 16px;
  color: var(--wv-color-warning);
  margin-bottom: 16px;
}

.wv-cart__notices ul,
.wv-cart__notices p {
  margin: 0;
}

/* ── Summary card ──────────────────────────── */
.wv-cart__summary {
  background: var(--wv-color-card-bg);
  border-radius: var(--wv-radius-md);
  box-shadow: var(--wv-shadow-sm);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The summary rows now live inside this reconcile wrapper, so it must carry
   the same column gap the .wv-cart__summary flex used to give each row. */
.wv-cart__summary-totals {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wv-cart__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.wv-cart__summary-row--practice-savings,
.wv-cart__summary-row--coupon-savings {
  color: var(--wv-color-olive-dark);
}

.wv-cart__summary-divider {
  height: 1px;
  background: var(--wv-color-surface);
  margin: 4px 0;
}

.wv-cart__summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* Coupon — email-input visual lineage (22px corners) */
.wv-cart__coupon {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* Promo input + Apply — mirrors the checkout promo styling (clean box +
   dark filled Apply). The input carries a visible border here since the cart
   summary card is white (the checkout's transparent border sits on a tinted
   surface). */
.wv-cart__coupon-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px;                 /* 16px floor — iOS no-zoom */
  background: var(--wv-color-card-bg);
  border: 1px solid var(--wv-color-border);
  border-radius: var(--wv-radius-sm);
  color: var(--wv-color-text-primary);
}

.wv-cart__coupon-input:focus {
  outline: none;
  border-color: var(--wv-color-text-primary);
}

/* Dark filled Apply button (uppercase + font come from .wv-label-btn). */
.wv-cart__coupon-apply {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 18px;
  background: var(--wv-color-text-primary);
  color: var(--wv-color-text-inverse);
  border: 0;
  border-radius: var(--wv-radius-sm);
  cursor: pointer;
  transition: background var(--wv-transition-base);
}

.wv-cart__coupon-apply:hover {
  background: var(--wv-color-olive-dark);
}

.wv-cart__coupon-applied {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--wv-color-olive-dark);
}

.wv-cart__coupon-remove {
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  color: var(--wv-color-surface-2);
  cursor: pointer;
}

.wv-cart__coupon-error {
  color: var(--wv-color-warning);
  margin-top: 4px;
  display: none;
}

.wv-cart__coupon-error--active {
  display: block;
}

/* Primary checkout CTA — matches the flyout drawer's checkout button
   (.wv-cart-drawer__checkout): dark text-primary fill, cream text, GG 700
   body-size uppercase, 48px tall, accent on hover. (Font set locally, no
   .wv-label-btn class — mirrors the drawer's own local font.) */
.wv-cart__checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  background: var(--wv-color-text-primary);
  color: var(--wv-color-text-inverse);
  font-family: var(--wv-font-primary);
  font-weight: 700;
  font-size: var(--wv-fs-body);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background var(--wv-transition-base);
}

.wv-cart__checkout-btn:hover {
  background: var(--wv-color-accent);
  color: var(--wv-color-text-inverse);
}

/* Disabled while blocker (unpurchasable) items remain. */
.wv-cart__checkout-btn--disabled,
.wv-cart__checkout-btn--disabled:hover {
  background: var(--wv-color-surface-2);
  color: var(--wv-color-text-secondary);
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}

/* Express checkout block — divider + gateway button slot.
   Hidden by default; revealed via .wv-cart__express--visible class
   once a gateway has actually injected content (MutationObserver). */
.wv-cart__express {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.wv-cart__express--visible {
  display: flex;
}

.wv-cart__express-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--wv-color-text-secondary);
  margin: 4px 0;
}

.wv-cart__express-divider::before,
.wv-cart__express-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--wv-color-surface);
}

.wv-cart__express-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center; /* center the PayPal/Venmo row horizontally */
  text-align: center;
}

/* Container-only constraints on gateway buttons — never override
   their own colors / radius / labels (Apple Pay HIG + PayPal SDK
   own those). */
.wv-cart__express-buttons > * {
  width: 100%;
  max-width: 100%;
}

/* PayPal/Venmo: when the SDK renders its button container narrower than
   the full-width slot (it caps smart-button width), center it instead of
   letting it sit left. margin-inline:auto can't collapse the width, so
   full-width renders are unaffected. Targets PayPal's own stable hooks. */
.wv-cart__express-buttons .paypal-buttons,
.wv-cart__express-buttons [id^="zoid-paypal-buttons"] {
  margin-inline: auto;
}

/* Trust region — copied from /checkout (wv-checkout__trust): badge slot +
   "100% Secure Checkout · 90-Day Money-Back Guarantee · Easy Returns". */
.wv-cart__trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.wv-cart__trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.wv-cart__trust-badges img {
  height: 28px;
  width: auto;
}
.wv-cart__trust-text {
  color: var(--wv-color-text-secondary);
  text-align: center;
}

/* ── Empty state ───────────────────────────── */
.wv-cart__empty {
  max-width: 480px;
  margin: 64px auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px;
}

.wv-cart__empty-title {
  margin: 0;
}

.wv-cart__empty-body {
  margin: 0;
}

.wv-cart__empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wv-color-accent);
  color: var(--wv-color-text-inverse);
  padding: 14px 28px;
  border-radius: var(--wv-radius-pill);
  text-decoration: none;
  min-height: 44px;
  width: max-content;
  margin: 8px auto 0;
  transition: background var(--wv-transition-base);
}

.wv-cart__empty-cta:hover {
  background: var(--wv-color-atc-hover);
  color: var(--wv-color-text-inverse);
}

.wv-cart__empty-secondary {
  color: var(--wv-color-text-secondary);
}

.wv-cart__empty-secondary a {
  color: var(--wv-color-olive-dark);
  text-decoration: underline;
}

.wv-cart__empty-secondary a:hover {
  color: var(--wv-color-atc-hover);
}

/* ═══════════════════════════════════════════
   Tablet+ (≥768): pad up, item row grows
   ═══════════════════════════════════════════ */
@media (min-width: 768px) {
  .wv-cart {
    padding: 40px;
  }

  .wv-cart__heading {
    margin: 0 0 24px;
  }

  .wv-cart__before-slot {
    margin-bottom: 24px;
  }

  .wv-cart__layout {
    gap: 24px;
  }

  .wv-cart__item {
    grid-template-columns: 120px 1fr;
    gap: 20px;
    padding: 20px 0;
  }

  .wv-cart__item-image {
    width: 120px;
    height: 135px;
  }

  .wv-cart__items,
  .wv-cart__summary {
    padding: 24px;
  }

  .wv-cart__empty {
    margin: 96px auto;
  }
}

/* ═══════════════════════════════════════════
   Desktop (≥1280): two-column layout with sticky summary
   ═══════════════════════════════════════════ */
@media (min-width: 1280px) {
  .wv-cart {
    padding: 80px 40px;
  }

  .wv-cart__layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: start;
  }

  .wv-cart__main {
    min-width: 0;
  }

  .wv-cart__aside {
    position: sticky;
    top: 100px;
  }
}

/* ── Stale-cart validation (Phase A) — chips + summary ──────────
   Mirrors the drawer. Chip typography from .wv-label-small in markup. */
.wv-cart__stale-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  margin-top: 6px;                 /* padding above the chip */
  padding: 3px 8px;
  border-radius: var(--wv-radius-sm);
}
/* TODO(a11y): dismiss × / Remove tap targets are < 44px (WCAG 2.5.5 AAA) —
   inline chip controls; revisit sizing in a periodic a11y pass. */
.wv-cart__stale-dismiss {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.wv-cart__stale-remove-btn {
  flex: 0 0 auto;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  font: inherit;
  cursor: pointer;
}
.wv-cart__stale-chip--gone,
.wv-cart__stale-chip--oos,
.wv-cart__stale-chip--blocker {
  background: var(--wv-color-warning);
  color: var(--wv-color-text-inverse);
}
.wv-cart__stale-chip--low_stock {
  background: var(--wv-color-amber);
  color: var(--wv-color-text-primary);
}
.wv-cart__stale-chip--price_up {
  background: var(--wv-color-surface);
  color: var(--wv-color-text-secondary);
}

.wv-cart__item--stale-remove {
  opacity: 0.6;
}

/* "X items …" summary — derived roll-up (self-clears at zero). */
.wv-cart__stale-summary {
  display: block;
  margin: 8px 0 16px;              /* padding above + below */
  padding: 12px 16px;
  border-radius: var(--wv-radius-md);
}
.wv-cart__stale-summary--info {
  background: var(--wv-color-amber);
  color: var(--wv-color-text-primary);
}
.wv-cart__stale-summary--blocker {
  background: var(--wv-color-warning);
  color: var(--wv-color-text-inverse);
}
.wv-cart__stale-summary a {
  color: inherit;
  text-decoration: underline;
}

/* ── YITH redeem — collapsible (ported from the checkout treatment) ──
   wv-cart.js wraps YITH's redeem form (in .wv-cart__before-slot) into a toggle
   ("You have N points to redeem!" + chevron) over a grid-rows animated panel
   (conversion line + Apply button), default expanded. */
.wv-cart__before-slot .ywpar_apply_discounts {
  display: block;
  margin: 0;
}

/* Toggle (header bar) — the collapse control; one centered line. */
.wv-cart__before-slot .wv-redeem__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 4px 0;
  background: none;
  border: 0;
  color: var(--wv-color-text-primary);
  font: inherit;
  font-weight: 400;
  text-transform: none;
  text-align: center;
  cursor: pointer;
}

.wv-redeem__chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--wv-color-text-primary);
  border-bottom: 2px solid var(--wv-color-text-primary);
  transform: rotate(45deg);
  transition: transform var(--wv-transition-base);
}

.wv-cart__before-slot.is-redeem-open .wv-redeem__chevron {
  transform: rotate(-135deg);
}

/* Panel — grid-rows animated collapse. */
.wv-redeem__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 350ms ease;
}

.wv-cart__before-slot.is-redeem-open .wv-redeem__panel {
  grid-template-rows: 1fr;
}

.wv-redeem__panel-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
  text-align: center;
  line-height: 1.6;
  transition: padding 350ms ease;
}

.wv-cart__before-slot.is-redeem-open .wv-redeem__panel-inner {
  padding: 4px 0 8px;
}

/* Points entry — small bordered inline box (16px font = no iOS zoom). */
.wv-cart__before-slot .ywpar_apply_discounts input[type="text"] {
  display: inline-block;
  width: 72px;
  min-height: 0;
  margin: 0 2px;
  padding: 4px 8px;
  font-size: 16px;
  text-align: center;
  vertical-align: middle;
  background: var(--wv-color-card-bg);
  border: 1px solid var(--wv-color-text-primary);
  border-radius: var(--wv-radius-sm);
  color: var(--wv-color-text-primary);
}

/* Apply button — text-primary fill. Scoped to the SUBMIT button so it never
   hits the toggle (type="button"). */
.wv-cart__before-slot .ywpar_apply_discounts button[type="submit"] {
  min-height: 44px;
  padding: 0 18px;
  background: var(--wv-color-text-primary);
  color: var(--wv-color-text-inverse);
  border: 0;
  border-radius: var(--wv-radius-sm);
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--wv-transition-base);
}

.wv-cart__before-slot .ywpar_apply_discounts button[type="submit"]:hover {
  background: var(--wv-color-olive-dark);
}

@media (prefers-reduced-motion: reduce) {
  .wv-redeem__chevron,
  .wv-redeem__panel,
  .wv-redeem__panel-inner {
    transition: none;
  }
}

/* ── Rewards earn line (under the Proceed-to-Checkout CTA) ── */
.wv-cart__earn {
  margin: 12px 0 0;
  text-align: center;
  color: var(--wv-color-text-secondary);
}

/* Subscription rewards disclaimer — paired with the suppressed redeem banner,
   sits directly under the earn line. Typography from .wv-label-small; only the
   layout + muted color are set here (mirrors .wv-cart__earn). */
.wv-cart__rewards-disclaimer {
  margin: 6px 0 0;
  text-align: center;
  color: var(--wv-color-text-secondary);
}

/* Milestone tracker keeps its own gap below it so the spacing survives when
   the stale summary (which used to provide it) is dismissed. /cart only — the
   drawer header owns its own spacing. */
.wv-cart__main > .wv-cart-nudge {
  margin-bottom: 16px;
}

/* .wv-cart__recurring styles live in cart-drawer.css (loaded site-wide) so the
   recurring note is styled on BOTH the /cart page and the flyout drawer. */