/* =============================================================================
   70-cart.css — THE BASKET  (WooCommerce Cart *block*)
   =============================================================================

   The cart is the first of the two money screens and the only one on the site
   the theme does not render itself: every element below is React output from
   `wp-block-woocommerce-cart`, so this file dresses markup it cannot change.

   HOW IT IS STYLED
   ----------------
   By setting WooCommerce's own variables wherever WooCommerce reads one. The
   block's stylesheet sizes almost everything from
   `--wp--preset--font-size--small / --x-small / --medium`, so re-declaring
   those three on the block re-types the whole subtree in one place — line
   items, totals, coupon panel and the elements no rule here ever names. Only
   what a variable cannot reach is written as a selector, and never with
   `!important`.

   The block also drives itself on CONTAINER queries against
   `.wp-block-woocommerce-cart` (its breakpoint is 700px of container width,
   not viewport width), so the responsive rules at the foot of this file are
   container queries too. A viewport media query would desynchronise from the
   layout WooCommerce itself switches.

   THE COMPOSITION
   ---------------
     LEFT   a micro-kicker on the 34x1px accent rule, the column heads set as
            HUD text, then the line items: a 116px graded photographic plate,
            the name in Fraunces, the identity strip underneath it (the
            variant tag the scrape buried in the title, promoted to a label by
            inc/commerce-hygiene.php), a quiet unit price, a hairline stepper
            and a ringed remove. The column closes on a note so the panel
            beside it never ends against dead field.
     RIGHT  the ledger. Same kicker, same rule, then subtotal and shipping in
            HUD/tabular pairs, a Fraunces total that is the largest figure on
            the page, the paper commit pill, and one line of HUD under it
            saying what happens next.

   ONE ACCENT.  The two kicker rules, and nothing else. Every figure on this
   screen — line total, subtotal, shipping, grand total — is set in --ink, the
   convention 93-coherence.css settled for the card ledgers and the order
   summary. A green price here would be the third green in a view that is
   allowed one.

   DOES NOT TOUCH the empty-cart state (56-states.css owns it), the button
   family (25-controls.css), or the cart-body axis and accent-green line-item
   name fixed by 93-coherence.css — both are built on, never reverted.

   Part files load last, so this file carries its own media/container queries.
   ========================================================================== */

body.woocommerce-cart {
  /* --- The block's own type scale ------------------------------------------
     WooCommerce sizes the cart from these three. Declared on the body so the
     values reach the block, its notices and its portalled elements alike. */
  --wp--preset--font-size--x-small: 0.7rem;
  --wp--preset--font-size--small:   0.83rem;
  --wp--preset--font-size--medium:  1rem;

  /* --- This file's own measurements --------------------------------------- */
  --cart-thumb:    clamp(88px, 8vw, 116px);
  --cart-row-pad:  clamp(22px, 2.2vw, 32px);
  --cart-panel-pad: clamp(24px, 2.2vw, 32px);
  --cart-rule:     var(--ctl-hair, rgba(236, 229, 214, 0.16));
  --cart-rule-2:   color-mix(in srgb, var(--ink) 11%, transparent);
  --cart-ease:     var(--ctl-ease, cubic-bezier(0.2, 0.75, 0.2, 1));

  /* The signature: a 34x1px accent rule and a 13px gap in front of a kicker. */
  --cart-kicker-rule: linear-gradient(90deg,
      var(--color-accent) 0%,
      color-mix(in srgb, var(--color-accent) 26%, transparent) 100%);
}


/* =============================================================================
   1 · THE PAGE FRAME
   -----------------------------------------------------------------------------
   `.page-content-section` carries the chapter interval — 132px above, 216px
   below — because it is normally a full page of prose. The cart is one table
   and a panel: at that interval the screen opened on 180px of empty ground and
   closed on 296px more, which is most of a viewport of nothing on the page a
   customer is trying to leave. 05-motion.css already makes this exact
   correction for the account page; the cart takes the same tokens rather than
   inventing a third value.
   ========================================================================== */

body.woocommerce-cart .page-content-section {
  padding-top: var(--rhythm-tight, clamp(64px, 7vw, 112px));
  padding-bottom: var(--rhythm, clamp(96px, 11.7vw, 176px));
}

