/**
 * Velonix Labs — Cart + Checkout
 * Enqueued ONLY on Cart and Checkout (see inc/enqueue.php).
 *
 * This is CSS-only reskinning of WooCommerce's own default cart/checkout
 * markup and structure — not template overrides. Nothing here is a new
 * component: it's the same tokens, the same field treatment as
 * .field-label/.field-input (Order Tracking, Contact, the Calculator),
 * and the same button look as .btn/.btn-primary/.btn-secondary, applied
 * to WooCommerce's own stable class names (.shop_table, .form-row,
 * input.input-text, #place_order, etc. — documented, unchanged across
 * WooCommerce versions) since those elements are generated by the
 * plugin, not by a theme template this project owns.
 *
 * WooCommerce's own default stylesheet is dequeued on these two page
 * types once this file is active — see velonix_dequeue_default_wc_styles()
 * in inc/enqueue.php, extended to include is_cart() || is_checkout()
 * the same way it already covered Shop/Product. That means the layout
 * itself (not just colours) has to be fully handled here, same as
 * page-catalogue.css / page-product.css already do for Shop/Product.
 *
 * Order summary product description: investigated, not theme-added —
 * searched the whole theme, no hook or template touches cart/checkout
 * line items with a description anywhere (the theme's only use of
 * get_short_description() is on the Product Detail page, unrelated).
 * This is WooCommerce Blocks' own default behaviour: its cart/checkout
 * line-item template includes a ProductMetadata component that renders
 * .wc-block-components-product-metadata__description whenever a
 * product has a short description — not something the older classic
 * shortcode cart/checkout ever showed, and not something this theme
 * added. Hidden below via CSS rather than a template override, per
 * the brief — safe either way: if the live checkout ever runs the
 * classic (non-block) markup instead, this selector simply matches
 * nothing and does nothing.
 */
.wc-block-components-product-metadata__description{ display:none; }

/* ===== shared: notices, headings, tables ===== */
.woocommerce-notices-wrapper{ margin-bottom:24px; }
.woocommerce-error, .woocommerce-message, .woocommerce-info{
  list-style:none; margin:0 0 24px; padding:16px 20px;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius); color:var(--ink-soft); font-size:14px; line-height:1.6;
}
.woocommerce-error{ border-left-color:#E0857D; }

.cart-empty, .return-to-shop{ color:var(--ink-soft); }
.cart-empty{ font-size:16px; margin-bottom:20px; }

/* ===== custom empty-basket state (page-cart.php) =====
   Replaces WooCommerce's own default cart-empty.php content entirely
   — page-cart.php checks WC()->cart->is_empty() itself and never
   calls the shortcode in this state, so this is the only empty-basket
   markup that exists on this page now. */
.basket-empty-state{
  text-align:center; max-width:420px; margin:0 auto; padding:56px 20px;
}
.basket-empty-state svg{ width:44px; height:44px; color:var(--ink-faint); margin-bottom:24px; }
.basket-empty-state h2{ font-size:22px; margin-bottom:10px; }
.basket-empty-state p{ color:var(--ink-soft); margin-bottom:28px; line-height:1.7; }

table.shop_table{
  width:100%; border-collapse:collapse; margin-bottom:32px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
}
table.shop_table th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--ink-faint); font-weight:600; padding:16px 20px; border-bottom:1px solid var(--line);
}
table.shop_table td{ padding:20px; border-bottom:1px solid var(--line); color:var(--ink); font-size:14px; vertical-align:middle; }
table.shop_table tr:last-child td{ border-bottom:none; }
table.shop_table .amount{ font-family:'IBM Plex Mono',monospace; color:var(--ink); }

/* ===== cart page ===== */
.woocommerce-cart-form{ margin-bottom:40px; }

/* Wider container specifically for the cart's own working area — the
   sitewide .wrap (max-width:1200px, tokens.css) is right for content
   pages, but a data-dense table + totals sidebar reads as
   unnecessarily constrained at larger desktop widths, with too much
   empty space either side of a narrow-feeling table. Only applied
   here (page-cart.php adds this class specifically to the wrap around
   .cart-page-grid, not the hero or "New in store" sections on the
   same page, and not the sitewide .wrap default anywhere else). */
