/**
 * single-product.css
 * Single product summary (right column) + stacked Description /
 * Specifications / Useful interaction sections in place of WC tabs.
 */

/* -----------------------------------------------
   Product (gallery + summary) area — force white background
   ----------------------------------------------- */
.single-product div.product,
.single-product .product .summary,
.single-product .product .entry-summary,
.single-product .woocommerce-product-gallery {
    background: var(--rv-surface);
}

/* Hide Kadence's above-product breadcrumb — breadcrumbs moved into the
   right summary column. */
.single-product .product-title.product-above {
    display: none;
}

/* -----------------------------------------------
   Gallery: vertical thumbnail strip on the left
   ----------------------------------------------- */
.single-product .woocommerce-product-gallery {
    position: relative;
    display: grid;
    grid-template-columns: 88px 1fr;
    grid-template-areas: "thumbs main";
    gap: 16px;
    align-items: start;
}

.single-product .woocommerce-product-gallery__wrapper {
    grid-area: main;
    margin: 0;
}

/* -----------------------------------------------
   Product row — the client's 12-column layout
     thumbs 1 | main image 5 | gap 1 | text 4 | right padding 1
   The row is a Kadence 2-column row block (equal halves by default); on desktop
   its two columns are re-placed on a 12-column grid. Columns 7 and 12 are left
   empty on purpose — they ARE the gap and the right padding, so both scale with
   the container instead of being fixed px.
   Selectors are anchored on the gallery rather than on the row's generated
   kb-row-layout-id class, which changes if the Woo template is rebuilt.

   Applies on tablet too: Kadence stacks this row only below 768px, so from
   769px up its two columns are side by side and follow the same spec.
   ----------------------------------------------- */
@media (min-width: 769px) {
    .single-product .kt-row-column-wrap:has(> .wp-block-kadence-column .woocommerce-product-gallery) {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: 0;
    }

    /* Gallery column: columns 1–6. */
    .single-product .kt-row-column-wrap:has(> .wp-block-kadence-column .woocommerce-product-gallery) > .wp-block-kadence-column:first-child {
        grid-column: 1 / span 6;
    }

    /* Text column: columns 8–11 (7 = gap, 12 = right padding). */
    .single-product .kt-row-column-wrap:has(> .wp-block-kadence-column .woocommerce-product-gallery) > .wp-block-kadence-column:nth-child(2) {
        grid-column: 8 / span 4;
    }

    /* Inside the gallery column: 1 of its 6 spans for the thumbnail strip, 5
       for the main image. The breathing room between them is padding INSIDE the
       thumbnail column, so the 1/5 boundary lands exactly on the grid line. */
    .single-product .woocommerce-product-gallery {
        grid-template-columns: 1fr 5fr;
        column-gap: 0;
    }

    .single-product .woocommerce-product-gallery > .flex-control-nav.flex-control-thumbs,
    .single-product .woocommerce-product-gallery > .rv-thumbs-nav {
        box-sizing: border-box;
        width: 100%;
        padding-right: 16px;
    }

    /* Both strips are pinned to 88px elsewhere — let them fill the column. */
    .single-product .rv-thumbs-nav__viewport,
    .single-product .flex-control-thumbs li {
        width: 100%;
    }
}

/* Tablet: the thumbnail column is roughly half as wide as on desktop, so the
   16px inset would eat too much of it. */
@media (min-width: 769px) and (max-width: 1024px) {
    .single-product .woocommerce-product-gallery > .flex-control-nav.flex-control-thumbs,
    .single-product .woocommerce-product-gallery > .rv-thumbs-nav {
        padding-right: 8px;
    }
}

/* Main gallery image follows the same framing tokens as the listing cards, so
   the Customizer "Listing & Product Style" image controls apply on the PDP too.
   Border width defaults to 0 (no visible border until a client sets one). The
   Roomvo "See it in your room" iframe slide is excluded — it must stay square
   and unframed.

   Every photo slide also gets the same 1:1 frame, so the slider no longer
   changes height as you page through it: Roomvo ships square swatches next to
   4:3 room scenes. The height comes from the slide width FlexSlider sets
   inline, and the photo is cropped to fill it — the same treatment the
   thumbnails already get. jQuery.zoom's magnified <img class="zoomImg">
   carries its own inline size, so it is unaffected. */
