/* ========================================
   ELVETIK ESSENTIAL CUSTOM STYLES
   Only styles that cannot be replaced by Bootstrap
   ======================================== */

/* ========================================
   CSS VARIABLES
   ======================================== */

:root {
    --primary: #42a0a6;
    --primary-hover: #2e7a7f;
    --accent: #e30613;
    --accent-red: #e30613;
    --black: #000000;
    --gray-dark: #333333;
    --gray: #666666;
    --gray-light: #999999;
    --bg-light: #f7f7f7;
    --white: #ffffff;
    --border: #e5e5e5;

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --transition: all 0.3s ease;

    /* WordPress Global Content Size - Augmenté pour plus de largeur */
    --wp--style--global--content-size: 1600px;
}

.wc-breadcrumb {
    display: none;
}

/* ========================================
   GLOBAL LINKS STYLES
   ======================================== */

/* Tous les liens - couleur primary, pas de soulignement */
.nav-link {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

a:hover,
a:focus {
    color: var(--primary-hover);
    text-decoration: none;
}

/* Liens visités */
a:visited {
    color: var(--primary);
}

/* Exception pour les boutons (garder leur style) */
.btn,
.wp-block-button__link,
.button,
.single_add_to_cart_button {
    color: inherit !important;
}
/* ========================================
   CUSTOM CONTAINER SIZES
   ======================================== */


/* ========================================
   TOP BAR WIDGET
   ======================================== */

/* Fix bg-primary to use custom primary color */
.bg-primary {
    background-color: var(--primary) !important;
}

.top-bar-widget {
    background: var(--primary);
    color: var(--white);
    padding: 0.35rem 0;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
}

.top-bar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
}


/* Texte à gauche */
.top-bar-text {
    white-space: nowrap;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media (max-width: 726px) {
    .top-bar-text {
        font-size: 0.45rem !important;
        margin-right: 6rem;
    }
    .top-bar-content {
        margin: 0 !important;
    }
}

/* Icônes sociales à droite - côte à côte */
.top-bar-social {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
}

.top-bar-social .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    transition: var(--transition);
    opacity: 0.9;
}

.top-bar-social .social-icon {
    font-size: 16px !important;
    color: var(--white) !important;
    line-height: 1 !important;
    display: block !important;
}

@media (max-width: 576px) {
    .top-bar-social .social-icon {
        font-size: 0.1rem !important;
    }
}

.top-bar-social .social-icon:hover {
    opacity: 0.8 !important;
    transform: scale(1.1) !important;
}

.top-bar-social .social-icon:hover i {
    color: var(--white) !important;
}


.banner-separator {
    opacity: 0.7;
}

/* ========================================
   NAVBAR LOGO
   ======================================== */

/* Logo - targets Bootstrap navbar-brand - positioned on the left */
#nav-main.navbar .navbar-brand,
.navbar-brand,
.nav-logo {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    margin-left: 0 !important;
    flex-shrink: 0;
    height: 60px;
    text-align: left;
}

/* Logo image - fixed dimensions for cross-browser compatibility */
#nav-main.navbar .navbar-brand img,
.navbar-brand img,
.nav-logo img {
    height: 60px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 60px !important;
    object-fit: contain;
    display: block !important;
    margin: 0;
    padding: 0;
}

/* Ensure logo displays correctly in all browsers (both light and dark theme versions) */
/* Override theme-specific display classes to ensure logo is always visible */
.navbar-brand img.d-td-none,
.navbar-brand img.d-tl-none {
    height: 60px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 60px !important;
    object-fit: contain;
    margin: 0;
    padding: 0;
}

/* Force logo with d-td-none to display by default (light theme logo) */
.navbar-brand img.d-td-none {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide dark theme logo by default, show only when dark theme is active */
.navbar-brand img.d-tl-none {
    display: none !important;
}

/* Show dark theme logo when dark theme is active */
[data-bs-theme="dark"] .navbar-brand img.d-td-none {
    display: none !important;
}

[data-bs-theme="dark"] .navbar-brand img.d-tl-none {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ========================================
   HEADER NAVIGATION
   ======================================== */

/* Bootstrap Icons - Cart icon sizing to match Font Awesome */
.cart-toggler .bi-cart,
.back-to-cart .bi-cart {
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
}

/* Ensure Bootstrap Icons are displayed inline */
.bi {
    display: inline-block;
    vertical-align: -0.125em;
}

/* Header principal - fond blanc */
#masthead.site-header {
    background-color: var(--white) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Navbar container - flex layout */
#nav-main.navbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0 !important;
}

#nav-main.navbar .container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

/* Logo - à gauche (override des styles précédents) */
#nav-main.navbar .navbar-brand {
    display: flex;
    align-items: center;
    margin-right: 5rem;
    padding: 0;
    box-sizing: border-box;
}

@media screen and (max-width: 526px) {
    #nav-main.navbar .container {
        padding: 0.5rem 1rem !important;
        gap: 1rem !important;
    }

    #nav-main.navbar .navbar-brand img,
    .navbar-brand img{
        max-height: 60% !important;
    }
    #nav-main.navbar .navbar-brand {
        margin-right: 0 !important;
    }
}

/* Menu principal desktop - à droite du logo */
.navbar-menu-desktop {
    flex: 0 0 auto;
    margin-right: auto;
    margin-left: 0;
    order: 2;
    z-index: 1;
    padding-left: 0;
}

.elvetik-main-menu {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Styles pour le menu principal */
.elvetik-main-menu {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

.elvetik-main-menu .nav-item {
    margin: 0;
}

.elvetik-main-menu .nav-link {
    color: var(--black);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: var(--transition);
    white-space: nowrap;
}

.elvetik-main-menu .nav-link:hover,
.elvetik-main-menu .nav-link:focus {
    color: var(--primary) !important;
    background-color: transparent;
}

.elvetik-main-menu .nav-link.active {
    color: var(--primary) !important;
}

/* Style spécial pour le menu SOLDES en rouge */
.elvetik-main-menu .nav-link[href*="soldes"],
.elvetik-main-menu .nav-link[href*="SOLDES"],
.elvetik-main-menu .nav-item:has(.nav-link[href*="soldes"]) .nav-link,
.elvetik-main-menu .nav-item:has(.nav-link[href*="SOLDES"]) .nav-link {
    color: var(--accent-red) !important;
}

.elvetik-main-menu .nav-link[href*="soldes"]:hover,
.elvetik-main-menu .nav-link[href*="SOLDES"]:hover {
    color: var(--accent-red) !important;
    opacity: 0.8;
}

/* Alternative si :has() n'est pas supporté - cibler directement le texte */
.elvetik-main-menu .nav-item .nav-link[href*="soldes"],
.elvetik-main-menu .nav-item .nav-link[href*="SOLDES"],
.elvetik-main-menu a[href*="/product-category/soldes/"] {
    color: var(--accent-red) !important;
}

/* Header actions (compte et panier) - à droite */
.header-actions {
    display: flex;
    align-items: center;
    gap: -5rem;
    flex: 0 0 auto;
    margin-left: 13rem !important;
    order: 3;
    z-index: 1;
}

@media screen and (max-width: 1200px) {
    .header-actions {
        margin-left: 0 !important;
    }
}

/* Boutons compte et panier */
.header-actions .btn {
    background-color: transparent;
    border: none;
    color: var(--gray-dark);
    font-size: 1rem;
    transition: var(--transition);
}

.header-actions .btn:hover {
    color: var(--primary);
    background-color: transparent;
}

/* Responsive - masquer le menu desktop sur mobile */
@media (max-width: 991.98px) {
    .navbar-menu-desktop {
        display: none !important;
    }
}

/* Menu mobile dans offcanvas */
@media (max-width: 991.98px) {
    .offcanvas-body .navbar-nav {
        flex-direction: column;
        width: 100%;
    }

    .offcanvas-body .nav-item {
        width: 100%;
        border-bottom: 1px solid var(--border);
    }

    .offcanvas-body .nav-link {
        padding: 1rem;
        display: block;
        width: 100%;
    }

    .offcanvas-body .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 0;
        background-color: var(--bg-light);
        border: none;
        box-shadow: none;
    }
}

/* Masquer le menu offcanvas sur desktop */
@media (min-width: 992px) {
    .offcanvas-body .navbar-nav {
        display: none !important;
    }
}

/* Ajustements pour le logo et le menu sur desktop */
@media (min-width: 992px) {

    /* Logo à gauche */
    #nav-main.navbar .navbar-brand {
        flex: 0 0 auto !important;
        margin-right: 2rem !important;
        margin-left: 0 !important;
        order: 1 !important;
        z-index: 1;
    }

    /* Menu à droite du logo */
    .navbar-menu-desktop {
        flex: 0 0 auto;
        margin-right: auto;
        margin-left: 0;
        order: 2;
        z-index: 1;
    }

    /* Actions à droite */
    .header-actions {
        flex: 0 0 auto;
        margin-left: auto;
        order: 3;
        z-index: 1;
    }

    /* Container layout */
    #nav-main.navbar .container {
        min-height: 80px;
        justify-content: space-between;
        gap: 3rem;
    }

    /* Empêcher le menu de déborder */
    .elvetik-main-menu {
        display: flex;
        list-style: none;
        gap: 2rem;
        align-items: center;
        flex: 1;
    }
    .elvetik-main-menu .nav-item {
        position: relative;
    }
}

