/* ==========================================================
   product-page.css — JYL linealight-style product page
   ----------------------------------------------------------
   Consumed via wp_register_style handle: jyl-product-page
   Tokens: uses the --jyl-* design tokens from functions.php.
   Breakpoints: 598 / 898 / 1198 (matching base.css).
   Dark mode: token remapping in dark-mode.css covers most of
   it; explicit .jyl-dark overrides only where surfaces differ.
   ========================================================== */

/* ──────────────────────────────────────────────
   0. Shared primitives
   ────────────────────────────────────────────── */

/* v1.3.22 — [hidden] hardening.
   The UA rule [hidden]{display:none} loses to ANY author display value
   (e.g. .jyl-pp-comparebar{display:flex}), so JS toggling the hidden
   attribute silently stopped working: the compare bar never hid (its
   "Close" appeared to only clear ticks) and the bar "Reset filters"
   button showed with no active filters. This rule restores the contract
   for every module element, incl. the body-portaled drawer/compare. */
[data-jyl-pp-codes] [hidden],
.jyl-pp-comparebar[hidden],
.jyl-pp-drawer[hidden],
.jyl-pp-drawer [hidden],
.jyl-pp-compare[hidden],
.jyl-pp-compare [hidden]{display:none!important}

.jyl-pp-grid{
    display:grid;grid-template-columns:repeat(4,1fr);
    column-gap:var(--jyl-gap-sm);row-gap:var(--jyl-gap-md);
    width:100%;max-width:var(--jyl-max-w);margin-inline:auto;
    padding-inline:12px;
}
@media(min-width:598px){.jyl-pp-grid{grid-template-columns:repeat(12,1fr);column-gap:var(--jyl-gap-md);padding-inline:24px}}
@media(min-width:898px){.jyl-pp-grid{column-gap:var(--jyl-gap-lg);padding-inline:32px}}

/* count pill ("30") */
.jyl-pp-count{
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    min-width:24px;min-height:24px;padding:5px;border-radius:var(--jyl-radius-full);
    font-size:var(--jyl-fs-12);font-weight:var(--jyl-fw-medium);line-height:1;
    background:var(--jyl-beige-light);color:var(--jyl-black);
}
.jyl-pp-count--neutral{background:var(--jyl-beige-medium)}
.jyl-dark .jyl-pp-count{background:var(--jyl-grey-medium);color:var(--jyl-white)}

/* badges */
.jyl-pp-badge{
    display:inline-block;padding:4px 8px;border-radius:var(--jyl-radius-full);
    font-size:var(--jyl-fs-12);font-weight:var(--jyl-fw-medium);line-height:1;
    text-transform:uppercase;letter-spacing:var(--jyl-ls-md);text-align:center;
}
@media(min-width:898px){.jyl-pp-badge{padding:5px 16px;font-size:var(--jyl-fs-14)}}
.jyl-pp-badge--success{background:#E3F6E0;color:var(--jyl-blue)}
.jyl-pp-badge--neutral{background:var(--jyl-beige-light);color:var(--jyl-black)}
.jyl-pp-badge--blue{background:var(--jyl-blue);color:var(--jyl-white)}

/* round finish swatch */
.jyl-pp-swatch{
    display:inline-block;aspect-ratio:1;border-radius:var(--jyl-radius-full);
    border:1px solid #E2E1E166;box-shadow:inset 0 4px 4px rgba(0,0,0,.25);
    background-repeat:no-repeat;flex-shrink:0;padding:0;
    transition:border-color var(--jyl-t200) var(--jyl-ease);
}
.jyl-pp-swatch--sm{height:16px;width:16px}
.jyl-pp-swatch--lg{height:24px;width:24px}
button.jyl-pp-swatch{cursor:pointer}
button.jyl-pp-swatch[aria-current="true"]{border-color:var(--jyl-blue);box-shadow:0 0 0 1px var(--jyl-blue)}

/* round icon button with blue scale-in hover (linealight pattern) */
.jyl-pp-iconbtn{
    position:relative;display:inline-flex;align-items:center;justify-content:center;
    border:0;border-radius:var(--jyl-radius-full);cursor:pointer;z-index:0;
    background:var(--jyl-beige-medium);color:var(--jyl-black);
    transition:color var(--jyl-t200) var(--jyl-ease);
}
.jyl-pp-iconbtn::after{
    content:"";position:absolute;inset:0;border-radius:var(--jyl-radius-full);
    background:var(--jyl-blue);opacity:0;transform:scale(0);
    transition:opacity var(--jyl-t200) var(--jyl-ease),transform var(--jyl-t200) var(--jyl-ease);
}
.jyl-pp-iconbtn:hover{color:var(--jyl-white)}
.jyl-pp-iconbtn:hover::after{opacity:1;transform:scale(1.1)}
.jyl-pp-iconbtn__icon{position:relative;z-index:1;display:inline-flex}
.jyl-pp-iconbtn__icon svg{width:1rem;height:1rem}
.jyl-pp-iconbtn--sm{width:24px;height:24px}
.jyl-pp-iconbtn--lg{width:40px;height:40px}
.jyl-pp-iconbtn--ghost{background:transparent}
.jyl-dark .jyl-pp-iconbtn{background:var(--jyl-grey-medium);color:var(--jyl-white)}
.jyl-dark .jyl-pp-iconbtn--ghost{background:transparent}

/* outline button variant (Related "Details") */
.jyl-pp-btn--outline{
    background:transparent!important;color:var(--jyl-grey-dark)!important;
    border:1px solid var(--jyl-grey-dark)!important;
}
.jyl-pp-btn--outline:hover{background:var(--jyl-beige-medium)!important}
.jyl-dark .jyl-pp-btn--outline{color:var(--jyl-white)!important;border-color:var(--jyl-grey-light)!important}
.jyl-dark .jyl-pp-btn--outline:hover{background:var(--jyl-grey-dark)!important;border-color:rgba(255,255,255,.45)!important}

/* editor-only notice */
.jyl-pp-editor-notice{
    margin:8px 0;padding:12px 16px;border:1px dashed var(--jyl-grey-xlight);
    border-radius:var(--jyl-radius-sm);font-size:var(--jyl-fs-12);color:var(--jyl-grey-light);
}

/* ──────────────────────────────────────────────
   1. View switching (Details / Codes)
   CSS default = details view; JS sets body class.
   ────────────────────────────────────────────── */
.jyl-pp-view--codes{display:none}
body.jyl-pp--codes .jyl-pp-view--codes{display:block}
body.jyl-pp--codes .jyl-pp-view--details{display:none}

/* v1.3.23 — collapse the Elementor WRAPPERS too.
   Each jyl-pp-view section sits inside an Elementor container
   (.e-con / e-flexbox). Hiding only the inner section leaves the
   wrapper's default padding behind — the empty ~20px strips
   (elementor-element-04b84ec etc.) visible after switching views.
   These rules fold away any wrapper whose only JYL content is a
   section hidden in the CURRENT view. Guards: the sticky-nav wrapper
   is always visible; on code pages the codes wrapper hosts the
   rendered code view (jyl-pp-view--code) and must stay. */
body.jyl-pp--codes .e-con:has(.jyl-pp-view--details):not(:has(.jyl-pp-view--codes)):not(:has(.jyl-pp-nav)){display:none}
body:not(.jyl-pp--codes):not(.jyl-pp--code) .e-con:has(.jyl-pp-view--codes):not(:has(.jyl-pp-view--details)):not(:has(.jyl-pp-nav)){display:none}
body.jyl-pp--code .e-con:has(.jyl-pp-view--details):not(:has(.jyl-pp-view--code)):not(:has(.jyl-pp-nav)){display:none}
body.jyl-pp--code .e-con:has(.jyl-pp-view--codes):not(:has(.jyl-pp-view--code)):not(:has(.jyl-pp-nav)){display:none}

/* ──────────────────────────────────────────────
   2. Sticky Nav
   ────────────────────────────────────────────── */
.jyl-pp-nav{
    position:sticky;top:var(--jyl-hdr-h);z-index:40;
    background:var(--jyl-beige-xlight);
    border-bottom:1px solid var(--jyl-beige-medium);
    transition:background-color var(--jyl-t200) var(--jyl-ease);
}
body.jyl-pp--codes .jyl-pp-nav{background:var(--jyl-surface,var(--rey-body-bg))}
.jyl-dark .jyl-pp-nav{background:var(--jyl-grey-dark);border-color:var(--jyl-grey-medium)}
.jyl-dark body.jyl-pp--codes .jyl-pp-nav,
body.jyl-pp--codes.jyl-dark .jyl-pp-nav{background:var(--jyl-black)}

.jyl-pp-nav__inner{
    display:flex;align-items:flex-end;gap:16px;
    max-width:var(--jyl-max-w);margin-inline:auto;
    padding:12px;flex-wrap:wrap;
}
@media(min-width:898px){.jyl-pp-nav__inner{padding:32px 32px 16px;flex-wrap:nowrap}}

.jyl-pp-nav__crumb{
    font-size:var(--jyl-fs-10);text-transform:uppercase;letter-spacing:var(--jyl-ls-sm);
    color:var(--jyl-black);transition:opacity var(--jyl-t200) var(--jyl-ease);
}
.jyl-pp-nav__crumb:hover{opacity:.5}
@media(min-width:898px){.jyl-pp-nav__crumb{font-size:var(--jyl-fs-12)}}
.jyl-dark .jyl-pp-nav__crumb{color:var(--jyl-white)}

.jyl-pp-nav__titleRow{display:flex;align-items:center;gap:8px;margin-top:8px}
@media(min-width:898px){.jyl-pp-nav__titleRow{gap:16px}}
.jyl-pp-nav__title{
    font-size:var(--jyl-fs-20);font-weight:var(--jyl-fw-medium);line-height:1;
    color:var(--jyl-black);
}
@media(min-width:898px){.jyl-pp-nav__title{font-size:var(--jyl-fs-32)}}
.jyl-dark .jyl-pp-nav__title{color:var(--jyl-white)}

.jyl-pp-nav__chevron{
    margin-left:auto;border:0;background:none;cursor:pointer;padding:4px;
    color:var(--jyl-black);transition:transform var(--jyl-t200) var(--jyl-ease);
}
.jyl-pp-nav__chevron svg{width:1.5rem;height:1.5rem}
.jyl-pp-nav__chevron[aria-expanded="true"]{transform:rotate(180deg)}
.jyl-dark .jyl-pp-nav__chevron{color:var(--jyl-white)}
@media(min-width:898px){.jyl-pp-nav__chevron{display:none!important}}

.jyl-pp-nav__tabs{
    display:none;list-style:none;margin:0;padding:0;gap:24px;width:100%;
}
.jyl-pp-nav.is-open .jyl-pp-nav__tabs{display:flex;flex-direction:column;gap:12px;padding-top:12px}
@media(min-width:898px){
    .jyl-pp-nav__tabs{display:flex;width:auto;margin-left:auto;gap:32px}
    .jyl-pp-nav.is-open .jyl-pp-nav__tabs{flex-direction:row;padding-top:0}
}
.jyl-pp-nav__tab{
    position:relative;border:0;background:none;cursor:pointer;padding:0 0 8px;
    font-size:var(--jyl-fs-14);font-weight:var(--jyl-fw-medium);font-family:var(--jyl-font);
    color:var(--jyl-black);
}
.jyl-dark .jyl-pp-nav__tab{color:var(--jyl-white)}
.jyl-pp-nav__line{
    position:absolute;bottom:0;left:0;height:1px;width:100%;background:currentColor;
    opacity:0;transform:scaleX(0);transform-origin:left;
    transition:opacity var(--jyl-t200) var(--jyl-ease),transform var(--jyl-t300) var(--jyl-ease);
}
.jyl-pp-nav__tab.is-active .jyl-pp-nav__line{opacity:1;transform:scaleX(1)}

/* ──────────────────────────────────────────────
   3. Hero
   ────────────────────────────────────────────── */
.jyl-pp-hero{
    background:var(--jyl-beige-xlight);padding:12px 0 24px;
    transition:background-color var(--jyl-t200) var(--jyl-ease);
}
@media(min-width:898px){.jyl-pp-hero{padding:32px 0}}
.jyl-dark .jyl-pp-hero{background:var(--jyl-grey-dark)}

.jyl-pp-hero__media{grid-column:1/-1}
@media(min-width:898px){.jyl-pp-hero__media{grid-column:span 6}}

.jyl-pp-hero__frame{
    position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--jyl-radius-lg);
    background:var(--jyl-white);
}
.jyl-dark .jyl-pp-hero__frame{background:var(--jyl-grey-medium)}
.jyl-pp-hero__imgwrap{position:absolute;inset:0;transition:opacity var(--jyl-t300) var(--jyl-ease)}
.jyl-pp-hero__imgwrap.is-fading{opacity:0}
.jyl-pp-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

