/* Start of SERIES HERO */
/* --- GLOBAL: never stretch images or icons --- */
img {
    max-width: 100%;
    height: auto;
}

/* Bricks icons sometimes stretch in flex/grid parents */
.brxe-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.brxe-icon svg {
    width: 1em;
    height: 1em;
}

/* If a circle is made with a DIV, keep it perfectly round everywhere */
.is-circle,
.pp-cta-circle,
.pp-round-cta {
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    /* never stretch in flex/grid */
}

/* ============== EURO-STYLE SERIES HERO ============== */
/* Colors & tokens */
.pp-series-hero {
    --pp-accent: #22a0ad;
    /* teal */
    --pp-accent-rgb: 34, 160, 173;
    --pp-hero-max: 1240px;
    --pp-gap: 24px;
    --pp-radius: 140px;
    /* big top-left radius on image */
    --pp-circle: 66px;
    /* round button size */
    --pp-arrow: 22px;
    /* arrow size */
    position: relative;
    background: #fff;
    padding: clamp(28px, 3.5vw, 60px) 0;
}

/* Left stack */
.pp-hero-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

/* Logo size */
.pp-logo {
    width: clamp(360px, 34vw, 760px) !important;
    /* tweak values to taste */
    height: auto !important;
}

/* Headline */
.pp-hero-title {
    color: var(--pp-accent);
    font-weight: 700;
    line-height: 1.08;
    max-width: 520px;
    /* forces a 2-line wrap like Euro */
    margin: 6px 0 8px;
}

/* CTA row: text left + circle right */
.pp-cta-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

/* “Build My Bin” link (no pill, teal) */
.pp-cta-link,
.pp-cta-link a {
    color: var(--pp-accent);
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
}

/* Round CTA button (the whole Div is linked) */
.pp-round-cta {
    width: var(--pp-circle);
    height: var(--pp-circle);
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--pp-accent);
    background: #3e90c9, .12;
    box-shadow: 0 6px 16px #3e90c9, .18;
    line-height: 0;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.pp-round-cta:hover {
    background: rgba(var(--pp-accent-rgb), .18);
    transform: translateY(2px);
    box-shadow: 0 10px 20px rgba(var(--pp-accent-rgb), .24);
}

.pp-round-cta:focus-visible {
    outline: 3px solid rgba(var(--pp-accent-rgb), .4);
    outline-offset: 3px;
}

/* Arrow inside the circle */
.pp-round-cta__icon {
    width: var(--pp-arrow);
    height: var(--pp-arrow);
    color: var(--pp-accent);
    pointer-events: none;
    /* keep the whole circle clickable */
    animation: hero-bob 1.6s ease-in-out infinite;
}

/* Bricks icon SVG normalization (teal stroke) */
.pp-round-cta__icon svg {
    stroke: var(--pp-accent) !important;
    fill: none !important;
    stroke-width: 2.25px;
}

/* Optional background sweeps (subtle) */
.pp-series-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: min(56%, 760px);
    z-index: -1;
    background: radial-gradient(140% 120% at -10% 30%, rgba(0, 0, 0, .05) 20%, transparent 21%), radial-gradient(140% 120% at -10% 70%, rgba(0, 0, 0, .03) 20%, transparent 21%), #f8f9fa;
}

.pp-series-hero::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -12vw;
    width: 60vw;
    height: 60vw;
    z-index: -1;
    background: #fff;
    border-radius: 0 0 0 60vw;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .06) inset;
}

/* Animation */
@keyframes hero-bob {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(6px)
    }

    100% {
        transform: translateY(0)
    }
}

/* Make ABSOLUTELY sure each child sits in its own column */
.pp-hero-left {
    grid-column: 1 / 2 !important;
}

.pp-hero-img {
    grid-column: 2 / 3 !important;
    display: block !important;
    width: 100% !important;
    object-fit: cover;
    object-position: 60% 50%;
    border-top-left-radius: 140px;
    margin: 0 !important;
}

/* Stack on tablet/mobile */
@media (max-width: 1024px) {
    .pp-hero-grid {
        display: block !important;
    }
}

/* Smaller, non-bold hero title (keeps your teal color) */
.pp-hero-title {
    font-weight: 400;
    /* not bold */
    font-size: clamp(32px, 4.2vw, 56px);
    /* smaller than before */
    line-height: 1.12;
    margin: .35em 0 .5em 0;
}

/* Put the text link and circle on one line with spacing */
.pp-cta-row {
    display: flex;
    align-items: center;
}

/* "Build My Bin" text — brand blue */
.pp-cta-link {
    color: #2a86c8 !important;
    /* tweak if you have a brand token */
    text-decoration: none;
    font-weight: 500;
}

.pp-cta-link:hover {
    color: #1d6fb1 !important;
}

/* Circle + arrow (keeps your teal) */
.pp-cta-circle {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    border: 2px solid #2aa6ad;
    background: rgba(42, 166, 173, .08);
    display: grid;
    place-items: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    animation: arrowFloat 1.8s ease-in-out infinite;
}

.pp-cta-circle svg {
    width: 24px;
    height: 24px;
    stroke: #2aa6ad;
}

/* Smooth edge: use BOTTOM-LEFT radius (not top-right) */
@media (min-width: 1025px) {
    .pp-hero-img {
        border-top-left-radius: 0 !important;
        object-position: 60% 50%;
    }
}

/* Subtle float ani for the arrow */
@keyframes arrowFloat {

    0%,
    100% {
        transform: translateY(-2px);
    }

    50% {
        transform: translateY(2px);
    }
}

/* ============================ SAFE OVERRIDES (keep classes) ============================ */
/* 1) Attach hero to the top (no top padding/margin from the section) */
.pp-series-hero {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* If your theme/Bricks adds default top padding to the Section itself, this forces it off too: */
.brxe-section.pp-series-hero {
    --section-padding-top: 0 !important;
    /* Bricks token, if present */
}

/* 2) Make the gap bigger + give more room to the image column */
.pp-hero-grid {
    /* Make the image column wider than the left column */
    grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr) !important;
}

/* 3) Right image: taller, fills the column, smooth BOTTOM-LEFT corner */
.pp-hero-img {
    /* fill the column width */
    width: 100% !important;
    /* make it much taller */
    object-fit: cover;
    object-position: 60% 50%;
    /* smooth edge: bottom-left only */
    border-top-left-radius: 0 !important;
    /* ensure nothing pushes it away */
    margin: 0 !important;
    display: block !important;
    grid-column: 2 / 3 !important;
}

/* 4) Keep your button intact – no class changes needed. (These are just safety rules so the whole circle is clickable.) */
.pp-round-cta {
    display: grid !important;
    place-items: center !important;
}

.pp-round-cta__icon,
.pp-round-cta__icon svg {
    pointer-events: none !important;
}

/* Make the hero full-bleed only here */
.pp-series-hero {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Kill any inner container/gutter Bricks might add inside the Section */
.pp-series-hero .brxe-container,
.pp-series-hero .bricks-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Grid spans the full viewport width; image column gets the extra space */
.pp-hero-grid {
    max-width: none !important;
    width: 100% !important;
    padding-inline: 0 !important;
    /* widen the image column and grow the inter-column gap */
    grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr) !important;
}

