/*
Theme Name: Beauty Fix Custom Theme
Description: A custom HTML/CSS theme for Korean-Arabic skincare.
Author: Achilleas Koletis
Version: 1.0
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
/* ==========================================================================
   ΒΑΣΙΚΕΣ ΡΥΘΜΙΣΕΙΣ (RESET)
   ========================================================================== */
:root {
    --color-bright-snow: #FEFEFE;     /* Βασικό Background */
    --color-onyx: #0E0D10;            /* Κύριοι τίτλοι (H1, H2) / Σκούρα Backgrounds */
    --color-shadow-grey: #1B1920;     /* Βασικό κείμενο / Δευτερεύοντα Headers */
    --color-coffee-bean: #7D5F4D;     /* Σκούρες λεπτομέρειες / Borders */
    --color-light-peach: #f4bfb1;
	--color-almond-cream: #F5E6D8;
    --color-toasted-almond: #EBCCB0;  
}

*, *:before, *:after {

    box-sizing: inherit;

}


body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  	scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6, .site-logo h1 {
    font-family: 'Roboto Slab', serif; /* Αλλαγή εδώ */
    font-weight: 600;
    color: var(--color-onyx);
}

body, 
h1, h2, h3, h4, h5, h6, 
p, a, span, div, li, 
button, input, select, textarea,
.product-title, .product-price, .filter-title {
    font-family: 'Roboto Slab', serif !important;
}



/* ==========================================================================
   SCROLL REVEAL ANIMATIONS
   ========================================================================== */
/* Κυκλικό Onyx Badge για το Καλάθι */
.cart-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: var(--color-onyx, #111); /* Το Onyx χρώμα σου */
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.5s ease;
}

/* Βεβαιωνόμαστε ότι το a tag κρατάει σωστά τη θέση του badge */
.header-cart-wrapper a {
    position: relative;
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* The starting states (Hidden) */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

.reveal-fade {
    opacity: 0;
    transition: opacity 1s ease-out;
    will-change: opacity;
}

/* The active states (Revealed) */
.reveal-up.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-scale.is-revealed {
    opacity: 1;
    transform: scale(1);
}

.reveal-fade.is-revealed {
    opacity: 1;
}

/* Staggering Delays for Grids (Domino effect) */
.featured-card:nth-child(1) { transition-delay: 0.1s; }
.featured-card:nth-child(2) { transition-delay: 0.25s; }
.featured-card:nth-child(3) { transition-delay: 0.4s; }

.pillar-card:nth-child(1) { transition-delay: 0.1s; }
.pillar-card:nth-child(2) { transition-delay: 0.25s; }
.pillar-card:nth-child(3) { transition-delay: 0.4s; }

.philosophy-box:nth-child(1) { transition-delay: 0.1s; }
.philosophy-box:nth-child(2) { transition-delay: 0.3s; }

/* Hero stagger */
.hero-content h1 { transition-delay: 0.1s; }
.hero-content p { transition-delay: 0.25s; }
.hero-content .btn-primary { transition-delay: 0.4s; }


/* Wishlist Badge Style */
.header-wishlist-wrapper .wishlist-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: var(--color-onyx, #111); /* Το Onyx χρώμα σου */
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.5s ease;
}

.header-wishlist-wrapper:hover .wishlist-badge{
    background-color: var(--color-coffee-bean) ;
}
/* ==========================================================================
   TRUST BAR (Flawless Infinite Marquee)
   ========================================================================== */

.trust-bar {
    overflow: hidden;
    width: 100%;
    display: flex;
    padding: 15px 0; /* Remove side padding so it flows edge-to-edge */
    white-space: nowrap; /* Forces everything onto one straight line */
}

.trust-bar-track {
    display: flex;
    align-items: center;
    gap: 50px;
    padding-right: 50px; /* This padding MUST match the gap to prevent visual jumps between Track 1 and 2 */
    
    flex-shrink: 0; /* Crucial: stops the browser from squishing the track */
    min-width: 100%; /* Guarantees the track is at least the size of the screen */
    
    animation: marquee-scroll 45s linear infinite; /* 45s is a nice, slow, readable speed */
    cursor: default;
}

/* Targeting the specific span text inside the track */
.trust-bar-track span {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
}

.trust-bar-track span i {
    font-size: 18px; 
    margin-right: 6px;
}

/* The magic pause on hover */
.trust-bar:hover .trust-bar-track {
    animation-play-state: paused;
}

/* Absolute positioning for the Hero Section */
.bottom-trust-bar.absolute-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-onyx);
    color: var(--color-almond-cream);
    z-index: 10;
}

/* Moves exactly the width of ONE track (-100%).
  As Track 1 moves out, Track 2 takes its place seamlessly. 
*/
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Speeds it up slightly on mobile so it doesn't drag too slowly on small screens */
@media (max-width: 768px) {
    .trust-bar-track {
        animation: marquee-scroll 25s linear infinite; 
    }
}

/* ==========================================================================
   HEADER / TOP BAR (Μαύρη Μπάρα)
   ========================================================================== */
   
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding-top: 15px; 
    padding-bottom: 5px;
    background-color: transparent;
    transition: all 0.7s ease; 
}

.site-header.scrolled {
    background-color: color-mix(in srgb, white 90%, transparent);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(5px);
    padding-top: 8px; 
    padding-bottom: 12px;
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.3);
}

.site-header.scrolled .top-bar{
    padding-bottom: 14px;
}

.site-header.scrolled .top-bar a{
    color: var(--color-onyx);
}

.site-header.scrolled .top-center h1 {
    color: var(--color-onyx);
}


.site-header.scrolled .menu-categories a {
    color: var(--color-onyx);
    border: 1px solid var(--color-onyx);
}

.site-header.scrolled .menu-categories a::after {
    background-color: var(--color-onyx);   
}

.site-header.scrolled .menu-categories a:hover {
    color: var(--color-bright-snow) !important; 
}

.site-header.scrolled .menu-categories .sub-menu a:hover {
    color: var(--color-onyx) !important; 
}


.top-right {
    position: relative; /* Βεβαιώσου ότι το container έχει position relative */
}

.header-search-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

.search-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: inherit;
    padding: 0;
    display: flex;
}

/* Η φόρμα είναι αρχικά κρυμμένη και "μαζεμένη" (width: 0) */
.header-search-form {
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    position: absolute;
    right: 100%; /* Ανοίγει προς τα αριστερά του φακού */
    margin: 0;
    margin-right: 15px;
    display: flex;
    align-items: center;
}

/* Όταν παίρνει την κλάση is-active, ανοίγει */
.header-search-form.is-active {
    width: 250px;
    opacity: 1;
    margin: 0;
    margin-right: 15px;
}

.header-search-form .search-field {
    width: 100%;
    border: 1px solid var(--color-coffee-bean, #ccc);
    background: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 15px;
    outline: none;
    color: #333;
}


.light-theme-header .site-header .top-bar a{
    color: var(--color-onyx);
}
.light-theme-header .site-header .top-center h1 {
    color: var(--color-onyx);
}
.light-theme-header .site-header .menu-categories a {
    color: var(--color-onyx);
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.light-theme-header .site-header .menu-categories a::after {
    background-color: var(--color-onyx);   
}

.light-theme-header .site-header .menu-categories a:hover {
   color: var(--color-bright-snow) !important;   
}

.light-theme-header .site-header .menu-categories .sub-menu a {
    border: none !important;
}




/* --- WHITE THEME (Categories) --- */
/* Using your existing .scrolled styles as the baseline for white */
.site-header.theme-white {
    background-color: color-mix(in srgb, white 90%, transparent);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1);
}
.site-header.theme-white .top-bar a,
.site-header.theme-white .top-center h1,
.site-header.theme-white .menu-categories a { color: var(--color-onyx); }
.site-header.theme-white .menu-categories a { border-color: rgba(0, 0, 0, 0.5); }
.site-header.theme-white .menu-categories a::after { background-color: var(--color-onyx); }
.site-header.theme-white .menu-categories a:hover { color: var(--color-bright-snow) !important; }

/* --- BEIGE THEME (Featured) --- */
.site-header.theme-beige {
    background-color: color-mix(in srgb, var(--color-almond-cream) 90%, transparent);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1);
}
.site-header.theme-beige .top-bar a,
.site-header.theme-beige .top-center h1,
.site-header.theme-beige .menu-categories a { color: var(--color-onyx); }
.site-header.theme-beige .menu-categories a { border-color: rgba(0, 0, 0, 0.5); }
.site-header.theme-beige .menu-categories a::after { background-color: var(--color-onyx); }
.site-header.theme-beige .menu-categories a:hover { color: var(--color-almond-cream) !important; }
.site-header.theme-beige .menu-categories .sub-menu {background-color: color-mix(in srgb, var(--color-almond-cream) 100%, transparent);}
.site-header.theme-beige .menu-categories .sub-menu a:hover{
    background: white !important; 
}

