:root {
    /* AAA DME - New Color Palette */
    --navy-dark: #03231c;
    --navy-medium: #0a2e26;
    --blue-primary: #0e3f34;
    --blue-secondary: #0a2e26;
    --accent-blue: #22c55e;

    /* Semantic Text and Utility Colors */
    --text-light: #E9EDF0;
    --text-muted: #98A1A9;
    --gray-blue: #4C5F6F;

    /* Base Standard Colors (No hardcoded # allowed) */
    --white: #ffffff;
    --black: #000000;
    --text-dark: #111111;
    --text-gray-dark: #333333;
    --text-gray-medium: #555555;
    --text-gray-light: #666666;
    --text-gray-placeholder: #888888;

    /* Background & Border Grays */
    --bg-light: #f7f7f7;
    --bg-alt: #f4f5f4;
    --bg-card: #f5f5f5;
    --bg-panel: #f6f6f6;
    --bg-ticker: #ededed;
    --bg-gray-light: #f0f0f0;

    --border-light: #eaeaea;
    --border-medium: #e2e2e2;
    --border-dark: #e0e0e0;
    --border-gray: #777777;

    /* Alerts & States */
    --red-alert: #ef4444;
    --orange-warn: #ea580c;
    --green-success: #4ade80;

    /* Transparencies & Glassmorphism */
    --accent-blue-trans: rgba(2, 108, 195, 0.06);
    --navy-dark-trans: rgba(0, 28, 50, 0.96);
    --white-trans-03: rgba(255, 255, 255, 0.03);
    --white-trans-09: rgba(255, 255, 255, 0.09);
    --white-trans-04: rgba(255, 255, 255, 0.04);
    --white-trans-15: rgba(255, 255, 255, 0.15);
    --white-trans-60: rgba(255, 255, 255, 0.6);
    --white-trans-70: rgba(255, 255, 255, 0.7);

    /* Spacing System */
    --spacing-none: 0;
    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
    --spacing-10: 10px;
    --spacing-12: 12px;
    --spacing-14: 14px;
    --spacing-base: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;
    --spacing-28: 28px;
    --spacing-xxl: 32px;
    --spacing-36: 36px;
    --spacing-3xl: 40px;
    --spacing-4xl: 48px;
    --spacing-56: 56px;
    --spacing-64: 64px;
    --spacing-5xl: 80px;
    --spacing-6xl: 100px;
    --spacing-7xl: 120px;

    /* Typography & Transitions */
    --font-family: 'Plus Jakarta Sans', sans-serif;
    --transition-smooth: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    --bezier-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-cubic: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);

    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-blur: blur(16px);
}

/* ==========================================
   CORE DESIGN SYSTEM ROOT
   ========================================== */


* {
    margin: var(--spacing-none);
    padding: var(--spacing-none);
}

/* Global Reset Tweaks */
body {
    font-family: var(--font-family);
    background-color: var(--bg-light);
}

.container {
    width: 100%;
    max-width: 1320px;
    margin: var(--spacing-none) auto;
    padding: var(--spacing-none) var(--spacing-xxl);
}

/* ==========================================
   PREMIUM GLASS ANNOUNCEMENT HEADER ENGINE
   ========================================== */
.top-announcement-header.glass-premium-announcement {
    width: 100%;
    position: absolute;
    z-index: 1100;
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    padding: var(--spacing-14) var(--spacing-none);
    display: flex;
    align-items: center;
    justify-content: center;
}

.announcement-content-track {
    width: 100%;
    max-width: 1320px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.announcement-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--white);
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.2;
    margin: var(--spacing-none);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Fluid responsive padding adjustments for mobile screen targets */
@media (max-width: 768px) {
    .top-announcement-header.glass-premium-announcement {
        padding: var(--spacing-10) var(--spacing-base);
    }

    .announcement-text {
        font-size: 11.5px;
        line-height: 1.3;
    }
}

.container {
    width: auto;
}

.main-navigation-navbar {
    position: absolute;
    top: 43px;
    left: 0;
    width: 100%;
    z-index: 999;
    padding: var(--spacing-xl) var(--spacing-none);
    background: transparent;
    transition: all 0.4s ease;
    /* margin-top: var(--spacing-10); */
}

.nav-flex-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--white);
    text-decoration: none;
    line-height: 1;
}

.nav-sub-logo {
    display: block;
    font-size: 8.5px;
    letter-spacing: 1.5px;
    color: var(--accent-blue);
    margin-top: var(--spacing-xs);
}

.nav-links-menu {
    display: none;
    gap: var(--spacing-xxl);
}

.status-progress-timeline-wrapper {
    width: auto !important;
}

@media (min-width: 992px) {
    .nav-links-menu {
        display: flex;
    }
}

.menu-link {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    padding: var(--spacing-xs) var(--spacing-none);
}

.menu-link.active {
    color: var(--white);
}

.menu-link:hover {
    color: var(--accent-blue);
}

/* Subtle dot layout active indicator directly from video frame references */
.menu-link.active::after {
    content: '•';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--accent-blue);
    font-size: 14px;
}

.nav-action-side {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.btn-view-cart {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--accent-blue);
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
    border-radius: 100px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-view-cart span {
    margin-right: var(--spacing-12);
}

.cart-arrow-badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--white);
    color: var(--blue-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

.btn-view-cart:hover {
    background-color: var(--navy-dark);
}

.btn-view-cart:hover .cart-arrow-badge {
    background-color: var(--accent-blue);
    color: var(--white);
    transform: translate(2px) rotate(45deg);
}

/* Mobile responsive menu toggle track bars */
.mobile-menu-trigger-btn {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
}

@media (min-width: 992px) {
    .mobile-menu-trigger-btn {
        display: none;
    }
}

@media (max-width: 992px) {
    .profile-btn {
        display: none !important;
    }
}

@media (max-width: 767px) {

    .auth-modal-overlay,
    .request-modal-overla {
        width: auto !important;
    }
}

.mobile-menu-trigger-btn span {
    width: 22px;
    height: 2px;
    background-color: var(--white);
    transition: transform 0.3s ease;
}

/* ==========================================
   CINEMATIC 3D OVERLAY HERO COMPONENT SECTION
   ========================================== */
.cinematic-hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 720px;
    /* background-color: var(--navy-dark); */
    overflow: hidden;
}

.hero-underlying-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: contain;
    z-index: 2;
}

.hero-darkening-fallback-tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 28, 50, 0.25);
    /* Blends background elements gracefully */
    z-index: 3;
}

/* THE DIAGONAL REVEAL TRANSITION ENGINE OVERLAY MASK */
.hero-diagonal-transition-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

.diagonal-mask-svg {
    width: 100%;
    height: 100%;
}

.mask-pane-left {
    transform-origin: left center;
    animation: slideOutDiagonalLeft 1.4s cubic-bezier(0.76, 0, 0.24, 1) forwards;
    will-change: transform;
}

.mask-pane-right {
    transform-origin: right center;
    animation: slideOutDiagonalRight 1.4s cubic-bezier(0.76, 0, 0.24, 1) forwards;
    will-change: transform;
}

/* Precise CSS path mapping animations metrics to open video panel diagonally */
@keyframes slideOutDiagonalLeft {
    0% {
        transform: translate3d(0, 0, 0) scaleX(1);
        opacity: 1;
    }

    100% {
        transform: translate3d(-30%, 0, 0) scaleX(0.8);
        opacity: 0;
    }
}

@keyframes slideOutDiagonalRight {
    0% {
        transform: translate3d(0, 0, 0) scaleX(1);
        opacity: 1;
    }

    100% {
        transform: translate3d(30%, 0, 0) scaleX(0.8);
        opacity: 0;
    }
}

/* ==========================================
   HERO DISPLAY MASTER CONTENT ALLOCATION GRID
   ========================================== */
.hero-content-container-grid {
    position: relative;
    z-index: 5;
    /* Forces typography rows to sit cleanly over video masks */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--spacing-6xl);
    /* Cushion allowance for navigation absolute panels */

    /* Initial content hidden state waiting on diagonal mask translation sweep path */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInHeroContent 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

@keyframes fadeInHeroContent {
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-main-h1-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(38px, 6.2vw, 72px);
    font-weight: 600;
    line-height: 1.08;
    color: var(--white);
    letter-spacing: -2px;
    margin-bottom: var(--spacing-56);
}

/* Lower split column segments row mapping mechanics */
.hero-lower-details-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4xl);
    align-items: flex-end;
}

@media (min-width: 992px) {
    .hero-lower-details-split {
        grid-template-columns: 6fr 6fr;
        /* 1:1 balance row split allocation tracking image */
    }
}

/* Left Stack: Feature Items interaction layout rules */
.hero-features-column-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.hero-feature-interactive-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: var(--spacing-sm) var(--spacing-none);
}

.hero-row-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.hero-row-icon-circle svg {
    width: 18px;
    height: 18px;
}

.hero-row-text-block h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: var(--spacing-xxs);
}

.hero-row-text-block p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.3s ease;
}

/* Feature Item Hover highlighting transitions */
.hero-feature-interactive-row:hover .hero-row-icon-circle {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--navy-dark);
    transform: scale(1.05);
}

.hero-feature-interactive-row:hover .hero-row-text-block p {
    color: var(--white);
}

/* Right Stack Summary Action blocks design */
.hero-summary-action-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

@media (min-width: 992px) {
    .hero-summary-action-block {
        align-items: flex-end;
        /* Flushes text blocks flush right edge on wide desktops matching picture layout */
        text-align: right;
    }
}

.hero-summary-statement {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(22px, 3.2vw, 36px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--white);
    letter-spacing: -0.8px;
    margin-bottom: var(--spacing-xxl);
    max-width: 460px;
}

/* Hero Primary White Base Action Button Trigger Component */
.btn-hero-order-products {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--navy-dark);
    /* Contrast white fill button */
    color: var(--white);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
    border-radius: 100px;
    border: 1px solid var(--navy-dark);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    width: fit-content;
}

.btn-hero-order-products span {
    margin-right: var(--spacing-base);
}

.hero-order-btn-arrow-badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--accent-blue);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

.btn-hero-order-products:hover {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.btn-hero-order-products:hover .hero-order-btn-arrow-badge {
    transform: translate(2px) rotate(45deg);
    background-color: var(--navy-dark);
    background-color: var(--navy-dark);
}

/* ==========================================
   ABOUT SECTION LAYOUT & GRADIENT DESIGN
   ========================================== */
.about-us-section {
    position: relative;
    width: 100%;
    background-color: var(--bg-alt);
    /* Subtle off-white baseline background color layout */
    padding: var(--spacing-5xl) var(--spacing-none);
    overflow: hidden;
}

@media (min-width: 992px) {
    .about-us-section {
        padding: var(--spacing-7xl) var(--spacing-none);
    }
}

/* Precision Top-Right Corner Mint / Turquoise Gradient Light Effect */
.about-bg-gradient-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 50vw;
    height: 100%;
    background: radial-gradient(circle at 100% 0%, rgba(2, 108, 195, 0.22) 0%, rgba(0, 74, 132, 0.05) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Header Text Alignments */
.about-header-wrapper {
    position: relative;
    z-index: 5;
    margin-bottom: var(--spacing-56);
}

.discover-tag {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-lg);
    color: var(--accent-blue);
}

.about-main-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(32px, 4.8vw, 54px);
    font-weight: 600;
    line-height: 1.12;
    color: var(--text-dark);
    letter-spacing: -1.5px;
}

/* ==========================================
   UPDATED: CONTINUOUS ULTRA-SMOOTH INFINITE TRACK ENGINE
   ========================================== */
.about-slider-window {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 5;
    margin-bottom: var(--spacing-4xl);
    display: flex;
    padding-top: var(--spacing-10);
}

.about-slider-track {
    display: flex;
    gap: var(--spacing-lg);
    width: max-content;
    flex-wrap: nowrap;
    animation: smoothAboutMarquee 12s linear infinite;
}

/* Halts the continuous crawl instantly when the mouse enters the card module field */
.about-slider-window:hover .about-slider-track {
    animation-play-state: paused;
}

/* Width matrix remains precise and responsive */
.about-graphic-card {
    width: calc(100vw - 48px);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.02);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .about-graphic-card {
        width: calc((100vw - 68px) / 2);
    }
}

@media (min-width: 1024px) {
    .about-graphic-card {
        width: 392px;
    }
}

.card-full-graphic {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.about-graphic-card:hover {
    transform: translateY(-4px) scale(1.01);
}

/* 1:1 Seamless Continuous Loop Translation Animation */
@keyframes smoothAboutMarquee {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        /* Translates by exactly half the container row nodes track length */
        transform: translate3d(calc(-50% - 10px), 0, 0);
    }
}

/* ==========================================
   BOTTOM DETAILS SECTION LAYOUT ALIGNMENTS
   ========================================== */
.about-bottom-flex-row {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

@media (min-width: 992px) {
    .about-bottom-flex-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.about-bottom-summary {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-dark);
    font-weight: 500;
    letter-spacing: -0.2px;
}

.btn-view-about-more {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--navy-dark);
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
    border-radius: 100px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--navy-dark);
}

.btn-view-about-more span {
    margin-right: var(--spacing-base);
}

.about-link-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--accent-blue);
    color: var(--navy-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

.btn-view-about-more:hover {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--white);
}

.btn-view-about-more:hover .about-link-arrow {
    transform: translate(2px) rotate(45deg);
    background-color: var(--navy-dark);
    color: var(--white);
}

/* ==========================================
   INFINITE MARQUEE TICKER BANNER
   ========================================== */
.ticker-banner-section {
    width: 100%;
    background-color: var(--bg-ticker);
    /* Matches the exact warm, clean gray block background */
    border-top: 1.5px solid rgba(0, 0, 0, 0.1);
    /* Subtle top boundary line layout */
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.1);
    /* Subtle bottom boundary line layout */
    padding: var(--spacing-xl) var(--spacing-none);
    /* Vertical spacing alignment */
    overflow: hidden;
    position: relative;
}

.ticker-container {
    width: 100%;
    display: flex;
    overflow: hidden;
}

.ticker-scroll-track {
    display: flex;
    width: max-content;
    flex-wrap: nowrap;
}

.ticker-group {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-width: 100%;
    /* Using translate3d locks the element to the hardware GPU to fix prototype lagging */
    animation: marqueeLoop 28s linear infinite;
}

/* Individual Content Item Block formatting */
.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-12);
    /* Spacing between icon, text, and badge */
    padding: var(--spacing-none) var(--spacing-10);
    /* Layout horizontal spacing padding rules */
    white-space: nowrap;
}

@media (max-width: 768px) {
    .ticker-item {
        padding: var(--spacing-none) var(--spacing-xl);
        gap: var(--spacing-12);
    }
}

/* Rounded Radial Icon Container Asset */
.ticker-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-dark);
}

.ticker-icon svg {
    width: 16px;
    height: 16px;
    animation: slowSpin 12s linear infinite;
    /* Keeps the asset rotating gracefully */
}

/* Exact typography replication */
.ticker-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 19px;
    font-weight: 500;
    color: var(--text-dark);
    letter-spacing: -0.3px;
}

@media (max-width: 768px) {
    .ticker-text {
        font-size: 16px;
    }
}

/* High-contrast Cyan Pill Badge */
.ticker-badge {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--navy-dark);
    background-color: var(--accent-blue);
    /* The specific rich cyan block accent fill from reference image */
    padding: var(--spacing-xs) var(--spacing-12);
    border-radius: 100px;
    display: inline-block;
    line-height: 1.4;
}

/* ==========================================
   MASTER SECTIONS VARIABLES MANAGEMENT
   ========================================== */


.features-categories-master {
    width: 100%;
    position: relative;
    /* background-color: var(--navy-dark); */
}

/* ==========================================
   A. FEATURE HOVER CARDS (SLIDE UP OVERLAY IMAGE ENGINE)
   ========================================== */
.features-inset-row {
    position: relative;
    z-index: 20;
    margin-bottom: -1px;
}

.features-grid-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(345px, 1fr));
    background-color: var(--bg-card);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.feature-hover-card {
    position: relative;
    background-color: var(--bg-card);
    padding: var(--spacing-3xl) var(--spacing-xxl);
    min-height: 220px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-right: 1px dashed rgba(0, 0, 0, 0.12);
    /* Clean vertical dashed line markers split layout */
}

.feature-hover-card:last-child {
    border-right: none;
}

/* Hidden Absolute Slid-up Image Framework Mask */
.feature-overlay-img {
    position: absolute;
    top: 100%;
    /* Placed flush down past lower boundaries completely hidden initially */
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    z-index: 1;
    transition: var(--transition-cubic);
    opacity: 0;
}

/* Screen blending dark contrast filter on image layers to retain crisp textual readouts */
.feature-hover-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 2;
    opacity: 0;
    transition: var(--transition-cubic);
}

.feature-card-content {
    position: relative;
    z-index: 3;
    /* Elevated over slide transitions layer masks */
    transition: var(--transition-cubic);
}

.feature-icon {
    color: var(--text-dark);
    margin-bottom: var(--spacing-xl);
    transition: var(--transition-cubic);
}

.feature-card-content h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.2px;
    transition: var(--transition-cubic);
}

.feature-card-content p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-gray-medium);
    transition: var(--transition-cubic);
}

/* INTERACTIVE ACTIVE HOVER STATES (SLIDE PATH RULES) */
.feature-hover-card:hover .feature-overlay-img {
    top: 0;
    /* Smoothly snaps up filling container dimensions completely */
    opacity: 1;
}

.feature-hover-card:hover::after {
    opacity: 1;
}

.feature-hover-card:hover .feature-card-content h3,
.feature-hover-card:hover .feature-card-content p,
.feature-hover-card:hover .feature-icon {
    color: var(--white);
    /* Color inversion parameters run flawlessly matching design */
}

