/**
 * ════════════════════════════════════════════════════════════════════════════
 *  SINGLE PRODUCT PAGE — DSS Theme   ·   STAND-ALONE EDITION (300% isolated)
 * ════════════════════════════════════════════════════════════════════════════
 *  ✏️  EDIT THIS FILE to change visual styling of any product page.
 *
 *  📂 Location:  web/app/themes/dss-theme/assets/styles/single-product.css
 *  🔗 Enqueued:  functions.php → wp_enqueue_scripts (priority 9999 = LAST)
 *  🎯 Scope:     Triple-layer isolation, see below.
 *
 *  ═══════ STAND-ALONE STRATEGY  (cannot be overridden by global/local CSS) ══
 *
 *    1.  EXTREME SPECIFICITY                                                 
 *        Every selector prefixed with `html body .dss-product-page` —
 *        this beats any rule that uses `body.single-product …` or any
 *        WooCommerce default. Specificity wins the cascade war.
 *
 *    2.  !important ON EVERY DECLARATION                                     
 *        Even if a theme/plugin rule has its own !important and equal
 *        specificity, our LATER load order (see below) makes ours win.
 *
 *    3.  LOAD ORDER PRIORITY 9999                                            
 *        functions.php enqueues this AFTER every other stylesheet on
 *        the page. CSS rules with equal specificity + !important fall
 *        back to "last one wins" — and we are guaranteed last.
 *
 *  Together: a global CSS file would need (a) higher specificity than
 *  `html body .dss-product-page …`, (b) !important, AND (c) load order
 *  after us. Practically impossible across the rest of the codebase.
 *
 *  ═══════ FILE MAP ════════════════════════════════════════════════════════
 *    1. Design tokens                  (line ~50)
 *    2. Container & back link          (line ~110)
 *    3. 2-column product layout        (line ~145)
 *    4. Gallery (left column)          (line ~160)
 *    5. Summary (right column)         (line ~210)
 *       5a. Title & price
 *       5b. Variation dropdowns
 *       5c. Add-ons
 *       5d. Subtotal + Qty + Add to Cart + Wishlist
 *    6. Tabs                           (line ~470)
 *    7. Tab panels                     (line ~530)
 *    8. Related products grid          (line ~600)
 *    9. Responsive                     (line ~720)
 * ════════════════════════════════════════════════════════════════════════════
 */


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  1.  DESIGN TOKENS  —  change colours / radii / spacing here only      ║
   ╚════════════════════════════════════════════════════════════════════════╝ */
html body .dss-product-page {
  /* Brand — matches DSS yellow used elsewhere on the site (#ffd200/#ffd623) */
  --dss-yellow:        #ffd623 !important;
  --dss-yellow-hover:  #e6c100 !important;
  --dss-yellow-soft:   #fff9d6 !important;

  /* Neutrals */
  --dss-text:          #1a1a1a !important;
  --dss-text-muted:    #6b6b6b !important;
  --dss-text-faint:    #999999 !important;
  --dss-bg-page:       #ffffff !important;
  --dss-bg-soft:       #fafafa !important;
  --dss-bg-card:       #ffffff !important;
  --dss-border:        #e5e7eb !important;
  --dss-border-soft:   #f0f0f0 !important;
  --dss-danger:        #d63838 !important;

  /* Shadows */
  --dss-shadow-xs:     0 1px 3px  rgba(0,0,0,0.05) !important;
  --dss-shadow-sm:     0 2px 8px  rgba(0,0,0,0.06) !important;
  --dss-shadow-md:     0 4px 14px rgba(0,0,0,0.08) !important;
  --dss-shadow-lg:     0 8px 24px rgba(0,0,0,0.10) !important;

  /* Geometry */
  --dss-radius:        10px !important;
  --dss-radius-lg:     14px !important;
  --dss-radius-pill:   999px !important;

  /* Type */
  --dss-font-sanss:    '';
  --dss-font-serif:   '';

  /* Apply to the root container */
  /* font-family: var(--dss-font-sanss) !important; */
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--dss-text) !important;
  background: var(--dss-bg-page) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  box-sizing: border-box !important;
}

/* Defensive: every descendant uses border-box */
html body .dss-product-page,
html body .dss-product-page *,
html body .dss-product-page *::before,
html body .dss-product-page *::after {
  box-sizing: border-box !important;
}

html body .dss-product-page img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  2. PAGE CONTAINER & "BACK TO SHOP" LINK                              ║
   ╚════════════════════════════════════════════════════════════════════════╝ */
html body .dss-product-page .dss-product-container {
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 24px clamp(16px, 3vw, 32px) 64px !important;
}

html body .dss-product-page .dss-product-eyebrow {
  margin: 0 0 20px !important;
  font-size: 13px !important;
  color: var(--dss-text-muted) !important;
}
html body .dss-product-page .dss-product-eyebrow a {
  color: var(--dss-text-muted) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color .15s ease !important;
}
html body .dss-product-page .dss-product-eyebrow a:hover {
  color: var(--dss-text) !important;
  opacity: 1 !important;
}

