/**
 * CM Integrations — WooCommerce page styling.
 *
 * Loaded only on WooCommerce pages (is_woocommerce(), is_cart(), is_checkout()).
 * Enqueued after woocommerce-general so specificity wins cleanly.
 * Uses CSS variables from style.css — no hardcoded colours.
 */

/* ============================================================
   0. HEADER CHROME PROTECTION
   WC stylesheets can set img/height rules that escape into the
   site header on .woocommerce-page. Force logo height here with
   higher specificity (0,2,0) so no WC rule can override it.
   ============================================================ */
.site-header .brand-logo { height: 60px !important; width: auto !important; }

/* ============================================================
   1. KILL WC'S FLOAT-BASED COLUMN LAYOUT
   The blank gap on /shop/ came from woocommerce-layout.css
   floating #primary to 68% width. wrapper-start.php replaces
   #primary/.content-area entirely, but these rules ensure any
   stray WC layout rules don't apply to cmi-theme's elements.
   ============================================================ */
.woocommerce #primary,
.woocommerce-page #primary {
  float: none;
  width: 100%;
}
.woocommerce-page .site-main,
.woocommerce-page #main {
  margin: 0;
  padding: 0;
}
.woocommerce,
.woocommerce-page .woocommerce {
  max-width: none;
  width: 100%;
}

/* ============================================================
   2. NOTICES
   ============================================================ */
.woocommerce-notices-wrapper { margin-bottom: var(--sp-5); }

.woocommerce-message,
.woocommerce-info {
  border-left: 4px solid var(--blue) !important;
  background: var(--tint) !important;
  color: var(--slate) !important;
  border-radius: var(--r-sm) !important;
  padding: 14px 18px !important;
  margin-bottom: var(--sp-4) !important;
  list-style: none !important;
  font-size: var(--t-small) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}
.woocommerce-error {
  border-left: 4px solid #c0392b !important;
  background: #fef2f2 !important;
  color: var(--slate) !important;
  border-radius: var(--r-sm) !important;
  padding: 14px 18px !important;
  margin-bottom: var(--sp-4) !important;
  list-style: none !important;
  font-size: var(--t-small) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none !important; }
.woocommerce-message a.button,
.woocommerce-info a.button {
  background: var(--blue) !important;
  color: #fff !important;
  border-radius: var(--r-sm) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  float: none !important;
  display: inline-block !important;
  margin-left: var(--sp-4) !important;
}

/* ============================================================
   3. BREADCRUMB
   ============================================================ */
.woocommerce-breadcrumb {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 var(--sp-5) !important;
  padding: 0 !important;
  background: none !important;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.woocommerce-breadcrumb a { color: var(--muted); }
.woocommerce-breadcrumb a:hover { color: var(--blue); }

/* ============================================================
   4. SHOP ARCHIVE HEADER (page title + description)
   ============================================================ */
.woocommerce-products-header {
  max-width: 680px;
  margin-bottom: var(--sp-6);
}
.woocommerce-products-header__title.page-title {
  font-size: var(--t-h2) !important;
  font-weight: 700 !important;
  color: var(--slate) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

/* ============================================================
   5. SHOP BAR: result count + catalog ordering
   ============================================================ */
.woocommerce-result-count {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  float: none !important;
  margin: 0 0 var(--sp-3) !important;
  padding: 0;
}
.woocommerce-ordering {
  float: none !important;
  margin: 0 0 var(--sp-6) !important;
}
.woocommerce-ordering select.orderby {
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 9px 30px 9px 12px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  cursor: pointer;
  min-width: 180px;
  transition: border-color .15s;
}
.woocommerce-ordering select.orderby:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(34,113,177,.12);
}

/* ============================================================
   6. PRODUCT GRID  (ul.products)
   ============================================================ */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 var(--sp-7) !important;
  float: none !important;
  clear: both !important;
}
@media (max-width: 980px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* Kill WooCommerce clearfix pseudo-elements that were becoming grid items
   and leaving an empty first cell in the product grid. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
  display: none;
}

/* ---- Hide category cards and non-product grid items ---- */
/* WC category cards have class "product-category product" — they take up a
   grid slot but render as invisible empty space in this theme. Hide them. */
.woocommerce ul.products li.product-category,
.woocommerce-page ul.products li.product-category {
  display: none !important;
}