.single-product .woocommerce-product-gallery__image:not(.roomvo-gallery-iframe-slide) {
    border-radius: var(--rv-img-radius);
    border: var(--rv-img-border-width) solid var(--rv-img-border-color);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    height: auto;
}

.single-product .woocommerce-product-gallery__image:not(.roomvo-gallery-iframe-slide) > a {
    display: block;
    width: 100%;
    height: 100%;
}

.single-product .woocommerce-product-gallery__image:not(.roomvo-gallery-iframe-slide) > a > img,
.single-product .woocommerce-product-gallery__image:not(.roomvo-gallery-iframe-slide) > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Roomvo "See it in your room" iframe slide: keep it square. The iframe ships
   an inline min-height:412px (overridden with !important) that would otherwise
   make it taller than the slide width. aspect-ratio derives the height from the
   slide width FlexSlider sets inline. */
.single-product .woocommerce-product-gallery__image.roomvo-gallery-iframe-slide {
    position: relative;
    aspect-ratio: 1 / 1;
    height: auto;
    overflow: hidden;
}

.single-product .woocommerce-product-gallery__image.roomvo-gallery-iframe-slide iframe {
    width: 100%;
    height: 100%;
    min-height: 0 !important;
}

/* Loading state for the Roomvo iframe slide: the visualizer takes a moment to
   boot and renders blank meanwhile, so cover it with a spinner until the
   iframe's onload clears .is-loading (set in roomvo-plp's gallery markup). */
.single-product .roomvo-gallery-iframe-slide .roomvo-gallery-iframe-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rv-surface, #fff);
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease, visibility 0s linear 0s;
}

.single-product .roomvo-gallery-iframe-slide:not(.is-loading) .roomvo-gallery-iframe-loader {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
}

.single-product .roomvo-gallery-iframe-loader__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--rv-border, #e5e5e5);
    border-top-color: var(--rv-accent);
    border-radius: 50%;
    animation: rv-gallery-iframe-spin .8s linear infinite;
}

@keyframes rv-gallery-iframe-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .single-product .roomvo-gallery-iframe-loader__spinner {
        animation-duration: 2.4s;
    }
}
.pswp__caption, .pswp__top-bar {
    background-color: transparent !important;
}
.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
    grid-area: thumbs;
    position: static;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 88px;
}

.single-product .flex-control-thumbs li {
    list-style: none;
    margin: 0;
    width: 88px;
    height: 88px;
}

.single-product .flex-control-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    opacity: 0.55;
    border: 2px solid transparent;
    transition: opacity .15s ease, border-color .15s ease;
}

.single-product .flex-control-thumbs img:hover,
.single-product .flex-control-thumbs img.flex-active {
    opacity: 1;
    border-color: var(--rv-accent);
}

/* Roomvo Lite (iframe) slide thumbnail: hide the duplicated product image and
   show an icon instead. The <img> stays in the DOM for FlexSlider's click and
   active-state handling; we only hide it visually. */
.single-product .flex-control-thumbs li.rv-thumb--roomvo-lite {
    position: relative;
    box-sizing: border-box;
    background: #f3f3f3;
    border: 2px solid transparent;
    cursor: pointer;
}

.single-product .flex-control-thumbs li.rv-thumb--roomvo-lite.is-active {
    border-color: var(--rv-accent);
}

.single-product .flex-control-thumbs li.rv-thumb--roomvo-lite img {
    opacity: 0;
}

.rv-thumb-roomvo-lite-icon {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0 2px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    pointer-events: none;
    container-type: inline-size;
}

.rv-thumb-roomvo-lite-icon svg {
    width: 32px;
    height: 32px;
    flex: none;
}

.rv-thumb-roomvo-lite-text {
    margin: 0;
    line-height: 1.4;
    font-family: 'Inter', 'Montserrat', sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    font-size: 0.75rem;
}

