/* BREAKTHROUGH CENTERING & LEVELING FIX */
#content .featured-products,
.featured-products,
section.featured-products,
.featured-products .container {
  display: block !important;
  clear: both !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

/* Forces the 4 columns to stay perfectly level at the top */
.featured-products .products,
#content .products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
  width: 100% !important;
  align-items: start !important; /* Locks the tops of all images in a straight line */
}



/* ==========================================================================
   PRECISION MOBILE HEADER FIX
   ========================================================================== */
@media (max-width: 767px) {
    body:not(.page-index) .header-nav {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 60px !important;
        background-color: #f7f4eb !important;
        padding: 0 10px !important;
    }

    /* Force the inner elements to respect the new flex row */
    body:not(.page-index) .header-nav .container, 
    body:not(.page-index) .header-nav .row {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        margin: 0 !important;
    }
}
/* Targeting the specific mobile breakpoint for phones */

/* ==========================================================
FIXING THE MOBILE HEADER
   ========================================================= */

@media (max-width: 767px) {

    /* 1. SMASH INVISIBLE INTERACTION BARRIERS */
    /* This unties the touch boundaries so your mobile menu burger and cart register taps instantly */
    .menu-icon, 
    #_mobile_main_menu, 
    .js-menu-toggle,
    #_mobile_cart, 
    .blockcart,
    .header-nav,
    .header-top {
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 999999 !important; /* Forces interactive items to the absolute top visual layer */
    }

.menu-icon, #_mobile_main_menu, .js-menu-toggle {
        position: relative !important;
        z-index: 999999 !important;
        pointer-events: auto !important;
    }




    /* 2. FORCE STRICT HORIZONTAL FLEX LAYOUT ON THE RIGHT SECTION */
    /* Instead of letting individual modules drift or stack, we group them into an unyielding layout row */
    #header .header-right,
    #header .right-nav,
    .header-top .row > div:last-child {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        float: right !important;
    }

    /* 3. VAPORIZE THE BLEEDING BACKGROUND SURFACE & REPAIR FLAGS */
    /* Strips out any leaking desktop background slices or colored sprites entirely */
    #header [class*="language"],
    #header [id*="language"],
    .language-selector,
    #_mobile_language_selector {
        background-color: transparent !important;
        background-image: none !important; /* Vaporizes the blue/red background bleed artifact */
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Hard-lock your native flag image parameters to ensure crisp, un-stretched rectangles */
    #header [class*="language"] img,
    #header [id*="language"] img,
    .language-selector img,
    .flag-icon {
        width: 24px !important;
        height: 16px !important;
        min-width: 24px !important;
        min-height: 16px !important;
        max-width: 24px !important;
        max-height: 16px !important;
        object-fit: contain !important; /* Eliminates all horizontal pulling or compression */
        display: inline-block !important;
        margin-right: 6px !important; /* Creates a clean, distinct gap between the flags themselves */
    }

    /* 4. PHYSICAL GAP BARRIER AROUND THE LOGIN SILHOUETTE */
    /* This generates an unyielding spatial column zone directly on both sides of the login icon */
    #header [class*="user-info"],
    #header [id*="user-info"],
    #_mobile_user_info,
    .user-info-wrapper {
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        padding: 0 !important;
        
        /* Forces unbendable physical margins to isolate the login button from surrounding items */
        margin-left: 16px !important;  /* Pushes the flags away to the left side */
        margin-right: 16px !important; /* Pushes the shopping cart away to the right side */
    }

    /* 5. FORCE RE-DISPLAY OF THE (0) CART TEXT STRING */
    /* Restores your product counter inline as visible, crisp black numbers next to the shopping bag */
    .blockcart .cart-products-count,
    #_mobile_cart .cart-products-count,
    .products-count,
    .ajax_cart_quantity {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #000000 !important;       
        font-size: 16px !important;
        font-weight: bold !important;
        margin-left: 6px !important;    /* Clean spacing right of the shopping bag icon */
    }

    /* Collapses hidden desktop language dropdown menu structures so they can't break mobile lines */
    #header [class*="language"] ul,
    #header [class*="language"] .dropdown-menu {
        display: none !important;
    }
}

/* ==========================================================================
   1. LOCAL CORE FONTS (SELF-HOSTED)
   ========================================================================== */

/* --- CORMORANT GARAMOND --- */

/* Light 300 */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond-v21-latin-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Regular 400 */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* SemiBold 600 */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond-v21-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Light 300 Italic */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond-v21-latin-300italic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* Regular 400 Italic */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond-v21-latin-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}


/* --- JOST --- */

/* Light 300 */
@font-face {
    font-family: 'Jost';
    src: url('../fonts/jost-v20-latin-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Regular 400 */
@font-face {
    font-family: 'Jost';
    src: url('../fonts/jost-v20-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Medium 500 */
@font-face {
    font-family: 'Jost';
    src: url('../fonts/jost-v20-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}



/* ==========================================================================
   FORCE FULL-WIDTH LAYOUT (FIXING "BOXED" DESIGN)
   ========================================================================== */
#wrapper, 
#page, 
.container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure the main content doesn't get squished */
#main {
    width: 100% !important;
    max-width: 100% !important;
}
/* =================================
CENTER TEXT UNDER IMAGES
================================== */
/* Center all text within the featured product cards */
.featured-products .product-miniature,
.featured-products .product-description-short,
.featured-products .product-title,
.featured-products .product-price-and-shipping {
    text-align: center !important;
}

/* If the elements are inside a flex-container, force centering */
.featured-products .product-miniature .product-description,
.featured-products .product-miniature .product-title,
.featured-products .product-miniature .product-price-and-shipping {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* ============================================
SLIDER FIX
=============================================== */

/* ==========================================================================
   PRODUCT PAGE: ENLARGE TITLE
   ========================================================================= */

#main h1,
.product-title,
.product-title h1,
h1.h1,
.h1,
.page-header h1 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 48px !important;       /* You can change this number! */
    line-height: 1.1 !important;      /* Keeps the lines close and elegant */
    color: #1a1a1a !important;
    font-weight: 300 !important;
    margin-bottom: 25px !important;   /* Adds a bit of space below the title */
}

/* ==========================================================================
   PRODUCT PAGE: REMOVE QUANTITY LABEL & MAKE BOX TRANSPARENT
   ========================================================================= */

/* 1. Hide the "Quantity" text label */
.product-quantity label {
    display: none !important;
}

/* 2. Make the input box transparent */
.product-quantity input#quantity_wanted {
    background: transparent !important;
    border: 1px solid transparent !important; /* Removes the border line */
    color: transparent !important;            /* Hides the number inside */
    box-shadow: none !important;              /* Removes any drop shadows */
    caret-color: transparent !important;      /* Hides the blinking cursor */
}

/* 3. If there are +/- buttons, hide those too (optional) */
.product-quantity .input-group-btn-vertical {
    display: none !important;
}

/* ==========================================================================
   PRODUCT PAGE: BRUTE FORCE REMOVAL OF "QUANTITÉ"
   ========================================================================= */

/* Targeted removal for the product page only */
#main .product-add-to-cart span.control-label,
#main .product-quantity span.control-label,
span.control-label {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
}



/* ==========================================================================
   PRODUCT PAGE: ALIGNED & SIZED THUMBNAILS
   ========================================================================= */

/* 1. Parent Thumbnail Container */
.js-qv-product-images {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important; /* Centers the thumbnails */
    align-items: center !important;
    gap: 15px !important;               /* Space between thumbs */
    margin: 20px auto !important;       /* Requested Margin */
    width: 100% !important;
    
    /* CONTROL WIDTH HERE: 
       If thumbnails are narrower than the main image, increase this number.
       If they are wider, decrease it. */
    max-width: 500px !important; 
}

/* 2. Individual Thumbnail Box */
.product-images .thumb-container,
.js-qv-product-images .thumb-container {
    width: 80px !important;            /* Fixed width */
    height: 80px !important;           /* Fixed height */
    max-height: 80px !important;       /* Added Max-Height Constraint */
    flex: 0 0 auto !important;         /* Prevents shrinking */
    overflow: hidden !important;
}

/* 3. Image Sizing */
.product-images img,
.js-qv-product-images img {
    width: 100% !important;
    height: 100% !important;
    max-height: 80px !important;       /* Added Max-Height Constraint */
    object-fit: cover !important;      /* Ensures no blur/stretching */
    border: 1px solid #dcdcdc !important;
}


/* ==========================================================================
   1. COMPACT LAYOUT REORDERING & ELEGANT PRICE SIZING (SCOPED TO PRODUCT PAGE)
   ========================================================================= */

/* Only target the main product info container, NOT the related product grid */
#product #main .product-information .col-md-6 {
    display: flex !important;
    flex-direction: column !important;
}

/* Push miscellaneous elements to the bottom */
#product #main .product-information .col-md-6 > * {
    order: 5;
}

#product #main .product-information h1 {
    order: 1 !important;
}

/* SOFT, CLEAN PRICE TEXT */
#product .product-prices {
    order: 2 !important;
    margin-bottom: 0px !important;
    padding-bottom: 5px !important;
    font-size: 24px !important;
    font-weight: 400 !important;
}

/* Pull the button container tightly under the price */
#product .product-add-to-cart {
    order: 3 !important;
    width: 100% !important;
    margin-top: 5px !important; 
    margin-bottom: 20px !important;
}

/* Push description text below the button */
#product .product-description {
    order: 4 !important;
}
/* ==========================================================================
   2. REFINED SIDE-BY-SIDE QUANTITY & BUTTON
   ========================================================================= */

/* Put quantity input and button back on the same line */
.product-add-to-cart .product-quantity {
    display: flex !important;
    flex-direction: row !important; 
    align-items: center !important; 
    justify-content: flex-start !important;
    gap: 12px !important; 
    width: 100% !important;
}

.product-add-to-cart .product-quantity .add {
    width: auto !important;
}

/* Premium, normal-sized black button */
.product-add-to-cart .add-to-cart,
.product-add-to-cart .btn-primary {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 220px !important; 
    height: 46px !important;  
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #1a1a1a !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

/* Hover Effect */
.product-add-to-cart .add-to-cart:hover,
.product-add-to-cart .btn-primary:hover {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #1a1a1a !important;
}

/* Align wishlist heart icon */
.product-add-to-cart .product-quantity .wishlist-button-add {
    margin: 0 !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
}


/* ==========================================================================
   3. REMOVE PRODUCT DETAILS WHITE BACKGROUND
   ========================================================================= */

/* Strips background, borders, and shadows from the details/tabs block */
.tabs,
.tab-content,
#tab-content,
.product-details,
#product-details,
.product-features,
.product-information {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensures individual inner tab panels are also transparent */
.tab-content .tab-pane {
    background: transparent !important;
    background-color: transparent !important;
    padding-left: 0 !important;  /* Optional: aligns text cleanly if it was padded */
    padding-right: 0 !important;
}

/* Cleans up the background of the tab selection buttons if needed */
.nav-tabs,
.nav-tabs .nav-link {
    background: transparent !important;
    background-color: transparent !important;
}

.nav-tabs .nav-link.active {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 2px solid #1a1a1a !important; /* Elegant underline for the active tab */
}

/* ==========================================================================
   4. SNIPER TARGET: REMOVE REVIEWS & "NO REVIEWS" TEXT
   ========================================================================= */

/* Wipes out the exact "No customer reviews" box, its list items, and header */
#empty-product-comment,
.product-comment-list-item,
#product-comments-list-header,
.product-comments-list,
#product-comments {
    display: none !important;
}


/* ==========================================================================
   PASSWORD RECOVERY: RESTORED CONFIGURATION
   ========================================================================= */

/* --- 1. FONTS & TEXT --- */
body#password h1 {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 300 !important;
    text-shadow: none !important;
}

body#password, 
body#password label, 
body#password p, 
body#password .form-control {
    font-family: 'Jost', sans-serif !important;
    color: #1a1a1a !important;
}

/* --- 2. CONTAINER & BACKGROUND (Cleaning up the look) --- */
body#password #main .page-content,
body#password #main .card,
body#password #main .card-block {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- 3. THE "GRID-BREAKER" (Fixes the left-alignment) --- */
.center-email-fields {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin: 20px auto !important;
    text-align: center !important;
}

/* Force elements inside the form to center and behave */
.center-email-fields label,
.center-email-fields .email,
.center-email-fields button {
    width: 100% !important;
    max-width: 400px !important;
    flex: none !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- 4. BUTTON STYLING (Black & Centered) --- */
button.form-control-submit {
    display: block !important;
    margin: 20px auto !important;
    padding: 15px 30px !important;
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #1a1a1a !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

button.form-control-submit:hover {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

/* Hide duplicate responsive buttons */
.hidden-sm-up { display: none !important; }


/* ==========================================================================
   2. GLOBAL STYLES, TOKENS & RESET
   ========================================================================== */
*, *::before, *::after { 
  box-sizing: border-box; 
}

:root {
  --terracotta: #C4673A;
  --ochre: #D4A847;
  --linen: #F5EFE4;
  --linen-dark: #EDE4D3;
  --umber: #2E1F0E;
  --umber-light: #5a3e28;
  --white: #FDFAF5;
}

body {
  background: var(--linen) !important;
  color: var(--umber);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Restoring essential structural breathing room for PrestaShop layout */
.breadcrumb, #breadcrumb {
  display: none !important;
}

.page-home-bespoke {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
}


/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
  background: rgba(245, 239, 228, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(46, 31, 14, 0.1);
}

#header.logged-in nav {
  top: 40px;
}

.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--umber);
  text-decoration: none;
}

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