.jyl-pp-hero__swatches{
    position:absolute;left:50%;transform:translateX(-50%);bottom:24px;
    display:flex;flex-direction:column;align-items:center;gap:8px;
}
@media(min-width:898px){.jyl-pp-hero__swatches{bottom:48px}}
.jyl-pp-hero__finishName{
    display:none;font-size:var(--jyl-fs-16);letter-spacing:var(--jyl-ls-md);
    text-align:center;color:var(--jyl-black);
}
@media(min-width:898px){.jyl-pp-hero__finishName{display:block}}
.jyl-dark .jyl-pp-hero__finishName{color:var(--jyl-white)}
.jyl-pp-hero__swatchRow{display:flex;gap:8px}
@media(min-width:898px){.jyl-pp-hero__swatchRow{gap:16px}}

.jyl-pp-hero__content{
    grid-column:1/-1;display:flex;flex-direction:column;justify-content:center;padding-top:24px;
}
@media(min-width:898px){.jyl-pp-hero__content{grid-column:8/span 4;padding-top:40px}}

.jyl-pp-hero__titleRow{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.jyl-pp-hero__titleRow .jyl-pp-hero__title{margin:0}
@media(min-width:898px){.jyl-pp-hero__titleRow{margin-bottom:16px}}
.jyl-pp-hero__title{font-size:var(--jyl-fs-24);color:var(--jyl-black)}
@media(min-width:898px){.jyl-pp-hero__title{font-size:var(--jyl-fs-48)}}
.jyl-dark .jyl-pp-hero__title{color:var(--jyl-white)}

.jyl-pp-hero__subtitle{
    font-size:var(--jyl-fs-14);font-weight:var(--jyl-fw-medium);
    color:var(--jyl-black);margin-bottom:8px;
}
@media(min-width:898px){.jyl-pp-hero__subtitle{font-size:var(--jyl-fs-16)}}
/* v1.3.24 — dark-mode.css remaps beige tokens to DARK surface tones
   (#2a2a2a…), so using them as TEXT colour in .jyl-dark rules rendered
   near-invisible dark-on-black. Text in dark mode uses white / white-alpha. */
.jyl-dark .jyl-pp-hero__subtitle{color:var(--jyl-white)}

.jyl-pp-hero__descInner{
    font-size:var(--jyl-fs-12);font-weight:var(--jyl-fw-light);
    line-height:var(--jyl-lh-normal);color:var(--jyl-grey-light);
}
@media(min-width:898px){
    .jyl-pp-hero__descInner{font-size:var(--jyl-fs-16);font-weight:var(--jyl-fw-regular)}
}
.jyl-dark .jyl-pp-hero__descInner{color:rgba(255,255,255,.75)}

/* mobile clamp + expand */
@media(max-width:897px){
    .jyl-pp-hero__desc[data-jyl-pp-desc] .jyl-pp-hero__descInner{
        display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
        transition:max-height var(--jyl-t300) var(--jyl-ease);
    }
    .jyl-pp-hero__desc.is-open .jyl-pp-hero__descInner{-webkit-line-clamp:unset;display:block}
}
.jyl-pp-hero__descToggle{
    display:flex;margin:8px auto 0;border:0;background:none;cursor:pointer;
    color:var(--jyl-black);transition:transform var(--jyl-t200) var(--jyl-ease);
}
.jyl-pp-hero__descToggle svg{width:1rem;height:1rem}
.jyl-pp-hero__desc.is-open .jyl-pp-hero__descToggle{transform:rotate(180deg)}
.jyl-dark .jyl-pp-hero__descToggle{color:var(--jyl-white)}
@media(min-width:898px){.jyl-pp-hero__descToggle{display:none!important}}

.jyl-pp-hero__cta{margin-top:24px}
@media(min-width:898px){.jyl-pp-hero__cta{margin-top:32px}}
.jyl-pp-hero__ctaBtn{width:100%}
@media(min-width:898px){.jyl-pp-hero__ctaBtn{width:auto}}
/* The theme defines .jyl-btn (shape) and .jyl-btn--dark (dark fill) but NOT
   .jyl-btn--blue, so this CTA fell back to the bare shape with a transparent
   fill — reading as plain text. Paint the blue fill here. The double class
   (.jyl-pp-hero__ctaBtn.jyl-btn = 0,2,0) out-specifies the theme's single-class
   .jyl-btn (0,1,0) so load order can't strip it; padding / radius / font stay
   inherited from .jyl-btn, keeping it visually consistent with the dark buttons. */
/* The theme defines .jyl-btn (class) and .jyl-btn--dark (dark fill) but NOT
   .jyl-btn--blue, and its base .jyl-btn gives no fill / radius / padding — so
   this CTA read first as plain text, then as a sharp tight rectangle. Paint the
   full pill ourselves. Double class (0,2,0) out-specifies the theme's single
   .jyl-btn (0,1,0) so load order can't strip it. */
.jyl-pp-hero__ctaBtn.jyl-btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:16px 32px;
    border:0;border-radius:var(--jyl-radius-md);
    background:var(--jyl-blue);
    color:var(--jyl-white);
    font-weight:var(--jyl-fw-medium);
    letter-spacing:var(--jyl-ls-md);
}
.jyl-pp-hero__ctaBtn.jyl-btn:hover,
.jyl-pp-hero__ctaBtn.jyl-btn:focus-visible{background:var(--jyl-blue);filter:brightness(.92)}

/* ──────────────────────────────────────────────
   4. Banner
   ────────────────────────────────────────────── */
.jyl-pp-banner__frame{position:relative;overflow:hidden;aspect-ratio:9/14}
@media(min-width:898px){.jyl-pp-banner__frame{aspect-ratio:16/9}}
.jyl-pp-banner__inner{position:absolute;inset:0}
.jyl-pp-banner__inner[data-jyl-pp-parallax]{transform:scale(1.2)}
.jyl-pp-banner__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jyl-pp-banner__dl{position:absolute;bottom:20px;right:24px;z-index:10}
@media(min-width:898px){.jyl-pp-banner__dl{bottom:36px;right:40px}}

/* ──────────────────────────────────────────────
   5. Editorial
   ────────────────────────────────────────────── */
.jyl-pp-editorial{padding:24px 0}
@media(min-width:898px){.jyl-pp-editorial{padding:120px 0}}
.jyl-pp-editorial .jyl-pp-grid{row-gap:16px}
@media(min-width:898px){.jyl-pp-editorial .jyl-pp-grid{row-gap:56px}}

.jyl-pp-editorial__lede{grid-column:1/-1;color:var(--jyl-black)}
@media(min-width:898px){.jyl-pp-editorial__lede{grid-column:2/span 10}}
.jyl-pp-editorial__lede p{
    font-size:var(--jyl-fs-20);line-height:1.4;margin-bottom:.6em;
}
@media(min-width:898px){.jyl-pp-editorial__lede p{font-size:var(--jyl-fs-32);line-height:1.5}}
.jyl-pp-editorial__lede strong{font-weight:var(--jyl-fw-medium)}
.jyl-dark .jyl-pp-editorial__lede{color:var(--jyl-white)}

.jyl-pp-editorial__body{grid-column:1/-1;color:var(--jyl-black)}
@media(min-width:898px){.jyl-pp-editorial__body{grid-column:2/span 5}}
.jyl-pp-editorial__body p{
    font-size:var(--jyl-fs-14);line-height:var(--jyl-lh-relaxed);margin-bottom:1em;
}
@media(min-width:898px){.jyl-pp-editorial__body p{font-size:var(--jyl-fs-16)}}
.jyl-pp-editorial__body a{color:var(--jyl-blue)}
.jyl-pp-editorial__body a:hover{opacity:.5}
.jyl-pp-editorial__body strong{font-weight:var(--jyl-fw-bold)}
.jyl-dark .jyl-pp-editorial__body{color:var(--jyl-white)}
.jyl-dark .jyl-pp-editorial__body a{color:var(--jyl-blue-light)}

.jyl-pp-editorial__media{grid-column:1/-1;margin-top:16px}
@media(min-width:898px){.jyl-pp-editorial__media{grid-column:8/span 4;margin-top:0}}
.jyl-pp-editorial__frame{
    position:relative;isolation:isolate;overflow:hidden;
    border-radius:var(--jyl-radius-md);aspect-ratio:1;
}
.jyl-pp-editorial__inner{position:absolute;inset:0}
.jyl-pp-editorial__inner[data-jyl-pp-parallax]{transform:scale(1.2)}

/* Parallax wrappers for hero / gallery / related. The JS (initPPParallax)
   handles any [data-jyl-pp-parallax] generically — no JS change needed; these
   just establish the inner box and the 1.2 pre-scale so the ±10% scroll travel
   stays covered, exactly like banner/editorial. */
.jyl-pp-gallery__inner,
.jyl-pp-card__inner{position:absolute;inset:0}
.jyl-pp-hero__imgwrap[data-jyl-pp-parallax],
.jyl-pp-gallery__inner[data-jyl-pp-parallax],
.jyl-pp-card__inner[data-jyl-pp-parallax]{transform:scale(1.2)}
.jyl-pp-editorial__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ──────────────────────────────────────────────
   6. Gallery
   ────────────────────────────────────────────── */
/* Self-center to the page content column like every other section (hero /
   banner / editorial / codes / related-head all do max-width:var(--jyl-max-w)
   + margin-inline:auto). The gallery was the only section without it, so it
   stretched to whatever width the surrounding Elementor container happened to
   be — full-bleeding to the left on wide/full-width containers. With this it
   aligns left with the rest of the page; the swiper's overflow:visible still
   lets cards bleed off to the RIGHT for the horizontal-scroll look. */
.jyl-pp-gallery{padding:24px 0;max-width:var(--jyl-max-w);margin-inline:auto}
@media(min-width:1198px){.jyl-pp-gallery{padding:32px 0}}
/* `.jyl-pp-gallery__swiper` is also a bare `.swiper`; Swiper core ships
   `.swiper{padding:0;overflow:hidden}` at EQUAL single-class specificity and
   loads after this stylesheet, so it zeroed our padding-left (measured 0px in
   the wild) and clipped the bleed — the first card lost its left inset and sat
   flush with the content edge instead of indented like every other section.
   Scope under the section (0,2,0) to out-specify Swiper's `.swiper` (0,1,0). */
