/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Inter:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap');
/* Added */

:root {
    /* Colors */
    --color-primary: #ffffff;
    /* Pure White Clone */
    --color-text: #000000;
    /* Pure Black */
    --color-accent: #D5AE36;
    /* Gold */
    --color-rose-gold: #b76e79;
    /* Added */
    --color-white: #ffffff;
    --color-border: #e0e0e0;

    /* Typography */
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Inter', sans-serif;
    --font-script: 'Pinyon Script', cursive;
    /* Added */

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;

    /* Header */
    --header-height: 80px;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-primary);
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

/* GLOBAL HOVER COLOR: ROSE GOLD */
.site-header a:hover,
.site-footer a:hover,
.nav-link:hover,
.footer-link:hover,
.header-nav-row a:hover,
.top-link:hover,
.dropdown-menu a:hover {
    color: var(--color-rose-gold) !important;
}

/* FOLLOW US TEXT HELPER */
.follow-us-text {
    font-family: var(--font-script);
    font-size: 1.3rem;
    text-transform: lowercase;
    margin-right: 15px;
    vertical-align: middle;
    opacity: 0.9;
    letter-spacing: 0.5px;
    color: inherit;
}

ul {
    list-style: none;
}

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

/* Utilities */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.text-center {
    text-align: center;
}

.uppercase {
    text-transform: uppercase;
}

/* Config-based Visibility */
.hidden {
    display: none !important;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: -0.02em;
}

h1 {
    font-size: 3.5rem;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
}

h3 {
    font-size: 1.5rem;
}

/* Header & Navigation - Strict Elite Structure */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: transparent;
    /* Changed from #000 to transparent for mix-blend to work best initially? No, user wants black header but text visible. */
    /* The requirement was: "follow us text siyah header da siyeh renkli gorunuyor".
       If header background is black, text must be white. 
       If header uses mix-blend-mode difference, background affects it.
       Let's stick to the mix-blend-mode on the TEXT/INNER elements if possible, or header itself if transparent. 
       But current style has background: #000. 
       If background is #000, mix-blend-mode: difference will invert whatever is BEHIND the header.
       Since header covers content, difference on header BG will invert the page content. That's a "Negative" header effect.
       Maybe they want the TEXT to be difference?
       "text blend mode difference".
       I'll apply difference to the header container, but background must be transparent or white?
       If background is #000, difference of #000 is Identity (no change).
       Wait, difference(A, B) = |A - B|.
       If HeaderBG=Black(0), Page=White(1). |0-1| = 1 (White). Header becomes White block? No.
       If HeaderBG=White(1), Page=White(1). |1-1| = 0 (Black).
       
       Let's try: Header Background Transparent (or semi), Text White, Text Mix-Blend Difference?
       But user said "siyah header".
       I will use: background: rgba(0,0,0,0) (Initially) with Text Difference.
       But backup had `background: #000`.
       Let's keep `background: #000` but add `color: #fff`.
       AND for the specific "follow us" text, ensure it inherits.
       User said "follow us text siyah header da siyeh renkli gorunuyor" -> "In the black header, it looks black" (invisible).
       So it just needs to be WHITE.
       
       I'll simple force Color: White for header elements.
    */
    background: #000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    color: #fff;
    /* FORCE WHITE */
}

/* Wishlist Fix */
/* Ensure SVG stroke uses current color */
.site-header svg {
    stroke: currentColor;
    fill: none;
}

.site-header svg[fill="currentColor"] {
    fill: currentColor;
    stroke: none;
}

.site-header.scrolled {
    background-color: #fff;
    border-bottom-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    color: #000 !important;
    /* Force Black Text */
    mix-blend-mode: normal !important;
    /* Reset blend mode */
}

/* Force children to black on scroll */
.site-header.scrolled a,
.site-header.scrolled span,
.site-header.scrolled .follow-us-text,
.site-header.scrolled .icon-link,
.site-header.scrolled .top-link,
.site-header.scrolled .header-nav-row a {
    color: #000 !important;
}

