/*
Theme Name: Van Weelden Caves B2B
Description: Custom wholesale trade platform theme for Van Weelden Caves.
Author: Ilijad Hakimi
Author URI: https://ilijad.com/
Version: 0.1.0
Text Domain: vwc-b2b
Requires PHP: 8.1
Requires at least: 6.6
WC requires at least: 9.0
WC tested up to: 9.5
*/

:root {
  --vwc-ink: #14140F;
  --vwc-orange: #FF6A13;
  --vwc-orange-dark: #E2560F;
  --vwc-bg: #F7F6F3;
  --vwc-surface: #FDFCFA;
  --vwc-surface-alt: #F2F0EA;
  --vwc-border: #E4E1D8;
  --vwc-border-light: #EAE7DF;
  --vwc-text-muted: #54544A;
  --vwc-text-faint: #8C8C7C;
  --vwc-green: #1F7A5C;
  --vwc-red: #B3402F;
  --vwc-font-display: 'Space Grotesk', sans-serif;
  --vwc-font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --vwc-font-mono: 'IBM Plex Mono', monospace;
}

body {
  margin: 0;
  background: var(--vwc-bg);
  font-family: var(--vwc-font-body);
  color: var(--vwc-ink);
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }

a { color: var(--vwc-orange-dark); text-decoration: none; }
a:hover { color: var(--vwc-ink); }

input, select, textarea, button { font-family: inherit; font-size: inherit; color: inherit; }

/* WooCommerce core-generated markup we don't fully override (checkout fields, payment methods,
   order review table) — restyled in place so gateway JS (Mollie etc.) keeps its selectors. */
.woocommerce-checkout-review-order-table,
.shop_table { width: 100%; border-collapse: collapse; font-size: 14px; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td,
.shop_table th, .shop_table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--vwc-border-light); }
.woocommerce-checkout-review-order-table .order-total th,
.shop_table .order-total th { font-size: 15px; font-weight: 600; }
.woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount,
.shop_table .order-total .woocommerce-Price-amount { font-family: var(--vwc-font-display); font-size: 22px; font-weight: 700; }

.form-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--vwc-text-muted); }
.form-row input.input-text, .form-row select, .form-row textarea {
  width: 100%; border: 1px solid #DDD9CF; border-radius: 4px; padding: 11px 13px; margin-bottom: 14px; background: #fff;
}

ul.wc_payment_methods { list-style: none; margin: 16px 0 0; padding: 0; }
ul.wc_payment_methods li.wc_payment_method {
  border: 1.5px solid #DDD9CF; border-radius: 4px; padding: 13px 14px; margin-bottom: 9px; background: #fff;
}
ul.wc_payment_methods li.wc_payment_method label { font-size: 14px; font-weight: 600; }
ul.wc_payment_methods .payment_box { font-size: 13px; color: var(--vwc-text-muted); padding-top: 8px; }

/* Generic content pages (Terms, Privacy, Contact, Dropshipping, Shipping & freight) —
   shared container/typography so pages rendered via page.php and custom page templates
   stay visually consistent instead of each hardcoding its own padding/width/font sizes. */
.vwc-page-wrap { max-width: 960px; margin: 0 auto; padding: 52px 32px 60px; }
.vwc-page-title { font-family: var(--vwc-font-display); font-size: 38px; letter-spacing: -0.025em; margin: 0 0 8px; }
.vwc-page-intro,
.vwc-page-content > p:first-child {
  font-size: 15.5px; line-height: 1.6; color: var(--vwc-text-muted); max-width: 640px; margin: 0 0 30px;
}
.vwc-page-content { font-size: 15px; line-height: 1.7; }
.vwc-page-content h2 { font-family: var(--vwc-font-display); font-size: 24px; letter-spacing: -0.02em; margin: 34px 0 14px; }
.vwc-page-content h2:first-child { margin-top: 0; }
.vwc-page-content h3 { font-family: var(--vwc-font-display); font-size: 18px; letter-spacing: -0.01em; margin: 26px 0 10px; }
.vwc-page-content p { margin: 0 0 16px; }
.vwc-page-content ul, .vwc-page-content ol { margin: 0 0 16px; padding-left: 22px; }
.vwc-page-content li { margin-bottom: 6px; }
.vwc-page-content a { color: var(--vwc-orange-dark); }
.vwc-page-content strong { font-weight: 600; }

