/* =========================================================
   SPACE VANTA
   BUYING GUIDE — CURATED DISCOVERY

   File:
   public/buying-guide/cs/curated-picks/curated-picks.css

   Responsibility:
   - Curated Discovery layout
   - Collection selector
   - Product pool
   - Auto Selector visible state
   - Live Shopline product presentation
   - Product card interaction
   - Responsive structure

   Does NOT control:
   - Accordion header
   - Accordion JavaScript
   - Collection data retrieval
   - Auto Selector logic
   ========================================================= */


/* =========================================================
   CURATED DISCOVERY ROOT
   ========================================================= */

.sv-buying-guide-curated-picks {
    width:
        100%;

    box-sizing:
        border-box;
}


.sv-buying-guide-curated-picks__container {
    width:
        100%;

    box-sizing:
        border-box;
}


/* =========================================================
   COLLECTION SELECTOR
   ========================================================= */

.sv-buying-guide-curated-picks__collections {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    width:
        100%;

    margin-top:
        2px;

    margin-bottom:
        28px;

    overflow-x:
        auto;

    scrollbar-width:
        none;
}


.sv-buying-guide-curated-picks__collections::-webkit-scrollbar {
    display:
        none;
}


/* =========================================================
   CURATED COLLECTION BLOCK
   ========================================================= */

.sv-buying-guide-curated-collection {
    flex:
        0 0 auto;

    min-width:
        0;
}


/* =========================================================
   COLLECTION BUTTON
   ========================================================= */

.sv-buying-guide-curated-collection__button {
    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        34px;

    padding:
        0 15px;

    border:
        1px solid rgba(0, 0, 0, 0.13);

    border-radius:
        999px;

    color:
        inherit;

    background:
        rgba(255, 255, 255, 0.2);

    cursor:
        pointer;

    font-size:
        9px;

    line-height:
        1;

    letter-spacing:
        0.11em;

    font-weight:
        500;

    text-transform:
        uppercase;

    white-space:
        nowrap;

    appearance:
        none;

    -webkit-appearance:
        none;

    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.4s ease,
        opacity 0.35s ease;
}


/* =========================================================
   COLLECTION BUTTON HOVER
   ========================================================= */

.sv-buying-guide-curated-collection__button:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(72, 126, 177, 0.45);

    background:
        rgba(255, 255, 255, 0.52);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.045),
        0 0 0 3px rgba(72, 126, 177, 0.025);
}


/* =========================================================
   COLLECTION ACTIVE

   JS controls aria-selected.
   ========================================================= */

.sv-buying-guide-curated-collection__button[aria-selected="true"] {
    border-color:
        rgba(72, 126, 177, 0.48);

    background:
        rgba(255, 255, 255, 0.58);

    box-shadow:
        0 0 0 3px rgba(72, 126, 177, 0.035);

    opacity:
        1;
}


.sv-buying-guide-curated-collection__button[aria-selected="false"] {
    opacity:
        0.58;
}


/* =========================================================
   COLLECTION FOCUS
   ========================================================= */

.sv-buying-guide-curated-collection__button:focus-visible {
    outline:
        none;

    border-color:
        rgba(72, 126, 177, 0.62);

    box-shadow:
        0 0 0 3px rgba(72, 126, 177, 0.08);
}


/* =========================================================
   PRODUCT POOLS ROOT
   ========================================================= */

.sv-buying-guide-curated-picks__product-pools {
    position:
        relative;

    width:
        100%;
}


/* =========================================================
   PRODUCT POOL
   ========================================================= */

.sv-buying-guide-curated-picks__product-pool {
    width:
        100%;

    min-width:
        0;

    box-sizing:
        border-box;
}


/*
 * JS uses hidden=true for inactive pools.
 * Keep this explicit so CSS cannot accidentally
 * override the interaction state.
 */

.sv-buying-guide-curated-picks__product-pool[hidden] {
    display:
        none !important;
}


/* =========================================================
   PRODUCT POOL LIST
   ========================================================= */

.sv-buying-guide-curated-picks__product-pool-list {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        16px;

    width:
        100%;

    align-items:
        stretch;
}


/* =========================================================
   PRODUCT ITEM
   ========================================================= */

.sv-buying-guide-curated-picks__product-test {
    position:
        relative;

    min-width:
        0;

    width:
        100%;

    box-sizing:
        border-box;
}


/*
 * Auto Selector uses hidden=true to remove
 * products that were not selected.
 */

.sv-buying-guide-curated-picks__product-test[hidden] {
    display:
        none !important;
}


/* =========================================================
   PRODUCT LINK
   ========================================================= */

.sv-buying-guide-curated-picks__product-test-link {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    height:
        100%;

    min-width:
        0;

    overflow:
        hidden;

    border:
        1px solid rgba(0, 0, 0, 0.1);

    border-radius:
        15px;

    color:
        inherit;

    background:
        rgba(255, 255, 255, 0.22);

    text-decoration:
        none;

    isolation:
        isolate;

    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s ease,
        background 0.4s ease,
        box-shadow 0.55s ease;
}


/* =========================================================
   PRODUCT IMAGE FRAME
   ========================================================= */

.sv-buying-guide-curated-picks__product-test-image {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

    border-bottom:
        1px solid rgba(0, 0, 0, 0.07);

    background:
        rgba(0, 0, 0, 0.025);
}


/* =========================================================
   PRODUCT IMAGE

   IMPORTANT:
   Live product images should remain contained.
   This prevents the image itself from appearing
   excessively large inside the frame.
   ========================================================= */

.sv-buying-guide-curated-picks__product-test-image img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    max-width:
        100%;

    object-fit:
        contain;

    object-position:
        center;

    padding:
        14px;

    box-sizing:
        border-box;

    transform:
        scale(1.001);

    filter:
        saturate(0.94);

    transition:
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s ease;
}


