/* =======================================================================
   STELLAR FlyPods — Product Page
   Scoped to body.single-product / body.woocommerce-shop
   ======================================================================= */

/* ── THEME TOKENS ─────────────────────────────────────────────────────── */
:root {
  --sf-bg: #f4f3f0;
  --sf-fg: #1a1a1a;
  --sf-o: 0,0,0;
  --sf-mobile-bg: #f4f3f0;
  /* Official STELLAR burgundy. Added 2026-08-18 with the /shop/ answer block —
     the theme had no accent token, only bg/fg/burger. */
  --sf-accent: #a0153a;
  --sf-input-bg: #f9f9f9;
}
[data-theme='dark'] {
  --sf-bg: #0d0d0d;
  --sf-fg: #e8e8e8;
  --sf-o: 255,255,255;
  --sf-mobile-bg: #0d0d0d;
  /* Burgundy #a0153a fails contrast on the #0d0d0d ground; lifted for dark. */
  --sf-accent: #ef7093;
  --sf-input-bg: #1a1a1a;
}

/* ── FONT SYSTEM ─────────────────────────────────────────────────────── */
body.woocommerce-shop,
body.woocommerce-shop * {
  font-family: 'Inter Tight', sans-serif !important;
}
/* Cream page background to match the email/marketing tone (day). */
body.woocommerce-shop, body.single-product { background: #f4f3f0 !important; }
body.woocommerce-shop h1,
body.woocommerce-shop h2,
body.woocommerce-shop h3,
body.woocommerce-shop h4,
body.woocommerce-shop .product_title,
body.woocommerce-shop .sf-price-amount,
body.woocommerce-shop .woocommerce-loop-product__title {
  font-family: 'Archivo Black', sans-serif !important;
}
body.woocommerce-shop .sf-vibe-heading em,
body.woocommerce-shop em,
body.woocommerce-shop .sf-price-sub {
  font-family: 'Instrument Serif', serif !important;
  font-style: italic !important;
}

/* 0. Reset Storefront defaults */
.woocommerce div.product div.summary {
  clear: none !important;
  width: auto !important;
  float: none !important;
}
.single-product .single_add_to_cart_button {
  max-width: 100% !important;
  border-radius: 9999px !important;
}

/* 1. Page background */
body.single-product,
body.woocommerce-shop,
body.single-product #page,
body.woocommerce-shop #page,
body.single-product .site-content,
body.woocommerce-shop .site-content,
body.single-product #content,
body.woocommerce-shop #content,
body.single-product .hentry,
body.woocommerce-shop .hentry {
  background: var(--sf-bg) !important;
  color: var(--sf-fg) !important;
}
body.single-product .site-main,
body.woocommerce-shop .site-main,
body.single-product .site-content .col-full,
body.woocommerce-shop .site-content .col-full {
  background: var(--sf-bg) !important;
  padding-bottom: 80px !important;
}

/* 1b. Force theme on all woocommerce containers */
body.woocommerce-shop .woocommerce,
body.woocommerce-shop .woocommerce-page,
body.woocommerce-shop #primary,
body.woocommerce-shop main,
body.woocommerce-shop .site-main > *,
body.woocommerce-shop .woocommerce > *,
body.woocommerce-shop div.product,
body.woocommerce-shop .entry-summary {
  background: var(--sf-bg) !important;
  color: var(--sf-fg) !important;
}

/* 2. Product grid layout */
body.single-product .woocommerce div.product,
body.woocommerce-shop .woocommerce div.product {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas:
    "gallery summary"
    "tabs tabs" !important;
  column-gap: 72px !important;
  row-gap: 0 !important;
  align-items: start !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 60px 48px 0 !important;
  background: transparent !important;
  float: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 3. Tabs */
body.single-product .woocommerce div.product .woocommerce-tabs {
  grid-area: tabs !important;
  border-top: 1px solid rgba(var(--sf-o),0.06) !important;
  margin-top: 80px !important;
  padding-top: 56px !important;
  clear: none !important;
  width: 100% !important;
  color: var(--sf-fg) !important;
}
body.single-product .woocommerce div.product .woocommerce-tabs .panel {
  display: block !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: rgba(var(--sf-o),0.7) !important;
}
body.single-product .woocommerce div.product .woocommerce-tabs ul.tabs {
  display: none !important;
}
body.single-product .woocommerce div.product .woocommerce-tabs .panel h2:first-child {
  display: none !important;
}

/* 4. Custom gallery (shop page) */
body.woocommerce-shop .sf-gallery {
  grid-area: gallery !important;
  position: sticky !important;
  top: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  background: #f4f3f0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}
body.woocommerce-shop .sf-gallery-main {
  background: #f4f3f0 !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
body.woocommerce-shop .sf-gallery-mainimg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 36px !important;
  box-sizing: border-box !important;
  display: block !important;
}
body.woocommerce-shop .sf-gallery-main {
  position: relative !important;
}
body.woocommerce-shop .sf-gallery-mainimg {
  cursor: zoom-in !important;
}
body.woocommerce-shop .sf-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(255,255,255,0.85) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  font-size: 24px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #1a1a1a !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease, background 0.15s ease !important;
  z-index: 10 !important;
  padding: 0 !important;
}
body.woocommerce-shop .sf-gallery-main:hover .sf-arrow {
  opacity: 1 !important;
}
@media (hover: none) {
  body.woocommerce-shop .sf-arrow {
    opacity: 0.75 !important;
  }
  body.woocommerce-shop .sf-arrow:active {
    opacity: 1 !important;
    background: rgba(255,255,255,1) !important;
  }
}
body.woocommerce-shop .sf-arrow:hover {
  background: rgba(255,255,255,1) !important;
}
body.woocommerce-shop .sf-arrow-prev {
  left: 12px !important;
}
body.woocommerce-shop .sf-arrow-next {
  right: 12px !important;
}

/* Thumbnail nav wrapper */
body.woocommerce-shop .sf-thumb-nav {
  display: flex !important;
  align-items: stretch !important;
  background: #f4f3f0 !important;
  border-top: 1px solid rgba(0,0,0,0.07) !important;
}
body.woocommerce-shop .sf-thumb-arrow {
  flex-shrink: 0 !important;
  width: 32px !important;
  background: #f4f3f0 !important;
  border: none !important;
  cursor: pointer !important;
  color: rgba(0,0,0,0.6) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s, color 0.15s !important;
  padding: 0 !important;
}
body.woocommerce-shop .sf-thumb-arrow:hover {
  background: rgba(0,0,0,0.05) !important;
  color: rgba(0,0,0,0.7) !important;
}
body.woocommerce-shop .sf-thumb-arrow-prev {
  border-right: 1px solid rgba(0,0,0,0.06) !important;
}
body.woocommerce-shop .sf-thumb-arrow-next {
  border-left: 1px solid rgba(0,0,0,0.06) !important;
}

body.woocommerce-shop .sf-gallery-thumbs {
  display: flex !important;
  flex-direction: row !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 0 !important;
  background: #f4f3f0 !important;
  border-top: none !important;
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
}
body.woocommerce-shop .sf-gallery-thumbs::-webkit-scrollbar {
  display: none !important;
}
body.woocommerce-shop .sf-gallery-thumbs.is-dragging {
  cursor: grabbing !important;
  scroll-behavior: auto !important;
}
body.woocommerce-shop .sf-thumb {
  background: #f4f3f0 !important;
  border: none !important;
  border-right: 1px solid rgba(0,0,0,0.06) !important;
  border-bottom: 2px solid transparent !important;
  padding: 4px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  flex: 0 0 80px !important;
  width: 80px !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color 0.18s ease !important;
}
body.woocommerce-shop .sf-thumb:last-child {
  border-right: none !important;
}
body.woocommerce-shop .sf-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 0.45 !important;
  transition: opacity 0.18s ease !important;
  display: block !important;
}
body.woocommerce-shop .sf-thumb:hover img,
body.woocommerce-shop .sf-thumb-active img {
  opacity: 1 !important;
}
body.woocommerce-shop .sf-thumb-active {
  border-bottom-color: #a0153a !important;
}

/* 4b. Gallery (Left Column) — single product page */
body.single-product .woocommerce div.product div.images,
body.woocommerce-shop .woocommerce div.product div.images {
  grid-area: gallery !important;
  float: none !important;
  width: auto !important;
  position: sticky !important;
  top: 24px !important;
  margin: 0 !important;
}
body.single-product .woocommerce-product-gallery,
body.woocommerce-shop .woocommerce-product-gallery {
  background: #f4f3f0 !important;
  border-radius: 24px !important;
  margin: 0 !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transition: none !important;
  display: flex !important;
  flex-direction: column !important;
}
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  margin: 0 !important;
  background: #f4f3f0 !important;
}
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
  background: #f4f3f0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  display: block !important;
  padding: 36px !important;
  box-sizing: border-box !important;
  background: #f4f3f0 !important;
}

