/* ============================================================
   AITRIXA — CART PAGE STYLES  (v2)
   File: assets/css/cart.css
   Loaded only on the WooCommerce cart page (is_cart()).
   ------------------------------------------------------------
   Targets WooCommerce's DEFAULT cart markup. Scoped under
   body.woocommerce-cart so there is zero impact on shop /
   product / checkout / account.

   v2 changes:
   - Row converted to a 6-col CSS grid that mirrors the mock:
     thumb / name / price / qty / subtotal / × — putting the
     remove × on the RIGHT (mock-correct), via grid-column.
   - Force .cart-collaterals + .cart_totals to fill their
     grid cell width (WC defaults shrink them to ~24%).
   - Force .woocommerce :is to NOT use its default container.
   ============================================================ */

/* ---- PAGE FRAME -------------------------------------------- */
body.woocommerce-cart .entry-content { padding: 0; }
body.woocommerce-cart .page-title,
body.woocommerce-cart .ast-archive-description,
body.woocommerce-cart .entry-header,
body.woocommerce-cart h1.entry-title { display: none !important; }

body.woocommerce-cart #primary { padding: 0; margin-top: 0 !important; }
body.woocommerce-cart #primary .ast-container { padding: 0; max-width: none; }

/* ---- TOP BAND: title + breadcrumb ------------------------- */
body.woocommerce-cart .woocommerce { position: relative; }

body.woocommerce-cart .woocommerce::before {
  content: none;
  display: none;
}

body.woocommerce-cart .woocommerce::after { content: none; display: none; }

/* ---- LAYOUT: 2-column grid -------------------------------- */
/* WC outputs:
     <div class="woocommerce">
       <div class="woocommerce-notices-wrapper"></div>   ← grid row 1, full width
       <form class="woocommerce-cart-form">...</form>     ← grid row 4, col 1
       <div class="cart-collaterals">...</div>            ← grid row 4, col 2
     </div>
   The ::before (breadcrumb) and ::after (Cart) pseudo elements
   sit in their own auto-rows BEFORE the form/collaterals.
*/
body.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(360px, .9fr);
  grid-template-rows: auto auto;
  gap: 0;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  background: var(--page);
}

body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
  grid-row: 4;
  padding: 0;
}

body.woocommerce-cart form.woocommerce-cart-form {
  grid-column: 1;
  padding: 56px 56px 80px 0;
  border-right: 1px solid var(--line);
  min-width: 0;
}

body.woocommerce-cart .cart-collaterals {
  grid-column: 2;
  padding: 44px 0 80px 56px;
  min-width: 0;
  width: 100% !important;
  float: none !important;
  display: block;
}

/* WC default sets .cart_totals to width:48%. Force full-bleed
   inside its grid cell so the summary card fills the column. */
body.woocommerce-cart .cart-collaterals .cart_totals {
  width: 100% !important;
  float: none !important;
  position: sticky;
  top: 92px;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ---- TABLE RESET ------------------------------------------ */
body.woocommerce-cart table.shop_table {
  border: none;
  border-radius: 0;
  border-collapse: collapse;
  margin: 0;
  width: 100%;
  background: transparent;
}
body.woocommerce-cart table.shop_table tbody,
body.woocommerce-cart table.shop_table thead { background: transparent; }

/* ---- TABLE HEADER (Product / Price / Qty / Subtotal) ------
   Header is a 6-col grid mirroring the row grid below.
*/
body.woocommerce-cart table.shop_table thead { display: block; }
body.woocommerce-cart table.shop_table thead tr {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 1fr 1fr 110px 30px;
  gap: 24px;
  align-items: end;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}
body.woocommerce-cart table.shop_table thead th {
  background: transparent;
  padding: 0;
  border: none;
  font-family: var(--font-mono); font-size: 13px;
  font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--body);
  text-align: center;
}
body.woocommerce-cart table.shop_table thead th.product-remove { display: none; }
body.woocommerce-cart table.shop_table thead th.product-thumbnail span,
body.woocommerce-cart table.shop_table thead th.product-name span { display: inline; }
body.woocommerce-cart table.shop_table thead th.product-thumbnail {
  display: none; /* the "Product" header sits in the name column */
}
body.woocommerce-cart table.shop_table thead th.product-name {
  grid-column: 2;
  text-align: left;
}
body.woocommerce-cart table.shop_table thead th.product-price { grid-column: 3; text-align: center; }
body.woocommerce-cart table.shop_table thead th.product-quantity { grid-column: 4; text-align: center; }
body.woocommerce-cart table.shop_table thead th.product-subtotal { grid-column: 5; text-align: center; }

/* ---- LINE ITEMS — 6-col grid row (mock-matched) -----------
   DOM order from WC:
     [0] td.product-remove   →  grid col 6 (rightmost)
     [1] td.product-thumbnail →  grid col 1
     [2] td.product-name      →  grid col 2
     [3] td.product-price     →  grid col 3
     [4] td.product-quantity  →  grid col 4
     [5] td.product-subtotal  →  grid col 5
*/
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;
  grid-template-columns: 120px minmax(0, 1fr) 1fr 1fr 110px 30px;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  background: transparent !important;
  border: none;
  border-bottom: 1px solid var(--line);
}
body.woocommerce-cart tr.cart_item td,
body.woocommerce-cart tr.woocommerce-cart-form__cart-item td {
  background: transparent !important;
  border: none;
  padding: 0;
  vertical-align: middle;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Reorder cells to match the mock (× on the RIGHT) */
body.woocommerce-cart tr.cart_item td.product-remove,
body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-remove {
  grid-column: 6;
  grid-row: 1;
  justify-self: center;
}
body.woocommerce-cart tr.cart_item td.product-thumbnail,
body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-thumbnail {
  grid-column: 1;
  grid-row: 1;
  width: 120px;
}
body.woocommerce-cart tr.cart_item td.product-name,
body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-name {
  grid-column: 2;
  grid-row: 1;
  text-align: left;
}
body.woocommerce-cart tr.cart_item td.product-price,
body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-price {
  grid-column: 3;
  grid-row: 1;
  text-align: center;
}
body.woocommerce-cart tr.cart_item td.product-quantity,
body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-quantity {
  grid-column: 4;
  grid-row: 1;
  text-align: center;
}
body.woocommerce-cart tr.cart_item td.product-subtotal,
body.woocommerce-cart tr.woocommerce-cart-form__cart-item td.product-subtotal {
  grid-column: 5;
  grid-row: 1;
  text-align: center;
}

/* Remove (×) button */
body.woocommerce-cart td.product-remove a.remove,
body.woocommerce-cart td.product-remove a.remove:hover {
  color: var(--mute) !important;
  background: transparent !important;
  width: 30px; height: 30px;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 18px; line-height: 1;
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
/* Kill Astra/WC default circular ring drawn via ::before pseudo and any inner ring */
body.woocommerce-cart td.product-remove a.remove::before,
body.woocommerce-cart td.product-remove a.remove::after {
  display: none !important;
  content: none !important;
  border: none !important;
}
body.woocommerce-cart td.product-remove a.remove:hover {
  border-color: var(--ink); color: var(--ink) !important; background: var(--white) !important;
}
body.woocommerce-cart td.product-remove a.remove svg { width: 14px; height: 14px; }

/* Thumbnail */
body.woocommerce-cart td.product-thumbnail a { display: block; }
body.woocommerce-cart td.product-thumbnail img {
  width: 120px !important; height: 120px !important;
  max-width: 120px !important; min-width: 120px !important;
  aspect-ratio: 1/1;
  object-fit: cover;
  border: 1px solid var(--line);
  display: block;
}

/* Product name */
body.woocommerce-cart td.product-name a {
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
  text-decoration: none;
}
body.woocommerce-cart td.product-name .cart-name-base {
  display: block;
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -.005em;
}
body.woocommerce-cart td.product-name .cart-name-size {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
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;
}
body.woocommerce-cart td.product-name a:hover { border-bottom-color: var(--ink); }
body.woocommerce-cart td.product-name .variation,
body.woocommerce-cart td.product-name dl.variation {
  margin: 6px 0 0;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute);
}
body.woocommerce-cart td.product-name .variation dt,
body.woocommerce-cart td.product-name .variation dd {
  display: inline; margin: 0; padding: 0; font-weight: 400;
}
body.woocommerce-cart td.product-name .variation dt::after { content: ' · '; color: var(--mute-2); }
body.woocommerce-cart td.product-name .variation dd { color: var(--ink); }
body.woocommerce-cart td.product-name .variation dd p { display: inline; margin: 0; }

/* Price + Subtotal */
body.woocommerce-cart td.product-price { font-size: 15px; }
body.woocommerce-cart td.product-subtotal { font-size: 18px; font-weight: 500; }
body.woocommerce-cart td.product-price .woocommerce-Price-amount,
body.woocommerce-cart td.product-subtotal .woocommerce-Price-amount { color: inherit; }

/* Quantity stepper */
body.woocommerce-cart td.product-quantity .quantity {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  background: var(--white);
  user-select: none;
  margin: 0 auto;
}
body.woocommerce-cart td.product-quantity .quantity label.screen-reader-text { position: absolute; left: -9999px; }
body.woocommerce-cart td.product-quantity .qty-btn,
body.woocommerce-cart td.product-quantity button.qty-btn,
body.woocommerce-cart td.product-quantity .qty-btn--plus,
body.woocommerce-cart td.product-quantity .qty-btn--minus {
  width: 36px; height: 36px;
  border: none;
  background: var(--white);
  font-family: var(--font-mono); font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  border-radius: 0;
}
body.woocommerce-cart td.product-quantity .qty-btn:hover { background: var(--ink); color: var(--white); }
body.woocommerce-cart td.product-quantity input.qty,
body.woocommerce-cart td.product-quantity input[type="number"] {
  width: 50px; height: 36px;
  border: none;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--ink);
  background: var(--white);
  font-variant-numeric: tabular-nums;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
body.woocommerce-cart td.product-quantity input.qty:focus { outline: none; border-color: var(--line); }
body.woocommerce-cart td.product-quantity input.qty::-webkit-outer-spin-button,
body.woocommerce-cart td.product-quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- ACTIONS ROW (coupon + update cart) ------------------ */
body.woocommerce-cart table.shop_table tr:has(td.actions) {
  display: block;
  border-bottom: none;
  padding: 0;
}
body.woocommerce-cart tr td.actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0 0;
  border: none;
}
body.woocommerce-cart td.actions .coupon {
  display: inline-flex;
  align-items: stretch;
  max-width: 380px;
  border: 1px solid var(--line);
  background: var(--white);
}
body.woocommerce-cart td.actions .coupon label.screen-reader-text {
  position: absolute; left: -9999px;
}
body.woocommerce-cart td.actions .coupon input#coupon_code,
body.woocommerce-cart td.actions .coupon input.input-text {
  flex: 1; min-width: 200px;
  border: none;
  padding: 0 16px;
  height: 44px;
  box-sizing: border-box;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
body.woocommerce-cart td.actions .coupon input#coupon_code::placeholder { color: var(--mute-2); }
body.woocommerce-cart td.actions .coupon input#coupon_code:focus { outline: none; }
body.woocommerce-cart td.actions .coupon button[name="apply_coupon"],
body.woocommerce-cart td.actions .coupon .button {
  border: none !important;
  border-left: 1px solid var(--line) !important;
  background: var(--white) !important;
  padding: 0 22px !important;
  height: 44px;
  box-sizing: border-box;
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink) !important;
  cursor: pointer;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background .15s, color .15s;
}
body.woocommerce-cart td.actions .coupon button[name="apply_coupon"]:hover,
body.woocommerce-cart td.actions .coupon .button:hover {
  background: var(--ink) !important;
  color: var(--white) !important;
}

