/* ================================================================
   CX Header Composer v2.0 — CSS
   
   Architecture:
   ─ 1. Custom Properties  — defaults on .cxh-composer
   ─ 2. Layout             — header / rows / grid system
   ─ 3. Components         — logo, search, actions, badges
   ─ 4. Menu Renderers     — each scoped with data-renderer attribute
   ─ 5. Cart Drawer
   ─ 6. Mobile Drawer
   ─ 7. Autosuggest
   ─ 8. Responsive
   ─ 9. Journal Integration
   
   !important policy: ZERO. Specificity through selectors.
   ================================================================ */

/* ─────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES
   ─────────────────────────────────────────────
   Dynamic values are injected via <style id="cxh-vars"> in header.twig.
   These are the fallback defaults.
*/
.cxh-composer {
    /* Layout */
    --cxh-row-px: 20px;
    --cxh-row-gap: 0px;
    --cxh-item-gap: 8px;
    --cxh-row-height: auto;
    --cxh-cols: 12;
    --cxh-col: 1;
    --cxh-span: 1;

    /* Header */
    --cxh-header-bg: #ffffff;
    --cxh-header-text: #111111;
    --cxh-header-border-color: transparent;
    --cxh-header-border-width: 0px;

    /* Logo */
    --cxh-logo-max-height: 60px;

    /* Icons */
    --cxh-icon-color: currentColor;
    --cxh-icon-size: 22px;

    /* Badge */
    --cxh-badge-bg: #e00000;
    --cxh-badge-text: #ffffff;
    --cxh-badge-size: 18px;

    /* Search */
    --cxh-search-bg: #f5f5f5;
    --cxh-search-text: #111111;
    --cxh-search-border: transparent;
    --cxh-search-radius: 0;
    --cxh-search-height: 38px;

    /* Menu */
    --cxh-menu-bar-bg: transparent;
    --cxh-menu-bar-text: inherit;
    --cxh-menu-bar-height: 44px;
    --cxh-menu-item-px: 18px;
    --cxh-menu-font-size: inherit;
    --cxh-menu-font-weight: inherit;
    --cxh-menu-transform: none;
    --cxh-menu-letter-spacing: normal;
    --cxh-menu-hover-bg: transparent;
    --cxh-menu-hover-text: inherit;
    --cxh-menu-panel-bg: #ffffff;
    --cxh-menu-panel-text: #111111;
    --cxh-menu-panel-shadow: 0 8px 32px rgba(0,0,0,0.12);
    --cxh-menu-panel-radius: 0px;
    --cxh-menu-heading-color: #111111;
    --cxh-menu-link-color: #444444;
    --cxh-menu-link-hover: #111111;

    /* Drawer (mobile) */
    --cxh-drawer-bg: #0a0a0a;
    --cxh-drawer-text: #ffffff;
    --cxh-drawer-width: 320px;
    --cxh-drawer-side: left;
    --cxh-drawer-hover-bg: #1a1a1a;
    --cxh-drawer-hover-text: #ffffff;
    --cxh-drawer-item-height: 52px;
    --cxh-drawer-font-size: 14px;
    --cxh-drawer-font-weight: 600;
    --cxh-drawer-divider: rgba(255,255,255,0.08);

    /* Cart drawer */
    --cxh-cart-drawer-width: 400px;
    --cxh-cart-drawer-bg: #ffffff;
    --cxh-cart-drawer-text: #111111;
    --cxh-cart-btn-bg: #111111;
    --cxh-cart-btn-text: #ffffff;
    --cxh-cart-btn-secondary-bg: transparent;
    --cxh-cart-btn-secondary-text: #111111;
    --cxh-cart-btn-secondary-border: #cccccc;

    /* Transitions */
    --cxh-trans-speed: 240ms;
    --cxh-trans-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─────────────────────────────────────────────
   2. LAYOUT — RESET & BASE
   ───────────────────────────────────────────── */
.cxh-composer *,
.cxh-composer *::before,
.cxh-composer *::after {
    box-sizing: border-box;
}

.cxh-composer {
    position: relative;
    z-index: 1000;
    font-family: inherit;
    line-height: 1.4;
    color: var(--cxh-header-text);
}
/* Ό,τι έχει hidden δεν αποδίδεται — ανεξάρτητα από το αν το θέμα ορίζει [hidden] (Bootstrap το ορίζει, άλλα όχι) */
.cxh-composer [hidden] { display: none !important; }

/* Desktop / Mobile visibility */
.cxh-composer .cxh-desktop { display: block; }
.cxh-composer .cxh-mobile  { display: none; }

/* ── Per-row grid with vertical subdivisions ──
   Each row is its own grid: 12 columns × N vertical tracks (vrows).
   Items position with grid-column (col/span) AND grid-row (vrow/vspan).
   This lets a control span multiple vertical tracks within a row. */
.cxh-composer .cxh-desktop,
.cxh-composer .cxh-mobile {
    background: var(--cxh-header-bg);
    color: var(--cxh-header-text);
    border: var(--cxh-header-border-width, 0px) solid var(--cxh-header-border-color, transparent) !important;
}

.cxh-composer .cxh-row {
    display: grid;
    /* Κελιά που ΣΕΒΟΝΤΑΙ το περιεχόμενο των «άκαμπτων» στοιχείων (εικονίδια/badges/σημαία/burger):
       το κελί δεν στενεύει κάτω από το min-content τους, άρα ποτέ δεν πέφτουν το ένα πάνω στο
       άλλο ούτε βγαίνουν εκτός οθόνης. Τα ευέλικτα στοιχεία έχουν contain:inline-size (βλ. πιο
       κάτω), οπότε ΔΕΝ μετράνε στο min-content και απορροφούν όλο το στένεμα. */
    grid-template-columns: repeat(var(--cxh-cols, 12), minmax(0, 1fr));   /* fallback: παλιοί browsers χωρίς contain */
    grid-template-rows: repeat(var(--cxh-vrows, 1), auto);
    align-content: stretch;      /* fill row height when set, WITHOUT coupling vrow heights */
    column-gap: var(--cxh-item-gap, 8px);
    row-gap: var(--cxh-row-gap, 0px);
    padding-inline: var(--cxh-row-px, 20px);
}

.cxh-composer .cxh-item {
    grid-column: var(--cxh-col, 1) / span var(--cxh-span, 1);
    grid-row:    var(--cxh-vrow, 1) / span var(--cxh-vspan, 1);
    display: flex;
    align-items: center;
    min-height: 0;
    min-width: 0;
}

/* valign within the item's grid area */
.cxh-composer .cxh-valign-top    { align-items: flex-start; }
.cxh-composer .cxh-valign-bottom { align-items: flex-end; }

/* Alignment helpers */
.cxh-composer .cxh-align-left   { justify-content: flex-start; }
.cxh-composer .cxh-align-center { justify-content: center; }
.cxh-composer .cxh-align-right  { justify-content: flex-end; }

/* ── Σταθερότητα εικονιδίων ──
   «Άκαμπτα» στοιχεία (.cxh-item--rigid από το twig: logo, account/wishlist/cart/burger/actions/
   γλώσσα/social και search σε λειτουργία εικονιδίου) κρατούν το min-content τους → με κελιά
   minmax(min-content,1fr) το grid τούς δίνει πάντα τον χώρο που χρειάζονται.
   ΟΛΑ τα υπόλοιπα (menu/search bar/κείμενο/marquee/εικόνα) παίρνουν contain:inline-size:
   το εγγενές πλάτος τους μετράει ως 0 στο sizing του grid, οπότε δεν «φουσκώνουν» κελιά και
   είναι αυτά που στενεύουν όταν μικραίνει το παράθυρο (το περιεχόμενό τους τυλίγεται / κόβεται /
   έχει ήδη δικό του overflow handling). Το πλάτος τους παραμένει αυτό του κελιού (stretch). */
.cxh-composer .cxh-item--rigid,
.cxh-composer .cxh-item.cxh-source-account,
.cxh-composer .cxh-item.cxh-source-wishlist,
.cxh-composer .cxh-item.cxh-source-cart_icon,
.cxh-composer .cxh-item.cxh-source-burger,
.cxh-composer .cxh-item.cxh-source-actions,
.cxh-composer .cxh-item.cxh-source-social,
.cxh-composer .cxh-item.cxh-source-language { min-width: min-content; }
/* Logo = άκαμπτο (twig: cxh-item--rigid): στο desktop κρατάει ΠΑΝΤΑ το φυσικό του μέγεθος (ύψος από
   --cxh-logo-max-height, πλάτος κατ' αναλογία) — ποτέ δεν συρρικνώνεται σε «σφηνάκι». Τα ποσοστιαία
   max-width αφαιρούνται εδώ ώστε το min-content του να μετράει ίδια σε Chrome και Firefox (βλ. σχόλιο
   για το «κυκλικό» ποσοστό πιο πάνω). Στο κινητό ισχύει ο κανόνας max-width:100% του responsive block. */
.cxh-composer .cxh-desktop .cxh-item--rigid .cxh-logo,
.cxh-composer .cxh-desktop .cxh-item--rigid .cxh-logo img { max-width: none; }
@supports (contain: inline-size) {
    /* --cxh-track-min: το ίδιο ελάχιστο χρησιμοποιεί και το inline grid-template-columns των
       γραμμών με προσαρμοσμένα πλάτη στηλών (twig: minmax(var(--cxh-track-min,0), Xfr)) */
    .cxh-composer .cxh-row { --cxh-track-min: min-content; grid-template-columns: repeat(var(--cxh-cols, 12), minmax(min-content, 1fr)); }
    .cxh-composer .cxh-item:not(.cxh-item--rigid) { contain: inline-size; }
}

/* ── Ομάδες εικονιδίων: ΙΣΕΣ αποστάσεις ──
   Γειτονικά εικονίδια σε συνεχόμενα κελιά (controller: preprocessIconGroups) μπαίνουν σε ένα κοινό
   wrapper .cxh-group που καταλαμβάνει την ένωση των κελιών τους (grid area) και τα τοποθετεί με flex.
   Σε ίσα κελιά grid τα κενά ΔΕΝ μπορούν να βγουν ίσα όταν τα εικονίδια έχουν διαφορετικό πλάτος
   (22px εικονίδιο δίπλα σε 80px πλακάκι) — εδώ το κενό ορίζεται ΑΝΑΜΕΣΑ στα εικονίδια:
   --cxh-icon-gap («Κενό μεταξύ Εικονιδίων», admin → Σχεδιασμός → Spacing).
     --start/--end : συμπαγής ομάδα αριστερά/δεξιά, κενό = --cxh-icon-gap
     --center      : απλώνονται ομοιόμορφα στα κελιά τους (space-around, ίσα ενδιάμεσα κενά, ≥ icon-gap)
     --between     : μικτές στοιχίσεις → ίσα κενά από άκρη σε άκρη
   Το wrapper είναι άκαμπτο (min-content) → στο στένεμα υποχωρούν μενού/κείμενο, όχι τα εικονίδια. */
.cxh-composer .cxh-item.cxh-group {
    display: flex;
    align-items: stretch;             /* τα μέλη γεμίζουν το ύψος → ισχύει το δικό τους valign */
    gap: var(--cxh-icon-gap, 16px);
    min-width: min-content;
}
.cxh-composer .cxh-group--start   { justify-content: flex-start; }
.cxh-composer .cxh-group--center  { justify-content: space-around; }
.cxh-composer .cxh-group--end     { justify-content: flex-end; }
.cxh-composer .cxh-group--between { justify-content: space-between; }
.cxh-composer .cxh-group > .cxh-gi { flex: 0 0 auto; width: auto; min-width: 0; }
/* Μέλος που δεν απέδωσε τίποτα (π.χ. social χωρίς links) δεν «τρώει» κενό */
.cxh-composer .cxh-group > .cxh-gi:not(:has(> *)) { display: none; }
/* Το κενό μετράει από το ΟΡΑΤΟ άκρο: το προεπιλεγμένο οριζόντιο padding των κουμπιών (8px 10px κ.λπ.)
   είναι αόρατος «αέρας» που θα έκανε τα κενά άνισα (π.χ. 40px κουμπί search χωρίς padding δίπλα σε
   σύνδεσμο με 10px) → αφαιρείται μέσα στην ομάδα. Εξαίρεση: .cxh-gi--boxed = το κουμπί έχει δικό του
   ορατό box από το admin (φόντο/περίγραμμα/σκιά/padding, με !important) και μένει ως έχει. */
.cxh-composer .cxh-gi:not(.cxh-gi--boxed) .cxh-action   { padding-inline: 0; }
.cxh-composer .cxh-gi:not(.cxh-gi--boxed) .cxh-lang-btn { padding-inline: 0; }
.cxh-composer .cxh-gi:not(.cxh-gi--boxed) .cxh-burger   { width: auto; padding-inline: 0; }
.cxh-composer .cxh-gi:not(.cxh-gi--boxed) .cxh-search-trigger { min-width: 0; padding: 0; }
.cxh-composer .cxh-gi:not(.cxh-gi--boxed) .cxh-actions > .cxh-action:first-child { padding-left: 0; }
.cxh-composer .cxh-gi:not(.cxh-gi--boxed) .cxh-actions > .cxh-action:last-child  { padding-right: 0; }
/* Μετρητής στη γωνία: χωρίς το padding ο σύνδεσμος = το εικονίδιο → το badge βγαίνει λίγο έξω από τη
   γωνία του (όπως φαινόταν και πριν, όταν καθόταν πάνω στο padding) */
.cxh-composer .cxh-gi:not(.cxh-gi--boxed) .cxh-action:not([data-cxh-badge-pos="inline"]) .cxh-badge,
.cxh-composer .cxh-gi:not(.cxh-gi--boxed) .cxh-action:not([data-cxh-badge-pos="inline"]) .cxh-mini-badge { right: -8px; }

/* ─────────────────────────────────────────────
   3. COMPONENTS
   ───────────────────────────────────────────── */

/* Logo */
.cxh-composer .cxh-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}
.cxh-composer .cxh-logo { max-width: 100%; min-width: 0; }
.cxh-composer .cxh-logo img {
    max-height: var(--cxh-logo-max-height);
    max-width: 100%;          /* ποτέ πιο πλατύ από το κελί του → δεν «χύνεται» πάνω στα διπλανά στοιχεία */
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
/* Εικόνα header (στοιχείο «Εικόνα»): ίδιος κανόνας — μένει μέσα στο κελί της */
.cxh-composer .cxh-source-image img, .cxh-composer .cxh-custom-image img { max-width: 100%; height: auto; }
/* Defensive: themes (e.g. Journal) sometimes add a border/outline to header
   images, which then inherits currentColor (= header text colour). Neutralise
   it so the logo never picks up the text colour as a border. */
.cxh-composer .cxh-logo,
.cxh-composer .cxh-logo img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.cxh-composer .cxh-logo-text {
    font-size: 1.25rem;
    font-weight: 700;
}

/* Actions */
.cxh-composer .cxh-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.cxh-composer .cxh-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cxh-icon-color);
    text-decoration: none;
    transition: background var(--cxh-trans-speed) var(--cxh-trans-ease);
}
.cxh-composer .cxh-action .cxh-icon,
.cxh-composer .cxh-burger .cxh-icon {
    width: var(--cxh-icon-size);
    height: var(--cxh-icon-size);
    flex-shrink: 0;
}
/* ── Cross-browser (Firefox): εικονίδια & σημαία ΧΩΡΙΣ ποσοστιαίο max-width ──
   Τα θέματα (Journal/Bootstrap) δίνουν γενικά img{max-width:100%}. Ένα ΠΟΣΟΣΤΙΑΙΟ max-width
   μέσα σε κελί/στοιχείο που μετριέται από το περιεχόμενό του (min-content: κελιά κινητού
   minmax(min-content,1fr), items με min-width:min-content) είναι «κυκλικό» (CSS Sizing 3
   §5.2.1). Ο Firefox το λογαριάζει ως ΜΗΔΕΝ όταν μετράει το ελάχιστο πλάτος: το κελί μένει
   στενό, το εικονίδιο «χύνεται» πάνω στο διπλανό, και η σημαία κόβεται κατά πλάτος (π.χ.
   24×40 αντί 40×40 → όρθιο «χάπι» αντί για κύκλο). Chrome/Edge/Safari αγνοούν το ποσοστό σε
   αυτή τη μέτρηση, γι' αυτό εκεί φαίνεται σωστά. Τα εικονίδια έχουν πάντα ρητό μέγεθος σε px,
   οπότε δεν χρειάζονται κανένα ποσοστιαίο όριο — το αφαιρούμε ρητά (με !important, γιατί τα
   θέματα το δίνουν και με βαθιούς selectors). Logo/Εικόνα ΔΕΝ αγγίζονται: εκεί το max-width:100%
   είναι ηθελημένο. */
