/* ePrice.gr — design system: χρωματική ταυτότητα βασισμένη στο eshop.gr (έντονο
   κίτρινο + μαύρο σε λευκό φόντο). --primary = μαύρο/ανθρακί (χρησιμοποιείται ως
   κείμενο/σύνδεσμοι/σκούρα φόντα), --accent = έντονο κίτρινο (CTA κουμπιά, τιμές,
   μπάρα κατηγοριών, badges) — ποτέ κίτρινο πάνω σε λευκό ως κείμενο (αναγνωσιμότητα),
   γι' αυτό το κείμενο πάνω σε accent είναι πάντα --ink, όχι λευκό. */

:root {
  --primary: #161616;
  --primary-dark: #000000;
  --primary-light: #eeeeee;
  --accent: #f7c600;
  --accent-dark: #8a6a00;
  --accent-light: #fff6d6;
  --yellow: #f7c600;
  --ink: #141414;
  --ink-soft: #52525b;
  --border: #e4e7ec;
  --bg: #f6f8fb;
  --white: #ffffff;
  --green: #12a150;
  --red: #d92d20;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .12);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Ασφαλιστική δικλείδα ενάντια σε μικρά, δύσκολα να εντοπιστούν οριζόντια overflow
   (π.χ. από απόλυτα τοποθετημένα στοιχεία) — δεν επηρεάζει το position:sticky του header
   επειδή εφαρμόζεται μόνο στο root element, όχι στο body. */
html { overflow-x: hidden; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }

.container {
  max-width: 1900px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--primary-dark);
  color: #cfcfcf;
  font-size: .82rem;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; height: 34px; }
.topbar a { color: #cfcfcf; }
.topbar a:hover { color: var(--accent); }
.topbar-links { display: flex; gap: 16px; }

/* ---------- Header ---------- */
.header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.header .container {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 76px;
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 34px; width: auto; }

.search-form {
  flex: 1;
  position: relative;
}
.search-box {
  display: flex;
  align-items: center;
  border: 2px solid var(--primary);
  border-radius: 999px;
  overflow: hidden;
  background: var(--white);
}
.search-box input[type="search"] {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 18px;
  font-size: .96rem;
  color: var(--ink);
}
.search-box button {
  background: var(--accent);
  border: none;
  color: var(--ink);
  padding: 0 22px;
  height: 44px;
  font-weight: 700;
  transition: background .15s;
}
.search-box button:hover { background: var(--accent-dark); color: var(--white); }
.search-box .barcode-btn {
  background: var(--white);
  color: var(--ink-soft);
  padding: 0 14px;
  border-left: 1px solid var(--border);
}
.search-box .barcode-btn:hover { background: var(--bg); color: var(--ink); }

/* Σε κινητό, το barcode scan είναι η κύρια ενέργεια: μεγάλο, πρώτο εικονίδιο πριν το πεδίο κειμένου
   (όχι μικρό βοηθητικό κουμπί στην άκρη), για να το βλέπει/πατάει αμέσως ο χρήστης χωρίς να ψάχνει. */
@media (max-width: 640px) {
  .search-box { flex-wrap: nowrap; }
  .search-box .barcode-btn {
    order: -1;
    background: var(--accent);
    color: var(--ink);
    padding: 0 18px;
    border-left: none;
    border-right: 1px solid var(--primary);
    height: 44px;
  }
  .search-box .barcode-btn svg { width: 26px; height: 26px; }
  .search-box .barcode-btn:hover { background: var(--accent-dark); }
}

/* "Front page" barcode-scan banner — μόνο σε κινητό, πάνω από το hero, σαν κύρια ενέργεια της
   αρχικής. Κρυμμένο by default (desktop) και μέχρι να επιβεβαιωθεί κάμερα από το JS. */
.mobile-scan-banner { display: none; }
@media (max-width: 640px) {
  .mobile-scan-banner {
    display: flex; align-items: center; gap: 14px; width: 100%;
    background: var(--primary-dark); color: var(--white); border: none;
    padding: 20px 18px; margin-bottom: 2px; cursor: pointer; text-align: left;
  }
  .mobile-scan-banner[hidden] { display: none; }
  .mobile-scan-banner svg { flex-shrink: 0; color: var(--accent); }
  .mobile-scan-banner span { display: flex; flex-direction: column; gap: 2px; }
  .mobile-scan-banner strong { font-size: 1.05rem; }
  .mobile-scan-banner small { color: rgba(255,255,255,.7); font-size: .82rem; }
}

/* ---------- Barcode scanner overlay ---------- */
.barcode-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, .82);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
/* Χωρίς αυτό, το [hidden] attribute δεν θα δούλευε: το display:flex πιο πάνω
   (author stylesheet) υπερισχύει πάντα του browser default [hidden]{display:none}
   (UA stylesheet), ανεξαρτήτως specificity — πρέπει να δηλωθεί ρητά εδώ. */