/* ==========================================
   B. THE MAIN CATEGORIES SECTION CAROUSEL STYLING
   ========================================== */
.categories-carousel-outer {
    padding: var(--spacing-6xl) var(--spacing-none) var(--spacing-none) var(--spacing-none);
    background-image: url('../images/images/category-bg.png');
    background-size: cover;
    background-position: center center;
    position: relative;
    width: 100%;
}

.category-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
    gap: var(--spacing-xxl);
}

.text-emerald {
    color: var(--accent-blue);
}

.cat-main-heading {
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 500;
    color: var(--white);
    letter-spacing: -1.5px;
    line-height: 1.1;
}

/* Precise Circular Stepper Dial Indicator */
.circular-progress-badge {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-ring-svg {
    transform: rotate(-90deg);
    /* Forces baseline starting fill orientation from apex center top */
}

.ring-circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1.5;
}

.ring-circle-fill {
    fill: none;
    stroke: var(--white);
    stroke-width: 1.5;
    stroke-dasharray: 226.19;
    /* Circumference rule calculation metric (2 * PI * r) */
    stroke-dashoffset: 226.19;
    /* Mutated linearly via JavaScript state index controls */
    transition: stroke-dashoffset 0.5s ease;
}

.progress-digits-label {
    position: absolute;
    font-size: 13px;
    font-weight: 500;
    color: var(--white);
}

/* ==========================================
   CAROUSEL INTERNAL WINDOW SLIDER CALCULATIONS
   ========================================== */
.cat-slider-window {
    width: 100%;
    overflow: hidden;
}

.cat-slider-track {
    display: flex;
    width: max-content;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.cat-slide-item {
    width: calc(100vw - 48px);
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    padding-right: var(--spacing-xl);
    /* Internal cushion space prevent track collision metrics */
}

.slide-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Split divider baseline rule */
    padding-bottom: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.meta-headline-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.pulse-heart-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}

.slide-title {
    font-size: clamp(24px, 3.5vw, 40px);
    font-weight: 500;
    color: var(--white);
    letter-spacing: -0.8px;
}

.slide-description {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    max-width: 540px;
    margin-bottom: var(--spacing-4xl);
}

/* Action Controls Rows alignment tools layout styling */
.slide-action-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.navigation-arrow-circles {
    display: flex;
    gap: var(--spacing-12);
}

.nav-arrow-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-cubic);
}

.nav-arrow-circle.active,
.nav-arrow-circle:hover {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--navy-dark);
}

/* Embedded Product Action Button structure elements */
.btn-order-now-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--white);
    color: var(--navy-dark);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
    border-radius: 100px;
    transition: var(--transition-cubic);
}

.btn-order-now-link span {
    margin-right: var(--spacing-base);
}

.order-link-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--navy-dark);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

.btn-order-now-link:hover {
    background-color: var(--accent-blue);
}

.btn-order-now-link:hover .order-link-arrow {
    transform: translate(2px) rotate(45deg);
}

.slide-graphic-hero-mask {
    width: 100%;
    aspect-ratio: 30 / 10;
    border-radius: 4px;
    overflow: hidden;
    /* background-color: rgba(255, 255, 255, 0.02); */
}

@media (max-width: 768px) {
    .slide-graphic-hero-mask {
        aspect-ratio: 16 / 10;
        /* Tightens layout box sizes gracefully for small break screens */
    }
}

.cat-main-display-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================
   FEATURED PRODUCTS SECTION
   ========================================== */
.products-section {
    /* padding: var(--spacing-5xl) var(--spacing-none); */
    background-color: var(--bg-panel);
    /* Standard light contrast surface */
    width: 100%;
    overflow: hidden;
}

@media (min-width: 992px) {
    .products-section {
        padding: var(--spacing-7xl) var(--spacing-none);
    }
}

/* Header Row & Static Filtering System Alignment */
.products-header-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    /* margin-bottom: var(--spacing-4xl); */
}

@media (min-width: 992px) {
    .products-header-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.products-main-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--text-dark);
    letter-spacing: -1.2px;
}

.products-filter-tabs {
    display: flex;
    gap: var(--spacing-12);
}

.filter-tab {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: var(--spacing-10) var(--spacing-xl);
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Tab Highlight micro-interactions */
.filter-tab:hover {
    background-color: var(--blue-secondary);
    color: var(--white);
    border-color: var(--accent-blue);
}

/* ==========================================
   SLIDING WINDOW MAPPING MECHANICS
   ========================================== */
.products-slider-window {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: var(--spacing-12) var(--spacing-xs);
    /* Eliminates shadow-clipping during scale operations */
}

.products-slider-track {
    display: flex;
    gap: var(--spacing-xl);
    width: max-content;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* Card Asset Grid Blueprint Proportions */
.product-card {
    background-color: var(--bg-panel);
    width: calc(100vw - 48px);
    max-width: 312px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.4s ease;
    cursor: pointer;
    padding: var(--spacing-10);
}

.product-image-container {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--spacing-base);
    background-color: var(--border-light);
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Meta, Title & Content Allocation rows */
.product-meta-row {
    margin-bottom: var(--spacing-md);
}

.rating-box {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 12px;
}

.stars {
    color: var(--blue-secondary);
    letter-spacing: 1px;
}

.rating-num {
    font-weight: 500;
    color: var(--text-gray-medium);
}

.product-title-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--spacing-md);
}

.product-title-row h3 {
    font-size: 19px;
    font-weight: 600;
    color: var(--text-dark);
    letter-spacing: -0.5px;
}

.price-label {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-dark);
}

.product-description {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-gray-medium);
    margin-bottom: var(--spacing-xl);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Primary Add To Cart Interface button components */
.btn-add-to-cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: var(--navy-dark);
    /* Deep core dark green layout background values */
    border: 1px solid var(--navy-dark);
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
    border-radius: 100px;
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
    margin-top: auto;
}

.cart-btn-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--accent-blue);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================
   HOVER INTERACTION PHYSICS
   ========================================== */
.product-card:hover .product-img {
    transform: scale(1.06);
}

.product-card:hover {
    box-shadow: 0 4px 12px rgba(2, 68, 119, 0.15);
}

.btn-add-to-cart:hover {
    background-color: var(--accent-blue);
    color: var(--white);
    border-color: var(--accent-blue);
}

.btn-add-to-cart:hover .cart-btn-arrow {
    background-color: var(--navy-dark);
    color: var(--white);
    transform: rotate(45deg);
    /* Arrow rotation physics track */
}

/* ==========================================
   BOTTOM NAVIGATION INTERACTION TIMELINE
   ========================================== */
.products-bottom-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-4xl);
    margin-bottom: var(--spacing-4xl);
}

.slider-progress-bar-container {
    width: 240px;
    height: 3px;
    background-color: var(--text-muted);
    border-radius: 10px;
    overflow: hidden;
}

.slider-progress-fill {
    width: 25%;
    /* Mutated dynamically via JS sliding calculations */
    height: 100%;
    background-color: var(--navy-dark);
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.slider-nav-buttons {
    display: flex;
    gap: var(--spacing-12);
}

.nav-arrow-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--white);
    border: none;
    color: var(--navy-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-arrow-btn.active {
    background-color: var(--blue-secondary);
    color: var(--white);
}

.nav-arrow-btn:hover {
    background-color: var(--accent-blue);
    color: var(--white);
}

.nav-arrow-btn:active {
    transform: scale(0.95);
}

/* ==========================================
   INTERACTIVE HOVER & LOOPS PHYSICS
   ========================================== */

/* Automatically halts the layout animation cleanly when mouse enters the field */
.ticker-banner-section:hover .ticker-group {
    animation-play-state: paused;
}

/* Infinite execution animation path */
@keyframes marqueeLoop {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/* Aesthetic rotational speed curve for the radial icon component */
@keyframes slowSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================
   PROCESS TIMELINE SECTION LAYOUT
   ========================================== */
.process-section {
    padding: var(--spacing-7xl) var(--spacing-none);
    position: relative;
    background-color: var(--bg-panel);
}

.process-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    position: relative;
}

@media (min-width: 992px) {
    .process-grid {
        grid-template-columns: 4.5fr 7.5fr;
        /* Matches typography ratio aspect */
    }
}

/* Sticky Left Layout Column */
.process-left {
    position: relative;
}

@media (min-width: 992px) {
    .process-left {
        position: sticky;
        top: 140px;
        height: fit-content;
    }
}

.asterisk-icon {
    width: 16px;
    height: 16px;
    color: var(--accent-blue);
}

.process-main-title {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 500;
    line-height: 1.08;
    color: var(--text-dark);
    letter-spacing: -1.5px;
}

/* Right Column & Vertical Tracker Track */
.process-right {
    position: relative;
    padding-left: var(--spacing-56);
    /* Space for line allocation */
}

.timeline-line {
    position: absolute;
    left: 18px;
    top: 20px;
    bottom: 60px;
    width: 2px;
    background-color: rgba(0, 0, 0, 0.08);
}

.timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    /* Updates smoothly on scroll run via JS */
    background: linear-gradient(to bottom, var(--blue-primary), var(--accent-blue));
    transition: height 0.1s linear;
}

/* Individual Item Framework rows */
.process-step-item {
    /* display: flex; */
    position: relative;
    margin-bottom: var(--spacing-4xl);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.process-step-item:last-child {
    margin-bottom: var(--spacing-none);
}

/* Circle Icon Container */
.icon-wrapper {
    position: absolute;
    left: -56px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--bg-gray-light);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-gray-dark);
    z-index: 2;
    transition: var(--transition-smooth);
}

.icon-wrapper svg {
    width: 18px;
    height: 18px;
    transition: var(--transition-smooth);
}

.step-content {
    padding-left: var(--spacing-base);
    transition: var(--transition-smooth);
}

.step-content h3 {
    font-size: 21px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.3px;
    transition: var(--transition-smooth);
}

.step-content p {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 580px;
    transition: var(--transition-smooth);
}

/* ==========================================
   HOVER & ACTIVE ANIMATION STYLINGS
   ========================================== */

/* State Modification classes applied manually or via track triggers */
.process-step-item:hover .icon-wrapper {
    background-color: var(--text-muted);
    color: var(--white);
    border-color: var(--text-muted);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(2, 68, 119, 0.15);
}

.process-step-item.active .icon-wrapper {
    background-color: var(--blue-primary);
    color: var(--white);
    border-color: var(--blue-primary);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(2, 68, 119, 0.15);
}

.process-step-item:hover .step-content h3,
.process-step-item.active .step-content h3 {
    color: var(--blue-primary);
}

.process-step-item.active .step-content p {
    color: var(--text-dark);
}

/* ==========================================
   TESTIMONIALS ALIGNMENT & STRUCTURAL LAYOUT
   ========================================== */
.testimonials-section {
    background-image: url('../images/images/testimonial-bg.png');
    /* background-color: var(--navy-dark); */
    background-size: cover;
    /* background-position: center center; */
    background-repeat: no-repeat;
    width: 100%;
    padding: 60px var(--spacing-none);
    overflow: hidden;
    position: relative;
}

@media (min-width: 992px) {
    .testimonials-section {
        padding: var(--spacing-6xl) var(--spacing-none) var(--spacing-7xl);
    }
}

.testimonial-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3xl);
    position: relative;
    z-index: 5;
}

@media (min-width: 1200px) {
    .testimonial-layout-grid {
        grid-template-columns: 4.8fr 7.2fr;
        /* Exact layout split */
        gap: var(--spacing-64);
        align-items: flex-start;
        /* Forces vertical alignment to lock to the top edge */
    }
}

/* Left Typography Container */
.testi-info-side {
    display: flex;
    flex-direction: column;
    padding-top: var(--spacing-none);
}

@media (min-width: 1200px) {
    .testi-info-side {
        position: sticky;
        top: 120px;
        /* Keeps the heading pinned elegantly if scrolled */
    }
}


.text-emerald {
    color: var(--white);
}


.testi-main-title {
    font-family: var(--font-family);
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--white);
    letter-spacing: -1.2px;
    margin-bottom: var(--spacing-xl);
}

.testi-desc {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: var(--spacing-36);
    max-width: 480px;
}

/* Order Products Button Element */
.btn-order-now {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    background-color: var(--accent-blue);
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
    border-radius: 100px;
    width: fit-content;
    border: 1px solid var(--accent-blue);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-order-now span {
    margin-right: var(--spacing-12);
}

.order-btn-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--navy-dark);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-order-now:hover {
    background-color: var(--navy-dark);
    border-color: var(--navy-dark);
    color: var(--white)
}

.btn-order-now:hover .order-btn-arrow {
    transform: translate(2px) rotate(45deg);
    background-color: var(--accent-blue);
}

/* ==========================================
   FIXED: MATRIX CARDS GRID & PLACEMENT ALIGNMENT
   ========================================== */
.testi-cards-side-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}

@media (min-width: 640px) {
    .testi-cards-side-grid {
        grid-template-columns: 1fr 1fr;
        /* Two-column grid array mapping */
    }
}

@media (min-width: 1200px) {
    .testi-cards-side-grid {
        margin-top: 110px;
    }
}

/* Glassmorphic Item Base Blueprint */
.testimonial-glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: var(--spacing-xxl);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centers contents precisely 1:1 with reference image layout */
    justify-content: flex-start;
    /* min-height: 360px; */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}


.testimonial-glass-card:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Watermarked Quote Component */
.card-quote-bg {
    position: absolute;
    top: -15px;
    right: 12px;
    font-size: 140px;
    font-family: serif;
    color: rgba(255, 255, 255, 0.10);
    line-height: 1;
    pointer-events: none;
    font-weight: 900;
    z-index: 1;
}

.card-heading-feedback {
    font-size: 18px;
    font-weight: 500;
    color: var(--white);
    line-height: 1.3;
    margin-bottom: var(--spacing-xl);
    letter-spacing: -0.2px;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* User Profile Row Layout */
.user-profile-row {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-xl);
    position: relative;
    z-index: 3;
}

.avatar-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
}

.user-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
}

/* Mint green badge quote tag icon */
.badge-quote-icon {
    position: absolute;
    top: 6px;
    right: -4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--accent-blue);
    /* Exact mint green hex */
    color: var(--navy-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.feedback-paragraph {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin-bottom: var(--spacing-xxl);
    position: relative;
    z-index: 2;
}

.doctor-signature-tag {
    font-size: 18px;
    font-weight: 500;
    color: var(--white);
    text-align: center;
    width: 100%;
    letter-spacing: -0.1px;
    margin-top: auto;
    /* Pushes the identity signature completely flush to base boundary */
    position: relative;
    z-index: 2;
}

.doctor-signature-tag .spec-label {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
    font-size: 12px;
}

/* ==========================================
   VERIFY INSURANCE BANNER LAYOUT DESIGN
   ========================================== */
.insurance-banner-section {
    padding: var(--spacing-3xl) var(--spacing-none);
    background-color: var(--bg-panel);
    width: 100%;
}

.insurance-banner-inner {
    position: relative;
    /* width: 100%; */
    border-radius: 12px;
    overflow: hidden;
    background-image: url('../images/images/verify-cover.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: var(--spacing-4xl) var(--spacing-xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-10);
}

/* @media (min-width: 576px) {
    .insurance-banner-inner {
        padding: var(--spacing-64) var(--spacing-3xl);
    }
} */

@media (min-width: 992px) {
    .insurance-banner-inner {
        grid-template-columns: 1.1fr 0.9fr;
        align-items: space-between;
        padding: 72px var(--spacing-64);
        min-height: 420px;
    }
}

/* ==========================================
   LEFT COLUMN CONTENT GRAPHICS & BUTTONS
   ========================================== */
.banner-column-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.banner-main-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(26px, 4vw, 42px);
    /* Scales cleanly across fluid viewport break sizes */
    font-weight: 600;
    line-height: 1.15;
    color: var(--white);
    letter-spacing: -0.8px;
    /* margin-bottom: var(--spacing-10); */
}

@media (min-width: 992px) {
    .banner-main-title {
        margin-bottom: var(--spacing-none);
        /* Let flex-direction space-between push button flush downwards on desktop */
    }
}


/* Primary High-Contrast Pill Action Button Link Container */
.btn-verify-insurance {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--white);
    color: var(--navy-dark);
    /* Contrast deep green font tone mapping */
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
    border-radius: 100px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--white);
}

.btn-verify-insurance span {
    margin-right: var(--spacing-base);
    letter-spacing: -0.1px;
}

.verify-arrow-badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--accent-blue);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

/* Button hover state transition path rules */
.btn-verify-insurance:hover {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--white);
}

.btn-verify-insurance:hover .verify-arrow-badge {
    transform: translate(2px) rotate(45deg);
    background-color: var(--navy-dark);
    color: var(--white);
}

/* ==========================================
   RIGHT COLUMN HEADINGS & INTERACTIVE PILLS
   ========================================== */
.banner-column-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

@media (min-width: 992px) {
    .banner-column-right {
        align-items: flex-end;
        /* Flushes copy and pill blocks right on wide display viewports */
        text-align: right;
    }
}

.banner-right-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(24px, 2.5vw, 26px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--white);
    letter-spacing: -0.4px;
    margin-bottom: var(--spacing-xl);
}

.banner-static-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-12);
}

@media (min-width: 992px) {
    .banner-static-pills {
        justify-content: flex-end;
        /* Snaps flex wrapper alignment to the right viewport margins */
        max-width: 380px;
        /* Forces stack rows wrapping exactly like the template photo layout */
    }
}

.insurance-tag-pill {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--blue-secondary);
    /* Deep contrast identifier label text */
    background-color: var(--white);
    padding: var(--spacing-10) 22px;
    border-radius: 100px;
    cursor: pointer;
    display: inline-block;
    line-height: 1.4;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Interactive Tag Pill Hover configuration */
