/* =========================================================
   SCOPIONE — Product page CSS
   Extracted from scopione-child.css (batch-P1-product-css-extract).
   Conditionally enqueued on is_product() via scopione_child_enqueues()
   in functions.php. Loads after scopione-child.css and before
   scopione-category.css to preserve original cascade order.
   ========================================================= */

/* =========================================================
   SCOPIONE 2025/26 — REFINED Product Gallery
   Target: body.single-product
   Safe for Woo/Flexslider (Does not override slide widths)
   ========================================================= */

body.single-product {
  /* --- COLORS & VARS --- */
  --sc-accent: var(--sc-yellow);
  --sc-border: rgba(255, 255, 255, .12);
  --sc-border-strong: rgba(255, 255, 255, .25);
  --sc-bg-dark: rgba(0, 0, 0, .25);
  --sc-bg-lighter: rgba(255, 255, 255, .03);

  /* --- DIMENSIONS --- */
  --sc-radius: 8px;              /* Main gallery radius */
  --sc-thumb-radius: 8px;        /* Thumbnail radius */
  --sc-thumb-gap: 8px;           /* Gap between thumbs */
  --sc-thumb-ring-width: 2px;    /* Width of the active yellow ring */

  /* --- SPACING & NUDGE --- */
  --sc-strip-pad-x: .5rem;
  --sc-strip-pad-top: .6rem;
  --sc-strip-pad-bottom: .5rem;       /* Desktop bottom gap */
  --sc-strip-pad-bottom-mobile: 1rem; /* Mobile bottom gap */
}

/* =========================================================
   1. Main Gallery Stage
   ========================================================= */

body.single-product .woocommerce-product-gallery {
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
  background: linear-gradient(180deg, var(--sc-bg-lighter), transparent);
  overflow: hidden;
  margin-bottom: 0;
}

/* Neutralize Grid/Mosaic themes safely */
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  display: block !important;
  grid-template-columns: unset !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Slide Images */
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  width: 100%;
}

body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: var(--sc-bg-dark);
}

/* Zoom Button Styling */
body.single-product a.woocommerce-product-gallery__trigger {
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--sc-border-strong);
  background: rgba(0,0,0,0.75);
  color: #fff;
  z-index: 99;
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: all 0.2s ease;
}
body.single-product a.woocommerce-product-gallery__trigger:hover {
  border-color: var(--sc-accent);
  color: var(--sc-accent);
  transform: scale(1.1);
  background: rgba(0,0,0,0.9);
}

/* =========================================================
   2. Thumbnails — Scrollable Strip
   ========================================================= */

body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs,
body.single-product .woocommerce-product-gallery ul.flex-control-nav.flex-control-thumbs {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;

  gap: var(--sc-thumb-gap) !important;
  
  /* Padding includes nudge for visual balance */
  padding: var(--sc-strip-pad-top) var(--sc-strip-pad-x) var(--sc-strip-pad-bottom) var(--sc-strip-pad-x) !important;
  margin: 0 !important;
  list-style: none !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth;
  
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--sc-strip-pad-x);

  border-top: 1px solid var(--sc-border);
  background: var(--sc-dark); /* Dark strip background */
  
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) rgba(0,0,0,0.3);

  contain: paint; /* Isolate scroll-triggered repaints */
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs,
  body.single-product .woocommerce-product-gallery ul.flex-control-nav.flex-control-thumbs {
    padding-bottom: var(--sc-strip-pad-bottom-mobile) !important;
  }
  /* Hide scrollbar on mobile for cleaner look */
  body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar,
  body.single-product .woocommerce-product-gallery ul.flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
    display: none;
  }
}

/* Desktop Scrollbar Styling */
@media (min-width: 769px) {
  body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar,
  body.single-product .woocommerce-product-gallery ul.flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
    height: 6px;
  }
  body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar-track,
  body.single-product .woocommerce-product-gallery ul.flex-control-nav.flex-control-thumbs::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.3);
  }
  body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar-thumb,
  body.single-product .woocommerce-product-gallery ul.flex-control-nav.flex-control-thumbs::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
  }
  body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar-thumb:hover,
  body.single-product .woocommerce-product-gallery ul.flex-control-nav.flex-control-thumbs::-webkit-scrollbar-thumb:hover {
    background: var(--sc-accent);
  }
}

/* =========================================================
   3. Thumbnail Tiles (LI) & The Ring
   ========================================================= */

body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li,
body.single-product .woocommerce-product-gallery ul.flex-control-nav.flex-control-thumbs li {
  flex: 0 0 auto !important;
  float: none !important;
  margin: 0 !important;
  scroll-snap-align: start;

  border-radius: var(--sc-thumb-radius) !important;
  box-sizing: border-box !important;
  aspect-ratio: 1 / 1; /* Force Square */

  border: 1px solid var(--sc-border);
  background: rgba(255,255,255,0.05);
  
  position: relative;
  overflow: hidden !important; /* Rounds the image */
  
  transition: transform 0.2s ease, border-color 0.2s ease;
}

/* Thumb Image */
body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li img,
body.single-product .woocommerce-product-gallery ul.flex-control-nav.flex-control-thumbs li img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.6;
  display: block !important;
  border-radius: inherit !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
  
  /* Remove default outlines/shadows from theme */
  outline: none !important;
  box-shadow: none !important;
}

/* --- THE RING (::after) --- 
   We use a pseudo-element so the ring sits ON TOP of the image 
   but stays INSIDE the rounded corners of the LI. 
*/
body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li::after,
body.single-product .woocommerce-product-gallery ul.flex-control-nav.flex-control-thumbs li::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 0 transparent; /* Default hidden */
  transition: box-shadow 0.2s ease;
  z-index: 10;
}

/* Hover State */
body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.5);
}
body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li:hover img {
  opacity: 1;
  transform: scale(1.05);
}
/* Hover Ring */
body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li:hover::after {
  box-shadow: inset 0 0 0 var(--sc-thumb-ring-width) rgba(255,190,61,0.5);
}

/* Active State (Logic to handle Woo or Theme variants) */

/* Case A: Theme adds .flex-active to LI */
body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li.flex-active::after {
  box-shadow: inset 0 0 0 var(--sc-thumb-ring-width) var(--sc-accent) !important;
}

/* Case B: Woo adds .flex-active to IMG (Use :has for modern support) */
body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li:has(img.flex-active)::after {
  box-shadow: inset 0 0 0 var(--sc-thumb-ring-width) var(--sc-accent) !important;
}
body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li:has(img.flex-active) img {
  opacity: 1 !important;
}

/* Case C: Fallback for older browsers (Inner ring on IMG) */
@supports not (selector(:has(*))) {
  body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li img.flex-active {
    opacity: 1 !important;
    box-shadow: inset 0 0 0 var(--sc-thumb-ring-width) var(--sc-accent) !important;
  }
}

/* =========================================================
   4. Thumb Sizing (4 visible desktop, 3 visible mobile)
   ========================================================= */

@media (min-width: 992px) {
  body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li,
  body.single-product .woocommerce-product-gallery ul.flex-control-nav.flex-control-thumbs li {
    width: calc((100% - (var(--sc-thumb-gap) * 3)) / 4.2) !important;
    max-width: 140px;
  }
}

@media (max-width: 991.98px) {
  /* 1. Reset strip height/padding */
  body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs,
  body.single-product .woocommerce-product-gallery ul.flex-control-nav.flex-control-thumbs {
    align-items: flex-start !important;
    padding-bottom: var(--sc-strip-pad-bottom-mobile) !important;
  }

  /* 2. Hide scrollbar on mobile */
  body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar,
  body.single-product .woocommerce-product-gallery ul.flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
    display: none;
  }

  /* 3. THE FIX: Divide space by 3.5 instead of 3 */
  body.single-product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li,
  body.single-product .woocommerce-product-gallery ul.flex-control-nav.flex-control-thumbs li {
    /* Formula: (100% space - 3 gaps) / 3.5 items */
    width: calc((100% - (var(--sc-thumb-gap) * 3)) / 3.2) !important;
    max-width: none !important;
  }
}

/* =========================================================
   5. First Thumbnail Divider (Subtle separator)
   ========================================================= */

body.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li:first-child::before {
  content: "";
  position: absolute;
  top: 15%;
  bottom: 15%;
  right: 0;
  width: 1px;
  background: rgba(255,255,255,0.2);
  z-index: 15;
  pointer-events: none;
}

/* =========================================================
   SCOPIONE — World-Class WooCommerce Zoom Trigger (CSS only)
   - Desktop: invisible until gallery hover/focus-within
   - Mobile: always visible, minimalist (icon-only)
   - Fixes Woo/theme double-icon via hard reset + SVG mask icon
   ========================================================= */

body.single-product{
  --sc-zoom-hit: 56px;          /* tap/click target size */
  --sc-zoom-icon: 28px;         /* icon size */
  --sc-zoom-top: 7px;          /* move lower so it won't cover your "S" */
  --sc-zoom-right: 9px;

  /* visibility on any image (light/dark) */
  --sc-zoom-filter: drop-shadow(0 2px 6px rgba(0,0,0,.75));
  --sc-zoom-filter-focus: drop-shadow(0 2px 6px rgba(0,0,0,.75))
                          drop-shadow(0 0 10px rgba(255,190,61,.55));
}

/* Make the whole main image area feel zoomable (best-practice cue) */
@media (hover:hover) and (pointer:fine){
  body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img{
    cursor: zoom-in;
  }
}

/* --- HARD RESET: remove Woo/theme icon/font/background so we never get doubles --- */
body.single-product .woocommerce-product-gallery a.woocommerce-product-gallery__trigger{
  position: absolute !important;
  top: var(--sc-zoom-top) !important;
  right: var(--sc-zoom-right) !important;

  width: var(--sc-zoom-hit) !important;
  height: var(--sc-zoom-hit) !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 999px !important;

  padding: 0 !important;
  margin: 0 !important;

  text-decoration: none !important;

  /* kill font-icon weirdness */
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;

  /* kill theme background-images */
  background-image: none !important;

  display: grid !important;
  place-items: center !important;

  z-index: 50 !important;
  -webkit-tap-highlight-color: transparent;
}

/* If a theme injects inner i/svg/span, hide it */
body.single-product .woocommerce-product-gallery a.woocommerce-product-gallery__trigger > *{
  display: none !important;
}

/* Woo often uses ::before for the icon — remove it completely */
body.single-product .woocommerce-product-gallery a.woocommerce-product-gallery__trigger::before{
  content: none !important;
  display: none !important;
}

/* --- OUR ICON: crisp magnifier via SVG mask (no markup chars; URL-encoded SVG) --- */
body.single-product .woocommerce-product-gallery a.woocommerce-product-gallery__trigger::after{
  content: "" !important;
  width: var(--sc-zoom-icon) !important;
  height: var(--sc-zoom-icon) !important;

  background-color: #ffffff !important; /* icon color = white */
  filter: var(--sc-zoom-filter) !important;

  /* SVG mask (encoded) */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M10.5%203a7.5%207.5%200%201%200%204.52%2013.52l4.73%204.73a1%201%200%200%200%201.41-1.41l-4.73-4.73A7.5%207.5%200%200%200%2010.5%203zm0%202a5.5%205.5%200%201%201%200%2011%205.5%205.5%200%200%201%200-11z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M10.5%203a7.5%207.5%200%201%200%204.52%2013.52l4.73%204.73a1%201%200%200%200%201.41-1.41l-4.73-4.73A7.5%207.5%200%200%200%2010.5%203zm0%202a5.5%205.5%200%201%201%200%2011%205.5%205.5%200%200%201%200-11z'/%3E%3C/svg%3E") !important;

  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;

  -webkit-mask-position: center !important;
  mask-position: center !important;

  -webkit-mask-size: contain !important;
  mask-size: contain !important;

  opacity: 1 !important;
  transform: translateZ(0);
}

/* ============================
   VISIBILITY RULES
   ============================ */