.jyl-pp-gallery .jyl-pp-gallery__swiper{overflow:visible;padding-left:12px}
/* layout survives even if the Swiper stylesheet handle is missing */
.jyl-pp-gallery__swiper .swiper-wrapper{display:flex}
.jyl-pp-gallery__swiper .swiper-slide{flex-shrink:0}
@media(min-width:898px){.jyl-pp-gallery .jyl-pp-gallery__swiper{padding-left:32px}}
/* Swiper core CSS ships `.swiper-slide{width:100%}` at the SAME single-class
   specificity as our slide — so by stylesheet load order Swiper's 100% can win,
   making every slide fill the viewport and collapsing slidesPerView:'auto' to a
   single visible card (the rest pushed off-screen right). Scope the width under
   the swiper to out-specify Swiper, and pin the real width on the SLIDE itself —
   Swiper 'auto' measures the slide's own width, not the card's. --jyl-ratio is
   set on the slide in markup for exactly this. */
.jyl-pp-gallery__swiper .jyl-pp-gallery__slide{width:80vw;height:auto}
@media(min-width:898px){
    .jyl-pp-gallery__swiper .jyl-pp-gallery__slide{width:calc(80vh * var(--jyl-ratio,0.75));height:80vh}
}
.jyl-pp-gallery__slide:last-child{padding-right:32px}
@media(min-width:898px){.jyl-pp-gallery__slide:last-child{padding-right:64px}}

.jyl-pp-gallery__card{
    position:relative;width:100%;height:100%;overflow:hidden;cursor:grab;
    border-radius:var(--jyl-radius-md);border:1px solid var(--jyl-beige-medium);
    aspect-ratio:0.68;   /* mobile: drives card height while the slide is height:auto */
}
@media(min-width:898px){
    /* Pin an explicit height (= the slide's) instead of height:100%. A
       percentage-of-percentage chain (img 100% → card 100% → slide 80vh) was
       failing to resolve on slides whose --jyl-ratio differs from the rest,
       letting the img fall back to its intrinsic height and leaving a white
       strip below it. An explicit vh height is unconditionally definite, so the
       img's height:100% always resolves and cover-fills regardless of ratio. */
    .jyl-pp-gallery__card{aspect-ratio:auto;height:80vh}
}
.jyl-dark .jyl-pp-gallery__card{border-color:var(--jyl-grey-medium)}
.jyl-pp-gallery__img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    user-select:none;-webkit-user-drag:none;
}

/* Rey / Elementor ship a global `img{height:auto}` (typically `.elementor img`,
   specificity 0,1,1) that out-specifies our single-class `.jyl-pp-*__img`
   (0,1,0) and forces height back to the image's INTRINSIC value — so these
   absolutely-positioned fill-images quietly stop filling. It only shows when an
   image's intrinsic ratio differs from its frame: e.g. a gallery photo that
   isn't the card's 0.75 leaves a strip below it. width:100% and object-fit are
   NOT overridden (verified live), so forcing height alone restores the fill for
   every module fill-image at once. !important is required because the theme
   rule's specificity is higher than a single class. */
.jyl-pp-hero__img,
.jyl-pp-editorial__img,
.jyl-pp-gallery__img,
.jyl-pp-matrix__img,
.jyl-pp-detail__img,
.jyl-pp-card__img{height:100%!important}
.jyl-pp-gallery__dl{position:absolute;bottom:20px;right:20px;z-index:10}
@media(min-width:1198px){.jyl-pp-gallery__dl{bottom:24px;right:24px}}

.jyl-pp-gallery__zipRow{margin-top:24px}
@media(min-width:1198px){.jyl-pp-gallery__zipRow{margin-top:32px}}
.jyl-pp-gallery__zip{
    grid-column:1/-1;display:flex;align-items:center;gap:8px;
    padding:12px 16px;border-radius:var(--jyl-radius-sm);
    background:var(--jyl-beige-xlight);
    transition:background-color var(--jyl-t200) var(--jyl-ease);
}
@media(min-width:1198px){.jyl-pp-gallery__zip{grid-column:5/span 4;padding:12px 32px}}
.jyl-dark .jyl-pp-gallery__zip{background:var(--jyl-grey-dark)}
.jyl-pp-gallery__zipLabel{
    font-size:var(--jyl-fs-14);font-weight:var(--jyl-fw-medium);text-transform:uppercase;
    letter-spacing:var(--jyl-ls-md);color:var(--jyl-black);
}
.jyl-dark .jyl-pp-gallery__zipLabel{color:var(--jyl-white)}
.jyl-pp-gallery__zipExt{
    margin-left:auto;margin-right:8px;font-size:var(--jyl-fs-12);
    letter-spacing:var(--jyl-ls-sm);color:var(--jyl-grey-light);
}
.jyl-dark .jyl-pp-gallery__zipExt{color:rgba(255,255,255,.75)}

/* ──────────────────────────────────────────────
   7. Codes & Downloads
   ────────────────────────────────────────────── */
.jyl-pp-codes__head{
    display:flex;align-items:center;gap:12px;
    max-width:var(--jyl-max-w);margin-inline:auto;
    padding:36px 12px 12px;border-bottom:1px solid var(--jyl-beige-medium);
}
/* v1.3.23 — the theme's default h3 margin-bottom skewed the flex
   centring, dropping the count pill below the title's midline */
.jyl-pp-codes__head .jyl-pp-codes__title{margin:0}
.jyl-pp-codes__head .jyl-pp-count{align-self:center}
@media(min-width:898px){.jyl-pp-codes__head{padding:48px 32px 8px;border-bottom:0}}
.jyl-dark .jyl-pp-codes__head{border-color:var(--jyl-grey-medium)}
.jyl-pp-codes__title{
    font-size:var(--jyl-fs-20);font-weight:var(--jyl-fw-regular);color:var(--jyl-black);
}
@media(min-width:898px){.jyl-pp-codes__title{font-size:var(--jyl-fs-24);letter-spacing:var(--jyl-ls-lg)}}
.jyl-dark .jyl-pp-codes__title{color:var(--jyl-white)}

/* filter bar */
.jyl-pp-codes__filters{
    display:flex;gap:12px;flex-wrap:wrap;
    max-width:var(--jyl-max-w);margin-inline:auto;
    padding:12px;border-bottom:1px solid var(--jyl-beige-medium);
    position:relative;z-index:30;
}
@media(min-width:898px){.jyl-pp-codes__filters{padding:16px 32px;flex-wrap:nowrap}}
.jyl-dark .jyl-pp-codes__filters{border-color:var(--jyl-grey-medium)}

.jyl-pp-filter{position:relative}
/* v1.3.20 — linealight-style facet pills.
   Selectors anchored on BOTH .jyl-pp-filter (dropdown wrapper) AND
   .jyl-pp-codes__filters (bar-level buttons like "All filters", which sit
   directly in the bar with no wrapper) so Rey / Elementor global button
   resets can't strip the resting background from either. Resting = grey
   pill; hover = white + light grey border; open / focus = white + black. */
.jyl-pp-codes__filters button.jyl-pp-filter__btn,
.jyl-pp-filter button.jyl-pp-filter__btn,
.jyl-pp-filter__btn{
    appearance:none;-webkit-appearance:none;box-shadow:none;
    display:flex;align-items:center;height:48px;min-width:160px;cursor:pointer;
    padding:12px 20px 12px 16px;text-align:left;
    border:1px solid transparent;border-radius:var(--jyl-radius-sm);
    background:var(--jyl-beige-light);color:var(--jyl-black);
    font-size:var(--jyl-fs-14);font-weight:var(--jyl-fw-medium);font-family:var(--jyl-font);
    transition:background-color 100ms var(--jyl-ease),border-color 100ms var(--jyl-ease);
}
@media(min-width:898px){
    .jyl-pp-codes__filters button.jyl-pp-filter__btn,
    .jyl-pp-filter button.jyl-pp-filter__btn,
    .jyl-pp-filter__btn{min-width:187px}
}
/* "All filters" stays compact regardless of the min-width above */
.jyl-pp-codes__filters button.jyl-pp-filter__all,
.jyl-pp-filter__all{gap:6px;min-width:auto!important;flex-shrink:0}
.jyl-pp-codes__filters button.jyl-pp-filter__btn:hover,
.jyl-pp-filter button.jyl-pp-filter__btn:hover,
.jyl-pp-filter__btn:hover{
    background:var(--jyl-white);border-color:var(--jyl-grey-xlight);
}
.jyl-pp-codes__filters button.jyl-pp-filter__btn:focus-visible,
.jyl-pp-filter button.jyl-pp-filter__btn:focus-visible,
.jyl-pp-filter.is-open button.jyl-pp-filter__btn{
    background:var(--jyl-white);border-color:var(--jyl-black);
}
.jyl-dark .jyl-pp-codes__filters button.jyl-pp-filter__btn,
.jyl-dark .jyl-pp-filter button.jyl-pp-filter__btn{background:var(--jyl-grey-medium);color:var(--jyl-white);border-color:transparent}
.jyl-dark .jyl-pp-codes__filters button.jyl-pp-filter__btn:hover,
.jyl-dark .jyl-pp-filter button.jyl-pp-filter__btn:hover,
.jyl-dark .jyl-pp-filter.is-open button.jyl-pp-filter__btn{background:var(--jyl-grey-dark);border-color:rgba(255,255,255,.45)}
.jyl-pp-filter__btn svg{width:1rem;height:1rem;margin-left:auto;transition:transform 100ms var(--jyl-ease)}
.jyl-pp-filter.is-open .jyl-pp-filter__btn svg{transform:rotate(180deg)}

.jyl-pp-filter__menu{
    position:absolute;top:calc(100% + 4px);left:0;min-width:100%;z-index:50;
    display:none;list-style:none;margin:0;padding:8px;
    background:var(--jyl-white);border:1px solid var(--jyl-beige-medium);
    border-radius:var(--jyl-radius-sm);box-shadow:var(--jyl-shadow-nav);
    max-height:320px;overflow:auto;
}
.jyl-pp-filter.is-open .jyl-pp-filter__menu{display:block}
.jyl-dark .jyl-pp-filter__menu{background:var(--jyl-grey-dark);border-color:var(--jyl-grey-medium)}

.jyl-pp-filter__opt{
    display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;
    border-radius:var(--jyl-radius-sm);white-space:nowrap;
    font-size:var(--jyl-fs-14);color:var(--jyl-black);
}
.jyl-pp-filter__opt:hover{background:var(--jyl-beige-xlight)}
.jyl-dark .jyl-pp-filter__opt{color:var(--jyl-white)}
.jyl-dark .jyl-pp-filter__opt:hover{background:var(--jyl-grey-medium)}
.jyl-pp-filter__opt input{position:absolute;opacity:0;pointer-events:none}
.jyl-pp-filter__check{
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    width:18px;height:18px;border:1px solid var(--jyl-grey-xlight);border-radius:4px;
    color:transparent;transition:all 100ms var(--jyl-ease);
}
.jyl-pp-filter__check svg{width:12px;height:12px}
.jyl-pp-filter__opt input:checked + .jyl-pp-filter__check{
    background:var(--jyl-blue);border-color:var(--jyl-blue);color:var(--jyl-white);
}

.jyl-pp-filter__reset,
button.jyl-pp-filter__reset{
    appearance:none;-webkit-appearance:none;box-shadow:none;
    display:inline-flex;align-items:center;gap:6px;height:48px;padding:0 16px;cursor:pointer;
    border:1px solid transparent;border-radius:var(--jyl-radius-sm);
    background:var(--jyl-beige-light);color:var(--jyl-black);
    font-size:var(--jyl-fs-14);font-family:var(--jyl-font);
    transition:background-color 100ms var(--jyl-ease),border-color 100ms var(--jyl-ease);
}
.jyl-pp-filter__reset:hover,
button.jyl-pp-filter__reset:hover{background:var(--jyl-white);border-color:var(--jyl-black)}
.jyl-pp-filter__reset svg{width:1.2rem;height:1.2rem}
.jyl-dark .jyl-pp-filter__reset{background:var(--jyl-grey-medium);color:var(--jyl-white);border-color:var(--jyl-grey-medium)}

