/* =========================================================
   Vampstrash — WooCommerce overrides
   Restyles WooCommerce's default markup to the brand without
   replacing its templates (so plugins keep working). Pairs with
   the hooks in inc/woocommerce.php.
   ========================================================= */

/* ---------- Shop main column ---------- */
.vs-shop-main { width: 100%; }
.woocommerce .vs-shop-main ul.products,
.vs-shop-main ul.products {
  display: grid;
  /* minmax(0,1fr) (not 1fr) so tracks can shrink below their content's
     intrinsic width — otherwise a product image/name forces the grid wider
     than the viewport and the page scrolls sideways on mobile. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap-y, 32px) var(--grid-gap-x, 24px);
  margin: 0;
  padding: 56px var(--gutter) 96px;
  max-width: var(--container);
  margin-inline: auto;
  list-style: none;
}
.vs-shop-layout.has-sidebar .vs-shop-main ul.products { padding-inline: 0; }
html[data-shop-columns="dense"] .vs-shop-main ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vs-shop-main ul.products::before,
.vs-shop-main ul.products::after { content: none; }
.vs-shop-main ul.products li.product {
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  float: none !important;
}

/* !important because the base + dense selectors above are more specific than a
   plain media-query selector; this guarantees the responsive column counts win.
   Mobile is capped at 2 columns. */
@media (max-width: 1100px) {
  .vs-shop-main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
  .vs-shop-main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 12px; }
}

/* ---------- Catalog ordering as a pill ---------- */
.woocommerce-ordering select,
.vs-shop-tools select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 9px 34px 9px 14px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%239c8b6f' d='M0 0h10L5 6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* ---------- Result count ---------- */
.vs-shop-result-meta .woocommerce-result-count { margin: 0; color: var(--muted); }

/* ---------- Single product ---------- */
.single-product div.product {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px var(--gutter) 96px;
  display: grid;
  grid-template-columns: minmax(420px, 560px) 1fr;
  gap: 64px;
  align-items: start;
}
/* WooCommerce core sets div.images / div.summary to `width:48%; float`, which
   (as grid items) made each only fill half its track — leaving the gallery
   image small and the summary squeezed. Force them to fill their grid tracks. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  width: 100%;
  float: none;
  margin: 0;
}
.single-product .woocommerce-product-gallery { max-width: 560px; width: 100%; }
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image { width: 100%; }
.single-product .woocommerce-product-gallery__image img { width: 100%; height: auto; }
.single-product .woocommerce-breadcrumb {
  grid-column: 1 / -1;
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.single-product .woocommerce-breadcrumb a { color: var(--muted); }
.single-product .woocommerce-breadcrumb a:hover { color: var(--accent); }

.single-product .woocommerce-product-gallery {
  position: relative;
  margin: 0;
}
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__wrapper { border-radius: var(--radius); overflow: hidden; }
.single-product .flex-control-thumbs { margin-top: 12px; gap: 8px; display: flex; flex-wrap: wrap; padding: 0; }
.single-product .flex-control-thumbs li { width: calc(25% - 6px); list-style: none; }
.single-product .flex-control-thumbs img { border-radius: var(--radius-sm); opacity: 0.7; transition: opacity .2s var(--ease); }
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover { opacity: 1; }

.single-product .summary.entry-summary {
  /* Scrolls naturally with the page — no sticky (it was overlapping the
     full-width tabs/related sections below on long pages). */
  position: static;
  margin: 0;
}
.single-product .product_title {
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: var(--display-weight);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0 0 24px;
}
.single-product .summary > .price {
  font-family: "Geist Mono", monospace;
  font-size: 24px;
  color: var(--text);
  margin: 0 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  display: block;
}
.single-product .summary > .price del { color: var(--muted-2); margin-right: 10px; }
.single-product .summary > .price ins { text-decoration: none; }
.single-product .woocommerce-product-details__short-description {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0 0 32px;
  max-width: 50ch;
}
.single-product .vs-product-stock { margin-bottom: 24px; }