.site-header.theme-dark {
    background-color: color-mix(in srgb, var(--color-onyx) 90%, transparent);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.5);
}
.site-header.theme-dark .top-bar a,
.site-header.theme-dark .top-center h1,
.site-header.theme-dark .menu-categories a { color: var(--color-bright-snow); }
.site-header.theme-dark .menu-categories a { border-color: rgba(255, 255, 255, 0.5); }
.site-header.theme-dark .menu-categories a::after { background-color: var(--color-bright-snow); }
.site-header.theme-dark .menu-categories a:hover { color: var(--color-onyx) !important; }
.site-header.theme-dark .menu-categories .sub-menu {background-color: color-mix(in srgb, var(--color-onyx) 100%, transparent);}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 4vw;
    transition: all 0.7s ease; 
    
}

.top-bar a {
    text-decoration: none;
    color: #fff;
    transition: color 0.4s ease; /* Ομαλή μετάβαση χρώματος στο hover */
}

/* Αλλαγή χρώματος στα εικονίδια όταν περνάει το ποντίκι */
.top-bar a:hover {
    color: var(--color-coffee-bean); /* Ένα ωραίο χρυσό/beige χρώμα ιδανικό για cosmetics */
}

.light-theme-header .site-header .top-bar a:hover {
    color: var(--color-coffee-bean) !important;
}

.top-left {
    display: flex;
    gap: 35px;
    font-size: 24px;
    align-items: center;
}

.top-center h1 {
    margin: 0;
    font-size: 30px;
    font-weight: normal;
    letter-spacing: 1px;
    color: white;
    line-height: 0.6;

}

.top-right {
    display: flex;
    gap: 35px;
    font-size: 24px;
}

.site-header.scrolled .menu-categories > li:hover > a {
    color: var(--color-bright-snow) !important; 
}

/* 2. Light Theme Header */
.light-theme-header .site-header .menu-categories > li:hover > a {
   color: var(--color-bright-snow) !important;   
}

/* 3. White Theme Header */
.site-header.theme-white .menu-categories > li:hover > a { 
    color: var(--color-bright-snow) !important; 
}

/* 4. Beige Theme Header */
.site-header.theme-beige .menu-categories > li:hover > a { 
    color: var(--color-almond-cream) !important; 
}

/* 5. Dark Theme Header */
.site-header.theme-dark .menu-categories > li:hover > a { 
    color: var(--color-onyx) !important; 
}


/* ==========================================================================
   MAIN NAVIGATION & DROPDOWNS (WordPress Ready)
   ========================================================================== */

/* 1. Το βασικό Flexbox του μενού (πλέον είναι <ul>) */
.menu-categories {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 15px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none; /* Βγάζουμε τις τελείες της λίστας */
}

/* 2. Κάθε βασικό κουμπί (Το <li>) */
.menu-categories > li {
    position: relative; /* Ορίζει το όριο για το dropdown */
}

/* Γέφυρα Hover: Ένα αόρατο κενό από κάτω για να μη χάνεται το ποντίκι όταν πας στο dropdown */
.menu-categories > li::before {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 15px;
}

/* 3. Τα κουμπιά (Links Πρώτου Επιπέδου) - Το ακριβές design σου! */
.menu-categories > li > a {
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: block; /* Απαραίτητο για τα <li> */
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 30px;
    text-decoration: none;
    color: var(--color-bright-snow);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.4s ease;
}

/* Το animation με την τελεία (Μόνο στο 1ο επίπεδο) */
.menu-categories > li > a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px; 
    width: 4px; 
    height: 4px;
    background-color: var(--color-bright-snow);
    border-radius: 50%;
    z-index: -1; 
    transform: translateY(100%); 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Κρατάμε το hover ενεργό είτε είσαι πάνω στο κουμπί, είτε πάνω στο dropdown του! */
.menu-categories > li:hover > a::after {
    transform: translateY(0) scale(150);
}

.menu-categories > li:hover > a {
    border-color: var(--color-bright-snow);
    color: var(--color-onyx);
}

/* ==========================================================================
   DROPDOWNS (Υποκατηγορίες)
   ========================================================================== */

.menu-categories .sub-menu {
    position: absolute;
    top: 100%; 
    left: 50%;
    transform: translateX(-50%) translateY(15px); 
    background-color: white;
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 10px 0;
    display: grid;
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    grid-auto-columns: 300px; /* Το πλάτος της κάθε στήλης */
    width: max-content; /* Τώρα το φόντο ξέρει να μεγαλώσει! */
    list-style: none;
    margin: 0;
    margin-top: 15px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    z-index: 999;
}

/* Απλοποιούμε το <li> για να ταιριάζει στο Grid */
.menu-categories .sub-menu li {
    width: 100%;
}

/* Εμφάνιση στο Hover (Το li "πιάνει" το hover και ανοίγει το υπομενού) */
.menu-categories > li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Τα στοιχεία μέσα στο dropdown */
.menu-categories .sub-menu li {
    width: 100%;
    border-radius: 6px !important;
    padding: 4px;
}

.menu-categories .sub-menu a {
    display: block;
    border: none; /* Βγάζουμε τα στρογγυλά περιγράμματα */
    border-radius: 0;
    color: var(--color-onyx); 
    padding: 10px 25px;
    font-size: 15px;
    text-align: left;
    border-radius: 6px !important;
    background: transparent;
    transition: background-color 0.5s ease, color 0.5s ease;
    white-space: normal;
    text-decoration: none;
}

/* Σβήνουμε το animation της τελείας για τα υπομενού */
.menu-categories .sub-menu a::after {
    display: none; 
}

/* Hover στις επιλογές του Dropdown */
.menu-categories .sub-menu a:hover {
    background-color: var(--color-almond-cream);
    color: black;
}

/* ==========================================================================
   ΚΟΥΜΠΙΑ (BUTTONS) - HOVER ANIMATION
   ========================================================================== */

.btn-primary {
    position: relative;
    display: inline-block;
    padding: 15px 35px;
    background-color: var(--color-onyx); /* Το χρώμα βάσης (Bronze) */
    color: var(--color-bright-snow); /* Λευκό κείμενο */
    font-family: inherit;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: none !important;
    border-radius: 50px;
    cursor: pointer;
    z-index: 1; /* Κρατάει το κείμενο μπροστά */
    overflow: hidden; /* Κρύβει την τελεία που βγαίνει έξω από το κουμπί */
    transition: all 0.7s ease; /* duration-700 */
    text-decoration: none;
}

.btn-primary {
    background-clip: border-box !important; /* Βοηθάει τον browser να κόψει σωστά το χρώμα στις καμπύλες */
}

/* Η μικρή τελεία που κρύβεται κάτω αριστερά (after) */
.btn-primary::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px; /* Αντιστοιχεί στο left-5 του Tailwind */
    width: 4px; /* h-1 w-1 στο Tailwind */
    height: 4px;
    background-color: var(--color-coffee-bean); /* Το σκούρο χρώμα που θα "γεμίσει" το κουμπί */
    border-radius: 5px; /* rounded-md */
    z-index: -1; /* Το βάζει πίσω από το κείμενο (-z-20) */
    transform: translateY(100%); /* Κρυμμένο ακριβώς κάτω από το κουμπί */
    transition: all 0.7s ease; /* duration-700 */
}

/* Το εφέ της έκρηξης (scale) στο hover */
.btn-primary:hover::after {
    transform: translateY(0) scale(300); /* Μεγεθύνεται 300 φορές! */
}


/* ==========================================================================
   ΑΡΧΙΚΗ ΣΕΛΙΔΑ - SECTION 1 (Hero Banner & Absolute Image)
   ========================================================================== */
.hero-section {
    position: relative;
    min-height: calc(100vh); /* 100vh για τη βιτρίνα + 55px για την μπάρα */
    height: auto;
    display: flex;
    align-items: center; 
    justify-content: flex-start; 
    padding-left: 8%;
    background-color: var(--color-light-peach); 
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 70%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden; 
}

/* Στυλ για τα κείμενα της βιτρίνας */
.hero-content {
    position: relative;
    z-index: 2; /* ΚΡΑΤΑΕΙ ΤΟ ΚΕΙΜΕΝΟ ΜΠΡΟΣΤΑ ΑΠΟ ΤΗΝ ΕΙΚΟΝΑ */
    max-width: 50vw; /* Περιορίζει το πλάτος για να αφήσει χώρο στην εικόνα δεξιά */
    text-align: left; /* Αριστερή στοίχιση για ισορροπία */
}

.hero-content h1 {
    font-size: 4rem; /* Λίγο μεγαλύτερο font-size για να γράφει πιο luxury */
    color: white;
    margin-bottom: 20px;
    line-height: 1.1; /* Φέρνει τις γραμμές του τίτλου πιο κοντά */
    /* Απαλή, μεγάλη σκιά για να ξεκολλάει ο τίτλος από το φόντο */
    text-shadow: 2px 4px 12px rgba(0, 0, 0, 0.35); 
}

.hero-content p {
    font-size: 1.2rem;
    color: white;
    margin-bottom: 40px;
    /* Πιο σφιχτή σκιά για να διαβάζονται καθαρά τα μικρά γράμματα */
    text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.4); 
}

/* ==========================================================================
   Η ΜΠΡΟΣΤΙΝΗ ΕΙΚΟΝΑ (Absolute Bottom Right)
   ========================================================================== */
