/* ==========================================================================
   Aitrixa — Cart page (MOBILE)
   --------------------------------------------------------------------------
   File:    assets/css/mobile-cart.css
   Enqueue: after aitrixa-cart, on is_cart() (see functions.php).
   Purpose: Mobile-specific reskin of the WooCommerce cart page. Replaces
            the desktop two-column grid with a single column, stacks the
            line item into a 96px thumb + info-column card, sticks the
            checkout total + button to the bottom of the viewport.
   Tokens:  All colors / fonts / spacing pulled from aitrixa.css. No
            hardcoded hex values.
   WC parity: Targets default WC cart markup (table.shop_table,
              tr.woocommerce-cart-form__cart-item, td.product-*,
              .cart_totals, ul.woocommerce-shipping-methods,
              .wc-proceed-to-checkout). No template overrides required.
              Three small DOM additions are injected via PHP hooks in
              functions.php: .ct-title (woocommerce_before_cart),
              [data-row-subtotal] mirror (woocommerce_after_cart_item_quantity),
              and .wc-proceed-to-checkout__total chip
              (woocommerce_proceed_to_checkout, priority 9).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Hide injected DOM at desktop sizes.
   The PHP hooks add nodes on every cart page load (mobile + desktop) so the
   mobile CSS has something to style. Outside the mobile @media query these
   nodes must not render visually — desktop should be byte-identical to
   today.
   -------------------------------------------------------------------------- */
.ct-title,
.wc-proceed-to-checkout__total,
.woocommerce-cart-form__cart-item .row-subtotal {
  display: none;
}

@media (max-width: 720px) {

  /* ----------------------------------------------------------------------
     1. Page frame — single column, no sticky summary.
     ---------------------------------------------------------------------- */
  body.woocommerce-cart .woocommerce {
    display: block;
    padding: 0;
    background: var(--page);
  }
  body.woocommerce-cart form.woocommerce-cart-form {
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  body.woocommerce-cart .cart-collaterals {
    padding: 0;
    width: 100%;
  }
  body.woocommerce-cart .cart-collaterals .cart_totals {
    position: static;
    top: auto;
    padding: 24px var(--gutter) 32px;
    background: var(--page);
    border: 0;
  }

  /* ----------------------------------------------------------------------
     2. Page title band (injected by woocommerce_before_cart hook).
     ---------------------------------------------------------------------- */
  .ct-title {
    padding: 24px var(--gutter) 18px;
    border-bottom: 1px solid var(--line);
    background: var(--page);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
  }
  .ct-title h1 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 40px;
    line-height: .96;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0;
  }
  .ct-title__count {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mute);
    white-space: nowrap;
  }
  .ct-title__count strong { color: var(--ink); font-weight: 500; }

  /* ----------------------------------------------------------------------
     3. Cart line items — 2-col grid (96px thumb | info).
     The info column hosts three logical rows: name+×, unit-price, qty+subtotal.
     ---------------------------------------------------------------------- */
  body.woocommerce-cart table.shop_table {
    background: var(--white);
    width: 100%;
    border: 0;
    margin: 0;
  }
  body.woocommerce-cart table.shop_table thead { display: none; }
  body.woocommerce-cart table.shop_table tbody { display: block; }

  body.woocommerce-cart tr.cart_item,
  body.woocommerce-cart tr.woocommerce-cart-form__cart-item {
    display: grid !important;
    grid-template-columns: 96px 1fr !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    padding: 18px var(--gutter) !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--line-soft) !important;
    background: var(--white) !important;
    align-items: start !important;
    align-content: space-between !important;
    min-height: calc(96px + 36px);
  }
  body.woocommerce-cart tr.cart_item:last-of-type,
  body.woocommerce-cart tr.woocommerce-cart-form__cart-item:last-of-type {
    border-bottom: 1px solid var(--line) !important;
  }

  /* Thumbnail — spans all 3 info rows on the left. */
  body.woocommerce-cart td.product-thumbnail {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    width: 96px !important;
    align-self: start !important;
    padding: 0 !important;
    border: 0 !important;
  }
  body.woocommerce-cart td.product-thumbnail a,
  body.woocommerce-cart td.product-thumbnail img {
    width: 96px !important;
    height: 96px !important;
    display: block !important;
    border: 1px solid var(--line) !important;
    object-fit: cover !important;
    max-width: none !important;
  }

  /* Name + size — row 1, col 2. Leaves space for the × at top-right. */
  body.woocommerce-cart td.product-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0 32px 0 0 !important;
    text-align: left !important;
    min-width: 0;
    border: 0 !important;
  }
  body.woocommerce-cart td.product-name a {
    border-bottom: 0;
    text-decoration: none;
  }
  body.woocommerce-cart td.product-name .cart-name-base {
    display: block !important;
    font-family: var(--font-serif) !important;
    font-size: 22px !important;
    line-height: 1.05 !important;
    color: var(--ink) !important;
    letter-spacing: -.005em !important;
  }
  body.woocommerce-cart td.product-name .cart-name-size {
    display: block !important;
    margin-top: 8px !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
  }
  body.woocommerce-cart td.product-name .cart-name-size-label { color: var(--mute); }
  body.woocommerce-cart td.product-name .cart-name-size-value { color: var(--ink); font-weight: 500; }

  /* Unit price — row 2, col 2. Mono caps row prefixed with "Unit price · ". */
  body.woocommerce-cart td.product-price {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center !important;
    text-align: left !important;
    font-family: var(--font-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--mute) !important;
    padding: 0 !important;
    border: 0 !important;
  }
  body.woocommerce-cart td.product-price::before {
    content: 'Unit price · ';
    color: var(--mute);
  }
  body.woocommerce-cart td.product-price .woocommerce-Price-amount {
    color: var(--ink);
    font-weight: 500;
  }

  /* Qty stepper + row subtotal — row 3, col 2. Flex row, space-between. */
  body.woocommerce-cart td.product-quantity {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: end !important;
    text-align: left !important;
    padding: 0 !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    justify-content: space-between;
  }
  body.woocommerce-cart td.product-quantity .quantity {
    display: inline-flex !important;
    border: 1px solid var(--line) !important;
    height: 32px;
  }
  body.woocommerce-cart td.product-quantity .qty-btn {
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
  }
  body.woocommerce-cart td.product-quantity input.qty {
    width: 40px !important;
    height: 30px !important;
    font-size: 12px !important;
  }
  body.woocommerce-cart td.product-quantity .row-subtotal {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  /* Hide native subtotal cell — value lives in .row-subtotal mirror. */
  body.woocommerce-cart td.product-subtotal { display: none !important; }

  /* × Remove — pinned top-right of info column. */
  body.woocommerce-cart td.product-remove {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin-top: -4px !important;
    border: 0 !important;
  }
  body.woocommerce-cart td.product-remove a.remove,
  body.woocommerce-cart td.product-remove a.remove:hover {
    width: 28px !important;
    height: 28px !important;
    border: 0 !important;
    font-family: var(--font-mono) !important;
    font-size: 16px !important;
    color: var(--mute) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
  }
  body.woocommerce-cart td.product-remove a.remove:active { color: var(--ink) !important; }

  /* ----------------------------------------------------------------------
     4. Actions row (coupon + update cart) — stacked.
     ---------------------------------------------------------------------- */
  body.woocommerce-cart table.shop_table tr:has(td.actions) {
    display: block !important;
    border: 0 !important;
    padding: 0 !important;
    background: var(--white);
  }
  body.woocommerce-cart tr td.actions {
    display: block !important;
    padding: 18px var(--gutter) !important;
    border-top: 1px solid var(--line-soft) !important;
    border-bottom: 0 !important;
  }
  body.woocommerce-cart td.actions .coupon {
    display: flex !important;
    border: 1px solid var(--line) !important;
    background: var(--white) !important;
    max-width: 100% !important;
    height: 44px;
  }
  body.woocommerce-cart td.actions .coupon input#coupon_code {
    flex: 1;
    min-width: 0;
    border: none !important;
    height: 100%;
    padding: 0 14px !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    background: transparent !important;
  }
  body.woocommerce-cart td.actions .coupon button {
    border: none !important;
    border-left: 1px solid var(--line) !important;
    background: var(--white) !important;
    padding: 0 18px !important;
    font-family: var(--font-sans) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
    /* height: auto removed — was the root cause of divider gaps (design review).
       Later patches set height: 100% which now wins cleanly without competing
       with this rule's auto. */
    margin: 0 !important;
  }
  body.woocommerce-cart td.actions .coupon button:active {
    background: var(--ink) !important;
    color: var(--white) !important;
  }
  body.woocommerce-cart td.actions > button[name="update_cart"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    padding: 0 18px !important;
    font-family: var(--font-sans) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    border: 1px solid var(--line) !important;
    background: var(--white) !important;
    color: var(--mute) !important;
  }

  /* ----------------------------------------------------------------------
     5. Order summary.
     ---------------------------------------------------------------------- */
  body.woocommerce-cart .cart_totals h2 {
    font-family: var(--font-serif) !important;
    font-weight: 400 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    letter-spacing: -.01em !important;
    margin: 0 0 16px !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid var(--line) !important;
  }
  body.woocommerce-cart .cart_totals table.shop_table { background: transparent !important; }
  body.woocommerce-cart .cart_totals table.shop_table tr { padding: 8px 0 !important; }
  body.woocommerce-cart .cart_totals table.shop_table th {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--body) !important;
    font-weight: 500 !important;
  }
  body.woocommerce-cart .cart_totals table.shop_table td {
    font-family: var(--font-sans) !important;
    font-size: 14.5px !important;
    color: var(--ink) !important;
  }
  body.woocommerce-cart .cart_totals tr.order-total {
    margin-top: 14px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--line) !important;
  }
  body.woocommerce-cart .cart_totals tr.order-total th {
    font-size: 12px !important;
    letter-spacing: .2em !important;
  }
  body.woocommerce-cart .cart_totals tr.order-total td {
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  /* ----------------------------------------------------------------------
     6. Shipping methods (radio list) inside summary.
     ---------------------------------------------------------------------- */
  body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 6px !important;
    padding: 12px 0 !important;
    border-top: 1px dashed var(--line) !important;
  }
  body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th {
    padding: 0 0 4px !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
  }
  body.woocommerce-cart ul.woocommerce-shipping-methods {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  body.woocommerce-cart ul.woocommerce-shipping-methods li {
    display: grid !important;
    grid-template-columns: 16px 1fr !important;
    gap: 10px !important;
    align-items: center !important;
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: var(--ink);
    padding: 4px 0;
    margin: 0;
  }
  body.woocommerce-cart ul.woocommerce-shipping-methods li input[type="radio"] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--ink);
    cursor: pointer;
  }
  body.woocommerce-cart ul.woocommerce-shipping-methods li label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--ink);
  }
  body.woocommerce-cart ul.woocommerce-shipping-methods li label .woocommerce-Price-amount {
    font-weight: 500;
  }

  /* Shipping destination line + change-address link */
  body.woocommerce-cart p.woocommerce-shipping-destination {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: var(--ink);
    line-height: 1.5;
  }
  body.woocommerce-cart p.woocommerce-shipping-destination strong { font-weight: 500; }

  body.woocommerce-cart .shipping-calculator-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 0 0 1px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
    border: 0;
    border-bottom: 1px solid var(--ink);
    background: none;
    cursor: pointer;
  }
  body.woocommerce-cart .shipping-calculator-button .caret {
    display: inline-block;
    margin-left: 2px;
    font-size: 9px;
    transition: transform .2s ease;
  }
  body.woocommerce-cart form.woocommerce-shipping-calculator.is-open .shipping-calculator-button .caret {
    transform: rotate(180deg);
  }

  /* Inline shipping calculator dropdown — animated open/close */
  body.woocommerce-cart form.woocommerce-shipping-calculator {
    display: block;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
  }
  body.woocommerce-cart .shipping-calculator-form {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    border: 1px solid var(--ink);
    border-width: 0;
    background: var(--white);
    padding: 0;
    transition: max-height .28s ease, opacity .2s ease, margin-top .2s ease,
                border-width .01s linear .28s, padding .01s linear .28s;
  }
  body.woocommerce-cart form.woocommerce-shipping-calculator.is-open .shipping-calculator-form {
    max-height: 640px;
    opacity: 1;
    margin-top: 10px;
    border-width: 1px;
    padding: 14px;
    transition: max-height .32s ease, opacity .22s ease .06s, margin-top .2s ease,
                border-width .01s linear 0s, padding .01s linear 0s;
  }
  body.woocommerce-cart .shipping-calculator-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 10px;
  }
  body.woocommerce-cart .shipping-calculator-form .form-row label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mute);
  }
  body.woocommerce-cart .shipping-calculator-form .form-row input,
  body.woocommerce-cart .shipping-calculator-form .form-row select {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--line);
    background: var(--page);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
  }
  body.woocommerce-cart .shipping-calculator-form .form-row select {
    background-image:
      linear-gradient(45deg, transparent 50%, var(--ink) 50%),
      linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat, no-repeat;
  }
  body.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"] {
    display: block;
    width: 100%;
    height: 42px;
    margin-top: 4px;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--white);
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
  }

  /* ----------------------------------------------------------------------
     7. Sticky checkout bar.
     The proceed-to-checkout block (default WC output) is fixed to bottom.
     Layout: [Total chip]  [Checkout button →]
     ---------------------------------------------------------------------- */
  body.woocommerce-cart { padding-bottom: 92px; }

  body.woocommerce-cart .wc-proceed-to-checkout {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    background: var(--white);
    border-top: 1px solid var(--line);
    padding: 10px var(--gutter);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 -2px 16px rgba(11,11,13,.08);
  }
  body.woocommerce-cart .wc-proceed-to-checkout__total {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
  }
  body.woocommerce-cart .wc-proceed-to-checkout__total .label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute);
    line-height: 1;
  }
  body.woocommerce-cart .wc-proceed-to-checkout__total .val {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    background: var(--ink) !important;
    color: var(--white) !important;
    border: 1px solid var(--ink) !important;
    font-family: var(--font-sans) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    white-space: nowrap;
  }

  /* ----------------------------------------------------------------------
     8. Cross-sells — horizontal snap carousel.
     ---------------------------------------------------------------------- */
  body.woocommerce-cart .cross-sells {
    padding: 24px 0 28px !important;
    background: var(--panel);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line);
  }
  body.woocommerce-cart .cross-sells > h2 {
    margin: 0 var(--gutter) 14px !important;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--body);
  }
  body.woocommerce-cart .cross-sells ul.products {
    display: flex !important;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0 var(--gutter);
    background: transparent;
    border: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.woocommerce-cart .cross-sells ul.products::-webkit-scrollbar { display: none; }
  body.woocommerce-cart .cross-sells ul.products li.product {
    flex: 0 0 64%;
    max-width: 260px;
    scroll-snap-align: start;
    padding: 14px;
    border: 1px solid var(--line-soft);
    background: var(--white);
    display: flex;
    flex-direction: column;
    margin: 0;
  }
}