/* Tiny thumbs (e.g. mobile 64px): drop the icon, keep the label. */
@container (max-width: 75px) {
    .rv-thumb-roomvo-lite-icon svg {
        display: none;
    }
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    padding-bottom: 20px;
}
/* Hide FlexSlider's own direction-nav on the main image. Navigation arrows
   belong to the thumbnail strip, not the main slide. */
.single-product .woocommerce-product-gallery .flex-direction-nav {
    display: none !important;
}

/* -----------------------------------------------
   Thumbnail strip arrows (up / down).
   Injected by single-product-thumbs-nav.js around .flex-control-thumbs.
   ----------------------------------------------- */
.rv-thumbs-nav {
    grid-area: thumbs;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 88px;
}

.rv-thumbs-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: var(--rv-surface);
    border-radius: 50%;
    cursor: pointer;
    color: var(--rv-text);
    transition: background-color .15s ease, opacity .15s ease;
}

.rv-thumbs-nav__btn:hover:not([disabled]) {
    background: #f5f5f5;
}

.rv-thumbs-nav__btn[disabled] {
    opacity: 0.35;
    cursor: default;
}

.rv-thumbs-nav__btn::before {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.rv-thumbs-nav__btn--up::before {
    transform: rotate(-45deg);
    margin-top: 3px;
}

.rv-thumbs-nav__btn--down::before {
    transform: rotate(135deg);
    margin-bottom: 3px;
}

.rv-thumbs-nav__viewport {
    width: 88px;
    max-height: 384px; /* 4 thumbs × (88 + 10 gap) - 8 */
    overflow: hidden;
    scroll-behavior: smooth;
}

/* When wrapped by the JS, the original .flex-control-thumbs lives inside
   .rv-thumbs-nav__viewport. Remove its grid placement and width clamp. */
.rv-thumbs-nav__viewport .flex-control-nav.flex-control-thumbs {
    grid-area: auto;
    width: auto;
}

/* When the strip is wrapped, the parent .rv-thumbs-nav takes the grid slot,
   so the original thumb list should no longer be a direct grid child. */
.single-product .woocommerce-product-gallery:has(.rv-thumbs-nav) > .flex-control-nav.flex-control-thumbs {
    display: none !important;
}

/* When the strip fits without scrolling, hide the arrows entirely. */
.rv-thumbs-nav.rv-thumbs-nav--no-overflow .rv-thumbs-nav__btn {
    display: none;
}
body.single-product .content-area {
    border-top: none;
    padding: 40px 0;
}
body.woocommerce div.product div.images .flex-control-thumbs li{
    width: 100% !important;
    height: auto;
    padding: 10px !important;
    border: 1px solid var(--rv-border);
    border-radius: 2px;
}
body.woocommerce div.product div.images .flex-control-thumbs li.is-active{
    border: 1px solid var(--rv-accent);
}
body.woocommerce div.product div.images .flex-control-thumbs li img{
    margin: 0 !important;
    border: none !important;
    border-radius: 2px;
}
.woocommerce div.product div.images .flex-control-thumbs{
    margin-top: 0
}
@media (max-width: 768px) {
    /* Thumbnails move below the main image and scroll horizontally instead
       of sitting in a vertical column on the left. */
    .single-product .woocommerce-product-gallery {
        grid-template-columns: 1fr;
        grid-template-areas: "main" "thumbs";
        gap: 12px;
    }

    /* The up/down arrow wrapper (single-product-thumbs-nav.js) only makes
       sense for a vertical strip — on mobile the native horizontal touch
       scroll is enough, so drop its column layout and hide its arrows;
       the plain .flex-control-thumbs list (styled below) becomes the
       horizontally scrolling strip whether or not the JS wrapped it. */
    .rv-thumbs-nav {
        display: block;
        width: 100%;
    }
    .rv-thumbs-nav__btn {
        display: none !important;
    }
    .rv-thumbs-nav__viewport {
        width: 100%;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Matches body.woocommerce div.product div.images .flex-control-thumbs
       li's specificity (line ~382) so this !important actually wins —
       that rule forces width:100% (of whatever fixed-width column the
       old vertical strip gave it), which would otherwise stretch every
       thumb to fill the new horizontal scroller's full width. */
    body.woocommerce div.product div.images .flex-control-thumbs li {
        flex: 0 0 auto;
        width: 72px !important;
        height: 72px !important;
    }

    /* The 1:1 square + iframe min-height:0 above (line ~138) works on
       desktop, where the gallery column is wide enough that the square is
       still tall. On mobile the column narrows to roughly viewport width,
       shrinking that same square well under the ~412px Roomvo's own
       visualizer UI wants — so its "Do even more in the full visualizer"
       banner gets clipped by our overflow:hidden. Let the slide grow taller
       than it is wide instead of staying locked to a square. */
    .single-product .woocommerce-product-gallery__image.roomvo-gallery-iframe-slide {
        aspect-ratio: auto;
        height: auto;
        min-height: 420px;
    }

    .single-product .woocommerce-product-gallery__image.roomvo-gallery-iframe-slide iframe {
        min-height: 420px !important;
    }
}

/* -----------------------------------------------
   Breadcrumbs at top of right summary column
   ----------------------------------------------- */
.rv-product-summary__breadcrumbs {
    display: block;
    margin-bottom: 15px;
    font-family: var(--rv-breadcrumb-font);
    font-size: var(--rv-breadcrumb-size);
    font-weight: var(--rv-breadcrumb-weight);
    line-height: 17px;
    color: var(--rv-text-muted);
}

.rv-product-summary__breadcrumbs a {
    color: var(--rv-text);
    text-decoration: none;
    font-size: var(--rv-breadcrumb-size);
    font-weight: var(--rv-breadcrumb-weight);
    line-height: 17px;
}

.rv-product-summary__breadcrumbs a:hover,
.rv-product-summary__breadcrumbs a:focus {
    color: var(--rv-accent);
    text-decoration: underline;
}

.rv-product-summary__breadcrumb-sep {
    margin: 0 10px;
    color: var(--rv-text);
}

/* -----------------------------------------------
   Right-column summary
   ----------------------------------------------- */
.rv-product-summary {
    font-family: var(--rv-pdp-font);
    color: var(--rv-text);
}

.rv-product-summary__brand {
    color: var(--rv-text-muted);
    margin-bottom: 2px;
    font-family: var(--rv-pdp-brand-font);
    font-size: var(--rv-pdp-brand-size);
    font-weight: var(--rv-pdp-brand-weight);
    line-height: 15px;
    text-align: left;
}

.rv-product-summary__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.rv-product-summary__title {
    margin: 0;
    font-family: var(--rv-prodname-font);
    font-size: var(--rv-pdp-title-size);
    font-weight: var(--rv-pdp-title-weight);
    line-height: 1.14; /* scales with the size token (28px → ~32px) */
    color: var(--rv-text);
    /* Take the free space in the row so the heart is pushed to the right edge
       whatever the block's alignment setting does to the text inside. */
    flex: 1 1 auto;
    min-width: 0;
}

.rv-product-summary__wishlist {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Exactly the title's first line box (size × the 1.14 line-height above),
       so the heart sits flush with the text instead of towering over it. */
    width: calc(var(--rv-pdp-title-size) * 1.14);
    height: calc(var(--rv-pdp-title-size) * 1.14);
    padding: 0;
    border: 0;
    /* Same round grey pill as the listing-card heart. */
    border-radius: 50%;
    background: var(--rv-wishlist-bg, rgba(0, 0, 0, .35));
    cursor: pointer;
    transition: background .2s ease;
}

.rv-product-summary__wishlist svg {
    display: block;
    /* Follows the pill above rather than a fixed px size. */
    width: 56%;
    height: 56%;
}

/* Idle heart: solid white (CSS beats the SVG presentation attributes). */
.rv-product-summary__wishlist svg path {
    fill: #fff;
    stroke: #fff;
    stroke-opacity: 1;
    transition: fill .2s ease, stroke .2s ease;
}

/* Hover, keyboard focus, or saved -> accent red. */
.rv-product-summary__wishlist:hover svg path,
.rv-product-summary__wishlist:focus-visible svg path,
.rv-product-summary__wishlist.active svg path {
    fill: var(--rv-accent);
    stroke: var(--rv-accent);
}

.rv-product-summary__attr {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}
.wrapper-rv-product-summary__cta{
    margin-top: 30px
}
/* Label and value read as one line ("Size: 7x48"). Inline rather than flex so
   the per-device text-align the block emits still positions them. */
.rv-product-summary__label,
.rv-product-summary__value {
    display: inline;
}

.rv-product-summary__label {
    color: var(--rv-text-muted);
    font-family: var(--rv-pdp-attr-label-font);
    font-size: var(--rv-pdp-attr-label-size);
    font-weight: var(--rv-pdp-attr-label-weight);
    line-height: 15px;
}

.rv-product-summary__value {
    color: var(--rv-text);
    font-family: var(--rv-pdp-attr-value-font);
    font-size: var(--rv-pdp-attr-value-size);
    font-weight: var(--rv-pdp-attr-value-weight);
    line-height: 21px;
}

.rv-product-summary__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 15px;
}

.rv-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--rv-swatch-radius);
    box-sizing: border-box;
    cursor: pointer;
    border: 1px solid var(--rv-border);
    padding: 4px;
}