/* Right image: tall and flush to the edge with the rounded bottom-left */
.pp-hero-img {
    display: block !important;
    grid-column: 2 / 3;
    width: 100%;
    height: min(78vh, 860px);
    min-height: 620px;
    object-fit: cover;
    object-position: 60% 50%;
    border-top-left-radius: 0 !important;
    margin: 0 !important;
}

/* Optional: add a little left breathing room to the text stack instead of using container padding */
.pp-hero-left {
    padding-left: clamp(12px, 3vw, 28px);
}

.pp-series-logo,
/* your logo image */
.pp-logo {
    display: block;
    align-self: flex-start;
    /* no centering drift */
    margin: 0 0 14px 0;
    /* snug above headline */
}

/* ── Logo bigger than the headline ───────────────────────────── */
.pp-series-logo {
    /* scale up on all viewports; stays responsive */
    width: 900px !important;
    height: auto;
    margin: 0 0 10px 0;
}

/* ── Headline lighter + a touch smaller (Euro look) ──────────── */
.pp-hero-title {
    font-weight: 300 !important;
    /* thinner */
    font-size: clamp(28px, 3.3vw, 44px) !important;
    line-height: 1.1;
    letter-spacing: .01em;
}

/* =============================== HERO: base (desktop first) =============================== */
.pp-series-hero {
    position: relative;
    overflow: hidden;
    /* keeps rounded image corner tidy */
}

.pp-hero-left {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.2vw, 16px);
    align-items: flex-start;
    padding-left: clamp(8px, 2.5vw, 28px);
}

/* LOGO: never distort; scale down only; fixed ratio */
.pp-series-logo,
.pp-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: clamp(260px, 38vw, 560px);
    margin: 0 0 12px 0;
}

/* TITLE: slightly lighter, fluid size */
.pp-hero-title {
    font-weight: 300;
    font-size: clamp(28px, 3.3vw, 44px);
    line-height: 1.12;
    letter-spacing: .01em;
    margin: .3em 0 .5em 0;
    max-width: 36ch;
}

/* CTA row (text + circle) */
.pp-cta-row {
    display: flex;
    align-items: center;
}

.pp-cta-link {
    color: #2a86c8;
    text-decoration: none;
    font-weight: 500;
    font-size: clamp(16px, 1.2vw, 18px);
}

/* Circle button – never stretch, scale fluidly */
.pp-cta-circle,
.pp-round-cta {
    inline-size: clamp(70px, 4.5vw, 65px);
    /* width = height (aspect-ratio above) */
    border: 2px solid #2aa6ad;
    background: rgba(42, 166, 173, .08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

/* Arrow centered + thicker stroke for bold look */
.pp-cta-circle svg,
.pp-round-cta svg {
    width: clamp(18px, 1.6vw, 26px);
    height: clamp(18px, 1.6vw, 26px);
    stroke: #2aa6ad;
    stroke-width: 3.25px;
    /* <-- bold */
}

/* Right image: fill column, preserve crop, rounded bottom-left */
.pp-hero-img {
    grid-column: 2 / 3;
    display: block;
    width: 100%;
    height: min(78vh, 860px);
    min-height: 620px;
    object-fit: cover;
    object-position: 60% 50%;
    border-top-left-radius: 0;
    margin: 0;
}

/* ---- Large tablets (<= 1024px): keep TWO columns ---- */
@media (max-width: 1024px) {
    .pp-hero-grid {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
        column-gap: clamp(28px, 6vw, 72px) !important;
        /* smaller gap on narrower screens */
        padding-inline: var(--pp-side) !important;
        /* left “margin” shrinks with vw */
        row-gap: 0 !important;
    }

    .pp-hero-left {
        padding-left: clamp(6px, 3.5vw, 20px) !important;
        /* a touch of local padding */
        align-items: flex-start;
        text-align: left;
    }

    /* Keep logo and circle from stretching */
    .pp-series-logo,
    .pp-logo {
        max-width: clamp(220px, 42vw, 420px) !important;
        height: auto !important;
    }

    .pp-round-cta,
    .pp-cta-circle {
        aspect-ratio: 1 / 1;
        flex: 0 0 auto;
    }
}


/* END of Series HERO */
/* ========================================================= DETAILS SECTION (Euro Series) – Image left, text right ========================================================= */
.pp-series-detail {
    /* tokens */
    --pp-accent: #22a0ad;
    --pp-max: 1240px;
    --pp-gap: clamp(28px, 5vw, 80px);
    --pp-r: 24px;
    /* small radius */
    --pp-big-r: 140px;
    /* big corner like the hero */
    padding-block: clamp(44px, 7vw, 96px);
    background: #fff;
}

/* Two-column grid – photo gets more space */
.pp-2col-grid {
    display: grid;
    grid-template-columns: minmax(0, .62fr) minmax(0, .38fr);
    gap: var(--pp-gap);
    max-width: var(--pp-max);
    margin-inline: auto;
    align-items: start;
}

/* Left image: tall, cropped, big rounded bottom-right corner */
.pp-detail-img {
    display: block;
    /* kill inline gap */
    object-fit: cover;
    /* no distortion */
    object-position: 50% 50%;
    border-radius: var(--pp-r);
}

/* Right column stack */
.pp-detail-right {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.6vw, 18px);
    padding-top: clamp(0px, 1vw, 10px);
    /* small nudge so first baseline feels aligned */
}

/* Heading styles */
.pp-detail-title {
    color: var(--pp-accent);
    font-weight: 500;
    /* not heavy, just crisp */
    font-size: clamp(36px, 3.6vw, 56px);
    line-height: 1.12;
}

/* Small note (e.g., patent) */
.pp-detail-note {
    color: #6b7a84;
    font-size: clamp(13px, 1.1vw, 14px);
    letter-spacing: .01em;
    margin: 0 0 .25rem 0;
}

/* Body copy */
.pp-detail-copy {
    color: #44545e;
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.6;
    margin: 0;
}

/* Divider + subheading */
.pp-detail-hr {
    height: 2px;
    border: 0;
    width: 100%;
    background: lightgrey;
    margin: clamp(24px, 3vw, 28px) 0 clamp(10px, 2vw, 18px);
}

.pp-detail-subtitle {
    color: #1f2a31;
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 600;
    margin: 0;
}

/* ========================= Responsive adjustments ========================= */
@media (max-width: 1200px) {
    .pp-2col-grid {
        gap: clamp(22px, 4vw, 40px);
    }

}

@media (max-width: 1024px) {

    /* Stack image on top, text below */
    .pp-2col-grid {
        grid-template-columns: 1fr;
        padding-inline: clamp(14px, 4vw, 24px);
    }
    .pp-detail-title {
        font-size: clamp(32px, 6.2vw, 40px);
    }
}

/* Base gallery container (keeps your image size) */
.pp-gallery {
    position: relative;
    display: inline-block;
    line-height: 0;
}

/* show only active slide (your .pp-detail-img sizes stay intact) */
.pp-gallery .pp-detail-img {
    display: none;
}

.pp-gallery .pp-detail-img.is-active {
    display: block;
}

/* Arrow buttons */
.pp-gallery .pp-arrow {
    position: absolute !important;
    /* beat any Bricks inline position */
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(255, 255, 255, .90) !important;
    /* look & feel */
    width: 60px;
    height: 60px;
    /* touch target */
    border-radius: 9999px;
    border: 1px solid rgba(34, 160, 173, .28);
    /* subtle outline */
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
    cursor: pointer;
    /* ensure the icon sits perfectly centered */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    line-height: 0 !important;
}

/* LEFT arrow */
.pp-gallery .pp-prev {
    left: 12px !important;
    /* lock to left edge */
    right: auto !important;
}

/* RIGHT arrow – force off the left side if Bricks applied it inline */
.pp-gallery .pp-next {
    right: 12px !important;
    /* lock to right edge */
    left: auto !important;
}

/* Normalize Bricks inner wrappers & make the icon bold/teal */
.pp-gallery .pp-arrow .bricks-button-label {
    display: none !important;
}

.pp-gallery .pp-arrow .bricks-button-icon,
.pp-gallery .pp-arrow i {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

/* SVG/Font icon color + weight */
.pp-gallery .pp-arrow svg {
    width: 22px;
    height: 22px;
    stroke: #22a0ad;
    stroke-width: 3.25px;
    fill: none;
}

.pp-gallery .pp-arrow i {
    color: #3E90C9;
    font-size: 22px;
}



/* Responsive nudge */
@media (max-width:1024px) {
    .pp-gallery .pp-arrow {
        width: 48px;
        height: 48px;
    }

    .pp-gallery .pp-arrow svg {
        width: 18px;
        height: 18px;
        stroke-width: 3px;
    }
}

/* Your existing size/crop rules for .pp-detail-img stay as-is */
/* Only show the active slide */
.pp-gallery .pp-detail-img {
    display: none;
}

.pp-gallery .pp-detail-img.is-active {
    display: block;
}

/* Arrows (you can keep your current styles; these are examples) */
.pp-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .22);
    transition: background .2s ease, transform .15s ease;
}

