/* =====================================================================
   FDN Compare - style.css
   Desktop / base styles. No media queries live here: everything
   responsive (mobile & tablet) is in css/responsive.css, which is
   always loaded AFTER this file.
   Load order: fonts.css -> style.css -> responsive.css
   ===================================================================== */
/* =====================================================================
   Comparison Shopping Service — frontend
   Brand tokens: FDN Group (teal / ink / paper / coral), TT Norms Pro
   ===================================================================== */
:root{
  --teal:#12B5AC; --teal-deep:#0B807A; --teal-press:#075E59; --teal-soft:#EAFBF9; --teal-glow:#7FE9E0;
  --ink:#242833; --ink-soft:#3C5754; --muted:#7D8C89; --muted-2:#8A9895;
  --paper:#F5F8F7; --white:#FFFFFF; --mist:#E6F2F0; --mist-2:#D3E9E6;
  --coral:#FF6A4D; --coral-soft:#FFF6F4; --red:#D64545; --amber:#FBBC05; --amber-soft:#FFF8E1;
  --line:rgba(14,43,40,.12); --line-strong:rgba(14,43,40,.22);
  --r-sm:10px; --r-md:18px; --r-lg:26px; --r-pill:999px;
  --shadow-sm:0 2px 8px rgba(14,43,40,.06);
  --shadow-md:0 18px 50px -24px rgba(11,128,122,.45);
  --shadow-lg:0 40px 90px -40px rgba(14,43,40,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1240px;
  --font:'Manrope',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5}
img,svg{max-width:100%;display:block}
a{color:var(--teal-deep);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
h1,h2,h3,h4{margin:0;line-height:1.15;font-weight:700;text-wrap:balance}
h1{font-size:clamp(1.75rem,3.4vw,2.5rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.35rem,2.4vw,1.75rem);letter-spacing:-.01em}
h3{font-size:1.1rem}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,32px)}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hidden,[hidden]{display:none!important}
.muted{color:var(--muted)}
.small{font-size:.875rem}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.25rem;border-radius:var(--r-pill);border:1.5px solid transparent;font-weight:600;line-height:1;white-space:nowrap;transition:background .2s var(--ease),color .2s,border-color .2s,transform .2s var(--ease);text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-deep)}
.btn-primary:active{background:var(--teal-press)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#101319}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--white)}
.btn-coral{background:var(--coral);color:#fff}
.btn-coral:hover{background:#e5573b}
.btn-sm{padding:.5rem .9rem;font-size:.875rem}
.btn-lg{padding:.9rem 1.6rem;font-size:1.05rem}
.btn-block{width:100%}
.btn svg{width:18px;height:18px}

/* ---------- Header ---------- */
.site-header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.hdr{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;min-width:0;align-items:center;gap:1.25rem;height:72px}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--ink);text-decoration:none;font-weight:800;font-size:1.15rem;letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand img{height:36px;width:auto}
.brand .brand-name{display:flex;flex-direction:column;line-height:1;gap:.15rem}
.brand .brand-name small{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep)}
.hdr-search{position:relative;min-width:0}
.search-form{display:flex;align-items:center;background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:0 .35rem 0 1rem;height:46px;transition:border-color .2s,box-shadow .2s}
.search-form:focus-within{border-color:var(--teal);box-shadow:0 0 0 4px rgba(18,181,172,.15);background:var(--white)}
.search-form svg{width:20px;height:20px;color:var(--muted);flex:none}
.search-form input{flex:1 1 0;width:0;min-width:0;background:none;border:0;outline:0;padding:0 .75rem;font-size:1rem}
.search-form input::placeholder{color:var(--muted-2)}
.search-form button{height:36px;padding:0 1.1rem;border-radius:10px;border:0;background:var(--teal);color:#fff;font-weight:600}
.search-form button:hover{background:var(--teal-deep)}
.suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:.4rem;z-index:60;max-height:70vh;overflow:auto}
.suggest a{display:grid;grid-template-columns:40px 1fr auto;gap:.75rem;align-items:center;padding:.5rem .6rem;border-radius:var(--r-sm);color:var(--ink);text-decoration:none}
.suggest a:hover,.suggest a.active{background:var(--teal-soft)}
.suggest img{width:40px;height:40px;object-fit:contain;border-radius:6px;background:var(--paper)}
.suggest .s-title{font-weight:500;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest .s-sub{font-size:.8rem;color:var(--muted)}
.suggest .s-price{font-weight:700;color:var(--teal-deep);white-space:nowrap}
.suggest .s-head{padding:.4rem .6rem .2rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
/* Αναζήτηση: τονισμένες λέξεις, εικονίδια, πλήθη, πρόσφατες, κατηγορίες σε chips.
   Το παράθυρο είναι φαρδύτερο από το πεδίο του header (που είναι στενό
   δίπλα στο μενού), χωρίς οριζόντια κύλιση, και οι τίτλοι σπάνε σε 2 γραμμές. */
.suggest{min-width:min(580px,calc(100vw - 32px));overflow-x:hidden;text-align:start}
.suggest a{grid-template-columns:44px minmax(0,1fr) auto}
.suggest a > span{min-width:0}
.suggest .s-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
.suggest .s-sub{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suggest a br{display:none}
.hero .suggest{min-width:0;text-align:start}
.suggest mark{background:none;color:var(--teal-deep);font-weight:700}
.suggest .s-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.suggest .s-clear{border:0;background:none;padding:0;color:var(--teal-deep);font-size:.72rem;font-weight:600;letter-spacing:0;text-transform:none;cursor:pointer}
.suggest .s-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:32px;border-radius:8px;background:var(--paper);color:var(--muted);font-size:1rem}
.suggest .s-sw{width:28px;height:28px;margin-inline:6px;border-radius:50%;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(14,43,40,.22)}
.suggest .s-count{font-size:.8rem;color:var(--muted);white-space:nowrap}
.suggest a.s-smart{background:var(--teal-soft)}
.suggest a.s-smart .s-title{font-weight:700;color:var(--teal-deep)}
.suggest a.s-all{border-top:1px solid var(--line);border-radius:0 0 var(--r-sm) var(--r-sm);margin-top:.3rem}
.suggest .s-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.3rem .6rem .5rem}
.suggest a.s-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .75rem;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.86rem;font-weight:500}
.suggest a.s-chip .num{color:var(--muted);font-size:.76rem}
.suggest a.s-chip:hover,.suggest a.s-chip.active{border-color:var(--teal);background:var(--teal-soft)}
.suggest .s-empty{padding:.9rem .7rem;color:var(--ink-soft);font-size:.92rem}
.suggest .s-empty small{color:var(--muted)}
.hdr-nav{display:flex;align-items:center;gap:.25rem}
.hdr-nav a{padding:.5rem .8rem;border-radius:var(--r-pill);color:var(--ink-soft);font-weight:500;font-size:.95rem}
.hdr-nav a:hover{background:var(--paper);color:var(--ink);text-decoration:none}
.hdr-nav a.cta{background:var(--ink);color:#fff;margin-inline-start:.4rem}
.hdr-nav a.cta:hover{background:#101319}
.hdr-burger{display:none;width:44px;height:44px;border:0;background:none;border-radius:var(--r-sm)}
.hdr-burger svg{width:24px;height:24px}
/* language switch: dropdown φτιαγμένο από το includes/i18n.php.
   Είναι <details> με κανονικά links, οπότε δουλεύει και χωρίς JS και
   χωράει όσες γλώσσες κι αν προστεθούν. */
[data-lang-switch]{position:relative;display:inline-flex}
.lang-dd{position:relative}
.lang-dd summary{display:inline-flex;align-items:center;gap:.35rem;height:40px;padding:0 .6rem 0 .55rem;border:1px solid var(--line-strong);border-radius:10px;background:var(--white);color:var(--ink-soft);font-size:.78rem;font-weight:700;letter-spacing:.04em;cursor:pointer;list-style:none;user-select:none;transition:border-color .2s,color .2s}
.lang-dd summary::-webkit-details-marker{display:none}
.lang-dd summary:hover{border-color:var(--ink);color:var(--ink)}
.lang-dd summary svg{width:17px;height:17px;color:var(--teal)}
.lang-dd summary .chev{width:14px;height:14px;color:var(--muted);transition:transform .2s var(--ease)}
.lang-dd[open] summary{border-color:var(--ink);color:var(--ink)}
.lang-dd[open] summary .chev{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + .4rem);inset-inline-end:0;z-index:130;min-width:190px;max-height:min(60vh,420px);overflow-y:auto;padding:.35rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-lg)}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .65rem;border-radius:7px;font-size:.9rem;font-weight:500;color:var(--ink-soft);white-space:nowrap}
.lang-menu a:hover{background:var(--paper);color:var(--ink);text-decoration:none}
.lang-menu a[aria-current]{background:var(--teal-soft);color:var(--teal-deep);font-weight:600}
.lang-menu .lc{font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.lang-menu a[aria-current] .lc{color:var(--teal-deep)}
/* mobile drawer chrome (hidden on desktop) */
.nav-head,.nav-lang{display:none}
.nav-backdrop{position:fixed;inset:0;z-index:110;background:rgba(14,43,40,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;transition:opacity .35s var(--ease)}
.nav-backdrop.show{opacity:1}
body.nav-open{overflow:hidden}
/* Οι κανόνες πιάνουν ΜΟΝΟ τη μπάρα (.cat-list / .cat-link), όχι κάθε ul
   και a μέσα της, γιατί μέσα στη μπάρα ζει και το υπομενού.
   Το position:relative κάνει τη μπάρα σημείο αναφοράς του υπομενού: έτσι
   το πάνελ ξεφεύγει από το overflow-x της λίστας και δεν κόβεται. */
.cat-bar{position:relative;background:var(--white);border-bottom:1px solid var(--line)}
.cat-list{list-style:none;margin:0;padding:0;display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:none}
.cat-list::-webkit-scrollbar{display:none}
.cat-link{display:flex;align-items:center;gap:.45rem;padding:.6rem .75rem;font-size:.9rem;font-weight:500;color:var(--ink-soft);white-space:nowrap;border-bottom:2px solid transparent}
.cat-link:hover,.cat-link[aria-current]{color:var(--teal-deep);border-bottom-color:var(--teal);text-decoration:none}
.cat-link svg{flex:none;width:18px;height:18px;color:var(--teal)}

/* ---------- Header «ξεμπούκωμα» (desktop) ----------
   Λεπτή μπάρα τέρμα πάνω (.hdr-top): σελίδες με μικρά γράμματα + γλώσσα, δεξιά.
   Κύρια σειρά: μόνο λογότυπο και ΜΕΓΑΛΗ αναζήτηση. Από κάτω: μόνο οι κατηγορίες.
   Κινητό (≤900px): χωρίς λεπτή μπάρα, με burger όπως πριν (responsive.css). */
.hdr-top{background:var(--paper);border-bottom:1px solid var(--line)}
.hdr-top-in{display:flex;align-items:center;justify-content:flex-end;gap:.9rem;height:34px}
.hdr-top-nav{display:flex;align-items:center;gap:.15rem}
.hdr-top-nav a{padding:.2rem .55rem;border-radius:6px;font-size:.8rem;font-weight:500;color:var(--muted);white-space:nowrap}
.hdr-top-nav a:hover,.hdr-top-nav a[aria-current]{color:var(--ink);background:var(--white);text-decoration:none}
.hdr-top-nav a.is-cta{color:var(--teal-deep);font-weight:600}
.hdr-top .lang-dd summary{height:26px;padding:0 .45rem;border:0;background:none;font-size:.74rem}
.hdr-top .lang-dd summary:hover,.hdr-top .lang-dd[open] summary{background:var(--white)}
.hdr-top .lang-dd summary svg{width:15px;height:15px}

/* ---------- Υπομενού κατηγορίας (mega menu) ----------
   Markup: includes/mega-menu.php · συμπεριφορά: initMega() στο js/app.js.
   Αριστερά τα τμήματα (.mega-l1), δεξιά οι στήλες του ενεργού (.mega-pane).
   Τα panes κάθονται όλα στο ίδιο σημείο και φαίνεται μόνο το .is-on.
   Στο DOM κάθε pane ακολουθεί το τμήμα του, οπότε με το Tab ο χρήστης
   μπαίνει στις στήλες του τμήματος που μόλις εστίασε. */
.mega-trigger .mega-chev{width:14px;height:14px;margin-inline-start:-.1rem;color:var(--muted);transition:transform .3s var(--ease),color .2s}
.has-mega.is-open > .mega-trigger{color:var(--teal-deep);border-bottom-color:var(--teal)}
.has-mega.is-open > .mega-trigger .mega-chev{transform:rotate(180deg);color:var(--teal-deep)}

.mega{position:absolute;left:0;right:0;top:100%;z-index:45;background:var(--white);border-top:1px solid var(--line);box-shadow:0 34px 60px -34px rgba(14,43,40,.4);max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .2s var(--ease),transform .28s var(--ease),visibility 0s linear .28s}
.has-mega.is-open > .mega{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .22s var(--ease),transform .3s var(--ease),visibility 0s}
/* Χωρίς JavaScript: ανοίγει με hover ή εστίαση και δείχνει το πρώτο τμήμα. */
.has-mega:not(.mega-ready):hover > .mega,.has-mega:not(.mega-ready):focus-within > .mega{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:none}

.mega-body{position:relative;min-height:var(--mega-h,440px);display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:1.4rem 0 1.5rem}
.mega-body::after{content:"";position:absolute;left:286px;top:1.4rem;bottom:1.5rem;width:1px;background:var(--line)}

/* Ο δείκτης που γλιστράει πίσω από το ενεργό τμήμα. Θέση και ύψος από το JS. */
.mega-ind{position:absolute;left:0;top:0;width:266px;height:var(--ind-h,0);transform:translateY(var(--ind-y,0));border-radius:16px;background:var(--teal-soft);pointer-events:none;transition:transform .34s var(--ease),height .34s var(--ease)}
.mega-ind::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:3px;background:var(--teal)}

.mega-l1{position:relative;z-index:1;display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:center;gap:.8rem;width:266px;padding:.62rem .8rem .62rem .95rem;border-radius:16px;color:var(--ink);text-decoration:none}
.mega-l1:hover{text-decoration:none}
.has-mega:not(.mega-ready) .mega-l1.is-on{background:var(--teal-soft)}
.mega-l1-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--paper);color:var(--teal-deep);transition:background .25s,color .25s,box-shadow .25s,transform .35s var(--ease)}
.mega-l1-ico svg{width:22px;height:22px}
.mega-l1-name{display:block;font-size:.98rem;font-weight:700;line-height:1.25;transition:color .2s}
.mega-l1-text small{display:block;overflow:hidden;font-size:.76rem;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.mega-l1-go{width:18px;height:18px;color:var(--teal-deep);opacity:0;transform:translateX(-5px);transition:opacity .2s,transform .3s var(--ease)}
.mega-l1:hover .mega-l1-ico{transform:scale(1.05)}
.mega-l1.is-on .mega-l1-ico{background:var(--white);color:var(--teal);box-shadow:0 6px 16px -8px rgba(11,128,122,.55)}
.mega-l1.is-on .mega-l1-name{color:var(--teal-deep)}
.mega-l1.is-on .mega-l1-go{opacity:1;transform:none}

.mega-all{display:inline-flex;align-items:center;gap:.45rem;margin:1.1rem 0 0 .95rem;padding:.55rem 1.05rem;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);font-size:.88rem;font-weight:600;color:var(--ink);transition:background .2s,color .2s,border-color .2s,gap .3s var(--ease)}
.mega-all svg{width:16px;height:16px}
.mega-all:hover{gap:.7rem;background:var(--ink);border-color:var(--ink);color:#fff;text-decoration:none}

.mega-pane{position:absolute;top:1.4rem;left:312px;right:0;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:2.2rem;
  opacity:0;visibility:hidden;transform:translateX(14px);transition:opacity .16s var(--ease),transform .3s var(--ease),visibility 0s linear .16s}
.mega-pane.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .24s var(--ease) .03s,transform .34s var(--ease),visibility 0s}
/* Το ενεργό τμήμα έχει visibility:visible, που «ξεπερνά» το hidden του κλειστού
   πάνελ: θα έμενε αόρατο αλλά θα έπιανε hover και Tab κάτω από τη μπάρα. */
