/* ==========================================================================
   BuyVCC Single Product page — premium fintech redesign
   Targets the OceanWP / WooCommerce single-product layout without changing
   the underlying markup. Tokens kept consistent with the rest of the site.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  body.single-product *,
  body.single-product *::before,
  body.single-product *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── Page shell ─────────────────────────────────────────────────────────── */
body.single-product {
  background: #0d0f1f !important;
  color: #e2e8f0 !important;
}
/* CSS spec quirk: when overflow-x is `hidden` and overflow-y is `visible`,
   the browser computes overflow-y as `auto`, creating a scroll context that
   BREAKS position:sticky for descendants. global.css forces overflow-x:hidden
   on every body — for the single-product page we let body overflow be visible
   in BOTH axes so the sticky gallery works. The body wrapper has nothing that
   would scroll horizontally anyway. */
html body.single-product.single-product {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

body.single-product #main,
body.single-product #content-wrap {
  background: transparent !important;
  padding-top: 32px !important;
  padding-bottom: 80px !important;
}

body.single-product .container,
body.single-product .single-product .product {
  max-width: 1200px !important;
}

/* Hide breadcrumbs (visual clutter) on single product */
body.single-product .ocean-breadcrumb-wrap,
body.single-product .woocommerce-breadcrumb { display: none !important; }

/* ── Product hero (image + summary) ─────────────────────────────────────── */
/* div.product becomes a flex column — children flow vertically in this order:
   .bvc-hero-row (gallery + summary, 2-col grid),
   then .bvc-how-it-works, .woocommerce-tabs, .related.products etc. as
   100%-wide siblings. Sticky gallery is bounded to the hero-row only. */
body.single-product .woocommerce div.product,
body.single-product div.product {
  display: flex !important;
  flex-direction: column !important;
  gap: 64px !important;
  margin-bottom: 60px !important;
  float: none !important;
}
/* Hero row: 2-column grid. Left column contains gallery + card features
   (wrapped in .bvc-hero-left so sticky on the gallery works across both).
   Right column is the WC summary. */
body.single-product .bvc-hero-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
  column-gap: 56px !important;
  row-gap: 64px !important;
  align-items: start;
  width: 100%;
  max-width: 100%;
}
body.single-product .bvc-hero-row > .bvc-hero-left {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}
/* The OWP product nav was previously a direct child of .bvc-hero-row but
   since we now wrap things in .bvc-hero-left it ends up there. Keep it
   spanning full width above the gallery. */
body.single-product .bvc-hero-row > .bvc-hero-left > .owp-product-nav-wrap {
  margin-bottom: -16px;
}
/* OceanWP's prev/next product nav also hooks woocommerce_before_single_product_summary,
   so it ends up inside our hero row. Span it across both columns and place it
   above the gallery + summary instead of competing with them for column space. */
body.single-product .bvc-hero-row > .owp-product-nav-wrap {
  grid-column: 1 / -1 !important;
  margin-bottom: -32px;
}

/* All non-hero children of div.product are full width by default in flex. The
   grid-column rule below is preserved as a no-op safety net for any theme
   that flips div.product back to grid. */
body.single-product div.product > .owp-product-nav-wrap,
body.single-product div.product > .clear-after-summary,
body.single-product div.product > .woocommerce-tabs,
body.single-product div.product > section.related.products,
body.single-product div.product > .related.products,
body.single-product div.product > .bvc-how-it-works {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.single-product div.product > .clear-after-summary { display: none !important; }
body.single-product div.product > .owp-product-nav-wrap { margin-bottom: -32px !important; }

/* Gallery scrolls naturally with the page — sticky was removed once the
   Card Features box was added below it (the left column now has its own
   content rhythm and doesn't need the gallery pinned).
   Stays position:relative so the absolute lens-trigger button anchors to
   the gallery card, not to a far-up ancestor. */
body.single-product .bvc-hero-left .woocommerce-product-gallery,
body.single-product .bvc-hero-left div.images {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  position: relative !important;
  top: auto !important;
  min-width: 0 !important;
}
/* Summary column scrolls naturally — never sticky, never stretched */
body.single-product .bvc-hero-row > .summary {
  align-self: start !important;
}

/* Cap every descendant of the gallery so nothing can overflow on mobile */
body.single-product .woocommerce-product-gallery,
body.single-product .woocommerce-product-gallery *,
body.single-product .woocommerce-product-gallery__wrapper,
body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery__image a,
body.single-product .woocommerce-product-gallery img {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
/* Force the actual product image to fit its column */
body.single-product .woocommerce-product-gallery img.wp-post-image,
body.single-product .woocommerce-product-gallery img.attachment-woocommerce_single,
body.single-product .woocommerce-product-gallery img {
  width: 100% !important;
  height: auto !important;
}

/* OceanWP's prev/next nav above the product also caps to viewport */
body.single-product .owp-product-nav-wrap,
body.single-product .owp-product-nav-wrap * {
  max-width: 100% !important;
  box-sizing: border-box;
}

body.single-product .woocommerce div.product div.summary,
body.single-product div.product .summary,
body.single-product div.product .summary.entry-summary {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding-top: 8px;
}

body.single-product .woocommerce-product-gallery__wrapper {
  background: linear-gradient(135deg, #1a1e38 0%, #12152b 100%);
  border: 1px solid #2a2f52;
  border-radius: 20px;
  padding: 40px;
  position: relative;
  overflow: hidden;
}
body.single-product .woocommerce-product-gallery__wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 40% at 50% 0%, rgba(124, 58, 237, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

body.single-product .woocommerce-product-gallery img {
  width: 100% !important;
  height: auto !important;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(124, 58, 237, 0.18);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  z-index: 1;
}
body.single-product .woocommerce-product-gallery:hover img {
  transform: translateY(-4px) scale(1.01);
}

/* Sale badge — repositioned and rebrand-coloured */
body.single-product .onsale {
  position: absolute !important;
  top: 24px !important;
  left: 24px !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  border: none !important;
  margin: 0 !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.4) !important;
  z-index: 2 !important;
}

/* Disable click-to-zoom on the gallery IMAGE itself — only the lens icon
   below should open the lightbox. pointer-events:none on the wrapping <a>
   removes WC's default click handler; the lens trigger has its own handler
   and overrides pointer-events back to auto so it stays clickable. */
body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery__image > a {
  pointer-events: none !important;
  cursor: default !important;
}

/* Magnify (zoom) lens trigger — prominent so users discover the lightbox.
 * Hide WooCommerce's default unicode 🔍 character and replace with our SVG. */
body.single-product .woocommerce-product-gallery__trigger {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  width: 44px !important;
  height: 44px !important;
  display: block !important;
  background: rgba(13, 15, 31, 0.85) !important;
  border-radius: 50% !important;
  border: 1px solid rgba(124, 58, 237, 0.45) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  /* Hide the default 🔍 character completely */
  font-size: 0 !important;
  color: transparent !important;
  text-indent: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35),
              0 0 0 6px rgba(124, 58, 237, 0.06);
  transition: transform 0.22s ease,
              border-color 0.22s ease,
              box-shadow 0.22s ease,
              background 0.22s ease;
  z-index: 5 !important;
  cursor: zoom-in !important;
}
body.single-product .woocommerce-product-gallery__trigger:hover {
  transform: scale(1.08);
  border-color: #a855f7 !important;
  background: rgba(124, 58, 237, 0.25) !important;
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.35),
              0 0 0 8px rgba(124, 58, 237, 0.08);
}
body.single-product .woocommerce-product-gallery__trigger::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat center / 22px;
}
/* Belt-and-braces: kill any inner img/icon WC might inject */
body.single-product .woocommerce-product-gallery__trigger img,
body.single-product .woocommerce-product-gallery__trigger svg,
body.single-product .woocommerce-product-gallery__trigger i {
  display: none !important;
}