.wrap-wide{ max-width:1400px; }

/* Genuine two-column layout — cart items (left/main) beside the order
   summary (right) — rather than the summary simply sitting
   right-aligned below the table. .cart-page-grid wraps
   form.woocommerce-cart-form and div.cart-collaterals directly, in
   woocommerce/cart/cart.php (a template override, not this page's
   own markup) — see that file's docblock for why: relying on
   [woocommerce_cart]'s own black-box output structure turned out to
   be the actual cause of totals stacking underneath instead of
   beside the cart, since this theme never actually confirmed that
   shortcode output produces exactly two top-level siblings with
   nothing wrapping them, and evidently something did. Owning the
   template directly removes that uncertainty entirely.

   Ratio: 1.6fr:1fr ≈ 61.5%/38.5%, inside the requested 60–65%/35–40%
   range — text-heavy shipping cards and the info panel benefit from
   slightly more room than a bare total figure would need, so this
   sits at the generous end of that range rather than the midpoint. */
.cart-page-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:64px;
  align-items:start;
}
.cart-page-grid .woocommerce-cart-form{ margin-bottom:0; }

/* Grid items default to min-width:auto, meaning they refuse to shrink
   below their own content's intrinsic minimum size — the same root
   cause already found and fixed for My Account's nav/content columns
   and the Storage Guide's why-grid earlier in this project. Here it's
   the shipping method labels ("Royal Mail Next Day Delivery: £8.95"
   plus their description text) giving .cart-collaterals a large
   min-content width that was inflating the grid TRACK itself past its
   assigned share, overflowing the page — confirmed by measuring the
   actual rendered grid-template-columns before writing this fix, not
   assumed. min-width:0 on both items is what actually lets them
   shrink to their assigned fr proportion; child elements (.cart_totals,
   the shipping list) still get to wrap/scroll/reflow within that
   correctly-sized column instead of forcing the column wider. */
.cart-page-grid > *{ min-width:0; }

/* Tablet (768–1023px): kept as a two-column layout in an earlier
   round, per an explicit request at the time to avoid wasting tablet's
   horizontal space — reversed here, per an equally explicit follow-up
   request: the two-column result read as cramped/compressed at this
   width in practice (narrow shipping cards, wrapped text), not the
   "intelligent use of space" it was meant to be. Tablet's own
   dedicated redesign lives further down, in its own clearly-labelled
   block, rather than folded into general breakpoint logic — that
   block is the ONLY place 768–1023px-specific rules exist in this
   file, so anyone auditing "what's tablet-specific" only needs to
   look in one place. Desktop (≥1024px, including the exact-1024px
   boundary fix below) and mobile (≤767px, the tightening block below)
   are both completely unaffected by anything in that tablet block. */
@media (max-width:1023px) and (min-width:768px){
  .cart-page-grid{
    grid-template-columns:1fr;
    gap:40px;
  }
}

/* True mobile (≤767px, the same boundary as everywhere else in this
   theme) — this is where stacking actually happens, not tablet. */
@media (max-width:767px){
  .cart-page-grid{
    grid-template-columns:1fr;
    gap:32px;
  }
}

/* Table tightening — scoped to exactly 1024px only, NOT the tablet
   range above it borders. Originally written as max-width:1024px
   (covering everything from mobile up through the desktop boundary),
   back when tablet shared this same narrow-column problem in its
   previous two-column form. Now that tablet is single-column and
   full-width (its own block further down), it no longer needs
   compacting — narrowing this range to precisely where the real
   problem still exists (the desktop grid's own 2-column mode already
   starts at exactly 1024px, giving the table only ~616px there, which
   without this fix squeezed the product image to under 4px wide,
   measured directly) keeps this locked to the desktop boundary case
   it was actually built for, without also constraining tablet's now
   much more generous table treatment. Mobile (≤767px) is a separate,
   narrower band this max-width:1024px never needs to reach on its
   own — mobile's own later, more specific ≤700px block already fully
   overrides table structure regardless of what this range does. */