/* ---- PRODUCT CARD: li.product ---- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: border-color .18s ease, transform .18s ease !important;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  border-color: var(--blue) !important;
  transform: translateY(-3px) !important;
}

/* Product image */
.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  display: block !important;
  margin: 0 !important;
}

/* On-sale badge */
.woocommerce ul.products li.product span.onsale,
.woocommerce-page ul.products li.product span.onsale {
  background: var(--blue) !important;
  border-radius: 100px !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  min-height: auto !important;
  min-width: auto !important;
  padding: 4px 10px !important;
  line-height: 1.4 !important;
  top: 12px !important;
  left: 12px !important;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--t-h6) !important;
  font-weight: 600 !important;
  color: var(--slate) !important;
  letter-spacing: 0 !important;
  padding: 18px 22px 0 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* Price in card */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  font-family: var(--mono) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--slate) !important;
  padding: 10px 22px 0 !important;
  display: block !important;
  margin: 0 !important;
}
.woocommerce ul.products li.product .price ins { text-decoration: none !important; }
.woocommerce ul.products li.product .price del { color: var(--muted) !important; }

/* Add-to-cart button in card — btn-line style */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  padding: 8px 14px !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--blue) !important;
  color: var(--blue) !important;
  background: transparent !important;
  cursor: pointer !important;
  margin: 18px 22px 22px !important;
  transition: background .15s, color .15s !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover {
  background: var(--tint) !important;
}

/* ============================================================
   7. SINGLE PRODUCT — div.product
   ============================================================ */

/* Two-column layout: gallery | summary */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
.woocommerce div.product .woocommerce-product-gallery { grid-column: 1; }
.woocommerce div.product .summary.entry-summary      { grid-column: 2; }

/* WooCommerce core ships width:48% + float on the gallery and summary. As grid
   items that float is ignored, but the 48% width is not — it shrinks each item
   to 48% of its 1fr track (~243px) and leaves a large empty gap between the two
   squished columns. Reset so each fills its full track. */
.woocommerce div.product div.images.woocommerce-product-gallery,
.woocommerce div.product .summary.entry-summary {
  width: auto;
  float: none;
  margin: 0;
}

/* The theme's generic .summary card (style.css) is position:sticky;top:90px for
   the cart/checkout order-summary. WooCommerce's product summary shares the
   `summary` class, so it inherited that sticky and pinned itself over the tabs +
   Related Products that sit below it in the SAME div.product grid — overlapping
   them on scroll. Return the product summary to normal flow (cart/checkout
   summary keeps its sticky). */
.woocommerce div.product .summary.entry-summary {
  position: static;
}

/* Tabs, up-sells, related — span both columns */
.woocommerce div.product .woocommerce-tabs,
.woocommerce .up-sells,
.woocommerce .related {
  grid-column: 1 / -1;
  margin-top: var(--sp-9);
}

@media (max-width: 768px) {
  .woocommerce div.product {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .woocommerce div.product .woocommerce-product-gallery,
  .woocommerce div.product .summary.entry-summary,
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce .up-sells,
  .woocommerce .related {
    grid-column: 1;
  }
}

/* Gallery images */
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}
.woocommerce div.product div.images .flex-viewport {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.woocommerce div.product div.images ol.flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}
.woocommerce div.product div.images ol.flex-control-thumbs li { margin: 0; }
.woocommerce div.product div.images ol.flex-control-thumbs img {
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  opacity: .75;
  transition: opacity .15s, border-color .15s;
  height: 80px !important;
  object-fit: cover;
}
.woocommerce div.product div.images ol.flex-control-thumbs img:hover,
.woocommerce div.product div.images ol.flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--blue);
}

/* Summary: title */
.woocommerce div.product .summary .product_title {
  font-size: var(--t-h3) !important;
  font-weight: 700 !important;
  color: var(--slate) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  margin: 12px 0 0 !important;
}

/* Summary: price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--mono) !important;
  font-size: 34px !important;
  font-weight: 500 !important;
  color: var(--slate) !important;
  margin: var(--sp-4) 0 !important;
  display: block !important;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins { text-decoration: none !important; }

/* Summary: short description */
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--muted);
  font-size: var(--t-small);
  line-height: 1.6;
  margin-bottom: var(--sp-5);
}

