/* ═══ Feature block content — ports Skeleton + fsi.css subset ═══ */
/* Most rules are scoped under .product-feature-block__body so they don't
   leak. Structural primitives (row/columns/alpha/omega/centered-text) are
   ALSO applied under .product-description so an admin authoring product
   description HTML can use the same Skeleton-style grid, AND under
   .cb-columns-grid so the content-builder columns block renders through the
   same row/columns/alpha/omega primitives. The shared scope uses :is() for a
   single source-of-truth selector. */

:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .container {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* .partition was 2em vertical padding in 2017's fsi.css — used to space
   major sections within an article. In ShopFSI the surrounding article
   title (cb-heading) already provides 2rem bottom margin, and rows have
   their own gap, so a partition's padding would stack on top of those
   margins and produce a giant blank zone above the first paragraph.
   Keep partition acting as a structural wrapper without contributing
   its own vertical space; if a future article needs multi-section
   separation, add explicit content (heading/divider) between them. */
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .partition {
    padding: 0;
}

:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
    /* No hard bottom margin on rows. Spacing between sections comes from
       the next heading's margin-top so that content like a split image
       stays close to its descriptive paragraph above. */
}

:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .columns {
    box-sizing: border-box;
}

/* Skeleton-style 12-col grid, simplified for flex */
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .one.columns        { flex: 0 0 calc((100% / 12) - 1.5rem); }
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .two.columns        { flex: 0 0 calc((100% * 2 / 12) - 1.5rem); }
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .three.columns      { flex: 0 0 calc((100% * 3 / 12) - 1.5rem); }
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .four.columns       { flex: 0 0 calc((100% * 4 / 12) - 1.5rem); }
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .five.columns       { flex: 0 0 calc((100% * 5 / 12) - 1.5rem); }
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .six.columns        { flex: 0 0 calc(50% - 0.75rem); }
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .seven.columns      { flex: 0 0 calc((100% * 7 / 12) - 1.5rem); }
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .eight.columns      { flex: 0 0 calc((100% * 8 / 12) - 1.5rem); }
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .nine.columns       { flex: 0 0 calc((100% * 9 / 12) - 1.5rem); }
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .ten.columns        { flex: 0 0 calc((100% * 10 / 12) - 1.5rem); }
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .eleven.columns     { flex: 0 0 calc((100% * 11 / 12) - 1.5rem); }
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .twelve.columns     { flex: 0 0 100%; }

/* Mobile: collapse all column widths to full */
@media (max-width: 768px) {
    :is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .columns,
    :is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .one.columns,
    :is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .two.columns,
    :is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .three.columns,
    :is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .four.columns,
    :is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .five.columns,
    :is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .six.columns,
    :is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .seven.columns,
    :is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .eight.columns,
    :is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .nine.columns,
    :is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .ten.columns,
    :is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .eleven.columns,
    :is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .twelve.columns { flex: 0 0 100%; }

    /* Consecutive columns blocks (e.g. the rental-partner rows) are sibling
       .cb-columns-grid wrappers with no margin between them. Once the columns
       stack, the last card of one block butts against the first of the next
       (the "end of a row" squish) — add the same 1.5rem the .row uses between
       its stacked columns so the spacing is uniform. */
    .cb-columns-grid + .cb-columns-grid { margin-top: 1.5rem; }
}

/* Rental-partner rows are each their own .cb-columns-grid block, so they need
   that 1.5rem row gap at ALL widths — the rule above only spaces them ≤768px,
   which left the rows butted together on tablet/desktop. Scoped to rental
   blocks so other content-builder pages (feature blocks etc.) are untouched. */
.cb-columns-grid:has(.cb-rental-partner) + .cb-columns-grid:has(.cb-rental-partner) {
    margin-top: 1.5rem;
}
/* Calibration-partner rows are the same shape (each a .cb-columns-grid block),
   so they need the same all-widths row gap between consecutive blocks. */
.cb-columns-grid:has(.cb-cal-partner) + .cb-columns-grid:has(.cb-cal-partner) {
    margin-top: 1.5rem;
}

/* Skeleton modifiers + fsi.css helpers used by the includes */
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .alpha { padding-left: 0; }
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .omega { padding-right: 0; }