.insurance-tag-pill:hover {
    background-color: var(--accent-blue);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ==========================================
   FAQ SECTION STRUCTURAL LAYOUT
   ========================================== */
.faq-section {
    padding: 60px var(--spacing-none);
    background-color: var(--bg-card);
    /* Off-white warm editorial tone from reference image */
}

@media (min-width: 768px) {
    .faq-section {
        padding: var(--spacing-6xl) var(--spacing-none);
    }
}

@media (min-width: 1200px) {
    .faq-section {
        padding: 140px var(--spacing-none);
    }
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3xl);
    position: relative;
}

@media (min-width: 992px) {
    .faq-grid {
        grid-template-columns: 5fr 7fr;
        /* Balanced image to text column spatial hierarchy */
        gap: var(--spacing-64);
    }
}

/* Left Column Sticky Setup */
.faq-left {
    position: relative;
    width: 100%;
}

@media (min-width: 992px) {
    .faq-left {
        position: sticky;
        top: 100px;
        height: fit-content;
    }
}

.faq-image-container {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}


/* Right Column Headings & Tags */
.faq-right {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.faq-main-title {
    font-size: clamp(28px, 4.5vw, 52px);
    font-weight: 500;
    line-height: 1.15;
    color: var(--text-dark);
    letter-spacing: -0.5px;
    margin-bottom: var(--spacing-xxl);
}

@media (min-width: 992px) {
    .faq-main-title {
        margin-bottom: var(--spacing-56);
        letter-spacing: -1px;
        line-height: 1.1;
    }
}

/* ==========================================
   ACCORDION ENGINE & MICRO-INTERACTIONS
   ========================================== */
.accordion-group {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    /* Clean crisp dividers from layout */
    width: 100%;
}

.accordion-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    transition: background-color 0.4s ease;
    width: 100%;
}

.accordion-trigger {
    width: 100%;
    background: none;
    border: none;
    padding: var(--spacing-lg) var(--spacing-none);
    display: flex;
    align-items: flex-start;
    /* Aligns items to the top if text wraps into multiple lines */
    justify-content: space-between;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    outline: none;
    gap: var(--spacing-base);
}

@media (min-width: 768px) {
    .accordion-trigger {
        padding: var(--spacing-xxl) var(--spacing-none);
        gap: var(--spacing-xl);
    }
}

.faq-num {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    min-width: 24px;
    /* Ensures number doesn't shrink or squish */
    padding-top: 3px;
    /* Subtle vertical optical alignment with question text */
}

@media (min-width: 768px) {
    .faq-num {
        font-size: 15px;
        min-width: 32px;
        padding-top: var(--spacing-xs);
    }
}

.faq-question {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-dark);
    letter-spacing: -0.2px;
    flex: 1;
    /* Fluidly consumes all available space between number and cross icon */
    line-height: 1.4;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .faq-question {
        font-size: 20px;
        letter-spacing: -0.3px;
    }
}

/* Custom interactive cross icon toggles */
.faq-icon {
    position: relative;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Prevents container distortion when screen collapses */
    margin-top: var(--spacing-sm);
    /* Positions cross centered with the first line of text text */
}

@media (min-width: 768px) {
    .faq-icon {
        width: 14px;
        height: 14px;
        margin-top: var(--spacing-md);
    }
}

.icon-line {
    position: absolute;
    background-color: var(--text-dark);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.icon-line.horizontal {
    width: 100%;
    height: 1.5px;
}

.icon-line.vertical {
    width: 1.5px;
    height: 100%;
}

/* Expandable wrapper panel physics */
.accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}

.panel-content {
    padding-left: var(--spacing-3xl);
    /* Perfectly flushes block text right past line numbers on mobile */
    padding-bottom: var(--spacing-xl);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-gray-medium);
    /* Neutral slate grey text for paragraphs */
    max-width: 640px;
}

@media (min-width: 768px) {
    .panel-content {
        padding-left: var(--spacing-56);
        /* Wider step offset to match desktop spacing proportions */
        padding-bottom: var(--spacing-xxl);
        font-size: 15px;
    }
}

/* ==========================================
   HOVER & ACTIVE STATES (100% VISUAL ACCURACY)
   ========================================== */
.accordion-item:hover .faq-question {
    color: var(--blue-primary);
    /* Deep forest green highlight */
}

/* When Accordion item is target activated */
.accordion-item.active .faq-question {
    color: var(--text-dark);
}

.accordion-item.active .icon-line.vertical {
    transform: rotate(90deg);
    opacity: 0;
    /* Smooth slide out to leave horizontal dash minus sign */
}

.accordion-item.active .icon-line.horizontal {
    transform: rotate(180deg);
}

/* ==========================================
   BLOGS & INSIGHTS MASTER TIMELINE DESIGN
   ========================================== */
.blogs-section {
    padding: var(--spacing-5xl) var(--spacing-none);
    background-color: var(--bg-panel);
    width: 100%;
    overflow: hidden;
}

@media (min-width: 992px) {
    .blogs-section {
        padding: var(--spacing-7xl) var(--spacing-none);
    }
}

/* Header Row & Custom Pill Controller Alignment */
.blogs-header-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-36);
}

@media (min-width: 992px) {
    .blogs-header-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}


.blogs-main-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-dark);
    letter-spacing: -1px;
}

.blogs-controls-side {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.blogs-nav-arrows {
    display: flex;
    gap: var(--spacing-12);
}

.blog-arrow-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--white);
    border: none;
    color: var(--blue-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-arrow-circle:hover {
    background-color: var(--accent-blue) !important;
    color: var(--white);
}

.blog-arrow-circle.active {
    background-color: var(--blue-secondary);
    color: var(--white);
}

/* Primary Navigation Pill Link */
.btn-view-all-blogs {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    background-color: var(--navy-dark);
    /* Deep forest theme jade green background */
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
    border-radius: 100px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-view-all-blogs span {
    margin-right: var(--spacing-base);
}

.view-all-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--accent-blue);
    /* Radiant solid high-contrast light green icon background */
    color: var(--navy-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

.btn-view-all-blogs:hover {
    background-color: var(--accent-blue);
    color: var(--white);
}

.btn-view-all-blogs:hover .view-all-arrow {
    transform: translate(2px) rotate(45deg);
    background-color: var(--navy-dark);
    color: var(--white);
}

/* ==========================================
   CAROUSEL OVERLAY TRANSITION ENGINE
   ========================================== */
.blogs-slider-window {
    width: 100%;
    overflow: hidden;
    padding: var(--spacing-md) var(--spacing-xs);
    /* Prevents layout edge clipping on shadow parameters */
}

.blogs-slider-track {
    display: flex;
    gap: var(--spacing-xl);
    width: max-content;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.blog-slide-card {
    width: calc(100vw - 48px);
    max-width: 400px;
    height: 400px;
    background: linear-gradient(135deg, var(--accent-blue)0e 0%, var(--bg-ticker) 100%);
    /* Flat clean gray surface panel */
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

/* Primary Green Background Slide Mask */
.blog-solid-overlay {
    position: absolute;
    top: 100%;
    /* Placed flush downwards outside bounding context box layout */
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--navy-dark);
    /* Changes cleanly to primary forest green background on hover */
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    transform: translateY(0);
}

.blog-card-inner {
    position: relative;
    z-index: 2;
    /* Keeps textual and numerical metadata layers safely elevated above overlay masks */
    padding: var(--spacing-36) var(--spacing-xxl);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.blog-title {
    font-size: 18.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-dark);
    letter-spacing: -0.2px;
    transition: color 0.4s ease;
}

.blog-card-bottom {
    display: flex;
    flex-direction: column;
}

/* Read Time Layout Structure */
.read-time-row {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    transition: color 0.4s ease;
}

.read-time-num {
    font-size: 42px;
    /* Massive distinct typography size from design template image */
    font-weight: 700;
    line-height: 1;
    color: var(--navy-dark);
    letter-spacing: -1px;
    transition: color 0.4s ease;
}

.read-time-label {
    font-size: 18px;
    font-weight: 600;
    color: var(--navy-dark);
    transition: color 0.4s ease;
}

.card-divider-line {
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
    margin-bottom: var(--spacing-base);
    transition: background-color 0.4s ease;
}

.meta-footer-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-gray-medium);
    transition: color 0.4s ease;
}

/* ==========================================
   INTERACTIVE REVERSE COLOR INVERSION CODES
   ========================================== */
.blog-slide-card:hover .blog-solid-overlay {
    transform: translateY(-100%);
    /* Snaps block panel straight up inside cell boundaries */
}

.blog-slide-card:hover .blog-title,
.blog-slide-card:hover .read-time-num,
.blog-slide-card:hover .read-time-label,
.blog-slide-card:hover .meta-footer-row {
    color: var(--white);
    /* Total text color inversion track */
}

.blog-slide-card:hover .card-divider-line {
    background-color: rgba(255, 255, 255, 0.15);
}

.blog-slide-card:hover .meta-footer-row {
    color: rgba(255, 255, 255, 0.6);
}

/* ==========================================
   FOOTER SECTION
   ========================================== */

.main-footer-section {
    /* DIRECT PNG ASSIGNMENT ROUTE */
    background-image: url('../images/images/footer-bg.png');
    /* background: var(--blue-primary); */
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-3xl);
    overflow: hidden;
    font-family: var(--font-family);
}

/* ==========================================
   A. COMPACT CTA SECTION WITH FULL VIDEO FRAMING
   ========================================== */
.cta-sub-container {
    position: relative;
    /* width: 100%; */
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    padding: var(--spacing-xxl) var(--spacing-lg);
    margin-bottom: 60px;
}

@media (min-width: 768px) {
    .cta-sub-container {
        padding: var(--spacing-4xl);
    }
}

@media (min-width: 1200px) {
    .cta-sub-container {
        padding: var(--spacing-56) var(--spacing-64);
    }
}

/* Dynamic Fit properties to force entire video within container dimensions */
.cta-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 2;
}

.cta-video-tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(3, 35, 28, 0.5) 0%, rgba(7, 58, 47, 0.1) 100%);
    z-index: 3;
}

.cta-inner-layout {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xxl);
    align-items: center;
}

@media (min-width: 992px) {
    .cta-inner-layout {
        grid-template-columns: 1.15fr 0.85fr;
        gap: var(--spacing-4xl);
    }
}

.cta-heading-title {
    font-size: clamp(22px, 3.5vw, 34px);
    font-weight: 500;
    line-height: 1.15;
    color: var(--white);
    letter-spacing: -0.8px;
    margin-bottom: var(--spacing-xl);
}

.cta-meta-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.cta-tagline {
    font-size: 13px;
    font-weight: 500;
    color: var(--white);
}

.cta-subtext {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 440px;
}

.cta-form-side {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

/* Form Glass box styling values */
.glass-form-wrapper {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: var(--spacing-xl);
    width: 100%;
    max-width: 420px;
}

@media (min-width: 480px) {
    .glass-form-wrapper {
        padding: var(--spacing-xxl);
    }
}

.form-panel-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-dark);
    margin-bottom: var(--spacing-xl);
}

.compact-cta-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
}

.form-input-row {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: var(--spacing-md);
}

.field-icon {
    color: var(--text-dark);
    display: inline-flex;
    align-items: center;
}

.compact-cta-form input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--white);
    font-size: 13.5px;
    padding-left: var(--spacing-12);
    font-family: inherit;
}

.compact-cta-form input::placeholder {
    color: var(--text-gray-dark);
}

.compact-submit-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: var(--navy-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
    border-radius: 100px;
    color: var(--white);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    margin-top: var(--spacing-md);
    font-family: inherit;
    transition: var(--transition-smooth);
}

.compact-submit-btn:hover {
    background-color: var(--accent-blue);
    color: var(--navy-dark);
    border-color: var(--accent-blue);
}

.compact-submit-btn:hover .submit-arrow-badge {
    background-color: var(--navy-dark);
    color: var(--white);
    transform: rotate(45deg);
}


/* ==========================================
   B. GLASSMORPHISM INTERACTIVE UTILITIES (ICONS / BACK TO TOP)
   ========================================== */
.glass-element {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    transition: var(--transition-smooth);
}

.footer-mid-row {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xxl);
    padding-bottom: var(--spacing-3xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

@media (min-width: 768px) {
    .footer-mid-row {
        grid-template-columns: auto 1fr;
        align-items: center;
    }
}

@media (min-width: 1200px) {
    .footer-mid-row {
        grid-template-columns: auto 1fr auto;
        align-items: center;
    }
}

.brand-logo-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.5px;
    line-height: 1;
}

.brand-sub-label {
    display: block;
    font-size: 8.5px;
    letter-spacing: 1.5px;
    color: var(--accent-blue);
    margin-top: var(--spacing-xs);
}

.footer-navigation-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-12) var(--spacing-xl);
}

@media (min-width: 1200px) {
    .footer-navigation-list {
        justify-content: center;
    }
}

.footer-navigation-list a {
    text-decoration: none;
    font-size: 13.5px;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.footer-navigation-list a:hover {
    color: var(--white);
}

.footer-social-column {
    display: flex;
    gap: var(--spacing-12);
}

@media (min-width: 768px) {
    .footer-social-column {
        justify-content: flex-end;
    }
}

.social-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

/* Premium glass hover animation path metrics */
.social-icon-wrapper:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--white) !important;
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* ==========================================
   C. UTILITY METRICS BASE FOOTER
   ========================================== */
.footer-bottom-row {
    position: relative;
    z-index: 5;
    padding-top: var(--spacing-3xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

@media (min-width: 992px) {
    .footer-bottom-row {
        grid-template-columns: 1fr auto;
    }
}

.back-to-top-trigger {
    position: absolute;
    top: -20px;
    /* Snaps seamlessly overlapping divider layout line */
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.back-to-top-trigger:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--white) !important;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.footer-legal-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

@media (min-width: 640px) {
    .footer-legal-container {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-xxl);
    }
}

.copyright-label {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.4);
}

.legal-links-row {
    display: flex;
    gap: var(--spacing-base);
}

.legal-links-row a {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color 0.3s ease;
}

.legal-links-row a:hover {
    color: var(--white);
}

.footer-credits-container {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.4);
}

@media (min-width: 992px) {
    .footer-credits-container {
        text-align: right;
    }
}

.agency-credit-link {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.agency-credit-link:hover {
    color: var(--accent-blue);
}





/* --------------------------------------------------Shop Page-------------------------------------------------- */
/* ==========================================
   SHOP GRID ARCHITECTURE LAYOUT SETTINGS
   ========================================== */
.shop-page-section {
    padding: 60px var(--spacing-none);
    background-color: var(--bg-panel);
    /* Matching warm white background token */
    width: 100%;
}

@media (min-width: 992px) {
    .shop-page-section {
        padding: var(--spacing-6xl) var(--spacing-none);
    }
}

.shop-layout-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3xl);
    align-items: flex-start;
}

@media (min-width: 992px) {
    .shop-layout-container {
        grid-template-columns: 2.8fr 9.2fr;
        /* Perfect sidebar to listing proportion grid */
        gap: var(--spacing-4xl);
    }
}

/* ==========================================
   LEFT SIDEBAR COLUMN STYLING MATRIX
   ========================================== */
.shop-filter-sidebar {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.filter-header-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: var(--spacing-lg);
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.1);
    margin-bottom: var(--spacing-base);
}

.sidebar-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-dark);
}

.btn-reset-filters {
    background: none;
    border: none;
    color: var(--red-alert);
    /* Premium crimson reset visual text link */
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: var(--spacing-none);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.btn-reset-filters:hover {
    border-color: var(--red-alert);
}

/* Sidebar Accordion Components Layer */
.filter-accordion-block {
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.1);
    width: 100%;
}

.filter-acc-trigger {
    width: 100%;
    background: none;
    border: none;
    padding: var(--spacing-xl) var(--spacing-none);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    outline: none;
}

.acc-chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-dark);
    border-bottom: 2px solid var(--text-dark);
    transform: rotate(45deg);
    /* Chevron points down default state */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.filter-accordion-block.active .acc-chevron {
    transform: rotate(-135deg);
    /* Flips up when active panel is uncollapsed */
}

.filter-acc-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s ease;
    width: 100%;
}

.filter-accordion-block.active .filter-acc-panel {
    max-height: 300px;
    /* Safe upper boundary height metric */
    padding-bottom: var(--spacing-xl);
}

/* Custom Re-designed Pixel-Perfect Checkbox Elements */
.checkbox-group-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
}

.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-box {
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    display: inline-block;
    margin-right: var(--spacing-12);
    position: relative;
    background-color: var(--white);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-checkbox:hover input~.checkbox-box {
    border-color: var(--navy-dark);
}

.custom-checkbox input:checked~.checkbox-box {
    background-color: var(--navy-dark);
    /* Solid green fill box logic matches image dashboard elements */
    border-color: var(--navy-dark);
}

.checkbox-box::after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked~.checkbox-box::after {
    display: block;
}

.checkbox-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-gray-dark);
}

.count-lbl {
    color: var(--text-gray-placeholder);
    font-size: 13.5px;
    margin-left: var(--spacing-xxs);
}

/* High-Performance Double-Thumb Price Range Slider Component */
.price-slider-wrapper {
    position: relative;
    width: 100%;
    height: 24px;
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
}

.slider-track-line {
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: var(--navy-dark);
    /* Solid theme track line match from template image */
    border-radius: 10px;
    z-index: 1;
}

.range-input {
    position: absolute;
    width: 100%;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    height: 24px;
    margin: var(--spacing-none);
    z-index: 2;
}

/* Custom styling for native range thumbs */
.range-input::-webkit-slider-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background-color: var(--white);
    border: 2.5px solid var(--navy-dark);
    /* Ring outer design parameter lock */
    cursor: pointer;
    pointer-events: auto;
    -webkit-appearance: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.range-input::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background-color: var(--white);
    border: 2.5px solid var(--navy-dark);
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.price-numeric-fields {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-12);
}