/* ============================================================================
   PATCH 1 — Override Astra/WC responsive-table fallback that injects
   "Product:", "Price:", "Quantity:", "Subtotal:", "Shipment:" labels
   via `content: attr(data-title)` and forces `text-align: right`.

   These rules ship in WordPress core's woocommerce.css (Astra parent reads
   them) and are NOT gated by any @media — they always apply. They only
   become visible because our mobile grid sets the row to display: grid and
   cells effectively render as blocks. We suppress them at the mobile
   breakpoint with higher specificity than the WC selector (0,2,3).
   ============================================================================ */
@media (max-width: 720px) {

  /* Kill the auto-injected "Label:" pseudo on every line-item cell.
     Specificity: body.woocommerce-cart (0,1,1) + table.shop_table_responsive
     (0,1,1) + tr (0,0,1) + td (0,0,1) + ::before (0,0,1) = (0,2,5)
     which beats WC's (0,2,3). */
  body.woocommerce-cart table.shop_table_responsive tr td::before,
  body.woocommerce-cart table.shop_table.cart tr td::before,
  body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tr td::before {
    content: none !important;
    display: none !important;
    float: none !important;
  }

  /* But we DO want our own ::before on td.product-price (the "Unit price · "
     prefix). Restore it explicitly. */
  body.woocommerce-cart table.shop_table tr td.product-price::before {
    content: 'Unit price · ' !important;
    display: inline !important;
    color: var(--mute) !important;
    font-family: var(--font-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    float: none !important;
    margin: 0 !important;
  }

  /* Force left alignment on line item cells — overrides WC's
     `text-align: right !important` on td. */
  body.woocommerce-cart table.shop_table_responsive tr td.product-name,
  body.woocommerce-cart table.shop_table_responsive tr td.product-price,
  body.woocommerce-cart table.shop_table_responsive tr td.product-quantity,
  body.woocommerce-cart table.shop_table.cart tr td.product-name,
  body.woocommerce-cart table.shop_table.cart tr td.product-price,
  body.woocommerce-cart table.shop_table.cart tr td.product-quantity {
    text-align: left !important;
  }

  /* WC's `td { display: block }` from shop_table_responsive fights our grid
     layout. Re-assert the grid placement at higher specificity. */
  body.woocommerce-cart table.shop_table_responsive td.product-thumbnail,
  body.woocommerce-cart table.shop_table.cart td.product-thumbnail {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
  }
  body.woocommerce-cart table.shop_table_responsive td.product-name,
  body.woocommerce-cart table.shop_table.cart td.product-name {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  body.woocommerce-cart table.shop_table_responsive td.product-price,
  body.woocommerce-cart table.shop_table.cart td.product-price {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  body.woocommerce-cart table.shop_table_responsive td.product-quantity,
  body.woocommerce-cart table.shop_table.cart td.product-quantity {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 3 !important;
  }
  body.woocommerce-cart table.shop_table_responsive td.product-remove,
  body.woocommerce-cart table.shop_table.cart td.product-remove {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  body.woocommerce-cart table.shop_table_responsive td.product-subtotal,
  body.woocommerce-cart table.shop_table.cart td.product-subtotal {
    display: none !important;
  }

  /* The thumbnail img — make sure our 96px wins over both cart.css's
     (max-width: 760px) 96px rule and Astra's default. Use shop_table to
     boost specificity. */
  body.woocommerce-cart table.shop_table_responsive td.product-thumbnail a,
  body.woocommerce-cart table.shop_table_responsive td.product-thumbnail img,
  body.woocommerce-cart table.shop_table.cart td.product-thumbnail a,
  body.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
    object-fit: cover !important;
    display: block !important;
    border: 1px solid var(--line) !important;
  }

  /* Astra/WC adds `border-top: 1px solid var(--ast-border-color)` and
     `padding: 0.7em 1em` to every td. Reset those for line item cells so
     our grid spacing controls everything. */
  body.woocommerce-cart table.shop_table_responsive tr.cart_item td,
  body.woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item td,
  body.woocommerce-cart table.shop_table.cart tr.cart_item td,
  body.woocommerce-cart table.shop_table.cart tr.woocommerce-cart-form__cart-item td {
    border-top: 0 !important;
    padding: 0 !important;
  }

  /* ============================================================================
     PATCH 2 — Order summary fixes.
     ============================================================================ */

  /* WC's `td { display: block }` and `text-align: right` on every td of
     shop_table_responsive defeats our flex row layout in the order summary.
     Restore the flex row with label : value layout at higher specificity. */
  body.woocommerce-cart .cart_totals table.shop_table_responsive tr,
  body.woocommerce-cart .cart_totals table.shop_table tr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 16px !important;
    border-top: 0 !important;
  }
  body.woocommerce-cart .cart_totals table.shop_table_responsive tr th,
  body.woocommerce-cart .cart_totals table.shop_table_responsive tr td,
  body.woocommerce-cart .cart_totals table.shop_table tr th,
  body.woocommerce-cart .cart_totals table.shop_table tr td {
    display: block !important;
    text-align: left !important;
    padding: 0 !important;
    border: 0 !important;
    flex: 0 1 auto;
  }
  body.woocommerce-cart .cart_totals table.shop_table_responsive tr td,
  body.woocommerce-cart .cart_totals table.shop_table tr td {
    text-align: right !important;
  }

  /* Shipping row needs its own grid layout (label on top, methods stacked
     below) — override the flex from the rule above. */
  body.woocommerce-cart .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals,
  body.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals {
    display: grid !important;
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }
  body.woocommerce-cart .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals td,
  body.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals td {
    text-align: left !important;
  }

  /* Padding around the totals so the CHANGE ADDRESS link doesn't bleed off
     the left edge. (Was being reset to 0 by the WC td rule.) */
  body.woocommerce-cart .cart-collaterals,
  body.woocommerce-cart .cart-collaterals .cart_totals {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
  }

  /* Kill any leftover `Unit price · ` / `Subtotal · ` ::before injection
     from cart.css's (max-width: 760px) block on the order-summary side.
     (They were meant for line items, not totals.) */
  body.woocommerce-cart .cart_totals table.shop_table tr td.product-price::before,
  body.woocommerce-cart .cart_totals table.shop_table tr td.product-subtotal::before {
    content: none !important;
    display: none !important;
  }

  /* ============================================================================
     PATCH 3 — Sticky checkout bar: re-assert the white panel and shadow
     against any Astra rules that might reset background.
     ============================================================================ */
  body.woocommerce-cart .wc-proceed-to-checkout,
  body.woocommerce-cart div.wc-proceed-to-checkout,
  body.woocommerce-page .wc-proceed-to-checkout {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 80 !important;
    background-color: var(--white) !important;
    border-top: 1px solid var(--line) !important;
    padding: 10px var(--gutter) !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0)) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 -2px 16px rgba(11,11,13,.08) !important;
  }

  /* WC adds ::before/::after table layout helpers on .wc-proceed-to-checkout —
     kill them so they don't break the flex layout of the sticky bar. */
  body.woocommerce-cart .wc-proceed-to-checkout::before,
  body.woocommerce-cart .wc-proceed-to-checkout::after,
  body.woocommerce-page .wc-proceed-to-checkout::before,
  body.woocommerce-page .wc-proceed-to-checkout::after {
    content: none !important;
    display: none !important;
  }
}