.cxh-composer img.cxh-icon,
.cxh-composer svg.cxh-icon,
.cxh-composer .cxh-lang-flag,
.cxh-composer .cxh-search-btn img,
.cxh-composer .cxh-search-btn svg,
.cxh-composer .cxh-acc-ic {
    max-width: none !important;
    max-height: none !important;
    flex-shrink: 0;
}
.cxh-composer .cxh-action-label {
    white-space: nowrap;
}
/* Label position relative to the icon */
.cxh-composer [data-cxh-label-pos="right"]  { flex-direction: row; }
.cxh-composer [data-cxh-label-pos="left"]   { flex-direction: row-reverse; }
.cxh-composer [data-cxh-label-pos="bottom"] { flex-direction: column; }
.cxh-composer [data-cxh-label-pos="top"]    { flex-direction: column-reverse; }

/* Badge */
.cxh-composer .cxh-badge,
.cxh-composer .cxh-mini-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: var(--cxh-badge-size);
    height: var(--cxh-badge-size);
    padding: 0 4px;
    border-radius: 99px;
    background: var(--cxh-badge-bg);
    color: var(--cxh-badge-text);
    font-size: 11px;
    font-weight: 700;
    line-height: var(--cxh-badge-size);
    text-align: center;
    pointer-events: none;
    transition: opacity var(--cxh-trans-speed);
}
.cxh-composer .cxh-badge.is-empty,
.cxh-composer .cxh-mini-badge.is-empty {
    opacity: 0;
    pointer-events: none;
}
/* Μετρητής «Δείχνει 0»: το badge μένει ορατό και στο μηδέν */
.cxh-composer .cxh-action[data-cxh-badge-zero="show"] .cxh-badge.is-empty,
.cxh-composer .cxh-action[data-cxh-badge-zero="show"] .cxh-mini-badge.is-empty {
    opacity: 1;
}

/* Μετρητής ΔΙΠΛΑ στο εικονίδιο (item.badge_pos = inline): εικονίδιο + αριθμός σε μία
   γραμμή μέσα σε ένα «πλακάκι» (.cxh-action-chip). Το πλακάκι παίρνει το box της
   καρτέλας «Στυλ Εικονιδίου» (φόντο/border/radius/padding) → pill· ο αριθμός χάνει το
   κόκκινο κυκλάκι και κληρονομεί το χρώμα (η καρτέλα «Μετρητής» τον ντύνει). */
.cxh-composer .cxh-action-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--cxh-badge-gap, 6px);
    flex-shrink: 0;
    line-height: 1;
}
.cxh-composer .cxh-action[data-cxh-badge-pos="inline"] .cxh-badge,
.cxh-composer .cxh-action[data-cxh-badge-pos="inline"] .cxh-mini-badge {
    position: static;
    top: auto;
    right: auto;
    min-width: 0;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: 13px;
    line-height: 1;
    transition: none;
}
.cxh-composer .cxh-action[data-cxh-badge-pos="inline"] .cxh-badge.is-empty,
.cxh-composer .cxh-action[data-cxh-badge-pos="inline"] .cxh-mini-badge.is-empty {
    display: none;
}
.cxh-composer .cxh-action[data-cxh-badge-pos="inline"][data-cxh-badge-zero="show"] .cxh-badge.is-empty,
.cxh-composer .cxh-action[data-cxh-badge-pos="inline"][data-cxh-badge-zero="show"] .cxh-mini-badge.is-empty {
    display: inline-block;
}

/* Εικονίδιο «γεμάτο» όταν ο μετρητής > 0 (item.badge_full): data-cxh-has=1/0 το ενημερώνει το JS.
   fill = το ίδιο svg γεμίζει με το χρώμα του · icon = δεύτερο εικονίδιο (.cxh-icon-state--full). */
.cxh-composer .cxh-action[data-cxh-full="fill"][data-cxh-has="1"] svg,
.cxh-composer .cxh-action[data-cxh-full="fill"][data-cxh-has="1"] svg * {
    fill: currentColor;
}
.cxh-composer .cxh-icon-state {
    display: contents;
}
.cxh-composer .cxh-action[data-cxh-has="1"] .cxh-icon-state--empty,
.cxh-composer .cxh-action:not([data-cxh-has="1"]) .cxh-icon-state--full {
    display: none;
}

/* Burger */
.cxh-composer .cxh-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
}
.cxh-composer .cxh-burger-lines {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.cxh-composer .cxh-burger--rich {
    width: auto;
    height: auto;
    gap: 6px;
    padding: 8px 10px;
}
.cxh-composer .cxh-burger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform var(--cxh-trans-speed), opacity var(--cxh-trans-speed);
}
.cxh-composer .cxh-burger[aria-expanded="true"] .cxh-burger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.cxh-composer .cxh-burger[aria-expanded="true"] .cxh-burger-line:nth-child(2) {
    opacity: 0;
}
.cxh-composer .cxh-burger[aria-expanded="true"] .cxh-burger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Search */
.cxh-composer .cxh-search {
    position: relative;
    width: 100%;
}
.cxh-composer .cxh-search-form {
    display: flex;
    align-items: stretch;            /* το πεδίο & το κουμπί γεμίζουν το ύψος της μπάρας */
    background: var(--cxh-search-bg);
    border: 1px solid var(--cxh-search-border);
    border-radius: var(--cxh-search-radius);
    min-height: var(--cxh-search-height);   /* ελάχιστο: το padding του ΣΤΥΛ μεγαλώνει τη μπάρα αντί να «στραγγαλίζει» το πεδίο */
    box-sizing: border-box;
    overflow: hidden;
    transition: border-color var(--cxh-trans-speed);
}
.cxh-composer .cxh-search-form:focus-within {
    border-color: var(--cxh-header-text);
}
.cxh-composer .cxh-search-input {
    flex: 1;
    height: auto;
    min-height: 0;
    align-self: stretch;
    padding: 0 12px;
    background: none;
    border: none;
    outline: none;
    color: var(--cxh-search-text);
    font-size: 14px;
    font-family: inherit;
    -webkit-appearance: none;
}
.cxh-composer .cxh-search-input::placeholder {
    color: rgba(0,0,0,0.4);
}
/* ── Typewriter placeholder: overlay πάνω από το input (θέση/πλάτος/γραμματοσειρά/χρώμα από JS) ── */
.cxh-composer .cxh-search-form { position: relative; }
.cxh-composer .cxh-tw {
    position: absolute; left: 0; top: 0;
    display: flex; align-items: center; gap: .45em;
    overflow: hidden; white-space: nowrap;
    pointer-events: none; user-select: none;
    z-index: 1;
}
.cxh-composer .cxh-tw[hidden] { display: none; }
.cxh-composer .cxh-tw-ic:empty { display: none; }
.cxh-composer .cxh-tw-ic { display: inline-flex; align-items: center; flex: 0 0 auto; }
.cxh-composer .cxh-tw-icon { display: inline-block; font-size: 1.1em; line-height: 1; }
.cxh-composer .cxh-tw-icon--img, .cxh-composer .cxh-tw-icon--svg svg { width: 1.25em; height: 1.25em; object-fit: contain; display: block; }
.cxh-composer .cxh-tw-text { flex: 0 1 auto; overflow: hidden; }
.cxh-composer .cxh-tw-caret {
    flex: 0 0 auto; width: 1px; height: 1.15em; margin-left: 1px;
    background: currentColor; animation: cxh-tw-blink 1s steps(1) infinite;
}
@keyframes cxh-tw-blink { 50% { opacity: 0; } }
.cxh-composer .cxh-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: auto;
    align-self: stretch;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cxh-search-text);
    flex-shrink: 0;
    transition: opacity var(--cxh-trans-speed);
}
.cxh-composer .cxh-search-btn svg {
    width: 18px;
    height: 18px;
}

/* ── Search as icon → popup (box dropdown / fullscreen overlay) ── */
.cxh-composer .cxh-search--icon {
    width: auto;
}
.cxh-composer .cxh-search-trigger {
    width: auto;
    min-width: 40px;
    height: 40px;
    cursor: pointer;
}
.cxh-composer .cxh-search-trigger svg {
    width: var(--cxh-icon-size);
    height: var(--cxh-icon-size);
}
.cxh-composer .cxh-search-popup[hidden] {
    display: none;
}
.cxh-composer .cxh-search-popup-inner {
    position: relative;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    padding: 12px;
}
.cxh-composer .cxh-search-popup .cxh-search-form {
    width: 100%;
}
/* Τίτλος/κεφαλίδα του popup (Κείμενα → «Τίτλος popup») */
.cxh-composer .cxh-search-popup-title {
    color: var(--cxh-search-text);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    margin: 4px 0 12px;
    text-align: center;
}
/* Το κουμπί ΜΕΣΑ στο popup είναι απλό — το «Στυλ Εικονιδίου» ντύνει μόνο το εικονίδιο-trigger του header */
.cxh-composer .cxh-search-popup .cxh-search-btn {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--cxh-search-text);
    opacity: .7;
}
.cxh-composer .cxh-search-popup .cxh-search-btn:hover { opacity: 1; }
/* autosuggest panel sits inline inside the popup (not absolute) */
.cxh-composer .cxh-search-popup .cxh-autosuggest-panel {
    position: static;
    box-shadow: none;
    margin-top: 8px;
    max-height: 50vh;
}
/* BOX — dropdown anchored below the icon (desktop) */
.cxh-composer .cxh-search-popup--box {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 600;
}
.cxh-composer .cxh-search-popup--box .cxh-search-popup-inner {
    max-width: calc(100vw - 24px);
}
/* FULLSCREEN — dimmed overlay with a centred search box */
.cxh-composer .cxh-search-popup--fullscreen {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 14vh 16px 16px;
}
.cxh-composer .cxh-search-popup--fullscreen .cxh-search-popup-inner {
    width: 100%;
    max-width: 600px;
}
/* close button — corner of the screen, shown in overlay modes only */
.cxh-composer .cxh-search-popup-close {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    z-index: 100001;
    display: none;
}
.cxh-composer .cxh-search-popup--fullscreen .cxh-search-popup-close {
    display: block;
}
/* Mobile: the box popup also becomes a full-screen overlay so it never overflows */
@media (max-width: 575px) {
    .cxh-composer .cxh-search-popup--box {
        position: fixed;
        inset: 0;
        top: 0;
        right: 0;
        z-index: 100000;
        background: rgba(0,0,0,0.55);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 12vh 14px 14px;
    }
    .cxh-composer .cxh-search-popup--box .cxh-search-popup-inner {
        width: 100% !important;
        max-width: 520px;
    }
    .cxh-composer .cxh-search-popup--box .cxh-search-popup-close {
        display: block;
    }
}