.has-mega.mega-ready:not(.is-open) .mega-pane.is-on{visibility:hidden;transition:visibility 0s linear .28s}
.mega-cols{columns:4 150px;column-gap:2rem}
.mega-col{break-inside:avoid;page-break-inside:avoid;padding-bottom:1.6rem}
.mega-pane.is-on .mega-col{animation:megaColIn .45s var(--ease) both;animation-delay:calc(var(--i,0) * 50ms)}
@keyframes megaColIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.mega-l2{display:inline-block;margin-bottom:.55rem;font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.mega-l2:hover{color:var(--teal-deep);text-decoration:none}
.mega-l3s{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:.05rem}
.mega-l3{position:relative;display:inline-block;padding:.3rem 0;font-size:.93rem;color:var(--ink-soft);transition:color .15s,transform .25s var(--ease)}
.mega-l3::before{content:"";position:absolute;left:-13px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--teal);opacity:0;transform:scale(.2);transition:opacity .2s,transform .3s var(--ease)}
.mega-l3:hover,.mega-l3:focus-visible{color:var(--teal-deep);text-decoration:none;transform:translateX(5px)}
.mega-l3:hover::before,.mega-l3:focus-visible::before{opacity:1;transform:scale(1)}

/* Η κάρτα του τμήματος: φωτογραφία αν υπάρχει, αλλιώς χρώμα και εικονίδιο. */
.mega-card{position:relative;isolation:isolate;overflow:hidden;align-self:start;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:3/4;padding:1.15rem;border-radius:var(--r-md);color:var(--ink);text-decoration:none;--tone:var(--teal)}
.mega-card:hover{text-decoration:none}
.mega-card-art{position:absolute;inset:0;z-index:-1;overflow:hidden}
.mega-card-art img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.mega-card:hover .mega-card-art img{transform:scale(1.06)}
.mega-card.has-img{color:#fff}
.mega-card.has-img .mega-card-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,20,24,0) 38%,rgba(14,20,24,.75))}
.mega-card.tone-coral{--tone:var(--coral)}
.mega-card.tone-coral .mega-card-art{background:radial-gradient(120% 80% at 100% 0,#FFD5CA 0,transparent 62%),radial-gradient(90% 70% at 0 100%,#FFE8E1 0,transparent 70%),var(--coral-soft)}
.mega-card.tone-teal{--tone:var(--teal)}
.mega-card.tone-teal .mega-card-art{background:radial-gradient(120% 80% at 100% 0,#BDF2EC 0,transparent 62%),radial-gradient(90% 70% at 0 100%,#DDF8F5 0,transparent 70%),var(--teal-soft)}
.mega-card.tone-amber{--tone:#E0A800}
.mega-card.tone-amber .mega-card-art{background:radial-gradient(120% 80% at 100% 0,#FFE59B 0,transparent 62%),radial-gradient(90% 70% at 0 100%,#FFF3CF 0,transparent 70%),var(--amber-soft)}
.mega-card.tone-mist{--tone:var(--teal-deep)}
.mega-card.tone-mist .mega-card-art{background:radial-gradient(120% 80% at 100% 0,#CBE3DF 0,transparent 62%),radial-gradient(90% 70% at 0 100%,#EEF6F4 0,transparent 70%),var(--mist)}
/* Χρώμα από το διαχειριστικό: το --tone έρχεται inline και το φόντο
   βγαίνει από αυτό, στις ίδιες αναλογίες με τα έτοιμα. */
.mega-card.tone-custom .mega-card-art{background:radial-gradient(120% 80% at 100% 0,color-mix(in srgb,var(--tone) 32%,#fff) 0,transparent 62%),radial-gradient(90% 70% at 0 100%,color-mix(in srgb,var(--tone) 15%,#fff) 0,transparent 70%),color-mix(in srgb,var(--tone) 6%,#fff)}
.mega-card-ico{position:absolute;top:3%;right:-7%;width:70%;aspect-ratio:1;color:var(--tone);opacity:.32;transform:rotate(-10deg);transition:transform .7s var(--ease),opacity .4s}
.mega-card-ico svg{width:100%;height:100%;stroke-width:.9}.mega-card:hover .mega-card-ico{opacity:.45;transform:rotate(0) scale(1.06)}
.mega-card-text{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem}
.mega-card-text small{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.72}
.mega-card-text b{font-size:1.4rem;font-weight:800;letter-spacing:-.015em;line-height:1.15}
.mega-card-cta{display:inline-flex;align-items:center;gap:.4rem;margin-top:.7rem;padding:.5rem .9rem;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:.82rem;font-weight:600;transition:gap .3s var(--ease),background .2s}
.mega-card-cta svg{width:15px;height:15px}
.mega-card.has-img .mega-card-cta{background:#fff;color:var(--ink)}
.mega-card:hover .mega-card-cta{gap:.65rem}

/* Σκίαση της σελίδας όσο είναι ανοιχτό. Κάτω από τον header (z-index 50). */
.mega-scrim{position:fixed;inset:0;z-index:40;background:rgba(14,43,40,.22);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s var(--ease),visibility 0s linear .25s}
.mega-scrim.show{opacity:1;visibility:visible;transition:opacity .25s var(--ease),visibility 0s}

/* ---------- Λίστα με επίπεδα (drill) ----------
   Κοινή για το φύλλο της μπάρας στο κινητό (.msheet) και για το μενού του
   burger (.nav-drill). Τη χτίζει η makeDrill() στο js/app.js.
   Οι κανόνες των γραμμών έχουν :is(.drill,.nav-cats) μπροστά για να
   νικούν το γενικό «.hdr-nav a» όταν η λίστα ζει μέσα στο burger. */
.drill{display:flex;flex-direction:column;height:100%;min-height:0}
.drill-top{flex:none;padding:.55rem .85rem .6rem;border-bottom:1px solid var(--line)}
.drill-head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:.5rem}
.drill-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:13px;background:var(--paper);color:var(--ink);transition:background .2s,transform .15s,opacity .2s}
.drill-btn:active{transform:scale(.92);background:var(--mist)}
.drill-btn svg{width:22px;height:22px}
.drill-btn.is-hidden{visibility:hidden;opacity:0}
.drill-titles{min-width:0;text-align:center}
.drill-crumb{display:block;min-height:1.1em;overflow:hidden;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep);white-space:nowrap;text-overflow:ellipsis}
.drill-title{overflow:hidden;font-size:1.15rem;font-weight:800;white-space:nowrap;text-overflow:ellipsis;outline:0}
.drill-stage{position:relative;flex:1;min-height:0;overflow:hidden}
.drill-level{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:.9rem 1rem calc(1.5rem + env(safe-area-inset-bottom,0px));background:var(--white);transform:translateX(100%);transition:transform .4s var(--ease),opacity .4s var(--ease)}
.drill-level.is-current{transform:none}
.drill-level.is-behind{transform:translateX(-28%);opacity:0}
.drill-level.no-anim{transition:none}
.drill .drill-all{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.6rem;padding:.85rem 1rem;border:1px solid var(--mist-2);border-radius:16px;background:linear-gradient(135deg,var(--teal-soft),var(--white));color:var(--ink);text-decoration:none}
.drill .drill-all:hover{text-decoration:none}
.drill-all small{display:block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep)}
.drill-all b{font-size:1.02rem}
.drill-all svg{flex:none;width:20px;height:20px;color:var(--teal-deep)}
.drill-list{list-style:none;margin:0;padding:0}
.drill-level .drill-list li{animation:drillIn .4s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms + 90ms)}
@keyframes drillIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
:is(.drill,.nav-cats) .drill-row{display:flex;align-items:center;gap:.85rem;width:100%;min-height:58px;padding:.55rem .3rem;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;color:var(--ink);font-size:1rem;font-weight:600;text-align:start;text-decoration:none;transition:background .15s}
:is(.drill,.nav-cats) .drill-row:hover{text-decoration:none}
:is(.drill,.nav-cats) .drill-row:active{background:var(--paper)}
:is(.drill,.nav-cats) a.drill-row{font-weight:500}
.drill-lead{flex:none;display:grid;place-items:center;overflow:hidden;width:44px;height:44px;border-radius:13px;background:var(--paper);color:var(--teal-deep)}
.drill-lead svg{width:22px;height:22px}
.drill-lead img{width:100%;height:100%;object-fit:cover}
.drill-label{flex:1;min-width:0}
.drill-count{flex:none;padding:.1rem .5rem;border-radius:99px;background:var(--paper);font-size:.76rem;font-weight:700;color:var(--muted)}
.drill-row > svg{flex:none;width:18px;height:18px;color:var(--muted)}
[dir="rtl"] .drill-row > svg,[dir="rtl"] .mega-l1-go,[dir="rtl"] .drill-back svg{transform:scaleX(-1)}

/* Το φύλλο από κάτω, όταν πατηθεί η «Μόδα» στη μπάρα του κινητού. */
body.sheet-open{overflow:hidden}
.nav-backdrop.msheet-backdrop{z-index:135}
.msheet{position:fixed;left:0;right:0;bottom:0;z-index:140;display:flex;flex-direction:column;height:min(86vh,760px);height:min(86dvh,760px);background:var(--white);border-radius:24px 24px 0 0;box-shadow:0 -24px 60px -24px rgba(14,43,40,.4);transform:translateY(100%);transition:transform .42s var(--ease);will-change:transform}
.msheet.open{transform:none}
.msheet .drill-top{touch-action:none;cursor:grab}
.msheet-grip{width:44px;height:5px;margin:0 auto .5rem;border-radius:5px;background:var(--mist-2)}

/* Κατηγορίες μέσα στο μενού του burger: μόνο στο κινητό (responsive.css). */
.nav-cats,.nav-drill{display:none}

/* ---------- Hero (home) ---------- */
.hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(2rem,4vw,3rem);background:
  radial-gradient(1200px 500px at 80% -20%, rgba(127,233,224,.35), transparent 60%),
  radial-gradient(800px 400px at 5% 110%, rgba(18,181,172,.18), transparent 60%),
  var(--white)}
.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.4rem}
.hero h1{max-width:18ch;font-size:clamp(2rem,4.6vw,3.4rem)}
.hero h1 em{font-style:normal;color:var(--teal-deep)}
.hero p{max-width:56ch;color:var(--ink-soft);font-size:1.1rem}
.hero .search-form{width:min(720px,100%);height:58px;font-size:1.05rem;background:var(--white);box-shadow:var(--shadow-md)}
.hero .search-form button{height:46px;padding:0 1.5rem;font-size:1rem}
.hero .hdr-search{width:min(720px,100%)}
/* Πρώτη οθόνη: ζωντανή ένδειξη, φρεσκάδα τιμών, αιωρούμενα προϊόντα (includes/scripts.js heroInit) */
/* χωρίς overflow στη .hero: αλλιώς θα έκοβε το παράθυρο προτάσεων της αναζήτησης */
.hero{position:relative;isolation:isolate}
.hero-inner{position:relative;z-index:1}
.hero-live{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .95rem .4rem .75rem;border:1px solid var(--line);border-radius:var(--r-pill);
  background:rgba(255,255,255,.75);backdrop-filter:blur(6px);font-size:.88rem;color:var(--ink-soft);box-shadow:var(--shadow-sm);max-width:100%}
.hero-live b{color:var(--ink);font-weight:700}
.hero-live #hero-live-text{display:inline-block}
.hero-live #hero-live-text.in{animation:heroLiveIn .5s var(--ease)}
@keyframes heroLiveIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pulse{position:relative;width:8px;height:8px;flex:none;border-radius:50%;background:var(--teal)}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--teal);opacity:0;animation:heroPulse 2s ease-out infinite}
@keyframes heroPulse{0%{transform:scale(.4);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.hero-fresh{display:inline-flex;align-items:center;gap:.5rem;margin-top:-.4rem;font-size:.82rem;color:var(--muted)}
.popular a .num{margin-inline-start:.2rem;font-size:.78rem;color:var(--muted)}

/* Δύο στήλες σε μεγάλες οθόνες (κείμενο + «σύγκριση τώρα»), μία στήλη από κάτω (responsive.css). */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.2rem;justify-items:center}
.hero-grid .hero-inner{width:100%}
@media (min-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);align-items:center;gap:3rem}
  .hero-grid .hero-inner{align-items:flex-start;text-align:start}
  .hero-grid .hero-inner .popular,.hero-grid .hero-inner .stats{justify-content:flex-start}
  .hero-grid .hero-inner .popular>span{text-align:start}
  .hero-grid h1{max-width:16ch}
  /* Χωρίς την κάρτα «Σύγκριση τώρα» (επιλογή στο διαχειριστικό): μία στήλη,
     κεντραρισμένη, με τον τίτλο και την αναζήτηση σε όλο το πλάτος. */
  .hero-grid.hero-solo{grid-template-columns:minmax(0,1fr)}
  .hero-grid.hero-solo .hero-inner{align-items:center;text-align:center}
  .hero-grid.hero-solo .hero-inner .popular{justify-content:center}
  .hero-grid.hero-solo .hero-inner .popular>span{text-align:center;width:100%}
  /* :not(.hero-live) — το pill «Τώρα σε σύγκριση» δεν παίρνει max-width, αλλιώς διπλώνει */
  .hero-grid.hero-solo h1,.hero-grid.hero-solo .hero-inner>p:not(.hero-live){max-width:34ch;margin-inline:auto;text-align:center}
  .hero-grid.hero-solo h1{max-width:22ch}
  .hero-grid.hero-solo .hdr-search{width:min(760px,100%);margin-inline:auto}
}
.hcmp{position:relative;width:min(460px,100%);padding:1.1rem 1.15rem 1rem;border:1px solid var(--line);border-radius:var(--r-lg);
  background:rgba(255,255,255,.88);backdrop-filter:blur(10px);box-shadow:var(--shadow-lg);text-align:start}
.hcmp::before{content:"";position:absolute;inset:-10px 14px auto;height:40px;z-index:-1;border-radius:var(--r-lg);background:var(--teal-glow);opacity:.35;filter:blur(24px)}
.hcmp-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.8rem}
.hcmp-eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep)}
.hcmp-nav{display:flex;gap:.3rem}
.hcmp-btn{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--white);color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s}
.hcmp-btn:hover{background:var(--teal-soft);border-color:var(--teal)}
.hcmp-btn:focus-visible,.hcmp-dots button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.hcmp-btn svg{width:16px;height:16px}
[dir="rtl"] .hcmp-btn svg{transform:scaleX(-1)}
.hcmp.single .hcmp-nav,.hcmp.single .hcmp-foot{display:none}
/* επιλογή κατηγορίας (enhanceSelect) */
.hcmp-select{margin-bottom:.85rem;height:38px;font-size:.86rem;max-width:100%}
.hcmp-select .select-list{right:auto;left:0;max-height:min(420px,60vh);overflow-y:auto}
[dir="rtl"] .hcmp-select .select-list{left:auto;right:0}
.hcmp-empty{justify-content:center;align-items:center;min-height:12rem;padding:1rem;border:1px dashed var(--line-strong);border-radius:14px;text-align:center}
.hero .hcmp-empty p{margin:0;max-width:34ch;font-size:.9rem;color:var(--muted)}
.hero .hcmp-empty p:first-child{font-size:1rem;color:var(--ink-soft)}
.hcmp-view.swap{animation:hcmpSwap .45s var(--ease)}
@keyframes hcmpSwap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Όλες οι διαφάνειες στο ίδιο κελί: το ύψος είναι της μεγαλύτερης, χωρίς πηδήματα. */
/* overflow: οι κρυφές διαφάνειες είναι μετατοπισμένες 18px για το εφέ και αλλιώς ξεχειλίζουν τη σελίδα */
.hcmp-view{display:grid;grid-template-columns:minmax(0,1fr);touch-action:pan-y;user-select:none;overflow:hidden;overflow:clip;overflow-clip-margin:12px}
/* Καμία εικόνα μέσα στην κάρτα δεν «σέρνεται» σαν αρχείο: αλλιώς ο browser
   ακυρώνει το δικό μας σύρσιμο (pointercancel) και δεν αλλάζει προϊόν. */
