/* ─── Quick View Button ────────────────────────────────────── */
.s2b-qv-trigger-container {
    position: relative !important;
    overflow: visible;
}

.s2b-qv-trigger-container > .s2b-qv-trigger {
    position: absolute;
    z-index: 9;
    width: var(--s2b-qv-trigger-width, 32px);
    height: var(--s2b-qv-trigger-height, 32px);
    border: none;
    border-radius: 50%;
    background: var(--s2b-qv-trigger-bg, rgba(0, 0, 0, 0.6));
    color: var(--s2b-qv-trigger-color, #fff);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.s2b-qv-trigger:focus-visible {
    opacity: 1;
}

.s2b-qv-trigger:hover {
    filter: brightness(0.85);
}

/* ─── Wrapper ───────────────────────────────────────────────── */
#s2b-qv-wrapper {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s 0.35s;
}

#s2b-qv-wrapper.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s 0s;
}

/* ─── Overlay ───────────────────────────────────────────────── */
.s2b-qv-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#s2b-qv-wrapper.is-open .s2b-qv-overlay {
    opacity: 1;
}

.s2b-qv-trigger--top-right {
    top: 10px !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
}

.s2b-qv-trigger--top-left {
    top: 10px !important;
    right: auto !important;
    bottom: auto !important;
    left: 10px !important;
}

.s2b-qv-trigger--bottom-right {
    top: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    left: auto !important;
}

.s2b-qv-trigger--bottom-left {
    top: auto !important;
    right: auto !important;
    bottom: 10px !important;
    left: 10px !important;
}

.s2b-qv-trigger-icon,
.s2b-qv-trigger-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s2b-qv-trigger-icon-size, 18px);
    height: var(--s2b-qv-trigger-icon-size, 18px);
    font-size: var(--s2b-qv-trigger-icon-size, 18px);
    line-height: 1;
}

.s2b-qv-trigger-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

@media (max-width: 768px) {
    .s2b-qv-trigger-container > .s2b-qv-trigger {
        width: var(--s2b-qv-trigger-width-mobile, var(--s2b-qv-trigger-width, 32px));
        height: var(--s2b-qv-trigger-height-mobile, var(--s2b-qv-trigger-height, 32px));
    }

    .s2b-qv-trigger-icon,
    .s2b-qv-trigger-fallback {
        width: var(--s2b-qv-trigger-icon-size-mobile, var(--s2b-qv-trigger-icon-size, 18px));
        height: var(--s2b-qv-trigger-icon-size-mobile, var(--s2b-qv-trigger-icon-size, 18px));
        font-size: var(--s2b-qv-trigger-icon-size-mobile, var(--s2b-qv-trigger-icon-size, 18px));
    }
}

/* ─── Product Card Quick View ───────────────────────────────── */
/* OceanWP product loops use li.product as the card wrapper. The panel is
   moved into the clicked card by Quick View's script in Product Card mode. */