html body .dss-product-page .dss-product-shell {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  3. 2-COLUMN PRODUCT LAYOUT                                           ║
   ╚════════════════════════════════════════════════════════════════════════╝ */
html body .dss-product-page .product.type-product {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(24px, 4vw, 56px) !important;
  align-items: start !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FANCY PRODUCT DESIGNER — FULL-WIDTH LAYOUT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DOM on this site (confirmed via DevTools):

     .product.type-product                 ← the 2-col grid
       └─ .summary.entry-summary            ← RIGHT grid cell (flex column)
            ├─ .dss-m-eyebrow-row
            ├─ h1.product_title
            └─ .fpd-product-designer-wrapper   ← the FPD customiser
                 └─ #fancy-product-designer-…  .fpd-container
       (gallery = the other grid cell)

   The designer is NOT a grid child — it's nested inside the summary cell.
   So making it full-width takes two moves:
     1. Collapse the product grid to ONE column, so the summary cell spans
        the whole row (title, designer and form now stack full-width).
     2. Force the designer wrapper + its inner .fpd-container to 100% so
        the widget fills that full-width cell (it otherwise keeps the
        narrower column width it was built at).

   Scoped behind :has(.fpd-product-designer-wrapper) so ONLY customiser
   products change; every normal product keeps the 2-column layout.
   Mobile (≤768px) is already single-column, so this only affects
   desktop/tablet and can't conflict with that media query. */
html body .dss-product-page .product.type-product:has(.fpd-product-designer-wrapper) {
  grid-template-columns: 1fr !important;
}
/* The summary cell (host of the designer) fills the row. */
html body .dss-product-page .product.type-product:has(.fpd-product-designer-wrapper) > .summary.entry-summary,
html body .dss-product-page .product.type-product:has(.fpd-product-designer-wrapper) > .woocommerce-product-gallery {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}
/* The designer wrapper + inner FPD container span the full width. */
html body .dss-product-page .product.type-product:has(.fpd-product-designer-wrapper) .fpd-product-designer-wrapper,
html body .dss-product-page .product.type-product:has(.fpd-product-designer-wrapper) .fpd-product-designer-wrapper > div,
html body .dss-product-page .product.type-product:has(.fpd-product-designer-wrapper) [id^="fancy-product-designer-"],
html body .dss-product-page .product.type-product:has(.fpd-product-designer-wrapper) .fpd-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
}

/* ── FPD pages: the PRODUCT FORM (plus price & description) at 60%, CENTERED
   Only the price, the short description, and the add-to-cart form (variations,
   add-on fields, quantity, add-to-cart button) — NOT the widget, related
   products or the summary section as a whole. This keeps the price, the
   "Custom Signs …" line and the form visually aligned as one centred 60%
   column beneath the full-width customiser. Restored to full width on mobile
   (≤768px). Only applies to products that contain the FPD customiser. */
html body .dss-product-page .product.type-product:has(.fpd-product-designer-wrapper) > .summary.entry-summary > .price,
html body .dss-product-page .product.type-product:has(.fpd-product-designer-wrapper) > .summary.entry-summary > p.price,
html body .dss-product-page .product.type-product:has(.fpd-product-designer-wrapper) > .summary.entry-summary > .woocommerce-product-details__short-description,
html body .dss-product-page .product.type-product:has(.fpd-product-designer-wrapper) > .summary.entry-summary > form.cart,
html body .dss-product-page .product.type-product:has(.fpd-product-designer-wrapper) > .summary.entry-summary > form.variations_form,
html body .dss-product-page .product.type-product:has(.fpd-product-designer-wrapper) > .summary.entry-summary > .wc-pao-addons-container {
  width: 60% !important;
  max-width: 60% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CRITICAL LAYOUT FIX — Tabs and Related Products must span BOTH columns
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Without this rule the tabs sit in col 1 and related in col 2 (the bug
   you saw). `grid-column: 1 / -1` makes them span every column line. */
html body .dss-product-page .product.type-product > .woocommerce-tabs,
html body .dss-product-page .product.type-product > .woocommerce-tabs-wrapper,
html body .dss-product-page .product.type-product > .wc-tabs-wrapper,
html body .dss-product-page .product.type-product > .related.products,
html body .dss-product-page .product.type-product > .upsells.products,
html body .dss-product-page .product.type-product > .related,
html body .dss-product-page .product.type-product > .upsells,
html body .dss-product-page .product.type-product > .product_meta,
html body .dss-product-page .product.type-product > .clear {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HAZARD-STRIPE DIVIDER — see rule below on `.woocommerce-tabs::before`.
   The stripe is rendered as a pseudo-element on the tabs wrapper itself,
   so it's physically attached to the tabs section (lives in the same
   DOM block, can't drift if grid layout changes).
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* WC notices */
html body .dss-product-page .woocommerce-notices-wrapper:empty { display: none !important; }


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  4. GALLERY (LEFT COLUMN)                                             ║
   ╚════════════════════════════════════════════════════════════════════════╝ */
html body .dss-product-page .woocommerce-product-gallery {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: auto !important;
  width: 100% !important;
  float: none !important;
  z-index: 5 !important;
  overflow: visible !important;
}
html body .dss-product-page .woocommerce-product-gallery::before,
html body .dss-product-page .woocommerce-product-gallery::after {
  display: none !important;
  content: none !important;
}
html body .dss-product-page .woocommerce-product-gallery .flex-viewport {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  position: relative !important;
}
html body .dss-product-page .woocommerce-product-gallery__wrapper {
  display: block !important;
  width: 100% !important;
  transform: none !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .dss-product-page .woocommerce-product-gallery__image {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  display: block !important;
}
html body .dss-product-page .woocommerce-product-gallery__image img,
html body .dss-product-page .woocommerce-product-gallery__image a img,
html body .dss-product-page .woocommerce-product-gallery .wp-post-image {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 600px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  border-radius: 0 !important;
}

/* Zoom trigger pill */
html body .dss-product-page .woocommerce-product-gallery__trigger {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 38px !important;
  height: 38px !important;
  /* border-radius: 50% !important;
  background: var(--dss-bg-card) !important;
  border: 1px solid var(--dss-border) !important;
  display: inline-flex !important; */
  align-items: center !important;
  justify-content: center !important;
  z-index: 20 !important;
  font-size: 0 !important;
  text-decoration: none !important;
  box-shadow: var(--dss-shadow-sm) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
  color: var(--dss-text) !important;
}
html body .dss-product-page .woocommerce-product-gallery__trigger:hover {
  transform: scale(1.05) !important;
  box-shadow: var(--dss-shadow-md) !important;
  opacity: 1 !important;
}
html body .dss-product-page .woocommerce-product-gallery__trigger img.emoji {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  border: none !important;
}
html body .dss-product-page .flex-control-thumbs:empty { display: none !important; }


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  5. SUMMARY (RIGHT COLUMN)                                            ║
   ╚════════════════════════════════════════════════════════════════════════╝ */
html body .dss-product-page .summary.entry-summary {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}
.wc-pao-addon .wc-pao-addon-description {
 
    margin-top: 2em !important;
}
.wc-pao-addon .wc-pao-addon-description p {
 
    padding-top: 1em !important;
}
/* ───── 5a. TITLE & PRICE ───────────────────────────────────────── */
html body .dss-product-page .product_title.entry-title {

  
    font-size: clamp(26px, 2.7vw, 2.3rem) !important;
    font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--dss-text) !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  border: none !important;
}




/* ------------------------------------------------------------------
   PLAIN TEXT INPUT — Product Add-ons custom text field ("Equipment No:",
   "Voltage (kV)", "Arc fault Level (kA)", "Incident Energy (cal/cm²)",
   "Arch Flash Boundary (m)", "Working Distance (m)" etc.). Rendered by
   WC Product Add-Ons as <input type="text" class="wc-pao-addon-field
   wc-pao-addon-custom-text">. Unstyled otherwise — thin native border,
   intrinsic width, no radius — so it visually clashes with the select/
   textarea fields on the same form. Matched to the SELECT rule above
   and the TEXTAREA rule above it: full width, same border / radius /
   colour tokens / font / focus ring, so every add-on field type reads
   as one consistent design system regardless of whether Product
   Add-Ons renders it as <select>, <textarea>, or <input type="text">.
   ------------------------------------------------------------------ */
html body .dss-product-page input.wc-pao-addon-field.wc-pao-addon-custom-text,
html body .dss-product-page .wc-pao-addon-field.wc-pao-addon-custom-text,
html body .dss-product-page .wc-pao-addon input[type="text"],
html body .dss-product-page form.cart input[type="text"].wc-pao-addon-field {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 16px 18px !important;
  border: 1.5px solid var(--dss-border) !important;
  border-radius: var(--dss-radius) !important;
  background-color: var(--dss-bg-page) !important;
  background-image: none !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--dss-text) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  text-shadow: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  margin: 0 !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
html body .dss-product-page input.wc-pao-addon-field.wc-pao-addon-custom-text::placeholder,
html body .dss-product-page .wc-pao-addon-field.wc-pao-addon-custom-text::placeholder,
html body .dss-product-page .wc-pao-addon input[type="text"]::placeholder {
  color: var(--dss-text-faint) !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}
html body .dss-product-page input.wc-pao-addon-field.wc-pao-addon-custom-text:hover,
html body .dss-product-page .wc-pao-addon-field.wc-pao-addon-custom-text:hover,
html body .dss-product-page .wc-pao-addon input[type="text"]:hover {
  border-color: var(--dss-text-muted) !important;
}
html body .dss-product-page input.wc-pao-addon-field.wc-pao-addon-custom-text:focus,
html body .dss-product-page .wc-pao-addon-field.wc-pao-addon-custom-text:focus,
html body .dss-product-page .wc-pao-addon input[type="text"]:focus {
  outline: none !important;
  border-color: var(--dss-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255,214,35,.25) !important;
  background-color: var(--dss-bg-page) !important;
}



/* "From: $XX.XX inc GST" — show only the LOW price + suffix */
html body .dss-product-page .price,
html body .dss-product-page p.price {
  font-size: 15px !important;
  color: var(--dss-text) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 600 !important;
  border: none !important;
  background: none !important;
}
html body .dss-product-page .price::before {
  content: "From: " !important;
  font-weight: 600 !important;
  color: var(--dss-text) !important;
  margin-right: 2px !important;
  display: inline !important;
}
/* Hide every direct child of the dynamic-price wrapper… */
html body .dss-product-page .price .tiered-pricing-dynamic-price-wrapper > * {
  display: none !important;
}
/* …then re-show ONLY the first amount + suffix */
html body .dss-product-page .price .tiered-pricing-dynamic-price-wrapper > .woocommerce-Price-amount:first-of-type,
html body .dss-product-page .price .tiered-pricing-dynamic-price-wrapper > .woocommerce-price-suffix {
  display: inline !important;
}
/* For simple (non-variable) products: hide trailing siblings */
html body .dss-product-page .price > .woocommerce-Price-amount ~ .woocommerce-Price-amount,
html body .dss-product-page .price > span[aria-hidden="true"]:not(.woocommerce-Price-amount):not(.woocommerce-price-suffix),
html body .dss-product-page .price > .screen-reader-text {
  display: none !important;
}

html body .dss-product-page .woocommerce-Price-amount {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--dss-text) !important;
}
html body .dss-product-page .woocommerce-Price-currencySymbol {
  color: var(--dss-text) !important;
  font-weight: 800 !important;
}
html body .dss-product-page .woocommerce-price-suffix {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--dss-text-muted) !important;
  margin-left: 4px !important;
}

/* Short description */
html body .dss-product-page .woocommerce-product-details__short-description {
  font-size: 14px !important;
  color: var(--dss-text-muted) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .dss-product-page .woocommerce-product-details__short-description p {
  margin: 0 !important;
}


/* ───── 5b. VARIATION DROPDOWNS — floating-label outlined inputs ─── */
html body .dss-product-page form.variations_form.cart {
  margin: 0 !important;
  padding: 0 !important;
}

html body .dss-product-page table.variations {
  width: 100% !important;
  margin: 0 !important;
  border: none !important;
  border-collapse: collapse !important;
  background: transparent !important;
  overflow: unset !important;
}
html body .dss-product-page table.variations tbody { display: block !important; }
html body .dss-product-page table.variations tr {
  display: block !important;
  position: relative !important;
  margin-bottom: 14px !important;
  border: none !important;
  background: transparent !important;
  /* Create a stacking context so the floating label sits ABOVE the field border */
  isolation: isolate !important;
  overflow: visible !important;
}
html body .dss-product-page table.variations tr th,
html body .dss-product-page table.variations tr td {
  display: block !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  width: auto !important;
  text-align: left !important;
  vertical-align: top !important;
  overflow: visible !important;
}

/* Floating label sits in the notch on the field's top border */
html body .dss-product-page table.variations th.label {
  position: absolute !important;
  top: -8px !important;
  left: 16px !important;
  background: var(--dss-bg-page) !important;
  padding: 0 8px !important;
  z-index: 10 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--dss-text) !important;
  pointer-events: none !important;
  border: none !important;
  line-height: 1 !important;
  overflow: visible !important;
  height: auto !important;
  white-space: nowrap !important;
}
html body .dss-product-page table.variations th.label label {
  font-weight: 700 !important;
  color: var(--dss-text) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: 11px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline !important;
  background: var(--dss-bg-page) !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Dropdown itself */
html body .dss-product-page table.variations td.value select,
html body .dss-product-page .wc-pao-addon-field.wc-pao-addon-select {
  width: 100% !important;
  padding: 16px 44px 16px 18px !important;
  border: 1.5px solid var(--dss-border) !important;
  border-radius: var(--dss-radius) !important;
  background-color: var(--dss-bg-page) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  font-size: 14px !important;
  color: var(--dss-text) !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
html body .dss-product-page table.variations td.value select:focus,
html body .dss-product-page .wc-pao-addon-field.wc-pao-addon-select:focus {
  outline: none !important;
  border-color: var(--dss-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255,214,35,.25) !important;
  background-color: var(--dss-bg-page) !important;
}

/* ------------------------------------------------------------------
   TEXTAREA — Product Add-ons custom textarea ("Design Instructions"
   etc.) + any generic textarea on the product page. Unstyled by the
   browser otherwise (narrow, monospace). Matched to the add-on SELECT
   field above: full width, same border / radius / padding / focus ring.
   ------------------------------------------------------------------ */
html body .dss-product-page textarea,
html body .dss-product-page .wc-pao-addon-field.wc-pao-addon-textarea,
html body .dss-product-page .wc-pao-addon textarea,
html body .dss-product-page form.cart textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 120px !important;
  padding: 14px 16px !important;
  border: 1.5px solid var(--dss-border) !important;
  border-radius: var(--dss-radius) !important;
  background-color: var(--dss-bg-page) !important;
  font-family: var(--dss-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--dss-text) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  resize: vertical !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
html body .dss-product-page textarea::placeholder,
html body .dss-product-page .wc-pao-addon-field.wc-pao-addon-textarea::placeholder,
html body .dss-product-page .wc-pao-addon textarea::placeholder,
html body .dss-product-page form.cart textarea::placeholder {
  color: var(--dss-text-muted) !important;
  font-family: var(--dss-font-sans) !important;
  opacity: 1 !important;
}
html body .dss-product-page textarea:focus,
html body .dss-product-page .wc-pao-addon-field.wc-pao-addon-textarea:focus,
html body .dss-product-page .wc-pao-addon textarea:focus,
html body .dss-product-page form.cart textarea:focus {
  outline: none !important;
  border-color: var(--dss-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255,214,35,.25) !important;
  background-color: var(--dss-bg-page) !important;
}

/* Clear link */
html body .dss-product-page .reset_variations {
  display: inline-block !important;
  margin-top: 6px !important;
  margin-left: 4px !important;
  font-size: 12px !important;
  color: var(--dss-text-faint) !important;
  text-decoration: none !important;
  font-weight: 400 !important;
}
html body .dss-product-page .reset_variations:hover {
  color: var(--dss-text) !important;
  opacity: 1 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CUSTOM SELECT BOX (replaces native <select> entirely)
   Built by single-product.js — the native <select> is kept in the DOM
   (visually hidden) so WooCommerce variation events still fire when the
   user picks an option from our custom dropdown.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body .dss-product-page select.dss-cselect-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .dss-product-page .dss-cselect {
  position: relative !important;
  width: 100% !important;
  font-family: inherit !important;
  z-index: 1 !important;
  margin-bottom:2rem;
}
html body .dss-product-page .dss-cselect.is-open { z-index: 50 !important; }

/* The clickable trigger (looks like the dropdown field) */
html body .dss-product-page .dss-cselect-trigger {
  width: 100% !important;
  padding: 16px 44px 16px 18px !important;
  border: 1.5px solid var(--dss-border) !important;
  border-radius: var(--dss-radius) !important;
  background-color: var(--dss-bg-page) !important;
  background-image: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--dss-text) !important;
  font-family: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 50px !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  margin: 0 !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
  outline: none !important;
}
html body .dss-product-page .dss-cselect-trigger:hover {
  border-color: var(--dss-text-muted) !important;
  background-color: var(--dss-bg-page) !important;
  color: var(--dss-text) !important;
  transform: none !important;
}
html body .dss-product-page .dss-cselect.is-open .dss-cselect-trigger,
html body .dss-product-page .dss-cselect-trigger:focus {
  border-color: var(--dss-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255, 214, 35, 0.25) !important;
  outline: none !important;
}

html body .dss-product-page .dss-cselect-value {
  flex: 1 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--dss-text) !important;
}
html body .dss-product-page .dss-cselect-value.is-placeholder {
  color: var(--dss-text-faint) !important;
  font-weight: 400 !important;
}

html body .dss-product-page .dss-cselect-arrow {
  flex: 0 0 auto !important;
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1) !important;
  color: var(--dss-text-muted) !important;
  pointer-events: none !important;
}
html body .dss-product-page .dss-cselect-arrow svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
}
html body .dss-product-page .dss-cselect.is-open .dss-cselect-arrow {
  transform: rotate(180deg) !important;
  color: var(--dss-text) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   THE FLOATING DROPDOWN MENU
   ─────────────────────────────────────────────────────────────────────
   When a select opens, single-product.js moves the <ul.dss-cselect-menu>
   to <body> so it can never push sibling content. That means the menu
   no longer has `.dss-product-page` as an ancestor — so the rules below
   use `html body ul.dss-cselect-menu` which matches regardless of where
   the menu lives in the DOM.

   Literal color values (no CSS variables) — variables scoped to
   `.dss-product-page` don't resolve when the menu sits in <body>.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body ul.dss-cselect-menu {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 6px !important;
  overflow-y: auto !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16) !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  color: #1a1a1a !important;
  animation: dssCselectFadeIn .18s ease !important;
  /* Fallback position — JS overrides with position:fixed inline !important */
  position: absolute !important;
  z-index: 99999 !important;
  max-height: 280px !important;
  box-sizing: border-box !important;
}
html body ul.dss-cselect-menu[hidden] {
  display: none !important;
}
/* When JS flips the menu upward, animate from the bottom edge */
html body ul.dss-cselect-menu.opens-up {
  animation: dssCselectFadeInUp .18s ease !important;
}