/* The block adds 48px/80px of its own on top of that. Keep the interval in
   ONE place — the section — so the two never compound. The horizontal zeroing
   is 93-coherence.css's left-axis fix, restated here only so this file's
   padding shorthand cannot undo it. */
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-cart .wp-block-woocommerce-cart.alignwide {
  padding: 0;
  max-width: none;
}


/* =============================================================================
   2 · THE TWO COLUMNS
   ========================================================================== */

body.woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout {
  /* stretch, not flex-start: the two columns must measure the same height or
     the note at the foot of the left one has nothing to bottom-align to. */
  align-items: stretch;
  margin-bottom: 0;
}

body.woocommerce-cart .wc-block-cart .wc-block-cart__main {
  display: flex;
  flex-direction: column;
  width: 62%;
  padding-right: clamp(40px, 4.4vw, 78px);
}

body.woocommerce-cart .wc-block-cart .wc-block-cart__sidebar {
  width: 38%;
  padding-left: 0;
  margin-top: 0;
}


/* =============================================================================
   3 · THE TWO KICKERS

   Both columns open on the same three-part lockup as every other section on
   the site: 34x1px accent rule, 13px gap, 0.7rem/0.17em uppercase label. The
   right-hand one is WooCommerce's own "Cart totals" heading re-set; the
   left-hand one has no element to attach to, so it is drawn on the main
   column's ::before. Two kickers on one baseline also give the band its
   right-hand counterweight.
   ========================================================================== */

body.woocommerce-cart .wc-block-cart .wc-block-cart__main::before,
body.woocommerce-cart .wc-block-cart .wc-block-cart__totals-title {
  display: block;
  box-sizing: border-box;
  margin: 0 0 clamp(20px, 2vw, 30px);
  padding: 0 0 0 47px;
  background-image: var(--cart-kicker-rule);
  background-repeat: no-repeat;
  background-position: left 0.42em;
  background-size: 34px 1px;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--color-text-light);
  text-align: left;
}

body.woocommerce-cart .wc-block-cart .wc-block-cart__main::before {
  content: "In the basket";
}


/* =============================================================================
   4 · THE COLUMN HEADS

   Chrome, not content: the same 0.66-0.7rem HUD voice as the shop toolbar and
   the hero's scroll line, seated on the table's own hairline.
   ========================================================================== */

body.woocommerce-cart .wc-block-cart .wc-block-cart-items {
  border-bottom: 1px solid var(--cart-rule);
}

body.woocommerce-cart .wc-block-cart .wc-block-cart-items__header th {
  padding: 0 0 14px;
  border-bottom: 1px solid var(--cart-rule);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
body.woocommerce-cart .wc-block-cart .wc-block-cart-items__header th:last-child {
  padding-right: 0;
  text-align: right;
}


/* =============================================================================
   5 · THE LINE ITEM
   ========================================================================== */

body.woocommerce-cart .wc-block-cart .wc-block-cart-items td {
  padding: var(--cart-row-pad) 0;
  border-top: 1px solid var(--cart-rule);
  vertical-align: top;
}
/* The head already draws the rule above the first row. */
body.woocommerce-cart .wc-block-cart .wc-block-cart-items tbody tr:first-child td {
  border-top: 0;
}

/* --- The plate ------------------------------------------------------------
   581 scraped photographs at 581 different exposures. Every grid of them on
   this site is graded to one key before it is shown; a cart is a grid of them
   too. The anchor carries the corner, the hairline and a bottom-weighted
   scrim as INSET shadows rather than a pseudo-element, because WooCommerce
   already owns ::after here for its loading shimmer. */
body.woocommerce-cart .wc-block-cart .wc-block-cart-items .wc-block-cart-item__image {
  /* border-box, so the gutter has to be added to the plate rather than taken
     out of it — at `width: var(--cart-thumb)` the photograph came out 89px. */
  width: calc(var(--cart-thumb) + clamp(18px, 1.8vw, 28px));
  padding-right: clamp(18px, 1.8vw, 28px);
}
body.woocommerce-cart .wc-block-cart .wc-block-cart-item__image > a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ctl-r, 6px);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--cart-rule);
  transition: box-shadow 0.45s var(--cart-ease);
}
/* The scrim has to sit ON the photograph, and an inset shadow paints behind a
   replaced child — so it is a pseudo-element. WooCommerce uses ::after here
   only while `.wc-block-cart--is-loading` is on the block, which is a few
   hundred milliseconds before this markup exists at all. */