.s2b-qv-card-open .s2b-qv-trigger {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.s2b-qv-trigger-container > .s2b-qv-trigger.s2b-qv-trigger-suppressed {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Card layout, "Hide Content Below Image": while the panel is open the direct
   children of the content wrapper other than the image container are removed
   from flow, so the tile collapses to just the image + panel with no leftover
   gap. Kept as display:none (not visibility) so the preview matches this. */
.s2b-qv-card-content-hidden > :not(.s2b-qv-trigger-container) {
    display: none !important;
}

/* The panel is hosted inside the product image container, so bottom:0 anchors
   it to the bottom of the image (not the whole card). It is only as tall as its
   content (capped at the image height, body scrolls past that), so there is no
   empty space inside. The compound selector keeps these winning over the
   generic `.s2b-qv-panel` base rules regardless of source order. */
.s2b-qv-panel.s2b-qv-card-panel {
    position: absolute;
    right: 0;
    bottom: var(--s2b-qv-card-panel-bottom, 0px);
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    max-height: 100%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(29, 35, 39, 0.16) !important;
    overflow: hidden;
    transform: translateY(105%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    box-shadow: none;
}

.s2b-qv-card-open .s2b-qv-panel.s2b-qv-card-panel {
    transform: translateY(0);
    opacity: 1;
}

.s2b-qv-card-panel .s2b-qv-panel-inner {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    max-height: 100%;
    background: transparent;
    overflow: hidden;
    border: 0;
}

/* Close button floats in the top padding so it consumes no vertical flow and
   the panel stays as short as its purchase content. */
.s2b-qv-card-panel .s2b-qv-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    min-height: 0;
    padding: 4px 6px;
    justify-content: flex-end;
    border-bottom: 0;
    pointer-events: none;
}

.s2b-qv-card-panel .s2b-qv-header .s2b-qv-close {
    pointer-events: auto;
}

.s2b-qv-card-panel .s2b-qv-close {
    color: #000;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.s2b-qv-card-panel .s2b-qv-title {
    display: none;
}

.s2b-qv-card-panel .s2b-qv-body {
    flex: 1 1 auto;
    padding: 20px 10px 10px;
    background: transparent;
    min-height: 0;
    overflow-y: auto;
    box-sizing: border-box;
    border: 0;
}

.s2b-qv-card-panel .s2b-qv-body.is-loading {
    overflow: hidden;
}

/* The purchase wrapper's bottom margin is meant to separate it from content
   below it in the tall overlay. In the card panel it is the last thing in the
   flow, so that margin only leaves dead space under the button — the panel
   should hug its content, with the body padding providing the even inset. */
.s2b-qv-card-panel .s2b-qv-cart-wrap {
    margin-bottom: 0;
}

.s2b-qv-card-panel .s2b-qv-info,
.s2b-qv-card-panel .s2b-qv-colors,
.s2b-qv-card-panel .category_switch_images {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none;
}

/* Sibling S2B plugins (cart/checkout recommendations, related products) reuse
   the same `.s2b-qv-*` class names for their own modals with different layout
   (e.g. `.s2b-qv-body { display:grid; grid-template-columns:1fr 1fr }`, a
   `flex` `.s2b-qv-info`, a `position:fixed` `.s2b-qv-overlay`). Those
   single-class rules leak onto this panel and, most visibly, split the purchase
   content into two columns. Re-assert our own structural layout with a scoped
   selector so it beats the foreign single-class rules regardless of load order.
   The card panel is moved out of #s2b-qv-wrapper into the product card, so it is
   guarded by its own `.s2b-qv-card-panel` class; the overlay lives inside the
   wrapper and is guarded by the id. */
.s2b-qv-card-panel .s2b-qv-body,
#s2b-qv-wrapper .s2b-qv-body {
    display: block;
}
.s2b-qv-panel .s2b-qv-info {
    display: block;
}
#s2b-qv-wrapper .s2b-qv-overlay {
    position: absolute;
    inset: 0;
    display: block;
    z-index: auto;
    padding: 0;
}

/* ─── Panel ─────────────────────────────────────────────────── */
.s2b-qv-panel {
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.35s ease;
}

.s2b-qv-panel-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* ─── Position: Center ──────────────────────────────────────── */
.s2b-qv-pos--center {
    justify-content: center;
    align-items: center;
}

.s2b-qv-pos--center .s2b-qv-panel {
    width: var(--s2b-qv-panel-width, 520px);
    max-width: 90vw;
    aspect-ratio: 2 / 1;
    height: auto;
    max-height: 85vh;
    border-radius: 8px;
    transform: scale(0.95) translateY(10px);
}

#s2b-qv-wrapper.is-open.s2b-qv-pos--center .s2b-qv-panel {
    transform: scale(1) translateY(0);
}

/* ─── Position: Right ───────────────────────────────────────── */
.s2b-qv-pos--right {
    justify-content: flex-end;
}

.s2b-qv-pos--right .s2b-qv-panel {
    width: var(--s2b-qv-panel-width, 420px);
    height: 100vh;
    transform: translateX(100%);
}

#s2b-qv-wrapper.is-open.s2b-qv-pos--right .s2b-qv-panel {
    transform: translateX(0);
}

/* ─── Position: Left ────────────────────────────────────────── */
.s2b-qv-pos--left {
    justify-content: flex-start;
}

.s2b-qv-pos--left .s2b-qv-panel {
    width: var(--s2b-qv-panel-width, 420px);
    height: 100vh;
    transform: translateX(-100%);
}

#s2b-qv-wrapper.is-open.s2b-qv-pos--left .s2b-qv-panel {
    transform: translateX(0);
}