.price-input-box {
    display: flex;
    align-items: center;
    background-color: var(--border-dark);
    /* Gray filled container panel background matched exactly to layout photo */
    border-radius: 4px;
    padding: var(--spacing-md) var(--spacing-12);
    width: 46%;
}

.currency-tag {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-gray-medium);
    margin-right: var(--spacing-md);
}

.price-input-box input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    text-align: right;
    -moz-appearance: textfield;
}

.price-input-box input::-webkit-outer-spin-button,
.price-input-box input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: var(--spacing-none);
}

/* ==========================================
   RIGHT COMPONENT PANEL: PRODUCT CONTENT STYLES
   ========================================== */
.shop-products-main-panel {
    width: 100%;
}

/* Premium Toolbar Sorting Element Layout row */
.shop-sort-toolbar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xxl);
    background-color: var(--white);
    padding: var(--spacing-base) var(--spacing-xl);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.toolbar-results-count {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-gray-medium);
}

.toolbar-results-count span {
    font-weight: 700;
    color: var(--text-dark);
}

.sort-dropdown-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
}

.sort-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-gray-medium);
}

.custom-select-box select {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dark);
    background-color: var(--bg-panel);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: var(--spacing-md) var(--spacing-36) var(--spacing-md) var(--spacing-base);
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
}

/* GRID SETUP: Reusing native home card inner design systems dimensions */
.shop-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--spacing-xxl) var(--spacing-xl);
    width: 100%;
    margin-bottom: var(--spacing-56);
}

/* ==========================================
   DYNAMIC PAGINATION BAR NAVIGATION
   ========================================== */
.shop-pagination-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-base);
    width: 100%;
}

.pag-nav-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--blue-primary);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pag-nav-btn:hover:not(:disabled) {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.pag-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pag-pages-list-wrapper {
    display: flex;
    gap: var(--spacing-md);
}

.pag-num-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-gray-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pag-num-link:hover,
.pag-num-link.active {
    background-color: var(--navy-dark);
    /* Focus active element matching dark fill palette rules */
    color: var(--white);
}


/* ------------------ Contact Page ---------------------------- */
/* ==========================================
   CONTACT FORM LAYOUT & BACKDROP GRADIENT
   ========================================== */
.contact-form-section {
    position: relative;
    width: 100%;
    background-color: var(--bg-panel);
    /* Standard light background surface */
    padding: 60px var(--spacing-none);
    overflow: hidden;
}

@media (min-width: 992px) {
    .contact-form-section {
        padding: var(--spacing-7xl) var(--spacing-none) 140px;
    }
}

/* Precision Right Edge Mint/Turquoise Light Blend overlay graphic */
.contact-bg-gradient-wash {
    position: absolute;
    top: 0;
    right: 0;
    width: 60vw;
    height: 100%;
    /* Replicates the elegant right side background wash perfectly 1:1 */
    background: radial-gradient(circle at 100% 30%, rgba(2, 108, 195, 0.18) 0%, rgba(0, 74, 132, 0.04) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.contact-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-56);
    position: relative;
    z-index: 5;
    align-items: flex-start;
}

@media (min-width: 992px) {
    .contact-layout-grid {
        grid-template-columns: 5.2fr 6.8fr;
        /* Balanced alignment mapping */
        gap: var(--spacing-64);
    }
}

/* ==========================================
   LEFT HEADER COLUMN GRAPHICS STYLING
   ========================================== */
.contact-info-left {
    display: flex;
    flex-direction: column;
}

.contact-main-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--navy-dark);
    /* Rich deep corporate dark green tone from image typography */
    letter-spacing: -1.5px;
    margin-bottom: var(--spacing-xl);
}

.contact-sub-description {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-gray-medium);
    max-width: 480px;
    margin-bottom: var(--spacing-3xl);
}


/* ==========================================
   RIGHT COLUMN: INTERACTIVE FORM FLUSH FIELDS
   ========================================== */
.contact-form-right {
    width: 100%;
}

.premium-contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-36);
    /* Vertical padding space between row inputs deck */
}

.form-row-split-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-36) var(--spacing-xl);
}

@media (min-width: 640px) {
    .form-row-split-2 {
        grid-template-columns: 1fr 1fr;
        /* Splitting horizontal layout grid row cleanly */
    }
}

/* Pure CSS Floating Input Group Engine Mechanics */
.floating-input-group {
    position: relative;
    width: 100%;
}

.contact-input-field {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.12);
    /* Clean subtle input baseline rule template asset */
    padding: var(--spacing-10) var(--spacing-none);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-dark);
    outline: none;
    transition: all 0.3s ease;
}

.contact-textarea {
    resize: none;
    min-height: 40px;
    overflow-y: hidden;
}

/* Label initial lock baseline properties */
.contact-field-label {
    position: absolute;
    top: 10px;
    left: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--gray-blue);
    /* Accurate placeholder teal-grey label hue value */
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.required-asterisk {
    color: var(--accent-blue);
    /* Distinct cyan theme tone required asset color key marker */
    margin-left: var(--spacing-xxs);
}

/* FLOATING FOCUS TRANSFORMATION PATH RULES */
.contact-input-field:focus {
    border-bottom-color: var(--navy-dark);
    /* Baseline track illuminates to dark theme green on input focus */
}

/* Shifts label upwards and shrinks font scale smoothly when active or data populated */
.contact-input-field:focus+.contact-field-label,
.contact-input-field:not(:placeholder-shown)+.contact-field-label {
    top: -18px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-blue);
}

/* ==========================================
   PRIMARY SECTION SUBMIT CALL TO ACTION
   ========================================== */
.btn-contact-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
    min-width: 220px;
    background-color: var(--navy-dark);
    /* Solid dark theme green background fill */
    border: 1px solid var(--navy-dark);
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-xl);
    border-radius: 100px;
    color: var(--white);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    margin-top: var(--spacing-base);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.submit-arrow-circle-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--accent-blue);
    /* Vibrant light green icon accent fill circle */
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover micro-interaction transition metrics matching video prototype curves */
.btn-contact-submit:hover {
    background-color: var(--accent-blue);
    /* Button body switches safely to signature active mint layer */
    border-color: var(--accent-blue);
    color: var(--white);
}

.btn-contact-submit:hover .submit-arrow-circle-badge {
    background-color: var(--navy-dark);
    color: var(--white);
    transform: translate(2px) rotate(45deg);
    /* Complex diagonal translation track */
}


/* ==========================================
   COMPACT INNER HERO SYSTEM (LOCKED AT 602PX)
   ========================================== */
.inner-page-hero-section {
    position: relative;
    width: 100%;
    height: 602px;
    /* Fixed absolute page template dimension from design image */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: var(--navy-dark);
    overflow: hidden;
    display: flex;
    align-items: center;
}

.inner-hero-darkener-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(2, 18, 14, 0.6) 0%, rgba(2, 18, 14, 0.4) 100%);
    z-index: 3;
}

/* DYNAMIC SPLIT MASK WIPE ENGINE (LOCKED AT 602PX HEIGHT TRACK) */
.inner-hero-diagonal-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

.inner-diagonal-svg {
    width: 100%;
    height: 100%;
}

.inner-wing-left {
    transform-origin: left center;
    animation: innerWipeLeft 1.4s cubic-bezier(0.85, 0, 0.15, 1) forwards;
    will-change: transform;
}

.inner-wing-right {
    transform-origin: right center;
    animation: innerWipeRight 1.4s cubic-bezier(0.85, 0, 0.15, 1) forwards;
    will-change: transform;
}

@keyframes innerWipeLeft {
    0% {
        transform: translate3d(0, 0, 0) scaleX(1);
        opacity: 1;
    }

    100% {
        transform: translate3d(-45%, 0, 0) scaleX(0.65);
        opacity: 0;
    }
}

@keyframes innerWipeRight {
    0% {
        transform: translate3d(0, 0, 0) scaleX(1);
        opacity: 1;
    }

    100% {
        transform: translate3d(45%, 0, 0) scaleX(0.65);
        opacity: 0;
    }
}

/* ==========================================
   STAGGERED TEXT CONTENT INSIDE ENGINE
   ========================================== */
.inner-hero-content-flex {
    position: relative;
    z-index: 5;
    width: 100%;
    padding-top: var(--spacing-6xl);
    /* Cushion balance clearance for navigation layers */

    /* Initial hidden state waiting on mask wipe */
    opacity: 0;
    transform: translateY(16px);
    animation: innerContentReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

@keyframes innerContentReveal {
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}



.inner-hero-h1-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(34px, 5.5vw, 64px);
    /* Scales down fluidly for short breakpoints */
    font-weight: 500;
    line-height: 1.1;
    color: var(--white);
    letter-spacing: -1.5px;
    margin: var(--spacing-none);
}

/* --------------------- Cart Page--------------------- */
/* ==========================================
   SHOPPING CART AREA DESIGN SYSTEM & MATRICES
   ========================================== */
.shopping-cart-section {
    position: relative;
    width: 100%;
    background-color: var(--bg-panel);
    padding: 60px var(--spacing-none);
    overflow: hidden;
}

@media (min-width: 992px) {
    .shopping-cart-section {
        padding: var(--spacing-7xl) var(--spacing-none);
    }
}

/* Precise radial lighting background layout matching header systems */
.cart-bg-gradient-wash {
    position: absolute;
    top: 0;
    right: 0;
    width: 50vw;
    height: 100%;
    background: radial-gradient(circle at 100% 10%, rgba(2, 108, 195, 0.15) 0%, rgba(0, 74, 132, 0.03) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.cart-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-56);
    position: relative;
    z-index: 5;
    align-items: flex-start;
}

@media (min-width: 1200px) {
    .cart-layout-grid {
        grid-template-columns: 7.8fr 4.2fr;
        /* Explicit asymmetry balancing grid table and checkout summary */
        gap: var(--spacing-64);
    }
}

/* ==========================================
   LEFT COLUMN: PRODUCTS COMPACT WINDOW SLIDER
   ========================================== */
.cart-left-panel {
    display: flex;
    flex-direction: column;
}


.cart-main-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(30px, 4.5vw, 52px);
    font-weight: 500;
    line-height: 1.12;
    color: var(--text-dark);
    letter-spacing: -1.5px;
    margin-bottom: var(--spacing-4xl);
}

/* Clean Column Table Header Alignment Row */
.cart-table-header {
    display: grid;
    grid-template-columns: 1fr;
    padding-bottom: var(--spacing-14);
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.15);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (min-width: 640px) {
    .cart-table-header {
        grid-template-columns: 5.5fr 3.5fr 3fr;
        /* Spacing tracking individual grid cells */
    }

    .hdr-quantity,
    .hdr-total {
        text-align: right;
    }

    .hdr-total {
        padding-right: var(--spacing-12);
    }
}

/* VERTICAL SLIDER STYLING ENGINE: Activates smoothly after 4 row items */
.cart-items-slider-container {
    max-height: 480px;
    /* Precise height cutoff parameter bounding exactly 4 item frames */
    overflow-y: auto;
    padding-right: var(--spacing-xs);
    scrollbar-width: thin;
    /* Firefox slim visible track */
    scrollbar-color: #d0d5dd transparent;
}

.cart-items-slider-container::-webkit-scrollbar {
    width: 6px;
}

.cart-items-slider-container::-webkit-scrollbar-track {
    background: transparent;
}

.cart-items-slider-container::-webkit-scrollbar-thumb {
    background: #d0d5dd;
    border-radius: 3px;
}

.cart-items-slider-container::-webkit-scrollbar-thumb:hover {
    background: var(--navy-dark);
}

/* Individual list component row layout */
.cart-item-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl) var(--spacing-none);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    align-items: center;
}

@media (min-width: 640px) {
    .cart-item-row {
        grid-template-columns: 5.5fr 3.5fr 3fr;
        gap: var(--spacing-none);
    }
}

.cart-product-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-base);
}

.cart-item-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 4px;
    background-color: var(--border-light);
}

.product-info-text h3 {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.4;
    margin-bottom: var(--spacing-xs);
    max-width: 320px;
}

.unit-price {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy-dark);
}

/* Quantity Adjuster Custom Stepper Box */
.cart-quantity-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-base);
}

@media (min-width: 640px) {
    .cart-quantity-cell {
        justify-content: flex-end;
        padding-right: var(--spacing-base);
    }
}

.quantity-stepper {
    display: flex;
    align-items: center;
    background-color: var(--border-medium);
    /* Pure neutral gray fill block from design screenshot asset */
    border-radius: 100px;
    padding: var(--spacing-xs) var(--spacing-md);
}

.step-btn {
    background: none;
    border: none;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.qty-number {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    min-width: 24px;
    text-align: center;
}

.btn-remove-item {
    background: none;
    border: none;
    color: var(--text-gray-placeholder);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs);
    transition: color 0.3s ease;
}

.btn-remove-item:hover {
    color: var(--red-alert);
}

.cart-total-cell {
    font-size: 16px;
    font-weight: 600;
    color: var(--navy-dark);
}

@media (min-width: 640px) {
    .cart-total-cell {
        text-align: right;
        padding-right: var(--spacing-12);
    }
}

/* Continue Shopping Trigger Layout */
.cart-actions-footer {
    margin-top: var(--spacing-xxl);
}

.btn-continue-shopping {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-md);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--navy-dark);
    transition: transform 0.3s ease;
}

.btn-continue-shopping .arrow-back {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.btn-continue-shopping:hover .arrow-back {
    transform: translateX(-4px);
}

/* ==========================================
   RIGHT COLUMN: CHECKOUT SUMMARY BLOCK
   ========================================== */
@media (min-width: 1200px) {
    .cart-summary-sidebar {
        position: sticky;
        top: 188px;
        /* Locks order summary flush on desktop viewports */
    }
}

.summary-sticky-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

@media (min-width: 1200px) {
    .summary-sticky-card {
        align-items: flex-end;
        text-align: right;
    }
}

.summary-row-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    padding-bottom: var(--spacing-12);
}

.summary-row-item.border-thick {
    border-bottom: 2px solid var(--navy-dark);
    margin-bottom: var(--spacing-base);
}

.summary-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-gray-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-value {
    font-size: clamp(20px, 2.5vw, 26px);
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -0.5px;
}

.summary-disclaimer {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-gray-light);
    margin-bottom: var(--spacing-xxl);
    max-width: 340px;
}

/* Checkout Call To Action Button Components */
.btn-go-to-checkout {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--navy-dark);
    /* Deep forest dark green fill theme token */
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
    border-radius: 100px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    width: fit-content;
}

.btn-go-to-checkout span {
    margin-right: var(--spacing-base);
}

.checkout-arrow-badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--accent-blue);
    /* Vibrant mint accent green background badge */
    color: var(--navy-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

.btn-go-to-checkout:hover {
    background-color: var(--accent-blue);
    color: var(--navy-dark);
}

.btn-go-to-checkout:hover .checkout-arrow-badge {
    background-color: var(--navy-dark);
    color: var(--white);
    transform: translate(2px) rotate(45deg);
}


/* ==========================================
   CHECKOUT ARCHITECTURE STYLE RULES
   ========================================== */
.checkout-page-section {
    position: relative;
    width: 100%;
    background-color: var(--bg-panel);
    padding: 60px var(--spacing-none);
    overflow: hidden;
}

@media (min-width: 992px) {
    .checkout-page-section {
        padding: var(--spacing-7xl) var(--spacing-none);
    }
}

.checkout-bg-gradient-wash {
    position: absolute;
    top: 0;
    right: 0;
    width: 50vw;
    height: 100%;
    background: radial-gradient(circle at 100% 10%, rgba(2, 108, 195, 0.15) 0%, rgba(0, 74, 132, 0.03) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.checkout-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4xl);
    position: relative;
    z-index: 5;
    align-items: flex-start;
}

@media (min-width: 1200px) {
    .checkout-layout-grid {
        grid-template-columns: 7.5fr 4.5fr;
        gap: var(--spacing-64);
    }
}

/* ==========================================
   LEFT ACCORDION DECK FORM IMPLEMENTATION
   ========================================== */
.checkout-left-panel {
    display: flex;
    flex-direction: column;
}

.checkout-main-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(30px, 4.5vw, 52px);
    font-weight: 500;
    line-height: 1.12;
    color: var(--text-dark);
    letter-spacing: -1.5px;
    margin-bottom: var(--spacing-3xl);
}

.checkout-accordion-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
    width: 100%;
}

.checkout-acc-item {
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.checkout-acc-item.active {
    box-shadow: 0 10px 30px rgba(3, 35, 28, 0.04);
    border-color: rgba(3, 35, 28, 0.15);
}

.checkout-acc-trigger {
    width: 100%;
    background: none;
    border: none;
    outline: none;
    padding: var(--spacing-xl);
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.acc-step-num {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-blue);
    margin-right: var(--spacing-base);
}

.checkout-acc-item.active .acc-step-num {
    color: var(--accent-blue);
}

.acc-step-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    flex: 1;
    letter-spacing: -0.3px;
}

.acc-status-icon {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--gray-blue);
    border-bottom: 2px solid var(--gray-blue);
    transform: rotate(45deg);
    transition: transform 0.4s ease;
}

.checkout-acc-item.active .acc-status-icon {
    transform: rotate(-135deg);
    border-color: var(--accent-blue);
}

/* Expanded panel transitions mechanics */
.checkout-acc-panel {
    max-height: 0;
    overflow: hidden;
    padding: var(--spacing-none) var(--spacing-xl);
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s ease;
}

.checkout-acc-item.active .checkout-acc-panel {
    max-height: 500px;
    /* Safe bounds */
    padding-bottom: var(--spacing-xxl);
    padding-top: var(--spacing-xxl);
}

/* Inner Form Content Parameters Grid */
.checkout-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-28) var(--spacing-lg);
}

@media (min-width: 640px) {
    .checkout-form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .floating-input-group.full-width {
        grid-column: 1 / -1;
    }
}

