/* Product V2 — delta styles only. Extends the shared .cla3 design system
   (hello-theme-child-master/cla-v3/style.css, loaded first) with ONLY the
   components a product detail page needs that category/home don't already
   define, plus a type-scale pass on inherited body/heading sizes as used
   specifically on this page, realigned 2026-09-15 to match the same split
   ratio used on cla-v3/style.css: H2/H3-level heading selectors (section
   headings, comparison-card names) are +10% over base, everything else
   (paragraphs, labels, badges, review text, FAQ text) is +20% over base —
   the product H1, price and CTA buttons are explicitly excluded and stay
   at the shared scale. Nothing here sets its own font-family — every
   element inherits the body/heading fonts from .cla3 so a future font
   change there applies here automatically. Scoped to .cla3.cpv2 so nothing
   leaks onto the category/home pages that share this stylesheet. */

/* Sits between the hero and the first content section (not inside the
   hero) so it's available without competing with the headline/CTA for
   attention — small and muted, a utility, not a headline. font-size is
   restated on the links themselves (not just the wrapper) because some
   global link-typography rule elsewhere on the site was overriding the
   inherited size on anchor tags specifically. */
.cla3.cpv2 .crumbs{font-size:10.5px;color:var(--muted);padding:12px 18px;margin:0;display:flex;gap:6px;flex-wrap:wrap;text-transform:uppercase;letter-spacing:.04em}
.cla3.cpv2 .crumbs a{color:var(--muted);font-size:10.5px}
.cla3.cpv2 .crumbs span{color:var(--muted);opacity:.65;font-size:10.5px}

