#bottom_out {
    padding-bottom: 20px;
    padding-top: 20px;
}

#bottom_out>div.container>div>div>div>div {
    color: #262626;
    font-family: 'PF Futura Neu Book';
    font-size: 11px;
}

#bottom_out>div.container>div>div>div>ul>li>a {
    color: #262626;
    letter-spacing: .15em;
    text-transform: uppercase;
}

#filter_basic {
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 10px;
}

#footer {
    padding-top: 20px;
    background-color: #FFF;
}

#footer #bottom_out{
 background-color: #f7f2ed;
}

.bottom_item {
    background-color: #f7f2ed;
}

#footer a {
    /* color: #000; */
    font-family: 'Manrope-Light';
    font-size: 12px;
    letter-spacing: .06em;
}

#footer_right a {
    color: #000;
    font-size: 12px;
}

.cards-logo #on-mobile {
    height: 120px;
    width: 340px;
    display: none;
}

.cards-logo img {
    /* Σταθερό width + επιβεβλημένο aspect-ratio παραμόρφωνε κάθε logo που δεν ήταν 118/75.
       Το νέο στήσιμο (ενιαίο ύψος, auto πλάτος) είναι στο τέλος του αρχείου. */
    /* width: 70px; */
    /* aspect-ratio: 118 / 75; */
}

#header_desktop {
    background: #fff;
    font-family: 'Manrope-ExtraLight';
    /* padding-bottom: 15px; */
    padding-top: 0;
}

#megethologio .modal-body img {
    display: table;
    height: auto!important;
    margin: 0 auto;
    max-width: 100%;
}

#mobile_menu_btn,
#close_mobile_menu,
#close_filter_resp,
span.caret {
    cursor: pointer;
}

#close_mobile_menu .far {
    font-weight: 300;
}

#owl_product_quick,
.owl_product_r .item {
    overflow: hidden;
    position: relative;
}

#product_quantity {
    border: 1px solid #ccc;
    float: left;
    max-width: 120px;
}

#product_tabs_bottom {
    font-size: 15px;
    height: 165px;
    letter-spacing: .1px;
    line-height: 18px;
    overflow-y: auto;
}

#product_tabs_bottom_in {
    color: #4D4D4D;
    font-size: 16px;
    padding-bottom: 20px;
    padding-top: 20px;
    text-align: justify;
}

#product_tabs_top {
    background: #F7F7F7;
    position: relative;
}

#product_tabs_top .nav-tabs {
    display: flex;
    justify-content: space-around;
}

#product_tabs_top .nav-tabs>li {
    flex: auto;
    margin-bottom: 0;
    text-align: center;
}

#product_tabs_top .nav-tabs>li>a {
    color: #4D4D4D;
    font-family: CeraGreek-Medium, Arial, Helvetica, sans-serif;
    font-size: 18px;
}

#product_tabs_top .nav-tabs>li>a.active,
#product_tabs_top .nav-tabs>li>a.active:hover,
#product_tabs_top .nav-tabs>li>a.active:focus {
    background-color: #F7F7F7;
    border: 1px solid transparent;
    border-bottom: 3px solid #FFD1D1;
}

#product_tabs_top .nav-tabs>li>a:hover {
    border-bottom: 3px solid #FFD1D1;
    border-color: #F7F7F7;
}

#product_tabs_top .nav>li>a:hover,
#product_tabs_top .nav>li>a:focus {
    background-color: #F7F7F7;
}

#search-text {
    /* font-family: 'PF Futura Neu Light', Verdana, Arial, Helvetica, sans-serif; */
    font-family: 'Manrope-Regular', Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}

.accordion-footer-content,
nav#mobile_menu .menu_item_data_m,
nav#mobile_menu .sub_menu_item_data_m,
nav#mobile_menu .sub_sub_menu_item_data_m,
label[for="search-text-r"],
label[for="news_email"],
label[for="search-text"]
{
    display: none;
}

.accordion-footer-content ul,
ul.accordion-footer-content
 {
    list-style-type: none;
    padding: 10px 0 0 0;
}

nav#mobile_menu .mobile-static-rest-links .menu_item_title_m .accordion-footer-content a {
    font-family: 'Manrope-Light', Arial, Helvetica, sans-serif;
    font-size: 13px;
    letter-spacing: .06em;
    padding: 10px 0 0 0;
}

.banner_img {
    display: flex;
    justify-content: center;
    align-items: center;
}

.banners_cat {
    background-color: #eee0d3;
    margin-bottom: 0;
    margin-top: 40px;
    /* padding: 0 140px; */
    /* padding: 0 11em; */
    padding: 0 9%;
}

.banners_cat .banner_title_area {
    margin-top: 80px;
}

.banners_cat .homepage_item_more,
.banners_cat>.main_box_area.cat_area {
    background-color: transparent;
    color: #262626;
    font-family: 'Manrope-Light', Verdana, Arial, Helvetica, sans-serif;
    font-size: 22px;
    letter-spacing: 0.06em;
}

.banners_cat .main_box_area.cat_area {
    margin: 0 auto;
    padding-top: 95px;
    padding-bottom: 80px;
}

.ins_feed_title {
    position: static;
    top: 0;
    left: 0;
    margin: 0;
}

.ins_feed_img {
    background-color: #fff;
    color: #231F20;
    font-family: 'Manrope-ExtraLight';
    font-size: 38px;
    font-weight: 400;
    width: auto;
    border-bottom: 4px solid #f05a28;
}

.basket-text,
.search-text {
    color: #b3b3b3;
    font-family: CeraGreek-Regular, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-right: 5px;
}

.basket_btn {
    -moz-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    -webkit-transition: all .3s ease-in-out 0s;
    background: #333;
    cursor: pointer;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    transition: all .3s ease-in-out 0s;
}

.basket_btn a {
    background: url(/images/design/cart_bag.png) right center no-repeat;
    background-size: 20px 26px;
    font-weight: normal;
    letter-spacing: 0.12em;
    -moz-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    -webkit-transition: all .3s ease-in-out 0s;
    color: #fff!important;
    display: block;
    font-family: 'Manrope-SemiBold';
    font-size: 14px;
    padding: 20px 10px;
    transition: all .3s ease-in-out 0s;
    /* padding-left: 43px; */
    padding-right: 100px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.bottom_item h3 {
    color: #262626;
    font-family: 'Manrope-Light';
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .15em;
    margin-bottom: 15px;
}

.bottom_item ul li a {
    color: #333;
    display: block;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: .5px;
    margin-bottom: 4px;
}

.cart-details {
    font-size: 15px;
}

.cart-text {
    letter-spacing: .8px;
}

.cart-text-total {
    font-size: 24px;
}

.circle-font .filter_checkbox_item input[type="checkbox"]+label span:after {
    content: '\f111';
    font-family: 'Font Awesome 5 Pro';
}

.circle-font .filter_checkbox_item input[type="checkbox"]:checked+label span:after {
    color: #FFD1D1;
    content: '\f111';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 700;
}

.col.footer-cols {
    /* border-top: 1px solid #ccc; */
    padding-top: 15px;
}

.col.footer-cols:last-child {
    /* border-bottom: 1px solid #ccc; */
}

.color_item {
    height: 25px;
    width: 25px;
}

.color_box_in {
    border-radius: 100px;
    width: 34px;
    height: 34px;
}

.color_item,
.color_item img {
    border-radius: 100px;
    padding: 0;
}

.custom-icon-phone {
    font-size: 35px;
}

.custom-icons-1,
.custom-icons-1>div>div>div>div>div {
    background-color: #333;
}

.custom-phone-title {
    color: #FFF;
    font-size: 30px;
    letter-spacing: 1px;
}

.custom-phone-title a {
    color: #FFF;
}

.custom-subtitle {
    background-color: #333;
    color: #FFF;
    font-size: 15px;
    letter-spacing: 1px;
}

.custom-title {
    color: #FFF;
    font-size: 21px;
    letter-spacing: 1px;
}

.eshop_oroi input[type="checkbox"]+label {
    color: #262626;
}

.eshop_oroi.newsletter_terms {
    float: none;
    margin: 60px 0 70px;
}

.fb-plugin-followers {
    margin-top: 20px;
    max-width: 250px;
}

.filter_area_categories {
    /* background: #fff;  <- παλιό, λευκό κουτί πάνω στο off-white της λίστας */
    background: transparent;
    position: relative;
}

/* Καμία λευκή επιφάνεια μέσα στα φίλτρα: κάθε γραμμή κατηγορίας είχε δικό της
   λευκό πλαίσιο από το .filter_categories_item_title { background:#fff } του
   css/global-style.css:3129 (με 2px margin → οι χαρακτηριστικές λωρίδες), και τα
   υπόλοιπα blocks το γκρι .with_bg_color από το global:6252.
   ΔΕΝ αγγίζουμε το mobile drawer (.filter_responsive / .filter_responsive_left),
   που κρατάει το δικό του λευκό φόντο. */
.filter_categories_item_title,
.sub_filter_categories_item_title,
.sub_sub_filter_categories_item_title,
.sub_sub_sub_filter_categories_item_title {
    /* background: #fff;  <- παλιό, ερχόταν από το global */
    background: transparent;
}

.filter_area_item,
.filter_area_item.with_bg_color,
.filter_area_item_area,
.filter_area_item_area_in,
.filter_categories_item,
.filter_categories_item_data,
.sub_filter_categories_item_data,
.sub_sub_filter_categories_item_data {
    /* background: #f0f3f6;  <- παλιό στο .with_bg_color */
    background: transparent;
}

.filter_area_item_area .filter_item_data a {
    display: block;
    font-size: 14px;
    padding-left: 5px;
    padding-right: 5px;
    font-family: 'Manrope-Light';
    color: #5B5B5B;
}

/* Χωρίς αλλαγή χρώματος στο hover: το css/global-style.css:6238 έβαφε το link
   κόκκινο (#E0001A). Κρατάμε το ίδιο #5B5B5B με την κανονική κατάσταση. */
.filter_area_item_area .filter_item_data:hover a {
    /* color: #E0001A;  <- παλιό, ερχόταν από το global */
    color: #5B5B5B;
}

.filter_area_item_title {
    color: #000;
    cursor: pointer;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: .5px;
    padding-top: 5px;
    padding-bottom: 20px;
    position: relative;
}

.filter_area_item_title_in {
    font-family: 'Manrope-SemiBold';
    font-size: 16px;
}

.filter_categories_item_data {
    margin-left: 10px;
}

.filter_categories_item_title a {
    color: #000;
    cursor: pointer;
    display: block;
    font-family: 'Manrope-Light';
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .01em;
    padding: 5px;
}

.filter_categories_item.active-filter-category > div:not(.filter_categories_item_data) a,
.sub_filter_categories_item.active-filter-category > div:not(.sub_filter_categories_item_data) a,
.sub_sub_filter_categories_item.active-filter-category > div:not(.sub_sub_filter_categories_item_data) a,
.sub_sub_sub_filter_categories_item_title.active-filter-category a {
    font-family: 'Manrope-SemiBold';
}

.filter_checkbox_item input[type="checkbox"]+label span {
    color: gray;
    cursor: pointer;
    display: inline-block;
    float: left;
    height: 20px;
    margin: 0 10px 0 0;
    vertical-align: middle;
    width: 20px;
}

.filter_checkbox_item input[type="checkbox"]+label span:after {
    content: '\f111';
    font-family: 'Font Awesome 5 Pro';
    color: #5B5B5B;
    font-size: 19px;
}

.filter_checkbox_item input[type="checkbox"]:checked+label span:after {
    /* content: '\f14a'; */
    /* font-family: 'Font Awesome 5 Pro'; */
    content: '\f058';
    font-family: 'FontAwesome';
}

.filter_checkbox_item label {
    color: #5B5B5B;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    margin: 0;
    font-family: 'Manrope-Light';
}

.filter_responsive {
    background: #FFF;
    display: none;
    left: -300px;
    position: absolute;
    top: 45px;
    z-index: 1550;
}

.filter_responsive .filter_area_prices {
    width: 260px;
}

.filter_responsive_left {
    background: #fff;
    float: left;
    height: 100vh;
    overflow-y: scroll!important;
    position: relative;
    width: 300px;
    z-index: 1;
}

.filter_responsive_right {
    background: #000;
    cursor: pointer;
    float: left;
    margin-top: 10px;
    padding: 15px 14px;
    position: relative;
    z-index: 2;
}

.filter_responsive_right_in {
    background: url(/images/design/slider_filter.png) no-repeat;
    background-position: top left;
    height: 13px;
    width: 14px;
}

.filter_responsive_right_in.active {
    background-position: bottom left;
}

.filter_text_prices {
    color: #000;
    font-family: 'Manrope-Light', Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
}

.filter_text_prices a {
    color: #808080;
    display: block;
    letter-spacing: 0.16em;
    padding: 8px;
}

.filter_title {
    border-bottom: 1px solid #979797;
    color: #000;
    font-family: 'Manrope-ExtraBold';
    font-size: 13px;
    letter-spacing: .14em;
    margin-bottom: 20px;
    margin-left: 20px;
    padding: 12px 0;
}

.filters-resp-bar {
    background: #FFD1D1;
    color: #262626;
    font-size: 13px;
    height: 50px;
    letter-spacing: 1px;
}

.filters-resp-bar .select_box2 {
    background: none;
}

.footer-copyright {
    border-top: 1px solid #ccc;
    color: gray;
}

.footer-hours-in {
    color: #333;
    font-size: 14px;
    letter-spacing: normal;
}

.goto_basket {
    -moz-transition: all .3s ease-in-out 0;
    -o-transition: all .3s ease-in-out 0;
    -webkit-transition: all .3s ease-in-out 0;
    background: #f5afaf;
    border-radius: 4px;
    cursor: pointer;
    float: left;
    padding-left: 20px;
    padding-right: 20px;
    transition: all .3s ease-in-out 0;
}

.goto_basket a {
    -moz-transition: all .3s ease-in-out 0;
    -o-transition: all .3s ease-in-out 0;
    -webkit-transition: all .3s ease-in-out 0;
    color: #fff;
    display: block;
    font-family: CeraGreek-Bold, Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 3px;
    padding-bottom: 13px;
    padding-top: 13px;
    transition: all .3s ease-in-out 0;
}

.goto_basket:hover {
    background: #333;
}

.homepage_tab_data .far {
    color: #666;
    font-size: 20px;
    font-weight: 100;
}

.homepage_tabs li a:not(.active) h3 {
    color: #525252;
}

.homepage_tabs_top {
    max-width: 500px;
}

.logo-wrapper .logo {
    /* max-width: 270px; */
    max-width: 224px;
}

/* Μεσαία ζώνη header: 125px ύψος, όλα κάθετα κεντραρισμένα (όπως στο design) */
.main-header {
    height: 125px;
}

#header_desktop .search_space {
    padding-left: 23px;
}

.main-header>.row {
    height: 100%;
    align-items: center;
}

.main_content_out {
    position: relative;
    z-index: 11;
}

.menu_column_container {
    /* column-count: 4; */
    /* column-count: 3; */
    column-count: 2;
    column-gap: 30px;
    column-width: 25%;
    width: 100%;
}

.menu_column_container div {
    display: inline-block;
    margin-bottom: 10px;
    padding-left: 10px;
    width: 100%;
}

.menu_column_container div.sub_menu_item.has-children {
    cursor: pointer;
}

.sub_menu_item.has-children .sub_menu_item_data.hide {
    display: none;
}

.menu_img a {
    display: block;
    padding: 0!important;
}

.menu_img img {
    border-radius: 5px;
}

.menu_item_bottom {
    background: #fff;
    display: none;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1;
}

.menu_item_bottom .menu_in_col {
    padding-left: 30px;
    padding-right: 30px;
}

.menu_item_bottom .menu_in_col:nth-child(4n+1) {
    clear: both;
}

.menu_item_bottom_in_in {
    padding: 22px 15px 15px;
    width: 90%;
    margin: auto;
    margin-right: 0;
}

.menu_out {
    background-color: #262626;
    position: relative;
    z-index: 15;
    margin-bottom: 0px;
}

.menu_wrapper_bg {
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 15;
}

.metaforika-header-div {
    background-color: #eee0d3;
    /* height: 40px; */
    height: 49px;
}

/* Στο mobile design η λωρίδα είναι 26px με μικρότερα γράμματα (desktop: 49px / 15px) */
.metaforika-mobile-header-div {
    height: 26px;
}

/* Φωτογραφία στην κορυφή του mobile menu (settings_website.photo_mobile_menu).
   Περιθώρια μετρημένα στο Preview/Mobile/02-Infi-Eshop-Menu.jpg: ~15px δεξιά
   κι αριστερά, ~30px κενό μέχρι το πρώτο στοιχείο του μενού. */
.mobile_menu_photo {
    margin: 0 15px 24px 15px;
}

.mobile_menu_photo a {
    display: block;
}

.mobile_menu_photo img {
    display: block;
    height: auto;
    width: 100%;
}

.metaforika-mobile-header-div .metaforika-wrapper {
    letter-spacing: 0.1em;
    font-size: 12px;
}

.metaforika-wrapper {
    color: #262626;
    /* font-family: 'Manrope-Light', Arial, Helvetica, sans-serif; */
    font-family: 'Manrope-Light';
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .1em;
    position: relative;
}

.metaforika-wrapper p{
    margin:0 !important;
}

.mobile-header-div .top_item a,
#close_mobile_menu,
#close_filter_resp {
    font-size: 24px;
}

.mobile_header .top_item a span.font-icons {
    font-size: 24px;
}

/* --- Mobile header: μεγέθη/χρώμα εικονιδίων & κάθετο padding από το
       Preview/Mobile/01-Infi-Eshop-Home.jpg (360px artboard) --- */
.mobile-header-div {
    padding-bottom: 7px;
    padding-top: 7px;
}

/* μόνο στο <a> - τα spans των εικονιδίων κληρονομούν, ενώ τα .num_wish/.num_pieces
   κρατούν το δικό τους λευκό */
#header_mobile .mobile-header-div .top_item a {
    color: #262626;
}

#header_mobile .mobile-header-div .fa-bars {
    font-size: 29px;
}

/* Στο design το κενό ανάμεσα σε burger & φακό είναι μικρότερο από το δεξί ζευγάρι */
#header_mobile .mobile-header-div>.d-flex:first-child .top_item {
    margin-right: 14px;
}

#header_mobile .mobile-header-div .fa-search {
    font-size: 24px;
}

/* καρδιά & τσάντα ίδιο μέγεθος ώστε να δείχνουν ισοβαρείς - το FA σχεδιάζει
   την καρδιά 1.000em x 0.875em και την τσάντα 0.875em x 1.000em, οπότε με ίδιο
   font-size τα δύο εικονίδια βγαίνουν οπτικά ίσα (όπως στο design) */