body.woocommerce-cart .wc-block-cart .wc-block-cart-item__image > a::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* The catalogue's key, lifted verbatim from 50-product-card.css's veil so
     a photograph in the basket sits in the same tonal band as the card the
     customer clicked to get here: a head shade that buries the scarlet
     marketplace banner strips, then the CONSTANT 20% wash of --night that
     pulls 581 supplier photographs toward one light. */
  background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--night-2) 40%, transparent) 0%,
        color-mix(in srgb, var(--night-2) 16%, transparent) 18%,
        transparent 33%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--night) 20%, transparent) 0%,
        color-mix(in srgb, var(--night) 20%, transparent) 100%);
  box-shadow: inset 0 0 0 1px var(--cart-rule);
  border-radius: inherit;
  transform: none;
  animation: none;
  opacity: 1;
  transition: opacity 0.5s var(--cart-ease);
}
body.woocommerce-cart .wc-block-cart .wc-block-cart-item__image > a:hover::after {
  opacity: 0.6;
}
body.woocommerce-cart .wc-block-cart .wc-block-cart-items .wc-block-cart-item__image img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* Just above centre: these are objects standing on a surface, and the
     surface is the half worth losing. */
  object-position: 50% 46%;
  border: 0;
  border-radius: 0;
  filter: saturate(0.74) contrast(1.06) brightness(0.9);
  transform: scale(1.001);
  transition: transform 0.9s var(--cart-ease), filter 0.6s var(--cart-ease);
}
body.woocommerce-cart .wc-block-cart .wc-block-cart-item__image > a:hover img {
  transform: scale(1.045);
  filter: saturate(0.9) contrast(1.03) brightness(1);
}
body.woocommerce-cart .wc-block-cart .wc-block-cart-item__image > a:hover {
  box-shadow:
      inset 0 0 0 1px var(--ctl-hair-2, rgba(236, 229, 214, 0.24)),
      inset 0 -34px 42px -34px rgba(7, 12, 8, 0.7);
}

/* The quiet index the whole site puts in the corner of a repeating set — the
   category grid, the carousel, the outro's four facts. Here it sits inside the
   plate's own head shade, which is exactly the shade it needs to be legible on
   581 different photographs. */
body.woocommerce-cart .wc-block-cart .wc-block-cart-items tbody {
  counter-reset: cart-line;
}
body.woocommerce-cart .wc-block-cart .wc-block-cart-items__row {
  counter-increment: cart-line;
}
body.woocommerce-cart .wc-block-cart .wc-block-cart-items .wc-block-cart-item__image {
  position: relative;
}
body.woocommerce-cart .wc-block-cart .wc-block-cart-items .wc-block-cart-item__image::after {
  content: counter(cart-line, decimal-leading-zero);
  position: absolute;
  top: calc(var(--cart-row-pad) + 9px);
  left: 10px;
  z-index: 2;
  pointer-events: none;
  font-family: var(--font-primary);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--paper) 76%, transparent);
}

/* --- The stack ------------------------------------------------------------
   woocommerce.css rules both `.wc-block-cart-item__wrap` and the row, which
   drew a second hairline halfway down the row and doubled the one under the
   last item. The row is ruled by the cells' own border-top; nothing else in
   here draws a line. */
body.woocommerce-cart .wc-block-cart .wc-block-cart-items .wc-block-cart-item__wrap,
body.woocommerce-cart .wc-block-cart .wc-block-cart-items .wc-block-cart-items__row {
  gap: 0;
  border-bottom: 0;
}

/* The name keeps 93-coherence.css's Fraunces treatment; this only gives it a
   size that holds its own beside a 116px plate, and the room underneath it. */
body.woocommerce-cart .post-content .wc-block-cart-items .wc-block-cart-item__wrap a.wc-block-components-product-name,
body.woocommerce-cart .wc-block-cart .wc-block-cart-items .wc-block-cart-item__wrap a.wc-block-components-product-name {
  max-width: 30ch;
  margin: -0.14em 0 0;
  font-size: clamp(1.02rem, 0.42vw + 0.92rem, 1.2rem);
  line-height: 1.22;
}

/* The identity strip. inc/commerce-hygiene.php replaces 400 characters of
   scraped specification with the two or three facts that say WHICH piece this
   is — the variant tag the title used to carry, then material, capacity or
   origin. Set as HUD text, one line, never two. */