@keyframes dssCselectFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dssCselectFadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

html body ul.dss-cselect-menu .dss-cselect-option {
  padding: 11px 14px !important;
  font-size: 14px !important;
  color: #1a1a1a !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  list-style: none !important;
  margin: 0 !important;
  display: block !important;
  transition: background-color .12s ease, color .12s ease !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  user-select: none !important;
  border: none !important;
  background: transparent !important;
}
html body ul.dss-cselect-menu .dss-cselect-option::before,
html body ul.dss-cselect-menu .dss-cselect-option::after {
  display: none !important;
  content: none !important;
}
html body ul.dss-cselect-menu .dss-cselect-option:hover,
html body ul.dss-cselect-menu .dss-cselect-option.is-focused {
  background: #fff9d6 !important;
  color: #1a1a1a !important;
}
html body ul.dss-cselect-menu .dss-cselect-option.dss-cselect-selected {
  background: #ffd623 !important;
  color: #1a1a1a !important;
  font-weight: 700 !important;
}
html body ul.dss-cselect-menu .dss-cselect-option.dss-cselect-selected:hover {
  background: #ffd623 !important;
}
html body ul.dss-cselect-menu .dss-cselect-option.dss-cselect-placeholder {
  color: #999999 !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
html body ul.dss-cselect-menu .dss-cselect-option.is-disabled {
  color: #999999 !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}
html body ul.dss-cselect-menu .dss-cselect-option.is-disabled:hover {
  background: transparent !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TITLE ACCENT — yellow underline under the product title for polish
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body .dss-product-page .product_title.entry-title {
  position: relative !important;
  padding-bottom: 14px !important;
  margin: 0 0 4px !important;
}
html body .dss-product-page .product_title.entry-title::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 52px !important;
  height: 3px !important;
  background: var(--dss-yellow) !important;
  border-radius: 2px !important;
  display: block !important;
}


/* ───── 5c. PRODUCT ADD-ONS (Version dropdown etc.) ────────────────── */
html body .dss-product-page .wc-pao-addons-container {
  margin: 0 !important;
  padding: 0 !important;
}
html body .dss-product-page .wc-pao-addon-container {
  margin: 0 0 14px !important;
  padding: 0 !important;
  position: relative !important;
  background: transparent !important;
  border: none !important;
  isolation: isolate !important;
  overflow: visible !important;
}
html body .dss-product-page .wc-pao-addon-name {
  position: absolute !important;
  top: -8px !important;
 
  background: var(--dss-bg-page) !important;
 
  z-index: 10 !important;
  font-size:  1.2rem  !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--dss-text) !important;
  margin: 0 !important;
  display: inline-block !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
html body .dss-product-page em.required {
  color: var(--dss-danger) !important;
  margin-left: 4px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  display: inline !important;
}
html body .dss-product-page .form-row.wc-pao-addon-wrap {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Add-on info links ("… Click here for more information") — the default
   WooCommerce/browser anchor renders purple/blue with an underline, and
   an ugly purple once visited. Force a clean, professional look: black,
   no underline, medium weight, in ALL states (link/visited/hover/focus/
   active) so visited links match. A subtle yellow underline appears only
   on hover/focus for affordance. Covers links inside the add-on name and
   description wrappers. */
html body .dss-product-page .wc-pao-addon-name a,
html body .dss-product-page .wc-pao-addon-name a:link,
html body .dss-product-page .wc-pao-addon-name a:visited,
html body .dss-product-page .wc-pao-addon-description a,
html body .dss-product-page .wc-pao-addon-description a:link,
html body .dss-product-page .wc-pao-addon-description a:visited,
html body .dss-product-page .wc-pao-addon-container a,
html body .dss-product-page .wc-pao-addon-container a:link,
html body .dss-product-page .wc-pao-addon-container a:visited {
    color: rgba(0, 0, 0, 0.5);
    text-decoration: none !important;
    font-weight: normal !important;
    font-style: italic;
    border-bottom: 1.5px solid transparent !important;
    transition: border-color .15s ease, color .15s ease !important;
}
html body .dss-product-page .wc-pao-addon-name a:hover,
html body .dss-product-page .wc-pao-addon-name a:focus-visible,
html body .dss-product-page .wc-pao-addon-description a:hover,
html body .dss-product-page .wc-pao-addon-description a:focus-visible,
html body .dss-product-page .wc-pao-addon-container a:hover,
html body .dss-product-page .wc-pao-addon-container a:focus-visible {
  color: var(--dss-text) !important;
  text-decoration: none !important;
  border-bottom-color: var(--dss-yellow) !important;
  outline: none !important;
}

/* Hide the WPC tiered-pricing widget on PDP — visual noise */
/* Squeeze the tiered pricing block to 60% width — but ONLY when
   .fpd-loader-wrapper IS present somewhere on the page.
   If .fpd-loader-wrapper is absent, this rule is skipped entirely
   and the block keeps its normal/default width. */
html body:has(.fpd-loader-wrapper) .dss-product-page .tpt__tiered-pricing,
html body:has(.fpd-loader-wrapper) .dss-product-page .tpt__tiered-pricing-preloaded-variations {
  width: 60% !important;
  max-width: 60% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Hide the "1x Product Name … $XX.XX" breakdown row above the Subtotal.
   The screenshot reference shows ONLY the Subtotal line — not the
   per-item breakdown.

   Defensive hiding — WC PAO can render the breakdown as either a
   <table> with <tr>s, or as <div>s with various class names. We catch
   all common patterns here.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Pattern 1 — explicit WC PAO class names */
html body .dss-product-page #product-addons-total .wc-pao-row-product-price,
html body .dss-product-page #product-addons-total .wc-pao-col-name,
html body .dss-product-page #product-addons-total .wc-pao-product-totals,
html body .dss-product-page #product-addons-total .wc-pao-product-total,
html body .dss-product-page #product-addons-total .wc-pao-product-price,
html body .dss-product-page #product-addons-total .product-addon-totals-row,
html body .dss-product-page #product-addons-total table tr:not(.wc-pao-grand-total):not(.wc-pao-totals):not([class*="grand"]):not([class*="subtotal"]),

/* Pattern 2 — first child div (typical for div-based render) */
html body .dss-product-page #product-addons-total > div:not(:last-child):not(.wc-pao-grand-total):not(.wc-pao-totals):not([class*="grand"]):not([class*="subtotal"]),

/* Pattern 3 — table-based, all rows except the last */
html body .dss-product-page #product-addons-total table tbody tr:not(:last-of-type),

/* Pattern 4 — any extra <hr> / dividers WC PAO injects */
html body .dss-product-page #product-addons-total hr {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* But ensure the grand total / subtotal row is visible */
html body .dss-product-page #product-addons-total .wc-pao-grand-total,
html body .dss-product-page #product-addons-total .wc-pao-totals,
html body .dss-product-page #product-addons-total tr[class*="grand-total"],
html body .dss-product-page #product-addons-total tr[class*="subtotal"],
html body .dss-product-page #product-addons-total > div:last-child {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
}
html body .dss-product-page #product-addons-total table tr.wc-pao-grand-total,
html body .dss-product-page #product-addons-total table tr.wc-pao-totals,
html body .dss-product-page #product-addons-total table tr[class*="grand-total"],
html body .dss-product-page #product-addons-total table tr[class*="subtotal"],
html body .dss-product-page #product-addons-total table tbody tr:last-of-type {
  display: table-row !important;
  visibility: visible !important;
}


/* ───── 5d. SUBTOTAL + QTY + ADD TO CART + WISHLIST ────────────────── */
html body .dss-product-page #product-addons-total {
  margin: 8px 0 !important;
  padding: 14px 0 0 !important;
  border: none !important;
  /* border-top: 1px solid var(--dss-border) !important; */
  font-size: 15px !important;
  background: transparent !important;
  color: var(--dss-text) !important;
}
html body .dss-product-page #product-addons-total .wc-pao-subtotal-line { display: block !important;     background-color: rgba(0, 0, 0, 0.1);
    padding-left: 0.5rem; }
