@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   KEFALIDA - NEA SXEDIASI (koini kai stа 3 themata)
   --------------------------------------------------------------------------
   POU FORTONETAI: apo to includes/top-right-menu.php. Einai to MONO arxeio pou
   yparxei se kathe selida me kefalida (77 selides) - den yparxei kanena
   stylesheet pou na fortonetai pantou. Epeidi mpainei sto <body>, erxetai META
   apo ola ta per-page CSS, ara kerdizei me idia eidikotita xoris !important.

   TI ANTIKATHISTA: i palia kefalida itan ftiagmeni me position:fixed kai
   karfomena pixel (logotypo left:0, profil left:1147.61px, kalathi left:1210px,
   spiti left:1485px...). Ta kouti tous epikalyptontan kai apla etyxe na min
   pefteι to periexomeno to ena pano sto allo. Edo ola ginontai kanoniki roi
   me flexbox.

   TA KELYFI DIAFEROUN: to logotypo einai folliasmeno se TRIA diaforetika vathi
   analoga me ti selida (products: 1 epipedo, index: 2, cart: 3). Gi afto ta
   endiamesa perivlimata ginontai display:contents - isiononontai ola se mia
   koini grammi flex, opoio kai an einai to vathos.

   TA XROMATA: den yparxei kanena stathero xroma edo. Erxontai os metavlites
   apo to PHP (b2b_colors: kefalida + koumpia), kai to keimeno dialegetai
   analoga me ti fotinotita tou fontou - 6 apo tous 85 pelates exoun FOTEINI
   kefalida (dyo kataleuki), opote stathero lefko keimeno tha itan adiavasto.

   TA YPSI MENOUN IDIA: 124px se desktop (30 lorida + 94 grammi) kai 60px se
   kinito. Etsi den allazei to padding-top tou .m-body kai den metakineitai to
   periexomeno se kamia apo tis 77 selides.
   ========================================================================== */

#m_header{
    /* I kefalida eixe z-index 99 - dyladi PISO apo to aristero menu (999).
       To z-index enos paidiou DEN mporei na vgei ekso apo to stacking context
       tou gonea, opote oi protaseis anazitisis (1000 mesa stin kefalida)
       eksakolouthousan na kryvontai. Anevazoume tin IDIA tin kefalida. */
    z-index:1000;
    --hd_radius:12px;
    --hd_gap:18px;

    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    font-family:'Manrope','Lato','Segoe UI',Arial,sans-serif;
}
#m_header *,
#m_header *::before,
#m_header *::after{
    box-sizing:border-box;
}


/* --- 1) I lorida me ti grafomixani -------------------------------------
   Sti maketa einai mia lepti lorida xromatos stin korifi. Pairnei to xroma
   energeion tou pelati, kai to keimeno tis to xroma pou diavazetai pano tou. */
#m_header > #above_top{
    flex:0 0 auto;
    order:-1;
    width:100%;
    height:20px;
    margin:0;
    padding:0 20px;
    float:none;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--hd_strip, var(--hd_accent));
    color:var(--hd_strip_ink, var(--hd_accent_ink));
    border-bottom:0;
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.2px;
    overflow:hidden;
}
#m_header > #above_top .console-container{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1px;
    width:auto;
    margin:0;
    color:inherit;
    white-space:nowrap;
}
#m_header > #above_top .console-underscore{
    color:inherit;
}


/* --- 2) I diataxi -------------------------------------------------------
   To .m-container ginetai i grammi. Ola ta endiamesa .m-stack / .m-stack__item
   ginontai display:contents wste to logotypo kai to #m_header_nav na katalixoun
   adelfia sti grammi, anexartita apo to poso vathia einai sto kathe kelyfos.
   EKSAIROUNTAI to #m_header_nav kai to #m_header_topbar: afta ta theloume na
   parameinoun pragmatika kouti gia na ginoun kai afta flex. */
#m_header > .m-container{
    flex:1 1 auto;
    display:flex;
    align-items:center;
    gap:var(--hd_gap);
    width:100%;
    max-width:1680px;
    margin:0 auto;
    padding:0 22px;
    min-width:0;
}
#m_header .m-stack:not(#m_header_topbar),
#m_header .m-stack__item:not(#m_header_nav){
    display:contents;
}