body.woocommerce-cart td.actions > button[name="update_cart"],
body.woocommerce-cart td.actions > .button {
  height: 44px;
  padding: 0 22px;
  box-sizing: border-box;
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--ink) !important;
  background: var(--white) !important;
  color: var(--ink) !important;
  cursor: pointer;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background .15s, color .15s;
}
body.woocommerce-cart td.actions > button[name="update_cart"]:hover,
body.woocommerce-cart td.actions > .button:hover {
  background: var(--ink) !important;
  color: var(--white) !important;
}
body.woocommerce-cart td.actions > button[name="update_cart"][disabled] {
  opacity: .5; cursor: not-allowed;
}

/* ---- RIGHT COLUMN: ORDER SUMMARY -------------------------- */
body.woocommerce-cart .cart_totals h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 28px; letter-spacing: -.01em;
  color: var(--ink); line-height: 1;
  margin: 0 0 18px !important;
  padding: 0 0 18px !important;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
  text-transform: none;
}
body.woocommerce-cart .cart_totals table.shop_table { border: none; margin: 0; width: 100%; }
body.woocommerce-cart .cart_totals table.shop_table tbody { display: block; }
body.woocommerce-cart .cart_totals table.shop_table tr {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
  padding: 7px 0;
  border: none;
  background: transparent;
}
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
  border: none !important;
  padding: 0;
  background: transparent !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.woocommerce-cart .cart_totals table.shop_table th {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--body);
  text-align: left;
}
body.woocommerce-cart .cart_totals table.shop_table td {
  font-family: var(--font-sans); font-size: 15px;
  color: var(--ink);
  text-align: right;
}

body.woocommerce-cart .cart_totals tr.order-total {
  margin-top: 16px !important;
  padding-top: 22px !important;
  border-top: 1px solid var(--line-soft) !important;
}
body.woocommerce-cart .cart_totals tr.order-total th {
  font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--body);
}
body.woocommerce-cart .cart_totals tr.order-total td,
body.woocommerce-cart .cart_totals tr.order-total td strong {
  font-family: var(--font-sans); font-size: 15px;
  color: var(--ink); font-weight: 500;
}

/* Shipping calculator block */
body.woocommerce-cart .cart_totals .shipping-calculator-button {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute); border-bottom: 1px solid var(--line);
}
body.woocommerce-cart .cart_totals .shipping-calculator-button:hover { color: var(--ink); border-color: var(--ink); }
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods { list-style: none; padding: 0; margin: 4px 0 0; }
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods li {
  font-family: var(--font-sans); font-size: 13px;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
}

/* "Proceed to checkout" CTA */
body.woocommerce-cart .wc-proceed-to-checkout { padding: 0; margin-top: 24px; }
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 60px;
  padding: 0 24px !important;
  margin: 0 !important;
  background: var(--ink) !important;
  color: var(--white) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: none !important;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--white) !important;
  color: var(--ink) !important;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after {
  content: '→';
  font-family: var(--font-mono);
  font-size: 16px;
  display: inline-block;
  margin-left: 6px;
}

/* ---- WC NOTICES ------------------------------------------ */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink);
  padding: 16px 20px;
  margin: 24px 0;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
  border-radius: 0;
  box-shadow: none;
}
body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before { display: none; }
body.woocommerce-cart .woocommerce-message a,
body.woocommerce-cart .woocommerce-info a { color: var(--ink); border-bottom: 1px solid var(--ink); }

/* ---- EMPTY CART STATE ------------------------------------ */
body.woocommerce-cart .cart-empty {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 56px; letter-spacing: -.02em;
  color: var(--ink);
  text-align: center;
  padding: 96px 0 14px;
  background: transparent;
  border: none;
  margin: 0;
  grid-column: 1 / -1;
}
body.woocommerce-cart .return-to-shop {
  text-align: center;
  padding: 0 0 96px;
  margin: 0;
  border-bottom: 1px solid var(--line);
  grid-column: 1 / -1;
}
body.woocommerce-cart .return-to-shop a.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px !important;
  background: var(--ink) !important;
  color: var(--white) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: none !important;
  transition: background .15s, color .15s;
}
body.woocommerce-cart .return-to-shop a.button:hover {
  background: var(--white) !important;
  color: var(--ink) !important;
}

/* ---- CROSS-SELLS ----------------------------------------- */
body.woocommerce-cart .cart-collaterals .cross-sells {
  grid-column: 1 / -1;
  width: auto;
  float: none;
  padding: 28px 0 32px;
  background: var(--page);
  border-top: 1px solid var(--line-soft);
}
body.woocommerce-cart .cart-collaterals .cross-sells > h2 {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--body);
  line-height: 1.4;
}
body.woocommerce-cart .cart-collaterals .cross-sells ul.products {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product {
  display: flex !important;
  flex-direction: column;
  background: var(--white);
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
}

/* ---- RESPONSIVE ------------------------------------------ */
@media (max-width: 1100px) {
  body.woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
  body.woocommerce-cart form.woocommerce-cart-form {
    grid-column: 1;
    padding: 36px 0 48px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  body.woocommerce-cart .cart-collaterals {
    grid-column: 1;
    padding: 36px 0 80px;
  }
  body.woocommerce-cart .cart-collaterals .cart_totals { position: static; }
  body.woocommerce-cart .cart-collaterals .cross-sells ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  body.woocommerce-cart table.shop_table thead { display: none; }
  body.woocommerce-cart tr.cart_item,
  body.woocommerce-cart tr.woocommerce-cart-form__cart-item {
    grid-template-columns: 96px 1fr;
    gap: 12px 16px;
    padding: 18px 0;
  }
  body.woocommerce-cart td.product-thumbnail { grid-column: 1; grid-row: 1 / span 4; width: 96px; }
  body.woocommerce-cart td.product-thumbnail img { width: 96px !important; height: 96px !important; }
  body.woocommerce-cart td.product-name { grid-column: 2; grid-row: 1; text-align: left; }
  body.woocommerce-cart td.product-price { grid-column: 2; grid-row: 2; text-align: left; }
  body.woocommerce-cart td.product-quantity { grid-column: 2; grid-row: 3; text-align: left; }
  body.woocommerce-cart td.product-subtotal { grid-column: 2; grid-row: 4; text-align: left; }
  body.woocommerce-cart td.product-remove {
    grid-column: 2; grid-row: 1;
    justify-self: end;
    margin-top: -180px;
  }
  body.woocommerce-cart td.product-quantity .quantity { margin: 0; }
  body.woocommerce-cart td.product-price::before { content: 'Unit price · '; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-right: 8px; }
  body.woocommerce-cart td.product-subtotal::before { content: 'Subtotal · '; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-right: 8px; }
  body.woocommerce-cart tr td.actions { display: block; }
  body.woocommerce-cart td.actions .coupon { display: flex; max-width: 100%; margin-bottom: 12px; }
  body.woocommerce-cart td.actions > button[name="update_cart"] { width: 100%; justify-content: center; }
  body.woocommerce-cart .cart-collaterals .cross-sells ul.products { grid-template-columns: 1fr 1fr; }
}

/* ---- END OF CART STYLES ---------------------------------- */


/* === MOCK SHIPPING BLOCK OVERRIDE === */
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 4px 0; align-items: start; }
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th { padding-top: 3px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--body); font-weight: normal; text-align: left; }
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td { min-width: 0; padding: 0; }
body.woocommerce-cart ul.woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
body.woocommerce-cart ul.woocommerce-shipping-methods li { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: baseline; font-family: var(--font-sans); font-size: 14px; color: var(--ink); line-height: 1.4; margin: 0; padding: 0; }
body.woocommerce-cart ul.woocommerce-shipping-methods li input[type="radio"] { width: 13px; height: 13px; margin: 0; accent-color: var(--ink); cursor: pointer; transform: translateY(1px); }
body.woocommerce-cart ul.woocommerce-shipping-methods li label { display: contents; cursor: pointer; }
body.woocommerce-cart ul.woocommerce-shipping-methods .woocommerce-Price-amount { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; justify-self: end; }
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: 13px; 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: 6px; margin-top: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; background: none; border-top: 0; border-left: 0; border-right: 0; text-decoration: none; }
body.woocommerce-cart .shipping-calculator-button:hover { color: var(--mute); border-bottom-color: var(--mute); }
body.woocommerce-cart .shipping-calculator-form { margin-top: 14px; }

/* === MOCK SHIPPING CALCULATOR FORM (inline dropdown) === */
/* The wrapping <form.woocommerce-shipping-calculator> contains the link AND the inner panel.
   The inner <section.shipping-calculator-form> is what slides open/closed.
   We style the inner panel as an inline expanding dropdown matching the mock's .addr-dropdown. */

body.woocommerce-cart form.woocommerce-shipping-calculator { display: block; margin: 0; padding: 0; background: transparent; border: 0; }

/* The slide-down inner panel */
body.woocommerce-cart .shipping-calculator-form {
  display: block !important;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  border: 1px solid var(--ink);
  border-width: 0;
  background: var(--white);
  padding: 0 !important;
  box-sizing: border-box;
  transition: max-height .28s ease, opacity .2s ease, margin-top .2s ease, border-width .01s linear .28s, padding .01s linear .28s;
}
body.woocommerce-cart .shipping-calculator-form.ait-open {
  max-height: 520px;
  opacity: 1;
  margin-top: 12px;
  border-width: 1px;
  padding: 16px 16px 14px !important;
  transition: max-height .32s ease, opacity .22s ease .06s, margin-top .2s ease, border-width .01s linear 0s, padding .01s linear 0s;
}

/* Form rows inside the dropdown — 2-col grid */
body.woocommerce-cart .shipping-calculator-form .form-row {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0 0 10px; padding: 0;
  width: calc(50% - 5px); float: left;
}
body.woocommerce-cart .shipping-calculator-form .form-row:nth-of-type(odd) { margin-right: 10px; }
body.woocommerce-cart .shipping-calculator-form .form-row:nth-of-type(1),
body.woocommerce-cart .shipping-calculator-form .form-row:nth-of-type(2) { width: 100%; margin-right: 0; }
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);
  margin: 0; padding: 0; font-weight: normal;
}
body.woocommerce-cart .shipping-calculator-form input.input-text,
body.woocommerce-cart .shipping-calculator-form select {
  width: 100%; height: 36px; padding: 0 10px; box-sizing: border-box;
  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);
  appearance: none; -webkit-appearance: none; border-radius: 0; margin: 0;
}
body.woocommerce-cart .shipping-calculator-form input.input-text:focus,
body.woocommerce-cart .shipping-calculator-form select:focus {
  outline: none; border-color: var(--ink); background-color: var(--white);
}

/* Update button — small, full-width, dark */
body.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"] {
  clear: both;
  display: block; width: 100%; height: 38px; padding: 0; box-sizing: border-box;
  margin: 14px 0 0;
  background: var(--ink); color: var(--white); border: 1px solid var(--ink);
  font-family: var(--font-sans); font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
  border-radius: 0; transition: background .15s, color .15s;
}
body.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"]:hover {
  background: var(--white); color: var(--ink);
}

/* Select2 overrides to match dropdown style */
body.woocommerce-cart .shipping-calculator-form .select2-container { width: 100% !important; }
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection--single {
  height: 36px !important; border: 1px solid var(--line) !important;
  background: var(--page) !important; border-radius: 0 !important;
}
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important; padding: 0 10px !important;
  font-family: var(--font-mono) !important; font-size: 11px !important;
  letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--ink) !important;
}
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection--single .select2-selection__arrow { height: 36px !important; }

/* Clear floats inside the calculator form */
body.woocommerce-cart .shipping-calculator-form::after { content: ''; display: block; clear: both; }


/* === MOCK SHIPPING EMPTY STATE === */
body.woocommerce-cart p.woocommerce-shipping-destination.ship-empty {
  border-top: none;
  padding-top: 0;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: left;
}
body.woocommerce-cart p.woocommerce-shipping-destination.ship-empty .shipping-calculator-button.ship-set-link {
  display: inline;
  margin-top: 0;
  padding: 0 0 1px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
}
body.woocommerce-cart p.woocommerce-shipping-destination.ship-empty .shipping-calculator-button.ship-set-link:hover {
  color: var(--mute);
  border-bottom-color: var(--mute);
}


