/*
================================================

Space Vanta Theme 1.0

Module:
Collection Bundle Stream

File:
layout.css

Version:
1.6

Purpose:
Brand Spatial Composition

Phase:
Brand Visual Optimization 1.0
Phase 02 — Spatial Material

Update:
Level 3 Full-Width Stream Layout
Level 2 Grid Context Release

================================================
*/


/* =========================================
   LEVEL 1
   BUNDLE SELECTION
========================================= */

.sv-collection-bundle__bundle-choice {
    width: 100%;

    min-height: min(680px, 72vw);

    display: grid;

    grid-template-columns:
        minmax(0, 1.65fr) minmax(320px, 0.7fr);

    align-items: end;

    gap: var(--sv-bundle-space-xl);

    padding: var(--sv-bundle-space-xl);

    border: 1px solid var(--sv-bundle-line-medium);

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.92),
            rgba(237, 239, 241, 0.96));

    text-align: left;

    cursor: pointer;

    position: relative;
    overflow: hidden;

    transition:
        border-color var(--sv-bundle-transition),
        background var(--sv-bundle-transition);
}


/* -----------------------------------------
   Level 1 Construction Line
----------------------------------------- */

.sv-collection-bundle__bundle-choice::before {
    content: "";

    position: absolute;

    top: var(--sv-bundle-space-md);
    right: var(--sv-bundle-space-md);

    width: 72px;
    height: 72px;

    border-top: 1px solid var(--sv-bundle-line-strong);
    border-right: 1px solid var(--sv-bundle-line-strong);

    pointer-events: none;
}


/* -----------------------------------------
   Level 1 Image
----------------------------------------- */

.sv-collection-bundle__bundle-choice-media {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    position: relative;

    z-index: 1;
}


.sv-collection-bundle__bundle-choice-image-frame {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    aspect-ratio: auto;

    overflow: hidden;

    position: relative;

    background: var(--sv-bundle-surface);
}


.sv-collection-bundle__bundle-choice-image-frame::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(120deg,
            transparent 55%,
            rgba(255, 255, 255, 0.16) 72%,
            transparent 86%);

    pointer-events: none;
}


.sv-collection-bundle__bundle-choice-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform var(--sv-bundle-transition-slow);
}


/* -----------------------------------------
   Level 1 Content
----------------------------------------- */

.sv-collection-bundle__bundle-choice-content {
    width: 100%;
    max-width: 420px;

    padding-bottom: var(--sv-bundle-space-sm);

    position: relative;

    z-index: 2;
}


/* =========================================
   LEVEL 2
========================================= */

.sv-collection-bundle__bundle-flow {
    width: 100%;
    max-width: var(--sv-bundle-content-width);

    margin: 0 auto;

    min-width: 0;

    padding:
        var(--sv-bundle-space-3xl) var(--sv-bundle-space-lg);
}


/* -----------------------------------------
   Level 2 Header
----------------------------------------- */

.sv-collection-bundle__bundle-header {
    width: 100%;
    max-width: 680px;

    margin:
        0 0 var(--sv-bundle-space-2xl);

    padding-bottom: var(--sv-bundle-space-lg);

    border-bottom: 1px solid var(--sv-bundle-line);
}


/* -----------------------------------------
   Level 2 Options
----------------------------------------- */

.sv-collection-bundle__options {
    width: 100%;

    min-width: 0;

    display: grid;

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

    column-gap: 80px;

    row-gap: 144px;

    align-items: start;
}


/* =========================================
   LEVEL 2
   OPTION
========================================= */

.sv-collection-bundle__option {
    width: 100%;

    min-width: 0;

    position: relative;
}


.sv-collection-bundle__option-choice {
    width: 100%;

    display: block;

    padding: 0;

    border: 0;

    background: transparent;

    text-align: left;

    cursor: pointer;

    position: relative;
}


/* -----------------------------------------
   Option Index
----------------------------------------- */

.sv-collection-bundle__option-choice::before {
    content: "OPTION";

    display: block;

    margin-bottom: var(--sv-bundle-space-sm);

    font-size: 10px;
    line-height: 1;

    letter-spacing: var(--sv-bundle-eyebrow-spacing);

    color: var(--sv-bundle-text-muted);
}


/* -----------------------------------------
   Option Image
----------------------------------------- */

.sv-collection-bundle__option-choice-media {
    width: 100%;

    min-width: 0;

    position: relative;
}


.sv-collection-bundle__option-choice-image-frame {
    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    position: relative;

    background: var(--sv-bundle-surface);
}


.sv-collection-bundle__option-choice-image-frame::after {
    content: "";

    position: absolute;

    inset: 0;

    border: 1px solid rgba(255, 255, 255, 0.32);

    pointer-events: none;
}


.sv-collection-bundle__option-choice-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform var(--sv-bundle-transition-slow);
}


/* -----------------------------------------
   Spatial Offset
----------------------------------------- */

.sv-collection-bundle__option:nth-child(even) {
    margin-top: var(--sv-bundle-space-xl);
}