#m_header #m_header_nav{
    /* to palio CSS ta topothetei apolyta (se kinito to topbar evgene se
       y=-97, dyladi ektos kefalidas) - ta epanaferoume sti roi */
    position:static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    display:flex;
    align-items:center;
    gap:var(--hd_gap);
    flex:1 1 auto;
    min-width:0;
    float:none;
    margin:0;
    padding:0;
}
#m_header #m_header_topbar{
    position:static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    display:flex;
    align-items:center;
    gap:16px;
    /* To palio CSS tou dinei platos (metrimeno: 836px eno to periexomeno
       piane 234), opote den emene kathоlou eleftheros xoros kai ta auto
       perithoria den eixan pou na doulepsoun - ola stoixizontan aristera. */
    width:auto !important;
    flex:0 0 auto;
    margin-left:auto;
    padding:0;
    float:none;
    min-height:0;
}

/* Ta palia diaxoristika itan 1px divs karfomena se apolytes theseis - to ena
   (#right_price_line) epefte MESA sto poso kai to ekove sta dyo. */
#m_header #left_price_line,
#m_header #right_price_line,
#m_header #right_cart_line,
#m_header #tmenu_line,
#m_header #nline_1,
#m_header #eisodos_line{
    display:none !important;
}
/* To "Kalos ilthate: X" to leei idi i grafomixani stin loridа apo pano. */
#m_header #paraggelia_gia{
    display:none !important;
}


/* --- 3) To logotypo ------------------------------------------------------ */
#m_header .m-brand__logo-wrapper{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    margin:0;
    padding:0;
    line-height:0;
}
#m_header #admin-logo{
    position:static !important;
    top:auto !important;
    left:auto !important;
    float:none !important;
    width:auto !important;
    max-width:210px;
    height:auto !important;
    max-height:54px;
    margin:0 !important;
    object-fit:contain;
}


/* --- 4) I anazitisi ------------------------------------------------------
   Kentriki, san pill, opos i maketa: lefko pedio me strogyles akres kai
   kykliko koumpi sto xroma tou pelati. */
#m_header #hd_search{
    position:relative;
    display:flex;
    align-items:center;
    flex:1 1 auto;
    min-width:0;
    max-width:640px;
    height:50px;
    margin:0 auto;
    padding:0 5px 0 0;
    background:var(--hd_field);
    border:1px solid transparent;
    border-radius:999px;
    transition:box-shadow .15s ease, border-color .15s ease;
}
#m_header #hd_search:focus-within{
    border-color:var(--hd_accent);
    box-shadow:0 0 0 3px rgba(0,0,0,.06);
}
#m_header #hd_search #search_input{
    flex:1 1 auto;
    min-width:0;
    width:auto !important;
    height:100% !important;
    margin:0 !important;
    padding:0 10px 0 22px !important;
    float:none !important;
    position:static !important;
    background:transparent !important;
    border:0 !important;
    border-radius:999px;
    outline:none;
    box-shadow:none !important;
    color:var(--hd_field_ink);
    font-family:inherit;
    font-size:15.5px;
    font-weight:500;
}
#m_header #hd_search #search_input::placeholder{
    color:#8d97a8;
    font-style:normal;
    font-weight:500;
    text-align:left;
    opacity:1;
}
#m_header #hd_search #search_button{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    margin:0 !important;
    padding:0;
    float:none !important;
    position:static !important;
    background:var(--hd_accent) !important;
    border:0;
    border-radius:50%;
    cursor:pointer;
    transition:filter .15s ease;
}
#m_header #hd_search #search_button:hover{ filter:brightness(.93); }
#m_header #hd_search #search_button .search_icon{
    margin:0 !important;
    color:var(--hd_accent_ink) !important;
    font-size:16px !important;
}
/* --- Oi protaseis anazitisis ---
   Itan position:fixed me diko tous top/left apo to kathe per-page CSS, kai
   z-index 1-2 - dyladi PISO apo to aristero menu pou exei 999. Twra einai
   paidi tou pediou, opote pefti akrivos apo kato tou kai me to idio platos.
   Treis id ston epilogea (3,0,0) gia na nikisoun ta palia #search_suggestion_list. */
#m_header #hd_search #search_suggestion_list{
    position:absolute !important;
    top:calc(100% + 8px) !important;
    left:0 !important;
    right:0 !important;
    bottom:auto !important;
    width:auto !important;
    max-height:min(70vh, 560px) !important;
    height:auto !important;
    margin:0 !important;
    overflow-y:auto;
    z-index:1000 !important;      /* to aristero menu einai 999 */
    background:#fff;
    border:1px solid #e4e8ee !important;
    border-radius:14px !important;
    box-shadow:0 12px 32px rgba(16,24,40,.18);
}
/* to eikonidio kamera (barcode) den anikei edo - to kryvoume an tyxei */
#m_header #hd_search #cam_icon3{ display:none !important; }