#header_mobile .mobile-header-div .fa-heart {
    /* font-size: 24px; */
    font-size: 23px;
}

#header_mobile .mobile-header-div .fa-shopping-bag {
    /* font-size: 21px;  <-- έβγαινε αισθητά μικρότερη από την καρδιά */
    font-size: 23px;
}

.mobile-static-rest-icons {
    width: 20px;
    transform: rotate(90deg);
}

.mobile-static-rest-icons.far {
    font-weight: 300;
}

.mobile-static-rest-links {
    /* background-color: #F6F6F6; */
}

.mobile-static-rest-links .menu_item_title_m a {
    margin-left: 15px;
}

.nav-tabs,
.homepage_tabs li a:not(.active) .title_b span {
    border-bottom: none;
}

.newsletter-section {
    background-color: #FAFAFA;
}

.newsletter_area_out_bottom {
    margin: 0 auto;
    width: 520px;
}

.newsletter_area_out_top {
    color: #262626;
    font-family: 'Manrope-Light';
    font-size: 18px;
    letter-spacing: .06em;
    margin: 10px auto 85px;
    width: 640px;
}

.newsletter_item {
    border: 1px solid transparent;
    border-bottom: 1px solid #262626;
    margin-bottom: 10px;
    padding-left: 13px;
    padding-right: 13px;
}

.newsletter_item input[type="text"] {
    background: none;
    border: none;
    color: #262626;
    font-size: 19px;
    height: 36px;
    letter-spacing: 1.3px;
    line-height: 36px;
    margin: 0;
    outline: none;
    padding: 0;
    text-align: left;
    width: 100%;
}

.newsletter_results_exit_intent {
    background: #fff;
    margin-top: 8px;
}

.newsletter_results {
    font-family: 'PF Futura Neu Book', Arial, Helvetica, sans-serif;
}

.newsletter_submit {
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    background: #262626;
    color: #fff;
    cursor: pointer;
    font-family: 'Manrope-Medium';
    font-size: 16px;
    height: 40px;
    letter-spacing: .15em;
    line-height: 40px;
    margin: 0 auto;
    max-width: 155px;
    text-align: center;
    transition: all .3s ease;
}

.newsletter_submit_exit_intent {
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    align-items: center;
    background: #333;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-family: CeraGreek-Medium, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
    height: 38px;
    justify-content: center;
    letter-spacing: 3px;
    margin-left: 10px;
    text-align: center;
    transition: all .3s ease;
    width: 40%;
}

.newsletter_submit_exit_intent:hover {
    background: #1a1a1a;
}

.newsletter_title {
    padding-top: 85px;
}

.newsletter_title h3 {
    color: #262626;
    font-family: 'Manrope-ExtraBold';
    font-size: 36px;
    letter-spacing: .12em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.no_products_image {
    max-width: 200px;
}

.option_item2 a {
    color: #333;
    display: block;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .9px;
    padding: 8px 10px;
}

.option_item2 a:hover {
    background: #333;
    color: #fff;
}

.owl_slider_companies.owl-carousel .owl-nav .owl-next {
    font-size: 20px;
    margin-right: -20px;
    position: absolute;
    right: 0;
    top: 40%;
}

.owl_slider_companies.owl-carousel .owl-nav .owl-prev {
    font-size: 20px;
    left: 0;
    margin-left: -20px;
    position: absolute;
    top: 40%;
}

.owl_slider_companies.owl-carousel .owl-nav.disabled {
    display: block!important;
}

.p_features {
    max-width: 750px;
}

.photo_small {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    margin-bottom: 3px;
    /* margin-top: 3px; */
}

.pink-cirle {
    background: #FFD1D1;
    border-radius: 20px;
    font-size: 13px;
    height: 20px;
    right: -10px;
    top: -10px;
    width: 20px;
}

.pro_area .pr_item {
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    padding-left: 10px;
    padding-right: 10px;
    transition: all .4s ease;
}

.product {
    text-align: left;
}

.product_favorite {
    -moz-transition: all .3s ease 0;
    -o-transition: all .3s ease 0;
    -webkit-transition: all .3s ease 0;
    cursor: pointer;
    float: left;
    /* font-size: 30px; */
    font-size: 25px;
    transition: all .3s ease 0;
}

.product_favorite:hover span::before {
    content: '\f004';
}

.product_feautures .div_table,
.product_buttons {
    align-items: center;
    display: flex;
}

.product_item_cart {
    bottom: 15px;
    color: #333;
    cursor: pointer;
    float: left;
    font-size: 22px;
    position: absolute;
    right: 20px;
    z-index: 2;
}

.product_item_favorite {
    cursor: pointer;
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 2;
}

.product_item_favorite span.far.fa-heart {
    color: #979797;
}

.product_item_favorite span.fas.fa-heart,
.product_favorite:hover span {
    color: #a88465;
}

.product_item_icons {
    left: 7px;
    top: 10px;
    z-index: 3;
}

.product_item_icons_item {}

.product_item_image {
    overflow: hidden;
    position: relative;
}

.product_item_image_in .product_item_icons {
    position: absolute;
}

.product_item_image_in .product_item_icons_item {
    margin-bottom: 8px;
    margin-right: 0;
}

.product_item_new {
    background: #000;
}

.color_box_in {
    border-radius: 100px;
    width: 34px;
    height: 34px;
}

.product_item_offer,
.product_item_new,
.product_item_best {
    /* στρογγυλά 48άρια — αντικαταστάθηκαν από ορθογώνια tags (βλ. τέλος αρχείου) */
    /* height: 48px; */
    /* width: 48px; */
    text-align: center;
}

.product_item_offer_in,
.product_item_new_in,
.product_item_best_in {
    align-items: center;
    align-self: center;
    display: flex;
    font-family: 'Manrope-Light', Arial, Helvetica, sans-serif;
    font-size: 18px;
    height: inherit;
    justify-content: center;
    color: #fff;
    /* margin: 0 5px 0 0; */
}

.product_item_new_in {
    font-size: 16px;
}

.product_item_best_in {
    font-size: 13px;
}

.product_item_prices {
    color: #262626;
    display: table;
    font-family: 'Manrope-Light', Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
}

.products_price_old.strikediag {
    color: #808080;
}

.product_item_text {
    height: fit-content;
    margin-top: 20px;
    padding: 0;
    text-align: left;
}

.product_item_text h3 {
    color: #262626;
    font-family: 'Manrope-Light';
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.product_item_text h4 {
    color: #b3b3b3;
    font-family: CeraGreek-Bold, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .7px;
}

.product_price {
    align-items: center;
    color: #333;
    display: flex;
    font-family: 'Manrope-Light', Arial, Helvetica, sans-serif;
    font-size: 29px;
    font-weight: 400;
    flex-wrap: wrap;
}

.product_price .products_price_new {
    color: #000;
    float: left;
    font-size: 26px;
}

.product_price .products_price_old {
    color: #999;
    float: left;
    font-size: 20px;
    font-weight: 400;
    margin-left: 15px;
    margin-top: 0;
    position: relative;
}

.product_social {
    align-items: center;
    color: #333;
    display: flex;
    font-size: 13px;
    font-weight: 400;
    justify-content: start;
    letter-spacing: 1.3px;
    line-height: 37px;
    margin-top: 45px;
}

.product_tabs {
    margin: 20px auto 0;
}

.product_title h1 {
    color: #000;
    font-size: 24px;
    font-family: 'Manrope-Light';
    margin-bottom: 5px;
}

.product_title h2 {
    color: #808080;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
}

.product_title h4 {
    color: #4D4D4D;
    font-family: CeraGreek-Bold, Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.products_bar_out.top {
    /* border-bottom: 1px solid #000; */
    /* border-bottom: 1px solid #979797; */
    margin-bottom: 5px;
    padding-left: 15px;
}

.products_bar_out.top>.row {
    padding-bottom: 5px;
    border-bottom: 1px solid #979797;
}

.products_bar_out {
    padding-top: 5px;
    padding-bottom: 5px;
}

.products_counter {
    color: #808080;
    display: block;
    font-family: 'Manrope-Light';
    font-size: 13px;
    letter-spacing: .16em;
    margin: 20px 0;
}

.products_price_new {
    color: #262626;
    float: left;
}

.products_price_old {
    float: left;
    font-family: 'Manrope-Light', Arial, Helvetica, sans-serif;
    margin-left: 5px;
    position: relative;
}

.refresh_price a {
    background: #fff;
    /* border: 1px solid #8c8c8c; */
    color: #808080;
    display: block;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.16em;
    padding: 8px;
}

.refresh_price a:hover {
    /* background: #FFD1D1; */
    color: #fff;
}

.responsive-menu-overlay {
    background: #333333;
    height: 100%;
    left: 0;
    opacity: 0.7;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1500;
}

.right_side_menu_opened #wrapper {
    left: 337px;
}

.search {
    /* border: 1px solid #ccc; */
    /* border-radius: 20px; color: #666; height: 45px; max-width: 550px;  <-- πριν το redesign */
    background-color: #f7f2ed;
    border-radius: 999px;
    color: #000;
    height: 37px;
    max-width: 337px;
    position: relative;
    width: 100%;
    z-index: 16;
}

.search_in {
    position: relative;
    z-index: 5;
}

.search_left {
    /* display: table-cell; width: 100%; */
    flex: 1 1 auto;
    min-width: 0;
}

/* .search_left_in {
    padding-left: 15px;
    padding-right: 20px;
} */

.search_left_in {
    width: 100%;
}

.search_left input[type="text"] {
    background: none;
    border: none;
    /* border-bottom: 1px solid #000; color: #525252; font-size: 16px; height: 15px;
       line-height: 45px; letter-spacing: normal; margin-left: 10px;  <-- πριν το redesign */
    color: #000;
    font-size: 13px;
    font-weight: 400;
    height: 35px;
    letter-spacing: 1px;
    line-height: 35px;
    margin: 0;
    outline: medium none;
    padding: 0;
    text-align: left;
    width: 100%;
}

.search_left input[type="text"]::placeholder {
    color: #000;
    opacity: 1;
}

.search_left input[type="text"]::-webkit-input-placeholder {
    color: #000;
}

.search_left input[type="text"]:-ms-input-placeholder {
    color: #000;
}

.search_right {
    /* display: table-cell; vertical-align: middle; width: 1%; */
    flex: 0 0 auto;
    position: relative;
    white-space: nowrap;
}

.search_right button {
    background-color: transparent;
    border: none;
    /* font-size: 22px; height: 45px; padding: 0 15px 0 20px;  <-- πριν το redesign */
    color: #000;
    display: flex;
    align-items: center;
    font-size: 24px;
    height: 35px;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.search_select2 {
    color: #333;
    cursor: pointer;
    margin-left: 5px;
    margin-right: 30px;
    position: relative;
    text-align: center;
    z-index: 101;
}

.search_select2::after {
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    /* margin-left: 10px; */
}

.search_select_in2,
.search_select_in2_title_left {
    color: #808080;
    display: inline;
    font-size: 13px;
    font-weight: 400;
    height: 25px;
    letter-spacing: .9px;
    line-height: 28px;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    width: 110px;
}

.search_select_in2 {
    font-family: 'Manrope-SemiBold';
    letter-spacing: 0.16em;
}

.select_box2 {
    text-transform: uppercase;
    width: auto;
}

.select_options2 {
    background: #fff;
    border: 1px solid #000;
    display: none;
    max-height: 300px;
    min-width: 150px;
    overflow: auto;
    position: absolute;
    z-index: 102;
}

.show-filters-resp {
    border-right: 1px solid #FFF;
}

.slide_filter.sign.close:after {
    color: #000;
    /* content: '\f068'; */
    content: '\f067';
    font-family: 'Font Awesome\ 5 Pro';
    font-size: 9px;
    /* margin-top: -4px; */
    margin-top: 5px;
    position: absolute;
    right: 0;
    /* top: 50%; */
}

.slideshow .owl-dots {
    margin-top: 20px;
    text-align: center;
}

.slideshow .owl-dots .owl-dot span {
    background: #ccc;
    border: 1px solid #ccc;
    border-radius: 20px;
    display: block;
    height: 12px;
    margin: 5px 7px;
    width: 12px;
}

.slideshow .owl-dots .owl-dot.active span {
    background: #999;
    border: 1px solid #999;
    height: 14px;
    width: 14px;
}

.socials {
    margin-bottom: 48px;
}

.social_item {
    align-items: center;
    background: #262626;
    background-color: #262626;
    border-radius: 50px;
    color: #333;
    display: flex;
    font-size: 25px;
    /* height: 40px; */
    justify-content: center;
    margin-right: 20px;
    /* width: 40px; */
    width: 50px;
    height: 50px;
}

.social_item>a>span {
    color: #fff;
    font-size: 22px;
    line-height: 35px;
}

.social_item_s {
    float: left;
    margin-right: 10px;
}

.social_item_s a {
    color: #333;
    display: block;
    font-size: 16px;
}

.social_item_s:not(.share-button) {
    align-items: center;
    display: flex;
    height: 25px;
    justify-content: center;
    width: 25px;
}

.strikediag {
    text-decoration: line-through;
}

.sub_filter_cat_t {
    color: #5B5B5B;
    font-family: 'PF Futura Neu Medium';
    font-size: 14px;
    font-weight: 400;
}

.sub_filter_categories_item_title a {
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    color: gray;
    cursor: pointer;
    display: block;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .6px;
    padding: 5px;
    transition: all .4s ease;
}

.menu_column_container div.sub_menu_item_title {
    display: flex;
    /* gap: 40px; */
    gap: 12px;
    align-items: center;
}

.sub_menu_item_title>a {
    font-family: 'Manrope-Light';
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* "Εμφάνιση όλων": ίδιο μέγεθος με τα υπόλοιπα, αλλά πεζά.
   Στο design (Preview/Desktop/05-Infi-Eshop-Menu.jpg) έχει και υπογράμμιση 1px,
   αλλά κατόπιν αιτήματος μένει χωρίς:
   text-decoration: underline;
   text-underline-offset: 2px; */
/* Στοιχεία 3ου επιπέδου: δεν είχαν κανέναν κανόνα, οπότε έβγαιναν στο
   προεπιλεγμένο μέγεθος του browser - μεγαλύτερα από τη γονική κατηγορία.
   Ίδια οικογένεια/tracking με τον γονέα, ένα σκαλί μικρότερα (12px -> 11px). */
.menu_column_container .sub_menu_data_item>a {
    color: #262626;
    display: block;
    font-family: 'Manrope-Light';
    font-size: 11px;
    letter-spacing: 0.1em;
    text-decoration: none;
}

.menu_column_container .show_all_item .sub_menu_item_title>a,
.menu_column_container .sub_menu_data_item.show_all_item>a {
    text-transform: none;
    text-decoration: none;
}

.sub_sub_filter_categories_item_title a {
    color: gray;
    display: block;
    font-size: 14px;
    font-weight: 400;
    padding: 5px 20px 5px 30px;
}

.sub_sub_sub_filter_categories_item_title a {
    color: gray;
    display: block;
    font-size: 13px;
    font-weight: 400;
    padding: 5px 20px 5px 40px;
}

.tabs_item_title {
    background-color: #F7F7F7;
    color: #333;
    cursor: pointer;
    font-family: CeraGreek-Medium, Arial, Helvetica, sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 20px;
}

.tabs_item_title.active {
    background-color: #FFD1D1;
}

.telephone-wrapper {
    font-size: 24px;
    margin-right: 35px;
}

.telephone-wrapper a,
.footer-hours-in>div,
.product_item_cart a,
nav#mobile_menu .sub_menu_item_title_m.active a,
nav#mobile_menu .sub_sub_menu_item_title_m.active a,
nav#mobile_menu .sub_sub_sub_menu_item_title_m.active a,
.title_path a:last-child,
.sub_filter_categories_item_title:hover a,
.sub_filter_categories_item.active .sub_filter_categories_item_title a,
.sub_sub_filter_categories_item_title:hover a,
.sub_sub_filter_categories_item.active .sub_sub_filter_categories_item_title a,
.sub_sub_sub_filter_categories_item_title:hover a,
.sub_sub_sub_filter_categories_item_title.active a,
ul.my_pagination>li:hover>a,
ul.my_pagination>li.active>a,
.title_path a,
.products_delete_price {
    color: #808080;
}

.title_b {
    color: #262626;
    font-family: 'Manrope-Light', Arial, Helvetica, sans-serif;
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 0.12em;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
}

.title_path a {
    font-family: 'Manrope-Light';
    font-size: 13px;
    letter-spacing: .16em;
}

.title_path h2 {
    color: #808080;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .16em;
}

.products_bar_out.top .div_left {
    text-transform: uppercase;
}

.top-icons {
    position: absolute;
    /* right: 50px; */
    right: 45px;
}

#header_desktop .top_item {
    margin-right: 22px;
}

#header_desktop .top_item:last-child {
    margin-right: 0;
}

#header_desktop .top_item a {
    color: #262626;
}

#header_desktop .top_item a span.font-icons {
    font-size: 22px;
}

/* Στο design κάθε εικονίδιο είναι σκαλισμένο ξεχωριστά - μεγέθη μετρημένα
   πάνω στο Preview/Desktop/01-Infi-Eshop-Home.jpg (fal / Font Awesome Light) */
#header_desktop .top_item a span.font-icons.fa-heart {
    /* font-size: 24px; */
    font-size: 23px;
}

#header_desktop .top_item a span.font-icons.fa-user {
    font-size: 21px;
}

#header_desktop .top_item a span.font-icons.fa-shopping-bag {
    font-size: 23px;
}

.top_item {
    color: #979797;
    float: left;
    margin-right: 20px;
    position: relative;
}

.top_item a {
    align-content: center;
    align-items: center;
    align-self: center;
    color: #979797;
    display: flex;
    font-size: 11px;
    font-weight: 700;
}

.top_item a span.font-icons {
    font-size: 20px;
}

.top_item:last-child,
.product_item_icons_item:last-child,
ul.my_pagination>li:last-child {
    margin-right: 0;
}

.width-6px {
    width: 6px;
}

a.zoom_id.mag-glass {
    bottom: 15px;
    color: #E6E6E6;
    font-size: 25px;
    position: absolute;
    right: 15px;
}

body {
    font-family: 'Manrope-Light', Verdana, Arial, Helvetica, sans-serif;
}

button.owl-prev>span.far,
button.owl-next>span.far {
    font-size: 60px;
}

div#footer_left {
    /* color: #000; */
    color: #9B9C9E;
    font-size: 12px;
}

div.after-discount-per-cent-popup {
    color: #fff;
    font-family: CeraGreek-Regular, Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 400;
}

#footer_center a,
#footer_center,
#footer_right a {
    color: #9B9C9E;
}

div.avail {
    color: #333;
    font-size: 12px;
    margin-top: 10px;
}

div.avail.get-now {
    color: #000;
    font-family: 'Manrope-Light';
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 40px;
}