/* RTL adjustments */
[dir="rtl"] .s2b-qv-pos--right .s2b-qv-panel {
    transform: translateX(-100%);
}
[dir="rtl"] #s2b-qv-wrapper.is-open.s2b-qv-pos--right .s2b-qv-panel {
    transform: translateX(0);
}
[dir="rtl"] .s2b-qv-pos--left .s2b-qv-panel {
    transform: translateX(100%);
}
[dir="rtl"] #s2b-qv-wrapper.is-open.s2b-qv-pos--left .s2b-qv-panel {
    transform: translateX(0);
}

/* ─── Header ────────────────────────────────────────────────── */
.s2b-qv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.s2b-qv-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.s2b-qv-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    padding: 0 4px;
    transition: color 0.15s;
}

.s2b-qv-close:hover {
    color: #000;
}

.s2b-qv-close--floating {
    position: absolute;
    top: 10px;
    right: auto;
    left: 10px;
    z-index: 4;
}

/* ─── Body ──────────────────────────────────────────────────── */
.s2b-qv-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    /* The overlay shell deliberately has no horizontal inset. Individual
       content blocks own their spacing so the gallery can reach the panel edge. */
    padding: 0;
}

/* ─── Spinner ───────────────────────────────────────────────── */
.s2b-qv-spinner {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 5;
    align-items: center;
    justify-content: center;
}

.s2b-qv-body.is-loading .s2b-qv-spinner {
    display: flex;
}

.s2b-qv-spinner::after {
    content: "";
    width: 32px;
    height: 32px;
    border: 3px solid #ddd;
    border-top-color: #333;
    border-radius: 50%;
    animation: s2b-qv-spin 0.7s linear infinite;
}

@keyframes s2b-qv-spin {
    to { transform: rotate(360deg); }
}

/* Loader shown over the product image while the card panel is fetched. */
.s2b-qv-card-loader {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.45);
    pointer-events: none;
}

.s2b-qv-card-loader::after {
    content: "";
    width: 32px;
    height: 32px;
    border: 3px solid #ddd;
    border-top-color: #333;
    border-radius: 50%;
    animation: s2b-qv-spin 0.7s linear infinite;
}

/* ─── Media ─────────────────────────────────────────────────── */
.s2b-qv-media {
    margin: 3px 3px 20px;
}

.s2b-qv-media--empty {
    min-height: 200px;
    background: #f5f5f5;
    border-radius: 4px;
}

/* Static image */
.s2b-qv-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 3px;
    background: #f5f5f5;
}

