/* /css/cookie-consent.css?v=2
   PRO CSS για το cookie-consent.js v2 (cc-root / cc-backdrop / cc-sheet / cc-settings)
   - Mobile-first, responsive
   - Fixes z-index / overlay issues
   - Scroll lock support (html.cc-open, body.cc-open)
   - Safe with hidden attr
*/

:root{
  --cc-bg: rgba(0,0,0,.62);
  --cc-card: rgba(16,18,24,.94);
  --cc-card-solid: #0f1218;
  --cc-border: rgba(255,255,255,.12);
  --cc-border2: rgba(255,255,255,.08);
  --cc-text: #ffffff;
  --cc-muted: rgba(255,255,255,.82);
  --cc-dim: rgba(255,255,255,.64);
  --cc-accent: #7fb3ff;

  --cc-radius: 18px;
  --cc-radius2: 16px;

  --cc-shadow: 0 24px 70px rgba(0,0,0,.55);
  --cc-shadow2: 0 -18px 50px rgba(0,0,0,.55);

  --cc-z-backdrop: 100000;
  --cc-z-sheet: 100001;
  --cc-z-settings: 100002;
}

html.cc-open, body.cc-open{
  overflow: hidden !important;
  overscroll-behavior: contain;
  touch-action: none;
}

/* Root wrapper (optional, but helps isolation) */
#cc-root{
  position: relative;
  z-index: var(--cc-z-backdrop);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* hidden always wins */
#cc-backdrop[hidden],
#cc-sheet[hidden],
#cc-settings[hidden]{
  display: none !important;
}

/* ---------------- Backdrop ---------------- */
#cc-backdrop{
  position: fixed;
  inset: 0;
  background: var(--cc-bg);
  z-index: var(--cc-z-backdrop);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---------------- Bottom Sheet ---------------- */
#cc-sheet{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--cc-z-sheet);
  pointer-events: none; /* enabled only for card */

  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}

#cc-sheet.is-open{
  pointer-events: auto;
}

#cc-sheet .cc-card{
  pointer-events: auto;
  width: min(760px, 100%);
  margin: 0 auto;

  color: var(--cc-text);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--cc-card-solid);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);

  box-shadow: var(--cc-shadow2);
  overflow: hidden;
  transform: translateY(115%);
  transition: transform .25s ease;
  will-change: transform;
}

#cc-sheet.is-open .cc-card{
  transform: translateY(0);
}

/* Handle */
#cc-sheet .cc-handle{
  width: 46px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  margin: 10px auto 8px;
}

/* Content */
#cc-sheet .cc-title{
  margin: 0;
  padding: 2px 16px 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
}

#cc-sheet .cc-text{
  margin: 0;
  padding: 6px 16px 12px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--cc-muted);
}

/* Actions */
#cc-sheet .cc-actions{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 0 16px 14px;
}

@media (max-width: 560px){
  #cc-sheet .cc-actions{
    grid-template-columns: 1fr 1fr;
  }
  #cc-sheet .cc-actions .cc-btn.linklike{
    grid-column: 1 / -1;
  }
}

/* Buttons */
#cc-root .cc-btn{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--cc-border);
  background: rgba(255,255,255,.10);
  color: var(--cc-text);
  border-radius: 14px;

  padding: 12px 14px;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  user-select: none;

  transition: background .15s ease, transform .05s ease, border-color .15s ease;
}

#cc-root .cc-btn:hover{
  background: rgba(255,255,255,.14);
}

#cc-root .cc-btn:active{
  transform: translateY(1px);
}

#cc-root .cc-btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(127,179,255,.28);
  border-color: rgba(127,179,255,.55);
}

#cc-root .cc-btn.primary{
  background: linear-gradient(180deg, rgba(127,179,255,.30), rgba(127,179,255,.14));
  border-color: rgba(127,179,255,.45);
}

#cc-root .cc-btn.primary:hover{
  background: linear-gradient(180deg, rgba(127,179,255,.36), rgba(127,179,255,.18));
}

#cc-root .cc-btn.ghost{
  background: rgba(255,255,255,.06);
}

#cc-root .cc-btn.linklike{
  background: transparent;
  border-color: transparent;
  color: var(--cc-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 900;
}

#cc-root .cc-btn.linklike:hover{
  background: rgba(127,179,255,.10);
  border-color: rgba(127,179,255,.25);
  text-decoration: none;
}

/* Footer hint */
#cc-sheet .cc-foot{
  padding: 0 16px 14px;
}

#cc-sheet .cc-link{
  color: var(--cc-accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  opacity: .95;
}

#cc-sheet .cc-link:hover{
  text-decoration: underline;
}

/* ---------------- Settings Overlay ---------------- */
#cc-settings{
  position: fixed;
  inset: 0;
  z-index: var(--cc-z-settings);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
  background: rgba(0,0,0,.70);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Card */
#cc-settings .cc-settings-card{
  width: min(560px, 96vw);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--cc-card-solid);
  color: var(--cc-text);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius2);
  box-shadow: var(--cc-shadow);
  overflow: hidden;
}

/* Header */
#cc-settings .cc-settings-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--cc-border2);
}

#cc-settings .cc-settings-header .cc-title{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .2px;
}

#cc-settings .cc-x{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--cc-border2);
  background: rgba(255,255,255,.06);
  color: var(--cc-text);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

#cc-settings .cc-x:hover{
  background: rgba(255,255,255,.10);
}

/* Toggles list */
#cc-settings .cc-toggles{
  padding: 12px 14px;
  display: grid;
  gap: 10px;
}

#cc-settings .cc-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--cc-border2);
  background: rgba(255,255,255,.06);
}

#cc-settings .cc-toggle > div{
  display: grid;
  gap: 2px;
}

#cc-settings .cc-toggle strong{
  font-size: 14px;
  font-weight: 950;
}

#cc-settings .cc-toggle small{
  font-size: 12px;
  color: var(--cc-dim);
  line-height: 1.2;
}

/* Checkbox styling */
#cc-settings input[type="checkbox"]{
  width: 22px;
  height: 22px;
  accent-color: var(--cc-accent);
}

/* Actions in settings */
#cc-settings .cc-settings-actions{
  padding: 12px 14px 14px;
  border-top: 1px solid var(--cc-border2);
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 560px){
  #cc-settings .cc-settings-actions{
    grid-template-columns: 1fr;
  }
}

/* Make buttons full width in grid cells */
#cc-settings .cc-settings-actions .cc-btn{
  width: 100%;
}

/* ---------------- Mobile tuning ---------------- */
@media (max-width: 420px){
  #cc-sheet{
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }

  #cc-sheet .cc-title{
    padding-left: 14px;
    padding-right: 14px;
  }

  #cc-sheet .cc-text{
    padding-left: 14px;
    padding-right: 14px;
  }

  #cc-sheet .cc-actions{
    padding-left: 14px;
    padding-right: 14px;
  }

  #cc-settings .cc-settings-card{
    width: 98vw;
  }
}

/* ---------------- Optional: reduce motion ---------------- */
@media (prefers-reduced-motion: reduce){
  #cc-sheet .cc-card{
    transition: none;
  }
  #cc-root .cc-btn{
    transition: none;
  }
}