/* Hide the WC zoom plugin's duplicate image (causes mobile overflow) */
body.single-product .woocommerce-product-gallery img.zoomImg { display: none !important; }

/* ── Summary column ─────────────────────────────────────────────────────── */
body.single-product .product_title.entry-title {
  font-size: 36px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: #e2e8f0 !important;
  margin: 0 0 16px !important;
}

/* Price */
body.single-product .summary > .price,
body.single-product .summary p.price {
  font-size: 44px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 24px !important;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
body.single-product .summary > .price ins,
body.single-product .summary > .price bdi { background: transparent !important; }
body.single-product .summary > .price del {
  font-size: 22px !important;
  margin-right: 12px;
  opacity: 0.45;
  -webkit-text-fill-color: #94a3b8;
}

/* Short description */
body.single-product .woocommerce-product-details__short-description {
  color: #cbd5e1 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
}
body.single-product .woocommerce-product-details__short-description p { margin: 0 0 12px !important; }
body.single-product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0 !important; }

body.single-product .woocommerce-product-details__short-description ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 0 !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
body.single-product .woocommerce-product-details__short-description ul li {
  position: relative;
  padding-left: 26px !important;
  font-size: 14px !important;
  color: #cbd5e1 !important;
  line-height: 1.5 !important;
}
body.single-product .woocommerce-product-details__short-description ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.5 11.5L3 8l1-1 2.5 2.5L12 4l1 1z'/></svg>") no-repeat center/12px;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.5 11.5L3 8l1-1 2.5 2.5L12 4l1 1z'/></svg>") no-repeat center/12px;
}

/* SKU / Category / Tags meta — minimised */
body.single-product .product_meta {
  border-top: 1px solid #2a2f52 !important;
  padding-top: 18px !important;
  margin-top: 24px !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
  letter-spacing: 0.04em !important;
}
body.single-product .product_meta > span {
  display: block !important;
  margin: 6px 0 !important;
}
body.single-product .product_meta a {
  color: #a855f7 !important;
  text-decoration: none !important;
  margin-left: 6px;
}
body.single-product .product_meta a:hover { text-decoration: underline !important; }

/* ── Buy Now button (popup trigger) ─────────────────────────────────────── */
body.single-product .buyvcc-buy-wrapper {
  margin: 28px 0 0 !important;
}
body.single-product .buyvcc-buy-btn {
  display: block !important;
  width: 100% !important;
  padding: 18px 28px !important;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 12px 32px rgba(124, 58, 237, 0.35),
              0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease !important;
  isolation: isolate;
}
body.single-product .buyvcc-buy-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
body.single-product .buyvcc-buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(124, 58, 237, 0.5);
  filter: brightness(1.06);
}
body.single-product .buyvcc-buy-btn:hover::after {
  transform: translateX(100%);
}
body.single-product .buyvcc-buy-btn:active { transform: translateY(0); }

/* Trust row under the buy button */
body.single-product .buyvcc-trust-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  margin-top: 16px !important;
}
body.single-product .buyvcc-trust-row span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-weight: 500;
}
body.single-product .buyvcc-trust-row svg {
  width: 14px !important;
  height: 14px !important;
  color: #a855f7 !important;
}

/* ── Tabs (Description / Reviews) — full-width glassmorphism panel ─────── */
body.single-product .woocommerce-tabs {
  margin-top: 24px !important;
  padding-top: 24px !important;
  position: relative;
}

/* Glow accents behind the glass panel */
body.single-product .woocommerce-tabs::before {
  content: '';
  position: absolute;
  top: 80px;
  left: 8%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
}
body.single-product .woocommerce-tabs::after {
  content: '';
  position: absolute;
  top: 80px;
  right: 8%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
}

body.single-product .woocommerce-tabs ul.tabs {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  display: flex;
  gap: 8px;
  background: transparent !important;
  position: relative;
  z-index: 1;
}
body.single-product .woocommerce-tabs ul.tabs::before { display: none !important; }
body.single-product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background 0.22s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.single-product .woocommerce-tabs ul.tabs li::before,
body.single-product .woocommerce-tabs ul.tabs li::after { display: none !important; }
body.single-product .woocommerce-tabs ul.tabs li a {
  display: block !important;
  padding: 13px 26px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
body.single-product .woocommerce-tabs ul.tabs li:hover a {
  color: #e2e8f0 !important;
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.18);
}
body.single-product .woocommerce-tabs ul.tabs li.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(168, 85, 247, 0.12) 100%) !important;
  border-radius: 12px !important;
}
body.single-product .woocommerce-tabs ul.tabs li.active a {
  color: #a855f7 !important;
  background: transparent !important;
  border-color: rgba(124, 58, 237, 0.4) !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.18);
}

/* Glassmorphism panel — the hallmark of the redesign */
body.single-product .woocommerce-Tabs-panel {
  background: rgba(18, 21, 43, 0.45) !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  border-radius: 20px !important;
  padding: 40px 44px !important;
  color: #cbd5e1 !important;
  line-height: 1.75 !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  position: relative;
  z-index: 1;
}
body.single-product .woocommerce-Tabs-panel h2,
body.single-product .woocommerce-Tabs-panel h3 {
  color: #e2e8f0 !important;
  margin-top: 24px !important;
  margin-bottom: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}