.s2b-qv-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.s2b-qv-img-main {
    position: relative;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.s2b-qv-img-hover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.s2b-qv-image--hover:hover .s2b-qv-img-main {
    opacity: 0;
}
.s2b-qv-image--hover:hover .s2b-qv-img-hover {
    opacity: 1;
}

/* Swiper overrides */
.s2b-qv-swiper {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f5f5;
}

.s2b-qv-swiper .swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.s2b-qv-swiper .swiper-button-prev,
.s2b-qv-swiper .swiper-button-next {
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: background 0.2s;
}

.s2b-qv-swiper .swiper-button-prev:hover,
.s2b-qv-swiper .swiper-button-next:hover {
    background: rgba(0, 0, 0, 0.6);
}

.s2b-qv-swiper .swiper-button-prev::after,
.s2b-qv-swiper .swiper-button-next::after {
    font-size: 14px;
    font-weight: bold;
}

.s2b-qv-swiper .swiper-pagination-bullet-active {
    background: #333;
}

/* ─── Product Info ──────────────────────────────────────────── */
.s2b-qv-product-title {
    font-size: var(--s2b-qv-title-size, 18px);
    font-weight: var(--s2b-qv-title-weight, 600);
    margin: 0 0 8px;
    line-height: 1.3;
}

.s2b-qv-product-title a {
    color: inherit;
    text-decoration: none;
}

.s2b-qv-product-title a:hover {
    text-decoration: underline;
}

/* Panel-scoped so the sibling S2B plugins' own `.s2b-qv-price` rule cannot
   override this plugin's configurable price styling by load order. */
.s2b-qv-panel .s2b-qv-price {
    margin-bottom: 16px;
    font-size: var(--s2b-qv-price-size, 18px);
    font-weight: var(--s2b-qv-price-weight, 600);
    color: var(--s2b-qv-price-color, #111);
}

.s2b-qv-panel .s2b-qv-price del {
    color: var(--s2b-qv-sale-price-color, #999);
    font-weight: var(--s2b-qv-sale-price-weight, 400);
    font-size: var(--s2b-qv-sale-price-size, 14px);
    text-decoration: var(--s2b-qv-sale-price-decoration, line-through);
    margin-right: 6px;
}

.s2b-qv-panel .s2b-qv-price ins {
    text-decoration: none;
    color: var(--s2b-qv-sale-final-color, #111);
    font-size: var(--s2b-qv-sale-final-size, 18px);
    font-weight: var(--s2b-qv-sale-final-weight, 600);
}

/* ─── Linked Colors ─────────────────────────────────────────── */
.s2b-qv-colors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 16px;
}

.s2b-qv-colors .category_switch_image {
    width: 30px;
    height: 30px;
    background-size: cover;
    background-position: center;
    border: 1px solid #ccc;
    border-radius: 0;
    cursor: pointer;
    transition: border-color 0.15s, outline 0.15s;
}

.s2b-qv-colors .category_switch_image:hover {
    border-color: #333;
}

.s2b-qv-colors .category_switch_image.selected_switch_image {
    border-color: #fff;
    outline: 2px solid #000;
    outline-offset: -1px;
}

.s2b-qv-colors .category_switch_image_plus {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    border: 1px dashed #ccc;
}

.s2b-qv-colors .category_switch_image_plus:hover {
    border-color: #333;
    color: #333;
}

/* Circle variant */
.s2b-qv-colors--circle .category_switch_image,
.s2b-qv-colors--circle .category_switch_image_plus {
    border-radius: 50%;
}

/* ─── Cart Form ─────────────────────────────────────────────── */
.s2b-qv-cart-wrap {
    margin-bottom: 16px;
}

/* Base configurable purchase-block layout. Defaults are all full-width and
   preserve the existing vertical flow; half-width blocks stack on mobile. */
.s2b-qv-block-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.s2b-qv-layout-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.s2b-qv-layout-block.s2b-qv-desktop-disabled { display:none; }
.s2b-qv-layout-block--has-padding-top,.s2b-qv-media--has-padding-top { padding-top:var(--s2b-qv-block-padding-top); }
.s2b-qv-layout-block--has-margin-top,.s2b-qv-media--has-margin-top { margin-top:var(--s2b-qv-block-margin-top); }

.s2b-qv-layout-block--width-full { flex-basis: 100%; width: 100%; }
.s2b-qv-layout-block--width-half { flex-basis: 50%; width: 50%; }
.s2b-qv-layout-block--align-start { align-items: flex-start; }
.s2b-qv-layout-block--align-center { align-items: center; }
.s2b-qv-layout-block--align-end { align-items: flex-end; }
.s2b-qv-panel:not(.s2b-qv-card-panel) .s2b-qv-info {
    padding: 0 16px 20px;
}
.s2b-qv-panel:not(.s2b-qv-card-panel) .s2b-qv-content > .s2b-qv-error {
    display: block;
    padding: 16px;
}

/* Centered desktop overlays split enabled media and purchase content into two
   equal columns. Direction places the media on the physical right for RTL
   storefronts while preserving media-first DOM order for the mobile collapse. */
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split {
    display: flex;
    min-width: 0;
}
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center:dir(rtl) .s2b-qv-centered-split {
    direction: rtl;
}
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__media,
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__content {
    min-width: 0;
}
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__media {
    flex: 0 0 auto;
    width: var(--s2b-qv-centered-media-width, auto);
    max-width: 100%;
}
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__content {
    flex: 1 1 0;
    width: auto;
}
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__content .s2b-qv-info {
    box-sizing: border-box;
    padding: 30px;
}

/* The centered 2:1 overlay has a fixed media half. Keep that half wholly
   contained and give scrolling responsibility only to the information half. */
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-panel-inner,
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-body,
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-content,
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split {
    min-height: 0;
}
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-body {
    overflow: hidden;
}
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-content,
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split {
    height: 100%;
    overflow: hidden;
}
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__media,
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__content {
    min-height: 0;
}
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__media {
    overflow: hidden;
}
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__content {
    overflow-y: auto;
    overflow-x: hidden;
}
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__media .s2b-qv-media,
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__media .s2b-qv-swiper,
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__media .s2b-qv-image {
    box-sizing: border-box;
    width: calc(100% - 10px);
    height: calc(100% - 20px);
    min-height: 0;
    margin: 10px 10px 10px 0;
    overflow: hidden;
    background: transparent;
}
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__media .s2b-qv-media .s2b-qv-swiper,
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__media .s2b-qv-media .s2b-qv-image {
    width: 100%;
    height: 100%;
    margin: 0;
}
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__media .swiper-wrapper,
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__media .swiper-slide {
    height: 100%;
}
#s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Side panels keep a full-height, non-scrolling body as the purchase bar's
   containing block. Only the content region scrolls above the fixed bar. */
#s2b-qv-wrapper.s2b-qv-pos--right:not(.s2b-qv-mode--product_card) .s2b-qv-panel-inner,
#s2b-qv-wrapper.s2b-qv-pos--left:not(.s2b-qv-mode--product_card) .s2b-qv-panel-inner {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#s2b-qv-wrapper.s2b-qv-pos--right:not(.s2b-qv-mode--product_card) .s2b-qv-header,
#s2b-qv-wrapper.s2b-qv-pos--left:not(.s2b-qv-mode--product_card) .s2b-qv-header { flex: none; }
#s2b-qv-wrapper.s2b-qv-pos--right:not(.s2b-qv-mode--product_card) .s2b-qv-body,
#s2b-qv-wrapper.s2b-qv-pos--left:not(.s2b-qv-mode--product_card) .s2b-qv-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
}
#s2b-qv-wrapper.s2b-qv-pos--right:not(.s2b-qv-mode--product_card) .s2b-qv-body > .s2b-qv-content,
#s2b-qv-wrapper.s2b-qv-pos--left:not(.s2b-qv-mode--product_card) .s2b-qv-body > .s2b-qv-content {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-bottom: calc(var(--s2b-qv-add-to-cart-height, 52px) + (var(--s2b-qv-add-to-cart-inner-gap, 0px) * 2) + var(--s2b-qv-add-to-cart-frame-width, 0px) + 44px);
}
#s2b-qv-wrapper.s2b-qv-pos--right:not(.s2b-qv-mode--product_card) .s2b-qv-body > .s2b-qv-ported-add-to-cart,
#s2b-qv-wrapper.s2b-qv-pos--left:not(.s2b-qv-mode--product_card) .s2b-qv-body > .s2b-qv-ported-add-to-cart {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    box-shadow: none;
}
#s2b-qv-wrapper.s2b-qv-pos--right:not(.s2b-qv-mode--product_card) .s2b-qv-ported-add-to-cart .s2b-qv-add-to-cart-frame,
#s2b-qv-wrapper.s2b-qv-pos--left:not(.s2b-qv-mode--product_card) .s2b-qv-ported-add-to-cart .s2b-qv-add-to-cart-frame,
#s2b-qv-wrapper.s2b-qv-pos--right:not(.s2b-qv-mode--product_card) .s2b-qv-ported-add-to-cart .s2b-qv-add-to-cart-inner-gap,
#s2b-qv-wrapper.s2b-qv-pos--left:not(.s2b-qv-mode--product_card) .s2b-qv-ported-add-to-cart .s2b-qv-add-to-cart-inner-gap,
#s2b-qv-wrapper.s2b-qv-pos--right:not(.s2b-qv-mode--product_card) .s2b-qv-ported-add-to-cart .single_add_to_cart_button.button,
#s2b-qv-wrapper.s2b-qv-pos--left:not(.s2b-qv-mode--product_card) .s2b-qv-ported-add-to-cart .single_add_to_cart_button.button {
    box-sizing: border-box;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
}
#s2b-qv-wrapper.s2b-qv-pos--right:not(.s2b-qv-mode--product_card) .s2b-qv-ported-add-to-cart .single_add_to_cart_button.button,
#s2b-qv-wrapper.s2b-qv-pos--left:not(.s2b-qv-mode--product_card) .s2b-qv-ported-add-to-cart .single_add_to_cart_button.button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.s2b-qv-layout-block > .s2b-qv-colors,
.s2b-qv-layout-block > .s2b-qv-attribute,
.s2b-qv-layout-block > .s2b-qv-variation-status,
.s2b-qv-layout-block > .single_add_to_cart_button { max-width: 100%; }

