/* =============================================
   Header & Navigation  centered desktop nav + mobile overlay
   ============================================= */

/* ===== Theme tokens ===== */
:root {
   --brand: #8aac4b; /* accent */
   --ink: #0f0f10;
   --ink-weak: #61616b;
   --bg: #ffffff;
   --bg-2: #f6f7f9;
   --line: #e7e7ec;
   --dark: #0b0b0c; /* announcement bar */
   --alert: #e04048; /* cart badge red */
   --shadow: 0 10px 30px rgb(16 16 16 / 16%);
   --radius: 10px;
   --ts: 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ===== Base resets ===== */
#masthead,
#masthead * { box-sizing: border-box; }
#masthead a { text-decoration: none; color: inherit; }
#main-navigation ul,
#main-navigation li { list-style: none; margin: 0; padding: 0; }

/* ===== Top announcement bar ===== */
#banner-bar {
   background: var(--accent);
   color: #fff;
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
}
#banner-bar .banners.container {
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   gap: 10px;
   min-height: 40px;
}
#banner-bar .banners.container * {
   color: #fff;
   font-weight: 800;
   letter-spacing: 0.015em;
}

#masthead {
   background: var(--bg);
   position: sticky;
   top: 0;
   z-index: 1000;
}
#inner-header.container {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: clamp(16px, 4vw, 64px);
   min-height: 100px;
   background: var(--bg);
   border-bottom: 1px solid var(--line);
   box-shadow: var(--shadow);
   max-width: none;
   width: 100%;
   margin: 0;
   padding-inline: clamp(16px, 4vw, 56px);
}

/* ===== Logo (fixed size; never shrink) ===== */
#logo.container {
   display: flex;
   align-items: center;
   padding: 0;
   justify-self: start;
   flex: 0 0 auto;
   min-width: 120px;
}
#logo a {
   display: inline-flex;
   align-items: center;
   height: 100%;
}
#logo img {
   display: block;
   width: auto;
   height: 100px; 
   max-height: none;
}

/* ===== Desktop navigation (centered) ===== */
.mainnav-container { display: flex; align-items: center; justify-self: center; }
#main-navigation { background: none; }
#main-navigation .menu {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: clamp(16px, 4vw, 56px); 
   white-space: nowrap;
}
#main-navigation .menu > li.menu-item { position: relative; }
#main-navigation .menu > li.menu-item > a {
   position: relative;
   display: inline-block;
   padding: 10px 4px 12px; 
   font-weight: 800;
   font-size: clamp(15px, 1.4vw, 18px);
   line-height: 1;
   color: var(--ink);
   letter-spacing: 0.01em;
   transition: color var(--ts);
   font-family: "Roboto Slab";
}
#main-navigation .menu > li.menu-item > a::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: 6px; 
   width: 32px;
   height: 3px;
   border-radius: 3px;
   background: var(--brand);
   transform: translateX(-50%) scaleX(0);
   transform-origin: center;
   transition: transform var(--ts);
}
#main-navigation .menu > li.menu-item:hover > a,
#main-navigation .menu > li.menu-item:focus-within > a { color: var(--brand); }
#main-navigation .menu > li.menu-item:hover > a::after,
#main-navigation .menu > li.menu-item:focus-within > a::after { transform: translateX(-50%) scaleX(1); }
#main-navigation .menu > li.current-menu-item > a,
#main-navigation .menu > li.current-menu-ancestor > a { color: var(--brand); }
#main-navigation .menu > li.current-menu-item > a::after,
#main-navigation .menu > li.current-menu-ancestor > a::after { transform: translateX(-50%) scaleX(1); }
#main-navigation a:link, #main-navigation a:visited, #main-navigation a:hover { text-decoration: none; color: inherit; }

/* ===== Dropdowns ===== */
#main-navigation .sub-menu {
   position: absolute;
   top: calc(100% + 16px);
   left: 0;
   min-width: 240px;
   background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 12px;
   box-shadow: var(--shadow);
   padding: 8px;
   visibility: hidden;
   opacity: 0;
   transform: translateY(-8px);
   transition: opacity var(--ts), transform var(--ts), visibility var(--ts);
}
#main-navigation .menu > li:last-child > .sub-menu { left: auto; right: 0; }
#main-navigation .menu > li:hover > .sub-menu,
#main-navigation .menu > li:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: translateY(0); }
#main-navigation .sub-menu::before {
   content: "";
   position: absolute;
   top: -8px;
   left: 28px;
   width: 12px;
   height: 12px;
   background: var(--bg);
   border-left: 1px solid var(--line);
   border-top: 1px solid var(--line);
   transform: rotate(45deg);
}
#main-navigation .sub-menu > li > a {
   display: block;
   padding: 12px 10px;
   border-radius: 8px;
   font-weight: 700;
   color: var(--ink);
}
#main-navigation .sub-menu > li > a:hover { background: var(--bg-2); }

