/* fdw-sitewide.css — όλο το προσαρμοσμένο CSS του fotodotes.gr.
   Φορτώνεται από το modules/mod_eshop_cart/tmpl/default.php, που είναι το μόνο
   σημείο που αποδίδεται σε ΚΑΘΕ σελίδα.

   ⛔ 4/9/2026: το αρχείο ΞΕΚΙΝΟΥΣΕ με σκουπίδια — την ουρά ενός PHP σχολίου,
   ένα «?>» και ένα «<style>», υπόλειμμα της εξαγωγής από το inline <style> του
   module. Δεν ήταν αθώο: ο αναλυτής CSS διαβάζει τα σκουπίδια ως ΠΡΟΟΙΜΙΟ
   επιλογέα μέχρι το πρώτο «{», οπότε ΚΑΤΑΠΙΝΕ ΜΑΖΙ ΤΟΥ ΤΟΝ ΠΡΩΤΟ ΚΑΝΟΝΑ —
   αυτόν που δίνει στο καλάθι position:fixed, top και z-index. Έλειπε σιωπηλά
   από τότε που βγήκε το CSS σε αρχείο. */
/* ── Καλάθι: σταθερό μπλε «χαπάκι» πάνω δεξιά ── */
#eshop-cart{position:fixed!important;top:16px!important;right:16px!important;left:auto!important;bottom:auto!important;z-index:2147483000!important;width:auto!important;margin:0!important;padding:0!important;float:none!important;}
#eshop-cart .eshop-cart-items>a{display:inline-flex;align-items:center;gap:8px;background:#10357f!important;border:1px solid #10357f!important;color:#fff!important;padding:9px 15px!important;border-radius:26px!important;box-shadow:0 3px 10px rgba(0,0,0,.28);font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap;line-height:1;}
#eshop-cart .eshop-cart-items>a:hover{background:#0d2a66!important;border-color:#0d2a66!important;}
#eshop-cart .eshop-cart-items>a svg{width:19px;height:19px;fill:#fff;margin:0;}
#eshop-cart #eshop-cart-total{color:#fff!important;font-size:14px;font-weight:700;}
#eshop-cart .eshop-cart-content{position:absolute!important;right:0;top:calc(100% + 8px);background:#fff;border:1px solid #cfe3f5;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.20);padding:12px;min-width:280px;max-width:92vw;color:#333;text-align:left;}
#eshop-cart .eshop-cart-content a{color:#10357f;}
@media(max-width:600px){#eshop-cart{top:10px!important;right:10px!important;}#eshop-cart .eshop-cart-items>a{padding:8px 12px!important;}}

/* ── Κατάστημα: όμορφες & ΕΥΘΥΓΡΑΜΜΙΣΜΕΝΕΣ κάρτες προϊόντων ── */
.eshop-products-list .eshop-product-desc{display:none !important;}
/* ΝΕΚΡΟΙ ΚΑΝΟΝΕΣ ΩΣ 2/9/2026 — γράφτηκαν για Bootstrap 2 (.row-fluid/.span4)
   ενώ η eShop 5.6.1 βγάζει .row/.col-md-4. Διορθωμένοι επιλογείς: */
#products-list > .row{display:flex;flex-wrap:wrap;align-items:stretch;}
#products-list > .row > .ajax-block-product{float:none !important;display:flex !important;flex-direction:column;}
#products-list .ajax-block-product{display:flex;flex-direction:column;border:1px solid #e3f0fa;border-radius:14px;background:#fff;padding:14px 12px 16px;box-shadow:0 2px 10px rgba(16,53,127,.06);transition:transform .16s,box-shadow .16s;}
#products-list .ajax-block-product:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(16,53,127,.15);}
#products-list .eshop-image-block .image img{border-radius:8px;}
/* Retina (2/9/2026): το αρχείο ανέβηκε σε 300x300 αλλά ΕΜΦΑΝΙΖΕΤΑΙ στα 150 —
   ίδια ακριβώς όψη, διπλάσια pixel. Χωρίς αυτόν τον περιορισμό οι κάρτες
   θα διπλασιάζονταν σε μέγεθος. Το max-width το αφήνει να συρρικνωθεί σε στενές οθόνες. */
#products-list .product-image img,
#products-list .eshop-image-block .image img{width:150px;max-width:100%;height:auto;}
#products-list .eshop-info-block{display:flex;flex-direction:column;flex:1 1 auto;}
#products-list .eshop-info-block h5{min-height:2.8em;margin:10px 0 8px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.3;}
#products-list .eshop-info-block h5 a{color:#10357f !important;font-weight:700;text-decoration:none;}
#products-list .eshop-product-price{margin-top:auto;text-align:center;}
#products-list .eshop-product-price .price{color:#10357f !important;font-weight:800;font-size:16px;}
#products-list .eshop-buttons{margin-top:10px;text-align:center;}
.eshop-buttons .btn,.eshop-buttons button,.product-info .btn-primary,#add-to-cart{background:#10357f !important;border:1px solid #10357f !important;color:#fff !important;border-radius:24px !important;font-weight:700 !important;padding:9px 20px !important;box-shadow:0 2px 6px rgba(16,53,127,.2);}
.eshop-buttons .btn:hover,#add-to-cart:hover{background:#0d2a66 !important;}
.eshop-quantity{display:inline-flex;align-items:center;border:1px solid #cfe3f5;border-radius:22px;overflow:hidden;background:#fff;}
.eshop-quantity .button-minus,.eshop-quantity .button-plus{background:#eaf6fc !important;color:#10357f !important;border:0 !important;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;cursor:pointer;border-radius:0 !important;}
.eshop-quantity .eshop-quantity-value{border:0 !important;width:46px;text-align:center;font-weight:700;}
.alert-success{background:#eaf7ea !important;border:1px solid #bfe3bf !important;color:#1f6b2e !important;border-radius:10px !important;}
/* ── Σελίδα προϊόντος στο κινητό ──
   Τα ± ήταν 36x36 και τα «Κάντε μία ερώτηση / Αποστολή email / Λήψη PDF»
   35px ψηλά — όλα κάτω από τα 44px του δαχτύλου. */
@media (max-width:767px){
  .view-product #sp-component .eshop-quantity-button{width:44px !important;height:44px !important;}
  .view-product #sp-component .btn-secondary{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
}

/* ── Καλάθι ── (μετρημένο στα 375px)
   1) Τα ± της ποσότητας έβγαιναν 47x18px: το κελί του πίνακα είναι 47px και
      τα τρία στοιχεία δεν χωρούσαν σε σειρά, οπότε τύλιγαν σε τρεις γραμμές
      των 18px. Δεν πολεμάμε το τύλιγμα — του δίνουμε ύψος δαχτύλου.
   2) Το «Ταμείο» ήταν το ΜΙΚΡΟΤΕΡΟ κουμπί της σελίδας (66x35) — και είχε
      ΤΟ ΙΔΙΟ μπλε με το «Άδειασμα καλαθιού» ακριβώς δίπλα του. Δύο κουμπιά,
      ίδια όψη, αντίθετο αποτέλεσμα: αυτό ακριβώς είναι «πατιέται λάθος». */
.view-cart #sp-component .eshop-quantity{flex-wrap:nowrap;width:134px;margin-left:auto;}
.view-cart #sp-component .eshop-quantity-button{flex:0 0 42px;min-height:42px;padding:0 !important;}
.view-cart #sp-component .eshop-quantity-value{flex:1 1 auto;width:auto !important;min-width:0;text-align:center;height:42px;padding:0 !important;}
/* Το «Αφαίρεση» ήταν ένα μαύρο PNG 16x24: ταυτόχρονα πολύ μικρό για να το
   πετύχεις επίτηδες και αρκετά ορατό για να το πατήσεις κατά λάθος — σε
   ενέργεια που σβήνει προϊόν. Γίνεται κύκλος 40px με × ζωγραφισμένο σε CSS. */
.view-cart .eshop-remove-item-cart{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid #e3e9ee;background:#fff;}
.view-cart .eshop-remove-item-cart:hover{background:#fbecec;border-color:#d9b0b0;}
.view-cart .eshop-remove-item-cart img{display:none;}
.view-cart .eshop-remove-item-cart::before{content:"\2715";font:700 15px/1 "Helvetica Neue",Arial,sans-serif;color:#8b2a2a;}
/* Φυσική σειρά «− 1 +»: η eShop τα γράφει «+ 1 −» στο HTML. */
.view-cart #sp-component .eshop-quantity .button-minus{order:1;}
.view-cart #sp-component .eshop-quantity .eshop-quantity-value{order:2;}
.view-cart #sp-component .eshop-quantity .button-plus{order:3;}
.view-cart .cart-buttons{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.view-cart #sp-component .btn{min-height:42px;}
.view-cart #clear-cart{background:#fff !important;color:#8b2a2a !important;border:1px solid #d9b0b0 !important;box-shadow:none !important;}
.view-cart #clear-cart:hover{background:#fbecec !important;}
.view-cart #sp-component>.sp-column>.eshop-container>a.btn-primary{padding:12px 26px !important;font-size:15px !important;}
@media (max-width:767px){
  .view-cart .cart-buttons .btn{flex:1 1 100%;min-height:46px;}
  .view-cart #sp-component>.sp-column>.eshop-container>a.btn-primary{display:block;width:100%;text-align:center;float:none !important;margin:8px 0 0;}
}

/* ── Ταμείο & φόρμες στο κινητό ──
   Μετρημένο: πεδία 38px, κουμπιά 35px, radio 20px — όλα κάτω από τα 44px.
   ⚠ Το `font-size:16px` δεν είναι αισθητική επιλογή: κάτω από 16px το Safari
   του iPhone κάνει ΑΥΤΟΜΑΤΟ ZOOM μόλις ο χρήστης αγγίξει πεδίο, η σελίδα
   μεγαλώνει και δεν ξαναμικραίνει μόνη της. Στο ταμείο αυτό είναι σοβαρό. */
@media (max-width:767px){
  .view-checkout #sp-component input[type=text],
  .view-checkout #sp-component input[type=email],
  .view-checkout #sp-component input[type=password],
  .view-checkout #sp-component input[type=tel],
  .view-checkout #sp-component input[type=number],
  .view-checkout #sp-component select,
  .view-checkout #sp-component textarea{min-height:46px;font-size:16px;}
  .view-checkout #sp-component input[type=button],
  .view-checkout #sp-component input[type=submit],
  .view-checkout #sp-component button,
  .view-checkout #sp-component a.btn{min-height:46px;padding:12px 22px !important;}
  .view-checkout #sp-component input[type=radio],
  .view-checkout #sp-component input[type=checkbox]{width:22px;height:22px;}
  .view-checkout #sp-component label{line-height:1.5;}
}

/* Καθαρό σιελ πλακίδιο αντί για το άσχημο «IMAGE COMING SOON» (no-image placeholder) */
img[src*="no-image"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='300' height='300' fill='%23eaf4fc'/%3E%3Cg fill='none' stroke='%239cc6ea' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M150 112 C122 96 92 98 74 108 L74 198 C92 188 122 186 150 202 C178 186 208 188 226 198 L226 108 C208 98 178 96 150 112 Z'/%3E%3Cline x1='150' y1='112' x2='150' y2='202'/%3E%3C/g%3E%3C/svg%3E") !important;object-fit:cover;background:#eaf4fc;}
/* Mobile banner (Banner.jpg = header «Εκδόσεις Φωτοδότες») responsive, χωρίς παραμόρφωση */
#sp-banner-kinita img, img[src="/images/stories/Banner.jpg"]{max-width:100% !important;height:auto !important;}

/* ══ 2/9/2026 — «να μην πατιέται λάθος» ══════════════════════════════════
   Μετρημένο στη ζωντανή κάρτα (242x420): ο τίτλος ήταν στόχος 126x21px και
   από κάτω του υπήρχαν ~96px ΝΕΚΡΗΣ κάρτας. Το δάχτυλο έπεφτε στο κενό,
   ο χρήστης ξαναπατούσε λίγο πιο κάτω — κι εκεί είναι το «Προσθήκη στο
   Καλάθι». Γι' αυτό «πατιόταν λάθος».
   Τώρα ΟΛΗ η κάρτα οδηγεί στο βιβλίο και μόνο τα πραγματικά χειριστήρια
   (ποσότητα, καλάθι) στέκονται από πάνω της. */
#products-list .ajax-block-product{position:relative;}
#products-list .eshop-info-block h5 a{display:block;width:100%;}
#products-list .eshop-info-block h5 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:14px;}
/* z-index ΜΟΝΟ στα χειριστήρια, ΟΧΙ σε ολόκληρο το .eshop-buttons: τα κενά
   περιθώριά του πρέπει να συνεχίζουν να ανοίγουν το βιβλίο. */
#products-list .eshop-quantity,
#products-list .add-to-cart-button{position:relative;z-index:2;}
/* Ανάσα ανάμεσα σε ποσότητα και κουμπί — ήταν 12px και πατιόνταν μαζί. */
#products-list .eshop-cart-area .input-group-append{margin-bottom:14px;}
#products-list .ajax-block-product:focus-within{box-shadow:0 0 0 3px #9cc6ea;}

/* ── Πλέγμα: 3 ανά σειρά σε οθόνη, 2 σε κινητό ──
   Στα 375px έβγαινε ΜΙΑ κάρτα ανά σειρά (341x428): 15 βιβλία = 6.978px
   κύλισης, δηλαδή μία ολόκληρη οθόνη ανά βιβλίο.

   ⚠ ΔΥΟ παγίδες, και οι δύο επιβεβαιωμένες με element.matches() στο live:
   1) Ο γονέας είναι `.row` (Bootstrap 5) και το παιδί `.col-md-4` — ΟΧΙ
      `.row-fluid`/`.span4` όπως υπέθεταν οι παλιοί κανόνες. Δεν έπιαναν ποτέ.
   2) Η eShop 5.6.1 βγάζει ΣΤΑΘΕΡΕΣ σειρές των 3 (πέντε `<div class="row
      clearfix">` με 3 παιδιά η καθεμία). Άρα σκέτη αλλαγή πλάτους σε 50%
      θα έδινε 2+1, 2+1 — όχι δύο καθαρές στήλες. Με `display:contents` οι
      σειρές παύουν να είναι κουτιά, τα βιβλία γίνονται όλα αδέρφια και ρέουν
      κανονικά. Η τελευταία `.row` (χωρίς clearfix) είναι η σελιδοποίηση. */
#products-list{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;container-type:inline-size;}
#products-list > .row.clearfix{display:contents;}
#products-list > .row:not(.clearfix){flex:0 0 100%;}
/* ⚠ Το `.clearfix` βάζει ένα `::after{display:block;clear:both}` σε ΚΑΘΕ σειρά.
   Με `display:contents` το ψευδοστοιχείο ΕΠΙΒΙΩΝΕΙ και γίνεται κανονικό flex
   item πλάτους 0: μετά από κάθε τριάδα δεν χωρούσε τρίτη κάρτα και η ροή
   έσπαγε σε 2,1,2,1 αντί για 2,2,2. Μετρημένο στο live. */
#products-list::after,
#products-list > .row.clearfix::after,
#products-list > .row.clearfix::before{display:none !important;}
/* Προεπιλογή 2 στήλες· τρεις μόνο όταν υπάρχει όντως χώρος.
   Ερώτημα ΔΟΧΕΙΟΥ και όχι οθόνης: η στήλη περιεχομένου στενεύει από τις δύο
   πλαϊνές στήλες, οπότε το πλάτος της οθόνης ΔΕΝ λέει πόσες κάρτες χωράνε —
   στα 972px οθόνης το δοχείο ήταν 700px. Η εικόνα είναι 150px, άρα τρεις
   στήλες θέλουν ≥ 3×160 + 2×14 = 508px. */
#products-list .ajax-block-product{flex:0 0 calc(50% - 7px);max-width:calc(50% - 7px);width:auto;}
@container (min-width:520px){
  #products-list .ajax-block-product{flex-basis:calc(33.333% - 10px);max-width:calc(33.333% - 10px);}
}

/* ── Κινητό: στόχοι δαχτύλου ≥44px ──
   Μετρήθηκαν 21, 24, 36 και 41px — ΟΛΟΙ κάτω από το όριο των 44px. */
@media (max-width:767px){
  #products-list .ajax-block-product{padding:10px 8px 12px;border-radius:12px;}
  #products-list .eshop-info-block h5{min-height:3.4em;margin:8px 0 6px;}
  #products-list .eshop-info-block h5 a{font-size:13px;line-height:1.25;}
  #products-list .eshop-product-price .price{font-size:15px;}
  #products-list .eshop-quantity .button-minus,
  #products-list .eshop-quantity .button-plus{width:44px;height:44px;}
  #products-list .eshop-quantity .eshop-quantity-value{width:40px;height:44px;}
  #products-list .add-to-cart-button{min-height:44px;width:100%;padding:10px 6px !important;font-size:12.5px !important;}
}

/* ── Μπάρα εργαλείων στο κινητό ──
   Και τα δύο μενού είναι `float:right`, οπότε στα 375px στοιβάζονταν
   ασύμμετρα: το «Εμφάνισε» 70px κολλητά δεξιά και το «Ταξινόμηση» 281px από
   κάτω. Επιπλέον τα <select> ήταν 26px ψηλά — κάτω από τα 44px του δαχτύλου. */
@media (max-width:767px){
  .sortPagiBar form>.clearfix{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;}
  .sortPagiBar form>.clearfix::after{display:none;}
  .sortPagiBar .eshop-product-show,
  .sortPagiBar .eshop-product-sorting{float:none !important;margin:0 !important;}
  .sortPagiBar .eshop-product-show{flex:0 0 92px;}
  .sortPagiBar .eshop-product-sorting{flex:1 1 170px;min-width:0;}
  .sortPagiBar .eshop-product-sorting b,
  .sortPagiBar .eshop-product-show b{float:none !important;display:block;margin-bottom:3px;font-size:13px;}
  .sortPagiBar select.form-select{width:100% !important;min-height:44px;}
}

/* ── Τα δύο «κενά κουτιά» πάνω αριστερά (εναλλαγή πλέγμα/λίστα) ──
   ΔΕΝ έλειπε εικονίδιο. Το .btn-secondary του Bootstrap κρατούσε color:#fff
   ενώ το φόντο του είχε γίνει λευκό, άρα λευκό <svg fill="currentColor">
   πάνω σε λευκό. Ήταν εκεί, απλώς αόρατο. */
.sortPagiBar .btn-group>a.btn-secondary{background:#fff !important;border:1px solid #cfe3f5 !important;color:#10357f !important;}
.sortPagiBar .btn-group>a.btn-secondary:hover,
.sortPagiBar .btn-group>a.btn-secondary.active{background:#eaf6fc !important;color:#10357f !important;}
.sortPagiBar .btn-group>a.btn-secondary svg{fill:currentColor;}

/* ═══ ΕΓΓΡΑΦΗ ΣΤΟ NEWSLETTER ═══════════════════════════════════════════════
   ⚠ Γιατί ΕΔΩ και όχι στο com_eshop/…/custom.css: στην ΑΡΧΙΚΗ εκείνο το
   αρχείο ζητείται ΧΩΡΙΣ cache-buster, οπότε ο nginx σερβίρει παλιό αντίγραφο
   για ημέρες. Αυτό το inline <style> φορτώνει σε κάθε σελίδα και ισχύει αμέσως.

   Δομή που βγάζει το AcyMailing (μετρημένη στο live):
     .fdw-news > .fdw-news-form > .moduletable > .acym_module > .acym_fulldiv
       > form > .acym_module_form > table.acym_form > tbody > tr
         > td.onefield  (input[type=email] name="user[email]")
         > td.acysubbuttons (input[type=BUTTON].subbutton — ΟΧΙ submit!)
   Το κουμπί είναι `type="button"` με onclick — γι' αυτό ένας επιλογέας
   `input[type=submit]` δεν θα το έπιανε ποτέ. */
.fdw-news{
  margin:26px 0 10px; padding:22px 22px 18px; border:1px solid #cfe3f5;
  border-radius:14px; background:linear-gradient(180deg,#f7fbfe 0%,#eaf4fc 100%);
  box-shadow:0 2px 10px rgba(16,53,127,.06);
}
.fdw-news .fdw-news-t{margin:0 0 6px;color:#10357f;font-size:1.25rem;line-height:1.25;}
.fdw-news .fdw-news-p{margin:0 0 14px;color:#1e2a33;font-size:.95rem;line-height:1.55;}
.fdw-news .moduletable,.fdw-news .acym_module,.fdw-news .acym_fulldiv,
.fdw-news .acym_module_form,.fdw-news form{margin:0 !important;padding:0 !important;}
.fdw-news table.acym_form{display:block;width:100%;border:0;margin:0;background:none;}
.fdw-news table.acym_form tbody{display:block;width:100%;}
.fdw-news table.acym_form tr{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
/* Το <noscript> μέσα στο κελί του κουμπιού του δίνει 66px ύψος ενώ το κουμπί
   είναι 46: με align-items:stretch το κουμπί καθόταν 10px ψηλότερα από το
   πεδίο. Φαίνεται μόνο αν συγκρίνεις ΚΕΝΤΡΑ, όχι πάνω άκρα. */
.fdw-news td.acysubbuttons{display:flex;align-items:center;}
.fdw-news table.acym_form td{display:block;padding:0 !important;border:0 !important;background:none;}
.fdw-news td.onefield{flex:1 1 220px;min-width:0;}
.fdw-news td.acysubbuttons{flex:0 0 auto;}
.fdw-news input[type=email],.fdw-news input[type=text]{
  width:100%;box-sizing:border-box;min-height:46px;padding:10px 16px;
  font-size:16px;   /* κάτω από 16px το Safari του iPhone κάνει zoom στη φόρμα */
  border:1px solid #cfe3f5 !important;border-radius:24px !important;
  background:#fff;color:#1e2a33;
}
.fdw-news input[type=email]:focus,.fdw-news input[type=text]:focus{outline:3px solid #9cc6ea;outline-offset:1px;}
.fdw-news input.subbutton,.fdw-news td.acysubbuttons input{
  min-height:46px;padding:10px 26px !important;cursor:pointer;
  background:#10357f !important;color:#fff !important;border:1px solid #10357f !important;
  border-radius:24px !important;font-weight:700;box-shadow:0 2px 6px rgba(16,53,127,.2);
}
.fdw-news input.subbutton:hover,.fdw-news td.acysubbuttons input:hover{background:#0d2a66 !important;}
.fdw-news .acym__field__error__block,.fdw-news .acym_module_error{color:#8b2a2a;font-size:.85rem;}
@media (max-width:600px){
  .fdw-news{padding:18px 16px 14px;}
  .fdw-news table.acym_form tr{flex-direction:column;}
  /* ⚠ Σε ΚΑΘΕΤΗ διάταξη το `flex:1 1 220px` του κελιού μεγαλώνει καθ' ΥΨΟΣ:
     το πεδίο email τραβούσε 350px κενού ανάμεσα σε αυτό και το κουμπί.
     Ο άξονας αλλάζει, η ίδια δήλωση σημαίνει άλλο πράγμα. */
  .fdw-news table.acym_form td{flex:0 0 auto !important;width:100%;}
  .fdw-news td.acysubbuttons input{width:100%;}
}

/* ── Το αναδυόμενο (μετακινεί το ΙΔΙΟ .fdw-news μέσα του, δεν φτιάχνει δεύτερο) ── */
.fdw-pop-back{position:fixed;inset:0;background:rgba(9,26,48,.55);z-index:2147482000;
  display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;transition:opacity .22s;}
.fdw-pop-back.on{opacity:1;}
.fdw-pop{position:relative;max-width:460px;width:100%;background:#fff;border-radius:16px;
  padding:26px 22px 18px;box-shadow:0 18px 60px rgba(0,0,0,.35);
  transform:translateY(10px);transition:transform .22s;max-height:90vh;overflow:auto;}
.fdw-pop-back.on .fdw-pop{transform:none;}
.fdw-pop .fdw-news{margin:0;border:0;background:none;box-shadow:none;padding:0;}
.fdw-pop-x{position:absolute;top:8px;right:8px;width:40px;height:40px;border-radius:50%;
  border:1px solid #e3e9ee;background:#fff;color:#10357f;font-size:19px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.fdw-pop-x:hover{background:#eaf6fc;}
.fdw-pop-later{display:block;width:100%;margin-top:14px;background:none;border:0;padding:8px;
  color:#6b757e;font-size:.85rem;cursor:pointer;text-decoration:underline;}

/* ═══ ΚΑΤΩ ΜΠΑΡΑ + ΜΕΤΡΗΤΗΣ ═══════════════════════════════════════════════
   Το υποσέλιδο είχε ένα μοναχικό εικονίδιο Facebook 25x17px στη μέση του
   #sp-bottom1 και, από κάτω, τον γυμνό μετρητή «Εμφανίσεις Άρθρων 1816237».
   Τώρα: Επικοινωνία αριστερά, Facebook δεξιά, και ο μετρητής μία διακριτική
   γραμμή με χιλιάδες. */
#sp-bottom1 ul.social-icons{display:none !important;}
.fdw-bottom{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;padding:10px 0;
}
.fdw-bbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:11px 22px;border-radius:26px;
  text-decoration:none !important;font-weight:700;line-height:1.2;
  background:#fff;color:#10357f !important;border:1px solid #cfe3f5;
  box-shadow:0 2px 6px rgba(16,53,127,.10);
  transition:background .15s,transform .15s,box-shadow .15s;
}
.fdw-bbtn:hover,.fdw-bbtn:focus{background:#eaf6fc;transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(16,53,127,.18);color:#10357f !important;}
.fdw-bbtn:focus-visible{outline:3px solid #9cc6ea;outline-offset:2px;}
.fdw-bbtn svg{width:19px;height:19px;fill:currentColor;flex:0 0 auto;}
.fdw-bbtn-fb{background:#10357f;color:#fff !important;border-color:#10357f;}
.fdw-bbtn-fb:hover,.fdw-bbtn-fb:focus{background:#0d2a66;color:#fff !important;}
@media (max-width:600px){
  .fdw-bottom{flex-direction:column;gap:10px;}
  .fdw-bbtn{width:100%;}
}

/* Ο μετρητής: ήταν στοιχείο λίστας του Bootstrap με γκρι «pill» badge που
   έπλεε δεξιά — σε κινητό έσπαγε σε δύο γραμμές. */
#sp-statistika .mod-stats{list-style:none;margin:0;padding:0;border:0;background:none;}
#sp-statistika .list-group-item{
  display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;
  border:0 !important;background:none !important;padding:6px 0 !important;
  color:#6b757e;font-size:.85rem;
}
#sp-statistika .badge{
  background:none !important;color:#10357f !important;
  font-weight:700;font-size:.92rem;padding:0 !important;
  border-radius:0 !important;float:none !important;
}

/* ═══ «ΤΑ ΜΗΝΥΜΑΤΑ ΤΗΣ ΗΜΕΡΑΣ ΚΑΤΑ ΘΕΜΑ» ══════════════════════════════════
   Το banner ήταν 230x35px χωρίς width/height στο <img>, οπότε σε οθόνη Retina
   το ζωγράφιζε ο browser στο διπλάσιο και έβγαινε θολό. Ανέβηκε ξανά σε
   τριπλάσια ανάλυση (690x105, ίδιο σχέδιο και χρώματα, μετρημένα από το
   πρωτότυπο) και εδώ κλειδώνεται το μέγεθος εμφάνισης — αλλιώς θα έδειχνε
   τριπλάσιο. Ίδια όψη, τριπλάσια ευκρίνεια. */
img[src*="TA_MHNYMATA_KATA_THEMA"]{
  width:230px !important; height:auto !important; max-width:100%;
  image-rendering:auto;
}
/* Είναι σύνδεσμος: το 35px ύψος δεν φτάνει για δάχτυλο — του δίνουμε
   περιοχή αφής χωρίς να αλλάξει η εικόνα. */
a:has(> img[src*="TA_MHNYMATA_KATA_THEMA"]){
  display:inline-block; padding:6px 0; line-height:0;
}

/* ═══ ΦΟΡΜΑ ΕΠΙΚΟΙΝΩΝΙΑΣ ══════════════════════════════════════════════════
   Οι ετικέτες των υποχρεωτικών πεδίων ήταν ΚΑΘΑΡΟ ΚΟΚΚΙΝΟ #ff0000 πάνω σε
   λευκό: αντίθεση 4,00 — κάτω από το όριο των 4,5 — και ξένο προς τη μπλε
   παλέτα του site. Το κόκκινο σημαίνει «λάθος»· εδώ σημαίνει απλώς
   «υποχρεωτικό», και αυτό το λέει ήδη ο αστερίσκος. */
.view-contact #sp-component label.required,
.com-contact #sp-component label.required{color:#1e2a33 !important;font-weight:700;}
.view-contact #sp-component label .star,
.com-contact #sp-component label .star{color:#b03a3a !important;font-weight:700;}

/* Τα πεδία ήταν 38px — κάτω από τα 44 του δαχτύλου. */
.com-contact #sp-component .contact-form input[type=text],
.com-contact #sp-component .contact-form input[type=email],
.com-contact #sp-component .contact-form textarea{
  width:100%;box-sizing:border-box;min-height:46px;padding:11px 14px;
  font-size:16px;   /* κάτω από 16px το Safari του iPhone κάνει zoom στη φόρμα */
  border:1px solid #cfe3f5 !important;border-radius:10px !important;
  background:#fff;color:#1e2a33;
}
.com-contact #sp-component .contact-form textarea{min-height:190px;line-height:1.5;}
.com-contact #sp-component .contact-form input:focus,
.com-contact #sp-component .contact-form textarea:focus{
  outline:3px solid #9cc6ea;outline-offset:1px;border-color:#9cc6ea !important;
}
.com-contact #sp-component .contact-form input[type=checkbox]{width:22px;height:22px;}
.com-contact #sp-component .contact-form .btn-primary,
.com-contact #sp-component .contact-form button[type=submit]{
  min-height:46px;padding:12px 28px !important;border-radius:24px !important;
  background:#10357f !important;border:1px solid #10357f !important;color:#fff !important;
  font-weight:700;box-shadow:0 2px 6px rgba(16,53,127,.2);
}
.com-contact #sp-component .contact-form .btn-primary:hover{background:#0d2a66 !important;}
.com-contact #sp-component .well{background:#f7fbfe;border:1px solid #cfe3f5;border-radius:14px;padding:18px 20px;}
@media (max-width:600px){
  .com-contact #sp-component .well{padding:14px 14px;}
  .com-contact #sp-component .contact-form .btn-primary{width:100%;}
}

/* ═══ ΚΑΡΟΥΖΕΛ ΒΙΒΛΙΩΝ (DJ-ImageSlider) ═══════════════════════════════════
   Ο ιδιοκτήτης: «οι γραμματοσειρές δεν είναι ίδιες με τις άλλες».
   Είχε δίκιο, αλλά η αιτία δεν ήταν η οικογένεια — ήταν το ΜΕΓΕΘΟΣ:
   οι τίτλοι ήταν Alegreya **11px** ενώ όλο το site τρέχει 15–17px.
   Σε 11px οι πατούρες της Alegreya εξαφανίζονται και το κείμενο μοιάζει
   με άλλη, πιο άχαρη γραμματοσειρά. Επιπλέον δύο τίτλοι κόβονταν κατά 1px
   (scrollHeight 41 vs clientHeight 40). */
ul[id^="slider"] .slide-title,
ul[id^="slider"] .slide-title a{
  font-family:"Alegreya","GFS Didot",Georgia,"Times New Roman",serif !important;
  font-size:13.5px !important;
  line-height:1.34 !important;
  font-weight:700 !important;
  color:#10357f !important;
  letter-spacing:.005em;
}
ul[id^="slider"] .slide-title{
  min-height:3.9em;          /* τρεις γραμμές χωρίς κόψιμο */
  display:flex; align-items:center; justify-content:center;
  padding:2px 4px; box-sizing:border-box;
}
ul[id^="slider"] .slide-title a{
  display:block; width:100%; text-decoration:none;
  overflow-wrap:break-word;
}
ul[id^="slider"] .slide-title a:hover{color:#0d2a66 !important;text-decoration:underline;}
ul[id^="slider"] .slide-desc{padding:6px 2px 4px;}
@media (max-width:600px){
  ul[id^="slider"] .slide-title,
  ul[id^="slider"] .slide-title a{font-size:12.5px !important;}
}

/* ── Ο τίτλος ήταν ΕΠΙΚΑΛΥΨΗ πάνω στο εξώφυλλο, όχι λεζάντα ──
   Το .slide-desc είναι position:absolute με inline bottom:0 (djimageslider.css:60)
   και αδιαφανές φόντο (#eaf6fc από custom.css:7219 + #383838 inline .slide-desc-bg).
   Στο «ΟΧΙ ΣΤΑ ΧΡΙΣΤΟΥΓΕΝΝΑ…» έτρωγε 126 από τα 193px — το 66% του εξωφύλλου.
   Επιπλέον ο τίτλος έπαιρνε 4 διαφορετικά ύψη (54/72/90/127) σε σταθερή κάρτα,
   οπότε οι λεζάντες δεν στοίχιζαν ποτέ μεταξύ τους.
   Λύση: η κάρτα γίνεται στήλη flex — εξώφυλλο πάνω, λεζάντα σταθερών 54px κάτω. */
ul[id^="slider"] > li{ display:flex !important; flex-direction:column; }
ul[id^="slider"] > li > a{
  flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:#fff;
}
/* contain, ΟΧΙ cover: σε βιβλιοπωλείο το κομμένο εξώφυλλο είναι χαμένη πώληση.
   Το ύψος της κάρτας (ένθεμα 420, image_height) είναι 320 ώστε τα 266px που
   χρειάζεται το ψηλότερο εξώφυλλο να χωράνε ολόκληρα σε πλάτος 145px. */
ul[id^="slider"] img.dj-image{
  width:100% !important; height:100% !important;
  object-fit:contain; object-position:center;
}
ul[id^="slider"] .slide-desc{
  position:static !important; flex:0 0 72px;
  width:auto !important; height:auto !important;
  bottom:auto !important; left:auto !important; padding:0 !important;
}
ul[id^="slider"] .slide-desc-bg{ display:none !important; }
ul[id^="slider"] .slide-desc-text{ padding:0 !important; }
/* ⚠ ΤΟ ΟΡΙΖΟΝΤΙΟ PADDING ΕΣΠΑΓΕ ΤΙΤΛΟΥΣ ΣΤΗ ΜΕΣΗ ΤΗΣ ΛΕΞΗΣ (5/9/2026)
   Ήταν 6px ανά πλευρά, δηλαδή 98px ωφέλιμα. Μετρημένο με canvas στη ΖΩΝΤΑΝΗ
   γραμματοσειρά (12,5px Alegreya): «ΑΠΟΘΗΣΑΥΡΙΣΜΑ» = 102px, «ΕΡΩΤΑΠΟΚΡΙΣΕΙΣ»
   = 103px. Δηλαδή έλειπαν 4-5 pixel και το overflow-wrap έκοβε το τελευταίο
   γράμμα σε δική του γραμμή: «ΑΠΟΘΗΣΑΥΡΙΣΜ / Α».
   Με 2px ανά πλευρά τα ωφέλιμα γίνονται 106px — χωράνε και οι δύο με περιθώριο.
   Ο κανόνας overflow-wrap:break-word ΔΕΝ φταίει· είναι ο σωστός. */
ul[id^="slider"] .slide-title{
  height:72px !important; min-height:72px !important;
  padding:4px 2px !important; background:transparent !important;
}
/* Τρεις γραμμές: μετρημένα, 18 από τους 20 τίτλους χωράνε ΟΛΟΚΛΗΡΟΙ.
   Στις 2 γραμμές θα κόβονταν 13. Σταθερό ύψος = στοιχισμένη σειρά. */
ul[id^="slider"] .slide-title a{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ── Το καρουζέλ ΔΕΝ εμφανιζόταν καθόλου σε κινητό ──
   Ο Layout Builder του Helix βάζει «d-none d-sm-none d-md-block» στο #sp-section-4:
   το .d-none του Bootstrap 5 είναι εκτός media query, οπότε κάτω από 768px
   τα 23 εξώφυλλα υπήρχαν στο DOM αλλά κανένα δεν αποδιδόταν. Το ID (1-0-0)
   νικά την κλάση (0-1-0) με ίσο !important. */
@media (max-width:767.98px){
  /* 5/9/2026: ΜΟΝΟ όταν η ενότητα έχει όντως module. Το καρουζέλ μεταφέρθηκε
     αργότερα στο #sp-component, οπότε ο παλιός ανεπιφύλακτος κανόνας κρατούσε
     ζωντανή μια ΑΔΕΙΑ ενότητα 60px. */
  #sp-section-4:has(.sp-module){ display:block !important; }
  ul[id^="slider"] .slide-title{ height:68px !important; min-height:68px !important; }
}

/* ── Το πλωτό κουμπί μενού καθόταν ΠΑΝΩ στο λογότυπο ──
   Το ένθεμα 422 (Offlajn) το τοποθετεί με «transform: translate(80px, 10px)»
   πάνω σε position:fixed top:0 left:0 — δηλαδή ακριβώς πάνω στη λέξη
   «Εκδόσεις» του banner, σε ΚΑΘΕ πλάτος οθόνης. Το banner πιάνει y 0→103
   σε κινητό, οπότε καμία θέση με y<110 δεν είναι καθαρή.
   Επειδή είναι ούτως ή άλλως fixed (ακολουθεί το σκρολ), το πάμε κάτω
   αριστερά: δεν συναντά ούτε το λογότυπο ούτε το καλάθι (πάνω δεξιά)
   ούτε το «Back To Top» (κάτω δεξιά), και στο κινητό πέφτει στη ζώνη
   του αντίχειρα. Μιμούμαστε τους ΙΔΙΟΥΣ επιλογείς του ενθέματος ώστε
   να μην πειραχτεί το κουμπί κλεισίματος μέσα στο ανοιχτό μενού. */
body > [class*="sm-btn-"],
.sm-content-inner > [class*="sm-btn-"]{
  top:auto !important;
  bottom:16px !important;
  left:14px !important;
  transform:none !important;
  /* 44×44 αντί 50×50: όσο χρειάζεται ένα δάχτυλο, όχι παραπάνω.
     Η σκιά είναι λειτουργική, όχι διακοσμητική — ένα πλωτό κουμπί
     ΘΑ περάσει πάνω από περιεχόμενο καθώς κυλάει η σελίδα· η σκιά
     το δηλώνει ως «από πάνω» αντί να μοιάζει με μπάλωμα. */
  width:44px !important; height:44px !important;
  border-radius:10px;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}
body > [class*="sm-btn-"] .menu-icon3,
.sm-content-inner > [class*="sm-btn-"] .menu-icon3{ margin:.18em !important; }

/* ── Αντίθεση κειμένου μέσα στα άρθρα ──
   Μετρημένο στη διαχείριση: 1.551 άρθρα γράφουν inline «color:#ff00ff»
   (είναι η απόδοση της ρήσης — «(Άγιος Νικόλαος Βελιμίροβιτς)») και 281
   γράφουν «color:#ff0000» (τίτλοι περιοδικών στις Συνδρομές).
   Αντίθεση σε λευκό: 3,14 και 4,00 — και τα δύο κάτω από το 4,5 που
   χρειάζεται για να διαβάζεται άνετα ένα κείμενο.
   ΔΕΝ πειράζουμε 1.832 άρθρα ένα-ένα: ο επεξεργαστής θα ξαναγράψει το ίδιο
   χρώμα αύριο. Μία δήλωση εδώ πιάνει ό,τι υπάρχει ΚΑΙ ό,τι γραφτεί.
   ⚠ ΟΙ ΚΑΝΟΝΕΣ ΔΕΝ ΖΟΥΝ ΕΔΩ. Η εξουδετέρωση των inline χρωμάτων των άρθρων
   είναι ήδη γραμμένη στο fdw-type.css §5 (μπλε + ματζέντα από παλιότερα,
   κόκκινο από 2/9/2026). Δεύτερο σημείο θα σήμαινε δύο πηγές αλήθειας για
   το ίδιο πράγμα — και ο κανόνας του fdw-type έχει ΜΕΓΑΛΥΤΕΡΗ ειδικότητα
   (:not([style*="background"])), οπότε ο εδώ κανόνας δεν θα ίσχυε ποτέ. */

/* ═══ ΚΑΡΤΑ ΕΠΙΚΟΙΝΩΝΙΑΣ ═══════════════════════════════════════════════════
   Ο ιδιοκτήτης: «να έχει τίτλο τι είναι το καθένα, είναι άσχημο».
   Η Joomla αφήνει ΚΕΝΟ τον χώρο της ετικέτας (<span class="jicons-text"> </span>)
   σε κάθε γραμμή, οπότε διεύθυνση, email, τηλέφωνο, κινητό και ιστότοπος
   έβγαιναν σαν γυμνή λίστα χωρίς να λέει τίποτα τι είναι το καθένα.
   Η ετικέτα μπαίνει με position:absolute και η τιμή παίρνει padding-left:
   έτσι το κείμενο ρέει σε ΟΛΟ το υπόλοιπο πλάτος και δεν σπάει σε στήλη. */
.com-contact__address{ max-width:640px; }
.com-contact__address .d-flex{
  display:block !important; margin:0 0 14px !important;
}
.com-contact__address .d-flex > .me-2{ display:none !important; }

.com-contact__address .contact-street,
.com-contact__address .contact-emailto,
.com-contact__address .contact-telephone,
.com-contact__address .contact-mobile,
.com-contact__address .contact-webpage,
.com-contact__address .contact-fax{
  position:relative; padding-left:126px; min-height:1.5em;
  font-size:16px; line-height:1.55; color:#1e2a33;
}
.com-contact__address .contact-street::before,
.com-contact__address .contact-emailto::before,
.com-contact__address .contact-telephone::before,
.com-contact__address .contact-mobile::before,
.com-contact__address .contact-webpage::before,
.com-contact__address .contact-fax::before{
  content:attr(data-fdw-label);
  position:absolute; left:0; top:.24em; width:110px; text-align:right;
  font-family:"Alegreya Sans","Helvetica Neue",Arial,sans-serif;
  font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  color:#6b7c8c; white-space:nowrap;
}
.com-contact__address a{
  color:#10357f; text-decoration:none;
  border-bottom:1px solid rgba(16,53,127,.28);
}
.com-contact__address a:hover{ border-bottom-color:#10357f; }

/* «Θέση: Εκδόσεις ΦΩΤΟΔΟΤΕΣ» ακριβώς κάτω από την επικεφαλίδα «Εκδόσεις
   ΦΩΤΟΔΟΤΕΣ» — καθαρή επανάληψη, δεν προσθέτει τίποτα. */
.com-contact .contact-position{ display:none !important; }

@media (max-width:600px){
  .com-contact__address .contact-street,
  .com-contact__address .contact-emailto,
  .com-contact__address .contact-telephone,
  .com-contact__address .contact-mobile,
  .com-contact__address .contact-webpage{
    padding-left:0; padding-top:1.35em;
  }
  .com-contact__address .contact-street::before,
  .com-contact__address .contact-emailto::before,
  .com-contact__address .contact-telephone::before,
  .com-contact__address .contact-mobile::before,
  .com-contact__address .contact-webpage::before{
    text-align:left; width:auto; top:0;
  }
}

/* ── §21 ΥΠΟΣΕΛΙΔΟ: ΑΝΑΓΝΩΣΙΜΟΤΗΤΑ (3/9/2026) ──
   Μετρημένο στο ζωντανό DOM, όχι εκτίμηση από τα CSS: οι δύο σύνδεσμοι του υποσέλιδου
   ήταν #16456A πάνω σε φόντο #385C7C = αναλογία 1,43:1, και η γραμμή του ΑΦΜ #1E2A33
   = 2,08:1. Το όριο ανάγνωσης κατά WCAG είναι 4,5:1 και το κοινό του περιοδικού είναι
   70+. Εκεί μέσα ζουν οι «Όροι Πώλησης» — το νομικό κείμενο του καταστήματος, που
   πρακτικά δεν διαβαζόταν.
   ΓΙΑΤΙ ΛΕΥΚΟ ΚΑΙ ΟΧΙ ΝΕΟ ΧΡΩΜΑ: το «© Copyright» δίπλα τους ήταν ΗΔΗ λευκό στο 7,02:1.
   Ευθυγραμμιζόμαστε με ό,τι ήδη δουλεύει στο ίδιο πλαίσιο, αντί να εισαχθεί τέταρτη
   απόχρωση στην παλέτα σιελ/λευκό/μπλε. */
#sp-footer1 #mod-custom440{ color:#eaf1f8; }
#sp-footer1 #mod-custom440 span{ color:#eaf1f8 !important; }
#sp-footer1 #mod-custom440 a{ color:#fff !important; text-decoration:underline;
  text-underline-offset:2px; }
#sp-footer1 #mod-custom440 a:hover,
#sp-footer1 #mod-custom440 a:focus{ color:#cfe2f3 !important; }

/* ── /syndromes: ΕΞΩΤΕΡΙΚΟ — επιλογή προορισμού (3/9/2026) ──
   Ο ιδιοκτήτης έχει πελάτες εκτός Ελλάδας και η τιμή αλλάζει ανά χώρα. Το eShop
   δεν αλλάζει τιμή ανά χώρα από μόνο του, οπότε φτιάχτηκαν 12 ξεχωριστά προϊόντα
   (4 προορισμοί × ΚΡΙΝΑ / ΦΤΕΡΟΥΓΙΣΜΑΤΑ / και τα δύο) — αντίγραφα του 393, ώστε
   να κληρονομούν ΦΠΑ, απόθεμα και ρυθμίσεις που ήδη δουλεύουν.
   ΓΙΑΤΙ ΚΡΥΜΜΕΝΑ ΠΙΣΩ ΑΠΟ ΚΟΥΜΠΙ: αν έμπαιναν και τα 15 μαζί, ο Έλληνας
   επισκέπτης — που είναι η συντριπτική πλειοψηφία — θα έβλεπε 15 τιμές αντί για
   3 και θα δυσκολευόταν. Η Ελλάδα μένει προεπιλογή· το εξωτερικό ανοίγει μόνο
   όποιος το χρειάζεται. */
.fdw-abroad{ margin:16px 0 0; }
.fdw-abroad-toggle{ display:inline-flex; align-items:center; gap:8px;
  background:none; border:0; padding:8px 0; cursor:pointer;
  color:#10357f; font-weight:700; font-size:1rem; font-family:inherit; }
.fdw-abroad-toggle:hover{ text-decoration:underline; }
.fdw-abroad-toggle .ar{ transition:transform .18s; font-size:.8em; }
.fdw-abroad[open] .ar, .fdw-abroad.on .ar{ transform:rotate(90deg); }
.fdw-abroad-body{ display:none; margin-top:6px; padding:16px 16px 12px;
  background:#fff; border:1px solid #cfe3f5; border-radius:10px; }
.fdw-abroad.on .fdw-abroad-body{ display:block; }
.fdw-abroad-body > p{ margin:0 0 12px !important; color:#1e2a33 !important;
  font-size:.97rem; line-height:1.55; }
.fdw-dest{ margin:0 0 16px; }
.fdw-dest:last-child{ margin-bottom:4px; }
.fdw-dest h4{ margin:0 0 3px; color:#10357f; font-size:1.06rem; }
.fdw-dest .freq{ margin:0 0 8px; color:#5a6b7a; font-size:.87rem; }
.fdw-dest a{ display:block; background:#10357f; color:#fff !important;
  text-decoration:none; padding:11px 16px; border-radius:22px; margin:7px 0;
  font-weight:700; text-align:center; font-size:.97rem; min-height:44px;
  line-height:22px; }
.fdw-dest a:hover{ background:#0d2a66; }
@media (max-width:600px){ .fdw-dest a{ font-size:1rem; } }

/* ── /syndromes: οι δύο γραμμές που έλειπαν από το μπλοκ των κουμπιών ──
   Το μπλοκ έχει inline styles (ζει σε άρθρο), οπότε ταιριάζουμε το ύφος του. */
.fdw-syn-note{ margin:0 0 14px !important; padding:10px 13px; background:#fff;
  border:1px solid #cfe3f5; border-radius:9px; color:#1e2a33 !important;
  font-size:1.02rem; line-height:1.55; }
.fdw-syn-note strong{ color:#10357f; }
.fdw-syn-tel{ margin:14px 0 0 !important; color:#1e2a33 !important;
  font-size:.98rem; text-align:center; }
.fdw-syn-tel a{ color:#10357f; font-weight:700; white-space:nowrap; }
@media (max-width:600px){
  .fdw-syn-note{ font-size:1.05rem; }
  .fdw-syn-tel a{ display:inline-block; min-height:44px; line-height:44px; padding:0 4px; }
}

/* ── Οι δύο σελίδες των περιοδικών: το κουμπί που έλειπε ──
   Ήταν αδιέξοδα: 0 σύνδεσμοι, 0 εικόνες. Το πλαίσιο δένει με το σιελ/λευκό. */
.fdw-mag-cta{ margin:26px 0 8px; padding:20px 22px; background:#eef5fb;
  border:1px solid #cfe0ef; border-left:5px solid #10357f; border-radius:8px; }
.fdw-mag-cta h3{ margin:0 0 6px; color:#10357f; font-size:1.3rem; line-height:1.25; }
.fdw-mag-cta p{ margin:0 0 14px; color:#1e2a33; font-size:1.02rem; line-height:1.6; }
.fdw-mag-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.fdw-mag-btns a{ display:inline-block; padding:12px 18px; border-radius:7px;
  font-weight:600; text-decoration:none; min-height:46px; line-height:22px; }
.fdw-mag-btns a.p{ background:#10357f; color:#fff !important; }
.fdw-mag-btns a.p:hover{ background:#0d2a66; }
.fdw-mag-btns a.s{ background:#fff; color:#10357f !important; border:1px solid #10357f; }
.fdw-mag-btns a.s:hover{ background:#e3eefa; }
.fdw-mag-tel{ margin:0 !important; font-size:.97rem; color:#1e2a33; }
.fdw-mag-tel a{ color:#10357f; font-weight:600; white-space:nowrap; }
@media (max-width:600px){
  .fdw-mag-cta{ padding:18px 15px; }
  .fdw-mag-btns{ flex-direction:column; }
  .fdw-mag-btns a{ text-align:center; }
  .fdw-mag-tel a{ display:inline-block; min-height:44px; line-height:44px; }
}

/* ── Σελίδες συνδρομής: η γραμμή που έλειπε και η περιγραφή ──
   Διακριτικό, όχι διαφημιστικό: το κοινό είναι 70+ και η σελίδα πρέπει να
   διαβάζεται, όχι να πουλάει με φωνές. Χρώματα από την υπάρχουσα παλέτα. */
.fdw-sub-line{ margin:-6px 0 14px; font-size:1.02rem; color:#1e2a33;
  background:#eef5fb; border-left:4px solid #10357f; border-radius:0 6px 6px 0;
  padding:9px 12px; }
.fdw-sub-line strong{ color:#10357f; }
.fdw-sub-desc{ margin:0 0 18px; color:#1e2a33; font-size:1rem; line-height:1.65; }
.fdw-sub-desc p{ margin:0 0 8px; }
.fdw-sub-desc ul{ margin:0; padding-left:1.25em; }
.fdw-sub-desc li{ margin:0 0 4px; }
@media (max-width:600px){
  .fdw-sub-line{ font-size:1.05rem; padding:11px 13px; }
}

/* ── Τηλέφωνο στο υποσέλιδο ──
   Ο αριθμός είναι ΚΟΥΜΠΙ ΚΛΗΣΗΣ, όχι διακοσμητικό κείμενο: nowrap ώστε να μη σπάσει
   στη μέση σε στενή οθόνη, και σε κινητό στόχος αφής ≥44px — αλλιώς ο 75χρονος που
   θέλει να ρωτήσει αστοχεί. */
.fdw-fon{ display:block; margin-top:5px; font-size:.92em; line-height:1.9; }
.fdw-fon a{ color:#fff !important; font-weight:600; white-space:nowrap;
  text-decoration:none; border-bottom:1px solid rgba(255,255,255,.45); }
.fdw-fon a:hover,.fdw-fon a:focus{ border-bottom-color:#fff; }
.fdw-fon .fdw-fon-sep{ opacity:.6; padding:0 .45em; }
@media (max-width:600px){
  .fdw-fon{ font-size:1em; }
  .fdw-fon a{ display:inline-block; min-height:44px; line-height:44px;
    padding:0 6px; border-bottom:0; text-decoration:underline;
    text-underline-offset:3px; }
  .fdw-fon .fdw-fon-sep{ display:none; }
}

/* Ταμείο: σημείωση συνδρομής πάνω από τις επιλογές λογαριασμού */
.fdw-sub-note{background:#eaf3fb;border:1px solid #bcd6ee;border-left:4px solid #10357f;border-radius:8px;padding:10px 14px;margin:8px 0 12px;color:#10357f;font-size:.95em;line-height:1.45}
.fdw-sub-note strong{color:#0b2a66}

/* fdw-cart-mobile: στο κινητό το σταθερό κουμπί καλαθιού (fixed, top:10px) πατούσε πάνω στο header.
   Πάει κάτω δεξιά — απέναντι από το κουμπί μενού που είναι κάτω αριστερά. Οθόνη: αμετάβλητο. */
@media (max-width:640px){
  #eshop-cart{top:auto!important;bottom:16px!important;right:14px!important;box-shadow:0 4px 16px rgba(3,18,40,.35)}
}

/* fdw-eshop-forms: οι φόρμες του eShop (ταμείο, λογαριασμός, διεύθυνση) είχαν το label ΔΙΠΛΑ στο πεδίο
   σε στήλη 3/12 — «Ηλεκτρονικό ταχυδρομείο», «Ταχυδρομικός κώδικας» έσπαγαν σε 2-3 γραμμές και τα πεδία
   κόλλαγαν το ένα στο άλλο. Το label πάει ΠΑΝΩ από το πεδίο, σε όλο το πλάτος της στήλης. */
.com-eshop .form-row.form-group, .com-eshop .row.form-group.form-row{margin-bottom:14px;align-items:flex-start}
.com-eshop .form-row > .form-control-label,
.com-eshop .form-row > label[class*="col-"]{flex:0 0 100%;max-width:100%;width:100%;padding-top:0;padding-bottom:4px;font-weight:600;line-height:1.3;text-align:left}
.com-eshop .form-row > .eb-form-control,
.com-eshop .form-row > [class*="col-md-9"],
.com-eshop .form-row > [class*="col-sm-9"]{flex:0 0 100%;max-width:100%;width:100%}
.com-eshop .form-row .form-control, .com-eshop .form-row select, .com-eshop .form-row textarea{width:100%;min-height:44px}
.com-eshop .checkout-content h4, .com-eshop #checkout-content h4{margin:0 0 12px}
@media (min-width:768px){ .com-eshop .checkout-content > .col-md-6 + .col-md-6, .com-eshop .checkout-content .col-md-6 + .col-md-6{padding-left:28px} }

/* fdw-cover: εξώφυλλο τελευταίου τεύχους στις σελίδες των δύο περιοδικών (άρθρα 3518/3519). */
.fdw-cover{float:right;width:210px;margin:0 0 14px 22px;text-align:center;font-size:.85em;color:#4b5563}
.fdw-cover a{display:block;text-decoration:none}
.fdw-cover img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 8px 22px rgba(3,18,40,.28);transition:transform .2s}
.fdw-cover a:hover img{transform:translateY(-3px)}
.fdw-cover span{display:block;margin-top:8px}
@media (max-width:640px){ .fdw-cover{float:none;width:62%;margin:0 auto 18px} }

/* fdw-empty-left: το Vertical Menu (module 422, θέση left) μεταφέρει με JS τα στοιχεία του στο off-canvas
   και αφήνει στο #sp-left ένα ΑΔΕΙΟ κέλυφος. Σε σελίδες όπου είναι το μόνο module της στήλης (Συνδρομές,
   προϊόντα, καλάθι, ταμείο, αναζήτηση, κατηγορίες) έμενε μια κενή στήλη 257px και το περιεχόμενο
   στριμωχνόταν δεξιά — «δεν είναι ίσια». Όταν η αριστερή στήλη δεν έχει τίποτα ορατό, κλείνει και το
   περιεχόμενο παίρνει όλο το πλάτος. Σε browsers χωρίς :has() δεν αλλάζει τίποτα. */
@media (min-width:992px){
  #sp-left:not(:has(.sp-module :is(li,a,img,p,form,input,h3,h4,table))){display:none!important}
  /* padding 15px (όχι τα 10 του Helix): η .row του eShop/άρθρου έχει -15px, οπότε ο τίτλος και η εικόνα
     έπεφταν 5px ΑΡΙΣΤΕΡΑ από την άκρη του header (58 vs 63) — «δεν είναι ίσιο». Με 15 πέφτουν ακριβώς στα 63. */
  #sp-left:not(:has(.sp-module :is(li,a,img,p,form,input,h3,h4,table))) ~ #sp-component{flex:0 0 100%;max-width:100%;padding-left:15px;padding-right:15px}
}

/* fdw-straight (4/9/2026): «όλες οι σελίδες στην ευθεία». Το bootstrap.min.css του template δίνει
   .col-lg-3{width:22%;margin-left:30px} και .col-lg-9{padding:20px 30px 50px 10px}, οπότε σε 1440px
   η πλαϊνή στήλη ξεκινούσε στα 173 ενώ header/μενού στα 143 (30px μέσα), το περιεχόμενο τελείωνε
   στα 1262 αντί για 1283 και η δεξιά στήλη της αρχικής στα 1272. Το breadcrumb (.px-3) έμπαινε 16px,
   το #sp-footer1 (.col-lg-12 με padding 10) έβγαινε 5px έξω. Όλα στη γραμμή του header: 143 → 1283.
   Το πλάτος της στήλης μένει 22% ώστε τα κυματιστά κουμπιά να κρατήσουν το μέγεθός τους. */
@media (min-width:992px){
  #sp-main-body .row > #sp-left.col-lg-3,
  #sp-main-body .row > #sp-right.col-lg-3{width:22%;flex:0 0 22%;max-width:22%;margin-left:0;margin-right:0;padding-left:15px;padding-right:15px}
  #sp-main-body .row > #sp-component.col-lg-9,
  #sp-main-body .row > #sp-component.col-lg-6{width:auto;flex:1 1 0;max-width:none;min-width:0;padding-left:15px;padding-right:15px}
}
nav.mod-breadcrumbs__wrapper .breadcrumb.px-3{padding-left:0!important;padding-right:0!important}
/* ⚠ Το id sp-footer1 το έχουν ΚΑΙ η <section> ΚΑΙ η στήλη .col-lg-12 μέσα της — στόχευε με το tag. */
div#sp-footer1.col-lg-12,#sp-footer1 .row > .col-lg-12{padding-left:15px!important;padding-right:15px!important}
/* Σελίδα σύνδεσης: το κουμπί passkey (plg_system_webauthn) φόρτωνε SVG χωρίς μέγεθος → μαύρος κύκλος 333px. */
button[class*="plg_system_webauthn"] svg,.plg_system_webauthn_login_button svg{width:1.25em;height:1.25em;vertical-align:-.2em;margin-right:.4em}
/* Header (θέση slider): το col-lg-12 του έχει padding 0. Στα 1440 δεν φαινόταν (το .fdw-hdr κόβεται στα
   1140 και κεντράρεται), αλλά σε container κάτω από 1170px — iPad οριζόντια, 1024 — το header έβγαινε
   15px πιο έξω από μενού, περιεχόμενο και υποσέλιδο (22 αντί για 37). */
#sp-slider .row > .col-lg-12{margin-left:0!important;margin-right:0!important;padding-left:15px!important;padding-right:15px!important;width:100%!important;max-width:100%!important}
/* (η στήλη είχε και max-width:1140px — χωρίς το margin 15 έμενε 1140 πλάτος από τα 128, δηλ. 30px κοντύτερη δεξιά.
   Με 100% γεμίζει τη .row (1170) και το padding 15 δίνει ακριβώς τα 1140 του .fdw-hdr, 143→1283.) */
/* (πάνω από 1200px το template έδινε στην ίδια στήλη margin 0 15px αντί για padding — γι' αυτό τα 143 στα 1440
   ήταν σύμπτωση, και με σκέτο padding το header έμπαινε στα 158· margin 0 + padding 15 δίνει 143 παντού.) */
/* Κινητό/tablet: το custom.css βάζει #sp-main-body{padding:0 20px!important} και το #sp-footer1 έχει 10px,
   οπότε στα 375 το κείμενο ξεκινούσε στα 32 και το υποσέλιδο στα 22, ενώ header/μενού/breadcrumb στα 12.
   Στο desktop τα padding αυτά δεν κάνουν τίποτα (ο container κεντράρεται), στο κινητό στραβώνουν. */
/* ⚠ ΣΕ ΟΛΑ ΤΑ ΠΛΑΤΗ, όχι μόνο στο κινητό. Το custom.css δίνει #sp-main-body{padding:0 20px!important} και το
   #sp-footer1 έχει 10px, ενώ οι υπόλοιπες ενότητες (header, μενού) έχουν 0. Όσο ο .container πιάνει το
   max-width του (960 ή 1140) η διαφορά εξουδετερώνεται από το κεντράρισμα — ΜΟΛΙΣ ΟΜΩΣ ΔΕΝ ΤΟ ΠΙΑΝΕΙ,
   το περιεχόμενο μετατοπίζεται. Μετρημένο στα 1000px: header/μενού/breadcrumb/υποσέλιδο 25, τίτλος και
   προϊόν 32 — 7px δεξιά. Συμβαίνει στη ζώνη 992–1000px, δηλαδή και σε όποιον έχει ζουμ στον browser
   (125% σε παράθυρο 1240px δίνει ακριβώς 992). Με padding 0 κάθε ενότητα υπολογίζει τον ίδιο άξονα. */
section#sp-main-body,section#sp-footer1{padding-left:0!important;padding-right:0!important}
/* «Ίσια αλλά πιο μαζεμένα» (4/9/2026, επιλογή ιδιοκτήτη). Το ίσιωμα έσπρωξε τις πλαϊνές στήλες προς τα
   έξω για να ακουμπήσουν στο header (αριστερή 173→143, κέντρο 430–985 → 400–1025) και η σελίδα άνοιξε
   στα δύο άκρα: «σαν να έχεις πάει τα πάντα στα δεξιά και στα αριστερά». Λύση: στενεύει ΟΛΟ το μπλοκ
   —header, μενού, breadcrumb, περιεχόμενο, υποσέλιδο μαζί— από 1140 σε 1000. Έτσι μένουν όλα στην ίδια
   γραμμή ΚΑΙ μπαίνει περισσότερο μπλε γύρω. Κάτω από 1200px ο container είναι ήδη 960, δεν αλλάζει. */
@media (min-width:1200px){
  /* 4/9/2026 (feedback Μιχάλη: «τουλάχιστον 800px, να προσαρμόζεται ανά οθόνη»):
     από σταθερό 1000 σε ΕΛΑΣΤΙΚΟ. Σε φορητό μένει μαζεμένο όπως το ζήτησε ο
     ιδιοκτήτης, σε μεγάλη οθόνη ανοίγει ως 1200 ώστε να μη χάνεται χώρος.
     1300→1000 · 1440→1094 · 1600→1200 · 1920→1200. Ποτέ κάτω από 1000 σε desktop. */
  /* 4/9/2026: ο ιδιοκτήτης ζήτησε ΟΛΗ η σελίδα να πιάνει το πλάτος, όχι μόνο το header
     («δεν είναι όλο το page αλλά μόνο το πάνω, θέλω όλο»). */
  /* min(): πάντα τουλάχιστον 64px μπλε εκατέρωθεν. Με σκέτο 1400px, στα 1440
     το μπλε έβγαινε 12px κλωστή - διαβάζεται ως λάθος, όχι ως πλαίσιο. */
  /* 5/9/2026: «να απλώσει αυτό στο μπλε, να είναι όλη η οθόνη γεμάτη με το
     site». Το μπλοκ ανοίγει σε όλο το πλάτος. Κρατιέται ΜΟΝΟ το padding των
     26px ώστε τίποτα να μην ακουμπάει την άκρη της οθόνης. */
  section[id^="sp-"] > .container{max-width:none!important;width:100%!important;
    margin-left:auto!important;margin-right:auto!important;
    padding-left:26px!important;padding-right:26px!important}
  /* ΚΑΜΙΑ ΕΞΑΙΡΕΣΗ ΠΛΑΤΟΥΣ (4/9/2026, μετά το «λες και ακουμπάς πράγματα»).
     Το πανό και η μπάρα μενού ήταν 1905 ενώ το περιεχόμενο 1400: οι άκρες δεν
     έδεναν και η σελίδα διαβαζόταν ως τρία ξεχωριστά κομμάτια ακουμπισμένα το
     ένα πάνω στο άλλο. Τώρα ΟΛΑ πατούν στον ίδιο άξονα. */
  /* ⚠ ΤΟ HEADER ΔΕΝ ΞΕΠΕΡΝΑΕΙ ΤΑ 1140. Δοκιμάστηκε 1280 (4/9) και ήταν λάθος: το
     πανό είναι σχεδιασμένο σε 1140 με σταθερή αναλογία, οπότε τεντώθηκε ΚΑΙ ψήλωσε
     δυσανάλογα, τρώγοντας μισή οθόνη. Γι' αυτό ΟΛΗ η στήλη κόβεται στα 1140:
     έτσι μένουν όλα στην ίδια γραμμή ΚΑΙ το πανό στο φυσικό του μέγεθος. */
}
/* ⛔ ΤΟ ΚΑΛΑΘΙ ΗΤΑΝ ΚΟΛΛΗΜΕΝΟ ΣΤΗΝ ΑΚΡΗ ΤΟΥ ΠΑΡΑΘΥΡΟΥ, ΟΧΙ ΣΤΗ ΣΤΗΛΗ ΤΟΥ SITE (4/9/2026).
   Το #eshop-cart είναι position:fixed με right:16px — δηλαδή δένεται στο viewport, ενώ ΟΛΟ το site
   ζει σε κεντραρισμένη στήλη 1140px. Σε οθόνη 1900px το περιεχόμενο τελείωνε στα 1513 και το καλάθι
   καθόταν στα 1751-1869: **230px μόνο του μέσα στο μπλε**, τέρμα δεξιά. Όσο πιο πλατιά η οθόνη, τόσο
   χειρότερα — γι' αυτό στα 1440 (που μετρούσα) ήταν μόλις 42px και δεν φαινόταν.
   Τώρα η δεξιά του άκρη πέφτει ΑΚΡΙΒΩΣ στη δεξιά άκρη της στήλης: 50% - μισή στήλη.
   Το max() το κρατάει στα 16px όταν η στήλη πιάνει όλο το πλάτος (κινητό/tablet). */
#eshop-cart{left:auto!important;right:38px!important;
  transition:opacity .18s ease, transform .18s ease}
/* ── ΤΟ ΚΑΛΑΘΙ ΕΜΦΑΝΙΖΕΤΑΙ ΜΟΝΟ ΟΤΑΝ ΧΡΕΙΑΖΕΤΑΙ (4/9/2026) ────────────────────
   Ήταν μόνιμα κολλημένο πάνω δεξιά, πάνω από την εικόνα του header, ακόμη κι
   άδειο («0 - 0.00€»). Τώρα κρύβεται όταν το καλάθι είναι άδειο ΚΑΙ στις ίδιες
   τις σελίδες καλαθιού/ταμείου, όπου δεν έχει νόημα. */
#eshop-cart.fdw-cart-off{opacity:0!important;visibility:hidden!important;
  pointer-events:none!important;transform:translateY(-10px)!important}
/* ΑΝΑΖΗΤΗΣΗ: δοκιμάστηκε αριστερή στοίχιση και πλήρες πλάτος — ο ιδιοκτήτης είπε ότι έτσι «πάνε τα
   πάντα δεξιά κι αριστερά και δεν είναι ωραίο». ΕΠΑΝΗΛΘΕ στο αρχικό του module 447 (560px, κέντρο).
   ΜΗΝ το ξαναπειράξεις χωρίς να το ζητήσει: δεν τον ενοχλούσε ποτέ. */
@media (min-width:992px) and (max-width:1199.98px){
  /* 992–1199: ο container είναι 960 με 12px padding → η ορατή στήλη είναι 936, όχι 960. */
  #eshop-cart{right:max(12px, calc(50% - 468px))!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   eSHOP UI — ανανέωση 4/9/2026 (ζητήθηκε: «το eshop δεν είναι τόσο ωραίο»)
   Στόχοι: το εξώφυλλο να είναι ο ήρωας της κάρτας, καθαρός ρυθμός στις
   στήλες, ένα ξεκάθαρο κουμπί αγοράς, και σωστοί στόχοι αφής στο κινητό.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Κάρτα προϊόντος ────────────────────────────────────────────────── */
#products-list .ajax-block-product{
  padding:0 0 14px!important;border-color:#dbe9f7!important;border-radius:16px!important;
  overflow:hidden;box-shadow:0 1px 3px rgba(16,53,127,.05),0 6px 18px rgba(16,53,127,.05)!important;
}
#products-list .ajax-block-product:hover{box-shadow:0 10px 28px rgba(16,53,127,.16)!important;}

/* Το εξώφυλλο σε «ράφι»: σταθερό ύψος ώστε όλες οι κάρτες να ευθυγραμμίζονται,
   απαλό φόντο ώστε το λευκό περιθώριο του JPEG να μη φαίνεται σαν κενό. */
#products-list .eshop-image-block{
  background:linear-gradient(180deg,#f4faff 0%,#e9f4fc 100%);
  border-bottom:1px solid #e3f0fa;padding:16px 12px;margin:0 0 4px;
  display:flex;align-items:center;justify-content:center;min-height:236px;
}
#products-list .eshop-image-block .image{display:block;line-height:0;}
#products-list .product-image img,
#products-list .eshop-image-block .image img{
  width:auto!important;max-width:100%;height:200px!important;object-fit:contain;
  border-radius:6px;filter:drop-shadow(0 6px 14px rgba(10,35,80,.22));
  transition:transform .18s ease;mix-blend-mode:multiply;
}
#products-list .ajax-block-product:hover .image img{transform:translateY(-2px) scale(1.03);}

/* ── 2. Τίτλος & τιμή ──────────────────────────────────────────────────── */
#products-list .eshop-info-block{padding:0 14px;}
#products-list .eshop-info-block h5{
  min-height:0!important;margin:12px 0 6px!important;display:-webkit-box!important;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-size:15px;line-height:1.35;height:calc(3 * 1.35em);
}
#products-list .eshop-info-block h5 a{font-size:15px;}
#products-list .eshop-product-price .price{font-size:19px!important;letter-spacing:.2px;}
#products-list .eshop-product-price{padding:4px 0 2px;}

/* ── 3. Κουμπί αγοράς: ένα, ευδιάκριτο, σε όλο το πλάτος ───────────────── */
#products-list .eshop-buttons{margin-top:12px!important;padding:0 14px;}
#products-list .eshop-cart-area{display:flex;flex-direction:column;gap:8px;align-items:stretch;}
#products-list .eshop-quantity{align-self:center;height:34px;}
#products-list .eshop-quantity .button-minus,
#products-list .eshop-quantity .button-plus{width:32px;height:32px;font-size:16px;}
#products-list .eshop-quantity .eshop-quantity-value{width:40px;height:32px;}
#products-list .add-to-cart-button{
  width:100%;justify-content:center;padding:11px 14px!important;font-size:14px!important;
  border-radius:22px!important;
}

/* ── 4. Γρήγορη ματιά: εμφανίζεται πάνω στο εξώφυλλο, όχι σε δική της σειρά ── */
#products-list .eshop-quickview-button{
  position:absolute;top:10px;right:10px;z-index:3;opacity:0;transform:translateY(-4px);
  transition:opacity .16s,transform .16s;background:rgba(255,255,255,.94)!important;
  color:#10357f!important;border:1px solid #cfe3f5!important;border-radius:16px!important;
  padding:5px 12px!important;font-size:12px!important;font-weight:700!important;box-shadow:0 2px 8px rgba(16,53,127,.18);
}
#products-list .ajax-block-product:hover .eshop-quickview-button,
#products-list .eshop-quickview-button:focus{opacity:1;transform:none;}

/* ── 5. Μπάρα ταξινόμησης ──────────────────────────────────────────────── */
.eshop-products-list .eshop-display-limit,
.eshop-products-list .eshop-sort-options,
#eshop-main-container .display-limit,#eshop-main-container .sort-options{margin-bottom:14px;}
#eshop-main-container select,.eshop-products-list select{
  border:1px solid #cfe3f5!important;border-radius:20px!important;padding:8px 34px 8px 14px!important;
  background-color:#fff!important;font-size:14px;min-height:40px;color:#1e2a33;
}
#eshop-main-container select:focus{outline:3px solid #9cc6ea;outline-offset:1px;}

/* ── 6. Σελίδα προϊόντος ───────────────────────────────────────────────── */
/* ⚠ Το .product-image είναι <a> (inline): με padding/background έγινε κουτί 357x70 και η εικόνα
   ΞΕΧΕΙΛΙΣΕ πάνω στο κείμενο του προϊόντος. Ίδια παγίδα με το .fdw-hdr του header — θέλει display:block.
   Το «ράφι» μπαίνει στο ΕΞΩΤΕΡΙΚΟ div (.image.img-thumbnail), όχι στον σύνδεσμο. */
.view-product #sp-component .image.img-thumbnail{
  background:linear-gradient(180deg,#f4faff 0%,#e9f4fc 100%)!important;
  border:1px solid #e3f0fa!important;border-radius:16px!important;padding:18px!important;
  display:block;text-align:center;box-shadow:none!important;
}
.view-product #sp-component a.product-image{display:block;line-height:0;padding:0;background:none;}
.view-product #sp-component .product-image img{
  border-radius:8px;filter:drop-shadow(0 10px 26px rgba(10,35,80,.28));
  width:auto!important;max-width:100%!important;height:auto!important;
  display:inline-block;mix-blend-mode:multiply;
}
.view-product #sp-component .product-sku,
.view-product #sp-component .product-manufacturer{color:#5b6b7c;font-size:14px;}
.view-product #sp-component #product-price .price,
.view-product #sp-component .product-price .price{font-size:26px!important;font-weight:800!important;}
.view-product #sp-component .product-cart{margin-top:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.view-product #sp-component #add-to-cart{padding:13px 30px!important;font-size:16px!important;}

/* ── 7. Κινητό ─────────────────────────────────────────────────────────── */
@media (max-width:600px){
  #products-list .eshop-image-block{min-height:186px;padding:12px 8px;}
  #products-list .product-image img,
  #products-list .eshop-image-block .image img{height:158px!important;}
  #products-list .eshop-info-block{padding:0 10px;}
  #products-list .eshop-info-block h5,
  #products-list .eshop-info-block h5 a{font-size:14px;}
  #products-list .eshop-buttons{padding:0 10px;}
  #products-list .add-to-cart-button{min-height:44px;font-size:14px!important;}
  #products-list .eshop-quantity{height:40px;}
  #products-list .eshop-quantity .button-minus,
  #products-list .eshop-quantity .button-plus{width:40px;height:38px;}
  #products-list .eshop-quantity .eshop-quantity-value{width:44px;height:38px;}
  /* Η γρήγορη ματιά δεν έχει hover στο κινητό — μένει κρυφή, το κλικ ανοίγει το προϊόν. */
  #products-list .eshop-quickview-button{display:none!important;}
  /* Το εξώφυλλο γέμιζε όλη την οθόνη και η τιμή με το «Προσθήκη στο καλάθι» έπεφταν κάτω από
     δύο σκρολαρίσματα. Με όριο ύψους φαίνονται μαζί, χωρίς να χαθεί η ευκρίνεια. */
  .view-product #sp-component .image.img-thumbnail{padding:12px!important;}
  .view-product #sp-component .product-image img{max-height:46vh!important;width:auto!important;}
  /* Το πλωτό καλάθι κάθεται πάνω στα κουμπιά της τελευταίας σειράς προϊόντων. */
  #products-list{padding-bottom:78px;}
}


/* ── ΔΕΥΤΕΡΟΣ ΔΡΟΜΟΣ ΠΛΟΗΓΗΣΗΣ (4/9/2026) ──────────────────────────────────
   Ζητήθηκε από τον νονό του ιδιοκτήτη: «αυτά που έχεις οριζόντια… να
   προβάλλονται και σε μπάρα, να υπάρχουν δύο τρόποι προσέγγισης απ' τον
   αναγνώστη». Το πάνω κυματιστό μενού χάνεται μόλις κατέβεις — σε άρθρο 3.000
   λέξεων ο αναγνώστης πρέπει να γυρίσει στην κορυφή για να πάει αλλού.
   Τα ίδια 7 στοιχεία μπαίνουν και κάθετα στην πλαϊνή στήλη, με τις ΥΠΑΡΧΟΥΣΕΣ
   κλάσεις .fdw-side/.fdw-head/.fdw-wave — καμία νέα εμφάνιση, μηδέν ασυμφωνία. */
#sp-left .fdw-mainnav{margin:0 0 16px}
#sp-left .fdw-mainnav .fdw-wave[aria-current="page"]{filter:brightness(1.06) saturate(1.12);font-weight:700}

/* Κύριος τίτλος για screen readers: ορατός μόνο σε αναγνώστες οθόνης. */
.fdw-sr-h1{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── HOVER: ΤΟ ΚΕΙΜΕΝΟ ΓΙΝΟΤΑΝ ΑΟΡΑΤΟ (4/9/2026, feedback Μιχάλη) ──────────────
   Το Bootstrap έχει «a:hover{--bs-link-color-rgb: var(--bs-link-hover-color-rgb)}»
   και η μεταβλητή είναι 10,88,202 = έντονο μπλε. Τα κυματιστά κουμπιά δεν όριζαν
   δικό τους χρώμα στο hover, οπότε το σκούρο κείμενο (#0c3250) γινόταν μπλε πάνω
   στο ΜΠΛΕ κύμα — μετρημένο, όχι εκτίμηση. Κλειδώνεται το κανονικό χρώμα σε
   hover/focus/active και το κουμπί ξεχωρίζει μόνο από τη φωτεινότητα. */
#sp-left .sm-menu .link a,#sp-left .sm-menu .link a:hover,
#sp-left .sm-menu .link a:focus,#sp-left .sm-menu .link a:active,
.fdw-side .fdw-wave,.fdw-side .fdw-wave:hover,
.fdw-side .fdw-wave:focus,.fdw-side .fdw-wave:active{color:#0c3250!important}
.fdw-side .fdw-wave-mag,.fdw-side .fdw-wave-mag:hover,
.fdw-side .fdw-wave-mag:focus,.fdw-side .fdw-wave-mag:active{color:#49004f!important}
.fdw-side .fdw-tile,.fdw-side .fdw-tile:hover,
.fdw-side .fdw-tile:focus,.fdw-side .fdw-tile:active,
.fdw-side .fdw-head{color:#fff!important}
.fdw-nav a span{color:#0b2e4d!important}
/* ⛔ ΤΟ HOVER ΤΟΥ ΠΑΝΩ ΜΕΝΟΥ ΗΤΑΝ ΣΒΗΣΤΟ (διορθώθηκε 5/9/2026)
   Ο ιδιοκτήτης: «μου χάλασες το hover στην πάνω γραμμή».

   Ο κανόνας από πάνω έγραφε `.fdw-nav a span, .fdw-nav a:hover span, ...` με
   ΕΝΑ !important για όλες τις καταστάσεις. Είχε μπει 4/9 για να μη βάφει το
   Bootstrap το κείμενο έντονο μπλε πάνω στο μπλε κύμα — αλλά μαζί έσβησε και τη
   ΝΟΜΙΜΗ απόκριση: το fdw-type.css ορίζει ήδη `.fdw-nav a:hover > span
   {color:var(--fd-nav-ink-hover)}`, και το !important νικάει ΑΝΕΞΑΡΤΗΤΑ από
   ειδικότητα — άρα το σχεδιασμένο χρώμα δεν έφτανε ποτέ.

   ⚠ Το μάθημα: όταν κλειδώνεις χρώμα με !important για να μπλοκάρεις ένα
   framework, κλείδωσε ΜΟΝΟ την κατάσταση που σε ενοχλεί. Βάζοντας μέσα και το
   :hover, σκοτώνεις σιωπηλά κάθε μελλοντικό hover — και δεν βγάζει σφάλμα.

   Έμενε μόνο ένα brightness(1.06) από το fdw-menu.css, δηλαδή πρακτικά αόρατο:
   δύο λήψεις με και χωρίς δείκτη βγήκαν ΤΑΥΤΟΣΗΜΕΣ.

   Η τιμή δεν εφευρίσκεται εδώ — έρχεται από το token του τυπογραφικού
   συστήματος (#16456a). Αντίθεση 7,1:1 πάνω στο γαλάζιο του μενού. */
.fdw-nav a:hover span,.fdw-nav a:focus span,
.fdw-nav a:focus-visible span{color:var(--fd-nav-ink-hover,#16456a)!important}
.fdw-nav a:hover,.fdw-nav a:focus-visible{filter:brightness(1.12) saturate(1.14)}
/* Το κουμπί φαίνεται ότι «απαντάει» χωρίς να αλλάξει χρώμα κειμένου. */
#sp-left .sm-menu .link a:hover,.fdw-side .fdw-wave:hover,
.fdw-side .fdw-wave-mag:hover,.fdw-side .fdw-tile:hover{filter:brightness(1.1) saturate(1.1)}

/* ── ΥΠΟΜΕΝΟΥ ΣΤΟ ΠΑΝΩ ΜΕΝΟΥ (4/9/2026) ───────────────────────────────────────
   Ζητήθηκε: «όταν κάνω hover να βγαίνει το μενού». Το κυματιστό μενού είναι
   γραμμένο στο χέρι και δεν είχε ποτέ υποεπίπεδα — οι κατηγορίες υπήρχαν μόνο
   στην πλαϊνή στήλη, που λείπει από τις μισές σελίδες.
   Ανοίγει με hover ΚΑΙ με πληκτρολόγιο (focus-within) για προσβασιμότητα. */
.fdw-nav,.fdw-nav ul,.fdw-nav li{overflow:visible}
.fdw-nav li{position:relative}
.fdw-drop{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  min-width:240px;max-width:310px;z-index:60;
  background:#fff;border:1px solid #cfe3f5;border-radius:12px;
  box-shadow:0 14px 34px rgba(10,35,80,.22);padding:8px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s,transform .14s;
}
.fdw-nav li:hover > .fdw-drop,
.fdw-nav li:focus-within > .fdw-drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* γέφυρα: χωρίς αυτήν το πάνελ κλείνει στο κενό ανάμεσα κουμπί και λίστα */
.fdw-drop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.fdw-drop ul{list-style:none;margin:0;padding:0;display:block}
.fdw-drop li{display:block;margin:0}
/* ⚠ ΚΡΙΣΙΜΟ: τα στοιχεία του υπομενού είναι <a> ΜΕΣΑ στο .fdw-nav, οπότε κληρονομούν
   ΟΛΟ το κυματιστό κουμπί — «.fdw-nav a» δίνει background-image με το κύμα,
   aspect-ratio:158/72 και container-type:inline-size. Χωρίς αυτό το μηδένισμα κάθε
   γραμμή έβγαινε 115px ύψος με κύμα από κάτω: «ογκώδες και άκομψο». Μετρημένο. */
.fdw-drop ul{display:block!important;flex:none!important;gap:0!important}
.fdw-drop li{display:block!important;width:auto!important;flex:none!important;
  margin:0!important;padding:0!important;background:none!important;border:0!important}
.fdw-drop a{
  display:block!important;text-align:left!important;
  background:none!important;background-image:none!important;
  aspect-ratio:auto!important;height:auto!important;min-height:0!important;
  container-type:normal!important;overflow:visible!important;
  box-shadow:none!important;filter:none!important;text-shadow:none!important;
  padding:7px 11px!important;border-radius:7px!important;border:0!important;
  text-decoration:none;font-family:Alegreya,Georgia,serif;
  font-size:15px!important;line-height:1.35!important;font-weight:400!important;
  color:#10357f!important;white-space:normal!important;
}
.fdw-drop a::before,.fdw-drop a::after{display:none!important;content:none!important}
.fdw-drop a:hover,.fdw-drop a:focus{background:#eaf4fd!important}
/* Λίστες με πολλά θέματα σε ΔΥΟ στήλες: 12 στοιχεία σε μία στήλη έβγαζαν πάνελ 490px
   («ογκώδες»). Δίστηλο → ~250px, χωράει σε μια ματιά χωρίς σκρολάρισμα. */
.fdw-drop.is-wide{min-width:470px;max-width:530px}
.fdw-drop.is-wide ul{column-count:2;column-gap:10px}
.fdw-drop.is-wide li{break-inside:avoid;-webkit-column-break-inside:avoid}
@media (max-width:1150px){ .fdw-drop.is-wide{min-width:380px;max-width:420px} }
.fdw-drop a:hover,.fdw-drop a:focus{background:#eaf4fd;color:#0b2a63!important}
.fdw-drop a[aria-current="page"]{background:#dceeff;font-weight:700}
@media (max-width:991px){ .fdw-drop{display:none!important} }

/* -- ΤΟ ΑΣΠΡΟ ΦΟΝΤΟ ΑΚΟΛΟΥΘΕΙ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ (4/9/2026) --------------------
   Ο ιδιοκτήτης: «το άσπρο πίσω είναι μισό μισό, το χάλασες». Σωστά.

   Το άσπρο ΔΕΝ ήταν ποτέ χρώμα - ήταν ΖΩΓΡΑΦΙΣΜΕΝΟ μέσα σε εικόνα:
   /images/back09.jpg, 2000x20, repeat-y, background-position 50% 0. Δηλαδή μια
   οριζόντια λωρίδα με ΣΤΑΘΕΡΟ άσπρο κέντρο 1138px (x 430..1567) και #3c80bd
   εκατέρωθεν - φτιαγμένη ακριβώς για το κουτί των 1140 που υπήρχε ως χθες.
   Μετρημένο: η μετάβαση είναι ΣΚΛΗΡΗ ακμή, δύο μόνο χρώματα, καμία κάθετη
   διακύμανση - γι' αυτό ένα linear-gradient την αναπαράγει ΑΚΡΙΒΩΣ (και
   μάλιστα καθαρότερα, χωρίς τα ~6px παράσιτα JPEG της ακμής).

   Μόλις φάρδυνε η σελίδα, οι δύο πλαϊνές στήλες βρέθηκαν 133px ΕΞΩ από το
   άσπρο η καθεμία (μετρημένο στα 1440: άσπρο 144..1282, #sp-left 11..320,
   #sp-right 1105..1414) - ακριβώς το «μισό μισό».

   1η διόρθωση κράτησε την αρχική σχέση «άσπρο = κουτί περιεχομένου, μπλε απ'
   έξω» με ντεγκραντέ και 26px μπλε περιθώριο. Ο ιδιοκτήτης: «έχει ακόμα μπλε».
   Δίκιο - με το περιεχόμενο σε πλήρες πλάτος το μπλε πλαίσιο δεν έχει πού να
   ζήσει· 26px δεν διαβάζονται ως πλαίσιο, διαβάζονται ως λάθος. Οπότε ΣΚΕΤΟ
   ΛΕΥΚΟ, από άκρη σε άκρη. Το μπλε ζει πια στο πανό και στο υποσέλιδο.

   Και οι 5 ενότητες που χρησιμοποιούν το back09 μπαίνουν ΜΑΖΙ: αν διόρθωνα
   μόνο το #sp-main-body, οι μπάρες γύρω του θα έμεναν με το παλιό στενό άσπρο
   και η ασυμφωνία θα ήταν χειρότερη από πριν.

   Κάτω από 1200px δεν χρειάζεται: εκεί το container δεν έχει φαρδύνει, οπότε
   το 1138 του back09 καλύπτει ήδη ό,τι πρέπει.

   ΓΙΑΤΙ ΓΕΝΙΚΟΣ ΕΠΙΛΟΓΕΑΣ ΚΑΙ ΟΧΙ ΛΙΣΤΑ: πρώτη προσπάθεια απαρίθμησε τις
   ενότητες που είδα στην αρχική (2/4/7/8/main-body) και ΞΕΧΑΣΕ το #sp-ploigisi
   - τη μπάρα διαδρομής, που υπάρχει σε 10 από τις 11 σελίδες και έμεινε με το
   στενό άσπρο. Τα φόντα τα βάζει το Helix με inline <style> ανά ενότητα, οπότε
   η λίστα αλλάζει ανά σελίδα και μια απαρίθμηση θα ξανάσπαγε. Εξαιρούνται μόνο
   το #sp-slider (έχει το πανό) και ό,τι είναι footer/bottom (συμπαγές χρώμα).
   Μπαίνουν και οι διαφανείς ενότητες (π.χ. #sp-section-3): ήταν άσπρες ως τις
   άκρες ενώ οι γειτονικές τους θα είχαν περιθώριο - ακριβώς η ασυμφωνία που
   παραπονέθηκε ο ιδιοκτήτης. */
@media (min-width:1200px){
  .body-innerwrapper > section[id^="sp-"]:not([id*="footer"]):not([id*="bottom"]),
  #sp-slider,#sp-main-body,#sp-ploigisi,#sp-section-2,#sp-section-4,#sp-section-7,#sp-section-8{
    /* ΜΠΛΕ ΣΕΛΙΔΑ, ΛΕΥΚΟ ΠΕΡΙΕΧΟΜΕΝΟ (3η προσπάθεια, 4/9/2026).
       Ο ιδιοκτήτης: «δεν μ' αρέσει τόσο άσπρο· το μπλε που ήταν πριν έδενε πιο
       ωραία· βάλε ένα μπλε ομοιόμορφο και να μη μείνουν όλα αυτά τα κενά.»

       Είχε δίκιο, και το αίτιο είναι ΣΧΕΔΙΑΣΤΙΚΟ: η αρχική σχέση του site ήταν
       ΜΠΛΕ = Η ΣΕΛΙΔΑ, ΛΕΥΚΟ = ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΠΑΝΩ ΤΗΣ. Το back09.jpg ακριβώς
       αυτό έκανε (#3c80bd εκατέρωθεν, λευκό κέντρο 1138). Όταν έκανα τα πάντα
       λευκά, το περιεχόμενο έπαψε να έχει σχήμα και κάθε περιοχή χωρίς κείμενο
       διαβαζόταν ως τρύπα - εξού «όλα αυτά τα κενά».

       Ίδια σχέση, νέο πλάτος: λευκό όσο ΑΚΡΙΒΩΣ το μπλοκ των τριών στηλών
       (1400px κεντραρισμένο), μπλε παντού αλλού. Το #3c80bd είναι
       δειγματοληπτημένο από το ίδιο το back09.jpg, όχι διαλεγμένο με το μάτι.
       Κάτω από 1400px οι υπολογισμοί βγαίνουν αρνητικοί και το λευκό πιάνει όλο
       το πλάτος μόνο του - καμία ξεχωριστή μεταχείριση για μικρές οθόνες. */
    /* Οι δύο επιπλέον στάσεις #336da1 είναι ΣΚΙΑ, όχι διακόσμηση: χωρίς αυτές το
       λευκό κόβεται πάνω στο μπλε με μαχαίρι και διαβάζεται ως τρύπα. Με 22px
       βάθυνσης εκατέρωθεν, το περιεχόμενο «κάθεται» πάνω στη σελίδα - αυτό είναι
       που ζήτησε ως «φυσικό και με ροή». */
    /* Το μπλε/λευκό ντεγκραντέ έφυγε: με το περιεχόμενο σε όλο το πλάτος δεν
       υπάρχει «έξω από το μπλοκ» για να βαφτεί. Το μπλε ζει πια στο πανό και στο
       υποσέλιδο. (Αν ξαναχρειαστεί πλαίσιο, είναι μία γραμμή - δες το ιστορικό
       αυτού του αρχείου.) */
    background-image:none!important;
    background-color:#fff!important;
  }
  /* Η ΜΠΑΡΑ ΜΕΝΟΥ ΠΙΑΝΕΙ ΚΙ ΑΥΤΗ ΟΛΟ ΤΟ ΠΛΑΤΟΣ. Το .fdw-nav είναι διαφανές - το
     χρώμα το δίνουν τα ίδια τα κυματιστά πλακίδια. Αν έμεναν μέσα στο container,
     θα σταματούσαν 26px πριν την άκρη και θα φαίνονταν «κολλημένα» κάτω από ένα
     πανό που πιάνει όλο το πλάτος. Το #sp-section-2 έχει ΜΟΝΟ αυτό το module. */
  #sp-section-2 > .container{padding-left:0!important;padding-right:0!important;overflow:hidden}
  /* ⚠ ΣΕ ΟΛΟ ΤΟ ΠΛΑΤΟΣ ΟΙ 7 ΚΑΡΤΕΛΕΣ ΘΑ ΕΒΓΑΙΝΑΝ 272px, ΚΑΙ ΤΟ aspect-ratio
     158/72 ΘΑ ΤΙΣ ΕΚΑΝΕ 124px ΨΗΛΕΣ — μπάρα-τούβλο κάτω από το πανό. Κόβονται
     στα 214px (~98px ύψος, σωστός λόγος 2,19, καμία παραμόρφωση) και
     κεντράρονται· η μπάρα γεμίζει με το ΙΔΙΟ ντεγκραντέ που έχουν τα πλακίδια,
     οπότε διαβάζεται ως ενιαία ζώνη από άκρη σε άκρη. */
  .fdw-nav{background:linear-gradient(180deg,#90bae0 0,#a9d3f7 22%,#c1e1ff 44%,#d9eeff 64%,#f7fbfe 100%)}
  .fdw-nav ul{justify-content:center}
  .fdw-nav li{flex:1 1 auto!important;max-width:214px}
  #sp-section-2 .row{margin-left:0!important;margin-right:0!important}
  #sp-section-2 [class*="col-"]{padding-left:0!important;padding-right:0!important}
}

/* -- ΟΞΥΤΕΡΟ ΠΑΝΟ (4/9/2026) -----------------------------------------------
   Ο ιδιοκτήτης: «ανέβασε και άλλο την ανάλυση της εικόνας».

   ΔΕΝ ΥΠΑΡΧΕΙ ΜΕΓΑΛΥΤΕΡΗ ΠΗΓΗ - σαρώθηκαν 6.307 αρχεία στο /images και το μόνο
   σε σχήμα πανό είναι το Slider01.jpg 1140x335. Το header-2x.jpg (2280x670)
   ΔΕΝ βγήκε από αυτό: μετρημένη υψίσυχνη ενέργεια στη ζώνη της εικονογραφίας
   4,89 έναντι 3,46 που δίνει LANCZOS από το Slider01 - ήρθε από καλύτερη πηγή.
   Άρα δεν κερδίζω τίποτα ξαναχτίζοντάς το· κερδίζω από το πώς αποδίδεται.

   Τρία πραγματικά κέρδη, μετρημένα:
     1. Όξυνση (unsharp r=1,0 p=85 t=3): HF 4,89 -> 6,47 (+32 τοις εκατό), με
        μόλις 0,14 τοις εκατό των εικονοστοιχείων σε κορεσμό - χωρίς φωτοστέφανα.
     2. Χρωμοδειγματοληψία 4:4:4 αντί 4:2:0. Μετράει εδώ: η εικονογραφία έχει
        κορεσμένα κόκκινα και χρυσά, που το 4:2:0 τα μουτζουρώνει.
     3. WebP: 142 KB έναντι 235 KB του παλιού JPEG - ΚΑΙ πιο κοφτερό ΚΑΙ
        ελαφρύτερο. Το image-set() δίνει JPEG σε ό,τι δεν το καταλαβαίνει.

   Νέα ονόματα αρχείων επίτηδες: το max-age είναι 10 ημέρες και μια αντικατάσταση
   στο ίδιο URL θα έμενε αόρατη (μάθημα από το header-wide.jpg νωρίτερα σήμερα).

   Αυτός ο κανόνας αφορά ΚΑΙ το κινητό, όπου ζωγραφίζει το ίδιο το .fdw-hdr.
   Στα >=1200 το επόμενο μπλοκ το μηδενίζει και ζωγραφίζει το ::before. */
.fdw-hdr{
  background-image:url("/images/stories/Banner/header-2x-s2.jpg")!important;
  background-image:image-set(url("/images/stories/Banner/header-2x-s2.webp") type("image/webp"),
                             url("/images/stories/Banner/header-2x-s2.jpg")  type("image/jpeg"))!important;
}

/* -- ΠΛΗΡΟΥΣ ΠΛΑΤΟΥΣ ΠΑΝΟ (4/9/2026) ----------------------------------------
   Η 1η προσπάθεια ήταν ντεγκραντέ πίσω από το πανό των 1140. Φαινόταν η ραφή
   («κομμένο ραμμένο») - και ο λόγος ΔΕΝ ήταν το ντεγκραντέ: το ίδιο το .fdw-hdr
   έχει background-color:#1a4270, δηλαδή ένα ΣΥΜΠΑΓΕΣ μπλε ορθογώνιο 1140px
   καρφωμένο πάνω στη φωτογραφία. Ό,τι κι αν έμπαινε από πίσω, το ορθογώνιο το
   έκοβε. Γι' αυτό εδώ γίνεται διάφανο - υπάρχει ΜΙΑ εικόνα, όχι δύο.

   header-wide.jpg 6600x670 = το πρωτότυπο 2280 στη μέση, +2120 αριστερά και
   +2200 δεξιά, φτιαγμένα από τις ΔΙΚΕΣ ΤΟΥ ακραίες στήλες (ραφές 3,1/255 και
   1,0/255 - αόρατες).

   ΠΡΟΣΟΧΗ 1 - Η ΕΥΘΥΓΡΑΜΜΙΣΗ ΕΙΝΑΙ ΤΟ ΟΛΟ ΝΟΗΜΑ. Το .fdw-hdr μένει 1140x335 με
   τα παιδιά του (λογότυπο, τίτλος) σε cqi μονάδες - αν το φάρδαινα, θα
   σκορπούσαν και θα μεγάλωναν. Αντ' αυτού η εικόνα τοποθετείται ώστε το
   ΠΡΩΤΟΤΥΠΟ κομμάτι της να πέφτει ΑΚΡΙΒΩΣ πάνω στο κουτί των 1140:
     κλίμακα 0,5 (6600 -> 3300 αποδιδόμενα px, 670 -> 335)
     κέντρο εικόνας          = 1650
     κέντρο πρωτοτύπου       = (1060 + 2200) / 2 = 1630
     άρα margin-left = -(1650 - 20) = -1630px από το 50% της ενότητας

   ΠΡΟΣΟΧΗ 2 - ΓΙΑΤΙ ΟΧΙ background-position. Δοκιμάστηκε
   «right calc(50% - 1670px)» και η εικόνα έφυγε τέρμα δεξιά: στο
   background-position οι εκατοστιαίες τιμές ΔΕΝ μετρούν πάνω στο πλάτος του
   κουτιού αλλά στο (πλάτος κουτιού - πλάτος εικόνας), που εδώ είναι ΑΡΝΗΤΙΚΟ
   (1425 - 3300). Σε απόλυτα τοποθετημένο στρώμα το left/margin-left μετρούν
   κανονικά, γι' αυτό η εικόνα μπαίνει σε ::before.

   Το ντεγκραντέ από κάτω είναι δειγματοληψία της ΙΔΙΑΣ στήλης επέκτασης, οπότε
   σε οθόνες πάνω από ~3260px συνεχίζει χωρίς να φαίνεται πού τελείωσε η εικόνα.

   Κάτω από 1200px δεν ισχύει τίποτα: το .fdw-hdr δεν είναι 1140, ο υπολογισμός
   δεν στέκει, και κρατάει το δικό του φόντο όπως πάντα. */
@media (min-width:1200px){
  /* Το ::before μετακινήθηκε από την ΕΝΟΤΗΤΑ στο ΔΟΧΕΙΟ: έτσι η εικόνα κόβεται
     στα 1400 του μπλοκ αντί να απλώνεται σε όλη την οθόνη, και το πανό γίνεται
     κομμάτι της ίδιας στήλης με το μενού και το περιεχόμενο. Η αριθμητική δεν
     αλλάζει: το -1630px εξαρτάται μόνο από το ΚΕΝΤΡΟ, και το .fdw-hdr μένει
     1140 κεντραρισμένο μέσα στο 1400 (130..1270), εκεί ακριβώς που πέφτει και
     το πρωτότυπο κομμάτι της εικόνας. */
  #sp-slider > .container::before{content:"";position:absolute;z-index:0;top:0;bottom:0;
    left:50%;margin-left:-1630px;width:3300px;
    background-repeat:no-repeat;background-position:0 0;background-size:3300px 100%;
    /* 5/9/2026: τα δύο εξώφυλλα μπήκαν ΜΕΣΑ στην εικόνα (header-wide4).
       Το header-wide3 μένει στον διακομιστή — αλλαγή του ονόματος εδώ
       επαναφέρει το πανό όπως ήταν, χωρίς τίποτε άλλο. */
    background-image:url("/images/stories/Banner/header-wide4.jpg");
    background-image:image-set(url("/images/stories/Banner/header-wide4.webp") type("image/webp"),
                               url("/images/stories/Banner/header-wide4.jpg")  type("image/jpeg"))}
  /* Χωρίς padding ΕΔΩ: στα 1200px το 26+26 άφηνε 1133px και το .fdw-hdr έβγαινε
     1133 αντί 1140 - ο υπολογισμός του ::before (κλίμακα 0,5) θα ξέφευγε. */
  #sp-slider > .container{position:relative;z-index:1;overflow:hidden;
    padding-left:0!important;padding-right:0!important}
  .fdw-hdr{background-image:none!important;background-color:transparent!important}
}

/* -- ΟΙ ΑΝΑΛΟΓΙΕΣ ΜΕΤΑ ΤΟ ΦΑΡΔΕΜΑ (4/9/2026) --------------------------------
   Παράπλευρη ζημιά του max-width:none, που δεν φαινόταν στα 1440 αλλά χτυπάει
   στις μεγάλες οθόνες. Και τα δύο στοιχεία έχουν ΚΛΕΙΔΩΜΕΝΗ ΑΝΑΛΟΓΙΑ, οπότε
   κάθε επιπλέον pixel πλάτους γίνεται ΥΨΟΣ:

     .fdw-nav a       aspect-ratio 158/72  -> στα 1920 η καρτέλα βγήκε 273x124
                      (σχεδιασμένη 158x72), δηλαδή μπάρα μενού 124px ψηλή.
     .fdw-side .fdw-wave  aspect-ratio 200/55 -> 388x107 (σχεδιασμένο ~227x62).

   Χειρότερα, το κείμενο ΔΕΝ ακολουθεί: τα clamp(...,9.8cqi,17px) και
   clamp(...,6.6cqi,15px) κλειδώνουν στο πλαφόν τους, οπότε η ετικέτα πέφτει από
   9,8% σε 6,5% του πλάτους της καρτέλας - γίγαντας κύμα με μικρή λέξη.

   ΔΥΟ ΔΙΑΦΟΡΕΤΙΚΕΣ ΛΥΣΕΙΣ, επίτηδες:

   1. ΠΛΑΪΝΕΣ ΣΤΗΛΕΣ: επαναφορά στο σχεδιασμένο ΠΛΑΤΟΣ. Το 22% υπολογιζόταν πάνω
      σε .row 1170px και έδινε 257px· τώρα δίνει 418px. Το κλειδώνω στα 257px -
      καμία παραμόρφωση, και όλο το επιπλέον πλάτος πάει στο ΠΕΡΙΕΧΟΜΕΝΟ, εκεί
      που χρειάζεται. Κάτω από ~1215px το 22% βγάζει ήδη <=257, οπότε δεν αλλάζει
      τίποτα εκεί.

   2. ΜΠΑΡΑ ΜΕΝΟΥ: ΔΕΝ την στενεύω - ο ιδιοκτήτης τη ζήτησε ρητά από άκρη σε
      άκρη. Κλειδώνω το ΥΨΟΣ αντί για το πλάτος. Επιτρέπεται εδώ και μόνο εδώ,
      γιατί το κύμα είναι inline SVG με preserveAspectRatio='none': το τέντωμα
      κατά πλάτος είναι ΣΧΕΔΙΑΣΜΕΝΗ συμπεριφορά του ίδιου του αρχείου, όχι
      παραμόρφωση bitmap. Το clamp κρατάει το σχεδιασμένο 73px ως τα ~1745px και
      μετά αφήνει λίγη ανάσα ως 88px, αντί για τα 124px που έβγαινε. */
@media (min-width:1200px){
  #sp-main-body .row > #sp-left.col-lg-3,
  #sp-main-body .row > #sp-right.col-lg-3{
    flex:0 0 310px!important;width:310px!important;max-width:310px!important}
  /* ⛔ ΕΙΧΑ ΚΟΨΕΙ ΤΟ ΥΨΟΣ ΚΑΙ ΠΛΑΚΩΣΑ ΤΟ ΚΥΜΑ. Ο ιδιοκτήτης: «δες την ανάλυση
     στα κύματα, έχει χαλάσει». Δεν ήταν ανάλυση - ήταν ΠΑΡΑΜΟΡΦΩΣΗ: το SVG έχει
     preserveAspectRatio='none', οπότε με σταθερό ύψος η καρτέλα βγήκε 270x81,
     λόγος 3,35 αντί για τον σχεδιασμένο 2,19. Τώρα που η μπάρα δένεται στα 1400,
     οι 7 καρτέλες βγαίνουν ~199px και το aspect-ratio δίνει ~91px ύψος από μόνο
     του: σωστές αναλογίες ΧΩΡΙΣ κόψιμο. */
}

/* -- ΕΝΑ ΜΠΛΟΚ, ΟΧΙ ΤΡΙΑ ΚΟΜΜΑΤΙΑ (4/9/2026, 2η προσπάθεια) ----------------
   1η προσπάθεια: περιόρισα ΜΟΝΟ τη μεσαία στήλη στα 860px. Το κείμενο έγινε
   αναγνώσιμο (144 -> 92 χαρακτήρες) αλλά η σύνθεση διαλύθηκε, και ο ιδιοκτήτης
   το είπε αμέσως: «είναι χάλια».

   ΓΙΑΤΙ: οι πλαϊνές στήλες έμειναν καρφωμένες στις ΑΚΡΕΣ της οθόνης (11 και
   1894) ενώ το περιεχόμενο μαζεύτηκε στο κέντρο (523..1383). Άνοιξαν δύο κενά
   ~500px ΜΕΣΑ στη σελίδα. Το κυματιστό μενού έμοιαζε ξεχασμένο μόνο του στην
   άκρη. Κενό ΑΝΑΜΕΣΑ στα στοιχεία διαβάζεται ως λάθος· κενό ΓΥΡΩ τους ως
   περιθώριο.

   ΣΩΣΤΟ: κρατάω τις ΤΡΕΙΣ ΣΤΗΛΕΣ ΜΑΖΙ σαν ένα μπλοκ και κεντράρω το μπλοκ.
   Το container πάει στα 1400px:
     αριστερή 257 + περιεχόμενο ~834 + δεξιά 257 = το μπλοκ
     ~834px κειμένου = ~90 χαρακτήρες, δηλαδή ο σωστός άξονας ανάγνωσης
     ΒΓΑΙΝΕΙ ΜΟΝΟΣ ΤΟΥ - δεν χρειάζεται να τον επιβάλω πουθενά.
   Το κενό πάει έξω από το μπλοκ, όπου ανήκει.

   Το πανό και η μπάρα μενού ΜΕΝΟΥΝ από άκρη σε άκρη: είναι ζώνες, όχι
   περιεχόμενο. Πλήρους πλάτους κεφαλίδα πάνω από κεντραρισμένο περιεχόμενο
   είναι σκόπιμη σύνθεση, όχι ασυμφωνία. */
/* -- BOX NOW: ο χάρτης θυρίδων στο ταμείο (4/9/2026) ------------------------
   Διακριτικό, στο ύφος του site (σιελ/λευκό). Ο χάρτης ανοίγει μόνο με πάτημα
   ώστε να μη φορτώνει εξωτερικό script σε κάθε επίσκεψη στο ταμείο. */
.fdw-bn{margin:14px 0 4px;padding:12px 14px;border:1px solid #cfe3f5;border-radius:10px;
  background:#f4f9fe}
.fdw-bn[hidden]{display:none!important}
.fdw-bn-btn{display:inline-block;border:0;border-radius:8px;cursor:pointer;
  padding:9px 16px;font-size:15px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,#2f7fc4,#1d5f9b)}
.fdw-bn-btn:hover,.fdw-bn-btn:focus-visible{filter:brightness(1.07)}
.fdw-bn-pick{margin:10px 0 0;font-size:14.5px;line-height:1.4;color:#0c3250}
.fdw-bn-map{margin-top:10px}
.fdw-bn-map:empty{display:none}
@media (max-width:600px){.fdw-bn-btn{width:100%;min-height:44px}}

/* -- ΓΕΜΙΣΜΑ ΤΩΝ ΔΥΟ ΠΑΝΟ ΤΗΣ ΑΡΧΙΚΗΣ (4/9/2026) ---------------------------
   Ο ιδιοκτήτης: «πλάτυνέ τα να είναι πιο φίσκα, ΑΛΛΑ ΜΕ ΩΡΑΙΑ ΜΟΡΦΗ, όχι απλά
   να τα τραβήξεις».

   Μετρημένο: μέσα σε στήλη 864px η προσφορά έπιανε 550px = **64%** και η
   αναζήτηση 65%. Τα υπόλοιπα modules ήταν ήδη στο 97%, το καρουζέλ γέμιζε.
   Δηλαδή έλειπαν ΔΥΟ στοιχεία, όχι όλα.

   ⚠ ΓΙΑΤΙ ΔΕΝ ΑΡΚΕΙ ΤΟ max-width. Και τα δύο πανό έχουν
   `container-type:inline-size` και ΟΛΗ τους η τυπογραφία είναι
   `clamp(min, Ncqi, max)`. Στα 550px κάθε μία **έχει ήδη πιάσει το max της**
   (π.χ. .fdw-head: 4,4cqi στα 550 = 24px, κομμένο στα 17). Αν πλάταινα μόνο το
   κουτί, τα γράμματα έμεναν ίδια και θα έβγαινε ακριβώς το «τραβηγμένο» που δεν
   θέλει: πλατύ πλαίσιο με μικρά γράμματα μέσα.

   Άρα ανεβαίνουν ΜΑΖΙ τα ταβάνια (~x1,35, όχι x1,53 όσο το πλάτος — σε
   μεγαλύτερο πλαίσιο η τυπογραφία θέλει λίγο χαλαρότερη αναλογία) και το
   padding. Τα εξώφυλλα δεν χρειάζονται τίποτα: είναι σε ποσοστά (33% το τρίπτυχο,
   38% καθένα) και μεγαλώνουν μόνα τους, 78px -> ~107px.

   Ζει ΕΔΩ και όχι στο fdw-promo.css επειδή το <link> του module γράφει `?v=4`
   και δεν μπορώ να το αλλάξω χωρίς πρόσβαση διαχείρισης — οπότε μια αλλαγή εκεί
   θα έμενε αόρατη για 10 μέρες σε όποιον το έχει ήδη κρατήσει. */
@media (min-width:1200px){
  /* 5/9/2026: με τη στήλη σε πλήρες πλάτος τα δύο πανό γεμίζουν ΟΛΟΚΛΗΡΗ τη
     στήλη — αλλιώς άφηναν ~250px λευκό εκατέρωθεν, που είναι ακριβώς το «κενό»
     που ενοχλεί. Τα ταβάνια της τυπογραφίας ανεβαίνουν ΞΑΝΑ (~x1,2) για τον ίδιο
     λόγο όπως πριν: αλλιώς μεγαλώνει μόνο το πλαίσιο και βγαίνει τραβηγμένο.
     Τα εξώφυλλα ακολουθούν μόνα τους (ποσοστά). */
  .fdw-promo,.fdw-subs{max-width:none!important}
  .fdw-promo a{padding:18px 30px!important;gap:3%!important}
  .fdw-promo .fdw-kick {font-size:clamp(9px,3.1cqi,17px)!important}
  .fdw-promo .fdw-head {font-size:clamp(12px,4.4cqi,28px)!important}
  .fdw-promo .fdw-old  {font-size:clamp(10px,3.4cqi,21px)!important}
  .fdw-promo .fdw-new  {font-size:clamp(19px,7.6cqi,48px)!important}
  .fdw-promo .fdw-note {font-size:clamp(9px,3.1cqi,17px)!important}
  .fdw-promo .fdw-cta  {font-size:clamp(9.5px,3.4cqi,20px)!important;padding:9px 22px!important}
  .fdw-subs .fdw-subs-in{padding:20px 30px 22px!important}
  .fdw-subs .fdw-kick  {font-size:clamp(9px,3.1cqi,17px)!important}
  .fdw-subs .fdw-head  {font-size:clamp(13px,4.4cqi,30px)!important;margin-bottom:14px!important}
  .fdw-subs .fdw-btns  {gap:14px!important}
  .fdw-subs .fdw-btn   {font-size:clamp(10px,3.5cqi,20px)!important;padding:11px 22px!important}
  .fdw-subs .fdw-abroad{font-size:clamp(9.5px,3.2cqi,17px)!important}
}

/* -- ΕΝΤΟΝΕΣ ΕΠΙΚΕΦΑΛΙΔΕΣ (4/9/2026) ----------------------------------------
   «Κάνε bold τις επικεφαλίδες». Μέτρησα ποιες ΔΕΝ ήταν ήδη:
     H1 / H2 / H3 περιεχομένου .......... 800  ήδη έντονες
     πλαϊνές στήλες (τίτλος & στοιχεία) . 700  ήδη έντονες
     ΜΕΝΟΥ ΠΑΝΩ ......................... 500  ← όχι
     ΤΙΤΛΟΙ ΒΙΒΛΙΩΝ ΣΤΟ ΚΑΡΟΥΖΕΛ ........ 400  ← όχι
   Άρα δεν χρειάζεται καθολικό «bold παντού» - λείπει από δύο σημεία, και μόνο
   αυτά αλλάζουν. Ένα σαρωτικό font-weight θα χάλαγε την ιεραρχία που ήδη
   δουλεύει. */
.fdw-nav a > span{font-weight:700}
#sp-component .slide-desc,#sp-component .slide-desc a,
#sp-component .slide-desc-in,#sp-component .slide-desc-in a,
.djslider .slide-desc,.djslider .slide-desc a{font-weight:700}

/* -- ΜΕΤΡΟ ΑΝΑΓΝΩΣΗΣ ΣΕ ΠΛΗΡΕΣ ΠΛΑΤΟΣ (5/9/2026) ---------------------------
   Με τη στήλη περιεχομένου στα ~1350px το κείμενο ξαναπάει στους 144 χαρακτήρες
   ανά γραμμή. Μπαίνει όριο ΜΟΝΟ στο τρεχούμενο κείμενο (παράγραφοι, λίστες) -
   όχι στη στήλη, όχι στις επικεφαλίδες, όχι στα πανό.

   ΓΙΑΤΙ ΤΩΡΑ ΔΟΥΛΕΥΕΙ ΕΝΩ ΠΡΙΝ ΟΧΙ: την πρώτη φορά είχα στενέψει ΟΛΗ τη στήλη
   ενώ οι πλαϊνές έμεναν στις άκρες, κι έμεναν δύο ΜΠΛΕ κενά ~500px στη μέση της
   σελίδας. Τώρα ό,τι περισσεύει δίπλα στο κείμενο είναι ΛΕΥΚΟ πάνω σε λευκό -
   δηλαδή αόρατο, απλώς περιθώριο. Το κενό δεν ενοχλεί· το κενό ΠΟΥ ΦΑΙΝΕΤΑΙ
   ενοχλεί. */
@media (min-width:1200px){
  #sp-component p,#sp-component ul,#sp-component ol,#sp-component blockquote,
  #sp-component .article-intro,#sp-component dl{max-width:860px}
}

/* -- ⛔ ΤΟ ΚΕΝΤΡΑΡΙΣΜΑ ΤΟΥ ΚΕΙΜΕΝΟΥ ΕΣΠΑΓΕ ΤΟ ΚΑΡΟΥΖΕΛ (5/9/2026) ------------
   Ο ιδιοκτήτης: «φτιάξε το καρουζέλ κολλάει» — έβλεπε 2 βιβλία και μετά λευκό.

   ΤΟ ΑΙΤΙΟ ΗΤΑΝ Ο ΚΑΝΟΝΑΣ ΑΚΡΙΒΩΣ ΑΠΟ ΠΑΝΩ. Η λωρίδα του DJ Slider είναι ένα
   <ul> με **inline** width:3588px (23 διαφάνειες x 155px), και το καρουζέλ το
   είχα μεταφέρει μέσα στο #sp-component. Άρα το `#sp-component ul` το έπιανε:

       max-width:860px  ΝΙΚΑΕΙ  το inline width:3588px

   Το <ul> συμπιεζόταν στα 860, οι 23 διαφάνειες ΑΝΑΔΙΠΛΩΝΟΝΤΑΝ σε 5 σειρές των
   5, και το .djslider-loader (overflow:hidden, ύψος 338px) έκοβε τις 4 από τις
   5 σειρές. Το slider συνέχιζε να κυλάει σωστά τη ΔΙΚΗ του αριθμητική (left:
   -1705 -> -1860 -> -2015, βήμα 155) πάνω σε λάθος διάταξη — γι' αυτό «κολλούσε»
   αντί να σταματήσει: κύλαγε σε σειρές που δεν φαίνονταν.

   Μετρημένο πριν/μετά στα 1920: πλάτος λωρίδας 860 -> 3588, ορατά βιβλία 0 -> 9.

   ⚠ ΤΟ ΜΑΘΗΜΑ: `max-width` σε γενικό επιλογέα τύπου (`#sp-component ul`) πατάει
   inline πλάτη που τα υπολογίζει JavaScript τρίτου. Όταν μεταφέρεις module μέσα
   σε περιοχή με τυπογραφικούς κανόνες, εξαίρεσέ το ΡΗΤΑ. Δεν χρειάζεται
   !important — αρκεί η ειδικότητα (id+class+type > id+type). */
#sp-component .djslider-loader ul,
#sp-component .djslider ul{max-width:none}

/* -- ΚΟΦΤΕΡΑ ΒΕΛΑΚΙΑ ΚΑΡΟΥΖΕΛ (5/9/2026) -----------------------------------
   Ο ιδιοκτήτης: «φτιάξε τα κομμάτια να μην πιξελιάζουν».

   ⚠ ΔΕΝ ΠΙΞΕΛΙΑΖΑΝ ΤΑ ΒΙΒΛΙΑ - πιξελίαζαν τα ΧΕΙΡΙΣΤΗΡΙΑ. Μετρημένο: τα
   εξώφυλλα έρχονται 400x672 και δείχνονται 145x266, δηλαδή 2,76x - άφθονη
   ανάλυση. Τα prev.png / next.png / pause.png όμως είναι **35px φυσικά και
   δείχνονται 35px**: σε οθόνη Retina (dpr 2) βλέπεις τη μισή ανάλυση.

   ⚠ ΓΙ' ΑΥΤΟ ΔΕΝ ΤΟ ΕΒΛΕΠΑ: ο δικός μου πίνακας τρέχει σε **dpr 1**, όπου
   35px φυσικά για 35px εμφάνισης είναι ακριβώς σωστά. Ο έλεγχος ανάλυσης
   πρέπει ΠΑΝΤΑ να γίνεται με κριτήριο dpr 2, όχι με το dpr του εργαλείου.

   Λύση: το `content` σε <img> αντικαθιστά την πηγή του χωρίς να πειράξει το
   στοιχείο - τα event handlers του slider μένουν ανέπαφα. Τα νέα είναι SVG,
   άρα κοφτερά σε κάθε πυκνότητα και μηδέν επιπλέον αίτημα δικτύου. */
.djslider .prev-button {content:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2036%2036'%3E%3Ccircle%20cx='18'%20cy='18'%20r='16.5'%20fill='rgba(20,45,75,.55)'/%3E%3Cpath%20d='M21%2010%20L13%2018%20L21%2026'%20stroke='%23ffffff'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'%20fill='none'/%3E%3C/svg%3E")}
.djslider .next-button {content:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2036%2036'%3E%3Ccircle%20cx='18'%20cy='18'%20r='16.5'%20fill='rgba(20,45,75,.55)'/%3E%3Cpath%20d='M15%2010%20L23%2018%20L15%2026'%20stroke='%23ffffff'%20stroke-width='3.2'%20stroke-linecap='round'%20stroke-linejoin='round'%20fill='none'/%3E%3C/svg%3E")}
.djslider .pause-button{content:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2036%2036'%3E%3Ccircle%20cx='18'%20cy='18'%20r='16.5'%20fill='rgba(20,45,75,.55)'/%3E%3Crect%20x='13'%20y='11'%20width='4'%20height='14'%20rx='1.6'%20fill='%23ffffff'/%3E%3Crect%20x='19'%20y='11'%20width='4'%20height='14'%20rx='1.6'%20fill='%23ffffff'/%3E%3C/svg%3E")}
.djslider .play-button {content:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2036%2036'%3E%3Ccircle%20cx='18'%20cy='18'%20r='16.5'%20fill='rgba(20,45,75,.55)'/%3E%3Cpath%20d='M14.5%2011%20L25%2018%20L14.5%2025%20Z'%20fill='%23ffffff'/%3E%3C/svg%3E")}
.djslider .prev-button,.djslider .next-button,
.djslider .pause-button,.djslider .play-button{width:38px;height:38px}

/* -- ΚΕΙΜΕΝΟ ΣΤΟ ΚΕΝΤΡΟ & ΜΕΓΑΛΥΤΕΡΑ ΓΡΑΜΜΑΤΑ (5/9/2026) ------------------
   Ο ιδιοκτήτης: «πάνε κέντρο τα κείμενα να είναι ευθυγραμμισμένα σωστά» και
   «μεγάλωσε λίγο τις γραμματοσειρές στους τίτλους δεξιά και απάνω».

   1. ΤΟ ΚΕΙΜΕΝΟ ΗΤΑΝ ΣΤΡΑΒΟ, ΟΧΙ ΑΠΛΩΣ ΣΤΕΝΟ. Μετρημένο: κενό 15px αριστερά
      και **388px δεξιά** — το όριο των 860px το κρατούσε αριστερά-στοιχισμένο,
      οπότε όλο το περίσσευμα μαζευόταν στη μία πλευρά. Με margin-inline:auto
      μοιράζεται στα δύο και το κείμενο κάθεται στον άξονα της στήλης.
      ⚠ Μπαίνει ΜΟΝΟ στα κείμενα, όχι στις επικεφαλίδες: η μπάρα «Καλώς
      Ορίσατε» πρέπει να κρατήσει όλο το πλάτος, αλλιώς χάνεται ως ζώνη.

   2. ΞΑΝΑ ΤΟ ΤΑΒΑΝΙ ΤΩΝ clamp. Και τα τρία σημεία που ζήτησε ήταν κολλημένα
      στο max τους: μενού 17px σε καρτέλα 214px, πλαϊνά 15/15,5px σε κουτί
      280px. Αφού μεγάλωσαν τα κουτιά, τα γράμματα δεν ακολούθησαν επειδή το
      clamp τα έκοβε. Ανεβαίνουν τα ταβάνια - όχι σταθερά px, ώστε σε μικρές
      οθόνες να συνεχίσουν να συρρικνώνονται κανονικά.
      ⚠ Συγκρατημένα (+13% ως +17%): τα κύματα έχουν ΚΛΕΙΔΩΜΕΝΟ ύψος
      (aspect-ratio 200/55) και ετικέτες δύο γραμμών όπως «Για να κατανοήσουμε
      την παγκοσμιοποίηση» — μεγαλύτερο άλμα θα τις έβγαζε έξω από το κύμα. */
@media (min-width:1200px){
  #sp-component p,#sp-component ul,#sp-component ol,#sp-component blockquote,
  #sp-component .article-intro,#sp-component dl{margin-left:auto;margin-right:auto}
  .fdw-nav a > span{font-size:clamp(9px,9.8cqi,20px)}
  /* Ο ιδιοκτήτης 5/9: «φτιάξε τους τίτλους πάνω πάνω να είναι ωραίοι σε μορφή,
     αν θες βάλε άλλη γραμματοσειρά».

     Πέρασαν από Alegreya **Sans** σε **Alegreya** (το σερίφ αδελφάκι της ίδιας
     υπεροικογένειας, ήδη φορτωμένο σε 400/700 - καμία νέα λήψη). Δένει με τον
     λογότυπο «Φωτοδότες» και διαβάζεται σαν εκδοτικός οίκος, όχι σαν εφαρμογή.

     ⚠ ΤΟ ΣΕΡΙΦ ΕΙΝΑΙ ~12% ΦΑΡΔΥΤΕΡΟ και το «Το Μήνυμα της Ημέρας» έσπαγε σε δύο
     γραμμές στα 1200px. Μετρημένο: χώρος κειμένου 156px, σερίφ με το letter-
     spacing του fdw-type (0.005em) = 156px ΑΚΡΙΒΩΣ -> αναδίπλωση. Λύση χωρίς να
     μικρύνω τα γράμματα (τα ήθελε μεγάλα): letter-spacing 0 (-5px) και padding
     6->4px (+4px). Περιθώριο: 9px στα 1200, 22px στα 1600-1920, μία γραμμή σε
     1200/1300/1400/1600/1920.

     ⚠ Δοκιμάστηκε ΚΑΙ η εκδοχή «Alegreya Sans 500 με αραιά γράμματα»: έσπαγε
     ΔΥΟ τίτλους σε δύο γραμμές και τους σήκωνε πάνω από το κύμα. Απορρίφθηκε.

     ⚠ ΓΙΑΤΙ ΕΔΩ ΚΑΙ ΟΧΙ ΣΤΟ fdw-type.css (που είναι το «ένα αρχείο» της
     τυπογραφίας): το fdw-type.css το φορτώνει το module 441 με καρφωμένο ?v=,
     που δεν ξεκινάει cache-bust χωρίς πρόσβαση στη διαχείριση. Το
     fdw-sitewide.css φορτώνεται ΜΕΤΑ από αυτό (θέση 24 έναντι 21), οπότε ο
     κανόνας κερδίζει με ίδια ειδικότητα - χωρίς !important. Ίδιο μοτίβο με τις
     παρακάμψεις του fdw-promo.css. */
  .fdw-nav a > span{
    font-family:var(--fd-serif,"Alegreya",Georgia,serif);
    letter-spacing:0;
    text-shadow:0 1px 0 rgba(255,255,255,.6);
    padding-left:4px;padding-right:4px}
  /* Ο ιδιοκτήτης 5/9: «ψήλωσε τα κύματα να χωρέσουν και κάνε τα πιο μεγάλα».
     Το SVG έχει preserveAspectRatio='none', άρα το ύψος ελέγχεται ΜΟΝΟ από το
     aspect-ratio — το κύμα παχαίνει μαζί, που είναι το ζητούμενο. Το λάθος του
     μενού (height σε στοιχείο με λόγο -> παραμόρφωση) δεν επαναλαμβάνεται:
     αλλάζω τον ΛΟΓΟ, δεν προσθέτω δεύτερη διάσταση. */
  .fdw-side .fdw-wave,.fdw-side .fdw-wave-mag{
    aspect-ratio:200/70!important;
    font-size:clamp(12px,7.8cqi,20px)}
  .fdw-side .fdw-head,.fdw-side .fdw-tile{
    aspect-ratio:200/42!important;
    font-size:clamp(12px,7.6cqi,19.5px)}
  #sp-left .sm-logo::after{font-size:clamp(12px,7.6cqi,19.5px)}
}


/* -- ΤΑ ΠΛΑΪΝΑ ΜΕΝΟΥ ΕΥΘΥΓΡΑΜΜΙΣΜΕΝΑ ΜΕ ΤΟ ΚΕΝΤΡΟ (5/9/2026) ---------------
   Ο ιδιοκτήτης: «ανέβασε αυτά τα μενού».

   Μετρημένο στα 1920: το καρουζέλ ξεκινούσε στα 493 και τα δύο πλαϊνά στα
   **516** — 23px πιο χαμηλά, που διαβαζόταν σαν να «κρέμονται». Τα 23 έβγαιναν
   από τρία σημεία στη σειρά, όχι από ένα:

       #sp-left / #sp-right   margin-top 10 + padding-top 6   = 16
       το ΠΡΩΤΟ πλακίδιο      margin-top 7                    =  7

   ⚠ Το `margin:7px 0` του πλακιδίου είναι ΚΑΙ το κενό ανάμεσα στα μπλοκ. Αν
   μηδενιστεί γενικά, κολλάνε όλα μεταξύ τους. Γι' αυτό μηδενίζεται μόνο στο
   `:first-child` — και μετρήθηκε ότι τα ενδιάμεσα κενά μένουν 7px.
   Υπάρχει ακριβώς ΕΝΑ .fdw-side ανά στήλη (μετρημένο), οπότε ο επιλογέας δεν
   πιάνει κατά λάθος δεύτερο μπλοκ πιο κάτω.

   Ο περιορισμός ≥1200px είναι απλώς φύλακας: μετρημένο στα 375px, εκεί το
   margin-top/padding-top είναι ΗΔΗ 0 από το template, άρα ο κανόνας δεν έχει
   τι να αλλάξει στο κινητό — δεν κρατάει κάποιο περιθώριο που χρειάζεται. */
@media (min-width:1200px){
  #sp-main-body #sp-left,
  #sp-main-body #sp-right{margin-top:0!important;padding-top:0!important}
  #sp-left .fdw-side>:first-child,
  #sp-right .fdw-side>:first-child{margin-top:0!important}
}


/* -- ΛΟΓΟΤΥΠΑ COURIER ΣΤΟ ΒΗΜΑ 4 ΤΟΥ ΤΑΜΕΙΟΥ (5/9/2026) -------------------
   Ο ιδιοκτήτης: «βάλε εδώ τα σήματα των εταιρειών».

   ⚠ ΓΙΑΤΙ ΕΔΩ ΚΑΙ ΟΧΙ ΣΤΟ shipping_method.php: το view είναι αρχείο του eShop.
   Το §7 του project το έχει ήδη πληρώσει — «eShop update: σβήνει τις
   προσαρμογές». Ο κανόνας ζει στο δικό μας CSS και επιβιώνει σε κάθε update.

   Η δομή που παράγει το view δεν έχει κλάση ανά εταιρεία:

       <div><strong>ΕΛΤΑ Courier</strong><br>
            <label class="radio"><input value="eshop_elta.flat" ...></label></div>

   Δηλαδή ο ΜΟΝΟΣ διαχωριστής είναι το value του radio, που είναι αδελφός του
   <strong> — όχι πρόγονος. Γι' αυτό `:has()`: διαλέγει το <div> από το παιδί
   του και μετά βάφει το <strong>. Χωρίς `:has()` θα χρειαζόταν JavaScript.

   Οι κωδικοί βγαίνουν από τα eshop_elta.php / eshop_acs.php / eshop_boxnow.php
   (`'name' => 'eshop_<x>.flat'`) — μη τους μαντέψεις, εκεί ορίζονται.

   Τα σήματα είναι τα επίσημα, από τους ίδιους τους μεταφορείς, φιλοξενούμενα
   τοπικά (ΟΧΙ hotlink: σπάει όταν αλλάξουν διαδρομή). Πλάτη υπολογισμένα από
   τον πραγματικό λόγο κάθε αρχείου ώστε να μην παραμορφώνονται. */
#sp-component div:has(> label > input[name="shipping_method"]) > strong{
  display:inline-flex;align-items:center;gap:10px;line-height:1.25}
#sp-component div:has(> label > input[name="shipping_method"]) > strong::before{
  content:"";flex:0 0 auto;height:26px;background:no-repeat center/contain}
#sp-component div:has(> label > input[value="eshop_elta.flat"]) > strong::before{
  width:37px;background-image:url("/images/stories/couriers/elta-courier.png")}
#sp-component div:has(> label > input[value="eshop_acs.flat"]) > strong::before{
  width:97px;background-image:url("/images/stories/couriers/acs.svg")}
#sp-component div:has(> label > input[value="eshop_boxnow.flat"]) > strong::before{
  width:35px;background-image:url("/images/stories/couriers/boxnow.svg")}


/* -- ΤΑ <select> ΕΚΑΝΑΝ ΤΟ iOS ΝΑ ΖΟΥΜΑΡΕΙ (5/9/2026) ---------------------
   Μετρημένο: `limit` και `sort_options` βγαίνουν **14px**. Το Safari του iPhone
   ζουμάρει αυτόματα σε ΚΑΘΕ πεδίο φόρμας κάτω από 16px όταν το πατήσεις — και
   μετά η σελίδα μένει ζουμαρισμένη, ο χρήστης πρέπει να τη μαζέψει με το χέρι.
   Ίδια παγίδα με το §17 του project («πεδία φόρμας <16px -> αυτόματο ζουμ iOS»),
   που είχε ήδη διορθωθεί στα inputs αλλά ΟΧΙ στα select.

   Εμφανίζονται σε 4 σελίδες: Μήνυμα της Ημέρας, Τα Νέα μας, το βιβλιοπωλείο και
   κάθε κατηγορία βιβλίων — δηλαδή σε όλες τις λίστες.

   Μόνο ως τα 1024px: σε desktop τα 14px κρατούν τη μπάρα εργαλείων συμπαγή και
   δεν υπάρχει θέμα ζουμ (δεν είναι οθόνη αφής). */
@media (max-width:1024px){
  #sp-component select,
  #sp-component select.form-select{font-size:16px}
}


/* -- ΤΟ ΜΕΝΟΥ ΤΟΥ ΚΙΝΗΤΟΥ ΕΚΡΥΒΕ 5 ΑΠΟ ΤΙΣ 7 ΣΕΛΙΔΕΣ (5/9/2026) -----------
   Μετρημένο σε iPhone 375px: η μπάρα `.fdw-mnav` είχε `overflow-x:auto` και
   `flex-wrap:nowrap` — πλάτος περιεχομένου **886px μέσα σε παράθυρο 351px**.
   Ορατά: **2 στα 7**. Τα «Τα Νέα μας», «Εγγραφή Συνδρομητών», «Τα βιβλία μας»
   και «Επικοινωνία» έφταναν ΜΟΝΟ με οριζόντιο σύρσιμο — και δεν υπήρχε κανένα
   σημάδι (ούτε βελάκι, ούτε σκίαση) ότι η μπάρα σύρεται.

   ⚠ Δεν υπήρχε εναλλακτικός δρόμος: το «χάμπουργκερ» ανοίγει τις ΚΑΤΗΓΟΡΙΕΣ
   ΒΙΒΛΙΩΝ (14 σύνδεσμοι), και το offcanvas του Helix έχει **έναν** σύνδεσμο
   (τον τίτλο). Δηλαδή 4 βασικές σελίδες ήταν πρακτικά άφταστες στο κινητό.

   Λύση: αναδίπλωση αντί για κύλιση — τίποτα δεν κρύβεται, καμία χειρονομία δεν
   απαιτείται. Προτιμήθηκε από «σκίαση + βελάκι» επειδή το κοινό του site
   διαβάζει από κινητό χωρίς να ψάχνει κρυμμένες χειρονομίες.

   Το όριο είναι 899px γιατί από τα ~900px και πάνω τα 886px χωράνε σε μία
   γραμμή και η μπάρα δουλεύει όπως σχεδιάστηκε. */
@media (max-width:899px){
  .fdw-mnav{flex-wrap:wrap!important;overflow-x:visible!important;justify-content:center}
  .fdw-mnav>a{flex:0 1 auto}
}


/* -- ΑΔΕΙΑ ΕΝΟΤΗΤΑ 60px ΚΑΤΩ ΑΠΟ ΤΟ ΜΕΝΟΥ (5/9/2026) ----------------------
   Μετρημένο στην αρχική, ΚΑΙ σε desktop (1440) ΚΑΙ σε κινητό (375):
   το #sp-section-4 έπιανε **60px** (padding 30+30) με μηδέν περιεχόμενο.

   Η αλυσίδα: το section φιλοξενούσε αρχικά το καρουζέλ· το fdw-sitewide.js το
   μεταφέρει στο #sp-component και μετά βάζει inline `display:none`. Το inline
   ΟΜΩΣ χανόταν — δύο κανόνες με !important το νικούσαν: το `.d-md-block` του
   Bootstrap (≥768px) και ένας δικός μου `#sp-section-4{display:block!important}`
   που είχε μπει όσο το καρουζέλ ζούσε ακόμη εκεί.

   ⚠ Το μάθημα: inline style ΔΕΝ νικάει δηλώσεις με !important. Όταν κρύβεις
   κάτι από JavaScript σε σελίδα με Bootstrap, επαλήθευσε το computed — όχι το
   ότι «το έγραψες».

   Ο κανόνας κρύβει ΜΟΝΟ την άδεια εκδοχή: αν κάποτε μπει ξανά module εκεί,
   εμφανίζεται από μόνη της. Ειδικότητα (1,1,0) — νικάει το .d-md-block (0,1,0). */
#sp-section-4:not(:has(.sp-module)){display:none!important}