/* ============================================================================
   PATCH 4 — Belt-and-suspenders for iPhone Safari.

   Safari can be aggressive about HTML img width/height attributes and srcset
   sizing. Add aspect-ratio and an explicit clip via object-fit on a tighter
   selector. Also re-assert the sticky bar's white panel in case the order
   of cascade is wrong on Safari specifically.
   ============================================================================ */
@media (max-width: 720px) {

  /* Aspect-ratio is the strongest hint to Safari to render the IMG as a
     square box. Combined with width/height it should force 96×96. */
  body.woocommerce-cart td.product-thumbnail,
  body.woocommerce-cart td.product-thumbnail a,
  body.woocommerce-cart td.product-thumbnail img,
  body.woocommerce-cart .woocommerce-cart-form__cart-item td.product-thumbnail img {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
    min-width: 0 !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 96px !important;
  }
  body.woocommerce-cart td.product-thumbnail img {
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Order summary "TOTAL" row — make sure the order-total tr is visually
     distinct (top border, larger label/value). The earlier patch reset
     `padding: 0`; restore the order-total spacing. */
  body.woocommerce-cart .cart_totals table.shop_table_responsive tr.order-total,
  body.woocommerce-cart .cart_totals table.shop_table tr.order-total {
    margin-top: 14px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--line) !important;
  }
  body.woocommerce-cart .cart_totals table.shop_table tr.order-total th {
    font-size: 12px !important;
    letter-spacing: .2em !important;
  }
  body.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  /* Shipping calculator inputs — make sure Astra's `.woocommerce input[type=text]`
     rule (with `var(--ast-global-dark-bg-style)` background) doesn't override
     ours. Boost specificity by attaching to the form-row container. */
  body.woocommerce-cart .shipping-calculator-form .form-row input[type="text"],
  body.woocommerce-cart .shipping-calculator-form .form-row input.input-text,
  body.woocommerce-cart .shipping-calculator-form .form-row select,
  body.woocommerce-cart form.woocommerce-shipping-calculator .form-row input[type="text"],
  body.woocommerce-cart form.woocommerce-shipping-calculator .form-row select {
    width: 100% !important;
    height: 38px !important;
    padding: 0 10px !important;
    border: 1px solid var(--line) !important;
    background: var(--page) !important;
    background-color: var(--page) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
    border-radius: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    margin: 0 !important;
    line-height: 38px !important;
  }
  body.woocommerce-cart .shipping-calculator-form .form-row select {
    background-image:
      linear-gradient(45deg, transparent 50%, var(--ink) 50%),
      linear-gradient(135deg, var(--ink) 50%, transparent 50%) !important;
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50% !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat, no-repeat !important;
    padding-right: 30px !important;
  }
  body.woocommerce-cart .shipping-calculator-form .form-row label {
    display: block !important;
    margin: 0 0 4px !important;
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: var(--mute) !important;
    line-height: 1 !important;
  }
  body.woocommerce-cart .shipping-calculator-form .form-row {
    margin: 0 0 10px !important;
    padding: 0 !important;
  }

  /* Make sure the calc form's update button is full-width with proper styling */
  body.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"] {
    display: block !important;
    width: 100% !important;
    height: 42px !important;
    margin-top: 4px !important;
    border: 1px solid var(--ink) !important;
    background: var(--ink) !important;
    background-color: var(--ink) !important;
    color: var(--white) !important;
    font-family: var(--font-sans) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    cursor: pointer !important;
  }

  /* One more safeguard for the sticky bar — Astra has a `.ast-* .wc-*`
     selector chain that could win at the same specificity. Use double-class
     boost. */
  body.woocommerce-cart.woocommerce-js .wc-proceed-to-checkout,
  body.woocommerce-cart.woocommerce .wc-proceed-to-checkout {
    background-color: var(--white) !important;
    border-top: 1px solid var(--line) !important;
    box-shadow: 0 -2px 16px rgba(11,11,13,.08) !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 80 !important;
  }
}

/* ============================================================================
   PATCH 5 — Critical sticky-bar padding fix.

   The previous rules used `padding: 10px var(--gutter)` shorthand followed by
   `padding-bottom: calc(10px + env(safe-area-inset-bottom, 0))`. On the live
   site this parsed to padding-top/right/left being EMPTY (the calc longhand
   wiping out the shorthand). Use explicit longhands so all four sides are
   honored.
   ============================================================================ */