/* ── Marquee (scrolling text ticker) ── */
.cxh-composer .cxh-marquee {
    align-self: stretch;          /* fill the cell height so the background covers it */
    position: relative;           /* κρατά το absolute track ΜΕΣΑ στο κελί (όχι σε όλη τη γραμμή) */
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.cxh-composer .cxh-marquee-track {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    will-change: transform;
    animation: cxh-marquee-scroll var(--cxh-mq-dur, 20s) linear infinite;
}
@keyframes cxh-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--cxh-mq-w, 100%))); }
}
.cxh-composer .cxh-marquee-set {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}
.cxh-composer .cxh-marquee-item {
    display: inline-block;
    white-space: nowrap;
}
.cxh-composer .cxh-marquee-sep {
    display: inline-block;
    white-space: nowrap;
    padding: 0 calc(var(--cxh-mq-gap, 32px) / 2);   /* user-controlled gap between phrases */
    opacity: 0.55;
}
.cxh-composer .cxh-marquee[data-cxh-mq-dir="right"] .cxh-marquee-track {
    animation-direction: reverse;
}
.cxh-composer .cxh-marquee[data-cxh-mq-pause="1"]:hover .cxh-marquee-track {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .cxh-composer .cxh-marquee-track { animation: none; transform: none; }
}

/* ── Static text element ── */
.cxh-composer .cxh-text {
    align-self: stretch;          /* fill the cell height so the background covers it */
    width: 100%;
    display: flex;
    align-items: center;
    color: inherit;               /* inherit header text colour unless overridden in Style */
    text-decoration: none;
}
.cxh-composer .cxh-text-inner {
    flex: 1 1 auto;               /* full width so text-align works */
    min-width: 0;
}

/* Social */
.cxh-composer .cxh-social {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}
.cxh-composer .cxh-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: inherit;
    text-decoration: none;
    transition: background var(--cxh-trans-speed);
}
.cxh-composer .cxh-social-link svg {
    width: 18px;
    height: 18px;
}
.cxh-composer .cxh-phone-label { font-size: 13px; font-weight: 600; }

/* ─────────────────────────────────────────────
   4. MENU RENDERERS
   ─────────────────────────────────────────────
   Each renderer is scoped to .cxh-menu[data-renderer="..."].
   No cross-contamination between renderers.
   ───────────────────────────────────────────── */

/* ── Common menu base ── */
.cxh-composer .cxh-menu {
    position: relative;
    align-self: stretch;       /* fill the cell height like marquee/text, so the bar lines up */
    display: flex;
    align-items: stretch;
    width: 100%;
}
.cxh-composer .cxh-menu .cxh-menu-root {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    width: 100%;
    min-height: var(--cxh-menu-bar-height);   /* baseline; grows to fill a taller cell */
    background: var(--cxh-menu-bar-bg);
    color: var(--cxh-menu-bar-text);
}
.cxh-composer .cxh-menu .cxh-menu-item {
    position: relative;
    display: flex;
    align-items: stretch;
}
.cxh-composer .cxh-menu .cxh-menu-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 var(--cxh-menu-item-px);
    color: var(--cxh-menu-bar-text);
    text-decoration: none;
    font-size: var(--cxh-menu-font-size);
    font-weight: var(--cxh-menu-font-weight);
    text-transform: var(--cxh-menu-transform);
    letter-spacing: var(--cxh-menu-letter-spacing);
    white-space: nowrap;
    transition: background var(--cxh-trans-speed), color var(--cxh-trans-speed);
}
.cxh-composer .cxh-menu .cxh-menu-item:hover > .cxh-menu-link {
    background: var(--cxh-menu-hover-bg);
    color: var(--cxh-menu-hover-text);
}

/* Arrow */
.cxh-composer .cxh-menu .cxh-menu-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 2px;
    transition: transform var(--cxh-trans-speed);
}
.cxh-composer .cxh-menu .cxh-menu-item:hover > .cxh-menu-link .cxh-menu-arrow {
    transform: rotate(180deg);
}

/* ── Horizontal Mega Panel ── */
.cxh-composer .cxh-menu[data-renderer="horizontal_mega"] .cxh-menu-panel,
.cxh-composer .cxh-menu[data-renderer="simple_dropdown"] .cxh-menu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background: var(--cxh-menu-panel-bg);
    color: var(--cxh-menu-panel-text);
    box-shadow: var(--cxh-menu-panel-shadow);
    border-radius: var(--cxh-menu-panel-radius);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity var(--cxh-trans-speed) var(--cxh-trans-ease),
        visibility var(--cxh-trans-speed),
        transform var(--cxh-trans-speed) var(--cxh-trans-ease);
}
.cxh-composer .cxh-menu[data-renderer="horizontal_mega"] .cxh-menu-item:hover .cxh-menu-panel,
.cxh-composer .cxh-menu[data-renderer="simple_dropdown"] .cxh-menu-item:hover .cxh-menu-panel,
.cxh-composer .cxh-menu .cxh-menu-item.is-open .cxh-menu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Mega panel — multi-column layout */
.cxh-composer .cxh-menu[data-renderer="horizontal_mega"] .cxh-menu-panel {
    width: max-content;
    max-width: min(720px, 90vw);
}
.cxh-composer .cxh-menu[data-renderer="horizontal_mega"] .cxh-menu-panel-inner {
    display: flex;
    gap: 32px;
    padding: 28px 32px;
}
.cxh-composer .cxh-menu[data-renderer="horizontal_mega"] .cxh-menu-column {
    flex: 1;
    min-width: 120px;
}

/* Simple dropdown — single column */
.cxh-composer .cxh-menu[data-renderer="simple_dropdown"] .cxh-menu-panel {
    min-width: 200px;
}
.cxh-composer .cxh-menu[data-renderer="simple_dropdown"] .cxh-menu-panel-inner {
    padding: 8px 0;
}
.cxh-composer .cxh-menu[data-renderer="simple_dropdown"] .cxh-menu-column {
    width: 100%;
}

/* Shared: heading + link styles in panel */
.cxh-composer .cxh-menu .cxh-menu-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cxh-menu-heading-color);
    text-decoration: none;
    margin-bottom: 10px;
}
.cxh-composer .cxh-menu .cxh-menu-heading-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}
.cxh-composer .cxh-menu .cxh-menu-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cxh-composer .cxh-menu .cxh-menu-link-item {
    display: block;
    padding: 5px 0;
    font-size: 13px;
    color: var(--cxh-menu-link-color);
    text-decoration: none;
    transition: color var(--cxh-trans-speed);
}
.cxh-composer .cxh-menu .cxh-menu-link-item:hover {
    color: var(--cxh-menu-link-hover);
}

/* ── Vertical Flyout ── */
.cxh-composer .cxh-menu[data-renderer="vertical_flyout"] .cxh-menu-root {
    flex-direction: column;
    height: auto;
    width: var(--cxh-drawer-width, 280px);
}
.cxh-composer .cxh-menu[data-renderer="vertical_flyout"] .cxh-menu-item {
    flex-direction: row;
    align-items: stretch;
    border-bottom: 1px solid var(--cxh-drawer-divider);
}
.cxh-composer .cxh-menu[data-renderer="vertical_flyout"] .cxh-menu-link {
    flex: 1;
    justify-content: flex-start;
    padding: 0 16px;
    min-height: var(--cxh-drawer-item-height);
}
.cxh-composer .cxh-menu[data-renderer="vertical_flyout"] .cxh-menu-panel {
    position: absolute;
    top: 0;
    left: 100%;
    min-height: 100%;
    z-index: 100;
}

/* ─────────────────────────────────────────────
   5. CART DRAWER
   ───────────────────────────────────────────── */
.cxh-composer .cxh-cart-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
}
.cxh-composer .cxh-cart-overlay[aria-hidden="false"] { pointer-events: auto; }

.cxh-composer .cxh-cart-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity var(--cxh-trans-speed) var(--cxh-trans-ease);
    cursor: pointer;
}
.cxh-composer .cxh-cart-overlay[aria-hidden="false"] .cxh-cart-backdrop { opacity: 1; }

.cxh-composer .cxh-cart-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--cxh-cart-drawer-width);
    max-width: 92vw;
    background: var(--cxh-cart-drawer-bg);
    color: var(--cxh-cart-drawer-text);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--cxh-trans-speed) var(--cxh-trans-ease);
    box-shadow: -8px 0 40px rgba(0,0,0,0.15);
}
.cxh-composer .cxh-cart-overlay[aria-hidden="false"] .cxh-cart-panel { transform: none; }

.cxh-composer .cxh-cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    flex-shrink: 0;
}
.cxh-composer .cxh-cart-title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cxh-composer .cxh-cart-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    border-radius: 4px;
    opacity: 0.6;
    transition: opacity var(--cxh-trans-speed);
}
.cxh-composer .cxh-cart-close:hover { opacity: 1; }
.cxh-composer .cxh-cart-close svg { width: 20px; height: 20px; }

.cxh-composer .cxh-cart-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

/* Cart items */
.cxh-composer .cxh-cart-items { flex: 1; padding: 12px 0; }
.cxh-composer .cxh-cart-item {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.cxh-composer .cxh-cart-thumb {
    display: block;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f5f5;
}
.cxh-composer .cxh-cart-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cxh-composer .cxh-cart-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cxh-composer .cxh-cart-name {
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}
.cxh-composer .cxh-cart-model,
.cxh-composer .cxh-cart-option {
    font-size: 11px;
    color: rgba(0,0,0,0.5);
}
.cxh-composer .cxh-cart-qty-price {
    font-size: 13px;
    margin-top: auto;
}
.cxh-composer .cxh-cart-sep { margin: 0 4px; opacity: 0.4; }

.cxh-composer .cxh-cart-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.cxh-composer .cxh-cart-total { font-size: 14px; font-weight: 700; }
.cxh-composer .cxh-cart-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.35;
    border-radius: 4px;
    transition: opacity var(--cxh-trans-speed);
}
.cxh-composer .cxh-cart-remove:hover { opacity: 0.8; }
.cxh-composer .cxh-cart-remove svg { width: 14px; height: 14px; }

/* Cart empty */
.cxh-composer .cxh-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 24px;
    text-align: center;
    opacity: 0.5;
    flex: 1;
}
.cxh-composer .cxh-cart-empty svg { width: 48px; height: 48px; }
.cxh-composer .cxh-cart-empty p { font-size: 14px; }

/* Cart foot */
.cxh-composer .cxh-cart-foot {
    border-top: 1px solid rgba(0,0,0,0.08);
    padding: 16px 20px;
    flex-shrink: 0;
}

/* Free shipping bar */
.cxh-composer .cxh-shipping-progress { margin-bottom: 14px; }
.cxh-composer .cxh-shipping-msg { font-size: 12px; margin-bottom: 8px; color: rgba(0,0,0,0.6); }
.cxh-composer .cxh-shipping-done { color: #1a8a3a; font-weight: 600; }
.cxh-composer .cxh-shipping-bar {
    height: 4px;
    background: rgba(0,0,0,0.1);
    border-radius: 2px;
    overflow: hidden;
}
.cxh-composer .cxh-shipping-bar span {
    display: block;
    height: 100%;
    background: #1a8a3a;
    border-radius: 2px;
    transition: width 0.4s var(--cxh-trans-ease);
}

.cxh-composer .cxh-cart-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    margin-bottom: 12px;
}
.cxh-composer .cxh-cart-subtotal strong { font-weight: 800; }

.cxh-composer .cxh-cart-actions { display: flex; flex-direction: column; gap: 8px; }