/* matrix block */
.jyl-pp-matrix{
    position:relative;padding:32px 0;
}
.jyl-pp-matrix::after{
    content:"";position:absolute;bottom:0;left:12px;right:12px;height:1px;
    background:var(--jyl-beige-medium);
}
@media(min-width:898px){.jyl-pp-matrix::after{left:32px;right:32px}}
.jyl-dark .jyl-pp-matrix::after{background:var(--jyl-grey-medium)}
.jyl-pp-matrix.is-hidden{display:none}

.jyl-pp-matrix__media{grid-column:span 1;display:flex;flex-direction:column;gap:16px}
@media(min-width:598px){.jyl-pp-matrix__media{grid-column:span 2}}
.jyl-pp-matrix__imgbox{
    position:relative;isolation:isolate;aspect-ratio:1;overflow:hidden;
    border:1px solid var(--jyl-grey-xlight);border-radius:var(--jyl-radius-sm);
    background:var(--jyl-white);
}
.jyl-dark .jyl-pp-matrix__imgbox{border-color:var(--jyl-grey-light);background:var(--jyl-grey-dark)}
.jyl-pp-matrix__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* also a bare `.swiper`; Swiper core's `.swiper{position:relative}` would
   override our absolute-fill (sibling .jyl-pp-matrix__img fills the same box
   the same way). Scope to keep it filling the square imgbox. */
.jyl-pp-matrix .jyl-pp-matrix__swiper{position:absolute;inset:0;overflow:hidden}
.jyl-pp-matrix__swiper .swiper-slide{position:relative}
.jyl-pp-matrix__pagination{
    position:absolute;bottom:4px;left:50%;transform:translateX(-50%);z-index:10;
    display:flex;justify-content:center;gap:4px;
}
@media(min-width:898px){.jyl-pp-matrix__pagination{bottom:8px}}
.jyl-pp-matrix__pagination .swiper-pagination-bullet{
    width:6px;height:6px;border-radius:50%;background:var(--jyl-grey-xlight);opacity:1;cursor:pointer;
}
.jyl-pp-matrix__pagination .swiper-pagination-bullet-active{background:var(--jyl-black)}
.jyl-dark .jyl-pp-matrix__pagination .swiper-pagination-bullet-active{background:var(--jyl-white)}

.jyl-pp-matrix__body{grid-column:span 3;display:flex;flex-direction:column;gap:24px}
@media(min-width:598px){.jyl-pp-matrix__body{grid-column:span 10}}
@media(min-width:898px){.jyl-pp-matrix__body{gap:32px}}

.jyl-pp-matrix__info{display:flex;align-items:baseline}
.jyl-pp-matrix__infoText{color:var(--jyl-black)}
.jyl-dark .jyl-pp-matrix__infoText{color:var(--jyl-white)}
.jyl-pp-matrix__title{
    font-size:var(--jyl-fs-16);font-weight:var(--jyl-fw-bold);
    line-height:1.6;letter-spacing:var(--jyl-ls-md);margin-bottom:4px;
}
.jyl-pp-matrix__infoText p{font-size:var(--jyl-fs-12);line-height:1.6;letter-spacing:var(--jyl-ls-md)}
@media(min-width:898px){.jyl-pp-matrix__infoText p{font-size:var(--jyl-fs-16)}}
.jyl-pp-matrix__infoBadges{margin-left:auto;display:flex;gap:4px;flex-shrink:0}

.jyl-pp-matrix__icons{display:flex;flex-wrap:wrap;gap:8px}
.jyl-pp-matrix__icon{height:32px;width:auto;aspect-ratio:1;object-fit:contain}
@media(min-width:898px){.jyl-pp-matrix__icon{height:40px}}
.jyl-dark .jyl-pp-matrix__icon{filter:invert(1) brightness(1)}

/* spec table */
.jyl-pp-table-wrap{
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-ms-overflow-style:none;
}
.jyl-pp-table-wrap::-webkit-scrollbar{display:none}
.jyl-pp-matrix.is-collapsed .jyl-pp-table-wrap tbody{display:none}
.jyl-pp-matrix.is-collapsed .jyl-pp-table__collapse .jyl-pp-iconbtn__icon{transform:rotate(0)}

.jyl-pp-table{width:100%;border-collapse:collapse;user-select:none}
.jyl-pp-table__code{user-select:text;cursor:text}
.jyl-pp-table thead tr{
    background:var(--jyl-beige-xlight);
    border-bottom:1px solid var(--jyl-grey-xlight);
}
.jyl-dark .jyl-pp-table thead tr{background:var(--jyl-grey-dark);border-color:var(--jyl-grey-light)}
.jyl-pp-table th{
    position:relative;padding:8px 16px;text-align:left;white-space:nowrap;
    font-size:var(--jyl-fs-14);font-weight:var(--jyl-fw-medium);line-height:1.5;
    letter-spacing:var(--jyl-ls-md);color:var(--jyl-black);
}
.jyl-dark .jyl-pp-table th{color:var(--jyl-white)}

.jyl-pp-table tbody tr{
    cursor:pointer;border-bottom:1px solid var(--jyl-beige-medium);
    color:var(--jyl-black);
    transition:background-color var(--jyl-t200) var(--jyl-ease);
}
.jyl-pp-table tbody tr:hover{background:var(--jyl-beige-xlight)}
.jyl-dark .jyl-pp-table tbody tr{border-color:var(--jyl-grey-medium);color:var(--jyl-white)}
.jyl-dark .jyl-pp-table tbody tr:hover{background:var(--jyl-grey-dark)}
.jyl-pp-table tbody tr.is-hidden{display:none}

.jyl-pp-table td{
    height:56px;padding:0 16px;white-space:nowrap;
    font-size:var(--jyl-fs-14);letter-spacing:var(--jyl-ls-md);
}
.jyl-pp-table__cell--swatch{display:inline-flex;align-items:center;gap:4px}

/* sticky action column */
.jyl-pp-table__sticky{
    position:sticky;right:0;text-align:right;
    background:var(--jyl-surface,var(--rey-body-bg));
    transition:background-color var(--jyl-t200) var(--jyl-ease);
}
.jyl-pp-table__sticky--head{background:var(--jyl-beige-xlight)}
.jyl-dark .jyl-pp-table__sticky--head{background:var(--jyl-grey-dark)}
.jyl-pp-table tbody tr:hover .jyl-pp-table__sticky{background:var(--jyl-beige-xlight)}
.jyl-dark .jyl-pp-table tbody tr:hover .jyl-pp-table__sticky{background:var(--jyl-grey-dark)}
.jyl-pp-table-wrap.has-scroll .jyl-pp-table__sticky{box-shadow:-8px 0 12px -8px rgba(0,0,0,.12)}
.jyl-pp-table__actions{display:inline-flex;justify-content:flex-end;gap:16px;padding:0 8px 0 12px}
.jyl-pp-table__collapse{margin-left:auto}
.jyl-pp-table__collapse .jyl-pp-iconbtn__icon{transform:rotate(180deg);transition:transform var(--jyl-t200) var(--jyl-ease)}

/* progress */
.jyl-pp-codes__progress{
    display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 0;
}
.jyl-pp-codes__bar{
    position:relative;display:inline-block;height:3px;width:200px;
    border-radius:var(--jyl-radius-full);background:var(--jyl-beige-light);
}
.jyl-dark .jyl-pp-codes__bar{background:var(--jyl-grey-medium)}
.jyl-pp-codes__barFill{
    position:absolute;left:0;top:0;height:100%;border-radius:var(--jyl-radius-full);
    background:var(--jyl-black);transition:width var(--jyl-t200) var(--jyl-ease);
}
.jyl-dark .jyl-pp-codes__barFill{background:var(--jyl-white)}
.jyl-pp-codes__barText{font-size:var(--jyl-fs-14);color:var(--jyl-grey-light)}
.jyl-dark .jyl-pp-codes__barText{color:rgba(255,255,255,.75)}

/* ──────────────────────────────────────────────
   7b. Code page (own URL: /product/{slug}/{code}/)
   Third view, server-driven via body.jyl-pp--code.
   ────────────────────────────────────────────── */
.jyl-pp-view--code{display:none}
body.jyl-pp--code .jyl-pp-view--code{display:block}
body.jyl-pp--code .jyl-pp-view--details,
body.jyl-pp--code .jyl-pp-view--codes{display:none}

.jyl-pp-codepage{
    max-width:var(--jyl-max-w);margin-inline:auto;
    padding:12px 12px 32px;
}
@media(min-width:898px){.jyl-pp-codepage{padding:16px 32px 48px}}

.jyl-pp-codepage__back{
    display:inline-flex;align-items:center;gap:6px;margin-bottom:24px;
    padding:12px 16px;cursor:pointer;
    border:1px solid var(--jyl-beige-medium);border-radius:var(--jyl-radius-sm);
    background:var(--jyl-white);color:var(--jyl-black);
    font-size:var(--jyl-fs-14);letter-spacing:var(--jyl-ls-md);
    transition:background-color var(--jyl-t200) var(--jyl-ease),border-color var(--jyl-t200) var(--jyl-ease);
}
.jyl-pp-codepage__back:hover{background:var(--jyl-beige-medium);border-color:var(--jyl-beige-dark)}
.jyl-pp-codepage__back svg{width:1rem;height:1rem}
.jyl-dark .jyl-pp-codepage__back{background:var(--jyl-black);color:var(--jyl-white);border-color:var(--jyl-grey-medium)}
.jyl-dark .jyl-pp-codepage__back:hover{background:var(--jyl-grey-medium);border-color:var(--jyl-grey-light)}

@keyframes jyl-pp-fadein{from{opacity:0}to{opacity:1}}
.jyl-pp-codepage .jyl-pp-detail{animation:jyl-pp-fadein .3s var(--jyl-ease) both}
@media(prefers-reduced-motion:reduce){.jyl-pp-codepage .jyl-pp-detail{animation:none}}

/* shared detail layout (used by the code page) */
.jyl-pp-detail{
    box-sizing:border-box;
    display:grid;grid-template-columns:1fr;gap:24px;
}
@media(min-width:1198px){
    .jyl-pp-detail{grid-template-columns:repeat(3,1fr);gap:32px}
}
/* CRITICAL: 1fr grid tracks default to min-width:auto, so any over-wide
   descendant (e.g. a swiper slide momentarily sized to 100vw before JS
   measures, or carrying a stale --jyl-pp-detail-w) inflates its track and
   blows the whole 3-column layout — crushing the spec card and pushing the
   downloads column off-screen. min-width:0 lets each column hold its 1fr
   share and clip overflow internally instead of expanding. */
.jyl-pp-detail__col{min-width:0}

/* left: spec card */
.jyl-pp-detail__card{
    border:1px solid var(--jyl-beige-medium);border-radius:var(--jyl-radius-sm);
    overflow:hidden;
}
.jyl-dark .jyl-pp-detail__card{border-color:var(--jyl-grey-medium)}
.jyl-pp-detail__head{
    display:flex;align-items:baseline;justify-content:space-between;gap:8px;
    padding:20px 16px;color:var(--jyl-black);
}
@media(min-width:1198px){.jyl-pp-detail__head{padding:24px}}
.jyl-dark .jyl-pp-detail__head{color:var(--jyl-white)}
.jyl-pp-detail__cat{font-size:var(--jyl-fs-14);font-weight:var(--jyl-fw-medium);margin-bottom:4px}
.jyl-pp-detail__code{font-size:var(--jyl-fs-20);font-weight:var(--jyl-fw-medium);letter-spacing:var(--jyl-ls-lg)}
@media(min-width:1198px){.jyl-pp-detail__code{font-size:var(--jyl-fs-24)}}
.jyl-pp-detail__badges{display:flex;gap:4px;flex-shrink:0}