.hcmp-view img,.hcmp-view a{-webkit-user-drag:none;user-select:none}
/* Όσο σέρνεις: η κάρτα ακολουθεί το δάχτυλο (το --drag το γράφει το scripts.js) */
.hcmp-view.dragging > *{transform:translateX(var(--drag,0px));transition:none}
.hcmp-view > *{transition:transform .25s var(--ease)}
.hcmp-slide{grid-area:1/1;min-width:0;display:flex;flex-direction:column;gap:.75rem;visibility:hidden;opacity:0;transform:translateX(18px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s .45s}
.hcmp-slide.back{transform:translateX(-18px)}
.hcmp-slide.on{visibility:visible;opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s}
.hcmp-prod{display:flex;gap:.9rem;align-items:center;color:inherit;text-decoration:none}
.hcmp-prod:hover{text-decoration:none}
.hcmp-prod:hover b{color:var(--teal-deep)}
.hcmp-img{position:relative;flex:none;width:84px;height:84px;overflow:hidden;border-radius:14px;background:var(--paper)}
/* χωρίς περίγραμμα: η εικόνα γεμίζει όλο το πλαίσιο με στρογγυλές γωνίες */
.hcmp-img img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:inherit;-webkit-user-drag:none}
.hcmp-info{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.hcmp-info small{font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcmp-info b{font-size:1rem;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
.hcmp-spark{display:flex;align-items:center;gap:.4rem}
.hcmp-spark svg{width:70px;height:20px;overflow:visible}
.hcmp-spark .l{fill:none;stroke:var(--teal);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.hcmp-spark .a{fill:var(--teal-soft);stroke:none}
.hcmp-offers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.hcmp-offers li{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .75rem;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.hcmp-offers li.best{border-color:var(--teal);background:var(--teal-soft)}
.hcmp-offers li.more{justify-content:center;padding:.3rem;border:0;background:none;font-size:.8rem;color:var(--muted)}
.hcmp-offers .m{display:flex;flex-direction:column;min-width:0}
.hcmp-offers .m b{font-size:.9rem;color:var(--ink)}
.hcmp-offers .m small{font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcmp-offers .m .avail{font-size:inherit;padding:0;background:none}
.hcmp-offers .p{display:flex;flex-direction:column;align-items:flex-end;flex:none;font-size:1.15rem;font-weight:800;color:var(--ink)}
.hcmp-offers .p em{font-style:normal;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep)}
.hcmp-note{margin:0;max-width:none;font-size:.84rem;color:var(--ink-soft)}
.hero .hcmp-note{font-size:.84rem;max-width:none;color:var(--ink-soft)}
.hcmp-note.save b{color:var(--teal-deep)}
.hcmp-note.drop b:first-child{color:var(--coral)}
.hcmp-cta{justify-content:center;width:100%}
.hcmp-foot{display:flex;align-items:center;gap:.8rem;margin-top:.9rem}
.hcmp-dots{display:flex;gap:.3rem}
.hcmp-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:var(--mist-2);cursor:pointer;transition:width .3s var(--ease),background .3s}
.hcmp-dots button.on{width:22px;background:var(--teal)}
.hcmp-bar{flex:1;height:3px;overflow:hidden;border-radius:3px;background:var(--mist)}
.hcmp-bar i{display:block;height:100%;width:100%;background:var(--teal);transform:scaleX(0);transform-origin:left}
[dir="rtl"] .hcmp-bar i{transform-origin:right}
.hcmp-bar i.run{animation:hcmpBar 6s linear forwards}
.hcmp:hover .hcmp-bar i,.hcmp.paused .hcmp-bar i{animation-play-state:paused}
@keyframes hcmpBar{to{transform:none}}
@media (prefers-reduced-motion:reduce){.pulse::after{animation:none}.hcmp-slide{transition:none}.hcmp-view.swap{animation:none}.hcmp-bar{display:none}}
.popular{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;font-size:.9rem;color:var(--muted)}
.popular>span{flex-basis:100%;text-align:center;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.15rem}
.popular a{padding:.3rem .75rem;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line);color:var(--ink-soft);font-weight:500}
.popular a:hover{background:var(--teal-soft);border-color:var(--teal);color:var(--teal-deep);text-decoration:none}
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:2.5rem;margin-top:.5rem}
.stat{display:flex;flex-direction:column;align-items:center;gap:.1rem}
.stat b{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.stat span{font-size:.85rem;color:var(--muted)}
/* Μετρητές της αρχικής: μία ενιαία λωρίδα με εικονίδια, και από κάτω η φρεσκάδα των τιμών */
.hero-metrics{width:min(720px,100%);margin-top:.3rem;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:rgba(255,255,255,.72);backdrop-filter:blur(6px);box-shadow:var(--shadow-sm)}
/* πριν: grid-template-columns:repeat(4,minmax(0,1fr))
   Οι στήλες είναι όσοι και οι μετρητές που έμειναν: το includes/scripts.js
   βγάζει τις «προσφορές» όταν δεν υπάρχει καμία και γράφει το --stats. */
/* Οι μετρητές μπαίνουν κεντραρισμένοι σαν ομάδα, ο ένας κοντά στον άλλο, και
   όχι απλωμένοι σε ίσες στήλες: σε πλατιά οθόνη θα απείχαν μισή οθόνη.
   Το --sgap είναι το κενό ανάμεσά τους· από αυτό βγαίνει και η θέση της
   κάθετης γραμμής, ακριβώς στη μέση του κενού. */
.hero-metrics .stats{--sgap:clamp(2.5rem,10vw,150px);
  display:grid;grid-auto-flow:column;grid-auto-columns:max-content;justify-content:center;gap:0 var(--sgap);margin:0}
.hero-metrics .stat{position:relative;flex-direction:row;align-items:center;gap:.95rem;padding:1.35rem 1.1rem;min-width:0}
.hero-metrics .stat + .stat::before{content:"";position:absolute;inset-inline-start:calc(var(--sgap,0px) * -.5);top:24%;bottom:24%;width:1px;background:var(--line)}
.stat-ico{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:15px;background:var(--teal-soft);color:var(--teal-deep);transition:transform .3s var(--ease),background .3s}
.stat-ico svg{width:27px;height:27px}
.hero-metrics .stat:hover .stat-ico{transform:translateY(-2px) rotate(-4deg);background:var(--mist-2)}
.stat-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0;text-align:start;line-height:1.1}
.hero-metrics .stat b{font-size:clamp(1.55rem,2.1vw,2.1rem);font-variant-numeric:tabular-nums}
.hero-metrics .stat-txt span{font-size:clamp(.86rem,1vw,1rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* πριν: .hero .hero-metrics .hero-fresh — ο μετρητής είναι πλέον δικό του banner
   (pages/blocks/counter.php) και στέκεται και έξω από την πρώτη οθόνη. */
.hero-metrics .hero-fresh{display:flex;justify-content:center;max-width:none;margin:0;padding:.55rem 1rem;border-top:1px dashed var(--line-strong);
  background:transparent;font-size:.8rem;color:var(--muted)}
@media (min-width:1100px){.hero .hero-grid .hero-metrics .hero-fresh{justify-content:flex-start}}
/* Banner «Μετρητής» (pages/blocks/counter.php): λωρίδα από άκρη σε άκρη της
   οθόνης, χωρίς container. Το περιεχόμενο απλώνεται σε όλο το πλάτος και
   κρατά περιθώριο από τις άκρες με padding, όχι με max-width. */
/* Προεπιλογή: λευκή λωρίδα. Το λευκό μπαίνει στο ίδιο το banner, ώστε να
   πιάνει όλο το πλάτος· η λωρίδα από πάνω μένει διάφανη. */
/* (το padding το δίνει ο κανόνας .section πιο κάτω: ίδιο με όλα τα banners) */
.section-counter{background:var(--white)}
/* Χωρίς περιγράμματα: ούτε πλαίσιο γύρω από τη λωρίδα ούτε διακεκομμένη
   γραμμή πάνω από τη φρεσκάδα. Μένουν μόνο οι λεπτοί κάθετοι διαχωριστές
   ανάμεσα στους μετρητές. */
.counter-band{width:100%;margin:0;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;background:transparent}
/* «Οι τιμές ενημερώθηκαν πριν …»: μικρό πλαίσιο (pill) κάτω από τους
   μετρητές, κεντραρισμένο. Προεπιλογή: απαλό τιρκουάζ με σκούρο τιρκουάζ
   γράμματα. Το χρώμα αλλάζει από το διαχειριστικό (κλάσεις .hbadge-*). */
.fresh-row{display:flex;justify-content:center;padding-inline:clamp(1rem,4vw,3rem);
  padding-block:clamp(1.5rem,3.5vw,2.4rem) clamp(1.4rem,3vw,2rem)}
.counter-band .hero-fresh{display:inline-flex;align-items:center;gap:.6rem;max-width:100%;margin:0;padding:.6rem 1.2rem;
  border:0;border-radius:var(--r-pill);background:var(--teal-soft);color:var(--teal-deep);
  font-size:clamp(.88rem,1vw,1rem);font-weight:600;box-shadow:0 1px 2px rgba(11,128,122,.10)}
.hbadge-white .counter-band .hero-fresh{background:var(--white);color:var(--ink-soft);box-shadow:0 1px 3px rgba(14,43,40,.12)}
.hbadge-paper .counter-band .hero-fresh{background:var(--paper);color:var(--ink-soft);box-shadow:none}
.hbadge-mist .counter-band .hero-fresh{background:var(--mist);color:var(--teal-press)}
.hbadge-teal .counter-band .hero-fresh{background:var(--teal);color:#fff}
.hbadge-amber .counter-band .hero-fresh{background:#FDF4DE;color:#8A6400}
.hbadge-dark .counter-band .hero-fresh{background:#242833;color:#fff}
/* Σε γεμάτο φόντο η κουκκίδα γίνεται λευκή, αλλιώς χάνεται */
.hbadge-teal .counter-band .pulse,.hbadge-dark .counter-band .pulse{background:#fff}
.hbadge-teal .counter-band .pulse::after,.hbadge-dark .counter-band .pulse::after{border-color:#fff}
.hbadge-none .counter-band .hero-fresh{background:transparent;color:var(--muted);font-weight:500;padding-inline:0;box-shadow:none}
.counter-band .stats{padding-inline:clamp(1rem,4vw,3rem)}
.counter-band .stat{justify-content:center}
/* Με χρώμα από το διαχειριστικό ορίζει ο διαχειριστής: φεύγει το λευκό της
   προεπιλογής και μένει το χρώμα του banner. */
.hblock-tinted .section-counter{background:transparent}
.hblock-tinted .counter-band{background:transparent}
@media (max-width:640px){
  /* Σε κινητό οι μετρητές μπαίνουν ο ένας κάτω από τον άλλο: μία στήλη,
     χωρίς κάθετους διαχωριστές, με λεπτή γραμμή ανάμεσά τους. */
  .hero-metrics .stats{grid-auto-flow:row;grid-template-columns:1fr;gap:0}
  .hero-metrics .stat + .stat::before{display:none}
  .hero-metrics .stat + .stat{border-top:1px solid var(--line)}
  .hero-metrics .stat{padding:.8rem .85rem}
  /* Λωρίδα σε κινητό: κεντραρισμένοι μετρητές και όλος ο χώρος στο κείμενο,
     ώστε να μην κόβεται το «καταστήματα». */
  .counter-band .stats{padding-inline:clamp(.75rem,4vw,1.5rem)}
  .counter-band .stat{justify-content:center}
  /* Κοινό πλάτος κειμένου: έτσι όλα τα εικονίδια ξεκινούν στο ίδιο σημείο
     και οι μετρητές μπαίνουν συμμετρικά ο ένας κάτω από τον άλλο. */
  .counter-band .stat-txt{min-width:8rem}
  /* Λίγο περισσότερος αέρας ανάμεσα στους μετρητές */
  .counter-band .stat{padding-block:1.25rem}
  .counter-band .stat-txt span{white-space:normal;overflow:visible;text-overflow:clip}
}

/* ---------- Modal κειμένου (js/app.js, links με data-modal) ---------- */
.modal{border:0;padding:0;background:transparent;max-width:min(760px,92vw);width:100%;max-height:86vh}
.modal::backdrop{background:rgba(14,43,40,.45);backdrop-filter:blur(2px)}
/* Το κουτί δεν κυλάει: κυλάει μόνο το .modal-body, ώστε η μπάρα να μένει
   μέσα στο κείμενο και να μη σπάει τις στρογγυλές γωνίες. */
.modal-box{display:flex;flex-direction:column;background:var(--white);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);max-height:86vh;overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex:none;
  padding:clamp(1rem,2.5vw,1.4rem) clamp(1.2rem,3vw,2rem);border-bottom:1px solid var(--line)}
.modal-title{margin:0;font-size:clamp(1.15rem,2.2vw,1.5rem);text-wrap:balance}
.modal-x{flex:none;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);border-radius:50%;background:var(--white);color:var(--muted);
  transition:background .2s,color .2s,border-color .2s}
.modal-x svg{width:16px;height:16px}
.modal-x:hover{background:var(--paper);color:var(--ink);border-color:var(--line-strong)}
.modal-body{overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(1rem,2.5vw,1.5rem) clamp(1.2rem,3vw,2rem) clamp(1.2rem,3vw,1.8rem);
  /* λεπτή, διακριτική μπάρα — Firefox */
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
/* … και Chrome / Edge / Safari: στρογγυλεμένη, με αέρα γύρω της */
.modal-body::-webkit-scrollbar{width:10px}
.modal-body::-webkit-scrollbar-track{background:transparent}
.modal-body::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r-pill);
  border:3px solid var(--white);background-clip:padding-box}
.modal-body::-webkit-scrollbar-thumb:hover{background:var(--muted);border:3px solid var(--white);background-clip:padding-box}
.modal-body > :first-child{margin-top:0}
/* Το .prose κόβει στα 68ch για ευανάγνωστη γραμμή σε πλατιά σελίδα· μέσα στο
   παράθυρο το πλάτος είναι ήδη περιορισμένο, οπότε το κείμενο πιάνει όλο τον
   χώρο και δεν μένει κενή λωρίδα δεξιά. */
.modal-body.prose{max-width:none}
.modal-body p,.modal-body ul,.modal-body ol{max-width:none}
.modal-load{color:var(--muted)}
.modal-foot{margin:1.4rem 0 0;padding-top:1rem;border-top:1px solid var(--line);font-size:.9rem}

/* ---------- Φόρμα επικοινωνίας ---------- */
/* Honeypot: αόρατο για τον άνθρωπο, ορατό στα bots. Όχι display:none — μερικά
   bots το προσπερνούν· έτσι μένει στο DOM αλλά εκτός οθόνης. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-msg{margin:.2rem 0 0;padding:.7rem .9rem;border-radius:var(--r-sm);font-size:.92rem}
.form-msg.ok{background:var(--teal-soft);color:var(--teal-press);border:1px solid rgba(18,181,172,.35)}
.form-msg.err{background:#FDECEA;color:#A02214;border:1px solid rgba(160,34,20,.25)}
/* Loader στο κουμπί: ο δίσκος εμφανίζεται μόνο όσο στέλνει (.is-busy) */
.btn .spin{display:none;width:16px;height:16px;margin-inline-end:.5rem;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:btnSpin .7s linear infinite}
.btn.is-busy .spin{display:inline-block}
.btn.is-busy{opacity:.85;cursor:progress}
@keyframes btnSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn .spin{animation-duration:2s}}

/* ---------- Sections ---------- */
.section{padding:clamp(2.2rem,5vw,4rem) 0}
/* Παλιότερα αυτά τα banners κολλούσαν στο προηγούμενο (padding-top:0), γιατί η
   αρχική ήταν μία ενιαία σελίδα. Τώρα κάθε banner στέκεται μόνο του και μπορεί
   να έχει δικό του φόντο, οπότε όλα έχουν το ίδιο περιθώριο πάνω και κάτω. */
.section-tight{padding-top:clamp(2.2rem,5vw,4rem)}
/* Λωρίδα με δικό της φόντο, όταν ο διαχειριστής δεν έχει διαλέξει χρώμα */
/* Χωρίς γραμμές πάνω/κάτω: τα banners ξεχωρίζουν από το φόντο τους, όχι από border */
.section-band{background:var(--white)}

/* Ελεύθερο banner (pages/blocks/custom.php): τίτλος, κείμενο, κουμπί */
.cblock-inner{max-width:52rem;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.cblock-inner h2{margin:0;text-wrap:balance}
.cblock-inner p{margin:0;color:var(--ink-soft);font-size:1.03rem}
.cblock-inner .btn{margin-top:.3rem}

/* ---------- Banners της αρχικής (includes/home-blocks.php) ----------
   Κάθε banner τυλίγεται σε .hblock. Με χρώμα φόντου παίρνει και
   .hblock-tinted: τότε η λωρίδα χρειάζεται κανονικό πάνω περιθώριο και
   σβήνει το δικό της φόντο, για να φανεί το χρώμα που διάλεξε ο διαχειριστής. */
.hblock-tinted .section-band{background:transparent}
/* Η πρώτη οθόνη έχει δικό της ντεγκραντέ: με χρώμα φόντου φεύγει, αλλιώς θα το σκέπαζε */
.hblock-tinted .hero{background:transparent}
/* Κενό πάνω/κάτω ορισμένο από το διαχειριστικό: το δίνει το περίβλημα και το
   banner μέσα του μηδενίζει το δικό του, ώστε να μην προστίθενται τα δύο. */
.hblock[data-pad]{padding-top:var(--pt,clamp(2.2rem,5vw,4rem));padding-bottom:var(--pb,clamp(2.2rem,5vw,4rem))}
.hblock[data-pad] > section{padding-block:0}
.hblock-white{background:var(--white)}
.hblock-paper{background:var(--paper)}
.hblock-mist{background:var(--mist)}
.hblock-teal{background:var(--teal-soft)}
.hblock-amber{background:#FDF4DE}
/* Σκούρο: αλλάζουν οι μεταβλητές, ώστε κείμενα, γραμμές και κάρτες μέσα στο
   banner να ακολουθήσουν χωρίς να πειραχτεί κανένα άλλο στυλ. */
/* το φόντο γράφεται σταθερά (#242833 = --ink): μέσα στον ίδιο κανόνα το
   var(--ink) θα έπαιρνε το νέο, λευκό --ink και το banner θα έβγαινε λευκό */
.hblock-dark{background:#242833;--ink:#FFFFFF;--ink-soft:#D9E4E2;--muted:#A9B8B5;--muted-2:#93A3A0;
  --line:rgba(255,255,255,.18);--line-strong:rgba(255,255,255,.32);--paper:#2E3340;--white:#2E3340;
  --teal-deep:var(--teal-glow);--teal-soft:rgba(18,181,172,.18);--mist:#39404F;--mist-2:#444C5D;
  color:var(--ink)}
.hblock-dark .btn-dark{background:var(--white);color:#242833}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.section-head p{color:var(--muted);margin-top:.3rem}
.section-head a.more{font-weight:600;white-space:nowrap}
.eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:.5rem}

/* Κατηγορίες της αρχικής: 4 στήλες, κάρτες ίδιου ύψους, χρώμα ανά κατηγορία (--accent,
   από την παλέτα του υπομενού). Η «Όλος ο κατάλογος» γεμίζει ό,τι περισσεύει στη σειρά. */
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:1.1rem}
.cat-card{--accent:var(--teal);--accent-ink:color-mix(in srgb,var(--accent) 68%,#0e2b28);--accent-soft:color-mix(in srgb,var(--accent) 12%,#fff);
  position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;min-height:258px;
  padding:1.5rem 1.4rem 1.3rem;border:1px solid var(--line);border-radius:24px;color:var(--ink);
  background:linear-gradient(165deg,color-mix(in srgb,var(--accent) 7%,#fff) 0%,var(--white) 58%);
  box-shadow:0 1px 2px rgba(14,43,40,.04),0 10px 30px -18px rgba(14,43,40,.18);
  transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
/* λεπτή γραμμή χρώματος πάνω, που απλώνει σε όλο το πλάτος στο hover */
.cat-card::before{content:"";position:absolute;top:0;inset-inline-start:1.4rem;width:36px;height:3px;border-radius:0 0 3px 3px;background:var(--accent);
  transition:width .5s var(--ease),inset-inline-start .5s var(--ease)}
.cat-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  box-shadow:0 2px 4px rgba(14,43,40,.04),0 28px 50px -24px color-mix(in srgb,var(--accent) 55%,transparent);text-decoration:none}
.cat-card:hover::before{inset-inline-start:0;width:100%}
.cat-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* το εικονίδιο σε μεγάλο μέγεθος, σαν υδατογράφημα στη γωνία */
.cat-mark{position:absolute;z-index:-1;width:170px;height:170px;bottom:-34px;inset-inline-end:-30px;color:var(--accent);opacity:.07;
  transform:rotate(-12deg);transition:transform .7s var(--ease),opacity .5s}
.cat-mark svg{width:100%;height:100%;stroke-width:1.1}
.cat-card:hover .cat-mark{opacity:.13;transform:rotate(-2deg) scale(1.08)}
.cat-card .ico{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:18px;background:var(--accent-soft);color:var(--accent-ink);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent);transition:background .35s,color .35s,transform .45s var(--ease)}
.cat-card .ico svg{width:28px;height:28px}
.cat-card:hover .ico{background:var(--accent);color:#fff;transform:rotate(-8deg) scale(1.05)}
.cat-body{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.cat-card b{display:block;font-weight:800;font-size:1.22rem;line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
.cat-card .cat-count{align-self:flex-start;font-size:.84rem;font-weight:700;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.cat-subs{font-size:.8rem;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat-subs:empty{display:none}
.cat-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;margin-top:auto;font-size:.86rem;font-weight:700;color:var(--accent-ink)}
.cat-foot>span:first-child{opacity:.75;transition:opacity .3s}
.cat-card:hover .cat-foot>span:first-child{opacity:1}
.cat-go{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--white);color:var(--accent-ink);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);transition:background .35s,color .35s,transform .35s var(--ease)}
.cat-go svg{width:16px;height:16px}
.cat-card:hover .cat-go{background:var(--accent);color:#fff;transform:translateX(4px)}
[dir="rtl"] .cat-go svg{transform:scaleX(-1)}
[dir="rtl"] .cat-card:hover .cat-go{transform:translateX(-4px)}
/* Κάρτα με εικόνα φόντου (categories.card_image). Η εικόνα γεμίζει την κάρτα
   κεντραρισμένη, χωρίς παραμόρφωση, και από πάνω μπαίνει σκίαση ώστε τα
   γράμματα να διαβάζονται σε κάθε φωτογραφία. */
.cat-card.has-img{color:#fff;border-color:transparent;background:#0e2b28}
.cat-photo{position:absolute;inset:0;z-index:-2;background-image:var(--img);background-size:cover;background-position:center;
  transition:transform .6s var(--ease)}
.cat-card.has-img::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,22,20,.25) 0%,rgba(6,22,20,.55) 45%,rgba(6,22,20,.85) 100%)}
.cat-card.has-img:hover .cat-photo{transform:scale(1.06)}
.cat-card.has-img .cat-mark{display:none}
.cat-card.has-img::before{background:#fff;opacity:.9}
.cat-card.has-img .ico{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);backdrop-filter:blur(4px)}
.cat-card.has-img:hover .ico{background:#fff;color:var(--accent-ink)}
.cat-card.has-img .cat-count{color:#fff}
.cat-card.has-img .cat-subs{color:rgba(255,255,255,.8)}
.cat-card.has-img .cat-foot{color:#fff}
.cat-card.has-img .cat-go{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.cat-card.has-img:hover .cat-go{background:#fff;color:var(--accent-ink)}
.cat-card.has-img.is-empty .cat-count{background:rgba(255,255,255,.18);color:#fff}
/* κατηγορία χωρίς προϊόντα ακόμη: ίδια κάρτα, μόνο η ένδειξη «Σύντομα» */
.cat-card.is-empty .cat-count{padding:.14rem .6rem;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-ink);font-size:.74rem;letter-spacing:.02em}
/* «Όλος ο κατάλογος»: σκούρα κάρτα κλεισίματος */
.cat-card.cat-all{--accent:var(--teal-glow);grid-column:span var(--span,1);color:#fff;border-color:transparent;
  background:radial-gradient(120% 90% at 100% 0%,rgba(127,233,224,.35),transparent 55%),linear-gradient(150deg,var(--teal-deep),#073f3b)}
.cat-card.cat-all::before{background:var(--teal-glow)}
.cat-all-kicker{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-glow)}
.cat-card.cat-all b{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;color:#fff}
.cat-card.cat-all small{font-size:.9rem;color:rgba(255,255,255,.75)}
.cat-card.cat-all .cat-foot{color:#fff}
.cat-card.cat-all .cat-go{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.cat-card.cat-all:hover .cat-go{background:#fff;color:var(--teal-deep)}
.cat-card.cat-all:hover{box-shadow:0 30px 60px -28px rgba(7,63,59,.7)}
@media (max-width:1000px){ .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .cat-card.cat-all{grid-column:span var(--span-m,1)} }
@media (max-width:640px){
  .cat-grid{gap:.75rem}
  .cat-card{min-height:224px;padding:1.15rem 1rem 1rem;gap:.85rem;border-radius:20px}
  .cat-card .ico{width:48px;height:48px;border-radius:15px}
  .cat-card .ico svg{width:24px;height:24px}
  .cat-card b{font-size:1.02rem}
  .cat-mark{width:120px;height:120px}
  .cat-foot>span:first-child{display:none}
  .cat-foot{justify-content:flex-end}
  .cat-go{width:32px;height:32px}
  .cat-card.cat-all b{font-size:2rem}
}
@media (prefers-reduced-motion:reduce){.cat-card,.cat-card::before,.cat-mark,.cat-card .ico,.cat-go{transition:none}.cat-card:hover{transform:none}}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:1.4rem;display:flex;flex-direction:column;gap:.6rem}
.step .n{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700}
.step p{color:var(--ink-soft);font-size:.95rem}

/* Καταστήματα στην αρχική: κάρτα με λογότυπο (ή αρχικά), όνομα και domain */
.merchant-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:.85rem}
.merchant-chip{display:flex;flex-direction:column;align-items:center;gap:.5rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:1.1rem .9rem 1rem;
  font-weight:600;font-size:.92rem;color:var(--ink);text-align:center;box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.merchant-chip:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:var(--shadow-md);color:var(--ink);text-decoration:none}
.merchant-chip .mname{line-height:1.25}
.merchant-chip .mdom{font-size:.78rem;font-weight:500;color:var(--muted)}
.merchant-chip:hover .mdom{color:var(--teal-deep)}

/* Λογότυπο καταστήματος: μπαίνει ολόκληρο μέσα στο πλαίσιο (contain), χωρίς κόψιμο.
   Χωρίς λογότυπο, φαίνονται τα αρχικά του ονόματος. */
.store-logo{display:grid;place-items:center;flex:none;width:92px;height:52px;padding:.3rem;border-radius:12px;background:var(--teal-soft);
  font-weight:800;font-size:1.05rem;letter-spacing:.02em;color:var(--teal-deep);overflow:hidden}
/* πριν: .store-logo.has-logo{background:var(--white);box-shadow:inset 0 0 0 1px var(--line)} */
/* Χωρίς πλαίσιο γύρω από το λογότυπο, χωρίς στρογγύλεμα και χωρίς σταθερό κουτί:
   το ύψος το ορίζει η ίδια η εικόνα (μέχρι το max-height), οπότε ούτε κόβεται
   ούτε πέφτει πάνω στο όνομα — ο χώρος της κάρτας μεγαλώνει μαζί της.
   πριν: σταθερό 92x52 με overflow:hidden (έκοβε) ή overflow:visible (έπεφτε στα γράμματα). */
.store-logo.has-logo{display:block;width:auto;height:auto;max-width:100%;max-height:56px;
  background:transparent;box-shadow:none;padding:0;border-radius:0;overflow:visible}
.store-logo.has-logo img{display:block;width:auto;height:auto;max-width:100%;max-height:56px;margin:0 auto;object-fit:contain}
/* Σελίδα καταστήματος: το ίδιο, σε μεγαλύτερο μέγεθος. */
.store-logo-lg.has-logo,.store-logo-lg.has-logo img{max-height:96px}
.store-logo img{width:100%;height:100%;object-fit:contain}
.store-logo-lg{width:150px;height:96px;border-radius:var(--r-md);font-size:1.6rem}

.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.trust-item{display:flex;gap:.8rem;align-items:flex-start}
.trust-item svg{width:24px;height:24px;color:var(--teal);flex:none;margin-top:.15rem}
.trust-item b{display:block}
.trust-item span{color:var(--ink-soft);font-size:.92rem}

.cta-band{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(1.5rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.75);margin-top:.4rem;max-width:56ch}

/* ---------- Product cards ---------- */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}
/* Carousel προϊόντων με Owl Carousel (A.carousel στο js/app.js).
   Το Owl βάζει δικό του block layout, οπότε το grid του .product-grid φεύγει.
   Το padding στο stage-outer κρατά μέσα το σήκωμα και τη σκιά της κάρτας στο
   hover, που αλλιώς θα τα έκοβε το overflow:hidden του Owl. */
.product-grid.owl-carousel{display:block;position:relative}
.product-carousel .owl-stage-outer{padding:.4rem .2rem 1.4rem;margin:-.4rem -.2rem -1.4rem}
.product-carousel .owl-item{height:100%}
.product-carousel .owl-stage{display:flex}
.product-carousel .owl-item .pcard{height:100%}
.product-carousel .owl-nav button.owl-prev,.product-carousel .owl-nav button.owl-next{
  position:absolute;top:calc(50% - 32px);z-index:2;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line)!important;border-radius:50%;background:var(--white)!important;color:var(--ink)!important;box-shadow:var(--shadow-sm);
  transition:opacity .2s,border-color .2s;cursor:pointer}
.product-carousel .owl-nav button svg{width:20px;height:20px}
.product-carousel .owl-nav button:hover{border-color:var(--ink)!important}
.product-carousel .owl-nav button.owl-prev{inset-inline-start:-22px}
.product-carousel .owl-nav button.owl-next{inset-inline-end:-22px}
.product-carousel .owl-nav button.disabled{opacity:0;pointer-events:none}
.product-carousel .owl-nav.disabled{display:none}
.product-carousel.owl-drag .owl-item{cursor:grab}
.product-carousel.owl-grab .owl-item{cursor:grabbing}
.pcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:.9rem;display:flex;flex-direction:column;gap:.55rem;color:var(--ink);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;position:relative}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--mist-2);text-decoration:none}
.pcard .img{aspect-ratio:1/1;border-radius:var(--r-sm);background:var(--paper);display:grid;place-items:center;overflow:hidden}
.pcard .img img{width:100%;height:100%;object-fit:contain}
.pcard .brand-l{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pcard .title{font-weight:500;font-size:.95rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.pcard .price{display:flex;align-items:baseline;gap:.4rem;margin-top:auto}
.pcard .price small{color:var(--muted);font-size:.8rem}
.pcard .price b{font-size:1.2rem;font-weight:800;color:var(--ink)}
.pcard .offers{display:block;text-align:center;padding:.3rem .6rem;font-size:.82rem;color:var(--teal-deep);font-weight:600}
.pcard .badge{position:absolute;top:.9rem;inset-inline-start:.9rem;background:var(--coral);color:#fff;font-size:.7rem;font-weight:700;padding:.2rem .5rem;border-radius:var(--r-pill);letter-spacing:.04em}
/* «Προβεβλημένο»: φαίνεται ΜΟΝΟ μέσα σε λίστες που έχουν .prio-mark, δηλαδή
   εκεί που η προτεραιότητα του καταστήματος όντως αλλάζει σειρά. Διακριτικό,
   πάνω δεξιά, ώστε να μη μπερδεύεται με την κόκκινη ταμπέλα πτώσης τιμής. */
.hcmp-info .ad-tag{letter-spacing:.05em;text-transform:uppercase;font-size:.62rem;font-weight:600}
.pcard .ad-tag{display:none}
.prio-mark .pcard .ad-tag{display:inline-block;position:absolute;top:.9rem;inset-inline-end:.9rem;z-index:1;
  background:rgba(255,255,255,.92);color:var(--muted);border:1px solid var(--line);
  font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:.15rem .45rem;border-radius:var(--r-pill)}
/* Η τιμή σύγκρισης της πτώσης, κάτω από την τιμή: ο νόμος θέλει να
   φαίνεται δίπλα στον ισχυρισμό, όχι μόνο σε tooltip. */
.pcard .drop-ref{display:block;margin-top:.15rem;font-size:.74rem;color:var(--muted)}
.pcard .drop-ref .num{text-decoration:line-through}
.best .drop-line{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;margin-top:.5rem;font-size:.85rem;color:var(--muted)}
.best .drop-line b{color:var(--ink-soft);text-decoration:line-through}
.badge-inline{background:var(--coral);color:#fff;font-size:.72rem;font-weight:700;padding:.15rem .5rem;border-radius:var(--r-pill);letter-spacing:.03em}

/* ---------- Search / category layout ---------- */
.results-page{padding-top:1.5rem;padding-bottom:3rem}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:.35rem;font-size:.85rem;color:var(--muted);margin-bottom:1rem}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--teal-deep)}
.breadcrumbs span{color:var(--ink);font-weight:500}
.results-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem}
.results-head h1{font-size:clamp(1.3rem,2.5vw,1.8rem)}
.results-head .count{color:var(--muted);font-size:.95rem}
.results-head .res-subtitle{max-width:70ch;margin:.3rem 0 .15rem;color:var(--ink-soft);font-size:1rem;line-height:1.5}
.results-tools{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.select{display:inline-flex;align-items:center;gap:.4rem;background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-pill);padding:0 .5rem 0 .9rem;height:40px;font-size:.9rem}
.select select{border:0;background:none;outline:0;font-weight:600;height:100%;padding-inline-end:.2rem}
/* Λίστα ταξινόμησης: enhanceSelect() στο includes/scripts.js */
.select.is-enhanced{position:relative;padding:0 .3rem 0 .9rem;transition:border-color .2s,box-shadow .2s}
.select.is-enhanced:hover{border-color:var(--line-strong)}
.select.is-open{border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-soft)}
.select-btn{display:inline-flex;align-items:center;gap:.35rem;height:100%;padding:0 .5rem 0 .1rem;border:0;border-radius:var(--r-pill);background:none;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.select-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.select-chev{width:16px;height:16px;color:var(--muted);transition:transform .3s var(--ease),color .2s}
.select.is-open .select-chev{transform:rotate(180deg);color:var(--teal-deep)}
.select-list{position:absolute;top:calc(100% + 8px);right:0;z-index:30;min-width:max(100%,260px);margin:0;padding:.4rem;list-style:none;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);outline:0;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .16s var(--ease),transform .22s var(--ease),visibility 0s linear .22s}
.select.is-open .select-list{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .18s var(--ease),transform .24s var(--ease),visibility 0s}
.select-list li{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:.55rem;padding:.6rem .8rem .6rem .6rem;border-radius:var(--r-sm);font-size:.92rem;color:var(--ink-soft);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.select-list li svg{width:16px;height:16px;color:var(--teal);opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s var(--ease)}
.select-list li.is-focus{background:var(--paper);color:var(--ink)}
.select-list li[aria-selected="true"]{background:var(--teal-soft);color:var(--teal-deep);font-weight:600}
.select-list li[aria-selected="true"] svg{opacity:1;transform:none}
[dir="rtl"] .select-list{right:auto;left:0;transform-origin:top left}
.results-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:1.5rem;align-items:start}
.filters{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:1rem;position:sticky;top:88px;max-height:calc(100vh - 100px);overflow:auto}
.filters h2{font-size:1rem;display:flex;justify-content:space-between;align-items:center}
.filters .clear{font-size:.8rem;font-weight:600;color:var(--coral);background:none;border:0;padding:0}
.fgroup{border-top:1px solid var(--line);padding:.9rem 0 .2rem;margin-top:.9rem}
.fgroup:first-of-type{border-top:0;margin-top:.5rem;padding-top:.5rem}
.fgroup h3{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;font-weight:700}
.fgroup label{display:flex;align-items:center;gap:.55rem;padding:.3rem 0;font-size:.92rem;cursor:pointer}
.fgroup label span.c{margin-inline-start:auto;color:var(--muted);font-size:.8rem}
/* Χρωματάκι στο φίλτρο χρώματος. Το λευκό θέλει περίγραμμα για να φαίνεται. */
.f-colors .sw{width:16px;height:16px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(14,43,40,.22)}
/* εικόνα αντί για χρωματάκι (πολύχρωμο, animal print): κόβεται στρογγυλή */
.f-colors .sw-img{background-size:cover;background-position:center;background-repeat:no-repeat}
/* Μέγεθος: πλακίδια, το μέγεθος μεγάλο και το πλήθος από κάτω */
.f-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:.45rem;padding-top:.2rem}
.fgroup .f-sizes label.size-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;
  padding:.5rem .25rem .4rem;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--white);
  cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.f-sizes .size-tile input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.f-sizes .size-tag{font-size:.95rem;font-weight:700;letter-spacing:.02em;color:var(--ink);line-height:1.1}
.fgroup .f-sizes label.size-tile span.c{margin:0;font-size:.7rem;color:var(--muted);line-height:1}
.f-sizes .size-tile:hover{border-color:var(--ink)}
.f-sizes .size-tile.on{border-color:var(--teal);background:var(--teal-soft)}
.f-sizes .size-tile.on .size-tag{color:var(--teal-deep)}
.f-sizes .size-tile.empty{opacity:.45}
.f-sizes .size-tile:focus-within{outline:2px solid var(--teal);outline-offset:2px}
.f-colors .sw-none{background:conic-gradient(#D64545,#FDD835,#2E7D32,#1E88E5,#7B1FA2,#D64545)}
.fgroup input[type=checkbox]{width:17px;height:17px;accent-color:var(--teal);margin:0}
.fgroup .more-toggle{background:none;border:0;padding:.3rem 0;color:var(--teal-deep);font-weight:600;font-size:.85rem}
.price-range{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.4rem}
.price-range input{width:100%;min-width:0;height:36px;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0 .6rem;background:var(--paper)}
.price-range input:focus{border-color:var(--teal);outline:0;background:var(--white)}
.filters-toggle{display:none}
.active-filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.active-filters button{display:inline-flex;align-items:center;gap:.35rem;background:var(--teal-soft);border:1px solid var(--mist-2);color:var(--teal-deep);border-radius:var(--r-pill);padding:.25rem .3rem .25rem .7rem;font-size:.85rem;font-weight:500}
.active-filters button svg{width:16px;height:16px}
.empty{background:var(--white);border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:3rem 1.5rem;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:1.1rem;margin-bottom:.4rem}
.pager{display:flex;justify-content:center;gap:.35rem;margin-top:1.5rem;flex-wrap:wrap}
.pager button{min-width:40px;height:40px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--white);font-weight:600}
.pager button[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}
.pager button:disabled{opacity:.4;cursor:default}
.filters .close-filters{display:none}
.backdrop{position:fixed;inset:0;background:rgba(14,43,40,.4);z-index:65}

/* ---------- Product page ---------- */
.product-page{padding-top:1.5rem;padding-bottom:3rem}
.product-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1rem,3vw,2rem)}
.gallery{aspect-ratio:1/1;background:var(--paper);border-radius:var(--r-md);display:grid;place-items:center;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:contain}
.product-info{display:flex;flex-direction:column;gap:1rem}
.product-info .brand-l{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.product-info h1{font-size:clamp(1.4rem,2.6vw,2rem)}
.best{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;align-items:center;background:var(--teal-soft);border:1px solid var(--mist-2);border-radius:var(--r-md);padding:1rem 1.2rem}
.best .lbl{grid-column:1/-1;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-deep)}
.best .p{font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.best .from{color:var(--ink-soft);font-size:.95rem}
.best .from b{color:var(--ink)}
.best .cta{grid-column:1/-1;display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.5rem}
.key-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem}
.key-specs div{background:var(--paper);border-radius:var(--r-sm);padding:.55rem .7rem;font-size:.85rem}
.key-specs div small{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.gtin{font-size:.8rem;color:var(--muted)}

.offers-section{margin-top:2rem}
.offers-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem}
.offers-head p{color:var(--muted);font-size:.9rem}
.offers{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.offers-tbl{overflow-x:auto}
table.offers-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:720px}
.offers-table th{text-align:start;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:.8rem 1rem;border-bottom:1px solid var(--line);background:var(--paper);white-space:nowrap}
.offers-table th button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;text-transform:inherit;letter-spacing:inherit}
.offers-table th button[aria-sort]{color:var(--teal-deep)}
.offers-table td{padding:.9rem 1rem;border-bottom:1px solid var(--line);vertical-align:middle}
.offers-table tr:last-child td{border-bottom:0}
.offers-table tr.best-row td{background:rgba(18,181,172,.06)}
.offers-table .m{display:flex;flex-direction:column;gap:.1rem}
.offers-table .m a{font-weight:600;color:var(--ink)}
.offers-table .m small{color:var(--muted);font-size:.8rem}
.offers-table .tot{font-weight:800;font-size:1.05rem}
.offers-table .upd{font-size:.78rem;color:var(--muted);white-space:nowrap}
.avail{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:500;white-space:nowrap}
.avail::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal)}
.avail.soon::before{background:var(--amber)}
.avail.out::before{background:var(--red)}
.best-pill{display:inline-block;background:var(--teal);color:#fff;font-size:.68rem;font-weight:700;padding:.15rem .5rem;border-radius:var(--r-pill);margin-inline-start:.4rem;vertical-align:middle;letter-spacing:.04em}
.offer-cards{display:none}

.two-col{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1.5rem;margin-top:2rem;align-items:start}
.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:1.4rem}
.panel h2{font-size:1.15rem;margin-bottom:1rem}
.desc{color:var(--ink-soft);line-height:1.6}
.specs{width:100%;border-collapse:collapse;font-size:.92rem}
.specs td{padding:.5rem 0;border-bottom:1px solid var(--line)}
.specs td:first-child{color:var(--muted);width:40%}
.specs tr:last-child td{border-bottom:0}
.chart{width:100%;height:auto;display:block}
.chart-legend{display:flex;gap:1.2rem;font-size:.82rem;color:var(--muted);margin-top:.6rem;flex-wrap:wrap}
.chart-legend b{color:var(--ink)}
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--teal);margin-inline-end:.35rem;vertical-align:middle;font-style:normal}

/* ---------- Store page ---------- */
.store-head{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.2rem,3vw,2rem);display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.5rem;align-items:center;margin-bottom:1.5rem}

.store-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;color:var(--ink-soft);font-size:.92rem;margin-top:.5rem}
.store-meta b{color:var(--ink)}
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.store-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:1.1rem;display:flex;flex-direction:column;gap:.4rem;color:var(--ink)}
.store-card .store-logo{margin-bottom:.35rem}
.store-card:hover{border-color:var(--teal);text-decoration:none;box-shadow:var(--shadow-md)}
.store-card b{font-size:1.05rem}
.store-card .dom{color:var(--teal-deep);font-size:.88rem}
.store-card .sm{color:var(--muted);font-size:.85rem}

