/* =========================================================================
 * product-variants.css -- Myntra-style variant option states (modern theme)
 *
 * Scoped to the product detail page's attribute controls. Deliberately narrow:
 * it only adds the states the existing design system had no expression for
 * (unavailable, out of stock, low stock) and leaves selected/idle styling to
 * the theme's own .btn-group > .active rules.
 * ========================================================================= */

.product-page-details .pv-option,
.pv-option {
    position: relative;
}

/* ---- unavailable: exists-but-out-of-stock, or not made in this colour ---- */

.pv-option.pv-unavailable > label {
    opacity: .38;
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

.pv-option.pv-unavailable > label,
.pv-option.pv-unavailable > label * {
    color: #9a9a9a !important;
}

/* Diagonal strike, matching Myntra's greyed-out size chips. Drawn as a
   gradient so it follows the chip's own width and border-radius. */
.pv-option.pv-unavailable > label::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top left,
        transparent calc(50% - 0.6px),
        currentColor calc(50% - 0.6px),
        currentColor calc(50% + 0.6px),
        transparent calc(50% + 0.6px)
    );
    color: #b5b5b5;
    pointer-events: none;
}

/* Colour swatches are circles -- clip the strike to the circle. */
.pv-option.pv-unavailable > label.rounded-circle::after,
.pv-option.pv-unavailable > label.fullCircle::after {
    border-radius: 50%;
}

.pv-option.pv-unavailable input.attributes {
    pointer-events: none;
}

/* ---- selected --------------------------------------------------------- */

.pv-option.pv-selected > label {
    box-shadow: 0 0 0 2px var(--primary-color, #ff3f6c);
}

.pv-option.pv-selected > label.fullCircle,
.pv-option.pv-selected > label.rounded-circle {
    box-shadow: 0 0 0 2px #ffffff inset, 0 0 0 2px var(--primary-color, #ff3f6c);
}

/* ---- low-stock badge -------------------------------------------------- */

.pv-stock-badge {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 600;
    color: #ff905a;
    text-align: center;
    white-space: nowrap;
}

/* ---- selection notice ------------------------------------------------- */

.pv-notice {
    margin: 6px 0 0;
    font-size: 13px;
    color: #6c757d;
}

.pv-notice.pv-notice-error {
    color: #dc3545;
    font-weight: 600;
}

/* ---- gallery slides filtered out by colour ---------------------------- */

.pv-slide-hidden {
    display: none !important;
}

/* =========================================================================
 * Myntra-style image grid
 *
 * Two columns of large images for the selected colour, in place of the
 * thumbnail rail + single-image carousel. The theme hides its desktop gallery
 * below 991px and its mobile swiper above 800px, leaving 800-991px with no
 * gallery at all; the grid takes over from 800px up and closes that gap.
 * ========================================================================= */

:root {
    /* swap to `contain` if any catalogue images are not portrait and you would
       rather letterbox them than crop */
    --pv-grid-fit: cover;
    --pv-grid-ratio: 3 / 4;
    --pv-grid-gap: 10px;
}

.pv-grid {
    display: none;                 /* shown from 800px up, below */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pv-grid-gap);
    max-height: 78vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.pv-grid-item {
    display: block;
    position: relative;
    background: #f5f5f6;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    aspect-ratio: var(--pv-grid-ratio);
}

.pv-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: var(--pv-grid-fit);
    display: block;
    transition: transform .35s ease;
}

.pv-grid-item:hover img {
    transform: scale(1.03);
}

/* A colour with a single image gets the full width rather than a lonely
   half-width tile next to a gap. */
.pv-grid-item:only-child {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    max-height: 78vh;
}

.pv-grid-item:only-child img {
    object-fit: contain;
}

/* Thin scrollbar, so the column does not shift when content overflows. */
.pv-grid::-webkit-scrollbar { width: 6px; }
.pv-grid::-webkit-scrollbar-thumb { background: #d4d5d9; border-radius: 3px; }
.pv-grid::-webkit-scrollbar-track { background: transparent; }

@media only screen and (min-width: 800px) {
    .pv-grid { display: grid; }
    /* Retire the thumbnail rail + carousel that the grid replaces. */
    .pv-grid ~ .swiper-thumbs-container { display: none !important; }
}

@media only screen and (max-width: 799px) {
    /* Below 800px the theme's own swipe carousel is visible; leave it alone. */
    .pv-grid { display: none !important; }
}