@charset "UTF-8";
/* ==========================================================================
   Εκδόσεις Μακρή — makri.css
   Φορτώνεται ΤΕΛΕΥΤΑΙΟ, μετά από όλα τα CSS του template.
   Ολα τα components έχουν πρόθεμα .mk- ώστε να μην συγκρούονται με το OSMart.
   Rollback: αφαίρεσε τη γραμμή φόρτωσης από το includes/template_top.php

   ΠΑΛΕΤΑ
     #f45700  πορτοκαλί λογοτύπου — CTA, badges, ενεργή κατάσταση
     #071ec9  ηλεκτρικό μπλε      — πάνω άκρο gradient
     #000b30  midnight            — κείμενο, footer, βάση gradient
     #ffffff  λευκό               — καμβάς
     #f9fafb  ψυχρό off-white     — κάρτες, πεδία, όρια

   ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ ΚΟΥΜΠΙΩΝ
     Λευκό πάνω σε #f45700 = 3,38:1. Περνά AA μόνο ως large text,
     δηλαδή >=19px bold. Γι' αυτό τα primary CTA είναι 19px/700.
     Στα μικρά badges το κείμενο είναι #000b30 (5,7:1).
   ========================================================================== */

/* --------------------------------------------------------------------------
   ΓΡΑΜΜΑΤΟΣΕΙΡΑ — Manrope (Google Fonts, δωρεαν, πληρη ελληνικα)
   Φορτωνεται απο το includes/template_top.php.
   Αν καποτε αγοραστει αδεια webfont για Zona Pro, αρκει να μπει πρωτη
   στη --mk-ui και να προστεθουν τα @font-face.
   -------------------------------------------------------------------------- */
:root{
  --mk-orange:#f45700;
  --mk-orange-press:#d94d00;
  --mk-orange-soft:#fff3ec;
  --mk-blue:#071ec9;
  --mk-ink:#000b30;
  --mk-ink-70:rgba(0,11,48,.70);
  --mk-ink-55:rgba(0,11,48,.55);
  --mk-white:#ffffff;
  --mk-gray:#f9fafb;
  --mk-line:#e7e9ee;
  --mk-line-dark:rgba(255,255,255,.14);
  --mk-ok:#0f7a4d;
  --mk-grad:linear-gradient(135deg,#071ec9 0%,#000b30 100%);
  --mk-ui:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mk-display:var(--mk-ui);
  --mk-max:1280px;
}

/* Το header, το drawer και το footer εμφανιζονται ΚΑΙ στις εσωτερικες σελιδες,
   που δεν εχουν class="mk-new" στο body. Εκει δεν ισχυει το γενικο reset,
   οποτε το δινουμε στοχευμενα ωστε να μη σπανε απο το Bootstrap 2. */
.mk-topbar,.mk-head,.mk-nav,.mk-drawer,.mk-backdrop,.mk-foot,.mk-sticky,.mk-page{
  font-family:var(--mk-ui);font-size:16px;line-height:1.6;
}
.mk-topbar *,.mk-head *,.mk-nav *,.mk-drawer *,.mk-foot *,.mk-sticky *,.mk-page *{
  box-sizing:border-box;
}
.mk-topbar img,.mk-head img,.mk-nav img,.mk-foot img,.mk-page img{border:0;max-width:100%;height:auto}
.mk-topbar a,.mk-head a,.mk-nav a,.mk-drawer a,.mk-foot a,.mk-page a{text-decoration:none}

/* Εσωτερικη σελιδα χτισμενη με το νεο συστημα */
.mk-page{color:var(--mk-ink);background:var(--mk-white)}
.mk-page h1,.mk-page h2,.mk-page h3{
  font-family:var(--mk-ui);font-weight:600;letter-spacing:-.01em;line-height:1.25;margin:0;
  text-transform:none;
}
.mk-page p,.mk-page ul{margin:0}
.mk-page-head{border-bottom:1px solid var(--mk-line)}
.mk-page-head .mk-wrap{padding:44px 24px 36px}
.mk-page-head h1{font-size:34px;margin-bottom:10px}
.mk-page-head p{color:var(--mk-ink-55);max-width:56ch;font-size:16px}
.mk-sub-h{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--mk-ink-55);margin:26px 0 10px}