/* ========================================
   HERO FULL WIDTH
   ======================================== */

/* Support for mockup class AND WordPress blocks */
.hero-fullwidth,
.wp-block-cover.hero-fullwidth {
    position: relative;
    height: 80vh;
    min-height: 600px;
    max-height: 900px;
    overflow: hidden;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* WordPress Cover block - adjustments */
.wp-block-cover.hero-fullwidth {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: 0 !important;
    right: 0 !important;
}

/* WordPress Cover block - background image fixes */
.wp-block-cover.hero-fullwidth .wp-block-cover__background {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0 !important;
}

/* Ensure background image style covers full width */
.wp-block-cover.hero-fullwidth[style*="background-image"] {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

.wp-block-cover.hero-fullwidth.has-background-dim .wp-block-cover__background {
    opacity: 0.3 !important;
}

/* Reduce overlay darkness (WordPress adds its own overlay) */
.wp-block-cover.hero-fullwidth::before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.05)) !important;
}

/* Ensure background image covers full width */
.wp-block-cover.hero-fullwidth.has-background-dim,
.wp-block-cover.hero-fullwidth {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.wp-block-cover.hero-fullwidth .wp-block-cover__inner-container {
    position: relative;
    z-index: 10;
    width: 100% !important;
    max-width: 100% !important;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
}

/* Ensure parent container doesn't limit width */
.entry-content>.wp-block-cover.hero-fullwidth,
.site-main>.wp-block-cover.hero-fullwidth,
.content-area>.wp-block-cover.hero-fullwidth,
.entry-content .wp-block-cover.hero-fullwidth,
.site-main .wp-block-cover.hero-fullwidth,
.content-area .wp-block-cover.hero-fullwidth {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: 0 !important;
    right: 0 !important;
}

/* Ensure Bootstrap containers don't limit width */
.site-content .container .wp-block-cover.hero-fullwidth,
.site-content .wp-block-cover.hero-fullwidth {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: 0 !important;
    right: 0 !important;
}

/* Force hero to break out of ALL possible containers */
body .wp-block-cover.hero-fullwidth,
body>* .wp-block-cover.hero-fullwidth,
.wp-site-blocks .wp-block-cover.hero-fullwidth,
main .wp-block-cover.hero-fullwidth,
article .wp-block-cover.hero-fullwidth,
.wp-block-group .wp-block-cover.hero-fullwidth,
.wp-block-column .wp-block-cover.hero-fullwidth,
.entry-content .wp-block-cover.hero-fullwidth,
.post-content .wp-block-cover.hero-fullwidth,
.entry-content>.wp-block-cover.hero-fullwidth {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
}

/* Ensure parent containers don't clip the hero */
.entry-content,
.site-main,
.content-area,
.wp-block-group,
article,
.site-content,
.container {
    overflow-x: visible !important;
    position: relative;
}

/* Force entry-content to allow full width children */
.entry-content>.wp-block-cover.hero-fullwidth {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

.hero-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
    z-index: 1;
}

/* Overlay for WordPress Cover block */
.wp-block-cover.hero-fullwidth::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.05));
    z-index: 1;
}

.hero-content-center,
.wp-block-group.hero-content-center {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    z-index: 10;
    padding: 2rem 0;
    width: 100%;
}

/* Container inside hero should use Bootstrap max-width */
.hero-content-center .container {
    position: relative;
    z-index: 10;
}

.hero-eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

h1,
h2 {
    color: var(--primary);
}

.hero-title,
.wp-block-heading.hero-title,
.wp-block-heading.hero-title h1,
.wp-block-heading.hero-title h2 {
    font-size: 5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.1;
    color: #ffffff !important;
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.7),
        0 4px 16px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.5px;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}

.hero-title br {
    display: block;
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    font-weight: 400;
}

.hero-cta-group,
.wp-block-group.hero-cta-group,
.wp-block-buttons.hero-cta-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.wp-block-button__link  {
    padding: 1rem  2rem !important;
    border-radius: 0;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}
/* Style for WordPress buttons in hero */
.hero-cta-group .wp-block-button,
.wp-block-buttons.hero-cta-group .wp-block-button {
    margin: 0;
}

@media screen and (max-width: 480px) {
    .hero-title,
    .wp-block-heading.hero-title,
    .wp-block-heading.hero-title h1,
    .wp-block-heading.hero-title h2 {
        font-size: 2.5rem;
    }

}

.hero-editable-note {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
    text-align: center;
}

/* ========================================
   BUTTON OVERRIDES (Bootstrap compatible)
   ======================================== */

/* Custom button styles that extend Bootstrap */
.btn-primary {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(66, 160, 166, 0.4);
}

.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: 0 6px 16px rgba(66, 160, 166, 0.5);
    transform: translateY(-1px);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    will-change: backdrop-filter;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(3px)) {
    .btn-secondary {
        background: rgba(255, 255, 255, 0.25);
    }

    .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.35);
    }
}

/* ========================================
   PRODUCT CATEGORIES GRID 2x3
   ======================================== */

/* Product Categories Grid - Bootstrap Layout */
.product-categories-grid {
    padding: 0.5rem 0 2rem 0;
    background: var(--white);
    margin-bottom: 0;
}

/* Responsive padding adjustments */
@media (max-width: 767.98px) {
    .product-categories-grid {
        padding: 0.5rem 0 1.5rem 0;
    }
}

.category-box {
    background: var(--bg-light);
    border: none;
    padding: 0;
    text-align: center;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--white);
    text-transform: uppercase;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    line-height: 1.1;
    background-color: var(--white);
    width: 100%;
    height: 100%;
}