/* Add to cart form */
.woocommerce div.product form.cart {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--sp-6) !important;
}
.woocommerce div.product form.cart .qty {
  font-family: var(--mono);
  font-size: var(--t-small);
  width: 72px;
  height: 46px;
  text-align: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--text);
}
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button[type="submit"] {
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--sans) !important;
  font-size: var(--t-body) !important;
  font-weight: 600 !important;
  padding: 13px 26px !important;
  cursor: pointer !important;
  transition: background .15s !important;
  white-space: nowrap !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart button[type="submit"]:hover {
  background: var(--blue-hover) !important;
}

/* Product meta */
.woocommerce div.product .product_meta {
  font-size: 13px;
  color: var(--muted);
  margin-top: var(--sp-5);
  font-family: var(--mono);
  line-height: 1.8;
}
.woocommerce div.product .product_meta span { color: var(--slate); }
.woocommerce div.product .product_meta a { color: var(--blue); }

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding: 0 !important;
  margin: 0 0 -1px !important;
  list-style: none;
  background: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--muted);
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent;
  padding: 14px 18px;
  display: block;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--slate); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--blue) !important;
  border-bottom-color: var(--blue) !important;
  font-weight: 600 !important;
  background: none !important;
}
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
  padding: var(--sp-5) 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel h2 {
  font-size: var(--t-h5);
  margin-bottom: var(--sp-4);
}

/* Related / up-sell section headings */
.woocommerce .related > h2,
.woocommerce .up-sells > h2 {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-5);
}

/* ============================================================
   8. CART PAGE
   Cart shortcode renders inside page.php's .section > .wrap.
   Structure (inside .woocommerce):
     .woocommerce-notices-wrapper
     form.woocommerce-cart-form
     .cart-collaterals
   We lay these out in a two-column grid.
   ============================================================ */
.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: 1fr 360px;
  column-gap: var(--sp-7);
  row-gap: 0; /* no row-gap above the table; the empty notices row must not push it down */
  align-items: start;
}
.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart form.woocommerce-cart-form  { grid-column: 1; }
.woocommerce-cart .cart-collaterals           { grid-column: 2; }

/* --- Cart restyle (jun11): kill the dead gap above the table ---
   The notices wrapper sits in grid row 1 spanning both columns. When there
   is no notice it is effectively empty (often a whitespace-only node), but
   it still reserved ~96px of space above the table (its own margin-bottom +
   a line-box from the whitespace + the grid row-gap). Collapse it to zero
   when empty; real notices (element children) restore their own spacing. */
.woocommerce-cart .woocommerce-notices-wrapper {
  margin: 0;
  line-height: 0;
}
.woocommerce-cart .woocommerce-notices-wrapper > * { line-height: 1.5; }

@media (max-width: 980px) {
  .woocommerce-cart .woocommerce {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .woocommerce-cart form.woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals {
    grid-column: 1;
  }
}

/* Cart table */
.woocommerce-cart table.shop_table,
.woocommerce-cart table.shop_table_responsive {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden;
  background: var(--card) !important;
}
.woocommerce-cart table.shop_table th {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-alt) !important;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.woocommerce-cart table.shop_table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
  font-size: var(--t-small);
}
.woocommerce-cart table.shop_table tr:last-child td { border-bottom: none; }
.woocommerce-cart table.shop_table .product-name a {
  font-weight: 600;
  color: var(--slate);
  text-decoration: none;
}
.woocommerce-cart table.shop_table .product-name a:hover { color: var(--blue); }
.woocommerce-cart table.shop_table .product-price,
.woocommerce-cart table.shop_table .product-subtotal {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.woocommerce-cart table.shop_table td.product-quantity .qty {
  font-family: var(--mono);
  font-size: var(--t-small);
  width: 64px;
  height: 40px;
  text-align: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--text);
}
.woocommerce-cart table.shop_table td.product-remove a.remove {
  color: var(--muted) !important;
  font-size: 18px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: background .15s, color .15s;
}
.woocommerce-cart table.shop_table td.product-remove a.remove:hover {
  background: #fef2f2 !important;
  color: #c0392b !important;
}

/* --- Cart restyle (jun11): rebalance columns to the mockup proportions ---
   WC renders 6 columns (remove · thumbnail · name · price · qty · subtotal).
   The mockup reads as a single ~46% "Product" block (small thumb + name).
   Collapse remove + thumbnail to a small fixed footprint and give name the
   bulk, so Price/Qty/Subtotal no longer get shoved right by an oversized
   placeholder image. Scoped to ≥601px so WC's responsive stack on mobile
   (shop_table_responsive) is left untouched. */