body.single-product .woocommerce-Tabs-panel h2:first-child,
body.single-product .woocommerce-Tabs-panel h3:first-child { margin-top: 0 !important; }
body.single-product .woocommerce-Tabs-panel p {
  margin: 0 0 14px !important;
  font-size: 15px !important;
}
body.single-product .woocommerce-Tabs-panel p:last-child { margin-bottom: 0 !important; }
body.single-product .woocommerce-Tabs-panel a {
  color: #a855f7 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.3);
  transition: border-color 0.22s ease;
}
body.single-product .woocommerce-Tabs-panel a:hover { border-bottom-color: #a855f7 !important; }

/* ── Additional Information tab — WC product attributes table ─────────── */
body.single-product .woocommerce-product-attributes,
body.single-product table.shop_attributes {
  display: table !important;
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: linear-gradient(180deg, rgba(20, 22, 47, 0.7), rgba(15, 17, 38, 0.7));
  border: 1px solid rgba(168, 85, 247, 0.28) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  font-size: 14px !important;
}
body.single-product .woocommerce-product-attributes tr,
body.single-product table.shop_attributes tr {
  display: table-row !important;
  background: transparent !important;
}
body.single-product .woocommerce-product-attributes-item__label,
body.single-product .woocommerce-product-attributes-item__value,
body.single-product table.shop_attributes th,
body.single-product table.shop_attributes td {
  display: table-cell !important;
  padding: 14px 18px !important;
  vertical-align: middle !important;
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  text-align: left !important;
  font-style: normal !important;
}
body.single-product .woocommerce-product-attributes-item__label,
body.single-product table.shop_attributes th {
  width: 180px;
  white-space: nowrap;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #c4b5fd !important;
  border-right: 1px solid rgba(168, 85, 247, 0.18) !important;
  background: rgba(124, 58, 237, 0.06) !important;
}
body.single-product .woocommerce-product-attributes-item__value p,
body.single-product table.shop_attributes td p {
  margin: 0 !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}
body.single-product .woocommerce-product-attributes tr + tr th,
body.single-product .woocommerce-product-attributes tr + tr td,
body.single-product table.shop_attributes tr + tr th,
body.single-product table.shop_attributes tr + tr td {
  border-top: 1px solid rgba(168, 85, 247, 0.18) !important;
}

@media (max-width: 600px) {
  body.single-product .woocommerce-product-attributes-item__label,
  body.single-product table.shop_attributes th { width: 120px; }
  body.single-product .woocommerce-product-attributes-item__label,
  body.single-product .woocommerce-product-attributes-item__value,
  body.single-product table.shop_attributes th,
  body.single-product table.shop_attributes td { padding: 12px 14px !important; font-size: 13px !important; }
}

/* ── Variations (variable product) ──────────────────────────────────────── */
body.single-product .variations {
  margin: 0 0 24px !important;
}
body.single-product .variations td.label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  padding: 0 0 8px !important;
}
body.single-product .variations select {
  background: #1a1e38 !important;
  border: 1px solid #2a2f52 !important;
  border-radius: 10px !important;
  color: #e2e8f0 !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  width: 100% !important;
}
body.single-product .reset_variations {
  color: #94a3b8 !important;
  font-size: 12px !important;
  text-decoration: underline !important;
}

/* ── Related products — full-width 4-column grid ───────────────────────── */
body.single-product .related.products {
  margin-top: 24px !important;
  padding-top: 24px !important;
}
body.single-product .related.products > h2 {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #e2e8f0 !important;
  margin: 0 0 32px !important;
}
body.single-product .related.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* When the related list is inside Swiper, switch from CSS Grid to Swiper's
   flex layout — Swiper sets transforms on .swiper-wrapper and we must let it. */
body.single-product .bvc-related-swiper.swiper ul.swiper-wrapper.products {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  align-items: stretch;
}
body.single-product .bvc-related-swiper.swiper ul.swiper-wrapper.products li.product.swiper-slide,
body.single-product .related.products ul.swiper-wrapper li.product.swiper-slide {
  flex-shrink: 0;
  height: auto;
  /* width and margin-right are set inline by Swiper — DO NOT override either,
     otherwise the slide sizes to its image content and the carousel breaks. */
  max-width: none;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}
body.single-product .related.products ul.products li.product {
  /* width left unset — Swiper sets the per-slide width inline; non-Swiper
     grids rely on grid-template-columns for sizing */
  /* margin handled separately for swiper-slide vs non-swiper grid contexts */
  padding: 20px !important;
  background: #12152b !important;
  border: 1px solid #2a2f52 !important;
  border-radius: 14px !important;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.28s ease,
              box-shadow 0.28s ease;
  text-align: center !important;
}
body.single-product .related.products ul.products li.product::before,
body.single-product .related.products ul.products li.product::after { display: none !important; }
body.single-product .related.products ul.products li.product:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}
/* The image-link wrapper around the loop thumbnail is `display: inline` by
   default, which lets the larger source image overflow its slide. Force the
   wrapper + the image to be block-level and width-bounded by the slide. */
body.single-product .related.products ul.products li.product .woo-entry-image,
body.single-product .related.products ul.products li.product .woo-entry-image-swap,
body.single-product .related.products ul.products li.product a.woocommerce-LoopProduct-link {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* OceanWP renders the loop thumbnail TWICE on archive loops:
   1. Outer:  li.product > .product-inner > .woo-entry-image (from the
              loop_product_thumbnail hook on woocommerce_before_shop_loop_item_title)
   2. Inner:  li.product > .product-inner > .woo-entry-inner > .image-wrap >
              .woo-entry-image (from owp-archive-product.php on
              woocommerce_after_shop_loop_item)
   The inner one is the proper OceanWP card layout. Hide the outer duplicate. */
body.single-product .related.products ul.products li.product > .product-inner > .woo-entry-image,
body.single-product .related.products ul.products li.product > .product-inner > .woo-entry-image-swap {
  display: none !important;
}
body.single-product .related.products ul.products li.product img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  /* Force a consistent landscape framing close to a real credit-card ratio.
     object-fit:contain guarantees the WHOLE card design is visible — no
     side-cropping like WC's default square thumbnail does. */
  aspect-ratio: 16 / 10 !important;
  object-fit: contain !important;
  background: linear-gradient(135deg, #1a1e38 0%, #12152b 100%);
  border-radius: 10px !important;
  margin-bottom: 14px !important;
  display: block;
}
/* OceanWP renders the loop title as <h2><a>…</a></h2> with NO class on the
   inner <a>, so we must target both the heading and any <a> inside it. */
body.single-product .related.products ul.products li.product .woocommerce-loop-product__title,
body.single-product .related.products ul.products li.product h2,
body.single-product .related.products ul.products li.product h3,
body.single-product .related.products ul.products li.product h2 a,
body.single-product .related.products ul.products li.product h3 a,
body.single-product .related.products ul.products li.product a.woocommerce-LoopProduct-link,
body.single-product .related.products ul.products li.product a.woocommerce-LoopProduct-link h2,
body.single-product .related.products ul.products li.product a.woocommerce-LoopProduct-link h3,
body.single-product .related.products ul.products li.product .product-loop-title,
body.single-product .related.products ul.products li.product li.title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.01em;
  padding: 0 !important;
  text-decoration: none !important;
}
/* Category / "posted in" link above the title */
body.single-product .related.products ul.products li.product a[rel="tag"],
body.single-product .related.products ul.products li.product .product-cat,
body.single-product .related.products ul.products li.product .posted_in,
body.single-product .related.products ul.products li.product .posted_in a {
  color: #c4b5fd !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}
body.single-product .related.products ul.products li.product .price,
body.single-product .related.products ul.products li.product .price .woocommerce-Price-amount,
body.single-product .related.products ul.products li.product .price bdi,
body.single-product .related.products ul.products li.product .price ins .woocommerce-Price-amount {
  display: block !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #a855f7 !important;
  margin: 0 0 14px !important;
  font-variant-numeric: tabular-nums;
}
body.single-product .related.products ul.products li.product .price .woocommerce-Price-amount,
body.single-product .related.products ul.products li.product .price bdi {
  display: inline !important;
  margin: 0 !important;
}
body.single-product .related.products ul.products li.product .price ins {
  background: transparent !important;
  text-decoration: none !important;
}
body.single-product .related.products ul.products li.product .price del { font-size: 12px !important; opacity: 0.5; }
/* Two-button stack: Add to cart + Buy Now, centered vertically */
body.single-product .related.products ul.products li.product .bvc-loop-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}

