/* ============================================================================
   VS Print Studio — PREMIUM WOOCOMMERCE
   ----------------------------------------------------------------------------
   Top-tier polish for the SHOP / category archive and the SINGLE PRODUCT page,
   built entirely on the existing dark-glass brand tokens (see variables.css).

   Load order: enqueued AFTER variables.css, products.css, content.css and
   enhancements.css, so equal-specificity rules here win by source order and
   COMPLEMENT those files instead of duplicating them.

   Scope guard: every card / grid rule is scoped to the archive + single-product
   body classes (woocommerce-shop, tax-product_cat, tax-product_tag,
   post-type-archive-product, single-product). The home "best sellers" grid
   (.vsps-best-sellers-grid) is deliberately NOT matched, so this file never
   fights the homepage layout.

   Sections
     0. Astra native sticky ATC kill (safety)
     1. Shop toolbar — result count + ordering (re-enabled + dark styling)
     2. Shop / archive + related — responsive product grid
     3. Premium product cards (image plate, title, price, pill button, sale badge)
    3B. Single product — kill Astra blog entry-header (dup title + comment meta)
     4. Single product — breadcrumb
     5. Single product — page layout v2 (header offset, 2-col grid, ordered summary, buy-box card)
     6. Single product — gallery v3 (photo tile + all thumbnails, no sticky)
     7. Single product — add-to-cart polish (complements content.css) + selects
     8. Single product — reassurance readability + divider
     9. Single product — tabs as pills + panel
    10. Single product — related / up-sell headings
    11. Single product — product meta
   11B. Variation swatches (colour dots + size/style pills)
    12. Reduced-motion safeguard
    13. Cart — item cards + sticky order summary
    14. Checkout — form cards + order summary card
    15. Order received (thank-you)
   ========================================================================== */


/* ----------------------------------------------------------------------------
   0. KILL ASTRA'S NATIVE STICKY ADD-TO-CART (safety)
   Astra's own sticky bar renders as a giant white band over the dark theme.
   The theme's intended mobile sticky is .vs21-floating-cart-bar (floating-cta.css),
   which is left untouched. (Also enforced in products.css; repeated here so the
   premium layer is self-contained.)
   -------------------------------------------------------------------------- */
.ast-sticky-add-to-cart,
.ast-sticky-add-to-cart.bottom,
.ast-sticky-add-to-cart--active {
  display: none !important;
}


/* ----------------------------------------------------------------------------
   0B. KILL ASTRA'S ARCHIVE-DESCRIPTION HAIRLINE
   Astra prints `.ast-archive-description` (shop / category header) with a pale
   grey bottom border (#d1d5db) — a hard, ugly light line across the dark theme,
   inset by the container gutter. Remove it; keep the category title + copy.
   -------------------------------------------------------------------------- */
body.woocommerce-shop .ast-archive-description,
body.tax-product_cat .ast-archive-description,
body.tax-product_tag .ast-archive-description,
body.post-type-archive-product .ast-archive-description {
  border-bottom: 0 !important;
  padding-bottom: 4px;
  margin-bottom: 6px;
}


/* ----------------------------------------------------------------------------
   1. SHOP TOOLBAR — RESULT COUNT + ORDERING
   products.css hides these with `display:none !important`. A top-tier archive
   benefits from a visible, on-brand sort control, so we re-enable and style
   them for the dark UI. To hide them again, delete this section.
   -------------------------------------------------------------------------- */
body.woocommerce-shop .woocommerce-result-count,
body.woocommerce-shop .woocommerce-ordering,
body.tax-product_cat .woocommerce-result-count,
body.tax-product_cat .woocommerce-ordering,
body.tax-product_tag .woocommerce-result-count,
body.tax-product_tag .woocommerce-ordering,
body.post-type-archive-product .woocommerce-result-count,
body.post-type-archive-product .woocommerce-ordering {
  display: block !important;
  float: none; /* drop WooCommerce's default float so they stack cleanly */
}

body.woocommerce-shop .woocommerce-result-count,
body.tax-product_cat .woocommerce-result-count,
body.tax-product_tag .woocommerce-result-count,
body.post-type-archive-product .woocommerce-result-count {
  margin: 2px 0 10px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--vs-text-muted, #94a9bf);
}

body.woocommerce-shop .woocommerce-ordering,
body.tax-product_cat .woocommerce-ordering,
body.tax-product_tag .woocommerce-ordering,
body.post-type-archive-product .woocommerce-ordering {
  margin: 0 0 16px;
}

