/**
 * Peek - quick-view modal styles.
 *
 * Self-contained (no external token import). Theme authors can override the
 * --peek-* custom properties. The closed modal is fully hidden (no reserved
 * space, no layout shift); the dialog scrolls internally so opening it never
 * reflows the page. Fluid sizing via clamp(), logical properties throughout,
 * a dark-mode pass, and tasteful transitions wrapped in a reduced-motion guard.
 */

.peek-quick-view-modal {
    /* Accent is "iris violet", the colored ring of an eye coming into focus.
       Deliberately not WP/SaaS blue: peeking is an optical act, so the moment
       the panel snaps into focus is tinted like light caught through a lens. */
    --peek-accent: #6d3bf5;
    --peek-accent-soft: rgba(109, 59, 245, 0.16);
    --peek-iris-glow: rgba(109, 59, 245, 0.28);

    --peek-overlay-bg: rgba(15, 13, 28, 0.58);
    --peek-surface-bg: #fff;
    --peek-surface-fg: #1d2327;
    --peek-muted-fg: #50575e;
    --peek-border: rgba(0, 0, 0, 0.08);
    --peek-surface-radius-lg: clamp(10px, 1.5vw, 14px);
    --peek-surface-radius-md: 8px;
    --peek-surface-shadow: 0 24px 70px rgba(20, 12, 48, 0.32);
    --peek-pad: clamp(16px, 3vw, 28px);
    --peek-gap: clamp(16px, 2.5vw, 28px);

    position: fixed;
    inset: 0;
    z-index: 9999;
    color: var(--peek-surface-fg);
}

/* Guarantee a closed modal stays hidden even if a theme forces a `display`
   value on the overlay (which would otherwise win over the UA `[hidden]` rule). */
.peek-quick-view-modal[hidden] {
    display: none !important;
}

.peek-quick-view-trigger {
    margin-block-start: 10px;
}

/* li.wc-block-product is the block Product Collection's card. It is not
   positioned, so without it every overlay button stacked in one corner of
   the page. */
ul.products li.product:has(.peek-quick-view-trigger--overlay),
li.wc-block-product:has(.peek-quick-view-trigger--overlay) {
    position: relative;
}

.peek-quick-view-trigger--overlay {
    position: absolute;
    /* Above the block Sale badge (z-index 9), which otherwise covers it. */
    z-index: 10;
    inset-block-start: 0.65rem;
    inset-inline-end: 0.65rem;
    margin: 0;
    pointer-events: none;
}

.peek-quick-view-trigger--overlay .peek-quick-view-button {
    pointer-events: auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

ul.products li.product:not(:hover):not(:focus-within) .peek-quick-view-trigger--overlay,
li.wc-block-product:not(:hover):not(:focus-within) .peek-quick-view-trigger--overlay {
    opacity: 0;
}

ul.products li.product:focus-within .peek-quick-view-trigger--overlay,
ul.products li.product:hover .peek-quick-view-trigger--overlay,
li.wc-block-product:focus-within .peek-quick-view-trigger--overlay,
li.wc-block-product:hover .peek-quick-view-trigger--overlay {
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .peek-quick-view-trigger--overlay {
        transition: opacity 0.18s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    ul.products li.product:not(:hover):not(:focus-within) .peek-quick-view-trigger--overlay,
    li.wc-block-product:not(:hover):not(:focus-within) .peek-quick-view-trigger--overlay {
        opacity: 1;
    }
}

.peek-quick-view-backdrop {
    position: absolute;
    inset: 0;
    /* A faint, static iris-coloured tint pooled behind the panel, a quiet
       sense-of-place cue. The motion lives in the aperture itself (below),
       not here, so the scrim never competes with the moment. */
    background:
        radial-gradient(120% 90% at 50% 44%, var(--peek-iris-glow), transparent 62%),
        var(--peek-overlay-bg);
}

.peek-quick-view-dialog {
    position: relative;
    z-index: 1;
    inline-size: min(960px, calc(100vw - 32px));
    max-block-size: calc(100vh - 32px);
    overflow: auto;
    margin: 16px auto;
    background: var(--peek-surface-bg);
    border-radius: var(--peek-surface-radius-lg);
    padding: var(--peek-pad);
    box-shadow: var(--peek-surface-shadow);
}

/* THE MOMENT, the lens rim. A single accent stroke across the top of the
   panel, gradient-thinned at the edges so it reads as the rim of an aperture.
   On open it draws in from the centre outward (scaleX), so the rim "snaps
   shut around" the product the instant the peek lands in focus. One mark,
   one gesture, no competing flourishes. */
.peek-quick-view-dialog::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    border-start-start-radius: var(--peek-surface-radius-lg);
    border-start-end-radius: var(--peek-surface-radius-lg);
    background: linear-gradient(
        90deg,
        transparent,
        var(--peek-accent) 22%,
        var(--peek-accent) 78%,
        transparent
    );
    transform-origin: center;
    pointer-events: none;
}

.peek-quick-view-dialog:focus-visible {
    outline: 2px solid var(--peek-accent);
    outline-offset: 2px;
}

.peek-quick-view-close {
    position: sticky;
    inset-block-start: 0;
    margin-inline-start: auto;
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--peek-muted-fg);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.peek-quick-view-close:hover,
.peek-quick-view-close:focus-visible {
    background: var(--peek-border);
    color: var(--peek-surface-fg);
}

.peek-quick-view-close:focus-visible {
    outline: 2px solid var(--peek-accent);
    outline-offset: 2px;
}

/* Optional modal heading, printed outside the AJAX-swapped content region so it
   survives every open. */
.peek-quick-view-content__label {
    margin: 0 0 12px;
    font-size: 1.05em;
    font-weight: 600;
    color: var(--peek-surface-fg);
}

.peek-quick-view-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.1fr);
    gap: var(--peek-gap);
}

