/* Satmarin cart + checkout — Phase 7.6 rebuild. Consumes sm-tokens.css. STYLE/STRUCTURE only via the
   child cart.php override; WooCommerce form/nonce/qty/hooks intact. Design system: no shadows, no green. */

/* ======================= CART ======================= */
/* scoped under .entry-content so margin/padding beat WP's .is-layout-constrained > * layout rule */
.entry-content .sm-cartpage{max-width:var(--sm-maxw);margin:0 auto;padding:0 var(--sm-pad);font-family:var(--sm-font-body);}
.sm-cartpage, .sm-cartpage *{box-sizing:border-box;} /* padding never adds to width -> no bleed */
.sm-cartpage .woocommerce-cart-form{margin:0;}
/* fixed layout + explicit column widths: content wraps, table can never exceed the container */
.sm-cartpage table.cart{width:100%;table-layout:fixed;border:0;border-collapse:collapse;background:transparent;box-shadow:none;margin:0 0 28px;}
/* fixed column widths (sum of fixed = 36+84+120+184 = 424px; product-name takes the remainder).
   Subtotal is the WIDEST so "€ 76.057 (incl. VAT)" fits on ONE line, fully inside the right edge. */
.sm-cartpage thead th.product-remove{width:56px;}
.sm-cartpage thead th.product-thumbnail{width:84px;}
.sm-cartpage thead th.product-quantity{width:120px;}
.sm-cartpage thead th.product-subtotal{width:200px;}
.sm-cartpage table.cart thead th{font:600 12px/1 var(--sm-font-body);letter-spacing:.08em;text-transform:uppercase;
  color:var(--sm-muted);text-align:left;padding:14px 14px;border-bottom:1px solid var(--sm-hairline);background:transparent;}