.mk-contact{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.mk-contact li{display:flex;gap:14px;align-items:flex-start}
.mk-contact .mk-i{color:var(--mk-orange);margin-top:2px;flex:0 0 auto}
.mk-contact b{display:block;font-size:16px;font-weight:600;margin-bottom:2px}
.mk-contact b a:hover{color:var(--mk-blue)}
.mk-contact span{font-size:13.5px;color:var(--mk-ink-55)}

@media (max-width:860px){
  .mk-page-head .mk-wrap{padding:26px 16px 22px}
  .mk-page-head h1{font-size:24px}
}

/* --------------------------------------------------------------------------
   1. ΔΙΟΡΘΩΣΗ ΕΛΛΗΝΙΚΩΝ ΚΕΦΑΛΑΙΩΝ — ισχύει σε ΟΛΕΣ τις σελίδες
   Η CSS uppercase διατηρεί τους τόνους: «ΤΕΛΕΥΤΑΊΑ ΒΙΒΛΙΑ». Ορθογραφικά λάθος.
   -------------------------------------------------------------------------- */
.infoBoxHeading,.infoBoxHeading a,
#mj-footer h3,#mj-footer h4,#mj-footer h5,
.mj-footer h3,.mj-footer h4,.mj-footer h5,
h1,h2,h3,h4,h5,h6,
.module_title,.moduletable h3,.page-header,
.productListingHeader,.pageHeading,
.mk-foot h5,.mk-sh h2{text-transform:none !important}

/* --------------------------------------------------------------------------
   2. ΒΑΣΗ
   -------------------------------------------------------------------------- */
body.mk-new{
  margin:0;background:var(--mk-white);color:var(--mk-ink);
  font-family:var(--mk-ui);font-size:16px;font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body.mk-new *,body.mk-new *::before,body.mk-new *::after{box-sizing:border-box}
body.mk-new img{max-width:100%;height:auto;border:0;display:block}
body.mk-new a{color:inherit;text-decoration:none}
body.mk-new p{margin:0}
body.mk-new h1,body.mk-new h2,body.mk-new h3,body.mk-new h4,body.mk-new h5{
  font-family:var(--mk-ui);font-weight:600;margin:0;line-height:1.25;letter-spacing:-.01em;
}
body.mk-new .mk-serif{font-family:var(--mk-display);font-weight:400;letter-spacing:0}
body.mk-new table,body.mk-new p{font-size:inherit;line-height:inherit}
body.mk-new :focus-visible{outline:2px solid var(--mk-orange);outline-offset:2px}
body.mk-new button{font-family:inherit}

/* Ακύρωση των mj- wrappers στη νέα αρχική */
body.mk-new #mj-maincontent,
body.mk-new #mj-contentarea,
body.mk-new .mj-subcontainer,
body.mk-new #mj-container{
  width:auto !important;max-width:none !important;
  float:none !important;margin:0 !important;padding:0 !important;
  right:auto !important;left:auto !important;
}

.mk-wrap{max-width:var(--mk-max);margin:0 auto;padding:0 24px}

/* Εικονίδια: stroke, currentColor, χωρίς γέμισμα */
.mk-i{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mk-i-lg{width:24px;height:24px;stroke-width:1.5}

/* --------------------------------------------------------------------------
   3. TOPBAR
   -------------------------------------------------------------------------- */
.mk-topbar{background:var(--mk-ink);color:rgba(255,255,255,.78);font-size:12.5px}
.mk-topbar .mk-wrap{display:flex;gap:22px;flex-wrap:wrap;align-items:center;padding:9px 24px}
.mk-topbar .mk-hi{color:#fff;font-weight:500}
.mk-topbar .mk-right{margin-left:auto;display:flex;gap:20px}
.mk-topbar a:hover{color:#fff}

/* --------------------------------------------------------------------------
   4. HEADER — λευκό, εικονίδια midnight
   -------------------------------------------------------------------------- */
.mk-head{background:var(--mk-white);border-bottom:1px solid var(--mk-line)}
.mk-head .mk-wrap{display:flex;align-items:center;gap:32px;padding:18px 24px}
.mk-logo{display:flex;align-items:center;flex-shrink:0}
.mk-logo img{max-height:52px;width:auto}
.mk-logo .mk-logo-b{max-height:46px;margin-right:10px}

.mk-search{flex:1;max-width:520px;min-width:0}
.mk-search form{
  display:flex;align-items:center;margin:0;background:var(--mk-gray);
  border:1px solid var(--mk-line);border-radius:6px;padding:0 4px 0 12px;
}
.mk-search form:focus-within{border-color:var(--mk-ink);background:#fff}
.mk-search .mk-i{color:var(--mk-ink-55)}
.mk-search input[type=text]{
  flex:1;min-width:0;border:0;background:transparent;padding:11px 10px;
  font-family:var(--mk-ui);font-size:14.5px;color:var(--mk-ink);
}
.mk-search input[type=text]:focus{outline:0}
.mk-search input[type=text]::placeholder{color:var(--mk-ink-55)}
.mk-search button{
  border:0;border-radius:4px;background:var(--mk-ink);color:#fff;
  padding:9px 16px;font-size:13.5px;font-weight:600;cursor:pointer;margin:4px 0;
}
.mk-search button:hover{background:var(--mk-blue)}

.mk-util{margin-left:auto;display:flex;gap:8px;align-items:center}
.mk-util a{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;
  font-size:13.5px;font-weight:500;color:var(--mk-ink);white-space:nowrap;position:relative;
}
.mk-util a:hover{background:var(--mk-gray)}
.mk-bubble{
  position:absolute;top:2px;right:2px;
  background:var(--mk-orange);color:var(--mk-ink);
  font-size:10.5px;font-weight:700;line-height:1;
  min-width:17px;height:17px;border-radius:9px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
}

/* --------------------------------------------------------------------------
   5. NAV
   -------------------------------------------------------------------------- */
.mk-nav{background:var(--mk-white);border-bottom:1px solid var(--mk-line);position:relative;z-index:40}
.mk-nav .mk-wrap{display:flex;gap:28px;flex-wrap:wrap;align-items:stretch;padding:0 24px}
.mk-nav>.mk-wrap>a,.mk-nav .mk-drop>a{
  display:flex;align-items:center;gap:6px;padding:14px 0;
  font-size:14.5px;font-weight:500;color:var(--mk-ink);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.mk-nav a:hover,.mk-nav .mk-drop:hover>a{border-bottom-color:var(--mk-line)}
.mk-nav a.mk-on{border-bottom-color:var(--mk-orange)}
.mk-nav .mk-last{margin-left:auto;color:var(--mk-ink-70);font-weight:400}
.mk-nav .mk-i{width:14px;height:14px;stroke-width:2}

.mk-drop{position:relative}
.mk-panel{
  display:none;position:absolute;top:100%;left:-18px;min-width:640px;
  background:var(--mk-white);border:1px solid var(--mk-line);border-radius:8px;
  box-shadow:0 18px 40px rgba(0,11,48,.12);padding:22px;z-index:50;
}
.mk-drop:hover .mk-panel,.mk-drop:focus-within .mk-panel{display:block}
.mk-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 34px}
.mk-panel h4{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--mk-ink-55);margin:0 0 8px}
.mk-panel a{
  display:flex;justify-content:space-between;gap:14px;padding:6px 8px;
  font-size:14px;border:0 !important;margin:0 !important;border-radius:4px;
}
.mk-panel a span{color:var(--mk-ink-55);font-size:12.5px}
.mk-panel a:hover{background:var(--mk-gray);color:var(--mk-blue)}

/* --------------------------------------------------------------------------
   6. ΚΟΥΜΠΙΑ
   -------------------------------------------------------------------------- */
.mk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--mk-orange);color:#fff;
  padding:13px 26px;border:0;border-radius:6px;cursor:pointer;
  font-family:var(--mk-ui);font-size:19px;font-weight:700;line-height:1.2;
  letter-spacing:-.01em;text-align:center;
}
.mk-btn:hover{background:var(--mk-orange-press);color:#fff}
.mk-btn .mk-i{stroke-width:2}

/* Δευτερεύον: διάφανο με λεπτό περίγραμμα midnight */
.mk-btn-2{
  background:transparent;color:var(--mk-ink);border:1px solid var(--mk-ink);
  font-size:15px;font-weight:600;padding:12px 24px;
}
.mk-btn-2:hover{background:var(--mk-ink);color:#fff}

/* Μικρό primary, για κάρτες */
.mk-btn-sm{font-size:19px;font-weight:700;padding:11px 18px;width:100%}

.mk-btn-ghost{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);
  font-size:15px;font-weight:600;padding:12px 24px;
}
.mk-btn-ghost:hover{background:#fff;color:var(--mk-ink)}

/* --------------------------------------------------------------------------
   7. USP BAR
   -------------------------------------------------------------------------- */
.mk-usp{background:var(--mk-gray);border-bottom:1px solid var(--mk-line)}
.mk-usp .mk-wrap{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
  gap:20px;padding:20px 24px;
}
.mk-usp-item{display:flex;gap:13px;align-items:flex-start}
.mk-usp-item .mk-i{color:var(--mk-orange);margin-top:2px}
.mk-usp-item b{display:block;font-size:14px;font-weight:600;color:var(--mk-ink);margin-bottom:1px}
.mk-usp-item span{font-size:12.5px;color:var(--mk-ink-55)}

/* --------------------------------------------------------------------------
   8. BENTO HERO
   -------------------------------------------------------------------------- */
.mk-bento>.mk-wrap{padding:32px 24px 40px}
.mk-bento-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:minmax(126px,auto);gap:14px;
}
.mk-tile{
  position:relative;background:var(--mk-gray);border:1px solid var(--mk-line);
  border-radius:10px;padding:22px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.mk-tile:hover{border-color:var(--mk-ink)}
.mk-tile .mk-kick{
  font-size:11px;font-weight:600;letter-spacing:.08em;
  color:var(--mk-orange);margin-bottom:8px;
}
.mk-tile h3{font-size:19px;margin-bottom:5px}
.mk-tile p{font-size:13px;color:var(--mk-ink-55);max-width:38ch}
.mk-tile .mk-more{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:600;margin-top:13px;color:var(--mk-ink);
}
.mk-tile .mk-more .mk-i{width:15px;height:15px;stroke-width:2}

/* Κύριο πλακίδιο: gradient #071ec9 -> #000b30 */
.mk-tile-lead{
  grid-column:span 2;grid-row:span 2;
  background:var(--mk-grad);border-color:transparent;color:#fff;
  display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:26px;
  align-items:center;justify-content:normal;padding:32px;
}
.mk-tile-lead:hover{border-color:transparent}
.mk-tile-lead h3{font-family:var(--mk-display);font-weight:400;font-size:31px;color:#fff;margin-bottom:9px;letter-spacing:0}
.mk-tile-lead .mk-byline{font-size:13px;color:rgba(255,255,255,.72);margin-bottom:18px}
.mk-tile-lead blockquote{
  font-family:var(--mk-display);font-size:17px;line-height:1.45;color:rgba(255,255,255,.88);
  margin:0 0 22px;padding-left:16px;border-left:2px solid var(--mk-orange);max-width:34ch;
}
.mk-tile-lead .mk-lead-cover{border-radius:6px;overflow:hidden;box-shadow:0 16px 34px rgba(0,11,48,.45);background:#fff;align-self:center}

.mk-tile-wide{grid-column:span 2}
.mk-tile-accent{background:var(--mk-orange-soft);border-color:#ffd9c4}
.mk-tile-accent h3{color:var(--mk-ink)}
.mk-tile-dark{background:var(--mk-ink);border-color:var(--mk-ink);color:#fff}
.mk-tile-dark h3{color:#fff}
.mk-tile-dark p{color:rgba(255,255,255,.7)}
.mk-tile-dark .mk-more{color:#fff}

/* --------------------------------------------------------------------------
   9. ΕΝΟΤΗΤΕΣ
   -------------------------------------------------------------------------- */
.mk-sec>.mk-wrap{padding:52px 24px}
.mk-sec-gray{background:var(--mk-gray)}
.mk-sh{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px}
.mk-sh h2{font-size:25px;font-weight:600}
.mk-sh a{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:600;color:var(--mk-blue);white-space:nowrap;
}
.mk-sh a .mk-i{width:15px;height:15px;stroke-width:2}
.mk-sh a:hover{color:var(--mk-orange)}

/* Πλακιδια θεματικων: 5 ανα σειρα σε desktop, 3 σε mobile.
   Ιδια γωνια με τα CTA (6px), οχι pill. */
.mk-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.mk-chip{
  background:var(--mk-white);border:1px solid var(--mk-line);border-radius:6px;
  padding:20px 14px;color:var(--mk-ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:11px;text-align:center;min-height:106px;
}
.mk-chip .mk-i{width:26px;height:26px;stroke-width:1.5;color:var(--mk-orange);flex:0 0 auto}
.mk-chip .mk-lbl{font-size:14px;font-weight:500;line-height:1.3}
.mk-chip:hover{border-color:var(--mk-ink);background:var(--mk-gray)}
.mk-chip-hot{border-color:var(--mk-orange);background:var(--mk-orange-soft)}
.mk-chip-all .mk-i{color:var(--mk-blue)}
.mk-chip-all .mk-lbl{color:var(--mk-blue);font-weight:600}

/* --------------------------------------------------------------------------
   10. TABS
   -------------------------------------------------------------------------- */
.mk-tabs{display:flex;border-bottom:1px solid var(--mk-line);margin-bottom:28px;flex-wrap:wrap}
.mk-tab{
  background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:11px 0;margin-right:28px;
  font-size:15px;font-weight:500;color:var(--mk-ink-55);cursor:pointer;
}
.mk-tab:hover{color:var(--mk-ink)}
.mk-tab[aria-selected="true"]{color:var(--mk-ink);border-bottom-color:var(--mk-orange);font-weight:600}
.mk-tabpanel[hidden]{display:none}

/* --------------------------------------------------------------------------
   11. ΚΑΡΤΑ ΒΙΒΛΙΟΥ
   -------------------------------------------------------------------------- */
.mk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:28px}
.mk-bk{display:flex;flex-direction:column}
.mk-bk-ph{
  position:relative;background:var(--mk-gray);border:1px solid var(--mk-line);border-radius:8px;
  margin-bottom:14px;aspect-ratio:2/3;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.mk-bk:hover .mk-bk-ph{border-color:var(--mk-ink)}
.mk-bk-ph img{max-width:100%;max-height:100%;width:auto;height:auto}

/* Badges: κείμενο midnight πάνω σε πορτοκαλί = 5,7:1 */
.mk-badge{
  position:absolute;top:10px;left:10px;z-index:2;
  background:var(--mk-orange);color:var(--mk-ink);
  font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:4px 9px;border-radius:4px;
}
.mk-badge-blue{background:var(--mk-blue);color:#fff}
.mk-badge-soft{background:var(--mk-white);color:var(--mk-ink);border:1px solid var(--mk-line)}
.mk-rank{
  position:absolute;bottom:10px;left:10px;z-index:2;
  background:var(--mk-ink);color:#fff;font-size:13px;font-weight:700;
  width:28px;height:28px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
}
.mk-wish{
  position:absolute;top:8px;right:8px;z-index:3;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--mk-line);
  background:rgba(255,255,255,.94);color:var(--mk-ink-55);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.mk-wish:hover{color:var(--mk-orange);border-color:var(--mk-orange);background:#fff}
.mk-wish .mk-i{width:17px;height:17px}

/* ΣΤΑΘΕΡΟ ΠΛΕΓΜΑ ΚΑΡΤΑΣ
   Καθε στοιχειο εχει δεσμευμενο υψος, ωστε τιτλος, συγγραφεας, τιμη,
   διαθεσιμοτητα και κουμπι να ειναι στην ιδια γραμματικη σε ολες τις καρτες,
   ανεξαρτητα απο το μηκος του τιτλου. Ο τιτλος κοβεται στις 2 γραμμες.
   ΚΑΘΕ καρτα πρεπει να περιεχει ΚΑΙ ΤΑ ΠΕΝΤΕ στοιχεια, εστω κενα:
   h3, .mk-au, .mk-rate, .mk-pr, .mk-st  */
.mk-bk h3{
  font-family:var(--mk-display);font-weight:400;font-size:18px;line-height:1.3;
  letter-spacing:0;margin:0 0 4px;
  min-height:calc(2 * 1.3em);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.mk-bk h3 a:hover{color:var(--mk-blue)}
.mk-bk .mk-au{
  font-size:13px;line-height:1.5;color:var(--mk-ink-55);margin:0 0 6px;
  min-height:1.5em;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.mk-bk .mk-au a:hover{color:var(--mk-blue);text-decoration:underline}
.mk-rate{
  font-size:12.5px;line-height:1.4;color:var(--mk-ink-55);margin:0 0 8px;
  min-height:1.4em;display:flex;gap:6px;align-items:center;
}
.mk-rate .mk-i{width:14px;height:14px;color:var(--mk-orange);fill:var(--mk-orange);stroke:none}
.mk-rate b{color:var(--mk-ink);font-weight:600}
.mk-bk .mk-pr{font-size:17px;line-height:1.3;font-weight:700;color:var(--mk-ink);min-height:1.3em}
.mk-bk .mk-pr s{color:var(--mk-ink-55);font-weight:400;font-size:14px;margin-right:7px}
.mk-bk .mk-st{
  font-size:12.5px;line-height:1.4;color:var(--mk-ok);margin:6px 0 14px;
  min-height:1.4em;display:flex;align-items:center;gap:6px;
}
.mk-bk .mk-st .mk-i{width:14px;height:14px;stroke-width:2}
.mk-bk .mk-btn{margin-top:auto}

/* --------------------------------------------------------------------------
   12. IMPRINTS
   -------------------------------------------------------------------------- */
.mk-imprints{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.mk-imp{
  background:var(--mk-white);border:1px solid var(--mk-line);border-radius:10px;
  padding:24px 22px;display:flex;flex-direction:column;
}
.mk-imp h3{font-family:var(--mk-display);font-weight:400;font-size:24px;margin-bottom:7px;letter-spacing:0}
.mk-imp p{font-size:13.5px;color:var(--mk-ink-55);margin-bottom:18px;flex:1}
.mk-imp .mk-more{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--mk-blue)}
.mk-imp .mk-more .mk-i{width:15px;height:15px;stroke-width:2}
.mk-imp:hover{border-color:var(--mk-ink)}

/* --------------------------------------------------------------------------
   13. ΑΝΑΓΝΩΣΜΑΤΑ
   -------------------------------------------------------------------------- */
.mk-reads{display:grid;grid-template-columns:1.4fr 1fr;gap:36px}
.mk-read-lead .mk-thumb{background:var(--mk-gray);border:1px solid var(--mk-line);border-radius:10px;aspect-ratio:16/9;margin-bottom:16px}
.mk-read-lead .mk-kick{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--mk-orange);margin-bottom:7px;display:block}
.mk-read-lead h3{font-size:25px;line-height:1.25;margin-bottom:8px}
.mk-read-lead p{font-size:14.5px;color:var(--mk-ink-55);max-width:52ch}
.mk-read-lead:hover h3{color:var(--mk-blue)}
.mk-read-list{list-style:none;margin:0;padding:0}
.mk-read-list li{border-top:1px solid var(--mk-line)}
.mk-read-list li:first-child{border-top:0}
.mk-read-list a{display:block;padding:15px 0}
.mk-read-list h4{font-size:16px;font-weight:600;line-height:1.3;margin-bottom:3px}
.mk-read-list span{font-size:12.5px;color:var(--mk-ink-55)}
.mk-read-list a:hover h4{color:var(--mk-blue)}

/* --------------------------------------------------------------------------
   14. ΕΚΔΟΤΙΚΟ / ΙΣΤΟΡΙΑ — gradient
   -------------------------------------------------------------------------- */
.mk-story{background:var(--mk-grad);color:#fff}
.mk-story .mk-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:52px;align-items:center;padding:60px 24px}
.mk-story h2{font-family:var(--mk-display);font-weight:400;font-size:33px;margin-bottom:16px;max-width:22ch;color:#fff;letter-spacing:0}
.mk-story p{margin-bottom:26px;color:rgba(255,255,255,.82);max-width:52ch;font-size:15.5px}
.mk-stats{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mk-stat b{display:block;font-size:34px;font-weight:700;color:var(--mk-orange);line-height:1;margin-bottom:4px}
.mk-stat span{font-size:12.5px;color:rgba(255,255,255,.72)}

/* --------------------------------------------------------------------------
   15. ΒΙΒΛΙΟΠΩΛΕΙΟ
   -------------------------------------------------------------------------- */
.mk-shop .mk-wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:56px 24px}
.mk-shop h2{font-size:27px;margin-bottom:12px}
.mk-shop p{color:var(--mk-ink-55);margin-bottom:22px;max-width:46ch}
.mk-hours{list-style:none;margin:0 0 24px;padding:0;font-size:14px;max-width:340px}
.mk-hours li{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--mk-line);padding:9px 0}
.mk-hours li span{color:var(--mk-ink-55)}
/* ΧΑΡΤΗΣ
   Το iframe ΔΕΝ πρέπει να εξαρτάται από height:100%. Αν ο γονέας δεν έχει
   καθορισμένο ύψος (συμβαίνει σε grid item ανάλογα με το ύψος της διπλανής
   στήλης), το 100% λύνεται σε 0 και βλέπεις κενό κουτί. Το min-height σε
   πίξελ το κάνει αδύνατο. */
.mk-map{
  position:relative;background:var(--mk-gray);
  border:1px solid var(--mk-line);border-radius:10px;overflow:hidden;
  aspect-ratio:4/3;min-height:340px;
}
.mk-map iframe{
  display:block;width:100%;height:100%;min-height:340px;border:0;
}
.mk-map-credit{
  position:absolute;right:0;bottom:0;margin:0;z-index:2;
  background:rgba(255,255,255,.9);border-top-left-radius:6px;
  padding:3px 8px;font-size:10.5px;line-height:1.4;color:var(--mk-ink-55);
}
.mk-map-credit a{color:var(--mk-ink-55)}
.mk-map-credit a:hover{color:var(--mk-blue);text-decoration:underline}
.mk-map-card{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:6px;padding:30px;text-align:left;
}
.mk-map-card .mk-i{color:var(--mk-orange);margin-bottom:6px}
.mk-map-card b{font-size:18px;font-weight:600}
.mk-map-card span{font-size:14px;color:var(--mk-ink-55)}
.mk-map-card .mk-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:13.5px;font-weight:600;color:var(--mk-blue);
}
.mk-map-card .mk-more .mk-i{width:15px;height:15px;stroke-width:2;color:var(--mk-blue);margin:0}
.mk-map-card:hover{border-color:var(--mk-ink)}

/* --------------------------------------------------------------------------
   16. NEWSLETTER
   -------------------------------------------------------------------------- */
.mk-news{background:var(--mk-gray);border-top:1px solid var(--mk-line)}
.mk-news .mk-wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:48px 24px}
.mk-news h2{font-size:25px;margin-bottom:8px}
.mk-news p{font-size:14.5px;color:var(--mk-ink-55);max-width:46ch}
.mk-inl{display:flex;gap:10px;margin:0}
.mk-inl input[type=text],.mk-inl input[type=email]{
  flex:1;min-width:0;border:1px solid var(--mk-line);border-radius:6px;background:#fff;
  padding:13px 14px;font-family:var(--mk-ui);font-size:14.5px;color:var(--mk-ink);
}
.mk-inl input:focus{outline:0;border-color:var(--mk-ink)}
.mk-fine{font-size:12px;color:var(--mk-ink-55);margin-top:11px;max-width:46ch}

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.mk-foot{background:var(--mk-ink);color:rgba(255,255,255,.66);font-size:13.5px}
.mk-foot .mk-wrap{padding:52px 24px 24px}
.mk-fc{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:32px}
.mk-foot h5{font-size:11.5px;font-weight:600;letter-spacing:.08em;color:var(--mk-orange);margin:0 0 14px}
.mk-foot ul{list-style:none;margin:0;padding:0}
.mk-foot li{margin-bottom:9px}
.mk-foot a:hover{color:#fff}
.mk-pay{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
.mk-pay span{
  border:1px solid var(--mk-line-dark);border-radius:4px;color:rgba(255,255,255,.7);
  font-size:10.5px;font-weight:600;padding:5px 9px;letter-spacing:.03em;
}
.mk-social{display:flex;gap:10px;margin-top:16px}
.mk-social a{
  width:36px;height:36px;border:1px solid var(--mk-line-dark);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.8);
}
.mk-social a:hover{border-color:var(--mk-orange);color:var(--mk-orange)}
.mk-fb{
  border-top:1px solid var(--mk-line-dark);margin-top:38px;padding-top:18px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(255,255,255,.5);
}

/* --------------------------------------------------------------------------
   18. MOBILE
   -------------------------------------------------------------------------- */
.mk-burger{display:none;background:none;border:0;color:var(--mk-ink);cursor:pointer;padding:6px;border-radius:6px}
.mk-sticky{display:none}

/* --------------------------------------------------------------------------
   ΣΥΡΟΜΕΝΟ ΜΕΝΟΥ MOBILE — επιπεδα σε βαθος, οχι accordion
   Καθε .mk-pane ειναι μια πληρης οθονη μεσα στο drawer. Το ενεργο ειναι στο 0,
   αυτα που αφησαμε πισω παρκαρουν αριστερα, τα υπολοιπα περιμενουν δεξια.
   Κρυφο εξ ολοκληρου σε desktop.
   -------------------------------------------------------------------------- */
.mk-drawer{display:none}
.mk-backdrop{
  display:none;position:fixed;inset:0;z-index:1000;
  background:rgba(0,11,48,.45);
  opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease;
}
.mk-backdrop.mk-open{opacity:1;visibility:visible}
body.mk-nav-locked{overflow:hidden}

@media (max-width:1000px){
  .mk-nav .mk-wrap{gap:20px}
  .mk-panel{min-width:460px}
  .mk-bento-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-tile-lead{grid-column:span 2}
}

@media (max-width:860px){
  .mk-burger{display:flex}
  .mk-head .mk-wrap{flex-wrap:wrap;gap:10px;padding:12px 16px}
  .mk-burger{order:1}
  .mk-logo{order:2;flex:1;justify-content:center}
  .mk-logo img{max-height:36px}
  .mk-logo .mk-logo-b{max-height:32px;margin-right:8px}
  .mk-util{order:3;margin-left:0;gap:2px}
  .mk-util a span.mk-label{display:none}
  .mk-search{order:4;flex:0 0 100%;max-width:none}

  /* Η desktop πλοηγηση φευγει εντελως. Τη θεση της παιρνει το drawer. */
  .mk-nav{display:none}
  .mk-backdrop{display:block}

  .mk-drawer{
    display:block;position:fixed;top:0;left:0;bottom:0;z-index:1001;
    width:88%;max-width:360px;background:var(--mk-white);
    box-shadow:0 0 44px rgba(0,11,48,.28);
    transform:translateX(-100%);
    visibility:hidden;
    transition:transform .24s ease,visibility .24s ease;
  }
  .mk-drawer.mk-open{transform:translateX(0);visibility:visible}

  .mk-panes{position:relative;height:100%;overflow:hidden}
  .mk-pane{
    position:absolute;inset:0;display:flex;flex-direction:column;
    background:var(--mk-white);
    transform:translateX(100%);visibility:hidden;
    transition:transform .24s ease,visibility .24s ease;
  }
  .mk-pane.is-active{transform:translateX(0);visibility:visible}
  .mk-pane.is-parked{transform:translateX(-26%);visibility:visible}

  .mk-pane-head{
    display:flex;align-items:center;gap:6px;flex:0 0 auto;
    padding:12px 10px 12px 14px;border-bottom:1px solid var(--mk-line);
  }
  .mk-pane-title{
    flex:1;font-size:14px;font-weight:700;letter-spacing:.01em;color:var(--mk-ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .mk-pane-back,.mk-pane-x{
    background:none;border:0;color:var(--mk-ink);cursor:pointer;
    padding:7px;border-radius:6px;display:flex;align-items:center;flex:0 0 auto;
  }
  .mk-pane-back:hover,.mk-pane-x:hover{background:var(--mk-gray)}
  .mk-pane-back .mk-i{transform:rotate(180deg)}

  .mk-pane-list{list-style:none;margin:0;padding:0;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mk-pane-list li{border-bottom:1px solid var(--mk-line)}
  .mk-pane-list>li>a,.mk-pane-list>li>button{
    display:flex;align-items:center;gap:12px;width:100%;
    background:none;border:0;text-align:left;cursor:pointer;
    padding:15px 16px;font-family:var(--mk-ui);font-size:16px;font-weight:500;color:var(--mk-ink);
  }
  .mk-pane-list>li>button:hover,.mk-pane-list>li>a:hover{background:var(--mk-gray)}
  .mk-pane-list .mk-lbl{flex:1}
  .mk-pane-list em{font-style:normal;font-size:12.5px;color:var(--mk-ink-55)}
  .mk-pane-list .mk-i{width:17px;height:17px;stroke-width:2;color:var(--mk-ink-55)}
  .mk-pane-list .mk-all{color:var(--mk-blue);font-weight:600}
  .mk-pane-list .mk-sub{font-size:15px;font-weight:400}

  .mk-pane-foot{
    flex:0 0 auto;border-top:1px solid var(--mk-line);background:var(--mk-gray);
    padding:14px 16px;display:grid;gap:10px;
  }
  .mk-pane-foot a{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;color:var(--mk-ink)}
  .mk-pane-foot .mk-i{color:var(--mk-ink-55)}

  .mk-topbar .mk-wrap{justify-content:center;gap:12px;font-size:11.5px;padding:8px 16px}
  .mk-topbar .mk-right{margin-left:0}

  .mk-bento>.mk-wrap{padding:18px 16px 24px}
  .mk-bento-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px}
  .mk-tile,.mk-tile-lead{grid-column:auto;grid-row:auto}
  .mk-tile-lead{grid-template-columns:1fr 116px;gap:18px;padding:24px}
  .mk-tile-lead h3{font-size:23px}
  .mk-tile-lead blockquote{font-size:15px;margin-bottom:18px}

  .mk-usp .mk-wrap{grid-template-columns:1fr 1fr;gap:16px;padding:16px}
  .mk-usp-item span{display:none}

  .mk-sec>.mk-wrap{padding:30px 16px}
  .mk-sh h2{font-size:20px}
  .mk-chips{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .mk-chip{padding:15px 8px;gap:9px;min-height:94px}
  .mk-chip .mk-i{width:23px;height:23px}
  .mk-chip .mk-lbl{font-size:12.5px;line-height:1.25}
  .mk-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;margin-bottom:20px}
  .mk-tab{white-space:nowrap;margin-right:20px;font-size:14px}
  .mk-grid{grid-template-columns:1fr 1fr;gap:16px}
  .mk-bk h3{font-size:15px}
  .mk-btn{font-size:19px;padding:12px 20px}
  .mk-imprints{grid-template-columns:1fr}
  .mk-reads{grid-template-columns:1fr;gap:26px}
  .mk-read-lead h3{font-size:20px}
  .mk-story .mk-wrap{grid-template-columns:1fr;gap:28px;padding:34px 16px}
  .mk-story h2{font-size:24px}
  .mk-stats{gap:18px}
  .mk-stat b{font-size:27px}
  .mk-shop .mk-wrap,.mk-news .mk-wrap{grid-template-columns:1fr;gap:24px;padding:30px 16px}
  .mk-foot .mk-wrap{padding:34px 16px 20px}
  .mk-fc{grid-template-columns:1fr 1fr;gap:24px}

  .mk-sticky{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:900;
    background:#fff;border-top:1px solid var(--mk-line);
    box-shadow:0 -4px 16px rgba(0,11,48,.08);
    padding:10px 16px;gap:12px;align-items:center;
  }
  .mk-sticky .mk-pr{font-weight:700;font-size:17px}
  .mk-sticky .mk-btn{flex:1;padding:12px}
  body.mk-new{padding-bottom:68px}
}

@media (max-width:430px){
  .mk-tile-lead{grid-template-columns:1fr}
  .mk-tile-lead .mk-lead-cover{max-width:118px}
  .mk-fc{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  body.mk-new *{transition:none !important;animation:none !important}
}

@media print{
  .mk-topbar,.mk-nav,.mk-sticky,.mk-search,.mk-usp{display:none}
}

/* ==========================================================================
   25. ΘΩΡΑΚΙΣΗ RESPONSIVE
   Καμια πηγη οριζοντιας υπερχειλισης. Μπαινει ΤΕΛΕΥΤΑΙΑ ωστε να υπερισχυει.
   ========================================================================== */

/* 1. Τιποτα δεν ξεπερναει το πλατος της οθονης */
html{overflow-x:hidden}
body{overflow-x:hidden;max-width:100%}

/* 2. Τα δικα μας components δεν ξεφευγουν ποτε απο το 100% */
.mk-topbar,.mk-head,.mk-nav,.mk-usp,.mk-bento,.mk-sec,.mk-shop,
.mk-news,.mk-story,.mk-two,.mk-foot,.mk-page,.mk-page-head{
  max-width:100%;
}
.mk-wrap{width:100%;max-width:var(--mk-max)}

/* 3. Grid και flex παιδια: χωρις min-width:0 «φουσκωνουν» οταν το
      περιεχομενο τους ειναι φαρδυτερο απο τη στηλη. Ειναι η συνηθεστερη
      αιτια οριζοντιου scroll σε CSS grid. */
.mk-bento-grid>*,.mk-grid>*,.mk-chips>*,.mk-imprints>*,.mk-series>*,
.mk-usp .mk-wrap>*,.mk-shop .mk-wrap>*,.mk-news .mk-wrap>*,
.mk-story .mk-wrap>*,.mk-two .mk-wrap>*,.mk-reads>*,.mk-fc>*,
.mk-tile-lead>*,.mk-panel-grid>*{
  min-width:0;
}
.mk-head>.mk-wrap>*,.mk-topbar>.mk-wrap>*{min-width:0}
.mk-search{min-width:0}

/* 4. Μακριες λεξεις και τιτλοι χωρις κενα δεν σπανε το layout */
.mk-bk h3,.mk-tile h3,.mk-imp h3,.mk-sh h2,.mk-story h2,.mk-shop h2,
.mk-news h2,.mk-page-head h1,.mk-read-lead h3,.mk-read-list h4,
.mk-pane-title,.mk-chip .mk-lbl,.mk-foot li,.mk-contact b{
  overflow-wrap:break-word;word-wrap:break-word;
}

/* 5. Εικονες, iframe και πινακες μεσα στα components */
.mk-page img,.mk-page iframe,.mk-page table,
.mk-sec img,.mk-shop img,.mk-bento img{max-width:100%}

/* 6. Το κλειστο drawer και το backdrop δεν πρεπει να μετρανε στο πλατος */
.mk-drawer:not(.mk-open){pointer-events:none}
.mk-backdrop[hidden]{display:none !important}

/* 7. Το desktop mega menu ειναι absolute με min-width 640px. Αναμεσα στα
      861 και 1100px μπορει να ξεφυγει δεξια. Το κραταμε μεσα στην οθονη. */
@media (max-width:1100px){
  .mk-panel{left:0;min-width:0;width:min(92vw,640px)}
}

/* 8. Πολυ στενες οθονες */
@media (max-width:360px){
  .mk-wrap{padding-left:12px;padding-right:12px}
  .mk-sec>.mk-wrap,.mk-two .mk-wrap,.mk-shop .mk-wrap,
  .mk-news .mk-wrap,.mk-story .mk-wrap,.mk-foot .mk-wrap{
    padding-left:12px;padding-right:12px;
  }
  .mk-grid{gap:12px}
  .mk-chips{gap:8px}
  .mk-btn{font-size:19px;padding:12px 14px}
}

/* --------------------------------------------------------------------------
   26. TABS — μονο οριζοντιο scroll
   Το overflow-x:auto απο μονο του επιτρεπει και κατακορυφο, γιατι το
   border-bottom των tab κανει το scrollHeight λιγο μεγαλυτερο απο το ορατο
   υψος. Το overflow-y:hidden το κλεινει. Κρυβουμε και τη μπαρα κυλισης.
   -------------------------------------------------------------------------- */
.mk-tabs{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
}
.mk-tabs::-webkit-scrollbar{display:none;height:0;width:0}
.mk-tab{scroll-snap-align:start}

@media (max-width:860px){
  .mk-tabs{
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    overflow-y:hidden;
    margin-bottom:20px;
    padding-bottom:0;
  }
  .mk-tab{white-space:nowrap;flex:0 0 auto}
}

/* --------------------------------------------------------------------------
   27. CTA ΠΑΝΤΑ ΣΕ ΜΙΑ ΓΡΑΜΜΗ
   Κανενα κουμπι δεν σπαει σε δευτερη γραμμη. Οπου δεν χωραει, φευγει πρωτα
   το εικονιδιο και μετα μικραινει το padding. Το μεγεθος 19px/700 ΔΕΝ
   μικραινει, γιατι λευκο πανω σε #f45700 περναει προσβασιμοτητα μονο ως
   large text. Αν χρειαστει ακομη χωρος, η καρτα γινεται ολοκληρη μια στηλη.
   -------------------------------------------------------------------------- */
.mk-btn,.mk-btn-2,.mk-btn-sm,.mk-btn-ghost,
.mk-search button,.mk-inl button{
  white-space:nowrap;
}
.mk-btn{line-height:1.2;text-overflow:ellipsis;overflow:hidden}
.mk-more,.mk-sh a,.mk-pane-title{white-space:nowrap}

/* Καρτα προϊοντος: το κουμπι πιανει ολο το πλατος χωρις να ξεχειλιζει */
.mk-bk .mk-btn-sm{width:100%;padding-left:10px;padding-right:10px}

@media (max-width:860px){
  /* Σε δυο στηλες ο χωρος ειναι ~136px. Το εικονιδιο φευγει. */
  .mk-bk .mk-btn-sm .mk-i{display:none}
  .mk-bk .mk-btn-sm{gap:0;padding:11px 6px}
}

@media (max-width:400px){
  /* Κατω απο 400px δυο καρτες διπλα διπλα ειναι ασφυκτικες.
     Μια στηλη: το εξωφυλλο αναπνεει και το CTA χωραει ανετα. */
  .mk-grid{grid-template-columns:1fr;gap:22px}
  .mk-bk .mk-btn-sm .mk-i{display:inline-block}
  .mk-bk .mk-btn-sm{gap:9px;padding:12px 18px}
}

/* --------------------------------------------------------------------------
   28. ΤΟ ΕΙΚΟΝΙΔΙΟ ΤΟΥ ΚΑΛΑΘΙΟΥ ΜΕΝΕΙ ΠΑΝΤΑ
   Το κουμπι χρειαζεται ~141px: εικονιδιο 20 + κενο 9 + «Στο καλαθι» 100 στα
   19px/700 + padding 12. Σε δυο στηλες στο κινητο η καρτα δινει μολις ~136px.
   Αντι να κοψουμε το εικονιδιο ή τη γραμματοσειρα, δινουμε στην καρτα
   περισσοτερο πλατος: μια στηλη κατω απο 520px. Εκει το κουμπι εχει
   τριπλασιο χωρο απο οσο χρειαζεται.
   -------------------------------------------------------------------------- */
@media (max-width:860px){
  .mk-bk .mk-btn-sm .mk-i{display:inline-block;width:18px;height:18px}
  .mk-bk .mk-btn-sm{gap:7px;padding:11px 10px}
}

@media (max-width:520px){
  .mk-grid{grid-template-columns:1fr;gap:20px}
  .mk-bk .mk-btn-sm{gap:9px;padding:12px 18px}
  .mk-bk .mk-btn-sm .mk-i{width:20px;height:20px}

  /* Σε μια στηλη το εξωφυλλο θα γινοταν τεραστιο. Το περιοριζουμε και
     αφηνουμε το κειμενο να ξεκιναει απο αριστερα, οπως στις δυο στηλες. */
  .mk-bk .mk-bk-ph{max-width:190px}

  /* Τα υψη που ειχαμε κλειδωσει για τη στοιχιση δεν χρειαζονται πια,
     αφου καθε καρτα ειναι μονη της στη σειρα της. */
  .mk-bk h3{min-height:0;-webkit-line-clamp:3}
  .mk-bk .mk-au,.mk-rate,.mk-bk .mk-st{min-height:0}
  .mk-bk .mk-rate:empty,.mk-bk .mk-st:empty{display:none}
}

/* --------------------------------------------------------------------------
   28. ΤΟ ΕΙΚΟΝΙΔΙΟ ΤΟΥ ΚΑΛΑΘΙΟΥ ΜΕΝΕΙ ΠΑΝΤΑ
   Αντικαθιστα τον προηγουμενο κανονα που το εκρυβε.
   Υπολογισμος σε οθονη 375px: καρτα 163px.
   κειμενο ~104 + εικονιδιο 17 + κενο 7 + padding 2x8 = 145 < 163. Χωραει.
   Σε οθονη 360px: καρτα 156px, 145 < 156. Χωραει.
   Κατω απο 360px η καρτα πεφτει στα 136px, οποτε πανε σε μια στηλη.
   Το μεγεθος 19px/700 δεν αλλαζει, γιατι λευκο σε #f45700 περναει
   προσβασιμοτητα μονο ως large text.
   -------------------------------------------------------------------------- */
@media (max-width:860px){
  .mk-bk .mk-btn-sm .mk-i{
    display:inline-block;
    width:17px;height:17px;
    flex:0 0 auto;
    stroke-width:2.2;
  }
  .mk-bk .mk-btn-sm{
    gap:7px;
    padding:11px 8px;
    letter-spacing:-.02em;
  }
}

@media (max-width:360px){
  /* Καρτα 136px: ουτε με το πιο σφιχτο padding δεν χωραει κειμενο συν
     εικονιδιο. Μια στηλη, που ουτως η αλλως δειχνει καλυτερα τα εξωφυλλα. */
  .mk-grid{grid-template-columns:1fr;gap:22px}
  .mk-bk .mk-btn-sm{gap:9px;padding:12px 18px;letter-spacing:-.01em}
  .mk-bk .mk-btn-sm .mk-i{width:20px;height:20px;stroke-width:2}
}

/* Στα 361-400px επανερχεται το πλεγμα δυο στηλων, που ειχε γινει μια
   στηλη στον κανονα 27. Πλεον χωραει με το εικονιδιο. */
@media (min-width:361px) and (max-width:400px){
  .mk-grid{grid-template-columns:1fr 1fr;gap:14px}
}

/* ==========================================================================
   29. MINI CART DRAWER
   Desktop: συρεται απο τα ΔΕΞΙΑ (αντιθετα απο το μενου).
   Mobile:  ανεβαινει απο ΚΑΤΩ και πιανει το 80% της οθονης.
   ========================================================================== */
.mk-cart-backdrop{
  position:fixed;inset:0;z-index:1200;background:rgba(0,11,48,.45);
  opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease;
}
.mk-cart-backdrop.mk-open{opacity:1;visibility:visible}
.mk-cart-backdrop[hidden]{display:none}
body.mk-cart-locked{overflow:hidden}

.mk-cart{
  position:fixed;top:0;right:0;bottom:0;z-index:1201;
  width:92%;max-width:420px;
  background:var(--mk-white);
  display:flex;flex-direction:column;
  box-shadow:0 0 44px rgba(0,11,48,.28);
  transform:translateX(100%);
  visibility:hidden;pointer-events:none;
  transition:transform .26s ease,visibility .26s ease;
  font-family:var(--mk-ui);color:var(--mk-ink);line-height:1.6;
}
.mk-cart.mk-open{transform:translateX(0);visibility:visible;pointer-events:auto}
.mk-cart *{box-sizing:border-box}
.mk-cart a{text-decoration:none;color:inherit}

.mk-cart-head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:16px 18px;border-bottom:1px solid var(--mk-line);
}
.mk-cart-title{font-size:17px;font-weight:700;letter-spacing:-.01em}
.mk-cart-title em{
  font-style:normal;font-size:12px;font-weight:700;vertical-align:2px;
  background:var(--mk-orange);color:var(--mk-ink);
  padding:2px 7px;border-radius:10px;margin-left:4px;
}
.mk-cart-x{
  background:none;border:0;color:var(--mk-ink);cursor:pointer;
  padding:6px;border-radius:6px;display:flex;
}
.mk-cart-x:hover{background:var(--mk-gray)}

.mk-cart-body{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}

/* --- Προϊοντα --- */
.mk-cart-list{list-style:none;margin:0;padding:0}
.mk-cart-item{display:flex;gap:14px;padding:16px 18px;border-bottom:1px solid var(--mk-line)}
.mk-cart-img{
  flex:0 0 auto;width:66px;background:var(--mk-gray);
  border:1px solid var(--mk-line);border-radius:6px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;aspect-ratio:2/3;
}
.mk-cart-img img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.mk-cart-info{min-width:0;flex:1}
.mk-cart-info h4{
  font-size:15px;font-weight:600;line-height:1.3;margin:0 0 6px;
  overflow-wrap:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mk-cart-info h4 a:hover{color:var(--mk-blue)}
.mk-cart-price{margin:0 0 4px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.mk-cart-price b{font-size:16px;font-weight:700}
.mk-cart-price s{font-size:13px;color:var(--mk-ink-55);font-weight:400}
.mk-cart-sale{color:var(--mk-orange)}
.mk-cart-save{
  font-size:11px;font-weight:700;background:var(--mk-orange);color:var(--mk-ink);
  padding:2px 6px;border-radius:4px;
}
.mk-cart-qty{margin:0;font-size:13px;color:var(--mk-ink-55)}
.mk-cart-qty b{color:var(--mk-ink);font-weight:600}

/* --- Προτασεις, οριζοντια κυλιση (λιγοτερα απο 3 προϊοντα) --- */
.mk-cart-sugg{padding:20px 0 22px;border-bottom:1px solid var(--mk-line)}
.mk-cart-sugg h5{
  font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--mk-ink-55);
  margin:0 0 12px;padding:0 18px;text-transform:none;
}
.mk-cart-scroll{
  display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;
  padding:2px 18px 4px;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;
}
.mk-cart-scroll::-webkit-scrollbar{display:none;height:0}
.mk-cart-tile{
  flex:0 0 auto;scroll-snap-align:start;width:104px;
  background:var(--mk-white);border:1px solid var(--mk-line);border-radius:6px;
  padding:14px 8px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center;min-height:92px;
}
.mk-cart-tile .mk-i{width:22px;height:22px;color:var(--mk-orange);stroke-width:1.5}
.mk-cart-tile span{font-size:12px;font-weight:500;line-height:1.25}
.mk-cart-tile:hover{border-color:var(--mk-ink);background:var(--mk-gray)}

/* --- Αδειο καλαθι --- */
.mk-cart-empty{padding:52px 24px 28px;text-align:center}
.mk-cart-empty-ico{
  width:76px;height:76px;border-radius:50%;background:var(--mk-gray);
  border:1px solid var(--mk-line);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.mk-cart-empty-ico .mk-i{width:34px;height:34px;color:var(--mk-ink-55);stroke-width:1.4}
.mk-cart-empty-msg{font-size:18px;font-weight:700;margin:0 0 6px}
.mk-cart-empty-sub{font-size:14px;color:var(--mk-ink-55);margin:0}

/* Αδειο καλαθι: πλακιδια ως κουμπια, ΧΩΡΙΣ οριζοντια κυλιση */
.mk-cart-sugg-grid{border-bottom:0}
.mk-cart-wrapgrid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 18px 8px;
}
.mk-cart-btn-tile{
  display:flex;align-items:center;gap:10px;
  background:var(--mk-white);border:1px solid var(--mk-line);border-radius:6px;
  padding:12px 12px;min-width:0;
}
.mk-cart-btn-tile .mk-i{width:20px;height:20px;flex:0 0 auto;color:var(--mk-orange);stroke-width:1.5}
.mk-cart-btn-tile span{
  font-size:13px;font-weight:500;line-height:1.25;min-width:0;
  overflow-wrap:break-word;
}
.mk-cart-btn-tile:hover{border-color:var(--mk-ink);background:var(--mk-gray)}

/* --- Κατω μερος: μπαρα μεταφορικων, συνολο, CTA --- */
.mk-cart-foot{
  flex:0 0 auto;border-top:1px solid var(--mk-line);
  background:var(--mk-gray);padding:16px 18px 18px;
}
.mk-ship{margin-bottom:14px}
.mk-ship-bar{
  height:8px;border-radius:99px;background:#e2e5ec;overflow:hidden;margin-bottom:9px;
}
.mk-ship-bar span{
  display:block;height:100%;border-radius:99px;
  background:var(--mk-orange);
  transition:width .4s ease;
}
.mk-ship-msg{margin:0;font-size:13px;color:var(--mk-ink-70);text-align:center}
.mk-ship-msg b{color:var(--mk-ink);font-weight:700}
.mk-ship-ok{
  color:var(--mk-ok);font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.mk-ship-ok .mk-i{width:17px;height:17px;stroke-width:2.4}

.mk-cart-sum{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:12px 0;border-top:1px solid var(--mk-line);margin-bottom:12px;
}
.mk-cart-sum span{font-size:14px;color:var(--mk-ink-70)}
.mk-cart-sum b{font-size:21px;font-weight:700}
.mk-cart-go{width:100%}
.mk-cart-view{
  display:block;text-align:center;margin-top:10px;
  font-size:13.5px;font-weight:600;color:var(--mk-blue);
}
.mk-cart-view:hover{text-decoration:underline}

/* --- MOBILE: bottom sheet στο 80% --- */
@media (max-width:860px){
  .mk-cart{
    top:auto;left:0;right:0;bottom:0;
    width:100%;max-width:none;height:80vh;height:80dvh;
    border-radius:16px 16px 0 0;
    transform:translateY(100%);
    transition:transform .26s ease,visibility .26s ease;
  }
  .mk-cart.mk-open{transform:translateY(0)}
  .mk-cart-head{padding:14px 16px}
  .mk-cart-head::before{
    content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:99px;background:var(--mk-line);
  }
  .mk-cart-head{position:relative;padding-top:18px}
  .mk-cart-item{padding:14px 16px}
  .mk-cart-sugg h5,.mk-cart-scroll,.mk-cart-wrapgrid{padding-left:16px;padding-right:16px}
  .mk-cart-foot{padding:14px 16px 16px}
  .mk-cart-empty{padding:36px 20px 22px}
}

@media (prefers-reduced-motion:reduce){
  .mk-cart,.mk-cart-backdrop,.mk-ship-bar span{transition:none !important}
}

/* --------------------------------------------------------------------------
   30. MINI CART: ΦΠΑ, GRADIENT ΜΠΑΡΑ, ΠΟΣΟΤΗΤΑ, ΔΙΑΓΡΑΦΗ
   -------------------------------------------------------------------------- */

/* Μπαρα μεταφορικων σε gradient */
.mk-ship-bar span{
  background:linear-gradient(90deg,#071ec9 0%,#000b30 100%);
}

/* Αναλυση σε τρεις γραμμες, συμπαγης. Δεν τρωει υψος: 12px οι δυο πρωτες. */
.mk-cart-sum{
  display:grid;grid-template-columns:1fr auto;
  gap:3px 14px;align-items:baseline;
  padding:11px 0 12px;border-top:1px solid var(--mk-line);margin-bottom:12px;
}
.mk-cart-sum span{font-size:12.5px;line-height:1.45;color:var(--mk-ink-55)}
.mk-cart-sum span:nth-of-type(even){text-align:right;color:var(--mk-ink-70)}
.mk-cart-sum b{
  font-size:19px;font-weight:700;color:var(--mk-ink);
  padding-top:6px;margin-top:3px;border-top:1px solid var(--mk-line);
}
.mk-cart-sum b:last-of-type{text-align:right}

/* Ποσοτητα και διαγραφη */
.mk-cart-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.mk-qty{
  display:inline-flex;align-items:center;
  border:1px solid var(--mk-line);border-radius:6px;overflow:hidden;background:var(--mk-white);
}
.mk-qty-btn{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;color:var(--mk-ink);flex:0 0 auto;
}
.mk-qty-btn:hover{background:var(--mk-gray)}
.mk-qty-btn .mk-i{width:15px;height:15px;stroke-width:2.4}
/* Στο 1 τεμαχιο, το μειον γινεται διαγραφη. Το δειχνουμε πιο αχνο. */
.mk-qty-min{color:var(--mk-ink-55)}
.mk-qty-n{
  min-width:34px;text-align:center;font-size:14px;font-weight:700;
  border-left:1px solid var(--mk-line);border-right:1px solid var(--mk-line);
  line-height:32px;
}
.mk-cart-del{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:6px;color:var(--mk-ink-55);flex:0 0 auto;
}
.mk-cart-del:hover{color:#b3261e;background:#fdecea}
.mk-cart-del .mk-i{width:17px;height:17px}

@media (max-width:860px){
  .mk-qty-btn,.mk-qty-n,.mk-cart-del{height:36px;line-height:36px}
  .mk-qty-btn{width:36px}
  .mk-cart-del{width:36px}
}

/* --------------------------------------------------------------------------
   31. ΕΙΔΟΠΟΙΗΣΗ ΠΡΟΣΘΗΚΗΣ ΣΤΟ ΚΑΛΑΘΙ
   Κατω κατω στη σελιδα. Δεν μπλοκαρει το scroll, δεν σκοτεινιαζει τη σελιδα.
   -------------------------------------------------------------------------- */
.mk-toast{
  position:fixed;left:50%;bottom:22px;z-index:1300;
  width:calc(100% - 32px);max-width:560px;
  transform:translate(-50%,calc(100% + 40px));
  opacity:0;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .3s ease;
  font-family:var(--mk-ui);color:var(--mk-ink);line-height:1.5;
}
.mk-toast *{box-sizing:border-box}
.mk-toast a{text-decoration:none;color:inherit}
.mk-toast.mk-open{transform:translate(-50%,0);opacity:1}
.mk-toast.mk-toast-out{transform:translate(-50%,calc(100% + 40px));opacity:0}

.mk-toast-in{
  position:relative;
  display:grid;grid-template-columns:auto auto 1fr auto;
  align-items:center;gap:14px;
  background:var(--mk-white);border:1px solid var(--mk-line);
  border-radius:10px;box-shadow:0 14px 40px rgba(0,11,48,.22);
  padding:14px 44px 14px 16px;
}
.mk-toast-ok{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  background:var(--mk-ok);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.mk-toast-ok .mk-i{width:17px;height:17px;stroke-width:2.6}
.mk-toast-img{
  width:38px;flex:0 0 auto;aspect-ratio:2/3;overflow:hidden;
  background:var(--mk-gray);border:1px solid var(--mk-line);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
}
.mk-toast-img img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.mk-toast-txt{min-width:0}
.mk-toast-txt b{display:block;font-size:14px;font-weight:700}
.mk-toast-txt span{
  display:block;font-size:12.5px;color:var(--mk-ink-55);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mk-toast-acts{display:flex;gap:8px;flex:0 0 auto}
.mk-toast .mk-btn{font-size:19px;padding:9px 14px}
.mk-toast .mk-btn-2{font-size:14px;font-weight:600;padding:10px 14px}
.mk-toast-x{
  position:absolute;top:8px;right:8px;
  background:none;border:0;cursor:pointer;color:var(--mk-ink-55);
  padding:5px;border-radius:6px;display:flex;
}
.mk-toast-x:hover{background:var(--mk-gray);color:var(--mk-ink)}
.mk-toast-x .mk-i{width:16px;height:16px}

@media (max-width:720px){
  .mk-toast{bottom:14px;width:calc(100% - 24px)}
  .mk-toast-in{
    grid-template-columns:auto auto 1fr;
    gap:10px 12px;padding:14px 40px 14px 14px;
  }
  .mk-toast-acts{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .mk-toast .mk-btn{width:100%;justify-content:center}
}
/* Πανω απο τη sticky μπαρα αγορας του mobile */
@media (max-width:860px){ .mk-toast{bottom:78px} }

@media (prefers-reduced-motion:reduce){
  .mk-toast{transition:opacity .2s ease}
  .mk-toast,.mk-toast.mk-toast-out{transform:translate(-50%,0)}
}

/* --------------------------------------------------------------------------
   32. ΔΙΟΡΘΩΣΕΙΣ ΕΙΔΟΠΟΙΗΣΗΣ ΚΑΙ MINI CART
   -------------------------------------------------------------------------- */

/* --- 1. Ειδοποιηση: δυο σειρες παντου, τελος τα overlap ---------------------
   Το προηγουμενο πλεγμα εβαζε κειμενο και κουμπια στην ιδια σειρα. Το CTA
   ειναι υποχρεωτικα 19px (προσβασιμοτητα), οποτε δεν χωρουσαν και καβαλουσαν.
   Τωρα: πανω σειρα πληροφοριες, κατω σειρα κουμπια. */
.mk-toast-in{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  gap:12px 12px;
  padding:16px 44px 16px 16px;
  align-items:center;
}
.mk-toast-txt{min-width:0;grid-column:3}
.mk-toast-txt b{font-size:14px;line-height:1.35}
.mk-toast-txt span{
  font-size:12.5px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;white-space:normal;
}
.mk-toast-acts{
  grid-column:1 / -1;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-top:2px;
}
.mk-toast .mk-btn{
  width:100%;justify-content:center;
  font-size:19px;font-weight:700;padding:11px 12px;
}
.mk-toast .mk-btn-2{font-size:15px;font-weight:600;padding:12px}

/* --- 4. Mobile: το κατω μερος του καλαθιου δεν σπαει πια ---------------------
   Χωρις min-height:0 το flex παιδι αρνειται να συρρικνωθει και το footer
   βγαινει εκτος του 80vh μεχρι να κουνηθει κατι και να ξαναϋπολογιστει. */
.mk-cart{min-height:0}
.mk-cart-body{min-height:0;overscroll-behavior:contain}
.mk-cart-foot{position:relative;z-index:2}

@media (max-width:860px){
  .mk-cart{
    height:80vh;height:80dvh;
    max-height:80vh;max-height:80dvh;
  }
  .mk-cart-foot{padding-bottom:max(16px,env(safe-area-inset-bottom))}

  /* --- 5. Περισσοτερος χωρος στις προτασεις --- */
  .mk-cart-sugg{padding:22px 0 26px}
  .mk-cart-sugg h5{font-size:13px;margin-bottom:14px}
  .mk-cart-tile{width:118px;min-height:106px;padding:16px 10px;gap:10px}
  .mk-cart-tile .mk-i{width:24px;height:24px}
  .mk-cart-tile span{font-size:12.5px}
  .mk-cart-wrapgrid{gap:12px;padding-bottom:14px}
  .mk-cart-btn-tile{padding:14px 12px}
}

/* --- 6. Η σελιδα απο πισω δεν κουνιεται ------------------------------------
   Το overflow:hidden δεν αρκει σε iOS. Το body κλειδωνει με position:fixed
   και το JS επαναφερει τη θεση κυλισης στο κλεισιμο. */
body.mk-cart-locked{
  position:fixed;left:0;right:0;width:100%;overflow:hidden;
}

@media (max-width:720px){
  .mk-toast-in{grid-template-columns:auto auto minmax(0,1fr);padding:14px 40px 14px 14px}
}

/* --------------------------------------------------------------------------
   33. ΤΕΛΙΚΕΣ ΔΙΟΡΘΩΣΕΙΣ MINI CART ΚΑΙ ΕΙΔΟΠΟΙΗΣΗΣ
   -------------------------------------------------------------------------- */

/* --- 1. «Ολοκληρωση παραγγελιας»: το κειμενο κοβοταν με αποσιωπητικα -------
   Ο γενικος κανονας .mk-btn εχει overflow:hidden + text-overflow:ellipsis.
   Σε ενα κουμπι πληρους πλατους με μακρυ λεκτικο, αυτο το εκοβε. */
.mk-cart-go{
  overflow:visible;
  text-overflow:clip;
  letter-spacing:-.02em;
  padding-left:10px;padding-right:10px;
}

@media (max-width:860px){
  .mk-cart-go{font-size:19px;padding:14px 8px}
  .mk-cart-foot{padding-left:14px;padding-right:14px}
}
/* Πολυ στενες οθονες: το λεκτικο δεν χωραει σε μια γραμμη στα 19px,
   οποτε επιτρεπουμε δευτερη γραμμη ΜΟΝΟ σε αυτο το κουμπι. Καλυτερα δυο
   καθαρες γραμμες παρα κομμενο κειμενο. */
@media (max-width:400px){
  .mk-cart-go{white-space:normal;line-height:1.25;padding:12px 8px}
}

/* --- 3. Κουμπια ειδοποιησης σε mobile: μια στηλη ---------------------------
   Στα 1fr 1fr το «Προβολη καλαθιου» στα 19px/700 ειναι πλατυτερο απο τη
   στηλη και ξεχειλιζε. Μια στηλη, πληρες πλατος, τιποτα δεν ξεφευγει. */
@media (max-width:560px){
  .mk-toast-acts{grid-template-columns:1fr;gap:8px}
  .mk-toast .mk-btn{font-size:19px;padding:12px 10px;letter-spacing:-.02em}
  .mk-toast .mk-btn-2{font-size:15px;padding:11px 10px}
}

/* --- 2. Οπτικη ενδειξη οσο τρεχει το αιτημα ------------------------------- */
.mk-busy{opacity:.45;pointer-events:none}
.mk-cart-item,.mk-cart-foot{transition:opacity .15s ease}

/* --------------------------------------------------------------------------
   34. SWIPE ΓΙΑ ΚΛΕΙΣΙΜΟ ΤΟΥ MINI CART (mobile)
   -------------------------------------------------------------------------- */
@media (max-width:860px){
  /* Η κεφαλιδα ειναι η λαβη. Μεγαλυτερη περιοχη αφης και χωρις επιλογη
     κειμενου, ωστε το συρσιμο να μην κανει highlight. */
  .mk-cart-head{
    touch-action:none;
    cursor:grab;
    -webkit-user-select:none;user-select:none;
    padding-top:22px;
  }
  .mk-cart-head:active{cursor:grabbing}
  .mk-cart-head::before{
    top:9px;width:44px;height:5px;
    background:#cfd4dd;
  }
  /* Το σωμα κραταει τη δικη του κυλιση χωρις να παρασυρει τη σελιδα */
  .mk-cart-body{overscroll-behavior:contain;touch-action:pan-y}
}