/* ==========================================================
   ESHOP MASTER CSS (clean, merged)
   Includes:
   1) Header/Search UI (cleaned)
   2) Eshop Theme (deduped)
   3) Safety-net responsive overrides (end of file)
   ========================================================== */

/* ==========================================================
   HEADER + SEARCH UI (cleaned)
   - Fixes conflicting/duplicated rules
   - Buttons (#allCategoriesBtn / #randomHomeBtn) stay HORIZONTAL
     on mobile + desktop
   ========================================================== */

/* ---------- Layout variables ---------- */
:root{
  --topheader-h: 40px;
  --searchwrap-h: 100px;
  --header-gap: 12px;
  --brand-dark: #0f1d2d;
  --card-dark: rgba(0,0,0,0.42);
}

/* Space for fixed header + search wrapper */
body{
  padding-top: calc(var(--topheader-h) + var(--searchwrap-h) + var(--header-gap));
}

/* ---------- Top header ---------- */
#topHeader{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--topheader-h);
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 0 10px;
  background: var(--brand-dark);
  color: #fff;
}

/* Logo blocks */
.logo img{
  height: 40px;
  max-height: 200px;
}

.logo-right{
  display: flex;
  align-items: center;
}
.logo-right img{
  height: 80px;
  max-height: none;
}

.animated-logo{
  animation: logoEntrance 1.2s ease-out;
}
@keyframes logoEntrance{
  0%{opacity:0; transform:scale(1.6) rotate(-20deg); filter:blur(2px);}
  60%{opacity:1; transform:scale(2.05) rotate(5deg); filter:blur(0);}
  100%{transform:scale(1) rotate(0);}
}

/* Language dropdown */
.language-dropdown{
  position: relative;
  z-index: 1100;
}
.dropbtn{
  background-color: #00058f;
  color: #fff;
  padding: 6px 10px;
  font-size: 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.dropdown-content{
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  background: #fff;
  min-width: 140px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  border-radius: 6px;
  overflow: hidden;
  z-index: 9999;
}
.dropdown-content a{
  color: #000;
  padding: 10px 12px;
  text-decoration: none;
  display: block;
  font-size: 14px;
}
.dropdown-content a:hover{ background-color: #f1f1f1; }
.language-dropdown:hover .dropdown-content{ display: block; }


#searchWrapper{
  position: fixed;
  top: var(--topheader-h);
  left: 0;
  width: 100%;
  min-height: var(--searchwrap-h);
  z-index: 999;
  background: var(--brand-dark);
  padding: 5px 10px 10px;
  display: grid;
  grid-template-columns: minmax(180px, 320px) minmax(180px, 320px);
  grid-template-areas:
    "allcats allcats"
    "search  search"
    "cypickup random";
  justify-content: center;
  align-items: center;
  column-gap: 50px;
  row-gap: 15px;
  margin-top: 23px;
}



/* Place items in the grid */
#allCategoriesBtn,
.header-all-cats-btn{
  grid-area: allcats;
  justify-self: center;
}


#randomHomeBtn,
.random-home-btn{
  grid-area: random;
  justify-self: stretch;
}

.cy-only-btn{
  margin: 0;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  border: 2px solid rgb(56 189 209);
  background: rgba(15, 23, 42, 0.96);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 1),
    0 6px 16px rgba(15, 23, 42, 0.9);
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.1s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

.cy-only-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 1),
    0 10px 22px rgba(15, 23, 42, 0.95);
}

.cy-only-btn:active{
  transform: translateY(0);
}

/* το ON state σου, αλλά “κουμπωμένο” στο ίδιο design */
.cy-only-btn.is-on{
  border-color: rgba(250,204,21,.75);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 1),
    0 6px 16px rgba(15, 23, 42, 0.9),
    0 0 0 2px rgba(250,204,21,.22) inset;
}

#searchBar{
  grid-area: search;
  justify-self: center;

  position: relative;
  width: 100%;
  max-width: 640px;
  display: flex;
}

/* ---------- Buttons ---------- */
#allCategoriesBtn,
.header-all-cats-btn{
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;

  background: #ffffff;
  color: var(--brand-dark);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  user-select: none;
}

/* Random button (keeps your vibe, cleaned) */
#randomHomeBtn,
.random-home-btn{
  margin: 0;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  border: 2px solid rgb(56 189 209);
  background: rgba(15, 23, 42, 0.96);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 1),
    0 6px 16px rgba(15, 23, 42, 0.9);
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.1s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}ease;
}

#randomHomeBtn::before,
.random-home-btn::before{
  content: "\2605"; /* ★ */
  font-size: 12px;
  line-height: 1;
}

#randomHomeBtn:hover,
.random-home-btn:hover{
  background: rgba(30, 64, 175, 0.98);
  border-color: #facc15;
  color: #fefce8;
  transform: translateY(-1px);
}

/* ---------- Search input + clear button ---------- */
.search-input-wrap{
  position: relative;
  width: 100%;
}