/* === MOCK CARET FOR SET/CHANGE LINKS === */
body.woocommerce-cart .shipping-calculator-button .caret,
body.woocommerce-cart .ship-set-link .caret {
  display: inline-block; margin-left: 2px; font-size: 9px;
  transition: transform .2s ease;
}
body.woocommerce-cart form.woocommerce-shipping-calculator.ait-expanded .shipping-calculator-button .caret,
body.woocommerce-cart .shipping-calculator-button[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}


/* === MOCK SHIPPING METHOD RADIO FIX === */
body.woocommerce-cart ul.woocommerce-shipping-methods li {
  display: grid !important;
  grid-template-columns: 16px 1fr auto !important;
  gap: 10px !important;
  align-items: baseline !important;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
}
body.woocommerce-cart ul.woocommerce-shipping-methods li input[type="radio"] {
  width: 13px; height: 13px; margin: 0;
  accent-color: var(--ink); cursor: pointer;
  transform: translateY(1px);
  grid-column: 1;
}
body.woocommerce-cart ul.woocommerce-shipping-methods li label {
  grid-column: 2 / 4;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  margin: 0; padding: 0;
}
body.woocommerce-cart ul.woocommerce-shipping-methods li label .woocommerce-Price-amount,
body.woocommerce-cart ul.woocommerce-shipping-methods li .woocommerce-Price-amount {
  margin-left: 4px;
  font-weight: 500;
}


/* === MOCK SHIPPING DROPDOWN WIDTH FIX === */
body.woocommerce-cart .cart_totals { position: relative; }

body.woocommerce-cart .shipping-calculator-form.ait-open {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  width: auto !important;
  z-index: 5;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  row-gap: 0;
}
body.woocommerce-cart .shipping-calculator-form .form-row {
  float: none !important;
  width: 100% !important;
  margin-right: 0 !important;
  display: flex; flex-direction: column; gap: 4px;
}
body.woocommerce-cart .shipping-calculator-form.ait-open .form-row { grid-column: 1 / -1; margin: 0 0 10px !important; }
body.woocommerce-cart .shipping-calculator-form.ait-open .form-row:has(#calc_shipping_state) { grid-column: 1 / 2; }
body.woocommerce-cart .shipping-calculator-form.ait-open .form-row:has(#calc_shipping_postcode) { grid-column: 2 / 3; }
body.woocommerce-cart .shipping-calculator-form.ait-open button[name="calc_shipping"] { grid-column: 1 / -1; }


/* === MOCK SHIPPING DROPDOWN ALIGN + CARET FIX === */
/* Left-align everything inside the calculator form (overrides td text-align:right) */
body.woocommerce-cart form.woocommerce-shipping-calculator,
body.woocommerce-cart .shipping-calculator-form,
body.woocommerce-cart .shipping-calculator-form .form-row,
body.woocommerce-cart .shipping-calculator-form .form-row label,
body.woocommerce-cart .shipping-calculator-form input.input-text,
body.woocommerce-cart .shipping-calculator-form select,
body.woocommerce-cart .shipping-calculator-form .select2-container,
body.woocommerce-cart .shipping-calculator-form .select2-selection__rendered {
  text-align: left !important;
}

/* Draw the select2 caret arrow as a visible chevron */
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__arrow {
  position: absolute;
  top: 0; right: 0;
  width: 34px; height: 36px;
  pointer-events: none;
}
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__arrow b {
  display: none;
}
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__arrow::after {
  content: '▾';
  position: absolute;
  top: 50%; right: 12px;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--ink);
  line-height: 1;
}
/* Make the select2 selection a positioning context for the arrow */
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection--single {
  position: relative !important;
}
/* Also handle non-select2 native selects (rare here but defensive) */
body.woocommerce-cart .shipping-calculator-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%230b0b0d'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 9px 6px;
  padding-right: 30px;
}


/* === MOCK SHIPPING STATE ROW SPAN FIX === */
/* WC wraps the state-row label+select in an extra <span> (for its state-picker switcher).
   The wrapper span needs to inherit the flex-column + gap so the visible select sits at
   the same y-position as native inputs in sibling rows (city, postal). */
body.woocommerce-cart .shipping-calculator-form .form-row > span {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}


/* === MOCK SHIPPING CARET FIX (override transform/positioning) === */
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__arrow {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: 34px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  pointer-events: none;
}
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__arrow b {
  display: none !important;
}
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__arrow::after {
  content: '▾';
  display: block;
  margin-right: 12px;
  font-size: 11px;
  color: var(--ink);
  line-height: 1;
  position: static !important;
  transform: none !important;
  top: auto !important;
  right: auto !important;
}


/* === MOCK CHEVRON (final override — matches mock's .addr-field select two-gradient style) === */
/* Hide the prior ::after triangle caret completely */
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__arrow::after {
  content: none !important;
  display: none !important;
}
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__arrow {
  display: none !important;
}

/* Draw the chevron on the select2 visible selection box itself */
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection--single {
  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 !important;
  padding-right: 26px !important;
}

/* Same for native <select> if it ever shows up un-enhanced */
body.woocommerce-cart .shipping-calculator-form 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 !important;
  padding-right: 26px;
}


/* === MOCK CHEVRON v2 (Unicode ▾ matching change-address link style) === */
/* Override v1 gradients with a clean Unicode chevron approach */
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection--single {
  background-image: none !important;
  padding-right: 26px !important;
  position: relative !important;
}
body.woocommerce-cart .shipping-calculator-form select {
  background-image: none !important;
  padding-right: 26px;
}

/* Re-enable the arrow span, hide its <b>, draw a Unicode chevron */
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__arrow {
  display: flex !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 26px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  align-items: center !important;
  justify-content: flex-end !important;
  pointer-events: none !important;
}
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__arrow b {
  display: none !important;
}
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__arrow::after {
  content: '▾' !important;
  display: block !important;
  margin-right: 11px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  color: var(--ink) !important;
  font-family: var(--font-mono) !important;
  position: static !important;
  transform: none !important;
  top: auto !important;
  right: auto !important;
}


/* === MOCK SELECT2 TEXT CENTER FIX === */
/* Zero out the select2-selection--single padding so its inner rendered span sits at the
   same position as a native <input>. Line-height handles vertical centering. */
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection--single {
  padding: 0 !important;
  height: 36px !important;
  line-height: 36px !important;
  display: block !important;
}
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0 26px 0 10px !important;
  margin: 0 !important;
  line-height: 36px !important;
  height: 36px !important;
  display: block !important;
  text-align: left !important;
}


/* === MOCK SIZE MATCH (final calibration vs mock) === */
/* Force Update button to span the full dropdown grid width */
body.woocommerce-cart .shipping-calculator-form.ait-open button[name="calc_shipping"] {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* Radio option text: mock spec is 14px sans (live was 13px). Match the mock. */
body.woocommerce-cart ul.woocommerce-shipping-methods li {
  font-size: 14px !important;
  line-height: 1.4 !important;
}
body.woocommerce-cart ul.woocommerce-shipping-methods li label {
  font-size: 14px !important;
}

/* Price amount: mock spec is font-weight 500, not 700 */
body.woocommerce-cart ul.woocommerce-shipping-methods li .woocommerce-Price-amount,
body.woocommerce-cart ul.woocommerce-shipping-methods li label .woocommerce-Price-amount {
  font-weight: 500 !important;
  font-size: 14px !important;
}
body.woocommerce-cart ul.woocommerce-shipping-methods li label strong,
body.woocommerce-cart ul.woocommerce-shipping-methods li strong {
  font-weight: 500 !important;
}

/* CHANGE ADDRESS link: mock spec is 10px (live was 11px) */
body.woocommerce-cart .shipping-calculator-button {
  font-size: 10px !important;
  letter-spacing: .18em !important;
}
body.woocommerce-cart .shipping-calculator-button .caret {
  font-size: 9px !important;
}


/* === MOCK UPDATE BUTTON FULL-WIDTH FIX === */
/* WC wraps the submit button in a <p>. Target the <p> so it spans the full grid width. */
body.woocommerce-cart .shipping-calculator-form.ait-open > p:has(button[name="calc_shipping"]) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}
body.woocommerce-cart .shipping-calculator-form.ait-open > p:has(button[name="calc_shipping"]) button[name="calc_shipping"] {
  width: 100% !important;
  margin: 0 !important;
}


/* === MOCK SHIPPING RADIO LABEL FLEX (push price to right) === */
/* WC's <label> contains 'Flat rate: ' text + <span.woocommerce-Price-amount>.
   Make the label a flex row so price is pushed to the right edge. */
body.woocommerce-cart ul.woocommerce-shipping-methods li label {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100%;
}
body.woocommerce-cart ul.woocommerce-shipping-methods li label .woocommerce-Price-amount {
  margin-left: auto !important;
  flex-shrink: 0;
}
/* Update grid so label spans the right two columns; price flows to far right within the label */
body.woocommerce-cart ul.woocommerce-shipping-methods li {
  grid-template-columns: 16px 1fr !important;
}
body.woocommerce-cart ul.woocommerce-shipping-methods li label {
  grid-column: 2 / -1 !important;
}


/* === INLINED SINGLE-PRODUCT.CSS FOR CART RELATED PRODUCTS === */
/* ==========================================================================
   Aitrixa — single product page
   --------------------------------------------------------------------------
   Enqueued only on is_product() (see functions.php).
   Tokens come from aitrixa.css — never hardcode hex / sizes here.
   --------------------------------------------------------------------------
   Sections (top to bottom of the page):
     1. Upsell strip (also used on homepage; defined here too for safety)
     2. Breadcrumb
     3. Product container layout (two-column grid)
     4. Gallery
     5. Summary basics — eyebrow, title, formula, price, quick-specs
     6. Size selector + variations
     7. Quantity stepper + add-to-cart button
     8. Trust strip
     9. Tabs (Description + Documents/CoA)
    10. Related products carousel
    11. Sticky cart bar
    12. Responsive overrides
   ========================================================================== */


/* ==========================================================================
   1. Upsell strip
   --------------------------------------------------------------------------
   Spec uses ink-bg full-width strip with mono caps text. Same component as
   on home; if a global stylesheet ever defines this, these rules just match.
   ========================================================================== */
.upsell-strip {
    background: var(--ink);
    padding: 13px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    flex-wrap: wrap;
}
.upsell-strip strong {
    color: var(--white);
    font-weight: 500;
}
.upsell-strip .upsell-sep,
.upsell-strip .sep {
    color: rgba(255, 255, 255, .2);
}


/* ==========================================================================
   2. Breadcrumb
   --------------------------------------------------------------------------
   WC's nav.woocommerce-breadcrumb. Em-dash separator from PHP filter
   (see inc/product-render.php). Sits in the page max-width container.
   ========================================================================== */
.woocommerce-breadcrumb {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 18px var(--gutter);
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.woocommerce-breadcrumb a {
    color: var(--mute);
    text-decoration: none;
    transition: color .12s;
}
.woocommerce-breadcrumb a:hover {
    color: var(--ink);
}
.woocommerce-breadcrumb .sep {
    color: var(--mute-2);
}


/* ==========================================================================
   3. Product container layout — two-column grid
   --------------------------------------------------------------------------
   Gallery 2fr, summary 3fr, hairline border, sharp corners, white bg.
   The .aitrixa-single-product main wrap centers and pads.
   ========================================================================== */
.aitrixa-single-product {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.woocommerce div.product {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 0;
    border: 1px solid var(--line);
    background: var(--white);
    margin: 24px 0 0;
}


/* ==========================================================================
   4. Gallery
   ========================================================================== */
.woocommerce-product-gallery {
    position: relative;
    background: var(--white);
    border-right: 1px solid var(--line-soft);
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.woocommerce-product-gallery__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(
        -45deg,
        var(--panel-2) 0, var(--panel-2) 6px,
        var(--panel-3) 6px, var(--panel-3) 12px
    );
}

/* Real image — let WC's <img> fill the wrapper. */
.woocommerce-product-gallery__wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hatch-pattern placeholder */
.woocommerce-product-gallery__image--placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--mute-2);
}
.woocommerce-product-gallery__image--placeholder span {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute-2);
    text-align: center;
    line-height: 2;
}