.nav-right-container {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.nav-links a, .login-btn {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--umber-light);
  text-decoration: none;
  transition: color 0.2s;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-links a:hover, .login-btn:hover { 
  color: var(--terracotta); 
}

/* ==========================================================================
   4. RESTORED HIGH-END HERO SECTION
   ========================================================================== */
.hero-section-canvas {
  min-height: 90vh;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 160px 48px 100px !important;
  position: relative;
  overflow: hidden;
  background: var(--linen) !important;
  width: 100%;
}

.hero-section-canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 60%, rgba(196,103,58,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 30%, rgba(212,168,71,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.hero-bg-letter {
  position: absolute;
  font-family: 'Cormorant Garamond', serif;
  font-size: 40vw;
  font-weight: 300;
  color: rgba(196,103,58,0.04);
  line-height: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.hero-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.2s;
}

.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--umber);
  /* max-width: 820px; */
max-width: 100% !important;
  margin: 0 auto !important;
  opacity: 0;
  animation: fadeUp 0.9s ease forwards 0.4s;
}

.hero-title em {
  font-style: italic;
  color: var(--terracotta);
}

.hero-sub {
  margin: 28px auto 0 !important;
  font-size: 0.95rem;
  color: var(--umber-light);
  max-width: 480px;
  line-height: 1.75;
  opacity: 0;
  animation: fadeUp 0.9s ease forwards 0.6s;
}

.hero-divider {
  width: 48px;
  height: 1px;
  background: var(--ochre);
  margin: 36px auto 0 !important;
  opacity: 0;
  animation: fadeUp 0.9s ease forwards 0.8s;
}

/* ==========================================================================
   5. CATEGORY TABS
   ========================================================================== */
.categories {
  display: flex;
  border-bottom: 1px solid rgba(46,31,14,0.12);
  background: var(--linen);
  position: sticky;
  top: 65px;
  z-index: 50;
}

.cat-tab {
  flex: 1;
  padding: 22px 24px;
  text-align: center;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--umber-light);
  transition: all 0.3s;
  position: relative;
  border-right: 1px solid rgba(46,31,14,0.1);
}

.cat-tab:last-child { 
  border-right: none; 
}

.cat-tab::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--terracotta);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.cat-tab.active {
  color: var(--umber);
  background: var(--white);
}

.cat-tab.active::after {
  transform: scaleX(1);
}

.cat-tab:hover { 
  color: var(--terracotta); 
}

.cat-tab .cat-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 400;
  display: block;
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   6. PROTECTED STABLE SLIDER ENGINE
   ========================================================================== */
.banner-wrap {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  height: 420px;
  overflow: hidden;
  background: var(--umber);
  margin: 0;
  display: block !important;
  clear: both;
}

.banner-track {
  display: flex;
  width: 300%; /* Forces the film-strip track to be exactly 3 screens wide */
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.77,0,0.175,1);
}

.banner-slide {
  width: 33.333%; /* Each slide takes exactly 1/3 of the 300% track (one full screen) */
  flex-shrink: 0; /* Absolute guarantee the browser won't squish the slide */
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 80px;
  overflow: hidden;
}

.banner-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(46,31,14,0.75) 0%, rgba(46,31,14,0.2) 60%, transparent 100%);
  z-index: 1;
}

.banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 8s ease;
  transform: scale(1.05);
}

.banner-slide:hover .banner-bg {
  transform: scale(1.0);
}

.banner-bg.b1 {
  background-color: #3d2a1a;
  background-image: radial-gradient(ellipse at 70% 50%, #8B4A2B 0%, #3d2a1a 60%);
}

.banner-bg.b2 {
  background-color: #2a1f14;
  background-image: radial-gradient(ellipse at 30% 60%, #6b4c2a 0%, #2a1f14 60%);
}

.banner-bg.b3 {
  background-color: #1e2a1a;
  background-image: radial-gradient(ellipse at 60% 40%, #4a6040 0%, #1e2a1a 60%);
}

.banner-content {
  position: relative;
  z-index: 2;
  max-width: 520px;
}

.banner-tag {
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: 16px;
  display: block;
}

.banner-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--linen);
  line-height: 1.2;
  margin-bottom: 16px;
}

.banner-desc {
  font-size: 0.88rem;
  color: rgba(245,239,228,0.75);
  line-height: 1.7;
  margin-bottom: 28px;
}

.banner-cta {
  display: inline-block;
  padding: 11px 28px;
  border: 1px solid var(--ochre);
  color: var(--ochre);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s;
  font-family: 'Jost', sans-serif;
}

.banner-cta:hover {
  background: var(--ochre);
  color: var(--umber);
}

.banner-controls {
  position: absolute;
  bottom: 24px;
  right: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 10;
}

.banner-arrows {
  display: flex;
  gap: 8px;
}

.banner-arrow {
  width: 36px; height: 36px;
  border: 1px solid rgba(245,239,228,0.3);
  background: transparent;
  color: var(--linen);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.banner-arrow:hover {
  background: rgba(245,239,228,0.15);
  border-color: var(--ochre);
}

.banner-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(245,239,228,0.35);
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  padding: 0;
}

.banner-dot.active {
  background: var(--ochre);
  transform: scale(1.4);
}


/* ==========================================================================
   7. CLEAN MODULE HOOK ZONE ARCHITECTURE
   ========================================================================== */
.home-modules-centered-stack {
  width: 100% !important;
  max-width: 100% !important;
  padding: 80px 24px;
  background: transparent !important;
  clear: both;
}

/* Safely targets PrestaShop core text fields & dynamic modules without breaking grids */
.home-modules-centered-stack #custom-text,
.home-modules-centered-stack .custom-text,
.home-modules-centered-stack .block-cms,
.home-modules-centered-stack .cms-block,
.home-modules-centered-stack #banner,
.home-modules-centered-stack .banner,
.home-modules-centered-stack .promo-banner {
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 64px auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Elegant typography handling within dynamic containers */
.home-modules-centered-stack h1,
.home-modules-centered-stack h2,
.home-modules-centered-stack h3 {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  color: var(--umber) !important;
  line-height: 1.2 !important;
  margin: 0 auto 16px auto !important;
  text-align: center !important;
}

.home-modules-centered-stack p,
.home-modules-centered-stack span {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.95rem !important;
  color: var(--umber-light) !important;
  line-height: 1.75 !important;
  max-width: 580px !important;
  display: inline-block !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* ==========================================================================
   8. ANIMATIONS & RESPONSIVE LAYOUT
   ========================================================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .hero-section-canvas { padding: 120px 24px 60px !important; }
  nav { padding-left: 24px; padding-right: 24px; }
}

/* ==========================================================================
   HEADER REFINEMENT: NAVIGATION LINKS & SELECTOR TYPOGRAPHY
   ========================================================================== */

/* Fix font style, eliminate heavy weight, and harmonize typography */
.header-top, 
#header,
.menu,
#top-menu,
.top-menu,
.nav-links a,
.login-btn,
.user-info a,
.language-selector a,
.currency-selector a {
  font-family: 'Jost', sans-serif !important;
  font-weight: 300 !important;              /* Soft, elegant light font weight */
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.15em !important;
  color: var(--umber-light) !important;
  text-decoration: none !important;
}

/* Hover dynamic state colors for navigation links */
.top-menu a:hover,
.nav-links a:hover,
.login-btn:hover,
.user-info a:hover {
  color: var(--terracotta) !important;
}

/* Ensure the central main logo stays locked to Cormorant Garamond */
.nav-logo, 
#header .logo,
.site-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.08em !important;
  color: var(--umber) !important;
}

/* Correcting formatting weights for mid-page category switcher tabs */
.cat-tab {
  font-weight: 300 !important;
}

.cat-tab .cat-name {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400 !important; /* Elegant weight matching logo thickness proportions */
}

/* ==========================================================================
   NATIVE HEADER COMPONENT ALIGNMENT & CLEANUP
   ========================================================================== */
#header {
  background: rgba(245, 239, 228, 0.95) !important;
  border-bottom: 1px solid rgba(46, 31, 14, 0.1);
  width: 100%;
}

.header-nav {
  background: rgba(46, 31, 14, 0.03) !important;
  border-bottom: 1px solid rgba(46, 31, 14, 0.05);
  padding: 6px 24px !important;
}

.header-top {
  padding: 20px 24px !important;
}

/* Force the navigation blocks to lay out gracefully in a single line */
.header-nav .float-xs-left,
.header-nav .float-xs-right,
.user-info,
.language-selector-wrapper,
.language-selector {
  display: inline-flex !important;
  align-items: center;
  gap: 16px;
}

/* Clean up select lists or dropdown carets to match your aesthetic */
.language-selector select,
.currency-selector select {
  background: transparent !important;
  border: none !important;
  color: var(--umber-light) !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 300 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em;
  cursor: pointer;
}

/* ==========================================================================
   UNMASKED HEADER FLEX CONTAINER LAYOUT
   ========================================================================== */
.bespoke-gallery-header {
  background: rgba(245, 239, 228, 0.98) !important;
  border-bottom: 1px solid rgba(46, 31, 14, 0.1) !important;
  width: 100% !important;
  display: block !important;
  position: relative !important;
  z-index: 999 !important;
}

/* Utility Bar Layout Fix */
.top-utility-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 48px !important;
  background: rgba(46, 31, 14, 0.03) !important;
  border-bottom: 1px solid rgba(46, 31, 14, 0.05) !important;
}

.utility-left-zone, .utility-right-zone {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

/* Main Navigation Row Layout Fix (No overlapping columns) */
.main-navigation-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 20px 48px !important;
  gap: 32px !important;
  width: 100% !important;
}

/* Absolute branding isolation */
.nav-brand-logo a {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 600 !important;
  font-size: 1.35rem !important;
  letter-spacing: 0.08em !important;
  color: var(--umber) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.nav-brand-logo a span {
  color: var(--terracotta) !important;
}

/* Dynamic container alignment for search + categories tree */
.nav-center-hooks {
  flex-grow: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 40px !important;
}

/* Handle native modules internally to strip floats */
.nav-center-hooks > div,
#_desktop_search_widget,
#_desktop_top_menu {
  display: inline-flex !important;
  align-items: center !important;
  float: none !important;
}

/* Force standard search fields into alignment */
.search-widget form {
  display: flex !important;
  align-items: center !important;
  border: 1px solid rgba(46, 31, 14, 0.15) !important;
  background: transparent !important;
  padding: 4px 12px !important;
}

.search-widget input[type="text"] {
  background: transparent !important;
  border: none !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.8rem !important;
  color: var(--umber) !important;
}

/* ==========================================================================
   NATIVE TOP MENU TYPOGRAPHY CORRECTION
   ========================================================================== */

/* Target PrestaShop's injected menu links directly to crush the bold style */
#header .top-menu a,
#header .top-menu .main-category,
#header .sf-menu a,
#_desktop_top_menu .top-menu a {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400 !important; /* Matches the elegant weight of your logo */
  font-size: 1.1rem !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important; /* Allows natural mixed-case display */
  color: var(--umber) !important;
}

/* Adjust secondary child/sub-menu links if they appear */
#header .top-menu .sub-menu a,
#header .top-menu dropdown-item a {
  font-family: 'Jost', sans-serif !important;
  font-weight: 300 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--umber-light) !important;
}

/* Dynamic color swap when hovering over menu items */
#header .top-menu a:hover {
  color: var(--terracotta) !important;
}

/* ==========================================================================
   BESPOKE GALLERY FOOTER STYLING
   ========================================================================== */
#footer,
.footer-container {
  background-color: var(--umber) !important; /* Rich deep brown */
  color: var(--white) !important;            /* Crisp off-white text */
  padding: 60px 24px 40px 24px !important;
  margin-top: 0 !important;
  border-top: 1px solid rgba(245, 239, 228, 0.1) !important;
}

/* Force all links inside the footer blocks to be clean and legible white */
#footer a,
.footer-container a,
.footer-container .links a,
.footer-container .footer-links a {
  color: rgba(253, 250, 245, 0.8) !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 300 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.05em;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

/* Subtle gold/ochre glow when hovering over footer links */
#footer a:hover,
.footer-container a:hover {
  color: var(--ochre) !important;
}

/* Format block headers (e.g., "Our Company", "Products") to stand out elegantly */
#footer h1, #footer h2, #footer h3, #footer h4,
#footer .h1, #footer .h2, #footer .h3, #footer .h4,
#footer .block-title,
.footer-container .title,
.footer-container h3 {
  font-family: 'Cormorant Garamond', serif !important;
  color: var(--white) !important;
  font-weight: 400 !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
  margin-bottom: 20px !important;
  border: none !important;
}

/* Clean up input fields if a newsletter module is present in your footer */
#footer input[type="email"],
#footer .block_newsletter input[type="text"] {
  background: rgba(253, 250, 245, 0.08) !important;
  border: 1px solid rgba(253, 250, 245, 0.2) !important;
  color: var(--white) !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 300;
}

#footer input[type="submit"],
#footer .block_newsletter button {
  background: var(--ochre) !important;
  color: var(--umber) !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 400;
  text-transform: uppercase;
}

