/* ==================================================
   JEWEL FLAIRS - OPTIMIZED STYLESHEET
   ================================================== */

/* --- LUXURY HEADER TRANSFORMATION --- */

.site-header {
    position: absolute; /* Overlays the header on top of the hero banner */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background 0.4s ease, padding 0.4s ease;
}

/* Transparent Header - Homepage Only */
.site-header.transparent-header {
    background: transparent !important;
}

/* Solid Header - All Other Pages */
.site-header.solid-header {
    position: relative;
    background: #000 !important;
}

.site-header.solid-header .main-navigation {
    background: #000 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-header.solid-header .main-nav-list li a {
    color: #ffffff !important;
}

.site-header.solid-header .main-nav-list li a::after {
    background: #fff;
}

.site-header.solid-header .header-icons,
.site-header.solid-header .header-icons svg,
.site-header.solid-header .icon-search-btn {
    color: #fff !important;
    stroke: #fff;
}

.site-header.solid-header .site-logo .custom-logo-link img,
.site-header.solid-header .site-logo .text-logo {
    filter: brightness(0) invert(1);
    color: #fff !important;
}

/* 1. Top Bar Refinement */
.top-bar {
    background: #000;
    color: #fff;
    padding: 8px 0;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.top-bar a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #fff;
}

/* 2. Main Navigation Wrapper */
.main-navigation {
    background: transparent !important; /* Makes it see-through */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 25px 0;
    transition: all 0.3s ease;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
}

.nav-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Logo | Menu | Icons */
    width: 100%;
    align-items: center;
}

/* 3. Logo Styling */
.site-logo .custom-logo-link img, 
.site-logo .text-logo {
    filter: brightness(0) invert(1); /* Forces black logo to be white */
    max-height: 35px;
    width: auto;
    transition: 0.3s;
}

.text-logo {
    font-family: 'Serif', Georgia, serif;
    font-size: 24px;
    letter-spacing: 4px;
    color: #fff !important;
    text-decoration: none;
}

/* 4. Desktop Menu Refinement */
.main-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 35px;
}

.main-nav-list li a {
    color: #ffffff !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    padding: 10px 0;
}

/* Elegant Underline Hover Effect */
.main-nav-list li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #fff;
    transition: 0.3s;
}

.main-nav-list li a:hover::after {
    width: 100%;
}

/* 5. Header Icons */
.header-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 25px;
    color: #fff;
}

.header-icons svg, 
.header-icons .icon-link {
    color: #fff !important;
    stroke: #fff;
    cursor: pointer;
    transition: 0.3s;
    text-decoration: none;
}

.icon-search-btn {
    background: none;
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 1.5px;
    font-size: 11px;
}

.icon-link:hover, .icon-btn:hover {
    opacity: 0.6;
}

/* Cart Trigger Button */
.cart-trigger {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Cart Count Badge */
.jf-cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.site-header.solid-header .jf-cart-count,
.site-header.transparent-header .jf-cart-count {
    background: #e74c3c;
    color: #fff;
}

/* 6. Sticky State (Triggered via JS) */
.site-header.is-sticky {
    position: fixed;
    background: #fff !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}

.site-header.is-sticky .main-navigation {
    padding: 15px 0;
    background: #fff !important;
    border-bottom: 1px solid #eee;
}

.site-header.is-sticky .main-nav-list li a,
.site-header.is-sticky .header-icons,
.site-header.is-sticky .header-icons svg,
.site-header.is-sticky .icon-search-btn {
    color: #000 !important;
    stroke: #000;
}

.site-header.is-sticky .site-logo img,
.site-header.is-sticky .logo img {
    filter: none; /* Logo returns to original black */
}

.site-header.is-sticky .main-nav-list li a::after {
    background: #000;
}

/* Mobile Adjustments */
@media (max-width: 1024px) {
    .nav-grid {
        grid-template-columns: 1fr 1fr;
    }
    .nav-zone-center { display: none; } /* Hide main menu, use drawer instead */
    .site-header.transparent-header { position: absolute !important; background: transparent !important; }
    .site-header.solid-header { position: relative !important; background: #000 !important; }
    
    /* Center the logo and icons better on mobile */
    .header-container {
        padding: 0 20px;
        height: 70px;
    }
    
    .nav-zone-left {
        display: flex;
        align-items: center;
        gap: 15px;
    }
    
    #mobile-menu-trigger {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 5px;
        z-index: 1001;
    }
    
    #mobile-menu-trigger span {
        display: block;
        width: 25px;
        height: 2px;
        background: #fff;
        transition: 0.3s;
    }

    .site-logo .custom-logo-link img, 
    .site-logo .text-logo { 
        filter: brightness(0) invert(1) !important; 
        color: #fff !important; 
        max-height: 25px !important;
    }
    
    .nav-zone-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .header-icons { 
        gap: 15px;
        color: #fff !important; 
    }
    
    .header-icons svg, .header-icons a, .header-icons button { 
        color: #fff !important; 
        stroke: #fff !important;
        background: none;
        border: none;
        padding: 0;
        display: flex;
        align-items: center;
    }
    
    /* Hide specific desktop icons on mobile if they crowd the space */
    .icon-label, .account-mobile-hide { display: none !important; }
    
    .top-bar { display: none; }
}

/* --- Variables & Reset --- */
/*
==================================================
 CLEANED & DEDUPLICATED STYLESHEET
 Brand: Jewel Flairs
 Method: Safe exact-duplicate removal only
 Note: No selectors or values were changed
==================================================
*/

/*
Theme Name: Jewel Flairs Revamp
Theme URI: https://jewelflairs.com/
Author: Jewel Flairs
Author URI: https://jewelflairs.com/
Description: Custom WordPress theme for Jewel Flairs jewelry brand.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jewel-flairs-revamp
*/

/* 
Theme Name: Jewel Flairs Revamp
Company: Gitkoding
Version: 1.0
*/

/* 1. VARIABLES & RESET
-------------------------------------------------------------- */
:root {
   --primary-color: #000000;
   --accent-color: #8e7955;
   --text-light: #ffffff;
   --text-dark: #1a1a1a;
   --section-spacing: 80px;
   --container-width: 1400px;
   }





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





body {
font-family: 'Helvetica Neue', Arial, sans-serif;
color: var(--text-dark);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}





.container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 40px;
}






/* 3. HERO SECTION
-------------------------------------------------------------- */
.hero-section {
    width: 100% !important;
    height: 85vh; /* Sets height to 85% of screen height */
    min-height: 500px;
    position: relative;
    overflow: hidden;
    display: block;
}

.heroSwiper {
    width: 100% !important;
    height: 100% !important;
}

/* Force each slide to fill the area and cover with the image */
.hero-section .swiper-slide {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.hero-overlay {
    background: rgba(0, 0, 0, 0.25); /* Darken image slightly for text contrast */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

/* Typography & Content */
.hero-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero-content h1 {
    font-size: clamp(2.5rem, 8vw, 4.5rem); /* Dynamically sizes font for mobile/desktop */
    margin: 15px 0;
    line-height: 1.1;
    font-family: 'Serif', Georgia, serif;
    font-weight: 400;
}

.sub-title {
    display: block;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.85rem;
    margin-bottom: 10px;
    opacity: 0.9;
}

.hero-content p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Buttons */
.btn-primary {
    display: inline-block;
    padding: 15px 35px;
    background: #fff;
    color: #000;
    text-decoration: none;
    margin-top: 25px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: #000;
    color: #fff;
}

/* Swiper Controls Customization */
.swiper-button-next, .swiper-button-prev {
    color: #fff !important;
    width: 50px;
    height: 50px;
    opacity: 0.6;
    transition: 0.3s;
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 24px !important; /* Smaller arrows */
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    opacity: 1;
}

.swiper-pagination-bullet {
    background: rgba(255,255,255,0.4) !important;
    width: 10px;
    height: 10px;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #fff !important;
    width: 25px; /* Makes active bullet a pill shape */
    border-radius: 5px;
}





/* ======================================================
   REFINED NEW COLLECTION POLISH
   ====================================================== */

.new-collection {
    background: #ffffff; /* Clean white background for luxury feel */
    padding: 100px 0;
}





.collection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px; /* More breathing room */
}





.collection-card {
    background: #fbfbfb; /* Ultra-subtle grey */
    border-radius: 4px; /* Sharper corners feel more premium than round ones */
    display: flex;
    align-items: center;
    padding: 0; /* Let images go to the edge if needed */
    height: 380px;
    overflow: hidden;
    transition: all 0.4s ease;
    border: 1px solid #f0f0f0;
}





/* Text Container */
.card-content { 
    flex: 1.2; 
    padding: 40px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}





.card-content h3 { 
    font-family: 'Times New Roman', serif; /* Brand consistency */
    font-size: 26px; 
    margin-bottom: 12px; 
    letter-spacing: 1px;
}





/* Image Container */
.card-image { 
    flex: 1; 
    height: 100%;
    background: #eee; /* Placeholder color */
}





.card-image img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; /* This makes the image fill the area without distortion */
    transition: transform 0.8s ease;
}





/* Styling the WooCommerce Price Engine */
.card-content .price { 
    font-size: 18px; 
    font-weight: 600; 
    color: #000; 
    margin-bottom: 25px;
    display: block;
}





/* Sale Price Styling */
.card-content .price del { 
    color: #bbb; 
    font-size: 14px; 
    font-weight: 400; 
    margin-right: 10px; 
    text-decoration: line-through;
}





.card-content .price ins { 
    text-decoration: none; 
    color: #d4af37; /* Gold touch for luxury prices */
}





/* The View Piece Link */
.btn-shop-sm {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    color: #000;
    text-decoration: none;
    border-bottom: 2px solid #000;
    padding-bottom: 4px;
    align-self: flex-start;
    transition: 0.3s;
}





/* Responsive Fix for Mobile */


/* 5. BRAND STATEMENT
-------------------------------------------------------------- */
.brand-statement {
    background: #f9f9f9;
    padding: 120px 0;
}




.container.narrow { max-width: 700px; margin: 0 auto; text-align: center; }





/* ======================================================
   THE "AUTHORITY" DARK FOOTER
   ====================================================== */

.site-footer.dark-theme {
    background: #000;
    color: #fff;
    padding: 80px 0 40px;
    font-family: 'Helvetica', Arial, sans-serif;
}

/* 1. Newsletter Side */
.footer-newsletter-section {
    flex: 1.5;
}

/* Social Circles */
.footer-social-circles {
    display: flex;
    gap: 15px;
    justify-content: left ; /* center icons horizontally */
    align-items: center;
}

/* Individual Social Circle */
.social-circle {
    width: 38px;
    height: 38px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ffffff;              /* icon color */
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Hover Effect */
.social-circle:hover {
    background-color: #ffffff;
    color: #000000;
    transform: translateY(-2px);
}

/* Optional: Smooth icon rendering */
.social-circle i {
    line-height: 1;
}



/* 2. Link Side */
.footer-nav-links {
    flex: 1;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}





/* 3. Bottom Bar */
.footer-bottom-meta {
    border-top: 1px solid #333;
    padding: 30px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    letter-spacing: 1px;
}

/* Bottom Info Bar */
.site-info-bar {
    background-color: #000;          /* footer background */
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px 20px;
}

/* Inner Container */
.site-bar {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;  /* left & right text */
    align-items: center;
    color: #ffffff;
    font-size: 14px;
}

/* Text Styling */
.site-bar p {
    margin: 0;
    line-height: 1.4;
    opacity: 0.85;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .site-bar {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
}


/* ======================================================
   Bottom Ticker Marquee 
   ====================================================== */

.slider-ticker-top { 
    padding-top: 1px;
    padding: 10px 0; 
    background: #F9F9F9;
    overflow: hidden;
}









/* ======================================================
   RING BUILDER SECTION - MOBILE-FIRST SANDWICH
   ====================================================== */

.ring-builder {
    background: #ffffff; /* Clean white for the mix-blend-mode to work */
    /*padding: 60px 0;*/
    text-align: center;
}



.builder-grid {
    display: flex;
    flex-direction: column; /* Mobile Default: Stacked */
    align-items: center;
    gap: 40px;
}



/* 1. The Visual (The Centerpiece) */
.builder-visual {
    width: 100%;
    max-width: 400px;
    order: 2; /* Forces GIF to stay in the middle on mobile */
}



.ring-main-visual {
    width: 100%;
    height: auto;
    mix-blend-mode: multiply; /* Blends GIF background with page */
    /* Luxury Fade Mask */
    mask-image: radial-gradient(circle, black 50%, transparent 95%);
    -webkit-mask-image: radial-gradient(circle, black 50%, transparent 95%);
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}



/* 2. The Text Columns */
.builder-column {
    width: 100%;
    padding: 0 20px;
}

 /* Column 1 on Top */
.builder-column:last-child { order: 3; }

  /* Column 2 at Bottom */

.builder-icon {
    margin-bottom: 15px;
    color: #1a1a1a;
    display: flex;
    justify-content: center;
}



.builder-column h2 {
    font-family: 'Times New Roman', serif; /* Or your brand font */
    font-size: clamp(28px, 8vw, 42px);
    letter-spacing: 1px;
    margin-bottom: 15px;
    text-transform: uppercase;
    line-height: 1.1;
}



/* 3. The Pill Buttons */
.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}



/* --- DESKTOP VIEW (Side-by-Side & Left Aligned) --- */

/* ======================================================
   DESIGNER SPOTLIGHT - FINAL CLEAN VERSION
   ====================================================== */

.designer-spotlight {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    overflow: hidden;
}



/* 1. The ACTUAL Layout Container */
.spotlight-inner {
    display: flex;
    /* CHANGE: column-reverse puts the 2nd child (image) at the TOP on mobile */
    flex-direction: column-reverse; 
    width: 100%;
    max-width: 100% !important;
    padding: 0 !important;
}



/* 2. The Text Side (Bottom on Mobile) */
.spotlight-content {
    width: 100%;
    padding: 60px 20px;
    background: #f9f9f9; /* Light grey background for text area */
    z-index: 5;
    text-align: center;
}



.arrow-icon {
    width: 40px;
    margin: 0 auto 20px;
    display: block;
    /* NOTE: If your icon is black and background is light, 
       you might want to remove 'invert(1)' so it stays black */
    filter: brightness(0); 
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.8s ease 0.2s;
}



/* 3. The Image Side (Top on Mobile) */
.spotlight-products {
    width: 100%;
    height: 500px; /* Strong visual presence on mobile */
    overflow: hidden;
}



.static-jewel {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2); /* Cinematic start */
    filter: grayscale(30%);
    transition: transform 3s cubic-bezier(0.165, 0.84, 0.44, 1), 
                filter 3s ease;
}