#s2b-qv-wrapper .s2b-qv-close,
#s2b-qv-wrapper .s2b-qv-close:hover,
#s2b-qv-wrapper .s2b-qv-close:active {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #000 !important;
    text-shadow: none !important;
}

#s2b-qv-wrapper .s2b-qv-close:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

@media (max-width: 768px) {
    /* Mobile Block Layout overrides are optional.  Unset properties keep the
       desktop layout; defined properties take effect both on the storefront
       and in the mobile settings preview. */
    .s2b-qv-layout-block.s2b-qv-mobile-enabled-no { display:none; }
    .s2b-qv-layout-block.s2b-qv-desktop-disabled.s2b-qv-mobile-enabled-yes { display:flex; }
    .s2b-qv-layout-block.s2b-qv-mobile-width-full { flex-basis:100%; width:100%; }
    .s2b-qv-layout-block.s2b-qv-mobile-width-half { flex-basis:50%; width:50%; }
    .s2b-qv-layout-block.s2b-qv-mobile-align-start { align-items:flex-start; }
    .s2b-qv-layout-block.s2b-qv-mobile-align-center { align-items:center; }
    .s2b-qv-layout-block.s2b-qv-mobile-align-end { align-items:flex-end; }
    .s2b-qv-layout-block { order:var(--s2b-qv-desktop-order); }
    .s2b-qv-layout-block.s2b-qv-mobile-order { order:var(--s2b-qv-mobile-order); }
    .s2b-qv-layout-block.s2b-qv-mobile-padding-top { padding-top:var(--s2b-qv-mobile-padding-top); }
    .s2b-qv-layout-block.s2b-qv-mobile-margin-top { margin-top:var(--s2b-qv-mobile-margin-top); }
    .s2b-qv-layout-block--width-half { flex-basis: 100%; width: 100%; }
    #s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split {
        display: block;
    }
    #s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__media,
    #s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__content {
        flex: none;
        width: 100%;
    }
    #s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__media .s2b-qv-media,
    #s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__media .s2b-qv-swiper,
    #s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__media .s2b-qv-image {
        width: calc(100% - 6px);
        height: auto;
        margin: 3px;
    }
    #s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-body,
    #s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-content,
    #s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split,
    #s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__media,
    #s2b-qv-wrapper.s2b-qv-mode--overlay.s2b-qv-pos--center .s2b-qv-centered-split__content {
        height: auto;
        overflow: visible;
    }
}