@media (min-width:1000px) and (max-width:1024px){
  table.shop_table.cart{ table-layout:fixed; }
  table.shop_table td{ padding:14px; }
  .product-thumbnail{ width:64px; padding-left:14px; }
  .product-thumbnail img{ width:48px; height:48px; }
  .product-remove{ width:40px; padding-right:0; }
  .product-name{ min-width:0; overflow:hidden; }
  .product-name a{
    display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}

/* Mobile's own share of the old tightening range (391–767px) —
   unchanged from before, split out here only because the 768–1024px
   portion above needed to change and the two ranges used to be one
   rule. Nothing in this block is new. */
@media (max-width:767px){
  table.shop_table.cart{ table-layout:fixed; }
  table.shop_table td{ padding:14px; }
  .product-thumbnail{ width:64px; padding-left:14px; }
  .product-thumbnail img{ width:48px; height:48px; }
  .product-remove{ width:40px; padding-right:0; }
  .product-name{ min-width:0; overflow:hidden; }
  .product-name a{
    display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}

/* ============================================================
   TABLET REDESIGN — 768–1023px only.
   ============================================================
   The ONLY block in this file with tablet-specific rules beyond the
   single grid-template-columns change above — everything tablet needs
   lives here, in one place, rather than scattered through general
   breakpoint logic, so it's easy to audit exactly what tablet does
   differently from desktop and mobile. Nothing in this block can
   affect ≥1024px or ≤767px; both are governed entirely by rules
   outside this media query.

   Composition: heading -> full-width cart -> full-width totals ->
   checkout, one spacious column, matching the request directly rather
   than reusing either the desktop 2-column split (too cramped when
   forced into tablet's narrower width, which was the actual problem
   with the previous version) or mobile's card-stacked table (tablet
   has enough room for real horizontal product rows and shouldn't give
   that up).

   Table: no compacting needed at all here — table-layout stays the
   browser default (auto), cell padding and thumbnail size return to
   generous, desktop-adjacent values, and product names get real room
   to breathe rather than the ellipsis-truncation the old cramped
   2-column version needed. This column now gets the wrap-wide
   container's FULL width (previously shared with a sidebar), so a
   real table comfortably fits every column without narrowing any of
   them. */
@media (max-width:1023px) and (min-width:768px){

  table.shop_table.cart{ table-layout:auto; }
  table.shop_table td{ padding:20px; }
  .product-thumbnail{ width:96px; padding-left:24px; }
  .product-thumbnail img{ width:60px; height:60px; }
  .product-remove{ width:56px; padding-right:8px; }
  .product-name{ min-width:200px; overflow:visible; }
  .product-name a{
    display:inline; overflow:visible; text-overflow:clip; white-space:normal;
  }

  /* Basket totals — full width beneath the cart, not a narrow
     right-hand column. This is the specific change that fixes "the
     critical problem with the current design": .cart_totals no
     longer caps at 480px, and .cart-collaterals no longer right-aligns
     it inside spare space — both simply span the full column now. */
  .cart_totals{ max-width:none; width:100%; }
  .cart-collaterals{ justify-content:stretch; }
  .wc-proceed-to-checkout a.checkout-button{ max-width:420px; margin:20px auto 0; display:flex; }

  /* Shipping methods — real horizontal rows with room to breathe, not
     narrow vertical cards. Full tablet width means the label text
     ("Royal Mail 48hr Tracked: £4.49") comfortably fits on one line
     without needing to structurally split the name from the price —
     confirmed by rendering rather than assumed (see conversation) —
     so this focuses on giving the row generous padding/sizing rather
     than restructuring WooCommerce's own generated label text, which
     would be a more fragile fix for a problem the extra width already
     solves on its own. */
  .woocommerce-shipping-methods li{
    padding:20px 24px; gap:16px;
  }
  .woocommerce-shipping-methods label{
    font-size:15px;
  }
  .shipping-method-desc{
    font-size:13px; margin-top:6px;
  }

  /* Processing/dispatch/delivery panel — full width, horizontal flow,
     readable at normal tablet font sizes rather than compressed. */
  .shipping-info-panel{ padding:32px; }
  .shipping-info-flow{ gap:32px; margin-bottom:20px; }
  .shipping-info-stage{ min-width:110px; }
  .shipping-info-label{ font-size:12px; }
  .shipping-info-detail{ font-size:12.5px; }
  .shipping-info-panel p{
    font-size:13.5px; max-width:640px; margin-left:auto; margin-right:auto;
  }
}
/* ============================================================
   END TABLET REDESIGN
   ============================================================ */

.product-remove{ width:56px; padding-right:8px; text-align:center; }
.product-remove a.remove{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; color:var(--ink-faint);
  font-size:20px; line-height:1; text-decoration:none; transition:color 0.18s ease, background-color 0.18s ease;
}
.product-remove a.remove:hover{ color:#E0857D; background:rgba(224,133,125,0.12); }

.product-thumbnail{ width:96px; padding-left:24px; }
.product-thumbnail img{ width:60px; height:60px; object-fit:cover; border-radius:var(--radius); display:block; }

.product-name{ min-width:220px; }
.product-name a{ color:var(--ink); font-weight:500; text-decoration:none; }
.product-name a:hover{ color:var(--accent); }
.product-name dl.variation{ margin-top:6px; font-size:12px; color:var(--ink-faint); }

.quantity .qty{
  width:72px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px; color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:14px; text-align:center;
}
.quantity .qty:focus{ outline:none; border-color:var(--accent); }

/* Coupon + Update basket — previously two unrelated block-level
   children of .actions with no layout applied to the parent at all,
   which is exactly what read as "randomly stacked". display:flex was
   tried directly on .actions first, but .actions is a <td colspan="6">
   — confirmed by measuring its actual rendered width (255px against
   an 879px table) that flex display on a colspanned table cell
   produces unreliable width calculations in the browser's table
   layout algorithm, not something to fight further. Floats behave
   predictably inside a table cell and don't have this problem: the
   coupon group floats left, Update basket floats right, both share
   one row wherever there's room (desktop/tablet), and mobile turns
   both off in favour of full-width stacked blocks. */
.actions{
  background:transparent; padding:24px 20px 4px;
}
.actions::after{ content:""; display:table; clear:both; }
.coupon{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; float:left; }
.coupon #coupon_code{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 16px; color:var(--ink); font-family:'Inter',sans-serif; font-size:14px; min-width:200px;
}
.coupon #coupon_code:focus{ outline:none; border-color:var(--accent); }
.actions button[name="update_cart"]{ float:right; }

@media (max-width:600px){
  .coupon{ float:none; flex-direction:column; align-items:stretch; margin-bottom:12px; }
  .coupon #coupon_code{ min-width:0; width:100%; }
  .actions button[name="update_cart"]{ float:none; display:block; width:100%; }
}

.cart-collaterals{ display:flex; justify-content:flex-end; }
.cart_totals{ max-width:480px; width:100%; }
.cart_totals h2{ font-size:18px; margin-bottom:16px; }
.cart_totals table.shop_table th{ font-size:13px; text-transform:none; letter-spacing:normal; color:var(--ink-soft); font-weight:500; }
.cart_totals .order-total .amount{ font-size:16px; font-weight:600; color:var(--ink); }
.wc-proceed-to-checkout{ margin-top:20px; }
.wc-proceed-to-checkout a.checkout-button{ width:100%; }

/* ===== shipping methods — each a clearly separated row, radio on the
   left, name/price/description with room to breathe ===== */
.woocommerce-shipping-methods{ list-style:none; margin:0; padding:0; }
.woocommerce-shipping-methods li{
  display:flex; align-items:flex-start; gap:12px;
  padding:16px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg); margin-bottom:10px;
}
.woocommerce-shipping-methods li:last-child{ margin-bottom:0; }
.woocommerce-shipping-methods input[type="radio"]{
  margin-top:3px; accent-color:var(--accent); flex-shrink:0; width:16px; height:16px; cursor:pointer;
}
.woocommerce-shipping-methods label{
  color:var(--ink); font-size:14px; line-height:1.6; cursor:pointer; flex:1; min-width:0;
  overflow-wrap:break-word;
}
.shipping-method-desc{
  display:block; color:var(--ink-faint); font-size:12.5px; font-weight:400; margin-top:4px;
}

/* ===== processing/dispatch/delivery explanatory panel =====
   Rendered as its own <tr><td colspan="2"> via
   velonix_shipping_processing_time_notice() (inc/woocommerce-hooks.php,
   hooked to woocommerce_cart_totals_after_shipping) — inherits
   table.shop_table td's own padding for consistent rhythm with the
   rows above/below it, this only styles the panel's own contents. */
.shipping-info-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px;
}
.shipping-info-flow{
  display:flex; align-items:flex-start; justify-content:center; gap:14px;
  margin-bottom:16px; flex-wrap:wrap;
}
.shipping-info-stage{ display:flex; flex-direction:column; align-items:center; text-align:center; min-width:76px; }
.shipping-info-label{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--accent); font-weight:600;
}
.shipping-info-detail{ font-size:11px; color:var(--ink-faint); margin-top:5px; line-height:1.4; }
.shipping-info-arrow{ color:var(--ink-faint); font-size:15px; margin-top:2px; }
.shipping-info-panel p{ font-size:12.5px; color:var(--ink-soft); line-height:1.7; margin:0; text-align:center; }


