/* ==========================================================================
   Header — cream masthead, brand wordmark, primary nav, search & cart
   ========================================================================== */

/* --- Masthead shell --- */
/* Brand row and the nav row below share one continuous surface (same bg, no
   divider between them) so the header reads as a single unit. The single
   closing hairline lives here (recolouring Storefront's default #f0f0f0 border
   to our token); the nav's own border-bottom is removed to avoid a double line. */
.site-header {
  background-color: var(--jl-bg);
  border-bottom: 1px solid var(--jl-line);
  padding-top: 1.4em;
  padding-bottom: 0;
}

/* --- Announcement ribbon (above the masthead) --- */
.jl-announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 24px;
  background: var(--jl-bordeaux);
  color: var(--jl-cream);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
}
.jl-announce svg { flex: none; }

/* --- Row 1: logo (left) · centred search · cart pill (right) ---
   The cart is moved into this col-full (header.php) so all three are siblings.
   Logo + cart flow on the flex row (each takes half); the search is absolutely
   centred on the row, so it sits dead-centre no matter how wide the sides get. */
.site-header > .col-full {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-header > .col-full > .site-branding { float: none; margin: 0; flex: 1; }
.site-header > .col-full > .site-header-cart {
  float: none;
  margin: 0;
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.site-header > .col-full > .site-search {
  float: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.site-header > .col-full > .skip-link { position: absolute; }

/* --- Brand wordmark (replaces the image logo) --- */
.site-branding .custom-logo-link,
.site-header .custom-logo { display: none; } /* hide the faint image logo */

.jl-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.jl-brand__name {
  font-family: var(--jl-serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1;
  color: var(--jl-ink);
}
.jl-brand:hover .jl-brand__name { color: var(--jl-bordeaux); }

/* --- Secondary nav (FAQ / Contact / CGV), small & muted, top-right --- */
.secondary-navigation { float: right; }
.secondary-navigation ul li a {
  font-family: var(--jl-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--jl-text-50);
  text-transform: uppercase;
}
.secondary-navigation ul li a:hover { color: var(--jl-bordeaux); }

/* --- Masthead search (Advanced Woo Search) as a centred pill --- */
.site-header > .col-full > .site-search {
  flex: none;
  width: 360px;
  max-width: 100%;
}
.site-search .aws-container { max-width: none; width: 100%; }
.site-search .aws-search-form,
.site-search .aws-wrapper {
  background: #fff;
  border-radius: var(--jl-r-pill);
}
.site-search .aws-search-form {
  height: 46px;
  border: 1px solid rgba(27, 21, 18, .14);
  overflow: hidden;
  display: flex;
  align-items: center;
}
/* When AWS shows live results, square off the pill's bottom so it connects to
   the results card below (flat-topped, rounded-bottom — see search.css). */
.site-search .aws-search-form.aws-form-active {
  border-radius: 22px 22px 0 0;
}
.site-search .aws-search-field {
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 8px 0 20px;
  font: 400 13px var(--jl-sans);
  color: var(--jl-ink);
  box-shadow: none;
}
.site-search .aws-search-field:focus { outline: none; box-shadow: none; }
/* Clear "×" — centre the glyph with flex instead of AWS's span positioning
   (top:50%/margin-top). The selector matches AWS's own active-state rule so we
   win on source order; display keeps !important because AWS forces
   display:block!important there. */
.site-search .aws-search-form.aws-show-clear.aws-form-active:not(.aws-processing) .aws-search-clear {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.site-search .aws-search-form .aws-search-clear span {
  position: static;
  top: auto;
  margin: 0;
}
.site-search .aws-container .aws-search-btn,
.site-search .aws-search-btn.aws-form-btn {
  background: var(--jl-bordeaux) !important;
  border: none !important;
  border-radius: var(--jl-r-pill) !important;
  width: 34px;
  height: 34px;
  min-width: 34px;
  margin: 6px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.site-search .aws-search-btn.aws-form-btn:hover { background: var(--jl-bordeaux-dark) !important; }
/* AWS gives this icon span a fixed 42×24 block, which throws the magnifier to
   the button's top-left. Make it fill the button and center the SVG instead. */
.site-search .aws-search-btn .aws-search-btn_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.site-search .aws-search-btn .aws-search-btn_icon svg,
.site-search .aws-search-btn svg { fill: var(--jl-cream) !important; width: 17px; height: 17px; }

/* --- Primary navigation bar --- */
/* Same surface as the brand row above (no tint, no borders) so the two rows
   read as one header; the closing hairline is on .site-header (above). */
.storefront-primary-navigation {
  background-color: var(--jl-bg);
  margin-top: 18px;
}
/* Centre the menu on row 2 (the cart has moved to row 1). Storefront floats
   .main-navigation at a fixed width — override that parent-theme layout. */
.storefront-primary-navigation .main-navigation {
  float: none !important;
  width: 100% !important;
}
.storefront-primary-navigation .main-navigation ul.menu,
.storefront-primary-navigation .main-navigation ul.nav-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.storefront-primary-navigation .main-navigation ul.menu > li,
.storefront-primary-navigation .main-navigation ul.nav-menu > li {
  float: none;
  margin: 0;
}
.main-navigation ul li a,
.storefront-primary-navigation a {
  font-family: var(--jl-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--jl-ink);
}
/* Prefixed with .site-header to out-specify Storefront's inline
   `.site-header ul.menu li.current-menu-item > a { color:#747474 }` (0,3,3),
   which otherwise greys out the active nav item. */
.site-header .main-navigation ul li a:hover,
.site-header .main-navigation ul li:hover > a,
.site-header .main-navigation ul li.current-menu-item > a,
.site-header .main-navigation ul li.current_page_item > a {
  color: var(--jl-bordeaux);
}

/* Top-level items: comfortable padding + a 2px bottom border that turns
   bordeaux when active or hovered (JulilovaHeader.dc). The transparent border
   on every item reserves the space so nothing shifts. */
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
  padding: 0 16px 12px;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.site-header .main-navigation ul.menu > li:hover > a,
.site-header .main-navigation ul.nav-menu > li:hover > a,
.site-header .main-navigation ul.menu > li.current-menu-item > a,
.site-header .main-navigation ul.menu > li.current_page_item > a,
.site-header .main-navigation ul.menu > li.current-menu-parent > a,
.site-header .main-navigation ul.nav-menu > li.current-menu-item > a,
.site-header .main-navigation ul.nav-menu > li.current_page_item > a {
  border-bottom-color: var(--jl-bordeaux);
}

/* Dropdown submenus → soft cream card.
   Storefront keeps the menu in the layout and reveals it by moving it back from
   left:-9999em on hover, so display never toggles — that lets us fade + slide
   it in (transitioning opacity/transform, never `left`). */
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children,
.main-navigation ul li ul.sub-menu {
  width: max-content;
  min-width: 200px;
  max-width: 320px;
  background: var(--jl-bg);
  border: 1px solid var(--jl-line);
  border-radius: var(--jl-r-media);
  box-shadow: 0 20px 44px rgba(27, 21, 18, .14);
  padding: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.main-navigation ul li:hover > ul.sub-menu,
.main-navigation ul li.focus > ul.sub-menu {
  opacity: 1;
  transform: translateY(0);
}
/* Storefront hard-sets the submenu li/a to a fixed 12.625em (~200px), which
   clamps the card width and forces long labels to wrap. Let the row fill the
   content-sized card instead so the text sits on one line. */
.main-navigation ul li ul.sub-menu li { width: 100%; }
/* Inset, rounded hover rows that float inside the card padding. */
.main-navigation ul li ul.sub-menu li a {
  width: auto;
  padding: 10px 14px;
  border-radius: var(--jl-r-chip);
  transition: background .18s ease, color .18s ease;
}
.main-navigation ul li ul.sub-menu li a:hover {
  background: rgba(110, 28, 47, .07);
  color: var(--jl-bordeaux);
}
/* Animate the submenu CLOSE too (desktop): override Storefront's left:-9999em
   hide so the card stays in place, then toggle visibility/opacity with a
   delayed visibility transition so it eases out instead of snapping off-screen.
   Mobile keeps Storefront's native handheld behaviour. */
@media (min-width: 769px) {
  .main-navigation ul.nav-menu ul.sub-menu {
    left: 0 !important;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .main-navigation ul.nav-menu li:hover > ul.sub-menu,
  .main-navigation ul.nav-menu li.focus > ul.sub-menu {
    visibility: visible;
    transition: opacity .2s ease, transform .2s ease, visibility 0s;
  }
}

/* --- Header cart pill: "{n} articles" + a bordeaux bag medallion (no price) --- */
.site-header-cart { float: none; }
.site-header-cart li { padding: 0; }
.site-header-cart .cart-contents {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 13px;
  background: rgba(110, 28, 47, .08);
  border: 1px solid rgba(110, 28, 47, .16);
  border-radius: var(--jl-r-pill);
  font-family: var(--jl-sans);
  text-decoration: none;
  transition: background .2s ease;
}
.site-header-cart .cart-contents:hover { background: rgba(110, 28, 47, .13); }
.site-header-cart .cart-contents::before { content: none; } /* drop Storefront's cart glyph */
.site-header-cart .cart-contents .amount { display: none; } /* design shows the count, not the total */
.site-header-cart .cart-contents .count {
  order: 0;
  background: transparent;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--jl-bordeaux);
}
.site-header-cart .cart-contents::after {
  content: "";
  order: 1;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--jl-r-pill);
  background: var(--jl-bordeaux) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23F3E9DB'%20stroke-width='1.8'%3E%3Cpath%20d='M5%207h14l-1.2%2011a2%202%200%200%201-2%201.8H8.2a2%202%200%200%201-2-1.8L5%207Z'/%3E%3Cpath%20d='M9%207a3%203%200%200%201%206%200'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}

/* --- Mini-cart dropdown ---
   Restyle WooCommerce's mini-cart to the design system: cream card with the
   same soft shadow as the nav dropdown, rounded thumbnail, emphasised subtotal,
   and bordeaux buttons (filled "Commander", outlined "Voir le panier").
   jl-header loads last, so most of this wins on source order; !important is
   kept only where Storefront/Customizer genuinely out-specify us (noted). */
.site-header-cart .widget_shopping_cart {
  width: 344px;
  margin-top: 12px; /* breathing room between the cart pill and the dropdown */
  background: #fff;
  border: 1px solid var(--jl-line);
  border-radius: var(--jl-r-media);
  box-shadow: 0 22px 48px rgba(27, 21, 18, .16);
  padding: 6px;
  /* Right-align under the cart, and reveal with a fade + slide instead of
     Storefront's instant left:-999em swap — so it animates open AND close.
     left/right are repeated on the :hover rule below so they beat Storefront's
     higher-specificity `.site-header-cart:hover .widget_shopping_cart`. */
  left: auto;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
/* Storefront collapses the list to height:0 until hover; keep it expanded so
   the panel is laid out and ready to fade in. */
.site-header-cart .widget_shopping_cart .product_list_widget { height: auto; }
.site-header-cart:hover .widget_shopping_cart,
.site-header-cart.focus .widget_shopping_cart,
.site-header-cart:focus-within .widget_shopping_cart {
  left: auto;
  right: 0;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
.site-header-cart .widget_shopping_cart_content { padding: 0; background: transparent; }

/* Item rows */
.site-header-cart ul.cart_list { margin: 0; padding: 0; }
.site-header-cart ul.cart_list li.mini_cart_item {
  position: relative;
  padding: 14px 12px 14px 44px; /* left room for the absolute remove × */
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--jl-line);
}
.site-header-cart ul.cart_list li.mini_cart_item a:not(.remove) {
  font-family: var(--jl-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  color: var(--jl-ink);
  text-decoration: none;
}
.site-header-cart ul.cart_list li.mini_cart_item a:not(.remove):hover { color: var(--jl-bordeaux); }
.site-header-cart ul.cart_list li.mini_cart_item img {
  width: 56px;
  height: auto;
  border-radius: var(--jl-r-chip);
  border: 1px solid var(--jl-line);
  margin-left: 12px;
}
.site-header-cart ul.cart_list li.mini_cart_item dl.variation {
  font-size: 12px;
  color: var(--jl-text-70);
  margin: 6px 0 0;
  line-height: 1.5;
}
.site-header-cart ul.cart_list li.mini_cart_item dl.variation dt { font-weight: 600; margin: 0; float: left; padding-right: 5px; }
.site-header-cart ul.cart_list li.mini_cart_item dl.variation dd { margin: 0; }
.site-header-cart ul.cart_list li.mini_cart_item .quantity {
  display: block;
  margin-top: 8px;
  color: var(--jl-ink);
  font-weight: 500;
  font-size: 13px;
}

/* Remove → our own × SVG pinned top-left. The long selector matches Storefront's
   own `…product_list_widget li a.remove` (0,4,2) so we win on source order
   without !important. We hide the link's literal "×" text node (font-size:0) and
   drop Storefront's Font Awesome times-circle ::before — it carried its own
   circle, doubling our hover circle. So: no icon-circle, just the × SVG + one
   hover circle, flex-centered. */
.site-header-cart .widget_shopping_cart .product_list_widget li a.remove_from_cart_button {
  position: absolute;
  left: 12px;
  top: 14px;
  float: none;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  line-height: 1;
  text-indent: 0;
  border-radius: var(--jl-r-pill);
  background: transparent;
  color: var(--jl-text-50);
  font-size: 0;
  text-align: center;
  transition: background .15s ease, color .15s ease;
}
.site-header-cart .widget_shopping_cart .product_list_widget li a.remove_from_cart_button::before {
  content: "";
  position: absolute;        /* fill the button + centre the mask; don't rely on
                                flex — the colour comes from our explicit
                                background-color since Woo forces the link colour */
  inset: 0;
  background-color: var(--jl-text-50);
  -webkit-mask: var(--jl-icon-x) center / 13px 13px no-repeat;
  mask: var(--jl-icon-x) center / 13px 13px no-repeat;
}
.site-header-cart .widget_shopping_cart .product_list_widget li a.remove_from_cart_button:hover { background: var(--jl-bordeaux); }
.site-header-cart .widget_shopping_cart .product_list_widget li a.remove_from_cart_button:hover::before { background-color: var(--jl-cream); }

/* Subtotal */
.site-header-cart .woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  padding: 14px 12px;
  background: transparent !important; /* override Storefront's #f5f5f5 footer fill */
  border-bottom: 1px solid var(--jl-line);
}
.site-header-cart .woocommerce-mini-cart__total strong {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--jl-text-70);
}
.site-header-cart .woocommerce-mini-cart__total .amount {
  font-family: var(--jl-serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--jl-bordeaux);
}

/* Buttons: outlined "Voir le panier" + filled bordeaux "Commander". Layout wins
   on source order; only the colours keep !important — Storefront's Customizer
   button styles are injected with their own !important and can't be beaten on
   specificity alone. */
.site-header-cart .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 12px;
  background: transparent !important; /* override Storefront's #f5f5f5 footer fill */
}
.site-header-cart .woocommerce-mini-cart__buttons .button {
  width: 100%;
  margin: 0;
  padding: 13px 20px;
  box-shadow: none;
}
.site-header-cart .woocommerce-mini-cart__buttons .button::after { content: none; } /* drop Storefront's → arrow */
.site-header-cart .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout) {
  background: transparent !important;
  color: var(--jl-bordeaux) !important;
  border: 1px solid rgba(110, 28, 47, .35) !important;
}
.site-header-cart .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout):hover {
  background: rgba(110, 28, 47, .07) !important;
  border-color: var(--jl-bordeaux) !important;
}
.site-header-cart .woocommerce-mini-cart__buttons .button.checkout {
  background: var(--jl-bordeaux) !important;
  color: var(--jl-cream) !important;
  border: none !important;
}
.site-header-cart .woocommerce-mini-cart__buttons .button.checkout:hover { background: var(--jl-bordeaux-dark) !important; }

/* --- Mobile menu toggle as a bordeaux pill --- */
.main-navigation .menu-toggle,
.btn.menu-toggle {
  background: var(--jl-bordeaux);
  color: var(--jl-cream);
  border: none;
  border-radius: var(--jl-r-pill);
  font: 500 13px var(--jl-sans);
  letter-spacing: .06em;
}
.main-navigation .menu-toggle:hover { background: var(--jl-bordeaux-dark); color: var(--jl-cream); }

/* ==========================================================================
   Mobile masthead (≤768px) — hamburger · centred logo · cart, search below,
   slide-in drawer for navigation (JulilovaHeaderMobile.dc).
   ========================================================================== */

/* Mobile-only chrome is hidden on desktop. */
.jl-m-burger,
.jl-m-cart { display: none; }

@media (max-width: 768px) {
  .secondary-navigation { float: none; }

  .site-header { padding-top: 0; }

  /* Row reflow: [burger] [logo] [cart] on row 1, search full-width on row 2. */
  .site-header > .col-full {
    flex-wrap: wrap;
    gap: 0;
    row-gap: 14px;
    padding-top: 14px;
    padding-bottom: 8px;
  }

  .jl-m-burger {
    order: 1;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none; /* drop buttons.css's bordeaux drop-shadow */
    cursor: pointer;
  }
  .jl-m-burger span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--jl-ink);
  }
  .jl-m-burger span:last-child { width: 15px; }

  .site-header > .col-full > .site-branding {
    order: 2;
    flex: 1;
    display: flex;
    justify-content: center;
    margin: 0;
  }
  .jl-brand { column-gap: 8px; }
  .jl-brand__name { font-size: 23px; }

  .jl-m-cart {
    order: 3;
    flex: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--jl-ink);
  }
  .jl-m-cart:hover { color: var(--jl-bordeaux); }
  .jl-m-cart-count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: var(--jl-r-pill);
    background: var(--jl-bordeaux);
    color: var(--jl-cream);
    font-size: 10px;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
  }

  /* The desktop text-cart pill and the whole nav row are replaced by the
     drawer + the icon cart above. */
  .site-header > .col-full > .site-header-cart { display: none; }
  .storefront-primary-navigation { display: none; }

  /* Search → full-width pill below the top row (overrides the desktop
     absolute-centred layout). Storefront hides .site-search on handheld
     (it relegates search to its footer bar); re-show it here. */
  .site-header > .col-full > .site-search {
    display: block;
    order: 4;
    position: static;
    transform: none;
    left: auto;
    top: auto;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  /* Announcement ribbon — tighter on small screens. */
  .jl-announce {
    gap: 9px;
    padding: 7px 14px;
    font-size: 9px;
    letter-spacing: .18em;
    text-indent: .18em;
  }
  .jl-announce svg { width: 9px; height: 9px; }
}

/* --- Slide-in navigation drawer (dark panel + scrim) --- */
.jl-m-nav {
  position: fixed;
  inset: 0;
  z-index: 999;
}
.jl-m-nav[hidden] { display: none; }
.jl-m-nav__scrim {
  position: absolute;
  inset: 0;
  background: rgba(27, 21, 18, .5);
  opacity: 0;
  transition: opacity .3s ease;
}
.jl-m-nav.is-open .jl-m-nav__scrim { opacity: 1; }
.jl-m-nav__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 80%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  background: var(--jl-ink);
  box-shadow: 8px 0 40px rgba(0, 0, 0, .4);
  transform: translateX(-100%);
  transition: transform .3s ease;
}
.jl-m-nav.is-open .jl-m-nav__panel { transform: translateX(0); }