/* Mobile / touch (no hover): ALWAYS visible, minimalist */
@media (hover:none), (pointer:coarse){
  body.single-product .woocommerce-product-gallery a.woocommerce-product-gallery__trigger{
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}

/* Desktop: invisible until needed */
@media (hover:hover) and (pointer:fine){
  body.single-product .woocommerce-product-gallery a.woocommerce-product-gallery__trigger{
    opacity: 0 !important;
    transform: translateY(6px) !important;
    pointer-events: none !important;
    transition: opacity .18s ease, transform .18s ease !important;
  }

  body.single-product .woocommerce-product-gallery:hover a.woocommerce-product-gallery__trigger,
  body.single-product .woocommerce-product-gallery:focus-within a.woocommerce-product-gallery__trigger{
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
}

/* Focus: no “ring” outline, just a premium glow (keyboard-safe) */
body.single-product .woocommerce-product-gallery a.woocommerce-product-gallery__trigger:focus-visible{
  outline: none !important;
}
body.single-product .woocommerce-product-gallery a.woocommerce-product-gallery__trigger:focus-visible::after{
  filter: var(--sc-zoom-filter-focus) !important;
}

/* Make the zoom lens icon BLACK */
body.single-product .woocommerce-product-gallery
a.woocommerce-product-gallery__trigger::after{
  background-color: #000 !important;
  filter: drop-shadow(0 2px 6px rgba(255,255,255,.55)) !important; /* light glow */
}

/* Simple: center Categories/Tags, remove top line, hide SKU */
body.single-product .product .summary .product_meta{
  text-align: center !important;
  width: 100%;
  margin: 10px auto 0 !important;

  /* remove the ugly line + spacing Woo adds */
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* Some themes use pseudo-elements for separators */
body.single-product .product .summary .product_meta:before,
body.single-product .product .summary .product_meta:after{
  content: none !important;
  display: none !important;
}

/* Hide SKU only */
body.single-product .product .summary .product_meta .sku_wrapper,
body.single-product .product .summary .product_meta .sku{
  display: none !important;
}

/* Ensure spans don't float left (common in themes) */
body.single-product .product .summary .product_meta > span{
  float: none !important;
  display: inline-block !important;
}

/* Make wrapping look clean on mobile */
body.single-product .product .summary .product_meta{
  line-height: 1.35;
}

/* Hide PayPal Pay Later messaging line ("Starting at ... Learn more") on single product pages */
body.single-product :is(
  #ppcp-messages,
  .ppcp-messages,
  .ppcp-message,
  .woocommerce-paypal-payments__messages,
  [class*="ppcp"][class*="message"]
){
  display: none !important;
}

/* Extra safety: if PayPal outputs it as a dedicated iframe container */
body.single-product :is(
  #ppcp-messages iframe,
  .ppcp-messages iframe,
  .ppcp-message iframe,
  .woocommerce-paypal-payments__messages iframe,
  [class*="ppcp"][class*="message"] iframe
){
  display: none !important;
}

/* Normalize spacing between Add to Cart, GPay/Apple Pay, and PayPal buttons */
body.single-product div.product .summary{
  --sc-pay-gap: 12px; /* match the GPay → PayPal spacing you like */
}

/* Add to cart form spacing */
body.single-product div.product form.cart{
  margin: 0 0 var(--sc-pay-gap) !important;
  padding: 0 !important;
}

/* GPay / Apple Pay block spacing */
body.single-product div.product .summary :is(
  .wcpay-payment-request-wrapper,
  .wcpay-express-checkout-wrapper,
  .wcpay-express-checkout-buttons
){
  margin: 0 0 var(--sc-pay-gap) !important;
}

/* PayPal section: only add bottom spacing (don’t fight its internals) */
body.single-product div.product .summary :is(
  .woocommerce-paypal-payments,
  [class*="ppcp"],
  [id*="ppcp"]
){
  margin: 0 0 var(--sc-pay-gap) !important;
}

/* Tighten spacing UNDER WooPayments BNPL (Klarna/Afterpay) */
body.single-product div.product .summary{
  --sc-bnpl-gap: 6px; /* space between BNPL and the next section */
}

/* BNPL wrapper (Stripe site messaging) */
body.single-product div.product .summary :is(
  #wcpay-stripe-site-messaging,
  .wcpay-stripe-site-messaging,
  [id*="stripe-site-messaging"]
){
  margin: 0 0 var(--sc-bnpl-gap) !important;
  padding: 0 !important;
}

/* Stripe often puts the message inside a p with default margin */
body.single-product div.product .summary :is(
  #wcpay-stripe-site-messaging,
  .wcpay-stripe-site-messaging,
  [id*="stripe-site-messaging"]
) p{
  margin: 0 !important;
}

/* If the NEXT block is adding top space (Reasons-to-Buy), remove it */
body.single-product div.product .summary :is(
  [class*="reasons-to-buy"],
  [class*="reasons_to_buy"],
  [class*="merchant_module_reasons_to_buy"],
  [class*="merchant"][class*="reasons"]
){
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Center the BNPL block */
body.single-product div.product .summary .sc-bnpl-centered{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin: 8px auto 0 !important;
  text-align: center !important;
}

/* Center whatever WooPayments outputs inside */
body.single-product div.product .summary .sc-bnpl-centered > *{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* If Stripe renders as an iframe, center the iframe box */
body.single-product div.product .summary .sc-bnpl-centered iframe{
  display: block !important;
  margin: 0 auto !important;
}

/* =========================================================
   SCOPIONE — Add to Cart Visuals (Darker Hover v7)
   - Layout: Robust Grid (Handles Single vs Multi Qty)
   - Visuals: Premium "Automotive" styling
   - Interaction: Button gets DARKER on hover
   ========================================================= */

/* 1) CART LAYOUT: Default to 1-Column */
body.single-product div.product .summary.entry-summary :is(form.cart, .woocommerce-variation-add-to-cart){
  display: grid !important;
  grid-template-columns: 1fr !important;
  row-gap: 12px !important;
  column-gap: 10px !important;
  align-items: stretch !important;

  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Force elements to span full width by default */
body.single-product div.product .summary.entry-summary :is(form.cart, .woocommerce-variation-add-to-cart) > *{
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* 2) BUTTON VISUALS (Base State) */
body.single-product div.product .summary.entry-summary
  :is(form.cart, .woocommerce-variation-add-to-cart)
  > :is(button.single_add_to_cart_button, a.single_add_to_cart_button, input.single_add_to_cart_button){
  
  /* Layout */
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* Sizing */
  min-height: 50px !important;
  padding: 0 24px !important;

  /* Typography */
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  
  /* Colors & Texture (Standard Yellow) */
  background: linear-gradient(180deg, #ffc85a, var(--sc-yellow)) !important;
  color: var(--sc-dark) !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-bottom-color: rgba(0,0,0,0.25) !important;
  border-radius: 6px !important;

  box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
  
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
}

/* 3) QUANTITY INPUT STYLING */
body.single-product div.product .summary.entry-summary
  :is(form.cart, .woocommerce-variation-add-to-cart) > .quantity .qty{
  width: 100% !important;
  min-height: 50px !important;
  padding: 0 !important;
  
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: 6px !important;
  background: #fdfdfd !important;
  color: var(--sc-dark) !important;
  
  font-weight: 700 !important;
  text-align: center !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.03) !important;
  transition: border-color 0.2s ease !important;
}

body.single-product div.product .summary.entry-summary
  :is(form.cart, .woocommerce-variation-add-to-cart) > .quantity .qty:focus{
  border-color: var(--sc-yellow) !important;
  outline: none !important;
}

/* 4) HOVER & ACTIVE STATES (Updated: Darker!) */
body.single-product div.product .summary.entry-summary
  :is(button.single_add_to_cart_button, a.single_add_to_cart_button, input.single_add_to_cart_button):hover{
  
  /* Lift Up Effect */
  transform: translateY(-2px) !important;
  
  /* Darker Gold Gradient */
  background: linear-gradient(180deg, #eebb38, #d49c2a) !important;
  
  /* Darker Border */
  border-color: rgba(0,0,0,0.3) !important;
  
  /* Deeper Shadow */
  box-shadow: 0 6px 15px rgba(212, 156, 42, 0.4) !important;
}

/* Active (Click) State */
body.single-product div.product .summary.entry-summary
  :is(button.single_add_to_cart_button, a.single_add_to_cart_button, input.single_add_to_cart_button):active{
  transform: translateY(1px) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
  background: #cc9628 !important; /* Even darker flat color on click */
}

/* 5) LOGIC: 2-Column Grid only if Quantity is Visible */
@supports(selector(:has(*))){
  body.single-product div.product .summary.entry-summary
    :is(form.cart, .woocommerce-variation-add-to-cart):has(> .quantity input.qty:not([type="hidden"])){
    grid-template-columns: 80px 1fr !important; 
  }

  body.single-product div.product .summary.entry-summary
    :is(form.cart, .woocommerce-variation-add-to-cart):has(> .quantity input.qty:not([type="hidden"]))
    > .quantity{
    grid-column: 1 !important;
    display: flex !important;
  }

  body.single-product div.product .summary.entry-summary
    :is(form.cart, .woocommerce-variation-add-to-cart):has(> .quantity input.qty:not([type="hidden"]))
    > :is(button.single_add_to_cart_button, a.single_add_to_cart_button, input.single_add_to_cart_button){
    grid-column: 2 !important;
  }

  body.single-product div.product .summary.entry-summary
    :is(form.cart, .woocommerce-variation-add-to-cart) > .quantity:has(input.qty[type="hidden"]){
    display: none !important;
  }
}

/* =========================================================
   SCOPIONE — Merchant Pro Stock Scarcity (premium, compact)
   IMPORTANT: does NOT set any background colors on the bar/fill.
   ========================================================= */

body.single-product div.product .summary.entry-summary .merchant-stock-scarcity{
  display: grid !important;
  gap: 6px !important;

  margin: 10px 0 12px !important;
  padding: 14px 14px 8px !important;

  border: 1px solid rgba(17,17,17,.10) !important;
  border-radius: 8px !important;

  box-shadow: 0 1px 0 rgba(17,17,17,.04) !important;
}

/* Message line (text only) */
body.single-product div.product .summary.entry-summary
.merchant-stock-scarcity .merchant-stock-scarcity-message{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;

  margin: 0 !important;

  font-size: 13.5px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: var(--sc-dark) !important;

  padding-left: 10px !important;
  border-left: 4px solid var(--sc-yellow) !important; /* accent line only */
}

/* Progress bar: shape + spacing only (NO colors/gradients) */
body.single-product div.product .summary.entry-summary
.merchant-stock-scarcity :is(
  .merchant-stock-scarcity-progress,
  .merchant-stock-scarcity-bar,
  progress
){
  width: 100% !important;
  height: 10px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin: 0 !important;

  /* subtle “crisp edge” without changing bar colors */
  box-shadow: inset 0 0 0 1px rgba(17,17,17,.06) !important;
}

/* If the plugin uses a child “fill” element, round it too (still NO colors) */
body.single-product div.product .summary.entry-summary
.merchant-stock-scarcity :is(
  .merchant-stock-scarcity-progress,
  .merchant-stock-scarcity-bar
) > *{
  border-radius: inherit !important;
}

/* Native progress rounding (no color overrides) */
body.single-product div.product .summary.entry-summary
.merchant-stock-scarcity progress::-webkit-progress-bar{
  border-radius: 999px !important;
}
body.single-product div.product .summary.entry-summary
.merchant-stock-scarcity progress::-webkit-progress-value{
  border-radius: 999px !important;
}
body.single-product div.product .summary.entry-summary
.merchant-stock-scarcity progress::-moz-progress-bar{
  border-radius: 999px !important;
}

/* Single product only: hide WooCommerce default IN-STOCK text (prevents duplicates) */
body.single-product div.product .summary.entry-summary :is(
  p.stock.in-stock,
  .woocommerce-variation-availability p.stock.in-stock,
  .woocommerce-variation-availability .stock.in-stock
){
  display: none !important;
}

/* Keep OUT-OF-STOCK visible (just in case theme styles get aggressive elsewhere) */
body.single-product div.product .summary.entry-summary :is(
  p.stock.out-of-stock,
  .woocommerce-variation-availability p.stock.out-of-stock
){
  display: block !important;
}

/* Optional: remove leftover spacing from variation availability wrapper */
body.single-product div.product .summary.entry-summary .woocommerce-variation-availability{
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   SCOPIONE — Out-of-stock + Waitlist (NO :has, mobile-safe)
   Targets: the block immediately after "p.stock.out-of-stock"
   ========================================================= */

:root{
  --sc-ink: var(--sc-dark);
  /* --sc-yellow inherited from canonical :root */
  --sc-border: rgba(17,17,17,.10);
  --sc-radius: 14px;
}

/* Out of stock badge (keep if you like; safe) */
body.single-product div.product .summary.entry-summary p.stock.out-of-stock{
  display:inline-flex !important;
  width:max-content !important;
  max-width:100% !important;
  align-items:center !important;
  gap:8px !important;

  margin:10px 0 10px !important;
  padding:7px 12px !important;

  border:1px solid rgba(17,17,17,.12) !important;
  border-radius:999px !important;
  background: rgba(17,17,17,.02) !important;

  color: var(--sc-ink) !important;
  font-weight:900 !important;
  font-size:12px !important;
  line-height:1 !important;
  letter-spacing:.8px !important;
  text-transform:uppercase !important;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.single-product div.product .summary.entry-summary p.stock.out-of-stock::before{
  content:"" !important;
  width:8px !important;
  height:8px !important;
  border-radius:999px !important;
  background:#d92d20 !important;
  flex:0 0 auto !important;
}

/* WAITLIST CARD = the very next block after the out-of-stock line */
body.single-product div.product .summary.entry-summary p.stock.out-of-stock + *{
  margin:0 0 14px !important;
  padding:12px 18px 14px 26px !important;

  border:1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius) !important;
  background:#fff !important;

  /* lighter shadow = less repaint on mobile */
  box-shadow:
    0 1px 0 rgba(17,17,17,.04),
    0 8px 18px rgba(0,0,0,.06) !important;

  display:grid !important;
  gap:12px !important;
  position:relative !important;

  /* isolate painting to reduce scroll jank */
  contain: paint !important;
}

/* Accent rail (inset, rounded ends) */
body.single-product div.product .summary.entry-summary p.stock.out-of-stock + *::before{
  content:"" !important;
  position:absolute !important;
  left:12px !important;
  top:12px !important;
  bottom:12px !important;
  width:4px !important;

  background: var(--sc-yellow) !important;
  border-radius:999px !important;
  opacity:.95 !important;
}

/* Title/label text inside the waitlist block */
body.single-product div.product .summary.entry-summary p.stock.out-of-stock + *
:is(h1,h2,h3,h4,strong,label){
  margin:0 !important;
  color:var(--sc-ink) !important;
  font-weight:950 !important;
  line-height:1.25 !important;
}

/* Input */
body.single-product div.product .summary.entry-summary p.stock.out-of-stock + *
:is(input[type="email"], input[type="text"]){
  width:100% !important;
  height:46px !important;

  border:1px solid rgba(17,17,17,.16) !important;
  border-radius:8px !important;

  background:rgba(17,17,17,.015) !important;
  padding:11px 52px 11px 14px !important;

  color:var(--sc-ink) !important;
  outline:none !important;
  box-shadow:none !important;
}
body.single-product div.product .summary.entry-summary p.stock.out-of-stock + *
:is(input[type="email"], input[type="text"]):focus{
  background:#fff !important;
  border-color: rgba(255,190,61,.85) !important;
  box-shadow: 0 0 0 3px rgba(255,190,61,.22) !important;
}

/* Button */
body.single-product div.product .summary.entry-summary p.stock.out-of-stock + *
:is(button, input[type="submit"], .button){
  width:100% !important;
  min-height:48px !important;

  border-radius:8px !important;
  border:1px solid rgba(17,17,17,.30) !important;

  background:var(--sc-yellow) !important;
  color:var(--sc-dark) !important;

  font-weight:950 !important;
  letter-spacing:.6px !important;
  text-transform:uppercase !important;

  box-shadow: 0 1px 0 rgba(0,0,0,.06) !important;
}

/* Hover effects ONLY for real hover devices (prevents touch scroll “jump”) */
@media (hover:hover) and (pointer:fine){
  body.single-product div.product .summary.entry-summary p.stock.out-of-stock + *
  :is(button, input[type="submit"], .button):hover{
    filter:brightness(.98) !important;
    transform: translateY(-1px) !important;
  }
}
@media (hover:none){
  body.single-product div.product .summary.entry-summary p.stock.out-of-stock + *
  :is(button, input[type="submit"], .button){
    transform:none !important;
  }
}

/* Ekko Lightbox refinements moved to css/scopione-testimonials.css */

/* Minimal, safe polish for ALL Barn2 options on single-product pages */
body.single-product .wpo-options-container .wpo-option-name{
  font-weight: 900 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.single-product .wpo-options-container label{
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* Barn2 options: tighten bottom spacing (single product only) */
body.single-product .wpo-options-container{
  padding-bottom: 6px !important; /* if container has padding */
  margin-bottom: 8px !important;  /* if theme adds outer spacing */
}

/* Remove extra bottom gap created by the last element inside */
body.single-product .wpo-options-container > *:last-child{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Common: lists/wrappers inside options often have bottom margin */
body.single-product .wpo-options-container :is(
  ul,
  ol,
  .wpo-field,
  .wpo-field-input,
  .wpo-field-choices,
  .wpo-image-buttons
){
  margin-bottom: 0 !important;
}

/* Tighten space ABOVE the option title ("Related Exterior Parts:") */
body.single-product .wpo-options-container .wpo-field{
  padding-top: 0 !important;   /* if Barn2 adds internal padding */
  margin-top: 6px !important;  /* overall spacing between fields */
}

/* If the extra space comes from the field wrapper's label row */
body.single-product .wpo-options-container .wpo-field-label{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Redundant safety, but harmless; keep if you prefer explicitness */
body.single-product .wpo-options-container .wpo-option-name:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================================================
   SCOPIONE — Single Product: Short Description (Fitment/Features block)
   Cleaned (no gray background)
   ========================================================= */

body.single-product div.product .summary.entry-summary :is(
  .woocommerce-product-details__short-description,
  .product-short-description,
  .short-description
){
  /* container */
  margin: 0 !important;
  padding: 10px 14px 4px !important;

  border: 1px solid rgba(17,17,17,.10) !important;
  border-radius: 8px !important;
  background: #fff !important; /* was rgba(17,17,17,.02) */

  color: var(--sc-dark) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;

  box-shadow: 0 1px 0 rgba(17,17,17,.04) !important;
}

/* Headings inside short description */
body.single-product div.product .summary.entry-summary :is(
  .woocommerce-product-details__short-description,
  .product-short-description,
  .short-description
) :is(h1,h2,h3,h4,h5,h6){
  margin: 0 0 10px !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  color: var(--sc-dark) !important;
}

/* Space between sections (applies when multiple headings exist) */
body.single-product div.product .summary.entry-summary :is(
  .woocommerce-product-details__short-description,
  .product-short-description,
  .short-description
) :is(h1,h2,h3,h4,h5,h6) + :is(ul,ol,p){
  margin-top: 0 !important;
}

/* Lists */
body.single-product div.product .summary.entry-summary :is(
  .woocommerce-product-details__short-description,
  .product-short-description,
  .short-description
) :is(ul,ol){
  margin: 8px 0 10px !important;
  padding-left: 22px !important;
}

body.single-product div.product .summary.entry-summary :is(
  .woocommerce-product-details__short-description,
  .product-short-description,
  .short-description
) li{
  margin: 6px 0 !important;
}

body.single-product div.product .summary.entry-summary :is(
  .woocommerce-product-details__short-description,
  .product-short-description,
  .short-description
) li::marker{
  color: var(--sc-dark) !important; /* restore Scopione Yellow */
}

/* Paragraphs */
body.single-product div.product .summary.entry-summary :is(
  .woocommerce-product-details__short-description,
  .product-short-description,
  .short-description
) p{
  margin: 8px 0 !important;
}

/* Note line: use last-of-type (more reliable than last-child) */
body.single-product div.product .summary.entry-summary :is(
  .woocommerce-product-details__short-description,
  .product-short-description,
  .short-description
) p:last-of-type{
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 2px solid rgba(17,17,17,.10) !important;
  font-size: 13px !important;
  opacity: .88 !important;
}

/* Merchant Pro "Only X Left" block: trim top gap */
body.single-product div.product .summary.entry-summary .merchant-stock-scarcity{
  margin-top: 6px !important;
}

/* Short description H4 size (only inside the short description block) */
body.single-product div.product .summary.entry-summary :is(
  .woocommerce-product-details__short-description,
  .product-short-description,
  .short-description
) h4{
  font-size: clamp(18px, 1.05vw, 20px) !important; /* min <= max */
  line-height: 1.2 !important;
  margin: 0 0 8px !important;
  font-weight: 900 !important;
  letter-spacing: .4px !important;
  color: rgba(17,17,17,.70) !important; /* premium gray */
}

/* Keep nested strong from changing the heading styling */
body.single-product div.product .summary.entry-summary :is(
  .woocommerce-product-details__short-description,
  .product-short-description,
  .short-description
) h4 > strong{
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* =========================================================
   SCOPIONE — Price (color-only + adjustable top/bottom spacing)
   Adjust these two values:
   --sc-price-mt (top space), --sc-price-mb (bottom space)
   ========================================================= */

:root{
  --sc-black: var(--sc-dark);
  /* --sc-yellow inherited from canonical :root */
  --sc-gray: rgba(17,17,17,.55);

  /* >>> ADJUST THESE <<< */
  --sc-price-mb: 12px;  /* bottom spacing */
  --sc-price-mt: 0;
}

/* Apply only spacing changes (you control mt/mb above) */
body.single-product div.product .summary.entry-summary :is(p.price, span.price){
  margin-top: var(--sc-price-mt) !important;
  margin-bottom: var(--sc-price-mb) !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--sc-black) !important;
}

/* OLD price (del) — gray */
body.single-product div.product .summary.entry-summary :is(p.price, span.price).sale del,
body.single-product div.product .summary.entry-summary :is(p.price, span.price).sale del *{
  color: var(--sc-gray) !important;
}
body.single-product div.product .summary.entry-summary :is(p.price, span.price).sale del{
  opacity: 1 !important;
  text-decoration-color: rgba(17,17,17,.45) !important;
}

/* NEW price (ins) — black + underline */
body.single-product div.product .summary.entry-summary :is(p.price, span.price).sale ins,
body.single-product div.product .summary.entry-summary :is(p.price, span.price).sale ins *{
  color: var(--sc-black) !important;
}
body.single-product div.product .summary.entry-summary :is(p.price, span.price).sale ins{
  background: transparent !important;
  text-decoration: underline !important;
  text-decoration-color: var(--sc-black) !important;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 2px;
}

/* Yellow bar to the right (accent) */
body.single-product div.product .summary.entry-summary :is(p.price, span.price).sale::after{
  content:"";
  display:inline-block;
  width: 70px;
  height: 4px;
  border-radius: 99px;
  background: var(--sc-yellow);
  margin-left: 10px;
  transform: translateY(-0.05em);
}

/* Regular (non-sale) price stays black */
body.single-product div.product .summary.entry-summary :is(p.price, span.price):not(.sale),
body.single-product div.product .summary.entry-summary :is(p.price, span.price):not(.sale) *{
  color: var(--sc-black) !important;
}

/* Barns2 WooCommerce Product Options Plugin, removes qty selector */
.wpo-field .wpo-quantity-picker-spinner {
display: none !important;
}

/* =========================================================
   SCOPIONE — Enhanced Rating & Reviews (Premium UI)
   [Final Optimized Version]
   ========================================================= */

/* --- 1. Top Rating "Pill" Badge --- */
.single-product .woocommerce-product-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    width: fit-content;
    padding: 0.5rem 0.9rem;

    /* Glassy premium look */
    border: 1px solid rgba(255, 190, 61, 0.5);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 190, 61, 0.12) 100%);

    /* Softer, more diffuse shadow */
    box-shadow:
        0 0px 20px rgba(255, 190, 61, 0.15),
        0 0px 4px rgba(0, 0, 0, 0.02);

    margin: 0.55rem 0 1.25rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.single-product .woocommerce-product-rating:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px rgba(255, 190, 61, 0.22),
        0 4px 8px rgba(0, 0, 0, 0.03);
}

.single-product .woocommerce-product-rating .star-rating {
    margin: 0;
    font-size: 1.05rem; /* Slightly larger stars */
    line-height: 1;
    /* SAFE FIX: Use inline-flex to keep alignment without breaking Woo's width masking */
    display: inline-flex;
    align-items: center;
    height: 1.05rem;
}

.single-product .star-rating::before {
    color: rgba(17, 17, 17, 0.2);
}
.single-product .star-rating span::before {
    color: var(--sc-yellow);
}

.single-product .woocommerce-review-link {
    color: var(--sc-dark);
    text-decoration: none;
    font-weight: 800; /* Standardized weight */
    font-size: 0.95rem;
    line-height: 1;
    position: relative;
    transition: color 0.2s ease;
}

/* Animated underline for "Customer Reviews" link */
.single-product .woocommerce-review-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    border-radius: 99px;
    background: var(--sc-yellow);
    transform: scaleX(0); /* Hidden by default */
    transform-origin: center right;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.single-product .woocommerce-review-link:hover::after {
    transform: scaleX(1);
    transform-origin: center left;
}


/* --- 2. Main Reviews Container (The Card) --- */
.single-product #tab-reviews,
.single-product .wp-block-woocommerce-product-reviews {
    /* Reduced top space as requested */
    margin-top: 0 !important;
    position: relative;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 10px !important; /* Smoother corners */

    /* Subtle, modern background */
    background:
        radial-gradient(circle at top right, rgba(255, 190, 61, 0.08), transparent 40%),
        #ffffff;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.5) inset;

    padding: .35rem 2rem 2rem 2rem !important;
    overflow: hidden;
}

/* The yellow accent bar on the left */
.single-product #tab-reviews::before,
.single-product div.product .woocommerce-tabs #reviews::before,
.single-product div.product .wc-tabs-wrapper #reviews::before,
.single-product .wp-block-woocommerce-product-reviews::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, var(--sc-yellow) 0%, rgba(255, 190, 61, 0.2) 100%);
    border-radius: 16px 0 0 16px !important;
}


/* --- 3. Reviews List Area --- */
.single-product #reviews #comments > h2 {
    display: block;
    width: 100%;
    margin: 0 auto 1rem;
    text-align: center;
    padding: 1rem;

    border-radius: 10px !important;
    border: 1px solid rgba(255, 190, 61, 0.4);
    background: linear-gradient(180deg, rgba(255, 190, 61, 0.15) 0%, rgba(255, 190, 61, 0.02) 100%);

    color: var(--sc-dark);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.015em;
}

.single-product #reviews #comments ol.commentlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .9rem; /* Increased gap for breathing room */
}

/* Individual Review Card */
.single-product #reviews #comments ol.commentlist li .comment_container {
    position: relative;
    border: 1px solid rgba(17, 17, 17, 0.06);
    border-radius: 10px !important;
    background: #ffffff;

    /* Floating card feel */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.03),
        0 1px 0 rgba(255, 255, 255, 1) inset;

    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.single-product #reviews #comments ol.commentlist li .comment_container:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 190, 61, 0.6);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.08),
        0 4px 8px rgba(255, 190, 61, 0.1); /* Subtle yellow glow */
}

/* Top accent pill on review cards */
.single-product #reviews #comments ol.commentlist li .comment_container::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 40%;
    height: 3px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg, transparent, var(--sc-yellow), transparent);
    opacity: 0.8;
}

/* Avatar Styling */
.single-product #reviews #comments ol.commentlist li img.avatar {
    border-radius: 50%;
    width: 54px; /* Larger avatar */
    height: 54px;
    object-fit: cover;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 190, 61, 0.5);
    float: left; /* Needed for standard Woo structure */
}