@media (max-width: 720px) {

  /* Sticky checkout bar — explicit longhand padding so var(--gutter) isn't
     blown away by the calc longhand on the next line. Use triple-class
     specificity to win over every other rule. */
  body.woocommerce-cart.woocommerce-js div.wc-proceed-to-checkout,
  body.woocommerce-cart.woocommerce div.wc-proceed-to-checkout,
  body.woocommerce-page.woocommerce-js div.wc-proceed-to-checkout {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 80 !important;
    background-color: var(--white) !important;
    border-top: 1px solid var(--line) !important;
    box-shadow: 0 -2px 16px rgba(11,11,13,.08) !important;
    padding-top: 10px !important;
    padding-right: var(--gutter) !important;
    padding-left: var(--gutter) !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0)) !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* The TOTAL chip inside the sticky bar — flex 0 0 auto, mock spec */
  body.woocommerce-cart .wc-proceed-to-checkout .wc-proceed-to-checkout__total {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 0 0 auto !important;
    font-family: var(--font-sans) !important;
  }
  body.woocommerce-cart .wc-proceed-to-checkout .wc-proceed-to-checkout__total .label {
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: var(--mute) !important;
    line-height: 1 !important;
  }
  body.woocommerce-cart .wc-proceed-to-checkout .wc-proceed-to-checkout__total .val {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    line-height: 1.1 !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* The checkout button inside the sticky bar — flex: 1, full height */
  body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
  body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    background-color: var(--ink) !important;
    color: var(--white) !important;
    border: 1px solid var(--ink) !important;
    font-family: var(--font-sans) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
  }

  /* Belt-and-suspenders on the thumbnail — quadruple-class boost, explicit
     longhand for box-sizing-related properties so Safari can't compute the
     box weirdly. */
  body.woocommerce-cart.woocommerce-js table.shop_table tr.woocommerce-cart-form__cart-item td.product-thumbnail,
  body.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-thumbnail,
  body.woocommerce-cart table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-thumbnail {
    box-sizing: border-box !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    padding: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
  }
  body.woocommerce-cart.woocommerce-js table.shop_table tr.woocommerce-cart-form__cart-item td.product-thumbnail a,
  body.woocommerce-cart.woocommerce-js table.shop_table tr.woocommerce-cart-form__cart-item td.product-thumbnail img {
    box-sizing: border-box !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 1px solid var(--line) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* ============================================================================
   PATCH 6 — Pixel-by-pixel fixes verified against the mock.
   Issues addressed:
     1. Quantity stepper: shrink to 32px-tall wrapper, 30px buttons, 40x30 input,
        zero out input internal borders.
     2. Coupon row: 44px wrapper height, ensure input bg transparent.
     3. UPDATE CART button: 44px height, light gray border, mute color.
     4. Order summary spacing: zero out conflicting cart-collaterals horizontal
        padding (cart_totals owns the gutter), use longhand padding on cart_totals,
        ensure page bg applies, kill any top-padding from cart-collaterals.
     5. Change Address dropdown: inline-flex with gap, BLACK underline (ink),
        properly aligned caret.
     6. Sticky bar: nuke broken earlier rules with explicit padding longhands.
   ============================================================================ */
@media (max-width: 720px) {

  /* ============== 1. QUANTITY STEPPER ============== */
  body.woocommerce-cart.woocommerce-js td.product-quantity .quantity {
    display: inline-flex !important;
    align-items: stretch !important;
    border: 1px solid var(--line) !important;
    height: 32px !important;
    width: auto !important;
    background: var(--white) !important;
    flex: 0 0 auto !important;
  }
  body.woocommerce-cart.woocommerce-js td.product-quantity .quantity .qty-btn,
  body.woocommerce-cart.woocommerce-js td.product-quantity .quantity button.qty-btn--minus,
  body.woocommerce-cart.woocommerce-js td.product-quantity .quantity button.qty-btn--plus {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    background: var(--white) !important;
    background-color: var(--white) !important;
    color: var(--ink) !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
  }
  body.woocommerce-cart.woocommerce-js td.product-quantity .quantity input.qty,
  body.woocommerce-cart.woocommerce-js td.product-quantity .quantity input.input-text.qty {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ink) !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-align: center !important;
    line-height: 30px !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
  }
  body.woocommerce-cart.woocommerce-js td.product-quantity .quantity input.qty::-webkit-outer-spin-button,
  body.woocommerce-cart.woocommerce-js td.product-quantity .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }
  body.woocommerce-cart.woocommerce-js td.product-quantity .quantity input.qty:focus {
    outline: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }


  /* ============== 2. COUPON ROW ============== */
  body.woocommerce-cart.woocommerce-js td.actions .coupon {
    display: flex !important;
    align-items: stretch !important;
    border: 1px solid var(--line) !important;
    background: var(--white) !important;
    height: 44px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.woocommerce-cart.woocommerce-js td.actions .coupon input#coupon_code,
  body.woocommerce-cart.woocommerce-js td.actions .coupon input.input-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    height: 100% !important;
    padding: 0 14px !important;
    margin: 0 !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
  }
  body.woocommerce-cart.woocommerce-js td.actions .coupon button[name="apply_coupon"],
  body.woocommerce-cart.woocommerce-js td.actions .coupon button {
    flex: 0 0 auto !important;
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid var(--line) !important;
    background: var(--white) !important;
    background-color: var(--white) !important;
    height: 100% !important;
    padding: 0 18px !important;
    margin: 0 !important;
    font-family: var(--font-sans) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    line-height: 1 !important;
  }

  /* ============== 3. UPDATE CART BUTTON ============== */
  body.woocommerce-cart.woocommerce-js td.actions > button[name="update_cart"],
  body.woocommerce-cart.woocommerce-js td.actions button.button[name="update_cart"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 44px !important;
    padding: 0 18px !important;
    font-family: var(--font-sans) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    border: 1px solid var(--line) !important;
    background: var(--white) !important;
    background-color: var(--white) !important;
    color: var(--mute) !important;
    border-radius: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }


  /* ============== 4. ORDER SUMMARY SPACING ============== */
  /* Kill any horizontal padding on .cart-collaterals; cart_totals owns the gutter. */
  body.woocommerce-cart.woocommerce-js .cart-collaterals,
  body.woocommerce-cart .cart-collaterals {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  /* Explicit longhand padding on .cart_totals — page background. */
  body.woocommerce-cart.woocommerce-js .cart-collaterals .cart_totals,
  body.woocommerce-cart .cart-collaterals .cart_totals {
    padding-top: 24px !important;
    padding-right: var(--gutter) !important;
    padding-bottom: 32px !important;
    padding-left: var(--gutter) !important;
    margin: 0 !important;
    background: var(--page) !important;
    background-color: var(--page) !important;
    border: 0 !important;
  }
  body.woocommerce-cart.woocommerce-js .cart-collaterals .cart_totals h2,
  body.woocommerce-cart .cart-collaterals .cart_totals h2 {
    font-family: var(--font-serif) !important;
    font-weight: 400 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    letter-spacing: -.01em !important;
    margin: 0 0 16px !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--ink) !important;
  }

  /* ============== 5. CHANGE ADDRESS DROPDOWN ============== */
  body.woocommerce-cart.woocommerce-js .shipping-calculator-button,
  body.woocommerce-cart .shipping-calculator-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 4px !important;
    padding: 0 0 1px !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ink) !important;
    border-left: 0 !important;
    background: none !important;
    background-color: transparent !important;
    cursor: pointer !important;
    width: auto !important;
    text-decoration: none !important;
  }
  body.woocommerce-cart .shipping-calculator-button .caret {
    display: inline-block !important;
    margin-left: 2px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    transition: transform .2s ease !important;
    color: var(--ink) !important;
  }
  body.woocommerce-cart form.woocommerce-shipping-calculator.is-open .shipping-calculator-button .caret {
    transform: rotate(180deg) !important;
  }

  /* ============== 6. STICKY BAR — final kill of broken earlier rules ============== */
  html body.woocommerce-cart.woocommerce-js div.wc-proceed-to-checkout,
  html body.woocommerce-cart.woocommerce-page div.wc-proceed-to-checkout {
    padding-top: 10px !important;
    padding-right: var(--gutter) !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0)) !important;
    padding-left: var(--gutter) !important;
    margin: 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    z-index: 80 !important;
    background: var(--white) !important;
    background-color: var(--white) !important;
    border-top: 1px solid var(--line) !important;
    box-shadow: 0 -2px 16px rgba(11,11,13,.08) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
}


/* ============================================================================
   PATCH 7 — Verified-against-mock pixel fixes (round 2).
   Issues addressed:
     1. Qty stepper: ADD BACK input.qty left/right borders (mock spec line 194:
        border-left: 1px solid var(--line); border-right: 1px solid var(--line)).
        Earlier patch 6 wrongly removed them.
     2. Coupon row: override Astra/cart.css max-width: 380px constraint with
        max-width: 100% (mock spec).
     3. Actions cell padding: explicit longhand to defeat the
        `padding: 18px var(--gutter)` shorthand parsing bug. Same fix pattern.
     4. Line-item row padding: same longhand fix for tr.cart_item.
     5. ct-title padding: same longhand fix.
   ============================================================================ */
