/* Arken Product Extras — rich product-description layout + widgets.
   Namespaced .apx-* so it never collides with the theme or other mu-plugins. */

/* USA description sits on WHITE; the Arken theme body is grey rgb(240,241,243).
   Put the rich description on white so reticles/widgets blend like USA. */
.apx-body{max-width:none;margin:0 auto;background:#fff;padding:1.8em clamp(1em,3vw,2.6em);border-radius:8px}
.apx-body h2,.apx-body h3{text-align:center;font-weight:800;line-height:1.25;margin:1.7em 0 .5em;border:0;padding:0}
.apx-body h3{font-size:1.55em}
.apx-body h4{text-align:center;font-weight:800;font-size:1.2em;margin:.3em 0 .5em}
.apx-lead{text-align:center;max-width:780px;margin:0 auto 1.1em;color:#444}

/* ===== Hero overlay — light washed banner, dark text, fixed-height cover ===== */
.apx-hero{position:relative;border-radius:8px;overflow:hidden;margin:0 0 1.6em;min-height:260px;background:#e3e3e3}
.apx-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:80% 35%}
.apx-hero__text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:2.4em 1.5em;background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.25))}
.apx-hero__text p{margin:0;color:#202223;max-width:860px;font-size:1.25em;line-height:1.6;font-weight:600}
@media(max-width:600px){.apx-hero{min-height:160px}.apx-hero__text{padding:1.2em}.apx-hero__text p{font-size:1em}}

/* ===== Two-column section (VPR|TOR, Dial|ZeroStop) ===== */
.apx-two{display:grid;grid-template-columns:1fr 1fr;gap:2.4em;margin:1.4em 0;align-items:start}
@media(max-width:680px){.apx-two{grid-template-columns:1fr;gap:1.6em}}
.apx-two ul{margin:.4em 0;padding-left:1.1em}
.apx-two img{display:block;width:100%;height:auto;border-radius:8px;margin-top:.9em}
/* reticle intro (USA): body text LEFT-aligned in both columns; only the TOR
   heading is right-aligned so the two headings mirror to the outer edges. */
.apx-col--l,.apx-col--r{text-align:left}
.apx-body .apx-col--l h4{text-align:left}
.apx-body .apx-col--r h4{text-align:right}
.apx-col--l ul,.apx-col--r ul{padding-left:1.1em;list-style-position:outside}

/* ===== Before / after comparison slider (white bg, no black) ===== */
.apx-compare{position:relative;width:100%;max-width:560px;margin:1.4em auto;aspect-ratio:1;
  overflow:hidden;border-radius:8px;background:#fff;touch-action:none;user-select:none}
.apx-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.apx-compare__after{clip-path:inset(0 0 0 50%)}
.apx-compare__divider{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.55);pointer-events:none}
.apx-compare__handle{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#d1c18d;border:3px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.5);pointer-events:none;display:flex;align-items:center;justify-content:center}
.apx-compare__handle:before{content:"\2039\2002\203A";font:700 18px/1 Montserrat,Arial,sans-serif;color:#202223}
.apx-compare__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.apx-compare__hint{text-align:center;font-size:.85em;color:#888;margin:.4em 0 0}

/* ===== Reticle + magnification slider (2 circular reticles, one mag slider) =====
   Mirrors arkenopticsusa.com: 420px circle, scope-rim drop shadow, image fills (cover). */
.apx-retmag{max-width:none;margin:1.8em auto}
.apx-retmag__row{display:grid;grid-template-columns:1fr minmax(130px,160px) 1fr;gap:1.6em;align-items:center;justify-items:center}
@media(max-width:680px){.apx-retmag__row{grid-template-columns:1fr 1fr;gap:1em}.apx-retmag__spec{grid-column:1 / -1;order:3}}
.apx-retmag__cell{text-align:center;width:100%}
.apx-retmag__view{position:relative;width:100%;max-width:420px;aspect-ratio:1;margin:0 auto;overflow:hidden;border-radius:50%;background:#fff;box-shadow:0 7px 20px rgba(0,0,0,.4)}
.apx-retmag__ret{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;transform-origin:center;transition:transform .06s linear;will-change:transform;z-index:1}
.apx-retmag__ring{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:2}
.apx-retmag__cap{font-weight:800;margin-top:.8em;font-size:1.1em}
.apx-retmag__spec{text-align:center;margin:0}
.apx-retmag__spec dt{font:700 9px/1.2 Montserrat,Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#999;margin-top:.6em}
.apx-retmag__spec dd{margin:.05em 0;font-weight:700;color:#202223;font-size:.92em}
.apx-retmag__control{display:flex;align-items:center;gap:1em;max-width:520px;margin:1.5em auto 0}
.apx-retmag__control label{font:600 11px/1 Montserrat,Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#777;white-space:nowrap}
/* accent-color gold like Arken; neutralise themes (e.g. Engage/unwind) that add
   padding/border/height to all <input> and stop the thumb reaching the end. */
.apx-retmag__range{flex:1;accent-color:#d1c18d;cursor:ew-resize;padding:0 !important;border:0 !important;background:none !important;min-height:0 !important;height:auto !important;box-shadow:none !important}
.apx-retmag__val{font-weight:800;font-size:1.15em;min-width:3.3em;text-align:center;color:#202223}

/* ===== Feature icon cards (Harshest Environments) ===== */
.apx-feat{display:grid;grid-template-columns:repeat(4,1fr);gap:1em;margin:1.4em 0}
@media(max-width:900px){.apx-feat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.apx-feat{grid-template-columns:1fr}}
.apx-feat__card{display:flex;flex-direction:column;gap:.7em;align-items:flex-start;padding:1.3em;border:1px solid #ececec;border-radius:10px;background:#fafafa}
.apx-feat__icon{flex:0 0 46px;width:46px;height:46px;object-fit:contain}
.apx-feat__t{font-weight:700;margin:0 0 .25em}
.apx-feat__d{margin:0;font-size:.92em;color:#555}

/* ===== What's in the box (cards) ===== */
.apx-box{display:grid;grid-template-columns:repeat(5,1fr);gap:1em;margin:1.2em 0}
@media(max-width:680px){.apx-box{grid-template-columns:repeat(2,1fr)}}
.apx-box__card{border:1px solid #eee;border-radius:8px;padding:.8em;text-align:center;background:#fff}
.apx-box__card img{width:100%;height:96px;object-fit:contain}
.apx-box__card span{display:block;margin-top:.5em;font-size:.82em;color:#444}

/* ===== FAQ accordion ===== */
.apx-faq{max-width:860px;margin:1em auto;border-top:1px solid #eaeaea}
.apx-faq__item{border-bottom:1px solid #eaeaea}
.apx-faq__q{position:relative;padding:1.05em 2em 1.05em .2em;font-size:1em;font-weight:600;cursor:pointer;color:#202223;user-select:none}
.apx-faq__q:after{content:"+";position:absolute;right:.2em;top:.9em;font-size:1.4em;color:#d1c18d;line-height:1}
.apx-faq__item.is-open .apx-faq__q:after{content:"\2013"}
.apx-faq__a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.apx-faq__a>div{padding:0 .2em 1.1em;color:#555}

/* New badge: push WC gallery zoom trigger clear of the top-right badge */
.woocommerce-product-gallery.apx-has-new .woocommerce-product-gallery__trigger{top:60px}

/* ============================================================
   EP-8 additions (2026-07-22) — video, full-width banner,
   use-case tabs, reticle simulator (KLGRID/KLBOX + 1-8x zoom)
   ============================================================ */

/* full-width banner image (34mm tube / accessories / harshest env) */
.apx-fullimg{margin:1.5em 0}
.apx-fullimg img{width:100%;height:auto;display:block;border-radius:8px}

/* section video (autoplay in view). apx-vgrid = 2-up */
.apx-video{position:relative;width:100%;border-radius:8px;overflow:hidden;background:#000;aspect-ratio:16/9}
.apx-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.apx-vgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.2em;margin:1.3em 0}
@media(max-width:680px){.apx-vgrid{grid-template-columns:1fr}}

/* hero variant with WHITE text on a dark scrim (dark action banners) */
.apx-hero--dark .apx-hero__text{background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.32))}
.apx-hero--dark .apx-hero__text p{color:#fff}
.apx-hero--tall{min-height:340px}

/* use-case tabs (CQC / Hunting / PRS) */
.apx-tabs{margin:1.3em 0}
.apx-tabs__bar{display:flex;flex-wrap:wrap;gap:.5em;justify-content:center;margin-bottom:1em}
.apx-tabs__btn{border:1px solid #d8d8d8;background:#fff;color:#333;font:700 .82em/1 Montserrat,Arial,sans-serif;
  letter-spacing:.5px;text-transform:uppercase;padding:.7em 1.2em;border-radius:999px;cursor:pointer;transition:.15s}
.apx-tabs__btn.is-active{background:#202223;color:#fff;border-color:#202223}
.apx-tabs__panel{display:none}
.apx-tabs__panel.is-active{display:block}
.apx-tabs__panel img{width:100%;height:auto;display:block;border-radius:8px}

/* ===== Reticle simulator (tabbed KLGRID/KLBOX + magnification zoom) ===== */
.apx-retsim{max-width:none;margin:1.6em auto}
.apx-retsim__bar{display:flex;gap:.5em;justify-content:center;margin-bottom:1.3em}
.apx-retsim__tab{border:1px solid #d8d8d8;background:#fff;color:#333;font:800 .9em/1 Montserrat,Arial,sans-serif;
  letter-spacing:.5px;padding:.75em 1.6em;border-radius:999px;cursor:pointer;transition:.15s}
.apx-retsim__tab.is-active{background:#d1c18d;color:#202223;border-color:#d1c18d}
.apx-retsim__stage{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:2.2em;align-items:center}
@media(max-width:760px){.apx-retsim__stage{grid-template-columns:1fr;gap:1.4em}}
.apx-retsim__view{position:relative;width:100%;max-width:420px;aspect-ratio:1;margin:0 auto;
  overflow:hidden;border-radius:50%;background:#fff;box-shadow:0 7px 20px rgba(0,0,0,.4)}
.apx-retsim__ret{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  transform-origin:center;transition:transform .06s linear;will-change:transform;z-index:1}
.apx-retsim__ring{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:2}
.apx-retsim__side h4{text-align:left;margin:0 0 .5em}
.apx-retsim__side p{color:#444;margin:.2em 0 .8em}
.apx-retsim__side ul{margin:.3em 0 .8em;padding-left:1.1em;color:#444;font-size:.95em}
.apx-retsim__use{font-weight:600;color:#202223}
.apx-retsim__panel{display:none}
.apx-retsim__panel.is-active{display:block}
.apx-retsim__slider{display:flex;align-items:center;gap:1em;max-width:520px;margin:1.6em auto .3em}
.apx-retsim__slider .lo,.apx-retsim__slider .hi{font:700 .85em/1 Montserrat,Arial,sans-serif;color:#777}
.apx-retsim__range{flex:1;accent-color:#d1c18d;cursor:ew-resize;padding:0!important;border:0!important;
  background:none!important;min-height:0!important;height:auto!important;box-shadow:none!important}
.apx-retsim__hint{text-align:center;font-size:.82em;color:#999;margin:.2em 0 1em}
.apx-retsim__val{font-weight:800;color:#202223;min-width:2.6em;text-align:center}
.apx-retsim__spec{display:grid;grid-template-columns:repeat(4,1fr);gap:.8em;max-width:760px;margin:1em auto 0;text-align:center}
@media(max-width:600px){.apx-retsim__spec{grid-template-columns:repeat(2,1fr)}}
.apx-retsim__spec dt{font:700 9px/1.2 Montserrat,Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#999}
.apx-retsim__spec dd{margin:.15em 0 0;font-weight:800;color:#202223;font-size:.95em}

/* ===== Reticle comparison — BOTH reticles side by side (KLGRID | spec | KLBOX),
   one shared magnification slider zooms both (mirrors arkenopticsusa.com) ===== */
/* 2-row grid: descriptions on top (outer-aligned), reticles + centre spec on the
   row below, shared magnification slider underneath — matches arkenopticsusa.com.
   Reticle scale = magnification value (1x→scale1 … 8x→scale8), object-fit:fill,
   so at 8x it zooms right in and the reticle's outer edges clip out of the circle. */
.apx-rc{max-width:none;margin:1.6em auto}
.apx-rc__grid{display:grid;grid-template-columns:1fr minmax(150px,210px) 1fr;column-gap:1.8em;row-gap:.7em;align-items:start}
@media(max-width:820px){.apx-rc__grid{display:block}.apx-rc__txt{text-align:left!important}}
.apx-rc__txt{font-size:.9em;color:#444}
.apx-rc__txt h4{margin:0 0 .5em;font-size:1.15em;color:#202223}
.apx-rc__txt p{margin:.45em 0}
.apx-rc__txt--l{grid-column:1;grid-row:1;text-align:left}
.apx-rc__txt--r{grid-column:3;grid-row:1;text-align:right}
.apx-rc__use{font-weight:600;color:#202223}
.apx-rc__view{position:relative;width:100%;max-width:340px;aspect-ratio:1;margin:.3em auto 0;
  overflow:hidden;border-radius:50%;background:#fff;box-shadow:0 7px 20px rgba(0,0,0,.4)}
.apx-rc__view--l{grid-column:1;grid-row:2}
.apx-rc__view--r{grid-column:3;grid-row:2}
.apx-rc__ret{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  transform-origin:center;transition:transform .06s linear;will-change:transform;z-index:1}
.apx-rc__ring{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:2}
.apx-rc__spec{grid-column:2;grid-row:2;align-self:center;text-align:center;margin:0}
.apx-rc__spec dt{font:700 9px/1.2 Montserrat,Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#999;margin-top:.7em}
.apx-rc__spec dd{margin:.1em 0;font-weight:800;color:#202223;font-size:.9em}
.apx-rc__slider{display:flex;align-items:center;gap:1em;max-width:520px;margin:1.6em auto .2em}
.apx-rc__slider .lo,.apx-rc__slider .hi{font:700 .85em/1 Montserrat,Arial,sans-serif;color:#777}
.apx-rc__range{flex:1;accent-color:#d1c18d;cursor:ew-resize;padding:0!important;border:0!important;
  background:none!important;min-height:0!important;height:auto!important;box-shadow:none!important}
.apx-rc__val{font-weight:800;color:#202223;min-width:2.6em;text-align:center}
.apx-rc__hint{text-align:center;font-size:.82em;color:#999;margin:.2em 0 0}

/* ===== Use-case 3-up image grid (CQC / mid-range / 3-gun) ===== */
.apx-usecase{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2em;margin:1.3em 0}
@media(max-width:680px){.apx-usecase{grid-template-columns:1fr}}
.apx-usecase__card img{width:100%;height:auto;display:block;border-radius:8px}
.apx-usecase__cap{text-align:center;font-weight:700;margin:.7em 0 0;color:#202223}

/* ===== Reticle illumination simulator (row 2 of "Choose Your Reticle"):
   scope render | daylight scene + brightness-slider reticle | night-vision view.
   Mirrors arkenopticsusa.com — daylight/night scenes are pre-composited circles
   (scope-rim baked in); the middle overlays a red reticle frame (bright-1..9). ===== */
.apx-rsim{margin:1.8em 0}
.apx-rsim__row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.4em;align-items:center;justify-items:center}
@media(max-width:820px){.apx-rsim__row{grid-template-columns:1fr;gap:1.8em}}
.apx-rsim__col{width:100%;max-width:360px;text-align:center}
.apx-rsim__scope img{width:100%;height:auto;display:block}
.apx-rsim__circle{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 7px 20px rgba(0,0,0,.4)}
.apx-rsim__scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.apx-rsim__ret{position:absolute;top:50%;left:50%;width:62%;height:auto;transform:translate(-50%,-50%);z-index:2;transition:opacity .12s}
.apx-rsim__cap{font-weight:700;margin:.85em 0 .2em;color:#202223}
.apx-rsim__slider{display:flex;align-items:center;gap:1em;margin:.35em auto 0}
.apx-rsim__slider .lo,.apx-rsim__slider .hi{font:700 .85em/1 Montserrat,Arial,sans-serif;color:#777}
.apx-rsim__range{flex:1;accent-color:#d1c18d;cursor:ew-resize;padding:0!important;border:0!important;
  background:none!important;min-height:0!important;height:auto!important;box-shadow:none!important}
.apx-rsim__hint{text-align:center;font-size:.82em;color:#999;margin:.25em 0 0}

/* ===== Dimensions + Downloads product tabs ===== */
.apx-dimtab{max-width:900px;margin:1em auto}
.apx-downtab__list{list-style:none;margin:1em 0;padding:0}
.apx-downtab__list li{display:flex;align-items:center;gap:1em;flex-wrap:wrap;padding:.9em 0;border-bottom:1px solid #eee}
.apx-downtab__name{font-weight:700;color:#202223}
.apx-downtab__btn{margin-left:auto}

/* battery-not-included note (bottom of scope descriptions) */
.apx-note{max-width:820px;margin:1.8em auto 0;padding-top:1em;border-top:1px solid #eee;
  text-align:center;font-size:.86em;color:#777;font-style:italic}