/* Review Text Wrapper */
.single-product #reviews #comments ol.commentlist li .comment-text {
    border: none;
    padding: 0;
    margin-left: 72px; /* Clears the larger avatar */
}

/* Author Name & Date */
.single-product #reviews #comments .woocommerce-review__author {
    font-weight: 800;
    color: var(--sc-dark);
    font-size: 1.05rem;
    display: block;
}

/* Hide date as requested */
.single-product #reviews #comments time.woocommerce-review__published-date {
    display: none !important;
}

.single-product #reviews #comments .description {
    color: #333;
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 0.75rem;
}


/* --- 4. Review Form (Write a Review) --- */
.single-product #reviews #review_form_wrapper {
    margin-top: 1rem;
    padding: 2rem;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 190, 61, 0.3);

    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.5), #ffffff),
        url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffbe3d' fill-opacity='0.05' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
}

.single-product #reviews #review_form_wrapper h3 {
    font-weight: 800;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--sc-dark);
}

/* Inputs */
.single-product #review_form input[type="text"],
.single-product #review_form input[type="email"],
.single-product #review_form textarea {
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 8px !important;
    padding: 14px 16px;
    background: #fdfdfd;
    color: var(--sc-dark);
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.single-product #review_form textarea {
    min-height: 120px;
}

.single-product #review_form input:focus,
.single-product #review_form textarea:focus {
    outline: none;
    border-color: var(--sc-yellow);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 190, 61, 0.15);
    transform: translateY(-2px);
}

/* Stars Selection in Form */
.single-product #review_form p.stars a {
    color: rgba(17, 17, 17, 0.2);
    transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.single-product #review_form p.stars a:hover {
    transform: scale(1.2);
    color: var(--sc-yellow);
}
.single-product #review_form p.stars.selected a {
    color: var(--sc-yellow);
}

/* Submit Button */
.single-product #review_form #submit {
    background: var(--sc-yellow) !important;
    color: var(--sc-dark) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 110px !important; /* Kept wide for desktop */
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(255, 190, 61, 0.25) !important;
    transition: all 0.2s ease;
}

.single-product #review_form #submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(255, 190, 61, 0.4) !important;
    filter: brightness(1.05);
}


/* --- 5. Responsive Adjustments --- */
@media (min-width: 768px) {
    /* On desktop, position stars absolute top-right of review */
    .single-product #reviews #comments ol.commentlist li .comment-text {
        position: relative;
        padding-right: 120px; /* Make space for stars */
    }
    .single-product #reviews #comments ol.commentlist li .comment-text .star-rating {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0 !important;
    }
}

@media (max-width: 575px) {
    /* Tighter padding on mobile — FIXED: needs !important to override desktop !important */
    .single-product #tab-reviews,
    .single-product .wp-block-woocommerce-product-reviews {
        padding: 1.25rem !important;
    }

    .single-product #reviews #review_form_wrapper {
        padding: 1.25rem;
    }

    /* Reset Avatar size for mobile */
    .single-product #reviews #comments ol.commentlist li img.avatar {
        width: 42px;
        height: 42px;
    }

    /* Stack meta info */
    .single-product #reviews #comments ol.commentlist li .comment-text p.meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }

    /* Prevent submit button from overflowing screen on mobile */
    .single-product #review_form #submit {
        width: 100% !important;
        padding: 14px 20px !important;
    }

    /* Force text to drop below avatar and align left */
    .single-product #reviews #comments ol.commentlist li .comment-text {
        margin-left: 0 !important;  /* Removes the right-push */
        padding-left: 0 !important; /* Ensures no extra padding */
        clear: both;                /* Forces text to drop below the avatar */
        padding-top: 10px;          /* Adds a little space between avatar and text */
    }
}

/* --- "Add a review" Title --- */
#review_form_wrapper #reply-title {
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase; /* Makes it ALL CAPS */
    color: var(--sc-dark);
    letter-spacing: 0.5px;
}

/* --- "Your rating" & "Your review" Labels --- */
.woocommerce #reviews #review_form_wrapper label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 0.5rem;
}

/* --- "Submit" Button Text --- */
#review_form_wrapper #submit {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 1px;
    font-size: 1rem;
}

/* =========================================================
   SCOPIONE — Center Title + Yellow Line + Reviews + Price
   (ALL screens; keeps description left-aligned)
   ========================================================= */

/* 1) Title */
.single-product .entry-summary h1.product_title.entry-title,
.single-product .summary h1.product_title.entry-title{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative; /* ensures ::after positions correctly */
}

/* (Yellow Accent Bar alignment handled by desktop/mobile breakpoints below) */
/* 3) Reviews “pill” */
.single-product .entry-summary .woocommerce-product-rating,
.single-product .summary .woocommerce-product-rating{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4) Price (sale del/ins included) */
.single-product .entry-summary p.price,
.single-product .entry-summary span.price,
.single-product .summary p.price,
.single-product .summary span.price{
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: baseline !important;
  width: 100% !important;
  gap: 10px;
}

/* 5) Keep short description / fitment blocks left-aligned */
.single-product .entry-summary .woocommerce-product-details__short-description,
.single-product .summary .woocommerce-product-details__short-description{
  text-align: left !important;
}

/* =========================================================
   SCOPIONE — Product Title Design (H1)
   Premium Automotive Style (Responsive, Robust)
   ========================================================= */

:root{
  --scopione-black: var(--sc-dark);
  --scopione-yellow: var(--sc-yellow);
}

/* 1) Base Styles (Single product only) */
.single-product .woocommerce div.product h1.product_title.entry-title,
.single-product h1.product_title.entry-title{
  font-family: var(--font-display);
  font-weight: var(--weight-display-strong); /* 700 in your current system */

  font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.25rem);

  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--scopione-black);

  margin: 0 0 0.75rem 0;
  padding: 0 0 0.75rem 0;

  text-transform: none;

  text-wrap: balance;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;

  max-inline-size: 52ch;

  position: relative;
}

/* 2) Yellow Accent Bar (Base) */
.single-product .woocommerce div.product h1.product_title.entry-title::after,
.single-product h1.product_title.entry-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  height: 4px;
  width: min(92px, 28%);
  background: var(--scopione-yellow);
  border-radius: 999px;
}