/* WooCommerce's own a.button.alt (2 classes) outranks our single-class .checkout-button
   selector, so its default purple (--wc-primary) was winning over our orange — !important
   needed to actually override it, not just set it and lose the specificity fight. */
#place_order, .checkout-button {
  width: 100% !important; border: 0 !important; background: var(--vwc-orange) !important; color: #fff !important;
  border-radius: 4px !important; padding: 16px !important; font-size: 15.5px !important; font-weight: 600 !important;
  cursor: pointer; margin-top: 12px;
}
#place_order:hover, .checkout-button:hover { background: var(--vwc-orange-dark) !important; color: #fff !important; }

.vwc-faq-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
}
.vwc-faq-icon::before,
.vwc-faq-icon::after {
  content: "";
  position: absolute;
  background: var(--vwc-text-faint);
  transition: transform 0.2s ease;
}
.vwc-faq-icon::before { /* horizontal bar — stays put, this is the "-" */
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}
.vwc-faq-icon::after { /* vertical bar — collapses away on open, leaving just "-" */
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%) scaleY(1);
}
.vwc-faq.is-open .vwc-faq-icon::after {
  transform: translateX(-50%) scaleY(0);
}

.vwc-faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.vwc-faq-panel-inner {
  overflow: hidden;
}
.vwc-faq.is-open .vwc-faq-panel {
  grid-template-rows: 1fr;
}

/* My Account area — WooCommerce core templates (login/register, dashboard, orders,
   addresses, edit-account) we don't fully override, given consistent padding/card
   treatment matching the rest of the site instead of rendering unstyled. */
.woocommerce-account main,
main .woocommerce {
  padding: 34px 32px 60px;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
  padding: 26px 22px;
  border-right: 1px solid var(--vwc-border-light);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin-bottom: 2px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: 10px 12px; border-radius: 4px; font-size: 14px; color: var(--vwc-ink);
  transition: background-color 0.15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--vwc-surface-alt);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--vwc-surface-alt); font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-content { padding: 26px 32px 60px; }

/* WooCommerce's own layout.css puts a clearfix (content:" "; display:table) on ::before/::after
   of .col2-set for its default float-based 2-col layout. Once we switch this container to
   display:grid, those two pseudo-elements become real grid items — 2 real columns + 2 clearfix
   boxes = a 4-cell grid instead of 2 columns. Kill them so the grid only lays out real content. */
.u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.u-columns.col2-set::before, .u-columns.col2-set::after { content: none; display: none; }
.u-columns.col2-set .u-column1,
.u-columns.col2-set .u-column2 {
  border: 1px solid var(--vwc-border); border-radius: 5px; background: #fff; padding: 24px;
  /* WooCommerce's own woocommerce-layout.css still ships float:left/right;width:48% for
     .col-1/.col-2 (leftover from before this container became a CSS grid) — since we never
     override width, it still shrinks each card to 48% of its grid cell, leaving an empty
     gap next to it. Two narrow cards + two gaps in one row reads as "4 columns" with real
     content only in slots 1 and 3. Neutralize both properties so each card fills its cell. */
  float: none !important; width: 100% !important;
}
.u-columns.col2-set h2 {
  font-family: var(--vwc-font-display); font-size: 20px; letter-spacing: -0.01em; margin: 0 0 18px;
}
.woocommerce-form-login .woocommerce-form-row,
.woocommerce-form-register .woocommerce-form-row,
.woocommerce-EditAccountForm .woocommerce-form-row,
.woocommerce-address-fields .form-row {
  margin-bottom: 14px;
}
.woocommerce-form-login button[type="submit"],
.woocommerce-form-register button[type="submit"],
.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-address-fields button[type="submit"] {
  border: 0; background: var(--vwc-orange); color: #fff; border-radius: 4px;
  padding: 12px 22px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color 0.15s ease;
}
/* WooCommerce's own woocommerce.css ships a default button:hover of #dcd7e3 (light
   purple-gray) that wins by default wherever we set a base color but never defined
   our own :hover — that's what was turning these orange buttons gray on hover. */