/* The thumbnail follows the frame, minus the 4px padding + 1px border, so the
   inner and outer curves stay concentric. The plugin's plp-product.css rounds
   these images into circles — this selector is specific enough to win. */
.rv-product-summary__swatches .rv-swatch img {
    border-radius: max(0px, calc(var(--rv-swatch-radius) - 5px));
}

/* Active colour: a neutral frame of its own (Customizer: "Product swatch —
   active outline colour"), no longer the orange product-button accent. */
.rv-swatch.is-active {
    border: 1px solid var(--rv-swatch-active-border);
}

.rv-product-summary__swatches .rv-swatch--more {
    background: var(--rv-surface);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--rv-swatch-radius);
    color: var(--rv-btn-primary);
    font-size: 13px;
    font-weight: 600;
}

/* Heading above the CTA ("Interested in learning more?"). The button carries a
   30px top margin of its own — drop it when the heading already opened the gap. */
.plp-cta-button__heading {
    margin: 30px 0 10px;
    font-family: var(--rv-pdp-font);
    font-size: var(--rv-pdp-section-title-size);
    font-weight: 600;
    line-height: 1.2;
    color: var(--rv-text);
}

.plp-cta-button__heading + .rv-product-summary__cta {
    margin-top: 0;
}

.rv-product-summary__cta {
    display: block;
    width: 100%;
    padding: 18px 24px;
    border: 0;
    border-radius: var(--rv-btn-radius);
    background: var(--rv-product-cta-bg);
    color: var(--rv-product-cta-text);
    font-family: var(--rv-product-cta-font);
    font-size: var(--rv-product-cta-size);
    font-weight: var(--rv-product-cta-weight);
    line-height: 19px;
    cursor: pointer;
    transition: background-color .15s ease;
    margin-top: 30px
}
.woocommerce div.product div.summary{
    margin-top: 0
}
.rv-product-summary__cta:hover,
.rv-product-summary__cta:focus {
    color: var(--rv-product-cta-text);
    background: var(--rv-product-cta-hover-bg);
}