body.woocommerce-cart .wc-block-cart .wc-block-components-product-metadata {
  order: 2;
  margin: 10px 0 0;
  font-size: 0.7rem;
}
body.woocommerce-cart .wc-block-cart .wc-block-components-product-metadata__description,
body.woocommerce-cart .wc-block-cart .wc-block-components-product-metadata__description p {
  margin: 0;
  overflow: hidden;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
}

/* The unit price. The row total on the right is the figure that matters; this
   one only answers "each", so it is the quietest number in the row. */
body.woocommerce-cart .wc-block-cart .wc-block-cart-items .wc-block-cart-item__prices {
  order: 3;
  margin: 8px 0 0;
  font-size: 0.78rem;
}
body.woocommerce-cart .wc-block-cart .wc-block-cart-item__prices .wc-block-components-product-price__value,
body.woocommerce-cart .wc-block-cart .wc-block-cart-item__prices .wc-block-components-formatted-money-amount {
  font-family: var(--font-primary);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-light);
}
body.woocommerce-cart .wc-block-cart .wc-block-cart-item__prices del {
  color: var(--color-text-muted);
  text-decoration: line-through;
}
/* At quantity 1 the unit price and the row total are the same figure printed
   twice, 470px apart, with nothing to say which is which. One word fixes it,
   and it keeps meaning something at quantity 4. */
body.woocommerce-cart .wc-block-cart .wc-block-cart-items .wc-block-cart-item__prices::after {
  content: "each";
  font-family: var(--font-primary);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --- The controls --------------------------------------------------------- */
body.woocommerce-cart .wc-block-cart .wc-block-cart-items .wc-block-cart-item__quantity {
  order: 4;
  gap: 14px;
  margin-top: clamp(14px, 1.4vw, 20px);
}

/* The stepper is chrome. A hairline pill with two ghost signs in it — never a
   filled slab, which is what a --color-bg-light box on a --night page reads
   as. */
body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector {
  display: inline-flex;
  align-items: stretch;
  min-height: 40px;
  overflow: visible;
  background: transparent;
  border: 1px solid var(--cart-rule);
  border-radius: var(--ctl-r-action, 999px);
  transition: border-color 0.35s var(--cart-ease);
}
body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector:hover,
body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector:focus-within {
  border-color: var(--ctl-hair-2, rgba(236, 229, 214, 0.24));
}
body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
  min-width: 38px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--ctl-r-action, 999px);
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-light);
  opacity: 1;
  transition: color 0.3s var(--cart-ease), background-color 0.3s var(--cart-ease);
}
body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover,
body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus {
  color: var(--ink);
  background: var(--ctl-wash-1, rgba(236, 229, 214, 0.05));
  box-shadow: none;
  opacity: 1;
}
body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
  color: var(--color-text-muted);
  background: transparent;
  opacity: 0.55;
}
body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  min-width: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--font-primary);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus {
  box-shadow: none;
  outline: none;
}

/* Remove: a 38px ring, the same round icon button the pagination and the card
   actions use. Muted until it is wanted; --color-danger only on approach, so
   the one destructive control in the view is never the loudest thing in it. */
body.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--cart-rule);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.3s var(--cart-ease), border-color 0.3s var(--cart-ease),
              background-color 0.3s var(--cart-ease);
}
body.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover,
body.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:focus-visible {
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 46%, transparent);
  background: color-mix(in srgb, var(--color-danger) 9%, transparent);
}
body.woocommerce-cart .wc-block-cart .wc-block-cart-item__remove-link svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* --- The row total -------------------------------------------------------- */
body.woocommerce-cart .wc-block-cart .wc-block-cart-items .wc-block-cart-item__total {
  width: 22%;
  min-width: 118px;
  text-align: right;
}
body.woocommerce-cart .wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price__value,
body.woocommerce-cart .wc-block-cart .wc-block-cart-item__total .wc-block-components-formatted-money-amount {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: clamp(1.06rem, 0.4vw + 0.98rem, 1.24rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
body.woocommerce-cart .wc-block-cart .wc-block-cart-item__total .wc-block-components-sale-badge {
  margin-top: 8px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 34%, transparent);
  border-radius: var(--ctl-r, 6px);
  background: transparent;
  font-family: var(--font-primary);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-accent);
}