.s2b-qv-cart-wrap form.cart {
    border: none !important;
    padding: 0 !important;
    margin: 0;
}

.s2b-qv-cart-wrap .variations {
    margin-bottom: 12px;
}

.s2b-qv-cart-wrap .variations select {
    display: none !important;
}

.s2b-qv-panel.s2b-qv-content-align--left {
    --s2b-qv-content-text-align: left;
    --s2b-qv-content-justify: left;
}

.s2b-qv-panel.s2b-qv-content-align--center {
    --s2b-qv-content-text-align: center;
    --s2b-qv-content-justify: center;
}

.s2b-qv-panel.s2b-qv-content-align--right {
    --s2b-qv-content-text-align: right;
    --s2b-qv-content-justify: right;
}

/* One physical alignment source for all Quick View purchase content. This
   avoids RTL defaults causing labels, flex rows, and button contents to drift
   into different directions. */
.s2b-qv-panel .s2b-qv-info,
.s2b-qv-panel .s2b-qv-cart-wrap,
.s2b-qv-panel .s2b-qv-error,
.s2b-qv-panel .s2b-qv-color-label,
.s2b-qv-panel .s2b-qv-attribute,
.s2b-qv-panel .s2b-qv-variation-status {
    text-align: var(--s2b-qv-content-text-align, left);
}

.s2b-qv-panel .s2b-qv-cart-wrap .s2b-qv-attribute label,
.s2b-qv-panel .s2b-qv-cart-wrap .s2b-qv-attribute legend,
.s2b-qv-panel .s2b-qv-cart-wrap .s2b-qv-attribute select {
    text-align: var(--s2b-qv-content-text-align, left);
}

.s2b-qv-panel .s2b-qv-colors,
.s2b-qv-panel .s2b-qv-color-label,
.s2b-qv-panel .variation-radios {
    justify-content: var(--s2b-qv-content-justify, left) !important;
}

.s2b-qv-panel .s2b-qv-cart-wrap .single_add_to_cart_button.button {
    justify-content: var(--s2b-qv-content-justify, left) !important;
}

.s2b-qv-color-label {
    display: flex;
    flex: 0 0 100%;
    align-items: baseline;
    gap: 4px;
    margin: 0 0 8px;
    line-height: 1.3;
}

.s2b-qv-color-label-title {
    font-size: var(--s2b-qv-color-label-title-size, 14px);
    font-weight: var(--s2b-qv-color-label-title-weight, 600);
}