@media (max-width: 768px) {
    .rv-product-summary__title {
        font-size: 24px;
    }

    .rv-product-summary__cta {
        padding: 16px 20px;
        font-size: 15px;
    }
}


.rv-product-details {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--rv-surface-soft);
    padding: 40px 0;
    font-family: var(--rv-pdp-font);
    color: var(--rv-text);
    text-align: left;
}

.rv-product-details__inner {
    max-width: 640px;
    margin: 0 auto;
}

.rv-product-extras {
    font-family: var(--rv-pdp-font);
    color: var(--rv-text);
    padding: 40px 0;
}

.rv-product-extras__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.rv-product-section {
    padding: 20px 0;
}

.rv-product-section:last-child {
    margin-bottom: 0;
}

.rv-product-section__title {
    margin: 0 0 10px;
    font-family: var(--rv-pdp-font);
    font-size: var(--rv-pdp-section-title-size);
    font-weight: 600;
    line-height: 1.2;
    color: var(--rv-text);
}

.rv-product-section__content,
.rv-product-section__content p {
    font-size: 14px;
    color: var(--rv-text);
    font-weight: 500;
    line-height: 1.5;
}

.rv-product-section__content p:last-child {
    margin-bottom: 0;
}

.rv-specs {
    display: grid;
    grid-template-columns: 270px 1fr;
    column-gap: 10px;
    row-gap: 10px;
    margin: 0;
    padding: 0;
    font-size: var(--rv-pdp-specs-size);
    line-height: 1.5;
    font-weight: 500;
}