/* =============================================================================
   6 · THE FOOT OF THE LEFT COLUMN

   One line item is 158px tall; the ledger beside it is 330px. Left alone the
   band closed on a 400x170px hole in its lower left — the single most-repeated
   rejection in review. `margin-top: auto` inside the flex column pushes this
   note to the panel's own baseline, so the composition resolves on all four
   edges however many rows the basket has.
   ========================================================================== */

body.woocommerce-cart .wc-block-cart .wc-block-cart__main::after {
  content: "Nothing here is held. Stock, shipping and any duties are confirmed at the next step, and no payment is taken until you say so.";
  display: block;
  max-width: 46ch;
  margin-top: auto;
  padding: clamp(26px, 2.6vw, 38px) 0 0 47px;
  background-image: var(--cart-kicker-rule);
  background-repeat: no-repeat;
  background-position: left clamp(31px, 2.6vw + 6px, 44px);
  background-size: 34px 1px;
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0.005em;
  color: var(--color-text-muted);
}


/* =============================================================================
   7 · THE LEDGER

   A real panel, on the form plane: 25-controls.css's --ctl-panel-face sits
   BELOW the page ground, which is what makes the paper pill on it read as
   lifted. Sticky, so on a long basket the total and the commit button stay
   with the reader.
   ========================================================================== */

body.woocommerce-cart .wc-block-cart .wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block {
  padding: var(--cart-panel-pad);
  border: 1px solid var(--ctl-panel-edge, rgba(244, 240, 228, 0.11));
  border-radius: var(--ctl-r, 6px);
  background: var(--ctl-panel-face, rgba(7, 12, 8, 0.62));
  box-shadow: inset 0 1px 0 rgba(236, 229, 214, 0.035);
}

/* WooCommerce pads every row in a sidebar by 16px so a panel's own padding is
   optional. The panel has real padding now, so the rows sit flush in it. */