.pp-prev {
    left: 14px;
}

.pp-next {
    right: 14px;
}

/* Base arrow button — set explicit base colors and transitions */
.pp-arrow{
  /* if your arrow already has a background, keep it; otherwise set one: */
  background-color: transparent;         /* or your current base */
  border-color: transparent;             /* adjust if you have borders */
  transition:
    background-color .30s ease,
    color .30s ease;                     /* in case arrow is text-only */
}

/* Icon inside the arrow — smoothly change its color */
.pp-arrow .ti-arrow-right,
.pp-arrow .ti-arrow-left{
  /* set an explicit base so it can interpolate */
  color: inherit;                        /* or a hex like #3e90c9 */
  transition: color .30s ease;
}

/* Hover: fill blue, icon turns white */
.pp-arrow:hover{
  background-color:#3e90c9 !important;
}
.pp-arrow:hover .ti-arrow-right,
.pp-arrow:hover .ti-arrow-left{
  color:#fff !important;
}

/* Keyboard focus parity (optional but recommended) */
.pp-arrow:focus-visible{
  background-color:#3e90c9 !important;
}
.pp-arrow:focus-visible .ti-arrow-right,
.pp-arrow:focus-visible .ti-arrow-left{
  color:#fff !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .pp-arrow,
  .pp-arrow .ti-arrow-right,
  .pp-arrow .ti-arrow-left{ transition:none; }
}


/* Hide all slides by default; show only the active one */
.pp-gallery .pp-detail-img,
.pp-gallery .pp-detail-image {
    display: none;
}

.pp-gallery .is-active {
    display: block;
}

/* Force our button styles to win over Bricks Theme Styles / inline */
.pp-cta-grid a.bricks-button.pp-btn,
.pp-cta-grid button.pp-btn,
.pp-cta-grid .brxe-button .bricks-button.pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 22px !important;
    border-radius: 9999px !important;
    font-weight: 700;
    line-height: 1.1;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
}


/* ========================================== 2) STICKY LEFT IMAGE (not parallax) Container: .pp-cta-row Left: .pp-gallery Right: .pp-detail-right ========================================== */
/* If your header is fixed, set the offset here */
:root {
    --header-offset: 88px;
}

/* tweak to your header height */
/* Sticky gallery: follows scroll, stops at end of .pp-detail-right */
.pp-gallery {
    position: sticky;
    top: calc(var(--header-offset) + -40px);
    /* stays below header */
    height: calc(100vh - var(--header-offset) - 32px);
    /* fits viewport */
    overflow: hidden;
    border-radius: 16px;
    align-self: start;
    /* let sticky height apply */
}

/* Make media/slider fill the sticky box */
.pp-gallery img,
.pp-gallery picture,
.pp-gallery .brxe-image,
.pp-gallery .splide__track,
.pp-gallery .swiper,
.pp-gallery .swiper-wrapper {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

/* Disable sticky on small screens */
@media (max-width:1024px) {
    .pp-gallery {
        position: static;
        height: auto;
    }
}

/* keep class name */
.pp-topline {
    border-top: 2px solid #E3E6EA !important;
    /* try 2px; use 3px if you want bolder */
}

/* CTA row (text + circle) */
.pp-cta-row {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 30px);
}

/* Tighten spacing between the 4 CTAs */
/* ONE source of truth for the 4-button grid */
.pp-detail-right .pp-cta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 0.4fr));
    gap: 20px !important;
    /* controls both row + column gap */
    margin-top: 6px;
    /* small space above the grid; set to 0 if not wanted */
}

/* Grid auto-fits 3 or 4 cards */
.pp-feature-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: clamp(16px,2.4vw,28px);
  align-items: stretch;
}

/* Card shell */
.pp-feature-card{
  background:#f3f9f8;
  border-radius:22px;
  overflow:hidden;
  display:flex; flex-direction:column;
  height:100%;
  text-decoration:none;

  /* add this: tiny, smooth animation */
  transition: transform 180ms ease;
}

.pp-feature-card:hover{
  transform: translateY(-2px);
}

/* Media: image/video stacked in the same box */
.pp-feature-media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
}
.pp-feature-img,
.pp-feature-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.pp-feature-video{ opacity:0; transition:opacity .25s ease; }
.pp-feature-card:hover .pp-feature-video{ opacity:1; }
.pp-feature-card:hover .pp-feature-img{ opacity:0; }