/* Gallery thumbnails */
.woocommerce-product-gallery__thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line-soft);
    border-top: 1px solid var(--line-soft);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
.woocommerce-product-gallery__thumbnail {
    aspect-ratio: 1 / 1;
    background: var(--panel);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.woocommerce-product-gallery__thumbnail:hover,
.woocommerce-product-gallery__thumbnail.active {
    background: var(--panel-3);
}
.woocommerce-product-gallery__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.woocommerce-product-gallery__thumbnail.active::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--ink);
}

/* Badge ribbon — top-left */
.woocommerce-product-gallery .product-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    font-family: var(--font-mono);
    font-size: 8.5px;
    letter-spacing: .24em;
    text-transform: uppercase;
    padding: 5px 10px;
    background: var(--ink);
    color: var(--white);
}


/* ==========================================================================
   5. Summary basics — eyebrow, title, formula, price, quick specs
   ========================================================================== */
.summary.entry-summary {
    padding: 0 44px 36px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
}

/* Eyebrow */
.posted_in {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 10px;
    display: block;
}
.posted_in a {
    color: var(--mute);
    text-decoration: none;
}
.posted_in a:hover {
    color: var(--ink);
}

/* Title */
.woocommerce div.product h1.product_title.entry-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(42px, 5vw, 68px);
    line-height: .95;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0 0 6px;
}

/* Formula line */
.product-formula {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    color: var(--mute);
    margin: 0 0 20px;
}

/* Price block */
.woocommerce div.product .price {
    margin: 0 0 16px;
}
.woocommerce div.product .price .woocommerce-Price-amount.amount {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 28px;
    color: var(--ink);
    letter-spacing: -.02em;
}
.price-from-label {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mute);
    display: block;
    margin-bottom: 4px;
}
.price-per-unit {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--mute);
    margin-left: 8px;
}
.price-per-unit:empty {
    display: none;
}

/* Quick specs grid */
.product-quick-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--line-soft);
    margin-bottom: 28px;
}
.product-quick-spec {
    padding: 14px 16px;
    border-right: 1px solid var(--line-soft);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mute);
}
.product-quick-spec:last-child {
    border-right: none;
}
.product-quick-spec strong {
    display: block;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    margin-bottom: 3px;
}


/* ==========================================================================
   6. Size selector + variations
   ========================================================================== */
.woocommerce div.product form.cart.variations_form {
    margin-bottom: 20px;
}

.size-selector {
    margin: 0 0 20px;
}
.size-selector__label {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    /* The plugin renders ((span)mg(/span)(a)Clear(/a)) inside this label —
       hide both children and inject the mock’s "Select size" via ::before. */
    font-size: 12px !important;
}
.size-selector__label > span,
.size-selector__label > a.reset_variations {
    display: none !important;
}
.size-selector__label::before {
    content: "Select size";
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute, #6b6d73);
}
.size-selector__label span {
    color: var(--ink);
    font-weight: 500;
}
.size-selector__label .reset_variations {
    color: var(--mute);
    text-decoration: none;
    font-size: 9.5px;
    letter-spacing: .18em;
    transition: color .15s;
}
.size-selector__label .reset_variations:hover {
    color: var(--ink);
}

.size-options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.woocommerce div.product form.cart .size-option,
button.size-option {
    padding: 10px 16px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    min-width: 76px;
    transition: background .15s, border-color .15s, color .15s;
    border-radius: 0;
}

.woocommerce div.product form.cart .size-option:hover,
button.size-option:hover {
    border-color: var(--ink);
    background: var(--white);
    color: var(--ink);
}

.size-option:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.woocommerce div.product form.cart .size-option.active,
button.size-option.active {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
}

.woocommerce div.product form.cart .size-option.soldout,
.woocommerce div.product form.cart .size-option[disabled],
button.size-option.soldout,
button.size-option[disabled] {
    color: var(--mute-2);
    background: var(--white);
    border-color: var(--line-soft);
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: .5;
}

.size-option__label {
    font-family: var(--font-mono);
    white-space: nowrap;
}
.size-option__flag {
    font-family: var(--font-mono);
    font-size: 8.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mute);
    margin-top: 2px;
}


/* ==========================================================================
   7. Quantity stepper + add-to-cart button
   ========================================================================== */
.woocommerce div.product .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-rows: 52px;
    align-items: stretch;
    gap: 0;
    margin: 0;
    border: 0.8px solid var(--ink);
    height: auto;
    box-sizing: border-box;
    overflow: hidden;
}

.quantity {
    display: flex;
    align-items: stretch;
    border-right: 1px solid var(--ink);
    background: var(--white);
}

.quantity input.qty {
    flex: 0 0 47px;
    min-width: 47px;
    width: 47px;
    border: none;
    background: transparent;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    text-align: center;
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
    outline: none;
    border-radius: 0;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-btn {
    width: 36px;
    height: 100%;
    align-self: stretch;
    border: none;
    background: transparent;
    color: var(--mute);
    font-family: var(--font-mono);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    transition: background .12s, color .12s;
    border-radius: 0;
}
.qty-btn:hover {
    background: var(--panel-3);
    color: var(--ink);
}
.qty-btn--minus { border-right: 1px solid var(--line-soft); }
.qty-btn--plus  { border-left:  1px solid var(--line-soft); }

.qty-btn[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

button.single_add_to_cart_button.button.alt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 24px;
    background: var(--ink);
    color: var(--white);
    border: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: .22em;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    align-self: stretch;
    box-sizing: border-box;
    border-radius: 0;
    transition: background .15s, color .15s;
}
button.single_add_to_cart_button.button.alt:hover {
    background: var(--white);
    color: var(--ink);
}
button.single_add_to_cart_button.button.alt:disabled,
button.single_add_to_cart_button.button.alt.disabled,
button.single_add_to_cart_button.button.alt.wc-variation-selection-needed {
    opacity: .5;
    cursor: not-allowed;
    background: var(--ink);
    color: var(--white);
}
button.single_add_to_cart_button.button.alt svg {
    flex-shrink: 0;
}


/* ==========================================================================
   8. Trust strip
   ========================================================================== */
.product-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--line-soft);
    padding-top: 20px;
    margin-top: 4px;
}
.trust-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px;
    border-right: 1px solid var(--line-soft);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mute);
    line-height: 1.6;
}
.trust-item:first-child { padding-left: 0; }
.trust-item:last-child  { border-right: none; }
.trust-item strong {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}


/* ==========================================================================
   9. Tabs — Description + Documents/CoA
   ========================================================================== */
.woocommerce-tabs {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line-soft);
}
.woocommerce-tabs ul.tabs {
    list-style: none;
    display: flex;
    border-bottom: 1px solid var(--line-soft);
    background: var(--panel);
    margin: 0;
    padding: 0;
}
.woocommerce-tabs ul.tabs li {
    border-right: 1px solid var(--line-soft);
    margin: 0;
    padding: 0;
}
.woocommerce-tabs ul.tabs li::before { content: none; }
.woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 16px 28px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute);
    cursor: pointer;
    transition: color .15s, background .15s;
    text-decoration: none;
}
.woocommerce-tabs ul.tabs li a:hover { color: var(--ink); }
.woocommerce-tabs ul.tabs li.active a {
    color: var(--ink);
    background: var(--white);
    font-weight: 500;
    position: relative;
}
.woocommerce-tabs ul.tabs li.active a::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 1px;
    background: var(--white);
}

.woocommerce-Tabs-panel {
    display: none;
    padding: 48px var(--gutter);
    background: var(--white);
}
.woocommerce-Tabs-panel.active { display: block; }

.woocommerce-Tabs-panel--description {
    max-width: 720px;
}
.woocommerce-Tabs-panel--description h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.05;
    letter-spacing: -.01em;
    color: var(--ink);
    margin: 0 0 20px;
}
.woocommerce-Tabs-panel--description p {
    font-size: 14px;
    line-height: 1.75;
    color: var(--body);
    margin: 0 0 16px;
}
.tab-section-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
}

.aitrixa-documents-list {
    display: grid;
    gap: 1px;
    border: 1px solid var(--line-soft);
    background: var(--line-soft);
    max-width: 640px;
}
.aitrixa-document {
    background: var(--white);
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
}
.aitrixa-document__title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 15.5px;
    color: var(--ink);
    margin: 0 0 3px;
}
.aitrixa-document__meta {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mute);
}
.coa-btn {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 9px 16px;
    border: 1px solid var(--ink);
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    border-radius: 0;
}
.coa-btn:hover {
    background: var(--ink);
    color: var(--white);
}
.coa-btn--primary {
    background: var(--ink);
    color: var(--white);
}
.coa-btn--primary:hover {
    background: var(--white);
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Plugin classname bridge — aitrixa-core emits a slightly different markup
   shape than the design mock. These rules map the plugin's actual class
   names onto the existing .aitrixa-document* / .coa-btn typography so we
   don't need to touch the plugin to get the spec-compliant visual.

   Plugin emits:                  Mock equivalent:
     ul.aitrixa-documents           .aitrixa-documents-list
     .aitrixa-document__head        .aitrixa-document__title
     .aitrixa-document__detail      .aitrixa-document__meta
     a.aitrixa-document__download   .coa-btn
     li.aitrixa-document.is-latest  → primary download button
   -------------------------------------------------------------------------- */
/* Astra entry-content underline neutraliser ----------------------------
   The WC tabs panel has class .entry-content, and Astra ships an inline
   .ast-single-post .entry-content a { text-decoration: underline } rule
   (specificity 0,2,1) which leaks underlines onto every styled link inside
   tab panels. Scope our reset to the panel + outrank Astra (0,3,1). */
.woocommerce-Tabs-panel.entry-content a,
.woocommerce-Tabs-panel.entry-content a:hover,
.woocommerce-Tabs-panel.entry-content a:focus,
.woocommerce-Tabs-panel.entry-content a:visited {
    text-decoration: none;
}

ul.aitrixa-documents {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
    border: 1px solid var(--line-soft);
    background: var(--line-soft);
    max-width: 640px;
}
ul.aitrixa-documents > li.aitrixa-document {
    list-style: none;
    margin: 0;
}
ul.aitrixa-documents > li.aitrixa-document::before { content: none; }
.aitrixa-document__head {
    /* Title row — sans 600. May contain a "Latest" tag span as child. */
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 15.5px;
    color: var(--ink);
    margin: 0 0 3px;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* If the plugin renders the "Latest" marker as plain text (not a child element)
   we can't style just the badge — but if it does emit a span, this catches it. */
.aitrixa-document__head .aitrixa-document__flag,
.aitrixa-document__head .is-latest-tag,
.aitrixa-document__head .aitrixa-document__tag,
.aitrixa-document__head small {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute);
    padding: 3px 7px;
    border: 1px solid var(--line);
    background: var(--panel);
    line-height: 1;
}
.aitrixa-document__detail {
    /* Meta row — mono caps. */
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mute);
}
/* Apply .coa-btn styling to the plugin's download anchor. */
li.aitrixa-document a.aitrixa-document__download,
li.aitrixa-document button.aitrixa-document__download {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 9px 16px;
    border: 1px solid var(--ink);
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    border-radius: 0;
}
li.aitrixa-document a.aitrixa-document__download:hover,
li.aitrixa-document button.aitrixa-document__download:hover {
    background: var(--ink);
    color: var(--white);
}
/* Latest doc gets the filled (primary) button treatment. */
li.aitrixa-document.is-latest a.aitrixa-document__download,
li.aitrixa-document.is-latest button.aitrixa-document__download {
    background: var(--ink);
    color: var(--white);
}
li.aitrixa-document.is-latest a.aitrixa-document__download:hover,
li.aitrixa-document.is-latest button.aitrixa-document__download:hover {
    background: var(--white);
    color: var(--ink);
}
/* The plugin's LI uses the same 1fr auto grid as the .aitrixa-document spec
   block. Inherits the existing .aitrixa-document rule above (line ~660),
   which sets padding / display:grid / grid-template-columns. No override
   needed unless the plugin emits a flex layout — handle that defensively: */