.jyl-pp-detail__info{
    padding:16px;background:var(--jyl-beige-light);color:var(--jyl-black);
}
@media(min-width:1198px){.jyl-pp-detail__info{padding:16px 24px}}
.jyl-dark .jyl-pp-detail__info{background:var(--jyl-grey-dark);color:var(--jyl-white)}
.jyl-pp-detail__info p{font-size:var(--jyl-fs-14);line-height:1.5;letter-spacing:var(--jyl-ls-md)}

.jyl-pp-detail__icons{
    display:flex;flex-wrap:wrap;gap:8px;padding:16px;
    border-bottom:1px solid var(--jyl-beige-medium);
}
.jyl-dark .jyl-pp-detail__icons{border-color:var(--jyl-grey-medium)}
.jyl-pp-detail__icons img{height:28px;width:auto;aspect-ratio:1;object-fit:contain}
.jyl-dark .jyl-pp-detail__icons img{filter:invert(1) brightness(1)}

.jyl-pp-detail__specs{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left}
.jyl-pp-detail__specs tr{border-bottom:1px solid var(--jyl-beige-medium);cursor:default}
.jyl-pp-detail__specs tr:last-child{border-bottom:0}
.jyl-dark .jyl-pp-detail__specs tr{border-color:var(--jyl-grey-medium)}
.jyl-pp-detail__specs th,
.jyl-pp-detail__specs td{
    padding:12px 16px;height:auto;white-space:normal;vertical-align:middle;
    font-size:var(--jyl-fs-12);letter-spacing:var(--jyl-ls-sm);color:var(--jyl-black);
}
@media(min-width:1198px){.jyl-pp-detail__specs th,.jyl-pp-detail__specs td{font-size:var(--jyl-fs-14);padding:12px 24px}}
.jyl-pp-detail__specs th{font-weight:var(--jyl-fw-medium)}
.jyl-dark .jyl-pp-detail__specs th,.jyl-dark .jyl-pp-detail__specs td{color:var(--jyl-white)}

/* middle: media + description */
.jyl-pp-detail__mediaBox{
    border:1px solid var(--jyl-beige-medium);border-radius:var(--jyl-radius-sm);
    background:var(--jyl-beige-xlight);padding:8px;
}
.jyl-dark .jyl-pp-detail__mediaBox{border-color:var(--jyl-grey-medium);background:var(--jyl-grey-dark)}
.jyl-pp-detail__swiperWrap{position:relative}
.jyl-pp-detail__swiper{
    overflow:hidden;border-radius:var(--jyl-radius-sm);
    border:1px solid var(--jyl-beige-medium);
    max-width:100%;
}
/* clamp: even if a stale inline slide width slips through, it can never
   inflate the column again. Fallback is 100% (of the bounded swiper), NOT
   100vw — a viewport-wide fallback was itself a blowout source before JS
   ran its first measurement pass. */
.jyl-pp-detail__swiper .swiper-slide{max-width:var(--jyl-pp-detail-w,100%)}
.jyl-dark .jyl-pp-detail__swiper{border-color:var(--jyl-grey-medium)}
.jyl-pp-detail__slide{position:relative;aspect-ratio:1;background:var(--jyl-white)}
.jyl-dark .jyl-pp-detail__slide{background:var(--jyl-grey-medium)}
.jyl-pp-detail__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.jyl-pp-detail__nav{
    position:absolute;bottom:16px;left:16px;z-index:10;display:none;gap:10px;
}
@media(min-width:898px){.jyl-pp-detail__nav{display:flex}}
.jyl-pp-detail__nav .jyl-pp-iconbtn[disabled],
.jyl-pp-detail__nav .swiper-button-disabled{opacity:.5;pointer-events:none}
.jyl-pp-detail__dl{position:absolute;bottom:16px;right:16px;z-index:10}

.jyl-pp-detail__pagination{
    position:static;display:flex;justify-content:center;gap:4px;padding:12px 0 4px;
}
@media(min-width:898px){.jyl-pp-detail__pagination{display:none}}
.jyl-pp-detail__pagination .swiper-pagination-bullet{
    width:6px;height:6px;border-radius:50%;background:var(--jyl-grey-xlight);opacity:1;cursor:pointer;
}
.jyl-pp-detail__pagination .swiper-pagination-bullet-active{background:var(--jyl-black)}
.jyl-dark .jyl-pp-detail__pagination .swiper-pagination-bullet-active{background:var(--jyl-white)}

.jyl-pp-detail__thumbs{display:none;flex-wrap:wrap;gap:8px;padding-top:8px}
@media(min-width:898px){.jyl-pp-detail__thumbs{display:flex}}
.jyl-pp-detail__thumbs button{
    position:relative;height:56px;aspect-ratio:1;overflow:hidden;cursor:pointer;padding:0;
    border:1px solid var(--jyl-beige-medium);border-radius:var(--jyl-radius-sm);
    background:var(--jyl-white);transition:border-color var(--jyl-t200) var(--jyl-ease);
}
.jyl-pp-detail__thumbs button[aria-current="true"]{border-color:var(--jyl-black)}
.jyl-dark .jyl-pp-detail__thumbs button{border-color:var(--jyl-grey-medium);background:var(--jyl-grey-medium)}
.jyl-dark .jyl-pp-detail__thumbs button[aria-current="true"]{border-color:var(--jyl-white)}
.jyl-pp-detail__thumbs img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

.jyl-pp-detail__desc{
    margin-top:24px;border:1px solid var(--jyl-beige-medium);border-radius:var(--jyl-radius-sm);
    padding:16px;
}
@media(min-width:1198px){.jyl-pp-detail__desc{padding:24px}}
.jyl-dark .jyl-pp-detail__desc{border-color:var(--jyl-grey-medium)}
.jyl-pp-detail__descHead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px}
.jyl-pp-detail__descHead h5{
    font-size:var(--jyl-fs-16);font-weight:var(--jyl-fw-regular);color:var(--jyl-black);
}
@media(min-width:1198px){.jyl-pp-detail__descHead h5{font-size:var(--jyl-fs-24)}}
.jyl-dark .jyl-pp-detail__descHead h5{color:var(--jyl-white)}
.jyl-pp-detail__copy{
    border:0;background:none;cursor:pointer;opacity:.75;color:var(--jyl-black);
    transition:opacity var(--jyl-t300) var(--jyl-ease);
}
.jyl-pp-detail__copy:hover{opacity:1}
.jyl-pp-detail__copy.is-copied{color:var(--jyl-blue)}
.jyl-dark .jyl-pp-detail__copy{color:var(--jyl-white)}
.jyl-pp-detail__copy svg{width:20px;height:20px}
.jyl-pp-detail__descBody p{
    font-size:var(--jyl-fs-14);line-height:var(--jyl-lh-relaxed);
    letter-spacing:var(--jyl-ls-md);color:var(--jyl-black);margin-bottom:.8em;white-space:normal;
}
.jyl-dark .jyl-pp-detail__descBody p{color:var(--jyl-white)}

/* right: downloads */
.jyl-pp-dl{
    border:1px solid var(--jyl-beige-medium);border-radius:var(--jyl-radius-sm);overflow:hidden;
}
.jyl-dark .jyl-pp-dl{border-color:var(--jyl-grey-medium)}
.jyl-pp-dl__title{
    padding:16px;border-bottom:1px solid var(--jyl-beige-medium);
    font-size:var(--jyl-fs-20);font-weight:var(--jyl-fw-medium);
    letter-spacing:var(--jyl-ls-md);color:var(--jyl-black);
}
@media(min-width:1198px){.jyl-pp-dl__title{font-size:var(--jyl-fs-24);font-weight:var(--jyl-fw-regular)}}
.jyl-dark .jyl-pp-dl__title{border-color:var(--jyl-grey-medium);color:var(--jyl-white)}