/* Floating Input Lines */
.floating-input-group {
    position: relative;
    width: 100%;
}

.checkout-input-field {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.12);
    padding: var(--spacing-md) var(--spacing-none);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-dark);
    outline: none;
}

.checkout-input-field:focus {
    border-bottom-color: var(--navy-dark);
}

.checkout-field-label {
    position: absolute;
    top: 8px;
    left: 0;
    font-size: 14px;
    color: var(--gray-blue);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.checkout-input-field:focus+.checkout-field-label,
.checkout-input-field:not(:placeholder-shown)+.checkout-field-label {
    top: -16px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--accent-blue);
}

.btn-step-next {
    background-color: var(--navy-dark);
    color: var(--white);
    border: none;
    padding: var(--spacing-10) var(--spacing-xl);
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-step-next:hover {
    background-color: var(--accent-blue);
    color: var(--navy-dark);
}

/* ==========================================
   INTERACTIVE PAYMENT RADIO SELECTION MATRICES
   ========================================== */
.payment-methods-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-base);
    margin-bottom: var(--spacing-xl);
    width: 100%;
}

@media (min-width: 576px) {
    .payment-methods-grid {
        grid-template-columns: repeat(3, 1fr);
        /* Snaps cleanly into horizontal rows on desktop */
    }
}

.payment-method-card {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: var(--spacing-xl) var(--spacing-base);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.pay-card-visual-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-12);
    text-align: center;
    z-index: 2;
}

.pay-provider-icon {
    width: 28px;
    height: 28px;
    color: var(--gray-blue);
    /* Default slate gray icon value */
    transition: color 0.3s ease, transform 0.3s ease;
}

.pay-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-gray-medium);
    transition: color 0.3s ease;
}

/* Rounded glowing indicator tracking badge */
.pay-active-indicator-dot {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* INTERACTIVE CARD ANIMATION STATES */
.payment-method-card:hover {
    border-color: rgba(34, 197, 94, 0.25);
    background-color: rgba(34, 197, 94, 0.01);
}

.payment-method-card:hover .pay-provider-icon {
    color: var(--navy-dark);
    transform: translateY(-2px);
}

/* Active Highlight Treatment */
.payment-method-card.active {
    border-color: var(--accent-blue);
    background-color: rgba(34, 197, 94, 0.03);
}

.payment-method-card.active .pay-provider-icon {
    color: var(--accent-blue);
    /* Lights up seamlessly to theme green accent */
}

.payment-method-card.active .pay-card-title {
    color: var(--navy-dark);
}

.payment-method-card.active .pay-active-indicator-dot {
    background-color: var(--accent-blue);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

.payment-radio-hidden {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Conditional visibility switches layout */
.payment-conditional-switch-panel {
    width: 100%;
    height: auto;
    opacity: 1;
    visibility: visible;
    display: block;
    transition: opacity 0.3s ease;
}

.payment-conditional-switch-panel.display-hide-field {
    display: none !important;
    /* Locks structural fields out safely when un-selected */
    opacity: 0;
    visibility: hidden;
}

/* Custom Checkbox Configuration for COD Address syncs */
.cod-billing-toggle-row {
    display: flex;
    align-items: center;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-box {
    width: 16px;
    height: 16px;
    border: 1.5px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    display: inline-block;
    margin-right: var(--spacing-10);
    background: var(--white);
    position: relative;
}

.custom-checkbox input:checked~.checkbox-box {
    background: var(--navy-dark);
    border-color: var(--navy-dark);
}

.checkbox-box::after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 7px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked~.checkbox-box::after {
    display: block;
}

.checkbox-label {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-gray-medium);
}

.checkout-input-field:disabled {
    opacity: 0.45;
    border-bottom-style: dashed;
    cursor: not-allowed;
}

.checkout-input-field:disabled~.checkout-field-label {
    opacity: 0.45;
}

/* Continue Back Button Link */
.checkout-actions-footer {
    margin-top: var(--spacing-xxl);
}

.btn-checkout-back {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-md);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--navy-dark);
}

.btn-checkout-back:hover .arrow-back {
    transform: translateX(-4px);
}

.arrow-back {
    transition: transform 0.3s ease;
}

/* ==========================================
   RIGHT COLUMN: ORDER SUMMARY SIDEBAR
   ========================================== */
@media (min-width: 1200px) {
    .checkout-summary-sidebar {
        position: sticky;
        top: 140px;
    }
}

.summary-wrapper-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.summary-box-inner {
    width: 90%;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: var(--spacing-xl);
}

.summary-box-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: var(--spacing-12);
}

.summary-line-item {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--text-gray-medium);
    padding: var(--spacing-md) var(--spacing-none);
}

.weight-bold {
    font-weight: 600;
    color: var(--text-dark);
}

.text-emerald {
    color: var(--accent-blue);
    font-weight: 600;
}

.summary-line-item.border-thick {
    border-top: 2px solid var(--navy-dark);
    padding-top: var(--spacing-14);
    margin-top: var(--spacing-md);
}

.total-label {
    font-weight: 600;
    color: var(--text-dark);
}

.total-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -0.5px;
}

.summary-disclaimer {
    font-size: 12.5px;
    color: var(--text-gray-light);
    margin-top: var(--spacing-12);
    line-height: 1.5;
}

/* Coupon Submission Row Block */
.coupon-code-wrapper {
    display: flex;
    width: 96%;
    gap: var(--spacing-md);
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 100px;
    padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-base);
}

.coupon-text-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-dark);
}

.btn-apply-coupon {
    background-color: var(--accent-blue);
    color: var(--white);
    border: none;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-apply-coupon:hover {
    background-color: var(--navy-dark);
}

/* Main Confirmation Action Button */
.btn-confirm-order {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--navy-dark);
    color: var(--white);
    text-decoration: none;
    width: fit-content;
    font-size: 14px;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-confirm-order span {
    margin-right: var(--spacing-base);
}

.confirm-arrow-badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--accent-blue);
    color: var(--navy-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

.btn-confirm-order:hover {
    background-color: var(--accent-blue);
    color: var(--navy-dark);
    border-color: var(--accent-blue);
}

.btn-confirm-order:hover .confirm-arrow-badge {
    background-color: var(--navy-dark);
    color: var(--white);
    transform: translate(2px) rotate(45deg);
}

.mt-2 {
    margin-top: var(--spacing-12);
}

.mt-3 {
    margin-top: var(--spacing-xl);
}

.w-100 {
    width: 100%;
}

/* ==========================================
   VISION & MISSION SECTION ARCHITECTURE
   ========================================== */
.about-vision-section {
    width: 100%;
    background-color: var(--bg-panel);
    /* Matching crisp white template baseline background */
    padding: 60px var(--spacing-none);
    overflow: hidden;
}

@media (min-width: 992px) {
    .about-vision-section {
        padding: var(--spacing-6xl) var(--spacing-none) var(--spacing-7xl);
        /* Generous vertical spatial balance for desktop */
    }
}

.vision-mission-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4xl);
    align-items: center;
}

@media (min-width: 992px) {
    .vision-mission-grid {
        grid-template-columns: 5.5fr 6.5fr;
        /* 1:1 precise grid template split columns from image */
        gap: var(--spacing-64);
    }
}

/* ==========================================
   LEFT COLUMN: SHOWCASE DISPLAY FRAME
   ========================================== */
.vision-image-side {
    width: 100%;
}

.vision-img-frame {
    width: 100%;
    aspect-ratio: 4 / 3;
    /* Matches the box box ratio configuration precisely */
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--border-light);
    /* Lightweight rendering fallback color placeholder */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.vision-native-png {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Retains clean framing properties without squishing or distortion */
    display: block;
}

/* ==========================================
   RIGHT COLUMN: TYPOGRAPHY LAYERS STACK
   ========================================== */
.vision-content-side {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-36);
    /* Dynamic padding buffer space separating groups and dividers */
}

.vision-block-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
}

.vision-block-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(24px, 3.5vw, 36px);
    /* Adaptive typography scale rules */
    font-weight: 600;
    line-height: 1.15;
    color: var(--navy-dark);
    /* Signature corporate deep dark forest green text tone */
    letter-spacing: -0.8px;
}

.vision-block-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-gray-medium);
    /* Neutral slate dark grey body paragraph color */
    max-width: 540px;
}

/* Precise horizontal separating vector rule from design screenshot */
.vision-section-divider {
    border: none;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.12);
    /* Clean thin line asset metric dimensions */
    width: 100%;
    margin: var(--spacing-none);
}

/* ==========================================
   REAL-TIME ANALYSIS SECTION MASTER LAYOUT
   ========================================== */
.analysis-graph-section {
    position: relative;
    /* width: 100%; */
    background-color: var(--blue-primary);
    background-image: url('../images/images/analysis-bg.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: var(--spacing-5xl);
    overflow: hidden;
}

@media (min-width: 992px) {
    .analysis-graph-section {
        padding: var(--spacing-5xl);
        /* Generates wide spacing track baseline */
    }
}

.analysis-header-block {
    position: relative;
    z-index: 10;
    margin-bottom: var(--spacing-5xl);
    /* Allocates spatial breathing distance before chart nodes appear */
}



.analysis-section-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(32px, 5vw, 54px);
    /* Fluid typography tracking screens scales */
    font-weight: 600;
    line-height: 1.1;
    color: var(--white);
    letter-spacing: -1.5px;
}

/* ==========================================
   INTERACTIVE DATA ANCHOR CHANNELS (CHART NODE MATRIX)
   ========================================== */
.analysis-chart-data-wrapper {
    position: relative;
    width: 100%;
    min-height: 440px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

@media (min-width: 992px) {
    .analysis-chart-data-wrapper {
        display: block;
        min-height: 642px;
        gap: var(--spacing-none);
    }
}

/* Precision Node Tracking Engine Pin */
.analysis-data-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 992px) {
    .analysis-data-node {
        position: absolute;
        left: var(--node-left-position);
        bottom: 100px;
        transform: translateX(-42%);
        height: 100%;
        justify-content: flex-end;
    }
}

/* Interactive Title Details Module Box Card */
.analysis-interactive-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.node-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    margin-bottom: var(--spacing-lg);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.node-icon-wrapper svg {
    width: 18px;
    height: 18px;
}

.node-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--white);
    letter-spacing: -0.1px;
    transition: color 0.3s ease;
}

/* Structural Extension Pin Visual Separator Line Asset */
.node-connector-line {
    width: 3px;
    height: 85px;
    /* background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, transparent 100%); */
    margin-top: var(--spacing-base);
    /* transition: all 0.4s ease; */
}

@media (min-width: 992px) {
    .node-connector-line {
        height: 200px;
        margin-top: var(--spacing-xl);
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.329) 0%, rgba(255, 255, 255, 0.02) 100%);
    }
}

/* ==========================================
   DYNAMIC MICRO-INTERACTION HOVER PHYSICS
   ========================================== */
.analysis-interactive-card:hover .node-icon-wrapper {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--navy-dark);
    transform: scale(1.1) translateY(-2px);
}

.analysis-interactive-card:hover .node-card-title {
    color: var(--white);
}

.analysis-data-node:hover .node-connector-line {
    background: linear-gradient(to bottom, var(--accent-blue) 0%, rgba(34, 197, 94, 0.05) 100%);
    width: 3px;
}


/* ==========================================
   PRODUCT DETAILS MASTER ARCHITECTURE LAYOUT
   ========================================== */
.product-details-section {
    width: 100%;
    background-color: var(--bg-panel);
    /* Matching clean light background platform token */
    padding: var(--spacing-3xl) var(--spacing-none) var(--spacing-5xl);
}

.details-top-navigation {
    margin-bottom: var(--spacing-xxl);
}

.btn-back-listing {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-12);
    text-decoration: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    transition: opacity 0.3s ease;
}

.btn-back-listing:hover {
    opacity: 0.7;
}

/* Dynamic Layout Split Columns Blueprint settings */
.product-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4xl);
    align-items: flex-start;
}

@media (min-width: 992px) {
    .product-details-grid {
        grid-template-columns: 5.5fr 6.5fr;
        /* Precise asymmetric blueprint allocation matching image framework */
        gap: var(--spacing-64);
    }
}

/* ==========================================
   LEFT HAND COLUMN: LOCKED STICKY ENGINE PANELS
   ========================================== */
@media (min-width: 992px) {
    .details-visual-sticky-pane {
        position: sticky;
        top: 130px;
        /* Locks component flush alongside viewport limits smoothly on scroll */
    }
}

.main-hero-display-frame {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Locked structural squared aspect ratio boundary constraints */
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: var(--spacing-lg);
}

.display-prime-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Thumbnails Matrix Track Row slider */
.thumbnail-carousel-row {
    display: flex;
    gap: var(--spacing-12);
    width: 100%;
    overflow-x: auto;
    padding-bottom: var(--spacing-xs);
    scrollbar-width: none;
}

.thumbnail-carousel-row::-webkit-scrollbar {
    display: none;
}

.thumb-card {
    width: calc((100% - 48px) / 5);
    /* Evaluates perfect grid fractions cleanly across breakpoint shifts */
    min-width: 64px;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    overflow: hidden;
    border: 1.5px solid transparent;
    cursor: pointer;
    background-color: var(--white);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.thumb-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Active Orange Track Framing border rule from image screenshot layout */
.thumb-card.active {
    border-color: var(--orange-warn);
    /* High-contrast orange indicator target anchor highlight frame */
}

/* Gallery Dash Indicators controls metrics bar */
.gallery-dashboard-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-xl);
}

.gallery-step-digits {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: var(--text-dark);
}

.gallery-step-digits .divider-slash {
    color: rgba(0, 0, 0, 0.15);
    margin: var(--spacing-none) var(--spacing-xs);
    font-weight: 400;
}

.gallery-step-digits .total-slides-count {
    font-size: 16px;
    color: var(--text-gray-placeholder);
}

.gallery-nav-buttons {
    display: flex;
    gap: var(--spacing-10);
}

.gal-nav-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.04);
    border: none;
    outline: none;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.gal-nav-circle.active,
.gal-nav-circle:hover {
    background-color: var(--accent-blue);
    color: var(--navy-dark);
}

/* ==========================================
   RIGHT HAND COLUMN: CONTENT SPECIFICATIONS BLOCK
   ========================================== */
.product-title-badge-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-base);
    margin-bottom: var(--spacing-xl);
}

.details-product-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(32px, 4.2vw, 48px);
    font-weight: 500;
    color: var(--text-dark);
    letter-spacing: -1.2px;
}

.product-category-pill-tag {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--navy-dark);
    background-color: transparent;
    border: 1px solid rgba(3, 33, 27, 0.3);
    padding: var(--spacing-sm) 18px;
    border-radius: 100px;
}

.details-product-copy {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-gray-light);
    margin-bottom: var(--spacing-xxl);
}

/* Minimalist Nutritional Row Settings metrics bar layout */
.product-nutritional-metrics-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: var(--spacing-base) var(--spacing-none);
    margin-bottom: var(--spacing-36);
    /* max-width: 540px; */
}

.nutri-feature-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    text-align: center;
    flex: 1;
}

.nutri-icon {
    font-size: 20px;
}

.nutri-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-dark);
    letter-spacing: 0.2px;
}

.nutri-divider-bar {
    width: 1px;
    height: 36px;
    background-color: rgba(0, 0, 0, 0.1);
}

/* Stepper Quantity + Large Pill Add to Cart Actions wrapper */
.details-action-purchase-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-base);
    margin-bottom: var(--spacing-4xl);
    /* max-width: 540px; */
}

.details-quantity-stepper {
    display: flex;
    align-items: center;
    background-color: var(--text-gray-placeholder) !important;
    border-radius: 100px;
    /* padding: var(--spacing-sm) var(--spacing-12); */
    height: 48px;
}

.details-step-btn {
    background: none;
    border: none;
    outline: none;
    width: 32px;
    height: 32px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.details-qty-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    min-width: 28px;
    text-align: center;
}

.btn-details-add-to-cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    background-color: var(--navy-dark);
    color: var(--white);
    border: 1px solid var(--navy-dark);
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-xl);
    border-radius: 100px;
    height: 48px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.details-cart-arrow-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--accent-blue);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

.btn-details-add-to-cart:hover {
    background-color: var(--accent-blue);
    color: var(--white);
    border-color: var(--accent-blue);
}

.btn-details-add-to-cart:hover .details-cart-arrow-badge {
    background-color: var(--navy-dark);
    color: var(--white);
    transform: translate(2px) rotate(45deg);
}

/* ==========================================
   COLLAPSIBLE DETAILS CONTENT ACCORDIONS DECK
   ========================================== */
.details-accordion-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.details-acc-item {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    width: 100%;
}

.details-acc-item:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.details-acc-trigger {
    width: 100%;
    background: none;
    border: none;
    outline: none;
    padding: var(--spacing-xl) var(--spacing-none);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    cursor: pointer;
    text-align: left;
    letter-spacing: 0.2px;
}

.details-acc-chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-dark);
    border-bottom: 2px solid var(--text-dark);
    transform: rotate(45deg);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.details-acc-item.active .details-acc-chevron {
    transform: rotate(-135deg);
}

.details-acc-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s ease;
}

.details-acc-item.active .details-acc-panel {
    max-height: 800px;
    /* Upper boundary threshold safe cushion */
    padding-bottom: var(--spacing-28);
}

.acc-panel-paragraph {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-gray-medium);
}

/* Nested Benefits Row Lists Group configs inside accordion 3 */
.benefits-nested-list-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.benefit-row-component {
    display: flex;
    gap: var(--spacing-base);
    align-items: flex-start;
}

.benefit-icon-outer-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.benefit-text-block h4 {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--spacing-xs);
}

.benefit-text-block p {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-gray-light);
}


/* ==========================================
   STATIC SPLIT LAYOUT MASTER STYLES
   ========================================== */
