/* ================================================================
    ROOT VARIABLES & RESET
    ================================================================ */
    :root {
        --navy: #262439;
        --cream: #d9ccbc;
        --cream-light: #f0ebe4;
        --gold: #c9a96e;
        --white: #ffffff;
        --gray-100: #f8f6f3;
        --gray-200: #ede9e3;
        
        --gray-300: #d5cfc7;
        --gray-400: #b8b0a8;
        --gray-500: #9a928a;
        --gray-600: #7a736b;
        --gray-700: #5a5450;
        --gray-800: #3d3833;
        --shadow: 0 8px 32px rgba(38, 36, 57, 0.12);
        --shadow-hover: 0 16px 48px rgba(38, 36, 57, 0.20);
        --radius: 12px;
        --transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        --font-serif: 'Cormorant Garamond', serif;
        --font-sans: 'Inter', sans-serif;
        --slide-duration: 6s;
        --topbar-height: 40px;
        --navbar-height: 56px;
    }   

    html {
        scroll-behavior: smooth;
        scroll-padding-top: calc(var(--topbar-height) + var(--navbar-height) + 68px + 20px);
    }

    body {
        font-family: var(--font-sans);
        color: var(--navy);
        background: var(--white);
        line-height: 1.6;
        overflow-x: hidden;
    }

    img {
        max-width: 100%;
        display: block;
    }

    .container {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .serif {
        font-family: var(--font-serif);
    }

   
    .flex-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gap-8 {
        gap: 8px;
    }

    .mt-16 {
        margin-top: 16px;
    }

    body.modal-open,
    body.nav-open {
        overflow: hidden;
    }

    /* ================================================================
    SECTION HEADERS
    ================================================================ */
    .section-label {
        font-size: 0.75rem;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--gold);
        font-weight: 600;
        margin-bottom: 8px;
        display: inline-block;
    }

    .section-title {
        font-family: var(--font-serif);
        font-size: 2.8rem;
        font-weight: 700;
        line-height: 1.15;
        margin-bottom: 16px;
        letter-spacing: -0.02em;
        cursor: pointer;
        transition: color 0.2s;
    }

    .section-title:hover {
        color: var(--gold);
    }

    .section-title span {
        color: var(--gold);
    }

    .section-sub {
        font-size: 1.05rem;
        color: var(--gray-600);
        max-width: 580px;
        line-height: 1.7;
    }

    .section-header {
        text-align: center;
        margin-bottom: 52px;
    }

    .section-header .section-sub {
        margin: 0 auto;
    }

    /* ================================================================
    BUTTONS
    ================================================================ */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 34px;
        border-radius: 60px;
        font-weight: 600;
        font-size: 0.9rem;
        letter-spacing: 0.4px;
        transition: var(--transition);
        cursor: pointer;
        border: none;
        font-family: var(--font-sans);
    }

    .btn-primary {
        background: var(--navy);
        color: var(--white);
    }
    .btn-primary:hover {
        background: #35324f;
        transform: translateY(-2px);
        box-shadow: var(--shadow-hover);
    }

    .btn-outline {
        background: transparent;
        color: var(--navy);
        border: 1.5px solid var(--navy);
    }
    .btn-outline:hover {
        background: var(--navy);
        color: var(--white);
        transform: translateY(-2px);
    }

    .btn-gold {
        background: var(--gold);
        color: var(--white);
    }
    .btn-gold:hover {
        background: #b8965a;
        transform: translateY(-2px);
        box-shadow: var(--shadow-hover);
    }

    .btn-cream {
        background: var(--cream);
        color: var(--navy);
    }
    .btn-cream:hover {
        background: #d0c2b0;
        transform: translateY(-2px);
    }

    .btn-sm {
        padding: 10px 24px;
        font-size: 0.8rem;
    }

    .btn-outline-light {
        background: transparent;
        color: var(--white);
        border: 1.5px solid rgba(255, 255, 255, 0.4);
    }
    .btn-outline-light:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: var(--white);
    }

    .btn-login {
        background: transparent;
        color: var(--white);
        border: 1.5px solid rgba(255, 255, 255, 0.4);
        padding: 8px 20px;
        font-size: 0.8rem;
    }
    .btn-login:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: var(--white);
    }

    .btn-logout {
        background: transparent;
        color: var(--gray-600);
        border: 1px solid var(--gray-300);
        padding: 6px 16px;
        font-size: 0.7rem;
    }
    .btn-logout:hover {
        background: #e74c3c;
        color: var(--white);
        border-color: #e74c3c;
    }

    .btn-maps {
        background: #4285F4;
        color: var(--white);
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 0.75rem;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: none;
        cursor: pointer;
        transition: var(--transition);
    }
    .btn-maps:hover {
        background: #3367d6;
        transform: translateY(-1px);
    }

    .btn-danger {
        background: #e74c3c;
        color: var(--white);
    }
    .btn-danger:hover {
        background: #c0392b;
        transform: translateY(-2px);
    }

    .btn-success {
        background: #2ecc71;
        color: var(--white);
    }
    .btn-success:hover {
        background: #27ae60;
        transform: translateY(-2px);
    }

    /* ================================================================
    TOP BAR
    ================================================================ */
    .top-bar-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 102;
        background: #262439;
        padding: 6px 0;
        height: var(--topbar-height);
    }

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

    .top-bar-wrapper .left {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.72rem;
        font-weight: 400;
        letter-spacing: 0.3px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .top-bar-wrapper .left i {
        color: var(--gold);
        font-size: 0.9rem;
    }

    .top-bar-wrapper .right {
        display: flex;
        gap: 24px;
    }

    .top-bar-wrapper .right a {
        color: rgba(255, 255, 255, 0.65);
        font-size: 0.68rem;
        font-weight: 400;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        transition: var(--transition);
    }

    .top-bar-wrapper .right a:hover {
        color: var(--gold);
    }

    /* ================================================================
    NAVBAR
    ================================================================ */
    .navbar {
        position: fixed;
        top: var(--topbar-height);
        left: 0;
        right: 0;
        z-index: 101;
        background: transparent;
        transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease;
        padding: 12px 0;
        height: var(--navbar-height);
        display: flex;
        align-items: center;
    }

    .navbar.scrolled {
        background: rgba(255, 255, 255, 0.96) !important;
        border-bottom: 1px solid rgba(217, 204, 188, 0.3) !important;
        box-shadow: 0 2px 24px rgba(38, 36, 57, 0.08) !important;
    }

    .navbar.transparent {
        background: transparent !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    .navbar.transparent .nav-left a,
    .navbar.transparent .nav-logo,
    .navbar.transparent .nav-right .nav-icon-btn,
    .navbar.transparent .btn-login,
    .navbar.transparent .nav-toggle span {
        color: var(--white);
    }

    .navbar.transparent .btn-login {
        border-color: rgba(255, 255, 255, 0.4);
    }

    .navbar:hover {
        background: rgba(255, 255, 255, 0.98) !important;
        border-bottom: 1px solid rgba(217, 204, 188, 0.3) !important;
        box-shadow: 0 2px 24px rgba(38, 36, 57, 0.08) !important;
    }

    .navbar:hover .nav-logo,
    .navbar:hover .nav-left a,
    .navbar:hover .nav-icon-btn,
    .navbar:hover .btn-login,
    .navbar:hover .nav-user .user-name {
        color: var(--navy) !important;
    }

    .navbar:hover .nav-logo span {
        color: var(--gold) !important;
    }

    .navbar:hover .nav-toggle span {
        background: var(--navy) !important;
    }

    .navbar:hover .btn-login {
        border-color: var(--gold) !important;
    }

    .navbar:hover .btn-login:hover {
        background: var(--gold) !important;
        color: var(--white) !important;
    }

    .navbar .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        position: relative;
    }

    .nav-logo {
        flex: 0 0 auto;
        font-family: var(--font-serif);
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--white);
        letter-spacing: 1px;
        transition: color 0.3s ease;
        margin-right: 32px;
    }

    .nav-logo span {
        color: var(--gold);
    }

    .nav-logo small {
        font-size: 0.55rem;
        font-weight: 400;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.6);
        font-family: var(--font-sans);
        margin-left: 4px;
        transition: color 0.3s ease;
    }

    .navbar.scrolled .nav-logo,
    .navbar.scrolled .nav-logo small,
    .navbar.scrolled .nav-left a,
    .navbar.scrolled .nav-icon-btn,
    .navbar.scrolled .btn-login,
    .navbar.scrolled .nav-user .user-name {
        color: var(--navy) !important;
    }

    .navbar.scrolled .nav-logo small {
        color: var(--gray-600);
    }

    .nav-left {
        flex: 1;
        display: flex;
        gap: 28px;
        align-items: center;
    }

    .nav-left>li {
        position: relative;
        list-style: none;
    }

    .nav-left a {
        font-size: 0.72rem;
        font-weight: 500;
        color: var(--white);
        transition: var(--transition);
        position: relative;
        letter-spacing: 0.3px;
        white-space: nowrap;
        display: inline-block;
        padding: 4px 0;
    }

    .nav-left a .dropdown-arrow {
        font-size: 0.55rem;
        margin-left: 4px;
        opacity: 0.5;
        transition: var(--transition);
    }

    .nav-left a:hover .dropdown-arrow {
        opacity: 1;
        transform: rotate(180deg);
    }

    .nav-left a:hover {
        color: var(--gold);
    }

    .nav-left>li::after {
        content: '';
        position: absolute;
        bottom: -20px;
        left: 0;
        right: 0;
        height: 24px;
        background: transparent;
        pointer-events: auto;
        z-index: 99;
    }

    /* ================================================================
    MEGA MENU
    ================================================================ */
    .mega-menu-full,
    .gift-mega-menu,
    .discover-mega-menu {
        position: fixed;
        left: 0;
        right: 0;
        top: calc(var(--topbar-height) + var(--navbar-height));
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(217, 204, 188, 0.3);
        box-shadow: 0 8px 32px rgba(38, 36, 57, 0.08);
        padding: 32px 40px;
        z-index: 100;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
        visibility: hidden;
        display: flex;
        justify-content: center;
    }

    .nav-left>li:hover .mega-menu-full,
    .nav-left>li:focus-within .mega-menu-full,
    .mega-menu-full:hover,
    .nav-left li.has-gift-dropdown:hover .gift-mega-menu,
    .nav-left li.has-gift-dropdown:focus-within .gift-mega-menu,
    .gift-mega-menu:hover,
    .nav-left li.has-discover-dropdown:hover .discover-mega-menu,
    .nav-left li.has-discover-dropdown:focus-within .discover-mega-menu,
    .discover-mega-menu:hover {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        visibility: visible;
    }

    .mega-menu-full .inner,
    .gift-mega-menu .inner {
        max-width: 1240px;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 40px;
        align-items: start;
    }

    .mega-menu-full .inner .left,
    .gift-mega-menu .inner .left {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px 40px;
    }

    .mega-menu-full .inner .left .col h6,
    .gift-mega-menu .inner .left .col h6 {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--gold);
        font-weight: 600;
        margin-bottom: 10px;
        border-bottom: 1px solid var(--gray-200);
        padding-bottom: 6px;
    }

    .mega-menu-full .inner .left .col ul li,
    .gift-mega-menu .inner .left .col ul li {
        margin-bottom: 4px;
    }

    .mega-menu-full .inner .left .col ul li a,
    .gift-mega-menu .inner .left .col ul li a {
        font-size: 0.82rem;
        color: var(--gray-600);
        transition: var(--transition);
        display: inline-block;
        padding: 3px 0;
        font-weight: 400;
        letter-spacing: 0.2px;
    }

    .mega-menu-full .inner .left .col ul li a:hover,
    .gift-mega-menu .inner .left .col ul li a:hover {
        color: var(--gold);
        transform: translateX(4px);
    }

    .mega-menu-full .inner .right,
    .gift-mega-menu .inner .right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .mega-menu-full .inner .right .image-card,
    .gift-mega-menu .inner .right .image-card {
        border-radius: var(--radius);
        overflow: hidden;
        background: var(--gray-100);
        aspect-ratio: 1 / 1;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 16px;
        color: var(--white);
        font-weight: 500;
        font-size: 0.8rem;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease;
        cursor: pointer;
    }

    .mega-menu-full .inner .right .image-card:hover,
    .gift-mega-menu .inner .right .image-card:hover {
        transform: scale(1.02);
    }

    .mega-menu-full .inner .right .image-card .label,
    .gift-mega-menu .inner .right .image-card .label {
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(4px);
        padding: 4px 16px;
        border-radius: 60px;
        font-size: 0.7rem;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    /* ================================================================
    DISCOVER DROPDOWN - REDESIGNED
    ================================================================ */
    .discover-mega-menu .discover-inner {
        max-width: 1240px;
        width: 100%;
        display: grid;
        grid-template-columns: 220px 1fr 280px;
        gap: 32px;
        align-items: start;
        min-height: 320px;
    }

    .nav-left li.has-discover-dropdown {
        position: relative;
    }

    .nav-left li.has-discover-dropdown::after {
        content: '';
        position: absolute;
        bottom: -20px;
        left: 0;
        right: 0;
        height: 24px;
        background: transparent;
        pointer-events: auto;
        z-index: 99;
    }

    .discover-left {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-right: 24px;
        border-right: 1px solid rgba(217, 204, 188, 0.25);
    }

    .discover-nav-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px 10px 0;
        cursor: pointer;
        border-radius: 6px;
        transition: all 0.25s ease;
        font-family: var(--font-sans);
        font-size: 0.8rem;
        font-weight: 400;
        color: var(--gray-600);
        letter-spacing: 0.3px;
        position: relative;
    }

    .discover-nav-item:hover {
        color: var(--navy);
        background: rgba(38, 36, 57, 0.04);
    }

    .discover-nav-item.active {
        color: var(--navy);
        font-weight: 500;
    }

    .discover-nav-item.active::before {
        content: '';
        position: absolute;
        right: -1px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 20px;
        background: var(--gold);
        border-radius: 3px;
    }

    .discover-nav-item .discover-nav-label {
        flex: 1;
    }

    .discover-nav-item .discover-nav-arrow {
        font-size: 0.55rem;
        color: var(--gray-400);
        transition: all 0.25s ease;
        opacity: 0;
    }

    .discover-nav-item.active .discover-nav-arrow,
    .discover-nav-item:hover .discover-nav-arrow {
        opacity: 1;
        color: var(--gold);
    }

    .discover-middle {
        display: flex;
        flex-direction: column;
        padding: 4px 0;
    }

    .discover-sub-section {
        display: none;
        flex-direction: column;
        gap: 2px;
        animation: fadeIn 0.25s ease;
    }

    .discover-sub-section.active {
        display: flex;
    }

    .discover-sub-item {
        padding: 8px 14px;
        font-family: var(--font-sans);
        font-size: 0.82rem;
        font-weight: 400;
        color: var(--gray-600);
        transition: all 0.25s ease;
        border-radius: 6px;
        cursor: pointer;
        text-decoration: none;
        letter-spacing: 0.2px;
        position: relative;
    }

    .discover-sub-item:hover {
        color: var(--navy);
        background: rgba(38, 36, 57, 0.04);
        transform: translateX(4px);
    }

    .discover-sub-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) scaleX(0);
        width: 3px;
        height: 16px;
        background: var(--gold);
        border-radius: 3px;
        transition: transform 0.25s ease;
    }

    .discover-sub-item:hover::before {
        transform: translateY(-50%) scaleX(1);
    }

    .discover-right {
        display: flex;
        align-items: stretch;
    }

    .discover-image-container {
        position: relative;
        width: 100%;
        border-radius: var(--radius);
        overflow: hidden;
        aspect-ratio: 3/4;
        background: var(--gray-100);
    }

    .discover-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .discover-image-container:hover img {
        transform: scale(1.04);
    }

    .discover-image-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, transparent 40%, rgba(38, 36, 57, 0.60) 100%);
        display: flex;
        align-items: flex-end;
        padding: 20px 24px;
    }

    .discover-image-label {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
        letter-spacing: 0.5px;
    }

    /* ================================================================
    GIFT DROPDOWN - REDESIGNED
    ================================================================ */
    .gift-mega-menu-redesign {
        position: fixed;
        left: 0;
        right: 0;
        top: calc(var(--topbar-height) + var(--navbar-height));
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(217, 204, 188, 0.25);
        box-shadow: 0 8px 48px rgba(38, 36, 57, 0.10);
        padding: 28px 40px 32px;
        z-index: 100;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
        transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
        visibility: hidden;
        display: flex;
        justify-content: center;
    }

    .nav-left li.has-gift-dropdown:hover .gift-mega-menu-redesign,
    .nav-left li.has-gift-dropdown:focus-within .gift-mega-menu-redesign,
    .gift-mega-menu-redesign:hover {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        visibility: visible;
    }

    .gift-inner {
        max-width: 1240px;
        width: 100%;
        display: grid;
        grid-template-columns: 220px 1fr 280px;
        gap: 32px;
        align-items: start;
        min-height: 320px;
    }

    .gift-left {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-right: 24px;
        border-right: 1px solid rgba(217, 204, 188, 0.25);
    }

    .gift-nav-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px 10px 0;
        cursor: pointer;
        border-radius: 6px;
        transition: all 0.25s ease;
        font-family: var(--font-sans);
        font-size: 0.8rem;
        font-weight: 400;
        color: var(--gray-600);
        letter-spacing: 0.3px;
        position: relative;
    }

    .gift-nav-item:hover {
        color: var(--navy);
        background: rgba(38, 36, 57, 0.04);
    }

    .gift-nav-item.active {
        color: var(--navy);
        font-weight: 500;
    }

    .gift-nav-item.active::before {
        content: '';
        position: absolute;
        right: -1px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 20px;
        background: var(--gold);
        border-radius: 3px;
    }

    .gift-nav-item .gift-nav-label {
        flex: 1;
    }

    .gift-nav-item .gift-nav-arrow {
        font-size: 0.55rem;
        color: var(--gray-400);
        transition: all 0.25s ease;
        opacity: 0;
    }

    .gift-nav-item.active .gift-nav-arrow,
    .gift-nav-item:hover .gift-nav-arrow {
        opacity: 1;
        color: var(--gold);
    }

    .gift-middle {
        display: flex;
        flex-direction: column;
        padding: 4px 0;
    }

    .gift-sub-section {
        display: none;
        flex-direction: column;
        gap: 2px;
        animation: fadeIn 0.25s ease;
    }

    .gift-sub-section.active {
        display: flex;
    }

    .gift-sub-item {
        padding: 8px 14px;
        font-family: var(--font-sans);
        font-size: 0.82rem;
        font-weight: 400;
        color: var(--gray-600);
        transition: all 0.25s ease;
        border-radius: 6px;
        cursor: pointer;
        text-decoration: none;
        letter-spacing: 0.2px;
        position: relative;
    }

    .gift-sub-item:hover {
        color: var(--navy);
        background: rgba(38, 36, 57, 0.04);
        transform: translateX(4px);
    }

    .gift-sub-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) scaleX(0);
        width: 3px;
        height: 16px;
        background: var(--gold);
        border-radius: 3px;
        transition: transform 0.25s ease;
    }

    .gift-sub-item:hover::before {
        transform: translateY(-50%) scaleX(1);
    }

    .gift-right {
        display: flex;
        align-items: stretch;
    }

    .gift-image-container {
        position: relative;
        width: 100%;
        border-radius: var(--radius);
        overflow: hidden;
        aspect-ratio: 3/4;
        background: var(--gray-100);
    }

    .gift-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .gift-image-container:hover img {
        transform: scale(1.04);
    }

    .gift-image-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, transparent 40%, rgba(38, 36, 57, 0.60) 100%);
        display: flex;
        align-items: flex-end;
        padding: 20px 24px;
    }

    .gift-image-label {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
        letter-spacing: 0.5px;
    }

    /* ================================================================
    NAV RIGHT
    ================================================================ */
    .nav-right {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        align-items: center;
    }

    .nav-icon-btn {
        background: transparent;
        border: none;
        font-size: 1.1rem;
        color: var(--white);
        cursor: pointer;
        padding: 6px 8px;
        border-radius: 50%;
        transition: var(--transition);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-icon-btn .badge {
        position: absolute;
        top: -2px;
        right: -2px;
        background: var(--gold);
        color: var(--white);
        font-size: 0.55rem;
        font-weight: 600;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-icon-btn:hover {
        color: var(--gold);
        background: rgba(255, 255, 255, 0.1);
    }

    .navbar.scrolled .nav-icon-btn:hover {
        background: var(--gray-100);
        color: var(--gold);
    }

    .nav-toggle {
        display: none;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 4px;
        background: none;
        border: none;
        margin-left: 12px;
    }

    .nav-toggle span {
        width: 26px;
        height: 2.5px;
        background: var(--white);
        border-radius: 4px;
        transition: var(--transition);
    }

    .nav-toggle.open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .nav-toggle.open span:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle.open span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* ================================================================
    NAV USER
    ================================================================ */
    .nav-user {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .nav-user .avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--gold);
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.8rem;
        overflow: hidden;
        cursor: pointer;
        transition: var(--transition);
        flex-shrink: 0;
    }

    .nav-user .avatar:hover {
        opacity: 0.85;
    }

    .nav-user .avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .nav-user .user-name {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--white);
        cursor: pointer;
        transition: var(--transition);
    }

    .nav-user .user-name:hover {
        color: var(--gold);
    }

    .nav-user .logout-btn {
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.8rem;
        cursor: pointer;
        transition: var(--transition);
        padding: 2px 4px;
        border-radius: 4px;
    }

    .nav-user .logout-btn:hover {
        color: #e74c3c;
    }

    .nav-user .user-info-text {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
        margin-right: 4px;
    }

    .nav-user .user-info-text .role-text {
        font-size: 0.6rem;
        opacity: 0.6;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* ================================================================
    MOBILE NAV
    ================================================================ */
    .nav-mobile-wrapper {
        display: none;
        flex-direction: column;
        width: 100%;
        padding: 16px 0 8px;
        border-top: 1px solid rgba(217, 204, 188, 0.3);
        margin-top: 8px;
        background: var(--white);
        max-height: calc(100vh - var(--topbar-height) - var(--navbar-height) - 20px);
        overflow-y: auto;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1000;
        box-shadow: 0 16px 48px rgba(38, 36, 57, 0.15);
        border-radius: 0 0 var(--radius) var(--radius);
    }

    .nav-mobile-wrapper.open {
        display: flex;
    }

    .nav-mobile-wrapper a {
        padding: 10px 0;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--gray-800);
        border-bottom: 1px solid var(--gray-200);
        width: 100%;
    }

    .nav-mobile-wrapper a:last-child {
        border-bottom: none;
    }

    .nav-mobile-wrapper .mobile-cta {
        margin-top: 12px;
    }

    .nav-mobile-wrapper .mobile-cta .btn {
        width: 100%;
        justify-content: center;
    }

    .nav-mobile-wrapper .mobile-user {
        padding: 12px 0;
        border-bottom: 1px solid var(--gray-200);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .nav-mobile-wrapper .mobile-user .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--gold);
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 1rem;
        overflow: hidden;
    }

    .nav-mobile-wrapper .mobile-user .avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .nav-mobile-wrapper .mobile-user .info .name {
        font-weight: 600;
    }

    .nav-mobile-wrapper .mobile-user .info .role {
        font-size: 0.75rem;
        color: var(--gray-600);
    }

    .nav-mobile-wrapper .mobile-mm-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        font-size: 0.75rem;
        color: var(--gray-600);
        padding: 4px 0;
        border: none;
        background: none;
        font-family: var(--font-sans);
        font-weight: 500;
    }

    .nav-mobile-wrapper .mobile-mm-toggle i {
        transition: var(--transition);
        font-size: 0.65rem;
    }

    .nav-mobile-wrapper .mobile-mm-toggle.open i {
        transform: rotate(180deg);
    }

    .nav-mobile-wrapper .mega-menu-mobile {
        display: none;
        padding: 8px 0 12px 12px;
    }

    .nav-mobile-wrapper .mega-menu-mobile.open {
        display: block;
    }

    .nav-mobile-wrapper .mega-menu-mobile .mm-group {
        margin-bottom: 14px;
    }

    .nav-mobile-wrapper .mega-menu-mobile .mm-group .mm-label {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--gold);
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
    }

    .nav-mobile-wrapper .mega-menu-mobile .mm-group a {
        display: block;
        padding: 6px 0;
        font-size: 0.85rem;
        font-weight: 400;
        color: var(--gray-600);
        border-bottom: none;
    }

    .nav-mobile-wrapper .mega-menu-mobile .mm-group a:hover {
        color: var(--gold);
    }

    /* Mobile Gift & Discover */
    .nav-mobile-wrapper .gift-mobile-header,
    .nav-mobile-wrapper .discover-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        cursor: pointer;
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--gray-800);
        border-bottom: 1px solid var(--gray-200);
        width: 100%;
        background: none;
        border: none;
        font-family: var(--font-sans);
    }

    .nav-mobile-wrapper .gift-mobile-header i,
    .nav-mobile-wrapper .discover-mobile-header i {
        transition: transform 0.3s ease;
        font-size: 0.7rem;
        color: var(--gray-600);
    }

    .nav-mobile-wrapper .gift-mobile-header.open i,
    .nav-mobile-wrapper .discover-mobile-header.open i {
        transform: rotate(180deg);
    }

    .nav-mobile-wrapper .gift-mobile-body,
    .nav-mobile-wrapper .discover-mobile-body {
        display: none;
        padding: 8px 0 12px 12px;
    }

    .nav-mobile-wrapper .gift-mobile-body.open,
    .nav-mobile-wrapper .discover-mobile-body.open {
        display: block;
    }

    .nav-mobile-wrapper .gift-mobile-group-label {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--gold);
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
        margin-top: 8px;
    }

    .nav-mobile-wrapper .gift-mobile-item {
        display: block;
        padding: 8px 0;
        font-size: 0.85rem;
        font-weight: 400;
        color: var(--gray-600);
        border-bottom: none;
        text-decoration: none;
    }

    .nav-mobile-wrapper .gift-mobile-item:hover {
        color: var(--gold);
    }

    .nav-mobile-wrapper .gift-mobile-divider {
        height: 1px;
        background: var(--gray-200);
        margin: 8px 0;
    }

    .nav-mobile-wrapper .gift-mobile-image {
        margin: 12px 0 8px;
        border-radius: var(--radius);
        overflow: hidden;
        aspect-ratio: 16/9;
        background: var(--gray-100);
    }

    .nav-mobile-wrapper .gift-mobile-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .nav-mobile-wrapper .discover-mobile-item {
        display: block;
        padding: 8px 0;
        font-size: 0.85rem;
        font-weight: 400;
        color: var(--gray-600);
        border-bottom: none;
        text-decoration: none;
    }

    .nav-mobile-wrapper .discover-mobile-item:hover {
        color: var(--gold);
    }

    .nav-mobile-wrapper .discover-mobile-sub {
        padding: 4px 0 4px 16px;
        font-size: 0.8rem;
        font-weight: 400;
        color: var(--gray-600);
        border-bottom: none;
        text-decoration: none;
        display: block;
    }

    .nav-mobile-wrapper .discover-mobile-sub:hover {
        color: var(--gold);
    }

    .nav-mobile-wrapper .discover-mobile-divider {
        height: 1px;
        background: var(--gray-200);
        margin: 8px 0;
    }

    .nav-mobile-wrapper .discover-mobile-image {
        margin: 12px 0 8px;
        border-radius: var(--radius);
        overflow: hidden;
        aspect-ratio: 16/9;
        background: var(--gray-100);
    }

    .nav-mobile-wrapper .discover-mobile-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ================================================================
    SEARCH OVERLAY
    ================================================================ */
    .search-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 2000;
        background: rgba(38, 36, 57, 0.85);
        backdrop-filter: blur(8px);
        align-items: flex-start;
        justify-content: center;
        padding-top: 120px;
        animation: fadeIn 0.25s ease;
    }

    .search-overlay.open {
        display: flex;
    }

    .search-overlay .search-box {
        max-width: 640px;
        width: 90%;
        background: var(--white);
        border-radius: var(--radius);
        padding: 24px 28px;
        box-shadow: var(--shadow-hover);
        position: relative;
        max-height: 70vh;
        overflow-y: auto;
    }

    .search-overlay .search-box input {
        width: 100%;
        padding: 16px 20px;
        font-size: 1.1rem;
        border: none;
        border-bottom: 2px solid var(--gray-200);
        outline: none;
        transition: var(--transition);
        font-family: var(--font-sans);
        background: transparent;
    }

    .search-overlay .search-box input:focus {
        border-bottom-color: var(--gold);
    }

    .search-overlay .search-box .close-search {
        position: absolute;
        top: 12px;
        right: 16px;
        background: none;
        border: none;
        font-size: 1.4rem;
        color: var(--gray-600);
        cursor: pointer;
        transition: var(--transition);
    }

    .search-overlay .search-box .close-search:hover {
        color: var(--navy);
        transform: rotate(90deg);
    }

    .search-overlay .search-box .search-hints {
        margin-top: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .search-overlay .search-box .search-hints span {
        font-size: 0.75rem;
        background: var(--gray-100);
        padding: 4px 14px;
        border-radius: 60px;
        color: var(--gray-600);
        cursor: pointer;
        transition: var(--transition);
    }

    .search-overlay .search-box .search-hints span:hover {
        background: var(--gold);
        color: var(--white);
    }

    .search-overlay .search-box .search-results-list {
        margin-top: 16px;
        border-top: 1px solid var(--gray-200);
        padding-top: 12px;
    }

    .search-overlay .search-box .search-results-list .result-item {
        padding: 10px 12px;
        border-radius: 8px;
        cursor: pointer;
        transition: var(--transition);
        display: flex;
        align-items: center;
        gap: 12px;
        border-bottom: 1px solid var(--gray-100);
    }

    .search-overlay .search-box .search-results-list .result-item:hover {
        background: var(--gray-100);
    }

    .search-overlay .search-box .search-results-list .result-item .result-icon {
        color: var(--gold);
        width: 24px;
        text-align: center;
    }

    .search-overlay .search-box .search-results-list .result-item .result-name {
        font-weight: 500;
        flex: 1;
    }

    .search-overlay .search-box .search-results-list .result-item .result-category {
        font-size: 0.7rem;
        color: var(--gray-600);
        background: var(--gray-200);
        padding: 2px 10px;
        border-radius: 60px;
    }

    .search-overlay .search-box .search-results-list .result-item .highlight {
        background: rgba(201, 169, 110, 0.25);
        padding: 0 2px;
        border-radius: 2px;
        font-weight: 600;
    }

    /* ================================================================
    LOGIN DROPDOWN
    ================================================================ */
    .login-dropdown-wrapper {
        position: relative;
        display: inline-block;
    }

    .login-dropdown {
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        width: 420px;
        max-width: 90vw;
        max-height: 90vh;
        overflow-y: auto;
        background: var(--white);
        border-radius: var(--radius);
        box-shadow: 0 20px 60px rgba(38, 36, 57, 0.2);
        border: 1px solid rgba(217, 204, 188, 0.2);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px) scale(0.98);
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: 1000;
        padding: 0;
        pointer-events: none;
    }

    .login-dropdown-wrapper:hover .login-dropdown,
    .login-dropdown:hover {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .login-dropdown::before {
        content: '';
        position: absolute;
        top: -8px;
        right: 24px;
        width: 16px;
        height: 16px;
        background: var(--white);
        border-top: 1px solid rgba(217, 204, 188, 0.2);
        border-left: 1px solid rgba(217, 204, 188, 0.2);
        transform: rotate(45deg);
        z-index: -1;
    }

    .login-tabs {
        display: flex;
        border-bottom: 1px solid var(--gray-200);
        background: var(--gray-100);
        border-radius: var(--radius) var(--radius) 0 0;
        position: relative;
        padding: 4px;
        gap: 4px;
    }

    .login-tab {
        flex: 1;
        padding: 12px 16px;
        border: none;
        background: transparent;
        color: var(--gray-600);
        font-family: var(--font-sans);
        font-size: 0.8rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .login-tab:hover {
        color: var(--navy);
        background: rgba(38, 36, 57, 0.04);
    }

    .login-tab.active {
        background: var(--white);
        color: var(--navy);
        box-shadow: 0 2px 8px rgba(38, 36, 57, 0.06);
    }

    .login-tab.active i {
        color: var(--gold);
    }

    .login-close {
        padding: 8px 12px;
        border: none;
        background: transparent;
        color: var(--gray-600);
        cursor: pointer;
        transition: all 0.3s ease;
        border-radius: 8px;
        font-size: 1rem;
    }

    .login-close:hover {
        color: var(--navy);
        transform: rotate(90deg);
    }

    .login-form-container {
        display: none;
        padding: 24px 28px 28px;
        animation: fadeIn 0.3s ease;
    }

    .login-form-container.active {
        display: block;
    }

    .login-form-group {
        margin-bottom: 14px;
    }

    .login-form-group label {
        display: block;
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--gray-700);
        margin-bottom: 4px;
    }

    .login-form-group input,
    .login-form-group select {
        width: 100%;
        padding: 10px 14px;
        border: 1.5px solid var(--gray-200);
        border-radius: 8px;
        font-family: var(--font-sans);
        font-size: 0.9rem;
        transition: all 0.3s ease;
        background: var(--white);
        color: var(--navy);
    }

    .login-form-group input:focus,
    .login-form-group select:focus {
        outline: none;
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.1);
    }

    .login-form-group input::placeholder {
        color: var(--gray-400);
    }

    .login-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .password-wrapper {
        position: relative;
    }

    .password-wrapper input {
        padding-right: 44px;
    }

    .password-toggle {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: var(--gray-400);
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 4px;
        font-size: 0.9rem;
    }

    .password-toggle:hover {
        color: var(--navy);
    }

    .login-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 4px 0 16px;
        font-size: 0.8rem;
    }

    .remember-me {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--gray-600);
        cursor: pointer;
    }

    .remember-me input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--gold);
        cursor: pointer;
    }

    .forgot-password {
        color: var(--gold);
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .forgot-password:hover {
        text-decoration: underline;
    }

    .terms-check {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.78rem;
        color: var(--gray-600);
        cursor: pointer;
    }

    .terms-check input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--gold);
        cursor: pointer;
    }

    .terms-check a {
        color: var(--gold);
        text-decoration: none;
        font-weight: 500;
    }

    .terms-check a:hover {
        text-decoration: underline;
    }

    .login-submit-btn {
        width: 100%;
        padding: 12px;
        border: none;
        border-radius: 8px;
        background: var(--navy);
        color: var(--white);
        font-family: var(--font-sans);
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .login-submit-btn:hover {
        background: #35324f;
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(38, 36, 57, 0.15);
    }

    .social-login {
        margin: 18px 0 12px;
    }

    .social-divider {
        display: block;
        text-align: center;
        font-size: 0.7rem;
        color: var(--gray-500);
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 12px;
        position: relative;
    }

    .social-divider::before,
    .social-divider::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 30%;
        height: 1px;
        background: var(--gray-200);
    }

    .social-divider::before {
        left: 0;
    }
    .social-divider::after {
        right: 0;
    }

    .social-buttons {
        display: flex;
        justify-content: center;
        gap: 12px;
    }

    .social-btn {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1.5px solid var(--gray-200);
        background: var(--white);
        color: var(--gray-600);
        font-size: 1.1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .social-btn:hover {
        transform: translateY(-2px);
        border-color: var(--gold);
    }

    .social-btn.facebook:hover {
        background: #1877f2;
        color: var(--white);
        border-color: #1877f2;
    }

    .social-btn.google:hover {
        background: #ea4335;
        color: var(--white);
        border-color: #ea4335;
    }

    .social-btn.apple:hover {
        background: #000;
        color: var(--white);
        border-color: #000;
    }

    .demo-accounts {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--gray-200);
    }

    .demo-label {
        display: block;
        font-size: 0.65rem;
        color: var(--gray-500);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        text-align: center;
        margin-bottom: 8px;
    }

    .demo-grid {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .demo-btn {
        padding: 4px 14px;
        border: 1px solid var(--gray-200);
        background: var(--gray-100);
        border-radius: 60px;
        font-size: 0.65rem;
        font-weight: 500;
        color: var(--gray-600);
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans);
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .demo-btn:hover {
        border-color: var(--gold);
        color: var(--navy);
        background: var(--white);
        transform: translateY(-1px);
    }

    .demo-btn i {
        font-size: 0.6rem;
        color: var(--gold);
    }

    /* ================================================================
    CONFIRMATION OVERLAY
    ================================================================ */
    .confirmation-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 3000;
        background: rgba(38, 36, 57, 0.7);
        backdrop-filter: blur(8px);
        align-items: center;
        justify-content: center;
        animation: fadeIn 0.4s ease;
        padding: 20px;
    }

    .confirmation-overlay.open {
        display: flex;
    }

    .confirmation-modal {
        background: var(--white);
        border-radius: var(--radius);
        max-width: 520px;
        width: 100%;
        padding: 48px 40px 40px;
        box-shadow: var(--shadow-hover);
        text-align: center;
        position: relative;
        max-height: 90vh;
        overflow-y: auto;
    }

    .confirmation-modal .check-icon {
        font-size: 4rem;
        color: #2ecc71;
        background: rgba(46, 204, 113, 0.12);
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
    }

    .confirmation-modal h2 {
        font-family: var(--font-serif);
        font-size: 2rem;
        font-weight: 700;
        color: var(--navy);
    }

    .confirmation-modal h2 span {
        color: var(--gold);
    }

    .confirmation-modal .summary {
        background: var(--gray-100);
        border-radius: var(--radius);
        padding: 20px;
        margin: 20px 0;
        text-align: left;
        font-size: 0.9rem;
        line-height: 1.8;
    }

    .confirmation-modal .summary .row {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        border-bottom: 1px solid var(--gray-200);
    }

    .confirmation-modal .summary .row:last-child {
        border-bottom: none;
    }

    .confirmation-modal .summary .label {
        color: var(--gray-600);
        font-weight: 500;
    }

    .confirmation-modal .summary .value {
        font-weight: 600;
        color: var(--navy);
        text-align: right;
    }

    .confirmation-modal .fee-note {
        font-size: 0.8rem;
        color: var(--gray-600);
        background: var(--cream-light);
        padding: 12px;
        border-radius: 8px;
        margin: 12px 0 20px;
        border-left: 3px solid var(--gold);
    }

    .confirmation-modal .actions {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* ================================================================
    GLOBAL LOADER
    ================================================================ */
    .global-loader {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 5000;
        background: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(4px);
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 20px;
    }

    .global-loader.open {
        display: flex;
    }

    .global-loader .spinner {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 4px solid var(--gray-200);
        border-top-color: var(--gold);
        animation: spin 0.9s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .global-loader .loader-text {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        color: var(--navy);
        letter-spacing: 2px;
    }

    /* ================================================================
    PAGE
    ================================================================ */
    .page {
        min-height: 100vh;
        animation: fadeUp 0.5s ease;
    }

    @keyframes fadeUp {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .page:not(#page-home) {
        padding-top: calc(var(--topbar-height) + var(--navbar-height) + 40px);
    }

    #page-home {
        padding-top: 0;
    }

    
    /* ================================================================
    WHAT'S NEW SECTION
    ================================================================ */
    .whats-new-section {
        position: relative;
        width: 100%;
        height: 100vh;
        min-height: 700px;
        max-height: 900px;
        overflow: hidden;
        background: var(--navy);
    }

    .whats-new-section .whats-new-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .whats-new-section .whats-new-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .whats-new-section .whats-new-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(10, 10, 10, 0.10) 0%, rgba(10, 10, 10, 0.30) 40%, rgba(10, 10, 10, 0.55) 70%, rgba(10, 10, 10, 0.75) 100%);
        z-index: 2;
    }

    .whats-new-section .whats-new-content {
        position: absolute;
        bottom: 15%;
        left: 0;
        right: 0;
        z-index: 3;
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 60px;
    }

    .whats-new-section .whats-new-text {
        max-width: 720px;
    }

    .whats-new-section .whats-new-label {
        font-family: var(--font-sans);
        font-size: 0.9rem;
        font-weight: 400;
        letter-spacing: 6px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.6);
        display: block;
        margin-bottom: 12px;
    }

    .whats-new-section .whats-new-title {
        font-family: var(--font-serif);
        font-size: 4.2rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
        letter-spacing: -0.5px;
        line-height: 1.05;
        margin-bottom: 16px;
    }

    .whats-new-section .whats-new-title span {
        color: var(--gold);
        font-weight: 600;
    }

    .whats-new-section .whats-new-divider {
        width: 50px;
        height: 1.5px;
        background: var(--gold);
        margin-bottom: 24px;
    }

    .whats-new-section .whats-new-shop-links {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 8px;
    }

    .shop-link {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 14px 28px;
        border-radius: 60px;
        font-family: var(--font-sans);
        font-size: 0.85rem;
        font-weight: 500;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--white);
        cursor: pointer;
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        overflow: hidden;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .shop-link-women {
        background: rgba(201, 169, 110, 0.12);
        border-color: rgba(201, 169, 110, 0.2);
        animation: shopLinkPulse 3s ease-in-out infinite;
    }

    @keyframes shopLinkPulse {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(201, 169, 110, 0);
        }
        50% {
            box-shadow: 0 0 30px 2px rgba(201, 169, 110, 0.08);
        }
    }

    .shop-link-women .shop-link-icon {
        color: var(--gold);
    }

    .shop-link-collection {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.12);
    }

    .shop-link-collection .shop-link-icon {
        color: rgba(255, 255, 255, 0.7);
    }

    .shop-link:hover {
        transform: translateY(-3px) scale(1.02);
    }

    .shop-link-women:hover {
        background: var(--gold);
        border-color: var(--gold);
        color: var(--navy);
        box-shadow: 0 8px 40px rgba(201, 169, 110, 0.25);
    }

    .shop-link-women:hover .shop-link-icon {
        color: var(--navy);
    }

    .shop-link-collection:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.3);
        color: var(--white);
        box-shadow: 0 8px 40px rgba(255, 255, 255, 0.05);
    }

    .shop-link-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        transition: all 0.4s ease;
    }

    .shop-link-text {
        position: relative;
        z-index: 1;
    }

    .shop-link-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.65rem;
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 0.6;
    }

    .shop-link-women:hover .shop-link-arrow,
    .shop-link-collection:hover .shop-link-arrow {
        transform: translateX(6px);
        opacity: 1;
    }

    .shop-link-glow {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(201, 169, 110, 0.15);
        transform: translate(-50%, -50%);
        transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        pointer-events: none;
    }

    .shop-link-women:hover .shop-link-glow {
        width: 300px;
        height: 300px;
        opacity: 1;
    }

    .shop-link-collection:hover .shop-link-glow {
        width: 300px;
        height: 300px;
        background: rgba(255, 255, 255, 0.05);
        opacity: 1;
    }

    .shop-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 1.5px;
        background: var(--gold);
        transform: translateX(-50%);
        transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 0;
    }

    .shop-link-women::after {
        background: var(--navy);
    }

    .shop-link:hover::after {
        width: 60%;
        opacity: 1;
    }

    .shop-link-collection:hover::after {
        background: var(--white);
    }

    /* ================================================================
    LUXURY SPLIT SECTION
    ================================================================ */
    .luxury-split-section {
        width: 100%;
        height: 85vh;
        min-height: 560px;
        max-height: 900px;
        position: relative;
        overflow: hidden;
        background: var(--navy);
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .luxury-split-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: 100%;
        width: 100%;
    }

    .luxury-split-panel {
        position: relative;
        overflow: hidden;
        cursor: pointer;
        background: var(--gray-100);
        height: 100%;
        width: 100%;
        display: block !important;
    }

    .luxury-split-panel .panel-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        display: block;
        will-change: transform;
    }

    .luxury-split-panel:hover .panel-image {
        transform: scale(1.06);
    }

    .luxury-split-panel .panel-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.10) 0%, rgba(38, 36, 57, 0.30) 40%, rgba(38, 36, 57, 0.55) 70%, rgba(38, 36, 57, 0.75) 100%);
        transition: background 0.5s ease;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        padding: 40px;
        text-align: center;
        z-index: 2;
        pointer-events: none;
    }

    .luxury-split-panel:hover .panel-overlay {
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.15) 0%, rgba(38, 36, 57, 0.35) 40%, rgba(38, 36, 57, 0.60) 70%, rgba(38, 36, 57, 0.85) 100%);
    }

    .luxury-split-panel .panel-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
        width: 100%;
        max-width: 80%;
        z-index: 3;
        position: relative;
        pointer-events: none;
    }

    .luxury-split-panel:hover .panel-content {
        transform: translateY(-6px);
    }

    .luxury-split-panel .panel-heading {
        font-family: var(--font-serif);
        font-size: 3.2rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
        letter-spacing: 1px;
        line-height: 1.15;
        margin-bottom: 0;
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 1 !important;
        visibility: visible !important;
        text-align: center;
    }

    .luxury-split-panel:hover .panel-heading {
        transform: translateY(-4px);
    }

    .luxury-split-panel .panel-heading span {
        font-weight: 700;
        color: var(--gold);
    }

    .luxury-split-panel .panel-divider {
        width: 40px;
        height: 1.5px;
        background: rgba(255, 255, 255, 0.4);
        margin: 16px auto 18px;
        transition: width 0.5s ease, background 0.5s ease;
        display: block !important;
    }

    .luxury-split-panel:hover .panel-divider {
        width: 60px;
        background: var(--gold);
    }

    .luxury-split-panel .panel-cta {
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.9);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
        transition: color 0.4s ease, transform 0.4s ease;
        position: relative;
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block;
    }

    .luxury-split-panel .panel-cta::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 1.5px;
        background: var(--gold);
        transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .luxury-split-panel:hover .panel-cta {
        color: var(--white);
        transform: translateY(-2px);
    }

    .luxury-split-panel:hover .panel-cta::after {
        width: 100%;
    }

    /* ================================================================
    LUXURY COLLECTION SECTION
    ================================================================ */
    .luxury-collection-section {
        padding: 80px 0 72px;
        background: var(--white);
        position: relative;
    }

    .luxury-collection-section .container {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .luxury-collection-grid {
        display: grid;
        grid-template-columns: 40% 60%;
        gap: 40px;
        align-items: stretch;
    }

    .luxury-collection-image {
        position: relative;
        border-radius: 6px;
        overflow: hidden;
        height: 100%;
        min-height: 520px;
        background: var(--gray-100);
        cursor: pointer;
    }

    .luxury-collection-image .image-wrap {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .luxury-collection-image .image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        display: block;
    }

    .luxury-collection-image:hover .image-wrap img {
        transform: scale(1.04);
    }

    .luxury-collection-image .image-overlay {
        position: absolute;
        inset: 0;
        background: rgba(38, 36, 57, 0);
        transition: background 0.6s ease;
        display: flex;
        align-items: flex-end;
        padding: 32px;
    }

    .luxury-collection-image:hover .image-overlay {
        background: rgba(38, 36, 57, 0.12);
    }

    .luxury-collection-image .image-overlay .overlay-content {
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    }

    .luxury-collection-image .image-overlay .overlay-content .overlay-label {
        font-family: var(--font-serif);
        font-size: 1rem;
        font-weight: 400;
        font-style: italic;
        letter-spacing: 2px;
        opacity: 0.8;
    }

    .luxury-collection-image .image-overlay .overlay-content .overlay-title {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        margin-top: 2px;
    }

    .luxury-collection-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 8px 0;
    }

    .luxury-collection-header {
        text-align: center;
        margin-bottom: 32px;
    }

    .luxury-collection-header .collection-prefix {
        font-family: var(--font-sans);
        font-size: 0.65rem;
        font-weight: 400;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--gray-600);
        margin-bottom: 4px;
    }

    .luxury-collection-header .collection-title {
        font-family: var(--font-serif);
        font-size: 2.6rem;
        font-weight: 500;
        color: #1a1a1a;
        letter-spacing: -0.5px;
        line-height: 1.1;
    }

    .luxury-collection-header .collection-title span {
        color: var(--gold);
        font-weight: 600;
    }

    .luxury-collection-header .collection-sub {
        font-family: var(--font-sans);
        font-size: 0.8rem;
        font-weight: 300;
        color: var(--gray-600);
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-top: 6px;
    }

    .luxury-products-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .luxury-product-card {
        text-align: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .luxury-product-card .product-image-wrap {
        background: #f3f3f3;
        border-radius: 6px;
        padding: 20px;
        aspect-ratio: 3 / 4;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transition: background 0.3s ease;
        position: relative;
    }

    .luxury-product-card:hover .product-image-wrap {
        background: #f8f8f8;
    }

    .luxury-product-card .product-image-wrap img {
        max-width: 80%;
        max-height: 85%;
        object-fit: contain;
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        display: block;
    }

    .luxury-product-card:hover .product-image-wrap img {
        transform: scale(1.04);
    }

    .luxury-product-card .product-name {
        font-family: var(--font-serif);
        font-size: 0.85rem;
        font-weight: 500;
        color: #1a1a1a;
        margin-top: 12px;
        line-height: 1.3;
        transition: color 0.3s ease;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .luxury-product-card:hover .product-name {
        color: var(--gold);
    }

    .luxury-product-card .product-collection {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: #b0b0b0;
        margin-top: 4px;
    }

    /* ================================================================
    LUXURY IMAGE STRIP
    ================================================================ */
    .luxury-image-strip {
        width: 100%;
        padding: 0;
        background: var(--white);
        overflow: hidden;
    }

    .luxury-image-strip .strip-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        width: 100%;
    }

    .luxury-image-strip .strip-item {
        position: relative;
        overflow: hidden;
        cursor: pointer;
        aspect-ratio: 3 / 4;
        background: var(--gray-100);
    }

    .luxury-image-strip .strip-item .strip-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
    }

    .luxury-image-strip .strip-item:hover .strip-image {
        transform: scale(1.06);
    }

    .luxury-image-strip .strip-item .strip-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.05) 0%, rgba(38, 36, 57, 0.20) 40%, rgba(38, 36, 57, 0.50) 75%, rgba(38, 36, 57, 0.70) 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        padding: 32px 20px 28px;
        text-align: center;
        transition: background 0.5s ease;
    }

    .luxury-image-strip .strip-item:hover .strip-overlay {
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.08) 0%, rgba(38, 36, 57, 0.25) 40%, rgba(38, 36, 57, 0.55) 75%, rgba(38, 36, 57, 0.80) 100%);
    }

    .luxury-image-strip .strip-item .strip-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        transform: translateY(0);
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .luxury-image-strip .strip-item:hover .strip-content {
        transform: translateY(-4px);
    }

    .luxury-image-strip .strip-item .strip-label {
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 400;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.6);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
    }

    .luxury-image-strip .strip-item .strip-title {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
        letter-spacing: 0.5px;
        line-height: 1.2;
        margin: 2px 0 4px;
    }

    .luxury-image-strip .strip-item .strip-title span {
        color: var(--gold);
        font-weight: 600;
    }

    .luxury-image-strip .strip-item .strip-divider {
        width: 30px;
        height: 1px;
        background: rgba(255, 255, 255, 0.3);
        margin: 4px auto 8px;
        transition: width 0.5s ease, background 0.5s ease;
    }

    .luxury-image-strip .strip-item:hover .strip-divider {
        width: 50px;
        background: var(--gold);
    }

    .luxury-image-strip .strip-item .strip-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 500;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--white);
        padding: 8px 20px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 2px;
        background: transparent;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        text-decoration: none;
        position: relative;
        overflow: hidden;
        margin-top: 4px;
    }

    .luxury-image-strip .strip-item .strip-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--white);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: -1;
    }

    .luxury-image-strip .strip-item:hover .strip-btn {
        color: var(--navy);
        border-color: var(--white);
        transform: translateY(-2px);
    }

    .luxury-image-strip .strip-item:hover .strip-btn::before {
        transform: scaleX(1);
    }

    .luxury-image-strip .strip-item .strip-btn .btn-arrow {
        display: inline-block;
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .luxury-image-strip .strip-item:hover .strip-btn .btn-arrow {
        transform: translateX(4px);
    }

    .luxury-image-strip .strip-item .strip-desc {
        font-family: var(--font-sans);
        font-size: 0.65rem;
        font-weight: 300;
        letter-spacing: 0.5px;
        color: rgba(255, 255, 255, 0.6);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
        line-height: 1.4;
        max-width: 80%;
        margin: 0 auto 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ================================================================
    VIDEO ROW
    ================================================================ */
    .video-row .video-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
        background: #0a0a0a;
        border-radius: var(--radius);
        aspect-ratio: 16/9;
        min-height: 400px;
    }

    .video-row .video-wrapper video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        background: #0a0a0a;
    }

    .video-row .video-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(10, 10, 10, 0.15) 0%, rgba(10, 10, 10, 0.40) 50%, rgba(10, 10, 10, 0.70) 100%);
        pointer-events: none;
        z-index: 2;
    }

    .video-row .video-content {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 40px 24px;
        pointer-events: none;
    }

    .video-row .video-content .video-prefix {
        font-family: var(--font-sans);
        font-size: 0.65rem;
        font-weight: 400;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 8px;
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    }

    .video-row .video-content .video-title {
        font-family: var(--font-serif);
        font-size: 3.6rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
        letter-spacing: 1px;
        line-height: 1.1;
        margin-bottom: 8px;
    }

    .video-row .video-content .video-title span {
        color: var(--gold);
        font-weight: 600;
    }

    .video-row .video-content .video-subtitle {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
        text-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
        margin-bottom: 20px;
    }

    .video-row .video-content .video-divider {
        width: 50px;
        height: 1.5px;
        background: var(--gold);
        margin: 0 auto 20px;
    }

    .video-row .video-content .video-cta {
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--white);
        text-shadow: 0 1px 15px rgba(0, 0, 0, 0.3);
        pointer-events: auto;
        cursor: pointer;
        padding: 12px 32px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 60px;
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(8px);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .video-row .video-content .video-cta:hover {
        background: var(--gold);
        color: var(--navy);
        border-color: var(--gold);
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(201, 169, 110, 0.2);
    }

    .video-row .video-controls {
        position: absolute;
        bottom: 30px;
        right: 30px;
        z-index: 4;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .video-row .video-controls .control-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(8px);
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .video-row .video-controls .control-btn:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: var(--gold);
        color: var(--white);
        transform: scale(1.05);
    }

    .video-row .video-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: rgba(255, 255, 255, 0.1);
        z-index: 4;
        cursor: pointer;
    }

    .video-row .video-progress .progress-fill {
        height: 100%;
        width: 0%;
        background: var(--gold);
        transition: width 0.1s linear;
    }

    /* ================================================================
    LUXURY VIDEO MODAL
    ================================================================ */
    .luxury-video-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: rgba(10, 10, 10, 0.85);
        backdrop-filter: blur(20px);
        align-items: center;
        justify-content: center;
        animation: modalFadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        padding: 20px;
    }

    .luxury-video-modal.open {
        display: flex;
    }

    @keyframes modalFadeIn {
        0% {
            opacity: 0;
            backdrop-filter: blur(0px);
        }
        100% {
            opacity: 1;
            backdrop-filter: blur(20px);
        }
    }

    .luxury-video-modal .modal-container {
        position: relative;
        width: 100%;
        max-width: 900px;
        background: #0a0a0a;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8);
        animation: modalScaleIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    @keyframes modalScaleIn {
        0% {
            transform: scale(0.92);
            opacity: 0;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    .luxury-video-modal .modal-close {
        position: absolute;
        top: 16px;
        right: 18px;
        z-index: 10;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(8px);
        color: rgba(255, 255, 255, 0.7);
        font-size: 1.1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .luxury-video-modal .modal-close:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.3);
        color: var(--white);
        transform: rotate(90deg);
    }

    .luxury-video-modal .video-wrapper {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%;
        background: #0a0a0a;
    }

    .luxury-video-modal .video-wrapper video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        background: #0a0a0a;
    }

    .luxury-video-modal .video-controls-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 40px 20px 16px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
        z-index: 5;
        opacity: 0;
        transition: opacity 0.4s ease;
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .luxury-video-modal .modal-container:hover .video-controls-overlay {
        opacity: 1;
    }

    .luxury-video-modal .video-controls-overlay .ctrl-btn {
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.7);
        font-size: 1.1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 6px 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }

    .luxury-video-modal .video-controls-overlay .ctrl-btn:hover {
        color: var(--white);
        background: rgba(255, 255, 255, 0.1);
    }

    .luxury-video-modal .video-controls-overlay .progress-wrap {
        flex: 1;
        height: 3px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 3px;
        cursor: pointer;
        position: relative;
        transition: height 0.3s ease;
    }

    .luxury-video-modal .video-controls-overlay .progress-wrap:hover {
        height: 5px;
    }

    .luxury-video-modal .video-controls-overlay .progress-wrap .progress-fill {
        height: 100%;
        width: 0%;
        background: var(--gold);
        border-radius: 3px;
        transition: width 0.1s linear;
        position: relative;
    }

    .luxury-video-modal .video-controls-overlay .progress-wrap .progress-fill::after {
        content: '';
        position: absolute;
        right: -5px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--gold);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .luxury-video-modal .video-controls-overlay .progress-wrap:hover .progress-fill::after {
        opacity: 1;
    }

    .luxury-video-modal .video-controls-overlay .time-display {
        font-family: var(--font-sans);
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.5);
        font-variant-numeric: tabular-nums;
        min-width: 80px;
        text-align: center;
        letter-spacing: 0.5px;
    }

    .luxury-video-modal .video-poster {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: radial-gradient(ellipse at 50% 40%, rgba(201, 169, 110, 0.08), transparent 70%), linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
        cursor: pointer;
        transition: opacity 0.6s ease;
    }

    .luxury-video-modal .video-poster.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .luxury-video-modal .video-poster .play-icon-wrap {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: rgba(201, 169, 110, 0.15);
        backdrop-filter: blur(8px);
        border: 2px solid rgba(201, 169, 110, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.2rem;
        color: var(--gold);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        margin-bottom: 20px;
    }

    .luxury-video-modal .video-poster .play-icon-wrap:hover {
        transform: scale(1.08);
        background: rgba(201, 169, 110, 0.25);
        border-color: var(--gold);
        box-shadow: 0 0 60px rgba(201, 169, 110, 0.1);
    }

    .luxury-video-modal .video-poster .play-label {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.5);
        letter-spacing: 4px;
        text-transform: uppercase;
        font-weight: 300;
    }

    .luxury-video-modal .video-poster .play-label span {
        color: var(--gold);
    }

    /* ================================================================
    PAGE HERO
    ================================================================ */
    .page-hero {
        position: relative;
        width: 100%;
        height: 75vh;
        min-height: 550px;
        max-height: 750px;
        overflow: hidden;
        background: var(--navy);
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
        display: flex;
        align-items: center;
    }

    .page-hero .hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .page-hero .hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .page-hero .hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.10) 0%, rgba(38, 36, 57, 0.30) 40%, rgba(38, 36, 57, 0.55) 70%, rgba(38, 36, 57, 0.75) 100%);
        z-index: 2;
    }

    .page-hero .hero-content {
        position: relative;
        z-index: 3;
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 40px;
        width: 100%;
    }

    .page-hero .hero-content .hero-badge {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--gold);
        display: block;
        margin-bottom: 8px;
    }

    .page-hero .hero-content h1 {
        font-family: var(--font-serif);
        font-size: 3.6rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
        letter-spacing: -0.5px;
        line-height: 1.08;
        max-width: 700px;
    }

    .page-hero .hero-content h1 span {
        color: var(--gold);
        font-weight: 600;
    }

    .page-hero .hero-content p {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
        max-width: 500px;
        margin-top: 8px;
    }

    .page-hero .hero-content .hero-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 20px;
    }

    .page-hero .hero-content .hero-buttons .btn-gold {
        background: var(--gold);
        color: var(--navy);
        padding: 12px 32px;
    }

    .page-hero .hero-content .hero-buttons .btn-gold:hover {
        background: #d4b47a;
        transform: translateY(-2px);
        box-shadow: var(--shadow-hover);
    }

    .page-hero-small {
        position: relative;
        width: 100%;
        height: 35vh;
        min-height: 260px;
        max-height: 400px;
        overflow: hidden;
        background: var(--navy);
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
        display: flex;
        align-items: center;
    }

    .page-hero-small .hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .page-hero-small .hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .page-hero-small .hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.15) 0%, rgba(38, 36, 57, 0.35) 40%, rgba(38, 36, 57, 0.60) 70%, rgba(38, 36, 57, 0.80) 100%);
        z-index: 2;
    }

    .page-hero-small .hero-content {
        position: relative;
        z-index: 3;
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 40px;
        width: 100%;
    }

    .page-hero-small .hero-content .hero-badge {
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 400;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--gold);
        display: block;
        margin-bottom: 4px;
    }

    .page-hero-small .hero-content h1 {
        font-family: var(--font-serif);
        font-size: 2.4rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);
        letter-spacing: -0.5px;
        line-height: 1.08;
    }

    .page-hero-small .hero-content h1 span {
        color: var(--gold);
        font-weight: 600;
    }

    .page-hero-small .hero-content p {
        font-family: var(--font-serif);
        font-size: 1rem;
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
        max-width: 480px;
        margin-top: 4px;
    }

    /* ================================================================
    UNIFIED COLLECTION SHOWCASE
    ================================================================ */
    .unified-collection-showcase {
        padding: 20px 0 0;
    }

    .collection-row {
        margin-bottom: 40px;
    }

    .collection-row:last-child {
        margin-bottom: 0;
    }

    .split-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        border-radius: var(--radius);
        overflow: hidden;
    }

    .split-panel {
        position: relative;
        overflow: hidden;
        cursor: pointer;
        aspect-ratio: 3/4;
        background: var(--navy);
    }

    .split-panel .split-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .split-panel:hover .split-image {
        transform: scale(1.06);
    }

    .split-panel .split-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.10) 0%, rgba(38, 36, 57, 0.30) 40%, rgba(38, 36, 57, 0.55) 70%, rgba(38, 36, 57, 0.75) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        text-align: center;
        transition: background 0.5s ease;
    }

    .split-panel:hover .split-overlay {
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.15) 0%, rgba(38, 36, 57, 0.35) 40%, rgba(38, 36, 57, 0.60) 70%, rgba(38, 36, 57, 0.85) 100%);
    }

    .split-panel .split-content {
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .split-panel:hover .split-content {
        transform: translateY(-6px);
    }

    .split-panel .split-title {
        font-family: var(--font-serif);
        font-size: 2.6rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
        letter-spacing: 1px;
        line-height: 1.15;
    }

    .split-panel .split-title span {
        font-weight: 700;
        color: var(--gold);
    }

    .split-panel .split-divider {
        width: 40px;
        height: 1.5px;
        background: rgba(255, 255, 255, 0.4);
        margin: 16px auto 18px;
        transition: width 0.5s ease, background 0.5s ease;
    }

    .split-panel:hover .split-divider {
        width: 60px;
        background: var(--gold);
    }

    .split-panel .split-cta {
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.9);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
        transition: color 0.4s ease, transform 0.4s ease;
        position: relative;
    }

    .split-panel .split-cta::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 1.5px;
        background: var(--gold);
        transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .split-panel:hover .split-cta {
        color: var(--white);
        transform: translateY(-2px);
    }

    .split-panel:hover .split-cta::after {
        width: 100%;
    }

    .editorial-grid {
        display: grid;
        grid-template-columns: 40% 60%;
        gap: 40px;
        align-items: stretch;
    }

    .editorial-image {
        position: relative;
        border-radius: var(--radius);
        overflow: hidden;
        min-height: 400px;
        background: var(--gray-100);
        cursor: pointer;
    }

    .editorial-image .image-wrap {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .editorial-image .image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .editorial-image:hover .image-wrap img {
        transform: scale(1.04);
    }

    .editorial-image .image-overlay {
        position: absolute;
        inset: 0;
        background: rgba(38, 36, 57, 0);
        transition: background 0.6s ease;
        display: flex;
        align-items: flex-end;
        padding: 32px;
    }

    .editorial-image:hover .image-overlay {
        background: rgba(38, 36, 57, 0.12);
    }

    .editorial-image .image-overlay .overlay-content {
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    }

    .editorial-image .image-overlay .overlay-label {
        font-family: var(--font-serif);
        font-size: 1rem;
        font-weight: 400;
        font-style: italic;
        letter-spacing: 2px;
        opacity: 0.8;
    }

    .editorial-image .image-overlay .overlay-title {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        margin-top: 2px;
    }

    .editorial-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
    }

    .collection-header {
        text-align: center;
        margin-bottom: 32px;
    }

    .collection-header .collection-prefix {
        font-family: var(--font-sans);
        font-size: 0.65rem;
        font-weight: 400;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--gray-600);
        margin-bottom: 4px;
    }

    .collection-header .collection-title {
        font-family: var(--font-serif);
        font-size: 2.6rem;
        font-weight: 500;
        color: #1a1a1a;
        letter-spacing: -0.5px;
        line-height: 1.1;
    }

    .collection-header .collection-title span {
        color: var(--gold);
        font-weight: 600;
    }

    .collection-header .collection-sub {
        font-family: var(--font-sans);
        font-size: 0.8rem;
        font-weight: 300;
        color: var(--gray-600);
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-top: 6px;
    }

    .product-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        width: 100%;
    }

    .product-card {
        text-align: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        width: 100%;
    }

    .product-card .product-image-wrap {
        background: #f3f3f3;
        border-radius: 6px;
        padding: 20px;
        aspect-ratio: 3/4;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transition: background 0.3s ease;
    }

    .product-card:hover .product-image-wrap {
        background: #f8f8f8;
    }

    .product-card .product-image-wrap img {
        max-width: 85%;
        max-height: 85%;
        object-fit: contain;
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .product-card:hover .product-image-wrap img {
        transform: scale(1.04);
    }

    .product-card .product-name {
        font-family: var(--font-serif);
        font-size: 0.85rem;
        font-weight: 500;
        color: #1a1a1a;
        margin-top: 12px;
        line-height: 1.3;
        transition: color 0.3s ease;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .product-card:hover .product-name {
        color: var(--gold);
    }

    .product-card .product-collection {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: #b0b0b0;
        margin-top: 4px;
    }

    /* ================================================================
    LOOKBOOK - EDITORIAL CARDS
    ================================================================ */
    .look-masonry {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 14px;
        max-width: 1240px;
        margin: 0 auto;
        padding: 80px 0 60px;
        min-height: 70vh;
    }

    .look-card-editorial {
        position: relative;
        border-radius: 6px;
        overflow: hidden;
        cursor: pointer;
        background: var(--gray-100);
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.5s ease;
        will-change: transform;
    }

    .look-card-editorial:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 60px rgba(38, 36, 57, 0.15);
    }

    .look-card-editorial .card-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
    }

    .look-card-editorial:hover .card-image {
        transform: scale(1.05);
    }

    .look-card-editorial .card-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(38, 36, 57, 0.75) 0%, rgba(38, 36, 57, 0.30) 40%, transparent 70%);
        transition: background 0.5s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        padding: 24px 20px 20px;
        text-align: center;
    }

    .look-card-editorial:hover .card-overlay {
        background: linear-gradient(to top, rgba(38, 36, 57, 0.85) 0%, rgba(38, 36, 57, 0.35) 40%, transparent 70%);
    }

    .look-card-editorial .card-overlay .card-badge {
        font-family: var(--font-sans);
        font-size: 0.5rem;
        font-weight: 500;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 4px;
    }

    .look-card-editorial .card-overlay .card-label {
        font-family: var(--font-serif);
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
        letter-spacing: 0.5px;
        line-height: 1.2;
        margin-bottom: 2px;
    }

    .look-card-editorial .card-overlay .card-divider {
        width: 35px;
        height: 1.5px;
        background: rgba(255, 255, 255, 0.3);
        margin: 8px auto;
        transition: width 0.5s ease, background 0.5s ease;
    }

    .look-card-editorial:hover .card-overlay .card-divider {
        width: 55px;
        background: var(--gold);
    }

    .look-card-editorial .card-overlay .card-sub-label {
        font-family: var(--font-serif);
        font-size: 0.75rem;
        font-weight: 400;
        font-style: italic;
        color: rgba(255, 255, 255, 0.65);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
        letter-spacing: 0.5px;
    }

    .look-card-editorial .card-image-wrap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    .look-card-editorial .card-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .look-masonry .col-left {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .look-masonry .col-left .look-card-editorial:first-child {
        aspect-ratio: 2.5 / 3;
    }

    .look-masonry .col-left .look-card-editorial:last-child {
        aspect-ratio: 3 / 2.5;
    }

    .look-masonry .col-middle {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .look-masonry .col-middle .look-card-editorial:first-child {
        aspect-ratio: 3 / 2.5;
    }

    .look-masonry .col-middle .look-card-editorial:last-child {
        aspect-ratio: 2.5 / 3;
    }

    .look-masonry .col-right {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .look-masonry .col-right .look-card-editorial:first-child {
        aspect-ratio: 2.5 / 3;
    }

    .look-masonry .col-right .look-card-editorial:last-child {
        aspect-ratio: 3 / 2.5;
    }

    /* ================================================================
    LOOKBOOK - SIGNATURE & EXPRESSION CARDS
    ================================================================ */
    .lookbook-signature-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .signature-card {
        border-radius: var(--radius);
        overflow: hidden;
        cursor: pointer;
        position: relative;
        background: var(--white);
        border: 1px solid var(--gray-200);
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .signature-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .signature-image-wrap {
        position: relative;
        aspect-ratio: 3/4;
        overflow: hidden;
        background: var(--gray-100);
    }

    .signature-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .signature-card:hover .signature-image-wrap img {
        transform: scale(1.06);
    }

    .signature-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(38, 36, 57, 0.80) 0%, rgba(38, 36, 57, 0.40) 40%, rgba(38, 36, 57, 0.10) 70%);
        display: flex;
        align-items: flex-end;
        padding: 28px 24px;
        transition: background 0.5s ease;
    }

    .signature-card:hover .signature-overlay {
        background: linear-gradient(to top, rgba(38, 36, 57, 0.90) 0%, rgba(38, 36, 57, 0.50) 40%, rgba(38, 36, 57, 0.15) 70%);
    }

    .signature-content {
        width: 100%;
        transform: translateY(0);
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .signature-card:hover .signature-content {
        transform: translateY(-4px);
    }

    .signature-category {
        display: inline-block;
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 500;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gold);
        padding: 2px 12px;
        border: 1px solid rgba(201, 169, 110, 0.2);
        border-radius: 60px;
        margin-bottom: 8px;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(4px);
    }

    .signature-title {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
        margin-bottom: 2px;
        line-height: 1.1;
    }

    .signature-title span {
        color: var(--gold);
    }

    .signature-subtitle {
        font-family: var(--font-serif);
        font-size: 0.95rem;
        font-weight: 400;
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
        margin-bottom: 8px;
    }

    .signature-divider {
        width: 40px;
        height: 1.5px;
        background: var(--gold);
        margin: 8px 0 12px;
        transition: width 0.5s ease;
    }

    .signature-card:hover .signature-divider {
        width: 60px;
    }

    .signature-description {
        font-family: var(--font-sans);
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.6;
        margin-bottom: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
    }

    .signature-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--gold);
        transition: all 0.3s ease;
    }

    .signature-card:hover .signature-cta {
        gap: 14px;
    }

    .lookbook-expression-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .expression-card {
        border-radius: var(--radius);
        overflow: hidden;
        cursor: pointer;
        position: relative;
        background: var(--white);
        border: 1px solid var(--gray-200);
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .expression-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .expression-image-wrap {
        position: relative;
        aspect-ratio: 3/4;
        overflow: hidden;
        background: var(--gray-100);
    }

    .expression-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .expression-card:hover .expression-image-wrap img {
        transform: scale(1.06);
    }

    .expression-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(38, 36, 57, 0.80) 0%, rgba(38, 36, 57, 0.40) 40%, rgba(38, 36, 57, 0.10) 70%);
        display: flex;
        align-items: flex-end;
        padding: 28px 24px;
        transition: background 0.5s ease;
    }

    .expression-card:hover .expression-overlay {
        background: linear-gradient(to top, rgba(38, 36, 57, 0.90) 0%, rgba(38, 36, 57, 0.50) 40%, rgba(38, 36, 57, 0.15) 70%);
    }

    .expression-content {
        width: 100%;
        transform: translateY(0);
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .expression-card:hover .expression-content {
        transform: translateY(-4px);
    }

    .expression-country {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 500;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--gold);
        padding: 2px 12px;
        border: 1px solid rgba(201, 169, 110, 0.2);
        border-radius: 60px;
        margin-bottom: 8px;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(4px);
    }

    .expression-country i {
        font-size: 0.7rem;
    }

    .expression-title {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
        margin-bottom: 2px;
        line-height: 1.1;
    }

    .expression-title span {
        color: var(--gold);
    }

    .expression-subtitle {
        font-family: var(--font-serif);
        font-size: 0.95rem;
        font-weight: 400;
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
        margin-bottom: 8px;
    }

    .expression-divider {
        width: 40px;
        height: 1.5px;
        background: var(--gold);
        margin: 8px 0 12px;
        transition: width 0.5s ease;
    }

    .expression-card:hover .expression-divider {
        width: 60px;
    }

    .expression-description {
        font-family: var(--font-sans);
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.6;
        margin-bottom: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
    }

    .expression-colors {
        display: flex;
        gap: 6px;
        margin-bottom: 12px;
    }

    .color-swatch {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.2);
        transition: all 0.3s ease;
    }

    .expression-card:hover .color-swatch {
        transform: scale(1.15);
        border-color: rgba(255, 255, 255, 0.6);
    }

    .expression-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--gold);
        transition: all 0.3s ease;
    }

    .expression-card:hover .expression-cta {
        gap: 14px;
    }

    /* ================================================================
    LOOKBOOK HERO
    ================================================================ */
    .lookbook-hero {
        position: relative;
        width: 100%;
        height: 80vh;
        min-height: 600px;
        max-height: 800px;
        overflow: hidden;
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
        background: var(--navy);
    }

    .lookbook-hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .lookbook-hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .lookbook-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.15) 0%, rgba(38, 36, 57, 0.45) 50%, rgba(38, 36, 57, 0.75) 100%);
    }

    .lookbook-hero-content {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 40px;
        z-index: 2;
        max-width: 820px;
        margin: 0 auto;
    }

    .lookbook-hero-badge {
        font-family: var(--font-sans);
        font-size: 0.65rem;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 12px;
        padding: 4px 20px;
        border: 1px solid rgba(201, 169, 110, 0.25);
        border-radius: 60px;
        backdrop-filter: blur(8px);
    }

    .lookbook-hero-content h1 {
        font-family: var(--font-serif);
        font-size: 4.4rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
        letter-spacing: -0.5px;
        line-height: 1.05;
        margin-bottom: 16px;
    }

    .lookbook-hero-content h1 span {
        color: var(--gold);
        font-weight: 600;
    }

    .lookbook-hero-content p {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
        max-width: 600px;
        margin-bottom: 28px;
    }

    .lookbook-hero-actions {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* ================================================================
    LOOKBOOK SECTION
    ================================================================ */
    .lookbook-section {
        padding: 80px 0;
    }

    .lookbook-section:nth-child(even) {
        background: var(--gray-100);
    }

    .lookbook-section-header {
        text-align: center;
        margin-bottom: 48px;
    }

    .lookbook-section-header .section-title {
        font-size: 2.6rem;
    }

    .lookbook-section-header .section-sub {
        max-width: 560px;
        margin: 0 auto;
    }

    .lookbook-week-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .week-card {
        position: relative;
        border-radius: var(--radius);
        overflow: hidden;
        cursor: pointer;
        aspect-ratio: 3/4;
        background: var(--gray-100);
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .week-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
    }

    .week-card .week-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .week-card:hover .week-image {
        transform: scale(1.05);
    }

    .week-card .week-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(38, 36, 57, 0.75) 0%, rgba(38, 36, 57, 0.20) 50%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 24px 20px;
        transition: background 0.5s ease;
    }

    .week-card:hover .week-overlay {
        background: linear-gradient(to top, rgba(38, 36, 57, 0.85) 0%, rgba(38, 36, 57, 0.25) 50%);
    }

    .week-card .week-day {
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--gold);
    }

    .week-card .week-title {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
        margin: 2px 0;
    }

    .week-card .week-desc {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 8px;
    }

    .week-card .week-cta {
        font-size: 0.6rem;
        font-weight: 500;
        color: var(--gold);
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
    }

    .week-card:hover .week-cta {
        transform: translateX(4px);
    }

    .week-card.featured {
        grid-column: span 2;
        grid-row: span 2;
        aspect-ratio: auto;
    }

    .week-card.featured .week-title {
        font-size: 1.6rem;
    }

    .lookbook-profession-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .profession-card {
        position: relative;
        border-radius: var(--radius);
        overflow: hidden;
        cursor: pointer;
        background: var(--white);
        border: 1px solid var(--gray-200);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        padding: 24px 20px;
        text-align: center;
    }

    .profession-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .profession-card .profession-icon {
        font-size: 2.4rem;
        color: var(--gold);
        margin-bottom: 12px;
    }

    .profession-card h4 {
        font-family: var(--font-serif);
        font-size: 1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .profession-card p {
        font-size: 0.8rem;
        color: var(--gray-600);
        line-height: 1.5;
    }

    .profession-card .profession-cta {
        font-size: 0.6rem;
        font-weight: 500;
        color: var(--gold);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-top: 12px;
        display: inline-block;
        transition: all 0.3s ease;
    }

    .profession-card:hover .profession-cta {
        transform: translateX(4px);
    }

    .lookbook-occasion-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
    }

    .occasion-card {
        position: relative;
        border-radius: var(--radius);
        overflow: hidden;
        cursor: pointer;
        aspect-ratio: 3/4;
        background: var(--gray-100);
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .occasion-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
    }

    .occasion-card .occasion-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .occasion-card:hover .occasion-image {
        transform: scale(1.05);
    }

    .occasion-card .occasion-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(38, 36, 57, 0.70) 0%, rgba(38, 36, 57, 0.10) 50%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 16px 14px;
        transition: background 0.5s ease;
    }

    .occasion-card .occasion-category {
        font-size: 0.5rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--gold);
    }

    .occasion-card .occasion-title {
        font-family: var(--font-serif);
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
        line-height: 1.2;
    }

    .lookbook-season-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .season-card {
        position: relative;
        border-radius: var(--radius);
        overflow: hidden;
        cursor: pointer;
        aspect-ratio: 3/4;
        background: var(--gray-100);
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .season-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
    }

    .season-card .season-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .season-card:hover .season-image {
        transform: scale(1.05);
    }

    .season-card .season-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(38, 36, 57, 0.70) 0%, rgba(38, 36, 57, 0.10) 50%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 24px 20px;
        transition: background 0.5s ease;
    }

    .season-card .season-label {
        font-size: 0.5rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--gold);
    }

    .season-card .season-title {
        font-family: var(--font-serif);
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    }

    .season-card .season-desc {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.6);
    }

    .lookbook-look-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .look-style-card {
        position: relative;
        border-radius: var(--radius);
        overflow: hidden;
        cursor: pointer;
        aspect-ratio: 3/4;
        background: var(--gray-100);
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .look-style-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
    }

    .look-style-card .look-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .look-style-card:hover .look-image {
        transform: scale(1.05);
    }

    .look-style-card .look-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(38, 36, 57, 0.70) 0%, rgba(38, 36, 57, 0.10) 50%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 20px 16px;
        transition: background 0.5s ease;
    }

    .look-style-card .look-tag {
        font-size: 0.5rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--gold);
    }

    .look-style-card .look-title {
        font-family: var(--font-serif);
        font-size: 1rem;
        font-weight: 600;
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    }

    .look-style-card .look-cta {
        font-size: 0.55rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.7);
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        margin-top: 4px;
    }

    .look-style-card:hover .look-cta {
        color: var(--gold);
        transform: translateX(4px);
    }

    .lookbook-cta {
        padding: 80px 0;
        background: var(--navy);
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .lookbook-cta-content {
        text-align: center;
        max-width: 620px;
        margin: 0 auto;
    }

    .lookbook-cta-content h2 {
        font-family: var(--font-serif);
        font-size: 2.6rem;
        font-weight: 600;
        color: var(--white);
        margin-bottom: 8px;
    }

    .lookbook-cta-content h2 span {
        color: var(--gold);
    }

    .lookbook-cta-content p {
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 24px;
    }

    .lookbook-cta-actions {
        display: flex;
        gap: 14px;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* ================================================================
    ACCESSORIES PAGE
    ================================================================ */
    .accessories-hero {
        position: relative;
        width: 100%;
        height: 75vh;
        min-height: 550px;
        max-height: 750px;
        overflow: hidden;
        background: var(--navy);
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
        display: flex;
        align-items: center;
    }

    .accessories-hero .hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .accessories-hero .hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .accessories-hero .hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.15) 0%, rgba(38, 36, 57, 0.45) 50%, rgba(38, 36, 57, 0.70) 100%);
    }

    .accessories-hero .hero-content {
        position: relative;
        z-index: 2;
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 40px;
        width: 100%;
    }

    .accessories-hero .hero-content .hero-badge {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--gold);
        display: block;
        margin-bottom: 8px;
    }

    .accessories-hero .hero-content h1 {
        font-family: var(--font-serif);
        font-size: 3.6rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
        letter-spacing: -0.5px;
        line-height: 1.08;
        max-width: 700px;
    }

    .accessories-hero .hero-content h1 span {
        color: var(--gold);
        font-weight: 600;
    }

    .accessories-hero .hero-content p {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
        max-width: 500px;
        margin-top: 8px;
    }

    /* ================================================================
    ACCESSORIES NAV WRAPPER (STICKY FILTERS)
    ================================================================ */
    .accessories-nav-wrapper {
        position: sticky;
        top: calc(var(--topbar-height) + var(--navbar-height));
        z-index: 99;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(217, 204, 188, 0.15);
        transition: all 0.3s ease;
        box-shadow: 0 2px 20px rgba(38, 36, 57, 0.04);
        width: 100%;
        left: 0;
        right: 0;
    }

    .accessories-nav-wrapper.scrolled {
        box-shadow: 0 4px 30px rgba(38, 36, 57, 0.10);
        background: rgba(255, 255, 255, 0.99);
    }

    .accessories-nav-primary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 24px;
        background: transparent;
        border-bottom: 1px solid rgba(217, 204, 188, 0.08);
        transition: all 0.4s ease;
        position: relative;
        min-height: 48px;
    }

    .accessories-nav-primary .nav-label {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 500;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gray-600);
        margin-right: 8px;
        opacity: 0.6;
        flex-shrink: 0;
    }

    .accessories-nav-primary .nav-divider {
        width: 1px;
        height: 20px;
        background: var(--gray-300);
        opacity: 0.3;
        margin: 0 4px;
        flex-shrink: 0;
    }

    .gender-filter-btn {
        padding: 6px 20px;
        border-radius: 60px;
        border: 1.5px solid transparent;
        background: transparent;
        color: var(--gray-600);
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        white-space: nowrap;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .gender-filter-btn:hover {
        color: var(--navy);
        border-color: var(--gray-300);
        transform: translateY(-1px);
    }

    .gender-filter-btn.active {
        background: var(--navy);
        color: var(--white);
        border-color: var(--navy);
        box-shadow: 0 4px 16px rgba(38, 36, 57, 0.12);
    }

    .gender-filter-btn.active:hover {
        background: #35324f;
        transform: translateY(-1px);
    }

    .gender-filter-btn .filter-icon {
        margin-right: 6px;
        font-size: 0.7rem;
    }

    .gender-filter-btn .filter-count {
        display: inline-block;
        font-size: 0.55rem;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.2);
        padding: 0 8px;
        border-radius: 60px;
        margin-left: 4px;
        min-width: 18px;
        text-align: center;
    }

    .gender-filter-btn.active .filter-count {
        background: rgba(255, 255, 255, 0.2);
        color: var(--white);
    }

    .accessories-nav-secondary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 24px;
        background: rgba(255, 255, 255, 0.8);
        border-top: 1px solid rgba(217, 204, 188, 0.05);
        transition: all 0.4s ease;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        min-height: 40px;
    }

    .accessories-nav-secondary::-webkit-scrollbar {
        display: none;
    }

    .category-filter-btn {
        padding: 4px 16px;
        border-radius: 60px;
        border: 1px solid transparent;
        background: transparent;
        color: var(--gray-600);
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .category-filter-btn:hover {
        color: var(--navy);
        border-color: var(--gray-300);
    }

    .category-filter-btn.active {
        background: var(--navy);
        color: var(--white);
        border-color: var(--navy);
        box-shadow: 0 2px 12px rgba(38, 36, 57, 0.08);
    }

    .category-filter-btn .count-badge {
        display: inline-block;
        font-size: 0.5rem;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.2);
        padding: 0 6px;
        border-radius: 60px;
        margin-left: 4px;
    }

    .category-filter-btn.active .count-badge {
        background: rgba(255, 255, 255, 0.2);
    }

    .accessories-nav-wrapper.primary-hidden .accessories-nav-primary {
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        background: transparent;
        border-bottom: none;
        padding: 0;
        margin: 0;
        height: 0;
        overflow: hidden;
        min-height: 0;
    }

    .accessories-nav-wrapper.primary-hidden .accessories-nav-secondary {
        padding-top: 12px;
        padding-bottom: 12px;
        background: rgba(255, 255, 255, 0.99);
        border-bottom: 1px solid rgba(217, 204, 188, 0.1);
    }

    .accessories-nav-wrapper .progress-container {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: rgba(217, 204, 188, 0.15);
        overflow: hidden;
        z-index: 1;
    }

    .accessories-nav-wrapper .progress-line {
        height: 100%;
        width: 0%;
        background: var(--gold);
        transition: width 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* ================================================================
    ACCESSORY SECTION
    ================================================================ */
    .accessory-section {
        padding: 60px 0;
        border-bottom: 1px solid var(--gray-200);
    }

    .accessory-section:last-child {
        border-bottom: none;
    }

    .accessory-section:nth-child(even) {
        background: var(--gray-100);
    }

    .accessory-section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 28px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .accessory-section-header .left {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .accessory-section-header .section-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        color: var(--gold);
        flex-shrink: 0;
        transition: var(--transition);
    }

    .accessory-section:hover .section-icon {
        transform: scale(1.05);
        background: var(--cream);
    }

    .accessory-section-header .section-title-sm {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--navy);
    }

    .accessory-section-header .section-title-sm span {
        color: var(--gold);
    }

    .accessory-section-header .section-count {
        font-size: 0.75rem;
        color: var(--gray-600);
        background: var(--gray-200);
        padding: 2px 12px;
        border-radius: 60px;
        font-weight: 500;
    }

    .accessory-section-header .view-all-link {
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--gold);
        text-decoration: none;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .accessory-section-header .view-all-link:hover {
        gap: 12px;
        color: var(--navy);
    }

    .accessory-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .accessory-card {
        background: var(--white);
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--gray-200);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        cursor: pointer;
        text-align: center;
    }

    .accessory-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .accessory-card .card-image-wrap {
        padding: 20px;
        background: var(--gray-100);
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.4s ease;
    }

    .accessory-card:hover .card-image-wrap {
        background: var(--cream-light);
    }

    .accessory-card .card-image-wrap .card-icon {
        font-size: 3rem;
        color: var(--gold);
        transition: transform 0.4s ease;
    }

    .accessory-card:hover .card-image-wrap .card-icon {
        transform: scale(1.1);
    }

    .accessory-card .card-image-wrap img {
        max-width: 80%;
        max-height: 80%;
        object-fit: contain;
    }

    .accessory-card .card-body {
        padding: 14px 16px 18px;
    }

    .accessory-card .card-body .card-badge {
        display: inline-block;
        font-size: 0.5rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--gold);
        background: var(--cream-light);
        padding: 2px 10px;
        border-radius: 60px;
        margin-bottom: 4px;
    }

    .accessory-card .card-body h4 {
        font-family: var(--font-serif);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 2px;
    }

    .accessory-card .card-body .card-desc {
        font-size: 0.75rem;
        color: var(--gray-600);
        margin-bottom: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.4;
    }

    .accessory-card .card-body .card-price {
        font-weight: 700;
        color: var(--gold);
        font-size: 0.95rem;
    }

    .accessory-card .card-body .card-cta {
        margin-top: 8px;
        padding: 6px 16px;
        border-radius: 60px;
        border: 1px solid var(--gold);
        background: transparent;
        color: var(--gold);
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans);
    }

    .accessory-card .card-body .card-cta:hover {
        background: var(--gold);
        color: var(--white);
    }

    .accessories-cta {
        padding: 60px 0 80px;
        background: var(--navy);
        color: var(--white);
        text-align: center;
    }

    .accessories-cta h2 {
        font-family: var(--font-serif);
        font-size: 2.4rem;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .accessories-cta h2 span {
        color: var(--gold);
    }

    .accessories-cta p {
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.7);
        max-width: 560px;
        margin: 0 auto 24px;
    }

    .accessories-cta .cta-buttons {
        display: flex;
        gap: 14px;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* ================================================================
    ACCESSORIES TABS
    ================================================================ */
    .accessories-tabs {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-bottom: 40px;
        flex-wrap: wrap;
    }

    .accessories-tabs .tab-btn {
        padding: 12px 32px;
        border-radius: 60px;
        border: 1.5px solid var(--gray-300);
        background: transparent;
        color: var(--gray-600);
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans);
        position: relative;
        min-width: 120px;
        text-align: center;
    }

    .accessories-tabs .tab-btn:hover {
        border-color: var(--gold);
        color: var(--navy);
        transform: translateY(-2px);
    }

    .accessories-tabs .tab-btn.active {
        background: var(--navy);
        color: var(--white);
        border-color: var(--navy);
        box-shadow: 0 4px 16px rgba(38, 36, 57, 0.2);
    }

    .accessories-tabs .tab-btn.active:hover {
        background: #35324f;
        transform: translateY(-2px);
    }

    .accessories-tabs .tab-btn .tab-icon {
        margin-right: 8px;
    }

    .accessories-tabs .tab-btn .count-badge {
        display: inline-block;
        background: var(--gray-200);
        color: var(--gray-600);
        font-size: 0.6rem;
        padding: 1px 10px;
        border-radius: 60px;
        margin-left: 6px;
        font-weight: 600;
    }

    .accessories-tabs .tab-btn.active .count-badge {
        background: rgba(255, 255, 255, 0.2);
        color: var(--white);
    }

    /* ================================================================
    COLLECTION FILTER
    ================================================================ */
    .collection-filter-scroll {
        overflow-x: auto;
        padding: 4px 0 12px;
        margin-bottom: 32px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .collection-filter-scroll::-webkit-scrollbar {
        height: 3px;
    }

    .collection-filter-scroll::-webkit-scrollbar-track {
        background: var(--gray-100);
        border-radius: 3px;
    }

    .collection-filter-scroll::-webkit-scrollbar-thumb {
        background: var(--gold);
        border-radius: 3px;
    }

    .collection-filter {
        display: flex;
        gap: 8px;
        flex-wrap: nowrap;
        min-width: max-content;
    }

    .collection-filter-btn {
        padding: 10px 24px;
        border-radius: 60px;
        border: 1.5px solid var(--gray-200);
        background: var(--white);
        font-family: var(--font-sans);
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--gray-600);
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        letter-spacing: 0.3px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .filter-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
    }

    .collection-filter-btn:hover {
        border-color: var(--gold);
        color: var(--navy);
        transform: translateY(-2px);
    }

    .collection-filter-btn.active {
        background: var(--navy);
        color: var(--white);
        border-color: var(--navy);
        box-shadow: 0 4px 20px rgba(38, 36, 57, 0.15);
    }

    .filter-toggle-wrapper {
        display: flex;
        justify-content: center;
        margin-bottom: 40px;
        padding-top: 20px;
    }

    .filter-toggle {
        display: inline-flex;
        background: var(--gray-100);
        border-radius: 60px;
        padding: 4px;
        border: 1px solid var(--gray-200);
    }

    .filter-toggle-btn {
        padding: 12px 32px;
        border-radius: 60px;
        border: none;
        background: transparent;
        font-family: var(--font-sans);
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--gray-600);
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .filter-toggle-btn i {
        font-size: 0.9rem;
    }

    .filter-toggle-btn:hover {
        color: var(--navy);
    }

    .filter-toggle-btn.active {
        background: var(--navy);
        color: var(--white);
        box-shadow: 0 4px 20px rgba(38, 36, 57, 0.15);
    }

    /* ================================================================
    COLLECTION GRID
    ================================================================ */
    .collection-grid-luxury {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 24px;
    }

    .collection-card-luxury {
        border-radius: 12px;
        overflow: hidden;
        background: var(--white);
        border: 1px solid var(--gray-200);
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        cursor: pointer;
        position: relative;
        opacity: 0;
        transform: translateY(20px);
        animation: cardReveal 0.6s ease forwards;
    }

    .collection-card-luxury:nth-child(1) {
        animation-delay: 0.05s;
    }
    .collection-card-luxury:nth-child(2) {
        animation-delay: 0.10s;
    }
    .collection-card-luxury:nth-child(3) {
        animation-delay: 0.15s;
    }
    .collection-card-luxury:nth-child(4) {
        animation-delay: 0.20s;
    }
    .collection-card-luxury:nth-child(5) {
        animation-delay: 0.25s;
    }
    .collection-card-luxury:nth-child(6) {
        animation-delay: 0.30s;
    }

    @keyframes cardReveal {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .collection-card-luxury:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 60px rgba(38, 36, 57, 0.12);
        border-color: var(--gold);
    }

    .collection-card-luxury .collection-image-wrap {
        position: relative;
        aspect-ratio: 4/3;
        overflow: hidden;
        background: var(--gray-100);
    }

    .collection-card-luxury .collection-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .collection-card-luxury:hover .collection-image-wrap img {
        transform: scale(1.05);
    }

    .collection-card-luxury .collection-image-wrap .collection-badge {
        position: absolute;
        top: 16px;
        left: 16px;
        padding: 4px 16px;
        border-radius: 60px;
        font-size: 0.55rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        color: var(--white);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .collection-card-luxury .collection-body {
        padding: 20px 24px 24px;
    }

    .collection-card-luxury .collection-body .collection-name {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 4px;
        transition: color 0.3s ease;
    }

    .collection-card-luxury:hover .collection-body .collection-name {
        color: var(--gold);
    }

    .collection-card-luxury .collection-body .collection-description {
        font-size: 0.85rem;
        color: var(--gray-600);
        line-height: 1.5;
        margin-bottom: 12px;
    }

    .collection-card-luxury .collection-body .collection-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 12px;
        border-top: 1px solid var(--gray-200);
    }

    .collection-card-luxury .collection-body .collection-meta .product-count {
        font-size: 0.75rem;
        color: var(--gray-600);
    }

    .collection-card-luxury .collection-body .collection-meta .product-count i {
        color: var(--gold);
        margin-right: 4px;
    }

    .collection-card-luxury .collection-body .collection-meta .price-range {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--gold);
    }

    /* ================================================================
    PRODUCT GRID LUXURY
    ================================================================ */
    .product-grid-luxury {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
    }

    .product-card-luxury {
        border-radius: 12px;
        overflow: hidden;
        background: var(--white);
        border: 1px solid var(--gray-200);
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        cursor: pointer;
        position: relative;
        opacity: 0;
        transform: translateY(20px);
        animation: cardReveal 0.6s ease forwards;
    }

    .product-card-luxury:nth-child(1) {
        animation-delay: 0.03s;
    }
    .product-card-luxury:nth-child(2) {
        animation-delay: 0.06s;
    }
    .product-card-luxury:nth-child(3) {
        animation-delay: 0.09s;
    }
    .product-card-luxury:nth-child(4) {
        animation-delay: 0.12s;
    }
    .product-card-luxury:nth-child(5) {
        animation-delay: 0.15s;
    }
    .product-card-luxury:nth-child(6) {
        animation-delay: 0.18s;
    }
    .product-card-luxury:nth-child(7) {
        animation-delay: 0.21s;
    }
    .product-card-luxury:nth-child(8) {
        animation-delay: 0.24s;
    }

    .product-card-luxury:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 48px rgba(38, 36, 57, 0.10);
        border-color: var(--gold);
    }

    .product-card-luxury .product-image-wrap {
        position: relative;
        aspect-ratio: 3/4;
        overflow: hidden;
        background: var(--gray-100);
    }

    .product-card-luxury .product-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .product-card-luxury:hover .product-image-wrap img {
        transform: scale(1.05);
    }

    .product-card-luxury .product-image-wrap .product-wishlist {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 2;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(4px);
        border: none;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-600);
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    .product-card-luxury .product-image-wrap .product-wishlist:hover {
        transform: scale(1.1);
    }

    .product-card-luxury .product-image-wrap .product-wishlist.active {
        color: #e74c3c;
    }

    .product-card-luxury .product-image-wrap .product-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        padding: 3px 12px;
        border-radius: 60px;
        font-size: 0.5rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        background: var(--gold);
        color: var(--white);
    }

    .product-card-luxury .product-image-wrap .product-badge.best {
        background: #18794e;
    }

    .product-card-luxury .product-image-wrap .add-to-cart-btn-hover {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px 16px;
        background: rgba(38, 36, 57, 0.85);
        backdrop-filter: blur(8px);
        color: var(--white);
        border: none;
        font-family: var(--font-sans);
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.4s ease;
        transform: translateY(100%);
        opacity: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        z-index: 5;
    }

    .product-card-luxury:hover .product-image-wrap .add-to-cart-btn-hover {
        transform: translateY(0);
        opacity: 1;
    }

    .product-card-luxury .product-image-wrap .add-to-cart-btn-hover:hover {
        background: var(--gold);
        color: var(--navy);
    }

    .product-card-luxury .product-body {
        padding: 16px 18px 18px;
    }

    .product-card-luxury .product-body .product-name {
        font-family: var(--font-serif);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 2px;
        transition: color 0.3s ease;
    }

    .product-card-luxury:hover .product-body .product-name {
        color: var(--gold);
    }

    .product-card-luxury .product-body .product-category {
        font-size: 0.7rem;
        color: var(--gray-600);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .product-card-luxury .product-body .product-price {
        font-size: 1rem;
        font-weight: 700;
        color: var(--gold);
        margin-top: 8px;
    }

    .product-card-luxury .product-colors {
        display: flex;
        gap: 6px;
        margin-top: 8px;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: all 0.4s ease;
        justify-content: center;
    }

    .product-card-luxury:hover .product-colors {
        opacity: 1;
        max-height: 60px;
        padding-top: 8px;
    }

    .product-card-luxury .product-colors .color-dot {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid var(--gray-200);
        display: inline-block;
        transition: all 0.3s ease;
    }

    .product-card-luxury .product-colors .color-dot:hover {
        transform: scale(1.2);
        border-color: var(--gold);
    }

    /* ================================================================
    PRODUCT FILTER
    ================================================================ */
    .product-filter-scroll {
        overflow-x: auto;
        padding: 4px 0 12px;
        margin-bottom: 32px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .product-filter-scroll::-webkit-scrollbar {
        height: 3px;
    }

    .product-filter-scroll::-webkit-scrollbar-track {
        background: var(--gray-100);
        border-radius: 3px;
    }

    .product-filter-scroll::-webkit-scrollbar-thumb {
        background: var(--gold);
        border-radius: 3px;
    }

    .product-filter {
        display: flex;
        gap: 8px;
        flex-wrap: nowrap;
        min-width: max-content;
    }

    .product-filter-btn {
        padding: 10px 24px;
        border-radius: 60px;
        border: 1.5px solid var(--gray-200);
        background: var(--white);
        font-family: var(--font-sans);
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--gray-600);
        cursor: pointer;
        transition: all 0.4s ease;
        letter-spacing: 0.3px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .product-filter-btn .product-count {
        font-size: 0.6rem;
        font-weight: 600;
        background: var(--gray-200);
        color: var(--gray-600);
        padding: 1px 10px;
        border-radius: 60px;
        transition: all 0.3s ease;
    }

    .product-filter-btn.active .product-count {
        background: rgba(255, 255, 255, 0.2);
        color: var(--white);
    }

    .product-filter-btn:hover {
        border-color: var(--gold);
        color: var(--navy);
        transform: translateY(-2px);
    }

    .product-filter-btn.active {
        background: var(--navy);
        color: var(--white);
        border-color: var(--navy);
        box-shadow: 0 4px 20px rgba(38, 36, 57, 0.15);
    }

    /* ================================================================
    GENDER PAGE FILTER TABS
    ================================================================ */
    .gender-page .filter-tabs {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-bottom: 32px;
        flex-wrap: wrap;
    }

    .gender-page .filter-tabs .btn {
        background: var(--gray-100);
        color: var(--gray-600);
        border: 1px solid var(--gray-200);
        padding: 10px 28px;
        border-radius: 60px;
        font-size: 0.8rem;
        font-weight: 500;
        transition: var(--transition);
    }

    .gender-page .filter-tabs .btn.active {
        background: var(--navy);
        color: var(--white);
        border-color: var(--navy);
    }

    .gender-page .filter-tabs .btn:hover:not(.active) {
        border-color: var(--gold);
        color: var(--navy);
    }

    /* ================================================================
    PAGE BREADCRUMBS
    ================================================================ */
    .page-breadcrumbs {
        padding: 16px 0 8px;
        background: transparent;
        border-bottom: 1px solid rgba(217, 204, 188, 0.15);
        margin-bottom: 8px;
    }

    .page-breadcrumbs .breadcrumb-container {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 24px;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .page-breadcrumbs .breadcrumb-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.72rem;
        font-weight: 400;
        color: var(--gray-600);
        transition: color 0.3s ease;
    }

    .page-breadcrumbs .breadcrumb-item a {
        color: var(--gray-600);
        text-decoration: none;
        transition: color 0.3s ease;
        cursor: pointer;
    }

    .page-breadcrumbs .breadcrumb-item a:hover {
        color: var(--gold);
    }

    .page-breadcrumbs .breadcrumb-item .separator {
        color: var(--gray-300);
        font-size: 0.6rem;
        user-select: none;
    }

    .page-breadcrumbs .breadcrumb-item.current {
        color: var(--navy);
        font-weight: 500;
    }

    .page-breadcrumbs .breadcrumb-item.current span {
        color: var(--gold);
    }

    .page-breadcrumbs .back-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 14px;
        border-radius: 60px;
        border: 1px solid var(--gray-200);
        background: transparent;
        color: var(--gray-600);
        font-size: 0.65rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans);
        margin-right: 8px;
    }

    .page-breadcrumbs .back-button:hover {
        border-color: var(--gold);
        color: var(--navy);
        background: var(--gray-100);
        transform: translateX(-2px);
    }

    .page-breadcrumbs .back-button i {
        font-size: 0.6rem;
    }

    /* ================================================================
    PRODUCT DETAIL
    ================================================================ */
    .product-detail-wrapper {
        padding: 40px 0 60px;
    }

    .product-detail-wrapper .back-row {
        margin-bottom: 24px;
    }

    .product-detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }

    .product-detail-grid .gallery {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .product-detail-grid .gallery .main-img {
        border-radius: var(--radius);
        overflow: hidden;
        background: var(--gray-100);
        aspect-ratio: 4/3;
        background-size: cover;
        background-position: center;
        position: relative;
    }

    .product-detail-grid .gallery .thumbnails {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .product-detail-grid .gallery .thumbnails .thumb {
        aspect-ratio: 1;
        border-radius: 8px;
        background-size: cover;
        background-position: center;
        cursor: pointer;
        border: 2px solid transparent;
        transition: var(--transition);
        background-color: var(--gray-100);
        position: relative;
    }

    .product-detail-grid .gallery .thumbnails .thumb:hover,
    .product-detail-grid .gallery .thumbnails .thumb.active {
        border-color: var(--gold);
    }

    .product-detail-grid .info {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .product-detail-grid .info .prod-name {
        font-family: var(--font-serif);
        font-size: 2.2rem;
        font-weight: 700;
    }

    .product-detail-grid .info .prod-price {
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--gold);
    }

    .product-detail-grid .info .prod-description {
        color: var(--gray-600);
        line-height: 1.8;
        font-size: 0.95rem;
    }

    .product-detail-grid .info .prod-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 24px;
        background: var(--gray-100);
        padding: 16px 20px;
        border-radius: var(--radius);
    }

    .product-detail-grid .info .prod-meta .meta-item {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        border-bottom: 1px solid var(--gray-200);
        font-size: 0.85rem;
    }

    .product-detail-grid .info .prod-meta .meta-item:last-child {
        border-bottom: none;
    }

    .product-detail-grid .info .prod-meta .meta-item .label {
        color: var(--gray-600);
    }

    .product-detail-grid .info .prod-meta .meta-item .value {
        font-weight: 500;
    }

    .product-detail-grid .info .color-selector {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
    }

    .product-detail-grid .info .color-selector .color-label {
        font-weight: 500;
        font-size: 0.85rem;
        color: var(--gray-600);
    }

    .product-detail-grid .info .color-selector .color-option {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid var(--gray-300);
        cursor: pointer;
        transition: var(--transition);
        display: inline-block;
    }

    .product-detail-grid .info .color-selector .color-option:hover,
    .product-detail-grid .info .color-selector .color-option.active {
        border-color: var(--gold);
        transform: scale(1.1);
    }

    .product-detail-grid .info .action-buttons {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 8px;
    }

    .product-detail-grid .info .action-buttons .btn {
        flex: 1;
        min-width: 160px;
        justify-content: center;
    }

    /* ================================================================
    ALSO LIKE
    ================================================================ */
    .also-like {
        margin-top: 60px;
        padding-top: 40px;
        border-top: 1px solid var(--gray-200);
    }

    .also-like h3 {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 600;
        margin-bottom: 24px;
        text-align: center;
    }

    .also-like h3 span {
        color: var(--gold);
    }

    .also-like .also-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 24px;
    }

    .also-like .also-grid .also-card {
        background: var(--white);
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--gray-200);
        transition: all 0.4s ease;
        cursor: pointer;
    }

    .also-like .also-grid .also-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .also-like .also-grid .also-card .also-img {
        height: 160px;
        background-size: cover;
        background-position: center;
        background-color: var(--gray-100);
        position: relative;
        overflow: hidden;
    }

    .also-like .also-grid .also-card .also-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .also-like .also-grid .also-card:hover .also-img img {
        transform: scale(1.05);
    }

    .also-like .also-grid .also-card .also-body {
        padding: 12px 16px 16px;
    }

    .also-like .also-grid .also-card .also-body h5 {
        font-family: var(--font-serif);
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 2px;
        transition: color 0.3s ease;
    }

    .also-like .also-grid .also-card:hover .also-body h5 {
        color: var(--gold);
    }

    .also-like .also-grid .also-card .also-body .also-price {
        font-weight: 700;
        color: var(--gold);
        font-size: 0.9rem;
    }

    .also-like .also-grid .also-card .also-body .also-collection {
        font-size: 0.7rem;
        color: var(--gray-600);
        margin-top: 2px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* ================================================================
    WHAT'S NEW PAGE
    ================================================================ */
    .whatsnew-hero {
        position: relative;
        width: 100%;
        height: 100vh;
        min-height: 600px;
        max-height: 900px;
        overflow: hidden;
        background: var(--navy);
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
    }

    .whatsnew-hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .whatsnew-hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: heroZoom 20s ease-in-out infinite alternate;
    }

    @keyframes heroZoom {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.05);
        }
    }

    .whatsnew-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.10) 0%, rgba(38, 36, 57, 0.30) 40%, rgba(38, 36, 57, 0.55) 70%, rgba(38, 36, 57, 0.75) 100%);
        z-index: 1;
    }

    .whatsnew-hero-content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 40px;
        text-align: center;
        max-width: 1240px;
        margin: 0 auto;
    }

    .whatsnew-hero-text {
        max-width: 720px;
    }

    .whatsnew-hero-badge {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 6px;
        text-transform: uppercase;
        color: var(--gold);
        display: inline-block;
        padding: 4px 20px;
        border: 1px solid rgba(201, 169, 110, 0.25);
        border-radius: 60px;
        backdrop-filter: blur(8px);
        margin-bottom: 16px;
    }

    .whatsnew-hero-title {
        font-family: var(--font-serif);
        font-size: 5rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
        letter-spacing: -0.5px;
        line-height: 1.05;
        margin-bottom: 8px;
    }

    .whatsnew-hero-title span {
        color: var(--gold);
        font-weight: 600;
    }

    .whatsnew-hero-subtitle {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
        text-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
        margin-bottom: 16px;
    }

    .whatsnew-hero-divider {
        width: 60px;
        height: 2px;
        background: var(--gold);
        margin: 0 auto;
    }

    .whatsnew-back-btn {
        position: absolute;
        bottom: 40px;
        left: 40px;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 24px;
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 60px;
        color: rgba(255, 255, 255, 0.7);
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 400;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.4s ease;
        text-decoration: none;
    }

    .whatsnew-back-btn:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.25);
        color: var(--white);
        transform: translateX(-4px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }

    .whatsnew-back-btn i {
        font-size: 0.8rem;
        transition: transform 0.4s ease;
    }

    .whatsnew-back-btn:hover i {
        transform: translateX(-4px);
    }

    .whatsnew-back-btn span {
        letter-spacing: 2px;
    }

    .whatsnew-scroll-indicator {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        opacity: 0.5;
    }

    .whatsnew-scroll-indicator span {
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 400;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
    }

    .whatsnew-scroll-indicator .scroll-line {
        width: 1px;
        height: 40px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
        animation: scrollPulse 2s ease-in-out infinite;
    }

    @keyframes scrollPulse {
        0%, 100% {
            opacity: 0.3;
            transform: scaleY(0.6);
        }
        50% {
            opacity: 1;
            transform: scaleY(1);
        }
    }

    .whatsnew-categories {
        padding: 80px 0 60px;
        background: var(--white);
    }

    .whatsnew-categories-header {
        text-align: center;
        margin-bottom: 52px;
    }

    .whatsnew-categories-header .section-title {
        font-size: 2.8rem;
    }

    .whatsnew-categories-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        max-width: 1100px;
        margin: 0 auto;
    }

    .whatsnew-category-card {
        position: relative;
        border-radius: var(--radius);
        overflow: hidden;
        cursor: pointer;
        aspect-ratio: 4/3;
        background: var(--gray-100);
        transition: all 0.6s ease;
    }

    .whatsnew-category-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.05) 0%, rgba(38, 36, 57, 0.20) 40%, rgba(38, 36, 57, 0.50) 75%, rgba(38, 36, 57, 0.70) 100%);
        z-index: 1;
        transition: background 0.6s ease;
    }

    .whatsnew-category-card:hover::after {
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.08) 0%, rgba(38, 36, 57, 0.25) 40%, rgba(38, 36, 57, 0.55) 75%, rgba(38, 36, 57, 0.80) 100%);
    }

    .whatsnew-category-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
    }

    .whatsnew-category-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s ease;
    }

    .whatsnew-category-card:hover img {
        transform: scale(1.06);
    }

    .whatsnew-category-card .category-content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 32px 28px;
    }

    .whatsnew-category-card .category-label {
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 400;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.6);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
    }

    .whatsnew-category-card .category-name {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
        letter-spacing: 1px;
        line-height: 1.2;
        margin: 4px 0 6px;
    }

    .whatsnew-category-card .category-name span {
        color: var(--gold);
        font-weight: 600;
    }

    .whatsnew-category-card .category-divider {
        width: 35px;
        height: 1.5px;
        background: rgba(255, 255, 255, 0.3);
        margin: 4px 0 10px;
        transition: width 0.5s ease, background 0.5s ease;
    }

    .whatsnew-category-card:hover .category-divider {
        width: 55px;
        background: var(--gold);
    }

    .whatsnew-category-card .category-count {
        font-family: var(--font-sans);
        font-size: 0.65rem;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.5);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
        letter-spacing: 1px;
    }

    .whatsnew-products {
        padding: 60px 0 80px;
        background: var(--gray-100);
    }

    .whatsnew-products-header {
        text-align: center;
        margin-bottom: 48px;
    }

    .whatsnew-products-header .section-title {
        font-size: 2.2rem;
    }

    .whatsnew-products-header .section-sub {
        max-width: 480px;
        margin: 0 auto;
    }

    .whatsnew-products-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .whatsnew-product-card {
        background: var(--white);
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--gray-200);
        transition: all 0.5s ease;
        cursor: pointer;
        position: relative;
    }

    .whatsnew-product-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .whatsnew-product-card .product-image-container {
        position: relative;
        aspect-ratio: 3/4;
        overflow: hidden;
        background: var(--gray-100);
    }

    .whatsnew-product-card .product-image-container .main-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.6s ease;
    }

    .whatsnew-product-card .product-image-container .secondary-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.6s ease;
    }

    .whatsnew-product-card:hover .product-image-container .secondary-image {
        opacity: 1;
    }

    .whatsnew-product-card:hover .product-image-container .main-image {
        opacity: 0;
    }

    .whatsnew-product-card .product-badge {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 2;
        padding: 4px 14px;
        background: rgba(201, 169, 110, 0.9);
        backdrop-filter: blur(4px);
        color: var(--white);
        font-size: 0.5rem;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        border-radius: 60px;
        font-family: var(--font-sans);
    }

    .whatsnew-product-card .product-wishlist {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 2;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(4px);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-600);
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    .whatsnew-product-card .product-wishlist:hover {
        transform: scale(1.1);
        color: #e74c3c;
    }

    .whatsnew-product-card .product-wishlist.active {
        color: #e74c3c;
    }

    .whatsnew-product-card .product-info {
        padding: 18px 20px 20px;
        text-align: center;
    }

    .whatsnew-product-card .product-name {
        font-family: var(--font-serif);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 2px;
        transition: color 0.3s ease;
    }

    .whatsnew-product-card:hover .product-name {
        color: var(--gold);
    }

    .whatsnew-product-card .product-collection {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gray-600);
        margin-bottom: 6px;
    }

    .whatsnew-product-card .product-price {
        font-family: var(--font-sans);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--gold);
        margin-bottom: 10px;
    }

    .whatsnew-product-card .product-colors {
        display: flex;
        gap: 8px;
        justify-content: center;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: all 0.4s ease;
    }

    .whatsnew-product-card:hover .product-colors {
        opacity: 1;
        max-height: 60px;
        padding-top: 8px;
    }

    .whatsnew-product-card .product-colors .color-swatch {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid var(--gray-200);
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .whatsnew-product-card .product-colors .color-swatch:hover {
        transform: scale(1.15);
        border-color: var(--gold);
    }

    .whatsnew-product-card .product-colors .color-swatch.active {
        border-color: var(--gold);
        transform: scale(1.1);
    }

    .whatsnew-product-card .product-colors .color-swatch .color-tooltip {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        background: var(--navy);
        color: var(--white);
        padding: 4px 12px;
        border-radius: 4px;
        font-size: 0.55rem;
        font-family: var(--font-sans);
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .whatsnew-product-card .product-colors .color-swatch:hover .color-tooltip {
        opacity: 1;
    }

    .whatsnew-product-card .add-to-cart-btn {
        margin-top: 12px;
        padding: 8px 20px;
        border-radius: 60px;
        border: 1.5px solid var(--gold);
        background: transparent;
        color: var(--gold);
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.4s ease;
    }

    .whatsnew-product-card:hover .add-to-cart-btn {
        opacity: 1;
        transform: translateY(0);
    }

    .whatsnew-product-card .add-to-cart-btn:hover {
        background: var(--gold);
        color: var(--white);
    }

    /* ================================================================
    WHAT'S NEW STICKY NAV
    ================================================================ */
    .whatsnew-sticky-nav {
        position: sticky;
        top: calc(var(--topbar-height) + var(--navbar-height));
        z-index: 89;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(217, 204, 188, 0.15);
        padding: 10px 0;
        transition: all 0.3s ease;
        box-shadow: 0 2px 20px rgba(38, 36, 57, 0.04);
        margin: 0 -24px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .whatsnew-sticky-nav.scrolled {
        box-shadow: 0 4px 30px rgba(38, 36, 57, 0.08);
        background: rgba(255, 255, 255, 0.99);
    }

    .whatsnew-nav-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        max-width: 1240px;
        margin: 0 auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 4px;
    }

    .whatsnew-nav-inner::-webkit-scrollbar {
        display: none;
    }

    .whatsnew-tab-btn {
        padding: 8px 20px;
        border-radius: 60px;
        border: 1.5px solid transparent;
        background: transparent;
        color: var(--gray-600);
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .whatsnew-tab-btn:hover {
        color: var(--navy);
        border-color: var(--gray-300);
        transform: translateY(-1px);
    }

    .whatsnew-tab-btn.active {
        background: var(--navy);
        color: var(--white);
        border-color: var(--navy);
        box-shadow: 0 4px 16px rgba(38, 36, 57, 0.12);
    }

    .whatsnew-count-badge {
        display: inline-block;
        font-size: 0.55rem;
        font-weight: 600;
        background: rgba(38, 36, 57, 0.08);
        color: var(--gray-600);
        padding: 0 8px;
        border-radius: 60px;
        min-width: 16px;
        text-align: center;
        transition: all 0.3s ease;
    }

    .whatsnew-tab-btn.active .whatsnew-count-badge {
        background: rgba(255, 255, 255, 0.2);
        color: var(--white);
    }

    .whatsnew-nav-divider {
        width: 1px;
        height: 20px;
        background: var(--gray-300);
        opacity: 0.3;
        flex-shrink: 0;
    }

    .whatsnew-progress-container {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: rgba(217, 204, 188, 0.15);
        overflow: hidden;
    }

    .whatsnew-progress-line {
        height: 100%;
        width: 0%;
        background: var(--gold);
        transition: width 0.15s ease;
    }

    /* ================================================================
    WHITE EDIT - HIM & HER
    ================================================================ */
    .white-edit-hero {
        position: relative;
        width: 100%;
        height: 100vh;
        min-height: 600px;
        max-height: 900px;
        overflow: hidden;
        background: var(--navy);
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
    }

    .white-edit-hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .white-edit-hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: heroZoom 20s ease-in-out infinite alternate;
    }

    .white-edit-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.10) 0%, rgba(38, 36, 57, 0.30) 40%, rgba(38, 36, 57, 0.55) 70%, rgba(38, 36, 57, 0.75) 100%);
        z-index: 1;
    }

    .white-edit-hero-content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 40px;
        text-align: center;
        max-width: 1240px;
        margin: 0 auto;
    }

    .white-edit-hero-text {
        max-width: 720px;
    }

    .white-edit-hero-badge {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 6px;
        text-transform: uppercase;
        color: var(--gold);
        display: inline-block;
        padding: 4px 20px;
        border: 1px solid rgba(201, 169, 110, 0.25);
        border-radius: 60px;
        backdrop-filter: blur(8px);
        margin-bottom: 16px;
    }

    .white-edit-hero-title {
        font-family: var(--font-serif);
        font-size: 5rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
        letter-spacing: -0.5px;
        line-height: 1.05;
        margin-bottom: 8px;
    }

    .white-edit-hero-title span {
        color: var(--gold);
        font-weight: 600;
    }

    .white-edit-hero-subtitle {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
        text-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
        margin-bottom: 16px;
    }

    .white-edit-hero-divider {
        width: 60px;
        height: 2px;
        background: var(--gold);
        margin: 0 auto;
    }

    .white-edit-back-btn {
        position: absolute;
        bottom: 40px;
        left: 40px;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 24px;
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 60px;
        color: rgba(255, 255, 255, 0.7);
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 400;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.4s ease;
        text-decoration: none;
    }

    .white-edit-back-btn:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.25);
        color: var(--white);
        transform: translateX(-4px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }

    .white-edit-back-btn i {
        font-size: 0.8rem;
        transition: transform 0.4s ease;
    }

    .white-edit-back-btn:hover i {
        transform: translateX(-4px);
    }

    .white-edit-back-btn span {
        letter-spacing: 2px;
    }

    .white-edit-scroll-indicator {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        opacity: 0.5;
    }

    .white-edit-scroll-indicator span {
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 400;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
    }

    .white-edit-scroll-indicator .scroll-line {
        width: 1px;
        height: 40px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
        animation: scrollPulse 2s ease-in-out infinite;
    }

    .white-edit-categories {
        padding: 80px 0 60px;
        background: var(--white);
    }

    .white-edit-categories-header {
        text-align: center;
        margin-bottom: 52px;
    }

    .white-edit-categories-header .section-title {
        font-size: 2.8rem;
    }

    .white-edit-categories-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        max-width: 1100px;
        margin: 0 auto;
    }

    .white-edit-category-card {
        position: relative;
        border-radius: var(--radius);
        overflow: hidden;
        cursor: pointer;
        aspect-ratio: 4/3;
        background: var(--gray-100);
        transition: all 0.6s ease;
    }

    .white-edit-category-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.05) 0%, rgba(38, 36, 57, 0.20) 40%, rgba(38, 36, 57, 0.50) 75%, rgba(38, 36, 57, 0.70) 100%);
        z-index: 1;
        transition: background 0.6s ease;
    }

    .white-edit-category-card:hover::after {
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.08) 0%, rgba(38, 36, 57, 0.25) 40%, rgba(38, 36, 57, 0.55) 75%, rgba(38, 36, 57, 0.80) 100%);
    }

    .white-edit-category-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
    }

    .white-edit-category-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s ease;
    }

    .white-edit-category-card:hover img {
        transform: scale(1.06);
    }

    .white-edit-category-card .category-content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 32px 28px;
    }

    .white-edit-category-card .category-label {
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 400;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.6);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
    }

    .white-edit-category-card .category-name {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
        letter-spacing: 1px;
        line-height: 1.2;
        margin: 4px 0 6px;
    }

    .white-edit-category-card .category-name span {
        color: var(--gold);
        font-weight: 600;
    }

    .white-edit-category-card .category-divider {
        width: 35px;
        height: 1.5px;
        background: rgba(255, 255, 255, 0.3);
        margin: 4px 0 10px;
        transition: width 0.5s ease, background 0.5s ease;
    }

    .white-edit-category-card:hover .category-divider {
        width: 55px;
        background: var(--gold);
    }

    .white-edit-category-card .category-count {
        font-family: var(--font-sans);
        font-size: 0.65rem;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.5);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
        letter-spacing: 1px;
    }

    .white-edit-products {
        padding: 60px 0 80px;
        background: var(--gray-100);
    }

    .white-edit-products-header {
        text-align: center;
        margin-bottom: 48px;
    }

    .white-edit-products-header .section-title {
        font-size: 2.2rem;
    }

    .white-edit-products-header .section-sub {
        max-width: 480px;
        margin: 0 auto;
    }

    .white-edit-products-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .white-edit-product-card {
        background: var(--white);
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--gray-200);
        transition: all 0.5s ease;
        cursor: pointer;
        position: relative;
    }

    .white-edit-product-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .white-edit-product-card .product-image-container {
        position: relative;
        aspect-ratio: 3/4;
        overflow: hidden;
        background: var(--gray-100);
    }

    .white-edit-product-card .product-image-container .main-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.6s ease;
    }

    .white-edit-product-card .product-image-container .secondary-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.6s ease;
    }

    .white-edit-product-card:hover .product-image-container .secondary-image {
        opacity: 1;
    }

    .white-edit-product-card:hover .product-image-container .main-image {
        opacity: 0;
    }

    .white-edit-product-card .product-badge {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 2;
        padding: 4px 14px;
        background: rgba(201, 169, 110, 0.9);
        backdrop-filter: blur(4px);
        color: var(--white);
        font-size: 0.5rem;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        border-radius: 60px;
        font-family: var(--font-sans);
    }

    .white-edit-product-card .product-wishlist {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 2;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(4px);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-600);
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    .white-edit-product-card .product-wishlist:hover {
        transform: scale(1.1);
        color: #e74c3c;
    }

    .white-edit-product-card .product-wishlist.active {
        color: #e74c3c;
    }

    .white-edit-product-card .product-info {
        padding: 18px 20px 20px;
        text-align: center;
    }

    .white-edit-product-card .product-name {
        font-family: var(--font-serif);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 2px;
        transition: color 0.3s ease;
    }

    .white-edit-product-card:hover .product-name {
        color: var(--gold);
    }

    .white-edit-product-card .product-collection {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gray-600);
        margin-bottom: 6px;
    }

    .white-edit-product-card .product-price {
        font-family: var(--font-sans);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--gold);
        margin-bottom: 10px;
    }

    .white-edit-product-card .product-colors {
        display: flex;
        gap: 8px;
        justify-content: center;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: all 0.4s ease;
    }

    .white-edit-product-card:hover .product-colors {
        opacity: 1;
        max-height: 60px;
        padding-top: 8px;
    }

    .white-edit-product-card .product-colors .color-swatch {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid var(--gray-200);
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .white-edit-product-card .product-colors .color-swatch:hover {
        transform: scale(1.15);
        border-color: var(--gold);
    }

    .white-edit-product-card .product-colors .color-swatch.active {
        border-color: var(--gold);
        transform: scale(1.1);
    }

    .white-edit-product-card .product-colors .color-swatch .color-tooltip {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        background: var(--navy);
        color: var(--white);
        padding: 4px 12px;
        border-radius: 4px;
        font-size: 0.55rem;
        font-family: var(--font-sans);
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .white-edit-product-card .product-colors .color-swatch:hover .color-tooltip {
        opacity: 1;
    }

    .white-edit-product-card .add-to-cart-btn {
        margin-top: 12px;
        padding: 8px 20px;
        border-radius: 60px;
        border: 1.5px solid var(--gold);
        background: transparent;
        color: var(--gold);
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.4s ease;
    }

    .white-edit-product-card:hover .add-to-cart-btn {
        opacity: 1;
        transform: translateY(0);
    }

    .white-edit-product-card .add-to-cart-btn:hover {
        background: var(--gold);
        color: var(--white);
    }

    /* ================================================================
    HBO KAFTAN COLLECTION
    ================================================================ */
    .hbo-hero {
        position: relative;
        width: 100%;
        height: 100vh;
        min-height: 600px;
        max-height: 900px;
        overflow: hidden;
        background: var(--navy);
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
    }

    .hbo-hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .hbo-hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: heroZoom 20s ease-in-out infinite alternate;
    }

    .hbo-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.10) 0%, rgba(38, 36, 57, 0.30) 40%, rgba(38, 36, 57, 0.55) 70%, rgba(38, 36, 57, 0.75) 100%);
        z-index: 1;
    }

    .hbo-hero-content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 40px;
        text-align: center;
        max-width: 1240px;
        margin: 0 auto;
    }

    .hbo-hero-text {
        max-width: 720px;
    }

    .hbo-hero-badge {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 6px;
        text-transform: uppercase;
        color: var(--gold);
        display: inline-block;
        padding: 4px 20px;
        border: 1px solid rgba(201, 169, 110, 0.25);
        border-radius: 60px;
        backdrop-filter: blur(8px);
        margin-bottom: 16px;
    }

    .hbo-hero-title {
        font-family: var(--font-serif);
        font-size: 5rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
        letter-spacing: -0.5px;
        line-height: 1.05;
        margin-bottom: 8px;
    }

    .hbo-hero-title span {
        color: var(--gold);
        font-weight: 600;
    }

    .hbo-hero-subtitle {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
        text-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
        margin-bottom: 16px;
    }

    .hbo-hero-divider {
        width: 60px;
        height: 2px;
        background: var(--gold);
        margin: 0 auto 24px;
    }

    .hbo-hero-cta {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 14px 36px;
        background: var(--gold);
        color: var(--navy);
        font-family: var(--font-sans);
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        border-radius: 60px;
        text-decoration: none;
        transition: all 0.4s ease;
        border: none;
        cursor: pointer;
    }

    .hbo-hero-cta:hover {
        background: #d4b47a;
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(201, 169, 110, 0.3);
    }

    .hbo-back-btn {
        position: absolute;
        bottom: 40px;
        left: 40px;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 24px;
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 60px;
        color: rgba(255, 255, 255, 0.7);
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 400;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.4s ease;
        text-decoration: none;
    }

    .hbo-back-btn:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.25);
        color: var(--white);
        transform: translateX(-4px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }

    .hbo-back-btn i {
        font-size: 0.8rem;
        transition: transform 0.4s ease;
    }

    .hbo-back-btn:hover i {
        transform: translateX(-4px);
    }

    .hbo-back-btn span {
        letter-spacing: 2px;
    }

    .hbo-scroll-indicator {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        opacity: 0.5;
    }

    .hbo-scroll-indicator span {
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 400;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
    }

    .hbo-scroll-indicator .scroll-line {
        width: 1px;
        height: 40px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
        animation: scrollPulse 2s ease-in-out infinite;
    }

    .hbo-highlights {
        padding: 60px 0 40px;
        background: var(--white);
    }

    .hbo-highlights-header {
        text-align: center;
        margin-bottom: 32px;
    }

    .hbo-highlights-header .section-title {
        font-size: 2.4rem;
    }

    .hbo-highlights-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .hbo-highlight-card {
        position: relative;
        border-radius: var(--radius);
        overflow: hidden;
        cursor: pointer;
        aspect-ratio: 3/4;
        background: var(--gray-100);
        transition: all 0.6s ease;
    }

    .hbo-highlight-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.05) 0%, rgba(38, 36, 57, 0.20) 40%, rgba(38, 36, 57, 0.50) 75%, rgba(38, 36, 57, 0.75) 100%);
        z-index: 1;
        transition: background 0.6s ease;
    }

    .hbo-highlight-card:hover::after {
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.08) 0%, rgba(38, 36, 57, 0.25) 40%, rgba(38, 36, 57, 0.55) 75%, rgba(38, 36, 57, 0.85) 100%);
    }

    .hbo-highlight-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
    }

    .hbo-highlight-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s ease;
    }

    .hbo-highlight-card:hover img {
        transform: scale(1.06);
    }

    .hbo-highlight-card .highlight-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
        padding: 16px 14px 14px;
        text-align: center;
    }

    .hbo-highlight-card .highlight-badge {
        font-family: var(--font-sans);
        font-size: 0.45rem;
        font-weight: 400;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--gold);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
        display: inline-block;
        padding: 1px 10px;
        border: 1px solid rgba(201, 169, 110, 0.2);
        border-radius: 60px;
        margin-bottom: 4px;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(4px);
    }

    .hbo-highlight-card .highlight-name {
        font-family: var(--font-serif);
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
        letter-spacing: 0.5px;
        line-height: 1.2;
        margin-bottom: 2px;
    }

    .hbo-highlight-card .highlight-name span {
        color: var(--gold);
        font-weight: 700;
    }

    .hbo-highlight-card .highlight-divider {
        width: 30px;
        height: 1.5px;
        background: rgba(255, 255, 255, 0.3);
        margin: 6px auto 8px;
        transition: width 0.5s ease, background 0.5s ease;
    }

    .hbo-highlight-card:hover .highlight-divider {
        width: 50px;
        background: var(--gold);
    }

    .hbo-highlight-card .highlight-desc {
        font-family: var(--font-sans);
        font-size: 0.65rem;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.6);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
        letter-spacing: 0.5px;
    }

    .hbo-highlight-card .highlight-cta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 500;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--gold);
        margin-top: 8px;
        transition: all 0.3s ease;
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
    }

    .hbo-highlight-card:hover .highlight-cta {
        gap: 12px;
    }

    .hbo-highlights-cta {
        text-align: center;
        margin-top: 48px;
    }

    .hbo-highlights-cta .btn-gold {
        padding: 14px 48px;
        font-size: 0.85rem;
        letter-spacing: 2px;
    }

    .hbo-products {
        padding: 60px 0 80px;
        background: var(--gray-100);
    }

    .hbo-products-header {
        text-align: center;
        margin-bottom: 48px;
    }

    .hbo-products-header .section-title {
        font-size: 2.2rem;
    }

    .hbo-products-header .section-sub {
        max-width: 480px;
        margin: 0 auto;
    }

    .hbo-products-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .hbo-product-card {
        background: var(--white);
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--gray-200);
        transition: all 0.5s ease;
        cursor: pointer;
        position: relative;
    }

    .hbo-product-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .hbo-product-card .product-image-container {
        position: relative;
        aspect-ratio: 3/4;
        overflow: hidden;
        background: var(--gray-100);
        min-height: 320px;
    }

    .hbo-product-card .product-image-container .main-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.6s ease;
    }

    .hbo-product-card .product-image-container .secondary-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.6s ease;
    }

    .hbo-product-card:hover .product-image-container .secondary-image {
        opacity: 1;
    }

    .hbo-product-card:hover .product-image-container .main-image {
        opacity: 0;
    }

    .hbo-product-card .product-badge {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 2;
        padding: 4px 14px;
        background: rgba(201, 169, 110, 0.9);
        backdrop-filter: blur(4px);
        color: var(--white);
        font-size: 0.5rem;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        border-radius: 60px;
        font-family: var(--font-sans);
    }

    .hbo-product-card .product-wishlist {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 2;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(4px);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-600);
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    .hbo-product-card .product-wishlist:hover {
        transform: scale(1.1);
        color: #e74c3c;
    }

    .hbo-product-card .product-wishlist.active {
        color: #e74c3c;
    }

    .hbo-product-card .product-info {
        padding: 18px 20px 20px;
        text-align: center;
    }

    .hbo-product-card .product-name {
        font-family: var(--font-serif);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 2px;
        transition: color 0.3s ease;
    }

    .hbo-product-card:hover .product-name {
        color: var(--gold);
    }

    .hbo-product-card .product-collection {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gray-600);
        margin-bottom: 6px;
    }

    .hbo-product-card .product-price {
        font-family: var(--font-sans);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--gold);
        margin-bottom: 10px;
    }

    .hbo-product-card .product-colors {
        display: flex;
        gap: 8px;
        justify-content: center;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: all 0.4s ease;
    }

    .hbo-product-card:hover .product-colors {
        opacity: 1;
        max-height: 60px;
        padding-top: 8px;
    }

    .hbo-product-card .product-colors .color-swatch {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid var(--gray-200);
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hbo-product-card .product-colors .color-swatch:hover {
        transform: scale(1.15);
        border-color: var(--gold);
    }

    .hbo-product-card .product-colors .color-swatch.active {
        border-color: var(--gold);
        transform: scale(1.1);
    }

    .hbo-product-card .product-colors .color-swatch .color-tooltip {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        background: var(--navy);
        color: var(--white);
        padding: 4px 12px;
        border-radius: 4px;
        font-size: 0.55rem;
        font-family: var(--font-sans);
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .hbo-product-card .product-colors .color-swatch:hover .color-tooltip {
        opacity: 1;
    }

    .hbo-product-card .add-to-cart-btn {
        margin-top: 12px;
        padding: 8px 20px;
        border-radius: 60px;
        border: 1.5px solid var(--gold);
        background: transparent;
        color: var(--gold);
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.4s ease;
    }

    .hbo-product-card:hover .add-to-cart-btn {
        opacity: 1;
        transform: translateY(0);
    }

    .hbo-product-card .add-to-cart-btn:hover {
        background: var(--gold);
        color: var(--white);
    }

    /* ================================================================
    NIMERI PAGE - OZHEA WOMEN'S BRAND
    ================================================================ */
    .nimeri-hero {
        position: relative;
        width: 100%;
        height: 100vh;
        min-height: 600px;
        max-height: 900px;
        overflow: hidden;
        background: var(--navy);
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
    }

    .nimeri-hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .nimeri-hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: heroZoom 20s ease-in-out infinite alternate;
    }

    .nimeri-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.10) 0%, rgba(38, 36, 57, 0.30) 40%, rgba(38, 36, 57, 0.55) 70%, rgba(38, 36, 57, 0.75) 100%);
        z-index: 1;
    }

    .nimeri-hero-content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 40px;
        text-align: center;
        max-width: 1240px;
        margin: 0 auto;
        width: 100%;
    }

    .nimeri-hero-text {
        max-width: 820px;
    }

    .nimeri-hero-badge {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 6px;
        text-transform: uppercase;
        color: var(--gold);
        display: inline-block;
        padding: 4px 20px;
        border: 1px solid rgba(201, 169, 110, 0.25);
        border-radius: 60px;
        backdrop-filter: blur(8px);
        margin-bottom: 16px;
    }

    .nimeri-hero-title {
        font-family: var(--font-serif);
        font-size: 6rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
        letter-spacing: 4px;
        line-height: 1.05;
        margin-bottom: 8px;
    }

    .nimeri-hero-title span {
        color: var(--gold);
        font-weight: 600;
    }

    .nimeri-hero-subtitle {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.8);
        text-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
        margin-bottom: 16px;
    }

    .nimeri-hero-subtitle span {
        color: var(--gold);
        font-weight: 600;
    }

    .nimeri-hero-divider {
        width: 60px;
        height: 2px;
        background: var(--gold);
        margin: 0 auto 20px;
    }

    .nimeri-hero-description {
        font-family: var(--font-sans);
        font-size: 1.05rem;
        color: rgba(255, 255, 255, 0.7);
        max-width: 560px;
        margin: 0 auto 28px;
        line-height: 1.7;
    }

    .nimeri-hero-buttons {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .nimeri-about {
        padding: 80px 0;
        background: var(--white);
    }

    .nimeri-about-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }

    .nimeri-about-text .section-label {
        margin-bottom: 8px;
    }

    .nimeri-about-text .section-title {
        margin-bottom: 20px;
    }

    .nimeri-about-description {
        font-size: 1rem;
        color: var(--gray-600);
        line-height: 1.8;
        margin-bottom: 16px;
    }

    .nimeri-about-description strong {
        color: var(--navy);
        font-weight: 600;
    }

    .nimeri-values {
        display: grid;
        gap: 20px;
        margin-top: 24px;
    }

    .nimeri-value-item {
        display: flex;
        gap: 16px;
        padding: 16px 20px;
        background: var(--gray-100);
        border-radius: var(--radius);
        transition: all 0.3s ease;
        align-items: flex-start;
    }

    .nimeri-value-item:hover {
        transform: translateX(6px);
        background: var(--cream-light);
    }

    .nimeri-value-item .value-icon {
        font-size: 1.6rem;
        color: var(--gold);
        margin-top: 2px;
        flex-shrink: 0;
        width: 40px;
    }

    .nimeri-value-item .value-content h4 {
        font-family: var(--font-serif);
        font-size: 1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 2px;
    }

    .nimeri-value-item .value-content p {
        font-size: 0.9rem;
        color: var(--gray-600);
        line-height: 1.5;
    }

    .nimeri-about-image {
        border-radius: var(--radius);
        overflow: hidden;
        height: 100%;
        min-height: 400px;
    }

    .nimeri-about-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    .nimeri-about-image:hover img {
        transform: scale(1.03);
    }

    .nimeri-mission {
        padding: 80px 0;
        background: var(--gray-100);
    }

    .nimeri-mission-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }

    .nimeri-mission-image {
        border-radius: var(--radius);
        overflow: hidden;
        height: 100%;
        min-height: 400px;
    }

    .nimeri-mission-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    .nimeri-mission-image:hover img {
        transform: scale(1.03);
    }

    .nimeri-mission-text .section-label {
        margin-bottom: 8px;
    }

    .nimeri-mission-text .section-title {
        margin-bottom: 20px;
    }

    .nimeri-mission-description {
        font-size: 1rem;
        color: var(--gray-600);
        line-height: 1.8;
        margin-bottom: 16px;
    }

    .nimeri-problems {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 24px;
    }

    .nimeri-problem-item {
        display: flex;
        gap: 12px;
        padding: 16px 20px;
        background: var(--white);
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
        transition: all 0.3s ease;
        align-items: flex-start;
    }

    .nimeri-problem-item:hover {
        border-color: var(--gold);
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

    .nimeri-problem-item i {
        font-size: 1.2rem;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .nimeri-problem-item i.fa-times-circle {
        color: #e74c3c;
    }

    .nimeri-problem-item i.fa-check-circle {
        color: #2ecc71;
    }

    .nimeri-problem-item h4 {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 2px;
    }

    .nimeri-problem-item p {
        font-size: 0.8rem;
        color: var(--gray-600);
        line-height: 1.5;
    }

    .nimeri-cta {
        padding: 80px 0;
        background: var(--navy);
        color: var(--white);
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .nimeri-cta-content {
        text-align: center;
        max-width: 720px;
        margin: 0 auto;
    }

    .nimeri-cta-badge {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--gold);
        display: inline-block;
        margin-bottom: 12px;
    }

    .nimeri-cta-content h2 {
        font-family: var(--font-serif);
        font-size: 2.8rem;
        font-weight: 500;
        margin-bottom: 16px;
        line-height: 1.1;
    }

    .nimeri-cta-content h2 span {
        color: var(--gold);
        font-weight: 600;
    }

    .nimeri-cta-content p {
        font-size: 1.05rem;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 28px;
        line-height: 1.7;
    }

    .nimeri-cta-buttons {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .nimeri-cta-buttons .btn-gold {
        background: var(--gold);
        color: var(--navy);
    }

    .nimeri-cta-buttons .btn-gold:hover {
        background: #d4b47a;
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(201, 169, 110, 0.2);
    }

    .nimeri-collections {
        padding: 80px 0 100px;
        background: var(--white);
    }

    .nimeri-collections-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-top: 40px;
    }

    .nimeri-collection-card {
        border-radius: var(--radius);
        overflow: hidden;
        cursor: pointer;
        aspect-ratio: 3/4;
        background: var(--gray-100);
        transition: all 0.5s ease;
    }

    .nimeri-collection-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
    }

    .nimeri-collection-card .collection-image {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        position: relative;
        transition: transform 0.6s ease;
    }

    .nimeri-collection-card:hover .collection-image {
        transform: scale(1.05);
    }

    .nimeri-collection-card .collection-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.05) 0%, rgba(38, 36, 57, 0.20) 40%, rgba(38, 36, 57, 0.50) 75%, rgba(38, 36, 57, 0.75) 100%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 24px 28px;
        transition: background 0.5s ease;
    }

    .nimeri-collection-card:hover .collection-overlay {
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.08) 0%, rgba(38, 36, 57, 0.25) 40%, rgba(38, 36, 57, 0.55) 75%, rgba(38, 36, 57, 0.85) 100%);
    }

    .nimeri-collection-card .collection-overlay h3 {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
        margin-bottom: 4px;
    }

    .nimeri-collection-card .collection-overlay p {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.6);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
        margin-bottom: 12px;
    }

    .nimeri-collection-card .collection-cta {
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--gold);
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .nimeri-collection-card:hover .collection-cta {
        gap: 14px;
    }

    /* ================================================================
    REQUEST QUOTE - CORPORATE UNIFORMS
    ================================================================ */
    .quote-hero {
        position: relative;
        width: 100%;
        height: 60vh;
        min-height: 350px;
        max-height: 500px;
        overflow: hidden;
        background: var(--navy);
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
        display: flex;
        align-items: center;
    }

    .quote-hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .quote-hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .quote-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.15) 0%, rgba(38, 36, 57, 0.45) 50%, rgba(38, 36, 57, 0.70) 100%);
        z-index: 1;
    }

    .quote-hero-content {
        position: relative;
        z-index: 2;
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 40px;
        width: 100%;
    }

    .quote-hero-badge {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--gold);
        display: block;
        margin-bottom: 8px;
    }

    .quote-hero-content h1 {
        font-family: var(--font-serif);
        font-size: 3.6rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
        letter-spacing: -0.5px;
        line-height: 1.08;
        max-width: 700px;
    }

    .quote-hero-content h1 span {
        color: var(--gold);
        font-weight: 600;
    }

    .quote-hero-content p {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
        max-width: 500px;
        margin-top: 8px;
    }

    .quote-form-section {
        padding: 60px 0 80px;
        background: var(--gray-100);
    }

    .quote-form-wrapper {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 40px;
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .quote-form-container {
        background: var(--white);
        border-radius: var(--radius);
        padding: 40px;
        box-shadow: var(--shadow);
    }

    .quote-form-header {
        text-align: center;
        margin-bottom: 32px;
    }

    .quote-form-header h2 {
        font-family: var(--font-serif);
        font-size: 2rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .quote-form-header h2 span {
        color: var(--gold);
    }

    .quote-form-header p {
        color: var(--gray-600);
        font-size: 0.95rem;
    }

    .form-step {
        display: block;
        animation: fadeIn 0.4s ease;
    }

    .step-title {
        font-family: var(--font-serif);
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .step-title .step-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--gold);
        color: var(--white);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        font-size: 0.9rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        font-weight: 500;
        font-size: 0.85rem;
        display: block;
        margin-bottom: 6px;
        color: var(--gray-800);
    }

    .form-group .required {
        color: #e74c3c;
        margin-left: 2px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        font-family: var(--font-sans);
        font-size: 0.9rem;
        transition: var(--transition);
        background: var(--white);
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.2);
    }

    .form-group textarea {
        resize: vertical;
        min-height: 80px;
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .file-upload-wrapper {
        border: 2px dashed var(--gray-300);
        border-radius: 8px;
        padding: 30px 20px;
        text-align: center;
        cursor: pointer;
        transition: var(--transition);
        position: relative;
    }

    .file-upload-wrapper:hover {
        border-color: var(--gold);
        background: var(--cream-light);
    }

    .file-upload-wrapper .file-icon {
        font-size: 2.4rem;
        color: var(--gray-400);
        display: block;
        margin-bottom: 8px;
    }

    .file-upload-wrapper .file-text {
        font-size: 0.9rem;
        color: var(--gray-600);
    }

    .file-upload-wrapper .file-subtext {
        font-size: 0.7rem;
        color: var(--gray-500);
        margin-top: 4px;
    }

    .file-upload-wrapper input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

    .file-upload-wrapper .file-selected {
        display: none;
        font-size: 0.85rem;
        color: var(--gold);
        font-weight: 500;
        margin-top: 8px;
    }

    .file-upload-wrapper .file-selected.show {
        display: block;
    }

    .file-upload-wrapper .file-selected i {
        margin-right: 6px;
    }

    .file-item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        background: var(--gray-100);
        border-radius: 60px;
        font-size: 0.8rem;
        color: var(--gray-600);
        border: 1px solid var(--gray-200);
        animation: fadeIn 0.3s ease;
    }

    .file-item .file-remove {
        cursor: pointer;
        color: #e74c3c;
        transition: var(--transition);
    }

    .file-item .file-remove:hover {
        transform: scale(1.2);
    }

    .checkbox-group {
        margin-top: 8px;
    }

    .checkbox-label {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-weight: 400 !important;
        font-size: 0.85rem !important;
        color: var(--gray-600);
        cursor: pointer;
        line-height: 1.5;
    }

    .checkbox-label input[type="checkbox"] {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        margin-top: 2px;
        accent-color: var(--gold);
        cursor: pointer;
    }

    .checkbox-label a {
        color: var(--gold);
        text-decoration: underline;
    }

    .form-navigation {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
        margin-top: 32px;
        padding-top: 20px;
        border-top: 1px solid var(--gray-200);
    }

    .form-progress {
        margin-top: 32px;
        padding-top: 24px;
        border-top: 1px solid var(--gray-200);
    }

    .progress-steps {
        display: flex;
        justify-content: space-between;
        position: relative;
        margin-bottom: 16px;
    }

    .progress-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        flex: 1;
        position: relative;
    }

    .progress-step .step-circle {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--gray-200);
        color: var(--gray-600);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.8rem;
        transition: all 0.4s ease;
        position: relative;
        z-index: 2;
    }

    .progress-step.active .step-circle {
        background: var(--gold);
        color: var(--white);
        box-shadow: 0 0 0 4px rgba(201, 169, 110, 0.2);
    }

    .progress-step.completed .step-circle {
        background: var(--navy);
        color: var(--white);
    }

    .progress-step .step-label {
        font-size: 0.65rem;
        color: var(--gray-600);
        text-align: center;
        font-weight: 500;
    }

    .progress-step.active .step-label {
        color: var(--navy);
        font-weight: 600;
    }

    .progress-bar {
        width: 100%;
        height: 4px;
        background: var(--gray-200);
        border-radius: 4px;
        overflow: hidden;
    }

    .progress-bar .progress-fill {
        height: 100%;
        background: var(--gold);
        border-radius: 4px;
        transition: width 0.5s ease;
    }

    .quote-sidebar {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .sidebar-card {
        background: var(--white);
        border-radius: var(--radius);
        padding: 24px;
        border: 1px solid var(--gray-200);
        box-shadow: var(--shadow);
    }

    .sidebar-card h4 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .sidebar-card p {
        color: var(--gray-600);
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .sidebar-card ol,
    .sidebar-card ul {
        color: var(--gray-600);
        font-size: 0.9rem;
        line-height: 1.8;
    }

    .sidebar-card ul li {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .sidebar-card ul li i {
        width: 18px;
    }

    .quote-success-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 3000;
        background: rgba(38, 36, 57, 0.7);
        backdrop-filter: blur(12px);
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: fadeIn 0.4s ease;
    }

    .quote-success-modal.open {
        display: flex;
    }

    .quote-success-modal .modal-content {
        background: var(--white);
        border-radius: var(--radius);
        max-width: 520px;
        width: 100%;
        padding: 48px 40px 40px;
        box-shadow: var(--shadow-hover);
        text-align: center;
        position: relative;
        max-height: 90vh;
        overflow-y: auto;
    }

    .quote-success-modal .success-icon {
        font-size: 4rem;
        color: #2ecc71;
        background: rgba(46, 204, 113, 0.12);
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
    }

    .quote-success-modal h2 {
        font-family: var(--font-serif);
        font-size: 2rem;
        font-weight: 700;
        color: var(--navy);
    }

    .quote-success-modal h2 span {
        color: var(--gold);
    }

    .quote-summary {
        background: var(--gray-100);
        border-radius: var(--radius);
        padding: 16px 20px;
        margin: 16px 0;
        text-align: left;
        font-size: 0.9rem;
    }

    .quote-summary .summary-row {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        border-bottom: 1px solid var(--gray-200);
    }

    .quote-summary .summary-row:last-child {
        border-bottom: none;
    }

    .quote-summary .summary-label {
        color: var(--gray-600);
    }

    .quote-summary .summary-value {
        font-weight: 500;
        color: var(--navy);
    }

    .quote-success-modal .actions {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* ================================================================
    CORPORATE UNIFORMS
    ================================================================ */
    .corporate-hero {
        position: relative;
        width: 100%;
        height: 85vh;
        min-height: 600px;
        max-height: 800px;
        overflow: hidden;
        background: var(--navy);
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
    }

    .corporate-hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .corporate-hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: heroZoom 20s ease-in-out infinite alternate;
    }

    .corporate-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.10) 0%, rgba(38, 36, 57, 0.30) 40%, rgba(38, 36, 57, 0.55) 70%, rgba(38, 36, 57, 0.75) 100%);
        z-index: 1;
    }

    .corporate-hero-content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 40px;
        max-width: 1240px;
        margin: 0 auto;
        width: 100%;
    }

    .corporate-hero-badge {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--gold);
        display: block;
        margin-bottom: 8px;
    }

    .corporate-hero-content h1 {
        font-family: var(--font-serif);
        font-size: 4.2rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
        letter-spacing: -0.5px;
        line-height: 1.08;
        max-width: 700px;
    }

    .corporate-hero-content h1 span {
        color: var(--gold);
        font-weight: 600;
    }

    .corporate-hero-content p {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
        max-width: 500px;
        margin-top: 8px;
    }

    .corporate-hero-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 20px;
    }

    .corporate-nav-wrapper {
        position: sticky;
        top: calc(var(--topbar-height) + var(--navbar-height));
        z-index: 90;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(217, 204, 188, 0.15);
        padding: 12px 0;
        transition: all 0.3s ease;
        box-shadow: 0 2px 20px rgba(38, 36, 57, 0.04);
    }

    .corporate-nav-wrapper.scrolled {
        box-shadow: 0 4px 30px rgba(38, 36, 57, 0.08);
        background: rgba(255, 255, 255, 0.98);
    }

    .corporate-nav-wrapper .container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 24px;
        flex-wrap: wrap;
    }

    .corporate-nav-link {
        font-family: var(--font-sans);
        font-size: 0.65rem;
        font-weight: 500;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--gray-600);
        text-decoration: none;
        transition: all 0.3s ease;
        padding: 4px 0;
        position: relative;
        cursor: pointer;
    }

    .corporate-nav-link::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 1.5px;
        background: var(--gold);
        transition: width 0.4s ease;
    }

    .corporate-nav-link:hover {
        color: var(--navy);
    }

    .corporate-nav-link.active {
        color: var(--navy);
        font-weight: 600;
    }

    .corporate-nav-link.active::after {
        width: 100%;
    }

    .corporate-nav-divider {
        width: 1px;
        height: 12px;
        background: var(--gray-300);
        opacity: 0.3;
        flex-shrink: 0;
    }

    .corporate-nav-wrapper .progress-container {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: rgba(217, 204, 188, 0.15);
        overflow: hidden;
    }

    .corporate-nav-wrapper .progress-line {
        height: 100%;
        width: 0%;
        background: var(--gold);
        transition: width 0.15s ease;
    }

    .corporate-services {
        padding: 80px 0;
        background: var(--white);
    }

    .corporate-services-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .corporate-service-card {
        background: var(--white);
        border-radius: var(--radius);
        padding: 32px 24px;
        border: 1px solid var(--gray-200);
        transition: all 0.4s ease;
        cursor: pointer;
        text-align: center;
    }

    .corporate-service-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .corporate-service-card .service-icon {
        font-size: 2.6rem;
        color: var(--gold);
        margin-bottom: 16px;
    }

    .corporate-service-card h3 {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 8px;
    }

    .corporate-service-card p {
        font-size: 0.9rem;
        color: var(--gray-600);
        line-height: 1.6;
        margin-bottom: 12px;
    }

    .corporate-service-card .service-features {
        list-style: none;
        padding: 0;
        margin: 0 0 16px;
        text-align: left;
    }

    .corporate-service-card .service-features li {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
        font-size: 0.8rem;
        color: var(--gray-600);
    }

    .corporate-service-card .service-features li i {
        color: var(--gold);
        font-size: 0.75rem;
    }

    .corporate-service-card .service-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--gold);
        transition: all 0.3s ease;
    }

    .corporate-service-card:hover .service-cta {
        gap: 14px;
    }

    .corporate-industries {
        padding: 80px 0;
        background: var(--gray-100);
    }

    .corporate-industries-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .corporate-industry-card {
        border-radius: var(--radius);
        overflow: hidden;
        cursor: pointer;
        aspect-ratio: 3/4;
        background: var(--gray-100);
        transition: all 0.5s ease;
    }

    .corporate-industry-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
    }

    .corporate-industry-card .industry-image {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        position: relative;
        transition: transform 0.6s ease;
    }

    .corporate-industry-card:hover .industry-image {
        transform: scale(1.05);
    }

    .corporate-industry-card .industry-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.05) 0%, rgba(38, 36, 57, 0.20) 40%, rgba(38, 36, 57, 0.50) 75%, rgba(38, 36, 57, 0.75) 100%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 24px 20px;
        transition: background 0.5s ease;
    }

    .corporate-industry-card:hover .industry-overlay {
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.08) 0%, rgba(38, 36, 57, 0.25) 40%, rgba(38, 36, 57, 0.55) 75%, rgba(38, 36, 57, 0.85) 100%);
    }

    .corporate-industry-card .industry-icon {
        font-size: 1.8rem;
        color: var(--gold);
        margin-bottom: 8px;
    }

    .corporate-industry-card .industry-overlay h3 {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
        margin-bottom: 4px;
    }

    .corporate-industry-card .industry-overlay p {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.6);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
        margin-bottom: 12px;
    }

    .corporate-industry-card .industry-cta {
        font-size: 0.7rem;
        font-weight: 500;
        color: var(--gold);
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .corporate-industry-card:hover .industry-cta {
        gap: 14px;
    }

    .corporate-process {
        padding: 80px 0;
        background: var(--white);
    }

    .corporate-process-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .corporate-process-steps .process-step {
        background: var(--gray-100);
        border-radius: var(--radius);
        padding: 28px 24px;
        text-align: center;
        border: 1px solid var(--gray-200);
        transition: all 0.4s ease;
    }

    .corporate-process-steps .process-step:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .corporate-process-steps .process-step .step-number {
        font-family: var(--font-serif);
        font-size: 2rem;
        font-weight: 700;
        color: var(--gold);
        margin-bottom: 8px;
    }

    .corporate-process-steps .process-step h3 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .corporate-process-steps .process-step p {
        font-size: 0.85rem;
        color: var(--gray-600);
        line-height: 1.6;
    }

    .corporate-portfolio {
        padding: 80px 0;
        background: var(--gray-100);
    }

    .corporate-portfolio-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .portfolio-item-card {
        background: var(--white);
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--gray-200);
        transition: all 0.4s ease;
        cursor: pointer;
    }

    .portfolio-item-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .portfolio-item-card .portfolio-image {
        height: 200px;
        background-size: cover;
        background-position: center;
    }

    .portfolio-item-card .portfolio-details {
        padding: 20px;
    }

    .portfolio-item-card .portfolio-details .portfolio-badge {
        font-size: 0.6rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--gold);
        background: var(--cream-light);
        padding: 2px 12px;
        border-radius: 60px;
        display: inline-block;
        margin-bottom: 6px;
    }

    .portfolio-item-card .portfolio-details h4 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .portfolio-item-card .portfolio-details p {
        font-size: 0.85rem;
        color: var(--gray-600);
        line-height: 1.5;
    }

    .corporate-benefits {
        padding: 80px 0;
        background: var(--navy);
        color: var(--white);
    }

    .corporate-benefits .section-header .section-label {
        color: var(--gold);
    }

    .corporate-benefits .section-header .section-title {
        color: var(--white);
    }

    .corporate-benefits .section-header .section-title span {
        color: var(--gold);
    }

    .corporate-benefits .section-header .section-sub {
        color: rgba(255, 255, 255, 0.6);
    }

    .corporate-benefits-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        margin-top: 40px;
    }

    .corporate-benefits .benefit-card {
        text-align: center;
        padding: 32px 24px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: var(--radius);
        border: 1px solid rgba(255, 255, 255, 0.08);
        transition: all 0.4s ease;
    }

    .corporate-benefits .benefit-card:hover {
        background: rgba(255, 255, 255, 0.10);
        transform: translateY(-4px);
        border-color: rgba(201, 169, 110, 0.3);
    }

    .corporate-benefits .benefit-card .benefit-icon {
        font-size: 2.4rem;
        color: var(--gold);
        margin-bottom: 12px;
        display: inline-block;
    }

    .corporate-benefits .benefit-card h4 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .corporate-benefits .benefit-card p {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.5;
    }

    .corporate-cta {
        padding: 80px 0;
        background: var(--white);
        border-top: 1px solid var(--gray-200);
    }

    .corporate-cta-content {
        text-align: center;
        max-width: 700px;
        margin: 0 auto;
    }

    .corporate-cta-badge {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--gold);
        display: inline-block;
        margin-bottom: 12px;
    }

    .corporate-cta-content h2 {
        font-family: var(--font-serif);
        font-size: 2.8rem;
        font-weight: 500;
        color: var(--navy);
        margin-bottom: 16px;
        line-height: 1.1;
    }

    .corporate-cta-content h2 span {
        color: var(--gold);
        font-weight: 600;
    }

    .corporate-cta-content p {
        font-size: 1.05rem;
        color: var(--gray-600);
        margin-bottom: 28px;
        line-height: 1.7;
    }

    .corporate-cta-buttons {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .corporate-cta-buttons .btn-gold {
        background: var(--gold);
        color: var(--navy);
    }

    .corporate-cta-buttons .btn-gold:hover {
        background: #d4b47a;
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(201, 169, 110, 0.2);
    }

    /* ================================================================
    GIFTS PAGE - LUXURY BOUTIQUE
    ================================================================ */
    .gifts-hero {
        position: relative;
        width: 100%;
        height: 100vh;
        min-height: 700px;
        max-height: 900px;
        overflow: hidden;
        background: var(--navy);
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
    }

    .gifts-hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .gifts-hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: heroZoom 25s ease-in-out infinite alternate;
    }

    .gifts-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.10) 0%, rgba(38, 36, 57, 0.35) 40%, rgba(38, 36, 57, 0.55) 70%, rgba(38, 36, 57, 0.75) 100%);
        z-index: 1;
    }

    .gifts-hero-content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 40px;
        max-width: 1240px;
        margin: 0 auto;
        width: 100%;
    }

    .gifts-hero-text {
        max-width: 720px;
    }

    .gifts-hero-badge {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 6px;
        text-transform: uppercase;
        color: var(--gold);
        display: inline-block;
        padding: 4px 20px;
        border: 1px solid rgba(201, 169, 110, 0.25);
        border-radius: 60px;
        backdrop-filter: blur(8px);
        margin-bottom: 16px;
    }

    .gifts-hero-text h1 {
        font-family: var(--font-serif);
        font-size: 4.8rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
        letter-spacing: -0.5px;
        line-height: 1.05;
        margin-bottom: 8px;
    }

    .gifts-hero-text h1 span {
        color: var(--gold);
        font-weight: 600;
    }

    .gifts-hero-text p {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
        text-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
        margin-bottom: 32px;
        max-width: 500px;
    }

    .gifts-finder-hero {
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--radius);
        padding: 24px 28px;
        max-width: 820px;
        transition: all 0.3s ease;
    }

    .gifts-finder-hero:hover {
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.15);
    }

    .gifts-finder-hero-inner {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .gifts-finder-step {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        flex-wrap: wrap;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .gifts-finder-step:last-child {
        border-bottom: none;
    }

    .gifts-finder-step .finder-label {
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
        min-width: 140px;
        padding-top: 6px;
    }

    .finder-options {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        flex: 1;
    }

    .finder-btn-hero {
        padding: 6px 16px;
        border-radius: 60px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.6);
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 400;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .finder-btn-hero:hover {
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.3);
        color: var(--white);
        transform: translateY(-2px);
    }

    .finder-btn-hero.active {
        background: var(--gold);
        border-color: var(--gold);
        color: var(--navy);
        font-weight: 500;
        box-shadow: 0 4px 20px rgba(201, 169, 110, 0.2);
    }

    .finder-btn-hero .finder-icon {
        font-size: 0.8rem;
    }

    .gifts-finder-result {
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        min-height: 70px;
        display: flex;
        align-items: center;
    }

    .finder-result-content {
        display: flex;
        align-items: center;
        gap: 16px;
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.85rem;
        width: 100%;
    }

    .finder-result-content .result-item {
        padding: 4px 14px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 60px;
        color: var(--white);
        font-size: 0.75rem;
        cursor: default;
    }

    .finder-result-content .result-item:last-child {
        background: var(--gold);
        color: var(--navy);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .finder-result-content .result-item:last-child:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(201, 169, 110, 0.3);
    }

    .gifts-hero-scroll {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        opacity: 0.5;
    }

    .gifts-hero-scroll span {
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 400;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
    }

    .gifts-hero-scroll .scroll-line {
        width: 1px;
        height: 40px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
        animation: scrollPulse 2s ease-in-out infinite;
    }

    .gifts-nav-wrapper {
        position: sticky;
        top: calc(var(--topbar-height) + var(--navbar-height));
        z-index: 89;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(217, 204, 188, 0.15);
        padding: 10px 0;
        transition: all 0.3s ease;
        box-shadow: 0 2px 20px rgba(38, 36, 57, 0.04);
    }

    .gifts-nav-wrapper.scrolled {
        box-shadow: 0 4px 30px rgba(38, 36, 57, 0.08);
        background: rgba(255, 255, 255, 0.98);
    }

    .gifts-nav-wrapper .container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .gifts-nav-btn {
        padding: 8px 20px;
        border-radius: 60px;
        border: 1.5px solid transparent;
        background: transparent;
        color: var(--gray-600);
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .gifts-nav-btn:hover {
        color: var(--navy);
        border-color: var(--gray-300);
        transform: translateY(-1px);
    }

    .gifts-nav-btn.active {
        background: var(--navy);
        color: var(--white);
        border-color: var(--navy);
        box-shadow: 0 4px 16px rgba(38, 36, 57, 0.12);
    }

    .gifts-nav-btn .nav-icon {
        font-size: 0.8rem;
    }

    .gifts-nav-wrapper .nav-divider {
        width: 1px;
        height: 20px;
        background: var(--gray-300);
        opacity: 0.3;
        flex-shrink: 0;
    }

    .gifts-nav-wrapper .progress-container {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: rgba(217, 204, 188, 0.15);
        overflow: hidden;
    }

    .gifts-nav-wrapper .progress-line {
        height: 100%;
        width: 0%;
        background: var(--gold);
        transition: width 0.15s ease;
    }

    .gifts-section {
        padding: 60px 0 40px;
        border-bottom: 1px solid var(--gray-200);
    }

    .gifts-section:last-of-type {
        border-bottom: none;
    }

    .gifts-section:nth-child(even) {
        background: var(--gray-100);
    }

    .gifts-section-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .gifts-section-header .section-title {
        font-size: 2.6rem;
    }

    .gifts-sub-section {
        margin-bottom: 48px;
    }

    .gifts-sub-section:last-child {
        margin-bottom: 0;
    }

    .gifts-sub-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--gray-200);
        flex-wrap: wrap;
    }

    .gifts-sub-header h3 {
        font-family: var(--font-serif);
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--navy);
    }

    .gifts-sub-header .sub-count {
        font-family: var(--font-sans);
        font-size: 0.7rem;
        color: var(--gray-600);
        font-weight: 400;
    }

    .gifts-sub-header .view-all-link {
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 500;
        color: var(--gold);
        text-decoration: none;
        transition: all 0.3s ease;
        margin-left: auto;
        padding: 4px 0;
        border-bottom: 1px solid transparent;
    }

    .gifts-sub-header .view-all-link:hover {
        border-bottom-color: var(--gold);
        transform: translateX(2px);
    }

    .gifts-product-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .gifts-giftcards-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .gifts-guide-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .gifts-custom-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .gift-product-card {
        background: var(--white);
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--gray-200);
        transition: all 0.5s ease;
        cursor: pointer;
        position: relative;
    }

    .gift-product-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .gift-product-card .product-image-container {
        position: relative;
        aspect-ratio: 3/4;
        overflow: hidden;
        background: var(--gray-100);
    }

    .gift-product-card .product-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.6s ease;
    }

    .gift-product-card .product-image-container .secondary-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.6s ease;
    }

    .gift-product-card:hover .product-image-container .secondary-image {
        opacity: 1;
    }

    .gift-product-card:hover .product-image-container .main-image {
        opacity: 0;
    }

    .gift-product-card .product-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 2;
        padding: 3px 12px;
        background: var(--gold);
        color: var(--white);
        font-size: 0.5rem;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        border-radius: 60px;
        font-family: var(--font-sans);
    }

    .gift-product-card .product-badge.best-seller {
        background: #18794e;
    }

    .gift-product-card .product-badge.premium {
        background: var(--navy);
    }

    .gift-product-card .product-badge.new {
        background: #e67e22;
    }

    .gift-product-card .product-badge.digital {
        background: var(--navy);
        color: var(--white);
    }

    .gift-product-card .product-wishlist {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 2;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(4px);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-600);
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    .gift-product-card .product-wishlist:hover {
        transform: scale(1.1);
        color: #e74c3c;
    }

    .gift-product-card .product-wishlist.active {
        color: #e74c3c;
    }

    .gift-product-card .product-info {
        padding: 16px 18px 18px;
        text-align: center;
    }

    .gift-product-card .product-name {
        font-family: var(--font-serif);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 2px;
        transition: color 0.3s ease;
    }

    .gift-product-card:hover .product-name {
        color: var(--gold);
    }

    .gift-product-card .product-collection {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gray-600);
        margin-bottom: 4px;
    }

    .gift-product-card .product-price {
        font-family: var(--font-sans);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--gold);
        margin-bottom: 10px;
    }

    .gift-product-card .product-actions {
        display: flex;
        gap: 8px;
        justify-content: center;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.4s ease;
    }

    .gift-product-card:hover .product-actions {
        opacity: 1;
        transform: translateY(0);
    }

    .gift-product-card .product-actions .btn-gift {
        padding: 8px 18px;
        border-radius: 60px;
        border: 1.5px solid var(--gold);
        background: transparent;
        color: var(--gold);
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .gift-product-card .product-actions .btn-gift:hover {
        background: var(--gold);
        color: var(--white);
    }

    .gift-product-card .product-actions .btn-cart {
        padding: 8px 16px;
        border-radius: 60px;
        border: 1.5px solid var(--gray-300);
        background: transparent;
        color: var(--gray-600);
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans);
    }

    .gift-product-card .product-actions .btn-cart:hover {
        border-color: var(--navy);
        color: var(--navy);
    }

    .gift-card-item {
        background: var(--white);
        border-radius: var(--radius);
        padding: 28px 20px;
        text-align: center;
        border: 1px solid var(--gray-200);
        transition: all 0.4s ease;
        cursor: pointer;
    }

    .gift-card-item:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .gift-card-item .card-icon {
        font-size: 2.4rem;
        color: var(--gold);
        margin-bottom: 12px;
    }

    .gift-card-item h4 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .gift-card-item .card-amount {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--gold);
        margin: 6px 0;
    }

    .gift-card-item .card-desc {
        font-size: 0.85rem;
        color: var(--gray-600);
        margin-bottom: 12px;
    }

    .gift-card-item .card-badge {
        display: inline-block;
        font-size: 0.55rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 2px 12px;
        border-radius: 60px;
        background: var(--cream-light);
        color: var(--gray-600);
    }

    .gift-card-item .card-actions {
        margin-top: 14px;
        display: flex;
        gap: 8px;
        justify-content: center;
    }

    .gift-card-item .card-actions .btn-card {
        padding: 8px 20px;
        border-radius: 60px;
        border: 1.5px solid var(--gold);
        background: var(--gold);
        color: var(--white);
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans);
    }

    .gift-card-item .card-actions .btn-card:hover {
        background: #b8965a;
        transform: translateY(-2px);
    }

    .gift-guide-item {
        background: var(--white);
        border-radius: var(--radius);
        padding: 24px 20px;
        text-align: center;
        border: 1px solid var(--gray-200);
        transition: all 0.4s ease;
        cursor: pointer;
    }

    .gift-guide-item:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .gift-guide-item .guide-image {
        border-radius: 8px;
        margin-bottom: 12px;
        transition: transform 0.4s ease;
    }

    .gift-guide-item:hover .guide-image {
        transform: scale(1.02);
    }

    .gift-guide-item .guide-icon {
        font-size: 1.6rem;
        color: var(--gold);
        margin-bottom: 8px;
    }

    .gift-guide-item h4 {
        font-family: var(--font-serif);
        font-size: 1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .gift-guide-item p {
        font-size: 0.85rem;
        color: var(--gray-600);
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .gift-guide-item .guide-tags {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .gift-guide-item .guide-tags span {
        font-size: 0.6rem;
        padding: 2px 12px;
        border-radius: 60px;
        background: var(--gray-100);
        color: var(--gray-600);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .gift-guide-item .guide-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--gold);
        margin-top: 10px;
        transition: gap 0.3s ease;
    }

    .gift-guide-item .guide-link:hover {
        gap: 12px;
    }

    .gift-custom-item {
        background: linear-gradient(135deg, var(--cream-light), var(--white));
        border-radius: var(--radius);
        padding: 32px 24px;
        text-align: center;
        border: 1px solid var(--gray-200);
        transition: all 0.4s ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .gift-custom-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--gold);
        transform: scaleX(0);
        transition: transform 0.4s ease;
    }

    .gift-custom-item:hover::before {
        transform: scaleX(1);
    }

    .gift-custom-item:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .gift-custom-item .custom-icon {
        font-size: 2.4rem;
        color: var(--gold);
        margin-bottom: 12px;
    }

    .gift-custom-item h4 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .gift-custom-item p {
        font-size: 0.85rem;
        color: var(--gray-600);
        margin-bottom: 16px;
    }

    .gift-custom-item .btn-custom {
        padding: 10px 28px;
        border-radius: 60px;
        border: none;
        background: var(--navy);
        color: var(--white);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans);
    }

    .gift-custom-item .btn-custom:hover {
        background: #35324f;
        transform: translateY(-2px);
    }

    .gifts-occasion-section {
        padding: 80px 0;
        background: var(--gray-100);
    }

    .gifts-occasion-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
    }

    .occasion-card {
        background: var(--white);
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--gray-200);
        transition: all 0.4s ease;
        cursor: pointer;
        text-align: center;
    }

    .occasion-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .occasion-card .occasion-image {
        height: 140px;
        background-size: cover;
        background-position: center;
        position: relative;
    }

    .occasion-card .occasion-image .occasion-icon {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.4rem;
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
        background: rgba(38, 36, 57, 0.2);
    }

    .occasion-card .occasion-info {
        padding: 16px;
    }

    .occasion-card .occasion-info h4 {
        font-family: var(--font-serif);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 2px;
    }

    .occasion-card .occasion-info p {
        font-size: 0.75rem;
        color: var(--gray-600);
    }

    .occasion-card .occasion-info .occasion-count {
        display: inline-block;
        font-size: 0.6rem;
        padding: 2px 12px;
        border-radius: 60px;
        background: var(--cream-light);
        color: var(--gray-600);
        margin-top: 6px;
    }

    .gifts-recent-section {
        padding: 60px 0 80px;
        background: var(--white);
    }

    .gifts-recent-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .gifts-recent-grid .empty-recent {
        grid-column: 1/-1;
        text-align: center;
        padding: 40px 0;
        color: var(--gray-600);
    }

    .gifts-recent-grid .empty-recent i {
        font-size: 2.4rem;
        color: var(--gray-300);
        display: block;
        margin-bottom: 12px;
    }

    .gift-personalize-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 3000;
        background: rgba(38, 36, 57, 0.7);
        backdrop-filter: blur(12px);
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: modalFadeIn 0.3s ease;
    }

    .gift-personalize-modal.open {
        display: flex;
    }

    .gift-personalize-modal .modal-content {
        background: var(--white);
        border-radius: var(--radius);
        max-width: 720px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 40px;
        position: relative;
        animation: modalScaleIn 0.3s ease;
    }

    .gift-personalize-modal .modal-content .close-btn {
        position: absolute;
        top: 16px;
        right: 20px;
        background: none;
        border: none;
        font-size: 1.4rem;
        color: var(--gray-600);
        cursor: pointer;
        transition: var(--transition);
    }

    .gift-personalize-modal .modal-content .close-btn:hover {
        color: var(--navy);
        transform: rotate(90deg);
    }

    .gift-card-custom-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 3000;
        background: rgba(38, 36, 57, 0.7);
        backdrop-filter: blur(12px);
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: modalFadeIn 0.3s ease;
    }

    .gift-card-custom-modal.open {
        display: flex;
    }

    .gift-card-custom-modal .modal-content {
        background: var(--white);
        border-radius: var(--radius);
        max-width: 520px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 40px;
        position: relative;
        animation: modalScaleIn 0.3s ease;
    }

    .gift-card-custom-modal .modal-content .close-btn {
        position: absolute;
        top: 16px;
        right: 20px;
        background: none;
        border: none;
        font-size: 1.4rem;
        color: var(--gray-600);
        cursor: pointer;
        transition: var(--transition);
    }

    .gift-card-custom-modal .modal-content .close-btn:hover {
        color: var(--navy);
        transform: rotate(90deg);
    }

    .gift-card-custom-modal .modal-header {
        text-align: center;
        margin-bottom: 20px;
    }

    .gift-card-custom-modal .modal-header .modal-icon {
        font-size: 2.4rem;
        color: var(--gold);
        display: block;
        margin-bottom: 8px;
    }

    .gift-card-custom-modal .modal-header h2 {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--navy);
    }

    .gift-card-custom-modal .modal-header h2 span {
        color: var(--gold);
    }

    .gift-card-custom-modal .modal-header p {
        color: var(--gray-600);
    }

    .gift-finder-results-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 3000;
        background: rgba(38, 36, 57, 0.7);
        backdrop-filter: blur(12px);
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: modalFadeIn 0.3s ease;
    }

    .gift-finder-results-modal.open {
        display: flex;
    }

    .gift-finder-results-modal .modal-content {
        background: var(--white);
        border-radius: var(--radius);
        max-width: 900px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 40px;
        position: relative;
        animation: modalScaleIn 0.3s ease;
    }

    .gift-finder-results-modal .modal-content .close-btn {
        position: absolute;
        top: 16px;
        right: 20px;
        background: none;
        border: none;
        font-size: 1.4rem;
        color: var(--gray-600);
        cursor: pointer;
        transition: var(--transition);
    }

    .gift-finder-results-modal .modal-content .close-btn:hover {
        color: var(--navy);
        transform: rotate(90deg);
    }

    .gift-card-benefits {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        max-width: 1100px;
        margin: 0 auto 48px;
    }

    .gift-card-benefits .benefit-item {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 20px;
        background: var(--white);
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
        transition: all 0.3s ease;
    }

    .gift-card-benefits .benefit-item:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
        border-color: var(--gold);
    }

    .gift-card-benefits .benefit-item .benefit-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        color: var(--gold);
        flex-shrink: 0;
        transition: all 0.3s ease;
    }

    .gift-card-benefits .benefit-item:hover .benefit-icon {
        background: var(--gold);
        color: var(--white);
    }

    .gift-card-benefits .benefit-item .benefit-content h4 {
        font-family: var(--font-serif);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 2px;
    }

    .gift-card-benefits .benefit-item .benefit-content p {
        font-size: 0.8rem;
        color: var(--gray-600);
        line-height: 1.4;
        margin: 0;
    }

    .gift-card-cta {
        max-width: 700px;
        margin: 0 auto;
        padding: 40px;
        background: var(--white);
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
        text-align: center;
    }

    .gift-card-cta .cta-content h3 {
        font-family: var(--font-serif);
        font-size: 1.8rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 8px;
    }

    .gift-card-cta .cta-content h3 span {
        color: var(--gold);
    }

    .gift-card-cta .cta-content p {
        font-size: 1rem;
        color: var(--gray-600);
        margin-bottom: 20px;
    }

    .gift-card-cta .cta-buttons {
        display: flex;
        gap: 14px;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* ================================================================
    GIFTS SCROLL CONTAINERS (Mobile horizontal scroll)
    ================================================================ */
    .gift-scroll-container {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 0 12px 0;
        scroll-behavior: smooth;
    }

    .gift-scroll-container::-webkit-scrollbar {
        display: none;
    }

    .gift-scroll-container .gift-product-card {
        flex: 0 0 auto;
        width: 240px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .gift-scroll-container .gift-product-card .product-image-container {
        min-height: 280px;
    }

    /* ================================================================ */
    /* DESIGN YOUR SUIT - FULL VIDEO BACKGROUND SECTION               */
    /* ================================================================ */

    .design-suit-video-section {
        position: relative;
        width: 100%;
        height: 100vh;
        min-height: 600px;
        max-height: 900px;
        background: var(--navy);
        display: flex;
        align-items: center;
    }

    /* Video Background */
    .design-suit-video-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .design-suit-video-bg video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.8s ease;
    }

    .design-suit-video-bg video.playing {
        opacity: 1;
    }

    /* Video Overlay */
    .design-suit-video-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to right,
            rgba(38, 36, 57, 0.85) 0%,
            rgba(38, 36, 57, 0.60) 40%,
            rgba(38, 36, 57, 0.30) 70%,
            rgba(38, 36, 57, 0.10) 100%
        );
        z-index: 1;
    }

    /* Content Overlay */
    .design-suit-video-content {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 40px 0;
    }

    .design-suit-video-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: center;
        min-height: 400px;
    }

    /* ================================================================ */
    /* LEFT COLUMN - TEXT CONTENT                                      */
    /* ================================================================ */

    .design-suit-video-text {
        max-width: 620px;
        opacity: 0;
        transform: translateX(-40px);
        transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .design-suit-video-section.in-view .design-suit-video-text {
        opacity: 1;
        transform: translateX(0);
    }

    .design-suit-badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-sans);
        font-size: 0.65rem;
        font-weight: 500;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--gold);
        padding: 6px 18px;
        border: 1px solid rgba(201, 169, 110, 0.2);
        border-radius: 60px;
        margin-bottom: 20px;
        backdrop-filter: blur(8px);
        background: rgba(201, 169, 110, 0.06);
    }

    .design-suit-badge i {
        font-size: 0.7rem;
    }

    .design-suit-title {
        font-family: var(--font-serif);
        font-size: 4.2rem;
        font-weight: 500;
        color: var(--white);
        line-height: 1.05;
        margin-bottom: 16px;
        letter-spacing: -0.02em;
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.2);
    }

    .design-suit-title span {
        color: var(--gold);
        font-weight: 600;
    }

    .design-suit-description {
        font-family: var(--font-sans);
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.7;
        margin-bottom: 28px;
        max-width: 460px;
        text-shadow: 0 1px 20px rgba(0, 0, 0, 0.1);
    }

    /* Feature Pills */
    .design-suit-features-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 32px;
    }

    .feature-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        padding: 6px 16px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 60px;
        background: rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(4px);
        transition: all 0.4s ease;
    }

    .feature-pill:hover {
        background: rgba(201, 169, 110, 0.1);
        border-color: rgba(201, 169, 110, 0.2);
        color: var(--white);
        transform: translateY(-2px);
    }

    .feature-pill i {
        font-size: 0.65rem;
        color: var(--gold);
    }

    /* CTA Buttons */
    .design-suit-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
    }

    .design-suit-actions .btn-gold {
        padding: 16px 40px;
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        background: var(--gold);
        color: var(--navy);
        border: none;
        box-shadow: 0 8px 32px rgba(201, 169, 110, 0.2);
    }

    .design-suit-actions .btn-gold:hover {
        background: #d4b47a;
        transform: translateY(-2px);
        box-shadow: 0 12px 48px rgba(201, 169, 110, 0.3);
    }

    .design-suit-actions .btn-gold i {
        font-size: 0.9rem;
    }

    .learn-more-link {
        font-family: var(--font-sans);
        font-size: 0.8rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
        border-bottom: 1.5px solid transparent;
        transition: all 0.4s ease;
    }

    .learn-more-link:hover {
        color: var(--gold);
        gap: 12px;
        border-bottom-color: var(--gold);
    }

    .learn-more-link i {
        font-size: 0.7rem;
        transition: transform 0.3s ease;
    }

    .learn-more-link:hover i {
        transform: translateX(4px);
    }

    /* ================================================================ */
    /* RIGHT COLUMN - STATUS BADGE                                     */
    /* ================================================================ */

    .design-suit-video-status {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 16px;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
    }

    .design-suit-video-section.in-view .design-suit-video-status {
        opacity: 1;
        transform: translateY(0);
    }

    .ai-status-badge {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 20px;
        border-radius: 60px;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.06);
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.8);
        letter-spacing: 1px;
    }

    .ai-pulse {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #2ecc71;
        animation: aiPulse 2s ease-in-out infinite;
    }

    @keyframes aiPulse {
        0%, 100% {
            opacity: 1;
            transform: scale(1);
        }
        50% {
            opacity: 0.4;
            transform: scale(0.7);
        }
    }

    .video-control-hint {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.3);
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .video-control-hint i {
        font-size: 0.7rem;
        color: var(--gold);
        animation: playPulse 2s ease-in-out infinite;
    }

    @keyframes playPulse {
        0%, 100% {
            opacity: 0.5;
            transform: scale(1);
        }
        50% {
            opacity: 1;
            transform: scale(1.1);
        }
    }

    /* ================================================================ */
    /* SCROLL INDICATOR                                                */
    /* ================================================================ */

    .design-suit-scroll-indicator {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        opacity: 0.4;
    }

    .design-suit-scroll-indicator span {
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 400;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
    }

    .design-suit-scroll-indicator .scroll-line {
        width: 1px;
        height: 40px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
        animation: scrollPulse 2s ease-in-out infinite;
    }

    @keyframes scrollPulse {
        0%, 100% {
            opacity: 0.3;
            transform: scaleY(0.6);
        }
        50% {
            opacity: 1;
            transform: scaleY(1);
        }
    }

    /* ================================================================ */
    /* RESPONSIVE                                                      */
    /* ================================================================ */

    @media (max-width: 1024px) {
        .design-suit-video-wrapper {
            grid-template-columns: 1fr;
            gap: 30px;
            text-align: center;
        }

        .design-suit-video-text {
            max-width: 100%;
            margin: 0 auto;
        }

        .design-suit-description {
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
        }

        .design-suit-features-pills {
            justify-content: center;
        }

        .design-suit-actions {
            justify-content: center;
        }

        .design-suit-video-status {
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .design-suit-video-overlay {
            background: linear-gradient(
                to bottom,
                rgba(38, 36, 57, 0.85) 0%,
                rgba(38, 36, 57, 0.60) 50%,
                rgba(38, 36, 57, 0.40) 100%
            );
        }
    }

    @media (max-width: 768px) {
        .design-suit-video-section {
            height: 80vh;
            min-height: 500px;
            max-height: 800px;
        }

        .design-suit-title {
            font-size: 2.8rem;
        }

        .design-suit-description {
            font-size: 0.95rem;
        }

        .design-suit-features-pills {
            gap: 8px;
        }

        .feature-pill {
            font-size: 0.6rem;
            padding: 4px 12px;
        }

        .design-suit-actions .btn-gold {
            padding: 14px 28px;
            font-size: 0.8rem;
        }

        .design-suit-video-status {
            flex-wrap: wrap;
        }
    }

    @media (max-width: 480px) {
        .design-suit-video-section {
            height: 70vh;
            min-height: 450px;
            max-height: 700px;
        }

        .design-suit-title {
            font-size: 2rem;
        }

        .design-suit-badge {
            font-size: 0.55rem;
            padding: 4px 14px;
            gap: 6px;
        }

        .design-suit-description {
            font-size: 0.85rem;
        }

        .design-suit-features-pills {
            gap: 6px;
        }

        .feature-pill {
            font-size: 0.55rem;
            padding: 3px 10px;
            gap: 4px;
        }

        .feature-pill i {
            font-size: 0.55rem;
        }

        .design-suit-actions {
            flex-direction: column;
            width: 100%;
        }

        .design-suit-actions .btn-gold {
            width: 100%;
            justify-content: center;
        }

        .design-suit-video-status {
            display: none;
        }

        .design-suit-scroll-indicator {
            bottom: 20px;
        }

        .design-suit-scroll-indicator .scroll-line {
            height: 25px;
        }

        .design-suit-scroll-indicator span {
            font-size: 0.45rem;
            letter-spacing: 2px;
        }
    }

    /* ================================================================ */
    /* KEYBOARD NAVIGATION (Accessibility)                            */
    /* ================================================================ */

    .design-suit-video-section:focus-within .design-suit-video-text {
        opacity: 1;
        transform: translateX(0);
    }

    .design-suit-video-section:focus-within .design-suit-video-status {
        opacity: 1;
        transform: translateY(0);
    }

    /* ================================================================
    DESIGN SUIT LEGAL SECTION
    ================================================================ */
    .design-suit-legal-section {
        padding: 60px 0 80px;
        background: var(--gray-100);
    }

    .legal-wrapper {
        max-width: 900px;
        margin: 0 auto;
    }

    .legal-divider {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 40px;
    }

    .legal-divider-line {
        flex: 1;
        height: 1px;
        background: var(--gray-300);
        opacity: 0.3;
    }

    .legal-divider-text {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 500;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--gray-600);
        white-space: nowrap;
    }

    .legal-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .legal-card {
        position: relative;
        padding: 32px 28px;
        background: var(--white);
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
        cursor: pointer;
        transition: all 0.5s ease;
        overflow: hidden;
        display: flex;
        align-items: flex-start;
        gap: 20px;
    }

    .legal-card:hover {
        transform: translateY(-4px);
        border-color: var(--gold);
        box-shadow: 0 20px 60px rgba(38, 36, 57, 0.08);
    }

    .legal-card-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        color: var(--gold);
        flex-shrink: 0;
        transition: all 0.4s ease;
    }

    .legal-card:hover .legal-card-icon {
        background: var(--gold);
        color: var(--white);
        transform: scale(1.05);
    }

    .legal-card-content {
        flex: 1;
    }

    .legal-card-content h3 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .legal-card-content p {
        font-size: 0.85rem;
        color: var(--gray-600);
        line-height: 1.6;
        margin-bottom: 8px;
    }

    .legal-card-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-sans);
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--gold);
        transition: all 0.3s ease;
    }

    .legal-card:hover .legal-card-link {
        gap: 14px;
    }

    .legal-card-link i {
        font-size: 0.6rem;
        transition: transform 0.3s ease;
    }

    .legal-card:hover .legal-card-link i {
        transform: translateX(4px);
    }

    .legal-card-glow {
        position: absolute;
        top: 50%;
        right: -20%;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(201, 169, 110, 0.06), transparent 70%);
        transform: translateY(-50%);
        pointer-events: none;
        transition: all 0.6s ease;
    }

    .legal-card:hover .legal-card-glow {
        width: 180px;
        height: 180px;
        right: -10%;
        background: radial-gradient(circle, rgba(201, 169, 110, 0.08), transparent 70%);
    }

    /* ================================================================
    DESIGN SUIT TERMS & CONDITIONS MODAL
    ================================================================ */
    .design-suit-terms-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 10001;
        background: rgba(10, 10, 10, 0.7);
        backdrop-filter: blur(20px);
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: modalFadeIn 0.5s ease;
    }

    .design-suit-terms-modal.open {
        display: flex;
    }

    .terms-modal-content {
        background: var(--white);
        border-radius: var(--radius);
        max-width: 820px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 48px 44px 40px;
        position: relative;
        animation: modalScaleIn 0.5s ease;
        box-shadow: 0 40px 120px rgba(0, 0, 0, 0.3);
    }

    .terms-modal-content::-webkit-scrollbar {
        width: 4px;
    }

    .terms-modal-content::-webkit-scrollbar-track {
        background: var(--gray-100);
        border-radius: 4px;
    }

    .terms-modal-content::-webkit-scrollbar-thumb {
        background: var(--gold);
        border-radius: 4px;
    }

    .terms-modal-close {
        position: absolute;
        top: 16px;
        right: 20px;
        background: none;
        border: none;
        font-size: 1.4rem;
        color: var(--gray-600);
        cursor: pointer;
        transition: var(--transition);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .terms-modal-close:hover {
        color: var(--navy);
        background: var(--gray-100);
        transform: rotate(90deg);
    }

    .terms-modal-header {
        text-align: center;
        margin-bottom: 32px;
    }

    .terms-badge {
        display: inline-block;
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 500;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--gold);
        padding: 4px 16px;
        border: 1px solid rgba(201, 169, 110, 0.2);
        border-radius: 60px;
        margin-bottom: 12px;
    }

    .terms-modal-header h2 {
        font-family: var(--font-serif);
        font-size: 2rem;
        font-weight: 500;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .terms-modal-header h2 span {
        color: var(--gold);
        font-weight: 600;
    }

    .terms-modal-header p {
        color: var(--gray-600);
        font-size: 0.95rem;
    }

    .terms-section {
        display: flex;
        gap: 20px;
        padding: 24px 0;
        border-bottom: 1px solid var(--gray-200);
    }

    .terms-section:last-of-type {
        border-bottom: none;
    }

    .terms-section-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: var(--gold);
        flex-shrink: 0;
        transition: var(--transition);
    }

    .terms-section:hover .terms-section-icon {
        background: var(--gold);
        color: var(--white);
        transform: scale(1.05);
    }

    .terms-section-content {
        flex: 1;
    }

    .terms-section-content h3 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 6px;
    }

    .terms-section-content p {
        font-size: 0.9rem;
        color: var(--gray-600);
        line-height: 1.7;
        margin-bottom: 0;
    }

    .terms-section-content strong {
        color: var(--navy);
    }

    .terms-highlight {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
        padding: 8px 20px 8px 16px;
        background: var(--cream-light);
        border-radius: 60px;
        border: 1px solid rgba(201, 169, 110, 0.15);
    }

    .highlight-number {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--gold);
    }

    .highlight-label {
        font-size: 0.8rem;
        color: var(--gray-600);
    }

    .terms-timer-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
        padding: 6px 16px;
        background: rgba(231, 76, 60, 0.06);
        border-radius: 60px;
        font-size: 0.8rem;
        color: #e74c3c;
        border: 1px solid rgba(231, 76, 60, 0.1);
    }

    .terms-timer-badge i {
        font-size: 0.8rem;
    }

    .terms-watermark-preview {
        margin-top: 12px;
        padding: 16px 20px;
        background: linear-gradient(135deg, #1a2332, #2c3e50);
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-width: 180px;
    }

    .watermark-sample {
        display: flex;
        flex-direction: column;
        align-items: center;
        opacity: 0.7;
    }

    .watermark-text {
        font-family: var(--font-serif);
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--white);
        letter-spacing: 4px;
    }

    .watermark-sub {
        font-family: var(--font-sans);
        font-size: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 3px;
        color: rgba(255, 255, 255, 0.4);
    }

    .terms-pricing-grid {
        display: flex;
        gap: 12px;
        margin-top: 12px;
        flex-wrap: wrap;
    }

    .pricing-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 12px 20px;
        background: var(--gray-100);
        border-radius: 8px;
        min-width: 100px;
        border: 1px solid transparent;
        transition: var(--transition);
    }

    .pricing-item:hover {
        border-color: var(--gold);
        background: var(--white);
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

    .pricing-label {
        font-size: 0.65rem;
        color: var(--gray-600);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .pricing-price {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--gold);
    }

    .terms-list {
        list-style: none;
        padding: 0;
        margin: 8px 0 0;
    }

    .terms-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 6px 0;
        font-size: 0.85rem;
        color: var(--gray-600);
        line-height: 1.6;
    }

    .terms-list li i {
        color: var(--gold);
        font-size: 0.8rem;
        margin-top: 3px;
        flex-shrink: 0;
    }

    .terms-list li strong {
        color: var(--navy);
    }

    .terms-summary-box {
        margin-top: 24px;
        padding: 24px 28px;
        background: var(--gray-100);
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
    }

    .terms-summary-box .summary-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .summary-item {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .summary-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        color: var(--gold);
        flex-shrink: 0;
    }

    .summary-item strong {
        display: block;
        font-size: 0.8rem;
        color: var(--navy);
    }

    .summary-item p {
        font-size: 0.7rem;
        color: var(--gray-600);
        margin: 0;
    }

    .terms-modal-footer {
        display: flex;
        gap: 14px;
        justify-content: center;
        margin-top: 28px;
        padding-top: 24px;
        border-top: 1px solid var(--gray-200);
        flex-wrap: wrap;
    }

    .terms-modal-footer .btn {
        min-width: 160px;
        justify-content: center;
    }

    /* ================================================================
    DESIGN SUIT PRIVACY POLICY MODAL
    ================================================================ */
    .design-suit-privacy-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 10001;
        background: rgba(10, 10, 10, 0.7);
        backdrop-filter: blur(20px);
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: modalFadeIn 0.5s ease;
    }

    .design-suit-privacy-modal.open {
        display: flex;
    }

    .privacy-modal-content {
        background: var(--white);
        border-radius: var(--radius);
        max-width: 820px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 48px 44px 40px;
        position: relative;
        animation: modalScaleIn 0.5s ease;
        box-shadow: 0 40px 120px rgba(0, 0, 0, 0.3);
    }

    .privacy-modal-content::-webkit-scrollbar {
        width: 4px;
    }

    .privacy-modal-content::-webkit-scrollbar-track {
        background: var(--gray-100);
        border-radius: 4px;
    }

    .privacy-modal-content::-webkit-scrollbar-thumb {
        background: var(--gold);
        border-radius: 4px;
    }

    .privacy-modal-close {
        position: absolute;
        top: 16px;
        right: 20px;
        background: none;
        border: none;
        font-size: 1.4rem;
        color: var(--gray-600);
        cursor: pointer;
        transition: var(--transition);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .privacy-modal-close:hover {
        color: var(--navy);
        background: var(--gray-100);
        transform: rotate(90deg);
    }

    .privacy-modal-header {
        text-align: center;
        margin-bottom: 32px;
    }

    .privacy-badge {
        display: inline-block;
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 500;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--gold);
        padding: 4px 16px;
        border: 1px solid rgba(201, 169, 110, 0.2);
        border-radius: 60px;
        margin-bottom: 12px;
    }

    .privacy-modal-header h2 {
        font-family: var(--font-serif);
        font-size: 2rem;
        font-weight: 500;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .privacy-modal-header h2 span {
        color: var(--gold);
        font-weight: 600;
    }

    .privacy-modal-header p {
        color: var(--gray-600);
        font-size: 0.95rem;
    }

    .privacy-section {
        display: flex;
        gap: 20px;
        padding: 24px 0;
        border-bottom: 1px solid var(--gray-200);
    }

    .privacy-section:last-of-type {
        border-bottom: none;
    }

    .privacy-section-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: var(--gold);
        flex-shrink: 0;
        transition: var(--transition);
    }

    .privacy-section:hover .privacy-section-icon {
        background: var(--gold);
        color: var(--white);
        transform: scale(1.05);
    }

    .privacy-section-content {
        flex: 1;
    }

    .privacy-section-content h3 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 8px;
    }

    .privacy-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .privacy-list li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 8px 0;
    }

    .privacy-list li i {
        font-size: 1rem;
        color: var(--gold);
        margin-top: 2px;
        width: 20px;
        text-align: center;
        flex-shrink: 0;
    }

    .privacy-list li strong {
        display: block;
        font-size: 0.85rem;
        color: var(--navy);
    }

    .privacy-list li p {
        font-size: 0.8rem;
        color: var(--gray-600);
        margin: 0;
    }

    .privacy-storage-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
        margin-top: 8px;
    }

    .storage-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        background: var(--gray-100);
        border-radius: 8px;
        transition: var(--transition);
    }

    .storage-item:hover {
        background: var(--cream-light);
        transform: translateY(-2px);
    }

    .storage-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        color: var(--gold);
        flex-shrink: 0;
    }

    .storage-info strong {
        display: block;
        font-size: 0.8rem;
        color: var(--navy);
    }

    .storage-info p {
        font-size: 0.7rem;
        color: var(--gray-600);
        margin: 2px 0 0;
    }

    .security-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 4px;
    }

    .security-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background: var(--gray-100);
        border-radius: 6px;
        font-size: 0.8rem;
        color: var(--gray-600);
    }

    .security-item i {
        color: var(--gold);
        font-size: 0.8rem;
    }

    .privacy-contact {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-top: 24px;
        padding: 20px 24px;
        background: var(--cream-light);
        border-radius: var(--radius);
        border: 1px solid rgba(201, 169, 110, 0.15);
    }

    .contact-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--gold);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: var(--white);
        flex-shrink: 0;
    }

    .contact-info h4 {
        font-family: var(--font-serif);
        font-size: 1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 2px;
    }

    .contact-info p {
        font-size: 0.8rem;
        color: var(--gray-600);
        margin: 0 0 4px;
    }

    .contact-info a {
        color: var(--gold);
        text-decoration: none;
        font-weight: 500;
        font-size: 0.85rem;
        transition: var(--transition);
    }

    .contact-info a:hover {
        color: var(--navy);
    }

    .contact-divider {
        color: var(--gray-300);
        margin: 0 8px;
    }

    .privacy-modal-footer {
        display: flex;
        gap: 14px;
        justify-content: center;
        margin-top: 28px;
        padding-top: 24px;
        border-top: 1px solid var(--gray-200);
        flex-wrap: wrap;
    }

    .privacy-modal-footer .btn {
        min-width: 160px;
        justify-content: center;
    }

    /* ================================================================
    DASHBOARD
    ================================================================ */
    .dashboard-page-header {
        background: var(--gray-100);
        border-bottom: 1px solid var(--gray-200);
        padding: 32px 0 24px;
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
    }

    .dashboard-header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
    }

    .dashboard-header-content .header-left .section-label {
        font-size: 0.7rem;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--gold);
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
    }

    .dashboard-header-content .header-left h1 {
        font-family: var(--font-serif);
        font-size: 2.2rem;
        font-weight: 600;
        color: var(--navy);
        margin: 0;
    }

    .dashboard-header-content .header-left h1 span {
        color: var(--gold);
    }

    .dashboard-header-content .header-left p {
        color: var(--gray-600);
        font-size: 1rem;
        margin: 4px 0 0;
    }

    .dashboard-header-content .header-right {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .dashboard-header-content .header-right .dashboard-date {
        font-size: 0.85rem;
        color: var(--gray-600);
        font-weight: 500;
    }

    .dashboard-main-wrapper {
        padding: 32px 0 60px;
        background: var(--white);
    }

    .dashboard-grid {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 32px;
        align-items: start;
    }

    .dashboard-sidebar {
        background: var(--gray-100);
        border-radius: var(--radius);
        padding: 24px 20px;
        position: sticky;
        top: calc(var(--topbar-height) + var(--navbar-height) + 20px);
        max-height: calc(100vh - var(--topbar-height) - var(--navbar-height) - 40px);
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .dashboard-sidebar::-webkit-scrollbar {
        width: 4px;
    }

    .dashboard-sidebar::-webkit-scrollbar-track {
        background: var(--gray-200);
        border-radius: 4px;
    }

    .dashboard-sidebar::-webkit-scrollbar-thumb {
        background: var(--gold);
        border-radius: 4px;
    }

    .dashboard-sidebar .user-card {
        text-align: center;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--gray-200);
        margin-bottom: 20px;
    }

    .dashboard-sidebar .user-card .avatar {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: var(--gold);
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        font-weight: 600;
        margin: 0 auto 12px;
        overflow: hidden;
        flex-shrink: 0;
        position: relative;
    }

    .dashboard-sidebar .user-card .avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .dashboard-sidebar .user-card .avatar .avatar-edit {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
        color: var(--white);
        font-size: 0.6rem;
        padding: 4px;
        opacity: 0;
        transition: opacity 0.3s ease;
        cursor: pointer;
    }

    .dashboard-sidebar .user-card .avatar:hover .avatar-edit {
        opacity: 1;
    }

    .dashboard-sidebar .user-card .user-info .name {
        font-weight: 600;
        font-size: 1.05rem;
        color: var(--navy);
    }

    .dashboard-sidebar .user-card .user-info .role {
        font-size: 0.8rem;
        color: var(--gray-600);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .dashboard-sidebar .user-card .user-info .member-since {
        font-size: 0.7rem;
        color: var(--gray-500);
        margin-top: 4px;
    }

    .dashboard-sidebar .nav-section {
        margin-bottom: 16px;
    }

    .dashboard-sidebar .nav-section:last-child {
        margin-bottom: 0;
    }

    .dashboard-sidebar .nav-section-label {
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--gray-500);
        padding: 0 12px;
        margin-bottom: 6px;
    }

    .dashboard-sidebar .nav-dash {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .dashboard-sidebar .nav-dash a {
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--gray-600);
        transition: all 0.25s ease;
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        position: relative;
    }

    .dashboard-sidebar .nav-dash a i {
        width: 20px;
        color: var(--gray-500);
        transition: color 0.25s ease;
        font-size: 0.95rem;
    }

    .dashboard-sidebar .nav-dash a:hover {
        background: rgba(38, 36, 57, 0.05);
        color: var(--navy);
    }

    .dashboard-sidebar .nav-dash a:hover i {
        color: var(--gold);
    }

    .dashboard-sidebar .nav-dash a.active {
        background: var(--white);
        color: var(--navy);
        box-shadow: 0 2px 8px rgba(38, 36, 57, 0.06);
    }

    .dashboard-sidebar .nav-dash a.active i {
        color: var(--gold);
    }

    .dashboard-sidebar .nav-dash a.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 24px;
        background: var(--gold);
        border-radius: 0 3px 3px 0;
    }

    .dashboard-sidebar .nav-dash .logout-link {
        color: #e74c3c;
        margin-top: 8px;
        border-top: 1px solid var(--gray-200);
        padding-top: 12px;
    }

    .dashboard-sidebar .nav-dash .logout-link i {
        color: #e74c3c;
    }

    .dashboard-sidebar .nav-dash .logout-link:hover {
        background: rgba(231, 76, 60, 0.08);
        color: #c0392b;
    }

    .dashboard-sidebar .nav-dash .logout-link:hover i {
        color: #c0392b;
    }

    .dashboard-main {
        background: var(--white);
        border-radius: var(--radius);
        padding: 28px 32px;
        border: 1px solid var(--gray-200);
        min-height: 400px;
    }

    .dashboard-main .dash-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .dashboard-main .dash-header h2 {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--navy);
        margin: 0;
    }

    .dashboard-main .dash-header h2 span {
        color: var(--gold);
    }

    .dashboard-main .dash-header .badge {
        font-size: 0.65rem;
        background: var(--cream-light);
        padding: 4px 16px;
        border-radius: 60px;
        color: var(--navy);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .dashboard-main .dash-header .btn-sm {
        padding: 6px 16px;
        font-size: 0.75rem;
    }

    .dashboard-main .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 16px;
        margin-bottom: 32px;
    }

    .dashboard-main .stat-card {
        background: var(--gray-100);
        padding: 20px;
        border-radius: var(--radius);
        text-align: center;
        position: relative;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .dashboard-main .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

    .dashboard-main .stat-card .stat-icon {
        font-size: 1.6rem;
        color: var(--gold);
        margin-bottom: 8px;
    }

    .dashboard-main .stat-card .num {
        font-family: var(--font-serif);
        font-size: 2rem;
        font-weight: 700;
        color: var(--gold);
        display: block;
    }

    .dashboard-main .stat-card .label {
        font-size: 0.75rem;
        color: var(--gray-600);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 4px;
        display: block;
    }

    .dashboard-main .stat-card .wishlist-remove {
        position: absolute;
        top: 8px;
        right: 12px;
        background: none;
        border: none;
        color: var(--gray-300);
        cursor: pointer;
        font-size: 0.8rem;
        transition: all 0.3s ease;
    }

    .dashboard-main .stat-card .wishlist-remove:hover {
        color: #e74c3c;
        transform: scale(1.1);
    }

    .dashboard-main .quick-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 16px;
        margin-bottom: 32px;
    }

    .dashboard-main .quick-action-card {
        background: var(--gray-100);
        border-radius: var(--radius);
        padding: 20px 16px;
        text-align: center;
        transition: all 0.3s ease;
        cursor: pointer;
        border: 1px solid transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .dashboard-main .quick-action-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
        background: var(--white);
    }

    .dashboard-main .quick-action-card .icon {
        font-size: 1.8rem;
        color: var(--gold);
    }

    .dashboard-main .quick-action-card .label {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--gray-800);
    }

    .dashboard-main .dash-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85rem;
    }

    .dashboard-main .dash-table th {
        text-align: left;
        padding: 12px 8px;
        border-bottom: 2px solid var(--gray-200);
        color: var(--gray-600);
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .dashboard-main .dash-table td {
        padding: 12px 8px;
        border-bottom: 1px solid var(--gray-100);
    }

    .dashboard-main .dash-table tr:hover td {
        background: var(--gray-100);
    }

    .dashboard-main .dash-table .status-badge {
        font-size: 0.65rem;
        padding: 2px 12px;
        border-radius: 60px;
        font-weight: 500;
        display: inline-block;
    }

    .dashboard-main .dash-table .status-badge.completed,
    .dashboard-main .dash-table .status-badge.active,
    .dashboard-main .dash-table .status-badge.approved {
        background: #d4edda;
        color: #155724;
    }

    .dashboard-main .dash-table .status-badge.pending,
    .dashboard-main .dash-table .status-badge.in-progress {
        background: #fff3cd;
        color: #856404;
    }

    .dashboard-main .dash-table .status-badge.inactive,
    .dashboard-main .dash-table .status-badge.rejected {
        background: #f8d7da;
        color: #721c24;
    }

    .dashboard-main .appointments-section {
        margin-top: 20px;
        border-top: 1px solid var(--gray-200);
        padding-top: 20px;
    }

    .dashboard-main .appointments-section h4 {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        margin-bottom: 16px;
        color: var(--navy);
    }

    .dashboard-main .appointment-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: var(--gray-100);
        border-radius: var(--radius);
        margin-bottom: 10px;
        border-left: 4px solid var(--gold);
        transition: all 0.3s ease;
    }

    .dashboard-main .appointment-item:hover {
        transform: translateX(4px);
        box-shadow: var(--shadow);
    }

    .dashboard-main .appointment-item .info .title {
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--navy);
    }

    .dashboard-main .appointment-item .info .details {
        font-size: 0.8rem;
        color: var(--gray-600);
    }

    .dashboard-main .appointment-item .status {
        font-size: 0.65rem;
        padding: 2px 12px;
        border-radius: 60px;
        font-weight: 500;
    }

    .dashboard-main .appointment-item .status.upcoming {
        background: #cce5ff;
        color: #004085;
    }

    .dashboard-main .appointment-item .status.completed {
        background: #d4edda;
        color: #155724;
    }

    .dashboard-main .appointment-item .status.cancelled {
        background: #f8d7da;
        color: #721c24;
    }

    .dashboard-main .measurement-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 20px;
    }

    .dashboard-main .measurement-tabs .tab-btn {
        padding: 8px 18px;
        border-radius: 60px;
        border: 1px solid var(--gray-300);
        background: var(--white);
        color: var(--gray-600);
        font-size: 0.78rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans);
    }

    .dashboard-main .measurement-tabs .tab-btn.active {
        background: var(--gold);
        color: var(--white);
        border-color: var(--gold);
    }

    .dashboard-main .measurement-tabs .tab-btn.has-data {
        border-color: var(--gold);
        opacity: 1;
    }

    .dashboard-main .measurement-tabs .tab-btn .status-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-left: 6px;
    }

    .dashboard-main .measurement-tabs .tab-btn .status-dot.approved {
        background: #2ecc71;
    }

    .dashboard-main .measurement-tabs .tab-btn .status-dot.pending {
        background: #f39c12;
    }

    .dashboard-main .measurement-tabs .tab-btn .status-dot.rejected {
        background: #e74c3c;
    }

    .dashboard-main .measurement-detail {
        background: var(--gray-100);
        border-radius: var(--radius);
        padding: 20px 24px;
        margin-top: 12px;
        display: none;
    }

    .dashboard-main .measurement-detail.open {
        display: block;
        animation: fadeIn 0.3s ease;
    }

    .dashboard-main .measurement-detail .field-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 24px;
        padding: 4px 0;
        border-bottom: 1px solid var(--gray-200);
    }

    .dashboard-main .measurement-detail .field-row .field-label {
        color: var(--gray-600);
        font-size: 0.82rem;
    }

    .dashboard-main .measurement-detail .field-row .field-value {
        font-weight: 500;
        font-size: 0.9rem;
        text-align: right;
    }

    .dashboard-main .measurement-detail .measurement-status {
        margin-top: 12px;
        padding: 6px 16px;
        border-radius: 8px;
        font-size: 0.8rem;
        display: inline-block;
    }

    .dashboard-main .measurement-detail .measurement-status.approved {
        background: #d4edda;
        color: #155724;
    }

    .dashboard-main .measurement-detail .measurement-status.pending {
        background: #fff3cd;
        color: #856404;
    }

    .dashboard-main .measurement-detail .measurement-status.rejected {
        background: #f8d7da;
        color: #721c24;
    }

    .dashboard-main .referral-stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }

    .dashboard-main .referral-stat-card {
        background: var(--gray-100);
        border-radius: var(--radius);
        padding: 16px 20px;
        text-align: center;
    }

    .dashboard-main .referral-stat-card .num {
        font-family: var(--font-serif);
        font-size: 2rem;
        font-weight: 700;
        color: var(--gold);
        display: block;
    }

    .dashboard-main .referral-stat-card .label {
        font-size: 0.75rem;
        color: var(--gray-600);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 4px;
    }

    .dashboard-main .referral-progress-section {
        background: var(--gray-100);
        border-radius: var(--radius);
        padding: 20px;
        margin: 20px 0;
    }

    .dashboard-main .referral-progress-section .progress-bar {
        height: 10px;
        background: var(--gray-300);
        border-radius: 99px;
        overflow: hidden;
        margin: 12px 0 8px;
    }

    .dashboard-main .referral-progress-section .progress-bar .bar {
        height: 100%;
        background: var(--navy);
        border-radius: 99px;
        animation: grow 1.2s ease;
    }

    @keyframes grow {
        from {
            width: 0;
        }
        to {
            width: 60%;
        }
    }

    .dashboard-main .referral-timeline {
        display: flex;
        justify-content: space-between;
        margin-top: 12px;
        font-size: 0.7rem;
        color: var(--gray-600);
        text-align: center;
    }

    .dashboard-main .referral-timeline .step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .dashboard-main .referral-timeline .step .dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--gray-300);
        border: 2px solid var(--gray-300);
    }

    .dashboard-main .referral-timeline .step .dot.done {
        background: #18794e;
        border-color: #18794e;
    }

    .dashboard-main .referral-timeline .step .dot.current {
        background: var(--navy);
        border-color: var(--navy);
    }

    .dashboard-main .order-tracking-item {
        background: var(--gray-100);
        border-radius: var(--radius);
        padding: 16px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        border-left: 4px solid var(--gray-300);
        transition: all 0.3s ease;
    }

    .dashboard-main .order-tracking-item:hover {
        transform: translateX(4px);
        box-shadow: var(--shadow);
    }

    .dashboard-main .order-tracking-item .order-info {
        flex: 1;
    }

    .dashboard-main .order-tracking-item .order-info .order-id {
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--navy);
    }

    .dashboard-main .order-tracking-item .order-info .order-items {
        font-size: 0.85rem;
        color: var(--gray-600);
    }

    .dashboard-main .order-tracking-item .order-meta {
        display: flex;
        gap: 16px;
        align-items: center;
        font-size: 0.85rem;
        flex-wrap: wrap;
    }

    .dashboard-main .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: var(--gray-600);
    }

    .dashboard-main .empty-state i {
        font-size: 3rem;
        color: var(--gray-300);
        display: block;
        margin-bottom: 16px;
    }

    .dashboard-main .empty-state h3 {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        color: var(--navy);
        margin-bottom: 8px;
    }

    .dashboard-main .empty-state p {
        margin-bottom: 16px;
    }

    .dash-loader {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 60px 0;
        gap: 16px;
        color: var(--gray-600);
    }

    .dash-loader .spinner {
        width: 28px;
        height: 28px;
        border: 3px solid var(--gray-200);
        border-top-color: var(--gold);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    /* ================================================================
    PROFILE EDIT MODAL
    ================================================================ */
    .profile-edit-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 2500;
        background: rgba(38, 36, 57, 0.6);
        backdrop-filter: blur(6px);
        align-items: center;
        justify-content: center;
        animation: fadeIn 0.3s ease;
    }

    .profile-edit-overlay.open {
        display: flex;
    }

    .profile-edit-modal {
        background: var(--white);
        border-radius: var(--radius);
        padding: 40px 36px;
        max-width: 500px;
        width: 100%;
        box-shadow: var(--shadow-hover);
        position: relative;
        max-height: 90vh;
        overflow-y: auto;
    }

    .profile-edit-modal .close-btn {
        position: absolute;
        top: 16px;
        right: 20px;
        background: none;
        border: none;
        font-size: 1.4rem;
        color: var(--gray-600);
        cursor: pointer;
        transition: var(--transition);
    }

    .profile-edit-modal .close-btn:hover {
        color: var(--navy);
        transform: rotate(90deg);
    }

    .profile-edit-modal h2 {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        margin-bottom: 20px;
    }

    .profile-edit-modal h2 span {
        color: var(--gold);
    }

    .profile-edit-modal label {
        font-weight: 500;
        font-size: 0.8rem;
        display: block;
        margin-bottom: 4px;
        color: var(--gray-800);
    }

    .profile-edit-modal input {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        font-family: var(--font-sans);
        font-size: 0.9rem;
        transition: var(--transition);
        margin-bottom: 14px;
        background: var(--white);
    }

    .profile-edit-modal input:focus {
        outline: none;
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.2);
    }

    .profile-edit-modal .avatar-upload {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 16px;
    }

    .profile-edit-modal .avatar-upload .preview {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--gray-200);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--gray-600);
        overflow: hidden;
        flex-shrink: 0;
        object-fit: cover;
    }

    .profile-edit-modal .avatar-upload .preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .profile-edit-modal .avatar-upload input[type="file"] {
        display: none;
    }

    .profile-edit-modal .avatar-upload .upload-btn {
        padding: 8px 16px;
        border-radius: 60px;
        border: 1px solid var(--gray-300);
        background: var(--white);
        font-size: 0.8rem;
        cursor: pointer;
        transition: var(--transition);
    }

    .profile-edit-modal .avatar-upload .upload-btn:hover {
        border-color: var(--gold);
        background: var(--cream-light);
    }

    /* ================================================================
    BOOK CONSULTATION
    ================================================================ */
    .book-consult {
        padding: 60px 0;
    }

    .book-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }

    .book-form {
        background: var(--gray-100);
        padding: 40px;
        border-radius: var(--radius);
    }

    .book-form label {
        font-weight: 500;
        font-size: 0.85rem;
        display: block;
        margin-bottom: 4px;
    }

    .book-form .required-star {
        color: #e74c3c;
        margin-left: 2px;
    }

    .book-form input,
    .book-form select,
    .book-form textarea {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        font-family: var(--font-sans);
        font-size: 0.9rem;
        transition: var(--transition);
        margin-bottom: 16px;
        background: var(--white);
    }

    .book-form input:focus,
    .book-form select:focus,
    .book-form textarea:focus {
        outline: none;
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.2);
    }

    .book-form .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .location-details {
        display: none;
        margin-top: 8px;
        padding: 20px;
        background: var(--white);
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
        animation: fadeIn 0.3s ease;
    }

    .location-details.visible {
        display: block;
    }

    .location-details .section-title-sm {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .location-details .section-title-sm i {
        color: var(--gold);
    }

    .location-details .required-star {
        color: #e74c3c;
        margin-left: 2px;
    }

    .location-details .help-text {
        font-size: 0.75rem;
        color: var(--gray-600);
        margin-top: 4px;
        margin-bottom: 12px;
    }

    .fee-display {
        display: none;
        background: var(--cream-light);
        padding: 12px 16px;
        border-radius: 8px;
        margin-top: 8px;
        margin-bottom: 16px;
        border-left: 4px solid var(--gold);
        font-size: 0.9rem;
    }

    .fee-display.visible {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .fee-display .fee-amount {
        font-weight: 700;
        color: var(--navy);
        font-size: 1.1rem;
    }

    .fee-display .fee-label {
        color: var(--gray-600);
    }

    .fee-display .fee-note {
        font-size: 0.7rem;
        color: var(--gray-600);
        width: 100%;
    }

    .radio-group-inline {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        margin-bottom: 16px;
    }

    .radio-group-inline label {
        font-weight: 400;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        color: var(--gray-800);
    }

    .radio-group-inline input[type="radio"] {
        width: auto;
        margin: 0;
        accent-color: var(--gold);
        cursor: pointer;
    }

    .book-info .info-item {
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 0.95rem;
        padding: 8px 0;
    }

    .book-info .info-item i {
        color: var(--gold);
        font-size: 1.2rem;
        width: 28px;
    }

    /* ================================================================
    PAGE HEADER
    ================================================================ */
    .page-header {
        padding: 60px 0 40px;
        background: var(--gray-100);
        border-bottom: 1px solid var(--gray-200);
    }

    .page-header h1 {
        font-family: var(--font-serif);
        font-size: 3rem;
        font-weight: 700;
    }

    .page-header p {
        color: var(--gray-600);
        font-size: 1.05rem;
        max-width: 560px;
        margin-top: 4px;
    }

    .page-header .breadcrumb {
        display: flex;
        gap: 8px;
        align-items: center;
        font-size: 0.8rem;
        color: var(--gray-600);
        margin-bottom: 16px;
    }

    .page-header .breadcrumb a {
        color: var(--gray-600);
        transition: var(--transition);
        cursor: pointer;
    }

    .page-header .breadcrumb a:hover {
        color: var(--gold);
    }

    .page-header .breadcrumb .sep {
        color: var(--gray-300);
    }

    .page-header .breadcrumb .current {
        color: var(--navy);
        font-weight: 500;
    }

    /* ================================================================
    COLLECTIONS FULL
    ================================================================ */
    .collections-full {
        padding: 60px 0;
    }

    .collection-full-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 32px;
    }

    .collection-full-card {
        border-radius: var(--radius);
        overflow: hidden;
        background: var(--white);
        border: 1px solid var(--gray-200);
        transition: var(--transition);
        position: relative;
    }

    .collection-full-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
    }

    .collection-full-card .img {
        height: 200px;
        background: var(--gray-200);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.3);
        font-family: var(--font-serif);
        background-size: cover;
        background-position: center;
        position: relative;
    }

    .collection-full-card .body {
        padding: 20px 24px 24px;
    }

    .collection-full-card .body h4 {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 600;
    }

    .collection-full-card .body p {
        font-size: 0.85rem;
        color: var(--gray-600);
        margin: 4px 0 12px;
    }

    .collection-full-card .wishlist-toggle {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 5;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(4px);
        border: none;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-600);
        font-size: 1rem;
        cursor: pointer;
        transition: var(--transition);
        box-shadow: var(--shadow);
    }

    .collection-full-card .wishlist-toggle:hover {
        transform: scale(1.1);
    }

    .collection-full-card .wishlist-toggle.active {
        color: #e74c3c;
        background: rgba(255, 255, 255, 0.95);
    }

    /* ================================================================
    PORTFOLIO
    ================================================================ */
    .portfolio-full {
        padding: 60px 0;
    }

    .portfolio-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 24px;
    }

    .portfolio-item {
        border-radius: var(--radius);
        overflow: hidden;
        aspect-ratio: 4/3;
        background: var(--gray-200);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-600);
        font-family: var(--font-serif);
        font-size: 0.9rem;
        transition: var(--transition);
        position: relative;
        background-size: cover;
        background-position: center;
    }

    .portfolio-item:hover {
        transform: scale(1.02);
        box-shadow: var(--shadow-hover);
    }

    .portfolio-item .label {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 16px 20px;
        background: linear-gradient(to top, rgba(38, 36, 57, 0.7), transparent);
        color: var(--white);
        font-family: var(--font-sans);
        font-size: 0.8rem;
        font-weight: 500;
    }

    /* ================================================================
    INSIGHTS
    ================================================================ */
    .insights-full {
        padding: 60px 0;
    }

    .insights-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 28px;
    }

    .insight-card {
        background: var(--white);
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--gray-200);
        transition: var(--transition);
    }

    .insight-card:hover {
        box-shadow: var(--shadow-hover);
        transform: translateY(-4px);
    }

    .insight-card .img {
        height: 160px;
        background: var(--gray-200);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-600);
        font-size: 0.8rem;
        background-size: cover;
        background-position: center;
    }

    .insight-card .body {
        padding: 20px 24px 24px;
    }

    .insight-card .body .tag {
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--gold);
        font-weight: 600;
    }

    .insight-card .body h4 {
        font-family: var(--font-serif);
        font-size: 1.15rem;
        font-weight: 600;
        margin: 4px 0 6px;
    }

    .insight-card .body p {
        font-size: 0.85rem;
        color: var(--gray-600);
    }

    /* ================================================================
    CONTACT
    ================================================================ */
    .contact-full {
        padding: 60px 0;
    }

    .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }

    .contact-info .info-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 0;
        border-bottom: 1px solid var(--gray-200);
    }

    .contact-info .info-item i {
        color: var(--gold);
        width: 24px;
        font-size: 1.1rem;
    }

    .contact-form {
        background: var(--gray-100);
        padding: 40px;
        border-radius: var(--radius);
    }

    .contact-form input,
    .contact-form textarea {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        font-family: var(--font-sans);
        font-size: 0.9rem;
        transition: var(--transition);
        margin-bottom: 16px;
        background: var(--white);
    }

    .contact-form input:focus,
    .contact-form textarea:focus {
        outline: none;
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.2);
    }

    .contact-form .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    /* ================================================================
    LOCATION LOCATOR
    ================================================================ */
    .location-locator-section {
        padding: 40px 0 60px;
        border-top: 1px solid var(--gray-200);
    }

    .locator-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: stretch;
        margin-top: 20px;
    }

    .map-container {
        background: var(--gray-100);
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--gray-200);
        display: flex;
        flex-direction: column;
    }

    .map-wrapper {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%;
        background: var(--gray-200);
        flex: 1;
    }

    .map-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

    .map-controls {
        display: flex;
        gap: 10px;
        padding: 16px 20px;
        background: var(--white);
        border-top: 1px solid var(--gray-200);
        flex-wrap: wrap;
    }

    .map-control-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 18px;
        border-radius: 60px;
        border: 1px solid var(--gray-300);
        background: var(--white);
        color: var(--gray-600);
        font-size: 0.75rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans);
    }

    .map-control-btn:hover {
        border-color: var(--gold);
        color: var(--navy);
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

    .map-control-btn i {
        font-size: 0.85rem;
        color: var(--gold);
    }

    .location-details-panel {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .location-card {
        background: var(--white);
        border-radius: var(--radius);
        padding: 32px 28px;
        border: 1px solid var(--gray-200);
        transition: all 0.3s ease;
    }

    .location-card:hover {
        border-color: var(--gold);
        box-shadow: var(--shadow-hover);
    }

    .location-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        color: var(--gold);
        margin-bottom: 16px;
    }

    .location-card h3 {
        font-family: var(--font-serif);
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 8px;
    }

    .location-card .address {
        font-size: 0.95rem;
        color: var(--gray-600);
        line-height: 1.6;
        margin-bottom: 20px;
        padding: 12px 16px;
        background: var(--gray-100);
        border-radius: 8px;
        border-left: 3px solid var(--gold);
    }

    .location-card .address i {
        color: var(--gold);
        margin-right: 8px;
    }

    .location-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin: 16px 0 20px;
    }

    .feature-item {
        display: flex;
        gap: 12px;
        padding: 12px 14px;
        background: var(--gray-100);
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .feature-item:hover {
        background: var(--cream-light);
        transform: translateY(-2px);
    }

    .feature-item i {
        font-size: 1.2rem;
        color: var(--gold);
        margin-top: 2px;
        flex-shrink: 0;
    }

    .feature-item div {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .feature-item strong {
        font-size: 0.8rem;
        color: var(--navy);
        font-weight: 600;
    }

    .feature-item span {
        font-size: 0.75rem;
        color: var(--gray-600);
        line-height: 1.3;
    }

    .location-quick-actions {
        display: flex;
        gap: 12px;
        margin-top: 16px;
    }

    .location-quick-actions .btn {
        padding: 12px 20px;
        font-size: 0.85rem;
    }

    .landmarks-card {
        background: var(--gray-100);
        border-radius: var(--radius);
        padding: 24px 28px;
        border: 1px solid var(--gray-200);
    }

    .landmarks-card h4 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 12px;
        color: var(--navy);
    }

    .landmarks-card h4 i {
        color: var(--gold);
        margin-right: 8px;
    }

    .landmarks-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 16px;
    }

    .landmarks-list li {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.85rem;
        color: var(--gray-600);
        padding: 4px 0;
    }

    .landmarks-list li i {
        color: var(--gold);
        font-size: 0.7rem;
    }

    /* ================================================================
    THE HOUSE
    ================================================================ */
    #page-thehouse .thehouse-hero {
        position: relative;
        width: 100%;
        height: 85vh;
        min-height: 600px;
        max-height: 900px;
        overflow: hidden;
        background: var(--navy);
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
    }

    #page-thehouse .thehouse-hero .thehouse-hero-image {
        width: 100%;
        height: 100%;
    }

    #page-thehouse .thehouse-hero .thehouse-hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #page-thehouse .thehouse-hero .thehouse-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.15) 0%, rgba(38, 36, 57, 0.45) 50%, rgba(38, 36, 57, 0.70) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 40px;
    }

    #page-thehouse .thehouse-hero .thehouse-hero-content {
        max-width: 820px;
    }

    #page-thehouse .thehouse-hero .thehouse-hero-content h1 {
        font-family: var(--font-serif);
        font-size: 4.2rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
        letter-spacing: -0.5px;
        line-height: 1.08;
        margin-bottom: 16px;
    }

    #page-thehouse .thehouse-hero .thehouse-hero-content h1 span {
        color: var(--gold);
        font-weight: 600;
    }

    #page-thehouse .thehouse-hero .thehouse-hero-content .thehouse-hero-stats {
        display: flex;
        justify-content: center;
        gap: 48px;
    }

    #page-thehouse .thehouse-hero .thehouse-hero-content .thehouse-hero-stats .stat .number {
        font-family: var(--font-serif);
        font-size: 2.4rem;
        font-weight: 700;
        color: var(--gold);
        display: block;
    }

    #page-thehouse .thehouse-philosophy {
        padding: 80px 0;
        background: var(--white);
    }

    #page-thehouse .philosophy-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }

    #page-thehouse .philosophy-grid .philosophy-text .philosophy-values {
        margin-top: 24px;
    }

    #page-thehouse .philosophy-grid .philosophy-text .value-item {
        display: flex;
        gap: 16px;
        padding: 12px 0;
        border-bottom: 1px solid var(--gray-200);
    }

    #page-thehouse .philosophy-grid .philosophy-text .value-item i {
        font-size: 1.4rem;
        color: var(--gold);
        margin-top: 2px;
    }

    #page-thehouse .philosophy-grid .philosophy-text .value-item h4 {
        font-family: var(--font-serif);
        font-size: 1rem;
        font-weight: 600;
    }

    #page-thehouse .philosophy-grid .philosophy-text .value-item p {
        font-size: 0.85rem;
        color: var(--gray-600);
    }

    #page-thehouse .philosophy-grid .philosophy-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--radius);
    }

    #page-thehouse .thehouse-process {
        padding: 80px 0;
        background: var(--gray-100);
    }

    #page-thehouse .process-timeline {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        margin-top: 40px;
    }

    #page-thehouse .process-step {
        background: var(--white);
        padding: 28px 24px;
        border-radius: var(--radius);
        text-align: center;
        border: 1px solid var(--gray-200);
        transition: var(--transition);
    }

    #page-thehouse .process-step:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    #page-thehouse .process-step .step-number {
        font-family: var(--font-serif);
        font-size: 2rem;
        font-weight: 700;
        color: var(--gold);
        margin-bottom: 8px;
    }

    #page-thehouse .process-step .step-content h3 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    #page-thehouse .process-step .step-content p {
        font-size: 0.85rem;
        color: var(--gray-600);
    }

    #page-thehouse .thehouse-team {
        padding: 80px 0;
        background: var(--white);
    }

    #page-thehouse .thehouse-team .team-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
    }

    #page-thehouse .thehouse-team .team-member {
        text-align: center;
    }

    #page-thehouse .thehouse-team .team-member .member-image {
        width: 100%;
        aspect-ratio: 1;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        margin-bottom: 16px;
    }

    #page-thehouse .thehouse-team .team-member h4 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
    }

    #page-thehouse .thehouse-team .team-member .member-role {
        font-size: 0.8rem;
        color: var(--gold);
        font-weight: 500;
    }

    #page-thehouse .thehouse-team .team-member p {
        font-size: 0.85rem;
        color: var(--gray-600);
        margin-top: 8px;
    }

    #page-thehouse .thehouse-testimonials {
        padding: 60px 0;
        background: var(--gray-100);
    }

    #page-thehouse .thehouse-testimonials .testimonial-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    #page-thehouse .thehouse-testimonials .testimonial-grid .testimonial-card {
        background: var(--white);
        padding: 28px;
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
        transition: var(--transition);
    }

    #page-thehouse .thehouse-testimonials .testimonial-grid .testimonial-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
    }

    #page-thehouse .thehouse-testimonials .testimonial-grid .testimonial-card .quote {
        font-family: var(--font-serif);
        font-size: 1.05rem;
        font-style: italic;
        line-height: 1.7;
        color: var(--gray-800);
        margin-bottom: 16px;
    }

    #page-thehouse .thehouse-testimonials .testimonial-grid .testimonial-card .author {
        font-weight: 600;
        color: var(--navy);
    }

    #page-thehouse .thehouse-testimonials .testimonial-grid .testimonial-card .role {
        font-size: 0.8rem;
        color: var(--gray-600);
    }

    /* ================================================================
    CAREERS
    ================================================================ */
    .careers-hero {
        position: relative;
        width: 100%;
        height: 75vh;
        min-height: 550px;
        max-height: 750px;
        overflow: hidden;
        background: var(--navy);
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
    }

    .careers-hero .hero-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .careers-hero .hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.10) 0%, rgba(38, 36, 57, 0.30) 40%, rgba(38, 36, 57, 0.55) 70%, rgba(38, 36, 57, 0.75) 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 40px;
    }

    .careers-hero .hero-overlay .hero-badge {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 8px;
    }

    .careers-hero .hero-overlay h1 {
        font-family: var(--font-serif);
        font-size: 4rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
        letter-spacing: -0.5px;
        line-height: 1.05;
        margin-bottom: 8px;
    }

    .careers-hero .hero-overlay h1 span {
        color: var(--gold);
        font-weight: 600;
    }

    .careers-hero .hero-overlay p {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
        text-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
        max-width: 620px;
    }

    .careers-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        margin: -40px auto 40px;
        max-width: 1100px;
        position: relative;
        z-index: 2;
        padding: 0 20px;
    }

    .careers-stats .stat-card {
        background: var(--white);
        border-radius: var(--radius);
        padding: 28px 20px;
        text-align: center;
        box-shadow: var(--shadow);
        border: 1px solid var(--gray-200);
        transition: var(--transition);
    }

    .careers-stats .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .careers-stats .stat-card .stat-number {
        font-family: var(--font-serif);
        font-size: 2.4rem;
        font-weight: 700;
        color: var(--gold);
        display: block;
    }

    .careers-stats .stat-card .stat-label {
        font-size: 0.85rem;
        color: var(--gray-600);
        margin-top: 4px;
    }

    .why-join-section {
        padding: 60px 0;
        background: var(--white);
    }

    .why-join-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-top: 40px;
    }

    .why-join-card {
        background: var(--gray-100);
        border-radius: var(--radius);
        padding: 32px 28px;
        text-align: center;
        transition: var(--transition);
        border: 1px solid transparent;
    }

    .why-join-card:hover {
        transform: translateY(-4px);
        border-color: var(--gold);
        box-shadow: var(--shadow-hover);
        background: var(--white);
    }

    .why-join-card .icon-wrap {
        font-size: 2.4rem;
        color: var(--gold);
        margin-bottom: 16px;
        display: inline-block;
    }

    .why-join-card h3 {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .why-join-card p {
        font-size: 0.9rem;
        color: var(--gray-600);
        line-height: 1.6;
    }

    .open-positions {
        padding: 60px 0;
        background: var(--gray-100);
    }

    .open-positions .section-header {
        margin-bottom: 40px;
    }

    .jobs-filter {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 32px;
    }

    .jobs-filter .filter-btn {
        padding: 10px 28px;
        border-radius: 60px;
        border: 1.5px solid var(--gray-300);
        background: transparent;
        color: var(--gray-600);
        font-size: 0.75rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans);
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .jobs-filter .filter-btn:hover {
        border-color: var(--gold);
        color: var(--navy);
    }

    .jobs-filter .filter-btn.active {
        background: var(--navy);
        color: var(--white);
        border-color: var(--navy);
        box-shadow: 0 4px 16px rgba(38, 36, 57, 0.15);
    }

    .jobs-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 24px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .job-card {
        background: var(--white);
        border-radius: var(--radius);
        padding: 28px 30px;
        border: 1px solid var(--gray-200);
        transition: var(--transition);
        cursor: pointer;
    }

    .job-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .job-card .job-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .job-card .job-title {
        font-family: var(--font-serif);
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--navy);
    }

    .job-card .job-badge {
        font-size: 0.6rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 4px 14px;
        border-radius: 60px;
    }

    .job-card .job-badge.full-time {
        background: #d4edda;
        color: #155724;
    }

    .job-card .job-badge.part-time {
        background: #cce5ff;
        color: #004085;
    }

    .job-card .job-badge.contract {
        background: #fff3cd;
        color: #856404;
    }

    .job-card .job-badge.internship {
        background: #f8d7da;
        color: #721c24;
    }

    .job-card .job-location {
        font-size: 0.8rem;
        color: var(--gray-600);
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .job-card .job-location i {
        color: var(--gold);
    }

    .job-card .job-description {
        font-size: 0.85rem;
        color: var(--gray-600);
        line-height: 1.6;
        margin-bottom: 16px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .job-card .job-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 16px;
        border-top: 1px solid var(--gray-200);
        flex-wrap: wrap;
        gap: 8px;
    }

    .job-card .job-footer .job-meta {
        font-size: 0.7rem;
        color: var(--gray-600);
    }

    .job-card .job-footer .btn-apply {
        padding: 6px 20px;
        border-radius: 60px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        background: var(--gold);
        color: var(--white);
        border: none;
        cursor: pointer;
        transition: var(--transition);
    }

    .job-card .job-footer .btn-apply:hover {
        background: #b8965a;
        transform: translateY(-2px);
    }

    .programs-section {
        padding: 60px 0;
        background: var(--gray-100);
    }

    .programs-section .section-header {
        margin-bottom: 40px;
    }

    .programs-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .program-card-careers {
        background: var(--white);
        border-radius: var(--radius);
        padding: 32px 28px 28px;
        border: 1px solid var(--gray-200);
        transition: all 0.4s ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .program-card-careers::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gold);
        transform: scaleX(0);
        transition: transform 0.4s ease;
    }

    .program-card-careers:hover::before {
        transform: scaleX(1);
    }

    .program-card-careers:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .program-card-careers .program-icon {
        font-size: 2.8rem;
        color: var(--gold);
        margin-bottom: 16px;
        display: block;
    }

    .program-card-careers h3 {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--navy);
    }

    .program-card-careers p {
        font-size: 0.9rem;
        color: var(--gray-600);
        line-height: 1.6;
        margin-bottom: 12px;
    }

    .program-card-careers .program-tags {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 16px;
    }

    .program-card-careers .program-tags span {
        font-size: 0.6rem;
        padding: 2px 12px;
        border-radius: 60px;
        background: var(--gray-100);
        color: var(--gray-600);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .program-card-careers .program-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 16px;
        border-top: 1px solid var(--gray-200);
        flex-wrap: wrap;
        gap: 8px;
    }

    .program-card-careers .program-meta {
        font-size: 0.7rem;
        color: var(--gray-600);
    }

    .program-card-careers .btn-apply-program {
        padding: 6px 20px;
        border-radius: 60px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        background: var(--gold);
        color: var(--white);
        border: none;
        cursor: pointer;
        transition: var(--transition);
    }

    .program-card-careers .btn-apply-program:hover {
        background: #b8965a;
        transform: translateY(-2px);
    }

    .program-apply-modal .modal-content {
        max-width: 580px;
    }

    .program-apply-modal .modal-content .program-badge {
        display: inline-block;
        padding: 4px 16px;
        border-radius: 60px;
        background: var(--gold);
        color: var(--white);
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 4px;
    }

    .program-apply-modal .modal-content .program-title-display {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 16px;
    }

    .careers-apply-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 3000;
        background: rgba(38, 36, 57, 0.7);
        backdrop-filter: blur(12px);
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: fadeIn 0.3s ease;
    }

    .careers-apply-modal.open {
        display: flex;
    }

    .careers-apply-modal .modal-content {
        background: var(--white);
        border-radius: var(--radius);
        max-width: 580px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 40px;
        position: relative;
        animation: modalScaleIn 0.3s ease;
    }

    .careers-apply-modal .modal-content .close-btn {
        position: absolute;
        top: 16px;
        right: 20px;
        background: none;
        border: none;
        font-size: 1.4rem;
        color: var(--gray-600);
        cursor: pointer;
        transition: var(--transition);
    }

    .careers-apply-modal .modal-content .close-btn:hover {
        color: var(--navy);
        transform: rotate(90deg);
    }

    .careers-apply-modal .modal-content h2 {
        font-family: var(--font-serif);
        font-size: 1.4rem;
        margin-bottom: 4px;
    }

    .careers-apply-modal .modal-content .job-title-display {
        font-size: 1rem;
        color: var(--gold);
        font-weight: 500;
        margin-bottom: 20px;
    }

    .careers-apply-modal .modal-content .form-group {
        margin-bottom: 16px;
    }

    .careers-apply-modal .modal-content .form-group label {
        font-weight: 500;
        font-size: 0.85rem;
        display: block;
        margin-bottom: 4px;
        color: var(--gray-800);
    }

    .careers-apply-modal .modal-content .form-group input,
    .careers-apply-modal .modal-content .form-group select,
    .careers-apply-modal .modal-content .form-group textarea {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        font-family: var(--font-sans);
        font-size: 0.9rem;
        transition: var(--transition);
        background: var(--white);
    }

    .careers-apply-modal .modal-content .form-group input:focus,
    .careers-apply-modal .modal-content .form-group select:focus,
    .careers-apply-modal .modal-content .form-group textarea:focus {
        outline: none;
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.2);
    }

    .careers-apply-modal .modal-content .form-group textarea {
        resize: vertical;
        min-height: 100px;
    }

    .careers-apply-modal .modal-content .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .careers-apply-modal .modal-content .file-upload {
        border: 2px dashed var(--gray-300);
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        cursor: pointer;
        transition: var(--transition);
    }

    .careers-apply-modal .modal-content .file-upload:hover {
        border-color: var(--gold);
        background: var(--cream-light);
    }

    .careers-apply-modal .modal-content .file-upload .file-icon {
        font-size: 2rem;
        color: var(--gray-600);
        display: block;
        margin-bottom: 8px;
    }

    .careers-apply-modal .modal-content .file-upload .file-text {
        font-size: 0.85rem;
        color: var(--gray-600);
    }

    .careers-apply-modal .modal-content .file-upload input[type="file"] {
        display: none;
    }

    .careers-apply-modal .modal-content .btn-submit {
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }

    /* ================================================================
    SIZE & FIT GUIDE
    ================================================================ */
    .styleguide-nav {
        position: sticky;
        top: calc(var(--topbar-height) + var(--navbar-height));
        z-index: 50;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(217, 204, 188, 0.25);
        padding: 14px 0;
        transition: all 0.3s ease;
    }

    .styleguide-nav .container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .styleguide-nav a {
        font-size: 0.7rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--gray-600);
        padding: 6px 0;
        position: relative;
        transition: var(--transition);
        cursor: pointer;
        text-decoration: none;
    }

    .styleguide-nav a::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 1.5px;
        background: var(--gold);
        transition: width 0.4s ease;
    }

    .styleguide-nav a:hover {
        color: var(--navy);
    }

    .styleguide-nav a.active {
        color: var(--navy);
    }

    .styleguide-nav a.active::after {
        width: 100%;
    }

    .styleguide-nav .nav-divider {
        width: 1px;
        height: 14px;
        background: var(--gray-300);
        opacity: 0.4;
        flex-shrink: 0;
    }

    .styleguide-section {
        padding: 60px 0;
    }

    .styleguide-section:nth-child(even) {
        background: var(--gray-100);
    }

    .styleguide-section:last-child {
        background: var(--white);
    }

    .fit-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
        margin-top: 8px;
    }

    .fit-card {
        background: var(--white);
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--gray-200);
        transition: all 0.4s ease;
        position: relative;
    }

    .fit-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .fit-card .fit-image {
        height: 280px;
        background-size: cover;
        background-position: center;
        position: relative;
        overflow: hidden;
    }

    .fit-card .fit-image .fit-badge {
        position: absolute;
        top: 16px;
        left: 16px;
        padding: 4px 16px;
        border-radius: 60px;
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        color: var(--white);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .fit-card .fit-content {
        padding: 24px 28px 28px;
    }

    .fit-card .fit-content h3 {
        font-family: var(--font-serif);
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .fit-card .fit-content > p {
        font-size: 0.9rem;
        color: var(--gray-600);
        line-height: 1.6;
        margin-bottom: 16px;
    }

    .fit-card .fit-content .fit-details {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding-top: 12px;
        border-top: 1px solid var(--gray-200);
    }

    .fit-card .fit-content .fit-details .fit-detail {
        display: flex;
        justify-content: space-between;
        font-size: 0.8rem;
    }

    .fit-card .fit-content .fit-details .fit-detail .detail-label {
        color: var(--gray-600);
        font-weight: 400;
    }

    .fit-card .fit-content .fit-details .fit-detail .detail-value {
        color: var(--navy);
        font-weight: 500;
        text-align: right;
        max-width: 60%;
    }

    .fit-comparison {
        margin-top: 48px;
        background: var(--white);
        border-radius: var(--radius);
        padding: 28px 32px;
        border: 1px solid var(--gray-200);
    }

    .fit-comparison h4 {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 16px;
        color: var(--navy);
    }

    .comparison-table {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .comparison-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        padding: 10px 16px;
        border-radius: 6px;
        font-size: 0.85rem;
    }

    .comparison-row.header {
        background: var(--navy);
        color: var(--white);
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .comparison-row:not(.header):nth-child(even) {
        background: var(--gray-100);
    }

    .comparison-row span:first-child {
        font-weight: 500;
    }

    .comparison-row:not(.header) span:not(:first-child) {
        color: var(--gray-600);
    }

    /* ================================================================ */
    /* MEASUREMENT GUIDE - COMPLETE STYLES                           */
    /* ================================================================ */

    /* ---- Measurement Tips ---- */
    .measurement-tips {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 40px;
    }

    .measurement-tips .tip-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 20px;
        background: var(--cream-light, #f0ebe4);
        border-radius: var(--radius, 12px);
        transition: all 0.3s ease;
        border: 1px solid transparent;
    }

    .measurement-tips .tip-item:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow, 0 8px 32px rgba(38, 36, 57, 0.12));
        border-color: var(--gold, #c9a96e);
    }

    .measurement-tips .tip-item i {
        font-size: 1.4rem;
        color: var(--gold, #c9a96e);
        margin-top: 2px;
        flex-shrink: 0;
    }

    .measurement-tips .tip-item h4 {
        font-family: var(--font-serif, 'Cormorant Garamond', serif);
        font-size: 0.95rem;
        font-weight: 600;
        margin-bottom: 2px;
        color: var(--navy, #262439);
    }

    .measurement-tips .tip-item p {
        font-size: 0.8rem;
        color: var(--gray-600, #7a736b);
        margin: 0;
    }

    /* ---- Measurement Navigation Wrapper ---- */
    .measurement-nav-wrapper {
        position: sticky;
        top: calc(var(--topbar-height) + var(--navbar-height));
        z-index: 89;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(217, 204, 188, 0.15);
        padding: 8px 0;
        transition: all 0.3s ease;
        box-shadow: 0 2px 20px rgba(38, 36, 57, 0.04);
        margin-bottom: 32px;
    }

    .measurement-nav-wrapper.scrolled {
        box-shadow: 0 4px 30px rgba(38, 36, 57, 0.08);
        background: rgba(255, 255, 255, 0.98);
    }

    .measurement-nav-tabs {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 0 24px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .measurement-nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .measurement-tab-btn {
        padding: 10px 20px;
        border-radius: 60px;
        border: 1.5px solid transparent;
        background: transparent;
        color: var(--gray-600, #7a736b);
        font-family: var(--font-sans, 'Inter', sans-serif);
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        white-space: nowrap;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .measurement-tab-btn i {
        font-size: 0.8rem;
    }

    .measurement-tab-btn:hover {
        color: var(--navy, #262439);
        border-color: var(--gray-300, #d5cfc7);
        transform: translateY(-1px);
    }

    .measurement-tab-btn.active {
        background: var(--navy, #262439);
        color: var(--white, #ffffff);
        border-color: var(--navy, #262439);
        box-shadow: 0 4px 16px rgba(38, 36, 57, 0.12);
    }

    .measurement-tab-btn.active:hover {
        background: #35324f;
        transform: translateY(-1px);
    }

    /* ---- Progress Container ---- */
    .measurement-nav-wrapper .progress-container {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: rgba(217, 204, 188, 0.15);
        overflow: hidden;
    }

    .measurement-nav-wrapper .progress-line {
        height: 100%;
        width: 0%;
        background: var(--gold, #c9a96e);
        transition: width 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* ---- Measurement Content ---- */
    .measurement-content-wrapper {
        padding-top: 8px;
    }

    .measurement-content {
        display: none;
        animation: fadeUp 0.4s ease;
    }

    .measurement-content.active {
        display: block;
    }

    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .measurement-header {
        margin-bottom: 32px;
    }

    .measurement-header h3 {
        font-family: var(--font-serif, 'Cormorant Garamond', serif);
        font-size: 1.8rem;
        font-weight: 600;
        color: var(--navy, #262439);
        margin-bottom: 4px;
    }

    .measurement-header p {
        color: var(--gray-600, #7a736b);
        font-size: 1rem;
    }

    /* ---- Detailed Measurement Grid ---- */
    .measurement-grid-detailed {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .measurement-item-detailed {
        background: var(--white, #ffffff);
        border-radius: var(--radius, 12px);
        overflow: hidden;
        border: 1px solid var(--gray-200, #ede9e3);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .measurement-item-detailed:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover, 0 16px 48px rgba(38, 36, 57, 0.20));
        border-color: var(--gold, #c9a96e);
    }

    .measurement-item-detailed .measurement-image {
        position: relative;
        height: 180px;
        overflow: hidden;
        background: var(--gray-100, #f8f6f3);
    }

    .measurement-item-detailed .measurement-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .measurement-item-detailed:hover .measurement-image img {
        transform: scale(1.03);
    }

    .measurement-item-detailed .measurement-image .measurement-label {
        position: absolute;
        bottom: 12px;
        left: 12px;
        padding: 4px 16px;
        background: rgba(38, 36, 57, 0.75);
        backdrop-filter: blur(4px);
        color: var(--white, #ffffff);
        font-size: 0.7rem;
        font-weight: 600;
        border-radius: 60px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .measurement-item-detailed .measurement-details {
        padding: 16px 20px 20px;
    }

    .measurement-item-detailed .measurement-details h4 {
        font-family: var(--font-serif, 'Cormorant Garamond', serif);
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--navy, #262439);
        margin-bottom: 4px;
    }

    .measurement-item-detailed .measurement-details p {
        font-size: 0.85rem;
        color: var(--gray-600, #7a736b);
        line-height: 1.5;
        margin-bottom: 8px;
    }

    .measurement-item-detailed .measurement-details .measurement-tip {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.75rem;
        color: var(--gold, #c9a96e);
        background: var(--cream-light, #f0ebe4);
        padding: 6px 12px;
        border-radius: 6px;
    }

    .measurement-item-detailed .measurement-details .measurement-tip i {
        font-size: 0.7rem;
    }

    /* ---- Video Section ---- */
    .measurement-video-section {
        margin-top: 48px;
        padding-top: 40px;
        border-top: 1px solid var(--gray-200, #ede9e3);
    }

    .measurement-video {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 32px 36px;
        background: var(--navy, #262439);
        border-radius: var(--radius, 12px);
        color: var(--white, #ffffff);
    }

    .measurement-video i {
        font-size: 3rem;
        color: var(--gold, #c9a96e);
        flex-shrink: 0;
    }

    .measurement-video h4 {
        font-family: var(--font-serif, 'Cormorant Garamond', serif);
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 2px;
    }

    .measurement-video p {
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 12px;
    }

    .measurement-video .measurement-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .measurement-video .measurement-actions .btn-outline {
        border-color: rgba(255, 255, 255, 0.3);
        color: var(--white, #ffffff);
        background: transparent;
        padding: 10px 24px;
        border-radius: 60px;
        font-weight: 600;
        font-size: 0.8rem;
        transition: all 0.3s ease;
        cursor: pointer;
        font-family: var(--font-sans, 'Inter', sans-serif);
    }

    .measurement-video .measurement-actions .btn-outline:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: var(--white, #ffffff);
        transform: translateY(-2px);
    }

    .measurement-video .measurement-actions .btn-gold {
        background: var(--gold, #c9a96e);
        color: var(--navy, #262439);
        padding: 10px 24px;
        border-radius: 60px;
        font-weight: 600;
        font-size: 0.8rem;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans, 'Inter', sans-serif);
    }

    .measurement-video .measurement-actions .btn-gold:hover {
        background: #d4b47a;
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(201, 169, 110, 0.2);
    }

    /* ---- Measurement CTA ---- */
    .measurement-cta {
        margin-top: 40px;
        padding: 40px 0 20px;
        border-top: 1px solid var(--gray-200, #ede9e3);
    }

    .measurement-cta .cta-content {
        text-align: center;
        max-width: 620px;
        margin: 0 auto;
    }

    .measurement-cta .cta-content h3 {
        font-family: var(--font-serif, 'Cormorant Garamond', serif);
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--navy, #262439);
    }

    .measurement-cta .cta-content h3 span {
        color: var(--gold, #c9a96e);
    }

    .measurement-cta .cta-content p {
        font-size: 1rem;
        color: var(--gray-600, #7a736b);
        margin-bottom: 20px;
    }

    .measurement-cta .cta-buttons {
        display: flex;
        gap: 14px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .measurement-cta .cta-buttons .btn {
        padding: 12px 32px;
        font-size: 0.85rem;
        border-radius: 60px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans, 'Inter', sans-serif);
    }

    .measurement-cta .cta-buttons .btn-gold {
        background: var(--gold, #c9a96e);
        color: var(--white, #ffffff);
        border: none;
    }

    .measurement-cta .cta-buttons .btn-gold:hover {
        background: #b8965a;
        transform: translateY(-2px);
    }

    .measurement-cta .cta-buttons .btn-outline {
        background: transparent;
        color: var(--navy, #262439);
        border: 1.5px solid var(--navy, #262439);
    }

    .measurement-cta .cta-buttons .btn-outline:hover {
        background: var(--navy, #262439);
        color: var(--white, #ffffff);
        transform: translateY(-2px);
    }

    /* ================================================================ */
    /* RESPONSIVE - MEASUREMENT GUIDE                                */
    /* ================================================================ */

    @media (max-width: 1024px) {
        .measurement-grid-detailed {
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .measurement-tips {
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
    }

    @media (max-width: 768px) {
        .measurement-nav-tabs {
            padding: 0 12px;
            gap: 4px;
            justify-content: flex-start;
        }

        .measurement-tab-btn {
            padding: 6px 14px;
            font-size: 0.6rem;
            letter-spacing: 0.5px;
        }

        .measurement-tab-btn i {
            font-size: 0.7rem;
        }

        .measurement-grid-detailed {
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .measurement-item-detailed .measurement-image {
            height: 140px;
        }

        .measurement-item-detailed .measurement-details {
            padding: 12px 14px 16px;
        }

        .measurement-item-detailed .measurement-details h4 {
            font-size: 0.9rem;
        }

        .measurement-item-detailed .measurement-details p {
            font-size: 0.75rem;
        }

        .measurement-tips {
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .measurement-tips .tip-item {
            padding: 12px 16px;
        }

        .measurement-video {
            flex-direction: column;
            text-align: center;
            padding: 24px 20px;
            gap: 16px;
        }

        .measurement-video .measurement-actions {
            justify-content: center;
        }

        .measurement-cta .cta-content h3 {
            font-size: 1.5rem;
        }

        .measurement-cta .cta-buttons {
            flex-direction: column;
            align-items: center;
        }

        .measurement-cta .cta-buttons .btn {
            width: 100%;
            max-width: 280px;
            justify-content: center;
        }

        .measurement-header h3 {
            font-size: 1.4rem;
        }
    }

    @media (max-width: 480px) {
        .measurement-grid-detailed {
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .measurement-tips {
            grid-template-columns: 1fr;
            gap: 8px;
        }

        .measurement-tab-btn {
            padding: 4px 10px;
            font-size: 0.5rem;
        }

        .measurement-tab-btn i {
            font-size: 0.6rem;
        }

        .measurement-header h3 {
            font-size: 1.2rem;
        }

        .measurement-item-detailed .measurement-image {
            height: 180px;
        }

        .measurement-item-detailed .measurement-details {
            padding: 14px 16px 18px;
        }

        .measurement-video {
            padding: 20px 16px;
        }

        .measurement-video i {
            font-size: 2.4rem;
        }

        .measurement-video h4 {
            font-size: 1.1rem;
        }

        .measurement-video p {
            font-size: 0.85rem;
        }

        .measurement-cta .cta-content h3 {
            font-size: 1.3rem;
        }
    }

    /* ---- Measurement Progress Bar Animation ---- */
    .measurement-nav-wrapper .progress-line {
        position: relative;
    }

    .measurement-nav-wrapper .progress-line::after {
        content: '';
        position: absolute;
        right: -4px;
        top: -3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--gold, #c9a96e);
        opacity: 0;
        transition: opacity 0.4s ease;
        box-shadow: 0 0 16px rgba(201, 169, 110, 0.3);
    }

    .measurement-nav-wrapper .progress-line.visible::after {
        opacity: 1;
    }

    /* ---- Measurement Tabs - Active Indicator ---- */
    .measurement-tab-btn.active {
        position: relative;
    }

    .measurement-tab-btn.active::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 2px;
        background: var(--gold, #c9a96e);
        border-radius: 2px;
    }

    /* ---- Measurement Content - Smooth Transitions ---- */
    .measurement-content {
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .measurement-content.active {
        animation: fadeInContent 0.5s ease forwards;
    }

    @keyframes fadeInContent {
        from {
            opacity: 0;
            transform: translateY(15px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ---- Measurement Item - Hover Effect ---- */
    .measurement-item-detailed {
        position: relative;
    }

    .measurement-item-detailed::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--gold, #c9a96e);
        transform: scaleX(0);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .measurement-item-detailed:hover::after {
        transform: scaleX(1);
    }

    /* ---- Measurement Header - Decorative ---- */
    .measurement-header h3 i {
        color: var(--gold, #c9a96e);
        margin-right: 8px;
    }

    /* ---- Measurement Tips - Icon Animation ---- */
    .measurement-tips .tip-item i {
        transition: transform 0.4s ease;
    }

    .measurement-tips .tip-item:hover i {
        transform: scale(1.15) rotate(-5deg);
    }

    /* ---- Measurement Image - Overlay ---- */
    .measurement-item-detailed .measurement-image .measurement-label {
        transition: all 0.3s ease;
    }

    .measurement-item-detailed:hover .measurement-image .measurement-label {
        background: var(--gold, #c9a96e);
        color: var(--navy, #262439);
    }

    /* ================================================================
    TRACK ORDER
    ================================================================ */
    .track-options-wrapper {
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 40px;
        max-width: 900px;
        margin: 0 auto;
        padding: 20px 0;
    }

    .track-option-card {
        flex: 1;
        max-width: 380px;
        background: var(--white);
        border-radius: var(--radius);
        padding: 32px 28px 36px;
        text-align: center;
        border: 1px solid var(--gray-200);
        transition: all 0.4s ease;
        position: relative;
    }

    .track-option-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .track-option-card .track-option-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        font-size: 1.6rem;
        color: var(--gold);
        transition: var(--transition);
    }

    .track-option-card:hover .track-option-icon {
        background: var(--cream);
        transform: scale(1.05);
    }

    .track-option-card h3 {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 8px;
    }

    .track-option-card p {
        color: var(--gray-600);
        font-size: 0.9rem;
        margin-bottom: 20px;
        line-height: 1.5;
    }

    .track-input-group {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
    }

    .track-input-group input {
        flex: 1;
        padding: 10px 16px;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        font-family: var(--font-sans);
        font-size: 0.9rem;
        transition: var(--transition);
        background: var(--white);
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .track-input-group input:focus {
        outline: none;
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.2);
    }

    .track-input-group input::placeholder {
        text-transform: none;
        letter-spacing: 0;
    }

    .track-input-group .btn {
        padding: 10px 24px;
        white-space: nowrap;
    }

    .track-hint {
        font-size: 0.7rem;
        color: var(--gray-500);
        text-align: left;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .track-hint i {
        color: var(--gold);
    }

    .track-account-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .track-account-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .track-account-hint {
        font-size: 0.7rem;
        color: var(--gray-500);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .track-account-hint i {
        color: var(--gold);
    }

    .track-option-divider {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 40px;
        position: relative;
    }

    .track-option-divider::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background: var(--gray-200);
    }

    .track-option-divider span {
        background: var(--gray-100);
        padding: 4px 12px;
        border-radius: 60px;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--gray-600);
        position: relative;
        z-index: 1;
    }

    .track-results {
        max-width: 800px;
        margin: 40px auto 0;
        animation: fadeUp 0.5s ease;
    }

    .quick-status-card {
        background: var(--white);
        border-radius: var(--radius);
        padding: 32px 36px;
        border: 1px solid var(--gray-200);
        box-shadow: var(--shadow);
    }

    .quick-status-card .status-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .quick-status-card .status-header .order-id {
        font-family: var(--font-serif);
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--navy);
    }

    .quick-status-card .status-header .order-date {
        font-size: 0.8rem;
        color: var(--gray-600);
    }

    .quick-status-card .status-badge-large {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 20px;
        border-radius: 60px;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .quick-status-card .status-badge-large.in-progress {
        background: rgba(231, 76, 60, 0.12);
        color: #e74c3c;
    }

    .quick-status-card .status-badge-large.pending {
        background: rgba(243, 156, 18, 0.12);
        color: #f39c12;
    }

    .quick-status-card .status-badge-large.completed {
        background: rgba(46, 204, 113, 0.12);
        color: #2ecc71;
    }

    .quick-status-card .status-dot-large {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
    }

    .quick-status-card .status-dot-large.in-progress {
        background: #e74c3c;
        animation: pulse-dot 1.5s ease-in-out infinite;
    }

    .quick-status-card .status-dot-large.pending {
        background: #f39c12;
        animation: pulse-dot 1.5s ease-in-out infinite;
    }

    .quick-status-card .status-dot-large.completed {
        background: #2ecc71;
    }

    @keyframes pulse-dot {
        0%, 100% {
            opacity: 1;
            transform: scale(1);
        }
        50% {
            opacity: 0.6;
            transform: scale(0.8);
        }
    }

    .quick-status-card .status-current {
        margin: 16px 0;
        padding: 16px 20px;
        background: var(--gray-100);
        border-radius: var(--radius);
        border-left: 4px solid var(--gold);
    }

    .quick-status-card .status-current .label {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--gray-600);
        font-weight: 600;
    }

    .quick-status-card .status-current .stage {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--navy);
    }

    .quick-status-card .status-current .description {
        font-size: 0.85rem;
        color: var(--gray-600);
        margin-top: 2px;
    }

    .quick-status-card .status-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 16px;
    }

    .detailed-progress-card {
        background: var(--white);
        border-radius: var(--radius);
        padding: 32px 36px;
        border: 1px solid var(--gray-200);
        box-shadow: var(--shadow);
    }

    .detailed-progress-card .progress-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .detailed-progress-card .progress-header .order-id {
        font-family: var(--font-serif);
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--navy);
    }

    .detailed-progress-card .progress-header .order-meta {
        font-size: 0.85rem;
        color: var(--gray-600);
    }

    .detailed-progress-card .progress-header .order-meta span {
        display: inline-block;
        margin-left: 16px;
    }

    .timeline {
        position: relative;
        padding-left: 32px;
        margin: 24px 0 16px;
    }

    .timeline::before {
        content: '';
        position: absolute;
        left: 8px;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--gray-200);
        border-radius: 3px;
    }

    .timeline-item {
        position: relative;
        padding: 12px 0 12px 24px;
        border-left: 3px solid transparent;
        transition: all 0.3s ease;
    }

    .timeline-item .timeline-dot {
        position: absolute;
        left: -27px;
        top: 16px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 3px solid var(--gray-300);
        background: var(--white);
        transition: all 0.3s ease;
        z-index: 1;
    }

    .timeline-item.completed .timeline-dot {
        border-color: #2ecc71;
        background: #2ecc71;
        box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.2);
    }

    .timeline-item.active .timeline-dot {
        border-color: #f39c12;
        background: #f39c12;
        box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.2);
        animation: pulse-dot 1.5s ease-in-out infinite;
    }

    .timeline-item.pending .timeline-dot {
        border-color: #e74c3c;
        background: #e74c3c;
        box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.2);
    }

    .timeline-item .timeline-content {
        padding-left: 8px;
    }

    .timeline-item .timeline-content .stage-name {
        font-weight: 600;
        color: var(--navy);
        font-size: 0.95rem;
    }

    .timeline-item .timeline-content .stage-desc {
        font-size: 0.85rem;
        color: var(--gray-600);
        margin-top: 2px;
    }

    .timeline-item .timeline-content .stage-date {
        font-size: 0.7rem;
        color: var(--gray-500);
        margin-top: 4px;
    }

    .timeline-item.completed .timeline-content .stage-name {
        color: #2ecc71;
    }

    .timeline-item.active .timeline-content .stage-name {
        color: #f39c12;
    }

    .timeline-item.pending .timeline-content .stage-name {
        color: #e74c3c;
    }

    .timeline-item.adjustment-stage {
        background: rgba(243, 156, 18, 0.06);
        border-radius: 8px;
        margin: 4px 0;
        padding: 12px 0 12px 24px;
    }

    .timeline-item.adjustment-stage .timeline-dot {
        border-color: #f39c12;
        background: #f39c12;
        box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.2);
    }

    .timeline-item.adjustment-stage .timeline-content .stage-name {
        color: #f39c12;
    }

    .timeline-item.adjustment-stage .timeline-content .stage-name i {
        margin-right: 6px;
    }

    .detailed-order-summary {
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid var(--gray-200);
    }

    .detailed-order-summary .summary-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 24px;
    }

    .detailed-order-summary .summary-item {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        font-size: 0.85rem;
    }

    .detailed-order-summary .summary-item .label {
        color: var(--gray-600);
    }

    .detailed-order-summary .summary-item .value {
        font-weight: 500;
        color: var(--navy);
    }

    .track-no-results {
        text-align: center;
        padding: 60px 20px;
        max-width: 500px;
        margin: 0 auto;
    }

    .track-no-results i {
        font-size: 3rem;
        color: var(--gray-300);
        display: block;
        margin-bottom: 16px;
    }

    .track-no-results h3 {
        font-family: var(--font-serif);
        font-size: 1.4rem;
        color: var(--navy);
        margin-bottom: 8px;
    }

    .track-no-results p {
        color: var(--gray-600);
        margin-bottom: 20px;
    }

    .order-status-legend {
        padding: 40px 0 60px;
        background: var(--gray-100);
        border-top: 1px solid var(--gray-200);
    }

    .legend-wrapper {
        max-width: 700px;
        margin: 0 auto;
        text-align: center;
    }

    .legend-wrapper h4 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 16px;
    }

    .legend-wrapper h4 i {
        color: var(--gold);
        margin-right: 8px;
    }

    .legend-items {
        display: flex;
        justify-content: center;
        gap: 32px;
        flex-wrap: wrap;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .legend-item .legend-dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .legend-item .legend-label {
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--navy);
    }

    .legend-item .legend-desc {
        font-size: 0.7rem;
        color: var(--gray-600);
        margin-left: 2px;
    }

    .toast-notification {
        position: fixed;
        bottom: 100px;
        right: 24px;
        background: var(--navy);
        color: var(--white);
        padding: 16px 28px;
        border-radius: var(--radius);
        box-shadow: var(--shadow-hover);
        font-size: 0.9rem;
        z-index: 3000;
        animation: fadeIn 0.3s ease;
        max-width: 360px;
        font-family: 'Inter', sans-serif;
    }

    .toast-notification.error {
        border-left: 4px solid #e74c3c;
    }

    .toast-notification.success {
        border-left: 4px solid #2ecc71;
    }

    .toast-notification.info {
        border-left: 4px solid var(--gold);
    }

    /* ================================================================
    GIFT CARDS SECTION - LUXURY STYLES
    ================================================================ */
    .gifts-cards-section {
        padding: 80px 0;
        background: var(--gray-100);
    }

    .gift-cards-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        max-width: 1100px;
        margin: 0 auto 48px;
    }

    .gift-card-preview {
        position: relative;
        padding: 20px;
        border-bottom: 1px solid var(--gray-200);
        transition: all 0.3s ease;
    }

    .gift-card-design {
        background: linear-gradient(135deg, #1a2332, #2c3e50);
        border-radius: 12px;
        padding: 28px 24px;
        color: var(--white);
        position: relative;
        overflow: hidden;
        min-height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .gift-card-design::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -30%;
        width: 80%;
        height: 200%;
        background: linear-gradient(135deg, rgba(201, 169, 110, 0.05), rgba(201, 169, 110, 0.15));
        transform: rotate(25deg);
    }

    .gift-card-design .gift-card-brand {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        position: relative;
        z-index: 1;
    }

    .gift-card-design .gift-card-logo {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .gift-card-design .gift-card-logo span {
        color: var(--gold);
    }

    .gift-card-design .gift-card-tag {
        font-size: 0.55rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 2px;
        padding: 2px 12px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 60px;
        color: rgba(255, 255, 255, 0.7);
    }

    .gift-card-design .gift-card-amount {
        position: relative;
        z-index: 1;
        margin: 12px 0;
    }

    .gift-card-design .gift-card-amount .currency {
        font-size: 0.8rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.5);
        margin-right: 4px;
    }

    .gift-card-design .gift-card-amount .amount {
        font-family: var(--font-serif);
        font-size: 2.8rem;
        font-weight: 600;
        color: var(--white);
    }

    .gift-card-design .gift-card-message {
        position: relative;
        z-index: 1;
    }

    .gift-card-design .gift-card-message span {
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.5);
        font-style: italic;
        font-family: var(--font-serif);
    }

    .gift-card-design .gift-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        position: relative;
        z-index: 1;
    }

    .gift-card-design .gift-card-footer .gift-card-type {
        font-size: 0.55rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: rgba(255, 255, 255, 0.4);
    }

    .gift-card-design .gift-card-footer .gift-card-code {
        font-family: monospace;
        font-size: 0.65rem;
        letter-spacing: 2px;
        color: rgba(255, 255, 255, 0.2);
    }

    .gift-card-design.premium {
        background: linear-gradient(135deg, #1a1a1a, #2c2c2c);
    }

    .gift-card-design.premium::before {
        background: linear-gradient(135deg, rgba(201, 169, 110, 0.1), rgba(201, 169, 110, 0.25));
    }

    .gift-card-design.premium .gift-card-tag {
        background: var(--gold);
        color: var(--navy);
        border-color: var(--gold);
    }

    .gift-card-design.custom {
        background: linear-gradient(135deg, #2c1810, #3d2317);
    }

    .gift-card-design.custom::before {
        background: linear-gradient(135deg, rgba(201, 169, 110, 0.08), rgba(201, 169, 110, 0.2));
    }

    .gift-card-overlay {
        position: absolute;
        inset: 0;
        background: rgba(38, 36, 57, 0.6);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all 0.4s ease;
        border-radius: 12px;
    }

    .gift-card-item:hover .gift-card-overlay {
        opacity: 1;
    }

    .gift-card-overlay .gift-card-select {
        padding: 10px 28px;
        border-radius: 60px;
        background: var(--gold);
        color: var(--navy);
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        gap: 8px;
        transform: scale(0.9);
        transition: all 0.4s ease;
    }

    .gift-card-item:hover .gift-card-overlay .gift-card-select {
        transform: scale(1);
    }

    .gift-card-info {
        padding: 20px 24px 24px;
        text-align: center;
    }

    .gift-card-info h4 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .gift-card-info .gift-card-price {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--gold);
        margin-bottom: 4px;
    }

    .gift-card-info .gift-card-desc {
        font-size: 0.85rem;
        color: var(--gray-600);
        margin-bottom: 14px;
    }

    .gift-card-info .btn-gift-card {
        width: 100%;
        padding: 10px 20px;
        border-radius: 60px;
        border: 1.5px solid var(--gold);
        background: transparent;
        color: var(--gold);
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .gift-card-info .btn-gift-card:hover {
        background: var(--gold);
        color: var(--white);
    }

    
    /* ================================================================
    MENSWEAR FILTER WRAPPER
    ================================================================ */
    .menswear-filter-wrapper,
    .womenswear-filter-wrapper,
    .kids-filter-wrapper {
        position: sticky;
        top: calc(var(--topbar-height) + var(--navbar-height));
        z-index: 90;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(217, 204, 188, 0.15);
        padding: 10px 0;
        transition: all 0.3s ease;
        box-shadow: 0 2px 20px rgba(38, 36, 57, 0.04);
    }

    .menswear-filter-wrapper.scrolled,
    .womenswear-filter-wrapper.scrolled,
    .kids-filter-wrapper.scrolled {
        box-shadow: 0 4px 30px rgba(38, 36, 57, 0.08);
        background: rgba(255, 255, 255, 0.98);
    }

    .menswear-filter-wrapper .container,
    .womenswear-filter-wrapper .container,
    .kids-filter-wrapper .container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 24px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .menswear-filter-wrapper .container::-webkit-scrollbar,
    .womenswear-filter-wrapper .container::-webkit-scrollbar,
    .kids-filter-wrapper .container::-webkit-scrollbar {
        display: none;
    }

    .menswear-filter-wrapper .filter-label,
    .womenswear-filter-wrapper .filter-label,
    .kids-filter-wrapper .filter-label {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 500;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gray-600);
        margin-right: 8px;
        opacity: 0.6;
        flex-shrink: 0;
    }

    .menswear-filter-wrapper .filter-divider,
    .womenswear-filter-wrapper .filter-divider,
    .kids-filter-wrapper .filter-divider {
        width: 1px;
        height: 20px;
        background: var(--gray-300);
        opacity: 0.3;
        margin: 0 4px;
        flex-shrink: 0;
    }

    .menswear-filter-btn,
    .womenswear-filter-btn,
    .kids-filter-btn {
        padding: 6px 16px;
        border-radius: 60px;
        border: 1.5px solid transparent;
        background: transparent;
        color: var(--gray-600);
        font-family: var(--font-sans);
        font-size: 0.65rem;
        font-weight: 500;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .menswear-filter-btn:hover,
    .womenswear-filter-btn:hover,
    .kids-filter-btn:hover {
        color: var(--navy);
        border-color: var(--gray-300);
        transform: translateY(-1px);
    }

    .menswear-filter-btn.active,
    .womenswear-filter-btn.active,
    .kids-filter-btn.active {
        background: var(--navy);
        color: var(--white);
        border-color: var(--navy);
        box-shadow: 0 4px 16px rgba(38, 36, 57, 0.12);
    }

    .menswear-filter-btn.active:hover,
    .womenswear-filter-btn.active:hover,
    .kids-filter-btn.active:hover {
        background: #35324f;
        transform: translateY(-1px);
    }

    .menswear-filter-btn .filter-count,
    .womenswear-filter-btn .filter-count,
    .kids-filter-btn .filter-count {
        display: inline-block;
        font-size: 0.5rem;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.2);
        padding: 0 6px;
        border-radius: 60px;
        margin-left: 4px;
        min-width: 16px;
        text-align: center;
    }

    .menswear-filter-btn.active .filter-count,
    .womenswear-filter-btn.active .filter-count,
    .kids-filter-btn.active .filter-count {
        background: rgba(255, 255, 255, 0.2);
        color: var(--white);
    }

    .menswear-filter-wrapper .progress-container,
    .womenswear-filter-wrapper .progress-container,
    .kids-filter-wrapper .progress-container {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: rgba(217, 204, 188, 0.15);
        overflow: hidden;
    }

    .menswear-filter-wrapper .progress-line,
    .womenswear-filter-wrapper .progress-line,
    .kids-filter-wrapper .progress-line {
        height: 100%;
        width: 0%;
        background: var(--gold);
        transition: width 0.15s ease;
    }

    /* ================================================================
    GROOM FILTER WRAPPER
    ================================================================ */
    .groom-filter-wrapper {
        position: sticky;
        top: calc(var(--topbar-height) + var(--navbar-height));
        z-index: 90;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(217, 204, 188, 0.15);
        padding: 10px 0;
        transition: all 0.3s ease;
        box-shadow: 0 2px 20px rgba(38, 36, 57, 0.04);
    }

    .groom-filter-wrapper.scrolled {
        box-shadow: 0 4px 30px rgba(38, 36, 57, 0.08);
        background: rgba(255, 255, 255, 0.98);
    }

    .groom-filter-wrapper .container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 24px;
        flex-wrap: wrap;
    }

    .groom-filter-wrapper .filter-label {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 500;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gray-600);
        margin-right: 8px;
        opacity: 0.6;
        flex-shrink: 0;
    }

    .groom-filter-wrapper .filter-divider {
        width: 1px;
        height: 20px;
        background: var(--gray-300);
        opacity: 0.3;
        margin: 0 4px;
        flex-shrink: 0;
    }

    .groom-filter-btn {
        padding: 8px 24px;
        border-radius: 60px;
        border: 1.5px solid transparent;
        background: transparent;
        color: var(--gray-600);
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .groom-filter-btn:hover {
        color: var(--navy);
        border-color: var(--gray-300);
        transform: translateY(-1px);
    }

    .groom-filter-btn.active {
        background: var(--navy);
        color: var(--white);
        border-color: var(--navy);
        box-shadow: 0 4px 16px rgba(38, 36, 57, 0.12);
    }

    .groom-filter-btn.active:hover {
        background: #35324f;
        transform: translateY(-1px);
    }

    .groom-filter-btn .filter-icon {
        margin-right: 8px;
        font-size: 0.8rem;
    }

    .groom-filter-btn .filter-count {
        display: inline-block;
        font-size: 0.55rem;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.2);
        padding: 0 8px;
        border-radius: 60px;
        margin-left: 6px;
        min-width: 18px;
        text-align: center;
    }

    .groom-filter-btn.active .filter-count {
        background: rgba(255, 255, 255, 0.2);
        color: var(--white);
    }

    .groom-filter-wrapper .progress-container {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: rgba(217, 204, 188, 0.15);
        overflow: hidden;
    }

    .groom-filter-wrapper .progress-line {
        height: 100%;
        width: 0%;
        background: var(--gold);
        transition: width 0.15s ease;
    }

    /* ================================================================
    LOOKBOOK NAV WRAPPER - UNIFIED SYSTEM
    ================================================================ */
    .lookbook-nav-wrapper {
        position: sticky;
        top: calc(var(--topbar-height) + var(--navbar-height));
        z-index: 90;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(217, 204, 188, 0.15);
        transition: all 0.3s ease;
        box-shadow: 0 2px 20px rgba(38, 36, 57, 0.04);
    }

    .lookbook-nav-wrapper.scrolled {
        box-shadow: 0 4px 30px rgba(38, 36, 57, 0.08);
        background: rgba(255, 255, 255, 0.98);
    }

    .lookbook-nav-primary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 24px;
        background: transparent;
        border-bottom: 1px solid rgba(217, 204, 188, 0.08);
        transition: all 0.4s ease;
        position: relative;
    }

    .lookbook-nav-primary .nav-label {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 500;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gray-600);
        margin-right: 8px;
        opacity: 0.6;
        flex-shrink: 0;
    }

    .lookbook-nav-primary .nav-divider {
        width: 1px;
        height: 20px;
        background: var(--gray-300);
        opacity: 0.3;
        margin: 0 4px;
        flex-shrink: 0;
    }

    .lookbook-nav-secondary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 24px;
        background: rgba(255, 255, 255, 0.6);
        border-top: 1px solid rgba(217, 204, 188, 0.05);
        transition: all 0.4s ease;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .lookbook-nav-secondary::-webkit-scrollbar {
        display: none;
    }

    .lookbook-nav-primary .gender-filter-btn {
        padding: 6px 20px;
        border-radius: 60px;
        border: 1.5px solid transparent;
        background: transparent;
        color: var(--gray-600);
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .lookbook-nav-secondary .category-filter-btn {
        padding: 4px 16px;
        border-radius: 60px;
        border: 1px solid transparent;
        background: transparent;
        color: var(--gray-600);
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .lookbook-nav-primary .gender-filter-btn .filter-icon {
        margin-right: 6px;
        font-size: 0.7rem;
    }

    .lookbook-nav-primary .gender-filter-btn .filter-count {
        display: inline-block;
        font-size: 0.55rem;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.2);
        padding: 0 8px;
        border-radius: 60px;
        margin-left: 4px;
        min-width: 18px;
        text-align: center;
    }

    .lookbook-nav-primary .gender-filter-btn.active .filter-count {
        background: rgba(255, 255, 255, 0.2);
        color: var(--white);
    }

    .lookbook-nav-secondary .category-filter-btn .count-badge {
        display: inline-block;
        font-size: 0.5rem;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.2);
        padding: 0 6px;
        border-radius: 60px;
        margin-left: 4px;
    }

    .lookbook-nav-secondary .category-filter-btn.active .count-badge {
        background: rgba(255, 255, 255, 0.2);
    }

    .lookbook-nav-wrapper.primary-hidden .lookbook-nav-primary {
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        background: transparent;
        border-bottom: none;
        padding: 0;
        margin: 0;
        height: 0;
        overflow: hidden;
    }

    .lookbook-nav-wrapper.primary-hidden .lookbook-nav-secondary {
        padding-top: 10px;
        padding-bottom: 10px;
        background: rgba(255, 255, 255, 0.98);
        border-bottom: 1px solid rgba(217, 204, 188, 0.1);
    }

    .lookbook-nav-wrapper .progress-container {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: rgba(217, 204, 188, 0.15);
        overflow: hidden;
    }

    .lookbook-nav-wrapper .progress-line {
        height: 100%;
        width: 0%;
        background: var(--gold);
        transition: width 0.15s ease;
    }

    .lookbook-nav-wrapper .progress-line.visible {
        box-shadow: 0 0 20px rgba(201, 169, 110, 0.3);
    }

    /* OZHEA WEEK NAV WRAPPER */
    .ozhea-week-nav-wrapper {
        position: sticky;
        top: calc(var(--topbar-height) + var(--navbar-height));
        z-index: 90;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(217, 204, 188, 0.15);
        transition: all 0.3s ease;
        box-shadow: 0 2px 20px rgba(38, 36, 57, 0.04);
    }

    .ozhea-week-nav-wrapper.scrolled {
        box-shadow: 0 4px 30px rgba(38, 36, 57, 0.08);
        background: rgba(255, 255, 255, 0.98);
    }

    .ozhea-week-nav-primary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 24px;
        background: transparent;
        border-bottom: 1px solid rgba(217, 204, 188, 0.08);
        transition: all 0.4s ease;
        position: relative;
    }

    .ozhea-week-nav-secondary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 24px;
        background: rgba(255, 255, 255, 0.6);
        border-top: 1px solid rgba(217, 204, 188, 0.05);
        transition: all 0.4s ease;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ozhea-week-nav-secondary::-webkit-scrollbar {
        display: none;
    }

    .ozhea-week-nav-wrapper.primary-hidden .ozhea-week-nav-primary {
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        background: transparent;
        border-bottom: none;
        padding: 0;
        margin: 0;
        height: 0;
        overflow: hidden;
    }

    .ozhea-week-nav-wrapper.primary-hidden .ozhea-week-nav-secondary {
        padding-top: 10px;
        padding-bottom: 10px;
        background: rgba(255, 255, 255, 0.98);
        border-bottom: 1px solid rgba(217, 204, 188, 0.1);
    }

    .ozhea-week-nav-wrapper .progress-container {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: rgba(217, 204, 188, 0.15);
        overflow: hidden;
    }

    .ozhea-week-nav-wrapper .progress-line {
        height: 100%;
        width: 0%;
        background: var(--gold);
        transition: width 0.15s ease;
    }

    /* ================================================================
    LOOKBOOK PRODUCTS GRID
    ================================================================ */
    .lookbook-products-section {
        padding: 40px 0 60px;
        background: var(--white);
    }

    .lookbook-products-section .section-header {
        margin-bottom: 32px;
    }

    .lookbook-products-section .section-header .section-title {
        font-size: 2rem;
    }

    .lookbook-products-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 24px;
        padding: 0 20px;
        max-width: 1240px;
        margin: 0 auto;
    }

    .lookbook-product-card {
        background: var(--white);
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--gray-200);
        transition: all 0.5s ease;
        cursor: pointer;
        position: relative;
        opacity: 0;
        transform: translateY(30px);
        animation: cardReveal 0.6s ease forwards;
    }

    .lookbook-product-card:nth-child(1) {
        animation-delay: 0.03s;
    }
    .lookbook-product-card:nth-child(2) {
        animation-delay: 0.06s;
    }
    .lookbook-product-card:nth-child(3) {
        animation-delay: 0.09s;
    }
    .lookbook-product-card:nth-child(4) {
        animation-delay: 0.12s;
    }
    .lookbook-product-card:nth-child(5) {
        animation-delay: 0.15s;
    }
    .lookbook-product-card:nth-child(6) {
        animation-delay: 0.18s;
    }
    .lookbook-product-card:nth-child(7) {
        animation-delay: 0.21s;
    }
    .lookbook-product-card:nth-child(8) {
        animation-delay: 0.24s;
    }

    .lookbook-product-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 48px rgba(38, 36, 57, 0.10);
        border-color: var(--gold);
    }

    .lookbook-product-card .product-image-wrap {
        position: relative;
        aspect-ratio: 3/4;
        overflow: hidden;
        background: var(--gray-100);
    }

    .lookbook-product-card .product-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s ease;
    }

    .lookbook-product-card:hover .product-image-wrap img {
        transform: scale(1.05);
    }

    .lookbook-product-card .product-gender-tag {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 2;
        padding: 3px 12px;
        border-radius: 60px;
        font-size: 0.5rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        background: rgba(38, 36, 57, 0.7);
        backdrop-filter: blur(4px);
        color: var(--white);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .lookbook-product-card .product-gender-tag.men {
        background: rgba(26, 35, 50, 0.8);
    }

    .lookbook-product-card .product-gender-tag.women {
        background: rgba(128, 0, 32, 0.8);
    }

    .lookbook-product-card .product-gender-tag.kids {
        background: rgba(46, 204, 113, 0.8);
    }

    .lookbook-product-card .product-gender-tag.unisex {
        background: rgba(201, 169, 110, 0.8);
    }

    .lookbook-product-card .product-wishlist {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 2;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(4px);
        border: none;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-600);
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    .lookbook-product-card .product-wishlist:hover {
        transform: scale(1.1);
        color: #e74c3c;
    }

    .lookbook-product-card .product-wishlist.active {
        color: #e74c3c;
    }

    .lookbook-product-card .product-badge {
        position: absolute;
        top: 12px;
        left: 76px;
        z-index: 2;
        padding: 3px 12px;
        border-radius: 60px;
        font-size: 0.5rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        background: var(--gold);
        color: var(--white);
    }

    .lookbook-product-card .product-badge.best {
        background: #18794e;
    }

    .lookbook-product-card .product-info {
        padding: 16px 18px 18px;
    }

    .lookbook-product-card .product-name {
        font-family: var(--font-serif);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 2px;
        transition: color 0.3s ease;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .lookbook-product-card:hover .product-name {
        color: var(--gold);
    }

    .lookbook-product-card .product-category {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gray-600);
        margin-bottom: 4px;
    }

    .lookbook-product-card .product-price {
        font-family: var(--font-sans);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--gold);
    }

    .lookbook-product-card .add-to-cart-btn {
        margin-top: 12px;
        padding: 8px 16px;
        border-radius: 60px;
        border: 1.5px solid var(--gold);
        background: transparent;
        color: var(--gold);
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.4s ease;
    }

    .lookbook-product-card:hover .add-to-cart-btn {
        opacity: 1;
        transform: translateY(0);
    }

    .lookbook-product-card .add-to-cart-btn:hover {
        background: var(--gold);
        color: var(--white);
    }

    .lookbook-empty-state {
        grid-column: 1/-1;
        text-align: center;
        padding: 60px 20px;
        color: var(--gray-600);
    }

    .lookbook-empty-state i {
        font-size: 3rem;
        color: var(--gray-300);
        display: block;
        margin-bottom: 16px;
    }

    .lookbook-empty-state h3 {
        font-family: var(--font-serif);
        font-size: 1.4rem;
        color: var(--navy);
        margin-bottom: 8px;
    }

    /* ================================================================
    LOOKBOOK HERO SECTION - Shared by all lookbook pages
    ================================================================ */
    .lookbook-hero-section {
        position: relative;
        width: 100%;
        height: 70vh;
        min-height: 500px;
        max-height: 800px;
        overflow: hidden;
        background: var(--navy);
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .lookbook-hero-section .hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .lookbook-hero-section .hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: heroZoom 25s ease-in-out infinite alternate;
    }

    .lookbook-hero-section .hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.10) 0%, rgba(38, 36, 57, 0.35) 40%, rgba(38, 36, 57, 0.55) 70%, rgba(38, 36, 57, 0.75) 100%);
        z-index: 1;
    }

    .lookbook-hero-section .hero-content {
        position: relative;
        z-index: 2;
        max-width: 820px;
        padding: 0 40px;
        color: var(--white);
    }

    .lookbook-hero-section .hero-badge {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 6px;
        text-transform: uppercase;
        color: var(--gold);
        display: inline-block;
        padding: 4px 20px;
        border: 1px solid rgba(201, 169, 110, 0.25);
        border-radius: 60px;
        backdrop-filter: blur(8px);
        margin-bottom: 16px;
    }

    .lookbook-hero-section h1 {
        font-family: var(--font-serif);
        font-size: 4.2rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
        letter-spacing: -0.5px;
        line-height: 1.05;
        margin-bottom: 8px;
    }

    .lookbook-hero-section h1 span {
        color: var(--gold);
        font-weight: 600;
    }

    .lookbook-hero-section .hero-subtitle {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
        text-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
        margin-bottom: 24px;
    }

    .lookbook-hero-section .hero-divider {
        width: 60px;
        height: 2px;
        background: var(--gold);
        margin: 0 auto 24px;
    }

    .hero-gender-filters {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero-gender-filters .gender-filter-btn {
        padding: 14px 40px;
        border-radius: 60px;
        border: 1.5px solid rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(8px);
        color: rgba(255, 255, 255, 0.7);
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 3px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.4s ease;
    }

    .hero-gender-filters .gender-filter-btn:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.4);
        transform: translateY(-2px);
    }

    .hero-gender-filters .gender-filter-btn.active {
        background: var(--gold);
        color: var(--navy);
        border-color: var(--gold);
        box-shadow: 0 8px 32px rgba(201, 169, 110, 0.2);
    }

    .hero-gender-filters .gender-filter-btn i {
        margin-right: 8px;
        font-size: 0.8rem;
    }

    /* ================================================================
    CART DRAWER
    ================================================================ */
    .cart-drawer {
        position: fixed;
        top: 0;
        right: -100%;
        width: 420px;
        max-width: 90vw;
        height: 100%;
        background: var(--white);
        z-index: 3000;
        box-shadow: var(--shadow-hover);
        transition: right 0.35s ease;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .cart-drawer.open {
        right: 0;
    }

    .cart-drawer .cart-header {
        padding: 20px 24px;
        border-bottom: 1px solid var(--gray-200);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--gray-100);
    }

    .cart-drawer .cart-header h3 {
        font-family: var(--font-serif);
        font-size: 1.4rem;
        font-weight: 600;
    }

    .cart-drawer .cart-header .close-cart {
        background: none;
        border: none;
        font-size: 1.6rem;
        color: var(--gray-600);
        cursor: pointer;
        transition: var(--transition);
    }

    .cart-drawer .cart-header .close-cart:hover {
        color: var(--navy);
        transform: rotate(90deg);
    }

    .cart-drawer .cart-header .clear-cart-btn {
        background: none;
        border: none;
        color: var(--gray-600);
        font-size: 0.8rem;
        cursor: pointer;
        transition: var(--transition);
        padding: 4px 8px;
        border-radius: 4px;
    }

    .cart-drawer .cart-header .clear-cart-btn:hover {
        color: #e74c3c;
        background: rgba(231, 76, 60, 0.1);
    }

    .cart-drawer .cart-items {
        flex: 1;
        overflow-y: auto;
        padding: 16px 20px;
    }

    .cart-drawer .cart-items .empty-cart {
        text-align: center;
        padding: 40px 0;
        color: var(--gray-600);
    }

    .cart-drawer .cart-items .empty-cart i {
        font-size: 3rem;
        color: var(--gray-300);
        display: block;
        margin-bottom: 12px;
    }

    .cart-item {
        display: flex;
        gap: 16px;
        padding: 12px 0;
        border-bottom: 1px solid var(--gray-100);
        align-items: center;
    }

    .cart-item .item-img {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        background-size: cover;
        background-position: center;
        flex-shrink: 0;
        background-color: var(--gray-100);
    }

    .cart-item .item-info {
        flex: 1;
    }

    .cart-item .item-info .item-name {
        font-weight: 600;
        font-size: 0.9rem;
    }

    .cart-item .item-info .item-price {
        color: var(--gold);
        font-weight: 500;
        font-size: 0.85rem;
    }

    .cart-item .item-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .cart-item .item-actions button {
        background: var(--gray-100);
        border: none;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
        font-size: 0.85rem;
    }

    .cart-item .item-actions button:hover {
        background: var(--gray-300);
    }

    .cart-item .item-actions .qty {
        min-width: 24px;
        text-align: center;
        font-weight: 600;
    }

    .cart-item .item-actions .remove-item {
        background: none;
        color: var(--gray-600);
        width: auto;
        border-radius: 4px;
        padding: 0 6px;
        font-size: 0.8rem;
    }

    .cart-item .item-actions .remove-item:hover {
        color: #e74c3c;
        background: none;
    }

    .cart-drawer .cart-footer {
        padding: 16px 24px 24px;
        border-top: 1px solid var(--gray-200);
        background: var(--gray-100);
    }

    .cart-drawer .cart-footer .cart-total {
        display: flex;
        justify-content: space-between;
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .cart-drawer .cart-footer .cart-total .total-price {
        color: var(--gold);
    }

    .cart-drawer .cart-footer .cart-summary {
        font-size: 0.8rem;
        color: var(--gray-600);
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
    }

    .cart-drawer .cart-footer .btn {
        width: 100%;
        justify-content: center;
    }

    .cart-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 2999;
        display: none;
    }

    .cart-overlay.open {
        display: block;
    }

    /* ================================================================
    ORDER SUCCESS
    ================================================================ */
    .order-success {
        text-align: center;
        padding: 60px 0;
    }

    .order-success .success-icon {
        font-size: 4rem;
        color: #2ecc71;
        background: rgba(46, 204, 113, 0.12);
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
    }

    .order-success h2 {
        font-family: var(--font-serif);
        font-size: 2.4rem;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .order-success h2 span {
        color: var(--gold);
    }

    .order-success .order-number {
        font-size: 1.2rem;
        color: var(--gold);
        font-weight: 600;
        margin-bottom: 8px;
    }

    .order-success .order-details {
        background: var(--gray-100);
        border-radius: var(--radius);
        padding: 24px;
        max-width: 500px;
        margin: 20px auto;
        text-align: left;
    }

    .order-success .order-details .detail-row {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        border-bottom: 1px solid var(--gray-200);
        font-size: 0.9rem;
    }

    .order-success .order-details .detail-row:last-child {
        border-bottom: none;
    }

    .order-success .order-details .detail-row .label {
        color: var(--gray-600);
    }

    .order-success .order-details .detail-row .value {
        font-weight: 500;
    }

    /* ================================================================
    CHECKOUT
    ================================================================ */
    .checkout-wrapper {
        padding: 40px 0 60px;
    }

    .checkout-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }

    .checkout-grid .order-summary {
        background: var(--gray-100);
        padding: 28px 32px;
        border-radius: var(--radius);
    }

    .checkout-grid .order-summary h3 {
        font-family: var(--font-serif);
        font-size: 1.4rem;
        margin-bottom: 16px;
    }

    .checkout-grid .order-summary .summary-item {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid var(--gray-200);
        font-size: 0.9rem;
    }

    .checkout-grid .order-summary .summary-item:last-child {
        border-bottom: none;
    }

    .checkout-grid .order-summary .summary-total {
        display: flex;
        justify-content: space-between;
        font-weight: 700;
        font-size: 1.2rem;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 2px solid var(--gray-300);
    }

    .checkout-grid .order-summary .summary-total .total-price {
        color: var(--gold);
    }

    .checkout-grid .order-summary .measurements-note {
        margin-top: 16px;
        padding: 12px 16px;
        background: var(--cream-light);
        border-radius: 8px;
        font-size: 0.8rem;
        border-left: 3px solid var(--gold);
    }

    .checkout-grid .checkout-form {
        background: var(--white);
        padding: 28px 32px;
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
    }

    .checkout-grid .checkout-form h3 {
        font-family: var(--font-serif);
        font-size: 1.4rem;
        margin-bottom: 16px;
    }

    .checkout-grid .checkout-form label {
        font-weight: 500;
        font-size: 0.85rem;
        display: block;
        margin-bottom: 4px;
        color: var(--gray-800);
    }

    .checkout-grid .checkout-form input,
    .checkout-grid .checkout-form select {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        font-family: var(--font-sans);
        font-size: 0.9rem;
        transition: var(--transition);
        margin-bottom: 16px;
        background: var(--white);
    }

    .checkout-grid .checkout-form input:focus,
    .checkout-grid .checkout-form select:focus {
        outline: none;
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.2);
    }

    .checkout-grid .checkout-form .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .checkout-grid .checkout-form .measurement-confirm {
        background: var(--cream-light);
        padding: 12px 16px;
        border-radius: 8px;
        margin: 12px 0;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .checkout-grid .checkout-form .measurement-confirm input {
        width: auto;
        margin: 0;
    }

    
    /* ================================================================
    ASK OZHEA CHAT
    ================================================================ */
    #askChatMessages {
        scroll-behavior: smooth;
    }

    #askChatMessages::-webkit-scrollbar {
        width: 6px;
    }

    #askChatMessages::-webkit-scrollbar-track {
        background: var(--gray-100);
    }

    #askChatMessages::-webkit-scrollbar-thumb {
        background: var(--gold);
        border-radius: 3px;
    }

    .ask-chat-message {
        animation: fadeIn 0.4s ease;
    }

    .quick-question {
        transition: all 0.3s ease;
    }

    .quick-question:hover {
        border-color: var(--gold) !important;
        color: var(--gold) !important;
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

    .typing-indicator {
        display: inline-flex;
        gap: 4px;
        padding: 4px 0;
    }

    .typing-indicator span {
        width: 8px;
        height: 8px;
        background: var(--gray-400);
        border-radius: 50%;
        animation: typingBounce 1.4s infinite ease-in-out;
    }

    .typing-indicator span:nth-child(2) {
        animation-delay: 0.2s;
    }

    .typing-indicator span:nth-child(3) {
        animation-delay: 0.4s;
    }

    @keyframes typingBounce {
        0%, 60%, 100% {
            transform: translateY(0);
            opacity: 0.4;
        }
        30% {
            transform: translateY(-6px);
            opacity: 1;
        }
    }

    /* ================================================================ */
    /* DESIGN YOUR SUIT - ENHANCED STYLES                            */
    /* ================================================================ */

    /* ================================================================ */
    /* HERO SECTION                                                   */
    /* ================================================================ */

    .design-suit-hero-enhanced {
        position: relative;
        width: 100%;
        height: 80vh;
        min-height: 550px;
        max-height: 750px;
        overflow: hidden;
        background: var(--navy);
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
        display: flex;
        align-items: center;
    }

    .design-suit-hero-enhanced .hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .design-suit-hero-enhanced .hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .design-suit-hero-enhanced .hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(38, 36, 57, 0.10) 0%,
            rgba(38, 36, 57, 0.30) 40%,
            rgba(38, 36, 57, 0.55) 70%,
            rgba(38, 36, 57, 0.75) 100%
        );
        z-index: 1;
    }

    .design-suit-hero-enhanced .hero-content {
        position: relative;
        z-index: 2;
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 40px;
        width: 100%;
    }

    .design-suit-hero-enhanced .hero-badge {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--gold);
        display: inline-block;
        padding: 4px 20px;
        border: 1px solid rgba(201, 169, 110, 0.25);
        border-radius: 60px;
        backdrop-filter: blur(8px);
        margin-bottom: 12px;
    }

    .design-suit-hero-enhanced .hero-content h1 {
        font-family: var(--font-serif);
        font-size: 4.2rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
        letter-spacing: -0.5px;
        line-height: 1.08;
        margin-bottom: 8px;
    }

    .design-suit-hero-enhanced .hero-content h1 span {
        color: var(--gold);
        font-weight: 600;
    }

    .design-suit-hero-enhanced .hero-subtitle {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
        max-width: 560px;
        margin-bottom: 20px;
        text-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
    }

    .design-suit-hero-enhanced .hero-subtitle strong {
        color: var(--gold);
        font-style: normal;
    }

    .design-suit-hero-enhanced .hero-trust-badges {
        display: flex;
        gap: 24px;
        margin-bottom: 24px;
        flex-wrap: wrap;
    }

    .design-suit-hero-enhanced .hero-trust-badges span {
        font-family: var(--font-sans);
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.6);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .design-suit-hero-enhanced .hero-trust-badges span i {
        color: var(--gold);
        font-size: 0.8rem;
    }

    .design-suit-hero-enhanced .hero-scroll-indicator {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        z-index: 3;
        opacity: 0.5;
    }

    .design-suit-hero-enhanced .hero-scroll-indicator span {
        font-family: var(--font-sans);
        font-size: 0.5rem;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
    }

    .design-suit-hero-enhanced .hero-scroll-indicator .scroll-line {
        width: 1px;
        height: 30px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
        animation: scrollPulse 2s ease-in-out infinite;
    }

    @keyframes scrollPulse {
        0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
        50% { opacity: 1; transform: scaleY(1); }
    }

    /* ================================================================ */
    /* MAIN SECTION                                                   */
    /* ================================================================ */

    .design-suit-main-enhanced {
        padding: 60px 0 80px;
        background: var(--white);
    }

    .design-suit-grid-enhanced {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px;
        align-items: start;
    }

    /* ================================================================ */
    /* UPLOAD SECTION                                                 */
    /* ================================================================ */

    .upload-section-enhanced {
        background: var(--gray-100);
        border-radius: var(--radius);
        padding: 32px;
        border: 2px dashed var(--gray-300);
        transition: all 0.4s ease;
        min-height: 460px;
        display: flex;
        flex-direction: column;
    }

    .upload-section-enhanced.dragover {
        border-color: var(--gold);
        background: var(--cream-light);
    }

    .upload-header {
        margin-bottom: 20px;
    }

    .upload-header .upload-step {
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gold);
        display: block;
        margin-bottom: 2px;
    }

    .upload-header h3 {
        font-family: var(--font-serif);
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--navy);
        margin: 0;
    }

    .upload-header p {
        font-size: 0.8rem;
        color: var(--gray-600);
        margin: 2px 0 0;
    }

    .upload-placeholder {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 20px;
    }

    .upload-placeholder .upload-icon {
        font-size: 3.6rem;
        color: var(--gray-300);
        margin-bottom: 12px;
    }

    .upload-placeholder .upload-text {
        font-size: 1.05rem;
        font-weight: 500;
        color: var(--gray-700);
        margin-bottom: 4px;
    }

    .upload-placeholder .upload-subtext {
        font-size: 0.8rem;
        color: var(--gray-500);
        margin-bottom: 16px;
    }

    .upload-placeholder .upload-btn {
        padding: 10px 28px;
        border-radius: 60px;
        background: var(--gold);
        color: var(--white);
        border: none;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
        font-family: var(--font-sans);
        font-size: 0.85rem;
    }

    .upload-placeholder .upload-btn:hover {
        background: #b8965a;
        transform: translateY(-2px);
    }

    .upload-sample {
        margin-top: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .upload-sample span {
        font-size: 0.7rem;
        color: var(--gray-500);
    }

    .sample-btn {
        padding: 4px 14px;
        border-radius: 60px;
        border: 1px solid var(--gray-300);
        background: var(--white);
        font-size: 0.7rem;
        cursor: pointer;
        transition: var(--transition);
        font-family: var(--font-sans);
    }

    .sample-btn:hover {
        border-color: var(--gold);
        color: var(--gold);
    }

    /* Upload Preview */
    .upload-preview-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .upload-preview {
        width: 100%;
        max-width: 400px;
        max-height: 460px;
        object-fit: contain;
        border-radius: var(--radius);
        background: var(--white);
    }

    .upload-preview-actions {
        display: flex;
        gap: 8px;
        margin-top: 12px;
    }

    .upload-status {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        background: rgba(46, 204, 113, 0.08);
        border-radius: 8px;
        border: 1px solid rgba(46, 204, 113, 0.15);
        margin-top: 12px;
    }

    .upload-status .status-icon {
        color: #2ecc71;
        font-size: 1.1rem;
    }

    .upload-status .status-text {
        font-size: 0.8rem;
        color: var(--gray-600);
    }

    /* ================================================================ */
    /* SUIT SELECTOR                                                  */
    /* ================================================================ */

    .suit-selector-enhanced {
        background: var(--white);
        border-radius: var(--radius);
        padding: 32px;
        border: 1px solid var(--gray-200);
    }

    .suit-selector-header {
        margin-bottom: 20px;
    }

    .suit-selector-header .selector-step {
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gold);
        display: block;
        margin-bottom: 2px;
    }

    .suit-selector-header h3 {
        font-family: var(--font-serif);
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--navy);
        margin: 0;
    }

    .suit-selector-header p {
        font-size: 0.8rem;
        color: var(--gray-600);
        margin: 2px 0 0;
    }

    /* Attempt Counter */
    .attempt-counter-enhanced {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 16px;
        background: var(--gray-100);
        border-radius: var(--radius);
        margin-bottom: 20px;
        border: 1px solid var(--gray-200);
    }

    .attempt-counter-enhanced.exhausted {
        border-color: #e74c3c;
        background: rgba(231, 76, 60, 0.05);
    }

    .attempts-ring {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }

    .attempts-svg {
        width: 100%;
        height: 100%;
    }

    .attempts-info {
        flex: 1;
    }

    .attempts-info .attempts-label {
        display: block;
        font-size: 0.7rem;
        color: var(--gray-600);
    }

    .attempts-info .attempts-detail {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--navy);
    }

    .attempt-counter-enhanced.exhausted .attempts-detail {
        color: #e74c3c;
    }

    /* Style Selector */
    .style-selector-enhanced {
        margin-bottom: 16px;
    }

    .style-selector-enhanced label {
        font-weight: 500;
        font-size: 0.8rem;
        display: block;
        margin-bottom: 6px;
        color: var(--gray-800);
    }

    .style-options-enhanced {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
    }

    .style-option-enhanced {
        padding: 12px 8px;
        border-radius: var(--radius);
        border: 2px solid var(--gray-200);
        background: var(--white);
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
    }

    .style-option-enhanced:hover {
        border-color: var(--gray-300);
        transform: translateY(-2px);
    }

    .style-option-enhanced.active {
        border-color: var(--gold);
        background: var(--cream-light);
        box-shadow: 0 4px 16px rgba(201, 169, 110, 0.1);
    }

    .style-option-enhanced .style-preview {
        display: block;
        font-size: 1.6rem;
        margin-bottom: 2px;
    }

    .style-option-enhanced .style-name {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--navy);
    }

    .style-option-enhanced .style-desc {
        display: block;
        font-size: 0.6rem;
        color: var(--gray-600);
    }

    /* Color Selector */
    .color-selector-enhanced {
        margin-bottom: 16px;
    }

    .color-selector-enhanced label {
        font-weight: 500;
        font-size: 0.8rem;
        display: block;
        margin-bottom: 6px;
        color: var(--gray-800);
    }

    .color-options-enhanced {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
    }

    .color-option-enhanced {
        padding: 6px;
        border-radius: var(--radius);
        border: 2px solid var(--gray-200);
        background: var(--white);
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
    }

    .color-option-enhanced:hover {
        transform: translateY(-2px);
        border-color: var(--gray-300);
    }

    .color-option-enhanced.active {
        border-color: var(--gold);
        box-shadow: 0 4px 16px rgba(201, 169, 110, 0.15);
    }

    .color-option-enhanced .color-swatch {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        margin: 0 auto 3px;
        display: block;
        border: 1px solid rgba(0,0,0,0.05);
    }

    .color-option-enhanced .color-name {
        font-size: 0.55rem;
        color: var(--gray-600);
        display: block;
    }

    /* Selected Suit Preview */
    .selected-suit-preview {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        background: var(--cream-light);
        border-radius: 60px;
        margin-bottom: 16px;
        border: 1px solid rgba(201, 169, 110, 0.15);
        flex-wrap: wrap;
    }

    .selected-suit-preview .preview-label {
        font-size: 0.7rem;
        color: var(--gray-600);
    }

    .selected-suit-preview .preview-style {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--navy);
    }

    .selected-suit-preview .preview-divider {
        color: var(--gray-300);
    }

    .selected-suit-preview .preview-color {
        font-size: 0.8rem;
        color: var(--gray-600);
    }

    .selected-suit-preview .preview-swatch {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 1px solid rgba(0,0,0,0.05);
        display: inline-block;
    }

    /* Generate Button */
    .generate-btn-enhanced {
        width: 100%;
        padding: 16px;
        border-radius: 60px;
        background: var(--navy);
        color: var(--white);
        border: none;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: var(--transition);
        font-family: var(--font-sans);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .generate-btn-enhanced:hover:not(:disabled) {
        background: #35324f;
        transform: translateY(-2px);
        box-shadow: var(--shadow-hover);
    }

    .generate-btn-enhanced:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        transform: none;
    }

    .generate-btn-enhanced.loading .spinner {
        display: block;
    }

    .generate-btn-enhanced.loading .btn-text {
        display: none;
    }

    .generate-btn-enhanced .spinner {
        display: none;
        width: 20px;
        height: 20px;
        border: 2px solid rgba(255,255,255,0.3);
        border-top-color: var(--white);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    .generate-hint-enhanced {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 10px;
        font-size: 0.7rem;
        color: var(--gray-600);
        flex-wrap: wrap;
    }

    .generate-hint-enhanced .ai-badge-enhanced {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 10px;
        background: var(--cream-light);
        border-radius: 60px;
        font-size: 0.6rem;
        color: var(--navy);
        border: 1px solid rgba(201, 169, 110, 0.15);
    }

    .generate-hint-enhanced .ai-badge-enhanced i {
        color: var(--gold);
    }

    /* Terms */
    .suit-terms-enhanced {
        margin-top: 12px;
        font-size: 0.65rem;
        color: var(--gray-600);
        text-align: center;
    }

    .suit-terms-enhanced a {
        color: var(--gold);
        font-weight: 500;
        text-decoration: none;
        transition: var(--transition);
    }

    .suit-terms-enhanced a:hover {
        text-decoration: underline;
    }

    /* ================================================================ */
    /* RESULTS SECTION                                                */
    /* ================================================================ */

    .result-section-enhanced {
        padding: 60px 0 80px;
        background: var(--gray-100);
    }

    .result-header-enhanced {
        text-align: center;
        margin-bottom: 40px;
    }

    .result-header-enhanced .section-label {
        font-size: 0.7rem;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--gold);
        font-weight: 600;
    }

    .result-header-enhanced h2 {
        font-family: var(--font-serif);
        font-size: 2.6rem;
        font-weight: 500;
        margin-bottom: 4px;
    }

    .result-header-enhanced h2 span {
        color: var(--gold);
        font-weight: 600;
    }

    .result-header-enhanced p {
        color: var(--gray-600);
        font-size: 0.95rem;
    }

    .result-grid-enhanced {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-bottom: 32px;
    }

    .result-card-enhanced {
        border-radius: var(--radius);
        overflow: hidden;
        background: var(--white);
        border: 1px solid var(--gray-200);
        position: relative;
    }

    .result-card-enhanced .result-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px;
        background: var(--gray-100);
        border-bottom: 1px solid var(--gray-200);
    }

    .result-card-enhanced .result-badge {
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--gray-600);
    }

    .result-card-enhanced .result-badge.gold {
        color: var(--gold);
    }

    .result-card-enhanced .result-icon {
        color: var(--gray-400);
    }

    .result-card-enhanced .result-watermark-badge {
        font-size: 0.5rem;
        font-weight: 500;
        color: var(--gray-500);
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .result-card-enhanced img {
        width: 100%;
        height: auto;
        max-height: 500px;
        object-fit: contain;
        background: var(--white);
    }

    .result-card-enhanced.generated {
        border-color: var(--gold);
    }

    .result-suit-info {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: var(--gray-100);
        border-top: 1px solid var(--gray-200);
    }

    .result-suit-info .suit-style-label,
    .result-suit-info .suit-color-label {
        font-size: 0.6rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--gray-500);
    }

    .result-suit-info .suit-style-value,
    .result-suit-info .suit-color-value {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--navy);
    }

    .result-suit-info .suit-color-swatch {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid var(--gray-300);
        margin-left: auto;
    }

    /* ================================================================ */
    /* BEFORE/AFTER SLIDER                                            */
    /* ================================================================ */

    .result-slider-enhanced {
        margin-bottom: 32px;
        padding: 20px 24px;
        background: var(--white);
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
    }

    .slider-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

    .slider-header span {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--navy);
    }

    .slider-header .slider-hint {
        font-size: 0.65rem;
        color: var(--gray-600);
        font-weight: 400;
    }

    .slider-container {
        position: relative;
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        aspect-ratio: 16/10;
        overflow: hidden;
        border-radius: 8px;
        cursor: grab;
        user-select: none;
    }

    .slider-container:active {
        cursor: grabbing;
    }

    .slider-images {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .slider-images img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #sliderOriginal {
        z-index: 1;
    }

    #sliderGenerated {
        z-index: 2;
        clip-path: inset(0 50% 0 0);
    }

    .slider-handle {
        position: absolute;
        top: 0;
        left: 50%;
        width: 4px;
        height: 100%;
        background: var(--gold);
        z-index: 3;
        cursor: grab;
        transform: translateX(-50%);
    }

    .slider-handle:active {
        cursor: grabbing;
    }

    .slider-handle .slider-line {
        width: 100%;
        height: 100%;
        background: var(--gold);
    }

    .slider-handle .slider-circle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--gold);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        box-shadow: 0 4px 20px rgba(201, 169, 110, 0.3);
    }

    .slider-handle .slider-circle i {
        font-size: 0.9rem;
    }

    /* ================================================================ */
    /* RESULT ACTIONS                                                 */
    /* ================================================================ */

    .result-actions-enhanced {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .result-actions-enhanced .btn {
        padding: 12px 24px;
        font-size: 0.8rem;
        min-width: 140px;
        justify-content: center;
    }

    /* ================================================================ */
    /* RECOMMENDATIONS                                               */
    /* ================================================================ */

    .design-suit-recommendations {
        padding: 60px 0 80px;
        background: var(--white);
    }

    .recommendations-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        max-width: 900px;
        margin: 0 auto;
    }

    .recommendation-card {
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--gray-200);
        cursor: pointer;
        transition: all 0.4s ease;
        background: var(--white);
    }

    .recommendation-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .recommendation-card img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    .recommendation-card .rec-info {
        padding: 14px 16px 16px;
    }

    .recommendation-card .rec-info h4 {
        font-family: var(--font-serif);
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--navy);
        margin: 0 0 2px;
    }

    .recommendation-card .rec-info .rec-price {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--gold);
    }

    /* ================================================================ */
    /* CTA SECTION                                                   */
    /* ================================================================ */

    .design-suit-cta-enhanced {
        padding: 60px 0 80px;
        background: var(--navy);
        color: var(--white);
    }

    .cta-content-enhanced {
        text-align: center;
        max-width: 620px;
        margin: 0 auto;
    }

    .cta-content-enhanced .cta-badge {
        display: inline-block;
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 8px;
    }

    .cta-content-enhanced h2 {
        font-family: var(--font-serif);
        font-size: 2.6rem;
        font-weight: 500;
        margin-bottom: 8px;
    }

    .cta-content-enhanced h2 span {
        color: var(--gold);
        font-weight: 600;
    }

    .cta-content-enhanced p {
        font-size: 1rem;
        color: rgba(255,255,255,0.7);
        margin-bottom: 24px;
    }

    .cta-buttons-enhanced {
        display: flex;
        gap: 14px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .cta-buttons-enhanced .btn-gold {
        background: var(--gold);
        color: var(--navy);
    }

    .cta-buttons-enhanced .btn-gold:hover {
        background: #d4b47a;
        transform: translateY(-2px);
    }

    .cta-buttons-enhanced .btn-outline-light {
        border-color: rgba(255,255,255,0.3);
        color: var(--white);
    }

    .cta-buttons-enhanced .btn-outline-light:hover {
        background: rgba(255,255,255,0.1);
        border-color: var(--white);
    }

    .cta-features {
        display: flex;
        justify-content: center;
        gap: 32px;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid rgba(255,255,255,0.06);
        font-size: 0.8rem;
        color: rgba(255,255,255,0.5);
        flex-wrap: wrap;
    }

    .cta-features i {
        color: var(--gold);
        margin-right: 6px;
    }

    /* ================================================================ */
    /* LOADING OVERLAY                                               */
    /* ================================================================ */

    .loading-overlay-enhanced {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 5000;
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(12px);
        align-items: center;
        justify-content: center;
        animation: fadeIn 0.3s ease;
    }

    .loading-overlay-enhanced.open {
        display: flex;
    }

    .loader-content {
        text-align: center;
        max-width: 480px;
        padding: 20px;
    }

    .loader-spinner {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 4px solid var(--gray-200);
        border-top-color: var(--gold);
        animation: spin 0.9s linear infinite;
        margin: 0 auto 16px;
    }

    .loader-text {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .loader-subtext {
        font-size: 0.9rem;
        color: var(--gray-600);
        margin-bottom: 20px;
    }

    .loader-progress {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
    }

    .loader-progress-bar {
        flex: 1;
        height: 4px;
        background: var(--gray-200);
        border-radius: 4px;
        overflow: hidden;
    }

    .loader-progress-bar .progress-fill {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--gold), #b8965a);
        border-radius: 4px;
        transition: width 0.3s ease;
    }

    .loader-progress-text {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--gold);
        min-width: 40px;
    }

    .loader-steps {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin-bottom: 16px;
    }

    .loader-step {
        font-size: 0.7rem;
        padding: 4px 12px;
        border-radius: 60px;
        background: var(--gray-100);
        color: var(--gray-500);
        transition: all 0.3s ease;
    }

    .loader-step.active {
        background: var(--gold);
        color: var(--white);
    }

    .loader-step.done {
        background: rgba(46, 204, 113, 0.15);
        color: #2ecc71;
    }

    /* ================================================================ */
    /* UPGRADE MODAL                                                  */
    /* ================================================================ */

    .upgrade-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 6000;
        background: rgba(10,10,10,0.7);
        backdrop-filter: blur(16px);
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: modalFadeIn 0.3s ease;
    }

    .upgrade-modal.open {
        display: flex;
    }

    .upgrade-modal-content {
        background: var(--white);
        border-radius: var(--radius);
        max-width: 520px;
        width: 100%;
        padding: 40px 36px;
        position: relative;
        max-height: 90vh;
        overflow-y: auto;
        animation: modalScaleIn 0.3s ease;
    }

    .upgrade-modal-close {
        position: absolute;
        top: 16px;
        right: 18px;
        background: none;
        border: none;
        font-size: 1.2rem;
        color: var(--gray-600);
        cursor: pointer;
        transition: var(--transition);
    }

    .upgrade-modal-close:hover {
        color: var(--navy);
        transform: rotate(90deg);
    }

    .upgrade-modal-header {
        text-align: center;
        margin-bottom: 24px;
    }

    .upgrade-icon {
        font-size: 3rem;
        display: block;
        margin-bottom: 8px;
    }

    .upgrade-modal-header h2 {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .upgrade-modal-header h2 span {
        color: var(--gold);
    }

    .upgrade-modal-header p {
        color: var(--gray-600);
        font-size: 0.9rem;
    }

    .upgrade-pricing {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
    }

    .upgrade-option {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 14px 18px;
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
        transition: var(--transition);
        position: relative;
    }

    .upgrade-option:hover {
        border-color: var(--gold);
    }

    .upgrade-option.featured {
        border-color: var(--gold);
        background: var(--cream-light);
    }

    .upgrade-option .option-badge {
        position: absolute;
        top: -8px;
        right: 12px;
        font-size: 0.5rem;
        font-weight: 600;
        text-transform: uppercase;
        padding: 2px 12px;
        border-radius: 60px;
        background: var(--gold);
        color: var(--white);
    }

    .upgrade-option .option-label {
        flex: 1;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--navy);
    }

    .upgrade-option .option-price {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--gold);
    }

    .upgrade-option .option-save {
        font-size: 0.6rem;
        color: #2ecc71;
        font-weight: 600;
    }

    .upgrade-footer {
        text-align: center;
        font-size: 0.75rem;
        color: var(--gray-600);
    }

    .upgrade-footer a {
        color: var(--gold);
        font-weight: 500;
        text-decoration: none;
    }

    .upgrade-footer a:hover {
        text-decoration: underline;
    }

    /* ================================================================ */
    /* RESPONSIVE                                                    */
    /* ================================================================ */

    @media (max-width: 1024px) {
        .design-suit-grid-enhanced {
            grid-template-columns: 1fr;
            gap: 32px;
            max-width: 600px;
            margin: 0 auto;
        }

        .design-suit-hero-enhanced .hero-content h1 {
            font-size: 3.2rem;
        }

        .result-grid-enhanced {
            grid-template-columns: 1fr;
            max-width: 500px;
            margin: 0 auto 24px;
        }

        .recommendations-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 768px) {
        .design-suit-hero-enhanced {
            height: 70vh;
            min-height: 400px;
        }

        .design-suit-hero-enhanced .hero-content h1 {
            font-size: 2.4rem;
        }

        .design-suit-hero-enhanced .hero-content {
            padding: 0 24px;
        }

        .design-suit-hero-enhanced .hero-trust-badges {
            gap: 12px;
        }

        .design-suit-hero-enhanced .hero-trust-badges span {
            font-size: 0.6rem;
        }

        .style-options-enhanced {
            grid-template-columns: 1fr 1fr 1fr;
        }

        .color-options-enhanced {
            grid-template-columns: repeat(3, 1fr);
        }

        .result-actions-enhanced {
            flex-direction: column;
            align-items: center;
        }

        .result-actions-enhanced .btn {
            width: 100%;
            max-width: 300px;
        }

        .recommendations-grid {
            grid-template-columns: 1fr;
            max-width: 320px;
            margin: 0 auto;
        }

        .cta-buttons-enhanced {
            flex-direction: column;
            align-items: center;
        }

        .cta-buttons-enhanced .btn {
            width: 100%;
            max-width: 280px;
            justify-content: center;
        }

        .cta-features {
            gap: 12px;
            flex-direction: column;
            align-items: center;
        }

        .upgrade-pricing {
            gap: 8px;
        }

        .upgrade-option {
            flex-wrap: wrap;
            gap: 8px;
        }

        .slider-container {
            aspect-ratio: 4/3;
        }

        .result-card-enhanced img {
            max-height: 300px;
        }
    }

    @media (max-width: 480px) {
        .design-suit-hero-enhanced .hero-content h1 {
            font-size: 1.8rem;
        }

        .design-suit-hero-enhanced .hero-subtitle {
            font-size: 0.9rem;
        }

        .upload-section-enhanced {
            padding: 20px;
            min-height: 320px;
        }

        .suit-selector-enhanced {
            padding: 20px;
        }

        .style-options-enhanced {
            grid-template-columns: 1fr 1fr 1fr;
            gap: 4px;
        }

        .style-option-enhanced {
            padding: 8px 4px;
        }

        .style-option-enhanced .style-preview {
            font-size: 1.2rem;
        }

        .style-option-enhanced .style-name {
            font-size: 0.65rem;
        }

        .style-option-enhanced .style-desc {
            font-size: 0.5rem;
        }

        .color-options-enhanced {
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
        }

        .color-option-enhanced .color-swatch {
            width: 22px;
            height: 22px;
        }

        .color-option-enhanced .color-name {
            font-size: 0.5rem;
        }

        .result-header-enhanced h2 {
            font-size: 1.8rem;
        }

        .cta-content-enhanced h2 {
            font-size: 1.8rem;
        }

        .upgrade-modal-content {
            padding: 24px 16px;
        }

        .loader-steps {
            flex-direction: column;
            align-items: center;
        }
    }

    /* ================================================================ */
    /* ANIMATIONS                                                     */
    /* ================================================================ */

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes modalFadeIn {
        from { opacity: 0; backdrop-filter: blur(0px); }
        to { opacity: 1; backdrop-filter: blur(16px); }
    }

    @keyframes modalScaleIn {
        from { transform: scale(0.92); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }

    @keyframes slideUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .result-section-enhanced.show {
        animation: slideUp 0.6s ease;
    }

    /* ================================================================
    FOOTER
    ================================================================ */
    .footer-luxury {
        background: #262439;
        color: rgba(255, 255, 255, 0.85);
        padding: 72px 0 32px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        font-family: var(--font-sans);
    }

    .footer-luxury .container {
        max-width: 1340px;
        margin: 0 auto;
        padding: 0 40px;
    }

    .footer-luxury .footer-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 48px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        flex-wrap: wrap;
        gap: 32px;
    }

    .footer-luxury .footer-top .brand-section .brand {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 400;
        color: var(--white);
        letter-spacing: 6px;
        text-transform: uppercase;
    }

    .footer-luxury .footer-top .brand-section .brand span {
        color: var(--gold);
        font-weight: 300;
    }

    .footer-luxury .footer-top .brand-section .tagline {
        font-size: 0.7rem;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
        margin-top: 4px;
        font-weight: 300;
    }

    .footer-luxury .footer-top .newsletter-section {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .footer-luxury .footer-top .newsletter-section .news-label {
        font-size: 0.65rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
        font-weight: 400;
    }

    .footer-luxury .footer-top .newsletter-section .news-input-wrap {
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        transition: border-color 0.3s ease;
        padding-bottom: 2px;
    }

    .footer-luxury .footer-top .newsletter-section .news-input-wrap:hover,
    .footer-luxury .footer-top .newsletter-section .news-input-wrap:focus-within {
        border-color: var(--gold);
    }

    .footer-luxury .footer-top .newsletter-section .news-input-wrap input {
        background: transparent;
        border: none;
        padding: 8px 0 8px 0;
        color: var(--white);
        font-size: 0.8rem;
        font-family: var(--font-sans);
        width: 200px;
        outline: none;
    }

    .footer-luxury .footer-top .newsletter-section .news-input-wrap input::placeholder {
        color: rgba(255, 255, 255, 0.4);
        font-weight: 300;
    }

    .footer-luxury .footer-top .newsletter-section .news-input-wrap button {
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        padding: 8px 4px 8px 12px;
        transition: color 0.3s ease;
        font-size: 0.9rem;
    }

    .footer-luxury .footer-top .newsletter-section .news-input-wrap button:hover {
        color: var(--gold);
    }

    .footer-luxury .footer-top .social-section {
        display: flex;
        gap: 20px;
        align-items: center;
    }

    .footer-luxury .footer-top .social-section .social-label {
        font-size: 0.6rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
        font-weight: 300;
    }

    .footer-luxury .footer-top .social-section a {
        color: rgba(255, 255, 255, 0.4);
        transition: all 0.3s ease;
        font-size: 1.6rem;
    }

    .footer-luxury .footer-top .social-section a:hover {
        color: var(--gold);
        transform: translateY(-2px);
    }

    .footer-luxury .footer-grid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
        gap: 48px;
        padding: 48px 0 40px;
    }

    .footer-luxury .footer-grid .brand-info p {
        font-size: 0.85rem;
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.6);
        max-width: 320px;
        font-weight: 300;
        margin: 12px 0 20px;
    }

    .footer-luxury .footer-grid .brand-info .brand-logo {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 400;
        color: var(--white);
        letter-spacing: 6px;
        text-transform: uppercase;
    }

    .footer-luxury .footer-grid .brand-info .brand-logo span {
        color: var(--gold);
        font-weight: 300;
    }

    .footer-luxury .footer-grid .brand-info .brand-tagline {
        font-size: 0.7rem;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
        margin-top: 2px;
        font-weight: 300;
    }

    .footer-luxury .footer-grid .brand-info .contact-details {
        margin-top: 16px;
    }

    .footer-luxury .footer-grid .brand-info .contact-details p {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 300;
    }

    .footer-luxury .footer-grid .brand-info .contact-details p i {
        color: var(--gold);
        width: 18px;
        font-size: 0.8rem;
        opacity: 0.7;
    }

    .footer-luxury .footer-grid .footer-col h5 {
        color: var(--white);
        font-size: 0.65rem;
        font-weight: 500;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        margin-bottom: 20px;
        opacity: 0.7;
    }

    .footer-luxury .footer-grid .footer-col ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .footer-luxury .footer-grid .footer-col ul li a {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.5);
        transition: all 0.3s ease;
        font-weight: 300;
        display: inline-block;
        position: relative;
    }

    .footer-luxury .footer-grid .footer-col ul li a::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 1px;
        background: var(--gold);
        transition: width 0.3s ease;
    }

    .footer-luxury .footer-grid .footer-col ul li a:hover {
        color: var(--white);
    }

    .footer-luxury .footer-grid .footer-col ul li a:hover::after {
        width: 100%;
    }

    .footer-luxury .footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 28px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        flex-wrap: wrap;
        gap: 20px;
    }

    .footer-luxury .footer-bottom .copyright {
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.4);
        letter-spacing: 1px;
        font-weight: 300;
    }

    .footer-luxury .footer-bottom .copyright span {
        color: rgba(255, 255, 255, 0.6);
    }

    .footer-luxury .footer-bottom .legal-links {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
    }

    .footer-luxury .footer-bottom .legal-links a {
        font-size: 0.65rem;
        color: rgba(255, 255, 255, 0.35);
        letter-spacing: 1px;
        text-transform: uppercase;
        transition: color 0.3s ease;
        font-weight: 300;
    }

    .footer-luxury .footer-bottom .legal-links a:hover {
        color: var(--gold);
    }

    .footer-luxury .footer-bottom .payment-methods {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .footer-luxury .footer-bottom .payment-methods .payment-label {
        font-size: 0.6rem;
        color: rgba(255, 255, 255, 0.3);
        letter-spacing: 1.5px;
        text-transform: uppercase;
        font-weight: 300;
        margin-right: 4px;
    }

    .footer-luxury .footer-bottom .payment-methods .payment-icons {
        display: flex;
        gap: 12px;
        align-items: center;
        flex-wrap: wrap;
    }

    .footer-luxury .footer-bottom .payment-methods .payment-icons i {
        font-size: 1.6rem;
        color: rgba(255, 255, 255, 0.2);
        transition: all 0.4s ease;
        cursor: default;
        filter: grayscale(0.5);
    }

    .footer-luxury .footer-bottom .payment-methods .payment-icons i:hover {
        color: rgba(255, 255, 255, 0.6);
        transform: translateY(-3px) scale(1.1);
        filter: grayscale(0);
    }

    /* ================================================================
    RESPONSIVE - MOBILE FIRST
    ================================================================ */

    /* Mobile and tablet overrides are already included inline above,
    but here are the critical responsive adjustments */
    @media (max-width: 1024px) {
        .hero-slider .slide .slide-content h1 {
            font-size: 3.2rem;
        }
        .section-title {
            font-size: 2.4rem;
        }
        .page-hero .hero-content h1 {
            font-size: 2.8rem;
        }
        .dashboard-grid {
            grid-template-columns: 1fr;
        }
        .dashboard-sidebar {
            position: static;
            max-height: none;
            overflow-y: visible;
        }
        .mega-menu-full .inner,
        .gift-mega-menu .inner,
        .gift-inner,
        .discover-mega-menu .discover-inner {
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }
        .lookbook-products-grid {
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        }
        .product-grid-luxury {
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        }
        .accessory-grid,
        .gifts-product-grid {
            grid-template-columns: repeat(3, 1fr);
        }
        .footer-luxury .footer-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 768px) {
        .top-bar-wrapper .right {
            display: none;
        }
        .top-bar-wrapper .left {
            width: 100%;
            text-align: center;
            justify-content: center;
            font-size: 0.65rem;
        }
        .nav-left {
            display: none !important;
        }
        .nav-toggle {
            display: flex !important;
        }
        .nav-logo {
            font-size: 1.4rem;
            margin-right: 16px;
        }
        .nav-logo small {
            font-size: 0.45rem;
        }
        .nav-mobile-wrapper.open {
            display: flex;
        }
        .hero-slider {
            height: 75vh;
            min-height: 420px;
            max-height: 600px;
        }
        .hero-slider .slide .slide-content h1 {
            font-size: 2.2rem;
        }
        .whats-new-section {
            height: 70vh;
            min-height: 500px;
            max-height: 700px;
        }
        .whats-new-section .whats-new-title {
            font-size: 2.6rem;
        }
        .whats-new-section .whats-new-content {
            bottom: 10%;
            padding: 0 24px;
        }
        .whats-new-shop-links {
            flex-direction: column;
            align-items: flex-start;
            gap: 14px;
            width: 100%;
        }
        .shop-link {
            width: 100%;
            justify-content: center;
            padding: 12px 24px;
            font-size: 0.75rem;
        }
        .section-title {
            font-size: 2rem;
        }
        .page:not(#page-home) {
            padding-top: calc(var(--topbar-height) + var(--navbar-height) + 20px);
        }
        .look-masonry {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 0 16px;
            max-width: 480px;
            margin: 0 auto;
        }
        .look-masonry .col-left,
        .look-masonry .col-middle,
        .look-masonry .col-right {
            display: flex;
            flex-direction: column;
            gap: 12px;
            width: 100%;
        }
        .look-masonry .look-card-editorial {
            aspect-ratio: auto !important;
            min-height: 200px;
            border-radius: 8px;
            width: 100%;
        }
        .look-masonry .look-card-editorial .card-overlay {
            padding: 16px 14px 14px;
        }
        .look-masonry .look-card-editorial .card-overlay .card-label {
            font-size: 1rem;
        }
        .gift-mega-menu,
        .discover-mega-menu {
            display: none !important;
        }
        .nav-mobile-wrapper .gift-mobile-dropdown,
        .nav-mobile-wrapper .discover-mobile-dropdown {
            display: block !important;
        }
        .accessory-grid,
        .gifts-product-grid {
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        .gifts-product-grid .gift-product-card {
            flex: 0 0 auto !important;
            width: 200px !important;
            scroll-snap-align: start !important;
            min-height: 380px !important;
        }
        .gifts-product-grid .gift-product-card .product-image-container {
            min-height: 240px !important;
        }
        .gifts-product-grid .gift-product-card .product-info {
            padding: 12px 14px 14px !important;
        }
        .gifts-product-grid .gift-product-card .product-actions {
            opacity: 1 !important;
            transform: translateY(0) !important;
            flex-wrap: wrap !important;
        }
        .gifts-custom-grid {
            display: flex !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            gap: 16px !important;
            padding: 4px 4px 16px 4px !important;
            scroll-snap-type: x mandatory !important;
            -webkit-overflow-scrolling: touch !important;
            scrollbar-width: none !important;
            grid-template-columns: none !important;
        }
        .gifts-custom-grid::-webkit-scrollbar {
            display: none !important;
        }
        .gifts-custom-grid .gift-custom-item {
            flex: 0 0 auto !important;
            min-width: 220px !important;
            scroll-snap-align: start !important;
        }
        .gift-cards-grid {
            display: flex !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            gap: 20px !important;
            padding: 4px 4px 16px 4px !important;
            scroll-snap-type: x mandatory !important;
            -webkit-overflow-scrolling: touch !important;
            scrollbar-width: none !important;
            grid-template-columns: none !important;
        }
        .gift-cards-grid .gift-card-item {
            flex: 0 0 auto !important;
            min-width: 280px !important;
            scroll-snap-align: start !important;
        }
        .gifts-occasion-grid {
            display: flex !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            gap: 12px !important;
            padding: 4px 4px 16px 4px !important;
            scroll-snap-type: x mandatory !important;
            -webkit-overflow-scrolling: touch !important;
            scrollbar-width: none !important;
            grid-template-columns: none !important;
        }
        .gifts-occasion-grid .occasion-card {
            flex: 0 0 auto !important;
            min-width: 140px !important;
            scroll-snap-align: start !important;
        }
        .gifts-guide-grid {
            display: flex !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            gap: 16px !important;
            padding: 4px 4px 16px 4px !important;
            scroll-snap-type: x mandatory !important;
            -webkit-overflow-scrolling: touch !important;
            scrollbar-width: none !important;
            grid-template-columns: none !important;
        }
        .gifts-guide-grid .gift-guide-item {
            flex: 0 0 auto !important;
            min-width: 200px !important;
            scroll-snap-align: start !important;
        }
        .gift-card-benefits {
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        .gift-card-cta {
            padding: 28px 20px;
        }
        .gift-card-cta .cta-content h3 {
            font-size: 1.4rem;
        }
        .product-grid-luxury {
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        }
        .lookbook-hero-section {
            height: 60vh;
            min-height: 400px;
        }
        .lookbook-hero-section h1 {
            font-size: 2.4rem;
        }
        .lookbook-products-grid {
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 12px;
            padding: 0 12px;
        }
        .lookbook-product-card .product-info {
            padding: 12px 14px 14px;
        }
        .lookbook-product-card .product-name {
            font-size: 0.8rem;
        }
        .book-grid,
        .contact-grid {
            grid-template-columns: 1fr;
        }
        .book-form,
        .contact-form {
            padding: 24px;
        }
        .book-form .form-row,
        .contact-form .form-row {
            grid-template-columns: 1fr;
        }
        .checkout-grid {
            grid-template-columns: 1fr;
        }
        .checkout-grid .checkout-form .form-row {
            grid-template-columns: 1fr;
        }
        .product-detail-grid {
            grid-template-columns: 1fr;
            gap: 32px;
        }
        .product-detail-grid .gallery .main-img {
            aspect-ratio: 4/3;
        }
        .cart-drawer {
            width: 100%;
            max-width: 100%;
        }
        .help-panel {
            width: 92%;
            right: 4%;
            bottom: 80px;
        }
       
        .footer-luxury {
            padding: 48px 0 24px;
        }
        .footer-luxury .container {
            padding: 0 16px;
        }
        .footer-luxury .footer-grid {
            grid-template-columns: 1fr;
            gap: 32px;
            padding: 32px 0 24px;
        }
        .footer-luxury .footer-top {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
        }
        .footer-luxury .footer-top .social-section {
            width: 100%;
            justify-content: flex-start;
        }
        .footer-luxury .footer-bottom {
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 12px;
        }
        .locator-grid {
            grid-template-columns: 1fr;
            gap: 30px;
        }
        .map-wrapper {
            padding-bottom: 60%;
        }
        .location-features {
            grid-template-columns: 1fr 1fr;
        }
        .location-quick-actions {
            flex-direction: column;
        }
        .location-quick-actions .btn {
            width: 100%;
            justify-content: center;
        }
        .map-controls {
            flex-direction: column;
        }
        .map-control-btn {
            width: 100%;
            justify-content: center;
        }
        .landmarks-list {
            grid-template-columns: 1fr;
        }
        .filter-toggle-btn {
            padding: 10px 20px;
            font-size: 0.7rem;
        }
        .collection-filter-btn,
        .product-filter-btn {
            padding: 8px 16px;
            font-size: 0.65rem;
        }
        .collection-grid-luxury {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 16px;
        }
        .login-dropdown {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            width: 94%;
            max-width: 420px;
            max-height: 85vh;
            border-radius: var(--radius);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: all 0.3s ease;
        }
        .login-dropdown-wrapper:hover .login-dropdown,
        .login-dropdown:hover {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -50%) scale(1);
            pointer-events: auto;
        }
        .login-dropdown::before {
            display: none;
        }
        .login-dropdown-wrapper .login-overlay-bg {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(38, 36, 57, 0.4);
            backdrop-filter: blur(4px);
            z-index: 999;
        }
        .login-dropdown-wrapper:hover .login-overlay-bg {
            display: block;
        }
    }

    @media (max-width: 480px) {
        .hero-slider .slide .slide-content h1 {
            font-size: 1.6rem;
        }
        .hero-slider .slide .slide-content .tagline {
            font-size: 0.9rem;
        }
        .hero-slider .slide .slide-content p {
            font-size: 0.8rem;
        }
        .hero-slider .slide .slide-content .hero-buttons .btn {
            width: 100%;
            justify-content: center;
        }
        .slider-arrows button {
            width: 32px;
            height: 32px;
            font-size: 0.7rem;
        }
        .slider-dots .dot {
            width: 8px;
            height: 8px;
        }
        .container {
            padding: 0 16px;
        }
        .nav-logo {
            font-size: 1.2rem;
            margin-right: 12px;
        }
        .nav-logo small {
            font-size: 0.4rem;
        }
        .section-title {
            font-size: 1.8rem;
        }
        .whats-new-section {
            height: 65vh;
            min-height: 420px;
            max-height: 600px;
        }
        .whats-new-section .whats-new-title {
            font-size: 2rem;
            margin-bottom: 10px;
        }
        .whats-new-section .whats-new-label {
            font-size: 0.45rem;
            letter-spacing: 3px;
            margin-bottom: 6px;
        }
        .whats-new-section .whats-new-divider {
            width: 30px;
            margin-bottom: 12px;
        }
        .whats-new-section .whats-new-buttons {
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
        }
        .whats-new-section .whats-new-buttons .btn {
            padding: 10px 18px;
            font-size: 0.8rem;
            width: 100%;
            justify-content: center;
        }
        .shop-link {
            padding: 10px 20px;
            font-size: 0.65rem;
            gap: 8px;
        }
        .shop-link-icon {
            font-size: 0.75rem;
        }
        .shop-link-arrow {
            font-size: 0.55rem;
        }
        .product-grid-luxury {
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .product-card-luxury .product-body {
            padding: 12px 14px 14px;
        }
        .product-card-luxury .product-name {
            font-size: 0.8rem;
        }
        .accessory-grid,
        .gifts-product-grid {
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        .gifts-product-grid .gift-product-card {
            width: 160px !important;
            min-height: 320px !important;
        }
        .gifts-product-grid .gift-product-card .product-image-container {
            min-height: 190px !important;
        }
        .gifts-product-grid .gift-product-card .product-info {
            padding: 8px 10px 10px !important;
        }
        .gifts-product-grid .gift-product-card .product-name {
            font-size: 0.65rem !important;
        }
        .gifts-product-grid .gift-product-card .product-price {
            font-size: 0.7rem !important;
        }
        .gift-cards-grid .gift-card-item {
            min-width: 240px !important;
        }
        .gifts-occasion-grid .occasion-card {
            min-width: 120px !important;
        }
        .gifts-guide-grid .gift-guide-item {
            min-width: 160px !important;
        }
        .gift-card-benefits {
            grid-template-columns: 1fr;
            gap: 10px;
        }
        .gift-card-cta {
            padding: 20px 16px;
        }
        .gift-card-cta .cta-content h3 {
            font-size: 1.2rem;
        }
        .gift-card-cta .cta-buttons {
            flex-direction: column;
            align-items: center;
        }
        .gift-card-cta .cta-buttons .btn {
            width: 100%;
            max-width: 280px;
            justify-content: center;
        }
        .lookbook-products-grid {
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            padding: 0 8px;
        }
        .lookbook-product-card .product-image-wrap {
            aspect-ratio: 3/3.5;
        }
        .lookbook-product-card .product-gender-tag {
            font-size: 0.4rem;
            padding: 2px 8px;
            top: 8px;
            left: 8px;
        }
        .lookbook-product-card .product-badge {
            font-size: 0.4rem;
            padding: 2px 8px;
            top: 8px;
            left: 60px;
        }
        .lookbook-product-card .add-to-cart-btn {
            font-size: 0.5rem;
            padding: 6px 12px;
        }
        .page-hero {
            height: 40vh;
            min-height: 280px;
            max-height: 420px;
        }
        .page-hero-small {
            height: 25vh;
            min-height: 180px;
            max-height: 280px;
        }
        .page-hero .hero-content h1 {
            font-size: 1.8rem;
        }
        .page-hero-small .hero-content h1 {
            font-size: 1.3rem;
        }
        .filter-toggle-btn {
            padding: 8px 14px;
            font-size: 0.6rem;
            gap: 6px;
        }
        .collection-filter-btn,
        .product-filter-btn {
            padding: 6px 12px;
            font-size: 0.6rem;
        }
        .collection-grid-luxury {
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        .collection-card-luxury .collection-body {
            padding: 14px 16px 16px;
        }
        .lookbook-hero-section {
            height: 50vh;
            min-height: 360px;
        }
        .lookbook-hero-section h1 {
            font-size: 1.8rem;
        }
        .hero-gender-filters .gender-filter-btn {
            padding: 8px 18px;
            font-size: 0.55rem;
        }
        .dashboard-main {
            padding: 16px;
        }
        .dashboard-main .stats-grid {
            grid-template-columns: 1fr;
        }
        .dashboard-main .quick-actions {
            grid-template-columns: 1fr;
        }
        .dashboard-main .dash-header {
            flex-direction: column;
            align-items: flex-start;
        }
        .dashboard-sidebar {
            padding: 16px;
        }
        .dashboard-sidebar .nav-dash a {
            padding: 8px 12px;
            font-size: 0.8rem;
        }
        .login-dropdown {
            width: 96%;
            max-height: 80vh;
        }
        .login-form-container {
            padding: 14px 16px 16px;
        }
        .login-tab {
            font-size: 0.65rem;
            padding: 8px 10px;
        }
        .login-form-group input,
        .login-form-group select {
            font-size: 0.8rem;
            padding: 8px 12px;
        }
        .login-submit-btn {
            font-size: 0.8rem;
            padding: 10px;
        }
        .footer-luxury .footer-top .newsletter-section {
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
        }
        .footer-luxury .footer-top .newsletter-section .news-input-wrap {
            width: 100%;
        }
        .footer-luxury .footer-top .newsletter-section .news-input-wrap input {
            width: 100%;
        }
        .footer-luxury .footer-bottom .legal-links {
            justify-content: center;
            gap: 12px;
        }
        .footer-luxury .footer-bottom .payment-methods {
            justify-content: center;
            width: 100%;
        }
    }

    /* ================================================================
    ANIMATIONS
    ================================================================ */
    @keyframes fadeIn {
        0% {
            opacity: 0;
            transform: translateY(4px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slideIn {
        0% {
            opacity: 0;
            transform: translateX(8px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes scrollPulse {
        0%, 100% {
            opacity: 0.3;
            transform: scaleY(0.6);
        }
        50% {
            opacity: 1;
            transform: scaleY(1);
        }
    }

    @keyframes modalFadeIn {
        0% {
            opacity: 0;
            backdrop-filter: blur(0px);
        }
        100% {
            opacity: 1;
            backdrop-filter: blur(12px);
        }
    }

    @keyframes modalScaleIn {
        0% {
            transform: scale(0.92);
            opacity: 0;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* Touch device overrides (no hover animations) */
    @media (hover: none) and (pointer: coarse) {
        .luxury-split-panel .panel-image {
            transform: scale(1);
        }
        .luxury-split-panel .panel-content {
            transform: translateY(0);
        }
        .luxury-split-panel .panel-heading {
            transform: translateY(0);
        }
        .luxury-split-panel .panel-cta {
            transform: translateY(0);
        }
        .luxury-split-panel .panel-cta::after {
            width: 0;
        }
        .luxury-split-panel .panel-divider {
            width: 40px;
        }
        .luxury-image-strip .strip-item .strip-image {
            transform: scale(1);
        }
        .luxury-image-strip .strip-item .strip-overlay {
            background: linear-gradient(to bottom, rgba(38, 36, 57, 0.05) 0%, rgba(38, 36, 57, 0.20) 40%, rgba(38, 36, 57, 0.50) 75%, rgba(38, 36, 57, 0.70) 100%);
        }
        .luxury-image-strip .strip-item .strip-content {
            transform: translateY(0);
        }
        .luxury-image-strip .strip-item .strip-btn::before {
            display: none;
        }
        .luxury-image-strip .strip-item .strip-btn:hover {
            color: var(--white);
            border-color: rgba(255, 255, 255, 0.25);
            transform: none;
        }
    }

    /* ================================================================
    HBO SPLIT LAYOUT - MAIN CARD + 2×2 GRID
    ================================================================ */

    .hbo-split-section {
        padding: 60px 0 80px;
        background: var(--white);
    }

    .hbo-split-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 24px;
        align-items: stretch;
    }

    /* ===== LEFT: MAIN FEATURED CARD ===== */
    .hbo-main-card {
        position: relative;
        border-radius: var(--radius);
        overflow: hidden;
        cursor: pointer;
        background: var(--gray-100);
        min-height: 500px;
        transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .hbo-main-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
    }

    .hbo-main-card .main-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        display: block;
        position: absolute;
        inset: 0;
    }

    .hbo-main-card:hover .main-image {
        transform: scale(1.05);
    }

    .hbo-main-card .main-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(38, 36, 57, 0.05) 0%,
            rgba(38, 36, 57, 0.25) 40%,
            rgba(38, 36, 57, 0.55) 70%,
            rgba(38, 36, 57, 0.80) 100%
        );
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 40px 36px;
        z-index: 2;
        transition: background 0.5s ease;
    }

    .hbo-main-card:hover .main-overlay {
        background: linear-gradient(
            to bottom,
            rgba(38, 36, 57, 0.08) 0%,
            rgba(38, 36, 57, 0.30) 40%,
            rgba(38, 36, 57, 0.60) 70%,
            rgba(38, 36, 57, 0.85) 100%
        );
    }

    .hbo-main-card .main-badge {
        display: inline-block;
        padding: 6px 18px;
        background: var(--gold);
        color: var(--white);
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 2px;
        border-radius: 60px;
        margin-bottom: 12px;
        width: fit-content;
        font-family: var(--font-sans);
    }

    .hbo-main-card .main-title {
        font-family: var(--font-serif);
        font-size: 2.8rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);
        letter-spacing: 1px;
        line-height: 1.08;
        margin-bottom: 4px;
    }

    .hbo-main-card .main-title span {
        color: var(--gold);
        font-weight: 600;
    }

    .hbo-main-card .main-divider {
        width: 50px;
        height: 2px;
        background: var(--gold);
        margin: 12px 0 16px;
    }

    .hbo-main-card .main-desc {
        font-family: var(--font-sans);
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.7);
        max-width: 85%;
        line-height: 1.6;
        margin-bottom: 20px;
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
    }

    .hbo-main-card .main-cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 32px;
        background: var(--gold);
        color: var(--navy);
        font-family: var(--font-sans);
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        border-radius: 60px;
        border: none;
        cursor: pointer;
        transition: all 0.4s ease;
        width: fit-content;
        text-decoration: none;
    }

    .hbo-main-card .main-cta:hover {
        background: #d4b47a;
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(201, 169, 110, 0.3);
    }

    .hbo-main-card .main-cta i {
        font-size: 0.7rem;
        transition: transform 0.3s ease;
    }

    .hbo-main-card .main-cta:hover i {
        transform: translateX(4px);
    }

    /* ===== RIGHT: 2×2 GRID ===== */
    .hbo-grid-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 16px;
    }

    .hbo-grid-card {
        position: relative;
        border-radius: var(--radius);
        overflow: hidden;
        cursor: pointer;
        background: var(--gray-100);
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        aspect-ratio: 1 / 1;
        min-height: 0;
    }

    .hbo-grid-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
    }

    .hbo-grid-card .grid-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        display: block;
    }

    .hbo-grid-card:hover .grid-image {
        transform: scale(1.06);
    }

    .hbo-grid-card .grid-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(38, 36, 57, 0.05) 0%,
            rgba(38, 36, 57, 0.20) 40%,
            rgba(38, 36, 57, 0.50) 70%,
            rgba(38, 36, 57, 0.75) 100%
        );
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 18px 16px 16px;
        z-index: 2;
        transition: background 0.5s ease;
    }

    .hbo-grid-card:hover .grid-overlay {
        background: linear-gradient(
            to bottom,
            rgba(38, 36, 57, 0.08) 0%,
            rgba(38, 36, 57, 0.25) 40%,
            rgba(38, 36, 57, 0.55) 70%,
            rgba(38, 36, 57, 0.85) 100%
        );
    }

    .hbo-grid-card .grid-badge {
        display: inline-block;
        padding: 3px 12px;
        font-size: 0.5rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-radius: 60px;
        font-family: var(--font-sans);
        background: var(--gold);
        color: var(--white);
        width: fit-content;
        margin-bottom: 6px;
    }

    .hbo-grid-card .grid-badge.best-seller { background: #18794e; }
    .hbo-grid-card .grid-badge.new { background: #e67e22; }
    .hbo-grid-card .grid-badge.premium { background: var(--navy); }
    .hbo-grid-card .grid-badge.limited { background: #8e44ad; }

    .hbo-grid-card .grid-name {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
        letter-spacing: 0.5px;
        line-height: 1.2;
    }

    .hbo-grid-card .grid-name span {
        color: var(--gold);
        font-weight: 700;
    }

    .hbo-grid-card .grid-divider {
        width: 30px;
        height: 1.5px;
        background: rgba(255, 255, 255, 0.3);
        margin: 6px 0 8px;
        transition: width 0.5s ease, background 0.5s ease;
    }

    .hbo-grid-card:hover .grid-divider {
        width: 45px;
        background: var(--gold);
    }

    .hbo-grid-card .grid-cta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 500;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--gold);
        transition: all 0.3s ease;
    }

    .hbo-grid-card:hover .grid-cta {
        gap: 12px;
    }

    .hbo-grid-card .grid-cta i {
        font-size: 0.5rem;
        transition: transform 0.3s ease;
    }

    .hbo-grid-card:hover .grid-cta i {
        transform: translateX(4px);
    }

    /* View All button inside the grid (replaces 4th card) */
    .hbo-grid-card.view-all-card {
        background: var(--gray-100);
        border: 2px dashed var(--gray-300);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        transition: all 0.4s ease;
        cursor: pointer;
    }

    .hbo-grid-card.view-all-card:hover {
        border-color: var(--gold);
        background: var(--cream-light);
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
    }

    .hbo-grid-card.view-all-card .view-all-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 20px;
    }

    .hbo-grid-card.view-all-card .view-all-icon {
        font-size: 2.4rem;
        color: var(--gold);
    }

    .hbo-grid-card.view-all-card .view-all-text {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
    }

    .hbo-grid-card.view-all-card .view-all-sub {
        font-family: var(--font-sans);
        font-size: 0.75rem;
        color: var(--gray-600);
    }

    .hbo-grid-card.view-all-card .view-all-arrow {
        font-size: 1.2rem;
        color: var(--gold);
        transition: transform 0.4s ease;
    }

    .hbo-grid-card.view-all-card:hover .view-all-arrow {
        transform: translateX(6px);
    }

    /* ================================================================
    RESPONSIVE
    ================================================================ */

    /* Tablet: Stack vertically, right grid 2×2 */
    @media (max-width: 1024px) {
        .hbo-split-wrapper {
            grid-template-columns: 1fr;
            gap: 24px;
            padding: 0 20px;
        }

        .hbo-main-card {
            min-height: 400px;
        }

        .hbo-main-card .main-title {
            font-size: 2.2rem;
        }

        .hbo-grid-right {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 14px;
        }

        .hbo-grid-card {
            aspect-ratio: 1 / 1;
            min-height: 200px;
        }
    }

    /* Mobile: Right grid becomes 2 columns */
    @media (max-width: 600px) {
        .hbo-split-wrapper {
            padding: 0 12px;
            gap: 16px;
        }

        .hbo-main-card {
            min-height: 320px;
        }

        .hbo-main-card .main-overlay {
            padding: 24px 20px;
        }

        .hbo-main-card .main-title {
            font-size: 1.6rem;
        }

        .hbo-main-card .main-desc {
            font-size: 0.8rem;
            max-width: 100%;
        }

        .hbo-main-card .main-cta {
            padding: 10px 24px;
            font-size: 0.7rem;
        }

        .hbo-main-card .main-badge {
            font-size: 0.5rem;
            padding: 4px 14px;
        }

        .hbo-grid-right {
            gap: 10px;
        }

        .hbo-grid-card {
            aspect-ratio: 1 / 1;
            min-height: 140px;
        }

        .hbo-grid-card .grid-overlay {
            padding: 12px 12px 12px;
        }

        .hbo-grid-card .grid-name {
            font-size: 0.8rem;
        }

        .hbo-grid-card .grid-badge {
            font-size: 0.4rem;
            padding: 2px 10px;
        }

        .hbo-grid-card .grid-cta {
            font-size: 0.45rem;
        }

        .hbo-grid-card .grid-divider {
            width: 20px;
            margin: 4px 0 6px;
        }

        .hbo-grid-card:hover .grid-divider {
            width: 30px;
        }

        .hbo-grid-card.view-all-card .view-all-icon {
            font-size: 1.6rem;
        }

        .hbo-grid-card.view-all-card .view-all-text {
            font-size: 0.8rem;
        }

        .hbo-grid-card.view-all-card .view-all-sub {
            font-size: 0.6rem;
        }
    }

    /* Very small phones */
    @media (max-width: 400px) {
        .hbo-main-card {
            min-height: 250px;
        }

        .hbo-main-card .main-title {
            font-size: 1.2rem;
        }

        .hbo-main-card .main-desc {
            font-size: 0.7rem;
            -webkit-line-clamp: 2;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }

        .hbo-main-card .main-cta {
            padding: 8px 18px;
            font-size: 0.6rem;
        }

        .hbo-grid-right {
            gap: 8px;
        }

        .hbo-grid-card {
            min-height: 110px;
        }

        .hbo-grid-card .grid-name {
            font-size: 0.65rem;
        }

        .hbo-grid-card .grid-badge {
            font-size: 0.35rem;
            padding: 2px 8px;
        }

        .hbo-grid-card .grid-cta {
            font-size: 0.4rem;
        }

        .hbo-grid-card.view-all-card .view-all-icon {
            font-size: 1.2rem;
        }

        .hbo-grid-card.view-all-card .view-all-text {
            font-size: 0.65rem;
        }
    }

    /* ================================================================ */
    /* VIP EXPERIENCE MODAL                                           */
    /* ================================================================ */

    .vip-experience-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 10002;
        background: rgba(10, 10, 10, 0.75);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: modalFadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .vip-experience-modal.open {
        display: flex;
    }

    .vip-modal-content {
        background: var(--white);
        border-radius: var(--radius);
        max-width: 960px;
        width: 100%;
        max-height: 92vh;
        overflow-y: auto;
        padding: 48px 44px 40px;
        position: relative;
        animation: modalScaleIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        box-shadow: 0 40px 120px rgba(0, 0, 0, 0.3);
    }

    .vip-modal-content::-webkit-scrollbar {
        width: 4px;
    }

    .vip-modal-content::-webkit-scrollbar-track {
        background: var(--gray-100);
        border-radius: 4px;
    }

    .vip-modal-content::-webkit-scrollbar-thumb {
        background: var(--gold);
        border-radius: 4px;
    }

    .vip-modal-close {
        position: absolute;
        top: 16px;
        right: 20px;
        background: none;
        border: none;
        font-size: 1.4rem;
        color: var(--gray-600);
        cursor: pointer;
        transition: var(--transition);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .vip-modal-close:hover {
        color: var(--navy);
        background: var(--gray-100);
        transform: rotate(90deg);
    }

    /* Header */
    .vip-modal-header {
        text-align: center;
        margin-bottom: 36px;
    }

    .vip-icon-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--cream-light), var(--cream));
        margin-bottom: 12px;
    }

    .vip-icon {
        font-size: 2.8rem;
    }

    .vip-badge {
        display: inline-block;
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 600;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--white);
        background: linear-gradient(135deg, var(--gold), #b8965a);
        padding: 4px 18px;
        border-radius: 60px;
        margin-bottom: 8px;
    }

    .vip-modal-header h2 {
        font-family: var(--font-serif);
        font-size: 2.4rem;
        font-weight: 500;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .vip-modal-header h2 span {
        color: var(--gold);
        font-weight: 600;
    }

    .vip-modal-header p {
        color: var(--gray-600);
        font-size: 0.95rem;
    }

    /* VIP Sections */
    .vip-section {
        margin-bottom: 32px;
        padding-bottom: 32px;
        border-bottom: 1px solid var(--gray-200);
    }

    .vip-section:last-of-type {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .vip-section-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }

    .vip-section-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        color: var(--gold);
        flex-shrink: 0;
    }

    .vip-section-header h3 {
        font-family: var(--font-serif);
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--navy);
        margin: 0;
    }

    .vip-section-sub {
        font-size: 0.85rem;
        color: var(--gray-600);
        margin: 0 0 0 52px;
    }

    /* Features Grid */
    .vip-features-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
    }

    .vip-feature {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 16px;
        background: var(--gray-100);
        border-radius: 8px;
        transition: var(--transition);
    }

    .vip-feature:hover {
        background: var(--cream-light);
        transform: translateY(-2px);
    }

    .vip-feature-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        color: var(--gold);
        flex-shrink: 0;
    }

    .vip-feature-content h4 {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--navy);
        margin: 0 0 2px;
    }

    .vip-feature-content p {
        font-size: 0.75rem;
        color: var(--gray-600);
        margin: 0;
        line-height: 1.4;
    }

    /* Packages Grid */
    .vip-packages-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
        margin-top: 8px;
    }

    .vip-package {
        background: var(--white);
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
        padding: 24px 20px;
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        position: relative;
    }

    .vip-package:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
    }

    .vip-package.featured {
        border-color: var(--gold);
        background: linear-gradient(135deg, var(--white), var(--cream-light));
    }

    .vip-package.featured::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--gold), #b8965a);
        border-radius: var(--radius) var(--radius) 0 0;
    }

    .vip-package-header {
        text-align: center;
        margin-bottom: 16px;
    }

    .vip-package-badge {
        display: inline-block;
        font-size: 0.5rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 2px 12px;
        border-radius: 60px;
        background: var(--gray-200);
        color: var(--gray-600);
        margin-bottom: 6px;
    }

    .vip-package-gold .vip-package-badge {
        background: var(--gold);
        color: var(--white);
    }

    .vip-package-icon {
        display: block;
        font-size: 2rem;
        margin-bottom: 4px;
    }

    .vip-package-header h4 {
        font-family: var(--font-serif);
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--navy);
        margin: 0;
    }

    .vip-package-price {
        margin-top: 6px;
    }

    .price-amount {
        display: block;
        font-family: var(--font-serif);
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--gold);
    }

    .price-note {
        font-size: 0.65rem;
        color: var(--gray-600);
    }

    .vip-package-features {
        list-style: none;
        padding: 0;
        margin: 0 0 16px;
    }

    .vip-package-features li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 0;
        font-size: 0.8rem;
        color: var(--gray-600);
        border-bottom: 1px solid var(--gray-100);
    }

    .vip-package-features li:last-child {
        border-bottom: none;
    }

    .vip-package-features li i {
        color: var(--gold);
        font-size: 0.75rem;
        flex-shrink: 0;
    }

    .vip-package-btn {
        width: 100%;
        justify-content: center;
    }

    /* Comparison Table */
    .vip-comparison-table {
        overflow-x: auto;
        margin-top: 4px;
    }

    .vip-comparison-table table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.8rem;
    }

    .vip-comparison-table th,
    .vip-comparison-table td {
        padding: 10px 14px;
        text-align: center;
        border-bottom: 1px solid var(--gray-200);
    }

    .vip-comparison-table th {
        font-weight: 600;
        color: var(--navy);
        background: var(--gray-100);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .vip-comparison-table td:first-child {
        text-align: left;
        font-weight: 500;
        color: var(--gray-700);
    }

    .highlight-silver {
        background: rgba(200, 200, 200, 0.05);
    }

    .highlight-gold {
        background: rgba(201, 169, 110, 0.08);
    }

    .highlight-platinum {
        background: rgba(100, 200, 255, 0.05);
    }

    .vip-comparison-table .fa-check {
        color: #2ecc71;
    }

    .vip-comparison-table .fa-times {
        color: #e74c3c;
    }

    .vip-total-row td {
        font-weight: 700;
        border-top: 2px solid var(--gray-300);
    }

    /* Testimonials */
    .vip-testimonials {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .vip-testimonial {
        padding: 20px;
        background: var(--gray-100);
        border-radius: var(--radius);
        border-left: 3px solid var(--gold);
    }

    .testimonial-rating {
        display: flex;
        gap: 3px;
        color: var(--gold);
        font-size: 0.8rem;
        margin-bottom: 8px;
    }

    .vip-testimonial p {
        font-size: 0.85rem;
        color: var(--gray-600);
        line-height: 1.6;
        margin: 0 0 10px;
        font-style: italic;
    }

    .testimonial-author {
        display: flex;
        flex-direction: column;
    }

    .author-name {
        font-weight: 600;
        color: var(--navy);
        font-size: 0.8rem;
    }

    .author-role {
        font-size: 0.65rem;
        color: var(--gray-600);
    }

    /* Footer */
    .vip-modal-footer {
        display: flex;
        gap: 14px;
        justify-content: center;
        margin-top: 28px;
        padding-top: 24px;
        border-top: 1px solid var(--gray-200);
        flex-wrap: wrap;
    }

    .vip-modal-footer .btn {
        min-width: 180px;
        justify-content: center;
    }

    .vip-modal-footer .btn-gold {
        background: var(--gold);
        color: var(--navy);
    }

    .vip-modal-footer .btn-gold:hover {
        background: #d4b47a;
    }

    /* ================================================================ */
    /* RESPONSIVE - VIP MODAL                                         */
    /* ================================================================ */

    @media (max-width: 1024px) {
        .vip-features-grid {
            grid-template-columns: 1fr 1fr;
        }
        
        .vip-packages-grid {
            grid-template-columns: 1fr 1fr;
        }
        
        .vip-packages-grid .vip-package:last-child {
            grid-column: span 2;
            max-width: 400px;
            margin: 0 auto;
        }
    }

    @media (max-width: 768px) {
        .vip-modal-content {
            padding: 32px 24px 28px;
            margin: 10px;
            max-height: 85vh;
        }

        .vip-modal-header h2 {
            font-size: 1.8rem;
        }

        .vip-features-grid {
            grid-template-columns: 1fr;
        }

        .vip-packages-grid {
            grid-template-columns: 1fr;
        }

        .vip-packages-grid .vip-package:last-child {
            grid-column: span 1;
        }

        .vip-testimonials {
            grid-template-columns: 1fr;
        }

        .vip-section-header {
            flex-wrap: wrap;
        }

        .vip-section-sub {
            margin-left: 0;
        }

        .vip-modal-footer {
            flex-direction: column;
            align-items: center;
        }

        .vip-modal-footer .btn {
            width: 100%;
            max-width: 280px;
        }

        .vip-comparison-table table {
            font-size: 0.7rem;
        }

        .vip-comparison-table th,
        .vip-comparison-table td {
            padding: 6px 10px;
        }
    }

    @media (max-width: 480px) {
        .vip-modal-content {
            padding: 24px 16px 20px;
        }

        .vip-modal-header h2 {
            font-size: 1.4rem;
        }

        .vip-icon-wrapper {
            width: 56px;
            height: 56px;
        }

        .vip-icon {
            font-size: 2rem;
        }

        .vip-package {
            padding: 18px 14px;
        }
    }

    /* ================================================================ */
    /* MEASUREMENT SERVICES MODAL                                     */
    /* ================================================================ */

    .measurement-services-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 10002;
        background: rgba(10, 10, 10, 0.75);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: modalFadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .measurement-services-modal.open {
        display: flex;
    }

    .measurement-modal-content {
        background: var(--white);
        border-radius: var(--radius);
        max-width: 900px;
        width: 100%;
        max-height: 92vh;
        overflow-y: auto;
        padding: 48px 44px 40px;
        position: relative;
        animation: modalScaleIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        box-shadow: 0 40px 120px rgba(0, 0, 0, 0.3);
    }

    .measurement-modal-content::-webkit-scrollbar {
        width: 4px;
    }

    .measurement-modal-content::-webkit-scrollbar-track {
        background: var(--gray-100);
        border-radius: 4px;
    }

    .measurement-modal-content::-webkit-scrollbar-thumb {
        background: var(--gold);
        border-radius: 4px;
    }

    .measurement-modal-close {
        position: absolute;
        top: 16px;
        right: 20px;
        background: none;
        border: none;
        font-size: 1.4rem;
        color: var(--gray-600);
        cursor: pointer;
        transition: var(--transition);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .measurement-modal-close:hover {
        color: var(--navy);
        background: var(--gray-100);
        transform: rotate(90deg);
    }

    /* Header */
    .measurement-modal-header {
        text-align: center;
        margin-bottom: 32px;
    }

    .measurement-icon-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--cream-light), var(--cream));
        margin-bottom: 12px;
    }

    .measurement-icon {
        font-size: 2.8rem;
    }

    .measurement-badge {
        display: inline-block;
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 600;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--white);
        background: var(--navy);
        padding: 4px 18px;
        border-radius: 60px;
        margin-bottom: 8px;
    }

    .measurement-modal-header h2 {
        font-family: var(--font-serif);
        font-size: 2.4rem;
        font-weight: 500;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .measurement-modal-header h2 span {
        color: var(--gold);
        font-weight: 600;
    }

    .measurement-modal-header p {
        color: var(--gray-600);
        font-size: 0.95rem;
    }

    /* Sections */
    .measurement-section {
        margin-bottom: 28px;
        padding-bottom: 28px;
        border-bottom: 1px solid var(--gray-200);
    }

    .measurement-section:last-of-type {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .measurement-section-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }

    .measurement-section-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        color: var(--gold);
        flex-shrink: 0;
    }

    .measurement-section-header h3 {
        font-family: var(--font-serif);
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--navy);
        margin: 0;
    }

    .measurement-section-sub {
        font-size: 0.85rem;
        color: var(--gray-600);
        margin: 0 0 0 52px;
    }

    /* Features Grid */
    .measurement-features-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 16px;
    }

    .measurement-feature {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
        background: var(--gray-100);
        border-radius: 8px;
        transition: var(--transition);
    }

    .measurement-feature:hover {
        background: var(--cream-light);
        transform: translateY(-2px);
    }

    .measurement-feature-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        color: var(--gold);
        flex-shrink: 0;
    }

    .measurement-feature-content h4 {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--navy);
        margin: 0 0 2px;
    }

    .measurement-feature-content p {
        font-size: 0.7rem;
        color: var(--gray-600);
        margin: 0;
        line-height: 1.3;
    }

    /* Pricing Grid */
    .measurement-pricing-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-top: 8px;
    }

    .measurement-pricing-card {
        background: var(--white);
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
        padding: 24px 20px;
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        cursor: pointer;
        position: relative;
    }

    .measurement-pricing-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
    }

    .measurement-pricing-card.featured {
        border-color: var(--gold);
        background: linear-gradient(135deg, var(--white), var(--cream-light));
    }

    .measurement-pricing-card.featured::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--gold), #b8965a);
        border-radius: var(--radius) var(--radius) 0 0;
    }

    .pricing-card-header {
        text-align: center;
        margin-bottom: 16px;
    }

    .pricing-badge {
        display: inline-block;
        font-size: 0.5rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 2px 12px;
        border-radius: 60px;
        background: var(--gold);
        color: var(--white);
        margin-bottom: 6px;
    }

    .pricing-icon {
        display: block;
        font-size: 2rem;
        margin-bottom: 4px;
    }

    .pricing-card-header h4 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
        margin: 0;
    }

    .pricing-price {
        margin-top: 6px;
    }

    .pricing-price .price-amount {
        display: block;
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--gold);
    }

    .pricing-price .price-note {
        font-size: 0.65rem;
        color: var(--gray-600);
    }

    .pricing-features {
        list-style: none;
        padding: 0;
        margin: 0 0 16px;
    }

    .pricing-features li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 5px 0;
        font-size: 0.78rem;
        color: var(--gray-600);
        border-bottom: 1px solid var(--gray-100);
    }

    .pricing-features li:last-child {
        border-bottom: none;
    }

    .pricing-features li i {
        color: var(--gold);
        font-size: 0.7rem;
        flex-shrink: 0;
    }

    .pricing-select-btn {
        width: 100%;
        justify-content: center;
    }

    /* Notes */
    .measurement-notes {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 16px;
        padding: 16px 20px;
        background: var(--gray-100);
        border-radius: var(--radius);
    }

    .note-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 0.75rem;
        color: var(--gray-600);
    }

    .note-item i {
        color: var(--gold);
        font-size: 0.85rem;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .note-item strong {
        display: block;
        color: var(--navy);
        font-size: 0.7rem;
    }

    .note-item span {
        font-size: 0.7rem;
    }

    /* Comparison Table */
    .measurement-comparison {
        margin-top: 16px;
        overflow-x: auto;
    }

    .measurement-comparison h4 {
        font-family: var(--font-serif);
        font-size: 1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 12px;
    }

    .measurement-comparison table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.78rem;
    }

    .measurement-comparison th,
    .measurement-comparison td {
        padding: 8px 14px;
        text-align: center;
        border-bottom: 1px solid var(--gray-200);
    }

    .measurement-comparison th {
        font-weight: 600;
        color: var(--navy);
        background: var(--gray-100);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .measurement-comparison td:first-child {
        text-align: left;
        font-weight: 500;
        color: var(--gray-700);
    }

    .measurement-comparison .fa-check {
        color: #2ecc71;
    }

    .measurement-total-row td {
        font-weight: 700;
        border-top: 2px solid var(--gray-300);
        color: var(--gold);
    }

    /* Testimonials */
    .measurement-testimonials {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .measurement-testimonial {
        padding: 16px 20px;
        background: var(--gray-100);
        border-radius: var(--radius);
        border-left: 3px solid var(--gold);
    }

    .measurement-testimonial .testimonial-rating {
        display: flex;
        gap: 3px;
        color: var(--gold);
        font-size: 0.7rem;
        margin-bottom: 6px;
    }

    .measurement-testimonial p {
        font-size: 0.82rem;
        color: var(--gray-600);
        line-height: 1.5;
        margin: 0 0 8px;
        font-style: italic;
    }

    .measurement-testimonial .testimonial-author {
        display: flex;
        flex-direction: column;
    }

    .measurement-testimonial .author-name {
        font-weight: 600;
        color: var(--navy);
        font-size: 0.78rem;
    }

    .measurement-testimonial .author-role {
        font-size: 0.65rem;
        color: var(--gray-600);
    }

    /* Footer */
    .measurement-modal-footer {
        display: flex;
        gap: 14px;
        justify-content: center;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid var(--gray-200);
        flex-wrap: wrap;
    }

    .measurement-modal-footer .btn {
        min-width: 160px;
        justify-content: center;
    }

    .measurement-modal-footer .btn-gold {
        background: var(--gold);
        color: var(--navy);
    }

    .measurement-modal-footer .btn-gold:hover {
        background: #d4b47a;
    }

    /* ================================================================ */
    /* RESPONSIVE - MEASUREMENT MODAL                                 */
    /* ================================================================ */

    @media (max-width: 1024px) {
        .measurement-features-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 768px) {
        .measurement-modal-content {
            padding: 32px 24px 28px;
            margin: 10px;
            max-height: 85vh;
        }

        .measurement-modal-header h2 {
            font-size: 1.8rem;
        }

        .measurement-features-grid {
            grid-template-columns: 1fr;
        }

        .measurement-pricing-grid {
            grid-template-columns: 1fr;
        }

        .measurement-notes {
            grid-template-columns: 1fr;
        }

        .measurement-testimonials {
            grid-template-columns: 1fr;
        }

        .measurement-section-header {
            flex-wrap: wrap;
        }

        .measurement-section-sub {
            margin-left: 0;
        }

        .measurement-modal-footer {
            flex-direction: column;
            align-items: center;
        }

        .measurement-modal-footer .btn {
            width: 100%;
            max-width: 280px;
        }

        .measurement-comparison table {
            font-size: 0.7rem;
        }

        .measurement-comparison th,
        .measurement-comparison td {
            padding: 6px 10px;
        }
    }

    @media (max-width: 480px) {
        .measurement-modal-content {
            padding: 24px 16px 20px;
        }

        .measurement-modal-header h2 {
            font-size: 1.4rem;
        }

        .measurement-icon-wrapper {
            width: 56px;
            height: 56px;
        }

        .measurement-icon {
            font-size: 2rem;
        }

        .measurement-pricing-card {
            padding: 18px 14px;
        }

        .pricing-price .price-amount {
            font-size: 1.3rem;
        }
    }

    /* ================================================================ */
    /* MTM SERVICES MODAL                                             */
    /* ================================================================ */

    .mtm-services-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 10002;
        background: rgba(10, 10, 10, 0.7);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: modalFadeIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .mtm-services-modal.open {
        display: flex;
    }

    .mtm-modal-content {
        background: var(--white);
        border-radius: var(--radius);
        max-width: 880px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 40px 40px 32px;
        position: relative;
        animation: modalScaleIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        box-shadow: 0 40px 120px rgba(0, 0, 0, 0.25);
    }

    .mtm-modal-content::-webkit-scrollbar {
        width: 4px;
    }

    .mtm-modal-content::-webkit-scrollbar-track {
        background: var(--gray-100);
        border-radius: 4px;
    }

    .mtm-modal-content::-webkit-scrollbar-thumb {
        background: var(--gold);
        border-radius: 4px;
    }

    .mtm-modal-close {
        position: absolute;
        top: 14px;
        right: 18px;
        background: none;
        border: none;
        font-size: 1.2rem;
        color: var(--gray-600);
        cursor: pointer;
        transition: var(--transition);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mtm-modal-close:hover {
        color: var(--navy);
        background: var(--gray-100);
        transform: rotate(90deg);
    }

    /* Header */
    .mtm-modal-header {
        text-align: center;
        margin-bottom: 28px;
    }

    .mtm-icon-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--cream-light);
        margin-bottom: 10px;
    }

    .mtm-icon {
        font-size: 2.4rem;
    }

    .mtm-badge {
        display: inline-block;
        font-family: var(--font-sans);
        font-size: 0.5rem;
        font-weight: 600;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: var(--white);
        background: var(--navy);
        padding: 3px 16px;
        border-radius: 60px;
        margin-bottom: 6px;
    }

    .mtm-modal-header h2 {
        font-family: var(--font-serif);
        font-size: 2rem;
        font-weight: 500;
        color: var(--navy);
        margin-bottom: 2px;
    }

    .mtm-modal-header h2 span {
        color: var(--gold);
        font-weight: 600;
    }

    .mtm-modal-header p {
        color: var(--gray-600);
        font-size: 0.9rem;
        margin: 0;
    }

    /* Quick Overview */
    .mtm-quick-overview {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 12px;
        padding: 16px 20px;
        background: var(--gray-100);
        border-radius: var(--radius);
        margin-bottom: 24px;
    }

    .mtm-overview-item {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mtm-overview-icon {
        font-size: 1.4rem;
    }

    .mtm-overview-item div {
        display: flex;
        flex-direction: column;
    }

    .mtm-overview-item strong {
        font-size: 0.75rem;
        color: var(--navy);
    }

    .mtm-overview-item span {
        font-size: 0.7rem;
        color: var(--gray-600);
    }

    /* Sections */
    .mtm-section {
        margin-bottom: 24px;
    }

    .mtm-section:last-of-type {
        margin-bottom: 0;
    }

    .mtm-section-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }

    .mtm-section-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        color: var(--gold);
        flex-shrink: 0;
    }

    .mtm-section-header h3 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
        margin: 0;
    }

    /* Features List */
    .mtm-features-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 20px;
    }

    .mtm-features-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 6px 0;
        border-bottom: 1px solid var(--gray-100);
    }

    .mtm-features-list li i {
        color: var(--gold);
        font-size: 0.8rem;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .mtm-features-list li div {
        display: flex;
        flex-direction: column;
    }

    .mtm-features-list li strong {
        font-size: 0.8rem;
        color: var(--navy);
    }

    .mtm-features-list li span {
        font-size: 0.7rem;
        color: var(--gray-600);
    }

    /* Pricing Cards */
    .mtm-pricing-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 14px;
    }

    .mtm-pricing-card {
        background: var(--white);
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
        padding: 20px 16px;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        cursor: pointer;
        position: relative;
    }

    .mtm-pricing-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
    }

    .mtm-pricing-card.featured {
        border-color: var(--gold);
        background: linear-gradient(135deg, var(--white), var(--cream-light));
    }

    .mtm-pricing-card.featured::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--gold), #b8965a);
        border-radius: var(--radius) var(--radius) 0 0;
    }

    .mtm-pricing-header {
        text-align: center;
        margin-bottom: 12px;
    }

    .mtm-pricing-badge {
        display: inline-block;
        font-size: 0.45rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 2px 10px;
        border-radius: 60px;
        background: var(--gold);
        color: var(--white);
        margin-bottom: 4px;
    }

    .mtm-pricing-icon {
        display: block;
        font-size: 1.6rem;
        margin-bottom: 2px;
    }

    .mtm-pricing-header h4 {
        font-family: var(--font-serif);
        font-size: 1rem;
        font-weight: 600;
        color: var(--navy);
        margin: 0;
    }

    .mtm-pricing-price {
        margin-top: 4px;
    }

    .mtm-price-amount {
        display: block;
        font-family: var(--font-serif);
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--gold);
    }

    .mtm-price-note {
        font-size: 0.6rem;
        color: var(--gray-600);
    }

    .mtm-pricing-features {
        list-style: none;
        padding: 0;
        margin: 0 0 12px;
    }

    .mtm-pricing-features li {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
        font-size: 0.72rem;
        color: var(--gray-600);
        border-bottom: 1px solid var(--gray-100);
    }

    .mtm-pricing-features li:last-child {
        border-bottom: none;
    }

    .mtm-pricing-features li i {
        color: var(--gold);
        font-size: 0.65rem;
        flex-shrink: 0;
    }

    .mtm-select-btn {
        width: 100%;
        justify-content: center;
        font-size: 0.7rem;
        padding: 8px 16px;
    }

    .mtm-select-btn.btn-gold {
        background: var(--gold);
        color: var(--navy);
    }

    .mtm-select-btn.btn-gold:hover {
        background: #d4b47a;
    }

    /* Quick Comparison */
    .mtm-comparison {
        margin-top: 20px;
        padding: 16px 20px;
        background: var(--gray-100);
        border-radius: var(--radius);
    }

    .mtm-comparison h4 {
        font-family: var(--font-serif);
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--navy);
        margin: 0 0 10px;
    }

    .mtm-comparison-grid {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mtm-comp-item {
        display: grid;
        grid-template-columns: 100px 1fr 1fr 1fr;
        gap: 8px;
        padding: 4px 0;
        font-size: 0.7rem;
        border-bottom: 1px solid var(--gray-200);
    }

    .mtm-comp-item:last-child {
        border-bottom: none;
    }

    .mtm-comp-label {
        font-weight: 600;
        color: var(--gray-700);
    }

    .mtm-comp-basic {
        color: var(--gray-600);
    }

    .mtm-comp-premium {
        color: var(--gold);
        font-weight: 600;
    }

    .mtm-comp-executive {
        color: var(--navy);
        font-weight: 600;
    }

    /* Home Visit Note */
    .mtm-home-visit-note {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-top: 16px;
        padding: 14px 18px;
        background: var(--cream-light);
        border-radius: var(--radius);
        border-left: 3px solid var(--gold);
    }

    .mtm-home-visit-note i {
        font-size: 1.2rem;
        color: var(--gold);
        margin-top: 2px;
    }

    .mtm-home-visit-note div strong {
        display: block;
        font-size: 0.8rem;
        color: var(--navy);
    }

    .mtm-home-visit-note div p {
        font-size: 0.75rem;
        color: var(--gray-600);
        margin: 2px 0 4px;
    }

    .mtm-home-visit-price {
        font-size: 0.7rem;
        color: var(--navy);
        font-weight: 500;
        background: var(--white);
        padding: 2px 12px;
        border-radius: 60px;
    }

    /* Footer */
    .mtm-modal-footer {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-top: 20px;
        padding-top: 18px;
        border-top: 1px solid var(--gray-200);
        flex-wrap: wrap;
    }

    .mtm-modal-footer .btn {
        min-width: 140px;
        justify-content: center;
        font-size: 0.8rem;
    }

    .mtm-modal-footer .btn-gold {
        background: var(--gold);
        color: var(--navy);
    }

    .mtm-modal-footer .btn-gold:hover {
        background: #d4b47a;
    }

    /* ================================================================ */
    /* RESPONSIVE - MTM MODAL                                         */
    /* ================================================================ */

    @media (max-width: 1024px) {
        .mtm-pricing-grid {
            grid-template-columns: 1fr 1fr;
        }
        
        .mtm-pricing-grid .mtm-pricing-card:last-child {
            grid-column: span 2;
            max-width: 400px;
            margin: 0 auto;
        }
    }

    @media (max-width: 768px) {
        .mtm-modal-content {
            padding: 28px 20px 24px;
            margin: 10px;
            max-height: 85vh;
        }

        .mtm-modal-header h2 {
            font-size: 1.6rem;
        }

        .mtm-quick-overview {
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            padding: 14px 16px;
        }

        .mtm-features-list {
            grid-template-columns: 1fr;
        }

        .mtm-pricing-grid {
            grid-template-columns: 1fr;
        }

        .mtm-pricing-grid .mtm-pricing-card:last-child {
            grid-column: span 1;
        }

        .mtm-comp-item {
            grid-template-columns: 80px 1fr 1fr 1fr;
            font-size: 0.65rem;
            gap: 4px;
        }

        .mtm-modal-footer {
            flex-direction: column;
            align-items: center;
        }

        .mtm-modal-footer .btn {
            width: 100%;
            max-width: 260px;
        }
    }

    @media (max-width: 480px) {
        .mtm-modal-content {
            padding: 20px 14px 18px;
        }

        .mtm-modal-header h2 {
            font-size: 1.3rem;
        }

        .mtm-icon-wrapper {
            width: 52px;
            height: 52px;
        }

        .mtm-icon {
            font-size: 1.8rem;
        }

        .mtm-quick-overview {
            grid-template-columns: 1fr;
        }

        .mtm-comp-item {
            grid-template-columns: 1fr 1fr 1fr 1fr;
            font-size: 0.6rem;
            gap: 2px;
            padding: 6px 0;
        }

        .mtm-comp-label {
            font-size: 0.55rem;
        }

        .mtm-pricing-card {
            padding: 16px 14px;
        }

        .mtm-price-amount {
            font-size: 1.1rem;
        }

        .mtm-home-visit-note {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
    }

    /* ================================================================ */
    /* OZHEA CONCIERGE - COMPLETE STYLES                             */
    /* ================================================================ */

    /* ---- Help Panel ---- */
    .help-panel {
        position: fixed;
        right: 25px;
        bottom: 90px;
        width: 420px;
        max-width: 92vw;
        max-height: 85vh;
        background: var(--white, #ffffff);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 20px 80px rgba(38, 36, 57, 0.2);
        animation: helpSlideUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: 9999;
        border: 1px solid var(--gray-200, #ede9e3);
        flex-direction: column;
    }    

    @keyframes helpSlideUp {
        from {
            opacity: 0;
            transform: translateY(20px) scale(0.96);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* ---- Panel Header ---- */
    .help-panel .help-header {
        background: var(--navy, #262439);
        color: var(--white, #ffffff);
        padding: 18px 24px;
        position: relative;
        flex-shrink: 0;
    }

    .help-panel .help-header h3 {
        font-family: var(--font-serif, 'Cormorant Garamond', serif);
        font-size: 1.2rem;
        font-weight: 600;
        margin: 0;
    }

    .help-panel .help-header h3 i {
        color: var(--gold, #c9a96e);
        margin-right: 6px;
    }

    .help-panel .help-header p {
        font-size: 0.8rem;
        opacity: 0.7;
        margin: 2px 0 0;
    }

    .help-panel .help-header .close-panel {
        position: absolute;
        top: 16px;
        right: 18px;
        color: rgba(255, 255, 255, 0.6);
        cursor: pointer;
        font-size: 1.1rem;
        transition: all 0.3s ease;
        padding: 4px;
    }

    .help-panel .help-header .close-panel:hover {
        color: var(--white, #ffffff);
        transform: rotate(90deg);
    }

    /* ---- Help Menu ---- */
    .help-panel .help-menu {
        padding: 16px 20px 20px;
        overflow-y: auto;
        flex: 1;
    }

    .help-panel .help-menu::-webkit-scrollbar {
        width: 3px;
    }

    .help-panel .help-menu::-webkit-scrollbar-track {
        background: var(--gray-100, #f8f6f3);
    }

    .help-panel .help-menu::-webkit-scrollbar-thumb {
        background: var(--gold, #c9a96e);
        border-radius: 3px;
    }

    /* ---- Quick Actions ---- */
    .help-quick-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 16px;
    }

    .help-quick-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        border-radius: 8px;
        border: 1px solid var(--gray-200, #ede9e3);
        background: var(--white, #ffffff);
        color: var(--gray-700, #5a5450);
        font-family: var(--font-sans, 'Inter', sans-serif);
        font-size: 0.75rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .help-quick-btn:hover {
        border-color: var(--gold, #c9a96e);
        color: var(--navy, #262439);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .help-quick-btn i {
        font-size: 1rem;
        color: var(--gold, #c9a96e);
        width: 20px;
        text-align: center;
    }

    .help-quick-btn i.fa-comment-dots {
        color: var(--gold, #c9a96e);
    }

    /* ================================================================ */
    /* FAQ SECTION - CLEAN & ORGANIZED                               */
    /* ================================================================ */

    .help-faq-section {
        margin-top: 4px;
        padding-top: 12px;
        border-top: 1px solid var(--gray-200, #ede9e3);
    }

    /* Section Header */
    .help-section-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }

    .help-section-icon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--cream-light, #f0ebe4);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        color: var(--gold, #c9a96e);
        flex-shrink: 0;
    }

    .help-section-header h4 {
        font-family: var(--font-serif, 'Cormorant Garamond', serif);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--navy, #262439);
        margin: 0;
    }

    .help-section-count {
        margin-left: auto;
        font-size: 0.55rem;
        color: var(--gray-500, #9a928a);
        background: var(--gray-100, #f8f6f3);
        padding: 1px 10px;
        border-radius: 60px;
    }

    /* FAQ Categories - Horizontal Scroll */
    .help-faq-categories-wrapper {
        overflow-x: auto;
        margin-bottom: 12px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .help-faq-categories-wrapper::-webkit-scrollbar {
        display: none;
    }

    .help-faq-categories {
        display: flex;
        gap: 6px;
        min-width: max-content;
    }

    .help-faq-category {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 5px 14px;
        border-radius: 60px;
        font-size: 0.6rem;
        font-weight: 500;
        color: var(--gray-600, #7a736b);
        background: var(--gray-100, #f8f6f3);
        cursor: pointer;
        transition: all 0.3s ease;
        border: 1.5px solid transparent;
        white-space: nowrap;
    }

    .help-faq-category i {
        font-size: 0.6rem;
    }

    .help-faq-category:hover {
        color: var(--navy, #262439);
        border-color: var(--gray-300, #d5cfc7);
    }

    .help-faq-category.active {
        background: var(--navy, #262439);
        color: var(--white, #ffffff);
        border-color: var(--navy, #262439);
    }

    .help-faq-category .category-count {
        display: inline-block;
        font-size: 0.45rem;
        background: rgba(255, 255, 255, 0.2);
        padding: 0 5px;
        border-radius: 60px;
        min-width: 14px;
        text-align: center;
    }

    .help-faq-category.active .category-count {
        background: rgba(255, 255, 255, 0.2);
    }

    /* FAQ Accordion - Clean */
    .help-faq-accordion {
        display: flex;
        flex-direction: column;
        gap: 4px;
        max-height: 320px;
        overflow-y: auto;
        padding-right: 2px;
    }

    .help-faq-accordion::-webkit-scrollbar {
        width: 2px;
    }

    .help-faq-accordion::-webkit-scrollbar-track {
        background: var(--gray-100, #f8f6f3);
        border-radius: 4px;
    }

    .help-faq-accordion::-webkit-scrollbar-thumb {
        background: var(--gold, #c9a96e);
        border-radius: 4px;
    }

    /* FAQ Item - Minimal */
    .faq-accordion-item {
        border: 1px solid var(--gray-200, #ede9e3);
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .faq-accordion-item:hover {
        border-color: var(--gray-300, #d5cfc7);
    }

    .faq-accordion-item.open {
        border-color: var(--gold, #c9a96e);
        box-shadow: 0 2px 12px rgba(201, 169, 110, 0.06);
    }

    /* FAQ Question */
    .faq-accordion-question {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        cursor: pointer;
        background: var(--white, #ffffff);
        transition: all 0.3s ease;
    }

    .faq-accordion-question:hover {
        background: var(--gray-100, #f8f6f3);
    }

    .faq-accordion-question .faq-q-icon {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--cream-light, #f0ebe4);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.5rem;
        color: var(--gold, #c9a96e);
        flex-shrink: 0;
    }

    .faq-accordion-question .faq-q-text {
        flex: 1;
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--navy, #262439);
        line-height: 1.3;
    }

    .faq-accordion-question .faq-q-arrow {
        font-size: 0.5rem;
        color: var(--gray-400, #b8b0a8);
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }

    .faq-accordion-item.open .faq-q-arrow {
        transform: rotate(180deg);
        color: var(--gold, #c9a96e);
    }

    .faq-accordion-item .faq-q-category {
        font-size: 0.45rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--gray-400, #b8b0a8);
        padding: 1px 8px;
        background: var(--gray-100, #f8f6f3);
        border-radius: 60px;
        flex-shrink: 0;
    }

    /* FAQ Answer */
    .faq-accordion-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.3s ease;
        padding: 0 14px;
        font-size: 0.75rem;
        color: var(--gray-600, #7a736b);
        line-height: 1.7;
    }

    .faq-accordion-item.open .faq-accordion-answer {
        max-height: 500px;
        padding: 0 14px 14px;
    }

    .faq-accordion-answer strong {
        color: var(--navy, #262439);
    }

    .faq-accordion-answer .faq-link {
        color: var(--gold, #c9a96e);
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .faq-accordion-answer .faq-link:hover {
        text-decoration: underline;
    }

    .faq-accordion-answer ul,
    .faq-accordion-answer ol {
        padding-left: 16px;
        margin: 4px 0;
    }

    .faq-accordion-answer ul li,
    .faq-accordion-answer ol li {
        padding: 2px 0;
        color: var(--gray-600, #7a736b);
        font-size: 0.73rem;
    }

    /* FAQ Answer - Quick Actions */
    .faq-accordion-answer .faq-quick-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 8px;
    }

    .faq-accordion-answer .faq-quick-actions .btn-sm {
        padding: 4px 14px;
        font-size: 0.6rem;
        border-radius: 60px;
    }

    /* View All Button */
    .help-faq-view-all {
        text-align: center;
        margin-top: 10px;
    }

    .faq-view-all-btn {
        background: none;
        border: none;
        color: var(--gray-500, #9a928a);
        font-size: 0.65rem;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        border-radius: 60px;
        font-family: var(--font-sans, 'Inter', sans-serif);
    }

    .faq-view-all-btn:hover {
        color: var(--gold, #c9a96e);
        background: var(--gray-100, #f8f6f3);
    }

    .faq-view-all-btn i {
        font-size: 0.5rem;
        transition: transform 0.3s ease;
    }

    .faq-view-all-btn:hover i {
        transform: translateY(2px);
    }

    /* ================================================================ */
    /* RESPONSIVE - FAQ SECTION                                      */
    /* ================================================================ */

    @media (max-width: 768px) {
        .help-section-header h4 {
            font-size: 0.85rem;
        }

        .faq-accordion-question {
            padding: 8px 12px;
        }

        .faq-accordion-question .faq-q-text {
            font-size: 0.72rem;
        }

        .faq-accordion-answer {
            font-size: 0.7rem;
        }

        .faq-accordion-answer ul li,
        .faq-accordion-answer ol li {
            font-size: 0.68rem;
        }

        .help-faq-accordion {
            max-height: 280px;
        }

        .help-faq-category {
            font-size: 0.55rem;
            padding: 4px 10px;
        }

        .help-faq-category i {
            font-size: 0.5rem;
        }
    }

    @media (max-width: 480px) {
        .help-faq-accordion {
            max-height: 250px;
        }

        .faq-accordion-question .faq-q-text {
            font-size: 0.68rem;
        }

        .faq-accordion-answer {
            font-size: 0.65rem;
            padding: 0 10px;
        }

        .faq-accordion-item.open .faq-accordion-answer {
            padding: 0 10px 10px;
        }

        .faq-accordion-question .faq-q-category {
            display: none;
        }

        .help-faq-category span:not(.category-count) {
            display: none;
        }

        .help-faq-category i {
            font-size: 0.6rem;
        }

        .help-faq-category .category-count {
            font-size: 0.4rem;
            padding: 0 4px;
            min-width: 12px;
        }
    }

    /* ---- Feedback Entry ---- */
    .help-feedback-entry {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--gray-200, #ede9e3);
    }

    .feedback-entry-divider {
        text-align: center;
        font-size: 0.6rem;
        color: var(--gray-500, #9a928a);
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 8px;
    }

    .feedback-entry-actions {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }

    .feedback-entry-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 10px 6px;
        border-radius: 8px;
        border: 1px solid var(--gray-200, #ede9e3);
        background: var(--white, #ffffff);
        color: var(--gray-600, #7a736b);
        font-family: var(--font-sans, 'Inter', sans-serif);
        font-size: 0.6rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .feedback-entry-btn:hover {
        border-color: var(--gold, #c9a96e);
        color: var(--navy, #262439);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .feedback-entry-btn i {
        font-size: 1rem;
        color: var(--gold, #c9a96e);
    }

    /* ---- Still Need Help ---- */
    .help-still-need {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        background: var(--cream-light, #f0ebe4);
        border-radius: 8px;
        border: 1px solid rgba(201, 169, 110, 0.15);
        margin-top: 14px;
    }

    .still-need-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--gold, #c9a96e);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white, #ffffff);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .help-still-need div strong {
        display: block;
        font-size: 0.8rem;
        color: var(--navy, #262439);
    }

    .help-still-need div p {
        font-size: 0.7rem;
        color: var(--gray-600, #7a736b);
        margin: 0 0 6px;
    }

    .still-need-actions {
        display: flex;
        gap: 10px;
    }

    .still-need-call,
    .still-need-email {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.65rem;
        font-weight: 500;
        color: var(--navy, #262439);
        text-decoration: none;
        padding: 4px 12px;
        border-radius: 60px;
        background: var(--white, #ffffff);
        transition: all 0.3s ease;
    }

    .still-need-call:hover,
    .still-need-email:hover {
        background: var(--gold, #c9a96e);
        color: var(--white, #ffffff);
    }

    .still-need-call i,
    .still-need-email i {
        font-size: 0.6rem;
    }

    /* ---- Chat Box ---- */
    .help-chat-box {
        display: none;
        flex-direction: column;
        height: 100%;
        background: var(--white, #ffffff);
    }

    .help-chat-box.open {
        display: flex;
    }

    .chat-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
        border-bottom: 1px solid var(--gray-200, #ede9e3);
        background: var(--gray-100, #f8f6f3);
        flex-shrink: 0;
    }

    .chat-header span {
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--navy, #262439);
    }

    .chat-header span i {
        color: var(--gold, #c9a96e);
        margin-right: 6px;
    }

    .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 16px 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-height: 300px;
        max-height: 400px;
    }

    .chat-messages::-webkit-scrollbar {
        width: 3px;
    }

    .chat-messages::-webkit-scrollbar-track {
        background: var(--gray-100, #f8f6f3);
    }

    .chat-messages::-webkit-scrollbar-thumb {
        background: var(--gold, #c9a96e);
        border-radius: 3px;
    }

    .chat-message {
        display: flex;
        gap: 10px;
        animation: chatMessageIn 0.3s ease;
    }

    @keyframes chatMessageIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .chat-message .message-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--gold, #c9a96e);
        color: var(--white, #ffffff);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.7rem;
        flex-shrink: 0;
    }

    .chat-message.bot .message-avatar {
        background: var(--gold, #c9a96e);
    }

    .chat-message.user .message-avatar {
        background: var(--navy, #262439);
    }

    .chat-message .message-content {
        background: var(--gray-100, #f8f6f3);
        padding: 10px 14px;
        border-radius: 10px;
        border-top-left-radius: 4px;
        max-width: 85%;
        font-size: 0.82rem;
        color: var(--gray-700, #5a5450);
        line-height: 1.6;
    }

    .chat-message.user .message-content {
        background: var(--navy, #262439);
        color: var(--white, #ffffff);
        border-top-left-radius: 10px;
        border-top-right-radius: 4px;
    }

    .chat-message .message-content p {
        margin: 0;
    }

    .chat-message .message-content .typing-dots {
        display: inline-flex;
        gap: 4px;
        padding: 4px 0;
    }

    .chat-message .message-content .typing-dots span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gray-400, #b8b0a8);
        animation: typingDot 1.4s infinite ease-in-out;
    }

    .chat-message .message-content .typing-dots span:nth-child(2) {
        animation-delay: 0.2s;
    }

    .chat-message .message-content .typing-dots span:nth-child(3) {
        animation-delay: 0.4s;
    }

    @keyframes typingDot {
        0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
        30% { transform: translateY(-4px); opacity: 1; }
    }

    .chat-input-area {
        display: flex;
        border-top: 1px solid var(--gray-200, #ede9e3);
        padding: 10px 16px;
        gap: 10px;
        background: var(--white, #ffffff);
        flex-shrink: 0;
    }

    .chat-input-area input {
        flex: 1;
        padding: 8px 14px;
        border: 1px solid var(--gray-300, #d5cfc7);
        border-radius: 60px;
        font-family: var(--font-sans, 'Inter', sans-serif);
        font-size: 0.85rem;
        outline: none;
        transition: all 0.3s ease;
    }

    .chat-input-area input:focus {
        border-color: var(--gold, #c9a96e);
        box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.1);
    }

    .chat-input-area button {
        background: var(--navy, #262439);
        color: var(--white, #ffffff);
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .chat-input-area button:hover {
        background: var(--gold, #c9a96e);
        transform: scale(1.05);
    }

    /* ================================================================ */
    /* FEEDBACK MODAL                                                 */
    /* ================================================================ */

    .ozhea-feedback-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 10002;
        background: rgba(10, 10, 10, 0.7);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: modalFadeIn 0.4s ease;
    }

    .ozhea-feedback-modal.open {
        display: flex;
    }

    @keyframes modalFadeIn {
        0% {
            opacity: 0;
            backdrop-filter: blur(0px);
        }
        100% {
            opacity: 1;
            backdrop-filter: blur(20px);
        }
    }

    @keyframes modalScaleIn {
        0% {
            transform: scale(0.92);
            opacity: 0;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    .feedback-modal-content {
        background: var(--white, #ffffff);
        border-radius: 16px;
        max-width: 640px;
        width: 100%;
        max-height: 92vh;
        overflow-y: auto;
        padding: 40px 36px 32px;
        position: relative;
        animation: modalScaleIn 0.4s ease;
        box-shadow: 0 40px 120px rgba(0, 0, 0, 0.25);
    }

    .feedback-modal-content::-webkit-scrollbar {
        width: 4px;
    }

    .feedback-modal-content::-webkit-scrollbar-track {
        background: var(--gray-100, #f8f6f3);
        border-radius: 4px;
    }

    .feedback-modal-content::-webkit-scrollbar-thumb {
        background: var(--gold, #c9a96e);
        border-radius: 4px;
    }

    .feedback-modal-close {
        position: absolute;
        top: 14px;
        right: 18px;
        background: none;
        border: none;
        font-size: 1.2rem;
        color: var(--gray-600, #7a736b);
        cursor: pointer;
        transition: all 0.3s ease;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .feedback-modal-close:hover {
        color: var(--navy, #262439);
        background: var(--gray-100, #f8f6f3);
        transform: rotate(90deg);
    }

    /* ---- Feedback Modal Header ---- */
    .feedback-modal-header {
        text-align: center;
        margin-bottom: 24px;
    }

    .feedback-icon-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: var(--cream-light, #f0ebe4);
        margin-bottom: 10px;
    }

    .feedback-icon {
        font-size: 2rem;
    }

    .feedback-badge {
        display: inline-block;
        font-family: var(--font-sans, 'Inter', sans-serif);
        font-size: 0.5rem;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--white, #ffffff);
        background: var(--navy, #262439);
        padding: 3px 16px;
        border-radius: 60px;
        margin-bottom: 4px;
    }

    .feedback-modal-header h2 {
        font-family: var(--font-serif, 'Cormorant Garamond', serif);
        font-size: 1.8rem;
        font-weight: 500;
        color: var(--navy, #262439);
        margin: 0;
    }

    .feedback-modal-header h2 span {
        color: var(--gold, #c9a96e);
        font-weight: 600;
    }

    .feedback-modal-header p {
        color: var(--gray-600, #7a736b);
        font-size: 0.85rem;
        margin: 2px 0 0;
    }

    /* ---- Feedback Type Selector ---- */
    .feedback-type-selector {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
    }

    .feedback-type-btn {
        flex: 1;
        padding: 10px 12px;
        border-radius: 8px;
        border: 1.5px solid var(--gray-200, #ede9e3);
        background: var(--white, #ffffff);
        color: var(--gray-600, #7a736b);
        font-family: var(--font-sans, 'Inter', sans-serif);
        font-size: 0.7rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .feedback-type-btn:hover {
        border-color: var(--gray-300, #d5cfc7);
        color: var(--navy, #262439);
    }

    .feedback-type-btn.active {
        border-color: var(--gold, #c9a96e);
        background: var(--cream-light, #f0ebe4);
        color: var(--navy, #262439);
    }

    .feedback-type-btn.active i {
        color: var(--gold, #c9a96e);
    }

    .feedback-type-btn i {
        font-size: 0.8rem;
    }

    /* ---- Form Groups ---- */
    .form-group {
        margin-bottom: 14px;
    }

    .form-group label {
        display: block;
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--gray-700, #5a5450);
        margin-bottom: 4px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 10px 14px;
        border: 1.5px solid var(--gray-200, #ede9e3);
        border-radius: 8px;
        font-family: var(--font-sans, 'Inter', sans-serif);
        font-size: 0.85rem;
        transition: all 0.3s ease;
        background: var(--white, #ffffff);
        color: var(--navy, #262439);
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: var(--gold, #c9a96e);
        box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.1);
    }

    .form-group textarea {
        resize: vertical;
        min-height: 80px;
    }

    .required-star {
        color: #e74c3c;
        margin-left: 2px;
    }

    /* ---- Urgency Selector ---- */
    .urgency-selector {
        display: flex;
        gap: 12px;
    }

    .urgency-option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        border-radius: 60px;
        border: 1.5px solid var(--gray-200, #ede9e3);
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.75rem;
        color: var(--gray-600, #7a736b);
    }

    .urgency-option:hover {
        border-color: var(--gray-300, #d5cfc7);
    }

    .urgency-option.active {
        border-color: var(--gold, #c9a96e);
        background: var(--cream-light, #f0ebe4);
    }

    .urgency-option input[type="radio"] {
        display: none;
    }

    .urgency-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
    }

    .urgency-dot.low {
        background: #2ecc71;
    }

    .urgency-dot.medium {
        background: #f39c12;
    }

    .urgency-dot.high {
        background: #e74c3c;
    }

    /* ---- File Upload ---- */
    .feedback-file-upload {
        border: 2px dashed var(--gray-300, #d5cfc7);
        border-radius: 8px;
        padding: 24px 20px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
    }

    .feedback-file-upload:hover {
        border-color: var(--gold, #c9a96e);
        background: var(--cream-light, #f0ebe4);
    }

    .feedback-file-upload i {
        font-size: 1.6rem;
        color: var(--gray-400, #b8b0a8);
        display: block;
        margin-bottom: 4px;
    }

    .feedback-file-upload span {
        display: block;
        font-size: 0.85rem;
        color: var(--gray-600, #7a736b);
    }

    .feedback-file-upload small {
        font-size: 0.7rem;
        color: var(--gray-500, #9a928a);
    }

    .feedback-file-upload input[type="file"] {
        display: none;
    }

    .feedback-file-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
    }

    .feedback-file-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        background: var(--gray-100, #f8f6f3);
        border-radius: 60px;
        font-size: 0.7rem;
        color: var(--gray-600, #7a736b);
        border: 1px solid var(--gray-200, #ede9e3);
    }

    .feedback-file-item .file-remove {
        cursor: pointer;
        color: #e74c3c;
        font-size: 0.65rem;
    }

    /* ---- Checkbox ---- */
    .checkbox-group {
        margin-top: 4px;
    }

    .checkbox-label {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 0.8rem;
        color: var(--gray-600, #7a736b);
        cursor: pointer;
        line-height: 1.5;
    }

    .checkbox-label input[type="checkbox"] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-top: 2px;
        accent-color: var(--gold, #c9a96e);
        cursor: pointer;
    }

    /* ---- Submit Button ---- */
    .feedback-submit-btn {
        width: 100%;
        justify-content: center;
        padding: 14px;
        font-size: 0.85rem;
        background: var(--gold, #c9a96e);
        color: var(--white, #ffffff);
        border: none;
        border-radius: 60px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-sans, 'Inter', sans-serif);
    }

    .feedback-submit-btn:hover {
        background: #b8965a;
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(201, 169, 110, 0.2);
    }

    .feedback-form-error {
        color: #e74c3c;
        font-size: 0.8rem;
        margin-top: 8px;
        text-align: center;
        padding: 8px;
        background: rgba(231, 76, 60, 0.05);
        border-radius: 8px;
    }

    /* ================================================================ */
    /* FEEDBACK SUCCESS MODAL                                         */
    /* ================================================================ */

    .feedback-success-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 10003;
        background: rgba(10, 10, 10, 0.7);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: modalFadeIn 0.4s ease;
    }

    .feedback-success-modal.open {
        display: flex;
    }

    .feedback-success-content {
        background: var(--white, #ffffff);
        border-radius: 16px;
        max-width: 520px;
        width: 100%;
        padding: 48px 40px 40px;
        text-align: center;
        animation: modalScaleIn 0.4s ease;
        box-shadow: 0 40px 120px rgba(0, 0, 0, 0.25);
    }

    .feedback-success-icon {
        font-size: 4rem;
        color: #2ecc71;
        background: rgba(46, 204, 113, 0.1);
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
    }

    .feedback-success-content h2 {
        font-family: var(--font-serif, 'Cormorant Garamond', serif);
        font-size: 1.8rem;
        font-weight: 600;
        color: var(--navy, #262439);
        margin-bottom: 4px;
    }

    .feedback-success-content h2 span {
        color: var(--gold, #c9a96e);
    }

    .feedback-success-content p {
        color: var(--gray-600, #7a736b);
        font-size: 0.95rem;
        margin-bottom: 16px;
    }

    /* ---- Success Reference ---- */
    .feedback-success-ref {
        background: var(--gray-100, #f8f6f3);
        padding: 12px 20px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .ref-label {
        display: block;
        font-size: 0.65rem;
        color: var(--gray-500, #9a928a);
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .ref-number {
        display: block;
        font-family: var(--font-serif, 'Cormorant Garamond', serif);
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--gold, #c9a96e);
    }

    /* ---- Success Timeline ---- */
    .feedback-success-timeline {
        text-align: left;
        margin: 16px 0 24px;
        padding: 0 16px;
    }

    .timeline-step {
        display: flex;
        gap: 14px;
        padding: 10px 0;
        border-left: 2px solid var(--gray-300, #d5cfc7);
        padding-left: 20px;
        position: relative;
        opacity: 0.5;
    }

    .timeline-step:first-child {
        border-left-color: var(--gold, #c9a96e);
    }

    .timeline-step.completed {
        opacity: 1;
    }

    .timeline-step.completed .step-dot {
        background: var(--gold, #c9a96e);
        border-color: var(--gold, #c9a96e);
    }

    .timeline-step .step-dot {
        position: absolute;
        left: -6px;
        top: 14px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--gray-300, #d5cfc7);
        border: 2px solid var(--gray-300, #d5cfc7);
    }

    .timeline-step.completed .step-dot {
        background: #2ecc71;
        border-color: #2ecc71;
    }

    .timeline-step strong {
        display: block;
        font-size: 0.8rem;
        color: var(--navy, #262439);
    }

    .timeline-step span {
        font-size: 0.7rem;
        color: var(--gray-600, #7a736b);
    }

    /* ---- Success Actions ---- */
    .feedback-success-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .feedback-success-actions .btn {
        min-width: 140px;
        justify-content: center;
    }

    .feedback-success-actions .btn-gold {
        background: var(--gold, #c9a96e);
        color: var(--white, #ffffff);
        border: none;
        border-radius: 60px;
        padding: 12px 28px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans, 'Inter', sans-serif);
    }

    .feedback-success-actions .btn-gold:hover {
        background: #b8965a;
        transform: translateY(-2px);
    }

    .feedback-success-actions .btn-outline {
        background: transparent;
        color: var(--navy, #262439);
        border: 1.5px solid var(--navy, #262439);
        border-radius: 60px;
        padding: 12px 28px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans, 'Inter', sans-serif);
    }

    .feedback-success-actions .btn-outline:hover {
        background: var(--navy, #262439);
        color: var(--white, #ffffff);
        transform: translateY(-2px);
    }

    .feedback-track-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.8rem;
        color: var(--gold, #c9a96e);
        text-decoration: none;
        transition: all 0.3s ease;
        padding: 8px 16px;
    }

    .feedback-track-link:hover {
        gap: 10px;
        color: var(--navy, #262439);
    }

    /* ================================================================ */
    /* RESPONSIVE STYLES                                              */
    /* ================================================================ */

    @media (max-width: 768px) {
        /* Concierge Button */
        .help-button {
            padding: 12px 16px;
            font-size: 0.75rem;
            right: 16px;
            bottom: 16px;
        }

        .help-button span:not(.help-badge) {
            display: none;
        }

        .help-button i {
            font-size: 1.2rem;
        }

        /* Help Panel */
        .help-panel {
            right: 10px;
            bottom: 80px;
            width: 94%;
            max-height: 80vh;
            border-radius: 12px;
        }

        /* Feedback Modal */
        .feedback-modal-content {
            padding: 28px 20px 24px;
            margin: 10px;
            max-height: 85vh;
        }

        .feedback-modal-header h2 {
            font-size: 1.4rem;
        }

        .feedback-type-selector {
            flex-direction: column;
            gap: 6px;
        }

        .feedback-type-btn {
            padding: 8px 12px;
            font-size: 0.65rem;
        }

        .urgency-selector {
            flex-wrap: wrap;
        }

        /* Success Modal */
        .feedback-success-content {
            padding: 32px 24px 28px;
            margin: 10px;
        }

        .feedback-success-actions {
            flex-direction: column;
            align-items: center;
        }

        .feedback-success-actions .btn {
            width: 100%;
            max-width: 280px;
        }

        /* Feedback Entry */
        .feedback-entry-actions {
            grid-template-columns: 1fr;
        }

        /* Quick Actions */
        .help-quick-actions {
            grid-template-columns: 1fr 1fr;
        }

        /* FAQ Categories */
        .help-faq-categories {
            gap: 4px;
            overflow-x: auto;
            flex-wrap: nowrap;
            padding-bottom: 4px;
        }

        .help-faq-category {
            font-size: 0.55rem;
            padding: 4px 12px;
            white-space: nowrap;
        }

        /* Still Need Help */
        .help-still-need {
            flex-direction: column;
            text-align: center;
        }

        .still-need-actions {
            flex-direction: column;
            gap: 4px;
            width: 100%;
        }

        .still-need-call,
        .still-need-email {
            justify-content: center;
            width: 100%;
        }

        /* Chat */
        .chat-messages {
            min-height: 200px;
            max-height: 300px;
        }
    }

    @media (max-width: 480px) {
        .help-button {
            padding: 10px 14px;
            right: 12px;
            bottom: 12px;
        }

        .help-button i {
            font-size: 1.1rem;
        }

        .help-panel {
            right: 6px;
            bottom: 70px;
            width: 96%;
            border-radius: 10px;
        }

        .help-panel .help-header {
            padding: 14px 18px;
        }

        .help-panel .help-header h3 {
            font-size: 1rem;
        }

        .help-panel .help-menu {
            padding: 12px 14px 16px;
        }

        .help-quick-actions {
            grid-template-columns: 1fr 1fr;
            gap: 6px;
        }

        .help-quick-btn {
            padding: 8px 10px;
            font-size: 0.65rem;
            gap: 4px;
        }

        .help-quick-btn i {
            font-size: 0.8rem;
        }

        .help-faq-item .faq-question {
            font-size: 0.75rem;
            padding: 10px 12px;
        }

        .help-faq-item .faq-answer {
            font-size: 0.72rem;
        }

        .feedback-modal-content {
            padding: 20px 14px 18px;
            border-radius: 12px;
        }

        .feedback-modal-header h2 {
            font-size: 1.2rem;
        }

        .feedback-icon-wrapper {
            width: 48px;
            height: 48px;
        }

        .feedback-icon {
            font-size: 1.6rem;
        }

        .feedback-success-content h2 {
            font-size: 1.4rem;
        }

        .feedback-success-icon {
            width: 60px;
            height: 60px;
            font-size: 3rem;
        }

        .feedback-success-content {
            padding: 24px 16px 20px;
        }

        .feedback-success-timeline {
            padding: 0 8px;
        }

        .feedback-track-link {
            font-size: 0.7rem;
        }

        .chat-messages {
            min-height: 160px;
            max-height: 250px;
            padding: 12px 14px;
        }

        .chat-input-area {
            padding: 8px 12px;
        }

        .chat-input-area input {
            font-size: 0.75rem;
            padding: 6px 12px;
        }

        .chat-input-area button {
            width: 34px;
            height: 34px;
            font-size: 0.8rem;
        }
    }

    /* ================================================================ */
    /* UTILITY ANIMATIONS                                             */
    /* ================================================================ */

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Toast Notification (for feedback confirmation) */
    .toast-notification {
        position: fixed;
        bottom: 100px;
        right: 24px;
        background: var(--navy, #262439);
        color: var(--white, #ffffff);
        padding: 16px 28px;
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(38, 36, 57, 0.2);
        font-size: 0.9rem;
        z-index: 3000;
        animation: fadeIn 0.3s ease;
        max-width: 360px;
        border-left: 4px solid var(--gold, #c9a96e);
        font-family: var(--font-sans, 'Inter', sans-serif);
    }

    .toast-notification.success {
        border-left-color: #2ecc71;
    }

    .toast-notification.error {
        border-left-color: #e74c3c;
    }

    .toast-notification.info {
        border-left-color: var(--gold, #c9a96e);
    }

    /* ================================================================ */
    /* THE GROOM PAGE - OVERHAULED STYLES                            */
    /* ================================================================ */

    /* ================================================================ */
    /* HERO SECTION                                                   */
    /* ================================================================ */

    .groom-hero-section {
        position: relative;
        width: 100%;
        height: 100vh;
        min-height: 700px;
        max-height: 900px;
        overflow: hidden;
        background: var(--navy);
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
    }

    .groom-hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .groom-hero-bg video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .groom-hero-bg .groom-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(38, 36, 57, 0.10) 0%,
            rgba(38, 36, 57, 0.30) 40%,
            rgba(38, 36, 57, 0.55) 70%,
            rgba(38, 36, 57, 0.75) 100%
        );
    }

    .groom-hero-content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 40px;
        max-width: 1240px;
        margin: 0 auto;
        width: 100%;
    }

    .groom-hero-badge {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 6px;
        text-transform: uppercase;
        color: var(--gold);
        display: inline-block;
        padding: 4px 20px;
        border: 1px solid rgba(201, 169, 110, 0.25);
        border-radius: 60px;
        backdrop-filter: blur(8px);
        margin-bottom: 16px;
        width: fit-content;
    }

    .groom-hero-title {
        font-family: var(--font-serif);
        font-size: 4.8rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
        letter-spacing: -0.5px;
        line-height: 1.05;
        margin-bottom: 8px;
    }

    .groom-hero-title span {
        color: var(--gold);
        font-weight: 600;
    }

    .groom-hero-description {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
        text-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
        max-width: 560px;
        margin-bottom: 24px;
    }

    .groom-hero-buttons {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
    }

    .groom-hero-scroll {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        opacity: 0.5;
        z-index: 3;
    }

    .groom-hero-scroll span {
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 400;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
    }

    .groom-hero-scroll .scroll-line {
        width: 1px;
        height: 40px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
        animation: scrollPulse 2s ease-in-out infinite;
    }

    @keyframes scrollPulse {
        0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
        50% { opacity: 1; transform: scaleY(1); }
    }

    /* ================================================================ */
    /* THE JOURNEY - 4 Step Process                                  */
    /* ================================================================ */

    .groom-journey {
        padding: 80px 0;
        background: var(--white);
    }

    .groom-journey-header {
        text-align: center;
        margin-bottom: 48px;
    }

    .groom-journey-steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .journey-step {
        text-align: center;
        padding: 32px 20px;
        background: var(--gray-100);
        border-radius: var(--radius);
        border: 1px solid transparent;
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        position: relative;
    }

    .journey-step:hover {
        transform: translateY(-6px);
        border-color: var(--gold);
        box-shadow: var(--shadow-hover);
        background: var(--white);
    }

    .journey-step .step-number {
        font-family: var(--font-serif);
        font-size: 0.65rem;
        font-weight: 600;
        color: var(--gold);
        letter-spacing: 2px;
        margin-bottom: 12px;
    }

    .journey-step .step-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        font-size: 1.6rem;
        color: var(--gold);
        transition: var(--transition);
    }

    .journey-step:hover .step-icon {
        background: var(--gold);
        color: var(--white);
        transform: scale(1.05);
    }

    .journey-step h4 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .journey-step p {
        font-size: 0.85rem;
        color: var(--gray-600);
        margin: 0;
    }

    /* ================================================================ */
    /* STYLE COLLECTIONS                                              */
    /* ================================================================ */

    .groom-collections {
        padding: 80px 0;
        background: var(--gray-100);
    }

    .groom-collections-header {
        text-align: center;
        margin-bottom: 48px;
    }

    .groom-collections-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 24px;
    }

    .groom-collection-card {
        position: relative;
        border-radius: var(--radius);
        overflow: hidden;
        cursor: pointer;
        background: var(--white);
        box-shadow: 0 4px 20px rgba(38, 36, 57, 0.04);
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .groom-collection-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-hover);
    }

    .groom-collection-card.featured {
        border: 2px solid var(--gold);
    }

    .groom-collection-card .collection-image {
        position: relative;
        height: 400px;
        background-size: cover;
        background-position: center;
        overflow: hidden;
    }

    .groom-collection-card .collection-image::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(38, 36, 57, 0.05) 0%,
            rgba(38, 36, 57, 0.20) 40%,
            rgba(38, 36, 57, 0.50) 75%,
            rgba(38, 36, 57, 0.75) 100%
        );
        transition: background 0.5s ease;
    }

    .groom-collection-card:hover .collection-image::after {
        background: linear-gradient(
            to bottom,
            rgba(38, 36, 57, 0.08) 0%,
            rgba(38, 36, 57, 0.25) 40%,
            rgba(38, 36, 57, 0.55) 75%,
            rgba(38, 36, 57, 0.85) 100%
        );
    }

    .groom-collection-card .collection-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 32px 28px;
        z-index: 2;
    }

    .groom-collection-card .collection-badge {
        display: inline-block;
        font-family: var(--font-sans);
        font-size: 0.5rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 2px;
        padding: 2px 14px;
        border-radius: 60px;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(4px);
        color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.08);
        width: fit-content;
        margin-bottom: 8px;
    }

    .groom-collection-card .collection-title {
        font-family: var(--font-serif);
        font-size: 2rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
        margin: 0 0 4px;
    }

    .groom-collection-card .collection-title span {
        color: var(--gold);
        font-weight: 600;
    }

    .groom-collection-card .collection-desc {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.6);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
        margin: 0 0 12px;
    }

    .groom-collection-card .collection-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 500;
        color: var(--gold);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
    }

    .groom-collection-card:hover .collection-cta {
        gap: 14px;
    }

    .groom-collection-card .collection-cta i {
        transition: transform 0.3s ease;
    }

    .groom-collection-card:hover .collection-cta i {
        transform: translateX(4px);
    }

    .groom-collection-card .collection-stats {
        display: flex;
        justify-content: space-between;
        padding: 12px 24px;
        background: var(--white);
        border-top: 1px solid var(--gray-200);
        font-size: 0.7rem;
        color: var(--gray-600);
    }

    .groom-collection-card .collection-stats i {
        color: var(--gold);
        margin-right: 4px;
    }

    /* ================================================================ */
    /* GROOM LOOKBOOK                                                */
    /* ================================================================ */

    .groom-lookbook {
        padding: 80px 0;
        background: var(--white);
    }

    .groom-lookbook-header {
        text-align: center;
        margin-bottom: 48px;
    }

    .groom-lookbook-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .groom-look-card {
        position: relative;
        border-radius: var(--radius);
        overflow: hidden;
        cursor: pointer;
        aspect-ratio: 3/4;
        background: var(--gray-100);
    }

    .groom-look-card.featured {
        grid-column: span 2;
        grid-row: span 2;
        aspect-ratio: auto;
    }

    .groom-look-card .look-image {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .groom-look-card:hover .look-image {
        transform: scale(1.05);
    }

    .groom-look-card .look-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(38, 36, 57, 0.05) 0%,
            rgba(38, 36, 57, 0.20) 40%,
            rgba(38, 36, 57, 0.50) 75%,
            rgba(38, 36, 57, 0.75) 100%
        );
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 24px 20px;
        transition: background 0.5s ease;
    }

    .groom-look-card:hover .look-overlay {
        background: linear-gradient(
            to bottom,
            rgba(38, 36, 57, 0.08) 0%,
            rgba(38, 36, 57, 0.25) 40%,
            rgba(38, 36, 57, 0.55) 75%,
            rgba(38, 36, 57, 0.85) 100%
        );
    }

    .groom-look-card .look-badge {
        display: inline-block;
        font-family: var(--font-sans);
        font-size: 0.5rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        padding: 2px 12px;
        border-radius: 60px;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(4px);
        color: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.08);
        width: fit-content;
        margin-bottom: 8px;
    }

    .groom-look-card .look-info h4 {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
        margin: 0;
    }

    .groom-look-card .look-info p {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.5);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
        margin: 2px 0 0;
    }

    /* ================================================================ */
    /* THE EXPERIENCE                                                */
    /* ================================================================ */

    .groom-experience {
        padding: 80px 0;
        background: var(--gray-100);
    }

    .groom-experience-header {
        text-align: center;
        margin-bottom: 48px;
    }

    .groom-experience-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .experience-card {
        text-align: center;
        padding: 32px 24px;
        background: var(--white);
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .experience-card:hover {
        transform: translateY(-6px);
        border-color: var(--gold);
        box-shadow: var(--shadow-hover);
    }

    .experience-card .experience-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        font-size: 1.6rem;
        color: var(--gold);
        transition: var(--transition);
    }

    .experience-card:hover .experience-icon {
        background: var(--gold);
        color: var(--white);
        transform: scale(1.05);
    }

    .experience-card h4 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .experience-card p {
        font-size: 0.85rem;
        color: var(--gray-600);
        margin: 0;
    }

    /* ================================================================ */
    /* TESTIMONIALS                                                  */
    /* ================================================================ */

    .groom-testimonials {
        padding: 80px 0;
        background: var(--white);
    }

    .groom-testimonials-header {
        text-align: center;
        margin-bottom: 48px;
    }

    .groom-testimonials-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .groom-testimonials-grid .testimonial-card {
        background: var(--white);
        border-radius: var(--radius);
        padding: 28px 24px;
        border: 1px solid var(--gray-200);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .groom-testimonials-grid .testimonial-card:hover {
        transform: translateY(-4px);
        border-color: var(--gold);
        box-shadow: var(--shadow);
    }

    .groom-testimonials-grid .testimonial-card.featured {
        border-color: var(--gold);
        background: linear-gradient(135deg, var(--white), var(--cream-light));
    }

    .groom-testimonials-grid .testimonial-image {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        margin: 0 auto 12px;
        border: 3px solid var(--gold);
    }

    .groom-testimonials-grid .testimonial-content {
        text-align: center;
    }

    .groom-testimonials-grid .testimonial-rating {
        display: flex;
        justify-content: center;
        gap: 4px;
        color: var(--gold);
        font-size: 0.8rem;
        margin-bottom: 8px;
    }

    .groom-testimonials-grid .testimonial-content p {
        font-size: 0.9rem;
        color: var(--gray-600);
        line-height: 1.7;
        font-style: italic;
        margin: 0 0 12px;
    }

    .groom-testimonials-grid .testimonial-author strong {
        display: block;
        font-size: 0.85rem;
        color: var(--navy);
    }

    .groom-testimonials-grid .testimonial-author span {
        font-size: 0.7rem;
        color: var(--gold);
    }

    /* ================================================================ */
    /* BESPOKE SERVICES                                              */
    /* ================================================================ */

    .groom-services {
        padding: 80px 0;
        background: var(--gray-100);
    }

    .groom-services-header {
        text-align: center;
        margin-bottom: 48px;
    }

    .groom-services-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .service-item {
        text-align: center;
        padding: 32px 20px;
        background: var(--white);
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .service-item:hover {
        transform: translateY(-6px);
        border-color: var(--gold);
        box-shadow: var(--shadow-hover);
    }

    .service-item .service-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 12px;
        font-size: 1.4rem;
        color: var(--gold);
        transition: var(--transition);
    }

    .service-item:hover .service-icon {
        background: var(--gold);
        color: var(--white);
        transform: scale(1.05);
    }

    .service-item h4 {
        font-family: var(--font-serif);
        font-size: 1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .service-item p {
        font-size: 0.85rem;
        color: var(--gray-600);
        line-height: 1.6;
        margin: 0;
    }

    /* ================================================================ */
    /* CTA SECTION                                                   */
    /* ================================================================ */

    .groom-cta {
        padding: 80px 0;
        background: var(--navy);
        color: var(--white);
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .groom-cta-content {
        text-align: center;
        max-width: 720px;
        margin: 0 auto;
    }

    .groom-cta-badge {
        display: inline-block;
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 12px;
    }

    .groom-cta-content h2 {
        font-family: var(--font-serif);
        font-size: 2.8rem;
        font-weight: 500;
        margin-bottom: 8px;
    }

    .groom-cta-content h2 span {
        color: var(--gold);
        font-weight: 600;
    }

    .groom-cta-content p {
        font-size: 1.05rem;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 28px;
    }

    .groom-cta-buttons {
        display: flex;
        gap: 14px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .groom-cta-buttons .btn-gold {
        background: var(--gold);
        color: var(--navy);
    }

    .groom-cta-buttons .btn-gold:hover {
        background: #d4b47a;
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(201, 169, 110, 0.2);
    }

    .groom-cta-buttons .btn-outline-light {
        border-color: rgba(255, 255, 255, 0.3);
        color: var(--white);
    }

    .groom-cta-buttons .btn-outline-light:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: var(--white);
    }

    .groom-cta-trust {
        display: flex;
        justify-content: center;
        gap: 32px;
        margin-top: 28px;
        padding-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.5);
        flex-wrap: wrap;
    }

    .groom-cta-trust i {
        color: var(--gold);
        margin-right: 6px;
    }

    /* ================================================================ */
    /* RESPONSIVE                                                    */
    /* ================================================================ */

    @media (max-width: 1024px) {
        .groom-hero-title {
            font-size: 3.6rem;
        }

        .groom-collections-grid {
            grid-template-columns: 1fr 1fr;
        }

        .groom-lookbook-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .groom-look-card.featured {
            grid-column: span 1;
            grid-row: span 1;
            aspect-ratio: 3/4;
        }

        .groom-experience-grid,
        .groom-services-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .groom-testimonials-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 768px) {
        .groom-hero-section {
            height: 80vh;
            min-height: 500px;
        }

        .groom-hero-title {
            font-size: 2.8rem;
        }

        .groom-hero-description {
            font-size: 1rem;
        }

        .groom-journey-steps {
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .groom-collections-grid {
            grid-template-columns: 1fr;
            max-width: 500px;
            margin: 0 auto;
        }

        .groom-lookbook-grid {
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .groom-experience-grid,
        .groom-services-grid {
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .groom-testimonials-grid {
            grid-template-columns: 1fr;
            max-width: 420px;
            margin: 0 auto;
        }

        .groom-cta-content h2 {
            font-size: 2rem;
        }

        .groom-cta-trust {
            gap: 16px;
            flex-direction: column;
            align-items: center;
        }
    }

    @media (max-width: 480px) {
        .groom-hero-title {
            font-size: 2rem;
        }

        .groom-hero-badge {
            font-size: 0.5rem;
            padding: 3px 14px;
            letter-spacing: 4px;
        }

        .groom-journey-steps {
            grid-template-columns: 1fr;
        }

        .groom-lookbook-grid {
            grid-template-columns: 1fr;
        }

        .groom-experience-grid,
        .groom-services-grid {
            grid-template-columns: 1fr;
        }

        .groom-collection-card .collection-image {
            height: 300px;
        }

        .groom-collection-card .collection-title {
            font-size: 1.5rem;
        }

        .groom-cta-buttons {
            flex-direction: column;
            align-items: center;
        }

        .groom-cta-buttons .btn {
            width: 100%;
            max-width: 280px;
            justify-content: center;
        }
    }

    /* ================================================================
    COLLABORATE WITH US PAGE (Partners)
    ================================================================ */

    /* Hero Section */
    .partners-hero {
        position: relative;
        width: 100%;
        height: 80vh;
        min-height: 600px;
        max-height: 800px;
        overflow: hidden;
        background: var(--navy);
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
        display: flex;
        align-items: center;
    }

    .partners-hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .partners-hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: heroZoom 20s ease-in-out infinite alternate;
    }

    .partners-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(38, 36, 57, 0.10) 0%, rgba(38, 36, 57, 0.30) 40%, rgba(38, 36, 57, 0.55) 70%, rgba(38, 36, 57, 0.75) 100%);
        z-index: 1;
    }

    .partners-hero-content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 40px;
        max-width: 1240px;
        margin: 0 auto;
        width: 100%;
    }

    .partners-hero-badge {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 6px;
        text-transform: uppercase;
        color: var(--gold);
        display: inline-block;
        padding: 4px 20px;
        border: 1px solid rgba(201, 169, 110, 0.25);
        border-radius: 60px;
        backdrop-filter: blur(8px);
        margin-bottom: 16px;
        width: fit-content;
    }

    .partners-hero-content h1 {
        font-family: var(--font-serif);
        font-size: 4.2rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
        letter-spacing: -0.5px;
        line-height: 1.05;
        max-width: 700px;
    }

    .partners-hero-content h1 span {
        color: var(--gold);
        font-weight: 600;
    }

    .partners-hero-content p {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
        max-width: 500px;
        margin-top: 8px;
        margin-bottom: 24px;
    }

    .partners-hero-buttons {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    /* Statistics Section */
    .partners-stats {
        padding: 40px 0;
        background: var(--gray-100);
        border-bottom: 1px solid var(--gray-200);
    }

    .partners-stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        max-width: 900px;
        margin: 0 auto;
    }

    .partners-stat-item {
        text-align: center;
    }

    .partners-stat-number {
        font-family: var(--font-serif);
        font-size: 2.4rem;
        font-weight: 700;
        color: var(--gold);
        line-height: 1.2;
    }

    .partners-stat-label {
        font-size: 0.85rem;
        color: var(--gray-600);
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Partner Showcase */
    .partners-showcase {
        padding: 80px 0;
        background: var(--white);
        border-bottom: 1px solid var(--gray-200);
    }

    .partners-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
        margin-top: 40px;
        align-items: center;
    }

    .partner-card {
        background: var(--gray-100);
        border-radius: var(--radius);
        padding: 24px 16px;
        text-align: center;
        transition: all 0.3s ease;
        cursor: default;
    }

    .partner-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
    }

    .partner-card-icon {
        font-size: 2.4rem;
        margin-bottom: 4px;
    }

    .partner-card-name {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--navy);
    }

    .partner-card-category {
        font-size: 0.6rem;
        color: var(--gray-600);
    }

    .partners-testimonial {
        max-width: 800px;
        margin: 40px auto 0;
        padding: 32px;
        background: var(--cream-light);
        border-radius: var(--radius);
        border-left: 4px solid var(--gold);
        text-align: center;
    }

    .partners-testimonial p {
        font-size: 1rem;
        color: var(--navy);
        font-style: italic;
        margin: 0;
    }

    .partners-testimonial-author {
        margin-top: 8px;
    }

    .partners-testimonial-author strong {
        color: var(--navy);
    }

    .partners-testimonial-author span {
        color: var(--gray-600);
        font-size: 0.85rem;
        display: block;
    }

    .partners-cta {
        text-align: center;
        margin-top: 32px;
    }

    .partners-cta-badge {
        display: inline-block;
        padding: 8px 24px;
        background: var(--gold);
        color: var(--white);
        border-radius: 60px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    .partners-cta p {
        color: var(--gray-600);
        font-size: 0.95rem;
    }

    .partners-cta-link {
        color: var(--gold);
        font-weight: 600;
        text-decoration: none;
        border-bottom: 1px solid var(--gold);
        padding-bottom: 2px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .partners-cta-link:hover {
        color: var(--navy);
        border-bottom-color: var(--navy);
    }

    /* Benefits Section */
    .partners-benefits {
        padding: 80px 0;
        background: var(--white);
    }

    .partners-benefits-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-top: 40px;
    }

    .partners-benefit-card {
        background: var(--gray-100);
        padding: 32px 24px;
        border-radius: var(--radius);
        text-align: center;
        transition: all 0.3s ease;
        border: 1px solid transparent;
        cursor: default;
    }

    .partners-benefit-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .partners-benefit-icon {
        font-size: 2.8rem;
        color: var(--gold);
        margin-bottom: 16px;
    }

    .partners-benefit-card h3 {
        font-family: var(--font-serif);
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 8px;
    }

    .partners-benefit-card p {
        color: var(--gray-600);
        line-height: 1.6;
    }

    /* Opportunities Section */
    .partners-opportunities {
        padding: 80px 0;
        background: var(--gray-100);
    }

    .partners-opportunities-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-top: 40px;
    }

    .partners-opportunity-card {
        background: var(--white);
        border-radius: var(--radius);
        padding: 30px 24px;
        border: 1px solid var(--gray-200);
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .partners-opportunity-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .partners-opportunity-icon {
        font-size: 3rem;
        margin-bottom: 16px;
        text-align: center;
    }

    .partners-opportunity-card h3 {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 8px;
        text-align: center;
    }

    .partners-opportunity-card p {
        color: var(--gray-600);
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 12px;
        text-align: center;
    }

    .partners-opportunity-card ul {
        text-align: left;
        color: var(--gray-600);
        font-size: 0.85rem;
        list-style: none;
        padding: 0;
        margin: 12px 0 16px;
    }

    .partners-opportunity-card ul li {
        padding: 4px 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .partners-opportunity-card ul li i {
        color: var(--gold);
        font-size: 0.8rem;
    }

    /* Partner Testimonials Section */
    .partners-testimonials-section {
        padding: 80px 0;
        background: var(--white);
    }

    .partners-testimonials-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-top: 40px;
    }

    .partners-testimonial-card {
        background: var(--gray-100);
        padding: 24px;
        border-radius: var(--radius);
        border-left: 4px solid var(--gold);
    }

    .partners-testimonial-stars {
        display: flex;
        gap: 4px;
        color: var(--gold);
        margin-bottom: 8px;
    }

    .partners-testimonial-card p {
        font-size: 0.9rem;
        color: var(--gray-600);
        line-height: 1.6;
        font-style: italic;
    }

    .partners-testimonial-author {
        margin-top: 12px;
    }

    .partners-testimonial-author strong {
        color: var(--navy);
        display: block;
    }

    .partners-testimonial-author span {
        font-size: 0.8rem;
        color: var(--gray-600);
    }

    /* Form Section */
    .partners-form-section {
        padding: 80px 0;
        background: var(--gray-100);
    }

    .partners-form-wrapper {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 40px;
        max-width: 1100px;
        margin: 0 auto;
    }

    .partners-form {
        background: var(--white);
        padding: 40px;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
    }

    .partners-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .partners-form-group {
        margin-bottom: 16px;
    }

    .partners-form-group label {
        font-weight: 500;
        font-size: 0.85rem;
        display: block;
        margin-bottom: 4px;
        color: var(--gray-800);
    }

    .partners-form-group .required {
        color: #e74c3c;
    }

    .partners-form-group input,
    .partners-form-group select,
    .partners-form-group textarea {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        font-family: var(--font-sans);
        font-size: 0.9rem;
        transition: var(--transition);
        background: var(--white);
    }

    .partners-form-group input:focus,
    .partners-form-group select:focus,
    .partners-form-group textarea:focus {
        outline: none;
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.2);
    }

    .partners-form-group textarea {
        resize: vertical;
        min-height: 100px;
    }

    .partners-form-actions {
        display: flex;
        gap: 12px;
        margin-top: 8px;
    }

    .partners-form-actions .btn {
        flex: 1;
        justify-content: center;
        padding: 14px;
    }

    .partners-form-error {
        color: #e74c3c;
        font-size: 0.8rem;
        margin-top: 12px;
        display: none;
        text-align: center;
    }

    /* Form Sidebar */
    .partners-form-sidebar {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .partners-sidebar-card {
        background: var(--white);
        border-radius: var(--radius);
        padding: 24px;
        border: 1px solid var(--gray-200);
        box-shadow: var(--shadow);
    }

    .partners-sidebar-card h4 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .partners-sidebar-card p {
        color: var(--gray-600);
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .partners-sidebar-card ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .partners-sidebar-card ul li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 0;
        font-size: 0.85rem;
        color: var(--gray-600);
    }

    .partners-sidebar-card ul li i {
        font-size: 0.8rem;
    }

    /* FAQ Section */
    .partners-faq {
        padding: 80px 0;
        background: var(--white);
    }

    .partners-faq-grid {
        max-width: 800px;
        margin: 40px auto 0;
    }

    .partners-faq-item {
        border-bottom: 1px solid var(--gray-200);
        padding: 16px 0;
    }

    .partners-faq-item:last-child {
        border-bottom: none;
    }

    .partners-faq-item h4 {
        font-family: var(--font-serif);
        font-size: 1rem;
        font-weight: 600;
        color: var(--navy);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .partners-faq-item h4 i {
        color: var(--gold);
        transition: transform 0.3s ease;
    }

    .partners-faq-item h4.active i {
        transform: rotate(45deg);
    }

    .partners-faq-answer {
        display: none;
        padding: 8px 0 4px 32px;
        color: var(--gray-600);
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .partners-faq-answer.open {
        display: block;
    }

    /* Final CTA Section */
    .partners-final-cta {
        padding: 80px 0;
        background: var(--navy);
        color: var(--white);
    }

    .partners-final-cta-content {
        text-align: center;
        max-width: 620px;
        margin: 0 auto;
    }

    .partners-final-cta-content h2 {
        font-family: var(--font-serif);
        font-size: 2.8rem;
        font-weight: 500;
        margin-bottom: 8px;
    }

    .partners-final-cta-content h2 span {
        color: var(--gold);
        font-weight: 600;
    }

    .partners-final-cta-content p {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 24px;
    }

    .partners-final-cta-buttons {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* ================================================================
    RESPONSIVE - Partners Page
    ================================================================ */

    @media (max-width: 1024px) {
        .partners-grid {
            grid-template-columns: repeat(3, 1fr);
        }
        
        .partners-opportunities-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .partners-testimonials-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .partners-hero {
            height: 60vh;
            min-height: 400px;
        }
        
        .partners-hero-content h1 {
            font-size: 2.4rem;
        }
        
        .partners-stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        
        .partners-stats-grid .partners-stat-item {
            padding: 8px;
        }
        
        .partners-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .partners-benefits-grid {
            grid-template-columns: 1fr;
        }
        
        .partners-opportunities-grid {
            grid-template-columns: 1fr;
        }
        
        .partners-testimonials-grid {
            grid-template-columns: 1fr;
        }
        
        .partners-form-wrapper {
            grid-template-columns: 1fr;
        }
        
        .partners-form-row {
            grid-template-columns: 1fr;
        }
        
        .partners-form-actions {
            flex-direction: column;
        }
        
        .partners-form-actions .btn {
            width: 100%;
        }
        
        .partners-form {
            padding: 24px;
        }
        
        .partners-testimonial {
            padding: 20px;
            margin: 20px 12px 0;
        }
        
        .partners-final-cta-content h2 {
            font-size: 2rem;
        }
    }

    @media (max-width: 480px) {
        .partners-hero {
            height: 50vh;
            min-height: 350px;
        }
        
        .partners-hero-content h1 {
            font-size: 1.8rem;
        }
        
        .partners-hero-content p {
            font-size: 0.9rem;
        }
        
        .partners-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        
        .partner-card {
            padding: 16px 12px;
        }
        
        .partner-card-icon {
            font-size: 1.8rem;
        }
        
        .partner-card-name {
            font-size: 0.65rem;
        }
        
        .partners-stats-grid {
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        
        .partners-stat-number {
            font-size: 1.8rem;
        }
        
        .partners-stat-label {
            font-size: 0.7rem;
        }
    }

    /* ================================================================ */
    /* FOOTER - PAYMENT CDN ICONS                                      */
    /* ================================================================ */

    .footer-luxury .footer-bottom .payment-methods .payment-icons {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .footer-luxury .footer-bottom .payment-methods .payment-icon {
        height: 28px;
        width: auto;
        opacity: 0.3;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        cursor: default;
        filter: brightness(0) invert(1);
    }

    .footer-luxury .footer-bottom .payment-methods .payment-icon:hover {
        opacity: 0.8;
        transform: translateY(-3px) scale(1.05);
        filter: brightness(0) invert(0);
    }

    /* ================================================================ */
    /* RESPONSIVE ADJUSTMENTS                                          */
    /* ================================================================ */

    @media (max-width: 768px) {
        .footer-luxury .footer-bottom .payment-methods .payment-icon {
            height: 24px;
        }
        
        .footer-luxury .footer-bottom .payment-methods .payment-icons {
            gap: 12px;
        }
    }

    @media (max-width: 480px) {
        .footer-luxury .footer-bottom .payment-methods .payment-icon {
            height: 20px;
        }
        
        .footer-luxury .footer-bottom .payment-methods .payment-icons {
            gap: 8px;
        }
    }

    /* ================================================================ 
    PROTECTING OUR BRANDS PAGE
    ================================================================ */

    /* ================================================================ 
    HERO SECTION
    ================================================================ */
    .protect-hero {
        position: relative;
        width: 100%;
        height: 100vh;
        min-height: 600px;
        max-height: 900px;
        overflow: hidden;
        background: var(--navy);
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .protect-hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .protect-hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: heroZoom 25s ease-in-out infinite alternate;
    }

    .protect-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(38, 36, 57, 0.15) 0%,
            rgba(38, 36, 57, 0.45) 40%,
            rgba(38, 36, 57, 0.70) 75%,
            rgba(38, 36, 57, 0.90) 100%
        );
        z-index: 1;
    }

    .protect-hero-content {
        position: relative;
        z-index: 2;
        max-width: 820px;
        padding: 0 40px;
        text-align: center;
        color: var(--white);
    }

    .protect-hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 500;
        letter-spacing: 5px;
        text-transform: uppercase;
        color: var(--gold);
        background: rgba(38, 36, 57, 0.4);
        padding: 8px 24px;
        border-radius: 60px;
        border: 1px solid rgba(201, 169, 110, 0.25);
        backdrop-filter: blur(8px);
        margin-bottom: 24px;
    }

    .protect-hero-badge i {
        font-size: 0.75rem;
    }

    .protect-hero-title {
        font-family: var(--font-serif);
        font-size: 5rem;
        font-weight: 500;
        line-height: 1.05;
        letter-spacing: -0.5px;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
        margin-bottom: 12px;
    }

    .protect-hero-title span {
        color: var(--gold);
        font-weight: 600;
        font-style: italic;
    }

    .protect-hero-subtitle {
        font-family: var(--font-serif);
        font-size: 1.4rem;
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.85);
        text-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
        margin-bottom: 24px;
    }

    .protect-hero-subtitle em {
        color: var(--gold);
        font-style: normal;
        font-weight: 500;
        letter-spacing: 1px;
    }

    .protect-hero-divider {
        width: 70px;
        height: 2px;
        background: var(--gold);
        margin: 0 auto 24px;
    }

    .protect-hero-description {
        font-family: var(--font-sans);
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.7);
        max-width: 620px;
        margin: 0 auto;
        line-height: 1.7;
    }

    .protect-hero-scroll {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        opacity: 0.5;
    }

    .protect-hero-scroll span {
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 400;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
    }

    .protect-hero-scroll .scroll-line {
        width: 1px;
        height: 40px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
        animation: scrollPulse 2s ease-in-out infinite;
    }

    /* ================================================================ 
    SECONDARY NAVIGATION - BRANDS
    ================================================================ */
    .brands-nav-wrapper {
        position: sticky;
        top: calc(var(--topbar-height) + var(--navbar-height));
        z-index: 89;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(217, 204, 188, 0.15);
        padding: 0;
        transition: all 0.3s ease;
        box-shadow: 0 2px 20px rgba(38, 36, 57, 0.04);
    }

    .brands-nav-wrapper.scrolled {
        box-shadow: 0 4px 30px rgba(38, 36, 57, 0.08);
        background: rgba(255, 255, 255, 0.98);
    }

    .brands-nav-primary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 24px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        max-width: 1400px;
        margin: 0 auto;
    }

    .brands-nav-primary::-webkit-scrollbar {
        display: none;
    }

    .brand-filter-btn {
        padding: 8px 20px;
        border-radius: 60px;
        border: 1.5px solid transparent;
        background: transparent;
        color: var(--gray-600);
        font-family: var(--font-sans);
        font-size: 0.68rem;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .brand-filter-btn .filter-icon {
        font-size: 0.75rem;
    }

    .brand-filter-btn:hover {
        color: var(--navy);
        border-color: var(--gray-300);
        transform: translateY(-1px);
    }

    .brand-filter-btn.active {
        background: var(--navy);
        color: var(--white);
        border-color: var(--navy);
        box-shadow: 0 4px 16px rgba(38, 36, 57, 0.12);
    }

    .brand-filter-btn.active .filter-icon {
        color: var(--gold);
    }

    .brand-filter-btn .filter-count {
        display: inline-block;
        font-size: 0.55rem;
        font-weight: 600;
        background: rgba(38, 36, 57, 0.08);
        color: var(--gray-600);
        padding: 2px 10px;
        border-radius: 60px;
        min-width: 18px;
        text-align: center;
        transition: all 0.3s ease;
    }

    .brand-filter-btn.active .filter-count {
        background: rgba(255, 255, 255, 0.2);
        color: var(--white);
    }

    .brands-nav-wrapper .nav-divider {
        width: 1px;
        height: 20px;
        background: var(--gray-300);
        opacity: 0.3;
        flex-shrink: 0;
    }

    .brands-nav-wrapper .progress-container {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: rgba(217, 204, 188, 0.15);
        overflow: hidden;
    }

    .brands-nav-wrapper .progress-line {
        height: 100%;
        width: 0%;
        background: var(--gold);
        transition: width 0.15s ease;
    }

    /* ================================================================ 
    BRANDS SHOWCASE
    ================================================================ */
    .brands-showcase {
        padding: 80px 0 100px;
        background: var(--white);
    }

    .brands-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 28px;
        margin-top: 20px;
    }

    .brand-card {
        position: relative;
        background: var(--white);
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--gray-200);
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        opacity: 0;
        transform: translateY(30px);
        animation: cardReveal 0.6s ease forwards;
    }

    .brand-card:nth-child(1) { animation-delay: 0.05s; }
    .brand-card:nth-child(2) { animation-delay: 0.10s; }
    .brand-card:nth-child(3) { animation-delay: 0.15s; }
    .brand-card:nth-child(4) { animation-delay: 0.20s; }
    .brand-card:nth-child(5) { animation-delay: 0.25s; }

    .brand-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 60px rgba(38, 36, 57, 0.12);
        border-color: var(--gold);
    }

    .brand-card-image {
        position: relative;
        aspect-ratio: 4/3;
        overflow: hidden;
        background: var(--gray-100);
    }

    .brand-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .brand-card:hover .brand-card-image img {
        transform: scale(1.06);
    }

    .brand-card-image::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            transparent 40%,
            rgba(38, 36, 57, 0.15) 70%,
            rgba(38, 36, 57, 0.55) 100%
        );
        transition: background 0.5s ease;
    }

    .brand-card:hover .brand-card-image::after {
        background: linear-gradient(
            to bottom,
            transparent 30%,
            rgba(38, 36, 57, 0.25) 70%,
            rgba(38, 36, 57, 0.75) 100%
        );
    }

    .brand-tag {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 2;
        padding: 5px 16px;
        background: rgba(38, 36, 57, 0.75);
        backdrop-filter: blur(8px);
        color: var(--white);
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        border-radius: 60px;
        border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .brand-tag.parent {
        background: var(--gold);
        color: var(--navy);
        border-color: var(--gold);
    }

    .brand-card-icon {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 2;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gold);
        font-size: 1.1rem;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    .brand-card-body {
        padding: 28px 28px 32px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .brand-card-name {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--navy);
        letter-spacing: 1px;
        line-height: 1.1;
        margin-bottom: 6px;
        transition: color 0.3s ease;
    }

    .brand-card:hover .brand-card-name {
        color: var(--gold);
    }

    .brand-card-name .brand-sub {
        display: block;
        font-family: var(--font-sans);
        font-size: 0.65rem;
        font-weight: 500;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--gray-600);
        margin-top: 6px;
    }

    .brand-card-divider {
        width: 40px;
        height: 1.5px;
        background: var(--gold);
        margin: 16px 0 18px;
        transition: width 0.5s ease;
    }

    .brand-card:hover .brand-card-divider {
        width: 70px;
    }

    .brand-card-description {
        font-family: var(--font-sans);
        font-size: 0.9rem;
        color: var(--gray-600);
        line-height: 1.7;
        margin-bottom: 16px;
        flex: 1;
    }

    .brand-card-problem {
        background: var(--cream-light);
        border-radius: 8px;
        padding: 16px 18px;
        margin-bottom: 20px;
        border-left: 3px solid var(--gold);
    }

    .brand-card-problem-label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 6px;
    }

    .brand-card-problem p {
        font-family: var(--font-sans);
        font-size: 0.82rem;
        color: var(--gray-800);
        line-height: 1.6;
        margin: 0;
    }

    .brand-card-cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--navy);
        padding: 12px 0 0;
        border-top: 1px solid var(--gray-200);
        transition: all 0.3s ease;
        cursor: pointer;
        background: none;
        border-left: none;
        border-right: none;
        border-bottom: none;
        width: 100%;
        justify-content: space-between;
        font-family: var(--font-sans);
    }

    .brand-card-cta:hover {
        color: var(--gold);
    }

    .brand-card-cta i {
        font-size: 0.65rem;
        transition: transform 0.3s ease;
    }

    .brand-card:hover .brand-card-cta i {
        transform: translateX(6px);
    }

    /* ================================================================ 
    FOUNDING STORY SECTION
    ================================================================ */
    .protect-story {
        padding: 100px 0;
        background: var(--gray-100);
    }

    .protect-story-grid {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 60px;
        align-items: center;
    }

    .protect-story-image {
        position: relative;
        border-radius: var(--radius);
        overflow: hidden;
        aspect-ratio: 4/5;
        background: var(--gray-200);
    }

    .protect-story-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s ease;
    }

    .protect-story-image:hover img {
        transform: scale(1.03);
    }

    .image-caption {
        position: absolute;
        bottom: 24px;
        left: 24px;
        background: rgba(38, 36, 57, 0.85);
        backdrop-filter: blur(12px);
        padding: 12px 22px;
        border-radius: 60px;
        border: 1px solid rgba(201, 169, 110, 0.2);
    }

    .caption-label {
        display: block;
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 500;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gold);
    }

    .caption-name {
        display: block;
        font-family: var(--font-serif);
        font-size: 1rem;
        font-weight: 500;
        color: var(--white);
        margin-top: 2px;
    }

    .protect-story-text .section-label {
        margin-bottom: 12px;
    }

    .protect-story-text .section-title {
        margin-bottom: 24px;
    }

    .protect-story-paragraph {
        font-family: var(--font-sans);
        font-size: 1rem;
        color: var(--gray-700);
        line-height: 1.85;
        margin-bottom: 20px;
    }

    .protect-story-paragraph strong {
        color: var(--navy);
        font-weight: 600;
    }

    .protect-story-emphasis {
        font-family: var(--font-serif);
        font-size: 1.25rem;
        font-style: italic;
        color: var(--navy);
        line-height: 1.5;
        padding: 20px 0 20px 24px;
        border-left: 3px solid var(--gold);
        background: rgba(201, 169, 110, 0.06);
        border-radius: 0 8px 8px 0;
        margin: 28px 0;
    }

    .protect-callout {
        display: flex;
        align-items: center;
        gap: 20px;
        background: var(--navy);
        border-radius: var(--radius);
        padding: 24px 28px;
        margin-top: 28px;
        box-shadow: var(--shadow);
    }

    .callout-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(201, 169, 110, 0.15);
        border: 1.5px solid rgba(201, 169, 110, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gold);
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .callout-content {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .callout-label {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 500;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
    }

    .callout-text {
        font-family: var(--font-serif);
        font-size: 1.5rem;
        font-weight: 500;
        color: var(--white);
    }

    .callout-text strong {
        color: var(--gold);
        font-style: italic;
        font-weight: 700;
    }

    /* ================================================================ 
    COST OF COUNTERFEITING SECTION
    ================================================================ */
    .protect-cost {
        position: relative;
        padding: 100px 0;
        overflow: hidden;
    }

    .protect-cost-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .protect-cost-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .protect-cost-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            rgba(38, 36, 57, 0.92) 0%,
            rgba(38, 36, 57, 0.85) 50%,
            rgba(38, 36, 57, 0.95) 100%
        );
        z-index: 1;
    }

    .protect-cost .container {
        position: relative;
        z-index: 2;
    }

    .protect-cost-content {
        max-width: 1100px;
        margin: 0 auto;
        text-align: center;
    }

    .section-label-light {
        display: inline-block;
        font-family: var(--font-sans);
        font-size: 0.65rem;
        font-weight: 500;
        letter-spacing: 5px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 12px;
    }

    .protect-cost-title {
        font-family: var(--font-serif);
        font-size: 3rem;
        font-weight: 500;
        color: var(--white);
        letter-spacing: -0.5px;
        margin-bottom: 50px;
        line-height: 1.1;
    }

    .protect-cost-title span {
        color: var(--gold);
        font-weight: 600;
        font-style: italic;
    }

    .protect-cost-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        text-align: left;
    }

    .cost-item {
        padding: 32px 26px;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border-radius: var(--radius);
        border: 1px solid rgba(255, 255, 255, 0.08);
        transition: all 0.4s ease;
    }

    .cost-item:hover {
        background: rgba(255, 255, 255, 0.10);
        transform: translateY(-6px);
        border-color: rgba(201, 169, 110, 0.35);
    }

    .cost-icon {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: rgba(201, 169, 110, 0.15);
        border: 1px solid rgba(201, 169, 110, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        color: var(--gold);
        margin-bottom: 20px;
        transition: all 0.4s ease;
    }

    .cost-item:hover .cost-icon {
        background: var(--gold);
        color: var(--navy);
        transform: scale(1.05);
    }

    .cost-item h4 {
        font-family: var(--font-serif);
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--white);
        margin-bottom: 8px;
    }

    .cost-item p {
        font-family: var(--font-sans);
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.65);
        line-height: 1.65;
        margin: 0;
    }

    .cost-item p strong {
        color: var(--gold);
        font-weight: 500;
    }

    /* ================================================================ 
    COMMITMENT SECTION
    ================================================================ */
    .protect-commitment {
        padding: 100px 0;
        background: var(--white);
    }

    .protect-commitment-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 60px;
        align-items: center;
    }

    .commitment-intro {
        font-family: var(--font-sans);
        font-size: 1rem;
        color: var(--gray-700);
        line-height: 1.8;
        margin-bottom: 32px;
    }

    .commitment-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .commitment-item {
        display: flex;
        gap: 20px;
        padding: 22px 24px;
        background: var(--gray-100);
        border-radius: var(--radius);
        border-left: 3px solid transparent;
        transition: all 0.4s ease;
    }

    .commitment-item:hover {
        border-left-color: var(--gold);
        background: var(--cream-light);
        transform: translateX(6px);
    }

    .commitment-icon {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: var(--gold);
        flex-shrink: 0;
        transition: all 0.4s ease;
        box-shadow: 0 2px 12px rgba(38, 36, 57, 0.06);
    }

    .commitment-item:hover .commitment-icon {
        background: var(--gold);
        color: var(--white);
        transform: scale(1.05);
    }

    .commitment-content h4 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .commitment-content p {
        font-family: var(--font-sans);
        font-size: 0.85rem;
        color: var(--gray-600);
        line-height: 1.6;
        margin: 0;
    }

    .commitment-image {
        position: relative;
        border-radius: var(--radius);
        overflow: hidden;
        aspect-ratio: 4/5;
        background: var(--gray-200);
    }

    .commitment-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s ease;
    }

    .commitment-image:hover img {
        transform: scale(1.03);
    }

    .commitment-image-badge {
        position: absolute;
        bottom: 24px;
        right: 24px;
        background: var(--gold);
        color: var(--navy);
        padding: 16px 24px;
        border-radius: var(--radius);
        display: flex;
        align-items: center;
        gap: 14px;
        box-shadow: 0 8px 32px rgba(201, 169, 110, 0.3);
        font-family: var(--font-sans);
    }

    .commitment-image-badge i {
        font-size: 1.5rem;
    }

    .commitment-image-badge span {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        line-height: 1.3;
    }

    /* ================================================================ 
    REPORT COUNTERFEIT CTA
    ================================================================ */
    .protect-cta {
        position: relative;
        padding: 100px 0;
        overflow: hidden;
    }

    .protect-cta-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .protect-cta-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .protect-cta-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(38, 36, 57, 0.85) 0%,
            rgba(38, 36, 57, 0.75) 50%,
            rgba(38, 36, 57, 0.90) 100%
        );
        z-index: 1;
    }

    .protect-cta .container {
        position: relative;
        z-index: 2;
    }

    .protect-cta-content {
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
        color: var(--white);
    }

    .protect-cta-badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 500;
        letter-spacing: 5px;
        text-transform: uppercase;
        color: var(--gold);
        background: rgba(201, 169, 110, 0.1);
        padding: 8px 24px;
        border-radius: 60px;
        border: 1px solid rgba(201, 169, 110, 0.25);
        margin-bottom: 24px;
    }

    .protect-cta-badge i {
        font-size: 0.75rem;
    }

    .protect-cta-title {
        font-family: var(--font-serif);
        font-size: 3rem;
        font-weight: 500;
        letter-spacing: -0.5px;
        line-height: 1.1;
        margin-bottom: 20px;
    }

    .protect-cta-title span {
        color: var(--gold);
        font-weight: 600;
        font-style: italic;
    }

    .protect-cta-description {
        font-family: var(--font-sans);
        font-size: 1.05rem;
        color: rgba(255, 255, 255, 0.75);
        line-height: 1.75;
        margin-bottom: 36px;
    }

    .protect-cta-buttons {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 24px;
    }

    .protect-cta-buttons .btn {
        padding: 16px 40px;
        font-size: 0.85rem;
        letter-spacing: 1.5px;
    }

    .protect-cta-note {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-sans);
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.5);
        letter-spacing: 0.5px;
    }

    .protect-cta-note i {
        color: var(--gold);
        font-size: 0.8rem;
    }

    /* ================================================================ 
    AUTHENTICATION CHECK
    ================================================================ */
    .protect-auth {
        padding: 100px 0;
        background: var(--gray-100);
    }

    .auth-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        margin-top: 20px;
    }

    .auth-card {
        position: relative;
        background: var(--white);
        border-radius: var(--radius);
        padding: 40px 28px 32px;
        border: 1px solid var(--gray-200);
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        overflow: hidden;
    }

    .auth-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--gold);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s ease;
    }

    .auth-card:hover::before {
        transform: scaleX(1);
    }

    .auth-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 60px rgba(38, 36, 57, 0.10);
        border-color: var(--gold);
    }

    .auth-number {
        position: absolute;
        top: 20px;
        right: 24px;
        font-family: var(--font-serif);
        font-size: 3rem;
        font-weight: 700;
        color: var(--gray-200);
        line-height: 1;
        transition: color 0.4s ease;
        user-select: none;
    }

    .auth-card:hover .auth-number {
        color: rgba(201, 169, 110, 0.3);
    }

    .auth-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        color: var(--gold);
        margin-bottom: 20px;
        transition: all 0.4s ease;
    }

    .auth-card:hover .auth-icon {
        background: var(--gold);
        color: var(--white);
        transform: scale(1.08) rotate(-5deg);
    }

    .auth-card h3 {
        font-family: var(--font-serif);
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 10px;
        line-height: 1.3;
    }

    .auth-card p {
        font-family: var(--font-sans);
        font-size: 0.85rem;
        color: var(--gray-600);
        line-height: 1.65;
        margin: 0;
    }

    /* ================================================================ 
    RESPONSIVE
    ================================================================ */
    @media (max-width: 1024px) {
        .protect-hero-title {
            font-size: 3.8rem;
        }

        .protect-story-grid,
        .protect-commitment-grid {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .protect-story-image,
        .commitment-image {
            max-width: 480px;
            margin: 0 auto;
            aspect-ratio: 1;
        }

        .protect-cost-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .auth-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .protect-cost-title,
        .protect-cta-title {
            font-size: 2.4rem;
        }
    }

    @media (max-width: 768px) {
        .protect-hero {
            height: 80vh;
            min-height: 500px;
        }

        .protect-hero-title {
            font-size: 2.4rem;
        }

        .protect-hero-subtitle {
            font-size: 1.05rem;
        }

        .protect-hero-description {
            font-size: 0.9rem;
        }

        .protect-hero-content {
            padding: 0 24px;
        }

        .brands-nav-primary {
            justify-content: flex-start;
            padding: 10px 16px;
        }

        .brands-showcase,
        .protect-story,
        .protect-cost,
        .protect-commitment,
        .protect-cta,
        .protect-auth {
            padding: 60px 0;
        }

        .brands-grid {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .protect-cost-grid,
        .auth-grid {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .protect-cost-title,
        .protect-cta-title {
            font-size: 1.9rem;
        }

        .protect-callout {
            flex-direction: column;
            text-align: center;
            padding: 24px 20px;
        }

        .callout-text {
            font-size: 1.2rem;
        }

        .protect-cta-buttons {
            flex-direction: column;
            align-items: stretch;
        }

        .protect-cta-buttons .btn {
            width: 100%;
            justify-content: center;
        }

        .commitment-image-badge {
            padding: 12px 18px;
            bottom: 16px;
            right: 16px;
        }

        .commitment-image-badge i {
            font-size: 1.2rem;
        }

        .commitment-image-badge span {
            font-size: 0.6rem;
        }
    }

    @media (max-width: 480px) {
        .protect-hero {
            height: 75vh;
            min-height: 420px;
        }

        .protect-hero-title {
            font-size: 1.9rem;
        }

        .protect-hero-badge,
        .protect-cta-badge {
            font-size: 0.5rem;
            letter-spacing: 3px;
            padding: 6px 16px;
        }

        .protect-story-emphasis {
            font-size: 1.05rem;
            padding: 16px 0 16px 18px;
        }

        .brand-card-body {
            padding: 22px 20px 26px;
        }

        .brand-card-name {
            font-size: 1.35rem;
        }
    }

    /* ================================================================ */
    /* CUSTOMIZATION PAGE                                              */
    /* ================================================================ */

    /* ----- Hero Section ----- */
    .custom-hero {
        position: relative;
        width: 100%;
        height: 100vh;
        min-height: 600px;
        max-height: 900px;
        overflow: hidden;
        background: var(--navy);
        margin-top: calc(-1 * (var(--topbar-height) + var(--navbar-height)));
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .custom-hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .custom-hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: heroZoom 25s ease-in-out infinite alternate;
    }

    @keyframes heroZoom {
        0% { transform: scale(1); }
        100% { transform: scale(1.05); }
    }

    .custom-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(38, 36, 57, 0.15) 0%,
            rgba(38, 36, 57, 0.35) 40%,
            rgba(38, 36, 57, 0.55) 70%,
            rgba(38, 36, 57, 0.75) 100%
        );
        z-index: 1;
    }

    .custom-hero-content {
        position: relative;
        z-index: 2;
        max-width: 820px;
        padding: 0 40px;
    }

    .custom-hero-badge {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 6px;
        text-transform: uppercase;
        color: var(--gold);
        display: inline-block;
        padding: 4px 20px;
        border: 1px solid rgba(201, 169, 110, 0.25);
        border-radius: 60px;
        backdrop-filter: blur(8px);
        margin-bottom: 16px;
    }

    .custom-hero-content h1 {
        font-family: var(--font-serif);
        font-size: 4.2rem;
        font-weight: 500;
        color: var(--white);
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
        letter-spacing: -0.5px;
        line-height: 1.05;
        margin-bottom: 12px;
    }

    .custom-hero-content h1 span {
        color: var(--gold);
        font-weight: 600;
    }

    .custom-hero-content p {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 300;
        font-style: italic;
        color: rgba(255, 255, 255, 0.75);
        text-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
        max-width: 620px;
        margin: 0 auto;
    }

    .custom-hero-scroll {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        opacity: 0.5;
    }

    .custom-hero-scroll span {
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 400;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
    }

    .custom-hero-scroll .scroll-line {
        width: 1px;
        height: 40px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
        animation: scrollPulse 2s ease-in-out infinite;
    }

    @keyframes scrollPulse {
        0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
        50% { opacity: 1; transform: scaleY(1); }
    }

    /* ================================================================ */
    /* INTRODUCTION SECTION                                            */
    /* ================================================================ */

    .custom-intro {
        padding: 100px 0 80px;
        background: var(--white);
    }

    .custom-intro-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
    }

    .custom-intro-text {
        max-width: 540px;
    }

    .custom-intro-text .section-label {
        margin-bottom: 8px;
    }

    .custom-intro-text .section-title {
        font-size: 2.8rem;
        margin-bottom: 20px;
    }

    .custom-intro-description {
        font-size: 1rem;
        color: var(--gray-600);
        line-height: 1.8;
        margin-bottom: 16px;
    }

    .custom-intro-description:last-child {
        margin-bottom: 0;
    }

    .custom-intro-image {
        border-radius: var(--radius);
        overflow: hidden;
        height: 100%;
        min-height: 400px;
        box-shadow: 0 20px 60px rgba(38, 36, 57, 0.08);
    }

    .custom-intro-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .custom-intro-image:hover img {
        transform: scale(1.03);
    }

    /* ================================================================ */
    /* COMPARISON SECTION                                              */
    /* ================================================================ */

    .custom-comparison {
        padding: 80px 0 100px;
        background: var(--gray-100);
    }

    .comparison-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        max-width: 1200px;
        margin: 0 auto 60px;
    }

    /* Comparison Cards */
    .comparison-card {
        background: var(--white);
        border-radius: var(--radius);
        padding: 40px 36px;
        border: 1px solid var(--gray-200);
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        position: relative;
        overflow: hidden;
    }

    .comparison-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gold);
        transform: scaleX(0);
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .comparison-card:hover::before {
        transform: scaleX(1);
    }

    .comparison-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 60px rgba(38, 36, 57, 0.10);
        border-color: var(--gold);
    }

    .bespoke-card::before {
        background: linear-gradient(90deg, var(--gold), #d4b47a);
    }

    .mtm-card::before {
        background: linear-gradient(90deg, var(--navy), #4a4766);
    }

    /* Card Header */
    .comparison-card .card-header {
        text-align: center;
        margin-bottom: 24px;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--gray-200);
    }

    .comparison-card .card-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        color: var(--gold);
        margin: 0 auto 16px;
        transition: all 0.4s ease;
    }

    .comparison-card:hover .card-icon {
        background: var(--gold);
        color: var(--white);
        transform: scale(1.08);
    }

    .bespoke-card .card-icon {
        background: var(--cream-light);
        color: var(--gold);
    }

    .mtm-card .card-icon {
        background: var(--gray-100);
        color: var(--navy);
    }

    .mtm-card:hover .card-icon {
        background: var(--navy);
        color: var(--white);
    }

    .comparison-card .card-badge {
        display: inline-block;
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 4px 14px;
        border-radius: 60px;
        background: var(--cream-light);
        color: var(--gold);
        margin-bottom: 12px;
    }

    .mtm-card .card-badge {
        background: var(--gray-100);
        color: var(--navy);
    }

    .comparison-card .card-title {
        font-family: var(--font-serif);
        font-size: 2.2rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 4px;
        line-height: 1.1;
    }

    .comparison-card .card-subtitle {
        font-size: 0.9rem;
        color: var(--gray-600);
        font-style: italic;
        font-family: var(--font-serif);
    }

    /* Card Description */
    .comparison-card .card-description {
        margin-bottom: 28px;
    }

    .comparison-card .card-description p {
        font-size: 0.95rem;
        color: var(--gray-600);
        line-height: 1.7;
    }

    /* Card Features */
    .comparison-card .card-features {
        margin-bottom: 28px;
    }

    .comparison-card .card-features h4 {
        font-family: var(--font-serif);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--gray-200);
    }

    .features-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .features-list li {
        display: flex;
        gap: 14px;
        align-items: flex-start;
    }

    .features-list .step-number {
        font-family: var(--font-serif);
        font-size: 1rem;
        font-weight: 700;
        color: var(--gold);
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        margin-top: 2px;
    }

    .mtm-card .features-list .step-number {
        background: var(--gray-100);
        color: var(--navy);
    }

    .features-list .step-content {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .features-list .step-content strong {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--navy);
    }

    .features-list .step-content span {
        font-size: 0.8rem;
        color: var(--gray-600);
        line-height: 1.5;
    }

    /* Card Meta */
    .comparison-card .card-meta {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 12px;
        padding: 20px 0;
        border-top: 1px solid var(--gray-200);
        border-bottom: 1px solid var(--gray-200);
        margin-bottom: 20px;
    }

    .comparison-card .meta-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
    }

    .comparison-card .meta-item i {
        font-size: 1.1rem;
        color: var(--gold);
    }

    .mtm-card .meta-item i {
        color: var(--navy);
    }

    .comparison-card .meta-item .meta-label {
        font-size: 0.6rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--gray-500);
        font-weight: 500;
    }

    .comparison-card .meta-item .meta-value {
        font-family: var(--font-serif);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--navy);
    }

    /* Card Highlight */
    .comparison-card .card-highlight {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 16px;
        background: var(--cream-light);
        border-radius: 8px;
        font-size: 0.8rem;
        color: var(--gray-700);
        line-height: 1.5;
        border-left: 3px solid var(--gold);
    }

    .mtm-card .card-highlight {
        background: var(--gray-100);
        border-left-color: var(--navy);
    }

    .comparison-card .card-highlight i {
        color: var(--gold);
        font-size: 0.9rem;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .mtm-card .card-highlight i {
        color: var(--navy);
    }

    /* ================================================================ */
    /* COMPARISON SUMMARY TABLE                                        */
    /* ================================================================ */

    .comparison-summary {
        max-width: 1000px;
        margin: 0 auto;
    }

    .comparison-summary .summary-title {
        font-family: var(--font-serif);
        font-size: 2rem;
        font-weight: 600;
        color: var(--navy);
        text-align: center;
        margin-bottom: 28px;
    }

    .comparison-summary .summary-title span {
        color: var(--gold);
    }

    .summary-table-wrapper {
        background: var(--white);
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--gray-200);
        box-shadow: 0 8px 32px rgba(38, 36, 57, 0.06);
    }

    .summary-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9rem;
    }

    .summary-table thead {
        background: var(--navy);
        color: var(--white);
    }

    .summary-table thead th {
        padding: 18px 24px;
        text-align: left;
        font-family: var(--font-sans);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .summary-table thead th:first-child {
        width: 30%;
    }

    .summary-table thead th:nth-child(2),
    .summary-table thead th:nth-child(3) {
        width: 35%;
    }

    .summary-table tbody tr {
        border-bottom: 1px solid var(--gray-200);
        transition: background 0.3s ease;
    }

    .summary-table tbody tr:last-child {
        border-bottom: none;
    }

    .summary-table tbody tr:hover {
        background: var(--gray-100);
    }

    .summary-table tbody td {
        padding: 16px 24px;
        color: var(--gray-700);
    }

    .summary-table tbody td:first-child {
        font-weight: 600;
        color: var(--navy);
    }

    .summary-table tbody td i {
        margin-right: 6px;
    }

    /* ================================================================ */
    /* DIFFERENCE SECTION                                              */
    /* ================================================================ */

    .custom-difference {
        padding: 80px 0;
        background: var(--white);
    }

    .difference-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .difference-card {
        background: var(--gray-100);
        border-radius: var(--radius);
        padding: 32px 24px;
        text-align: center;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        border: 1px solid transparent;
    }

    .difference-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 60px rgba(38, 36, 57, 0.08);
        border-color: var(--gold);
        background: var(--white);
    }

    .difference-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        color: var(--gold);
        margin: 0 auto 16px;
        transition: all 0.4s ease;
    }

    .difference-card:hover .difference-icon {
        background: var(--gold);
        color: var(--white);
        transform: scale(1.08);
    }

    .difference-card h4 {
        font-family: var(--font-serif);
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 8px;
    }

    .difference-card p {
        font-size: 0.85rem;
        color: var(--gray-600);
        line-height: 1.6;
    }

    /* ================================================================ */
    /* CTA SECTION                                                     */
    /* ================================================================ */

    .custom-cta {
        position: relative;
        padding: 100px 0;
        background: var(--navy);
        overflow: hidden;
        text-align: center;
    }

    .custom-cta-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .custom-cta-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.25;
    }

    .custom-cta-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(38, 36, 57, 0.90) 0%,
            rgba(38, 36, 57, 0.75) 50%,
            rgba(38, 36, 57, 0.90) 100%
        );
        z-index: 1;
    }

    .custom-cta .container {
        position: relative;
        z-index: 2;
    }

    .custom-cta-content {
        max-width: 720px;
        margin: 0 auto;
    }

    .custom-cta-badge {
        font-family: var(--font-sans);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 6px;
        text-transform: uppercase;
        color: var(--gold);
        display: inline-block;
        padding: 4px 20px;
        border: 1px solid rgba(201, 169, 110, 0.25);
        border-radius: 60px;
        backdrop-filter: blur(8px);
        margin-bottom: 16px;
    }

    .custom-cta-title {
        font-family: var(--font-serif);
        font-size: 3.2rem;
        font-weight: 500;
        color: var(--white);
        line-height: 1.15;
        margin-bottom: 16px;
        text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
    }

    .custom-cta-title span {
        color: var(--gold);
        font-weight: 600;
    }

    .custom-cta-description {
        font-family: var(--font-sans);
        font-size: 1.05rem;
        color: rgba(255, 255, 255, 0.75);
        line-height: 1.7;
        margin-bottom: 32px;
        max-width: 580px;
        margin-left: auto;
        margin-right: auto;
    }

    .custom-cta-buttons {
        display: flex;
        gap: 14px;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .custom-cta-buttons .btn-gold {
        padding: 16px 40px;
        font-size: 0.9rem;
        font-weight: 600;
        background: var(--gold);
        color: var(--navy);
        border: none;
        box-shadow: 0 8px 32px rgba(201, 169, 110, 0.25);
    }

    .custom-cta-buttons .btn-gold:hover {
        background: #d4b47a;
        transform: translateY(-2px);
        box-shadow: 0 12px 48px rgba(201, 169, 110, 0.35);
    }

    .custom-cta-buttons .btn-outline-light {
        padding: 16px 32px;
        font-size: 0.9rem;
        font-weight: 500;
        border: 1.5px solid rgba(255, 255, 255, 0.3);
        color: var(--white);
        background: transparent;
    }

    .custom-cta-buttons .btn-outline-light:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: var(--white);
        transform: translateY(-2px);
    }

    .custom-cta-note {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        letter-spacing: 0.5px;
    }

    .custom-cta-note i {
        color: var(--gold);
        font-size: 0.8rem;
    }

    /* ================================================================ */
    /* RESPONSIVE - TABLETS & MOBILE                                  */
    /* ================================================================ */

    @media (max-width: 1024px) {
        .custom-hero-content h1 {
            font-size: 3.2rem;
        }

        .custom-intro-wrapper {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .custom-intro-text {
            max-width: 100%;
            text-align: center;
        }

        .custom-intro-text .section-title {
            font-size: 2.2rem;
        }

        .custom-intro-image {
            min-height: 320px;
            max-height: 450px;
        }

        .comparison-grid {
            gap: 24px;
        }

        .comparison-card {
            padding: 32px 28px;
        }

        .comparison-card .card-title {
            font-size: 1.8rem;
        }

        .difference-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .custom-cta-title {
            font-size: 2.6rem;
        }
    }

    @media (max-width: 768px) {
        .custom-hero {
            height: 80vh;
            min-height: 500px;
        }

        .custom-hero-content h1 {
            font-size: 2.4rem;
        }

        .custom-hero-content p {
            font-size: 1rem;
        }

        .custom-intro {
            padding: 60px 0 50px;
        }

        .custom-comparison {
            padding: 60px 0 70px;
        }

        .comparison-grid {
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .comparison-card {
            padding: 28px 24px;
        }

        .comparison-card .card-meta {
            grid-template-columns: 1fr 1fr 1fr;
        }

        .summary-table thead th,
        .summary-table tbody td {
            padding: 12px 16px;
            font-size: 0.8rem;
        }

        .custom-difference {
            padding: 60px 0;
        }

        .difference-grid {
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .difference-card {
            padding: 24px 20px;
        }

        .custom-cta {
            padding: 70px 0;
        }

        .custom-cta-title {
            font-size: 2rem;
        }

        .custom-cta-description {
            font-size: 0.95rem;
        }

        .custom-cta-buttons .btn-gold,
        .custom-cta-buttons .btn-outline-light {
            padding: 14px 28px;
            font-size: 0.85rem;
        }
    }

    @media (max-width: 480px) {
        .custom-hero {
            height: 70vh;
            min-height: 450px;
        }

        .custom-hero-content {
            padding: 0 24px;
        }

        .custom-hero-content h1 {
            font-size: 1.8rem;
        }

        .custom-hero-badge {
            font-size: 0.5rem;
            padding: 3px 14px;
            letter-spacing: 4px;
        }

        .custom-hero-content p {
            font-size: 0.85rem;
        }

        .custom-intro-text .section-title {
            font-size: 1.6rem;
        }

        .custom-intro-description {
            font-size: 0.9rem;
        }

        .custom-intro-image {
            min-height: 240px;
            max-height: 320px;
        }

        .comparison-card {
            padding: 24px 18px;
        }

        .comparison-card .card-title {
            font-size: 1.5rem;
        }

        .comparison-card .card-meta {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .summary-table-wrapper {
            overflow-x: auto;
        }

        .summary-table {
            min-width: 500px;
        }

        .comparison-summary .summary-title {
            font-size: 1.6rem;
        }

        .difference-grid {
            grid-template-columns: 1fr;
        }

        .custom-cta {
            padding: 50px 0;
        }

        .custom-cta-title {
            font-size: 1.5rem;
        }

        .custom-cta-badge {
            font-size: 0.5rem;
            padding: 3px 14px;
            letter-spacing: 4px;
        }

        .custom-cta-buttons {
            flex-direction: column;
            align-items: center;
        }

        .custom-cta-buttons .btn-gold,
        .custom-cta-buttons .btn-outline-light {
            width: 100%;
            max-width: 300px;
            justify-content: center;
        }
    }

    /* ================================================================
    BESPOKE TAILORING SERVICE MODAL
    ================================================================ */

    .bespoke-services-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 10002;
        background: rgba(10, 10, 10, 0.75);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: modalFadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .bespoke-services-modal.open {
        display: flex;
    }

    .bespoke-modal-content {
        background: var(--white);
        border-radius: var(--radius);
        max-width: 920px;
        width: 100%;
        max-height: 92vh;
        overflow-y: auto;
        padding: 48px 44px 40px;
        position: relative;
        animation: modalScaleIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        box-shadow: 0 40px 120px rgba(0, 0, 0, 0.3);
    }

    .bespoke-modal-content::-webkit-scrollbar {
        width: 4px;
    }

    .bespoke-modal-content::-webkit-scrollbar-track {
        background: var(--gray-100);
        border-radius: 4px;
    }

    .bespoke-modal-content::-webkit-scrollbar-thumb {
        background: var(--gold);
        border-radius: 4px;
    }

    .bespoke-modal-close {
        position: absolute;
        top: 16px;
        right: 20px;
        background: none;
        border: none;
        font-size: 1.4rem;
        color: var(--gray-600);
        cursor: pointer;
        transition: var(--transition);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bespoke-modal-close:hover {
        color: var(--navy);
        background: var(--gray-100);
        transform: rotate(90deg);
    }

    /* Header */
    .bespoke-modal-header {
        text-align: center;
        margin-bottom: 32px;
    }

    .bespoke-icon-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--cream-light), var(--cream));
        margin-bottom: 12px;
    }

    .bespoke-icon {
        font-size: 2.8rem;
    }

    .bespoke-badge {
        display: inline-block;
        font-family: var(--font-sans);
        font-size: 0.55rem;
        font-weight: 600;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--white);
        background: linear-gradient(135deg, var(--gold), #b8965a);
        padding: 4px 18px;
        border-radius: 60px;
        margin-bottom: 8px;
    }

    .bespoke-modal-header h2 {
        font-family: var(--font-serif);
        font-size: 2.4rem;
        font-weight: 500;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .bespoke-modal-header h2 span {
        color: var(--gold);
        font-weight: 600;
    }

    .bespoke-modal-header p {
        color: var(--gray-600);
        font-size: 0.95rem;
    }

    /* Quick Overview */
    .bespoke-quick-overview {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 12px;
        padding: 16px 20px;
        background: var(--gray-100);
        border-radius: var(--radius);
        margin-bottom: 24px;
    }

    .bespoke-overview-item {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .bespoke-overview-icon {
        font-size: 1.4rem;
    }

    .bespoke-overview-item div {
        display: flex;
        flex-direction: column;
    }

    .bespoke-overview-item strong {
        font-size: 0.75rem;
        color: var(--navy);
    }

    .bespoke-overview-item span {
        font-size: 0.7rem;
        color: var(--gray-600);
    }

    /* Sections */
    .bespoke-section {
        margin-bottom: 28px;
    }

    .bespoke-section:last-of-type {
        margin-bottom: 0;
    }

    .bespoke-section-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }

    .bespoke-section-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        color: var(--gold);
        flex-shrink: 0;
    }

    .bespoke-section-header h3 {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--navy);
        margin: 0;
    }

    /* Features List */
    .bespoke-features-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 24px;
    }

    .bespoke-features-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 8px 0;
        border-bottom: 1px solid var(--gray-100);
    }

    .bespoke-features-list li:last-child {
        border-bottom: none;
    }

    .bespoke-features-list li i {
        color: var(--gold);
        font-size: 0.9rem;
        margin-top: 3px;
        flex-shrink: 0;
    }

    .bespoke-features-list li div {
        display: flex;
        flex-direction: column;
    }

    .bespoke-features-list li strong {
        font-size: 0.85rem;
        color: var(--navy);
    }

    .bespoke-features-list li span {
        font-size: 0.75rem;
        color: var(--gray-600);
        line-height: 1.4;
    }

    /* Pricing Grid */
    .bespoke-pricing-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .bespoke-pricing-card {
        background: var(--white);
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
        padding: 28px 24px;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        cursor: pointer;
        position: relative;
    }

    .bespoke-pricing-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .bespoke-pricing-card.featured {
        border-color: var(--gold);
        background: linear-gradient(135deg, var(--white), var(--cream-light));
    }

    .bespoke-pricing-card.featured::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--gold), #b8965a);
        border-radius: var(--radius) var(--radius) 0 0;
    }

    .bespoke-pricing-header {
        text-align: center;
        margin-bottom: 20px;
    }

    .bespoke-pricing-badge {
        display: inline-block;
        font-size: 0.5rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        padding: 3px 14px;
        border-radius: 60px;
        background: var(--gold);
        color: var(--white);
        margin-bottom: 8px;
    }

    .bespoke-pricing-icon {
        display: block;
        font-size: 2.2rem;
        margin-bottom: 4px;
    }

    .bespoke-pricing-header h4 {
        font-family: var(--font-serif);
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--navy);
        margin: 0;
    }

    .bespoke-pricing-price {
        margin-top: 8px;
    }

    .bespoke-price-amount {
        display: block;
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--gold);
    }

    .bespoke-price-note {
        font-size: 0.7rem;
        color: var(--gray-600);
    }

    .bespoke-pricing-features {
        list-style: none;
        padding: 0;
        margin: 0 0 20px;
    }

    .bespoke-pricing-features li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 5px 0;
        font-size: 0.8rem;
        color: var(--gray-600);
        border-bottom: 1px solid var(--gray-100);
    }

    .bespoke-pricing-features li:last-child {
        border-bottom: none;
    }

    .bespoke-pricing-features li i {
        color: var(--gold);
        font-size: 0.75rem;
        flex-shrink: 0;
    }

    .bespoke-select-btn {
        width: 100%;
        justify-content: center;
        font-size: 0.8rem;
        padding: 12px 20px;
    }

    /* Comparison Table */
    .bespoke-comparison {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .bespoke-comp-item {
        display: grid;
        grid-template-columns: 120px 1fr 1fr;
        gap: 8px;
        padding: 10px 16px;
        border-radius: 6px;
        font-size: 0.82rem;
        align-items: center;
    }

    .bespoke-comp-item:first-child {
        background: var(--navy);
        color: var(--white);
        font-weight: 600;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .bespoke-comp-item:not(:first-child):nth-child(even) {
        background: var(--gray-100);
    }

    .bespoke-comp-label {
        font-weight: 500;
        color: var(--gray-700);
    }

    .bespoke-comp-item:first-child .bespoke-comp-label {
        color: var(--white);
    }

    .bespoke-comp-mtm {
        color: var(--gray-600);
        text-align: center;
    }

    .bespoke-comp-bespoke {
        color: var(--gold);
        font-weight: 600;
        text-align: center;
    }

    .bespoke-comp-item:first-child .bespoke-comp-mtm,
    .bespoke-comp-item:first-child .bespoke-comp-bespoke {
        color: var(--white);
    }

    /* Process Steps */
    .bespoke-process-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .bespoke-process-step {
        background: var(--gray-100);
        border-radius: var(--radius);
        padding: 20px 18px;
        text-align: center;
        border: 1px solid transparent;
        transition: all 0.3s ease;
    }

    .bespoke-process-step:hover {
        border-color: var(--gold);
        background: var(--white);
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

    .bespoke-step-number {
        display: block;
        font-family: var(--font-serif);
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--gold);
        margin-bottom: 4px;
    }

    .bespoke-process-step h4 {
        font-family: var(--font-serif);
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 4px;
    }

    .bespoke-process-step p {
        font-size: 0.75rem;
        color: var(--gray-600);
        line-height: 1.5;
        margin: 0;
    }

    /* Home Visit Note */
    .bespoke-home-visit-note {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-top: 20px;
        padding: 16px 20px;
        background: var(--cream-light);
        border-radius: var(--radius);
        border-left: 3px solid var(--gold);
    }

    .bespoke-home-visit-note i {
        font-size: 1.3rem;
        color: var(--gold);
        margin-top: 2px;
    }

    .bespoke-home-visit-note div strong {
        display: block;
        font-size: 0.85rem;
        color: var(--navy);
    }

    .bespoke-home-visit-note div p {
        font-size: 0.78rem;
        color: var(--gray-600);
        margin: 2px 0 4px;
    }

    .bespoke-home-visit-price {
        font-size: 0.72rem;
        color: var(--navy);
        font-weight: 500;
        background: var(--white);
        padding: 2px 12px;
        border-radius: 60px;
        display: inline-block;
    }

    /* Footer */
    .bespoke-modal-footer {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid var(--gray-200);
        flex-wrap: wrap;
    }

    .bespoke-modal-footer .btn {
        min-width: 140px;
        justify-content: center;
        font-size: 0.8rem;
    }

    /* ================================================================
    RESPONSIVE - Bespoke Modal
    ================================================================ */

    @media (max-width: 1024px) {
        .bespoke-features-list {
            grid-template-columns: 1fr;
        }
        
        .bespoke-process-steps {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 768px) {
        .bespoke-modal-content {
            padding: 32px 20px 24px;
            margin: 10px;
            max-height: 85vh;
        }

        .bespoke-modal-header h2 {
            font-size: 1.8rem;
        }

        .bespoke-quick-overview {
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            padding: 14px 16px;
        }

        .bespoke-features-list {
            grid-template-columns: 1fr;
        }

        .bespoke-pricing-grid {
            grid-template-columns: 1fr;
        }

        .bespoke-process-steps {
            grid-template-columns: 1fr 1fr;
        }

        .bespoke-comp-item {
            grid-template-columns: 90px 1fr 1fr;
            font-size: 0.75rem;
            padding: 8px 12px;
            gap: 6px;
        }

        .bespoke-comp-label {
            font-size: 0.7rem;
        }

        .bespoke-modal-footer {
            flex-direction: column;
            align-items: center;
        }

        .bespoke-modal-footer .btn {
            width: 100%;
            max-width: 280px;
        }
    }

    @media (max-width: 480px) {
        .bespoke-modal-content {
            padding: 24px 14px 18px;
        }

        .bespoke-modal-header h2 {
            font-size: 1.4rem;
        }

        .bespoke-icon-wrapper {
            width: 56px;
            height: 56px;
        }

        .bespoke-icon {
            font-size: 2rem;
        }

        .bespoke-quick-overview {
            grid-template-columns: 1fr;
        }

        .bespoke-process-steps {
            grid-template-columns: 1fr;
        }

        .bespoke-comp-item {
            grid-template-columns: 70px 1fr 1fr;
            font-size: 0.68rem;
            gap: 4px;
        }

        .bespoke-comp-label {
            font-size: 0.62rem;
        }

        .bespoke-pricing-card {
            padding: 20px 16px;
        }

        .bespoke-price-amount {
            font-size: 1.3rem;
        }

        .bespoke-home-visit-note {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
    }

    /* ================================================================ */
    /* CUSTOMER SUPPORT PAGE                                          */
    /* ================================================================ */

    /* ---- Quick Contact Cards ---- */
    .support-quick-contact {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 60px;
    }

    .support-contact-card {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 24px 20px;
        background: var(--white);
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .support-contact-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .support-contact-icon {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        color: var(--gold);
        flex-shrink: 0;
        transition: all 0.4s ease;
    }

    .support-contact-card:hover .support-contact-icon {
        background: var(--gold);
        color: var(--white);
        transform: scale(1.05);
    }

    .support-contact-info h4 {
        font-family: var(--font-serif);
        font-size: 1rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 2px;
    }

    .support-contact-info p {
        font-size: 0.75rem;
        color: var(--gray-600);
        margin: 0 0 4px;
    }

    .support-contact-action {
        font-size: 0.7rem;
        font-weight: 500;
        color: var(--gold);
        transition: all 0.3s ease;
        display: inline-block;
    }

    .support-contact-card:hover .support-contact-action {
        transform: translateX(4px);
    }

    /* ---- FAQs Wrapper ---- */
    .support-faqs-wrapper {
        margin-bottom: 60px;
    }

    .support-faqs-header {
        text-align: center;
        margin-bottom: 40px;
    }

    /* ---- Search Box ---- */
    .support-search-wrapper {
        max-width: 640px;
        margin: 0 auto 32px;
    }

    .support-search-box {
        position: relative;
        display: flex;
        align-items: center;
    }

    .support-search-box i.fa-search {
        position: absolute;
        left: 20px;
        color: var(--gray-500);
        font-size: 0.9rem;
        pointer-events: none;
    }

    .support-search-box input {
        width: 100%;
        padding: 16px 56px 16px 52px;
        border: 1.5px solid var(--gray-200);
        border-radius: 60px;
        font-family: var(--font-sans);
        font-size: 0.95rem;
        outline: none;
        transition: all 0.3s ease;
        background: var(--white);
        color: var(--navy);
    }

    .support-search-box input:focus {
        border-color: var(--gold);
        box-shadow: 0 0 0 4px rgba(201, 169, 110, 0.1);
    }

    .support-search-box input::placeholder {
        color: var(--gray-400);
    }

    .support-search-clear {
        position: absolute;
        right: 16px;
        background: var(--gray-100);
        border: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--gray-600);
        font-size: 0.75rem;
        transition: all 0.3s ease;
    }

    .support-search-clear:hover {
        background: var(--gray-200);
        color: var(--navy);
    }

    /* ---- FAQ Categories ---- */
    .support-faq-categories-wrapper {
        overflow-x: auto;
        margin-bottom: 32px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .support-faq-categories-wrapper::-webkit-scrollbar {
        display: none;
    }

    .support-faq-categories {
        display: flex;
        gap: 8px;
        justify-content: center;
        min-width: max-content;
        padding: 0 20px;
    }

    .support-faq-category {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 60px;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--gray-600);
        background: var(--gray-100);
        cursor: pointer;
        transition: all 0.3s ease;
        border: 1.5px solid transparent;
        white-space: nowrap;
        font-family: var(--font-sans);
    }

    .support-faq-category i {
        font-size: 0.75rem;
    }

    .support-faq-category:hover {
        color: var(--navy);
        border-color: var(--gray-300);
        transform: translateY(-2px);
    }

    .support-faq-category.active {
        background: var(--navy);
        color: var(--white);
        border-color: var(--navy);
        box-shadow: 0 4px 16px rgba(38, 36, 57, 0.12);
    }

    .support-faq-category .category-count {
        display: inline-block;
        font-size: 0.55rem;
        background: rgba(38, 36, 57, 0.08);
        padding: 1px 8px;
        border-radius: 60px;
        min-width: 18px;
        text-align: center;
        transition: all 0.3s ease;
    }

    .support-faq-category.active .category-count {
        background: rgba(255, 255, 255, 0.2);
        color: var(--white);
    }

    /* ---- FAQ Accordion ---- */
    .support-faq-accordion {
        max-width: 860px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .support-faq-item {
        background: var(--white);
        border-radius: var(--radius);
        border: 1px solid var(--gray-200);
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .support-faq-item:hover {
        border-color: var(--gray-300);
        box-shadow: var(--shadow);
    }

    .support-faq-item.open {
        border-color: var(--gold);
        box-shadow: var(--shadow);
    }

    .support-faq-item .support-faq-question {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 20px 24px;
        cursor: pointer;
        background: var(--white);
        transition: all 0.3s ease;
    }

    .support-faq-item .support-faq-question:hover {
        background: var(--gray-100);
    }

    .support-faq-item .support-faq-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--cream-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        color: var(--gold);
        flex-shrink: 0;
        transition: all 0.4s ease;
    }

    .support-faq-item.open .support-faq-icon {
        background: var(--gold);
        color: var(--white);
        transform: scale(1.05);
    }

    .support-faq-item .support-faq-text {
        flex: 1;
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--navy);
        line-height: 1.4;
        transition: color 0.3s ease;
    }

    .support-faq-item.open .support-faq-text {
        color: var(--gold);
    }

    .support-faq-item .support-faq-arrow {
        font-size: 0.7rem;
        color: var(--gray-400);
        transition: transform 0.4s ease;
        flex-shrink: 0;
        width: 24px;
        text-align: center;
    }

    .support-faq-item.open .support-faq-arrow {
        transform: rotate(180deg);
        color: var(--gold);
    }

    .support-faq-item .support-faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.3s ease;
        padding: 0 24px;
        font-size: 0.9rem;
        color: var(--gray-600);
        line-height: 1.8;
    }

    .support-faq-item.open .support-faq-answer {
        max-height: 800px;
        padding: 0 24px 24px;
    }

    .support-faq-answer strong {
        color: var(--navy);
    }

    .support-faq-answer .faq-link {
        color: var(--gold);
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .support-faq-answer .faq-link:hover {
        text-decoration: underline;
    }

    .support-faq-answer ul,
    .support-faq-answer ol {
        padding-left: 20px;
        margin: 8px 0;
    }

    .support-faq-answer ul li,
    .support-faq-answer ol li {
        padding: 4px 0;
        color: var(--gray-600);
    }

    .support-faq-answer .faq-quick-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 12px;
    }

    .support-faq-answer .faq-quick-actions .btn {
        padding: 8px 20px;
        border-radius: 60px;
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .support-faq-answer .faq-quick-actions .btn-gold {
        background: var(--gold);
        color: var(--white);
        border: none;
    }

    .support-faq-answer .faq-quick-actions .btn-gold:hover {
        background: #b8965a;
        transform: translateY(-2px);
    }

    .support-faq-answer .faq-quick-actions .btn-outline {
        background: transparent;
        color: var(--navy);
        border: 1.5px solid var(--navy);
    }

    .support-faq-answer .faq-quick-actions .btn-outline:hover {
        background: var(--navy);
        color: var(--white);
        transform: translateY(-2px);
    }

    /* ---- No Results ---- */
    .support-faq-no-results {
        text-align: center;
        padding: 60px 20px;
    }

    .support-faq-no-results i {
        font-size: 3rem;
        color: var(--gray-300);
        display: block;
        margin-bottom: 16px;
    }

    .support-faq-no-results h3 {
        font-family: var(--font-serif);
        font-size: 1.4rem;
        color: var(--navy);
        margin-bottom: 8px;
    }

    .support-faq-no-results p {
        color: var(--gray-600);
        margin-bottom: 20px;
    }

    /* ---- Feedback Section ---- */
    .support-feedback-wrapper {
        margin-bottom: 60px;
    }

    .support-feedback-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .support-feedback-actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        max-width: 900px;
        margin: 0 auto;
    }

    .support-feedback-btn {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 24px;
        border-radius: var(--radius);
        background: var(--white);
        border: 1px solid var(--gray-200);
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        text-align: left;
        font-family: var(--font-sans);
    }

    .support-feedback-btn:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
        border-color: var(--gold);
    }

    .support-feedback-btn i {
        font-size: 1.6rem;
        color: var(--gold);
        flex-shrink: 0;
        transition: all 0.4s ease;
    }

    .support-feedback-btn:hover i {
        transform: scale(1.15);
    }

    .support-feedback-btn div {
        flex: 1;
    }

    .support-feedback-btn strong {
        display: block;
        font-size: 0.95rem;
        color: var(--navy);
        margin-bottom: 2px;
        font-weight: 600;
    }

    .support-feedback-btn span {
        font-size: 0.75rem;
        color: var(--gray-600);
    }

    /* ---- Support CTA ---- */
    .support-cta-wrapper {
        max-width: 860px;
        margin: 0 auto;
    }

    .support-cta {
        padding: 40px 48px;
        background: var(--navy);
        border-radius: var(--radius);
        color: var(--white);
    }

    .support-cta-content {
        display: flex;
        align-items: center;
        gap: 32px;
    }

    .support-cta-icon {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: rgba(201, 169, 110, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: var(--gold);
        flex-shrink: 0;
    }

    .support-cta-content h3 {
        font-family: var(--font-serif);
        font-size: 1.4rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .support-cta-content p {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 16px;
        max-width: 500px;
    }

    .support-cta-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .support-cta-actions .btn {
        padding: 10px 24px;
        border-radius: 60px;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-sans);
    }

    .support-cta-actions .btn-gold {
        background: var(--gold);
        color: var(--navy);
        border: none;
    }

    .support-cta-actions .btn-gold:hover {
        background: #d4b47a;
        transform: translateY(-2px);
    }

    .support-cta-actions .btn-outline {
        background: transparent;
        color: var(--white);
        border: 1.5px solid rgba(255, 255, 255, 0.3);
    }

    .support-cta-actions .btn-outline:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: var(--white);
        transform: translateY(-2px);
    }

    /* ---- Concierge Support Link ---- */
    .help-support-link {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--gray-200);
    }

    .help-support-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-radius: 8px;
        background: var(--cream-light);
        border: 1px solid rgba(201, 169, 110, 0.15);
        text-decoration: none;
        color: inherit;
        transition: all 0.3s ease;
    }

    .help-support-btn:hover {
        background: var(--cream);
        border-color: var(--gold);
        transform: translateX(4px);
    }

    .help-support-btn i:first-child {
        font-size: 1.2rem;
        color: var(--gold);
        flex-shrink: 0;
    }

    .help-support-btn div {
        flex: 1;
    }

    .help-support-btn strong {
        display: block;
        font-size: 0.8rem;
        color: var(--navy);
        margin-bottom: 1px;
    }

    .help-support-btn span {
        font-size: 0.65rem;
        color: var(--gray-600);
    }

    /* ================================================================ */
    /* RESPONSIVE                                                     */
    /* ================================================================ */

    @media (max-width: 1024px) {
        .support-quick-contact {
            grid-template-columns: repeat(2, 1fr);
        }

        .support-feedback-actions {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (max-width: 768px) {
        .support-quick-contact {
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 40px;
        }

        .support-contact-card {
            padding: 16px 14px;
            gap: 12px;
        }

        .support-contact-icon {
            width: 40px;
            height: 40px;
            font-size: 1.1rem;
        }

        .support-contact-info h4 {
            font-size: 0.85rem;
        }

        .support-contact-info p {
            font-size: 0.65rem;
        }

        .support-contact-action {
            font-size: 0.6rem;
        }

        .support-search-box input {
            padding: 12px 48px 12px 44px;
            font-size: 0.85rem;
        }

        .support-search-box i.fa-search {
            left: 16px;
            font-size: 0.8rem;
        }

        .support-faq-categories {
            justify-content: flex-start;
            padding: 0 12px;
        }

        .support-faq-category {
            padding: 8px 14px;
            font-size: 0.65rem;
            gap: 5px;
        }

        .support-faq-category i {
            font-size: 0.65rem;
        }

        .support-faq-item .support-faq-question {
            padding: 16px 18px;
            gap: 12px;
        }

        .support-faq-item .support-faq-icon {
            width: 32px;
            height: 32px;
            font-size: 0.75rem;
        }

        .support-faq-item .support-faq-text {
            font-size: 0.85rem;
        }

        .support-faq-item .support-faq-answer {
            font-size: 0.8rem;
            padding: 0 18px;
        }

        .support-faq-item.open .support-faq-answer {
            padding: 0 18px 18px;
        }

        .support-feedback-actions {
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .support-feedback-btn {
            padding: 16px 18px;
        }

        .support-feedback-btn i {
            font-size: 1.3rem;
        }

        .support-cta {
            padding: 28px 24px;
        }

        .support-cta-content {
            flex-direction: column;
            text-align: center;
            gap: 20px;
        }

        .support-cta-content h3 {
            font-size: 1.2rem;
        }

        .support-cta-actions {
            justify-content: center;
        }
    }

    @media (max-width: 480px) {
        .support-quick-contact {
            grid-template-columns: 1fr;
        }

        .support-faq-item .support-faq-question {
            padding: 14px 14px;
            gap: 10px;
        }

        .support-faq-item .support-faq-icon {
            width: 28px;
            height: 28px;
            font-size: 0.65rem;
        }

        .support-faq-item .support-faq-text {
            font-size: 0.8rem;
        }

        .support-faq-item .support-faq-arrow {
            font-size: 0.6rem;
            width: 20px;
        }

        .support-faq-item .support-faq-answer {
            font-size: 0.75rem;
            padding: 0 14px;
        }

        .support-faq-item.open .support-faq-answer {
            padding: 0 14px 14px;
        }

        .support-faq-answer ul li,
        .support-faq-answer ol li {
            font-size: 0.75rem;
        }

        .support-cta-content h3 {
            font-size: 1.1rem;
        }

        .support-cta-actions {
            flex-direction: column;
            align-items: center;
            width: 100%;
        }

        .support-cta-actions .btn {
            width: 100%;
            max-width: 260px;
            justify-content: center;
        }

        .support-feedback-btn strong {
            font-size: 0.85rem;
        }

        .support-feedback-btn span {
            font-size: 0.7rem;
        }
    }