/* --- 5) Eisodos / Eggrafi ------------------------------------------------ */
#m_header #login_vis,
#m_header #login_vis_profil{
    position:static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    float:none !important;
    display:flex;
    align-items:center;
    gap:9px;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0;
    white-space:nowrap;
}
#m_header #login_vis_lbl{
    position:static !important;
    float:none !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    color:var(--hd_ink);
    font-family:inherit;
    font-size:16px;
    font-weight:600;
    line-height:1.2;
}
/* to eikonidio tou xristi: to markup to dinei os <i class="fa-solid fa-user"> */
#m_header #login_vis > i,
#m_header #login_vis_profil > i{
    position:static !important;
    float:none !important;
    order:-1;                       /* to eikonidio aristera apo to keimeno */
    width:auto !important;
    margin:0 !important;
    color:var(--hd_ink) !important;
    font-size:23px !important;
}

/* to eikonidio tou xristi dipla sto "Eisodos/Profil" */
#m_header .brackett{
    position:static !important;
    float:none !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    color:var(--hd_ink) !important;
    font-size:23px !important;
}

#m_header a:hover #login_vis_lbl,
#m_header a:hover #login_vis_profil #login_vis_lbl{
    text-decoration:none;
}

/* --- I SEIRA ---
   Sto DOM i "eksodos" erxetai PROTI (prin to Profil) kai to kalathi meta.
   Me flex order tin pame sto telos, opos i maketa: xristis | kalathi |
   spiti | eksodos. Xrisimopoioume :has() giati ta <a> den exoun id - se
   palio browser apla menei i simerini seira. */
#m_header #login_vis,
#m_header #login_vis_profil{ order:1; }
#m_header #m_header_topbar > a:has(#floating_cart){ order:2; }
#m_header #m_header_topbar > a:has(.home_btn){ order:3; }
#m_header #m_header_topbar > a:has(#login_company_icon){ order:4; }


/* --- 6) Kalathi kai poso ------------------------------------------------- */
#m_header #floating_cart{
    position:static !important;
    top:auto !important;
    left:auto !important;
    float:none !important;
    display:flex;
    align-items:center;
    gap:10px;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 0 0 14px;
    border-left:1px solid var(--hd_line);
}
#m_header #floating_cart_left,
#m_header #floating_cart_right{
    position:static !important;
    top:auto !important;
    left:auto !important;
    float:none !important;
    display:flex;
    align-items:center;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
}
/* sti maketa to eikonidio einai ARISTERA kai to poso deksia */
#m_header #floating_cart_right{ order:-1; position:relative !important; }

#m_header #price_container{
    position:static !important;
    float:none !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    color:var(--hd_ink);
    font-family:inherit;
    font-size:18px;
    font-weight:800;
    white-space:nowrap;
}
#m_header .cart_icon{
    position:static !important;
    float:none !important;
    margin:0 !important;
    color:var(--hd_ink) !important;
    font-size:26px !important;
}
#m_header #cart_quantity{
    position:absolute !important;
    /* to palio CSS dinei left/right - ta midenizoume kai ta dyo rhta */
    top:-7px !important;
    right:-9px !important;
    left:auto !important;
    bottom:auto !important;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    height:20px;
    margin:0 !important;
    padding:0 4px;
    background:var(--hd_accent);
    border-radius:999px;
    color:var(--hd_accent_ink);
    font-family:inherit;
    font-size:12px;
    font-weight:800;
    line-height:1;
}


/* --- 7) Spiti kai eksodos ------------------------------------------------
   Sti maketa to spiti einai koumpi me fonto sto xroma tou pelati. */
#m_header .home_btn{
    position:static !important;
    top:auto !important;
    left:auto !important;
    float:none !important;
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    margin:0 !important;
    background:var(--hd_accent);
    border-radius:12px;
    color:var(--hd_accent_ink) !important;
    font-size:20px !important;
    transition:filter .15s ease;
}
#m_header .home_btn:hover{ filter:brightness(.93); }