/* --- ANIMATION TRIGGERS --- */
.designer-spotlight.animate .static-jewel {
    transform: scale(1);
    filter: grayscale(0%);
}



/* --- DESKTOP VIEW FIX (Magazine Spread) --- */


/* ======================================================
   LIFESTYLE MOSAIC - FULL PRODUCTION CODE
   ====================================================== */

/* 1. Base Container & Layout */
.lifestyle-mosaic {
    background: #f9f9f9;
    overflow: hidden;
    padding: 0; /* Mobile: Flush to edges */
    position: relative;
}



.mosaic-flex {
    display: flex;
    flex-direction: column; /* Mobile: Stacked */
    align-items: center;
    position: relative;
    padding-bottom: 40px;
}



/* 2. The Scrolling Visuals (The "Sandwich Bread") */
.mosaic-visual-wrapper {
    width: 100%;
    display: flex;
    gap: 15px;
    height: 800px; /* Adjust based on how much scroll you want to see */
    overflow: hidden;
    /* Mobile Mask: Fades out the center so text is readable */
    mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 45%, transparent 55%, black 70%, black 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 45%, transparent 55%, black 70%, black 100%);
}



/* 3. The Text Content (The "Sandwich Filling") */
.mosaic-text {
    position: absolute; /* Place over the images on mobile */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
    z-index: 10;
    /* Optional: Slight background blur to make text pop */
    background: rgba(249, 249, 249, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 30px 20px;
    border-radius: 20px;
}
/* 4. Buttons */
.mosaic-btns {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
}
/* 5. Animation Logic (Crucial!) */
.col-up .scroll-track {
    animation: scrollUp 25s linear infinite;
}

/* ART OF LEGACY ANIMATED TEXT SECTION */

.heading-and-paragraph {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding-top: 50px;
}

.heading-and-paragraph h2 {
  font-size: 42px;   /* required size */
  margin-bottom: 16px;
}

.heading-and-paragraph p {
  max-width: 700px;
  margin: 0 auto;
}


/* ======================================================
   STICKY BANNER STACK - THE OVERLAY ENGINE
   ====================================================== */

.sticky-banner-stack {
    position: relative;
    background: #000;
}



.sticky-banner-item {
    position: -webkit-sticky;
    position: sticky;
    top: 0; /* Sticks to the top of the viewport */
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* This shadow creates the "Layered" depth on scroll */
    box-shadow: 0 -20px 50px rgba(0,0,0,0.5);
}



/* Smooth darken overlay */
.banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
}



/* Desktop Alignment */
.content-left { justify-content: flex-start; text-align: left; }


/* ======================================================
   DUAL FRAME LIFESTYLE SLIDER
   ====================================================== */
/* Base (Desktop First) */
.dual-frame-slider {
    padding-top: 65px;
    background: #fff;
    position: relative;
    overflow: hidden;
}
/* Frames Wrapper */
.slider-frames-wrapper {
    flex: 1;
    position: relative;
    height: 750px;
    display: flex;
    align-items: center;
}
/* Large Frame */
.frame-large {
    width: 80%;
    height: 100%;
    margin-left: auto;
    position: relative;
    overflow: hidden;
}
/* Small Frame */
.frame-small {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 400px;
    height: 550px;
    z-index: 10;
    background: #fff;
    border: 25px solid #fff;
    box-shadow: 15px 15px 40px rgba(0,0,0,0.05);
}
/* Navigation */
.slider-nav { 
    position: absolute; 
    bottom: -30px; 
    left: 25px; 
    display: flex; 
}
/* --- High-End Mobile Refinement for Lifestyle Slider --- */
@media (max-width: 768px) {

    /* 1. Stack the text at the top and center it */
    .slider-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .slider-text-content {
        margin-bottom: 30px;
    }

    .display-title {
        font-size: 38px !important;
        line-height: 1.1;
        margin: 10px 0;
    }

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

    /* 2. Re-engineer the Frame Wrapper */
    .slider-frames-wrapper {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: relative;
        width: 100%;
        margin-top: 40px;
    }

    /* 3. Small Frame: Make it a centered floating card */
    .frame-small {
        position: relative !important;
        width: 75% !important; /* Width of the floating card */
        height: 380px !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        z-index: 10 !important;
        background: #fff;
        border: 12px solid #fff !important; /* Thinner border for mobile */
        box-shadow: 0 15px 40px rgba(0,0,0,0.12);
        margin-bottom: -80px; /* CRITICAL: This creates the vertical overlap */
    }

    /* 4. Large Frame: Make it the full-width base */
    .frame-large {
        width: 100% !important;
        height: 450px !important;
        margin-left: 0 !important;
        z-index: 5 !important;
    }

    /* 5. Navigation: Fix the button placement */
    .slider-nav {
        position: absolute !important;
        /* Positioned precisely where the small frame overlaps the large frame */
        /*bottom: 5px; */
        gap: 0.5px;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 20 !important;
        display: flex;
    }

    .nav-btn {
        width: 55px;
        height: 55px;
        background: #000;
        color: #fff;
        border: 1px solid rgba(255,255,255,0.1);
        font-size: 24px;
    }

    /* 6. Cleanup UI elements */
    .vertical-label, 
    .progress-bar-container,
    .slide-info #slide-name {
        display: none !important; /* Hide extra noise on small screens */
    }

    .frame-footer {
        padding: 10px !important;
        text-align: right;
        background: transparent !important;
    }

    #slide-num {
        color: #fff;
        font-weight: bold;
        margin-right: 15px;
    }
}

/* Fix for very narrow phones (iPhone SE size) */
@media (max-width: 380px) {
    .frame-small { width: 85% !important; height: 320px !important; }
    .frame-large { height: 380px !important; }
    .slider-nav { bottom: 10px; }
}

/* Footer Overlay */

.frame-footer {
    position: absolute;
    bottom: 80px;
    left: -120px;
    width: 350px;
}

/* ======================================================
   Bottom Ticker Marquee (Optional)
   ====================================================== */

.slider-ticker { 
    padding: 10px 0; 
    background: #000000;
    overflow: hidden;
}

/* ======================================================
   TRUST FEATURES BAR - VERIFIED & OPTIMIZED
   ====================================================== */

.trust-features-bar {
    background: #fff;
    padding: clamp(60px, 8vw, 100px) 0;
    border-top: 1px solid #f0f0f0;
    overflow: hidden; /* FIX: Prevents horizontal scroll on the whole page */
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    text-align: center;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}

.feature-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    color: #000;
    transition: transform 0.3s ease;
    display: flex; /* ADDED: Ensures SVG centers inside the div */
    align-items: center;
    justify-content: center;
}

/* FIX: Ensure SVG scales to fit the icon container on Desktop */
.feature-icon svg {
    width: 100%;
    height: 100%;
}

.feature-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #1a1a1a;
}

.feature-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    max-width: 250px;
}

/* --- Mobile Slider: Optimized --- */
@media (max-width: 768px) {
    .features-grid {
        display: flex !important;
        flex-wrap: nowrap !important; /* CRITICAL: Prevents items from dropping to next line */
        overflow-x: hidden !important; /* Hide scrollbar for seamless look */
        gap: 0 !important;
        padding: 40px 0 !important;
        cursor: grab;
    }

    .feature-item {
        /* We use a fixed width for the items to make the math consistent */
        flex: 0 0 280px !important; 
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

    .feature-icon svg {
        width: 40px;
        height: 40px;
    }

/* END OF TRUST FEATURES BAR STYLES */

/* --- Search Overlay Styles --- */
.search-overlay {
    position: fixed;
    top: -100%; /* Start off-screen */
    left: 0;
    width: 100%;
    height: 50vh;
    background: #f6f6f6f0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}





/* --- Side Cart Drawer Styles --- */
.cart-drawer {
    position: fixed;
    top: 0;
    right: -500px; /* Start off-screen */
    width: 450px;
    height: 100vh;
    background: #fff;
    z-index: 10000;
    transition: 0.4s ease;
    padding: 40px;
    box-shadow: -10px 0 30px rgba(0,0,0,0.05);
}

/* Empty state styling */
.empty-cart-msg { text-align: center; padding-top: 60px; }

/* Top Bar */
.top-bar {
    background: #000000;
    color: #fff;
    padding: 10px 12px; /* add horizontal padding */
    font-size: 11px;
    letter-spacing: 1.2px;
    font-weight: 600;

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


/* Text wrapper */
.top-bar-center {
    width: 100%;
    text-align: center;
}





/* Promo text */
.promo-slider span {
    display: inline-block;
    text-align: center;
    white-space: normal; /* prevents cropping */
    line-height: 1.4;
}





/* Link */
.top-bar a {
    color: #fff;
    text-decoration: underline;
}






/* Main Navigation */
.main-navigation {
background: #fff;
border-bottom: 1px solid #f0f0f0;
padding: 20px 0;
}






/* Desktop Menu */
.nav-zone-center { display: flex; justify-content: center; }





/* Header Icons */
.nav-zone-right { display: flex; justify-content: flex-end; }





/* ======================================================
3. DRAWERS & OVERLAYS (SINGLE SOURCE OF TRUTH)
====================================================== */

.mobile-menu-drawer,
.cart-drawer {
position: fixed;
top: 0;
height: 100vh;
background: #fff;
z-index: 99999;
transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1);
box-shadow: 0 0 30px rgba(0,0,0,0.1);
}





/* Footer Links inside Drawer (Fix for Image 3 - Vertical Stack) */
.mobile-drawer-footer {
    margin-top: auto; padding: 30px 25px; background: #fbfbfb;
    display: flex; flex-direction: column; gap: 15px;
}


/* ======================================================
   4. DESKTOP SAFETY LOCK (1025px and up)
   ====================================================== */




.hero-left {
    width: 60%;
    position: relative;
    z-index: 10; /* Sits on top of the image */
}





.hero-right {
    width: 50%;
    margin-left: -10%; /* Forces the main image to go BEHIND the text */
}





/* --- GRID SECTION --- */
.grid-section {
    padding: 150px 5%;
}





.sticky-side {
    padding-top: 200px; /* Offset for editorial look */
}





/* --- THE SILENCE (CRITICAL OVERLAP) --- */
.silence-section {
    position: relative;
    padding: 250px 0;
    text-align: center;
}





.silence-img-2 {
    position: absolute;
    width: 350px;
    left: 48%;
    top: 45%;
    filter: grayscale(100%);
    border: 30px solid #fff; /* Key "Cutout" effect */
    box-shadow: 20px 20px 60px rgba(0,0,0,0.2);
}





/* --- MARQUEE TICKER --- */
.marquee-ticker {
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    padding: 30px 0;
    overflow: hidden;
}







/* --- CTA SECTION --- */
.cta-section {
    padding: 150px 5%;
}




/* Contact Page Layout */
.contact-page-wrapper {
    padding: 80px 0;
    background-color: #fff;
    color: #333;
}





.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 80px;
    align-items: start;
}





/* Illustration & List */
.illustration-box {
    margin-bottom: 40px;
}





/* Form Styling */
.form-header h1 {
    font-size: 42px;
    line-height: 1.1;
    margin-bottom: 25px;
}





/* --- MOBILE RESPONSIVENESS --- */

/* ======================================================
   LUXURY ACCOUNT DASHBOARD - THE FINAL FIX
   ====================================================== */

.account-dashboard-wrapper {
    background-color: #fcfcfc;
    padding: 60px 0;
}





/* Sidebar & Avatar */
.account-sidebar {
    background: #fff;
    padding: 40px 20px;
    border: 1px solid #eee;
    text-align: center;
}





/* Sidebar Nav Links */
.account-nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin-top: 25px !important;
    text-align: left;
}





/* ======================================================
   MAIN CONTENT AREA (The Fix)
   ====================================================== */

.account-main-content {
    background: #fff;
    padding: 50px;
    border: 1px solid #eee;
}





/* ❌ KILL THE REDUNDANT LIST (The bullets in the center) */
.account-main-content .woocommerce-MyAccount-navigation,
.account-main-content ul:first-of-type:not(.products) {
    display: none !important;
}





/* Style the "Addresses" headers */
.woocommerce-Address-title h3 {
    font-family: 'Playfair Display', serif !important;
    font-size: 22px !important;
    margin-bottom: 15px !important;
    text-transform: capitalize;
}





/* Remove bullets from address edit links */
.woocommerce-Address {
    list-style: none !important;
}





/* ======================================================
   MOBILE REFINEMENT
   ====================================================== */


/* END OF ACCOUNT DASHBOARD STYLES */
/* Make WooCommerce look like our theme */
.woocommerce-container {
    padding: 60px 0;
}





/* Remove those ugly purple/blue WooCommerce buttons and make them sleek black */
.woocommerce #respond input#submit, 
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button {
    background-color: #000 !important;
    color: #fff !important;
    border-radius: 0; /* Square edges look more luxury */
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 15px 30px;
    font-size: 97%;
}





/* Adjust the product grid titles to match our serif font */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Times New Roman', serif;
    font-size: 1.2rem;
    color: #000;
}