#searchInput{
  width: 100%;
  padding: 8px 44px 8px 10px; /* right space for X */
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
  outline: none;
  height: 36px;
  box-sizing: border-box;
}

.search-clear-btn{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: #191919;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: none; /* JS shows when text exists */
  z-index: 10;
}
.search-clear-btn:hover{ filter: brightness(1.1); }

/* ---------- Search results panel ---------- */
#searchResults{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;

  max-height: min(420px, calc(100vh - (var(--topheader-h) + var(--searchwrap-h) + 140px)));
  overflow-y: auto;

  background: rgba(41, 71, 99, 0.86);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  box-shadow: 0 18px 16px rgba(0,0,0,0.18);
  padding: 10px;

  z-index: 2000;

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

#searchResults.active{ display: block; }
#searchResults:not(.active){ display: none; }

body.search-scroll-locked{
  overflow: hidden;
}

/* Optional legacy box (kept, cleaned) */
.results-box{
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  max-height: 220px;
  overflow-y: auto;

  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  padding: 10px;
  box-sizing: border-box;
}

/* Titles + utility */
.search-category-title{
  font-weight: 800;
  font-size: 15px;
  margin: 6px 0 10px;
  color: #fff;
  background: rgba(130,129,129,0.46);
  padding: 6px 8px;
  border-radius: 8px;
}

.no-results{
  padding: 6px;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  text-align: center;
}

.close-results-btn{
  position: sticky; /* stays visible while scrolling */
  top: 0;
  margin-left: auto;

  background: #ff0000;
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  z-index: 5;
}

/* ---------- Main categories scroller ---------- */
.search-main-categories{
  display: flex;
  gap: 12px;
  padding: 8px 0;

  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  scroll-snap-type: x mandatory;
}
.search-main-categories::-webkit-scrollbar{ display: none; }

.search-main-categories .category-result{
  flex: 0 0 auto;
  scroll-snap-align: start;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 12px;
  background: #363636;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;

  cursor: pointer;
  user-select: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.search-main-categories .category-result img{
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 999px;
}

.search-main-categories .category-result:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.18);
}

.search-main-categories .category-result.active{
  border-color: #007bff;
  background: #043b76;
}

/* ---------- Subcategories list ---------- */
.search-subcategories{
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid #eee;
  border-radius: 10px;
}