.barcode-overlay[hidden] { display: none; }
.barcode-modal {
  position: relative;
  width: min(480px, 100%);
  background: var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}
.barcode-modal video { width: 100%; height: 360px; object-fit: cover; display: block; background: #000; }
.barcode-hint { text-align: center; color: var(--white); padding: 14px; margin: 0; font-size: .88rem; }
.barcode-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .15); color: var(--white); border: none;
  font-size: 1rem;
}
.barcode-close:hover { background: rgba(255, 255, 255, .28); }

.autocomplete-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-height: 420px;
  overflow-y: auto;
  display: none;
  z-index: 50;
}
.autocomplete-results.is-open { display: block; }
.autocomplete-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover, .autocomplete-item.is-active { background: var(--primary-light); }
.autocomplete-item img {
  width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: var(--bg);
}
.autocomplete-item .ac-name { flex: 1; font-size: .9rem; color: var(--ink); }
.autocomplete-item .ac-price { font-weight: 700; color: var(--accent-dark); font-size: .88rem; }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-icon {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: .9rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--white);
  white-space: nowrap;
}
.btn-icon:hover { background: var(--primary-light); }
.btn-icon.primary { background: var(--primary); color: var(--white); border-color: var(--primary); }
.btn-icon.primary:hover { background: var(--primary-dark); }

/* ---------- Category nav / megamenu ---------- */
.categorynav {
  background: var(--accent);
  color: var(--ink);
  position: relative;
  z-index: 30;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
/* Κεντραρισμένο μενού, ΧΩΡΙΣ οριζόντιο scroll ποτέ — αν δεν χωράνε όλες οι κατηγορίες
   σε μία γραμμή, τυλίγονται (wrap) σε δεύτερη γραμμή αντί να κρύβονται πίσω από scroll
   που κανείς επισκέπτης δεν θα ανακαλύψει. */
.categorynav .container { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; max-width: 100%; }
.categorynav-item { position: static; }
.categorynav-item > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 13px 15px;
  font-size: .87rem;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  color: var(--ink);
  transition: background .15s, border-color .15s;
}
.categorynav-item > a:hover { background: rgba(0,0,0,.06); border-bottom-color: var(--primary); }
.categorynav-item.is-open > a { background: rgba(0,0,0,.08); border-bottom-color: var(--primary); }
.categorynav-item .caret { font-size: .62rem; opacity: .75; transition: transform .15s; }
.categorynav-item:hover .caret, .categorynav-item.is-open .caret { transform: rotate(180deg); opacity: 1; }

/* Το panel τοποθετείται σχετικά με ολόκληρη τη μπάρα .categorynav (όχι με το
   μεμονωμένο item), κεντραρισμένο και ΠΑΝΤΑ στο πλήρες πλάτος του container —
   ανεξάρτητα ποιο item το άνοιξε. Έτσι δεν χρειάζεται ποτέ δικό του οριζόντιο
   scroll· αν το περιεχόμενο είναι πολύ, τυλίγει σε παραπάνω σειρές (grid)
   και κυλάει μόνο κάθετα. */