html body .dss-product-page #product-addons-total .wc-pao-subtotal-label {
  color: var(--dss-text-muted) !important;
 
}

/* Required-addons validation alert */
html body .dss-product-page .validation_message {
  padding: 10px 14px !important;
  border-radius: var(--dss-radius) !important;
  background: #fdf0f0 !important;
  border-left: 3px solid var(--dss-danger) !important;
  font-size: 13px !important;
  color: var(--dss-danger) !important;
  margin: 6px 0 !important;
}

html body .dss-product-page .woocommerce-variation-add-to-cart {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 4px !important;
  padding: 0 !important;
}

/* Quantity — gray pill */
html body .dss-product-page .quantity {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
html body .dss-product-page .quantity .qty {
  width: 56px !important;
  height: 42px !important;
  border: 1.5px solid var(--dss-border) !important;
  border-radius: var(--dss-radius-pill) !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background-color: var(--dss-bg-soft) !important;
  color: var(--dss-text) !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
  font-family: inherit !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease !important;
}
html body .dss-product-page .quantity .qty::-webkit-outer-spin-button,
html body .dss-product-page .quantity .qty::-webkit-inner-spin-button {
  display: none !important;
  -webkit-appearance: none !important;
  margin: 0 !important;
}
html body .dss-product-page .quantity .qty:focus {
  outline: none !important;
  border-color: var(--dss-yellow) !important;
  background-color: var(--dss-bg-page) !important;
}

/* Add to cart — yellow pill */
html body .dss-product-page .single_add_to_cart_button,
html body .dss-product-page button.button.alt,
html body .dss-product-page .single_add_to_cart_button.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--dss-yellow) !important;
  background-image: none !important;
  color: var(--dss-text) !important;
  border: none !important;
  padding: 12px 32px !important;
  border-radius: var(--dss-radius-pill) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  box-shadow: var(--dss-shadow-md) !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
  font-family: inherit !important;
  text-decoration: none !important;
  line-height: 1 !important;
  min-height: 42px !important;
  text-shadow: none !important;
  text-transform: none !important;
  height: auto !important;
  width: auto !important;
}
html body .dss-product-page .single_add_to_cart_button:hover,
html body .dss-product-page button.button.alt:hover {
  background-color: var(--dss-yellow-hover) !important;
  color: var(--dss-text) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--dss-shadow-lg) !important;
  opacity: 1 !important;
}
html body .dss-product-page .single_add_to_cart_button:active {
  transform: translateY(0) !important;
}
html body .dss-product-page .single_add_to_cart_button.disabled,
html body .dss-product-page .single_add_to_cart_button.wc-variation-selection-needed {
  background-color: #f0f0f0 !important;
  color: #a8a8a8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
html body .dss-product-page .single_add_to_cart_button.disabled:hover {
  transform: none !important;
  background-color: #f0f0f0 !important;
  color: #a8a8a8 !important;
  box-shadow: none !important;
}

/* Wishlist link */
html body .dss-product-page .tinv-wraper {
  width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  display: block !important;
}
html body .dss-product-page .tinv-wishlist-clear { display: none !important; }
html body .dss-product-page .tinvwl_add_to_wishlist_button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: none !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  color: var(--dss-text-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: color .15s ease !important;
  height: auto !important;
  width: auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  line-height: 1.4 !important;
}
html body .dss-product-page .tinvwl_add_to_wishlist_button::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b6b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
}
html body .dss-product-page .tinvwl_add_to_wishlist-text {
  font-size: 14px !important;
  color: var(--dss-text-muted) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
html body .dss-product-page .tinvwl_add_to_wishlist_button:hover,
html body .dss-product-page .tinvwl_add_to_wishlist_button:hover .tinvwl_add_to_wishlist-text {
  color: var(--dss-text) !important;
  opacity: 1 !important;
}
html body .dss-product-page .tinvwl-tooltip { display: none !important; }

/* Hide inline product-meta in summary — JS relocates it to Description tab */
html body .dss-product-page .summary .product_meta,
html body .dss-product-page .product > .product_meta {
  /* display: none !important; */
}


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  6. TABS — yellow pill (active) / white pill (inactive)               ║
   ╚════════════════════════════════════════════════════════════════════════╝ */
html body .dss-product-page .woocommerce-tabs.wc-tabs-wrapper {
  margin: 56px 0 0 !important;
  padding: 0 !important;
  clear: both !important;
  width: 100% !important;
  float: none !important;
  position: relative !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HAZARD-STRIPE DIVIDER  —  Black/yellow diagonal stripes attached to
   the tabs wrapper itself. Renders DIRECTLY above the `.woocommerce-tabs.wc-tabs-wrapper`
   element (i.e. above the "Description / Additional information / Reviews" pills).

   Why ::before on the tabs wrapper?
     • The wc_content blob inserts the tabs wrapper inside our Twig as raw
       HTML — we can't add markup INSIDE that blob via Twig.
     • A pseudo-element attaches CSS-side, no JS / no DOM injection needed.
     • The stripe lives in the same containing block as the tabs, so it
       can NEVER drift if the surrounding layout changes.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body .dss-product-page .woocommerce-tabs.wc-tabs-wrapper::before {
  content: "" !important;
  display: block !important;
 
  height: 14px !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  background-color: #1a1a1a !important;
  background-image: repeating-linear-gradient(
    -45deg,
    #ffd623 0,
    #ffd623 18px,
    #1a1a1a 18px,
    #1a1a1a 36px
  ) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  position: relative !important;
  z-index: 1 !important;
}
html body .dss-product-page .woocommerce-tabs ul.tabs,
html body .dss-product-page .woocommerce-tabs ul.wc-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  list-style: none !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
html body .dss-product-page .woocommerce-tabs ul.tabs::before,
html body .dss-product-page .woocommerce-tabs ul.tabs::after {
  display: none !important;
  content: none !important;
}

html body .dss-product-page .woocommerce-tabs ul.tabs li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--dss-bg-card) !important;
  border: none !important;
  border-radius: var(--dss-radius) !important;
  box-shadow: var(--dss-shadow-sm) !important;
  position: relative !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
  display: list-item !important;
  float: none !important;
}
html body .dss-product-page .woocommerce-tabs ul.tabs li::before,
html body .dss-product-page .woocommerce-tabs ul.tabs li::after {
  display: none !important;
  content: none !important;
}
html body .dss-product-page .woocommerce-tabs ul.tabs li:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--dss-shadow-md) !important;
}

html body .dss-product-page .woocommerce-tabs ul.tabs li a {
  display: inline-block !important;
  padding: 12px 22px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--dss-text) !important;
  text-decoration: none !important;
  border-radius: var(--dss-radius) !important;
  background: transparent !important;
  letter-spacing: 0.005em !important;
  border: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  line-height: 1.3 !important;
}
html body .dss-product-page .woocommerce-tabs ul.tabs li a:hover {
  color: var(--dss-text) !important;
  opacity: 1 !important;
  background: transparent !important;
}

