/** Shopify CDN: Minification failed

Line 2605:0 Unexpected "}"

**/
/* 1. GLOBAL RESET & TYPOGRAPHY */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

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

:root {
    --color-background: #FAF6F0;
    /* Official Cream */
    --color-secondary-bg: #E8E3D5;
    /* Official Darker Beige */
    --color-wood: #1A120B;
    /* Dark Wood / Text */
    --color-wood-light: #5D4037;
    --color-gold: #C5A059;
    /* Primary Brand Gold */
    --color-gold-text: #C5A059;
    /* Legacy mapping */
    --color-gold-solid: #C89D34;
    /* Keep for specific buttons if needed, or map to gold */
    --color-bronze: #8D6E63;
    --font-heading: 'Cinzel', 'Sakkal Majalla', 'Traditional Arabic', 'Amiri', serif;
    /* English & Arabic */
    --font-body: 'Lato', sans-serif;
}

body {
    background-color: var(--color-background);
    color: var(--color-wood);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-gold);
    /* Headings in Gold */
    letter-spacing: 0.1em;
    font-weight: 400;
}

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

ul {
    list-style: none;
}

/* Animation Utilities */
html {
    scroll-behavior: smooth;
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 2. HEADER FIXES (Double-Decker Compact) */
.announcement-bar {
    background-color: var(--color-gold-solid);
    color: #FFFFFF;
    padding: 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.site-header {
    background-color: var(--color-background);
    padding: 15px 4rem !important;
    /* CRUSHED VERTICAL PADDING */
    margin: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(26, 18, 11, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.header-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    /* Logo margin bottom */
}

/* Row 2: Navigation */
.header-bottom {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0;
}

.header-currency {
    justify-self: start;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-gold-solid);
    letter-spacing: 1px;
}

.header-logo {
    justify-self: center;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    /* Unlock height */
    min-height: 40px;
    margin-bottom: 0;
    /* Remove margin */
}

.header-logo h1 {
    margin: 0;
    line-height: 1;
    display: flex;
}

.header-logo img {
    max-width: 100%;
    /* Controlled by inline style or parent */
    width: auto;
    height: auto;
    max-height: 120px;
    /* Allow it to be taller */
    object-fit: contain;
    display: block;
}

/* Row 2: Navigation - ensure tight gap */
.header-bottom {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 5px;
    /* Tiny gap */
}

.header-icons {
    justify-self: end;
    display: flex;
    gap: 1.5rem;
    font-size: 1rem;
    color: var(--color-gold-text);
    align-items: center;
}

.nav-list {
    display: flex;
    gap: 2rem;
    /* Tighter gap */
    margin: 0;
    padding: 0;
}

.nav-link {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 0.8rem;
    /* 13px */
    letter-spacing: 0.15em;
    /* Increased spacing */
    color: var(--color-gold-text);
    position: relative;
    font-weight: 400;
    /* Cinzel is bold enough */
}

.nav-link:hover {
    color: var(--color-wood);
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -4px;
    left: 0;
    background-color: var(--color-wood);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* 3. HERO SECTION UPGRADE (Cinematic & Seamless) */
img {
    display: block;
    /* Fix white seam issues global */
}

.hero-section {
    min-height: 85vh;
    /* Strict min-height */
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #FFFFFF;
    position: relative;
    background-color: #050505;
    margin-bottom: 0;
    /* Remove gap */
    border-bottom: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 0 2rem;
    max-width: 1200px;
}

.hero-title {
    font-family: var(--font-heading);
    /* Cinzel */
    font-weight: 400 !important;
    /* Lighter, more premium */
    font-size: 3.5rem;
    /* Slightly reduced for elegance */
    margin-bottom: 1rem;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.15em !important;
    /* Wide spacing */
    line-height: 1.1;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
    font-family: 'Playfair Display', serif !important;
    /* Italic elegance */
    font-style: italic;
    font-size: 1.3rem;
    color: #FAF6F0;
    /* Cream/Off-white */
    margin-bottom: 2.5rem;
    letter-spacing: 1px;
}

/* 3b. SIGNATURE SPOTLIGHT SECTION */
.signature-section {
    min-height: 80vh;
    /* Strict min-height */
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background-color: #050505;
    margin-bottom: 0;
    border-bottom: none;
}

.signature-content {
    position: relative;
    z-index: 2;
    padding: 0 2rem;
}

.signature-title {
    font-family: var(--font-heading);
    /* Cinzel */
    font-size: 5rem;
    color: #FFFFFF;
    letter-spacing: 0.3em;
    margin-bottom: 0.5rem;
    line-height: 1;
    font-weight: 400;
}

.signature-subtitle {
    font-family: var(--font-body);
    /* Lato */
    font-size: 1rem;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 2rem;
}

/* 3c. DISCOVERY SET SECTION */
.discovery-section {
    min-height: 70vh;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background-color: #050505;
    margin-bottom: 0;
    border-bottom: none;
}

.discovery-content {
    position: relative;
    z-index: 2;
    padding: 0 2rem;
}

.discovery-subtitle {
    font-family: var(--font-body);
    /* Lato */
    font-size: 0.9rem;
    color: var(--color-gold-text);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.discovery-title {
    font-family: var(--font-heading);
    /* Cinzel */
    font-size: 4rem;
    color: #FFFFFF;
    letter-spacing: 0.25em;
    margin-bottom: 3rem;
    font-weight: 400;
}

/* 3d. ESSENCE BANNER SECTION */
.essence-banner-section {
    min-height: 75vh;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background-color: #050505;
    margin-bottom: 0;
    border-bottom: none;
}

.essence-content {
    position: relative;
    z-index: 2;
    padding: 0 2rem;
}

.essence-subtitle {
    font-family: var(--font-body);
    /* Lato */
    font-size: 0.9rem;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
    font-weight: 700;
}

.essence-title {
    font-family: var(--font-heading);
    /* Cinzel */
    font-size: 3.5rem;
    color: #FFFFFF;
    letter-spacing: 0.15em;
    margin-bottom: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
}

/* 3e. EXCLUSIVE BANNER SECTION */
.exclusive-banner-section {
    min-height: 60vh;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background-color: #050505;
    margin-bottom: 0;
    border-bottom: none;
}

.exclusive-content {
    position: relative;
    z-index: 2;
    padding: 0 2rem;
}

.exclusive-title {
    font-family: var(--font-heading);
    /* Cinzel */
    font-size: 2.5rem;
    color: #FFFFFF;
    letter-spacing: 0.25em;
    margin-bottom: 2rem;
    font-weight: 400;
    text-transform: uppercase;
}

/* 3f. CRAFTED GALLERY SECTION */
.crafted-gallery-section {
    background-color: var(--color-cream);
    padding-top: 4rem;
    padding-bottom: 2rem;
    overflow: hidden;
}

.crafted-title {
    text-align: center;
    font-family: var(--font-heading);
    /* Cinzel */
    font-size: 1.5rem;
    color: var(--color-gold-text);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 3rem;
    font-weight: 400;
}

.crafted-gallery-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    gap: 1px;
    padding-bottom: 1rem;
    /* Space for shadow if needed */
}

.crafted-gallery-container::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.crafted-item {
    flex: 0 0 16.666%;
    /* 6 items on desktop */
    scroll-snap-align: start;
    aspect-ratio: 1/1;
    position: relative;
    background-color: #E5E0D8;
    /* Placeholder color */
    display: block;
    /* Ensure anchor fills space */
    cursor: pointer;
}

.crafted-item img,
.crafted-item svg.placeholder-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.crafted-item svg.placeholder-svg {
    background-color: #f4f4f4;
    fill: #ccc;
}

/* Hover Overlay */
.hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hover-icon {
    width: 40px;
    height: 40px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

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

.crafted-item:hover .hover-icon {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 768px) {
    .crafted-item {
        flex: 0 0 80%;
        /* Carousel feel on mobile */
    }
}

/* BUTTONS */
.btn {
    display: inline-block;
    padding: 14px 40px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.4s ease;
    font-family: var(--font-body);
    font-weight: 700;
    text-decoration: none;
}

.btn-outline-gold,
.btn-gold-pill {
    background-color: transparent;
    border: 1px solid var(--color-gold-text);
    color: var(--color-gold-text);
}

.btn-glass-gold {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--color-gold-text);
    color: var(--color-gold-text);
    backdrop-filter: blur(4px);
}

.btn-outline-gold:hover,
.btn-gold-pill:hover,
.btn-glass-gold:hover {
    background-color: var(--color-gold-text);
    color: #1A120B;
    /* Text Black on Hover */
    border-color: var(--color-gold-text);
}

.btn-small {
    padding: 10px 40px;
    font-size: 0.8rem;
}

/* Legacy Button Support */
.btn-outline-white {
    background-color: transparent;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
}

.btn-outline-white:hover {
    background-color: #FFFFFF;
    color: var(--color-wood);
}


/* 4. PRODUCT GRID & CARD REVEAL */
.container {
    max-width: 1600px;
    /* Spacious */
    margin: 0 auto;
}

.product-grid-section {
    margin-top: 0;
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-top: 1px solid #E5E0D8;
}

.section-title {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    font-family: var(--font-body);
    /* Lato */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-wood);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    /* Spacing between cards */
    padding: 0 20px;
    background-color: transparent;
    /* Remove divider background */
    border: none;
    /* Remove outer border */
}

/* 2. MOBILE OPTIMIZATION (Strict "Clean Format" Rule) */
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 10px !important;
    }

    /* REMOVE "GREY BOX" & RESET CARD STYLE */
    .product-card {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        transform: none !important;
        /* Disable lift on touch */
    }

    .image-wrapper {
        aspect-ratio: 1/1.1 !important;
        /* Slight portrait */
        border-radius: 0 !important;
        margin-bottom: 0.5rem !important;
        background-color: transparent !important;
    }

    .card-img {
        object-fit: cover !important;
        /* Cover looks better than contain for lifestyle, but user asked for contain? User asked for contain. However contain might leave white space. Let's stick to user request "contain" or "cover"? User said "contain" but also "product image should stand on page background". I will use contain to follow instruction, but cover is usually safer. Let's use CONTAIN as requested. */
        object-fit: contain !important;
        padding: 0 !important;
    }

    /* 3. FIX THE "UNISEX" BADGE (Micro-Luxury) */
    .badge-unisex,
    .badge-sale,
    .badge-soldout {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        font-size: 9px !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        padding: 3px 8px !important;
        border: 1px solid #1A120B !important;
        background: #FFFFFF !important;
        /* Ensure white background, not transparent */
        color: #1A120B !important;
        border-radius: 0 !important;
        z-index: 2 !important;
        /* Sit above image */
        width: auto !important;
        max-width: none !important;
    }

    /* 4. TYPOGRAPHY REFINEMENT */
    .product-info h3 {
        font-family: 'Cinzel', serif !important;
        font-size: 0.75rem !important;
        /* 12px */
        font-weight: 400 !important;
        color: #1A120B !important;
        text-align: center !important;
        margin-top: 5px !important;
    }

    .product-price {
        font-family: 'Lato', sans-serif !important;
        font-size: 0.7rem !important;
        /* 11px */
        color: #C5A059 !important;
        text-align: center !important;
        margin-top: 2px !important;
    }
}