#m_header #login_company_icon{
    position:static !important;
    top:auto !important;
    left:auto !important;
    float:none !important;
    width:30px !important;
    height:auto !important;
    margin:0 !important;
    opacity:.85;
    transition:opacity .15s ease;
}
#m_header #login_company_icon:hover{ opacity:1; }


/* --- 8) Ta eikonidia tou kinitou ----------------------------------------- */
#m_header #mymenu,
#m_header #mymenu_grammes,
#m_header #hd_search_toggle{
    position:static !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    float:none !important;
    display:none;                     /* fainontai mono se kinito */
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    margin:0 !important;
    color:var(--hd_ink) !important;
    font-size:20px !important;
    cursor:pointer;
}


/* --- 9) Desktop ---------------------------------------------------------- */
@media (min-width:1025px){
    #m_header{ height:124px; }
    /* 20 (lorida) + 104 = 124, akrivos opos prin - to padding-top tou
       .m-body den xreiazetai na allaksei se kamia selida */

    /* --- EFTHIGRAMMISI ME TO PERIEXOMENO TIS SELIDAS -------------------
       To aristero meros (logotypo) prepei na ksekinaei ekei pou ksekinaei
       kai to aristero menu, kai to deksi meros (eisodos/kalathi/home) na
       teleionei ekei pou teleionei kai o slider. Kai ta dyo einai 30px:
         - thema 2: to #template2_home_leftmenu_container einai left:30px
           kai to #template2_home_slider_container width:calc(100% - 330px)
         - themata 1 kai 3: to bundle dinei .m-content{padding:30px 30px}
       Dyo pragmata to empodizan:
       1) max-width:1680px + margin:0 auto -> pano apo ta ~1680 o header
          kentrarontan eno to periexomeno epiane oli tin othoni (sta 1900
          i diafora sta deksia itan 112px, sta 2200 262px).
       2) To .m-container exei clearfix ::before/::after apo to bundle
          (content:" "; display:table). Se flex grammi afta ginontai
          kanonika flex items midenikou platous kai to gap:18px mpainei
          PRIN to logotypo kai META to #m_header_nav - gi afto to padding
          22px evgaze 40px. Ta svinoume: den prosferoun tipota se flex.
       Sto kinito den aggizoume tipota (to gap einai 10/6px kai i opsi
       exei idi egkrithei). ---------------------------------------------- */
    #m_header > .m-container{
        height:104px;
        max-width:none;
        /* To keno einai metavliti giati DEN einai idio se ola ta themata:
           themata 1 kai 2 -> 30px (oso to .m-content kai to aristero menu)
           thema 3        -> 3,2% (to keno tis maketas, to orizei to
                             css/home_temp3.css pou fortonei mono ekei)
           I proepilogi grafetai MONO san fallback tou var() kai oxi san
           diliosi pano sto #m_header: etsi i diliosi tou home_temp3.css
           (idia eidikotita) den xanei apo ti seira fortosis - to
           header.css fortonei TELEFTAIO. */
        padding:0 var(--hd_gutter, 30px);
    }
    #m_header > .m-container::before,
    #m_header > .m-container::after{
        display:none;
    }
    /* i anazitisi sto kentro, oi energeies deksia */
    #m_header #hd_search{ margin-left:10px; }

    /* --- THEMA 1: to mpanaraki prosforon --------------------------------
       Mono to thema 1 to vgazei (index.php: if($template == 1)) kai to
       css/home.css to eixe position:absolute me left:295px / top:46px -
       karfomeno pano stin PALIA diataxi tou header. Tora pou i grammi
       einai flex, to <a> pou to tyligei einai flex item MIDENIKOU platous
       (i eikona einai ekso apo ti roi), opote to mpanaraki epiplee opou
       nanai kai epefte pano stin anazitisi.
       To epanaferoume sti roi kai to vazoume DEKSIA apo tin anazitisi me
       order: sto DOM to <a> erxetai PRIN tin anazitisi (grafetai stin arxi
       tou #m_header_nav), gi afto den arkei mono to position:static.
       Kato apo ta 1230 to home.css to kanei display:none - den to
       peirazoume, menei krymmeno opos itan.
       Sta themata 2 kai 3 den yparxei kan to #offer_thema1, opote oi
       kanones den tairiazoun pouthena. ---------------------------------- */
    #m_header #m_header_nav > a:has(> #offer_thema1){
        order:2;
        flex:0 0 auto;
        display:flex;
        align-items:center;
    }
    #m_header #hd_search{ order:1; }
    #m_header #m_header_topbar{ order:3; }
    /* To #hd_search exei margin:0 auto (grammi 199) kai to #m_header_topbar
       margin-left:auto. Me DYO auto perithoria o eleftheros xoros moirazetai
       stа dyo, opote to mpanaraki katelige sti mesi (262px keno ekaterothen).
       Midenizoume mono to deksi auto tis anazitisis, wste to mpanaraki na
       kollaei dipla tis kai na sprroxnei to topbar deksia to auto tou topbar.
       Mono otan yparxei to mpanaraki - sta themata 2 kai 3 tipota den allazei. */
    #m_header:has(#offer_thema1) #hd_search{ margin-right:0; }
    /* Eidikotita 2,0,0 - nikaei to #offer_thema1 (1,0,0) tou home.css.
       PROSOXI: DEN grafoume display edo. To home.css to kryvei me
       @media (max-width:1230px){#offer_thema1{display:none}} kai afto to
       block (1025px) to kalyptei - ena display:block me 2,0,0 tha to
       ksekryve stin zoni 1025-1230, pou DEN to theloume. Xoris display,
       menei krymmeno ekei kai to <a> (flex) to blockopoiei apo panw. */
    #m_header #offer_thema1{
        position:static;
        left:auto;
        top:auto;
    }
}