/* 3) DESKTOP Layout (min-width: 769px) — KEEP CENTERED */
@media (min-width: 769px){
  .single-product .woocommerce div.product h1.product_title.entry-title,
  .single-product h1.product_title.entry-title{
    text-align: center !important;
    line-height: 1.10;
    margin-bottom: 0.65rem;
    max-inline-size: 56ch;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .single-product .woocommerce div.product h1.product_title.entry-title::after,
  .single-product h1.product_title.entry-title::after{
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* 4) MOBILE Layout (max-width: 768px) */
@media (max-width: 768px){
  .single-product .woocommerce div.product h1.product_title.entry-title,
  .single-product h1.product_title.entry-title{
    font-size: clamp(1.45rem, 1.25rem + 1.2vw, 1.7rem);
    line-height: 1.22;
    text-align: center !important;
    max-inline-size: none;
    margin-bottom: 1rem;
  }

  .single-product .woocommerce div.product h1.product_title.entry-title::after,
  .single-product h1.product_title.entry-title::after{
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
  }
}

/* Optional: slightly more breathing room if breadcrumbs are tight */
.single-product .woocommerce div.product .product_title{
  scroll-margin-top: 80px;
}

/* =========================================================
   SCOPIONE — MASTER PRODUCT BLOCK (DESKTOP ONLY)
   Gallery-like card shell (OUTSIDE ONLY)
   - NO mobile changes
   - NO styling of inner elements
   ========================================================= */

@media (min-width: 992px){

  body.single-product div.product .summary.entry-summary{
    border-radius: 10px !important;
    overflow: hidden !important;

    border: 1px solid rgba(17,17,17,0.08) !important;
    box-shadow:
      0 0 0 1px rgba(255,190,61,0.10),
      0 12px 44px rgba(0,0,0,0.18) !important;

    background-color: #ffffff !important;
    background-image:
      linear-gradient(90deg, var(--sc-accent, var(--sc-yellow)), rgba(255,190,61,0.25)),
      linear-gradient(180deg, rgba(255,190,61,0.10) 0px, rgba(255,255,255,0.00) 46px);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 3px, 100% 100%;
    background-position: 0 0, 0 0;
  }
}

/* =========================================================
   SCOPIONE — PRODUCT TABS (CLEAN, SINGLE BLOCK)
   - Same border-radius on all screens
   - Subtle on-brand right cue on small screens (no bubble)
   ========================================================= */

:root{
  --sc-tabs-shell-radius: 8px;
  --sc-tabs-pill-radius: 6px;

  --sc-tabs-fill-strong: rgba(255,255,255,.96);
  --sc-tabs-fill-soft:   rgba(248,248,250,.96);

  --sc-tabs-fill-strong-sticky: rgba(255,255,255,.92);
  --sc-tabs-fill-soft-sticky:   rgba(246,246,248,.92);

  --sc-tabs-edge-gold: rgba(255,190,61,.55);
  --sc-tabs-edge-dark: rgba(17,17,17,.14);

  --sc-tabs-cue-w: 44px;
  --sc-tabs-cue-w-sm: 34px;

  --sc-tabs-arrow-ink: rgba(17,17,17,.58);
  --sc-tabs-arrow-ink-sm: rgba(17,17,17,.52);
  --sc-tabs-gold-wash: rgba(255,190,61,.16);
}

/* 0) Kill legacy wrapper border */
body.single-product .woocommerce-page div.product .woocommerce-tabs,
body.single-product .woocommerce div.product .woocommerce-tabs{
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 18px !important;
}

/* 1) UL = shell */
body.single-product .woocommerce-tabs ul.tabs,
body.single-product ul.sc-tabs-shell,
body.single-product ul.sc-product-tabs{
  list-style: none !important;
  margin: 26px 0 22px !important;
  padding: 12px !important;

  position: relative !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;

  scrollbar-width: none;

  border: 1.4px solid transparent !important;
  border-radius: var(--sc-tabs-shell-radius) !important;

  background-color: var(--sc-tabs-fill-strong) !important;
  background-image:
    linear-gradient(180deg, var(--sc-tabs-fill-strong) 0%, var(--sc-tabs-fill-soft) 100%),
    linear-gradient(135deg, var(--sc-tabs-edge-gold), var(--sc-tabs-edge-dark)) !important;

  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;

  box-shadow:
    0 12px 36px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.78) !important;

  scroll-snap-type: x proximity !important;
  scroll-padding: 18px !important;
  touch-action: pan-x !important;
}

body.single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar,
body.single-product ul.sc-tabs-shell::-webkit-scrollbar,
body.single-product ul.sc-product-tabs::-webkit-scrollbar{
  display: none;
}

/* 2) Sticky on small screens */
@media (max-width: 991.98px){
  body.single-product .woocommerce-tabs ul.tabs,
  body.single-product ul.sc-tabs-shell,
  body.single-product ul.sc-product-tabs{
    position: sticky !important;
    top: var(--sc-tabs-top, 64px) !important;
    z-index: 999 !important;
    margin: 18px 0 14px !important;

    backdrop-filter: blur(6px);

    background-color: var(--sc-tabs-fill-strong-sticky) !important;
    background-image:
      linear-gradient(180deg, var(--sc-tabs-fill-strong-sticky) 0%, var(--sc-tabs-fill-soft-sticky) 100%),
      linear-gradient(135deg, rgba(255,190,61,.60), rgba(17,17,17,.16)) !important;

    background-origin: padding-box, border-box !important;
    background-clip: padding-box, border-box !important;

    box-shadow:
      0 0 0 rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.74) !important;
  }
}

/* 3) LI reset + remove legacy pseudo bullets/lines */
body.single-product .woocommerce-tabs ul.tabs > li,
body.single-product ul.sc-tabs-shell > li,
body.single-product ul.sc-product-tabs > li{
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border: 0 !important;
  background: transparent !important;
  display: flex !important;
}
body.single-product .woocommerce-tabs ul.tabs > li::before,
body.single-product .woocommerce-tabs ul.tabs > li::after{
  content: none !important;
  display: none !important;
}

/* 4) Tabs (premium pills) */
body.single-product .woocommerce-tabs ul.tabs > li > a,
body.single-product ul.sc-tabs-shell > li > a,
body.single-product ul.sc-product-tabs > li > a{
  position: relative !important;
  overflow: hidden !important;
  scroll-snap-align: center !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px 14px !important;
  border-radius: var(--sc-tabs-pill-radius) !important;

  border: 1.4px solid rgba(17,17,17,.14) !important;
  background: linear-gradient(180deg, #fbfbfc 0%, #f1f1f3 100%) !important;

  color: var(--sc-dark) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: .2px !important;

  text-decoration: none !important;
  -webkit-tap-highlight-color: rgba(255,190,61,.25);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 0 rgba(0,0,0,.05) !important;

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

/* Shine sweep */
body.single-product .woocommerce-tabs ul.tabs > li > a::before,
body.single-product ul.sc-tabs-shell > li > a::before,
body.single-product ul.sc-product-tabs > li > a::before{
  content: "" !important;
  position: absolute !important;
  top: -60% !important;
  left: -40% !important;
  width: 55% !important;
  height: 220% !important;

  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 45%,
    rgba(255,255,255,0) 100%
  ) !important;

  transform: translateX(-140%) rotate(10deg) !important;
  transition: transform .60s ease !important;
  pointer-events: none !important;
}

@media (hover:hover){
  body.single-product .woocommerce-tabs ul.tabs > li > a:hover,
  body.single-product ul.sc-tabs-shell > li > a:hover,
  body.single-product ul.sc-product-tabs > li > a:hover{
    transform: translateY(-2px);
    border-color: rgba(17,17,17,.20) !important;
    box-shadow:
      0 14px 30px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.95) !important;
  }
  body.single-product .woocommerce-tabs ul.tabs > li > a:hover::before,
  body.single-product ul.sc-tabs-shell > li > a:hover::before,
  body.single-product ul.sc-product-tabs > li > a:hover::before{
    transform: translateX(260%) rotate(10deg) !important;
  }
}

/* Active tab */
body.single-product .woocommerce-tabs ul.tabs > li > a.is-active,
body.single-product .woocommerce-tabs ul.tabs > li.active > a,
body.single-product .woocommerce-tabs ul.tabs > li > a[aria-current="true"],
body.single-product ul.sc-tabs-shell > li > a.is-active,
body.single-product ul.sc-product-tabs > li > a.is-active{
  background: linear-gradient(180deg, #fff9ea 0%, #ffffff 100%) !important;
  border-color: rgba(255,190,61,.95) !important;

  box-shadow:
    0 0 0 2px rgba(255,190,61,.28),
    0 16px 28px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body.single-product .woocommerce-tabs ul.tabs > li > a.is-active::after,
body.single-product .woocommerce-tabs ul.tabs > li.active > a::after,
body.single-product ul.sc-tabs-shell > li > a.is-active::after,
body.single-product ul.sc-tabs-shell > li.active > a::after,
body.single-product ul.sc-product-tabs > li > a.is-active::after,
body.single-product ul.sc-product-tabs > li.active > a::after{
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 6px !important;
  height: 3px !important;
  border-radius: 3px !important;
  background: var(--sc-yellow) !important;
  box-shadow: 0 6px 14px rgba(255,190,61,.28) !important;
}

/* Keyboard accessibility */
body.single-product .woocommerce-tabs ul.tabs > li > a:focus-visible,
body.single-product ul.sc-tabs-shell > li > a:focus-visible,
body.single-product ul.sc-product-tabs > li > a:focus-visible{
  outline: 3px solid rgba(255,190,61,.65) !important;
  outline-offset: 2px !important;
}

/* 5) Swipe cues (fade + arrows) */
body.single-product .woocommerce-tabs ul.tabs::before,
body.single-product .woocommerce-tabs ul.tabs::after,
body.single-product ul.sc-tabs-shell::before,
body.single-product ul.sc-tabs-shell::after,
body.single-product ul.sc-product-tabs::before,
body.single-product ul.sc-product-tabs::after{
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: var(--sc-tabs-cue-w) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  color: var(--sc-tabs-arrow-ink) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.65) !important;

  opacity: 0 !important;
  transition: opacity .18s ease !important;

  pointer-events: none !important;
  z-index: 2 !important;
  border-radius: inherit !important;
}

body.single-product .woocommerce-tabs ul.tabs::before,
body.single-product ul.sc-tabs-shell::before,
body.single-product ul.sc-product-tabs::before{
  content: "‹" !important;
  left: 0 !important;
  justify-content: flex-start !important;
  padding-left: 10px !important;
  background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,0) 100%) !important;
}

/* Right cue — refined */
body.single-product .woocommerce-tabs ul.tabs::after,
body.single-product ul.sc-tabs-shell::after,
body.single-product ul.sc-product-tabs::after{
  content: "›" !important;
  right: 0 !important;
  justify-content: flex-end !important;
  padding-right: 10px !important;

  background:
    linear-gradient(270deg, var(--sc-tabs-gold-wash) 0%, rgba(255,190,61,0) 62%),
    linear-gradient(270deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,0) 100%) !important;
}

/* Show fades only when scrollable (your JS toggles these classes) */
body.single-product ul.sc-tabs-shell:not(.sc-no-scroll):not(.sc-at-start)::before,
body.single-product ul.sc-product-tabs:not(.sc-no-scroll):not(.sc-at-start)::before{ opacity: .45 !important; }

body.single-product ul.sc-tabs-shell:not(.sc-no-scroll):not(.sc-at-end)::after,
body.single-product ul.sc-product-tabs:not(.sc-no-scroll):not(.sc-at-end)::after{ opacity: .85 !important; }

/* 6) Mobile: a bit smaller + “hint” pulse (limited iterations) */
@keyframes scTabsHintRight{
  0%,100%{ opacity: .70; }
  50%    { opacity: 1; }
}

@media (max-width: 767.98px){
  body.single-product .woocommerce-tabs ul.tabs::before,
  body.single-product .woocommerce-tabs ul.tabs::after,
  body.single-product ul.sc-tabs-shell::before,
  body.single-product ul.sc-tabs-shell::after,
  body.single-product ul.sc-product-tabs::before,
  body.single-product ul.sc-product-tabs::after{
    width: var(--sc-tabs-cue-w-sm) !important;
    font-size: 18px !important;
  }

  body.single-product .woocommerce-tabs ul.tabs::after,
  body.single-product ul.sc-tabs-shell::after,
  body.single-product ul.sc-product-tabs::after{
    color: var(--sc-tabs-arrow-ink-sm) !important;
  }

  /* prevent last tab from sitting under the right cue */
  body.single-product ul.sc-tabs-shell:not(.sc-no-scroll),
  body.single-product ul.sc-product-tabs:not(.sc-no-scroll){
    padding-right: calc(12px + var(--sc-tabs-cue-w-sm)) !important;
  }

  /* pulse only when there are more tabs to the right */
  body.single-product ul.sc-tabs-shell:not(.sc-no-scroll):not(.sc-at-end)::after,
  body.single-product ul.sc-product-tabs:not(.sc-no-scroll):not(.sc-at-end)::after{
    animation: scTabsHintRight 1.35s ease-in-out 4 !important;
  }
}

/* 7) Mobile sizing */
@media (max-width: 575.98px){
  body.single-product .woocommerce-tabs ul.tabs,
  body.single-product ul.sc-tabs-shell,
  body.single-product ul.sc-product-tabs{
    padding: 10px !important;
    gap: 8px !important;
    border-radius: var(--sc-tabs-shell-radius) !important;
  }

  body.single-product .woocommerce-tabs ul.tabs > li > a,
  body.single-product ul.sc-tabs-shell > li > a,
  body.single-product ul.sc-product-tabs > li > a{
    padding: 10px 12px !important;
    font-size: 13px !important;
    border-radius: var(--sc-tabs-pill-radius) !important;
  }
}

/* 8) Reduced motion */
@media (prefers-reduced-motion: reduce){
  body.single-product .woocommerce-tabs ul.tabs > li > a,
  body.single-product ul.sc-tabs-shell > li > a,
  body.single-product ul.sc-product-tabs > li > a{
    transition: none !important;
  }
  body.single-product .woocommerce-tabs ul.tabs > li > a::before,
  body.single-product ul.sc-tabs-shell > li > a::before,
  body.single-product ul.sc-product-tabs > li > a::before{
    transition: none !important;
  }
  body.single-product ul.sc-tabs-shell::after,
  body.single-product ul.sc-product-tabs::after{
    animation: none !important;
  }
}

/* Optional: anchor span takes no space but supports scrolling */
body.single-product .sc-tab-anchor{
  display: block;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* =========================================================
   SCOPIONE — Tab Panel Typography + Content (EXCEPT Reviews)
   (Card shell defined in "Product Tabs CLEAN / FINAL" below)
   ========================================================= */
/* Typography + content polish (applies to ALL non-review panels, incl. #tab-description) */
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews){
  color: var(--sc-dark);
  font-size: 16px;
  line-height: 1.75;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) p{
  margin: 0 0 0.75rem;
  color: rgba(17, 17, 17, 0.78);
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) strong,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) b{
  color: var(--sc-dark);
  font-weight: 800;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) h2,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) h3,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) h4{
  color: var(--sc-dark);
  letter-spacing: -0.01em;
  margin: 1.35rem 0 0.65rem;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) h2{
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.18;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) h2::after{
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--sc-panel-accent);
  opacity: 0.95;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) h3{
  font-weight: 850;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.22;
  padding-left: 12px;
  border-left: 3px solid rgba(255, 190, 61, 0.72);
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) h4{
  font-weight: 850;
  font-size: 16px;
  line-height: 1.25;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) a{
  color: var(--sc-dark);
  text-decoration: underline;
  text-decoration-color: rgba(255, 190, 61, 0.75);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) a:hover{
  text-decoration-color: rgba(255, 190, 61, 0.95);
  text-decoration-thickness: 3px;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) ul,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) ol{
  margin: 0 0 1.1rem;
  padding-left: 1.25rem;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) li{
  margin: 0.4rem 0;
  color: rgba(17, 17, 17, 0.78);
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) li::marker{
  color: rgba(255, 190, 61, 0.95);
  font-weight: 900;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.25rem 0 1.5rem;

  border: 1px solid rgba(17, 17, 17, 0.10);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.90);
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) th,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) td{
  padding: 12px 14px;
  vertical-align: top;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) th{
  background: rgba(0, 0, 0, 0.03);
  color: var(--sc-dark);
  font-weight: 800;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) tr:last-child th,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) tr:last-child td{
  border-bottom: 0;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) img{
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) .alignwide,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) .alignfull{
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}

/* =========================================================
   SCOPIONE — Product Tabs (CLEAN / FINAL)
   - Unified premium card shell for ALL tab panels except Reviews
   - Fix: mobile text spacing from left yellow bar
   - Fix: remove duplicate "Condition" (eBay) in attributes/features
   - Compatibility: premium table desktop + clean cards mobile (no inner scroll)
   ========================================================= */


/* =========================================================
   1) UNIVERSAL TAB PANEL "CARD" (all except Reviews)
   ========================================================= */

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews){
  --sc-panel-accent: var(--sc-accent, var(--sc-yellow));
  --sc-panel-radius: 10px;

  --sc-panel-pad-top: 18px;
  --sc-panel-pad-x: 28px;
  --sc-panel-pad-bottom: 12px;

  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 20px;

  position: relative;
  overflow: hidden;

  padding: var(--sc-panel-pad-top) var(--sc-panel-pad-x) var(--sc-panel-pad-bottom) !important;

  border: 1px solid rgba(17, 17, 17, 0.08) !important;
  border-radius: var(--sc-panel-radius) !important;

  background:
    radial-gradient(circle at top right, rgba(255, 190, 61, 0.08), transparent 40%),
    #ffffff !important;

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.50) inset !important;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  pointer-events: none;

  background: linear-gradient(180deg, var(--sc-panel-accent) 0%, rgba(255, 190, 61, 0.20) 100%);
  border-radius: 16px 0 0 16px !important;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews) > :first-child{
  margin-top: 0 !important;
}

@media (max-width: 767.98px){
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews){
    --sc-panel-pad-top: 10px;
    --sc-panel-pad-x: 16px;
    --sc-panel-pad-bottom: 12px;

    margin-bottom: 18px;

    /* Key fix: move content away from the yellow bar */
    padding-left: calc(var(--sc-panel-pad-x) + 10px) !important;

    box-shadow:
      0 12px 30px rgba(0, 0, 0, 0.06),
      0 1px 0 rgba(255, 255, 255, 0.50) inset !important;
  }
}