body.single-product .related.products ul.products li.product .bvc-loop-add,
body.single-product .related.products ul.products li.product .bvc-loop-buy-now {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  min-width: 150px !important;
  padding: 10px 22px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease, filter 0.22s ease !important;
}

body.single-product .related.products ul.products li.product .bvc-loop-add {
  background: rgba(124, 58, 237, 0.10) !important;
  border: 1px solid rgba(124, 58, 237, 0.40) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
body.single-product .related.products ul.products li.product .bvc-loop-add:hover {
  background: rgba(124, 58, 237, 0.22) !important;
  border-color: rgba(124, 58, 237, 0.70) !important;
  transform: translateY(-1px) !important;
}

body.single-product .related.products ul.products li.product .bvc-loop-buy-now {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.30) !important;
}
body.single-product .related.products ul.products li.product .bvc-loop-buy-now:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.45) !important;
  filter: brightness(1.06);
}

/* Variable product "Select options" — outlined */
body.single-product .related.products ul.products li.product .bvc-loop-buy-now--select {
  background: rgba(124, 58, 237, 0.10) !important;
  border: 1px solid rgba(124, 58, 237, 0.40) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.single-product .related.products ul.products li.product a.added_to_cart {
  display: none !important;
}

/* Hide the "Sale!" badge inside related (visual noise on grid) */
body.single-product .related.products ul.products li.product .onsale {
  font-size: 9px !important;
  padding: 3px 8px !important;
  top: 14px !important;
  left: 14px !important;
}

/* Hide the SBW plugin's separate Buy Now anchor on related products
 * (we use our own bvc-loop-buy-now which adds-to-cart then redirects to checkout) */
body.single-product .related.products ul.products li.product a.buy_now_button,
body.single-product .related.products ul.products li.product a.sbw-buy-now-btn {
  display: none !important;
}

/* ── Reviews tab — clean form styling when empty ────────────────────────── */
body.single-product #reviews #review_form_wrapper {
  background: rgba(124, 58, 237, 0.04);
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
}
body.single-product #reviews textarea,
body.single-product #reviews input[type="text"],
body.single-product #reviews input[type="email"] {
  background: #1a1e38 !important;
  border: 1px solid #2a2f52 !important;
  color: #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 12px !important;
}
body.single-product #reviews .submit {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  color: #fff !important;
  font-weight: 700 !important;
  cursor: pointer;
}

/* Replace the yellow OceanWP notice bar with brand styling */
body.single-product .woocommerce-message,
body.single-product .woocommerce-info {
  background: rgba(124, 58, 237, 0.10) !important;
  border: 1px solid rgba(124, 58, 237, 0.30) !important;
  border-radius: 12px !important;
  color: #e2e8f0 !important;
  padding: 14px 18px !important;
}
body.single-product .woocommerce-message::before,
body.single-product .woocommerce-info::before {
  color: #a855f7 !important;
}

/* ── Hide Cart-related widgets we don't need (uses popup instead) ───────── */
body.single-product form.cart .quantity,
body.single-product form.cart > .single_add_to_cart_button,
body.single-product .single-product .cart > .button { display: none !important; }

/* Hide OceanWP's floating add-to-cart bar — competes with our Buy Now popup */
body.single-product .owp-floating-bar,
body.single-product .oceanwp-product-sticky-add-to-cart,
body.single-product #owp-sticky-cart { display: none !important; }

/* ── Selection colour ──────────────────────────────────────────────────── */
body.single-product ::selection {
  background: rgba(124, 58, 237, 0.55);
  color: #fff;
}