/* Responsive height adjustments */
@media (max-width: 767.98px) {
    .category-box {
        min-height: 200px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .category-box {
        min-height: 220px;
    }
}

.category-second-word {
    font-weight: 800;
    display: block;
    margin-top: -1rem;
    line-height: 1.1;
    letter-spacing: -2px;
    margin-bottom: 0;
    padding-top: 0;
    position: relative;
    z-index: 3;
    color: var(--white);
    font-size: 1.4rem;
    transform: scaleX(0.9);
    transform-origin: center;
    text-shadow:
        0 0 4px rgba(0, 0, 0, 0.6),
        0 0 8px rgba(0, 0, 0, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.5);
}

.category-first-word {
    font-weight: 900;
    display: block;
    letter-spacing: -0.5px;
    font-size: 1.65rem;
    line-height: 1;
    transform: scaleY(1.15);
    transform-origin: top;
    margin-bottom: -0.3rem;
    padding-bottom: 0;
    position: relative;
    z-index: 3;
    color: var(--white);
    text-shadow:
        0 0 8px rgba(0, 0, 0, 1),
        0 0 16px rgba(0, 0, 0, 0.8),
        0 2px 4px rgba(0, 0, 0, 1),
        0 4px 8px rgba(0, 0, 0, 0.9),
        -1px -1px 0 rgba(0, 0, 0, 0.8),
        1px 1px 0 rgba(0, 0, 0, 0.8);
}

/* Firefox specific correction */
@-moz-document url-prefix() {
    .category-second-word {
        margin-top: -0.4rem;
        line-height: 1.15;
    }

    .category-first-word {
        line-height: 1.05;
        transform: scaleY(1.12);
    }
}

.category-box {
    position: relative;
    z-index: 2;
}

.category-first-word,
.category-second-word {
    position: relative;
    z-index: 2;
    color: var(--white);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Container for text at top of thumbnail */
.category-box>span,
.category-box>.category-first-word {
    padding-top: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    width: 100%;
}

/* Responsive Typography - Bootstrap Breakpoints */

/* Small devices (tablets, < 768px) */
@media (max-width: 767.98px) {
    .category-first-word {
        font-size: 1.35rem;
        letter-spacing: -0.3px;
    }

    .category-second-word {
        font-size: 1.2rem;
        margin-top: -0.8rem;
        letter-spacing: -1.5px;
    }

    .category-box {
        font-size: 1.1rem;
    }

    .category-box>span,
    .category-box>.category-first-word {
        padding-top: 0.75rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Medium devices (tablets landscape, 768px to 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .category-first-word {
        font-size: 1.5rem;
    }

    .category-second-word {
        font-size: 1.3rem;
        margin-top: -0.9rem;
    }

    .category-box {
        font-size: 1.15rem;
    }
}

.category-box:hover {
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(66, 160, 166, 0.3);
}

/* Background images for each category */
.category-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: var(--category-image, none);
    background-color: var(--white);
    z-index: 0;
    pointer-events: none;
}

/* Light overlay for better text readability while keeping white background visible */
.category-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.category-box:hover::before {
    opacity: 0.4;
}

/* Category-specific background images */
.category-bottes::after,
a[href="#bottes"].category-box::after {
    background-image: url('../img/vignettes/bottes.png');
}

a[href="#chaussettes-polaire"].category-box::after {
    background-image: url('../img/vignettes/chaussette polaire.jpg');
}

a[href="#chaussettes-fantaisie"].category-box::after {
    background-image: url('../img/vignettes/chaussettes-fantaisie.jpg');
}

a[href="#hoodies"].category-box::after {
    background-image: url('../img/vignettes/13-hoodie.jpg');
}

a[href="#lacets"].category-box::after {
    background-image: url('../img/vignettes/lacets.jpg');
}

a[href="#semelles"].category-box::after {
    background-image: url('../img/vignettes/semelles mouton.png');
}

a[href="#bonnets"].category-box::after {
    background-image: url('../img/vignettes/bonnet&echarpes.jpg');
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
    .hero-title {
        font-size: 3.5rem;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
}

/* ========================================
   SECTION NOTRE HISTOIRE (Gutenberg Blocks)
   ======================================== */

.wp-block-group.elvetik-our-story {
    padding: 4rem 0;
    background: var(--white);
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.elvetik-our-story .our-story-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    text-transform: uppercase !important;
    margin-bottom: 1.5rem !important;
    letter-spacing: 2px !important;
}

.elvetik-our-story .our-story-subtitle {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    color: var(--gray-dark) !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.3 !important;
}

.elvetik-our-story .our-story-text {
    font-size: 1rem !important;
    color: var(--gray-dark) !important;
    line-height: 1.6 !important;
    margin-bottom: 2rem !important;
}

.elvetik-our-story .our-story-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto 2rem auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem 3rem !important;
    max-width: 500px !important;
    justify-items: start !important;
}

.elvetik-our-story .our-story-features li {
    font-size: 1rem !important;
    color: var(--gray-dark) !important;
    font-weight: 500 !important;
    text-align: left !important;
    list-style: none !important;
    padding-left: 0 !important;
}

/* Colorer les checkmarks en teal */
.elvetik-our-story .our-story-features .checkmark-icon {
    color: var(--primary) !important;
    font-weight: 700 !important;
    margin-right: 0.5rem;
}

.elvetik-our-story .our-story-button .wp-block-button__link {
    padding: 0.75rem 2rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.5px !important;
    background-color: transparent !important;
    color: var(--gray-dark) !important;
    border: 2px solid var(--gray-dark) !important;
    text-decoration: none !important;
    transition: var(--transition) !important;
}

.elvetik-our-story .our-story-button .wp-block-button__link:hover {
    background-color: var(--gray-dark) !important;
    color: var(--white) !important;
}

@media (max-width: 768px) {
    .elvetik-our-story .our-story-features {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* ========================================
   BANNIÈRE PROMOTIONNELLE (Gutenberg Cover Block)
   ======================================== */

.elvetik-promo-banner-cover {
    position: relative;

    background-size: cover !important;
    background-position: top !important;
    background-repeat: no-repeat !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: 0 !important;
    right: 0 !important;
    overflow: hidden !important;
}

/* Forcer l'image de fond si elle n'est pas chargée automatiquement */
.elvetik-promo-banner-cover::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image: url('https://elvetik-dev.ddev.site/wp-content/uploads/2026/01/cover-web-3.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    z-index: 0 !important;
    display: block !important;
    opacity: 1 !important;
}

/* Réduire l'opacité de l'overlay pour mieux voir l'image */
.elvetik-promo-banner-cover .wp-block-cover__background {
    opacity: 0.2 !important;
}

/* S'assurer que l'image du bloc Cover est visible */
.elvetik-promo-banner-cover img.wp-block-cover__image-background,
.elvetik-promo-banner-cover .wp-block-cover__image-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.wp-block-cover.alignfull.elvetik-promo-banner-cover,
.wp-block-cover.elvetik-promo-banner-cover{
    padding:0px;
    min-height: inherit;
}
.wp-block-cover__image-background.wp-image-246602.size-full,
.wp-block-cover__image-background.wp-image-246702.size-full{
    position: relative;
    min-width: 100%;
    min-height: 100%;
}

.elvetik-promo-banner-cover .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
    text-align: center;
}

.elvetik-promo-banner-cover .promo-banner-title {
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    color: var(--white) !important;
    text-transform: uppercase !important;
    margin-bottom: 2rem !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.2 !important;
}

.elvetik-promo-banner-cover .promo-banner-button .wp-block-button__link {
    padding: 1rem 2.5rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 1rem !important;
    letter-spacing: 1px !important;
    background-color: var(--primary) !important;
    color: var(--white) !important;
    border: none !important;
    text-decoration: none !important;
    transition: var(--transition) !important;
}

.elvetik-promo-banner-cover .promo-banner-button .wp-block-button__link:hover {
    background-color: var(--primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .elvetik-promo-banner-cover .promo-banner-title {
        font-size: 2rem !important;
    }

    .elvetik-promo-banner-cover {
        min-height: 400px !important;
    }
}

/* ========================================
   MEILLEURES VENTES & SOLDES
   ======================================== */

.elvetik-best-sellers,
.elvetik-sales {
    padding: 0rem 0;

}

.elvetik-sales {
    background: var(--white);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gray-dark);
    text-transform: uppercase;
    margin-bottom: 2.5rem;
    text-align: left;
    letter-spacing: 1px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
}

.product-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

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

.product-card img {
    width: 100%;
    height: auto;
    display: block;
}

.product-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-dark);
    margin: 1rem 1rem 0.5rem 1rem;
    text-align: center;
}

.product-price {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-dark);
}

.product-price .original-price {
    text-decoration: line-through;
    color: var(--gray);
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

.product-price .sale-price {
    color: var(--accent-red);
}

.add-to-cart-btn {
    width: calc(100% - 2rem);
    margin: 0 1rem 1rem 1rem;
    padding: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* ========================================
   NEWSLETTER
   ======================================== */

.elvetik-newsletter {
    padding: 4rem 0;
    background: var(--bg-light);
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: 0 !important;
    right: 0 !important;
    overflow: hidden !important;
}

.newsletter-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.newsletter-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gray-dark);
    text-transform: uppercase;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.newsletter-subtitle {
    font-size: 1.1rem;
    color: var(--gray-dark);
    margin-bottom: 2rem;
    line-height: 1.5;
}

.newsletter-form {
    display: flex;
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

.newsletter-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border);
    border-radius: 4px;
    font-size: 1rem;
    outline: none;
    transition: var(--transition);
}

.newsletter-input:focus {
    border-color: var(--primary);
}

.newsletter-button {
    padding: 0.75rem 2rem;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-button {
        width: 100%;
    }

    .promo-banner-title {
        font-size: 2rem;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1.5rem;
    }
}

/* ========================================
   FOOTER
   ======================================== */

.elvetik-footer {
    background-color: var(--gray-dark) !important;
    color: var(--white) !important;
    padding: 0 !important;
}

.elvetik-footer-widgets {
    padding: 4rem 0 2rem 0;
    background-color: var(--gray-dark);
}

.elvetik-footer-widgets .footer-widget {
    margin-bottom: 2rem;
}

.elvetik-footer-widgets .footer-widget-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.elvetik-footer-widgets .footer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.elvetik-footer-widgets .footer-widget ul li {
    margin-bottom: 0.75rem;
}

.elvetik-footer-widgets .footer-widget ul li a,
.elvetik-footer-widgets .footer-widget a {
    color: var(--white);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
    opacity: 0.9;
}

.elvetik-footer-widgets .footer-widget ul li a:hover,
.elvetik-footer-widgets .footer-widget a:hover {
    opacity: 1;
    color: var(--primary);
}

/* Social Icons in Footer */
.elvetik-footer-widgets .footer-widget .social-icons {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.elvetik-footer-widgets .footer-widget .social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--white) !important;
    text-decoration: none !important;
    transition: var(--transition);
    font-size: 1.2rem;
}

