/* ===========================================================
   LBMSHOP — Header & Footer chrome
   Inter is loaded via wp_enqueue_style('lbmc-fonts', ...) as this
   stylesheet's dependency — see lbmshop-chrome.php.
=========================================================== */

:root{
  --lbm-navy:#0d1b2a;
  --lbm-navy-2:#16283c;
  --lbm-navy-3:#0a1420;
  --lbm-gold:#F5C71A;
  --lbm-gold-light:#f8da6a;
  --lbm-gold-pale:#fdf7d6;
  --lbm-cream:#faf7f2;
  --lbm-ink:#1a1a1a;
  --lbm-muted:#6b7280;
  --lbm-border:#e7e1d6;
  --lbm-red:#c1432f;
  --lbm-line:rgba(255,255,255,.1);
  --lbm-radius:6px;
  --lbm-shadow:0 1px 3px rgba(13,27,42,.12);
  --lbm-shadow-lg:0 4px 12px rgba(13,27,42,.15);
  --lbm-shadow-deep:0 6px 20px rgba(13,27,42,.18);
  --lbm-maxw:1320px;
  /* Utility bar + main row: near-black, matching the reference layout.
     Two distinct shades keep the row seam visible without a border. */
  --lbm-black:#000000;
  --lbm-black-2:#232323;
}
.lbm-chrome *{box-sizing:border-box;}
.lbm-chrome a{text-decoration:none;color:inherit;}
.lbm-chrome ul{list-style:none;margin:0;padding:0;}
.lbm-chrome img{max-width:100%;display:block;}
.lbm-wrap{width:100%;max-width:var(--lbm-maxw);margin-inline:auto;padding-inline:28px;}

/* ---------- Sticky header group (topbar + main row + navbar as one unit) ---------- */
.lbm-header-group{
    background:var(--lbm-black);
    position:sticky;
    top:var(--wp-admin--admin-bar--height,0px);
    z-index:999;
    box-shadow:0 1px 0 rgba(224,189,122,.12), 0 12px 32px -16px rgba(4,9,16,.55);
    width:100%;
    transition:box-shadow .35s ease, background .35s ease;
    /* This element's own height changes (topbar/main row folding away below)
       must never influence scroll position. Without this, the browser's
       scroll-anchoring can "correct" scrollY in response to the height
       change, which re-fires the scroll listener and creates a feedback
       loop that looks like the header endlessly flickering open/closed. */
    overflow-anchor:none;
}
.lbm-header-group.is-compact{
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    box-shadow:var(--lbm-shadow-deep);
}

/* Desktop only: fold away the logo/search/actions row on scroll, leaving
 * just the white category+menu row stuck to the top — the row a shopper
 * actually needs while browsing further down the page. */
@media (min-width:981px){
  /* Max-height value is set close to the row's real rendered height (not an
     arbitrary large number) so the transition animates smoothly across its
     whole duration instead of sitting still then snapping shut at the end. */
  .lbm-main-header{
    max-height:150px;
    transition:max-height .35s cubic-bezier(.4,0,.2,1), opacity .2s ease, visibility .35s;
  }
  .lbm-header-group.is-compact .lbm-main-header{
    max-height:0;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
  }
}

/* ---------- Main header ---------- */
.lbm-main-header{
    background:var(--lbm-black);
    width:100%;
}
.lbm-main-header .lbm-wrap{display:flex;align-items:center;gap:32px;}

