/* ==========================================================================
 * functions.css — Η ΔΟΜΙΚΗ ΒΑΣΗ ΤΩΝ «ΛΕΙΤΟΥΡΓΙΩΝ» (containers & widgets)
 * ==========================================================================
 * ΤΙ ΕΙΝΑΙ ΕΔΩ: ό,τι πρέπει να δουλεύει και να δείχνει λογικό ΟΠΟΥΔΗΠΟΤΕ
 * μπει — τα items ενός container (Theme → Header → Containers) και τα
 * widgets ([nq_widget type="…"]): menu, language switcher, social, cart,
 * search, php.
 *
 * ΓΙΑΤΙ ΕΙΝΑΙ ΚΑΘΟΛΙΚΟ ΑΡΧΕΙΟ (theme/css/*.css → κάθε σελίδα):
 *   · ΟΧΙ module (theme/css/modules/): εκείνα τα τραβά ένα BLOCK μέσω του
 *     πεδίου «Χρειάζεται». Τα widgets δεν είναι blocks — ζουν ως κείμενο
 *     μέσα σε items, άρα κανείς δεν θα ζητούσε ποτέ το CSS τους.
 *   · ΟΧΙ part CSS: το ίδιο widget μπορεί να μπει σε ΟΠΟΙΟΝΔΗΠΟΤΕ container
 *     οποιουδήποτε header/footer. Στο header-demo-1.css θα έντυνε μόνο τον
 *     ένα header (και θα πατούσε τη δουλειά του Styling / του agent A).
 *
 * ΣΕΙΡΑ ΦΟΡΤΩΣΗΣ (core/bootstrap.php):
 *     vendor → theme/css/*.css → plugins → PART CSS → page assets
 *            → Colors → /style.css
 * Δηλαδή αυτό το αρχείο έρχεται ΠΡΙΝ τα part CSS: κάθε header μπορεί να το
 * υπερισχύσει ΧΩΡΙΣ `!important`. Γι' αυτό εδώ μέσα:
 *   🔴 ΜΟΝΟ selectors μιας κλάσης, ΚΑΝΕΝΑ id, ΚΑΝΕΝΑ !important.
 *   🔴 ΜΟΝΟ δομή (ροή, στοίχιση, κενά, ορατότητα). Χρώματα/μεγέθη ταυτότητας
 *      ανήκουν στο part CSS ή στο Skin. Όπου χρειάζεται χρώμα εδώ, μπαίνει
 *      `currentColor` ή token — ποτέ σκέτο hex.
 * ======================================================================== */

/* ── Ο CONTAINER ──────────────────────────────────────────────────────────
   Το ίδιο το #nq-slot-<μπάρα>-<πλευρά>. ΔΕΝ του δίνουμε display: η θέση και
   η στοίχιση ορίζονται από τη ΣΤΗΛΗ του builder (κανόνας: διάταξη = builder,
   όχι CSS). Εδώ μόνο ό,τι δεν μπορεί να δώσει η στήλη. */
.nq-slot { min-width: 0; max-width: 100%; }

/* ══ Η ΠΛΕΥΡΑ ΟΡΙΖΕΙ ΚΑΙ ΤΗ ΣΤΟΙΧΙΣΗ (ιδιοκτήτης 2026-08-22) ══════════════
   «Σε όλους τους containers: left → τα items ξεκινούν από αριστερά, right →
   πάνε δεξιά, center → κεντράρονται στη μέση του container.»
   ⚠️ ΑΛΛΑΖΕΙ ΠΡΟΗΓΟΥΜΕΝΗ ΑΠΟΦΑΣΗ: μέχρι τώρα η πλευρά ήταν ΜΟΝΟ όνομα
   υποδοχής και η στοίχιση ερχόταν αποκλειστικά από τη στήλη του builder
   (βλ. newquay-theme-html-slots.md). Ο ιδιοκτήτης το άλλαξε ρητά.
   Για να έχει νόημα η στοίχιση, ο container πιάνει ΟΛΟ το πλάτος της στήλης
   του — αλλιώς «δεξιά» μέσα σε κουτί που είναι όσο το περιεχόμενο δεν φαίνεται. */
.pb-col > .nq-slot { width: 100%; }
.nq-slot-left   > .nq-slot-list { justify-content: flex-start; }
.nq-slot-center > .nq-slot-list { justify-content: center; }
.nq-slot-right  > .nq-slot-list { justify-content: flex-end; }
/* ΚΑΙ ΤΟ ΚΕΙΜΕΝΟ ΜΕΣΑ ΣΤΑ ITEMS (ιδιοκτήτης 2026-08-23: «είχαμε πει ότι στους
   μεσαίους containers η στοίχιση θα είναι μεσαία — text-align: center»).
   Το `justify-content` στοιχίζει ΤΑ ITEMS μεταξύ τους· δεν λέει τίποτα για το
   περιεχόμενο ΜΕΣΑ σε ένα item — ένα κείμενο σε Raw HTML έμενε αριστερά μέσα
   σε κεντραρισμένο item. Το `text-align` κληρονομείται, άρα το πιάνει και ό,τι
   γράψει ο χρήστης στο textarea. */
.nq-slot-left   { text-align: left; }
.nq-slot-center { text-align: center; }
.nq-slot-right  { text-align: right; }

/* ══ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΔΕΝ ΒΓΑΙΝΕΙ ΠΟΤΕ ΕΞΩ (ιδιοκτήτης 2026-08-22) ═══════════
   ΤΟ ΠΡΟΒΛΗΜΑ: οι στήλες που φιλοξενούν containers είναι άκαμπτα κλάσματα
   (col-lg-4 = 1/3). Ένα μενού 6 links θέλει 565px και η στήλη δίνει 400 —
   άρα ξεχείλιζε ΕΞΩ από τη σελίδα και έβγαινε οριζόντια μπάρα κύλισης
   (μετρημένο: scrollWidth 1355 σε viewport 1200).
   Η ΛΥΣΗ: μόνο οι στήλες ΜΕ container παύουν να είναι άκαμπτες και παίρνουν
   πλάτος ΚΑΤΑ ΠΕΡΙΕΧΟΜΕΝΟ — ο γεμάτος container δανείζεται τον χώρο του
   κενού διπλανού αντί να βγει έξω. Η γραμμή τα μοιράζει αριστερά/κέντρο/
   δεξιά, που είναι ακριβώς η σημασία των τριών containers.
   🔴 ΣΤΕΝΑ ΣΤΟΧΕΥΜΕΝΟ σε στήλες που περιέχουν `.nq-slot`: καμία άλλη γραμμή
   του builder δεν αλλάζει, και η ελευθερία διάταξης μένει στον builder. */
/* ⚠️ ΚΑΙ `width: auto`: το Bootstrap 5 δίνει στις col-* **width: 33.33%**, όχι
   flex-basis — σκέτο `flex: 0 1 auto` ΔΕΝ άλλαζε τίποτα (μετρημένο: η στήλη
   έμενε 400px).

   `flex: 1 1 0` + `min-width: fit-content` (2026-08-22, δεύτερη διόρθωση):
   με `flex: 0 1 auto` η στήλη γινόταν ΑΚΡΙΒΩΣ όσο το περιεχόμενό της, οπότε
   η στοίχιση της στήλης στον builder (Αριστερά/Κέντρο/Δεξιά) δεν είχε πια
   κανένα περιθώριο να δουλέψει — ο μεσαίος container έδειχνε εκτός κέντρου.
   Τώρα: βάση 0 + grow 1 ⇒ ΙΣΕΣ στήλες όταν υπάρχει χώρος (άρα ο μεσαίος
   κεντράρεται πραγματικά και η στοίχιση του builder έχει νόημα), ενώ το
   `min-width: fit-content` εγγυάται ότι καμία στήλη δεν πέφτει κάτω από το
   περιεχόμενό της ⇒ τίποτα δεν βγαίνει έξω. */
/* ΚΑΘΕΤΟ ΚΕΝΤΡΑΡΙΣΜΑ ΣΕ ΟΛΟΥΣ ΤΟΥΣ CONTAINERS (ιδιοκτήτης 2026-08-22):
   το `align-items:center` της στήλης ευθυγραμμίζει το ul/li του container με
   ό,τι άλλο έχει η γραμμή (μενού, λογότυπο). Χωρίς αυτό το περιεχόμενο
   κολλούσε στην κορυφή — το «English» έβγαινε ψηλότερα από τα links δίπλα.
   Το `display:flex` δεν αλλάζει την ΟΡΙΖΟΝΤΙΑ συμπεριφορά: όπου ο builder
   έχει δώσει στοίχιση (.pb-col-h-*) η στήλη ήταν ήδη flex, και όπου δεν
   έχει, ο container μένει στην αρχή όπως και ως block. */
/* `align-self: stretch`: η γραμμή του builder έχει `align-items: flex-start`,
   οπότε η στήλη έπαιρνε ύψος ΟΣΟ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΗΣ (μετρημένο: μεσαία 24px
   σε γραμμή 52px) και το κεντράρισμα δεν είχε πού να εφαρμοστεί — το
   «English» έβγαινε 14px ψηλότερα από τα links δίπλα του. Με stretch η στήλη
   πιάνει όλο το ύψος της γραμμής και το `align-items:center` κεντράρει
   πραγματικά. ΜΟΝΟ οι στήλες με container αλλάζουν· η γραμμή δεν αγγίζεται. */