/* 1. THE "LUXURY TILE" CARD DESIGN (Refined: Floating / Box-less) */
.product-card {
    cursor: pointer;
    text-align: center;
    position: relative;
    background-color: transparent;
    /* Box-less */
    border: none;
    /* No Border */
    border-radius: 0;
    padding: 10px 0;
    /* Minimal vertical padding */
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    box-shadow: none;
    transform: translateY(-5px);
    /* Stronger Lift Effect */
}

.image-wrapper {
    position: relative;
    aspect-ratio: 1/1;
    /* Square Images as requested */
    background-color: #f4f4f4;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.img-primary {
    z-index: 1;
    opacity: 1;
}

.img-secondary {
    z-index: 2;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.image-wrapper:hover .img-secondary {
    opacity: 1;
}

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

/* 3. BADGES & LABELS */
.badge-unisex,
.badge-signature,
.badge-sale {
    position: absolute;
    top: 10px;
    right: 10px;
    /* Top Right Position */
    left: auto;
    /* Reset left */
    background-color: #FFFFFF;
    /* White bg */
    border: 1px solid #E8E3D5;
    /* Thin border */
    color: #1A120B;
    /* Black text */
    font-family: var(--font-body);
    font-size: 10px;
    /* Small font */
    text-transform: uppercase;
    padding: 3px 8px;
    letter-spacing: 0.1em;
    z-index: 10;
    border-radius: 2px;
}

.product-info {
    margin-top: auto;
    /* Push to bottom if needed */
}

.product-info h3 {
    font-family: 'Cinzel', serif;
    /* Cinzel */
    font-size: 1rem;
    color: #1A120B;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

.product-price {
    font-family: 'Lato', sans-serif;
    /* Lato */
    color: #C5A059;
    /* Gold */
    font-size: 0.9rem;
    font-weight: 400;
    margin-top: 0;
}

/* Mobile Typography tweaks */
@media (max-width: 768px) {
    .product-info h3 {
        font-size: 0.8rem;
        /* Readable but compact */
    }

    .product-card {
        padding: 10px;
        /* Smaller padding on mobile */
    }
}

/* 5. "PHILOSOPHY" SECTION */
.section-philosophy {
    display: flex;
    background-color: var(--color-wood);
    color: var(--color-gold-text);
    min-height: 500px;
}

.philosophy-content {
    flex: 1;
    padding: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.philosophy-content h2 {
    color: var(--color-gold-text);
    font-size: 3rem;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.philosophy-content p {
    color: var(--color-cream);
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 3rem;
    max-width: 500px;
}

.philosophy-image {
    flex: 1;
    background-image: url('https://images.unsplash.com/photo-1615634260167-c8cdede054de?auto=format&fit=crop&w=1000&q=80');
    background-size: cover;
    background-position: center;
}

/* 5b. NEWSLETTER SECTION */
.newsletter-section {
    background-color: var(--color-cream);
    padding: 6rem 2rem 8rem;
    text-align: center;
}

.newsletter-section h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--color-wood-light);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-weight: 600;
}

.newsletter-section p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #C5A059;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.newsletter-form-wrapper {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
}

.newsletter-input {
    width: 100%;
    border-radius: 50px;
    padding: 1.5rem 2rem;
    border: 1px solid var(--color-secondary-bg);
    background-color: #FFFFFF;
    font-family: var(--font-body);
    outline: none;
}


/* =========================================
   6. MOBILE OPTIMIZATION (Luxury Touch)
   ========================================= */

/* Mobile Navigation Drawer */
.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 350px;
    height: 100vh;
    background-color: var(--color-background);
    z-index: 2000;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.mobile-drawer.active {
    transform: translateX(0);
}

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 18, 11, 0.6);
    backdrop-filter: blur(2px);
    z-index: 1999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 1.5rem;
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
}