/* ── Focus rings ──────────────────────────────────────────────────────── */
body.single-product a:focus-visible,
body.single-product button:focus-visible {
  outline: 2px solid #a855f7;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
/* Tablet landscape: keep 2-col hero, drop related to 3 cols */
@media (max-width: 1100px) {
  body.single-product .related.products ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Tablet portrait: stack hero, related to 2 cols */
@media (max-width: 900px) {
  /* OceanWP runs with content-full-width — give the page a small horizontal
     gutter on mobile so nothing kisses the screen edge, but stay tight. */
  body.single-product #main,
  body.single-product #content-wrap,
  body.single-product .container,
  body.single-product .site-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  /* Use minmax(0, 1fr) so wide children can never expand the grid track beyond viewport */
  body.single-product .woocommerce div.product,
  body.single-product div.product {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
    row-gap: 32px !important;
  }
  /* Every direct child of the product grid must respect its track width */
  body.single-product div.product > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body.single-product .woocommerce-product-gallery {
    /* Keep position:relative so the absolutely-positioned lens trigger
       anchors to the gallery card on mobile (not to a far-up ancestor). */
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.single-product .woocommerce-product-gallery__wrapper {
    padding: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.single-product .summary,
  body.single-product .summary.entry-summary {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  body.single-product .product_title.entry-title { font-size: 28px !important; word-break: break-word; }
  body.single-product .summary > .price,
  body.single-product .summary p.price { font-size: 36px !important; margin-bottom: 18px !important; }

  /* Tabs panel — clamp width and fix overflow */
  body.single-product .woocommerce-tabs {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.single-product .woocommerce-Tabs-panel {
    padding: 28px 22px !important;
    border-radius: 16px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  body.single-product .woocommerce-Tabs-panel * {
    max-width: 100% !important;
  }
  body.single-product .woocommerce-Tabs-panel p,
  body.single-product .woocommerce-Tabs-panel li,
  body.single-product .woocommerce-Tabs-panel code,
  body.single-product .woocommerce-Tabs-panel pre {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }
  body.single-product .woocommerce-Tabs-panel pre,
  body.single-product .woocommerce-Tabs-panel code {
    overflow-x: auto;
    max-width: 100% !important;
    display: block;
    box-sizing: border-box;
  }
  body.single-product .woocommerce-product-details__short-description ul {
    grid-template-columns: 1fr !important;
  }

  /* Related — span full width, 2 cols, no overflow */
  body.single-product .related.products,
  body.single-product .related.products ul.products {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.single-product .related.products ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.single-product .related.products ul.products li.product {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Hide the prev/next product nav strip on mobile (it's wider than the screen) */
  body.single-product .owp-product-nav-wrap {
    display: none !important;
  }
}

/* Phone: single column everywhere, tighter padding */
@media (max-width: 600px) {
  body.single-product #main,
  body.single-product #content-wrap {
    padding-top: 20px !important;
    padding-bottom: 60px !important;
  }
  body.single-product .product_title.entry-title { font-size: 24px !important; }
  body.single-product .summary > .price,
  body.single-product .summary p.price { font-size: 32px !important; }
  body.single-product .woocommerce-tabs ul.tabs { flex-wrap: wrap; }
  body.single-product .woocommerce-tabs ul.tabs li a { padding: 11px 18px !important; font-size: 12px !important; }
  body.single-product .woocommerce-Tabs-panel { padding: 24px 20px !important; }
  body.single-product .woocommerce-tabs::before,
  body.single-product .woocommerce-tabs::after { display: none; } /* drop the glow blobs to save paint cost */
  /* Drop straight to a single column on phones — at this width the 2-col
     grid leaves cards too cramped for the price + Add to cart + Buy Now stack. */
  body.single-product .related.products ul.products {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  body.single-product .related.products ul.products li.product {
    padding: 18px !important;
  }
  /* Brighter, larger title + price so they stay readable at phone size */
  body.single-product .related.products ul.products li.product .woocommerce-loop-product__title,
  body.single-product .related.products ul.products li.product h2,
  body.single-product .related.products ul.products li.product h3,
  body.single-product .related.products ul.products li.product h2 a,
  body.single-product .related.products ul.products li.product h3 a,
  body.single-product .related.products ul.products li.product a.woocommerce-LoopProduct-link,
  body.single-product .related.products ul.products li.product a.woocommerce-LoopProduct-link h2,
  body.single-product .related.products ul.products li.product a.woocommerce-LoopProduct-link h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    line-height: 1.35 !important;
    margin: 4px 0 10px !important;
  }
  body.single-product .related.products ul.products li.product .price,
  body.single-product .related.products ul.products li.product .price .woocommerce-Price-amount,
  body.single-product .related.products ul.products li.product .price bdi,
  body.single-product .related.products ul.products li.product .price ins .woocommerce-Price-amount {
    font-size: 20px !important;
    color: #c4b5fd !important;
  }
  /* Side-by-side Add to cart + Buy Now — split the card width 50/50 */
  body.single-product .related.products ul.products li.product .bvc-loop-actions {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
  body.single-product .related.products ul.products li.product .bvc-loop-add,
  body.single-product .related.products ul.products li.product .bvc-loop-buy-now {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    padding: 11px 10px !important;
    font-size: 12.5px !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
  }
  body.single-product .related.products > h2 { font-size: 22px !important; }
  body.single-product #main,
  body.single-product #content-wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ── Conversion: rating strip ───────────────────────────────────────────── */
body.single-product .bvc-rating-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 50px 0 18px !important;
  padding: 0;
  font-size: 13px;
  color: #cbd5e1;
  width: 100%;
}
body.single-product .bvc-rating-strip > .bvc-rating-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body.single-product .bvc-rating-stars {
  display: inline-flex;
  gap: 2px;
  color: #fbbf24;
  flex-shrink: 0;
}
body.single-product .bvc-rating-stars svg { width: 16px; height: 16px; }
body.single-product .bvc-rating-num {
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
body.single-product .bvc-rating-sep { opacity: 0.4; flex-shrink: 0; }
body.single-product .bvc-rating-count {
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
body.single-product .bvc-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid rgba(110, 231, 183, 0.30);
  flex-shrink: 0;
  white-space: nowrap;
}
body.single-product .bvc-rating-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6ee7b7;
  box-shadow: 0 0 8px #6ee7b7;
}

/* ── Product meta (Category + Tags) — modern card ─────────────────────── */
body.single-product .summary .product_meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 22px 0 0 !important;
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(20, 22, 47, 0.85), rgba(15, 17, 38, 0.85));
  border: 1px solid #2a2f52;
  border-radius: 14px;
  font-size: 13px;
  color: #cbd5e1 !important;
}
body.single-product .summary .product_meta > span {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #ffffff !important;
  font-weight: 500;
}
/* Convert the leading "Category:" / "Tags:" text-node into an eyebrow label.
   We can't change the text node itself, so we restyle the whole span and
   inject a colored prefix via ::before by targeting class names. */
body.single-product .summary .product_meta > span {
  /* zero out the default WC text node and use ::before for our label */
  font-size: 0 !important;
}
body.single-product .summary .product_meta > span::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.32);
  color: #c4b5fd;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  flex-shrink: 0;
}
body.single-product .summary .product_meta > span.posted_in::before { content: 'Category'; }
body.single-product .summary .product_meta > span.tagged_as::before { content: 'Tags'; }
body.single-product .summary .product_meta > span a {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.22);
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
body.single-product .summary .product_meta > span a:hover {
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(168, 85, 247, 0.55);
  color: #ffffff !important;
}
/* Hide the bare ", " separators WC outputs between tag links */
body.single-product .summary .product_meta > span a + a { margin-left: 0; }

/* ── Conversion: trust strip below buy button ───────────────────────────── */
body.single-product .bvc-trust-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
}
body.single-product .bvc-trust-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 12px;
}
body.single-product .bvc-trust-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body.single-product .bvc-trust-text strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
body.single-product .bvc-trust-text span {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.3;
}
body.single-product .bvc-trust-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(124,58,237,0.20), rgba(168,85,247,0.20));
  border: 1px solid rgba(168, 85, 247, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c4b5fd;
}
body.single-product .bvc-trust-icon::before {
  content: '';
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
body.single-product .bvc-trust-icon--shield::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s-8-4.5-8-12V5l8-3 8 3v5c0 7.5-8 12-8 12z'/><path d='M9 12l2 2 4-4'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s-8-4.5-8-12V5l8-3 8 3v5c0 7.5-8 12-8 12z'/><path d='M9 12l2 2 4-4'/></svg>");
}
body.single-product .bvc-trust-icon--bolt::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M13 2L3 14h7l-1 8 11-14h-7l0-6z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M13 2L3 14h7l-1 8 11-14h-7l0-6z'/></svg>");
}
body.single-product .bvc-trust-icon--coin::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9 8h5a2 2 0 010 4H9m0 0h6a2 2 0 010 4H9m1.5 0V6m3 14V18'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9 8h5a2 2 0 010 4H9m0 0h6a2 2 0 010 4H9m1.5 0V6m3 14V18'/></svg>");
}
body.single-product .bvc-trust-icon--clock::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='12 7 12 12 16 14'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='12 7 12 12 16 14'/></svg>");
}