/* ===== buttons: WooCommerce's own generated buttons, matched to .btn
   visually without needing template overrides to add the class ===== */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
#place_order, .checkout-button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:14px;
  border-radius:var(--radius); cursor:pointer; border:1px solid transparent;
  white-space:nowrap; background:var(--accent); color:#0D1017; padding:13px 26px;
  transition:background-color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
  text-decoration:none;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
#place_order:hover, .checkout-button:hover{ background:var(--accent-deep); }
.woocommerce a.button.alt, .woocommerce input.button.alt{ background:var(--accent); color:#0D1017; }
button[name="update_cart"], button[name="apply_coupon"]{
  background:transparent; color:var(--ink); border:1px solid var(--line); padding:12px 25px;
}
button[name="update_cart"]:hover, button[name="apply_coupon"]:hover{ border-color:var(--accent); color:var(--accent); background:transparent; }
.woocommerce a.button:disabled, .woocommerce input.button:disabled,
.woocommerce a.button.disabled{ opacity:0.5; cursor:not-allowed; }

/* ===== checkout page =====
   Structure comes from woocommerce/checkout/form-checkout.php (a
   template override — see that file's docblock for why): .col2-set
   #customer_details (billing + shipping fields) and the order-review
   column are guaranteed direct children of .checkout-page-grid, not
   an assumption about the shortcode's own output. Desktop breakpoint
   uses 1000px specifically (not the 1024px used elsewhere in this
   theme) because that's the exact value given for this page. */
.woocommerce-checkout{ display:block; }

.checkout-page-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:64px;
  align-items:start;
}
/* Grid items default to min-width:auto, refusing to shrink below
   their own content's intrinsic minimum size — the same fix already
   needed on the Basket page's own grid, applied here from the start
   rather than waiting for the same bug to surface again. */
