/**
 * Quick View Modal
 * Astra Child Theme
 */

:root {
    --ps-green: #346739;
    --ps-black: #000200;
    --ps-white: #FFFFFF;
    --ps-gray-100: #f1f1ee;
    --ps-gray-300: #d8d8d4;
}

.ps-quickview-overlay,
.ps-quickview-overlay *,
.ps-quickview-overlay *::before,
.ps-quickview-overlay *::after {
    box-sizing: border-box;
}

body.ps-noscroll {
    overflow: hidden;
}

body {
    font-family: 'DIN Condensed', sans-serif;
    background: #F7F8FB;
    color: var(--ink);
    width: 100%;
    min-height: 100vh;
}

/* ===== Overlay ===== */
.ps-quickview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 2, 0, 0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3vw 2vw;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.ps-quickview-overlay.active {
    opacity: 1;
    visibility: visible;
}

.ps-quickview-modal {
    position: relative;
    background: var(--ps-white);
    width: 100%;
    max-width: 960px;
    max-height: 83vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    transform: translateY(12px);
    transition: transform .2s ease;
}

.ps-quickview-overlay.active .ps-quickview-modal {
    transform: translateY(0);
}

/* Close button — pinned to the modal (which never scrolls itself,
   only .ps-quickview-body does), so it can never scroll away. */
.ps-quickview-close {
    position: absolute;
    top: 1vw;
    right: 1vw;
    width: 1.8vw;
    height: 1.8vw;
    min-width: 28px;
    min-height: 28px;
    border: none;
    background: none;
    color: var(--ps-black);
    opacity: .6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    transition: opacity .15s ease;
}

.ps-quickview-close:hover {
    opacity: 1;
}

.ps-quickview-close svg {
    width: 1vw;
    height: 1vw;
    min-width: 16px;
    min-height: 16px;
}

/* Wishlist heart — floats over the product photo, positioned against
   .ps-quickview-modal (the nearest positioned ancestor) regardless of
   where it sits in the DOM. */
.ps-qv-details .ps-qv-wishlist {
    position: absolute;
    top: 1vw;
    left: 1vw;
    margin: 0;
    padding: 0;
    background: var(--ps-white);
    border-radius: 50%;
    width: 1.8vw;
    height: 1.8vw;
    min-width: 30px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    color: var(--ps-black);
    z-index: 20;
}

.ps-qv-details .ps-qv-wishlist:hover,
.ps-qv-details .ps-qv-wishlist.active {
    color: var(--ps-green) !important;
}

.ps-qv-details .ps-qv-wishlist svg {
    width: 1vw;
    height: 1vw;
    min-width: 16px;
    min-height: 16px;
}

.ps-qv-loading {
    padding: 4vw;
    text-align: center;
    color: var(--ps-black);
    opacity: .6;
}

/* ===== Content grid ===== */
.ps-quickview-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 1.8vw;
    padding: 1.6vw;
    overflow-y: auto; /* only this scrolls, and only if content genuinely overflows */
}

/* ----- Gallery -----
   Desktop: a vertical thumbnail column beside the main image.
   The gallery's own height is set by JS to match .ps-qv-details'
   natural height (see syncGalleryHeight in quickview.js) — align-self
   start keeps grid's default stretch from overriding that. */
.ps-qv-gallery {
    display: flex;
    flex-direction: row;
    gap: 0.6vw;
    align-self: start;
    min-height: 0;
}

.ps-qv-main {
    position: relative;
    overflow: hidden;
    background: var(--ps-gray-100);
    flex: 1 1 auto;
    min-height: 220px;
    height: 100%;
    border-radius: 6px;
}

.ps-qv-slide {
    display: none;
    width: 100%;
    height: 100%;
}

.ps-qv-slide.active {
    display: block;
}

.ps-qv-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ps-qv-thumbs {
    display: flex;
    flex-direction: column;
    order: -1; /* visually before .ps-qv-main on desktop (left column), no PHP markup change needed */
    gap: 0.5vw;
    flex: 0 0 auto;
    width: 3.4vw;
    overflow-y: auto;
    max-height: 100%;
}