.legal-document-section {
    width: 100%;
    background-color: var(--bg-panel);
    /* Matching clean bone-white template tone */
    padding: 60px var(--spacing-none);
    overflow: hidden;
}

/* @media (min-width: 992px) {
    .legal-document-section {
        padding: var(--spacing-6xl) var(--spacing-none) var(--spacing-7xl);
    }
} */

.legal-split-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* gap: var(--spacing-4xl); */
    align-items: flex-start;
}

@media (min-width: 992px) {
    .legal-split-grid {
        /* 4fr to 8fr asymmetric split maps perfectly to image_2c8a0a.png proportions */
        grid-template-columns: 4fr 8fr;
        /* gap: var(--spacing-5xl); */
    }
}

/* ==========================================
   LEFT SIDEBAR: FIXED STICKY ENGINE PANELS
   ========================================== */
.legal-sticky-title-pane {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
}

@media (min-width: 992px) {
    .legal-sticky-title-pane {
        position: sticky !important;
        /* top: 140px; */
        padding-right: var(--spacing-lg);
    }
}

.legal-master-page-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(36px, 4.8vw, 56px);
    /* Fluid typography scale limits */
    font-weight: 500;
    line-height: 1.05;
    color: var(--navy-dark);
    /* Deep core theme dark green text marker */
    letter-spacing: -2px;
    margin: var(--spacing-none);
}

.legal-master-page-tagline {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-gray-light);
    max-width: 320px;
    margin: var(--spacing-none);
}

/* ==========================================
   RIGHT COLUMN: SCROLLABLE LEGAL TEXT CONTENT
   ========================================== */
.legal-content-scroll-pane {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xl);
    /* Consistent spacing structure between textual content rows */
    /* width: 100%; */
    padding-left: var(--spacing-lg);
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.legal-text-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-14);
}

.legal-section-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--navy-dark);
    letter-spacing: -0.5px;
}

.legal-body-copy {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-gray-dark);
    /* Clean contrast readability copy shade */
    text-align: justify;
    margin: var(--spacing-none);
}

/* ==========================================
   LIST SYSTEMS & SPECIAL LINKS STYLING
   ========================================== */
.legal-bullet-list,
.legal-contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding-left: var(--spacing-lg);
    margin: var(--spacing-none);
}

.legal-bullet-list li {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--blue-primary);
    /* Accentuated blue hue for active lists seen in prototype */
    font-weight: 500;
}

.legal-contact-list li {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-gray-dark);
    list-style: square;
    /* Clean geometric marker accent */
}

.legal-inline-link {
    color: var(--blue-primary);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.legal-inline-link:hover {
    border-bottom-color: var(--blue-primary);
}

/* ==========================================
   ORDER TRACKING FORM LAYOUT & CONFIGURATION
   ========================================== */
.order-track-section {
    position: relative;
    width: 100%;
    background-color: var(--bg-panel);
    /* Standard clean white panel surface layer */
    padding: 60px var(--spacing-none);
    overflow: hidden;
}

@media (min-width: 992px) {
    .order-track-section {
        padding: var(--spacing-7xl) var(--spacing-none);
    }
}

/* Precision Right Edge Gradient Wash Overlay */
.track-bg-gradient-wash {
    position: absolute;
    top: 0;
    right: 0;
    width: 60vw;
    height: 100%;
    background: radial-gradient(circle at 100% 30%, rgba(2, 108, 195, 0.18) 0%, rgba(0, 74, 132, 0.04) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.track-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4xl);
    position: relative;
    z-index: 5;
    align-items: flex-start;
}

@media (min-width: 992px) {
    .track-layout-grid {
        grid-template-columns: 5.2fr 6.8fr;
        /* Seamless asymmetric column mapping proportions */
        gap: var(--spacing-64);
    }
}

/* Left Typography Column Styles */
.track-info-left {
    display: flex;
    flex-direction: column;
}

.track-main-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--text-dark);
    letter-spacing: -1.5px;
    margin: var(--spacing-none);
}

/* Right Structural Input Deck Fields */
.track-form-right {
    width: 100%;
}

.premium-track-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-36);
    /* Spacing tracking individual inputs decks vertically */
}

.track-form-row-split-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-36) var(--spacing-xl);
}

@media (min-width: 640px) {
    .track-form-row-split-2 {
        grid-template-columns: 1fr 1fr;
    }
}

/* Pure CSS Floating Labels Framework Core */
.track-floating-group {
    position: relative;
    width: 100%;
}

.track-input-field {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.12);
    /* Clean flush trace line asset */
    padding: var(--spacing-10) var(--spacing-none);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-dark);
    outline: none;
    transition: all 0.3s ease;
}

.track-input-field:focus {
    border-bottom-color: var(--navy-dark);
    /* Track shifts cleanly to core theme dark green on focus */
}

.track-field-label {
    position: absolute;
    top: 10px;
    left: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--gray-blue);
    /* Elegant baseline layout teal-grey token */
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.required-asterisk {
    color: var(--accent-blue);
    /* Accurate brand secondary cyan indicator tone */
    margin-left: var(--spacing-xxs);
}

/* FLOATING TRIGGER MECHANICS SCALING TRANSFORMS */
.track-input-field:focus+.track-field-label,
.track-input-field:not(:placeholder-shown)+.track-field-label {
    top: -18px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-blue);
}

/* Primary Form Submission Call to Action Button */
.btn-track-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
    min-width: 200px;
    background-color: var(--navy-dark);
    /* Dark emerald background fill */
    border: 1px solid var(--navy-dark);
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-xl);
    border-radius: 100px;
    color: var(--white);
    font-family: inherit;
    font-size: 14.5px;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    margin-top: var(--spacing-base);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.track-arrow-circle-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--accent-blue);
    /* Vibrant high-contrast green indicator circle */
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Micro-interaction physics tracking premium transitions loops */
.btn-track-submit:hover {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--white);
}

.btn-track-submit:hover .track-arrow-circle-badge {
    background-color: var(--navy-dark);
    color: var(--white);
    transform: translate(2px) rotate(45deg);
    /* Crisp directional arrow rotation track */
}

/* ==========================================
   MY ACCOUNT OVERVIEW (My Orders & Coverage Requests)
   ========================================== */
.myacct-section {
    width: 100%;
    background-color: var(--bg-panel);
    padding: var(--spacing-4xl) var(--spacing-none) var(--spacing-none);
}

.myacct-section .container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}

@media (min-width: 992px) {
    .myacct-section .container {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-4xl);
    }
}

.myacct-block {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: var(--spacing-xl);
    box-shadow: 0 16px 48px rgba(0, 28, 50, 0.04);
}

.myacct-heading {
    font-family: var(--font-family);
    font-size: 19px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: var(--spacing-lg);
}

.myacct-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.myacct-block-header .myacct-heading {
    margin-bottom: var(--spacing-lg);
}

.myacct-tabs {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
}

.myacct-tab {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-blue);
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 100px;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.myacct-tab:hover {
    color: var(--navy-dark);
}

.myacct-tab.active {
    background: var(--navy-dark);
    border-color: var(--navy-dark);
    color: var(--white);
}

.myacct-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    max-height: 200px;
    overflow-y: auto;
    padding-right: var(--spacing-xs);
    scrollbar-width: thin;
    scrollbar-color: #d0d5dd transparent;
}

.myacct-list::-webkit-scrollbar {
    width: 6px;
}

.myacct-list::-webkit-scrollbar-track {
    background: transparent;
}

.myacct-list::-webkit-scrollbar-thumb {
    background: #d0d5dd;
    border-radius: 3px;
}

.myacct-list::-webkit-scrollbar-thumb:hover {
    background: var(--navy-dark);
}

.myacct-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-base);
    flex-wrap: wrap;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: var(--spacing-base);
}

.myacct-row-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-dark);
}

.myacct-row-sub {
    font-size: 12.5px;
    color: var(--gray-blue);
    margin-top: 2px;
}

.myacct-row-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.myacct-row-total {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-dark);
}

.myacct-track-link {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy-dark);
    text-decoration: underline;
    white-space: nowrap;
}

.myacct-empty {
    font-size: 13.5px;
    color: var(--gray-blue);
    padding: var(--spacing-lg) var(--spacing-none);
    text-align: center;
}

.myacct-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.myacct-badge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.myacct-badge-amber {
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
}

.myacct-badge-green {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

.myacct-badge-red {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
}

.myacct-badge-blue {
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
}

/* ==========================================
   ORDER STATUS MAIN AREA CORE STRUCTURAL SETTINGS
   ========================================== */
.order-status-section {
    width: 100%;
    background-color: var(--bg-panel);
    /* Matching clean white template platform background */
    padding: 60px var(--spacing-none) var(--spacing-5xl);
    overflow: hidden;
}

@media (min-width: 992px) {
    .order-status-section {
        padding: var(--spacing-6xl) var(--spacing-none) var(--spacing-7xl);
    }
}

.status-header-block {
    margin-bottom: var(--spacing-56);
}


.text-emerald {
    color: var(--accent-blue);
}

.status-main-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(30px, 4.5vw, 52px);
    font-weight: 500;
    line-height: 1.12;
    color: var(--text-dark);
    letter-spacing: -1.5px;
}

/* ==========================================
   PROGRESS TIMELINE BAR GRAPH SYSTEM
   ========================================== */
.status-progress-timeline-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: var(--spacing-none) auto 72px;
    padding: var(--spacing-none) var(--spacing-12);
}

.timeline-track-rail {
    position: absolute;
    top: 22px;
    /* Centers track lines perfectly relative to node badges diameter width scales */
    left: 70px;
    right: 40px;
    height: 3px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    z-index: 1;
}

.timeline-fill-bar-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--navy-dark);
    /* Thick solid theme dark jade tracking line */
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-nodes-delivery-container {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.status-timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-14);
    cursor: pointer;
}

.node-icon-circle-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

/* Active Completed Steps Styles mapping picture nodes exactly */
.status-timeline-node.completed-step .node-icon-circle-badge {
    background-color: var(--navy-dark);
    color: var(--white);
}

/* Inactive Pending Steps Styles mapping picture nodes exactly */
.status-timeline-node.pending-step .node-icon-circle-badge {
    background-color: var(--border-dark);
    color: var(--text-muted);
}

/* Hide fallback hover pulse icon vector layers natively */
.hover-pulse-icon-svg {
    position: absolute;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.checkmark-svg {
    transition: all 0.3s ease;
}

.node-caption-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

/* TIMELINE NODE HOVER MICRO-ANIMATION INTERACTIONS */
.status-timeline-node:hover .node-icon-circle-badge {
    background-color: var(--accent-blue);
    /* Fluorescent active mint accent green on selection hover */
    color: var(--navy-dark);
    transform: scale(1.1);
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.4);
}

.status-timeline-node:hover .checkmark-svg {
    opacity: 0;
    transform: scale(0.6);
}

.status-timeline-node:hover .hover-pulse-icon-svg {
    opacity: 1;
    transform: scale(1);
}

/* ==========================================
   BOTTOM ASYMMETRIC GRID OVERVIEW WRAPPER
   ========================================== */
.status-content-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4xl);
    align-items: flex-start;
}

@media (min-width: 1200px) {
    .status-content-layout-grid {
        grid-template-columns: 7.8fr 4.2fr;
        /* Matched 1:1 with your shopping cart split grid architecture */
        gap: var(--spacing-64);
    }
}

/* LEFT COLUMN BLOCKS STREAM */
.status-left-panel {
    display: flex;
    flex-direction: column;
}

.status-table-headers-row {
    display: grid;
    grid-template-columns: 1fr;
    padding-bottom: var(--spacing-base);
    padding-top: var(--spacing-base);
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.15);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
}

@media (min-width: 640px) {
    .status-table-headers-row {
        grid-template-columns: 6fr 3fr 3fr;
    }

    .th-col-qty,
    .th-col-tot {
        text-align: right;
    }

    .th-col-tot {
        padding-right: var(--spacing-12);
    }
}

.status-products-listing-deck {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-4xl);
}

.status-product-item-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-base);
    padding: var(--spacing-xl) var(--spacing-none);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    align-items: center;
}

@media (min-width: 640px) {
    .status-product-item-row {
        grid-template-columns: 6fr 3fr 3fr;
        gap: var(--spacing-none);
    }
}

.status-product-meta-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-base);
}

.status-row-item-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 4px;
    background-color: var(--border-light);
}

.status-product-text h3 {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.4;
    margin-bottom: var(--spacing-xs);
    max-width: 320px;
}

.status-row-unit-price {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy-dark);
}

.status-quantity-meta-cell {
    display: flex;
    align-items: center;
}

@media (min-width: 640px) {
    .status-quantity-meta-cell {
        justify-content: flex-end;
        padding-right: var(--spacing-28);
    }
}

/* Static locked pill indicator replacing interactive steppers */
.status-static-qty-pill {
    background-color: var(--border-medium);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dark);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.status-total-meta-cell {
    font-size: 16px;
    font-weight: 600;
    color: var(--navy-dark);
}

@media (min-width: 640px) {
    .status-total-meta-cell {
        text-align: right;
        padding-right: var(--spacing-12);
    }
}

/* ==========================================
   HARDCODED HARDCODED COMPLEMENTARY INFO CARDS GRID
   ========================================== */
.status-supplementary-grid-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    width: 100%;
}

@media (min-width: 640px) {
    .status-supplementary-grid-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

.status-data-card-info-box {
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: var(--spacing-xl) var(--spacing-lg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.01);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.status-data-card-info-box:hover {
    transform: translateY(-2px);
    border-color: rgba(3, 35, 28, 0.15);
}

.info-box-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-10);
    color: var(--navy-dark);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: var(--spacing-12);
    margin-bottom: var(--spacing-14);
}

.info-box-header h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-dark);
}

.info-box-header svg {
    color: var(--accent-blue);
}

/* Subtly illuminates header vectors with green highlight tokens */

.info-box-data-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-none);
    margin: var(--spacing-none);
    list-style: none;
}

.info-box-data-list li {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-gray-dark);
}

.info-box-data-list .lbl-dim {
    color: var(--gray-blue);
    font-weight: 500;
    margin-right: var(--spacing-xxs);
}

/* ==========================================
   RIGHT COLUMN: STICKY CHECKOUT RUNNING SUMMARY
   ========================================== */
@media (min-width: 1200px) {
    .status-right-panel-sidebar {
        position: sticky;
        top: 140px;
    }
}

.status-sticky-total-widget {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

@media (min-width: 1200px) {
    .status-sticky-total-widget {
        align-items: flex-end;
        text-align: right;
    }
}

.status-total-row-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    padding-bottom: var(--spacing-12);
}

.status-total-row-item.border-thick {
    border-bottom: 2px solid var(--navy-dark);
    margin-bottom: var(--spacing-base);
}

.status-summary-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-gray-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-summary-value {
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -0.5px;
}

.status-summary-disclaimer {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-gray-light);
    max-width: 340px;
}

/* ==========================================
   BLOG EDITORIAL UNIFIED DETAILS LAYOUT
   ========================================== */
.blog-detail-section {
    width: 100%;
    background-color: var(--bg-panel);
    /* Standard clean white layout baseline platform background */
    padding: var(--spacing-3xl) var(--spacing-none) var(--spacing-6xl);
}

.blog-editorial-container {
    /* max-width: 100%; */
    /* Restricts maximum boundary container width to maximize horizontal readability scales */
    margin: var(--spacing-none) auto;
}

.blog-top-navigation {
    margin-bottom: var(--spacing-3xl);
}

.btn-back-blogs {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-md);
    text-decoration: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.btn-back-blogs .back-icon-arrow {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-back-blogs:hover .back-icon-arrow {
    transform: translateX(-4px);
    /* Interactive reverse push movement curve */
}

/* ==========================================
   BLOG POST CONTENT GRAPHICS & HEADERS
   ========================================== */
.blog-main-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4xl);
    /* Standard vertical spatial grid line break margin */
}

.blog-post-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.blog-main-headline {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(32px, 5.2vw, 56px);
    /* Fluid typography scaling tracking viewport ranges */
    font-weight: 500;
    line-height: 1.1;
    color: var(--navy-dark);
    /* Rich signature theme dark forest green text marker */
    letter-spacing: -1.5px;
}

.blog-meta-pills-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

@media (min-width: 576px) {
    .blog-meta-pills-row {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-base);
    }
}

.meta-tag-category {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy-dark);
}

.meta-tag-date {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    color: var(--border-gray);
}

.blog-editorial-divider {
    border: none;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
    margin: var(--spacing-none);
    width: 100%;
}

/* ==========================================
   EDITORIAL PARAGRAPH BLOCKS TYPOGRAPHY
   ========================================== */
.blog-content-para-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
}

.blog-content-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(22px, 3.2vw, 32px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--navy-dark);
    letter-spacing: -0.6px;
}

.blog-paragraph-copy {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-gray-dark);
    /* Clean mid-contrast grey tone optimized for massive paragraphs scan loops */
    text-align: justify;
    margin: var(--spacing-none);
}

/* FULL-WIDTH RESPONSIVE SVG CONTAINER FRAMES */
.blog-editorial-media-frame {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    background-color: var(--border-light);
}

.blog-svg-media-asset {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ==========================================
   HORIZONTAL TWIN FEATURE SPLIT BLOCK ROW
   ========================================== */
.blog-editorial-features-split-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4xl);
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: var(--spacing-3xl);
}

@media (min-width: 768px) {
    .blog-editorial-features-split-row {
        grid-template-columns: 1fr 1fr;
        /* Forms a balanced symmetrical row array split cleanly */
        gap: var(--spacing-3xl);
    }
}

.editorial-feature-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-28);
}

.editorial-feature-column .blog-content-heading {
    font-size: 24px;
    margin-bottom: var(--spacing-md);
}