.subcategory-result{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 8px;
  cursor: pointer;

  border-bottom: 1px solid #ddd;
  transition: background-color 0.2s ease;
}
.subcategory-result:hover{ background-color: #f8f8f8; }

.subcategory-result img{
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 999px;
  border: 1px solid #ccc;
}
.subcategory-result span{
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

/* ---------- Products row inside results ---------- */
.search-products{
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.search-products::-webkit-scrollbar{ display: none; }

.search-product{
  flex: 0 0 auto;
  width: 130px;
  scroll-snap-align: start;

  display: flex;
  flex-direction: column;
  align-items: center;

  font-size: 13px;
  text-align: center;

  background: var(--card-dark);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 6px;

  cursor: pointer;
  user-select: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.search-product:hover{
  transform: scale(1.03);
  box-shadow: 0 4px 10px rgba(0,0,0,0.14);
}

.search-product img{
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin-bottom: 6px;
}

.search-product span{
  display: block;
  font-size: 13px;
  color: #fff;
  overflow-wrap: anywhere;
}

/* Product text blocks (if used) */
.product-info{
  display: flex;
  flex-direction: column;
  width: 100%;
}
.product-name{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.3;
  max-height: 34px;
  overflow: hidden;
}
.stock-status{
  font-size: 11px;
  margin-top: 4px;
  font-weight: 800;
}
.in-stock{ color: #28a745; }
.low-stock{ color: #ffc107; }
.out-of-stock{ color: #dc3545; }

/* ---------- Loading ---------- */
.search-loading{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.9);
}
.search-loading-spinner{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: rgba(255,255,255,0.9);
  animation: searchSpinner 0.6s linear infinite;
}
@keyframes searchSpinner{ to{ transform: rotate(360deg); } }

/* ---------- See more button ---------- */
.see-more,
.see-more-group div{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  margin-top: 12px;
  padding: 10px 14px;

  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2px;

  color: #f4f9ff;
  border-radius: 999px;
  border: 1px solid rgba(120,180,255,0.35);

  background: linear-gradient(135deg, rgba(40,120,255,0.85), rgba(140,70,255,0.72));

  box-shadow:
    0 10px 26px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 0 18px rgba(60,140,255,0.35),
    0 0 26px rgba(140,70,255,0.22);

  cursor: pointer;
  user-select: none;

  position: relative;
  overflow: hidden;

  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}

.see-more::before,
.see-more-group div::before{
  content: "";
  position: absolute;
  top: -70%;
  left: -40%;
  width: 70%;
  height: 260%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: rotate(22deg) translateX(-140%);
  transition: transform 0.55s ease;
  pointer-events: none;
}
.see-more::after{
  content: "\279C"; /* ➜ */
  font-size: 16px;
  font-weight: 900;
  opacity: 0.98;
  transform: translateX(0);
  transition: transform 0.16s ease;
  line-height: 1;
}

.see-more:hover,
.see-more-group div:hover{
  transform: translateY(-1px) scale(1.01);
  filter: saturate(1.15) brightness(1.08);
  box-shadow:
    0 14px 34px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.14) inset,
    0 0 26px rgba(60,140,255,0.55),
    0 0 38px rgba(140,70,255,0.35);
}
.see-more:hover::before,
.see-more-group div:hover::before{ transform: rotate(22deg) translateX(260%); }
.see-more:hover::after,
.see-more-group div:hover::after{ transform: translateX(3px); }
.see-more:active,
.see-more-group div:active{ transform: translateY(0) scale(0.99); }

/* ---------- Hide header (if your JS uses it) ---------- */
/* IMPORTANT FIX: do NOT hide #topHeader permanently. Only hide elements
   when JS adds the .hide-header class. */
.hide-header{
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

/* Large screens */
@media (min-width: 1200px){
  #searchBar{ max-width: 720px; }
  .logo-right img{ height: 110px; }
}

/* Tablet */
@media (max-width: 1024px){
  #searchBar{ max-width: 560px; }
}

/* Mobile */
@media (max-width: 768px){
  :root{
    --searchwrap-h: 125px;
    --header-gap: 0px;
  }

  /* Header tighten */
  #topHeader{
    padding: 0 8px;
  }

  .dropbtn{
    font-size: 14px;
    border-radius: 999px;
    padding: 8px 10px;
    background: radial-gradient(circle at 30% 30%, rgba(0,0,0,0), #000);
    box-shadow: 0 0 8px rgba(0,0,0,0.25);
  }

  .logo-right img{
    height: 60px;
  }

  /* GRID: search full row, buttons below (still horizontal) */
  #searchWrapper{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "search search"
      "allcats random";
  }

  #searchBar{
    justify-self: stretch;
    max-width: none;
  }

  /* Buttons become equal-width “pills” */
  #allCategoriesBtn,
  .header-all-cats-btn,
  #randomHomeBtn,
  .random-home-btn{
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
  }

  #searchInput{
    font-size: 16px;
    height: 38px;
  }

  /* 3 tiles visible-ish */
  .search-product{
    width: calc((100vw - 20px - 10px) / 3);
    padding: 6px;
  }
  .search-product img{
    height: 78px;
  }
  .product-name{
    font-size: 12px;
    max-height: 30px;
  }
  .stock-status{
    font-size: 10px;
  }

  /* results height for small screens */
  #searchResults{
    max-height: calc(100vh - (var(--topheader-h) + var(--searchwrap-h) + 160px));
  }

  /* See more compact */
  .see-more,
  .see-more-group div{
    padding: 8px 10px;
    font-size: 12px;
    margin-top: 10px;
  }
}

/* Touch devices: reduce hover effects (no global nukes) */
@media (pointer: coarse), (hover: none){
  .search-product:hover,
  .search-main-categories .category-result:hover,
  .see-more:hover,
  .see-more-group div:hover,
  #randomHomeBtn:hover,
  .random-home-btn:hover{
    transform: none;
    filter: none;
    box-shadow: none;
  }
}


/* ==========================================================
   ESHOP THEME (deduped from eshop-theme.css)
   ========================================================== */

/* =========================================
   ULTRA COMPACT ESHOP NAV
   Breadcrumbs + Category Chips (main/sub/subsub)
   ========================================= */

/* ---------- GLOBAL VARIABLES ---------- */
:root{
  /* Chips */
  --chip-bg:#050913;
  --chip-bg-active:#0049ae;
  --chip-fg:#ff0000;
  --chip-fg-muted:#ffffff;
  --chip-border:rgba(129,161,214,.65);
  --chip-hover-bg:rgba(22,119,255,.1);
  --chip-radius:999px;

  --chip-font:11.5px;
  --chip-padY:.22rem;
  --chip-padX:.55rem;
  --chip-gap:.25rem;
  --chip-img:18px;

  /* Layout */
  --nav-side-pad:.6rem;

  /* Breadcrumbs */
  --crumb-bg:rgba(7,11,20,.96);
  --crumb-border:rgba(120,170,230,.55);
  --crumb-text:#8da2c5;
  --crumb-link:#d6e4ff;
}



#breadcrumbs{
  display:flex;
  align-items:center;
  gap:.3rem;
  padding:.18rem var(--nav-side-pad);
  margin:.6rem var(--nav-side-pad) .15rem;
  background:var(--crumb-bg);
  border-radius:999px;
  border:1px solid var(--crumb-border);
  box-shadow:0 3px 12px rgba(0,0,0,.45);
  font-size:.66rem;
  line-height:1.25;
  color:var(--crumb-text);
  overflow-x:auto;
  white-space:nowrap;
  letter-spacing:.02em;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  flex-wrap:wrap;
  align-items:flex-start;
  row-gap:.12rem;
  margin-top: 9px;
  margin-bottom: 10;
}


#breadcrumbs::-webkit-scrollbar{ display:none; }
#breadcrumbs{ scrollbar-width:none; }

/* links */
#breadcrumbs a{
  color:var(--crumb-link);
  text-decoration:none;
  font-weight:500;
}
#breadcrumbs a:hover{
  text-decoration:underline;
}