/* 5. Thumbnails */
body.single-product .flex-control-nav.flex-control-thumbs {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: #f4f3f0 !important;
  border-top: 1px solid rgba(0,0,0,0.07) !important;
  overflow: hidden !important;
  border-radius: 0 0 24px 24px !important;
}
body.single-product .flex-control-thumbs li {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border-right: 1px solid rgba(0,0,0,0.06) !important;
  box-sizing: border-box !important;
}
body.single-product .flex-control-thumbs li:last-child {
  border-right: none !important;
}
body.single-product .flex-control-thumbs li img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  display: block !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  background: #f4f3f0 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  opacity: 0.45 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: opacity 0.18s ease, border-color 0.18s ease !important;
}
body.single-product .flex-control-thumbs li img:hover {
  opacity: 0.8 !important;
  border-bottom-color: rgba(160,21,58,0.45) !important;
}
body.single-product .flex-control-thumbs li img.flex-active {
  opacity: 1 !important;
  border-bottom-color: #a0153a !important;
}

/* 6. Summary (Right Column) */
body.single-product .woocommerce div.product div.summary {
  grid-area: summary !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 4px 0 0 !important;
  background: transparent !important;
  width: auto !important;
  float: none !important;
  clear: none !important;
}

/* Hide Woo defaults */
body.single-product .woocommerce-product-rating,
body.single-product .product_meta,
body.single-product .stock {
  display: none !important;
}
body.single-product .woocommerce div.product p.price,
body.single-product .woocommerce div.product span.price {
  display: none !important;
}

