/* ============================================================
   LAKAY-HEADER.CSS — Header Lakay Company (topbar + header + mobile)
   Remplace : toutes les sections header de style.css
              + sections 1 à 14 et 16 de lakay-ui.css
   À charger APRÈS variables.css et style.css
   Breakpoints :
     ≥ 1025px      → nav desktop + recherche dans la barre + catégories topbar
     769 – 1024px  → hamburger (drawers) ; la recherche RESTE dans la barre
     ≤ 768px       → hamburger + loupe ; la recherche passe sous le header
     ≤ 1024px      → minicart en modal (bas d'écran, 60vh)
   ============================================================ */

/* ============================================================
   0. TOKENS DU HEADER
   Alias vers variables.css : en mode sombre, variables.css redéfinit
   déjà --lk-white (= surface), --lk-text, --lk-border, --lk-blue…
   → il n'y a plus de valeurs sombres en dur ici, sauf 3 exceptions.

   ATTENTION : --lk-white = SURFACE (blanc en clair, #1A2438 en sombre).
   Pour un texte posé sur une couleur vive (bouton bleu, topbar…),
   on utilise --lk-on-accent (toujours blanc).
   ============================================================ */
:root {
    --lk-hd-topbar:       var(--lk-blue, #00209F);
    --lk-hd-surface:      var(--lk-white, #FFFFFF);
    --lk-hd-surface-soft: var(--lk-bg-soft, #F8FAFF);
    --lk-hd-hover:        #F0F4FF;
    --lk-hd-text:         var(--lk-text, #1A1A1A);
    --lk-hd-muted:        var(--lk-muted, #666666);
    --lk-hd-line:         var(--lk-border, #E0E0E0);
    --lk-hd-accent:       var(--lk-blue, #00209F);
    --lk-hd-shadow:       0 8px 24px rgba(0, 0, 0, 0.12);

    /* Hauteur du logo : la largeur suit automatiquement le format du fichier */
    --lk-logo-h:          48px;   /* header : desktop */
    --lk-logo-h-mobile:   40px;   /* header : tablette / mobile (≤ 1024px) */
}

/* Les 3 seules valeurs propres au mode sombre */
html[data-theme="dark"] {
    --lk-hd-topbar: var(--lk-blue-dk, #001580);
    --lk-hd-hover:  rgba(59, 130, 246, 0.15);
    --lk-hd-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* Page figée quand un drawer ou le minicart modal est ouvert */
html.lk-no-scroll,
html.lk-no-scroll body { overflow: hidden; }

/* ============================================================
   1. RESET DU HEADER DOKANI
   ============================================================ */
.top-bar,
.top-bar-align-left,
.site-header,
#masthead,
.main-navigation,
#site-navigation {
    display: none !important;
}

/* ============================================================
   2. TOP BAR
   ============================================================ */
.lk-topbar {
    background: var(--lk-hd-topbar);
    height: var(--lk-h-topbar, 50px);
    position: sticky;
    top: 0;
    z-index: 1100;
    overflow: visible;           /* sinon les sous-menus sont coupés */
}

.lk-topbar-inner {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0 10px;             /* même marge que .lk-header-inner */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    overflow: visible;
}

/* Catégories (desktop) */
.lk-topbar-cats {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.lk-topmenu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lk-topmenu > li { position: relative; }

.lk-topmenu > li > a {
    display: flex !important;
    align-items: center !important;
    height: var(--lk-h-topbar, 50px);
    padding: 0 12px !important;
    color: var(--lk-on-accent, #FFFFFF) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .2s, color .2s;
}

.lk-topmenu > li:hover > a,
.lk-topmenu > li:focus-within > a {
    background: rgba(255, 255, 255, .13) !important;
    color: var(--lk-gold, #F5A623) !important;
}

/* Bouton hamburger catégories (mobile) */
.lk-topbar-hamb { display: none; }

html body .lk-topbar-hamb {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, .12) !important;
    border: 1.5px solid rgba(255, 255, 255, .3) !important;
    border-radius: var(--lk-radius, 6px);
    box-shadow: none !important;
    outline: none;
}

@media (hover: hover) {
    html body .lk-topbar-hamb:hover { background: rgba(255, 255, 255, .22) !important; }
}

.lk-topbar-hamb span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--lk-on-accent, #FFFFFF);
    border-radius: 2px;
}

/* Zone droite */
.lk-topbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ============================================================
   3. BOUTONS DE LA TOPBAR — look commun
   (toggle thème, lis anvi, panier, user, login)
   Spécificité "html body" : bat le CSS inline de Dokani sur
   a / button, sans avoir à lister :link :visited :focus...
   ============================================================ */
html body .lk-theme-toggle,
html body a.lk-wishlist-icon,
html body a.lk-cart-btn,
html body .lk-user-btn,
html body a.lk-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    min-width: 36px;
    margin: 0;
    padding: 0 10px;
    box-sizing: border-box;
    color: var(--lk-on-accent, #FFFFFF) !important;
    background: rgba(255, 255, 255, .12) !important;
    border: 1.5px solid rgba(255, 255, 255, .3) !important;
    border-radius: var(--lk-radius, 6px);
    box-shadow: none;
    outline: none;
    font-size: 12.5px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .25s ease, border-color .25s ease, color .25s ease, transform .15s ease;
}

/* Boutons icône seule */
html body .lk-theme-toggle,
html body a.lk-wishlist-icon {
    width: 36px;
    padding: 0;
    flex-shrink: 0;
}

@media (hover: hover) {
    html body .lk-theme-toggle:hover,
    html body a.lk-cart-btn:hover,
    html body .lk-user-btn:hover,
    html body a.lk-login-btn:hover {
        background: rgba(255, 255, 255, .22) !important;
        border-color: rgba(255, 255, 255, .5) !important;
    }

    html body a.lk-wishlist-icon:hover {
        background: rgba(245, 166, 35, .2) !important;
        border-color: var(--lk-gold, #F5A623) !important;
        color: var(--lk-gold, #F5A623) !important;
    }
}

/* Focus resté après un clic / toucher (mobile) : aucun style.
   Le focus clavier (:focus-visible) garde son anneau doré. */
html body .lk-theme-toggle:focus:not(:focus-visible),
html body a.lk-wishlist-icon:focus:not(:focus-visible),
html body a.lk-cart-btn:focus:not(:focus-visible),
html body .lk-user-btn:focus:not(:focus-visible),
html body a.lk-login-btn:focus:not(:focus-visible),
html body .lk-topbar-hamb:focus:not(:focus-visible),
html body .lk-nav-hamb:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none !important;
}

html body .lk-theme-toggle:active,
html body a.lk-wishlist-icon:active { transform: scale(.94); }

/* Anneau de focus clavier unique */
html body .lk-theme-toggle:focus-visible,
html body a.lk-wishlist-icon:focus-visible,
html body a.lk-cart-btn:focus-visible,
html body .lk-user-btn:focus-visible,
html body a.lk-login-btn:focus-visible,
html body .lk-topbar-hamb:focus-visible {
    box-shadow: 0 0 0 2px var(--lk-gold, #F5A623), 0 0 0 4px rgba(245, 166, 35, .3) !important;
}

/* Icônes SVG : suivent la couleur du bouton */
html body .lk-theme-toggle svg,
html body a.lk-wishlist-icon svg,
html body a.lk-cart-btn svg,
html body .lk-user-btn svg,
html body a.lk-login-btn svg,
html body .lk-theme-toggle svg *,
html body a.lk-wishlist-icon svg *,
html body a.lk-cart-btn svg *,
html body .lk-user-btn svg *,
html body a.lk-login-btn svg * {
    stroke: currentColor !important;
    color: inherit !important;
}

/* Toggle clair / sombre : une seule icône à la fois */
.lk-theme-toggle svg { transition: transform .4s ease; }
.lk-theme-toggle:active svg { transform: rotate(180deg); }

html:not([data-theme="dark"]) .lk-theme-toggle .lk-icon-moon { display: block; }
html:not([data-theme="dark"]) .lk-theme-toggle .lk-icon-sun  { display: none; }
html[data-theme="dark"] .lk-theme-toggle .lk-icon-moon       { display: none; }
html[data-theme="dark"] .lk-theme-toggle .lk-icon-sun        { display: block; }

/* Textes dans les boutons */
html body .lk-user-btn .lk-user-name,
html body a.lk-login-btn .lk-login-label,
html body a.lk-cart-btn .lk-cart-label { color: inherit !important; }

.lk-user-caret { transition: transform .2s; }
.lk-user-btn[aria-expanded="true"] .lk-user-caret { transform: rotate(180deg); }

/* Compteur panier */
.lk-cart-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--lk-red, #D21034);
    color: var(--lk-on-accent, #FFFFFF);
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* ============================================================
   4. PANNEAUX DÉROULANTS (sous-menus, user, minicart)
   ============================================================ */
.lk-user-wrap,
.lk-cart-wrap { position: relative; }

/* 4.1 Sous-menus topbar + nav principale */
.lk-topmenu .sub-menu,
.lk-nav-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--lk-hd-surface);
    border-top: 3px solid var(--lk-hd-accent);
    border-radius: 0 0 var(--lk-radius, 6px) var(--lk-radius, 6px);
    box-shadow: var(--lk-hd-shadow);
    z-index: 9999;
}

.lk-topmenu > li:hover > .sub-menu,
.lk-topmenu > li:focus-within > .sub-menu,
.lk-nav-menu .menu-item-has-children:hover > .sub-menu,
.lk-nav-menu .menu-item-has-children:focus-within > .sub-menu { display: block; }

.lk-topmenu .sub-menu li a,
.lk-nav-menu .sub-menu li a {
    display: block !important;
    padding: 9px 18px !important;
    color: var(--lk-hd-text) !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: background .18s, padding-left .18s;
}

.lk-topmenu .sub-menu li a:hover,
.lk-nav-menu .sub-menu li a:hover {
    background: var(--lk-hd-hover);
    color: var(--lk-hd-accent) !important;
    padding-left: 24px !important;
}

/* 4.2 Dropdown utilisateur */
.lk-user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: auto;
    min-width: 220px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--lk-hd-surface);
    color: var(--lk-hd-text);
    border-top: 3px solid var(--lk-hd-accent);
    border-radius: 0 0 var(--lk-radius, 6px) var(--lk-radius, 6px);
    box-shadow: var(--lk-hd-shadow);
    z-index: 9999;
}

.lk-user-dropdown.lk-open { display: block; }

.lk-user-dropdown li a {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 9px 16px;
    color: var(--lk-hd-text) !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: background .18s;
}

.lk-user-dropdown li a:hover {
    background: var(--lk-hd-hover);
    color: var(--lk-hd-accent) !important;
}

.lk-user-dropdown li a svg {
    flex-shrink: 0;
    color: var(--lk-hd-accent);
    opacity: .75;
}

.lk-user-dd-header {
    padding: 10px 16px 6px !important;
    pointer-events: none;
}

.lk-user-dd-header strong {
    color: var(--lk-hd-text);
    font-size: 13px;
}

.lk-user-dd-role {
    display: block;
    margin-top: 2px;
    color: var(--lk-hd-muted);
    font-size: 11px;
    font-weight: 400;
}

/* Séparateur du dropdown (ex .lk-divider → renommé pour éviter
   la collision avec .lk-divider du carrousel) */
.lk-dd-divider {
    height: 1px;
    margin: 4px 0;
    background: var(--lk-hd-line);
    list-style: none;
}

.lk-user-dropdown li a.lk-logout-link,
.lk-user-dropdown li a.lk-logout-link svg {
    color: var(--lk-red, #D21034) !important;
    opacity: 1;
}

.lk-user-dropdown li a.lk-logout-link:hover { background: rgba(210, 16, 52, .08); }

/* 4.3 Minicart */
.lk-minicart {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 320px;
    max-width: 360px;
    padding: 0;
    overflow: hidden;
    background: var(--lk-hd-surface);
    border-top: 3px solid var(--lk-hd-accent);
    border-radius: 0 0 var(--lk-radius, 6px) var(--lk-radius, 6px);
    box-shadow: var(--lk-hd-shadow);
    z-index: 9999;
}

.lk-cart-wrap.lk-open .lk-minicart--dropdown { display: block; }

/* Pont invisible entre le bouton panier et le dropdown :
   la souris peut descendre sans que le panier se ferme. */
.lk-cart-wrap.lk-open::after {
    content: '';
    position: absolute;
    top: 100%;
    right: -10px;
    left: -10px;
    height: 16px;
}

/* Entête du modal (mobile uniquement : n'existe que dans #lkCartModal) */
.lk-minicart-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 18px 16px 12px;
    border-bottom: 1px solid var(--lk-hd-line);
}

.lk-minicart-head::before {              /* petite poignée de "bottom sheet" */
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    background: var(--lk-hd-line);
    border-radius: 4px;
}

.lk-minicart-title {
    color: var(--lk-hd-text);
    font-size: 15px;
    font-weight: 700;
}

html body .lk-minicart-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--lk-hd-text) !important;
    background: var(--lk-hd-hover) !important;
    border: 0 !important;
    border-radius: 50%;
    box-shadow: none !important;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, color .2s;
}

html body .lk-minicart-close:hover {
    color: var(--lk-on-accent, #FFFFFF) !important;
    background: var(--lk-red, #D21034) !important;
}

html body .lk-minicart-close:focus-visible {
    box-shadow: 0 0 0 2px var(--lk-gold, #F5A623) !important;
}

/* Panier vide : bouton "Kòmanse achte" (ajouté par functions.php) */
.lk-mini-empty-cta {
    display: none;                  /* visible seulement quand le panier est vide */
    flex-shrink: 0;
    margin: 0;
    padding: 8px 16px 20px;
    text-align: center;
}

.lk-minicart.lk-cart-empty .lk-mini-empty-cta { display: block; }

/* Sécurité anti-doublon : un bouton ajouté DANS le contenu du mini-panier
   (ancien hook PHP woocommerce_after_mini_cart) reste toujours caché. */
.widget_shopping_cart_content .lk-mini-empty-cta { display: none !important; }

html body .lk-mini-empty-cta a.lk-shop-btn {
    display: block;
    padding: 12px 16px;
    color: var(--lk-on-accent, #FFFFFF) !important;
    background: var(--lk-hd-accent) !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 32, 159, .2);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background .2s, transform .15s;
}

html body .lk-mini-empty-cta a.lk-shop-btn:hover {
    background: var(--lk-red, #D21034) !important;
    transform: translateY(-2px);
}

.lk-minicart .woocommerce-mini-cart {
    max-height: 320px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 32, 159, .25) transparent;
}

.lk-minicart .woocommerce-mini-cart::-webkit-scrollbar       { width: 4px; }
.lk-minicart .woocommerce-mini-cart::-webkit-scrollbar-track { background: transparent; }
.lk-minicart .woocommerce-mini-cart::-webkit-scrollbar-thumb { background: rgba(0, 32, 159, .25); border-radius: 4px; }

.lk-minicart .mini_cart_item {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--lk-hd-line) !important;
    transition: background .15s;
}

.lk-minicart .mini_cart_item:last-child { border-bottom: none !important; }
.lk-minicart .mini_cart_item:hover      { background: var(--lk-hd-hover); }

.lk-minicart .remove_from_cart_button {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--lk-hd-hover) !important;
    border-radius: 50% !important;
    color: var(--lk-hd-muted) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: background .2s, color .2s !important;
}

.lk-minicart .remove_from_cart_button:hover {
    background: var(--lk-red, #D21034) !important;
    color: var(--lk-on-accent, #FFFFFF) !important;
}

.lk-minicart .mini_cart_item > a:not(.remove_from_cart_button) {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    gap: 10px !important;
    min-width: 0;
    padding-right: 24px !important;
    color: var(--lk-hd-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
}

.lk-minicart .mini_cart_item > a:not(.remove_from_cart_button):hover { color: var(--lk-hd-accent) !important; }

.lk-minicart .mini_cart_item img {
    flex-shrink: 0 !important;
    width: 52px !important;
    height: 52px !important;
    object-fit: cover !important;
    border: 1px solid var(--lk-hd-line) !important;
    border-radius: 8px !important;
}

.lk-minicart .variation { margin: 2px 0 0 !important; padding: 0 !important; }

.lk-minicart .variation dt,
.lk-minicart .variation dd {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--lk-hd-muted) !important;
    font-size: 11px !important;
}

.lk-minicart .variation dd p { display: inline !important; margin: 0 !important; }

.lk-minicart .quantity {
    flex-shrink: 0;
    color: var(--lk-hd-muted) !important;
    font-size: 12.5px !important;
    white-space: nowrap;
}

.lk-minicart .quantity .woocommerce-Price-amount {
    color: var(--lk-hd-accent) !important;
    font-weight: 700 !important;
}

.lk-minicart .woocommerce-mini-cart__total {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    background: var(--lk-hd-surface-soft);
    border-top: 2px solid var(--lk-hd-line);
}

.lk-minicart .woocommerce-mini-cart__total strong {
    color: var(--lk-hd-muted) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.lk-minicart .woocommerce-mini-cart__total .woocommerce-Price-amount {
    color: var(--lk-hd-accent) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.lk-minicart .woocommerce-mini-cart__buttons {
    display: flex !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    background: var(--lk-hd-surface);
    border-top: 1px solid var(--lk-hd-line);
}

.lk-minicart .woocommerce-mini-cart__buttons .button {
    flex: 1 !important;
    padding: 9px 12px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer !important;
    transition: all .2s !important;
}

.lk-minicart .woocommerce-mini-cart__buttons .button:not(.checkout) {
    background: var(--lk-hd-hover) !important;
    color: var(--lk-hd-text) !important;
}

.lk-minicart .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
    background: var(--lk-hd-line) !important;
    color: var(--lk-hd-accent) !important;
}

.lk-minicart .woocommerce-mini-cart__buttons .checkout {
    background: var(--lk-green, #2E7D32) !important;
    color: var(--lk-on-accent, #FFFFFF) !important;
    box-shadow: 0 2px 8px rgba(46, 125, 50, .3) !important;
}

.lk-minicart .woocommerce-mini-cart__buttons .checkout:hover {
    background: var(--lk-green-dk, #1B5E20) !important;
    box-shadow: 0 4px 14px rgba(46, 125, 50, .4) !important;
    transform: translateY(-1px) !important;
}

.lk-minicart .woocommerce-mini-cart__empty-message {
    margin: 0 !important;
    padding: 24px 16px !important;
    color: var(--lk-hd-muted) !important;
    font-size: 13px !important;
    text-align: center !important;
}

.lk-minicart .woocommerce-mini-cart__empty-message::before {
    content: '🛒';
    display: block;
    margin-bottom: 8px;
    font-size: 28px;
}

/* ============================================================
   5. HEADER PRINCIPAL
   ============================================================ */
.lk-header {
    position: sticky;
    top: var(--lk-h-topbar, 50px);
    z-index: 1000;
    margin-bottom: 0;
    background: var(--lk-hd-surface);
    border-bottom: 2px solid var(--lk-hd-line);
    box-shadow: var(--lk-shadow, 0 2px 12px rgba(0, 0, 0, .10));
    transition: box-shadow .3s, background-color var(--lk-trans-slow, .4s ease), border-color var(--lk-trans-slow, .4s ease);
}

.lk-header.lk-scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, .14); }

.lk-header-inner {
    width: 100%;
    max-width: 1200px;
    min-height: var(--lk-h-header, 64px);   /* min-height : le header grandit au lieu de déborder */
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Branding */
.lk-branding { flex-shrink: 0; }

.lk-branding a {
    display: flex;
    align-items: center;
    text-decoration: none !important;
}

.lk-logo-img { display: block; width: auto; max-width: 100%; }

/* Hauteur du logo. !important car WooCommerce impose "img { height: auto }" sur ses
   pages (boutik, panier, mon compte…) : sans ça le logo devenait énorme sur ces pages. */
html body .lk-header .lk-logo-img {
    width: auto !important;
    height: var(--lk-logo-h, 48px) !important;
}

/* Logo clair + logo sombre : un seul est visible, selon le thème choisi.
   (sans logo sombre défini, le logo clair reste affiché partout) */
.lk-logo-set { display: flex; align-items: center; }
.lk-logo-img.lk-logo--dark { display: none; }

html[data-theme="dark"] .lk-logo-set--has-dark .lk-logo--light { display: none; }
html[data-theme="dark"] .lk-logo-set--has-dark .lk-logo--dark  { display: block; }

.lk-logo-text { display: flex; flex-direction: column; line-height: 1.15; }

.lk-site-name {
    color: var(--lk-hd-accent);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.5px;
}

.lk-site-desc {
    color: var(--lk-hd-muted);
    font-size: 11px;
    font-style: italic;
}

/* Nav principale desktop */
.lk-mainnav {
    display: flex;
    flex: 1;
    align-self: stretch;     /* le <li> occupe toute la hauteur → sous-menu collé sous le header */
    justify-content: center;
    min-width: 0;
}

.lk-nav-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lk-nav-menu > li {
    position: relative;
    display: flex;
    align-items: center;
}

.lk-nav-menu > li > a {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box;
    padding: 6px !important;
    color: var(--lk-hd-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap;
    text-decoration: none !important;
    border-radius: var(--lk-radius, 6px);
    transition: color .2s, background .2s;
}

.lk-nav-menu > li > a:hover,
.lk-nav-menu > li.current-menu-item > a {
    background: var(--lk-hd-hover);
    color: var(--lk-hd-accent) !important;
}

/* Flèche ▾ */
.lk-nav-arrow {
    display: inline-block;
    margin-left: 5px;
    font-size: 14px;
    line-height: 1;
    vertical-align: middle;
    opacity: .85;
    transition: transform .25s ease;
}

.lk-nav-item.menu-item-has-children:hover > a .lk-nav-arrow { transform: rotate(180deg); }

/* Actions droite */
.lk-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Recherche desktop */
.lk-search-desktop { display: flex; }

.lk-search-wrap {
    display: flex;
    overflow: hidden;
    background: var(--lk-hd-surface-soft);
    border: 2px solid var(--lk-hd-accent);
    border-radius: 24px;
}

.lk-search-input {
    flex: 1;
    width: 200px;
    min-width: 0;
    padding: 7px 14px !important;
    color: var(--lk-hd-text) !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 13px !important;
}

.lk-search-input::placeholder { color: var(--lk-hd-muted); }

.lk-search-btn {
    padding: 7px 16px !important;
    color: var(--lk-on-accent, #FFFFFF) !important;
    background: var(--lk-hd-accent) !important;
    border: none !important;
    font-size: 13px !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s, filter .2s;
}

.lk-search-btn:hover { background: var(--lk-blue-dk, #001580) !important; }
html[data-theme="dark"] .lk-search-btn:hover { background: var(--lk-hd-accent) !important; filter: brightness(1.15); }

/* Loupe + hamburger principal (cachés par défaut, affichés ≤ 1024px) */
html body .lk-loupe-btn,
html body .lk-nav-hamb {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: var(--lk-radius, 6px);
    box-shadow: none !important;
    outline: none;
    transition: background .2s, color .2s;
}

html body .lk-loupe-btn {
    color: var(--lk-hd-accent) !important;
    background: transparent !important;
    border: 2px solid var(--lk-hd-accent) !important;
}

/* Survol : seulement avec une vraie souris (sur mobile il restait "collé" après le toucher) */
@media (hover: hover) {
    html body .lk-loupe-btn:hover {
        color: var(--lk-on-accent, #FFFFFF) !important;
        background: var(--lk-hd-accent) !important;
    }
}

/* Recherche ouverte : bouton plein */
html body .lk-loupe-btn[aria-expanded="true"] {
    color: var(--lk-on-accent, #FFFFFF) !important;
    background: var(--lk-hd-accent) !important;
}

/* Focus resté après un clic/toucher : aucun style (le focus clavier garde son anneau) */
html body .lk-loupe-btn:focus:not(:focus-visible):not([aria-expanded="true"]) {
    color: var(--lk-hd-accent) !important;
    background: transparent !important;
}

html body .lk-nav-hamb {
    flex-direction: column;
    gap: 5px;
    background: var(--lk-hd-accent) !important;
    border: none !important;
}

.lk-nav-hamb span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--lk-on-accent, #FFFFFF);
    border-radius: 2px;
    transition: all .3s;
}

.lk-nav-hamb.lk-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lk-nav-hamb.lk-open span:nth-child(2) { opacity: 0; }
.lk-nav-hamb.lk-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

html body .lk-loupe-btn:focus-visible,
html body .lk-nav-hamb:focus-visible {
    box-shadow: 0 0 0 2px var(--lk-gold, #F5A623), 0 0 0 4px rgba(245, 166, 35, .3) !important;
}

/* Recherche mobile */
.lk-search-mobile {
    display: none;
    width: 100%;
    padding: 10px 16px;
    background: var(--lk-hd-surface);
    border-top: 1px solid var(--lk-hd-line);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
}

.lk-search-mobile.lk-open { display: block; }

.lk-search-mobile form {
    display: flex;
    overflow: hidden;
    background: var(--lk-hd-surface-soft);
    border: 2px solid var(--lk-hd-accent);
    border-radius: 24px;
}

.lk-search-mobile input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 9px 16px !important;
    color: var(--lk-hd-text) !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 14px !important;
}

.lk-search-mobile input[type="search"]::placeholder { color: var(--lk-hd-muted); }

.lk-search-mobile button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 9px 18px !important;
    color: var(--lk-on-accent, #FFFFFF) !important;
    background: var(--lk-hd-accent) !important;
    border: none !important;
    cursor: pointer;
}

/* Menu principal mobile = DRAWER à droite (comme le drawer des catégories à gauche).
   Il n'occupe jamais tout l'écran : 300px max. */
.lk-mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    width: min(300px, 86vw);
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--lk-hd-surface);
    box-shadow: -4px 0 24px rgba(0, 0, 0, .18);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s .3s;
}

.lk-mobile-nav.lk-open {
    transform: none;
    visibility: visible;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}

.lk-mobile-nav-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 14px 16px;
    color: var(--lk-on-accent, #FFFFFF);
    background: var(--lk-hd-topbar);
    font-size: 14px;
    font-weight: 700;
}

.lk-mobile-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--lk-on-accent, #FFFFFF);
    background: rgba(255, 255, 255, .15);
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s;
}

.lk-mobile-nav-close:hover { background: rgba(255, 255, 255, .28); }

.lk-mob-nav-menu {
    flex: 1;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lk-mob-nav-menu .menu-item-has-children { position: relative; }

.lk-mob-nav-menu > li > a {
    display: block !important;
    padding: 14px 18px !important;
    color: var(--lk-hd-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--lk-hd-line);
    transition: background .18s, color .18s;
}

/* Le nom du parent est cliquable : place pour la flèche à droite */
.lk-mob-nav-menu > li.menu-item-has-children > a { padding-right: 56px !important; cursor: pointer; }

.lk-mob-nav-menu > li > a:hover,
.lk-mob-nav-menu > li.lk-sub-open > a {
    background: var(--lk-hd-hover);
    color: var(--lk-hd-accent) !important;
}

.lk-sub-tog {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 49px;                 /* même hauteur que le lien parent */
    padding: 0;
    color: var(--lk-hd-accent);
    background: none;
    border: none;
    cursor: pointer;
}

.lk-sub-tog svg { transition: transform .25s; }
.lk-sub-tog.lk-rotated svg { transform: rotate(180deg); }

.lk-mob-nav-menu .sub-menu {
    max-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    list-style: none !important;
    background: var(--lk-hd-surface-soft);
    transition: max-height .3s ease;
}

.lk-mob-nav-menu .sub-menu li a {
    display: block !important;
    padding: 12px 18px 12px 34px !important;
    color: var(--lk-hd-muted) !important;
    font-size: 13px !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--lk-hd-line);
    transition: background .18s, color .18s;
}

.lk-mob-nav-menu .sub-menu li a:hover {
    background: var(--lk-hd-hover);
    color: var(--lk-hd-accent) !important;
}

/* ============================================================
   6. SIDEBAR CATÉGORIES (mobile) + OVERLAY
   ============================================================ */
.lk-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);       /* le reste de la page devient flou */
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s, visibility 0s .3s;
}

.lk-overlay.lk-active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition: opacity .3s, visibility 0s;
}

.lk-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 280px;
    max-width: 85vw;
    height: 100dvh;
    overflow-y: auto;
    background: var(--lk-hd-surface);
    color: var(--lk-hd-text);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
    z-index: 9999;
    transform: translateX(-105%);
    visibility: hidden;          /* fermé : plus focusable, plus d'ombre qui dépasse */
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s .3s;
}

.lk-sidebar.lk-open {
    transform: none;
    visibility: visible;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}

.lk-sidebar-head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 14px 16px;
    color: var(--lk-on-accent, #FFFFFF);
    background: var(--lk-hd-topbar);
    font-size: 14px;
    font-weight: 700;
}

.lk-sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--lk-on-accent, #FFFFFF);
    background: rgba(255, 255, 255, .15);
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s;
}

.lk-sidebar-close:hover { background: rgba(255, 255, 255, .28); }

.lk-sidebar-menu {
    flex: 1;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lk-sidebar-menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 18px !important;
    color: var(--lk-hd-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--lk-hd-line);
    transition: background .18s, color .18s;
}

.lk-sidebar-menu > li > a:hover,
.lk-sidebar-menu > li.lk-open > a {
    background: var(--lk-hd-hover);
    color: var(--lk-hd-accent) !important;
}

.lk-arr {
    flex-shrink: 0;
    margin-left: 8px;
    color: var(--lk-hd-accent) !important;
    font-size: 18px !important;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 1;
}

.lk-sidebar-menu > li.lk-open > a .lk-arr { color: var(--lk-red, #D21034) !important; }

.lk-sidebar-menu .sub-menu {
    max-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    list-style: none !important;
    background: var(--lk-hd-surface-soft);
    transition: max-height .3s ease;
}

.lk-sidebar-menu .sub-menu li a {
    display: block !important;
    padding: 10px 18px 10px 34px !important;
    color: var(--lk-hd-muted) !important;
    font-size: 13px !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--lk-hd-line);
    transition: background .18s;
}

.lk-sidebar-menu .sub-menu li a:hover {
    background: var(--lk-hd-hover);
    color: var(--lk-hd-accent) !important;
}

/* ============================================================
   7. SCROLLBAR — dark mode
   ============================================================ */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0F172A; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ============================================================
   8. RESPONSIVE
   ≥ 1025px      desktop
   769 – 1024px  hamburger, recherche DANS la barre
   ≤ 768px       hamburger + loupe (recherche sous le header)
   Pour décaler le breakpoint "hamburger" : remplace 1024 / 1025 ci-dessous.
   ============================================================ */

/* 8.1 Entre 1025 et 1200px : on compacte pour que nav + recherche tiennent */
@media (min-width: 1025px) and (max-width: 1200px) {
    .lk-header-inner      { gap: 12px; }
    .lk-search-input      { width: 120px; }
    .lk-search-btn        { padding: 7px 12px !important; }
    .lk-nav-menu > li > a { padding: 6px 5px !important; font-size: 12px !important; }
}

/* 8.2 > 1024px : mode DESKTOP — rien de "mobile" ne peut rester ouvert */
@media (min-width: 1025px) {
    .lk-topbar-hamb,
    html body .lk-loupe-btn,
    html body .lk-nav-hamb,
    .lk-mobile-nav,
    .lk-search-mobile,
    .lk-sidebar,
    .lk-overlay,
    .lk-minicart--modal { display: none !important; }
}

/* 8.3 ≤ 1024px : hamburger partout, nav desktop cachée */
@media (max-width: 1024px) {

    /* Topbar */
    .lk-topbar-cats { display: none !important; }
    .lk-topbar-hamb { display: flex; }
    .lk-topbar-right { gap: 6px; }

    /* Boutons topbar : icône seule */
    .lk-cart-label,
    .lk-user-name,
    .lk-user-caret,
    .lk-login-label { display: none !important; }

    html body a.lk-cart-btn,
    html body .lk-user-btn,
    html body a.lk-login-btn { padding: 0 8px; }

    /* Header */
    .lk-header-inner { gap: 8px; padding: 0 12px; }
    .lk-topbar-inner { padding: 0 12px; }
    html body .lk-header .lk-logo-img { height: var(--lk-logo-h-mobile, 40px) !important; }

    .lk-site-name {
        overflow: hidden;
        font-size: 18px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .lk-site-desc { font-size: 10px; }

    .lk-mainnav { display: none !important; }

    html body .lk-nav-hamb { display: flex; }

    .lk-nav-arrow { display: none; }

    /* Le dropdown desktop du panier n'existe plus : c'est le modal */
    .lk-minicart--dropdown { display: none !important; }
}

/* 8.4 769 – 1024px : la recherche RESTE dans la barre du header */
@media (min-width: 769px) and (max-width: 1024px) {

    /* 3 colonnes : logo à gauche | recherche au CENTRE | hamburger à droite */
    .lk-header-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(220px, 420px) minmax(0, 1fr);
        align-items: center;
    }

    /* Les enfants de .lk-header-actions deviennent des éléments de la grille */
    .lk-header-actions { display: contents; }

    .lk-branding           { grid-column: 1; justify-self: start; flex: none; }
    .lk-search-desktop     { grid-column: 2; min-width: 0; }
    html body .lk-nav-hamb { grid-column: 3; justify-self: end; }

    .lk-search-desktop form { width: 100%; }
    .lk-search-wrap         { width: 100%; }
    .lk-search-input        { width: auto; }

    .lk-search-mobile { display: none !important; }
}

/* 8.5 ≤ 768px : loupe + barre de recherche sous le header */
@media (max-width: 768px) {
    .lk-branding { flex: 1; min-width: 0; }

    .lk-search-desktop { display: none !important; }

    html body .lk-loupe-btn { display: flex; }
}

@media (max-width: 480px) {
    .lk-site-name { font-size: 15px; }
}

/* ============================================================
   9. MINICART — MODAL MOBILE (≤ 1024px)
   Panneau en bas d'écran, 60% de la hauteur : assez pour 2-3 produits
   + total + boutons, tout en gardant la page visible derrière.
   Le design interne (produits, total, boutons) est inchangé.
   ============================================================ */
@media (max-width: 1024px) {

    .lk-minicart.lk-minicart--modal {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        width: auto;
        min-width: 0;
        max-width: none;
        height: 50vh;                 /* la moitié de l'écran */
        height: 50dvh;
        max-height: none;
        overflow: hidden;
        background-color: var(--lk-hd-surface);
        border-top: 3px solid var(--lk-hd-accent);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
        transform: translateY(105%);
        visibility: hidden;
        transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s .3s;
    }

    .lk-minicart.lk-minicart--modal.lk-open {
        transform: none;
        visibility: visible;
        transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s;
    }

    /* Liste défilante, total + boutons toujours visibles en bas */
    .lk-minicart--modal .widget_shopping_cart_content {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-height: 0;
    }

    .lk-minicart--modal .woocommerce-mini-cart {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }

    .lk-minicart--modal .woocommerce-mini-cart__total,
    .lk-minicart--modal .woocommerce-mini-cart__buttons,
    .lk-minicart--modal .lk-mini-empty-cta {
        flex-shrink: 0;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }

    /* Panier vide : message centré dans l'espace, bouton "Kòmanse achte" en bas */
    .lk-minicart--modal .woocommerce-mini-cart__empty-message {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================================
   10. ACCESSIBILITÉ — réduire les animations si demandé
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .lk-topbar *, .lk-header *, .lk-sidebar, .lk-mobile-nav, .lk-overlay, .lk-minicart, .lk-minicart * {
        transition-duration: .01ms !important;
    }
}