/* ===== Right-side icons ===== */
.user-nav-container { justify-self: end; }
.user-nav-container nav > ul { display: flex; align-items: center; margin: 0; padding: 0; }
.user-nav-container nav > ul > li { list-style: none; margin-left: 0; }
.user-nav-container a { display: inline-flex; align-items: center; justify-content: center; padding: 8px; color: var(--ink); }
.user-nav-container a:hover { opacity: 0.7; }
.user-nav-container i { font-size: 22px; line-height: 1; }

/* cart badge */
.user-nav-container .cart-contents { position: relative; }
.user-nav-container .cart-contents .cart-count,
.user-nav-container .cart-contents .count,
.user-nav-container .cart-contents .wc-cart-count {
   position: absolute;
   top: 2px;
   right: 0px;
   min-width: 20px;
   height: 20px;
   padding: 0 6px;
   border-radius: 999px;
   background: var(--alert);
   color: #fff;
   display: grid;
   place-items: center;
   font-size: 12px;
   font-weight: 800;
   box-shadow: 0 0 0 2px #fff;
}

/* ===== Hamburger (mobile) ===== */
.hamburger-container { display: none; }
.hamburger-logo { cursor: pointer; padding: 6px 10px; border-radius: 10px; }
.hamburger-logo .line { width: 34px; height: 3px; display: block; margin: 7px 0; transition: transform var(--ts), opacity var(--ts); }
#hamburger.is-active .line:nth-child(2) { opacity: 0; }
#hamburger.is-active .line:nth-child(1) { transform: translateY(10px) rotate(45deg); }
#hamburger.is-active .line:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ===== Mobile overlay (#menu-mobile) ===== */
#menu-mobile {
   /* position:fixed; */
   inset: 0;
   background: var(--bg);
   z-index: 1100;
   overflow: auto;
   transform: translateY(-10px);
   opacity: 0;
   visibility: hidden;
   transition: opacity var(--ts), transform var(--ts), visibility var(--ts);
}
.menu-open #menu-mobile { transform: translateY(0); opacity: 1; visibility: visible; }
.menu-open { overflow: hidden; }
#menu-mobile ul, #menu-mobile li { list-style: none; margin: 0; padding: 0; }
#menu-mobile .menu > li { border-bottom: 1px solid var(--line); }
#menu-mobile .menu > li:last-child { border-bottom: 0; }
#menu-mobile a { display: block; padding: 16px 0; font-weight: 800; font-size: 18px; color: var(--ink); }
#menu-mobile .menu-item-has-children > a { position: relative; padding-right: 28px; }
#menu-mobile .menu-item-has-children > a::after {
   content: "\f107";
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   position: absolute; right: 0; top: 50%;
   transform: translateY(-50%);
   transition: transform var(--ts);
}
#menu-mobile .sub-menu { display: none; border-left: 3px solid var(--brand); margin: 0 0 12px 10px; padding: 6px 0 6px 12px; }
#menu-mobile .sub-menu a { font-weight: 700; font-size: 16px; padding: 12px 0; }
#menu-mobile li.open > .sub-menu { display: block; }
#menu-mobile li.open > a::after { transform: translateY(-50%) rotate(180deg); }

/* ===== A11y ===== */
#main-navigation a:focus,
.user-nav-container a:focus,
.language-switcher a:focus,
#menu-mobile a:focus {
   outline: none;
   box-shadow: none;
   border: none;
   text-decoration: none;
}

/* ===== Animations ===== */
@media (prefers-reduced-motion: no-preference) {
   #inner-header.container { animation: headerPop 0.35s ease-out both; }
   @keyframes headerPop {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: none; }
   }
}

/* ===== Mobile layout (hamburger @ 812px) ===== */
@media (max-width: 812px) {
   /* 3 columns: logo | icons | hamburger */
   #inner-header.container {
      grid-template-columns: auto 1fr auto;
      align-items: center;
      min-height: 200px;
      gap: 12px;
   }

   /* Hide desktop nav on mobile */
   #inner-header .mainnav-container,
   #inner-header nav#main-navigation,
   #inner-header nav#main-navigation .menu { display: none; }

   /* center the right-side icons on mobile */
   .user-nav-container {/* justify-self: center; */}
   .user-nav-container nav > ul {
      display: flex; align-items: center; justify-content: center;
      gap: 14px; flex-wrap: nowrap;
   }

   /* show hamburger on the right */
   .hamburger-container { display: block; justify-self: end; }
   .hamburger-logo .line { background: var(--brand); }
}