.elvetik-footer-widgets .footer-widget .social-icons a i {
    color: var(--white) !important;
}

.elvetik-footer-widgets .footer-widget .social-icons a:hover {
    color: var(--primary) !important;
    transform: scale(1.1);
}

.elvetik-footer-widgets .footer-widget .social-icons a:hover i {
    color: var(--primary) !important;
}

/* Language Selector */
.elvetik-footer-widgets .footer-widget select {
    background-color: var(--gray-dark);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
    width: 100%;
    max-width: 200px;
}

.elvetik-footer-widgets .footer-widget select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Footer Copyright */
.elvetik-footer-copyright {
    background-color: var(--gray-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 0;
}

.footer-copyright-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.entry-footer {
    margin-top: -1rem !important;
}

.container-wide {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 2rem;
}

.copyright-text {
    margin: 0;
    color: var(--white);
    font-size: 0.9rem;
    opacity: 0.8;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-links .footer-link {
    color: var(--white);
    text-decoration: none;
    font-size: 0.9rem;
    opacity: 0.8;
    transition: var(--transition);
}

.footer-links .footer-link:hover {
    opacity: 1;
    color: var(--primary);
}

@media (max-width: 768px) {
    .elvetik-footer-widgets {
        padding: 3rem 0 1.5rem 0;
    }

    .footer-copyright-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-links {
        justify-content: center;
    }
}

/* ========================================
   WOOCOMMERCE SUBCATEGORIES SIDEBAR
   Design inspiré de elvetik.ch/projects/projet6/accessoires-variante-2.html
   ======================================== */

.woocommerce-sidebar {
    margin-bottom: 2rem;
    border-right: 1px solid #e5e5e5;
    padding-right: 2rem;
}

.subcategories-sidebar {
    background: transparent;
    padding: 0;
    margin-bottom: 2rem;
    position: sticky;
    top: 20px;
}

.subcategories-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: #333;
    padding: 0;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

.subcategory-item {
    margin-bottom: 0;
    border-bottom: none;
}

.subcategory-link {
    display: block;
    padding: 0.875rem 1rem;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    line-height: 1.5;
    font-weight: 400;
}

.subcategory-link:hover {
    color: var(--primary, #42a0a6);
    text-decoration: none;
}

.subcategory-item.current .subcategory-link {
    background-color: var(--primary, #42a0a6);
    color: #fff;
    font-weight: 500;
}

.subcategory-count {
    display: none;
}

/* Ensure row layout works */
.woocommerce-page .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.woocommerce-page .row>[class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
}

/* ========================================
   SUBCATEGORIES THUMBNAILS SECTION
   Miniatures des sous-catégories au-dessus des produits
   Design épuré et minimaliste
   ======================================== */

.subcategories-thumbnails-section {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e5e5e5;
}

.subcategories-thumbnails-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 3.5rem;
    color: #333;
    text-align: center;
}

.subcategories-thumbnails-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Responsive - 3 colonnes sur tablette */
@media (max-width: 991.98px) {
    .subcategories-thumbnails-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

/* Responsive - 2 colonnes sur petite tablette */
@media (max-width: 767.98px) {
    .subcategories-thumbnails-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Responsive - 1 colonne sur mobile */
@media (max-width: 575.98px) {
    .subcategories-thumbnails-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.subcategory-thumbnail {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #333;
    transition: opacity 0.2s ease;
    background: #fff;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    position: relative;
}

.subcategory-thumbnail:hover {
    transform: none;
    box-shadow: none;
    text-decoration: none;
    color: #333;
    opacity: 0.9;
}

.subcategory-thumbnail.current {
    border: none;
}

.subcategory-thumbnail-image {
    width: 100%;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
    background: #fff;
    margin-bottom: 0;
    border: 1px solid #f0f0f0;
}

.subcategory-thumbnail-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.subcategory-thumbnail-placeholder {
    width: 100%;
    padding-top: 100%;
    position: relative;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f0f0f0;
    margin-bottom: 0;
}

.subcategory-thumbnail-placeholder .placeholder-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    opacity: 0.2;
}

.subcategory-thumbnail-content {
    padding: 0;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
}

.subcategory-thumbnail-title {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    color: var(--primary, #42a0a6);
    text-transform: none;
    letter-spacing: normal;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.subcategory-thumbnail.current .subcategory-thumbnail-title {
    color: var(--primary, #42a0a6);
    font-weight: 600;
}

.subcategory-thumbnail:hover .subcategory-thumbnail-title {
    color: var(--primary, #42a0a6);
}

/* Responsive */
@media (max-width: 991px) {
    .subcategories-sidebar {
        position: relative;
        top: 0;
        margin-bottom: 2rem;
    }

    .woocommerce-sidebar {
        margin-bottom: 2rem;
    }

    .subcategories-thumbnails-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .subcategories-thumbnails-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .subcategory-thumbnail-title {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .subcategories-thumbnails-grid {
        gap: 1rem;
    }

    .subcategory-thumbnail-title {
        font-size: 0.95rem;
    }
}

/* ========================================
   FAQ CONTENT LAYOUT
   CSS commun pour les pages FAQ
   ======================================== */

body.faq-content-layout .entry-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

h1 {
    text-align: center;
}

body.faq-content-layout .entry-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
    text-align: center;
}

body.faq-content-layout .entry-content h1+h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary, #42a0a6);
    margin-bottom: 3rem;
    text-align: center;
    border-bottom: none;
    padding-bottom: 0;
}

body.faq-content-layout .entry-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-top: 3rem;
    margin-bottom: 1rem;
    line-height: 1.4;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f0f0f0;
}

body.faq-content-layout .entry-content h2:first-of-type {
    margin-top: 0;
}

body.faq-content-layout .entry-content h2:not(:first-of-type) {
    margin-top: 3rem;
}

body.faq-content-layout .entry-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.4;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
}

body.faq-content-layout .entry-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5rem;
    text-align: left;
}

body.faq-content-layout .entry-content h2+p {
    margin-top: 1.5rem;
}

body.faq-content-layout .entry-content ul,
body.faq-content-layout .entry-content ol {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

body.faq-content-layout .entry-content ul li,
body.faq-content-layout .entry-content ol li {
    margin-bottom: 0.75rem;
}

body.faq-content-layout .entry-content p strong {
    color: #333;
    font-weight: 600;
}

/* Responsive FAQ Layout */
@media (max-width: 768px) {
    body.faq-content-layout .entry-content {
        padding: 1.5rem 1rem 3rem;
    }

    body.faq-content-layout .entry-content h1 {
        font-size: 2rem;
    }

    body.faq-content-layout .entry-content h1+h2 {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }

    body.faq-content-layout .entry-content h2 {
        font-size: 1.25rem;
        margin-top: 2.5rem;
    }

    body.faq-content-layout .entry-content h3 {
        font-size: 1.125rem;
    }

    body.faq-content-layout .entry-content p,
    body.faq-content-layout .entry-content ul,
    body.faq-content-layout .entry-content ol {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* ========================================
   FAQ PAGE STYLES (Legacy - pour compatibilité)
   Ces styles sont maintenant couverts par .faq-content-layout
   ======================================== */

body.page-faq .entry-content,
body.page-id-246623 .entry-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

body.page-faq .entry-content h1,
body.page-id-246623 .entry-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
    text-align: center;
    padding-top: 1rem;
}

body.page-faq .entry-content h1+h2,
body.page-id-246623 .entry-content h1+h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary, #42a0a6);
    margin-bottom: 3rem;
    text-align: center;
    border-bottom: none;
    padding-bottom: 0;
}

body.page-faq .entry-content h2,
body.page-id-246623 .entry-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-top: 3rem;
    margin-bottom: 1rem;
    line-height: 1.4;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f0f0f0;
}

body.page-faq .entry-content h2:first-of-type,
body.page-id-246623 .entry-content h2:first-of-type {
    margin-top: 0;
}

body.page-faq .entry-content h2:not(:first-of-type),
body.page-id-246623 .entry-content h2:not(:first-of-type) {
    margin-top: 3rem;
}

body.page-faq .entry-content p,
body.page-id-246623 .entry-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5rem;
    text-align: left;
}

body.page-faq .entry-content h2+p,
body.page-id-246623 .entry-content h2+p {
    margin-top: 1.5rem;
}

/* Responsive FAQ */
@media (max-width: 768px) {

    body.page-faq .entry-content,
    body.page-id-246623 .entry-content {
        padding: 1.5rem 1rem 3rem;
    }

    body.page-faq .entry-content h1,
    body.page-id-246623 .entry-content h1 {
        font-size: 2rem;
    }

    body.page-faq .entry-content h1+h2,
    body.page-id-246623 .entry-content h1+h2 {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }

    body.page-faq .entry-content h2,
    body.page-id-246623 .entry-content h2 {
        font-size: 1.25rem;
        margin-top: 2.5rem;
    }

    body.page-faq .entry-content p,
    body.page-id-246623 .entry-content p {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* ========================================
   ELVETIK CONTENT LAYOUT
   CSS commun pour toutes les pages du menu "Elvetik"
   Basé sur le design de la page "Qui sommes-nous"
   ======================================== */

body.elvetik-content-layout .entry-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

body.elvetik-content-layout .entry-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 2rem;
    text-align: center;
    padding-top: 1rem;
}

body.elvetik-content-layout .entry-content h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary, #42a0a6);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f0f0f0;
}

body.elvetik-content-layout .entry-content h2:first-of-type {
    margin-top: 2rem;
}

body.elvetik-content-layout .entry-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary, #42a0a6);
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
}

body.elvetik-content-layout .entry-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5rem;
    text-align: left;
}

body.elvetik-content-layout .entry-content p strong {
    color: #333;
    font-weight: 600;
}

body.elvetik-content-layout .entry-content ul,
body.elvetik-content-layout .entry-content ol {
    list-style: disc;
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
    color: #555;
}

body.elvetik-content-layout .entry-content ul li,
body.elvetik-content-layout .entry-content ol li {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 0.5rem;
}

/* Styles spécifiques pour les images dans le layout Elvetik */
body.elvetik-content-layout .entry-content .merchandising-images,
body.elvetik-content-layout .entry-content .size-tables {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

body.elvetik-content-layout .entry-content .merchandising-images img,
body.elvetik-content-layout .entry-content .size-tables img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.elvetik-content-layout .entry-content .merchandising-images img:hover,
body.elvetik-content-layout .entry-content .size-tables img:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Responsive Elvetik Content Layout */
@media (max-width: 768px) {
    body.elvetik-content-layout .entry-content {
        padding: 1.5rem 1rem 3rem;
    }

    body.elvetik-content-layout .entry-content h1 {
        font-size: 2rem;
    }

    body.elvetik-content-layout .entry-content h2 {
        font-size: 1.5rem;
        margin-top: 2.5rem;
    }

    body.elvetik-content-layout .entry-content h3 {
        font-size: 1.25rem;
    }

    body.elvetik-content-layout .entry-content p,
    body.elvetik-content-layout .entry-content ul,
    body.elvetik-content-layout .entry-content ol {
        font-size: 1rem;
        line-height: 1.7;
    }

    body.elvetik-content-layout .entry-content .merchandising-images,
    body.elvetik-content-layout .entry-content .size-tables {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ========================================
   QUI SOMMES-NOUS PAGE STYLES (Legacy - pour compatibilité)
   Ces styles sont maintenant couverts par .elvetik-content-layout
   ======================================== */

body.page-qui-sommes-nous .entry-content,
body.page-id-246625 .entry-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

body.page-qui-sommes-nous .entry-content h1,
body.page-id-246625 .entry-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 2rem;
    text-align: center;
    padding-top: 1rem;
}

body.page-qui-sommes-nous .entry-content h2,
body.page-id-246625 .entry-content h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary, #42a0a6);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f0f0f0;
}

body.page-qui-sommes-nous .entry-content h2:first-of-type,
body.page-id-246625 .entry-content h2:first-of-type {
    margin-top: 2rem;
}

body.page-qui-sommes-nous .entry-content p,
body.page-id-246625 .entry-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5rem;
    text-align: left;
}

body.page-qui-sommes-nous .entry-content p strong,
body.page-id-246625 .entry-content p strong {
    color: #333;
    font-weight: 600;
}

/* Responsive Qui sommes-nous */
@media (max-width: 768px) {

    body.page-qui-sommes-nous .entry-content,
    body.page-id-246625 .entry-content {
        padding: 1.5rem 1rem 3rem;
    }

    body.page-qui-sommes-nous .entry-content h1,
    body.page-id-246625 .entry-content h1 {
        font-size: 2rem;
    }

    body.page-qui-sommes-nous .entry-content h2,
    body.page-id-246625 .entry-content h2 {
        font-size: 1.5rem;
        margin-top: 2.5rem;
    }

    body.page-qui-sommes-nous .entry-content p,
    body.page-id-246625 .entry-content p {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* ========================================
   MERCHANDISING PAGE STYLES
   Styles spécifiques pour la page Merchandising uniquement
   ======================================== */

body.page-merchandising .entry-content,
body.page-id-246633 .entry-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

body.page-merchandising .entry-content h1,
body.page-id-246633 .entry-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 2rem;
    text-align: center;
    padding-top: 1rem;
}

body.page-merchandising .entry-content h2,
body.page-id-246633 .entry-content h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary, #42a0a6);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f0f0f0;
}

body.page-merchandising .entry-content .merchandising-images,
body.page-id-246633 .entry-content .merchandising-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

body.page-merchandising .entry-content .merchandising-images img,
body.page-id-246633 .entry-content .merchandising-images img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.page-merchandising .entry-content .merchandising-images img:hover,
body.page-id-246633 .entry-content .merchandising-images img:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

body.page-merchandising .entry-content p,
body.page-id-246633 .entry-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5rem;
    text-align: left;
}

body.page-merchandising .entry-content p strong,
body.page-id-246633 .entry-content p strong {
    color: #333;
    font-weight: 600;
}

/* Responsive Merchandising */
@media (max-width: 768px) {

    body.page-merchandising .entry-content,
    body.page-id-246633 .entry-content {
        padding: 1.5rem 1rem 3rem;
    }

    body.page-merchandising .entry-content h1,
    body.page-id-246633 .entry-content h1 {
        font-size: 2rem;
    }

    body.page-merchandising .entry-content .merchandising-images,
    body.page-id-246633 .entry-content .merchandising-images {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 2rem 0;
    }

    body.page-merchandising .entry-content p,
    body.page-id-246633 .entry-content p {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* ========================================
   NOS VALEURS PAGE STYLES
   Styles spécifiques pour la page "Nos valeurs" uniquement
   ======================================== */

body.page-nos-valeurs .entry-content,
body.page-id-246635 .entry-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

body.page-nos-valeurs .entry-content h1,
body.page-id-246635 .entry-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 2rem;
    text-align: center;
    padding-top: 1rem;
}

body.page-nos-valeurs .entry-content h2,
body.page-id-246635 .entry-content h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary, #42a0a6);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f0f0f0;
}

body.page-nos-valeurs .entry-content h2:first-of-type,
body.page-id-246635 .entry-content h2:first-of-type {
    margin-top: 2rem;
}

body.page-nos-valeurs .entry-content p,
body.page-id-246635 .entry-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5rem;
    text-align: left;
}