/* Active tab — yellow with chevron */
html body .dss-product-page .woocommerce-tabs ul.tabs li.active,
html body .dss-product-page .woocommerce-tabs ul.tabs li[aria-selected="true"] {
  background: var(--dss-yellow) !important;
  box-shadow: var(--dss-shadow-md) !important;
  border: none !important;
}
html body .dss-product-page .woocommerce-tabs ul.tabs li.active a,
html body .dss-product-page .woocommerce-tabs ul.tabs li[aria-selected="true"] a {
  color: var(--dss-text) !important;
  padding-right: 36px !important;
  background: transparent !important;
}
html body .dss-product-page .woocommerce-tabs ul.tabs li.active a::after {
  content: "›" !important;
  position: absolute !important;
  top: 50% !important;
  right: 18px !important;
  transform: translateY(-52%) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--dss-text) !important;
  line-height: 1 !important;
  display: block !important;
}


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  7. TAB PANELS — white card with serif heading                        ║
   ╚════════════════════════════════════════════════════════════════════════╝ */
html body .dss-product-page .woocommerce-Tabs-panel {
  background: var(--dss-bg-card) !important;
  border: 1px solid var(--dss-border-soft) !important;
  border-radius: var(--dss-radius-lg) !important;
  padding: clamp(20px, 3vw, 32px) !important;
  box-shadow: var(--dss-shadow-sm) !important;
  margin: 0 !important;
}
html body .dss-product-page .woocommerce-Tabs-panel h2 {

  
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--dss-text) !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}
html body .dss-product-page .woocommerce-Tabs-panel p,
html body .dss-product-page .woocommerce-Tabs-panel li {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #2c2c2c !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}
html body .dss-product-page .woocommerce-Tabs-panel ul,
html body .dss-product-page .woocommerce-Tabs-panel ol {
  padding-left: 22px !important;
  margin: 0 0 14px !important;
}
html body .dss-product-page .woocommerce-Tabs-panel ul { list-style: disc !important; }

/* Description tab: SKU/Category/Tags inside the card */
html body .dss-product-page .woocommerce-Tabs-panel--description .product_meta,
html body .dss-product-page .woocommerce-Tabs-panel--description ~ .product_meta {
  display: block !important;
  margin: 20px 0 0 !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid var(--dss-border) !important;
  border-bottom: none !important;
  font-size: 13px !important;
  color: var(--dss-text-muted) !important;
  background: transparent !important;
}
html body .dss-product-page .woocommerce-Tabs-panel--description .product_meta > span,
html body .dss-product-page .woocommerce-Tabs-panel--description ~ .product_meta > span {
  display: block !important;
  margin: 4px 0 !important;
}
html body .dss-product-page .woocommerce-Tabs-panel--description .product_meta a,
html body .dss-product-page .woocommerce-Tabs-panel--description ~ .product_meta a {
  color: var(--dss-text-muted) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
html body .dss-product-page .woocommerce-Tabs-panel--description .product_meta a:hover,
html body .dss-product-page .woocommerce-Tabs-panel--description ~ .product_meta a:hover {
  color: var(--dss-text) !important;
  opacity: 1 !important;
}
 
/* Attributes table */
html body .dss-product-page .woocommerce-product-attributes {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}
html body .dss-product-page .woocommerce-product-attributes th,
html body .dss-product-page .woocommerce-product-attributes td {
  padding: 12px 14px !important;
  font-size: 14px !important;
  text-align: left !important;
  border: 1px solid var(--dss-border-soft) !important;
  background: transparent !important;
}
html body .dss-product-page .woocommerce-product-attributes th {
  background: var(--dss-bg-soft) !important;
  font-weight: 600 !important;
  width: 32% !important;
  color: var(--dss-text) !important;
}
html body .dss-product-page .woocommerce-product-attributes td p { margin: 0 !important; }
html body .dss-product-page .woocommerce-product-attributes a {
  color: var(--dss-text) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  font-weight: 400 !important;
}

/* Reviews */
html body .dss-product-page #reviews .woocommerce-Reviews-title {

  
  font-size: 22px !important;
  font-weight: 400 !important;
  margin: 0 0 12px !important;
  color: var(--dss-text) !important;
}
html body .dss-product-page .woocommerce-noreviews,
html body .dss-product-page .woocommerce-verification-required {
  font-size: 14px !important;
  color: var(--dss-text-muted) !important;
  margin: 0 0 8px !important;
}


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  8. RELATED PRODUCTS — 6/4/2 responsive grid of white cards           ║
   ╚════════════════════════════════════════════════════════════════════════╝ */
html body .dss-product-page .related.products,
html body .dss-product-page .upsells.products {
  margin: 64px 0 0 !important;
  padding: 0 !important;
  clear: both !important;
  width: 100% !important;
  float: none !important;
}
html body .dss-product-page .related.products > h2,
html body .dss-product-page .upsells.products > h2 {

  
  font-size: clamp(22px, 2.4vw, 28px) !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  color: var(--dss-text) !important;
  border: none !important;
}

/* Desktop default: 6 cards per row. Tablet (≤1200px) drops to 4, mobile
   (≤768px) drops to 2 — see RESPONSIVE section below. */
html body .dss-product-page ul.products,
html body .dss-product-page .products ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 16px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body .dss-product-page ul.products::before,
html body .dss-product-page ul.products::after {
  display: none !important;
  content: none !important;
}
/* Card width is fixed at 1/6 of the row (minus its share of the gap) —
   NOT a stretchy grid track. That's what lets justify-content: center
   above pull a partial row (4, 3, 2 or 1 cards) to the middle instead of
   leaving empty track space hugging the right edge. */
html body .dss-product-page ul.products li.product,
html body .dss-product-page .products li.product {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 calc((100% - 80px) / 6) !important;
  width: calc((100% - 80px) / 6) !important;
  max-width: calc((100% - 80px) / 6) !important;
  float: none !important;
  clear: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
html body .dss-product-page ul.products li.product::before,
html body .dss-product-page ul.products li.product::after {
  display: none !important;
  content: none !important;
}

/* Card wrapper (the <a> that contains image + title + price) — flexes to
   fill the card so the price sits at a consistent spot and the button
   below (a sibling) lines up on the same row across every card. */
html body .dss-product-page ul.products li.product > a.woocommerce-LoopProduct-link {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  background: var(--dss-bg-card) !important;
  border: none !important;
  border-radius: var(--dss-radius-lg) !important;
  box-shadow: var(--dss-shadow-md) !important;
  padding: 14px 14px 16px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  overflow: hidden !important;
}
html body .dss-product-page ul.products li.product > a.woocommerce-LoopProduct-link:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--dss-shadow-lg) !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

/* Loop image — FIXED height so every thumbnail on the grid is the exact
   same size, with object-fit: contain so the FULL product image is always
   visible (nothing cropped off), centered on a white field. */
html body .dss-product-page ul.products li.product img,
html body .dss-product-page ul.products li.product .wp-post-image {
  width: 100% !important;
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: var(--dss-bg-page) !important;
  border-radius: var(--dss-radius) !important;
  padding: 6px !important;
  margin: 0 0 12px !important;
  border: none !important;
  display: block !important;
}

/* Loop title — visible, clamped to a MAX of 2 lines with an ellipsis on
   overflow, and a fixed min-height so short and long titles both end at
   the same baseline before the price. */
html body .dss-product-page ul.products li.product .woocommerce-loop-product__title,
html body .dss-product-page ul.products li.product h2,
html body .dss-product-page ul.products li.product h3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--dss-text) !important;
  text-align: center !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  min-height: calc(1.35em * 2) !important;
  max-height: calc(1.35em * 2) !important;
  text-transform: none !important;
}

/* Loop price */
html body .dss-product-page ul.products li.product .price {
  display: block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--dss-text) !important;
  text-align: center !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}
html body .dss-product-page ul.products li.product .price::before {
  content: "From: " !important;
  font-weight: 600 !important;
}
html body .dss-product-page ul.products li.product .price .tiered-pricing-dynamic-price-wrapper > * {
  display: none !important;
}
html body .dss-product-page ul.products li.product .price .tiered-pricing-dynamic-price-wrapper > .woocommerce-Price-amount:first-of-type,
html body .dss-product-page ul.products li.product .price .tiered-pricing-dynamic-price-wrapper > .woocommerce-price-suffix {
  display: inline !important;
}
html body .dss-product-page ul.products li.product .price .woocommerce-Price-amount {
  font-size: 16px !important;
  font-weight: 800 !important;
}
html body .dss-product-page ul.products li.product .price .woocommerce-price-suffix {
  font-size: 11px !important;
}

/* "Select Options" / "Add to cart" loop button */
html body .dss-product-page ul.products li.product .button,
html body .dss-product-page ul.products li.product a.button,
html body .dss-product-page ul.products li.product .add_to_cart_button {
  display: block !important;
  width: 100% !important;
  background-color: var(--dss-yellow) !important;
  background-image: none !important;
  color: var(--dss-text) !important;
  padding: 10px 16px !important;
  border-radius: var(--dss-radius-pill) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  margin: 0 !important;
  box-shadow: var(--dss-shadow-sm) !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
  font-family: inherit !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  text-shadow: none !important;
  position: relative !important;
  z-index: 2 !important;
}
html body .dss-product-page ul.products li.product .button:hover {
  background-color: var(--dss-yellow-hover) !important;
  color: var(--dss-text) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--dss-shadow-md) !important;
  opacity: 1 !important;
}

