/* --- BRAND DESIGN SYSTEM & RESET --- */
        :root {
            --white: #ffd9d9;
            --primary: #FF3737;
            --secondary: #FF6060;
            --highlight: #FA5C5C;
            --font-editorial: "Noto Serif Display", serif;
            --font-script: "Updock", cursive;
            --transition-magazine: all 1.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            border: none !important; /* Zero line/border policy */
            outline: none;
        }

        html {
            scroll-behavior: smooth;
            background-color: var(--white);
            color: var(--primary);
            font-family: var(--font-editorial);
        }

        body {
            overflow-x: hidden;
            width: 100%;
            background-color: var(--white);
        }

        /* Editorial Typography System */
        h1, h2, h3, h4 {
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: -0.05em;
            line-height: 0.85;
            color: var(--primary);
        }

        p {
            font-weight: 200; /* Thin editorial prose weight */
            line-height: 1.8;
            letter-spacing: 0.03em;
            font-size: 16px;
            color: var(--primary);
        }

        .script-word {
            font-family: var(--font-script);
            text-transform: none;
            font-weight: 400;
            margin-top: 3rem;
            letter-spacing: 0;
            color: #3e0000;
            line-height: 1;
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: var(--transition-magazine);
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: var(--transition-magazine);
        }

        /* Generous White Space Matrix Block */
        .editorial-magazine-spread {
            padding: 180px 8%;
            width: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
            background-color: var(--white);
        }

        /* High Fashion Dynamic Button System */
        .editorial-action-btn {
            font-family: var(--font-editorial);
            font-weight: 600;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.3em;
            padding: 22px 52px;
            background-color: var(--primary);
            color: var(--white);
            cursor: pointer;
            display: inline-block;
            transition: var(--transition-magazine);
            align-self: flex-start;
        }

        .editorial-action-btn:hover {
            background-color: var(--highlight);
            transform: translateY(-4px);
            letter-spacing: 0.35em;
        }

        /* Editorial Reveal States */
        .reveal-node {
            opacity: 0;
            transform: translateY(80px);
            transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1), transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reveal-node.revealed {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- STICKY MAGAZINE HEADER ARCHITECTURE --- */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100px;
            z-index: 1000;
            background-color: rgba(255, 255, 255, 0.98);
            padding: 50px 8%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: padding 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        header.shrink {
            padding: 22px 8%;
        }

        .logo-text {
            font-size: 28px;
            font-weight: 900;
            letter-spacing: -0.06em;
            color: var(--primary);
        }

        header nav ul {
            display: flex;
            list-style: none;
            gap: 44px;
        }

        header nav ul li a {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            position: relative;
            padding-bottom: 6px;
        }

        header nav ul li a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 1px;
            background-color: var(--highlight);
            transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        header nav ul li a:hover {
            color: var(--highlight);
        }

        header nav ul li a:hover::after, header nav ul li a.active-view-route::after {
            width: 100%;
        }

        .header-functional-tray {
            display: flex;
            align-items: center;
            gap: 36px;
        }

        .tray-icon {
            cursor: pointer;
            width: 20px;
            height: 20px;
            fill: var(--primary);
            transition: var(--transition-magazine);
        }

        .tray-icon:hover {
            fill: var(--highlight);
            transform: scale(1.1);
        }

        .cart-counter-wrap {
            position: relative;
            display: flex;
            align-items: center;
        }

        .cart-badge {
            font-size: 10px;
            font-weight: 700;
            color: var(--white);
            background-color: var(--primary);
            padding: 2px 6px;
            position: absolute;
            top: -10px;
            right: -12px;
            border-radius: 50%;
        }

        .hamburger-icon {
            display: none;
            flex-direction: column;
            gap: 7px;
            cursor: pointer;
            width: 30px;
            z-index: 1001;
        }

        .hamburger-icon span {
            width: 100%;
            height: 1px;
            background-color: var(--primary);
            transition: var(--transition-magazine);
        }

        /* Mobile Layout Menu Overlay Drawer */
        .mobile-magazine-drawer {
            position: fixed;
            top: 0;
            right: -100%;
            width: 100%;
            height: 100vh;
            background-color: var(--white);
            z-index: 999;
            padding: 180px 10%;
            display: flex;
            flex-direction: column;
            gap: 40px;
            transition: right 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .mobile-magazine-drawer.drawer-active {
            right: 0;
        }

        .mobile-magazine-drawer ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .mobile-magazine-drawer ul li a {
            font-size: 44px;
            font-weight: 800;
            text-transform: uppercase;
            color: var(--primary);
        }

        /* --- SEARCH AND CART PANELS --- */
        .editorial-search-overlay {
            position: fixed;
            top: -100%;
            left: 0;
            width: 100%;
            height: 350px;
            background-color: var(--white);
            z-index: 998;
            padding: 120px 8% 40px 8%;
            display: flex;
            align-items: center;
            transition: top 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .editorial-search-overlay.active {
            top: 0;
        }

        .search-input-field {
            width: 100%;
            font-family: var(--font-editorial);
            font-size: 40px;
            color: var(--primary);
            background: transparent;
            text-transform: uppercase;
            font-weight: 700;
        }

        .search-input-field::placeholder {
            color: var(--secondary);
            opacity: 0.3;
        }

        /* --- FRAME CONTAINER MANAGER --- */
        .magazine-view-page {
            display: none;
            padding-top: 130px;
            background-color: var(--white);
        }

        .magazine-view-page.active-view-page {
            display: block;
        }

        /* --- HOME EDITORIAL STRUCTURAL SPREADS --- */
        .hero-magazine-viewport {
            height: calc(100vh - 130px);
            width: 100%;
            display: grid;
            grid-template-columns: 50% 50%;
            align-items: center;
            padding: 0 8%;
            position: relative;
        }

        .hero-layout-text {
            padding-right: 10%;
            position: relative;
        }

        .hero-layout-text h1 {
            font-size: clamp(60px, 9vw, 140px);
            margin-bottom: 30px;
        }

        .hero-layout-text .script-word {
            font-size: clamp(40px, 6vw, 95px);
            position: absolute;
            top: -40px;
            left: 25%;
            transform: rotate(-5deg);
        }

        .hero-layout-image {
            height: 95%;
            width: 100%;
            overflow: hidden;
        }

        .hero-layout-image img {
            animation: slowCinematicScale 25s infinite alternate ease-in-out;
        }

        @keyframes slowCinematicScale {
            0% { transform: scale(1); }
            100% { transform: scale(1.15); }
        }

        /* Asymmetric Layout Definitions */
        .spread-asymmetric-bisect {
            display: grid;
            grid-template-columns: 55% 45%;
            gap: 8%;
            align-items: center;
        }

        .spread-asymmetric-bisect.inverse {
            grid-template-columns: 45% 55%;
        }

        /* Irregular Mosaic Collage Grid System */
        .collage-mosaic-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 36px;
            position: relative;
        }

        .mosaic-cell-1 { grid-column: 1 / 5; height: 390px; margin-top: 120px; }
        .mosaic-cell-2 { grid-column: 5 / 9; height: 600px; }
        .mosaic-cell-3 { grid-column: 9 / 13; height: 440px; margin-top: -30px; }

        /* Full Viewport Quote Overlay Construction */
        .immersive-quote-spread {
            height: 100vh;
            width: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0 12%;
            overflow: hidden;
        }

        .quote-ambient-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 0.12;
        }

        .quote-overlay-text-box {
            position: relative;
            z-index: 2;
        }

        .quote-overlay-text-box h2 {
            font-size: clamp(36px, 5vw, 75px);
            line-height: 1.1;
            margin-bottom: 30px;
        }

        /* Split Form Array Layout */
        .split-form-magazine-spread {
            display: grid;
            grid-template-columns: 45% 55%;
            gap: 10%;
            align-items: center;
        }

        .editorial-input-node {
            width: 100%;
            background: transparent;
            font-family: var(--font-editorial);
            font-size: 18px;
            padding: 24px 0;
            color: var(--primary);
            margin-bottom: 36px;
            text-transform: uppercase;
            font-weight: 300;
        }

        .editorial-input-node::placeholder {
            color: var(--secondary);
            opacity: 0.4;
        }

        /* --- GLOBAL EDITORIAL SUB-TITLES --- */
        .section-giant-title {
            font-size: clamp(48px, 8vw, 115px);
            text-transform: uppercase;
            font-weight: 800;
            line-height: 0.85;
            margin-bottom: 90px;
        }

        /* Triple Magazine Grid Stack */
        .triple-magazine-stack {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 50px;
            align-items: start;
        }

        /* Global Editorial Footer Architecture */
        footer {
            background-color: var(--white);
            padding: 150px 8% 60px 8%;
            display: grid;
            grid-template-columns: 40% 20% 20% 20%;
            gap: 50px;
        }

        .footer-branding-title {
            font-size: 34px;
            font-weight: 900;
            letter-spacing: -0.06em;
            margin-bottom: 24px;
        }

        .footer-column-header {
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 24px;
            letter-spacing: 0.2em;
            color: var(--secondary);
        }

        .footer-links-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 16px;
            font-size: 14px;
            font-weight: 300;
        }

        .footer-base-legal-row {
            grid-column: span 4;
            padding-top: 90px;
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            opacity: 0.7;
        }

        /* --- RESPONSIVE LAYOUT RESHAPING MATRIX --- */
        @media (max-width: 1024px) {
            header { padding: 30px 6%; }
            .editorial-magazine-spread { padding: 110px 6%; }
            .hero-magazine-viewport { grid-template-columns: 1fr; height: auto; padding: 40px 6%; gap: 50px; }
            .hero-layout-image { height: 480px; }
            .hero-layout-text { padding-right: 0; }
            .spread-asymmetric-bisect, .spread-asymmetric-bisect.inverse, .triple-magazine-stack, .split-form-magazine-spread, footer {
                grid-template-columns: 1fr !important;
                gap: 50px;
            }
            header nav, .header-functional-tray { display: none; }
            .hamburger-icon { display: flex; }
            .collage-mosaic-grid { display: flex; flex-direction: column; gap: 36px; }
            .mosaic-cell-1, .mosaic-cell-2, .mosaic-cell-3 { height: 450px; margin-top: 0; }
            .footer-base-legal-row { grid-column: span 1; flex-direction: column; gap: 24px; }
        }