body.page-nos-valeurs .entry-content p strong,
body.page-id-246635 .entry-content p strong {
    color: #333;
    font-weight: 600;
}

/* Responsive Nos valeurs */
@media (max-width: 768px) {

    body.page-nos-valeurs .entry-content,
    body.page-id-246635 .entry-content {
        padding: 1.5rem 1rem 3rem;
    }

    body.page-nos-valeurs .entry-content h1,
    body.page-id-246635 .entry-content h1 {
        font-size: 2rem;
    }

    body.page-nos-valeurs .entry-content h2,
    body.page-id-246635 .entry-content h2 {
        font-size: 1.5rem;
        margin-top: 2.5rem;
    }

    body.page-nos-valeurs .entry-content p,
    body.page-id-246635 .entry-content p {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* ========================================
   GUIDE DES TAILLES PAGE STYLES
   Styles spécifiques pour la page "Guide des tailles" uniquement
   ======================================== */

body.page-guide-des-tailles .entry-content,
body.page-id-246637 .entry-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

body.page-guide-des-tailles .entry-content h1,
body.page-id-246637 .entry-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 2rem;
    text-align: center;
    padding-top: 1rem;
}

body.page-guide-des-tailles .entry-content h2,
body.page-id-246637 .entry-content h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary, #42a0a6);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f0f0f0;
}

