/* ===============================
   AURIA HEADER – PREMIUM V2 (CLEAN + FIXED)
   Dark / Glass / Modern icons
   =============================== */

:root{
  --auria-bg:#0b1220;
  --auria-bg2:#0e1628;
  --auria-surface:rgba(255,255,255,0.05);
  --auria-surface2:rgba(255,255,255,0.08);
  --auria-border:rgba(255,255,255,0.10);
  --auria-text:#e6ebf2;
  --auria-muted:#9aa4b2;
  --auria-accent:#22c55e;
  --auria-radius:16px;
  --auria-pill:999px;
  --auria-shadow:0 18px 40px rgba(0,0,0,.35);
}

.auria-container{
  max-width:1240px;
  margin:0 auto;
  padding:0 16px;
}

.auria-header{
  position:relative;
  z-index:9999;
  background:linear-gradient(180deg,var(--auria-bg),var(--auria-bg2));
  border-bottom:1px solid var(--auria-border);
  color:var(--auria-text);
}

/* Porto/theme overrides (readable + visible) */
.auria-header *{ box-sizing:border-box; }
.auria-header a,
.auria-header a:visited{
  color:var(--auria-text) !important;
  opacity:1 !important;
  filter:none !important;
  text-decoration:none !important;
}

.auria-header .auria-icon{
  width:18px;
  height:18px;
  stroke:var(--auria-text) !important;
  opacity:1 !important;
  stroke-width:1.8;
  fill:none;
}

/* ===============================
   TOP ROW
   =============================== */

.auria-header__top{
  padding:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.auria-header__grid{
  display:grid;
  grid-template-columns: 220px minmax(360px, 1fr) 320px;
  align-items:center;
  gap:18px;
  height:78px;
}

/* Logo */
.auria-header__logo{ display:flex; align-items:center; }
.auria-header__logo a{ display:inline-flex; align-items:center; }

.auria-header__logo-img,
.auria-header__logo img{
  max-height:44px;
  width:auto;
  display:block;
  vertical-align:middle;
}

.auria-header__logo-text{
  font-size:28px;
  font-weight:700;
  letter-spacing:.2px;
}

/* Icon buttons */
.auria-iconbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--auria-border);
  background:var(--auria-surface);
  color:var(--auria-text);
  transition:transform .2s ease, background .2s ease;
}
.auria-iconbtn:hover{
  background:var(--auria-surface2);
  transform:translateY(-1px);
}

/* ===============================
   SEARCH (base)
   =============================== */

.auria-header__search{
  justify-self:center;
  width:100%;
  max-width:600px;
  display:flex;
  align-items:center;
}

.auria-search{
  position:relative;
  width:100%;
}

.auria-search__input{
  width:100%;
  height:46px;
  line-height:46px;
  padding:0 54px 0 18px;
  border-radius:var(--auria-pill);
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06) !important;
  color:var(--auria-text) !important;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  -webkit-text-size-adjust:100%;
}

.auria-search__input::placeholder{
  color:rgba(230,235,242,0.60) !important;
  opacity:1 !important;
}

.auria-search__btn{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.10);
  color:var(--auria-text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.auria-search__btn:hover{ background:rgba(255,255,255,0.14); }

/* ===============================
   ACTIONS
   =============================== */

.auria-header__actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:12px;
}

.auria-action{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:var(--auria-radius);
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:var(--auria-text) !important;
  opacity:1 !important;
  visibility:visible !important;
  font-size:14px;
  line-height:1;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.auria-action:hover{
  background:rgba(255,255,255,0.10);
  transform:translateY(-1px);
  border-color:rgba(255,255,255,0.18);
}

.auria-action__label{
  color:var(--auria-text) !important;
  opacity:1 !important;
  white-space:nowrap;
}

.auria-action svg,
.auria-action .auria-icon{
  display:block !important;
  stroke:var(--auria-text) !important;
  opacity:1 !important;
}

/* Cart badge */
.auria-cart-badge{
  position:absolute;
  top:-7px;
  right:-7px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:var(--auria-accent);
  color:#062e13;
  font-size:11px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(34,197,94,.28);
}

/* ===============================
   SEARCH DROPDOWN (AUTOCOMPLETE)
   =============================== */

.auria-searchdd{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 10px);
  z-index:10000;
  display:none;
}
.auria-searchdd.is-open{ display:block; }