@media (max-width: 720px) {

  /* ============== 1. RESTORE QTY INPUT DIVIDERS (per mock line 194) ============== */
  /* The mock specifies dark dividers between the number box and +/- buttons.
     We use higher specificity (html prefix) to defeat patch 6 which wrongly
     stripped these borders. */
  html body.woocommerce-cart.woocommerce-js td.product-quantity .quantity input.qty,
  html body.woocommerce-cart.woocommerce-js td.product-quantity .quantity input.input-text.qty {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid var(--line) !important;
    border-right: 1px solid var(--line) !important;
    border-radius: 0 !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--white) !important;
    background-color: var(--white) !important;
    color: var(--ink) !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: center !important;
    line-height: 30px !important;
    box-shadow: none !important;
    outline: none !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* ============== 2. COUPON ROW: full width (mock spec max-width: 100%) ============== */
  html body.woocommerce-cart.woocommerce-js td.actions .coupon,
  html body.woocommerce-cart td.actions .coupon {
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* ============== 3. ACTIONS CELL PADDING (explicit longhand) ============== */
  /* The shorthand `padding: 18px var(--gutter)` parses to empty individual
     sides on Safari; we explicitly set each side. Mock spec line 480. */
  html body.woocommerce-cart.woocommerce-js tr td.actions,
  html body.woocommerce-cart tr td.actions {
    display: block !important;
    padding-top: 18px !important;
    padding-right: var(--gutter) !important;
    padding-bottom: 18px !important;
    padding-left: var(--gutter) !important;
    border-top: 1px solid var(--line-soft) !important;
    background: var(--white) !important;
    background-color: var(--white) !important;
  }

  /* ============== 4. LINE ITEM ROW PADDING (explicit longhand) ============== */
  /* tr.cart_item had broken shorthand padding causing horizontal gutter to be
     dropped; cells extended to viewport edges. Mock spec line 323. */
  html body.woocommerce-cart.woocommerce-js tr.cart_item,
  html body.woocommerce-cart.woocommerce-js tr.woocommerce-cart-form__cart-item,
  html body.woocommerce-cart tr.cart_item,
  html body.woocommerce-cart tr.woocommerce-cart-form__cart-item {
    padding-top: 18px !important;
    padding-right: var(--gutter) !important;
    padding-bottom: 18px !important;
    padding-left: var(--gutter) !important;
  }

  /* ============== 5. ct-title PADDING (explicit longhand) ============== */
  /* The title band ("Cart" + "N items") had broken shorthand too. Mock line 278. */
  html body.woocommerce-cart .ct-title {
    padding-top: 24px !important;
    padding-right: var(--gutter) !important;
    padding-bottom: 18px !important;
    padding-left: var(--gutter) !important;
  }
}
/* ============================================================================
   PATCH 8 — Targeted fixes from IMG_4155–4158 review.

   Issues addressed:
     1. Coupon "|" divider has visible gaps at top and bottom — extend it to
        the full visible height by bleeding the button's border-left over the
        wrapper's own top/bottom borders.
     2. Shipping section radios and spacing — match the mock's tight 12px
        padding with dashed border-top, ensure radio inputs are visible, and
        fix the gap between rows.
     3. Cross-sells "Frequently purchased together" — replace huge h2 styling
        with mock spec (mono 10px, .26em letter-spacing); hide any prev/next
        arrow nav buttons added by Astra.
     4. Reduce the big gap between TOTAL row and cross-sells.
     5. Prevent horizontal overflow which is what allows pinch-zoom on iOS.
        (Safari ignores user-scalable=no since iOS 10; the only reliable way
        to stop the layout from "breaking" on zoom is to ensure NO element
        ever causes horizontal scroll.)
     6. Diagnostic outline rule (commented out) — uncomment to find the
        culprit if any element still overflows.
   ============================================================================ */

/* ---- Global anti-overflow at the document level (applies always, not just mobile)
   Putting it outside @media ensures we lock horizontal scroll site-wide. ---- */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
body.woocommerce-cart {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ---- Diagnostic outline (UNCOMMENT TO DEBUG OVERFLOW)
   Reveals every element bounding box. Use the Reddit suggestion the user
   mentioned, then look for elements wider than the viewport.
* {
  outline: 1px solid red !important;
  outline-offset: -1px !important;
}
*/

@media (max-width: 720px) {

  /* ============== 1. COUPON DIVIDER — extend to full visible height ============== */
  /* The wrapper has border: 1px solid var(--line); its content area is
     therefore (44px - 2px borders) = 42px tall. The button's height: 100%
     resolves to 42px and its border-left is 42px. But visually we want the
     divider to look like part of the wrapper's frame, which is 44px tall
     including borders. Use negative top/bottom margins on the button to
     bleed it over the wrapper's own top/bottom borders. */
  html body.woocommerce-cart.woocommerce-js td.actions .coupon {
    overflow: hidden !important; /* clip the bled margins */
  }
  html body.woocommerce-cart.woocommerce-js td.actions .coupon button[name="apply_coupon"],
  html body.woocommerce-cart.woocommerce-js td.actions .coupon button {
    margin-top: -1px !important;
    margin-bottom: -1px !important;
    height: calc(100% + 2px) !important;
  }

  /* ============== 2. SHIPPING SECTION (radio list + tight spacing) ============== */
  /* The mock spec at lines 568-607 expects:
     - tr.woocommerce-shipping-totals { padding: 12px 0; border-top: 1px dashed var(--line); grid-template-columns: 1fr; gap: 6px }
     - SHIPPING th: mono 11px, .14em letter-spacing
     - ul.woocommerce-shipping-methods: flex column, gap 6px
     - li: grid (16px 1fr auto), gap 10px, font 13.5px
     - radio: 14×14, accent-color var(--ink)
     - label: flex row, justify-content: space-between */
  html body.woocommerce-cart.woocommerce-js .cart_totals tr.woocommerce-shipping-totals,
  html body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 6px !important;
    padding-top: 12px !important;
    padding-right: 0 !important;
    padding-bottom: 12px !important;
    padding-left: 0 !important;
    border-top: 1px dashed var(--line) !important;
    border-bottom: 0 !important;
  }
  html body.woocommerce-cart.woocommerce-js .cart_totals tr.woocommerce-shipping-totals th,
  html body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th {
    padding: 0 0 4px !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--body, var(--ink)) !important;
    text-align: left !important;
  }
  html body.woocommerce-cart.woocommerce-js ul.woocommerce-shipping-methods,
  html body.woocommerce-cart ul.woocommerce-shipping-methods {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  html body.woocommerce-cart.woocommerce-js ul.woocommerce-shipping-methods li,
  html body.woocommerce-cart ul.woocommerce-shipping-methods li {
    display: grid !important;
    grid-template-columns: 16px 1fr auto !important;
    gap: 10px !important;
    align-items: center !important;
    font-family: var(--font-sans) !important;
    font-size: 13.5px !important;
    color: var(--ink) !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    background: transparent !important;
  }
  html body.woocommerce-cart.woocommerce-js ul.woocommerce-shipping-methods li input[type="radio"],
  html body.woocommerce-cart ul.woocommerce-shipping-methods li input[type="radio"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    margin: 0 !important;
    accent-color: var(--ink) !important;
    cursor: pointer !important;
    -webkit-appearance: radio !important;
    appearance: radio !important;
    background: transparent !important;
    border: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
  }
  html body.woocommerce-cart.woocommerce-js ul.woocommerce-shipping-methods li label,
  html body.woocommerce-cart ul.woocommerce-shipping-methods li label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    grid-column: 2 / -1 !important;
    cursor: pointer !important;
    font-size: 13.5px !important;
    color: var(--ink) !important;
    margin: 0 !important;
    font-family: var(--font-sans) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
  html body.woocommerce-cart.woocommerce-js ul.woocommerce-shipping-methods li label .woocommerce-Price-amount,
  html body.woocommerce-cart ul.woocommerce-shipping-methods li label .woocommerce-Price-amount {
    font-weight: 500 !important;
  }

  /* Shipping destination paragraph "Shipping to CA." — tight padding, dashed
     border-top per mock line 610. */
  html body.woocommerce-cart.woocommerce-js p.woocommerce-shipping-destination,
  html body.woocommerce-cart p.woocommerce-shipping-destination {
    margin: 10px 0 0 !important;
    padding-top: 10px !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    border-top: 1px dashed var(--line) !important;
    font-family: var(--font-sans) !important;
    font-size: 12.5px !important;
    color: var(--ink) !important;
    line-height: 1.5 !important;
  }

  /* ============== 3. CROSS-SELLS — fix h2, hide nav arrows ============== */
  /* Mock h2 spec: mono 10px, .26em letter-spacing, uppercase, mute-ish color. */
  html body.woocommerce-cart.woocommerce-js .cross-sells > h2,
  html body.woocommerce-cart .cross-sells > h2,
  html body.woocommerce-cart .cross-sells h2 {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: .26em !important;
    text-transform: uppercase !important;
    color: var(--mute, #6b6d73) !important;
    margin: 0 var(--gutter) 14px !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 1.4 !important;
  }

  /* Hide any prev/next nav arrow buttons added by Astra/theme cross-sells
     slider — the mock uses simple horizontal scroll-snap, not arrow nav. */
  html body.woocommerce-cart .cross-sells .swiper-button-prev,
  html body.woocommerce-cart .cross-sells .swiper-button-next,
  html body.woocommerce-cart .cross-sells .slick-prev,
  html body.woocommerce-cart .cross-sells .slick-next,
  html body.woocommerce-cart .cross-sells .slick-arrow,
  html body.woocommerce-cart .cross-sells [class*="nav-arrow"],
  html body.woocommerce-cart .cross-sells [class*="carousel-nav"],
  html body.woocommerce-cart .cross-sells [class*="scroll-arrow"],
  html body.woocommerce-cart .cross-sells button[class*="prev"],
  html body.woocommerce-cart .cross-sells button[class*="next"],
  html body.woocommerce-cart .cross-sells .ast-cross-sells-nav {
    display: none !important;
  }

  /* ============== 4. REDUCE GAP BETWEEN TOTAL ROW AND CROSS-SELLS ============== */
  /* The cart_totals has padding-bottom: 32px from patch 6. Anything extra
     comes from the cart-collaterals parent or Astra. Zero out cart-collaterals
     bottom padding & margin; ensure cross-sells sits with its own padding only. */
  html body.woocommerce-cart.woocommerce-js .cart-collaterals,
  html body.woocommerce-cart .cart-collaterals {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  /* The .cross-sells section itself: per mock line 758, padding: 24px 0 28px;
     plus border-top: 1px solid var(--line-soft). NO huge gap before it. */
  html body.woocommerce-cart.woocommerce-js .cross-sells,
  html body.woocommerce-cart .cross-sells {
    padding-top: 24px !important;
    padding-right: 0 !important;
    padding-bottom: 28px !important;
    padding-left: 0 !important;
    margin: 0 !important;
    background: var(--panel, var(--page)) !important;
    border-top: 1px solid var(--line-soft, var(--line)) !important;
    border-bottom: 1px solid var(--line) !important;
  }

  /* Also handle any cart-collaterals sibling element (.ct-frame from cart.css
     desktop) that might be adding margin/padding. */
  html body.woocommerce-cart .cart-collaterals + *,
  html body.woocommerce-cart .ct-frame {
    margin-top: 0 !important;
  }

  /* ============== 5. PREVENT WIDTH OVERFLOW from any inner element ============== */
  /* No descendant of the cart should be wider than the viewport. */
  body.woocommerce-cart .woocommerce,
  body.woocommerce-cart form.woocommerce-cart-form,
  body.woocommerce-cart .cart-collaterals,
  body.woocommerce-cart .cart_totals,
  body.woocommerce-cart .cross-sells,
  body.woocommerce-cart table.shop_table,
  body.woocommerce-cart .ct-title {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
}


/* ============================================================================
   PATCH 9 — Shipping calculator form layout to match mock.

   Issues:
     1. Country, Town/City show on their own line — should each be full width.
     2. State and ZIP should SHARE one row (side-by-side, half width each).
     3. Native HTML <select> dropdowns show with default browser arrows;
        Select2 (WC's enhanced select) renders alongside but unstyled.
     4. Form labels visually overlap the input fields instead of stacking above.
     5. The form itself has no inner padding so fields touch the form edges.
     6. The Update button doesn't match the mock (mock = 42px tall, full-width,
        ink/white).

   Approach:
     - Hide Select2 on mobile and use the native <select> directly (better on
       iOS anyway — native picker is more familiar than a JS dropdown).
     - Style the form as a CSS Grid with 2 columns; make Country and Town/City
        rows span both columns (full width); State and ZIP auto-fill the
        remaining row.
     - Match mock CSS for labels, inputs, selects, Update button verbatim.
   ============================================================================ */
@media (max-width: 720px) {

  /* ============== Form container: padding inside when open ============== */
  html body.woocommerce-cart.woocommerce-js form.woocommerce-shipping-calculator section.shipping-calculator-form,
  html body.woocommerce-cart form.woocommerce-shipping-calculator section.shipping-calculator-form,
  html body.woocommerce-cart form.woocommerce-shipping-calculator .shipping-calculator-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
    overflow: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    border: 1px solid var(--ink) !important;
    border-width: 0 !important;
    background: var(--white) !important;
    padding: 0 !important;
    transition: max-height .28s ease, opacity .2s ease, margin-top .2s ease,
                border-width .01s linear .28s, padding .01s linear .28s !important;
  }
  html body.woocommerce-cart.woocommerce-js form.woocommerce-shipping-calculator.is-open section.shipping-calculator-form,
  html body.woocommerce-cart form.woocommerce-shipping-calculator.is-open section.shipping-calculator-form,
  html body.woocommerce-cart form.woocommerce-shipping-calculator.is-open .shipping-calculator-form {
    max-height: 600px !important;
    opacity: 1 !important;
    margin-top: 10px !important;
    border-width: 1px !important;
    padding: 14px !important;
    transition: max-height .32s ease, opacity .22s ease .06s, margin-top .2s ease,
                border-width .01s linear 0s, padding .01s linear 0s !important;
  }

  /* ============== Form rows: Country & City span both columns (full width);
                     State and ZIP auto-fill the remaining single row. ============== */
  html body.woocommerce-cart .shipping-calculator-form p.form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* Country (row 1) — full width */
  html body.woocommerce-cart .shipping-calculator-form p#calc_shipping_country_field {
    grid-column: 1 / -1 !important;
  }
  /* Town / City (row 2) — full width */
  html body.woocommerce-cart .shipping-calculator-form p#calc_shipping_city_field {
    grid-column: 1 / -1 !important;
  }
  /* State (row 3 col 1) — half width, auto-placed */
  html body.woocommerce-cart .shipping-calculator-form p#calc_shipping_state_field {
    grid-column: 1 / 2 !important;
  }
  /* ZIP Code (row 3 col 2) — half width, auto-placed */
  html body.woocommerce-cart .shipping-calculator-form p#calc_shipping_postcode_field {
    grid-column: 2 / 3 !important;
  }

  /* ============== Labels: mono 9px, uppercase, mute ============== */
  html body.woocommerce-cart .shipping-calculator-form p.form-row label {
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: var(--mute) !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    line-height: 1.4 !important;
    background: transparent !important;
    width: auto !important;
    display: block !important;
  }

  /* ============== Inputs (text fields) ============== */
  html body.woocommerce-cart .shipping-calculator-form p.form-row input[type="text"],
  html body.woocommerce-cart .shipping-calculator-form p.form-row input.input-text {
    width: 100% !important;
    height: 38px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border: 1px solid var(--line) !important;
    background: var(--page) !important;
    background-color: var(--page) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: .1em !important;
    text-transform: none !important;
    color: var(--ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* ============== Native selects: REVEAL them (defeat Select2 hiding),
                                    style with custom chevron ============== */
  /* Force native select visible: undo .select2-hidden-accessible's clip trick. */
  html body.woocommerce-cart .shipping-calculator-form p.form-row select,
  html body.woocommerce-cart .shipping-calculator-form p.form-row select.country_select,
  html body.woocommerce-cart .shipping-calculator-form p.form-row select.state_select,
  html body.woocommerce-cart .shipping-calculator-form p.form-row select.select2-hidden-accessible {
    position: static !important;
    clip: auto !important;
    clip-path: none !important;
    width: 100% !important;
    height: 38px !important;
    padding: 0 30px 0 10px !important;
    margin: 0 !important;
    border: 1px solid var(--line) !important;
    background-color: var(--page) !important;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--ink) 50%),
      linear-gradient(135deg, var(--ink) 50%, transparent 50%) !important;
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50% !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat, no-repeat !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    display: block !important;
    pointer-events: auto !important;
  }

  /* Hide Select2's enhanced UI on mobile — we use native picker (better on iOS). */
  html body.woocommerce-cart .shipping-calculator-form .select2,
  html body.woocommerce-cart .shipping-calculator-form .select2-container,
  html body.woocommerce-cart .shipping-calculator-form span.select2,
  html body.woocommerce-cart .shipping-calculator-form span.select2-container {
    display: none !important;
  }

  /* ============== Update button — mock spec: full width, 42px, ink ============== */
  html body.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"],
  html body.woocommerce-cart .shipping-calculator-form button.button {
    grid-column: 1 / -1 !important;
    display: block !important;
    width: 100% !important;
    height: 42px !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    border: 1px solid var(--ink) !important;
    background: var(--ink) !important;
    background-color: var(--ink) !important;
    color: var(--white) !important;
    font-family: var(--font-sans) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }
}


