/* ═══════════════════════════════════════════════════════════════════
   Quick View — trigger overlay on product cards + drawer.

   Trigger: a button absolutely-positioned inside .iwa-qv-image-wrap
   (which wraps the WC product thumbnail <img>). Visible always, or
   on hover (desktop) — on touch / narrow viewports it's always
   visible since hover doesn't exist there.

   Drawer: slide-in right panel matching the mini-cart drawer visual
   pattern. Z-index sits ONE step under the mini-cart drawer so that
   if both are open (rare but possible), the mini-cart wins.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Trigger overlay ───────────────────────────────────────────────
   We wrap the loop thumbnail <img> in a <span class="iwa-qv-image-wrap">
   via the woocommerce_product_get_image filter. The wrapper provides
   the positioning context, so the trigger sits exactly over the image
   regardless of how the theme styles li.product or
   .woocommerce-loop-product__link.                                    */

.iwa-qv-image-wrap {
    position: relative;
    display: block;
    line-height: 0;
}
.iwa-qv-image-wrap > img,
.iwa-qv-image-wrap > .attachment-woocommerce_thumbnail {
    display: block;
    max-width: 100%;
    height: auto;
}

.iwa-quick-view-trigger {
    position: absolute;
    z-index: 150;

    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    margin: 0;

    background: var(--iwa-qv-trigger-bg, var(--iwa-color-paper, #FFFFFF));
    color: var(--iwa-qv-trigger-fg, var(--iwa-color-ink, #14130F));
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);

    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        opacity 0.18s ease,
        transform 0.18s ease;
}
.iwa-quick-view-trigger:hover,
.iwa-quick-view-trigger:focus-visible {
    background: var(--iwa-qv-trigger-hover-bg, var(--iwa-color-ink, #14130F));
    color:      var(--iwa-qv-trigger-hover-fg, var(--iwa-color-paper, #FFFFFF));
    outline: none;
    transform: translateY(-1px);
}
.iwa-quick-view-trigger__icon {
    flex: 0 0 auto;
    display: block;
}
.iwa-quick-view-trigger__label {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Icon-only variant: square-ish padding + no label gap */
.iwa-quick-view-trigger--icon {
    padding: 8px;
    gap: 0;
}

/* ─── Position (inset from the chosen corner) ───────────────────────
   PHP adds body classes (iwa-qv-pos-top / -bottom / -left / -right)
   based on the saved setting. Each rule writes ONE of top/bottom and
   ONE of left/right; the unused side stays auto and gives us the
   correct corner. --iwa-qv-offset is published at :root by the
   print_root_css_vars action so it's accessible from every element. */

body.iwa-qv-pos-top    .iwa-qv-image-wrap .iwa-quick-view-trigger,
body.iwa-qv-pos-top    .iwa-relocated-frame .iwa-quick-view-trigger { top:    var(--iwa-qv-offset, 10px); }
body.iwa-qv-pos-bottom .iwa-qv-image-wrap .iwa-quick-view-trigger,
body.iwa-qv-pos-bottom .iwa-relocated-frame .iwa-quick-view-trigger { bottom: var(--iwa-qv-offset, 10px); }
body.iwa-qv-pos-center .iwa-qv-image-wrap .iwa-quick-view-trigger,
body.iwa-qv-pos-center .iwa-relocated-frame .iwa-quick-view-trigger {
    top: 50%;
    transform: translateY(-50%);
}
body.iwa-qv-pos-left   .iwa-qv-image-wrap .iwa-quick-view-trigger,
body.iwa-qv-pos-left   .iwa-relocated-frame .iwa-quick-view-trigger { left:   var(--iwa-qv-offset, 10px); }
body.iwa-qv-pos-right  .iwa-qv-image-wrap .iwa-quick-view-trigger,
body.iwa-qv-pos-right  .iwa-relocated-frame .iwa-quick-view-trigger { right:  var(--iwa-qv-offset, 10px); }

/* Stack with wishlist — when both features share the corner, wishlist
   sits AT the corner (primary visual weight) and QV is pushed inward
   by 40px so wishlist appears visually above QV. The `iwa-wl-stack-with-qv`
   body class is added by the wishlist class when both are at the same
   corner; it gates this offset.

   Top + center positions: QV gets the offset (push QV DOWN from the
   top edge / below center). Bottom position is handled differently in
   wishlist.css — at the bottom edge, the geometric direction is
   inverted (larger `bottom` value = HIGHER on screen), so the offset
   has to go on wishlist's `bottom` to keep wishlist visually above
   QV; QV stays at the corner. */
body.iwa-wl-stack-with-qv.iwa-qv-pos-top    .iwa-qv-image-wrap .iwa-quick-view-trigger,
body.iwa-wl-stack-with-qv.iwa-qv-pos-top    .iwa-relocated-frame .iwa-quick-view-trigger { top:    calc(var(--iwa-qv-offset, 10px) + 40px); }
body.iwa-wl-stack-with-qv.iwa-qv-pos-center .iwa-qv-image-wrap .iwa-quick-view-trigger,
body.iwa-wl-stack-with-qv.iwa-qv-pos-center .iwa-relocated-frame .iwa-quick-view-trigger { top:    calc(50% + 40px); }

/* ─── Visibility (on-hover vs always) ───────────────────────────────
   On desktop (hover-capable input), the --vis-hover variant fades the
   trigger in on image-wrap hover or keyboard focus. On touch / narrow,
   hover doesn't trigger reliably, so we force always-visible.         */

@media (hover: hover) and (pointer: fine) {
    .iwa-quick-view-trigger--vis-hover {
        opacity: 0;
        pointer-events: none;
    }
    .iwa-qv-image-wrap:hover .iwa-quick-view-trigger--vis-hover,
    li.product:hover .iwa-quick-view-trigger--vis-hover,
    li.product:focus-within .iwa-quick-view-trigger--vis-hover {
        opacity: 1;
        pointer-events: auto;
    }
}
.iwa-quick-view-trigger--vis-always {
    opacity: 1;
    pointer-events: auto;
}

/* ─── Drawer root + backdrop ─────────────────────────────────────────
   Z-index sits ONE BELOW the mini-cart drawer's (2147483000) so the
   mini-cart always wins if both are open. The backdrop is one below
   the drawer.                                                          */

.iwa-quick-view-root {
    /* Variables are published at :root by print_root_css_vars. The
       root element itself has no layout — display: contents lets the
       backdrop + drawer position relative to viewport without a wrapper
       box affecting page flow. */
    display: contents;
}

.iwa-quick-view-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 19, 15, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 2147482999;
}

.iwa-quick-view-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;

    width: var(--iwa-qv-width, 420px);
    max-width: 100%;

    background: var(--iwa-color-paper, #FFFFFF);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.14);

    transform: translateX(100%);
    /* On CLOSE: transform animates 300ms; visibility waits 300ms before
       flipping to hidden so the slide-out is visible to the user.
       On OPEN: the .is-open rule below overrides with visibility-0s
       so the drawer is visible immediately as it slides in. */
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s;
    z-index: 2147483000;

    display: flex;
    flex-direction: column;

    visibility: hidden;
}

/* Left-side drawer variant — slides in from the left edge instead of
   the right. Body class iwa-qv-drawer-side-left, set by PHP. */
body.iwa-qv-drawer-side-left .iwa-quick-view-drawer {
    right: auto;
    left: 0;
    transform: translateX(-100%);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.14);
}
body.iwa-qv-drawer-side-left .iwa-quick-view-root.is-open .iwa-quick-view-drawer {
    transform: translateX(0);
}

/* Open state — toggled by JS via the .is-open class on root */
.iwa-quick-view-root.is-open .iwa-quick-view-backdrop {
    opacity: 1;
    pointer-events: auto;
}
.iwa-quick-view-root.is-open .iwa-quick-view-drawer {
    transform: translateX(0);
    visibility: visible;
    /* On OPEN: visibility flips to visible IMMEDIATELY (0s delay) so
       the drawer is paintable as the slide-in begins. */
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}

/* Header */
.iwa-quick-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #EBE8DF;
    flex: 0 0 auto;
}
.iwa-quick-view-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--iwa-color-ink, #14130F);
}
.iwa-quick-view-close {
    background: transparent;
    border: 0;
    padding: 8px;
    margin: -8px;
    cursor: pointer;
    color: var(--iwa-color-ink, #14130F);
    border-radius: 6px;
    transition: background-color 0.15s ease;
}
.iwa-quick-view-close:hover,
.iwa-quick-view-close:focus-visible {
    background: #F4F2EC;
    outline: none;
}

/* Body */
.iwa-quick-view-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

/* Loading state */
.iwa-quick-view-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: #6B665B;
    font-size: 13px;
}
.iwa-quick-view-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #EBE8DF;
    border-top-color: var(--iwa-color-accent, #C8472B);
    border-radius: 50%;
    animation: iwa-qv-spin 0.7s linear infinite;
}
@keyframes iwa-qv-spin {
    to { transform: rotate(360deg); }
}

/* Error state */
.iwa-quick-view-error {
    padding: 32px 20px;
    text-align: center;
    color: var(--iwa-color-accent, #C8472B);
    font-size: 13px;
}

/* Body scroll lock when the drawer is open.
 * Prepending `html` and using `!important` so the rule wins against
 * themes that set `body { overflow: ... !important; }` or otherwise
 * out-specify a single body-class rule. Combined specificity (0,0,1,2)
 * + !important is enough to beat most real-world theme rules; ties
 * broken by !important presence.
 */
html body.iwa-quickview-open {
    overflow: hidden !important;
}

/* ─── Drawer footer ──────────────────────────────────────────────────
   Pinned to the bottom of the drawer. Holds the View Cart button when
   the product is in cart; hidden when not. Sits below the scrollable
   body so the View Cart CTA stays visible even when the body content
   is taller than the viewport.                                          */
.iwa-quick-view-footer {
    flex: 0 0 auto;
    padding: 14px 20px 16px;
    border-top: 1px solid #EBE8DF;
    background: var(--iwa-color-paper, #FFFFFF);
}
.iwa-quick-view-footer[hidden] {
    display: none;
}
.iwa-quick-view-footer .iwa-qv-view-cart-btn {
    /* Footer-positioned View Cart button — full width, same green
       treatment that matches the mini-cart family. */
    width: 100%;
}

/* ─── Drawer content ─────────────────────────────────────────────────
   Two-region layout: image gallery (top) + info (below). Stacks
   vertically since the drawer is narrow (~420px on desktop).          */

.iwa-qv-content {
    display: flex;
    flex-direction: column;
}

/* Gallery — aspect ratio defaults to 6/4 (better for typical landscape
   product photography). JS measures the first image's natural dimensions
   on load and overrides --iwa-qv-gallery-aspect on the container, so the
   gallery is exactly sized to the image and there's no letterboxing.    */
.iwa-qv-gallery {
    position: relative;
    width: 100%;
    aspect-ratio: var(--iwa-qv-gallery-aspect, 6 / 4);
    background: #F4F2EC;
    overflow: hidden;
}
.iwa-qv-gallery-stage {
    position: relative;
    width: 100%;
    height: 100%;
}
.iwa-qv-gallery-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.iwa-qv-gallery-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
}
.iwa-qv-gallery-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #BCB6A9;
}

/* Gallery arrows */
.iwa-qv-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    color: var(--iwa-color-ink, #14130F);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, transform 0.15s ease;
    z-index: 2;
}
.iwa-qv-gallery-arrow:hover,
.iwa-qv-gallery-arrow:focus-visible {
    background: var(--iwa-color-paper, #FFFFFF);
    outline: none;
    transform: translateY(-50%) scale(1.06);
}
.iwa-qv-gallery-arrow--prev { left: 10px; }
.iwa-qv-gallery-arrow--next { right: 10px; }

.iwa-qv-gallery-counter {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 19, 15, 0.72);
    color: var(--iwa-color-paper, #FFFFFF);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    z-index: 2;
}
.iwa-qv-gallery-counter-sep {
    margin: 0 4px;
    opacity: 0.6;
}

/* Info column */
.iwa-qv-info {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.iwa-qv-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}
/* Existing badge classes carry their own typography; we just ensure
   they don't expand to fill the row. */
.iwa-qv-badges .iwa-custom-badge,
.iwa-qv-badges .iwa-brand-badge {
    flex: 0 0 auto;
}

.iwa-qv-product-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--iwa-color-ink, #14130F);
}
.iwa-qv-product-title-link,
.iwa-qv-product-title-link:visited,
.iwa-qv-product-title-link:focus {
    color: inherit;
    text-decoration: none;
}
.iwa-qv-product-title-link:hover {
    color: var(--iwa-color-accent, var(--iwa-color-ink, #14130F));
    text-decoration: underline;
    text-underline-offset: 2px;
}

.iwa-qv-product-sku {
    font-size: 12px;
    color: #6B665B;
    display: flex;
    align-items: center;
    gap: 4px;
}
.iwa-qv-product-sku-icon {
    flex-shrink: 0;
    /* Inherits color via stroke="currentColor" — matches the SKU's
       muted text tone above. */
}
.iwa-qv-product-sku-label {
    font-weight: 600;
}
.iwa-qv-product-sku-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--iwa-color-ink, #14130F);
}

.iwa-qv-product-price {
    font-size: 17px;
    font-weight: 600;
    color: var(--iwa-color-ink, #14130F);
    line-height: 1.3;
}
.iwa-qv-product-price del {
    color: #6B665B;
    font-weight: 400;
    margin-right: 6px;
}
.iwa-qv-product-price ins {
    text-decoration: none;
    background: transparent;
}

.iwa-qv-product-brief {
    font-size: 13px;
    line-height: 1.5;
    color: #4A4640;
    margin: 0;
}
.iwa-qv-product-brief p {
    margin: 0 0 8px;
}
.iwa-qv-product-brief p:last-child {
    margin-bottom: 0;
}

/* Actions row */
.iwa-qv-actions {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.iwa-qv-variations-host {
    border-radius: 6px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.iwa-qv-variations-host.iwa-qv-flash {
    background: color-mix(in srgb, var(--iwa-color-accent) 8%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--iwa-color-accent) 35%, transparent);
    padding: 8px;
    margin: -8px;
}

/* ─── Footer form (qty stepper + Add to cart) ────────────────────────
   The footer's add-to-cart region. Qty stepper above the button —
   stacked vertically. Stepper is FULL WIDTH with − qty + boxes.       */

.iwa-qv-footer-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.iwa-qv-qty-stepper {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 44px;
    border: 1.5px solid #E5E2DA;
    border-radius: 6px;
    overflow: hidden;
    background: var(--iwa-color-paper, #FFFFFF);
}
.iwa-qv-qty-stepper:focus-within {
    border-color: var(--iwa-color-ink, #14130F);
}

.iwa-qv-qty-btn {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F4F2EC;
    color: var(--iwa-color-ink, #14130F);
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.iwa-qv-qty-btn:hover,
.iwa-qv-qty-btn:focus-visible {
    background: var(--iwa-color-button-bg, var(--iwa-color-ink, #14130F));
    color: var(--iwa-color-button-hover-text, var(--iwa-color-paper, #FFFFFF));
    outline: none;
}
.iwa-qv-qty-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    background: #F4F2EC !important;
    color: var(--iwa-color-ink, #14130F) !important;
}

.iwa-qv-qty-input {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    padding: 0 8px;
    margin: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--iwa-color-ink, #14130F);
    background: var(--iwa-color-paper, #FFFFFF);
    -moz-appearance: textfield;
}
.iwa-qv-qty-input:focus {
    outline: none;
}
/* Hide the browser's native number spinner buttons */
.iwa-qv-qty-input::-webkit-outer-spin-button,
.iwa-qv-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Add to cart button */
.iwa-qv-add-to-cart-btn {
    width: 100%;
    padding: 12px 18px;
    background: var(--iwa-color-button-bg, var(--iwa-color-ink, #14130F));
    color: var(--iwa-color-button-text, var(--iwa-color-paper, #FFFFFF));
    border: 0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.15s ease, transform 0.05s ease;
}
.iwa-qv-add-to-cart-btn:hover,
.iwa-qv-add-to-cart-btn:focus-visible {
    background: var(--iwa-color-button-hover-bg, var(--iwa-color-accent, #C8472B));
    color: var(--iwa-color-button-hover-text, var(--iwa-color-paper, #FFFFFF));
    outline: none;
}
.iwa-qv-add-to-cart-btn:active {
    transform: translateY(1px);
}
.iwa-qv-add-to-cart-btn[disabled],
.iwa-qv-add-to-cart-btn.is-loading {
    opacity: 0.65;
    cursor: wait;
}

/* View cart button — green "in cart" treatment, matches mini-cart family */
.iwa-qv-view-cart-btn {
    width: 100%;
    padding: 12px 18px;
    background: #2E7D5B;
    color: var(--iwa-color-paper, #FFFFFF) !important;
    border: 0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.15s ease;
}
.iwa-qv-view-cart-btn:hover,
.iwa-qv-view-cart-btn:focus-visible {
    background: #1F5A3F;
    color: var(--iwa-color-paper, #FFFFFF) !important;
    outline: none;
}
.iwa-qv-view-cart-btn__count {
    background: rgba(255, 255, 255, 0.22);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

/* Unavailable state */
.iwa-qv-unavailable {
    padding: 12px 14px;
    background: #FCEEEA;
    color: var(--iwa-color-accent, #C8472B);
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
    font-weight: 500;
}

/* View full product link */
.iwa-qv-view-product-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    color: var(--iwa-color-ink, #14130F);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 8px;
    border-bottom: 1px dashed transparent;
    align-self: center;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.iwa-qv-view-product-link:hover,
.iwa-qv-view-product-link:focus-visible {
    color: var(--iwa-color-accent, #C8472B);
    border-bottom-color: var(--iwa-color-accent, #C8472B);
    outline: none;
}

/* Variable-product form — body shows the variation selectors + WC's
   live price/availability/stock messaging. The native qty + add-to-cart
   row is HIDDEN because our footer drives both. JS reads the form's
   selected variation_id + footer qty on submit. */
.iwa-qv-variable-form {
    margin: 0;
}
.iwa-qv-variable-form .variations {
    width: 100%;
    margin: 0 0 12px;
    border-collapse: collapse;
}
.iwa-qv-variable-form .variations td,
.iwa-qv-variable-form .variations th {
    padding: 6px 0;
    vertical-align: middle;
    font-size: 13px;
}
.iwa-qv-variable-form .variations th {
    text-align: left;
    font-weight: 600;
    color: var(--iwa-color-ink, #14130F);
    width: 36%;
    padding-right: 8px;
}
.iwa-qv-variable-form select {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid #E5E2DA;
    border-radius: 6px;
    font-size: 13px;
    background: var(--iwa-color-paper, #FFFFFF);
    color: var(--iwa-color-ink, #14130F);
}
.iwa-qv-variable-form .reset_variations {
    display: inline-block;
    margin-top: 4px;
    font-size: 11.5px;
    color: #6B665B;
    text-decoration: underline;
}
.iwa-qv-variable-form .single_variation_wrap .woocommerce-variation-price,
.iwa-qv-variable-form .single_variation_wrap .woocommerce-variation-availability {
    font-size: 13px;
    margin: 4px 0;
    color: var(--iwa-color-ink, #14130F);
}

/* Bridged form — body shows selectors only, footer owns qty + button. */
.iwa-qv-variable-form--bridged .woocommerce-variation-add-to-cart,
.iwa-qv-variable-form--bridged .quantity,
.iwa-qv-variable-form--bridged .single_add_to_cart_button {
    display: none !important;
}

/* Narrow viewport — drawer full-width on phones, denser padding */
@media (max-width: 600px) {
    .iwa-quick-view-drawer {
        width: 100%;
    }
    .iwa-qv-info {
        padding: 14px 16px 18px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .iwa-quick-view-backdrop,
    .iwa-quick-view-drawer,
    .iwa-quick-view-trigger,
    .iwa-qv-gallery-arrow {
        transition: none !important;
    }
    .iwa-quick-view-spinner {
        animation: none !important;
    }
}

/* ─── Related-row inside drawer ──────────────────────────────────────
   Horizontal-scroll row of mini product cards. Each card is itself a
   QV trigger — clicking re-loads the drawer for that product.         */

.iwa-qv-related-row {
    margin-top: 18px;
    padding-top: 14px;
    padding-bottom: 6px;
    border-top: 1px solid #EBE8DF;
}
.iwa-qv-related-row__heading {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--iwa-color-ink, #14130F);
    text-transform: none;
    letter-spacing: 0.01em;
}
.iwa-qv-related-row__list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 8px; /* room for the lift-on-hover shadow + space from arrows */
    margin: 0 -4px;
    /* Hide native scrollbars — arrows drive navigation; touch swipe
       still works via the underlying overflow-x: auto. */
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE / Edge legacy */
}
.iwa-qv-related-row__list::-webkit-scrollbar {
    display: none;                /* Chromium / Safari */
}

.iwa-qv-related-card {
    flex: 0 0 auto;
    width: 120px;
    background: transparent;
    border: 1.5px solid #EBE8DF;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    text-align: left;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.18s ease, transform 0.05s ease, box-shadow 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}
.iwa-qv-related-card:hover,
.iwa-qv-related-card:focus-visible {
    /* On hover the border becomes invisible — the card lifts on shadow
       alone for a cleaner look. */
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(20, 19, 15, 0.14);
    outline: none;
    transform: translateY(-2px);
}
.iwa-qv-related-card__media {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 5px;
    background: #F4F2EC;
}
.iwa-qv-related-card__img,
.iwa-qv-related-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.iwa-qv-related-card__title {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--iwa-color-ink, #14130F);
    /* Clamp to 2 lines so card heights stay even */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.iwa-qv-related-card__price {
    font-size: 12px;
    font-weight: 600;
    color: var(--iwa-color-ink, #14130F);
}
.iwa-qv-related-card__price del {
    color: #6B665B;
    font-weight: 400;
    margin-right: 4px;
}
.iwa-qv-related-card__price ins {
    text-decoration: none;
    background: transparent;
}
/* Bookings "Price on request" replacement pill, when it appears
   inside the QV related-card price wrapper, needs explicit sizing
   to fit the tight related-card layout — shrink from the base
   13px down to 10px so the pill scales to the related-card's
   price text size. */
.iwa-qv-related-card__price .inspira-price-hidden {
    font-size: 10px;
}

/* ─── Recently Viewed indicators ─────────────────────────────────────
   Pill near the product title in the QV drawer (shows when the
   customer has previously viewed this product), AND a hanging tag
   sitting ABOVE the product card on shop / category / related loops
   (top corners rounded, bottom flat, hangs in the row gap above
   the card).                                                            */

/* QV drawer pill */
.iwa-qv-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}
.iwa-qv-title-row .iwa-qv-product-title {
    flex: 1 1 auto;
    margin: 0;
}
.iwa-recently-viewed-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--iwa-rv-pill-pv, 3px) var(--iwa-rv-pill-ph, 9px);
    background: var(--iwa-rv-bg, var(--iwa-color-ink, #14130F));
    color:      var(--iwa-rv-fg, var(--iwa-color-paper, #FFFFFF));
    border-radius: 999px;
    font-size: var(--iwa-rv-pill-fs, 11px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    white-space: nowrap;
    align-self: center;
}

/* NOTE (v0.3.74): The Recently Viewed on-card hanging tag rules
   (.iwa-recently-viewed-card-tag etc.) used to live here. They were
   moved to assets/css/recently-viewed.css so they ship globally
   regardless of whether Quick View is enabled. The pill above stays
   here because it only renders inside the QV drawer. */

/* ─── Related-row arrows (scroll prev/next) ──────────────────────────
   Arrows sit OUTSIDE the scrollable list. Hidden by default (PHP-level
   hidden attr); JS removes the attr once it measures content overflow.
   Click handlers + disabled states wired in quick-view.js.              */

.iwa-qv-related-row__scroller {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.iwa-qv-related-row__list {
    flex: 1 1 auto;
    /* Existing .iwa-qv-related-row__list rules above still apply
       (overflow-x: auto, scroll-snap, etc) */
}
.iwa-qv-related-row__arrow {
    flex: 0 0 28px;
    align-self: center;
    width: 28px;
    height: 28px;
    background: var(--iwa-color-paper, #FFFFFF);
    border: 1.5px solid #E5E2DA;
    border-radius: 50%;
    cursor: pointer;
    color: var(--iwa-color-ink, #14130F);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.iwa-qv-related-row__arrow:hover,
.iwa-qv-related-row__arrow:focus-visible {
    background: var(--iwa-color-button-bg, var(--iwa-color-ink, #14130F));
    border-color: var(--iwa-color-button-bg, var(--iwa-color-ink, #14130F));
    color: var(--iwa-color-button-hover-text, var(--iwa-color-paper, #FFFFFF));
    outline: none;
}
.iwa-qv-related-row__arrow[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
    background: var(--iwa-color-paper, #FFFFFF) !important;
    border-color: #E5E2DA !important;
    color: var(--iwa-color-ink, #14130F) !important;
}
.iwa-qv-related-row__arrow[hidden] {
    display: none;
}

/* ─── Skeleton loading state (replaces spinner) ─────────────────────
   Rendered inside [data-iwa-qv-loading] — shown by JS during AJAX
   load, hidden when real content is injected. Mimics the loaded QV
   layout (gallery on top, info section below) so the modal looks
   intentional, not broken, while content fetches.
   ═══════════════════════════════════════════════════════════════════ */

.iwa-quick-view-loading {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px 24px;
}
.iwa-qv-skel-gallery {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f0f0f0;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}
.iwa-qv-skel-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.iwa-qv-skel-bar {
    background: #f0f0f0;
    border-radius: 4px;
    height: 12px;
    position: relative;
    overflow: hidden;
}
.iwa-qv-skel-bar--badge   { width: 30%; height: 18px; border-radius: 9px; margin-bottom: 4px; }
.iwa-qv-skel-bar--title   { width: 80%; height: 22px; }
.iwa-qv-skel-bar--sku     { width: 35%; height: 11px; }
.iwa-qv-skel-bar--price   { width: 30%; height: 24px; margin-top: 4px; }
.iwa-qv-skel-bar--desc    { width: 100%; height: 12px; margin-top: 6px; }
.iwa-qv-skel-bar--desc-short { width: 70%; height: 12px; }
.iwa-qv-skel-bar--button  { width: 100%; height: 42px; margin-top: 10px; border-radius: 6px; }

/* Shimmer overlay — identical pattern to wishlist-page skeleton.
   ::after pseudo with a left-to-right gradient sweep, animation-named
   distinctly per-file to avoid keyframe-collision issues if two CSS
   bundles override each other. */
.iwa-qv-skel-gallery::after,
.iwa-qv-skel-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-100%);
    animation: iwa-qv-skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes iwa-qv-skel-shimmer {
    100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .iwa-qv-skel-gallery::after,
    .iwa-qv-skel-bar::after {
        animation: none;
    }
}