/* Dark, readable select (shared caret + surface used again for variations). */
.woocommerce-ordering select.orderby,
body.single-product .summary .variations select,
body.single-product .summary select.orderby {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  max-width: 100%;
  padding: 11px 42px 11px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--vs-text, #fff);
  background-color: var(--vs-bg-soft, #0b1830);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2346c2ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  border: 1px solid var(--vs-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-sm, 12px);
  box-shadow: var(--vs-shadow, 0 18px 50px rgba(0, 0, 0, 0.28));
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}
.woocommerce-ordering select.orderby:hover,
body.single-product .summary .variations select:hover {
  border-color: rgba(70, 194, 255, 0.4);
}
.woocommerce-ordering select.orderby:focus,
body.single-product .summary .variations select:focus {
  outline: none;
  border-color: var(--vs-primary-soft, #46c2ff);
  box-shadow: 0 0 0 3px rgba(19, 127, 236, 0.28);
}
/* Native option list can't inherit dark text on every OS — force legibility. */
.woocommerce-ordering select.orderby option,
body.single-product .summary .variations select option {
  color: #0b1830;
  background: #fff;
}


/* ----------------------------------------------------------------------------
   2. SHOP / ARCHIVE + RELATED — RESPONSIVE PRODUCT GRID
   products.css sets a global 2-col grid; we keep 2 on mobile and step up on
   larger screens. Scoped to archive + single-product product lists only, so
   the homepage .vsps-best-sellers-grid (higher specificity) is never affected.
   -------------------------------------------------------------------------- */
body.woocommerce-shop ul.products,
body.tax-product_cat ul.products,
body.tax-product_tag ul.products,
body.post-type-archive-product ul.products,
body.single-product ul.products {
  gap: 14px;
}

/* Tablet: 3 across */
@media (min-width: 768px) {
  body.woocommerce-shop ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.post-type-archive-product ul.products,
  body.single-product ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

/* Desktop: 4 across */
@media (min-width: 1024px) {
  body.woocommerce-shop ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.post-type-archive-product ul.products,
  body.single-product ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}


/* ----------------------------------------------------------------------------
   3. PREMIUM PRODUCT CARDS
   Applied to archive cards AND single-product related / up-sell / recently
   viewed cards (so the card style is reused per the brief). Home best-sellers
   are intentionally excluded.
   -------------------------------------------------------------------------- */
body.woocommerce-shop ul.products li.product,
body.tax-product_cat ul.products li.product,
body.tax-product_tag ul.products li.product,
body.post-type-archive-product ul.products li.product,
body.single-product ul.products li.product {
  position: relative; /* anchor for the sale badge */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%),
    var(--vs-bg-soft, #0b1830);
  border: 1px solid var(--vs-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-md, 18px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
  transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.25s ease;
}

body.woocommerce-shop ul.products li.product:hover,
body.tax-product_cat ul.products li.product:hover,
body.tax-product_tag ul.products li.product:hover,
body.post-type-archive-product ul.products li.product:hover,
body.single-product ul.products li.product:hover {
  transform: translateY(-4px);
  border-color: rgba(70, 194, 255, 0.4);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.4), var(--vs-glow, 0 0 24px rgba(19, 127, 236, 0.22));
}

/* Image sits on a light near-white plate so white apparel / tumblers stay
   visible against the dark card. Square frame keeps the grid even. */
body.woocommerce-shop ul.products li.product img,
body.tax-product_cat ul.products li.product img,
body.tax-product_tag ul.products li.product img,
body.post-type-archive-product ul.products li.product img,
body.single-product ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 12px;
  margin: 0 0 12px;
  background: #f3f6fb; /* functional light plate (not a brand color) */
  border-radius: var(--radius-sm, 12px);
  box-sizing: border-box;
}
/* Card lift is the interaction; keep the plated image steady (no inner zoom). */
body.woocommerce-shop ul.products li.product:hover img,
body.tax-product_cat ul.products li.product:hover img,
body.tax-product_tag ul.products li.product:hover img,
body.post-type-archive-product ul.products li.product:hover img,
body.single-product ul.products li.product:hover img {
  transform: none;
}

/* The WooCommerce loop link wraps image + title + price — keep it on the dark
   card (no plate) so title/price stay readable. */
body.woocommerce-shop ul.products li.product a.woocommerce-LoopProduct-link,
body.tax-product_cat ul.products li.product a.woocommerce-LoopProduct-link,
body.tax-product_tag ul.products li.product a.woocommerce-LoopProduct-link,
body.post-type-archive-product ul.products li.product a.woocommerce-LoopProduct-link,
body.single-product ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
  text-decoration: none;
}

/* Title — clamp to 2 lines, reserve the space so card bottoms line up. */
body.woocommerce-shop ul.products li.product h2,
body.tax-product_cat ul.products li.product h2,
body.tax-product_tag ul.products li.product h2,
body.post-type-archive-product ul.products li.product h2,
body.single-product ul.products li.product h2,
body.woocommerce-shop ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
body.tax-product_tag ul.products li.product .woocommerce-loop-product__title,
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.single-product ul.products li.product .woocommerce-loop-product__title {
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--vs-text, #fff);
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price — bright brand accent. */
body.woocommerce-shop ul.products li.product .price,
body.tax-product_cat ul.products li.product .price,
body.tax-product_tag ul.products li.product .price,
body.post-type-archive-product ul.products li.product .price,
body.single-product ul.products li.product .price {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--vs-primary-soft, #46c2ff);
  text-align: left;
}
body.woocommerce-shop ul.products li.product .price del,
body.tax-product_cat ul.products li.product .price del,
body.tax-product_tag ul.products li.product .price del,
body.post-type-archive-product ul.products li.product .price del,
body.single-product ul.products li.product .price del {
  color: var(--vs-text-muted, #94a9bf);
  font-weight: 600;
  font-size: 0.85rem;
  margin-right: 6px;
}
body.woocommerce-shop ul.products li.product .price ins,
body.tax-product_cat ul.products li.product .price ins,
body.tax-product_tag ul.products li.product .price ins,
body.post-type-archive-product ul.products li.product .price ins,
body.single-product ul.products li.product .price ins {
  text-decoration: none;
}

/* CTA pill — products.css hides card buttons; we reveal them as an inviting,
   always-in-layout pill (ghost at rest, filled primary on hover) pinned to the
   bottom so every card ends on the same line. `!important` is required only to
   beat the products.css `display:none !important`. */
body.woocommerce-shop ul.products li.product .button,
body.tax-product_cat ul.products li.product .button,
body.tax-product_tag ul.products li.product .button,
body.post-type-archive-product ul.products li.product .button,
body.single-product ul.products li.product .button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: auto 0 0; /* push to the bottom of the flex card */
  padding: 11px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--vs-primary-soft, #46c2ff);
  background: rgba(70, 194, 255, 0.08);
  border: 1px solid var(--vs-border, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, background 0.25s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}
body.woocommerce-shop ul.products li.product:hover .button,
body.tax-product_cat ul.products li.product:hover .button,
body.tax-product_tag ul.products li.product:hover .button,
body.post-type-archive-product ul.products li.product:hover .button,
body.single-product ul.products li.product:hover .button,
body.woocommerce-shop ul.products li.product .button:hover,
body.tax-product_cat ul.products li.product .button:hover,
body.tax-product_tag ul.products li.product .button:hover,
body.post-type-archive-product ul.products li.product .button:hover,
body.single-product ul.products li.product .button:hover,
body.woocommerce-shop ul.products li.product .button:focus-visible,
body.tax-product_cat ul.products li.product .button:focus-visible,
body.tax-product_tag ul.products li.product .button:focus-visible,
body.post-type-archive-product ul.products li.product .button:focus-visible,
body.single-product ul.products li.product .button:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, var(--vs-primary, #137fec) 0%, var(--vs-primary-soft, #46c2ff) 100%);
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(19, 127, 236, 0.36);
}
/* Post-add "View cart" link stays a quiet secondary link, not a big pill. */
body.woocommerce ul.products li.product a.added_to_cart {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--vs-primary-soft, #46c2ff);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* On touch / mobile the CTA is filled by default (always inviting). */
@media (max-width: 767px) {
  body.woocommerce-shop ul.products li.product .button,
  body.tax-product_cat ul.products li.product .button,
  body.tax-product_tag ul.products li.product .button,
  body.post-type-archive-product ul.products li.product .button,
  body.single-product ul.products li.product .button {
    color: #fff;
    background: linear-gradient(135deg, var(--vs-primary, #137fec) 0%, var(--vs-primary-soft, #46c2ff) 100%);
    border-color: transparent;
  }
}

/* Sale badge — small pill, top-left of the image. */
body.woocommerce-shop ul.products li.product .onsale,
body.tax-product_cat ul.products li.product .onsale,
body.tax-product_tag ul.products li.product .onsale,
body.post-type-archive-product ul.products li.product .onsale,
body.single-product ul.products li.product .onsale {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  right: auto !important;
  margin: 0 !important;
  min-width: 0;
  min-height: 0;
  padding: 4px 11px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
  color: #fff;
  background: linear-gradient(135deg, var(--vs-primary, #137fec), var(--vs-primary-strong, #0f6fd1));
  border: none;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(19, 127, 236, 0.42);
  z-index: 2;
}


/* ----------------------------------------------------------------------------
   3B. SINGLE PRODUCT — KILL ASTRA'S BLOG ENTRY-HEADER (duplicate title + meta)
   Astra renders its blog single-post header on the product CPT. That prints a
   SECOND <h1> (a duplicate of WooCommerce's .product_title) plus a stray
   "Leave a Comment / <date>" post-meta line above the whole layout. WooCommerce
   already supplies the real title inside .summary, so the theme header is pure
   noise here — hiding it also resolves the two-<h1> SEO problem. Scoped to
   single-product only, so blog posts keep their header untouched.
   -------------------------------------------------------------------------- */
body.single-product .content-area .entry-header {
  display: none !important;
}
body.single-product .entry-meta,
body.single-product .comments-link,
body.single-product .entry-header .posted-on {
  display: none !important;
}


/* ----------------------------------------------------------------------------
   4. SINGLE PRODUCT — BREADCRUMB
   Base styling lives in enhancements.css; here we just seat it tidily above the
   title on the product page and tune the separators.
   -------------------------------------------------------------------------- */
body.single-product .woocommerce-breadcrumb {
  margin: 6px 0 14px;
  letter-spacing: 0.01em;
}


/* ----------------------------------------------------------------------------
   5. SINGLE PRODUCT — PAGE LAYOUT v2
   (a) Header offset: the site header is position:fixed (83px) and nothing
       reserved that space on WooCommerce pages, so content started UNDER it
       (cut-off gallery, clipped titles, hidden "Login" heading). Reserve it.
   (b) Two-column grid: gallery on the left, ordered summary on the right.
   (c) The title is visible again (products.css hid every .entry-title).
   -------------------------------------------------------------------------- */
body.single-product main#main,
body.woocommerce-cart main#main,
body.woocommerce-checkout main#main,
body.woocommerce-account main#main,
body.woocommerce-order-received main#main {
  padding-top: 112px !important;
}
/* Phones: the header is position:sticky (in the flow, 69px) below 768px and only
   position:fixed above it, so it already pushes the content down - a small
   breathing gap is all that is needed. */
@media (max-width: 767px) {
  body.single-product main#main,
  body.woocommerce-cart main#main,
  body.woocommerce-checkout main#main,
  body.woocommerce-account main#main,
  body.woocommerce-order-received main#main {
    padding-top: 18px !important;
  }
}

/* Cap the content width on very wide monitors so the layout stays composed. */
@media (min-width: 1200px) {
  body.single-product #primary {
    max-width: 1320px !important;
    margin-inline: auto !important;
    float: none !important;
  }
}

body.single-product div.product::before,
body.single-product div.product::after {
  display: none !important; /* clearfix pseudo-elements would become grid items */
}
body.single-product .summary .product_title.entry-title {
  display: block !important; /* products.css hides .woocommerce-page .entry-title */
}

@media (min-width: 992px) {
  body.single-product div.product {
    display: grid !important;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    column-gap: 44px;
    row-gap: 40px;
    align-items: start;
  }
  body.single-product div.product > .woocommerce-product-gallery {
    grid-column: 1;
    grid-row: 1;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    position: relative !important; /* NOT sticky - see section 6 for why */
    align-self: start;
  }
  body.single-product div.product > .summary.entry-summary {
    grid-column: 2;
    grid-row: 1;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  body.single-product div.product > *:not(.woocommerce-product-gallery):not(.summary):not(script):not(style) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 991px) {
  body.single-product div.product > .woocommerce-product-gallery,
  body.single-product div.product > .summary.entry-summary {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.single-product div.product > .woocommerce-product-gallery {
    margin: 0 0 22px !important;
  }
}

/* --- Summary: an ordered grid (title block -> price -> copy -> buy box) --- */
body.single-product .summary.entry-summary {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 14px;
  align-content: start;
}
body.single-product .summary.entry-summary > * {
  grid-column: 1 / -1;
  order: 6;
  min-width: 0;
}
body.single-product .summary > .woocommerce-breadcrumb {
  order: 1;
  margin: 0 0 14px !important;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}
body.single-product .summary > .single-product-category {
  order: 2;
  display: block;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--vs-primary-soft, #46c2ff);
}
body.single-product .summary > .product_title {
  order: 3;
  margin: 0 0 12px !important;
  font-size: clamp(1.55rem, 2.2vw, 2.15rem) !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.16;
  color: var(--vs-text, #fff);
  text-wrap: balance;
}
body.single-product .summary > p.price {
  order: 4;
  grid-column: 1 !important;
  margin: 0 !important;
  line-height: 1;
  align-self: end;
}
body.single-product .summary > .ast-shipping-text {
  order: 4;
  grid-column: 2 !important;
  align-self: end;
  margin: 0 0 4px;
  font-size: 0.95rem;
  color: var(--vs-text-soft, #c6d4e3);
}
body.single-product .summary > #payment-method-message {
  order: 5;
  margin: 10px 0 0 !important;
}
body.single-product .summary > .woocommerce-product-details__short-description {
  order: 6;
  margin: 14px 0 0 !important;
  max-width: 62ch;
  line-height: 1.65;
  color: var(--vs-text-soft, #c6d4e3);
}
body.single-product .summary > .ast-stock-detail {
  order: 7;
  margin: 10px 0 0 !important;
  font-size: 0.88rem;
  font-weight: 700;
}
body.single-product .summary > form.cart { order: 8; }
body.single-product .summary > .wcpay-express-checkout-wrapper { order: 9; margin-top: 14px; }
body.single-product .summary > .product_meta { order: 10; }
body.single-product .summary > fieldset.ast-single-product-payments {
  order: 11;
  margin: 14px 0 0;
  padding: 6px 14px 12px;
  border: 1px solid var(--vs-border, rgba(255, 255, 255, 0.14));
  border-radius: 14px;
}

/* --- Buy box: ONE card that holds options + personalise + qty + add to cart --- */
body.single-product .summary form.cart {
  margin: 18px 0 0;
  padding: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--vs-border, rgba(255, 255, 255, 0.14));
  border-radius: 22px;
  box-shadow: var(--vs-shadow, 0 14px 40px rgba(0, 0, 0, 0.25));
}
/* Variation rows: label over swatches; "Clear" tucked at the end of the label row.
   (Astra's inline css sets .variations tr{display:flex} with higher specificity.) */
body.single-product .summary form.cart table.variations { margin: 0 0 4px !important; }
body.single-product .summary form.cart table.variations tr {
  display: flex !important;
  flex-direction: column;
  gap: 9px;
  position: relative;
  margin: 0 0 16px !important;
}
body.single-product .summary form.cart table.variations th.label { width: auto !important; padding: 0 !important; }
body.single-product .summary form.cart table.variations td.value { width: 100% !important; padding: 0 !important; }
body.single-product .summary form.cart table.variations a.reset_variations {
  position: absolute;
  right: 0;
  top: 0;
  margin: 0 !important;
  font-size: 0.78rem;
  color: var(--vs-text-muted, #94a9bf);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* CTA cluster: "Personalize It" full width, then quantity + Add to cart. */
body.single-product .summary form.cart:not(.variations_form),
body.single-product .summary form.cart .woocommerce-variation-add-to-cart {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
body.single-product .summary form.cart .vspd-launcher { grid-column: 1 / -1; order: 1; }
body.single-product .summary form.cart .vspd-launcher .vspd-open-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, rgba(19, 127, 236, 0.3), rgba(70, 194, 255, 0.16));
  border: 1px solid rgba(70, 194, 255, 0.55);
  transition: background 0.2s ease, transform 0.2s ease;
}
body.single-product .summary form.cart .vspd-launcher .vspd-open-btn:hover {
  background: rgba(19, 127, 236, 0.45);
  transform: translateY(-1px);
}
body.single-product .summary form.cart .quantity {
  order: 2;
  display: inline-flex;
  align-items: center;
  height: 52px;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
body.single-product .summary form.cart .quantity .minus,
body.single-product .summary form.cart .quantity .plus {
  width: 42px;
  height: 100%;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 1.2rem;
  cursor: pointer;
}
body.single-product .summary form.cart .quantity input.qty {
  width: 46px;
  height: 100%;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: none !important;
  -moz-appearance: textfield;
}
body.single-product .summary form.cart .single_add_to_cart_button {
  order: 3;
  width: 100%;
  height: 52px;
  margin: 0 !important;
}
body.single-product .summary form.cart .vsps-reassure {
  grid-column: 1 / -1;
  order: 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 6px 0 0;
}
body.single-product .summary form.cart .vsps-quote-nudge {
  grid-column: 1 / -1;
  order: 5;
  margin: 6px 0 0;
  font-size: 0.86rem;
  text-align: center;
  color: var(--vs-text-soft, #c6d4e3);
}
@media (max-width: 480px) {
  body.single-product .summary form.cart { padding: 16px; border-radius: 18px; }
  body.single-product .summary form.cart .vsps-reassure { grid-template-columns: 1fr; }
}


/* ----------------------------------------------------------------------------
   6. SINGLE PRODUCT — GALLERY v3
   Dark glass card: a white photo tile on top and EVERY thumbnail under it.
   Nothing in here is pinned or scrolls inside a box — the whole gallery scrolls
   with the page, so the description that follows can never slide over it and no
   photo is hidden. (v2 pinned the card with position:sticky: in CSS Grid a
   sticky item is bounded by the whole grid container, so it stayed pinned
   THROUGH the tabs and FAQ and the description text ran over it. Its thumbnail
   rail also had overflow:hidden — WooCommerce's
   ".woocommerce-js div.product div.images .flex-control-thumbs" outranks a plain
   override — so only ~5 of 11 photos could ever be reached.)
   The tile keeps a fixed height budget (--vs-gallery-h) so the product is still
   fully visible on the first screen; photos are letterboxed (object-fit:contain)
   on white so the studio backgrounds blend in.
   flexslider measures its slide width BEFORE this layout settles; custom.js
   triggers a re-measure after load (otherwise the slide stays too wide).
   -------------------------------------------------------------------------- */
body.single-product .woocommerce-product-gallery {
  --vs-gallery-h: clamp(360px, 64vh, 640px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 14px;
  margin: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035));
  border: 1px solid var(--vs-border, rgba(255, 255, 255, 0.14));
  border-radius: var(--radius-lg, 26px);
  box-shadow: var(--vs-shadow, 0 18px 50px rgba(0, 0, 0, 0.28));
}

/* Photo tile (flexslider wraps the slides in .flex-viewport). */
body.single-product .woocommerce-product-gallery .flex-viewport,
body.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
  order: 1;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  height: var(--vs-gallery-h) !important; /* beats the inline height flexslider writes */
  max-height: none !important;
  margin: 0 !important; /* WooCommerce adds margin-bottom:1em under the viewport */
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(6, 17, 31, 0.06);
}
body.single-product .woocommerce-product-gallery .flex-viewport > .woocommerce-product-gallery__wrapper,
body.single-product .woocommerce-product-gallery ul.slides,
body.single-product .woocommerce-product-gallery ul.slides > li {
  height: 100% !important;
}
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
  margin: 0;
  height: 100%;
}
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
body.single-product .woocommerce-product-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 0;
}
/* Size the photo to the VISIBLE tile (container query unit), not to flexslider's
   slide: flexslider writes each slide's width at init, before this layout exists,
   so the slide can be far wider than the tile and push the photo out of view
   (blank tile). cqw resolves against .flex-viewport whatever the slide width is. */
@supports (width: 1cqw) {
  body.single-product .woocommerce-product-gallery .flex-viewport { container-type: inline-size; }
  body.single-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image > a > img {
    width: 100cqw;
    max-width: none;
    margin: 0;
  }
}

/* Thumbnails — base (stacked layout: phones and tablets): one swipeable strip.
   WooCommerce's ".woocommerce-js div.product div.images .flex-control-thumbs" sets
   overflow:hidden and 25%-wide floated <li>s with a higher specificity than a
   plain selector, so every property that matters here is !important. */
body.single-product .woocommerce-product-gallery .flex-control-thumbs {
  order: 2;
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 0 4px !important;
  list-style: none;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
body.single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar { height: 6px; }
body.single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}
body.single-product .woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 68px !important;
  width: 68px !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  list-style: none;
  scroll-snap-align: start;
}
body.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
  display: block;
  width: 100% !important;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid transparent;
  background: #fff;
  opacity: 0.9 !important; /* colour-critical product shots: dim only slightly (WooCommerce ships .5 with higher specificity) */
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
body.single-product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
  opacity: 1 !important;
  transform: translateY(-1px);
}
body.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
  opacity: 1 !important;
  border-color: var(--vs-primary, #137fec);
  box-shadow: 0 0 0 1px var(--vs-primary, #137fec);
}

/* Thumbnails — desktop (two-column layout): a grid, so ALL of them are visible
   and the page scroll simply carries you past them. */
@media (min-width: 992px) {
  body.single-product .woocommerce-product-gallery .flex-control-thumbs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none;
  }
  body.single-product .woocommerce-product-gallery .flex-control-thumbs li {
    flex: none !important;
    width: auto !important;
    min-width: 0;
  }
}
@media (min-width: 1200px) {
  body.single-product .woocommerce-product-gallery .flex-control-thumbs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Zoom / lightbox trigger — small circular glass button in the tile corner. */
body.single-product .woocommerce-product-gallery__trigger {
  top: 28px !important;
  right: 28px !important;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 17, 31, 0.72);
  border: 1px solid var(--vs-border, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.2s ease, background 0.2s ease;
  z-index: 5;
}
body.single-product .woocommerce-product-gallery__trigger:hover {
  transform: scale(1.06);
  background: rgba(19, 127, 236, 0.85);
}

/* Stacked layout: the tile is a square that fits the screen width. */
@media (max-width: 991px) {
  body.single-product .woocommerce-product-gallery {
    --vs-gallery-h: min(calc(100vw - 56px), 520px);
  }
}
@media (max-width: 767px) {
  body.single-product .woocommerce-product-gallery {
    gap: 10px;
    padding: 10px;
  }
  body.single-product .woocommerce-product-gallery__trigger { top: 20px !important; right: 20px !important; }
}

/* Single-product sale flash — match the card badge language. */
body.single-product .woocommerce-product-gallery .onsale,
body.single-product div.product .onsale {
  position: absolute;
  top: 18px;
  left: 18px;
  right: auto;
  margin: 0;
  min-width: 0;
  min-height: 0;
  padding: 5px 13px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--vs-primary, #137fec), var(--vs-primary-strong, #0f6fd1));
  border: none;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(19, 127, 236, 0.42);
  z-index: 3;
}


/* ----------------------------------------------------------------------------
   7. SINGLE PRODUCT — ADD-TO-CART POLISH + VARIATIONS
   content.css already styles form.cart, .quantity input.qty and
   .single_add_to_cart_button (gradient + hover + active). We only ADD polish:
   focus states, a quieter quantity field hover, and dark variation selects.
   -------------------------------------------------------------------------- */
body.single-product .summary form.cart .quantity input.qty {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
body.single-product .summary form.cart .quantity input.qty:hover {
  border-color: rgba(70, 194, 255, 0.4);
}
body.single-product .summary form.cart .quantity input.qty:focus {
  outline: none;
  border-color: var(--vs-primary-soft, #46c2ff);
  box-shadow: 0 0 0 3px rgba(19, 127, 236, 0.26);
}
/* Hide the number-spinner so the field matches the custom stepper look. */
body.single-product .summary form.cart .quantity input.qty::-webkit-outer-spin-button,
body.single-product .summary form.cart .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.single-product .summary form.cart .quantity input.qty {
  -moz-appearance: textfield;
}
/* Clear focus ring on the primary button (adds to content.css, no conflict). */
body.single-product .summary form.cart .single_add_to_cart_button:focus-visible {
  outline: 3px solid var(--vs-primary-soft, #46c2ff);
  outline-offset: 3px;
}

/* Variations table — legible labels, tidy rows. */
body.single-product .summary .variations {
  margin: 8px 0 16px;
  border: none;
}
body.single-product .summary .variations th,
body.single-product .summary .variations td {
  padding: 8px 0;
  border: none;
  background: transparent;
  vertical-align: middle;
}
body.single-product .summary .variations th.label label,
body.single-product .summary .variations td.label label {
  margin: 0;
  font-weight: 700;
  color: var(--vs-text, #fff);
}
body.single-product .summary .variations select {
  width: 100%;
  margin: 4px 0;
}
body.single-product .summary .reset_variations {
  display: inline-block;
  margin: 4px 0;
  font-size: 0.82rem;
  color: var(--vs-text-muted, #94a9bf);
}
body.single-product .summary .reset_variations:hover {
  color: var(--vs-primary-soft, #46c2ff);
}
/* Selected-variation price block. */
body.single-product .summary .woocommerce-variation-price .price {
  color: var(--vs-primary-soft, #46c2ff);
}


/* ----------------------------------------------------------------------------
   8. SINGLE PRODUCT — REASSURANCE READABILITY + DIVIDER
   Base grid/cards live in enhancements.css. Brief asks for a clearer read:
   subtext bumped from muted to --vs-text-soft, plus a light divider above.
   -------------------------------------------------------------------------- */
body.single-product .vsps-reassure {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--vs-border, rgba(255, 255, 255, 0.12));
}
body.single-product .vsps-reassure__item {
  align-items: center;
  background: var(--vs-bg-card, rgba(255, 255, 255, 0.06));
  border-color: var(--vs-border, rgba(255, 255, 255, 0.12));
  transition: border-color 0.2s ease, transform 0.2s ease;
}
body.single-product .vsps-reassure__item:hover {
  border-color: rgba(70, 194, 255, 0.35);
  transform: translateY(-2px);
}
body.single-product .vsps-reassure__copy strong {
  font-size: 0.9rem;
  color: var(--vs-text, #fff);
}
/* The key fix: subtext was --vs-text-muted (faint); make it clearly legible. */
body.single-product .vsps-reassure__copy span {
  font-size: 0.8rem;
  color: var(--vs-text-soft, #c6d4e3);
}


/* ----------------------------------------------------------------------------
   9. SINGLE PRODUCT — TABS AS PILLS + PANEL
   Resets WooCommerce's default tab chrome (underline + triangle pseudo-els) and
   restyles the nav as pills. Uses the `.woocommerce div.product` prefix so it
   matches WooCommerce core specificity and wins by source order.
   -------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  display: none; /* remove default bottom rule */
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 999px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none; /* remove default rounded-corner triangles */
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 9px 18px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--vs-text-soft, #c6d4e3);
  background: var(--vs-glass, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--vs-border, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  text-decoration: none;
  transition: color 0.2s ease, background 0.25s ease, border-color 0.2s ease;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--vs-text, #fff);
  border-color: rgba(70, 194, 255, 0.4);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: #fff;
  background: linear-gradient(135deg, var(--vs-primary, #137fec) 0%, var(--vs-primary-soft, #46c2ff) 100%);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(19, 127, 236, 0.34);
}

/* Panel */
.woocommerce div.product .woocommerce-tabs .panel,
body.single-product .woocommerce-Tabs-panel {
  margin: 0;
  color: var(--vs-text-soft, #c6d4e3);
  line-height: 1.75;
}
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3,
body.single-product .woocommerce-Tabs-panel h2,
body.single-product .woocommerce-Tabs-panel h3 {
  color: var(--vs-text, #fff);
  font-weight: 800;
  letter-spacing: -0.01em;
}
body.single-product .woocommerce-Tabs-panel p,
body.single-product .woocommerce-Tabs-panel li {
  color: var(--vs-text-soft, #c6d4e3);
}
/* Additional-info attribute table. */
body.single-product .woocommerce-Tabs-panel table.shop_attributes th,
body.single-product .woocommerce-Tabs-panel table.shop_attributes td {
  border-color: var(--vs-border, rgba(255, 255, 255, 0.12));
  color: var(--vs-text-soft, #c6d4e3);
}
body.single-product .woocommerce-Tabs-panel table.shop_attributes th {
  color: var(--vs-text, #fff);
}


/* ----------------------------------------------------------------------------
   10. SINGLE PRODUCT — RELATED / UP-SELL HEADINGS
   Cards themselves are handled in section 3. Here we style the section titles.
   -------------------------------------------------------------------------- */
body.single-product .related.products,
body.single-product .up-sells.upsells {
  margin-top: 40px;
  clear: both;
}
body.single-product .related.products > h2,
body.single-product .up-sells.upsells > h2 {
  margin: 0 0 16px;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--vs-text, #fff);
}


/* ----------------------------------------------------------------------------
   11. SINGLE PRODUCT — PRODUCT META
   -------------------------------------------------------------------------- */
body.single-product .product_meta {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--vs-border, rgba(255, 255, 255, 0.12));
  font-size: 0.82rem;
  line-height: 1.9;
  color: var(--vs-text-muted, #94a9bf);
}
body.single-product .product_meta > span {
  display: block;
}
body.single-product .product_meta .sku_wrapper,
body.single-product .product_meta .posted_in,
body.single-product .product_meta .tagged_as {
  color: var(--vs-text-muted, #94a9bf);
}
body.single-product .product_meta a {
  color: var(--vs-text-soft, #c6d4e3);
  text-decoration: none;
}
body.single-product .product_meta a:hover {
  color: var(--vs-primary-soft, #46c2ff);
}


/* ----------------------------------------------------------------------------
   11B. VARIATION SWATCHES (colour dots + size/style pills)
   variation-swatches.js hides each native <select> and injects .vsv-swatches.
   Colour attributes render round dots (named-colour dictionary); everything
   else renders rounded pills. The <select> stays in the DOM (visually hidden)
   and is driven via jQuery change, so WooCommerce's variation engine is intact.
   The attribute table is flattened to clean stacked rows (label over swatches).
   -------------------------------------------------------------------------- */
/* Keep the real <select> accessible to WooCommerce but out of sight. */
body.single-product select.vsv-hidden-select {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Flatten the variations table (row layout itself lives in section 5). */
body.single-product table.variations,
body.single-product table.variations tbody,
body.single-product table.variations td,
body.single-product table.variations th {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
}
body.single-product table.variations th.label {
  margin: 0 0 2px;
}
body.single-product table.variations th.label label {
  margin: 0;
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vs-text-soft, #c6d4e3);
}
/* Selected-value caption printed next to the attribute label. */
body.single-product .vsv-selected {
  margin-left: 8px;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--vs-primary-soft, #46c2ff);
}

/* Swatch row. */
body.single-product .vsv-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}
body.single-product .vsv-swatch {
  cursor: pointer;
  border: 0;
  background: transparent;
  font: inherit;
  padding: 0;
  line-height: 1;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* ---- Colour dots ---- */
body.single-product .vsv-color .vsv-dot {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--vsv-c, #ccc);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(6, 17, 31, 0.28), 0 4px 10px rgba(0, 0, 0, 0.28);
}
body.single-product .vsv-color .vsv-dot.is-light {
  border-color: rgba(6, 17, 31, 0.18);
  box-shadow: 0 0 0 1px rgba(6, 17, 31, 0.20), inset 0 0 0 1px rgba(6, 17, 31, 0.06);
}
/* Unknown colour name → uniform neutral dot with a subtle "?" (keeps the row
   tidy; the real name is in the tooltip + the "Colour: X" caption). */
body.single-product .vsv-color .vsv-dot.vsv-unknown {
  background:
    repeating-linear-gradient(45deg, #cfd5dc 0 6px, #b9c0c9 6px 12px);
  border-color: rgba(6, 17, 31, 0.18);
}
body.single-product .vsv-color .vsv-dot.vsv-unknown::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #3f454d;
}
body.single-product .vsv-color .vsv-dot:hover {
  transform: translateY(-1px) scale(1.06);
}
body.single-product .vsv-color .vsv-dot.is-active {
  box-shadow: 0 0 0 2px var(--vs-bg, #06111f), 0 0 0 4px var(--vs-primary-soft, #46c2ff);
}
/* Unavailable colour → soft strike-through. */
body.single-product .vsv-color .vsv-dot.is-disabled::before {
  content: "";
  position: absolute;
  left: 50%; top: -3px; bottom: -3px;
  width: 2px;
  background: rgba(255, 90, 90, 0.85);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
}

/* ---- Pills (size / style / unknown colours) ---- */
body.single-product .vsv-pill .vsv-swatch,
body.single-product .vsv-swatch.vsv-as-pill {
  min-width: 46px;
  padding: 10px 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid var(--vs-border, rgba(255, 255, 255, 0.16));
  color: var(--vs-text, #eaf2fb);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  text-align: center;
}
body.single-product .vsv-pill .vsv-swatch:hover,
body.single-product .vsv-swatch.vsv-as-pill:hover {
  border-color: var(--vs-primary-soft, #46c2ff);
  background: rgba(70, 194, 255, 0.10);
  transform: translateY(-1px);
}
body.single-product .vsv-pill .vsv-swatch.is-active,
body.single-product .vsv-swatch.vsv-as-pill.is-active {
  border-color: var(--vs-primary, #137fec);
  background: rgba(19, 127, 236, 0.20);
  color: #fff;
  box-shadow: 0 0 0 1px var(--vs-primary, #137fec);
}

/* ---- Disabled (any swatch) ---- */
body.single-product .vsv-swatch.is-disabled {
  opacity: 0.32;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
body.single-product .vsv-swatch.is-disabled:hover {
  transform: none;
}

/* Clear link tidied under the swatches. */
body.single-product .reset_variations {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--vs-text-muted, #94a9bf);
}


/* ----------------------------------------------------------------------------
   13. CART — item cards + sticky order summary
   (Shared notices / fields / buttons live in enhancements.css.)
   -------------------------------------------------------------------------- */
body.woocommerce-cart wc-order-attribution-inputs { display: none; }

@media (min-width: 992px) {
  body.woocommerce-cart .entry-content .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    column-gap: 32px;
    align-items: start;
  }
  body.woocommerce-cart .entry-content .woocommerce > * { grid-column: 1 / -1; }
  body.woocommerce-cart .entry-content .woocommerce > form.woocommerce-cart-form { grid-column: 1; grid-row: 2; }
  /* .cart-collaterals dissolves so its totals card can sit in the right column. */
  body.woocommerce-cart .cart-collaterals { display: contents; }
  body.woocommerce-cart .cart-collaterals .cart_totals {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: 104px;
  }
  body.woocommerce-cart .cart-collaterals .cross-sells { grid-column: 1 / -1; grid-row: 3; }
}

/* Empty cart */
body.woocommerce-cart p.cart-empty {
  justify-content: center;
  padding: 44px 24px !important;
  border-left-width: 1px !important;
  border-radius: 20px !important;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}
body.woocommerce-cart .return-to-shop { margin: 8px 0 0; text-align: center; }
body.woocommerce-cart .return-to-shop a.button {
  min-height: 52px;
  padding: 15px 30px;
  border: 0 !important;
  background: linear-gradient(135deg, #137fec, #46c2ff) !important;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(19, 127, 236, 0.4);
}

/* Items: each row is a soft card on a grid (thumb | name+price | qty | subtotal | remove) */
body.woocommerce-cart table.shop_table.cart,
body.woocommerce-cart table.shop_table.cart tbody {
  display: block;
  width: 100%;
  margin: 0;
  border: 0 !important;
  background: transparent !important;
}
body.woocommerce-cart table.shop_table.cart thead { display: none; }
body.woocommerce-cart table.cart tr.cart_item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto 104px 36px;
  grid-template-areas:
    "thumb name qty sub rm"
    "thumb price qty sub rm";
  column-gap: 18px;
  row-gap: 2px;
  align-items: center;
  margin: 0 0 12px;
  padding: 14px 16px;
  background: var(--vsx-card);
  border: 1px solid var(--vsx-line);
  border-radius: 18px;
}
body.woocommerce-cart table.cart tr.cart_item > td {
  display: block;
  width: auto;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-align: left;
}
body.woocommerce-cart table.cart tr.cart_item > td::before { display: none !important; }
body.woocommerce-cart table.cart td.product-thumbnail { grid-area: thumb; }
body.woocommerce-cart table.cart td.product-name { grid-area: name; align-self: end; }
body.woocommerce-cart table.cart td.product-price { grid-area: price; align-self: start; color: var(--vs-text-muted, #94a9bf); font-size: 0.92rem; }
body.woocommerce-cart table.cart td.product-quantity { grid-area: qty; }
body.woocommerce-cart table.cart td.product-subtotal { grid-area: sub; text-align: right; font-weight: 800; font-size: 1.05rem; color: #fff; }
body.woocommerce-cart table.cart td.product-remove { grid-area: rm; text-align: right; }
body.woocommerce-cart table.cart td.product-thumbnail img {
  display: block;
  width: 96px !important;
  max-width: none !important;
  height: 96px !important;
  padding: 4px;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
}
body.woocommerce-cart table.cart td.product-name a {
  color: #fff;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
body.woocommerce-cart table.cart td.product-name a:hover { color: var(--vs-primary-soft, #46c2ff); }
body.woocommerce-cart table.cart td.product-name dl.variation {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--vs-text-muted, #94a9bf);
}
body.woocommerce-cart table.cart td.product-name dl.variation :is(dt, dd, p) { margin: 0; display: inline; }
body.woocommerce-cart table.cart td.product-name dl.variation dt { font-weight: 700; }
body.woocommerce-cart table.cart td.product-remove a.remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--vsx-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ff9c9c !important;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
body.woocommerce-cart table.cart td.product-remove a.remove:hover { background: var(--vsx-bad) !important; color: #fff !important; }

/* Quantity stepper (matches the product page) */
body.woocommerce-cart .quantity {
  display: inline-flex;
  align-items: center;
  height: 44px;
  margin: 0;
  border: 1px solid var(--vsx-line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
body.woocommerce-cart .quantity :is(.minus, .plus) {
  width: 38px;
  height: 100%;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 1.15rem;
  cursor: pointer;
}
body.woocommerce-cart .quantity input.qty {
  width: 42px !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font-weight: 800;
  text-align: center;
  -moz-appearance: textfield;
}

/* Coupon + update row */
body.woocommerce-cart table.cart tbody tr:not(.cart_item) { display: block; border: 0; background: none; }
body.woocommerce-cart table.cart td.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 0 !important;
  border: 0 !important;
  background: none !important;
}
body.woocommerce-cart td.actions .coupon { display: flex; flex: 1 1 340px; gap: 10px; align-items: center; float: none; }
body.woocommerce-cart td.actions .coupon label { display: none; }
body.woocommerce-cart td.actions .coupon #coupon_code { flex: 1 1 auto; width: auto !important; min-height: 46px; }
body.woocommerce-cart td.actions > button[name="update_cart"] { flex: 0 0 auto; float: none; }
body.woocommerce-cart .vsps-cart-reassure { margin-top: 16px; }

/* Totals card */
body.woocommerce-cart .cart-collaterals .cart_totals {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 22px !important;
  background: var(--vsx-card) !important;
  border: 1px solid var(--vsx-line) !important;
  border-radius: 22px !important;
  box-shadow: var(--vs-shadow, 0 18px 50px rgba(0, 0, 0, 0.28));
}
body.woocommerce-cart .cart-collaterals .cart_totals > h2 {
  margin: 0 0 6px !important; /* Astra uses -20px side margins to bleed a header bar */
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--vs-text, #fff) !important;
}
body.woocommerce-cart .cart_totals table.shop_table,
body.woocommerce-cart .cart_totals table.shop_table tbody {
  display: block;
  width: 100%;
  margin: 0;
  border: 0 !important;
  background: transparent !important;
}
body.woocommerce-cart .cart_totals table.shop_table tr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--vsx-line);
}
body.woocommerce-cart .cart_totals table.shop_table tr:first-child { border-top: 0; }
body.woocommerce-cart .cart_totals table.shop_table :is(th, td) {
  display: block;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 0.96rem;
}
body.woocommerce-cart .cart_totals table.shop_table th { font-weight: 600; text-align: left; width: auto; color: var(--vs-text-soft, #c6d4e3); }
body.woocommerce-cart .cart_totals table.shop_table td { text-align: right !important; font-weight: 700; color: #fff; }
body.woocommerce-cart .cart_totals table.shop_table td::before { display: none !important; }
body.woocommerce-cart .cart_totals .order-total :is(th, td) { padding-top: 4px !important; font-size: 1.05rem; font-weight: 800; color: #fff; }
body.woocommerce-cart .cart_totals .order-total .amount { font-size: 1.4rem; color: var(--vs-primary-soft, #46c2ff); }
body.woocommerce-cart .wc-proceed-to-checkout { margin: 18px 0 0; padding: 0; }
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: flex; width: 100%; margin: 0 0 10px; }

/* Shipping options (cart + checkout): selectable option cards */
body:is(.woocommerce-cart, .woocommerce-checkout) tr.woocommerce-shipping-totals { flex-direction: column; gap: 8px; }
body:is(.woocommerce-cart, .woocommerce-checkout) tr.woocommerce-shipping-totals :is(th, td) { width: 100% !important; text-align: left !important; }
body:is(.woocommerce-cart, .woocommerce-checkout) ul#shipping_method {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
body:is(.woocommerce-cart, .woocommerce-checkout) ul#shipping_method li {
  position: relative;
  margin: 0;
  padding: 0 !important; /* Astra: padding-left 22px */
  text-indent: 0 !important; /* Astra: -22px */
}
body:is(.woocommerce-cart, .woocommerce-checkout) ul#shipping_method li input.shipping_method {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body:is(.woocommerce-cart, .woocommerce-checkout) ul#shipping_method li label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--vsx-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #e6eff8;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.35;
  text-indent: 0 !important; /* Astra: -22px */
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
body:is(.woocommerce-cart, .woocommerce-checkout) ul#shipping_method li label::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}
body:is(.woocommerce-cart, .woocommerce-checkout) ul#shipping_method li input:checked + label {
  border-color: var(--vs-primary-soft, #46c2ff);
  background: rgba(70, 194, 255, 0.1);
  color: #fff;
}
body:is(.woocommerce-cart, .woocommerce-checkout) ul#shipping_method li input:checked + label::before {
  border-color: var(--vs-primary-soft, #46c2ff);
  background: radial-gradient(circle, #46c2ff 45%, transparent 50%);
}
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce-shipping-destination { margin: 8px 0 0; font-size: 0.85rem; color: var(--vs-text-muted, #94a9bf); }
body:is(.woocommerce-cart, .woocommerce-checkout) a.shipping-calculator-button { color: var(--vs-primary-soft, #46c2ff); font-weight: 700; text-underline-offset: 3px; }

@media (max-width: 767px) {
  body.woocommerce-cart table.cart tr.cart_item {
    grid-template-columns: 76px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name rm"
      "thumb price price"
      "thumb qty sub";
    column-gap: 12px;
    padding: 12px;
  }
  body.woocommerce-cart table.cart td.product-thumbnail img { width: 76px !important; max-width: none !important; height: 76px !important; }
  body.woocommerce-cart table.cart td.product-quantity { margin-top: 6px; text-align: left !important; }
  body.woocommerce-cart table.cart td.product-subtotal { margin-top: 6px; text-align: right !important; }
  /* WooCommerce's responsive table css right-aligns every cell — keep name/price left. */
  body.woocommerce-cart table.cart :is(td.product-name, td.product-price) { text-align: left !important; }
  body.woocommerce-cart table.cart td.product-remove { text-align: right !important; }
  /* Astra/WooCommerce float these and give the buttons a 5px left margin, which
     pushed "Update cart" past the card edge - stack all three, full width. */
  body.woocommerce-cart td.actions .coupon { flex: 1 1 100%; flex-wrap: wrap; }
  body.woocommerce-cart td.actions .coupon::before,
  body.woocommerce-cart td.actions .coupon::after { content: none !important; display: none !important; } /* clearfix pseudo-elements become empty flex items and eat the row gap */
  body.woocommerce-cart td.actions .coupon #coupon_code { flex: 1 1 100%; float: none !important; margin: 0 !important; }
  body.woocommerce-cart td.actions .coupon .button { flex: 1 1 100%; float: none !important; margin: 0 !important; width: 100% !important; }
  body.woocommerce-cart td.actions > button[name="update_cart"] { width: 100% !important; float: none !important; margin: 0 !important; }
  body.woocommerce-cart .cart_totals { padding: 18px; border-radius: 18px; }
}


/* ----------------------------------------------------------------------------
   14. CHECKOUT — form cards left, order summary right
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  body.woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    column-gap: 36px;
    align-items: start;
  }
  body.woocommerce-checkout form.checkout > .wcpay-express-checkout-wrapper { grid-column: 1 / -1; }
  body.woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 2 / span 2; }
  body.woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 2; }
  body.woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 3; }
}
body.woocommerce-checkout form.checkout > #customer_details,
body.woocommerce-checkout form.checkout > #order_review_heading,
body.woocommerce-checkout form.checkout > #order_review {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.woocommerce-checkout #customer_details.col2-set::before,
body.woocommerce-checkout #customer_details.col2-set::after { display: none; }
body.woocommerce-checkout #customer_details :is(.col-1, .col-2) { float: none; width: 100%; max-width: none; }

/* Express checkout + separator */
body.woocommerce-checkout .wcpay-express-checkout-wrapper { margin: 0 0 8px; }
body.woocommerce-checkout #wcpay-express-checkout-button-separator {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 6px;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vs-text-muted, #94a9bf);
}
body.woocommerce-checkout #wcpay-express-checkout-button-separator::before,
body.woocommerce-checkout #wcpay-express-checkout-button-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--vsx-line);
}

/* Coupon form (toggle uses the shared notice look) */
body.woocommerce-checkout form.checkout_coupon {
  margin: 0 0 20px;
  padding: 18px;
  background: var(--vsx-soft);
  border: 1px solid var(--vsx-line);
  border-radius: 16px;
}
body.woocommerce-checkout form.checkout_coupon p { margin: 0 0 10px; }

/* Section cards: contact / billing / shipping / notes */
body.woocommerce-checkout #customer_details :is(#contact_details, .woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields) {
  margin: 0 0 18px;
  padding: 22px;
  background: var(--vsx-card);
  border: 1px solid var(--vsx-line);
  border-radius: 20px;
}
body.woocommerce-checkout #customer_details .woocommerce-billing-fields .woocommerce-billing-fields { padding: 0; border: 0; background: none; margin: 0; }
body.woocommerce-checkout #customer_details h3 {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--vs-text, #fff);
}
body.woocommerce-checkout .woocommerce-account-fields { margin: 0 0 18px; padding: 0 4px; }
body.woocommerce-checkout #ship-to-different-address { margin: 0; padding: 0; border: 0; }
body.woocommerce-checkout #ship-to-different-address label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--vs-text, #fff) !important;
  cursor: pointer;
}
body.woocommerce-checkout :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
body.woocommerce-checkout form.checkout p.form-row {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.woocommerce-checkout form.checkout :is(p.form-row-wide, p.notes) { grid-column: 1 / -1; }
body.woocommerce-checkout form.checkout p.form-row .woocommerce-input-wrapper { display: block; }

/* Order summary card (heading + review joined) */
body.woocommerce-checkout #order_review_heading {
  margin: 0 !important;
  padding: 22px 24px 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--vsx-line) !important;
  border-bottom: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--vs-text, #fff);
}
body.woocommerce-checkout #order_review {
  padding: 0 24px 24px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--vsx-line) !important;
  border-top: 0 !important;
  border-radius: 0 0 22px 22px !important;
  box-shadow: var(--vs-shadow, 0 18px 50px rgba(0, 0, 0, 0.28));
}
body.woocommerce-checkout #order_review table.shop_table {
  width: 100%;
  margin: 0 0 18px;
  border: 0 !important;
  border-collapse: collapse;
  background: transparent !important;
}
body.woocommerce-checkout #order_review table.shop_table thead { display: none; }
body.woocommerce-checkout #order_review table.shop_table :is(td, th) {
  padding: 12px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--vsx-line) !important;
  background: transparent !important;
  color: var(--vs-text-soft, #c6d4e3);
  font-size: 0.95rem;
  vertical-align: top;
}
body.woocommerce-checkout #order_review table.shop_table tbody tr:first-child td { border-top: 0 !important; }
body.woocommerce-checkout #order_review td.product-name { padding-right: 14px !important; color: #fff; font-weight: 600; }
body.woocommerce-checkout #order_review .product-quantity { color: var(--vs-text-muted, #94a9bf); font-weight: 700; }
body.woocommerce-checkout #order_review td.product-total { text-align: right; color: #fff; font-weight: 700; white-space: nowrap; }
body.woocommerce-checkout #order_review tfoot th { text-align: left; font-weight: 600; }
body.woocommerce-checkout #order_review tfoot td { text-align: right; color: #fff; font-weight: 700; }
body.woocommerce-checkout #order_review tr.woocommerce-shipping-totals { display: block !important; }
body.woocommerce-checkout #order_review tr.woocommerce-shipping-totals :is(th, td) {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: left !important;
}
body.woocommerce-checkout #order_review tr.woocommerce-shipping-totals th {
  padding: 12px 0 8px !important;
  border-top: 1px solid var(--vsx-line) !important;
}
body.woocommerce-checkout #order_review tr.woocommerce-shipping-totals td { padding-bottom: 12px !important; }
body.woocommerce-checkout #order_review tr.order-total :is(th, td) { padding-top: 16px !important; font-size: 1.05rem; font-weight: 800; color: #fff; }
body.woocommerce-checkout #order_review tr.order-total .amount { font-size: 1.4rem; color: var(--vs-primary-soft, #46c2ff); }

/* Payment methods as option cards */
body.woocommerce-checkout #payment { padding: 0; background: transparent !important; border-radius: 0; }
body.woocommerce-checkout #payment ul.payment_methods {
  display: grid;
  gap: 10px;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none;
}
body.woocommerce-checkout #payment ul.payment_methods > li {
  margin: 0 !important;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--vsx-line);
  border-radius: 14px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
body.woocommerce-checkout #payment ul.payment_methods > li:has(> input:checked) {
  border-color: var(--vs-primary-soft, #46c2ff);
  background: rgba(70, 194, 255, 0.08);
}
body.woocommerce-checkout #payment ul.payment_methods > li > label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  font-weight: 700;
  color: #fff !important;
}
body.woocommerce-checkout #payment .payment_box {
  margin: 12px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--vs-text-soft, #c6d4e3) !important;
  font-size: 0.92rem;
  line-height: 1.55;
}
body.woocommerce-checkout #payment .payment_box::before,
body.woocommerce-checkout #payment .payment_box::after { display: none !important; }
body.woocommerce-checkout .woopay-save-new-user-container {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--vsx-line);
  border-radius: 14px;
  color: var(--vs-text-soft, #c6d4e3);
}
body.woocommerce-checkout #payment div.form-row.place-order { margin: 18px 0 0; padding: 0 !important; }
body.woocommerce-checkout #payment #place_order { width: 100%; float: none; }
body.woocommerce-checkout :is(.woocommerce-terms-and-conditions-wrapper, .woocommerce-privacy-policy-text) {
  font-size: 0.82rem;
  color: var(--vs-text-muted, #94a9bf);
  line-height: 1.55;
}
body.woocommerce-checkout :is(.woocommerce-terms-and-conditions-wrapper, .woocommerce-privacy-policy-text) a { color: var(--vs-primary-soft, #46c2ff); }

@media (max-width: 991px) {
  body.woocommerce-checkout #order_review_heading { margin-top: 8px; }
}
@media (max-width: 640px) {
  body.woocommerce-checkout :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) { grid-template-columns: 1fr; }
  body.woocommerce-checkout #customer_details :is(#contact_details, .woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields) { padding: 18px; border-radius: 18px; }
  body.woocommerce-checkout :is(#order_review_heading, #order_review) { padding-left: 18px; padding-right: 18px; }
}


/* ----------------------------------------------------------------------------
   15. ORDER RECEIVED (thank-you)
   -------------------------------------------------------------------------- */
body.woocommerce-order-received .woocommerce-order { max-width: 920px; margin-inline: auto; }
body.woocommerce-order-received p.woocommerce-thankyou-order-received {
  margin: 0 0 18px;
  padding: 18px 22px;
  background: rgba(61, 220, 151, 0.1);
  border: 1px solid rgba(61, 220, 151, 0.4);
  border-radius: 16px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #b8f5d8;
}
body.woocommerce-order-received ul.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
body.woocommerce-order-received ul.woocommerce-order-overview li {
  margin: 0;
  padding: 14px 16px;
  background: var(--vsx-card);
  border: 1px solid var(--vsx-line) !important;
  border-radius: 16px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--vs-text-muted, #94a9bf);
}
body.woocommerce-order-received ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: 6px;
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}
body.woocommerce-order-received :is(.woocommerce-order-details, .woocommerce-customer-details) {
  margin: 0 0 22px;
  padding: 22px;
  background: var(--vsx-card);
  border: 1px solid var(--vsx-line);
  border-radius: 20px;
}
body.woocommerce-order-received :is(h2.woocommerce-order-details__title, h2.woocommerce-column__title) {
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--vs-text, #fff);
}
body.woocommerce-order-received .woocommerce-customer-details address {
  padding: 0;
  border: 0;
  font-style: normal;
  color: var(--vs-text-soft, #c6d4e3);
  line-height: 1.7;
}


/* ----------------------------------------------------------------------------
   12. REDUCED-MOTION SAFEGUARD
   enhancements.css already neutralises transition durations globally; here we
   also cancel the transforms this file introduces, so nothing moves.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.woocommerce-shop ul.products li.product:hover,
  body.tax-product_cat ul.products li.product:hover,
  body.tax-product_tag ul.products li.product:hover,
  body.post-type-archive-product ul.products li.product:hover,
  body.single-product ul.products li.product:hover,
  body.single-product .vsps-reassure__item:hover,
  body.single-product .woocommerce-product-gallery__trigger:hover,
  body.single-product .vsv-color .vsv-dot:hover,
  body.single-product .vsv-pill .vsv-swatch:hover,
  body.single-product .vsv-swatch.vsv-as-pill:hover {
    transform: none;
  }
}