.hero-foreground-img {
    position: absolute;
    bottom: 45px; /* Τη σηκώνουμε για να "κάθεται" πάνω στην μπάρα */
    right: 0; 
    z-index: 1; 
    max-height: 95vh; /* Ελαφρώς μικρότερο για να μην κρύβει το header */
    width: auto;
    object-fit: contain; 
    pointer-events: none; 
}


.parallax-section {
    top: 0; 
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    z-index: 1; 
}

.parallax-title {
    position: sticky;
    top: 0;
    height: 50vh; /* Πιάνουν ακριβώς τη μισή οθόνη! */
    width: 100%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: var(--color-onyx); /* Μαύρο πολυτελές φόντο */
    z-index: 1; 
    box-shadow: 0 -15px 30px rgba(0, 0, 0, 0.2); /* Σκιά για το 3D stacking effect */
}

/* Τα γράμματα μέσα στους ενδιάμεσους τίτλους */
.parallax-title h2 {
    font-size: 3.5rem;
    color: var(--color-light-peach); /* Το luxury χρυσό/bronze μας */
    margin: 0;
    text-transform: uppercase;
    text-align: center;
}

@media (min-aspect-ratio: 21/9) {
    .hero-foreground-img {
        right: 8vw !important;
    }
    .hero-section {
        padding-left: 15% !important;
    }
    .manual-slider-track {
        justify-content: center;
    }
}

@media (min-width: 1910px) {
	.manual-slider-track {
        justify-content: center;
    }
}
/* --------------------------------------------------------------------------
   RESPONSIVE (Τι γίνεται σε Κινητά & Tablets)
   -------------------------------------------------------------------------- */
   
@media (max-width: 992px) {
    .hero-section {
        justify-content: center;
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
    }
    
    .hero-content {
        text-align: center;
        max-width: 100%;
        background: rgba(250, 250, 250, 0.6); /* Ένα ελαφρύ θόλωμα/φόντο πίσω από το κείμενο για να διαβάζεται */
        padding: 30px;
        border-radius: 20px;
        backdrop-filter: blur(5px); /* Δίνει αίσθηση frosted glass */
    }

    .hero-content h1 {
        font-size: 2.8rem;
    }

    .hero-foreground-img {
        opacity: 0.4; /* Στα κινητά την κάνουμε ημιδιαφανή για να μην ενοχλεί το κείμενο */
        right: -10%; /* Την "σπρώχνουμε" λίγο έξω για να χωρέσει */
    }
}

/* ==========================================================================
   ΠΡΟΣΘΗΚΕΣ ΓΙΑ ΝΕΑ ΔΟΜΗ (Trust Bars, Κατηγορίες, Best Sellers, About Us)
   ========================================================================== */

.trust-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    padding: 15px 20px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.trust-bar i {
    font-size: 18px; 
    vertical-align: middle;
    margin-right: 5px;
}

/* Η μπάρα πλέον κάθεται απόλυτα στο κάτω μέρος του Hero Section */
.bottom-trust-bar.absolute-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-onyx) ;
    color:  var(--color-almond-cream);
    z-index: 10; /* Πάνω από το hero image */
}

@media (max-width: 768px) {
    .trust-bar {
        justify-content: flex-start;
        overflow-x: auto;
        white-space: nowrap;
        gap: 30px;
        padding: 12px 20px;
    }
    .trust-bar::-webkit-scrollbar {
        display: none; 
    }
}


.section-inner-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh; /* Αλλαγή από height σε min-height */
    height: auto;
    padding: 15vh 2% 40px 2%;
    overflow-x: hidden;
}

/* Το κεντρικό περιεχόμενο του section κεντράρεται */
.section-content {
    flex-grow: 1; /* Πιάνει όλο τον διαθέσιμο χώρο */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center; /* Κεντράρει οριζόντια */
    text-align: center;
}

/* Ο τίτλος που κάθεται στο κάτω μέρος του section */
.section-bottom-title {
    font-size: 3.5rem;
    margin: 0;
    text-transform: uppercase;
    text-align: center;
}

/* Ειδικός τίτλος για το About/Μαύρο section */
.about-mini-section .section-bottom-title {
    color: var(--color-light-peach);
    opacity: 0.3;
}

/* ΒΑΣΙΚΟ ΣΤΗΣΙΜΟ ΓΙΑ ΤΑ ΝΕΑ SECTIONS */
.home-section {
    padding: 80px 5%;
    text-align: center;
}

.section-title {
    font-size: 2.5rem;
    color: var(--color-onyx);
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}

/* ABOUT US SECTION */
.about-mini-section {
    background-color: var(--color-onyx);
    color: var(--color-bright-snow);
}

.about-mini-section h2 {
    color: var(--color-light-peach);
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.about-mini-section p {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.8;
}

















/* ==========================================================================
   FEATURED PRODUCTS GRID (Τυχαία 3 Stared)
   ========================================================================== */

.featured-products-section{
    background-color: transparent;
    display: flex;
    align-items: center; /* Κεντράρει κάθετα */
  	align-content: flex-start;
    flex-wrap: wrap;
  	z-index: 100;
}  

.featured-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Δημιουργεί 3 ίσες στήλες */
    gap: 30px;
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 20px;
  	padding-top:40px;
  	z-index:100;
}

.featured-card {
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.featured-card:hover {
    transform: translateY(-5px); /* Σηκώνεται ελαφρώς στο hover */
    transition-delay: 0s !important;
}

.featured-card a {
    text-decoration: none;
    color: inherit;
    display: block; 
}

/* Ρυθμίσεις για τη φωτογραφία του προϊόντος */
.featured-card .img-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 15px;
    aspect-ratio: 1 / 1; /* Αναγκάζει την εικόνα να είναι τέλειο τετράγωνο */
    object-fit: cover;
    box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);
}

.featured-card .product-title {
    font-size: 1rem;
    color: var(--color-onyx);
    margin: 10px 0;
    font-weight: 600;
    line-height: 1.4;
}

/* Τιμή WooCommerce (Επηρεάζει και την κανονική τιμή και την τιμή προσφοράς) */
.featured-card .product-price {
    font-weight: 700;
    color: var(--color-coffee-bean);
    font-size: 1.1rem;
    display: block;
    margin-top: 5px;
}

/* Αν έχει έκπτωση, διαγράφει την παλιά τιμή σωστά */
.featured-card .product-price del {
    color: #999;
    font-size: 0.9rem;
    font-weight: 400;
    margin-right: 8px;
}

.featured-card .product-price ins {
    text-decoration: none;
}


/* ==========================================================================
   ABOUT SECTION (H Φιλοσοφία μας)
   ========================================================================== */

.about-section {
    background-color: transparent; /* Σκούρο φόντο για αντίθεση */
    color: var(--color-bright-snow);
    position: sticky;
    display: flex;
    align-items: center;
    min-height: 100vh;
    align-content: center;
    z-index: 150; /* Σιγουρεύουμε ότι έρχεται πάνω από το Featured */
}

.about-content-wrapper {
    max-width: 1800px;
    margin: 0 auto;
    width: 100%;
    padding: 60px 20px;
}

/* --- Κεντρικό Κείμενο (Intro) --- */
.about-header {
    text-align: center;
    margin-bottom: 60px;
}

.about-intro {
    font-size: 1.25rem;
    line-height: 1.8;
    max-width: 850px;
    margin: 0 auto;
    color: #e0e0e0;
    font-weight: 300;
}

.about-intro strong {
    color: var(--color-toasted-almond);
    font-weight: 500;
}

/* --- Οι 3 Πυλώνες (Έμφαση) --- */
.about-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 80px;
}

.pillar-card {
    text-align: center;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03); /* Πολύ απαλό διαφανές άσπρο */
    transition: transform 0.5s ease, background 0.5s ease;
}

.pillar-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.06);
    transition-delay: 0s !important;
}

.pillar-card i {
    font-size: 40px;
    color: var(--color-light-peach);
    margin-bottom: 15px;
}