/* =========================================
   LEVEL 3
   FULL-WIDTH STREAM CONTEXT
========================================= */

/*
   IMPORTANT:

   Level 2 uses a two-column Grid.

   Level 3 does NOT attempt to make the
   active Option span that Grid.

   Instead, once Level 3 becomes active,
   the Options container itself changes
   from Grid to Block.

   This releases the active Option from
   the Level 2 two-column spatial context.
*/


.sv-collection-bundle[data-stream-state="option-detail"] .sv-collection-bundle__bundle.is-active .sv-collection-bundle__options {

    display: block;

    width: 100%;

    min-width: 0;
}


/* -----------------------------------------
   Level 3 Active Option
----------------------------------------- */

.sv-collection-bundle[data-stream-state="option-detail"] .sv-collection-bundle__bundle.is-active .sv-collection-bundle__option.is-active {

    display: block;

    width: 100%;

    min-width: 0;

    max-width: none;

    margin-top: 0;
}


/* =========================================
   LEVEL 3
   OPTION DETAIL
========================================= */

.sv-collection-bundle__option-detail {
    width: 100%;

    min-width: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr) minmax(320px, 0.85fr);

    gap: var(--sv-bundle-space-2xl);

    align-items: start;
}


/* -----------------------------------------
   Level 3 Active Detail
----------------------------------------- */

/*
   state.css controls visibility.

   state.css changes the active Detail
   to display:block.

   Layout restores the intended spatial
   composition after visibility is enabled.
*/

.sv-collection-bundle[data-stream-state="option-detail"] .sv-collection-bundle__bundle.is-active .sv-collection-bundle__option.is-active .sv-collection-bundle__option-detail {

    display: grid !important;

    width: 100%;

    min-width: 0;

    max-width: none;

    grid-template-columns:
        minmax(0, 1.15fr) minmax(320px, 0.85fr);

    gap: var(--sv-bundle-space-2xl);

    align-items: start;
}


/* =========================================
   LEVEL 3
   IMAGE
========================================= */

.sv-collection-bundle__option-media {
    width: 100%;

    min-width: 0;

    position: relative;
}


.sv-collection-bundle__option-image-frame {
    width: 100%;

    min-width: 0;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    position: relative;

    background: var(--sv-bundle-surface);
}


.sv-collection-bundle__option-image-frame::after {
    content: "";

    position: absolute;

    inset: 0;

    border: 1px solid rgba(255, 255, 255, 0.35);

    pointer-events: none;
}


.sv-collection-bundle__option-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================
   LEVEL 3
   INFORMATION
========================================= */

.sv-collection-bundle__option-information,
.sv-collection-bundle__option-content {

    width: 100%;

    min-width: 0;

    max-width: 520px;

    padding-top: var(--sv-bundle-space-sm);
}


/* =========================================
   INCLUDED ITEMS
========================================= */

.sv-collection-bundle__option-included {
    width: 100%;

    min-width: 0;

    margin-top: var(--sv-bundle-space-xl);

    padding-top: var(--sv-bundle-space-lg);

    border-top: 1px solid var(--sv-bundle-line);
}


.sv-collection-bundle__option-included-list {
    width: 100%;

    min-width: 0;

    display: grid;

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

    column-gap: var(--sv-bundle-space-md);

    row-gap: var(--sv-bundle-space-sm);
}


.sv-collection-bundle__option-included-item {
    min-width: 0;

    display: grid;

    grid-template-columns:
        64px minmax(0, 1fr) auto;

    align-items: center;

    gap: var(--sv-bundle-space-sm);

    padding:
        var(--sv-bundle-space-sm) 0;

    border-bottom: 1px solid var(--sv-bundle-line);

    text-decoration: none;

    position: relative;

    transition:
        border-color var(--sv-bundle-transition);
}


.sv-collection-bundle__option-included-image-frame {
    width: 64px;

    min-width: 0;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    position: relative;

    background: var(--sv-bundle-surface);
}


.sv-collection-bundle__option-included-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* -----------------------------------------
   Included Item Arrow
----------------------------------------- */

.sv-collection-bundle__option-included-arrow {
    font-size: 14px;

    color: var(--sv-bundle-text-muted);

    transform: translate3d(0, 0, 0);

    transition:
        color var(--sv-bundle-transition),
        transform var(--sv-bundle-transition);
}


/* =========================================
   DESKTOP
========================================= */

@media (min-width: 1200px) {

    .sv-collection-bundle__bundle-choice {
        min-height: 680px;
    }


    .sv-collection-bundle__bundle-flow {
        padding-top: 144px;
        padding-bottom: 144px;
    }


    .sv-collection-bundle__options {
        column-gap: 96px;
        row-gap: 160px;
    }


    .sv-collection-bundle__option-detail {
        grid-template-columns:
            minmax(0, 1.15fr) minmax(320px, 0.85fr);

        gap: 112px;
    }


    .sv-collection-bundle[data-stream-state="option-detail"] .sv-collection-bundle__bundle.is-active .sv-collection-bundle__option.is-active .sv-collection-bundle__option-detail {

        grid-template-columns:
            minmax(0, 1.15fr) minmax(320px, 0.85fr);

        gap: 112px;
    }

}


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

