/* ════════════════════════════════════════════════════════════════════════
   S1.7 — the cart.

   The cart is a receipt on the counter. It is the one surface in the store
   where the shopper is doing arithmetic rather than browsing, so the whole
   design brief is: make the numbers legible and the totals unambiguous, and
   get everything else out of the way.

   Which means this file spends most of its length UNDOING WooCommerce's stock
   presentation rather than adding to it. Zebra striping, boxed totals, a
   rounded purple button and a full-bleed table are not neutral defaults — they
   are a different design system, and leaving any of it in place produces the
   half-restyled look that reads as an unfinished theme.

   THE CART LINE IS THE ONE PLACE THIS SLICE OWNS THE MARKUP. §2.10 specifies a
   grid whose column order differs from the stock table's and whose name column
   contains a value the stock table gives a column of its own, so the theme
   overrides woocommerce/cart/cart.php — and only that one template. The
   reasoning, and the maintenance obligation it creates, are written at the top
   of that file. Everything below the line block still targets WooCommerce's
   own classes: the totals, the buttons and the empty state are stock markup,
   restyled.
   ════════════════════════════════════════════════════════════════════════ */

@layer layout {

  /* The cart and checkout content sat flush against the viewport edge because
     the shortcode output is not inside the theme's shell. Both surfaces get
     the shell here rather than in a template wrapper, so the page keeps
     WooCommerce's own DOM. */
  .woocommerce-cart .rtv-main,
  .woocommerce-checkout .rtv-main {
    max-inline-size: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block: var(--s-6) var(--s-8);
  }

  /* index.php emits `the_title( '<h1>', '</h1>' )` — a BARE h1 inside
     <article>, with no class at all. Every `.entry-title` rule written here
     was dead code, which is why these headings kept the theme's default
     appearance and the confirmation's title could not be hidden. */
  .woocommerce-cart article > h1,
  .woocommerce-checkout article > h1 {
    margin-block: 0 var(--s-5);
    font-family: var(--rtv-font-voice);
    font-size: var(--t-34);
    line-height: var(--lh-voice);
    color: var(--rtv-ink);
  }
}