/* τρέχουσα κατηγορία */
#breadcrumbs .breadcrumb-current{
  font-weight:600;
  color:#ffffff;
}

/* ΠΡΩΤΟ LINK = home bubble με τη δική σου εικόνα */
#breadcrumbs a:first-child{
  position: relative;
  font-size: 0;              /* κρύβει το κείμενο "Αρχική" */
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(0,0,0,.6);            /* φόντο πίσω από την εικόνα */
  border: 1px solid rgba(156,195,255,.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-right: .25rem;
  overflow: hidden;          /* για να κοπεί στρογγυλά η εικόνα */
}

#breadcrumbs a:first-child::before{
  content: "";
  width: 100%;
  height: 100%;
  background:linear-gradient(135deg,#0b263b,#102239);
}

#breadcrumbs a,
#breadcrumbs .breadcrumb-current{
  max-width:100%;
  word-break:break-word;
}

/* MOBILE fine-tune breadcrumbs */
@media (max-width:768px){
  #breadcrumbs{
    font-size:.62rem;
    padding:.22rem var(--nav-side-pad);
    margin-top: 2.25rem;  /* λίγο πιο κάτω από search */
  }

  #breadcrumbs a:first-child{
    width:18px;
    height:18px;
  }
}

/* =========================================
   CATEGORY CONTAINERS (main / sub / sub-sub)
   ========================================= */

#mainCategories,
#subcategories,
#subSubcategoriesDiv{
  display:flex;
  flex-wrap:nowrap;              /* όχι wrap, πάντα οριζόντιο scroll */
  align-items:center;
  gap:.28rem;
  padding:.18rem var(--nav-side-pad) .25rem;

  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--nav-side-pad);
}

@media (max-width:768px){
  #mainCategories::-webkit-scrollbar,
  #subcategories::-webkit-scrollbar,
  #subSubcategoriesDiv::-webkit-scrollbar{
    display:none;
  }

  #mainCategories,
  #subcategories,
  #subSubcategoriesDiv{
  }
}

/* =========================================
   CATEGORY CHIPS – μοντέρνες, καθαρές
   ========================================= */

#mainCategories .category-button .category-title,
#subcategories .category-button .category-title,
#subSubcategoriesDiv .category-button .category-title{
  background:none !important;
  border:0 !important;
  border-left:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  color:inherit !important;
}

#mainCategories .category-button,
#subcategories .category-button,
#subSubcategoriesDiv .category-button{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:var(--chip-gap);

  padding:var(--chip-padY) var(--chip-padX) !important;
  border-radius:var(--chip-radius) !important;

  background:transparent !important;
  color:var(--chip-fg-muted) !important;
  border:1px solid var(--chip-border) !important;

  font-weight:500;
  font-size:var(--chip-font) !important;
  letter-spacing:.02em;
  white-space:nowrap;
  line-height:1.1 !important;

  box-shadow:none !important;
  transition:background .16s,color .16s,border-color .16s,transform .06s;
  cursor:pointer;

  scroll-snap-align:start;
  scroll-snap-stop:always;

  min-height:30px;
}

/* hover */
#mainCategories .category-button:hover,
#subcategories .category-button:hover,
#subSubcategoriesDiv .category-button:hover{
  background:var(--chip-hover-bg) !important;
  color:var(--chip-fg) !important;
}

/* active / selected */
#mainCategories .category-button.active,
#subcategories .category-button.active,
#subSubcategoriesDiv .category-button.active{
  background:var(--chip-bg-active) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 2px 10px rgba(22,119,255,.45) !important;
  font-weight:600;
}

/* click effect */
#mainCategories .category-button:active,
#subcategories .category-button:active,
#subSubcategoriesDiv .category-button:active{
  transform:translateY(1px) scale(.99);
}

#mainCategories .category-button img,
#subcategories .category-button img,
#subSubcategoriesDiv .category-button img{
  width:var(--chip-img) !important;
  height:var(--chip-img) !important;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}

/* =========================================
   RESPONSIVE FINE-TUNING
   ========================================= */

@media (max-width:768px){
  :root{
    --chip-font:11px;
    --chip-padY:.2rem;
    --chip-padX:.5rem;
    --chip-gap:.22rem;
    --chip-img:16px;
  }

  #catBarHeader{
    position:static !important;
    top:auto !important;
  }
}