/* Shared button */
.cxh-composer .cxh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 20px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: opacity var(--cxh-trans-speed);
}
.cxh-composer .cxh-btn:hover { opacity: 0.85; }
.cxh-composer .cxh-btn-primary {
    background: var(--cxh-cart-btn-bg);
    color: var(--cxh-cart-btn-text);
}
.cxh-composer .cxh-btn-secondary {
    background: var(--cxh-cart-btn-secondary-bg);
    color: var(--cxh-cart-btn-secondary-text);
    border-color: var(--cxh-cart-btn-secondary-border);
}

/* ─────────────────────────────────────────────
   6. MOBILE DRAWER
   ───────────────────────────────────────────── */
.cxh-composer .cxh-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 8900;
    pointer-events: none;
}
.cxh-composer .cxh-drawer-overlay[aria-hidden="false"] { pointer-events: auto; }

.cxh-composer .cxh-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: var(--cxh-drawer-backdrop, rgba(0, 0, 0, 0.5));
    opacity: 0;
    transition: opacity var(--cxh-trans-speed) var(--cxh-trans-ease);
    cursor: pointer;
}
.cxh-composer .cxh-drawer-overlay[aria-hidden="false"] .cxh-drawer-backdrop { opacity: 1; }

.cxh-composer .cxh-drawer-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--cxh-drawer-width);
    max-width: 88vw;
    background: var(--cxh-drawer-bg);
    color: var(--cxh-drawer-text);
    display: flex;
    flex-direction: column;
    transform: translateX(-110%);
    transition: transform var(--cxh-trans-speed) var(--cxh-trans-ease);
    overflow: hidden;
}
.cxh-composer .cxh-drawer-overlay[data-cxh-drawer-side="right"] .cxh-drawer-panel {
    left: auto;
    right: 0;
    transform: translateX(110%);
}
.cxh-composer .cxh-drawer-overlay[aria-hidden="false"] .cxh-drawer-panel { transform: none; }

.cxh-composer .cxh-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--cxh-drawer-head-bg, transparent);
    color: var(--cxh-drawer-head-color, inherit);
    border-bottom: 1px solid var(--cxh-drawer-divider);
    flex-shrink: 0;
}
.cxh-composer .cxh-drawer-logo {
    max-height: 36px;
    width: auto;
    display: block;
}
.cxh-composer .cxh-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    border-radius: 4px;
    transition: opacity var(--cxh-trans-speed);
}
.cxh-composer .cxh-drawer-close:hover { opacity: 1; }
.cxh-composer .cxh-drawer-close svg { width: 20px; height: 20px; }

.cxh-composer .cxh-drawer-body {
    position: relative;          /* το ΣΩΣΤΟ containing block για τα sub-panels */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;            /* τίποτα δεν ξεφεύγει οριζόντια — τέλος οι scrollbars */
}
.cxh-composer .cxh-drawer-body > .cxh-drawer-list { overflow-x: hidden; }

.cxh-composer .cxh-drawer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}
.cxh-composer .cxh-drawer-item {
    position: relative;
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--cxh-drawer-divider);
}
.cxh-composer .cxh-drawer-link {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 20px;
    min-height: var(--cxh-drawer-item-height);
    color: var(--cxh-drawer-text);
    text-decoration: none;
    font-size: var(--cxh-drawer-font-size);
    font-weight: var(--cxh-drawer-font-weight);
    transition: background var(--cxh-trans-speed), color var(--cxh-trans-speed);
}
.cxh-composer .cxh-drawer-link:hover {
    background: var(--cxh-drawer-hover-bg);
    color: var(--cxh-drawer-hover-text);
}
.cxh-composer .cxh-drawer-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    background: none;
    border: none;
    border-left: 1px solid var(--cxh-drawer-divider);
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    transition: background var(--cxh-trans-speed), opacity var(--cxh-trans-speed);
}
.cxh-composer .cxh-drawer-expand:hover { background: var(--cxh-drawer-hover-bg); opacity: 1; }
.cxh-composer .cxh-drawer-expand svg { width: 18px; height: 18px; }

/* Drawer sub-panel */
.cxh-composer .cxh-drawer-sub {
    position: absolute;
    inset: 0;                    /* πλέον ως προς το .cxh-drawer-body (γίνεται re-parent από το JS) */
    z-index: 2;
    background: var(--cxh-drawer-bg);
    color: var(--cxh-drawer-text);
    transform: translateX(100%);
    transition: transform var(--cxh-trans-speed) var(--cxh-trans-ease);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}
.cxh-composer .cxh-drawer-sub.is-open { transform: none; }

.cxh-composer .cxh-drawer-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--cxh-drawer-divider);
    cursor: pointer;
    color: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    width: 100%;
    flex-shrink: 0;
}
.cxh-composer .cxh-drawer-back svg { width: 16px; height: 16px; }
.cxh-composer .cxh-drawer-sub-title {
    display: block;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--cxh-drawer-divider);
    flex-shrink: 0;
}

.cxh-composer .cxh-drawer-footer {
    padding: 20px;
    border-top: 1px solid var(--cxh-drawer-divider);
    flex-shrink: 0;
}
.cxh-composer .cxh-drawer-phone {
    display: block;
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
    opacity: 0.8;
}
.cxh-composer .cxh-drawer-social { display: flex; gap: 6px; }
.cxh-composer .cxh-drawer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: inherit;
    text-decoration: none;
    opacity: 0.7;
    border-radius: 4px;
    transition: opacity var(--cxh-trans-speed);
}
.cxh-composer .cxh-drawer-social a:hover { opacity: 1; }
.cxh-composer .cxh-drawer-social svg { width: 18px; height: 18px; }

/* ─────────────────────────────────────────────
   7. AUTOSUGGEST
   ───────────────────────────────────────────── */
.cxh-composer .cxh-autosuggest-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 500;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    overflow: hidden;
    max-height: 460px;
    display: flex;
    flex-direction: column;
}
/* scrollable body — holds categories + products */
.cxh-composer .cxh-suggest-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}
/* sticky footer link — never scrolls */
.cxh-composer .cxh-suggest-all { flex: 0 0 auto; }
.cxh-composer .cxh-suggest-section { padding: 8px 0; }
.cxh-composer .cxh-suggest-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0,0,0,0.4);
    padding: 4px 16px 6px;
}
.cxh-composer .cxh-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    text-decoration: none;
    color: #111111;
    transition: background 160ms;
}
.cxh-composer .cxh-suggest-item:hover { background: #f5f5f5; }
.cxh-composer .cxh-suggest-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    background: #f0f0f0;
    flex-shrink: 0;
}
.cxh-composer .cxh-suggest-name { font-size: 13px; font-weight: 500; flex: 1; }
.cxh-composer .cxh-suggest-price { font-size: 13px; font-weight: 700; flex-shrink: 0; }
.cxh-composer .cxh-suggest-empty { padding: 16px; text-align: center; font-size: 13px; opacity: 0.5; }
.cxh-composer .cxh-suggest-loading { padding: 16px; text-align: center; font-size: 13px; opacity: 0.5; }