/* No media column at all (the merchant turned the image and the gallery off),
   so the summary gets the full width instead of an empty half. */
.peek-quick-view-grid--no-media {
    grid-template-columns: 1fr;
}

.peek-quick-view-main-image img,
.peek-quick-view-thumb img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--peek-surface-radius-md);
}

.peek-quick-view-main-image img {
    transition: opacity 0.15s ease;
}

.peek-quick-view-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-block-start: 10px;
}

.peek-quick-view-thumb {
    display: block;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 2px solid transparent;
    border-radius: calc(var(--peek-surface-radius-md) + 2px);
    cursor: pointer;
    line-height: 0;
    inline-size: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.peek-quick-view-thumb:hover {
    border-color: var(--peek-border);
}

.peek-quick-view-thumb:focus-visible {
    outline: 2px solid var(--peek-accent);
    outline-offset: 2px;
}

.peek-quick-view-thumb[aria-current="true"],
.peek-quick-view-thumb--active {
    border-color: var(--peek-accent);
    box-shadow: 0 0 0 1px var(--peek-accent), 0 2px 8px var(--peek-accent-soft);
}

.peek-quick-view-thumb img {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.peek-quick-view-thumb:hover img {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.peek-quick-view-summary > * + * {
    margin-block-start: 12px;
}

.peek-quick-view-price {
    font-size: 1.4em;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.peek-quick-view-price .amount,
.peek-quick-view-price ins .amount {
    color: var(--peek-accent);
}

.peek-quick-view-meta {
    color: var(--peek-muted-fg);
    font-size: 0.9em;
}

.peek-quick-view-meta__label {
    font-weight: 600;
}

.peek-quick-view-link {
    margin-block-start: 8px;
}

.peek-quick-view-stock {
    margin-block: 0 1em;
}

/* Result of an add to cart made inside the modal. */
.peek-quick-view-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-block: 0 1em;
    padding: 10px 14px;
    border-radius: var(--peek-surface-radius-md);
    border-inline-start: 4px solid var(--peek-accent);
    background: var(--peek-accent-soft);
}

.peek-quick-view-notice p {
    margin: 0;
    flex: 1 1 12em;
}

.peek-quick-view-notice--error {
    border-inline-start-color: #d63638;
    background: rgba(214, 54, 56, 0.1);
}

.peek-quick-view-cart form.cart[aria-busy="true"] .single_add_to_cart_button {
    opacity: 0.6;
    cursor: progress;
}

/* Dedicated polite live region for loading / error announcements. Visually
   hidden (the spinner block carries the visible cue) but kept in the a11y tree
   so screen readers hear status changes without re-announcing the whole
   product subtree. */
.peek-quick-view-status-msg {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Loading + error / empty states inside the content region. */
.peek-quick-view-status {
    display: grid;
    place-items: center;
    gap: 10px;
    min-block-size: 160px;
    padding: var(--peek-pad);
    text-align: center;
    color: var(--peek-muted-fg);
}

.peek-quick-view-status__spinner {
    inline-size: 28px;
    block-size: 28px;
    border: 3px solid var(--peek-border);
    border-block-start-color: var(--peek-accent);
    border-radius: 50%;
    animation: peek-spin 0.7s linear infinite;
}

.peek-quick-view-status__icon {
    font-size: 28px;
    line-height: 1;
}

.peek-quick-view-status p {
    margin: 0;
    max-inline-size: 40ch;
}

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

body.peek-quick-view-open {
    overflow: hidden;
}

/* Open/close transition (progressive enhancement; the modal works without it).
   THE EARNED MICRO-INTERACTION: the panel irises open. A circular clip-path
   expands from the centre, like a camera aperture widening to let the product
   through, while the lens rim draws outward from the middle. One gesture,
   rooted in peek's optical world: you are literally watching the shop "open
   its eye" on the product without leaving the listing. */
.peek-quick-view-backdrop {
    transition: opacity 0.24s ease;
}

.peek-quick-view-dialog {
    transition:
        opacity 0.28s ease,
        clip-path 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    clip-path: circle(150% at 50% 44%);
}

.peek-quick-view-dialog::before {
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.06s;
}

.peek-quick-view-modal[data-peek-animating] .peek-quick-view-backdrop {
    opacity: 0;
}

.peek-quick-view-modal[data-peek-animating] .peek-quick-view-dialog {
    opacity: 0;
    /* Aperture shut: a small circle at the focal point, ready to iris open. */
    clip-path: circle(8% at 50% 44%);
}

.peek-quick-view-modal[data-peek-animating] .peek-quick-view-dialog::before {
    /* Rim collapsed to the centre, then draws outward as the aperture opens. */
    transform: scaleX(0);
}

@media (max-width: 767px) {
    .peek-quick-view-dialog {
        inline-size: calc(100vw - 16px);
        max-block-size: calc(100vh - 16px);
        margin: 8px auto;
    }

    .peek-quick-view-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .peek-quick-view-modal,
    .peek-quick-view-backdrop,
    .peek-quick-view-dialog,
    .peek-quick-view-close,
    .peek-quick-view-thumb,
    .peek-quick-view-thumb img,
    .peek-quick-view-main-image img {
        transition: none;
        scroll-behavior: auto;
    }

    .peek-quick-view-status__spinner {
        animation: none;
    }

    /* No aperture sweep for reduced-motion users: the panel and its rim appear
       fully open at once. The iris glow is a static tint, not an animation, so
       it stays as a quiet sense-of-place cue. */
    .peek-quick-view-dialog,
    .peek-quick-view-dialog::before {
        transition: none;
    }

    .peek-quick-view-modal[data-peek-animating] .peek-quick-view-dialog {
        clip-path: circle(150% at 50% 44%);
    }

    .peek-quick-view-modal[data-peek-animating] .peek-quick-view-dialog::before {
        transform: none;
    }
}

@media (prefers-color-scheme: dark) {
    .peek-quick-view-modal {
        /* Brighter iris so the accent rail and price stay legible on dark. */
        --peek-accent: #a98bff;
        --peek-accent-soft: rgba(169, 139, 255, 0.22);
        --peek-iris-glow: rgba(124, 77, 255, 0.34);

        --peek-overlay-bg: rgba(6, 4, 16, 0.72);
        --peek-surface-bg: #1e1e1e;
        --peek-surface-fg: #e6e6e6;
        --peek-muted-fg: #b0b3b8;
        --peek-border: rgba(255, 255, 255, 0.12);
        --peek-surface-shadow: 0 24px 70px rgba(0, 0, 0, 0.62);
    }
}

/* Trigger button display styles (text / icon / icon+text). */
.peek-quick-view-button--icon_text .peek-quick-view-button__icon {
    margin-inline-end: 6px;
}

.peek-quick-view-button__icon {
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: var(--peek-icon) center / contain no-repeat;
    mask: var(--peek-icon) center / contain no-repeat;
    --peek-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7zm0 11a4 4 0 110-8 4 4 0 010 8zm0-6a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E");
}