@media (max-width:380px){
  :root{
    --chip-font:10.5px;
    --chip-padY:.18rem;
    --chip-padX:.45rem;
    --chip-gap:.2rem;
    --chip-img:15px;
  }
}

body[data-page="eshop"] #onesignal-bell-container.onesignal-reset .onesignal-bell-launcher-bottom-right {
  position: fixed !important;
  top: 2px !important;    /* πάνω πάνω */
  left: 60px !important;  /* πιο μέσα από αριστερά, δίπλα στο globe */
  right: auto !important;
  bottom: auto !important;
  z-index: 9999 !important;
}

@media (max-width:340px){
  #mainCategories .category-button img,
  #subcategories .category-button img,
  #subSubcategoriesDiv .category-button img{
    display:none !important;
  }
}

/* ΜΙΚΡΑΙΝΕΙ ΠΡΑΓΜΑΤΙΚΑ ΤΟ ΚΟΥΔΟΥΝΑΚΙ */
/* 🔔 Default (κινητό) */
body[data-page="eshop"] #onesignal-bell-container .onesignal-bell-launcher-button {
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  left: -50px !important;
  top: 50px !important;
  transform: scale(0.7) !important;
  transform-origin: center center !important;
}

@media (min-width: 992px) {
  body[data-page="eshop"] #onesignal-bell-container .onesignal-bell-launcher-button {
    left: auto !important;   /* ακυρώνεις το left */
    right: 20px !important;  /* το πας δεξιά */
    top: 40px !important;    /* αν θες πιο πάνω, παίξε το */
  }
}


/* και το svg μέσα (ο κύκλος που βλέπεις στο devtools) */
body[data-page="eshop"] #onesignal-bell-container .onesignal-bell-launcher-button svg {
  width: 20px !important;
  height: 20px !important;
}

body[data-page="eshop"] #onesignal-bell-container.onesignal-reset .onesignal-bell-launcher-dialog {
  position: fixed !important;
  top: 60px !important;      /* κάτω από logo/lang */
  left: 10px !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  max-width: 280px;
  z-index: 9999 !important;
}

body[data-page="eshop"] #onesignal-bell-container.onesignal-reset
  .onesignal-bell-launcher-dialog:before {
  top: -10px !important;
  left: 40px !important;
  right: auto !important;
  bottom: auto !important;
}

body[data-page="eshop"] #onesignal-bell-container.onesignal-reset
  .onesignal-bell-launcher-dialog::before {
  display: none !important;
}

/* Μήνυμα κάτω από το dialog: "πάτα το καμπανάκι..." */
body[data-page="eshop"] #onesignal-bell-container.onesignal-reset
  .onesignal-bell-launcher-dialog::after {
  content: "ΠΑΤΑ ΤΟ ΚΑΜΠΑΝΑΚΙ ΓΙΑ ΕΙΔΟΠΟΙΗΣΕΙΣ";
  position: absolute;
  bottom: -26px;
  left: 20%;
  transform: translateX(-50%);
  background: rgb(0 105 255 / 75%);
  color: #ffffff;
  padding: 1px 1px;
  border-radius: 999px;
  font-size: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

/* Tooltip του OneSignal bell – θέση δίπλα στο καμπανάκι */
body[data-page="eshop"] #onesignal-bell-container.onesignal-reset
  .onesignal-bell-launcher-tooltip {
  position: fixed !important;
  top: 12px !important;
  left: 90px !important;
  right: auto !important;
  transform: none !important;
  z-index: 10000 !important;
  white-space: nowrap;
}

/* βελάκι του tooltip */
body[data-page="eshop"] #onesignal-bell-container.onesignal-reset
  .onesignal-bell-launcher-tooltip::before {
  left: -6px !important;
  right: auto !important;
}

/* =========================================
   OneSignal – FIX invisible dialog hitbox
   ========================================= */

/* Το κουδουνάκι παραμένει ΠΑΝΤΑ clickable */
body[data-page="eshop"] #onesignal-bell-container .onesignal-bell-launcher-button {
  pointer-events: auto !important;
}

/* ΟΛΑ τα overlay / dialog του OneSignal να ΜΗΝ πιάνουν κλικ
   (για να μην μπλοκάρουν search, categories κλπ) */
body[data-page="eshop"] #onesignal-bell-container .onesignal-bell-launcher-dialog,
body[data-page="eshop"] #onesignal-bell-container .onesignal-bell-launcher-dialog-body,
body[data-page="eshop"] #onesignal-bell-container .onesignal-bell-launcher-message,
body[data-page="eshop"] #onesignal-bell-container .onesignal-bell-launcher-message-open {
  pointer-events: none !important;
}

/* ========== ESHOP LANGUAGE BOTTOM-SHEET – DESIGN ========== */