.drawer-title {
    font-family: var(--font-heading);
    color: var(--color-gold);
    font-size: 1.4rem;
    letter-spacing: 0.1em;
}

.drawer-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-wood);
    cursor: pointer;
    line-height: 0.5;
}

.mobile-nav {
    flex: 1;
    overflow-y: auto;
    padding: 2rem 1.5rem;
}

.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-link {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-wood);
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
}

.mobile-nav-link:hover {
    color: var(--color-gold);
    padding-left: 10px;
}

/* Header Adjustments */
.header-mobile-toggle {
    display: none;
    font-size: 1.5rem;
    color: var(--color-gold-solid);
    cursor: pointer;
    justify-self: start;
    padding: 5px;
    /* larger touch target */
}

@media (max-width: 900px) {
    .desktop-nav {
        display: none;
    }

    .header-mobile-toggle {
        display: block;
    }

    .header-top {
        grid-template-columns: 1fr auto 1fr;
    }

    .header-currency {
        display: none;
        /* Hide currency on mobile top bar to save space */
    }

    .header-logo img {
        max-width: 120px;
        /* Smaller logo */
    }
}

/* Base Typography Scaling */
@media screen and (max-width: 749px) {
    html {
        font-size: 16px;
        /* Larger base readibility */
    }

    h1 {
        font-size: 2.5rem !important;
        /* Scale down hero titles */
    }

    h2 {
        font-size: 1.8rem !important;
    }

    h3 {
        font-size: 1.2rem !important;
    }

    .section-padding {
        padding: 2rem 0.75rem;
    }
}

/* Section Specific Mobile Optimizations */
@media screen and (max-width: 749px) {

    /* Hero Section */
    .hero-section {
        min-height: 80vh;
    }

    .hero-content::after {
        /* Text Readability Gradient */
        content: '';
        position: absolute;
        bottom: -50px;
        left: -50%;
        width: 200%;
        height: 300px;
        background: cubic-bezier(0.16, 1, 0.3, 1);
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
        z-index: -1;
    }

    .hero-title {
        font-size: 2.8rem;
        /* readable but big */
        line-height: 1.1;
    }

    /* Product Grid: 2 Columns */
    .product-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .product-card {
        padding: 1rem 0.5rem;
    }

    .product-info h3 {
        font-size: 0.8rem;
    }

    /* Crafted Gallery */
    .crafted-gallery-container {
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: 1rem;
    }

    /* Buttons */
    .btn {
        width: 100%;
        text-align: center;
        padding: 16px 20px;
    }

    /* Footer Accordion-ish */
    .footer-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        border-bottom: none;
        padding-bottom: 2rem;
    }

    .footer-col {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 2rem 0;
        text-align: center;
    }

    .footer-brand {
        order: -1;
        border-bottom: none;
    }

    .footer-col h4 {
        margin-bottom: 1rem;
        font-size: 0.9rem;
        opacity: 0.7;
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .social-icons {
        justify-content: center;
        margin-top: 1rem;
    }

    /* Payment Icons */
    .footer-bottom {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
        padding-top: 0;
    }

    .payment-icons {
        justify-content: center;
        flex-wrap: wrap;
    }
}

.newsletter-btn {
    position: absolute;
    right: 6px;
    top: 6px;
    bottom: 6px;
    border-radius: 50px;
    background-color: var(--color-bronze);
    color: white;
    padding: 0 2.5rem;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: background-color 0.3s ease;
}

.newsletter-btn:hover {
    background-color: var(--color-wood);
}