/* Add-to-cart row */
.single-product form.cart {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin: 0 0 32px;
  flex-wrap: wrap;
}
.single-product form.cart .quantity {
  display: inline-flex;
  align-items: center;
  height: 56px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--bg-1);
  padding: 0 10px;
}
.single-product form.cart .quantity .qty,
.single-product form.cart .quantity input.qty {
  width: 60px;
  height: 100%;
  background: transparent;
  border: 0;
  text-align: center;
  color: var(--text);
  font-family: "Geist Mono", monospace;
  font-size: 16px;
  line-height: 1;
  -moz-appearance: textfield;
  appearance: textfield;
  opacity: 1;
}
.single-product form.cart .quantity input.qty:focus { outline: none; }
.single-product form.cart .quantity input.qty::placeholder { color: var(--text); opacity: 1; }
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.single-product form.cart button.single_add_to_cart_button {
  flex: 1;
  min-width: 120px;
  height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  background-color: var(--primary-bg);
  color: var(--primary-fg);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 0;
  cursor: pointer;
  transition: filter .2s var(--ease), transform .2s var(--ease);
}
.single-product form.cart button.single_add_to_cart_button:hover {
  background-color: var(--primary-bg);
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.single-product .product_meta {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.single-product .product_meta a { color: var(--text-dim); }

/* Variations table */
.single-product table.variations { margin: 0 0 20px; }
.single-product table.variations td, .single-product table.variations th { padding: 8px 0; vertical-align: middle; }
.single-product table.variations select {
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--text);
  padding: 10px 12px;
}

/* Tabs + related */
.single-product .woocommerce-tabs {
  grid-column: 1 / -1;
  margin-top: 64px;
}
/* NB: WooCommerce core styles these with `.woocommerce div.product
   .woocommerce-tabs ul.tabs li` — a higher-specificity selector than a plain
   `.single-product …`. We match that exact specificity here so the branded
   pills win and the default white tab chrome (bg, borders, pseudo corners) is
   fully reset. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 32px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  display: none;
  content: none;
  border: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  list-style: none;
  background: transparent;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
  content: none;
  border: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 9px 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  display: inline-block;
  background: transparent;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--text);
  border-color: var(--line-3);
}
/* The active <li> itself carries WooCommerce's white background + pseudo
   corners — clear them so only the red pill on the <a> shows. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: transparent;
  background-color: transparent;
  border: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
  display: none;
  content: none;
  border: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--primary-fg);
  background: var(--primary-bg);
  border-color: var(--primary-bg);
}
.single-product .woocommerce-tabs .panel { color: var(--text-dim); line-height: 1.7; }
.single-product .woocommerce-tabs .panel h2 { font-weight: var(--display-weight); letter-spacing: -0.02em; color: var(--text); }

.single-product .related,
.single-product .upsells {
  grid-column: 1 / -1;
  padding-top: 64px;
}
.single-product .related > h2,
.single-product .upsells > h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: var(--display-weight);
  letter-spacing: -0.025em;
  margin: 0 0 40px;
}
.single-product .related ul.products,
.single-product .upsells ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap-y, 32px) var(--grid-gap-x, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.single-product .related ul.products::before,
.single-product .related ul.products::after,
.single-product .upsells ul.products::before,
.single-product .upsells ul.products::after { content: none; }
.single-product .related ul.products li.product,
.single-product .upsells ul.products li.product { width: auto !important; min-width: 0; margin: 0 !important; float: none !important; }

@media (max-width: 980px) {
  .single-product div.product { grid-template-columns: 1fr; gap: 32px; }
  .single-product .summary.entry-summary { position: static; }
  .single-product .related ul.products,
  .single-product .upsells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---------- WooCommerce notices ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  /* extra left padding clears WooCommerce's ::before status icon */
  padding: 16px 20px 16px 52px;
  margin: 0 auto 24px;
  max-width: var(--container);
  list-style: none;
  font-size: 14px;
}
/* Reposition WooCommerce's icon font so the text no longer sits on top of it */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  left: 20px;
  top: 18px;
  margin: 0;
  color: var(--accent);
}
.woocommerce-error { border-left-color: var(--red); }
.woocommerce-error::before { color: var(--red); }
.woocommerce-message a.button,
.woocommerce-info a.button { margin-top: -2px; }
.woocommerce-message a.button,
.woocommerce-info a.button {
  background: var(--primary-bg);
  color: var(--primary-fg);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
}