/* ---- Logo: frame around the uploaded mark + refined wordmark ---- */
.lbm-logo{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.lbm-logo-plate{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border-radius:8px;
  padding:0;
  width:auto;height:auto;
  overflow:hidden;
  transition:width .2s ease, height .2s ease;
  flex-shrink:0;
}
.lbm-logo-img{height:42px;width:auto;flex-shrink:0;object-fit:contain;}
.lbm-logo-mark{width:42px;height:42px;border-radius:8px;background:var(--lbm-navy-2);display:flex;align-items:center;justify-content:center;color:var(--lbm-gold-light);font-family:'Inter',sans-serif;font-weight:800;font-size:18px;flex-shrink:0;}
.lbm-logo-text{font-family:'Inter',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.01em;color:#fdfaf3;line-height:1;}
.lbm-logo-text span{color:var(--lbm-gold-light);}
.lbm-logo-sub{
  display:block;font-family:'Inter',sans-serif;font-weight:500;
  font-size:11.5px;letter-spacing:.01em;color:rgba(255,255,255,.6);margin-top:3px;
  max-height:20px;overflow:hidden;
  transition:max-height .2s ease, opacity .2s ease, margin-top .2s ease;
}

/* ---- Search: catalogue-card styling ----
   Stays compact by default and grows wider the moment a shopper actually
   interacts with it (focuses the field), instead of permanently eating
   header width for a search box that's idle most of the time. */
.lbm-search{
  flex:0 1 320px;max-width:320px;position:relative;
  transition:flex-basis .25s ease, max-width .25s ease;
}
.lbm-search:focus-within{flex-basis:560px;max-width:560px;}
.lbm-search form{
  display:flex;align-items:stretch;background:#fff;
  border:1px solid var(--lbm-border);border-radius:var(--lbm-radius);
  overflow:hidden;transition:border-color .15s;
}
.lbm-search form:focus-within{border-color:var(--lbm-gold);}
.lbm-search input[type=search]{flex:1;border:none;background:transparent;padding:10px 6px 10px 16px;font-family:'Inter',sans-serif;font-size:14.5px;color:var(--lbm-ink);outline:none;min-width:0;}
.lbm-search input::placeholder{color:#9d9384;}
.lbm-search button{background:var(--lbm-gold);color:var(--lbm-navy-3);border:none;padding:0 22px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;}
.lbm-search button:hover{background:var(--lbm-gold-light);}

/* ---- Actions ---- */
.lbm-header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto;}
.lbm-action-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 14px;border-radius:var(--lbm-radius);color:#ffffff!important;transition:all .2s;text-align:center;}
.lbm-action-btn:hover{background:rgba(224,189,122,.1);color:var(--lbm-gold-light)!important;transform:translateY(-1px);}
.lbm-action-btn svg{width:21px;height:21px;color:inherit;}
.lbm-action-label{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap;color:inherit;}
.lbm-action-badge{position:absolute;top:2px;right:6px;background:var(--lbm-gold-light);color:var(--lbm-navy-3);font-family:'Inter',sans-serif;font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;border:2px solid var(--lbm-navy-3);}
.lbm-action-btn.lbm-cart{background:rgba(224,189,122,.08);border:1px solid rgba(224,189,122,.32);color:#fff!important;flex-direction:row;gap:10px;padding:10px 20px;}
.lbm-action-btn.lbm-cart:hover{background:var(--lbm-gold);color:var(--lbm-navy-3)!important;border-color:var(--lbm-gold);}
.lbm-action-btn.lbm-cart:hover svg{color:var(--lbm-navy-3);}
.lbm-action-btn.lbm-cart .lbm-action-badge{background:var(--lbm-gold-light);color:var(--lbm-navy-3);top:-6px;right:-6px;border-color:var(--lbm-navy-3);}
.lbm-action-btn.lbm-cart:hover .lbm-action-badge{background:var(--lbm-navy-3);color:var(--lbm-gold-light);}
.lbm-cart-total{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;}
.lbm-cart-total small{font-size:10px;opacity:.7;font-weight:500;text-transform:uppercase;letter-spacing:.03em;}
.lbm-cart-total strong{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;}
#lbm-cart-count.lbm-bump{animation:lbm-badge-bump .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes lbm-badge-bump{0%{transform:scale(1);}40%{transform:scale(1.5);}100%{transform:scale(1);}}
@media (prefers-reduced-motion: reduce){
  #lbm-cart-count.lbm-bump{animation:none;}
}

/* ---------- Nav bar ---------- */
.lbm-navbar{
    background:#ffffff;
    width:100%;
    position:relative;
    z-index:20;
    border-top:1px solid #efefef;
}

.lbm-navbar .lbm-wrap{display:flex;align-items:center;gap:16px;}
.lbm-navlist{display:flex;align-items:stretch;flex-wrap:wrap;flex:1;}
.lbm-navlist-center{display:flex;flex:1;}
.lbm-navlist-center-inner{display:flex;align-items:stretch;flex-wrap:wrap;justify-content:center;flex:1;list-style:none;margin:0;padding:0;}
.lbm-navitem{position:relative;}
.lbm-navlink{position:relative;display:flex;align-items:center;gap:6px;padding:14px 16px;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;color:var(--lbm-ink)!important;transition:background .12s, color .12s;white-space:nowrap;}
.lbm-navitem:hover .lbm-navlink, .lbm-navlink.is-active{background:var(--lbm-gold-pale);}
.lbm-navlink .lbm-caret{transition:transform .15s;opacity:.7;color:var(--lbm-ink)!important;}
.lbm-navitem:hover .lbm-caret{transform:rotate(180deg);opacity:1;}
.lbm-navlink.lbm-promo{background:var(--lbm-gold);color:var(--lbm-navy-3)!important;border-radius:20px;padding:9px 16px;margin:10px 0;font-weight:700;}
.lbm-navitem:hover .lbm-navlink.lbm-promo{background:var(--lbm-gold-light);}

/* ---- Right-side help widget (headset icon + phone) ---- */
.lbm-navbar-help{display:flex;align-items:center;gap:10px;flex-shrink:0;padding-left:16px;color:var(--lbm-ink);}
.lbm-navbar-help svg{color:var(--lbm-gold);flex-shrink:0;}
.lbm-navbar-help-text{display:flex;flex-direction:column;gap:2px;line-height:1.2;}
.lbm-navbar-help-text span{font-family:'Inter',sans-serif;font-size:12px;color:var(--lbm-muted);white-space:nowrap;}
.lbm-navbar-help-text a{font-family:'Inter',sans-serif;font-size:15px;font-weight:700;color:var(--lbm-ink);white-space:nowrap;}
.lbm-mega{
  position:absolute;top:100%;left:0;background:var(--lbm-cream);
  border-radius:0 0 var(--lbm-radius) var(--lbm-radius);box-shadow:var(--lbm-shadow-lg);
  border-top:2px solid var(--lbm-gold);opacity:0;visibility:hidden;
  transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:50;padding:14px;
  display:grid;grid-template-columns:repeat(3,minmax(190px,230px));gap:0 8px;
  width:max-content;max-width:min(760px, calc(100vw - 32px));
}
.lbm-navitem:hover .lbm-mega{opacity:1;visibility:visible;transform:translateY(0);}
.lbm-mega a{display:block;padding:9px 14px;border-radius:4px;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:500;color:var(--lbm-ink);transition:background .15s, color .15s;}
.lbm-mega a:hover{background:var(--lbm-gold-pale);color:var(--lbm-navy);}

/* ---- "Tous nos produits" trigger: the ONE entry point for the whole
   category tree, so the nav row's width never depends on how many
   categories exist. Sits flush left, lined up under the logo above it. ---- */
.lbm-cats-trigger{
  background:var(--lbm-gold);color:var(--lbm-navy-3)!important;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;font-size:13px;
  border-radius:var(--lbm-radius);margin:10px 4px 10px 0;padding:11px 18px 11px 14px;
  transition:background .2s, color .2s;
}
.lbm-cats-trigger svg{color:var(--lbm-navy-3);flex-shrink:0;}
.lbm-cats-trigger::after{display:none;}
.lbm-navitem-cats:hover .lbm-cats-trigger,
.lbm-cats-trigger.is-active{background:var(--lbm-gold-light);color:var(--lbm-navy-3)!important;}
.lbm-navitem-cats:hover .lbm-caret{color:var(--lbm-navy-3)!important;}

/* ---- Catégories mega panel: a fixed sidebar of top-level categories on the
   left; hovering one swaps in its detail pane on the right. Each detail pane
   is itself a grid of that category's own children, one column per child,
   with that child's own subcategories listed underneath its column title —
   the full three-level tree (top / column / item) visible without ever
   leaving the panel. Which detail pane shows is tracked in JS (see the
   inline script in render.php), not pure :hover — a CSS-only version breaks
   the instant the cursor crosses from the sidebar into the detail pane to
   click a subcategory, since that gap isn't covered by either element's
   :hover. ---- */
.lbm-catmega{
  position:absolute;top:100%;left:0;background:var(--lbm-cream);
  border-radius:0 0 var(--lbm-radius) var(--lbm-radius);box-shadow:var(--lbm-shadow-deep);
  border-top:2px solid var(--lbm-gold);opacity:0;visibility:hidden;
  transform:translateY(-4px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:50;display:flex;align-items:stretch;
  /* Fixed width, not max-content: max-content on a flex row with a flex:1
     child sizes that child down to its min-width instead of letting it grow,
     which was squeezing the detail pane's grid down to a single column no
     matter how many columns the rule below asks for. */
  width:min(1100px, calc(100vw - 32px));
  max-height:calc(100vh - 160px);
}
.lbm-navitem-cats:hover .lbm-catmega{opacity:1;visibility:visible;transform:translateY(0);}

.lbm-cat-sidebar{
  width:230px;flex-shrink:0;display:flex;flex-direction:column;gap:1px;
  padding:12px;border-right:1px solid var(--lbm-border);
  overflow-y:auto;
}
.lbm-cat-side-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 12px;border-radius:6px;
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;color:var(--lbm-ink);
}
.lbm-cat-side-item svg{color:var(--lbm-muted);flex-shrink:0;}
.lbm-cat-side-item.is-active{background:var(--lbm-gold-pale);color:var(--lbm-navy);}

.lbm-cat-details{position:relative;flex:1;min-width:0;padding:22px 26px;overflow-y:auto;}
.lbm-cat-detail{display:none;}
.lbm-cat-detail.is-active{display:block;}

.lbm-catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:20px 24px;align-content:start;}
.lbm-catgrid-col{display:flex;flex-direction:column;gap:8px;min-width:0;}
.lbm-catgrid-title{
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:700;color:var(--lbm-navy);
  padding-bottom:8px;border-bottom:1px solid var(--lbm-border);
}
.lbm-catgrid-list{display:flex;flex-direction:column;gap:2px;}
.lbm-catgrid-list a{padding:4px 0;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;color:var(--lbm-muted);transition:color .15s;}
.lbm-catgrid-list a:hover{color:var(--lbm-navy);}
.lbm-catmega-plain{display:block;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;color:var(--lbm-ink);padding:9px 14px;border-radius:4px;transition:background .15s, color .15s;}
.lbm-catmega-plain:hover{background:var(--lbm-gold-pale);color:var(--lbm-navy);}

@media (max-width:980px){
  .lbm-header-group{top:0;}
  .lbm-search{order:5;flex:1 0 100%;max-width:none;margin-top:12px;}
  .lbm-main-header .lbm-wrap{flex-wrap:wrap;gap:14px;}
  .lbm-action-label{display:none;}
  .lbm-cart-total{display:none;}
  .lbm-action-btn.lbm-cart{padding:11px 14px;}
  .lbm-action-btn{padding:8px 9px;}
  .lbm-header-actions{gap:2px;margin-left:auto;}
  .lbm-burger{display:flex!important;order:-1;}
  .lbm-navbar{display:none!important;}
  .lbm-search input[type=search]{font-size:12.5px;padding:11px 4px 11px 10px;}
  .lbm-search button{padding:0 14px;}
  .lbm-search button svg{width:15px;height:15px;}
}

@media (max-width:420px){
  .lbm-search input[type=search]{font-size:12px;padding:10px 4px 10px 12px;}
  .lbm-logo-sub{display:none;}
  .lbm-logo-mark{width:34px;height:34px;font-size:15px;}
  .lbm-logo-text{font-size:20px;}
}

/* ---------- Mobile burger + slide-in drawer ---------- */
.lbm-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:38px;height:38px;border-radius:8px;cursor:pointer;flex-shrink:0;}
.lbm-burger span{width:20px;height:2px;background:#ffffff;border-radius:2px;flex-shrink:0;}
.lbm-mobile-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.lbm-drawer-backdrop{position:fixed;inset:0;background:rgba(10,20,32,.6);opacity:0;visibility:hidden;transition:opacity .25s;z-index:998;}
.lbm-drawer-panel{position:fixed;top:0;left:0;bottom:0;width:300px;max-width:84vw;background:#fff;z-index:999;box-shadow:var(--lbm-shadow-deep);transform:translateX(-100%);transition:transform .28s ease;overflow-y:auto;}
.lbm-mobile-toggle:checked ~ .lbm-drawer-backdrop{opacity:1;visibility:visible;}
.lbm-mobile-toggle:checked ~ .lbm-drawer-panel{transform:translateX(0);}
.lbm-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 18px;border-bottom:1px solid var(--lbm-border);}
.lbm-drawer-title{font-family:'Inter',sans-serif;font-weight:700;font-size:18px;color:var(--lbm-navy);}
.lbm-drawer-close{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--lbm-navy);background:var(--lbm-cream);flex-shrink:0;}
.lbm-drawer-nav{padding:8px 0 28px;}
.lbm-drawer-item{border-bottom:1px solid var(--lbm-border);}
.lbm-drawer-link{display:block;padding:14px 20px;font-family:'Inter',sans-serif;font-size:14.5px;font-weight:600;color:var(--lbm-navy);}

/* ---- Category accordion: native <details>/<summary>, no JS. The category
   name stays a real link (clicking it navigates like normal); only the
   caret icon exists purely to expand/collapse — putting it in its own
   non-link element next to the link, both inside <summary>, is what lets
   "tap the name" and "tap the caret" do two different things without any
   click-handling code. ---- */
.lbm-drawer-accordion{border-bottom:1px solid var(--lbm-border);}
.lbm-drawer-accordion .lbm-drawer-accordion{border-bottom:none;}
.lbm-drawer-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  cursor:pointer;list-style:none;
}
.lbm-drawer-row::-webkit-details-marker{display:none;}
.lbm-drawer-row .lbm-drawer-link,
.lbm-drawer-row .lbm-drawer-group-title{flex:1;padding-right:0;}
.lbm-drawer-caret{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex-shrink:0;color:var(--lbm-muted);
  transition:transform .2s ease;
}
.lbm-drawer-accordion[open] > .lbm-drawer-row .lbm-drawer-caret{transform:rotate(180deg);}