/* ---------- Static pages ---------- */
.page{padding-top:clamp(2rem,5vw,4rem);padding-bottom:clamp(2rem,5vw,4rem)}
.page-head{margin-bottom:2rem;max-width:64ch}
.page-head p{color:var(--ink-soft);font-size:1.1rem;margin-top:.6rem}
.prose{max-width:68ch;display:flex;flex-direction:column;gap:1rem;color:var(--ink-soft);line-height:1.65}
.prose h2{color:var(--ink);margin-top:1.2rem;font-size:1.35rem}
.prose h3{color:var(--ink);margin-top:.6rem}
.prose ul,.prose ol{margin:0;padding-inline-start:1.3rem;display:flex;flex-direction:column;gap:.35rem}
.prose strong{color:var(--ink)}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1.5rem}
.info-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:1.3rem;display:flex;flex-direction:column;gap:.4rem}
.info-card h3{font-size:1rem}
.info-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;font-size:.92rem}
.info-card dt{color:var(--muted)}
.info-card dd{margin:0;font-weight:500}
.form{display:grid;gap:1rem;max-width:560px}
.form label{display:flex;flex-direction:column;gap:.35rem;font-weight:500;font-size:.92rem}
.form input,.form textarea,.form select{height:46px;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0 .9rem;background:var(--white);font-weight:400}
.form textarea{height:auto;min-height:140px;padding:.7rem .9rem;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--teal);outline:0;box-shadow:0 0 0 4px rgba(18,181,172,.15)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:1.5rem}
.plan{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;display:flex;flex-direction:column;gap:.9rem}
.plan.featured{border-color:var(--teal);box-shadow:var(--shadow-md)}
.plan .pn{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep);font-weight:700}
.plan .pp{font-size:2rem;font-weight:800;letter-spacing:-.02em}
.plan .pp small{font-size:.9rem;font-weight:500;color:var(--muted)}
.plan ul{margin:0;padding-inline-start:1.2rem;color:var(--ink-soft);font-size:.92rem;display:flex;flex-direction:column;gap:.35rem}
.plan .btn{margin-top:auto}

