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

Space Vanta Theme 1.0

Module:
Collection Bundle Stream

File:
base.css

Version:
1.2

Purpose:
Brand Visual Foundation

Phase:
Brand Visual Optimization 1.0
Phase 02 — Spatial Material

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


/* =========================================
   BRAND FOUNDATION
========================================= */

.sv-collection-bundle {

    /* -------------------------------------
       Layout
    ------------------------------------- */

    --sv-bundle-max-width: 1440px;
    --sv-bundle-content-width: 1280px;


    /* -------------------------------------
       Spatial Scale
    ------------------------------------- */

    --sv-bundle-space-xs: 12px;
    --sv-bundle-space-sm: 20px;
    --sv-bundle-space-md: 32px;
    --sv-bundle-space-lg: 48px;
    --sv-bundle-space-xl: 72px;
    --sv-bundle-space-2xl: 112px;
    --sv-bundle-space-3xl: 160px;


    /* -------------------------------------
       Brand Surface
    ------------------------------------- */

    --sv-bundle-surface: #eceef0;
    --sv-bundle-surface-soft: #f5f6f7;
    --sv-bundle-surface-deep: #e2e5e8;


    /* -------------------------------------
       Brand Line
    ------------------------------------- */

    --sv-bundle-line: rgba(88, 98, 108, 0.18);
    --sv-bundle-line-medium: rgba(88, 98, 108, 0.28);
    --sv-bundle-line-strong: rgba(76, 86, 98, 0.44);


    /* -------------------------------------
       Typography
    ------------------------------------- */

    --sv-bundle-text: #20242a;
    --sv-bundle-text-soft: #5f6873;
    --sv-bundle-text-muted: #89919a;

    --sv-bundle-eyebrow-spacing: 0.16em;


    /* -------------------------------------
       Brand Accent
    ------------------------------------- */

    --sv-bundle-accent: #66798c;
    --sv-bundle-accent-soft: #9aa9b7;


    /* -------------------------------------
       Material
    ------------------------------------- */

    --sv-bundle-metal-light:
        linear-gradient(135deg,
            #f5f6f7 0%,
            #d9dde1 46%,
            #eef0f2 100%);

    --sv-bundle-metal-dark:
        linear-gradient(135deg,
            #bfc5cb 0%,
            #8d969f 52%,
            #d4d8dc 100%);


    /* -------------------------------------
       Interaction
    ------------------------------------- */

    --sv-bundle-transition: 280ms cubic-bezier(0.22, 1, 0.36, 1);
    --sv-bundle-transition-slow: 520ms cubic-bezier(0.22, 1, 0.36, 1);


    /* -------------------------------------
       Foundation
    ------------------------------------- */

    width: 100%;
    position: relative;

    box-sizing: border-box;
}


/* =========================================
   GLOBAL BOX MODEL
========================================= */

.sv-collection-bundle *,
.sv-collection-bundle *::before,
.sv-collection-bundle *::after {
    box-sizing: border-box;
}


/* =========================================
   STREAM
========================================= */

.sv-collection-bundle__stream {
    width: 100%;
    max-width: var(--sv-bundle-max-width);

    margin: 0 auto;

    position: relative;
}


/* =========================================
   STRUCTURAL BASE
========================================= */

.sv-collection-bundle__bundle,
.sv-collection-bundle__bundle-flow,
.sv-collection-bundle__options,
.sv-collection-bundle__option {
    width: 100%;
    position: relative;
}


/* =========================================
   BUTTON FOUNDATION
========================================= */

.sv-collection-bundle button {
    font: inherit;
    color: inherit;

    margin: 0;
}


/* =========================================
   IMAGE FOUNDATION
========================================= */

.sv-collection-bundle img {
    max-width: 100%;
    vertical-align: middle;
}


/* =========================================
   LINK FOUNDATION
========================================= */

.sv-collection-bundle a {
    color: inherit;
}


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

.sv-collection-bundle__bundle-choice,
.sv-collection-bundle__option-choice,
.sv-collection-bundle__option-included-item {
    -webkit-tap-highlight-color: transparent;
}


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

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

    .sv-collection-bundle *,
    .sv-collection-bundle *::before,
    .sv-collection-bundle *::after {
        scroll-behavior: auto;
    }

}