.cla3.cpv2 .hero-grid{align-items:start}
.cla3.cpv2 .gallery{background:#fff;border-radius:16px;padding:14px;box-shadow:0 30px 50px -14px rgba(0,0,0,.4)}
.cla3.cpv2 .gallery-main{position:relative;height:360px;display:grid;place-items:center;padding:24px;border-radius:10px;background:linear-gradient(165deg,#E8ECF1 0%,#D9E0E8 55%,#CBD5DF 100%)}
/* width/height (not max-width/max-height) + object-fit:contain: percentage
   max-height on a grid item with place-items:center was resolving against
   the wrong box in this padded grid container and overflowing past the
   bottom edge for square/tall product photos. Explicit width+height keeps
   the element itself always exactly this size; object-fit:contain letterboxes
   the actual image inside it without ever exceeding the box. */
.cla3.cpv2 .gallery-main{overflow:hidden}
.cla3.cpv2 .gallery-main img{width:100%;height:100%;object-fit:contain}
.cla3.cpv2 .gallery-main img.cut{width:88%;height:88%;transform:scale(var(--s,1.45));filter:drop-shadow(0 20px 20px rgba(12,20,30,.28))}
.cla3.cpv2 .gallery .badge{position:absolute;top:12px;left:12px;z-index:1}
.cla3.cpv2 .thumbnails{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding-top:12px}
.cla3.cpv2 .thumbnail{flex:none;border:2px solid transparent;border-radius:9px;background:var(--surface);width:54px;height:54px;padding:3px;overflow:hidden;cursor:pointer}
.cla3.cpv2 .thumbnail.active{border-color:var(--accent)}
.cla3.cpv2 .thumbnail img{display:block;width:100%;height:100%;object-fit:contain}
.cla3.cpv2 .thumbnail.cut img{transform:scale(var(--ts,1.5))}

/* Product headline, price and CTA buttons — excluded from the +20% pass below. */
.cla3.cpv2 .p-info h1{color:#fff;margin:0}
.cla3.cpv2 .p-price{font-size:clamp(28px,3.2vw,38px);font-weight:800;color:#fff;margin-top:18px}
.cla3.cpv2 .p-actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.cla3.cpv2 .p-actions .btn{min-width:160px}

.cla3.cpv2 .p-info .rating{color:#BFD1E9;margin-top:10px;font-size:13px;text-decoration:none;display:inline-block}
.cla3.cpv2 .p-info a.rating{border-bottom:1px solid rgba(191,209,233,.5)}
.cla3.cpv2 .p-info .google-rating{color:#F3C969}
.cla3.cpv2 .p-stock{color:#83E4B5;font-size:15.5px;margin-top:4px;font-weight:600}
.cla3.cpv2 .p-info .spec-row{border-top:1px solid rgba(255,255,255,.16);margin-top:22px}
.cla3.cpv2 .p-info .spec strong{color:#fff;font-size:15px}
.cla3.cpv2 .p-info .spec span{color:#BFD1E9;font-size:11.5px}
.cla3.cpv2 .p-info .spec small{color:#93A9C7;font-size:12px}

.cla3.cpv2 .section{padding:18px}

/* --- type-scale pass on inherited shared components, as used on this
   page only (category/home keep their own base sizes): H2/H3 headings
   +10%, everything else +20% — see file header comment. --- */
.cla3.cpv2 .section-head h2{font-size:22px}
.cla3.cpv2 .section-head p{font-size:15px}
.cla3.cpv2 .comparison .section-head h2{font-size:17.5px}
.cla3.cpv2 .content-block h3{font-size:17.5px}
.cla3.cpv2 .content-block p{font-size:15.5px}
.cla3.cpv2 .lc-text h2{font-size:19.5px}
.cla3.cpv2 .lc-text p{font-size:15px}
.cla3.cpv2 .consultation h2{font-size:17px}
.cla3.cpv2 .awards h2{font-size:16.5px}
.cla3.cpv2 .awards>p{font-size:15px}
.cla3.cpv2 .award-grid strong{font-size:15px}
.cla3.cpv2 .award-grid small{font-size:12.5px}
.cla3.cpv2 .trust{font-size:14.5px}
.cla3.cpv2 .faq-heading h2{font-size:16.5px}
.cla3.cpv2 .faq>p{font-size:14.5px}
.cla3.cpv2 .faq summary{font-size:15.5px}
.cla3.cpv2 .faq details div{font-size:15px}
.cla3.cpv2 .lede{font-size:18px}
.cla3.cpv2 .three-cards h3{font-size:15.5px}
.cla3.cpv2 .three-cards .position{font-size:14px}
.cla3.cpv2 .three-cards .price{font-size:19px;display:block;margin-top:6px}

.cla3.cpv2 .review-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 16px}
.cla3.cpv2 .review-card{flex:0 0 min(300px,82vw);scroll-snap-align:start;border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--paper)}
.cla3.cpv2 .review-card header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.cla3.cpv2 .review-card strong{font-size:15.5px}
.cla3.cpv2 .review-card strong small{display:block;font-size:12.5px;font-weight:400;color:var(--muted);margin-top:2px}
.cla3.cpv2 .review-card .stars{color:var(--star);font-size:14.5px;white-space:nowrap}
.cla3.cpv2 .review-card p{color:var(--muted);font-size:15px;line-height:1.55;margin-top:12px}
.cla3.cpv2 .review-tag{display:block;margin-top:12px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#B5860F}
.cla3.cpv2 .read-reviews{font-weight:700;color:var(--accent-ink);font-size:15px;display:inline-block;margin-top:4px}
.cla3.cpv2 .google-link-line{margin-bottom:14px}
.cla3.cpv2 .google-link-line a{color:var(--accent-ink);font-weight:700;font-size:14px}

.cla3.cpv2 .feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cla3.cpv2 .feature{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--paper)}
.cla3.cpv2 .feature i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--air-bg);color:var(--air);font-weight:800;font-style:normal}
.cla3.cpv2 .feature p{margin-top:12px;font-size:15px;color:var(--ink);line-height:1.5}

/* Base .cla3 table{min-width:800px} exists for the wide comparison table,
   which is meant to horizontal-scroll — this is a plain 2-column spec
   list that should just fit and wrap, so it must not inherit that. */
.cla3.cpv2 .spec-table{min-width:0;width:100%;table-layout:fixed}
.cla3.cpv2 .spec-table td{font-size:15px;word-break:break-word}
.cla3.cpv2 .spec-table td:first-child{color:var(--muted);width:44%}
.cla3.cpv2 .spec-table td:last-child{font-weight:700;text-align:right}

.cla3.cpv2 .three-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.cla3.cpv2 .three-cards .cla3-card{display:flex;flex-direction:column;min-width:0}
.cla3.cpv2 .compare-actions{display:flex;gap:8px;margin-top:auto;padding-top:16px}
.cla3.cpv2 .compare-actions a,.cla3.cpv2 .compare-actions span{flex:1;border:1px solid var(--line);border-radius:8px;padding:9px 10px;text-align:center;font-size:14px;font-weight:700;color:var(--accent-ink);display:flex;align-items:center;justify-content:center}
.cla3.cpv2 .compare-actions span{color:var(--muted);background:var(--surface);border:0}
.cla3.cpv2 .compare-actions .wa-icon{flex:0 0 40px;background:var(--wa);color:#fff;border:0}
/* var(--surface), not a hardcoded light hex — .cla3-card h3/.position already
   correctly follow var(--ink) (dark-mode aware), so the background must be
   dark-mode aware too or the two go white-on-white / invisible in dark mode. */
.cla3.cpv2 .cla3-card.current{border:2px solid var(--accent);background:var(--surface)}

.cla3.cpv2 .about-grid{display:grid;grid-template-columns:1fr 280px;gap:28px;align-items:start}
.cla3.cpv2 .about-copy{min-width:0}
.cla3.cpv2 .about-visual{height:260px;padding:16px;min-width:0}
.cla3.cpv2 .about-visual img{width:82%;height:82%;object-fit:contain}
.cla3.cpv2 .about p{color:var(--muted);font-size:15.5px;line-height:1.65;margin-top:8px}
.cla3.cpv2 .about h3{font-size:16.5px;margin:18px 0 4px;color:var(--ink)}
.cla3.cpv2 .about a{color:var(--accent-ink);font-weight:700}

.cla3.cpv2 .native-tabs{max-width:1120px;margin:0 auto;padding:30px 24px 60px}

@media(max-width:860px){.cla3.cpv2 .feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.cla3.cpv2 .gallery-main{height:280px}.cla3.cpv2 .about-grid{grid-template-columns:1fr}.cla3.cpv2 .about-visual{order:-1;height:200px}}
@media(max-width:640px){
  .cla3.cpv2 .three-cards{display:flex;overflow-x:auto;scroll-snap-type:x proximity}
  .cla3.cpv2 .three-cards .cla3-card{flex:0 0 82vw;scroll-snap-align:start}
  .cla3.cpv2 .feature-grid{grid-template-columns:1fr 1fr}
  .cla3.cpv2 .p-actions .btn{flex:1;min-width:0}
}
@media(max-width:420px){.cla3.cpv2 .feature-grid{grid-template-columns:1fr}}


/* --- Technical spec (visual), HEPASilent, app features, app download --- */
.cla3.cpv2 .techspec-visual{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.cla3.cpv2 .techspec-visual-media{flex:1 1 280px;max-width:360px}
.cla3.cpv2 .techspec-visual-media img{width:100%;height:auto;display:block;border-radius:12px}
.cla3.cpv2 .techspec-visual-list{flex:1 1 320px;list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cla3.cpv2 .techspec-visual-list li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.cla3.cpv2 .techspec-label{color:var(--muted)}
.cla3.cpv2 .techspec-value{font-weight:600;text-align:right}

.cla3.cpv2 .hepasilent{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.cla3.cpv2 .hepasilent-copy{flex:1 1 320px}
.cla3.cpv2 .hepasilent.no-media .hepasilent-copy{flex:1 1 100%}
.cla3.cpv2 .hepasilent-media{flex:1 1 320px;max-width:480px}
.cla3.cpv2 .hepasilent-media iframe,.cla3.cpv2 .hepasilent-media video{width:100%;aspect-ratio:16/9;border-radius:12px;display:block}

.cla3.cpv2 .app-features-body ul{margin:0;padding-left:1.2em}
.cla3.cpv2 .app-features-body li{margin-bottom:6px}

.cla3.cpv2 .app-store-buttons{display:flex;gap:14px;flex-wrap:wrap}
.cla3.cpv2 .app-store-badge{display:inline-flex;align-items:center;padding:10px 18px;border-radius:10px;background:var(--navy);color:#fff!important;font-weight:600;font-size:14px}
.cla3.cpv2 .app-store-badge:hover{background:var(--navy-2)}

/* --- Sections below the hero (2026-10-10): at a glance, video, feature story, running cost, grouped specs --- */
.cla3.cpv2 .pdp-glance{padding-top:6px}
.cla3.cpv2 .pdp-glance-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.cla3.cpv2 .pdp-glance-grid{background:linear-gradient(160deg,#0C2A4D 0%,#123863 55%,#1c4d82 100%);border-radius:16px;padding:14px}
.cla3.cpv2 .pdp-g{position:relative;background:linear-gradient(165deg,#EAF2FD 0%,#CFE1F9 100%);border:1px solid #BCD4F4;border-radius:12px;padding:18px 10px 14px;text-align:center;min-width:0;overflow:hidden}
.cla3.cpv2 .pdp-g:before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--accent)}
.cla3.cpv2 .pdp-g strong{display:block;font:800 18px/1.2 Outfit,sans-serif;color:#0C2A4D}
.cla3.cpv2 .pdp-g span{display:block;margin-top:6px;font-size:12.5px;font-weight:600;color:#3B5F8F}

.cla3.cpv2 .pdp-vid-main{max-width:760px;margin:0 auto}
.cla3.cpv2 .pdp-sub{font-size:17px;margin:26px 0 12px;color:var(--ink)}
.cla3.cpv2 .pdp-vid-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cla3.cpv2 .pdp-vid{min-width:0}
.cla3.cpv2 .pdp-vid p{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.4}
.cla3.cpv2 .pdp-vid.big p{font-size:15px;text-align:center}
.cla3.cpv2 .pdp-vid-btn{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:12px;overflow:hidden;background:#0C2A4D;cursor:pointer}
.cla3.cpv2 .pdp-vid-btn img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.cla3.cpv2 .pdp-vid-btn iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cla3.cpv2 .pdp-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(12,42,77,.86);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.cla3.cpv2 .pdp-play:after{content:'';position:absolute;left:25px;top:19px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #fff}
.cla3.cpv2 .pdp-vid:not(.big) .pdp-play{width:46px;height:46px;margin:-23px 0 0 -23px}
.cla3.cpv2 .pdp-vid:not(.big) .pdp-play:after{left:18px;top:13px;border-width:10px 0 10px 16px}

.cla3.cpv2 .pdp-row{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;padding:22px 0;border-top:1px solid var(--line)}
.cla3.cpv2 .pdp-row:first-of-type{border-top:0}
.cla3.cpv2 .pdp-row.rev .pdp-pic{order:2}
.cla3.cpv2 .pdp-pic{margin:0;border-radius:16px;overflow:hidden;background:var(--surface);min-width:0}
.cla3.cpv2 .pdp-pic img{display:block;width:100%;height:auto}
.cla3.cpv2 .pdp-pic.contain{display:grid;place-items:center;aspect-ratio:1/1;background:linear-gradient(165deg,#E8ECF1 0%,#D9E0E8 55%,#CBD5DF 100%)}
.cla3.cpv2 .pdp-pic.contain img{width:100%;height:100%;object-fit:contain;transform:scale(1.55);filter:drop-shadow(0 20px 20px rgba(12,20,30,.25))}
.cla3.cpv2 .pdp-txt{min-width:0}
.cla3.cpv2 .pdp-tag{display:inline-block;font:700 11.5px Outfit,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--air);background:var(--air-bg);border-radius:6px;padding:4px 9px}
.cla3.cpv2 .pdp-txt h3{font-size:22px;margin:12px 0 10px;color:var(--ink)}
.cla3.cpv2 .pdp-txt p{font-size:16px;line-height:1.65;color:var(--muted)}
.cla3.cpv2 .pdp-txt ul{list-style:none;margin:14px 0 0;padding:0}
.cla3.cpv2 .pdp-txt li{position:relative;padding-left:24px;margin-bottom:7px;font-size:15px;color:var(--ink)}
.cla3.cpv2 .pdp-txt li:before{content:'\2713';position:absolute;left:0;color:var(--air);font-weight:800}

.cla3.cpv2 .pdp-cost .cla-card h3{font-size:16px;margin-bottom:6px}
.cla3.cpv2 .pdp-cost .pdp-big{font:800 30px/1.1 Outfit,sans-serif;color:var(--ink);margin-bottom:10px}
.cla3.cpv2 .pdp-cost .cla-card p:last-child{font-size:14.5px;line-height:1.55;color:var(--muted)}
.cla3.cpv2 .pdp-cost .cla-card.tint-amber{background:#fff7e8;border-color:#f5e3bd}

.cla3.cpv2 .pdp-spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.cla3.cpv2 .pdp-spec-card{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--paper);min-width:0}
.cla3.cpv2 .pdp-spec-card h3{font-size:16.5px;margin-bottom:6px;color:var(--ink)}
.cla3.cpv2 .pdp-spec-card dl{margin:0}
.cla3.cpv2 .pdp-spec-card dl>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.cla3.cpv2 .pdp-spec-card dl>div:last-child{border-bottom:0}
.cla3.cpv2 .pdp-spec-card dt{font-size:15px;color:var(--ink);min-width:0}
.cla3.cpv2 .pdp-spec-card dt small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.cla3.cpv2 .pdp-spec-card dd{margin:0;font-weight:700;font-size:15px;text-align:right;white-space:nowrap}

@media(max-width:900px){.cla3.cpv2 .pdp-glance-grid{grid-template-columns:repeat(3,1fr)}.cla3.cpv2 .pdp-row{gap:22px}}
@media(max-width:720px){
  .cla3.cpv2 .pdp-row{grid-template-columns:1fr;gap:16px}
  .cla3.cpv2 .pdp-row.rev .pdp-pic{order:0}
  .cla3.cpv2 .pdp-txt h3{font-size:20px}
  .cla3.cpv2 .pdp-vid-row{grid-template-columns:1fr}
  .cla3.cpv2 .pdp-spec-grid{grid-template-columns:1fr}
  .cla3.cpv2 .pdp-spec-card dd{white-space:normal}
}
@media(max-width:420px){.cla3.cpv2 .pdp-glance-grid{grid-template-columns:repeat(2,1fr)}}

/* Hide the empty guidance group when a product has no sizing_guidance (leaves a blank gap otherwise) */
.cla3.cpv2 .guide:not(:has(.content-block)){display:none}

/* Hero gallery fix (2026-10-11): the image box used height:100% inside an auto-height grid row, so square and
   tall images grew past the 360px frame and were clipped. Absolute inset gives the image a definite size;
   object-fit:contain letterboxes it. Hover zoom follows the pointer (--ox/--oy); tap toggles on touch. */
.cla3.cpv2 .gallery>.gallery-main{cursor:zoom-in;overflow:hidden}
.cla3.cpv2 .gallery>.gallery-main img{position:absolute;inset:24px;width:calc(100% - 48px);height:calc(100% - 48px);object-fit:contain;transform:scale(calc(var(--s,1) * var(--z,1)));transform-origin:var(--ox,50%) var(--oy,50%);transition:transform .18s ease-out;will-change:transform}
.cla3.cpv2 .gallery>.gallery-main.zoom{cursor:zoom-out}
.cla3.cpv2 .gallery>.gallery-main.zoom img{--z:2.2;transition:transform .18s ease-out}
.cla3.cpv2 .gallery>.gallery-main .zoom-hint{position:absolute;right:12px;bottom:10px;z-index:1;font-size:12px;color:#5d6876;background:rgba(255,255,255,.85);padding:3px 9px;border-radius:99px;pointer-events:none}
.cla3.cpv2 .gallery>.gallery-main.zoom .zoom-hint{display:none}
@media(max-width:680px){.cla3.cpv2 .gallery>.gallery-main.zoom{touch-action:none}}