/* ============================================================
   Product Quickview Modal — structural layout only.
   Block styles (button, qty, variations, prices, descriptions)
   come from generated CSS returned in the quickview AJAX response.
   ============================================================ */

/* Overlay */
.cl-product-quickview-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999991;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.cl-product-quickview-overlay.cl-quickview-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Body scroll lock */
body.cl-quickview-modal-open {
    overflow: hidden;
}

/* Container */
.cl-product-quickview-overlay .cl-product-quickview {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 700px;
    height: calc(90vh - 20px);
    /* `vh` is the LARGE viewport — it does NOT shrink when mobile browser chrome (the URL bar)
       appears, but the overlay above IS `position:fixed; inset:0`, so the overlay DOES shrink.
       That mismatch made the dialog taller than its own parent, and because the overlay centers
       with `align-items:center` the surplus split equally top and bottom with the top half
       unreachable — slicing the close button, which hangs 15px OUTSIDE this box (`top:-15px`
       below, on a 30px control). Measured on a 360x640 phone: 29px of headroom with the URL bar
       hidden, 1px with it showing (46% of the circle cut), -21px with a bottom nav bar too.
       This cap is a PERCENTAGE of the fixed overlay, so it tracks the VISIBLE viewport at every
       chrome state and reserves 40px, which the centering splits into 20px/side — covering the
       button's 15px with margin to spare. It is deliberately ADDED next to `height` rather than
       replacing it: max-height only binds when the overlay actually shrinks, so a full-screen
       phone and every desktop render byte-identically to before. Nothing here can overflow now,
       which is why no `align-items: safe center` / `margin:auto` guard is needed.
       The same cap governs the <=767px rule further down — that rule overrides only `height`,
       never this, so one declaration covers both. Do NOT re-add a `vh` height anywhere here, and
       do NOT "fix" this with `dvh`: it repairs the sizing but leaves the button's headroom
       unguaranteed, and it is unsupported in Opera Mini / Samsung Internet <21.
       House pattern — the same %-of-a-fixed-parent idiom as .cl_modal (public.css:427-437),
       the cart drawer, and the stories viewer (stories/v1/generated_css.php:67-69, which
       documents this exact trap in its own words). */
    max-height: calc(100% - 40px);
    /* MUST stay `visible`: the close button hangs 15px ABOVE this box (`top:-15px` below, on a
       30px control), so any clipping here slices it in half.
       This replaces `overflow: clip; overflow-y: visible;`. That pair was correct CSS and did
       the right thing on Chromium — per css-overflow-3 §3.1 a `clip` axis only degrades the
       other to `hidden` when that other axis is neither `visible` nor `clip`, which is not the
       case here — so it tested clean on Android Chrome and on desktop. But **WebKit clips BOTH
       axes whenever either one is `clip`** (Apple Developer Forums thread 745729, filed
       Feb 2024, still reconfirmed on macOS 26.3 in Mar 2026). The result was an iOS-only bug:
       the modal sat perfectly on screen with ~20px of clear space above it, yet the button was
       sliced flat along this card's top edge. Reported from an iPhone on pov.ma 09-09-2026 and
       reproduced by forcing `overflow-y: clip` in Chromium.
       Nothing is lost by dropping the clip. It only ever guarded the X axis, and
       `.cl-product-quickview-body` below already declares `overflow-x: hidden` for exactly that
       job — verified on the live site: with `overflow: visible`, elementFromPoint finds NO child
       painting outside this card on either side, the 12px corners stay rounded, and the gallery
       slider's peek is still clipped.
       Do NOT re-add `clip` here for the rounded corners, and do NOT reach for
       `overflow-clip-margin` — Safari supports it at NO version, and Chromium ignores it unless
       `overflow: clip` actually applies. House precedent: the thankyou upsell modal carries the
       identical half-outside button on a plain `overflow: visible` shell with the scrolling on
       an inner body (upsell_settings/v1/generated_css.php), and its own comment names THIS file
       as the model it copied. */
    overflow: visible;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: cl-quickview-slide-in 0.25s ease-out;
}
@keyframes cl-quickview-slide-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Close button — the visual (black circle + line-× SVG) now comes from the global
   .cl-modal-close-x (public.css), shared with the cart drawer + future modals. This
   rule only pins the quickview's distinctive HALF-OUTSIDE position (top:-15px).
   Scoped under .cl-product-quickview (0,2,0) so it beats the global .cl-modal-close-x
   (0,1,0) regardless of stylesheet load order. Also positions the AJAX-error fallback
   close button, which carries .cl-product-quickview-close (JS hook) but NOT
   .cl-modal-close-x (it keeps its own inline gray look). */
.cl-product-quickview .cl-product-quickview-close {
    top: -15px;
}

/* Body (scrollable) */
.cl-product-quickview-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}

/* Loading state */
.cl-product-quickview-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 40px;
}
.cl-product-quickview-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--cl-border-color1, #e5e7eb);
    border-top-color: var(--cl-bg-color4, #3b82f6);
    border-radius: 50%;
    animation: cl-quickview-spin 0.6s linear infinite;
}
@keyframes cl-quickview-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   Block overrides inside quickview context
   ============================================================ */

/* Gallery: reset product page layout rules (float/sticky/width%)
   Triple-class specificity (0,3,0) beats .single .cl_gallery (0,2,0) */
.cl-product-quickview-overlay .cl-product-quickview-body .cl_gallery {
    float: none !important;
    width: 100% !important;
    position: relative !important;
    top: auto !important;
    align-self: auto !important;
    height: auto !important;
}
.cl-product-quickview-overlay .cl-product-quickview-body .cl-gallery-slide img {
    width: 100% !important;
    height: auto !important;
    max-height: 400px;
    object-fit: contain;
}

/* Footer: structural layout only (qty + button styles come from generated CSS) */
.cl-product-quickview-footer {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-top: 1px solid var(--cl-border-color1, #e5e7eb);
    background: #fff;
    flex-shrink: 0;
    border-radius: 0 0 12px 12px;
}
.cl-product-quickview-footer button {
    max-height: 40px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 767px) {
    .cl-product-quickview-overlay .cl-product-quickview {
        width: 92%;
        max-width: none;
        height: calc(94vh - 20px);
        border-radius: 10px;
    }
    .cl-product-quickview-body {
        padding: 8px;
    }
}

/* Sold-out gate (Slice C5): the quick view's buttons take product.css's rule, which loads wherever a quick view can
   open (hooks/wp_enqueue_scripts.php). Its copy here, `.cl-product-quickview #cl-addtocart-button.cl-is-soldout`,
   went on 15-10-2026 (G103): its id outranked a button design's Disabled state. */

/* Back-in-stock waitlist (Slice F) — quickview copy (this file loads on all pages) */
.cl-product-quickview .cl-stock-waitlist { margin-top: 12px; }
.cl-product-quickview .cl-stock-waitlist-title { font-weight: 600; margin-bottom: 6px; }
.cl-product-quickview .cl-stock-waitlist-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-product-quickview .cl-stock-waitlist-row .cl-stock-waitlist-email,
.cl-product-quickview .cl-stock-waitlist-row .cl-stock-waitlist-phone,
.cl-product-quickview .cl-stock-waitlist-row .cl-stock-waitlist-name { flex: 1 1 150px; min-width: 0; }