/**
 * Stratus inline product design — scoped component styles.
 * Extracted from the "inspired" design mockup <style> block.
 * Everything is namespaced under .stratus-product so it cannot leak into Astra
 * (header/footer "remain as-is"). Tailwind utilities come from the Play CDN
 * (preflight disabled) enqueued alongside this file.
 */

/* Scoped Tailwind-preflight equivalent.
   Preflight is disabled globally (corePlugins.preflight=false) so the Play CDN does
   not reset Astra's header/footer. The design, however, relies on preflight for
   borders (border-style:solid), button normalisation and img/heading resets — so we
   replicate exactly those parts, scoped to .stratus-product and at ZERO specificity
   (via :where) so every Tailwind utility and component class still wins over it. */
:where(.stratus-product) *,
:where(.stratus-product) *::before,
:where(.stratus-product) *::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}
:where(.stratus-product) h1, :where(.stratus-product) h2, :where(.stratus-product) h3,
:where(.stratus-product) h4, :where(.stratus-product) h5, :where(.stratus-product) h6 {
  font-size: inherit; font-weight: inherit; margin: 0;
}
:where(.stratus-product) p, :where(.stratus-product) blockquote, :where(.stratus-product) figure { margin: 0; }
:where(.stratus-product) ul, :where(.stratus-product) ol { list-style: none; margin: 0; padding: 0; }
:where(.stratus-product) button,
:where(.stratus-product) [type='button'],
:where(.stratus-product) [type='submit'],
:where(.stratus-product) [type='reset'] {
  background-color: transparent; background-image: none;
  font: inherit; color: inherit; cursor: pointer; padding: 0; margin: 0;
}
:where(.stratus-product) img, :where(.stratus-product) svg, :where(.stratus-product) video { display: block; vertical-align: middle; }
:where(.stratus-product) img, :where(.stratus-product) video { max-width: 100%; height: auto; }
:where(.stratus-product) select, :where(.stratus-product) input, :where(.stratus-product) textarea { font: inherit; }