/* ============================================================================
   PATCH 10 — iOS auto-zoom fix.

   Issue: iOS Safari aggressively auto-zooms on any input with font-size < 16px
   when the input is tapped. This causes the page to scroll/jump to bring the
   zoomed-in input into view, which feels like the page is scrolling to the
   top mid-typing.

   The trick: keep the input's effective font-size >= 16px so iOS doesn't
   trigger auto-zoom. We do this only on text/email/tel/number inputs that
   accept keyboard input — the qty input technically also is small but users
   tap +/- buttons rather than typing, so it's lower-priority.

   For the coupon and shipping form fields, we ALSO bump the font-size to 16px
   on focus only (avoids visually distorting the placeholder). On blur it
   returns to the mock spec size. Actually simpler: just set 16px always and
   adjust the visual via line-height or padding to keep the field 38px tall.
   ============================================================================ */
@media (max-width: 720px) {

  /* Shipping calculator inputs — text fields */
  html body.woocommerce-cart .shipping-calculator-form p.form-row input[type="text"],
  html body.woocommerce-cart .shipping-calculator-form p.form-row input.input-text {
    font-size: 16px !important;
  }

  /* Shipping calculator selects — these are now native <select>; bumping
     font-size also prevents the iOS picker-trigger from triggering a zoom. */
  html body.woocommerce-cart .shipping-calculator-form p.form-row select {
    font-size: 16px !important;
  }

  /* Coupon code field */
  html body.woocommerce-cart.woocommerce-js td.actions .coupon input#coupon_code,
  html body.woocommerce-cart.woocommerce-js td.actions .coupon input.input-text {
    font-size: 16px !important;
  }

  /* Qty input — bump just to be safe, in case user does tap into it to type. */
  html body.woocommerce-cart.woocommerce-js td.product-quantity .quantity input.qty,
  html body.woocommerce-cart.woocommerce-js td.product-quantity .quantity input.input-text.qty {
    font-size: 16px !important;
  }

  /* The visual cost: text inside inputs is slightly larger than the mock's 
     11px / 13px spec. This is an iOS-mandated tradeoff — users universally 
     prefer no auto-zoom over slightly-too-large input text. */
}


/* ============================================================================
   PATCH 11 — Bump country/state select font-size to 16px to match the other
   inputs.

   Issue: patch 9 set selects to 11px with class selectors (e.g.,
   select.country_select) which had HIGHER specificity than patch 10's
   font-size: 16px rule on plain "select". So at mobile, city/zip showed
   16px but country/state still showed 11px — visually inconsistent.

   Fix: use the same class selectors patch 9 used so we win the specificity
   battle, OR use higher specificity than patch 9. Going with matched-class
   selectors here — same selectors as patch 9 but later in the cascade.
   ============================================================================ */
@media (max-width: 720px) {

  /* Bump every shipping calc select to 16px — including the .country_select
     and .state_select variants that patch 9 specifically locked at 11px. */
  html body.woocommerce-cart .shipping-calculator-form p.form-row select,
  html body.woocommerce-cart .shipping-calculator-form p.form-row select.country_select,
  html body.woocommerce-cart .shipping-calculator-form p.form-row select.state_select,
  html body.woocommerce-cart .shipping-calculator-form p.form-row select.select2-hidden-accessible {
    font-size: 16px !important;
  }
}


/* ============================================================================
   PATCH 12 — Two fixes:
     1. Update button only spans half the form width because the BUTTON itself
        is wrapped in a <p class=""> (auto-placed in grid column 1). The
        button's own grid-column: 1 / -1 rule doesn't apply since the button
        isn't a direct grid child — the <p> wrapper is. Target the <p> wrapper.
     2. Form labels are 8.5px-9px (per mock spec + Astra's mobile-shrink rule).
        Bump to 12px per user request (knowingly diverges from mock).
   ============================================================================ */