.pillar-card h4 {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pillar-card p {
    font-size: 0.95rem;
    color: #b0b0b0;
    line-height: 1.5;
    margin: 0;
}

/* --- Οι 2 Φιλοσοφίες (Split Grid) --- */
.philosophies-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.philosophy-box {
    padding: 40px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

/* Minimalistic Styling για τα κουτιά αντί για φωτογραφίες */
.k-beauty-box {
    background: linear-gradient(135deg, #171719 0%, #0c0c0b5e 100%);
    border-left: 4px solid var(--color-light-peach);
}

.arabian-box {
    background: linear-gradient(135deg, #0c0c0b5e 0%, #171719 100%);; /* Ελαφρώς πιο θερμό σκούρο */
    border-left: 4px solid var(--color-light-peach);
}

.philosophy-box h3 {
    font-size: 2rem;
    color: white;
    margin-bottom: 15px;
}

.arabian-box h3 {
    color: var(--color-light-peach);
}

.philosophy-box p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #d1d1d1;
    margin: 0;
}

/* --- Responsive ρυθμίσεις για κινητά/tablets --- */
@media (max-width: 992px) {
    .about-pillars {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .philosophies-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .about-intro {
        font-size: 1.1rem;
    }
}















/* ==========================================================================
   FOOTER (E-Shop Version)
   ========================================================================== */
.site-footer.custom-footer {
    color: var(--color-bright-snow);
    padding: 80px 5% 20px;
    position: relative;
    z-index: 10;
}

.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
}

/* --- Newsletter Section --- */
.footer-top {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 50px;
    margin-bottom: 50px;
}
.light-theme-footer .footer-top{
    border-bottom: 1px solid rgb(0 0 0 / 33%) !important;
}

.footer-top h3 {
    color: var(--color-light-peach);
    font-size: 2rem;
    margin-bottom: 10px;
}

.footer-top p {
    color: #d1d1d1;
    margin-bottom: 25px;
    font-size: 1.05rem;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    gap: 15px;
    max-width: 550px;
    margin: 0 auto;
}

.newsletter-form input {
    flex-grow: 1;
    padding: 15px 25px;
    border-radius: 500px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-bright-snow);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.5s ease;
}

.light-theme-footer .newsletter-form input {
    border: 1px solid rgba(0, 0, 0, 0.5) !important;
    color: black !important;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--color-light-peach);
}

.light-theme-footer .newsletter-form input:focus {
    border-color: black !important;
}

.newsletter-form input::placeholder {
    color: #888;
}

.newsletter-form .btn-primary {
    padding: 15px 40px;
    border: 1px solid var(--color-bright-snow) !important;
    transition: all 0.5s;
}
.light-theme-footer .newsletter-form .btn-primary {
    border: 1px solid var(--color-onyx) !important;
}
.newsletter-form .btn-primary:hover {
    border: 1px solid var(--color-coffee-bean) !important;
}

/* --- Footer Grid --- */
.footer-grid {
    display: grid;
    /* Η πρώτη στήλη πιάνει λίγο παραπάνω χώρο από τις άλλες δύο */
    grid-template-columns: 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 50px;
}




.footer-col h4 {
    color: var(--color-light-peach);
    font-size: 1.1rem;
    margin-bottom: 25px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.light-theme-footer .footer-col h4{
    color: var(--color-coffee-bean) !important;
}
/* Brand & Logo */
.footer-brand-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
}

.footer-logo-img {
    max-width: 140px !important;
    margin-bottom: 10px;
    /* Αν βάλεις λευκό λογότυπο, θα ταιριάξει τέλεια. */
}

.footer-logo-text {
    font-family: 'Roboto Slab', serif;
    font-size: 2rem;
    color: var(--color-bright-snow);
    margin: 0;
}

.light-theme-footer .footer-logo-text{
    color: var(--color-onyx);
}

/* Social Icons */
.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-bright-snow);
    text-decoration: none;
    font-size: 1.3rem;
    transition: all 0.5s ease;
}
.light-theme-footer .social-links a{
    background: var(--color-onyx);
}

.social-links a:hover {
    background: var(--color-light-peach);
    color: var(--color-onyx);
    transform: translateY(-3px);
}

.light-theme-footer .social-links a:hover{
    background: var(--color-coffee-bean) !important;
    color: var(--color-bright-snow) !important;
}
/* Lists & Links */
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.links-col a {
    color: #b0b0b0;
    text-decoration: none;
    transition: color 0.5s ease;
    font-size: 1rem;
    display: inline-block;
    transition: all 0.5s ease;
}
.light-theme-footer .links-col a {
    color:  var(--color-onyx) !important;
}

.links-col a:hover {
    color:  var(--color-light-peach);
}

.light-theme-footer .links-col a:hover {
    color:  var(--color-coffee-bean) !important;
}

/* Contact List */
.contact-col li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #b0b0b0;
    font-size: 1rem;
    line-height: 1.5;
}

.light-theme-footer .contact-col li {
    color:  var(--color-onyx) !important;
}

.contact-col li a {
    color: #b0b0b0;
    text-decoration: none;
    transition: color 0.5s ease;
}

.light-theme-footer .contact-col li a{
    color:  var(--color-onyx) !important;
}

.contact-col li a:hover {
    color: var(--color-light-peach);
}

.light-theme-footer .contact-col li a:hover{
    color:  var(--color-coffee-bean) !important;
}

.contact-col i {
    font-size: 1.4rem;
    color: var(--color-light-peach);
    margin-top: 2px; /* Στοιχίζει το εικονίδιο με το κείμενο */
}

.light-theme-footer .contact-col i{
    color: var(--color-coffee-bean) !important;
}


.links-col{
    display: flex;
    flex-wrap: wrap;
    text-align: right;
    justify-content: flex-end;
}

/* --- Footer Bottom & Payments --- */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
    color: #888;
    font-size: 0.95rem;
}

.light-theme-footer .footer-bottom {
    color : var(--color-onyx) !important;
    border-top: 1px solid rgb(0 0 0 / 33%) !important;
}
.payment-methods {
    display: flex;
    gap: 15px;
    font-size: 2rem;
    color: #888;
}

.light-theme-footer .payment-methods{
    color: var(--color-onyx) !important;
}

.payment-methods i {
    transition: color 0.5s ease;
}

.payment-methods i:hover {
    color: var(--color-light-peach);
}


.developer-credit {
    margin-left: 5px;
    color: #888;
}
.light-theme-footer .developer-credit {
    color : var(--color-onyx) !important;
}

.developer-credit a {
    color: #b0b0b0;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.5s ease;
}

.light-theme-footer .developer-credit a{
    color : black !important;
}

.developer-credit a:hover {
    color: var(--color-light-peach);
}

.light-theme-footer .developer-credit a:hover{
    color : #353535 !important;
}















































/* ==========================================================================
   CUSTOM PHP FILTERS (Sidebar)
   ========================================================================== */
.custom-filter-form .filter-widget {
    margin-bottom: 35px;
}

.custom-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--color-onyx);
    background: #fdfdfd;
}

.price-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.price-inputs input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
}

.filter-submit-btn {
    width: 100%;
    padding: 10px;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.custom-attr-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-attr-list li {
    margin-bottom: 10px;
}

.custom-attr-list a {
    color: #555;
    text-decoration: none;
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    transition: color 0.5s ease;
}

.custom-attr-list a:hover {
    color: var(--color-coffee-bean);
    font-weight: 500;
}

.custom-attr-list .count {
    font-size: 0.85rem;
    color: #999;
}

.clear-filters-btn {
    display: block;
    text-align: center;
    color: #d9534f;
    text-decoration: none;
    font-weight: 500;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #d9534f;
    border-radius: 6px;
    transition: all 0.5s ease;
}

.clear-filters-btn:hover {
    background: #d9534f;
    color: white;
}





/* ==========================================================================
   SHOP ARCHIVE LAYOUT (Sidebar + Main)
   ========================================================================== */
.shop-page-header {
    text-align: center;
    margin-bottom: 50px;
}

.shop-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 2vw;
    align-items: start;
}

/* --- SIDEBAR & ΦΙΛΤΡΑ --- */
.shop-sidebar {
    position: sticky;
    top: 100px;
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 0px 5px rgba(0,0,0,0.2); /* Απαλή σκιά για βάθος */
}

.filter-widget {
    margin-bottom: 40px;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 20px;
}

.filter-title {
    font-size: 1.1rem;
    color: var(--color-onyx);
    margin-bottom: 15px;
    font-weight: 600;
}

/* --- PRODUCT GRID --- */
.custom-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4x4 Grid */
    gap: 30px;
}

/* --- PRODUCT CARD PRO --- */
.product-card-pro {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.product-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Τετράγωνες Φωτογραφίες */
    overflow: hidden;
    border-radius: 8px;
    background: var(--color-bright-snow);
    margin-bottom: 15px;
    box-shadow: 0 0px 5px rgba(0,0,0,0.2) !important;
}

.product-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card-pro:hover .product-image-wrapper img {
    transform: scale(1.05);
}

/* Καρδούλα (Πάνω Αριστερά) */
.wishlist-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    background: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--color-onyx);
    cursor: pointer;
    box-shadow: 0 0px 10px rgba(0,0,0,0.1);
    z-index: 10;
    transition: all 0.5s ease;
}

.wishlist-btn:hover {
    color: red;
    transform: scale(1.1);
}

/* ==========================================================================
   DYNAMIC CART WRAPPER (Bottom Right)
   ========================================================================== */
.cart-action-wrapper {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--color-onyx); 
    border-top-left-radius: 12px;
    box-shadow: -2px -2px 10px rgba(0, 0, 0, 0.1);
    height: 45px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Κουμπιά - και + */
.single-product-wrapper .qty-btn {
    color: var(--color-onyx); /* Ή βάλε #000000 για εντελώς μαύρο */
}

.single-product-wrapper .qty-btn:hover {
    color: var(--color-coffee-bean); 
}


/* Prevent WooCommerce from showing the default "View Cart" text inside the wrapper */
.cart-action-wrapper .added_to_cart {
    display: none !important;
}

/* --- 1. The Hidden Qty Controls --- */
.qty-expander {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 0;
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When expanded, the controls slide open */
.cart-action-wrapper.is-expanded .qty-expander {
    width: 100px; 
    opacity: 1;
    visibility: visible;
    padding: 0 5px;
}

/* Inner + and - Buttons */
.qty-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: color 0.3s ease;
}