body.woocommerce-cart .wc-block-cart .wc-block-components-sidebar .wc-block-components-panel,
body.woocommerce-cart .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-coupon,
body.woocommerce-cart .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-item {
  padding-left: 0;
  padding-right: 0;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-totals-wrapper {
  padding: 14px 0;
  border-top-color: var(--cart-rule);
}
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-wrapper:first-child {
  padding-top: 0;
}

/* --- Subtotal / shipping: HUD label, tabular figure ----------------------- */
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-item {
  align-items: baseline;
}
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-item__label {
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-item__value {
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-item__description {
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* --- The total: the largest figure on the screen -------------------------- */
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-footer-item {
  align-items: baseline;
  padding-top: 4px;
}
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: clamp(1.1rem, 0.5vw + 1rem, 1.34rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
}
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax-value {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: clamp(1.7rem, 1.1vw + 1.4rem, 2.15rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.032em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax {
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --- Coupons: a disclosure, not a form ------------------------------------ */
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-coupon .wc-block-components-panel__button {
  padding: 0;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-light);
  transition: color 0.3s var(--cart-ease);
}
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-coupon .wc-block-components-panel__button:hover {
  color: var(--ink);
}
body.woocommerce-cart .wc-block-cart .wc-block-components-panel__button-icon {
  fill: currentColor;
  transition: transform 0.4s var(--cart-ease);
}
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-coupon__form {
  gap: 10px;
  margin-top: 16px;
}

/* --- Commit --------------------------------------------------------------- */
body.woocommerce-cart .wc-block-cart .wc-block-cart__submit {
  padding: 0;
  margin-top: clamp(22px, 2.2vw, 30px);
}
body.woocommerce-cart .wc-block-cart .wc-block-cart__submit-container {
  padding: 0;
}
body.woocommerce-cart .wc-block-cart .wc-block-cart__payment-options {
  padding: 0;
}

/* The HUD line under the commit button — what the next screen is, said in the
   chrome voice. It closes the panel the way the hero closes on its scroll
   line rather than on a button's bottom edge. */
body.woocommerce-cart .wc-block-cart .wc-block-cart__submit::after {
  content: "Next · Delivery details, then payment";
  display: block;
  margin-top: 16px;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-muted);
}


/* =============================================================================
   8 · NOTICES INSIDE THE BLOCK
   ========================================================================== */

body.woocommerce-cart .wc-block-components-notice-banner {
  border: 1px solid var(--ctl-panel-edge, rgba(244, 240, 228, 0.11));
  border-left: 2px solid var(--ctl-hair-2, rgba(236, 229, 214, 0.24));
  border-radius: var(--ctl-r, 6px);
  background: var(--ctl-panel-face, rgba(7, 12, 8, 0.62));
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text);
}
body.woocommerce-cart .wc-block-components-notice-banner.is-success {
  border-left-color: var(--color-accent);
}
body.woocommerce-cart .wc-block-components-notice-banner.is-error {
  border-left-color: var(--color-danger);
}


/* =============================================================================
   9 · WIDTH

   Container queries, against `.wp-block-woocommerce-cart` — the element
   WooCommerce declares `container-type: inline-size` on and switches its own
   layout at 700px of. Matching that boundary is what keeps this file in step
   with the markup instead of fighting it half a breakpoint out of phase.
   ========================================================================== */

@container (max-width: 899px) {
  body.woocommerce-cart .wc-block-cart .wc-block-cart__main,
  body.woocommerce-cart .wc-block-cart .wc-block-cart__sidebar {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }
  body.woocommerce-cart .wc-block-cart .wc-block-cart__sidebar {
    margin-top: clamp(38px, 4vw, 56px);
  }
  /* Stacked, the note is no longer resolving a hole beside the panel — it is
     simply the last thing before it, so it stops stretching the column. */
  body.woocommerce-cart .wc-block-cart .wc-block-cart__main::after {
    margin-top: clamp(26px, 3vw, 38px);
    max-width: none;
  }
}

/* Below 700px WooCommerce turns the row into a grid of its own and hides both
   the column heads and the remove control. Losing remove is a real dead end at
   quantity 1 — the minus button is disabled there — so the grid is restated
   and the control comes back. */
@container (max-width: 699px) {
  body.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
    display: grid;
    grid-template-columns: clamp(78px, 22vw, 104px) minmax(0, 1fr);
    column-gap: clamp(16px, 4vw, 22px);
    row-gap: 0;
    padding: clamp(20px, 5vw, 28px) 0;
    border-top: 1px solid var(--cart-rule);
  }
  body.woocommerce-cart .wc-block-cart table.wc-block-cart-items:not(.wc-block-mini-cart-items):not(:last-child) .wc-block-cart-items__row {
    border-bottom: 0;
  }
  body.woocommerce-cart .wc-block-cart table.wc-block-cart-items tbody tr:first-child {
    border-top: 0;
  }
  body.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td {
    padding: 0;
    border-top: 0;
  }
  body.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: auto;
    padding-right: 0;
  }
  body.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
    grid-column: 2;
    grid-row: 1;
  }
  /* The line total closes the item, right-aligned across the whole row: the
     one ledger edge a 390px column can hold. */
  body.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
    grid-column: 1 / -1;
    grid-row: 2;
    width: auto;
    min-width: 0;
    margin-top: clamp(16px, 4vw, 22px);
    text-align: right;
  }
  /* Back from display:none. */
  body.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-item__remove-link {
    display: inline-flex;
  }
  body.woocommerce-cart .wc-block-cart .wc-block-cart-items .wc-block-cart-item__quantity {
    margin-top: 16px;
  }
  body.woocommerce-cart .post-content .wc-block-cart-items .wc-block-cart-item__wrap a.wc-block-components-product-name,
  body.woocommerce-cart .wc-block-cart .wc-block-cart-items .wc-block-cart-item__wrap a.wc-block-components-product-name {
    max-width: none;
    font-size: 1rem;
  }
  body.woocommerce-cart .wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price__value,
  body.woocommerce-cart .wc-block-cart .wc-block-cart-item__total .wc-block-components-formatted-money-amount {
    font-size: 1.14rem;
  }
}

@media (max-width: 640px) {
  body.woocommerce-cart {
    --cart-panel-pad: 22px;
  }
  body.woocommerce-cart .page-content-section {
    padding-top: clamp(52px, 12vw, 72px);
    padding-bottom: clamp(72px, 16vw, 104px);
  }
  body.woocommerce-cart .wc-block-cart .wc-block-cart__main::before,
  body.woocommerce-cart .wc-block-cart .wc-block-cart__totals-title,
  body.woocommerce-cart .wc-block-cart .wc-block-cart__main::after {
    padding-left: 47px;
  }
  body.woocommerce-cart .wc-block-cart .wc-block-components-product-metadata__description,
  body.woocommerce-cart .wc-block-cart .wc-block-components-product-metadata__description p {
    white-space: normal;
    overflow: visible;
  }
}