/* Loop wishlist BELOW the card */
html body .dss-product-page ul.products li.product .tinv-wraper {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
html body .dss-product-page ul.products li.product .tinvwl_add_to_wishlist_button {
  font-size: 13px !important;
  color: var(--dss-text-muted) !important;
  justify-content: center !important;
}

/* Hide loop chrome we don't want */
html body .dss-product-page ul.products li.product .added_to_cart,
html body .dss-product-page ul.products li.product .star-rating,
html body .dss-product-page ul.products li.product .screen-reader-text {
  display: none !important;
}

html body .dss-product-page .clear { clear: both !important; }


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  9. RESPONSIVE                                                        ║
   ╚════════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 1200px) {
  html body .dss-product-page ul.products li.product,
  html body .dss-product-page .products li.product {
    flex: 0 0 calc((100% - 48px) / 4) !important;
    width: calc((100% - 48px) / 4) !important;
    max-width: calc((100% - 48px) / 4) !important;
  }
  html body .dss-product-page ul.products li.product img,
  html body .dss-product-page ul.products li.product .wp-post-image {
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;
  }
}
@media (max-width: 768px) {
  html body .dss-product-page .dss-product-container { padding: 16px !important; }
  html body .dss-product-page .product.type-product {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* FPD pages: form/price/description full-width again on mobile (60% is desktop-only). */
  html body .dss-product-page .product.type-product:has(.fpd-product-designer-wrapper) > .summary.entry-summary > .price,
  html body .dss-product-page .product.type-product:has(.fpd-product-designer-wrapper) > .summary.entry-summary > p.price,
  html body .dss-product-page .product.type-product:has(.fpd-product-designer-wrapper) > .summary.entry-summary > .woocommerce-product-details__short-description,
  html body .dss-product-page .product.type-product:has(.fpd-product-designer-wrapper) > .summary.entry-summary > form.cart,
  html body .dss-product-page .product.type-product:has(.fpd-product-designer-wrapper) > .summary.entry-summary > form.variations_form,
  html body .dss-product-page .product.type-product:has(.fpd-product-designer-wrapper) > .summary.entry-summary > .wc-pao-addons-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .dss-product-page .product_title.entry-title { font-size: 22px !important; }
  html body .dss-product-page .woocommerce-product-gallery__image img { max-height: 380px !important; }
  html body .dss-product-page .woocommerce-tabs.wc-tabs-wrapper { margin-top: 40px !important; }
  html body .dss-product-page .related.products,
  html body .dss-product-page .upsells.products { margin-top: 40px !important; }
  html body .dss-product-page ul.products,
  html body .dss-product-page .products ul {
    gap: 14px !important;
  }
  html body .dss-product-page ul.products li.product,
  html body .dss-product-page .products li.product {
    flex: 0 0 calc((100% - 14px) / 2) !important;
    width: calc((100% - 14px) / 2) !important;
    max-width: calc((100% - 14px) / 2) !important;
  }
}
@media (max-width: 480px) {
  html body .dss-product-page .dss-product-container { padding: 12px !important; }
  html body .dss-product-page .woocommerce-tabs ul.tabs { gap: 6px !important; }
  html body .dss-product-page .woocommerce-tabs ul.tabs li a {
    padding: 10px 16px !important;
    font-size: 12px !important;
  }
  html body .dss-product-page .woocommerce-tabs ul.tabs li.active a { padding-right: 28px !important; }
  html body .dss-product-page .woocommerce-tabs ul.tabs li.active a::after { right: 12px !important; font-size: 16px !important; }
  html body .dss-product-page .single_add_to_cart_button { width: 100% !important; }
  html body .dss-product-page .quantity { width: auto !important; }
  html body .dss-product-page .woocommerce-Tabs-panel { padding: 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body .dss-product-page *,
  html body .dss-product-page *::before,
  html body .dss-product-page *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  ★  MOBILE EXPERIENCE  ★                                              ║
   ║                                                                        ║
   ║  Everything below targets ≤768px only. Desktop is COMPLETELY untouched.║
   ║  Mobile chrome (top bar, hero wrap, bottom bar, carousel) is injected  ║
   ║  by single-product.js. Existing markup stays 100% intact.              ║
   ║                                                                        ║
   ║  Edit map:                                                             ║
   ║    1. Mobile chrome hidden on desktop      (line ~M-1)                 ║
   ║    2. Mobile sticky top header             (line ~M-2)                 ║
   ║    3. Mobile yellow hero + hazard stripe   (line ~M-3)                 ║
   ║    4. Mobile eyebrow row (SKU · STOCK)     (line ~M-4)                 ║
   ║    5. Mobile title / description / price   (line ~M-5)                 ║
   ║    6. Mobile dropdowns + form              (line ~M-6)                 ║
   ║    7. Mobile tabs (horizontal scroll)      (line ~M-7)                 ║
   ║    8. Mobile description card              (line ~M-8)                 ║
   ║    9. Mobile related products carousel     (line ~M-9)                 ║
   ║   10. Mobile sticky bottom action bar      (line ~M-10)                ║
   ╚════════════════════════════════════════════════════════════════════════╝ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   M-1 ·  HIDE MOBILE CHROME ON DESKTOP (≥769px)
   Always-injected elements get class `.mobile-only` — hidden everywhere
   except the mobile breakpoint below.

   IMPORTANT  —  .dss-m-hero is NOT in the hide list.
   On mobile, .dss-m-hero is the yellow box that wraps the WC product
   gallery (the gallery is moved INTO it by single-product.js). If we
   hide the hero on desktop, we'd also hide the gallery inside it,
   leaving the left column of the product page empty.
   So on desktop we set .dss-m-hero to `display: contents` instead — the
   element disappears from the layout, but its child (the gallery) is
   "promoted" back up to be a direct child of `.product.type-product`,
   exactly where the WooCommerce grid expects it (column 1).
   The .dss-m-hero-back chip (mobile-only class) and the .dss-m-hero-stripe
   ARE still hidden by the rule below.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 769px) {
  html body .dss-m-header,
  html body .dss-product-page .dss-m-hero-stripe,
  html body .dss-product-page .dss-m-hero-back,
  html body .dss-product-page .dss-m-eyebrow-row,
  html body .dss-product-page .dss-m-related-subtitle,
  html body .dss-product-page .dss-m-carousel-pagination,
  html body .dss-m-bottombar,
  html body .mobile-only { display: none !important; }

  /* Hero becomes a transparent passthrough on desktop —
     its child gallery is promoted to the parent grid as column 1.
     MAXIMUM SPECIFICITY: triple-class selector beats any other
     rule that might try to hide it (e.g. .mobile-only if the class
     ever sneaks back onto the hero element). */
  html body div.dss-product-page div.dss-m-hero,
  html body .dss-product-page .dss-m-hero,
  html body .dss-product-page div.dss-m-hero.dss-m-hero {
    display: contents !important;
    background: none !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    position: static !important;
  }
}


@media (max-width: 768px) {

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     M-2 · LEGACY STICKY HEADER  —  HIDDEN
     The wishlist + chevron buttons were removed per your request, and the
     back button moved INTO the hero (see M-3 · DSS-M-HERO-BACK below).
     This rule kills any leftover .dss-m-header element if one ever lands
     in the DOM from a cached JS run.
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  html body .dss-product-page .dss-m-header,
  html body .dss-m-header { display: none !important; }


  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     M-3 · YELLOW HERO  +  CENTERED WHITE CARD  +  HAZARD STRIPE
     Matches design reference exactly:
       • Full-bleed yellow background with diagonal stripes
       • Round back-arrow chip overlaid in the top-left
       • Product image lives inside a centered WHITE CARD with shadow
       • Black/yellow hazard stripe pinned at the bottom edge
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  html body .dss-product-page .dss-m-hero {
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    padding: 80px 24px 0 !important;  /* extra top room for the back-arrow chip */
    background-color: #ffd623 !important;
    background-image: repeating-linear-gradient(
      135deg,
      rgba(0,0,0,0)    0,
      rgba(0,0,0,0)    18px,
      rgba(0,0,0,0.08) 18px,
      rgba(0,0,0,0.08) 36px
    ) !important;
    overflow: hidden !important;
    width:100%;
  }

  /* Back-arrow chip — overlaid on the yellow hero, top-left */
  html body .dss-product-page .dss-m-hero-back {
    position: absolute !important;
    top: 18px !important;
    left: 18px !important;
    z-index: 5 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.92) !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.10) !important;
    padding: 0 !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
  }
  html body .dss-product-page .dss-m-hero-back:active {
    transform: scale(0.94) !important;
  }
  html body .dss-product-page .dss-m-hero-back svg { display: block !important; }

  /* THE WHITE CARD — the WC product gallery becomes a centered card */
  html body .dss-product-page .dss-m-hero .woocommerce-product-gallery {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important;
    padding: 32px 24px !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 380px !important;
    min-height: 320px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
  }
  html body .dss-product-page .dss-m-hero .woocommerce-product-gallery__wrapper,
  html body .dss-product-page .dss-m-hero .flex-viewport,
  html body .dss-product-page .dss-m-hero .woocommerce-product-gallery__image {
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  /* The product image itself — centered, properly sized, no drop-shadow */
  html body .dss-product-page .dss-m-hero .woocommerce-product-gallery__image img,
  html body .dss-product-page .dss-m-hero .woocommerce-product-gallery .wp-post-image,
  html body .dss-product-page .dss-m-hero .woocommerce-product-gallery img {
    display: inline-block !important;
    max-height: 280px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    filter: none !important;
    background: transparent !important;
  }
  /* Magnifier zoom trigger — subtle white pill in card corner */
  html body .dss-product-page .dss-m-hero .woocommerce-product-gallery__trigger {
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    width: 36px !important;
    height: 36px !important;
 
  }

  /* ─────────────────────────────────────────────────────────────────
     KILL THE HOVER-ZOOM GHOST IMAGE ON MOBILE
     ─────────────────────────────────────────────────────────────────
     WooCommerce's built-in hover-zoom (jQuery zoom, wired up by
     wc-single-product.js) injects a second <img class="zoomImg"> next
     to the real product image and toggles it visible on mouseenter,
     positioning it with inline styles to create the "magnifying glass"
     pan effect. There is no real mouseenter on a touch screen, but iOS/
     Android browsers still fire a synthetic hover on the first tap —
     and because there's no matching "mouseleave" on touch, the zoomImg
     never gets hidden again. The result is exactly what you're seeing:
     a second, slightly-offset copy of the product image left sitting
     on top of the real one, clipped by the card's overflow:hidden.

     Zoom-on-hover has no meaning on a touchscreen anyway — the existing
     magnifying-glass trigger button (.woocommerce-product-gallery__trigger)
     already opens the full PhotoSwipe lightbox for a proper "tap to zoom"
     experience — so we remove the hover-zoom ghost outright rather than
     trying to keep it perfectly clipped/positioned.

     `display: none !important` is used deliberately: wc-single-product.js
     only ever toggles zoomImg via inline `opacity`/`top`/`left`/`width`/
     `height` (no !important), so no matter what state the plugin's JS
     puts it in, `!important` here always wins and the element renders
     nothing. This selector's specificity (0,4,3) is also higher than
     the generic `.dss-m-hero .woocommerce-product-gallery img` rule
     above (0,3,3), so it can't accidentally get re-shown by that rule
     even if the cascade order in this file ever changes. */
  html body .dss-product-page .dss-m-hero .woocommerce-product-gallery__image img.zoomImg,
  html body .dss-product-page .woocommerce-product-gallery img.zoomImg,
  html body .dss-product-page img.zoomImg {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Hazard stripe — pinned to the bottom edge of the hero, full-bleed */
  html body .dss-product-page .dss-m-hero-stripe {
    display: block !important;
    height: 14px !important;
    margin: 28px -24px 0 !important;  /* negative margin overpowers hero padding */
    background-image: repeating-linear-gradient(
      -45deg,
      #ffd623 0,    #ffd623 18px,
      #1a1a1a 18px, #1a1a1a 36px
    ) !important;
    border-radius: 0 !important;
  }



  /* ── M-4 · EYEBROW ROW (SKU · ISO · STOCK    ★★★★★ (n)) ────────────── */
  html body .dss-product-page .dss-m-eyebrow-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 20px 0 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #6b6b6b !important;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  }
  html body .dss-product-page .dss-m-eyebrow-info {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body .dss-product-page .dss-m-eyebrow-rating {
    flex-shrink: 0 !important;
    color: #1a1a1a !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  html body .dss-product-page .dss-m-eyebrow-stars {
    color: #1a1a1a !important;
    letter-spacing: 1px !important;
    font-size: 13px !important;
  }
  html body .dss-product-page .dss-m-eyebrow-rating-count {
    color: #1a1a1a !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }


  /* ── M-5 · TITLE / DESCRIPTION / PRICE  ────────────────────────────── */
  /* Container edges full-bleed on mobile so the hero touches viewport */
  html body .dss-product-page .dss-product-container {
    padding: 0 !important;
    padding-bottom: 100px !important;  /* leave room for sticky bottom bar */
    max-width: 100% !important;
  }
  /* Hide desktop "Back to Shop" link on mobile — replaced by header back btn */
  html body .dss-product-page .dss-product-eyebrow { display: none !important; }

  /* Stack gallery + summary as flex with summary having horizontal padding */
  html body .dss-product-page .product.type-product {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    grid-template-columns: none !important;
  }
  html body .dss-product-page .summary.entry-summary {
    padding: 0 16px !important;
    margin: 0 !important;
    gap: 12px !important;
  }

  /* Bold uppercase mobile title (matches reference) */
  html body .dss-product-page .product_title.entry-title {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.01em !important;
    text-transform: uppercase !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Remove the desktop yellow accent line on mobile */
  html body .dss-product-page .product_title.entry-title::after {
    display: none !important;
    content: none !important;
  }

  /* Short description */
  html body .dss-product-page .woocommerce-product-details__short-description {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #555555 !important;
    margin: 0 !important;
  }

  /* Price */
  html body .dss-product-page .price,
  html body .dss-product-page p.price {
    font-size: 15px !important;
    margin: 4px 0 0 !important;
  }
  html body .dss-product-page .price .woocommerce-Price-amount {
    font-size: 28px !important;
    font-weight: 800 !important;
    margin: 0 4px !important;
  }


  /* ── M-6 · DROPDOWNS + FORM ────────────────────────────────────────── */
  html body .dss-product-page form.variations_form.cart {
    margin: 16px 0 0 !important;
    padding: 0 !important;
  }
  html body .dss-product-page table.variations tr { margin-bottom: 16px !important; }
  html body .dss-product-page .wc-pao-addon-container { margin-bottom: 16px !important; }

  /* Hide ENTIRE desktop add-to-cart row on mobile — sticky bar replaces it */
  html body .dss-product-page .woocommerce-variation-add-to-cart {
    display: none !important;
  }
  html body .dss-product-page #product-addons-total {
    display: none !important;
  }
  /* Hide the desktop wishlist (sticky bar has its own) */
  html body .dss-product-page .summary .tinv-wraper {
    display: none !important;
  }


  /* ── M-7 · TABS — horizontal scroll, no scrollbar ──────────────────── */
  html body .dss-product-page .woocommerce-tabs.wc-tabs-wrapper {
    margin: 32px 0 0 !important;
    padding: 0 16px !important;
  }
  html body .dss-product-page .woocommerce-tabs.wc-tabs-wrapper::before {
    /* Push the hazard stripe edge-to-edge on mobile */
    margin: 0 -16px 24px !important;
    border-radius: 0 !important;
  }
  html body .dss-product-page .woocommerce-tabs ul.tabs,
  html body .dss-product-page .woocommerce-tabs ul.wc-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    margin: 0 -16px 16px !important;
    padding: 0 16px 4px !important;
  }
  html body .dss-product-page .woocommerce-tabs ul.tabs::-webkit-scrollbar,
  html body .dss-product-page .woocommerce-tabs ul.wc-tabs::-webkit-scrollbar {
    display: none !important;
  }
  html body .dss-product-page .woocommerce-tabs ul.tabs li,
  html body .dss-product-page .woocommerce-tabs ul.wc-tabs li {
    flex-shrink: 0 !important;
  }


  /* ── M-8 · DESCRIPTION CARD ────────────────────────────────────────── */
  html body .dss-product-page .woocommerce-Tabs-panel {
    margin: 0 !important;
    padding: 22px 20px !important;
    border-radius: 14px !important;
  }
  html body .dss-product-page .woocommerce-Tabs-panel h2 {
    font-size: 22px !important;
  }
  html body .dss-product-page .woocommerce-Tabs-panel p,
  html body .dss-product-page .woocommerce-Tabs-panel li {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  /* Attributes table is responsive */
  html body .dss-product-page .woocommerce-product-attributes th,
  html body .dss-product-page .woocommerce-product-attributes td {
    padding: 10px !important;
    font-size: 13px !important;
  }


  /* ── M-9 · RELATED PRODUCTS — SWIPE CAROUSEL (2-up) ──────────────────── */
  html body .dss-product-page .related.products,
  html body .dss-product-page .upsells.products {
    padding: 0 16px !important;
    margin-top: 48px !important;
  }
  html body .dss-product-page .related.products > h2,
  html body .dss-product-page .upsells.products > h2 {
    text-align: left !important;
    font-size: 26px !important;
    font-weight: 800 !important;

    
    margin: 0 !important;
    padding: 0 !important;
  }
  html body .dss-product-page .dss-m-related-subtitle {
    display: block !important;
    font-size: 14px !important;
    color: #6b6b6b !important;
    margin: 6px 0 18px !important;
    padding: 0 !important;
  }
  /* Replace the desktop grid with a horizontal scroll snap rail, 2 cards
     visible at a time — this is the mobile "2 column" grid. */
  html body .dss-product-page .related.products ul.products,
  html body .dss-product-page .upsells.products ul.products,
  html body .dss-product-page .products ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;   /* every card same height (=tallest content) */
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    /* Gutter that the first/last card rests against on swipe. scroll-padding
       keeps snap points aligned to the 16px inset instead of the raw edge,
       so the left card is never flush to the screen. The rail stays inside
       the section's own 0 16px padding (no negative margin), giving an
       EQUAL 16px gutter on both sides. The leading gutter shifts every card
       by the same amount, so the width-based index math in the JS
       (step = card.width + 14, idx = round(scrollLeft / step)) is unaffected. */
    scroll-padding-left: 16px !important;
    scroll-padding-right: 16px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 4px 16px 8px !important;
  }
  /* Trailing spacer so the LAST card can also snap to the left gutter with
     the right-hand breathing room preserved (flex ignores a container's
     padding-right against an overflowing last child in some engines). */
  html body .dss-product-page .related.products ul.products::after,
  html body .dss-product-page .upsells.products ul.products::after,
  html body .dss-product-page .products ul::after {
    content: "" !important;
    display: block !important;
    flex: 0 0 2px !important;
    width: 2px !important;
  }
  html body .dss-product-page .related.products ul.products::-webkit-scrollbar,
  html body .dss-product-page .upsells.products ul.products::-webkit-scrollbar,
  html body .dss-product-page .products ul::-webkit-scrollbar {
    display: none !important;
  }
  /* ── Card sizing ─────────────────────────────────────────────────────
     calc((100% - 14px) / 2 - 8px)
       = (content - gap) / 2 - 8px per card
       = each card 8px narrower than an exact half-split
       → 16px total breathing room (8px on each side of the pair)
       → 2 cards fit PERFECTLY centered, NO peek of a third card
       → narrower cards = naturally taller looking proportion
       → 16px buffer absorbs scrollbars/sub-pixel rounding cleanly

     Each card becomes a flex COLUMN so:
       1. The "Select options" button is pinned to the BOTTOM via
          `margin-top: auto` → all buttons land on the SAME ROW
          baseline regardless of title line count.
       2. The link (image + title + price) gets `margin-bottom: 1rem`
          → minimum 1rem visual gap above the button.

     Equal heights: flex row stretches every card to the height of
     the tallest one (whose content determines the row height).
     ───────────────────────────────────────────────────────────────── */
  html body .dss-product-page .related.products ul.products li.product,
  html body .dss-product-page .upsells.products ul.products li.product,
  html body .dss-product-page .products ul li.product {
    /* Sizing — narrower so 2 cards fit perfectly with breathing room */
    flex: 0 0 calc((100% - 14px) / 2 - 8px) !important;
    width:     calc((100% - 14px) / 2 - 8px) !important;
    max-width: calc((100% - 14px) / 2 - 8px) !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;

    /* Flex column for button alignment + equal heights */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    box-sizing: border-box !important;

    /* No padding on the CARD — that would shrink the whole card. The inner
       gutter is applied to the text wrapper + button below, so only the
       title/price/button inset while the image stays full-bleed. */
    padding: 0 !important;

    /* Card height = whatever the tallest card needs.
       align-items:stretch on the ul takes care of equal heights. */
    height: auto !important;
  }

  /* The link wrapping image + title + price. Horizontal padding here gives
     the TITLE and PRICE their left/right breathing room. The image inside
     is pulled back out to full-bleed via a matching negative margin in its
     own rule below, so only the text is inset — the thumbnail still spans
     the full card width. */
  html body .dss-product-page ul.products li.product > a.woocommerce-LoopProduct-link,
  html body .dss-product-page ul.products li.product > a.woocommerce-loop-product__link,
  html body .dss-product-page ul.products li.product > a:not(.button):not(.add_to_cart_button):not(.tinvwl_add_to_wishlist_button) {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 0 1rem !important;
    padding: 0 14px !important;
    text-decoration: none !important;
    color: inherit !important;
  }

  /* Title — slightly smaller for the narrower card, still clamped to 2 lines */
  html body .dss-product-page ul.products li.product .woocommerce-loop-product__title,
  html body .dss-product-page ul.products li.product h2,
  html body .dss-product-page ul.products li.product h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 10px 0 6px !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  /* Clamp carousel titles to EXACTLY two lines and RESERVE two lines of
     height. -webkit-line-clamp caps long titles at 2 lines with an ellipsis;
     min-height (2 × 14px × 1.3 = 36.4px) means a one-line title still fills
     the same box, so the price + button rows below it land on the SAME
     baseline on every card. Scoped to the carousel selectors so the desktop
     grid (titles hidden there) is untouched. */
  html body .dss-product-page .related.products ul.products li.product .woocommerce-loop-product__title,
  html body .dss-product-page .related.products ul.products li.product h2,
  html body .dss-product-page .related.products ul.products li.product h3,
  html body .dss-product-page .upsells.products ul.products li.product .woocommerce-loop-product__title,
  html body .dss-product-page .upsells.products ul.products li.product h2,
  html body .dss-product-page .upsells.products ul.products li.product h3,
  html body .dss-product-page .products ul li.product .woocommerce-loop-product__title,
  html body .dss-product-page .products ul li.product h2,
  html body .dss-product-page .products ul li.product h3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 36.4px !important;
    max-height: 36.4px !important;
  }
  html body .dss-product-page ul.products li.product .price {
    text-align: left !important;
    font-size: 13px !important;
    margin: 0 !important;
  }
  html body .dss-product-page ul.products li.product .price .woocommerce-Price-amount {
    font-size: 14px !important;
    font-weight: 800 !important;
  }
  /* Thumbnails: FIXED square-ish box for every card, independent of the
     source image's real aspect ratio, with object-fit:contain so the
     FULL product image always stays visible (nothing cropped off),
     centered on a plain white field. Matches the desktop/tablet grid
     behaviour above — every thumbnail is exactly the same size. */
  html body .dss-product-page .related.products ul.products li.product img,
  html body .dss-product-page .related.products ul.products li.product .wp-post-image,
  html body .dss-product-page .upsells.products ul.products li.product img,
  html body .dss-product-page .upsells.products ul.products li.product .wp-post-image,
  html body .dss-product-page .products ul li.product img,
  html body .dss-product-page .products ul li.product .wp-post-image {
    aspect-ratio: auto !important;
    width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
  }
  /* "Select options" / "Add to cart" pill — PUSHED TO BOTTOM via margin-top:auto.
     This is what makes every yellow button land on the same horizontal row. */
  html body .dss-product-page ul.products li.product .button,
  html body .dss-product-page ul.products li.product a.button,
  html body .dss-product-page ul.products li.product .add_to_cart_button {
    margin-top: auto !important;   /* aligns every button to bottom of card */
    margin-bottom: 0 !important;
    margin-left: 14px !important;  /* match the title/price inset */
    margin-right: 14px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: auto !important;         /* stretch to the inset box, no overflow */
    box-sizing: border-box !important;
  }
  /* Wishlist text — smaller, sits naturally below the button */
  html body .dss-product-page ul.products li.product .tinv-wraper,
  html body .dss-product-page ul.products li.product .tinvwl-after-add-to-cart {
    margin-top: 8px !important;
    margin-left: 14px !important;
    margin-right: 14px !important;
  }
  html body .dss-product-page ul.products li.product .tinv-wishlist .tinvwl_add_to_wishlist_button,
  html body .dss-product-page ul.products li.product .tinvwl-after-add-to-cart a {
    font-size: 12px !important;
  }
  /* Pagination row */
  html body .dss-product-page .dss-m-carousel-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
  }
  html body .dss-product-page .dss-m-carousel-dots {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  html body .dss-product-page .dss-m-carousel-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #d4d4d4 !important;
    cursor: pointer !important;
    transition: background .2s ease, width .2s ease, border-radius .2s ease !important;
    border: none !important;
    padding: 0 !important;
    display: inline-block !important;
  }
  html body .dss-product-page .dss-m-carousel-dot.is-active {
    background: #1a1a1a !important;
    width: 22px !important;
    border-radius: 4px !important;
  }
  html body .dss-product-page .dss-m-carousel-counter {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #6b6b6b !important;
    letter-spacing: 0.06em !important;
    font-variant-numeric: tabular-nums !important;
  }
  html body .dss-product-page .dss-m-carousel-counter .dss-m-current {
    color: #1a1a1a !important;
  }


  /* ── M-10 · STICKY BOTTOM ACTION BAR ───────────────────────────────── */
  html body .dss-m-bottombar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: #ffffff !important;
    border-top: 1px solid #e9e9e9 !important;
    box-shadow: 0 -6px 22px rgba(0,0,0,0.08) !important;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  }
  html body .dss-m-bottombar-qty {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 6px !important;
    background: #f5f5f5 !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
  }
  html body .dss-m-bottombar-qty-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #1a1a1a !important;
    padding: 0 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
    transition: transform .12s ease !important;
  }
  html body .dss-m-bottombar-qty-btn:active { transform: scale(0.92) !important; }
  html body .dss-m-bottombar-qty-input {
    width: 28px !important;
    height: 28px !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    padding: 0 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    font-family: inherit !important;
  }
  html body .dss-m-bottombar-qty-input::-webkit-outer-spin-button,
  html body .dss-m-bottombar-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }
  html body .dss-m-bottombar-cart {
    flex: 1 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    height: 48px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: #ffd623 !important;
    color: #1a1a1a !important;
    border: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    box-shadow: 0 6px 16px rgba(255,214,35,0.4) !important;
    transition: transform .12s ease, box-shadow .12s ease, background .15s ease !important;
    font-family: inherit !important;
    text-transform: none !important;
  }
  html body .dss-m-bottombar-cart:active {
    transform: translateY(1px) !important;
    box-shadow: 0 3px 10px rgba(255,214,35,0.4) !important;
  }
  html body .dss-m-bottombar-cart.is-disabled {
    background: #e8e8e8 !important;
    color: #6b6b6b !important;
    box-shadow: none !important;
  }
  html body .dss-m-bottombar-cart-label { font-weight: 700 !important; }
  html body .dss-m-bottombar-cart-sep   { opacity: 0.6 !important; }
  html body .dss-m-bottombar-price      { font-weight: 800 !important; }
  html body .dss-m-bottombar-wishlist {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #f5f5f5 !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    transition: transform .12s ease, background .15s ease !important;
  }
  html body .dss-m-bottombar-wishlist:active { transform: scale(0.92) !important; }


  /* ── M-11 · MISC MOBILE POLISH ─────────────────────────────────────── */
  /* Tighten the WC notices wrapper so it doesn't add huge gaps */
  html body .dss-product-page .woocommerce-notices-wrapper { padding: 0 16px !important; }

  /* Float dropdowns on mobile align under their labels nicely */
  html body .dss-product-page table.variations th.label,
  html body .dss-product-page .wc-pao-addon-name {
    top: -7px !important;
    /* left: 14px !important; */
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Even smaller phones (≤380px) — bottom bar gets a slimmer footprint
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 380px) {
  html body .dss-m-bottombar { gap: 8px !important; padding: 10px 12px !important; }
  html body .dss-m-bottombar-cart { padding: 0 12px !important; font-size: 14px !important; }
  html body .dss-m-bottombar-wishlist { width: 40px !important; height: 40px !important; }
  html body .dss-product-page .product_title.entry-title { font-size: 22px !important; }
  html body .dss-product-page .price .woocommerce-Price-amount { font-size: 24px !important; }
}


/*Woocommerce */

.woocommerce-variation-price{
    margin-bottom: 3rem !important;
}




.product_meta { display: block  !important; }
  .product-addon-totals ul li:not(:last-child) {
    display: none !important;
}
div.product-addon-totals {
    margin: 0px 0 40px 0 !important;
  padding: 0px 0 0 0 !important;
 border-top: none !important;
  
}

html body .dss-product-page .woocommerce-product-gallery__trigger:hover {
 
   box-shadow:none !important; 
}

html body .dss-product-page .woocommerce-product-gallery__trigger {
 
    top: 0.5rem !important;
    left: 0.5rem !important;
 
}