.qty-btn:hover {
    color: var(--color-light-peach);
}

/* Number Input Box */
.qty-input {
    width: 30px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: bold;
    color: white;
    font-size: 1rem;
    pointer-events: none;
    -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- 2. The Initial Tote Button --- */
.initial-add-btn {
    background: transparent;
    color: white;
    width: 45px;
    height: 100%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.initial-add-btn:hover {
    color: var(--color-light-peach);
}

/* When expanded, the Tote Button smoothly shrinks and fades out */
.cart-action-wrapper.is-expanded .initial-add-btn {
    width: 0;
    opacity: 0;
    padding: 0;
    visibility: hidden;
}

/* ==========================================================================
   PRODUCT INFO & PAGINATION
   ========================================================================== */
.product-info {
    padding-top: 10px;
}

.product-info .product-title {
    font-size: 1.05rem;
    margin: 0 0 8px 0;
}

.product-info .product-title a {
    color: var(--color-onyx);
    text-decoration: none;
}

.product-short-desc {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.4;
}

.product-price {
    font-weight: 600;
    color: var(--color-coffee-bean);
    font-size: 1.1rem;
}

/* --- PAGINATION --- */
.shop-pagination {
    margin-top: 50px;
    text-align: center;
}

.shop-pagination .page-numbers {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 5px;
    border: 1px solid var(--color-onyx);
    color: var(--color-onyx);
    text-decoration: none;
    border-radius: 50%;
    transition: all 0.5s;
}

.shop-pagination .page-numbers:hover {
    background: var(--color-bright-snow);
}

.shop-pagination .page-numbers.current {
    background: var(--color-onyx);
    color: white;
    border: 1px solid var(--color-onyx);
}

.sidebar-main-title {
    font-size: 1.8rem;
    color: var(--color-onyx);
    margin-bottom: 25px;
    padding-bottom: 10px;
    font-weight: 600;
}

.menu-categories .sub-menu a {
    border: none !important;
}

.menu-categories .sub-menu a:hover {
    color: var(--color-onyx) !important ;
}

.light-theme-header .site-header .menu-categories .sub-menu a:hover {
    color: var(--color-onyx) !important;
}

.light-theme-footer .footer-top h3 {
    color: var(--color-coffee-bean) !important;
}

.light-theme-footer .footer-top p {
    color: var(--color-onyx) !important;
}

/* --- MEGA MENU EDGE DETECTION --- */

/* If it hits the right side of the screen */
.menu-categories > li.edge-right .sub-menu {
    left: auto !important;
    right: 0 !important;
    transform: translateX(0) translateY(15px) !important; 
}
.menu-categories > li.edge-right:hover .sub-menu {
    transform: translateX(0) translateY(0) !important; 
}

/* If it hits the left side of the screen */
.menu-categories > li.edge-left .sub-menu {
    left: 0 !important;
    right: auto !important;
    transform: translateX(0) translateY(15px) !important; 
}
.menu-categories > li.edge-left:hover .sub-menu {
    transform: translateX(0) translateY(0) !important; 
}

.light-theme-footer .footer-logo-img {
    filter: invert(1) brightness(0);
}

/* --- MEGA MENU EDGE DETECTION --- */

/* If it hits the right side of the screen */
.menu-categories > li.edge-right .sub-menu {
    left: auto !important;
    right: 0 !important;
    transform: translateX(0) translateY(15px) !important; /* Start position */
}
.menu-categories > li.edge-right:hover .sub-menu {
    transform: translateX(0) translateY(0) !important; /* Hover position */
}

/* If it hits the left side of the screen */
.menu-categories > li.edge-left .sub-menu {
    left: 0 !important;
    right: auto !important;
    transform: translateX(0) translateY(15px) !important; /* Start position */
}
.menu-categories > li.edge-left:hover .sub-menu {
    transform: translateX(0) translateY(0) !important; /* Hover position */
}

.light-theme-footer .footer-logo-img {
    filter: invert(1) brightness(0);
}


/* =========================================================
   BEAUTY FIX - SINGLE PRODUCT LAYOUT (RIGHT COLUMN)
   ========================================================= */

.beauty-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-bottom: 60px;
}

/* Typography & Spacing */
.product_title { margin-bottom: 15px; font-size: 2rem; }
.beauty-price-wrapper { margin-bottom: 15px; font-size: 1.5rem; font-weight: bold;  color: var(--color-coffee-bean) !important;  }
.beauty-short-description { margin-bottom: 25px; color: #555; line-height: 1;font-size: 1rem;}
.beauty-sku-wrapper { margin-bottom: 10px; font-size: 15px; color: #333; }
.beauty-stock-wrapper { font-size: 15px; font-weight: bold; }
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock {color: #555;font-weight: lighter;
    font-size: 1rem;}
.woocommerce div.product div.images .flex-control-thumbs {
    overflow: hidden;
    zoom: 1;
    margin: 0;
    padding: 0;
    margin-top: 10px;
    display: flex;
}
.beauty-product-gallery .flex-viewport{
    margin: 5px !important;
    box-shadow: 0 0px 5px rgba(0,0,0,0.2) !important;
}

.woocommerce div.product div.images .flex-control-thumbs li{
    margin: 5px;
    box-shadow: 0 0px 5px rgba(0,0,0,0.2) !important;
}
/* Stock Colors */
.exact-stock, .general-stock { color: #28a745; /* Πράσινο */ }
.out-of-stock { color: #dc3545; /* Κόκκινο */ }

/* =========================================================
   CART, WISHLIST & PRO QUANTITY SELECTOR
   ========================================================= */

.beauty-cart-wishlist-area form.cart {
    display: flex;
    flex-wrap: wrap; /* Επιτρέπει στη φόρμα να "σπάσει" σε δύο γραμμές */
    gap: 20px;
    align-items: center;
    margin-bottom: 40px;
}

/* --- ΓΡΑΜΜΗ 1: Η Ποσότητα ολομόναχη πάνω --- */
.beauty-cart-wishlist-area form.cart .quantity {
    flex: 1 1 100%; /* Την αναγκάζει να πιάσει όλο το πλάτος και να ρίξει τα κουμπιά κάτω */
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.qty-label {
    font-weight: 600;
    font-size: 16px;
    color: var(--color-shadow-grey);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Το "χάπι" που περιέχει το - τον αριθμό και το + */
.qty-controls {
    display: flex;
    align-items: center;
    background: #fdfdfd;
    border: 1px solid var(--color-onyx);
    border-radius: 50px;
    padding: 5px 10px;
    gap: 15px;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{
    box-shadow: 0 0px 5px rgba(0,0,0,0.2) !important;
}

/* Κρύβουμε τα άσχημα προεπιλεγμένα βελάκια των browsers */
.beauty-cart-wishlist-area form.cart .quantity input.qty {
    width: 35px;
    text-align: center;
    border: none !important;
    background: transparent !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--color-coffee-bean) !important; /* Το ξεχωριστό χρώμα του αριθμού */
    padding: 0 !important;
    -moz-appearance: textfield; 
}

.beauty-cart-wishlist-area form.cart .quantity input.qty::-webkit-outer-spin-button,
.beauty-cart-wishlist-area form.cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.beauty-cart-wishlist-area form.cart .quantity input.qty:focus {
    outline: none;
}

/* Τα νέα μας κουμπιά +/- */
.qty-btn {
    background: transparent;
    border: none;
    font-size: 18px;
    color: var(--color-bright-snow);
    cursor: pointer;
    padding: 0 10px;
    transition: color 0.3s ease, transform 0.2s ease;
}

.qty-btn:hover {
    color: var(--color-almond-cream);
    transform: scale(1.05); /* Μεγαλώνουν ελαφρώς στο hover */
}

/* --- ΓΡΑΜΜΗ 2: Cart & Wishlist --- */

/* Κουτί Καρδούλας */
.beauty-wishlist-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px; /* Προσαρμόστηκε για να ταιριάζει στο ύψος του .btn-primary */
    height: 54px; 
    border-radius: 50%; /* Έγινε στρογγυλό για να ταιριάζει με το στρογγυλεμένο Cart κουμπί */
    cursor: pointer;
    background: transparent;
    box-shadow: 0 0px 5px rgba(0,0,0,0.2);
    transition: all 0.5s ease;
}

.beauty-wishlist-box:hover {
    background: var(--color-onyx);
    color: white;
}

.beauty-wishlist-box > div, 
.beauty-wishlist-box .yith-wcwl-add-to-wishlist {
    margin: 0 !important;
}

/* Φροντίζουμε η καρδούλα να πάρει το λευκό χρώμα στο hover (αν είναι εικονίδιο icon ή link) */
.beauty-wishlist-box:hover a,
.beauty-wishlist-box:hover i {
    color: white !important;
}

/* =========================================================
   FULL DESCRIPTION
   ========================================================= */
/* Τίτλος "ΠΕΡΙΓΡΑΦΗ" */
.beauty-description-title {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-onyx); /* Σκούρο χρώμα για να ταιριάζει με τα υπόλοιπα */
    margin-top: 0;
    margin-bottom: 20px; /* Κενό πριν ξεκινήσει το κείμενο */
    letter-spacing: 1px; /* Ελαφρύ άνοιγμα στα γράμματα για πιο premium look */
}   

.beauty-full-description {
    margin-top: 20px;
    padding-top: 30px;
    border-top: 1px solid #eaeaea; /* Διαχωριστική γραμμή */
    line-height: 1.8;
}

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    width: 100% !important;
}
.pswp__bg{
    opacity:0.85 !important;
}



/* ==========================================================================
   BEAUTY FIX - MY ACCOUNT (APP STYLE -> SIDEBAR)
   ========================================================================== */

/* Αφαιρούμε τα floats του default WooCommerce */
.custom-account-layout .woocommerce::after {
    content: "";
    display: table;
    clear: both;
}

/* -----------------------------------------------------------
   STATE 1: ΚΕΝΤΡΙΚΟ DASHBOARD (6 Κουτάκια στο κέντρο)
   ----------------------------------------------------------- */
.custom-account-layout.is-account-dashboard .woocommerce {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Το μενού γίνεται Grid */
.custom-account-layout.is-account-dashboard .woocommerce-MyAccount-navigation {
    float: none;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.custom-account-layout.is-account-dashboard .woocommerce-MyAccount-navigation ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Κρύβουμε το κείμενο του περιεχομένου στο αρχικό state */
.custom-account-layout.is-account-dashboard .woocommerce-MyAccount-content {
    display: none !important; 
}

/* Τα Κουτάκια */
.custom-account-layout.is-account-dashboard .woocommerce-MyAccount-navigation-link {
    background: var(--color-bright-snow);
    border-radius: 25px; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(0,0,0,0.04);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    margin: 0;
}

.custom-account-layout.is-account-dashboard .woocommerce-MyAccount-navigation-link:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}

.custom-account-layout.is-account-dashboard .woocommerce-MyAccount-navigation-link a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: var(--color-onyx);
    font-size: 1.15rem;
    font-weight: 600;
    text-align: center;
    padding: 15px;
}

/* Εικονίδια για Grid */
.custom-account-layout.is-account-dashboard .woocommerce-MyAccount-navigation-link a::before {
    font-family: 'Dashicons';
    font-size: 45px;
    margin-bottom: 15px;
    color: var(--color-coffee-bean);
    transition: color 0.4s ease;
}

.custom-account-layout.is-account-dashboard .woocommerce-MyAccount-navigation-link:hover a::before {
    color: var(--color-light-peach);
}


/* -----------------------------------------------------------
   STATE 2: ENDPOINT (Sidebar + Content)
   ----------------------------------------------------------- */
.custom-account-layout.is-account-endpoint .woocommerce {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: start;
}

.custom-account-layout.is-account-endpoint .woocommerce-MyAccount-navigation {
    float: none;
    width: 100%;
    position: sticky;
    top: 120px; /* Σταματάει κάτω από το header */
    background: var(--color-bright-snow);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 0px 10px rgba(0,0,0,0.2);
}

.custom-account-layout.is-account-endpoint .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.custom-account-layout.is-account-endpoint .woocommerce-MyAccount-navigation-link {
    margin: 0;
}

.custom-account-layout.is-account-endpoint .woocommerce-MyAccount-navigation-link a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-onyx);
    font-weight: 500;
    padding: 12px 18px;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-size: 1rem;
}

/* Εικονίδια για Sidebar */
.custom-account-layout.is-account-endpoint .woocommerce-MyAccount-navigation-link a::before {
    font-family: 'Dashicons';
    font-size: 20px;
    margin-right: 15px;
    color: var(--color-coffee-bean);
}

.custom-account-layout.is-account-endpoint .woocommerce-MyAccount-navigation-link a:hover,
.custom-account-layout.is-account-endpoint .woocommerce-MyAccount-navigation-link.is-active a {
    background: var(--color-almond-cream);
    color: var(--color-onyx);
}

.custom-account-layout.is-account-endpoint .woocommerce-MyAccount-navigation-link.is-active a::before {
    color: var(--color-onyx);
}

/* Κουτί Περιεχομένου */
.custom-account-layout.is-account-endpoint .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
    background: #fefefebd;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 0px 10px rgba(0,0,0,0.2);
}


/* -----------------------------------------------------------
   ΚΟΙΝΑ ΕΙΚΟΝΙΔΙΑ
   ----------------------------------------------------------- */
/* ==========================================================================
   ΕΙΚΟΝΙΔΙΑ ЛΟΓΑΡΙΑΣΜΟΥ (Minimal Dashicons)
   ========================================================================== */

/* 1. Πίνακας Ελέγχου -> Σπιτάκι (Home) αντί για κοντέρ */
.woocommerce-MyAccount-navigation-link--dashboard a::before { 
    content: "\f319" !important; 
} 

/* 2. Παραγγελίες -> Λίστα/Απόδειξη (List) αντί για καρότσι */
.woocommerce-MyAccount-navigation-link--orders a::before { 
    content: "\f163" !important; 
} 

/* 3. Αγαπημένα (πρώην Μεταφορτώσεις) -> Καρδούλα */
.woocommerce-MyAccount-navigation-link--downloads a::before { 
    content: "\f487" !important; 
} 

/* 4. Διευθύνσεις -> Πινέζα Τοποθεσίας (Location Pin) αντί για γρανάζι */
.woocommerce-MyAccount-navigation-link--edit-address a::before { 
    content: "\f231" !important; 
} 

/* 5. Στοιχεία Λογαριασμού -> Άνθρωπος (User Profile) */
.woocommerce-MyAccount-navigation-link--edit-account a::before { 
    content: "\f110" !important; 
} 

/* 6. Αποσύνδεση -> Βελάκι εξόδου (Arrow Right) αντί για μεγάλο Χ */
.woocommerce-MyAccount-navigation-link--customer-logout a::before { 
    content: "\f340" !important; 
}

/* ==========================================================================
   WOOCOMMERCE LOGIN (PERFECT CENTERED LAYOUT)
   ========================================================================== */

/* 1. Το Κεντρικό Wrapper (Αναγκάζουμε τα στοιχεία να μπουν το ένα ΚΑΤΩ από το άλλο) */
/* Αφαιρέσαμε το #customer_login από το column layout ώστε να λειτουργήσει το grid */
.woocommerce-account .woocommerce {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;
    width: 100% !important;
}

/* Εξασφαλίζουμε ότι το grid του login πιάνει σωστά τον χώρο */
.woocommerce-account #customer_login {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

#wholesale-login-form .btn-primary,
.woocommerce-form-register .btn-primary {
    overflow: hidden !important;
    position: relative !important;
}

/* 2. Ο Τίτλος "Σύνδεση" - ΠΑΝΩ ΠΑΝΩ ΜΕ 0 ΚΕΝΑ 
   (Περιορισμένο αυστηρά στο #customer_login για να μην χαλάει τις διευθύνσεις) */
.woocommerce-account #customer_login h2,
.woocommerce-account #customer_login .u-column1 h2,
.woocommerce-account #customer_login .u-column2 h2 {
    display: block !important;
    width: 100% !important;
    font-family: 'Roboto Slab', serif !important;
    font-size: 2.5rem !important;
    color: var(--color-onyx) !important;
    text-align: center !important;
    margin: 0 0 40px 0 !important; 
    padding-top: 0 !important; 
}