/* Bottom legal text / copyright bar refinement */
#footer .footer-after,
.footer-container .copyright,
.footer-container .after-footer {
  margin-top: 40px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(253, 250, 245, 0.1) !important;
  font-size: 0.75rem !important;
  color: rgba(253, 250, 245, 0.5) !important;
  text-align: center;
}

/* ==========================================================================
   HOMEPAGE PRODUCT GRID & MINIATURE CARDS (GALLERY LOOK)
   ========================================================================== */

/* 1. Force the 4-Column Minimal Grid */
#content .products, 
.featured-products .products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
}

/* 2. Style the Individual Card Container */
.featured-products article.product-miniature {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}

/* 3. The 3:4 Image Frame Wrapper */
.featured-products .thumbnail-container {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  background: var(--linen-dark) !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  border: none !important;
}

/* Image zoom transition on hover */
.featured-products .thumbnail-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s ease !important;
}

.featured-products article.product-miniature:hover .thumbnail-container img {
  transform: scale(1.04) !important;
}

/* 4. Typography & Meta Layout */
.featured-products .product-description {
  padding: 0 !important;
  text-align: left !important;
}

/* Category/Tag line */
.featured-products .product-category-name {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--terracotta) !important;
  margin-bottom: 6px !important;
  display: block;
}

/* Product Title */
.featured-products .product-title a {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  color: var(--umber) !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  margin-bottom: 4px !important;
  display: block;
}

/* Custom Subtitle / Provenance Line */
.featured-products .product-provenance {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.78rem !important;
  color: var(--umber-light) !important;
  margin-bottom: 10px !important;
}

/* Price Alignment */
.featured-products .product-price-and-shipping {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: var(--umber) !important;
  letter-spacing: 0.03em !important;
}

/* Responsive Handling */
@media (max-width: 900px) {
  #content .products, .featured-products .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* -- THEME DESIGN TOKENS -- */
:root {
  --terracotta: #C4673A;
  --ochre: #D4A847;
  --linen: #F5EFE4;
  --linen-dark: #EDE4D3;
  --umber: #2E1F0E;
  --umber-light: #5a3e28;
  --white: #FDFAF5;
}

/* -- FORCING THE 4-COLUMN PRODUCT GRID -- */
.products, .product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
}

@media (max-width: 900px) {
  .products, .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* -- CUSTOM MINIMALIST CARDS -- */
.product-card {
  cursor: pointer;
  text-align: left;
}

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

.product-img {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--linen-dark);
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}

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

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

.product-overlay {
  position: absolute;
  inset: 0;
  background: rgba(46,31,14,0.0);
  display: flex;
  align-items: flex-end;
  padding: 20px;
  transition: background 0.3s;
}

.product-card:hover .product-overlay {
  background: rgba(46,31,14,0.2);
}

.product-quick {
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.3s;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--linen);
  border: 1px solid rgba(245,239,228,0.6);
  padding: 8px 16px;
  background: rgba(46,31,14,0.5);
  display: inline-block;
}

.product-card:hover .product-quick {
  opacity: 1;
  transform: translateY(0);
}

.product-tag {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 6px;
  font-family: 'Jost', sans-serif;
}

.product-name, .product-name a {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  color: var(--umber) !important;
  margin-bottom: 4px;
  line-height: 1.3;
}

.product-origin {
  font-size: 0.78rem;
  color: var(--umber-light);
  margin-bottom: 10px;
  font-family: 'Jost', sans-serif;
}

.product-price {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--umber);
  letter-spacing: 0.03em;
  font-family: 'Jost', sans-serif;
}

/* -----------------------------------------------------------
   SHYU GALLERY — PREMIUM PRODUCT GRID OVERRIDES
   ----------------------------------------------------------- */

/* 1. Clear default section headers */
.featured-products .products-section-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #2E1F0E !important;
  text-align: left !important;
  margin-bottom: 35px !important;
  border: none !important;
}

/* 2. Set full-width flex layout for the row container */
.featured-products .products.row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: -14px !important;
  margin-right: -14px !important;
}

/* 3. Force clean 4-column cards (no borders or card shadows) */
.featured-products .products.row .product-card.product-miniature {
  flex: 0 0 25% !important;
  max-width: 25% !important;
  width: 25% !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  margin: 0 0 40px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  box-sizing: border-box !important;
}

/* 4. Force elegant portrait 3:4 aspect ratio containers */
.product-card .product-img {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  background: #EDE4D3 !important; /* Elegant dark-linen fallback */
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  border: none !important;
}

/* 5. Strip out default PrestaShop thumbnail wrappers */
.product-card .product-img a.product-thumbnail {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 6. Stretch product images full bleed with cover logic */
.product-card .product-img a.product-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block !important;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Subtle image scale effect on card hover */
.product-card:hover .product-img a.product-thumbnail img {
  transform: scale(1.04) !important;
}

/* 7. Re-align overlay text elements cleanly */
.product-card .product-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(46, 31, 14, 0) !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 20px !important;
  transition: background 0.4s ease !important;
  pointer-events: none !important;
}

.product-card:hover .product-overlay {
  background: rgba(46, 31, 14, 0.15) !important;
}

.product-card .product-quick {
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: all 0.3s ease !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #F5EFE4 !important;
  border: 1px solid rgba(245, 239, 228, 0.5) !important;
  padding: 8px 16px !important;
  background: rgba(46, 31, 14, 0.6) !important;
  text-decoration: none !important;
  pointer-events: auto !important;
}

.product-card:hover .product-quick {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 8. Text metadata spacing */
.product-card .product-tag {
  font-size: 0.65rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #C4673A !important;
  margin: 12px 0 4px 0 !important;
  font-family: 'Jost', sans-serif !important;
}

.product-card .product-name, 
.product-card .product-name a {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  color: #2E1F0E !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
}

.product-card .product-price {
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: #2E1F0E !important;
  letter-spacing: 0.02em !important;
  font-family: 'Jost', sans-serif !important;
  margin-top: 6px !important;
}

/* 9. Responsive layout logic for mobile viewports */
@media (max-width: 991px) {
  .featured-products .products.row .product-card.product-miniature {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}

@media (max-width: 575px) {
  .featured-products .products.row .product-card.product-miniature {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   TERRES ANCIENNES — FEATURED PRODUCTS SYSTEM OVERRIDE
   Restores total dynamic image visibility & locks elegant layout properties
   ========================================================================== */

/* 1. Global Section Color Palette Variables */
:root {
  --terracotta: #C4673A;
  --ochre: #D4A847;
  --linen: #F5EFE4;
  --linen-dark: #EDE4D3;
  --umber: #2E1F0E;
  --umber-light: #5a3e28;
  --white: #FDFAF5;
}

/* Lock section container colors and padding alignment */
.featured-products, 
#content .featured-products {
  background: var(--linen) !important;
  padding: 64px 48px 80px !important;
}

/* 2. Section Header Border & Text Alignment */
.featured-products .section-header,
.featured-products .products-section-title-wrap {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin-bottom: 40px !important;
  border-bottom: 1px solid rgba(46,31,14,0.1) !important;
  padding-bottom: 16px !important;
  width: 100% !important;
}

.featured-products h2.products-section-title,
.featured-products h2,
.featured-products h1 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.6rem !important;
  font-weight: 300 !important;
  color: var(--umber) !important;
  text-transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.featured-products .all-product-link,
.featured-products .section-link {
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--terracotta) !important;
  text-decoration: none !important;
  transition: opacity 0.2s !important;
  margin: 0 !important;
}
.featured-products .all-product-link:hover { opacity: 0.7 !important; }

/* 3. Pure Grid Layout Override (Safely Bypasses Theme Bootstrap Rows) */
.featured-products .products,
.featured-products .product_list {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: unset !important; /* Disables floating bootstrap flex row breaks */
}

/* Remove legacy clear-fix elements that add blank spaces */
.featured-products .products::before,
.featured-products .products::after {
  display: none !important;
}

/* 4. Individual Product Card Setup */
.featured-products article.product-miniature,
.featured-products .product-miniature {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;         /* Force items back to visible if stuck in an animation loop */
  visibility: visible !important;
  transform: none !important;
}

/* 5. Product Image Container Frame (Locks the precise 3:4 Silhouette) */
.featured-products .product-thumbnail,
.featured-products .thumbnail-container,
.featured-products .product-image-container,
.featured-products .thumbnail {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 3/4 !important; /* Elegant vertical aspect ratio */
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  background: var(--linen-dark) !important;
  height: auto !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* 6. Live Dynamic Image Engine Controls (Restores Missing Images) */
.featured-products .product-thumbnail img,
.featured-products .thumbnail-container img,
.featured-products .product-image-container img,
.featured-products .thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;  /* Fills the 3:4 grid cleanly without clipping or stretching */
  display: block !important;
  opacity: 1 !important;         /* Explicitly breaks opacity suppression bugs */
  visibility: visible !important;
  transition: transform 0.5s ease !important;
  max-width: 100% !important;
  max-height: 100% !important;
  position: static !important;
}

/* Subtle zoom effect on layout card hover */
.featured-products article.product-miniature:hover .product-thumbnail img,
.featured-products article.product-miniature:hover .thumbnail-container img {
  transform: scale(1.04) !important;
}

/* 7. Elegant Quick View Overlay Adaptation */
.featured-products .quick-view,
.featured-products .product-miniature .quick-view {
  position: absolute !important;
  left: 50% !important;
  bottom: 20px !important;
  transform: translate(-50%, 8px) !important;
  opacity: 0 !important;
  transition: all 0.3s ease !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--white) !important;
  border: 1px solid rgba(245,239,228,0.6) !important;
  padding: 8px 16px !important;
  background: rgba(46,31,14,0.7) !important;
  text-decoration: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  z-index: 5 !important;
}

.featured-products article.product-miniature:hover .quick-view {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

/* 8. Minimalist Fine Typography Overrides */

/* Category Labels & Decorative Meta Details */
.featured-products .product-miniature .category-name,
.featured-products .product-miniature .product-category-name,
.featured-products .product-miniature .brand,
.featured-products .product-miniature .product-tag {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--terracotta) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Core Product Title Link Mapping */
.featured-products .product-title,
.featured-products .product-title a,
.featured-products .product-miniature h3,
.featured-products .product-miniature h3 a {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  color: var(--umber) !important;
  text-decoration: none !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
  display: block !important;
  text-transform: none !important;
}

/* Origin / Secondary details line styling */
.featured-products .product-description-short,
.featured-products .product-miniature .reference,
.featured-products .product-origin {
  font-size: 0.78rem !important;
  color: var(--umber-light) !important;
  margin-bottom: 10px !important;
  font-weight: 300 !important;
}

/* Price Details Format Formatting */
.featured-products .product-price,
.featured-products .price,
.featured-products .product-price-and-shipping .price {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: var(--umber) !important;
  letter-spacing: 0.03em !important;
  display: inline-block !important;
  margin: 0 !important;
}

/* Hide standard distracting badges (like sales/discounts) for an art gallery look */
.featured-products .product-flags {
  display: none !important;
}

/* 9. Responsive Mobile Clean Up (Handles tablet/phone viewports flawlessly) */
@media (max-width: 900px) {
  .featured-products .products,
  .featured-products .product_list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .featured-products {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ==========================================================================
   TERRES ANCIENNES — FEATURED PRODUCTS & GRID LAYOUT
   ========================================================================== */

/* 1. Force the product container into a beautiful wide 4-column grid */
.featured-products .products, 
#content .products,
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Responsive grid adjustments */
@media (max-width: 991px) {
  .featured-products .products, #content .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}
@media (max-width: 575px) {
  .featured-products .products, #content .products {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* 2. Reset the narrow box limits on the product items */
.featured-products .products .product-miniature,
#content .products .product-miniature {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 3. Turn the thumbnail container into an elegant 3:4 portrait crop box */
.featured-products .thumbnail-container,
.product-miniature .thumbnail-container {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important; /* Perfect portrait orientation */
  position: relative !important;
  overflow: hidden !important;
  background: #EDE4D3 !important; /* Elegant dark linen fallback */
  margin-bottom: 16px !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Ensure link wrapper fills the image container */
.featured-products .product-thumbnail,
.product-miniature .product-thumbnail {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 4. Make the small image expand to fill the entire 3:4 space */
.featured-products .thumbnail-container img,
.product-miniature .thumbnail-container img,
.product-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* Crops perfectly to full size without distorting */
  object-position: center !important;  /* Centers the ritual objects inside the frame */
  max-width: 100% !important;
  max-height: 100% !important;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Smooth zoom effect on hover from the original mockup */
.product-miniature:hover .thumbnail-container img {
  transform: scale(1.04) !important;
}

/* 5. Clean up descriptions and typography alignment */
.product-miniature .product-description {
  padding: 0 !important;
  height: auto !important;
  background: transparent !important;
  text-align: left !important;
  width: 100% !important;
}

/* Harmonize product titles with Cormorant Garamond */
.product-miniature .product-title,
.product-miniature .product-name,
.product-miniature .h3.product-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  color: #2E1F0E !important; /* Elegant deep umber color */
  margin: 6px 0 4px 0 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}

.product-miniature .product-title a,
.product-miniature .product-name a {
  color: #2E1F0E !important;
  text-decoration: none !important;
}

/* Pricing layout */
.product-miniature .product-price-and-shipping,
.product-miniature .product-price {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: #2E1F0E !important;
  letter-spacing: 0.03em !important;
  margin-top: 4px !important;
  padding: 0 !important;
}

/* Hide unneeded clutter borders and badges if theme duplicates them */
.product-miniature .variant-links {
  display: none !important;
}

/* Typography styling for the 3rd line (Provenance) */
.product-miniature .product-origin,
.product-origin {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 300 !important;
  color: #5a3e28 !important; /* Elegant light umber */
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  margin-top: 2px !important;
  margin-bottom: 8px !important;
  display: block !important;
  line-height: 1.3 !important;
}

/* Typography styling for the 3rd line (Provenance) */
.product-miniature .product-origin,
.product-origin {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 300 !important;
  color: #5a3e28 !important; /* Elegant light umber */
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  margin-top: 2px !important;
  margin-bottom: 8px !important;
  display: block !important;
  line-height: 1.3 !important;
}

.product-provenance {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  color: #5a3e28 !important; /* Elegant light umber */
  font-size: 0.85rem !important;
  margin-top: 2px !important;
  margin-bottom: 6px !important;
  min-height: 18px; /* Reserves empty vertical space for items missing a provenance string */
  display: block !important;
}

/* --- 1) ADJUST LANGUAGE SELECTOR FONT SIZE --- */
/* Targets the language selector display text to match Cart and Sign-In buttons */
.language-selector-wrapper span,
.language-selector-wrapper a,
.language-selector .expand-more,
#_desktop_language_selector .userInfo-block a {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.81rem !important; /* Standard theme size for header utility icons/text */
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Fixes alignment of the tiny drop-down arrow next to the language if it looks squished */
.language-selector-wrapper i.material-icons,
#_desktop_language_selector i.expand-more {
  font-size: 1rem !important;
  vertical-align: middle !important;
}

/* Hide the strange arrow icon next to the language text */
.language-selector-wrapper i.material-icons,
.language-selector-wrapper .expand-more i,
#_desktop_language_selector i.expand-more,
#_desktop_language_selector .material-icons {
  display: none !important;
}

/* Ensure the text is perfectly centered now that the icon is gone */
.language-selector-wrapper .dropdown-toggle,
#_desktop_language_selector .userInfo-block a {
  padding-right: 0 !important;
}

/* Style the navigation dots */
.nav-dot {
  font-size: 1.5rem !important;      /* Makes the dot larger */
  line-height: 1 !important;         /* Keeps it tight to the text */
  margin: 0 10px !important;         /* Adds space around the dot */
  vertical-align: middle !important; /* Keeps it perfectly centered between words */
  color: #5a3e28 !important;         /* Matches your umber/brown accent color */
  display: inline-block !important;
}

/* Force the button to stack elements vertically using Flexbox */
button.cat-tab {
  display: inline-flex !important;
  flex-direction: column !important; /* THIS IS THE FIX: Stacks them vertically */
  align-items: center !important;    /* Centers them horizontally */
  justify-content: center !important;
  text-align: center !important;     /* Ensures text behaves nicely */
}

/* Style the dot to be large and perfectly spaced */
button.cat-tab .nav-dot {
  font-size: 22px !important;
  margin: 0 10px !important;
  line-height: 1 !important;
  color: #5a3e28 !important;
  display: inline-block !important; 
  vertical-align: middle !important;
  /* We remove the transform to let Flexbox handle the centering naturally */
}

/* --- SCOPED NAVIGATION BOXES --- */
#bespoke-nav-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px auto;
    width: 100%;
    flex-wrap: wrap;
}

#bespoke-nav-wrapper .nav-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    padding: 20px 30px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #333;
    border-radius: 5px;
    min-width: 220px;
    transition: background 0.3s ease;
}

#bespoke-nav-wrapper .nav-box:hover {
    background-color: #f9f9f9;
    text-decoration: none;
}

#bespoke-nav-wrapper .cat-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: #2E1F0E;
    display: block;
}