/* 🔴 ΤΟ ΜΕΓΕΘΟΣ ΑΦΟΡΑ **ΟΛΕΣ** ΤΙΣ ΣΤΗΛΕΣ ΤΗΣ ΓΡΑΜΜΗΣ, ΟΧΙ ΜΟΝΟ ΟΣΕΣ ΕΧΟΥΝ
   CONTAINER (2026-08-22). Όσο ο κανόνας έπιανε μόνο τις στήλες με container,
   η στήλη του ΜΕΝΟΥ έμενε άκαμπτο 1/3 (400px) ενώ το μενού ήθελε 565 — άρα
   ξεχείλιζε ΜΕΣΑ στην περιοχή της επόμενης στήλης, κι επειδή η επόμενη είναι
   αργότερα στο DOM ζωγραφιζόταν ΑΠΟ ΠΑΝΩ και **έτρωγε το hover**: το
   «Δοκιμές ALL» δεν άνοιγε καθόλου ενώ το «Υπηρεσίες» άνοιγε κανονικά.
   Επιβεβαιώθηκε με `document.elementFromPoint` στο κέντρο του link → επέστρεφε
   `DIV.pb-col`, όχι το link. */
/* 🔴 ΕΞΑΙΡΕΣΗ: ΓΡΑΜΜΗ ΜΕ SEARCH BAR (ιδιοκτήτης 2026-08-22)
   «γιατί το col-lg-8 φαίνεται σαν να καταλαμβάνει το μισό και όχι 8;»
   Ακριβώς εξαιτίας αυτού του κανόνα: το `flex:1 1 0` σημαίνει «ίσα μερίδια»
   και ΑΚΥΡΩΝΕΙ το `width:66.6667%` που δίνει το Bootstrap στο `.col-lg-8`.
   Μετρημένο στα 1500: στήλες 588 + 588 αντί για 784 + 392.
   Για το μενού αυτό ήταν σωστό (η στήλη ΠΡΕΠΕΙ να μεγαλώσει όσο το μενού).
   Για ένα πεδίο αναζήτησης είναι λάθος: το πεδίο ξέρει να στενεύει μόνο του,
   άρα η στήλη οφείλει να κρατήσει το πλάτος που δήλωσε ο builder.
   Με την εξαίρεση (μετρημένο): main 784 + 392, το search φτάνει τα πλήρη
   567px (379→946 αντί 273→750), καμία οριζόντια μπάρα σε 1500/1200.
   Η ΠΑΝΩ ΜΠΑΡΑ ΔΕΝ ΑΓΓΙΖΕΤΑΙ — εκείνη πράγματι δεν χωράει σε 8/4 (η δεξιά
   της στήλη θέλει 641px) και κρατά το content sizing.
   ⚠️ Αν κάποτε μπει ΜΕΝΟΥ στην ίδια γραμμή με search, εκείνη η γραμμή χάνει
   την προστασία του μενού — τότε τα πλάτη ρυθμίζονται από τον builder. */
.pb-row:has(> .pb-col > .nq-slot):not(:has(.nq-w-searchbar)) > .pb-col {
  flex: 1 1 0; width: auto; min-width: fit-content; max-width: 100%;
}
.pb-col:has(> .nq-slot) { align-self: stretch; }

/* ══ ΚΑΝΕΝΑΣ CONTAINER ΔΕΝ ΠΕΡΝΑΕΙ ΤΟ ΚΕΛΥΦΟΣ ΣΤΟ ΚΙΝΗΤΟ (ιδιοκτήτης 2026-08-23:
   «πρέπει να κρατάμε ένα padding γύρω γύρω στα πάντα, να μην κολλάει στις άκρες»)
   ΜΕΤΡΗΜΕΝΟ στα 375: η πάνω μπάρα ήθελε 381px περιεχομένου σε κέλυφος 360 —
   το `min-width: fit-content` από πάνω δεν αφήνει τη στήλη να μικρύνει, οπότε
   ο ΔΕΞΙΟΣ container έβγαινε 9px ΕΞΩ από την οθόνη (το `html` έχει
   `overflow-x: clip`, άρα δεν φαινόταν καν μπάρα κύλισης — απλώς κομμένο).
   ΛΥΣΗ ΧΩΡΙΣ ΝΑ ΚΡΥΦΤΕΙ ΤΙΠΟΤΑ: κάτω από 992 η στήλη μπορεί να μικρύνει και η
   λίστα τυλίγει σε δεύτερη σειρά. Οι μπάρες της κεφαλίδας έχουν `min-height`,
   όχι σταθερό ύψος, άρα η δεύτερη σειρά είναι ορατή (μετρημένο: #Top_header
   min-height 40px, χωρίς max-height).
   ⚠️ Το τύλιγμα είναι Η ΕΞΑΙΡΕΣΗ και όχι ο κανόνας: στο desktop μένει `nowrap`
   (βλ. σχόλιο πιο κάτω — εκεί η δεύτερη σειρά θα ήταν αόρατη έξω από την μπάρα).
   Η ΠΡΑΓΜΑΤΙΚΗ λύση της στενότητας παραμένει του ιδιοκτήτη: κρύψε items στο
   «Κινητό» με τα πράσινα κουμπάκια, ή δώσε άλλα πλάτη στηλών από τον builder. */
/* 🔴 ΑΥΞΗΜΕΝΗ ΕΙΔΙΚΟΤΗΤΑ, ΕΠΙΤΗΔΕΣ: πρώτη γραφή ήταν `> .pb-col` (0,4,0) και
   σκέτο `.nq-slot-list` (0,1,0) — ΔΕΝ έπιασε τίποτα. Ο κανόνας του κελύφους
   είναι (0,5,0) λόγω του `:not(:has(.nq-w-searchbar))`, και το `nowrap` της
   λίστας ζει ΠΙΟ ΚΑΤΩ στο ίδιο αρχείο, άρα κέρδιζε με ίδια ειδικότητα.
   Βρέθηκε απαριθμώντας τους κανόνες του CSSOM — μη «καθαρίσεις» τους
   επιλογείς, θα ξανασπάσει σιωπηλά. */
@media (max-width: 991.98px) {
  .pb-row:has(> .pb-col > .nq-slot) > .pb-col.pb-col.pb-col { min-width: 0; }
  /* ΟΧΙ `flex-wrap: wrap` ΕΔΩ (δοκιμάστηκε 2026-08-23 και ΑΠΟΡΡΙΦΘΗΚΕ):
     με τύλιγμα, η λίστα της πάνω μπάρας έγινε 56px σε μπάρα ΣΤΑΘΕΡΟΥ ύψους
     40px (`#Top_header{height:40px}` στο part CSS) και ξεχείλισε 8px πάνω
     ΚΑΙ 8px κάτω — μετρημένο, ul y=-8→48. Δηλαδή η δεύτερη σειρά βγήκε ΕΞΩ
     από τη μπάρα, ακριβώς η παγίδα που περιγράφεται πιο πάνω. Αν κάποτε
     θέλουμε δύο σειρές στο κινητό, το σωστό σημείο είναι η ΖΩΝΗ ΚΙΝΗΤΟΥ
     του part (`height: auto`, με το min-height ως δάπεδο) — όχι εδώ. */
}

/* 🔴 ΤΟ `align-items` ΜΟΝΟ ΟΠΟΥ Ο BUILDER ΔΕΝ ΕΧΕΙ ΣΤΟΙΧΙΣΗ (2026-08-22).
   Το `.pb-col-h-end/-center/-start` δίνει `align-items` (ειδικότητα 0,1,0)·
   ο δικός μας κανόνας ήταν (0,2,0) και ΤΟ ΕΠΙΝΙΚΟΥΣΕ — έτσι μια στήλη
   ρυθμισμένη «δεξιά» κεντράριζε τον container: το καλάθι της κάτω μπάρας
   σταματούσε στα 1486 αντί για 1548, δηλαδή 62px αριστερότερα από το καλάθι
   της κύριας κεφαλίδας. Σε στήλες ΜΕ .pb-col-h αφήνουμε τη στοίχιση στον
   builder και δίνουμε μόνο το κάθετο (justify-content, βλ. πιο κάτω). */
.pb-col:not(.pb-col-h):has(> .nq-slot) { display: flex; align-items: center; }

/* 🔴 ΟΤΑΝ Η ΣΤΗΛΗ ΕΧΕΙ ΣΤΟΙΧΙΣΗ ΑΠΟ ΤΟΝ BUILDER, Ο ΑΞΟΝΑΣ ΑΝΤΙΣΤΡΕΦΕΤΑΙ.
   Το `.pb-col-h` του PageBuilder είναι `flex-direction: column` (frontend.css
   112-115), οπότε εκεί το `align-items` κεντράρει ΟΡΙΖΟΝΤΙΑ και το κάθετο
   κεντράρισμα θέλει `justify-content`. Χωρίς αυτό ο μεσαίος container έμενε
   κολλημένος στην κορυφή (μετρημένο: 24px κουτί σε στήλη 52px, «English»
   14px ψηλότερα από τα links δίπλα).
   Ο builder ΔΕΝ έχει ρύθμιση κάθετης στοίχισης στηλών (μόνο .pb-col-h-*),
   άρα δεν πατάμε καμία επιλογή του χρήστη. */
.pb-col-h:has(> .nq-slot) { justify-content: center; }
.pb-row:has(> .pb-col > .nq-slot) { justify-content: space-between; flex-wrap: nowrap; }

/* ── Η ΛΙΣΤΑ ITEMS (ul.nq-slot-list > li) ─────────────────────────────────
   Κάθε item ενός container βγαίνει ως <li>. ΧΩΡΙΣ αυτό, ο browser βάζει
   κουκκίδες και 40px εσοχή μέσα στην μπάρα. Τα items κάθονται σε ΓΡΑΜΜΗ
   («links | social σε μια γραμμή») και τυλίγουν σε στενή οθόνη. */