/* Eyebrow label */
body.single-product .woocommerce div.product div.summary::before {
  content: "STELLAR \00B7 TWS EARBUDS WITH HYBRID ANC" !important;
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  color: #a0153a !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
  order: 0 !important;
}

/* Product H1 */
body.single-product .sf-product-title {
  font-size: clamp(22px, 3vw, 30px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 12px !important;
  line-height: 1.15 !important;
  color: var(--sf-fg, #1a1a1a) !important;
}

/* Price row */
body.single-product .sf-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  margin: 0 0 8px !important;
  order: 2 !important;
}
body.single-product .sf-price-amount {
  font-size: 48px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  color: var(--sf-fg) !important;
  line-height: 1 !important;
}
body.single-product .sf-price-sub {
  font-size: 12px !important;
  color: rgba(var(--sf-o),0.6) !important;
  letter-spacing: 0.04em !important;
}

/* 7. Product title */
body.single-product .product_title.entry-title {
  order: 1 !important;
  font-size: clamp(30px, 3.2vw, 50px) !important;
  font-weight: 900 !important;
  line-height: 1.0 !important;
  letter-spacing: -0.03em !important;
  text-transform: none !important;
  color: var(--sf-fg) !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
  border: none !important;
}

/* 9. Add to Cart */
body.single-product form.cart,
body.woocommerce-shop form.cart {
  order: 3 !important;
  margin: 0 0 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: transparent !important;
}
body.single-product form.cart .quantity,
body.woocommerce-shop form.cart .quantity {
  display: none !important;
}

body.single-product .single_add_to_cart_button,
body.woocommerce-shop .single_add_to_cart_button,
body.woocommerce-shop .woocommerce div.product form.cart .single_add_to_cart_button {
  width: 100% !important;
  max-width: 100% !important;
  background: #a0153a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 20px 40px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  text-align: center !important;
  display: block !important;
  box-shadow: 0 4px 24px rgba(160,21,58,0.38) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease !important;
}
body.single-product .single_add_to_cart_button.button:hover,
body.woocommerce-shop .woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: #7a0f2c !important;
  box-shadow: 0 6px 32px rgba(160,21,58,0.55) !important;
  transform: translateY(-1px) !important;
}
body.single-product .single_add_to_cart_button.button:active,
body.woocommerce-shop .woocommerce div.product form.cart .single_add_to_cart_button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 10px rgba(160,21,58,0.3) !important;
}