.megamenu-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(1900px, calc(100vw - 40px));
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 20px 40px -8px rgba(16, 24, 40, .18), 0 4px 12px rgba(16, 24, 40, .08);
  padding: 24px 32px 20px;
  border-top: 3px solid var(--accent);
  margin-top: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
}
.categorynav-item.has-mega:hover .megamenu-panel,
.categorynav-item.has-mega.is-open .megamenu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* CSS multi-column (όχι grid): κάθε στήλη γεμίζει κάθετα ανεξάρτητα από τις
   άλλες (σαν εφημερίδα) — καμία "ευθυγράμμιση σειρών" που να αφήνει κενά κάτω
   από κοντές στήλες (αυτό έκανε το grid). Το πλήθος των στηλών υπολογίζεται
   αυτόματα από το πραγματικό διαθέσιμο πλάτος (το panel είναι πλέον πάντα στο
   πλήρες πλάτος του container), οπότε δεν ξεχειλίζει ποτέ οριζόντια. */
.megamenu-columns {
  column-width: 190px;
  column-gap: 30px;
  max-height: 65vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.megamenu-col {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  min-width: 0;
  margin-bottom: 20px;
}
.megamenu-col-title {
  display: block;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--primary);
  padding: 4px 0 8px;
  border-bottom: 2px solid var(--primary-light);
  margin-bottom: 6px;
  transition: color .15s;
}
.megamenu-col-title:hover { color: var(--accent-dark); }
.megamenu-subgroup { margin-bottom: 8px; }
.megamenu-sub-title {
  display: block;
  padding: 4px 0;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink);
  transition: color .15s;
}
.megamenu-sub-title:hover { color: var(--accent-dark); }
.megamenu-col ul { margin: 0 0 0 4px; padding: 0; list-style: none; }
.megamenu-col li a {
  display: block;
  padding: 4px 0 4px 10px;
  font-size: .82rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 2px solid var(--border);
  transition: color .15s, border-color .15s, padding-left .15s;
}
.megamenu-col li a:hover { color: var(--accent-dark); border-color: var(--accent); padding-left: 13px; }
.megamenu-viewall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: .82rem;
  font-weight: 700;
  color: var(--primary);
  transition: color .15s;
}
.megamenu-viewall:hover { color: var(--accent-dark); }
.megamenu-viewall::after { content: "→"; transition: transform .15s; }
.megamenu-viewall:hover::after { transform: translateX(3px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .94rem;
  border: none;
  transition: background .15s, box-shadow .15s;
}
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover { background: var(--accent-dark); color: var(--white); }
.btn-secondary { background: var(--primary); color: var(--white); }
.btn-secondary:hover { background: var(--primary-dark); }
.btn.is-disabled { opacity: .5; cursor: not-allowed; }
.variant-select { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; font-size: .85rem; max-width: 180px; }
.variant-select-error { color: var(--red); font-size: .78rem; margin-top: 4px; }
.btn-outline { background: var(--white); color: var(--primary); border: 1.5px solid var(--primary); }
.btn-outline:hover { background: var(--primary-light); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: .82rem; }

/* ---------- Hero slider ---------- */
.hero-slider { position: relative; margin-bottom: 56px; }
.hero-slides { position: relative; min-height: 560px; }
.hero {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  padding: 64px 60px;
  display: flex;
  align-items: center;
}
.hero-copy { flex: 1; min-width: 0; }
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  filter: blur(6px);
}
.hero::before {
  top: -180px; right: -140px; width: 480px; height: 480px;
  background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
  opacity: .16;
}
.hero::after {
  bottom: -200px; right: 180px; width: 380px; height: 380px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  opacity: .18;
}
.hero.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease;
}
.hero.slide.is-active { opacity: 1; visibility: visible; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  background: var(--accent-light);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.hero h1 {
  font-size: 2.75rem;
  line-height: 1.15;
  margin: 0 0 16px;
  font-weight: 800;
  max-width: 680px;
  letter-spacing: -.015em;
  color: var(--ink);
}
/* "Μαρκαρισμένη" λέξη-κλειδί σαν highlighter πάνω σε κίτρινο, όχι κίτρινο κείμενο
   (θα ήταν δυσανάγνωστο πάνω σε λευκό φόντο). */
.hero h1 mark {
  background: linear-gradient(180deg, transparent 58%, var(--accent) 58%);
  color: var(--ink);
  padding: 0 1px;
}
.hero p { font-size: 1.08rem; line-height: 1.6; color: var(--ink-soft); max-width: 560px; margin: 0 0 32px; }
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }

