/*
 * Qlimatix · PDP styling — ported verbatim from the prototype
 * (Helthome Smart Air 20L PDP.html, inline <style>). Scoped to .pdp-* / .specs__* /
 * .cmp-* / .aichat / .expert / .rv-* / .pfaq / .related / .articles. Loaded only on
 * product pages (inc/woocommerce.php). .page/.wrap come from assets/layout.css.
 */

  /* ============ PDP BASE — scoped tokens + resets ============
     The prototype relied on homepage.css for these design tokens + base resets,
     but home.css is NOT enqueued on the PDP. We define them on .pdp-page (the
     single-product wrapper) so every var(--…) resolves and links lose their
     underline — scoped here so the global header/footer chrome is untouched. */
  .pdp-page {
    --navy: #01273f; --navy-2: #052e4a; --navy-darker: #001a2b;
    --orange: #e77935; --orange-hover: #d96b27;
    --cream: #f1ede5; --cream-soft: #f6f1e7; --beige-bg: #efeae0;
    --light-blue: #cfdae6; --light-blue-2: #dfe6ef; --table-head: #0b3854;
    --text: #0e2a3f; --muted: #5e6f7c; --muted-2: #6f7e8c;
    --border: #e7eaee; --border-soft: #eef1f4; --star: #f5b400;
    /* blog-grid (--bg-*) namespace for the related-articles cards */
    --bg-navy: #01273f; --bg-text: #0e2a3f; --bg-muted: #5e6f7c; --bg-muted-2: #6f7e8c;
    --bg-border: #e7eaee; --bg-border-soft: #eef1f4; --bg-lightblue: #cfdae6; --bg-orange: #e77935;
    font-family: "Onest", system-ui, -apple-system, sans-serif;
    color: var(--text);
    line-height: 1.55;
    /* Match the prototype + the rest of the theme: render Onest with grayscale
       smoothing. Without this the PDP fell back to the OS subpixel smoothing,
       which makes the title + price look noticeably heavier than the design. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  .pdp-page a { text-decoration: none; color: inherit; }
  /* Orange action buttons keep white text — the rule above (.pdp-page a) has a
     higher specificity than the per-button color, so it would otherwise drag the
     add-to-cart links to the dark inherited body colour. */
  .pdp-page a.pdp-buy__cart,
  .pdp-page a.pdp-sticky__cart { color: #fff; }
  /* Global <button> reset — the prototype assumed this; without it every bare
     button (FAQ questions, thumbnails, info icons, review actions) shows the
     browser's grey box + border. Wrapped in :where() so it's zero-specificity:
     it strips the UA chrome but never overrides a button's own colour/padding
     (e.g. .rv-more stays blue, .pfaq__q stays navy). */
  :where(.pdp-page button) {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }
  .pdp-page img { display: block; max-width: 100%; }
  .pdp-page [hidden] { display: none !important; }

  /* ============ PDP HERO — scoped ============ */
  /* homepage.css locks .page to a fixed 1440px; make it fluid so every
     viewport below 1440 (laptop, tablet, phone) actually reflows instead
     of rendering at 1440 and clipping. max-width keeps the desktop layout
     identical, margin:auto (from homepage.css) keeps it centred. */
  .page { width: 100%; max-width: 1440px; overflow: clip; }
  .pdp { padding: 30px 0 64px; }

  /* Breadcrumb */
  .pdp-crumb {
    display: flex; align-items: center; gap: 12px;
    font-size: 15px; color: var(--muted);
    margin-bottom: 30px;
    flex-wrap: wrap;
  }
  .pdp-crumb a { color: var(--muted); transition: color .15s; }
  .pdp-crumb a:hover { color: var(--text); }
  .pdp-crumb__sep { color: #c2ccd4; }
  .pdp-crumb__cur { color: var(--text); }

  /* Two-column grid */
  .pdp-grid {
    display: grid;
    grid-template-columns: 1.04fr 1fr;
    gap: 64px;
    align-items: start;
  }

  /* ---------- LEFT: gallery ---------- */
  .pdp-gallery__main {
    position: relative;
    border-radius: 20px;
    background: #fff;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .pdp-gallery__photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  /* Minimalistic nav: just a thin chevron, no circle/shadow. */
  .pdp-gnav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px;
    display: grid; place-items: center;
    color: #9aa7b1;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    z-index: 5;
    transition: color .15s, transform .15s;
  }
  .pdp-gnav:hover { color: var(--navy); transform: translateY(-50%) scale(1.12); }
  .pdp-gnav--prev { left: 2px; }
  .pdp-gnav--next { right: 2px; }
  .pdp-gnav svg { display: block; }

  /* Thumbnails */
  .pdp-thumbs {
    display: flex;
    gap: 14px;
    margin-top: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .pdp-thumbs::-webkit-scrollbar { display: none; }
  .pdp-thumb {
    position: relative;
    flex: 0 0 calc((100% - 42px) / 4);
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: #f1f5f8;
    /* No border — the photo fills the whole card edge to edge. The active ring is
       a box-shadow (no layout space) so there's never a gap around the image.
       padding/appearance reset because it's a <button>. */
    border: 0;
    padding: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: box-shadow .16s, transform .16s;
  }
  .pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
  /* The featured shot is a product-on-white studio photo with big white margins;
     zoom the thumbnail so the product fills it instead of floating in white.
     (The main viewer keeps the full, uncropped photo.) */
  .pdp-thumb--hero img { transform: scale(1.35); transform-origin: center center; }
  .pdp-thumb--hero:hover img { transform: scale(1.4); }
  .pdp-thumb:hover { transform: translateY(-2px); }
  .pdp-thumb:hover img { transform: scale(1.05); }
  /* Active ring drawn as an inner border (over the image, inside overflow:hidden)
     so it's always fully visible and never clipped by the scrolling strip. */
  .pdp-thumb.is-active::before {
    content: ""; position: absolute; inset: 0;
    border: 2.5px solid var(--navy); border-radius: 14px;
    z-index: 4; pointer-events: none;
  }
  .pdp-thumb.is-active:hover { transform: none; }
  /* product shot: show the whole device, centred on a soft tile */
  .pdp-thumb--product { background: #eff4f8; }
  .pdp-thumb--product img { object-fit: contain; padding: 12px; }
  .pdp-thumb--product:hover img { transform: none; }

  /* Video slide: a thumbnail that plays the product video in the main viewer */
  .pdp-thumb--video::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(1,39,63,.18); transition: background .16s;
  }
  .pdp-thumb--video:hover::after { background: rgba(1,39,63,.10); }
  .pdp-thumb__play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    z-index: 2; width: 34px; height: 34px; border-radius: 999px;
    background: var(--orange); color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 6px 16px -6px rgba(231,121,53,.75);
    pointer-events: none;
  }
  .pdp-thumb__play svg { display: block; margin-left: 2px; }
  /* The playing video fills the main gallery frame (over the still image) */
  .pdp-gallery__video { position: absolute; inset: 0; z-index: 3; background: #000; }
  .pdp-gallery__video iframe,
  .pdp-gallery__video video { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
  .pdp-thumb__next {
    position: absolute;
    top: 50%; right: 6px; transform: translateY(-50%);
    width: 28px; height: 28px;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    display: grid; place-items: center;
    color: var(--text);
    box-shadow: 0 4px 10px -4px rgba(0,0,0,0.3);
  }

  /* ---------- RIGHT: product info ---------- */
  .pdp-info { padding-top: 4px; max-width: 560px; }

  .pdp-rating { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
  .pdp-rating__stars { display: flex; gap: 3px; color: var(--star); }
  .pdp-rating__stars svg { display: block; }
  .pdp-rating__count { font-size: 17px; color: var(--muted); cursor: pointer; text-underline-offset: 3px; transition: color .15s; }
  a.pdp-rating__count:hover { color: var(--navy); text-decoration: underline; }

  .pdp-title {
    font-size: 52px;
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: var(--navy);
    margin: 0 0 26px;
  }

  /* Price */
  .pdp-price { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
  .pdp-price__old { font-size: 21px; color: #9aa6b0; text-decoration: line-through; }
  .pdp-price__now { font-size: 32px; font-weight: 700; color: var(--navy); letter-spacing: -0.015em; }
  .pdp-save {
    display: inline-flex; align-items: center; gap: 8px;
    background: #e8473b;
    color: #fff;
    font-size: 14px; font-weight: 600;
    padding: 7px 16px 7px 13px;
    border-radius: 999px;
  }
  .pdp-save svg { display: block; }

  /* Spec bullets */
  .pdp-specs { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .pdp-specs li { display: flex; align-items: center; gap: 13px; font-size: 19px; color: var(--text); }
  .pdp-specs li::before {
    content: ""; width: 8px; height: 8px; border-radius: 999px;
    background: var(--orange); flex-shrink: 0;
  }

  /* Capacity selector */
  .pdp-cap__label { font-size: 19px; font-weight: 600; color: var(--navy); margin-bottom: 14px; }
  /* Wrap so 4+ capacities never grow wider than the buy button below them. */
  .pdp-cap__row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
  .pdp-cap__opt {
    /* Rendered as an <a> in the theme (the prototype used a <button>), so the
       box/centering has to be declared explicitly or the label floats left in a
       too-wide pill. inline-flex + center makes it a neat fixed-size chip.
       Compact enough that four of them fit on one row within the buy block. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 60px;
    height: 56px;
    padding: 0 16px;
    border: 1.5px solid #c8d2db;
    border-radius: 12px;
    background: #fff;
    font-size: 17px; font-weight: 600;
    color: var(--navy);
    transition: border-color .15s, background .15s, box-shadow .15s;
  }
  .pdp-cap__opt:hover { border-color: var(--navy); background: #f6f9fb; }
  /* The size the visitor is currently viewing — highlighted, not a link. */
  .pdp-cap__opt.is-active,
  .pdp-cap__opt.is-active:hover {
    border-color: var(--navy);
    background: var(--navy);
    color: #fff;
    cursor: default;
  }

  /* Buy block */
  .pdp-buy { border-radius: 8px; overflow: hidden; margin-bottom: 30px; box-shadow: 0 18px 34px -24px rgba(8,38,65,0.4); }
  .pdp-buy__stock {
    background: #EDF2F5;
    color: var(--navy);
    font-size: 15px; font-weight: 500;
    text-align: center;
    padding: 9px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
  }
  .pdp-buy__dot { width: 9px; height: 9px; border-radius: 999px; background: #34b35a; }
  .pdp-buy__cart {
    width: 100%;
    box-sizing: border-box;
    padding: 14px;
    background-color: var(--orange);
    color: #fff;
    font-size: 16px; line-height: 21px; font-weight: 500;
    display: inline-flex; align-items: center; justify-content: center; column-gap: 10px;
    white-space: nowrap;
    transition: background-color .15s;
  }
  .pdp-buy__cart:hover { background-color: var(--orange-hover); }
  .pdp-buy__cart svg { display: block; }

  /* --- Tijdelijk uitverkocht / backorder (verwachte levertijd) --- */
  .pdp-buy__stock--soldout { background: #fcefe0; color: #8a4e14; }
  .pdp-buy__dot--out { background: #d9822b; }
  .pdp-oos { background: #fdf5ec; border-top: 1px solid #f3e4d0; padding: 15px 18px; }
  .pdp-oos__row { display: flex; gap: 13px; align-items: flex-start; }
  .pdp-oos__ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; background: #f7e6d1; color: #c1741f; display: grid; place-items: center; }
  .pdp-oos__ico svg { display: block; }
  .pdp-oos__title { margin: 2px 0 4px; font-size: 16px; font-weight: 700; color: var(--navy); }
  .pdp-oos__text { margin: 0; font-size: 14px; line-height: 1.55; color: #566b78; }
  .pdp-buy__cart--backorder { flex-direction: column; gap: 3px; line-height: 1.2; padding: 12px 14px; }
  .pdp-buy__cart--backorder .pdp-buy__cartrow { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
  .pdp-buy__cart--backorder small { font-size: 12.5px; font-weight: 500; opacity: .92; }
  .pdp-oos__toggle { width: 100%; background: #fff; border-top: 1px solid #eef1f4; color: var(--navy); font: inherit; font-size: 14px; font-weight: 600; padding: 13px 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: background .15s; text-align: center; }
  .pdp-oos__toggle:hover { background: #f4f7f9; }
  .pdp-oos__toggle svg { color: #c1741f; flex-shrink: 0; }
  .pdp-oos__notify { display: none; gap: 8px; padding: 14px; background: #fff; border-top: 1px solid #eef1f4; }
  .pdp-buy.is-notify .pdp-oos__toggle { display: none; }
  .pdp-buy.is-notify .pdp-oos__notify { display: flex; }
  .pdp-oos__notify input { flex: 1; min-width: 0; height: 46px; border: 1.5px solid var(--border); border-radius: 10px; padding: 0 14px; font: inherit; font-size: 15px; color: var(--text); outline: none; transition: border-color .15s; }
  .pdp-oos__notify input:focus { border-color: var(--navy); }
  .pdp-oos__notify button { height: 46px; padding: 0 20px; border-radius: 10px; background: var(--navy); color: #fff; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s; }
  .pdp-oos__notify button:hover { background: #06243b; }
  .pdp-oos__notify button[disabled] { opacity: .6; cursor: default; }
  .pdp-oos__done { display: none; padding: 14px; margin: 0; font-size: 14px; line-height: 1.55; color: #1f7a44; background: #f2faf5; border-top: 1px solid #d8ecdf; }
  .pdp-oos__done b { color: var(--navy); }
  .pdp-buy.is-done .pdp-oos__toggle, .pdp-buy.is-done .pdp-oos__notify { display: none; }
  .pdp-buy.is-done .pdp-oos__done { display: block; }
  .pdp-sticky__oos { font-size: 12.5px; font-weight: 600; color: #b5641f; }

  /* Trust list */
  .pdp-trust { display: flex; flex-direction: column; gap: 16px; }
  .pdp-trust__item { display: flex; align-items: center; gap: 14px; font-size: 17px; color: var(--text); }
  .pdp-trust__ico {
    width: 26px; height: 26px;
    flex-shrink: 0;
    display: grid; place-items: center;
    color: #3aa76d;
  }
  .pdp-trust__ico svg { display: block; }
  .pdp-trust__ti { font-size: 22px; line-height: 1; color: #3aa76d; width: 26px; flex-shrink: 0; display: inline-grid; place-items: center; }
  .pdp-trust__ico--orange { color: #e8704a; }
  .pdp-trust__kiyoh {
    display: inline-flex; align-items: center; gap: 7px;
    flex-shrink: 0;
  }
  .pdp-trust__kiyoh-word { font-size: 11px; color: #8a96a0; font-weight: 600; letter-spacing: 0.02em; }
  .pdp-trust__kiyoh-check {
    width: 19px; height: 19px; border-radius: 999px;
    background: #5bbf3a; color: #fff;
    display: grid; place-items: center;
  }
  .pdp-trust__kiyoh-check svg { display: block; }
  .pdp-trust__kiyohlogo { height: 30px; width: 55px; display: block; color: #464545; flex-shrink: 0; }

  /* Sticky add-to-cart bar */
  .pdp-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    background: #fff; border-top: 1px solid var(--border);
    box-shadow: 0 -10px 30px -18px rgba(8,38,65,.45);
    transform: translateY(105%);
    transition: transform .3s cubic-bezier(.22,1,.36,1);
  }
  .pdp-sticky.is-visible { transform: translateY(0); }
  .pdp-sticky__inner { max-width: 1280px; margin: 0 auto; padding: 12px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .pdp-sticky__prod { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .pdp-sticky__prod img { width: 54px; height: 54px; object-fit: contain; background: #f1f5f8; border-radius: 10px; padding: 4px; flex-shrink: 0; }
  .pdp-sticky__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .pdp-sticky__name { font-size: 16px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
  .pdp-sticky__rating { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
  .pdp-sticky__stars { display: inline-flex; gap: 1px; color: var(--star); }
  .pdp-sticky__stars svg { display: block; }
  .pdp-sticky__right { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
  .pdp-sticky__price { display: flex; align-items: baseline; gap: 10px; }
  .pdp-sticky__price--m { display: none; }   /* desktop/tablet: hide the under-title price */
  .pdp-sticky__old { font-size: 14px; color: #9aa6b0; text-decoration: line-through; }
  .pdp-sticky__now { font-size: 23px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
  .pdp-sticky__cart { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 30px; border-radius: 12px; background: var(--orange); color: #fff; font-size: 15.5px; font-weight: 600; transition: background .15s; white-space: nowrap; }
  .pdp-sticky__cart:hover { background: var(--orange-hover); }
  .pdp-sticky__cart svg { display: block; }
  @media (max-width: 720px) {
    .pdp-sticky__inner { padding: 9px 14px; gap: 12px; }
    .pdp-sticky__prod img { width: 46px; height: 46px; }
    .pdp-sticky__meta { gap: 4px; }
    /* full title (up to 2 lines) with the price text underneath it */
    .pdp-sticky__name {
      white-space: normal; max-width: none; font-size: 14px; line-height: 1.25;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .pdp-sticky__rating { display: none; }
    /* mobile: show the price under the title, hide the one beside the cart */
    .pdp-sticky__price--d { display: none; }
    .pdp-sticky__price--m { display: flex; }
    .pdp-sticky__meta .pdp-sticky__price { gap: 8px; }
    .pdp-sticky__meta .pdp-sticky__old { font-size: 12.5px; }
    .pdp-sticky__meta .pdp-sticky__now { font-size: 17px; }
    .pdp-sticky__right { gap: 0; }
    .pdp-sticky__cart { padding: 0 16px; height: 46px; font-size: 14.5px; }
  }

  /* ============ HEADER SEARCH BAR ============ */
  .header__inner { gap: 26px; }
  .header__nav { gap: 18px; font-size: 14.5px; flex: 0 1 auto; }
  .header__search {
    flex: 1 1 auto;
    max-width: 360px;
    min-width: 200px;
    position: relative;
    display: flex;
    align-items: center;
  }
  .header__search input {
    width: 100%;
    height: 46px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 0 52px 0 22px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text);
    background: #f7f9fb;
    outline: none;
    transition: border-color .15s, background .15s;
  }
  .header__search input:focus { border-color: var(--navy); background: #fff; }
  .header__search input::placeholder { color: #93a1ad; }
  .header__search button {
    position: absolute;
    right: 5px; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    display: grid; place-items: center;
    transition: background .15s;
  }
  .header__search button:hover { background: var(--orange-hover); }
  .header__search button svg { display: block; }

  /* ============ PRODUCTINFORMATIE ============ */
  .pinfo { padding: 8px 0 80px; }
  .pinfo-grid {
    display: grid;
    grid-template-columns: 1fr 528px;
    gap: 64px;
    align-items: start;
  }
  .pinfo__h1 {
    font-size: 34px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.02em;
    margin: 0 0 30px;
  }
  .pinfo__h2 {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    font-size: 22px; font-weight: 700; color: var(--navy);
    letter-spacing: -0.01em;
    margin: 0 0 22px;
  }
  .pinfo__h2 span { font-size: 16px; font-weight: 400; color: var(--muted); letter-spacing: 0; }

  /* Pros & cons */
  .procon { list-style: none; margin: 0 0 44px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
  .procon li { display: flex; align-items: flex-start; gap: 16px; font-size: 18px; line-height: 1.45; color: var(--text); }
  .procon__ico { width: 26px; height: 26px; flex-shrink: 0; margin-top: 1px; }
  .procon__ico svg { display: block; }

  /* Spec grid */
  .pspec {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 26px;
    column-gap: 44px;
    margin: 0 0 22px;
  }
  .pspec__item { display: flex; flex-direction: column; align-items: flex-start; }
  .pspec__label {
    display: inline-block;
    font-size: 15px; color: var(--muted);
    text-decoration: underline dotted;
    text-decoration-color: #c2ccd4;
    text-underline-offset: 5px;
    margin-bottom: 9px;
  }
  .pspec__val { font-size: 18px; color: var(--text); font-weight: 500; }
  .pspec__val--check { color: #2faa5a; }
  .pspec__val--check svg { display: block; }
  .pspec__more {
    display: inline-flex; align-items: center; gap: 8px;
    color: #1f7ad1; font-size: 17px; font-weight: 500;
    margin-bottom: 48px;
  }
  .pspec__more svg { display: block; }
  /* "Toon alle specificaties" is an <a>, so .pdp-page a{color:inherit} (0,1,1)
     would drag it dark. Beat it here so it shows the blue accent, matching
     "Toon volledige vergelijking" (.cmp-more). Scoped away from the doc links,
     which keep their own text + orange icon. */
  .pdp-page a.pspec__more:not(.pspec__more--doc) { color: #1f7ad1; }

  /* Documents (handleiding + nazorgdocument): stacked under each other, not
     side by side, with orange icons. */
  .pdp-docs { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 14px; margin-bottom: 48px; }
  .pdp-docs .pspec__more { margin: 0; }
  .pspec__more--doc svg { color: var(--orange); }

  .pinfo__desc { font-size: 17px; line-height: 1.7; color: var(--text); max-width: 640px; }
  .pinfo__desc p { margin: 0; }

  /* ---- Product video (lite embed) ---- */
  .pvideo {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    margin: 14px 0;
    max-width: 688px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 22px 44px -30px rgba(8,38,65,0.32);
  }
  .pvideo__text {
    background: var(--light-blue-2);
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .pvideo__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    align-self: flex-start;
    font-size: 12px; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 16px;
  }
  .pvideo__eyebrow svg { display: block; }
  .pvideo__title { font-size: 23px; font-weight: 700; color: var(--navy); letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 10px; }
  .pvideo__sub { font-size: 15.5px; line-height: 1.55; color: var(--muted); margin: 0 0 20px; }
  .pvideo__time {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; color: var(--navy);
  }
  .pvideo__time svg { display: block; color: var(--muted); }
  .pvideo__frame {
    position: relative;
    overflow: hidden;
    background: #0a0f14;
    cursor: pointer;
    min-height: 230px;
  }
  .pvideo__poster {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .pvideo__poster image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
  .pvideo__scrim {
    position: absolute; inset: 0;
    background:
      radial-gradient(120% 90% at 50% 42%, rgba(1,39,63,0) 38%, rgba(1,39,63,0.34) 100%),
      linear-gradient(180deg, rgba(4,12,20,0.10) 0%, rgba(4,12,20,0.34) 100%);
    transition: background .2s;
  }
  .pvideo__frame:hover .pvideo__scrim {
    background:
      radial-gradient(120% 90% at 50% 42%, rgba(1,39,63,0.05) 38%, rgba(1,39,63,0.44) 100%),
      linear-gradient(180deg, rgba(4,12,20,0.18) 0%, rgba(4,12,20,0.44) 100%);
  }
  .pvideo__play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: 62px; height: 62px;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 10px 28px -8px rgba(231,121,53,0.7);
    transition: transform .18s ease;
  }
  .pvideo__frame:hover .pvideo__play { transform: translate(-50%,-50%) scale(1.06); }
  .pvideo__play svg { display: block; margin-left: 3px; }
  .pvideo__badge {
    position: absolute; right: 12px; bottom: 12px;
    background: rgba(8,16,24,0.82);
    color: #fff;
    font-size: 13px; font-weight: 600;
    padding: 5px 11px; border-radius: 7px;
    letter-spacing: 0.02em;
    backdrop-filter: blur(3px);
  }
  .pvideo__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  @media (max-width: 720px) {
    .pvideo { grid-template-columns: 1fr; }
    .pvideo__play { width: 52px; height: 52px; }
  }

  /* ---- AI specialist card ---- */
  .aichat {
    position: sticky;
    top: 24px;
    border-radius: 22px;
    padding: 28px 30px 30px;
    background:
      radial-gradient(120% 90% at 0% 0%, #eef4fb 0%, rgba(238,244,251,0) 55%),
      radial-gradient(120% 90% at 100% 100%, #fbeee7 0%, rgba(251,238,231,0) 55%),
      #f4f7fb;
    border: 1px solid #e3eaf2;
  }
  .aichat__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
  .aichat__id { display: flex; align-items: center; gap: 13px; }
  .aichat__avatar {
    width: 54px; height: 54px; border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(160deg, #dfeaf6, #cdddee);
    box-shadow: 0 4px 12px -4px rgba(20,70,120,0.5);
    flex-shrink: 0;
  }
  .aichat__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .aichat__name { font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.2; }
  .aichat__role { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); white-space: nowrap; }
  .aichat__role::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: #34b35a; }
  .aichat__nav { display: flex; gap: 6px; }
  .aichat__nav button {
    width: 30px; height: 30px; display: grid; place-items: center;
    color: #9aa9b6; background: none; transition: color .15s;
  }
  .aichat__nav button:hover { color: var(--navy); }
  .aichat__nav svg { display: block; }
  .aichat__q { font-size: 21px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; margin: 0 0 6px; }
  .aichat__meta { font-size: 16px; font-style: italic; color: var(--muted); margin: 0 0 20px; }
  /* Product links Dr. Dry adds to model names. Double class (0,2,0) beats the
     global .pdp-page a{color:inherit} (0,1,1) so they read as real links. */
  .aichat .aichat__link { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
  .aichat .aichat__link:hover { color: var(--orange-hover); }
  .aichat__a { font-size: 17px; line-height: 1.6; color: var(--text); margin: 0 0 16px; }
  .aichat__a:last-of-type { margin-bottom: 24px; }
  .aichat__a a { color: #1f7ad1; }
  .aichat__lead { font-size: 17px; line-height: 1.55; color: var(--text); margin: 0 0 20px; }
  .aichat__suggs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
  .aichat__sugg {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    width: 100%; text-align: left;
    background: #fff;
    border: 1px solid #d8e0e9;
    border-radius: 12px;
    padding: 15px 18px;
    font-size: 16px; color: var(--navy); line-height: 1.3;
    transition: border-color .15s, background .15s;
  }
  .aichat__sugg:hover { border-color: var(--navy); background: #f7fafc; }
  .aichat__sugg svg { display: block; color: var(--orange); flex-shrink: 0; }
  .aichat__chips { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
  .aichat__chip {
    background: #fff;
    border: 1px solid #d8e0e9;
    border-radius: 999px;
    padding: 13px 24px;
    font-size: 16px; color: var(--navy);
    transition: border-color .15s, background .15s;
  }
  .aichat__chip:hover { border-color: var(--navy); background: #f7fafc; }
  .aichat__input {
    display: flex; align-items: center; gap: 12px;
    background: #fff;
    border: 1px solid #d8e0e9;
    border-radius: 16px;
    padding: 16px 18px;
  }
  .aichat__input input {
    flex: 1; border: none; outline: none; background: none;
    font-size: 16px; color: var(--text); font-family: inherit;
  }
  .aichat__input input::placeholder { color: #9aa9b6; }
  .aichat__send { width: 30px; height: 30px; display: grid; place-items: center; color: var(--orange); background: none; }
  .aichat__send svg { display: block; }
  .aichat__disclaim { font-size: 14px; color: #98a4ae; margin: 16px 4px 0; }
  /* chat conversation */
  .aichat.is-chatting .aichat__lead, .aichat.is-chatting .aichat__suggs { display: none; }
  .aichat__thread { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
  .aichat__msg { display: flex; gap: 10px; max-width: 92%; }
  .aichat__msg--user { align-self: flex-end; }
  .aichat__msg--bot { align-self: flex-start; }
  .aichat__msg-av { width: 34px; height: 34px; border-radius: 999px; overflow: hidden; flex-shrink: 0; background: linear-gradient(160deg,#dfeaf6,#cdddee); }
  .aichat__msg-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .aichat__bubble { padding: 12px 15px; border-radius: 15px; font-size: 16px; line-height: 1.5; }
  .aichat__msg--user .aichat__bubble { background: var(--navy); color: #fff; border-bottom-right-radius: 5px; }
  .aichat__msg--bot .aichat__bubble { background: #fff; border: 1px solid #d8e0e9; color: var(--text); border-bottom-left-radius: 5px; }
  .aichat__bubble strong { font-weight: 700; color: var(--navy); }
  .aichat__msg--user .aichat__bubble strong { color: #fff; }
  .aichat__typing { display: inline-flex; gap: 5px; align-items: center; }
  .aichat__typing span { width: 7px; height: 7px; border-radius: 999px; background: #b3c1cf; display: block; animation: aichatBlink 1.2s infinite ease-in-out; }
  .aichat__typing span:nth-child(2){ animation-delay: .2s; }
  .aichat__typing span:nth-child(3){ animation-delay: .4s; }
  @keyframes aichatBlink { 0%,80%,100%{ opacity:.3; transform: translateY(0); } 40%{ opacity:1; transform: translateY(-2px); } }
  .aichat__send { cursor: pointer; transition: color .15s; }
  .aichat__send:hover { color: #b3bfca; }

  /* ============ REVIEWS ============ */
  .reviews-sec { padding: 8px 0 84px; --rv-green: #4cac3f; }
  .rv-head { margin-bottom: 30px; }
  .rv-head__title { font-size: 34px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }
  .rv-inner { display: grid; grid-template-columns: 360px 1fr; gap: 56px; align-items: start; }

  /* Star badges (green circles) */
  .rv-stars { display: inline-flex; gap: 4px; vertical-align: middle; }
  .rv-star {
    width: 19px; height: 19px;
    display: grid; place-items: center;
    flex-shrink: 0;
    color: var(--star);
  }
  .rv-star svg { display: block; width: 100%; height: 100%; color: inherit; }
  .rv-star--empty { color: #d9dde2; }
  .rv-stars--sm .rv-star { width: 16px; height: 16px; }

  /* Left summary */
  .rv-sum__agg { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
  .rv-sum__score { font-size: 26px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
  .rv-sum__count { font-size: 16px; color: var(--muted); margin-bottom: 30px; }
  .rv-dist__h { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 16px; }
  .rv-dist__row { display: grid; grid-template-columns: 40px 1fr 36px; align-items: center; gap: 12px; margin-bottom: 11px; }
  .rv-dist__lbl { font-size: 15px; color: var(--muted); display: flex; align-items: center; gap: 3px; white-space: nowrap; }
  .rv-dist__lbl svg { color: var(--star); display: block; }
  .rv-dist__track { display: block; height: 9px; border-radius: 999px; background: #e8eaed; overflow: hidden; }
  .rv-dist__fill { display: block; height: 100%; border-radius: 999px; background: var(--star); transition: width .6s cubic-bezier(.22,1,.36,1); }
  .rv-dist__n { font-size: 15px; color: var(--text); text-align: right; }

  /* Clickable distribution rows = star filter */
  .rv-dist__row { cursor: pointer; padding: 5px 8px; margin: 0 -8px 4px; border-radius: 10px; transition: background .14s; }
  .rv-dist__row:hover { background: #f2f5f8; }
  .rv-dist__row:hover .rv-dist__track { background: #dde2e7; }
  .rv-dist__row.is-active { background: #fff3e6; }
  .rv-dist__row.is-active .rv-dist__lbl { color: var(--navy); font-weight: 700; }
  .rv-dist__row:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

  /* Feed-head filter chip + empty state */
  .rv-feedhead__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .rv-fchip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 7px 0 13px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
  .rv-fchip[hidden] { display: none; }
  .rv-fchip__x { width: 19px; height: 19px; border-radius: 999px; background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: 15px; line-height: 1; transition: background .14s; }
  .rv-fchip:hover .rv-fchip__x { background: rgba(255,255,255,.42); }
  .rv-empty { border: 1px dashed var(--border); border-radius: 14px; padding: 40px 22px; text-align: center; color: var(--muted); font-size: 15.5px; }
  .rv-empty strong { color: var(--navy); }

  /* Feed */
  .rv-feedhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
  .rv-feedhead__t { font-size: 18px; font-weight: 600; color: var(--navy); }
  .rv-sort { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); }
  .rv-sort select {
    font: inherit; font-size: 15px; color: var(--navy); font-weight: 600;
    border: 1.5px solid var(--border); border-radius: 10px;
    padding: 9px 36px 9px 14px; background: #fff;
    -webkit-appearance: none; appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2301273f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
  }
  .rv-sort select:hover { border-color: #b9c5d0; }

  .rv-feed { display: flex; flex-direction: column; gap: 16px; }
  .rv-card { border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px 18px; background: #fff; }
  .rv-body { font-size: 16px; line-height: 1.62; color: var(--text); margin: 14px 0 0; text-wrap: pretty; }
  .rv-body.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .rv-more { color: #1f7ad1; font-weight: 600; font-size: 15px; margin-top: 8px; }
  .rv-more:hover { text-decoration: underline; }

  .rv-photos { display: flex; gap: 10px; margin-top: 16px; }
  .rv-photo { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; cursor: pointer; background: #eef3f7; }
  .rv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
  .rv-photo:hover img { transform: scale(1.06); }
  .rv-photo__more {
    position: absolute; inset: 0; background: rgba(8,16,24,0.62);
    color: #fff; font-size: 16px; font-weight: 700;
    display: grid; place-items: center;
  }

  .rv-meta { display: flex; align-items: center; gap: 11px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border-soft); font-size: 15px; color: var(--muted); flex-wrap: wrap; }
  .rv-meta__user { display: inline-flex; align-items: center; gap: 9px; color: var(--navy); font-weight: 600; }
  .rv-meta__avatar { width: 30px; height: 30px; border-radius: 999px; background: #e7eef4; color: #7c8b98; display: grid; place-items: center; flex-shrink: 0; }
  .rv-meta__avatar svg { display: block; }
  .rv-flag { width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); display: block; }
  .rv-flagwrap { display: inline-flex; align-items: center; cursor: default; }
  .rv-sep { width: 4px; height: 4px; border-radius: 999px; background: #c2ccd4; }
  .rv-verified { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: #2faa5a; font-weight: 600; font-size: 14px; }
  .rv-verified svg { display: block; }
  .rv-verified__check { width: 18px; height: 18px; border-radius: 999px; background: #2faa5a; color: #fff; display: grid; place-items: center; }

  /* Feed footer */
  .rv-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; }
  .rv-write {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 24px; border-radius: 999px;
    border: 1.5px solid var(--border); background: #fff;
    color: var(--navy); font-weight: 600; font-size: 15px;
    transition: border-color .15s, background .15s;
  }
  .rv-write:hover { border-color: var(--navy); background: #f6f9fb; }
  .rv-write svg { display: block; color: var(--orange); }
  .rv-loadmore {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 30px; border-radius: 999px;
    background: var(--navy); color: #fff; font-weight: 600; font-size: 15px;
    transition: background .15s;
  }
  .rv-loadmore:hover { background: #06324f; }
  .rv-loadmore svg { display: block; }

  /* Lightbox */
  .rv-lightbox { position: fixed; inset: 0; z-index: 999; background: rgba(6,14,22,0.85); display: none; place-items: center; padding: 40px; cursor: zoom-out; }
  .rv-lightbox.is-open { display: grid; }
  .rv-lightbox img { max-width: 88vw; max-height: 88vh; border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6); }
  .rv-lightbox video { max-width: 88vw; max-height: 88vh; border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6); background: #000; }
  .rv-photo--video video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .rv-photo__play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(8,16,24,.30); pointer-events: none; }

  /* ============ Write-a-review modal ============ */
  .rvm { position: fixed; inset: 0; z-index: 1000; background: rgba(6,14,22,.6); display: none; place-items: center; padding: 28px; }
  .rvm.is-open { display: grid; }
  .rvm__card { width: min(560px, 100%); max-height: calc(100vh - 56px); overflow-y: auto; background: #fff; border-radius: 18px; box-shadow: 0 30px 70px -20px rgba(6,20,34,.5); }
  .rvm__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 26px 0; }
  .rvm__title { font-size: 22px; font-weight: 700; color: var(--navy); margin: 0; letter-spacing: -.01em; }
  .rvm__sub { font-size: 14px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }
  .rvm__close { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; color: var(--muted); background: #f3f6f8; flex-shrink: 0; font-size: 20px; line-height: 1; transition: background .14s, color .14s; }
  .rvm__close:hover { background: #e7edf1; color: var(--navy); }
  .rvm__body { padding: 20px 26px; display: flex; flex-direction: column; gap: 18px; }
  .rvm__field { display: flex; flex-direction: column; gap: 8px; }
  .rvm__label { font-size: 14px; font-weight: 600; color: var(--navy); }
  .rvm__req { color: var(--orange); }
  .rvm__stars { display: flex; align-items: center; gap: 6px; }
  .rvm__star { color: #d6dde3; transition: color .12s, transform .12s; cursor: pointer; display: block; }
  .rvm__star:hover { transform: scale(1.12); }
  .rvm__star.is-on { color: var(--star); }
  .rvm__starlbl { margin-left: 10px; font-size: 14px; font-weight: 600; color: var(--muted); }
  .rvm__input, .rvm__textarea { font: inherit; font-size: 15px; color: var(--text); border: 1.5px solid var(--border); border-radius: 11px; padding: 12px 14px; background: #fff; outline: none; transition: border-color .15s; width: 100%; box-sizing: border-box; }
  .rvm__input::placeholder, .rvm__textarea::placeholder { color: #93a1ad; }
  .rvm__input:focus, .rvm__textarea:focus { border-color: var(--navy); }
  .rvm__textarea { min-height: 112px; resize: vertical; line-height: 1.55; }
  .rvm__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .rvm__foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 4px 26px 26px; }
  .rvm__cancel { padding: 12px 22px; border-radius: 999px; border: 1.5px solid var(--border); background: #fff; color: var(--navy); font-weight: 600; font-size: 15px; transition: border-color .15s, background .15s; }
  .rvm__cancel:hover { border-color: var(--navy); background: #f6f9fb; }
  .rvm__submit { padding: 12px 28px; border-radius: 999px; background: var(--orange); color: #fff; font-weight: 600; font-size: 15px; transition: background .15s; }
  .rvm__submit:hover { background: var(--orange-hover); }
  .rvm__err { font-size: 13.5px; color: #e8473b; margin: -6px 0 0; display: none; }
  .rvm__err.is-shown { display: block; }

  /* Thank-you state after an AJAX submit (replaces the form, no reload) */
  .rvm__success { padding: 44px 34px 38px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .rvm__success-ico {
    width: 64px; height: 64px; border-radius: 999px;
    background: #eaf7ef; color: #34b35a;
    display: grid; place-items: center; margin-bottom: 4px;
  }
  .rvm__success-ico svg { display: block; }
  .rvm__success .rvm__title { margin: 0; }
  .rvm__success-txt { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 380px; }
  .rvm__success .rvm__submit { margin-top: 10px; }
  .rvm__hint { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.45; display: flex; align-items: flex-start; gap: 6px; }
  .rvm__hint svg { flex-shrink: 0; margin-top: 1px; color: var(--muted-2); }
  .rvm__hint.is-err { color: #e8473b; }
  .rvm__hint.is-err svg { color: #e8473b; }
  .rvm__success { padding: 46px 30px 50px; text-align: center; }
  .rvm__success-ico { width: 66px; height: 66px; border-radius: 999px; background: #e7f4ec; color: #2f8a55; display: grid; place-items: center; margin: 0 auto 20px; }
  .rvm__success h3 { font-size: 23px; color: var(--navy); margin: 0 0 10px; letter-spacing: -.01em; }
  .rvm__success p { font-size: 15px; color: var(--muted); margin: 0 auto; max-width: 380px; line-height: 1.6; }
  @media (max-width: 560px){ .rvm__row { grid-template-columns: 1fr; } }
  .rv-flash { animation: rvFlash 1.8s ease; }
  @keyframes rvFlash { 0%,100%{ background:#fff; } 18%{ background:#fff6ea; } }
  /* Review media upload */
  .rvm__optional { font-weight: 500; font-size: 12.5px; color: var(--muted-2); }
  .rvm__file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .rvm__drop { display: flex; align-items: center; gap: 14px; border: 1.5px dashed var(--border); border-radius: 12px; padding: 14px 16px; cursor: pointer; background: #fafbfc; transition: border-color .15s, background .15s; }
  .rvm__drop:hover, .rvm__drop.is-drag { border-color: var(--navy); background: #f1f6fb; }
  .rvm__drop-ico { width: 44px; height: 44px; border-radius: 11px; background: #eaf0f5; color: var(--navy); display: grid; place-items: center; flex-shrink: 0; }
  .rvm__drop-txt { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
  .rvm__drop-txt strong { display: block; color: var(--navy); font-weight: 600; font-size: 14px; margin-bottom: 2px; }
  .rvm__previews { display: flex; flex-wrap: wrap; gap: 10px; }
  .rvm__previews:empty { display: none; }
  .rvm__thumb { position: relative; width: 74px; height: 74px; border-radius: 10px; overflow: hidden; background: #eef3f7; border: 1px solid var(--border); }
  .rvm__thumb img, .rvm__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .rvm__thumb__badge { position: absolute; left: 5px; bottom: 5px; display: inline-flex; align-items: center; gap: 3px; background: rgba(8,16,24,.74); color: #fff; border-radius: 5px; padding: 1px 5px; font-size: 10px; font-weight: 700; letter-spacing: .03em; }
  .rvm__thumb__rm { position: absolute; top: 3px; right: 3px; width: 21px; height: 21px; border-radius: 999px; background: rgba(8,16,24,.66); color: #fff; display: grid; place-items: center; font-size: 14px; line-height: 1; transition: background .15s; }
  .rvm__thumb__rm:hover { background: #e8473b; }
  .rvm__thumb.is-loading { display: grid; place-items: center; }
  .rvm__thumb__spin { width: 24px; height: 24px; border: 2.5px solid #cdd8e0; border-top-color: var(--navy); border-radius: 999px; animation: rvm-spin .7s linear infinite; }
  @keyframes rvm-spin { to { transform: rotate(360deg); } }

  /* ============ FAQ (accordion) ============ */
  .pfaq { padding: 8px 0 88px; }
  .pfaq__inner { display: grid; grid-template-columns: 350px 1fr; gap: 80px; align-items: start; }
  .pfaq__head { }
  .pfaq__eyebrow {
    display: inline-block;
    font-size: 14px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 12px;
  }
  .pfaq__title { font-size: 34px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; margin-bottom: 18px; }
  .pfaq__lead { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0 0 26px; }
  .pfaq__contact {
    display: inline-flex; align-items: center; gap: 13px;
    padding: 11px 24px 11px 11px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    font-size: 16px; font-weight: 600; color: var(--navy);
    background: #fff;
    transition: border-color .15s, background .15s;
  }
  .pfaq__contact:hover { border-color: var(--navy); background: #f6f9fb; }
  .pfaq__contact-ico {
    width: 36px; height: 36px; border-radius: 999px;
    background: var(--light-blue-2); color: var(--navy);
    display: grid; place-items: center;
  }
  .pfaq__contact-ico svg { display: block; }
  .pfaq__list {
    border-top: 1px solid var(--border);
  }
  .pfaq__item { border-bottom: 1px solid var(--border); }
  .pfaq__q {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    width: 100%;
    text-align: left;
    padding: 26px 4px;
    font-size: 20px; font-weight: 600; color: var(--navy);
    letter-spacing: -0.01em;
    transition: color .15s;
  }
  .pfaq__q:hover { color: var(--orange); }
  .pfaq__icon {
    flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 999px;
    display: grid; place-items: center;
    background: #eef3f7;
    color: var(--navy);
    transition: background .2s, color .2s, transform .25s;
  }
  .pfaq__icon svg { display: block; transition: transform .25s ease; }
  .pfaq__item.is-open .pfaq__icon { background: var(--orange); color: #fff; }
  .pfaq__item.is-open .pfaq__icon svg { transform: rotate(45deg); }
  .pfaq__a {
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
  }
  .pfaq__a-inner {
    padding: 0 64px 28px 4px;
    font-size: 17px; line-height: 1.7; color: var(--muted);
  }
  .pfaq__a-inner p { margin: 0; }
  .pfaq__a-inner a { color: #1f7ad1; }

  /* ============ EXPERT TIP (CTA) ============ */
  .expert { padding: 8px 0 88px; }
  /* No photo set → let the body span the full card instead of the 300px column. */
  .expert__body:only-child { grid-column: 1 / -1; }
  .expert__card {
    position: relative;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 0;
    background: var(--navy);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px -34px rgba(8,38,65,0.55);
  }
  .expert__photo {
    position: relative;
    align-self: stretch;
    background: #0a0a0a;
    min-height: 340px;
  }
  .expert__photo image-slot,
  .expert__photo .image-slot {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
  }
  .expert__body {
    padding: 48px 52px;
    color: #fff;
    align-self: center;
  }
  .expert__eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #ffd9c2;
    margin-bottom: 20px;
  }
  .expert__eyebrow::before {
    content: ""; width: 26px; height: 2px; background: var(--orange); border-radius: 2px;
  }
  .expert__quote {
    font-size: 25px; line-height: 1.45;
    letter-spacing: -0.015em;
    font-weight: 500;
    margin: 0 0 26px;
    text-wrap: pretty;
  }
  .expert__quote b { color: #ffb98a; font-weight: 600; }
  .expert__sign { display: flex; align-items: center; gap: 14px; }
  .expert__sign-name { font-size: 17px; font-weight: 700; }
  .expert__sign-link { color: inherit; transition: color .15s; }
  .expert__sign-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .expert__photo a { display: block; height: 100%; }
  .expert__sign-role { font-size: 15px; color: #9fb4c4; }
  .expert__sign-line { width: 1px; height: 34px; background: rgba(255,255,255,0.18); }

  /* ============ GERELATEERDE PRODUCTEN ============ */
  .related { padding: 8px 0 96px; }
  .related__title { font-size: 28px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; margin-bottom: 26px; }
  .related__row { display: flex; flex-wrap: wrap; gap: 16px; }
  .related__pill {
    display: inline-flex; align-items: center;
    padding: 16px 30px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    font-size: 18px; color: var(--navy);
    background: #fff;
    transition: border-color .15s, background .15s, color .15s;
  }
  .related__pill:hover { border-color: var(--navy); background: #f6f9fb; }

  /* ============ GERELATEERDE ARTIKELEN ============ */
  .articles { padding: 8px 0 140px; }
  .articles__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
  .articles__title { font-size: 28px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }
  .articles__all { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: #1f7ad1; white-space: nowrap; }
  .articles__all svg { display: block; }

  /* ---- Article slider (carousel) ---- */
  .artsl { position: relative; }
  .artsl__track {
    display: flex;
    gap: 26px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 6px 4px 22px;
    margin: -6px -4px 0;
    cursor: grab;
  }
  .artsl__track::-webkit-scrollbar { display: none; }
  .artsl.is-dragging .artsl__track { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
  .artsl__card { flex: 0 0 calc((100% - 52px) / 3); scroll-snap-align: start; }
  .artsl__card img { pointer-events: none; }
  .artsl__nav {
    position: absolute;
    top: 33%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    border: 1px solid var(--border);
    box-shadow: 0 12px 28px -10px rgba(8,38,65,0.45);
    z-index: 4; cursor: pointer;
    transition: opacity .18s, color .15s, transform .15s, box-shadow .15s;
  }
  .artsl__nav svg { display: block; }
  .artsl__nav:hover { color: var(--orange); transform: translateY(-50%) scale(1.06); }
  .artsl__nav--prev { left: -16px; }
  .artsl__nav--next { right: -16px; }
  .artsl__nav[disabled] { opacity: 0; pointer-events: none; }
  @media (max-width: 980px) { .artsl__card { flex-basis: calc((100% - 26px) / 2); } }
  @media (max-width: 620px) {
    .artsl__card { flex-basis: 86%; }
    .artsl__nav { display: none; }
  }

  .articles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .article-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .2s, transform .2s;
  }
  .article-card:hover { box-shadow: 0 22px 40px -26px rgba(8,38,65,0.42); transform: translateY(-3px); }
  .article-card__media { position: relative; aspect-ratio: 16 / 10; background: #eef3f7; }
  .article-card__media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
  .article-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .article-card__tag {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    background: rgba(255,255,255,0.94);
    color: var(--navy);
    font-size: 13px; font-weight: 600;
    padding: 6px 13px; border-radius: 999px;
    backdrop-filter: blur(4px);
  }
  .article-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
  .article-card__title { font-size: 19px; font-weight: 600; color: var(--navy); line-height: 1.32; letter-spacing: -0.01em; margin-bottom: 10px; text-wrap: pretty; }
  .article-card__excerpt { font-size: 15px; line-height: 1.6; color: var(--muted); margin-bottom: 18px; }
  .article-card__meta { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #9aa6b0; margin-top: auto; }
  .article-card__meta svg { display: block; }

  /* The shared site footer's newsletter band is designed to pull up 150px and
     overlap a gray "help" section above it (as on the homepage). This page has
     no such section, so that overlap lands on top of the article slider.
     Neutralise it here so the newsletter sits normally below the slider. */
  #lofoot-root .lof-news-band--top { transform: none !important; margin-bottom: 0 !important; }

  /* ============ PRODUCT COMPARISON ============ */
  .cmp-section { padding: 8px 0 64px; }

  /* Tab nav */
  .cmp-tabs {
    display: flex;
    gap: 44px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 40px;
  }
  .cmp-tab {
    position: relative;
    padding: 4px 0 18px;
    font-size: 17px;
    color: var(--muted);
    white-space: nowrap;
    transition: color .15s;
  }
  .cmp-tab:hover { color: var(--text); }
  .cmp-tab.is-active { color: var(--navy); font-weight: 600; }
  .cmp-tab::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 3px;
    background: var(--orange);
    border-radius: 3px 3px 0 0;
    opacity: 0;
    transform: scaleX(.55);
    transition: opacity .22s ease, transform .22s ease;
  }
  .cmp-tab.is-active::after { opacity: 1; transform: scaleX(1); }

  /* Sticky jump-nav bar */
  .pdp-stickytabs {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #fff;
    border-bottom: 1px solid var(--border);
    margin-bottom: 40px;
    box-shadow: 0 6px 16px -12px rgba(8,38,65,.3);
  }
  .cmp-tabs--sticky {
    border-bottom: none;
    margin-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .cmp-tabs--sticky::-webkit-scrollbar { display: none; }
  .cmp-tabs--sticky .cmp-tab { padding: 19px 0; }
  .cmp-tabs--sticky .cmp-tab::after { bottom: 0; }
  /* short-label variants (shown only on phones) */
  .cmp-tab__sm { display: none; }
  /* edge scroll buttons — desktop hidden, shown on tablet/mobile when scrollable */
  .pdp-stickytabs__edge { display: none; }

  /* Tablet/mobile: tabs scroll horizontally — hint it with fades + chevrons */
  @media (max-width: 980px) {
    .cmp-tabs--sticky { scroll-padding-inline: 44px; }
    .pdp-stickytabs::before,
    .pdp-stickytabs::after {
      content: ""; position: absolute; top: 0; bottom: 0; width: 56px;
      z-index: 3; pointer-events: none; opacity: 0; transition: opacity .18s;
    }
    .pdp-stickytabs::before { left: 0;  background: linear-gradient(90deg, #fff 38%, rgba(255,255,255,0)); }
    .pdp-stickytabs::after  { right: 0; background: linear-gradient(270deg, #fff 38%, rgba(255,255,255,0)); }
    .pdp-stickytabs.can-prev::before { opacity: 1; }
    .pdp-stickytabs.can-next::after  { opacity: 1; }

    .pdp-stickytabs__edge {
      position: absolute; top: 0; bottom: 0; z-index: 4;
      width: 48px; display: none; place-items: center;
      border: 0; background: transparent; cursor: pointer; color: var(--navy);
    }
    .pdp-stickytabs__edge--prev { left: 0; justify-items: start; padding-left: 6px; }
    .pdp-stickytabs__edge--next { right: 0; justify-items: end; padding-right: 6px; }
    .pdp-stickytabs__edge svg {
      display: block; width: 34px; height: 34px; padding: 8px; box-sizing: border-box;
      background: #fff; border: 1px solid var(--border); border-radius: 999px;
      box-shadow: 0 6px 16px -6px rgba(8,38,65,0.5);
    }
    .pdp-stickytabs.can-prev .pdp-stickytabs__edge--prev,
    .pdp-stickytabs.can-next .pdp-stickytabs__edge--next { display: grid; }
  }

  .cmp-heading {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin: 0 0 28px;
  }

  /* Row of product columns */
  /* Up to 6 columns: scroll horizontally when they don't fit (desktop too).
     overflow-x:auto forces overflow-y:auto, so pad the bottom for the
     current-column shadow + scrollbar and pull it back with a negative margin. */
  .cmp-row {
    display: flex;
    align-items: stretch;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 6px 4px 34px;
    margin: -6px -4px -20px;
    scrollbar-width: thin;
  }
  .cmp-row::-webkit-scrollbar { height: 7px; }
  .cmp-row::-webkit-scrollbar-thumb { background: #c8d2db; border-radius: 999px; }
  .cmp-col { scroll-snap-align: start; }
  .cmp-col {
    /* Containing block for absolutely-positioned .screen-reader-text inside the
       WooCommerce price/rating markup. Without it those 1px SR spans anchor to
       the page (ICB) at their far-right scroll position, widening the document
       and letting mobile pinch-zoom out. */
    position: relative;
    width: 226px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 16px 22px;
    border-radius: 20px;
  }
  .cmp-col--current {
    width: 280px;
    /* More inner padding so the white photo tile sits well inside the blue,
       with a clear blue frame around it instead of reaching the edge. */
    padding: 22px 26px 26px;
    background: var(--light-blue-2);
    border-radius: 22px;
    box-shadow: 0 24px 40px -28px rgba(8, 38, 65, 0.28);
  }

  .cmp-col__pill { height: 30px; margin-bottom: 16px; display: flex; }
  .cmp-pill {
    background: linear-gradient(135deg, #0e3a5b 0%, #01273f 100%);
    color: #fff;
    font-size: 14px; font-weight: 600;
    padding: 5px 16px;
    border-radius: 999px;
    box-shadow: 0 2px 8px -4px rgba(8,38,65,0.18);
  }

  .cmp-col__imgwrap {
    position: relative;
    width: 100%;
    height: 200px;
    display: grid;
    /* Definite row so the image's max-height:100% actually binds. Without it the
       auto row grows to the image's own height (square WC photos hit max-width
       80% first in the wider "onze keuze" column) and the photo overflows the
       tile bottom onto the blue. minmax(0,1fr) pins the row to the tile height. */
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    margin-bottom: 18px;
    background: #fff;
    border-radius: 16px;
    padding: 14px;
  }
  /* Flat white photo tile (per design) — not a raised card floating over the
     blue column, and no clipping. The image is sized to fit (max-width 80%),
     so it stays inside the tile without overflow:hidden cropping its edges.
     border-box so width:100% INCLUDES the 14px padding and the tile fits the
     tinted column exactly — content-box makes it 28px wider than the column
     content, poking ~12px past the blue column's right edge (a white sliver on
     the blue). Height 228 keeps the rendered size (14 + 200 photo + 14),
     matching the content-box side tiles. */
  .cmp-col--current .cmp-col__imgwrap { background: #fff; box-sizing: border-box; height: 228px; }
  .cmp-col__imgwrap img { max-height: 100%; max-width: 80%; width: auto; object-fit: contain; }
  .cmp-col__imgwrap image-slot { width: 150px; height: 180px; }

  .cmp-ribbon {
    position: absolute;
    top: 8px; left: -18px;
    z-index: 3;
    background: var(--orange);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.01em;
    padding: 9px 22px 9px 14px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%);
    text-transform: lowercase;
  }
  .cmp-ribbon span { text-transform: none; }
  .cmp-col--current .cmp-ribbon { left: 0; }

  .cmp-col__name {
    min-height: 58px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
  }
  .cmp-col__name--cur { color: var(--navy); }
  .cmp-col__name--link { color: var(--navy); }
  .cmp-col__name--link:hover { color: var(--orange); }

  .cmp-col__rating { display: flex; align-items: center; gap: 9px; height: 28px; margin-bottom: 16px; }
  .cmp-stars { display: flex; gap: 1px; color: var(--star); }
  .cmp-stars svg { display: block; }
  .cmp-col__reviews { font-size: 15px; color: var(--muted); }

  .cmp-col__price {
    font-size: 24px;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -0.01em;
    margin-bottom: 20px;
  }
  /* Strikethrough handling: struck old price muted + smaller, new price bold navy
     — consistent with the hero .pdp-price block. */
  .cmp-col__price del,
  .cmp-col__price del .woocommerce-Price-amount {
    color: #9aa6b0; font-weight: 500; font-size: 16px; text-decoration: line-through;
  }
  .cmp-col__price del { margin-right: 7px; }
  .cmp-col__price ins { text-decoration: none; color: var(--navy); }

  .cmp-col__specs { width: 100%; }
  .cmp-spec {
    width: 100%;
    border-top: 1px solid var(--border);
    padding: 14px 0 16px;
  }
  .cmp-col--current .cmp-spec { border-top-color: #c4d2e0; }
  .cmp-spec__label {
    height: 24px;
    font-size: 15px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: underline dotted;
    text-underline-offset: 4px;
    text-decoration-color: #b8c3cc;
    margin-bottom: 6px;
  }
  .cmp-spec__val {
    min-height: 28px;
    display: flex;
    align-items: center;
    font-size: 17px;
    color: var(--text);
    font-weight: 500;
  }
  .cmp-check { color: #2bb24c; display: block; }
  /* Comparison feature checks are green (rendered via #i-check, currentColor). */
  .cmp-spec__val svg { color: #2bb24c; }
  .cmp-spec__label--blank { text-decoration: none; }
  .cmp-dash { width: 22px; height: 3px; border-radius: 3px; background: #9aa6b0; }

  .cmp-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    font-size: 17px;
    font-weight: 600;
    color: #1f7ad1;
    transition: gap .15s;
  }
  /* Blue accent, matching "Toon alle specificaties" (.pspec__more). It's an <a>;
     .pdp-page a{color:inherit} would otherwise drag it to dark. */
  .pdp-page a.cmp-more { color: #1f7ad1; }
  .cmp-more:hover { gap: 14px; }
  .cmp-more svg { display: block; }

  /* ============ SPECIFICATIES ============ */
  .specs { padding: 8px 0 88px; }
  .specs .wrap { position: relative; }
  .specs__title { font-size: 30px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; margin-bottom: 24px; }
  .specs__search { position: relative; max-width: 460px; margin-bottom: 40px; }
  .specs__search input {
    width: 100%; height: 56px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 0 52px 0 20px;
    font-size: 16px; font-family: inherit; color: var(--text);
    background: #fff; outline: none;
    transition: border-color .15s;
  }
  .specs__search input:focus { border-color: var(--navy); }
  .specs__search input::placeholder { color: #93a1ad; }
  .specs__search-ico {
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    color: #1f7ad1; pointer-events: none;
  }
  .specs__search-ico svg { display: block; }

  .specs__group { margin-bottom: 40px; }
  .specs__group:last-child { margin-bottom: 0; }
  .specs__group-title { font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; margin-bottom: 6px; }
  .specs__table { display: flex; flex-direction: column; }
  .specs__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 24px;
    padding: 15px 18px;
    border-radius: 8px;
  }
  .specs__row:nth-child(odd) { background: #f4f7fa; }
  .specs__label { display: flex; align-items: center; gap: 11px; font-size: 16px; color: var(--text); }
  .specs__info {
    width: 22px; height: 22px; flex-shrink: 0;
    color: #1f7ad1;
    display: grid; place-items: center;
    /* It's a <button> — strip the UA border/background or you get a black ring
       around the blue info circle. */
    border: 0; background: none; padding: 0;
    appearance: none; -webkit-appearance: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .12s;
  }
  .specs__info:hover { transform: scale(1.12); }
  .specs__info svg { display: block; }
  .specs__value { font-size: 16px; color: var(--text); font-weight: 500; }
  .specs__value--check { color: #2bb24c; }
  .specs__value--check svg { display: block; }
  .specs__value--dash { width: 22px; height: 3px; border-radius: 3px; background: #9aa6b0; }
  .specs__empty { display: none; padding: 24px 18px; font-size: 16px; color: var(--muted); }

  /* Info popover */
  .specs-pop {
    position: fixed;
    z-index: 60;
    max-width: 300px;
    background: var(--navy);
    color: #fff;
    font-size: 14px; line-height: 1.5;
    padding: 14px 16px;
    border-radius: 12px;
    box-shadow: 0 18px 40px -16px rgba(8,38,65,0.6);
    opacity: 0; transform: translateY(4px);
    transition: opacity .15s, transform .15s;
    pointer-events: none;
  }
  .specs-pop.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .specs-pop__title { font-weight: 700; margin-bottom: 4px; }
  .specs-pop::after {
    content: ""; position: absolute; top: -7px; left: var(--arrow, 24px);
    border-left: 8px solid transparent; border-right: 8px solid transparent;
    border-bottom: 8px solid var(--navy);
  }

  /* ===================================================================
     RESPONSIVE — tablet & mobile
     The shared .wrap is fixed at 1280px in homepage.css; below the
     desktop width we make it fluid with comfortable side gutters, then
     progressively stack the two-column layouts and reflow the grids.
     =================================================================== */

  /* Fluid container once the fixed 1280 + gutters no longer fits */
  @media (max-width: 1343px) {
    .wrap {
      width: auto;
      max-width: 1280px;
      margin-inline: auto;
      padding-inline: clamp(16px, 4vw, 32px);
      box-sizing: border-box;
    }
    .pdp-sticky__inner { max-width: 100%; }
  }

  /* ---------- TABLET (≤ 1024px) ---------- */
  @media (max-width: 1024px) {
    .pdp-grid { gap: 40px; }
    .pinfo-grid { grid-template-columns: 1fr 400px; gap: 40px; }
    .rv-inner { grid-template-columns: 300px 1fr; gap: 36px; }
    .pfaq__inner { grid-template-columns: 300px 1fr; gap: 44px; }
    .articles__grid { grid-template-columns: repeat(2, 1fr); }
    .pspec { column-gap: 28px; }
    .expert__card { grid-template-columns: 240px 1fr; }
    .expert__body { padding: 40px 40px; }
    .pdp-title { font-size: 44px; }
  }


  /* ---------- STACK two-column layouts (≤ 860px) ---------- */
  @media (max-width: 860px) {
    /* Tablet & below: stack photo on top, product info underneath
       (same as mobile). Gallery goes full-width, no centred cap. */
    .pdp-grid { grid-template-columns: 1fr; gap: 30px; }
    .pdp-info { max-width: none; padding-top: 0; }
    .pdp-gallery { max-width: none; margin-inline: 0; width: 100%; }

    .pinfo-grid { grid-template-columns: 1fr; gap: 40px; }
    .aichat { position: static; top: auto; }

    .rv-inner { grid-template-columns: 1fr; gap: 32px; }
    .pfaq__inner { grid-template-columns: 1fr; gap: 24px; }

    .expert__card { grid-template-columns: 1fr; }
    .expert__photo { min-height: 220px; }
    .expert__body { padding: 32px 28px; }
  }

  /* ---------- TABLET gallery: thumbnails as a side filmstrip --------- */
  /* Photo on the right, vertical thumb strip on the left — keeps the
     main image a sensible size instead of going full-bleed. Phones
     (≤ 640px) keep thumbs in a row below. */
  @media (min-width: 641px) and (max-width: 860px) {
    .pdp-gallery {
      display: grid;
      grid-template-columns: 96px 1fr;
      gap: 16px;
      align-items: start;
      max-width: 740px;
      width: 100%;
    }
    .pdp-gallery__main { order: 2; }
    .pdp-thumbs {
      order: 1;
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 12px;
      margin-top: 0;
      overflow-x: hidden;
      overflow-y: auto;
      max-height: 624px;
      padding-right: 2px;
    }
    .pdp-thumb { flex: 0 0 auto; width: 100%; }
  }

  /* ---------- PHONE (≤ 640px) ---------- */
  @media (max-width: 640px) {
    .pdp { padding: 18px 0 48px; }

    /* Heading scale */
    .pdp-title { font-size: 32px; margin-bottom: 20px; }
    .pdp-crumb { font-size: 13px; margin-bottom: 22px; gap: 8px; }
    .pinfo__h1,
    .rv-head__title,
    .specs__title,
    .pfaq__title { font-size: 26px; }
    .cmp-heading { font-size: 25px; }
    .related__title,
    .articles__title { font-size: 24px; }
    .expert__quote { font-size: 21px; }

    /* Price + specs */
    .pdp-price__now { font-size: 28px; }
    .pdp-specs li { font-size: 17px; }

    /* Spec grid → two columns, then comfortable */
    .pspec { grid-template-columns: repeat(2, 1fr); row-gap: 22px; column-gap: 24px; }

    /* Article cards single column */
    .articles__grid { grid-template-columns: 1fr; gap: 22px; }
    .articles__head { flex-wrap: wrap; gap: 10px; }

    /* Trim heavy section bottom padding */
    .pinfo { padding-bottom: 48px; }
    .reviews-sec,
    .pfaq,
    .expert,
    .related,
    .specs { padding-bottom: 52px; }
    /* …but keep clear separation between the last (articles) slider and the footer */
    .articles { padding-bottom: 88px; }

    /* Jump-nav: smaller tabs, short labels, still horizontally scrollable */
    .cmp-tabs--sticky { gap: 22px; }
    .cmp-tabs--sticky .cmp-tab { font-size: 15px; }
    .cmp-tab__lg { display: none; }
    .cmp-tab__sm { display: inline; }

    /* Reviews feed header wraps */
    .rv-feedhead { flex-wrap: wrap; }
    /* Keep the action buttons as inline pills like on tablet (wrap if tight),
       not full-width stacked bars */
    .rv-actions { flex-wrap: wrap; gap: 12px; }

    /* Tap-friendly review photos / lightbox padding */
    .rv-lightbox { padding: 16px; }

    /* Capacity buttons can wrap */
    .pdp-cap__row { flex-wrap: wrap; }
  }

  /* Very small phones */
  @media (max-width: 380px) {
    .pdp-title { font-size: 28px; }
    .pspec { grid-template-columns: 1fr; }
  }


  /* ============ Related-articles cards (.advh-card) ============
     Ported from the prototype's blog-grid.css (a separate file the PDP
     doesn't load). The --bg-* tokens are defined on .pdp-page above. */
.advh-card,
.adv-rel-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--bg-border-soft);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.blog-card:hover,
.article-card:hover,
.advh-card:hover,
.adv-rel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -30px rgba(8, 38, 65, 0.4);
  border-color: var(--bg-border);
}

/* ---------------------------------------------------------------------
   Media — 16:10, image covers and zooms gently on hover
   ------------------------------------------------------------------- */
.blog-card__media,
.article-card__media,
.advh-card .thumb,
.adv-rel-card .thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  height: auto;                 /* override the old fixed pixel heights */
  overflow: hidden;
  background: var(--bg-lightblue);
}
.blog-card__media img,
.article-card__img,
.advh-card .thumb img,
.adv-rel-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.blog-card:hover .blog-card__media img,
.article-card:hover .article-card__img,
.advh-card:hover .thumb img,
.adv-rel-card:hover .thumb img {
  transform: scale(1.04);
}

/* ---------------------------------------------------------------------
   Image tag pill (Homepage + PDP have one on the image)
   ------------------------------------------------------------------- */
.blog-card__tag,
.article-card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bg-navy);
  background: rgba(255, 255, 255, 0.94);
  padding: 6px 13px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ---------------------------------------------------------------------
   Body
   ------------------------------------------------------------------- */
.blog-card__body,
.article-card__body,
.advh-card .c,
.adv-rel-card .c {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}

/* Category eyebrow (Adviescentrum cards) */
.advh-card .cat,
.adv-rel-card .cat {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bg-orange);
  margin: 0 0 9px;
}

/* Top meta line (Homepage) */
.blog-card__meta {
  font-size: 12.5px;
  color: var(--bg-muted);
  margin-bottom: 11px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.blog-card__meta span {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--bg-muted-2);
}

/* Title */
.blog-card__title,
.article-card__title,
.advh-card h4,
.adv-rel-card h4 {
  font-size: 18.5px;
  font-weight: 600;
  color: var(--bg-text);
  line-height: 1.28;
  letter-spacing: -0.015em;
  margin: 0 0 11px;
  text-wrap: pretty;
}

/* Excerpt */
.blog-card__excerpt,
.article-card__excerpt,
.advh-card p,
.adv-rel-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bg-muted);
  margin: 0 0 20px;
}

/* ---------------------------------------------------------------------
   Footer / "Lees meer" affordance with circular arrow
   ------------------------------------------------------------------- */
.advh-card .foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.blog-card__more,
.advh-card .more,
.adv-rel-card .more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bg-navy);
}
.adv-rel-card .more,
.advh-card .more {
  margin-top: 0;                /* sits in its own footer row */
}

/* Read-time meta (PDP + Adviescentrum) */
.article-card__meta,
.advh-card .read {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--bg-muted);
}
.advh-card .read { margin-top: 0; }
.article-card__meta svg,
.advh-card .read svg {
  display: block;
  color: var(--bg-muted-2);
}

/* Circular arrow — homepage wraps it in a span, the advice cards use a
   bare <svg>; style both into the same pill that flips to orange on hover */
.blog-card__more .blog-card__arrow,
.advh-card .more svg,
.adv-rel-card .more svg {
  width: 30px;
  height: 30px;
  flex: none;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--bg-lightblue);
  color: var(--bg-navy);
  padding: 7px;
  display: grid;
  place-items: center;
  transition: background .15s, color .15s, transform .15s;
}
.blog-card:hover .blog-card__arrow,
.advh-card:hover .more svg,
.adv-rel-card:hover .more svg {
  background: var(--bg-orange);
  color: #fff;
  transform: translate(2px, -2px);
}

/* ============ SeaTrees mangrove impact — Helthome PDP only ============
   A trust-row item (the SeaTrees logo, styled like the Kiyoh row) in the buy
   box, plus the full mid-page band (.pdp-seastree). Copy/figures mirror the
   "Over ons" duurzaamheid section; both are brand-gated (helthome) in PHP.
   The navy logo variant (seatrees-dark.svg) stays legible on light grounds. */
.pdp-page .pdp-trust__slogo { height: 22px; width: auto; display: block; flex-shrink: 0; }
.pdp-page .pdp-trust__slink { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(14, 42, 63, .28); transition: color .15s, text-decoration-color .15s; }
.pdp-page .pdp-trust__slink:hover { color: var(--orange); text-decoration-color: var(--orange); }

.pdp-page .pdp-seastree { margin: 44px 0; }
.pdp-page .pdp-seastree__card {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  border-radius: 20px;
  overflow: hidden;
}
.pdp-page .pdp-seastree__body {
  background: radial-gradient(125% 120% at 0% 0%, #16456b 0%, rgba(22, 69, 107, 0) 55%), var(--navy);
  color: #fff;
  padding: 40px 40px 38px;
}
.pdp-page .pdp-seastree__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(231, 121, 53, .16);
  color: #f0974a;
  border: 1px solid rgba(231, 121, 53, .35);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 22px;
}
.pdp-page .pdp-seastree__badge svg { display: block; }
.pdp-page .pdp-seastree__title { font-size: 29px; line-height: 1.14; letter-spacing: -.02em; font-weight: 700; color: #fff; margin: 0 0 14px; }
.pdp-page .pdp-seastree__lead { font-size: 15px; line-height: 1.7; color: #aebecb; margin: 0 0 26px; }
.pdp-page .pdp-seastree__stats { display: flex; gap: 34px; margin: 0 0 26px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); flex-wrap: wrap; }
.pdp-page .pdp-seastree__num { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: #fff; line-height: 1; }
.pdp-page .pdp-seastree__num small { font-size: 16px; font-weight: 700; }
.pdp-page .pdp-seastree__lab { display: block; font-size: 12.5px; line-height: 1.45; color: #93a4b3; max-width: 210px; margin-top: 8px; }
.pdp-page .pdp-seastree__foot { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.pdp-page .pdp-seastree__partner { display: inline-flex; align-items: center; gap: 11px; }
.pdp-page .pdp-seastree__partner span { font-size: 12.5px; color: #93a4b3; }
.pdp-page .pdp-seastree__partner img { height: 22px; width: auto; opacity: .92; transition: opacity .15s; }
.pdp-page .pdp-seastree__partner:hover img { opacity: 1; }
.pdp-page .pdp-seastree__more { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #f0974a; }
.pdp-page .pdp-seastree__more:hover { color: #ffb072; }
.pdp-page .pdp-seastree__more svg { transition: transform .15s; }
.pdp-page .pdp-seastree__more:hover svg { transform: translateX(2px); }
.pdp-page .pdp-seastree__media { position: relative; min-height: 230px; background: #eaf1f6; }
.pdp-page .pdp-seastree__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 820px) {
  .pdp-page .pdp-seastree__card { grid-template-columns: 1fr; }
  .pdp-page .pdp-seastree__media { min-height: 200px; order: -1; }
  .pdp-page .pdp-seastree__body { padding: 30px 26px; }
  .pdp-page .pdp-seastree__title { font-size: 25px; }
}