body.page-guide-des-tailles .entry-content h2:first-of-type,
body.page-id-246637 .entry-content h2:first-of-type {
    margin-top: 2rem;
}

body.page-guide-des-tailles .entry-content p,
body.page-id-246637 .entry-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5rem;
    text-align: left;
}

body.page-guide-des-tailles .entry-content ul,
body.page-id-246637 .entry-content ul {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

body.page-guide-des-tailles .entry-content ul li,
body.page-id-246637 .entry-content ul li {
    margin-bottom: 0.75rem;
}

body.page-guide-des-tailles .entry-content .size-tables,
body.page-id-246637 .entry-content .size-tables {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

body.page-guide-des-tailles .entry-content .size-tables img,
body.page-id-246637 .entry-content .size-tables img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

body.page-guide-des-tailles .entry-content a,
body.page-id-246637 .entry-content a {
    color: var(--primary, #42a0a6);
    text-decoration: underline;
    transition: color 0.2s ease;
}

body.page-guide-des-tailles .entry-content a:hover,
body.page-id-246637 .entry-content a:hover {
    color: #2d7a7e;
    text-decoration: none;
}

body.page-guide-des-tailles .entry-content p strong,
body.page-id-246637 .entry-content p strong {
    color: #333;
    font-weight: 600;
}

/* Responsive Guide des tailles */
@media (max-width: 768px) {

    body.page-guide-des-tailles .entry-content,
    body.page-id-246637 .entry-content {
        padding: 1.5rem 1rem 3rem;
    }

    body.page-guide-des-tailles .entry-content h1,
    body.page-id-246637 .entry-content h1 {
        font-size: 2rem;
    }

    body.page-guide-des-tailles .entry-content h2,
    body.page-id-246637 .entry-content h2 {
        font-size: 1.5rem;
        margin-top: 2.5rem;
    }

    body.page-guide-des-tailles .entry-content p,
    body.page-guide-des-tailles .entry-content ul,
    body.page-id-246637 .entry-content p,
    body.page-id-246637 .entry-content ul {
        font-size: 1rem;
        line-height: 1.7;
    }

    body.page-guide-des-tailles .entry-content .size-tables,
    body.page-id-246637 .entry-content .size-tables {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 1.5rem 0;
    }
}

/* ========================================
   MENTIONS LEGALES PAGE STYLES
   Styles spécifiques pour la page "Mentions légales" uniquement
   ======================================== */

body.page-mentions-legales .entry-content,
body.page-id-246642 .entry-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

body.page-mentions-legales .entry-content h1,
body.page-id-246642 .entry-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 2rem;
    text-align: center;
    padding-top: 1rem;
}

body.page-mentions-legales .entry-content h2,
body.page-id-246642 .entry-content h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary, #42a0a6);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f0f0f0;
}

body.page-mentions-legales .entry-content h2:first-of-type,
body.page-id-246642 .entry-content h2:first-of-type {
    margin-top: 2rem;
}

body.page-mentions-legales .entry-content h3,
body.page-id-246642 .entry-content h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: #333;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

body.page-mentions-legales .entry-content p,
body.page-id-246642 .entry-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5rem;
    text-align: left;
}