.checkout-page-grid > *{ min-width:0; }

.checkout-order-review-col{
  position:sticky;
  top:32px;
}

/* Checkout-specific: the order-review column narrows to 40% at the
   lower end of desktop (1000–1199px), and within that, WooCommerce's
   own <th>Shipping</th> label column takes a further, fixed chunk of
   an already-tight width — confirmed by rendering, not assumed:
   shipping card text was fragmenting across 5+ lines at 1024px
   specifically ("Royal / Mail / 48hr / Tracked: / £4.49"), a genuine
   readability problem the brief explicitly warns against. Scoped to
   #order_review specifically (Checkout's own order-review table),
   never touching .cart_totals — the Basket's own version of this same
   shared shipping-methods markup is completely unaffected, since this
   selector cannot match anything on that page. Stacks the label above
   the method list, the same technique already used for Basket at
   mobile, giving the cards the full column width instead of sharing
   it with a label column at this specific narrow-desktop range. */
@media (min-width:1000px) and (max-width:1199px){
  #order_review tr.woocommerce-shipping-totals{ display:flex; flex-direction:column; }
  #order_review tr.woocommerce-shipping-totals th,
  #order_review tr.woocommerce-shipping-totals td{ display:block; width:100%; padding-top:8px; }
  #order_review tr.woocommerce-shipping-totals th{ padding-bottom:0; border-bottom:none; }
}