.jl-m-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(243, 233, 219, .14);
}
.jl-m-nav__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--jl-serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--jl-cream);
}
.jl-m-nav__close {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none; /* drop buttons.css's bordeaux drop-shadow + padding */
  color: var(--jl-cream);
  cursor: pointer;
}

.jl-m-nav__menu { padding: 14px 0; }
.jl-m-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.jl-m-nav__list li { margin: 0; }
.jl-m-nav__list a {
  display: block;
  padding: 15px 24px;
  font-family: var(--jl-sans);
  font-size: 17px;
  font-weight: 500;
  color: var(--jl-cream);
  text-decoration: none;
}
.jl-m-nav__list a:hover,
.jl-m-nav__list .current-menu-item > a,
.jl-m-nav__list .current_page_item > a {
  color: var(--jl-brass);
  background: rgba(181, 144, 77, .08);
}

.jl-m-nav__foot {
  margin-top: auto;
  display: flex;
  gap: 12px;
  padding: 22px 24px;
  border-top: 1px solid rgba(243, 233, 219, .14);
}
.jl-m-nav__foot a {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--jl-r-pill);
  border: 1px solid rgba(243, 233, 219, .2);
  color: var(--jl-cream);
  transition: border-color .2s ease, color .2s ease;
}
.jl-m-nav__foot a:hover {
  border-color: var(--jl-brass);
  color: var(--jl-brass);
}

body.jl-m-nav-lock { overflow: hidden; }