/* --- ALIGNED SUBTITLE & DOTS --- */
#bespoke-nav-wrapper .cat-subtitle {
    display: flex !important;           /* This is the key to centering */
    align-items: center !important;     /* This aligns the dots vertically */
    justify-content: center !important;
    gap: 8px !important;                /* Space between words and dots */
    font-size: 0.85rem !important;
    color: #666 !important;             /* Your color choice */
    line-height: 1 !important;
}

#bespoke-nav-wrapper .nav-dot {
    font-size: 18px !important;
    line-height: 1 !important;
    display: block !important;
}

/* --- FULL WIDTH NAVIGATION BAR --- */
#bespoke-nav-wrapper {
    display: flex !important;
    width: 100% !important;        /* Force full container width */
    margin: 0 !important;          /* Remove centered margins */
    padding: 0 !important;
    border-bottom: 1px solid rgba(46,31,14,0.12) !important;
}

#bespoke-nav-wrapper .nav-box {
    flex: 1 !important;            /* Forces boxes to share width equally */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 25px 20px !important; 
    border: none !important;       /* Removed borders for a cleaner bar look */
    border-right: 1px solid rgba(46,31,14,0.1) !important; /* Divider line */
    background-color: #EDE4D3 !important; 
    color: #2E1F0E !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* Remove the border from the last box so it doesn't look odd */
#bespoke-nav-wrapper .nav-box:last-child {
    border-right: none !important;
}

#bespoke-nav-wrapper .nav-box:hover {
    background-color: #D4A847 !important; /* Keeps your hover effect */
    color: #FDFAF5 !important;
    text-decoration: none !important;
}

#bespoke-nav-wrapper .cat-name {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.5rem !important; /* Adjusted for better scale */
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    display: block !important;
}

/* --- PRECISE VERTICAL ALIGNMENT --- */
/* --- ABSOLUTE VERTICAL CENTERING --- */
/* --- FIXED NAVIGATION ALIGNMENT --- */
#bespoke-nav-wrapper .cat-subtitle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    color: #666 !important;
    line-height: 1 !important;
    margin-top: 5px !important; /* Slight space below the main title */
}

#bespoke-nav-wrapper .nav-dot {
    font-size: 18px !important;
    display: inline-block !important;
    /* Using the -4px margin fix to nudge the dot upwards */
    margin: -4px 8px 0 8px !important; 
    line-height: 1 !important;
}

/* --- GLOBAL HEADER FIX FOR INTERNAL PAGES (EXCLUDES HOMEPAGE) --- */

/* 1. Match the background color and border on all internal pages */
body:not(.page-index) #header,
body:not(.page-index) .bespoke-gallery-header {
    background-color: #F5EFE4 !important;
    border-bottom: 1px solid rgba(46, 31, 14, 0.1) !important;
    display: block !important;
}

/* 2. Fix the top utility bar layout (Contact, Language, Login, Cart alignment) */
body:not(.page-index) .top-utility-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: transparent !important;
    padding: 10px 20px !important;
}

body:not(.page-index) .utility-right-zone {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

/* Force login, language, and cart links to be visible and horizontal */
body:not(.page-index) #_desktop_user_info,
body:not(.page-index) #_desktop_cart,
body:not(.page-index) #_desktop_language_selector {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 3. Fix the main navigation layout (Logo on left, Hooks on right) */
body:not(.page-index) .main-navigation-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 20px !important;
    background-color: transparent !important;
}

body:not(.page-index) .nav-center-hooks {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 30px !important;
    flex-grow: 1 !important;
}

/* 4. Force the Category menu items to sit inline (horizontal row) instead of stacking */
body:not(.page-index) ul.top-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 25px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body:not(.page-index) ul.top-menu li {
    display: inline-block !important;
}

/* 5. Fix and align the corrupt search box container */
body:not(.page-index) #search_widget {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

body:not(.page-index) #search_widget form {
    display: flex !important;
    align-items: center !important;
}

/* 6. Hide default old menu text links ("Home Collections About Contact") */
body:not(.page-index) .nav.links,
body:not(.page-index) ul.links {
    display: none !important;
}

/* 7. Unify text fonts and colors for all non-homepage header links */
body:not(.page-index) .bespoke-gallery-header *,
body:not(.page-index) .bespoke-gallery-header a {
    color: #2E1F0E !important;
    font-family: 'Cormorant Garamond', serif !important;
}

/* FIXING THE BODY IN CATEGORY PAGE*/

/* ==========================================
   CATEGORY PAGE COMPREHENSIVE RE-ENGINEERING
   ========================================== */
/* 1. Complete Removal of Left/Right Sidebars */
body#category #left-column,
body#category .sidebar,
body#category #search_filters_wrapper,
body#category .block-categories {
  display: none !important;
  width: 0 !important;
}

/* 2. Force central area to 100% width */
body#category #content-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 15px !important;
}

/* 3. Drop the page-wide white title banner card */
body#category .block-category,
body#category #js-product-list-header,
body#category .category-cover {
  display: none !important;
}

/* 4. Build Minimalist Gallery Grid (4 columns) */
body#category #js-product-list .products,
body#category .products-grid .row,
body#category #products .products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 40px 30px !important;
}

body#category .products .product-miniature,
body#category .products article,
body#category .products .product-miniature-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 5. Precision Balance Alignment */
body#category .product-miniature {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

body#category .product-miniature .thumbnail-container {
  width: 100% !important;
  margin-bottom: 18px !important;
}

body#category .product-miniature img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 767px) {
  body#category #js-product-list .products,
  body#category .products-grid .row,
  body#category #products .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px 15px !important;
  }
}

/* =======================================================
   SHYU GALLERY GLOBAL DRAGNET OVERRIDE (FORCED CSS)
   ======================================================= */

/* 1. Global Page Grid Adjustments (Hide sidebar on Category views safely) */
body[id*="category"] #left-column,
body[id*="category"] [class*="sidebar"],
body.category #left-column {
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0% !important;
}

body[id*="category"] #content-wrapper,
body.category #content-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

.showing, #js-product-list-bottom, .pagination {
  display: none !important;
}

/* Force Clean 4-Column Grid Symmetry on both views */
.products, .product_list, #js-product-list .products, [class*="product_list"] {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 50px 30px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Strip native theme card outlines and default beige backgrounds */
.product-miniature, article.product-miniature, [class*="product-description-and-image"], .product-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 2. THE CHAMELEON IMAGE FRAME WRAPPER MATRIX */
.product-miniature .thumbnail-container,
.product-miniature .product-thumbnail,
.product-miniature [class*="thumbnail"],
.product-miniature [class*="image-wrapper"],
article .thumbnail-container,
article .product-thumbnail,
.product-container .left-block,
[class*="product-image-container"] {
  width: 100% !important;
  max-width: 270px !important;
  height: 360px !important;
  background-color: #4b2e1e !important; /* Premium Museum Brown */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22) !important; /* Luxury Soft Shadow */
  border-radius: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 20px !important;
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Category View inner margins */
body[id*="category"] .product-miniature .thumbnail-container,
body[id*="category"] .product-miniature .product-thumbnail,
body.category [class*="image-container"],
body.category .left-block {
  padding: 12px !important;
}

/* Homepage View inner margins */
body#index .product-miniature .thumbnail-container,
body#index .product-miniature .product-thumbnail,
body#index [class*="image-container"] {
  padding: 15px !important;
}

/* 3. RADICAL ARTWORK PRESENTATION & IMAGE STRETCH SYSTEM */
.product-miniature img, 
.product-miniature [class*="thumbnail"] img, 
.product-miniature [class*="image"] img,
.product-container img,
[class*="product-image-container"] img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important; /* Locks artwork from stretching or distorting */
  display: block !important;
  margin: 0 auto !important;
  background: transparent !important; 
}

/* 4. SHIELD AGAINST HOVER OVERLAYS OR HIDDEN LAYERS */
.product-miniature .thumbnail-container:hover,
.product-miniature .product-thumbnail:hover,
.product-miniature:hover [class*="thumbnail"] {
  background-color: #4b2e1e !important; 
}

.product-miniature [class*="mask"], 
.product-miniature [class*="overlay"], 
.product-miniature .highlighted-informations,
.product-miniature [class*="thumbnail"]::before,
.product-miniature [class*="thumbnail"]::after,
.quick-view, .quick-view-wrapper {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Responsive adjustments for phones & tablets */
@media (max-width: 767px) {
  .products, .product_list, #js-product-list .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px 15px !important;
  }
  .product-miniature .thumbnail-container,
  .product-miniature .product-thumbnail,
  .product-miniature [class*="thumbnail"],
  .left-block {
    height: 240px !important;
  }
}

/* 1. TARGET THE CUSTOM CONTAINER FOUND ON YOUR SITE */
.product-img, 
.product-thumbnail {
    background-color: #4b2e1e !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22) !important;
    border: none !important;
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 270px !important;    /* Forces your desired width */
    height: 360px !important;   /* Forces your desired height */
    margin: 0 auto 20px !important;
    overflow: hidden !important;
}

/* 2. FORCE THE IMAGE TO FIT INSIDE */
.product-img img, 
.product-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    margin: 0 !important;
}

/* 3. DESTROY THE OVERLAY THAT WAS BLOCKING YOUR ART */
.product-overlay {
    display: none !important;
}

/* 1. TARGET THE CUSTOM CONTAINER - KEEPING THE BROWN BOXES */
.product-img, 
.product-thumbnail {
    background-color: #4b2e1e !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22) !important;
    border: none !important;
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;     /* Changed to 100% to fit your grid */
    max-width: 270px !important;
    height: 360px !important;
    margin: 0 auto 20px !important;
    overflow: hidden !important;
    position: relative !important;
}