/* ── Rich autosuggest (image-2 style) ── */
/* Categories with breadcrumb path */
.cxh-composer .cxh-suggest-cat-item {
    display: flex; flex-direction: column; gap: 1px;
    padding: 7px 16px; text-decoration: none; color: #111;
    transition: background 140ms;
}
.cxh-composer .cxh-suggest-cat-item:hover { background: #f5f5f5; }
.cxh-composer .cxh-suggest-cat-name { font-size: 13px; font-weight: 600; }
.cxh-composer .cxh-suggest-cat-crumb { font-size: 11px; color: rgba(0,0,0,.45); }

/* Product rows */
.cxh-composer .cxh-suggest-product {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; text-decoration: none; color: #111;
    border-top: 1px solid #f0f0f0; transition: background 140ms;
}
.cxh-composer .cxh-suggest-product:hover { background: #f7f7f7; }
.cxh-composer .cxh-suggest-thumb-wrap {
    width: 56px; height: 56px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #f4f4f4; border-radius: 6px; overflow: hidden;
}
.cxh-composer .cxh-suggest-product .cxh-suggest-thumb {
    width: 56px; height: 56px; object-fit: contain; border-radius: 0; background: transparent;
}
.cxh-composer .cxh-suggest-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cxh-composer .cxh-suggest-info .cxh-suggest-name {
    font-size: 13px; font-weight: 600; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cxh-composer .cxh-suggest-brand { font-size: 12px; color: rgba(0,0,0,.6); font-weight: 500; }
.cxh-composer .cxh-suggest-model { font-size: 11px; color: rgba(0,0,0,.4); }
.cxh-composer .cxh-suggest-product .cxh-suggest-price {
    font-size: 13px; font-weight: 700; white-space: nowrap;
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.2;
}
/* Χρώματα τιμών: admin → «Αναζήτηση» → Χρώματα τιμών (--cxh-suggest-price / -special / -old μέσω #cxh-vars).
   Κενή ρύθμιση = fallback: κανονική κληρονομεί το χρώμα του αποτελέσματος, προσφορά = ίδιο με την κανονική
   (το κόκκινο #d0021b είναι μόνο η αρχική τιμή του πεδίου στο admin), αρχική αχνό γκρι. */
.cxh-composer .cxh-suggest-price-new { color: var(--cxh-suggest-price, currentColor); }
.cxh-composer .cxh-suggest-price--special .cxh-suggest-price-new { color: var(--cxh-suggest-special, var(--cxh-suggest-price, currentColor)); }
.cxh-composer .cxh-suggest-price-old { font-size: 11px; font-weight: 400; text-decoration: line-through; color: var(--cxh-suggest-old, rgba(0,0,0,.45)); }

/* Show-all link */
.cxh-composer .cxh-suggest-all {
    display: block; text-align: center; padding: 12px 16px;
    font-size: 13px; font-weight: 700; color: #111;
    text-decoration: none; border-top: 1px solid #eee; background: #fafafa;
    transition: background 140ms;
}
.cxh-composer .cxh-suggest-all:hover { background: #f0f0f0; }

/* ─────────────────────────────────────────────
   8. RESPONSIVE
   ───────────────────────────────────────────── */
/* Το desktop↔mobile switch γίνεται πλέον δυναμικά στο <style id="cxh-vars">
   (ρυθμιζόμενο όριο) — εδώ μένουν μόνο τα cosmetic των στενών οθονών. */
@media (max-width: 767px) {

    /* Στα κινητά τα κενά στηλών προεπιλέγονται μικρότερα (8px × 23 κενά = μισή οθόνη!) */
    .cxh-composer .cxh-row { column-gap: var(--cxh-item-gap, 4px); }

    /* Οι στήλες στο κινητό ΔΕΝ συμπιέζονται κάτω από το περιεχόμενό τους:
       το track μεγαλώνει όσο χρειάζεται (τα εικονίδια δεν πατούν ποτέ το διπλανό),
       και οι άδειες στήλες λειτουργούν ως εύκαμπτοι αποστάτες. */
    /* (τα κελιά minmax(min-content,1fr) ισχύουν πλέον για desktop ΚΑΙ κινητό — βλ. .cxh-row) */
    /* Κινητό: το «Κενό στοιχείων» ΔΕΝ μπαίνει ως column-gap (θα το πλήρωναν και οι ΑΔΕΙΕΣ
       στήλες — σε 24 στήλες 23×8px = 184px χαμένα) αλλά ως εσωτερικό πλάγιο padding των ίδιων
       των στοιχείων: μόνο τα πραγματικά στοιχεία «πληρώνουν» κενό, ίδια απόσταση μεταξύ γειτόνων. */
    .cxh-composer .cxh-mobile .cxh-row { column-gap: 0; }
    .cxh-composer .cxh-mobile .cxh-item { padding-inline: calc(var(--cxh-item-gap, 8px) / 2); }
    /* Μέσα σε ομάδα εικονιδίων το κενό το δίνει το gap της ομάδας (--cxh-icon-gap), όχι το padding των μελών */
    .cxh-composer .cxh-mobile .cxh-group > .cxh-gi { padding-inline: 0; }
    /* Κινητό: το ρητό «Πλάτος» της Εικόνας είναι ΜΕΓΙΣΤΟ — ποτέ πιο πλατύ από το κελί της,
       αλλιώς τα min-content κελιά τεντώνουν, η γραμμή ξεχειλίζει και χάνεται το burger. */
    .cxh-composer .cxh-mobile .cxh-source-image img,
    .cxh-composer .cxh-mobile .cxh-logo img { max-width: 100% !important; }

    /* Πιο συμπαγή items στο κινητό */
    .cxh-composer .cxh-mobile .cxh-action   { padding: 8px 4px; gap: 4px; }
    .cxh-composer .cxh-mobile .cxh-lang-btn { padding: 6px 4px; gap: 4px; }
    .cxh-composer .cxh-mobile .cxh-lang-caret { display: none; }

    .cxh-composer .cxh-mobile-search-bar {
        position: relative;
        padding: 10px 16px;
        background: var(--cxh-header-bg);
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    .cxh-composer .cxh-mobile-search-bar .cxh-autosuggest-panel {
        position: absolute;
        top: calc(100% - 10px + 4px);
    }
}

/* ─────────────────────────────────────────────
   9. JOURNAL INTEGRATION
   ───────────────────────────────────────────── */

/* Hide Journal's default desktop header when CX Desktop Composer is on.
   Journal 3 = .desktop-header — τα παλιά selectors (Journal 2) μένουν για συμβατότητα.
   !important: μοναδική εξαίρεση στο zero-!important policy — εδώ παλεύουμε CSS
   ΞΕΝΟΥ θέματος με άγνωστη specificity, όχι δικό μας markup. */
html.cxh-hide-journal-desktop .desktop-header,
html.cxh-hide-journal-desktop #journal-header,
html.cxh-hide-journal-desktop .journal-header,
html.cxh-hide-journal-desktop header.type-1,
html.cxh-hide-journal-desktop header.type-2,
html.cxh-hide-journal-desktop header.type-3 {
    display: none !important;
}

/* Hide Journal's default mobile header when CX Mobile Composer is on (Journal 3 = .mobile-header) */
html.cxh-hide-journal-mobile .mobile-header,
html.cxh-hide-journal-mobile #mobile-nav,
html.cxh-hide-journal-mobile .journal-mobile-menu,
html.cxh-hide-journal-mobile #mobile-header {
    display: none !important;
}

/* Σελίδα μέσα σε iframe (quick-view popup κ.λπ.): ο header δεν εμφανίζεται */
html.cxh-in-frame [data-cxh-root] { display: none !important; }

/* Scroll lock while overlays are open */
html.cxh-lock-scroll { overflow: hidden; }

/* Body offset when sticky header is enabled (set via JS) */
body.cxh-has-sticky { padding-top: var(--cxh-sticky-offset, 0px); }

/* Sticky header */
.cxh-composer.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}


/* Custom image element */
.cxh-composer .cxh-source-image img { display:block; max-width:100%; height:auto; }
.cxh-composer .cxh-custom-image { display:inline-flex; }
.cxh-composer .cxh-align-center.cxh-source-image { justify-content:center; }
.cxh-composer .cxh-align-right.cxh-source-image { justify-content:flex-end; }


/* ══ Menu overflow behaviors ══ */
/* Base: never let items escape the menu_bar cell */
.cxh-composer .cxh-menu { max-width: 100%; overflow: hidden; }

/* WRAP — items flow to a 2nd/3rd line; height grows */
.cxh-composer .cxh-menu[data-overflow="wrap"] { overflow: visible; }
.cxh-composer .cxh-menu[data-overflow="wrap"] .cxh-menu-root {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--cxh-menu-bar-height);
}

/* SCROLL — single line, horizontal scroll */
.cxh-composer .cxh-menu[data-overflow="scroll"] { overflow: hidden; }
.cxh-composer .cxh-menu[data-overflow="scroll"] .cxh-menu-root {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.cxh-composer .cxh-menu[data-overflow="scroll"] .cxh-menu-root::-webkit-scrollbar { height: 4px; }
.cxh-composer .cxh-menu[data-overflow="scroll"] .cxh-menu-root::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.35); border-radius: 4px;
}

/* MORE — single line, JS moves overflow into a dropdown */
.cxh-composer .cxh-menu[data-overflow="more"] { overflow: visible; }
.cxh-composer .cxh-menu[data-overflow="more"] .cxh-menu-root { flex-wrap: nowrap; }

/* "More" button + its dropdown */
.cxh-composer .cxh-menu .cxh-menu-item.cxh-menu-more {
    position: relative;
    display: none !important;       /* beats .cxh-menu .cxh-menu-item display:flex */
    align-items: stretch;
    flex: 0 0 auto;
}
.cxh-composer .cxh-menu .cxh-menu-item.cxh-menu-more.is-visible { display: flex !important; }
.cxh-composer .cxh-menu-more > .cxh-menu-link { cursor: pointer; }
.cxh-composer .cxh-menu-more-panel {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: var(--cxh-menu-panel-bg);
    color: var(--cxh-menu-panel-text);
    box-shadow: var(--cxh-menu-panel-shadow);
    border-radius: var(--cxh-menu-panel-radius);
    padding: 6px 0;
    list-style: none;
    margin: 0;
    z-index: 1000;
    display: none;
}
.cxh-composer .cxh-menu-more.is-open .cxh-menu-more-panel { display: block; }
.cxh-composer .cxh-menu-more-panel .cxh-menu-item { display: block; }
.cxh-composer .cxh-menu-more-panel .cxh-menu-link {
    padding: 8px 16px;
    color: var(--cxh-menu-panel-text);
    white-space: nowrap;
}
.cxh-composer .cxh-menu-more-panel .cxh-menu-link:hover {
    background: var(--cxh-menu-hover-bg);
}


/* ══ "More" dropdown — flicker fix + right-side flyouts ══ */
/* #1 Flicker: keep menu measurable but invisible until JS reflow finishes */
.cxh-composer .cxh-menu[data-overflow="more"]:not(.cxh-ready) {
    visibility: hidden;
}
.cxh-composer .cxh-menu[data-overflow="more"].cxh-ready {
    visibility: visible;
}

/* #2 Items inside the More panel: submenu = clean RIGHT-side flyout,
   controlled ONLY by JS (.is-open). We hard-override the default mega rules. */
.cxh-composer .cxh-menu-more-panel .cxh-menu-item {
    position: relative;
    display: block;
}
.cxh-composer .cxh-menu-more-panel .cxh-menu-item.has-children > .cxh-menu-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cxh-composer .cxh-menu-more-panel .cxh-menu-arrow {
    border-left: 4px solid currentColor;
    border-right: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    margin-left: 6px;
}

/* HARD RESET: every panel inside the More dropdown is hidden by default,
   regardless of the default :hover rules (which use descendant selectors). */
.cxh-composer .cxh-menu[data-renderer] .cxh-menu-more-panel .cxh-menu-panel {
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    left: 100% !important;
    right: auto !important;
    margin: 0 0 0 2px !important;
    width: max-content !important;
    min-width: 220px !important;
    max-width: min(720px, 80vw) !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--cxh-menu-panel-bg, #fff);
    color: var(--cxh-menu-panel-text, #111);
    box-shadow: var(--cxh-menu-panel-shadow, 0 8px 32px rgba(0,0,0,.12));
    border-radius: var(--cxh-menu-panel-radius, 0);
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-6px);
    transition: opacity var(--cxh-trans-speed), visibility var(--cxh-trans-speed), transform var(--cxh-trans-speed);
    z-index: 1002 !important;
}
/* Show ONLY the directly-open item's panel (JS sets .is-open) */
.cxh-composer .cxh-menu[data-renderer] .cxh-menu-more-panel .cxh-menu-item.is-open > .cxh-menu-panel {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0);
}
/* Flip LEFT when flagged */
.cxh-composer .cxh-menu[data-renderer] .cxh-menu-more-panel .cxh-menu-item.flip-left > .cxh-menu-panel {
    left: auto !important;
    right: 100% !important;
    margin: 0 2px 0 0 !important;
    transform: translateX(6px);
}
.cxh-composer .cxh-menu[data-renderer] .cxh-menu-more-panel .cxh-menu-item.flip-left.is-open > .cxh-menu-panel {
    transform: translateX(0);
}
/* Horizontal multi-column layout inside the flyout (ΑΞΕΣΟΥΑΡ | ΠΑΠΟΥΤΣΙΑ | ΡΟΥΧΑ) */
.cxh-composer .cxh-menu[data-renderer] .cxh-menu-more-panel .cxh-menu-panel-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 24px;
    padding: 20px 24px;
    width: auto !important;
    max-width: none !important;
}
.cxh-composer .cxh-menu[data-renderer] .cxh-menu-more-panel .cxh-menu-column { min-width: 120px !important; }

