/*------------ Import ---------*/
@import url(./header-deut.css);

/* ==========================================================================
   DESIGN VARIABLES AND SPECIFIC DESIGN SYSTEM MANIFEST
   ========================================================================== */
:root {
    --color-slate-black: #0f1626;
    --color-slate-cool-muted: #5e6677;
    --color-glide-blue-primary: #0052ff;
    
    /* Exact Glassmorphism specs from Figma screen captures */
    --navbar-translucent-bg: rgba(226, 232, 240, 0.65);
    --navbar-translucent-border: rgba(255, 255, 255, 0.7);
    
    --capsule-pill-translucent-bg: rgba(248, 250, 252, 0.55);
    --capsule-pill-translucent-border: rgba(255, 255, 255, 0.6);
    --capsule-pill-drop-shadow: 0 28px 56px rgba(15, 22, 38, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}




/* ==========================================================================
   PRIMARY HERO DISPLAY LAYER BLOCK PROPERTIES
   ========================================================================== */
.viewport-hero-block-wrapper {
    height: 88vh; /* Reduced marginally to ensure perfect overlap flow into loop block grid view */
    width: 100%;
    background-color: #e2e8f0;
}

.canvas-image-backdrop-plate {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 70%;
    background-repeat: no-repeat;
    z-index: 1;
}

.canvas-image-backdrop-plate::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.11) 100%);
    z-index: 1; 
}

.z-index-content {
    z-index: 10;
}

.content-alignment-bounding-box {
    padding-left: 72px !important;
    padding-right: 72px !important;
    padding-bottom: 12vh; /* Holds content elegantly centered off the screen fold */
}

.tag-badge-layout-container {
    margin-bottom: 20px;
}

.micro-capsule-badge-pill {
    background-color: #858685;
    color: #FAFAFA;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 10px 20px;
    border-radius: 100px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-family: "Inter", sans-serif;
}

.hero-primary-display-title {
    font-size: 60px;
    font-weight: 600;
    letter-spacing: -0.026em;
    line-height: 1.1;
    color: #FAFAFA;
    margin-bottom: 16px;
    font-family: "Outfit", sans-serif;
}

.hero-secondary-supporting-pitch {
    font-size: 20.5px;
    line-height: 37px;
    color: #FAFAFA;
    font-weight: 400;
    font-family: "Inter", sans-serif;
}

/* ==========================================================================
   INTERACTION BRIDGE MODULE CONFIGURATION SPECS
   ========================================================================== */
.z-index-bridge {
    z-index: 100;
}

.contents-maxwidth-limiter {
    max-width: 1440px;
    margin-right: auto;
    margin-left: auto;
}

.interlocking-features-strip-wrapper {
    margin-top: -56px; /* High-precision negative margin pulling container to overlap exactly between two worlds */
    padding: 0 16px;
}

.high-fidelity-frosted-capsule-bar {
    background: var(--capsule-pill-translucent-bg);
    backdrop-filter: blur(32px) saturate(125%);
    -webkit-backdrop-filter: blur(32px) saturate(125%);
    border: 1px solid #FFFFFF7A;
    border-radius: 60px;
    padding: 26px 56px;
    box-shadow: var(--capsule-pill-drop-shadow);
    width: 100%;
    box-shadow: 0px 4px 40px 0px #999AA752;
    font-family: "Outfit", sans-serif;
}

.capsule-value-segment-cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.segment-graphic-icon-frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.segment-primary-heading {
    font-size: 16px;
    font-weight: 500;
    color: #1A1A1A;
    letter-spacing: 1.57px;
}

.segment-secondary-subtext {
    font-size: 14.5px;
    font-weight: 500;
    color: #66677B;
    margin-top: 2px;
    letter-spacing: 1.57px;
}

.capsule-vertical-hairline-divider {
    width: 1px;
    height: 28px;
    background-color: #999AA7;
    /* margin: 0 40px; */
    flex-shrink: 0;
    position: absolute;
    /* top: 50%; */
    /* transform: translateY(-50%); */
    right: 0;
}

/* ==========================================================================
   CATALOG GRID STYLING ENTRY DECK
   ========================================================================== */
.product-collection-catalog-showcase {
    padding-top: 100px; /* Generous breathing buffer to map elements beneath bridge modules */
    padding-bottom: 120px;
    background-color: #ffffff;
}

.catalog-section-headline-block-row {
    margin-bottom: 20px;
}

.catalog-section-main-heading {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-slate-black);
    letter-spacing: -0.02em;
}

/* ==========================================================================
   ADAPTIVE MEDIA ENGINE RESPONSIVE COMPASS RULESETS
   ========================================================================== */
