/* =============================================================================
   PDP Image Layout — Crib Goch Outdoor (CRGH)
   Desktop: 2-column tile grid (main image + thumbnails + YouTube + logo filler),
   "shorter column follows" sticky between the gallery and the details panel.
   Mobile: horizontal image strip (layout unchanged, themed only).

   Pairs with pdp-imageLayout.js (YouTube thumbnail, odd-count logo filler,
   Show More). Self-contained: --pdp-* tokens mirror the sidepanel values but
   are declared here, so this file has no dependency on the other stylesheets.
   ============================================================================= */

:root {
    --pdp-image-radius: 10px;             /* corner radius for all gallery tiles     */
    --pdp-border-color: #dce8d9;          /* green-tinted tile border                */
    --pdp-border-hover: #b5cfae;          /* tile border on hover                    */
    --pdp-green:        #445e30;          /* play disc, focus ring, mobile badge     */
    --pdp-accent:       #151515;          /* text                                    */
    --pdp-subtle:       #f5f5f5;          /* button hover fill                       */
    --pdp-bg:           #fff;             /* gallery/tile background                 */
    --pdp-sticky-top:   100px;            /* offset below the sticky site header     */
}

/* --- DESKTOP VIEW --- */
@media screen and (min-width: 1024px) {

    /* 1. LAYOUT COLUMNS */
    div#prodInfoLeft {
        margin-block: 1rem;
        width: 60%;
    }

    div#prodInfoRight {
        width: 40%;
    }

    /* 2. OVERFLOW FIXES — sticky fails inside any overflow:hidden ancestor */
    .grid.fixed.productPageTop,
    .container,
    .maxInner,
    .zflex-w,
    #prodInfoRight {
        overflow: visible !important;
    }

    div#webdes_pdp .productPageTop .maxInner {
        max-width: 100%;
        padding-inline: 1rem;
    }

    /* 3. STICKY — "shorter column follows".
       Both columns are top-aligned and sticky, so whichever is shorter pins
       under the header while the taller one scrolls. Selectors carry
       div#webdes_pdp so they beat the platform's own #prodInfoLeft /
       .zflex-w:has(#prodInfoLeft) rules. */
    div#webdes_pdp .productPageTop .zflex-w:has(#prodInfoLeft) {
        display: flex !important;
        align-items: flex-start !important;
        overflow: visible !important;
    }

    div#webdes_pdp #prodInfoLeft,
    div#webdes_pdp #prodInfoRight {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: var(--pdp-sticky-top) !important;
        align-self: flex-start !important;
        height: auto !important;
        max-height: none !important;
    }

    div#webdes_pdp #firstdetails {
        position: static !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* 4. TILE GRID
       Main image top-left, first extra image top-right,
       remaining tiles flow 2-per-row down the page. */
    div#prodInfoLeft {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        align-content: start;
    }

    /* Thumbnail wrapper dissolves so its tiles join the grid */
    div#detailMivThumb {
        display: contents;
    }

    /* Shared tile look */
    #detailMiv,
    div#detailMivThumb .col-thumbnail,
    #pdpLogoTile {
        border: 1px solid var(--pdp-border-color);
        border-radius: var(--pdp-image-radius);
        background: var(--pdp-bg);
        transition: border-color 0.15s ease, box-shadow 0.2s ease;
    }

    #detailMiv:hover,
    div#detailMivThumb .col-thumbnail:hover,
    #pdpLogoTile:hover {
        border-color: var(--pdp-border-hover);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }

    div#detailMivThumb .col-thumbnail:focus-within,
    #detailMiv a:focus-visible {
        outline: 2px solid var(--pdp-green);
        outline-offset: 2px;
    }

    /* 5. MAIN IMAGE */
    #detailMiv {
        aspect-ratio: 1 / 1;
        max-height: 80vh; /* keep the whole image on screen on laptops */
        overflow: hidden;
    }

    div#detailMiv img {
        border-radius: var(--pdp-image-radius);
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    /* Single-image products: main image spans both columns.
       Class-based so the YouTube div counts as a thumbnail; the hidden
       #ModularShortDescription link does not. */
    #prodInfoLeft:not(:has(#detailMivThumb > .col-thumbnail:not([href="#ModularShortDescription"]))) #detailMiv {
        grid-column: 1 / -1;
    }

    .MIVicon {
        border-radius: var(--pdp-image-radius);
        margin: .5rem;
    }

    /* 6. THUMBNAILS (!important beats the platform's 96px thumb sizing) */
    div#detailMivThumb .col-thumbnail {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        flex: none !important;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        filter: grayscale(0) !important;
    }

    div#detailMivThumb a img {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover;
        border-radius: var(--pdp-image-radius);
        display: block;
    }

    /* YouTube tile — JS sets background-image to the video thumbnail */
    div#detailMivThumb #youTubeLink {
        background-size: cover;
        background-position: center;
        background-color: #000;
    }

    div#detailMivThumb #youTubeLink .bgStandard {
        display: none !important;
        padding: 0 !important;
    }

    /* The anchor's only child is hidden above, so stretch the anchor itself
       over the tile — otherwise it has no size and the video can't be opened */
    div#detailMivThumb #youTubeLink > a {
        position: absolute;
        inset: 0;
        display: block;
        z-index: 1;
    }

    /* Logo filler tile (added by JS when the tile count is odd) */
    #pdpLogoTile {
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100% !important;
    }

    #pdpLogoTile img {
        max-width: 55%;
        max-height: 55%;
        object-fit: contain;
        opacity: 0.9;
    }

    /* Show More — pill button spanning both grid columns */
    #pdpShowMoreBtn {
        grid-column: 1 / -1;
        justify-self: center;
    }
}

