        /* CSS RESET & VARIABLES */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            outline: none;
        }
        
        :root {
            --primary-red: #FF0000;
            --dusty-yellow: #D8D365;
            --deep-green: #2FA084;
            --soft-gray: #F3F4F4;
            --bright-teal: #00B7B5;
            --dark-text: #171717;
            --transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        }

        html, body {
            font-family: "Playfair Display", serif;
            background-color: var(--soft-gray);
            color: var(--dark-text);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* UTILITIES & TYPOGRAPHY DIRECTIONS */
        a {
            color: inherit;
            text-decoration: none;
            cursor: pointer;
            transition: var(--transition);
        }
        
        button {
            font-family: "Playfair Display", serif;
            background: none;
            border: none;
            cursor: pointer;
        }

        h1, h2, h3, h4, h5, h6 {
            font-weight: 400;
            line-height: 1.1;
        }

        p {
            font-weight: 400;
            line-height: 1.6;
            font-size: 1.1rem;
        }

        .uppercase-label {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            display: block;
            margin-bottom: 1rem;
        }

        /* CUSTOM UTILITY LAYOUTS */
        .btn-editorial {
            display: inline-block;
            padding: 1rem 2.5rem;
            border: 1px solid var(--dark-text);
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            position: relative;
            overflow: hidden;
            z-index: 1;
            transition: var(--transition);
        }

        .btn-editorial::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--primary-red);
            transform: translateY(101%);
            z-index: -1;
            transition: var(--transition);
        }

        .btn-editorial:hover {
            color: #ffffff;
            border-color: var(--primary-red);
        }

        .btn-editorial:hover::before {
            transform: translateY(0);
        }

        .btn-red {
            background-color: var(--primary-red);
            color: #fff;
            border: 1px solid var(--primary-red);
        }
        .btn-red:hover {
            background-color: var(--dark-text);
            border-color: var(--dark-text);
        }

        /* GLOBAL HEADER */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 50px;
            padding: 2rem 4rem;
            z-index: 1000;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            transition: var(--transition);
        }

        header.scrolled {
            background-color: var(--soft-gray);
            padding: 1rem 4rem;
            border-bottom: 2px solid var(--primary-red);
            box-shadow: 0 4px 30px rgba(0,0,0,0.05);
        }

        header .hdr-left {
            display: flex;
            margin-top: -5rem;

            flex-direction: column;
        }

        header .hdr-left span:first-child {
            font-weight: 700;
            letter-spacing: 0.1em;
        }

        header .hdr-left span:last-child {
            font-size: 0.7rem;
            letter-spacing: 0.2em;
            opacity: 0.7;
        }

        header .logo-container {
            font-size: 2.5rem;
                        margin-top: -5rem;

            font-weight: 700;
            position: relative;
        }

        header .logo-container a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary-red);
            transition: var(--transition);
        }

        header .logo-container:hover a::after {
            width: 100%;
        }

        header .hdr-right {
            display: flex;
            margin-top: -5rem;
            align-items: center;
            justify-content: flex-end;
            gap: 2rem;
        }

        header .nav-links {
            display: flex;
            gap: 2rem;

        }

        header .nav-links a:hover {
            color: var(--primary-red);
            font-style: italic;
        }

        header .hdr-icons {
            display: flex;
            gap: 1.5rem;
            align-items: center;
        }

        header .icon-btn {
            font-size: 1.2rem;
            position: relative;
            background: none;
            border: none;
            color: inherit;
        }

        header .icon-btn .counter {
            position: absolute;
            top: -8px;
            right: -10px;
            background-color: var(--primary-red);
            color: white;
            font-size: 0.65rem;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        /* HAMBURGER MENU */
        .hamburger {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
        }

        .mobile-menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--soft-gray);
            z-index: 999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 2rem;
            transform: translateY(-100%);
            transition: var(--transition);
            opacity: 0;
        }

        .mobile-menu-overlay.active {
            transform: translateY(0);
            opacity: 1;
        }

        .mobile-menu-overlay a {
            font-size: 2.5rem;
            font-weight: 600;
        }

        /* PAGE DISPENSARY ENGINE */
        .app-page {
            display: none;
            padding-top: 100px;
            min-height: 100vh;
        }

        .app-page.active-page {
            display: block;
        }

        #page-home {
            padding-top: 0;
        }

        /* CHAPTER SYSTEM DECOR */
        .chapter-title-tag {
            font-size: 4rem;
            font-style: italic;
            opacity: 0.15;
            margin-bottom: 2rem;
            font-weight: 300;
        }

        /* ---- HOMEPAGE 30 SECTIONS ---- */
        .hp-section {
            padding: 8rem 4rem;
            position: relative;
            width: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* S1: The Opening Story */
        #sec-opening {
            height: 100vh;
            padding: 0;
            background: url('https://i.pinimg.com/1200x/f6/9d/25/f69d25de8395b2a8b740b3052f30618e.jpg') center/cover no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #ffffff;
        }
        #sec-opening h2 {
            font-size: 5rem;
            max-width: 900px;
            margin-bottom: 2rem;
        }
        #sec-opening .scroll-down {
            position: absolute;
            bottom: 3rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            font-size: 0.8rem;
            letter-spacing: 0.3em;
        }
        #sec-opening .scroll-down::after {
            content: '';
            width: 1px;
            height: 60px;
            background-color: #ffffff;
            animation: scrolldown-anim 2s infinite alternate;
        }

        @keyframes scrolldown-anim {
            0% { transform: scaleY(0.3); transform-origin: top; }
            100% { transform: scaleY(1); transform-origin: top; }
        }

        /* S2: Introduction */
        #sec-intro { background-color: var(--soft-gray); display: grid; grid-template-columns: 1.5fr 1fr; gap: 4rem; align-items: center; }
        #sec-intro h2 { font-size: 4.5rem; margin-bottom: 2rem; }
        #sec-intro h2 span { display: block; }
        #sec-intro .reveal-img { width: 100%; height: 500px; background: url('https://i.pinimg.com/1200x/ab/e5/52/abe552da4217fec67f3711e7b60545c3.jpg') center/cover; clip-path: inset(0 0 0 0); transition: var(--transition); }

        /* S3: Discovery Index */
        #sec-index { background-color: #ffffff; }
        .index-row { display: grid; grid-template-columns: auto 1fr auto; padding: 2.5rem 0; border-bottom: 1px solid rgba(0,0,0,0.1); align-items: center; position: relative; cursor: pointer; }
        .index-row:hover { background-color: var(--soft-gray); padding-left: 2rem; padding-right: 2rem; }
        .index-row h3 { font-size: 2.5rem; }
        .index-row .row-desc { margin-left: 4rem; font-style: italic; opacity: 0.7; }
        .index-row .row-img-pop { position: absolute; right: 15%; top: -50%; width: 180px; height: 120px; background: url('https://i.pinimg.com/736x/67/46/44/674644859f8c8a7f336fb38aedff4893.jpg') center/cover; opacity: 0; transform: scale(0.8) rotate(-5deg); pointer-events: none; transition: var(--transition); }
        .index-row:hover .row-img-pop { opacity: 1; transform: scale(1) rotate(5deg); }

        /* S4: First Find */
        #sec-firstfind { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
        #sec-firstfind img { width: 100%; height: 650px; object-fit: cover; }

        /* S5: Sticky Product Scroll */
        #sec-stickyscroll { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 0; }
        .sticky-left { position: sticky; top: 0; height: 100vh; background: url('https://i.pinimg.com/1200x/b4/03/fe/b403fe69efc826e9fb6de7f15271d703.jpg') center/cover; transition: var(--transition); }
        .scroll-right { padding: 8rem 4rem; display: flex; flex-direction: column; gap: 15rem; }
        .scroll-chapter { min-height: 40vh; justify-content: center; display: flex; flex-direction: column; }
        .scroll-chapter h3 { font-size: 3rem; margin-bottom: 1.5rem; }

        /* S6: Object Archive */
        #sec-archive { background-color: #ffffff; }
        .archive-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; padding: 2rem 1rem; border-bottom: 1px solid rgba(0,0,0,0.1); align-items: center; font-size: 1.2rem; }
        .archive-row:hover { color: var(--primary-red); background-color: var(--soft-gray); font-style: italic; }

        /* S7: Color Story */
        #sec-colorstory { padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); height: 80vh; color: white; }
        .color-panel { display: flex; flex-direction: column; justify-content: space-between; padding: 4rem 2rem; position: relative; transition: var(--transition); cursor: pointer; }
        .color-panel.p-red { background-color: var(--primary-red); }
        .color-panel.p-yellow { background-color: var(--dusty-yellow); color: var(--dark-text); }
        .color-panel.p-green { background-color: var(--deep-green); }
        .color-panel.p-teal { background-color: var(--bright-teal); }
        .color-panel.p-gray { background-color: var(--dark-text); }
        .color-panel:hover { flex-grow: 1.4; }
        .color-panel h3 { font-size: 2.5rem; text-transform: uppercase; font-weight: 700; }

        /* S8: Collection Table */
        #sec-table { background-color: #ffffff; }
        .editorial-table { width: 100%; border-collapse: collapse; margin-top: 2rem; }
        .editorial-table th { text-align: left; padding: 1.5rem; border-bottom: 2px solid var(--dark-text); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.15em; }
        .editorial-table td { padding: 2rem 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.08); vertical-align: middle; transition: var(--transition); }
        .table-prod-cell { display: flex; align-items: center; gap: 1.5rem; font-weight: 700; }
        .table-prod-cell img { width: 70px; height: 70px; object-fit: cover; }
        .expanded-row-content { display: none; background-color: var(--soft-gray); padding: 2rem; }
        .editorial-table tr:hover td { background-color: rgba(0,0,0,0.01); }

        /* S9: The Slow Shop */
        #sec-slowshop { background-color: var(--dusty-yellow); }
        .slow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem; margin-top: 4rem; }
        .slow-card img { width: 100%; height: 400px; object-fit: cover; margin-bottom: 2rem; filter: sepia(0.2); }
        .slow-card h4 { font-size: 2rem; margin-bottom: 1rem; }

        /* S10: The Fast Find */
        #sec-fastfind { background-color: var(--primary-red); color: white; overflow: hidden; white-space: nowrap; }
        .marquee-container { display: flex; gap: 2rem; font-size: 6rem; font-weight: 900; animation: marquee-anim 25s linear infinite; }
        @keyframes marquee-anim { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }

        /* S11: The Shopping Map */
        #sec-map { background-color: #ffffff; min-height: 70vh; text-align: center; }
        .map-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 4rem; margin-top: 4rem; position: relative; }
        .map-node { width: 200px; height: 200px; border-radius: 50%; border: 1px solid var(--dark-text); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; cursor: pointer; transition: var(--transition); background-color: #fff; }
        .map-node:hover { background-color: var(--bright-teal); border-color: var(--bright-teal); color: white; transform: translateY(-10px); }

        /* S12: Editorial Product Grid */
        #sec-editgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; }
        .grid-item-giant { grid-column: span 6; grid-row: span 2; }
        .grid-item-vertical { grid-column: span 3; grid-row: span 2; }
        .grid-item-small { grid-column: span 3; }
        .grid-item-text { grid-column: span 3; background-color: #ffffff; padding: 3rem; display: flex; flex-direction: column; justify-content: center; border: 1px dashed var(--dark-text); }
        #sec-editgrid img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; max-height: 650px; }

        /* S13: Things We Keep */
        #sec-keep { background-color: var(--soft-gray); }
        .timeline-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 4rem; }
        .timeline-step { border-left: 2px solid var(--dark-text); padding-left: 2rem; position: relative; }
        .timeline-step::before { content: '↓'; position: absolute; left: -8px; top: 0; background: var(--soft-gray); padding: 0 2px; font-weight: 700; }

        /* S14: BuyVio Picks */
        #sec-picks { background-color: white; }
        .picks-flex { display: flex; flex-direction: column; gap: 6rem; margin-top: 4rem; }
        .pick-item { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; align-items: center; }
        .pick-item:nth-child(even) { grid-template-columns: 1.5fr 1fr; }
        .pick-item:nth-child(even) .pick-img-box { order: 2; }
        .pick-img-box img { width: 100%; height: 450px; object-fit: cover; }

        /* S15: Choice Room */
        #sec-choiceroom { background-color: var(--soft-gray); text-align: center; }
        .choice-buttons { display: flex; justify-content: center; gap: 1.5rem; margin: 3rem 0; flex-wrap: wrap; }
        .choice-btn { padding: 1rem 2.5rem; border: 1px solid var(--dark-text); text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.1em; transition: var(--transition); }
        .choice-btn.active, .choice-btn:hover { background-color: var(--dark-text); color: white; }
        .choice-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: left; min-height: 300px; }

        /* S16: Product Journal */
        #sec-journal { background-color: #ffffff; }
        .journal-magazine-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; margin-top: 4rem; }
        .journal-post img { width: 100%; height: 500px; object-fit: cover; margin-bottom: 2rem; }
        .journal-post h3 { font-size: 2.2rem; margin-bottom: 1rem; }

        /* S17: Unexpected Find */
        #sec-unexpected { background-color: var(--deep-green); color: white; text-align: center; }
        #sec-unexpected h2 { font-size: 5rem; margin-bottom: 2rem; }
        .unexp-box { max-width: 600px; margin: 0 auto; background-color: rgba(255,255,255,0.1); padding: 4rem; border-radius: 4px; backdrop-filter: blur(10px); }

        /* S18: Product Timeline */
        #sec-journey-timeline { background-color: white; overflow-x: auto; }
        .h-timeline { display: flex; gap: 4rem; margin-top: 4rem; min-width: 1200px; padding-bottom: 2rem; }
        .h-step { flex: 1; border-top: 2px solid var(--dark-text); padding-top: 2rem; }

        /* S19: Price Stories */
        #sec-pricestories { padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); min-height: 60vh; color: white; }
        .price-story-block { padding: 4rem 2rem; display: flex; flex-direction: column; justify-content: space-between; }
        .price-story-block:nth-child(1) { background-color: var(--deep-green); }
        .price-story-block:nth-child(2) { background-color: var(--bright-teal); }
        .price-story-block:nth-child(3) { background-color: var(--dusty-yellow); color: var(--dark-text); }
        .price-story-block:nth-child(4) { background-color: var(--primary-red); }

        /* S20: Wishlist Wall */
        #sec-wishwall { background-color: var(--soft-gray); }
        .wall-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 3rem; }

        /* S21: Customer Stories */
        #sec-custstories { background-color: white; }
        .story-quote-card { max-width: 900px; margin: 4rem auto; text-align: center; }
        .story-quote-card blockquote { font-size: 3rem; font-style: italic; line-height: 1.3; margin-bottom: 2rem; }

        /* S22: BuyVio Guide */
        #sec-guide { background-color: var(--soft-gray); }
        .guide-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; margin-top: 3rem; }
        .guide-box { background-color: white; padding: 2.5rem; border-top: 4px solid var(--primary-red); }

        /* S23: Shopping Conversation */
        #sec-conversation { background-color: #ffffff; text-align: center; max-width: 800px; margin: 0 auto; }
        .conv-bubble { background-color: var(--soft-gray); padding: 3rem; border-radius: 30px 30px 30px 0; font-size: 2.5rem; margin-bottom: 3rem; }

        /* S24: Editorial Review */
        #sec-review { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5rem; background-color: var(--soft-gray); }
        #sec-review img { width: 100%; height: 600px; object-fit: cover; }
        .rating-stars { color: var(--primary-red); font-size: 1.5rem; margin-bottom: 1rem; }

        /* S25: Collection Room */
        #sec-collroom { background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://i.pinimg.com/736x/ce/1b/84/ce1b84cad657c355226147ad081e0f85.jpg') center/cover; height: 80vh; color: white; display: flex; align-items: flex-end; padding: 6rem; }

        /* S26: New Arrivals */
        #sec-newarrivals { background-color: #ffffff; }
        .irregular-flow { display: flex; flex-wrap: wrap; gap: 4rem; margin-top: 4rem; }
        .flow-item { width: 30%; flex-grow: 1; }
        .flow-item:nth-child(3n) { width: 45%; }
        .flow-item img { width: 100%; height: 400px; object-fit: cover; }

        /* S27: The BuyVio Letter */
        #sec-letter { background-color: var(--bright-teal); color: white; text-align: center; padding: 8rem 4rem; }
        .form-container { max-width: 600px; margin: 3rem auto 0 auto; position: relative; }
        .editorial-input-group { display: flex; border-bottom: 2px solid white; }
        .editorial-input-group input { flex: 1; background: none; border: none; padding: 1rem; color: white; font-size: 1.2rem; font-family: inherit; }
        .editorial-input-group input::placeholder { color: rgba(255,255,255,0.6); }
        .editorial-input-group button { color: white; font-size: 1.5rem; padding: 0 1rem; }
        .form-message { margin-top: 1.5rem; font-style: italic; min-height: 24px; }

        /* S28: Unsubscribe Experience */
        #sec-unsub-home { background-color: var(--soft-gray); text-align: center; padding: 6rem 4rem; border: 1px dashed rgba(0,0,0,0.1); }

        /* S29: Contact Quick Block */
        #sec-contact-home { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; background-color: #ffffff; }

        /* S30: Final Story */
        #sec-finalstory { background-color: var(--primary-red); color: white; text-align: center; padding: 10rem 4rem; }
        #sec-finalstory h2 { font-size: 5.5rem; margin-bottom: 2rem; }

        /* PRODUCT PRESENTATION GENERAL COMPONENT */
        .premium-product-card {
            background-color: #ffffff;
            padding: 1.5rem;
            position: relative;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(0,0,0,0.05);
        }
        .premium-product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.05);
        }
        .premium-product-card img {
            width: 100%;
            height: 320px;
            object-fit: cover;
            margin-bottom: 1.5rem;
        }
        .premium-product-card .card-meta {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 1rem;
        }
        .premium-product-card h4 {
            font-size: 1.4rem;
            font-weight: 600;
        }
        .premium-product-card .price {
            font-size: 1.2rem;
            color: var(--primary-red);
            font-weight: 700;
        }
        .premium-product-card .actions {
            display: flex;
            gap: 1rem;
            margin-top: auto;
        }
        .premium-product-card .actions button {
            flex: 1;
            padding: 0.8rem;
            font-size: 0.8rem;
            border: 1px solid var(--dark-text);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            transition: var(--transition);
        }
        .premium-product-card .actions button:hover {
            background-color: var(--dark-text);
            color: white;
        }
        .premium-product-card .wishlist-heart-btn {
            position: absolute;
            top: 2rem;
            right: 2rem;
            background: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            color: #ccc;
            transition: var(--transition);
        }
        .premium-product-card .wishlist-heart-btn.active {
            color: var(--primary-red);
        }

        /* ---- DEDICATED APP PAGES ---- */
        .page-container {
            padding: 4rem;
            max-width: 1400px;
            margin: 0 auto;
        }
        .page-header {
            margin-bottom: 4rem;
            border-bottom: 2px solid var(--dark-text);
            padding-bottom: 2rem;
        }
        .page-header h1 {
            font-size: 4rem;
            font-weight: 700;
        }

        /* SHOP PAGE */
        .shop-layout {
            display: grid;
            grid-template-columns: 250px 1fr;
            gap: 4rem;
        }
        .filter-sidebar h3 {
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid #000;
            padding-bottom: 0.5rem;
        }
        .filter-group {
            margin-bottom: 2.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
        }
        .filter-group label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
        }
        .shop-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            background: #fff;
            padding: 1rem 2rem;
        }
        .shop-toolbar input {
            padding: 0.6rem 1rem;
            border: 1px solid #ccc;
            width: 300px;
            font-family: inherit;
        }
        .shop-toolbar select {
            padding: 0.6rem 1rem;
            border: 1px solid #ccc;
            font-family: inherit;
        }

        /* PRODUCT DETAIL PAGE */
        .pdp-grid {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 6rem;
        }
        .pdp-gallery img {
            width: 100%;
            height: 600px;
            object-fit: cover;
            margin-bottom: 2rem;
        }
        .pdp-info-sticky {
            position: sticky;
            top: 140px;
        }
        .pdp-title { font-size: 3.5rem; margin-bottom: 1rem; }
        .pdp-price { font-size: 2.5rem; color: var(--primary-red); margin-bottom: 2rem; font-weight: 700; }
        .pdp-story-box { background: white; padding: 2.5rem; margin-bottom: 2rem; border-left: 4px solid var(--deep-green); }
        .spec-table { width: 100%; border-collapse: collapse; margin-top: 2rem; }
        .spec-table td { padding: 1rem 0; border-bottom: 1px solid #ddd; }
        .spec-table td:first-child { font-weight: 700; text-transform: uppercase; font-size: 0.8rem; width: 30%; }

        /* CART & CHECKOUT PAGE */
        .cart-split { display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; }
        .cart-items-list { display: flex; flex-direction: column; gap: 2rem; }
        .cart-item-row { display: grid; grid-template-columns: auto 2fr 1fr 1fr auto; gap: 2rem; align-items: center; background: white; padding: 1.5rem; }
        .cart-item-row img { width: 90px; height: 90px; object-fit: cover; }
        .qty-controls { display: flex; align-items: center; gap: 0.5rem; }
        .qty-controls button { width: 30px; height: 30px; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; background: #fff; }
        .cart-summary-box { background: white; padding: 2.5rem; height: max-content; }
        .summary-row { display: flex; justify-content: space-between; margin-bottom: 1.5rem; font-size: 1.2rem; }

        /* FORM FIELD DESIGN */
        .editorial-form-group {
            margin-bottom: 2rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .editorial-form-group label {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-weight: 700;
        }
        .editorial-form-group input, .editorial-form-group textarea, .editorial-form-group select {
            padding: 1rem;
            border: 1px solid var(--dark-text);
            background: #fff;
            font-family: inherit;
            font-size: 1.1rem;
        }

        /* QUICK VIEW MODAL */
        .qv-modal-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.6);
            z-index: 2000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }
        .qv-modal-overlay.active { display: flex; }
        .qv-modal-content {
            background: var(--soft-gray);
            max-width: 1000px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            padding: 4rem;
        }
        .qv-close-btn { position: absolute; top: 2rem; right: 2rem; font-size: 2rem; cursor: pointer; }

        /* TOAST SYSTEM */
        .toast-container {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 3000;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .toast {
            background-color: var(--dark-text);
            color: white;
            padding: 1rem 2rem;
            border-left: 4px solid var(--primary-red);
            font-family: inherit;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            animation: toast-in 0.4s ease forwards;
        }
        @keyframes toast-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

        /* LEGAL PAGES STRUCTURE */
        .legal-block {
            margin-bottom: 3rem;
        }
        .legal-block h3 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            color: var(--dark-text);
        }
        .legal-block p {
            margin-bottom: 1rem;
            color: #444;
        }

        /* GLOBAL FOOTER */
        footer {
            background-color: var(--soft-gray);
            color: var(--dark-text);
            padding: 6rem 4rem 2rem 4rem;
            border-top: 1px solid rgba(0,0,0,0.1);
        }
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 4rem;
            margin-bottom: 6rem;
        }
        .footer-col h4 {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            margin-bottom: 2rem;
            position: relative;
        }
        .footer-col h4::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 30px;
            height: 2px;
        }
        .footer-col:nth-child(1) h4::after { background-color: var(--primary-red); }
        .footer-col:nth-child(2) h4::after { background-color: var(--deep-green); }
        .footer-col:nth-child(3) h4::after { background-color: var(--bright-teal); }
        .footer-col:nth-child(4) h4::after { background-color: var(--dusty-yellow); }
        
        .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
        .footer-col ul a:hover { color: var(--primary-red); padding-left: 5px; }

        .footer-giant-wordmark {
            font-size: 10vw;
            font-weight: 900;
            text-align: center;
            border-top: 1px solid rgba(0,0,0,0.05);
            padding-top: 2rem;
            margin-top: 4rem;
            letter-spacing: -0.03em;
            color: rgba(23,23,23,0.05);
            user-select: none;
        }

        /* RESPONSIVITY SYSTEM */
        @media(max-width: 1200px) {
            header { padding: 1.5rem 2rem; }
            header.scrolled { padding: 1rem 2rem; }
            .hp-section { padding: 6rem 2rem; }
            #sec-intro { grid-template-columns: 1fr; }
            #sec-firstfind { grid-template-columns: 1fr; gap: 3rem; }
            #sec-stickyscroll { grid-template-columns: 1fr; }
            .sticky-left { display: none; }
            .scroll-right { padding: 2rem 0; gap: 6rem; }
            #sec-editgrid { grid-template-columns: repeat(6, 1fr); }
            .grid-item-giant { grid-column: span 6; }
            .grid-item-vertical { grid-column: span 3; }
            .grid-item-small { grid-column: span 3; }
            .grid-item-text { grid-column: span 6; }
            .shop-layout { grid-template-columns: 1fr; }
            .pdp-grid { grid-template-columns: 1fr; gap: 4rem; }
            .cart-split { grid-template-columns: 1fr; }
        }

        @media(max-width: 768px) {
            header .nav-links { display: none; }
            .hamburger { display: block; }
            #sec-opening h2 { font-size: 3rem; }
            #sec-intro h2 { font-size: 2.5rem; }
            .index-row { grid-template-columns: 1fr auto; gap: 1rem; }
            .index-row .row-desc { margin-left: 0; display: block; }
            #sec-colorstory { grid-template-columns: 1fr; height: auto; }
            .color-panel { height: 250px; }
            .slow-grid { grid-template-columns: 1fr; }
            .timeline-container { grid-template-columns: 1fr; }
            .picks-flex { gap: 4rem; }
            .pick-item, .pick-item:nth-child(even) { grid-template-columns: 1fr; }
            .pick-item:nth-child(even) .pick-img-box { order: 0; }
            .choice-results { grid-template-columns: 1fr; }
            .journal-magazine-grid { grid-template-columns: 1fr; }
            .guide-grid { grid-template-columns: 1fr; }
            #sec-review { grid-template-columns: 1fr; }
            .irregular-flow { flex-direction: column; }
            .flow-item, .flow-item:nth-child(3n) { width: 100%; }
            #sec-contact-home { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
            .cart-item-row { grid-template-columns: auto 1fr; }
        }