/* =========================================================
   PRODUCT INFORMATION
   ========================================================= */

.sv-buying-guide-curated-picks__product-test-information {
    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    min-width:
        0;

    padding:
        18px 18px 19px;
}


/* =========================================================
   PRODUCT TITLE
   ========================================================= */

.sv-buying-guide-curated-picks__product-test-title {
    margin:
        0;

    min-width:
        0;

    font-size:
        clamp(15px, 1.45vw, 19px);

    line-height:
        1.12;

    letter-spacing:
        -0.027em;

    font-weight:
        500;

    text-wrap:
        balance;

    opacity:
        0.92;

    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease;
}


/* =========================================================
   PRODUCT PRICE
   ========================================================= */

.sv-buying-guide-curated-picks__product-test-price {
    margin-top:
        11px;

    font-size:
        11px;

    line-height:
        1;

    letter-spacing:
        0.01em;

    font-weight:
        500;

    opacity:
        0.66;
}


/* =========================================================
   PRODUCT LIGHT
   ========================================================= */

.sv-buying-guide-curated-picks__product-test-link::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        3;

    pointer-events:
        none;

    opacity:
        0;

    background:
        linear-gradient(120deg,
            transparent 22%,
            rgba(255, 255, 255, 0.17) 50%,
            transparent 76%);

    transform:
        translateX(-40%);

    transition:
        opacity 0.45s ease,
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   PRODUCT HOVER
   ========================================================= */

.sv-buying-guide-curated-picks__product-test-link:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(72, 126, 177, 0.42);

    background:
        rgba(255, 255, 255, 0.48);

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.06),
        0 0 0 3px rgba(72, 126, 177, 0.035);
}


.sv-buying-guide-curated-picks__product-test-link:hover .sv-buying-guide-curated-picks__product-test-image img {
    transform:
        scale(1.035);

    filter:
        saturate(1);
}


.sv-buying-guide-curated-picks__product-test-link:hover .sv-buying-guide-curated-picks__product-test-title {
    transform:
        translateX(4px);

    opacity:
        1;
}


.sv-buying-guide-curated-picks__product-test-link:hover::after {
    opacity:
        1;

    transform:
        translateX(40%);
}


/* =========================================================
   SELECTED PRODUCT STATE

   JS marks selected products with:
   data-curated-selected="true"

   Keep this subtle. Selection should not look
   like a filter result or advertising badge.
   ========================================================= */

.sv-buying-guide-curated-picks__product-test[data-curated-selected="true"] {
    opacity:
        1;
}


/* =========================================================
   PRODUCT FOCUS
   ========================================================= */

.sv-buying-guide-curated-picks__product-test-link:focus-visible {
    outline:
        1px solid rgba(72, 126, 177, 0.62);

    outline-offset:
        4px;
}


/* =========================================================
   LEGACY PRODUCT PICK COMPATIBILITY

   These selectors preserve the manual Product Pick
   block architecture for future use.

   Current Auto Selector does NOT depend on them.
   ========================================================= */

.sv-buying-guide-product-pick {
    position:
        relative;

    width:
        100%;

    min-width:
        0;
}


.sv-buying-guide-product-pick__link {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    border:
        1px solid rgba(0, 0, 0, 0.1);

    border-radius:
        15px;

    color:
        inherit;

    background:
        rgba(255, 255, 255, 0.22);

    text-decoration:
        none;
}


.sv-buying-guide-product-pick__media {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;
}


.sv-buying-guide-product-pick__image {
    display:
        block;

    width:
        100%;

    height:
        100%;

    max-width:
        100%;

    object-fit:
        contain;

    object-position:
        center;
}


.sv-buying-guide-product-pick__content {
    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    padding:
        18px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .sv-buying-guide-curated-picks__product-pool-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .sv-buying-guide-curated-picks__collections {
        gap:
            6px;

        margin-bottom:
            20px;

        padding-bottom:
            2px;
    }


    .sv-buying-guide-curated-collection__button {
        min-height:
            32px;

        padding:
            0 13px;

        font-size:
            8px;

        letter-spacing:
            0.1em;
    }


    .sv-buying-guide-curated-picks__product-pool-list {
        grid-template-columns:
            1fr;

        gap:
            12px;
    }


    .sv-buying-guide-curated-picks__product-test-link {
        border-radius:
            13px;
    }


    .sv-buying-guide-curated-picks__product-test-image {
        aspect-ratio:
            16 / 10;
    }


    .sv-buying-guide-curated-picks__product-test-image img {
        padding:
            12px;
    }


    .sv-buying-guide-curated-picks__product-test-information {
        padding:
            17px 17px 18px;
    }


    .sv-buying-guide-curated-picks__product-test-title {
        font-size:
            18px;

        letter-spacing:
            -0.026em;
    }


    .sv-buying-guide-curated-picks__product-test-price {
        margin-top:
            9px;

        font-size:
            10px;
    }


    .sv-buying-guide-curated-picks__product-test-link:hover {
        transform:
            none;

        box-shadow:
            none;
    }


    .sv-buying-guide-curated-picks__product-test-link:hover .sv-buying-guide-curated-picks__product-test-image img {
        transform:
            none;
    }


    .sv-buying-guide-curated-picks__product-test-link:hover .sv-buying-guide-curated-picks__product-test-title {
        transform:
            none;
    }


    .sv-buying-guide-curated-picks__product-test-link:hover::after {
        opacity:
            0;

        transform:
            none;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sv-buying-guide-curated-picks *,
    .sv-buying-guide-curated-picks *::before,
    .sv-buying-guide-curated-picks *::after {

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}