@media (max-width: 720px) {

  /* ============== 1. UPDATE BUTTON full width ============== */
  /* The button is wrapped in <p class=""> which is the direct grid item.
     Target any <p> WITHOUT a "form-row" class inside the calc form (i.e., the
     unclassed wrapper around the Update button). Also handle the modern :has()
     case in case Astra changes the markup. */
  html body.woocommerce-cart .shipping-calculator-form > p:not(.form-row) {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Modern fallback (iOS 16.4+, Chrome 105+) */
  html body.woocommerce-cart .shipping-calculator-form > p:has(> button[name="calc_shipping"]),
  html body.woocommerce-cart .shipping-calculator-form > p:has(> button.button) {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* The button itself should fill its wrapper */
  html body.woocommerce-cart .shipping-calculator-form > p:not(.form-row) > button,
  html body.woocommerce-cart .shipping-calculator-form > p:not(.form-row) > button[name="calc_shipping"],
  html body.woocommerce-cart .shipping-calculator-form > p:not(.form-row) > button.button {
    width: 100% !important;
    display: block !important;
    margin: 4px 0 0 !important;
    box-sizing: border-box !important;
  }

  /* ============== 2. LABELS bumped to 12px ============== */
  /* User-requested override of the mock's 9px label spec. Applies to all four
     calc form labels (Country, Town / City, State, ZIP Code). */
  html body.woocommerce-cart .shipping-calculator-form p.form-row label {
    font-size: 10px !important;
  }
}


/* ============================================================================
   PATCH 13 — Darken the UPDATE CART button (user request, knowingly diverges
   from the mock which had a quiet outline button). Per Claude design snippet:
     - background and border → var(--ink) (black)
     - color → var(--white)
     - font-weight 500 → 600
     - Added :disabled state (stays black, 35% opacity, not-allowed cursor)
   ============================================================================ */
@media (max-width: 720px) {

  html body.woocommerce-cart.woocommerce-js td.actions > button[name="update_cart"],
  html body.woocommerce-cart.woocommerce-js td.actions button.button[name="update_cart"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 44px !important;
    padding: 0 18px !important;
    font-family: var(--font-sans) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    border: 1px solid var(--ink) !important;
    background: var(--ink) !important;
    background-color: var(--ink) !important;
    color: var(--white) !important;
    border-radius: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
  }

  html body.woocommerce-cart.woocommerce-js td.actions > button[name="update_cart"]:disabled,
  html body.woocommerce-cart.woocommerce-js td.actions button.button[name="update_cart"]:disabled {
    background: var(--ink) !important;
    background-color: var(--ink) !important;
    color: var(--white) !important;
    border-color: var(--ink) !important;
    opacity: .35 !important;
    cursor: not-allowed !important;
  }
}


/* ============================================================================
   PATCH 14 — Coupon row clean rewrite per Claude design's 4-point guide.

   What was wrong with the earlier patches:
     1. The wrapper had no box-sizing, so its 1px top/bottom borders made the
        total height 45.6px while children's "height: 100%" gave 44px. That
        1.6px gap is exactly the visible top/bottom seams in the divider.
     2. The wrapper had align-items: center which made children only as tall
        as their content — they did NOT stretch to fill the flex parent. With
        flex's default align-items: stretch, both children would be the full
        wrapper height, and the divider would naturally span top to bottom.
     3. My earlier patch 8 fix tried to compensate with negative margins +
        overflow: hidden on the wrapper, but overflow: hidden then clipped
        the bleed. And the margin trick fights with align-items.
     4. Input had min-width: 200px which on narrow screens could push the
        button off the row.

   The clean fix per design notes:
     - Wrapper owns the bordered box AND the fixed height (44px) AND
       box-sizing: border-box so borders count INTO the 44px.
     - Default align-items: stretch lets flex children fill the wrapper height.
     - Children have height: 100% (now == full wrapper inner height, 42px
       inside the 1px borders, but visually they stretch edge to edge of the
       wrapper border).
     - Children have border: none. Button gets exactly ONE border-left.
     - Input has flex: 1 + min-width: 0 to prevent intrinsic-width overflow.
   ============================================================================ */
@media (max-width: 720px) {

  /* WRAPPER — bordered box, fixed height with border-box so borders are
     included. Use default align-items: stretch (don't set it). Highest
     specificity (html prefix) to beat patch 6, patch 7, and patch 8 rules. */
  html body.woocommerce-cart.woocommerce-js td.actions .coupon,
  html body.woocommerce-cart td.actions .coupon {
    display: flex !important;
    align-items: stretch !important;
    border-top: 1px solid var(--line) !important;
    border-right: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
    border-left: 1px solid var(--line) !important;
    background: var(--white) !important;
    background-color: var(--white) !important;
    height: 44px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* INPUT — flex: 1, min-width: 0, NO border, full height. */
  html body.woocommerce-cart.woocommerce-js td.actions .coupon input#coupon_code,
  html body.woocommerce-cart.woocommerce-js td.actions .coupon input.input-text,
  html body.woocommerce-cart td.actions .coupon input#coupon_code,
  html body.woocommerce-cart td.actions .coupon input.input-text {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 100% !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    padding: 0 14px !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ink) !important;
    font-family: var(--font-mono) !important;
    font-size: 16px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  /* BUTTON — exactly ONE border (border-left = the divider), NO others,
     full height, no margins. Cancel patch 8's bleed-margin trick. */
  html body.woocommerce-cart.woocommerce-js td.actions .coupon button[name="apply_coupon"],
  html body.woocommerce-cart.woocommerce-js td.actions .coupon button,
  html body.woocommerce-cart td.actions .coupon button[name="apply_coupon"],
  html body.woocommerce-cart td.actions .coupon button {
    flex: 0 0 auto !important;
    height: 100% !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid var(--line) !important;
    background: var(--white) !important;
    background-color: var(--white) !important;
    padding: 0 18px !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    font-family: var(--font-sans) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }

  /* Active state */
  html body.woocommerce-cart td.actions .coupon button:active {
    background: var(--ink) !important;
    background-color: var(--ink) !important;
    color: var(--white) !important;
  }
}


/* ============================================================================
   PATCH 15 — Two fixes:
     1. Coupon divider STILL shows sub-pixel gaps at top/bottom on iPhone.
        Even with box-sizing: border-box and align-items: stretch, Safari's
        sub-pixel rendering at DPR 3 creates visible 1-raw-pixel gaps where
        the divider's border-left meets the wrapper's top/bottom borders.
        Solution: combine the design's clean rules WITH a small overflow:
        visible + negative-margin bleed on the button so the divider extends
        BEYOND the wrapper's top/bottom borders by 1px on each side. Any
        sub-pixel mismatch is hidden under the wrapper border.
     2. Big gap between coupon row and UPDATE CART button. There's a 5px
        top + 5px bottom margin on the coupon wrapper (from cart.css) that
        isn't being reset on mobile, plus possibly conflicting margins.
        Force everything explicitly.
   ============================================================================ */
@media (max-width: 720px) {

  /* ============== 1. COUPON WRAPPER — explicit longhand margins (zero),
                                          overflow: visible (so button can bleed) ============== */
  html body.woocommerce-cart.woocommerce-js td.actions .coupon,
  html body.woocommerce-cart.woocommerce-page td.actions .coupon {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    overflow: visible !important;
    /* Re-assert other key props in case any later rule fights */
    display: flex !important;
    align-items: stretch !important;
    height: 44px !important;
    box-sizing: border-box !important;
    border-top: 1px solid var(--line) !important;
    border-right: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
    border-left: 1px solid var(--line) !important;
  }

  /* ============== 1b. APPLY COUPON button — bleed divider over wrapper borders ============== */
  /* The button's border-left bleeds 1px above and 1px below the wrapper's
     content box, covering the wrapper's top/bottom borders. With overflow:
     visible on the wrapper, this is visible. Sub-pixel mismatches at iOS
     DPR 3 are hidden because the divider extends past any potential gap. */
  html body.woocommerce-cart.woocommerce-js td.actions .coupon button[name="apply_coupon"],
  html body.woocommerce-cart.woocommerce-js td.actions .coupon button {
    margin-top: -1px !important;
    margin-right: 0 !important;
    margin-bottom: -1px !important;
    margin-left: 0 !important;
    height: calc(100% + 2px) !important;
    /* The bleeding 1px on top/bottom means the divider extends 1px past the
       wrapper border on each side. The wrapper border is then drawn on TOP
       of those 1px extensions (since DOM order: divider rendered first via
       button's border-left, then wrapper's borders rendered around). But
       since the divider COLOR equals the wrapper border color (both var(--line)),
       any visible bleed is invisible — same color blending into same color.
       Net effect: divider appears to span perfectly from top wrapper border
       to bottom wrapper border with no sub-pixel gaps. */
    /* Re-assert one-border-left from patch 14 */
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid var(--line) !important;
  }
}


/* ============================================================================
   PATCH 16 — Final attempts at coupon divider + tighter spacing.

   Plan:
     1. DIVIDER: Replace the wrapper's CSS borders with a "box-shadow inset"
        of 1px var(--line) on all 4 sides. box-shadow doesn't interact with
        child borders at all (it's a layer effect, not a layout border).
        The button's border-left then sits cleanly between input and button
        without any sub-pixel race against the wrapper border.
     2. SPACING: Reduce empty space below UPDATE CART before Order summary.
        Currently td.actions has padding-bottom: 18px AND cart_totals has
        padding-top: 24px — total 42px gap. User wants tighter. Drop both
        to 12px each (total 24px gap).
   ============================================================================ */
@media (max-width: 720px) {

  /* ============== 1. COUPON WRAPPER — box-shadow border instead of CSS border ============== */
  /* CSS borders on the wrapper interact with child borders at sub-pixel level
     on Safari iOS DPR 3x. Box-shadow is a rendering effect, not a layout box,
     so it doesn't trigger the same issue. Use a 4-sided inset box-shadow as
     a perfect 1px outline. */
  html body.woocommerce-cart.woocommerce-js td.actions .coupon,
  html body.woocommerce-cart.woocommerce-page td.actions .coupon {
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    box-shadow: inset 0 0 0 1px var(--line) !important;
    background: var(--white) !important;
    background-color: var(--white) !important;
    height: 44px !important;
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* APPLY COUPON button — single border-left divider, NO bleed needed since
     the wrapper has no CSS borders. The divider naturally spans full height
     because align-items: stretch makes children fill the wrapper. */
  html body.woocommerce-cart.woocommerce-js td.actions .coupon button[name="apply_coupon"],
  html body.woocommerce-cart.woocommerce-js td.actions .coupon button,
  html body.woocommerce-cart td.actions .coupon button[name="apply_coupon"],
  html body.woocommerce-cart td.actions .coupon button {
    margin: 0 !important;
    height: 100% !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid var(--line) !important;
    box-shadow: none !important;
  }

  /* ============== 2. TIGHTER SPACING below UPDATE CART ============== */
  /* Reduce td.actions bottom padding from 18 → 12, and cart_totals top
     padding from 24 → 12. Net gap between UPDATE CART and "Order summary"
     heading: 12 + 12 = 24px instead of 42px. */
  html body.woocommerce-cart.woocommerce-js tr td.actions,
  html body.woocommerce-cart tr td.actions {
    padding-bottom: 12px !important;
  }
  html body.woocommerce-cart.woocommerce-js .cart-collaterals .cart_totals,
  html body.woocommerce-cart .cart-collaterals .cart_totals {
    padding-top: 12px !important;
  }
}


/* ============================================================================
   PATCH 17 — Beat Astra's align-items: center on .coupon wrapper.

   Root cause finally found: Astra's cart.css has
     .woocommerce-cart table.cart td.actions .coupon { align-items: center }
   with specificity (0,5,3) — HIGHER than any of my previous rules. Same
   !important priority, higher specificity wins. align-items: center makes
   children only as tall as their content, not the wrapper, so the button's
   border-left divider only spans ~28px instead of 44px. That's been the
   visible gap at top and bottom this whole time.

   Fix: use a 6-class selector to beat (0,5,3). Add a :not() to bump specificity
   without changing what matches. ".coupon:not(#nope)" gives us +1 ID-class
   bump which beats Astra's 5 classes outright.
   ============================================================================ */
@media (max-width: 720px) {

  /* Wrapper: align-items: stretch with extra specificity (>= 0,6,3) so we
     reliably beat Astra's "table.cart td.actions .coupon" rule. */
  html body.woocommerce-cart.woocommerce-js table.cart td.actions .coupon,
  html body.woocommerce-cart.woocommerce-js table.shop_table td.actions .coupon,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#zz),
  html body.woocommerce-cart table.shop_table td.actions .coupon:not(#zz) {
    align-items: stretch !important;
    display: flex !important;
    height: 44px !important;
    box-sizing: border-box !important;
    border-top: 1px solid var(--line) !important;
    border-right: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
    border-left: 1px solid var(--line) !important;
    background: var(--white) !important;
    background-color: var(--white) !important;
    overflow: hidden !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Children: full height of wrapper. Same specificity bump. */
  html body.woocommerce-cart table.cart td.actions .coupon:not(#zz) input#coupon_code,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#zz) input.input-text,
  html body.woocommerce-cart table.shop_table td.actions .coupon:not(#zz) input#coupon_code {
    height: 100% !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
  }

  html body.woocommerce-cart table.cart td.actions .coupon:not(#zz) button,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#zz) button[name="apply_coupon"],
  html body.woocommerce-cart table.shop_table td.actions .coupon:not(#zz) button {
    height: 100% !important;
    flex: 0 0 auto !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid var(--line) !important;
    background: var(--white) !important;
    background-color: var(--white) !important;
    padding: 0 18px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}



/* ============================================================================
   PATCH 18 (v2) — Bring back the grid approach but fix the button text
   wrapping. The issue last time: grid "auto" column shrunk the button to
   its min-content width, and without white-space: nowrap, "APPLY COUPON"
   broke onto 4 lines. Now with white-space: nowrap + min-width: max-content,
   the button stays one line.

   Goal of this patch: same as v1 — get the divider to span the full wrapper
   height by using grid (more predictable than flex for fixed-height parents).
   ============================================================================ */
@media (max-width: 720px) {

  /* WRAPPER: grid with explicit row height. Use max-content for the button
     column so it never shrinks below the text width. */
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope),
  html body.woocommerce-cart table.shop_table td.actions .coupon:not(#nope) {
    display: grid !important;
    grid-template-columns: 1fr max-content !important;
    grid-template-rows: 44px !important;
    height: 44px !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    border-top: 1px solid var(--line) !important;
    border-right: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
    border-left: 1px solid var(--line) !important;
    background: var(--white) !important;
    background-color: var(--white) !important;
    overflow: hidden !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }

  /* INPUT: grid cell 1. Full row height. */
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input#coupon_code,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input.input-text {
    grid-row: 1 !important;
    grid-column: 1 / 2 !important;
    height: 100% !important;
    width: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    padding-top: 0 !important;
    padding-right: 14px !important;
    padding-bottom: 0 !important;
    padding-left: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    color: var(--ink) !important;
  }

  /* BUTTON: grid cell 2. Full row height. white-space: nowrap is the critical
     line — keeps "APPLY COUPON" on one line so the column reserves enough
     width for the text. */
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) button,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) button[name="apply_coupon"] {
    grid-row: 1 !important;
    grid-column: 2 / 3 !important;
    height: 100% !important;
    min-height: 0 !important;
    min-width: max-content !important;
    width: max-content !important;
    white-space: nowrap !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid var(--line) !important;
    background: var(--white) !important;
    background-color: var(--white) !important;
    padding-top: 0 !important;
    padding-right: 18px !important;
    padding-bottom: 0 !important;
    padding-left: 18px !important;
    margin: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
  }
}


/* ============================================================================
   PATCH 19 — Three small fixes per user review of IMG_4170:
     1. COUPON CODE placeholder text is too big (input is at 16px for iOS
        anti-zoom; the typed text MUST stay 16px or iOS will zoom on focus,
        but the placeholder can be styled smaller via ::placeholder).
     2. Divider gap fix: use ::before pseudo-element on the BUTTON, absolutely
        positioned with top: -1px; bottom: -1px. This makes the divider bleed
        1px above and below the wrapper's content area, covering the wrapper's
        top/bottom borders. No matter how Safari renders sub-pixels, the line
        appears continuous.
     3. More space between coupon row and UPDATE CART (10px → 18px).
   ============================================================================ */
@media (max-width: 720px) {

  /* === 1. Smaller PLACEHOLDER text === */
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input#coupon_code::placeholder,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input.input-text::placeholder {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--mute) !important;
    opacity: 1 !important;
  }
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input#coupon_code::-webkit-input-placeholder,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input.input-text::-webkit-input-placeholder {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--mute) !important;
    opacity: 1 !important;
  }

  /* === 2. Divider via pseudo-element on the button, bleeding 1px outside === */
  /* The button needs position: relative so its pseudo can be absolutely
     positioned relative to it. */
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) button,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) button[name="apply_coupon"] {
    position: relative !important;
    /* Kill the border-left so we don't double the divider */
    border-left: 0 !important;
  }
  /* Pseudo-element divider: positioned at the button's left edge, but extending
     1px above and 1px below to bleed over the wrapper's top/bottom borders. */
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) button::before,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) button[name="apply_coupon"]::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 1px !important;
    background: var(--line) !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }
  /* Wrapper needs overflow: visible so the bleed isn't clipped */
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) {
    overflow: visible !important;
  }

}