/* 2. FORCE THE IMAGE TO FILL THE BOX COMPLETELY AND CENTER */
.product-img img, 
.product-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* This keeps the full art visible without cropping */
    display: block !important;
    margin: auto !important; /* Forces centering */
}

/* 3. DESTROY THE OVERLAY */
.product-overlay {
    display: none !important;
}


/* ==========================================================================
   5. REFINED MODAL THUMBNAIL STYLING (LARGE SIZE & TIGHT SPACING)
   ========================================================================= */

/* STEP 1: Unshackle all parent wrappers and strip the grid constraints */
/* RESET: Restoring global layout boundaries */
#product-modal .images-container,
#product-modal .product-images,
.product-images-modal .modal-body {
    /* Removing the forced auto height and visible overflow that impacts the site */
    height: initial !important;
    max-height: initial !important;
    overflow: hidden !important; 
}
/* STEP 2: Use a simple, tight block wrapper instead of a loose grid */
#product-modal .js-modal-images,
#product-modal .js-modal-product-images,
#product-modal #thumbnails,
.product-images-modal .js-modal-images,
.product-images-modal .product-images {
    display: block !important;
    text-align: center !important;
}

/* STEP 3: Physically enlarge the thumbnail boxes and force tight vertical margins */
#product-modal .thumb-container,
#product-modal .js-modal-thumb,
#product-modal .product-thumbnail,
.product-images-modal .thumb-container {
    display: inline-block !important;
    width: 160px !important;            /* Physically large box width */
    height: 160px !important;           /* Physically large box height */
    margin-top: 0px !important;
    margin-bottom: 8px !important;      /* Tightly controls the space between items */
    padding: 0 !important;             
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;           
    box-shadow: none !important;       
}

/* STEP 4: Force the raw image files to fill the large 160px boundaries */
#product-modal .thumb-container img,
#product-modal .js-modal-thumb img,
#product-modal .product-thumbnail img,
.product-images-modal .thumb-container img {
    display: block !important;
    width: 100% !important;            
    height: 100% !important;           
    object-fit: contain !important;     /* Keeps the image whole and fully visible */
    border: none !important;           
    box-shadow: none !important;
    padding: 0 !important;
    background-color: transparent !important;
    background: transparent !important;
}

/* Premium active state indicator */
#product-modal .thumb-container.selected img,
#product-modal .js-modal-thumb.active img,
#product-modal .product-thumbnail.active img,
#product-modal .thumb-container:hover img {
    border: 1px solid #1a1a1a !important; 
}


/* ==========================================================================
   6. HIDE SHORT DESCRIPTION INSIDE THE MAGNIFIED POPUP
   ========================================================================= */

/* Completely removes description text/blocks from the magnification modal */
#product-modal .product-information,
#product-modal .product-description,
#product-modal #product-description-short,
#product-modal .product-short-description,
.product-images-modal .modal-body p,
.product-images-modal .modal-body ul {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================================
   7. REMOVE WHITE BORDER AROUND MAIN MAGNIFIED IMAGE
   ========================================================================= */

/* Strip background colors, borders, and padding from the main image frame */
#product-modal .modal-content,
#product-modal .modal-body,
#product-modal .product-cover-modal,
#product-modal .modal-body figure,
.product-images-modal .modal-content {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Ensure the main magnified image itself has no forced borders or padding */
#product-modal .js-modal-product-cover,
#product-modal .fullwidth,
#product-modal .modal-body img {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
}


/* ==========================================================================
   8. ULTIMATE BOTTOM BORDER & SHADOW REMOVAL
   ========================================================================= */

/* Remove any remaining bottom borders, shadows, or lines below the image frame */
#product-modal .modal-dialog,
#product-modal .modal-content,
#product-modal .modal-body,
#product-modal .product-cover-modal,
#product-modal .images-container,
.product-images-modal .modal-content {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Clear any template dividers or horizontal rules slipping under the main image */
#product-modal hr,
#product-modal .divider,
#product-modal .modal-body figure::after {
    display: none !important;
    content: none !important;
    border: none !important;
}


/* ==========================================================================
   FOOTER ANCHORING FIX
   ========================================================================== */
#wrapper {
    min-height: 80vh; /* Ensures the page is at least 80% of the screen height */
    padding-bottom: 50px;
}


/* ==========================================================================
   KILL PRODUCT BOXES (HOMEPAGE/CATEGORY)
   ========================================================================== */
.product-miniature,
.js-product-miniature,
.product-container,
.featured-products .product-miniature {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ==========================================================================
   REMOVE PRODUCT MINIATURE BOXES (GLOBAL)
   ========================================================================== */
.product-miniature, 
.js-product-miniature,
.product-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ==========================================================================
   LINEN OVERRIDE: FORCE COLOR EVERYWHERE
   ========================================================================== */

/* Target core structure, page containers, and common module backgrounds */
body, 
#wrapper, 
#page, 
main, 
header, 
footer, 
.container, 
.wrapper, 
.page-content, 
.card, 
.block,
.product-miniature,
.js-product-miniature {
    background-color: var(--linen) !important;
}

/* Ensure specific PrestaShop panels/areas don't revert to white */
#header, 
#footer, 
.footer-container, 
.header-container {
    background-color: var(--linen) !important;
}

/* ==========================================================================
   FOOTER: AGGRESSIVE CLEANUP (BROWN BG / WHITE TEXT)
   ========================================================================== */

/* 1. Force the main container to be brown */
#footer, 
.footer-container,
#footer-wrapper {
    background-color: var(--umber) !important;
    color: var(--white) !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Force EVERY single element inside to be white, remove borders and background boxes */
#footer *, 
.footer-container *,
#footer-wrapper * {
    color: var(--white) !important;
    background-color: transparent !important; /* Kill the white box */
    border: none !important;                 /* Kill the line/border */
    box-shadow: none !important;
}

/* 3. Specifically fix links */
#footer a, 
.footer-container a,
#footer-wrapper a {
    color: var(--white) !important;
    text-decoration: none !important;
}


/* ABSOLUTE OVERRIDE: FORCE REMOVAL OF ALL HEADERS BORDERS */
body:not(.page-index) #header .header-nav,
body:not(.page-index) #header .top-bar-flex-container,
body:not(.page-index) #header .header-nav .container {
    border: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-image: none !important;
    background: none !important;
}

/* ==========================================================================
   LANGUAGE DROPDOWN POSITIONING FIX (INNER PAGES)
   ========================================================================== */
body:not(.page-index) #_desktop_language_selector,
body:not(.page-index) .language-selector-wrapper,
body:not(.page-index) .language-selector,
body:not(.page-index) .js-dropdown {
    position: relative !important; /* Forces the inner-page header to act as a positioning anchor */
}

body:not(.page-index) .language-selector .dropdown-menu,
body:not(.page-index) #_desktop_language_selector .dropdown-menu {
    top: 100% !important;      /* Places the dropdown directly underneath the selector button */
    left: 0 !important;         /* Aligns it perfectly flush with the left edge of the button */
    right: auto !important;
    transform: none !important; /* Prevents theme JavaScript from miscalculating its offsets */
}

/* ==========================================================================
   LANGUAGE DROPDOWN TEXT ALIGNMENT & PADDING FIX
   ========================================================================== */
/* 2. Style the actual text links inside the dropdown - Updated for size and tighter spacing */
body:not(.page-index) .language-selector .dropdown-menu a,
body:not(.page-index) .language-selector .dropdown-menu .dropdown-item,
body:not(.page-index) .language-selector .dropdown-menu li {
    font-size: 14px !important;    /* Makes the text larger and easier to read */
    padding: 4px 16px !important;  /* Reduced from 8px to 4px to tighten the gap between options */
    text-align: center !important; /* Keeps the text beautifully centered */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;   /* Ensures clean text proportions */
}


/* ==========================================================================
   AUTHENTICATION PAGE (CONNECTEZ-VOUS) PREMIUM OVERHAUL
   ========================================================================== */

/* 1. Center the entire login container and give it a clean background */
.page-authentication #content {
    background: #ffffff;
    max-width: 550px;
    margin: 60px auto !important;
    padding: 40px 50px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #eaeaea;
    border-radius: 0px; /* Sharp corners for a modern, high-end gallery feel */
}

/* 2. Style the Page Title */
.page-authentication h1 {
    font-size: 26px !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 40px !important;
    color: #111111;
}

/* 3. Modernize the Input Form Fields */
.page-authentication .form-control {
    background: #fafafa !important;
    border: 1px solid #ddd !important;
    border-radius: 0px !important;
    padding: 12px 15px !important;
    font-size: 15px !important;
    transition: all 0.3s ease;
}

/* Focus state for input fields */
.page-authentication .form-control:focus {
    background: #ffffff !important;
    border-color: #111111 !important; /* Elegant black focus accent */
    outline: none !important;
    box-shadow: none !important;
}

/* 4. Elegant Primary Action Button */
.page-authentication #login-form button[data-link-action="sign-in"],
.page-authentication .create-account a {
    width: 100% !important;
    background: #111111 !important; /* Solid dark luxury tone */
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
    padding: 14px !important;
    border: none !important;
    transition: background 0.3s ease !important;
}

.page-authentication #login-form button[data-link-action="sign-in"]:hover {
    background: #333333 !important;
}

/* 5. Refined "No account? Create one here" section */
.page-authentication .no-account {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eeeeee;
}

.page-authentication .no-account a {
    color: #666666;
    text-decoration: underline;
    font-size: 14px;
}
.page-authentication .no-account a:hover {
    color: #111111;
}


/* ==========================================================================
   AUTHENTICATION PAGE (CONNECTEZ-VOUS) COMPACT & STACKED DESIGN
   ========================================================================== */

/* 1. Shrink vertical margins/paddings to bring everything "above the fold" */
.page-authentication #content {
    background: #ffffff;
    max-width: 460px; /* Perfectly proportioned width for a clean gallery look */
    margin: 20px auto !important; /* Pulls the entire box up near the header */
    padding: 25px 35px !important; /* Tighter padding to maximize vertical space */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #eaeaea;
    border-radius: 0px;
}

/* 2. Compact the Page Title */
.page-authentication h1 {
    font-size: 20px !important; /* Elegant, downscaled size */
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 20px !important; /* Reduced spacing */
    color: #111111;
}

/* 3. Force Stacked Layout: Smashes PrestaShop grid columns to give inputs 100% width */
.page-authentication .form-group.row {
    display: flex !important;
    flex-direction: column !important; /* Stacks label over the input field */
    align-items: stretch !important;
    margin-bottom: 12px !important; /* Tightens gap between form rows */
}

.page-authentication .col-md-3,
.page-authentication .col-md-6,
.page-authentication .col-md-9,
.page-authentication .js-input-column {
    width: 100% !important;      /* Forces input fields to expand completely */
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;        /* Removes default column padding alignment issues */
    text-align: left !important;
}

/* 4. Refined Micro-Typography for Labels (E-MAIL & MOT DE PASSE) */
.page-authentication .form-control-label {
    font-size: 11px !important;       /* Toned down, premium sizing */
    font-weight: 500 !important;       /* Medium weight, clean and unobtrusive */
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #444444 !important;
    margin-bottom: 4px !important;    /* Small gap above the box */
    padding: 0 !important;
}

/* 5. Expanded, Equalized Input Boxes (Email & Password) */
.page-authentication .form-control,
.page-authentication .input-group {
    width: 100% !important;
    height: 42px !important;          /* Uniform luxurious height for both boxes */
    background: #fafafa !important;
    border: 1px solid #ddd !important;
    border-radius: 0px !important;
    box-sizing: border-box !important;
}
.page-authentication .form-control {
    padding: 10px 12px !important;
    font-size: 14px !important;
}
.page-authentication .input-group .form-control {
    border: none !important;          /* Prevents double border artifacts inside password group */
    height: 100% !important;
}
.page-authentication .form-control:focus,
.page-authentication .input-group.js-parent-focus {
    background: #ffffff !important;
    border-color: #111111 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 6. Centered "Mot de passe oublié ?" link */
.page-authentication .forgot-password {
    margin-top: 6px !important;
    margin-bottom: 20px !important;
    text-align: center !important;    /* Centers the link container */
}
.page-authentication .forgot-password a {
    color: #111111 !important;
    font-size: 13px !important;       
    text-decoration: underline !important;
    display: inline-block !important; /* Ensures perfect alignment centering */
}
/* 7. Full-Width Clean Primary Button */
.page-authentication #login-form button[data-link-action="sign-in"] {
    width: 100% !important;
    background: #111111 !important;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 14px !important;
    padding: 12px !important;
    border: none !important;
    margin-top: 5px !important;
    transition: background 0.2s ease !important;
}
.page-authentication #login-form button[data-link-action="sign-in"]:hover {
    background: #333333 !important;
}

/* 8. High-Visibility "Pas de compte" Action Row (Pulled Upwards) */
.page-authentication .no-account {
    text-align: center;
    margin-top: 18px !important;
    padding-top: 15px !important;
    border-top: 1px solid #eeeeee;
}
.page-authentication .no-account a {
    font-size: 15px !important;       /* Clean layout sizing */
    font-weight: 600 !important;
    color: #111111 !important;
    text-decoration: underline !important;
}
/* ==========================================================================
   CONTACT US PAGE - COMPLETE TRANSPARENCY FIX
   ========================================================================== */