.woocommerce-form-login button[type="submit"]:hover,
.woocommerce-form-register button[type="submit"]:hover,
.woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-address-fields button[type="submit"]:hover {
  background: var(--vwc-orange-dark) !important; color: #fff !important;
}

.vwc-pdp-thumb { transition: border-color 0.15s ease; }
.vwc-pdp-thumb.is-active,
.vwc-pdp-thumb:hover { border-color: var(--vwc-ink) !important; }

/* Every WooCommerce-rendered product/PDP button (add-to-cart, or the "read more"
   link the MOQ plugin substitutes when a product needs its own page to set
   quantity) was falling back entirely to WC's stock lavender-gray button style —
   our theme never styled the .button/.single_add_to_cart_button classes at all. */
.woocommerce a.button.product_type_simple,
.woocommerce .single_add_to_cart_button,
.woocommerce #respond input#submit {
  background: var(--vwc-orange) !important; color: #fff !important; border: 0 !important;
  border-radius: 4px !important; font-weight: 600 !important; text-align: center;
  transition: background-color 0.15s ease;
}
.woocommerce a.button.product_type_simple:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--vwc-orange-dark) !important; color: #fff !important;
}
/* After a successful AJAX add-to-cart, WooCommerce's own JS injects a "View cart"
   link right after the button as an inline sibling — inside a fixed-width grid
   cell that overlaps/wraps into the button text. Force it onto its own line. */
.woocommerce a.added_to_cart.wc-forward {
  display: block !important; margin-top: 4px; font-size: 11.5px !important;
  text-align: center; white-space: nowrap;
}
/* The catalogue's "Toevoegen aan winkelwagen" is long enough in Dutch that WC's
   default button padding/font-size wraps it onto two lines, blowing out the row
   height — tighten padding/size and force one line so it matches "Lees meer". */
.vwc-list-item-row a.button.product_type_simple,
.vwc-archive-grid a.button.product_type_simple {
  padding: 9px 10px !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* PDP buy box: hide WooCommerce's own plain-text stock line (duplicates our
   styled "Availability" card above) and center everything — badge, quantity
   stepper, button — as a single tidy column instead of left-aligned clutter. */
.vwc-pdp-buybox .stock { display: none; }
.vwc-pdp-buybox {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
}
.vwc-pdp-buybox form.cart {
  display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%;
}
.vwc-pdp-buybox .single_add_to_cart_button {
  width: 100%; max-width: 280px; padding: 14px !important;
}
/* Same outlined-chip treatment as the "B2B · resellers only" hero badge, instead
   of the delivery plugin's own solid-orange blocks — used on the PDP
   (.pi-edd-product), the checkout order-review table (.pi-edd-cart) and the
   catalogue loop (.pi-edd-loop). */