/* 2017 used display: inline-block + vertical-align: middle on .alpha/.omega
   so two side-by-side columns (e.g. text + image) center against each
   other when one is shorter. The flex-based port preserves that intent
   by switching the row to align-items: center whenever it contains a
   .alpha or .omega column. Plain .row stays align-items: flex-start. */
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .row:has(> .alpha),
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .row:has(> .omega) {
    align-items: center;
}
/* ...EXCEPT rental-partner rows. They're authored with .alpha/.omega too, so
   the centering above applies and vertically staggers cards of unequal height
   — which also defeats the card's own flex:1 "anchor the models bar to the
   bottom, aligned with row neighbors" design. Barely visible on desktop (cards
   wrap similarly), obvious on iPad where narrower cards wrap to varied heights.
   Card grids want equal heights → stretch. (Same-specificity, later source, so
   it wins over the rule above.) */
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .row:has(.cb-rental-partner) {
    align-items: stretch;
}
/* Calibration-partner rows: same .alpha/.omega authoring → same center-stagger
   without this. Card grids want equal heights → stretch (matches rental). */
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .row:has(.cb-cal-partner) {
    align-items: stretch;
}
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .centered-text { text-align: center; }
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .img-100 { width: 100%; height: auto; }
:is(.product-feature-block__body, .product-description, .cb-rich-text, .cb-columns-grid) .img-50  { width: 50%;  height: auto; }

/* Responsive 16:9 video container, ported from 2017 fsi.css. Wraps an iframe
   so it fills its parent column at a fixed aspect ratio instead of rendering
   at its raw width/height attributes. */