/* 3. Η Κάρτα της Φόρμας */
.woocommerce form.login, 
.woocommerce form.register {
    border: none;
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important; /* Κεντράρισμα */
    padding: 0 !important; /* Κεντράρισμα */
}



/* 4. Υποχρεωτικό Stacking για τα πεδία (Labels πάνω από Inputs) */
.woocommerce form.login .form-row,
.woocommerce form.register .form-row {
    display: block !important;
    width: 100% !important;
    float: none !important;
}

.woocommerce form.login label,
.woocommerce form.register label {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: var(--color-onyx) !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
}

/* Κρύβουμε το αστεράκι ή του δίνουμε κόκκινο χρώμα */
.woocommerce form .required {
    color: #d9534f !important;
    text-decoration: none !important;
}

/* 5. Τα Κουτάκια (Inputs) */
.woocommerce form.login input.input-text,
.woocommerce form.register input.input-text {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    color: var(--color-onyx) !important;
    box-shadow: none !important;
}

/* Focus effect στα Inputs */
.woocommerce form.login input.input-text:focus {
    border-color: var(--color-coffee-bean) !important;
    box-shadow: 0 0 0 2px rgba(125, 95, 77, 0.1) !important;
    outline: none !important;
}

/* 6. Fix για το Checkbox "Να με θυμάσαι" */
.woocommerce form.login .woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    font-weight: normal !important;
    color: var(--color-shadow-grey) !important;
    width: 100% !important;
    text-align: left !important;
}

.woocommerce form.login .woocommerce-form-login__rememberme input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    display: inline-block !important;
    accent-color: var(--color-onyx) !important;
}

/* 7. Το Μαύρο Κουμπί Σύνδεσης */
.woocommerce form.login .button {
    display: block !important;
    width: 100% !important;
    padding: 15px 35px !important;
    background-color: var(--color-onyx) !important;
    color: var(--color-bright-snow) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    border-radius: 500px !important;
    cursor: pointer !important;
    margin-top: 10px !important;
    transition: all 0.4s ease !important;
}