/* ---------- Go / redirect page ---------- */
.go-box{max-width:520px;margin:4rem auto;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:2.5rem;text-align:center;display:flex;flex-direction:column;gap:1rem;align-items:center}
.spinner{width:40px;height:40px;border-radius:50%;border:4px solid var(--mist);border-top-color:var(--teal);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Footer ---------- */
.site-footer{background:var(--white);border-top:1px solid var(--line);margin-top:3rem;padding:3rem 0 2rem;color:var(--ink-soft);font-size:.92rem}
/* λογότυπο + όσες στήλες φαίνονται (--fcols, από το includes/footer.php) */
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(var(--fcols,3),minmax(0,1fr));gap:2rem}
.footer-grid h4{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:.8rem}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.footer-grid a{color:var(--ink-soft)}
.footer-grid a:hover{color:var(--teal-deep)}
.footer-brand{display:flex;flex-direction:column;gap:.8rem}
.footer-brand img{height:34px;width:auto;align-self:flex-start}
.footer-brand address{font-style:normal;line-height:1.6}
.footer-social{display:flex;flex-wrap:wrap;gap:.45rem}
.footer-social a{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;color:var(--ink-soft);transition:background .2s,border-color .2s,color .2s}
.footer-social a:hover{background:var(--teal-soft);border-color:var(--teal);color:var(--teal-deep)}
.footer-social svg{width:17px;height:17px}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;border-top:1px solid var(--line);margin-top:2rem;padding-top:1.2rem;font-size:.82rem;color:var(--muted)}
.footer-bottom .css-badge{display:inline-flex;align-items:center;gap:.4rem}
.footer-bottom .css-badge i{width:8px;height:8px;border-radius:50%;background:var(--teal);font-style:normal}