div.beforeyougo {
    color: #fff;
    font-family: CeraGreek-Medium, Arial, Helvetica, sans-serif;
    font-size: 35px;
    margin-top: 30px;
}

div.discount-per-cent-popup {
    color: #fff;
    font-family: CeraGreek-Medium, Arial, Helvetica, sans-serif;
    font-size: 70px;
}

div.exit-modal {
    color: #fff;
    cursor: pointer;
    float: right;
    font-size: 20px;
}

div.minxaseteekpt {
    color: #fff;
    font-family: CeraGreek-Regular, Arial, Helvetica, sans-serif;
    font-size: 20px;
    margin-top: 30px;
}

div.newsletter_area_exit_intent {
    align-content: center;
    align-items: center;
    align-self: center;
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
}

div.newsletter_area_exit_intent .newsletter_item {
    margin-bottom: 0;
    width: 60%;
}

div.num-pieces-text {
    font-family: CeraGreek-Medium, Arial, Helvetica, sans-serif;
    left: 47px;
    position: absolute;
    top: 5px;
}

div.toast.favorite-toast {
    display: none;
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 15000;
}

img.shipping-truck {
    margin-right: 5px;
    width: 44px;
}

nav#mobile_menu {
    background-color: #fff;
    border-right: 1px solid #cdcdce;
    height: 100%;
    left: 0;
    overflow: hidden;
    padding-bottom: 25px;
    position: fixed;
    top: 0;
    visibility: hidden;
    width: 337px;
    z-index: 310;
}

nav#mobile_menu .menu_item_m .sub_menu_item_m {
    /* border-bottom: 1px solid #cdcdce; */
    margin-left: 20px;
}

#mobile_menu_in .menu_item_m {
    padding-bottom: 25px;
}

nav#mobile_menu .menu_item_title_m {
    cursor: pointer;
    position: relative;
}

/* --- Βελάκια mobile menu ---
   Ίδιο μέγεθος/χρώμα σε όλα τα επίπεδα. Κλειστό = δείχνει δεξιά, ανοιχτό =
   δείχνει κάτω. Χρησιμοποιείται ΕΝΑ glyph (fa-angle-down) που περιστρέφεται,
   ώστε η κίνηση να είναι ομαλή - η εναλλαγή angle-right/angle-down δεν
   μπορεί να γίνει animate. Οι κλάσεις active-mob-menu-lv-1/2/3 μπαίνουν
   ήδη από το jquery_css.php. */
nav#mobile_menu .mob_menu_arrow {
    color: #b3b3b3;
    display: inline-block;
    flex: 0 0 14px;
    font-size: 12px;
    line-height: 1;
    margin-right: 8px;
    text-align: center;
    transform: rotate(-90deg);
    -webkit-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
    width: 14px;
}

nav#mobile_menu .menu_item_title_m.active-mob-menu-lv-1 .mob_menu_arrow,
nav#mobile_menu .sub_menu_item_title_m.active-mob-menu-lv-2 .mob_menu_arrow,
nav#mobile_menu .sub_sub_menu_item_title_m.active-mob-menu-lv-3 .mob_menu_arrow {
    transform: rotate(0deg);
}

/* το <a> είναι display:block - μέσα σε flex τίτλο πρέπει να γεμίζει τη γραμμή */
nav#mobile_menu .sub_menu_item_title_m>a,
nav#mobile_menu .sub_sub_menu_item_title_m>a {
    flex: 1 1 auto;
}

/* "Εμφάνιση όλων" στο mobile menu: πεζά, χωρίς βελάκι */
nav#mobile_menu .show_all_item_m a {
    text-transform: none;
}

nav#mobile_menu .menu_item_title_m a {
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    color: #262626;
    cursor: pointer;
    display: block;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: .6px;
    /* padding: 10px; */
    transition: all .4s ease;
    width: 100%;
}

nav#mobile_menu .sub_menu_item_title_m.active a {
    font-family: 'Manrope-SemiBold';
    color: #000;
}

nav#mobile_menu .mobile-static-rest-links .menu_item_title_m {
    padding: 11px 0;
    border-top: 1px solid #EDEDED;
}

nav#mobile_menu .mobile-static-rest-links .menu_item_title_m:last-child {
    border-bottom: 1px solid #EDEDED;
}

nav#mobile_menu .mobile-static-rest-links .menu_item_title_m a,
.menu_item_title_m .accordion-mobile-menu {
    font-size: 13px;
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    letter-spacing: 0.09em;
    color: #262626;
    text-transform: uppercase;
}

nav#mobile_menu .sub_menu_item_m,
nav#mobile_menu .sub_sub_menu_item_m,
nav#mobile_menu .sub_sub_sub_menu_item_m {
    cursor: pointer;
    margin-bottom: 5px;
}

nav#mobile_menu .sub_menu_item_m:last-child,
nav#mobile_menu .sub_sub_menu_item_m:last-child,
nav#mobile_menu .sub_sub_sub_menu_item_m:last-child {
    margin-bottom: 0;
}

nav#mobile_menu .sub_menu_item_title_m a {
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    color: gray;
    cursor: pointer;
    display: block;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .6px;
    padding-bottom: 13px;
    padding-right: 10px;
    padding-top: 13px;
    transition: all .4s ease;
}

nav#mobile_menu .sub_sub_menu_item_title_m a {
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    color: gray;
    cursor: pointer;
    display: block;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .6px;
    padding: 8px 10px 8px 20px;
    transition: all .4s ease;
}

nav#mobile_menu .sub_sub_sub_menu_item_title_m a {
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    color: gray;
    cursor: pointer;
    display: block;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .6px;
    padding: 8px 10px 8px 30px;
    transition: all .4s ease;
}

nav.menu>ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav.menu>ul>li {
    flex-grow: 1;
    margin: 0;
}

nav.menu>ul>li:hover>a {
    color: #f7e0cc;
}

nav.menu>ul>li>a {
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    color: #fff;
    font-family: 'Manrope-Light';
    font-size: 15px;
    letter-spacing: .1em;
    padding: 15px;
    position: relative;
    text-align: center;
    transition: all .3s ease;
    text-transform: uppercase;
}

/* πριν: η γραμμή έπιανε όλο το πλάτος του <a> και εμφανιζόταν απότομα
nav.menu>ul>li>a:hover::after {
    border: 2px solid #EBDFD4;
    bottom: 0;
    content: " ";
    position: absolute;
    width: 100%;
}
*/

/* Υπογράμμιση μενού (hover + active): όσο η λέξη + 20px (10px αέρας δεξιά
   κι αριστερά), ανοίγει ομαλά από width:0 προς τα έξω.
   Το ::after μπαίνει στο εσωτερικό <div itemprop="name">, που έχει ακριβώς
   το πλάτος της λέξης - το <a> από μόνο του γεμίζει όλο το <li>.
   Το bottom:-15px ισοφαρίζει το padding-bottom του <a> ώστε η γραμμή να
   κάθεται στο κάτω άκρο της μπάρας, όπως στο design. */
nav.menu>ul>li>a>div {
    position: relative;
}

nav.menu>ul>li>a>div::after {
    background-color: #EBDFD4;
    bottom: -15px;
    content: "";
    height: 4px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    -webkit-transition: width .3s ease;
    -moz-transition: width .3s ease;
    -o-transition: width .3s ease;
    transition: width .3s ease;
    width: 0;
}

nav.menu>ul>li:hover>a>div::after,
nav.menu>ul>li.active>a>div::after {
    width: calc(100% + 20px);
}

nav.menu>ul>li>a>div>div>div>div>div>div>div>.sub_menu_item_title>a {
    color: #000;
}

span.caret.down:after {
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
}

span.caret.up:after {
    content: '\f106';
    font-family: 'Font Awesome 5 Pro';
}

span.num_pieces {
    /* background-color: #993000; */
    /* background-color: #FFB08A; */
    background-color: #AC926D;
    border-radius: 50%;
    bottom: -2px;
    color: #fff;
    margin-left: 5px;
    padding: 1px;
    position: absolute;
    right: -7px;
    text-align: center;
    width: 12px;
    height: 12px;
    padding: 1px 0 0 0;
    font-family: 'Roboto Medium', Arial, Helvetica, sans-serif;
    font-size: 8px;
}

span.num_wish {
    /* background-color: #993000; */
    /* background-color: #FFB08A; */
    background-color: #AC926D;
    border-radius: 50%;
    bottom: -2px;
    color: #fff;
    /* padding: 1px; */
    position: absolute;
    right: 0;
    text-align: center;
    width: 12px;
    height: 12px;
    padding: 1px 0 0 0;
    font-family: 'Roboto Medium', Arial, Helvetica, sans-serif;
    font-size: 8px;
}

span.slide_filter.sign.opened:after {
    color: #000;
    /* content: '\f067'; */
    content: '\f068';
    font-family: 'Font Awesome\ 5 Pro';
    font-size: 9px;
    /* margin-top: -4px; */
    margin-top: 5px;
    position: absolute;
    right: 0;
    /* top: 50%; */
}

ul.my_pagination {
    align-items: center;
    display: flex;
    font-size: 26px;
    justify-content: center;
    margin: 0;
    padding: 0;
}

ul.my_pagination>li {
    border-bottom: 4px solid transparent;
    list-style: none;
    margin-right: 15px;
}

ul.my_pagination>li.active {
    border-bottom: 4px solid #FFD1D1;
}

ul.my_pagination>li>a {
    color: #D1D3D4;
}

.noUi-horizontal .noUi-handle {
    border: 1px solid #ccc;
    box-shadow: 1px 1px 4px 2px #ccc;
    background: #fff;
}

.color_item:not(.this-color-has-photo).active {
    border: 1px solid #4d4d4d;
    padding: 2px;
}

.color_item {
    border: 1px solid #ccc;
}

.filter_area_item_area .filter_item_data.active a {
    color: #000;
    font-family: 'Manrope-SemiBold';
}

/* .filter_area_item_area {
    margin-left: 10px;
} */

.filter_area_item_area.closed {
    display: none;
}

.filter_radio_button_item label {
    color: #5B5B5B;
    font-family: 'PF Futura Neu Book';
    font-size: 14px;
}

.filter_selected {
    /* padding: 10px 0; */
    padding: 5px 0 20px;
}

.products-list {
    /* border-left: 1px solid #5B5B5B; */
    border-left: 1px solid #e5e5e5;
    padding-left: 0;
}

.basic_col_l.col-sm-height.col-full-height {
    padding-right: 15px;
}

#products_list_out {
    padding-left: 15px;
}

.product_item_new {
    background: #808080;
}

.product_item_best {
    background: #ffb08a;
}

.product_feautures_item_title h3 {
    text-transform: uppercase;
    font-family: 'Manrope-SemiBold';
    letter-spacing: 0.08em;
    font-size: 11px;
}

.product_details_item {
    font-family: 'Manrope-ExtraLight';
    margin-top: 20px;
}

.product_details_item a {
    background-color: #f4f4f4;
    color: #262626;
    font-size: 11px;
    letter-spacing: 0.08em;
}

#products_out {
    border: none;
}

#product_out {
    /* width: 1240px; */
    /* width: 1380px; */
}

.product_item_image_in .product_item_icons_item {
    /* border-radius: 30px; */ /* στρογγυλά — τώρα ορθογώνια tags (βλ. τέλος αρχείου) */
    border-radius: 0;
}

.product_item_offer {
    background-color: #000;
}

.banner_out.products_related_products {
    max-width: 1500px;
}

.banner_out.products_related_products .main_box_area,
.banner_out.recently_seen .main_box_area {
    padding-top: 5px;
}

.without_background .product_item_offer_in {
    color: #FF8B53;
    font-family: 'Manrope-SemiBold';
    font-size: 20px;
    margin-left: 45px;
}

.product .color_item {
    width: 40px;
    height: 40px;
}

.product .product_item_best_in {}

.div_table .number_item {
    border: none;
}

.div_table .number_item .number_item_in {
    border-radius: 20px;
    background-color: transparent;
    border: 1px solid #ccc;
    color: #000;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

.number_item_in_in {
    width: 40px;
    height: 40px;
}

.number_item.idio_show_gallery:hover {
    outline: none;
    border: none;
}

.div_table .number_item:hover {
    border: none;
    outline: none;
}

.basket_btn>a>span {
    margin: 0 0px 0 40px;
    font-size: 20px;
}

.product_favorite_in>span {
    color: #F05A28;
    padding: 15px;
    background-color: #f7f7f7;
    margin-left: 10px;
}

.product .main_box_area .color_item {
    width: 15px;
    height: 15px;
}

.product_text .content {
    display: none;
    font-family: 'Manrope-Light';
    font-size: 12px;
    letter-spacing: 0.08em;
    margin-top: 20px;
}

.product_text {
    color: #5b5b5b;
}

span.sign {
    float: right;
}

.product_text h3 {
    cursor: pointer;
    font-family: 'Manrope-Light';
    letter-spacing: 0;
    font-size: 15px;
    margin: 0 0 0 40px;
    color: #000;
}

.product_text>h3>span {
    margin-right: 10px;
    font-size: 14px;
    font-weight: 100;
}

.basket_list_p {
    top: 40px;
}

.product_text {
    position: relative;
    border-top: 1px solid #afabab;
    padding: 20px 0;
    margin: 0;
}

.product_text a {
    display: flex;
    align-items: center;
}

.product_text>span {
    position: absolute;
    top: 20px;
    font-size: 15px;
}

.product_text.phone_txt h3 {
    margin: 0 0 0 25px;
}

.product_text.phone_txt {
    border-top: 0;
    border-bottom: 1px solid #979797;
}

.without_background.product_item_offer {
    background: transparent;
}

.product_cols .product_item_icons {
    display: none;
}

.popup_basket_btn.red a {
    background-color: #AC926D;
}

.brd-bottom {
    border-bottom: 1px solid #afabab;
}

#header_mobile .num_wish {
    top: 14px;
    left: 11px;
    font-size: 13px;
    width: 12px;
    height: 12px;
    font-family: 'Roboto Medium', Arial, Helvetica, sans-serif;
    border-radius: 50%;
    color: #fff;
    padding: 1px 0 0 0;
}

#header_mobile .pink-cirle {
    background-color: transparent;
    left: 0;
    bottom: 0;
    top: 11px;
}

.search_area_input input[type="text"] {
    font-family: 'PF Futura Neu Book', Arial, Helvetica, sans-serif;
    outline:none;
}

.language-bar-mobile {
    max-width: 60px;
}

.top_item .language_item.lang-selected a {
    color: #684E31;
}

.font-4-medium {
    font-family: 'PFFuturaNeuMedium Regular', Arial, Helvetica, sans-serif;
}

.top_item .language_item a {
    font-size: 14px;
    color: #525252;
    font-weight: normal;
}

.x_y_pr_list {
    position: absolute;
    width: 100%;
    height: 44px;
    text-align: center;
    z-index: 9998;
    bottom: 0;
    left: 0;
    padding: 0;
    background: rgb(240, 124, 174, 0.8);   
    font-family: 'PFFuturaNeuMedium Regular', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: white;
    transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -webkit-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
}

.x_y_pr_list span {
    font-size: 38px;
}

.product_item:hover .x_y_pr_list {
    opacity: 0;
}

.basic_col_l {
    max-width: 400px;
    width: 100%;
}

.fa-chevron-down.rotate{
    transform:rotate(-180deg);
}

/* Βελάκι υπομενού: πιο διακριτικό (μικρότερο & ανοιχτόχρωμο) και με ομαλή
   περιστροφή στο άνοιγμα/κλείσιμο. Το transition μπαίνει στο base στοιχείο
   ώστε να δουλεύει και προς τις δύο κατευθύνσεις. */
.sub_menu_item_title .fa-chevron-down {
    color: #b3b3b3;
    font-size: 10px;
    -webkit-transition: transform .3s ease, color .3s ease;
    -moz-transition: transform .3s ease, color .3s ease;
    -o-transition: transform .3s ease, color .3s ease;
    transition: transform .3s ease, color .3s ease;
}

.sub_menu_item.has-children:hover>.sub_menu_item_title .fa-chevron-down {
    color: #262626;
}

.popup_basket_area {
    width: 700px;
}

.popup_basket_area_title {
    position: relative;
    padding-top: 22px;
    padding-bottom: 22px;
    /* background: #262626; */  /* σκούρα μπάρα — το σχεδιαστικό θέλει κρεμ (δείγμα από το comp: #EEE0D3) */
    background: #EEE0D3;
}

.popup_basket_area_title img {
    width: 20px;
    margin-right: 20px;
}

.popup_delete.popup_basket_close {
    font-size: 21px;
    top: 20px;
    right: 10px;
}

.popup_basket_txt h2 {
    font-size: 16px;
    color: #262626;
}

.popup_basket_txt h3 {
    font-size: 10px!important;
    color: #808080!important;
    letter-spacing: 0.08em;
}

.popup_basket_area_in {
    padding: 30px 150px;
}

.popup_basket_photo {
    margin-right: 30px;
    width: 170px;
}

.popup_basket_photo .popup_basket_txt h4 strong {
    font-family: 'Manrope-SemiBold';
}

.popup_basket_txt h4 {
    text-transform: uppercase;
    margin-top: 5px;
    letter-spacing: 0.05em;
}

.popup_basket_txt h4 strong {
    color: #000;
    font-weight: 700;
}

.popup_basket.active .product_price {
    font-size: 14px;
    justify-content: flex-start;
}

.popup_basket.active .product_price_in {
    height: 48px;
    text-align: center;
    width: 48px;
    display: flex;
    align-items: center;
}

.popup_basket.active .product_price .products_price_new,
.popup_basket.active .product_price_in {
    font-size: 20px;
}

.popup_basket.active .products_price_old.strikediag {
    font-size: 16px;
    margin-left: 5px;
}

.popup_basket.active .product_item_offer_in {
    font-size: 14px;
    justify-content: flex-start;
    margin-left: 75px!important;
}

.popup_basket.active .popup_basket_btn a {
    font-family: 'Manrope-SemiBold';
    font-size: 11px;
    padding: 12px 15px;
    letter-spacing: 0.06em;
}

.popup_basket.active .product_price_out {
    padding-top: 10px;
}

.popup_basket.active .popup_basket_buttons {
    margin-top: 10px;
}

.popup_basket.active .popup_basket_btn {
    margin-top: 5px;
}

.search_in form.search_form {
    display: flex;
    align-items: center;
    height: 37px;
    padding: 0 10px 0 18px;
}

.search_in label {
    margin-bottom: 0;
    text-transform: uppercase;
    color: #979797;
}

/* #product_out .col-lg-6.product_col:first-child {
    padding-right: 10px;
    margin-left: -50px;
}

#product_out .col-lg-6.product_col:last-child {
    padding-left: 30px;
    margin-left: 50px;
} */

.product_buttons {
    /* justify-content: space-between; */
    margin-top: 0px;
    display: flex;
    align-items: center;
}