/* --- MOBILE VIEW (layout unchanged, themed) --- */
@media screen and (max-width: 1024px) {
    div#prodInfoLeft {
        display: flex;
        flex-flow: row;
        overflow-x: scroll;
        padding: .5rem;
        background: var(--pdp-bg);
    }

    #detailMiv::before {
       content: 'More Images \203A';
       font-size: 0.75rem;
       font-weight: 600;
       position: absolute;
       bottom: 1rem;
       right: 2rem;
       letter-spacing: 0.02rem;
       z-index: 1;
       background: var(--pdp-green);
       color: #fff;
       padding: 6px 12px;
       border-radius: 20px;
    }

    div#detailMivThumb {
        display: flex;
        flex-flow: row;
        overflow: visible;
        gap: 1rem;
        margin-block: 0;
    }

    #detailMivThumb > a img,
    .cssItemImg > a img {
        min-width: 85vw !important;
        width: 85vw !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: var(--pdp-image-radius);
        object-fit: cover;
        border: 1px solid var(--pdp-border-color);
    }

    .cssItemImg > a img {
        margin-right: 1rem;
    }

    /* Hiding logic for single images */
    #prodInfoLeft:has(#detailMivThumb .col-thumbnail:only-child) {
        overflow: hidden;
    }

    #prodInfoLeft:has(#detailMivThumb .col-thumbnail:only-child) .cssItemImg > a img {
        width: 100% !important;
        padding: .5rem !important;
    }

    #detailMivThumb:has(> .col-thumbnail:only-child) {
        display: none;
    }

    #prodInfoLeft:has(#detailMivThumb .col-thumbnail:only-child) #detailMiv::before {
       display: none;
    }

    #detailMivThumb .col-thumbnail {
        flex: 0 !important;
        min-width: 85vw;
        border-radius: var(--pdp-image-radius);
    }

    #youTubeLink .bgStandard {
        background: transparent;
        border-radius: var(--pdp-image-radius);
    }

    #brand-logo-area > a {
        padding-right: 1rem !important;
        padding-top: 0;
    }

    #brand-logo-area > a img {
        border-radius: var(--pdp-image-radius) !important;
    }

    .MIViconZoom {
        display: none;
    }

    /* Desktop-only additions */
    #pdpLogoTile,
    #pdpShowMoreBtn {
        display: none;
    }
}

/* Hide short desc */
a[href="#ModularShortDescription"] {
    display: none !important;
}

/* --- YOUTUBE PLAY BUTTON --- */
#youTubeLink {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

#youTubeLink::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: var(--pdp-green);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 55% center;
    background-size: 30px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(68, 94, 48, 0.35);
    transition: transform 0.2s ease;
    z-index: 2;
    pointer-events: none;
}

#youTubeLink:hover::after {
    transform: scale(1.06);
}

/* --- SHOW MORE (pill button, matches the sidepanel links) --- */
#pdpShowMoreBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px auto 1rem;
    padding: 8px 18px;
    border: 1px solid var(--pdp-border-color);
    border-radius: 20px;
    background: var(--pdp-bg);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: normal;
    color: var(--pdp-accent);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

#pdpShowMoreBtn::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.6;
}

#pdpShowMoreBtn:hover {
    background: var(--pdp-subtle);
    border-color: var(--pdp-border-hover);
}

#pdpShowMoreBtn:focus-visible {
    outline: 2px solid var(--pdp-green);
    outline-offset: 2px;
}