/* Body */
.pp-feature-body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.pp-feature-title{ margin-top: 10px !important; color:#22a0ad; font-weight:700; font-size:clamp(18px,1.5vw,22px); margin:0; }
.pp-feature-text{ color:#5a6b75; line-height:1.55; margin:0; font-size: 19px;}

/* Mobile stack */
@media (max-width:640px){ .pp-feature-grid{ grid-template-columns:1fr; } }

/* --- RESET the old hover-reveal --- */
.pp-feature-video{ opacity:1 !important; transition:none !important; }
.pp-feature-card:hover .pp-feature-video,
.pp-feature-card:hover .pp-feature-img{ opacity:1 !important; }

/* Hide empty images that Bricks outputs with no selection */
.pp-feature-img[src=""], .pp-feature-img:not([src]){ display:none !important; }

/* Keep media filling the box */
.pp-feature-media{ position:relative; overflow:hidden; }
.pp-feature-media > img,
.pp-feature-media > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---- PRIMARY LOGIC (modern browsers): if a real video src exists, show video, hide image ---- */
.pp-feature-media:has(video[src]:not([src=""])) .pp-feature-video{ display:block !important; }
.pp-feature-media:has(video[src]:not([src=""])) .pp-feature-img{  display:none  !important; }

/* Otherwise (no usable video src) -> hide video, let image show */
.pp-feature-media:not(:has(video[src]:not([src=""]))) .pp-feature-video{ display:none !important; }

/*REQUEST A QUOTE SECTION */
/* =========================
   REQUEST A QUOTE (final)
   ========================= */
.pp-request-quote{
  --rq-green: #7cc143;               /* pill green */
  --rq-blue:  #2aa2e6;
  --rq-accent:#22a0ad;
  --rq-text:  #16324f;

}

/* LEFT: vertically center the copy */
.rq-left{
  display:flex;
  flex-direction:column;
  justify-content:center;             /* <— centers the text block vertically */
}

.rq-left .rq-title{
  color: var(--rq-accent);
  font-weight: 400;
  line-height: 1.06;
  font-size: clamp(36px,4.6vw,72px);
  letter-spacing:.005em;
  margin: 0 0 .45em 0;
}
.rq-left .rq-sub{
  color:#4b5b67;
  font-weight:500;
  font-size: clamp(18px,1.8vw,26px);
  margin: 0 0 22px 0;
}

/* Reusable button (unchanged look) */
.pp-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 28px;
  border-radius:18px;
  font-weight:700;
  text-decoration:none;
  border:1px solid transparent;
}

/* RIGHT: photo fills the entire section height */
.rq-right{ display:flex; }            /* gives a height context */
.rq-media{
  position:relative;
  overflow:hidden;                    /* <— keeps the green pill inside the photo */
  width:100%;
  height:100%;                        /* <— fill grid row height */
}


/* -------------------------
   GREEN PILL INSIDE IMAGE
   bottom-left BIG radius,
   top-right SMALL radius
   ------------------------- */
:root{
  --rq-pill-left: 230px;              /* big bottom-left curve */
  --rq-pill-right: 30px;              /* small top-right curve */
}

.rq-banner{
  position:absolute;
  left:0;                             /* stays inside the image */
  bottom:0;
  z-index:2;

  width: clamp(66%, 72%, 80px);

  background: rgba(124,193,67,.92);
  color:#fff;

  /* TL   TR               BR  BL  */
  border-radius: 0px 80px 0px 80px;

  box-shadow: 0 18px 32px rgba(0,0,0,.14);
}
.rq-image{
  border-radius: 0px 00px 0px 80px;
  clip-path: inset(0 7% 0 0);

}
.rq-right{
  border-radius: 0px 00px 0px 80px;
}
.rq-media{
  border-radius: 0px 00px 0px 80px;
}
.rq-banner .rq-banner-title{
  margin:0;
  font-weight:600;
  line-height:1.28;
  letter-spacing:.02em;
  font-size: clamp(20px,1.9vw,30px);
  max-width: 36ch;
}

/* Tablet/mobile */
@media (max-width:1024px){
  .pp-request-quote .rq-grid{ grid-template-columns:1fr; }
  .rq-banner{
    width:86%;
    border-radius: 0 var(--rq-pill-right) 0 calc(var(--rq-pill-left) - 40px)
                   / 0 var(--rq-pill-right) 0 calc(var(--rq-pill-left) - 40px);
  }
}

/* =========================
   RESPONSIVE ADD-ON ONLY
   (does NOT affect ≥1441px)
   ========================= */

/* Safety: never allow <img> to behave like an inline element */
.rq-image{ display:block; }

/* ---------- Large laptops (1025–1440) ---------- */
@media (max-width:1440px) and (min-width:1025px){

  .rq-media{ height: 100%; overflow: hidden; }
  .rq-image{
    width: 100%;
    height: 100%;
    object-fit: cover;                    /* no stretching */
    object-position: 45% 50%;             /* trims a little from the right */
  }
}

/* ---------- Tablets (≤1024) ---------- */
@media (max-width:1024px){
    /* keep left content left-aligned */

  .rq-media{
    height: clamp(360px, 54vh, 620px);    /* big visual without distortion */
    border-radius: 0 0 0 80px;            /* keep your curved bottom-left */
    overflow: hidden;
  }
  .rq-image{
    width: 100%;
    height: 100%;
    object-fit: cover;                    /* prevents stretching */
    object-position: 50% 50%;
    clip-path: none;                      /* remove extra trimming on small */
    border-radius: inherit;
  }

  .rq-banner{
    left: 0;
    width: 86%;
    padding: clamp(14px, 3.4vw, 22px) clamp(18px, 4vw, 28px);
    border-radius: 0 30px 0 80px;         /* proportionate pill corners */
  }
}

/* ---------- Phones (≤768) ---------- */
@media (max-width:768px){
  .rq-left .rq-title{
    font-size: clamp(28px, 7.5vw, 40px);
    line-height: 1.08;
  }
  .rq-left .rq-sub{
    font-size: clamp(16px, 3.2vw, 20px);
  }
}

/* ---------- Small phones (≤480) ---------- */
@media (max-width:480px){
  .rq-media{ height: clamp(260px, 56vw, 400px); }

  .rq-banner{
    width: 92%;
    padding: 12px 16px 14px;
    border-radius: 0 22px 0 64px;         /* a touch softer on small screens */
  }

  .pp-btn{ padding: 12px 18px; }          /* keep the button comfy */
}


/* END OF REQUEST A QUOTE SECTION */

/* WHAT MAKES THIS PRODUCT GREAT */
/* Round CTA button (the whole Div is linked) */
.pp-round-cta2 {
    display: grid;
    place-items: center;
    border-radius: 50%;
    line-height: 0;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.pp-round-cta2:hover {
    background: rgba(var(--pp-accent-rgb), .18);
    transform: translateY(2px);
}

.pp-round-cta2:focus-visible {
    outline: 3px solid rgba(var(--pp-accent-rgb), .4);
    outline-offset: 3px;
}

.pp-round-cta2 {
    inline-size: clamp(20px, 2.2vw, 65px);
    /* width = height (aspect-ratio above) */
    border: 2px solid #3e90c9;
}
.pp-round-cta2 svg {
    stroke: #2aa6ad;
    stroke-width: 3.25px;
    /* <-- bold */
}
.pp-round-cta2 {
    aspect-ratio: 1 / 1;
    border-radius: 99px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    /* never stretch in flex/grid */
}
@media (max-width: 1750px) {
    .pp-card-grid{
        width: 90% !important;
    }
    #brxe-xdpntj{
        margin-left: 165px !important;
    }
}
/* WHAT MAKES THIS PRODUCT GREAT */
/* SERIES PAGE MOBILE RESPONSIVENESS */
/* FOR LAPTOP */
@media (max-width: 1600px) {
    /* Search Bar */
    .pp-btn2{
        padding: 12px 11px !important;
    }
    .pp-btn2, .pp-btn2.pp-btn2{
        font-size: 18px !important;
    }
    .pp-product-reviews-star svg{ width:22px; height:22px; fill: currentColor; stroke:none; }
    .product-reviews{ font-size: 20px !important;}
    .pp-hero-left {
        margin-top: 0px !important;
    }

    .pp-hero-grid {
        margin-left: 90px !important;
    }

    .pp-hero-title {
        font-size: 40px !important;
        margin-bottom: 50px !important;
    }

    .pp-hero-img {
        min-height: 670px !important;
        margin: 0px 14px !important;
        height: 10px !important;
    }
    #brxe-fkkaoh {
    margin-right: 0px !important;
    }
    .pp-stock-colors .pp-sc-grid{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(calc(var(--sc-size) + 60px), 1fr));
    gap: calc(var(--sc-gap) * 1.2) 24px;          /* row x column gap */
  }
  .pp-stock-colors .pp-sc-item{
    display:grid;
    justify-items:center;
    text-align:center;
    gap: 8px;
  }
  .pp-ar-row {
    grid-template-columns: repeat(3, minmax(230px, 1fr));
  }
    #brxe-ehzmpj {
        width: 670px !important;
    }
    .rq-banner-title{
        font-size: 18px !important;
    }
    .rq-banner{
        width: 340px;
        height: 100px;
    }
    .rq-title{
        font-size: 34px !important;
        margin-right: 0px !important;
    }
    .visit-store-title{
        font-size: 32px !important;
    }
    .rq-sub{
        font-size: 26px !important;
    }
    .product-reviews-heading{
        font-size: 40px !important;
    }
    .pp-what-makes-title{
        font-size: 40px !important;
    }
    .pp-what-makes-h1{
        font-size: 30px !important;
    }
    .pp-what-makes-body{
        font-size: 20px !important;
    }
    .pp-similar-title{
        font-size: 40px !important;
    }
    .pp-learn-title{
        font-size: 40px !important;
    }
    .pp-learn-sub{
        font-size: 24px !important;
    }
    .pp-news-title{
        font-size: 20px !important;
    }
    .pp-news-excerpt{
        font-size: 14px !important;
    }
    .additional-resources-heading{
        font-size: 40px !important;
    }
    .pp-sq-title{
        font-size: 40px !important;
    }
    .pp-sq-detail{
        font-size: 24px !important;
    }
    .pp-sq-flagbtn{
        font-size: 18px !important;
    }
    .pp-detail-copy {
        font-size: 20px !important;
    }
    .pp-detail-note{
        font-size: 16px !important;
    }
    .pp-feature-text{
        font-size: 15.5px !important;
    }
    .pp-btn{
        font-size: 17px !important;
        padding: 16px 5px;
    }
    .pp-so-note{
        font-size: 16px !important;
    }
    .pp-so-title{
        font-size: 24px !important;
    }
    .pp-so-pill{
        font-size: 16px !important;
    }
    .pp-series-img{
        min-height: clamp(380px, 44vw, 400px);
    }
    .pp-rtc-swirl{
        width: calc(100% + 125vw) !important;
    }
    .build-your-container-title{
        font-size: 40px !important;
        margin-bottom: 25px !important;
    }