#product_info_out {
    padding: 20px 0;
}

.grid_btn {
    padding-right: 5px;
    margin-right: 5px;
    cursor: pointer;
    color: #808080;
    font-size: 18px;
    border-right: 1px solid #808080;
}

.grid_btn:last-child {
    border-right: none;
}

.grid_btn.font-4-bold {
    color: #333;
}

.grid_btn.font-manrope-extrabold {
    color: #000;
}

.div_center .title_area {
    padding-bottom: 0px;
}

.page_eshop_order_visitor .form_item.form_effect input[type="text"],
.page_eshop_order_visitor .form_item.form_effect input[type="password"],
.page_eshop_order_visitor .form_item.form_effect select {
    padding-top: 5px;
}

.lost_pass_area {
    text-decoration: underline;
}

.page_eshop_order_visitor .login_register_btn {
    background: none;
    border: none;
}

.page_eshop_order_visitor .login_register_btn a {
    color: #000!important;
    text-align: center;
    font-size: 15px;
    text-decoration: underline;
}

.checkout-login .div_or {
    margin-top: 35px;
    margin-bottom: 35px;
    text-align: center;
    font-size: 19px;
    letter-spacing: 2.52px;
    color: #000;
}

.checkout-login .other_choice {
    font-size: 20px;
    letter-spacing: 0.4px;
    color: #000;
    text-align: center;
}

.other_choice_sub {
    font-size: 17px;
    color: #000;
    text-align: center;
    margin-top: 5px;
}

.checkout-procced {
    background: #fff;
    padding: 40px;
}

.checkout .step-line {
    position: absolute;
    /* width: calc(100% - 50px); */
    width: 50%;
    height: 1px;
    left: 50%;
    transform: translateX(-50%);
    top: 25px;
    /* background: #fff; */
}

.checkout_out .three_steps.dots,
.checkout_out .three_steps.dots_title {
    display: flex;
    justify-content: space-between;
}

.checkout ul.three_steps.dots li:after {
    right: 92%;
    width: 134%;
}

.swiper-button-prev.abs,
.swiper-button-next.abs {
    display: none;
}

.swiper-container {
    /* height: 650px; */
    height: 900px;
    /* margin-top: 40px; */
    margin-top: 0px;
}

.owl_slider_area_s_1 .item {
    padding-left: 7px;
    padding-right: 7px;
}

#footer_right a, 
#footer_center a, 
.footer-mobile-policy a {
    color: #808080!important;
}

.product_item_colors .color_item, 
.product_item_colors .color_item img,
.filter_area_item_area .color_item img,
.filter_selected .color_item img {
    display: flex;
}

.popup_basket_area_title h2 {
    font-size: 15px;
    font-family: 'Manrope-SemiBold';
}

.filter_responsive_ {
    display: none;
}

.product_item_colors_text {
    cursor: progress;
}

.next_page_btn {
    max-width: 275px;
    width: 80%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 10px;
    cursor: pointer;
    background: #262626;
    color: #fff;
    font-size: 16px;
    letter-spacing: 0.08em;
}

.next_page_mobile .margin-top-20 {
    font-size: 13px;
}

.basic_col_l.col-sm-height, .basic_col_l.col-sm-height.col-full-height {
    border-right: 1px solid #e5e5e5;
    padding-right: 15px;
}

.grid_title {
    font-size: 13px;
}

.grid_out {
    margin-top: 0;
}

.filter_text_prices .div_left {
    margin-top: 10px;
    float: left;
    display: block;
}

.filter_text_prices .div_right {
    margin-top: 10px;
    float: right;
    display: block;
}

.filter_area_item.box_radius .filter_area_item_area {
    column-count: 2;
}

.filter_area_prices .filter_area_item {
    margin-top: 10px;
    text-align: end;
    padding-bottom: 0;
}

.filter_area_prices {
    padding-right: 0;
}

.filter_area_prices div#slider_price {
    width: 95%;
}


/* CLS */

#header_desktop .logo {
    width: 100%;
    /* height: 100%; aspect-ratio: 161 / 45; object-fit: cover;  <-- ίσχυε για το παλιό logo */
    max-width: 224px;
    aspect-ratio: 224 / 87;
}

#header_desktop .logo img,
#header_mobile .logo img {
    /* aspect-ratio: 161 / 45; */
    aspect-ratio: 224 / 87; /* αναλογία του infi-logo.svg */
    overflow: hidden; /* Αποφυγή CLS */
}

.banner_out .h_item.col-lg-6 .banner_img img {
    aspect-ratio: 871 / 781;
}

.banner_out .h_item.col-lg-6 .banner_img {
    width: 100%;
    aspect-ratio: 871 / 781;
    overflow: hidden; /* Αποφυγή CLS */
}

/* .banner_out .h_item.col-lg-4 .banner_img img {
    aspect-ratio: 572 / 339;
} */

.banner_out .h_item.col-lg-6 .banner_img img,
.banner_out .h_item.col-lg-4 .banner_img img,
.banners_cat .homepage_item_image img,
#slideshow_out_r .item img,
#slideshow_out .slider_item img,
#mobile_menu .col-lg-4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner_out .h_item.col-lg-4 .banner_img {
    width: 100%;
    /* aspect-ratio: 572 / 339; */
    overflow: hidden; /* Αποφυγή CLS */
}

/* ---- Πλέγμα banner φωτογραφιών (section.banner_out.b_img) ----
   Μετρημένο στο Preview/Desktop/01-Infi-Eshop-Home.jpg (1920px):
   σειρά 3άδας 583x711, σειρά 4άδας 432x527  ->  ίδια αναλογία 0.82 (41/50)
   περιθώρια 61px (=3.2%), κενά 24px, κάθετο κενό 21px.
   Χρειάζονται overrides γιατί το global-style.css:
     - μηδενίζει padding σε .photo_b / .row_b / .h_item
     - δίνει κενά μόνο στο .row_4 (20/10/20, δηλαδή άνισα)
     - αφήνει το .row_3 (4 banner ανά σειρά) τελείως χωρίς κενά      */
.banner_out.b_img .container-fluid.photo_b {
    padding-left: 3.2%;
    padding-right: 3.2%;
}

.banner_out.b_img .row.row_b {
    margin-left: -12px;
    margin-right: -12px;
}

.banner_out.b_img .row_b>.h_item,
.banner_out.b_img .row_4 .h_item:nth-child(1n),
.banner_out.b_img .row_4 .h_item:nth-child(3n),
.banner_out.b_img .row_4 .h_item:nth-child(3n+2) {
    margin-bottom: 20px;
    padding-left: 12px;
    padding-right: 12px;
}

/* σταθερή αναλογία -> όλα τα πλακίδια της σειράς ίδιο ύψος, ανεξάρτητα
   από τις διαστάσεις της κάθε φωτογραφίας */
.banner_out.b_img .h_item .banner_img {
    aspect-ratio: 41 / 50;
    overflow: hidden;
    width: 100%;
}

.banner_out.b_img .h_item .banner_img img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}


.banners_cat .homepage_item_image {
    width: 100%;
    aspect-ratio: 183 / 202;
    overflow: hidden; /* Αποφυγή CLS */
}

#slideshow_out,
#slideshow_out .slideshow,
#slideshow_out .slider_item {
    width: 100%;
    aspect-ratio: 1924 / 781;
    overflow: hidden; /* Αποφυγή CLS */
} 

#slideshow_out_r {
    width: 100%;
    aspect-ratio: 362 / 499;
    overflow: hidden; /* Αποφυγή CLS */
}

#mobile_menu .col-lg-4 {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden; /* Αποφυγή CLS */
}

#slideshow_out {
    width: 100%;
    aspect-ratio: 1924 / 781;
    overflow: hidden; /* Αποφυγή CLS */
}

#products .product_item_image {
    width: 100%;
    height: 100%;
    aspect-ratio: 151 / 225;
    object-fit: cover;
}

#products .product_item_image img {
    width: 100%;
    aspect-ratio: 151 / 225;
    overflow: hidden; /* Αποφυγή CLS */
}

.product_item_colors .color_item_in {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.product_item_colors .color_item_in img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden; /* Αποφυγή CLS */
}

.owl_slider_area_s_5 .product_item_image {
    width: 100%;
    height: 100%;
    aspect-ratio: 101 / 150;
    object-fit: cover;
}

.owl_slider_area_s_5 .product_item_image img {
    width: 100%;
    aspect-ratio: 101 / 150;
    overflow: hidden; /* Αποφυγή CLS */
}

.product_gallery_out .product_image_out_r {
    width: 100%;
    /* height: 100%; */
    aspect-ratio: 151 / 225;
    object-fit: cover;
}

.product_gallery_out .product_image_out_r .item img {
    width: 100%;
    aspect-ratio: 151 / 225;
    overflow: hidden; /* Αποφυγή CLS */
}

.recently_seen .product_item_image_in {
    width: 100%;
    height: 100%;
    aspect-ratio: 151 / 225;
    object-fit: cover;
}

.recently_seen .product_item_image_in img {
    width: 100%;
    aspect-ratio: 151 / 225;
    overflow: hidden; /* Αποφυγή CLS */
}

.color_item.idio_show_gallery {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.color_item.idio_show_gallery a img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden; /* Αποφυγή CLS */
}

#owl_product_quick .item {
    width: 100%;
    aspect-ratio: 151 / 225;
    overflow: hidden; /* Αποφυγή CLS */
}

#owl_product_quick .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product_gallery_small .photo_small {
    width: 100%;
    aspect-ratio: 67 / 107;
    object-fit: cover;   
}

.product_gallery_small .photo_small img {
    width: 100%;
    height: 100%;
    aspect-ratio: 67 / 107;
    overflow: hidden; /* Αποφυγή CLS */
}

.product_details_item .mezura-pic {
    aspect-ratio: 75 / 26;
    overflow: hidden;
}

/* END CLS */

/* ── Χρώμα χωρίς απόθεμα (kind_out_stock=2) ──────────────────────────────────
   Το global-style.css βάζει ΤΕΤΡΑΓΩΝΟ λευκό mask (γρ. 6522) πάνω σε στρογγυλό
   swatch και `border: 1px dashed #fff` στο hover (γρ. 6533) — από εκεί το
   «μισοσβησμένο». Εδώ γίνεται στρογγυλό, πιο απαλό, με διακριτική διαγώνιο
   και ομαλό transition. Δεν πειράζουμε το global (το χρησιμοποιούν κι άλλα themes). */

.color_item {
    /* το global δηλώνει `transition: all 0.3s ease-in-out 0` — το unitless 0 δεν είναι
       έγκυρο <time>, οπότε ο κανόνας αγνοείται και το hover βγαίνει απότομο */
    transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.color_item.disactive {
    border: 1px solid #e0e0e0;
}

.color_item.disactive .color_mask {
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.6);
    background-image: linear-gradient(
        to top right,
        transparent calc(50% - 0.5px),
        rgba(120, 120, 120, 0.5) calc(50% - 0.5px),
        rgba(120, 120, 120, 0.5) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
    );
    transition: background-color 0.25s ease-in-out;
    pointer-events: none;
    z-index: 2;
}

/* hover: αντί για το dashed #fff, απλά ξεθωριάζει λίγο το mask ώστε να φανεί το χρώμα */
.color_item.disactive:hover {
    border: 1px solid #b3b3b3;
}

.color_item.disactive:hover .color_mask {
    background-color: rgba(255, 255, 255, 0.32);
}


/* ==========================================================================
   HOVER ΚΑΛΑΘΙ (basket popup) — σχεδιαστικό:
   Q:\FILES\Infi\...\Preview\Desktop\11-Infi-Eshop-Header-Basket.jpg (1:1 με CSS px)
   Μετρήσεις: πλάτος 300px, μπάρα τίτλου #eee0d3 ύψους 43px, εσωτ. padding 18px,
   γραμμές #ececec με ένθεση 18px, κουμπί 232x45 με padding 25px/34px.
   Υπερισχύει του css/global-style.css (φορτώνεται μετά).
   ========================================================================== */

.basket_list_p {
    /* πριν (global-style.css): width: 300px; box-shadow: 0 3px 7px rgba(0,0,0,.2); */
    width: 300px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
    border: 0;
}

/* --- μπάρα τίτλου --- */
.basket_list_p .basket_list_p_title {
    /* πριν: padding-top:5px; padding-bottom:5px; background:#000; */
    /* background: #eee0d3; (μπεζ του σχεδιαστικού) */
    background: #ddbc93;
    padding: 0 15px;
    height: 43px;
}

.basket_list_p .basket_list_p_title h3 {
    /* πριν: color:#fff; font-size:20px; text-align:center; */
    /* color: #262626; */
    color: #000;
    font-family: 'Manrope-Medium', Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 43px;
    margin: 0;
    text-align: left;
}

/* --- λίστα προϊόντων --- */
.basket_list_p .basket_list_p_area_in {
    max-height: 400px;
}

.basket_list_p .basket_p_item {
    /* πριν: padding:7px; border-bottom:1px solid #cccccc; */
    position: relative;
    /* padding: 18px; */
    padding: 18px 18px 15px;
    border-bottom: 0;
}

/* η γραμμή του σχεδιαστικού δεν πιάνει όλο το πλάτος — μπαίνει με ένθεση 18px */
.basket_list_p .basket_p_item::after {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 1px;
    background: #ececec;
}

.basket_list_p .basket_p_item > a {
    display: flex;
    align-items: flex-start;
}

/* --- φωτογραφία --- */
.basket_list_p .basket_p_item_image {
    /* πριν: display:table-cell; vertical-align:middle; */
    display: block;
    flex: 0 0 90px;
}

.basket_list_p .basket_p_item_image_in {
    /* πριν: width:60px; */
    width: 90px;
}

.basket_list_p .basket_p_item_image_in img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- κείμενο --- */
.basket_list_p .basket_p_item_title {
    /* πριν: display:table-cell; vertical-align:middle; padding-left:10px; */
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    /* padding: 24px 0 0 24px; */
    padding: 27px 0 0 24px;
    width: auto;
}

.basket_list_p .basket_p_item_title h3 {
    color: #262626;
    font-family: 'Manrope-Light', Arial, Helvetica, sans-serif;
    /* πριν: font-size:14px; font-weight:300; */
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 18px;
    margin: 0;
}

.basket_list_p .basket_p_item_prices {
    /* πριν: font-size:20px; margin-top:5px; */
    display: flex;
    align-items: baseline;
    margin-top: 4px;
    line-height: 20px;
}

.basket_list_p .basket_p_item_prices .products_price_old {
    /* πριν: float:left; margin-left:5px; font-size:18px; */
    float: none;
    margin: 0 12px 0 0;
    color: #808080;
    font-family: 'Manrope-Light', Arial, Helvetica, sans-serif;
    font-size: 17px;
    text-decoration: line-through;
}

.basket_list_p .basket_p_item_prices .products_price_new {
    float: none;
    margin: 0;
    color: #000;
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 17px;
}

/* οι ιδιότητες (π.χ. ΜΑΥΡΟ, SMALL) */
.basket_list_p .basket_p_item_idiotites {
    color: #000;
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.5px;
    line-height: 14px;
    margin-top: 18px;
    text-transform: uppercase;
}

.basket_list_p .basket_p_item_quantity {
    /* πριν: color:#808080; font-size:13px; */
    color: #262626;
    font-family: 'Manrope-Light', Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 18px;
    margin-top: 18px;
}

/* --- κουμπί διαγραφής (λεπτό ×) --- */
.basket_list_p .basket_p_item_delete {
    /* πριν: top:5px; right:7px; */
    /* top: 13px; */
    top: 9px;
    right: 12px;
    line-height: 1;
}

.basket_list_p .basket_p_item_delete .fa-times {
    color: #808080;
    /* font-size: 16px; */
    /* font-size: 22px; */
    font-size: 20px;
    transition: color 0.25s ease-in-out;
}

.basket_list_p .basket_p_item_delete:hover .fa-times {
    color: #262626;
}

/* --- σύνολο --- */
.basket_list_p .basket_list_p_total {
    /* πριν: font-size:16px; padding:8px 5px; */
    position: relative;
    align-items: center;
    height: 43px;
    padding: 0 18px;
    color: #000;
}

.basket_list_p .basket_list_p_total::after {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 1px;
    background: #ececec;
}

.basket_list_p .basket_list_p_total span:first-child {
    /* πριν: margin-left:70px; */
    margin-left: 0;
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 15px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.basket_list_p .basket_list_p_total span.bold {
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
}

/* --- κουμπί ολοκλήρωσης --- */
.basket_list_p .basket_list_p_buttons {
    padding: 25px 34px;
}

.basket_list_p .basket_list_p_btn {
    /* πριν: background:#000; */
    background: #262626;
}

.basket_list_p .basket_list_p_btn:hover {
    /* πριν: background:#a40b2a; */
    background: #000;
}

/* το #header_desktop .top_item a (γρ. 1676) κερδίζει σε specificity (id) και έκανε το
   κείμενο του κουμπιού σκούρο πάνω σε σκούρο φόντο — γι' αυτό το ξαναδηλώνουμε με id */
#header_desktop .basket_list_p .basket_list_p_btn a,
#header_mobile .basket_list_p .basket_list_p_btn a,
.basket_list_p .basket_list_p_btn a {
    color: #fff;
    /* το .top_item a (γρ. 1706) επιβάλλει display:flex και ακυρώνει το text-align:center
       του global-style.css — γι' αυτό ξαναδηλώνουμε block + κεντράρισμα */
    display: block;
    text-align: center;
    /* πριν: font-size:14px; font-weight:700; letter-spacing:0.4px; padding:8px 5px; */
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 45px;
    padding: 0 5px;
    text-transform: uppercase;
}

/* γέφυρα hover: καλύπτει το κενό ανάμεσα στο εικονίδιο του καλαθιού και το popup
   (.basket_list_p { top: 40px }, γρ. 2358), ώστε το mouseleave του .basket_btn_h να μη
   χτυπάει όσο ο κέρσορας κατεβαίνει προς τη λίστα.

   BUG FIX: τα 60px από δεξιά ΔΕΝ έμεναν πάνω από το εικονίδιο του καλαθιού — ξεπερνούσαν
   το .basket_btn_h και έπεφταν πάνω στο διπλανό εικονίδιο «Ο Λογαριασμός μου». Με
   z-index 1000 στο .basket_list_p, η γέφυρα έτρωγε το κλικ και το Login φαινόταν νεκρό
   όσο ήταν ανοιχτό το καλάθι.
   Το pointer-events:none το λύνει χωρίς να χαλάει το hover: το .basket_list_p είναι
   ΠΑΙΔΙ του .basket_btn_h, οπότε μόλις ο κέρσορας φτάσει στη λίστα ξαναχτυπάει
   mouseenter στο .basket_btn_h και ακυρώνεται το 400ms timer του κλεισίματος. */
.basket_list_p.active::before {
    content: '';
    position: absolute;
    top: -40px;
    right: 0;
    width: 60px;
    height: 40px;
    pointer-events: none;
}

/* --- άδειο καλάθι --- */
.basket_list_p .basket_list_p_no {
    color: #262626;
    font-family: 'Manrope-Light', Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding: 30px 18px;
}


/* ── Σημάνσεις κάρτας προϊόντος (ΕΞΑΝΤΛΗΜΕΝΟ / -XX% / NEW / BEST SELLER) ─────
   Ήταν στρογγυλά 48px badges. Τώρα ορθογώνια tags που παίρνουν το πλάτος του
   κειμένου τους και στοιβάζονται κάθετα πάνω-αριστερά.
   Σειρά (πιο καθοριστικό για τον πελάτη → πιο διακοσμητικό):
     1. ΕΞΑΝΤΛΗΜΕΝΟ  2. -XX%  3. NEW  4. BEST SELLER
   Η σειρά ορίζεται στο markup του product_item.php. */

.product_item_image_in .product_item_icons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* αλλιώς τα στενά tags τεντώνονται στο πλάτος του πιο φαρδιού */
}