/* ================================
   FINAL DESKTOP HEADER MENU FIX
   ================================ */


/* Single Product Page CSS Start From Here */
/* JEWEL FLAIRS PRODUCT PAGE */

/* CONTAINER LAYOUT */
.jf-product-main {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}





/* VERTICAL GALLERY */
.jf-gallery-container {
    display: flex;
    width: 55%;
    gap: 15px;
}





/* INSTAGRAM FOLLOW BUTTON STYLING */
.jf-store-actions {
    margin-left: auto;
}




.btn-follow-insta {
    display: inline-block;
    padding: 8px 24px;
    background: #000; /* Luxury Black to match your theme */
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.3s ease;
}





/* Optional: If you want the Instagram Gradient look on hover */

.btn-follow-insta:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}





/* PRICE & DISCOUNT */
.jf-price-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 15px 0;
}





/* ACTION BUTTONS */
.jf-sticky-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}




/* 1. CLEANING UP WOOCOMMERCE VARIATIONS & QUANTITY */
/* ALIGN LABELS TO THE LEFT */
.variations {
    width: 100% !important;
    border: none !important;
}





.variations tr {
    display: flex;
    flex-direction: column; /* Stack them for a cleaner look */
    align-items: flex-start; 
    margin-bottom: 20px;
}




/* FIX THE RESET/CLEAR LINK */
.reset_variations {
    font-size: 11px;
    color: #e74c3c;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 5px;
    display: inline-block;
}




/* QUANTITY & BUTTONS ALIGNMENT */
.jf-cart-form-wrapper {
    margin-bottom: 20px;
}





/* Make Quantity box look modern */
.quantity input.qty {
    width: 60px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-right: 10px;
}





/* 2. THE STORE CARD POLISH */
.jf-store-card {
    background: #fafafa;
    border: 1px solid #eaeaea;
}





/* 4. TABS REFINEMENT */
.jf-custom-tabs {
    border-bottom: 2px solid #f0f0f0;
}




.jf-custom-tabs button.active {
    color: #000;
    border-bottom: 2px solid #000;
    margin-bottom: -2px; /* Pulls it down to sit on the line */
}





/* 4. REVIEW BARS VISUALS */
.jf-review-breakdown {
    display: flex;
    gap: 50px;
    padding: 40px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 15px;
    margin-top: 40px;
}




/* REVIEW BOX HIERARCHY */
.jf-rating-big strong {
    font-size: 64px; /* Bigger! */
    line-height: 1;
    color: #000;
}




/* FORCE THE RATING BARS TO SHOW */
.bar-bg {
    background-color: #eeeeee !important; /* The light grey background */
    height: 10px;                         /* Give it a thickness */
    flex: 1;                              /* Make it stretch across the gap */
    border-radius: 10px;
    overflow: hidden;                     /* Clips the fill to the rounded corners */
    position: relative;
}

/* Price wrapper */
.jf-price-block {
    margin: 10px 0;
}

/* Current price container */
.jf-current-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: inherit;
    line-height: 1.2;
    color: var(--jf-text);
}

/* Original price (strikethrough) */
.jf-current-price del {
    font-size: 16px;
    font-weight: 400;
    color: var(--jf-text-light);
    opacity: 0.8;
    text-decoration: line-through;
}

/* Selling / discounted price */
.jf-current-price ins {
    font-size: 28px;
    font-weight: 700;
    color: var(--jf-gold);
    text-decoration: none;
}

/* Currency symbol slightly softer */
.jf-current-price .woocommerce-Price-currencySymbol {
    font-size: 0.85em;
    margin-right: 2px;
}

/* Responsive tuning */
@media (max-width: 768px) {
    .jf-current-price ins {
        font-size: 24px;
    }

    .jf-current-price del {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .jf-current-price {
        gap: 8px;
    }

    .jf-current-price ins {
        font-size: 22px;
    }
}



/* 2. RE-FIX THE REVIEW BARS (FORCE FILL) */
.bar-fill {
    background-color: #000000 !important; /* The solid black fill */
    height: 100%;                         /* Fill the parent's height (10px) */
    display: block !important;            /* Ensure it acts like a block */
    border-radius: 10px;
}



/* HIDE DEFAULT WOOCOMMERCE BUTTONS IF NEEDED */
.jf-cart-form-wrapper .single_add_to_cart_button {
    display: none !important;
}
/* ==========================================
   MINI-CART DRAWER STYLING
   ========================================== */

/* 1. Remove that stray character & list bullets */
.woocommerce-mini-cart {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}





/* 2. Style each item in the bag */
.woocommerce-mini-cart-item {
    display: flex;
    position: relative;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    gap: 15px;
}





/* 3. Position the Thumbnail on the Left */
.woocommerce-mini-cart-item img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover;
    border-radius: 8px;
    order: -1; /* Forces image to the left */
}





/* 4. Product Name & Variations */
.woocommerce-mini-cart-item a:not(.remove) {
    font-weight: 700;
    font-size: 14px;
    color: #000;
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
}





/* 5. The "Remove" (X) Button */
.woocommerce-mini-cart-item .remove_from_cart_button {
    position: absolute;
    top: 15px;
    right: 0;
    color: #ccc !important;
    font-size: 18px !important;
    text-decoration: none !important;
    background: transparent !important;
}





/* 6. Quantity & Price */
.woocommerce-mini-cart-item .quantity {
    font-size: 13px;
    color: #888;
    margin-top: 10px;
    display: block;
}





/* 7. Subtotal Area */
.woocommerce-mini-cart__total {
    padding: 20px 0;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    border-top: 2px solid #000;
    margin-top: 10px;
}





/* 8. Buttons Styling (View Cart & Checkout) */
.woocommerce-mini-cart__buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}





/* Fix for that stray character */
.jf-mini-cart-wrapper {
    color: transparent; /* Hides the stray text but keeps child elements visible */
}




.jf-mini-cart-wrapper * {
    color: initial;
}




/* --- MINI CART SIDE DRAWER --- */
#cart-drawer {
    padding: 25px;
}





.jf-cart-body {
    margin-top: 20px;
}





.jf-cart-body ul.product_list_widget {
    list-style: none;
    padding: 0;
    margin: 0;
}





/* Subtotal Area */
.jf-cart-footer {
    padding-top: 20px;
    border-top: 2px solid #111;
    margin-top: 20px;
}





/* Button Styling to match your "Buy Now" look */
.jf-cart-footer .buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}




/* --- MAIN CART PAGE POLISH --- */
.woocommerce-cart .woocommerce table.shop_table {
    border: none;
    border-radius: 0;
}





/* Fix the Quantity Input */
.woocommerce .quantity .qty {
    width: 50px;
    padding: 8px;
    border: 1px solid #ddd;
}





/* Style the Cart Totals box */
.cart-collaterals {
    margin-top: 40px;
}





/* The Big Checkout Button */
.wc-proceed-to-checkout a.checkout-button {
    background: #000 !important;
    color: #fff !important;
    padding: 20px !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    border-radius: 0 !important;
}




/* --- MINI CART SIDE DRAWER REFINEMENT --- */

/* Container Spacing */
.jf-mini-cart-wrapper {
    padding: 10px 5px;
}





/* Individual Item Styling */
.mini_cart_item {
    display: flex !important;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 0;
}





.cart-item-price {
    font-size: 13px;
    color: #666;
    font-family: serif; /* Gives it a luxury feel */
}





/* Subtotal Area Styling */
.jf-cart-footer {
    margin-top: 30px;
    border-top: 2px solid #000;
    padding-top: 20px;
}





/* Buttons in Drawer */
.jf-cart-footer .buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}





/* View Bag - Outlined */
.jf-cart-footer .buttons a.wc-forward:not(.checkout) {
    background: #fff;
    color: #000;
    border: 1px solid #000;
}





/* Checkout - Solid Black */
.jf-cart-footer .buttons a.checkout {
    background: #000;
    color: #fff;
    border: 1px solid #000;
}




/* --- MAIN CART PAGE (Jewel Flairs Style) --- */

.woocommerce-cart .woocommerce table.shop_table {
    border: none !important;
    border-radius: 0;
}





/* Update Cart Button Fix */
.woocommerce button[name="update_cart"] {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    text-transform: uppercase;
    padding: 10px 20px !important;
    font-weight: 600;
    border-radius: 0;
}





/* Cart Totals Section */
.cart_totals {
    background: #fcfcfc;
    padding: 40px !important;
    border: 1px solid #eee;
}





/* Main Checkout Button */
.wc-proceed-to-checkout a.checkout-button {
    background: #000 !important;
    color: #fff !important;
    padding: 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    border-radius: 0 !important;
    margin-top: 10px;
}




/* --- THE LUXURY FINISHING TOUCHES --- */

/* 1. Style the 'Remove Product' button (The X) */
.woocommerce a.remove {
    color: #000 !important;
    background-color: transparent !important;
    border: 1px solid #eee;
    font-size: 18px !important;
    font-weight: 300 !important;
    width: 25px !important;
    height: 25px !important;
    line-height: 22px !important;
    border-radius: 0 !important;
    transition: all 0.3s ease;
}





/* 2. Style the Product Metadata (Color, Size, etc.) */
dl.variation {
    border: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
}





/* 3. Polish the Coupon Input field */
#coupon_code {
    text-align: center;
    border-radius: 0 !important;
    border: 1px solid #ddd !important;
    padding: 22px !important;
    height: auto !important;
}




/* --- THE GLOBAL MOBILE OVERFLOW FIX --- */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}





/* Ensure the drawer is truly hidden when not active */
#cart-drawer {
    position: fixed;
    top: 0;
    right: -100%; /* Use percentage so it scales to screen size */
    width: 320px; /* Base width */
    max-width: 85%; /* Don't cover the whole screen on small phones */
    height: 100%;
    background: #fff;
    z-index: 9999;
    transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
}





/* --- RESPONSIVE CART PAGE (THE TABLE KILLER) --- */

/* ======================================================
   1. THE WISHLIST BUTTON (HEART)
   ====================================================== */
.jf-wishlist-btn {
    background: #fff;
    border: 1px solid #e0e0e0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 10;
}





/* Float the heart over images in grids */
.products .product .jf-wishlist-btn {
    position: absolute;
    top: 15px;
    right: 15px;
}





/* ======================================================
   2. WISHLIST PAGE LAYOUT & FORCED GRID
   ====================================================== */
.jf-wishlist-container {
    max-width: 1300px;
    margin: 60px auto;
    padding: 0 20px;
}





/* ======================================================
   WISHLIST GRID – WOOCOMMERCE NATIVE
   ====================================================== */

.jf-wishlist-container ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 25px;
    list-style: none;
    padding: 0;
    margin: 0;
}







/* THE BULLET KILLER: Removes theme-added dots/pseudo-elements */
.jf-wishlist-container li.product::before,
.jf-wishlist-container li.product::after,
.jf-wishlist-container ul.products::before {
    content: none !important;
    display: none !important;
}





/* Fix Sale Tag Bullets & Style */
.jf-wishlist-container span.onsale {
    list-style: none !important;
    background: #000 !important;
    color: #fff !important;
    border-radius: 0 !important;
    padding: 5px 12px !important;
    min-height: auto !important;
    min-width: auto !important;
    font-size: 11px !important;
    position: absolute;
    top: 15px;
    left: 15px;
    margin: 0 !important;
    z-index: 2;
}





/* ======================================================
   3. RESPONSIVE REFINEMENT
   ====================================================== */

/* Tablets (2 Columns) */


/* Mobile (1 Column) */


/* Empty State Styling */
.wishlist-empty {
    text-align: center;
    padding: 80px 0;
}




/* REMOVE FROM WISHLIST BUTTON */
.jf-remove-wishlist-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    transition: all 0.2s ease;
}




/* END HERE */
.wp-block-woocommerce-checkout {
    padding-left: 10px;
    padding-right: 10px;
}


/* Sticky banner animation logic css code */
/* FORCE STICKY TO WORK */
html, body {
    overflow-x: clip !important; /* This stops horizontal scroll without breaking sticky */
}



#page, .site-main, .main-container {
    overflow: visible !important; /* Parent containers MUST be visible for sticky to work */
}



/* Layer the banners correctly so they slide over each other */
.sticky-banner-item:nth-child(1) { z-index: 1; }


/* --- Typography --- */




.hero-overlay {
    background: rgba(255, 255, 255, 0);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}





.hero-content { max-width: 600px; }




.hero-content .sub-title { text-transform: uppercase; letter-spacing: 3px; font-size: 12px; }




.hero-content h1 { font-size: 64px; font-family: 'Times New Roman', serif; margin: 20px 0; }




.hero-content p { font-size: 18px; margin-bottom: 30px; }





.btn {
    padding: 15px 35px;
    display: inline-block;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}




.btn-primary { background: var(--text-light); color: var(--text-dark); }




.btn-outline { border: 1px solid var(--text-light); color: var(--text-light); margin-left: 15px; }





.collection-card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    background: #ffffff;
}





.card-content p { 
    font-size: 13px; 
    color: #666; 
    line-height: 1.8; 
    margin-bottom: 20px;
}





.btn-shop-sm:hover {
    color: #d4af37;
    border-color: #d4af37;
}