/* ---------- Buttons (cart/checkout) ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt {
  background: var(--primary-bg);
  color: var(--primary-fg);
  border: 0;
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: filter .2s var(--ease), transform .2s var(--ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover { filter: brightness(1.08); }
.woocommerce a.button.wc-backward {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-2);
}

/* ---------- Cart & checkout tables ---------- */
.woocommerce table.shop_table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-collapse: separate;
}
.woocommerce table.shop_table th { color: var(--muted); font-family: "Geist Mono", monospace; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.woocommerce table.shop_table td { border-top: 1px solid var(--line); color: var(--text-dim); }
.woocommerce .cart_totals h2,
.woocommerce-checkout h3 { font-weight: var(--display-weight); letter-spacing: -0.02em; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .select2-container--default .select2-selection--single {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--text);
  padding: 12px 14px;
}

/* ---------- Off-canvas mini-cart drawer body ---------- */
.vs-cart-drawer .vs-cart-drawer-inner { display: flex; flex-direction: column; height: 100%; }
.vs-cart-drawer ul.woocommerce-mini-cart {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Image on the left; name + quantity stacked beside it (theme overrides
   cart/mini-cart.php to wrap the name + price in .vs-mini-info). */
.vs-cart-drawer ul.woocommerce-mini-cart li.mini_cart_item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 40px 16px 24px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.vs-cart-drawer ul.woocommerce-mini-cart li.mini_cart_item a.remove {
  position: absolute;
  top: 16px;
  right: 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}
.vs-cart-drawer ul.woocommerce-mini-cart li.mini_cart_item a.remove:hover { color: var(--red); }
.vs-cart-drawer .vs-mini-thumb { flex: 0 0 auto; display: block; width: 56px; }
.vs-cart-drawer .vs-mini-thumb img {
  width: 56px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  margin: 0;
  float: none;
}
.vs-cart-drawer .vs-mini-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.vs-cart-drawer .vs-mini-name {
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.vs-cart-drawer .vs-mini-name:hover { color: var(--accent); }
.vs-cart-drawer .vs-mini-info .quantity {
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  color: var(--muted);
}
.vs-cart-drawer .woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  padding: 20px 24px 8px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.vs-cart-drawer .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 24px 20px;
}
.vs-cart-drawer .woocommerce-mini-cart__buttons a {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 999px;
}
.vs-cart-drawer .woocommerce-mini-cart__buttons a:not(.checkout) {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-2);
}
.vs-cart-drawer .woocommerce-mini-cart__buttons a.checkout {
  background: var(--primary-bg);
  color: var(--primary-fg);
}
.vs-cart-drawer .vs-cart-foot-note { padding: 16px 24px 24px; }

/* ---------- Sold-out / featured badges on single ---------- */
.single-product .vs-single-badge {
  display: inline-block;
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--primary-bg);
  color: var(--primary-fg);
  margin-bottom: 16px;
}

/* =========================================================
   FIXES v1.2 — block cart/checkout, labels, responsiveness
   ========================================================= */

/* --- Block-based Cart & Checkout: stop the alignwide negative margins from
   blowing the layout full-viewport / shoving it to the left --- */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide,
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  width: auto;
}
.woocommerce-cart .vs-content,
.woocommerce-checkout .vs-content { max-width: var(--container); }
.wc-block-cart,
.wc-block-checkout { width: 100%; }