/* Catch-all: any remaining inputs/selects inside the product summary */
body.woocommerce-shop .entry-summary input,
body.woocommerce-shop .entry-summary select,
body.woocommerce-shop .entry-summary textarea,
body.woocommerce-shop .entry-summary .input-text {
  background: var(--sf-input-bg) !important;
  color: var(--sf-fg) !important;
  border-color: rgba(var(--sf-o),0.15) !important;
}

/* Hide wishlist / compare on shop page */
body.woocommerce-shop .yith-wcwl-add-to-wishlist,
body.woocommerce-shop .yith-wcwl-add-button,
body.woocommerce-shop .compare-button,
body.woocommerce-shop a.compare,
body.woocommerce-shop button.compare {
  display: none !important;
}

/* 10. Short description */
body.single-product .woocommerce-product-details__short-description {
  order: 4 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.single-product .woocommerce-product-details__short-description > p:first-child {
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: rgba(var(--sf-o),0.6) !important;
  margin: 0 0 22px !important;
  font-weight: 400 !important;
}

/* 11. Spec chips */
body.single-product .sf-spec-chips {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 0 0 20px !important;
}
body.single-product .sf-chip {
  background: rgba(var(--sf-o),0.04) !important;
  border: 1px solid rgba(var(--sf-o),0.09) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
body.single-product .sf-chip-val {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--sf-fg) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}
body.single-product .sf-chip-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: rgba(var(--sf-o),0.6) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* 12. App badge */
body.single-product .sf-app-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(var(--sf-o),0.05) !important;
  border: 1px solid rgba(var(--sf-o),0.1) !important;
  border-radius: 9999px !important;
  padding: 10px 18px !important;
  font-size: 12px !important;
  color: rgba(var(--sf-o),0.65) !important;
  margin: 0 0 18px !important;
}
body.single-product .sf-app-badge strong {
  color: var(--sf-fg) !important;
  font-weight: 700 !important;
}
body.single-product .sf-free-tag {
  background: #a0153a !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
}

/* 13. Meta row */
body.single-product .sf-meta-row {
  background: rgba(var(--sf-o),0.035) !important;
  border: 1px solid rgba(var(--sf-o),0.07) !important;
  border-radius: 14px !important;
  padding: 15px 20px !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  color: rgba(var(--sf-o),0.6) !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
  line-height: 2.4 !important;
  display: block !important;
}

/* 14. Secure checkout row */
body.single-product .sf-checkout-row {
  font-size: 10px !important;
  color: rgba(var(--sf-o),0.6) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  line-height: 1.9 !important;
  font-weight: 400 !important;
  display: block !important;
}

/* 15. Vibe section */
body.single-product .sf-vibe {
  background: var(--sf-bg) !important;
  padding: 100px 0 !important;
  margin: 0 !important;
}
body.single-product .sf-vibe-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 48px !important;
  display: flex !important;
  align-items: center !important;
  gap: 80px !important;
}
body.single-product .sf-vibe-copy {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
body.single-product .sf-vibe-heading {
  font-size: clamp(36px, 4vw, 56px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: var(--sf-fg) !important;
  margin: 0 0 24px !important;
}
body.single-product .sf-vibe-heading em {
  font-style: italic !important;
  color: rgba(var(--sf-o),0.6) !important;
}
body.single-product .sf-vibe-body {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: rgba(var(--sf-o),0.6) !important;
  margin: 0 0 40px !important;
  max-width: 480px !important;
}
body.single-product .sf-vibe-rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
body.single-product .sf-vibe-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}
body.single-product .sf-vibe-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #a0153a !important;
  flex-shrink: 0 !important;
  margin-top: 7px !important;
}
body.single-product .sf-vibe-row-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--sf-fg) !important;
  margin: 0 0 4px !important;
}
body.single-product .sf-vibe-row-body {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: rgba(var(--sf-o),0.6) !important;
  margin: 0 !important;
}
body.single-product .sf-vibe-phone {
  flex: 0 0 300px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.single-product .sf-vibe-phone img {
  width: 100% !important;
  max-width: 300px !important;
  height: auto !important;
  border-radius: 32px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6) !important;
  display: block !important;
}