#customer_details{ display:block; }
/* Clearfix — .col-1 and .col-2 each contain their own floated
   form-row-first/form-row-last pairs (the fix just above). Without
   this, a column ending in a floated pair (Town/Postcode is often the
   last field in billing) collapses to zero height for that row,
   letting the NEXT column's content render into the same visual space
   and wrap unpredictably around the still-floating elements — a real,
   measured bug (a stray span rendering 63px past the viewport edge at
   768–900px), not a hypothetical one. */
.col2-set .col-1::after, .col2-set .col-2::after{ content:""; display:table; clear:both; }
.col2-set .col-1{ margin-bottom:32px; }

@media (max-width:999px){
  .checkout-page-grid{
    display:block;
  }
  .checkout-order-review-col{
    position:static;
    margin-top:48px;
  }
}

.woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3,
#order_review_heading{ font-size:18px; margin-bottom:20px; }
.woocommerce-shipping-fields{ margin-top:32px; }
.woocommerce-additional-fields{ margin-top:32px; }
.woocommerce-shipping-fields h3 label{
  display:flex; align-items:center; gap:10px; font-size:18px; margin-bottom:0;
  cursor:pointer;
}
.woocommerce-shipping-fields h3 input[type="checkbox"]{ accent-color:var(--accent); width:16px; height:16px; }

.form-row{ margin-bottom:20px; }
.form-row label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.form-row label .required{ color:#E0857D; text-decoration:none; }
/* Helper text under a field — currently only used by billing_phone
   (velonix_configure_phone_field(), just above in this file), via
   WooCommerce's own standard $args['description'] field option. Not
   phone-specific in the selector on purpose: this targets WooCommerce's
   own .description class generically, so it styles correctly if any
   other field is ever given a description the same native way,
   without needing separate CSS added later. No other field currently
   has one, so this affects nothing else on the form today. */
.form-row .description{
  display:block; margin-top:6px; font-size:12px; color:var(--ink-faint); line-height:1.5;
}

/* Phone field — visual-only fix. The field is genuinely required and
   enforced server-side regardless of what its label shows
   (velonix_require_phone_at_checkout(), inc/woocommerce-hooks.php,
   reads the raw submitted value directly and blocks checkout if it's
   empty — that's already confirmed working and untouched here). What
   this addresses is purely that the label was still showing
   WooCommerce's own "(optional)" indicator and no asterisk, meaning
   WooCommerce's own internal required flag for this field still
   isn't being respected for display purposes specifically, for
   reasons not visible from here — rather than chase that further (out
   of scope for a "visual label only" fix), this makes the label
   correct directly and independently of whatever that flag currently
   says: .optional is WooCommerce's own class for the "(optional)"
   text, hidden here; the asterisk is added the same way every other
   required field already shows one, just via CSS instead of
   WooCommerce's own flag-driven markup. Scoped to #billing_phone_field
   only — no other field's optional/required indicator is touched. */
#billing_phone_field .optional{ display:none; }
#billing_phone_field label::after{
  content:"*"; color:#E0857D; margin-left:4px;
}

.form-row .input-text, .form-row select,
.woocommerce-additional-fields textarea{
  width:100%; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 16px; color:var(--ink); font-family:'Inter',sans-serif; font-size:14px; outline:none;
  transition:border-color 0.18s ease;
}
.form-row .input-text:focus, .form-row select:focus,
.woocommerce-additional-fields textarea:focus{ border-color:var(--accent); }
.woocommerce-additional-fields textarea{ min-height:100px; resize:vertical; }