.nq-slot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  /* 🔴 NOWRAP, ΟΧΙ WRAP (διόρθωση 2026-08-22, μετρημένη σε ζωντανή σελίδα).
     Με `wrap`, σε μπάρα ΣΤΑΘΕΡΟΥ ύψους ό,τι δεν χωρά πέφτει σε δεύτερη σειρά
     ΕΞΩ από την μπάρα και γίνεται ΑΟΡΑΤΟ: μενού 6 links σε στήλη 400px
     έδειχνε 2 (τα υπόλοιπα 4 μετρήθηκαν στο y=45 μιας μπάρας 40px). Σιωπηλά
     κρυμμένο περιεχόμενο είναι χειρότερο από ορατή στενότητα — το `html`
     έχει ήδη `overflow-x: clip` (theme.css), οπότε δεν προκύπτει οριζόντια
     κύλιση. Η ΛΥΣΗ ΤΗΣ ΣΤΕΝΟΤΗΤΑΣ ΕΙΝΑΙ Η ΣΤΗΛΗ ΤΟΥ BUILDER (διάταξη =
     builder, όχι CSS): π.χ. ο Demo 1 δίνει 1/4 + 3/4, όχι τρία ίσα τρίτα. */
  flex-wrap: nowrap;
  gap: var(--nq-slot-gap, 18px);
  min-width: 0;
}
.nq-slot-list > li { display: flex; align-items: center; min-width: 0; }

/* Opt-in τύλιγμα: για containers με ΚΑΤΑΚΟΡΥΦΟ χώρο (π.χ. mobile drawer),
   όπου η δεύτερη σειρά είναι ορατή και επιθυμητή. */
.nq-slot-wrap .nq-slot-list,
.nq-slot-wrap.nq-slot-list { flex-wrap: wrap; }

/* ══ ΔΙΑΧΩΡΙΣΤΙΚΗ ΓΡΑΜΜΗ ΑΝΑ ITEM ════════════════════════════════════════
   Το χρώμα και το πάχος τα βάζει inline ο renderer (ρύθμιση ΤΟΥ item, στο
   popup των Containers). Εδώ μένει μόνο η ΑΠΟΣΤΑΣΗ, γιατί πρέπει να ξέρει το
   κενό της λίστας: χωρίς αυτό η γραμμή κάθεται στην άκρη του item — κολλητά
   στο ένα περιεχόμενο και ολόκληρο το gap μακριά από το επόμενο.
   Λύση: όταν υπάρχει έστω ένα item με γραμμή, το κενό της λίστας γίνεται μισό
   και το item παίρνει το άλλο μισό ως padding στην πλευρά της γραμμής ⇒ ίδια
   απόσταση δεξιά κι αριστερά της, με το ΣΥΝΟΛΙΚΟ κενό αμετάβλητο. */
.nq-slot-list:has(> li[class*="nq-sep-"]) { gap: calc(var(--nq-slot-gap, 18px) / 2); }
.nq-slot-list > li.nq-sep-r { padding-right: calc(var(--nq-slot-gap, 18px) / 2); }
.nq-slot-list > li.nq-sep-l { padding-left:  calc(var(--nq-slot-gap, 18px) / 2); }

/* 🔴 ΨΕΥΔΟΣΤΟΙΧΕΙΟ, ΟΧΙ `border` (2026-08-22). Με border η γραμμή παίρνει
   ΟΛΟ το ύψος του item της: ο language switcher είναι 28px ενώ τα social
   δίπλα του 15px, οπότε έβγαινε δυσανάλογα ψηλή (μετρημένο). Το ψευδοστοιχείο
   κεντράρεται κάθετα και έχει ΔΙΚΟ του ύψος — προεπιλογή 60% του item, με
   δυνατότητα ακριβούς τιμής ανά item.
   Πάχος/χρώμα/ύψος έρχονται ως custom properties inline από τον renderer, ώστε
   το CSS να μένει ένα και οι τιμές να είναι ρύθμιση του item. */
.nq-slot-list > li.nq-sep-r,
.nq-slot-list > li.nq-sep-l { position: relative; }
.nq-slot-list > li.nq-sep-r::after,
.nq-slot-list > li.nq-sep-l::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--sep-w, 1px);
  height: var(--sep-h, 60%);
  /* ΠΡΟΕΠΙΛΟΓΗ ΧΡΩΜΑΤΟΣ: `currentColor` στο 35%, ΟΧΙ `--nq-line`.
     Το token γραμμών του skin είναι σχεδιασμένο για ΑΝΟΙΧΤΕΣ επιφάνειες
     (#e7e7e7) και πάνω σε μπλε μπάρα διαβαζόταν ως **άσπρη γραμμή**
     (μετρημένο: rgb(231,231,231) στη μπλε πάνω μπάρα). Το currentColor είναι
     το χρώμα κειμένου της μπάρας, άρα η γραμμή βγαίνει πάντα διακριτική και
     στο ίδιο «οικογενειακό» χρώμα, όποιο κι αν είναι το φόντο.
     Ρητό χρώμα από τον χρήστη (--sep-c) πάντα υπερισχύει. */
  background: var(--sep-c, color-mix(in srgb, currentColor 35%, transparent));
  pointer-events: none;
}
.nq-slot-list > li.nq-sep-r::after { right: 0; }
.nq-slot-list > li.nq-sep-l::after { left: 0; }

/* ── ΟΡΙΖΟΝΤΙΑ ΓΡΑΜΜΗ, ΓΙΑ ΚΑΘΕΤΕΣ ΛΙΣΤΕΣ (2026-08-23) ────────────────────
   Στο πάνελ κινητού η λίστα είναι στήλη, άρα «αριστερά/δεξιά» δεν χωρίζει
   τίποτα: η γραμμή πάει πάνω ή κάτω από το item, όπως ανάμεσα στα items του
   μενού. ΙΔΙΕΣ μεταβλητές με την κάθετη — `--sep-w` πάχος, `--sep-c` χρώμα,
   `--sep-h` ΜΗΚΟΣ (εδώ πλάτος· προεπιλογή όλη η γραμμή, όχι 60%: μια μισή
   γραμμή ανάμεσα σε στοιβαγμένα items διαβάζεται ως λάθος, ενώ δίπλα-δίπλα
   είναι το σωστό). Οι αποστάσεις μπαίνουν όπου ζει η κάθετη λίστα
   (mobpanel.css), γιατί μόνο εκεί είναι γνωστό το κατακόρυφο κενό. */
.nq-slot-list > li.nq-sep-t,
.nq-slot-list > li.nq-sep-b { position: relative; }
.nq-slot-list > li.nq-sep-t::after,
.nq-slot-list > li.nq-sep-b::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--sep-h, 100%);
  height: var(--sep-w, 1px);
  background: var(--sep-c, color-mix(in srgb, currentColor 35%, transparent));
  pointer-events: none;
}
.nq-slot-list > li.nq-sep-t::after { top: 0; }
.nq-slot-list > li.nq-sep-b::after { bottom: 0; }

/* ══ ΔΙΑΧΩΡΙΣΤΙΚΑ ΚΑΙ ΜΕΣΑ ΣΤΟ ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ (ιδιοκτήτης 2026-08-22) ════
   `[nq_widget type="menu" … sep="1"]` βάζει `.nq-navsep` στο <ul> του μενού.
   🔴 ΑΚΟΛΟΥΘΕΙ ΤΟ STYLE ΤΟΥ ITEM ΧΩΡΙΣ ΑΝΤΙΓΡΑΦΗ ΤΙΜΩΝ: πάχος/χρώμα/ύψος
   είναι τα ΙΔΙΑ custom properties (`--sep-w/--sep-c/--sep-h`) που ορίζει το
   item — τα κληρονομεί το μενού μέσα του. Αλλάζεις τη γραμμή του item, αλλάζουν
   και του μενού. Χωρίς ρύθμιση, ισχύουν οι ίδιες προεπιλογές (1px, χρώμα skin,
   60% ύψος).
   ΠΑΝΤΑ `:not(:last-child)` — το τελευταίο nav item ποτέ με γραμμή. */
.nq-navsep > li { position: relative; }
.nq-navsep > li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--sep-w, 1px);
  height: var(--nsep-h, var(--sep-h, 60%));
  /* ΠΡΟΕΠΙΛΟΓΗ ΧΡΩΜΑΤΟΣ: `currentColor` στο 35%, ΟΧΙ `--nq-line`.
     Το token γραμμών του skin είναι σχεδιασμένο για ΑΝΟΙΧΤΕΣ επιφάνειες
     (#e7e7e7) και πάνω σε μπλε μπάρα διαβαζόταν ως **άσπρη γραμμή**
     (μετρημένο: rgb(231,231,231) στη μπλε πάνω μπάρα). Το currentColor είναι
     το χρώμα κειμένου της μπάρας, άρα η γραμμή βγαίνει πάντα διακριτική και
     στο ίδιο «οικογενειακό» χρώμα, όποιο κι αν είναι το φόντο.
     Ρητό χρώμα από τον χρήστη (--sep-c) πάντα υπερισχύει. */
  background: var(--sep-c, color-mix(in srgb, currentColor 35%, transparent));
  pointer-events: none;
}
@media (max-width: 575.98px) {
  .nq-slot-list:has(> li[class*="nq-sep-"]) { gap: calc(var(--nq-slot-gap-sm, 12px) / 2); }
  .nq-slot-list > li.nq-sep-r { padding-right: calc(var(--nq-slot-gap-sm, 12px) / 2); }
  .nq-slot-list > li.nq-sep-l { padding-left:  calc(var(--nq-slot-gap-sm, 12px) / 2); }
}