.brand-statement h2 { margin-bottom: 25px; font-family: 'Times New Roman', serif; font-size: 32px; }




.brand-statement p { font-size: 18px; color: #555; margin-bottom: 30px; line-height: 1.8; }




.link-underline { border-bottom: 1px solid var(--text-dark); padding-bottom: 5px; font-size: 13px; font-weight: 700; }





.footer-main-grid {
    display: flex;
    gap: 80px;
    margin-bottom: 60px;
}





.footer-heading-serif {
    font-family: 'Times New Roman', serif;
    font-size: 38px;
    margin-bottom: 15px;
    font-weight: 400;
}





.newsletter-subtext {
    font-size: 14px;
    margin-bottom: 30px;
    opacity: 0.9;
}





.complex-newsletter-form {
    max-width: 500px;
}





.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}





.input-group {
    flex: 1;
}





.input-group label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
}





.input-group input {
    width: 100%;
    padding: 15px;
    border: none;
    font-size: 14px;
    color: #000;
}





.btn-signup-full {
    width: 100%;
    background: none;
    border: 2px solid #fff;
    color: #fff;
    padding: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.3s;
}





.btn-signup-full:hover {
    background: #fff;
    color: #000;
}





.newsletter-disclaimer {
    font-size: 11px;
    color: #888;
    margin: 25px 0;
    line-height: 1.6;
}

.nav-column h4 {
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 25px;
}





.nav-column ul {
    list-style: none;
    padding: 0;
}





.nav-column ul li {
    margin-bottom: 12px;
}





.nav-column ul li a {
    font-size: 13px;
    color: #ccc;
}





.meta-links {
    display: flex;
    gap: 20px;
}





.meta-copyright {
    display: flex;
    align-items: center;
    gap: 30px;
}





.back-to-top {
    font-weight: 700;
    color: #fff;
}
.ticker-track-top { 
    white-space: nowrap; 
    display: inline-block; 
    animation: tickerScroll 20s linear infinite;
}





.ticker-track-top span { 
    font-size: 40px; 
    font-weight: 100; 
    color: #000000;
    margin-right: 80px; 
    text-transform: lowercase;
    font-family: 'Helvetica', sans-serif;
}



.ring-gif-wrapper {
    position: relative;
    width: 100%;
}



.builder-column p {
    text-align: left;
    font-size: 16px;
    color: #666;
    max-width: 300px;
    margin: 0 auto 25px auto;
    line-height: 1.5;
}



.btn-pill .arrow {
    font-size: 18px;
    transition: transform 0.3s ease;
}



.btn-pill:hover .arrow {
    transform: translateX(5px);
}



.designer-spotlight .main-title {
    font-family: 'Times New Roman', serif;
    font-size: clamp(38px, 10vw, 80px);
    color: #000000;
    line-height: 0.9;
    margin-bottom: 15px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
}



.designer-spotlight .sub-title {
    font-size: 11px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 35px;
    opacity: 0;
    transition: all 1s ease 0.8s;
}



.btn-pill-white {
    display: inline-block;
    background: #000000;
    color: #ffffff;
    padding: 16px 40px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease 1s;
}



.designer-spotlight.animate .main-title,
.designer-spotlight.animate .arrow-icon,
.designer-spotlight.animate .btn-pill-white {
    opacity: 1;
    transform: translateY(0);
}



.designer-spotlight.animate .sub-title {
    opacity: 1;
}



.scroll-track {
    display: flex;
    flex-direction: column;
    gap: 15px;
}



.scroll-track img {
    width: 100%;
    aspect-ratio: 1/1.2;
    object-fit: cover;
    border-radius: 15px;
}



.sparkle-icon { 
    margin-bottom: 15px; 
    color: #000;
}



.display-title {
    font-size: clamp(40px, 10vw, 60px);
    font-weight: 400;
    line-height: 0.9;
    margin-bottom: 15px;
}



.description {
    font-size: 16px;
    color: #1a1a1a;
    line-height: 1.5;
    margin-bottom: 25px;
}



.btn-outline-dark {
    border: 1.5px solid #000;
    padding: 12px 25px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    text-decoration: none;
    color: #000;
}



.btn-icon {
    border: 1.5px solid #000;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #000;
    text-decoration: none;
}







.mosaic-visual-wrapper:hover .scroll-track {
    animation-play-state: paused;
}



.banner-flex {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
}



.banner-content {
    max-width: 750px;
    color: #fff;
    padding: 0 5%;
}



.banner-title {
    font-size: clamp(45px, 8vw, 100px);
    font-family: 'Times New Roman', serif;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 20px;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}



.banner-subtitle {
    font-size: 13px;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-bottom: 40px;
}



.btn-banner {
    display: inline-block;
    background: #c7b299; 
    color: #fff;
    padding: 18px 55px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    transition: 0.4s ease;
}





.slider-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 85vh;
}





.slider-text-content {
    flex: 0 0 38%;
    padding-right: 40px;
    z-index: 20;
}





.category-label { 
    font-size: 11px; 
    letter-spacing: 6px; 
    font-weight: 700; 
    display: block; 
    margin-bottom: 50px;
}





.slider-text-content .display-title { 
    font-family: 'Times New Roman', serif;
    font-size: clamp(60px, 7vw, 105px); 
    line-height: 0.85; 
    margin-bottom: 35px; 
    font-weight: 700;
}





.slider-desc { 
    font-size: 17px; 
    color: #444; 
    margin-bottom: 55px; 
    line-height: 1.6;
}





.view-collection-link { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    font-weight: 700; 
    font-size: 13px; 
    letter-spacing: 3px; 
    text-transform: uppercase;
}





.view-collection-link .line { 
    width: 45px; 
    height: 1.5px; 
    background: #000; 
}





.frame-large img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: opacity 0.8s ease-in-out;
}





.vertical-label {
    position: absolute;
    left: -70px;
    top: 50%;
    transform: rotate(-90deg) translateY(-50%);
    font-size: 11px;
    letter-spacing: 4px;
    font-weight: 600;
    white-space: nowrap;
}





.nav-btn { 
    background: #000; 
    color: #fff; 
    border: none; 
    width: 65px; 
    height: 65px; 
    cursor: pointer; 
    font-size: 26px; 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}





.progress-bar-container { 
    width: 100%; 
    height: 2px; 
    background: rgba(255,255,255,0.3); 
    margin-bottom: 15px; 
}





.progress-fill { 
    width: 0%; 
    height: 100%; 
    background: #fff; 
}





.slide-info { 
    display: flex; 
    justify-content: space-between; 
    font-size: 15px; 
    font-weight: 700; 
    color: #fff;
}

.ticker-track { 
    white-space: nowrap; 
    display: inline-block; 
    animation: tickerScroll 50s linear infinite;
}


.ticker-track span { 
    font-size: 40px; 
    font-weight: 100; 
    color: #ffffff;
    margin-right: 80px; 
    text-transform: lowercase;
    font-family: 'Helvetica', sans-serif;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 15px;
}

.feature-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 25px;
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

.feature-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.2px;
    color: var(--text-dark);
}





.feature-desc {
    font-size: 14px;
    color: #888;
    line-height: 1.5;
    max-width: 250px;
}

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

.search-inner { width: 80%; max-width: 800px; text-align: center; position: relative; }

.search-form { display: flex; border-bottom: 2px solid #000; padding-bottom: 10px; }

.search-field {
    background-color: #f6f6f6;
    border: none; 
    font-size: 32px; 
    width: 100%; 
    outline: none; 
    font-family: 'Times New Roman', serif; 
}

.search-submit { 
    padding-left: 5px;
    padding-right: 5px;
    color: white;
    background: black;
    border: none;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 2px; }

cart-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
    opacity: 0; visibility: hidden; transition: 0.3s;
    opacity: 0; visibility: hidden;
    transition: 0.3s;
}

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

.drawer-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 20px; }

.close-btn { 
    background: none; 
    border: none; 
    font-size: 40px; 
    cursor: pointer; }




.empty-cart-msg h2 { font-family: 'Times New Roman', serif; margin-bottom: 15px; }




.btn-black { 
    display: inline-block; background: #000; color: #fff; 
    padding: 15px 30px; margin: 10px; text-decoration: none; font-weight: 700; font-size: 12px;
}





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





.nav-grid {
display: grid;
grid-template-columns: 250px 1fr 250px;
align-items: center;
width: 100%;
}

.nav-zone-center > div { display: flex; }





.main-nav-list {
display: flex;
gap: 30px;
margin: 0;
padding: 0;
}





.main-nav-list li { white-space: nowrap; }





.main-nav-list a {
color: #000;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}




.icon-search-btn { background: none; border: none; cursor: pointer; }




.icon-label { font-size: 12px; letter-spacing: 1.5px; font-weight: 700; color: #888; }




.icon-link { font-size: 18px; }





.mobile-menu-drawer {
left: -100%;
width: 60%;
max-width: 350px;
display: flex;
flex-direction: column;
}





.cart-drawer {
right: -500px;
width: 450px;
padding: 40px;
}




.drawer-header { display: flex; justify-content: space-between; align-items: center; }

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




.mobile-nav-list a {
display: block;
padding: 15px 25px;
font-size: 14px;
font-weight: 700;
border-bottom: 1px solid #f9f9f9;
}




.mobile-drawer-footer a {
    text-decoration: none; color: #555; font-size: 13px; 
    font-weight: 600; text-transform: uppercase;
}



.hero-layout {
    display: flex;
    position: relative;
    align-items: flex-start;
}





.mag-box {
    width: 200px;
    margin-bottom: 40px;
}





.mag-box span {
    font-size: 10px;
    letter-spacing: 2px;
    display: block;
    margin-top: 10px;
}





.huge-title {
    font-size: 15vw;
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.05em;
    margin: 0;
}





.hero-desc {
    max-width: 400px;
    margin-top: 50px;
    font-size: 13px;
    line-height: 1.5;
}





.grid-layout {
    display: flex;
    gap: 100px;
}





.section-title {
    font-size: 8vw;
    font-weight: 900;
    line-height: 0.9;
    margin-bottom: 60px;
}





.img-portrait {
    width: 100%;
    filter: grayscale(100%);
}





.caption {
    font-size: 11px;
    margin-top: 25px;
    max-width: 300px;
}





.img-side {
    width: 100%;
    filter: grayscale(100%);
    margin-bottom: 30px;
}





.side-text {
    font-size: 11px;
    line-height: 1.4;
}





.silence-text-layers {
    position: relative;
    z-index: 1;
}





.outline-text {
    font-size: 18vw;
    color: transparent;
    -webkit-text-stroke: 1px #000;
    margin: 0;
    opacity: 0.3;
}





.fill-text {
    font-size: 24vw;
    font-weight: 900;
    line-height: 0.8;
    margin-top: -10vw;
    letter-spacing: -0.05em;
}





.silence-images {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}





.silence-img-1 {
    position: absolute;
    width: 400px;
    left: 20%;
    top: 30%;
    filter: grayscale(100%);
    box-shadow: 20px 20px 60px rgba(0,0,0,0.1);
}





.silence-footer {
    margin-top: 80px;
}





.marquee-inner {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 40s linear infinite;
    font-size: 3vw;
    font-weight: 900;
}





.cta-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 3px solid #000;
    padding-bottom: 50px;
    margin-bottom: 80px;
}





.ready-text {
    font-size: 10vw;
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.05em;
}





.cta-footer {
    display: flex;
    justify-content: space-between;
}





.cta-col {
    width: 45%;
    display: flex;
    flex-direction: column;
}





.col-head {
    font-size: 11px;
    color: #999;
    margin-bottom: 30px;
}





.cta-col a {
    text-decoration: none;
    color: #000;
    font-weight: 900;
    font-size: 20px;
    margin-bottom: 12px;
}




.responsive-img {
    max-width: 100%;
    height: auto;
}





.help-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 700;
}





.help-list {
    padding-left: 20px;
}





.help-list li {
    margin-bottom: 15px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: color 0.3s;
}





.help-list li:hover {
    color: #000;
    text-decoration: underline;
}





.form-header p {
    margin-bottom: 20px;
    line-height: 1.6;
    color: #666;
}





.jewel-contact-form {
    margin-top: 40px;
}





.form-group {
    margin-bottom: 20px;
}





.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
}





.form-group input, 
.form-group select, 
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    font-family: inherit;
}





.submit-btn {
    background: #000;
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
    transition: background 0.3s;
}





.account-grid {
    display: grid !important;
    grid-template-columns: 260px 1fr 280px !important;
    gap: 40px !important;
    max-width: 1300px;
    margin: 0 auto;
}





.user-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 20px;
}





.user-name {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}





.account-nav li { border-bottom: 1px solid #f2f2f2; }





.account-nav a {
    display: block;
    padding: 12px 0;
    color: #888;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
}





.account-nav li.is-active a {
    color: #000;
    font-weight: 700;
    border-left: 3px solid #000;
    padding-left: 10px;
}





.woocommerce-Addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}




.woocommerce-Price-amount {
    font-weight: 700;
    background: rgb(247, 247, 247);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    color: rgb(0, 0, 0);
    padding-bottom: 5px;
    margin: auto;    font-size: 1.2rem;
}





.jf-thumbnails-vertical {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 80px;
}





.jf-v-thumb img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
}

/* Base component */
.jf-main-image-base {
    flex: 1;
    position: relative;
}

.jf-main-image-base img {
    width: 100%;
    height: auto;
    display: block;
}

/* Standard main image */
.jf-main-image {
    background: var(--jf-bg-light);
    border-radius: 4px;
    overflow: hidden;
}

.jf-main-image a {
    display: block;
    position: relative;
}

.jf-main-image img {
    transition: opacity 0.3s ease;
}