:root {
  --eshop-lang-txt-main: #f4f7ff;
  --eshop-lang-txt-muted: #9ca3af;
  --eshop-lang-bg-panel: #020617;
  --eshop-lang-border: rgba(148,163,184,0.7);
}

/* Κλείδωμα scroll όταν είναι ανοιχτό το bottom-sheet */
body.lang-sheet-open {
  overflow: hidden;
  touch-action: none;
}

/* Κουμπί γλώσσας (ίδιο feeling με το Edit Profile) */
.lang-trigger {
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 6px 12px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.16), transparent 55%),
    linear-gradient(135deg, #020617, #0b1728);
  color: var(--eshop-lang-txt-main);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(0,0,0,0.65);
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    filter 0.16s ease,
    border-color 0.14s ease;
  z-index: 1300;
}

.lang-trigger__label {
  font-size: 10px;
  color: var(--eshop-lang-txt-muted);
  z-index: 100000px
}

.lang-trigger__value {
  font-weight: 700;
}

/* Globe + βελάκι */
.lang-trigger::before {
  content: "\1F310";
  font-size: 18px;
}

.lang-trigger::after {
  content: "\25BE";
  font-size: 10px;
  opacity: 0.8;
}

/* Hover / active */
.lang-trigger:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  border-color: rgba(96,165,255,0.6);
  box-shadow: 0 12px 28px rgba(0,0,0,0.8);
}

.lang-trigger:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,0.7);
}

/* Συγκεκριμένη θέση στο eshop (πάνω αριστερά) */
.eshop-lang-trigger {
  position: fixed;
  top: 8px;
  left: 8px;
}

/* Αν έχεις το παλιό language-dropdown στο header, το κρύβεις */
.language-dropdown {
  display: none !important;
}

/* ===== Bottom-sheet container ===== */

.lang-sheet {
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 22000;
}

.lang-sheet--open {
  display: flex;
}

.lang-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,0.72);
}

.lang-sheet__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 20px 20px 0 0;
  background: var(--eshop-lang-bg-panel);
  border-top: 1px solid var(--eshop-lang-border);
  box-shadow: 0 -14px 40px rgba(0,0,0,0.85);
  padding: 10px 14px 14px;
  transform: translateY(100%);
  animation: sheet-slide-down 0.24s ease-out forwards;
}

/* Όταν ανοίγει */
.lang-sheet--open .lang-sheet__panel {
  animation-name: sheet-slide-up;
}

@keyframes sheet-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0%); }
}

@keyframes sheet-slide-down {
  from { transform: translateY(0%); }
  to   { transform: translateY(100%); }
}

/* Handle bar */
.lang-sheet__handle {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(148,163,184,0.8);
  margin: 0 auto 10px;
  cursor: pointer;
}

/* Header */
.lang-sheet__header h3 {
  margin: 0;
  font-size: 15px;
  color: #f9fafb;
}

.lang-sheet__header p {
  margin: 2px 0 8px;
  font-size: 12px;
  color: #9ca3af;
}

/* Λίστα γλωσσών */
.lang-sheet__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lang-sheet__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 14px;
  cursor: pointer;
  transition:
    background 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
  position: relative;
}

.lang-sheet__item:hover {
  background: rgba(96,165,255,0.18);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15,23,42,0.8);
}

.lang-sheet__flag {
  font-size: 20px;
}

.lang-sheet__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lang-sheet__name {
  font-size: 13px;
  color: #e5e7eb;
  font-weight: 600;
}

.lang-sheet__hint {
  font-size: 11px;
  color: #9ca3af;
}

/* Badge για τρέχουσα γλώσσα */
.lang-sheet__current-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(34,197,94,0.12);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,0.55);
  display: none;
}

.lang-sheet__item.is-active {
  background: rgba(34,197,94,0.1);
  box-shadow: 0 8px 20px rgba(22,163,74,0.5);
}

.lang-sheet__item.is-active .lang-sheet__name {
  color: #bbf7d0;
}

.lang-sheet__item.is-active .lang-sheet__current-badge {
  display: inline-flex;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .eshop-lang-trigger {
    position: fixed !important;
    top: 6px !important;
    left: 6px !important;
    z-index: 2147483647 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 4px 10px !important;
    font-size: 11px !important;
    line-height: 1 !important;

    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    background: rgba(7, 17, 31, 0.95) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35) !important;
  }

  .lang-sheet__panel {
    max-width: 100%;
  }
}


/* ΣΚΟΤΕΙΝΟ BACKDROP ΠΟΥ ΚΑΛΥΠΤΕΙ ΤΗΝ ΟΘΟΝΗ */
.login-required-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.login-required-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* ΤΟ ΚΕΝΤΡΙΚΟ ΚΟΥΤΙ */
.login-required-box {
  background: #111827;
  color: #f9fafb;
  padding: 22px 26px;
  border-radius: 14px;
  width: 90%;
  max-width: 320px;
  text-align: center;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.05);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.login-required-overlay.show .login-required-box {
  transform: translateY(0);
  opacity: 1;
}