/* ΠΡΟΑΙΡΕΤΙΚΟΣ ΔΙΑΧΩΡΙΣΤΗΣ ανάμεσα στα items: opt-in με κλάση στον container
   (π.χ. από το Styling: `#nq-slot-top-right .nq-slot-list{...}` ή βάζοντας
   .nq-slot-sep). Δεν είναι προεπιλογή — μια γραμμή που δεν ζήτησες είναι
   διακόσμηση, και η διακόσμηση ανήκει στο skin. */
.nq-slot-sep > li + li::before {
  content: "";
  align-self: center;
  width: 1px;
  height: 1em;
  margin-right: var(--nq-slot-gap, 18px);
  background: currentColor;
  opacity: .28;
}

/* ── WIDGET: SOCIAL ───────────────────────────────────────────────────────
   ul.nq-social > li.nq-social-<δίκτυο> > a > i.fe. Τα χρώματα έρχονται από
   το περιβάλλον (currentColor), ώστε το ίδιο markup να δουλεύει σε ανοιχτή
   και σε σκούρα μπάρα χωρίς δεύτερο κανόνα. */
.nq-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--nq-social-gap, 12px);
}
/* Τα <li> ΠΡΕΠΕΙ να είναι flex, όχι list-item: αλλιώς ο σύνδεσμος μέσα τους
   είναι inline box και στοιχίζεται στη ΓΡΑΜΜΗ ΒΑΣΗΣ του κειμένου, όχι στο
   κέντρο — μετρημένο: εικονίδια 2px ψηλότερα από τα υπόλοιπα items της
   μπάρας, με τα li να βγαίνουν 18.8px ενώ ο σύνδεσμος 15px. Ίδια λογική με
   το `.nq-slot-list > li`. */
.nq-social > li { display: flex; align-items: center; }
.nq-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
  line-height: 1;
  transition: opacity .15s ease, color .15s ease;
}
.nq-social a:hover { opacity: .7; }
.nq-social a:focus-visible { outline: 2px solid var(--nq-accent, currentColor); outline-offset: 3px; border-radius: 3px; }
.nq-social i { font-size: var(--nq-social-size, 15px); }

/* ── WIDGET: CART ─────────────────────────────────────────────────────────
   Η κλάση .mini-cart είναι ΚΟΙΝΗ με τους Demo headers (το part CSS την ντύνει
   εκεί). Εδώ μόνο η βάση, ώστε να στέκει και σε header που δεν την ξέρει. */
.nq-w-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  line-height: 1;
}
.nq-w-cart:focus-visible { outline: 2px solid var(--nq-accent, currentColor); outline-offset: 3px; border-radius: 3px; }
.nq-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  background: var(--nq-accent, currentColor);
  color: var(--nq-on-accent, #fff);
}

/* ── WIDGET: ΕΙΚΟΝΙΔΙΟ / ΣΥΝΔΕΣΜΟΣ ────────────────────────────────────────
   Το μοτίβο των εικονιδίων κεφαλίδας (λογαριασμός, αγαπημένα…). Χρώμα και
   μέγεθος κληρονομούνται από τη μπάρα — έτσι το ίδιο widget δείχνει σωστά σε
   ανοιχτή και σε σκούρα μπάρα, χωρίς δεύτερη ρύθμιση. */
.nq-w-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  text-decoration: none;
  line-height: 1;
}
.nq-w-icon:hover { opacity: .75; }
.nq-w-icon:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.nq-w-icon i { font-size: var(--nq-icon-size, 18px); }
.nq-w-icon-img { width: var(--nq-icon-size, 18px); height: var(--nq-icon-size, 18px); object-fit: contain; display: block; }
.nq-w-icon-txt { font: inherit; }
/* Προαιρετικός αριθμός, ίδια όψη με το badge του καλαθιού. */
.nq-w-icon-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  background: var(--nq-accent, currentColor);
  color: var(--nq-on-accent, #fff);
}

/* ── WIDGET: CART (πλήρες, με popup) ──────────────────────────────────────
   Βγάζει ΤΟ ΙΔΙΟ markup με το καλάθι της κύριας κεφαλίδας, ώστε μέσα στο
   `#header` να το ντύνει αυτούσιο το part CSS. Εδώ μόνο η ΒΑΣΗ, για να
   δουλεύει και σε άλλη μπάρα (πάνω/κάτω), όπου εκείνοι οι κανόνες δεν φτάνουν.
   Ειδικότητα χαμηλή επίτηδες: όπου υπάρχει part CSS, εκείνο κερδίζει. */
.nq-w-cartfull { position: relative; display: inline-flex; align-items: center; }
/* 🔴 ΓΙΑΤΙ flex ΚΑΙ ΟΧΙ block (ιδιοκτήτης 2026-08-23: «το τοποθετεί λίγο πιο
   ψηλά σε σχέση με τα εικονίδια… δες τον λόγο και φτιάξ' το»).
   ΑΙΤΙΑ, μετρημένη: ο `a.icon-cart-header` είναι **inline**-flex μέσα σε block
   με `line-height:24px`, οπότε κάθεται στη ΓΡΑΜΜΗ ΒΑΣΗΣ. Το κουτί γίνεται 31px
   ενώ ο σύνδεσμος είναι 26px — τα 5px του descender μένουν ΑΠΟ ΚΑΤΩ και το
   εικονίδιο πέφτει 2.5px πάνω από το κέντρο. Το ίδιο συνέβαινε ΚΑΙ στην κύρια
   κεφαλίδα (εικονίδια κέντρο 88.8, καλάθι 86.3) — απλώς φάνηκε πρώτα στο
   κινητό. Το flex καταργεί τη γραμμή κειμένου, άρα δεν υπάρχει baseline να
   σπρώξει τίποτα. ΟΧΙ margin/top: αυτά θα έκρυβαν την αιτία. */
.nq-w-cartfull .cart-design-7 { position: relative; display: flex; align-items: center; }
.nq-w-cartfull .icon-cart-header {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  /* ΧΩΡΙΣ `line-height:1`: το `.cart-total` κληρονομεί το line-height και είναι
     ΑΠΟΛΥΤΑ τοποθετημένο (top:-7px) — με 1 αντί για το 24px του part CSS το
     κουτί του γινόταν 18px αντί 24 και το badge έπεφτε 4px ψηλότερα από το
     διπλανό καλάθι (μετρημένο). Το line-height το ορίζει το part CSS. */
  /* ΧΩΡΙΣ gap: το part CSS δίνει ήδη τα κενά (π.χ. `margin-left:14px` στο
     βελάκι) και ένα δικό μας gap έκανε το widget 6px φαρδύτερο από το καλάθι
     δίπλα του (μετρημένο: 63 vs 57). Τα κενά για τις ΑΛΛΕΣ μπάρες μπαίνουν
     πιο κάτω σε `:where()` — μηδενική ειδικότητα, ώστε το part CSS να κερδίζει
     πάντα όπου ορίζει δικό του. */
  gap: 0;
}
/* 🔴 ΚΑΜΙΑ δική μας απόσταση εδώ. Δοκιμάστηκαν `margin-left` σε caret/total
   για τις άλλες μπάρες και μετακινούσαν το badge μέσα στην κύρια κεφαλίδα:
   το `.cart-total` είναι εκεί ΑΠΟΛΥΤΑ τοποθετημένο από το part CSS, οπότε το
   περιθώριο το έσπρωχνε 6px δεξιά και 4px πάνω σε σχέση με το διπλανό καλάθι
   (μετρημένο). Τις αποστάσεις τις δίνει το part CSS — ίδιες και για τα δύο. */
.nq-w-cartfull .cart-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  background: var(--nq-accent, currentColor);
  color: var(--nq-on-accent, #fff);
}
/* ══ ΕΚΤΟΣ #header ΤΟ WIDGET ΗΤΑΝ ΞΕΚΑΡΦΩΤΟ (ιδιοκτήτης 2026-08-23) ═════════
   «έβαλα mobile header/δεξιά container, πρόσθεσα cart full, δεν το δείχνει
   σωστά μπροστά». Μετρημένη αιτία: το «item(s)» ΦΑΙΝΟΤΑΝ (57×23) και έσπρωχνε
   τον αριθμό δίπλα στο εικονίδιο αντί να κάθεται πάνω του. Το κρύβει κανόνας
   δεμένος με το `#header` (`#header .icon-cart-header .cart-total
   span[data-translate]{display:none}`) — στην κινητή κεφαλίδα η υποδοχή ΔΕΝ
   είναι μέσα στο #header, οπότε δεν έφτανε ποτέ.

   Ίδια λογική με το search bar: η ΕΜΦΑΝΙΣΗ αντιγράφεται μετρημένη, αλλά
   γράφεται ΜΟΝΟ με κλάσεις (ειδικότητα 0,2,0) ώστε μέσα στο #header να
   συνεχίζει να κερδίζει το part CSS (id = 1,2,0) και να μην αλλάξει τίποτα
   εκεί. Μετρημένο πρωτότυπο (#header, 1400px): άγκυρα 57×26, εικονίδιο 26×26
   στο (0,0), `.cart-total` απόλυτο στο top −7 / left 16, badge 16×16, βελάκι
   στο left 40. Οι θέσεις γράφονται ως ΚΛΑΣΜΑΤΑ του μεγέθους του εικονιδίου
   (−7/26 και 16/26), ώστε να μη σπάσουν αν αλλάξει το `--cart-ico`. */