.product_item_image_in .product_item_icons_item {
    margin-bottom: 4px;        /* ήταν 8px — πιο σφιχτή στοίβα όταν συμπέφτουν πολλά */
}

.product_item_offer,
.product_item_new,
.product_item_best,
.product_item_soldout {
    display: inline-flex;
    width: auto;
    height: auto;
    min-width: 0;
}

.product_item_offer_in,
.product_item_new_in,
.product_item_best_in,
.product_item_soldout_in {
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 6px 9px;
    height: auto;
}

/* χρώματα */
.product_item_offer   { background-color: #000; }                       /* έκπτωση: μαύρο */
.product_item_new     { background-color: #ddbc93; }                    /* ΝΕΟ: ανοιχτό χρυσό, μαύρα γράμματα */
.product_item_best    { background-color: #AC926D; }                    /* BEST SELLER: το χρυσό του theme */
.product_item_soldout { background-color: #EDE7DE; }                    /* εξαντλημένο: απαλό μπεζ */

.product_item_new_in     { color: #000; }
.product_item_soldout_in { color: #262626; }


/* ── Σελίδα λίστας προϊόντων: ζεστό off-white φόντο ──────────────────────────
   Μόνο στο .page_products (body class), ώστε να μην επηρεαστούν οι υπόλοιπες
   σελίδες. Μπαίνει στο .main_content_out (header/footer έχουν δικό τους φόντο)
   και λευκό μένει μόνο το .product_item_image (βλ. block στο τέλος του αρχείου). */
.page_products .main_content_out {
    background-color: #f7f2ed;
}


/* ── Κάρτα προϊόντος: λευκό ΜΟΝΟ πίσω από τη φωτογραφία ──────────────────────
   Το .product_item { background:#ffffff } του css/global-style.css:739 έβαφε ΟΛΗ
   την κάρτα λευκή, οπότε και η περιοχή των πληροφοριών (τίτλος / τιμές / χρώματα)
   έβγαινε λευκή πάνω στο off-white της σελίδας. Το ξηλώνουμε μόνο στη λίστα
   προϊόντων και επαναφέρουμε το λευκό στο .product_item_image, ώστε οι φωτό με
   διαφάνεια ή λευκό περιθώριο να μη «σπάνε» πάνω στο μπεζ. */
.page_products .product_item {
    /* background: #ffffff;  <- παλιό, ερχόταν από το global */
    background: transparent;
}

.page_products .product_item .product_item_image {
    background: #ffffff;
}


/* ── Φίλτρο «Χρώματα»: τελείως στρογγυλά swatches, όπως στο σχεδιαστικό ──────
   Τα swatches ΔΕΝ είναι τα .color_box_in divs — είναι <img> (filter.php:243),
   γι' αυτό δούλευαν μόνο τα img rules. Το .color_item img { width:100% } του
   css/global-style.css:6430 έδινε πλάτος 100% με ΕΛΕΥΘΕΡΟ ύψος, οπότε η εικόνα
   κρατούσε το δικό της aspect ratio → οβάλ αντί για κύκλο.
   Λύση: τετράγωνο κουτί + object-fit:cover, ώστε να κόβεται η εικόνα αντί να
   παραμορφώνεται. Μπαίνει στο ΤΕΛΟΣ του αρχείου γιατί το display:flex της
   γρ. 2792 έχει ίδια specificity και θα κέρδιζε λόγω σειράς. */
.filter_area_item_area .color_item,
.filter_selected .color_item {
    border-radius: 50%;
    box-sizing: border-box;
    overflow: hidden;
}

.filter_area_item_area .color_item > a,
.filter_selected .color_item > a {
    display: block;
    width: 100%;
    height: 100%;
}

.filter_area_item_area .color_item img,
.filter_selected .color_item img {
    /* display: flex;  <- παλιό, από τη γρ. 2792 */
    display: block;
    /* width: 100%;  <- παλιό (global:6430), με ύψος auto → οβάλ */
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Και η άλλη περίπτωση, όταν το χρώμα έρχεται ως CSS τιμή αντί για εικόνα:
   το .color_box_in έχει καρφωμένο 34x34 (γρ. 327 & 1113 — μέγεθος για τα 40x40
   swatches της σελίδας προϊόντος) μέσα σε κουτί 25x25, οπότε ξεχείλιζε. */
.filter_area_item_area .color_box_in,
.filter_selected .color_box_in {
    /* width: 34px; height: 34px;  <- παλιό, καρφωμένο μέγεθος */
    width: 100%;
    height: 100%;
    border-radius: 50%;
    line-height: 0;
    font-size: 0;
}

/* Στα επιλεγμένα φίλτρα (included_pages/filter_selected.php:153-161) η δομή έχει
   ένα παραπάνω επίπεδο — .color_item_out > .color_item > .color_item_in > img —
   και ΔΕΝ έχει <a>. Το .color_item_in δεν είχε ύψος, οπότε το height:100% της
   εικόνας υπολογιζόταν πάνω σε auto γονέα → έμενε auto → πάλι οβάλ. */
.filter_selected .color_item_out,
.filter_sel_title .color_item_out {
    line-height: 0;
}

.filter_selected .color_item_in,
.filter_sel_title .color_item_in {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

/* Το <a> εδώ είναι ΜΕΣΑ στο .color_item_in (όχι άμεσο παιδί του .color_item),
   οπότε δεν το πιάνει ο κανόνας με το «>» παραπάνω — χρειάζεται descendant. */
.filter_selected .color_item a,
.filter_sel_title .color_item a {
    display: block;
    width: 100%;
    height: 100%;
}


/* ═══ Φίλτρο τιμής + κουμπιά — 1:1 με το comp ════════════════════════════════
   Q:\FILES\Infi\Infi-Eshop-Template-Fashion-F101-Develop-17082026_Folder\
   Preview\Desktop\07-Infi-Eshop-Filters.jpg  (1 image px = 1 CSS px)

   Μετρήσεις από το comp (στήλη φίλτρων x26..325 = 300px):
     slider   : γραμμή 1px #000 (y1216), λαβές 17x17 μαύροι κύκλοι (y1209..1225)
                αριστερή λαβή x27..43 (αριστερό άκρο στην αρχή του track),
                δεξιά λαβή x308..324 (δεξί άκρο στο τέλος του track)
     τιμές    : «€ 24» / «€ 86», y1237..1248 → Manrope-Light 16px
     κουμπί   : y1281..1308 (28px), x109..242 (134px), κέντρο 175.5 = κέντρο
                στήλης· μαύρο pill, λευκό κείμενο 10px, ls .5px
     εκκαθάρ. : y1326..1369 (44px), x26..325 (300px), border 1px #000,
                κείμενο 11px/ls .5px στα 20px από αριστερά, × 14x14 δεξιά
   ═════════════════════════════════════════════════════════════════════════ */

/* — Slider ————————————————————————————————————————————————————————————— */
.filter_area_prices div#slider_price,
.filter_area_prices div#slider_price_resp {
    /* width: 95%;  <- παλιό (γρ. 2871) */
    width: 100%;
}

.filter_area_prices .noUi-horizontal {
    /* height: 3px;  <- παλιό, από css/libraries.css:54 */
    height: 1px;
}

/* Και το target και το origin[0] παίρνουν χρώμα (noUi-background / noUi-connect
   από το css/libraries.css:76,80 — και τα δύο #aaa). Στο comp η γραμμή είναι
   ενιαία μαύρη, οπότε τα βάφουμε και τα δύο ίδια. */
.filter_area_prices .noUi-background,
.filter_area_prices .noUi-connect {
    /* background: #aaaaaa;  <- παλιό */
    background: #000;
}

.filter_area_prices .noUi-target,
.filter_area_prices .noUi-origin {
    /* border-radius: 4px / 2px;  <- παλιό */
    border-radius: 0;
    box-shadow: none;
}

.filter_area_prices .noUi-horizontal .noUi-handle {
    /* width:3px; height:13px; top:-5px; λευκό με γκρι border+shadow  <- παλιό,
       από css/libraries.css:58,107 και τη γρ. 2193 αυτού του αρχείου */
    background: #000;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
    height: 17px;
    top: -8px;
    width: 17px;
}

/* Οι λαβές μένουν ΜΕΣΑ στο track, όπως στο comp: η κάτω με το αριστερό της
   άκρο στη θέση της τιμής, η πάνω με το δεξί της. */
.filter_area_prices .noUi-horizontal .noUi-handle-lower {
    left: 0;
}

.filter_area_prices .noUi-horizontal .noUi-handle-upper {
    left: -17px;
}

/* — Τιμές «€ 24» / «€ 86» ——————————————————————————————————————————————— */
.filter_area_prices .filter_text_prices {
    /* font-size: 13px;  <- παλιό (γρ. 549) */
    font-size: 16px;
}

.filter_area_prices .filter_text_prices .div_left,
.filter_area_prices .filter_text_prices .div_right {
    /* margin-top: 10px;  <- παλιό (γρ. 2845/2851) */
    margin-top: 12px;
}

/* — Κουμπί «ΕΠΙΒΕΒΑΙΩΣΗ ΤΙΜΗΣ» ————————————————————————————————————————— */
.filter_area_prices .refresh_price {
    /* float: left; margin-top: 10px;  <- παλιό, από css/global-style.css:6301 */
    float: none;
    margin-top: 33px;
    text-align: center;
}

.filter_area_prices .refresh_price a {
    /* background:#fff; color:#808080; font-size:13px; letter-spacing:.16em;
       padding:8px;  <- παλιό (γρ. 1296) */
    background: #000;
    border-radius: 14px;
    color: #fff;
    display: inline-block;
    font-family: 'Manrope-Medium', Arial, Helvetica, sans-serif;
    font-size: 10px;
    height: 28px;
    letter-spacing: 0.5px;
    line-height: 28px;
    padding: 0 21px;
    text-transform: uppercase;
}

.filter_area_prices .refresh_price a:hover {
    color: #fff;
}

/* — Πλαίσιο «ΕΚΚΑΘΑΡΙΣΗ ΦΙΛΤΡΩΝ» ——————————————————————————————————————— */
.filter_area_prices .filter_area_item.clear-all-filters {
    /* margin-top:10px; text-align:end;  <- παλιό (γρ. 2861) */
    margin-top: 18px;
    padding-bottom: 0;
    text-align: left;
}

.filter_area_prices .filter_area_item.clear-all-filters a {
    /* color:#808080; display:block; letter-spacing:.16em; padding:8px;
       <- παλιό (γρ. 556) */
    align-items: center;
    border: 1px solid #000;
    color: #000;
    display: flex;
    font-family: 'Manrope-Light', Arial, Helvetica, sans-serif;
    font-size: 11px;
    height: 44px;
    justify-content: space-between;
    letter-spacing: 0.5px;
    padding: 0 18px 0 20px;
    text-transform: uppercase;
}

.filter_area_prices .filter_area_item.clear-all-filters a .fa-times {
    font-size: 18px;
}


/* ── Μπάρα ταξινόμησης / προβολής: χωρίς λευκό ───────────────────────────────
   Δύο πηγές λευκού:
   1) το .select_box2 { background:#fff } του css/global-style.css:1143 — το
      κουτί πίσω από το «ΔΗΜΟΦΙΛΗ ⌄»·
   2) ό,τι της μπάρας δεν καλύπτεται από το .main_content_out έπαιρνε το λευκό
      του #wrapper (css/global-style.css:119) και του body (γρ. 18). Βάζουμε το
      off-white και στο <main>, που περικλείει τα πάντα ανάμεσα σε header και
      footer, ώστε να μη μένει λευκή λωρίδα πουθενά στη σελίδα της λίστας.
      Header/footer είναι ΕΚΤΟΣ του <main> (views/F101/index.php:79,160) και δεν
      επηρεάζονται. */
.page_products main.main-content-wrapper {
    background-color: #f7f2ed;
}

.page_products .select_box2,
.page_products .products_bar_out,
.page_products .products_bar_out > .row,
.page_products .products_bar,
.page_products .grid_out {
    /* background: #fff;  <- παλιό στο .select_box2, από το global */
    background: transparent;
}


/* ── «Μετάβαση στο καλάθι»: ίδιο look με το «Προσθήκη στο καλάθι» ────────────
   Το .goto_basket βγαίνει ΜΟΝΟ στα προϊόντα ΧΩΡΙΣ ιδιότητες, όταν το προϊόν
   είναι ήδη στο καλάθι (product_change_area.php:94). Ήταν ροζ #f5afaf με
   CeraGreek-Bold 18px/ls 3px (γρ. 599-624) — τίποτα από αυτά δεν υπάρχει στο
   σχεδιαστικό. Το ευθυγραμμίζουμε με το .basket_btn (γρ. 241-270), που στο comp
   08-Infi-Eshop-Details.jpg είναι κουμπί 354x72 σε #262626 με λευκό κείμενο. */
.product_buttons .goto_basket {
    /* background: #f5afaf; border-radius: 4px;  <- παλιό */
    background: #333;
    border-radius: 0;
    padding-left: 15px;
    padding-right: 15px;
}

.product_buttons .goto_basket a {
    /* font-family: CeraGreek-Bold; font-size: 18px; letter-spacing: 3px;
       padding: 13px 0;  <- παλιό */
    color: #fff !important;
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.12em;
    padding: 16px 10px;
}


/* ── Καρδιά αγαπημένων (σελίδα προϊόντος) — όπως στο comp ────────────────────
   Μετρήσεις από το 08-Infi-Eshop-Details.jpg, τετράγωνο x1479..1535 y592..642:
     · χρώμα μελανιού (median)  #a88466  → η ζητούμενη τιμή #a88465
     · ink / bbox = 0.74  → ΓΕΜΑΤΗ καρδιά (το outline δίνει ~0.30), ενώ το
       $fav_icon βγάζει «far fa-heart» (περίγραμμα) όταν ΔΕΝ είναι αγαπημένο
       (controllers/product.php:489). Το far και το fas είναι το ίδιο glyph
       (\f004) και διαφέρουν ΜΟΝΟ στο font-weight, οπότε το 900 το κάνει γεμάτο.
   Η γεματη καρδια του comp ειναι η κατασταση «ΕΠΙΛΕΓΜΕΝΟ». Ζητουμενο: μονο
   περιγραμμα οσο ΔΕΝ ειναι στα αγαπημενα, γεματη μολις επιλεγει — αυτο το κανει
   ηδη το $fav_icon (far = περιγραμμα / fas = γεματη), οποτε ΔΕΝ καρφωνουμε
   font-weight εδω: θα ισοπεδωνε τις δυο καταστασεις. Αλλαζουμε μονο το χρωμα,
   που ισχυει και στις δυο. */
.product_favorite_in > span {
    /* color: #F05A28;  <- παλιό πορτοκαλί (γρ. 2351) */
    color: #a88465;
    /* font-weight: 900;  <- το εκανε ΠΑΝΤΑ γεματη· το βαρος το οριζει το far/fas */
}

.product_favorite:hover span {
    /* color: #FFD1D1;  <- παλιό ροζ (γρ. 1085), δεν υπάρχει στο σχεδιαστικό */
    color: #a88465;
}


/* ── Εξαντλημένο ΜΕΓΕΘΟΣ: διαγώνια γραμμή, όπως στα χρώματα ──────────────────
   Το .number_item.disactive δεν είχε καμία οπτική ένδειξη: το global του δίνει
   color:#ccc + λευκό φόντο (css/global-style.css:6524), αλλά το ξαναγράφει το
   .div_table .number_item .number_item_in (γρ. 2318) με ίδια specificity και πιο
   κάτω στη σειρά — οπότε το εξαντλημένο έμοιαζε ολόιδιο με το διαθέσιμο και το
   καταλάβαινες μόνο από το «0 / 0» που βλέπουν μόνο οι admins.
   Δεν υπάρχει .number_mask element (όπως το .color_mask των χρωμάτων), οπότε τη
   γραμμή τη βάζουμε με ::after. Ίδιο ακριβώς gradient με το
   .color_item.disactive .color_mask (γρ. 3123) για να ταιριάζουν οπτικά. */
.number_item.disactive .number_item_in {
    border-color: #e0e0e0;
    color: #b3b3b3;
    position: relative;
}

.number_item.disactive .number_item_in::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    background-image: linear-gradient(
        to top right,
        transparent calc(50% - 0.5px),
        rgba(120, 120, 120, 0.5) calc(50% - 0.5px),
        rgba(120, 120, 120, 0.5) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
    );
    pointer-events: none;
    z-index: 2;
}

/* Το global δίνει «border: 1px dashed #fff» στο hover (γρ. 6530) — εδώ το
   .number_item δεν έχει καν border (γρ. 2314), οπότε το κρατάμε ουδέτερο. */
.number_item.disactive:hover .number_item_in {
    border-color: #cccccc;
}


/* Τα εικονίδια της στήλης λεπτομερειών (Περιγραφή / μεταφορικά / επιστροφές /
   τηλέφωνο) κληρονομούσαν το #5b5b5b του .product_text (γρ. 2369), ενώ στο comp
   08-Infi-Eshop-Details.jpg είναι μαύρα όπως και τα κείμενα (μέτρηση: ink #000).
   Το χρειάζεται και για συνέπεια: το returns.svg έχει καρφωμένο μαύρο fill, οπότε
   χωρίς αυτό θα ήταν το μόνο μαύρο ανάμεσα σε τρία γκρι. */
.product_text > span {
    color: #000;
}


/* ═══ Κατακόρυφο carousel μινιατούρων — όπως στο comp ════════════════════════
   Preview\Desktop\08-Infi-Eshop-Details.jpg, λωρίδα x333..451:
     · μινιατούρα 119 x 178  (λόγος 0.669, ίδιος με τα 151/225 της λίστας)
     · κενό 11px, ορατά 4 ολόκληρα + «μύτη» του 5ου  → viewport 822px
     · βέλη ↑ / ↓ 17x17, κεντραρισμένα στη λωρίδα, 8px πάνω / 19px κάτω
     · ΚΑΜΙΑ σκιά γύρω από τις μινιατούρες (μέτρησα καθαρό #fff στα όρια)
   Το ύψος του .swiper-container ΔΕΝ το πειράζω: ο Swiper βγάζει το ύψος του
   slide από αυτό και το πλάτος ακολουθεί, οπότε οι αναλογίες βγαίνουν σωστές
   σε κάθε breakpoint χωρίς να αγγίξω το 02-general-responsive.css. */

/* Τα βέλη ήταν εντελώς κρυμμένα (γρ. 2769) — το comp τα θέλει ορατά. */
.swiper-container-for-navi .swiper-button-prev.abs,
.swiper-container-for-navi .swiper-button-next.abs {
    /* display: none;  <- παλιό (γρ. 2769) */
    display: block;
    height: 17px;
    width: 17px;
    line-height: 17px;
    margin-top: 0;
}

/* Ο χώρος των βελών κρατιέται ΜΕΣΑ στη λωρίδα (padding), όχι με αρνητικό top:
   αλλιώς το πάνω βέλος ξεχείλιζε 27px πάνω από τη στήλη και «έτρωγε» όλο το
   padding-top:30px του #product_out (.padding_top_bottom, global:1274) —
   κολλούσε στη μπάρα του μενού. Με padding μένει το κανονικό κενό των 30px.
   comp: μπάρα μενού τελειώνει y224, βέλος y256 (32px), 1η μινιατούρα y280 (56px). */
.swiper-container-for-navi {
    padding-top: 25px;      /* 17px βέλος + 8px κενό ως την 1η μινιατούρα */
    padding-bottom: 36px;   /* 19px κενό + 17px βέλος */
}

.swiper-container-for-navi .swiper-button-prev.abs {
    /* top: 0 μέσα στο padding-top */
    top: 0;
    bottom: auto;
}

.swiper-container-for-navi .swiper-button-next.abs {
    bottom: 0;
    top: auto;
}

.swiper-container-for-navi .swiper-button-prev.abs::after,
.swiper-container-for-navi .swiper-button-next.abs::after {
    /* font-size: 20px;  <- παλιό (css/global-style.css:4488/4509) */
    font-size: 17px;
    font-weight: 300;    /* fa-light: λεπτό βέλος όπως στο σχεδιαστικό */
    line-height: 17px;
}

.swiper-container-for-navi .swiper-button-disabled {
    opacity: 0.25;
}

/* Καθαρή μινιατούρα: το comp δεν έχει σκιά, και ο λόγος είναι 119/178.
   Το object-fit χρειάζεται γιατί τα thumbnails2 είναι 145x200 (0.725) και με
   width/height 100% χωρίς αυτό παραμορφώνονταν. */
.product_gallery_small .photo_small {
    /* box-shadow: 0 0 3px rgba(0,0,0,.25);  <- παλιό (γρ. 1008), εκτός σχεδιαστικού */
    box-shadow: none;
    /* aspect-ratio: 67 / 107;  <- παλιό (0.626) */
    aspect-ratio: 119 / 178;
    margin-bottom: 0;
}

.product_gallery_small .photo_small img {
    /* aspect-ratio: 67 / 107;  <- παλιό */
    aspect-ratio: 119 / 178;
    object-fit: cover;
}


/* ═══ Newsletter — 1:1 με το comp ════════════════════════════════════════════
   Preview\Desktop\01-Infi-Eshop-Home.jpg, μπάντα y3859..4382 (ύψος 524px):
     · φόντο                     #f2e9e0   (ήταν #FAFAFA)
     · τίτλος NEWSLETTER         y3955..3982, πλάτος 275px  → ήδη σωστός
                                 (ExtraBold 36px + ls .12em βγάζει ακριβώς 275)
     · υπότιτλος 2 γραμμές       19px, ls .5px, line-height 28px, ink #262626
     · input + OK                y4147..4192 (46px), συνολικό πλάτος 473px
                                 (υπογράμμιση 359 + κενό 23 + κουμπί 91)
     · κουμπί OK                 91x46, #262626
     · checkbox                  23x23 γεμάτο #262626, κείμενο 21px δεξιά, 15px
     · κενά                      τίτλος→υπότιτλος 30, υπότιτλος→input 88,
                                 input→checkbox 82, checkbox→τέλος 85
   Όλα scoped στο .newsletter-section (η κλάση του banner) ώστε να μην αλλάξει
   το newsletter του popup / exit intent, που μοιράζεται τα ίδια class names. */

.newsletter-section {
    /* background-color: #FAFAFA;  <- παλιό (γρ. 860) */
    background-color: #f2e9e0;
}

.newsletter-section .newsletter_area_out_top {
    /* font-size: 18px; letter-spacing: .06em; width: 640px;
       margin: 10px auto 85px;  <- παλιό (γρ. 869) */
    font-size: 19px;
    letter-spacing: 0.5px;
    line-height: 28px;
    margin: 10px auto 88px;
    max-width:600px;
}

.newsletter-section .newsletter_area_out_bottom {
    /* width: 520px;  <- παλιό (γρ. 864) */
    width: 473px;
}

.newsletter-section .newsletter_submit {
    /* height: 40px;  <- παλιό (γρ. 910) */
    height: 46px;
    line-height: 46px;
}

.newsletter-section .eshop_oroi.newsletter_terms {
    /* margin: 60px 0 70px;  <- παλιό (γρ. 375) */
    margin: 72px 0 85px;
}

/* Checkbox: το global το ζωγραφίζει με sprite (images/design/checkbox_oroi.png,
   20x20 — css/global-style.css:7406). Το comp θέλει 23x23 τετράγωνο: περίγραμμα
   όσο δεν είναι τσεκαρισμένο, γεμάτο #262626 με λευκό τικ όταν είναι. */
.newsletter-section .newsletter_terms input[type="checkbox"] + label span {
    /* background: url(../images/design/checkbox_oroi.png) top left no-repeat;  <- παλιό */
    background: none;
    border: 1px solid #262626;
    box-sizing: border-box;
    height: 23px;
    width: 23px;
    margin-right: 21px;
    position: relative;
}

.newsletter-section .newsletter_terms input[type="checkbox"]:checked + label span {
    /* background-position: bottom left;  <- παλιό */
    background: #262626;
}

.newsletter-section .newsletter_terms input[type="checkbox"]:checked + label span::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    font-size: 12px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.newsletter-section .newsletter_terms input[type="checkbox"] + label {
    font-size: 15px;
    letter-spacing: 0.5px;
}

/* Στο comp το «Όρους Χρήσης» δεν είναι υπογραμμισμένο (δεν βρέθηκε γραμμή κάτω
   από το κείμενο στη σάρωση y4290..4301). */
.newsletter-section .newsletter_terms a {
    /* text-decoration: underline;  <- παλιό (css/global-style.css:7391) */
    text-decoration: none;
}


#contact_submit_btn a, #contact_submit_btn_1 a, #friend_submit_btn a{
        background: #000;
}
να φιανεται σε καλυτυερο σημειο χοι εκει κατω και με χρωμα σφλαματος αν εχουμε σφλαμα αλλιως με χρωμα επιτυχιας αν γινει κανονικα η εγγραφη

/* ── Μηνύματα newsletter: θέση + χρωματισμός επιτυχίας / σφάλματος ───────────
   Ο server γυρνάει ήδη .news_right για επιτυχία και .news_wrong για σφάλμα
   (ajax/send_request.php:73-216) και το global τα χρωματίζει (γρ. 469/473).
   Δύο προβλήματα: (α) το μήνυμα «αποδεχθείτε τους όρους» έβγαινε ως .news_middle,
   δηλαδή άχρωμο, ενώ είναι σφάλμα — άλλαξε σε .news_wrong στο jquery_css.php·
   (β) το .newsletter_results ήταν σε ξεχωριστό row κάτω από το .newsletter_area,
   ~120px κάτω από το checkbox. Τώρα κάθεται αμέσως μετά το checkbox και το κενό
   που έλειπε το επιστρέφουμε ως margin-bottom, ώστε να μη χαλάσει το ύψος της
   μπάντας (comp: checkbox → τέλος μπάντας 85px). */
.newsletter-section .eshop_oroi.newsletter_terms {
    /* margin: 72px 0 85px;  <- ο κάτω χώρος πάει τώρα στο .newsletter_results */
    margin: 72px 0 18px;
}

.newsletter-section .newsletter_results {
    /* font-family: 'PF Futura Neu Book';  <- παλιό (γρ. 906), εκτός θέματος */
    font-family: 'Manrope-Light', Arial, Helvetica, sans-serif;
    font-size: 15px;
    letter-spacing: 0.5px;
    line-height: 22px;
    margin-bottom: 45px;
    min-height: 22px;
    padding-top: 0;
    text-align: center;
}

/* Το .news_middle (φόρτωση) μένει ουδέτερο· τα άλλα δύο παίρνουν έμφαση. */
.newsletter-section .news_middle {
    color: #5b5b5b;
}

.newsletter-section .news_wrong,
.newsletter-section .news_right {
    font-family: 'Manrope-Medium', Arial, Helvetica, sans-serif;
}

.newsletter-section .news_wrong {
    color: #A90D0D;
}

.newsletter-section .news_right {
    color: #1f8f5b;
}


/* Τηλέφωνο / email του mobile menu έγιναν tel: / mailto: links
   (mobile_menu.php:572-573). Κληρονομούν το χρώμα του γονέα ώστε να μη
   ξεχωρίζουν οπτικά — μόνο να είναι πατήσιμα. */
.footer-hours-in > div > a {
    color: inherit;
    text-decoration: none;
}


/* ── Footer: τρόποι πληρωμής / αποστολής ─────────────────────────────────────
   Σύμφωνα με το σχεδιαστικό (Preview/Desktop/01 + Preview/Mobile/01):
   λευκή ζώνη, logo σε ΕΝΙΑΙΟ ύψος 30px, κεντραρισμένα, με 14px κενό.
   Είναι flex-wrap χωρίς breakpoint: σε στενή οθόνη σπάει μόνο του σε γραμμές,
   ακριβώς όπως το mobile comp (3 γραμμές στα 360px).
   Το tweak για <=350px είναι στο 02-general-responsive.css. */

.cards-logo {
    background: #fff;
    margin-top: 0;              /* το global-style.css:4426 έβαζε 20px */
    padding: 22px 15px;
    column-gap: 14px;
    row-gap: 16px;
}

.cards-logo .cards-logo-item {
    height: 30px;
    width: auto;
    max-width: 100%;
    aspect-ratio: auto;         /* ακυρώνει τυχόν κληρονομούμενο ratio */
    flex: 0 0 auto;
    object-fit: contain;
}


/* ── Footer mobile: accordion στις στήλες (ABOUT US / ΠΛΗΡΟΦΟΡΙΕΣ / ΕΞΥΠΗΡΕΤΗΣΗ) ──
   Κλειστά by default, ανοίγουν με κλικ στον τίτλο (slideToggle στο jquery_css.php).
   Το βελάκι είναι ΕΝΑ glyph (fa-angle-down) που περιστρέφεται 180° — smooth, σε
   αντίθεση με το παλιό μοτίβο του theme που άλλαζε glyph απότομα.
   Όλα scoped στο .mobile-footer-wrapper: το desktop footer δεν το αγγίζει. */

.mobile-footer-wrapper .footer-acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}

.mobile-footer-wrapper .footer-acc-arrow {
    flex: 0 0 auto;
    margin-left: 12px;
    font-size: 18px;
    line-height: 1;
    transition: transform 0.28s ease;
}

.mobile-footer-wrapper .footer-acc-header.open .footer-acc-arrow {
    transform: rotate(180deg);
}

.mobile-footer-wrapper .footer-acc-content {
    display: none;          /* κλειστά κατά την είσοδο στη σελίδα */
}

.mobile-footer-wrapper .footer-acc-content > ul {
    margin-bottom: 0;
}

.cookies_alert_popup_in{
    padding:0px !important;
}

.cookies_alert_popup_in .display-inline{
    padding:15px;
}


#cookies-popup .modal-header{
    background:#f7f2ed;
}

.cookies_respect_privacy{
    width:100%;
    padding:15px 0px; 
    background:#f7f2ed;
}

.cookies-popup-buttons .btn.btn-primary{
	background-color: #000;
	border-color: #000;
}

.banner_out.products_related_products .banner_title_area_out,
.banner_out.recently_seen .banner_title_area_out {
    height:auto !important;
    margin-bottom:10px;
}

/* ── Popup «ΤΟ ΠΡΟΪΟΝ ΠΡΟΣΤΕΘΗΚΕ ΣΤΟ ΚΑΛΑΘΙ ΣΟΥ» ────────────────────────────
   Βάση: Preview/Desktop/10-Infi-Eshop-Add-to-basket.jpg
   Τα χρώματα είναι δειγματοληψία από το ίδιο το comp, όχι εκτίμηση:
   κρεμ κεφαλίδα #EEE0D3, σκούρο κείμενο #262626, γκρι labels #A0A0A0.
   Το global-style.css δίνει λευκό κείμενο/× (σχεδιασμένο για σκούρα μπάρα)
   και μαύρο fill και στα δύο κουμπιά — τα δύο πρώτα τα γυρίζουμε εδώ. */

/* κεφαλίδα: κρεμ φόντο ⇒ σκούρο κείμενο, εικονίδιο και × */
.popup_basket_area_title h2 {
    color: #262626;
}

.popup_basket_area_title img {
    filter: brightness(0);      /* το cart_bag_check.png είναι λευκό· το κάνει σκούρο */
}

.popup_delete.popup_basket_close {
    color: #323232;
}

/* ιδιότητες: label γκρι, τιμή έντονη σκούρα */
.popup_basket_txt h4 {
    color: #A0A0A0;
}

.popup_basket_txt h4 strong {
    color: #262626;
}

/* τιμές */
.popup_basket_prices {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 18px;
}

.popup_basket_price_old {
    color: #A0A0A0;
    text-decoration: line-through;
    font-size: 15px;
}

.popup_basket_price_new {
    color: #262626;
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 20px;
}

/* κουμπιά: 1ο περίγραμμα σε λευκό, 2ο μαύρο γεμάτο */
.popup_basket_btn a {
    background: #fff;
    border: 1px solid #262626;
    color: #262626 !important;
}

.popup_basket_btn.red a {
    background-color: #262626;
    border-color: #262626;
    color: #fff !important;
}


/* ── Popup σφάλματος (.announcepopup) ────────────────────────────────────────
   Ίδια παλέτα με το popup «προστέθηκε στο καλάθι», ώστε τα popup του site να
   μοιάζουν μεταξύ τους. Το global-style.css το δίνει με μαύρη μπάρα και λευκό ×.
   Παράγεται από την popup_message() στο eshop_jquery_functions.php. */

.announcepopup_top {
    /* background: #000; */
    background: #EEE0D3;
    padding: 22px 45px 22px 15px;   /* δεξιά αέρας για να μην πέφτει το × πάνω στον τίτλο */
    text-align: center;
}

.announcepopup_top h2 {
    color: #262626;
    font-size: 15px;
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    letter-spacing: 0.06em;
}

.announcepopup_close i {
    color: #323232;
    font-size: 21px;
}

.announcepopup_bottom {
    color: #262626;
    padding: 22px 20px;
    font-size: 14px;
}


/* ══ Σελίδα καλαθιού ═══════════════════════════════════════════════════════
   Βάση: Preview/Desktop/12-Infi-Eshop-Basket-Page.jpg
   Παλέτα δειγματοληπτημένη από το comp:
     χρυσό accent #A88464 · κείμενο #262626 · labels #5C5C5C
     παλιά τιμή #A6A6A6 · γραμμές #D9D9D9
   Το προηγούμενο styling είχε βυσσινί (#a40b2a κ.λπ.) που δεν υπάρχει πουθενά
   στο σχεδιαστικό. */

/* ── Βήματα checkout: αριθμημένοι κύκλοι ──
   ΠΡΟΣΟΧΗ στη δομή: το <li> ΔΕΝ είναι η κουκίδα — είναι ολόκληρη η στήλη του
   βήματος (global-style.css:8613, width:25%). Η κουκίδα είναι το li:before και
   η γραμμή σύνδεσης το li:after. Άρα ο κύκλος πάει στο :before, αλλιώς το <li>
   γίνεται τεντωμένη έλλειψη.
   Οι αριθμοί μπαίνουν με CSS counter — καμία αλλαγή στο PHP. */
.checkout ul.dots {
    counter-reset: infi_step;
}

.checkout ul.dots li {
    counter-increment: infi_step;
}

/* ο κύκλος */
.checkout ul.dots li:before,
.checkout ul.dots li.active:before {
    content: counter(infi_step);
    width: 38px;
    height: 38px;
    line-height: 36px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #262626;
    color: #262626;
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 14px;
    /* μηδενίζουμε τις μετατοπίσεις που έβαζε το global στο .active (right/top) */
    right: auto;
    top: auto;
    z-index: 2;
}

.checkout ul.dots li.active:before,
.checkout ul.dots li.color:before {
    background-color: #A88464;
    border-color: #A88464;
    color: #fff;
}

/* η γραμμή σύνδεσης — ανεβαίνει στο κέντρο του 38άρη κύκλου */
.checkout ul.dots li:after {
    top: -20px;
    height: 1px;
    background-color: #262626;
    z-index: 1;
}

.checkout ul.dots_title li,
.checkout ul.dots_title li a {
    color: #262626;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Πίνακας ── */
/* Μηδενισμός των gutters του grid ΜΟΝΟ μέσα στο #table_content. Το
   _grid-framework δίνει padding-left/right:15px σε κάθε .col* και το .row
   αντισταθμίζει με margin-left/right:-15px (bootstrap.css:580). Αν μηδενίσουμε
   μόνο το padding, τα -15px του .row μένουν και το περιεχόμενο ξεχειλίζει 15px
   έξω από το container - γι' αυτό μηδενίζουμε ΚΑΙ τα δύο.
   Το [class*="col-"] δεν πιάνει τα .basket_col_title / .no_r_col (underscore). */
#table_content [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

#table_content .row {
    margin-left: 0;
    margin-right: 0;
}

.basket_table_item,
.basket_table_head {
    border-color: #D9D9D9;
}

.basket_title h3 {                     /* ΚΩΔ. */
    color: #A6A6A6;
}

.basket_title h2 {
    color: #262626;
}

.basket_title h4 {                     /* Χρώμα: / Μέγεθος: */
    color: #5C5C5C;
    text-transform: uppercase;
}

/* στο comp η ΤΙΜΗ της ιδιότητας είναι bold και σκούρα, η ετικέτα όχι
   (ΧΡΩΜΑ: ΜΑΥΡΟ). Το span το προσθέτει το included_pages/eshop_items_content.php */
.basket_title h4 .basket_idiotita_value {
    color: #262626;
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
}

/* διαγραφή: λεπτό × αντί για εικόνα */
.basket_delete_btn {
    cursor: pointer;
    color: #A6A6A6;
    font-size: 18px;
    line-height: 1;
    transition: color 0.2s ease;
}

.basket_delete_btn:hover {
    color: #262626;
}

/* τιμές */
.basket_table_item .products_price_new {
    color: #262626;
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 16px;
}

/* Γραμμή τίτλων του πίνακα («ΠΡΟΪΟΝΤΑ», «ΑΞΙΑ», «ΠΟΣΟΤΗΤΑ», …) σε bold.
   Το Manrope δεν έχει Bold face στο project - το πιο βαρύ που φορτώνεται και
   χρησιμοποιείται ήδη για έμφαση είναι το Manrope-SemiBold. */
#basket #table_content .table_content_title .basket_col_title,
#basket #table_content .table_content_title .basket_col_title .b_table_cell {
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-weight: 600;
}

/* Στήλη «ΜΕΡΙΚΟ ΣΥΝΟΛΟ» (τελευταία): στο σχεδιαστικό είναι ΔΕΞΙΑ στοιχισμένη,
   όχι κεντραρισμένη. Το global δίνει .basket_table_item_in.center{margin:0 auto}
   (global-style.css:6821), δηλαδή shrink-to-fit κεντραρισμένο - το γυρίζουμε
   δεξιά με margin-left:auto. Το header κελί το στοιχίζουμε κι αυτό δεξιά. */
/* Οι κανόνες ήταν κλειδωμένοι στο #basket (μόνο σελίδα καλαθιού). Ο ίδιος
   πίνακας (#table_content) βγαίνει και στο checkout/confirm και στις σελίδες
   παραγγελίας, όπου το wrapper #basket ΔΕΝ υπάρχει (eshop_basket_list.php:49
   vs included_pages/eshop_content_confirm.php:845) - γι' αυτό εκεί το «ΜΕΡΙΚΟ
   ΣΥΝΟΛΟ» έμενε κεντραρισμένο. Ξεκλειδώνουμε τα selectors ώστε η δεξιά
   στοίχηση να ισχύει ΠΑΝΤΟΥ.
   παλιά: #basket #table_content .table_content_title .basket_col_title:last-child */
#table_content .table_content_title .basket_col_title:last-child {
    text-align: right;
}

/* παλιά: #basket #table_content .table_content_data .no_r_col .basket_table_item_in.center */
#table_content .table_content_data .no_r_col .basket_table_item_in.center {
    margin-left: auto;
    margin-right: 0;
}