.hero-stats { display: flex; gap: 36px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--border); max-width: 680px; }
.hero-stat { display: flex; flex-direction: column; gap: 3px; }
.hero-stat strong { font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.hero-stat span { font-size: .8rem; color: var(--ink-soft); }
.hero-trust-note { margin-top: 16px; font-size: .83rem; color: var(--ink-soft); max-width: 520px; }

/* Διακοσμητικό visual δεξιά — "στοίβα" από mockup κάρτες προϊόντων/τιμών, ώστε το
   hero να μη μένει άδειο δεξιά σε φαρδιές οθόνες. Μένει σταθερό ενώ αλλάζει το
   κείμενο ανά slide (δεν είναι μέρος του slide-fade, ίδιο και στα 3 slides). */
.hero-visual { position: absolute; top: 50%; right: 76px; transform: translateY(-50%); width: 300px; height: 300px; z-index: 4; pointer-events: none; display: none; }
@media (min-width: 1180px) { .hero-visual { display: block; } }
.hero-mockcard {
  position: absolute;
  width: 186px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 40px -10px rgba(16, 24, 40, .2);
  padding: 14px;
}
.hero-mockcard .mc-thumb { height: 62px; background: var(--bg); border-radius: 8px; margin-bottom: 10px; }
.hero-mockcard .mc-line { height: 8px; width: 70%; background: var(--border); border-radius: 4px; margin-bottom: 10px; }
.hero-mockcard .mc-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.hero-mockcard .mc-price { font-weight: 800; color: var(--accent-dark); font-size: 1.05rem; }
.hero-mockcard .mc-badge { background: #e6f9ee; color: var(--green); font-size: .66rem; font-weight: 700; padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
.hero-mockcard .mc-check { font-size: .66rem; font-weight: 700; color: var(--green); white-space: nowrap; }
.hero-mockcard.card-a { top: 6px; left: 84px; transform: rotate(-6deg); z-index: 2; }
.hero-mockcard.card-b { top: 158px; left: 0; transform: rotate(4deg); z-index: 1; }
.hero-mock-badge {
  position: absolute;
  top: 118px; left: 34px;
  width: 62px; height: 62px;
  background: var(--accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .82rem; color: var(--ink);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
  z-index: 3;
  transform: rotate(-8deg);
}

.hero-dots {
  position: absolute;
  bottom: 22px;
  left: 60px;
  display: flex;
  gap: 9px;
  z-index: 5;
}
.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s;
}
.hero-dot:hover { background: var(--primary-light); }
.hero-dot.is-active { background: var(--primary); transform: scale(1.3); }

/* ---------- Section headings ---------- */
.section { padding: 8px 0 40px; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}
.section-head h2 { font-size: 1.4rem; margin: 0; }
.section-head a { color: var(--primary); font-weight: 700; font-size: .9rem; }

/* ---------- Category grid ---------- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.category-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 14px;
  text-align: center;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.category-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.category-card .icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent-light); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px; font-size: 1.4rem;
}
.category-card .name { font-weight: 700; font-size: .88rem; }

/* ---------- Product grid & cards ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--primary-light); }
.product-card .thumb {
  height: 230px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  overflow: hidden;
}
.product-card .thumb img { max-height: 214px; max-width: 100%; object-fit: contain; }
.product-card .name {
  font-size: .88rem; font-weight: 600; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.3em; margin-bottom: 8px;
}
.product-card .meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.price { font-size: 1.15rem; font-weight: 800; color: var(--accent-dark); }
.price-from { font-size: .72rem; color: var(--ink-soft); font-weight: 500; display: block; }
.offer-count { font-size: .76rem; color: var(--ink-soft); }

/* ---------- Stars / ratings ---------- */
.stars { display: inline-flex; gap: 1px; }
.star { color: var(--border); font-size: .95rem; }
.star-full { color: var(--yellow); }
.star-half { color: var(--yellow); opacity: .6; }
.rating-count { font-size: .78rem; color: var(--ink-soft); margin-left: 4px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: .84rem; color: var(--ink-soft); margin: 18px 0; }
.breadcrumb a { color: var(--primary); }
.breadcrumb .sep { margin: 0 6px; color: var(--border); }

/* ---------- Category page layout ---------- */
.category-layout { display: grid; grid-template-columns: 240px 1fr; gap: 26px; align-items: start; }
.category-layout > div:last-child { min-width: 0; }
.filter-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.filter-panel + .filter-panel { margin-top: 16px; }
.filter-panel h3 { font-size: .95rem; margin: 16px 0 10px; }
.filter-panel h3:first-child { margin-top: 0; }
.subcat-list { max-height: 220px; overflow-y: auto; }
.filter-panel .subcat-list a { display: block; padding: 6px 0; font-size: .87rem; color: var(--primary); }
.filter-form input[type="number"] {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 8px; font-size: .87rem;
}
.filter-checklist { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; margin-bottom: 16px; }
.filter-checklist label { display: flex; align-items: center; gap: 8px; font-size: .87rem; cursor: pointer; }

.price-slider { margin-bottom: 18px; }
.price-slider-track {
  position: relative; height: 32px; --fill-start: 0%; --fill-end: 100%;
}
.price-slider-track::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 4px; transform: translateY(-50%);
  border-radius: 4px; background: var(--border);
}
.price-slider-track::after {
  content: ""; position: absolute; top: 50%; height: 4px; transform: translateY(-50%);
  border-radius: 4px; background: var(--accent);
  left: var(--fill-start); right: calc(100% - var(--fill-end));
}
.price-slider-track input[type="range"] {
  position: absolute; top: 0; left: 0; width: 100%; height: 32px; margin: 0;
  background: none; pointer-events: none; appearance: none; -webkit-appearance: none;
}
.price-slider-track input[type="range"]::-webkit-slider-runnable-track { background: none; }
.price-slider-track input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto; appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%; background: var(--primary);
  border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--border); cursor: pointer; margin-top: 7px;
}
.price-slider-track input[type="range"]::-moz-range-track { background: none; border: none; }
.price-slider-track input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--primary);
  border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--border); cursor: pointer;
}
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 16px;
}
.toolbar .count { font-size: .87rem; color: var(--ink-soft); }
.sort-select { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; }