.rv-specs__label {
    margin: 0;
    color: rgba(0, 0, 0, 0.65);
    font-weight: 500;
}

.rv-specs__value {
    margin: 0;
    color: var(--rv-text);
    font-weight: 500;
    text-transform: capitalize;
}
/* Breadcrumbs + related products wrappers (added in functions.php): Kadence's
   .site-container only centres and adds edge padding, so cap the width too to
   line them up with the rest of the page. The double-class selector beats
   Kadence's `.site-container { max-width: none }`. */
.rv-pdp-container.site-container {
    max-width: var(--global-content-width, 1290px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    width: 100%;
}

section.related.products {
    padding: 40px 20px
}
.woocommerce section.products>h2 {
    margin-bottom: 40px;
    font-family: var(--rv-related-title-font);
    font-size: var(--rv-related-title-size);
    font-weight: var(--rv-related-title-weight);
}
.kadence-breadcrumb-container {
    text-align: left;
}
.rv-product-link {
    display: inline-block;
    color: var(--rv-accent);
    text-decoration: underline;
    font-size: 14px;
    font-weight: 500;
}
.kadence-breadcrumb-container {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--rv-breadcrumb-font);
    font-weight: var(--rv-breadcrumb-weight);
    font-size: var(--rv-breadcrumb-size);
    text-decoration: none;
    line-height: 17px;
    margin-bottom: 15px;
    color: var(--rv-text)
}
.kadence-breadcrumbs a:hover{
    text-decoration: underline;
}
span.kadence-bread-current {
    color: var(--rv-text-muted);
}

.rv-product-link:hover,
.rv-product-link:focus {
    color: var(--rv-accent);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .rv-product-details {
        padding: 32px var(--global-content-edge-padding);
    }

    .rv-specs {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 10px;
    }

    .rv-product-section {
        margin-bottom: 32px;
    }

    .rv-product-section__title {
        font-size: 18px;
    }
}

/* -------------------------------------------------------------------------
 * BeRocket "Advanced Product Labels" — product gallery badge
 *
 * On the PDP the plugin renders labels via the woocommerce_product_thumbnails
 * hook inside .woocommerce-product-gallery, wrapped in a .berocket_better_labels
 * overlay. The plugin's positioning CSS is injected inline on its stylesheet
 * handle and does not survive LiteSpeed CSS optimisation, so the label collapses
 * into a full-width bar across the top of the image. Re-assert the layout here
 * (mirrors the listing fix in plp-product-card.css).
 * ------------------------------------------------------------------------- */
.single-product .woocommerce-product-gallery .berocket_better_labels.berocket_better_labels_image {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
    z-index: 5;
}
.single-product .woocommerce-product-gallery .berocket_better_labels_position {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    height: 100%;
    box-sizing: border-box;
}
.single-product .woocommerce-product-gallery .berocket_better_labels_position_right  { align-items: flex-end; }
.single-product .woocommerce-product-gallery .berocket_better_labels_position_left   { align-items: flex-start; }
.single-product .woocommerce-product-gallery .berocket_better_labels_position_center { align-items: center; }
.single-product .woocommerce-product-gallery .berocket_better_labels_line   { line-height: 1; }
.single-product .woocommerce-product-gallery .berocket_better_labels_inline { display: inline-flex; }
.single-product .woocommerce-product-gallery .br_alabel {
    display: inline-block;
    position: relative;
    pointer-events: auto;
}
.single-product .woocommerce-product-gallery .br_alabel > span {
    display: inline-block;
    max-width: 24ch;            /* cap long text; longer is truncated with … */
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 10px !important;
    line-height: 1.3 !important;
    white-space: nowrap;
}