/* Fields WooCommerce marks as belonging together (first/last name,
   town/postcode) sit side by side on desktop and tablet where there's
   real room, stacking only on genuinely narrow widths.

   float, not inline-block — confirmed by rendering, not assumed: with
   inline-block, real whitespace in the HTML source between
   .form-row-first and .form-row-last (a normal, unavoidable byproduct
   of how templates are formatted, including WooCommerce's own field
   rendering) is treated as a real space character, adding just enough
   extra width to push the pair over 100% and force an unwanted wrap
   to a second line — exactly what was observed (First name / Last
   name stacking instead of sitting side by side, at every width this
   rule was meant to apply at). Floats aren't sensitive to source
   whitespace the same way, which is what actually fixes it. */
.form-row-first, .form-row-last{ float:left; width:calc(50% - 10px); }
.form-row-first{ margin-right:20px; }
.form-row:not(.form-row-first):not(.form-row-last){ clear:both; }
@media (max-width:600px){
  .form-row-first, .form-row-last{ width:100%; margin-right:0; float:none; }
}

.select2-container .select2-selection--single{
  background:var(--bg) !important; border:1px solid var(--line) !important; border-radius:var(--radius) !important;
  height:auto !important; padding:13px 16px !important;
}
.select2-container .select2-selection__rendered{ color:var(--ink) !important; padding:0 !important; line-height:1.4 !important; }
.select2-container .select2-selection__arrow{ height:100% !important; }
.select2-dropdown{ background:var(--surface) !important; border:1px solid var(--line) !important; }
.select2-results__option{ color:var(--ink-soft) !important; }
.select2-results__option--highlighted{ background:var(--accent) !important; color:#0D1017 !important; }

/* Order review — the sticky right column on desktop/tablet-transition,
   full width below the form on true tablet/mobile. Reuses the exact
   same shop_table/shipping-method/shipping-info-panel treatment
   already built for the Basket's own order summary, not a second,
   separate visual language. */
#order_review_heading{ margin-bottom:20px; }
#order_review table.shop_table{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  margin-bottom:20px;
}
#order_review table.shop_table th{ font-size:12px; text-transform:uppercase; letter-spacing:0.04em; }
#order_review .product-name{ color:var(--ink-soft); }
#order_review .product-name .product-quantity{ color:var(--ink-faint); font-family:'IBM Plex Mono',monospace; }
#order_review .order-total .amount{ font-size:18px; font-weight:600; color:var(--ink); }
#order_review .cart-subtotal .amount,
#order_review .woocommerce-shipping-totals .amount{ font-family:'IBM Plex Mono',monospace; color:var(--ink); }

/* Order review table at mobile — a real, measured overflow (11px at
   390px), not a style preference: table.shop_table's shared
   th/td:20px padding, applied to two columns (product name + price),
   was enough on its own to push this simple 2-column table past a
   390px viewport once real product-name text was accounted for.
   Reduced padding and explicit wrapping fixes it without touching
   the shared table.shop_table rule other pages rely on. */
@media (max-width:767px){
  #order_review table.shop_table{ table-layout:fixed; width:100%; }
  #order_review table.shop_table th,
  #order_review table.shop_table td{ padding:12px 14px; font-size:13px; }
  #order_review .product-name{ overflow-wrap:break-word; }
}

#payment{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:8px; margin-top:24px; }
ul.payment_methods{ list-style:none; margin:0; padding:0; }
ul.payment_methods li.payment_method{ border-bottom:1px solid var(--line); padding:16px; }
ul.payment_methods li.payment_method:last-of-type{ border-bottom:none; }
ul.payment_methods input[type="radio"]{ accent-color:var(--accent); margin-right:10px; }
ul.payment_methods label{ color:var(--ink); font-size:14px; font-weight:500; cursor:pointer; }
.payment_box{
  background:var(--bg); border-radius:var(--radius); padding:16px; margin-top:12px;
  color:var(--ink-soft); font-size:13px; line-height:1.6;
}
.payment_box p{ margin:0 0 8px; }
.payment_box p:last-child{ margin-bottom:0; }