/* ΤΟ ΚΟΥΜΠΙ LOGIN */
.login-required-btn {
  margin-top: 14px;
  background: #facc15;
  color: #1f2937;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s ease;
}

.login-required-btn:hover {
  background: #fbbf24;
}

.scrollbar .subcat-btn.has-img{
  position:relative;
}

.scrollbar .subcat-btn.has-img .subcat-icon{
  top:40%;
  transform:translateY(-60%);  /* παίξε -50% έως -65% */
}

/* ΜΟΝΟ για τα νέα subcategory buttons που φτιάξαμε (button.subcat-btn) */

/* Card όταν έχει εικόνα */
.scrollbar .subcat-btn.has-img{
  position:relative;
  width:100px;
  height:100px;
  padding:0;
  border:0;
  background:transparent;
  border-radius:22px;
  overflow:visible;
  cursor:pointer;
}

/* Floating εικόνα (κατεβασμένη για να κάθεται κέντρο) */
.scrollbar .subcat-btn.has-img .subcat-icon{
  position:absolute;
  left:50%;
  top:40%;
  width:80px;
  height:auto;
  transform:translate(-52%, -50%);   /* άλλαξε -70% -> -65%/-60% αν θες πιο κάτω */
  pointer-events:none;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.60));
}

/* Τίτλος πάνω στο pill */
.scrollbar .subcat-btn.has-img .subcat-title{
  position:absolute;
  left:50%;
  top: 60%;
  transform:translate(-50%, 15px);   /* ανεβοκατέβασμα τίτλου */
  border-radius:999px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-weight:800;
  line-height:1.1;
  text-align:center;
}

/* Active state */
.scrollbar .subcat-btn.has-img.active{
  box-shadow:0 0 0 2px rgba(255,200,0,.55);
  border-radius:220px;
}

/* Hover (προαιρετικό) */
.scrollbar .subcat-btn.has-img:hover .subcat-icon{
  transform:translate(-50%, -72%);
}


.price .old{
  text-decoration: line-through;
  opacity: .6;
  margin-right: 8px;
}
.price .new{
  font-weight: 700;
}


/* ==========================================================
   MASTER OVERRIDES (Header/Search responsive safety net)
   - Keeps search + 2 header buttons inside viewport on all screens
   - Minimal scope: only touches header/search IDs & known button classes
   ========================================================== */

/* Safer box-sizing for header/search components only */
#topHeader, #topHeader * ,
#searchWrapper, #searchWrapper *,
#searchResults, #searchResults *{
  box-sizing: border-box;
}

/* Never allow fixed header/search to create horizontal scroll */
#topHeader,
#searchWrapper{
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Search wrapper: allow grid to shrink properly */

/* Search bar/input must be allowed to shrink */
#searchBar{
  min-width: 0;
  max-width: 100%;
}
#searchInput{
  min-width: 0;
  max-width: 100%;
}

/* Buttons: prevent text from forcing width */
#allCategoriesBtn,
.header-all-cats-btn,
#randomHomeBtn,
.random-home-btn{
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile: search on top, buttons below but still horizontal */
@media (max-width: 768px){
  body{
    overflow-x: hidden; /* last resort for mobile overflow */
  }

  #searchWrapper{
    padding-left: 8px !important;
    padding-right: 8px !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:
      "search search"
      "allcats random" !important;
  }

  #allCategoriesBtn,
  .header-all-cats-btn,
  #randomHomeBtn,
  .random-home-btn{
    width: 100% !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  #searchInput{
    width: 100% !important;
    font-size: 16px !important;
  }

  #searchResults{
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Very small phones */
@media (max-width: 420px){
  #allCategoriesBtn,
  .header-all-cats-btn,
  #randomHomeBtn,
  .random-home-btn{
    padding: 12px 0px !important;
    font-size: 12px !important;
  }
  #searchInput{
    font-size: 16px !important;
  }
}
#topHeader{
  display: flex;
  align-items: center;
  width: 100%;
}

#topHeader .logo-right{
  margin-left: auto !important;
  display: flex;
  align-items: center;
}

@media (max-width: 768px){
  #searchWrapper{
    padding-left: 30px !important;
    padding-right: 30px !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:
      "allcats allcats"
      "search search"
      "cypickup random" !important;
  }
}

/* ==========================================================
   MOBILE SEARCH MODAL - REFINED PROFESSIONAL UI
   ========================================================== */
#searchWrapper,
#searchBar,
.search-input-wrap{
  overflow: visible !important;
}

#searchResults{
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}