body.page-mentions-legales .entry-content ul,
body.page-id-246642 .entry-content ul {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

body.page-mentions-legales .entry-content ul li,
body.page-id-246642 .entry-content ul li {
    margin-bottom: 0.75rem;
}

body.page-mentions-legales .entry-content p strong,
body.page-id-246642 .entry-content p strong {
    color: #333;
    font-weight: 600;
}

/* Responsive Mentions légales */
@media (max-width: 768px) {

    body.page-mentions-legales .entry-content,
    body.page-id-246642 .entry-content {
        padding: 1.5rem 1rem 3rem;
    }

    body.page-mentions-legales .entry-content h1,
    body.page-id-246642 .entry-content h1 {
        font-size: 2rem;
    }

    body.page-mentions-legales .entry-content h2,
    body.page-id-246642 .entry-content h2 {
        font-size: 1.5rem;
        margin-top: 2.5rem;
    }

    body.page-mentions-legales .entry-content h3,
    body.page-id-246642 .entry-content h3 {
        font-size: 1.2rem;
    }

    body.page-mentions-legales .entry-content p,
    body.page-mentions-legales .entry-content ul,
    body.page-id-246642 .entry-content p,
    body.page-id-246642 .entry-content ul {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* ========================================
   CONDITIONS GENERALES DE VENTE PAGE STYLES
   Styles spécifiques pour la page "Conditions générales de vente" uniquement
   ======================================== */

body.page-conditions-generales-de-vente .entry-content,
body.page-id-246647 .entry-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

body.page-conditions-generales-de-vente .entry-content h1,
body.page-id-246647 .entry-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 2rem;
    text-align: center;
    padding-top: 1rem;
}

body.page-conditions-generales-de-vente .entry-content h2,
body.page-id-246647 .entry-content h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary, #42a0a6);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f0f0f0;
}

body.page-conditions-generales-de-vente .entry-content h2:first-of-type,
body.page-id-246647 .entry-content h2:first-of-type {
    margin-top: 2rem;
}

body.page-conditions-generales-de-vente .entry-content p,
body.page-id-246647 .entry-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5rem;
    text-align: left;
}