/* =========================================================
   2) ATTRIBUTES / FEATURES TABLE
   - Remove duplicate "Condition" block from eBay plugin
   - Make attributes table match premium tab design
   ========================================================= */

/* Hide duplicate attributes table if it’s output as an immediate sibling */
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
table.woocommerce-product-attributes.shop_attributes + table.woocommerce-product-attributes.shop_attributes,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
table.shop_attributes + table.shop_attributes{
  display: none !important;
}

/* Fallback: hide "condition" rows only in NON-first attributes tables */
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
table.woocommerce-product-attributes.shop_attributes:not(:first-of-type) tr[class*="condition"],
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
table.shop_attributes:not(:first-of-type) tr[class*="condition"]{
  display: none !important;
}

/* Premium table styling */
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
table.woocommerce-product-attributes.shop_attributes,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
table.shop_attributes{
  width: 100%;
  margin: 0 !important;

  border: 1px solid rgba(17, 17, 17, 0.08) !important;
  border-radius: 10px !important;

  border-collapse: separate !important;
  border-spacing: 0 !important;

  background: rgba(255, 255, 255, 0.92) !important;

  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.55) inset !important;

  overflow: hidden;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
table.woocommerce-product-attributes.shop_attributes tr,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
table.shop_attributes tr{
  border: 0 !important;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
table.woocommerce-product-attributes.shop_attributes tr + tr th,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
table.woocommerce-product-attributes.shop_attributes tr + tr td,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
table.shop_attributes tr + tr th,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
table.shop_attributes tr + tr td{
  border-top: 1px solid rgba(17, 17, 17, 0.07) !important;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
table.woocommerce-product-attributes.shop_attributes th,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
table.shop_attributes th{
  width: 220px;
  padding: 14px 16px !important;

  background: rgba(0, 0, 0, 0.025) !important;
  color: var(--sc-dark) !important;
  font-weight: 850 !important;

  border: 0 !important;
  border-right: 1px solid rgba(17, 17, 17, 0.06) !important;

  text-align: left !important;
  vertical-align: middle !important;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
table.woocommerce-product-attributes.shop_attributes td,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
table.shop_attributes td{
  padding: 14px 16px !important;

  background: transparent !important;
  color: rgba(17, 17, 17, 0.85) !important;

  border: 0 !important;
  vertical-align: middle !important;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
table.woocommerce-product-attributes.shop_attributes td p,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
table.shop_attributes td p{
  margin: 0 !important;
  font-style: italic;
}

@media (max-width: 767.98px){
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
  table.woocommerce-product-attributes.shop_attributes th,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
  table.woocommerce-product-attributes.shop_attributes td,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
  table.shop_attributes th,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
  table.shop_attributes td{
    padding: 12px 12px !important;
  }

  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
  table.woocommerce-product-attributes.shop_attributes th,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel:not(#tab-reviews)
  table.shop_attributes th{
    width: 42%;
  }
}


/* =========================================================
   3) COMPATIBILITY TAB
   - Desktop: premium table (Notes readable)
   - Mobile: true card layout + remove inner scroll containers
   ========================================================= */

/* Desktop table base */
body.single-product #tab-compatibility table,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] table{
  width: 100%;
  table-layout: auto;

  border-collapse: separate !important;
  border-spacing: 0 !important;

  border: 1px solid rgba(17,17,17,0.08) !important;
  border-radius: 10px !important;
  overflow: hidden;

  background: rgba(255,255,255,0.92) !important;

  box-shadow:
    0 14px 38px rgba(0,0,0,0.04),
    0 1px 0 rgba(255,255,255,0.55) inset !important;
}

body.single-product #tab-compatibility thead th,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] thead th{
  position: sticky;
  top: 0;
  z-index: 2;

  background: linear-gradient(180deg, rgba(255,190,61,0.16) 0%, rgba(255,255,255,0.98) 100%) !important;
  border-bottom: 1px solid rgba(17,17,17,0.10) !important;

  color: var(--sc-dark) !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  letter-spacing: .2px !important;

  padding: 14px 14px !important;
}

body.single-product #tab-compatibility tbody td,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] tbody td{
  padding: 14px 14px !important;
  border-bottom: 1px solid rgba(17,17,17,0.06) !important;
  vertical-align: top !important;

  color: rgba(17,17,17,0.86) !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.single-product #tab-compatibility tbody tr:nth-child(even),
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] tbody tr:nth-child(even){
  background: rgba(0,0,0,0.018) !important;
}

body.single-product #tab-compatibility tbody tr:hover,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] tbody tr:hover{
  background: rgba(255,190,61,0.07) !important;
}

body.single-product #tab-compatibility thead th:nth-child(1),
body.single-product #tab-compatibility tbody td:nth-child(1),
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] thead th:nth-child(1),
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] tbody td:nth-child(1){
  width: 90px;
  white-space: nowrap;
}

body.single-product #tab-compatibility thead th:nth-child(2),
body.single-product #tab-compatibility tbody td:nth-child(2),
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] thead th:nth-child(2),
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] tbody td:nth-child(2){
  width: 80px;
  white-space: nowrap;
}

body.single-product #tab-compatibility thead th:nth-child(3),
body.single-product #tab-compatibility tbody td:nth-child(3),
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] thead th:nth-child(3),
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] tbody td:nth-child(3){
  width: 90px;
  white-space: nowrap;
  font-weight: 900;
  color: var(--sc-dark) !important;
}

body.single-product #tab-compatibility tbody td:nth-child(4),
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] tbody td:nth-child(4){
  color: rgba(17,17,17,0.72) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

body.single-product #tab-compatibility tbody tr:last-child td,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] tbody tr:last-child td{
  border-bottom: 0 !important;
}

/* Mobile: remove inner scroll wrappers + render rows as cards */
@media (max-width: 767.98px){

  body.single-product #tab-compatibility,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"]{
    overflow: visible !important;
  }

  body.single-product #tab-compatibility .table-responsive,
  body.single-product #tab-compatibility .responsive-table,
  body.single-product #tab-compatibility .compatibility-table,
  body.single-product #tab-compatibility .compatibility-list,
  body.single-product #tab-compatibility .compatibility-wrapper,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] .table-responsive,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] .responsive-table,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] .compatibility-table,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] .compatibility-list,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] .compatibility-wrapper{
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  body.single-product #tab-compatibility table,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] table{
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;

    display: block !important;
    overflow: visible !important;
    width: 100% !important;
  }

  body.single-product #tab-compatibility thead,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] thead{
    display: none !important;
  }

  body.single-product #tab-compatibility tbody tr,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] tbody tr{
    display: block !important;
    margin: 0 0 10px 0 !important;
    padding: 12px 12px !important;

    border: 1px solid rgba(17,17,17,0.08) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.92) !important;

    box-shadow:
      0 10px 26px rgba(0,0,0,0.04),
      0 1px 0 rgba(255,255,255,0.55) inset !important;
  }

  body.single-product #tab-compatibility tbody tr:last-child,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] tbody tr:last-child{
    margin-bottom: 0 !important;
  }

  body.single-product #tab-compatibility tbody td,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] tbody td{
    display: block !important;
    padding: 0 !important;
    border: 0 !important;

    width: auto !important;
    white-space: normal !important;

    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  body.single-product #tab-compatibility tbody td:nth-child(1),
  body.single-product #tab-compatibility tbody td:nth-child(2),
  body.single-product #tab-compatibility tbody td:nth-child(3),
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] tbody td:nth-child(1),
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] tbody td:nth-child(2),
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] tbody td:nth-child(3){
    display: inline-flex !important;
    align-items: center !important;

    margin: 0 8px 8px 0 !important;
    padding: 6px 10px !important;

    border-radius: 10px !important;
    border: 1px solid rgba(17,17,17,0.10) !important;
    background: rgba(0,0,0,0.025) !important;

    font-weight: 900 !important;
    color: var(--sc-dark) !important;
    line-height: 1 !important;
  }

  body.single-product #tab-compatibility tbody td:nth-child(4),
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] tbody td:nth-child(4){
    margin-top: 8px !important;
    padding-top: 10px !important;

    border-top: 1px dashed rgba(17,17,17,0.14) !important;

    color: rgba(17,17,17,0.74) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}

/* =========================================================
   SCOPIONE — Compatibility mobile: remove leftover header row (Make/Model/Year/Notes)
   ========================================================= */

@media (max-width: 767.98px){

  /* 1) Hide a real thead if the plugin uses one */
  body.single-product #tab-compatibility table thead,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] table thead{
    display: none !important;
  }

  /* 2) Hide the “fake header row” if it’s output as the FIRST row inside tbody
        (this is what your screenshot shows) */
  body.single-product #tab-compatibility table tbody tr:first-child,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] table tbody tr:first-child{
    display: none !important;
  }

  /* 3) Kill the inner horizontal scrollbar (optional but recommended) */
  body.single-product #tab-compatibility table,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel[id*="compat"] table{
    overflow-x: hidden !important;
  }
}

/* =========================================================
   SCOPIONE — FAQs Tab Accordion (Premium spacing + visuals)
   Tweaks: more space before "Please Note", less bottom whitespace
   Scope: Woo tab panel for key "custom_tab_faq" => #tab-custom_tab_faq
   ========================================================= */

body.single-product #tab-custom_tab_faq{
	padding-top: 6px;
	padding-bottom: 0; /* reduce extra bottom space inside panel */
}

body.single-product #tab-custom_tab_faq .sc-faq-wrap{
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 8px 4px; /* was 10px bottom; tighten */
}

/* Intro: tame Bootstrap .lead + give it a premium callout */
body.single-product #tab-custom_tab_faq .sc-faq-intro.lead{
	margin: 0 auto 18px;
	padding: 18px 18px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid rgba(0,0,0,.08);
	box-shadow: 0 8px 22px rgba(0,0,0,.06);
	font-size: 18px;
	line-height: 1.55;
	color: rgba(17,17,17,.88);
	position: relative;
}

/* subtle left accent bar */
body.single-product #tab-custom_tab_faq .sc-faq-intro.lead::before{
	content: "";
	position: absolute;
	left: 10px;
	top: 14px;
	bottom: 14px;
	width: 4px;
	border-radius: 99px;
	background: var(--sc-yellow);
	opacity: .9;
}

/* Heading spacing */
body.single-product #tab-custom_tab_faq h4.h3{
	margin: 18px 0 18px !important;
}

/* Row spacing: consistent gaps between the two columns */
body.single-product #tab-custom_tab_faq .sc-faq-grid{
	row-gap: 18px;
	margin-bottom: 26px; /* NEW: creates clean separation before "Please Note" */
}

/* Column spacing consistency */
body.single-product #tab-custom_tab_faq .sc-faq-col{
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Card shell */
body.single-product #tab-custom_tab_faq details.sc-faq-item{
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	box-shadow:
		0 10px 26px rgba(0,0,0,.07),
		0 1px 0 rgba(0,0,0,.04);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Hover lift (desktop only feel) */
@media (hover:hover){
	body.single-product #tab-custom_tab_faq details.sc-faq-item:hover{
		transform: translateY(-1px);
		box-shadow:
			0 14px 32px rgba(0,0,0,.09),
			0 1px 0 rgba(0,0,0,.04);
	}
}

/* Question row */
body.single-product #tab-custom_tab_faq details.sc-faq-item > summary.sc-faq-q{
	list-style: none;
	cursor: pointer;
	display: block;
	padding: 18px 62px 18px 20px;
	font-weight: 800;
	font-size: 16px;
	line-height: 1.25;
	position: relative;
	color: var(--sc-dark);
	-webkit-tap-highlight-color: transparent;
}

body.single-product #tab-custom_tab_faq details.sc-faq-item > summary.sc-faq-q::-webkit-details-marker{
	display: none;
}

/* Plus/Minus button */
body.single-product #tab-custom_tab_faq details.sc-faq-item > summary.sc-faq-q::after{
	content: "+";
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-weight: 900;
	font-size: 18px;
	color: var(--sc-dark);
	background: rgba(255,190,61,.18);
	border: 1px solid rgba(255,190,61,.55);
	box-shadow: 0 6px 14px rgba(0,0,0,.08);
	transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

body.single-product #tab-custom_tab_faq details.sc-faq-item[open] > summary.sc-faq-q::after{
	content: "–";
	background: rgba(255,190,61,.30);
	border-color: rgba(255,190,61,.75);
}

/* Open state: subtle Scopione accent */
body.single-product #tab-custom_tab_faq details.sc-faq-item[open]{
	border-color: rgba(255,190,61,.55);
	box-shadow:
		0 14px 34px rgba(0,0,0,.09),
		0 0 0 3px rgba(255,190,61,.12);
}

body.single-product #tab-custom_tab_faq details.sc-faq-item[open] > summary.sc-faq-q{
	background: rgba(0,0,0,.015);
	border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Focus ring (keyboard accessibility) */
body.single-product #tab-custom_tab_faq details.sc-faq-item > summary.sc-faq-q:focus{
	outline: none;
}
body.single-product #tab-custom_tab_faq details.sc-faq-item > summary.sc-faq-q:focus-visible{
	outline: 2px solid rgba(255,190,61,.85);
	outline-offset: 2px;
	border-radius: 14px;
}

/* Answer content (more balanced padding vs your current left-only padding) */
body.single-product #tab-custom_tab_faq .sc-faq-a{
	padding: 14px 20px 18px; /* balanced L/R + a bit more breathing room */
}
body.single-product #tab-custom_tab_faq .sc-faq-a p{
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(17,17,17,.70);
}

/* Link styling inside answers */
body.single-product #tab-custom_tab_faq .sc-faq-a a{
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

/* "Please Note" spacing + readability */
body.single-product #tab-custom_tab_faq .sc-faq-note{
	margin-top: 0;              /* grid margin-bottom now handles the gap */
	padding-top: 6px;
	color: rgba(17,17,17,.60);
}

/* CTA: reduce bottom whitespace caused by Bootstrap my-5 */
body.single-product #tab-custom_tab_faq .sc-faq-cta{
	margin: 16px 0 8px !important; /* overrides my-5 top/bottom */
}

@media (max-width: 767.98px){

  /* Panel padding: remove theme side padding, keep layout tight */
  body.single-product .woocommerce-tabs #tab-custom_tab_faq{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* If panel itself carries Woo class, set a small inner pad */
  body.single-product #tab-custom_tab_faq{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.single-product #tab-custom_tab_faq .sc-faq-wrap{
    padding: 14px 6px 2px !important; /* narrow L/R on mobile */
  }

  body.single-product #tab-custom_tab_faq .sc-faq-intro.lead{
    padding: 16px 14px 16px 18px !important;
    font-size: 16px;
    line-height: 1.55;
  }

  body.single-product #tab-custom_tab_faq .sc-faq-intro.lead::before{
    left: 8px;
    top: 12px;
    bottom: 12px;
  }

  body.single-product #tab-custom_tab_faq h4.h3{
    margin: 14px 0 14px !important;
  }

  body.single-product #tab-custom_tab_faq .sc-faq-grid{
    margin-bottom: 22px;
  }

  /* Tighten Bootstrap gutters ONLY inside this tab */
  body.single-product #tab-custom_tab_faq .row.sc-faq-grid{
    margin-left: -6px !important;
    margin-right: -6px !important;
  }
  body.single-product #tab-custom_tab_faq .row.sc-faq-grid > [class*="col-"]{
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  body.single-product #tab-custom_tab_faq details.sc-faq-item > summary.sc-faq-q{
    padding: 16px 56px 16px 16px;
    font-size: 15px;
  }

  body.single-product #tab-custom_tab_faq details.sc-faq-item > summary.sc-faq-q::after{
    right: 12px;
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

  body.single-product #tab-custom_tab_faq .sc-faq-a{
    padding: 12px 16px 16px;
  }

  body.single-product #tab-custom_tab_faq .sc-faq-a p{
    font-size: 14.5px;
    line-height: 1.65;
  }

  body.single-product #tab-custom_tab_faq .sc-faq-cta{
    margin: 14px 0 6px !important;
  }
}