.place-order{ padding:16px; }
.place-order #place_order{ width:100%; }
.woocommerce-privacy-policy-text{ font-size:12px; color:var(--ink-faint); margin-top:16px; line-height:1.6; }
.woocommerce-terms-and-conditions-wrapper{ font-size:13px; color:var(--ink-soft); margin-top:16px; }

.woocommerce-form-login, .woocommerce-form-coupon{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px; margin-bottom:24px;
}

/* ===== responsive: cart table -> stacked cards below 700px, matching
   the same breakpoint used for .catalogue-toolbar/.doc-toolbar =====
   Root cause of the mobile image bug, found by rendering and measuring
   the actual layout rather than assumed: the image itself was never
   distorted (its own box measured a correct 56x56 with object-fit:cover
   applied) — the six cart columns just weren't all accounted for here.
   .product-price (WooCommerce's separate per-unit price column,
   distinct from .product-subtotal) had no order assigned, so it
   defaulted to order:0 — identical to .product-thumbnail — and the two
   sat side by side on the same row, which is what actually read as
   "the image doesn't display correctly". All six columns now have an
   explicit order. */
@media (max-width:700px){
  table.shop_table.cart thead{ display:none; }
  table.shop_table.cart tr{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px; border-bottom:1px solid var(--line); }
  table.shop_table.cart td{ border-bottom:none; padding:0; }
  table.shop_table.cart td.product-thumbnail{ order:0; width:auto; padding-left:0; }
  table.shop_table.cart td.product-name{ flex:1 1 100%; order:1; min-width:0; }
  table.shop_table.cart td.product-price{ order:2; }
  table.shop_table.cart td.product-quantity{ order:3; }
  table.shop_table.cart td.product-subtotal{ order:4; margin-left:auto; }
  table.shop_table.cart td.product-remove{ order:5; width:auto; padding-right:0; }

  .cart-collaterals{ justify-content:stretch; }
  .cart_totals{ max-width:none; }

  /* Shipping method rows and the processing/dispatch/delivery panel
     already reflow reasonably as flex/wrap by default (confirmed by
     rendering — see conversation), so nothing here forces a further
     card transformation on top of what .woocommerce-shipping-methods
     li already does; this only tightens spacing/sizing specifically
     for the narrow width rather than restructuring anything. */
  .shipping-info-flow{ gap:10px; }
  .shipping-info-stage{ min-width:64px; }
  .woocommerce-shipping-methods li{ padding:14px; }

  /* The shipping row's own <th>Shipping</th> label column was taking
     width away from the actual method cards at this size — confirmed
     by rendering, not assumed (the cards' text was wrapping more than
     necessary). Stacking the label above the content, full-width,
     gives the cards the room they need instead. Centred here (the
     shipping cards' own radio+label content stays left-aligned below
     — that's standard, expected radio-list UX, and centring it would
     hurt readability rather than help it — but the section's own
     heading benefits from the same centred, deliberate treatment as
     the section headings elsewhere on this page). */
  .cart_totals tr.woocommerce-shipping-totals{ display:flex; flex-direction:column; }
  .cart_totals tr.woocommerce-shipping-totals th,
  .cart_totals tr.woocommerce-shipping-totals td{ display:block; width:100%; padding-top:8px; }
  .cart_totals tr.woocommerce-shipping-totals th{ padding-bottom:0; border-bottom:none; text-align:center; }

  /* Order total — given its own centred, stacked treatment rather than
     the standard left-label/right-value row every other row uses:
     this is the one figure on the page a shopper most needs to walk
     away with, so it gets deliberate visual weight instead of reading
     as just another line in the table. */
  .cart_totals tr.order-total{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:4px; padding-top:20px; padding-bottom:20px;
  }
  .cart_totals tr.order-total th{ border-bottom:none; padding-bottom:0; font-size:13px; }
  .cart_totals tr.order-total td{ padding-top:0; }
  .cart_totals tr.order-total .amount{ font-size:20px; }

  .wc-proceed-to-checkout{ margin-top:24px; }
}