.jf-main-image:hover .jf-zoom-icon {
    opacity: 1;
}

/* Large / zoomable variant */
.jf-main-image-large {
    cursor: zoom-in;
}

.jf-main-image-large img {
    border-radius: 15px;
    background: #f9f9f9;
}





.jf-zoom-hint {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(255,255,255,0.8);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}






.jf-store-card {
    border: 1px solid #eee;
    padding: 18px;
    border-radius: 12px;
    background: #fff;
    margin: 20px 0;
    background: #fafafa;
    border: 1px solid #eaeaea;
}





.jf-store-header {
    display: flex;
    align-items: center;
    gap: 12px;
}




.jf-store-stats {
    margin-top: 10px;
    font-size: 12px;
    color: #777;
    border-top: 1px solid #f5f5f5;
    padding-top: 10px;
}





.jf-store-logo {
    width: 40px;
    height: 40px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}





.jf-online-status {
    display: block;
    font-size: 11px;
    color: #2ecc71;
}





.btn-follow-insta:hover {
    background: #333;
    transform: translateY(-1px);
}






.btn-store-outline {
    padding: 5px 12px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
}


.jf-discount-tag {
    background: #ffecec;
    color: #e74c3c;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
}





.jf-btn-buy {
    flex: 2;
    background: #000;
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}





.jf-btn-bag {
    flex: 1;
    background: #fff;
    color: #000;
    border: 1px solid #000;
    padding: 15px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}





.variations td.label {
    padding: 0 0 8px 0 !important;
    text-align: left !important;
}





.variations td.label label {
    font-weight: 700;
    font-size: 14px;
    color: #000;
}





.variations td.value {
    width: 100% !important;
    padding: 0 !important;
}





.variations select {
    width: 100% !important;
    height: 45px;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 0 10px !important;
}





.quantity {
    margin-bottom: 25px !important;
}





.quantity input.qty {
    width: 80px;
    height: 45px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    text-align: center;
    font-weight: 600;
}





.jf-sticky-actions {
    display: flex;
    gap: 15px;
}





.jf-btn-buy {
    flex: 2;
    height: 50px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.1s;
}





.jf-btn-bag {
    flex: 1;
    height: 50px;
    background: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}




.btn-store-outline {
    border: 1px solid #ccc;
    font-weight: 500;
    transition: all 0.2s;
}




.jf-custom-tabs button {
    background: none;
    border: none;
    padding: 15px 5px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    position: relative;
}




.jf-custom-tabs button.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #000;
}




.jf-rating-big {
    text-align: center;
    border-right: 1px solid #eee;
    padding-right: 50px;
}




.jf-rating-big p {
    font-size: 13px;
    color: #777;
    margin-top: 5px;
}




.jf-stars-visual {
    color: #f1c40f;
    font-size: 20px;
    margin: 10px 0;
}




.bar-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 8px;
    font-size: 13px;
}




.bar-row span { width: 50px; }




.jf-meta-row {
    display: flex;
    gap: 15px;
    font-size: 13px;
    color: #888;
    margin-bottom: 15px;
    align-items: center;
}




.bar-count {
    width: 30px;
    color: #888;
}


.woocommerce-mini-cart-item .variation {
    font-size: 12px;
    color: #777;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: none !important;
}





.variation dt {
    font-weight: 600;
    float: left;
    margin-right: 5px;
    color: #333;
}





.woocommerce-mini-cart-item .remove_from_cart_button:hover {
    color: #e74c3c !important;
}





.woocommerce-mini-cart__buttons a {
    flex: 1;
    text-align: center;
    padding: 15px 10px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 12px;
    text-decoration: none;
}





.woocommerce-mini-cart__buttons a.wc-forward:not(.checkout) {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
}





.woocommerce-mini-cart__buttons a.checkout {
    background: #000 !important;
    color: #fff !important;
}




.cart-drawer {
  width: 420px;
  background: #fff;
  box-shadow: -10px 0 40px rgba(0,0,0,.15);
}





.mini_cart_item {
    display: flex;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}





.mini_cart_item .cart-item-image img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover;
    margin-right: 15px;
    border: 1px solid #eee;
}





.cart-item-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    margin-bottom: 5px;
    line-height: 1.4;
    text-transform: uppercase;
}





.cart-item-price {
    font-size: 13px;
    color: #666;
}





.jf-cart-footer .total {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
}





.jf-cart-footer .buttons a {
    display: block;
    width: 100%;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    transition: 0.3s ease;
}





.jf-cart-footer .buttons a.view-cart {
    background: #fff;
    color: #000;
    border: 1px solid #000;
}





.jf-cart-footer .buttons a.checkout {
    background: #000;
    color: #fff;
    border: 1px solid #000;
}





.jf-cart-footer .buttons a:hover {
    opacity: 0.8;
}





.woocommerce-cart .woocommerce table.shop_table thead th {
    background: #f9f9f9;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 15px;
    border: none;
}





.woocommerce-cart .woocommerce table.shop_table td {
    padding: 20px 15px;
}





.cart_totals {
    background: #f9f9f9;
    padding: 30px;
}





.cart_totals h2 {
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 20px;
}





.cart-item-image img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover;
    margin-right: 15px;
    background: #f9f9f9;
}





.cart-item-name {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    color: #000;
    margin-bottom: 4px;
}





.jf-cart-footer .total {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 25px;
}





.jf-cart-footer .buttons a {
    display: block;
    width: 100%;
    padding: 16px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}





.woocommerce-cart .woocommerce table.shop_table thead {
    background: #fafafa;
}





.woocommerce-cart .woocommerce table.shop_table thead th {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 20px;
    border: none;
}





.woocommerce button[name="update_cart"]:hover {
    background: #000 !important;
    color: #fff !important;
}





.cart_totals h2 {
    font-size: 18px;
    text-transform: uppercase;
    border-bottom: 1px solid #000;
    padding-bottom: 10px;
    margin-bottom: 25px;
}





.woocommerce a.remove:hover {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000;
}





dl.variation dt {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: #333;
    float: none !important;
    margin: 0;
}





dl.variation dd {
    font-size: 10px;
    color: #777;
    margin: 0 10px 0 0 !important;
}





.jf-wishlist-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}





.jf-wishlist-btn:hover {
    background: #f9f9f9;
    border-color: #000;
    transform: translateY(-2px);
}





.wishlist-header h1 {
    font-family: "Playfair Display", serif;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 50px;
    text-align: center;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 2px;
}





.wishlist-header h1 span {
    font-weight: 300;
    color: #999;
    font-size: 16px;
    display: block;
    margin-top: 8px;
    text-transform: none;
    letter-spacing: 0;
}





.jf-wishlist-container li.product {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    position: relative;
}





.wishlist-empty p {
    font-size: 18px;
    color: #666;
    margin-bottom: 30px;
}




.jf-container {
    padding-left: 5px;
}


/* --- Buttons --- */


.btn-banner:hover {
    background: #fff;
    color: #000;
}




.btn-store-outline:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}


/* --- Drawers & Overlays --- */




.cart-drawer.active { right: 0; }




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


/* --- Products & Collections --- */




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


/* --- Sticky Banners --- */

.sticky-banner-item:nth-child(2) { z-index: 2; }


.sticky-banner-item:nth-child(3) { z-index: 3; }


.sticky-banner-item:nth-child(4) { z-index: 4; }


/* --- Dual Frame Slider --- */




.frame-small .frame-inner { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
}


/* --- Shop & WooCommerce --- */




.jf-cart-footer .buttons a:hover {
    background: #333;
    color: #fff;
}

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


.newsletter-disclaimer a {
    text-decoration: underline;
    color: #fff;
}

.nav-column ul li a:hover {
    color: #fff;
    text-decoration: underline;
}



.builder-column:first-child { order: 1; }



.scroll-column {
    flex: 1;
}



.col-down .scroll-track {
    animation: scrollDown 25s linear infinite;
}


.content-right { justify-content: flex-end; text-align: right; }





.frame-small img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}





.nav-btn:hover { 
    background: #333; 
    transform: scale(1.05); 
}





.feature-icon svg {
    width: 100%;
    height: 100%;
}





.mag-box img {
    width: 100%;
    filter: grayscale(100%);
}





.hero-main-img {
    width: 100%;
    filter: grayscale(100%);
}





.grid-col-1 {
    width: 55%;
}





.grid-col-2 {
    width: 35%;
}





.big-arrow {
    font-size: 12vw;
    line-height: 1;
}





.submit-btn:hover {
    background: #333;
}





.jf-v-thumb:hover img {
    border-color: #000;
}





.jf-btn-buy:active, .jf-btn-bag:active {
    transform: scale(0.98);
}




.jf-rating-bars {
    flex: 1;
}





.variation dd {
    margin: 0;
}





.cart-item-details {
    flex: 1;
}





#cart-drawer.active {
    right: 0;
}





.jf-wishlist-btn.is-active {
    background: #000;
    border-color: #000;
    color: #fff;
}





.jf-wishlist-btn.is-active svg {
    fill: #fff;
}





.jf-remove-wishlist-btn:hover {
    background: #000;
    color: #fff;
    transform: scale(1.1);
}


/* --- Animations --- */
@keyframes tickerScroll { 
    0% { transform: translateX(0); }


    100% { transform: translateX(-50%); }


}

@keyframes scrollUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@keyframes scrollDown {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

@keyframes marquee {
    from { transform: translateX(0); }


    to { transform: translateX(-50%); }


}


/* --- Media Queries --- */
@media (max-width: 992px) {
    .collection-grid { grid-template-columns: 1fr; }


    .collection-card { 
        height: auto; 
        flex-direction: column !important; /* Force stack on mobile */
    }


    .card-image { height: 300px; width: 100%; }


}

@media (max-width: 992px) {
    .footer-main-grid { flex-direction: column; gap: 50px; }


    .form-row { flex-direction: column; }


    .footer-bottom-meta { flex-direction: column; text-align: center; gap: 20px; }


    .meta-links { flex-wrap: wrap; justify-content: center; }


}

@media (max-width: 768px) {

    .slider-ticker {
        padding: 6px 0;
    }



    .ticker-track span {
        font-size: 48px;
        margin-right: 40px;
    }


}

@media (min-width: 992px) {
    .ring-builder {
        padding: 100px 0;
    }

    .builder-grid {
        flex-direction: row; /* Side-by-Side */
        justify-content: space-between;
        align-items: center; /* Vertical center alignment */
        gap: 40px;
    }

    .builder-column {
        flex: 1;
        padding: 0;
        /* Force everything to start from the left */
        text-align: left; 
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Aligns H2, P, and Button to the left */
    }

    .builder-visual {
        flex: 1.4; 
        order: 2;
        max-width: 500px;
    }

    /* Keep the Icons centered within the left-aligned column */
    .builder-icon { 
        align-self: center; /* This centers the icon while text stays left */
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }

    .builder-column:first-child { 
        order: 1; 
    }

    .builder-column:last-child { 
        order: 3; 
    }

    /* Paragraph Reset for Desktop */
    .builder-column p {
        margin-left: 0;
        margin-right: 0;
        text-align: left;
        max-width: 320px; /* Limits width for better readability */
    }

    .builder-column h2 {
        text-align: left;
        width: 100%;
    }
}

@media (min-width: 992px) {
    .spotlight-inner {
        /* On desktop, we MUST set row so it's not reversed anymore */
        flex-direction: row; 
        height: 750px;       
    }

    .spotlight-content {
        flex: 0 0 50%; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
        padding: 0 10%;
    }

    .spotlight-products {
        flex: 0 0 50%;
        height: 100%;
    }

    .arrow-icon { 
        margin: 0 0 20px 0; 
    }
}

@media (min-width: 992px) {
    .lifestyle-mosaic {
        padding: 50px 0;
    }

    .mosaic-flex {
        flex-direction: row; /* Horizontal layout */
        align-items: center;
        gap: 80px;
        padding-bottom: 0;
    }

    .mosaic-text {
        position: static; /* Remove absolute positioning */
        transform: none;
        width: 40%;
        text-align: left;
        background: none;
        backdrop-filter: none;
        padding: 0;
    }

    .mosaic-btns {
        justify-content: flex-start;
    }

    .display-title {
        font-size: clamp(60px, 8vw, 110px);
        text-align: left;
    }

    .mosaic-visual-wrapper {
        flex: 1;
        height: 750px;
        /* Desktop Mask: Standard top/bottom fade */
        mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
        -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    }
}

@media (max-width: 768px) {
    .sticky-banner-item {
        height: 100svh; /* Better for mobile browsers */
    }

    .banner-flex {
        justify-content: center !important;
        /* Align text to the bottom area to show the models better */
        align-items: flex-end; 
        padding-bottom: 100px;
        text-align: center !important;
    }

    .banner-content {
        max-width: 90%;
        /* Subtle glassmorphism instead of a solid black box */
        background: rgba(0,0,0,0.3);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        padding: 40px 20px;
        border-radius: 20px;
    }

    .banner-title {
        font-size: clamp(34px, 12vw, 50px);
    }
}

@media (max-width: 1200px) {
    .slider-text-content .display-title { font-size: 70px; }


    .frame-small { width: 300px; height: 400px; }


}

@media (max-width: 768px) {

    .slider-grid {
        flex-direction: column;
        min-height: auto;
        gap: 50px;
    }



    .slider-text-content {
        flex: none;
        padding-right: 0;
        text-align: center;
    }



    .category-label {
        margin-bottom: 20px;
    }



    .slider-text-content .display-title {
        font-size: 42px;
        line-height: 1;
    }



    .slider-desc {
        font-size: 15px;
        margin-bottom: 30px;
    }



    .view-collection-link {
        justify-content: center;
    }



    /* Kill overlapping layout */
    .slider-frames-wrapper {
        height: auto;
        flex-direction: column;
    }



    .frame-large {
        width: 100%;
        height: 420px;
        margin: 0;
    }



    .frame-small {
        position: relative;
        width: 85%;
        height: 320px;
        transform: none;
        top: auto;
        left: auto;
        margin-top: -80px;
    }



    .vertical-label {
        display: none;
    }
    .frame-footer {
        position: static;
        width: 100%;
        margin-top: 20px;
        text-align: center;
    }



    .slide-info {
        justify-content: space-between;
    }


}

@media (max-width: 480px) {

    .slider-text-content .display-title {
        font-size: 34px;
    }



    .frame-large {
        height: 320px;
    }



    .frame-small {
        height: 260px;
    }


}

@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 60px;
    }


}