/* --- Checkout / cart block form fields: labels were `inherit` (too faint).
   Use the brand red, and keep the typed value high-contrast. --- */
.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-text-input label,
.wc-block-components-checkout-step__title,
.wc-block-components-totals-item__label {
  color: var(--primary-bg);
}
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-textarea,
.wc-block-components-select .components-form-token-field__input,
.wc-block-components-address-form input,
.wc-block-components-text-input.is-active label {
  color: var(--text);
}
.wc-block-components-text-input input::placeholder,
.wc-block-components-textarea::placeholder { color: var(--muted-2); }

/* --- WooCommerce responsiveness --- */
@media (max-width: 600px) {
  .single-product div.product { padding: 24px var(--gutter) 64px; gap: 28px; }
  .single-product form.cart { flex-direction: column; align-items: stretch; }
  .single-product form.cart .quantity { width: 100%; justify-content: center; height: 52px; }
  .single-product form.cart button.single_add_to_cart_button {
    width: 100%;
    min-width: 0;
    min-height: 60px;
    padding: 16px 24px;
    font-size: 16px;
  }
  .single-product .related ul.products,
  .single-product .upsells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error { padding-left: 46px; }
}

/* =========================================================
   FIXES v1.3
   ========================================================= */

/* --- .alt buttons (add to cart, place order) were keeping WooCommerce's
   default purple because core's `.button.alt` selector outranked ours. --- */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt {
  background-color: var(--primary-bg);
  color: var(--primary-fg);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
  background-color: var(--primary-bg);
  filter: brightness(1.1);
  color: var(--primary-fg);
}

/* --- Quantity field: when stock/quantity is fixed (e.g. 1 in stock),
   WooCommerce emits a hidden <input type="hidden" class="qty"> — don't render
   the empty bordered pill around it. --- */
.single-product form.cart .quantity.hidden,
.single-product form.cart .quantity:has(input.qty[type="hidden"]),
.single-product form.cart .quantity:has(input[type="hidden"]) {
  display: none;
}