/* παλιά: #basket #table_content .table_content_data .no_r_col .products_price_new */
#table_content .table_content_data .no_r_col .products_price_new {
    float: none;                       /* το .products_price_new έχει float:left */
    text-align: right;
}

.basket_table_item .products_price_old,
.basket_table_item .products_price_old.strikediag {
    color: #4d4d4d;
    font-size: 12px;
    text-decoration: line-through;
    background: none;                  /* το strikediag έβαζε διαγώνιο background */
}

/* έκπτωση σε χρυσό */
.basket_discount_value {
    color: #A88464;
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size:16px;
}

/* ποσότητα: στρογγυλά κουμπιά με περίγραμμα */
.basket_quantity_btn {
    background: #fff !important;
    border: 1px solid #C9C9C9;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    color: #262626;
    cursor: pointer;
}

.basket_quantity_down::before { content: '\2212'; }   /* − */
.basket_quantity_up::before   { content: '\002B'; }   /* + */

.basket_quantity {
    background: none !important;
    border: none !important;
    color: #262626;
    text-align: center;
    width: 34px;
}

/* σύνολα */
.basket_list_p_total,
.table_results_item {
    color: #262626;
}

/* Γραμμές στο μπλοκ συνόλων. Στο comp υπάρχουν ΤΡΕΙΣ οριζόντιες γραμμές:
   y=907 πάνω από το «Μερικό Σύνολο», y=963 ανάμεσα, y=1011 κάτω από το «ΣΥΝΟΛΟ»
   (πλάτος ~283px, γκρι #CCCCCC / #D9D9D9). Το global έχει μόνο border-top στο
   .table_results και το border-bottom των σειρών είναι σχολιασμένο
   (global-style.css:7031). Περιορισμένο στο #basket ώστε να μην επηρεαστούν
   τα σύνολα σε άλλες σελίδες (checkout κ.λπ.). */