@media (max-width: 600px) {
    .features-grid {
        grid-template-columns: 1fr;
    }


    .feature-desc {
        max-width: 100%;
    }


}

@media (max-width: 768px) {
    .promo-slider span {
        font-size: 10.5px;
        letter-spacing: 1px;
    }


}

.main-navigation { padding: 10px 0; }


.nav-grid { display: flex; justify-content: space-between; }


    /* Left Zone: Hamburger + Logo */
    .nav-zone-left {
        display: flex; 
        align-items: center; 
        gap: 15px; 
        flex: 1;
    }



    .mobile-menu-btn {
        display: flex; 
        flex-direction: column; 
        gap: 4px;
        background: none; 
        border: none; 
        cursor: pointer;
        padding: 0;
    }


    .mobile-menu-btn span { width: 22px; height: 2px; background: #000; }



    /* Right Zone: Icons */
    .nav-zone-right { 
        flex: 1; 
        display: flex; 
        justify-content: flex-end; 
    }



 .nav-zone-center,
.icon-label { display: none; }



.cart-drawer { width: 100%; right: -100%; padding: 25px; }




@media (min-width: 1025px) {
.mobile-menu-drawer { display: none; }


}

@media (min-width: 1025px) {
    .mobile-menu-btn, .mobile-menu-drawer {
        display: none !important;
    }


}

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr; /* Stack columns on mobile */
        gap: 40px;
    }



    .contact-form-area {
        order: -1; /* Puts the Form/Heading at the top on mobile like your image */
    }



    .form-header h1 {
        font-size: 32px;
    }



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


}

@media (max-width: 1024px) {
    .account-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }



    /* Swipeable Horizontal Menu */
    .account-nav ul {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 20px;
        padding-bottom: 10px !important;
    }



    .account-nav li { border: none; }



    .account-nav li.is-active a {
        border-left: none;
        border-bottom: 2px solid #000;
        padding-left: 0;
    }



    .account-summary { display: none; }



    .woocommerce-Addresses {
        grid-template-columns: 1fr;
    }


}

@media (min-width: 1025px) {

    /* Force center menu to stay horizontal */
    .nav-zone-center,
    .nav-zone-center > div,
    .nav-zone-center nav {
        display: flex !important;
        justify-content: center !important;
        align-items: center;
    }



    /* WordPress UL fix */
    .nav-zone-center ul,
    .nav-zone-center ul.menu,
    .nav-zone-center ul.main-nav-list {
        display: flex !important;
        flex-direction: row !important;
        gap: 32px;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }



    /* Stop vertical wrapping */
    .nav-zone-center li {
        white-space: nowrap;
    }


}

@media screen and (max-width: 768px) {
    .cart-item-image img {
        width: 50px !important;
        height: 50px !important;
    }



    .cart-item-name {
        font-size: 11px !important;
    }



    .jf-cart-footer .total {
        font-size: 14px !important;
    }


}

@media screen and (max-width: 768px) {
    /* Hide the table headers, we don't need them in a list */
    .woocommerce-cart-form thead {
        display: none;
    }



    /* Force table rows to behave like blocks */
    .woocommerce-cart-form table.shop_table tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #eee;
        padding: 10px;
        position: relative;
    }



    /* Make each cell full width with a label */
    .woocommerce-cart-form table.shop_table td {
        display: block;
        width: 100% !important;
        text-align: right !important; /* Move values to the right */
        padding: 10px 0 !important;
        border: none !important;
        position: relative;
    }



    /* Add labels back to the left side */
    .woocommerce-cart-form table.shop_table td::before {
        content: attr(data-title); /* Grabs the "Product", "Price" etc. from HTML */
        float: left;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 10px;
        color: #999;
    }



    /* Special case for the product image/name */
    .woocommerce-cart-form table.shop_table td.product-thumbnail {
        text-align: center !important;
    }



    .woocommerce-cart-form table.shop_table td.product-thumbnail::before {
        display: none;
    }



    /* Move the remove (X) button to the top right of the card */
    .woocommerce-cart-form td.product-remove {
        position: absolute;
        top: 0;
        right: 10px;
        width: auto !important;
    }



    .woocommerce-cart-form td.product-remove::before {
        display: none;
    }


}

@media (max-width: 1024px) {
    .jf-wishlist-container ul.products {
        grid-template-columns: repeat(3, 1fr);
    }


}

@media (max-width: 600px) {
    .jf-wishlist-container ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }



    .wishlist-header h1 {
        font-size: 28px;
    }


}

@media (max-width: 1024px) {
    .jf-wishlist-container ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }


}

@media (max-width: 600px) {
    .jf-wishlist-container ul.products {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }


}

/* --- Jewel Flairs: Besnard-Inspired Collection Grid --- */

.jewel-collection-grid {
    background-color: #050505;
    color: #ffffff;
    padding: 100px 5%;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* 1. Header & Typography */
.grid-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
    gap: 40px;
}

.hero-title {
    font-size: clamp(48px, 9vw, 120px);
    line-height: 0.85;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -3px;
    margin: 0;
}

.hero-title .star-icon {
    font-size: 0.7em;
    vertical-align: middle;
    margin: 0 10px;
}

.header-meta {
    max-width: 320px;
    text-align: right;
}

.header-meta p {
    font-size: 12px;
    line-height: 1.6;
    opacity: 0.8;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.discover-link {
    font-size: 11px;
    text-decoration: underline;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}

/* 2. Filter Bar - High-End Minimalist */
.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 25px 0;
    margin-bottom: 60px;
}

.filter-left span {
    margin-right: 30px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.filter-left span.active-filter, 
.filter-left span:hover {
    opacity: 1;
}

.filter-toggle {
    background: #fff;
    color: #000;
    border: none;
    padding: 5px 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
}

/* 3. The Grid Layout */
.product-besnard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 40px 25px; /* More vertical gap for titles */
}

/* 4. Product Card Styling */
.product-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.card-inner {
    text-decoration: none;
    color: inherit;
}

/* Image Container - Fixing the 'Small Product' Issue */
.product-image-wrapper {
    background: #111111; /* Deeper black/grey */
    padding: 15px; /* Reduced from 40px to make jewelry look much bigger */
    margin-bottom: 20px;
    aspect-ratio: 1/1; /* Professional square look */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: background 0.4s ease;
}

.product-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Keeps jewelry shape, but looks bigger due to less padding */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .product-image-wrapper {
    background: #181818;
}

.product-card:hover img {
    transform: scale(1.08);
}

/* 5. Typography Fixes - Removing "Buttons" from Prices */
.product-details {
    text-align: left; /* Left align for a more editorial look */
}

.product-title {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.4;
    margin: 0 0 10px 0;
    color: rgba(255,255,255,0.9);
    min-height: 32px; /* Alignment fix */
}

/* STRIP DEFAULT WOOCOMMERCE BUTTON STYLES */
.product-price-wrapper,
.product-price-wrapper span,
.product-price-wrapper .amount,
.product-price-wrapper ins,
.product-price-wrapper del {
    background: transparent !important; /* Force remove grey boxes */
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px;
    text-decoration: none !important;
}

.product-price-wrapper del {
    opacity: 0.4;
    margin-right: 10px !important;
    text-decoration: line-through !important;
}

/* 6. Asymmetrical Scaling */
.grid-large {
    grid-column: span 2;
    grid-row: span 2;
}

.grid-large .product-image-wrapper {
    padding: 0; /* Bleed for impact */
    aspect-ratio: auto;
    height: 100%;
}

.grid-large .product-image-wrapper img {
    object-fit: cover; /* Large item fills the box completely */
}

/* 7. RESPONSIVE REFINEMENTS */

/* Desktop / Tablet Pro */
@media (max-width: 1200px) {
    .product-besnard-grid { grid-gap: 20px; }
    .hero-title { font-size: 80px; }
}

/* Tablet */
@media (max-width: 1024px) {
    .product-besnard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-large {
        grid-column: span 2;
        grid-row: span 1; /* Reset row span for better flow on tablets */
    }
}

/* Mobile */
@media (max-width: 768px) {
    .jewel-collection-grid { padding: 60px 20px; }

    .grid-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 40px;
    }

    .header-meta {
        text-align: left;
        max-width: 100%;
    }

    .hero-title { font-size: 48px; }

    .filter-bar {
        padding: 15px 0;
    }

    .filter-left {
        display: none; /* Keep mobile clean */
    }

    .product-besnard-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 per row on mobile for e-commerce efficiency */
        grid-gap: 20px 15px;
    }

    .grid-large {
        grid-column: span 2;
        margin: 10px 0;
    }

    .product-title { font-size: 9px; }
}

/* ======================================================
   CONTACT PAGE STYLES
   ====================================================== */

.contact-page-wrapper {
    padding: 80px 0;
    background: #fff;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: start;
}

.contact-column {
    padding: 40px;
}

.contact-info {
    background: #f9f9f9;
    border-radius: 4px;
}

.direct-contact-section h2,
.help-section h3 {
    font-family: 'Times New Roman', serif;
    font-size: 24px;
    margin-bottom: 20px;
    color: #1a1a1a;
}

.contact-details-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.contact-details-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 15px;
    color: #333;
}

.contact-details-list li i {
    width: 20px;
    color: #8e7955;
    font-size: 16px;
}

.contact-details-list li a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-details-list li a:hover {
    color: #8e7955;
}

.contact-social-links {
    display: flex;
    gap: 12px;
    margin-bottom: 40px;
}

.contact-social-links a {
    width: 40px;
    height: 40px;
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    text-decoration: none;
    transition: all 0.3s ease;
}

.contact-social-links a:hover {
    background: #1a1a1a;
    color: #fff;
}

.help-section {
    border-top: 1px solid #e0e0e0;
    padding-top: 30px;
}

.help-list {
    padding-left: 20px;
    margin: 0;
}

.help-list li {
    margin-bottom: 12px;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
}

.contact-form-area {
    background: #fff;
}

.form-header h1 {
    font-family: 'Times New Roman', serif;
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #1a1a1a;
}

.form-header p {
    color: #666;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 15px;
}

.jewel-contact-form {
    margin-top: 30px;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: #333;
}

.form-group label .required {
    color: #e74c3c;
}

.form-group label .optional {
    color: #999;
    font-weight: 400;
    text-transform: none;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px 18px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #8e7955;
    box-shadow: 0 0 0 3px rgba(142, 121, 85, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #aaa;
}

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    cursor: pointer;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.submit-btn {
    display: inline-block;
    padding: 16px 40px;
    background: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    background: #8e7955;
    transform: translateY(-2px);
}

.contact-success-message,
.contact-error-message {
    padding: 15px 20px;
    border-radius: 4px;
    margin-bottom: 25px;
    font-size: 15px;
}

.contact-success-message {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.contact-error-message {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Contact Page Responsive */
@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .contact-column {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .contact-page-wrapper {
        padding: 40px 0;
    }
    
    .contact-grid {
        gap: 30px;
    }
    
    .contact-column {
        padding: 25px;
    }
    
    .form-header h1 {
        font-size: 28px;
    }
    
    .contact-info {
        order: 2;
    }
    
    .contact-form-area {
        order: 1;
    }
}

/* ======================================================
   ABOUT PAGE STYLES
   ====================================================== */

.editorial-about {
    background: #fff;
    overflow-x: hidden;
}

/* --- ABOUT HERO SECTION --- */
.about-hero-section {
    padding: 100px 0 80px;
    background: #fff;
}

.about-hero-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-hero-left {
    padding-right: 40px;
}

.mag-box {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    padding: 10px 20px 10px 10px;
    background: #f9f9f9;
    border-radius: 50px;
}

.mag-box img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.mag-box span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #1a1a1a;
}

.about-huge-title {
    font-family: 'Times New Roman', Georgia, serif;
    font-size: clamp(48px, 8vw, 100px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -2px;
    color: #1a1a1a;
    margin-bottom: 30px;
}

.about-huge-title .accent {
    color: #8e7955;
}

.about-hero-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #666;
    max-width: 450px;
}

.about-hero-right {
    position: relative;
}

.about-hero-main-img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    border-radius: 4px;
}

/* --- ABOUT GRID SECTION --- */
.about-grid-section {
    padding: 100px 0;
    background: #f9f9f9;
}

.about-grid-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: start;
}

.about-section-title {
    font-family: 'Times New Roman', Georgia, serif;
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -1px;
    color: #1a1a1a;
    margin-bottom: 40px;
}

.about-section-title .light {
    color: #999;
}

.about-img-wrapper {
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 25px;
}