/*EACH SECTION MARGINS */
    #brxe-flekog {
        margin-left: 90px !important;
    }
    #brxe-vbbepd {
        margin-left: 90px !important;
    }
    #brxe-rpmixa {
        margin-left: 90px !important;
    }
    .ms-title{
        font-size: 18px !important;
    }
    .multi-select-text{
        margin-left: 150px !important;
        font-size: 16px !important;
    }
    #brxe-tkhibm {
        margin-left: 150px !important;
    }
    .pp-card-title{
        font-size: 1.5rem !important;
    }
    /*END OF MARGINS FOR EACHS SECTION*/
    .pp-detail-right {
        width: 45%;
    }
    .pp-so-pills{
        width: 100% !important;
    }
    .rq-banner-title {
        font-size: 2rem !important;
    }
    .rq-banner{
        width: 400px;
        height: 110px !important;
    }
    .visit-store-title {
        font-size: 28px !important;
    }
    .get-quote-btn{
        font-size: 12px !important;
        height: 30px !important;
        min-width: 100px;
    }
    .view-specs-btn{
        font-size: 12px !important;
        height: 30px !important;
        min-width: 100px;
    }
    .pp-card-title a{
        font-size: 14px !important;
    }
    .pp-product-reviews-quote {
        font-size: 16px !important;
    }
    .pp-product-reviews-copy{
        font-size: 16px !important;
    }
    .pp-so-pill .pp-label {
        font-size: clamp(14px, 1.7vw, 12px) !important;
    }
    .pp-card-title{
        font-size: 16px !important;
    }
    .pp-card-code{
        font-size: 14px !important;
    }
    .build-your-container-title{
        font-size: 36px !important;
        margin-left: 150px !important;
    }
    #brxe-yeqvny{
        font-size: 22px !important;
    }
    #brxe-rhjmud {
        width: 40% !important;
        font-size: 18px !important;
    }
    .pp-feat-item-title {
        font-size: 16px !important;
    }
    .pp-feat-item-copy {
        font-size: 16.5px !important;
    }
    .pp-feat-list .pp-details li {
        font-size: 16.5px !important;
    }
    .pp-feature-title{ margin-top: 10px !important; color:#22a0ad; font-weight:700; font-size:clamp(18px,1.4vw,22px) !important; margin:0; }
    .pp-what-makes-cta{
        font-size: 20px !important;
    }
    #brxe-xdpntj {
        margin-left: 150px !important;
    }
    /* ===== Center filter + grid (products + accessories) ===== */
    /* Grid hosts centered on the page */
    #pp-grid-host,
    #pp-acc-host{
    width: 100% !important;
    max-width: 1280px !important;   /* tweak as needed */
    margin-inline: auto !important;
    }
    /* Center the tracks/items inside the grid */
    #pp-grid-host .pp-card-grid,
    #pp-acc-host  .pp-card-grid{
    justify-content: center !important;  /* center grid tracks */
    justify-items: stretch !important;   /* cards fill their cells */
    margin-inline: auto !important;
    }
  }