ul.aitrixa-documents > li.aitrixa-document {
    background: var(--white);
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
}



/* ==========================================================================
   10. Related products — carousel
   ========================================================================== */
.woocommerce div.product section.related.products,
section.related.products {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line-soft);
    padding: 28px 44px 32px;
    background: var(--panel);
    margin: 0;
}
.related.products > h2 {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--mute);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
}
.related-carousel-nav {
    display: flex;
    gap: 4px;
}
.related-carousel-btn {
    width: 28px; height: 28px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1;
    transition: background .12s, border-color .12s;
    flex-shrink: 0;
    border-radius: 0;
}
.related-carousel-btn:hover {
    background: var(--panel-3);
    border-color: var(--ink);
}
.related-carousel-btn:disabled {
    opacity: .3;
    cursor: default;
}

.related-carousel-track-wrap {
    overflow: hidden;
}
.related.products ul.products {
    list-style: none;
    display: flex;
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
    margin: 0;
    padding: 0;
}
.related.products ul.products li.product {
    display: flex;
    flex-direction: column;
    background: var(--white);
    flex: 0 0 calc(25% - .75px);
    min-width: 0;
    cursor: pointer;
    transition: background .15s;
    margin: 0;
    padding: 0;
    list-style: none;
}
.related.products ul.products li.product::before { content: none; }
.related.products ul.products li.product:hover {
    background: var(--panel-2);
}

.related.products .woocommerce-loop-product__link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.related-product-img {
    aspect-ratio: 1 / 1;
    background: var(--white, #fff);
    display: block;
    overflow: hidden;
    border: 0;
}

/* Image fills the wrapper edge-to-edge with no Astra/WC margin pulling it. */
.related.products li.product .related-product-img img,
.woocommerce-js .related.products li.product .related-product-img img,
.woocommerce-js ul.products li.product .related-product-img a img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
}
.related-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.related-product-img span {
    font-family: var(--font-mono);
    font-size: 7.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute-2);
    text-align: center;
    line-height: 1.8;
}
.related-product-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}
.related-product-category {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute);
}
.related.products .woocommerce-loop-product__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.05;
    color: var(--ink);
    margin: 0 0 4px;
    padding: 0;
}
.related.products ul.products .price {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 0;
    margin-top: auto;
}
.related.products ul.products .price .woocommerce-Price-amount {
    font-size: 14px;
}

.related-product-footer {
    padding: 8px 14px 12px;
    border-top: 1px solid var(--line-soft);
}
.related.products .add_to_cart_button,
.related.products .button.add_to_cart_button {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 9px 10px;
    background: var(--ink);
    color: var(--white);
    border: 1px solid var(--ink);
    cursor: pointer;
    transition: background .15s, color .15s;
    text-align: center;
    display: block;
    text-decoration: none;
    border-radius: 0;
}
.related.products .add_to_cart_button:hover,
.related.products .button.add_to_cart_button:hover {
    background: var(--white);
    color: var(--ink);
}


/* ==========================================================================
   11. Sticky cart bar
   ========================================================================== */
.sticky-cart-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--line);
    z-index: 80;
    transform: translateY(100%);
    transition: transform .3s ease;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .08);
}
.sticky-cart-bar.visible {
    transform: translateY(0);
}
.sticky-cart-bar__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 14px var(--gutter);
    display: flex;
    align-items: center;
    gap: 24px;
}
.sticky-cart-bar__name {
    font-family: var(--font-serif);
    font-size: 22px;
    letter-spacing: -.01em;
    color: var(--ink);
    flex: 1;
}
.sticky-cart-bar__size {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mute);
    white-space: nowrap;
}
.sticky-cart-bar__price {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
    white-space: nowrap;
}
.sticky-cart-bar__price .woocommerce-Price-amount {
    font-size: 18px;
}
.sticky-cart-bar__btn {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.55;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 13px 28px;
    background: var(--ink);
    color: var(--white);
    border: 1px solid var(--ink);
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
    border-radius: 0;
}
.sticky-cart-bar__btn:hover {
    background: var(--white);
    color: var(--ink);
}


/* ==========================================================================
   12. Responsive
   ========================================================================== */
@media (max-width: 980px) {
    .woocommerce div.product {
        grid-template-columns: 1fr;
    }
    .woocommerce-product-gallery {
        border-right: none;
        border-bottom: 1px solid var(--line-soft);
    }
    .summary.entry-summary {
        padding: 32px 28px;
    }
    .related.products ul.products li.product {
        flex: 0 0 calc(33.333% - .67px);
    }
}

@media (max-width: 720px) {
    .summary.entry-summary { padding: 28px 24px; }
    section.related.products { padding: 28px 24px; }
    .product-quick-specs { grid-template-columns: 1fr 1fr; }
    .product-quick-spec:nth-child(3) {
        grid-column: 1 / -1;
        border-right: none;
        border-top: 1px solid var(--line-soft);
    }
    .product-trust { grid-template-columns: 1fr; gap: 10px; }
    .trust-item {
        border-right: none;
        border-bottom: 1px solid var(--line-soft);
        padding: 0 0 10px;
    }
    .trust-item:last-child { border-bottom: none; }
    .related.products ul.products li.product {
        flex: 0 0 calc(50% - .5px);
    }
    .sticky-cart-bar__inner {
        gap: 12px;
        padding: 12px 16px;
    }
    .sticky-cart-bar__size { display: none; }
}

@media (max-width: 480px) {
    .related.products ul.products li.product {
        flex: 0 0 100%;
    }
    .woocommerce-tabs ul.tabs { flex-wrap: wrap; }
    .woocommerce-Tabs-panel { padding: 32px 20px; }
    .sticky-cart-bar__name { font-size: 16px; }
    .sticky-cart-bar__btn { padding: 11px 18px; font-size: 9.5px; }
    .aitrixa-document {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}


/* ==========================================================================
   13. Clickability fixes vs design mock
   --------------------------------------------------------------------------
   The mock renders the category eyebrow as plain text and never shows a
   "Clear" reset link inside the variations form. WC by default emits both
   as live links/anchors. We neutralise them visually here without removing
   the underlying anchors (keeps category SEO + a11y intact).
   ========================================================================== */

/* Category eyebrow — disable click + underline. Anchor stays in DOM for SEO. */
.summary .posted_in a {
    pointer-events: none;
    cursor: text;
    color: inherit;
    text-decoration: none;
}

/* WC's reset_variations "Clear" link — hidden per mock. Re-selecting a size
   already replaces the active one, so this control is redundant for the user. */
.woocommerce div.product form.cart .reset_variations {
    display: none !important;
}

/* Out-of-stock related-card CTA: when the product is out of stock WC strips
   .add_to_cart_button from the anchor, so our existing
   .related.products .add_to_cart_button rule does not match. Style the bare
   .button anchor inside the related-card footer the same way, but muted to
   read as "Sold Out". */
.related.products li.product.outofstock .related-product-footer .button,
.related.products li.product.outofstock .related-product-footer a.button {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 9px 10px;
    background: var(--white);
    color: var(--mute);
    border: 1px solid var(--line);
    cursor: not-allowed;
    text-align: center;
    display: block;
    text-decoration: none;
    border-radius: 0;
    pointer-events: none;
}


/* ==========================================================================
   14. WooCommerce layout-grid override + posted_in removal
   --------------------------------------------------------------------------
   WC ships a built-in layout file (woocommerce-layout-grid.min.css) that
   forces:
     .woocommerce div.product div.images  { width: 48%; float: left;  }
     .woocommerce div.product div.summary { width: 48%; float: right; }
   Our div.product is display:grid with two fixed columns; the float + 48%
   sizing collapses both panels to ~half their grid cells, which is why the
   gallery + summary end up tiny on desktop. Override to let the grid drive
   the sizing, drop the floats, and stretch panels to fill their cells.
   ========================================================================== */
.woocommerce div.product div.woocommerce-product-gallery,
.woocommerce div.product div.summary,
.woocommerce #content div.product div.woocommerce-product-gallery,
.woocommerce #content div.product div.summary {
    width: 100%;
    max-width: none;
    float: none;
}

/* The image inside the gallery — make it fill the gallery cell as a square,
   regardless of its natural pixel size (placeholder is only 150x150 right now). */
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery .woocommerce-product-gallery__image,
.woocommerce-product-gallery .woocommerce-product-gallery__image > a {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
}
.woocommerce div.product div.images.woocommerce-product-gallery img,
.woocommerce div.product div.woocommerce-product-gallery img,
.woocommerce-product-gallery img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* Hide WC default category eyebrow above the title (mock has no .posted_in). */
.summary .posted_in {
    display: none !important;
}


/* ==========================================================================
   15. Breadcrumb — mock-spec sizing + bottom rule
   --------------------------------------------------------------------------
   Mock places a hairline bottom-border across the full viewport width with
   18px vertical padding on the breadcrumb. The breadcrumb in our markup is
   rendered inside <main class="site-main"> which already supplies the
   --container-pad horizontal gutter, so we use a negative-margin trick to
   break out edge-to-edge for the line, then re-apply the gutter as padding.
   ========================================================================== */
.aitrixa-single-product > .woocommerce-breadcrumb,
main.site-main > .woocommerce-breadcrumb,
.woocommerce-breadcrumb {
    margin: 0 calc(-1 * var(--gutter)) 0;
    padding: 18px var(--gutter);
    border-bottom: 0.8px solid var(--line-soft);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mute);
    line-height: 1.55;
    background: transparent;
}
.woocommerce-breadcrumb a {
    color: var(--mute);
    text-decoration: none;
}
.woocommerce-breadcrumb a:hover {
    color: var(--ink);
}
.woocommerce-breadcrumb .sep {
    margin: 0 .9em;
    color: var(--line);
}
.woocommerce-breadcrumb [aria-current="page"],
.woocommerce-breadcrumb > span:last-child {
    color: var(--ink);
}


/* ==========================================================================
   16. Force upsell-strip on single product (override aitrixa.css :not chain).
   ========================================================================== */
body.single-product:not(.woocommerce-shop):not(.tax-product_cat):not(.tax-product_tag) .upsell-strip,
body.single-product .upsell-strip,
.upsell-strip {
    display: flex !important;
}


/* ==========================================================================
   17. Kill #primary 60px margin-top from Astra customizer.
   --------------------------------------------------------------------------
   Astra inline-emits .ast-plain-container.ast-no-sidebar #primary { margin-top: 60px }
   inside a (min-width: 1200px) media query. Mock has 0 gap between the
   upsell strip and the breadcrumb. Beat Astra’s specificity (0,3,1) by
   adding our class to the chain (0,4,1).
   ========================================================================== */
@media (min-width: 1200px) {
    .ast-plain-container.ast-no-sidebar #primary.aitrixa-single-product {
        margin-top: 0;
    }
}


/* ==========================================================================
   18. Static gallery (no zoom/lightbox).
   --------------------------------------------------------------------------
   Defensive belt-and-braces: the lightbox/zoom features are unhooked at
   PHP level (theme-support removed, scripts dequeued, template emits a
   bare img). These rules hide any residual markup that some plugin or a
   future WC update might re-inject — the magnifier trigger anchor and
   the PhotoSwipe overlay container. Mock has neither.
   ========================================================================== */