.about-img-portrait {
    width: 100%;
    height: 500px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.about-img-wrapper:hover .about-img-portrait,
.about-img-wrapper:hover .about-img-side {
    transform: scale(1.03);
}

.about-caption {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about-sticky-side {
    position: sticky;
    top: 120px;
}

.about-img-side {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.about-side-text {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- ABOUT SILENCE SECTION --- */
.about-silence-section {
    padding: 120px 0;
    background: #1a1a1a;
    color: #fff;
    position: relative;
}

.about-silence-content {
    text-align: center;
}

.about-silence-text-layers {
    margin-bottom: 60px;
}

.about-outline-text {
    font-family: 'Times New Roman', Georgia, serif;
    font-size: clamp(60px, 12vw, 150px);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -3px;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
    margin: 0;
}

.about-fill-text {
    font-family: 'Times New Roman', Georgia, serif;
    font-size: clamp(60px, 12vw, 150px);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -3px;
    color: #fff;
    margin: 0;
    margin-top: -20px;
}

.about-silence-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 60px;
}

.about-silence-img-wrapper {
    overflow: hidden;
    border-radius: 4px;
}

.about-silence-img-wrapper img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.about-silence-img-wrapper:hover img {
    transform: scale(1.05);
}

.about-silence-img-1 {
    transform: translateY(40px);
}

.about-silence-img-2 {
    transform: translateY(-40px);
}

.about-silence-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.about-year {
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 80px;
    font-weight: 400;
    color: #8e7955;
    line-height: 1;
}

.about-silence-footer p {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 2px;
    max-width: 500px;
}

/* --- ABOUT MARQUEE TICKER --- */
.about-marquee-ticker {
    background: #8e7955;
    padding: 20px 0;
    overflow: hidden;
}

.about-marquee-inner {
    display: flex;
    animation: marquee 20s linear infinite;
    white-space: nowrap;
}

.about-marquee-inner span {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #fff;
    text-transform: uppercase;
    padding-right: 20px;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* --- ABOUT CTA SECTION --- */
.about-cta-section {
    padding: 100px 0;
    background: #fff;
}

.about-cta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;
    padding-bottom: 40px;
    border-bottom: 1px solid #eee;
}

.about-ready-text {
    font-family: 'Times New Roman', Georgia, serif;
    font-size: clamp(36px, 6vw, 72px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -2px;
    color: #1a1a1a;
    margin: 0;
}

.about-ready-text .accent {
    color: #8e7955;
}

.about-big-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    color: #1a1a1a;
    text-decoration: none;
    transition: all 0.3s ease;
}

.about-big-arrow:hover {
    background: #1a1a1a;
    color: #fff;
    transform: rotate(45deg);
}

.about-cta-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.about-cta-col {
    text-align: left;
}

.about-col-head {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 20px;
}

.about-social-list,
.about-contact-list,
.about-address-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-social-list li,
.about-contact-list li,
.about-address-list li {
    margin-bottom: 12px;
}

.about-social-list a,
.about-contact-list a {
    font-size: 16px;
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.3s ease;
}

.about-social-list a:hover,
.about-contact-list a:hover {
    color: #8e7955;
}

.about-address-list li {
    font-size: 16px;
    color: #666;
}

/* --- ABOUT PAGE RESPONSIVE --- */
@media (max-width: 1024px) {
    .about-hero-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .about-hero-left {
        padding-right: 0;
        text-align: center;
    }
    
    .about-hero-desc {
        margin: 0 auto;
    }
    
    .about-hero-main-img {
        height: 450px;
    }
    
    .about-grid-layout {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .about-sticky-side {
        position: relative;
        top: 0;
    }
    
    .about-silence-images {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .about-silence-img-1,
    .about-silence-img-2 {
        transform: translateY(0);
    }
    
    .about-cta-footer {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .about-hero-section {
        padding: 60px 0 40px;
    }
    
    .about-huge-title {
        letter-spacing: -1px;
    }
    
    .mag-box {
        margin-bottom: 20px;
    }
    
    .about-grid-section {
        padding: 60px 0;
    }
    
    .about-img-portrait,
    .about-img-side {
        height: 350px;
    }
    
    .about-silence-section {
        padding: 80px 0;
    }
    
    .about-silence-img-wrapper img {
        height: 300px;
    }
    
    .about-year {
        font-size: 60px;
    }
    
    .about-cta-section {
        padding: 60px 0;
    }
    
    .about-cta-header {
        flex-direction: column;
        gap: 30px;
        text-align: center;
        margin-bottom: 50px;
    }
    
    .about-big-arrow {
        width: 80px;
        height: 80px;
    }
    
    .about-big-arrow svg {
        width: 40px;
        height: 40px;
    }
    
    .about-cta-footer {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .about-cta-col {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .about-hero-main-img {
        height: 350px;
    }
    
    .about-img-portrait,
    .about-img-side {
        height: 280px;
    }
    
    .about-silence-img-wrapper img {
        height: 250px;
    }
    
    .about-outline-text,
    .about-fill-text {
        letter-spacing: -1px;
    }
    
    .about-fill-text {
        margin-top: -10px;
    }
}

/* ======================================================
   WISHLIST PAGE STYLES
   ====================================================== */

.jf-wishlist-page {
    padding: 80px 0;
    background: #fff;
    min-height: 60vh;
}

.wishlist-page-header {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 50px;
    padding-bottom: 25px;
    border-bottom: 1px solid #eee;
}

.wishlist-page-header h1 {
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 36px;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0;
}

.wishlist-count {
    font-size: 14px;
    color: #888;
    letter-spacing: 0.5px;
}

/* --- Wishlist Products Grid --- */
.wishlist-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.wishlist-product-card {
    position: relative;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.wishlist-product-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}

.wishlist-remove-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    color: #999;
}

.wishlist-remove-btn:hover {
    background: #e74c3c;
    border-color: #e74c3c;
    color: #fff;
}

.wishlist-product-image {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f9f9f9;
}

.wishlist-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.wishlist-sale-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 2px;
}

.wishlist-product-info {
    padding: 20px;
}

.wishlist-product-title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    margin-bottom: 8px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.wishlist-product-title:hover {
    color: #8e7955;
}

.wishlist-product-price {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.wishlist-product-price del {
    color: #bbb;
    font-weight: 400;
    margin-right: 8px;
}

.wishlist-product-price ins {
    text-decoration: none;
    color: #8e7955;
}

.wishlist-stock {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.wishlist-stock.in-stock {
    color: #27ae60;
}

.wishlist-stock.out-of-stock {
    color: #e74c3c;
}

.wishlist-product-actions {
    margin-top: 15px;
}

.wishlist-add-to-cart {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background: #1a1a1a;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.wishlist-add-to-cart:hover {
    background: #8e7955;
}

.wishlist-unavailable {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background: #f5f5f5;
    color: #999;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 3px;
}

/* --- Page Actions --- */
.wishlist-page-actions {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.wishlist-continue-shopping {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1a1a1a;
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid #1a1a1a;
    transition: all 0.3s ease;
}

.wishlist-continue-shopping:hover {
    color: #8e7955;
    border-color: #8e7955;
}

/* --- Empty State --- */
.wishlist-empty-state {
    text-align: center;
    padding: 80px 20px;
    max-width: 450px;
    margin: 0 auto;
}

.wishlist-empty-icon {
    margin-bottom: 30px;
    color: #ddd;
}

.wishlist-empty-state h2 {
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 28px;
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.wishlist-empty-state p {
    font-size: 15px;
    line-height: 1.7;
    color: #777;
    margin-bottom: 30px;
}

.wishlist-shop-btn {
    display: inline-block;
    padding: 16px 40px;
    background: #1a1a1a;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.wishlist-shop-btn:hover {
    background: #8e7955;
}

/* --- Wishlist Page Responsive --- */
@media (max-width: 1200px) {
    .wishlist-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
}

@media (max-width: 1024px) {
    .jf-wishlist-page {
        padding: 60px 0;
    }
    
    .wishlist-page-header {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 40px;
    }
    
    .wishlist-page-header h1 {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .wishlist-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .wishlist-product-info {
        padding: 15px;
    }
    
    .wishlist-product-title {
        font-size: 13px;
    }
    
    .wishlist-product-price {
        font-size: 14px;
    }
    
    .wishlist-empty-state {
        padding: 60px 20px;
    }
    
    .wishlist-empty-state h2 {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .jf-wishlist-page {
        padding: 40px 0;
    }
    
    .wishlist-page-header h1 {
        font-size: 26px;
    }
    
    .wishlist-products-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .wishlist-product-card {
        display: grid;
        grid-template-columns: 120px 1fr;
    }
    
    .wishlist-product-image {
        aspect-ratio: 1 / 1;
        height: 100%;
    }
    
    .wishlist-remove-btn {
        top: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
    }
    
    .wishlist-remove-btn svg {
        width: 14px;
        height: 14px;
    }
    
    .wishlist-sale-badge {
        font-size: 9px;
        padding: 4px 8px;
    }
    
    .wishlist-product-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .wishlist-add-to-cart {
        padding: 10px 15px;
        font-size: 10px;
    }
}/* ==================================================
   JEWEL FLAIRS - SINGLE PRODUCT PAGE STYLES
   Fully Responsive: Desktop, Tablet, Mobile
   ================================================== */

:root {
    --jf-primary: #000000;
    --jf-accent: #8e7955;
    --jf-gold: #d4af37;
    --jf-text: #1a1a1a;
    --jf-text-light: #666666;
    --jf-border: #e5e5e5;
    --jf-bg-light: #f9f9f9;
    --jf-success: #28a745;
    --jf-error: #dc3545;
    --jf-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    --jf-transition: all 0.3s ease;
}

.jf-single-product-page {
    padding: 20px 0 60px;
    background: #fff;
}

.jf-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (min-width: 768px) {
    .jf-container {
        padding: 0 40px;
    }
}

.jf-breadcrumb {
    margin-bottom: 25px;
    font-size: 12px;
    color: var(--jf-text-light);
}

.jf-breadcrumb .breadcrumb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.jf-breadcrumb li {
    display: inline-flex;
    align-items: center;
}

.jf-breadcrumb a {
    color: var(--jf-text-light);
    text-decoration: none;
    transition: var(--jf-transition);
}

.jf-breadcrumb a:hover {
    color: var(--jf-primary);
}

.jf-breadcrumb .sep {
    margin: 0 8px;
    color: #ccc;
}

.jf-product-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 60px;
}

@media (min-width: 992px) {
    .jf-product-layout {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }
}

@media (min-width: 1200px) {
    .jf-product-layout {
        grid-template-columns: 55% 45%;
        gap: 80px;
    }
}

/* Gallery Section: Main Image at Top, Thumbnails Below */
.jf-gallery-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.jf-gallery-section.jf-gallery-vertical {
    flex-direction: column;
}

@media (min-width: 768px) {
    .jf-gallery-section {
        gap: 20px;
    }
}

/* Gallery Thumbnails: Horizontal scroll below main image */
.jf-gallery-thumbnails {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 5px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--jf-primary) var(--jf-bg-light);
}

.jf-gallery-thumbnails::-webkit-scrollbar {
    height: 6px;
}

.jf-gallery-thumbnails::-webkit-scrollbar-track {
    background: var(--jf-bg-light);
    border-radius: 3px;
}

.jf-gallery-thumbnails::-webkit-scrollbar-thumb {
    background: var(--jf-primary);
    border-radius: 3px;
}

@media (min-width: 768px) {
    .jf-gallery-thumbnails {
        gap: 12px;
        padding: 8px 0;
    }
}

@media (min-width: 992px) {
    .jf-gallery-thumbnails {
        gap: 15px;
    }
}

/* Legacy classes kept for backward compatibility */
.jf-thumbnails {
    display: none;
}

.jf-mobile-thumbnails {
    display: none;
}

.jf-thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 2px solid transparent;
    background: var(--jf-bg-light);
    cursor: pointer;
    overflow: hidden;
    transition: var(--jf-transition);
}

@media (min-width: 768px) {
    .jf-thumb {
        width: 70px;
        height: 70px;
    }
}

.jf-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jf-thumb:hover,
.jf-thumb.active {
    border-color: var(--jf-primary);
}


.jf-zoom-icon {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--jf-transition);
    box-shadow: var(--jf-shadow);
}

.jf-sale-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--jf-error);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 12px;
    border-radius: 2px;
}

.jf-product-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-right: 50px;
}

/* Title Row: Product Title with Wishlist Icon */
.jf-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.jf-title-wishlist {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1.5px solid var(--jf-border);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--jf-transition);
    margin-top: 4px;
}

.jf-title-wishlist svg {
    width: 18px;
    height: 18px;
    stroke: var(--jf-text-light);
    fill: none;
    transition: var(--jf-transition);
}

.jf-title-wishlist:hover {
    border-color: var(--jf-error);
}

.jf-title-wishlist:hover svg {
    stroke: var(--jf-error);
}

.jf-title-wishlist.is-active svg {
    fill: var(--jf-error);
    stroke: var(--jf-error);
}

@media (min-width: 768px) {
    .jf-title-wishlist {
        width: 40px;
        height: 40px;
    }

    .jf-title-wishlist svg {
        width: 20px;
        height: 20px;
    }
}

.jf-product-title {
    flex: 1;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--jf-text);
    margin: 0;
}

@media (min-width: 768px) {
    .jf-product-title {
        font-size: 28px;
    }
}

@media (min-width: 992px) {
    .jf-product-title {
        font-size: 32px;
    }
}

.jf-product-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.jf-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jf-rating .star-rating {
    font-size: 14px;
}

.jf-stars {
    color: var(--jf-gold);
    font-size: 14px;
    letter-spacing: 2px;
}

.jf-review-link {
    color: var(--jf-text-light);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    transition: var(--jf-transition);
}

.jf-review-link:hover {
    color: var(--jf-primary);
}

.jf-stock {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 2px;
}

.jf-stock.in-stock {
    background: rgba(40, 167, 69, 0.1);
    color: var(--jf-success);
}

.jf-stock.out-of-stock {
    background: rgba(220, 53, 69, 0.1);
    color: var(--jf-error);
}

.jf-price-block {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}


.jf-discount-tag {
    background: var(--jf-error);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 2px;
}

.jf-short-description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--jf-text-light);
}

.jf-short-description p {
    margin: 0 0 10px;
}

.jf-store-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: var(--jf-bg-light);
    border-radius: 8px;
}