/* =========================================================
   SCOPIONE — Installation Tab (Enhanced Premium Styling v2)
   Scope: #tab-scopione_installation only
   ========================================================= */

body.single-product #tab-scopione_installation{
	padding-top: 6px;
	padding-bottom: 0;
}

/* Outer wrap */
body.single-product #tab-scopione_installation .sc-install-wrap{
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 10px 6px;
}

/* Intro callout (premium) */
body.single-product #tab-scopione_installation .sc-install-intro.lead{
	margin: 0 auto 18px;
	padding: 18px 18px 18px 22px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid rgba(0,0,0,.08);
	box-shadow: 0 10px 26px rgba(0,0,0,.07);
	font-size: 18px;
	line-height: 1.55;
	color: rgba(17,17,17,.88);
	position: relative;
	text-align: center;
}

body.single-product #tab-scopione_installation .sc-install-intro.lead::before{
	content: "";
	position: absolute;
	left: 10px;
	top: 14px;
	bottom: 14px;
	width: 4px;
	border-radius: 999px;
	background: var(--sc-yellow);
	opacity: .95;
}

/* Grid spacing */
body.single-product #tab-scopione_installation .sc-install-grid{
	row-gap: 18px;
	margin-bottom: 14px;
}

/* Turn each column into a premium card */
body.single-product #tab-scopione_installation .sc-install-col{
	background: #fff;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 14px;
	padding: 18px 18px 16px;
	box-shadow:
		0 14px 34px rgba(0,0,0,.07),
		0 1px 0 rgba(0,0,0,.04);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Headings */
body.single-product #tab-scopione_installation .sc-install-wrap h5{
	margin: 0;
	font-weight: 900;
	color: var(--sc-dark);
	letter-spacing: -0.01em;
}

/* Make “section blocks” breathe */
body.single-product #tab-scopione_installation .sc-install-col .mb-4{
	margin-bottom: 12px !important;
}

/* Lists — premium dot + better spacing */
body.single-product #tab-scopione_installation .sc-install-wrap ul{
	margin: 0;
	padding-left: 0;
	list-style: none;
}

body.single-product #tab-scopione_installation .sc-install-wrap ul li{
	position: relative;
	padding-left: 18px;
	margin: 10px 0;
	color: rgba(17,17,17,.70);
	line-height: 1.65;
}

body.single-product #tab-scopione_installation .sc-install-wrap ul li::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--sc-yellow);
	box-shadow: 0 0 0 2px rgba(255,190,61,.18);
	transform: translateY(-50%);
}

/* Emphasis inside bullets */
body.single-product #tab-scopione_installation .sc-install-wrap strong{
	color: var(--sc-dark);
	font-weight: 900;
}

/* Details accordion cards (match FAQ toggle style) */
body.single-product #tab-scopione_installation details.sc-install-item{
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(0,0,0,.06);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

@media (hover:hover){
	body.single-product #tab-scopione_installation details.sc-install-item:hover{
		transform: translateY(-1px);
		box-shadow: 0 14px 32px rgba(0,0,0,.08);
	}
}

body.single-product #tab-scopione_installation details.sc-install-item > summary.sc-install-q{
	list-style: none;
	cursor: pointer;
	display: block;
	padding: 16px 58px 16px 16px;
	font-weight: 900;
	font-size: 15px;
	line-height: 1.25;
	position: relative;
	color: var(--sc-dark);
	-webkit-tap-highlight-color: transparent;
}

body.single-product #tab-scopione_installation details.sc-install-item > summary.sc-install-q::-webkit-details-marker{
	display: none;
}

/* Plus/minus pill */
body.single-product #tab-scopione_installation details.sc-install-item > summary.sc-install-q::after{
	content: "+";
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-weight: 900;
	font-size: 18px;
	color: var(--sc-dark);
	background: rgba(255,190,61,.18);
	border: 1px solid rgba(255,190,61,.55);
	box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

body.single-product #tab-scopione_installation details.sc-install-item[open] > summary.sc-install-q::after{
	content: "–";
	background: rgba(255,190,61,.30);
	border-color: rgba(255,190,61,.75);
}

body.single-product #tab-scopione_installation details.sc-install-item[open]{
	border-color: rgba(255,190,61,.55);
	box-shadow:
		0 14px 34px rgba(0,0,0,.08),
		0 0 0 3px rgba(255,190,61,.12);
}

body.single-product #tab-scopione_installation details.sc-install-item[open] > summary.sc-install-q{
	background: rgba(0,0,0,.015);
	border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Accordion content */
body.single-product #tab-scopione_installation .sc-install-a{
	padding: 12px 16px 16px;
}

body.single-product #tab-scopione_installation .sc-install-a p{
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: rgba(17,17,17,.70);
}

/* CTA (reduce bottom whitespace + premium underline) */
body.single-product #tab-scopione_installation .sc-install-cta{
	margin: 16px 0 8px !important;
}

body.single-product #tab-scopione_installation .sc-install-cta a{
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Mobile: tighter padding + gutters */
@media (max-width: 767.98px){

	/* remove theme panel side padding if present */
	body.single-product .woocommerce-tabs #tab-scopione_installation{
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.single-product #tab-scopione_installation{
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	body.single-product #tab-scopione_installation .sc-install-wrap{
		padding: 14px 6px 4px !important;
	}

	body.single-product #tab-scopione_installation .sc-install-intro.lead{
		padding: 16px 14px 16px 18px !important;
		font-size: 16px;
		line-height: 1.55;
	}

	body.single-product #tab-scopione_installation .sc-install-intro.lead::before{
		left: 8px;
		top: 12px;
		bottom: 12px;
	}

	/* tighten Bootstrap gutters only inside this tab */
	body.single-product #tab-scopione_installation .row.sc-install-grid{
		margin-left: -6px !important;
		margin-right: -6px !important;
	}
	body.single-product #tab-scopione_installation .row.sc-install-grid > [class*="col-"]{
		padding-left: 6px !important;
		padding-right: 6px !important;
	}

	body.single-product #tab-scopione_installation .sc-install-col{
		padding: 16px 14px 14px;
		border-radius: 12px;
	}

	body.single-product #tab-scopione_installation details.sc-install-item > summary.sc-install-q{
		padding: 14px 54px 14px 14px;
	}

	body.single-product #tab-scopione_installation details.sc-install-item > summary.sc-install-q::after{
		width: 32px;
		height: 32px;
	}
}

/* Installation tab: consistent care spacing (replaces inline styles) */
body.single-product #tab-scopione_installation .sc-install-care-line{
	margin-top: 10px;
}
body.single-product #tab-scopione_installation .sc-install-care-line:first-child{
	margin-top: 0;
}

/* Narrow left/right padding on small screens (Installation tab only) */
@media (max-width: 575.98px){
	body.single-product #tab-scopione_installation{
		padding-left: 8px;
		padding-right: 8px;
	}
}

/* =========================================================
   SCOPIONE — Why Scopione Tab (Premium styling)
   Scope: #tab-scopione_why only
   ========================================================= */

body.single-product #tab-scopione_why{
	padding-top: 6px;
	padding-bottom: 0;
}

body.single-product #tab-scopione_why .sc-why-wrap{
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 10px 6px;
}

/* Intro */
body.single-product #tab-scopione_why .sc-why-intro.lead{
	margin: 0 auto 18px;
	padding: 18px 18px 18px 22px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid rgba(0,0,0,.08);
	box-shadow: 0 10px 26px rgba(0,0,0,.07);
	font-size: 18px;
	line-height: 1.55;
	color: rgba(17,17,17,.88);
	position: relative;
	text-align: center;
}

body.single-product #tab-scopione_why .sc-why-intro.lead::before{
	content: "";
	position: absolute;
	left: 10px;
	top: 14px;
	bottom: 14px;
	width: 4px;
	border-radius: 999px;
	background: var(--sc-yellow);
	opacity: .95;
}

/* Grid */
body.single-product #tab-scopione_why .sc-why-grid{
	row-gap: 18px;
	margin-bottom: 14px;
}

body.single-product #tab-scopione_why .sc-why-col{
	background: #fff;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 14px;
	padding: 18px 18px 16px;
	box-shadow: 0 14px 34px rgba(0,0,0,.07), 0 1px 0 rgba(0,0,0,.04);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

body.single-product #tab-scopione_why .sc-why-wrap h5{
	margin: 0;
	font-weight: 900;
	color: var(--sc-dark);
	letter-spacing: -0.01em;
}

/* Lists */
body.single-product #tab-scopione_why .sc-why-wrap ul{
	margin: 0;
	padding-left: 0;
	list-style: none;
}

body.single-product #tab-scopione_why .sc-why-wrap ul li{
	position: relative;
	padding-left: 18px;
	margin: 10px 0;
	color: rgba(17,17,17,.70);
	line-height: 1.65;
}

body.single-product #tab-scopione_why .sc-why-wrap ul li::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--sc-yellow);
	box-shadow: 0 0 0 2px rgba(255,190,61,.18);
	transform: translateY(-50%);
}

/* Details accordion (same feel as Installation/FAQ) */
body.single-product #tab-scopione_why details.sc-why-item{
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(0,0,0,.06);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

@media (hover:hover){
	body.single-product #tab-scopione_why details.sc-why-item:hover{
		transform: translateY(-1px);
		box-shadow: 0 14px 32px rgba(0,0,0,.08);
	}
}

body.single-product #tab-scopione_why details.sc-why-item > summary.sc-why-q{
	list-style: none;
	cursor: pointer;
	display: block;
	padding: 16px 58px 16px 16px;
	font-weight: 900;
	font-size: 15px;
	line-height: 1.25;
	position: relative;
	color: var(--sc-dark);
	-webkit-tap-highlight-color: transparent;
}

body.single-product #tab-scopione_why details.sc-why-item > summary.sc-why-q::-webkit-details-marker{
	display: none;
}

body.single-product #tab-scopione_why details.sc-why-item > summary.sc-why-q::after{
	content: "+";
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-weight: 900;
	font-size: 18px;
	color: var(--sc-dark);
	background: rgba(255,190,61,.18);
	border: 1px solid rgba(255,190,61,.55);
	box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

body.single-product #tab-scopione_why details.sc-why-item[open] > summary.sc-why-q::after{
	content: "–";
	background: rgba(255,190,61,.30);
	border-color: rgba(255,190,61,.75);
}

body.single-product #tab-scopione_why details.sc-why-item[open]{
	border-color: rgba(255,190,61,.55);
	box-shadow: 0 14px 34px rgba(0,0,0,.08), 0 0 0 3px rgba(255,190,61,.12);
}

body.single-product #tab-scopione_why details.sc-why-item[open] > summary.sc-why-q{
	background: rgba(0,0,0,.015);
	border-bottom: 1px solid rgba(0,0,0,.06);
}

body.single-product #tab-scopione_why .sc-why-a{
	padding: 12px 16px 16px;
}

body.single-product #tab-scopione_why .sc-why-a p{
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: rgba(17,17,17,.70);
}

/* Note + CTA */
body.single-product #tab-scopione_why .sc-why-note{
	margin-top: 12px;
}

body.single-product #tab-scopione_why .sc-why-cta{
	margin: 14px 0 8px !important;
}

body.single-product #tab-scopione_why .sc-why-cta a{
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Mobile: tighter padding + gutters */
@media (max-width: 767.98px){
	body.single-product .woocommerce-tabs #tab-scopione_why{
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.single-product #tab-scopione_why{
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	body.single-product #tab-scopione_why .sc-why-wrap{
		padding: 14px 6px 4px !important;
	}

	body.single-product #tab-scopione_why .sc-why-intro.lead{
		padding: 16px 14px 16px 18px !important;
		font-size: 16px;
		line-height: 1.55;
	}

	body.single-product #tab-scopione_why .sc-why-intro.lead::before{
		left: 8px;
		top: 12px;
		bottom: 12px;
	}

	body.single-product #tab-scopione_why .row.sc-why-grid{
		margin-left: -6px !important;
		margin-right: -6px !important;
	}
	body.single-product #tab-scopione_why .row.sc-why-grid > [class*="col-"]{
		padding-left: 6px !important;
		padding-right: 6px !important;
	}

	body.single-product #tab-scopione_why .sc-why-col{
		padding: 16px 14px 14px;
		border-radius: 12px;
	}
}

/* =========================================================
   SCOPIONE — REMOVE divider under product tabs (no line)
   Replace your current divider CSS with this.
   ========================================================= */

body.single-product .woocommerce-tabs{
  position: relative !important;
  border: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 28px !important; /* spacing between tabs and Related Parts */
}

/* Remove the pseudo-divider lines */
body.single-product .woocommerce-tabs::before,
body.single-product .woocommerce-tabs::after{
  content: none !important;
  display: none !important;
}

/* Some themes/plugins add borders on the next section — remove those too */
body.single-product .woocommerce-tabs + .related,
body.single-product .woocommerce-tabs + .up-sells,
body.single-product .woocommerce-tabs + .cross-sells,
body.single-product .woocommerce-tabs + section.related,
body.single-product .woocommerce-tabs + section.up-sells,
body.single-product .woocommerce-tabs + section.cross-sells{
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Mobile spacing tweak */
@media (max-width: 767.98px){
  body.single-product .woocommerce-tabs{
    margin-bottom: 20px !important;
  }
}

/* =========================================================
   SCOPIONE — Related Products / Up-sells / Upsells + WebToffee Related Parts
   SINGLE, BUG-FREE, CONSOLIDATED BLOCK (REPLACE YOUR CURRENT ONE)

   Goals:
   - No yellow underline under heading
   - No shadows behind cards
   - 8px radius everywhere
   - No extra image padding
   - Bottom gold accent on hover (not top)
   - Price ~50% bigger (centered)
   - 2-line titles + equal-height cards
   - Premium arrows (Swiper/Slick/Owl)
   - Desktop width matches Tabs section + centered
   ========================================================= */

/* ---------------------------
   Global knobs
--------------------------- */
body.single-product{
  --sc-rel-gold: var(--sc-yellow);
  --sc-rel-ink:  #111;

  --sc-rel-radius: 8px;
  --sc-rel-border: rgba(17,17,17,.12);
  --sc-rel-border-hover: rgba(255,190,61,.85);

  --sc-rel-pad: 14px;
  --sc-rel-btn-h: 46px;

  /* space AFTER related blocks */
  --sc-rel-gap-after: 28px;

  /* Desktop width alignment with Tabs */
  --sc-related-bleed: 20px; /* increase if still narrower than tabs; decrease if too wide */
  --sc-related-nudge: 0px;  /* if ever slightly off-center: try -6px or +6px */

  /* WebToffee/Owl arrow knobs */
  --sc-rp-arrow-size: 44px;
  --sc-rp-arrow-inset: 14px;
  --sc-rp-arrow-radius: 8px;

  --sc-rp-arrow-bg: rgba(17,17,17,.55);
  --sc-rp-arrow-border: rgba(255,190,61,.85);
  --sc-rp-arrow-shadow: 0 10px 22px rgba(0,0,0,.18);
}

/* Small screens: slightly tighter padding + slightly smaller Owl arrows */
@media (max-width: 767.98px){
  body.single-product{
    --sc-rel-pad: 12px;
    --sc-rp-arrow-size: 40px;
    --sc-rp-arrow-inset: 18px;
  }
}

/* ---------------------------
   Core WC sections (Related / Up-sells / Upsells) + WebToffee wrapper
--------------------------- */
body.single-product :is(section.related.products, section.up-sells.products, section.upsells.products, .wt-related-products){
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 0 var(--sc-rel-gap-after) 0 !important;
}

/* Remove theme underline/decoration under headings */
body.single-product :is(section.related.products, section.up-sells.products, section.upsells.products, .wt-related-products) > :is(h2,h3)::after{
  content: none !important;
  display: none !important;
}

/* Heading styling + CENTER on all screens */
body.single-product :is(section.related.products, section.up-sells.products, section.upsells.products, .wt-related-products) > :is(h2,h3){
  border: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 0 14px 0 !important;
  text-align: center !important;
  font-weight: 900 !important;
}

/* Swiper equal-height assist (if used) */
body.single-product :is(section.related.products, section.up-sells.products, section.upsells.products) .swiper-wrapper{
  align-items: stretch !important;
}

/* ---------------------------
   Card styling (native WC + WebToffee usually still uses li.product)
--------------------------- */
body.single-product :is(
  section.related.products,
  section.up-sells.products,
  section.upsells.products,
  .wt-related-products
) ul.products li.product,
body.single-product .wt-related-products li.product{
  position: relative !important;
  background: #fff !important;

  border: 1px solid var(--sc-rel-border) !important;
  border-radius: var(--sc-rel-radius) !important;

  box-shadow: none !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;

  transform: none !important;
  transition: border-color .18s ease, background-color .18s ease !important;
}

/* Hide scarcity/stock widgets inside related blocks */
body.single-product :is(section.related.products, section.up-sells.products, section.upsells.products, .wt-related-products) :is(
  [class*="scarcity"], [id*="scarcity"], [class*="stock-scarcity"],
  [class*="low-stock"], [class*="stockbar"], [class*="progress"],
  .merchant-stock-scarcity, .availability, .stock
){
  display: none !important;
}

/* Bottom gold accent */
body.single-product :is(
  section.related.products,
  section.up-sells.products,
  section.upsells.products,
  .wt-related-products
) :is(ul.products li.product, li.product)::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  height: 4px !important;
  background: rgba(255,190,61,.95) !important;

  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 3 !important;

  border-bottom-left-radius: var(--sc-rel-radius) !important;
  border-bottom-right-radius: var(--sc-rel-radius) !important;

  transition: opacity .18s ease !important;
}

