/* ============================================================================
   Kwick Strike — PDP V2 (Coutts CRO rewrite)
   Canonical product page (The Strike). Layout-only; inherits native type + color
   from the kschild theme. Mirrors the Homepage V2 design system for consistency.

   NATIVE-MATCH RULES (same as homepage-v2.css):
   - No font loaders. Headings use the theme's Oswald, body Montserrat (inherited).
   - Brand green is the theme's #08fe08. Buttons mirror the homepage buttons.
   - Everything scoped under .ksx-pdp so nothing leaks into / out of Storefront.
   ========================================================================== */

.ksx-pdp { --ksx-green:#08fe08; --ksx-green-d:#06c906; --ksx-black:#000; --ksx-near:#121212;
  --ksx-panel:#1a1a1a; --ksx-border:#2a2a2a; --ksx-light:#f1f1f1; --ksx-muted:#cfcfcf;
  --ksx-ink:#1a1a1a; color:var(--ksx-ink); }
body.page-template-template-pdp-v2 { overflow-x:clip; }  /* clip (not hidden) so body doesn't become a 2nd scroll container */
body.page-template-template-pdp-v2 #page { overflow-x:clip; }  /* Storefront sets #page overflow-x:hidden → also a scroll container; clip it too */
.ksx-pdp *, .ksx-pdp *::before, .ksx-pdp *::after { box-sizing:border-box; }
.ksx-pdp img { max-width:100%; display:block; }

/* Side gutters scale 22 -> 48px so content never hugs the edges. */
.ksx-wrap { max-width:1180px; margin:0 auto; padding:0 clamp(22px, 5vw, 48px); }

/* Full-bleed bands like the homepage; inner .ksx-wrap keeps content readable. */
.ksx-pdp > section { width:100vw; margin-left:calc(50% - 50vw); }

/* Headings take their section's color (beats the theme's explicit dark h2{color}). */
.ksx-pdp h1, .ksx-pdp h2, .ksx-pdp h3 { color:inherit; font-weight:700; line-height:1.16; margin:0; }
.ksx-pdp h2, .ksx-pdp h3 { text-transform:uppercase; }
.ksx-accent { color:var(--ksx-green); }

/* Hide the theme breadcrumb on this template (we render our own). */
.page-template-template-pdp-v2 .woocommerce-breadcrumb,
.page-template-template-pdp-v2 .storefront-breadcrumb { display:none; }

/* ---- Buttons (mirror native .herobtn / homepage) ---- */
.ksx-btn { display:inline-block; font-family:"oswald",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:16px; padding:15px 32px; border-radius:4px; text-align:center;
  text-decoration:none; transition:all .15s ease; cursor:pointer; }
.ksx-btn-primary { background:var(--ksx-green); color:var(--ksx-black); border:2px solid var(--ksx-green); }
.ksx-btn-primary:link, .ksx-btn-primary:visited { color:var(--ksx-black); }  /* keep label after click/Back */
.ksx-btn-primary:hover { background:var(--ksx-green-d); border-color:var(--ksx-green-d); color:var(--ksx-black); }
.ksx-btn-ghost { background:transparent; color:#fff; border:2px solid #fff; }              /* on dark bg */
.ksx-btn-ghost:link, .ksx-btn-ghost:visited { color:#fff; }
.ksx-btn-ghost:hover { border-color:var(--ksx-green); color:var(--ksx-green); }
.ksx-btn-ghost-dark { background:transparent; color:var(--ksx-ink); border:2px solid #c9c9c9; }  /* on light bg */
.ksx-btn-ghost-dark:link, .ksx-btn-ghost-dark:visited { color:var(--ksx-ink); }
.ksx-btn-ghost-dark:hover { border-color:var(--ksx-green-d); color:var(--ksx-green-d); }
.ksx-ctas { display:flex; gap:16px; flex-wrap:wrap; margin-top:24px; }
.ksx-ctas-center { justify-content:center; }

/* ---- Scroll-in reveal (only active when JS adds .ksx-anim) ---- */
.ksx-anim .ksx-reveal { opacity:0; transform:translateY(26px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); will-change:opacity, transform; }
.ksx-anim .ksx-reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .ksx-anim .ksx-reveal, .ksx-anim .ksx-reveal.is-visible { opacity:1; transform:none; transition:none; }
}

/* ============================== A. ABOVE THE FOLD ============================== */
.ksx-pdp-hero { background:#fff; color:var(--ksx-ink); padding:26px 0 64px; }
.ksx-crumbs { font-size:13px; color:#777; }
.ksx-crumbs a { color:#777; text-decoration:none; }
.ksx-crumbs a:hover { color:var(--ksx-green-d); }
.ksx-crumbs span { margin:0 4px; color:#bbb; }
.ksx-pdp-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:48px; margin-top:20px; align-items:start; }

/* Gallery */
.ksx-main-visual { position:relative; border-radius:10px; overflow:hidden; background:#f4f4f4; }
.ksx-main-visual img,
.ksx-main-visual .ksx-hero-video { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.ksx-timer-badge { position:absolute; top:14px; left:14px; background:var(--ksx-green); color:#000;
  font-family:"oswald",sans-serif; font-weight:700; font-size:14px; letter-spacing:.06em;
  padding:6px 12px; border-radius:4px; text-transform:uppercase; }
.ksx-thumbs { display:flex; gap:10px; margin-top:10px; }
.ksx-thumb { flex:1 1 0; min-width:0; padding:0; background:none; cursor:pointer; position:relative;
  border:1px solid #e4e4e4; border-radius:6px; overflow:hidden; transition:border-color .15s ease, box-shadow .15s ease; }
.ksx-thumb:hover { border-color:var(--ksx-green-d); }
.ksx-thumb.is-active { border-color:var(--ksx-green); box-shadow:0 0 0 1px var(--ksx-green); }
.ksx-thumb img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.ksx-thumb-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px; text-shadow:0 1px 5px rgba(0,0,0,.7); pointer-events:none; }
.ksx-main-visual .is-hidden, .ksx-thumbs .is-hidden { display:none !important; }

/* Buy column */
.ksx-pdp-h1 { font-family:"oswald",sans-serif; text-transform:uppercase; font-size:clamp(26px,3vw,38px); line-height:1.1; color:var(--ksx-ink); }
.ksx-tagline { margin:12px 0 0; font-size:17px; color:#444; font-weight:500; }
.ksx-mini-trust { margin:14px 0 0; font-size:14px; color:#555; }
.ksx-mini-trust .ksx-stars { color:var(--ksx-green); letter-spacing:1px; margin-right:6px; }
.ksx-mini-trust b { color:var(--ksx-ink); }
.ksx-price { margin:18px 0 0; font-family:"oswald",sans-serif; font-weight:700; font-size:34px; color:var(--ksx-ink); }
.ksx-price small { display:block; font-family:"montserrat",sans-serif; font-weight:500; font-size:13px; color:#777; margin-top:4px; }
.ksx-trust-bullets { list-style:none; margin:22px 0 0; padding:0; }
.ksx-trust-bullets li { position:relative; padding:6px 0 6px 28px; font-size:15px; color:#333; }
.ksx-trust-bullets li::before { content:"✓"; position:absolute; left:0; top:6px; color:var(--ksx-green-d); font-weight:700; }
.ksx-micro { margin:16px 0 0; font-size:13px; color:#888; }

/* ============================== B. THREE THINGS ============================== */
.ksx-three { background:var(--ksx-near); color:#fff; padding:84px 0; }
.ksx-three-h2 { font-size:clamp(24px,3.2vw,38px); max-width:880px; }
.ksx-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.ksx-card { background:var(--ksx-panel); border:1px solid var(--ksx-border); border-radius:8px; padding:32px 28px; }
.ksx-num { font-family:"oswald",sans-serif; font-size:22px; font-weight:700; color:var(--ksx-green); margin-bottom:10px; }
.ksx-card h3 { font-size:19px; color:#fff; font-weight:700; margin-bottom:12px; }
.ksx-card p { color:var(--ksx-muted); font-size:15.5px; margin:0; line-height:1.55; }

/* ============================== C. FITMENT ============================== */
.ksx-fit { background:var(--ksx-light); padding:84px 0; text-align:center; }
.ksx-fit h2 { font-size:clamp(28px,3.6vw,42px); color:var(--ksx-ink); }
.ksx-fit .ksx-sub { max-width:640px; margin:16px auto 32px; font-size:17px; color:#444; }
.ksx-tool-slot { max-width:640px; margin:0 auto; min-height:120px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px dashed #c4c4c4; border-radius:8px; color:#888; }
.ksx-below-tool { max-width:640px; margin:24px auto 0; font-size:14px; color:#777; }  /* match the tool container width */
.ksx-below-tool a { color:var(--ksx-green-d); }

/* ============================== D. VIDEO ============================== */
.ksx-video { background:var(--ksx-black); color:#fff; padding:84px 0; }
.ksx-video h2 { font-size:clamp(28px,3.6vw,42px); text-align:center; margin-bottom:36px; }
.ksx-video-frame { position:relative; max-width:900px; margin:0 auto; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#111; }
.ksx-video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.ksx-video-poster { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:#111 center/cover no-repeat; text-decoration:none; color:#fff; }
.ksx-video-poster::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,.5); }
.ksx-play { position:relative; width:74px; height:74px; border-radius:50%; background:var(--ksx-green); color:#000;
  display:flex; align-items:center; justify-content:center; font-size:26px; padding-left:5px; }
.ksx-play-label { position:relative; font-family:"oswald",sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:14px; }
.ksx-video-toc { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; margin:28px 0 0; padding:0; color:var(--ksx-muted); font-size:14px; }
.ksx-video-toc b { color:var(--ksx-green); }

/* ============================== E. SPECS ============================== */
.ksx-specs { background:#fff; padding:84px 0; }
.ksx-specs h2 { font-size:clamp(28px,3.6vw,42px); color:var(--ksx-ink); text-align:center; margin-bottom:42px; }
.ksx-table-wrap { overflow-x:auto; }
.ksx-spec { width:100%; border-collapse:collapse; font-size:15px; }
.ksx-spec th, .ksx-spec td { padding:16px 18px; text-align:left; border-bottom:1px solid #e4e4e4; vertical-align:top; }
.ksx-spec th { font-family:"oswald",sans-serif; text-transform:uppercase; font-size:14px; letter-spacing:.03em; color:#666; font-weight:600; }
.ksx-spec td:first-child { font-weight:700; color:var(--ksx-ink); white-space:nowrap; }
.ksx-spec td:nth-child(2) { color:#333; }
.ksx-spec td:last-child { color:#666; }

/* ============================== F. REVIEWS ============================== */
.ksx-reviews { background:var(--ksx-light); padding:84px 0; }
.ksx-reviews h2 { font-size:clamp(28px,3.6vw,42px); color:var(--ksx-ink); text-align:center; }
.ksx-agg { text-align:center; margin:14px 0 40px; font-size:16px; color:#444; }
.ksx-agg .ksx-stars { color:var(--ksx-green); letter-spacing:2px; }
.ksx-review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ksx-review-card { background:#fff; border-radius:8px; padding:28px 26px; box-shadow:0 1px 7px rgba(0,0,0,.09); }
.ksx-rstars { color:#f5a623; font-size:17px; letter-spacing:2px; }
.ksx-verified { display:inline-block; background:#e8f5ec; color:#1f7a3a; font-size:11px; font-weight:700; text-transform:uppercase;
  padding:3px 10px; border-radius:20px; margin-left:8px; vertical-align:middle; letter-spacing:.02em; }
.ksx-review-card p { margin:14px 0 14px; font-size:15px; color:#43454b; line-height:1.55; }
.ksx-who { font-weight:700; color:var(--ksx-ink); font-size:14px; }
.ksx-rmeta { font-weight:500; color:#888; }

/* ============================== G. FAQ ============================== */
.ksx-faq { background:#fff; padding:84px 0; }
.ksx-faq h2 { font-size:clamp(28px,3.6vw,42px); color:var(--ksx-ink); text-align:center; margin-bottom:40px; }
.ksx-faq-list { max-width:820px; margin:0 auto; }
.ksx-faq-item { border-bottom:1px solid #e4e4e4; }
.ksx-faq-item summary { list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative;
  font-family:"oswald",sans-serif; text-transform:uppercase; font-size:16px; letter-spacing:.02em; color:var(--ksx-ink); }
.ksx-faq-item summary::-webkit-details-marker { display:none; }
.ksx-faq-item summary::after { content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:24px; line-height:1; color:var(--ksx-green-d); transition:transform .2s ease; }
.ksx-faq-item[open] summary::after { content:"\2212"; }   /* minus */
.ksx-faq-a { padding:0 0 22px; }
.ksx-faq-a p { margin:0; color:#444; font-size:15.5px; line-height:1.6; }

/* ============================== H. FINAL BUY ============================== */
.ksx-final { position:relative; background:var(--ksx-black) center/cover no-repeat;
  background-image:url('https://kwickstrike.com/wp-content/themes/kschild/assets/img/ctabtm.webp'); color:#fff; padding:96px 0; text-align:center; }
.ksx-final-overlay { position:absolute; inset:0; background:rgba(0,0,0,.74); }
.ksx-final-inner { position:relative; z-index:2; }
.ksx-final h2 { font-size:clamp(30px,4vw,50px); }
.ksx-final-body { max-width:640px; margin:18px auto 0; color:#ddd; font-size:16px; }
.ksx-fine { margin-top:22px; font-size:13px; color:#aaa; }
.ksx-fine a { color:var(--ksx-green); }

/* ============================== RESPONSIVE ============================== */
@media (max-width:880px){
  /* Above the fold stacks: gallery on top, buy box below. */
  .ksx-pdp-grid { grid-template-columns:1fr; gap:28px; }
  .ksx-main-visual img,
  .ksx-main-visual .ksx-hero-video { aspect-ratio:4/3; }
  .ksx-card-grid, .ksx-review-grid { grid-template-columns:1fr; }

  /* Buttons: stack, centered, capped (same behavior as the homepage). */
  .ksx-ctas { flex-direction:column; align-items:center; justify-content:center; }
  .ksx-btn { width:100%; max-width:340px; }

  /* Spec table -> stacked cards with the column name as a label. */
  .ksx-spec thead { display:none; }
  .ksx-spec, .ksx-spec tbody, .ksx-spec tr, .ksx-spec td { display:block; width:100%; }
  .ksx-spec tr { border:1px solid #e4e4e4; border-radius:8px; margin-bottom:14px; padding:6px 0; }
  .ksx-spec td { border:none; padding:8px 18px; }
  .ksx-spec td:first-child { white-space:normal; font-size:17px; padding-top:14px; }
  .ksx-spec td::before { content:attr(data-label); display:block; font-family:"oswald",sans-serif;
    text-transform:uppercase; font-size:11px; letter-spacing:.04em; color:#999; margin-bottom:2px; }
  .ksx-spec td:first-child::before { display:none; }   /* the component name is its own header */
}