.auria-searchdd__panel{
  border-radius:18px;
  background:rgba(13,19,34,0.96);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  overflow:hidden;
}

/* Row = grid (left product / right add) */
.auria-searchdd__row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 110px;
  align-items:center;
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.auria-searchdd__row:last-child{ border-bottom:0; }

.auria-searchdd__item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  min-width:0;
}

/* Keep thumbnails SMALL */
.auria-searchdd__img{
  width:40px !important;
  height:40px !important;
  border-radius:12px;
  object-fit:cover;
  flex:0 0 40px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
}

.auria-searchdd__meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.auria-searchdd__name{
  max-width:100%;
  font-weight:650;
  font-size:13px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===============================
   PRICE LOGIC – FINAL
   =============================== */

/* Base wrapper */
.auria-searchdd__price{
  display:flex;
  align-items:center;
  gap:8px;
  color:#ffffff !important;
}

/* REGULAR price (no sale) */
.auria-searchdd__price > .woocommerce-Price-amount{
  font-size:15px;                 
  font-weight:900;
  color:#ffffff !important;
}

/* SALE – OLD price (del) */
.auria-searchdd__price del,
.auria-searchdd__price del .woocommerce-Price-amount{
  font-size:13px;                 
  font-weight:600;
  color:rgba(255,255,255,0.35) !important;
  margin-right:4px;
}

/* SALE – NEW price (ins) */
.auria-searchdd__price ins,
.auria-searchdd__price ins .woocommerce-Price-amount{
  font-size:15px;                 
  font-weight:900;
  color:#ffffff !important;
  text-decoration:none;
}

/* Add button */
.auria-searchdd__atc{
  justify-self:end;
  width:110px;
  margin-right:14px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:var(--auria-text) !important;
  text-decoration:none !important;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  transition:transform .2s ease, background .2s ease;
}
.auria-searchdd__atc:hover{
  background:rgba(255,255,255,0.10);
  transform:translateY(-1px);
}
.auria-searchdd__atcIcon{
  width:18px;
  height:18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(34,197,94,0.20);
  color:var(--auria-accent);
  font-weight:900;
  line-height:1;
}
.auria-searchdd__atc.is-disabled{
  opacity:.55;
  pointer-events:none;
}

.auria-searchdd__footer{
  display:flex;
  justify-content:space-between;
  padding:10px 14px;
  font-size:11px;
  color:rgba(230,235,242,0.55);
  background:rgba(255,255,255,0.03);
}

.auria-searchdd__close{
  appearance:none;
  border:0;
  background:transparent;
  color: rgba(230,235,242,0.72);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  padding:6px 8px;
  border-radius:10px;
}
.auria-searchdd__close:hover{
  background: rgba(255,255,255,0.06);
  color: rgba(230,235,242,0.92);
}

/* ===============================
   BOTTOM NAV (DESKTOP)
   =============================== */

.auria-header__bottom{
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.10);
}

.auria-header__bottombar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:54px;
}

/* main nav */
.auria-nav__menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:14px;
}

/* top level items */
.auria-nav__menu > li{
  position:relative;
  margin:0;
  padding:0;
}

.auria-nav__menu > li > a{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border-radius: 999px;
  font-size:14px;
  line-height:1;
  background: transparent;
  border: 1px solid transparent;
}

.auria-nav__menu > li:hover > a{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}

/* dropdown base */
.auria-nav__menu li ul{
  list-style:none;
  margin:0;
  padding:8px;
  position:absolute;
  top: calc(100% + 10px);
  left:0;
  min-width:240px;
  background: linear-gradient(180deg,var(--auria-bg),var(--auria-bg2));
  border:1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  box-shadow: var(--auria-shadow);
  display:none;
  z-index:10000;
}