@media (min-width: 750px) and (max-width: 1199px) {

    .sv-collection-bundle__bundle-choice {
        min-height: 560px;

        grid-template-columns:
            minmax(0, 1.4fr) minmax(260px, 0.75fr);

        gap: var(--sv-bundle-space-lg);
    }


    .sv-collection-bundle__bundle-flow {
        padding-top: 96px;
        padding-bottom: 96px;
    }


    .sv-collection-bundle__option-detail {
        grid-template-columns:
            minmax(0, 1fr) minmax(280px, 0.8fr);

        gap: 64px;
    }


    .sv-collection-bundle[data-stream-state="option-detail"] .sv-collection-bundle__bundle.is-active .sv-collection-bundle__option.is-active .sv-collection-bundle__option-detail {

        grid-template-columns:
            minmax(0, 1fr) minmax(280px, 0.8fr);

        gap: 64px;
    }

}


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

@media (max-width: 749px) {

    /* -------------------------------------
       Level 1
    ------------------------------------- */

    .sv-collection-bundle__bundle-choice {

        min-height: auto;

        grid-template-columns: 1fr;

        align-items: start;

        gap: var(--sv-bundle-space-lg);

        padding: var(--sv-bundle-space-sm);
    }


    .sv-collection-bundle__bundle-choice::before {

        top: var(--sv-bundle-space-sm);
        right: var(--sv-bundle-space-sm);

        width: 48px;
        height: 48px;
    }


    .sv-collection-bundle__bundle-choice-image-frame {
        aspect-ratio: 1 / 1;
    }


    .sv-collection-bundle__bundle-choice-content {

        max-width: none;

        padding:
            0 var(--sv-bundle-space-sm) var(--sv-bundle-space-lg);
    }


    /* -------------------------------------
       Level 2
    ------------------------------------- */

    .sv-collection-bundle__bundle-flow {

        padding:
            var(--sv-bundle-space-2xl) var(--sv-bundle-space-sm);
    }


    .sv-collection-bundle__bundle-header {

        max-width: none;

        margin-bottom: var(--sv-bundle-space-xl);
    }


    .sv-collection-bundle__options {

        grid-template-columns: 1fr;

        row-gap: var(--sv-bundle-space-2xl);
    }


    .sv-collection-bundle__option:nth-child(even) {

        margin-top: 0;
    }


    /* -------------------------------------
       Level 3
    ------------------------------------- */

    .sv-collection-bundle[data-stream-state="option-detail"] .sv-collection-bundle__bundle.is-active .sv-collection-bundle__options {

        display: block;

        width: 100%;
    }


    .sv-collection-bundle[data-stream-state="option-detail"] .sv-collection-bundle__bundle.is-active .sv-collection-bundle__option.is-active {

        width: 100%;

        min-width: 0;

        max-width: none;

        margin-top: 0;
    }


    .sv-collection-bundle__option-detail {

        grid-template-columns: 1fr;

        gap: var(--sv-bundle-space-xl);
    }


    .sv-collection-bundle[data-stream-state="option-detail"] .sv-collection-bundle__bundle.is-active .sv-collection-bundle__option.is-active .sv-collection-bundle__option-detail {

        grid-template-columns: 1fr;

        gap: var(--sv-bundle-space-xl);
    }


    .sv-collection-bundle__option-information,
    .sv-collection-bundle__option-content {

        max-width: none;

        padding-top: 0;
    }


    /* -------------------------------------
       Included Items
    ------------------------------------- */

    .sv-collection-bundle__option-included {

        margin-top: var(--sv-bundle-space-lg);

        padding-top: var(--sv-bundle-space-md);
    }


    .sv-collection-bundle__option-included-list {

        grid-template-columns: 1fr;

        row-gap: 0;
    }


    .sv-collection-bundle__option-included-item {

        grid-template-columns:
            56px minmax(0, 1fr) auto;

        padding:
            var(--sv-bundle-space-sm) 0;
    }


    .sv-collection-bundle__option-included-image-frame {

        width: 56px;
    }

}


/* =========================================
   INTERACTION
========================================= */

@media (hover: hover) {

    .sv-collection-bundle__bundle-choice:hover {

        border-color: var(--sv-bundle-line-strong);
    }


    .sv-collection-bundle__bundle-choice:hover .sv-collection-bundle__bundle-choice-image {

        transform: scale(1.015);
    }


    .sv-collection-bundle__option-choice:hover .sv-collection-bundle__option-choice-image {

        transform: scale(1.018);
    }


    .sv-collection-bundle__option-included-item:hover {

        border-color: var(--sv-bundle-line-strong);
    }


    .sv-collection-bundle__option-included-item:hover .sv-collection-bundle__option-included-arrow {

        color: var(--sv-bundle-accent);

        transform: translate3d(3px, -3px, 0);
    }

}