/* Hover remains Rose Gold */
.site-header.scrolled a:hover,
.site-header.scrolled .icon-link:hover,
.site-header.scrolled .top-link:hover,
.site-header.scrolled .header-nav-row a:hover {
    color: var(--color-rose-gold) !important;
}

/* Header Grid Structure */
.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 55px;
    padding: 0 4%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: height 0.4s ease, border 0.4s ease;
}

.header-logo-row {
    height: 100px !important;
}

/* Scrolled Tightness */
.site-header.scrolled .header-row {
    height: 40px;
    border-bottom-color: rgba(0, 0, 0, 0.02);
}

.site-header.scrolled .header-logo-row {
    height: 50px !important;
    /* Slightly taller for 32px logo */
}

/* Row 1: Top Nav (Socials & Partner) */
.header-top-row .header-left,
.header-top-row .header-right {
    display: flex;
    align-items: center;
    gap: 35px;
}

.top-link,
.icon-link,
.lang-select {
    color: #fff;
    font-size: 0.8rem;
    /* Increased as requested */
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-header.scrolled .top-link,
.site-header.scrolled .icon-link,
.site-header.scrolled .lang-select {
    color: #111;
}

.top-link:hover {
    opacity: 1;
    color: var(--color-accent);
}

/* Row 2: Centered Brand Identity */
.header-logo-row {
    justify-content: center;
}

.logo-link img {
    height: 75px;
    width: auto;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.site-header.scrolled .logo-link img {
    filter: invert(1);
    height: 32px;
    /* 2x the previous 16px */
    transform: scale(1);
}

/* Row 3: Main Navigation Links */
.header-nav-row {
    justify-content: center;
    border-bottom: none;
}

.header-nav-row ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-nav-row li {
    padding: 0 30px;
    /* Perfectly equal gap */
    position: relative;
}

.header-nav-row a,
.header-nav-row .nav-trigger {
    color: #fff;
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
    cursor: pointer;
}

.site-header.scrolled .header-nav-row a,
.site-header.scrolled .header-nav-row .nav-trigger {
    color: #000;
}

.header-nav-row a:hover {
    color: var(--color-accent);
}

/* Flush Dropdown - The Brand */
.has-dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    /* Perfectly flush with Row 3 */
    left: 50%;
    transform: translateX(-50%) translateY(0);
    background: #fff;
    min-width: 220px;
    padding: 20px 0;
    display: none;
    /* Controlled by hover */
    flex-direction: column;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    z-index: 2100;
    border: 1px solid #f0f0f0;
}

.has-dropdown:hover .dropdown-menu {
    display: flex;
}

.dropdown-menu a {
    color: #333 !important;
    padding: 12px 30px;
    font-size: 0.7rem;
    text-align: center;
    letter-spacing: 0.1em;
    transition: background 0.3s ease;
}

.dropdown-menu a:hover {
    background: #fcfcfc;
    color: var(--color-accent) !important;
}

/* Elite Magazine Gallery Extension */
.magazine-section {
    padding: 15vh 0;
    background: #fbfbfb;
}

.magazine-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* Force 5 columns for all covers in one row */
    gap: 30px;
    padding: 0 5%;
    margin-top: 80px;
}

.magazine-item {
    cursor: pointer;
    text-decoration: none;
}

.magazine-frame {
    position: relative;
    aspect-ratio: 1 / 1.414;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.magazine-item:hover .magazine-frame {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
    border-color: var(--color-accent);
}

.magazine-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.magazine-item:hover .magazine-frame img {
    transform: scale(1.05);
}

.magazine-meta {
    margin-top: 25px;
    text-align: center;
}

.magazine-meta h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #111;
}

/* Lightbox Modal Havali Style */
.elite-reader-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    overflow: hidden;
    /* Fix dev scroll */
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.elite-reader-modal.active {
    display: flex;
    opacity: 1;
}

.reader-close-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

.reader-close-btn:hover {
    background: rgba(213, 174, 54, 0.3);
    border-color: rgba(213, 174, 54, 0.6);
    transform: rotate(90deg) scale(1.1);
}

.reader-viewport {
    width: 95vw;
    height: 85vh;
    /* Space for toolbar */
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 3000px;
}

