/* ==========================================================
   G-AXIS BRAND OVERRIDES (Green + Blue Hybrid Theme)
   Load this file AFTER main.css
   ========================================================== */

:root {
  /* ===== Brand Primary: Green (Main) ===== */
  --main-50:#e6f8ec;
  --main-100:#ccf1da;
  --main-200:#99e3b4;
  --main-300:#66d58f;
  --main-400:#33c76a;
  --main-500:#21b55b;
  --main-600:#0FA74A;   /* G-Axis Green */
  --main-700:#0b7a35;
  --main-800:#075225;
  --main-900:#032d14;

  /* ===== Accent Secondary: Blue (Electric) ===== */
  --main-two-50:#e8f2fa;
  --main-two-100:#d1e4f5;
  --main-two-200:#a3c9ea;
  --main-two-300:#75afe0;
  --main-two-400:#4794d5;
  --main-two-500:#1e73be;  /* Primary Blue */
  --main-two-600:#1E73BE;
  --main-two-700:#17578f;
  --main-two-800:#0f3b60;
  --main-two-900:#081f32;

  /* ===== Accent / Warn / Amber ===== */
  --secondary-600:#FF9900;

  /* ===== Text / Neutral ===== */
  --neutral-900:#111111;
  --neutral-700:#444;
  --neutral-500:#666;
  --neutral-300:#ccc;
  --neutral-100:#f5f5f5;

  /* Header surfaces */
  --hx-topbar-bg: linear-gradient(90deg, var(--main-600) 0%, var(--main-two-600) 100%);
  --hx-header-bg:#ffffff;   /* middle header */
  --hx-toolbar-bg:#ffffff;  /* categories/search row */
  --hx-border:rgba(0,0,0,.08);

  /* Soft pill */
  --hx-pill:rgba(211,221,180,.25);

  /* Link hue */
  --hx-link:#1f3a8a;
}

/* ==========================================================
   GLOBAL ELEMENT FIXES
   ========================================================== */

/* Body base look */
body {
  background:#FFFCF3;
  color:var(--neutral-900);
  font-family:"Poppins","Open Sans",sans-serif;
  line-height:1.6;
}