/* ---------- Product detail page ---------- */
.product-detail { display: grid; grid-template-columns: 380px 1fr; gap: 32px; margin-bottom: 32px; }
.product-gallery {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; display: flex; align-items: center; justify-content: center; height: 340px;
}
.product-gallery img { max-height: 290px; object-fit: contain; }
.product-info h1 { font-size: 1.7rem; margin: 0 0 10px; }
.product-badges { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.badge-blue { background: var(--primary-light); color: var(--primary); }
.badge-orange { background: var(--accent-light); color: var(--accent-dark); }
.badge-green { background: #e6f9ee; color: var(--green); }
.lowest-price-box {
  background: var(--accent-light);
  border: 1px solid #ffe28a;
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 18px;
}
.lowest-price-box .price { font-size: 2rem; }
.lowest-price-box .label { font-size: .82rem; color: var(--ink-soft); }

/* ---------- Offers comparison table ---------- */
.table-scroll { overflow-x: auto; max-width: 100%; }
.table-scroll table { min-width: 560px; }
.offers-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.offers-table th, .offers-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: .9rem; }
.offers-table th { background: var(--bg); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.offers-table tr:last-child td { border-bottom: none; }
.offers-table .merchant-name { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.merchant-logo { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: var(--bg); flex-shrink: 0; }
.offers-table .price { font-size: 1.05rem; }
.availability-in { color: var(--green); font-weight: 600; font-size: .82rem; }
.availability-out { color: var(--red); font-weight: 600; font-size: .82rem; }

/* ---------- Price history chart ---------- */
.price-history { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin: 28px 0; }
.price-history h2 { font-size: 1.1rem; margin: 0 0 14px; }
.chart-empty { color: var(--ink-soft); font-size: .88rem; }

/* ---------- Reviews ---------- */
.reviews-section { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 28px; }
.review-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.review-summary .big-score { font-size: 2.4rem; font-weight: 800; color: var(--primary); }
.review { padding: 14px 0; border-bottom: 1px solid var(--border); }
.review:last-child { border-bottom: none; }
.review .review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: .85rem; }
.review .review-author { font-weight: 700; }
.review-form textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; min-height: 80px; margin: 10px 0; }
.rating-picker { display: flex; gap: 4px; font-size: 1.5rem; }
.rating-picker label { cursor: pointer; color: var(--border); }
.rating-picker input { display: none; }
.rating-picker input:checked ~ label,
.rating-picker label:hover, .rating-picker label:hover ~ label { color: var(--yellow); }

/* ---------- Forms / cards / auth ---------- */
.auth-wrap { max-width: 440px; margin: 48px auto; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; }
.auth-wrap h1 { font-size: 1.4rem; margin-top: 0; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.form-hint { font-size: .78rem; color: var(--ink-soft); margin-top: 4px; }
.role-toggle { display: flex; gap: 10px; margin-bottom: 18px; }
.role-toggle label {
  flex: 1; text-align: center; padding: 10px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-weight: 600; font-size: .87rem; cursor: pointer;
}
.role-toggle input { display: none; }
.role-toggle input:checked ~ label, .role-toggle label:has(input:checked) { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.auth-switch { text-align: center; margin-top: 16px; font-size: .88rem; color: var(--ink-soft); }
.auth-switch a { color: var(--primary); font-weight: 700; }

.oauth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: var(--ink-soft); font-size: .8rem; }
.oauth-divider::before, .oauth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.oauth-buttons { display: flex; flex-direction: column; gap: 10px; }
.btn-oauth {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 16px; border-radius: 999px; border: 1px solid var(--border);
  font-weight: 600; font-size: .9rem; color: var(--ink); background: var(--white);
  transition: background .15s, box-shadow .15s;
}
.btn-oauth:hover { box-shadow: var(--shadow); }
.btn-oauth-facebook { background: #1877f2; color: var(--white); border-color: #1877f2; }
.btn-oauth-facebook:hover { background: #145fc4; }

.alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: .88rem; margin-bottom: 16px; }
.alert-error { background: #fef2f2; color: var(--red); border: 1px solid #fecaca; }
.alert-success { background: #ecfdf3; color: var(--green); border: 1px solid #abefc6; }

/* ---------- Merchant panel ---------- */
.panel-layout { display: grid; grid-template-columns: 220px 1fr; gap: 26px; margin: 28px 0 60px; }
.panel-nav { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; align-self: start; }
.panel-nav a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); font-weight: 600; font-size: .88rem; color: var(--ink); }
.panel-nav a:hover { background: var(--bg); }
.panel-nav a.active { background: var(--primary-light); color: var(--primary); }
/* min-width:0 αποτρέπει τα πλατιά tables μέσα στο panel-main από το να "σπρώχνουν" όλο το grid εκτός οθόνης σε mobile. */
.panel-main { min-width: 0; }
.panel-main h1 { font-size: 1.5rem; margin-top: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.stat-card .value { font-size: 1.6rem; font-weight: 800; color: var(--primary); }
.stat-card .label { font-size: .8rem; color: var(--ink-soft); margin-top: 4px; }

.data-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.data-table th, .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: .87rem; text-align: left; }
.data-table th { background: var(--bg); color: var(--ink-soft); font-size: .74rem; text-transform: uppercase; }
.data-table tr:last-child td { border-bottom: none; }

.panel-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 22px; }
.panel-card h2 { font-size: 1.05rem; margin-top: 0; }
.feed-spec { background: var(--bg); border-radius: var(--radius-sm); padding: 14px; font-size: .78rem; overflow-x: auto; }
.status-pill { padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.status-paid, .status-payout_sent, .status-success, .status-completed { background: #ecfdf3; color: var(--green); }
.status-pending, .status-running, .status-shipped { background: #fff7e6; color: #b25e00; }
.status-failed, .status-cancelled, .status-refunded { background: #fef2f2; color: var(--red); }

/* ---------- Checkout ---------- */
.checkout-wrap { max-width: 640px; margin: 32px auto; }
.checkout-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 18px; }
.checkout-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .92rem; }
.checkout-row:last-child { border-bottom: none; }
.checkout-row.total { font-weight: 800; font-size: 1.1rem; color: var(--primary); }
.sandbox-note { background: #fff7e6; border: 1px solid #ffe1a8; color: #8a5300; padding: 12px 16px; border-radius: var(--radius-sm); font-size: .84rem; margin-bottom: 18px; }

/* ---------- SEO brand links (πριν το footer) ---------- */
.brand-links { background: var(--white); border-top: 1px solid var(--border); padding: 32px 0; margin-top: 60px; }
.brand-links h3 { font-size: .95rem; margin: 0 0 16px; color: var(--ink-soft); font-weight: 700; }
.brand-links-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px 20px;
}
.brand-links-grid a {
  font-size: .84rem;
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-links-grid a:hover { color: var(--accent-dark); border-bottom-color: var(--accent); }

/* ---------- Footer ---------- */
.footer { background: var(--primary-dark); color: #c7c7c7; margin-top: 0; padding: 40px 0 24px; }
.footer .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; }
.footer h4 { color: var(--white); font-size: .9rem; margin: 0 0 12px; }
.footer a { display: block; padding: 4px 0; font-size: .84rem; color: #c7c7c7; }
.footer a:hover { color: var(--accent); }
.footer-bottom { text-align: center; font-size: .78rem; color: #8a8a8a; margin-top: 30px; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.empty-state .icon { font-size: 2.4rem; margin-bottom: 10px; }

.pagination { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: .86rem; background: var(--white);
}
.pagination a:hover { border-color: var(--primary); }
.pagination .current { background: var(--primary); color: var(--white); border-color: var(--primary); }
.pagination .page-edge { color: var(--ink-soft); }
.pagination .page-ellipsis { border: none; background: none; padding: 8px 4px; color: var(--ink-soft); }

@media (max-width: 900px) {
  .product-detail, .category-layout, .panel-layout { grid-template-columns: 1fr; }
  .header .container { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 12px; }
  .search-form { order: 3; width: 100%; }
  .hero { padding: 36px 22px 60px; }
  .hero h1 { font-size: 1.9rem; }
  .hero-stats { flex-direction: column; gap: 14px; }
  .hero-dots { left: 22px; }
  .hero-slides { min-height: 640px; }
  .megamenu-panel { width: calc(100vw - 24px); padding: 18px 20px 16px; }
  .megamenu-columns { column-width: 150px; }
  .brand-links-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Στατικές σελίδες κειμένου (όροι, απόρρητο, κ.λπ.) ---------- */
.prose-page { max-width: 860px; margin: 0 auto; padding: 32px 20px 64px; }
.prose-page h1 { margin-bottom: 6px; }
.prose-page .prose-updated { color: var(--ink-soft); font-size: .87rem; margin-bottom: 28px; }
.prose-page h2 { font-size: 1.2rem; margin: 32px 0 10px; }
.prose-page h3 { font-size: 1rem; margin: 20px 0 8px; }
.prose-page p, .prose-page li { color: var(--ink-soft); line-height: 1.7; }
.prose-page ul, .prose-page ol { padding-left: 22px; margin-bottom: 12px; }
.prose-page li { margin-bottom: 6px; }
.prose-page .notice-box {
  background: var(--accent-light); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 24px; font-size: .9rem; color: var(--ink);
}
.prose-page a { color: var(--primary); text-decoration: underline; }

/* ---------- Cookie notice ---------- */
.cookie-notice {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200; max-width: 640px; margin: 0 auto;
  background: var(--primary-dark); color: var(--white); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: 0 12px 32px rgba(0,0,0,.25);
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 0; font-size: .87rem; color: rgba(255,255,255,.85); flex: 1; min-width: 220px; }
.cookie-notice a { color: var(--accent); }
.cookie-notice-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ---------- Λογαριασμός πελάτη ---------- */
.account-section { max-width: 760px; margin: 0 auto; padding: 32px 20px 64px; }
.account-info-box {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; margin-bottom: 24px;
}
.account-danger-box {
  background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius); padding: 20px; margin-top: 32px;
}
.account-danger-box h3 { color: var(--red); margin-bottom: 8px; }

/* ---------- Σελίδα "Γίνε συνεργάτης έμπορος" ---------- */
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.merchant-pitch { max-width: 1100px; margin: 0 auto; padding: 40px 20px 72px; }
.merchant-pitch-hero {
  display: flex; align-items: center; gap: 40px; margin-bottom: 56px; flex-wrap: wrap;
}
.merchant-pitch-copy { flex: 1; min-width: 280px; }
.merchant-pitch-copy .lead { font-size: 1.05rem; color: var(--ink-soft); margin: 14px 0 24px; max-width: 46ch; }
.merchant-pitch-mascot { flex-shrink: 0; text-align: center; max-width: 260px; margin: 0 auto; }
.mascot-bubble {
  position: relative; margin-top: 14px; background: var(--white); border: 1.5px solid var(--primary);
  border-radius: var(--radius); padding: 12px 16px; font-size: .87rem; font-weight: 600; color: var(--ink);
}
.mascot-bubble span { display: block; font-weight: 400; color: var(--ink-soft); margin-top: 4px; }
.mascot-bubble::before {
  content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid var(--primary);
}
.mascot-bubble::after {
  content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--white);
}
.merchant-pitch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 56px; }
.pitch-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
}
.pitch-icon { font-size: 1.8rem; margin-bottom: 10px; }
.pitch-card h3 { font-size: 1rem; margin-bottom: 8px; }
.pitch-card p { font-size: .87rem; color: var(--ink-soft); line-height: 1.6; }
.merchant-pitch-cta {
  text-align: center; background: var(--primary-dark); color: var(--white); border-radius: var(--radius);
  padding: 40px 24px;
}
.merchant-pitch-cta h2 { color: var(--white); margin-bottom: 8px; }
.merchant-pitch-cta p { color: rgba(255,255,255,.75); margin-bottom: 20px; }

@media (max-width: 900px) {
  .merchant-pitch-grid { grid-template-columns: 1fr; }
}