/* ═══════════════════════════════════════════════════════════════════
   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, #FFFFFF);
    color: var(--iwa-qv-trigger-fg, #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, #14130F);
    color:      var(--iwa-qv-trigger-hover-fg, #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: #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: #14130F;
}
.iwa-quick-view-close {
    background: transparent;
    border: 0;
    padding: 8px;
    margin: -8px;
    cursor: pointer;
    color: #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: #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: #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: #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: #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: #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: #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: #14130F;
}

.iwa-qv-product-sku {
    font-size: 12px;
    color: #6B665B;
    display: flex;
    gap: 4px;
}
.iwa-qv-product-sku-label {
    font-weight: 600;
}
.iwa-qv-product-sku-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #14130F;
}

.iwa-qv-product-price {
    font-size: 17px;
    font-weight: 600;
    color: #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: rgba(200, 71, 43, 0.08);
    box-shadow: 0 0 0 2px rgba(200, 71, 43, 0.35);
    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: #FFFFFF;
}
.iwa-qv-qty-stepper:focus-within {
    border-color: #14130F;
}

.iwa-qv-qty-btn {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F4F2EC;
    color: #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: #14130F;
    color: #FFFFFF;
    outline: none;
}
.iwa-qv-qty-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    background: #F4F2EC !important;
    color: #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: #14130F;
    background: #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: #14130F;
    color: #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: #C8472B;
    color: #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: #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: #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: #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: #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: #C8472B;
    border-bottom-color: #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: #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: #FFFFFF;
    color: #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: #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: #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: #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: #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;
}

/* ─── 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, #14130F);
    color:      var(--iwa-rv-fg, #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: #FFFFFF;
    border: 1.5px solid #E5E2DA;
    border-radius: 50%;
    cursor: pointer;
    color: #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: #14130F;
    border-color: #14130F;
    color: #FFFFFF;
    outline: none;
}
.iwa-qv-related-row__arrow[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
    background: #FFFFFF !important;
    border-color: #E5E2DA !important;
    color: #14130F !important;
}
.iwa-qv-related-row__arrow[hidden] {
    display: none;
}