@media (max-width:1546px){
    .pp-feature-grid{
        --min: 240px !important; 
        grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr)) !important;
    }
}
@media (max-width:1524px){
    .pp-btn2, .pp-btn2.pp-btn2 {
        width: 17% !important;
        font-size: 18px !important;
    }
    .pp-similar-title {
        font-size: 36px !important;
    }
    #brxe-yihppx{
        margin-top:-20px !important;
    }
    .pp-card{
        padding:8px;
    }
    .carbonfootprint-card{
        --cf-w: 258px;
        --cf-h: 156px;
        --cf-scale: 1.050 !important;
        width: calc(var(--cf-w) * var(--cf-scale));
        height: calc(var(--cf-h) * var(--cf-scale));
    }
    .pp-btn-grid{
        width: 90% !important;
    }
    .pp-round-cta2 {
        inline-size: clamp(20px, 2.6vw, 65px);
    }
}
@media (max-width:1440px){ 
.pp-btn2, .pp-btn2.pp-btn2{
    font-size: 16px !important;
    width: 12% !important;
}
.pp-btn2{
    padding: 0px 0px !important;
}
    #brxe-xdpntj{
        margin-left: 140px !important;
    }
    .build-your-container-title{
    margin-left: 140px !important;
}
.multi-select-text{
    margin-left: 140px !important;
}
#brxe-tkhibm{
    margin-left: 140px !important;
}
}
@media (max-width:1300px){ 
    .pp-series-name{
        font-size: 24px !important;
    }
    #brxe-cawggw{
    margin-left: 120px !important;
}
    #brxe-lrfcct{
        border-bottom-left-radius: 6.5rem !important;
        height: 50rem !important;
    }
    .pp-detail-right {
        width: 45%;
    }
    .pp-card-title a {
        font-size: 13px !important;
    }
    .pp-card-grid {
        gap: 5rem !important;
    }
    #brxe-xdpntj{
        margin-left: 65px !important;
    }
    .pp-rq-btn > a{
        font-size: 18px !important;
    }
    .series-parallax-img{
        height: 75% !important;
    }
    #brxe-vbbepd {
        margin-top: -300px !important;
    }
    #brxe-rutgne {
        row-gap: 14px !important;
        margin-bottom: 160px !important;
    }
    .pp-hero-left img.pp-logo{
        max-width: min(60vw, 330px) !important;
    }
    #SeriesTagline{
        font-size: 3rem !important;
    }
.build-your-container-title{
    margin-left: 75px !important;
}
.multi-select-text{
    margin-left: 75px !important;
}
#brxe-tkhibm{
    margin-left: 75px !important;
}

}
.pp-stock-colors{
    display: none !important;
}

@media (max-width:1220px){
    /* ===== Center filter + grid (products + accessories) ===== */
/* Grid hosts centered on the pages */
.pp-feat-list{
    text-align: left !important; /* keep left-aligned for the mobile view */
}
#brxe-yihppx{ 
    padding: 40px !important;
}
#brxe-lrfcct{
    border-bottom-left-radius: 0rem !important;
    height: 35rem !important;
}
.pp-cf-badge{
    max-width: 356px !important;
}
#brxe-yeqvny{
    font-size: 18px;
}
#pp-grid-host,
#pp-acc-host{
  width: 100% !important;
  max-width: 1280px !important;   /* tweak as needed */
  margin-inline: auto !important;
}
#brxe-cawggw{
    margin-left: 0px !important;
}

/* Center the tracks/items inside the grid */
#pp-grid-host .pp-card-grid,
#pp-acc-host  .pp-card-grid{
  justify-content: center !important;  /* center grid tracks */
  justify-items: stretch !important;   /* cards fill their cells */
  margin-inline: auto !important;
}

    /* START OF THE TRANSITION FROM SIDE BY SIDE TO STACKED */
    /* ===== MOBILE/HYBRID HERO: full-bleed image + text centered beneath ===== */

  /* kill any rounding/clipping/padding on the section + grid */
  .pp-series-hero,
  .pp-series-hero .pp-hero-grid{
    border-radius:0 !important;
    overflow:visible !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .pp-series-hero .container,
  .pp-series-hero .pp-hero-inner{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* stack layout: image first, text second */
  .pp-series-hero .pp-hero-grid{
    display:grid !important;
    grid-template-areas:"img" "left" !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
    border-radius:0 !important;
  }
  
  /* FULL-BLEED image row (break out of centered container) */
  .pp-series-hero .pp-hero-img,
  .series-hero-box .series-parallax-img,
  .series-parallax-img{
    grid-area:img !important;
    position:relative !important;

    /* container breakout trick */
    left:50% !important;
    right:50% !important;
    margin-left:-50vw !important;
    margin-right:-50vw !important;
    width:100vw !important;
    max-width:100vw !important;
    min-width:100vw !important;

    border-radius:0 !important;
    overflow:hidden !important;   /* crop to the band */
    padding:0 !important;
  }

  /* <img> version */
  .pp-series-hero .pp-hero-img img{
    display:block !important;
    width:100% !important;
    min-height: 400px !important;
    object-fit:cover !important;
    border-radius:0 !important;
  }

  /* background-image (parallax) version */
  .series-hero-box .series-parallax-img,
  .series-parallax-img{
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    height:clamp(260px,45vh,560px) !important;
    border-radius:0 !important;
  }

  /* make sure the grid is stacked (img then left) */
  .pp-hero-grid{
    grid-template-areas: "img" "left" !important;
    grid-template-columns: 1fr !important;
  }

  /* the left column itself */
  .pp-series-hero .pp-hero-left{
    grid-area: left;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: min(720px, 92vw) !important;
  }

  /* center ALL direct children */
  .pp-series-hero .pp-hero-left > *{
    align-self: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Bricks inner containers sometimes keep their own alignment */
  .pp-series-hero .pp-hero-left .brxe-container,
  .pp-series-hero .pp-hero-left .brxe-block,
  .pp-series-hero .pp-hero-left .brxe-div{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    row-gap: 0 !important;
    text-align: center !important;
    width: 100% !important;
  }
  .pp-series-hero .pp-hero-left .brxe-container > *,
  .pp-series-hero .pp-hero-left .brxe-block > *,
  .pp-series-hero .pp-hero-left .brxe-div > *{
    align-self: center !important;
    text-align: center !important;
  }

  /* buttons/links */
  .pp-series-hero .pp-hero-left .brxe-button,
  .pp-series-hero .pp-hero-left .btn,
  .pp-series-hero .pp-hero-left a{
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
    #brxe-ghspvl{
        margin-top: 80px;
    }
    #brxe-xdpntj {
        margin-left: 0px !important;
    }
  #brxe-vbbepd {
    margin-top: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .featured-section {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .multi-select-text{
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  #brxe-rpmixa{
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .grid-products{
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .build-your-container-title{
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  #brxe-tkhibm{
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .pp-filter{
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
.pp-card-grid{
    margin-left: 0px !important;
    margin-right: 0px !important; 
}
#brxe-gpjnec{
    width: 100% !important;
}
.pp-shop-online {
    width: 90%;
}
.pp-detail-copy{
    font-size: 14px !important;
}
.pp-hero-left.brxe-container {
    row-gap: 0px !important;
}
.pp-hero-left {
    margin-top: 3rem !important;
}
.pp-hero-img {
    min-height: 420px !important;
}
#brxe-iblnaq{
    min-height: 420px !important;
}
#brxe-flekog {
    margin-left: 0px !important;
    margin-right: 0px !important;
}
.pp-hero-grid{
    margin-left: 0px !important;
    margin-right: 0px !important;
}
.pp-feature-grid {
    margin-left: -35px;
}
 /* stack the two columns and center */
  #brxe-myxrbw .pp-cta-row.details-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    row-gap: 28px !important;
    margin-inline: auto !important;
  }

  /* center gallery block */
  #brxe-myxrbw .pp-gallery,
  #brxe-myxrbw .pp-detail-gallery{
    margin-inline: auto !important;
    text-align: center !important;
  }

  /* center all right-column content */
  #brxe-myxrbw .pp-detail-right,
  #brxe-myxrbw .pp-detail-right > *,
  #brxe-myxrbw .pp-topline,
  #brxe-myxrbw .pp-cta-grid,
  #brxe-myxrbw .pp-shop-online,
  #brxe-myxrbw .pp-stock-colors,
  #brxe-myxrbw .pp-feat-accordion{
    max-width: min(880px, 92vw) !important;
    margin-inline: auto !important;
    text-align: center !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* center CTA button grid */
  #brxe-myxrbw .pp-btn-grid{
    justify-content: center !important;
    align-items: center !important;
    margin-inline: auto !important;
    width: 90% !important;
  }

  /* center shop pills */
  #brxe-myxrbw .pp-so-grid{
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
  }