.newsletter-disclaimer {
    font-size: 0.75rem;
    color: #C5A059;
    margin-top: 2rem;
    opacity: 0.8;
}

.newsletter-disclaimer u {
    cursor: pointer;
    text-decoration: underline;
}

/* 6. MEGA FOOTER */
footer {
    background-color: var(--color-gold-solid);
    color: #FFFFFF;
    padding: 6rem 4rem 2rem;
    margin-top: 0;
}

.social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.social-icons a {
    font-size: 1.2rem;
    color: white;
    transition: opacity 0.3s;
}

.social-icons a:hover {
    opacity: 0.7;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 4rem;
    max-width: 1400px;
    margin: 0 auto;
    border-bottom: 1px solid var(--color-secondary-bg);
    padding-bottom: 4rem;
    margin-bottom: 2rem;
}

.footer-brand h2 {
    color: #FFFFFF;
    margin-bottom: 1.5rem;
}

.footer-brand p {
    opacity: 0.8;
    line-height: 1.8;
}

.footer-col h4 {
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2rem;
    font-size: 0.85rem;
}

.footer-links li {
    margin-bottom: 1rem;
}

.footer-links a {
    font-size: 0.9rem;
    opacity: 0.85;
}

.footer-links a:hover {
    opacity: 1;
}

.footer-bottom {
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    font-size: 0.8rem;
    opacity: 0.8;
}

.payment-icons {
    display: flex;
    gap: 1rem;
    font-size: 1.5rem;
}

/* 7. WHATSAPP FLOAT */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background-color: #25D366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    color: #FFF;
}

/* Responsive */
@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 2rem;
    }

    .section-philosophy {
        flex-direction: column;
    }

    .philosophy-image {
        min-height: 300px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .site-header {
        padding: 1rem 2rem;
    }

    .nav-list {
        display: none;
    }

    /* Mobile Logo Sizing */
    .header-logo img {
        max-width: 160px !important;
    }

    /* Mobile Menu Placeholder - HERO FIX */
    .hero-content h2,
    .hero-title {
        /* Ensure target */
        font-family: var(--font-heading) !important;
        font-size: 2rem !important;
        /* 32px approx */
        line-height: 1.2 !important;
        letter-spacing: 0.1em !important;
    }

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

/* 4. MOBILE DRAWER - LUXURY OVERHAUL */
.mobile-drawer {
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    /* Standard width */
    height: 100vh;
    background-color: var(--color-background);
    /* Cream #FAF6F0 */
    color: var(--color-wood);
    z-index: 2000;
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    padding: 0;
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
}

.mobile-drawer.active {
    left: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    /* Gold accent border */
}

.drawer-title {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    color: var(--color-gold);
    letter-spacing: 0.1em;
    font-weight: 400;
}

.drawer-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-gold);
    cursor: pointer;
    line-height: 1;
}

.mobile-nav {
    flex: 1;
    overflow-y: auto;
    padding: 20px 20px;
    /* Add top padding */
}

.mobile-nav-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Spacing between links */
}

.mobile-nav-link {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    color: #1A120B;
    /* Dark Wood */
    letter-spacing: 0.15em;
    transition: color 0.3s ease;
    display: block;
    padding: 5px 0;
}

.mobile-nav-link:hover,
.mobile-nav-link:active {
    color: var(--color-gold);
}

/* UTILITY SECTION (Search, Social, Account) */
.mobile-drawer-footer {
    padding: 20px;
    border-top: 1px solid rgba(197, 160, 89, 0.1);
    background-color: rgba(255, 255, 255, 0.5);
    /* Slight lightening */
}

.drawer-search-form {
    display: flex;
    margin-bottom: 20px;
}

.drawer-search-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #E8E3D5;
    background-color: #FFFFFF;
    color: #1A120B;
    font-family: 'Lato', sans-serif;
}

.drawer-search-btn {
    background-color: var(--color-gold);
    border: none;
    color: #fff;
    width: 40px;
    cursor: pointer;
}

.mobile-utility-links {
    margin-bottom: 15px;
    display: flex;
    gap: 15px;
    font-family: 'Lato', sans-serif;
    font-size: 0.9rem;
    color: #666;
}

.drawer-social-icons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.drawer-social-icons a {
    color: var(--color-gold);
    font-size: 1.2rem;
}

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1999;
    display: none;
    backdrop-filter: blur(2px);
}

.drawer-overlay.active {
    display: block;
}

/* 5. POLICY PAGE TYPOGRAPHY FIX (Mobile) */
@media screen and (max-width: 750px) {

    .shopify-policy__container,
    .policy-content {
        padding: 0 20px !important;
        max-width: 100% !important;
    }

    .shopify-policy__title h1,
    .policy-content h1 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
        /* Keep main title centered */
    }

    .shopify-policy__body h2,
    .policy-content h2 {
        font-size: 1.2rem !important;
        margin-top: 1.5rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3 !important;
        text-align: left !important;
        /* Headlines left aligned */
    }

    .shopify-policy__body,
    .policy-content,
    .shopify-policy__body p,
    .policy-content p {
        text-align: left !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #1A120B !important;
    }

    .shopify-policy__body ul,
    .policy-content ul {
        text-align: left !important;
        padding-left: 20px !important;
    }
}

/* 6. POLICY PAGE DOUBLE TITLE FIX */
/* Hide the first H1 or H2 inside the policy text, as the Page Title already exists */
.policy-content h1:first-child,
.policy-content h2:first-child,
.shopify-policy__body h1:first-child,
.shopify-policy__body h2:first-child {
    display: none !important;
}