/* ── Conversion: How it works 3-step strip ───────────────────────────── */
body.single-product .bvc-how-it-works {
  margin: 64px 0 32px;
  padding: 44px 36px;
  background: linear-gradient(180deg, rgba(20, 22, 47, 0.85), rgba(15, 17, 38, 0.85));
  border: 1px solid #2a2f52;
  border-radius: 20px;
}
body.single-product .bvc-how-head { text-align: center; margin-bottom: 32px; }
body.single-product .bvc-how-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
body.single-product .bvc-how-head h2 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
}
body.single-product .bvc-how-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
body.single-product .bvc-how-step {
  position: relative;
  padding: 28px 24px;
  background: #12152b;
  border: 1px solid #2a2f52;
  border-radius: 16px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}
body.single-product .bvc-how-step:hover {
  transform: translateY(-3px);
  border-color: rgba(168, 85, 247, 0.45);
}
body.single-product .bvc-how-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.32);
}
body.single-product .bvc-how-step h3 {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
body.single-product .bvc-how-step p {
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.55;
  margin: 0;
}

/* ── Conversion: premium Related products header ──────────────────────── */
body.single-product .bvc-related-header {
  text-align: center;
  margin: 0 0 28px;
}
body.single-product .bvc-related-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
body.single-product .bvc-related-header h2 {
  font-size: 30px;
  font-weight: 800;
  color: #ffffff !important;
  letter-spacing: -0.02em;
  margin: 0 0 8px !important;
}
body.single-product .bvc-related-header p {
  font-size: 15px;
  color: #94a3b8;
  margin: 0 auto;
  max-width: 520px;
}
/* Hide the default empty <h2> the WC template still prints */
body.single-product .related.products > h2:empty { display: none !important; }

/* ── Conversion: Sticky mobile bottom CTA ─────────────────────────────── */
.bvc-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(13, 15, 31, 0.92);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-top: 1px solid rgba(124, 58, 237, 0.30);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.bvc-sticky-cta.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.bvc-sticky-price {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.bvc-sticky-label {
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 600;
}
.bvc-sticky-amount,
.bvc-sticky-amount .woocommerce-Price-amount,
.bvc-sticky-amount bdi {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.bvc-sticky-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.38);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.bvc-sticky-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* Sticky bar appears only at mobile widths */
@media (max-width: 768px) {
  .bvc-sticky-cta { display: flex; }
}

/* ── Mobile tweaks for the new conversion blocks ──────────────────────── */
@media (max-width: 600px) {
  body.single-product .bvc-trust-strip {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 14px;
  }
  body.single-product .bvc-trust-tile { padding: 12px 14px; }
  body.single-product .bvc-trust-icon { width: 32px; height: 32px; border-radius: 9px; }
  body.single-product .bvc-trust-icon::before { width: 16px; height: 16px; }
  body.single-product .bvc-rating-pill { margin-left: 0; }

  body.single-product .bvc-how-it-works {
    margin: 40px 0 24px;
    padding: 28px 20px;
    border-radius: 18px;
  }
  body.single-product .bvc-how-head h2 { font-size: 22px; }
  body.single-product .bvc-how-steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body.single-product .bvc-how-step { padding: 22px 20px; }

  body.single-product .bvc-related-header h2 { font-size: 22px !important; }
  body.single-product .bvc-related-header p { font-size: 13px; }
}

/* ── Related-products top bar: header on left, chevron arrows on right ── */
body.single-product .bvc-related-top-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 28px;
}
body.single-product .bvc-related-top-bar .bvc-related-header {
  text-align: left;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
body.single-product .bvc-related-top-bar .bvc-related-header h2,
body.single-product .bvc-related-top-bar .bvc-related-header p {
  text-align: left;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.single-product .bvc-related-nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
body.single-product .bvc-nav-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.32);
  color: #ffffff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, color 0.22s ease, opacity 0.22s ease;
}
body.single-product .bvc-nav-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}
body.single-product .bvc-nav-btn:hover {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-color: transparent;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.35);
}
body.single-product .bvc-nav-btn:active {
  transform: translateY(0);
}
body.single-product .bvc-nav-btn:focus-visible {
  outline: 2px solid #a855f7;
  outline-offset: 3px;
}
body.single-product .bvc-nav-btn--disabled,
body.single-product .bvc-nav-btn[disabled] {
  opacity: 0.30;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Related-products Swiper container ──────────────────────────────── */
body.single-product .bvc-related-swiper {
  position: relative;
  padding: 0 0 56px;
  margin: 0;
}
body.single-product .bvc-related-swiper .swiper-wrapper {
  padding: 4px;
}
/* Force Swiper layout to win at every breakpoint, including over the
   responsive grid rules above. */
body.single-product .bvc-related-swiper.swiper ul.swiper-wrapper.products,
body.single-product .bvc-related-section .bvc-related-swiper ul.swiper-wrapper.products {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

/* (Old in-swiper prev/next styles removed — chevrons live in the top bar
   now. The default Swiper .swiper-button-prev/next elements are no longer
   in the markup.) */

/* Pagination dots */
body.single-product .bvc-related-swiper .swiper-pagination {
  bottom: 14px;
}
body.single-product .bvc-related-swiper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.30);
  opacity: 1;
  margin: 0 4px !important;
  transition: width 0.22s ease, background 0.22s ease;
}
body.single-product .bvc-related-swiper .swiper-pagination-bullet-active {
  width: 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}

/* Mobile: stack header above the chevrons; chevrons stay on the right but
   move to a row of their own so the header has full width for its title. */
@media (max-width: 600px) {
  body.single-product .bvc-related-top-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 22px;
  }
  body.single-product .bvc-related-nav {
    align-self: flex-end;
  }
  body.single-product .bvc-nav-btn {
    width: 40px;
    height: 40px;
  }
  body.single-product .bvc-related-swiper {
    padding-bottom: 44px;
  }
}

/* ── Hero-row mobile collapse ─────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Mobile: the title needs to be at the top of the page (above the gallery
     and Card Features). Switch the hero from grid to flex column so we can
     reorder children — summary first (it contains the title + price + buy
     button), then the left column (gallery + features) below. */
  body.single-product .bvc-hero-row {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    /* Vertical spacing between summary and the gallery+features block */
    row-gap: 48px !important;
    column-gap: 0 !important;
  }
  body.single-product .bvc-hero-row > .summary { order: 1; }
  body.single-product .bvc-hero-row > .bvc-hero-left { order: 2; }
  /* Mobile gallery: not sticky, but stays position:relative so the lens
     icon (absolutely positioned) anchors to the gallery card. */
  body.single-product .bvc-hero-row .woocommerce-product-gallery,
  body.single-product .bvc-hero-row div.images {
    position: relative !important;
    top: auto !important;
  }
}

/* ── Product meta as a proper bordered table — no pills, real grid ────── */
body.single-product .summary table.bvc-meta-table {
  display: table !important;
  width: 100% !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: linear-gradient(180deg, rgba(20, 22, 47, 0.7), rgba(15, 17, 38, 0.7));
  border: 1px solid rgba(168, 85, 247, 0.28);
  border-radius: 14px;
  overflow: hidden;
  font-size: 13px;
  color: #cbd5e1 !important;
  table-layout: fixed;
}
body.single-product .summary table.bvc-meta-table tbody { display: table-row-group !important; }
body.single-product .summary table.bvc-meta-table tr { display: table-row !important; }