.stratus-product { color: #494b51; font-family: 'Work Sans', system-ui, sans-serif; }
.stratus-product .eyebrow { font-family: 'Work Sans', sans-serif; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px; }
.stratus-product .display { font-family: 'Open Sans', sans-serif; }

/* Native WooCommerce form — present + functional but visually removed.
   Off-screen (not display:none) so WC variation JS + PPOM + form submit all work. */
.stratus-engine {
  position: absolute !important;
  left: -99999px !important;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* FAQ accordions */
.stratus-product details > summary { list-style: none; cursor: pointer; }
.stratus-product details > summary::-webkit-details-marker { display: none; }
.stratus-product details[open] summary .chev { transform: rotate(45deg); }
.stratus-product .chev { transition: transform 220ms ease; }

/* Pills (material) */
.stratus-product .pill[aria-checked="true"] { background: #0f75bc; color: #ffffff; border-color: #0f75bc; }

/* Colour swatches (Lurano-style) with hover tooltip */
.stratus-product .colour-swatch {
  position: relative; width: 36px; height: 36px; border-radius: 9999px;
  border: 1px solid rgba(16,18,24,0.18); cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.stratus-product .colour-swatch:hover { transform: scale(1.06); }
.stratus-product .colour-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px #f3f5f5, 0 0 0 4px #0f75bc; }
.stratus-product .colour-swatch::after {
  content: attr(data-label); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px); background: #101218; color: #fff;
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em; white-space: nowrap;
  padding: 6px 10px; border-radius: 4px; opacity: 0; pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease; z-index: 10;
}
.stratus-product .colour-swatch::before {
  content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%;
  transform: translateX(-50%); border: 5px solid transparent; border-top-color: #101218;
  opacity: 0; pointer-events: none; transition: opacity 160ms ease; z-index: 10;
}
.stratus-product .colour-swatch:hover::after,
.stratus-product .colour-swatch:focus::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.stratus-product .colour-swatch:hover::before,
.stratus-product .colour-swatch:focus::before { opacity: 1; }

/* Style cards */
.stratus-product .style-card { cursor: pointer; }
.stratus-product .style-card > span:first-child { transition: border-color 180ms ease, box-shadow 180ms ease; }
.stratus-product .style-card:hover > span:first-child { border-color: #0f75bc; }
.stratus-product .style-card[aria-checked="true"] > span:first-child { border-color: #0f75bc; box-shadow: 0 0 0 2px #0f75bc inset; }
.stratus-product .style-card[aria-checked="true"] > span:last-child { color: #0f75bc; font-weight: 600; }

/* Disabled / unavailable style cards */
.stratus-product .style-card--disabled { cursor: not-allowed; }
.stratus-product .style-card--disabled > span:first-child { opacity: 0.45; }
.stratus-product .style-card--disabled > span:last-child { opacity: 0.45; }
.stratus-product .style-card--disabled:hover > span:first-child { border-color: #dddddd; }
.stratus-product .style-card--disabled[aria-checked="true"] > span:first-child { border-color: #dddddd; box-shadow: none; }
.stratus-product .style-card--disabled[aria-checked="true"] > span:last-child { color: #494b51; font-weight: 400; }

/* Gallery slider + thumbnails */
.stratus-product .slide[data-active="true"] { opacity: 1; pointer-events: auto; }
.stratus-product .thumb { cursor: pointer; border: 2px solid transparent; transition: border-color 180ms ease, opacity 180ms ease; opacity: 0.85; }
.stratus-product .thumb:hover { opacity: 1; }
.stratus-product .thumb[aria-current="true"] { border-color: #0f75bc; opacity: 1; }

/* Cover images must fill their aspect-ratio card (defeats Astra/Woo img height rules).
   Only targets object-cover photos — object-contain diagrams (kerb/glazing/fitter) are untouched. */
.stratus-product [class*="aspect-"] img.object-cover { width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* Form fields (selects, RAL inputs, qty) */
.stratus-product .field { background: #ffffff; border: 1px solid #dddddd; padding: 12px 14px; font-size: 14px; color: #494b51; width: 100%; }
.stratus-product .field:focus { outline: none; border-color: #0f75bc; box-shadow: 0 0 0 3px rgba(15,117,188,0.15); }

/* Fixed floating section nav */
.stratus-product { padding-bottom: 64px; }
.stratus-product .page-nav { position: fixed; bottom: 1rem; left: 0; right: 0; z-index: 50; text-align: center; }
.stratus-product .page-nav-inner {
  display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  background: rgba(16,18,24,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(15,117,188,0.5); max-width: calc(100vw - 2rem);
}
.stratus-product .page-nav-inner::-webkit-scrollbar { display: none; }
.stratus-product .page-nav a {
  flex-shrink: 0; padding: 0.5rem 1rem; font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255,255,255,0.7); text-decoration: none; transition: color 180ms ease; white-space: nowrap;
}
.stratus-product .page-nav a:hover { color: rgba(255,255,255,0.95); }
.stratus-product .page-nav a.active { color: #0f75bc; }

/* Hub product cards */
.stratus-product .product-card { transition: transform 220ms ease, box-shadow 220ms ease; }
.stratus-product .product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(16,18,24,0.12); }
.stratus-product .product-card:hover .product-image { transform: scale(1.04); }
.stratus-product .product-image { transition: transform 400ms ease; }

/* Qty stepper */
.stratus-product .stratus-qty { display: inline-flex; align-items: center; border: 1px solid #dddddd; background: #fff; }
.stratus-product .stratus-qty button { width: 2.5rem; height: 3rem; color: #8d8f95; background: none; border: 0; cursor: pointer; font-size: 18px; }
.stratus-product .stratus-qty button:hover { color: #101218; }
.stratus-product .stratus-qty input { width: 3rem; text-align: center; background: transparent; border: 0; font-size: 15px; }
.stratus-product .stratus-qty input:focus { outline: none; }