.s2b-qv-color-label-value {
    font-size: var(--s2b-qv-color-label-value-size, 14px);
    font-weight: var(--s2b-qv-color-label-value-weight, 400);
}

.s2b-qv-cart-wrap .s2b-qv-attribute {
    margin: 0 0 12px;
}

.s2b-qv-cart-wrap .s2b-qv-attribute label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
}

.s2b-qv-cart-wrap .s2b-qv-attribute select {
    display: block;
    width: 100%;
    min-height: 40px;
}

.s2b-qv-cart-wrap .s2b-qv-variation-status,
.s2b-qv-cart-wrap .s2b-qv-cart-error {
    margin: 0 0 10px;
    font-size: 13px;
}

.s2b-qv-cart-wrap .s2b-qv-cart-error {
    color: #b32d2e;
}

.s2b-qv-cart-wrap .variations .value .theme-select {
    display: none !important;
}

.s2b-qv-cart-wrap .variations th,
.s2b-qv-cart-wrap .variations td {
    border: none !important;
    padding: 4px 0;
}

.s2b-qv-cart-wrap .variations th.label {
    text-align: right;
}

.s2b-qv-cart-wrap .variation-radios {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2b-qv-attr-gap, 6px);
}

.s2b-qv-cart-wrap .s2b-qv-variation-radios {
    border: 0;
    padding: 0;
}

.s2b-qv-cart-wrap .s2b-qv-variation-radios legend {
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
}