.woocommerce-product-gallery__trigger,
.pswp {
    display: none !important;
    pointer-events: none !important;
}


/* ==========================================================================
   19. Cursor / clickability fix
   --------------------------------------------------------------------------
   Root cause: assets/aitrixa.css defines a global .product class used by
   the catalog grid tiles, with cursor: pointer and a panel-2 hover tint.
   WooCommerce’s single-product wrapper (div#product-{slug}) also uses
   class="product", so the entire single-product page container inherits
   that pointer cursor + hover state — making non-interactive areas
   (gallery hatched bg, whitespace around the title, etc.) appear clickable.

   Fix strategy:
   1. .woocommerce div.product overrides the catalog rule on specificity
      alone (0,2,1 vs 0,1,0) without !important and without disturbing the
      grid layout already defined further down in this file.
   2. Universal cursor reset on descendants, then opt-in only for genuinely
      interactive elements. More robust than chasing individual leaks.
   3. Hover reset stops the catalog tile’s panel-2 tint flashing across
      the entire single product page when the cursor hovers anywhere.

   Long-term: rename the catalog tile class to .catalog-product or
   .product-card so it stops colliding with WooCommerce’s .product.
   ========================================================================== */
.woocommerce div.product {
    cursor: default;
    grid-column: auto;
    border-right: none;
    border-bottom: none;
    min-height: 0;
}
.woocommerce div.product:hover {
    background: var(--white);
}

/* Reset cursor on all descendants, then opt-in only real interactive elements. */
.woocommerce div.product * {
    cursor: auto;
}
.woocommerce div.product a,
.woocommerce div.product button,
.woocommerce div.product .size-option:not(.soldout):not([disabled]),
.woocommerce div.product .qty-btn,
.woocommerce div.product label[for],
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    cursor: pointer;
}
.woocommerce div.product .size-option.soldout,
.woocommerce div.product .size-option[disabled] {
    cursor: not-allowed;
}
.woocommerce div.product input,
.woocommerce div.product textarea {
    cursor: text;
}


/* ==========================================================================
   20. Tabs panel layout & content typography
   --------------------------------------------------------------------------
   Mock spec for the tab panel under the wc-tabs:
     - padding: 48px (var(--gutter)) on all sides
     - inner content max-width ~720px so long copy reads at a comfortable
       measure; rest of the panel is empty whitespace
     - body text in IBM Plex Sans 14.5px, line-height 1.55
   ========================================================================== */
.woocommerce-tabs .woocommerce-Tabs-panel,
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel,
.woocommerce-js div.product .woocommerce-tabs .panel,
.woocommerce-js div.product .woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 48px var(--gutter);
    margin: 0;
    font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink, #0b0b0d);
}

/* Constrain reading column inside the description panel only.
   CoA panel keeps full width so the document rows stretch edge-to-edge. */
.woocommerce-tabs .woocommerce-Tabs-panel--description > * {
    max-width: 720px;
}

/* Description body paragraphs: comfortable spacing between paragraphs. */
.woocommerce-tabs .woocommerce-Tabs-panel--description p {
    margin: 0 0 1em;
}
.woocommerce-tabs .woocommerce-Tabs-panel--description p:last-child {
    margin-bottom: 0;
}

/* Description H2 heading: sans bold, sized to ~20px in the mock. */
.woocommerce-tabs .woocommerce-Tabs-panel--description h1,
.woocommerce-tabs .woocommerce-Tabs-panel--description h2,
.woocommerce-tabs .woocommerce-Tabs-panel--description h3 {
    font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 16px;
    color: var(--ink, #0b0b0d);
}

/* ==========================================================================
   21. .tab-section-label eyebrow
   --------------------------------------------------------------------------
   Mock uses an eyebrow above the heading in each tab panel:
     PRODUCT OVERVIEW (description tab)
     AVAILABLE DOCUMENTATION (CoA tab)
   Editors can opt in by wrapping a div.tab-section-label around the label
   text in the description editor. The CoA panel gets the eyebrow injected
   automatically via ::before on the panel itself (see Section 22).
   ========================================================================== */
.tab-section-label,
.woocommerce-Tabs-panel .tab-section-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mute, #6b6d73);
    margin: 0 0 18px;
}

/* ==========================================================================
   22. CoA / Documents list layout (revised to match mock)
   --------------------------------------------------------------------------
   The plugin emits ul.aitrixa-documents > li.aitrixa-document with default
   styling that already matches the mock’s structural intent: a narrow
   column of self-contained bordered cards. Mock spec:
     - ul: max-width ~640px (plugin default), left-aligned
     - each li: bordered card (0.8px solid #e4e5e7), padding ~20px
     - inside: title (sans bold) + detail line (mono caps mute) stacked on
       the left, DOWNLOAD pill on the right, all vertically centered
     - first/Latest doc gets a filled-black DOWNLOAD pill
     - others get a white-bordered DOWNLOAD pill
     - LATEST chip is NOT shown in the mock
     - eyebrow "AVAILABLE DOCUMENTATION" injected via ::before on the panel
   ========================================================================== */
.woocommerce-Tabs-panel--aitrixa_documents::before {
    content: "Available documentation";
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mute, #6b6d73);
    margin: 0 0 18px;
}

/* List container: keep narrow column from plugin, but tighter borders. */
.woocommerce-Tabs-panel--aitrixa_documents ul.aitrixa-documents,
ul.aitrixa-documents {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 0;
}