/* See plp-product-card.css: Kadence repaints any focused/hovered <button>
   white, which hides the white idle heart after a click. */
.rv-product-summary__wishlist:hover,
.rv-product-summary__wishlist:focus,
.rv-product-summary__wishlist:focus-visible,
.rv-product-summary__wishlist:active {
    background: var(--rv-wishlist-bg, rgba(0, 0, 0, .35));
}

/* -------------------------------------------------------------------------
 * Related products slider (related-products-slider.js)
 *
 * The script wraps the <ul> WooCommerce printed in a Swiper frame and tags it
 * as the swiper wrapper. Our own listing rule sets `ul.products.grid-cols` to
 * display:grid, which outweighs Swiper's `.swiper-wrapper { display: flex }`,
 * so the flex track has to be re-asserted here with a heavier selector.
 * ------------------------------------------------------------------------- */
.rv-related-slider {
    position: relative;
}

.rv-related-slider ul.products.swiper-wrapper {
    display: flex;
    grid-template-columns: none;
    /* Kadence's grid gap would stack on top of Swiper's spaceBetween margin
       and push the last card out of the frame. */
    gap: 0;
    margin: 0;
    padding: 0;
    align-items: stretch;
}

.rv-related-slider ul.products.swiper-wrapper > li.product {
    /* Kadence leaves the cards content-box, so their 0.8px border pushed the
       track past the frame and clipped the last card. */
    box-sizing: border-box;
    height: auto;
    margin: 0;
}

/* The margin sits on the buttons, not the row: when Swiper locks them (every
   card already fits) the row collapses to nothing instead of leaving a gap. */
.rv-related-slider__controls {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.rv-related-slider__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: 24px;
    padding: 0;
    border: 1px solid var(--rv-border, #e5e5e5);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, opacity .15s ease;
}

.rv-related-slider__nav:hover,
.rv-related-slider__nav:focus-visible {
    border-color: var(--rv-accent);
}

/* Swiper locks the buttons when every card already fits (watchOverflow) and
   disables them at the ends of the track. */
.rv-related-slider__nav.swiper-button-lock {
    display: none;
}

.rv-related-slider__nav.swiper-button-disabled {
    opacity: .35;
    pointer-events: none;
}

.rv-related-slider__arrow {
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--rv-text, #222);
    border-bottom: 2px solid var(--rv-text, #222);
}

.rv-related-slider__nav--prev .rv-related-slider__arrow {
    transform: translateX(2px) rotate(135deg);
}

.rv-related-slider__nav--next .rv-related-slider__arrow {
    transform: translateX(-2px) rotate(-45deg);
}

/* -----------------------------------------------
   "Added to cart" notice (order-product-samples plugin) — the plugin
   prints wc_print_notices() inline next to the "Order a Sample" button
   (.ops-notices wraps it), outside wherever theme CSS targets the site's
   normal notice region, so it was inheriting browser/WooCommerce defaults
   instead of the theme's font and radius tokens.
   ----------------------------------------------- */
.ops-notices .woocommerce-message {
    display: block;
    margin: 12px 0 0;
    padding: 16px 20px;
    border: 1px solid var(--rv-accent);
    border-radius: var(--rv-btn-radius, 6px);
    background: #fff;
    font-family: var(--rv-font);
    color: var(--rv-accent);
    line-height: 1.5;
}

.ops-notices .woocommerce-message a.button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--rv-btn-radius, 6px);
    background: var(--rv-accent);
    color: #fff;
    font-family: var(--rv-font);
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease;
}

.ops-notices .woocommerce-message a.button:hover,
.ops-notices .woocommerce-message a.button:focus {
    background: var(--rv-accent-hover, var(--rv-accent));
}