.product-feature-block__body .video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    /* Border lives on the container so the padding-bottom% aspect trick
       can't sub-pixel-clip the bottom edge inside overflow:hidden. */
    border: 1px solid #000;
    box-sizing: border-box;
}
.product-feature-block__body .video-container iframe,
.product-feature-block__body .video-container object,
.product-feature-block__body .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.product-feature-block__body .footnote {
    font-size: 0.85em;
    color: var(--text-muted, #999);
    font-style: italic;
}

/* Headings inherit ShopFSI's monochrome palette via vars.
   Spacing model: margin-top introduces a new section above the heading,
   margin-bottom is small so the heading sits close to its own content
   below. Margin-collapsing handles the gap when an image-only paragraph
   (1.5rem bottom) precedes a heading (2.5rem top → collapses to 2.5rem). */
.product-feature-block__body h2,
.product-feature-block__body h3,
.product-feature-block__body h4,
.product-feature-block__body h5 {
    color: var(--text-primary);
    margin: 2.5rem 0 0.5rem 0;
}
/* Any heading that is the first child of its container has no preceding
   sibling to separate from — drop the top margin so it sits flush. Covers
   the section edge (direct child of the body) AND the top of any column,
   so alpha/omega vertical-centering inside a row doesn't get thrown off
   by an h3 that pushes its column content down by 2.5rem. */
.product-feature-block__body h2:first-child,
.product-feature-block__body h3:first-child,
.product-feature-block__body h4:first-child,
.product-feature-block__body h5:first-child {
    margin-top: 0;
}
.product-feature-block__body h4 { font-size: 1.25rem; font-weight: 600; }
.product-feature-block__body h5 { font-size: 1.05rem; font-weight: 600; }

/* Paragraphs that wrap only an image (a common 2017 markup pattern) get a
   bottom margin so they breathe like any other paragraph. Top + side margins
   stay 0 so the image still sits flush with its column edges. */
.product-feature-block__body p:has(> img:only-child) {
    margin: 0 0 1.5rem 0;
}

/* Paragraphs */
.product-feature-block__body p {
    line-height: 1.7;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

/* Links — match ShopFSI's accent rather than 2017's blue */
.product-feature-block__body a {
    color: var(--accent, #fff);
    text-decoration: underline;
}

/* Images inside body_html — constrain max width, preserve aspect ratio.
   Override storefront.css's `.product-description img` rule which adds
   margin:1rem 0 + border-radius globally; feature blocks own their own
   spacing via .row / .columns / .centered-text, so the extra vertical
   margin makes the layout uneven against sibling columns (e.g. the
   video-container is a div with no such margin).

   storefront.css line 133 has a SITE-WIDE `img { display: block }` rule.
   That defeats inline-flow image patterns (e.g. two side-by-side <img>
   tags at width:48% inside a <p>). Override to inline-block so adjacent
   images flow horizontally. Helper classes (.img-100, .img-50) re-opt
   into display:block below where full-width centered layout is wanted. */
.product-feature-block__body img,
.product-feature-block__body .product-description img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    margin: 0;
    border-radius: 0;
    vertical-align: top;
}

/* fb-thumb-swap widgets need block layout so the thumbs stack vertically /
   the main preview occupies its own line. .img-100 and .img-50 stay inline
   so .centered-text on a wrapper centers them naturally. */
.product-feature-block__body .fb-thumb-swap__main img,
.product-feature-block__body .fb-thumb-swap__item img {
    display: block;
}

/* Block-level images get auto left/right margin to actually center.
   text-align: center alone doesn't reach display:block elements.
   This rule comes AFTER the margin:0 override above so it wins for the
   left/right axis (top/bottom remain 0). */
.product-feature-block__body .centered-text img,
.product-feature-block__body .centered-text > img,
.product-feature-block__body p.centered-text img {
    margin-left: auto;
    margin-right: auto;
}

/* Burrito badges (used in dm242-intro) */
.product-feature-block__body .burrito {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    margin: 0 0.25rem 0.5rem 0;
    font-size: 0.8rem;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    color: var(--text-primary);
    background: transparent;
}
.product-feature-block__body .burrito.singleLine { white-space: nowrap; }

/* product-header-burritos: also used in dm242-intro */
.product-feature-block__body .product-header-burritos {
    margin: 0.5rem 0 1rem 0;
}

/* partition: fsi.css section divider used in dm-focus-assist, realtime-scopes */
.product-feature-block__body .partition {
    padding: 1rem 0;
}

/* ═══ Coverflow — 3D Apple-style carousel with center focus ═══
   Replaces the 2017 jquery.coverflow.js plugin. Vanilla JS in
   feature-blocks.js auto-wraps any .coverflow on the page in a
   .coverflow-wrapper, injects ‹ › arrows, and applies 3D transforms
   to each .cover based on its offset from the active center index.

   The wrapper has overflow:hidden + a fixed height so far-out covers
   never escape horizontally and the section below stays the right
   size. Covers are absolutely positioned at the wrapper center; JS
   computes per-cover translateX/translateZ/rotateY. */

.product-feature-block__body .coverflow-wrapper {
    position: relative;
    margin: 1.5rem 0 2rem 0;
    width: 100%;
    height: 240px;
    perspective: 900px;
    perspective-origin: 50% 50%;
    overflow: hidden;
    outline: none; /* tabIndex makes it focusable; suppress default focus ring */
}

.product-feature-block__body .coverflow {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    /* Reset any inline-flow margin/display from sibling rules */
    display: block;
    margin: 0;
    padding: 0;
    gap: 0;
}

.product-feature-block__body .coverflow .cover {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    /* Centering happens in JS transform: translate(-50%, -50%) ... */
    transform: translate(-50%, -50%);
    transform-origin: center center;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s ease;
    cursor: pointer;
    text-align: center;
    color: var(--text-muted, #888);
    font-size: 0.75rem;
    line-height: 1.3;
    user-select: none;
    backface-visibility: hidden;
}

.product-feature-block__body .coverflow .cover img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 0 0.4rem 0;
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.product-feature-block__body .coverflow .cover.cover--active {
    color: var(--text-primary);
    cursor: default;
}
.product-feature-block__body .coverflow .cover.cover--active img {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65);
}

/* Arrow buttons injected by feature-blocks.js */
.product-feature-block__body .coverflow-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-default, #444);
    background: var(--bg-card, #1a1a1a);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}
.product-feature-block__body .coverflow-arrow:hover {
    background: var(--bg-tertiary, #222);
}
.product-feature-block__body .coverflow-arrow--prev { left: 8px; }
.product-feature-block__body .coverflow-arrow--next { right: 8px; }

@media (max-width: 600px) {
    .product-feature-block__body .coverflow-wrapper {
        height: 200px;
    }
    .product-feature-block__body .coverflow .cover {
        width: 140px;
    }
}

/* Side-by-side PAP/PIP layout */
.product-feature-block__body .big-pap,
.product-feature-block__body .small-pap {
    display: inline-block;
    vertical-align: top;
}
.product-feature-block__body .big-pap img,
.product-feature-block__body .small-pap img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 0.25rem;
}

/* cd-image-container: used in split-screen, standard-dm, hdr-preview */
/* Replace interactive slider with static stacked display */
.product-feature-block__body .cd-image-container {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
}
.product-feature-block__body .cd-image-container img {
    width: 100%;
    height: auto;
}
.product-feature-block__body .cd-resize-img {
    position: absolute;
    top: 0; left: 0;
    width: 50%;
    overflow: hidden;
}
.product-feature-block__body .cd-resize-img img {
    width: 200%;
    max-width: 200%;
}
.product-feature-block__body .cd-image-label {
    position: absolute;
    bottom: 0.5rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    background: rgba(0,0,0,0.6);
    color: #fff;
}
.product-feature-block__body .cd-image-label[data-type="original"] {
    right: 0.5rem;
}
.product-feature-block__body .cd-image-label[data-type="modified"] {
    left: 0;
}
.product-feature-block__body .cd-handle { display: none; }

/* video-container: YouTube iframes — duplicate of the rule above; both
   updated to keep the border on the container, not the iframe. */
.product-feature-block__body .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border: 1px solid #000;
    box-sizing: border-box;
}
.product-feature-block__body .video-container iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
    box-sizing: border-box;
}

/* scope/audio interactive selector: show all descriptions, hide none */
.product-feature-block__body .scope-description,
.product-feature-block__body .audio-description {
    display: block !important;
}
.product-feature-block__body .hidden {
    /* override hidden class — show everything in static context */
    display: block !important;
}
.product-feature-block__body #big-scope-img,
.product-feature-block__body #big-audio-img {
    display: none;
}