/* 16. Hide noise */
body.single-product .yith-wcwl-add-to-wishlist,
body.single-product .yith-wcwl-add-button,
body.single-product .compare-button,
body.single-product a.compare,
body.single-product button.compare {
  display: none !important;
}

/* 17. Mobile */
@media (max-width: 860px) {

  body.single-product .woocommerce div.product {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "gallery"
      "summary"
      "tabs" !important;
    padding: 40px 24px 0 !important;
    column-gap: 0 !important;
    row-gap: 48px !important;
  }

  body.single-product .woocommerce div.product div.images {
    position: relative !important;
    top: 0 !important;
    margin-bottom: 32px !important;
  }

  body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
    padding: 24px !important;
  }

  body.single-product .flex-control-nav.flex-control-thumbs {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  body.single-product .woocommerce div.product div.summary {
    padding-top: 0 !important;
  }

  body.single-product .product_title.entry-title {
    font-size: clamp(26px, 6vw, 38px) !important;
    margin-bottom: 24px !important;
  }

  body.single-product .sf-spec-chips {
    grid-template-columns: 1fr !important;
  }

  body.single-product .sf-vibe-inner {
    flex-direction: column-reverse !important;
    gap: 48px !important;
    padding: 0 24px !important;
  }
  body.single-product .sf-vibe {
    padding: 72px 0 !important;
  }
  body.single-product .sf-vibe-phone {
    flex: 0 0 auto !important;
    width: 220px !important;
  }
  body.single-product .sf-vibe-body {
    max-width: 100% !important;
  }

}