/* ============================================================================
   PATCH 20 — Per Claude design diagnosis: two specific bugs from review of
   IMG_4171.

   Bug 1 — UPDATE CART margin stuck at 10px (not 24px):
     PATCH 13's selector list includes ".button" class:
       td.actions button.button[name="update_cart"]  → (1,4,4) specificity
     PATCH 19's update_cart rule did NOT include .button:
       td.actions > button[name="update_cart"]       → (1,3,4) specificity
     Both !important; PATCH 13's higher specificity wins on margin shorthand
     (margin: 10px 0 0 → margin-top: 10px). PATCH 19's margin-top: 24px loses.

     Fix: include the .button class in PATCH 20's selector list to match
     PATCH 13's specificity. Source-order tiebreaker then puts PATCH 20's
     24px on top. Use longhand margin-* to avoid shorthand collisions.

   Bug 2 — Divider ::before bleeds 1px below the wrapper into UPDATE CART
   gap area (PATCH 19 used top: -1px; bottom: -1px on the pseudo, with
   wrapper overflow: visible).
     Fix: clip wrapper with overflow: hidden + reset pseudo to top: 0;
     bottom: 0 so the divider fills exactly the wrapper inner height.
   ============================================================================ */
@media (max-width: 720px) {

  /* === Bug 2: contain the apply-coupon divider bleed === */
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) {
    overflow: hidden !important;
  }
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) button::before,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) button[name="apply_coupon"]::before {
    top: 0 !important;
    bottom: 0 !important;
  }
}


/* ============================================================================
   PATCH 22 — Per Claude design's diagnosis: bulletproof gap.

   Stop trying to win the margin-top cascade race on UPDATE CART.  Instead,
   put the gap on .coupon's margin-bottom — the .coupon:not(#nope) selector
   from PATCHes 18/19 carries (1,6,3) specificity (the :not(#nope) is an
   ID-level bump), and nothing else in this file or in Astra outranks it.

   Also zero out UPDATE CART's own margin so the gap doesn't stack.
   ============================================================================ */
@media (max-width: 720px) {

  /* Put the 24px gap on the coupon wrapper's BOTTOM — guaranteed to win. */
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope),
  html body.woocommerce-cart table.shop_table td.actions .coupon:not(#nope) {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 24px !important;
    margin-left: 0 !important;
  }

  /* Zero out UPDATE CART's own margin so two gaps don't stack. Use the
     same :not(#nope) ID-bump trick: (1,5,4) — beats every other rule on
     this button. */
  html body.woocommerce-cart table.cart td.actions > button[name="update_cart"]:not(#nope),
  html body.woocommerce-cart table.cart td.actions button.button[name="update_cart"]:not(#nope) {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
}


/* ============================================================================
   PATCH 23 — Kill the "double border" around the COUPON CODE input.

   Per Claude design diagnosis of IMG_4175. The .coupon wrapper has its own
   1px border (correct, intended), and the <input> inside ALSO has a visible
   1px outline — making it look like two nested rectangles. Earlier patches
   set border: 0 on the input but didn't kill -webkit-appearance, box-shadow
   on :focus, or outline on :focus. Any one of those can render as a visible
   1px line around the input.

   Fix: strip every property that can draw a visible edge on the input, for
   default AND focus/hover states, with (2,5,4) specificity (:not(#nope) is
   an ID-level bump) so we win regardless of what Astra/Woo applies.
   ============================================================================ */
@media (max-width: 720px) {

  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input#coupon_code,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input.input-text,
  html body.woocommerce-cart table.shop_table td.actions .coupon:not(#nope) input#coupon_code,
  html body.woocommerce-cart table.shop_table td.actions .coupon:not(#nope) input.input-text,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input#coupon_code:focus,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input.input-text:focus,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input#coupon_code:focus-visible,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input.input-text:focus-visible,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input#coupon_code:hover,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input.input-text:hover {
    /* Remove every form of visual edge */
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;

    /* Strip native iOS input chrome (the most likely culprit) */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    /* Force transparent background so wrapper's white shows through cleanly */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    /* No rounded corners (kills any inset radius effect) */
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
  }
}


/* ============================================================================
   PATCH 24 — Defensive wrapper-edge nuker per Claude design diagnosis.

   PATCH 23 confirmed the <input> itself has no border. The inner rectangle
   in IMG_4176 must come from a WRAPPER between .coupon and <input>: most
   likely <span class="woocommerce-input-wrapper">, <div class="coupon-fields">,
   or a styled <label>. Kill borders/bg on all three patterns at once.

   display: contents makes the wrapper layout-invisible — its children behave
   as direct .coupon kids. Safe on iOS Safari 11.3+.
   ============================================================================ */
@media (max-width: 720px) {

  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) .woocommerce-input-wrapper,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) span.woocommerce-input-wrapper,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) .coupon-fields,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) div.coupon-fields,
  html body.woocommerce-cart table.shop_table td.actions .coupon:not(#nope) .woocommerce-input-wrapper,
  html body.woocommerce-cart table.shop_table td.actions .coupon:not(#nope) span.woocommerce-input-wrapper,
  html body.woocommerce-cart table.shop_table td.actions .coupon:not(#nope) .coupon-fields {
    display: contents !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
  }

  /* Screen-reader label — make sure it stays accessible-only with no visual. */
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) label.screen-reader-text,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) label[for="coupon_code"].screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Neutralize any pseudo-elements on .coupon that aren't the divider. */
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope)::before,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope)::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}


/* ============================================================================
   PATCH 25 — Coupon code "inner box" workaround (mobile only).
   ⚠ TEMPORARY FIX. See backlog doc:
     coupon-code-inner-box-tech-debt.txt
   in the team tech-debt folder for full diagnosis, history of attempts,
   and how to actually fix this when time permits.
   ============================================================================ */
@media (max-width: 720px) {

  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input#coupon_code,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input.input-text,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input#coupon_code:focus,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input.input-text:focus,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input#coupon_code:focus-visible,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input.input-text:focus-visible,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input#coupon_code:active,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input.input-text:active,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input#coupon_code:hover,
  html body.woocommerce-cart table.cart td.actions .coupon:not(#nope) input.input-text:hover {
    /* CAMOUFLAGE FIX: width 0 + color matched to wrapper bg (white).
       See backlog comment above for why this is tech debt. */
    border-top: 0 solid var(--white) !important;
    border-right: 0 solid var(--white) !important;
    border-bottom: 0 solid var(--white) !important;
    border-left: 0 solid var(--white) !important;
    border-color: var(--white) !important;

    outline: 0 solid var(--white) !important;
    outline-color: var(--white) !important;
    outline-offset: 0 !important;

    box-shadow: 0 0 0 0 transparent !important;
    -webkit-box-shadow: 0 0 0 0 transparent !important;

    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    -webkit-tap-highlight-color: transparent !important;

    background: var(--white) !important;
    background-color: var(--white) !important;
    background-image: none !important;

    caret-color: var(--ink) !important;

    border-radius: 0 !important;
  }
}