body.single-product .summary table.bvc-meta-table th,
body.single-product .summary table.bvc-meta-table td {
  display: table-cell !important;
  padding: 14px 18px !important;
  vertical-align: middle !important;
  background: transparent !important;
  border: none !important;
  text-align: left !important;
}
/* Vertical divider between the label column and the value column */
body.single-product .summary table.bvc-meta-table th {
  width: 130px;
  white-space: nowrap;
  border-right: 1px solid rgba(168, 85, 247, 0.18) !important;
  background: rgba(124, 58, 237, 0.06) !important;
  font-weight: 700 !important;
}
/* Horizontal divider between rows */
body.single-product .summary table.bvc-meta-table tr + tr th,
body.single-product .summary table.bvc-meta-table tr + tr td {
  border-top: 1px solid rgba(168, 85, 247, 0.18) !important;
}
/* Plain typography on the label — no pill, just brand-tinted uppercase */
body.single-product .summary table.bvc-meta-table .bvc-meta-label {
  display: inline-block;
  padding: 0;
  background: transparent;
  border: none;
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Tag/category values: clean inline links, comma-separated naturally,
   underline on hover — feels like a table, not a pill row. */
body.single-product .summary table.bvc-meta-table td {
  font-weight: 500 !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  letter-spacing: 0.005em;
  line-height: 1.7 !important;
}
body.single-product .summary table.bvc-meta-table td a {
  color: #ffffff !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
body.single-product .summary table.bvc-meta-table td a:hover {
  color: #c4b5fd !important;
  border-bottom-color: #c4b5fd;
}
/* Mono chip for SKU: tighter, monospace, brand-tinted background */
body.single-product .summary table.bvc-meta-table .bvc-meta-chip--mono {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(15, 17, 38, 0.7);
  border: 1px solid rgba(168, 85, 247, 0.22);
  font-family: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #c4b5fd !important;
}
/* Hide the now-redundant default .product_meta DIV-style rules — the table
   IS the .product_meta now, and the old div selectors don't match a TABLE. */
body.single-product .summary div.product_meta { display: none !important; }

@media (max-width: 600px) {
  body.single-product .summary table.bvc-meta-table th { width: 100px; }
  body.single-product .summary table.bvc-meta-table th,
  body.single-product .summary table.bvc-meta-table td { padding: 12px 14px !important; }
  body.single-product .summary table.bvc-meta-table td { font-size: 12.5px !important; }
}

/* (Chevron icons are now real inline SVG inside .bvc-nav-btn — see
   templates/woocommerce/single-product/related.php — so the older
   .swiper-button-prev/next CSS-mask rules are no longer needed.) */

/* ── Side-by-side Add to cart + Buy Now on related cards (all viewports) */
body.single-product .related.products ul.products li.product .bvc-loop-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 14px 0 0 !important;
}
body.single-product .related.products ul.products li.product .bvc-loop-add,
body.single-product .related.products ul.products li.product .bvc-loop-buy-now {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 11px 12px !important;
  font-size: 12.5px !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* ── Quick View hover overlay on related cards ────────────────────────── */
/* OceanWP defaults stretch this to fill the card — clamp it down to a real
   pill button of intrinsic size, centred on the card image. */
body.single-product .related.products li.product .owp-quick-view {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  transform: translate(-50%, -50%) scale(0.96);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px !important;
  padding: 10px 18px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 14px 32px rgba(124, 58, 237, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 3;
  box-sizing: border-box !important;
}
body.single-product .related.products li.product .owp-quick-view i {
  font-size: 14px !important;
  line-height: 1;
}
body.single-product .related.products li.product:hover .owp-quick-view {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
body.single-product .related.products li.product .owp-quick-view:hover {
  filter: brightness(1.06);
  box-shadow: 0 18px 38px rgba(124, 58, 237, 0.55);
}
/* Subtle dark-mask over the card image when Quick View is visible */
body.single-product .related.products li.product .woo-entry-image {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
body.single-product .related.products li.product .woo-entry-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,15,31,0) 0%, rgba(13,15,31,0.55) 100%);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
  z-index: 2;
}
body.single-product .related.products li.product:hover .woo-entry-image::after { opacity: 1; }

/* ── OceanWP Quick View modal — brand-aligned dark redesign ───────────── */
/* Closed state: hidden. OceanWP toggles `.is-visible` on this wrapper when
   the modal opens — only THEN do we render it as a centred flex container. */
#owp-qv-wrap {
  display: none !important;
}
#owp-qv-wrap.is-visible {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(7, 9, 22, 0.78) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  z-index: 99990 !important;
  overflow-y: auto !important;
}
#owp-qv-wrap .owp-qv-overlay {
  display: none !important;
}
#owp-qv-wrap .owp-qv-container {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  max-width: 980px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  max-height: calc(100vh - 48px);
}
#owp-qv-wrap .owp-qv-content-wrap {
  background: linear-gradient(180deg, #14162f 0%, #0f1126 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.28) !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(124, 58, 237, 0.15) !important;
  padding: 40px !important;
  overflow: hidden;
  position: relative;
}
#owp-qv-wrap .owp-qv-content-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 0%, rgba(124, 58, 237, 0.16) 0%, transparent 65%);
  pointer-events: none;
}
#owp-qv-wrap .owp-qv-content-inner {
  position: relative;
  z-index: 1;
  background: transparent !important;
  padding: 0 !important;
  max-height: min(80vh, 720px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(168,85,247,0.5) transparent;
}
#owp-qv-wrap .owp-qv-content-inner::-webkit-scrollbar { width: 6px; }
#owp-qv-wrap .owp-qv-content-inner::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.5);
  border-radius: 999px;
}

/* Close button — circular, brand-tinted */
#owp-qv-wrap .owp-qv-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  background: rgba(124, 58, 237, 0.14) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  color: #ffffff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
  z-index: 2;
}
#owp-qv-wrap .owp-qv-close:hover {
  background: rgba(124, 58, 237, 0.32) !important;
  border-color: #a855f7 !important;
  transform: rotate(90deg);
}