/* 7. SLIM MOBILE HEADER STRIP */
@media screen and (max-width: 750px) {

    .header,
    .header-wrapper {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        margin-bottom: 0 !important;
    }

    .header__heading,
    .header__heading-logo {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .header__heading-logo {
        max-height: 40px !important;
        /* Ensure logo fits slim strip */
        object-fit: contain;
    }

    .header__icons {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* 8. GLOBAL SLIM HEADER (Desktop & Mobile) */
.header,
.header-wrapper {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.header__heading,
.header__heading-logo {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: flex;
    align-items: center;
}

/* Ensure logo doesn't overflow */
.header__heading-logo {
    max-height: 50px !important;
    /* Cap height globally */
    object-fit: contain;
}

/* Vertical Alignment */
.header,
.header__content {
    align-items: center !important;
}

/* 9. MOBILE HERO GRADIENT FIX */
@media screen and (max-width: 750px) {

    .banner__media::after,
    .image-banner__media::after,
    .media::after,
    .hero-video-overlay {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        bottom: 0 !important;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.6) 100%) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }
}

/* 10. LUXURY MOBILE MENU DRAWER */
#mobile-menu-drawer {
    background-color: #FAF9F6 !important;
    /* Luxury Cream */
    color: #4A3B32;
    /* Dark Wood for general text */
}

/* Header / Close Button */
.drawer-header {
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    padding: 5px;
}

.drawer-close {
    color: #C5A059 !important;
    /* Gold */
    font-size: 1.5rem;
}

/* Main Menu Links */
.mobile-nav-link {
    font-family: 'Lato', sans-serif !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    font-size: 1rem !important;
    color: #C5A059 !important;
    /* Brand Gold */
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    /* Faint Gold Line */
    text-align: left;
}

/* Utility Links (Search, Login, etc - if added to drawer) */
.mobile-utility-link {
    color: #4A3B32 !important;
    /* Dark Coffee */
    font-family: 'Lato', sans-serif;
    font-size: 0.9rem;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-utility-link i {
    color: #4A3B32 !important;
}

/* 11. LUXURY MOBILE PRODUCT GRID & PAGE */

/* Badges (Global) */
.badge-overlay {
    position: absolute;
    background: #FFFFFF;
    color: #1A120B;
    border: 1px solid #1A120B;
    font-family: 'Lato', sans-serif;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 8px;
    z-index: 10;
}

.badge-top-left {
    top: 10px;
    left: 10px;
}

.badge-top-right {
    top: 10px;
    right: 10px;
}

/* Mobile Grid Refactor */
@media screen and (max-width: 750px) {

    /* Tight 2-Column Grid */
    .product-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 0 4px;
        /* Slight edge padding */
    }

    .product-card {
        background-color: transparent !important;
        /* Remove grey box */
        border: none !important;
    }

    .product-card .image-wrapper {
        width: 100%;
        aspect-ratio: 0.85;
        /* Taller portrait */
        position: relative;
        overflow: hidden;
    }

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

    /* Brand the Collection Title */
    .section-title {
        font-family: 'Cinzel', serif !important;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        font-weight: 400;
        color: #1A120B;
        font-size: 1.8rem;
    }

    /* Disable Hover Scale on Touch */
    .product-card:hover .image-wrapper img {
        transform: none !important;
    }
}

/* Product Page Mobile Slider */
@media screen and (max-width: 900px) {
    .product-gallery.mobile-slider {
        position: relative;
        margin: 0 -1rem;
        /* Full bleed on mobile */
    }

    .slider-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Hide scrollbar */
    }

    .slider-track::-webkit-scrollbar {
        display: none;
    }

    .slider-slide {
        flex: 0 0 100%;
        scroll-snap-align: center;
        width: 100%;
    }

    .slider-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 15px;
    }

    .slider-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #E8E3D5;
        /* Inactive Grey/Beige */
        transition: background-color 0.3s;
    }

    .slider-dot.active {
        background-color: #C5A059;
        /* Active Gold */
    }

    /* Centered Info & Typography */
    .product-info-inner {
        text-align: center;
        border: none !important;
        /* Remove box border on mobile */
        padding-top: 0;
        /* Changed from 50 to 0 */
    }

    .product-title {
        font-family: 'Cinzel', serif !important;
        font-size: 1.8rem;
        margin-bottom: 5px;
    }

    .product-price-container {
        justify-content: center;
        font-family: 'Lato', sans-serif;
        color: #C5A059;
    }

    /* Ghost Button */
    .btn.btn-gold-solid {
        background-color: transparent !important;
        border: 1px solid #1A120B !important;
        color: #1A120B !important;
        border-radius: 30px;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        font-family: 'Cinzel', serif;
    }
}

/* 12. STRICT MOBILE REFACTOR (FIXED) */