.brxe-block.pp-detail-right{
    width: 100% !important;
    max-width: min(980px, 96vw) !important; /* wider panel */
    margin-inline: auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }

  /* make each child center itself */
  .pp-detail-right > *{
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* text bits */
  .pp-detail-title,
  .pp-detail-subtitle,
  .pp-detail-note,
  .pp-detail-copy,
  .pp-so-title,
  .pp-so-note{
    text-align: center !important;
    max-width: 78ch !important; /* readable line length */
  }

  /* CarbonGraph card */
  .carbonfootprint-card,
  .carbonfootprint-card .pp-cf-badge,
  .carbonfootprint-card iframe{
    margin-inline: auto !important;
    display: block !important;
  }

  /* CTA buttons */
  .pp-cta-grid .pp-btn-grid{
    max-width: 900px !important;
    margin-inline: auto !important;
    justify-items: center !important;
  }
  .pp-cta-grid .pp-btn-grid .pp-btn{
    width: 100% !important;         /* each button same width in its cell */
  }

  /* ——— Disable parallax / scroll transforms ——— */
  /* If any parallax is applied via CSS or inline styles, nuke it */
  .pp-detail-gallery,
  .pp-detail-gallery .pp-detail-img{
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
    background-attachment: scroll !important; /* harmless for <img>, fixes bg-parallax if used */
    background-position: center center !important;
  }

  /* (Also catch any global parallax classes you might be using) */
  .series-hero-box .series-parallax-img,
  .series-parallax-img{
    background-attachment: scroll !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  /* ——— Keep arrows attached to the gallery ——— */
  /* Make gallery a positioning context */
  #brxe-myxrbw .pp-gallery{ position: relative !important; }

  /* Vertically center arrows and keep them inside the gallery */
  #brxe-myxrbw .pp-gallery .pp-arrow{
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
    width: 60px !important;
    height: 60px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
  }
  #brxe-myxrbw .pp-gallery .pp-prev{ left: 8px !important; }
  #brxe-myxrbw .pp-gallery .pp-next{ right: 8px !important; }

  /* Make the gallery responsive & centered */
  #detailGallery.pp-detail-gallery{
    margin-inline: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  #detailGallery .pp-detail-img{
    display: block !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  #brxe-veaspv{
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  #brxe-iieelx{
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  #feature-section{
    margin-bottom: -50px !important;
  }
  .pp-round-cta2 {
    min-width: 35px;
    height: 35px;
  }
  .rq-title{
    text-align: center !important;  
  }
  .rq-left{ 
    align-items: center !important; 
    text-align: center !important;
    }
  .rq-right{
    display:none !important;
  }
  .rq-grid{
    display: flex !important;
  }
  #brxe-znvvno{
    align-items: center !important;
    text-align: center !important;
  }
  
}
@media (max-width:1205px){
.pp-feature-grid {
    margin-left: 0px;
}
}
/* ===== Break into rows under 1000px ===== */
@media (max-width:1100px){
    .pp-detail-gallery{
        height: clamp(400px, 80vh, 1000px) !important;
    }
  .pp-filterbar{
    /* 3 columns; items auto-flow to new rows and stay centered */
    display:grid !important;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    justify-content:center;
    column-gap: 12px;
    row-gap: 10px;
    padding: 10px;
  }

  /* Make selects fill their grid cells */
  .pp-filterbar .pp-filter{ width:100%; min-width:0; }

  /* Per-page group goes on its own row (full width) */
  .pp-perpage{
    grid-column: 1 / -1 !important;   /* override the desktop 5/6 placement */
    justify-self: center;              /* or: stretch */
  }
  #brxe-vaxvbi{
    font-size: 3.5rem;
    margin-left: 24px;
    margin-right: 24px;
  }
  #brxe-lqooqr{
    font-size: 2rem;
    margin: 24px;
  }
}
/* ===== Tighter breakpoint options ===== */
@media (max-width:1000px){
    .pp-btn2, .pp-btn2.pp-btn2{
        width: 45% !important;
        padding: 12px 12px !important;
    }
  #brxe-kuhusc{
    grid-template-columns: 1fr;
  }
  .pp-what-makes-img{
    aspect-ratio: 26 / 11;
  }
  #brxe-mqzcog{
    text-align: center !important; 
    margin-top: 20px;
  }
  .pp-product-reviews-grid.pp-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.pp-product-reviews-grid.pp-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.pp-product-reviews-grid.pp-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pp-product-reviews-grid.pp-cols-1 {
    grid-template-columns: 1fr;
}
#product-filter {
    padding-bottom: 0px;
}
/* RESIZE CARBON FOOTRPRINT BADGE */
.carbonfootprint-card {
    --cf-w: 258px;
    --cf-h: 156px;
    --cf-scale: 1.2;
    width: calc(var(--cf-w) * var(--cf-scale));
    height: calc(var(--cf-h) * var(--cf-scale));
    overflow: hidden;
}
.pp-btn2, .pp-btn2.pp-btn2 {
        width: 20% !important;
        font-size: 18px !important;
    }
}
/* ===== Tighter breakpoint options ===== */
@media (max-width:820px){
  .pp-filterbar{
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
  .pp-detail-gallery{
        height: clamp(400px, 70vh, 1000px) !important;
        margin-top: 10px !important;
    }
.pp-feature-grid{
     grid-template-columns: repeat(1, minmax(var(--min), 1fr)) !important;
}

}
@media (max-width:775px){
    .pp-ar-row {
        grid-template-columns: repeat(2, minmax(230px, 1fr));
    }
    #brxe-ommdle{
        text-align: center !important; 
    }
    #brxe-pqvlmg{
        text-align: center !important;
    }
    #brxe-vbbepd{
        margin-top: -100px !important;
    }
    #brxe-ghspvl {
        margin-top: 140px !important;
    }
} 