/* --- Cart "Proceed to checkout" button (block + classic) → brand pill --- */
.wc-block-cart__submit-button,
a.wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-proceed-to-checkout a.checkout-button {
  background: var(--primary-bg) !important;
  background-color: var(--primary-bg) !important;
  color: var(--primary-fg) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 500;
  padding: 14px 28px;
  box-shadow: none !important;
  transition: filter .2s var(--ease);
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-proceed-to-checkout a.checkout-button:hover { filter: brightness(1.1); }

/* --- Checkout/cart block field labels: brand red, not faint inherit. The
   block defaults are stubborn, hence !important. Includes the country field. --- */
.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-text-input label,
.wc-block-components-text-input.is-active label,
.wc-block-components-combobox label,
.wc-block-components-country-input label,
.wc-block-components-state-input label,
.wc-block-components-checkout-step__title,
.wc-block-components-totals-item__label,
.woocommerce form .form-row label {
  color: var(--primary-bg) !important;
}
/* keep what the customer types high-contrast */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-combobox input,
.wc-block-components-country-input select,
.wc-block-components-state-input select { color: var(--text); }

/* --- "No products found" notice shouldn't hug the header --- */
.vs-shop-main .woocommerce-no-products-found,
.woocommerce-no-products-found { margin-top: 40px; margin-bottom: 40px; }

/* --- Once the layout stacks, the gallery + summary go full-width and centred
   so the image and copy sit equidistant from both edges. --- */
@media (max-width: 980px) {
  .single-product div.product {
    grid-template-columns: 1fr;
    justify-items: stretch;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .single-product .woocommerce-product-gallery { max-width: 100%; margin: 0 auto; }
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary { width: 100%; margin: 0; }
}

/* =========================================================
   FIXES v1.10 — basket card + WooCommerce plugin compatibility
   ========================================================= */

/* --- Basket: put the products column in a dark card (matches the editorial
   info-section look). Covers both the block cart and the classic shortcode. --- */
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .wp-block-woocommerce-cart-items-block {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 24px;
}
.woocommerce-cart .woocommerce-cart-form table.shop_table {
  border: 0;
  border-radius: 0;
  background: transparent;
}
/* Velvet: deepen the card to match html[data-theme="velvet"] .vs-info-section */
html[data-theme="velvet"] .woocommerce-cart .woocommerce-cart-form,
html[data-theme="velvet"] .woocommerce-cart .wp-block-woocommerce-cart-items-block {
  background: #160707;
  border-color: rgba(244, 230, 203, 0.16);
  box-shadow: 0 1px 0 rgba(244, 230, 203, 0.04) inset;
}
@media (max-width: 768px) {
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .wp-block-woocommerce-cart-items-block { padding: 8px 16px; }
}

/* --- On-sale + rating + price-filter widgets (common shop plugins) --- */
.woocommerce span.onsale {
  background: var(--primary-bg);
  color: var(--primary-fg);
  border-radius: 999px;
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  min-height: auto;
  min-width: auto;
  padding: 5px 10px;
  line-height: 1;
}
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before,
.woocommerce .star-rating::before { color: var(--accent); }
.woocommerce .price_slider_wrapper .ui-widget-content { background: var(--line-2); border-radius: 999px; }
.woocommerce .ui-slider .ui-slider-range { background: var(--accent); }
.woocommerce .ui-slider .ui-slider-handle { background: var(--accent); border: 0; border-radius: 999px; }

/* --- YITH compatibility (wishlist table, quick view modal, compare) --- */
#yith-quick-view-modal .yith-wcqv-main { background: var(--bg-1); color: var(--text); }
.woocommerce table.wishlist_table { border-collapse: separate; }
.yith-wcwl-add-to-wishlist { margin-top: 0; }
.woocommerce .yith-wcwl-wishlistexistsbrowse a,
.woocommerce .yith-wcwl-add-button a { color: var(--text-dim); }

/* --- WooCommerce blocks (filters, all-products, mini-cart block) --- */
.wc-block-components-product-price,
.wc-block-grid__product-price,
.wc-block-components-product-title { color: var(--text); }
.wc-block-components-button:not(.is-link) {
  background: var(--primary-bg);
  color: var(--primary-fg);
  border-radius: 999px;
}
.wc-blocks-filter-wrapper .wc-block-components-checkbox__input,
.wc-block-checkout__terms input { accent-color: var(--accent); }

/* =========================================================
   FIXES v1.11 — basket line-total inside the card (mobile)
   ========================================================= */

/* Ensure the card's inner padding wins over WooCommerce block defaults (which
   load after the theme CSS) — high specificity + !important. And reset any row
   bleed margins that would cancel the padding and push the line total to the
   card border. */
.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-items-block,
.woocommerce-cart .wp-block-woocommerce-cart-items-block { padding: 12px 24px !important; }
.woocommerce-cart .wc-block-cart-items,
.woocommerce-cart .wc-block-cart-items__row { width: 100%; box-sizing: border-box; }
.woocommerce-cart .wc-block-cart-items__row,
.woocommerce-cart .wc-block-cart-item__total { margin-left: 0 !important; margin-right: 0 !important; }

/* The line total (absolutely positioned by the block to the row's right edge)
   now lands inside the padded card. Keep it on one line, no extra right inset. */
.woocommerce-cart .wc-block-cart-item__total,
.woocommerce-cart .wc-block-cart-item__prices {
  right: 0;
  padding-right: 0;
  text-align: right;
  white-space: nowrap;
  max-width: 100%;
}
.woocommerce-cart .wc-block-cart-item__total .wc-block-components-formatted-money-amount {
  font-family: "Geist Mono", monospace;
  color: var(--accent);
}

@media (max-width: 768px) {
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-items-block,
  .woocommerce-cart .wp-block-woocommerce-cart-items-block { padding: 10px 16px !important; }
  /* Let the details column shrink so the total can't push past the padding. */
  .woocommerce-cart .wc-block-cart-items__row,
  .woocommerce-cart .wc-block-cart-item__product,
  .woocommerce-cart .wc-block-cart-item__quantity { min-width: 0; }
  /* Belt-and-braces: a small inset on the (absolute) total so it can never
     touch the card border even if the block changes its row margins. */
  .woocommerce-cart .wc-block-cart-item__total { right: 4px; }
  /* Classic cart fallback */
  .woocommerce-cart table.cart td.product-subtotal { text-align: right; }
}

/* =========================================================
   FIXES v1.12 — checkout in dark cards (match the basket)
   ========================================================= */
.woocommerce-checkout .wc-block-checkout__form,
.woocommerce-checkout .wc-block-checkout__sidebar,
.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-sizing: border-box;
}
.woocommerce-checkout .wc-block-checkout__sidebar { align-self: flex-start; }

html[data-theme="velvet"] .woocommerce-checkout .wc-block-checkout__form,
html[data-theme="velvet"] .woocommerce-checkout .wc-block-checkout__sidebar,
html[data-theme="velvet"] .woocommerce-checkout .wp-block-woocommerce-checkout-totals-block,
html[data-theme="velvet"] .woocommerce-checkout #customer_details,
html[data-theme="velvet"] .woocommerce-checkout #order_review {
  background: #160707;
  border-color: rgba(244, 230, 203, 0.16);
  box-shadow: 0 1px 0 rgba(244, 230, 203, 0.04) inset;
}