/* PART 1: FIX MOBILE GRID */
@media screen and (max-width: 750px) {

    /* Force 2-column grid */
    .product-grid,
    .grid--2-col-tablet-down {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 6px !important;
        row-gap: 20px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Remove Grey Box / Shadows */
    .card-wrapper,
    .card__inner,
    .card__content,
    .product-card {
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Maximize Images */
    .media {
        padding-bottom: 0 !important;
        aspect-ratio: 0.8 !important;
        /* Taller Portrait */
        width: 100% !important;
        position: relative !important;
    }

    .product-card .image-wrapper {
        aspect-ratio: 0.8 !important;
    }

    .product-card img,
    .media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* PART 2: DISABLE HOVER GLITCH */
    .card:hover .media,
    .card:hover .card__inner,
    .product-card:hover .image-wrapper img {
        transform: none !important;
        z-index: 1 !important;
    }

    .card-wrapper:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .product-card .product-info {
        padding-top: 10px !important;
        text-align: center !important;
    }
}

/* PART 3: BRAND TITLE */
.collection-hero__title,
.title,
.section-title {
    font-family: 'Cinzel', serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    font-weight: 400 !important;
    font-size: 1.8rem !important;
    color: #1A120B !important;
}

/* PART 4: BADGE POSITIONING (using Liquid classes) */
.badge-overlay {
    border-radius: 0px !important;
    background: #FFFFFF !important;
    border: 1px solid #1A120B !important;
    color: #1A120B !important;
    font-size: 9px !important;
    letter-spacing: 1px !important;
    padding: 3px 6px !important;
    position: absolute !important;
    z-index: 20 !important;
    line-height: 1 !important;
}

/* Specific Positioning */
.badge-top-left,
.card__badge--left {
    top: 6px !important;
    left: 6px !important;
    right: auto !important;
}

.badge-top-right,
.card__badge--right {
    top: 6px !important;
    right: 6px !important;
    left: auto !important;
}

/* PART 5: PDP GHOST BUTTON */
.product-form__submit,
.btn-gold-solid {
    background-color: transparent !important;
    border: 1px solid #4A3B32 !important;
    /* Dark Wood */
    color: #4A3B32 !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    height: 50px !important;
    font-family: 'Cinzel', serif !important;
    transition: all 0.3s ease !important;
}

/* 16. DESKTOP GALLERY LAYOUTS */
@media screen and (min-width: 901px) {

    /* Stacked (Default) - Vertical Scroll */
    .layout--stacked .product-gallery .slider-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .layout--stacked .slider-track {
        display: block !important;
    }

    .layout--stacked .slider-slide {
        width: 100% !important;
        margin-bottom: 20px;
    }

    .layout--stacked .slider-arrow,
    .layout--stacked .gallery-thumbnails {
        display: none !important;
        /* No slider controls in stacked mode */
    }

    /* 2 Columns - Grid */
    .layout--columns .product-gallery .slider-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .layout--columns .slider-track {
        display: contents !important;
        /* Unwrap track */
    }

    .layout--columns .slider-slide {
        width: 100% !important;
    }

    .layout--columns .slider-arrow,
    .layout--columns .gallery-thumbnails {
        display: none !important;
    }

    /* Slider (Thumbnail) */
    .layout--slider .product-gallery .slider-container {
        display: block;
        overflow: hidden;
        /* Needed for slide masking */
    }

    .layout--slider .slider-track {
        display: flex !important;
        /* Force row */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        /* Hide scrollbar */
    }

    .layout--slider .slider-slide {
        min-width: 100%;
        scroll-snap-align: start;
    }

    .layout--slider .gallery-thumbnails {
        display: flex !important;
        justify-content: center;
        /* Center thumbnails */
    }

    .layout--slider .slider-arrow {
        display: flex !important;
        /* Show arrows */
    }
}

.product-form__submit:hover,
.btn-gold-solid:hover {
    background-color: #4A3B32 !important;
    color: #FFFFFF !important;
}

/* 13. PRODUCT PAGE LAYOUT FIXES (MOBILE) */
@media screen and (max-width: 900px) {

    /* 1. Fix Slider Height / Gap */
    .product-gallery.mobile-slider {
        margin-bottom: 10px !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .slider-track {
        align-items: flex-start !important;
        /* Prevent vertical stretching */
        height: auto !important;
    }

    .slider-slide {
        height: auto !important;
        display: block !important;
    }

    /* 2. Fix Image Display */
    .product-image-full {
        width: 100% !important;
        height: auto !important;
        /* Respect natural aspect ratio */
        aspect-ratio: 0.8 !important;
        /* Force luxury portrait shape */
        object-fit: cover !important;
        /* Fill the shape */
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        border-radius: 0 !important;
        /* Sharp corners like grid */
    }

    /* 3. Pull Content Up */
    .slider-dots {
        margin-top: 10px !important;
        margin-bottom: 20px !important;
        position: relative !important;
        z-index: 5 !important;
    }

    .product-info-inner {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .product-page-container {
        padding-top: 10px !important;
        /* Reduced top padding */
    }
}

/* 14. VISUAL REFACTOR (GALLERY & TYPOGRAPHY) */

/* Gallery Navigation */
.slider-container {
    position: relative;
    width: 100%;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #E8E3D5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4A3B32;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.slider-prev {
    left: 10px;
}

.slider-next {
    right: 10px;
}

.slider-arrow:hover {
    background: #C5A059;
    color: #FFFFFF;
    border-color: #C5A059;
}

/* Mobile: Hide arrows if preferred, or keep small */
@media screen and (max-width: 768px) {
    /* .slider-arrow { display: none; }  Optional: Hide on touch */
}

/* Thumbnails */
.gallery-thumbnails {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.thumbnail-item {
    width: 60px;
    height: 60px;
    border: 1px solid transparent;
    padding: 2px;
    cursor: pointer;
    background: none;
    opacity: 0.6;
    transition: all 0.3s;
}

.thumbnail-item.active {
    border-color: #C5A059;
    opacity: 1;
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Typography Refactor (Desktop & Mobile) */
.product-header {
    text-align: left;
    /* Align left on desktop, center on mobile via media query */
    margin-bottom: 1.5rem;
}

.product-title {
    font-family: 'Cinzel', serif !important;
    font-size: 2.5rem !important;
    color: #4A3B32 !important;
    /* Dark Wood */
    letter-spacing: 0.1em !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
}

.product-subtitle {
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #C5A059;
    /* Brand Gold */
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
}

.product-volume {
    font-family: 'Lato', sans-serif;
    font-size: 0.9rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.product-price-container {
    font-family: 'Lato', sans-serif !important;
    font-size: 1.6rem !important;
    color: #4A3B32 !important;
    /* Dark Coffee for Price */
    font-weight: 700 !important;
    text-align: left;
    /* Align left on desktop */
}

/* Mobile Overlay for Center Align */
@media screen and (max-width: 900px) {

    .product-header,
    .product-price-container {
        text-align: center !important;
        justify-content: center !important;
    }

    .product-title {
        font-size: 2rem !important;
    }
}

/* 15. RECOMMENDATIONS SECTION (REF MATCH) */
.recommendations-title {
    font-family: 'Lato', sans-serif;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #1A120B;
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.recommendations-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #1A120B;
}

/* Vertical Badge */
.badge-vertical-left {
    position: absolute;
    top: 10px;
    left: 0;
    background: #C5A059;
    /* Gold */
    color: #FFF;
    font-size: 10px;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 10px 4px;
    letter-spacing: 0.1em;
    z-index: 20;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

/* 17. PRODUCT PAGE ACCORDIONS & BUTTONS */
.product-accordion {
    border-bottom: 1px solid #E8E3D5;
}

.product-accordion summary {
    padding: 1rem 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    color: #4A3B32;
}

.product-accordion summary::-webkit-details-marker {
    display: none;
}

.product-accordion summary::after {
    content: '+';
    font-size: 1.2rem;
    font-weight: 300;
}

.product-accordion[open] summary::after {
    content: '-';
}

.accordion-content {
    padding-bottom: 1.5rem;
    font-family: 'Lato', sans-serif;
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Buy Buttons Stack */
.buy-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.shopify-payment-button__button {
    border-radius: 50px !important;
    overflow: hidden !important;
}

.shopify-payment-button__button--unbranded {
    background-color: #1A120B !important;
    color: #FFF !important;
    border-radius: 50px !important;
    font-family: 'Cinzel', serif !important;
    letter-spacing: 0.1em !important;
    transition: all 0.3s !important;
}

/* 18. PRODUCT PAGE MAIN LAYOUT (Migrated) */
.product-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
}

.product-grid-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
    align-items: start;
}

.product-info-wrapper.sticky-content {
    position: sticky;
    top: 120px;
    /* Adjusted for sticky header */
    z-index: 5;
}

.product-info-inner {
    padding: 2rem;
    background: #FFFFFF;
    border: 1px solid #E8E3D5;
    border-radius: 0px;
    /* Luxury sharp corners */
}

/* Quantity Selector */
.quantity-input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #E8E3D5;
    width: fit-content;
    margin-bottom: 1.5rem;
}

.qty-input {
    width: 60px;
    text-align: center;
    border: none;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    height: 45px;
    -moz-appearance: textfield;
}

.qty-btn {
    background: none;
    border: none;
    width: 40px;
    height: 45px;
    font-size: 1.2rem;
    cursor: pointer;
    color: #4A3B32;
    transition: color 0.3s;
}

.qty-btn:hover {
    color: #C5A059;
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .product-grid-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .product-page-container {
        padding: 1rem;
    }

    /* 19. CRITICAL MOBILE FIXES (REVISED 2) */

    @media screen and (max-width: 750px) {
        .product-grid-layout {
            display: flex !important;
            flex-direction: column !important;
            gap: 0 !important;
        }

        /* 1. Main Image Fix */
        .product-gallery.mobile-slider {
            width: 100% !important;
            display: block !important;
            /* Remove flex which might collapse it */
            margin-bottom: 20px !important;
            position: relative !important;
            min-height: 300px !important;
            /* Force space for image */
        }

        .product-image-full {
            width: 100% !important;
            height: auto !important;
            aspect-ratio: 1 / 1 !important;
            /* Square for safety */
            object-fit: contain !important;
            display: block !important;
            margin: 0 auto !important;
        }

        .slider-container {
            display: flex !important;
            overflow-x: auto !important;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
        }

        .slider-track {
            display: flex !important;
            width: 100% !important;
        }

        .slider-slide {
            min-width: 100% !important;
            scroll-snap-align: center;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
        }

        /* 2. Thumbnails Fix */
        .gallery-thumbnails {
            display: flex !important;
            justify-content: center !important;
            gap: 8px !important;
            margin-top: 10px !important;
            flex-wrap: wrap !important;
        }

        .thumbnail-item {
            width: 40px !important;
            height: 40px !important;
        }

        /* 3. Center Quantity & Content */
        .product-info-wrapper {
            padding: 0 1.5rem 2rem !important;
            text-align: center !important;
        }

        .product-quantity {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            width: 100% !important;
            margin-bottom: 1.5rem !important;
        }

        .quantity-input-wrapper {
            margin: 0 auto !important;
            /* Center the box */
        }

        .product-title,
        .product-price-container,
        .product-subtitle {
            text-align: center !important;
            justify-content: center !important;
        }

        .buy-buttons-container {
            width: 100% !important;
        }
    }
}

/* 2. TYPOGRAPHY & INFO UPGRADE */
.product-title {
    font-family: 'Cinzel', serif !important;
    font-size: 2.2rem !important;
    text-align: center !important;
    margin-bottom: 0.5rem !important;
    color: #1A120B !important;
    /* Ensure visibility */
    display: block !important;
}

.product-price-container {
    font-family: 'Lato', sans-serif !important;
    color: #C5A059 !important;
    font-size: 1.2rem !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    width: 100%;
    margin-bottom: 1.5rem !important;
}

.product-accordion summary {
    font-family: 'Cinzel', serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #1A120B !important;
}


}

/* 3. BUTTON STYLE (MATCH HOMEPAGE - SOLID GOLD - GLOBAL) */
.product-form__submit,
.shopify-payment-button__button--unbranded {
    background-color: #C5A059 !important;
    /* Solid Gold */
    border: 1px solid #C5A059 !important;
    color: #FFFFFF !important;
    /* White Text */
    border-radius: 50px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    font-family: 'Lato', sans-serif !important;
    font-weight: 700 !important;
    height: 50px !important;
    opacity: 1 !important;
    /* Ensure visible */
    visibility: visible !important;
}

.product-form__submit:hover,
.shopify-payment-button__button--unbranded:hover {
    background-color: #4A3B32 !important;
    /* Dark Wood Hover */
    border-color: #4A3B32 !important;
    color: #FFFFFF !important;
}

/* 4. CLEAN UP SECTIONS (GLOBAL) */
.accordion-item {
    display: none !important;

    /* Hide Olfactory & Shipping */
}

/* 20. HEADER ALIGNMENT FIX (MOBILE) */
@media screen and (max-width: 900px) {
    .site-header {
        padding: 5px 1rem !important;
        /* Fix padding constraints */
    }

    .header-top {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        /* Balanced Grid */
        align-items: center !important;
    }

    .header-currency {
        display: none !important;
        /* Hide to prevent grid offset */
    }

    .header-mobile-toggle {
        display: flex !important;
        justify-self: start !important;
    }

    .header-logo {
        justify-self: center !important;
        text-align: center !important;
        margin: 0 !important;
    }

    .header-icons {
        justify-self: end !important;
        display: flex !important;
        gap: 5px !important;
    }
}

/* 21. ROYAL AUDIT ENHANCEMENTS (GLOBAL) */

/* 21.1 Global Royal Forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
select,
textarea {
    border: 1px solid #E8E3D5 !important;
    background-color: #FFFFFF !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.05em !important;
    color: #4A3B32 !important;
    padding: 12px 15px !important;
    border-radius: 0 !important;
    /* Luxury Sharp */
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #C5A059 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(197, 160, 89, 0.2) !important;
}

/* Placeholder Color */
::placeholder {
    color: #999 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.1em !important;
}

/* 21.2 Cart Drawer Luxury Upsell */
.btn-add-mini {
    background-color: transparent !important;
    border: 1px solid #C5A059 !important;
    color: #C5A059 !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
    border-radius: 0 !important;
    /* Sharp */
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.btn-add-mini:hover {
    background-color: #C5A059 !important;
    color: #FFFFFF !important;
}

/* Shipping Progress Bar - Gold */
.shipping-progress-fill {
    background: linear-gradient(90deg, #C5A059, #E5C079) !important;
}

/* 21.3 Footer Polish (Desktop) */
@media screen and (min-width: 901px) {
    .site-footer {
        padding-top: 5rem !important;
        padding-bottom: 4rem !important;
    }

    .footer-links a:hover,
    .footer-brand p a:hover {
        color: #C5A059 !important;
        opacity: 1 !important;
        transform: translateX(5px);
        /* Subtle slide */
        display: inline-block;
    }
}

/* 21.4 Cinematic Animations */
@keyframes royalFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Apply animation to key entrance elements */
.hero-content,
.section-title,
.product-card,
.footer-grid {
    animation: royalFadeIn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Stagger Animations (Simple method) */
.product-card:nth-child(1) {
    animation-delay: 0.1s;
}

.product-card:nth-child(2) {
    animation-delay: 0.2s;
}

.product-card:nth-child(3) {
    animation-delay: 0.3s;
}

.product-card:nth-child(4) {
    animation-delay: 0.4s;
}

/* Refined Collection Filter Sort (if present) */
.facet-filters__sort {
    border: none !important;
    background: transparent !important;
    font-family: 'Lato', sans-serif !important;
    font-weight: 700 !important;
    color: #4A3B32 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}

/* 22. DESKTOP PRODUCT GRID FIX (RE-APPLIED) */
@media screen and (min-width: 901px) {
    .product-grid-layout {
        display: grid !important;
        grid-template-columns: 1.2fr 1fr !important;
        /* Slightly larger image relative to info */
        gap: 2.5rem !important;
        /* Tighter gap */
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 2rem 2rem !important;
        /* Reduced vertical padding */
        align-items: start !important;
    }

    .product-gallery {
        width: 100% !important;
        position: sticky !important;
        top: 110px !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* Enforce Single-Image Slider Layout */
    .slider-container {
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        overflow: hidden !important;
        /* Mask other images */
        display: block !important;
        position: relative !important;
    }

    .slider-track {
        display: flex !important;
        /* Horizontal Row */
        width: 100% !important;
        transition: transform 0.3s ease;
        /* Smooth slide */
    }

    .slider-slide {
        width: 100% !important;
        flex-shrink: 0 !important;
        /* Don't shrink */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Constrain Image Height for "Above Fold" feel */
    .product-image-full {
        width: 100% !important;
        height: auto !important;
        max-height: 550px !important;
        /* Prevent huge images */
        aspect-ratio: auto !important;
        object-fit: contain !important;
        position: relative !important;
        margin-bottom: 10px !important;
        /* Reduced margin */
        display: block !important;
    }

    /* Ensure text is standard on desktop (Left Aligned for Readability) */
    .product-header,
    .product-price-container,
    .product-description,
    .product-form {
        text-align: left !important;
        max-width: 450px !important;
    }

    /* Sticky Info Column */
    .product-info-wrapper {
        position: sticky !important;
        top: 130px !important;
        height: auto !important;
        align-self: start !important;
        padding-top: 0 !important;
    }


    .product-price-container {
        justify-content: flex-start !important;
        margin-bottom: 2rem !important;
    }

    /* Ensure Thumbnails are Left Aligned & Square */
    .gallery-thumbnails {
        display: flex !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        margin-top: 20px !important;
        flex-wrap: wrap !important;
    }

    .thumbnail-item {
        width: 70px !important;
        height: 70px !important;
        border: 1px solid #E8E3D5 !important;
        opacity: 0.7 !important;
        transition: all 0.2s ease !important;
    }

    .thumbnail-item.active,
    .thumbnail-item:hover {
        border-color: #C5A059 !important;
        opacity: 1 !important;
        transform: translateY(-2px);
    }

    /* Arrows - Clean & Visible */
    .slider-arrow {
        display: flex !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border: 1px solid #E8E3D5 !important;
        color: #4A3B32 !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        transition: all 0.3s ease !important;
    }

    .slider-arrow:hover {
        background: #C5A059 !important;
        color: white !important;
        border-color: #C5A059 !important;
    }
}

/* 23. PRODUCT BADGES PROPER POSITIONING (ROYAL) */
.badge-overlay {
    position: absolute;
    z-index: 10;
    padding: 6px 14px;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    /* Soft luxury shadow */
    transition: all 0.3s ease;
}

.badge-top-left {
    top: 12px;
    left: 12px;
}

.badge-top-right {
    top: 12px;
    right: 12px;
}

/* VARIANT STYLES */
.badge-signature {
    background-color: #FFFFFF;
    border: 1px solid #C5A059;
    color: #C5A059;
    /* Gold Text */
}

.badge-sold-out {
    background-color: #1A120B;
    /* Dark Wood */
    border: 1px solid #1A120B;
    color: #FFFFFF;
}

.badge-sale {
    background-color: #C5A059;
    /* Solid Gold */
    border: 1px solid #C5A059;
    color: #FFFFFF;
    animation: pulseGold 2s infinite;
    /* Subtle attention grabber */
}

.badge-unisex-overlay {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #1A120B;
    color: #1A120B;
}

@keyframes pulseGold {
    0% {
        box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(197, 160, 89, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(197, 160, 89, 0);
    }
}

/* Reduce footer padding and spacing on mobile */
@media screen and (max-width: 749px) {
  .footer {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .footer__content-top,
  .footer__content-bottom {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .footer-block {
    margin-bottom: 1.5rem !important;
  }
  
  .footer-block:last-child {
    margin-bottom: 0 !important;
  }
}
/* Reduce header padding - Mobile and Desktop */
.header-wrapper {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

/* Additional header spacing reduction */
.header {
  padding-top: 0;
  padding-bottom: 0;
}

/* Reduce spacing inside header sections */
.header__inline-menu,
.header__icons,
.header__heading {
  margin-top: 0;
  margin-bottom: 0;
}

/* Mobile-specific adjustments */
@media screen and (max-width: 749px) {
  .header-wrapper {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
  }
}

/* Desktop-specific adjustments */
@media screen and (min-width: 750px) {
  .header-wrapper {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
  }
}