/* Hover accent (desktop) */
@media (hover:hover){
  body.single-product :is(
    section.related.products,
    section.up-sells.products,
    section.upsells.products,
    .wt-related-products
  ) :is(ul.products li.product, li.product):hover{
    border-color: var(--sc-rel-border-hover) !important;
    background: #fff !important;
  }

  body.single-product :is(
    section.related.products,
    section.up-sells.products,
    section.upsells.products,
    .wt-related-products
  ) :is(ul.products li.product, li.product):hover::after{
    opacity: 1 !important;
  }
}

/* Keyboard focus accent */
body.single-product :is(
  section.related.products,
  section.up-sells.products,
  section.upsells.products,
  .wt-related-products
) :is(ul.products li.product, li.product):focus-within{
  border-color: var(--sc-rel-border-hover) !important;
}
body.single-product :is(
  section.related.products,
  section.up-sells.products,
  section.upsells.products,
  .wt-related-products
) :is(ul.products li.product, li.product):focus-within::after{
  opacity: 1 !important;
}

/* Touch devices: prevent “stuck highlighted card” after tapping */
@media (hover:none) and (pointer:coarse){
  body.single-product :is(
    section.related.products,
    section.up-sells.products,
    section.upsells.products,
    .wt-related-products
  ) :is(ul.products li.product, li.product):focus-within{
    border-color: var(--sc-rel-border) !important;
  }
  body.single-product :is(
    section.related.products,
    section.up-sells.products,
    section.upsells.products,
    .wt-related-products
  ) :is(ul.products li.product, li.product):focus-within::after{
    opacity: 0 !important;
  }
}

/* Link layout (no padding; avoids image padding) */
body.single-product :is(section.related.products, section.up-sells.products, section.upsells.products) ul.products li.product > a.woocommerce-LoopProduct-link,
body.single-product :is(section.related.products, section.up-sells.products, section.upsells.products) ul.products li.product > a.woocommerce-loop-product__link,
body.single-product .wt-related-products li.product > a{
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;

  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* Image: flush, no padding */
body.single-product :is(
  section.related.products,
  section.up-sells.products,
  section.upsells.products,
  .wt-related-products
) :is(ul.products li.product img, li.product img){
  display: block !important;
  width: 100% !important;
  height: auto !important;

  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(17,17,17,.08) !important;

  border-top-left-radius: var(--sc-rel-radius) !important;
  border-top-right-radius: var(--sc-rel-radius) !important;

  background: #f3f3f3 !important;
}

/* Title: 2-line clamp */
body.single-product :is(
  section.related.products,
  section.up-sells.products,
  section.upsells.products,
  .wt-related-products
) :is(ul.products li.product .woocommerce-loop-product__title, li.product .woocommerce-loop-product__title){
  padding: 12px var(--sc-rel-pad) 0 !important;
  margin: 0 !important;

  color: var(--sc-rel-ink) !important;
  font-weight: 900 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.012em !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;

  min-height: calc(2 * 1.22em) !important;
}

/* Price: bigger + centered */
body.single-product :is(
  section.related.products,
  section.up-sells.products,
  section.upsells.products,
  .wt-related-products
) :is(ul.products li.product .price, li.product .price){
  padding: 10px var(--sc-rel-pad) 0 !important;
  margin: 0 !important;

  color: var(--sc-rel-ink) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;

  font-size: clamp(18px, 1.6vw, 24px) !important;
  min-height: calc(2 * 1.15em) !important;

  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 8px !important;

  text-align: center !important;
}

body.single-product :is(
  section.related.products,
  section.up-sells.products,
  section.upsells.products,
  .wt-related-products
) :is(ul.products li.product .price del, li.product .price del){
  font-size: .70em !important;
  font-weight: 800 !important;
  color: rgba(17,17,17,.45) !important;
  opacity: 1 !important;
}

body.single-product :is(
  section.related.products,
  section.up-sells.products,
  section.upsells.products,
  .wt-related-products
) :is(ul.products li.product .price ins, li.product .price ins){
  background: transparent !important;
  text-decoration: none !important;
}

/* Button */
body.single-product :is(
  section.related.products,
  section.up-sells.products,
  section.upsells.products,
  .wt-related-products
) :is(ul.products li.product a.button, li.product a.button){
  display: block !important;
  width: calc(100% - (2 * var(--sc-rel-pad))) !important;

  margin: 8px var(--sc-rel-pad) var(--sc-rel-pad) !important;
  padding: 0 14px !important;

  height: var(--sc-rel-btn-h) !important;
  line-height: var(--sc-rel-btn-h) !important;

  border-radius: var(--sc-rel-radius) !important;
  border: 1px solid rgba(17,17,17,.16) !important;

  background: var(--sc-rel-gold) !important;
  color: var(--sc-dark) !important;

  font-weight: 900 !important;
  text-align: center !important;
  text-decoration: none !important;

  box-shadow: none !important;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease !important;
}

@media (hover:hover){
  body.single-product :is(
    section.related.products,
    section.up-sells.products,
    section.upsells.products,
    .wt-related-products
  ) :is(ul.products li.product a.button:hover, li.product a.button:hover){
    background: #f2b22f !important;
    border-color: rgba(17,17,17,.22) !important;
    transform: translateY(-1px) !important;
  }
}

/* ---------------------------
   Arrows: Swiper + Slick fallbacks
--------------------------- */
/* Swiper */
body.single-product :is(section.related.products, section.up-sells.products, section.upsells.products) .swiper-button-prev,
body.single-product :is(section.related.products, section.up-sells.products, section.upsells.products) .swiper-button-next{
  width: 75px !important;
  height: 75px !important;

  border-radius: var(--sc-rel-radius) !important;
  background: rgba(255,190,61,.95) !important;

  border: 1px solid rgba(17,17,17,.14) !important;
  box-shadow: none !important;

  color: var(--sc-dark) !important;
}
body.single-product :is(section.related.products, section.up-sells.products, section.upsells.products) .swiper-button-prev:after,
body.single-product :is(section.related.products, section.up-sells.products, section.upsells.products) .swiper-button-next:after{
  font-size: 18px !important;
  font-weight: 900 !important;
}
body.single-product :is(section.related.products, section.up-sells.products, section.upsells.products) .swiper-button-disabled{
  opacity: .35 !important;
  cursor: default !important;
}

/* Slick */
body.single-product :is(section.related.products, section.up-sells.products, section.upsells.products) :is(.slick-prev, .slick-next){
  width: 75px !important;
  height: 75px !important;

  border-radius: var(--sc-rel-radius) !important;
  background: rgba(255,190,61,.95) !important;

  border: 1px solid rgba(17,17,17,.14) !important;
  box-shadow: none !important;

  z-index: 5 !important;
}
body.single-product :is(section.related.products, section.up-sells.products, section.upsells.products) :is(.slick-prev:before, .slick-next:before){
  color: var(--sc-dark) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

/* ---------------------------
   WebToffee "Related Products for WooCommerce" (Owl Carousel)
--------------------------- */
body.single-product .wt-related-products{
  display: flow-root !important;
  padding-bottom: 10px !important;
}

/* Owl equal-height cards */
body.single-product .wt-related-products .owl-stage{
  display: flex !important;
}
body.single-product .wt-related-products .owl-item{
  display: flex !important;
  height: auto !important;
}
body.single-product .wt-related-products .owl-item > *{
  height: 100% !important;
}

/* Nav overlay */
body.single-product .wt-related-products .owl-carousel{
  position: relative !important;
}
body.single-product .wt-related-products .owl-theme .owl-nav{
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 60 !important;
  margin: 0 !important;
}
body.single-product .wt-related-products .owl-theme .owl-nav.disabled{
  display: none !important;
}

/* Nav buttons */
body.single-product .wt-related-products .owl-theme .owl-nav .owl-prev,
body.single-product .wt-related-products .owl-theme .owl-nav .owl-next,
body.single-product .wt-related-products .owl-theme .owl-nav > div,
body.single-product .wt-related-products .owl-theme .owl-nav button{
  pointer-events: auto !important;

  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: var(--sc-rp-arrow-size) !important;
  height: var(--sc-rp-arrow-size) !important;
  border-radius: var(--sc-rp-arrow-radius) !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;
  margin: 0 !important;

  background: var(--sc-rp-arrow-bg) !important;
  border: 1px solid var(--sc-rp-arrow-border) !important;
  box-shadow: var(--sc-rp-arrow-shadow) !important;

  background-image: none !important;

  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;

  cursor: pointer !important;
  opacity: .92 !important;

  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    opacity .18s ease !important;
}
body.single-product .wt-related-products .owl-theme .owl-nav .owl-prev{ left: var(--sc-rp-arrow-inset) !important; }
body.single-product .wt-related-products .owl-theme .owl-nav .owl-next{ right: var(--sc-rp-arrow-inset) !important; }

/* Hide injected icons */
body.single-product .wt-related-products .owl-theme .owl-nav :is(.slider_arrow, i, svg, .dashicons, span){
  display: none !important;
}

/* Draw clean arrows */
body.single-product .wt-related-products .owl-theme .owl-nav .owl-prev::before,
body.single-product .wt-related-products .owl-theme .owl-nav .owl-next::before{
  content: "" !important;
  display: block !important;

  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.28) !important;

  transform: translateY(-1px) !important;
}
body.single-product .wt-related-products .owl-theme .owl-nav .owl-prev::before{ content: "‹" !important; }
body.single-product .wt-related-products .owl-theme .owl-nav .owl-next::before{ content: "›" !important; }

/* Hover/focus (BUG-FREE rgba alphas) */
body.single-product .wt-related-products .owl-theme .owl-nav .owl-prev:hover,
body.single-product .wt-related-products .owl-theme .owl-nav .owl-next:hover,
body.single-product .wt-related-products .owl-theme .owl-nav .owl-prev:focus,
body.single-product .wt-related-products .owl-theme .owl-nav .owl-next:focus,
body.single-product .wt-related-products .owl-theme .owl-nav > div:hover,
body.single-product .wt-related-products .owl-theme .owl-nav button:hover,
body.single-product .wt-related-products .owl-theme .owl-nav > div:focus,
body.single-product .wt-related-products .owl-theme .owl-nav button:focus{
  background: var(--sc-yellow) !important;
  border-color: rgba(17,17,17,.28) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.22) !important;
  transform: translateY(-50%) scale(1.03) !important;
  opacity: 1 !important;
  outline: none !important;
}
body.single-product .wt-related-products .owl-theme .owl-nav .owl-prev:hover::before,
body.single-product .wt-related-products .owl-theme .owl-nav .owl-next:hover::before,
body.single-product .wt-related-products .owl-theme .owl-nav .owl-prev:focus::before,
body.single-product .wt-related-products .owl-theme .owl-nav .owl-next:focus::before{
  color: var(--sc-dark) !important;
  text-shadow: none !important;
}

/* Disabled arrow handling */
body.single-product .wt-related-products .owl-theme .owl-nav :is(.owl-prev,.owl-next).disabled,
body.single-product .wt-related-products .owl-theme .owl-nav :is(.owl-prev,.owl-next)[aria-disabled="true"],
body.single-product .wt-related-products .owl-theme .owl-nav :is(.owl-prev,.owl-next)[disabled]{
  display: none !important;
}

/* Desktop: show arrows only on hover */
@media (hover:hover) and (pointer:fine){
  body.single-product .wt-related-products .owl-theme .owl-nav :is(.owl-prev,.owl-next){
    opacity: 0 !important;
  }
  body.single-product .wt-related-products:hover .owl-theme .owl-nav :is(.owl-prev,.owl-next):not(.disabled):not([aria-disabled="true"]):not([disabled]){
    opacity: .92 !important;
  }
}

/* Mobile arrow size tweak */
@media (max-width: 767.98px){
  body.single-product .wt-related-products .owl-theme .owl-nav .owl-prev::before,
  body.single-product .wt-related-products .owl-theme .owl-nav .owl-next::before{
    font-size: 26px !important;
  }
}

/* ---------------------------
   Desktop width match Tabs + center (single method; no duplicates)
--------------------------- */
@media (min-width: 992px){
  body.single-product :is(
    section.related.products,
    section.up-sells.products,
    section.upsells.products,
    .wt-related-products
  ){
    max-width: none !important;
    width: calc(100% + (2 * var(--sc-related-bleed))) !important;

    position: relative !important;
    left: 50% !important;
    transform: translateX(calc(-50% + var(--sc-related-nudge))) !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.single-product :is(
    section.related.products,
    section.up-sells.products,
    section.upsells.products,
    .wt-related-products
  ) :is(
    ul.products,
    .products,
    .owl-stage-outer,
    .owl-carousel
  ){
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =========================================================
   SCOPIONE — Product Editorial Authority CTA (SCOPED ONLY)
   Targets ONLY: body.single-product .sc-product-edu and children

   Goals:
   - Full-bleed band (100vw), inner content capped at 1200px
   - Consistent 1200x630 card image framing on all screen sizes
   - Premium “polish” card effects + refined buttons
   - Mobile swipe carousel that always works + proper edge padding
   ========================================================= */

body.single-product .sc-product-edu{
  /* Design tokens (scoped) — --sc-yellow inherited from :root */
  --sc-ink: var(--sc-dark);
  --sc-radius: 8px;
  --sc-pad: 18px;
  --sc-gap: 14px;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  padding: 34px 0 26px;
  position: relative;

  /* Fallback first, then clip */
  overflow-x: hidden;
  overflow-x: clip;

  background:
    radial-gradient(900px 260px at 18% 12%, rgba(255,190,61,.16), rgba(255,190,61,0) 60%),
    radial-gradient(800px 260px at 85% 45%, rgba(255,255,255,.06), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #0b0b0b 0%, var(--sc-dark) 100%);
}

body.single-product .sc-product-edu::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.20;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      rgba(255,255,255,0) 7px,
      rgba(255,255,255,0) 14px
    );
  mix-blend-mode: overlay;
}

/* Inner layout width cap */
body.single-product .sc-product-edu .sc-product-edu__shell{
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sc-pad);
}

/* Header (centered on ALL screens) */
body.single-product .sc-product-edu .sc-product-edu__header{
  text-align: center;
  margin: 0 0 16px;
}

body.single-product .sc-product-edu .sc-product-edu__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.78);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  margin-bottom: 10px;
}

body.single-product .sc-product-edu .sc-product-edu__eyebrow::before{
  content:"";
  width:40px;
  height:10px;
  border-radius:8px;
  background: var(--sc-yellow);
  box-shadow: 0 0 0 6px rgba(255,190,61,.14);
}