.feature-item-point {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.feature-item-point h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-blue);
    /* Distinct accent cyan visual color identifier matches image panels list headings */
    line-height: 1.3;
}

.feature-item-point p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-gray-medium);
    margin: var(--spacing-none);
}

/* ==========================================
   CONCLUSION BASE CALL TO ACTION BLOCK
   ========================================== */
.blog-conclusion-pitch-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: var(--spacing-3xl);
}

/* Custom Logo Images Styling */
.nav-logo-img {
    height: 52px;
    /* height: var(--spacing-3xl); */
    /* 40px */
    display: block;
    width: auto;
}

.footer-logo-img {
    /* height: 65px; */
    height: var(--spacing-4xl);
    /* 48px */
    display: block;
    width: auto;
}

/* Card details hover interactions links */
.product-title-link,
.blog-title-link {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.product-title-link:hover,
.blog-title-link:hover {
    color: var(--accent-blue);
}

/* ==========================================================================
   RESPONSIVE DESIGN SYSTEM OVERRIDES (MOBILE & TABLET BREAKPOINTS)
   ========================================================================== */

/* Breakpoint: Small Desktop / Laptop (max-width: 1200px) */
@media (max-width: 1200px) {
    .container {
        max-width: 100%;
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    /* Testimonial adjustment */
    .testimonial-layout-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .testi-cards-side-grid {
        margin-top: var(--spacing-xl);
    }

    /* Cart adjustment */
    .cart-layout-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    /* Checkout adjustment */
    .checkout-layout-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
}

/* Breakpoint: Tablet Portrait & Landscape (max-width: 991px) */
@media (max-width: 991px) {

    /* Header announcement */
    .top-announcement-header.glass-premium-announcement {
        padding: var(--spacing-xs) var(--spacing-none);
    }

    /* Main navbar placement */
    .main-navigation-navbar {
        top: 38px;
        padding: var(--spacing-base) var(--spacing-none);
    }

    /* Hide desktop horizontal menu links */
    .nav-links-menu {
        display: none !important;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100vw;
        background: var(--blue-secondary);
        /* matching --navy-dark-trans */
        backdrop-filter: blur(24px) saturate(120%);
        -webkit-backdrop-filter: blur(24px) saturate(120%);
        padding: var(--spacing-xxl) var(--spacing-lg);
        gap: var(--spacing-lg);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 1000;
        box-sizing: border-box;
    }

    /* Mobile active drawer */
    .nav-links-menu.mobile-active {
        display: flex !important;
    }

    .menu-link {
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 18px;
        padding: var(--spacing-sm) var(--spacing-none);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        width: 100%;
        text-align: left;
    }

    .menu-link.active {
        color: var(--white) !important;
    }

    .menu-link.active::after {
        display: none !important;
        /* Hide desktop dot */
    }

    .menu-link:last-child {
        border-bottom: none;
    }

    /* Hamburger trigger button cross animation */
    .mobile-menu-trigger-btn {
        display: flex !important;
    }

    .mobile-menu-trigger-btn.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-trigger-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-trigger-btn.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Cinematic Hero */
    .cinematic-hero-section {
        height: auto;
        min-height: 100vh;
        padding-top: 120px;
        padding-bottom: 60px;
    }

    .hero-content-container-grid {
        padding-top: var(--spacing-xl);
    }

    .hero-main-h1-title {
        font-size: clamp(34px, 7vw, 54px);
        margin-bottom: var(--spacing-xxl);
        letter-spacing: -1.2px;
    }

    .hero-lower-details-split {
        grid-template-columns: 1fr;
        gap: var(--spacing-xxl);
        align-items: flex-start;
    }

    .hero-summary-action-block {
        align-items: flex-start;
        text-align: left;
    }

    .hero-summary-statement {
        font-size: clamp(20px, 4.5vw, 28px);
        margin-bottom: var(--spacing-lg);
    }

    .hero-diagonal-transition-overlay {
        display: none !important;
    }

    /* About Us section slider and bottom row */
    /* .about-us-section {
        padding: var(--spacing-xxl) var(--spacing-none);
    } */

    .about-main-heading {
        font-size: clamp(26px, 4.5vw, 36px);
        line-height: 1.2;
    }

    .about-bottom-flex-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-lg);
    }

    /* Process timeline section */
    /* .process-section {
        padding: var(--spacing-xxl) var(--spacing-none);
    } */

    .process-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xxl);
    }

    /* Categories slider controls alignment */
    .category-header-flex {
        /* flex-direction: column; */
        align-items: flex-start;
        gap: var(--spacing-lg);
    }

    .slide-meta-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-lg);
        width: 100%;
    }

    .slide-action-controls {
        width: 100%;
        justify-content: space-between;
    }

    /* Real-Time Analysis graph */
    .analysis-graph-section {
        padding: var(--spacing-xxl) var(--spacing-lg);
    }

    .analysis-chart-data-wrapper {
        min-height: auto;
    }

    .node-connector-line {
        height: 35px;
        width: 2px;
    }

    /* Shop sidebar filters layout */
    .shop-layout-container {
        grid-template-columns: 1fr;
    }

    /* Product details section grid */
    .product-details-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xxl);
    }

    /* Big CTA video banner section in footer */
    .cta-inner-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    /* Back to top button styling overlays */
    .back-to-top-trigger {
        position: relative;
        top: 0;
        margin-bottom: var(--spacing-lg);
    }
}

/* Breakpoint: Small Mobile / Mobile S (max-width: 768px) */
@media (max-width: 768px) {

    /* Container elements alignment scale constraints */
    .container {
        padding-left: var(--spacing-base);
        padding-right: var(--spacing-base);
    }

    /* Process vertical timeline alignment rules */
    .process-right {
        padding-left: var(--spacing-xxl);
    }

    .timeline-line {
        left: 10px;
    }

    .icon-wrapper {
        left: -28px;
        width: 28px;
        height: 28px;
    }

    .icon-wrapper svg {
        width: 14px;
        height: 14px;
    }

    /* .step-content {
        padding-left: var(--spacing-xs);
    } */

    .step-content h3 {
        font-size: 17px;
    }

    .step-content p {
        font-size: 13.5px;
    }

    /* Inner Hero elements styling */
    .inner-page-hero-section {
        height: 300px;
    }

    .inner-hero-diagonal-panel {
        display: none !important;
    }

    .inner-hero-content-box h1 {
        font-size: 28px !important;
    }

    /* Footer controls */
    .footer-mid-row {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-lg);
    }

    .footer-brand-column {
        display: flex;
        justify-content: center;
    }

    .footer-links-column {
        display: flex;
        justify-content: center;
    }

    .footer-navigation-list {
        justify-content: center;
    }

    .footer-social-column {
        justify-content: center;
    }

    .footer-bottom-row {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-lg);
    }

    .footer-legal-container {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: center;
    }

    /* Forms inside footer and pages */
    .glass-form-wrapper {
        padding: var(--spacing-lg);
        width: 100%;
        box-sizing: border-box;
    }

    /* Cart rows item spacing overrides */
    .cart-item-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        padding: var(--spacing-lg) var(--spacing-none);
        text-align: center;
    }

    .cart-product-cell {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .cart-quantity-cell {
        justify-content: center;
    }

    .cart-actions-cell {
        justify-content: center;
        display: flex;
    }
}

/* Breakpoint: Tiny Mobile S (max-width: 480px) */
@media (max-width: 480px) {

    /* Announcement text size scale */
    .announcement-text {
        font-size: 10px;
        letter-spacing: 0.5px;
    }

    /* Product card and about us graphic cards constraints */
    .product-card {
        width: 100%;
        max-width: 100%;
    }

    .about-graphic-card {
        width: calc(100vw - 32px);
    }

    /* Ticker scrolling items margins override */
    .ticker-item {
        padding: 0 10px;
    }

    .ticker-text {
        font-size: 13px;
    }

    /* Header action view cart adjustments for narrow displays */
    .btn-view-cart {
        padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-md);
        font-size: 12px;
    }

    .btn-view-cart span {
        margin-right: var(--spacing-sm);
    }

    .cart-arrow-badge {
        width: 28px;
        height: 28px;
    }

    .nav-logo-img {
        height: 45px;
    }

    /* Hero button adjustment */
    .btn-hero-order-products {
        padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-md);
        font-size: 13px;
        width: 100%;
    }

    .hero-order-btn-arrow-badge {
        width: 32px;
        height: 32px;
    }

    /* Form input layout paddings adjustments */
    .form-input-row input {
        font-size: 13px;
    }
}

/* ==========================================================================
   REFOCUSED RESPONSIVE OVERRIDES & OVERFLOW CORRECTIONS (APPENDED)
   ========================================================================== */

/* Global scale & overflow corrections to prevent clipping and scrolling */
html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
    position: relative;
}

/* Fixes for all slider items to prevent sizing collisions and text wraps */
/* .cat-slide-item, */
.product-card,
.blog-slide-card,
.about-graphic-card {
    box-sizing: border-box !important;
}

/* Target Home page vs Shop page card dimensions to avoid grid conflicts */
.products-slider-track .product-card {
    width: calc(100vw - 64px) !important;
    max-width: 312px !important;
}

@media (min-width: 480px) {
    .products-slider-track .product-card {
        width: 312px !important;
    }
}

.shop-products-grid .product-card {
    width: 100% !important;
    max-width: 100% !important;
}

.blogs-slider-track .blog-slide-card {
    width: calc(100vw - 48px) !important;
    max-width: 400px !important;
}

@media (min-width: 480px) {
    .blogs-slider-track .blog-slide-card {
        width: 400px !important;
    }
}

/* Responsive Grid layout for subpage Blogs list */
.blogs-grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: var(--spacing-xxl) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.blogs-grid-container.margin-top-40 {
    margin-top: var(--spacing-3xl) !important;
}

.blogs-grid-container .blog-slide-card {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 991px) {
    .blogs-grid-container {
        grid-template-columns: 1fr !important;
    }

    .blogs-grid-container.margin-top-40 {
        margin-top: var(--spacing-xl) !important;
    }
}

/* Tablet & Mobile Breakpoint Adjustments (max-width: 991px) */
@media (max-width: 991px) {

    /* 1. Header Drawer Width bug fix */
    .nav-links-menu {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* 2. Hide Hero Diagonal Masks to prevent horizontal viewport stretch */
    .hero-diagonal-transition-overlay,
    .inner-hero-diagonal-panel {
        display: none !important;
    }

    /* 3. Correct Subpage Hero Height and Header spacing */
    .inner-page-hero-section {
        height: 320px !important;
        padding-top: 80px !important;
        box-sizing: border-box !important;
    }

    /* 4. Fix subpage Hero headings not scaling down */
    .inner-hero-h1-heading {
        font-size: clamp(26px, 6vw, 36px) !important;
        line-height: 1.2 !important;
    }

    /* 5. Center-aligned symmetrical background gradient wash on mobile */
    .about-bg-gradient-glow,
    .contact-bg-gradient-wash,
    .cart-bg-gradient-wash,
    .checkout-bg-gradient-wash,
    .track-bg-gradient-wash {
        width: 100% !important;
        right: auto !important;
        left: 0 !important;
        background: radial-gradient(circle at 50% 0%, rgba(67, 73, 196, 0.18) 0%, rgba(46, 49, 146, 0.03) 60%, transparent 100%) !important;
    }

    /* 6. Blog slider control placement on mobile: arrows on the right, view-all on the left */
    .blogs-controls-side {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .blogs-nav-arrows {
        order: 2 !important;
    }

    .btn-view-all-blogs {
        order: 1 !important;
    }

    /* 7. Categories slide responsive stacking */
    .cat-slide-item {
        /* width: 100% !important; */
        padding-right: var(--spacing-lg) !important;
    }

    .category-header-flex {
        /* flex-direction: column !important; */
        align-items: flex-start !important;
        gap: var(--spacing-md) !important;
    }

    .slide-action-controls {
        align-items: center !important;
        gap: var(--spacing-56) !important;
        width: auto !important;
        margin-top: var(--spacing-4xl);
    }

    .slide-description {
        margin-bottom: var(--spacing-5xl) !important;
        /* width: 80% !important; */
        color: var(--white);
    }

    .navigation-arrow-circles {
        justify-content: center !important;
    }

    .btn-order-now-link {
        /* width: 100% !important; */
        justify-content: center !important;
        /* box-sizing: border-box !important; */
    }

    /* 8. About page Prediction section vertical nodes to horizontal timeline rows */
    .analysis-graph-section {
        background-image: none !important;
    }

    .analysis-graph-section::before {
        content: "" !important;
        position: absolute !important;
        top: -50% !important;
        left: -50% !important;
        width: 200% !important;
        height: 200% !important;
        /* background-image: url('../images/images/analysis-bg.png') !important; */
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        transform: rotate(270deg) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    .analysis-graph-section>* {
        position: relative !important;
        z-index: 2 !important;
    }

    .analysis-chart-data-wrapper {
        min-height: auto !important;
    }

    .analysis-data-node {
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--spacing-md) !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .analysis-data-node .analysis-interactive-card {
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: var(--spacing-lg) !important;
    }

    .analysis-data-node .node-icon-wrapper {
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }

    .analysis-data-node .node-connector-line {
        width: 30% !important;
        height: 2px !important;
        margin-top: 0 !important;
        order: -1 !important;
        background: linear-gradient(to right, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    }
}

/* Mobile Breakpoint Adjustments (max-width: 768px) */
@media (max-width: 768px) {

    /* 1. Add to Cart button width constraints on mobile */
    .btn-add-to-cart {
        /* width: fit-content !important; */
        min-width: 160px !important;
        margin: var(--spacing-md) auto 0 auto !important;
    }

    /* 2. Process Section alignment */
    .process-right {
        padding-left: var(--spacing-xxl) !important;
    }

    .timeline-line {
        left: 18px !important;
    }

    .icon-wrapper {
        left: -28px !important;
        width: 28px !important;
        height: 28px !important;
    }

    .banner-column-left {
        flex-direction: row;
    }

    .banner-column-right {
        align-items: flex-end;
        text-align: right;
    }

    /* 4. FAQ Image constraints to prevent original size overflow */
    .faq-image-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* 5. Testimonial Card Spacing */
    .testimonial-glass-card {
        padding: var(--spacing-xl) !important;
    }

}

/* Small Mobile Breakpoint Adjustments (max-width: 480px) */
@media (max-width: 480px) {

    /* 1. Hero Order button fit-content override */
    .btn-hero-order-products {
        width: fit-content !important;
    }

    .circular-progress-badge {
        display: none;
    }

    .banner-column-left {
        flex-direction: column !important;
    }


    .banner-main-title {
        align-self: center !important;
    }

    .btn-verify-insurance {
        margin-top: var(--spacing-3xl) !important;
        margin-bottom: var(--spacing-3xl) !important;
        font-size: 13px !important;
        align-self: center !important;
        box-sizing: border-box !important;
    }

    .banner-right-heading {
        align-self: center !important;
    }

    .banner-static-pills {
        align-self: center !important;
        display: inline-flex;
        flex-direction: column;
        align-items: center !important;
    }

    .meta-headline-group {
        align-items: center !important;
        justify-content: center !important;
    }

    .slide-description {
        margin-bottom: 200px !important;
    }
}

@media (max-width: 375px) {
    .slide-action-controls {
        display: block;
        align-self: center;
    }

    .navigation-arrow-circles {
        justify-content: center !important;
        margin-bottom: var(--spacing-10);
    }

    .slide-description {
        margin-bottom: 310px !important;
    }
}

@media (max-width: 340px) {
    .slide-description {
        margin-bottom: 370px !important;
    }

    .blogs-controls-side {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   AAA DME JAMSTACK UPGRADE COMPONENTS STYLE
   ========================================================================== */

/* 1. Header Profile Button & Dropdown Actions */
.profile-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: var(--transition-smooth);
    padding: 0;
    margin-right: 12px;
    outline: none;
}

.profile-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.profile-icon-img {
    width: 20px;
    height: 20px;
    filter: invert(1);
    opacity: 0.85;
    transition: var(--transition-smooth);
}

.profile-icon-svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-light);
    opacity: 0.85;
    transition: var(--transition-smooth);
}

.profile-btn:hover .profile-icon-svg {
    opacity: 1;
    stroke: var(--accent-blue);
}

.profile-btn.logged-in {
    border: 2px solid var(--accent-blue);
    background: rgba(34, 197, 94, 0.08);
}

.active-badge-checkmark {
    position: absolute;
    bottom: -2px;
    right: -2px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    background: var(--accent-blue);
    border-radius: 50%;
    color: #03231c;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid #03231c;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Dropdown popover styling */
.profile-dropdown-card {
    position: absolute;
    width: 250px;
    background: rgba(10, 46, 38, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    backdrop-filter: blur(16px);
    animation: dropdownFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-header-block {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 12px;
}

.user-avatar-placeholder {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #03231c;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.user-meta-info {
    flex: 1;
    overflow: hidden;
}

.user-email-label {
    color: var(--text-light);
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}

.verified-patient-tag {
    color: var(--accent-blue);
    font-size: 11px;
    font-weight: 500;
    margin-top: 2px;
    display: inline-block;
}

.dropdown-links-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dropdown-links-list .drop-item {
    display: block;
    /* width: 100%; */
    padding: 8px 12px;
    border-radius: 6px;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-muted);
    text-decoration: none;
    font-family: var(--font-family);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.dropdown-links-list .drop-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--white);
}

.dropdown-links-list .btn-logout {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 6px;
    padding-top: 12px;
    color: var(--red-alert);
    font-weight: 600;
}

.dropdown-links-list .btn-logout:hover {
    background: rgba(239, 68, 68, 0.08);
    color: var(--red-alert);
}

/* 2. Glassmorphic Center Modal Overlays */
.auth-modal-overlay,
.request-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 35, 30, 0.5);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.auth-modal-overlay.modal-active,
.request-modal-overlay.modal-active {
    display: flex;
    opacity: 1;
}

.auth-modal-card,
.request-modal-card {
    background: rgba(10, 46, 38, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 480px;
    position: relative;
    padding: 40px;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.request-modal-card {
    max-width: 720px;
    padding: 32px;
    max-height: 90vh;
    overflow-y: auto;
}

.auth-modal-overlay.modal-active .auth-modal-card,
.request-modal-overlay.modal-active .request-modal-card {
    transform: translateY(0);
}

.auth-modal-close,
.request-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 28px;
    cursor: pointer;
    transition: var(--transition-smooth);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.auth-modal-close:hover,
.request-modal-close:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.05);
}

/* Tabs */
.auth-tabs-row {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 28px;
    gap: 16px;
}

.auth-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    padding: 10px 0;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.auth-tab-btn.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
    animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.auth-form-title {
    color: var(--white);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.auth-form-subtitle {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 24px;
    line-height: 1.5;
}

.auth-input-group,
.intake-field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.auth-input-group label,
.intake-field-group label {
    color: var(--text-light);
    font-size: 13px;
    font-weight: 500;
}

.auth-input-group input,
.intake-field-group input,
.intake-field-group textarea {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--white);
    font-family: var(--font-family);
    font-size: 14px;
    transition: var(--transition-smooth);
    outline: none;
    box-sizing: border-box;
    width: 100%;
}

.auth-input-group input:focus,
.intake-field-group input:focus,
.intake-field-group textarea:focus {
    border-color: var(--accent-blue);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.auth-error-banner {
    display: none;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 10px 14px;
    color: #f87171;
    font-size: 13px;
    margin-bottom: 20px;
}

/* .auth-submit-btn,
.intake-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--accent-blue);
    border: none;
    border-radius: 8px;
    padding: 14px 20px;
    color: #03231c;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-smooth);
    margin-top: 8px;
}

.auth-submit-btn:hover,
.intake-submit-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
} */

.auth-submit-btn,
.intake-submit-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: var(--accent-blue);
    border: 1px solid var(--accent-blue);
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
    border-radius: 100px;
    color: var(--navy-dark);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
    box-sizing: border-box;
}

.submit-arrow-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--navy-dark);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-submit-btn:hover .submit-arrow-badge,
.intake-submit-btn:hover .submit-arrow-badge {
    background-color: var(--accent-blue);
    color: var(--navy-dark);
    transform: rotate(45deg);
}


.auth-submit-btn:hover,
.intake-submit-btn:hover {
    background-color: var(--navy-dark);
    color: var(--white);
    border-color: var(--navy-dark);
}

.auth-form-footer {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 20px;
}

.auth-form-footer strong {
    color: var(--text-light);
}

/* 3. Medical Intake Request Form Overlay Styles */
.intake-header {
    margin-bottom: 24px;
}

.intake-title {
    color: var(--white);
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 6px;
}

.intake-subtitle {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 12px;
}

.intake-device-tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--accent-blue);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.request-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.request-modal-grid .full-width {
    grid-column: span 2;
}

@media (max-width: 600px) {
    .request-modal-grid {
        grid-template-columns: 1fr;
    }

    .request-modal-grid .full-width {
        grid-column: span 1;
    }
}

/* Drag and drop Prescription document */
.prescription-drag-drop {
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    position: relative;
}

.prescription-drag-drop:hover,
.prescription-drag-drop.drag-over {
    border-color: var(--accent-blue);
    background: rgba(34, 197, 94, 0.04);
}

.hidden-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.prescription-inner-preview .upload-icon {
    font-size: 24px;
    color: var(--accent-blue);
    margin-bottom: 8px;
    display: block;
}

.prescription-inner-preview p {
    font-size: 13px;
    color: var(--text-muted);
}

.prescription-inner-preview strong {
    color: var(--accent-blue);
}

.file-loaded-view {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.file-icon-loaded {
    font-size: 28px;
}

.file-loaded-info {
    text-align: left;
}

.file-name-txt {
    font-size: 14px;
    color: var(--white);
    font-weight: 600;
    margin: 0;
}

.file-size-txt {
    font-size: 11px;
    color: var(--accent-blue);
}

/* 4. Dual Action product card buttons */
.product-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
}

.product-card-actions .btn-add-to-cart,
.product-card-actions .btn-request-product {
    margin-top: 0 !important;
}

/* Card Add To Cart Disabled styling */
.btn-add-to-cart:disabled {
    background-color: var(--white-trans-09) !important;
    border-color: var(--white-trans-15) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-add-to-cart:disabled .cart-btn-arrow {
    background-color: var(--white-trans-09) !important;
    color: var(--text-muted) !important;
}

/* Card Request Product Button */
.btn-request-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: var(--blue-primary);
    border: 1px solid var(--blue-primary);
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
    border-radius: 100px;
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
    box-sizing: border-box;
}

.request-btn-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--navy-dark);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-request-product:hover {
    background-color: var(--navy-dark);
    color: var(--white);
    border-color: var(--navy-dark);
}