.ps-qv-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-width: 42px;
    min-height: 42px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--ps-gray-300);
    border-radius: 4px;
    opacity: .55;
    padding: 0;
    background: none;
    cursor: pointer;
    transition: all .15s ease;
}

.ps-qv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ps-qv-thumb.active,
.ps-qv-thumb:hover {
    border-color: var(--ps-black) !important;
    opacity: 1;
}

/* ----- Details ----- */
.ps-qv-details {
    padding-top: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ps-qv-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6vw;
}

.ps-qv-title {
    /*font-size: 1.4vw;*/
    font-weight: 700;
    color: var(--ps-black);
    line-height: 1.2;
    margin: 0 0 0.5vw;
    padding-right: 1.8vw; /* clear the close button */
}

.ps-qv-details .ps-rating {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    margin-bottom: 0.5vw;
}

.ps-qv-description {
    font-size: 0.8vw;
    color: var(--ps-black);
    opacity: .65;
    line-height: 1.4;
    margin-bottom: 0.6vw;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.ps-qv-price {
    font-size: 1.15vw;
    font-weight: 700;
    color: var(--ps-black);
    margin-bottom: 0.7vw;
}

.ps-qv-price del {
    font-size: 0.85vw;
    font-weight: 400;
    opacity: .4;
    margin-right: 0.5vw;
}

.ps-qv-price ins {
    text-decoration: none;
    color: var(--ps-green);
}

/* =========================================================
   The original WooCommerce <table class="variations"> is never
   shown — orbfitInitSwatches() reads it once, builds all the rows
   below from plain divs, and hides the table itself. No table
   border/spacing to fight with.
   ========================================================= */
.ps-qv-cart-form table.variations {
    display: none !important;
}

/* ----- Feature badges (Fabric / Fit / Pattern, or any other
   single-value/"informational" attribute) ----- */
.ps-qv-features {
    display: flex;
    gap: 0.6vw;
    margin: 0 0 0.9vw;
}

.ps-qv-feature {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1vw;
    padding: 0.65vw 0.4vw;
    background: var(--ps-gray-100);
    border-radius: 8px;
}

.ps-qv-feature-icon {
    width: 2vw;
    height: 2vw;
    min-width: 20px;
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ps-green);
}

.ps-qv-feature-icon svg {
    width: 100%;
    height: 100%;
}

.ps-qv-feature-text {
    font-size: 1vw;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ps-black);
    opacity: .8;
}

/* ----- Size row: label, size buttons, "Size Guide" link ----- */
.ps-qv-size-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6vw;
    margin: 0.5vw 0;
}

.ps-qv-size-row .ps-attr-label {
    flex: 0 0 auto;
}

.ps-qv-size-guide {
    margin-left: auto;
    font-size: 0.7vw;
    font-weight: 600;
    color: var(--ps-black);
    opacity: .55;
    text-decoration: underline;
    white-space: nowrap;
}

.ps-qv-size-guide:hover {
    opacity: .9;
}

/* ----- Color + Quantity, side by side ----- */
.ps-qv-color-qty-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 1.6vw;
    margin: 0.7vw 0 0.3vw;
}

.ps-qv-color-col,
.ps-qv-qty-col {
    display: flex;
    flex-direction: column;
    gap: 0.4vw;
}

.ps-qv-details .ps-attr-label {
    font-size: 1vw;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ps-black);
    opacity: .6;
}

.ps-qv-details .ps-swatches,
.ps-qv-details .ps-sizes {
    display: flex;
    gap: 0.5vw;
    flex-wrap: wrap;
}

.ps-qv-details .ps-swatch {
    width: 1.3vw;
    height: 1.3vw;
    min-width: 18px;
    min-height: 18px;
    border-radius: 50%;
    border: 1px solid var(--ps-gray-300);
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    transition: outline-color .15s ease;
}

.ps-qv-details .ps-swatch.selected {
    outline: 2px solid var(--ps-green) !important;
    outline-offset: 2px;
}

.ps-qv-details .ps-swatches .ps-swatch:only-child {
    cursor: default;
    pointer-events: none;
}