/* 1. Verified Local Font Declaration */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 2. Multi-Tag Title Font Target */
body#contact #main h1,
body#contact #main h2,
body#contact #main h3,
body#contact #main .page-title,
body#contact #main .page-header,
body#contact #main [class*="title"],
body#contact #main h1 span,
body#contact #main h2 span {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 34px !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    text-align: center !important;
    margin-bottom: 40px !important;
    color: #111111 !important;
    background: transparent !important;
}

/* 3. Deep Structural Background Stripping */
body#contact #wrapper,
body#contact #main,
body#contact #content-wrapper,
body#contact #content,
body#contact .card,
body#contact .card-block,
body#contact .page-content,
body#contact #main .container,
body#contact #main .row,
body#contact #content .container,
body#contact #content .row {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 4. Contact Form Box Container - Made Fully Transparent */
body#contact .contact-form,
body#contact #content .contact-form {
    background: transparent !important;
    background-color: transparent !important;
    max-width: 550px !important;
    margin: 0 auto 30px auto !important;
    padding: 20px 10px !important;
    box-shadow: none !important;
    border: none !important;
}

/* 5. Isolated Field Layouts */
body#contact .contact-form .form-group.row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin-bottom: 16px !important;
}
body#contact .contact-form .col-md-3,
body#contact .contact-form .col-md-6,
body#contact .contact-form .col-md-9 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    text-align: left !important;
}

/* 6. Form Typography & Field Styles */
body#contact .form-control-label {
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: #444444 !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
}
body#contact .form-control {
    width: 100% !important;
    height: 42px !important;
    background: #fafafa !important;
    border: 1px solid #ddd !important;
    border-radius: 0px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}
body#contact textarea.form-control {
    height: 140px !important;
    resize: vertical;
}

/* 7. Dropdown Selector Minimal Arrow Icon */
body#contact select.form-control {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 14px !important;
    padding-right: 40px !important;
}

/* 8. Clean Action Button Styles */
body#contact .form-footer {
    background: transparent !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
body#contact .form-footer input[type="submit"],
body#contact .form-footer button,
body#contact input[name="submitMessage"] {
    background: #111111 !important;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px !important;
    font-weight: 500;
    padding: 14px 35px !important;
    border: none !important;
    border-radius: 0px !important;
    cursor: pointer;
}

/* 9. Gallery Info Box - Made Fully Transparent */
body#contact .contact-rich {
    background: transparent !important;
    background-color: transparent !important;
    max-width: 550px !important;
    margin: 0 auto 40px auto !important;
    padding: 20px 10px !important;
    border: none !important;
    box-shadow: none !important;
}
body#contact .contact-rich h4 {
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #111111 !important;
    margin-bottom: 25px !important;
    border-bottom: 1px solid #eeeeee !important;
    padding-bottom: 10px;
}
body#contact .contact-rich .block {
    margin-bottom: 20px !important;
}
body#contact .contact-rich .icon {
    color: #111111 !important;
}

/* ==========================================================================
   CONTACT PAGE - FILE UPLOAD BUTTON BLACK & VERTICAL ALIGNMENT
   ========================================================================== */

/* 1. Native Browser File Selector Buttons (Chrome, Safari, Edge, Firefox) */
body#contact input[type="file"]::file-selector-button {
    background: #111111 !important;
    background-color: #111111 !important;
    color: #ffffff !important;
    border: 1px solid #111111 !important;
    border-radius: 0px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 0 16px !important; /* Cleared vertical padding to let height/line-height align center */
    height: 36px !important;
    line-height: 34px !important; /* Perfectly matches height minus borders */
    font-size: 12px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    transition: background 0.2s ease !important;
}
body#contact input[type="file"]::-webkit-file-upload-button {
    background: #111111 !important;
    background-color: #111111 !important;
    color: #ffffff !important;
    border: 1px solid #111111 !important;
    border-radius: 0px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 0 16px !important;
    height: 36px !important;
    line-height: 34px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}

/* 2. Native Button Hovers */
body#contact input[type="file"]::file-selector-button:hover,
body#contact input[type="file"]::-webkit-file-upload-button:hover {
    background: #333333 !important;
    background-color: #333333 !important;
    border-color: #333333 !important;
}

/* 3. Bootstrap Custom File Input Wrappers */
body#contact .custom-file-label::after {
    background: #111111 !important;
    background-color: #111111 !important;
    color: #ffffff !important;
    border-radius: 0px !important;
    height: 36px !important;
    line-height: 36px !important;
}

/* 4. PrestaShop Theme / jQuery Filestyle Plugin Buttons (Forces strict vertical alignment) */
body#contact .btn-file,
body#contact .group-span-filestyle label,
body#contact .bootstrap-filestyle label,
body#contact .filestyle label {
    background: #111111 !important;
    background-color: #111111 !important;
    color: #ffffff !important;
    border: 1px solid #111111 !important;
    border-radius: 0px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 0 18px !important;
    height: 36px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    
    /* Flexbox Center Locking */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* 5. Plugin Button Hovers */
body#contact .btn-file:hover,
body#contact .group-span-filestyle label:hover,
body#contact .bootstrap-filestyle label:hover,
body#contact .filestyle label:hover {
    background: #333333 !important;
    background-color: #333333 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   PASSWORD RECOVERY PAGE - CLEAN HORIZONTAL ALIGNMENT
   ========================================================================== */

/* 1. Page Title Centering & Typography */
body#password #main h1,
body#password #main h2,
body#password #main .page-header,
body#password #main .page-title,
body#password #main [class*="title"] {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 32px !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    text-align: center !important;
    margin-bottom: 35px !important;
    color: #111111 !important;
    background: transparent !important;
}

/* 2. Explanatory Text Centering */
body#password .password-infos,
body#password #content p,
body#password .forgotten-password p {
    text-align: center !important;
    max-width: 500px !important;
    margin: 0 auto 30px auto !important;
    font-size: 14px !important;
    color: #555555 !important;
    line-height: 1.6 !important;
}

/* 3. Container & Card Transparency (Dissolves any default white blocks) */
body#password #wrapper,
body#password #main,
body#password #content-wrapper,
body#password #content,
body#password .card,
body#password .card-block,
body#password .page-content,
body#password #main .container,
body#password #main .row {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 4. Core Form Wrapper Centering */
body#password form.forgotten-password,
body#password #password-form {
    max-width: 500px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Forces global horizontal centering */
    justify-content: center !important;
    background: transparent !important;
}

/* 5. Input Fields Stack & Layout Adjustments */
body#password .form-group,
body#password form.forgotten-password .form-group {
    width: 100% !important;
    max-width: 400px !important; /* Keeps the input field elegant and contained */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

/* 6. Form Label Alignment */
body#password .form-control-label {
    text-align: center !important; /* Centers the label text above the field */
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: #444444 !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    width: 100% !important;
}

/* 7. Input Field Design */
body#password .form-control {
    width: 100% !important;
    height: 44px !important;
    background: #fafafa !important;
    border: 1px solid #ddd !important;
    border-radius: 0px !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    text-align: center !important; /* Centers the typed email address text */
    box-sizing: border-box !important;
}
body#password .form-control:focus {
    background: #ffffff !important;
    border-color: #111111 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 8. Submit Button Centering & Style */
body#password .form-footer,
body#password form.forgotten-password footer {
    width: 100% !important;
    text-align: center !important;
    background: transparent !important;
    padding: 0 !important;
    margin-top: 10px !important;
}

body#password .form-footer button,
body#password form.forgotten-password button[type="submit"],
body#password #send-reset-link {
    background: #111111 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 14px 40px !important;
    border: none !important;
    border-radius: 0px !important;
    cursor: pointer !important;
    display: inline-block !important;
    transition: background 0.2s ease !important;
}

body#password .form-footer button:hover,
body#password form.forgotten-password button[type="submit"]:hover {
    background: #333333 !important;
}

/* 9. Bottom Return to Login Link */
body#password .page-footer,
body#password .account-link {
    text-align: center !important;
    margin-top: 30px !important;
    width: 100% !important;
}
body#password .account-link a {
    color: #666666 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    letter-spacing: 0.5px !important;
}
body#password .account-link a:hover {
    color: #111111 !important;
}

/* ==========================================================================
   PASSWORD RECOVERY PAGE - REMOVE DUPLICATE SEND BUTTON
   ========================================================================== */

/* Safely hides the 2nd button or submit input inside the recovery layout */
body#password form button:nth-of-type(2),
body#password form input[type="submit"]:nth-of-type(2),
body#password .form-footer button:nth-of-type(2),
body#password .form-footer input[type="submit"]:nth-of-type(2),
body#password form button + button,
body#password form input[type="submit"] + button,
body#password form .form-footer + .form-footer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* Fix horizontal overflow on mobile */
html, body {
    overflow-x: hidden;
}

/* Hide desktop header elements on mobile screens */
@media (max-width: 768px) {
    /* Replace these classes with your actual classes if they differ */
    .contact-us-text, 
    .categories-text, 
    .language-selector {
        display: none !important;
    }
    
    /* Ensure your logo is visible on mobile */
    .logo, .header-logo {
        display: block !important;
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   1. GLOBAL HEADER OVERRIDE: AMBER FOR EVERY PAGE (INCLUDING HOME)
   ========================================================================== */

/* Target the header, navigation, and the homepage-specific header containers */
#header, 
header#header,
body#index #header,
body#index .header-top,
.bespoke-gallery-header,
.main-navigation-bar,
div.mobile-header-row,
div.mobile-header-row[style*="background"],
.is-sticky #header,        /* Targets the header when scrolled */
.sticky-header {           /* Targets the header when scrolled */
    background-color: #f5eee3 !important; 
    background-image: none !important;
}

/* 2. MAINTAIN DESKTOP ALIGNMENT */
.main-navigation-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* 3. ENSURE MOBILE MENU CLICKABILITY (CRITICAL) */
@media (max-width: 767px) {
    .menu-icon, 
    #_mobile_main_menu, 
    .js-menu-toggle {
        pointer-events: auto !important;
        position: relative !important;
        z-index: 999999 !important;
    }
}

/* ==========================================================================
   3. OVERLAY CLEANUP (KEEPS COLOR VIBRANT & PURE)
   ========================================================================== */
/* Removes theme overlay shading masks so the original amber tone bleeds through */
.top-utility-bar,
.utility-left-zone,
.utility-right-zone,
.header-nav,
.header-top {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ==========================================================================
   MOBILE CATEGORY PRODUCTS GRID: FIT FULL UNBROKEN IMAGES
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Pull container grids cleanly out to the glass screen edges */
    #products .products.row,
    #products .product_list,
    .products-grid .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: -4px !important;
        margin-right: -4px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: calc(100% + 8px) !important;
    }

    /* 2. Setup strict side-by-side 50% grid items */
    #products .product-miniature,
    .products-grid .product-miniature,
    div[class*="col-xs-6"] {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-bottom: 20px !important;
        box-sizing: border-box !important;
    }

    /* 3. Unlock image heights and enforce full content containment */
    .product-miniature .thumbnail-container,
    .product-miniature .product-thumbnail {
        width: 100% !important;
        height: auto !important; /* Destroys forced crop heights */
        min-height: unset !important;
        max-height: unset !important;
        overflow: visible !important; /* Ensures elements aren't masked */
        display: block !important;
        background: transparent !important;
    }

    /* 4. The Magic Fix: Force the product image to show fully without cropping */
    .product-miniature .product-thumbnail img,
    .product-miniature img.img-fluid {
        width: 100% !important;
        height: auto !important; /* Allows the height to scale naturally with the width */
        max-height: 220px !important; /* Keeps rows uniform on smaller mobile views */
        object-fit: contain !important; /* FORCES the entire photo to fit safely inside without losing its top/bottom */
        display: block !important;
        margin: 0 auto !important;
    }
    
    /* 5. Space out titles neatly below the un-cropped images */
    .product-miniature .product-description {
        padding: 8px 2px !important;
        text-align: center !important;
        clear: both !important;
    }
}


@media (max-width: 767px) {
    /* FORCE THE PARENT CONTAINER */
    #header .mobile-header-view,
    header#header .mobile-header-view,
    .header-top .mobile-header-view {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* FORCE THE ICON GROUP TO THE RIGHT */
    #header .mobile-right-actions,
    .header-top .mobile-right-actions {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        margin-left: auto !important; /* Force shift */
        padding-right: 15px !important;
    }
    
    /* TARGET THE ICON SPECIFICALLY */
    #header .mobile-right-actions #_mobile_user_info,
    #header .mobile-right-actions #_mobile_cart {
        display: inline-flex !important;
        margin-left: 10px !important;
    }
}


    /* --- EMERGENCY MOBILE HEADER COLOR & LAYER RESET --- */
/* ==========================================================================
   UNIVERSAL MOBILE DRAWER VISIBILITY FORCE (CLEAN CSS ONLY)
   ========================================================================== */
@media (max-width: 767px) {
    /* Elevate the burger icon to ensure it is always physically reachable */
    .menu-icon, .js-menu-toggle, #_mobile_main_menu, [class*="burger"] {
        position: relative !important;
        z-index: 99999999 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* Force the matched mobile layout container into absolute view when toggled */
    body.menu-is-explicitly-open #mobile_top_menu_wrapper,
    body.menu-is-explicitly-open #_mobile_top_menu_wrapper,
    body.menu-is-explicitly-open .js-menu-canvas,
    body.menu-is-explicitly-open .mobile-menu-wrapper,
    body.menu-is-explicitly-open #_mobile_main_menu-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        
        /* Forces drawer presentation settings */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 80vw !important;
        max-width: 320px !important;
        height: 100vh !important;
        z-index: 99999998 !important;
        background: #ffffff !important; 
        box-shadow: 5px 0 25px rgba(0,0,0,0.2) !important;
        overflow-y: auto !important;
        padding: 20px !important;
    }
    
    /* Ensure all links inside the forced menu drawer remain interactive */
    body.menu-is-explicitly-open #mobile_top_menu_wrapper *,
    body.menu-is-explicitly-open #_mobile_top_menu_wrapper *,
    body.menu-is-explicitly-open .js-menu-canvas *,
    body.menu-is-explicitly-open .mobile-menu-wrapper * {
        pointer-events: auto !important;
    }
}