/* ===== Tiny screens: allow a slight logo reduction ===== */
@media (max-width: 360px) {
   #logo img { height: 92px; } 
}

/* Mobile overlay layout: center logo + centered menu items */
#menu-mobile {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   gap: 18px;
}
#menu-mobile .mobile-head {
   display: flex; align-items: center; justify-content: center;
   width: 100%; margin: 0 0 6px;
}
#menu-mobile .mobile-head img { height: 56px; width: auto; display: block; }
#menu-mobile .menu {
   width: min(540px, 100%);
   display: flex; flex-direction: column; align-items: center; gap: 6px;
}
#menu-mobile .menu > li { border: 0; width: 100%; }
#menu-mobile .menu > li > a { width: 100%; padding: 14px 0; text-align: center; font-weight: 800; }
#menu-mobile .sub-menu { width: 100%; margin-left: 0; border-left: 0; padding-left: 0; }

/* === User navigation logo === */
.user-nav-container img.cart-icon, img.profile-icon, img.logout-icon, img.signup-icon, img.registration-icon, img.login-icon {
  width: 45px; height: auto; display: block; filter: none; -webkit-filter: none; mix-blend-mode: normal; opacity: 1;
}

/* === Compact header at <=1280px ======================================= */
@media (max-width: 1280px) {
   #inner-header.container {
      padding-inline: clamp(12px, 3vw, 32px);
      gap: clamp(12px, 3vw, 32px);
      min-height: 110px; 
   }
   #logo img { height: 92px; }
   #main-navigation .menu { gap: clamp(14px, 3vw, 40px); }
   #main-navigation .menu > li.menu-item > a { padding: 9px 2px 11px; font-size: clamp(14px, 1.25vw, 17px); }
   #main-navigation .menu > li.menu-item > a::after { bottom: 5px; width: 30px; height: 3px; }

   .user-nav-container nav > ul { gap: 12px; }
   .user-nav-container a { padding: 6px; }
   .user-nav-container i { font-size: 20px; }
   .user-nav-container .cart-contents .cart-count { top: -6px; right: -10px; }
}


@media (max-width: 1120px) {
   #inner-header.container { padding-inline: clamp(10px, 2.4vw, 24px); gap: clamp(10px, 2.4vw, 24px); min-height: 104px; }
   #logo img { height: 86px; }
   #main-navigation .menu { gap: clamp(12px, 2.6vw, 28px); }
   #main-navigation .menu > li.menu-item > a { padding: 8px 2px 10px; font-size: clamp(13px, 1.2vw, 16px); }
   #main-navigation .menu > li.menu-item > a::after { bottom: 4px; width: 28px; height: 3px; }

   .user-nav-container nav > ul { gap: 1px; }
   .user-nav-container a { padding: 5px; }
   .user-nav-container i { font-size: 20px; }
}

/* Hamburger morph to X (dup kept for clarity) */
#hamburger.is-active .line:nth-child(2) { opacity: 0; }
#hamburger.is-active .line:nth-child(1) { transform: translateY(10px) rotate(45deg); }
#hamburger.is-active .line:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ========== MOBILE OVERLAY UNDER HEADER (no layout push) ========== */

/* header stays on top */
#masthead { position: sticky; top: 0; z-index: 1000; }

/* the dropdown overlay right under the header */
#masthead > .mobile-navigation {
   position: absolute;
   top: 100%;
   left: 0; right: 0;
   width: 100vw;
   background: #fff;
   z-index: 900;

   transform-origin: top center;
   transform: scaleY(0);
   opacity: 0;
   pointer-events: none;

   max-height: calc(100vh - 12px);
   overflow: auto;

   padding: 16px clamp(16px, 4vw, 24px);
   box-shadow: 0 12px 30px rgba(0,0,0,0.12);

   transition: transform 0.32s ease, opacity 0.22s ease;
}
body.menu-open #masthead > .mobile-navigation,
#masthead > .mobile-navigation.open { transform: scaleY(1); opacity: 1; pointer-events: auto; }