body.single-product .sc-product-edu .sc-product-edu__header h2{
  margin: 0 0 10px;
  color:#fff;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: clamp(18px, 2vw, 22px);
}

body.single-product .sc-product-edu .sc-product-edu__header h2 span{
  color: var(--sc-yellow);
}

body.single-product .sc-product-edu .sc-product-edu__sub{
  margin: 0 auto;
  max-width: 840px;
  color: rgba(255,255,255,.78);
  line-height: 1.55;
  text-align: center;
}

/* =========================================================
   Cards — Desktop grid
   ========================================================= */
body.single-product .sc-product-edu .sc-product-edu__cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sc-gap);
  margin: 18px 0 14px;
}

/* Card base */
body.single-product .sc-product-edu .scp-kcard{
  border-radius: var(--sc-radius);
  overflow: hidden;
  position: relative;

  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(1200px 260px at 18% 0%, rgba(255,190,61,.10), rgba(255,190,61,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));

  box-shadow:
    0 18px 50px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.08);

  transition: transform .22s ease, box-shadow .22s ease;
  will-change: transform;
  transform: translateZ(0);
}

/* Gloss highlight */
body.single-product .sc-product-edu .scp-kcard::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--sc-radius);
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 35%);
  opacity: .55;
}

/* Soft gold glow */
body.single-product .sc-product-edu .scp-kcard::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: calc(var(--sc-radius) + 1px);
  pointer-events:none;
  background: radial-gradient(420px 180px at 18% 20%, rgba(255,190,61,.18), rgba(255,190,61,0) 70%);
  opacity: .55;
  filter: blur(10px);
}

body.single-product .sc-product-edu .scp-kcard:hover{
  transform: translateY(-4px);
  box-shadow:
    0 26px 72px rgba(0,0,0,.78),
    0 0 28px rgba(255,190,61,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* Image wrapper */
body.single-product .sc-product-edu .scp-kcard__imgwrap{
  display:block;
  position: relative;
  border-radius: var(--sc-radius) var(--sc-radius) 0 0;
  overflow: hidden;
}

/* Consistent 1200x630 framing on ALL screens */
body.single-product .sc-product-edu .scp-kcard__imgwrap img{
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  object-position: center;
  display:block;

  filter: brightness(.96) contrast(1.06) saturate(1.05);
  transform: scale(1.001);
  transform-origin: center center;
  transition: transform .35s ease, filter .35s ease;
}

body.single-product .sc-product-edu .scp-kcard:hover .scp-kcard__imgwrap img{
  transform: scale(1.04);
  filter: brightness(1.02) contrast(1.08) saturate(1.06);
}

/* Body column so CTA sits at bottom consistently */
body.single-product .sc-product-edu .scp-kcard__body{
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 220px at 16% 0%, rgba(255,190,61,.06), rgba(255,190,61,0) 55%),
    rgba(16,16,16,.92);

  border-radius: 0 0 var(--sc-radius) var(--sc-radius);

  display: flex;
  flex-direction: column;
  gap: 10px;

  min-height: 168px;
}

body.single-product .sc-product-edu .scp-kcard__title{
  margin: 0;
  font-size: 15px;
  line-height: 1.28;
  font-weight: 900;
}

/* Title clamp */
body.single-product .sc-product-edu .scp-kcard__title a{
  color: var(--sc-yellow);
  text-decoration: none;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.single-product .sc-product-edu .scp-kcard__desc{
  margin: 0;
  color: rgba(255,255,255,.78);
  line-height: 1.45;
  font-size: 13.25px;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card CTA */
body.single-product .sc-product-edu .scp-kcard__cta{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 9px 12px;
  border-radius: var(--sc-radius);
  border: 1px solid rgba(255,190,61,.55);

  background: linear-gradient(180deg, rgba(255,190,61,.14), rgba(255,190,61,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);

  color: #fff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11.5px;

  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease, transform .15s ease;
}

body.single-product .sc-product-edu .scp-kcard__cta:hover{
  background: var(--sc-yellow);
  color: var(--sc-ink);
  box-shadow: 0 10px 22px rgba(0,0,0,.45), 0 0 18px rgba(255,190,61,.38);
  transform: translateY(-1px);
}

/* =========================================================
   Fitment bar (polished, compact)
   ========================================================= */
body.single-product .sc-product-edu .sc-product-edu__fitment{
  margin-top: 6px;
  border-radius: var(--sc-radius);
  border: 1px solid rgba(255,255,255,.14);

  background:
    radial-gradient(900px 220px at 16% 0%, rgba(255,190,61,.10), rgba(255,190,61,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));

  box-shadow:
    0 18px 48px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.08);

  padding: 14px 14px;

  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}

body.single-product .sc-product-edu .sc-product-edu__fitment-title{
  color:#fff;
  font-weight: 900;
  font-size: 15px;
  line-height: 1.2;
  margin-bottom: 4px;
}

body.single-product .sc-product-edu .sc-product-edu__fitment-desc{
  color: rgba(255,255,255,.78);
  line-height: 1.45;
  font-size: 13px;
}

body.single-product .sc-product-edu .sc-product-edu__fitment-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Fitment buttons */
body.single-product .sc-product-edu .scp-fitbtn{
  height: 46px;
  padding: 0 16px;
  border-radius: var(--sc-radius);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;

  font-weight: 950;
  letter-spacing: .02em;

  position: relative;
  isolation: isolate;

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

body.single-product .sc-product-edu .scp-fitbtn--primary{
  background: linear-gradient(180deg, #ffd37a, var(--sc-yellow));
  color: var(--sc-ink);
  border: 1px solid rgba(0,0,0,.18);

  box-shadow:
    0 14px 28px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.30);

  min-width: 190px;
}

body.single-product .sc-product-edu .scp-fitbtn--primary::after{
  content:"";
  position:absolute;
  inset: 1px 1px auto 1px;
  height: 45%;
  border-radius: calc(var(--sc-radius) - 1px) calc(var(--sc-radius) - 1px) 14px 14px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0));
  opacity: .9;
  z-index: -1;
}

body.single-product .sc-product-edu .scp-fitbtn--ghost{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.18);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 18px rgba(0,0,0,.35);

  min-width: 170px;
}

body.single-product .sc-product-edu .scp-fitbtn:hover{
  transform: translateY(-1px);
}

body.single-product .sc-product-edu .scp-fitbtn--primary:hover{
  box-shadow:
    0 18px 38px rgba(0,0,0,.55),
    0 0 22px rgba(255,190,61,.28),
    inset 0 1px 0 rgba(255,255,255,.30);
}

body.single-product .sc-product-edu .scp-fitbtn--ghost:hover{
  border-color: rgba(255,190,61,.28);
  box-shadow:
    0 16px 30px rgba(0,0,0,.48),
    0 0 16px rgba(255,190,61,.12),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* Focus ring (accessible) */
body.single-product .sc-product-edu .scp-fitbtn:focus-visible,
body.single-product .sc-product-edu .scp-kcard__cta:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 4px rgba(255,190,61,.28), 0 14px 28px rgba(0,0,0,.50);
}

/* =========================================================
   Mobile — swipe carousel + proper edge padding (single block)
   ========================================================= */
@media (max-width: 768px){

  body.single-product .sc-product-edu{
    padding: 22px 0 20px;
  }

  /* True horizontal scroller */
  body.single-product .sc-product-edu .sc-product-edu__cards{
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    touch-action: pan-x;

    /* gutters match the module padding */
    margin: 16px calc(-1 * var(--sc-pad)) 14px;
    padding: 0 var(--sc-pad) 12px;

    /* helps snapping start aligned to gutter */
    scroll-padding-left: var(--sc-pad);
    scroll-padding-right: var(--sc-pad);

    scrollbar-width: thin;
  }

  body.single-product .sc-product-edu .sc-product-edu__cards::-webkit-scrollbar{
    height: 8px;
  }

  body.single-product .sc-product-edu .sc-product-edu__cards::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.18);
    border-radius: 999px;
  }

  body.single-product .sc-product-edu .scp-kcard{
    flex: 0 0 88%;
    max-width: 380px;
    scroll-snap-align: start;
  }

  body.single-product .sc-product-edu .scp-kcard__body{
    min-height: 156px;
    padding: 12px 12px 13px;
  }

  body.single-product .sc-product-edu .scp-kcard__title{
    font-size: 14.5px;
  }

  body.single-product .sc-product-edu .scp-kcard__desc{
    font-size: 13px;
  }

  /* Fitment bar stacks */
  body.single-product .sc-product-edu .sc-product-edu__fitment{
    flex-direction: column;
    align-items: flex-start;
  }

  body.single-product .sc-product-edu .sc-product-edu__fitment-actions{
    width: 100%;
    justify-content: flex-start;
  }

  body.single-product .sc-product-edu .scp-fitbtn{
    width: 100%;
  }

  body.single-product .sc-product-edu .scp-fitbtn--primary,
  body.single-product .sc-product-edu .scp-fitbtn--ghost{
    min-width: 0;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  body.single-product .sc-product-edu .scp-kcard,
  body.single-product .sc-product-edu .scp-kcard__imgwrap img,
  body.single-product .sc-product-edu .scp-fitbtn,
  body.single-product .sc-product-edu .scp-kcard__cta{
    transition: none;
  }
  body.single-product .sc-product-edu .scp-kcard:hover,
  body.single-product .sc-product-edu .scp-fitbtn:hover,
  body.single-product .sc-product-edu .scp-kcard__cta:hover{
    transform: none;
  }
}

/* SCOPIONE — Center fitment text on mobile (scoped) */
@media (max-width: 768px){
  body.single-product .sc-product-edu .sc-product-edu__fitment{
    text-align: center;
    align-items: center;
  }

  body.single-product .sc-product-edu .sc-product-edu__fitment-copy{
    width: 100%;
    text-align: center;
  }

  body.single-product .sc-product-edu .sc-product-edu__fitment-title,
  body.single-product .sc-product-edu .sc-product-edu__fitment-desc{
    text-align: center;
  }

  body.single-product .sc-product-edu .sc-product-edu__fitment-actions{
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   P1-fix supplemental — additional product-only rules
   migrated out of scopione-child.css. These were not
   body.single-product-scoped originally, but the selectors
   target markup that only renders on PDP.
   ========================================================= */

/* div.images / div.summary side-by-side desktop layout */
.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images { width: 54%; }

.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
  width: 44%;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
  padding: 1.2rem;
  border-radius: .5rem;
}

/* form.cart variations layout + add-to-cart width */
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th { display: block; }
.woocommerce div.product form.cart .button { width: calc(100% - 4em); padding: 1em; }

/* Legacy WC tabs wrapper baseline (modern premium tabs above wins via specificity) */
.woocommerce-page div.product .woocommerce-tabs { margin-bottom: 4em; border-bottom: 1px solid #dee2e6; }

/* Product title baseline + rating font */
.woocommerce div.product .product_title { font-size: 1.5rem; font-weight: 600; }
.woocommerce div.product .woocommerce-product-rating { font-size: 0.8125rem; margin-bottom: 1em; }

/* Customer reviews link colour (rating-pill link) */
.woocommerce-review-link { color: #6c757d; }
.woocommerce-review-link:hover { color: #494f54; }

/* Short description font + variations label/select + reset_variations */
.woocommerce-product-details__short-description { font-size: .875rem; }
.woocommerce div.product form.cart .variations label { font-size: .875rem; }
.woocommerce div.product form.cart .variations select { max-width: 80%; }
.woocommerce div.product form.cart .reset_variations { color: #3f3f3f; display: none !important; }
.woocommerce div.product form.cart .reset_variations:before {
  display: inline-block;
  margin-right: 5px;
  font-family: WooCommerce;
  content: "\e013";
}

/* Product meta (categories / tags / SKU row beneath summary) */
.product_meta { padding-top: 1rem; border-top: 1px solid #dee2e6; font-size: .8125rem; }
.product_meta > span { color: #333; font-weight: 600; }
.product_meta > span a,
.product_meta > span span { display: inline-block; margin: 0 1px; color: #777; font-weight: 400; }

/* Hide SKU label (PDP-only markup; split off from a generic .pswp__caption__center rule) */
.sku_wrapper { display: none; }

/* Variation swatches plugin selected-state ring */
.woo-variation-swatches-stylesheet-enabled .variable-items-wrapper .variable-item:not(.radio-variable-item).selected,
.woo-variation-swatches-stylesheet-enabled .variable-items-wrapper .variable-item:not(.radio-variable-item).selected:hover {
  box-shadow: 0 0 0 4px rgba(255,180,75,.9);
}

/* Custom product-options block (template-parts/scopione-product-options.php) */
.pr-options { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #dee2e6; }
.pr-options img { width: 20%; margin-bottom: 1rem; }

/* Review section heading + review-form star colour */
.woocommerce #reviews #comments h2 { font-size: 1rem; }
.woocommerce p.stars a { color: orange; }

/* Review-comment dash + published-date hide */
.comment_container .woocommerce-review__dash,
.comment_container .woocommerce-review__published-date { display: none; }

/* Woo gallery thumb grid widths (fallback row sizing) */
.woocommerce div.product div.images .flex-control-thumbs li { width: 16.6%; }
.woocommerce-product-gallery .flex-control-thumbs li:nth-child(4n+1) { clear: none; }
.woocommerce-product-gallery .flex-control-thumbs li:nth-child(6n+1) { clear: left; }

/* Legacy .prev_next_buttons (older prev/next nav class — superseded by
   .scopione-prev-next via scopione_prev_next_product_nav() in functions.php).
   Kept here for any legacy plugin output that still emits this class. */
.prev_next_buttons { line-height: 40px; margin-bottom: 20px; }
.prev_next_buttons a[rel="prev"],
.prev_next_buttons a[rel="next"] { display: block; }
.prev_next_buttons a[rel="prev"] { float: right; }
.prev_next_buttons a[rel="next"] { float: left; }
.prev_next_buttons::after { content: ""; display: block; clear: both; }

/* Mobile: stack gallery + summary, drop card padding/shadow */
@media (max-width: 768px) {
  .woocommerce #content div.product div.images,
  .woocommerce #content div.product div.summary,
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary,
  .woocommerce-page #content div.product div.images,
  .woocommerce-page #content div.product div.summary,
  .woocommerce-page div.product div.images,
  .woocommerce-page div.product div.summary {
    float: none;
    width: 100%;
    padding: 0;
    box-shadow: none !important;
  }

  /* Legacy tabs link font-size (modern premium pill styling above wins) */
  .woocommerce div.product .woocommerce-tabs ul.tabs li a { font-size: 0.8125rem; }
}

/* =========================================================
   SCOPIONE — Single-product breadcrumbs (P1-fix)
   Pattern mirrors:
     /shop/  : section.scopione-shop-hero .scopione-breadcrumbs (shop-landing.css:84)
     category: .shop-header .scopione-breadcrumbs (scopione-category.css:55)
   Single-product had no dedicated rule — was styled by inline style="" on
   the <nav class="scopione-breadcrumbs"> wrapper. Moving that to a proper
   scoped rule lets us tune the look without editing the template.
   ========================================================= */
body.single-product .shop-header .scopione-breadcrumbs {
  margin: 0 0 .55rem 0;
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.52);
}

body.single-product .shop-header .scopione-breadcrumbs #breadcrumbs {
  margin: 0;
  font-size: inherit;
  color: inherit;
}

/* Breadcrumb links: understated white-opacity with yellow on hover */
body.single-product .shop-header .scopione-breadcrumbs #breadcrumbs a,
body.single-product .shop-header .scopione-breadcrumbs #breadcrumbs a:visited {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color .15s ease;
}

body.single-product .shop-header .scopione-breadcrumbs #breadcrumbs a:hover {
  color: var(--sc-yellow);
}

body.single-product .shop-header .scopione-breadcrumbs #breadcrumbs a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 190, 61, .35);
  border-radius: 2px;
}

/* Current item — Yoast emits <span class="breadcrumb_last"><strong>Title</strong></span>.
   Slightly more visible than the link items so the leaf reads as "you are here". */
body.single-product .shop-header .scopione-breadcrumbs .breadcrumb_last,
body.single-product .shop-header .scopione-breadcrumbs .breadcrumb_last strong {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}