.woocommerce form.login .button:hover {
    background-color: var(--color-coffee-bean) !important;
}

/* 8. Χάσατε τον κωδικό σας; */
.woocommerce form.login .lost_password {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin-top: 20px !important;
    margin-bottom: 0 !important;
}

.woocommerce form.login .lost_password a {
    color: var(--color-shadow-grey) !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
}

.woocommerce form.login .lost_password a:hover {
    color: var(--color-coffee-bean) !important;
    text-decoration: underline !important;
}


/* 1. Αναγκάζουμε τα labels να γίνουν λευκά (αγνοώντας το παλιό !important) */
.wholesale-register-box label {
    color: white !important;
}

/* 2. Κάνουμε λευκό το κείμενο που πληκτρολογεί ο χρήστης στα κουτάκια */
.wholesale-register-box input.input-text {
    color: white !important;
}

/* 3. Φτιάχνουμε το κείμενο της Πολιτικής Απορρήτου (ώστε να μη χάνεται στο μαύρο φόντο) */
.wholesale-register-box .woocommerce-privacy-policy-text {
    color: #d1d1d1 !important; 
}

/* 4. Το link της Πολιτικής Απορρήτου: Almond-Cream και ΧΩΡΙΣ υπογράμμιση */
.wholesale-register-box .woocommerce-privacy-policy-text a {
    color: var(--color-almond-cream) !important;
    text-decoration: none !important;
}

/* Προαιρετικά: Μια ελαφριά υπογράμμιση στο hover για να καταλαβαίνει ότι είναι link */
.wholesale-register-box .woocommerce-privacy-policy-text a:hover {
    text-decoration: underline !important;
}

/* ==========================================================================
   WOOCOMMERCE LOST PASSWORD (Επαναφορά Κωδικού)
   ========================================================================== */

/* 1. Η Κάρτα της Φόρμας (Ίδια με του Login) */
.woocommerce form.lost_reset_password {
    width: 100% !important;
    max-width: 450px !important;
    background: var(--color-bright-snow) !important;
    padding: 40px !important;
    border-radius: 20px !important;
    box-shadow: 0 0px 10px rgba(0,0,0,0.2) !important;
    border: 1px solid rgba(0,0,0,0.03) !important;
    margin: 0 auto 40px !important; /* Κεντράρει τη φόρμα */
}

/* 2. Το επεξηγηματικό κείμενο (Χάσατε τον κωδικό σας; Παρακαλούμε...) */
.woocommerce form.lost_reset_password > p:first-child {
    color: var(--color-shadow-grey) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
    text-align: center !important;
}

/* 3. Stacking: Να μπει το label πάνω από το input */
.woocommerce form.lost_reset_password .woocommerce-form-row {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin-bottom: 20px !important;
}

.woocommerce form.lost_reset_password label {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: var(--color-onyx) !important;
    font-size: 0.95rem !important;
}

/* 4. Το πεδίο Email (Input) */
.woocommerce form.lost_reset_password input.input-text {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    color: var(--color-onyx) !important;
    box-shadow: none !important;
}

.woocommerce form.lost_reset_password input.input-text:focus {
    border-color: var(--color-coffee-bean) !important;
    box-shadow: 0 0 0 2px rgba(125, 95, 77, 0.1) !important;
    outline: none !important;
}

/* 5. Το Κουμπί (Επαναφορά συνθηματικού) */
.woocommerce form.lost_reset_password .button {
    display: block !important;
    width: 100% !important;
    padding: 15px 35px !important;
    background-color: var(--color-onyx) !important;
    color: var(--color-bright-snow) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    border-radius: 500px !important;
    cursor: pointer !important;
    margin-top: 10px !important;
    transition: all 0.4s ease !important;
}

.woocommerce form.lost_reset_password .button:hover {
    background-color: var(--color-coffee-bean) !important;
}

/* ==========================================================================
   ΕΠΩΝΥΜΙΑ ΕΤΑΙΡΕΙΑΣ - FULL WIDTH (Απόλυτη επιβολή)
   ========================================================================== */
.woocommerce-address-fields .woocommerce-address-fields__field-wrapper > p[id*="company"],
.woocommerce-address-fields .woocommerce-address-fields__field-wrapper > div[id*="company"],
#billing_company_field, 
#shipping_company_field {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Πλήκτρο Αποθήκευσης στο Editor του My Account */
.woocommerce-address-fields button[type="submit"],
.woocommerce-EditAccountForm button[type="submit"] {
    background: var(--color-onyx, #111) !important;
    color: white !important;
    border-radius: 500px !important; /* Κάψουλα */
    padding: 10px 25px !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    border: none !important;
    transition: opacity 0.3s ease !important;
    cursor: pointer;
}

.woocommerce-address-fields button[type="submit"]:hover,
.woocommerce-EditAccountForm button[type="submit"]:hover {
    opacity: 0.8 !important;
}

/* ==========================================================================
   ΔΙΟΡΘΩΣΗ LAYOUT: ΛΟΓΑΡΙΑΣΜΟΣ (Απόλυτο Grid)
   ========================================================================== */
.custom-account-layout.is-account-endpoint .woocommerce {
    display: grid !important;
    grid-template-columns: 300px 1fr !important;
    gap: 40px !important;
    align-items: start !important;
}

/* 1. Αναγκάζουμε τα μηνύματα/ειδοποιήσεις να πιάνουν ΚΑΙ ΤΙΣ 2 ΣΤΗΛΕΣ (πάνω πάνω) */
.custom-account-layout.is-account-endpoint .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

/* 2. Καρφιτσώνουμε το Μενού αυστηρά στην 1η στήλη (Αριστερά) */
.custom-account-layout.is-account-endpoint .woocommerce-MyAccount-navigation {
    grid-column: 1 / 2 !important;
}

/* 3. Καρφιτσώνουμε το Περιεχόμενο (Παραγγελίες κτλ) αυστηρά στη 2η στήλη (Δεξιά) */
.custom-account-layout.is-account-endpoint .woocommerce-MyAccount-content {
    grid-column: 2 / 3 !important;
    width: 100% !important;
    max-width: none !important;
}

/* ==========================================================================
   WOOCOMMERCE EDIT ACCOUNT (Στοιχεία Λογαριασμού)
   ========================================================================== */

/* Ακυρώνουμε τα floats του WooCommerce */
.woocommerce-EditAccountForm .clear {
    display: none !important;
}

/* Γραμμές φόρμας */
.woocommerce-EditAccountForm .form-row {
    float: none !important;
    width: 100% !important;
    margin-bottom: 25px !important;
    display: block !important;
}

/* Όνομα & Επώνυμο δίπλα-δίπλα σε μεγάλες οθόνες */
@media (min-width: 768px) {
    .woocommerce-EditAccountForm .form-row-first {
        float: left !important;
        width: 48% !important;
        clear: both !important;
    }
    .woocommerce-EditAccountForm .form-row-last {
        float: right !important;
        width: 48% !important;
    }
}

/* Labels: Πάνω από τα κουτάκια και Έντονα */
.woocommerce-EditAccountForm label {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    font-weight: 600 !important;
    color: var(--color-onyx) !important;
    margin-bottom: 8px !important;
    font-size: 0.95rem !important;
}

/* Inputs: Μεγάλα, καθαρά, με border-radius */
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="password"] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background: transparent !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    color: var(--color-onyx) !important;
    transition: all 0.3s ease;
    box-shadow: none !important;
}

/* Focus στα Inputs */
.woocommerce-EditAccountForm input:focus {
    border-color: var(--color-coffee-bean) !important;
    box-shadow: 0 0 0 2px rgba(125, 95, 77, 0.1) !important;
    outline: none !important;
}

/* Επεξηγηματικό Κείμενο ("Έτσι θα εμφανίζεται το όνομά σας...") */
.woocommerce-EditAccountForm span.description,
.woocommerce-EditAccountForm em {
    display: block !important;
    font-size: 0.85rem !important;
    color: var(--color-shadow-grey) !important;
    margin-top: 8px !important;
    font-style: normal !important;
    opacity: 0.8;
}

/* -----------------------------------------------------------
   ΕΝΟΤΗΤΑ: ΑΛΛΑΓΗ ΚΩΔΙΚΟΥ (Fieldset)
   ----------------------------------------------------------- */