@media (min-width: 601px) {
  /* table-layout:fixed makes the explicit column widths below authoritative.
     Under the default table-layout:auto the browser treats width as a mere
     hint and distributes by content, so 1%/84px/46% were being ignored
     (remove ballooned to ~225px, name shrank to ~110px).
     SCOPED to the line-items table only (inside the cart form) — the
     .cart_totals table is ALSO table.shop_table and must stay auto, else
     its label/value columns get squashed and clip "£13,000.00". */
  .woocommerce-cart form.woocommerce-cart-form table.shop_table {
    table-layout: fixed;
    width: 100%;
  }
  .woocommerce-cart table.shop_table th.product-remove,
  .woocommerce-cart table.shop_table td.product-remove {
    width: 44px;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }
  .woocommerce-cart table.shop_table th.product-thumbnail,
  .woocommerce-cart table.shop_table td.product-thumbnail { width: 84px; }
  /* Price/Qty/Subtotal need fixed room or "£5,000.00" clips under table-layout:fixed. */
  .woocommerce-cart table.shop_table th.product-price,
  .woocommerce-cart table.shop_table td.product-price,
  .woocommerce-cart table.shop_table th.product-subtotal,
  .woocommerce-cart table.shop_table td.product-subtotal { width: 120px; }
  .woocommerce-cart table.shop_table th.product-quantity,
  .woocommerce-cart table.shop_table td.product-quantity { width: 110px; }
  /* Name (Product) absorbs the remaining width. */
  .woocommerce-cart table.shop_table th.product-name,
  .woocommerce-cart table.shop_table td.product-name { width: auto; }
}
/* Small fixed thumbnail; reads cleanly with a real image, the WC placeholder,
   or none at all. */
.woocommerce-cart table.shop_table td.product-thumbnail img {
  width: 56px !important;
  height: 56px !important;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  display: block;
  margin: 0;
}

/* Cart actions bar */
.woocommerce-cart .actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--sp-5);
  align-items: center;
}
.woocommerce-cart .actions .coupon {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.woocommerce-cart .actions .coupon input#coupon_code {
  font-family: var(--sans);
  font-size: var(--t-small);
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--text);
  width: 180px;
  transition: border-color .15s;
}
.woocommerce-cart .actions .coupon input#coupon_code:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(34,113,177,.12);
}
/* Apply coupon — btn-line */
.woocommerce-cart .actions .button[name="apply_coupon"] {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 1px solid var(--blue) !important;
  color: var(--blue) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--sans) !important;
  font-size: var(--t-small) !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  transition: background .15s !important;
}
.woocommerce-cart .actions .button[name="apply_coupon"]:hover { background: var(--tint) !important; }
/* Update cart — btn-ghost */
.woocommerce-cart .actions .button[name="update_cart"] {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--slate) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--sans) !important;
  font-size: var(--t-small) !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  transition: border-color .15s !important;
}
.woocommerce-cart .actions .button[name="update_cart"]:hover { border-color: var(--slate) !important; }

/* Cart totals (right column) */
.woocommerce .cart-collaterals .cart_totals {
  width: 100%; /* override WC default .cart_totals{width:48%} so the card fills its 360px grid column */
  float: none; /* WC floats it; we're in a grid */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
}
.woocommerce .cart-collaterals .cart_totals h2 {
  font-size: var(--t-h5);
  color: var(--slate);
  margin-bottom: var(--sp-5);
}
.woocommerce .cart-collaterals .cart_totals table.shop_table {
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  width: 100%;
  border-collapse: collapse;
}
.woocommerce .cart-collaterals .cart_totals table.shop_table th,
.woocommerce .cart-collaterals .cart_totals table.shop_table td {
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  background: none !important;
  font-size: var(--t-small);
  color: #414b59;
}
.woocommerce .cart-collaterals .cart_totals table.shop_table th { text-align: left; font-weight: 400; }
.woocommerce .cart-collaterals .cart_totals table.shop_table td {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.woocommerce .cart-collaterals .cart_totals table.shop_table tr.order-total th,
.woocommerce .cart-collaterals .cart_totals table.shop_table tr.order-total td {
  border-bottom: none !important;
  border-top: 2px solid var(--slate) !important;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--slate);
  padding-top: 18px !important;
}