.btn-request-product:hover .request-btn-arrow {
    background-color: var(--blue-primary);
    color: var(--white);
    transform: rotatey(180deg);
}

/* Details Page Action Styling Sync */
.btn-details-request-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    background-color: var(--blue-primary);
    color: var(--white);
    border: 1px solid var(--blue-primary);
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-xl);
    border-radius: 100px;
    height: 48px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.btn-details-request-product .details-cart-arrow-badge {
    background-color: var(--navy-dark);
    color: var(--white);
}

.btn-details-request-product:hover {
    background-color: var(--navy-dark);
    color: var(--white);
    border-color: var(--navy-dark);
}

.btn-details-request-product:hover .details-cart-arrow-badge {
    background-color: var(--blue-primary);
    color: var(--white);
    transform: rotatey(180deg);
}

/* Details Page Add to Cart Disabled styling */
.btn-details-add-to-cart:disabled {
    background-color: var(--white-trans-09) !important;
    border-color: var(--white-trans-15) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-details-add-to-cart:disabled .details-cart-arrow-badge {
    background-color: var(--white-trans-09) !important;
    color: var(--text-muted) !important;
}

/* General design tweaks for prices in grids */
.price-container-block {
    display: flex;
    align-items: center;
    gap: 8px;
}

.price-original-strike {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: line-through;
    font-weight: 500;
}

.card-sale-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--red-alert);
    color: var(--white);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.card-prescription-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(3, 35, 28, 0.85);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #ef4444;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: bold;
}

.product-hcpcs-label {
    font-size: 11px;
    color: var(--text-muted);
}

.product-hcpcs-label strong {
    color: var(--accent-blue);
}

.specs-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    box-sizing: border-box;
}

.spec-item {
    font-size: 13px;
    line-height: 1.5;
}

.spec-label {
    color: var(--text-gray-dark);
    font-weight: 600;
}

.spec-value {
    color: var(--text-gray-light);
    font-weight: 500;
}

@media (max-width: 480px) {
    .specs-grid-layout {
        grid-template-columns: 1fr;
    }
}

/* 5. Success notifications banner overlay styles */
.success-notification-banner {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translate(-50%, -100px);
    z-index: 999999;
    background: #03231c;
    border: 1px solid var(--accent-blue);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 30px;
    padding: 12px 24px;
    max-width: min(420px, calc(100vw - 40px));
    box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.success-notification-banner.visible {
    transform: translate(-50%, 0);
}

.banner-body-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.banner-tick {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #03231c;
    font-weight: bold;
    font-size: 12px;
}

.banner-message {
    color: var(--text-light);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;
}

/* Collapsed profile links in mobile menu drawer */
.mobile-profile-only {
    display: none !important;
}

@media (max-width: 991px) {
    .mobile-profile-only {
        display: flex !important;
        align-items: center;
        gap: 8px;
        font-weight: bold !important;
    }
}

.mobile-profile-only.logged-in-link {
    color: var(--accent-blue) !important;
}

/* Product Details Pricing and Badges Section */
.details-pricing-block {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.details-price-tag {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.details-price-tag .price-original-strike {
    font-size: 18px;
    text-decoration: line-through;
    color: var(--text-muted);
}

.details-price-tag .price-actual {
    font-size: 32px;
    font-weight: 700;
    color: var(--navy-dark);
}

/* Standalone RX badge row — sits below price, not inline with it */
.details-rx-badge-row {
    display: flex;
    align-items: center;
}

.rx-required-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: rgba(239, 68, 68, 0.10);
    color: var(--red-alert);
    border: 1px solid rgba(239, 68, 68, 0.40);
    padding: 5px 12px;
    border-radius: 100px;
    white-space: nowrap;
}

/* Legacy rule kept for backward compat (inside price-tag flex) */
.details-price-tag .rx-required-label {
    font-size: 11px;
    margin-left: 0;
    vertical-align: middle;
}

/* Ensure responsiveness on small mobile screens */
@media (max-width: 480px) {
    .details-pricing-block {
        margin-top: var(--spacing-base);
        margin-bottom: var(--spacing-lg);
        gap: var(--spacing-sm);
    }

    .details-price-tag .price-actual {
        font-size: 26px;
    }

    .details-price-tag .price-original-strike {
        font-size: 16px;
    }

    .rx-required-label {
        font-size: 11px;
        padding: 4px 10px;
    }
}

/* Responsive media queries for product detail purchase row buttons */
@media (max-width: 768px) {
    .details-action-purchase-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .details-quantity-stepper {
        width: 100% !important;
        justify-content: space-between !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }

    .btn-details-add-to-cart,
    .btn-details-request-product {
        width: 100% !important;
        flex: none !important;
    }
}

/* ==========================================
   CART ENGINE: STATE MODIFIERS & VERIFICATION
   ========================================== */

/* Locked checkout button state */
.btn-go-to-checkout.checkout-locked-state,
.checkout-locked-state {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(0.4);
}

/* Validation indicator borders for input fields */
.validation-success {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 175, 185, 0.15) !important;
}

.validation-error {
    border-color: var(--red-alert) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

/* ==========================================
   CHECKOUT VERIFICATION CARD
   ========================================== */
.checkout-verification-card {
    background: linear-gradient(135deg, rgba(3, 35, 28, 0.04) 0%, rgba(0, 175, 185, 0.06) 100%);
    border: 1px solid rgba(0, 175, 185, 0.2);
    border-radius: 14px;
    padding: var(--spacing-xl) var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.verification-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--navy-dark);
    margin-bottom: var(--spacing-md);
}

.verification-card-header svg {
    color: var(--accent-blue);
    flex-shrink: 0;
}

.verification-card-hint {
    font-size: 12.5px;
    color: var(--text-gray-light);
    line-height: 1.5;
    margin-bottom: var(--spacing-base);
}

.voucher-input-row {
    display: flex;
    gap: var(--spacing-sm);
    align-items: stretch;
}

.voucher-input-field {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-base);
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dark);
    background: var(--white);
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.voucher-input-field:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 175, 185, 0.12);
}

.btn-verify-code {
    padding: var(--spacing-sm) var(--spacing-base);
    background-color: var(--navy-dark);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.25s ease;
}

.btn-verify-code:hover {
    background-color: var(--accent-blue);
}

/* Voucher status message */
.voucher-status-message {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-gray-light);
    margin-top: var(--spacing-md);
    line-height: 1.45;
    padding: 0;
    border-radius: 6px;
}

.voucher-status-message.status-success {
    color: #0d7f4f;
    background: rgba(13, 127, 79, 0.08);
    padding: var(--spacing-sm) var(--spacing-base);
    border: 1px solid rgba(13, 127, 79, 0.25);
    font-weight: 600;
}

.voucher-status-message.status-error {
    color: var(--red-alert);
    background: rgba(239, 68, 68, 0.07);
    padding: var(--spacing-sm) var(--spacing-base);
    border: 1px solid rgba(239, 68, 68, 0.2);
    font-weight: 600;
}

.voucher-status-message.status-warning {
    color: #9a5c00;
    background: rgba(245, 158, 11, 0.08);
    padding: var(--spacing-sm) var(--spacing-base);
    border: 1px solid rgba(245, 158, 11, 0.25);
    font-weight: 600;
}

/* ==========================================
   CART EMPTY STATE
   ========================================== */
.cart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px var(--spacing-xl);
    min-height: 300px;
}

.cart-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-blue);
    margin-bottom: var(--spacing-xl);
}

.cart-empty-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy-dark);
    margin-bottom: var(--spacing-sm);
}

.cart-empty-sub {
    font-size: 14px;
    color: var(--text-gray-light);
    max-width: 320px;
}

/* RX Required pill inside cart item */
.cart-rx-pill {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: rgba(239, 68, 68, 0.09);
    color: var(--red-alert);
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 2px 8px;
    border-radius: 100px;
    margin-top: 4px;
}

/* ==========================================
   FOOTER CONTACT COLUMN
   ========================================== */
.footer-contact-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text-gray-light);
    line-height: 1.55;
}

.footer-contact-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--accent-blue);
    display: flex;
    align-items: center;
}

.footer-contact-link {
    color: var(--text-gray-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact-link:hover {
    color: var(--accent-blue);
}

@media (max-width: 991px) {
    .footer-contact-column {
        width: 100%;
    }
}

/* ==========================================
   FOOTER CONTACT BAR (horizontal strip below mid-row)
   ========================================== */
.footer-contact-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    padding: var(--spacing-xl) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: var(--spacing-xl);
}

.footer-contact-bar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--spacing-base) var(--spacing-3xl);
    flex: 1;
    min-width: 200px;
    justify-content: center;
}

.footer-contact-bar .footer-contact-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 175, 185, 0.1);
    border: 1px solid rgba(0, 175, 185, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-blue);
}

.footer-contact-bar-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-contact-bar-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-blue);
    opacity: 0.9;
}

.footer-contact-bar-value {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.4;
}

.footer-contact-bar .footer-contact-link {
    font-size: 13.5px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact-bar .footer-contact-link:hover {
    color: var(--white);
}

.footer-contact-bar-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .footer-contact-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-base);
        padding: var(--spacing-xl) 0;
    }

    .footer-contact-bar-item {
        padding: var(--spacing-sm) 0;
        justify-content: flex-start;
        min-width: unset;
        width: 100%;
    }

    .footer-contact-bar-divider {
        display: none;
    }
}

/* ==========================================================================
   CART SINGLE COLUMN OVERRIDES & PER-PRODUCT GATING THEME LAYOUT
   ========================================================================== */
.cart-layout-grid {
    display: block !important;
    max-width: 1100px !important;
    margin: 0 auto 60px !important;
}

.cart-left-panel {
    /* width: 100% !important; */
    max-width: 100% !important;
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    border: 1px solid #e4e8ef;
    box-shadow: 0 16px 48px rgba(0, 28, 50, 0.04);
}

.cart-item-row {
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    border: 1px solid #e4e8ef;
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 24px;
    transition: transform 0.25s, box-shadow 0.25s;
}

.cart-item-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
}

.cart-item-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.cart-row-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 16px !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px dashed #e4e8ef !important;
    width: 100% !important;
    align-items: center !important;
}

.btn-row-request,
.cart-verify-input-wrap,
.btn-row-checkout {
    display: flex !important;
    align-items: center !important;
    height: 52px !important;
    border-radius: 26px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 4px 6px 4px 20px !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    border: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    cursor: pointer !important;
    font-family: 'Outfit', 'Inter', sans-serif !important;
}

/* Request button */
.btn-row-request {
    background: #03231c !important;
    color: #ffffff !important;
}

.btn-row-request:hover {
    background: #0d382e !important;
    box-shadow: 0 4px 14px rgba(3, 35, 28, 0.15) !important;
}

/* Verify input wrap */
.cart-verify-input-wrap {
    background: #ffffff !important;
    border: 2px solid #03231c !important;
    padding-left: 16px !important;
    cursor: default !important;
    justify-content: space-between !important;
}

.cart-verify-input-wrap:focus-within {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12) !important;
}

.cart-verify-input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    width: calc(100% - 42px) !important;
    color: #03231c !important;
    padding: 0 !important;
}

.cart-verify-input::placeholder {
    color: #98a2b3 !important;
    font-weight: 600 !important;
}

/* Verify button circle */
.btn-row-verify {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #03231c !important;
    color: #ffffff !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

.btn-row-verify:hover {
    background: #22c55e !important;
}

.btn-row-verify:disabled {
    background: #22c55e !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
}

/* Checkout button */
.btn-row-checkout {
    background: #22c55e !important;
    color: #ffffff !important;
}

.btn-row-checkout:hover:not(:disabled) {
    background: #16a34a !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.2) !important;
}

.btn-row-checkout:disabled {
    background: #eaecf0 !important;
    color: #98a2b3 !important;
    cursor: not-allowed !important;
}

/* Circle inside buttons */
.action-btn-circle {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

/* Special checkout circle */
.btn-row-checkout .action-btn-circle {
    background: rgba(255, 255, 255, 0.25) !important;
}

.btn-row-checkout:disabled .action-btn-circle {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #98a2b3 !important;
}

.btn-row-request:hover .action-btn-circle {
    transform: scale(1.05) !important;
    background: rgba(255, 255, 255, 0.25) !important;
}

.verification-status-label {
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
    display: block;
}

.verification-status-label.status-success {
    color: #16a34a;
}

.verification-status-label.status-error {
    color: #d92d20;
}

.verification-status-label.status-warning {
    color: #f79009;
}

/* Headers adjust for layout */
.cart-table-header {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1fr;
    padding: 0 24px 12px;
    border-bottom: 2px solid #f2f4f7;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .cart-item-row-top {
        /* flex-direction: column; */
        align-items: flex-start;
        gap: 15px;
    }

    .cart-row-actions {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .cart-table-header {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr !important;
    }
}

@media (max-width: 640px) {
    .cart-table-header {
        display: none;
    }

    .cart-item-row-top {
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px;
    }
}