/* Each document row: bordered card, two-column layout (text | download). */
.woocommerce div.product .aitrixa-documents .aitrixa-document,
.aitrixa-documents .aitrixa-document {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
    margin: 0 0 -0.8px 0; /* collapse adjacent borders by overlapping 0.8px */
    border: 0.8px solid var(--line-soft, #e4e5e7);
    border-radius: 0;
    background: var(--white, #fff);
}

/* Title + detail stack (left column). Both pinned to grid column 1.
   Download is pinned to column 2 spanning all rows of the row track. */
.aitrixa-document__head {
    display: block;
    margin: 0 0 4px;
    grid-column: 1;
}
.aitrixa-document__detail {
    grid-column: 1;
}
.aitrixa-document__title {
    font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1.3;
    color: var(--ink, #0b0b0d);
}

/* LATEST chip is not in the mock — hide it. */
.aitrixa-document__flag {
    display: none !important;
}

.aitrixa-document__detail {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mute, #6b6d73);
    margin: 0;
    line-height: 1.4;
}

/* Download pill: right column, vertically centered. */
.aitrixa-documents li.aitrixa-document a.aitrixa-document__download,
.aitrixa-document a.aitrixa-document__download {
    display: inline-block;
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: end;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 18px;
    background: var(--white, #fff);
    color: var(--ink, #0b0b0d);
    border: 0.8px solid var(--ink, #0b0b0d);
    border-radius: 0;
    transition: background-color .15s ease, color .15s ease;
}
.aitrixa-documents li.aitrixa-document.is-latest a.aitrixa-document__download,
.aitrixa-document.is-latest a.aitrixa-document__download {
    background: var(--ink, #0b0b0d);
    color: var(--white, #fff);
    border-color: var(--ink, #0b0b0d);
}
.aitrixa-document a.aitrixa-document__download:hover {
    background: var(--ink, #0b0b0d);
    color: var(--white, #fff);
}
.aitrixa-document.is-latest a.aitrixa-document__download:hover {
    background: var(--white, #fff);
    color: var(--ink, #0b0b0d);
}


/* ==========================================================================
   23. Tab list — mock styling + neutralise Astra active-tab bar
   --------------------------------------------------------------------------
   Astra injects a 3px black bar at the top of the active tab via ::before
   on the active li. Mock has no such indicator — active state is shown
   only via font-weight (500) and color (ink). We neutralise the ::before
   and restyle the tab list itself to match mock spec:
     - <a> padding: 16px 28px
     - <a> font: 12px IBM Plex Sans, letter-spacing .22em, uppercase
     - active: weight 500, color ink
     - inactive: weight 400, color mute
     - no underline, no border-bottom on active tab
     - no focus outline (it appears as a black flash on click)
   ========================================================================== */

/* Kill Astra’s active-tab indicator bar. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li.active::before {
    content: none !important;
    display: none !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
}

/* Tab anchor: mock-spec spacing + typography. */
.woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: 16px 28px;
    font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mute, #6b6d73);
    text-decoration: none;
    border: 0;
    background: transparent;
    transition: color .15s ease;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--ink, #0b0b0d);
    font-weight: 500;
    text-decoration: none;
}
.woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--ink, #0b0b0d);
    text-decoration: none;
}

/* Kill the focus-outline black flash when tabs are clicked. */
.woocommerce-tabs ul.tabs li a:focus,
.woocommerce-tabs ul.tabs li a:focus-visible,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible {
    outline: none;
    box-shadow: none;
    border: 0;
}

/* Wrapper layout: only line BELOW the tab list (on the ul). Drop the line
   above the tabs that the wrapper currently has. */
.woocommerce-tabs.wc-tabs-wrapper,
.woocommerce div.product .woocommerce-tabs {
    border-top: 0.8px solid var(--line-soft, #e4e5e7) !important;
    padding-top: 0 !important;
}
.woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-top: 0;
    border-bottom: 0.8px solid var(--line-soft, #e4e5e7);
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    overflow: visible !important;
}
.woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================================
   24. Active-tab merge effect (mock parity)
   --------------------------------------------------------------------------
   Mock: the tab list sits on a light-gray strip (#f6f6f7). Inactive tabs
   show the gray; the active tab’s anchor is filled white so it
   visually merges with the white panel below — the tab “opens” into
   the content area. A vertical hairline on the right edge of the active li
   separates the white tab from the gray strip when there are more tabs.
   ========================================================================== */
.woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs {
    background: #f6f6f7;
}

.woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    background: transparent;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    background: var(--white, #fff) !important;
}

/* Vertical separator between every tab — mock places a hairline on the
   right edge of every li. No left borders on any tab. */
.woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border-right: 0.8px solid var(--line-soft, #e4e5e7) !important;
    border-left: 0 !important;
}

/* No separate active-tab border-bottom hack. Mock keeps the ul’s
   bottom border continuous; the white tab over the white panel below
   creates the merge effect on its own. */


/* ==========================================================================
   25. Related products card — inset image to match mock
   --------------------------------------------------------------------------
   Mock related cards have a white background with the image inset by ~28px
   on all sides (white margin around the image). Live currently has the
   image flush against the card edges. Add card padding so image is inset.
   Card body content (category, title, price) should not be double-padded —
   it already had its own internal alignment.
   ========================================================================== */
.related.products li.product,
.woocommerce div.product .related.products li.product {
    padding: 28px !important;
    background: var(--white, #fff) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Image wrapper sits at 0 padding inside the card; image fills the
   wrapper square. Mock has the image flush against the body below —
   no margin between image and body (body has its own top padding). */
.related.products li.product .related-product-img {
    margin: 0 !important;
    padding: 0 !important;
}
.related.products li.product .related-product-img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Body + footer have their own internal padding to match the mock’s
   inset of category/title/price and CTA inside the card’s 28px padding. */
.related.products li.product .related-product-body {
    padding: 12px 14px 14px !important;
    margin: 0 !important;
}
.related.products li.product .related-product-footer {
    padding: 8px 14px 12px !important;
    margin-top: 0 !important;
    border-top: 0.8px solid var(--line-soft, #e4e5e7);
}


/* ==========================================================================
   26. Active-tab merge cut via ::after (per Claude-design recipe)
   --------------------------------------------------------------------------
   Mock: the active tab visually merges into the panel below by "cutting"
   the bottom border of the ul exactly where the active tab sits. We do
   this with a ::after white strip on the active li, positioned over the
   ul’s 0.8px bottom border. The active li needs position: relative
   so the ::after can be absolutely positioned against it.
   ========================================================================== */
.woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    position: relative;
}

/* Override WC’s default 5px decorative ::after squares with our merge cut.
   WC selector specificity is (0,5,0); ours needs to match or beat that. */
.woocommerce-js div.product .woocommerce-tabs ul.tabs li.active::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after,
.woocommerce-tabs ul.tabs li.active::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: -0.8px !important;
    width: auto !important;
    height: 0.8px !important;
    background: var(--white, #fff) !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none;
    z-index: 2;
}

/* Kill WC’s decorative ::before/::after on inactive tabs entirely. */
.woocommerce-js div.product .woocommerce-tabs ul.tabs li:not(.active)::after,
.woocommerce-js div.product .woocommerce-tabs ul.tabs li:not(.active)::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active)::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active)::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}


/* ==========================================================================
   27. Panel border-top replaces ul border-bottom (clean merge)
   --------------------------------------------------------------------------
   Instead of fighting WC’s tab pseudo-elements to "cut" the line under
   the active tab, we drop the line from the ul entirely (Section 24/26
   amended above) and put a single hairline on top of the active panel.
   Inactive tabs sit on the gray strip with no line beneath; active tab
   merges into the white panel cleanly. The tab strip’s left/right
   edges and the panel’s top edge form the visual frame.
   ========================================================================== */
/* Panel: NO border-top — the line lives on the ul’s border-bottom
   and the active tab covers it via -0.8px margin-bottom + z-index. */
.woocommerce-Tabs-panel.active,
.woocommerce-Tabs-panel.wc-tab,
.woocommerce div.product .woocommerce-Tabs-panel {
    border-top: 0;
}

/* Inactive tabs: bottom hairline so the gray strip area stays delineated
   along the inactive tab(s) only. The active tab has no line under it. */
/* Active tab covers the ul’s border-bottom by adding a 0.8px white
   box-shadow on its inset bottom edge — simpler than margin tricks and
   guaranteed to render. The shadow extends 0.8px below the <a> in white,
   masking the gray line underneath. */
.woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    position: relative;
    z-index: 2 !important;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    box-shadow: 0 0.8px 0 0 var(--white, #fff), 0 1.6px 0 0 var(--white, #fff) !important;
}

/* Disable the merge-cut ::after — no longer needed since the ul has no
   border-bottom to hide. */
.woocommerce-js div.product .woocommerce-tabs ul.tabs li.active::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after,
.woocommerce-tabs ul.tabs li.active::after {
    content: none !important;
    display: none !important;
}




/* ==========================================================================
   28. Mock-replicating active-tab merge (final, copies design-mock recipe)
   --------------------------------------------------------------------------
   Mock’s exact mechanism: ul has the bottom hairline; active <a> emits a
   ::after at bottom: -1px / height: 1px / background: white that paints
   over the section of the ul border directly under the active anchor.
   No margin tricks, no inactive-li borders, no panel border-top.
   ========================================================================== */

/* Active anchor needs position: relative so the ::after can be absolutely
   positioned against it. */
.woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    position: relative;
    box-shadow: none !important;
}

/* The merge cut: white strip at the active anchor’s bottom edge,
   covering the ul’s border-bottom directly underneath. */
.woocommerce-tabs ul.tabs li.active a::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: -1px !important;
    width: auto !important;
    height: 1px !important;
    background: var(--white, #fff) !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none;
    z-index: 3;
}

/* Reset: kill any old patches from prior rounds. */
.woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
}
.woocommerce-tabs ul.tabs li:not(.active),
.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active) {
    border-bottom: 0 !important;
}
.woocommerce-Tabs-panel.active,
.woocommerce-Tabs-panel.wc-tab,
.woocommerce div.product .woocommerce-Tabs-panel {
    border-top: 0 !important;
}


/* ==========================================================================
   29. Description tab eyebrow + CoA mock-perfect rows
   --------------------------------------------------------------------------
   Description tab gets a PRODUCT OVERVIEW eyebrow injected via ::before on
   the panel — mirrors the AVAILABLE DOCUMENTATION eyebrow on the CoA tab.
   Mock spec for both eyebrows:
     - IBM Plex Mono 12px / weight 400 / letter-spacing .24em / uppercase
     - color: --mute
     - padding-bottom: 12px / margin-bottom: 20px
     - border-bottom: 0.8px solid --line-soft (the divider line below it)
   ========================================================================== */

/* Description panel eyebrow. */
.woocommerce-Tabs-panel--description::before {
    content: "Product overview";
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--mute, #6b6d73);
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 0.8px solid var(--line-soft, #e4e5e7);
}

/* CoA panel eyebrow — align with description spec exactly (was previously
   set in Section 22 with slightly different sizes; bring it in line). */
.woocommerce-Tabs-panel--aitrixa_documents::before {
    content: "Available documentation" !important;
    display: block !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: .24em !important;
    text-transform: uppercase !important;
    color: var(--mute, #6b6d73) !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
    border-bottom: 0.8px solid var(--line-soft, #e4e5e7) !important;
}

/* ==========================================================================
   30. CoA / Documents list — mock-perfect rows
   --------------------------------------------------------------------------
   Mock layout: <div> container display:grid gap:1px bg:#e4e5e7 max-width:640px,
   each row display:grid grid-template-columns:1fr auto bg:white padding:18px 20px.
   The 1px gap + gray container background creates the hairline lines BETWEEN
   rows — no per-row borders.
   Inside row: text block (title sans 15.5/600 + detail mono 11.5/.16em uppercase
   mute) + Download button (mono 11.5 caps black).
   We restyle the plugin’s ul.aitrixa-documents to match this exactly.
   ========================================================================== */

/* Container: ul styled as a grid with 1px gap on a gray bg — the gap shows
   through as the hairline lines between rows. */
.woocommerce-Tabs-panel--aitrixa_documents ul.aitrixa-documents,
.woocommerce div.product .woocommerce-Tabs-panel--aitrixa_documents ul.aitrixa-documents {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 640px !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1px !important;
    background: var(--line-soft, #e4e5e7) !important;
    border: 0.8px solid var(--line-soft, #e4e5e7) !important;
}

/* Each row: 2-col grid (text | download), white background sits inside the
   gray container. No borders — the container’s gap creates the lines. */
.woocommerce-Tabs-panel--aitrixa_documents .aitrixa-document,
.woocommerce div.product .woocommerce-Tabs-panel--aitrixa_documents .aitrixa-document {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
    gap: 0 24px !important;
    padding: 18px 20px !important;
    margin: 0 !important;
    background: var(--white, #fff) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Title: sans 15.5 / 600 / ink. */
.aitrixa-document__head,
.woocommerce div.product .aitrixa-document__head {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
}
.aitrixa-document__title,
.woocommerce div.product .aitrixa-document__title {
    display: block !important;
    font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif) !important;
    font-weight: 600 !important;
    font-size: 15.5px !important;
    line-height: 1.3 !important;
    color: var(--ink, #0b0b0d) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide the LATEST chip (mock doesn’t show one). */
.aitrixa-document__flag {
    display: none !important;
}

/* Detail: mono 11.5 / .16em / uppercase / mute. */
.aitrixa-document__detail,
.woocommerce div.product .aitrixa-document__detail {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: block !important;
    font-family: var(--font-mono) !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--mute, #6b6d73) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* Download button: filled-black for first/Latest, white-bordered for others.
   Mock uses a button with mono caps; our anchor is restyled to match. */
.aitrixa-document a.aitrixa-document__download,
.aitrixa-documents li.aitrixa-document a.aitrixa-document__download {
    display: inline-block !important;
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: end !important;
    font-family: var(--font-mono) !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 9px 16px !important;
    background: var(--white, #fff) !important;
    color: var(--ink, #0b0b0d) !important;
    border: 0.8px solid var(--ink, #0b0b0d) !important;
    border-radius: 0 !important;
    cursor: pointer;
}
.aitrixa-document.is-latest a.aitrixa-document__download,
.aitrixa-documents li.aitrixa-document.is-latest a.aitrixa-document__download {
    background: var(--ink, #0b0b0d) !important;
    color: var(--white, #fff) !important;
    border-color: var(--ink, #0b0b0d) !important;
}
.aitrixa-document a.aitrixa-document__download:hover {
    background: var(--ink, #0b0b0d) !important;
    color: var(--white, #fff) !important;
}
.aitrixa-document.is-latest a.aitrixa-document__download:hover {
    background: var(--white, #fff) !important;
    color: var(--ink, #0b0b0d) !important;
}


/* ==========================================================================
   31. Related products typography — mock match
   --------------------------------------------------------------------------
   Title size, price weight, category spacing tightened to match mock.
   ========================================================================== */
.related.products li.product .related-product-category {
    font-family: var(--font-mono) !important;
    font-size: 9.5px !important;
    font-weight: 400 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: var(--mute, #6b6d73) !important;
    margin: 0 0 6px !important;
    display: block;
}

.related.products li.product .woocommerce-loop-product__title {
    font-family: "EB Garamond", Georgia, "Times New Roman", serif !important;
    font-size: 21px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--ink, #0b0b0d) !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}

.related.products li.product .price {
    font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ink, #0b0b0d) !important;
    margin: 0 !important;
    display: block;
}


/* ==========================================================================
   32. Related products section header + CTA polish (mock match)
   --------------------------------------------------------------------------
   Mock specs:
     - section h2 "RELATED PRODUCTS": IBM Plex Mono 12px / 700 / .28em /
       uppercase / mute (#6b6d73)
     - card CTA "+ Add to Cart": IBM Plex Mono 10px / 400 / .2em / line-height
       1.55 → height 35px (live was 30px because weight 600 + missing
       line-height made it shrink)
   ========================================================================== */

/* Related products section header. */
.related.products > h2,
.woocommerce div.product .related.products > h2,
section.related.products > h2:first-child,
.related-products-section h2 {
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .28em !important;
    text-transform: uppercase !important;
    color: var(--mute, #6b6d73) !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}

/* Card CTA: weight 400 (not 600), line-height 1.55, mock-matching pill. */
.related.products li.product .button,
.related.products li.product .add_to_cart_button,
.related.products li.product a.button,
.woocommerce div.product .related.products li.product .button {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    text-decoration: none !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: .2em !important;
    line-height: 1.55 !important;
    text-transform: uppercase !important;
    padding: 9px 10px !important;
    background: var(--ink, #0b0b0d) !important;
    color: var(--white, #fff) !important;
    border: 0.8px solid var(--ink, #0b0b0d) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
}

/* Out-of-stock cards: keep the white-bordered "Sold Out" treatment. Higher
   specificity (li.product.outofstock + a.button) so it wins over the
   in-stock filled-black rule. */
.related.products li.product.outofstock a.button,
.related.products li.product.outofstock a.add_to_cart_button,
.woocommerce div.product .related.products li.product.outofstock a.button {
    background: var(--white, #fff) !important;
    color: var(--mute, #6b6d73) !important;
    border: 0.8px solid #c9cacd !important;
    cursor: not-allowed;
}


/* ==========================================================================
   33. Hide WC’s duplicate variation-price block
   --------------------------------------------------------------------------
   When a variation is selected, WooCommerce injects a .single_variation
   div into form.cart containing the selected variation’s price /
   description / availability. The theme renders the price separately
   in the STARTING FROM custom block, so this WC injection appears as
   a duplicate “white rectangle” between the size pills and the qty/cart
   row. The .woocommerce-variation-add-to-cart row immediately below
   (the actual qty + Add to Cart) is unaffected and stays visible.
   ========================================================================== */
.woocommerce div.product form.cart .single_variation,
form.cart .single_variation,
.single_variation_wrap > .single_variation {
    display: none !important;
}


/* ==========================================================================
   34. Cart row qty fills full row height
   --------------------------------------------------------------------------
   The .quantity div is naturally 40px tall but the cart row is 54.5px;
   without an explicit stretch, a 14px white-bordered band shows below
   the qty controls. Make .quantity stretch to fill its grid cell.
   ========================================================================== */
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity,
.woocommerce div.product form.cart .quantity,
form.cart .quantity,
.woocommerce div.product form.cart .quantity,
.woocommerce-js div.product form.cart div.quantity {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Make qty buttons hold their 36px width even inside the flex container. */
.woocommerce div.product form.cart .quantity .qty-btn,
form.cart .quantity .qty-btn {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   35. Qty input fills full cart-row height
   --------------------------------------------------------------------------
   Astra and WC default to height: 40px on number inputs (inline style +
   stylesheet). In the 53px-tall bordered cart frame this leaves an empty
   white band above and below the input. Force the input (and parent qty-
   controls) to fill 100% so the input stretches edge-to-edge.
   ========================================================================== */
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce div.product form.cart .quantity input.input-text,
form.cart .quantity input.qty,
form.cart .quantity input[type="number"] {
    height: 100% !important;
    align-self: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ink, #0b0b0d) !important;
    width: 47px !important;
}

/* qty-controls wrappers around the +/- buttons stretch full height too. */
.woocommerce div.product form.cart .quantity .qty-controls,
form.cart .quantity .qty-controls {
    height: 100% !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   36. Strip WC 2em margin-bottom on summary + gallery
   --------------------------------------------------------------------------
   woocommerce-grid.min.css sets:
     .woocommerce-js div.product div.summary { margin-bottom: 2em }
     .woocommerce-js div.product div.images  { margin-bottom: 2em }
   These add 29px of empty space below each column (gallery left, summary
   right) before the tabs. The mock has zero margin here — the tabs sit
   flush below the cart row. Override with matching specificity.
   ========================================================================== */
.woocommerce div.product div.summary,
.woocommerce-js div.product div.summary,
.woocommerce div.product .summary.entry-summary,
.woocommerce div.product div.images,
.woocommerce-js div.product div.images,
.woocommerce div.product .woocommerce-product-gallery {
    margin-bottom: 0 !important;
}

/* === END INLINED SINGLE-PRODUCT.CSS === */


/* === MOCK FINAL FIXES (text-indent + related products width) === */
/* Fix 1: WC sets text-indent: -22px on shipping method label, pulling text
   22px LEFT into the radio's space. Override. */
body.woocommerce-cart ul.woocommerce-shipping-methods li label {
  text-indent: 0 !important;
}

/* Fix 2: Related products section needs to span the FULL cart width
   (both cart-form column AND order-summary column). */
body.woocommerce-cart .woocommerce > .ct-frame:has(section.related.products) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  margin-top: 56px;
  padding: 0;
}


/* === MOCK BODY-LEVEL SHIPPING OPEN STATE === */
body.woocommerce-cart.ait-ship-open .shipping-calculator-form {
  max-height: 460px !important;
  opacity: 1 !important;
  margin-top: 10px !important;
  border-width: 1px !important;
  padding: 12px 12px 10px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 8px;
  row-gap: 0;
  position: relative !important;
  width: 100% !important;
  left: auto !important;
  right: auto !important;
}
body.woocommerce-cart.ait-ship-open .shipping-calculator-button .caret {
  transform: rotate(180deg) !important;
}
body.woocommerce-cart .shipping-calculator-button[aria-expanded="true"] .caret {
  transform: rotate(180deg) !important;
}


/* === MOCK DROPDOWN TIGHTER (smaller, no jump) === */
body.woocommerce-cart .shipping-calculator-form .form-row {
  margin: 0 0 8px !important;
  gap: 3px !important;
}
body.woocommerce-cart .shipping-calculator-form .form-row label {
  font-size: 8.5px !important;
  letter-spacing: 1.4px !important;
}
body.woocommerce-cart .shipping-calculator-form input.input-text,
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection--single {
  height: 32px !important;
  line-height: 32px !important;
  font-size: 10.5px !important;
}
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection--single .select2-selection__rendered {
  height: 32px !important;
  line-height: 32px !important;
  padding: 0 24px 0 10px !important;
}
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__arrow {
  width: 24px !important;
}
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__arrow::after {
  font-size: 10px !important;
  margin-right: 10px !important;
}
body.woocommerce-cart .shipping-calculator-form button[name="calc_shipping"] {
  height: 34px !important;
  font-size: 9.5px !important;
  margin: 10px 0 0 !important;
}
body.woocommerce-cart .shipping-calculator-form.ait-open > p:has(button[name="calc_shipping"]) {
  margin: 10px 0 0 !important;
}

body.woocommerce-cart .shipping-calculator-form {
  transition: max-height .26s ease, opacity .18s ease, margin-top .18s ease, padding .18s ease, border-width .01s linear !important;
}
body.woocommerce-cart.ait-ship-open .shipping-calculator-form {
  transition: max-height .28s ease, opacity .2s ease .04s, margin-top .18s ease, padding .18s ease, border-width .01s linear !important;
}


/* === MOCK CARET VERTICAL CENTER (match field height 32px) === */
/* The arrow box was locked to 36px height, but my tightened dropdown reduces fields to 32px.
   Force arrow to match the 32px field height so the chevron sits centered, not 5px below. */
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__arrow {
  height: 32px !important;
  top: 0 !important;
  bottom: auto !important;
}
/* And keep the ▾ vertically centered in that 32px box via line-height */
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__arrow::after {
  display: block !important;
  line-height: 32px !important;
  margin-right: 10px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: 32px !important;
}


/* === MOCK CARET CENTER FORCE (absolute final override) === */
/* Make the arrow span exactly the field's 32px height, no more no less. */
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__arrow,
body.woocommerce-cart .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 32px !important;
  max-height: 32px !important;
  min-height: 32px !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  display: flex !important;
}
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__arrow::after,
body.woocommerce-cart .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__arrow::after {
  line-height: 1 !important;
  height: auto !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  display: block !important;
}


/* === MOCK CAROUSEL BUTTON SQUARE (28x28, no padding) === */
body.woocommerce-cart .related.products .related-carousel-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}


/* === MOCK SHIPPING LAYOUT PIXEL-PERFECT (radio left, price right) === */
body.woocommerce-cart tr.woocommerce-shipping-totals td {
  text-align: left !important;
  padding: 0 !important;
}
body.woocommerce-cart ul.woocommerce-shipping-methods {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.woocommerce-cart ul.woocommerce-shipping-methods li {
  padding: 0 !important;
  margin: 0 !important;
  text-indent: 0 !important;
  display: grid !important;
  grid-template-columns: 16px 1fr auto !important;
  gap: 10px !important;
  align-items: baseline !important;
  width: 100% !important;
}
body.woocommerce-cart ul.woocommerce-shipping-methods li input[type="radio"] {
  grid-column: 1 !important;
  margin: 0 !important;
  justify-self: start !important;
  align-self: center !important;
}
body.woocommerce-cart ul.woocommerce-shipping-methods li label {
  grid-column: 2 / 3 !important;
  display: block !important;
  text-align: left !important;
  text-indent: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
body.woocommerce-cart ul.woocommerce-shipping-methods li .woocommerce-Price-amount {
  grid-column: 3 !important;
  justify-self: end !important;
  margin: 0 !important;
  float: none !important;
}
body.woocommerce-cart .woocommerce-shipping-destination {
  text-align: left !important;
  padding: 10px 0 0 !important;
}


/* === MOCK SHIPPING PRICE FLUSH RIGHT (label as flex container) === */
/* The price span is INSIDE the label (WC's HTML). Make label a flex row with
   justify-content: space-between so 'Flat rate:' goes left and '$6.00' goes right. */
body.woocommerce-cart ul.woocommerce-shipping-methods li {
  grid-template-columns: 16px 1fr !important;
}
body.woocommerce-cart ul.woocommerce-shipping-methods li label {
  grid-column: 2 / -1 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 10px !important;
}
body.woocommerce-cart ul.woocommerce-shipping-methods li label .woocommerce-Price-amount {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}


/* === v72 ORDER SUMMARY MOCK-MATCH === */

/* SHIPPING row: shrink TH so radio block expands to mock proportions (~84px label) */
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals { align-items: flex-start; }
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th {
  flex: 0 0 auto; width: 84px; min-width: 84px; padding-top: 8px;
}
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td {
  flex: 1 1 auto; width: auto; text-align: left; padding-left: 0;
}

/* Radio list: each li is a 2-col grid; label is internal flex justify-between so price floats right */
body.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods {
  margin: 0; padding: 0; width: 100%; list-style: none;
}
body.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods li {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  padding: 6px 0; align-items: center; width: 100%;
}
body.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods li input[type="radio"] {
  margin: 0; grid-column: 1; align-self: center;
}
body.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods li label {
  grid-column: 2; display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding-left: 0 !important; text-indent: 0 !important; margin: 0;
  font-family: var(--font-sans); font-size: 14px; font-weight: 400; color: var(--ink);
}
body.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods li label .amount {
  font-weight: 400 !important; color: var(--ink) !important;
}

/* Dashed divider between radio list and the destination/CHANGE ADDRESS line */
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
  margin-top: 14px !important; padding-top: 14px !important;
  border-top: 1px dashed var(--line) !important;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink);
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination strong {
  text-transform: uppercase; font-weight: 600; letter-spacing: .01em;
}

/* CHANGE ADDRESS link spacing */
body.woocommerce-cart .cart_totals .shipping-calculator-button {
  display: inline-block; margin-top: 6px;
}


/* === v73 MATCH ORDER-TOTAL DIVIDER COLOR === */
/* Make the divider above TOTAL match the divider below "Order summary" title */
body.woocommerce-cart .cart_totals tr.order-total {
  border-top-color: var(--line) !important;
}

/* ============================================================
   Hide the BNPL "Pay in 4 installments with Klarna/Affirm/Afterpay"
   messaging widget on the cart page
   ------------------------------------------------------------
   WC Payments injects a <div id="payment-method-message"> as a
   StripeElement inside .wc-proceed-to-checkout (the cart totals
   sidebar). It renders an iframe with installment options for
   Klarna, Affirm, and Afterpay. We keep those methods as
   selectable payment options at checkout but do not want the
   "pay later" advertising on the cart page itself.

   The plugin has no toggle for this in the standard settings
   endpoint, so we hide it via CSS. The Stripe element is unique
   on the cart page so a single ID selector with body scoping is
   sufficient. The wrapper has no other content -- safe to nuke.
   ============================================================ */
body.woocommerce-cart #payment-method-message {
  display: none !important;
}

/* ============================================================
   Empty cart layout: center the message block on desktop
   ------------------------------------------------------------
   When the cart is empty, WC renders:
     <div class="woocommerce">
       <div class="wc-empty-cart-message">
         <div class="cart-empty woocommerce-info">Your cart is currently empty.</div>
       </div>
       <p class="return-to-shop"><a class="button wc-backward">Return to shop</a></p>
     </div>
   The .wc-empty-cart-message wrapper renders at ~868px wide pinned to the
   left edge of the .woocommerce container (gutter), making the giant
   `YOUR CART IS CURRENTLY EMPTY` headline appear left-aligned on desktop.
   Force the wrapper to fill its container and center text + box.
   Mobile is unaffected (@media min-width:721px gating).
   ============================================================ */
@media (min-width: 721px) {
  /* The .woocommerce parent is display:grid (set up as the 2-col cart grid for
     when cart has items). On empty cart, .wc-empty-cart-message lands in the
     first grid cell (~868px) instead of spanning full width. Force it to
     span all columns so width:100% covers the full container. Same for
     .return-to-shop which lands in column 2 below. */
  body.woocommerce-cart .woocommerce > .wc-empty-cart-message,
  body.woocommerce-cart .woocommerce .wc-empty-cart-message {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  body.woocommerce-cart .woocommerce > .return-to-shop {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    text-align: center !important;
  }
  body.woocommerce-cart .woocommerce > .wc-empty-cart-message > .cart-empty,
  body.woocommerce-cart .woocommerce .wc-empty-cart-message .cart-empty {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}