/* scope-img thumbnails */
.product-feature-block__body .scope-img {
    cursor: default;
}

/* Lists */
.product-feature-block__body ul,
.product-feature-block__body ol {
    padding-left: 1.5rem;
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    line-height: 1.7;
}
.product-feature-block__body li {
    margin-bottom: 0.25rem;
}

/* Tables */
.product-feature-block__body table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1rem;
}
.product-feature-block__body td,
.product-feature-block__body th {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--border-default, #333);
    color: var(--text-primary);
    vertical-align: top;
}

/* clear utility */
.product-feature-block__body .clear {
    clear: both;
}

/* figure reset */
.product-feature-block__body figure {
    margin: 0;
    padding: 0;
}

/* ═══ fb-thumb-swap — interactive thumbnail swap component ═══ */
/* Click a thumbnail → main image swaps + matching description shows.
   Built to replace the 2017 jQuery .scope-img / .audio-img patterns.

   Layout (CSS grid with named areas):
       Default — thumbs on LEFT, big image and description stacked on RIGHT
       (description sits directly under its big image, matching the 2017 layout).
       Add `.fb-thumb-swap--main-left` to flip it (audio scopes-style). */

.product-feature-block__body .fb-thumb-swap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "items main"
        "items descs";
    column-gap: 1.5rem;
    row-gap: 0.75rem;
    margin-bottom: 2rem;
    align-items: start;
}
.product-feature-block__body .fb-thumb-swap--main-left {
    grid-template-areas:
        "main items"
        "descs items";
}

/* Layout: main alone on LEFT, items + descs stacked together on RIGHT.
   The description sits under the thumbnails (not under the main preview).
   Used by the audio-meters block — large meter image stays static-ish on
   the left while you click variants on the right and read about them. */
.product-feature-block__body .fb-thumb-swap--items-descs-together {
    grid-template-areas:
        "main items"
        "main descs";
}

/* Layout: main on top, thumbs in a horizontal row below. Robust — no
   alignment dependency on aspect ratios. The thumbs row uses equal
   flex distribution so each thumb is the same width (and naturally the
   same height), so they line up perfectly across the bottom of main.
   Description (if any) flows full-width below the thumbs row. */
.product-feature-block__body .fb-thumb-swap--vertical {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    grid-template-columns: none;
    grid-template-areas: none;
}
.product-feature-block__body .fb-thumb-swap--vertical .fb-thumb-swap__main {
    width: 100%;
    margin: 0;
}
.product-feature-block__body .fb-thumb-swap--vertical .fb-thumb-swap__main img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
}
.product-feature-block__body .fb-thumb-swap--vertical .fb-thumb-swap__items {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    grid-template-columns: none;
    width: 100%;
}
.product-feature-block__body .fb-thumb-swap--vertical .fb-thumb-swap__item {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}
.product-feature-block__body .fb-thumb-swap--vertical .fb-thumb-swap__item img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    object-fit: initial;
}
.product-feature-block__body .fb-thumb-swap--vertical .fb-thumb-swap__descs {
    margin-top: 0;
}

.product-feature-block__body .fb-thumb-swap__main { grid-area: main; }
.product-feature-block__body .fb-thumb-swap__items { grid-area: items; }
.product-feature-block__body .fb-thumb-swap__descs { grid-area: descs; }

.product-feature-block__body .fb-thumb-swap__main img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 200ms ease;
}

.product-feature-block__body .fb-thumb-swap__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    align-content: start;
}
.product-feature-block__body .fb-thumb-swap__item {
    display: block;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 0;
    overflow: hidden;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}