.fb-book {
    box-shadow: 0 50px 150px rgba(0, 0, 0, 0.6);
    background: transparent;
    /* Fix white page ghosting on left */
}

/* 3D Magazine Page Havali Logic */
.page {
    background-color: transparent;
    /* Fix phantom white page */
    display: none;
    overflow: hidden;
    backface-visibility: hidden;
}

.page-content {
    width: 100%;
    height: 100%;
    position: relative;
    background: #fff;
    /* White only for actual content */
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

/* Glossy Shine for Vogue Style */
.page-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.08) 100%);
    pointer-events: none;
    z-index: 5;
}

.reader-loader {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: var(--font-heading);
    letter-spacing: 0.4em;
    font-size: 0.7rem;
    text-transform: uppercase;
    z-index: 50;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.4;
    }
}

/* Magazine Toolbar Havali */
.magazine-toolbar {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 25px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    z-index: 100;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.toolbar-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 10px 16px;
    border-radius: 25px;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-btn:hover {
    background: rgba(213, 174, 54, 0.3);
    border-color: rgba(213, 174, 54, 0.6);
    transform: translateY(-2px);
}

.dropdown-menu li {
    padding: 0 !important;
}

.dropdown-menu a {
    color: #000 !important;
    padding: 10px 20px;
    font-size: 0.7rem;
    text-align: center;
}

.header-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.lang-switch {
    font-size: 0.8rem;
    cursor: pointer;
    text-transform: uppercase;
}

/* 5. COUTURE PROMO (Elegance) */
.couture-promo {
    padding: 100px 0;
    background: #fff;
    min-height: 80vh;
    /* Ensure tall section */
    display: flex;
    align-items: center;
}

.promo-container {
    display: flex;
    align-items: stretch;
    /* Stretch both columns */
    justify-content: space-between;
    gap: 60px;
    height: 100%;
}

.promo-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center content block */
    padding-right: 20px;
}

/* Internal fix to spread text if needed, or keep compact */
.promo-desc {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 25px;
    /* Spacing between paragraphs */
}

.promo-media {
    flex: 1;
    height: auto;
    /* Let it stretch */
    display: flex;
}

.promo-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    /* Slight modern touch */
}