/* --- 10) Kinito kai tablet ----------------------------------------------
   To ypsos menei 60px opos itan, wste na min allaksei to padding-top tou
   .m-body se kamia selida. I anazitisi den xoraei sti grammi: ginetai
   koumpi-megethyntikos pou tin anoigei PANO apo tin grammi (overlay), ara
   i diataxi den metakineitai katholou. -------------------------------- */
@media (max-width:1024px){
    #m_header{ height:60px; }
    #m_header > #above_top{ display:none; }
    #m_header > .m-container{
        height:60px;
        gap:10px;
        padding:0 12px;
    }
    #m_header #m_header_nav{ gap:10px; }
    #m_header #m_header_topbar{ gap:10px; }

    #m_header #admin-logo{ max-width:120px; max-height:34px; }

    /* Eisodos/Profil: mono to eikonidio mesa sto syrtari - edo perisseuei */
    #m_header #login_vis,
    #m_header #login_vis_profil{ display:none !important; }

    #m_header #mymenu,
    #m_header #mymenu_grammes,
    #m_header #hd_search_toggle{ display:flex; }

    /* Seira se kinito: prota oi energeies (kalathi, spiti), meta i
       anazitisi kai teleftaia i ploigisi - opos to perimenei to xeri. */
    #m_header #m_header_topbar > a:has(#floating_cart){ order:1; }
    #m_header #m_header_topbar > a:has(.home_btn){ order:2; }
    #m_header #mymenu{ order:3; }
    #m_header #mymenu_grammes{ order:4; }
    #m_header #m_header_topbar > a:has(#login_company_icon){ order:5; }
    #m_header #hd_search_toggle{ order:2; margin-left:auto !important; }
    #m_header #m_header_topbar{ order:3; margin-left:0 !important; }

    #m_header #floating_cart{ padding-left:0; border-left:0; }
    #m_header #price_container{ font-size:14px; }
    #m_header .home_btn{ width:36px; height:36px; font-size:15px !important; }
    #m_header #login_company_icon{ width:22px !important; }

    /* --- i anazitisi os overlay --- */
    #m_header #hd_search{
        position:absolute;
        top:11px;
        left:12px;
        right:12px;
        z-index:5;
        max-width:none;
        height:38px;
        margin:0;
        display:none;
    }
    #m_header.hd_search_open #hd_search{ display:flex; }
    #m_header.hd_search_open #hd_search_toggle{ color:var(--hd_accent) !important; }
    #m_header #hd_search #search_input{ padding-left:16px !important; font-size:14px; }
    #m_header #hd_search #search_button{ width:32px; height:32px; }
}

@media (max-width:420px){
    #m_header > .m-container{ gap:6px; padding:0 10px; }
    #m_header #m_header_nav,
    #m_header #m_header_topbar{ gap:6px; }
    #m_header #admin-logo{ max-width:96px; }
    #m_header #price_container{ font-size:13px; }
    #m_header #mymenu,
    #m_header #mymenu_grammes,
    #m_header #hd_search_toggle{ width:32px; height:32px; font-size:18px !important; }
}
