/* ═══════════════════════════════════════════════════════════════════
   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: 5;

    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 { top:    var(--iwa-qv-offset, 10px); }
body.iwa-qv-pos-bottom .iwa-qv-image-wrap .iwa-quick-view-trigger { bottom: var(--iwa-qv-offset, 10px); }
body.iwa-qv-pos-left   .iwa-qv-image-wrap .iwa-quick-view-trigger { left:   var(--iwa-qv-offset, 10px); }
body.iwa-qv-pos-right  .iwa-qv-image-wrap .iwa-quick-view-trigger { right:  var(--iwa-qv-offset, 10px); }

/* ─── 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%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2147483000;

    display: flex;
    flex-direction: column;

    visibility: hidden;
}

/* 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;
}

/* 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 */
body.iwa-quickview-open {
    overflow: hidden;
}

/* ─── 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;
    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;
    }
}