/* Hero Section */
.hero-section {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-content {
    text-align: center;
    color: var(--color-white);
    z-index: 1;
    mix-blend-mode: difference;
    /* Stylish effect for white text on video */
}

.hero-content h1 {
    font-size: 5rem;
    letter-spacing: 0.2em;
    margin-bottom: var(--spacing-xs);
}

.hero-content p {
    font-family: var(--font-body);
    font-size: 1rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

.btn-hero {
    display: inline-block;
    padding: 1rem 2rem;
    border: 1px solid var(--color-white);
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8rem;
    background: transparent;
    cursor: pointer;
}

.btn-hero:hover {
    background: var(--color-white);
    color: var(--color-text);
}

/* Bestsellers Section */
.section-bestsellers {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-primary);
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.product-slider {
    display: flex;
    overflow-x: auto;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
}

.product-slider::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar Chrome */
}

.product-card {
    min-width: 300px;
    background: var(--color-white);
    border: 1px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.product-card:hover {
    border-color: var(--color-accent);
}

.product-image {
    width: 100%;
    aspect-ratio: 2/3;
    background-color: #eee;
    object-fit: cover;
}

.product-info {
    padding: var(--spacing-sm);
    text-align: center;
}

.product-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: var(--spacing-xs);
}

.product-price {
    font-size: 0.9rem;
    color: #666;
}

/* Footer */
.site-footer {
    background-color: #111;
    color: #fff;
    padding: var(--spacing-xl) 0 var(--spacing-md);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.footer-col h4 {
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid #333;
    padding-bottom: var(--spacing-sm);
}

.footer-col ul li {
    margin-bottom: var(--spacing-sm);
}

.footer-col ul li a {
    color: #888;
    font-size: 0.9rem;
}

.footer-col ul li a:hover {
    color: var(--color-accent);
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #222;
    padding-top: var(--spacing-md);
    color: #555;
    font-size: 0.8rem;
}

/* Locations Map */
.contact-locations {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.location-item {
    margin-bottom: var(--spacing-md);
}

.location-item strong {
    display: block;
    color: var(--color-white);
    margin-bottom: 5px;
}

.location-item p {
    color: #999;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* ---------------------------------------------------------
   OKSANA MUKHA CLONE SECTIONS
   --------------------------------------------------------- */

/* 1. First Screen (Hero) */
.first-screen {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
}

.first-screen video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    opacity: 0.8;
    /* Slight dim for text readability */
}

.content-box {
    position: relative;
    z-index: 10;
    text-align: center;
    color: var(--color-white);
    margin-top: 100px;
    /* Offset for header */
}

.first-screen-title p {
    font-family: var(--font-heading);
    font-size: 3rem;
    /* Large elegantly */
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

/* GLOBAL BUTTONS: SHARP & OUTLINE STYLE */
.main-button,
.main-button-white,
.main-button-round,
button,
.load-more-container button,
.wa-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 40px;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #111;
    background: transparent;
    border: 1px solid #111;
    border-radius: 0 !important;
    /* Sharp Edges */
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    min-width: 160px;
}

.main-button:hover,
.main-button-white:hover,
.main-button-round:hover,
.load-more-container button:hover {
    background: #111;
    color: #fff;
    border-color: #111;
}

.main-button-white {
    color: #fff;
    border-color: #fff;
}

.main-button-white:hover {
    background: #fff;
    color: #111;
}

/* BESTSELLERS: UNIFORM IMAGE SIZE */
.swiper-slide .slide-image {
    width: 100%;
    aspect-ratio: 2 / 3;
    /* Strict vertical rectangle */
    overflow: hidden;
    margin-bottom: 20px;
}

.swiper-slide .slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.swiper-slide:hover .slide-image img {
    transform: scale(1.05);
}

/* LOVED BY BRIDES VISIBILITY FIX */
.reviews-section {
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 400px;
    /* Ensure space is reserved */
    background: #fff;
}

/* 2. Bestsellers */
.best-salles {
    padding: 100px 0;
    text-align: center;
    background-color: var(--color-primary);
}

.best-salles .subtitle {
    font-family: var(--font-body);
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 10px;
}

.best-salles .h2 {
    font-family: var(--font-heading);
    font-size: 3rem;
    margin-bottom: 50px;
    font-weight: 300;
}

.main-button {
    display: inline-block;
    padding: 15px 40px;
    border: 1px solid #000;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    margin-top: 50px;
    transition: all 0.3s ease;
}

.main-button:hover {
    background: #000;
    color: #fff;
}

/* Swiper Styling Override */
.swiper-slide {
    width: auto;
    /* Let card define width */
    max-width: 350px;
}

.product-card {
    text-align: left;
    /* Oksana aligns text left/center under image */
}

.product-image {
    width: 100%;
    height: 500px;
    /* Tall portrait aspect */
    object-fit: cover;
    margin-bottom: 15px;
}

.product-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 400;
    text-align: center;
}

/* Elite Magazine Gallery */
.magazine-section {
    padding: 120px 0;
    background: #f8f8f8;
    text-align: center;
}

.magazine-container {
    padding: 0 5%;
}

.magazine-card {
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.magazine-card:hover {
    transform: translateY(-15px);
}

.magazine-cover-wrapper {
    position: relative;
    aspect-ratio: 1 / 1.414;
    /* A4 Proportions */
    overflow: hidden;
    background: #e0e0e0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.magazine-cover-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.magazine-card:hover .magazine-cover-wrapper img {
    transform: scale(1.05);
}

.magazine-info {
    margin-top: 25px;
}

.magazine-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #222;
}

.read-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
}

/* Elite Reader Modal */
.magazine-reader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(15px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.magazine-reader-overlay.active {
    opacity: 1;
    visibility: visible;
}

.reader-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 10001;
    transition: transform 0.3s ease;
}

.reader-close:hover {
    transform: rotate(90deg);
}

.reader-container {
    width: 90vw;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* PageFlip Core Styles */
.flip-book {
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5);
    background: #fff;
    display: none;
}

.flip-book.loaded {
    display: block;
}

.page {
    background-color: #fff;
    overflow: hidden;
}

.reader-loader {
    color: #fff;
    font-family: var(--font-heading);
    letter-spacing: 0.3em;
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* 3. Exclusive Prices (Partners) */
.exclusive-prices {
    padding: 120px 0;
    background-color: #f4f4f4;
    /* Slightly darker grey */
    text-align: center;
}

.exclusive-prices-wrapper .section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.exclusive-prices-text {
    color: #666;
    margin-bottom: 40px;
}

.become-partner {
    font-size: 1rem;
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* 4. Go Online Shop (Promo) */
.go-online-shop {
    position: relative;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: #222;
    /* Fallback */
}

.bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/promo_bg.jpg');
    /* Need to add this image or placeholder */
    background-size: cover;
    background-position: center;
    opacity: 0.6;
}

.go-online-shop-box {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Header Tweaks for desktop layout */
.site-header .container {
    max-width: 1800px;
    /* Wide header */
}

.header-top {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}

.header-left,
.header-right {
    display: flex;
    gap: 20px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Block By You (Instagram) */
.block-by-you {
    padding: 100px 0;
    text-align: center;
    background: #fff;
}

.block-by-you .section-title {
    font-size: 2rem;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
}

.block-by-you .section-subtitle {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 50px;
    letter-spacing: 0.1em;
}

.instagram-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media(min-width: 768px) {
    .instagram-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

.insta-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
}

.insta-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.insta-item:hover img {
    transform: scale(1.1);
}

.insta-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 1rem;
    letter-spacing: 0.1em;
}

.insta-item:hover .overlay {
    opacity: 1;
}

/* Header Icons */
.icon-link {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    font-weight: 500;
}

.icon-link svg {
    margin-bottom: -1px;
}

.lang-select {
    background: transparent;
    border: none;
    color: var(--color-white);
    font-size: 0.75rem;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--font-body);
    letter-spacing: 0.1em;
    outline: none;
}

.site-header.scrolled .lang-select {
    color: var(--color-text);
}

.lang-select option {
    color: #000;
}

/* Main Navigation */
/* Main Nav styles defined earlier */

.main-nav ul {
    display: flex;
    justify-content: center;
    gap: 30px;
    /* Reduced gap */
    position: relative;
    z-index: 100;
}

.main-nav li {
    position: relative;
    padding: 0;
    /* Remove extra padding so height is tight */
}

/* Dropdown - Minimal Text Style */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    transform: none;
    background: transparent;
    min-width: 150px;
    padding: 5px 0 0 0;
    /* Minimal spacing from text */
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    flex-direction: column;
    gap: 8px !important;
    text-align: left;
    border: none;
}

/* Ensure background if header wraps or needs contrast, 
   but user asked for 'normal list'. We might add a subtle bg if needed later. 
   For now, strictly following 'no card' request. */
.site-header.scrolled .dropdown-menu {
    background: rgba(255, 255, 255, 0.95);
    /* Readability on scroll white */
    padding: 15px;
    /* Add some padding if it has a bg */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.dropdown-menu li {
    padding: 5px 0;
    width: 100%;
}

/* Center Logo In Nav */
.nav-logo-item {
    margin: 0 20px;
    /* Space around logo */
    display: flex;
    align-items: center;
}

.nav-logo-item img {
    height: 35px;
    /* Adjust as needed */
    width: auto;
    display: block;
    transition: filter 0.3s ease;
}

/* Invert white logo to black on scroll */
.site-header.scrolled .nav-logo-item img {
    filter: invert(1);
}

/* Dropdown Links */
.dropdown-menu a {
    color: var(--color-white);
    /* Inherit header color */
    padding: 0;
    font-size: 0.75rem;
    text-transform: capitalize;
    letter-spacing: 0.05em;
    display: block;
}

.site-header.scrolled .dropdown-menu a {
    color: var(--color-text);
}



.dropdown-menu a:hover {
    background: transparent;
    color: var(--color-accent);
    /* Gold hover */
    text-decoration: underline;
}

.site-header.scrolled .main-nav {
    border-top-color: rgba(0, 0, 0, 0.1);
}

/* Scroll Animations */
.anim-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.anim-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Online Couture Promo (Rosa Clará Style) */
.couture-promo {
    padding: 100px 0;
    background-color: #fdfdfd;
    /* Very subtle warm white */
}

.promo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

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

    .promo-content {
        flex: 1.4;
        /* Takes more space */
        padding-right: 50px;
        text-align: center;
    }

    .promo-media {
        flex: 0.8;
        /* Smaller video (approx 1/3 visual weight vs text area) */
        width: 100%;
        max-width: 450px;
        /* Limit max width */
    }
}

.overlapping-titles {
    position: relative;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.script-text {
    font-family: 'Pinyon Script', cursive;
    font-size: 5rem;
    color: #444;
    /* Slightly softer than pure black to let brand text pop */
    position: absolute;
    top: -20px;
    /* Lifted up slightly */
    z-index: 2;
    transform: rotate(-5deg);
}

.brand-text {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    letter-spacing: 0.15em;
    margin-top: 60px;
    /* Push below overlapping script */
    z-index: 1;
}

.sub-brand-text {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #666;
    margin-top: 5px;
}

.promo-tagline {
    font-family: var(--font-body);
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 20px;
}

.promo-desc {
    max-width: 500px;
    margin: 0 auto 40px;
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
}

.main-button-round {
    display: inline-block;
    padding: 15px 40px;
    border: 1px solid #000;
    border-radius: 50px;
    /* Rounded Pill shape */
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.main-button-round:hover {
    background: #000;
    color: #fff;
    transform: translateY(-2px);
}

.promo-media {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.promo-media video {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive Tweaks for Promo */
@media(max-width: 768px) {
    .script-text {
        font-size: 4rem;
    }

    .brand-text {
        font-size: 2rem;
    }

    .overlapping-titles {
        height: 120px;
    }
}

/* Footer */
/* Footer */
.site-footer {
    background: #000;
    color: #fff;
    padding: 80px 0 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

@media(min-width: 992px) {
    .footer-grid {
        display: flex;
        /* Use flex for centering cluster */
        justify-content: center;
        gap: 80px;
        /* Space between columns */
    }
}

.footer-col h4 {
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    margin-bottom: 25px;
    font-weight: 500;
    color: #fff;
    /* White title, no yellow */
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col li {
    margin-bottom: 12px;
}

.footer-col a {
    color: #999;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.3s;
}

.footer-col a:hover {
    color: #fff;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 60px;
    padding-top: 20px;
    text-align: center;
    font-size: 0.7rem;
    color: #666;
}

/* Responsive (Mobile) */
/* Mobile Menu Overlay Hidden by default */
.mobile-menu-overlay {
    display: none;
}

@media (max-width: 991px) {
    .mobile-menu-overlay {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 2400;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        padding: 40px 20px;
    }


    /* Hide specific elements on mobile */
    .u-hideMobile,
    .follow-us-text {
        display: none !important;
    }

    .header-top-row .header-left {
        gap: 15px;
    }

    .header-top-row .header-right {
        gap: 20px;
    }

    /* Wishlist Optimization: Hide text, keep icon */
    .hide-mobile {
        display: none !important;
    }

    .header-logo-row {
        height: 70px !important;
    }

    .logo-link img {
        height: 35px;
        /* Slightly smaller for mobile */
    }

    .header-nav-row {
        display: none !important;
        /* Force hide desktop nav on mobile */
    }

    .header-top-row {
        padding: 10px 15px !important;
    }

    /* Footer Fixes */
    .footer-grid {
        grid-template-columns: 1fr !important;
        /* Stack columns */
        gap: 40px !important;
        text-align: center;
    }

    .footer-col {
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .footer-logo img {
        height: 40px !important;
    }

    /* Traditional Burger Toggle */
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        color: inherit;
        padding: 10px;
        cursor: pointer;
        z-index: 9999;
        pointer-events: auto !important;
        min-width: 44px;
        min-height: 44px;
        position: relative;
    }

    .burger-icon {
        display: block;
        width: 24px;
        height: 2px;
        background: currentColor;
        position: relative;
        transition: background 0.3s;
    }

    .burger-icon::before,
    .burger-icon::after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: currentColor;
        transition: all 0.3s;
    }

    .burger-icon::before {
        top: -8px;
    }

    .burger-icon::after {
        bottom: -8px;
    }

    .menu-toggle.active .burger-icon {
        background: transparent;
    }

    .menu-toggle.active .burger-icon::before {
        transform: rotate(45deg);
        top: 0;
    }

    .menu-toggle.active .burger-icon::after {
        transform: rotate(-45deg);
        bottom: 0;
    }

    /* Desktop Nav Hide */
    .header-nav-row {
        display: none;
    }

    /* Mobile Menu Overlay Styles adjusted within media query */

    .mobile-menu-header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 20px 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-menu-logo {
        height: 35px;
    }

    .mobile-close-btn {
        background: none;
        border: none;
        font-size: 2.5rem;
        color: #000;
        cursor: pointer;
        font-family: var(--font-body);
        font-weight: 300;
        line-height: 1;
        padding: 10px;
    }

    .mobile-nav-list {
        width: 100%;
        margin-top: 60px;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .mobile-nav-list {
        list-style: none;
        text-align: center;
        width: 100%;
    }

    .mobile-nav-list li {
        margin: 30px 0;
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .mobile-menu-overlay.active .mobile-nav-list li {
        opacity: 1;
        transform: translateY(0);
    }

    .mobile-nav-list a,
    .mobile-nav-list .mobile-trigger {
        color: #000;
        font-family: var(--font-heading);
        font-size: 2.2rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        font-weight: 300;
        transition: color 0.3s ease;
        cursor: pointer;
    }

    /* Mobile Sub-menu */
    .mobile-dropdown {
        list-style: none;
        padding-left: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
        background: rgba(0, 0, 0, 0.02);
    }

    .mobile-has-dropdown.active .mobile-dropdown {
        max-height: 500px;
        padding: 10px 0;
    }

    .mobile-dropdown li {
        margin: 15px 0 !important;
    }

    .mobile-dropdown a {
        font-size: 1.4rem !important;
        opacity: 0.7;
    }

    .mobile-nav-list a:hover {
        color: var(--color-rose-gold);
    }

    /* Staggered entrance */
    .mobile-menu-overlay.active li:nth-child(1) {
        transition-delay: 0.1s;
    }

    .mobile-menu-overlay.active li:nth-child(2) {
        transition-delay: 0.2s;
    }

    .mobile-menu-overlay.active li:nth-child(3) {
        transition-delay: 0.3s;
    }

    .mobile-menu-overlay.active li:nth-child(4) {
        transition-delay: 0.4s;
    }

    .mobile-menu-overlay.active li:nth-child(5) {
        transition-delay: 0.5s;
    }
}

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

/* Elite Entrance Animations */
.anim-title {
    opacity: 0;
    transform: translateY(30px);
    letter-spacing: 0.3em;
    transition: all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.anim-title.visible {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: 0.15em;
}

.anim-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.anim-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.anim-section.visible .anim-up,
.anim-section.visible .anim-title {
    opacity: 1;
    transform: translateY(0);
}

/* Staggering for children if needed */
/* Magazine Catalog Uniformity */
.magazine-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    /* Standard Portrait Magazine Ratio */
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease;
}

.magazine-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Crop to fit */
    object-position: top center;
    /* Focus on top (usually face/title) */
    display: block;
    transition: transform 0.6s ease;
}

.magazine-frame:hover {
    transform: translateY(-5px);
}

.magazine-frame:hover img {
    transform: scale(1.05);
    /* Subtle Zoom */
}

.anim-section.visible .anim-up:nth-child(2) {
    transition-delay: 0.2s;
}

.anim-section.visible .anim-up:nth-child(3) {
    transition-delay: 0.4s;
}