.lbm-drawer-sub{padding:0 20px 12px 28px;display:flex;flex-direction:column;gap:10px;}
.lbm-drawer-sub a{font-family:'Inter',sans-serif;font-size:13.5px;color:var(--lbm-muted);}
.lbm-drawer-groups{padding-top:0;gap:2px;}
.lbm-drawer-group-title{display:block;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:700;color:var(--lbm-navy);padding:12px 20px 12px 28px;}
.lbm-drawer-groups > a.lbm-drawer-group-title{padding:12px 20px 12px 28px;}
@media (min-width:981px){
  .lbm-drawer-backdrop,.lbm-drawer-panel{display:none;}
}

/* ---------- Footer ---------- */
.lbm-footer{background:var(--lbm-black);color:rgba(255,255,255,.68);font-family:'Inter',sans-serif;}

.lbm-footer-main{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-block:52px;}
.lbm-f-brand .lbm-logo-text{color:#fff;}
.lbm-f-about{font-size:13.5px;line-height:1.75;margin:16px 0 22px;color:rgba(255,255,255,.55);max-width:320px;}
.lbm-f-social{display:flex;gap:10px;}
.lbm-f-social a{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);transition:all .2s;}
.lbm-f-social a:hover{background:var(--lbm-gold);color:#fff;transform:translateY(-2px);}
.lbm-f-title{font-family:'Inter',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff;margin-bottom:20px;}
.lbm-f-links{display:flex;flex-direction:column;gap:11px;}
.lbm-f-links a{font-size:13.5px;color:rgba(255,255,255,.58);transition:color .2s;}
.lbm-f-links a:hover{color:var(--lbm-gold-light);padding-left:3px;}
.lbm-f-contact-item{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:rgba(255,255,255,.58);margin-bottom:13px;}
.lbm-f-contact-item svg{color:var(--lbm-gold);flex-shrink:0;margin-top:2px;}

.lbm-footer-bottom{border-top:1px solid rgba(255,255,255,.08);}
.lbm-footer-bottom .lbm-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.45);}
.lbm-pay-icons{display:flex;align-items:center;gap:8px;}
.lbm-pay-icons span{background:rgba(255,255,255,.08);border-radius:5px;padding:4px 10px;font-size:11px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.75);}

@media (max-width:860px){
  .lbm-footer-main{grid-template-columns:1fr 1fr;}
}
@media (max-width:540px){
  .lbm-footer-main{grid-template-columns:1fr;gap:32px;}
}

/* ---------- Hide Woostify's native header/footer chrome ----------
   We keep the theme's own header.php/footer.php rendering normally
   (so #view/#content/.container wrappers and JS-dependent markup like
   the cart sidebar, search dialog, account lightbox and mobile toggle
   stay intact and functional) and only hide the *visible* bars, since
   our own header/footer is injected separately via wp_body_open/wp_footer. */
.topbar,
#masthead,
#colophon{display:none!important;}

/* ---------- Force footer full-width ----------
   The footer is injected via wp_footer which may sit inside
   a theme content wrapper. Break out of any constrained parent. */
.lbm-footer{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}