/* The order-summary lines read on the dark card */
.woocommerce-checkout .wc-block-components-order-summary-item,
.woocommerce-checkout .wc-block-components-totals-item { color: var(--text-dim); }
.woocommerce-checkout .wc-block-components-totals-footer-item { color: var(--text); }

@media (max-width: 980px) {
  .woocommerce-checkout .wc-block-checkout__form,
  .woocommerce-checkout .wc-block-checkout__sidebar,
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review { padding: 18px; }
}

/* =========================================================
   FIXES v1.13 — tighten nested padding on mobile cart/checkout
   so the dark cards use the available width better.
   ========================================================= */
@media (max-width: 768px) {
  /* The page content shell: less top/side padding on mobile */
  .woocommerce-cart .vs-content,
  .woocommerce-checkout .vs-content { padding-top: 32px; padding-bottom: 56px; }

  /* Cards (basket items, checkout form + order summary): slimmer inner padding */
  .woocommerce-checkout .wc-block-checkout__form,
  .woocommerce-checkout .wc-block-checkout__sidebar,
  .woocommerce-checkout .wp-block-woocommerce-checkout-totals-block,
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review { padding: 16px !important; }

  /* Order-summary collapsible header + totals rows shouldn't add big insets */
  .woocommerce-checkout .wc-block-components-panel__button,
  .woocommerce-checkout .wc-block-components-checkout-order-summary__content { padding-left: 0; padding-right: 0; }
  .woocommerce-checkout .wc-block-components-totals-item { padding-left: 0; padding-right: 0; }

  /* Field rows go full width (no awkward half-width on small screens) */
  .woocommerce-checkout .wc-block-components-text-input,
  .woocommerce-checkout .wc-block-components-address-form__field { width: 100%; }
}

@media (max-width: 480px) {
  .woocommerce-checkout .wc-block-checkout__form,
  .woocommerce-checkout .wc-block-checkout__sidebar,
  .woocommerce-checkout .wp-block-woocommerce-checkout-totals-block,
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review { padding: 14px !important; }
}