/* FIX #2: hover text inside the white More dropdown must stay dark (not white) */
.cxh-composer .cxh-menu-more-panel .cxh-menu-link {
    color: var(--cxh-menu-panel-text, #111) !important;
}
.cxh-composer .cxh-menu-more-panel .cxh-menu-item:hover > .cxh-menu-link,
.cxh-composer .cxh-menu-more-panel .cxh-menu-item.is-open > .cxh-menu-link {
    background: rgba(0,0,0,.06) !important;
    color: var(--cxh-menu-panel-text, #111) !important;
}
/* headings & link-items inside flyout keep their own panel colors */
.cxh-composer .cxh-menu-more-panel .cxh-menu-heading { color: var(--cxh-menu-heading-color, #111) !important; }
.cxh-composer .cxh-menu-more-panel .cxh-menu-link-item { color: var(--cxh-menu-link-color, #444) !important; }
.cxh-composer .cxh-menu-more-panel .cxh-menu-link-item:hover { color: var(--cxh-menu-link-hover, #111) !important; }


/* ══ Flyout layout toggle (per profile) ══ */
/* Default is horizontal (set above). When data-flyout="vertical": stack columns. */
.cxh-composer .cxh-menu[data-flyout="vertical"] .cxh-menu-more-panel .cxh-menu-panel {
    max-width: 320px !important;
}
.cxh-composer .cxh-menu[data-flyout="vertical"] .cxh-menu-more-panel .cxh-menu-panel-inner {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    padding: 12px 16px;
}
.cxh-composer .cxh-menu[data-flyout="vertical"] .cxh-menu-more-panel .cxh-menu-column {
    min-width: 0 !important;
}


/* ══ Menu bar alignment — align items within the menu cell ══ */
.cxh-composer .cxh-item.cxh-align-left   .cxh-menu .cxh-menu-root { justify-content: flex-start; }
.cxh-composer .cxh-item.cxh-align-center .cxh-menu .cxh-menu-root { justify-content: center; }
.cxh-composer .cxh-item.cxh-align-right  .cxh-menu .cxh-menu-root { justify-content: flex-end; }

/* ── Custom item extras (Phase B): icon, image, badge, label ── */
.cxh-composer .cxh-menu-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 6px;
    display: inline-block;
}
.cxh-composer .cxh-menu-img {
    max-height: 28px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
}
/* When the user sets explicit dimensions (inline width/height on a custom image
   item), drop the default max constraint so those dimensions actually apply.
   Images without inline sizing keep the compact 28px menu-icon behaviour. */
.cxh-composer .cxh-menu-img[style*="width"],
.cxh-composer .cxh-menu-img[style*="height"] {
    max-width: none;
    max-height: none;
}
.cxh-composer .cxh-menu-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 10px;
    background: #e53935;
    color: #fff;
    letter-spacing: .02em;
}
/* badge position variants */
.cxh-composer .cxh-menu-badge--inline { margin-left: 6px; vertical-align: middle; }
.cxh-composer .cxh-menu-badge--super  { margin-left: 2px; vertical-align: super; font-size: 9px; padding: 1px 4px; }
.cxh-composer .cxh-menu-badge--corner {
    position: absolute;
    top: -6px;
    right: -10px;
    margin: 0;
    transform: scale(.92);
}
/* let corner badges anchor to the link */
.cxh-composer .cxh-menu-link,
.cxh-composer .cxh-menu-link-item,
.cxh-composer .cxh-menu-heading { position: relative; }
.cxh-composer .cxh-menu-label {
    cursor: default;
}
.cxh-composer .cxh-menu-link-item.cxh-menu-label,
.cxh-composer .cxh-menu-heading.cxh-menu-label {
    cursor: default;
}

/* ════ Custom graphical mega-panel ════ */
.cxh-composer .cxh-menu .cxh-menu-item.cxh-mi-full { position: static !important; }
.cxh-composer .cxh-menu .cxh-menu-panel.cxh-panel-custom { max-width: min(1100px, 96vw); }
.cxh-composer .cxh-menu .cxh-menu-panel.cxh-pw-auto { width: min(1100px, 96vw); }
.cxh-composer .cxh-menu .cxh-menu-panel.cxh-panel-full { left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; }
/* proportional grid (1fr) so col N of M sits at fraction N/M; gap:0 matches the admin canvas (WYSIWYG) */
.cxh-composer .cxh-prow {
    display: grid;
    grid-template-columns: repeat(var(--cxh-cols, 12), minmax(0, 1fr));
    grid-template-rows: repeat(var(--cxh-vrows, 1), minmax(56px, auto));
    gap: 0;
    padding: 22px 26px;
    align-items: stretch;
}
.cxh-composer .cxh-prow + .cxh-prow { padding-top: 0; }
.cxh-composer .cxh-pcell {
    grid-column: var(--cxh-col, 1) / span var(--cxh-span, 1);
    grid-row: var(--cxh-vrow, 1) / span var(--cxh-vspan, 1);
    min-width: 0;
}
.cxh-composer .cxh-pcell.cxh-pb-category { padding-right: 18px; }
.cxh-composer .cxh-menu .cxh-menu-panel.cxh-panel-custom .cxh-menu-column { min-width: 0; }
/* media + label blocks */
.cxh-composer .cxh-pb-media { display: block; width: 100%; height: 100%; }
.cxh-composer .cxh-pb-media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.cxh-composer .cxh-pb-label { display: flex; flex-direction: column; justify-content: center; height: 100%; gap: 4px; text-decoration: none; color: inherit; }
.cxh-composer .cxh-pb-label-t { font-size: 16px; font-weight: 700; line-height: 1.2; }
.cxh-composer .cxh-pb-label-s { font-size: 12px; opacity: .8; }

/* ══════════════════════════════════════════════════════
   LANGUAGE SWITCHER
   ══════════════════════════════════════════════════════ */
.cxh-composer .cxh-lang { position: relative; display: inline-flex; }
.cxh-composer .cxh-lang-form { display: none; }
.cxh-composer .cxh-lang-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; cursor: pointer;
    font: inherit; color: inherit; line-height: 1.2;
    padding: 6px 10px;
}
.cxh-composer .cxh-lang-flag {
    width: 21px; height: 15.75px; flex: 0 0 auto;
    border-radius: 2px; object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}
.cxh-composer .cxh-lang-opt .cxh-lang-flag { margin-right: 8px; vertical-align: -3px; }
.cxh-composer .cxh-lang-caret {
    width: 12px; height: 12px; flex: 0 0 auto;
    transition: transform .18s ease;
}
.cxh-composer .cxh-lang.open .cxh-lang-caret { transform: rotate(180deg); }
.cxh-composer .cxh-lang-list {
    position: absolute; top: 100%; left: 0; z-index: 1100;
    min-width: 170px; margin: 6px 0 0; padding: 6px; list-style: none;
    background: #fff; border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    display: none;
}
.cxh-composer .cxh-lang.open .cxh-lang-list { display: block; }
.cxh-composer .cxh-lang-list.cxh-drop-right,
.cxh-composer .cxh-lang-list.cxh-flip { left: auto; right: 0; }
.cxh-composer .cxh-lang-opt {
    display: block; width: 100%; text-align: left;
    background: none; border: 0; cursor: pointer;
    font: inherit; color: #333; white-space: nowrap;
    padding: 8px 10px; border-radius: 6px;
}
.cxh-composer .cxh-lang-opt:hover { background: #f2f4f7; }
.cxh-composer .cxh-lang-opt.is-active { font-weight: 700; }
/* Γλώσσα ως «κουμπιά εναλλαγής» (pill GR | EN) — ουδέτερα γκρι ώστε να δουλεύει σε σκούρο & ανοιχτό φόντο */
.cxh-composer .cxh-lang-btn--static { cursor: default; }
.cxh-composer .cxh-lang-seg {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 3px; border-radius: 999px;
    background: rgba(128, 128, 128, .18);
}
.cxh-composer .cxh-lang-seg-btn {
    border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
    padding: 4px 11px; border-radius: 999px; line-height: 1.2; opacity: .6;
    transition: background .18s ease, opacity .18s ease;
}
.cxh-composer .cxh-lang-seg-btn:hover { opacity: 1; }
.cxh-composer .cxh-lang-seg-btn.is-active { opacity: 1; background: rgba(128, 128, 128, .32); font-weight: 700; cursor: default; }
.cxh-composer .cxh-pb-element .cxh-lang--toggle .cxh-lang-btn { padding: 0; }

/* ══════════════════════════════════════════════════════
   STICKY HEADER
   ══════════════════════════════════════════════════════ */
.cxh-composer.cxh-sticky {
    position: sticky;
    top: 0;
}
.cxh-composer.cxh-sticky-shadow.cxh-stuck {
    box-shadow: 0 6px 22px rgba(0, 0, 0, .14);
}

/* ══════════════════════════════════════════════════════
   HOVER-BOLD ΧΩΡΙΣ LAYOUT SHIFT
   Κάθε label κρατά αόρατα τον χώρο της bold εκδοχής του,
   ώστε το hover bold να μη μετακινεί τα διπλανά items.
   ══════════════════════════════════════════════════════ */
.cxh-composer .cxh-mlabel { display: inline-block; }
.cxh-menu-root .cxh-mlabel::after {
    content: attr(data-cxh-label);
    display: block;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    font-weight: 900;   /* κρατά χώρο για το βαρύτερο βάρος → κανένα shift για 700/800/900 */
    pointer-events: none;
}

/* Χρώμα βελών υπο-επιπέδων στον drawer (per-profile override) */
.cxh-composer .cxh-drawer-expand { color: var(--cxh-drawer-arrow, currentColor); }

/* Εικονίδια & badges στα items του drawer (από τον καμβά Κατηγοριών) */
.cxh-composer .cxh-drawer-icon {
    width: 20px; height: 20px; object-fit: contain;
    margin-right: 10px; flex: 0 0 auto;
}
.cxh-composer .cxh-drawer-txt { flex: 0 1 auto; min-width: 0; }
.cxh-composer .cxh-drawer-badge {
    margin-left: auto; flex: 0 0 auto;
    background: #e53935; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1;
    padding: 3px 7px; border-radius: 10px;
}

/* ══ Drawer: ACCORDION υπο-μενού (profile: Υπο-μενού → Accordion) ══
   Τα subs μένουν ΦΩΛΙΑΣΜΕΝΑ στη ροή (το JS δεν τα μεταφέρει σε αυτό το mode)
   και ανοίγουν επιτόπου κάτω από τον γονιό τους. */
.cxh-composer .cxh-drawer-overlay[data-cxh-submode="accordion"] .cxh-drawer-item { flex-wrap: wrap; }
.cxh-composer .cxh-drawer-overlay[data-cxh-submode="accordion"] .cxh-drawer-sub {
    position: static;
    inset: auto;
    z-index: auto;
    transform: none;
    transition: none;
    display: none;
    flex: 1 1 100%;
    width: 100%;
    overflow: visible;
    background: rgba(0, 0, 0, 0.12);
}
.cxh-composer .cxh-drawer-overlay[data-cxh-submode="accordion"] .cxh-drawer-sub.is-open { display: block; }
.cxh-composer .cxh-drawer-overlay[data-cxh-submode="accordion"] .cxh-drawer-back,
.cxh-composer .cxh-drawer-overlay[data-cxh-submode="accordion"] .cxh-drawer-sub-title { display: none; }
.cxh-composer .cxh-drawer-overlay[data-cxh-submode="accordion"] .cxh-drawer-sub .cxh-drawer-link { padding-left: 34px; }
.cxh-composer .cxh-drawer-overlay[data-cxh-submode="accordion"] .cxh-drawer-sub .cxh-drawer-sub .cxh-drawer-link { padding-left: 52px; }
.cxh-composer .cxh-drawer-overlay[data-cxh-submode="accordion"] .cxh-drawer-sub .cxh-drawer-sub .cxh-drawer-sub .cxh-drawer-link { padding-left: 66px; }
.cxh-composer .cxh-drawer-overlay[data-cxh-submode="accordion"] .cxh-drawer-sub .cxh-drawer-sub .cxh-drawer-sub .cxh-drawer-sub .cxh-drawer-link { padding-left: 78px; }
.cxh-composer .cxh-drawer-overlay[data-cxh-submode="accordion"] .cxh-drawer-item.cxh-acc-open > .cxh-drawer-expand svg:not(.cxh-xi-plus) { transform: rotate(90deg); }
.cxh-composer .cxh-drawer-overlay[data-cxh-submode="accordion"] .cxh-drawer-item.cxh-acc-open > .cxh-drawer-expand svg.cxh-xi-plus .cxh-xi-v { display: none; }
.cxh-composer .cxh-drawer-overlay[data-cxh-submode="accordion"] .cxh-drawer-expand svg { transition: transform .2s ease; }

/* ══ Drawer: VERTICAL FLYOUT υπο-μενού (πάνελ δίπλα στον drawer) ══
   Ενεργό μόνο σε ≥768px — στο κινητό το mode πέφτει αυτόματα σε slide (JS). */
@media (min-width: 768px) {
    .cxh-composer .cxh-drawer-overlay[data-cxh-submode="flyout"] .cxh-drawer-fly {
        position: absolute;
        top: 0;
        bottom: 0;
        left: min(var(--cxh-drawer-width, 320px), 88vw);
        width: var(--cxh-drawer-flyout-w, 380px);
        max-width: calc(100vw - min(var(--cxh-drawer-width, 320px), 88vw));
        z-index: 1;
        transform: none;
        background: var(--cxh-drawer-fly-bg, #ffffff);
        color: var(--cxh-drawer-fly-text, #111111);
        box-shadow: 12px 0 32px rgba(0, 0, 0, 0.18);
        overflow-y: auto;
        overflow-x: hidden;
        display: none;
        padding: 18px 0;
    }
    .cxh-composer .cxh-drawer-overlay[data-cxh-drawer-side="right"] .cxh-drawer-fly {
        left: auto;
        right: min(var(--cxh-drawer-width, 320px), 88vw);
        box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
    }
    .cxh-composer .cxh-drawer-overlay[data-cxh-submode="flyout"] .cxh-drawer-fly.is-open { display: block; }
    .cxh-composer .cxh-drawer-overlay[data-cxh-submode="flyout"] .cxh-drawer-fly .cxh-drawer-back { display: none; }
    .cxh-composer .cxh-drawer-overlay[data-cxh-submode="flyout"] .cxh-drawer-fly .cxh-drawer-item { border-bottom: none; }
    .cxh-composer .cxh-drawer-overlay[data-cxh-submode="flyout"] .cxh-drawer-item.cxh-fly-open > .cxh-drawer-link { font-weight: 700; }
    .cxh-composer .cxh-drawer-overlay[data-cxh-submode="flyout"] .cxh-drawer-fly .cxh-drawer-expand {
        color: inherit;
        border-left: none;
        background: transparent;
        width: 40px;
    }
    .cxh-composer .cxh-drawer-overlay[data-cxh-submode="flyout"] .cxh-drawer-fly .cxh-drawer-item.cxh-fly-open { background: rgba(0, 0, 0, 0.05); }
    .cxh-composer .cxh-drawer-canvas { padding: 0 18px; }
    .cxh-composer .cxh-drawer-canvas .cxh-pb-label-t { font-weight: 800; }

    /* ── Αναγνώσιμο flyout: το πάνελ είναι ανοιχτόχρωμο, άρα ΟΛΟ το κείμενο
       κληρονομεί το χρώμα του πάνελ (όχι το λευκό του drawer) ── */
    .cxh-composer .cxh-drawer-overlay[data-cxh-submode="flyout"] .cxh-drawer-fly { color: var(--cxh-drawer-fly-text, #111111); }
    .cxh-composer .cxh-drawer-overlay[data-cxh-submode="flyout"] .cxh-drawer-fly .cxh-drawer-link,
    .cxh-composer .cxh-drawer-overlay[data-cxh-submode="flyout"] .cxh-drawer-fly .cxh-drawer-sub-title {
        color: var(--cxh-drawer-fly-text, #111111);
        background: transparent;
    }
    .cxh-composer .cxh-drawer-overlay[data-cxh-submode="flyout"] .cxh-drawer-fly .cxh-drawer-link {
        min-height: 0;
        padding: 9px 20px;
        font-weight: 600;
    }
    .cxh-composer .cxh-drawer-overlay[data-cxh-submode="flyout"] .cxh-drawer-fly .cxh-drawer-link:hover {
        background: rgba(0, 0, 0, 0.06);
        color: var(--cxh-drawer-fly-text, #111111);
    }
    /* Ο τίτλος-κεφαλίδα ΤΟΥ πάνελ (level-1) μένει· οι τίτλοι των nested subs κρύβονται
       (αλλιώς κάθε παιδί εμφανιζόταν διπλό, με σκούρο chip) */
    .cxh-composer .cxh-drawer-overlay[data-cxh-submode="flyout"] .cxh-drawer-fly > .cxh-drawer-sub-title {
        display: flex;
        align-items: center;
        min-height: 46px;
        padding: 0 20px;
        font-size: 15px;
        font-weight: 800;
        border: none;
        background: transparent;
    }

    /* ── Καμβάς μέσα στο flyout: ΓΡΑΜΜΙΚΟΠΟΙΗΣΗ (stack) — το σχέδιο των 12 στηλών
       είναι για το φαρδύ mega panel· στο στενό πάνελ τα blocks στοιβάζονται
       full-width με τη σειρά σχεδίασης (à la KIKO) ── */
    .cxh-composer .cxh-drawer-canvas .cxh-pb-media img { width: 100%; height: auto; display: block; border-radius: 0; }
    .cxh-composer .cxh-drawer-canvas .cxh-pb-label { display: block; text-align: center; }
    /* Οι «στήλες υποκατηγορίας» (cxhcol markup) γίνονται καθαρές λίστες */
    .cxh-composer .cxh-drawer-canvas .cxh-menu-column { width: 100%; }
    .cxh-composer .cxh-drawer-canvas .cxh-menu-heading {
        display: block;
        padding: 0 0 8px;
        font-weight: 800;
        font-size: 14px;
        color: inherit;
        background: transparent;
        border: none;
    }
    .cxh-composer .cxh-drawer-canvas .cxh-menu-links { list-style: none; margin: 0 0 6px; padding: 0; }
    .cxh-composer .cxh-drawer-canvas .cxh-menu-link-item {
        display: block;
        padding: 6px 0;
        color: inherit;
        background: transparent;
        font-weight: 400;
    }
    .cxh-composer .cxh-drawer-canvas .cxh-menu-link-item:hover { text-decoration: underline; }
}

/* Custom items τύπου «Εικόνα» μέσα στον drawer (όλα τα modes: slide/accordion/flyout) */
.cxh-composer .cxh-drawer-link--img { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; }
.cxh-composer .cxh-drawer-img {
    flex: 0 1 auto;          /* σέβεται inline πλάτος (π.χ. 90px)· χωρίς αυτό γεμίζει τη γραμμή */
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    margin-bottom: 6px;
}

.cxh-composer .cxh-drawer-canvas--grid { padding: 0 14px; }
.cxh-composer .cxh-drawer-canvas--grid .cxh-prow {
    display: grid;
    grid-template-columns: repeat(var(--cxh-cols, 12), minmax(0, 1fr));
    grid-auto-rows: minmax(24px, auto);
    align-content: center;   /* τα tracks κεντράρονται μέσα στο κουτί της γραμμής, σε ΚΑΘΕ σενάριο ύψους */
    gap: 8px;
    padding: 0 0 10px;
}

/* Εικόνα custom item με ρητές διαστάσεις: μένει στο μέγεθός της, δίπλα στη λεζάντα */
.cxh-composer .cxh-drawer-img--sized { flex: 0 0 auto; width: auto; max-width: 100%; margin-bottom: 0; margin-right: 10px; }
.cxh-composer .cxh-drawer-link--img:has(.cxh-drawer-img--sized) { flex-wrap: nowrap; align-items: center; }

/* Ζώνες header/footer του drawer (καμβάς με στοιχεία) */
.cxh-composer .cxh-drawer-head--zone { display: block; position: relative; padding: 0; }
.cxh-composer .cxh-drawer-close--auto { position: absolute; top: 10px; right: 10px; z-index: 3; }
.cxh-composer .cxh-drawer-footer--zone { display: block; padding: 0; }
.cxh-composer .cxh-drawer-head--zone .cxh-drawer-canvas--grid,
.cxh-composer .cxh-drawer-footer--zone .cxh-drawer-canvas--grid { width: 100%; padding: 0; }
.cxh-composer .cxh-drawer-head--zone .cxh-prow:last-child,
.cxh-composer .cxh-drawer-footer--zone .cxh-prow:last-child { padding-bottom: 0; }
.cxh-composer .cxh-drawer-canvas--grid .cxh-pb-element { display: flex; align-items: center; justify-content: center; min-height: 32px; }
.cxh-composer .cxh-pb-element .cxh-drawer-logo { max-height: 42px; width: auto; }
.cxh-composer .cxh-pb-element .cxh-action { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.cxh-composer .cxh-pb-element .cxh-icon { width: 22px; height: 22px; }
.cxh-composer .cxh-pb-element .cxh-drawer-social { display: flex; gap: 14px; }
.cxh-composer .cxh-pb-element .cxh-drawer-social svg { width: 20px; height: 20px; }

/* Στοίχιση block (Align/VAlign από το πλήρες editor) — element & label κελιά */
.cxh-composer .cxh-drawer-canvas--grid .cxh-pcell.cxh-al-left { justify-content: flex-start; }
.cxh-composer .cxh-drawer-canvas--grid .cxh-pcell.cxh-al-center { justify-content: center; }
.cxh-composer .cxh-drawer-canvas--grid .cxh-pcell.cxh-al-right { justify-content: flex-end; }
.cxh-composer .cxh-drawer-canvas--grid .cxh-pcell.cxh-val-top { align-items: flex-start; }
.cxh-composer .cxh-drawer-canvas--grid .cxh-pcell.cxh-val-center { align-items: center; }
.cxh-composer .cxh-drawer-canvas--grid .cxh-pcell.cxh-val-bottom { align-items: flex-end; }
.cxh-composer .cxh-drawer-canvas--grid .cxh-pcell[class*="cxh-al-"], .cxh-composer .cxh-drawer-canvas--grid .cxh-pcell[class*="cxh-val-"] { display: flex; }

/* ── Per-element ιδιότητες ζωνών (ανεξάρτητες από τον κεντρικό header) ── */
.cxh-composer .cxh-pb-element .cxh-drawer-close { color: var(--el-color, currentColor); background: var(--el-bg, transparent); border-radius: var(--el-radius, 8px); }
.cxh-composer .cxh-pb-element .cxh-drawer-close:hover { color: var(--el-hcolor, var(--el-color, currentColor)); background: var(--el-hbg, var(--el-bg, transparent)); }
.cxh-composer .cxh-pb-element .cxh-action-account { color: var(--el-color, inherit); }
.cxh-composer .cxh-pb-element .cxh-action-account:hover { color: var(--el-hcolor, var(--el-color, inherit)); }
.cxh-composer .cxh-pb-element .cxh-drawer-phone { color: var(--el-color, inherit); display: inline-flex; align-items: center; gap: 8px; margin: 0; text-decoration: none; line-height: 1; white-space: nowrap; font-size: inherit; font-weight: inherit; opacity: 1; }
.cxh-composer .cxh-pb-element .cxh-drawer-phone:hover { color: var(--el-hcolor, var(--el-color, inherit)); }
.cxh-composer .cxh-pb-element .cxh-drawer-phone .cxh-icon { width: 18px; height: 18px; flex: 0 0 auto; box-sizing: content-box; object-fit: contain; }
.cxh-composer .cxh-pb-element .cxh-drawer-phone--icon { gap: 0; }
.cxh-composer .cxh-pb-element .cxh-lang .cxh-lang-flag { width: var(--lang-flag, 18px); height: auto; }

/* ── Στοιχείο «Αναζήτηση» στις ζώνες header/footer του drawer ── */
.cxh-composer .cxh-pb-element .cxh-drawer-search { width: 100%; min-width: 0; }
.cxh-composer .cxh-drawer-search .cxh-search-input { min-width: 0; }
/* Το autosuggest ξεπροβάλλει πάνω από το σώμα του drawer (head) ή προς τα πάνω (footer) */
.cxh-composer .cxh-drawer-head--zone { z-index: 5; }
.cxh-composer .cxh-drawer-footer--zone { position: relative; z-index: 5; }
.cxh-composer .cxh-drawer-search .cxh-autosuggest-panel { max-height: min(460px, 60vh); }
.cxh-composer .cxh-drawer-footer--zone .cxh-autosuggest-panel { top: auto; bottom: calc(100% + 4px); }

/* ── Social στοιχείο: 6 στυλ εικονιδίων + μεταβλητές μεγέθους/χρωμάτων ── */
.cxh-composer .cxh-soc-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: var(--soc-gap, 14px); }
.cxh-composer .cxh-soc { display: inline-flex; align-items: center; justify-content: center; color: var(--soc-color, currentColor); text-decoration: none; transition: color .15s ease, background .15s ease, opacity .15s ease; }
.cxh-composer .cxh-soc svg { width: var(--soc-size, 20px); height: var(--soc-size, 20px); display: block; }
.cxh-composer .cxh-soc:hover { color: var(--soc-hcolor, var(--soc-color, currentColor)); }
.cxh-composer .cxh-soc--circle .cxh-soc, .cxh-composer .cxh-soc--square .cxh-soc,
.cxh-composer .cxh-soc--brand-circle .cxh-soc, .cxh-composer .cxh-soc--brand-square .cxh-soc {
    width: calc(var(--soc-size, 20px) + 16px); height: calc(var(--soc-size, 20px) + 16px);
    background: var(--soc-bg, rgba(0,0,0,.08));
}
.cxh-composer .cxh-soc--circle .cxh-soc, .cxh-composer .cxh-soc--brand-circle .cxh-soc { border-radius: 50%; }
.cxh-composer .cxh-soc--square .cxh-soc, .cxh-composer .cxh-soc--brand-square .cxh-soc { border-radius: 8px; }
.cxh-composer .cxh-soc--circle .cxh-soc:hover, .cxh-composer .cxh-soc--square .cxh-soc:hover { background: var(--soc-hbg, rgba(0,0,0,.16)); }
.cxh-composer .cxh-soc--brand .cxh-soc-facebook { color: #1877F2; }
.cxh-composer .cxh-soc--brand .cxh-soc-instagram { color: #E4405F; }
.cxh-composer .cxh-soc--brand .cxh-soc-tiktok { color: #010101; }
.cxh-composer .cxh-soc--brand .cxh-soc-youtube { color: #FF0000; }
.cxh-composer .cxh-soc--brand .cxh-soc-twitter { color: #000000; }
.cxh-composer .cxh-soc--brand .cxh-soc-linkedin { color: #0A66C2; }
.cxh-composer .cxh-soc--brand .cxh-soc-pinterest { color: #BD081C; }
.cxh-composer .cxh-soc--brand .cxh-soc-whatsapp { color: #25D366; }
.cxh-composer .cxh-soc--brand .cxh-soc-viber { color: #7360F2; }
.cxh-composer .cxh-soc--brand-circle .cxh-soc-facebook, .cxh-composer .cxh-soc--brand-square .cxh-soc-facebook { background: #1877F2; color: #ffffff; }
.cxh-composer .cxh-soc--brand-circle .cxh-soc-instagram, .cxh-composer .cxh-soc--brand-square .cxh-soc-instagram { background: #E4405F; color: #ffffff; }
.cxh-composer .cxh-soc--brand-circle .cxh-soc-tiktok, .cxh-composer .cxh-soc--brand-square .cxh-soc-tiktok { background: #010101; color: #ffffff; }
.cxh-composer .cxh-soc--brand-circle .cxh-soc-youtube, .cxh-composer .cxh-soc--brand-square .cxh-soc-youtube { background: #FF0000; color: #ffffff; }
.cxh-composer .cxh-soc--brand-circle .cxh-soc-twitter, .cxh-composer .cxh-soc--brand-square .cxh-soc-twitter { background: #000000; color: #ffffff; }
.cxh-composer .cxh-soc--brand-circle .cxh-soc-linkedin, .cxh-composer .cxh-soc--brand-square .cxh-soc-linkedin { background: #0A66C2; color: #ffffff; }
.cxh-composer .cxh-soc--brand-circle .cxh-soc-pinterest, .cxh-composer .cxh-soc--brand-square .cxh-soc-pinterest { background: #BD081C; color: #ffffff; }
.cxh-composer .cxh-soc--brand-circle .cxh-soc-whatsapp, .cxh-composer .cxh-soc--brand-square .cxh-soc-whatsapp { background: #25D366; color: #ffffff; }
.cxh-composer .cxh-soc--brand-circle .cxh-soc-viber, .cxh-composer .cxh-soc--brand-square .cxh-soc-viber { background: #7360F2; color: #ffffff; }
.cxh-composer .cxh-soc--brand .cxh-soc:hover, .cxh-composer .cxh-soc--brand-circle .cxh-soc:hover, .cxh-composer .cxh-soc--brand-square .cxh-soc:hover { opacity: .85; }
/* Τηλέφωνο μέσα στο Social: αριθμός ορατός στα «σκέτα» στυλ, κρυφός στα κουτάκια */
.cxh-composer .cxh-soc--haslabel { font-size: 13px; font-weight: 600; }
.cxh-composer .cxh-soc-phone-label, .cxh-composer .cxh-soc-email-label { margin-left: 6px; font-size: inherit; font-weight: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Τηλέφωνο/Email με λεκτικό: ο σύνδεσμος ΔΕΝ έχει το σταθερό πλάτος 36px των σκέτων εικονιδίων
   (.cxh-drawer-social a) — αλλιώς ο αριθμός στριμώχνεται σε «2…» σε όλα τα στυλ εκτός κύκλου/τετραγώνου. */
.cxh-composer .cxh-soc-wrap .cxh-soc--haslabel { width: auto; }
/* Τηλέφωνο/Email: το κουτί (κύκλος/τετράγωνο/brand) πάει ΜΟΝΟ στο εικονίδιο — το λεκτικό μένει σκέτο δίπλα */
.cxh-composer .cxh-soc--circle .cxh-soc--haslabel, .cxh-composer .cxh-soc--square .cxh-soc--haslabel,
.cxh-composer .cxh-soc--brand-circle .cxh-soc--haslabel, .cxh-composer .cxh-soc--brand-square .cxh-soc--haslabel {
    width: auto; height: auto; padding: 0; border-radius: 0; background: transparent; gap: 8px;
}
.cxh-composer .cxh-soc--circle .cxh-soc--haslabel svg, .cxh-composer .cxh-soc--square .cxh-soc--haslabel svg,
.cxh-composer .cxh-soc--brand-circle .cxh-soc--haslabel svg, .cxh-composer .cxh-soc--brand-square .cxh-soc--haslabel svg {
    background: var(--soc-tel-bg, var(--soc-bg, rgba(0,0,0,.08)));
    padding: 8px; box-sizing: content-box;
}
.cxh-composer .cxh-soc--circle .cxh-soc--haslabel svg, .cxh-composer .cxh-soc--brand-circle .cxh-soc--haslabel svg { border-radius: 50%; }
.cxh-composer .cxh-soc--square .cxh-soc--haslabel svg, .cxh-composer .cxh-soc--brand-square .cxh-soc--haslabel svg { border-radius: 8px; }
/* Λεκτικό: δικά του Normal/Hover, ανεξάρτητα από το κουτί του εικονιδίου */
.cxh-composer .cxh-soc-wrap .cxh-soc--haslabel { color: var(--soc-tel-color, var(--soc-color, currentColor)); }
.cxh-composer .cxh-soc-wrap .cxh-soc--haslabel:hover { color: var(--soc-tel-hcolor, var(--soc-tel-color, var(--soc-hcolor, currentColor))); opacity: 1; }
.cxh-composer .cxh-soc--circle .cxh-soc--haslabel:hover svg, .cxh-composer .cxh-soc--square .cxh-soc--haslabel:hover svg,
.cxh-composer .cxh-soc--brand-circle .cxh-soc--haslabel:hover svg, .cxh-composer .cxh-soc--brand-square .cxh-soc--haslabel:hover svg { background: var(--soc-tel-hbg, var(--soc-tel-bg, rgba(0,0,0,.16))); }
.cxh-composer .cxh-soc--brand .cxh-soc-phone svg { color: #16a34a; }
.cxh-composer .cxh-soc--brand-circle .cxh-soc-phone svg, .cxh-composer .cxh-soc--brand-square .cxh-soc-phone svg { background: var(--soc-tel-bg, #16a34a); color: #ffffff; }
.cxh-composer .cxh-soc--brand .cxh-soc-email svg { color: #ea4335; }
.cxh-composer .cxh-soc--brand-circle .cxh-soc-email svg, .cxh-composer .cxh-soc--brand-square .cxh-soc-email svg { background: var(--soc-tel-bg, #ea4335); color: #ffffff; }

/* Λεπτή, διακριτική scrollbar σε όλα τα scrollable μέρη του drawer */
.cxh-composer .cxh-drawer-body, .cxh-composer .cxh-drawer-sub, .cxh-composer .cxh-drawer-fly { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.28) transparent; }
.cxh-composer .cxh-drawer-body::-webkit-scrollbar, .cxh-composer .cxh-drawer-sub::-webkit-scrollbar, .cxh-composer .cxh-drawer-fly::-webkit-scrollbar { width: 5px; height: 5px; }
.cxh-composer .cxh-drawer-body::-webkit-scrollbar-track, .cxh-composer .cxh-drawer-sub::-webkit-scrollbar-track, .cxh-composer .cxh-drawer-fly::-webkit-scrollbar-track { background: transparent; }
.cxh-composer .cxh-drawer-body::-webkit-scrollbar-thumb, .cxh-composer .cxh-drawer-sub::-webkit-scrollbar-thumb, .cxh-composer .cxh-drawer-fly::-webkit-scrollbar-thumb { background: rgba(0,0,0,.28); border-radius: 999px; }
.cxh-composer .cxh-drawer-body::-webkit-scrollbar-thumb:hover, .cxh-composer .cxh-drawer-sub::-webkit-scrollbar-thumb:hover, .cxh-composer .cxh-drawer-fly::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.45); }

/* Το κείμενο γραμμής γεμίζει το διαθέσιμο πλάτος ώστε το text-align του ΣΤΥΛ να εφαρμόζεται (v3.39) */
.cxh-composer .cxh-drawer-link .cxh-drawer-txt { flex: 1 1 auto; min-width: 0; }

/* Στοίχιση γραμμών drawer + θέσεις badge + styled canvas labels (v3.28) */
.cxh-composer .cxh-drawer-link { position: relative; }
/* Ετικέτα χωρίς link (span): νεκρό κλικ· με υπο-items (data-cxh-label-for) ανοίγει το υπο-μενού → pointer */
.cxh-composer .cxh-drawer-label { cursor: default; }
.cxh-composer .cxh-drawer-label[data-cxh-label-for] { cursor: pointer; }
.cxh-composer .cxh-drawer-link--img .cxh-drawer-img:not(.cxh-drawer-img--sized) { flex: 1 1 auto; min-width: 0; width: auto; max-width: 100%; }
.cxh-composer .cxh-drawer-link .cxh-drawer-badge--corner { position: absolute; top: 6px; right: 44px; }
.cxh-composer .cxh-drawer-link .cxh-drawer-badge--super { align-self: flex-start; margin-top: 8px; margin-left: 4px; font-size: 9px; padding: 1px 5px; }
.cxh-composer .cxh-drawer-canvas--grid .cxh-pcell > .cxh-pb-label {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap;
    align-items: center; justify-content: center; gap: 6px;
    width: 100%; min-height: 32px; text-align: center;
}
.cxh-composer .cxh-drawer-canvas--grid .cxh-pb-label .cxh-pb-icon { display: inline-block !important; width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.cxh-composer .cxh-drawer-canvas--grid .cxh-pb-label .cxh-menu-badge { flex: 0 0 auto; white-space: nowrap; }
.cxh-composer .cxh-drawer-canvas--grid .cxh-pcell.cxh-pb--styled { display: flex; align-items: center; padding: 8px 14px; }
.cxh-composer .cxh-drawer-canvas--grid .cxh-pcell.cxh-pb--styled > .cxh-pb-label { min-height: 0; }
/* Σε styled blocks τα spans κληρονομούν το typography του ΣΤΥΛ (νικά τα defaults 16px/800) */
.cxh-composer .cxh-drawer-canvas--grid .cxh-pcell.cxh-pb--styled .cxh-pb-label-t,
.cxh-composer .cxh-drawer-canvas--grid .cxh-pcell.cxh-pb--styled .cxh-pb-label-s { font-size: inherit; font-weight: inherit; line-height: inherit; }
/* Εικονίδιο & badge ΠΑΝΩ στο media block (overlay) — δεν σπάνε τη ροή */
.cxh-composer .cxh-drawer-canvas--grid .cxh-pb-media { position: relative; display: block; }
.cxh-composer .cxh-drawer-canvas--grid .cxh-pb-media .cxh-pb-icon { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; margin: 0; z-index: 2; display: block !important; border-radius: 0; }
.cxh-composer .cxh-drawer-canvas--grid .cxh-pb-media .cxh-menu-badge { position: absolute; top: 6px; right: 6px; z-index: 2; }
.cxh-composer .cxh-drawer-canvas--grid .cxh-pb-media .cxh-menu-badge--super { font-size: 9px; padding: 1px 5px; }
.cxh-composer .cxh-drawer-canvas--grid .cxh-pb-media .cxh-menu-badge--inline { position: static; display: inline-block; margin-top: 6px; }

/* Ισοτιμία block ↔ item: icon / badge (inline & corner) στα canvas blocks */
.cxh-composer .cxh-drawer-canvas--grid .cxh-pcell { position: relative; }
.cxh-composer .cxh-drawer-canvas--grid .cxh-pb-icon { width: 20px; height: 20px; object-fit: contain; margin-right: 6px; vertical-align: middle; flex: 0 0 auto; }
.cxh-composer .cxh-drawer-canvas--grid .cxh-menu-badge--corner { position: absolute; top: 6px; right: 6px; z-index: 2; }

/* Item «Καμβάς» μέσα στη λίστα του drawer */
.cxh-composer .cxh-drawer-item--canvas { display: block; padding: 12px 0 4px; border-bottom: none; }
/* Ετικέτα σε μορφή κουμπιού (CTA) */
.cxh-composer .cxh-pb-btn { display: flex; align-items: center; justify-content: center; padding: 13px 22px; font-weight: 800; font-size: 13px; letter-spacing: .04em; text-align: center; text-decoration: none; line-height: 1.1; }
.cxh-composer a.cxh-pb-btn:hover { opacity: .88; text-decoration: none; }
.cxh-composer .cxh-pb-btn .cxh-pb-label-t { font-weight: inherit; }


/* ── Λογαριασμός: dropdown & κουμπιά (guest/logged, cache-safe) ── */
.cxh-composer .cxh-acc { position: relative; display: inline-flex; }
.cxh-composer .cxh-acc-toggle { cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 8px; }
/* Αόρατη γέφυρα πάνω από τη λίστα: το hover δεν χάνεται στο κενό toggle→λίστα */
.cxh-composer .cxh-acc-list::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.cxh-composer .cxh-acc-list { position: absolute; top: calc(100% + 6px); left: 0; min-width: 185px; margin: 0; padding: 6px; list-style: none; background: #ffffff; color: #222222; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); display: none; z-index: 90; }
.cxh-composer .cxh-acc.is-open .cxh-acc-list { display: block; }
@media (hover: hover) { .cxh-composer .cxh-acc:hover .cxh-acc-list { display: block; } }
.cxh-composer .cxh-acc-list a { display: block; padding: 9px 12px; border-radius: 7px; color: inherit; text-decoration: none; font-size: 14px; white-space: nowrap; }
.cxh-composer .cxh-acc-list a:hover { background: rgba(0,0,0,.06); }
.cxh-composer .cxh-drawer-footer .cxh-acc-list, .cxh-composer .cxh-drawer-footer--zone .cxh-acc-list { top: auto; bottom: calc(100% + 6px); }
.cxh-composer .cxh-acc-btns { display: inline-flex; align-items: center; justify-content: center; gap: 8px; row-gap: 8px; flex-wrap: wrap; max-width: 100%; }
.cxh-composer .cxh-acc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: 0; background: #111111; color: #ffffff; text-decoration: none; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; }
.cxh-composer .cxh-acc-btn:hover { opacity: .88; }
.cxh-composer .cxh-acc-ic { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; }
.cxh-composer .cxh-acc-list a { display: flex; align-items: center; gap: 8px; }
.cxh-composer .cxh-acc[data-drop="right"] .cxh-acc-list { left: auto; right: 0; }
/* Ορατότητα ανά κατάσταση: g=επισκέπτης, l=συνδεδεμένος, a=πάντα */
.cxh-composer [data-cxh-acc] .cxh-acc-l { display: none; }
.cxh-composer [data-cxh-acc].is-logged .cxh-acc-l { display: inline-flex; }
.cxh-composer [data-cxh-acc].is-logged .cxh-acc-g { display: none; }
/* ── Λογαριασμός: «Γραμμή με βελάκι (accordion)» σε ζώνη drawer — μοιάζει με στοιχείο 1ου επιπέδου ── */
.cxh-composer .cxh-acc-row { width: 100%; }
.cxh-composer .cxh-acc-row > .cxh-drawer-list { overflow: visible; flex: none; }
.cxh-composer .cxh-acc-row .cxh-drawer-item { flex-wrap: wrap; }
.cxh-composer .cxh-acc-row .cxh-acc-row-link { gap: 10px; }
.cxh-composer .cxh-acc-row .cxh-acc-row-link .cxh-icon { width: 24px; height: 24px; flex: 0 0 auto; }
.cxh-composer .cxh-acc-row .cxh-acc-row-link img.cxh-icon { object-fit: cover; border-radius: 50%; }
.cxh-composer .cxh-acc-row-sub { flex: 1 1 100%; width: 100%; background: rgba(0, 0, 0, 0.12); }
.cxh-composer .cxh-acc-row-sub .cxh-drawer-link { padding-left: 34px; gap: 10px; }
.cxh-composer .cxh-acc-row-sub .cxh-acc-ic { width: 18px; height: 18px; flex: 0 0 auto; object-fit: contain; }
.cxh-composer .cxh-acc-row .cxh-drawer-item.is-open > .cxh-drawer-expand svg:not(.cxh-xi-plus) { transform: rotate(90deg); }
.cxh-composer .cxh-acc-row .cxh-drawer-item.is-open > .cxh-drawer-expand svg.cxh-xi-plus .cxh-xi-v { display: none; }
.cxh-composer .cxh-acc-row .cxh-drawer-expand svg { transition: transform .2s ease; }
/* επισκέπτης / συνδεδεμένος (cookie cxh_logged → .is-logged) */
.cxh-composer .cxh-acc-row .cxh-acc-row-link .cxh-acc-l { display: none; }
.cxh-composer .cxh-acc-row.is-logged .cxh-acc-row-link .cxh-acc-l { display: inline; }
.cxh-composer .cxh-acc-row.is-logged .cxh-acc-row-link .cxh-acc-g { display: none; }
.cxh-composer .cxh-acc-row .cxh-acc-row-sub li.cxh-acc-l { display: none; }
.cxh-composer .cxh-acc-row.is-logged .cxh-acc-row-sub li.cxh-acc-l { display: flex; }
.cxh-composer .cxh-acc-row.is-logged .cxh-acc-row-sub li.cxh-acc-g { display: none; }
/* το κελί της ζώνης αφήνει τη γραμμή να απλωθεί σε όλο το πλάτος */
.cxh-composer .cxh-drawer-canvas--grid .cxh-pcell.cxh-pb-element:has(> .cxh-acc-row) { display: block; }
.cxh-composer .cxh-acc-list li.cxh-acc-l { display: none; }
.cxh-composer .cxh-acc.is-logged .cxh-acc-list li.cxh-acc-l { display: block; }
.cxh-composer .cxh-acc.is-logged .cxh-acc-list li.cxh-acc-g { display: none; }