/* ==========================================================================
   AUTOMATED INLINE MOBILE MENU FORCER (SHYUGALLERY PRODUCTION)
   ========================================================================== */
(function() {
    var activeContainers = [];

    function handleMenuTouch(e) {
        var burger = e.target.closest([
            '.menu-icon', '.js-menu-toggle', '[class*="burger"]', 
            '[class*="menu-toggle"]', '[id*="mobile_main_menu"]',
            '.navbar-toggler', '.m-menu-toggle', '.mobile-nav-trigger'
        ].join(','));

        if (burger) {
            e.preventDefault();
            e.stopPropagation();
            
            if (document.body.classList.contains('menu-is-explicitly-open')) {
                closeMenu();
            } else {
                openMenu(burger);
            }
            return;
        }

        if (document.body.classList.contains('menu-is-explicitly-open')) {
            var hitInsideMenu = false;
            activeContainers.forEach(function(el) {
                if (el.contains(e.target)) { hitInsideMenu = true; }
            });
            
            if (!hitInsideMenu) {
                e.preventDefault();
                e.stopPropagation();
                closeMenu();
            }
        }
    }

    function openMenu(burgerInstance) {
        document.body.classList.add('menu-is-explicitly-open');
        activeContainers = [];

        var candidates = document.querySelectorAll([
            '#mobile_top_menu_wrapper', '#_mobile_top_menu_wrapper', '.js-menu-canvas', 
            '.mobile-menu-wrapper', '#_mobile_main_menu-wrapper', '#mobile-menu', 
            '.mobile-navigation', '#offcanvas-menu', '[id*="mobile-menu"]', 
            '[class*="mobile-menu"]', '[id*="menu-mobile"]', '[class*="menu-mobile"]',
            '.drawer-menu', '.mobile-sidebar', '[class*="nav-mobile"]'
        ].join(','));

        candidates.forEach(function(el) {
            if (el === burgerInstance || burgerInstance.contains(el)) return;
            var skipTags = ['BODY', 'HTML', 'A', 'SPAN', 'I', 'B', 'STRONG', 'IMG', 'P', 'BUTTON', 'INPUT'];
            if (skipTags.indexOf(el.tagName) !== -1) return;

            el.style.setProperty('display', 'block', 'important');
            el.style.setProperty('visibility', 'visible', 'important');
            el.style.setProperty('opacity', '1', 'important');
            el.style.setProperty('transform', 'none', 'important');
            el.style.setProperty('position', 'fixed', 'important');
            el.style.setProperty('top', '0', 'important');
            el.style.setProperty('left', '0', 'important');
            el.style.setProperty('width', '80vw', 'important');
            el.style.setProperty('max-width', '320px', 'important');
            el.style.setProperty('height', '100vh', 'important');
            el.style.setProperty('z-index', '99999999', 'important');
            el.style.setProperty('background', '#ffffff', 'important');
            el.style.setProperty('box-shadow', '5px 0 25px rgba(0,0,0,0.3)', 'important');
            el.style.setProperty('overflow-y', 'auto', 'important');
            el.style.setProperty('padding', '25px 20px', 'important');
            
            var children = el.querySelectorAll('*');
            children.forEach(function(child) {
                child.style.setProperty('pointer-events', 'auto', 'important');
            });

            activeContainers.push(el);
        });

        var backdrop = document.getElementById('custom-menu-backdrop');
        if (!backdrop) {
            backdrop = document.createElement('div');
            backdrop.id = 'custom-menu-backdrop';
            backdrop.style.cssText = "position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.5);z-index:99999998;pointer-events:auto;";
            document.body.appendChild(backdrop);
        }
    }

    function closeMenu() {
        document.body.classList.remove('menu-is-explicitly-open');
        
        activeContainers.forEach(function(el) {
            el.style.cssText = "";
            var children = el.querySelectorAll('*');
            children.forEach(function(child) { child.style.cssText = ""; });
        });
        activeContainers = [];

        var backdrop = document.getElementById('custom-menu-backdrop');
        if (backdrop) { backdrop.parentNode.removeChild(backdrop); }
    }

    window.addEventListener('touchstart', handleMenuTouch, { capture: true, passive: false });
    window.addEventListener('click', handleMenuTouch, { capture: true });
})();

/* ==========================================================================
   RESTORED LOGO SHIELD & LANGUAGE ARTIFACT FIX
   ========================================================================== */
/* Prevents the English/French language selector elements from floating over the logo */
#_desktop_language_selector, .language-selector, .languages-block, .blocklanguages {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: 10 !important;
}

#_desktop_logo, .logo, .header-logo, .logo-header {
    position: relative !important;
    z-index: 20 !important;
    overflow: visible !important;
}
/* =====================================
 ANOTHER MENU FIX
 ======================================= */
/* Force render the menu container globally */
#_mobile_top_menu, 
.mobile-menu-wrapper, 
.ps_mainmenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}


/* Hide the mobile logo and burger header on inner pages */
.mobile-logo-wrapper {
    display: none !important;
}

/* FORCE HIDE the extra mobile header line on Desktop screens */
@media (min-width: 992px) {
    /* Targets the specific wrapper container of the mobile burger */
    .mobile-logo-wrapper, 
    #menu-icon, 
    .mobile-hamburger {
        display: none !important;
    }
}

/* FORCE REMOVE THE EXTRA HEADER LINE ON DESKTOP ONLY */
@media (min-width: 992px) {
    #header .mobile-logo-wrapper,
    #header .mobile-hamburger,
    #header #menu-icon {
        display: none !important;
        height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Force remove the language flag artifact on Desktop inner pages */
@media (min-width: 992px) {
    #inline-flag-container[style] {
        display: none !important;
    }
}

@media (max-width: 767px) {
  
  /* 1) Move the logo slightly to the right away from the menu */
  #_mobile_logo,
  .header .logo,
  .navbar-brand {
    margin-left: 15px !important; /* Adjust this value to push it further right */
  }

  /* 2) Force the cart icon and the (0) count onto the same horizontal line */
  #_mobile_cart,
  .blockcart,
  .header-cart {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important; /* Prevents stacking vertically */
    white-space: nowrap !important; /* Keeps text on one line */
  }

  /* Ensure the count wrapper sits cleanly to the right of the icon/text */
  .cart-products-count,
  .blockcart .cart-count {
    margin-left: 5px !important;    /* Adds space between cart icon and (0) */
    display: inline-block !important;
    position: relative !important;   /* Resets any weird absolute positioning */
    bottom: auto !important;         /* Cancels out any "underneath" positioning */
    top: auto !important;
  }

}

/* ==========================================================================
   HOMEPAGE HEADER COLD LAUNCH GAP CLOSURE
   ========================================================================== */