.ps-qv-details .ps-sizes .ps-size {
    min-width: 1.8vw;
    padding: 0.28vw 0.65vw;
    font-size: 1vw;
    font-weight: 600;
    color: var(--ps-black);
    background: var(--ps-white);
    border: 1px solid var(--ps-gray-300);
    border-radius: 3px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ps-qv-details .ps-sizes .ps-size:hover {
    border-color: var(--ps-green) !important;
}

.ps-qv-details .ps-sizes .ps-size.selected {
    background: var(--ps-black) !important;
    border-color: var(--ps-black) !important;
    color: var(--ps-white) !important;
}

.ps-qv-details .ps-sizes .ps-size:only-child,
.ps-qv-details .ps-swatches .ps-swatch:only-child {
    cursor: default;
    pointer-events: none;
}

/* Flashed briefly on Add to Cart / Buy Now if a required attribute
   still has no value selected. */
.ps-attr-missing {
    animation: ps-attr-pulse .3s ease 2;
    border-radius: 6px;
}

@keyframes ps-attr-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
    50% { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.35); }
}

.ps-qv-cart-form .reset_variations {
    font-size: 0.7vw;
    color: var(--ps-green);
    margin-top: 0.3vw;
    display: inline-block;
}

/* =========================================================
   QUANTITY + ADD TO CART + BUY NOW
   ========================================================= */
.ps-qv-cart-form {
    margin-top: 0.4vw;
}

.ps-qv-qty-col .quantity {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--ps-gray-300);
    border-radius: 4px;
    overflow: hidden;
    width: fit-content;
}

.ps-qv-cart-form input.qty {
    width: 2.6vw;
    min-width: 38px;
    text-align: center;
    padding: 0.5vw 0.2vw;
    border: none;
    font-family: inherit;
    font-size: 0.85vw;
    font-weight: 700;
    color: var(--ps-black);
    -moz-appearance: textfield;
}

.ps-qv-cart-form input.qty::-webkit-outer-spin-button,
.ps-qv-cart-form input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ps-qv-cart-form .ps-qty-btn {
    width: 1.9vw;
    min-width: 28px;
    font-size: 1vw;
    font-weight: 700;
    color: var(--ps-black);
    background: var(--ps-white);
    border: none;
    cursor: pointer;
    transition: background .15s ease;
}

.ps-qv-cart-form .ps-qty-btn:hover {
    background: var(--ps-gray-100) !important;
}

.ps-qv-cart-form .ps-qty-minus {
    border-right: 1px solid var(--ps-gray-300);
}

.ps-qv-cart-form .ps-qty-plus {
    border-left: 1px solid var(--ps-gray-300);
}

.ps-qv-cart-form .woocommerce-variation-add-to-cart,
.ps-qv-cart-form .single_variation_wrap {
    display: block;
    width: 100%;
}

.ps-qv-cart-form button[type="submit"],
.ps-qv-cart-form .single_add_to_cart_button,
.ps-qv-cart-form .ps-buy-now {
    display: block;
    width: 100%;
    background: var(--ps-green) !important;
    color: var(--ps-white) !important;
    border: 1px solid var(--ps-green) !important;
    border-radius: 4px;
    padding: 0.7vw 1.4vw;
    font-family: inherit;
    font-size: 0.85vw;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    margin-top: 0.6vw;
    transition: background .15s ease, border-color .15s ease;
}

.ps-qv-cart-form button[type="submit"]:hover,
.ps-qv-cart-form .single_add_to_cart_button:hover,
.ps-qv-cart-form .ps-buy-now:hover {
    background: var(--ps-black) !important;
    border-color: var(--ps-black) !important;
    color: var(--ps-white) !important;
}

.ps-qv-full-link {
    display: inline-block;
    font-size: 1vw;
    font-weight: 700;
    color: var(--ps-green);
    text-decoration: none;
    border-bottom: 1px solid var(--ps-green);
    margin-top: 0.8vw;
}