/* Proceed to checkout button */
.woocommerce .cart-collaterals .wc-proceed-to-checkout { margin-top: var(--sp-5); }
.woocommerce .cart-collaterals a.checkout-button,
.woocommerce .cart-collaterals .checkout-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--sans) !important;
  font-size: var(--t-body) !important;
  font-weight: 600 !important;
  padding: 14px 26px !important;
  cursor: pointer !important;
  transition: background .15s !important;
  text-decoration: none !important;
  width: 100% !important;
}
.woocommerce .cart-collaterals a.checkout-button:hover,
.woocommerce .cart-collaterals .checkout-button:hover {
  background: var(--blue-hover) !important;
}

/* ============================================================
   9. CHECKOUT PAGE
   Checkout shortcode renders inside page.php's .section > .wrap.
   form.woocommerce-checkout gets a 2-column grid:
     col-1: billing/shipping (#customer_details)
     col-2: order review + payment
   ============================================================ */
form.woocommerce-checkout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--sp-7);
  align-items: start;
}
form.woocommerce-checkout #customer_details {
  grid-column: 1;
  grid-row: 1 / span 4;
}
form.woocommerce-checkout #order_review_heading {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--t-h5);
  font-weight: 700;
  color: var(--slate);
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4) !important;
}
form.woocommerce-checkout #order_review {
  grid-column: 2;
  grid-row: 2 / span 3;
}

@media (max-width: 980px) {
  form.woocommerce-checkout {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  form.woocommerce-checkout #customer_details,
  form.woocommerce-checkout #order_review_heading,
  form.woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; }
}

/* Checkout section headings */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields,
.woocommerce-additional-fields { margin-bottom: var(--sp-5); }
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3,
.woocommerce-additional-fields > h3 {
  font-size: var(--t-h5);
  color: var(--slate);
  margin-bottom: var(--sp-4) !important;
}

/* Checkout col-1 / col-2 (WC two-col billing/shipping) */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  float: none;
  width: 100%;
}

/* --- Checkout restyle (jun11): card-wrap billing + 2-col field grid ---
   Mirrors the mockup's .card around billing details and its .form-grid
   (1fr 1fr, full-width rows span both). Maps WC's form-row-first/last/wide
   onto the mockup grid. */
.woocommerce-checkout #customer_details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 30px;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row.notes,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-wide {
  grid-column: 1 / -1;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first { grid-column: 1; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last  { grid-column: 2; }
@media (max-width: 600px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last { grid-column: 1; }
  .woocommerce-checkout #customer_details { padding: 20px; }
}

/* Form rows */
.woocommerce-checkout .form-row {
  margin-bottom: var(--sp-4) !important;
  padding: 0 !important;
}
.woocommerce-checkout .form-row label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 7px;
}
.woocommerce-checkout .form-row .required { color: #c0392b; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  font-family: var(--sans) !important;
  font-size: var(--t-small) !important;
  color: var(--text) !important;
  background: var(--card) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-sm) !important;
  padding: 11px 13px !important;
  width: 100% !important;
  transition: border-color .15s, box-shadow .15s;
}
/* select2 keeps the original <select> in the DOM (clipped, for accessibility).
   The width:100% above stretches that hidden select to full width, so its
   absolutely-positioned layout box extends off-screen and creates ~445px of
   horizontal page scroll on checkout. Re-clip it to 1px (more specific than the
   rule above, so it wins). The visible field is a separate .select2-container. */
.woocommerce-checkout .form-row select.select2-hidden-accessible {
  width: 1px !important;
  position: absolute !important;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
  outline: none !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(34,113,177,.12) !important;
}
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select {
  border-color: #c0392b !important;
}
.woocommerce-checkout .form-row.woocommerce-invalid label { color: #c0392b; }

/* Order review (right column) */
#order_review {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  position: sticky;
  top: 90px;
}
#order_review table.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--sp-3);
  font-size: var(--t-small);
}
#order_review table.woocommerce-checkout-review-order-table th,
#order_review table.woocommerce-checkout-review-order-table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  background: none;
  color: #414b59;
  font-size: var(--t-small);
}
#order_review table.woocommerce-checkout-review-order-table .product-total {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
#order_review table.woocommerce-checkout-review-order-table tfoot tr:last-child th,
#order_review table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
#order_review table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
  border-bottom: none;
  border-top: 2px solid var(--slate);
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--slate);
  padding-top: 18px;
}
#order_review table.woocommerce-checkout-review-order-table tfoot td {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Payment section */
#payment { margin-top: var(--sp-5); }
#payment ul.payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--card);
}
#payment ul.payment_methods li {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: var(--t-small);
  background: none !important;
}
#payment ul.payment_methods li:last-child { border-bottom: none; }
#payment ul.payment_methods li label { font-family: var(--sans); font-size: var(--t-small); color: var(--slate); }
#payment .payment_box {
  background: var(--bg-alt) !important;
  border: none !important;
  padding: 14px 18px !important;
  font-size: 13px;
  color: var(--muted);
  border-radius: 0 !important;
}
#payment .payment_box::before { display: none; }
#payment div.place-order { margin-top: var(--sp-4); }
#payment div.place-order #place_order {
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--sans) !important;
  font-size: var(--t-body) !important;
  font-weight: 600 !important;
  padding: 14px 26px !important;
  cursor: pointer !important;
  transition: background .15s !important;
  width: 100% !important;
  display: block !important;
}
#payment div.place-order #place_order:hover { background: var(--blue-hover) !important; }