/* Χωρίς γραμμή ΠΑΝΩ από το μπλοκ - το global έβαζε border-top στο .table_results
   και έβγαινε τρίτη υπογράμμιση. Θέλουμε μόνο δύο: κάτω από «Μερικό Σύνολο»
   και κάτω από «ΣΥΝΟΛΟ». */
#basket .table_results {
    border-top: none;
    padding-top: 12px;
}

/* ΔΙΟΡΘΩΣΗ ΠΛΑΤΟΥΣ: οι υπογραμμίσεις ΔΕΝ πάνε edge-to-edge. Στο comp το μπλοκ
   των συνόλων είναι στενό (~283px) κολλημένο δεξιά και οι γραμμές πιάνουν
   ακριβώς αυτό το πλάτος - όχι όλη τη σειρά του καλαθιού.
   Παλιά λογική (λάθος): το .table_results_item έπαιρνε width:100%, οπότε το
   border-bottom έβγαινε σε όλο το πλάτος του container. */
#basket .table_results {
    margin-left: auto;
    max-width: 283px;
    width: 100%;
}

/* Το row είναι col-lg-11 + col-lg-1: μέσα σε 283px το col-lg-1 γίνεται ~23px
   και το ποσό σπάει σε δύο σειρές. Τα κάνουμε auto-width flex, ώστε το label
   να κάθεται αριστερά και το ποσό δεξιά μέσα στο στενό μπλοκ. */
#basket .table_results .table_results_item .row {
    align-items: baseline;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

#basket .table_results .table_results_item .table_r_col {
    flex: 0 0 auto;
    max-width: none;
    width: auto;
}

#basket .table_results .table_results_item {
    border-bottom: none;
    padding-bottom: 14px;
    padding-top: 14px;
    /* width: 100%; */
}

/* Υπογράμμιση ΜΟΝΟ στις δύο σειρές που θέλουμε: «Μερικό Σύνολο» (η πρώτη που
   τυπώνεται στο καλάθι) και «ΣΥΝΟΛΟ» (.total_price). Το μπλοκ έχει και άλλες
   σειρές (ΦΠΑ, δόσεις) που στο καλάθι βγαίνουν άδειες - αν έπαιρναν border,
   άφηναν ορφανή γραμμή. */
#basket .table_results .table_results_item:first-child,
#basket .table_results .table_results_item.total_price {
    border-bottom: 1px solid #D9D9D9;
}

/* καμία γραμμή πάνω στα ίδια τα κείμενα - μόνο στη σειρά */
#basket .table_results .table_results_left,
#basket .table_results .table_results_right,
#basket .table_results .table_r_col {
    border: none;
}

/* Στο καλάθι εμφανίζονται μόνο «Μερικό Σύνολο» και «ΣΥΝΟΛΟ»: αν κάποια άλλη
   σειρά του μπλοκ βγει άδεια (μεταφορικά / πόντοι / δόσεις), δεν πρέπει να
   αφήνει ορφανή γραμμή. :empty δεν πιάνει σειρές με κενά, γι' αυτό κρύβονται
   και ρητά όσες δεν είναι οι δύο ζητούμενες. */
#basket .table_results .table_results_item:empty,
#basket .table_results .table_results_item.installments:empty {
    border-bottom: none;
    display: none;
}

/* ΔΙΟΡΘΩΣΗ ΜΕΓΕΘΩΝ: στο comp το «ΣΥΝΟΛΟ» είναι ΜΕΓΑΛΥΤΕΡΟ και πιο bold από το
   «Μερικό Σύνολο». Το λάθος ήταν ότι το global δίνει
   .table_results_right{font-size:20px} (global-style.css:7051) - άρα το ποσό
   του «Μερικό Σύνολο» έβγαινε 20px και το «ΣΥΝΟΛΟ» 15px, δηλαδή ανάποδα.
   Comp: «Μερικό Σύνολο» 13px Regular / «ΣΥΝΟΛΟ» 15px SemiBold. */
#basket .table_results .table_results_left,
#basket .table_results .table_results_right {
    font-family: 'Manrope-Regular', Arial, Helvetica, sans-serif;
    /* παλιά: 20px στο .table_results_right από το global */
    font-size: 13px;
    font-weight: normal;
}

/* Το global δίνει padding-right:10px στο .table_results_right, που άφηνε το €
   15px πιο μέσα από το τέλος της γραμμής. Στο comp είναι φλου με τη γραμμή. */
#basket .table_results .table_results_right {
    padding-right: 0;
}

#basket .table_results_item.total_price .table_results_left,
#basket .table_results_item.total_price .table_results_right {
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
}

.table_results_item.total_price,
.total_price_numwf {
    color: #262626;
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
}

/* Το global δίνει .table_results .table_results_right span{padding-right:5px}
   (global-style.css:7328). Έβγαζε το κενό ΠΡΙΝ το €, όταν το € ήταν μετά τον
   αριθμό. Τώρα στο καλάθι το € μπαίνει ΠΡΙΝ (€41.00), οπότε τα 5px έμεναν
   κρεμασμένα δεξιά και χαλούσαν τη στοίχιση με τη γραμμή. */
#basket .table_results .table_results_right span {
    padding-right: 0;
}

/* Τίτλος «ΚΑΛΑΘΙ ΑΓΟΡΩΝ» πάνω από τον πίνακα προϊόντων στο checkout.
   Ίδιο style με τους υπόλοιπους τίτλους ενοτήτων της σελίδας (15px
   Manrope-SemiBold, uppercase, letter-spacing 0.08em, #262626) - το global
   .title_conf είναι 18px κεντραρισμένο (global-style.css:7150).
   Το markup μπαίνει από το included_pages/eshop_content_confirm.php. */
.basket_top_title {
    margin-bottom: 30px;
}

.basket_top_title .title_conf {
    color: #262626;
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ==========================================================================
   ΣΥΝΟΛΑ ΣΤΗ ΣΕΛΙΔΑ CHECKOUT
   Το μπλοκ των συνόλων του καλαθιού είναι σκόπιμα κλειδωμένο σε #basket (πιο
   πάνω). Η σελίδα checkout τυλίγεται σε .basket_confirm_item, οπότε έπαιρνε
   σκέτα τα global: γραμμή πάνω σε όλο το πλάτος, ποσά 20px και labels
   στοιχισμένα ΔΕΞΙΑ.
   Μετρήσεις από το comp Preview/Desktop/13-Infi-Eshop-Checkout.jpg (1920px,
   1 image px = 1 CSS px):
     - μπλοκ 300px κολλημένο δεξιά (x 1227→1527 μέσα σε container 1140px)
     - label αριστερά / ποσό δεξιά, 13px Manrope-Regular #262626
     - «Μερικό Σύνολο»: SemiBold ΜΟΝΟ το ποσό - το label μένει Regular
     - «ΣΥΝΟΛΟ» 15px SemiBold, με γραμμή ΠΑΝΩ και ΚΑΤΩ
     - βήμα σειράς 28px, κενό τελευταίας σειράς→γραμμή 25px,
       γραμμή→ΣΥΝΟΛΟ 22px, ΣΥΝΟΛΟ→κάτω γραμμή 22px
   Η γραμμή πάνω από το μπλοκ στο comp (y=2267, #cccccc, όλο το πλάτος του
   container) ΔΕΝ είναι του .table_results - είναι το border-bottom της
   τελευταίας σειράς του πίνακα προϊόντων, που υπάρχει ήδη πιο κάτω.
   ========================================================================== */
.basket_confirm_item .table_results {
    /* παλιά (global-style.css:7019): border-top: 1px solid #cccccc; */
    border-top: none;
    margin-left: auto;
    max-width: 300px;
    width: 100%;
}

/* Το row είναι col-lg-11 + col-lg-1: μέσα σε 300px το col-lg-1 γίνεται ~25px
   και το ποσό σπάει σε δύο σειρές. Τα κάνουμε auto-width flex. */
.basket_confirm_item .table_results .table_results_item .row {
    align-items: baseline;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.basket_confirm_item .table_results .table_results_item .table_r_col {
    flex: 0 0 auto;
    max-width: none;
    width: auto;
}

.basket_confirm_item .table_results .table_results_item {
    padding-bottom: 5px;
    padding-top: 5px;
}

.basket_confirm_item .table_results .table_results_left,
.basket_confirm_item .table_results .table_results_right {
    color: #262626;
    font-family: 'Manrope-Regular', Arial, Helvetica, sans-serif;
    /* παλιά: .table_results_right 20px / .table_results_left text-align:right + padding-top:3px */
    font-size: 13px;
    font-weight: normal;
    padding-top: 0;
    text-align: left;
}

.basket_confirm_item .table_results .table_results_right {
    padding-right: 0;
    text-align: right;
}

.basket_confirm_item .table_results .table_results_right span {
    padding-right: 0;
}

/* «Μερικό Σύνολο»: bold μόνο το ποσό. Η κλάση subtotal μπαίνει από το
   included_pages/eshop_items_results.php. */
.basket_confirm_item .table_results .table_results_item.subtotal .table_results_right {
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-weight: 600;
}

.basket_confirm_item .table_results .table_results_item.total_price {
    border-bottom: 1px solid #D9D9D9;
    border-top: 1px solid #D9D9D9;
    margin-top: 25px;
    padding-bottom: 22px;
    padding-top: 22px;
}

.basket_confirm_item .table_results .table_results_item.total_price .table_results_left,
.basket_confirm_item .table_results .table_results_item.total_price .table_results_right {
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
}

/* άδειες σειρές (ΦΠΑ / δόσεις / πόντοι) να μην αφήνουν ορφανό κενό */
.basket_confirm_item .table_results .table_results_item:empty,
.basket_confirm_item .table_results .table_results_item.installments:empty {
    display: none;
    padding: 0;
}

/* κουμπιά: αριστερά «ΣΥΝΕΧΕΙΑ ΑΓΟΡΩΝ» με περίγραμμα, δεξιά «ΟΛΟΚΛΗΡΩΣΗ» μαύρο γεμάτο
   (το global δίνει βυσσινί #a40b2a στο .basket_order_btn) */
.btn_back {
    background: #fff;
    border: 1px solid #262626;
}

.btn_back a {
    color: #262626 !important;
}

.basket_order_btn {
    background: #262626;
    border: 1px solid #262626;
}

.basket_order_btn:hover {
    background: #000;
}

/* Μέγεθος κουμπιών από το comp (12-Infi-Eshop-Basket-Page.jpg):
     ΣΥΝΕΧΕΙΑ ΑΓΟΡΩΝ      x 389..676   y 1052..1103  ->  288 x 52 (με το 1px border)
     ΟΛΟΚΛΗΡΩΣΗ ΠΑΡΑΓΓ.   x 1245..1531 y 1053..1102  ->  287 x 50
   Κείμενο: ύψος κεφαλαίων 10px και πλάτος 207px -> Manrope-SemiBold 14px
   με letter-spacing .045em (το global έδινε 13px / padding 10px 15px,
   που βγάζει το κουμπί ~268x42). */
.btn_back,
.basket_order_btn {
    min-width: 288px;
}

.btn_back a,
.basket_order_btn a {
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 14px;
    letter-spacing: .045em;
    line-height: 48px;
    padding: 0 15px;
    text-align: center;
}

/* τα βελάκια μέσα στα κουμπιά δεν υπάρχουν στο σχεδιαστικό */
.btn_back a > span,
.basket_order_btn a > span {
    display: none;
}

/* Το κείμενο του «ΟΛΟΚΛΗΡΩΣΗ ΠΑΡΑΓΓΕΛΙΑΣ» έβγαινε ροζ πάνω σε ροζ πλακίδιο.
   Καμία δήλωση στα global-style.css / 01-general-style.css δεν δίνει τέτοιο
   background, άρα έρχεται από αλλού (inline style στο lang string ή τρίτο
   stylesheet). Το κλειδώνουμε εδώ: διάφανο φόντο, λευκό κείμενο. */
.basket_order_btn a,
.basket_order_btn a * {
    background: transparent !important;
    color: #fff !important;
}

.basket_confirm_item.with_bg{
    background:#f7f2ed;
}



/* ══ Checkout: τρόποι αποστολής / πληρωμής / τιμολόγησης ═══════════════════
   Βάση: Preview/Desktop/13-Infi-Eshop-Checkout.jpg — ΜΟΝΟ CSS.
   Το input[type=radio] μένει display:none όπως το είχε το theme — η επιλογή
   συνεχίζει να γίνεται με το label[for], άρα δεν αγγίζεται καμία λειτουργία.
   Το markup άλλαξε σε δύο σημεία (τίτλος/υπότιτλος/χρέωση στους τρόπους
   αποστολής, .timologisi_form εκτός .b_confirm_radio) — βλ. σχόλια πιο κάτω.
   Χρώματα δειγματοληπτημένα από το comp:
     κάρτα #f7f2ed · διαχωριστικό #E7E6E4 · περίγραμμα radio #C3BFBC
     επιλεγμένο #262626 */

/* Τίτλοι ενοτήτων — ΜΟΝΟ των τριών μπλοκ (αποστολή / πληρωμή / τιμολόγηση).
   Οι υπόλοιποι τίτλοι της σελίδας (π.χ. ΑΠΟΣΤΟΛΗ, ΠΑΡΑΤΗΡΗΣΕΙΣ) μένουν
   κεντραρισμένοι όπως ήταν — γι' αυτό το :has() αντί για σκέτο .title_conf.
   Σε browser χωρίς :has() δεν εφαρμόζεται τίποτα και μένουν όλοι κεντραρισμένοι,
   δηλαδή η αρχική συμπεριφορά. */
.basket_confirm_item_in:has(.send_way_data) .title_conf,
.basket_confirm_item_in:has(.pay_way_data) .title_conf,
.basket_confirm_item_in:has(input[name="timologisi_kind"]) .title_conf {
    text-align: left;
    text-transform: uppercase;
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 15px;
    letter-spacing: 0.08em;
    color: #262626;
}

.basket_confirm_item_in:has(.send_way_data) .basket_confirm_item_t,
.basket_confirm_item_in:has(.pay_way_data) .basket_confirm_item_t,
.basket_confirm_item_in:has(input[name="timologisi_kind"]) .basket_confirm_item_t {
    border-bottom-color: #E7E6E4;
}

/* ── custom radio: κύκλος με ✓ όταν επιλέγεται ── */
.b_confirm_radio input[name="send_way"] + label,
.b_confirm_radio input[name="pay_way"] + label,
.b_confirm_radio input[name="timologisi_kind"] + label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #262626;
}