.jyl-pp-dl__list{display:flex;flex-direction:column;gap:4px;padding:16px}
.jyl-pp-dl__row{
    display:flex;align-items:center;gap:8px;padding:12px 8px;
    border:1px solid transparent;border-radius:var(--jyl-radius-sm);
    background:var(--jyl-beige-xlight);
    transition:border-color 100ms var(--jyl-ease);
}
.jyl-pp-dl__row:hover{border-color:var(--jyl-beige-dark)}
.jyl-dark .jyl-pp-dl__row{background:var(--jyl-grey-dark)}
.jyl-dark .jyl-pp-dl__row:hover{border-color:var(--jyl-grey-light)}
.jyl-pp-dl__fileicon{
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    width:48px;height:48px;border-radius:var(--jyl-radius-sm);
    background:var(--jyl-beige-medium);color:var(--jyl-black);
}
.jyl-pp-dl__fileicon svg{width:24px;height:24px}
.jyl-dark .jyl-pp-dl__fileicon{background:var(--jyl-grey-light);color:var(--jyl-white)}
.jyl-pp-dl__meta{display:flex;flex-direction:column;min-width:0}
.jyl-pp-dl__label{
    font-size:var(--jyl-fs-14);font-weight:var(--jyl-fw-medium);color:var(--jyl-black);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.jyl-dark .jyl-pp-dl__label{color:var(--jyl-white)}
.jyl-pp-dl__ext{font-size:var(--jyl-fs-12);color:var(--jyl-grey-light)}
.jyl-dark .jyl-pp-dl__ext{color:rgba(255,255,255,.75)}
.jyl-pp-dl__acts{margin-left:auto;display:inline-flex;align-items:center;gap:12px}
.jyl-pp-dl__acts .jyl-pp-iconbtn{background:var(--jyl-white)}
.jyl-dark .jyl-pp-dl__acts .jyl-pp-iconbtn{background:var(--jyl-black)}

.jyl-pp-dl__checkwrap{display:inline-flex;cursor:pointer}
.jyl-pp-dl__checkwrap input{position:absolute;opacity:0;pointer-events:none}
.jyl-pp-dl__check{
    display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;border:1px solid var(--jyl-grey-xlight);border-radius:4px;
    background:var(--jyl-white);color:transparent;
    transition:all 100ms var(--jyl-ease);
}
.jyl-pp-dl__check svg{width:14px;height:14px}
.jyl-pp-dl__checkwrap input:checked + .jyl-pp-dl__check{
    background:var(--jyl-blue);border-color:var(--jyl-blue);color:var(--jyl-white);
}
.jyl-dark .jyl-pp-dl__check{background:var(--jyl-grey-medium);border-color:var(--jyl-grey-light)}
.jyl-dark .jyl-pp-dl__checkwrap input:checked + .jyl-pp-dl__check{background:var(--jyl-white);border-color:var(--jyl-white);color:var(--jyl-black)}

.jyl-pp-dl__foot{display:flex;gap:16px;padding:16px}
.jyl-pp-dl__foot .jyl-btn{
    flex:1;display:inline-flex;align-items:center;justify-content:center;
    text-align:center;white-space:nowrap;
    padding:16px 24px;border:1px solid transparent;border-radius:var(--jyl-radius-md);
    font-weight:var(--jyl-fw-medium);letter-spacing:var(--jyl-ls-md);
}
.jyl-pp-dl__foot .jyl-btn[disabled]{opacity:.5;cursor:not-allowed}
/* "Download all" — the theme's .jyl-btn--dark paints no fill on a <button>
   (only the bare shape), so it read as plain text. Define the dark fill here,
   matching the outline variant's !important approach to win over the theme's
   button reset; shape/padding/radius come from the rule above. */
.jyl-pp-dl__foot .jyl-btn--dark{
    background:var(--jyl-black)!important;color:var(--jyl-white)!important;
    border-color:var(--jyl-black)!important;
}
.jyl-pp-dl__foot .jyl-btn--dark:hover,
.jyl-pp-dl__foot .jyl-btn--dark:focus-visible{filter:brightness(1.25)}
/* dark mode: the !important black fill above would melt into the black
   page; invert to white like every other .jyl-btn--dark */
.jyl-dark .jyl-pp-dl__foot .jyl-btn--dark{
    background:var(--jyl-white)!important;color:var(--jyl-black)!important;
    border-color:var(--jyl-white)!important;
}
.jyl-dark .jyl-pp-dl__foot .jyl-btn--dark:hover,
.jyl-dark .jyl-pp-dl__foot .jyl-btn--dark:focus-visible{filter:none;background:#BDB6AE!important;border-color:#BDB6AE!important}

/* ──────────────────────────────────────────────
   8. Related
   ────────────────────────────────────────────── */
.jyl-pp-related{padding:24px 0}
@media(min-width:1198px){.jyl-pp-related{padding:32px 0}}
.jyl-pp-related__head{align-items:center;padding-top:16px;padding-bottom:16px;display:flex;flex-wrap:wrap}
.jyl-pp-related__title{
    flex:1;font-size:var(--jyl-fs-24);font-weight:var(--jyl-fw-medium);
    letter-spacing:var(--jyl-ls-xl);color:var(--jyl-black);
}
@media(min-width:898px){.jyl-pp-related__title{font-size:var(--jyl-fs-32)}}
.jyl-dark .jyl-pp-related__title{color:var(--jyl-white)}
.jyl-pp-related__title strong{font-weight:var(--jyl-fw-medium);color:var(--jyl-blue)}
.jyl-dark .jyl-pp-related__title strong{color:var(--jyl-blue-light)}
.jyl-pp-related__seeAll{display:none}
@media(min-width:1198px){.jyl-pp-related__seeAll{display:inline-flex}}
.jyl-pp-related__seeAllM{flex-shrink:0}
@media(min-width:1198px){.jyl-pp-related__seeAllM{display:none}}

.jyl-pp-related__grid{
    list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
    margin:0 -8px;padding:32px 12px 0;row-gap:32px;
}
@media(min-width:898px){.jyl-pp-related__grid{margin:0 -16px;padding:32px 32px 0}}
.jyl-pp-related__item{width:50%;padding:0 8px}
@media(min-width:1198px){.jyl-pp-related__item{width:25%;padding:0 16px}}

.jyl-pp-card{display:flex;flex-direction:column;height:100%}
.jyl-pp-card__media{
    position:relative;display:block;aspect-ratio:1;overflow:hidden;
    border-radius:var(--jyl-radius-md);
    transition:opacity var(--jyl-t200) var(--jyl-ease);
}
.jyl-pp-card__media:hover{opacity:.75}
.jyl-pp-card__badges{
    position:absolute;top:8px;left:4px;z-index:10;display:flex;gap:4px;
}
@media(min-width:1198px){.jyl-pp-card__badges{left:50%;transform:translateX(-50%)}}
.jyl-pp-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.jyl-pp-card__titleRow{
    display:flex;align-items:center;justify-content:center;gap:13px;
    margin:13px 0 12px;text-align:center;color:var(--jyl-black);
    transition:opacity var(--jyl-t200) var(--jyl-ease);
}
.jyl-pp-card__titleRow:hover{opacity:.5}
.jyl-dark .jyl-pp-card__titleRow{color:var(--jyl-white)}
.jyl-pp-card__title{font-size:var(--jyl-fs-16);font-weight:var(--jyl-fw-medium);letter-spacing:var(--jyl-ls-lg)}
@media(min-width:898px){.jyl-pp-card__title{font-size:var(--jyl-fs-24);font-weight:var(--jyl-fw-regular)}}

.jyl-pp-card__subtitle{
    margin-bottom:8px;text-align:center;font-size:var(--jyl-fs-12);color:var(--jyl-black);
}
.jyl-dark .jyl-pp-card__subtitle{color:var(--jyl-white)}
.jyl-pp-card__meta{margin-bottom:12px;text-align:center}
.jyl-pp-card__meta p{font-size:var(--jyl-fs-12);color:var(--jyl-grey-light);margin-bottom:2px}
@media(min-width:1198px){.jyl-pp-card__meta p{margin-bottom:8px}}
.jyl-dark .jyl-pp-card__meta p{color:rgba(255,255,255,.75)}

.jyl-pp-card__swatches{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.jyl-pp-card__btns{
    margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:24px;
}
@media(min-width:1198px){.jyl-pp-card__btns{padding-inline:32px}}
.jyl-pp-card__btns .jyl-btn{width:100%;text-align:center;justify-content:center}

/* ──────────────────────────────────────────────
   9. Reduced motion
   ────────────────────────────────────────────── */
/* Parallax intentionally ignores prefers-reduced-motion to match the homepage
   hero (explicit project decision), so no reduced-motion transform:none reset
   here — the 1.2 pre-scale always applies. */

/* ──────────────────────────────────────────────
   10. v1.2.0 — inline detail rows, dual filter bars,
       "All filters" drawer, Compare, optic icons
   ────────────────────────────────────────────── */

/* scroll lock while a drawer / modal is open (pairs with Lenis stop).
   v1.3.18 — the vanished scrollbar used to widen the viewport by ~15px,
   shifting the whole page (visible jolt when opening "All filters").
   JS measures the scrollbar into --jyl-sbw before locking; body and any
   full-viewport fixed bars get equal right padding, so content width is
   unchanged and nothing moves. The drawer itself is position:fixed and
   anchored right:0, so it is unaffected by the compensation. */
html.jyl-pp-lock,
html.jyl-pp-lock body{overflow:hidden}
html.jyl-pp-lock body{padding-right:var(--jyl-sbw,0px)}
html.jyl-pp-lock .rey-siteHeader,
html.jyl-pp-lock .rey-header{padding-right:var(--jyl-sbw,0px)}

/* ── Inline detail row (desktop expansion of a code row) ── */
[data-jyl-pp-detail][hidden]{display:none!important}
.jyl-pp-table__detailRow{cursor:default}
.jyl-pp-table__detailRow:hover{background:transparent!important}
.jyl-pp-table__detailRow>td{
    padding:0;height:auto;white-space:normal;
    background:var(--jyl-surface,var(--rey-body-bg));
}
.jyl-dark .jyl-pp-table__detailRow>td{background:var(--jyl-black)}
/* width:0 + min-width:100% — the colspan cell can never inflate the
   table's intrinsic width; it just stretches to the final table width */
.jyl-pp-detailWrap{width:0;min-width:100%;overflow:hidden}
.jyl-pp-detail--inline{
    padding:24px 12px 32px;
    border-bottom:1px solid var(--jyl-beige-medium);
    animation:jyl-pp-fadein .3s var(--jyl-ease) both;
}
@media(min-width:898px){.jyl-pp-detail--inline{padding:32px 16px 40px}}
.jyl-dark .jyl-pp-detail--inline{border-color:var(--jyl-grey-medium)}
@media(prefers-reduced-motion:reduce){.jyl-pp-detail--inline{animation:none}}

/* row state + chevron toggle (desktop only, linealight `_info`) */
.jyl-pp-table__rowToggle{display:none}
@media(min-width:898px){.jyl-pp-table__rowToggle{display:inline-flex}}
.jyl-pp-table__rowToggle .jyl-pp-iconbtn__icon{transition:transform var(--jyl-t200) var(--jyl-ease)}
tr.is-open .jyl-pp-table__rowToggle .jyl-pp-iconbtn__icon{transform:rotate(180deg)}
.jyl-pp-table tbody tr.is-open{background:var(--jyl-beige-xlight)}
.jyl-dark .jyl-pp-table tbody tr.is-open{background:var(--jyl-grey-dark)}
.jyl-pp-table tbody tr.is-open .jyl-pp-table__sticky{background:var(--jyl-beige-xlight)}
.jyl-dark .jyl-pp-table tbody tr.is-open .jyl-pp-table__sticky{background:var(--jyl-grey-dark)}

/* ── Optic column icon ── */
.jyl-pp-table__opticIcon{
    width:16px;height:16px;flex-shrink:0;object-fit:contain;
}
.jyl-dark .jyl-pp-table__opticIcon{filter:invert(1) brightness(1)}

/* ── Filter bars: desktop top / mobile bottom-sticky (linealight) ── */
.jyl-pp-codes__filters--top{display:none}
@media(min-width:898px){.jyl-pp-codes__filters--top{display:flex}}
.jyl-pp-codes__filters--bottom{
    position:sticky;bottom:0;z-index:45;
    display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;
    gap:8px;padding:12px;
    background:var(--jyl-surface,var(--rey-body-bg));
    border-top:1px solid var(--jyl-beige-medium);border-bottom:0;
    box-shadow:0 -4px 12px rgba(0,0,0,.06);
    scrollbar-width:none;
}
.jyl-pp-codes__filters--bottom::-webkit-scrollbar{display:none}
.jyl-dark .jyl-pp-codes__filters--bottom{background:var(--jyl-black);border-color:var(--jyl-grey-medium)}
@media(min-width:898px){.jyl-pp-codes__filters--bottom{display:none}}
/* bottom bar menus open UPWARDS */
.jyl-pp-codes__filters--bottom .jyl-pp-filter__menu{top:auto;bottom:calc(100% + 4px)}
.jyl-pp-codes__filters--bottom .jyl-pp-filter{flex-shrink:0}
.jyl-pp-codes__filters--bottom .jyl-pp-filter__btn{min-width:140px}

/* "All filters" button */
.jyl-pp-filter__all{gap:6px;min-width:auto;flex-shrink:0}
.jyl-pp-filter__all svg{width:1.2rem;height:1.2rem;margin-left:0}

/* ── Compare toggle switch ── */
.jyl-pp-compareToggle{
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    margin-left:auto;flex-shrink:0;
}
.jyl-pp-compareToggle__label{
    font-size:var(--jyl-fs-14);font-weight:var(--jyl-fw-medium);color:var(--jyl-black);
}
.jyl-dark .jyl-pp-compareToggle__label{color:var(--jyl-white)}
.jyl-pp-compareToggle input{position:absolute;opacity:0;pointer-events:none}
.jyl-pp-compareToggle__track{
    position:relative;display:inline-block;width:56px;height:28px;flex-shrink:0;
    border-radius:var(--jyl-radius-full);background:var(--jyl-beige-dark);
    transition:background-color var(--jyl-t200) var(--jyl-ease);
}
.jyl-dark .jyl-pp-compareToggle__track{background:var(--jyl-grey-light)}
.jyl-pp-compareToggle__knob{
    position:absolute;left:2px;top:50%;transform:translateY(-50%);
    display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;border-radius:50%;background:var(--jyl-white);
    color:transparent;transition:left var(--jyl-t200) var(--jyl-ease),color 100ms var(--jyl-ease);
}
.jyl-pp-compareToggle__knob svg{width:14px;height:14px}
.jyl-dark .jyl-pp-compareToggle__knob{background:var(--jyl-grey-dark)}
.jyl-pp-compareToggle input:checked + .jyl-pp-compareToggle__track{background:var(--jyl-grey-dark)}
.jyl-dark .jyl-pp-compareToggle input:checked + .jyl-pp-compareToggle__track{background:var(--jyl-white)}
.jyl-pp-compareToggle input:checked + .jyl-pp-compareToggle__track .jyl-pp-compareToggle__knob{
    left:calc(100% - 26px);color:var(--jyl-grey-dark);
}
.jyl-dark .jyl-pp-compareToggle input:checked + .jyl-pp-compareToggle__track .jyl-pp-compareToggle__knob{color:var(--jyl-white)}

/* per-row compare checkbox: visible only in compare mode */
.jyl-pp-table__compare{display:none;cursor:pointer}
[data-jyl-pp-codes].is-compare .jyl-pp-table__compare{display:inline-flex}
[data-jyl-pp-codes].is-compare .jyl-pp-table__rowToggle{display:none}

/* ── Compare selection bar ──
   v1.3.20 — was a floating pill fixed to the viewport bottom; now a
   full-width in-flow bar that JS relocates to sit directly under the top
   filter bar (linealight). Left: "Close ×" exits compare mode entirely;
   right: "n/4 selected" + selected-code chips + solid "Compare (max 4)". */
.jyl-pp-comparebar{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    max-width:var(--jyl-max-w);margin-inline:auto;
    padding:14px 12px;border-bottom:1px solid var(--jyl-beige-medium);
    background:var(--jyl-surface,var(--rey-body-bg));
}
@media(min-width:898px){.jyl-pp-comparebar{padding:14px 32px}}
.jyl-dark .jyl-pp-comparebar{background:var(--jyl-black);border-color:var(--jyl-grey-medium)}

.jyl-pp-comparebar button.jyl-pp-comparebar__close,
.jyl-pp-comparebar__close{
    appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:8px;
    padding:8px 4px;cursor:pointer;background:transparent;border:0;box-shadow:none;
    font-size:var(--jyl-fs-16);font-weight:var(--jyl-fw-regular);font-family:var(--jyl-font);
    color:var(--jyl-black);flex-shrink:0;
}
.jyl-pp-comparebar__close:hover{color:var(--jyl-grey-medium)}
.jyl-dark .jyl-pp-comparebar__close{color:var(--jyl-white)}
.jyl-pp-comparebar__close svg{width:14px;height:14px}

.jyl-pp-comparebar__right{display:flex;align-items:center;gap:20px;min-width:0}
.jyl-pp-comparebar__count{
    display:inline-flex;align-items:center;margin:0;
    font-size:var(--jyl-fs-16);font-weight:var(--jyl-fw-regular);color:var(--jyl-grey-light);
    white-space:nowrap;text-align:center;line-height:1;
}
.jyl-dark .jyl-pp-comparebar__count{color:var(--jyl-grey-xlight)}

/* selected-code chips: matrix thumbnail + code, horizontally scrollable */
.jyl-pp-comparebar__chips{
    display:flex;align-items:center;gap:16px;min-width:0;overflow-x:auto;
    scrollbar-width:none;
}
.jyl-pp-comparebar__chips::-webkit-scrollbar{display:none}
.jyl-pp-comparebar__chip{
    display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
    font-size:var(--jyl-fs-14);font-weight:var(--jyl-fw-medium);color:var(--jyl-black);
}
.jyl-dark .jyl-pp-comparebar__chip{color:var(--jyl-white)}
.jyl-pp-comparebar__chip img{
    width:28px;height:28px;object-fit:contain;border-radius:4px;
    background:var(--jyl-beige-light);
}

.jyl-pp-comparebar button.jyl-pp-comparebar__go{
    appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;
    height:44px;padding:0 20px;cursor:pointer;flex-shrink:0;box-shadow:none;
    background:var(--jyl-grey-dark);color:var(--jyl-white);
    border:1px solid var(--jyl-grey-dark);border-radius:var(--jyl-radius-sm);
    font-size:var(--jyl-fs-14);font-weight:var(--jyl-fw-medium);font-family:var(--jyl-font);
    letter-spacing:var(--jyl-ls-sm);text-transform:none;white-space:nowrap;
    transition:background-color 100ms var(--jyl-ease);
}
.jyl-pp-comparebar button.jyl-pp-comparebar__go:hover{background:var(--jyl-grey-medium)}
.jyl-dark .jyl-pp-comparebar button.jyl-pp-comparebar__go{background:var(--jyl-white);color:var(--jyl-black);border-color:var(--jyl-white)}
.jyl-pp-comparebar .jyl-btn[disabled],
.jyl-pp-comparebar button[disabled]{opacity:.5;cursor:not-allowed}

/* ── Drawer ("All filters") & Compare overlay shells ──
   v1.3.19 — z-index raised far above the Rey header (which stacks above
   the old 120). Panels are portaled to <body> by JS, so no ancestor
   transform/filter can turn position:fixed into ancestor-relative
   positioning (the Chrome vs Firefox rendering discrepancy). */
.jyl-pp-drawer,.jyl-pp-compare{
    position:fixed;inset:0;z-index:99999;
}
.jyl-pp-drawer__backdrop,.jyl-pp-compare__backdrop{
    position:absolute;inset:0;background:rgba(0,0,0,.4);
    opacity:0;transition:opacity var(--jyl-t300) var(--jyl-ease);
}
.jyl-pp-drawer.is-open .jyl-pp-drawer__backdrop,
.jyl-pp-compare.is-open .jyl-pp-compare__backdrop{opacity:1}

.jyl-pp-drawer__panel{
    position:absolute;top:0;right:0;bottom:0;
    width:min(460px,92vw);display:flex;flex-direction:column;
    background:var(--jyl-surface,var(--rey-body-bg));box-shadow:var(--jyl-shadow-nav);
    transform:translateX(100%);transition:transform var(--jyl-t300) var(--jyl-ease);
}
.jyl-dark .jyl-pp-drawer__panel{background:var(--jyl-black)}
.jyl-pp-drawer.is-open .jyl-pp-drawer__panel{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){
    .jyl-pp-drawer__panel{transition:none;transform:none}
    .jyl-pp-drawer__backdrop,.jyl-pp-compare__backdrop{transition:none;opacity:1}
}

.jyl-pp-drawer__head{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:20px 24px 12px;
}
.jyl-pp-drawer__head h4{
    font-size:var(--jyl-fs-24);font-weight:var(--jyl-fw-medium);color:var(--jyl-black);margin:0;
}
.jyl-dark .jyl-pp-drawer__head h4{color:var(--jyl-white)}

/* blue square close button (linealight) — selector doubled to beat Rey's
   global button reset */
.jyl-pp-drawer button.jyl-pp-drawer__close,
.jyl-pp-drawer__close{
    appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;
    width:32px;height:32px;flex-shrink:0;cursor:pointer;padding:0;
    background:var(--jyl-blue);color:var(--jyl-white);
    border:0;border-radius:6px;
    transition:background-color 100ms var(--jyl-ease);
}
.jyl-pp-drawer button.jyl-pp-drawer__close:hover{background:var(--jyl-blue-light)}
.jyl-pp-drawer__close svg{width:14px;height:14px}

.jyl-pp-drawer__search{padding:0 24px 12px;border-bottom:1px solid var(--jyl-beige-medium)}
.jyl-dark .jyl-pp-drawer__search{border-color:var(--jyl-grey-medium)}
.jyl-pp-drawer__search input,
.jyl-pp-drawer__search input[type="search"]{
    appearance:none;-webkit-appearance:none;width:100%;height:40px;padding:0 2px;
    border:0;border-radius:0;background:transparent;box-shadow:none;
    font-size:var(--jyl-fs-16);font-family:var(--jyl-font);color:var(--jyl-black);
}
.jyl-pp-drawer__search input:focus{outline:none}
.jyl-pp-drawer__search input::placeholder{color:var(--jyl-grey-light)}
.jyl-dark .jyl-pp-drawer__search input{color:var(--jyl-white)}

.jyl-pp-drawer__body{flex:1;overflow:auto;padding:0 24px 16px;overscroll-behavior:contain}

/* accordion facet groups */
.jyl-pp-drawer__group{border:0;margin:0;padding:0;border-bottom:1px solid var(--jyl-beige-medium)}
.jyl-dark .jyl-pp-drawer__group{border-color:var(--jyl-grey-medium)}
.jyl-pp-drawer__group.is-filtered-out{display:none}

.jyl-pp-drawer__group button.jyl-pp-drawer__gbtn,
.jyl-pp-drawer__gbtn{
    appearance:none;-webkit-appearance:none;display:flex;align-items:center;gap:10px;
    width:100%;padding:22px 0;cursor:pointer;text-align:left;
    background:transparent;border:0;box-shadow:none;
    font-size:var(--jyl-fs-18);font-weight:var(--jyl-fw-medium);font-family:var(--jyl-font);
    color:var(--jyl-black);
}
.jyl-dark .jyl-pp-drawer__gbtn{color:var(--jyl-white)}
.jyl-pp-drawer__gbtn > svg{width:1rem;height:1rem;margin-left:auto;flex-shrink:0;transition:transform 150ms var(--jyl-ease)}
.jyl-pp-drawer__group.is-open .jyl-pp-drawer__gbtn > svg{transform:rotate(180deg)}

/* blue check + blue title when the group has an active selection AND is open
   (matches linealight's expanded state) */
.jyl-pp-drawer__gcheck{display:none;color:var(--jyl-blue);flex-shrink:0}
.jyl-pp-drawer__gcheck svg{width:14px;height:14px}
.jyl-pp-drawer__group.has-active .jyl-pp-drawer__gcheck{display:inline-flex}
.jyl-pp-drawer__group.has-active.is-open .jyl-pp-drawer__glabel{color:var(--jyl-blue)}

.jyl-pp-drawer__opts{display:flex;flex-direction:column;gap:8px;padding:2px 0 20px}
.jyl-pp-drawer__opts[hidden]{display:none}

/* full-width option rows: resting grey block, checked = light blue + blue
   border. The little checkbox square is hidden in the drawer; the row
   itself carries the state (linealight). */
.jyl-pp-drawer__opt.jyl-pp-filter__opt{
    padding:14px 16px;border-radius:6px;white-space:normal;
    background:var(--jyl-beige-light);border:1px solid transparent;
    transition:background-color 100ms var(--jyl-ease),border-color 100ms var(--jyl-ease);
}
.jyl-pp-drawer__opt.jyl-pp-filter__opt:hover{background:var(--jyl-beige-medium)}
.jyl-pp-drawer__opt .jyl-pp-filter__check{display:none}
.jyl-pp-drawer__opt:has(input:checked){
    background:var(--jyl-blue-xlight);border-color:var(--jyl-blue);
}
/* JS mirrors :has() into .is-checked for older engines */
.jyl-pp-drawer__opt.is-checked{
    background:var(--jyl-blue-xlight);border-color:var(--jyl-blue);
}
.jyl-dark .jyl-pp-drawer__opt.jyl-pp-filter__opt{background:var(--jyl-grey-medium)}
.jyl-dark .jyl-pp-drawer__opt:has(input:checked),
.jyl-dark .jyl-pp-drawer__opt.is-checked{background:var(--jyl-blue-dark);border-color:var(--jyl-blue-light)}
.jyl-pp-drawer__opt.is-filtered-out{display:none}

.jyl-pp-drawer__foot{
    display:flex;gap:12px;padding:16px 24px;
    border-top:1px solid var(--jyl-beige-medium);
}
.jyl-dark .jyl-pp-drawer__foot{border-color:var(--jyl-grey-medium)}
.jyl-pp-drawer__foot .jyl-btn{flex:1;justify-content:center;text-align:center}
.jyl-pp-drawer__foot .jyl-btn[hidden]{display:none}

/* footer buttons — hard override of Rey/Woo button chaos so both browsers
   render identically: Clear all = white + 1px black border; Apply = solid
   black, white text. Height / radius / type locked down explicitly. */
.jyl-pp-drawer__foot button.jyl-pp-drawer__clear,
.jyl-pp-drawer__foot button.jyl-pp-drawer__apply{
    appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;
    height:48px;padding:0 20px;cursor:pointer;box-shadow:none;
    border-radius:var(--jyl-radius-sm);
    font-size:var(--jyl-fs-14);font-weight:var(--jyl-fw-medium);font-family:var(--jyl-font);
    letter-spacing:var(--jyl-ls-sm);text-transform:none;
    transition:background-color 100ms var(--jyl-ease),border-color 100ms var(--jyl-ease),color 100ms var(--jyl-ease);
}
.jyl-pp-drawer__foot button.jyl-pp-drawer__clear{
    background:var(--jyl-white);color:var(--jyl-black);border:1px solid var(--jyl-black);
}
.jyl-pp-drawer__foot button.jyl-pp-drawer__clear:hover{background:var(--jyl-beige-light)}
.jyl-pp-drawer__foot button.jyl-pp-drawer__apply{
    background:var(--jyl-grey-dark);color:var(--jyl-white);border:1px solid var(--jyl-grey-dark);
}
.jyl-pp-drawer__foot button.jyl-pp-drawer__apply:hover{background:var(--jyl-grey-medium);border-color:var(--jyl-grey-medium)}
.jyl-dark .jyl-pp-drawer__foot button.jyl-pp-drawer__clear{background:transparent;color:var(--jyl-white);border-color:var(--jyl-white)}
.jyl-dark .jyl-pp-drawer__foot button.jyl-pp-drawer__apply{background:var(--jyl-white);color:var(--jyl-black);border-color:var(--jyl-white)}

/* ── Compare overlay ── */
.jyl-pp-compare__panel{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.98);
    width:min(960px,94vw);max-height:86vh;display:flex;flex-direction:column;
    background:var(--jyl-surface,var(--rey-body-bg));border-radius:var(--jyl-radius-md);
    box-shadow:var(--jyl-shadow-nav);opacity:0;
    transition:opacity var(--jyl-t300) var(--jyl-ease),transform var(--jyl-t300) var(--jyl-ease);
}
.jyl-dark .jyl-pp-compare__panel{background:var(--jyl-black)}
.jyl-pp-compare.is-open .jyl-pp-compare__panel{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(prefers-reduced-motion:reduce){.jyl-pp-compare__panel{transition:none}}

.jyl-pp-compare__head{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:16px;border-bottom:1px solid var(--jyl-beige-medium);
}
.jyl-dark .jyl-pp-compare__head{border-color:var(--jyl-grey-medium)}
.jyl-pp-compare__head h4{
    font-size:var(--jyl-fs-20);font-weight:var(--jyl-fw-medium);color:var(--jyl-black);
}
.jyl-dark .jyl-pp-compare__head h4{color:var(--jyl-white)}

.jyl-pp-compare__body{overflow:auto;padding:8px 16px 16px}
.jyl-pp-compare__table{width:100%;border-collapse:collapse}
.jyl-pp-compare__table th,
.jyl-pp-compare__table td{
    padding:12px 16px;text-align:left;vertical-align:middle;white-space:nowrap;
    border-bottom:1px solid var(--jyl-beige-medium);
    font-size:var(--jyl-fs-14);letter-spacing:var(--jyl-ls-md);color:var(--jyl-black);
}
.jyl-dark .jyl-pp-compare__table th,
.jyl-dark .jyl-pp-compare__table td{border-color:var(--jyl-grey-medium);color:var(--jyl-white)}
.jyl-pp-compare__table th{font-weight:var(--jyl-fw-medium);position:sticky;left:0;background:var(--jyl-surface,var(--rey-body-bg))}
.jyl-dark .jyl-pp-compare__table th{background:var(--jyl-black)}
.jyl-pp-compare__table tr:last-child th,
.jyl-pp-compare__table tr:last-child td{border-bottom:0}
.jyl-pp-compare__code{font-weight:var(--jyl-fw-bold)}
.jyl-pp-compare__view{white-space:nowrap}

/* ── v1.2.1 — desktop filter bar sticks below the product nav
   (linealight keeps heading + filters inside the sticky portal) ── */
@media(min-width:898px){
    .jyl-pp-codes__filters--top{
        position:sticky;
        top:calc(var(--jyl-hdr-h) + var(--jyl-pp-nav-h,72px));
        z-index:39; /* below .jyl-pp-nav (40) */
        background:var(--jyl-surface,var(--rey-body-bg));
    }
    body.jyl-pp--codes .jyl-pp-codes__filters--top{background:var(--jyl-surface,var(--rey-body-bg))}
    .jyl-dark .jyl-pp-codes__filters--top{background:var(--jyl-black)}
}

/* ──────────────────────────────────────────────
   11. v1.3.0 — downloads accordion, matrix pager,
       LQIP blur-up, per-code table badge
   ────────────────────────────────────────────── */

/* ── Downloads accordion ── */
.jyl-pp-dl--accordion .jyl-pp-acc{
    border-bottom:1px solid var(--jyl-beige-medium);
}
.jyl-dark .jyl-pp-dl--accordion .jyl-pp-acc{border-color:var(--jyl-grey-medium)}
.jyl-pp-dl--accordion .jyl-pp-acc:last-child{border-bottom:0}
.jyl-pp-acc__head{margin:0}
/* The header is a <button>; Rey / WooCommerce / Elementor ship aggressive
   global button styles (auto width, inline-block, centered text, panel
   backgrounds) that out-specify a single class — that is why the header
   appeared centred instead of label-left / chevron-right. Scope higher and
   hard-reset the layout-critical props so our rule wins regardless of theme. */
.jyl-pp-dl--accordion .jyl-pp-acc__btn{
    -webkit-appearance:none!important;appearance:none!important;
    display:flex!important;align-items:center;justify-content:space-between!important;
    gap:12px;width:100%!important;margin:0!important;
    padding:18px 16px;min-height:0;
    background:transparent!important;border:0!important;border-radius:0!important;
    box-shadow:none!important;outline-offset:-2px;
    text-align:left!important;cursor:pointer;
    font-family:inherit;font-size:var(--jyl-fs-16);
    font-weight:var(--jyl-fw-medium);line-height:1.2;
    letter-spacing:var(--jyl-ls-md);color:var(--jyl-black);
}
@media(min-width:1198px){
    .jyl-pp-dl--accordion .jyl-pp-acc__btn{padding:22px 16px;font-size:var(--jyl-fs-20)}
}
.jyl-pp-dl--accordion .jyl-pp-acc__btn:hover,
.jyl-pp-dl--accordion .jyl-pp-acc__btn:focus{background:transparent!important}
.jyl-dark .jyl-pp-acc__btn{color:var(--jyl-white)}
.jyl-pp-acc__label{display:inline-flex;align-items:center;gap:8px;min-width:0}
.jyl-pp-acc__chev{display:inline-flex;flex-shrink:0;color:var(--jyl-grey-light);transition:transform var(--jyl-t200) var(--jyl-ease)}
.jyl-pp-acc__chev svg{width:1rem;height:1rem}
.jyl-pp-acc.is-open .jyl-pp-acc__chev{transform:rotate(180deg)}
.jyl-pp-acc__body{padding-bottom:12px;animation:jyl-pp-fadein .25s var(--jyl-ease) both}
.jyl-pp-acc__body[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.jyl-pp-acc__body{animation:none}.jyl-pp-acc__chev{transition:none}}

/* ── Matrix pager (?matrix-page) ── */
.jyl-pp-codes__pager{
    display:flex;align-items:center;justify-content:center;gap:8px;
    max-width:var(--jyl-max-w);margin:24px auto 8px;padding:0 12px;
}
@media(min-width:898px){.jyl-pp-codes__pager{padding:0 32px}}
.jyl-pp-codes__pager[hidden]{display:none}
.jyl-pp-pager__btn,.jyl-pp-pager__page{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:40px;height:40px;padding:0 8px;cursor:pointer;
    border:1px solid var(--jyl-beige-medium);border-radius:var(--jyl-radius-sm);
    background:var(--jyl-white);color:var(--jyl-black);
    font-size:var(--jyl-fs-14);font-weight:var(--jyl-fw-medium);
    transition:background-color var(--jyl-t200) var(--jyl-ease),border-color var(--jyl-t200) var(--jyl-ease);
}
.jyl-dark .jyl-pp-pager__btn,.jyl-dark .jyl-pp-pager__page{
    background:var(--jyl-grey-dark);border-color:var(--jyl-grey-medium);color:var(--jyl-white);
}
.jyl-pp-pager__btn svg{width:1rem;height:1rem}
.jyl-pp-pager__pages{display:inline-flex;gap:4px}
.jyl-pp-pager__page.is-current{
    background:var(--jyl-black);border-color:var(--jyl-black);color:var(--jyl-white);
}
.jyl-dark .jyl-pp-pager__page.is-current{background:var(--jyl-white);border-color:var(--jyl-white);color:var(--jyl-black)}
.jyl-pp-pager__btn:disabled{opacity:.4;cursor:not-allowed}
@media(hover:hover){
    .jyl-pp-pager__btn:not(:disabled):hover,
    .jyl-pp-pager__page:not(.is-current):hover{border-color:var(--jyl-grey-light)}
}

/* page-hidden matrices */
.jyl-pp-matrix.is-page-off{display:none}

/* ── LQIP blur-up ── */
.jyl-pp-lqip{background-repeat:no-repeat}
.jyl-pp-lqip.jyl-pp-gallery__img,
.jyl-pp-lqip.jyl-pp-detail__img{opacity:0;transition:opacity var(--jyl-t300) var(--jyl-ease)}
.jyl-pp-lqip.is-loaded{opacity:1}
@media(prefers-reduced-motion:reduce){
    .jyl-pp-lqip.jyl-pp-gallery__img,
    .jyl-pp-lqip.jyl-pp-detail__img{transition:none;opacity:1}
}

/* ── Per-code badge in the table Code cell ── */
.jyl-pp-table__code + .jyl-pp-badge{
    margin-left:8px;vertical-align:middle;
    padding:2px 8px;font-size:var(--jyl-fs-12);
}

/* ── v1.3.2 — soft (no-reload) code-detail view ── */
.jyl-pp-codemount:empty{display:none}
.jyl-pp-codemount .jyl-pp-codepage{animation:jyl-pp-fadein .25s var(--jyl-ease) both}
@media(prefers-reduced-motion:reduce){.jyl-pp-codemount .jyl-pp-codepage{animation:none}}
html.jyl-pp-codeloading,
body.jyl-pp-codeloading{cursor:progress}
body.jyl-pp-codeloading .jyl-pp-table tbody tr[data-jyl-pp-row]{pointer-events:none}

/* ══════════════════════════════════════════════════════════
   APPEND-ONLY PATCH — WhatsApp CTA on the product hero
   Paste this block at the END of product-page.css.
   Nothing above needs to change: the two .jyl-pp-hero__cta
   rules below share specificity (0,1,0) with the originals,
   so being later in the file they win the cascade; the green
   button rules use (0,3,0) to out-specify the existing blue
   paint on .jyl-pp-hero__ctaBtn.jyl-btn (0,2,0).
   ══════════════════════════════════════════════════════════ */

/* ── v1.3.25 — WhatsApp CTA (Customizer -> WhatsApp Settings) ── */

/* CTA row: stack on mobile, side-by-side on desktop. Overrides the
   earlier .jyl-pp-hero__cta rules by cascade order (same specificity). */
.jyl-pp-hero__cta{display:flex;flex-direction:column;gap:12px}
@media(min-width:898px){.jyl-pp-hero__cta{flex-direction:row;align-items:center;gap:16px}}

/* Green WhatsApp button. The anchor carries .jyl-btn + .jyl-pp-hero__ctaBtn,
   so it inherits the pill shape / padding / radius from the existing
   .jyl-pp-hero__ctaBtn.jyl-btn rule (0,2,0) — which also paints it BLUE.
   (0,3,0) below repaints it WhatsApp green and neutralises the blue rule's
   hover filter. */
.jyl-pp-hero__cta .jyl-pp-hero__waBtn.jyl-btn{
    gap:8px;
    background:#25D366;
    color:var(--jyl-white);
}
.jyl-pp-hero__cta .jyl-pp-hero__waBtn.jyl-btn:hover,
.jyl-pp-hero__cta .jyl-pp-hero__waBtn.jyl-btn:focus-visible{
    background:#1EB857;
    color:var(--jyl-white);
    filter:none;
}
.jyl-pp-hero__waIcon{flex:0 0 auto;display:block}