@media (max-width: 767px) {
    /* Hard collapse any padding blocks inside the mobile top row layout */
    body.page-index #header .header-top,
    body.page-index .header-top .container,
    body.page-index .header-top .row {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Force-pull the homepage text frame up into view instantly on load */
    body.page-index #wrapper, 
    body.page-index #content-wrapper,
    body.page-index .featured-products {
        margin-top: -45px !important; /* Adjust this number higher (e.g., -60px) to pull text up further */
    }
}

/* 1. Force the border (Keep this) */
.product-miniature .thumbnail-container,
.product-miniature a.thumbnail.product-thumbnail {
    border-top: 30px solid #EDE4D3 !important;
}

/* 2. Advanced Shadow & Background Removal */
.product-miniature *,
.product-miniature .thumbnail-container,
.product-miniature .thumbnail-container::after,
.product-miniature .thumbnail-container::before,
.product-miniature a.thumbnail.product-thumbnail {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
    background-image: none !important; /* Kills gradient shadows */
    outline: none !important;
}

/* 3. Force transparency on the container if it has a background shadow */
.product-miniature .thumbnail-container {
    background-color: transparent !important;
}

/* =========================
 shadow and frame
 =========================== */
/* 1. CLEAN THE PARENT CARD */
.product-card.product-miniature {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important; 
}

/* 2. THE PERFECT FRAME */
.product-card .product-img {
    border: 3px solid #d4af37 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    background-color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important; 
    display: flex !important;
    flex-direction: column !important;
}

/* 3. DESTROY MOBILE CATEGORY RESTRICTIONS & FORCE FILL */
.product-card .product-img a.thumbnail {
    display: flex !important;
    flex-grow: 1 !important; 
    width: 100% !important;
    height: 100% !important; 
    max-height: none !important; 
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.product-card .product-img a.thumbnail img {
    display: block !important;
    width: 100% !important;
    height: 100% !important; 
    max-height: none !important; 
    max-width: none !important; 
    min-height: 100% !important;
    min-width: 100% !important;
    object-fit: cover !important; 
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 4. KEEP THE QUICK-VIEW OVERLAY OUT OF THE WAY */
.product-card .product-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10 !important;
}

/* 5. THE FINAL MOBILE FIX: ESCAPE THE SCREEN EDGE */
@media (max-width: 767px) {
    .product-card.product-miniature {
        padding: 0 !important; 
    }
    .product-card .product-img {
        /* Shrinks the frame by 8 pixels total and perfectly centers it in the column */
        width: calc(100% - 8px) !important; 
        margin: 4px auto !important; 
    }
}


/* END BORDER AND SHADOWS */


/* KILL THE HORIZONTAL BORDER ON THE PRODUCT PAGE */
.product-container.js-product-container {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    background: transparent !important;
    /* This ensures that if the theme has an added "pseudo-border" (before/after), it is removed */
    box-shadow: none !important;
}

/* If there is a specific line element inside that container */
.product-container.js-product-container hr {
    display: none !important;
}

/* INCREASE PRICE FONT SIZE - TARGETED APPROACH */
.product-prices .current-price span[content],
.product-prices .current-price,
.product-prices .product-price,
.price {
    font-size: 32px !important; 
    font-weight: 400 !important;
    color: #000 !important;
}

/* --- THE ULTIMATE OVERRIDE --- */

/* Force the entire row container to have interior spacing */
.product-container.js-product-container {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

/* Force the child content columns to respect this new container padding */
.product-container.js-product-container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Specifically target the text column */
.product-container.js-product-container .col-md-6:last-child {
    padding-left: 20px !important;
}

/* Force the product details tab to be visible by default */
#product-details.tab-pane {
    display: block !important;
    opacity: 1 !important;
}

/* Hide the tab navigation since you now only have one tab */
.nav.nav-tabs {
    display: none !important;
}


/* ============================
 SPACING ON TEXT PAGES
 ============================== */

/* --- MOBILE SPACING FOR CMS PAGES: CONTENT ONLY --- */

@media (max-width: 767px) {
    /* Target the container that holds the page text, but not the whole body */
    #cms.cms-id-1 .container, 
    #cms.cms-id-2 .container, 
    #cms.cms-id-3 .container, 
    #cms.cms-id-4 .container, 
    #cms.cms-id-5 .container, 
    #cms.cms-id-6 .container, 
    #cms.cms-id-7 .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}


/* Change the New label background and text color */
.product-flag.new {
    background-color: #db670a !important; /* e.g., #ff0000 */
    color: #ffffff !important; /* Text color */
}

/* --- FIXING THE NEW/NOUVEAU LABEL --- */

.product-flag.new {
    /* Set a width that fits "Nouveau" */
    width: 100px !important; 
    /* Force text to stay on one line */
    white-space: nowrap !important;
    /* Center the text */
    text-align: center !important;
    /* Ensure the background covers the new text */
    background-color: #YOUR_COLOR_CODE !important; 
    color: transparent !important;
    position: relative;
    padding: 2px 5px !important; /* Adjust padding to keep it looking like a badge */
}

.product-flag.new::before {
    /* Inject the text */
    content: "Nouveau" !important;
    /* Make the text visible */
    color: #ffffff !important; 
    /* Positioning */
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}


/* --- PRODUCT IMAGE STYLING (LARGE WHITE BORDER & SHADOW) --- */

/* 1. Target the main product cover container to add the shadow and gold line */
.js-qv-product-cover, 
.product-cover {
    /* Layer 1: 5px total gold outline
       Layer 2: Soft drop shadow for depth
    */
    box-shadow: 
        0 0 0 5px #D4AF37, 
        10px 10px 20px rgba(0, 0, 0, 0.3) !important;
    
    /* Ensure there is enough space around the shadow so it isn't clipped */
    margin: 20px !important; 
    
    /* Ensure the background of the *container* is white to create the matting effect */
    background-color: #ffffff !important;
}

/* 2. Style the actual image inside the cover to add the large white "mat" spacing */
.js-qv-product-cover img, 
.product-cover img {
    /* This creates the large white margin on all four sides */
    padding: 30px !important; 
    
    /* Ensure the padding shows the white background we set on the container */
    background-color: #ffffff !important;
    
    /* Ensure the image remains centered and doesn't stretch weirdly */
    display: block;
    margin: 0 auto;
    
    /* Make sure the image itself has no internal shadow/border */
    box-shadow: none !important;
}

/* We will target ONLY the main image container */
.YOUR-CLASS-FROM-STEP-1 {
    background: white;
    padding: 30px;
    border: 5px solid #D4AF37;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.3);
}

/* We will explicitly ensure thumbnails are NOT affected */
.product-images, .js-qv-mask {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}


/* Force the mobile logo to appear on all pages */
#_mobile_logo, 
.mobile-logo, 
.header-mobile-logo,
#header .logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* SPACING FOR CONTACT PAGES */

/* =======================================================
   MOBILE ONLY: SIDE SPACING FOR ENGLISH & FRENCH CONTACT PAGES
   ======================================================= */
@media (max-width: 767px) {
    #contact #wrapper, 
    .page-contact #wrapper,
    #contact #content,
    .page-contact #content {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }
}

/* =======================================================
   MOBILE ONLY: SEARCH RESULTS CENTER ALIGNMENT & SIDE SPACING
   ======================================================= */
@media (max-width: 767px) {
    /* 1. Add premium side padding to match your contact pages */
    #search #wrapper,
    .page-search #wrapper,
    #search #content,
    .page-search #content {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* 2. Center-align search titles, breadcrumbs, and "no results" text blocks */
    #search .search-title,
    #search #product-list-top,
    #search #js-product-list-header,
    #search .page-content,
    #search .not-found,
    .page-search .not-found {
        text-align: center !important;
    }

    /* 3. Center the product rows and grid layout items automatically */
    #search .products,
    #search #products .row,
    .page-search .products {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    /* 4. Center-align sorting filters dropdown container if visible */
    #search .products-selection {
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* =======================================================
   MOBILE ONLY: NEW PRODUCTS CENTER ALIGNMENT & SIDE SPACING
   ======================================================= */
@media (max-width: 767px) {
    /* 1. Add premium side padding to prevent text from touching glass edges */
    #new-products #wrapper,
    .page-new-products #wrapper,
    #new-products #content,
    .page-new-products #content {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* 2. Center-align the page title, breadcrumbs, and layout headers */
    #new-products h1,
    #new-products .h1,
    #new-products #product-list-top,
    #new-products #js-product-list-header,
    .page-new-products .page-header {
        text-align: center !important;
    }

    /* 3. Center the new product display grid cards beautifully */
    #new-products .products,
    #new-products #products .row,
    .page-new-products .products {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    /* 4. Center-align the product sorting filters dropdown bar */
    #new-products .products-selection {
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* =======================================================
   HOMEPAGE MOBILE HEADER: FLEXBOX ALIGNMENT & EXTRA LARGE LOGO
   ======================================================= */
@media (max-width: 767px) {
    
    /* 1. FORCE FLEXBOX ENGINE ON THE HEADER ROW FOR PERFECT VERTICAL CENTERING */
    #header .header-top .row,
    #header .header-top .container {
        display: flex !important;
        align-items: center !important;    
        justify-content: space-between !important; 
        flex-wrap: nowrap !important;
        height: auto !important;
        min-height: 85px !important;       
    }

    #header #_mobile_toggle_menu,
    #header .menu-icon,
    #header #_mobile_logo,
    #header #_mobile_user_info,
    #header #_mobile_cart,
    .shyu-homepage-mobile-flags {
        float: none !important;
        clear: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* 2. REMOVE ALL THEME LIMITS TO MAKE THE LOGO LARGE */
    #header #_mobile_logo {
        flex-grow: 1 !important;
        max-width: 50% !important;         
        justify-content: flex-start !important;
        margin-left: 8px !important;       
    }

    #header #_mobile_logo a,
    #header #_mobile_logo img,
    #_mobile_logo img {
        display: block !important;
        height: 65px !important;           
        max-height: 65px !important;
        min-height: 65px !important;       
        width: auto !important;            
        object-fit: contain !important;
    }

    /* 3. GROUP RIGHT ALIGNED ICONS AND SHIFT THEM TOWARD THE RIGHT EDGE */
    #header .header-top .position-static {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 14px !important;              
        margin-right: -5px !important;     
        float: none !important;
    }

    /* 4. PHYSICALLY SLIDE FLAGS RIGHTWARD OVER THE GRID SPACE */
    .shyu-homepage-mobile-flags {
        gap: 5px !important;
        position: relative !important;
        left: 12px !important;  /* Change to 15px or higher if you want them even further right */
    }

    /* Ensure account and cart icons sit correctly inside the flex grid alignment */
    #header #_mobile_user_info a,
    #header #_mobile_cart .header {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: none !important;
    }
}

/* =======================================================
   SEARCH BAR FIXED: FORCE ICON CLICKABILITY & SUBMIT
   ======================================================= */
#search_widget, 
.search-widget {
    position: relative !important;
}

/* 1. Ensure the form button is on top and capturing clicks */
#search_widget form button[type="submit"],
.search-widget form button[type="submit"] {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    z-index: 999 !important;          /* Forces the button in front of the text box */
    pointer-events: auto !important;  /* Locks clicks onto the button element */
    cursor: pointer !important;        /* Shows the clicking hand indicator */
    background: transparent !important;
    border: none !important;
}

/* 2. Ensure the visual icon inside the button registers the click */
#search_widget form button[type="submit"] i,
.search-widget form button[type="submit"] i,
#search_widget form i.search,
.search-widget form i.search {
    pointer-events: auto !important;  /* Prevents clicks from falling through the icon */
    cursor: pointer !important;
    position: relative !important;
    z-index: 1000 !important;
}

/* 3. Push the input text slightly left so typed words don't go under the icon */
#search_widget form input[type="text"],
.search-widget form input[type="text"] {
    padding-right: 45px !important;    /* Creates safe breathing room for the icon area */
    position: relative !important;
    z-index: 1 !important;             /* Pushes text input behind the button layer */
}


/* ==========================================================================
   DESKTOP ONLY: Full Calibration for Homepage and Inner Pages
   ========================================================================== */
@media (min-width: 768px) {
    
    /* 1. INNER PAGES ONLY */
    body:not(#index) i.search, 
    body:not(#index) .material-icons.search {
        transform: none !important;
        position: relative !important;
        display: inline-block !important; 
        
        /* Bypassing layout locks with margins */
        margin-top: -10px !important;  
        margin-left: -8px !important;  
        
        /* Resetting coordinates so they don't conflict */
        top: 0 !important;
        left: 0 !important;
    }

    /* 2. HOMEPAGE ONLY */
    #index i.search, 
    #index .material-icons.search {
        transform: none !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        position: relative !important;
        display: inline-block !important; 
        
        /* Coordinates work perfectly on the homepage layout */
        top: 25px !important; 
        left: -8px !important; 
    }
}

/* ==========================================================================
   MOBILE ONLY: Close the Remaining Gap for Homepage Search Bar
   ========================================================================== */
@media (max-width: 767px) {
    
    /* 1. Pull the search bar UP aggressively to crush the stubborn gap */
    #index #search_widget,
    #index .search-widget,
    #index .block-search {
        margin-top: -95px !important; /* Jumped from -55px to slam it right up */
        position: relative !important;
        z-index: 10 !important;
    }

    /* 2. Completely sanitize any leftover paddings or margins in the mobile header rows */
    #index #header,
    #index .header-top,
    #index .header-top .row,
    #index .header-top .container,
    #index .header-nav,
    #index .nav {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* HOME PAGE BACKGROUND IMAGE */

.hero-section-canvas {
  min-height: 75vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative; 
  padding: 4rem 2rem;
  
  /* 1. MATCHING HEADER COLOR: The exact soft ivory tone from your top navigation bar */
  background-color: #f5efe3 !important; 

  /* 2. MATCHING OVERLAY: RGB values (245, 239, 227) match the header perfectly */
  background-image:
    linear-gradient(rgba(245, 239, 227, 0.85), rgba(245, 239, 227, 0.85)), 
    url('/themes/terres-anciennes-child/assets/img/shyugallery_background.png') !important;
    /* NOTE: If your image is in the main root /img/ folder, use: url('/img/shyugallery_background.png') !important; */

  background-repeat: no-repeat !important;

  /* 3. POSITION: Keeps the 100px lift you liked */
  background-position: center bottom 80px !important; 
  
  /* 4. SIZE: Keeps the larger image scale you liked */
  background-size: auto 90% !important;
}

/* Keeps your text elements sharp and layered cleanly on top */
.hero-section-canvas h1, 
.hero-section-canvas p,
.hero-section-canvas span {
  z-index: 1;
}

/* --- CONFIGURATION MOBILE POUR LE PANIER UNIQUEMENT --- */
@media screen and (max-width: 767px) {
  
  /* 1. Reset total pour la page d'accueil (Header, Body, Footer à 100%) */
  header, .header, #header, 
  footer, .footer, #footer, 
  body, #main, main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

/* On force le footer à ignorer cet espace et à rester à 100% de large */
  footer,
  .footer,
  #footer {
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: calc(100% + 40px) !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* 2. On applique l'espace UNIQUEMENT aux blocs internes spécifiques du panier */
  /* (Cible les tableaux de produits, les totaux et les formulaires de commande) */
  .cart, 
  #cart, 
  .cart-form, 
  .cart-collaterals, 
  .shipping-calculator,
  .checkout-button,
  .cart_totals,
  #shopping-cart-table {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    display: block !important; /* Force le respect du padding sur mobile */
    width: 100% !important;
  }
}



/* FROM HERE FIXING THE COMMENDE PAGE */


/* --- MOBILE CHECKOUT: AGGRESSIVE HEADER CLEANUP --- */
@media screen and (max-width: 767px) {
  
  /* Target the exact PrestaShop mobile injection points and throw them off-screen */
  body#checkout #_mobile_search_widget,
  body#checkout #_mobile_top_menu,
  body#checkout #mobile_top_menu_wrapper,
  body#checkout [data-module="ps_searchbar"],
  body#checkout [data-module="ps_mainmenu"],
  body#checkout .js-top-menu,
  body#checkout .menu-top,
  body#checkout .search-widget,
  body#checkout form[action*="search"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important; 
    top: -9999px !important; /* Throws the element off the screen */
    left: -9999px !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    z-index: -1 !important;
  }
}



/* --- AJUSTEMENT POSITION IMAGE HERO SUR MOBILE --- */
@media screen and (max-width: 767px) {
  /* Remplacez '.classe-de-votre-image' par la classe réelle de votre image */
  .hero-section-canvas {
    margin-top: 120px !important; /* Ajustez 40px selon la distance souhaitée */
  }
}



/* ==========================================================================
   BULLETPROOF GLOBAL COOKIE BANNER OVERRIDE (FIXED CLOSING BUG)
   ========================================================================== */



/* ==========================================================================
   REMOVE SUBCATEGORIES GRID AND TITLE FROM CATEGORY PAGES
   ========================================================================== */
#subcategories,
.subcategories,
#category-subcategories,
section.subcategories-list {
    display: none !important;
}

/* PrestaShop 9 Image Modal Scroll Fix */
.modal.quickview, 
.modal-open .modal, 
.product-images-modal,
.js-product-images-modal {
  overflow-y: auto !important;
}

.product-images-modal .modal-dialog,
.js-product-images-modal .modal-dialog {
  max-height: none !important;
  margin-top: 30px !important;
  margin-bottom: 50px !important;
}

.product-images-modal img,
.js-product-images-modal img,
.modal-body img.img-fluid {
  max-height: none !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}


/* FIXING WIDTH OF SUB CATEGORIES BAND */



/* 1. Anchor the dropdown to each specific top-level category item */
#header .top-menu > li {
    position: relative !important;
}

/* 2. Restrict the white band to minimum width and align it under the text */
#header .popover.sub-menu {
    width: max-content !important;
    min-width: 220px !important; /* Ensures a clean minimum space for text */
    left: 0 !important;
    right: auto !important;
    padding: 15px !important;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05); /* Adds a very soft, high-end shadow instead of a hard edge */
top: 100% !important;        /* Aligns it directly with the bottom of the category text */
    margin-top: 10px !important;  /* Gives it 10px of elegant breathing room below the text */
}

/* 3. Force the subcategory links to stack vertically inside the compact band */
#header .popover.sub-menu .top-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

#header .popover.sub-menu .top-menu > li {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 !important;
}

#header .popover.sub-menu .dropdown-item {
    display: inline-block !important;
    padding: 5px 0 !important;
    white-space: nowrap !important; /* Prevents text from awkwardly splitting onto two lines */
}



/* removing black frame around link text */
/* Remove the black outline frame when links or buttons are clicked */
a:focus, 
a:active,
button:focus,
button:active,
.btn:focus,
.btn:active {
    outline: none !important;
    box-shadow: none !important; /* Prevents some themes from using a shadow instead of an outline */
}


/* 1. INCREASE LINE SPACING FOR CHECKOUT AGREEMENT TEXT */
body#checkout .checkout-step label {
    line-height: 1.8 !important;
}

/* 2. OPTIONAL: ALIGN CHECKBOX TO THE TOP LINE OF TEXT */
body#checkout .checkout-step input[type="checkbox"] {
    margin-top: 5px !important;
    vertical-align: top !important;
}