/* Header & promo bar */
.header-top.bg-main-600,
.gx-topbar{
  background: var(--hx-topbar-bg) !important;
  color:#fff;
}
.gx-topbar .container{ padding-block:8px; }
.gx-topbar a{ color:#fff; text-decoration:none; opacity:.9; }
.gx-topbar a:hover{ opacity:1; }
.gx-sale-label{ opacity:.95; }
.gx-countdown{ display:flex; gap:14px; }
.gx-countdown strong{ font-weight:600; }
.gx-countdown span{ opacity:.85; font-size:12px; }

.header-middle,
.gx-header{
  border-color:rgba(0,0,0,0.05);
  background:#fff;
  border-bottom:1px solid var(--hx-border);
}

/* Navigation hover links */
.nav-menu__link:hover,
.nav-submenu__link:hover {
  color:var(--main-two-600) !important;
}

/* Category button base (theme class) */
.category__button.bg-main-two-600 {
  background: linear-gradient(90deg, var(--main-two-600), var(--main-600)) !important;
  border:none;
  color:#fff;
}
.category__button:hover {
  filter:brightness(1.05);
  box-shadow:0 4px 12px rgba(15,167,74,.25);
}

/* Buttons & badges */
.btn-main,
.bg-main-600.btn,
button.bg-main-600 {
  background: linear-gradient(90deg, var(--main-600), var(--main-two-600));
  border:none;
  color:#fff;
  transition:all .25s ease;
}
.btn-main:hover { filter:brightness(0.95); }

/* REMOVE header badges (e.g., “New”) */
.badge-notification { display:none !important; }

/* Footer styling */
footer { background:#0b1220; color:#ccc; }
footer a:hover { color:var(--main-two-600); }
footer h6, footer h5, footer strong { color:#fff; }

/* Remove extra white space below header & above footer */
.header, .header-middle, .header-top { margin-bottom:0 !important; padding-bottom:0 !important; }
.hero-section, .slider-section, .banner-section { margin-top:0 !important; padding-top:0 !important; }
section, .hero, .slider-area { padding-top:0 !important; padding-bottom:0 !important; }

/* Body layout fix */
html, body { height:auto !important; overflow-x:hidden; }
main { min-height:calc(100vh - 250px); }

/* Scroll progress */
.progress-wrap path { stroke:var(--main-600); }

/* Highlight color for links and icons */
a, .text-main-600 { color:var(--main-600); }
a:hover { color:var(--main-two-600); }

/* Headings */
h1,h2,h3,h4,h5,h6 { color:#111; font-weight:700; }

/* Forms */
input[type="email"], input[type="text"], textarea { border:1px solid rgba(0,0,0,0.1); }
input:focus, textarea:focus {
  border-color:var(--main-two-600);
  box-shadow:0 0 0 3px rgba(30,115,190,0.15);
}

/* ==========================================================
   HEADER LAYOUT (Desktop nav + search + actions)
   ========================================================== */

.gx-header .gx-header-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; }

/* ↓↓↓ LOGO SIZE (updated) ↓↓↓ */
.gx-logo img,
.header-middle .logo img{ height:48px; width:auto; display:block; }
@media (max-width:575.98px){
  .gx-logo img,
  .header-middle .logo img{ height:40px; }
}

/* primary nav */
.gx-menu .gx-nav{ display:flex; gap:22px; list-style:none; margin:0; padding:0; }
.gx-nav>li>a{ color:var(--neutral-900); text-decoration:none; font-weight:500; }
.gx-nav>li>a:hover{ color:var(--hx-link); }
.gx-nav .has-sub{ position:relative; }
.gx-nav .gx-sub{
  position:absolute; left:0; top:100%;
  background:#fff; border:1px solid var(--hx-border); border-radius:10px;
  min-width:220px; padding:8px 0; box-shadow:0 16px 36px rgba(0,0,0,.08);
  display:none; z-index:1000;
}
.gx-nav .has-sub:hover>.gx-sub{ display:block; }
.gx-sub li a{ display:block; padding:10px 14px; color:#333; text-decoration:none; }
.gx-sub li a:hover{ background:#f5f5f5; color:var(--main-two-600); }

/* Language / Currency */
.gx-mini{ display:flex; gap:12px; list-style:none; margin:0; padding:0; }
.gx-mini .has-sub{ position:relative; }
.gx-mini-btn{ color:var(--neutral-900); text-decoration:none; font-weight:600; }
.gx-mini-sub{
  position:absolute; left:0; top:calc(100% + 6px);
  background:#fff; border:1px solid var(--hx-border); border-radius:10px;
  min-width:160px; padding:6px 0; display:none; box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.gx-mini .has-sub:hover .gx-mini-sub{ display:block; }
.gx-mini-sub a{ display:flex; align-items:center; gap:8px; padding:8px 12px; color:#333; text-decoration:none; }

/* Toolbar row under header (categories + search + actions) */
.gx-toolbar{ background:var(--hx-toolbar-bg); padding:12px 0; }
.gx-toolbar .gx-toolbar-row{
  display:grid; grid-template-columns: 320px 1fr auto; gap:16px; align-items:center;
}

/* Search */
.gx-search{ position:relative; align-items:stretch; }
.gx-search input{
  width:100%; padding:14px 56px 14px 18px;
  border:1px solid var(--hx-border); border-radius:12px;
  background:#F4F6EE; color:#333; font-weight:500;
}
.gx-search button{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; border:none;
  background:transparent; color:#1f3a8a; font-size:20px;
}

/* Actions (Wishlist heart + Cart + Account) */
.gx-actions{ display:flex; align-items:center; gap:14px; }
.gx-action{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--neutral-900); }
.gx-action .ico{ position:relative; display:inline-flex; font-size:22px; line-height:1; }
.gx-action .badge{
  position:absolute; right:-8px; top:-8px; min-width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; background:var(--main-600);
}
.gx-action:hover{ color:var(--main-two-600); }

.gx-account{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--hx-pill); color:var(--neutral-900);
  padding:12px 20px; border-radius:999px; text-decoration:none; font-weight:600;
}
.gx-account:hover{ background:rgba(211,221,180,.36); }

/* ==========================================================
   NEWSLETTER + SHIPPING SECTIONS (Blue & Golden Theme)
   ========================================================== */

/* --- Newsletter Section --- */
.newsletter-two {
  background: linear-gradient(135deg, #1E73BE 0%, #0FA74A 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  border-top: 4px solid #FFD966;
  border-bottom: 4px solid #FFD966;
}

/* shimmer animation */
.newsletter-two::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.25), transparent, rgba(255,255,255,0.25));
  animation: shimmer 5s infinite linear;
}
@keyframes shimmer { 0%{left:-100%;} 50%{left:100%;} 100%{left:100%;} }

.newsletter-two h4 { color:#fff; font-weight:700; font-size:1.8rem; }
.newsletter-two h4 span { color:#FFD966; }

.newsletter-two input[type="email"]{
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff; padding: 14px 16px; border-radius: 8px; width: 100%;
}
.newsletter-two input::placeholder{ color: rgba(255,255,255,0.7); }
.newsletter-two button{
  background: linear-gradient(90deg, #FFD966, #1E73BE);
  border: none; color: #111; font-weight: 600;
  border-radius: 8px; padding: 14px 28px; transition: all 0.3s ease;
}
.newsletter-two button:hover{
  background: linear-gradient(90deg, #1E73BE, #FFD966);
  color: #fff; transform: translateY(-2px);
}

/* --- Shipping Section --- */
.shipping{
  background: linear-gradient(135deg, #1E73BE 0%, #FFD966 100%);
  padding: 70px 0; position: relative; overflow: hidden;
}
.shipping::before{
  content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.15), transparent, rgba(255,255,255,0.15));
  animation: shimmer 6s infinite linear;
}
.shipping .shipping-item{
  background: rgba(255,255,255,0.15);
  border-radius: 12px; padding: 20px;
  transition: transform 0.3s ease, background 0.3s ease;
}
.shipping .shipping-item:hover{ transform: translateY(-6px); background: rgba(255,255,255,0.3); }
.shipping h6{ color:#fff; font-weight:700; }
.shipping span{ color: rgba(255,255,255,0.9); }

@media (max-width:768px){
  .newsletter-two, .shipping { text-align:center; padding:50px 20px; }
  .newsletter-two form { flex-direction:column; gap:12px; }
}

/* ==========================================================
   CATEGORY DROPDOWN — BUTTON + MOBILE DRAWER + DESKTOP (FIX)
   ========================================================== */

/* Let dropdown overlap hero */
.header, .header-middle, .gx-toolbar { position: relative; z-index: 40; }
header .container, .header .container { overflow: visible; }

/* Anchor wrapper */
.category-two { position: relative; z-index: 500; }

/* THE LEFT PANEL (main dropdown) — absolute so it doesn't push layout */
.category-two .nav-submenu,
.category-two .responsive-dropdown,
.category-two .submenus-submenu-wrapper {
  position: absolute !important;
  left: 0 !important;
  top: calc(100% + 8px) !important;
  width: 320px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  margin: 0 !important;          /* kill “white strip” gap */
  padding: 0 !important;
  display: none;                  /* no space reservation */
  z-index: 1000;
}

/* Open state (JS toggles .open on desktop) */
.category-two.open .nav-submenu,
.category-two.open .responsive-dropdown,
.category-two.open .submenus-submenu-wrapper {
  display: block !important;
}

/* Left list cosmetics */
.category-two .responsive-dropdown ul { list-style: none; margin: 0; padding: 8px 0; }
.category-two .responsive-dropdown li a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  color: var(--neutral-900);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.05);
  transition: background .2s ease, color .2s ease, padding .2s ease;
}
.category-two .responsive-dropdown li:last-child a { border-bottom: none; }
.category-two .responsive-dropdown li a:hover {
  background: linear-gradient(90deg, var(--main-two-600), var(--main-600));
  color: #fff; padding-left: 22px;
}

/* RIGHT FLYOUT (subcategories) — attached to right of left panel */
.category-two .submenus-submenu {
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;          /* appear to the right */
  min-width: 340px;
  height: 100%;
  background: #fff;
  border-left: 1px solid rgba(0,0,0,.06);
  display: none;                  /* only show on hover */
  padding: 12px 0 !important;
  box-shadow: 12px 18px 30px rgba(0,0,0,.08);
}

/* Keep flyout visible while hovering its parent item */
.category-two .has-submenus-submenu:hover > .submenus-submenu {
  display: block !important;
}

/* Flyout content cosmetics */
.category-two .submenus-submenu__title {
  font-weight: 700;
  color: var(--main-two-600);
  padding: 0 18px 8px;
  border-left: 4px solid var(--main-600);
}
.category-two .submenus-submenu__list a {
  display: block;
  padding: 8px 22px;
  color: var(--neutral-700);
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.category-two .submenus-submenu__list a:hover {
  color: var(--main-600);
  background: rgba(30,115,190,0.08);
  transform: translateX(5px);
}

/* Category button (brand gradient) */
.category-two .category__button{
  display:flex; align-items:center; gap:10px;
  background: linear-gradient(90deg, var(--main-600) 0%, var(--main-two-600) 60%);
  border:none; color:#fff; font-weight:600; border-radius:10px;
  padding:14px 18px; box-shadow:0 4px 12px rgba(0,0,0,0.15);
  transition:all .3s ease;
}
.category-two .category__button .icon{ font-size:20px; }
.category-two .category__button .arrow{ margin-left:auto; }
.category-two .category__button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(15,167,74,0.25);
  filter:brightness(1.05);
}

/* ==========================================================
   UTILITIES / SMALL FIXES
   ========================================================== */
.nav-menu__link:hover,
.nav-submenu__link:hover { color:var(--main-two-600) !important; }

/* ==========================================================
   ADDITIONS: Desktop fixed/always-open Categories panel
   ========================================================== */

/* Hide category toggle button when fixed open on desktop */
.category-two.category-fixed-open .category__button{ display:none; }

/* Desktop only behavior */
@media (min-width:992px){
  /* Reserve left column for the panel */
  .category-two.category-fixed-open{
    width:280px;
    flex-shrink:0;
  }

  /* Render the drawer content as a static block */
  .category-two.category-fixed-open .responsive-dropdown,
  .category-two.category-fixed-open .nav-submenu,
  .category-two.category-fixed-open .submenus-submenu-wrapper{
    display:block !important;
    position:static !important;
    width:auto;
    margin:0 !important;
    padding:0 !important;
    border:1px solid rgba(0,0,0,.06);
    border-radius:12px;
    box-shadow:none;
    max-height:calc(100vh - 160px); /* keep within viewport */
    overflow:auto;
  }

  /* Sticky panel under top bars */
  .category-two.category-sticky .responsive-dropdown{
    position:sticky !important;
    top:96px; /* tweak to your combined header height */
  }

  /* Hide mobile-only bits inside fixed panel */
  .category-two.category-fixed-open .close-responsive-dropdown,
  .category-two.category-fixed-open .logo{
    display:none !important;
  }

  /* Align header content to top so tall left column doesn't push items */
  .header .header-inner{ align-items:flex-start; }
  .header .header-inner > .d-flex.w-100{ align-items:flex-start; }

  /* Desktop hover: show right flyout menu */
  .category-two .submenus-submenu{ display:none; }
  .category-two li.has-submenus-submenu:hover > .submenus-submenu{
    display:block !important;
  }

  /* Ensure search area has room next to fixed panel */
  .header .header-inner .position-relative.ms-20.max-w-870.w-100{
    max-width:100%;
    margin-left:20px;
  }
}