#masthead > .mobile-navigation .menu {
   margin: 0 auto; max-width: 560px; width: 100%;
   display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0;
}
#masthead > .mobile-navigation .menu > li { width: 100%; border: 0; }
#masthead > .mobile-navigation .menu > li > a { display: block; width: 100%; padding: 14px 0; text-align: center; font-weight: 800; }
#masthead > .mobile-navigation .mobile-head {
   display: flex; align-items: center; justify-content: center; width: 100%; margin: 0 0 6px;
}
#masthead > .mobile-navigation .mobile-head img { height: 56px; width: auto; display: block; }
#masthead > .mobile-navigation { inset: auto; }

@media (max-width: 480px) {
   #masthead > .mobile-navigation { padding: 12px 16px; }
   #masthead > .mobile-navigation .menu > li > a { padding: 12px 0; }
}

#inner-header.container { grid-template-columns: auto 1fr auto; }
.user-nav-container { min-width: 0; }
.user-nav-container nav > ul { flex-wrap: nowrap; }

@media (max-width: 420px) {
   #inner-header.container { padding-inline: 10px; gap: 8px; min-height: 140px; }
   #logo img { height: 90px; }
   #logo.container { min-width: 110px; }

   .user-nav-container nav > ul { gap: 8px; }
   .user-nav-container li a {padding: 4px;}
   .user-nav-container i { font-size: 20px; line-height: 1; }

   .user-nav-container .cart-contents .cart-count {
      top: -4px; right: -8px; min-width: 16px; height: 16px; padding: 0 5px; font-size: 10px; box-shadow: 0 0 0 1px #fff;
   }
   .hamburger-logo .line {width: 26px;/* height: 2.5px; *//* margin: 6px 0; */}
}

/* <= 380px */
@media (max-width: 380px) {
   #inner-header.container { padding-inline: 8px; gap: 6px; min-height: 128px; }
   #logo img { height: 84px; }
   #logo.container { min-width: 96px; }

   .user-nav-container nav > ul { gap: 6px; }
   .user-nav-container i { font-size: 18px; }
   .user-nav-container a {padding: 3px;}

}

/* <= 340px */
@media (max-width: 340px) {
   #inner-header.container { padding-inline: 6px; gap: 6px; min-height: 118px; }
   #logo img { height: 78px; }
   #logo.container { min-width: 88px; }

   .user-nav-container nav > ul { gap: 5px; }
   .user-nav-container i { font-size: 17px; }
   .user-nav-container a { padding: 2px; }
   .user-nav-container .cart-contents .cart-count {
      top: -3px; right: -6px; min-width: 14px; height: 14px; font-size: 9px;
   }
}

/* scrolling effect */
#inner-header.container,
#logo img,
#main-navigation .menu > li > a,
.user-nav-container img.cart-icon,
.user-nav-container img.profile-icon,
.user-nav-container img.logout-icon,
.user-nav-container img.signup-icon,
.user-nav-container img.registration-icon { transition: all .25s ease; }
#masthead.is-scrolled #inner-header.container {
  min-height: 96px;            
  padding-inline: clamp(12px, 4vw, 56px);
  box-shadow: 0 2px 6px rgb(0 0 0 / 8%), 0 10px 24px rgb(0 0 0 / 10%);
}
#masthead.is-scrolled #logo img { height: 84px; } 
#masthead.is-scrolled #main-navigation .menu > li > a {
  font-size: clamp(14px, 1.1vw, 16px);
  padding: 8px 4px 10px;          
}
#masthead.is-scrolled #main-navigation .menu > li > a::after {
  bottom: 3px; width: 28px; height: 3px;
}

#masthead.is-scrolled .user-nav-container a { padding: 6px; }
#masthead.is-scrolled .user-nav-container img.cart-icon,
#masthead.is-scrolled .user-nav-container img.profile-icon,
#masthead.is-scrolled .user-nav-container img.logout-icon,
#masthead.is-scrolled .user-nav-container img.signup-icon,
#masthead.is-scrolled .user-nav-container img.registration-icon { width: 38px; }

#masthead.is-scrolled .user-nav-container .cart-contents .cart-count {
  top: -4px; right: -6px; min-width: 16px; height: 16px; font-size: 10px; box-shadow: 0 0 0 1px #fff;
}
@media (max-width: 812px){
  #masthead.is-scrolled #inner-header.container { min-height: 140px; }
  #masthead.is-scrolled #logo img { height: 92px; }
  #masthead.is-scrolled .user-nav-container img.cart-icon,
  #masthead.is-scrolled .user-nav-container img.profile-icon,
  #masthead.is-scrolled .user-nav-container img.logout-icon { width: 42px; }
}
@media (prefers-reduced-motion: reduce){
  #inner-header.container,
  #logo img,
  #main-navigation .menu > li > a { transition: none; }
}