.auria-nav__menu li:hover > ul{ display:block; }

.auria-nav__menu li ul li{ position:relative; }

.auria-nav__menu li ul a{
  display:flex;
  padding:10px 10px;
  border-radius: 12px;
  font-size:14px;
}

.auria-nav__menu li ul a:hover{
  background: rgba(255,255,255,0.06);
}

/* third level to the right */
.auria-nav__menu li ul ul{
  top:0;
  left: calc(100% + 8px);
}

/* optional: hide brands nav if empty */
.auria-brands__menu:empty{ display:none; }


/* ===============================
   MOBILE + OFFCANVAS
   =============================== */

.auria-header__burger{ display:none; }

/* Mobile layout tweaks */
@media (max-width: 1024px){
  .auria-header__grid{
    grid-template-columns:auto 1fr auto;
    height:72px;
  }

  .auria-header__burger{ display:inline-flex; }

  /* Hide bottom bar on mobile (if you use it) */
  .auria-header__bottom{ display:none; }

  /* Compact action buttons (labels hidden) */
  .auria-action__label{ display:none; }
  .auria-action{ padding:10px 12px; }

  /* iOS Safari: prevent zoom on focus */
  .auria-search__input{ font-size:16px !important; }
}

/* Small phones */
@media (max-width: 480px){
  .auria-searchdd__row{ grid-template-columns:minmax(0, 1fr) 96px; }
  .auria-searchdd__atc{
    width:96px;
    font-size:13px;
    padding:9px 10px;
  }
  .auria-searchdd__img{
    width:36px !important;
    height:36px !important;
    flex-basis:36px;
  }
  .auria-searchdd__item{ padding:10px 12px; }

  /* Sale price still +3px compared to base */
  .auria-searchdd__price ins,
  .auria-searchdd__price ins .woocommerce-Price-amount{
    font-size:16px;
  }
}

/* Offcanvas basic (if used) */
.auria-offcanvas{ display:none; }
.auria-offcanvas.is-open{ display:block; }

.auria-offcanvas__overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
}

.auria-offcanvas__panel{
  position:fixed;
  top:0;
  left:0;
  height:100%;
  width:min(88vw,380px);
  padding:14px;
  background:linear-gradient(180deg,var(--auria-bg),var(--auria-bg2));
  border-right:1px solid rgba(255,255,255,0.08);
  box-shadow:var(--auria-shadow);
  overflow:auto;
}

.auria-offcanvas__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.auria-offcanvas__actions{
  display:flex;
  gap:10px;
  padding:12px 0;
}