@media (max-width: 1200px) {
    .navigation-master-header {
        padding: 16px 16px 0 16px;
    }
    .content-alignment-bounding-box {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    .high-fidelity-frosted-capsule-bar {
        padding: 24px 32px;
    }
    .capsule-vertical-hairline-divider {
        margin: 0 24px;
    }
}

@media (max-width: 991.98px) {
    .hero-primary-display-title {
        font-size: 44px;
    }
    .catalog-section-main-heading {
        font-size: 24px;
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    .navigation-master-header {
        padding: 12px 12px 0 12px;
    }
    .custom-navbar-capsule-frame {
        padding: 0 16px;
    }
    .content-alignment-bounding-box {
        padding-left: 16px !important;
        padding-right: 16px !important;
        text-align: center;
    }
    .interlocking-features-strip-wrapper {
        margin-top: -32px;
    }
    .high-fidelity-frosted-capsule-bar {
        border-radius: 24px;
        padding: 24px;
        gap: 20px;
        align-items: flex-start;
    }
    .capsule-value-segment-cell {
        width: 100%;
    }
}
/* ----------------------------------------------------------------------------------------- */
/* ==========================================================================
     GLIDE ENGINE UTILITY ENGINE GRAPH MATRIX STYLES
   ========================================================================== */
.glide-mobility-collection-section {
    background-color: #fcfcfd; 
}

.collection-section-main-title {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.025em;
}

/* Base structural surface configuration for edge-to-edge assets */
.glide-showcase-card {
    background-color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 44px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.015), 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: "Inter", sans-serif;
}

.glide-showcase-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(17, 24, 39, 0.04);
}

.z-index-content {
    z-index: 5;
}

/* ==========================================================================
   UNIFIED ABSOLUTE BACKGROUND ENGINE SPEC RULES
   ========================================================================== */
.card-studio-render-bg-layer {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    image-rendering: -webkit-optimize-contrast;
}

/* Typography Tokens */
.card-micro-badge-pill {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.08em;
	color: #66677B;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 17px;
    font-family: "Inter", sans-serif;
}
.featured-wide-card-layout .product-branding-title-headline{font-size: 60px;}
.product-branding-title-headline {
    font-size: 32px;
    font-weight: 600;
    color: #1A1A1A;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    font-family: "Inter", sans-serif;
}

.featured-wide-card-layout .product-marketing-tagline{   font-size: 20px;}
.product-marketing-tagline {
    font-size: 16px;
    font-weight: 400;
	color: #4F4F4FE5;
    margin-bottom: 0;
    font-family: "Inter", sans-serif;
}

.pricing-index-matrix-container {
    display: flex;
    flex-direction: column;
}
/* Metadata Text Elements */
.featured-wide-card-layout .pricing-index-matrix-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-family: "Inter", sans-serif;
}

.price-qualifier-meta-text {
    font-size: 14px;
    font-weight: 600;
    color: #1A1A1A;
    text-transform: capitalize;
    letter-spacing: 0.02em;
}

.price-currency-value-display {
    font-size: 14px;
    font-weight: 600;
    color: #1A1A1A;
    margin-top: 1px;
}

/* ==========================================================================
   CARD VARIANTS STRUCTURAL SPECIFIC SPECS
   ========================================================================== */
/* Featured 100% Width Layout Banner Block */
.featured-wide-card-layout {
    min-height: 550px;
}

.featured-wide-card-layout .product-branding-title-headline {
    font-size: 60px;
    line-height: 1;
}

/* Standard 50% Width Grid Elements Splitter */
.standard-grid-cell-card {
    min-height: 369px; /* Enhanced baseline spacing layout canvas */
    /* font-family: "Inter", sans-serif; */
}

/* Standard cards need the background positioning custom tailored for perfect composition */
.standard-grid-cell-card .card-studio-render-bg-layer {
    background-size: cover;
    background-position: center right; 
}

/* Right-aligned Sticky Variant Panels */
.desktop-variant-sidebar-panel {
    top: 48px;
    right: 48px;
}

.variant-stacked-matrix-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 !important;
    justify-content: left;
    align-items: start;
    text-align: left !important;
}

.variant-node-item {
    font-size: 14px;
    font-weight: 400;
    color: #66677B;
    cursor: pointer;
    transition: color 0.2s ease;
}

.variant-node-item.active-variant-node {
    font-weight: 700;
    color: #111827;
    border-bottom: 2px solid #111827;
    padding-bottom: 2px;
    display: inline-block;
    align-self: flex-end;
}

/* Actions Elements Styling Framework */
.capsule-pill-explore-cta-button {
    background-color: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.capsule-pill-explore-cta-button:hover {
    background-color: #111827 !important;
    color: #ffffff !important;
    border-color: #111827 !important;
}

.inline-variant-selector-row-bar {
    z-index: 10;
    position: relative;
}

.inline-node-option {
    font-size: 13px;
    font-weight: 400;
    color: #66677B;
    cursor: pointer;;
    transition: color 0.2s ease;
}

.inline-node-option.active-inline-option {
    font-weight: 700;
    color: #111827;
    border-bottom: 2px solid #111827;
    padding-bottom: 1px;
}

.inline-node-hairline-divider {
    font-size: 12px;
    color: #e5e7eb;
    pointer-events: none;
}

.circular-vector-arrow-action-button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #0ea5e9;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.circular-vector-arrow-action-button:hover {
    background-color: #0284c7;
    color: #ffffff;
    transform: scale(1.06);
}