.nq-w-cartfull { --cart-ico: 26px; }
.nq-w-cartfull .icon-cart-header > i { font-size: var(--cart-ico); line-height: 1; }
/* 🔴 ΧΩΡΙΣ `line-height` — ΔΕΥΤΕΡΗ ΦΟΡΑ ΠΟΥ ΔΑΓΚΩΝΕΙ (2026-08-23): το part CSS
   δίνει το 24px στον ΠΡΟΓΟΝΟ και το `.cart-total` το ΚΛΗΡΟΝΟΜΕΙ. Μια δική μας
   ΑΠΕΥΘΕΙΑΣ δήλωση εδώ κερδίζει την κληρονομιά όσο ειδικός κι αν είναι ο
   κανόνας του προγόνου — μετρημένο: το κουτί έγινε 18px αντί 24 και το badge
   ανέβηκε 4px μέσα στην κύρια κεφαλίδα (top −5 αντί −1). */
.nq-w-cartfull .cart-total {
  position: absolute;
  top: calc(var(--cart-ico) * -0.27);
  left: calc(var(--cart-ico) * 0.62);
}
.nq-w-cartfull .cart-total span[data-translate] { display: none; }
.nq-w-cartfull .nq-cart-caret { font-size: 13px; opacity: .7; }
.nq-w-cartfull .cart-wrapper {
  display: none;
  position: absolute;
  /* ΑΠΟΣΤΑΣΗ ΑΠΟ ΤΟ ΕΙΚΟΝΙΔΙΟ (ιδιοκτήτης 2026-08-23: «κολλάει πάνω στο
     εικονίδιο, πρέπει να είναι λίγο πιο κάτω»). Μετρημένο: το πρωτότυπο έχει
     κενό 0 — άρα δεν είναι απόκλιση, είναι επιλογή· γι' αυτό μπαίνει ως
     μεταβλητή και όχι ως καρφωτό νούμερο.
     ⚠️ Το πάνελ ανοίγει με hover: σκέτο κενό θα το έκλεινε μόλις ο δείκτης
     έμπαινε σε αυτό. Το καλύπτει η αόρατη γέφυρα `::before` πιο κάτω, που
     ανήκει στο ίδιο στοιχείο — ο δείκτης δεν βγαίνει ποτέ από το widget. */
  top: calc(100% + var(--cart-gap, 10px));
  right: 0;
  z-index: 60;
  min-width: 280px;
  padding: 15px 20px;
  border-radius: 6px;
  text-align: left;
  background: var(--nq-surface, #fff);
  color: var(--nq-fg, #333);
  /* ΜΕΤΡΗΜΕΝΕΣ από το ΙΔΙΟ πάνελ μέσα στο #header (ιδιοκτήτης 2026-08-23:
     «το popup στο cart υπολείπεται styling σε σχέση με template parts»). Εκεί
     το ντύνει το part CSS με ειδικότητα id· εκτός #header έμενε το πρόχειρο
     δικό μας. Ό,τι διέφερε, ευθυγραμμίστηκε — με κλάσεις μόνο, ώστε μέσα στο
     #header να συνεχίσει να κερδίζει το part CSS. */
  border: 1px solid var(--nq-header-line, #e7e7e7);   /* ήταν: κανένα */
  box-shadow: 0 3px 8px rgba(0, 0, 0, .12);           /* ήταν: 0 8px 24px .14 */
  z-index: 300;                                       /* ήταν: 60 */
}
/* Η ΓΕΦΥΡΑ: αόρατη λωρίδα που γεμίζει το κενό ανάμεσα στο εικονίδιο και το
   πάνελ. Είναι ψευδοστοιχείο ΤΟΥ ΠΑΝΕΛ, άρα ο δείκτης που περνά από πάνω της
   μετράει ως hover μέσα στο widget και το πάνελ δεν κλείνει. */
.nq-w-cartfull .cart-wrapper::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--cart-gap, 10px) - 1px);   /* −1px: και το πλαίσιο */
  height: calc(var(--cart-gap, 10px) + 1px);
}
.nq-w-cartfull:hover .cart-wrapper,
.nq-w-cartfull:focus-within .cart-wrapper { display: block; }
/* Η γραμμή «0 item(s) — View cart»: διαχωριστικό από κάτω και 12px, αλλιώς
   κληρονομούσε τα 16px της μπάρας και έμοιαζε με απλό κείμενο. */
.nq-w-cartfull .total-count {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--nq-header-line, #e7e7e7);
  font-size: 12px;
}
/* Το «0 ITEM(S)» είναι ΚΕΦΑΛΑΙΑ ΚΑΙ ΕΝΤΟΝΟ στο πρωτότυπο — ήταν το τελευταίο
   που ξεχώριζε τα δύο popup (ιδιοκτήτης 2026-08-23). Μετρημένο: 12px / 600 /
   uppercase / line-height 18px. Το `.total-count` μόνο του δεν αρκούσε: το
   κείμενο ζει σε δικό του <span>. */
.nq-w-cartfull .total-count > span {
  font-weight: 600;
  text-transform: uppercase;
  line-height: 18px;
}
.nq-w-cartfull .no-items-in-cart {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 300;      /* μετρημένο· χωρίς αυτό κληρονομούσε 400 και «βάραινε» */
  line-height: 1.5;
  text-align: center;
  color: var(--nq-muted, color-mix(in srgb, currentColor 62%, transparent));
}
.nq-w-cartfull .view-cart {
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}
/* Σε δεξιά/κεντρικό container το πάνελ δεν πρέπει να βγει εκτός οθόνης —
   ίδια λογική με το πάνελ του menu widget. */
.nq-slot-left .nq-w-cartfull .cart-wrapper { right: auto; left: 0; }

/* ── WIDGET: SEARCH ───────────────────────────────────────────────────────
   .nq-search-form είναι ΚΟΙΝΗ κλάση με τους Demo headers. Το πεδίο κληρονομεί
   γραμματοσειρά/χρώμα — αλλιώς ο browser βάζει δικά του και «ξεκολλάει»
   οπτικά από την μπάρα. */
.nq-w-search {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.nq-w-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 6px 8px;
}
.nq-w-search input[type="search"]::placeholder { color: currentColor; opacity: .55; }
/* ΕΣΤΙΑΣΗ: το πεδίο δεν έχει δικό του πλαίσιο, οπότε ο browser ζωγράφιζε το
   δικό του σκούρο δαχτυλίδι ΓΥΡΩ ΑΠΟ ΤΟ INPUT — έμοιαζε ξένο μέσα στη μπάρα.
   ΔΕΝ το σβήνουμε σκέτο (η ορατή εστίαση είναι απαίτηση του project): το
   μεταφέρουμε στη ΦΟΡΜΑ, με το χρώμα τόνου. Το outline ακολουθεί μόνο του τη
   στρογγυλότητα της φόρμας, άρα δουλεύει και στο pill του Demo header. */
.nq-w-search input[type="search"]:focus,
.nq-w-search input[type="search"]:focus-visible { outline: none; box-shadow: none; }
/* 🔴 `currentColor`, ΟΧΙ χρώμα τόνου: μετρήθηκε ότι στην πάνω μπάρα το φόντο
   είναι ΤΟ ΙΔΙΟ μπλε με το accent (rgb(0,136,204)) — το δαχτυλίδι θα ήταν
   αόρατο ακριβώς εκεί που χρειάζεται. Το currentColor είναι το χρώμα κειμένου
   της μπάρας, άρα ΕΞ ΟΡΙΣΜΟΥ αντιθέτει με το φόντο της, όποιο κι αν είναι.

   ΛΕΠΤΟ ΚΑΙ ΗΜΙΔΙΑΦΑΝΕΣ (2026-08-22): με 2px συμπαγές, στην ΑΝΟΙΧΤΗ κάτω
   μπάρα το currentColor είναι σχεδόν μαύρο και διαβαζόταν ως «μαύρο κουτί
   του browser» — ακριβώς αυτό που θέλαμε να φύγει. 1px στο 65% κρατά την
   ορατή εστίαση αλλά μοιάζει με σχεδιασμένη ένδειξη, όχι με προεπιλογή. */
.nq-w-search:focus-within {
  outline: 1px solid color-mix(in srgb, currentColor 65%, transparent);
  outline-offset: 3px;
}
.nq-w-search button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
}

/* ── WIDGET: LANGUAGE SWITCHER ────────────────────────────────────────────
   ΒΑΣΗ ΜΟΝΟ. Ο διακοσμημένος switcher του Header Demo 1 ζει στο part CSS
   (`#Top_header .nq-lang…`) και κερδίζει πάντα σε ειδικότητα (id). Αυτό εδώ
   υπάρχει ώστε ο switcher να δουλεύει ΚΑΙ σε container άλλης μπάρας: χωρίς
   αυτό, η λίστα θα ήταν μονίμως ορατή και άστοιχη.
   Το `.nq-open` το βάζει το lang-switcher.js· το animation του «Popup Effect»
   (nqSwitchIn) το εκπέμπει το skin_lib. */