/* Inner content layout */
#owp-qv-wrap #owp-qv-content { color: #e2e8f0 !important; }
#owp-qv-wrap #owp-qv-content .product {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 36px !important;
  align-items: start;
}
#owp-qv-wrap #owp-qv-content .owp-qv-image {
  width: 100% !important;
  margin: 0 !important;
  background: linear-gradient(135deg, #1a1e38 0%, #12152b 100%);
  border: 1px solid #2a2f52;
  border-radius: 16px;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
#owp-qv-wrap #owp-qv-content .owp-qv-image::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(60% 40% at 50% 0%, rgba(124, 58, 237, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
#owp-qv-wrap #owp-qv-content .owp-qv-image img {
  width: 100% !important;
  height: auto !important;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  position: relative;
  z-index: 1;
}
#owp-qv-wrap #owp-qv-content .summary,
#owp-qv-wrap #owp-qv-content .summary.entry-summary {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}
#owp-qv-wrap #owp-qv-content .product_title {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  margin: 0 0 14px !important;
}
#owp-qv-wrap #owp-qv-content .price,
#owp-qv-wrap #owp-qv-content .price .woocommerce-Price-amount,
#owp-qv-wrap #owp-qv-content .price bdi {
  color: #c4b5fd !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  margin: 0 0 16px !important;
}
#owp-qv-wrap #owp-qv-content .woocommerce-product-details__short-description,
#owp-qv-wrap #owp-qv-content .woocommerce-product-details__short-description p {
  color: #cbd5e1 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin: 0 0 18px !important;
}
#owp-qv-wrap #owp-qv-content button.button,
#owp-qv-wrap #owp-qv-content .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  padding: 14px 24px !important;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.40);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
#owp-qv-wrap #owp-qv-content button.button:hover,
#owp-qv-wrap #owp-qv-content .single_add_to_cart_button:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 16px 36px rgba(124, 58, 237, 0.50);
}
#owp-qv-wrap #owp-qv-content .quantity { margin: 0 0 14px !important; }
#owp-qv-wrap #owp-qv-content .quantity .qty {
  width: 96px !important;
  padding: 11px 12px !important;
  background: #0f1126 !important;
  border: 1px solid rgba(168, 85, 247, 0.28) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-align: center;
}
/* Quick view — view full product link */
#owp-qv-wrap #owp-qv-content .product_meta,
#owp-qv-wrap #owp-qv-content table.bvc-meta-table { display: none !important; }
#owp-qv-wrap #owp-qv-content a {
  color: #c4b5fd !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
#owp-qv-wrap #owp-qv-content a:hover {
  color: #ffffff !important;
  border-bottom-color: #a855f7;
}

/* Mobile: single-column modal */
@media (max-width: 768px) {
  #owp-qv-wrap .owp-qv-content-wrap { padding: 24px !important; border-radius: 16px !important; }
  #owp-qv-wrap #owp-qv-content .product {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  #owp-qv-wrap #owp-qv-content .owp-qv-image { padding: 18px; }
  #owp-qv-wrap #owp-qv-content .product_title { font-size: 22px !important; }
  #owp-qv-wrap #owp-qv-content .price { font-size: 24px !important; }
}

/* ============================================================================
   BRAND REFRESH (May 2026)
   New gradient: #3562F4 → #C339DA (blue → magenta), border-radius 10px on
   Buy Now / Pay / CTA buttons. Overrides earlier purple-only gradients.
   ============================================================================ */

/* Main "Buy Now — Instant Delivery" button on the product page */
body.single-product .buyvcc-buy-btn {
  background: linear-gradient(to right, #3562F4 0%, #C339DA 100%) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 32px rgba(53, 98, 244, 0.30),
              0 6px 14px rgba(195, 57, 218, 0.22) !important;
}
body.single-product .buyvcc-buy-btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 18px 40px rgba(53, 98, 244, 0.40),
              0 8px 18px rgba(195, 57, 218, 0.28) !important;
}

/* Buy Now on related-product cards (in the swiper carousel) */
body.single-product .related.products ul.products li.product .bvc-loop-buy-now {
  background: linear-gradient(to right, #3562F4 0%, #C339DA 100%) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 16px rgba(53, 98, 244, 0.28) !important;
}
body.single-product .related.products ul.products li.product .bvc-loop-buy-now:hover {
  box-shadow: 0 10px 22px rgba(53, 98, 244, 0.38),
              0 5px 12px rgba(195, 57, 218, 0.25) !important;
  filter: brightness(1.06);
}

/* Sticky mobile bottom-bar Buy Now */
.bvc-sticky-btn {
  background: linear-gradient(to right, #3562F4 0%, #C339DA 100%) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 24px rgba(53, 98, 244, 0.35),
              0 4px 10px rgba(195, 57, 218, 0.25) !important;
}

/* "Get Card Now" header CTA (chrome) */
.bvc-header .bvc-cta,
.bvc-header a.bvc-cta {
  background: linear-gradient(to right, #3562F4 0%, #C339DA 100%) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 18px rgba(53, 98, 244, 0.30) !important;
}

/* ────────────────────────────────────────────────────────────────────────
   Card Features box — markup the client added to the product description.
   See vcc-features-box / vcc-feature / vcc-left / vcc-right / vcc-note.
   ──────────────────────────────────────────────────────────────────────── */
body.single-product .woocommerce-Tabs-panel .vcc-features-box,
body.single-product .vcc-features-box {
  margin: 24px 0;
  padding: 32px 36px;
  background: linear-gradient(180deg, rgba(20, 22, 47, 0.85), rgba(15, 17, 38, 0.85));
  border: 1px solid rgba(168, 85, 247, 0.28);
  border-radius: 18px;
  color: #e2e8f0;
}
body.single-product .vcc-features-box .vcc-feature-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 22px;
}
body.single-product .vcc-features-box .vcc-feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid rgba(168, 85, 247, 0.16);
}
body.single-product .vcc-features-box .vcc-feature:first-of-type {
  border-top: none;
}
body.single-product .vcc-features-box .vcc-left {
  font-size: 15px;
  color: #94a3b8;
  font-weight: 500;
}
body.single-product .vcc-features-box .vcc-right {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(to right, #3562F4 0%, #C339DA 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  white-space: nowrap;
}
body.single-product .vcc-features-box .vcc-note {
  margin: 18px 0 0;
  padding: 18px 22px;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 12px;
  font-size: 14px;
  color: #cbd5e1;
  line-height: 1.6;
}
body.single-product .vcc-features-box .vcc-note img.emoji,
body.single-product .vcc-features-box .vcc-note img {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  margin-right: 4px;
  display: inline-block;
}
body.single-product .vcc-features-box .vcc-note a {
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  transition: border-color 0.2s ease;
}
body.single-product .vcc-features-box .vcc-note a:hover {
  border-bottom-color: #ffffff;
}

/* Mobile tweak — keep label/value on one line, smaller type */
@media (max-width: 600px) {
  body.single-product .vcc-features-box {
    padding: 24px 22px;
    border-radius: 14px;
  }
  body.single-product .vcc-features-box .vcc-feature-title { font-size: 19px; margin-bottom: 14px; }
  body.single-product .vcc-features-box .vcc-feature {
    padding: 14px 0;
    gap: 12px;
  }
  body.single-product .vcc-features-box .vcc-left { font-size: 13.5px; }
  body.single-product .vcc-features-box .vcc-right { font-size: 14.5px; }
  body.single-product .vcc-features-box .vcc-note { padding: 14px 16px; font-size: 13px; }
}