/* ============================================================
   10. PAGINATION
   ============================================================ */
.woocommerce-pagination { text-align: center; margin-top: var(--sp-7); }
.woocommerce-pagination ul {
  display: inline-flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--t-small);
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.woocommerce-pagination ul li a:hover { border-color: var(--blue); color: var(--blue); }
.woocommerce-pagination ul li span.current {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.woocommerce-pagination ul li .prev,
.woocommerce-pagination ul li .next { font-size: 15px; }

/* ============================================================
   11. CMI CURRENCY GBP NOTE (cart + checkout totals)
   The switcher containers are suppressed via remove_action in
   functions.php. The "You will be charged in GBP" row is kept
   — it provides useful info without the broken local JS.
   ============================================================ */
.cmi-gbp-note-row { font-size: 12px; }
.cmi-gbp-note-row .cmi-gbp-note { color: var(--muted); font-family: var(--mono); }

/* ============================================================
   12. MISC / FLOATS CLEANUP
   ============================================================ */
.woocommerce-page .woocommerce::after,
.woocommerce::after,
.cart-collaterals::after {
  content: "";
  display: table;
  clear: both;
}
/* WC "loading" spinner colour */
.wc-block-components-spinner { border-top-color: var(--blue) !important; }

/* ============================================================
   13. PRICE ON APPLICATION (POA)
   ============================================================ */
/* "POA" placeholder where a price normally renders (loop + single). Inherits the
   surrounding .price typography; this only sets weight/colour so it reads as a
   deliberate label, not a number. */
.cmi-poa-price {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--slate);
}

/* Enquire button on the single product page. The loop variant already inherits
   the card .button (btn-line) style via its `button` class; this rule styles the
   single-product placement to match the solid primary single_add_to_cart_button. */
.woocommerce div.product .cmi-enquire-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--sans) !important;
  font-size: var(--t-body) !important;
  font-weight: 600 !important;
  padding: 13px 26px !important;
  margin-top: var(--sp-6) !important;
  cursor: pointer !important;
  transition: background .15s !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.woocommerce div.product .cmi-enquire-btn:hover {
  background: var(--blue-hover) !important;
}

/* ============================================================
   14. VARIABLE PRODUCT — variations selector (single product)
   The base form.cart (section 7) is a flex row tuned for SIMPLE
   products (qty + button). On a variable product form.cart also
   holds table.variations + .single_variation_wrap, so that flex
   row squashes them and the WC variation <select> renders at its
   raw ~17px height. Switch the variable form back to block flow,
   stack each attribute's label above its select, and style the
   select to match the theme's other dropdowns (section 5).
   ============================================================ */
.woocommerce div.product form.cart.variations_form { display: block; }

.woocommerce div.product form.cart table.variations {
  width: 100%;
  margin: 0 0 var(--sp-4);
  border-collapse: collapse;
}
.woocommerce div.product form.cart table.variations tr { display: block; margin-bottom: var(--sp-4); }
.woocommerce div.product form.cart table.variations th.label {
  display: block;
  width: auto;
  text-align: left;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 7px;
}
.woocommerce div.product form.cart table.variations td.value { display: block; padding: 0; }
.woocommerce div.product form.cart table.variations select {
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--text);
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  height: 46px;
  padding: 0 38px 0 13px;
  width: 100%;
  max-width: 340px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.woocommerce div.product form.cart table.variations select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(34,113,177,.12);
}
.woocommerce div.product form.cart .reset_variations {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 0;
}
/* qty + add-to-cart row that appears once a variation is chosen */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.woocommerce div.product .single_variation .price { margin: var(--sp-3) 0 0 !important; }