.jf-store-logo {
    width: 45px;
    height: 45px;
    background: var(--jf-primary);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.jf-store-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jf-store-details strong {
    font-size: 14px;
    color: var(--jf-text);
}

.jf-store-status {
    font-size: 12px;
    color: var(--jf-success);
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-dot {
    width: 6px;
    height: 6px;
    background: var(--jf-success);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.jf-follow-btn {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 16px;
    background: var(--jf-primary);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: var(--jf-transition);
}

.jf-follow-btn:hover {
    background: #333;
    color: #fff;
}

.jf-add-to-cart-wrapper {
    padding: 20px 0;
    border-top: 1px solid var(--jf-border);
    border-bottom: 1px solid var(--jf-border);
}

.jf-add-to-cart-wrapper form.cart {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.jf-add-to-cart-wrapper .variations {
    margin-bottom: 10px;
}

.jf-add-to-cart-wrapper .variations tr {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.jf-add-to-cart-wrapper .variations .label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--jf-text);
}

.jf-add-to-cart-wrapper .variations select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--jf-border);
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
}

.jf-add-to-cart-wrapper .quantity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jf-add-to-cart-wrapper .quantity label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--jf-text);
}

.jf-add-to-cart-wrapper .quantity input[type="number"] {
    width: 80px;
    padding: 12px;
    text-align: center;
    border: 1px solid var(--jf-border);
    border-radius: 4px;
    font-size: 16px;
}

.jf-add-to-cart-wrapper .single_add_to_cart_button {
    display: none !important;
}

.jf-action-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.jf-btn {
    flex: 1;
    min-width: 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--jf-transition);
}

.jf-btn-primary {
    background: var(--jf-primary);
    color: #fff;
}

.jf-btn-primary:hover {
    background: #333;
}

.jf-btn-secondary {
    background: #fff;
    color: var(--jf-primary);
    border: 2px solid var(--jf-primary);
}

.jf-btn-secondary:hover {
    background: var(--jf-primary);
    color: #fff;
}

.jf-wishlist-btn {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    padding: 0;
    background: #fff;
    border: 2px solid var(--jf-border);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--jf-transition);
}

.jf-wishlist-btn svg {
    width: 22px;
    height: 22px;
    transition: var(--jf-transition);
}

.jf-wishlist-btn:hover {
    border-color: var(--jf-error);
}

.jf-wishlist-btn:hover svg {
    color: var(--jf-error);
}

.jf-wishlist-btn.is-active {
    background: var(--jf-error);
    border-color: var(--jf-error);
}

.jf-wishlist-btn.is-active svg {
    fill: #fff;
    stroke: #fff;
}

.jf-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding-top: 10px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--jf-text-light);
}

.trust-item svg {
    color: var(--jf-success);
}

.jf-product-tabs-section {
    margin-bottom: 60px;
}

.jf-tabs-nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--jf-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.jf-tabs-nav::-webkit-scrollbar {
    display: none;
}

.jf-tab-btn {
    flex-shrink: 0;
    padding: 15px 25px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--jf-text-light);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: var(--jf-transition);
    white-space: nowrap;
}

@media (min-width: 768px) {
    .jf-tab-btn {
        padding: 18px 35px;
    }
}

.jf-tab-btn:hover {
    color: var(--jf-primary);
}

.jf-tab-btn.active {
    color: var(--jf-primary);
    border-bottom-color: var(--jf-primary);
}

.jf-tabs-content {
    padding: 30px 0;
}

@media (min-width: 768px) {
    .jf-tabs-content {
        padding: 40px 0;
    }
}

.jf-tab-panel {
    display: none;
}

.jf-tab-panel.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.jf-description-content {
    font-size: 15px;
    line-height: 1.8;
    color: var(--jf-text);
    max-width: 800px;
}

.jf-description-content p {
    margin-bottom: 20px;
}

.jf-product-attributes {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--jf-border);
}

.jf-product-attributes h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--jf-text);
}

.jf-attributes-table {
    width: 100%;
    max-width: 500px;
    border-collapse: collapse;
}

.jf-attributes-table th,
.jf-attributes-table td {
    padding: 12px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--jf-border);
    text-align: left;
}

.jf-attributes-table th {
    color: var(--jf-text-light);
    font-weight: 500;
    width: 40%;
}

.jf-attributes-table td {
    color: var(--jf-text);
}

.jf-review-summary {
    margin-bottom: 40px;
}

.jf-rating-overview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px;
    background: var(--jf-bg-light);
    border-radius: 8px;
}

@media (min-width: 768px) {
    .jf-rating-overview {
        grid-template-columns: auto 1fr;
        gap: 50px;
    }
}

.jf-big-rating {
    text-align: center;
}

@media (min-width: 768px) {
    .jf-big-rating {
        text-align: left;
    }
}

.jf-big-rating .rating-number {
    font-size: 48px;
    font-weight: 700;
    color: var(--jf-text);
    display: block;
}

.jf-big-rating .rating-stars {
    margin: 10px 0;
}

.jf-big-rating .rating-text {
    font-size: 13px;
    color: var(--jf-text-light);
}

.jf-rating-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rating-bar-row {
    display: grid;
    grid-template-columns: 60px 1fr 40px;
    align-items: center;
    gap: 15px;
}

.star-label {
    font-size: 13px;
    color: var(--jf-text-light);
}

.bar-track {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: var(--jf-gold);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.bar-count {
    font-size: 13px;
    color: var(--jf-text-light);
    text-align: right;
}

.jf-reviews-list {
    max-width: 800px;
}

.jf-reviews-list .comment-respond {
    background: var(--jf-bg-light);
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 40px;
}

.jf-reviews-list .comment-reply-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

.jf-reviews-list .comment-form-rating {
    margin-bottom: 20px;
}

.jf-reviews-list .stars {
    display: flex;
    gap: 5px;
}

.jf-reviews-list .stars a {
    font-size: 20px;
    color: #ccc;
    text-decoration: none;
}

.jf-reviews-list .stars a:hover,
.jf-reviews-list .stars a.active {
    color: var(--jf-gold);
}

.jf-reviews-list input[type="text"],
.jf-reviews-list input[type="email"],
.jf-reviews-list textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--jf-border);
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 15px;
}

.jf-reviews-list textarea {
    min-height: 120px;
    resize: vertical;
}

.jf-reviews-list .form-submit input {
    background: var(--jf-primary);
    color: #fff;
    border: none;
    padding: 14px 30px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--jf-transition);
}

.jf-reviews-list .form-submit input:hover {
    background: #333;
}

.jf-reviews-list .commentlist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jf-reviews-list .commentlist li {
    padding: 25px 0;
    border-bottom: 1px solid var(--jf-border);
}

.jf-reviews-list .commentlist li:last-child {
    border-bottom: none;
}

.jf-reviews-list .comment_container {
    display: flex;
    gap: 20px;
}

.jf-reviews-list .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
}

.jf-reviews-list .comment-text {
    flex: 1;
}

.jf-reviews-list .star-rating {
    margin-bottom: 8px;
}

.jf-reviews-list .meta {
    margin-bottom: 10px;
}

.jf-reviews-list .woocommerce-review__author {
    font-weight: 600;
    color: var(--jf-text);
}

.jf-reviews-list .woocommerce-review__dash {
    margin: 0 5px;
    color: var(--jf-text-light);
}

.jf-reviews-list .woocommerce-review__published-date {
    color: var(--jf-text-light);
    font-size: 13px;
}

.jf-reviews-list .description p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--jf-text);
}

.jf-shipping-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 800px;
}

@media (min-width: 768px) {
    .jf-shipping-info {
        grid-template-columns: 1fr 1fr;
    }
}

.jf-shipping-info h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--jf-text);
}

.jf-shipping-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jf-shipping-info li {
    padding: 10px 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--jf-text);
    border-bottom: 1px solid var(--jf-border);
}

.jf-shipping-info li:last-child {
    border-bottom: none;
}

.jf-related-products {
    padding-top: 40px;
    border-top: 1px solid var(--jf-border);
}

.jf-section-title {
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 40px;
    color: var(--jf-text);
}

@media (min-width: 768px) {
    .jf-section-title {
        font-size: 28px;
    }
}

.jf-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

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

.jf-product-card {
    position: relative;
}

.jf-card-image {
    display: block;
    position: relative;
    background: var(--jf-bg-light);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 15px;
}

.jf-card-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

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

.jf-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--jf-error);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 8px;
    border-radius: 2px;
}

.jf-card-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.jf-card-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--jf-text);
    text-decoration: none;
    line-height: 1.4;
    transition: var(--jf-transition);
}

@media (min-width: 768px) {
    .jf-card-title {
        font-size: 14px;
    }
}

.jf-card-title:hover {
    color: var(--jf-accent);
}

.jf-card-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--jf-text);
}

.jf-card-price del {
    font-size: 12px;
    color: var(--jf-text-light);
    font-weight: 400;
    margin-right: 8px;
}

.jf-card-price ins {
    text-decoration: none;
    color: var(--jf-gold);
}

.woocommerce-product-rating .star-rating {
    color: var(--jf-gold);
}

@media (max-width: 480px) {
    .jf-product-title {
        font-size: 22px;
    }
    
    .jf-btn {
        padding: 14px 20px;
        font-size: 12px;
    }
    
    .jf-action-buttons {
        flex-direction: column;
    }
    
    .jf-wishlist-btn {
        width: 100%;
        height: 50px;
    }
    
    .jf-tab-btn {
        padding: 12px 18px;
        font-size: 11px;
    }
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 14px;
}

.woocommerce-message {
    background: rgba(40, 167, 69, 0.1);
    border-left: 4px solid var(--jf-success);
    color: var(--jf-success);
}

.woocommerce-error {
    background: rgba(220, 53, 69, 0.1);
    border-left: 4px solid var(--jf-error);
    color: var(--jf-error);
}

.woocommerce-info {
    background: rgba(0, 123, 255, 0.1);
    border-left: 4px solid #007bff;
    color: #007bff;
}

/* ==================================================
   CUSTOM IMAGE POPUP/ZOOM MODAL STYLES
   Pure CSS - No External Libraries Required
   ================================================== */

.jf-image-zoom-trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: zoom-in;
    position: relative;
}

.jf-image-zoom-trigger img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}

.jf-image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.jf-image-modal[hidden] {
    display: none;
}

.jf-image-modal.active {
    opacity: 1;
    visibility: visible;
}

.jf-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    cursor: pointer;
}

.jf-modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 100px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .jf-modal-content {
        padding: 80px 80px 120px;
    }
}

.jf-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

@media (min-width: 768px) {
    .jf-modal-close {
        top: 25px;
        right: 25px;
        width: 50px;
        height: 50px;
    }
}

.jf-modal-close svg {
    stroke: #fff;
}

.jf-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

.jf-modal-close:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.jf-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

@media (min-width: 768px) {
    .jf-modal-nav {
        width: 56px;
        height: 56px;
    }
}

.jf-modal-nav svg {
    stroke: #fff;
}

.jf-modal-nav:hover {
    background: rgba(255, 255, 255, 0.25);
}

.jf-modal-nav:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.jf-modal-prev {
    left: 10px;
}

.jf-modal-next {
    right: 10px;
}

@media (min-width: 768px) {
    .jf-modal-prev {
        left: 25px;
    }
    .jf-modal-next {
        right: 25px;
    }
}

.jf-modal-image-wrapper {
    position: relative;
    max-width: 90vw;
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .jf-modal-image-wrapper {
        max-width: 80vw;
        max-height: 75vh;
    }
}

.jf-modal-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    transition: transform 0.2s ease;
    user-select: none;
    -webkit-user-drag: none;
}

@media (min-width: 768px) {
    .jf-modal-image {
        max-height: 75vh;
    }
}

.jf-zoom-controls {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 15px;
    border-radius: 30px;
}

.jf-zoom-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.jf-zoom-btn svg {
    stroke: #fff;
    width: 18px;
    height: 18px;
}

.jf-zoom-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.jf-zoom-btn:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.jf-modal-thumbnails {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    max-width: 90%;
    overflow-x: auto;
    padding: 10px;
    scrollbar-width: none;
}

.jf-modal-thumbnails::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    .jf-modal-thumbnails {
        bottom: 30px;
    }
}

.jf-modal-thumb {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .jf-modal-thumb {
        width: 60px;
        height: 60px;
    }
}

.jf-modal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jf-modal-thumb:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.jf-modal-thumb.active {
    border-color: #fff;
}

.jf-modal-thumb:focus {
    outline: none;
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

@media (max-width: 480px) {
    .jf-modal-content {
        padding: 50px 10px 90px;
    }
    
    .jf-modal-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }
    
    .jf-modal-nav {
        width: 40px;
        height: 40px;
    }
    
    .jf-modal-prev {
        left: 5px;
    }
    
    .jf-modal-next {
        right: 5px;
    }
    
    .jf-zoom-controls {
        bottom: 65px;
        padding: 6px 12px;
    }
    
    .jf-zoom-btn {
        width: 32px;
        height: 32px;
    }
    
    .jf-modal-thumbnails {
        bottom: 10px;
        gap: 8px;
    }
    
    .jf-modal-thumb {
        width: 45px;
        height: 45px;
    }
}