.s2b-qv-cart-wrap .variation-radios label {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-width: var(--s2b-qv-attr-min-width, 44px);
    min-height: var(--s2b-qv-attr-min-height, 36px);
    padding: var(--s2b-qv-attr-pad-y, 4px) var(--s2b-qv-attr-pad-x, 12px);
    font-size: var(--s2b-qv-attr-font-size, 13px);
    border: var(--s2b-qv-attr-border-width, 1px) solid var(--s2b-qv-attr-border, #ccc);
    border-radius: var(--s2b-qv-attr-radius, 4px);
    background: var(--s2b-qv-attr-bg, #f9f9f9);
    color: var(--s2b-qv-attr-color, inherit);
    box-shadow: none;
    cursor: pointer;
    transition: all 0.15s;
}

.s2b-qv-cart-wrap .variation-radios label:hover:not(.hide-variation):not(.selected-variation) {
    filter: brightness(0.94);
}

.s2b-qv-cart-wrap .variation-radios label.selected-variation {
    background: var(--s2b-qv-attr-active-bg, #000);
    color: var(--s2b-qv-attr-active-color, #fff);
    border-color: var(--s2b-qv-attr-active-bg, #000);
}

.s2b-qv-cart-wrap .variation-radios label.hide-variation {
    color: #ccc;
    cursor: not-allowed;
    position: relative;
}

.s2b-qv-cart-wrap .variation-radios label.hide-variation::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top left, transparent calc(50% - 1px), rgba(0,0,0,0.08), transparent calc(50% + 1px));
}

.s2b-qv-cart-wrap .variation-radios input {
    display: none !important;
}

.s2b-qv-cart-wrap .reset_variations {
    display: none !important;
}

.s2b-qv-cart-wrap .quantity {
    display: none;
}

.s2b-qv-cart-wrap .single_add_to_cart_button {
    width: 100%;
    height: var(--s2b-qv-add-to-cart-height, 52px);
    min-height: var(--s2b-qv-add-to-cart-height, 52px);
    padding: 0 22px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    border-radius: 3px;
    background: var(--s2b-qv-add-to-cart-color, #d9d9d9);
    color: var(--s2b-qv-add-to-cart-text-color, #111111);
    cursor: pointer;
    transition: background 0.2s;
}

.s2b-qv-add-to-cart-frame {
    border: 0;
    border-top: var(--s2b-qv-add-to-cart-frame-width, 0px) solid var(--s2b-qv-add-to-cart-frame-color, #fff);
    background: transparent;
    /* Width is a fraction of the panel; the layout block's align-items
       (start/center/end) then positions the narrowed button. */
    width: var(--s2b-qv-add-to-cart-width, 100%);
    max-width: 100%;
}
.s2b-qv-add-to-cart-inner-gap {
    padding: var(--s2b-qv-add-to-cart-inner-gap, 0px);
    background: #fff;
}

.s2b-qv-cart-wrap .s2b-qv-cart-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.s2b-qv-cart-wrap .s2b-qv-cart-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.s2b-qv-cart-wrap .single_add_to_cart_button:hover:not(:disabled) {
    background: var(--s2b-qv-add-to-cart-hover-color, #c7c7c7);
    color: var(--s2b-qv-add-to-cart-hover-text-color, #111111);
    box-shadow: none;
    transform: none;
}

.s2b-qv-cart-wrap .single_add_to_cart_button:disabled {
    background: var(--s2b-qv-add-to-cart-disabled-color, #b5b5b5);
    color: var(--s2b-qv-add-to-cart-disabled-text-color, #666666);
    cursor: not-allowed;
}

.s2b-qv-cart-wrap .single_add_to_cart_button.is-loading {
    cursor: wait;
}

.s2b-qv-cart-wrap .single_add_to_cart_button:disabled:hover {
    background: var(--s2b-qv-add-to-cart-disabled-color, #b5b5b5);
    color: var(--s2b-qv-add-to-cart-disabled-text-color, #666666);
    box-shadow: none;
    transform: none;
}

/* Keep Quick View's configured state colors above the theme's generic
   WooCommerce button rules in both the overlay and moved card panel. */
.s2b-qv-panel .s2b-qv-cart-wrap .single_add_to_cart_button.button {
    background: var(--s2b-qv-add-to-cart-color, #d9d9d9) !important;
    color: var(--s2b-qv-add-to-cart-text-color, #111111) !important;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    appearance: none;
}

.s2b-qv-panel .s2b-qv-cart-wrap .single_add_to_cart_button.button:hover:not(:disabled) {
    background: var(--s2b-qv-add-to-cart-hover-color, #c7c7c7) !important;
    color: var(--s2b-qv-add-to-cart-hover-text-color, #111111) !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.s2b-qv-panel .s2b-qv-cart-wrap .single_add_to_cart_button.button:disabled,
.s2b-qv-panel .s2b-qv-cart-wrap .single_add_to_cart_button.button:disabled:hover {
    background: var(--s2b-qv-add-to-cart-disabled-color, #b5b5b5) !important;
    color: var(--s2b-qv-add-to-cart-disabled-text-color, #666666) !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.s2b-qv-panel .s2b-qv-cart-wrap .single_add_to_cart_button.button:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35) !important;
}

/* ─── Full Details Link ─────────────────────────────────────── */
.s2b-qv-full-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: #666;
    text-decoration: underline;
    transition: color 0.15s;
}

.s2b-qv-full-link:hover {
    color: #000;
}

/* ─── Product Card Mode ─────────────────────────────────────── */
.s2b-qv-mode--product_card .s2b-qv-overlay {
    display: none;
}

.s2b-qv-mode--product_card .s2b-qv-panel {
    position: absolute;
    inset: 0;
    max-height: none;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.97);
}

.s2b-qv-mode--product_card .s2b-qv-body {
    padding: 16px;
}

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    #s2b-qv-wrapper.s2b-qv-mobile-presentation {
        align-items: stretch;
        justify-content: stretch;
    }

    #s2b-qv-wrapper.s2b-qv-mobile-presentation .s2b-qv-overlay {
        display: block;
    }

    #s2b-qv-wrapper.s2b-qv-mobile-presentation .s2b-qv-panel {
        position: absolute;
        inset: 0;
        width: 100% !important;
        max-width: none !important;
        height: 100dvh !important;
        max-height: none !important;
        border-radius: 0;
        transform: translateY(100%) !important;
    }

    #s2b-qv-wrapper.is-open.s2b-qv-mobile-presentation .s2b-qv-panel {
        transform: translateY(0) !important;
    }

    #s2b-qv-wrapper.s2b-qv-mobile-presentation.s2b-qv-mobile-bottom-sheet .s2b-qv-panel {
        top: auto;
        height: var(--s2b-qv-mobile-sheet-height, 75vh) !important;
        border-radius: 16px 16px 0 0;
    }

    .s2b-qv-pos--center .s2b-qv-panel {
        width: 95vw;
        max-width: none;
        max-height: 90vh;
    }

    .s2b-qv-pos--right .s2b-qv-panel,
    .s2b-qv-pos--left .s2b-qv-panel {
        width: 90vw;
        max-width: var(--s2b-qv-panel-width, 420px);
    }

    .s2b-qv-panel:not(.s2b-qv-card-panel) .s2b-qv-info {
        padding-inline: 12px;
    }
}