@layer components {

  /* ── the line, as a grid (§2.10) ──────────────────────────────────────
     "The cart page is not a table with borders. It is the counter, with the
     order laid out on it." §2.10 gives the line four content columns —

         72px    1fr          132px      120px
         tray  · name block · quantity · line total

     — plus a removal control described separately: "a 44x44 drawn cross at the
     row's right edge". Four content columns and a fifth control is what that
     is, so there is a fifth 44px track. The alternative readings are worse:
     floating the cross over the total puts a destructive control on top of a
     number, and putting it back in the first cell is the stock table's
     ordering, which is the thing being replaced.

     The stock table put removal FIRST, price in a column of its own, and the
     thumbnail in a cell 56px wide. All three are gone. What replaces them is
     the same shelf-rule ledger the rest of the store uses. */

  .rtv-cart__lines {
    margin-block-end: var(--s-5);
  }

  .rtv-cart__line {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 132px 120px var(--tap-min);
    gap: var(--s-4);
    align-items: center;
    padding-block: var(--s-4);
    border-block-end: var(--bw-rule) solid var(--rtv-rule);
  }

  .rtv-cart__tray {
    display: block;
    inline-size: 72px;
  }

  .rtv-cart__block { min-inline-size: 0; }

  /* Gabarito, never Anton: a product name is supplier data (§3.2). Unbounded
     wrap — no clamp, no ellipsis (§7.6), which is why the name column is the
     `1fr` and everything beside it is fixed. */
  .rtv-cart__name {
    margin: 0;
    font-family: var(--rtv-font-goods);
    font-size: var(--t-16);
    font-weight: 600;
    line-height: var(--lh-tight);
    color: var(--rtv-ink);
  }

  .rtv-cart__name a {
    color: inherit;
    text-decoration: none;
  }

  .rtv-cart__name a:hover,
  .rtv-cart__name a:focus-visible {
    text-decoration: underline;
  }

  /* The variation, and the unit price when there is more than one. Both are
     secondary facts about the line, so they share one treatment. */
  .rtv-cart__unit,
  .rtv-cart__block .variation,
  .rtv-cart__block .variation p,
  .rtv-cart__block .backorder_notification {
    margin: var(--s-1) 0 0;
    font-family: var(--rtv-font-system);
    font-size: var(--t-13);
    line-height: var(--lh-tight);
    color: var(--rtv-ink-2);
  }

  /* Woo emits the variation as a <dl>. Laid out inline so "Íz: Sós Karamell"
     reads as one line rather than as a two-row definition table. */
  .rtv-cart__block .variation {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--s-1);
  }

  .rtv-cart__block .variation dt { font-weight: 500; }
  .rtv-cart__block .variation dd { margin: 0; }

  /* The stepper is sized, not left to its content.
     `.rtv-qty`'s middle track is `1fr`, which under intrinsic sizing resolves
     to the max-content of a bare `<input type="number">` — and that is the
     browser's default ~20-character box, not the number in it. On the product
     page the stepper sits in a 132px grid column so the track never gets to
     ask; in a cart line nothing constrained it, and at 390 it grew to 266px
     and painted straight through the line total. §2.10 already names the
     width: the quantity column is 132px. It is 132px here too, at every
     viewport, so the stepper is the same object it is on the product page. */
  .rtv-cart__qty .rtv-qty-group { display: inline-flex; }
  .rtv-cart__qty .rtv-qty { inline-size: 132px; }

  .rtv-cart__total {
    margin: 0;
    font-family: var(--rtv-font-system);
    font-size: var(--t-15);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: end;
    color: var(--rtv-ink);
  }

  /* The one destructive control on the page: quiet until it is wanted, and a
     full 44x44 cell whatever the glyph inside it measures. */
  .rtv-cart__remove a.remove {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    margin-inline-start: auto;
    line-height: 1;
    text-decoration: none;
    color: var(--rtv-ink-3);
  }

  .rtv-cart__remove a.remove .rtv-mark {
    inline-size: 16px;
    block-size: 16px;
  }

  .rtv-cart__remove a.remove:hover,
  .rtv-cart__remove a.remove:focus-visible {
    color: var(--rtv-alert);
  }

  /* ── coupon + update row ──────────────────────────────────────────────
     §2.10: the coupon renders only if coupons are enabled — which the template
     asks WooCommerce, not this file — and sits "on the spine, under the last
     line, with a shelf rule above". The shelf rule is the last line's own
     bottom border, so this block only adds the space. */

  .rtv-cart__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    align-items: flex-end;
    padding-block: var(--s-4);
  }

  .rtv-cart__coupon-label {
    display: block;
    margin-block-end: var(--s-1);
    font-family: var(--rtv-font-system);
    font-size: var(--t-13);
    font-weight: 600;
    color: var(--rtv-ink);
  }

  .rtv-cart__coupon-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
  }

  /* ── the cart's own buttons ───────────────────────────────────────────
     These wear WooCommerce's `.button` / `.checkout-button` classes and are
     rendered by templates with no filter for adding the theme's classes. With
     woocommerce.css dequeued they would otherwise be bare `<button>` elements,
     so the storefront's button appearance is mapped onto the stock classes
     here. Same paint as `.rtv-btn`, on markup this slice does not own. */

  .woocommerce-cart .checkout-button,
  .woocommerce-cart .coupon button,
  .woocommerce-cart button[name='update_cart'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: var(--ctl-h);
    padding-inline: var(--s-4);
    border: 0;
    font-family: var(--rtv-font-system);
    font-size: var(--t-14);
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  /* Proceed to checkout is the one action on this page. */
  .woocommerce-cart .checkout-button {
    inline-size: 100%;
    color: var(--rtv-on-action);
    background-color: var(--rtv-green-action);
  }

  .woocommerce-cart .checkout-button:hover,
  .woocommerce-cart .checkout-button:focus-visible {
    background-color: var(--rtv-green-action-hover);
  }

  /* Coupon and update are secondary: outlined, so neither competes with it. */
  .woocommerce-cart .coupon button,
  .woocommerce-cart button[name='update_cart'] {
    color: var(--rtv-ink);
    background-color: transparent;
    box-shadow: inset 0 0 0 var(--bw-control) var(--rtv-line);
  }

  .woocommerce-cart .coupon button:hover,
  .woocommerce-cart button[name='update_cart']:hover:not([disabled]) {
    background-color: var(--rtv-ground-sunk);
  }

  /* WooCommerce disables the update button until a quantity changes. It must
     read as unavailable rather than as broken. */
  .woocommerce-cart button[name='update_cart'][disabled] {
    color: var(--rtv-ink-3);
    cursor: not-allowed;
  }

  .woocommerce-cart #coupon_code {
    block-size: var(--ctl-h);
    min-inline-size: 12rem;
    padding-inline: var(--s-3);
    border: var(--bw-control) solid var(--rtv-line);
    font-family: var(--rtv-font-system);
    font-size: var(--t-14);
    color: var(--rtv-ink);
    background-color: var(--rtv-tray);
  }

  .woocommerce-cart button[name='update_cart'] { margin-inline-start: auto; }

  /* ── totals ───────────────────────────────────────────────────────────
     A tray, aligned to the end of the shell, sized to its content. The stock
     layout floats it in a half-width column and leaves a large empty field to
     its left, which reads as a missing panel rather than as deliberate space. */

  .cart-collaterals {
    display: flex;
    justify-content: flex-end;
  }

  /* Recessed, not a white card. --rtv-tray is reserved for packshots and this
     direction has no container borders — see the note in checkout.css. */
  .cart_totals {
    inline-size: min(28rem, 100%);
    padding: var(--s-4);
    border: 0;
    border-radius: var(--r-2);
    background-color: var(--rtv-ground-sunk);
  }

  /* Rubik caps, not Anton: this labels a totals block, it is not Rutriven
     speaking. See the voice note in checkout.css. */
  .cart_totals h2 {
    margin-block: 0 var(--s-3);
    font-family: var(--rtv-font-system);
    font-size: var(--t-13);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: var(--lh-goods-caps);
    color: var(--rtv-ink-2);
  }

  .cart_totals table {
    inline-size: 100%;
    border-collapse: collapse;
  }

  .cart_totals th,
  .cart_totals td {
    padding-block: var(--s-2);
    border-block-end: var(--bw-rule) solid var(--rtv-rule);
    font-family: var(--rtv-font-system);
    font-size: var(--t-14);
    text-align: start;
    vertical-align: baseline;
    background-color: transparent;
  }

  .cart_totals th {
    font-weight: 400;
    color: var(--rtv-ink-2);
  }

  .cart_totals td {
    font-variant-numeric: tabular-nums;
    text-align: end;
    color: var(--rtv-ink);
  }

  /* The order total is the number the shopper came here to read. */
  .cart_totals .order-total th,
  .cart_totals .order-total td {
    border-block-end: 0;
    padding-block-start: var(--s-3);
    font-size: var(--t-17);
    font-weight: 700;
    color: var(--rtv-ink);
  }

  .cart_totals .includes_tax,
  .cart_totals .woocommerce-shipping-destination {
    display: block;
    font-size: var(--t-12);
    font-weight: 400;
    color: var(--rtv-ink-3);
  }

  .wc-proceed-to-checkout {
    margin-block-start: var(--s-4);
  }

  /* Same reason as the checkout's: the shipping-calculator toggle lives inside
     the now-recessed totals panel, where --rtv-link is 4.25:1. */
  .cart_totals .shipping-calculator-button {
    color: var(--rtv-link-on-sunk);
  }

  /* ── the empty cart ───────────────────────────────────────────────────
     A rule with nothing on it and a way back, exactly as the empty archive
     resolves. No illustration, no apology. */

  .cart-empty {
    margin-block: 0 var(--s-4);
    padding-block-end: var(--s-4);
    border-block-end: var(--bw-rule) solid var(--rtv-rule);
    font-family: var(--rtv-font-system);
    font-size: var(--t-17);
    color: var(--rtv-ink-2);
  }

  /* ── narrow (§2.10) ───────────────────────────────────────────────────
     "At <=640px it becomes `72px 1fr` / with quantity and total on a second
     row inside the name column, right-aligned."

     Taken literally: the tray keeps its column and spans both rows, and the
     name, the quantity and the total occupy the second column. The removal
     cross stays on the row's right edge, level with the name, because a
     destructive control that moves when the viewport narrows is a control the
     shopper has to find twice.

     One breakpoint, at 640, not the 768 the stock table needed — the grid does
     not degrade between the two, so a second breakpoint would be a rule with
     nothing to fix. */

  @media (max-width: 40rem) {
    .rtv-cart__line {
      grid-template-columns: 72px minmax(0, 1fr) var(--tap-min);
      grid-template-areas:
        'tray name  remove'
        'tray money money';
      gap: var(--s-2) var(--s-3);
      align-items: start;
    }

    .rtv-cart__tray   { grid-area: tray; }
    .rtv-cart__block  { grid-area: name; }
    .rtv-cart__remove { grid-area: remove; }

    /* Quantity and total share the second row: the stepper against the name's
       left edge, the total flush right, so a column of totals still reads as a
       column. They are two grid items in one named area rather than a wrapper
       element, because a wrapper would have to exist on desktop too, where the
       spec gives each of them its own track.

       `pointer-events: none` on the total is insurance, not layout. At 320px
       the stepper and a five-digit total leave about two pixels between them;
       if a longer currency ever closes that gap, the total must not be the
       thing that swallows a tap on the minus button. It is text — it has
       nothing to lose. */
    .rtv-cart__qty {
      grid-area: money;
      justify-self: start;
    }

    .rtv-cart__total {
      grid-area: money;
      align-self: center;
      justify-self: end;
      pointer-events: none;
    }

    .cart-collaterals { display: block; }
    .cart_totals { inline-size: 100%; }
  }

  /* ── the narrowest phones ─────────────────────────────────────────────
     The money row above shares one grid area: the 132px stepper at its start
     and the line total at its end. That works down to about 340px and stops
     working at 320, where a five-digit total overlaps the + cell — and since
     the total carries `pointer-events: none` as insurance, the overlap is a
     tap on the price pressing +. Below 350px the two get their own rows: the
     stepper first, the total under it, still flush right so a column of
     totals reads as a column. The removal cross stays on the first row. */
  @media (max-width: 21.875rem) {
    .rtv-cart__line {
      grid-template-areas:
        'tray name  remove'
        'tray money money'
        'tray total total';
    }

    .rtv-cart__total {
      grid-area: total;
      align-self: auto;
    }
  }
}