.pi-edd-product, .pi-edd-cart, .pi-edd-loop {
  display: inline-flex !important; align-items: center;
  background: transparent !important; color: var(--vwc-ink) !important;
  border: 1px solid var(--vwc-ink) !important;
  padding: 5px 10px !important; border-radius: 4px !important;
  margin: 6px 0 !important;
  font-size: 10.5px !important; font-weight: 600 !important;
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
/* Secondary WC buttons (cart coupon apply / update cart) already carry their own
   muted inline background — just needed a hover state instead of WC's default. */
.woocommerce-cart-form button.button {
  transition: background-color 0.15s ease;
}
.woocommerce-cart-form button.button:hover {
  background: #E4E1D5 !important; color: var(--vwc-ink) !important;
}

/* Reusable hover treatment for our own custom (non-WooCommerce) buttons and
   cards, applied via classes added alongside each element's inline base style. */
.vwc-btn-primary, .vwc-btn-outline, .vwc-btn-ink {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.vwc-btn-primary:hover:not(:disabled) { background: var(--vwc-orange-dark) !important; color: #fff !important; }
.vwc-btn-outline:hover { background: var(--vwc-surface-alt) !important; border-color: var(--vwc-orange) !important; color: var(--vwc-ink) !important; }
.vwc-btn-ink:hover { background: #2A2A22 !important; color: #fff !important; }
.vwc-btn-primary:active, .vwc-btn-outline:active, .vwc-btn-ink:active { transform: scale(0.98); }
.vwc-view-toggle { transition: opacity 0.15s ease; }
.vwc-view-toggle:hover { opacity: 0.75; }

/* Quantity stepper (cart rows, PDP add-to-cart, quick order) — one consistent
   −/+ treatment everywhere, input and buttons all the same height so the input
   doesn't tower over its own step buttons. */
.vwc-qty-stepper, .vwc-qo-stepper { display: flex; align-items: center; gap: 6px; }
.vwc-qty-stepper .qty,
.vwc-qo-stepper .vwc-qo-qty-input {
  width: 40px; height: 30px; text-align: center; border: 1px solid #DDD9CF; border-radius: 4px;
  padding: 0 2px; font-size: 13.5px; box-sizing: border-box;
  -moz-appearance: textfield;
}
/* We have our own +/- buttons — the native number spinner is redundant clutter. */
.vwc-qty-stepper .qty::-webkit-outer-spin-button,
.vwc-qty-stepper .qty::-webkit-inner-spin-button,
.vwc-qo-stepper .vwc-qo-qty-input::-webkit-outer-spin-button,
.vwc-qo-stepper .vwc-qo-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.vwc-qty-step, .vwc-qo-step {
  width: 30px; height: 30px; flex: none; border: 1px solid #DDD9CF; background: #fff;
  border-radius: 4px; font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
  transition: background-color 0.15s ease; box-sizing: border-box;
}
.vwc-qty-step:hover, .vwc-qo-step:hover { background: var(--vwc-surface-alt); }

/* Remove (×) buttons — cart line items and quick-order rows share one look. */
.vwc-remove-btn, .woocommerce-cart-form .remove {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: 0; background: none; color: #9C9C8C !important;
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0; border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease;
  text-decoration: none !important;
}
.vwc-remove-btn:hover, .woocommerce-cart-form .remove:hover {
  background: #FEF4F2; color: var(--vwc-red) !important;
}

/* "Bekijk winkelwagen" (added_to_cart) as a real secondary button matching the
   primary add-to-cart button's shape, just in a neutral gray instead of orange. */
.woocommerce a.added_to_cart.wc-forward {
  display: inline-block !important; margin-top: 6px;
  background: #EFECE4 !important; color: var(--vwc-ink) !important;
  border-radius: 4px !important; padding: 9px 14px !important;
  font-size: 12.5px !important; font-weight: 600 !important;
  text-align: center; white-space: nowrap; text-decoration: none !important;
  transition: background-color 0.15s ease;
}
.woocommerce a.added_to_cart.wc-forward:hover { background: #E4E1D5 !important; }

/* Shipping method choices (cart totals) — plain browser radios + wall of text by
   default. Give each option its own selectable-looking row. */
.woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
.woocommerce-shipping-methods li {
  border: 1px solid var(--vwc-border); border-radius: 4px; padding: 12px 14px; margin-bottom: 8px;
  font-size: 14px; transition: border-color 0.15s ease;
}
.woocommerce-shipping-methods li:has(input:checked) { border-color: var(--vwc-orange); background: var(--vwc-surface-alt); }
.woocommerce-shipping-methods input[type="radio"] { margin-right: 8px; accent-color: var(--vwc-orange); width: 16px; height: 16px; vertical-align: middle; }

.vwc-card { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.vwc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20, 20, 15, 0.08);
  border-color: var(--vwc-orange) !important;
}

.vwc-list-item-row { transition: background-color 0.12s ease; }
.vwc-list-item-row:hover { background: var(--vwc-surface-alt); }

.vwc-archive-filters a, .vwc-footer nav a, .vwc-header-cats a {
  transition: color 0.15s ease;
}
.vwc-archive-filters a:hover, .vwc-footer nav a:hover, .vwc-header-cats a:hover {
  text-decoration: underline;
}

/* WooCommerce ships these with a font-icon (::before) absolutely positioned into padding
   we don't reserve — kill the icon entirely rather than fight its positioning, and drop the
   default purple top border so only our own left-accent color (by notice type) shows. */
.woocommerce-error, .woocommerce-message, .woocommerce-info {
  list-style: none; margin: 0 0 20px; padding: 14px 18px; border-radius: 4px; font-size: 14px;
  background: var(--vwc-surface-alt); border-top: 0; border-left: 3px solid var(--vwc-orange);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
}
.woocommerce-error::before, .woocommerce-error::after,
.woocommerce-message::before, .woocommerce-message::after,
.woocommerce-info::before, .woocommerce-info::after { content: none; display: none; }
.woocommerce-error { border-left-color: var(--vwc-red); }
.woocommerce-message { border-left-color: var(--vwc-green); }
.woocommerce-error li, .woocommerce-message li, .woocommerce-info li { margin: 0; padding: 0; }
.woocommerce-error .button, .woocommerce-message .button, .woocommerce-info .button { float: none; margin-left: auto; }

/* ==========================================================================
   Responsive — every layout above was built inline-style-first for desktop
   only. These breakpoints retarget the structural properties (grid columns,
   flex direction, fixed heights, font sizes) via classes added alongside the
   inline styles; !important is required to win over the inline declarations.
   Tablet: <=960px. Mobile: <=640px. Small phones: <=420px.
   ========================================================================== */

@media (max-width: 960px) {
  /* Header */
  .vwc-header-utility { height: auto !important; flex-wrap: wrap; padding: 8px 20px !important; gap: 10px 16px !important; }
  .vwc-header-utility-hide { display: none !important; }
  .vwc-header-main { flex-wrap: wrap; padding: 14px 20px !important; gap: 12px !important; }
  .vwc-header-search { flex-basis: 100%; order: 3; }
  .vwc-header-cats { padding: 0 20px !important; gap: 18px !important; }

  /* Footer */
  .vwc-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 26px 24px !important; }

  /* Front page */
  .vwc-hero { grid-template-columns: 1fr !important; }
  .vwc-hero-copy { padding: 40px 24px !important; }
  .vwc-hero-media { min-height: 320px !important; border-left: 0 !important; border-top: 1px solid var(--vwc-border-light); }
  .vwc-hero-title { font-size: 42px !important; }
  .vwc-pillars-grid { grid-template-columns: 1fr 1fr !important; }
  .vwc-pillars-grid > div { border-right: 0 !important; border-bottom: 1px solid var(--vwc-border-light); }
  .vwc-cats-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .vwc-bestsellers-grid { grid-template-columns: 1fr 1fr !important; }
  .vwc-become-grid { grid-template-columns: 1fr !important; }
  .vwc-become-grid > div { border-right: 0 !important; border-bottom: 1px solid var(--vwc-border-light); }
  .vwc-page-section, .vwc-hero-copy, .vwc-become-grid > div { padding-left: 24px !important; padding-right: 24px !important; }

  /* Catalogue */
  .vwc-archive-layout { grid-template-columns: 1fr !important; }
  .vwc-archive-filters { border-right: 0 !important; border-bottom: 1px solid var(--vwc-border-light); padding: 20px 24px !important; }
  .vwc-archive-main { padding: 20px 24px 48px !important; }
  .vwc-archive-grid { grid-template-columns: 1fr 1fr !important; }
  .vwc-list-header-row { display: none !important; }

  /* .vwc-list-item-row is a flat row of 7 sibling divs (image, title+SKU, carton,
     stock, price, RRP placeholder, add-to-cart) built for a 7-col desktop table.
     A 2-col grid where every row reuses the same narrow "image" column for text
     (carton/price) wraps short phrases like "Sign in for price" into 3-4 lines —
     just as broken as plain auto-flow, only rearranged. Fix: the image spans
     down the left as a tall thumbnail next to a stacked info column, then price
     and the CTA button break out to the FULL row width at the bottom where they
     have room to breathe. The 6th child (RRP — always just an unimplemented "—")
     carries no information at any size, so it's dropped rather than given a slot. */
  .vwc-list-item-row {
    grid-template-columns: 64px 1fr !important;
    grid-template-areas: "img title" "img carton" "img stock" "price price" "cart cart" !important;
    row-gap: 3px !important;
    column-gap: 14px !important;
    align-items: start !important;
  }
  .vwc-list-item-row > *:nth-child(1) { grid-area: img; align-self: start; }
  .vwc-list-item-row > *:nth-child(2) { grid-area: title; }
  .vwc-list-item-row > *:nth-child(3) { grid-area: carton; }
  .vwc-list-item-row > *:nth-child(4) { grid-area: stock; }
  .vwc-list-item-row > *:nth-child(5) { grid-area: price; margin-top: 10px; }
  .vwc-list-item-row > *:nth-child(6) { display: none !important; }
  .vwc-list-item-row > *:nth-child(7) { grid-area: cart; margin-top: 4px; }
  .vwc-list-item-row > *:nth-child(7) a, .vwc-list-item-row > *:nth-child(7) button { width: 100%; text-align: center; }

  /* Product page */
  .vwc-pdp-layout { grid-template-columns: 1fr !important; gap: 28px !important; }
  #vwc-pdp-main-image { height: 360px !important; }

  /* Quick order — same flat-row problem as the catalogue list above (sku, article,
     qty, net, line total, remove). Remove(×) is small enough to float in the
     corner via absolute position rather than claim its own grid track. */
  .vwc-qo-layout { grid-template-columns: 1fr !important; }
  .vwc-qo-header-row { display: none !important; }
  .vwc-qo-row {
    position: relative !important;
    grid-template-columns: 36px 1fr 1fr !important;
    grid-template-areas: "img sku sku" "img article article" "img qty net" "img line line" !important;
    row-gap: 4px !important; column-gap: 10px !important; align-items: start !important;
    padding-right: 34px !important;
  }
  .vwc-qo-row > *:nth-child(1) { grid-area: img; }
  .vwc-qo-row > *:nth-child(2) { grid-area: sku; }
  .vwc-qo-row > *:nth-child(3) { grid-area: article; }
  .vwc-qo-row > *:nth-child(4) { grid-area: qty; }
  .vwc-qo-row > *:nth-child(5) { grid-area: net; }
  .vwc-qo-row > *:nth-child(6) { grid-area: line; margin-top: 4px; }
  .vwc-qo-row > *:nth-child(7) { position: absolute !important; top: 12px; right: 10px; }

  /* Cart / checkout — cart row is the same flat-row shape (image, name+sku, qty,
     net, subtotal, remove). Same fix: image spans down the left, remove(×)
     floats top-right instead of claiming a track. */
  .vwc-cart-layout, .vwc-checkout-layout { grid-template-columns: 1fr !important; }
  .vwc-cart-header-row { display: none !important; }
  .vwc-cart-row {
    position: relative !important;
    grid-template-columns: 56px 1fr !important;
    grid-template-areas: "img name" "img qty" "price price" "subtotal subtotal" !important;
    row-gap: 4px !important; column-gap: 14px !important; align-items: start !important;
    padding-right: 34px !important;
  }
  .vwc-cart-row > *:nth-child(1) { grid-area: img; }
  .vwc-cart-row > *:nth-child(2) { grid-area: name; }
  .vwc-cart-row > *:nth-child(3) { grid-area: qty; }
  .vwc-cart-row > *:nth-child(4) { grid-area: price; margin-top: 8px; }
  .vwc-cart-row > *:nth-child(5) { grid-area: subtotal; text-align: left !important; }
  .vwc-cart-row > *:nth-child(6) { position: absolute !important; top: 14px; right: 10px; }

  /* Shipping & freight */
  .vwc-shipping-grid { grid-template-columns: 1fr !important; }

  /* My account */
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: 100% !important; }
  .woocommerce-account .woocommerce-MyAccount-navigation { border-right: 0 !important; border-bottom: 1px solid var(--vwc-border-light); padding: 16px 24px !important; }
  .woocommerce-account .woocommerce-MyAccount-content { padding: 20px 24px 48px !important; }
  .u-columns.col2-set { grid-template-columns: 1fr !important; }

  /* Generic content pages */
  .vwc-page-wrap { padding: 36px 24px 48px !important; }
}

@media (max-width: 640px) {
  body { font-size: 14px; }

  /* Header */
  .vwc-header-utility { padding: 8px 16px !important; }
  .vwc-header-main { padding: 12px 16px !important; }
  .vwc-header-logo { flex-direction: row !important; gap: 8px !important; }
  .vwc-header-actions a span:first-child { font-size: 12px !important; }
  .vwc-header-cats { padding: 0 16px !important; height: 42px !important; gap: 14px !important; font-size: 12.5px !important; }

  /* Footer */
  .vwc-footer { padding: 32px 20px 24px !important; }
  .vwc-footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .vwc-footer-bottom { flex-direction: column; align-items: flex-start !important; gap: 10px; }

  /* Front page */
  .vwc-hero-copy { padding: 32px 18px !important; }
  .vwc-hero-title { font-size: 32px !important; line-height: 1.05 !important; }
  .vwc-hero-media { min-height: 240px !important; }
  .vwc-hero-ctas { flex-direction: column; }
  .vwc-hero-ctas a { text-align: center; }
  .vwc-trust-grid { grid-template-columns: 1fr !important; }
  .vwc-pillars-grid { grid-template-columns: 1fr !important; }
  .vwc-cats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .vwc-bestsellers-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .vwc-page-section { padding: 32px 18px !important; }
  .vwc-section-head { flex-direction: column; align-items: flex-start !important; gap: 10px !important; }
  .vwc-section-head h2 { font-size: 26px !important; }
  .vwc-become-grid > div { padding: 32px 18px !important; }

  /* Catalogue */
  .vwc-archive-filters, .vwc-archive-main { padding-left: 18px !important; padding-right: 18px !important; }
  .vwc-archive-toolbar { flex-direction: column; align-items: flex-start !important; gap: 14px !important; }
  .vwc-archive-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .vwc-list-item-row { grid-template-columns: 52px 1fr !important; column-gap: 12px !important; padding: 10px 12px !important; }

  /* Product page */
  .vwc-pdp-layout { padding: 0 !important; }
  #vwc-pdp-main-image { height: 280px !important; }
  .vwc-pdp-thumbs { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
  .vwc-pdp-downloads { grid-template-columns: 1fr !important; }
  .vwc-pdp-info-grid { grid-template-columns: 1fr !important; }
  .vwc-pdp-spec-row { grid-template-columns: 1fr !important; gap: 2px !important; }

  /* Quick order */
  .vwc-qo-summary-bar { flex-direction: column; align-items: flex-start !important; gap: 12px !important; }

  /* Cart / checkout */
  .vwc-cart-coupon-bar { flex-direction: column; align-items: stretch !important; }
  .shop_table, .woocommerce-checkout-review-order-table { display: block; overflow-x: auto; white-space: nowrap; }
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last,
  .woocommerce-page form .form-row-first,
  .woocommerce-page form .form-row-last { width: 100% !important; float: none !important; }

  /* My account */
  .u-columns.col2-set { gap: 16px !important; }
  .u-columns.col2-set .u-column1, .u-columns.col2-set .u-column2 { padding: 18px !important; }

  /* Generic content pages */
  .vwc-page-wrap { padding: 28px 18px 40px !important; }
  .vwc-page-title { font-size: 28px !important; }
  .vwc-page-content h2 { font-size: 20px !important; }
}

@media (max-width: 420px) {
  .vwc-cats-grid, .vwc-bestsellers-grid, .vwc-archive-grid { grid-template-columns: 1fr !important; }
  .vwc-header-utility span:not(.vwc-header-utility-sep) { font-size: 11px !important; }
}