.product-feature-block__body .fb-thumb-swap__item:hover {
    opacity: 0.85;
}
.product-feature-block__body .fb-thumb-swap__item--active {
    opacity: 1;
    cursor: default;
}
.product-feature-block__body .fb-thumb-swap__item img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    border-radius: 0;
}

.product-feature-block__body .fb-thumb-swap__desc {
    display: none;
}
.product-feature-block__body .fb-thumb-swap__desc--active {
    display: block;
}

@media (max-width: 768px) {
    .product-feature-block__body .fb-thumb-swap,
    .product-feature-block__body .fb-thumb-swap--main-left,
    .product-feature-block__body .fb-thumb-swap--items-descs-together {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "items"
            "descs";
    }
    /* --vertical (main-on-top + thumbs row below) is already mobile-friendly
       by design — no overrides needed. */
}

/* ═══ fb-image-compare — drag-to-reveal wipe component ═══
   Vanilla-JS replacement for the 2017 jQuery cd-image-container plugin.
   Markup: .fb-image-compare > img.fb-image-compare__base
                              + .fb-image-compare__overlay > img
                              + .fb-image-compare__label--left
                              + .fb-image-compare__label--right
                              + .fb-image-compare__handle
   JS in feature-blocks.js drives overlay width and handle left position. */

.product-feature-block__body .fb-image-compare {
    position: relative;
    overflow: hidden;
    user-select: none;
    cursor: ew-resize;
    display: block;
    margin: 0;
}

/* Base image: bottom layer, sets the intrinsic aspect ratio of the container */
.product-feature-block__body .fb-image-compare__base {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    border-radius: 0;
    margin: 0;
}

/* Overlay: absolutely covers the container, clips to its own width so only
   the left portion of the overlay image is visible. Width is set by JS. */
.product-feature-block__body .fb-image-compare__overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%; /* JS overrides this on init */
    overflow: hidden;
    transition: width 0.12s ease;
}

/* The image inside the overlay must match the container width so it renders
   at the same scale as the base. overflow:hidden on the parent clips it. */
.product-feature-block__body .fb-image-compare__overlay img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;  /* JS sets this to containerWidth px so it never distorts */
    height: auto;
    display: block;
    pointer-events: none;
    border-radius: 0;
    margin: 0;
    max-width: none; /* override the global max-width:100% so it won't shrink */
}

/* Handle: vertical bar at the overlay's right edge */
.product-feature-block__body .fb-image-compare__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%; /* JS overrides */
    width: 4px;
    background: #fff;
    transform: translateX(-50%);
    transition: left 0.12s ease;
    z-index: 10;
    cursor: ew-resize;
    outline: none;
}

/* Wider invisible hit zone so the handle is easy to grab */
.product-feature-block__body .fb-image-compare__handle::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
}

/* Circular grip indicator centered on the handle */
.product-feature-block__body .fb-image-compare__handle::after {
    content: '\2194'; /* ↔ */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #111;
    font-size: 1rem;
    line-height: 36px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* Focus ring for keyboard users */
.product-feature-block__body .fb-image-compare__handle:focus-visible::after {
    box-shadow: 0 0 0 3px #58a6ff, 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Labels: semitransparent badge at bottom corners */
.product-feature-block__body .fb-image-compare__label {
    position: absolute;
    bottom: 1rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 4px;
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}

.product-feature-block__body .fb-image-compare__label--left  { left: 0.75rem; }
.product-feature-block__body .fb-image-compare__label--right { right: 0.75rem; }

/* JS toggles this when the label is covered by the handle */
.product-feature-block__body .fb-image-compare__label--hidden {
    opacity: 0;
    pointer-events: none;
}

/* Disable transitions during active drag (JS adds .is-dragging) */
.product-feature-block__body .fb-image-compare.is-dragging .fb-image-compare__overlay,
.product-feature-block__body .fb-image-compare.is-dragging .fb-image-compare__handle {
    transition: none;
}

/* ═══ fb-video — responsive YouTube embed with a 2px black border ═══
   Inserted by the "Insert video" toolbar button in feature_block_edit.php
   from a pasted YouTube URL. Markup: .fb-video > iframe. The wrapper holds a
   fixed 16:9 aspect ratio and the iframe fills it absolutely, so the video
   scales fluidly with the column width on every breakpoint. */
.product-feature-block__body .fb-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1rem 0;
    border: 2px solid #000;
    box-sizing: border-box;
    background: #000;
}
.product-feature-block__body .fb-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}