/* ---------- Cookie consent (js/cookies.js) ---------- */
body.ck-noscroll{overflow:hidden}
.ck-logo img{height:28px;width:auto;display:block}
.ck-btn{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.2rem;border-radius:var(--r-pill);border:1.5px solid transparent;font-weight:600;font-size:.875rem;line-height:1;white-space:nowrap;cursor:pointer;transition:background .2s var(--ease),color .2s,border-color .2s,transform .2s var(--ease)}
.ck-btn:active{transform:scale(.98)}
.ck-btn-primary{background:var(--teal);color:#fff}
.ck-btn-primary:hover{background:var(--teal-deep)}
.ck-btn-outline{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.ck-btn-outline:hover{border-color:var(--ink);background:var(--white)}
.ck-btn-link{background:none;border:0;padding:.35rem 0;font-size:.82rem;font-weight:600;color:var(--teal-deep);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(11,128,122,.35)}
.ck-btn-link:hover{text-decoration-color:currentColor}
/* Μπάρα κάτω δεξιά */
@keyframes ck-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ck-bar{position:fixed;inset-inline-end:1.25rem;bottom:1.25rem;z-index:9000;width:min(320px,calc(100vw - 2.5rem));background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 30px 70px -30px rgba(14,43,40,.45),0 2px 8px rgba(14,43,40,.06);padding:1.3rem 1.35rem 1.2rem;animation:ck-in .45s var(--ease) both}
.ck-bar .ck-logo{margin-bottom:.9rem}
.ck-bar-title{font-size:1rem;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:0 0 .4rem}
.ck-bar-text{font-size:.84rem;line-height:1.6;color:var(--muted)}
.ck-bar-text a{color:var(--teal-deep);text-decoration:underline}
.ck-bar-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.1rem}
.ck-bar-buttons .ck-btn-primary,.ck-bar-buttons .ck-btn-outline{flex:1 1 auto}
.ck-bar-buttons .ck-btn-link{flex-basis:100%;text-align:center;margin-top:.15rem}
/* Παράθυρο ρυθμίσεων */
@keyframes ck-fade{from{opacity:0}to{opacity:1}}
@keyframes ck-pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.ck-overlay{position:fixed;inset:0;z-index:9100;background:rgba(14,43,40,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:1rem;animation:ck-fade .2s ease both}
.ck-modal{outline:none;background:var(--white);width:100%;max-width:820px;max-height:calc(100vh - 2rem);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;animation:ck-pop .3s var(--ease) both}
.ck-modal-head{display:flex;align-items:center;gap:1rem;padding:1.15rem 1.5rem;border-bottom:1px solid var(--line)}
.ck-modal-head h2{font-size:1rem;font-weight:700;letter-spacing:-.01em;margin:0;flex:1}
.ck-close{width:36px;height:36px;border-radius:50%;border:0;background:var(--paper);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);transition:background .2s,color .2s}
.ck-close:hover{background:var(--mist);color:var(--ink)}
.ck-close svg{width:16px;height:16px}
.ck-modal-body{display:grid;grid-template-columns:210px 1fr;min-height:320px;overflow:hidden;min-width:0}
.ck-modal-body>*{min-width:0}
.ck-tabs{display:flex;flex-direction:column;gap:.15rem;padding:.9rem .75rem;background:var(--paper);border-inline-end:1px solid var(--line)}
.ck-tab{text-align:start;padding:.7rem .9rem;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-soft);font-weight:500;font-size:.92rem;cursor:pointer;transition:background .15s,color .15s}
.ck-tab:hover{background:var(--mist);color:var(--ink)}
.ck-tab.active{background:var(--white);color:var(--teal-deep);font-weight:700;box-shadow:var(--shadow-sm)}
.ck-panels{padding:1.5rem 1.75rem;overflow-y:auto}
.ck-panel{animation:ck-fade .25s ease both}
.ck-panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.ck-panel-head h3{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin:0}
.ck-panel-text{font-size:.9rem;line-height:1.7;color:var(--ink-soft)}
.ck-panel-text p{margin:0 0 .75rem}
.ck-modal-foot{display:flex;justify-content:flex-end;gap:.6rem;padding:1rem 1.5rem;border-top:1px solid var(--line);background:var(--paper)}
/* Διακόπτης */
.ck-switch{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;flex-shrink:0}
.ck-switch input{position:absolute;opacity:0;width:0;height:0}
.ck-slider{position:relative;width:42px;height:24px;border-radius:999px;background:var(--mist-2);transition:background .2s}
.ck-slider:before{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s var(--ease)}
.ck-switch input:checked+.ck-slider{background:var(--teal)}
.ck-switch input:checked+.ck-slider:before{transform:translateX(18px)}
[dir="rtl"] .ck-switch input:checked+.ck-slider:before{transform:translateX(-18px)}
.ck-switch input:focus-visible+.ck-slider{outline:2px solid var(--teal-deep);outline-offset:2px}
.ck-switch.is-locked{cursor:default}
.ck-switch.is-locked .ck-slider{background:var(--teal);opacity:.55}
.ck-sw-label{font-size:.78rem;font-weight:600;color:var(--muted);min-width:56px}
.ck-sw-label:after{content:attr(data-off)}
.ck-switch input:checked~.ck-sw-label:after{content:attr(data-on)}
.ck-switch input:checked~.ck-sw-label{color:var(--teal-deep)}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r-pill);font-size:.9rem;z-index:90;box-shadow:var(--shadow-lg)}

/* ---------- Skeleton ---------- */
.skel{background:linear-gradient(90deg,var(--mist) 25%,var(--paper) 50%,var(--mist) 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--r-sm)}
@keyframes sk{to{background-position:-200% 0}}