/* ==========================================================================
   MEDIA SCALING SYSTEM OPERATIONAL BREAKPOINTS
   ========================================================================== */
@media (max-width: 767.98px) {
    .glide-showcase-card {
        padding: 36px 24px;
    }
    .featured-wide-card-layout,
    .standard-grid-cell-card {
        min-height: auto;
        /* height: 100%; */
        /* padding: 0; */
    }
    .card-studio-render-bg-layer {
        /* position: relative; */
        /* height: 100%; */
        order: 2;
/*         background-size: 185%;
        background-position-x: 26%; */
background-size: 135%; background-position-x: revert-layer;
    }
    .card-meta-header-wrapper { order: 1; }
    .card-meta-footer-wrapper { order: 3; }
    

    .desktop-variant-sidebar-panel {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin-top: 16px;
        order: 4;
    }
    .variant-stacked-matrix-list {
        flex-direction: row;
        gap: 16px;
    }
}

/* ==========================================================================
   GLIDE GLOBAL BASE OVERLAYS
   ========================================================================== */
.glide-accessories-collection-section {
    background-color: #ffffff;
}

.collection-section-main-title {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
}

/* Base Card Layout Wrapper */
.glide-accessory-card {
    background-color: #f4f5f8; /* Matches the clean warm grey profile background */
    border: none;
    border-radius: 24px;
    padding: 32px 28px;
    min-height: 320px; /* Locks all cards to an identical structural size profile */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glide-accessory-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
}

.z-index-content {
    z-index: 5;
}

/* ==========================================================================
   GLIDE ACCESSORIES PRODUCTION SYSTEM
   ========================================================================== */
.glide-accessories-collection-section {
    background-color: #fcfcfd;
}

/* Accessory Hierarchy Micro Tuning */
.accessory-grid-cell-card {
    /* min-height: 340px; */ /* Highly optimized baseline proportion for 4-column arrays */
    padding: 36px 16px; /* Margins narrowed specifically to balanced cross-column ratios */
}

.accessory-title {
    font-size: 20px; /* Reduced scale token to comfortably hold layout headers across single text rows */
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 7px;
}

.accessory-sub {
    font-size: 12.5px;
    color: #66677B;
    margin-top: 4px;
}

/* Ensure background assets align optimally behind narrow structural bounds */
.accessory-grid-cell-card .card-studio-render-bg-layer {
    background-size: cover;
    background-position: bottom right; /* Pin tool assets securely to the card bottom right corners */
}

/* ==========================================================================
   RESPONSIVE COMPRESSION HANDLERS
   ========================================================================== */
@media (max-width: 991.98px) {
    .accessory-grid-cell-card {
        min-height: 380px; /* Restoring wider spatial height on double row grid states */
    }
}

@media (max-width: 767.98px) {
    .accessory-grid-cell-card {
        min-height: auto;
    }
    .accessory-grid-cell-card .card-studio-render-bg-layer {
        /* position: relative; */
        /* height: 200px; */
        /* background-position: center center !important; */
        /* margin-top: 20px; */
        order: 2;
    }
    /* Balanced DOM re-ordering workflow rules for explicit touch targets on viewport collapse */
    .accessory-grid-cell-card .card-meta-header-wrapper { order: 1; }
    .accessory-grid-cell-card .card-meta-footer-wrapper { order: 3; }
}




.featured-wide-card-layout .card-meta-footer-wrapper {
    flex-direction: column;
}


.standard-grid-cell-card .card-meta-footer-wrapper {
    flex-direction: column;
    align-items: start !important;
    gap: 13px;
}



.accessory-grid-cell-card .card-meta-footer-wrapper {
    flex-direction: column;
    align-items: flex-start !important;
}


.accessory-grid-cell-card .price-currency-value-display {
    font-size: 11px;
    font-weight: 400;
}

.accessory-grid-cell-card .price-qualifier-meta-text {
    font-size: 11px;
    font-weight: 400;
}

.accessory-grid-cell-card .wrap_price{align-items: center; gap: 3px !important;}

/* ---------------------------------------------- */

@media (max-width: 767.98px) {
.capsule-value-segment-cell {

    justify-content: flex-start;

}
	
h3.product-branding-title-headline {font-size: 20px;}

.product-branding-title-headline {
    font-size: 20px;
}

h3.product-branding-title-headline {
    font-size: 20px !important;
}

p.product-marketing-tagline {
    font-size: 12px !important;
}

.capsule-pill-explore-cta-button {
    padding: 8px 20px !important;
    font-size: 12px;
    position: absolute;
    right: 0px;
    /* bottom: 18px; */
}

.card-meta-footer-wrapper {
    flex-direction: row !important;
}	
	
}


.row.header-titles-row-alignment {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}