.sm-cartpage thead th.product-quantity,.sm-cartpage td.product-quantity{text-align:center;}
.sm-cartpage thead th.product-subtotal,.sm-cartpage td.product-subtotal{text-align:right;white-space:nowrap;padding-right:14px;}
.sm-cartpage thead th.product-remove,.sm-cartpage td.product-remove{text-align:center;padding-left:0;padding-right:8px;} /* now the last column, at the row's right edge */
.sm-cartpage tr.cart_item td{border-top:1px solid var(--sm-hairline);padding:16px 14px;vertical-align:middle;background:transparent;overflow-wrap:anywhere;}
.sm-cartpage tr.cart_item td > *{margin-top:0;margin-bottom:0;}
.sm-cartpage tr.cart_item:first-child td{border-top:0;}
/* columns */
.sm-cartpage td.product-remove{text-align:center;}
.sm-cartpage td.product-remove a.remove{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:999px;color:var(--sm-muted)!important;background:transparent!important;line-height:1;text-decoration:none;transition:color var(--sm-transition),background-color var(--sm-transition);}
.sm-cartpage td.product-remove a.remove .sm-trash{width:17px;height:17px;display:block;}
.sm-cartpage td.product-remove a.remove:hover{color:#fff!important;background:var(--sm-orange)!important;}
.sm-cartpage td.product-thumbnail{width:84px;text-align:center;}
.sm-cartpage td.product-thumbnail img{width:64px;height:64px;object-fit:contain;border:0;border-radius:12px;background:var(--sm-white);display:block;margin:0 auto;}
.sm-cartpage td.product-name{text-align:left;}
.sm-cartpage td.product-name a{color:var(--sm-navy);text-decoration:none;font-weight:500;}
.sm-cartpage td.product-name a:hover{color:var(--sm-orange);}
.sm-cartpage td.product-quantity{text-align:center;}
.sm-cartpage td.product-subtotal{text-align:right;color:var(--sm-navy);font-weight:600;}
/* kill any stray green amount bg anywhere in the cart */
.sm-cartpage .woocommerce-Price-amount,.sm-cartpage .amount{background:transparent!important;background-image:none!important;color:inherit;padding:0!important;border-radius:0;}
/* quantity stepper (Blocksy .quantity[data-type] with ct-increase/ct-decrease) — give it room so +/- aren't clipped */
.sm-cartpage .product-quantity{text-align:center;}
.sm-cartpage .quantity{position:relative;display:inline-block;width:108px;max-width:100%;vertical-align:middle;}
.sm-cartpage .quantity .qty{width:100%;height:44px;text-align:center;padding:0 26px;border:1px solid var(--sm-border);
  border-radius:var(--sm-radius-pill);background:var(--sm-white);color:var(--sm-navy);font:500 14px/1 var(--sm-font-body);-moz-appearance:textfield;}
.sm-cartpage .quantity .qty:focus{border-color:var(--sm-aqua);outline:none;}
.sm-cartpage .quantity .qty::-webkit-outer-spin-button,.sm-cartpage .quantity .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
/* Blocksy +/- controls: pin inside the pill, evenly padded */
.sm-cartpage .quantity .ct-increase,.sm-cartpage .quantity .ct-decrease{position:absolute;top:0;width:30px;height:44px;display:flex;
  align-items:center;justify-content:center;cursor:pointer;color:var(--sm-muted);z-index:2;}
.sm-cartpage .quantity .ct-decrease{left:0;}.sm-cartpage .quantity .ct-increase{right:0;}
.sm-cartpage .quantity .ct-increase:hover,.sm-cartpage .quantity .ct-decrease:hover{color:var(--sm-navy);}
/* actions row: coupon left, update cart right */
.sm-cartpage td.actions{padding:24px 26px 26px;border-top:1px solid var(--sm-hairline);overflow:hidden;} /* space below + right inset so the button isn't flush to the table edge */
.sm-cartpage td.actions button[name="update_cart"]{margin:0;}
.sm-cartpage td.actions .coupon{display:inline-flex;gap:10px;float:left;}
.sm-cartpage td.actions .coupon .input-text{height:46px;width:200px;padding:0 18px;border:1px solid var(--sm-border);border-radius:var(--sm-radius-pill);
  background:var(--sm-white);color:var(--sm-navy);font:400 14px/1 var(--sm-font-body);}
.sm-cartpage td.actions .coupon .input-text:focus{border-color:var(--sm-aqua);outline:none;}
.sm-cartpage td.actions button[name="update_cart"]{float:right;}
/* buttons: pill navy->orange, no shadow, NO disabled/shaded look (per token spec) */
.sm-cartpage .button,.sm-cartpage button{border-radius:var(--sm-radius-pill)!important;box-shadow:none!important;
  background:var(--sm-navy)!important;color:var(--sm-offwhite)!important;border:0!important;padding:13px 24px!important;
  font:500 14px/1 var(--sm-font-body)!important;text-transform:none!important;opacity:1!important;cursor:pointer;}
.sm-cartpage .button:hover,.sm-cartpage button:hover{background:var(--sm-orange)!important;color:#fff!important;}
.sm-cartpage .button[disabled],.sm-cartpage button[disabled]{opacity:1!important;background:var(--sm-navy)!important;}

/* totals card (single hairline card, right-aligned, no double border / no wrap) */
.sm-cartpage .cart-collaterals{display:flow-root;}
.sm-cartpage .cart_totals{max-width:420px;margin-left:auto;background:var(--sm-white);border:1px solid var(--sm-hairline);
  border-radius:var(--sm-radius-card);padding:24px;box-shadow:none;}
.sm-cartpage .cart_totals h2{margin:0 0 12px;font-family:var(--sm-font-display);font-size:20px;color:var(--sm-navy);}
.sm-cartpage .cart_totals table{border:0!important;width:100%;background:transparent!important;margin:0;}
.sm-cartpage .cart_totals table th,.sm-cartpage .cart_totals table td{border:0!important;border-top:1px solid var(--sm-hairline)!important;
  padding:12px 0!important;font-size:14px;background:transparent!important;}
.sm-cartpage .cart_totals table tr:first-child th,.sm-cartpage .cart_totals table tr:first-child td{border-top:0!important;}
.sm-cartpage .cart_totals th{text-align:left;color:var(--sm-muted);font-weight:500;white-space:nowrap;}
.sm-cartpage .cart_totals td{text-align:right;color:var(--sm-navy);}
.sm-cartpage .cart_totals .order-total th,.sm-cartpage .cart_totals .order-total td{font-weight:700;font-size:15px;}
.sm-cartpage .wc-proceed-to-checkout{padding:16px 0 0;}
.sm-cartpage .wc-proceed-to-checkout .checkout-button{display:block;width:100%;text-align:center;}

/* mobile: stack each line item to a card, full-width within padding */
@media (max-width:768px){
  .sm-cartpage table.cart thead{display:none;}
  .sm-cartpage table.cart,.sm-cartpage table.cart tbody{display:block;}
  /* subtotal gets its OWN full-width row (row 3) so a long "Subtotal: € 101.457 (incl. VAT)" can never
     be squeezed by the quantity stepper and clipped at the card edge — the earlier "thumb qty sub" bug. */
  .sm-cartpage tr.cart_item{display:grid;grid-template-columns:64px 1fr auto;grid-template-areas:"thumb name remove" "thumb qty qty" "sub sub sub";
    gap:6px 14px;align-items:center;border:1px solid var(--sm-hairline);border-radius:var(--sm-radius-card);padding:14px;margin:0 0 12px;}
  .sm-cartpage tr.cart_item td{display:block;border:0!important;padding:0!important;}
  .sm-cartpage td.product-thumbnail{grid-area:thumb;width:auto;}
  .sm-cartpage td.product-name{grid-area:name;}
  .sm-cartpage td.product-quantity{grid-area:qty;text-align:left;}
  /* full-width, right-aligned, WRAPS (overrides the global nowrap) with a hairline divider above.
     Higher specificity than the generic td reset so display/border/padding here win. */
  .sm-cartpage tr.cart_item td.product-subtotal{grid-area:sub;text-align:right;white-space:normal;
    border-top:1px solid var(--sm-hairline)!important;padding-top:10px!important;}
  .sm-cartpage td.product-remove{grid-area:remove;text-align:right;width:auto;}
  .sm-cartpage td.product-subtotal::before{content:attr(data-title) ": ";color:var(--sm-muted);font-weight:400;}
  .sm-cartpage tr:has(td.actions){display:block;border:0;padding:0;margin:0;}
  .sm-cartpage td.actions{display:block;}
  .sm-cartpage td.actions .coupon,.sm-cartpage td.actions button[name="update_cart"]{float:none;width:100%;}
  .sm-cartpage td.actions .coupon{flex-wrap:wrap;margin-bottom:10px;}
  .sm-cartpage td.actions .coupon .input-text{flex:1;width:auto;}
  .sm-cartpage .cart_totals{max-width:none;}
}

/* ======================= CHECKOUT ======================= */
.woocommerce-checkout{font-family:var(--sm-font-body);}
.woocommerce-checkout h1,.woocommerce-checkout h2,.woocommerce-checkout h3{font-family:var(--sm-font-display);color:var(--sm-navy);letter-spacing:-.01em;}
/* Single card = Blocksy's .ct-order-review wrapper (it carries the border + radius). Set its inner padding
   explicitly (the variable-based padding was not taking effect, leaving the table flush to the edge). Keep
   #order_review transparent/unpadded so the card is not double-boxed. Padding on the wrapper pads the
   "Your order" heading and the table/payment uniformly. */
.woocommerce-checkout .ct-order-review{padding:16px;min-width:0;}
.woocommerce-checkout-review-order{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;}
.woocommerce-checkout-review-order table.shop_table{border:0!important;width:100%!important;table-layout:fixed;background:transparent!important;}
/* Order-summary cells are fully self-contained so the generic ".entry-content table td" rule (which adds a
   1px border on EVERY side = a grid, plus text-align:left) cannot bleed in. Kill all cell borders, keep only
   a hairline row separator (border-top), and set explicit padding: 14px vertical, 12px horizontal so the
   content has breathing room without being flush. Card padding (16px) + cell padding (12px) = 28px edge. */
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table th,
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table td{border:0!important;border-top:1px solid var(--sm-hairline)!important;padding:14px 12px!important;}
/* Long product/model names must wrap (they contain unbreakable tokens like v100GX/v100/GX100/v100Ka)
   so the table cannot outgrow the card. */
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table td.product-name,
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table th.product-name{overflow-wrap:anywhere;word-break:break-word;}
/* Amount column: fixed share, single line, right-aligned (defeat the generic text-align:left). */
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table td.product-total,
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table th.product-total,
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table tfoot td:last-child{text-align:right!important;width:36%;white-space:nowrap;}
/* The EXW note is a full-width colspan row (not an amount cell), but its single <td> is also a
   tfoot td:last-child, so the nowrap above was stopping it wrapping and it spilled past the card.
   Let this row wrap and span full width. */
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table tr.sm-or-exw td{white-space:normal!important;width:auto!important;text-align:center;padding:10px 12px!important;}
.woocommerce-checkout .woocommerce-Price-amount,.woocommerce-checkout .amount{background:transparent!important;color:var(--sm-navy);}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce-checkout select,
.select2-container--default .select2-selection--single{
  border:1px solid var(--sm-border)!important;border-radius:var(--sm-radius-pill)!important;padding:12px 18px!important;
  font-family:var(--sm-font-body)!important;color:var(--sm-navy)!important;background:var(--sm-white)!important;box-shadow:none!important;min-height:46px;}
.woocommerce form .form-row textarea{border-radius:16px!important;min-height:96px;}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus,.woocommerce-checkout select:focus{border-color:var(--sm-aqua)!important;outline:none;}
.woocommerce form .form-row label{font-family:var(--sm-font-body);color:var(--sm-graphite);font-weight:500;}
.woocommerce-checkout #payment{background:var(--sm-offwhite)!important;border:1px solid var(--sm-hairline);border-radius:var(--sm-radius-card);}
.woocommerce-checkout #payment div.payment_box{background:var(--sm-white)!important;border:1px solid var(--sm-hairline);border-radius:12px;}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--sm-white)!important;}
.woocommerce-checkout #place_order{width:100%;padding:15px 26px!important;font-size:15px!important;margin-top:8px;}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--sm-orange)!important;border-radius:8px;}
@media (max-width:768px){ .woocommerce-checkout #payment{padding:18px;} }

/* Wider checkout form. Blocksy makes .ct-woocommerce-checkout a 50/50 grid on desktop, which leaves the
   full billing/address form at only half the page while the small order summary takes the other half.
   Give the form the flexible share and the order review a fixed side column. (2-class specificity beats
   Blocksy's single-class rule regardless of stylesheet order.) */
/* The real width ceiling: sm-content.css caps every .entry-content.is-layout-constrained child to the
   820px reading measure (good for prose, wrong for checkout). Lift it on the checkout/cart content block
   so the two-column layout uses the full site content width. body-class prefix wins the specificity tie. */
body.woocommerce-checkout .entry-content.is-layout-constrained > .woocommerce,
body.woocommerce-cart .entry-content.is-layout-constrained > .woocommerce{
  max-width:var(--sm-maxw); margin-left:auto; margin-right:auto;
}

@media (min-width:1000px){
  .woocommerce-checkout .ct-woocommerce-checkout{ grid-template-columns:minmax(0,1fr) 360px; }
}

/* "Shipping required?" radios: Blocksy's .form-row label{display:block} drops each option label onto its
   own line, split from its radio. Lay each radio inline with its label, one option per line. */
#satmarin_or_shipping_required_field .woocommerce-input-wrapper{ display:flex; flex-wrap:wrap; align-items:center; row-gap:8px; }
#satmarin_or_shipping_required_field .woocommerce-input-wrapper input[type=radio]{ flex:0 0 auto; margin:0 10px 0 0; position:static; clip:auto; }
#satmarin_or_shipping_required_field .woocommerce-input-wrapper label{ flex:1 1 calc(100% - 34px); margin:0; font-weight:400; line-height:1.4; }

/* The #payment box (privacy/terms/Initiate Order) had no padding; add some. #order_review itself is not a
   card (see above), so the card padding comes from Blocksy's .ct-order-review wrapper (35px). */
.woocommerce-checkout #payment{ padding:20px; }