.auria-offcanvas__search{
  padding:10px 0 14px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.auria-offcanvas__menu{
  list-style:none;
  margin:14px 0 0;
  padding:0;
}

.auria-offcanvas__menu a{
  display:block;
  padding:12px 10px;
  border-radius:14px;
  color:rgba(230,235,242,0.92) !important;
}
.auria-offcanvas__menu a:hover{
  background:rgba(255,255,255,0.06);
}

/* ===============================
   SEARCH VISIBILITY FIX (IMPORTANT)
   - Desktop: show desktop search only
   - Mobile: show mobile search row only
   =============================== */

@media (min-width: 1025px){
  .auria-header__search--desktop{ display:flex !important; }
  .auria-header__search--mobile,
  .auria-header__searchRow{ display:none !important; }
}

@media (max-width: 1024px){
  .auria-header__search--desktop{ display:none !important; }
  .auria-header__search--mobile,
  .auria-header__searchRow{ display:block !important; }
}

/* Offcanvas submenu accordion */
.auria-offcanvas__menu li { position: relative; }

.auria-offcanvas__menu li.auria-has-children > a{
  padding-right: 44px; /* space for toggle */
}

.auria-subtoggle{
  position:absolute;
  top: 6px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  color: rgba(230,235,242,0.92);
  cursor: pointer;
}

.auria-subtoggle:hover{
  background: rgba(255,255,255,0.10);
}

.auria-offcanvas__menu ul{
  list-style:none;
  margin: 0 0 0 10px;
  padding: 0 0 0 8px;
  border-left: 1px solid rgba(255,255,255,0.10);
}

.auria-offcanvas__menu ul a{
  padding: 10px 10px;
  opacity: 0.92;
}

/* ======================================
   FIXED TOP ONLY (NO GAP) + SOLID HEADER
   Menu NOT sticky
   Mobile: search visible at top, hidden on scroll
   ====================================== */

:root{ --auria-top-h: 0px; }

/* IMPORTANT: do NOT push the whole page */
body{ padding-top: 0 !important; }

/* Reserve space INSIDE the header for the fixed top row */
.auria-header{
  position: relative !important;
  padding-top: var(--auria-top-h) !important;
  background: #090c12; /* solid base so it never looks transparent */
}

/* Fixed top row (solid, not transparent) */
.auria-header__top{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 99999;

  background: #090c12 !important;     /* solid */
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Optional blur only if you still want it (comment out if you want 100% solid) */
.auria-header__top{
  backdrop-filter: blur(10px);
}

/* Shadow after scroll (JS toggles class) */
.auria-header__top.auria-is-stuck{
  box-shadow: 0 14px 45px rgba(0,0,0,0.40);
}

/* Bottom menu row is normal flow (NOT sticky) and solid */
.auria-header__bottom{
  position: static !important;
  margin-top: 0 !important;
  background: #090c12; /* keep consistent with top */
}

/* MOBILE behavior */
@media (max-width: 1024px){
  /* visible at top */
  .auria-search{ display: block !important; }

  /* hide only after scroll */
  .auria-header__top.auria-is-stuck .auria-search{
    display: none !important;
  }
}

/* Remove Porto top padding under our custom header */
.auria-header + #main .main-content,
.auria-header + #main .main-content-wrap,
.auria-header + #main .main-content.col-lg-12{
  padding-top: 0 !important;
}

/* If Porto also applies padding directly here */
#main .main-content{
  padding-top: 0 !important;
}

/* ======================================
   TRUE CENTER SEARCH (DESKTOP)
   ====================================== */

@media (min-width: 1025px){

  /* top bar becomes positioning context */
  .auria-header__top{
    position: relative;
  }

  /* keep logo/actions above center search */
  .auria-header__logo,
  .auria-header__actions{
    position: relative;
    z-index: 2;
  }

  /* place desktop search in absolute center */
  .auria-header__search-desktop{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1;

    width: min(600px, 52vw) !important;
    margin: 0 !important;
  }

  /* form sizing + centering */
  .auria-header__search-desktop .auria-search{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  /* consistent height */
  .auria-header__search-desktop .auria-search-input{
    height: 44px !important;
    line-height: 44px !important;
  }

  .auria-header__search-desktop .auria-search-btn{
    height: 44px !important;
    width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ======================================
   HEADER COLOR FIX — RESTORE NAVY
   ====================================== */

:root{
  --auria-navy: #0e1628; /* change here if you want darker/lighter */
}

/* Top fixed row */
.auria-header__top{
  background: var(--auria-navy) !important;
}

/* Bottom menu row */
.auria-header__bottom{
  background: var(--auria-navy) !important;
}

/* Safety: if header wrapper had background */
.auria-header{
  background: var(--auria-navy) !important;
}

/* ======================================
   NAV DROPDOWN – FIX "DISAPPEARS ON HOVER"
   Minimal patch: keep your design as-is
   ====================================== */

/* 1) Remove most of the hover gap (you had +10px) */
.auria-nav__menu li ul{
  top: calc(100% + 2px) !important;
}

/* 2) Add invisible hover bridge so moving mouse down doesn't drop :hover */
.auria-nav__menu > li{
  position: relative;
}
.auria-nav__menu > li::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:12px;
  background:transparent;
}

/* 3) Keep open also while focused (click/keyboard friendly) */
.auria-nav__menu li:hover > ul,
.auria-nav__menu li:focus-within > ul{
  display:block;
}

/* 4) Ensure dropdown is above slider/hero layers */
.auria-nav__menu li ul{
  z-index: 100000 !important;
}