/* SP — GLOBAL CSS (combined from WPCode) */
/* =========================================================
   SP — HEADER (FIGMA) — ALL-IN-ONE
   - Exact Figma dark header color: #1A1A1A
   - Premium spacing/typography/underline
   - Dark dropdown styling
   - Cart + Account icons styled
   - Mini-cart flyout disabled
   - Remove dropdown arrow next to Info
   - Compact header WITHOUT shrinking logo
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
    --sp-header-bg: #1A1A1A;                 /* EXACT FIGMA */
    --sp-header-text: #ffffff;
    --sp-header-text-dim: rgba(255,255,255,0.78);
    --sp-header-border: rgba(255,255,255,0.10);
    --sp-header-hover: rgba(255,255,255,0.08);
  
    --sp-dropdown-bg: #1A1A1A;               /* keep consistent with header */
    --sp-dropdown-border: rgba(255,255,255,0.10);
    --sp-dropdown-shadow: 0 18px 50px rgba(0,0,0,0.60);
  }
  
  /* =========================================================
     1) Header background + base colors (force everywhere)
     ========================================================= */
  
  /* Normal header */
  .ast-primary-header-bar{
    background-color: var(--sp-header-bg) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--sp-header-border) !important;
  }
  
  /* Transparent header mode (Astra can override on home) */
  .ast-theme-transparent-header .ast-primary-header-bar,
  .ast-theme-transparent-header .main-header-bar{
    background-color: var(--sp-header-bg) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--sp-header-border) !important;
  }
  
  /* Make all header text light */
  .ast-primary-header-bar,
  .ast-primary-header-bar a,
  .ast-primary-header-bar .ast-builder-menu-1 a,
  .ast-primary-header-bar .main-header-menu > .menu-item > a{
    color: var(--sp-header-text-dim) !important;
  }
  
  /* Hover + active menu states */
  .main-header-menu > .menu-item > a:hover{
    color: var(--sp-header-text) !important;
  }
  
  .main-header-menu > .current-menu-item > a,
  .main-header-menu > .current_page_item > a{
    color: var(--sp-header-text) !important;
  }
  
  /* Underline uses currentColor */
  .main-header-menu > .menu-item > a::after{
    background: currentColor !important;
  }
  
  /* =========================================================
     2) Overall header spacing + max width (Figma)
     ========================================================= */
  
  @media (min-width: 921px){
    .ast-primary-header-bar{
      padding-top: 14px !important;
      padding-bottom: 14px !important;
    }
  
    .ast-primary-header-bar .ast-container{
      max-width: 1440px !important;
      padding-left: 28px !important;
      padding-right: 28px !important;
    }
  
    .ast-primary-header-bar .ast-builder-grid-row{
      align-items: center !important;
    }
  }
  
  /* Mobile spacing */
  @media (max-width: 920px){
    .ast-primary-header-bar{
      padding-top: 10px !important;
      padding-bottom: 10px !important;
    }
  }
  
  /* =========================================================
     3) Logo sizing
     ========================================================= */
  
  @media (min-width: 921px){
    .site-branding img{
      max-height: 42px !important;
      width: auto !important;
    }
  }
  
  /* =========================================================
     4) Menu typography + spacing
     ========================================================= */
  
  @media (min-width: 921px){
    .main-header-menu > .menu-item > a{
      font-weight: 500 !important;
      font-size: 16px !important;
      letter-spacing: 0.2px !important;
      padding: 10px 14px !important;
      line-height: 1 !important;
    }
  
    .main-header-menu{
      gap: 4px !important;
    }
  }
  
  /* =========================================================
     5) Underline hover (Figma-like)
     ========================================================= */
  
  @media (min-width: 921px){
    .main-header-menu > .menu-item > a:hover{
      background: transparent !important;
    }
  
    .main-header-menu > .menu-item > a{
      position: relative !important;
    }
  
    .main-header-menu > .menu-item > a::after{
      content: "" !important;
      position: absolute !important;
      left: 14px !important;
      right: 14px !important;
      bottom: 2px !important;
      height: 2px !important;
      opacity: 0 !important;
      transform: scaleX(0.7) !important;
      transition: opacity .15s ease, transform .15s ease !important;
      background: currentColor !important;
    }
  
    .main-header-menu > .menu-item > a:hover::after{
      opacity: 0.55 !important;
      transform: scaleX(1) !important;
    }
  
    .main-header-menu > .current-menu-item > a::after,
    .main-header-menu > .current_page_item > a::after{
      opacity: 0.75 !important;
      transform: scaleX(1) !important;
    }
  }
  
  /* =========================================================
     6) Dropdown styling (Info submenu) — DARK + PREMIUM
     ========================================================= */
  
  @media (min-width: 921px){
    .main-header-menu .sub-menu{
      background: var(--sp-dropdown-bg) !important;
      border: 1px solid var(--sp-dropdown-border) !important;
      border-radius: 12px !important;
      overflow: hidden !important;
      padding: 8px 0 !important;
      box-shadow: var(--sp-dropdown-shadow) !important;
    }
  
    .main-header-menu .sub-menu li a{
      padding: 10px 14px !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      white-space: nowrap !important;
      color: rgba(255,255,255,0.82) !important;
    }
  
    .main-header-menu .sub-menu li a:hover{
      background: rgba(255,255,255,0.08) !important;
      color: #fff !important;
    }
  }
  
  /* =========================================================
     7) Icons (cart + account) to match Figma + dark theme
     ========================================================= */
  
  @media (min-width: 921px){
    .ast-header-woo-cart a,
    .ast-header-account a{
      min-width: 44px !important;
      min-height: 44px !important;
      border-radius: 10px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin-left: 10px !important;
      color: var(--sp-header-text-dim) !important;
      background: transparent !important;
    }
  
    .ast-header-woo-cart a:hover,
    .ast-header-account a:hover{
      background: var(--sp-header-hover) !important;
      color: var(--sp-header-text) !important;
    }
  
    /* Cart outline box on dark header */
    .ast-header-woo-cart a{
      border: 1px solid rgba(255,255,255,0.22) !important;
    }
  
    /* Cart count bubble positioning + visibility */
    .ast-header-woo-cart .ast-site-header-cart-data{
      transform: translate(6px, -6px) !important;
    }
  
    .ast-site-header-cart-data{
      background: #fff !important;
      color: #000 !important;
    }
  }
  
  /* Mobile hamburger/icon color */
  .ast-header-break-point .ast-mobile-menu-trigger-minimal{
    color: #fff !important;
  }
  
  /* =========================================================
     8) Remove the little arrow next to "Info"
     ========================================================= */
  
  .main-header-menu .menu-item-has-children > a .ast-icon,
  .main-header-menu .menu-item-has-children > a .dropdown-menu-toggle,
  .main-header-menu .menu-item-has-children > a .submenu-arrow{
    display: none !important;
  }
  
  /* Remove extra padding Astra reserves for the arrow */
  .main-header-menu .menu-item-has-children > a{
    padding-right: 14px !important;
  }
  
  /* =========================================================
     9) Disable mini-cart flyout (no hover panel)
     ========================================================= */
  
  /* Hide the mini-cart panel */
  .ast-site-header-cart .widget_shopping_cart,
  .ast-site-header-cart .woocommerce-mini-cart,
  .ast-site-header-cart .ast-site-header-cart-content,
  .ast-site-header-cart .ast-site-header-cart-content-wrap,
  .ast-site-header-cart .ast-site-header-cart-dropdown,
  .ast-site-header-cart .sub-menu{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* Ensure the cart icon remains clickable */
  .ast-site-header-cart a,
  .ast-header-woo-cart a{
    pointer-events: auto !important;
  }
  
  /* Stop Astra from trying to open it on hover */
  .ast-site-header-cart:hover .widget_shopping_cart,
  .ast-site-header-cart:hover .ast-site-header-cart-content,
  .ast-site-header-cart:hover .ast-site-header-cart-content-wrap{
    display: none !important;
  }
  
  /* =========================================================
     10) FORCE Compact Header Height (Astra Builder)
     Put at VERY END of the header snippet
     - keeps header short
     - DOES NOT shrink logo (keeps 42px)
     ========================================================= */
  
  @media (min-width: 921px){
  
    /* Force the actual header wrappers to stop enforcing height */
    .ast-primary-header-bar,
    .main-header-bar,
    .ast-theme-transparent-header .main-header-bar,
    .ast-theme-transparent-header .ast-primary-header-bar{
      padding-top: 6px !important;
      padding-bottom: 6px !important;
      min-height: 0 !important;
      height: auto !important;
    }
  
    /* Astra Builder row/container often carries the min-height */
    .ast-primary-header-bar .ast-builder-grid-row,
    .ast-primary-header-bar .ast-builder-grid-row-container,
    .main-header-bar .ast-builder-grid-row,
    .main-header-bar .ast-builder-grid-row-container{
      min-height: 0 !important;
      height: auto !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      align-items: center !important;
    }
  
    /* Sometimes spacing comes from the header section wrappers */
    .ast-header-main-header-wrap,
    .ast-primary-header,
    .ast-primary-header-bar-wrap{
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      min-height: 0 !important;
      height: auto !important;
    }
  
    /* ✅ Logo: keep size, remove extra space around it */
    .site-branding,
    .custom-logo-link{
      padding: 0 !important;
      margin: 0 !important;
      line-height: 0 !important;
    }
  
    .site-branding img,
    .custom-logo-link img{
      max-height: 42px !important; /* keep same as Section 3 */
      height: auto !important;
      width: auto !important;
      display: block !important;
    }
  
    /* Menu item vertical padding = big driver */
    .main-header-menu > .menu-item > a{
      padding-top: 6px !important;
      padding-bottom: 6px !important;
      line-height: 1 !important;
    }
  
    /* Icon blocks can also force row height */
    .ast-header-woo-cart a,
    .ast-header-account a{
      min-width: 34px !important;
      min-height: 34px !important;
      height: 34px !important;
    }
  
    /* If the icons are SVG/font icons, reduce their internal size */
    .ast-header-woo-cart a svg,
    .ast-header-account a svg,
    .ast-header-woo-cart a .ast-icon,
    .ast-header-account a .ast-icon{
      width: 18px !important;
      height: 18px !important;
      font-size: 18px !important;
    }
  }
  
  /* Mobile: also tighten */
  @media (max-width: 920px){
    .ast-primary-header-bar,
    .main-header-bar{
      padding-top: 6px !important;
      padding-bottom: 6px !important;
    }
  
    .site-branding,
    .custom-logo-link{
      padding: 0 !important;
      margin: 0 !important;
      line-height: 0 !important;
    }
  
    .site-branding img,
    .custom-logo-link img{
      max-height: 34px !important; /* slightly smaller on mobile */
      height: auto !important;
      width: auto !important;
      display: block !important;
    }
  }