.ps-qv-full-link:hover,
.ps-qv-full-link:focus {
    color: var(--ps-green) !important;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 768px) {

    .ps-quickview-overlay {
        padding: 0;
    }

    .ps-quickview-modal {
        width: 90%;
        max-width: 100%;
        height: 90%;
        max-height: 100vh;
        max-height: 100dvh; /* accounts for mobile browser chrome */
        border-radius: 0;
    }

    .ps-quickview-body {
        grid-template-columns: 1fr;
        gap: 4vw;
        padding: 14vw 4vw 6vw;
        overflow-x: hidden; /* stop vw-based children from ever forcing sideways scroll */
    }

    /* Mobile reverts to image-on-top, thumbnail row below — a side
       thumbnail column doesn't fit a narrow screen. This resets every
       desktop-only rule from .ps-qv-gallery/.ps-qv-main/.ps-qv-thumbs
       above — CRITICALLY including the `order` values that put the
       thumbnail column to the LEFT of the photo on desktop. Without
       resetting order here, the thumbnails render ABOVE the main
       image instead of below it, which was the main cause of the
       broken mobile layout. */
    .ps-qv-gallery {
        flex-direction: column;
        height: 100% !important;
    }

    .ps-qv-main {
        order: 0;
        height: auto;
        min-height: 60vw;
    }

    .ps-qv-thumbs {
        order: 1; /* below the main image on mobile (was inheriting order: 0, but sat before .ps-qv-main which is now order:0 too — pin explicitly so it always comes after) */
        flex-direction: row;
        width: auto;
        flex-wrap: wrap;
        overflow-y: visible;
        max-height: none;
        margin-top: 2vw;
    }

    .ps-qv-thumb {
        width: 16vw;
        min-width: 52px;
        min-height: 52px;
    }

    .ps-quickview-close {
        top: 3vw;
        right: 3vw;
        width: 8vw;
        height: 8vw;
    }

    .ps-qv-details .ps-qv-wishlist {
        top: 3vw;
        left: 3vw;
        width: 9vw;
        height: 9vw;
    }

    .ps-qv-title {
        margin-top: 5vw;
        font-size: 5vw;
        padding-right: 0;
    }

    .ps-qv-price {
        font-size: 4.4vw;
    }

    .ps-qv-description,
    .ps-qv-details .ps-attr-label,
    .ps-qv-details .ps-sizes .ps-size,
    .ps-qv-size-guide,
    .ps-qv-full-link {
        font-size: 3.2vw;
    }

    .ps-qv-features {
        gap: 2vw;
        margin-bottom: 3vw;
    }

    .ps-qv-feature {
        padding: 2.5vw 1.5vw;
        gap: 1.2vw;
        border-radius: 3vw;
    }

    .ps-qv-feature-icon {
        width: 6vw;
        height: 6vw;
    }

    .ps-qv-feature-text {
        font-size: 2.6vw;
    }

    .ps-qv-size-row,
    .ps-qv-color-qty-row {
        margin: 3vw 0;
    }

    .ps-qv-color-qty-row {
        grid-template-columns: 1fr;
        gap: 4vw;
    }

    .ps-qv-details .ps-swatch {
        width: 6vw;
        height: 6vw;
        min-width: 24px;
        min-height: 24px;
    }

    .ps-qv-details .ps-sizes .ps-size {
        min-width: 8vw;
        padding: 2vw 3vw;
    }

    /* Quantity stepper: force a non-wrapping row so minus / input /
       plus always sit on one line instead of the minus button
       collapsing onto its own row (what you were seeing in the
       screenshot). */
    .ps-qv-qty-col .quantity {
        height: 11vw;
        min-height: 40px;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        width: fit-content;
    }

    .ps-qv-cart-form input.qty {
        width: 10vw;
        min-width: 36px;
        flex: 0 0 auto;
        font-size: 5vw;
    }

    .ps-qv-cart-form .ps-qty-btn {
        width: 10vw;
        min-width: 36px;
        flex: 0 0 auto;
        font-size: 5vw;
    }

    .ps-qv-cart-form button[type="submit"],
    .ps-qv-cart-form .single_add_to_cart_button,
    .ps-qv-cart-form .ps-buy-now {
        font-size: 3.2vw;
        padding: 3vw;
    }
}