.woocommerce-EditAccountForm fieldset {
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    padding: 30px !important;
    margin-top: 40px !important;
    margin-bottom: 30px !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

/* Ο Τίτλος "Αλλαγή Κωδικού" */
.woocommerce-EditAccountForm fieldset legend {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: var(--color-onyx) !important;
    padding: 0 15px !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    width: auto !important;
}

/* -----------------------------------------------------------
   ΚΟΥΜΠΙ: Αποθήκευση Αλλαγών
   ----------------------------------------------------------- */
.woocommerce-EditAccountForm button[name="save_account_details"] {
    display: inline-block !important;
    padding: 15px 40px !important;
    background-color: var(--color-onyx) !important;
    color: var(--color-bright-snow) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    border-radius: 500px !important;
    cursor: pointer !important;
    transition: all 0.4s ease !important;
}

.woocommerce-EditAccountForm button[name="save_account_details"]:hover {
    background-color: var(--color-coffee-bean) !important;
    transform: translateY(-2px);
    box-shadow: 0 0px 10px rgba(0,0,0,0.1);
}

/* ==========================================================================
   WOOCOMMERCE ΔΙΕΥΘΥΝΣΕΙΣ (PERFECT CENTERED CARDS)
   ========================================================================== */

/* 1. Το Grid (Δίπλα-δίπλα, ομοιόμορφο) */
.woocommerce-Addresses.col2-set {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
    margin: 0 !important;
}

.woocommerce-Addresses.col2-set::before,
.woocommerce-Addresses.col2-set::after { 
    display: none !important; 
}

.woocommerce-Addresses.col2-set .u-column1,
.woocommerce-Addresses.col2-set .u-column2 {
    float: none !important; 
    width: 100% !important; 
    margin: 0 !important; 
    padding: 0 !important;
}

/* 2. Η Κάρτα (ΟΛΑ ΚΕΝΤΡΑΡΙΣΜΕΝΑ) */
.woocommerce-Addresses .woocommerce-Address {
    background: #fff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    padding: 40px 30px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03) !important;
    height: 100% !important;
    box-sizing: border-box !important;
    
    /* Flexbox για τέλειο κεντράρισμα */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    text-align: center !important;
}

/* 3. Header Κάρτας (Τίτλος & Κουμπί στο κέντρο) */
.woocommerce-Address-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    border-bottom: 1px solid #eaeaea !important;
    padding-bottom: 25px !important;
    margin-bottom: 25px !important;
}

/* 4. Ο Τίτλος (Ακριβώς ίδιο μέγεθος και για τα δύο) */
.woocommerce-Address-title h3 {
    font-size: 20px !important; 
    font-family: inherit !important;
    color: #111 !important;
    margin: 0 0 15px 0 !important;
    text-align: center !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    width: 100% !important;
    text-transform: none !important;
}

/* 5. Το Κουμπί (Κεντραρισμένο, όμορφο οβάλ σχήμα) */
.woocommerce-Address-title a.edit {
    display: inline-block !important;
    font-size: 11px !important;
    padding: 8px 20px !important;
    background-color: #111 !important;
    color: #fff !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    margin: 0 auto !important; /* Εξασφαλίζει το κεντράρισμα */
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
}

.woocommerce-Address-title a.edit:hover {
    background-color: var(--color-coffee-bean, #7D5F4D) !important;
    transform: translateY(-2px);
}

/* 6. Η Διεύθυνση (Κείμενο στο κέντρο) */
.woocommerce-Address address {
    font-style: normal !important; 
    line-height: 1.8 !important;
    color: #666 !important;
    font-size: 15px !important;
    text-align: left !important;
    width: 100% !important;
    padding: 15px;
}



/* ==========================================================================
   WOOCOMMERCE ΕΠΕΞΕΡΓΑΣΙΑ ΔΙΕΥΘΥΝΣΕΩΝ (Billing & Shipping)
   ========================================================================== */

/* 1. Το κεντρικό wrapper της φόρμας (Κάρτα) */
.woocommerce-address-fields {
    padding: 40px !important;
    max-width: 800px !important; /* Μαζεύουμε το πλάτος για να μην απλώνει άχαρα */
    margin: 0 auto !important;
}

/* Ο Τίτλος της φόρμας */
.woocommerce-address-fields h3 {
    font-size: 1.8rem !important;
    color: var(--color-onyx) !important;
    margin-bottom: 30px !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-family: 'Roboto Slab', serif !important;
}

/* 2. Διάταξη των πεδίων (Grid) */
.woocommerce-address-fields .woocommerce-address-fields__field-wrapper {
    display: grid !important;
    gap: 20px !important;
}


.woocommerce form .form-row .input-text, .woocommerce form .form-row select {
        min-width: 280px !important;
}

.woocommerce-address-fields .select2-container .select2-selection--single .select2-selection__rendered {
        min-width: 280px !important;
}

.woocommerce-address-fields input.input-text, .woocommerce-address-fields select, .woocommerce-address-fields textarea, .select2-container .select2-selection--single {
        max-width: 280px !important;
    
}

/* Διόρθωση: Η Επωνυμία Εταιρείας να πιάνει όλο το πλάτος για να μην αφήνει κενό */
.woocommerce-address-fields #billing_company_field,
.woocommerce-address-fields #shipping_company_field {
    grid-column: 1 / -1 !important;
}

/* Όσα πεδία πρέπει να πιάνουν όλο το πλάτος (π.χ. Οδός, Χώρα) */
.woocommerce-address-fields .form-row-wide {
    grid-column: 1 / -1 !important;
}

/* Εξουδετέρωση των παλιών floats του WooCommerce */
.woocommerce-address-fields .form-row {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Labels (Οι τίτλοι πάνω από τα πεδία) */
.woocommerce-address-fields label {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    font-weight: 600 !important;
    color: var(--color-onyx) !important;
    margin-bottom: 8px !important;
    font-size: 0.95rem !important;
}

/* Το αστεράκι των υποχρεωτικών πεδίων */
.woocommerce-address-fields .required {
    color: #d9534f !important;
    text-decoration: none !important;
}

/* 4. Κουτάκια (Inputs, Selects & Textareas) */
.woocommerce-address-fields input.input-text,
.woocommerce-address-fields select,
.woocommerce-address-fields textarea,
.select2-container .select2-selection--single {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    color: var(--color-onyx) !important;
    box-shadow: none !important;
    height: auto !important; /* Σημαντικό για το dropdown των χωρών */
}

/* Διορθώσεις για το Select2 (Τα ειδικά dropdowns του Woo για χώρες/νομούς) */
.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    line-height: normal !important;
    color: var(--color-onyx) !important;
}
.select2-container .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 10px !important;
}

/* Focus state στα πεδία */
.woocommerce-address-fields input.input-text:focus,
.woocommerce-address-fields select:focus,
.woocommerce-address-fields textarea:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--color-coffee-bean) !important;
    box-shadow: 0 0 0 2px rgba(125, 95, 77, 0.1) !important;
    outline: none !important;
}

/* Προσαρμογή ύψους αν υπάρχει πεδίο για σημειώσεις */
.woocommerce-address-fields textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Κρυφό πεδίο (Clearfix του WooCommerce που δημιουργεί κενά) */
.woocommerce-address-fields .clear {
    display: none !important;
}

/* 5. Το Κουμπί Αποθήκευσης */
.woocommerce-EditAddressForm .button {
    display: block !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 30px auto 0 !important; /* Κεντράρισμα */
    padding: 15px 35px !important;
    background-color: var(--color-onyx) !important;
    color: var(--color-bright-snow) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    border-radius: 500px !important;
    cursor: pointer !important;
    transition: all 0.4s ease !important;
}

.woocommerce-EditAddressForm .button:hover {
    background-color: var(--color-coffee-bean) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
}

/* 6. Responsive (Για Κινητά - 1 Στήλη) */
@media (max-width: 768px) {
    .woocommerce-address-fields .woocommerce-address-fields__field-wrapper {
        grid-template-columns: 1fr !important;
    }
    .woocommerce-address-fields {
        padding: 25px 20px !important;
    }
}
































.woocommerce-password-strength{
    display:none;
}


.woocommerce form .show-password-input::before, 
.woocommerce-page form .show-password-input::before {
    background-image: none !important; 
    content: "\e224" !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 20px; 
    line-height: 1;
    font-family: 'Phosphor-Light' !important; /* Λύνει το πρόβλημα με το τετραγωνάκι */
}

.woocommerce form .show-password-input.display-password::before, 
.woocommerce-page form .show-password-input.display-password::before {
    content: "\e220" !important;
}

#wholesale-login-form .login-username, 
    #wholesale-login-form .login-password {
        margin-bottom: 20px;
    }
    #wholesale-login-form label {
        display: block;
        margin-bottom: 5px;
        font-weight: 600;
        color: var(--color-onyx);
    }
    #wholesale-login-form input[type="text"],
    #wholesale-login-form input[type="password"] {
        width: 100%;
        padding: 12px;
        border: 1px solid #848484;
        border-radius: 6px;
        background: transparent;
    }
    #wholesale-login-form .login-remember {
        font-size: 0.9rem;
        color: var(--color-shadow-grey);
    }
    #wholesale-login-form .login-submit input[type="submit"] {
        width: 100%;
        padding: 15px 35px;
        background-color: var(--color-onyx);
        color: var(--color-bright-snow);
        font-weight: 600;
        text-transform: uppercase;
        border: none;
        border-radius: 500px;
        cursor: pointer;
        transition: all 0.4s ease;
    }
    #wholesale-login-form .login-submit input[type="submit"]:hover {
        background-color: var(--color-coffee-bean);
    }
    .wholesale-grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-bottom: 15px;
    }
    .wholesale-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-bottom: 15px;
    }
    .wholesale-grid-1 {
        margin-bottom: 15px;
    }
    .form-row {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
    }
    .form-row > div {
        flex: 1;
    }