/* ── Gallery styles for single product page (mirrors woocommerce-shop gallery) ── */
body.single-product .sf-gallery { grid-area: gallery !important; position: sticky !important; top: 24px !important; display: flex !important; flex-direction: column !important; background: #f4f3f0 !important; border-radius: 20px !important; overflow: hidden !important; }
body.single-product .sf-gallery-main { position: relative !important; width: 100% !important; aspect-ratio: 1 / 1 !important; background: #f4f3f0 !important; overflow: hidden !important; cursor: zoom-in !important; }
body.single-product .sf-gallery-mainimg { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; padding: 8% !important; box-sizing: border-box !important; transition: transform .3s ease !important; }
body.single-product .sf-arrow { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; background: rgba(255,255,255,0.85) !important; border: none !important; border-radius: 50% !important; width: 36px !important; height: 36px !important; font-size: 22px !important; line-height: 1 !important; cursor: pointer !important; opacity: 0 !important; transition: opacity .2s !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #1a1a1a !important; }
body.single-product .sf-gallery-main:hover .sf-arrow { opacity: 1 !important; }
body.single-product .sf-arrow-prev { left: 10px !important; }
body.single-product .sf-arrow-next { right: 10px !important; }
body.single-product .sf-thumb-nav { display: flex !important; align-items: center !important; gap: 6px !important; padding: 10px 10px 12px !important; background: #f4f3f0 !important; }
body.single-product .sf-thumb-arrow { background: none !important; border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 50% !important; width: 28px !important; height: 28px !important; font-size: 18px !important; cursor: pointer !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #1a1a1a !important; }
body.single-product .sf-gallery-thumbs { display: flex !important; gap: 6px !important; overflow-x: auto !important; scroll-behavior: smooth !important; scrollbar-width: none !important; flex: 1 !important; }
body.single-product .sf-gallery-thumbs::-webkit-scrollbar { display: none !important; }
body.single-product .sf-thumb { width: 60px !important; height: 60px !important; flex-shrink: 0 !important; border-radius: 8px !important; overflow: hidden !important; background: #ebe9e6 !important; border: 2px solid transparent !important; cursor: pointer !important; padding: 0 !important; }
body.single-product .sf-thumb img { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 6px !important; box-sizing: border-box !important; }
body.single-product .sf-thumb.sf-thumb-active { border-color: #a0153a !important; }

/* ── Mobile fixes: 480px breakpoint ────────────────────────────── */
@media (max-width: 480px) {
  /* Gallery thumbnails smaller */
  body.woocommerce-shop .sf-thumb,
  body.single-product .sf-thumb { width: 50px !important; height: 50px !important; }

  /* Arrows always visible on touch (no hover on mobile) */
  body.woocommerce-shop .sf-arrow,
  body.single-product .sf-arrow { opacity: 1 !important; width: 32px !important; height: 32px !important; font-size: 20px !important; }

  /* Thumb arrows larger tap target */
  body.woocommerce-shop .sf-thumb-arrow,
  body.single-product .sf-thumb-arrow { width: 36px !important; height: 36px !important; }

  /* Product layout: full width stacked */
  body.woocommerce-shop .sf-product-grid,
  body.single-product .sf-product-grid { grid-template-columns: 1fr !important; }

  /* Add to cart full width */
  body.single-product .single_add_to_cart_button,
  body.woocommerce-shop .single_add_to_cart_button { width: 100% !important; }

  /* Gallery not sticky on small screens — would eat too much height */
  body.single-product .sf-gallery { position: relative !important; top: 0 !important; }
}

/* ── Mobile fixes: 375px breakpoint ────────────────────────────── */
@media (max-width: 375px) {
  body.woocommerce-shop .sf-thumb,
  body.single-product .sf-thumb { width: 44px !important; height: 44px !important; }

  body.single-product .sf-product-title { font-size: 22px !important; }

  body.single-product .sf-spec-chips { gap: 6px !important; }
  body.single-product .sf-chip { padding: 8px 10px !important; }
  body.single-product .sf-chip-val { font-size: 18px !important; }

  body.single-product .sf-price-amount { font-size: 32px !important; }

}

/* REVERT-QTY-SHOP-START — remove this block to revert */
.sf-header-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: nowrap; margin-bottom: 8px; }
body.woocommerce-shop .sf-header-row .product_title.entry-title,
body.single-product .sf-header-row .product_title.entry-title { margin: 0 !important; flex: 1; font-size: clamp(22px, 3.5vw, 32px) !important; line-height: 1.15 !important; text-transform: none !important; letter-spacing: normal !important; font-weight: 700 !important; }
.sf-header-row .sf-price-row { margin: 0 !important; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; }
.sf-header-row .sf-price-amount { font-size: clamp(22px, 3.5vw, 32px) !important; }
.sf-atc-form { margin: 16px 0 0; display: flex; flex-direction: column; gap: 12px; }
.sf-short-desc { margin-top: 28px; font-size: 14px; line-height: 1.7; color: rgba(var(--sf-o), 0.65); border-top: 1px solid rgba(var(--sf-o), 0.08); padding-top: 24px; }
.sf-qty-ctrl { display: inline-flex; align-items: center; border: 1.5px solid rgba(var(--sf-o),.2); border-radius: 9999px; overflow: hidden; align-self: center; }
.sf-qty-btn { width: 54px; height: 54px; background: transparent; border: none; font-size: 24px; font-weight: 300; cursor: pointer; color: var(--sf-fg); transition: background .15s; display: flex; align-items: center; justify-content: center; }
.sf-qty-btn:hover:not(:disabled) { background: rgba(var(--sf-o),.06); }
.sf-qty-btn:disabled { opacity: .35; cursor: default; }
.sf-qty-val { width: 60px; height: 54px; text-align: center; border: none; border-left: 1.5px solid rgba(var(--sf-o),.12); border-right: 1.5px solid rgba(var(--sf-o),.12); background: transparent; color: var(--sf-fg); font-size: 17px; font-weight: 700; -moz-appearance: textfield; }
.sf-qty-val::-webkit-inner-spin-button, .sf-qty-val::-webkit-outer-spin-button { -webkit-appearance: none; }
.sf-atc-btn { width: 100% !important; max-width: 100% !important; background: #a0153a !important; color: #fff !important; border: none !important; border-radius: 9999px !important; padding: 20px 40px !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; cursor: pointer !important; text-align: center !important; display: block !important; box-shadow: 0 4px 24px rgba(160,21,58,0.38) !important; transition: background .2s ease, box-shadow .2s ease, transform .12s ease !important; }
.sf-atc-btn:hover { background: #7a0f2c !important; box-shadow: 0 6px 32px rgba(160,21,58,0.55) !important; transform: translateY(-1px) !important; }
.sf-atc-btn:active { transform: translateY(0) !important; box-shadow: 0 2px 10px rgba(160,21,58,0.3) !important; }
/* REVERT-QTY-SHOP-END */

/* ── PDP brand typography ────────────────────────────────────────────────────
   Re-scan 2026-08-06. This file carried exactly ONE 'Archivo Black' rule and it
   was scoped to body.woocommerce-shop — the archive. Every body.single-product
   title rule set font-weight but no font-family, so the PDP h1 fell through to
   the theme's Plus Jakarta Sans while the archive rendered in the brand display
   face. The two pages showed the same product in different typefaces.

   That became urgent when /shop/ was canonicalised to this URL: search engines
   and buyers are now both pointed at this page, so it has to be the one that
   looks right. Matching the archive rather than inventing a third treatment. */
body.single-product .product_title.entry-title,
body.single-product .sf-product-title {
  font-family: 'Archivo Black', sans-serif !important;
  font-weight: 400 !important;   /* Archivo Black ships one weight; 900 forces a synthetic bold */
  letter-spacing: -0.01em;
}

/* ── PDP buy button ──────────────────────────────────────────────────────────
   Re-scan 2026-08-06. The add-to-cart control inherited the theme's default
   .medical_theme_btn styling: a WHITE ghost button outlined in #800020 — a third
   burgundy that appears nowhere in the brand (the estate uses #a0153a). So the
   single most important control on the money page was the least prominent thing
   on it, in the wrong colour. The archive's CTA is a filled burgundy pill; this
   matches it rather than inventing a third treatment. */
body.single-product .single_add_to_cart_button,
body.single-product .single_add_to_cart_button.medical_theme_btn {
  background: #a0153a !important;
  border: 1px solid #a0153a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}
body.single-product .single_add_to_cart_button:hover,
body.single-product .single_add_to_cart_button.medical_theme_btn:hover {
  background: #7a0f2c !important;
  border-color: #7a0f2c !important;
  color: #ffffff !important;
}
/* Keyboard users had no visible focus indicator anywhere on the shop (re-scan,
   confirmed as worse than the original audit reported). */
body.single-product .single_add_to_cart_button:focus-visible,
body.single-product a:focus-visible,
body.single-product button:focus-visible,
body.single-product input:focus-visible,
body.single-product select:focus-visible,
body.single-product textarea:focus-visible {
  outline: 2px solid #a0153a !important;
  outline-offset: 2px !important;
}

/* The rule that actually governs this button is
   `.woocommerce div.product form.cart .button { background:#fff!important }`
   — higher specificity AND later in the cascade than the body.single-product
   selector above, so that one never applied. Matching its exact shape here.
   Verified via CDP CSS.getMatchedStylesForNode rather than guessed. */
.woocommerce div.product form.cart .button.single_add_to_cart_button {
  background: #a0153a !important;
  border: 1px solid #a0153a !important;
  color: #ffffff !important;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover {
  background: #7a0f2c !important;
  border-color: #7a0f2c !important;
  color: #ffffff !important;
}

/* MOBILE TAP TARGETS — WCAG 2.5.8 wants 44x44 CSS px for standalone controls.
   The gallery arrows were 32x32 and the qty buttons under the threshold on a
   phone. Only the hit area grows; the drawn icon is unchanged, so the design
   is untouched. Inline links in prose are exempt and are left alone. */
@media (max-width: 860px) {
  /* Class names taken from the rendered DOM, not guessed: the gallery scrollers
     are .sf-thumb-arrow (an earlier pass targeted .sf-arrow and silently did
     nothing). Only the hit area grows; the drawn glyph is untouched. */
  .sf-thumb-arrow,
  .sf-arrow,
  .sf-qty-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  /* footer socials render at 18x18; pad the anchor, leave the icon alone */
  footer a[aria-label],
  .sf-footer a[aria-label] {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/* ── CookieYes banner: third-party markup, all of it under 44x44 on a phone ──
   This is the FIRST thing a mobile visitor has to interact with, and they can't
   reach the site until they do — so undersized targets here cost more than
   anywhere else on the estate.

   Measured: Accept/Reject 310x42 and 797x42, Close 24x24, Show more 72x28, the
   six category accordions 24px tall, and the "Cookie preferences" banner link
   163x24. Heights only — the widths are already generous and CookieYes lays the
   buttons out full-bleed, so forcing min-width would break its own grid.

   ⚠️ Third-party markup: re-check these selectors after a CookieYes update. If
   they rename a class the rule silently stops applying — it degrades to the old
   sizes rather than breaking the banner. */
@media (max-width: 860px) {
  .cky-btn-revisit-wrapper .cky-btn-revisit {
    width: 44px !important;
    height: 44px !important;
  }
  .cky-consent-container .cky-btn,
  .cky-modal .cky-btn,
  .cky-banner-element,
  .cky-show-desc-btn,
  .cky-accordion-btn {
    min-height: 44px !important;
  }
  .cky-btn-close {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ── /shop/ feature-term answers, added 2026-08-18 ─────────────────────────
   Reuses the .sf-vibe-row* type scale so the block reads as part of the same
   page, but needs its own wrapper: .sf-vibe-inner is a two-column flex built
   around the phone image, and this section has no image. Constrained to 68ch
   because the vibe copy column is only narrow by virtue of the phone beside
   it — dropped into a full-width row the same text would set at ~1100px and
   be unreadable. */
.sf-faq {
  background: var(--sf-bg) !important;
  padding: 0 0 100px !important;
  margin: 0 !important;
}
.sf-faq-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 48px !important;
}
.sf-faq .sf-vibe-heading { margin-bottom: 32px !important; }
.sf-faq .sf-vibe-rows { max-width: 68ch !important; gap: 26px !important; }
.sf-faq .sf-vibe-row-body a {
  color: var(--sf-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  white-space: nowrap !important;
}
@media (max-width: 700px) {
  .sf-faq-inner { padding: 0 24px !important; }
  .sf-faq { padding-bottom: 64px !important; }
  .sf-faq .sf-vibe-row-body a { white-space: normal !important; }
}

/* ── Accepted payment methods, added 2026-08-18 ───────────────────────────
   Sits directly under .sf-checkout-row and inherits its scale, but a step
   quieter: the trust row is the promise, this is the mechanics. Uses the same
   rgba(var(--sf-o),…) construction so it follows the day/night toggle rather
   than hardcoding a colour that only works on one ground. */
.sf-pay-row {
  text-wrap: pretty;
  font-size: 10px !important;
  color: rgba(var(--sf-o),0.45) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin: 2px 0 0 !important;
  line-height: 1.9 !important;
  font-weight: 400 !important;
  display: block !important;
}

/* ── .sf-delivery-row — dispatch, delivery window, origin, VAT ──────────────
   Added 2026-08-20. Markup comes from mu-plugins/sf-delivery-row.php at
   woocommerce_single_product_summary priority 38, so it renders on BOTH /shop/
   and the product page from one source.

   Set one step LOUDER than .sf-checkout-row (0.6 alpha) because this row carries
   facts a buyer needs to make the decision, where the trust row carries reassurance.
   Uses rgba(var(--sf-o),…) like its siblings so it follows the day/night toggle
   instead of hardcoding a colour that only resolves on one ground. */
.sf-delivery-row {
  text-wrap: pretty;
  font-size: 11px;
  color: rgba(var(--sf-o), 0.72);
  letter-spacing: 0.06em;
  line-height: 1.85;
  font-weight: 400;
  display: block;
  margin: 6px 0 2px;
}
body.single-product .sf-delivery-row {
  font-size: 11px !important;
  color: rgba(var(--sf-o), 0.72) !important;
  letter-spacing: 0.06em !important;
  line-height: 1.85 !important;
  margin: 6px 0 2px !important;
  display: block !important;
}