@media (max-width:750px){
  #brxe-rutgne{
    margin-top: 10px !important;
  }
  #brxe-hapanx{
    font-size: 18px;
  }
  #brxe-jwzzlk{
      font-size: 24px;
  }
  .pp-btn2, .pp-btn2.pp-btn2 {
        width: 23% !important;
        font-size: 17px !important;
    }
}
@media (max-width:640px){
    #brxe-iblnaq{
        min-height: 335px !important;
    }
    #brxe-rutgne {
        margin-top: -20px;
    }
    #brxe-vbbepd {
        margin-top: -200px !important;
    }

    .series-hero-box .series-parallax-img, .series-parallax-img {
    height: clamp(260px,34vh,560px) !important;
  } 
  .pp-hero-img {
        min-height: 300px !important;
    }
  .pp-filterbar{
    grid-template-columns: 1fr;        /* stack */
  }
  .pp-perpage{ justify-self: stretch; } /* make it full width on phones */
  .pp-feature-title{
    font-size: 16px !important;
  }
  .pp-feature-text{
    font-size: 15px !important;
  }
  .pp-product-reviews-grid.pp-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.pp-product-reviews-grid.pp-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.pp-product-reviews-grid.pp-cols-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.pp-product-reviews-grid.pp-cols-1 {
    grid-template-columns: 1fr;
}
#brxe-rhjmud { /* request a quote button */
        width: 65% !important;
        font-size: 18px !important;
    }
.pp-ar-row {
    grid-template-columns: repeat(1, minmax(230px, 1fr));
}
#brxe-tayasj{
    text-align: left;
}
#brxe-vaxvbi{
    font-size: 2.5rem;
  }
  #brxe-lqooqr{
    font-size: 1.5rem;
  }
  #brxe-tokzoz{
    column-gap: 16px !important;
  }
  #SeriesTagline{
    font-size: 3rem !important;
  }
    #brxe-ghspvl {
        margin-top: 50px !important;
    }
    .pp-sq-title {
        font-size: 32px !important;
    }
.pp-feature-title{
    text-align: left !important  ;
    font-size: 14px !important;
  }
  .pp-feature-text{
    text-align: left !important;
    font-size: 14px !important;
  }
    .pp-similar-title {
        text-align: left !important;
        font-size: 32px !important;
    }
    #brxe-bpllpj{
        grid-template-columns: 1fr;
    }
    #brxe-yuaviy{
        align-items: start !important;
        margin-top: 10px;
    }
    .pp-learn-title {
        text-align: left !important;
        font-size: 32px !important;
    }
    .pp-learn-sub {
        font-size: 20px !important;
        text-align: left !important;
    }
    #brxe-eeovmq{
        grid-template-columns: 1fr;
    }
    #brxe-hcngqg{
        align-items: start !important;
    }
    .pp-what-makes-h1 {
        font-size: 28px !important;
        margin-top: 10px !important;
    }
    .pp-what-makes-title {
        text-align: left !important;
        font-size: 32px !important;
    }
    .additional-resources-heading {
        font-size: 36px !important;
    }
    #brxe-vhdute{
        align-items: start;
    }
    #brxe-gqkbbe{
        align-items: start !important;
    }
    #brxe-bazdzr{
        text-align: start !important;
    }
    .rq-title {
        font-size: 30px !important;
        margin-right: 0px !important;
    }
    .rq-sub {
        font-size: 23px !important;
    }
    #brxe-sydowo{
        height: 40px;
        width: 135px;
    }
    #brxe-rlvquj{
        width: 230px;
        height: 40px;
    }
    .product-reviews-heading {
        font-size: 32px !important;
    }
    #brxe-nriidj{ /* SHOP BUTTONS */
        grid-gap: 10px;
    }
    .pp-sq-flagbtn {
        font-size: 12px !important;
    }
    #brxe-myxrbw .pp-so-grid {
        display: grid !important;
    }
    .pp-detail-gallery{
        height: clamp(400px, 50vh, 1000px) !important;
    }
    .pp-btn2, .pp-btn2.pp-btn2 {
        width: 35% !important;
        font-size: 18px !important;
    }
}
/* Phones: keep proportions, just shrink the pager "length" */
@media (max-width:415px){
    .pp-btn2, .pp-btn2.pp-btn2 {
        width: 50% !important;
        font-size: 18px !important;
    }
  /* make sure the bar itself can shrink */
  .pp-perpage{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:0;                /* prevent overflow quirks */
  }

  /* normalize pager buttons (prev / number / last / next) */
  .pp-ctl-group .pp-nav,
  .pp-ctl-group .pp-page,
  .pp-ctl-group .pp-page-last{
    --pg: 30px;                 /* base square size */
    width:var(--pg);
    height:var(--pg);
    min-width:var(--pg);
    padding:0;
    display:inline-grid;
    place-items:center;
    line-height:1;              /* consistent centering */
    font-size:14px;             /* keeps glyphs inside the box */
    box-sizing:border-box;
    -webkit-appearance:none;
    appearance:none;
    border-radius:6px;
  }

  .pp-perpage .pp-ctl-group{
    gap:6px;
    flex:0 0 auto;              /* don’t let it stretch weirdly */
    transform-origin:right center;
    /* scale down uniformly so the far-right arrow never hangs off */
    --pager-scale: 1;
    transform: scale(var(--pager-scale));
  }

  /* compact the "Per Page" dropdown a touch */
  .pp-perpage .pp-dd--perpage .pp-dd__btn{
    padding:6px 10px;
    font-size:12px;
  }

  /* optional: hide the mid ellipsis when tight */
  .pp-ctl-group .pp-ellipsis{ display:none; }
}

/* progressively shrink the whole pager as screens get tighter */
@media (max-width:380px){ .pp-perpage .pp-ctl-group{ --pager-scale:.92; } }
@media (max-width:350px){ .pp-perpage .pp-ctl-group{ --pager-scale:.86; } }
@media (max-width:330px){ .pp-perpage .pp-ctl-group{ --pager-scale:.80; } }


@media (max-width:400px){
    .pp-left{
        margin-left: 20px;
        align-items: center;
        justify-content: center;
        width: 90%;
    }
    :root .bricks-button[class*="light"].outline {
        font-size: 10px;
    }
    .pp-sq-title {
        font-size: 32px !important;
    }
    .pp-sq-detail {
        font-size: 22px !important;
    }
    #brxe-vbbepd{
        margin-top: -340px;
    }
    .pp-detail-gallery{
        height: clamp(400px, 40vh, 1000px) !important;
    }
}
#pp-products-host{
    place-items: center !important;
}

/* Force the product grid to be centered on mobile */
@media (max-width: 768px){
  /* 1) Center the grid itself */
  #pp-products-host > .pp-card-grid{
    display: grid !important;              /* make sure it's a grid */
    grid-template-columns: 1fr !important; /* single column */
    place-content: center !important;      /* center the track */
    place-items: center !important;        /* center each item */
    max-width: 420px;                      /* readable column width */
    width: 100%;
    margin-inline: auto !important;        /* hard-center the grid block */
    padding-inline: 0 !important;          /* kill any left padding */
  }

  /* 2) Safety: center each card in older iOS/Safari */
  #pp-products-host .pp-card{
    width: 100%;
    max-width: 420px;
    justify-self: center !important;
    margin-inline: auto !important;
    text-align: center;
  }

  /* 3) Image centering safety */
  #pp-products-host .pp-card-img img{
    display: block;
    margin-inline: auto !important;
  }
}
.pp-detail-gallery{
  /* shrinks with viewport height, never below 320px, never above 900px */
  height: clamp(320px, 70vh, 900px);
}

/*INDIVIDUAL PRODUCT PAGES*/