.nq-lang { position: relative; display: inline-flex; align-items: center; }
.nq-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  padding: 4px 2px;
}
.nq-lang-btn img { display: block; flex: 0 0 auto; }
.nq-lang-btn i { font-size: 13px; opacity: .7; }
.nq-lang-list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: none;
  min-width: 150px;
  margin: 0;
  padding: 6px;
  border-radius: 6px;
  background: var(--nq-surface, #fff);
  color: var(--nq-fg, #333);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
.nq-lang.nq-open .nq-lang-list { display: block; }
.nq-lang-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.nq-lang-list a:hover { background: rgba(0, 0, 0, .06); }

/* ── WIDGET: MENU ─────────────────────────────────────────────────────────
   Το widget «menu» βγάζει το ΙΔΙΟ ul.nq-nav με τα κανονικά μενού, οπότε το
   ντύνει ήδη το theme.css (.nq-nav/.nq-nav-link/.nq-subnav). Δεν επαναλαμβάνουμε
   τίποτα εδώ — μόνο η φροντίδα ότι μέσα σε container δεν σπρώχνει τα υπόλοιπα
   items (το .nq-nav-wrap του κελύφους έχει margin-left:auto· εδώ δεν ισχύει).
   ΙΔΙΟΣ ΛΟΓΟΣ ΜΕ ΠΑΝΩ για το nowrap: σε μπάρα σταθερού ύψους η δεύτερη σειρά
   είναι αόρατη. Με .nq-slot-wrap επιτρέπεται ρητά. */
.nq-slot-list .nq-nav { flex-wrap: nowrap; }
.nq-slot-wrap .nq-nav { flex-wrap: wrap; }

/* ΤΟ WIDGET ΚΛΗΡΟΝΟΜΕΙ ΤΟ ΜΕΓΕΘΟΣ ΤΗΣ ΜΠΑΡΑΣ ΤΟΥ (2026-08-22).
   Το `.nq-nav-link` του theme.css είναι 15px — το μέγεθος του ΚΥΡΙΟΥ μενού
   της σελίδας. Μέσα σε πάνω μπάρα 12px φαινόταν δυσανάλογα μεγάλο, και η
   «προεπιλογή της μπάρας» δεν σήμαινε τίποτα για τα widgets.
   Ειδικότητα: (0,2,0) — νικά το `.nq-nav-link` (0,1,0), ΧΑΝΕΙ από part CSS
   τύπου `#Top_header .nq-ptop-nav a` (1,1,1), άρα οι Demo headers που ορίζουν
   ρητά μεγέθη μένουν ανέπαφοι. */
.nq-slot-list .nq-nav-link { font-size: inherit; }

/* ══ WIDGET MENU: ΜΠΑΡΑ ή DROPDOWN, ΑΝΑ ΑΝΑΛΥΣΗ (2026-08-22) ══════════════
   Το widget βγάζει ΠΑΝΤΑ κουμπί + λίστα· εδώ αποφασίζεται τι φαίνεται.
   🔴 ΜΕ ΜΕΤΑΒΛΗΤΕΣ, ΟΧΙ ΜΕ ΕΠΑΝΑΛΗΨΗ ΚΑΝΟΝΩΝ: οι κανόνες γράφονται ΜΙΑ φορά
   και διαβάζουν vars· κάθε ζώνη απλώς γυρίζει τις vars μέσα σε media query.
   Αλλιώς το ίδιο μπλοκ θα γραφόταν 5 φορές και θα ξέφευγε με την πρώτη αλλαγή. */
.nq-wmenu { position: relative; min-width: 0; }

.nq-wmenu > .nq-wmenu-btn {
  display: var(--wm-btn, none);
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  padding: 4px 2px;
}
.nq-wmenu > .nq-wmenu-btn i { font-size: 13px; opacity: .7; }

/* Η ίδια η λίστα: μπάρα (προεπιλογή) ή πάνελ που πέφτει από κάτω. */
.nq-wmenu > .nq-nav {
  display: var(--wm-list, flex);
  flex-direction: var(--wm-dir, row);
  position: var(--wm-pos, static);
  top: 100%;
  left: 0;
  z-index: var(--wm-z, auto);
  min-width: var(--wm-minw, 0);
  padding: var(--wm-pad, 0);
  border-radius: var(--wm-radius, 0);
  background: var(--wm-bg, transparent);
  color: var(--wm-fg, inherit);
  box-shadow: var(--wm-shadow, none);
}
.nq-wmenu.nq-open > .nq-nav { display: var(--wm-list-open, flex); }

/* Οι τιμές της κατάστασης «dropdown» — ένα σημείο αλήθειας. */
.nq-wmenu-drop {
  --wm-btn: inline-flex; --wm-list: none; --wm-list-open: block;
  --wm-dir: column; --wm-pos: absolute; --wm-z: 60; --wm-minw: 210px;
  --wm-pad: 6px; --wm-radius: 6px;
  --wm-bg: var(--nq-surface, #fff); --wm-fg: var(--nq-fg, #333); --nsep-h: 0;
  --wm-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
/* …και ΑΝΑ ΖΩΝΗ (ίδιες με το Styling: XL ≥1400 · Desktop 992–1399.98 ·
   Tablet 768–991.98 · Κινητό ≤767.98). */
@media (min-width: 1400px) { .nq-wmenu-drop-xl {
  --wm-btn: inline-flex; --wm-list: none; --wm-list-open: block; --wm-dir: column;
  --wm-pos: absolute; --wm-z: 60; --wm-minw: 210px; --wm-pad: 6px; --wm-radius: 6px;
  --wm-bg: var(--nq-surface, #fff); --wm-fg: var(--nq-fg, #333); --nsep-h: 0; --wm-shadow: 0 8px 24px rgba(0,0,0,.14); } }
@media (min-width: 992px) and (max-width: 1399.98px) { .nq-wmenu-drop-desktop {
  --wm-btn: inline-flex; --wm-list: none; --wm-list-open: block; --wm-dir: column;
  --wm-pos: absolute; --wm-z: 60; --wm-minw: 210px; --wm-pad: 6px; --wm-radius: 6px;
  --wm-bg: var(--nq-surface, #fff); --wm-fg: var(--nq-fg, #333); --nsep-h: 0; --wm-shadow: 0 8px 24px rgba(0,0,0,.14); } }
@media (min-width: 768px) and (max-width: 991.98px) { .nq-wmenu-drop-tablet {
  --wm-btn: inline-flex; --wm-list: none; --wm-list-open: block; --wm-dir: column;
  --wm-pos: absolute; --wm-z: 60; --wm-minw: 210px; --wm-pad: 6px; --wm-radius: 6px;
  --wm-bg: var(--nq-surface, #fff); --wm-fg: var(--nq-fg, #333); --nsep-h: 0; --wm-shadow: 0 8px 24px rgba(0,0,0,.14); } }
@media (max-width: 767.98px) { .nq-wmenu-drop-mobile {
  --wm-btn: inline-flex; --wm-list: none; --wm-list-open: block; --wm-dir: column;
  --wm-pos: absolute; --wm-z: 60; --wm-minw: 210px; --wm-pad: 6px; --wm-radius: 6px;
  --wm-bg: var(--nq-surface, #fff); --wm-fg: var(--nq-fg, #333); --nsep-h: 0; --wm-shadow: 0 8px 24px rgba(0,0,0,.14); } }

/* ΑΠΟ ΠΟΙΑ ΜΕΡΙΑ ΑΝΟΙΓΕΙ ΤΟ ΠΑΝΕΛ — από την πλευρά του container.
   Μετρημένο: σε container δεξιά, με `left:0`, το πάνελ ξεκινούσε στο x=841 σε
   πλάτος 900 και έβγαινε ΕΚΤΟΣ οθόνης. Η πλευρά την ξέρουμε ήδη από την κλάση
   του slot, οπότε δεν χρειάζεται JS ούτε μέτρηση θέσης. */
.nq-slot-right .nq-wmenu > .nq-nav { left: auto; right: 0; }
.nq-slot-center .nq-wmenu > .nq-nav { left: 50%; transform: translateX(-50%); }

/* ΜΕΣΑ ΣΤΟ ΠΑΝΕΛ: τα items στοιβάζονται και τα ΥΠΟΜΕΝΟΥ ανοίγουν INLINE
   (απόφαση ιδιοκτήτη: «όπως ο language switcher»). Το theme.css τα έχει
   absolute + hover — εδώ αναιρείται ΜΟΝΟ όταν είμαστε σε πάνελ, γι' αυτό ο
   φρουρός `[style*=]`-free: χρησιμοποιούμε τη μεταβλητή θέσης του πάνελ. */
.nq-wmenu > .nq-nav > li { width: 100%; }

/* 🔴 ΧΡΩΜΑ ΚΕΙΜΕΝΟΥ ΜΟΝΟ ΟΤΑΝ ΕΙΝΑΙ ΑΝΟΙΧΤΟ ΠΑΝΕΛ. Τα links κρατούν το χρώμα
   της κεφαλίδας (`header .nq-nav-link` = ανοιχτό γκρι) και πάνω στο λευκό
   πάνελ ήταν σχεδόν αόρατα (μετρημένο στο screenshot).
   Ο φρουρός είναι το `.nq-open` και ΟΧΙ οι κλάσεις ζώνης: εκείνες υπάρχουν
   πάντα στο στοιχείο (αλλάζουν μόνο οι μεταβλητές ανά media), οπότε κανόνας
   πάνω τους θα άλλαζε το χρώμα ΚΑΙ στη μπάρα. Το πάνελ ανοίγει μόνο με το
   κουμπί, που σε λειτουργία μπάρας είναι display:none. */
.nq-wmenu.nq-open > .nq-nav .nq-nav-link { color: var(--wm-fg, inherit); white-space: nowrap; }
.nq-wmenu.nq-open > .nq-nav .nq-nav-link:hover { background: rgba(0, 0, 0, .06); }
.nq-wmenu.nq-open > .nq-nav .nq-nav-caret { opacity: .5; }
.nq-wmenu-drop > .nq-nav .nq-subnav,
.nq-wmenu-drop-xl > .nq-nav .nq-subnav,
.nq-wmenu-drop-desktop > .nq-nav .nq-subnav,
.nq-wmenu-drop-tablet > .nq-nav .nq-subnav,
.nq-wmenu-drop-mobile > .nq-nav .nq-subnav {
  position: static; display: none; opacity: 1; visibility: visible; transform: none;
  min-width: 0; padding: 2px 0 2px 14px; border: 0; box-shadow: none; background: transparent;
}
.nq-wmenu-drop > .nq-nav .nq-nav-item.nq-open > .nq-subnav,
.nq-wmenu-drop-xl > .nq-nav .nq-nav-item.nq-open > .nq-subnav,
.nq-wmenu-drop-desktop > .nq-nav .nq-nav-item.nq-open > .nq-subnav,
.nq-wmenu-drop-tablet > .nq-nav .nq-nav-item.nq-open > .nq-subnav,
.nq-wmenu-drop-mobile > .nq-nav .nq-nav-item.nq-open > .nq-subnav { display: block; }
/* Το κουμπί υπομενού (το χειρίζεται ήδη το theme.js) πρέπει να φαίνεται εδώ. */
.nq-wmenu-drop > .nq-nav .nq-sub-toggle,
.nq-wmenu-drop-xl > .nq-nav .nq-sub-toggle,
.nq-wmenu-drop-desktop > .nq-nav .nq-sub-toggle,
.nq-wmenu-drop-tablet > .nq-nav .nq-sub-toggle,
.nq-wmenu-drop-mobile > .nq-nav .nq-sub-toggle {
  display: block; position: absolute; right: 4px; top: 4px; width: 28px; height: 28px;
  border: 0; background: transparent; cursor: pointer;
}
.nq-wmenu > .nq-nav .nq-nav-item { position: relative; }

/* ── ΣΤΕΝΕΣ ΟΘΟΝΕΣ ────────────────────────────────────────────────────────
   Μικρότερα κενά όταν τα items στριμώχνονται· καμία αλλαγή σε ταυτότητα. */
@media (max-width: 575.98px) {
  .nq-slot-list { gap: var(--nq-slot-gap-sm, 12px); }
  .nq-slot-sep > li + li::before { margin-right: var(--nq-slot-gap-sm, 12px); }
}

/* ── WIDGET: SEARCH BAR (πλήρες search της κύριας κεφαλίδας) ──────────────
   ΤΙ ΕΙΝΑΙ: το `[nq_widget type="search_full"]` — το πεδίο αναζήτησης με τον
   επιλογέα κατηγορίας και το στρογγυλό pill, όπως στο main header του
   Header Demo 1. Το μικρό (`minisearch`) μένει ως έχει, από πάνω.

   ΓΙΑΤΙ ΞΕΧΩΡΙΣΤΕΣ ΚΛΑΣΕΙΣ (`nq-sb-*` αντί για `nq-search-*`): ο ιδιοκτήτης
   το ζήτησε ρητά — «πιθανόν με άλλες class για να μην συγκρούεται με το
   υπάρχον». Το part CSS του Demo 1 ντύνει τις δικές του `#header
   .nq-search-*` με ειδικότητα id· αν το widget κρατούσε τα ίδια ονόματα, θα
   κληρονομούσε ΜΟΝΟ μέσα στο #header και θα ήταν άστυλο παντού αλλού, ενώ
   ταυτόχρονα θα άλλαζε την εμφάνιση του υπάρχοντος header.

   ΟΙ ΤΙΜΕΣ ΕΙΝΑΙ ΜΕΤΡΗΜΕΝΕΣ από το ζωντανό Demo 1 (1500px, /8):
     φόρμα 40px / radius 30px / bg rgb(247,247,247) / max-width 567px
     input padding-left 20px, 16px, rgb(34,37,41)
     κουμπί 46×40, radius 0 30px 30px 0, rgb(96,102,105)
     κατηγορία 40px, padding 0 15px, 13px, rgb(119,119,119),
               γραμμές rgba(203,202,202,.4), βελάκι 12px με 8px margin
     λίστα min-width 138px, max-height 250px, σκιά 0 0 3px rgba(0,0,0,.15)
     σύνδεσμοι 6px/8px, 12px/18px

   🔴 ΤΑ ΧΡΩΜΑΤΑ ΔΕΝ ΓΡΑΦΤΗΚΑΝ ΚΑΡΦΩΤΑ (μόνιμος κανόνας ιδιοκτήτη): κάθε
   μετρημένη τιμή ξαναγράφτηκε ως ποσοστό του `currentColor` — δηλαδή του
   χρώματος κειμένου της μπάρας — ώστε το ίδιο widget να δουλεύει και σε
   σκούρα μπάρα. Σε λευκό φόντο βγάζουν ΤΙΣ ΙΔΙΕΣ τιμές (υπολογισμένο:
   4%→246, 8%→230, 62%→118, 72%→96). Ό,τι θέλεις σταθερό, δώσε το με τη
   μεταβλητή δίπλα.

   ΤΙ ΔΕΝ ΑΝΤΙΓΡΑΦΤΗΚΕ: τα `margin-left:93px` / `margin-right: clamp(…)` του
   Demo 1. Δεν είναι εμφάνιση του search — είναι η ΘΕΣΗ του μέσα σε εκείνη
   την κεφαλίδα (απόσταση από το λογότυπο). Στους Containers τη θέση την
   ορίζει ο container, όχι το CSS (κανόνας «Διάταξη = builder, όχι CSS»).

   ΔΙΑΤΑΞΗ: flex, ΟΧΙ absolute όπως το πρωτότυπο. Εκεί το input είχε
   `padding-right:200px` και η κατηγορία `right: calc(clamp(…) + 47px)` —
   νούμερα δεμένα με το πλάτος της λέξης «All Categories» και με τη
   συγκεκριμένη κεφαλίδα. Σε container αυθαίρετου πλάτους θα έσπαγαν. */
.nq-w-searchbar {
  --sb-h: 40px;
  --sb-bg:    var(--nq-search-bg,   color-mix(in srgb, currentColor 4%, transparent));
  --sb-line:  var(--nq-search-line, color-mix(in srgb, currentColor 8%, transparent));
  --sb-muted: var(--nq-muted,       color-mix(in srgb, currentColor 62%, transparent));
  --sb-icon:  color-mix(in srgb, currentColor 72%, transparent);
  --sb-ring:  color-mix(in srgb, var(--nq-accent, #0088cc) 35%, transparent);
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: var(--sb-max, 567px);
  height: var(--sb-h);
  border-radius: calc(var(--sb-h) * .75);
  background: var(--sb-bg);
}
/* Ετικέτα για αναγνώστες οθόνης — ίδια τεχνική με του Demo 1. */
.nq-w-searchbar .nq-sb-lbl {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.nq-w-searchbar .nq-sb-in {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--sb-h);
  padding: 0 0 0 20px;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  outline: none;
}
.nq-w-searchbar .nq-sb-in::placeholder { color: currentColor; opacity: .55; }
/* Ορατή εστίαση, χωρίς το σκούρο default δαχτυλίδι του browser γύρω από το
   input — μεταφέρεται στη φόρμα, όπως και στο μικρό search. */
.nq-w-searchbar:focus-within { box-shadow: 0 0 0 2px var(--sb-ring); }
.nq-w-searchbar .nq-sb-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: var(--sb-h);
  border: 0;
  border-radius: 0 calc(var(--sb-h) * .75) calc(var(--sb-h) * .75) 0;
  color: var(--sb-icon);
  background: transparent;
  cursor: pointer;
  line-height: 1;
}
/* ── Επιλογέας κατηγορίας ── */
/* 🔴 ΟΙ ΓΡΑΜΜΕΣ ΜΠΑΙΝΟΥΝ ΣΤΟ ΠΕΡΙΒΛΗΜΑ, ΟΧΙ ΣΤΟ ΚΟΥΜΠΙ: το `--sb-line` είναι
   ποσοστό του `currentColor`, και το custom property δεν υπολογίζεται εκεί που
   ορίζεται αλλά εκεί που ΧΡΗΣΙΜΟΠΟΙΕΙΤΑΙ. Πάνω στο κουμπί το currentColor
   είναι ήδη το ξεθωριασμένο rgb(119,119,119), οπότε η γραμμή έβγαινε πιο
   ανοιχτή από το πρωτότυπο (μετρημένο 236 αντί για 229). Στο περίβλημα, που
   κρατά το χρώμα της φόρμας, βγαίνει ΑΚΡΙΒΩΣ 229. */
.nq-w-searchbar .nq-sb-cat {
  position: relative;
  flex: 0 0 auto;
  height: var(--sb-h);
  border-left: 1px solid var(--sb-line);
  border-right: 1px solid var(--sb-line);
}
.nq-w-searchbar .nq-sb-cat-btn {
  display: flex;
  align-items: center;
  height: var(--sb-h);
  padding: 0 15px;
  border: 0;
  font: inherit;
  font-size: 13px;
  color: var(--sb-muted);
  background: none;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
}
.nq-w-searchbar .nq-sb-cat-btn:focus-visible { box-shadow: 0 0 0 2px var(--sb-ring); }
.nq-w-searchbar .nq-sb-cat-btn i { margin-left: 8px; font-size: 12px; }
/* Το τρέχον κείμενο κόβεται αντί να σπρώχνει το input σε στενό container. */
.nq-w-searchbar .nq-sb-cat-cur {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: var(--sb-cat-max, 160px);
}
.nq-w-searchbar .nq-sb-cat-list {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 138px;
  max-height: 250px;
  overflow-y: auto;
  margin-top: 1px;
  background: var(--nq-surface, #fff);
  box-shadow: 0 0 3px rgba(0, 0, 0, .15);
  z-index: 300;
}
.nq-w-searchbar .nq-sb-cat.nq-open .nq-sb-cat-list { display: block; }
.nq-w-searchbar .nq-sb-cat-list a {
  display: block;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 18px;
  color: var(--sb-muted);
  text-decoration: none;
}
.nq-w-searchbar .nq-sb-cat-list a:hover { background: rgba(0, 0, 0, .06); }
/* Σε αριστερό container η λίστα δεν πρέπει να βγει εκτός οθόνης — ίδια
   λογική με τα πάνελ του καλαθιού και του menu widget. */
.nq-slot-left .nq-w-searchbar .nq-sb-cat-list { right: auto; left: 0; }

/* ══ ΤΟ ΠΕΔΙΟ ΕΙΝΑΙ ΤΟ ΜΟΝΟ ΕΛΑΣΤΙΚΟ ITEM ΤΗΣ ΥΠΟΔΟΧΗΣ ════════════════════
   ΜΕΤΡΗΜΕΝΟ ΠΡΟΒΛΗΜΑ: οι στήλες που φιλοξενούν υποδοχή έχουν `min-width:
   fit-content` (μπήκε ώστε τα μενού να μη σκεπάζονται από τη διπλανή στήλη).
   Ένα πεδίο 397px μέσα έκανε τη στήλη 810px → οριζόντια μπάρα (1586 > 1500).

   ΔΥΟ ΣΚΕΛΗ, ΚΑΙ ΤΑ ΔΥΟ ΧΡΕΙΑΖΟΝΤΑΙ:
   1) `width:0` στο input. Το «fit-content» μετρά το ΜΕΓΙΣΤΟ περιεχόμενο· με
      μηδενικό πλάτος βάσης, η φόρμα συνεισφέρει μόνο 207px (padding +
      κατηγορία + φακός) αντί για 397. Το πεδίο δεν χάνεται — μεγαλώνει με
      flex-grow όσο υπάρχει χώρος, που είναι και το σωστό για πεδίο κειμένου.
   2) `min-width:0` στη στήλη — ΜΟΝΟ όταν δεν έχει μενού μέσα. Πρώτη δοκιμή
      χωρίς το `:not(:has(.nq-nav))` ξανάφερε ΑΚΡΙΒΩΣ το πρόβλημα που λύνει το
      fit-content: στα 1500 ένα nav item βγήκε 11px έξω από τη στήλη του.

   ΚΑΙ ΤΟ ΜΙΚΡΟ SEARCH παίρνει τα ίδια: μετρήθηκε ότι στα 360px η /8 έβγαζε
   μπάρα (532 > 360) ΚΑΙ ΧΩΡΙΣ το νέο widget — από το `nq-w-search` της πάνω
   μπάρας, για τον ίδιο ακριβώς λόγο.
   Μετά (με το test item μέσα σε γεμάτο container): 1500 ✓, 1200 ✓, 900 ✓,
   500 ✓. Στα 992 και 360 μένει μπάρα που ΥΠΗΡΧΕ ΚΑΙ ΠΡΙΝ (μετρημένο 1127 και
   381 χωρίς το widget) — έρχεται από το γεμάτο top bar, όχι από εδώ. */
.nq-w-searchbar .nq-sb-in,
.nq-w-search input[type="search"] { width: 0; }
.pb-row:has(> .pb-col > .nq-slot) > .pb-col:has(.nq-w-searchbar):not(:has(.nq-nav)),
.pb-row:has(> .pb-col > .nq-slot) > .pb-col:has(.nq-w-search):not(:has(.nq-nav)) { min-width: 0; }
.nq-slot-list > li:has(> .nq-w-searchbar),
.nq-slot-list > li:has(> .nq-w-search) { min-width: 0; flex: 1 1 auto; }

/* ΚΟΛΛΑΕΙ ΣΤΗ ΔΕΞΙΑ ΓΩΝΙΑ ΤΟΥ CONTAINER (ιδιοκτήτης 2026-08-22). Όσο το πεδίο
   μεγαλώνει ελεύθερα, το δεξί του άκρο πέφτει ούτως ή άλλως πάνω στη γωνία
   (μετρημένο: κενό 0 σε 1340/1500/1700/1920). ΔΕΝ ισχύει όμως όταν μπει
   `max="…"`: με 300px έμενε κενό 177px δεξιά. Το `justify-content:flex-end`
   στο item το λύνει (μετρημένο: 177 → 0), χωρίς `margin-left:auto` — το auto
   margin ΜΗΔΕΝΙΖΕΙ το flex-grow και το πεδίο θα κατέρρεε στα 207px. */
.nq-slot-list > li:has(> .nq-w-searchbar) { display: flex; justify-content: flex-end; }
/* ΤΟ ΑΠΟΦΑΣΙΖΕΙ ΤΟ ITEM, ΟΧΙ ΤΟ CSS (ιδιοκτήτης 2026-08-22): «δεν υπάρχει
   τρόπος μέσα από τη σελίδα να δίνουμε στο search position right;». Η
   «Θέση» του popup γράφει `align="left|center"` (το «right» είναι η
   προεπιλογή και δεν γράφεται), ο renderer βάζει την κλάση και μόνο τότε
   αλλάζει κάτι — κανένας άλλος header δεν επηρεάζεται. */
.nq-slot-list > li:has(> .nq-w-searchbar.nq-sb-al-left)   { justify-content: flex-start; }
.nq-slot-list > li:has(> .nq-w-searchbar.nq-sb-al-center) { justify-content: center; }

/* ΣΤΕΝΕΣ ΟΘΟΝΕΣ: το Demo 1 ΔΕΝ έχει μετρήσιμο πρότυπο εδώ — κάτω από 992px
   κρύβει ολόκληρο το #header (μετρημένο: display:none στα 900 και στα 500)
   και δουλεύει η .nq-mob-head. Άρα οι παρακάτω τιμές είναι δικές μας και
   αφορούν ΜΟΝΟ το ίδιο το widget: πιάνει όλο το πλάτος της υποδοχής του και
   ο επιλογέας κατηγορίας στενεύει, ώστε να μένει χώρος για το πεδίο. */
@media (max-width: 991.98px) {
  .nq-w-searchbar { max-width: var(--sb-max-sm, none); }
}
@media (max-width: 575.98px) {
  .nq-w-searchbar .nq-sb-in { padding-left: 14px; }
  .nq-w-searchbar .nq-sb-cat-btn { padding: 0 10px; font-size: 12px; }
  .nq-w-searchbar .nq-sb-cat-cur { max-width: var(--sb-cat-max-sm, 74px); }
}

/* ── WIDGET: BURGER (κουμπί μενού κινητού) ────────────────────────────────
   ΜΕΤΡΗΜΕΝΟ ΠΡΟΒΛΗΜΑ (ιδιοκτήτης 2026-08-23: «γιατί εμφανίζεται τόσο χαμηλά
   σε σχέση με τα άλλα items»): μέσα στη λίστα του container ΟΛΑ κεντράρονταν
   στο 76.0 — και το περίβλημα του burger. Το ίδιο το ΚΟΥΜΠΙ όμως έβγαινε με
   κέντρο 96.0, δηλαδή **20px πιο χαμηλά**.

   ΑΙΤΙΑ: δύο κανόνες της κεφαλίδας παλεύουν πάνω στο `.nq-h1-burger` και
   κερδίζει (σειρά εγγράφου, ίδια ειδικότητα 0-2-0) αυτός που το ξεκαρφώνει
   από τη ροή:
       .nq-h1-burger:not(.nq-sticky *) { position: absolute; top: 15px }
   Γράφτηκε για το κουμπί ΜΕΣΑ ΣΤΟ TEMPLATE PART, όπου το περίβλημα είναι το
   σημείο αναφοράς και η μπάρα έχει συγκεκριμένο ύψος. Σε λίστα container το
   περίβλημα είναι ένα flex κουτί 30px, οπότε το `top:15px` σπρώχνει το κουμπί
   15px κάτω από την κορυφή του — και το absolute το βγάζει από το κεντράρισμα.
   Μαζί ακυρώνουμε και το `transform: translate(4px,5px)` του
   `.nq-mob-head .nq-h1-burger`, που ήταν μικρορύθμιση για την ίδια θέση.

   Η διόρθωση πιάνει ΜΟΝΟ μέσα σε container (`.nq-slot-list`) — οι κεφαλίδες
   που έχουν το κουμπί στο part μένουν ακριβώς όπως είναι. Χρειάζεται 3 κλάσεις
   για να κερδίσει: αυτό το αρχείο φορτώνει ΠΡΙΝ το part CSS και το skin.

   🔴 ΧΡΕΙΑΖΕΤΑΙ `!important` — ΚΑΙ ΕΞΗΓΕΙΤΑΙ: ο κανόνας που καρφώνει το κουμπί
   δεν είναι του theme, τον έγραψε ο ΙΔΙΟΚΤΗΤΗΣ από το Styling και βγαίνει ως
   `position:absolute !important; top:15px !important`. Χωρίς ίδιο όπλο, καμία
   ειδικότητα δεν τον φτάνει. Δεν τον πειράζουμε στην πηγή του: εκεί κρατά τη
   δική του, εγκεκριμένη θέση μέσα στο Template Part. */
.nq-slot-list .nq-h1-burgerwrap { position: relative; }
.nq-slot-list .nq-h1-burgerwrap .nq-h1-burger {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none;
}