.b_confirm_radio input[name="send_way"] + label > span:first-child,
.b_confirm_radio input[name="pay_way"] + label > span:first-child,
.b_confirm_radio input[name="timologisi_kind"] + label > span:first-child {
    position: relative;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0 12px 0 0;
    border: 1px solid #C3BFBC;
    border-radius: 50%;
    background: none;               /* ακυρώνει το sprite radio_button.png */
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.b_confirm_radio input[name="send_way"]:checked + label > span:first-child,
.b_confirm_radio input[name="pay_way"]:checked + label > span:first-child,
.b_confirm_radio input[name="timologisi_kind"]:checked + label > span:first-child {
    background: #262626;            /* ακυρώνει το bottom-sprite */
    border-color: #262626;
}

/* το ✓ — καθαρό CSS, χωρίς εξάρτηση από icon font */
.b_confirm_radio input[name="send_way"]:checked + label > span:first-child::after,
.b_confirm_radio input[name="pay_way"]:checked + label > span:first-child::after,
.b_confirm_radio input[name="timologisi_kind"]:checked + label > span:first-child::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* απόσταση ανάμεσα στις επιλογές */
.send_way_data .b_confirm_radio,
.pay_way_data .b_confirm_radio {
    margin-top: 14px;
}

/* ΠΡΟΣΩΡΙΝΟ: κρύβεται η επεξήγηση κάτω από τον επιλεγμένο τρόπο αποστολής
   (π.χ. «Παράδοση στην πόρτα σου σε 1 με 5 εργάσιμες μέρες»), όπως και στους
   τρόπους πληρωμής. Το global την εμφάνιζε με .b_confirm_radio.active .b_confirm_radio_text.
   Επαναφορά: σβήσε το display:none και ξεσχολίασε τη μορφοποίηση από κάτω. */
.send_way_data .b_confirm_radio_text,
.pay_way_data .b_confirm_radio_text,
.b_confirm_radio.active .b_confirm_radio_text {
    display: none;
}

/* ── Τρόπος αποστολής: τίτλος + υπότιτλος + χρέωση σε μία γραμμή ─────────────
   Markup: label > span(κύκλος) + img(λογότυπο) + .send_way_texts + .send_way_cost
   (included_pages/eshop_send_way.php). Ο υπότιτλος έρχεται από το πεδίο
   «Υπότιτλος XX» (sub_title_XX) και η χρέωση από το «Τιμή» (gerenal_cost)
   στους Τρόπους αποστολής του διαχειριστικού — αν είναι κενά δεν τυπώνονται.
   ΠΡΟΣΟΧΗ: η global-style.css στυλίζει ΚΑΘΕ span μέσα στο label ως radio
   sprite (.b_confirm_radio input[type="radio"]+label span) — γι' αυτό τα νέα
   στοιχεία ΔΕΝ είναι span αλλά <b>/<em>, που δεν τα πιάνει κανένας κανόνας.
   Μην τα ξαναγυρίσεις σε span. */
/* Σταθερή στήλη λογοτύπου, ώστε όλοι οι τίτλοι να ξεκινούν στο ίδιο x και να
   είναι ντετερμινιστικό το indent του κουμπιού BOX NOW πιο κάτω.
   Το .basket_confirm_item_d μπροστά είναι απαραίτητο: χωρίς αυτό κερδίζει ο
   κανόνας της global-style.css (.basket_confirm_item_d .send_way_data
   input[type=radio]+label img → height:22px; width:auto; margin-right:10px). */
.basket_confirm_item_d .send_way_data .b_confirm_radio label img {
    flex: 0 0 42px;
    width: 42px;
    height: 26px;
    object-fit: contain;
    object-position: center;
    margin-right: 12px;
}

.send_way_data .b_confirm_radio label .send_way_texts,
.send_way_data .b_confirm_radio label .send_way_title,
.send_way_data .b_confirm_radio label .send_way_sub,
.send_way_data .b_confirm_radio label .send_way_cost {
    font-weight: normal;
    font-style: normal;
    cursor: pointer;
}

.send_way_data .b_confirm_radio label .send_way_texts {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;                   /* να μπορεί να συρρικνωθεί αντί να σπρώχνει την τιμή έξω */
}

.send_way_data .b_confirm_radio label .send_way_title {
    display: block;
    line-height: 1.35;
}

.send_way_data .b_confirm_radio label .send_way_sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: #5C5C5C;
}

.send_way_data .b_confirm_radio label .send_way_cost {
    flex: 0 0 auto;
    margin-left: 16px;
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 15px;
    white-space: nowrap;
    color: #262626;
}

/* ── BOX NOW: κουμπί «Επιλογή Locker» ────────────────────────────────────────
   Το markup βγαίνει από την BoxNow::getWidget() (admin/includes/BoxNow.php) και
   η global-style.css το δίνει πράσινο #44d62d, width:190px με space-between —
   δηλαδή κείμενο αριστερά και λούπα κολλητά δεξιά. Εδώ μπαίνει στη γραμμή του
   θέματος: μαύρο, στοιχισμένο στη στήλη του κειμένου (90px). */
.send_way_data .boxnowmap-wrapper,
.send_way_data .locker-infos {
    margin-left: 90px;              /* 24px κύκλος + 12px + 42px λογότυπο + 12px = στήλη κειμένου */
}

.send_way_data a.boxnow-map-widget-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 190px;
    margin: 10px 0 0 0;
    padding: 11px 15px;
    background: #262626;            /* ακυρώνει το πράσινο #44d62d του global */
    color: #ffffff;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.04em;
}

.send_way_data a.boxnow-map-widget-button i {
    font-size: 16px;
}

.send_way_data .locker-infos {
    margin-top: 10px;
    border-color: #E7E6E4;
    color: #5C5C5C;
}

/* .send_way_data .b_confirm_radio_text,
.pay_way_data .b_confirm_radio_text {
    margin-left: 36px;
    color: #5C5C5C;
    font-size: 12px;
} */


/* ── Τρόποι πληρωμής: από tabs σε λίστα επιλογών ─────────────────────────────
   ΠΡΟΣΟΧΗ: το μπλοκ ΔΕΝ είναι radio όπως η αποστολή — είναι Bootstrap tabs
   (<ul class="nav nav-tabs"> + <input type="hidden" name="pay_way">). Η επιλογή
   γράφεται στο hidden input με JS στο κλικ του <a data-toggle="tab">.
   Εδώ αλλάζει ΜΟΝΟ η εμφάνιση: το data-toggle, τα href="#tab_N" και το hidden
   input μένουν ακέραια, άρα η λειτουργία δεν πειράζεται.
   Το global δίνει μαύρη μπάρα (#000) και βυσσινί ενεργό (#a40b2a). */

.pay_way_data .b_confirm_tabs_top {
    background: none;
}

.pay_way_data .b_confirm_tabs_top .nav-tabs {
    display: block;                 /* ήταν flex σε οριζόντια σειρά */
}

.pay_way_data .b_confirm_tabs_top .nav-tabs > li {
    display: block;
    flex-grow: 0;
    width: 100%;
}

.pay_way_data .b_confirm_tabs_top .nav-tabs > li > a {
    display: flex;
    align-items: center;
    position: relative;             /* βλ. σχόλιο στο ✓ πιο κάτω */
    text-align: left;
    padding: 9px 0;
    font-size: 14px;
    letter-spacing: 0.02em;
    color: #262626;
    background: none;
}

/* Λογότυπο τρόπου πληρωμής. ΑΠΑΡΑΙΤΗΤΟ: τα αρχεία είναι SVG χωρίς
   width/height — μέσα σε flex <a> χωρίς περιορισμό παίρνουν το default
   300x150 του replaced element και τινάζουν τη στήλη. Ο κανόνας της
   global-style.css που μικραίνει τα λογότυπα πιάνει μόνο input+label img,
   δηλαδή τους τρόπους αποστολής — όχι το <a> των tabs. */
.pay_way_data .b_confirm_tabs_top .nav-tabs > li > a img {
    flex: 0 0 42px;
    width: 42px;
    height: 26px;
    object-fit: contain;
    object-position: center;
    margin-right: 12px;
}

/* τίτλος + υπότιτλος + χρέωση, όπως στους τρόπους αποστολής */
.pay_way_data .b_confirm_tabs_top .nav-tabs > li > a .pay_way_texts,
.pay_way_data .b_confirm_tabs_top .nav-tabs > li > a .pay_way_title,
.pay_way_data .b_confirm_tabs_top .nav-tabs > li > a .pay_way_sub,
.pay_way_data .b_confirm_tabs_top .nav-tabs > li > a .pay_way_cost {
    font-weight: normal;
    font-style: normal;
}

.pay_way_data .b_confirm_tabs_top .nav-tabs > li > a .pay_way_texts {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.pay_way_data .b_confirm_tabs_top .nav-tabs > li > a .pay_way_title {
    display: block;
    line-height: 1.35;
}

.pay_way_data .b_confirm_tabs_top .nav-tabs > li > a .pay_way_sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: #5C5C5C;
}

.pay_way_data .b_confirm_tabs_top .nav-tabs > li > a .pay_way_cost {
    flex: 0 0 auto;
    margin-left: 16px;
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 15px;
    white-space: nowrap;
    color: #262626;
}

/* ο κύκλος επιλογής */
.pay_way_data .b_confirm_tabs_top .nav-tabs > li > a:before {
    content: '';
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    border: 1px solid #C3BFBC;
    border-radius: 50%;
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* ενεργό: γεμάτος κύκλος — και ακυρώνουμε το βυσσινί background του global */
.pay_way_data .b_confirm_tabs_top .nav-tabs > li > a.active,
.pay_way_data .b_confirm_tabs_top .nav-tabs > li.active > a,
.pay_way_data .b_confirm_tabs_top .nav-tabs > li > a:hover,
.pay_way_data .b_confirm_tabs_top .nav-tabs > li > a:focus {
    background: none !important;
    color: #262626;
}

.pay_way_data .b_confirm_tabs_top .nav-tabs > li > a.active:before,
.pay_way_data .b_confirm_tabs_top .nav-tabs > li.active > a:before {
    background-color: #262626;
    border-color: #262626;
}

/* Το ✓ — μπαίνει στο :after, που στο global σχεδίαζε τριγωνάκι κάτω από το tab.
   ΠΡΟΣΟΧΗ: το containing block πρέπει να είναι το <a> (γι' αυτό του δόθηκε
   position:relative πιο πάνω). Η global-style.css δίνει position:relative στο
   <li>, αλλά το <li> περιέχει πλέον και την περιγραφή του τρόπου, οπότε το
   top:50% θα έπεφτε στο κέντρο ΟΛΟΥ του <li> και το ✓ θα ξέφευγε από τον κύκλο. */
.pay_way_data .b_confirm_tabs_top .nav-tabs > li > a.active:after,
.pay_way_data .b_confirm_tabs_top .nav-tabs > li.active > a:after {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    margin-top: -7px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    border-top-color: transparent;      /* ακυρώνει το border-top-color του τριγώνου */
    border-left-color: transparent;
    transform: rotate(45deg);
    pointer-events: none;
}

/* ── Η περιγραφή του κάθε τρόπου, ακριβώς από κάτω του ───────────────────────
   Το .tab-content δεν είναι πια ενιαίο στο τέλος της λίστας — μπαίνει ένα μέσα
   σε κάθε <li>, με ένα μόνο .tab-pane (βλ. included_pages/eshop_pay_way.php).
   Η ορατότητα μένει στο Bootstrap: .tab-pane είναι display:none και ανοίγει
   μόνο το .active, δηλαδή του επιλεγμένου τρόπου.
   Τυπώνεται μόνο όταν το text_XX έχει περιεχόμενο, άρα οι τρόποι χωρίς
   περιγραφή δεν αφήνουν κενό. */
.pay_way_data .b_confirm_tabs_top .nav-tabs > li > .tab-content {
    margin: 0 0 6px 36px;
    font-size: 12px;
    line-height: 1.5;
    color: #5C5C5C;
}

/* όταν ο τρόπος έχει λογότυπο, η περιγραφή στοιχίζεται στη στήλη του κειμένου
   (24px κύκλος + 12px + 42px λογότυπο + 12px) */
.pay_way_data .b_confirm_tabs_top .nav-tabs > li:has(> a img) > .tab-content {
    margin-left: 90px;
}

.pay_way_data .b_confirm_tabs_top .nav-tabs > li > .tab-content img {
    max-width: 100%;
    height: auto;
}

/* ── Τρόποι τιμολόγησης: οι δύο επιλογές δίπλα-δίπλα ─────────────────────────
   Η .timologisi_form είναι αδερφός των δύο .b_confirm_radio (βλ.
   included_pages/eshop_content_confirm.php) και ανοίγει με .active από το JS
   (views/F101/view_included_pages/eshop_jquery_code.php) — με flex-basis 100%
   πέφτει σε δική της σειρά κάτω από τις επιλογές, σε πλήρες πλάτος. */
.basket_confirm_item_d:has(input[name="timologisi_kind"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 44px;
}

.basket_confirm_item_d:has(input[name="timologisi_kind"]) > .b_confirm_radio {
    margin-top: 0;
}

.basket_confirm_item_d:has(input[name="timologisi_kind"]) > .timologisi_form {
    flex: 0 0 100%;
    min-width: 0;
}

/* ── Checkout: μπεζ κάρτα γύρω από κάθε ενότητα ──────────────────────────────
   Στο comp η αποστολή/τιμολόγηση/πληρωμή κάθονται σε μπεζ πλακέτα με λευκό
   περιθώριο γύρω. Το μπεζ ΔΕΝ μπορεί να μπει στη λωρίδα (.basket_confirm_item
   .with_bg) γιατί η global-style.css τη βάφει λευκή στις ζυγές θέσεις με
   .basket_confirm_item.with_bg:nth-child(2n) — μεγαλύτερη specificity από τον
   κανόνα του θέματος πιο πάνω. Μπαίνει λοιπόν στην ίδια την κάρτα.
   Οι δύο κάρτες αποστολής/τιμολόγησης είναι διαδοχικές στην ίδια στήλη χωρίς
   margin, άρα το μπεζ βγαίνει ενιαίο και το padding τους δίνει το κενό
   ανάμεσα στις ενότητες (και τον αέρα κάτω από το κουμπί BOX NOW). */
.basket_confirm_item_in:has(.send_way_data),
.basket_confirm_item_in:has(.pay_way_data),
.basket_confirm_item_in:has(input[name="timologisi_kind"]) {
    background: #f7f2ed;
    padding:39px;
}

/* ==========================================================================
   ΕΚΠΤΩΤΙΚΟ ΚΟΥΠΟΝΙ
   Μετρήσεις 1:1 από το Preview/Desktop/13-Infi-Eshop-Checkout.jpg:
     - μπεζ πλαίσιο #f7f2ed σε όλο το πλάτος του container (x 390→1530),
       ύψος 120px (y 1609→1728) -> padding 35px κάθετα / 25px οριζόντια
     - τίτλος «ΕΚΠΤΩΤΙΚΟ ΚΟΥΠΟΝΙ» 19px Manrope-SemiBold #262626, αριστερά
     - input 301x51 λευκό, 1px #D9D9D9, placeholder 14px #808080
     - κουμπί 185x51 #262626, «Έλεγχος» 14px SemiBold λευκό αριστερά και
       εικονίδιο κυκλικών βελών ~23px δεξιά (fal fa-sync)
   Το global δίνει float:right στο .coupon_area_out και float:left στα δύο
   κομμάτια (global-style.css:7796+). Τα γυρίζουμε σε flex ώστε ο τίτλος να
   κάθεται αριστερά και το ζευγάρι input+κουμπί κολλητά στη δεξιά ακμή, χωρίς
   να αλλάξει η δομή του markup (το margin-left:auto στο .coupon_area σπρώχνει
   και ό,τι έρχεται μετά).
   ========================================================================== */
.basket_confirm_item_in:has(.coupon_area_out) {
    background: #f7f2ed;
    padding: 35px 25px;
}

.basket_confirm_item .coupon_area_out {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    /* παλιά (global-style.css:7796): float: right; */
    float: none;
}

.basket_confirm_item .coupon_title {
    color: #262626;
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
}

.basket_confirm_item .coupon_area {
    /* παλιά (global-style.css:7800): float: left; width: 250px; */
    float: none;
    margin-left: auto;
    width: 301px;
}

.basket_confirm_item .coupon_area input[type="text"] {
    /* παλιά (global-style.css:7805): border:1px solid #000; height:36px;
       line-height:26px; padding:1%; font-weight:bold; color:#58585a; */
    border: 1px solid #D9D9D9;
    border-right: 0;
    color: #262626;
    font-family: 'Manrope-Regular', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    height: 51px;
    line-height: 49px;
    padding: 0 25px;
}

.basket_confirm_item .coupon_area input[type="text"]::placeholder {
    color: #808080;
    opacity: 1;
}

.basket_confirm_item .check_coupon {
    align-items: center;
    /* παλιά (global-style.css:7819): background:#000; float:left; width:100px;
       height:36px; line-height:36px; font-size:15px; font-weight:700;
       letter-spacing:0.5px; */
    background: #262626;
    display: flex;
    float: none;
    font-family: 'Manrope-SemiBold', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    height: 51px;
    justify-content: space-between;
    letter-spacing: 0;
    line-height: 1;
    padding: 0 17px;
    width: 185px;
}

.basket_confirm_item .check_coupon .fa-sync {
    font-size: 23px;
}

/* το .clear σπάει τη σειρά ώστε τα μηνύματα του κουπονιού να πέφτουν από κάτω */
.basket_confirm_item .coupon_area_out .clear,
.basket_confirm_item .coupon_area_out .coupon_results {
    flex: 0 0 100%;
}


.basket_quantity_area_edit{
    background:none;
    margin:0px 5px;
}
.basket_quantity_area_edit input[type="text"]{
    height:25px;
}

.table_results_item.total_price .table_results_right {
    color: #262626;
}

#table_content .table_content_data .row:last-child .basket_item{
    border-bottom: 1px solid #ccc;
}

.inCheckOut .table_results_item.noBorder{
    border-bottom :none !important;
}


#basket.inCheckOut .table_results .table_results_item{
    padding:5px 0px;
}

#basket.inCheckOut .table_results .table_results_item.total_price{
    padding:15px 0px;
}

#basket.inCheckOut .subtotal .table_results_right {
    font-size:15px;
    font-weight:700;
}

#basket.inCheckOut .total_price .table_results_right{
    font-size:18px;
    font-weight:700;
}

.coupon_results_in{
    float:right;
}

.announcewrong_message_title{
    background:#eee0d3;
}