#searchResults.active{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 768px){

  #searchWrapper{
    overflow: visible !important;
    z-index: 5000 !important;
  }

  #searchBar{
    position: relative !important;
    overflow: visible !important;
    z-index: 5001 !important;
  }

  .search-input-wrap{
    position: relative !important;
    overflow: visible !important;
    z-index: 5002 !important;
  }

  #searchResults{
    position: fixed !important;
    top: calc(var(--topheader-h) + var(--searchwrap-h) + 10px) !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 84px !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;

    background: linear-gradient(180deg, rgba(7,18,31,.985), rgba(9,20,34,.985)) !important;
    border: 1px solid rgba(126,170,230,.22) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 38px rgba(0,0,0,.42) !important;

    z-index: 99999 !important;
    isolation: isolate !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  #searchResults::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7,18,31,.96), rgba(9,20,34,.98));
    z-index: 0;
    pointer-events: none;
  }

  #searchResults .search-modal{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: inherit !important;
    box-shadow: none !important;
    z-index: 1;
  }

  #searchResults .search-modal-header{
    position: sticky;
    top: 0;
    z-index: 5;
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 10px 6px !important;
    background: linear-gradient(180deg, rgba(8,20,35,.94), rgba(8,20,35,.78));
    backdrop-filter: blur(2px);
  }

  #searchResults .close-results-btn{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin-left: auto !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 12px !important;
    font-size: 22px !important;
    line-height: 1 !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.24);
    z-index: 10 !important;
  }

  #searchResults .search-modal-body{
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 8px 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
    background: transparent !important;
  }

  #searchResults .search-main-categories,
  #searchResults .search-subcategories{
    position: relative;
    z-index: 2;
    margin-bottom: 8px;
  }

  #searchResults .search-entry{
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    margin: 0 0 10px !important;
    padding: 8px !important;
    background: rgba(6, 15, 27, .78) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.16) !important;
    overflow: hidden !important;
  }

  #searchResults .search-category-title{
    position: relative;
    z-index: 3;
    margin: 0 0 8px !important;
    padding: 8px 10px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    border-radius: 10px !important;
    background: rgba(116, 123, 136, .56) !important;
    color: #fff !important;
  }

  #searchResults .search-products{
    position: relative;
    z-index: 3;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity;
    background: transparent !important;
  }

  #searchResults .search-products::-webkit-scrollbar{
    display: none;
  }

  #searchResults .search-products:empty{
    display: none !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  #searchResults .search-product{
    position: relative;
    z-index: 4;
    flex: 0 0 126px !important;
    width: 126px !important;
    min-width: 126px !important;
    max-width: 126px !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    align-self: stretch !important;
    padding: 6px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(15, 30, 47, .94) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.12) !important;
    overflow: hidden !important;
    scroll-snap-align: start;
  }

  #searchResults .search-product img{
    width: 100% !important;
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 8px !important;
    margin-bottom: 6px !important;
    background: #fff;
  }

  #searchResults .product-info{
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    background: transparent !important;
  }

  #searchResults .product-name{
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 11.5px !important;
    line-height: 1.28 !important;
    max-height: none !important;
    color: #000000 !important;
    font-weight: 700 !important;
  }

  #searchResults .stock-status{
    margin-top: 4px !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }

  #searchResults .see-more{
    position: relative;
    z-index: 3;
    width: 100%;
    margin-top: 8px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
  }

  #searchResults .no-results,
  #searchResults .search-loading{
    position: relative;
    z-index: 2;
    min-height: 96px;
  }

  #searchResults .search-products > .search-product:only-child{
    margin-right: auto !important;
  }
}

/* ==========================================================
   FINAL HEADER / SEARCH PATCH
   - fixes hidden top header
   - adds subtle premium signature line above search input
   - desktop + mobile
   ========================================================== */

/* kill old wrapper pseudo effects if any are added later */
#searchWrapper::before,
#searchWrapper::after,
.search-input-wrap::after{
  content: none !important;
  display: none !important;
}

#searchWrapper{
  overflow: visible !important;
}

#searchBar{
  position: relative !important;
  overflow: visible !important;
  z-index: 3 !important;
}

.search-input-wrap{
  position: relative !important;
  overflow: visible !important;
  z-index: 4 !important;
}

.search-input-wrap::before{
  content: "";
  position: absolute;
  top: -8px;
  left: 58%;
  transform: translateX(-50%);
  width: min(74%, 430px);
  height: 2px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 6;

  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(120,170,230,0.15) 16%,
    rgba(255,255,255,0.35) 34%,
    rgba(250,204,21,1) 50%,
    rgba(255,255,255,0.35) 66%,
    rgba(120,170,230,0.15) 84%,
    rgba(255,255,255,0) 100%
  );

  box-shadow:
    0 0 10px rgba(250,204,21,0.22),
    0 0 18px rgba(255,255,255,0.08);
}

@media (min-width: 769px){
  .search-input-wrap::before{
    top: -9px !important;
    left: 59% !important;
    width: min(68%, 420px) !important;
    height: 2px !important;
  }
}

@media (max-width: 768px){
  .search-input-wrap::before{
    top: -7px !important;
    left: 60% !important;
    width: min(78%, 260px) !important;
    height: 2px !important;
  }
}