```css
/* /css/cookie-consent.css */

/* Backdrop */
.cc-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9998;
}

/* Bottom sheet */
.cc-sheet{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;

  max-width: 760px;
  margin: 0 auto;

  background: #0f0f10;
  color: #fff;

  border-top-left-radius: 18px;
  border-top-right-radius: 18px;

  box-shadow: 0 -16px 40px rgba(0,0,0,.45);
  padding: 14px 16px 18px;

  transform: translateY(110%);
  transition: transform .25s ease;
  will-change: transform;
}

.cc-sheet.is-open{
  transform: translateY(0);
}

/* Handle */
.cc-handle{
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  margin: 6px auto 12px;
}

/* Text */
.cc-title{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .2px;
}

.cc-text{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.35;
  opacity: .92;
}

/* Buttons */
.cc-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cc-btn{
  flex: 1;
  min-width: 140px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
}

.cc-btn:hover{
  background: rgba(255,255,255,.14);
}

.cc-btn:active{
  transform: translateY(1px);
}

.cc-btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(120,160,255,.35);
}

.cc-btn-ghost{
  flex-basis: 100%;
  background: transparent;
}

/* Footer link */
.cc-foot{
  margin-top: 10px;
}

.cc-link{
  color: #9cc2ff;
  text-decoration: none;
  font-size: 13px;
}

.cc-link:hover{
  text-decoration: underline;
}

/* Settings overlay */
.cc-settings{
  position: fixed;
  inset: 0;
  z-index: 10000;

  background: rgba(0,0,0,.60);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 14px;
}

/* Settings card */
.cc-settings-card{
  width: min(560px, 92vw);
  background: #0f0f10;
  color: #fff;

  border-radius: 16px;
  padding: 14px;

  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
}

.cc-settings-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.cc-x{
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 10px;
}

.cc-x:hover{
  background: rgba(255,255,255,.10);
}

/* Toggles rows */
.cc-row{
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 10px 10px;
  background: rgba(255,255,255,.06);
  border-radius: 12px;

  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,.08);
}

.cc-row span{
  font-size: 14px;
  font-weight: 700;
  opacity: .95;
}

/* Inputs */
.cc-row input[type="checkbox"]{
  width: 20px;
  height: 20px;
  accent-color: #6ea2ff;
}

/* Mobile tuning */
@media (max-width: 420px){
  .cc-sheet{
    padding: 12px 14px 16px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }
  .cc-btn{
    min-width: 120px;
    padding: 12px 12px;
  }
}

/* Force hide when JS sets hidden=true */
#cc-backdrop[hidden],
#cc-sheet[hidden],
#cc-settings[hidden]{
  display: none !important;
}


.cc-lang{
  display:flex;
  gap:8px;
  margin:10px 0 6px;
}
.cc-lang-btn{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.cc-lang-btn:hover{
  background: rgba(255,255,255,.12);
}

/* ===== Language row (responsive) — smaller flags, nice buttons ===== */

/* Language pills: ALWAYS one row, shrink to fit, never overflow */
#cc-sheet .cc-actions .cc-lang-pills{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(6px, 2vw, 10px);
  width: 100%;
  align-items: stretch;

  /* safety */
  box-sizing: border-box;
  min-width: 0;
}

/* Each button shrinks evenly */
#cc-sheet .cc-actions .cc-lang-pills .cc-lang-pick{
  flex: 1 1 0;
  min-width: 0;              /* CRITICAL: allow shrinking */
  width: auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.6vw, 8px);

  padding: clamp(6px, 1.8vw, 10px) clamp(8px, 2vw, 12px);
  min-height: 42px;
  line-height: 1;

  white-space: nowrap;       /* keep in one line */
  overflow: hidden;          /* prevent overflow */
  text-overflow: ellipsis;   /* if label too long */
}

/* Flag scales down */
#cc-sheet .cc-actions .cc-lang-pills .cc-lang-pick .cc-flag{
  width: clamp(18px, 6vw, 26px);
  height: clamp(18px, 6vw, 26px);
  flex: 0 0 auto;
  object-fit: contain;
}

/* Optional: make label slightly smaller on small screens */
@media (max-width: 420px){
  #cc-sheet .cc-actions .cc-lang-pills .cc-lang-pick{
    font-size: 13px;
  }
}





/* =========================================================
   FILTER SIDEBAR — Mobile-first, scoped, safe
   Applies ONLY inside #filterSidebar to avoid side-effects
   ========================================================= */

#filterSidebar{
  --fs-panel: #0f172a;
  --fs-text: #e5e7eb;
  --fs-muted: rgba(229,231,235,.72);
  --fs-border: rgba(255,255,255,.10);
  --fs-border2: rgba(255,255,255,.16);
  --fs-focus: rgba(96,165,250,.9);
  --fs-accent: #facc15;

  position: fixed;
  top: 0;
  left: 0;
  width: min(86vw, 340px);
  height: 100vh;
  background: var(--fs-panel);
  color: var(--fs-text);
  box-shadow: 2px 0 16px rgba(0,0,0,.45);
  padding: 16px;
  overflow-y: auto;
  z-index: 9999999999;

  transform: translateX(-100%);
  transition: transform .28s ease, opacity .28s ease, visibility .28s ease;
  opacity: 0;
  visibility: hidden;
}

#filterSidebar.active{
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

/* Close button */
#filterSidebar .close-sidebar-btn{
  position: sticky;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--fs-border);
  background: rgba(255,255,255,.06);
  color: var(--fs-text);
  cursor: pointer;
  margin-bottom: 10px;
}

#filterSidebar h3{
  margin: 16px 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--fs-text);
}

#filterSidebar label{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  font-size: 14px;
  color: var(--fs-text);
}

#filterSidebar input[type="radio"],
#filterSidebar input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--fs-accent);
  cursor: pointer;
}

/* Sort container */
#filterSidebar .sort-container{
  padding: 10px 10px 12px;
  border: 1px solid var(--fs-border);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
}

/* Reset button */
#filterSidebar #clearFilters{
  margin-top: 16px;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--fs-border2);
  background: rgba(255,255,255,.06);
  color: var(--fs-text);
  font-weight: 900;
  cursor: pointer;
}
#filterSidebar #clearFilters:active{ transform: translateY(1px); }

/* =======================
   PRICE RANGE (slider)
   ======================= */
#filterSidebar .price-range{
  margin: 12px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#filterSidebar .price-slider{
  position: relative;
  height: 30px;
  display: flex;
  align-items: center;
}

#filterSidebar .price-slider-track{
  position: absolute;
  left: 6px;
  right: 6px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(to right,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.18) 100%
  );
  pointer-events: none;
}

#filterSidebar .price-range-input{
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  width: 100%;
  background: none;
  pointer-events: none;
  height: 30px;
}

#filterSidebar .price-range-input::-webkit-slider-runnable-track{
  height: 5px;
  border-radius: 999px;
  background: transparent;
}
#filterSidebar .price-range-input::-moz-range-track{
  height: 5px;
  border-radius: 999px;
  background: transparent;
}

#filterSidebar .price-range-input::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.85);
  background: #0b1220;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
  cursor: pointer;
  pointer-events: auto;
  margin-top: -8px;
}
#filterSidebar .price-range-input::-moz-range-thumb{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.85);
  background: #0b1220;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
  cursor: pointer;
  pointer-events: auto;
}

/* =======================
   MIN/MAX inputs (clean)
   Works for text or number
   ======================= */
#filterSidebar .price-values{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}

#filterSidebar .price-value{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#filterSidebar .price-value span{
  font-size: 12px;
  color: var(--fs-muted);
}

#filterSidebar .price-value input{
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--fs-border2);
  padding: 10px 12px;
  font-size: 16px;  /* critical for mobile */
  background: rgba(255,255,255,.06);
  color: var(--fs-text);
  outline: none;
  appearance: textfield;
}

#filterSidebar .price-value input:focus{
  border-color: var(--fs-focus);
  box-shadow: 0 0 0 3px rgba(96,165,250,0.18);
}

#filterSidebar .price-value input::-webkit-outer-spin-button,
#filterSidebar .price-value input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Desktop tweak */
@media (min-width: 768px){
  #filterSidebar{
    width: 320px;
    padding: 18px;
  }
}


/* Make sidebar a positioning context */
#filterSidebar{
  position: fixed; /* το έχεις ήδη, το αφήνουμε */
}

/* Close button: always top-right inside the sidebar */
#filterSidebar .close-sidebar-btn{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;

  z-index: 10;

  width: 44px;
  height: 44px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.14);
  color: #fff;

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

  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  font-size: 18px;
  font-weight: 900;
}

/* Give content breathing room so it doesn't sit under the X */
#filterSidebar{
  padding-top: 64px; /* ώστε να μην καλύπτει τίτλους/inputs */
}

#filterSidebar .close-sidebar-btn:active{
  transform: translateY(1px);
}


/* BACKDROP ΠΙΣΩ από sidebar - ΚΑΙ ΝΑ ΝΙΚΑΕΙ inline */
#filtersBackdrop{
  z-index: 9999999980 !important;  /* κάτω από sidebar */
}

/* SIDEBAR ΠΑΝΩ από backdrop */
#filterSidebar{
  z-index: 9999999999 !important;
  pointer-events: auto;
}

[hidden]{
  display: none !important;
}


















/* ========================================
   Product Modal - Fullscreen, Stable Scroll
   ======================================== */

/* Κλειδώνουμε το background όταν είναι ανοιχτό το modal */
body.modal-open {
  overflow: hidden;
}

/* Overlay = scroll container (όπου κι αν ακουμπάς, scrollάρει εδώ) */
#productModal {
  position: fixed;
  inset: 0;
  z-index: 10000;

  display: none;                 /* θα γίνει flex από JS */
  align-items: flex-start;       /* ξεκινά από πάνω */
  justify-content: center;

  background: rgba(17, 22, 32, 0.85);
  backdrop-filter: blur(3px) saturate(140%);

  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;

  height: 100dvh;
  max-height: 100dvh;

  /* ΕΔΩ γίνεται όλο το scroll, όχι στο inner */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Modal Container */
#productModalContent {
  background: linear-gradient(135deg, #202a3b 0%, #24304a 80%);
  color: #eaf6fb;

  width: 100%;
  max-width: 520px;
  border-radius: 20px;
  box-shadow:
    0 24px 64px rgba(12, 16, 44, 0.42),
    0 1.5px 8px #101e36;

  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;

  /* αφήνουμε το overlay να κάνει το scroll, όχι το content */
  margin: 0 auto;
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  will-change: transform, opacity;
}

/* Close Button */
#productModalClose {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;

  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #ec4848 0%, #8d1b1b 90%);
  color: #fff;
  font-size: 18px;
  line-height: 32px;
  cursor: pointer;
  outline: none;

  box-shadow: 0 3px 12px rgba(236, 72, 72, 0.16);
  transition: background 0.17s, transform 0.17s;
  z-index: 2;
}

#productModalClose:hover,
#productModalClose:focus {
  background: linear-gradient(135deg, #b51212 0%, #721212 100%);
  transform: scale(1.06);
}

/* Inner content – χωρίς δικό του scroll */
#productModalInner {
  padding: 1.4rem 1.4rem 0.8rem 1.4rem;
  flex: 1 1 auto;
  font-family: 'Inter', 'Arial', sans-serif;
  line-height: 1.55;
}

/* Title */
#productModalInner h2.pm-title {
  margin: 0 0 0.8rem 0;
  font-size: 1.5rem;
  line-height: 1.2;
  text-align: center;
  color: #6dd3ff;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  position: relative;
  filter: drop-shadow(0 2px 8px rgba(109, 211, 255, 0.16));
  word-break: break-word;
}

#productModalInner h2.pm-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, #48c3ff 0%, #61ffe7 100%);
  border-radius: 3px;
  margin: 8px auto 0;
  box-shadow: 0 2px 8px #46b3d0b8;
}

/* ==============================
   Product Image
   ============================== */
#productModalInner .modal-img {
  width: 100%;
  max-height: 210px;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 16px;
  margin: 0 0 1rem 0;
  box-shadow: 0 8px 30px rgba(21, 48, 67, 0.13);
  border: none;
  transition: filter 0.2s;
  background-color: #0f1d2d;
}

#productModalInner .modal-img:hover {
  filter: brightness(1.05) saturate(110%);
}

/* Info block */
#productModalInner .product-info {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.8rem;

  background: rgba(41, 61, 105, 0.19);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(37, 73, 128, 0.09);
  font-size: 0.95rem;
}

#productModalInner .product-info p {
  margin: 0;
  color: #eaf6fb;
  word-break: break-word;
}

#productModalInner .product-info strong {
  color: #67d9ff;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Price badge */
#productModalInner .price {
  background: linear-gradient(90deg, #39e17d 0%, #3eb0c0 100%);
  color: #10261c;
  padding: 0.30rem 0.9rem;
  border-radius: 7px;
  font-weight: 700;
  font-size: 1.02rem;
  box-shadow: 0 1px 6px #24c79328;
  display: inline-block;
  letter-spacing: 0.04em;
}

/* ===== Description block (collapsible) ===== */
.pm-desc-block {
  margin-top: 0.3rem;
  margin-bottom: 0.5rem;
}

.pm-desc {
  margin-top: 0.1rem;
  max-height: 4.2em; /* ~3 γραμμές */
  overflow: hidden;
  position: relative;
  font-size: 0.95rem;
  color: #eaf6fb;
}

.pm-desc::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.6em;
  background: linear-gradient(to top, #24304a 0%, transparent 100%);
}

.pm-desc.expanded {
  max-height: none;
}

.pm-desc.expanded::after {
  display: none;
}

.pm-desc-toggle {
  margin-top: 0.25rem;
  padding: 0;
  border: none;
  background: none;
  color: #48c3ff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
}

/* Rating */
.rating-stars {
  font-size: 1.02em;
  color: #ffce41;
  margin: 2px 0 2px 0;
  letter-spacing: 2px;
  text-shadow: 0 2px 4px #2e4b56bb;
  display: inline-block;
  vertical-align: middle;
}

.review-link {
  color: #47beff;
  text-decoration: none;
  font-size: 0.88rem;
  margin-left: 7px;
  transition: color 0.18s;
}

.review-link:hover,
.review-link:focus {
  color: #2c9ad6;
  text-decoration: underline;
}

/* ===== Options groups ===== */
.pm-fieldset {
  border: none;
  padding: 0.25rem 0 0.6rem 0;
  margin: 0;
}

.pm-row {
  font-size: 0.94rem;
}

/* ===== Footer (share + total + add button) ===== */
.pm-footer {
  position: sticky;
  bottom: 0;
  z-index: 1;

  margin-top: 0.6rem;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));

  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  justify-content: space-between;

  background: linear-gradient(
    to top,
    rgba(8, 13, 26, 0.96),
    rgba(8, 13, 26, 0.9),
    transparent
  );
  border-top: 1px solid rgba(148, 163, 184, 0.5);
}

.pm-total {
  font-size: 0.93rem;
}

.pm-total strong {
  font-size: 1rem;
}

/* Share button */
.pm-share-btn {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: rgba(15, 23, 42, 0.7);
  color: #e5f2ff;
  font-size: 0.83rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.4);
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
}

.pm-share-btn:hover {
  background: rgba(37, 99, 235, 0.95);
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.45);
  transform: translateY(-1px);
}

/* Add to cart button */
#productModalInner #pm-add-btn,
#productModalInner .pm-add-btn {
  flex: 1 1 100%;
  margin-top: 0.1rem;

  padding: 0.8rem 1.3rem;
  border-radius: 120px;
  border: none;
  outline: none;

  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  cursor: pointer;

  background: linear-gradient(90deg, #00c853 0%, #00e676 90%);
  color: #0b1b16;

  box-shadow:
    0 3px 16px rgba(0, 230, 118, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.15);

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

#productModalInner #pm-add-btn:hover,
#productModalInner .pm-add-btn:hover {
  transform: translateY(-1px) scale(1.01);
  filter: brightness(1.04);
  box-shadow:
    0 5px 20px rgba(0, 230, 118, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.18);
}

#productModalInner #pm-add-btn:active,
#productModalInner .pm-add-btn:active {
  transform: translateY(0) scale(0.99);
  box-shadow:
    0 2px 10px rgba(0, 230, 118, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0.2);
}

#productModalInner #pm-add-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Scrollbar για το overlay */
#productModal::-webkit-scrollbar {
  width: 8px;
}
#productModal::-webkit-scrollbar-thumb {
  background: #37587861;
  border-radius: 4px;
}
#productModal::-webkit-scrollbar-track {
  background: transparent;
}

/* Accessibility Focus Styles */
#productModalClose:focus,
#productModalInner .pm-add-btn:focus-visible,
#productModalInner .pm-share-btn:focus-visible {
  outline: 2.5px solid #48c3ff;
  outline-offset: 2px;
}

/* ========================================
   Fullscreen Image Zoom (Ebay style)
   ======================================== */

.image-zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 10, 24, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 12000;
  backdrop-filter: blur(2px);
}

.image-zoom-box {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
  overflow: hidden;
  background: #000;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-zoom-box img {
  display: block;
  max-width: none;
  width: 100%;
  height: auto;
  transform-origin: center center;
  transition: transform 0.15s ease-out;
}

/* Close */
.image-zoom-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

/* Zoom controls bottom-left (για να μην πέφτουν σε Tidio / bottom nav) */
.image-zoom-controls {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
}

.image-zoom-btn {
  border: none;
  border-radius: 999px;
  width: 34px;
  height: 34px;
  background: rgba(15, 23, 42, 0.85);
  color: #e5f4ff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (pointer: coarse) {
  .image-zoom-btn {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
}

/* ========================================
   Mobile tweaks
   ======================================== */
@media (max-width: 768px) {
  #productModalContent {
    border-radius: 14px;
  }

  #productModalInner {
    padding: 1.1rem 1.1rem 0.7rem 1.1rem;
  }

  #productModalInner h2.pm-title {
    font-size: 0.55rem;
  }

  #productModalInner .modal-img {
    max-height: 190px;
  }
}

@media (max-width: 480px) {
  .pm-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .pm-share-btn {
    align-self: flex-start;
  }

  #productModalInner #pm-add-btn {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* --- Καλύτερη μορφοποίηση περιγραφής μέσα στο modal --- */

/* Κάρτα για την περιγραφή */
.pm-desc-block {
  margin: 0.8rem 0 1rem 0;
  padding: 0.75rem 0.85rem 0.55rem;
  border-radius: 12px;

  background: rgba(10, 18, 35, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.55);
}

/* Κύριο κείμενο */
.pm-desc {
  margin-top: 0;
  max-height: 6.2em;           /* ~4–5 γραμμές κλειστό */
  overflow: hidden;
  position: relative;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #eaf6fb;

  /* αν η περιγραφή έχει \n από DB, τα κρατάει σαν νέες γραμμές */
  white-space: pre-line;
}

/* ελαφρό fade στο κάτω μέρος όταν είναι κλειστό */
.pm-desc::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.8em;
  background: linear-gradient(to top, rgba(10,18,35,1) 0%, transparent 100%);
}

/* ανοιχτή περιγραφή */
.pm-desc.expanded {
  max-height: none;
}

.pm-desc.expanded::after {
  display: none;
}

/* κουμπί "Περισσότερα / Λιγότερα" να φαίνεται σαν μικρό link */
.pm-desc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  margin-top: 0.3rem;
  padding: 0;

  border: none;
  background: none;

  color: #7dd3fc;
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-decoration: none;
}

.pm-desc-toggle:hover,
.pm-desc-toggle:focus {
  text-decoration: underline;
}
/* Βάση κουμπιού */
.pm-desc-toggle {
  border: none;
  background: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: underline;
  padding: 0;
}

/* ΣΤΑΔΙΟ: ΔΙΑΒΑΣΤΕ ΠΕΡΙΣΣΟΤΕΡΑ */
.pm-desc-toggle.pm-more {
  color: #7dd3fc;          /* πιο “link” */
}

/* ΣΤΑΔΙΟ: ΛΙΓΟΤΕΡΑ */
.pm-desc-toggle.pm-less {
  color: #f97373;          /* πιο “κόκκινο / close” */
}
/* ===== META INFO BOX (availability, sku, weight, rating) ===== */

.pm-meta-box {
  margin: 1rem 0 1.3rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;

  background: rgba(12, 20, 35, 0.92);
  border: 1px solid rgba(120, 160, 200, 0.45);
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);

  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pm-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;

  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 4px;
}

.pm-meta-row:last-child {
  border-bottom: none;
}

.pm-meta-label {
  color: #7dd3fc;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pm-meta-value {
  color: #eaf6fb;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: right;
}

/* ===== PRODUCT MODAL GALLERY ===== */

.pm-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

/* Κεντρική φωτογραφία */
.pm-gallery-main {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pm-gallery-main .modal-img {
  max-width: 100%;
  width: 260px;             /* μπορείς να το πειράξεις */
  max-height: 260px;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(0,0,0,0.25);
  box-shadow: 0 10px 25px rgba(0,0,0,0.45);
}

/* Thumbnails (εμφανίζονται ΜΟΝΟ αν gallery.length > 1 στο HTML) */
.pm-gallery-thumbs {
  display: flex;
  gap: 8px;
  padding-top: 4px;
  overflow-x: auto;
}

/* scrollbar λίγο πιο διακριτικό */
.pm-gallery-thumbs::-webkit-scrollbar {
  height: 6px;
}
.pm-gallery-thumbs::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
}
.pm-gallery-thumbs::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.35);
  border-radius: 999px;
}

/* Κάθε μικρή εικόνα */
.pm-thumb {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid transparent;
  opacity: 0.6;
  cursor: pointer;
  transition:
    opacity 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

/* Hover / active */
.pm-thumb:hover {
  opacity: 1;
}

.pm-thumb.active {
  opacity: 1;
  border-color: var(--primary-color, #00c1ff);
  box-shadow: 0 0 0 1px rgba(0, 193, 255, 0.5);
  transform: translateY(-2px);
}

/* Λίγο πιο μεγάλο σε desktop */
@media (min-width: 768px) {
  .pm-gallery-main .modal-img {
    width: 320px;
    max-height: 320px;
  }

  .pm-thumb {
    width: 70px;
    height: 70px;
  }
}























/* File: /css/all_categories_overlay.css */


/* Full Catalog - simple (button look) */
.all-cat-footer .full-catalog-simple{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 8px 14px;
  border-radius: 999px;

  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 900;
  line-height: 1;

  color: #e5e7eb !important;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.45);

  opacity: 1 !important; /* override παλιό inline */
  white-space: nowrap;

  box-shadow: 0 10px 22px rgba(0,0,0,.28);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
}

.all-cat-footer .full-catalog-simple:hover{
  background: rgba(250, 204, 21, 0.16);
  border-color: rgba(250, 204, 21, 0.85);
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
  transform: translateY(-1px);
}

.all-cat-footer .full-catalog-simple:active{
  transform: translateY(1px);
}

.all-cat-footer .full-catalog-simple:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.25), 0 14px 28px rgba(0,0,0,.35);
}

/* Fullscreen overlay */
.all-cat-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  font-family: inherit;
}

.all-cat-overlay.open {
  display: flex;
  pointer-events: auto;
}

/* Σκοτεινό background */
.all-cat-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(5px);
}

/* Κεντρικό panel (bottom sheet) — πιο ψηλό */
.all-cat-panel {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: 80vh; /* πιο ψηλό */
  background: radial-gradient(circle at top left, #1f2937 0, #020617 45%, #020617 100%);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -18px 40px rgba(0,0,0,0.65);
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform 0.25s ease-out;
}

.all-cat-overlay.open .all-cat-panel {
  transform: translateY(0);
}

/* Header */
.all-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 8px;
}

.all-cat-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #e5e7eb;
  letter-spacing: 0.02em;
}

.all-cat-close {
  background: transparent;
  border: none;
  color: #e5e7eb;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}

/* Σώμα: main + sub columns
   - πιάνει όλο το ύψος που περισσεύει
   - scroll μέσα στο body (όχι περίεργα nested scrolls)
*/
.all-cat-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Λίστα κύριων κατηγοριών */
.all-cat-main-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: max-height 0.22s ease, opacity 0.22s ease, margin 0.22s ease;
}

/* Δεξιά περιοχή υποκατηγοριών */
.all-cat-subarea {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Μπλοκ υποκατηγοριών */
.all-cat-sub-block {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 14px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 6px 15px rgba(0,0,0,0.55);
}

.all-cat-sub-title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Footer */
.all-cat-footer {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.all-cat-selection {
  font-size: 12px;
  color: #cbd5f5;
  min-height: 18px;
  line-height: 1.3;
}

.all-cat-selection strong {
  color: #f9fafb;
}

/* Κουμπί Μετάβασης */
.all-cat-apply-btn {
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #facc15, #f97316);
  color: #111827;
  white-space: nowrap;
  box-shadow: 0 10px 25px rgba(250, 204, 21, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.all-cat-apply-btn:not(:disabled):active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 4px 10px rgba(250, 204, 21, 0.35);
}

.all-cat-apply-btn:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
}

/* Κάρτα κύριας κατηγορίας */
.all-cat-group {
  padding: 8px 9px;
  border-radius: 12px;
  background: linear-gradient(135deg, #020617 0, #020617 40%, #111827 100%);
  box-shadow: 0 6px 16px rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border: 1px solid rgba(15, 118, 230, 0.15);
  transition: border-color 0.12s ease, box-shadow 0.12s ease,
              background 0.12s ease, transform 0.08s ease, opacity 0.12s ease;
}

.all-cat-group:hover {
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.85);
  transform: translateY(-1px);
}

.all-cat-group.selected {
  border-color: #facc15;
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.65), 0 10px 22px rgba(0,0,0,0.9);
  background: linear-gradient(135deg, #0f172a 0, #1e293b 45%, #0f172a 100%);
}

/* FOCUS EFFECT αρχικά:
   όταν υπάρχει επιλεγμένη κύρια αλλά δεν έχουμε κλείσει τη λίστα
*/
.all-cat-main-list.has-selection .all-cat-group {
  opacity: 0.4;
  transform: scale(0.96);
}

.all-cat-main-list.has-selection .all-cat-group.selected {
  opacity: 1;
  transform: scale(1.02);
}

/* ΕΙΔΙΚΟ: μόλις επιλεγεί κύρια, κλείνουμε τη λίστα
   - φεύγουν όλες οι root για να μείνουν μόνο οι υπο
*/
.all-cat-overlay.main-selected .all-cat-main-list {
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

/* Εικόνα κύριας κατηγορίας */
.all-cat-main-img {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(circle at top left, #1d4ed8, #020617);
  display: flex;
  align-items: center;
  justify-content: center;
}

.all-cat-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Τίτλος κύριας */
.all-cat-main-info {
  flex: 1;
  min-width: 0;
}

.all-cat-main-name {
  font-size: 13px;
  font-weight: 600;
  color: #f9fafb;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Λίστες chips */
.all-cat-sub-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Chips κοινά */
.all-cat-chip {
  border: none;
  border-radius: 999px;
  padding: 10px 13px;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.5;
  transition: background 0.12s ease, transform 0.08s ease,
              box-shadow 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
  border: 1px solid transparent;
  max-width: 100%;
}


/* Level 2 (υποκατηγορία) */
.all-cat-chip.level-2 {
  background: rgba(56, 189, 248, 0.16);
  color: #e0f2fe;
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.6);
}

/* Level 3 (υπό-υποκατηγορία) */
.all-cat-chip.level-3 {
  background: rgba(52, 211, 153, 0.16);
  color: #bbf7d0;
  border-color: rgba(52, 211, 153, 0.35);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.6);
}

/* Hover state */
.all-cat-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.8);
}

/* Selected state υποκατηγορίας */
.all-cat-chip.level-2.selected {
  background: rgba(59, 130, 246, 0.22);
  border-color: rgba(59, 130, 246, 0.9);
  color: #eff6ff;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.9), 0 6px 16px rgba(15, 23, 42, 0.9);
}

/* Selected state υπό-υποκατηγορίας */
.all-cat-chip.level-3.selected {
  background: rgba(52, 211, 153, 0.25);
  border-color: rgba(52, 211, 153, 0.95);
  color: #ecfdf5;
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.95), 0 6px 16px rgba(15, 23, 42, 0.9);
}

/* FOCUS EFFECT: όταν έχει επιλεγεί υποκατηγορία, οι άλλες χαμηλώνουν */
.all-cat-sub-list.has-selection .all-cat-chip {
  opacity: 0.45;
  transform: scale(0.96);
}

.all-cat-sub-list.has-selection .all-cat-chip.selected {
  opacity: 1;
  transform: scale(1.02);
}

/* Μικρό εικονίδιο (αν θέλεις εικόνα και στα chips) */
.all-cat-chip-img {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  background: #020617;
  flex-shrink: 0;
}

.all-cat-chip-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* RESPONSIVE: σε πιο φαρδιές οθόνες, δίπλα-δίπλα */
@media (min-width: 768px) {
  .all-cat-body {
    flex-direction: row;
  }

  .all-cat-main-list {
    flex: 0 0 46%;
  }

  .all-cat-subarea {
    flex: 1;
  }
}

/* Δευτερεύον κουμπί στην μπάρα κατηγοριών */
#catBarHeader {
  display: flex;
  gap: 8px;
  align-items: center;
}

#catBarHeader .cat-toggle.secondary {
  background: #18283a;
  color: #e2e8f0;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  border: 1px solid rgba(148, 163, 184, 0.5);
}

/* Thumbnail image μέσα στα chips */
.all-cat-chip-img{
  width:56px;
  height:56px;
  border-radius:14px;
  object-fit:cover;
  flex:0 0 auto;
}


.all-cat-chip span.label{
  white-space: normal;      /* όχι 1 γραμμή */
  overflow: visible;
  text-overflow: unset;
  line-height: 1.15;
  font-size: 14px;
}


.all-cat-sub-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.all-cat-chip{
  width: 100%;
  justify-content: flex-start;
}

/* Fix overflow right */
.all-cat-overlay, .all-cat-overlay * { box-sizing: border-box; }

.all-cat-sub-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.all-cat-chip{
  width: 100%;
  min-width: 0;           /* επιτρέπει shrink μέσα στο grid */
  max-width: 100%;
  justify-content: flex-start;
}

.all-cat-chip .label{
  min-width: 0;
  white-space: normal;    /* όχι nowrap */
  overflow: hidden;

  /* 2 γραμμές max για να μη φουσκώνει */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 360px){
  .all-cat-sub-list{ grid-template-columns: 1fr; }
}


/* ===== TITLE SAFE (never overflow) ===== */
.all-cat-group,
.all-cat-main-info,
.all-cat-main-name,
.all-cat-chip,
.all-cat-chip .label,
.all-cat-selection{
  min-width: 0;
  max-width: 100%;
}

/* Main category title: 1 γραμμή με ellipsis */
.all-cat-main-name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* Selection footer: 2 γραμμές max */
.all-cat-selection{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.2;
}
/* HARD LIMIT titles */
.all-cat-chip .label{
  white-space: normal !important;
  overflow: hidden !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;

  -webkit-line-clamp: 3 !important;  /* άλλαξε 2 -> 1 αν το θες πιο σφιχτό */
  line-height: 1.20 !important;
  max-height: calc(2 * 2.12em) !important; /* hard cap σε ύψος */
}

/* ALWAYS WRAP - NEVER CUT */
.all-cat-chip .label{
  display: block !important;
  white-space: normal !important;

  overflow: visible !important;
  text-overflow: unset !important;

  /* ακύρωση clamp */
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  max-height: none !important;

  /* να σπάει ακόμα και “τεράστιες” λέξεις */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}




/* =========================================================================
   CATEGORY NAV – FINAL (Main = icon cards, Mid/Leaf = chips, Sub = circles)
   Στόχοι:
   - Όλες οι μπάρες 1 γραμμή, scroll δεξιά (no wrap)
   - Main: 3D icon cards + τίτλος 3 γραμμές (σταθερό ύψος)
   - Mid/Leaf: chips (premium hover/active)
   - Sub (κάτω κύκλοι): κύκλος + τίτλος από κάτω (2 γραμμές) ΧΩΡΙΣ να κόβεται
   Βάλ’ το ΚΑΤΩ-ΚΑΤΩ για override.
   ========================================================================= */

/* ========================================================================= */
/* GLOBAL TUNING (εύκολα tweaks)                                             */
/* ========================================================================= */
:root{
  --rowGap: 14px;          /* gap ανάμεσα στα items (desktop) */
  --rowPadX: 8px;
  --rowPadY: 6px;

  /* Subcategory circles (κάτω-κάτω) */
  --subCardW: 112px;
  --subCircle: 84px;
  --subTitleZone: 56px;    /* χώρος τίτλου κάτω (μην το κάνεις μικρότερο) */
  --subTitleFont: 10.6px;
  --subTitleLine: 1.12;
  --subTitleLines: 2;      /* 2 γραμμές = πιο όμορφο/compact */
}

/* ========================================================================= */
/* SCROLLBAR BASE                                                            */
/* ========================================================================= */
.scrollbar{
  display:flex;
  align-items:center;
  flex-wrap: nowrap !important;     /* ΠΟΤΕ wrap */
  gap: var(--rowGap);
  padding: var(--rowPadY) var(--rowPadX) 10px; /* extra bottom για να μη κόβονται τίτλοι */
  overflow-x:auto;
  overflow-y: visible;              /* για να μη “κόβει” κάτω τίτλους */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
  
}

.scrollbar::-webkit-scrollbar{ height:4px; }
.scrollbar::-webkit-scrollbar-track{ background: transparent; }
.scrollbar::-webkit-scrollbar-thumb{
  background: rgba(148, 163, 184, 0.4);
  border-radius: 999px;
}

/* ========================================================================= */
/* MAIN CATEGORIES – 3D Icon Cards                                           */
/* ========================================================================= */
#mainCategories{
  padding: 20px 12px 15px;
}

/* ΚΟΥΜΠΙ ΚΑΤΗΓΟΡΙΑΣ */
#mainCategories .main-cat-btn,
#mainCategories button,
#mainCategories a{
  position: relative;
  flex: 0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding: 20px 20px;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  color:#ffffff;
  cursor:pointer;
  text-decoration:none;
}

/* INNER WRAPPER */
#mainCategories .main-cat-inner{
  position: relative;
  z-index: 1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

/* ICON TILE */
#mainCategories .main-cat-img{
  width: 80px;
  height: 80px;
  border-radius: 0px;
  background: #f7efe4;
  border: 0;

  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(148, 163, 184, 0.25);

  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;

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

#mainCategories .main-cat-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* TITLE (3 γραμμές, ίδιο ύψος παντού) */
#mainCategories .main-cat-label{
  font-size: 11px;
  font-weight: 900;
  max-width: 110px;
  text-align:center;
  line-height: 1.2;
  color:#ffffff;

  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  height: calc(1.2em * 3);
}

/* HOVER */
#mainCategories .main-cat-btn:hover .main-cat-img{
  transform: translateY(-2px);
  box-shadow:
    0 12px 24px rgba(15, 23, 42, 0.28),
    0 0 0 1px rgba(250, 204, 21, 0.9);
}

/* GLOW (ACTIVE) */
#mainCategories .main-cat-btn::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:28px;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.9);
  opacity:0;
  transform: scale(0.92);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index:0;
}

#mainCategories .main-cat-btn.active::before,
#mainCategories .main-cat-btn.is-active::before{
  opacity:1;
  transform: scale(1);
}

#mainCategories .main-cat-btn.active .main-cat-img,
#mainCategories .main-cat-btn.is-active .main-cat-img{
  transform: translateY(-4px) scale(1.05);
  box-shadow:
    0 0 0 2px #facc15,
    0 14px 32px rgba(15, 23, 42, 0.8);
}

#mainCategories .main-cat-btn.active .main-cat-label,
#mainCategories .main-cat-btn.is-active .main-cat-label{
  text-shadow: 0 0 4px rgba(0,0,0,0.9);
}

/* ========================================================================= */
/* MID CATEGORIES – CHIPS                                                    */
/* ========================================================================= */
#midCategories .mid-cat-btn,
#midCategories button,
#midCategories a{
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 4px 10px;
  border-radius: 999px;

  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;

  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;

  cursor:pointer;
  white-space: nowrap;
  text-decoration:none;

  transition: background .16s ease, color .16s ease, transform .1s ease, border-color .16s ease, box-shadow .16s ease;
}

#midCategories .mid-cat-btn:hover{
  background: rgba(250, 204, 21, 0.9);
  color: #f9fafb;
  border-color: rgba(248, 250, 252, 0.9);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.9);
}

#midCategories .mid-cat-btn.active{
  background: linear-gradient(135deg, #facc15, #eab308);
  color: #111827;
  border-color: rgba(250, 204, 21, 0.95);
  box-shadow: 0 0 0 1px rgba(161, 98, 7, 0.9), 0 8px 18px rgba(161, 98, 7, 0.7);
}

/* ========================================================================= */
/* LEAF CATEGORIES – SMALLER CHIPS                                           */
/* ========================================================================= */
#leafCategories .leaf-cat-btn,
#leafCategories button,
#leafCategories a{
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(51, 65, 85, 0.9);
  background: rgba(15, 23, 42, 0.85);
  color: #cbd5f5;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor:pointer;
  text-decoration:none;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .08s ease;
}

#leafCategories .leaf-cat-btn:hover{
  background: rgba(250, 204, 21, 0.9);
  color: #f9fafb;
  border-color: rgba(129, 140, 248, 0.9);
  transform: translateY(-1px);
}

#leafCategories .leaf-cat-btn.active{
  background: rgba(250, 204, 21, 0.98);
  color: #111827;
  border-color: rgba(202, 138, 4, 0.95);
}

/* ========================================================================= */
/* SUBCATEGORY CIRCLES (ΥΠΟ-ΥΠΟΚΑΤΗΓΟΡΙΕΣ ΚΑΤΩ)                               */
/* ========================================================================= */
.scrollbar .subcat-btn.has-img{
  position: relative;
  flex: 0 0 auto;
  

  width: var(--subCardW) !important;
  height: calc(var(--subCircle) + var(--subTitleZone)) !important; /* αυτό λύνει το κόψιμο */

  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  overflow: visible !important; /* μην κόβει το title */
}

/* reset παλιών absolute rules */
.scrollbar .subcat-btn.has-img .subcat-icon,
.scrollbar .subcat-btn.has-img .subcat-title{
  position: static !important;
  transform: none !important;
}

/* κύκλος */
.scrollbar .subcat-btn.has-img .subcat-icon{
  width: var(--subCircle) !important;
  height: var(--subCircle) !important;
  border-radius: 999px !important;
  object-fit: cover !important;

  border: 1px solid rgba(148,163,184,.30) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.06) !important;

  pointer-events: none;
}

/* τίτλος κάτω (compact, όχι τεράστιο pill) */
.scrollbar .subcat-btn.has-img .subcat-title{
  margin-top: 6px !important;
  padding: 0px 4px !important;

  border-radius: 10px !important; /* όχι 999px */
  background: rgba(12,18,32,.72) !important; /* ΟΧΙ γκρι */
  border: 1px solid rgba(148,163,184,.30) !important;

  color: #889131 !important;
  font-weight: 900 !important;
  font-size: var(--subTitleFont) !important;
  line-height: var(--subTitleLine) !important;

  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;

  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: var(--subTitleLines) !important;
  min-height: calc(var(--subTitleFont) * var(--subTitleLine) * var(--subTitleLines)) !important;
}

/* hover/active */
.scrollbar .subcat-btn.has-img:hover .subcat-title{
  border-color: rgb(255 255 255 / 65%) !important;
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.25) !important;
}

.scrollbar .subcat-btn.has-img.active .subcat-icon,
.scrollbar .subcat-btn.has-img.is-active .subcat-icon{
  border-color: rgb(127 127 127 / 0%) !important;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 28%), 0 10px 22px rgba(0,0,0,.32) !important;
}

.scrollbar .subcat-btn.has-img.active .subcat-title,
.scrollbar .subcat-btn.has-img.is-active .subcat-title{
  border-color: rgb(255 255 255 / 85%) !important;
}

/* ========================================================================= */
/* RESPONSIVE                                                                */
/* ========================================================================= */
@media (max-width: 480px){
  :root{
    --rowGap: 12px;

    --subCardW: 106px;
    --subCircle: 78px;
    --subTitleZone: 56px;
    --subTitleFont: 10.4px;
    --subTitleLines: 3;
  }

  #mainCategories .main-cat-img{
    width: 78px;
    height: 78px;
  }

  #mainCategories .main-cat-label{
    font-size: 10px;
    max-width: 88px;
  }
}

/* ========================================================================= */
/* HARD OVERRIDES (αν παλιά CSS κόβουν ύψη)                                  */
/* ========================================================================= */
#mainCategories .main-cat-label,
.scrollbar .subcat-btn.has-img .subcat-title{
  height: auto !important;
  text-overflow: clip !important;
}


/* ===========================
   MAIN: TEXT ONLY (NO IMAGES)
   + HORIZONTAL SCROLL
   =========================== */

/* 1) HORIZONTAL SCROLL row (1 γραμμή, δεξιά/αριστερά) */
#mainCategories.scrollbar,
#mainCategories{
  display:flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  gap: 10px !important;
  padding: 10px 10px 8px !important;
}

/* 2) Κρύψε εικόνες main (και wrapper) */
#mainCategories .main-cat-img,
#mainCategories .main-cat-img img,
#mainCategories img,
#mainCategories .main-cat-inner .main-cat-img{
  display:none !important;
}

/* 3) Κάνε τα main κουμπιά “pill” με ΜΟΝΟ τίτλο */
#mainCategories .main-cat-btn,
#mainCategories button,
#mainCategories a{
  flex: 0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding: 8px 12px !important;
  border-radius: 999px !important;

  background: rgba(15, 23, 42, 0.90) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  box-shadow: none !important;

  text-decoration:none !important;
}

/* 4) Τίτλος να χωράει (μέχρι 2 γραμμές) */
#mainCategories .main-cat-label{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;

  overflow: hidden !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;

  max-width: 240px !important;
  line-height: 1.15 !important;
  font-size: 12px !important;
  font-weight: 900 !important;

  height: auto !important;          /* ακυρώνει το fixed height από πριν */
}

/* 5) Active / Hover */
#mainCategories .main-cat-btn:hover{
  border-color: rgba(250, 204, 21, 0.85) !important;
  transform: translateY(-1px);
}

#mainCategories .main-cat-btn.active,
#mainCategories .main-cat-btn.is-active{
  background: rgba(250, 204, 21, 0.16) !important;
  border-color: rgba(250, 204, 21, 0.95) !important;
}

/* 6) Ακύρωσε το glow ::before (ή θα φαίνεται σαν “κάρτα”) */
#mainCategories .main-cat-btn::before{
  display:none !important;
}

.scrollbar .subcat-btn.has-img .subcat-title{
  height: calc(var(--subTitleZone) - 6px) !important; /* -6 για το margin-top */
  max-height: calc(var(--subTitleZone) - 6px) !important;
}

/* SUB (με φωτογραφία): τίτλος ακριβώς στο κέντρο του κουτιού */
.scrollbar .subcat-btn.has-img .subcat-title{
  width: 100% !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;      /* κέντρο κατακόρυφα */
  justify-content: center !important;  /* κέντρο οριζόντια */

  text-align: center !important;

  height: calc(var(--subTitleZone) - 6px) !important;
  max-height: calc(var(--subTitleZone) - 6px) !important;

  padding: 0 3px !important;           /* μην έχει πάνω/κάτω padding όταν κάνεις flex-center */
}



.eta{margin:6px 0;font-size:12px;padding:4px 8px;border-radius:10px;display:inline-block;}
.eta-fast{background:#003a47;}




/* =====================================================
   ESHOP MESSAGE BAR + INFO MODAL (Improved)
   - cleaner look, better spacing, better mobile,
   - supports light/dark via CSS variables,
   - smoother animations + focus states
   ===================================================== */

/* ====== THEME TOKENS ====== */
:root{
  --mb-bg: #020617;
  --mb-fg: #e5e7eb;
  --mb-border: rgba(148,163,184,.25);
  --mb-shadow: 0 10px 30px rgba(0,0,0,.35);

  --accent: #3b82f6;
  --accent-2: #facc15;

  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --text: #0f172a;
  --muted: #6b7280;

  --radius: 14px;
  --radius-pill: 999px;
}

/* Optional: if you have dark mode attribute/class */
:root[data-theme="dark"]{
  --surface: #0b1220;
  --surface-2: rgba(148,163,184,.10);
  --text: #e5e7eb;
  --muted: rgba(229,231,235,.70);
  --mb-shadow: 0 12px 34px rgba(0,0,0,.60);
}

/* ====== MESSAGE BAR ====== */
#eshopMessageBar{
  width: 100%;
  box-sizing: border-box;

  margin-top: 50px;
  padding: 8px 12px;

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

  background: linear-gradient(180deg, rgba(2,6,23,1) 0%, rgba(15,23,42,1) 100%);
  color: var(--mb-fg);
  border: 1px solid var(--mb-border);
  border-left: 0;
  border-right: 0;

  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;

  opacity: 1;
  transition: opacity .35s ease, transform .35s ease, filter .35s ease;
  transform: translateY(0);

  /* smoother on mobile */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#eshopMessageBar.fade-out{
  opacity: 0;
  transform: translateY(-2px);
  filter: blur(.2px);
}

#eshopMessageBar.fade-in{
  opacity: 1;
  transform: translateY(0);
  filter: none;
}

/* Text */
/* Message text container (centers stacked message) */
#eshopMessageText{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* Info button */
#eshopExtraButton{
  flex-shrink: 0;

  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;

  border-radius: var(--radius-pill);
  border: 1px solid rgba(248,250,252,.35);
  background: rgba(2,6,23,.55);
  color: var(--mb-fg);

  cursor: pointer;
  white-space: nowrap;

  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

#eshopExtraButton:hover{
  background: rgba(59,130,246,.18);
  border-color: rgba(250,204,21,.70);
}

#eshopExtraButton:active{
  transform: translateY(1px) scale(.99);
}

#eshopExtraButton:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.35), 0 6px 18px rgba(0,0,0,.25);
}

/* ====== MODAL OVERLAY ====== */
#eshopInfoOverlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;

  background: rgba(2,6,23,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  z-index: 9999;
  padding: 14px;
}

#eshopInfoOverlay.active{
  display: flex;
}

/* ====== MODAL CARD ====== */
#eshopInfoModal{
  width: min(620px, 96vw);
  max-height: min(78vh, 720px);
  overflow: auto;

  background: var(--surface);
  color: var(--text);

  border-radius: calc(var(--radius) + 2px);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: var(--mb-shadow);

  padding: 16px 18px 18px;
  position: relative;

  /* smooth scrolling inside modal */
  scroll-behavior: smooth;
}

#eshopInfoModal h3{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

/* Close (X) */
#eshopInfoModalClose{
  position: absolute;
  top: 10px;
  right: 10px;

  width: 34px;
  height: 34px;
  border-radius: 10px;

  border: 1px solid rgba(148,163,184,.22);
  background: var(--surface-2);
  color: var(--muted);

  display: grid;
  place-items: center;

  font-size: 18px;
  line-height: 1;
  cursor: pointer;

  transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}

#eshopInfoModalClose:hover{
  color: var(--text);
  background: rgba(148,163,184,.18);
}

#eshopInfoModalClose:active{
  transform: translateY(1px);
}

#eshopInfoModalClose:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.35);
}

/* ====== TABS ====== */
#eshopInfoTabs{
  display: flex;
  gap: 6px;
  margin: 10px 0 12px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: rgba(148,163,184,.12);
  border: 1px solid rgba(148,163,184,.18);
}

.eshopInfoTabBtn{
  flex: 1;
  padding: 9px 10px;

  border: 0;
  border-radius: var(--radius-pill);

  cursor: pointer;
  background: transparent;
  color: var(--text);

  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;

  transition: background .2s ease, color .2s ease, transform .15s ease;
}

.eshopInfoTabBtn:hover{
  background: rgba(59,130,246,.10);
}

.eshopInfoTabBtn.active{
  background: var(--mb-bg);
  color: #f9fafb;
}

.eshopInfoTabBtn:active{
  transform: translateY(1px);
}

.eshopInfoTabBtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.30);
}

/* Content */
.eshopInfoTab{ display: none; }
.eshopInfoTab.active{ display: block; }

/* ====== PICKUP TAB ====== */
#eshopInfoTabPickup{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Select */
#eshopRegionSelect{
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;

  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.30);
  background: var(--surface-2);
  color: var(--text);

  font-size: 13px;
  font-weight: 700;

  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

#eshopRegionSelect:focus{
  outline: none;
  border-color: rgba(59,130,246,.65);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

/* Map container */
#eshopPickupMap{
  width: 100% !important;
  height: 260px !important;

  border-radius: 14px;
  overflow: hidden;

  border: 1px solid rgba(148,163,184,.26);
  background: rgba(148,163,184,.18);

  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  flex: 0 0 260px;
}

#eshopPickupMap.leaflet-container{
  width: 100% !important;
  height: 100% !important;
}

/* Pickup list */
#eshopPickupList{
  max-height: 160px;
  overflow-y: auto;

  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.26);
  background: var(--surface-2);

  padding: 6px;
  font-size: 13px;
}

/* scrollbar (webkit) */
#eshopPickupList::-webkit-scrollbar{ width: 10px; }
#eshopPickupList::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
#eshopPickupList::-webkit-scrollbar-thumb:hover{
  background: rgba(148,163,184,.55);
  border: 2px solid transparent;
  background-clip: padding-box;
}

#eshopPickupList .pickupItem{
  padding: 9px 10px;
  border-radius: 12px;

  color: var(--text);
  cursor: pointer;

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

  transition: background .18s ease, transform .15s ease, box-shadow .2s ease;
}

#eshopPickupList .pickupItem + .pickupItem{
  margin-top: 6px;
}

/* hover */
#eshopPickupList .pickupItem:not(.active):hover{
  background: rgba(59,130,246,.10);
}

/* active */
#eshopPickupList .pickupItem.active{
  background: rgba(59,130,246,.16);
  box-shadow: 0 8px 18px rgba(59,130,246,.12);
  position: relative;
  font-weight: 900;
}

#eshopPickupList .pickupItem.active::before{
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: var(--accent);
}

/* button -> contact tab */
#eshopGoToContact{
  margin-top: 8px;
  padding: 9px 12px;

  font-size: 13px;
  font-weight: 900;

  border-radius: var(--radius-pill);
  border: 1px solid rgba(148,163,184,.30);
  background: var(--surface-2);
  color: var(--text);

  cursor: pointer;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}

#eshopGoToContact:hover{
  background: rgba(59,130,246,.10);
}

#eshopGoToContact:active{
  transform: translateY(1px);
}

#eshopGoToContact:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.20);
}

/* ====== CONTACT TAB ====== */
#eshopContactInfo p{
  margin: 6px 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.35;
}

#eshopContactInfo p strong{
  font-size: 14px;
  font-weight: 900;
}

#eshopCallNowLink{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 10px;
  padding: 10px 16px;

  border-radius: var(--radius-pill);
  background: var(--mb-bg);
  color: #f9fafb;
  text-decoration: none;

  font-size: 13px;
  font-weight: 900;

  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);

  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
}

#eshopCallNowLink:hover{
  filter: brightness(1.08);
  box-shadow: 0 14px 26px rgba(0,0,0,.22);
}

#eshopCallNowLink:active{
  transform: translateY(1px);
}

#eshopCallNowLink:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.25), 0 14px 26px rgba(0,0,0,.22);
}

/* ====== MOBILE ====== */
@media (max-width: 576px){
  #eshopMessageBar{
    padding: 8px 10px;
    font-size: 12px;
    gap: 8px;
    flex-wrap: wrap;
  }

  #eshopMessageText{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }


  #eshopExtraButton{
    width: 100%;
    justify-content: center;
  }

  #eshopInfoModal{
    width: 96vw;
    padding: 14px 14px 16px;
    max-height: 82vh;
  }

  #eshopPickupMap{
    height: 220px !important;
    flex: 0 0 220px;
  }

  #eshopPickupList{
    max-height: 140px;
  }
}

/* ====== Reduced motion ====== */
@media (prefers-reduced-motion: reduce){
  #eshopMessageBar,
  #eshopExtraButton,
  #eshopInfoModalClose,
  .eshopInfoTabBtn,
  #eshopRegionSelect,
  #eshopPickupList .pickupItem,
  #eshopGoToContact,
  #eshopCallNowLink{
    transition: none !important;
  }
}



/* ===== Message (text above, logo below) ===== */
#eshopMessageText .eshopMsgStack{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

#eshopMessageText .eshopMsgTextLine{
  max-width: min(720px, 70vw);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /* 2 lines */
  overflow: hidden;
}

#eshopMessageText .eshopMsgLogoBelow{
  height: 36px;            /* <-- ΕΔΩ μεγαλώνεις την εικόνα */
  width: auto;
  object-fit: contain;
  display: block;
}

/* mobile: λίγο πιο άνετο */
@media (max-width: 576px){
  #eshopMessageText .eshopMsgTextLine{
    max-width: 92vw;
    -webkit-line-clamp: 3;
  }
  #eshopMessageText .eshopMsgLogoBelow{
    height: 44px;          /* mobile logo size */
  }
}




/* ============================================================
   CATEGORY LABEL RENAMES (GR/EN/RU) - SAFE VERSION
   - Renames ONLY specific main category IDs (does NOT blank others)
   - Works for:
     1) Main categories bar (#mainCategories)
     2) All categories overlay (#allCategoriesOverlay) main list
   Requires: <html lang="gr|en|ru"> to be present
   ============================================================ */


/* =========================
   1) MAIN CATEGORIES BAR
   ========================= */

/* Hide original label ONLY for these ids */
#mainCategories .main-cat-btn:is(
  [data-category-id="1434"],
  [data-category-id="1436"],
  [data-category-id="1433"],
  [data-category-id="1431"],
  [data-category-id="1430"],
  [data-category-id="1437"],
  [data-category-id="1429"],
  [data-category-id="1438"],
  [data-category-id="1439"],
  [data-category-id="1432"],
  [data-category-id="1435"]
) .main-cat-label{
  font-size: 0 !important;
}

/* Style for the injected text ONLY for these ids */
#mainCategories .main-cat-btn:is(
  [data-category-id="1434"],
  [data-category-id="1436"],
  [data-category-id="1433"],
  [data-category-id="1431"],
  [data-category-id="1430"],
  [data-category-id="1437"],
  [data-category-id="1429"],
  [data-category-id="1438"],
  [data-category-id="1439"],
  [data-category-id="1432"],
  [data-category-id="1435"]
) .main-cat-label::before{
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  display: inline-block !important;
  white-space: normal !important;
}

/* ---- 1434 AUTO-MOTO-BIKE ---- */
html[lang="gr"] #mainCategories .main-cat-btn[data-category-id="1434"] .main-cat-label::before{ content:"Αυτοκίνητο • Μηχανή • Ποδήλατο" !important; }
html[lang="en"] #mainCategories .main-cat-btn[data-category-id="1434"] .main-cat-label::before{ content:"Auto • Moto • Bike" !important; }
html[lang="ru"] #mainCategories .main-cat-btn[data-category-id="1434"] .main-cat-label::before{ content:"Авто • Мото • Вело" !important; }

/* ---- 1436 Uncategorized ---- */
html[lang="gr"] #mainCategories .main-cat-btn[data-category-id="1436"] .main-cat-label::before{ content:"Χωρίς κατηγορία" !important; }
html[lang="en"] #mainCategories .main-cat-btn[data-category-id="1436"] .main-cat-label::before{ content:"No category" !important; }
html[lang="ru"] #mainCategories .main-cat-btn[data-category-id="1436"] .main-cat-label::before{ content:"Без категории" !important; }

/* ---- 1433 ΕΙΔΗ ΑΛΙΕΙΑΣ ---- */
html[lang="gr"] #mainCategories .main-cat-btn[data-category-id="1433"] .main-cat-label::before{ content:"Αλιεία & Θαλάσσια" !important; }
html[lang="en"] #mainCategories .main-cat-btn[data-category-id="1433"] .main-cat-label::before{ content:"Fishing & Marine" !important; }
html[lang="ru"] #mainCategories .main-cat-btn[data-category-id="1433"] .main-cat-label::before{ content:"Рыбалка и морские товары" !important; }

/* ---- 1431 ΕΙΔΗ ΤΕΧΝΟΛΟΓΙΑΣ ---- */
html[lang="gr"] #mainCategories .main-cat-btn[data-category-id="1431"] .main-cat-label::before{ content:"Τεχνολογία & Gadgets" !important; }
html[lang="en"] #mainCategories .main-cat-btn[data-category-id="1431"] .main-cat-label::before{ content:"Tech & Gadgets" !important; }
html[lang="ru"] #mainCategories .main-cat-btn[data-category-id="1431"] .main-cat-label::before{ content:"Технологии и гаджеты" !important; }

/* ---- 1430 ΕΠΟΧΙΑΚΑ - ΤΟΥΡΙΣΤΙΚΑ & HOBBY ---- */
html[lang="gr"] #mainCategories .main-cat-btn[data-category-id="1430"] .main-cat-label::before{ content:"Εποχιακά • Τουριστικά • Χόμπι" !important; }
html[lang="en"] #mainCategories .main-cat-btn[data-category-id="1430"] .main-cat-label::before{ content:"Seasonal • Travel • Hobby" !important; }
html[lang="ru"] #mainCategories .main-cat-btn[data-category-id="1430"] .main-cat-label::before{ content:"Сезонные • Туризм • Хобби" !important; }

/* ---- 1437 ΕΡΓΑΛΕΙΑ & ΕΠΑΓΓΕΛΜΑΤΙΚΟΣ ΕΞΟΠΛΙΣΜΟΣ ---- */
html[lang="gr"] #mainCategories .main-cat-btn[data-category-id="1437"] .main-cat-label::before{ content:"Εργαλεία & Επαγγελματικός Εξοπλισμός" !important; }
html[lang="en"] #mainCategories .main-cat-btn[data-category-id="1437"] .main-cat-label::before{ content:"Tools & Pro Equipment" !important; }
html[lang="ru"] #mainCategories .main-cat-btn[data-category-id="1437"] .main-cat-label::before{ content:"Инструменты и проф. оборудование" !important; }

/* ---- 1429 ΠΑΙΧΝΙΔΙΑ ---- */
html[lang="gr"] #mainCategories .main-cat-btn[data-category-id="1429"] .main-cat-label::before{ content:"Παιχνίδια" !important; }
html[lang="en"] #mainCategories .main-cat-btn[data-category-id="1429"] .main-cat-label::before{ content:"Toys" !important; }
html[lang="ru"] #mainCategories .main-cat-btn[data-category-id="1429"] .main-cat-label::before{ content:"Игрушки" !important; }

/* ---- 1438 ΡΟΛΟΓΙΑ ---- */
html[lang="gr"] #mainCategories .main-cat-btn[data-category-id="1438"] .main-cat-label::before{ content:"Ρολόγια & Αξεσουάρ" !important; }
html[lang="en"] #mainCategories .main-cat-btn[data-category-id="1438"] .main-cat-label::before{ content:"Watches & Accessories" !important; }
html[lang="ru"] #mainCategories .main-cat-btn[data-category-id="1438"] .main-cat-label::before{ content:"Часы и аксессуары" !important; }

/* ---- 1439 ΣΠΙΤΙ & ΚΑΤΟΙΚΙΔΙΟ ---- */
html[lang="gr"] #mainCategories .main-cat-btn[data-category-id="1439"] .main-cat-label::before{ content:"Σπίτι • Κήπος • Κατοικίδια" !important; }
html[lang="en"] #mainCategories .main-cat-btn[data-category-id="1439"] .main-cat-label::before{ content:"Home • Garden • Pets" !important; }
html[lang="ru"] #mainCategories .main-cat-btn[data-category-id="1439"] .main-cat-label::before{ content:"Дом • Сад • Питомцы" !important; }

/* ---- 1432 ΥΓΕΙΑ - ΟΜΟΡΦΙΑ & Fitness ---- */
html[lang="gr"] #mainCategories .main-cat-btn[data-category-id="1432"] .main-cat-label::before{ content:"Υγεία • Ομορφιά • Fitness" !important; }
html[lang="en"] #mainCategories .main-cat-btn[data-category-id="1432"] .main-cat-label::before{ content:"Health • Beauty • Fitness" !important; }
html[lang="ru"] #mainCategories .main-cat-btn[data-category-id="1432"] .main-cat-label::before{ content:"Здоровье • Красота • Фитнес" !important; }

/* ---- 1435 ΦΩΤΙΣΜΟΣ & ΕΝΕΡΓΕΙΑ ---- */
html[lang="gr"] #mainCategories .main-cat-btn[data-category-id="1435"] .main-cat-label::before{ content:"Φωτισμός & Ενέργεια" !important; }
html[lang="en"] #mainCategories .main-cat-btn[data-category-id="1435"] .main-cat-label::before{ content:"Lighting & Energy" !important; }
html[lang="ru"] #mainCategories .main-cat-btn[data-category-id="1435"] .main-cat-label::before{ content:"Освещение и энергия" !important; }



/* =========================
   2) ALL CATEGORIES OVERLAY (MAIN LIST ONLY)
   ========================= */

/* Hide original name ONLY for these ids */
#allCategoriesOverlay .all-cat-group:is(
  [data-id="1434"],
  [data-id="1436"],
  [data-id="1433"],
  [data-id="1431"],
  [data-id="1430"],
  [data-id="1437"],
  [data-id="1429"],
  [data-id="1438"],
  [data-id="1439"],
  [data-id="1432"],
  [data-id="1435"]
) .all-cat-main-name{
  font-size: 0 !important;
}

/* Style injected name ONLY for these ids */
#allCategoriesOverlay .all-cat-group:is(
  [data-id="1434"],
  [data-id="1436"],
  [data-id="1433"],
  [data-id="1431"],
  [data-id="1430"],
  [data-id="1437"],
  [data-id="1429"],
  [data-id="1438"],
  [data-id="1439"],
  [data-id="1432"],
  [data-id="1435"]
) .all-cat-main-name::before{
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  display: inline-block !important;
  white-space: normal !important;
}

/* Same strings as main bar */

/* 1434 */
html[lang="gr"] #allCategoriesOverlay .all-cat-group[data-id="1434"] .all-cat-main-name::before{ content:"Αυτοκίνητο • Μηχανή • Ποδήλατο" !important; }
html[lang="en"] #allCategoriesOverlay .all-cat-group[data-id="1434"] .all-cat-main-name::before{ content:"Auto • Moto • Bike" !important; }
html[lang="ru"] #allCategoriesOverlay .all-cat-group[data-id="1434"] .all-cat-main-name::before{ content:"Авто • Мото • Вело" !important; }

/* 1436 */
html[lang="gr"] #allCategoriesOverlay .all-cat-group[data-id="1436"] .all-cat-main-name::before{ content:"Χωρίς κατηγορία" !important; }
html[lang="en"] #allCategoriesOverlay .all-cat-group[data-id="1436"] .all-cat-main-name::before{ content:"No category" !important; }
html[lang="ru"] #allCategoriesOverlay .all-cat-group[data-id="1436"] .all-cat-main-name::before{ content:"Без категории" !important; }

/* 1433 */
html[lang="gr"] #allCategoriesOverlay .all-cat-group[data-id="1433"] .all-cat-main-name::before{ content:"Αλιεία & Θαλάσσια" !important; }
html[lang="en"] #allCategoriesOverlay .all-cat-group[data-id="1433"] .all-cat-main-name::before{ content:"Fishing & Marine" !important; }
html[lang="ru"] #allCategoriesOverlay .all-cat-group[data-id="1433"] .all-cat-main-name::before{ content:"Рыбалка и морские товары" !important; }

/* 1431 */
html[lang="gr"] #allCategoriesOverlay .all-cat-group[data-id="1431"] .all-cat-main-name::before{ content:"Τεχνολογία & Gadgets" !important; }
html[lang="en"] #allCategoriesOverlay .all-cat-group[data-id="1431"] .all-cat-main-name::before{ content:"Tech & Gadgets" !important; }
html[lang="ru"] #allCategoriesOverlay .all-cat-group[data-id="1431"] .all-cat-main-name::before{ content:"Технологии и гаджеты" !important; }

/* 1430 */
html[lang="gr"] #allCategoriesOverlay .all-cat-group[data-id="1430"] .all-cat-main-name::before{ content:"Εποχιακά • Τουριστικά • Χόμπι" !important; }
html[lang="en"] #allCategoriesOverlay .all-cat-group[data-id="1430"] .all-cat-main-name::before{ content:"Seasonal • Travel • Hobby" !important; }
html[lang="ru"] #allCategoriesOverlay .all-cat-group[data-id="1430"] .all-cat-main-name::before{ content:"Сезонные • Туризм • Хобби" !important; }

/* 1437 */
html[lang="gr"] #allCategoriesOverlay .all-cat-group[data-id="1437"] .all-cat-main-name::before{ content:"Εργαλεία & Επαγγελματικός Εξοπλισμός" !important; }
html[lang="en"] #allCategoriesOverlay .all-cat-group[data-id="1437"] .all-cat-main-name::before{ content:"Tools & Pro Equipment" !important; }
html[lang="ru"] #allCategoriesOverlay .all-cat-group[data-id="1437"] .all-cat-main-name::before{ content:"Инструменты и проф. оборудование" !important; }

/* 1429 */
html[lang="gr"] #allCategoriesOverlay .all-cat-group[data-id="1429"] .all-cat-main-name::before{ content:"Παιχνίδια" !important; }
html[lang="en"] #allCategoriesOverlay .all-cat-group[data-id="1429"] .all-cat-main-name::before{ content:"Toys" !important; }
html[lang="ru"] #allCategoriesOverlay .all-cat-group[data-id="1429"] .all-cat-main-name::before{ content:"Игрушки" !important; }

/* 1438 */
html[lang="gr"] #allCategoriesOverlay .all-cat-group[data-id="1438"] .all-cat-main-name::before{ content:"Ρολόγια & Αξεσουάρ" !important; }
html[lang="en"] #allCategoriesOverlay .all-cat-group[data-id="1438"] .all-cat-main-name::before{ content:"Watches & Accessories" !important; }
html[lang="ru"] #allCategoriesOverlay .all-cat-group[data-id="1438"] .all-cat-main-name::before{ content:"Часы и аксессуары" !important; }

/* 1439 */
html[lang="gr"] #allCategoriesOverlay .all-cat-group[data-id="1439"] .all-cat-main-name::before{ content:"Σπίτι • Κήπος • Κατοικίδια" !important; }
html[lang="en"] #allCategoriesOverlay .all-cat-group[data-id="1439"] .all-cat-main-name::before{ content:"Home • Garden • Pets" !important; }
html[lang="ru"] #allCategoriesOverlay .all-cat-group[data-id="1439"] .all-cat-main-name::before{ content:"Дом • Сад • Питомцы" !important; }

/* 1432 */
html[lang="gr"] #allCategoriesOverlay .all-cat-group[data-id="1432"] .all-cat-main-name::before{ content:"Υγεία • Ομορφιά • Fitness" !important; }
html[lang="en"] #allCategoriesOverlay .all-cat-group[data-id="1432"] .all-cat-main-name::before{ content:"Health • Beauty • Fitness" !important; }
html[lang="ru"] #allCategoriesOverlay .all-cat-group[data-id="1432"] .all-cat-main-name::before{ content:"Здоровье • Красота • Фитнес" !important; }

/* 1435 */
html[lang="gr"] #allCategoriesOverlay .all-cat-group[data-id="1435"] .all-cat-main-name::before{ content:"Φωτισμός & Ενέργεια" !important; }
html[lang="en"] #allCategoriesOverlay .all-cat-group[data-id="1435"] .all-cat-main-name::before{ content:"Lighting & Energy" !important; }
html[lang="ru"] #allCategoriesOverlay .all-cat-group[data-id="1435"] .all-cat-main-name::before{ content:"Освещение и энергия" !important; }