body.page-conditions-generales-de-vente .entry-content ol,
body.page-conditions-generales-de-vente .entry-content ul,
body.page-id-246647 .entry-content ol,
body.page-id-246647 .entry-content ul {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

body.page-conditions-generales-de-vente .entry-content ol li,
body.page-conditions-generales-de-vente .entry-content ul li,
body.page-id-246647 .entry-content ol li,
body.page-id-246647 .entry-content ul li {
    margin-bottom: 0.75rem;
}

body.page-conditions-generales-de-vente .entry-content p strong,
body.page-id-246647 .entry-content p strong {
    color: #333;
    font-weight: 600;
}

body.page-conditions-generales-de-vente .entry-content div[style*="background-color: #f8f9fa"],
body.page-id-246647 .entry-content div[style*="background-color: #f8f9fa"] {
    margin: 2rem 0;
    padding: 1.5rem;
    background-color: #f8f9fa !important;
    border-left: 4px solid var(--primary, #42a0a6);
    border-radius: 4px;
}

/* Responsive Conditions générales de vente */
@media (max-width: 768px) {

    body.page-conditions-generales-de-vente .entry-content,
    body.page-id-246647 .entry-content {
        padding: 1.5rem 1rem 3rem;
    }

    body.page-conditions-generales-de-vente .entry-content h1,
    body.page-id-246647 .entry-content h1 {
        font-size: 2rem;
    }

    body.page-conditions-generales-de-vente .entry-content h2,
    body.page-id-246647 .entry-content h2 {
        font-size: 1.5rem;
        margin-top: 2.5rem;
    }

    body.page-conditions-generales-de-vente .entry-content p,
    body.page-conditions-generales-de-vente .entry-content ol,
    body.page-conditions-generales-de-vente .entry-content ul,
    body.page-id-246647 .entry-content p,
    body.page-id-246647 .entry-content ol,
    body.page-id-246647 .entry-content ul {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* ========================================
   LANGUAGE SWITCHER (WPML)
   ======================================== */

.language-switcher-wrapper {
    margin-right: 0 !important;
}

.language-switcher-btn {
    color: #333;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 300;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.language-switcher-btn:hover,
.language-switcher-btn:focus {
    color: var(--primary, #42a0a6);
    border-color: var(--primary, #42a0a6);
    background: #f8f9fa;
    text-decoration: none;
}

.language-switcher-btn::after {
    margin-left: 0.25rem;
    font-size: 0.75rem;
}

.language-code {
    color: var(--black);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: var(--transition);
    white-space: nowrap;
}

.language-switcher-wrapper .dropdown-menu {
    min-width: 150px;
    padding: 0.5rem 0;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.language-switcher-wrapper .dropdown-item {
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
    transition: background-color 0.2s ease;
}

.language-switcher-wrapper .dropdown-item:hover {
    background-color: #f8f9fa;
    color: var(--primary, #42a0a6);
}

.language-switcher-wrapper .dropdown-item.active {
    background-color: #f0f9fa;
    color: var(--primary, #42a0a6);
    font-weight: 500;
}

.language-switcher-wrapper .dropdown-item .check-mark {
    color: var(--primary, #42a0a6);
    font-weight: bold;
    margin-left: 0.5rem;
}

.language-name {
    flex: 1;
}

/* Responsive */
@media (max-width: 991px) {
    .language-switcher-wrapper {
        margin-right: 0.25rem;
    }

    .language-switcher-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
    }
}




/* ========================================
    Product details page styles
    ======================================== */

.product_meta {
    display: none;
}

.single_add_to_cart_button {
    background-color: var(--primary) !important;
    color: var(--white) !important;
    border-color: var(--primary) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

.single_add_to_cart_button:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.single-product div.product .row {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

.single-product div.product .summary,
.single-product div.product .col-md-6:has(.summary) {
    flex: 0 0 calc(65% - 3rem) !important;
    max-width: calc(65% - 3rem) !important;
}

@media (max-width: 991.98px) {
    .single-product div.product .row {
        gap: 2rem;
    }

    .single-product div.product .woocommerce-product-gallery,
    .single-product div.product .col-md-6:has(.woocommerce-product-gallery) {
        flex: 0 0 40% !important;
        max-width: 40% !important;
    }

    .single-product div.product .summary,
    .single-product div.product .col-md-6:has(.summary) {
        flex: 0 0 calc(60% - 2rem) !important;
        max-width: calc(60% - 2rem) !important;
    }
}

@media (max-width: 767.98px) {
    .single-product div.product .row {
        flex-direction: column;
        gap: 1.5rem;
    }

    .single-product div.product .woocommerce-product-gallery,
    .single-product div.product .col-md-6:has(.woocommerce-product-gallery),
    .single-product div.product .summary,
    .single-product div.product .col-md-6:has(.summary) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Margin uniquement pour la section détail du produit */
.single-product div.product,
.woocommerce.single-product div.product,
.woocommerce-page.single-product div.product {
    margin-left: 12% !important;
    margin-right: 12% !important;
}

@media (max-width: 726px) {
    .single-product div.product,
    .woocommerce.single-product div.product,
    .woocommerce-page.single-product div.product {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ========================================
   WOOCOMMERCE PRODUCT TABS - CONSEIL D'ENTRETIEN
   ======================================== */

/* Styles pour le contenu de l'onglet Conseil d'entretien */
.care-instructions-content {
    padding: 1.5rem 0;
    line-height: 1.8;
}

.care-instructions-content > p:first-child {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--gray-dark);
}

.care-instructions-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.care-instructions-content h3:first-of-type {
    margin-top: 0;
}

.care-instructions-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}

.care-instructions-content ul li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.75rem;
}

.care-instructions-content ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
    font-size: 1.2rem;
}

.care-instructions-content p {
    margin-bottom: 1rem;
    color: var(--gray-dark);
}

/* Responsive */
@media (max-width: 767.98px) {
    .care-instructions-content {
        padding: 1rem 0;
    }

    .care-instructions-content > p:first-child {
        font-size: 1rem;
    }

    .care-instructions-content h3 {
        font-size: 1.1rem;
        margin-top: 1.5rem;
    }
}
 
/* ========================================
   WOOCOMMERCE PRODUCT CLEAR BUTTON STYLES
   ======================================== */


.woof_reset_button_2 {
    background-color: var(--primary) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

.woof_reset_button_2:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* ========================================
    WP BLOCK HEADING STYLES
    ======================================== */

.wp-block-heading a {
    color: var(--primary) !important;
    text-decoration: none !important;
}

/* ========================================
   WOOCOMMERCE RELATED PRODUCTS - RESPONSIVE
   ======================================== */

/* Produits similaires - Layout responsive */
.woocommerce .related.products,
.woocommerce-related-products,
.related.products {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    clear: both;
}

/* Override conteneurs Bootstrap/WooCommerce qui limitent la largeur */
.woocommerce .related.products .container,
.woocommerce-related-products .container,
.related.products .container,
.woocommerce .related.products .container-fluid,
.woocommerce-related-products .container-fluid,
.related.products .container-fluid {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Conteneur des produits - Force full width */
.woocommerce .related.products .products,
.woocommerce-related-products .products,
.related.products .products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    align-items: stretch !important; /* Force toutes les cartes à avoir la même hauteur */
}

/* Items de la liste - Force full width et height */
.woocommerce .related.products .products li,
.woocommerce-related-products .products li,
.related.products .products li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box;
    display: flex !important; /* Flex pour que le contenu s'étire */
    flex-direction: column;
    height: 100%;
}

/* Responsive - Tablette (3 colonnes) */
@media (max-width: 1091.98px) {
    .woocommerce .related.products .products,
    .woocommerce-related-products .products,
    .related.products .products {
        grid-template-columns: repeat(3, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .woocommerce .related.products .products li,
    .woocommerce-related-products .products li,
    .related.products .products li {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Responsive - Petite tablette (2 colonnes) */
@media (max-width: 992px) {
    .woocommerce .related.products,
    .woocommerce-related-products,
    .related.products {
        width: 100% !important;
        max-width: 100% !important;
    }

    .woocommerce .related.products .products,
    .woocommerce-related-products .products,
    .related.products .products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
        width: 100% !important;
        max-width: 100% !important;
    }

    .woocommerce .related.products .products li,
    .woocommerce-related-products .products li,
    .related.products .products li {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Responsive - Mobile (1 colonne) */
@media (max-width: 575.98px) {
    .woocommerce .related.products,
    .woocommerce-related-products,
    .related.products {
        padding: 0 0.5rem;
        margin-top: 2rem;
        width: 100% !important;
        max-width: 100% !important;
    }

    .woocommerce .related.products .products,
    .woocommerce-related-products .products,
    .related.products .products {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        width: 100% !important;
        max-width: 100% !important;
    }

    .woocommerce .related.products .products li,
    .woocommerce-related-products .products li,
    .related.products .products li {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Titre de la section */
.woocommerce .related.products h2,
.woocommerce-related-products h2,
.related.products h2 {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

@media (max-width: 767.98px) {
    .woocommerce .related.products h2,
    .woocommerce-related-products h2,
    .related.products h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
}

/* Produits individuels dans la grille - Hauteur égale */
.woocommerce .related.products .product,
.woocommerce-related-products .product,
.related.products .product {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    float: none !important;
    box-sizing: border-box;
    height: 100% !important; /* Prend toute la hauteur du li */
    display: flex !important;
    flex-direction: column;
}

/* Conteneurs internes des produits - Flex pour distribution */
.woocommerce .related.products .product .woocommerce-loop-product__link,
.woocommerce-related-products .product .woocommerce-loop-product__link,
.related.products .product .woocommerce-loop-product__link,
.woocommerce .related.products .product a,
.woocommerce-related-products .product a,
.related.products .product a {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
    text-decoration: none;
}

/* Wrapper pour le contenu texte (titre, prix, bouton) */
.woocommerce .related.products .product .woocommerce-loop-product__link,
.woocommerce-related-products .product .woocommerce-loop-product__link,
.related.products .product .woocommerce-loop-product__link {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Prix - Pas de flex-grow */
.woocommerce .related.products .product .price,
.woocommerce-related-products .product .price,
.related.products .product .price {
    flex-grow: 0;
    flex-shrink: 0;
    margin-top: 0;
    margin-bottom: 0.75rem;
}

/* Bouton ajouter au panier - Toujours en bas */
.woocommerce .related.products .product .button,
.woocommerce-related-products .product .button,
.related.products .product .button,
.woocommerce .related.products .product .add_to_cart_button,
.woocommerce-related-products .product .add_to_cart_button,
.related.products .product .add_to_cart_button {
    flex-grow: 0;
    flex-shrink: 0;
    margin-top: auto; /* Pousse le bouton vers le bas */
    margin-bottom: 0;
}

/* Espace flexible entre le contenu et le bouton */
.woocommerce .related.products .product .woocommerce-loop-product__link::after,
.woocommerce-related-products .product .woocommerce-loop-product__link::after,
.related.products .product .woocommerce-loop-product__link::after {
    content: '';
    flex-grow: 1;
    min-height: 0.5rem;
}

/* Image - Hauteur fixe ou auto mais pas flex-grow */
.woocommerce .related.products .product img,
.woocommerce-related-products .product img,
.related.products .product img,
.woocommerce .related.products .product .woocommerce-loop-product__link img,
.woocommerce-related-products .product .woocommerce-loop-product__link img,
.related.products .product .woocommerce-loop-product__link img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    display: block;
    box-sizing: border-box;
    flex-shrink: 0;
    object-fit: cover;
}

/* Images des produits */
.woocommerce .related.products .product img,
.woocommerce-related-products .product img,
.related.products .product img,
.woocommerce .related.products .product .woocommerce-loop-product__link img,
.woocommerce-related-products .product .woocommerce-loop-product__link img,
.related.products .product .woocommerce-loop-product__link img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    display: block;
    box-sizing: border-box;
}

/* Override Bootstrap columns si présentes */
.woocommerce .related.products .row,
.woocommerce-related-products .row,
.related.products .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.woocommerce .related.products [class*="col-"],
.woocommerce-related-products [class*="col-"],
.related.products [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.woocommerce-loop-product__title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    text-align: center !important;
}

.add_to_cart_button {
    color: var(--white) !important;
}
.page-link.active {
    color: var(--primary) !important;
}

.page-link.active, .active > .page-link {
	z-index: 3;
	color: var(--white) !important;
	background-color: var(--primary) !important;
	border-color: var(--primary) !important;
}