/* ============================================
   AGROPAZARI – Complete Stylesheet v3
   ============================================ */

:root {
    --green: #5C8A2D;
    --green-light: #7FB034;
    --green-dark: #1e3a10;
    --green-deeper: #152b0b;
    --green-xlight: #edf4e0;
    --gold: #C8973A;
    --gold-light: #e0b55a;
    /* Τερακότα - το τρίτο χρώμα. Στο σκούρο θέμα είναι ανοιχτότερη
       (βλ. [data-theme="dark"]). Εδώ σκουραίνει ώστε το λευκό γράμμα
       πάνω της να δίνει 5.15:1, πάνω από το όριο AA. */
    --clay: #a85732;
    --clay-soft: #c2724a;
    --text: #1a1a1a;
    --text-mid: #555;
    --text-light: #888;
    --bg: #f8f6f1;
    --bg-white: #ffffff;
    --border: #e4e0d8;
    --shadow-sm: 0 2px 12px rgba(0,0,0,0.07);
    --shadow-md: 0 6px 28px rgba(0,0,0,0.11);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.14);
    --radius: 14px;
    --radius-sm: 8px;
    --header-h: 76px;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', sans-serif;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition: all 0.3s var(--ease);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Επιλογή κειμένου ----------
   Το χρώμα της επιλογής μένει το ΠΡΟΕΠΙΛΕΓΜΕΝΟ του browser (γαλάζιο) -
   κατόπιν εντολής. Είναι αυτό που περιμένει ο καθένας από κάθε σελίδα. */

/* Ό,τι είναι ΧΕΙΡΙΣΤΗΡΙΟ και όχι κείμενο δεν επιλέγεται: το διπλό κλικ
   σε κουμπί, ετικέτα ή κάρτα κατηγορίας δεν έχει νόημα να «βάφει»
   μπλοκ χρώματος - ο χρήστης πάει να πατήσει, όχι να αντιγράψει. */
button, .btn-primary, .btn-outline, .btn-ghost,
.nav-links a, .logo, .logo-text, .card-tag, .badge,
.how-tab, .cat-card, .filter-select, .pr-tab, .dash-nav-btn,
.card-add-btn, .section-tag, .meet-chip, .coop-badge {
    -webkit-user-select: none;
    user-select: none;
}

html {
    scroll-behavior: smooth;
    /* Οι άγκυρες σταματούν ΚΑΤΩ από την κολλημένη κεφαλίδα, όχι από πίσω της */
    scroll-padding-top: 90px;
}
/* Η μεγάλη εικόνα του hero στέλνεται στην κάρτα γραφικών: χωρίς αυτό, ο
   browser την ξαναζωγραφίζει σε κάθε καρέ κύλισης και το scroll «κολλάει». */
.hero-img, .hero-overlay { transform: translateZ(0); backface-visibility: hidden; }
/* Σεβασμός στη ρύθμιση «λιγότερη κίνηση» του λειτουργικού */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
}
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    overflow-x: hidden;
}

/* ============================================
   HEADER
   ============================================ */
#main-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 900;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    height: var(--header-h);
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

#main-header.scrolled .nav-container {
    background: rgba(255,255,255,0.97);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

/* Logo */
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-icon {
    width: 38px; height: 38px;
    background: var(--green);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 17px; flex-shrink: 0;
    transition: var(--transition);
}
.logo:hover .logo-icon { background: var(--green-light); transform: rotate(-5deg); }

/* ---------- Λογότυπο μάρκας (assets/photos/AGROPAZARI-LOGO.png) ----------
   Το σήμα έχει ΔΙΑΦΑΝΟ φόντο και στέκεται μόνο του, χωρίς πλακίδιο -
   γι' αυτό εδώ μηδενίζονται background και border-radius.
   (Το αρχείο είχε ψημένο σκούρο πετρόλ τετράγωνο· έγινε διαφανές στις
   09/09/2026. Το πρωτότυπο μένει ως AGROPAZARI-LOGO-original.png.)
   Εφαρμόζεται ΜΟΝΟ στο λογότυπο (.logo / .side-brand): τα εικονίδια στις
   κεφαλίδες των modal (κλειδί, κουτί, κλειδαριά) μένουν ως έχουν. */
.logo .logo-icon,
.side-brand .logo-icon {
    background: none;          /* το σήμα στέκεται μόνο του, χωρίς πλακίδιο */
    border-radius: 0;
    padding: 0;
    width: 42px; height: 42px;
}
.logo .logo-icon img,
.side-brand .logo-icon img {
    width: 100%; height: 100%;
    display: block;
    object-fit: contain;
}
.logo:hover .logo-icon,
.side-brand:hover .logo-icon { background: none; }

.footer-logo .logo-icon { width: 46px; height: 46px; }
.logo-text {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 700;
    color: #fff; letter-spacing: -0.3px;
    transition: var(--transition);
}
.logo-text em { color: var(--green-light); font-style: normal; }
#main-header.scrolled .logo-text { color: var(--text); }

/* Nav links */
.nav-links { display: flex; list-style: none; gap: 36px; }
.nav-links a {
    text-decoration: none; font-size: 15px; font-weight: 500;
    color: rgba(255,255,255,0.88); transition: var(--transition);
    position: relative; padding-bottom: 2px;
    /* Ένας σύνδεσμος μενού ΔΕΝ σπάει σε δύο σειρές. Χωρίς αυτό, το
       «Πώς Λειτουργεί» γινόταν «Πώς» / «Λειτουργεί» σε στενές οθόνες
       και η κεφαλίδα διπλασίαζε ύψος. */
    white-space: nowrap;
}
.nav-links a::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 2px; background: var(--green-light);
    transition: width 0.3s ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-links a:hover { color: #fff; }
#main-header.scrolled .nav-links a { color: var(--text-mid); }
#main-header.scrolled .nav-links a:hover { color: var(--green); }

/* Nav actions */
.nav-actions { display: flex; align-items: center; gap: 10px; }

.nav-icon-btn {
    background: none; border: none; cursor: pointer;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.9); font-size: 16px;
    transition: var(--transition); position: relative;
}
.nav-icon-btn:hover { background: rgba(255,255,255,0.15); }
#main-header.scrolled .nav-icon-btn { color: var(--text-mid); }
#main-header.scrolled .nav-icon-btn:hover { background: var(--green-xlight); color: var(--green); }

.cart-badge {
    position: absolute; top: 2px; right: 2px;
    background: var(--gold); color: #fff;
    font-size: 10px; font-weight: 700;
    width: 16px; height: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s ease;
}

/* ---------- Το «περιγραμμένο» κουμπί ----------
   Ήταν ΛΕΥΚΟ από προεπιλογή, φτιαγμένο για το διάφανο header πάνω από
   τη φωτογραφία του hero. Παντού αλλού όμως - κάρτες παραγωγών,
   προφίλ, παράθυρα, φόρμες - το φόντο είναι ανοιχτό, οπότε το κουμπί
   γινόταν λευκό πάνω σε κρεμ, δηλαδή αόρατο («Αποστολή Μηνύματος»).
   Αντιστράφηκε: προεπιλογή το πράσινο, που είναι και η συντριπτική
   πλειοψηφία των χρήσεων· λευκό μένει ΜΟΝΟ μέσα στα σκούρα header.

   Το inline-flex με gap είναι το ίδιο που έχει και το .btn-primary:
   χωρίς αυτό, όποιο κουμπί έπαιρνε display:flex από τη JS (π.χ. το
   «Αφαίρεση» της φωτογραφίας) έχανε το κενό ανάμεσα σε εικονίδιο και
   κείμενο - ο κάδος κολλούσε πάνω στη λέξη. */
.btn-outline {
    padding: 8px 20px;
    border: 1.5px solid var(--green);
    border-radius: 50px; background: transparent;
    color: var(--green);
    font-family: var(--font-body); font-size: 14px; font-weight: 500;
    cursor: pointer; transition: var(--transition);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-outline:hover { background: var(--green-xlight); }

/* Λευκή εκδοχή: ΜΟΝΟ μέσα στη σκούρα μπάρα πλοήγησης.
   Σκόπιμα στοχεύει το .nav-container και όχι ολόκληρο το header - το
   αναδυόμενο μενού του κινητού είναι αδελφός του, με ανοιχτό φόντο,
   και θα εξαφανιζόταν κι αυτό. */
#main-header:not(.scrolled) .nav-container .btn-outline,
.page-header .nav-container .btn-outline {
    border-color: rgba(255,255,255,0.7); color: rgba(255,255,255,0.95);
}
#main-header:not(.scrolled) .nav-container .btn-outline:hover,
.page-header .nav-container .btn-outline:hover { background: rgba(255,255,255,0.15); }

.btn-primary {
    padding: 9px 22px;
    background: var(--green); border: none; border-radius: 50px;
    color: #fff; font-family: var(--font-body);
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: var(--transition);
    display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary:hover { background: var(--green-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(92,138,45,0.35); }
/* ---------- Κουμπί ανεβάσματος: ξεθωριασμένο -> έντονο ----------
   Χωρίς επιλεγμένο αρχείο μένει θαμπό ώστε να μη «καλεί» σε πάτημα·
   μόλις ο χρήστης διαλέξει φωτογραφία ανάβει με ζωηρό πράσινο. */
.upload-btn:not(.btn-ready) {
    background: #9db98a;
    box-shadow: none;
}
.upload-btn:not(.btn-ready):hover {
    background: #8fae7a;
    transform: none;
    box-shadow: none;
}
.upload-btn.btn-ready {
    background: var(--green-light);
    box-shadow: 0 4px 16px rgba(127,176,52,0.45);
}
.upload-btn.btn-ready:hover { background: var(--green); }
[data-theme="dark"] .upload-btn:not(.btn-ready) { background: #4a5c3e; }

.btn-primary.large { padding: 14px 30px; font-size: 16px; }
.btn-primary.full-width { width: 100%; justify-content: center; padding: 14px; font-size: 15px; }

/* Hamburger */
.hamburger {
    display: none; flex-direction: column;
    justify-content: center; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 4px;
    z-index: 901;
}
.hamburger span {
    display: block; width: 24px; height: 2px;
    background: #fff; border-radius: 2px; transition: var(--transition);
}
#main-header.scrolled .hamburger span { background: var(--text); }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Menu — κάθετη στήλη που ανοίγει από τα ΔΕΞΙΑ */
.mobile-menu {
    position: fixed;
    top: var(--header-h); right: 0; bottom: 0; left: auto;
    width: min(82vw, 300px);
    z-index: 899;
    background: var(--bg-white);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    flex-direction: column;
    padding: 20px 24px 28px;
    overflow-y: auto;
    transform: translateX(105%);
    transition: transform 0.35s var(--ease);
    display: flex;
}
.mobile-menu.open {
    transform: translateX(0);
}
.mobile-menu a {
    text-decoration: none; font-size: 16px; font-weight: 500;
    color: var(--text); padding: 13px 0;
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
}
/* Ίδιος λόγος με το υποσέλιδο: μετακίνηση χωρίς αλλαγή διάταξης. */
.mobile-menu a:hover { color: var(--green); transform: translateX(6px); }
.mobile-menu-actions {
    display: flex; gap: 10px; margin-top: 18px;
}
.mobile-menu-actions .btn-outline { flex: 1; border-color: var(--green); color: var(--green); }
.mobile-menu-actions .btn-primary { flex: 1; justify-content: center; }

/* ============================================
   HERO
   ============================================ */
.hero {
    position: relative; height: 100vh; min-height: 680px;
    display: flex; align-items: center; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
/* Η φωτογραφία είναι 3:2 (2400x1600) και το hero 16:9, άρα κόβεται κατακόρυφα.
   Κρατάμε την ΚΟΡΥΦΗ, ώστε το κάδρο να βγαίνει όπως στη φωτογραφία-αναφορά:
   ουρανός πάνω, ορίζοντας στο ~59%, πράσινος αγρός από κάτω. */
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* ΚΑΜΙΑ σκίαση πάνω στη φωτογραφία. Μένει ΜΟΝΟ μια λεπτή σκούρα λωρίδα
   στην κορυφή, και αυτή όχι για τη φωτογραφία αλλά για το ΜΕΝΟΥ: το
   #main-header δεν έχει δικό του φόντο όσο η σελίδα είναι στην κορυφή,
   οπότε χωρίς αυτή τα λευκά γράμματα της πλοήγησης θα χάνονταν.
   Σβήνει τελείως μέσα στο πρώτο 15% του ύψους.
   Την αναγνωσιμότητα του τίτλου τη σηκώνει πλέον η άλως των γραμμάτων
   (δες .hero-title παρακάτω), που δεν αγγίζει καθόλου τη φωτογραφία. */
.hero-overlay {
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(to bottom,
        rgba(8,18,10,0.54) 0%, rgba(8,18,10,0.20) 9%, rgba(8,18,10,0) 15%);
}
/* Μικρή σκιά στα γράμματα: κρατά τον τίτλο ευκρινή ακόμα κι όταν ο ήλιος
   πέσει σε φωτεινό σημείο μετά από αλλαγή φωτογραφίας. */
/* ΧΩΡΙΣ σκιά στα γράμματα - κατόπιν εντολής. Η γραμματοσειρά δεν άλλαξε
   ποτέ (είναι πάντα η Playfair Display)· αυτό που άλλαζε την όψη των
   γραμμάτων ήταν η σφιχτή σκούρα άλως, η οποία αφαιρέθηκε. */
/* Πέρασμα προς την υπόλοιπη σελίδα.
   ΜΟΝΟ στο σκούρο θέμα: εκεί το σβήσιμο είναι σκούρο και δένει.
   Στο λευκό θέμα δημιουργούσε άσπρη θαμπάδα κάτω από τη φωτογραφία,
   οπότε η φωτογραφία τελειώνει καθαρά. */
[data-theme="dark"] .hero::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 150px; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(21,43,11,0) 0%, rgba(21,43,11,0.55) 58%, var(--bg) 100%);
}
.hero-content {
    position: relative; z-index: 2;   /* πάνω από το κάτω ντεγκραντέ */
    padding: 0 80px; max-width: 860px;
    animation: heroFadeIn 1s ease forwards;
}
@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(38px, 6vw, 72px); font-weight: 900;
    color: #fff; line-height: 1.1; margin-bottom: 100px;
    letter-spacing: -1px;
}
.hero-title span { color: var(--green-light); }
.hero-sub {
    /* Ήταν 0.83: χωρίς πέπλο από κάτω, το ημιδιάφανο λευκό «έλιωνε» πάνω
       στον φωτεινό ουρανό. Πλήρες λευκό + άλως γραμμάτων. */
    font-size: 18px; color: #fff;
    max-width: 520px; margin-bottom: 60px; line-height: 1.7;
}

/* Hero search */
.hero-search-box { margin-bottom: 46px; }
.search-inner {
    display: flex; align-items: center;
    background: #fff; border-radius: 12px;
    padding: 6px 6px 6px 18px;
    max-width: 540px;
    box-shadow: 0 8px 36px rgba(0,0,0,0.25); gap: 10px;
}
.search-icon-input { color: var(--text-light); font-size: 15px; flex-shrink: 0; }
.search-inner input {
    flex: 1; border: none; outline: none;
    font-family: var(--font-body); font-size: 15px;
    color: var(--text); background: transparent;
}
.explore-btn {
    padding: 12px 26px; background: var(--green);
    color: #fff; border: none; border-radius: 8px;
    font-family: var(--font-body); font-size: 15px;
    font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: var(--transition); flex-shrink: 0;
}
.explore-btn:hover { background: var(--green-dark); }

/* Hero stats */
.hero-stats { display: flex; align-items: center; gap: 28px; }
.stat { display: flex; flex-direction: column; }
.stat-num {
    font-family: var(--font-display); font-size: 26px;
    font-weight: 700; color: #fff; line-height: 1;
}
.stat-label { font-size: 12px; color: rgba(255,255,255,0.92); margin-top: 3px; }
.stat-divider { width: 1px; height: 38px; background: rgba(255,255,255,0.25); }

.hero-scroll-hint {
    position: absolute; bottom: 32px; left: 50%;
    transform: translateX(-50%); z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: rgba(255,255,255,0.55); font-size: 10px;
    letter-spacing: 2px; text-transform: uppercase;
    animation: bounce 2.2s infinite;
}
@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(8px); }
}

/* ============================================
   SECTION COMMONS
   ============================================ */
.section-header { text-align: center; margin-bottom: 52px; }
.section-tag {
    display: inline-block; background: var(--green-xlight);
    color: var(--green); font-size: 11px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    padding: 5px 14px; border-radius: 50px; margin-bottom: 14px;
}
.section-tag.light { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }
.section-header h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 46px); font-weight: 700;
    letter-spacing: -0.5px; color: var(--text); line-height: 1.15;
}

/* ============================================
   CATEGORIES
   ============================================ */
/* Οι κατηγορίες πάνω σε φωτογραφία ελαιώνα. Το πέπλο κρατά τις κάρτες
   ευανάγνωστες: σχεδόν αδιαφανές στο κέντρο, πιο ανοιχτό στις άκρες. */
.categories-section {
    padding: 90px 60px; background: var(--bg-white);
    position: relative; overflow: hidden; isolation: isolate;
}
.categories-section::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background-image: url('../photos/categories.jpg');
    background-size: cover; background-position: center center;
    background-repeat: no-repeat;
    transform: translateZ(0);
}
/* Λευκό θέμα: αρκετά ανοιχτό πέπλο ώστε να ΦΑΙΝΕΤΑΙ η ελιά.
   Μετρημένο στα σκοτεινότερα σημεία της φωτογραφίας (κορμός), όπου το
   σκούρο κείμενο έχει τη χειρότερη αντίθεση: 5.7 - πάνω από το όριο 4.5. */
/* Το κάτω άκρο σβήνει στο ΚΡΕΜ της επόμενης ενότητας (--bg), όχι στο λευκό,
   αλλιώς φαίνεται γραμμή εκεί που αλλάζουν οι δύο αποχρώσεις. */
.categories-section::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.55) 26%,
        rgba(255,255,255,0.55) 58%, rgba(248,246,241,0.88) 84%, var(--bg) 100%);
}
[data-theme="dark"] .categories-section::after {
    background: linear-gradient(180deg,
        rgba(21,43,11,0.90) 0%, rgba(21,43,11,0.80) 40%,
        rgba(21,43,11,0.88) 80%, var(--bg) 100%);
}
/* Οι κάρτες γίνονται ελαφρώς αδιαφανείς ώστε να ξεχωρίζουν από τη φωτογραφία */
.categories-section .cat-card { background: rgba(248,246,241,0.92); }
[data-theme="dark"] .categories-section .cat-card { background: rgba(23,48,14,0.92); }
.categories-grid {
    /* Αυτόματη προσαρμογή: όσες κατηγορίες κι αν προστεθούν, χωράνε σωστά.
       Το grid-auto-rows: 1fr κρατά ΟΛΕΣ τις σειρές στο ίδιο ύψος - αλλιώς
       όποια σειρά έχει ετικέτα δύο γραμμών ψηλώνει και τα πλακίδια
       παύουν να μοιάζουν ίδια. */
    display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    grid-auto-rows: 1fr;
    gap: 14px; max-width: 1200px; margin: 0 auto;
}
.cat-card {
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    gap: 10px; padding: 22px 10px;
    background: var(--bg); border-radius: var(--radius);
    cursor: pointer; transition: var(--transition);
    border: 1.5px solid transparent; text-align: center;
}
.cat-card:hover, .cat-card.active {
    background: var(--green-xlight);
    border-color: var(--green-light);
    transform: translateY(-4px); box-shadow: var(--shadow-sm);
}
.cat-icon {
    width: 58px; height: 58px; border-radius: 50%; flex: none;
    background: var(--bg-white);
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; color: var(--green); transition: var(--transition);
    box-shadow: var(--shadow-sm);
    overflow: hidden;           /* κόβει τη φωτογραφία σε κύκλο */
}
/* Πραγματική φωτογραφία προϊόντος αντί για εικονίδιο */
.cat-icon img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.35s var(--ease);
}
.cat-card:hover .cat-icon, .cat-card.active .cat-icon {
    background: var(--green); color: #fff;
}
.cat-card:hover .cat-icon img { transform: scale(1.12); }
/* Η ενεργή κατηγορία ξεχωρίζει με πράσινο δαχτυλίδι, όχι με γέμισμα */
.cat-card.active .cat-icon { box-shadow: 0 0 0 3px var(--green); }
.cat-card span { font-size: 12px; font-weight: 600; color: var(--text-mid); }
.cat-card:hover span, .cat-card.active span { color: var(--green-dark); }

/* ============================================
   EXPLORE / PRODUCTS
   ============================================ */
/* Μήνυμα «δύο δάχτυλα» πάνω στον χάρτη (μόνο σε οθόνες αφής) */
.map-touch-hint {
    position: absolute; inset: 0; z-index: 500;
    display: flex; align-items: center; justify-content: center;
    padding: 0 32px; text-align: center;
    background: rgba(8,18,10,0.55); color: #fff;
    font-family: var(--font-body); font-size: 14px; font-weight: 600;
    line-height: 1.5; opacity: 0; pointer-events: none;
    transition: opacity 0.25s var(--ease);
}
.map-touch-hint.show { opacity: 1; }

.explore-section { padding: 90px 60px; background: var(--bg); }
/* Σκούρο θέμα: η ενότητα ΔΕΝ παίρνει πια δικό της φόντο. Έπαιρνε το
   #13280a για να ξεφύγει από το τότε σχεδόν μαύρο --bg· τώρα που το
   έδαφος είναι το πράσινο του footer, ένα δεύτερο πράσινο θα ξανάφτιαχνε
   το ίδιο πρόβλημα - ορατή ραφή ανάμεσα στα προϊόντα και τον χάρτη.
   Μία επιφάνεια, από τον ήρωα ως το υποσέλιδο. */
/* ΟΧΙ μέσω --bg-white πάνω στην ενότητα: όταν αλλάζει θέμα εν ώρα
   λειτουργίας, ο browser δεν ξαναϋπολογίζει τα var() των απογόνων όταν
   ο κανόνας που όριζε τη μεταβλητή πάψει να ταιριάζει - οι κάρτες
   έμεναν πράσινες πάνω σε λευκή σελίδα. Γράφουμε το χρώμα ρητά. */
[data-theme="dark"] .explore-section .producer-card,
[data-theme="dark"] .explore-section .filter-search-wrap,
[data-theme="dark"] .explore-section .filter-select,
[data-theme="dark"] .explore-section .ss-menu { background: #1f3f14; }
[data-theme="dark"] .explore-section .filter-search-wrap,
[data-theme="dark"] .explore-section .filter-select,
[data-theme="dark"] .explore-section .ss-menu { border-color: #35562a; }
[data-theme="dark"] .explore-section .card-footer { border-top-color: #35562a; }

.filters-bar {
    display: flex; gap: 14px; margin-bottom: 44px;
    max-width: 1200px; margin-left: auto; margin-right: auto; flex-wrap: wrap;
}
.filter-search-wrap {
    display: flex; align-items: center; gap: 10px; flex: 2;
    background: var(--bg-white); border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); padding: 0 16px;
    transition: var(--transition); min-width: 200px;
}
.filter-search-wrap:focus-within {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(92,138,45,0.12);
}
.filter-search-wrap i { color: var(--text-light); font-size: 14px; }
.filter-input {
    flex: 1; border: none; outline: none;
    font-family: var(--font-body); font-size: 14px;
    padding: 13px 0; color: var(--text); background: transparent;
}
.filter-select {
    flex: 1; padding: 13px 16px;
    border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-white); font-family: var(--font-body);
    font-size: 14px; color: var(--text); cursor: pointer;
    outline: none; transition: var(--transition); min-width: 140px;
}
.filter-select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(92,138,45,0.12); }

/* ---------- <select> με δική του λίστα κύλισης ----------
   Κλειστό, δεν ξεχωρίζει από τα διπλανά native select. Ανοιχτό,
   κόβεται στις --ss-rows σειρές και κυλάει. */
.ss-wrap { position: relative; flex: 1; min-width: 140px; display: flex; }
.ss-native {
    position: absolute; opacity: 0; pointer-events: none;
    width: 1px; height: 1px; padding: 0; border: 0; min-width: 0;
}
.ss-btn {
    flex: 1; width: 100%; text-align: left;
    display: flex; align-items: center; gap: 10px;
    font-weight: 400; line-height: 1.2;
}
.ss-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-caret { font-size: 11px; color: var(--text-light); transition: transform 0.2s var(--ease); }
.ss-wrap.is-open .ss-caret { transform: rotate(180deg); }
.ss-wrap.is-open .ss-btn { border-color: var(--green); box-shadow: 0 0 0 3px rgba(92,138,45,0.12); }

.ss-menu {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    z-index: 60; background: var(--bg-white);
    border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md); padding: 6px;
    /* 42px ανά σειρά + το padding του κουτιού */
    max-height: calc(var(--ss-rows, 8) * 42px + 12px);
    overflow-y: auto; overscroll-behavior: contain;
}
.ss-wrap.is-open .ss-menu { display: block; }
.ss-opt {
    display: block; width: 100%; text-align: left;
    padding: 11px 12px; border: none; background: none; cursor: pointer;
    font-family: var(--font-body); font-size: 14px; color: var(--text);
    border-radius: 6px; transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.ss-opt:hover, .ss-opt:focus-visible { background: var(--green-xlight); outline: none; }
.ss-opt.is-on { background: var(--green); color: #fff; font-weight: 600; }
[data-theme="dark"] .ss-opt.is-on { color: var(--green-deeper); }
/* Λεπτή μπάρα κύλισης, στα χρώματα της σελίδας */
.ss-menu::-webkit-scrollbar { width: 8px; }
.ss-menu::-webkit-scrollbar-track { background: transparent; }
.ss-menu::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.ss-menu::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

.producers-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 28px; max-width: 1200px; margin: 0 auto;
}

/* Producer Card */
.producer-card {
    background: var(--bg-white); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-sm);
    transition: var(--transition); cursor: pointer;
    opacity: 0; transform: translateY(36px);
    border: 1.5px solid transparent;
}
.producer-card.show { opacity: 1; transform: translateY(0); }
.producer-card:hover {
    transform: translateY(-8px); box-shadow: var(--shadow-lg);
    border-color: var(--green-xlight);
}
.card-img-wrap { position: relative; overflow: hidden; height: 230px; }
.card-img-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease; display: block;
}
.producer-card:hover .card-img-wrap img { transform: scale(1.06); }
.card-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.card-tag {
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    padding: 4px 10px; border-radius: 50px; text-transform: uppercase;
}
.card-tag.featured { background: var(--gold); color: #fff; }
.card-tag.organic  { background: var(--green); color: #fff; }
.card-tag.new      { background: #3b82f6; color: #fff; }
/* Συνεταιρισμός: τερακότα, το δεύτερο χρώμα της παλέτας. Δεν μπορεί να
   είναι χρυσό (το παίρνει το FEATURED) ούτε πράσινο (το BIO), αλλιώς
   δύο διαφορετικά πράγματα θα έδειχναν ίδια. */
.card-tag.coop     { background: var(--clay); color: #fff; }
.card-content { padding: 18px 20px; }
.card-category {
    font-size: 11px; font-weight: 600; color: var(--green);
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 5px; display: block;
}
.card-title {
    font-family: var(--font-display); font-size: 18px; font-weight: 700;
    margin-bottom: 7px; color: var(--text); line-height: 1.3;
}
.card-location {
    display: flex; align-items: center; gap: 5px;
    color: var(--text-light); font-size: 13px; margin-bottom: 8px;
}
.card-rating { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
.stars { color: var(--gold); font-size: 12px; }
.rating-num { font-size: 13px; font-weight: 600; color: var(--text-mid); }
.rating-count { font-size: 12px; color: var(--text-light); }
.card-desc {
    font-size: 13px; color: var(--text-mid); line-height: 1.55;
    margin-bottom: 16px; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 14px; border-top: 1px solid var(--border);
}
.card-price {
    font-size: 20px; font-weight: 700; color: var(--green);
    font-family: var(--font-display);
}
.card-price small { font-size: 12px; font-weight: 400; color: var(--text-light); font-family: var(--font-body); }
.card-add-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--green-xlight); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--green); font-size: 15px; transition: var(--transition);
}
.card-add-btn:hover { background: var(--green); color: #fff; transform: scale(1.1); }

.no-results {
    text-align: center; padding: 60px 20px;
    color: var(--text-light); grid-column: 1 / -1;
}
.no-results i { font-size: 38px; margin-bottom: 12px; display: block; }
.no-results.hidden { display: none; }
.load-more-wrap { text-align: center; margin-top: 48px; }
.load-more-btn { border-color: var(--green); color: var(--green); padding: 12px 30px; font-size: 15px; }
.load-more-btn:hover { background: var(--green-xlight); }

/* ============================================
   HOW IT WORKS – Dark Green Interactive
   ============================================ */
.how-section {
    background: var(--green-dark);
    padding: 90px 60px;
    position: relative; overflow: hidden; isolation: isolate;
}
/* Φωτογραφίες φόντου ανά καρτέλα: δύο στρώσεις που εναλλάσσονται ομαλά.
   ΑΝ ΛΕΙΠΟΥΝ τα αρχεία, δεν σπάει τίποτα - μένει το σκούρο πράσινο. */
.how-section::before,
.how-section::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background-size: cover; background-position: center center;
    background-repeat: no-repeat;
    transition: opacity 0.6s var(--ease);
    pointer-events: none;
}
/* Οι φωτογραφίες φόντου είναι ΤΟΠΙΚΕΣ, στο assets/photos/. Δεν φορτώνονται
   πια από το images.unsplash.com: έτσι δεν εξαφανίζονται αν τις αποσύρει ο
   φωτογράφος, δεν εξαρτόμαστε από ξένο CDN, και υπάρχει αντίγραφο με
   ημερομηνία ως αποδεικτικό της άδειας. Πηγή: Unsplash. */
.how-section::before {
    background-image: url('../photos/how-buyers.jpg');
    opacity: 0.22;
}
.how-section::after {
    background-image: url('../photos/how-producers.jpg');
    opacity: 0;
}
/* Τρίτη στρώση: οι συνεταιρισμοί. Δεν γίνεται με ψευδοστοιχείο (τα δύο
   είναι ήδη πιασμένα), οπότε είναι πραγματικό <div class="how-bg">. */
.how-bg {
    position: absolute; inset: 0; z-index: -1; opacity: 0;
    background-image: url('../photos/how-coops.jpg');
    background-size: cover; background-position: center center;
    background-repeat: no-repeat;
    transition: opacity 0.6s var(--ease);
    pointer-events: none;
    box-shadow: inset 0 0 240px 90px var(--green-dark);
}
.how-section[data-tab="farmers"]::before { opacity: 0; }
.how-section[data-tab="farmers"]::after  { opacity: 0.22; }
.how-section[data-tab="coops"]::before,
.how-section[data-tab="coops"]::after    { opacity: 0; }
.how-section[data-tab="coops"] .how-bg   { opacity: 0.22; }
/* Σκούρο πέπλο ώστε τα λευκά γράμματα να διαβάζονται πάντα.
   Το :not(.how-bg) κρατά τη στρώση φόντου πίσω από το περιεχόμενο. */
.how-section > *:not(.how-bg) { position: relative; z-index: 1; }
.how-section::before, .how-section::after { box-shadow: inset 0 0 240px 90px var(--green-dark); }
.how-header { text-align: center; margin-bottom: 64px; }
.how-tag-line {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; color: var(--gold); font-size: 11px; font-weight: 700;
    letter-spacing: 3px; text-transform: uppercase; margin-bottom: 18px;
}
.how-tag-line span { display: block; width: 32px; height: 1px; background: var(--gold); }
.how-header h2 {
    font-family: var(--font-display);
    font-size: clamp(34px, 5vw, 56px); font-weight: 700;
    color: #fff; margin-bottom: 12px; letter-spacing: -0.5px;
}
.how-header p { font-size: 16px; color: rgba(255,255,255,0.5); font-weight: 300; }

/* Tab switcher */
.how-tabs {
    display: flex; justify-content: center; gap: 0;
    margin-bottom: 60px;
    background: rgba(255,255,255,0.06);
    border-radius: 50px; padding: 6px;
    width: fit-content; margin-left: auto; margin-right: auto;
    border: 1px solid rgba(255,255,255,0.1);
}
.how-tab {
    padding: 11px 32px; border-radius: 50px; border: none;
    background: transparent; color: rgba(255,255,255,0.55);
    font-family: var(--font-body); font-size: 14px; font-weight: 600;
    cursor: pointer; letter-spacing: 0.5px; transition: var(--transition);
}
.how-tab.active {
    background: var(--gold); color: var(--green-deeper);
}
.how-tab:hover:not(.active) { color: rgba(255,255,255,0.85); }

/* Panels */
.how-panels { max-width: 960px; margin: 0 auto; }
.how-panel { display: none; }
.how-panel.active {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    animation: panelFadeIn 0.4s ease forwards;
}
@keyframes panelFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Step card */
.how-step-card {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px; padding: 32px 28px;
    transition: var(--transition);
    position: relative; overflow: hidden;
    opacity: 1;
    transform: none;
}
.how-step-card:hover {
    background: rgba(255,255,255,0.13);
    border-color: var(--gold);
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.how-step-card::before {
    content: attr(data-num);
    position: absolute; top: -10px; right: 16px;
    font-family: var(--font-display); font-size: 80px; font-weight: 900;
    color: rgba(255,255,255,0.04); line-height: 1; pointer-events: none;
}
.how-step-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--gold); color: var(--green-deeper);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(200,151,58,0.35);
    transition: var(--transition);
}
.how-step-card:hover .how-step-icon { transform: scale(1.1) rotate(-5deg); }
.how-step-num-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(200,151,58,0.2); color: var(--gold);
    font-size: 12px; font-weight: 700; margin-bottom: 10px;
}
.how-step-card h3 {
    font-family: var(--font-display); font-size: 20px;
    font-weight: 700; color: #fff; margin-bottom: 10px; line-height: 1.25;
}
.how-step-card p { font-size: 14px; color: rgba(255,255,255,0.62); line-height: 1.65; }

/* ============================================
   FARMER CTA
   ============================================ */
.farmer-cta { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; overflow: hidden; }
.farmer-cta-content {
    background: var(--green-deeper); padding: 80px 70px;
    display: flex; flex-direction: column; justify-content: center;
}
.farmer-cta-content h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.5vw, 42px); color: #fff;
    font-weight: 700; line-height: 1.2;
    margin: 14px 0 18px; letter-spacing: -0.5px;
}
.farmer-cta-content > p {
    font-size: 15px; color: rgba(255,255,255,0.7);
    line-height: 1.7; max-width: 420px; margin-bottom: 28px;
}
.cta-benefits { display: flex; flex-direction: column; gap: 10px; margin-bottom: 34px; }
.cta-benefit { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.88); font-size: 14px; font-weight: 500; }
.cta-benefit i { color: var(--green-light); font-size: 15px; }
.farmer-cta-img { overflow: hidden; position: relative; }
.farmer-cta-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.farmer-cta:hover .farmer-cta-img img { transform: scale(1.04); }

/* ============================================
   FOOTER
   ============================================ */
footer { background: var(--green-deeper); color: rgba(255,255,255,0.7); padding: 70px 60px 30px; }
.footer-grid {
    display: grid; grid-template-columns: 1.8fr 1fr 1.2fr 1fr 1.2fr;
    gap: 40px; max-width: 1200px; margin: 0 auto 48px;
    padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand p { font-size: 14px; color: rgba(255,255,255,0.45); line-height: 1.7; margin: 18px 0 24px; max-width: 280px; }
.footer-logo .logo-text { color: #fff; }
.social-links { display: flex; gap: 10px; }
.social-links a {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,0.07);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.6); text-decoration: none;
    font-size: 14px; transition: var(--transition);
}
.social-links a:hover { background: var(--green); color: #fff; transform: translateY(-2px); }
.footer-col h4 {
    font-size: 13px; font-weight: 700; color: #fff;
    letter-spacing: 1px; margin-bottom: 18px; text-transform: uppercase;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
/* inline-block + transform, ΟΧΙ padding: το padding σε inline σύνδεσμο
   αλλάζει το πλάτος του, οπότε ένα μακρύ κείμενο («Συνδρομές &
   Επιστροφές») τυλίγεται στο hover, ο δείκτης χάνει το στοιχείο, το
   hover σβήνει, το κείμενο ξαναγυρίζει - και το σύνολο τρεμοπαίζει.
   Το transform μετακινεί ΜΟΝΟ τη ζωγραφική, όχι τη διάταξη. */
.footer-col ul li a {
    display: inline-block; text-decoration: none;
    color: rgba(255,255,255,0.45); font-size: 14px;
    transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.footer-col ul li a:hover { color: var(--green-light); transform: translateX(4px); }
.contact-list { display: flex; flex-direction: column; gap: 11px; }
.contact-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.45); }
.contact-list li i { color: var(--green-light); width: 15px; text-align: center; }
.footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px; max-width: 1200px; margin: 0 auto;
    font-size: 13px; color: rgba(255,255,255,0.3);
}
.footer-bottom-links { display: flex; gap: 22px; }
.footer-bottom-links a { text-decoration: none; color: rgba(255,255,255,0.3); transition: var(--transition); }
.footer-bottom-links a:hover { color: var(--green-light); }
.footer-creator i { color: #e74c3c; }

/* ============================================
   MODALS
   ============================================ */
/* Όσο είναι ανοιχτό οποιοδήποτε παράθυρο, η σελίδα από πίσω παγώνει.
   Κλειδώνονται ΚΑΙ τα δύο (html + body): με μόνο το body, η ρόδα πάνω
   στο παράθυρο κυλούσε ακόμη το φόντο σε κάποιους browsers. */
html.scroll-locked, html.scroll-locked body { overflow: hidden !important; }

.modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
/* Κάθε παράθυρο συμπεριφέρεται ΤΟ ΙΔΙΟ: δεν ξεπερνά ποτέ το ύψος της
   οθόνης, η κεφαλίδα μένει ορατή και κυλάει μόνο το περιεχόμενο.
   Χωρίς το max-height τα ψηλά παράθυρα (πληρωμή, νέο προϊόν) ξεχείλιζαν
   πάνω από την οθόνη και κοβόταν η κορυφή τους. */
.modal {
    background: var(--bg-white); border-radius: 20px;
    width: 100%; max-width: 440px; box-shadow: var(--shadow-lg);
    position: relative; transform: scale(0.92) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: min(90vh, 860px);
    display: flex; flex-direction: column;
}
.modal-header { flex-shrink: 0; }
/* Το σώμα (ή η φόρμα που παίζει τον ρόλο του) είναι το μόνο που κυλάει */
.modal > .modal-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
/* Λεπτή μπάρα κύλισης, στο ύφος της σελίδας */
.modal > .modal-body::-webkit-scrollbar { width: 8px; }
.modal > .modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.modal > .modal-body::-webkit-scrollbar-thumb:hover { background: var(--text-light); }
.modal-overlay.open .modal { transform: scale(1) translateY(0); }
.modal-close {
    position: absolute; top: 14px; right: 16px;
    background: var(--bg); border: none; border-radius: 50%;
    width: 32px; height: 32px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-mid); transition: var(--transition); z-index: 1;
}
.modal-close:hover { background: #fee; color: #e74c3c; }
.modal-header { padding: 34px 34px 0; text-align: center; }
.modal-header .logo-icon { width: 50px; height: 50px; font-size: 21px; margin: 0 auto 14px; }
.modal-header h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.modal-header p { font-size: 14px; color: var(--text-light); }
.modal-body { padding: 26px 34px 34px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-mid); margin-bottom: 6px; }
.form-input {
    width: 100%; padding: 12px 15px;
    border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 14px; color: var(--text);
    outline: none; transition: var(--transition); background: var(--bg);
}
.form-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(92,138,45,0.12); background: #fff; }

/* ---------- Checkbox συγκατάθεσης (εγγραφή, κριτικές) ---------- */
.consent-box {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 12px 14px;
    margin: 16px 0 10px; cursor: pointer;
    font-size: 12.5px; color: var(--text-mid); line-height: 1.6;
    transition: var(--transition);
}
.consent-box:hover { border-color: var(--green-light); }
.consent-box input { margin-top: 2px; flex-shrink: 0; cursor: pointer; }
.consent-box.optional { background: none; border-style: dashed; }
.consent-box.consent-error { border-color: #c0392b; background: rgba(192, 57, 43, 0.06); }

/* Επιλεγμένο: το πλαίσιο «ανάβει» ώστε να φαίνεται με μια ματιά ότι
   η συγκατάθεση δόθηκε - χωρίς να χρειάζεται να κοιτάξεις το τικ. */
.consent-box:has(input:checked) {
    background: var(--green-xlight);
    border-color: var(--green);
    color: var(--text);
}
.consent-box:has(input:checked) strong { color: var(--green-dark); }
.consent-box input {
    width: 17px; height: 17px;
    accent-color: var(--green);
}
[data-theme="dark"] .consent-box:has(input:checked) { background: var(--green-xlight); border-color: var(--green-light); }
.consent-links { font-size: 12px; margin: -4px 0 6px; }
.consent-links a { color: var(--green); font-weight: 600; text-decoration: none; }
.consent-links a:hover { text-decoration: underline; }

/* ---------- Μήνυμα cookies ---------- */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9500;
    display: flex; align-items: center; justify-content: center;
    gap: 22px; flex-wrap: wrap;
    background: var(--bg-white); border-top: 2px solid var(--green);
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.16);
    padding: 16px 28px;
    animation: cookieUp 0.4s var(--ease);
}
@keyframes cookieUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cookie-banner.hide { transform: translateY(110%); transition: transform 0.35s var(--ease); }
.cookie-text { max-width: 760px; font-size: 12.5px; color: var(--text-mid); line-height: 1.6; }
.cookie-text strong { display: block; font-size: 14px; color: var(--text); margin-bottom: 3px; }
.cookie-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.cookie-link {
    border-color: var(--green); color: var(--green);
    text-decoration: none; padding: 9px 18px; font-size: 13px;
}
.cookie-link:hover { background: var(--green-xlight); }
.cookie-text .cookie-link {
    display: inline-block; margin-top: 6px; border: none; padding: 0;
    text-decoration: underline; font-size: 12.5px;
}
.cookie-text .cookie-link:hover { background: none; }

/* ---------- Πλωτό κουμπί cookies (κάτω δεξιά) ---------- */
.cookie-fab {
    position: fixed; right: 20px; bottom: 20px; z-index: 9400;
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--bg-white);
    color: var(--green); font-size: 17px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-md); transition: var(--transition);
}
.cookie-fab:hover {
    background: var(--green); color: #fff; border-color: var(--green);
    transform: translateY(-3px) scale(1.06);
}
@media (max-width: 700px) { .cookie-fab { right: 14px; bottom: 14px; width: 42px; height: 42px; } }

/* ---------- Πίνακας ρυθμίσεων cookies ---------- */
.cookie-prefs {
    position: fixed; z-index: 9600;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px));
    max-height: min(86vh, 720px);
    display: flex; flex-direction: column;
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    animation: cookiePrefsIn 0.28s var(--ease);
}
@keyframes cookiePrefsIn {
    from { opacity: 0; transform: translate(-50%, -46%) scale(0.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.cookie-prefs.hide { opacity: 0; transition: opacity 0.3s var(--ease); }
.cookie-prefs-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 20px 24px 14px; border-bottom: 1px solid var(--border);
}
.cookie-prefs-head h3 {
    font-family: var(--font-display); font-size: 20px; color: var(--text);
    letter-spacing: -0.2px;
}
.cookie-prefs-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-light); font-size: 17px; padding: 6px;
    border-radius: 8px; transition: var(--transition);
}
.cookie-prefs-close:hover { background: var(--bg); color: var(--text); }
/* overscroll-behavior: όταν το περιεχόμενο φτάσει στο τέρμα, η ρόδα ΔΕΝ
   συνεχίζει στη σελίδα από πίσω. */
.cookie-prefs-body { padding: 18px 24px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; }
.cookie-prefs-intro { font-size: 13px; color: var(--text-mid); line-height: 1.6; margin-bottom: 16px; }

/* Κάθε κατηγορία είναι μια ενότητα με ταινία στην αριστερή ακμή: πράσινη
   όπου ο χρήστης αποφασίζει, ουδέτερη όπου δεν γίνεται να αλλάξει κάτι.
   Το χρώμα κωδικοποιεί «μπορώ να το πειράξω;» - δεν είναι διακόσμηση. */
.cookie-cat {
    border: 1px solid var(--border); border-left: 3px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 15px 17px; margin-bottom: 14px; background: var(--bg);
    display: flex; flex-direction: column; gap: 9px;
}
.cookie-cat.is-optional { border-left-color: var(--green); }
.cookie-cat-head {
    display: flex; align-items: center; gap: 10px; margin: 0;
}
.cookie-cat-head strong {
    font-size: 14px; font-weight: 700; color: var(--text); flex: 1 1 auto;
    letter-spacing: 0.1px;
}
.cookie-cat p { font-size: 12.5px; color: var(--text-mid); line-height: 1.6; margin: 0; }
.cookie-always {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
    background: var(--green-xlight); color: var(--green-dark);
    border-radius: 20px; padding: 4px 11px; white-space: nowrap;
}
[data-theme="dark"] .cookie-always { color: var(--green-light); }

/* Πίνακας: τι αποθηκεύεται, τι είδους είναι, πόσο μένει.
   Η διάρκεια και το είδος λείπουν από τα περισσότερα banner - είναι όμως
   ακριβώς αυτά που ζητά ο GDPR να δηλώνονται. */
.cookie-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.cookie-table th {
    text-align: left; font-size: 9.5px; letter-spacing: 0.7px; text-transform: uppercase;
    color: var(--text-light); font-weight: 700; padding: 0 8px 5px 0;
    border-bottom: 1px solid var(--border);
}
.cookie-table td {
    padding: 6px 8px 6px 0; color: var(--text-mid); vertical-align: top;
    border-bottom: 1px solid var(--border);
}
.cookie-table tr:last-child td { border-bottom: none; }
.cookie-table code {
    font-size: 11px; color: var(--text); word-break: break-all;
    background: var(--bg-white); border-radius: 4px; padding: 2px 6px;
}

/* Οι τρίτοι: όνομα + σε τι χρησιμεύει. Χωρίς «διάρκεια», γιατί δεν
   αποθηκεύουν τίποτα - απλώς βλέπουν το αίτημα. */
.cookie-third { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.cookie-third li {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding: 6px 0; border-bottom: 1px solid var(--border);
    font-size: 11.5px;
}
.cookie-third li:last-child { border-bottom: none; }
.cookie-third code {
    color: var(--text); background: var(--bg-white);
    border-radius: 4px; padding: 2px 6px; word-break: break-all;
}
.cookie-third span { color: var(--text-light); }

/* «Τι θα γίνει αν το κλείσεις» - η πληροφορία που κρίνει την επιλογή */
.cookie-consequence {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12px; color: var(--text-mid); line-height: 1.55;
    background: var(--bg-white); border-radius: var(--radius-sm);
    padding: 10px 12px; margin: 0;
}


/* Διακόπτης on/off */
.cookie-switch { position: relative; display: inline-flex; cursor: pointer; flex-shrink: 0; }
.cookie-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cookie-switch-track {
    width: 42px; height: 23px; border-radius: 20px;
    background: var(--border); transition: var(--transition); position: relative;
}
.cookie-switch-track::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 17px; height: 17px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.28);
    transition: var(--transition);
}
.cookie-switch input:checked + .cookie-switch-track { background: var(--green); }
.cookie-switch input:checked + .cookie-switch-track::after { transform: translateX(19px); }
.cookie-switch input:focus-visible + .cookie-switch-track { outline: 2px solid var(--green); outline-offset: 2px; }

.cookie-prefs-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 14px 24px 20px; border-top: 1px solid var(--border);
}
.cookie-prefs-foot > div { display: flex; gap: 9px; flex-wrap: wrap; }
.cookie-prefs-foot .cookie-link { border: none; padding: 0; text-decoration: underline; font-size: 12.5px; }
.cookie-prefs-foot .cookie-link:hover { background: none; }
@media (max-width: 560px) {
    .cookie-prefs-foot { flex-direction: column; align-items: stretch; }
    .cookie-prefs-foot > div { justify-content: stretch; }
    .cookie-prefs-foot > div > * { flex: 1 1 auto; }
}

@media (max-width: 700px) {
    .cookie-banner { padding: 14px 18px; gap: 12px; }
    .cookie-actions { width: 100%; }
    .cookie-actions .btn-primary, .cookie-link { flex: 1; justify-content: center; text-align: center; }
}

/* Πεδίο με σφάλμα (κενό υποχρεωτικό ή μη έγκυρη τιμή) */
.form-input.input-error {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

/* Πεδίο κωδικού με μάτι εμφάνισης/απόκρυψης (login, register, αλλαγή κωδικού) */
.password-wrap { position: relative; }
.password-wrap .form-input { padding-right: 46px; }
.eye-btn {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    width: 34px; height: 34px; border: none; border-radius: 8px;
    background: transparent; cursor: pointer; color: var(--text-light);
    display: flex; align-items: center; justify-content: center; font-size: 14px;
    transition: var(--transition);
}
.eye-btn:hover { color: var(--green); background: var(--green-xlight); }

.modal-switch { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text-light); }
.modal-switch a { color: var(--green); text-decoration: none; font-weight: 600; }
.modal-switch a:hover { text-decoration: underline; }
.role-selector { display: flex; gap: 10px; margin-bottom: 20px; }
.role-btn {
    flex: 1; padding: 10px; border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg); cursor: pointer;
    font-family: var(--font-body); font-size: 14px; font-weight: 500;
    color: var(--text-mid); display: flex; align-items: center;
    justify-content: center; gap: 7px; transition: var(--transition);
}
.role-btn.active, .role-btn:hover { border-color: var(--green); background: var(--green-xlight); color: var(--green-dark); }

/* Cart modal */
.cart-modal { max-width: 500px; }
.cart-modal .modal-header { text-align: left; padding: 26px 28px 0; }
.cart-modal .modal-header h3 { font-size: 19px; font-family: var(--font-body); font-weight: 700; display: flex; align-items: center; gap: 10px; }
.cart-modal .modal-header h3 i { color: var(--green); }
.cart-modal .modal-body { padding: 18px 28px 28px; }
.cart-items { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; }
.empty-cart { text-align: center; padding: 36px 20px; color: var(--text-light); }
.empty-cart i { font-size: 34px; margin-bottom: 10px; display: block; color: var(--border); }
.cart-item { display: flex; align-items: center; gap: 12px; padding: 11px; background: var(--bg); border-radius: var(--radius-sm); }
.cart-item-img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.cart-item-info { flex: 1; }
.cart-item-name { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.cart-item-price { font-size: 13px; color: var(--green); font-weight: 700; }
.cart-item-remove {
    background: none; border: none; cursor: pointer; color: var(--text-light);
    font-size: 15px; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.cart-item-remove:hover { background: #fee; color: #e74c3c; }
.cart-total { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.total-row { display: flex; justify-content: space-between; font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.checkout-btn { margin-bottom: 14px; }
.payment-icons { display: flex; justify-content: center; gap: 12px; color: var(--text-light); font-size: 26px; }

/* Product Modal */
/* Η καρτέλα προϊόντος έχει εικόνα στην κορυφή, οπότε κυλάει ολόκληρη */
.product-modal { max-width: 680px; overflow-y: auto; }
.product-modal-img { width: 100%; height: 300px; object-fit: cover; border-radius: 20px 20px 0 0; display: block; }
.product-modal-body { padding: 28px 34px 34px; }
.product-modal-cat { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green); margin-bottom: 7px; display: block; }
.product-modal-title { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin-bottom: 9px; line-height: 1.2; }
.product-modal-location { display: flex; align-items: center; gap: 6px; color: var(--text-light); font-size: 14px; margin-bottom: 12px; }
.product-modal-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.product-modal-desc { font-size: 14.5px; color: var(--text-mid); line-height: 1.7; margin-bottom: 24px; }
.product-modal-footer { display: flex; align-items: center; justify-content: space-between; }
.product-modal-price { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--green); }

/* ============================================
   TOAST
   ============================================ */
.toast {
    position: fixed; bottom: 28px; right: 28px; z-index: 10000;
    background: var(--text); color: #fff; padding: 13px 20px;
    border-radius: 10px; font-size: 14px; font-weight: 500;
    box-shadow: var(--shadow-md);
    display: flex; align-items: center; gap: 9px;
    transform: translateY(80px); opacity: 0;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none; max-width: 300px;
}
.toast.show { transform: translateY(0); opacity: 1; pointer-events: all; }
.toast.success { background: var(--green-dark); }
.toast.error   { background: #c0392b; }
/* Ούτε επιτυχία ούτε σφάλμα: «έγινε, αλλά κοίταξέ το».
   Το χρησιμοποιεί η εύρεση διεύθυνσης όταν βρίσκει μόνο την περιοχή -
   με πράσινο φόντο ο παραγωγός θα νόμιζε ότι πέτυχε και δεν θα διάβαζε. */
.toast.warn {
    background: #8a6212; max-width: 380px; line-height: 1.5;
}

/* Reveal */
/* Πιο ήπια εμφάνιση: μικρότερη μετατόπιση και ελαστική καμπύλη, ώστε τα
   στοιχεία να «γλιστράνε» αντί να πετάγονται καθώς κατεβαίνει ο χρήστης.
   Το will-change στέλνει το στοιχείο στην κάρτα γραφικών και αποτρέπει
   τα τρεμοπαίγματα κατά την κύλιση. */
.reveal {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.reveal.show { opacity: 1; transform: translateY(0); will-change: auto; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
    .categories-grid { grid-template-columns: repeat(4, 1fr); }
    .producers-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .farmer-cta { grid-template-columns: 1fr; }
    .farmer-cta-img { height: 280px; }
    .how-panel.active { grid-template-columns: repeat(3, 1fr); }
}

/* ΚΕΦΑΛΙΔΑ: πότε περνάμε στο μενού «χάμπουργκερ»
   -------------------------------------------------------------
   Ήταν στα 900px. Ανάμεσα σε 900 και 1150 όμως η κεφαλίδα στρίμωχνε:
   στα ελληνικά τα λεκτικά είναι μακρύτερα («Πώς Λειτουργεί» αντί για
   «How It Works»), και με συνδεδεμένο χρήστη προστίθεται και το όνομά
   του με το κουμπί αποσύνδεσης. Αποτέλεσμα: σπασμένες σε δύο σειρές
   ετικέτες και κουμπί «Εγγραφή» κομμένο στην άκρη.
   Στα 1024 και κάτω μπαίνει πλέον το μενού, που τα χωράει όλα άνετα. */
@media (max-width: 1024px) {
    .nav-links, .nav-actions { display: none; }
    .hamburger { display: flex; }
}

/* Ενδιάμεσα (1025-1200) μαζεύουμε λίγο τα κενά, να μη γεμίζει η γραμμή */
@media (max-width: 1200px) and (min-width: 1025px) {
    .nav-links { gap: 24px; }
    .nav-links a { font-size: 14.5px; }
    .nav-actions { gap: 8px; }
}

@media (max-width: 900px) {
    .nav-container { padding: 0 22px; }
    /* Sections */
    .hero-content { padding: 0 30px; }
    .categories-section,
    .explore-section,
    .how-section { padding: 64px 28px; }
    .farmer-cta-content { padding: 56px 36px; }
    footer { padding: 50px 28px 24px; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    /* How panels go single column */
    .how-panel.active { grid-template-columns: 1fr; gap: 16px; }}

@media (max-width: 640px) {
    :root { --header-h: 64px; }
    .producers-grid { grid-template-columns: 1fr; }
    /* ΠΛΑΤΟΣ: το σκέτο 1fr ΔΕΝ αφήνει τη στήλη να πέσει κάτω από το
       περιεχόμενό της, οπότε οι στήλες με μεγάλες λέξεις έκλεβαν χώρο
       από τις γειτονικές - μετρημένα 101 / 96 / 70 / 65 px στην ίδια
       σειρά. Το minmax(0, 1fr) τις κάνει ακριβώς ίσες.
       ΥΨΟΣ: το grid-auto-rows ισιώνει και τις σειρές, ώστε οι ετικέτες
       δύο γραμμών να μην ψηλώνουν τη σειρά τους. */
    /* ΤΡΕΙΣ στήλες, όχι τέσσερις: με τέσσερις έμεναν ~74px για το κείμενο
       και λέξεις όπως «Πτηνοπαραγωγοί» έσπαγαν στη μέση. Με τρεις
       περισσεύει χώρος και μπαίνουν σε μία γραμμή. */
    .categories-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 1fr; gap: 10px;
    }
    .cat-card { padding: 16px 8px; justify-content: flex-start; }
    /* Δίχτυ ασφαλείας για πολύ στενές οθόνες (≤320px) */
    .cat-card span { overflow-wrap: break-word; width: 100%; }
    /* flex: none -> το στρογγυλό πλαίσιο δεν συμπιέζεται ποτέ από το κείμενο */
    .cat-icon { width: 48px; height: 48px; font-size: 16px; flex: none; }
    .cat-card span { font-size: 10.5px; }
    .hero-stats { gap: 14px; flex-wrap: wrap; }
    .hero-stats .stat-divider { display: none; }
    .stat-num { font-size: 20px; }
    .search-inner { border-radius: 10px; }

    /* Τέσσερα φίλτρα το ένα κάτω από το άλλο έπιαναν μισή οθόνη.
       Αναζήτηση πάνω σε όλο το πλάτος, μετά Περιοχές | Κατηγορίες
       δίπλα-δίπλα, και η ταξινόμηση από κάτω. */
    .filters-bar {
        display: grid; grid-template-columns: 1fr 1fr;
        gap: 10px; margin-bottom: 30px;
    }
    .filter-search-wrap { grid-column: 1 / -1; min-width: 0; }
    #sortFilter { grid-column: 1 / -1; }
    .filters-bar .filter-select,
    .filters-bar .ss-wrap { min-width: 0; }
    .filters-bar .filter-select { padding: 12px 12px; font-size: 13.5px; }
    .ss-btn { padding: 12px 12px; font-size: 13.5px; gap: 6px; }
    .how-tabs { flex-direction: column; border-radius: 14px; }
    .how-tab { border-radius: 10px; }
    .how-panel.active { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 10px; }
    .modal-header { padding: 22px 22px 0; }
    .modal-body { padding: 18px 22px 26px; }
    .farmer-cta-content { padding: 44px 24px; }
    .farmer-cta-content h2 { font-size: 26px; }
}

/* ============================================
   ADDITIONS – Auth chip, γλώσσα/θέμα, αγαπημένα,
   φόρμα εγγραφής παραγωγού, gallery
   ============================================ */
.hidden { display: none !important; }

/* Language toggle label */
.lang-label { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; }

/* User chip (συνδεδεμένος χρήστης) */
.user-chip { display: flex; align-items: center; gap: 10px; }
.user-chip-link { text-decoration: none; }

/* Two-column form row */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; gap: 0; } }

/* Μεγαλύτερο modal εγγραφής με scroll */
.register-modal { max-width: 520px; }

select.form-input { cursor: pointer; }
textarea.form-input { resize: vertical; min-height: 90px; }

/* Ενημερωτικό box αγοραστή */
.buyer-info {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--green-xlight); border: 1.5px solid var(--green-light);
    border-radius: var(--radius-sm); padding: 14px 16px;
    font-size: 13.5px; color: var(--text-mid); line-height: 1.6;
    margin-bottom: 16px;
}
.buyer-info i { color: var(--green); margin-top: 2px; }

/* Επιλογή πακέτου συνδρομής */
.plan-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan-btn {
    border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg); cursor: pointer; padding: 12px 10px;
    display: flex; flex-direction: column; gap: 3px; text-align: left;
    font-family: var(--font-body); transition: var(--transition);
}
.plan-btn strong { font-size: 13px; color: var(--text); }
.plan-btn small { font-size: 11.5px; color: var(--text-light); }
.plan-btn.active, .plan-btn:hover { border-color: var(--green); background: var(--green-xlight); }
.plan-btn.active strong { color: var(--green-dark); }

/* Gallery στο product modal */
.gallery-thumbs {
    display: flex; gap: 8px; padding: 10px 14px 0; flex-wrap: wrap;
}
.gallery-thumb {
    width: 58px; height: 58px; object-fit: cover; border-radius: 8px;
    cursor: pointer; border: 2px solid transparent; opacity: 0.75;
    transition: var(--transition);
}
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.active { border-color: var(--green); opacity: 1; }

/* Meta πληροφορίες προϊόντος */
.product-meta-row { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.product-meta { font-size: 13px; color: var(--text-mid); display: flex; align-items: center; gap: 7px; }
.product-meta i { color: var(--green); }

/* Κουτί παραγωγού με στοιχεία επικοινωνίας */
.producer-box {
    background: var(--bg); border: 1.5px solid var(--border);
    border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px;
}
.producer-box-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.producer-box-head > i {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--green-xlight); color: var(--green);
    display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.producer-box-head strong { display: block; font-size: 15px; color: var(--text); }
.producer-box-head small { font-size: 12px; color: var(--text-light); }
.producer-contact-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.contact-btn { text-decoration: none; font-size: 13px; padding: 9px 14px; }
.contact-btn-outline { border-color: var(--green); color: var(--green); display: inline-flex; align-items: center; gap: 7px; }
.contact-btn-outline:hover { background: var(--green-xlight); }
.producer-contact-info { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-light); }
.producer-contact-info i { color: var(--green); margin-right: 4px; }

/* ============================================
   ΣΕΛΙΔΕΣ ΠΛΗΡΟΦΟΡΙΩΝ (info.html)
   Χρησιμοποιούν τα ίδια χρώματα/μεταβλητές με
   την υπόλοιπη σελίδα - άρα και dark mode.
   ============================================ */
body.info-body {
    background: var(--bg);
    min-height: 100vh;
    display: flex; flex-direction: column;
}
/* Σταθερό σκούρο header (ίδιο σε όλες τις σελίδες πληροφοριών) */
.page-header { position: sticky; top: 0; z-index: 900; }
.page-header .nav-container {
    background: var(--green-deeper);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.page-header .nav-actions .btn-outline,
.page-header .nav-actions .btn-primary { text-decoration: none; }

/* Επικεφαλίδα σελίδας (banner) */
.page-hero {
    background: linear-gradient(160deg, var(--green-dark) 0%, var(--green-deeper) 100%);
    color: #fff; padding: 64px 60px 70px;
    position: relative; overflow: hidden;
}
.page-hero-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }

/* Φωτογραφία στο δεξί κενό του banner, με βαθμιαίο σβήσιμο προς το κείμενο
   ώστε να μη «χτυπάει» και να παραμένει ευανάγνωστος ο τίτλος.
   Η εικόνα ορίζεται ανά σελίδα μέσω της μεταβλητής --hero-photo. */
.page-hero.has-photo::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0;
    width: 48%; z-index: 0; pointer-events: none;
    background-image: var(--hero-photo,
        url('../photos/about.jpg'));
    background-size: cover; background-position: center center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.55) 42%, rgba(0,0,0,0.75) 100%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.55) 42%, rgba(0,0,0,0.75) 100%);
    opacity: 0.85;
}
/* ΚΙΝΗΤΟ: η φωτογραφία ήταν display:none - οι σελίδες του υποσέλιδου
   (Νομικά, Βοήθεια, FAQ, Οδηγός) έβγαιναν σκέτο πράσινο κουτί. Δεν
   χωράει πλαγίως σε στενή οθόνη, οπότε καλύπτει ΟΛΟ το banner και το
   κείμενο πατά πάνω σε σκούρο πέπλο για να διαβάζεται. */
@media (max-width: 900px) {
    .page-hero.has-photo::after {
        width: 100%; opacity: 0.5;
        -webkit-mask-image: none; mask-image: none;
    }
    .page-hero.has-photo::before {
        content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
        background: linear-gradient(180deg,
            rgba(21,43,11,0.72) 0%, rgba(21,43,11,0.80) 60%, rgba(21,43,11,0.92) 100%);
    }
    .page-hero.has-photo .page-hero-inner { z-index: 2; }
}
.page-hero-label {
    display: block; color: var(--gold);
    font-size: 12px; font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase; margin-bottom: 16px;
}
.page-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(30px, 5vw, 50px); font-weight: 700;
    color: #fff; letter-spacing: -0.5px; line-height: 1.15;
    display: flex; align-items: center; gap: 18px; margin-bottom: 16px;
}
.page-hero h1 i {
    color: var(--green-light); font-size: 0.72em;
    background: rgba(255, 255, 255, 0.09);
    width: 1.7em; height: 1.7em; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.page-hero p {
    font-size: 16px; color: rgba(255, 255, 255, 0.72);
    line-height: 1.75; max-width: 700px;
}

/* Το περιεχόμενο απλώνεται σε όλο το πλάτος, πάνω σε λευκό φόντο
   (χωρίς πλαίσιο/κάρτα - διαβάζεται σαν κείμενο σελίδας). */
.info-main {
    flex: 1;
    background: var(--bg-white);
    padding: 56px 60px 70px;
}
.info-card {
    max-width: 1200px; margin: 0 auto;
    background: none; border: none; border-radius: 0;
    padding: 0; box-shadow: none;
}
.info-card h1 {
    font-family: var(--font-display);
    font-size: clamp(27px, 4vw, 38px); font-weight: 700;
    color: var(--text); margin-bottom: 12px; letter-spacing: -0.5px;
    display: flex; align-items: center;
}
.info-intro {
    font-size: 15.5px; color: var(--text-mid); line-height: 1.75;
    margin-bottom: 30px; padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.info-sec { margin-bottom: 28px; }
.info-sec:last-child { margin-bottom: 0; }
.info-sec h2 {
    font-family: var(--font-display); font-size: 19px; font-weight: 700;
    color: var(--text); margin-bottom: 10px;
    display: flex; align-items: center; gap: 10px;
}
.info-sec h2 i { color: var(--green); font-size: 15px; width: 20px; text-align: center; }
.info-sec p { font-size: 14.5px; color: var(--text-mid); line-height: 1.8; }
.info-sec ul { margin: 8px 0 0; padding-left: 20px; }
.info-sec li { font-size: 14.5px; color: var(--text-mid); line-height: 1.8; margin-bottom: 6px; }
.info-sec strong { color: var(--text); font-weight: 600; }
/* Πίνακες μέσα στα νομικά κείμενα */
.info-table-wrap { overflow-x: auto; margin: 14px 0 6px; }
.info-table {
    width: 100%; border-collapse: collapse; font-size: 13.5px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    overflow: hidden; min-width: 480px;
}
.info-table th {
    text-align: left; padding: 10px 14px; background: var(--bg);
    color: var(--text); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px;
    border-bottom: 1px solid var(--border);
}
.info-table td {
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    color: var(--text-mid); line-height: 1.6; vertical-align: top;
}
.info-table tr:last-child td { border-bottom: none; }
.info-table tr:hover td { background: var(--bg); }

.info-updated {
    margin-top: 32px; padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: 12.5px; color: var(--text-light);
}
@media (max-width: 900px) {
    .page-hero { padding: 44px 28px 50px; }
}
@media (max-width: 900px) {
    .info-main { padding: 40px 28px 50px; }
}
@media (max-width: 700px) {
    .page-hero { padding: 34px 20px 40px; }
    .page-hero h1 { gap: 12px; }
    .info-main { padding: 30px 20px 40px; }
    /* Τα νομικά κείμενα είναι μακροσκελή: στα 14.5px διαβάζονταν με
       δυσκολία στο κινητό. Μεγαλύτερο γράμμα, πιο ανοιχτό χρώμα και πιο
       αραιές γραμμές - η αντίθεση ανεβαίνει από 7.9 σε 11.6. */
    .info-sec p, .info-sec li { font-size: 16px; line-height: 1.85; color: var(--text); }
    .info-sec li { margin-bottom: 10px; }
    .info-sec { margin-bottom: 34px; }
    .info-sec h2 { font-size: 20px; line-height: 1.35; }
    .page-hero p { font-size: 15px; color: rgba(255,255,255,0.9); }
}

/* ============================================
   ΚΡΙΤΙΚΕΣ ΠΡΟΪΟΝΤΟΣ
   ============================================ */
.reviews-block { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.rev-title {
    font-family: var(--font-display); font-size: 19px; font-weight: 700;
    color: var(--text); display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
}
.rev-title i { color: var(--gold); font-size: 15px; }
.rev-avg { margin-left: auto; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--text-light); }
.rev-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; max-height: 260px; overflow-y: auto; }
.rev-item { background: var(--bg); border-radius: var(--radius-sm); padding: 12px 14px; }
.rev-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.rev-item-head strong { font-size: 13.5px; color: var(--text); }
.rev-item-head .stars { font-size: 11px; }
.rev-item-head small { color: var(--text-light); font-size: 11.5px; margin-left: auto; }
.rev-item p { font-size: 13.5px; color: var(--text-mid); line-height: 1.6; }
.rev-note { font-size: 13px; color: var(--text-light); line-height: 1.6; display: flex; gap: 8px; align-items: flex-start; }
.rev-note i { color: var(--green); margin-top: 3px; }
/* «Άνοιγμα στο Google Maps»: απλός σύνδεσμος, χωρίς API key/χρέωση */
.pm-gmaps, .map-popup-gmaps {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--green-xlight); color: var(--green-dark);
    border-radius: 50px; padding: 6px 14px; margin-left: 10px;
    font-size: 12.5px; font-weight: 600; text-decoration: none;
    transition: var(--transition); white-space: nowrap;
}
.pm-gmaps:hover, .map-popup-gmaps:hover { background: var(--green); color: #fff; }
[data-theme="dark"] .pm-gmaps, [data-theme="dark"] .map-popup-gmaps { color: var(--green-light); }
[data-theme="dark"] .pm-gmaps:hover, [data-theme="dark"] .map-popup-gmaps:hover { color: #fff; }
.map-popup-gmaps { margin: 8px 0 0; justify-content: center; width: 100%; }
.product-modal-location { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

.rev-form { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
/* Με ποιο όνομα θα δημοσιευθεί - δεν είναι πεδίο, έρχεται από το προφίλ */
.rev-asname {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--green-xlight); border-radius: var(--radius-sm);
    padding: 9px 13px; margin-bottom: 14px;
    font-size: 12.5px; color: var(--text-mid);
}
.rev-asname i { color: var(--green); }
.rev-asname strong { color: var(--text); }
/* Κλειδωμένη φόρμα για επισκέπτες */
.rev-locked {
    background: var(--bg); border: 1px dashed var(--border);
    border-radius: var(--radius); padding: 24px 20px; text-align: center;
}
.rev-locked i { font-size: 22px; color: var(--text-light); display: block; margin-bottom: 10px; }
.rev-locked p { font-size: 13.5px; color: var(--text-mid); line-height: 1.6; margin-bottom: 14px; }
.rev-locked .btn-outline { text-decoration: none; display: inline-flex; }
.rev-form h5 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.rev-form .form-group { margin-bottom: 12px; }
.rev-form textarea { resize: vertical; }
.rev-stars-input { display: flex; gap: 4px; }
.rev-star {
    background: none; border: none; cursor: pointer; padding: 2px;
    font-size: 19px; color: var(--border); transition: var(--transition);
}
.rev-star.on { color: var(--gold); }
.rev-star:hover { transform: scale(1.15); }

/* ============================================
   DARK MODE
   Ενεργοποιείται με data-theme="dark" στο <html>
   ============================================ */
/* ============================================
   ΣΚΟΥΡΟ ΘΕΜΑ
   Όλη η παλέτα χτίζεται πάνω στο πράσινο του footer (#152b0b), ώστε
   η σελίδα να είναι ΠΡΑΣΙΝΗ και όχι γκρι-λαδί όπως πριν.

   Δεύτερο χρώμα: ΤΕΡΑΚΟΤΑ. Το ελληνικό χώμα και τα πήλινα - ζεστό
   απέναντι στο ψυχρό πράσινο, χωρίς να μοιάζει εταιρικό. Παίρνει τον
   διακοσμητικό ρόλο (ετικέτες, τονισμοί) που είχε ως τώρα το χρυσό,
   ώστε το χρυσό να μείνει ΑΠΟΚΛΕΙΣΤΙΚΑ για προειδοποιήσεις - πιο
   καθαρή σημασιολογία.

   ΤΟ ΕΔΑΦΟΣ ΕΙΝΑΙ ΤΟ ΠΡΑΣΙΝΟ ΤΟΥ FOOTER.
   Ήταν #0c1a06 - τόσο σκούρο που διαβαζόταν ως μαύρο, και κάθε ενότητα
   χωρίς δικό της φόντο (χάρτης, «Πώς λειτουργεί») έμοιαζε με μαύρη
   τρύπα ανάμεσα σε πράσινες. Τώρα σελίδα και footer είναι ΤΟ ΙΔΙΟ
   χρώμα: μία συνεχής πράσινη επιφάνεια από πάνω μέχρι κάτω.

   Μετρημένες αντιθέσεις στη νέα παλέτα:
     πάνω στη σελίδα (#152b0b): κείμενο 12.71 · δευτερεύον 8.37 · πράσινο 5.90
     πάνω στην κάρτα  (#1f3f14): κείμενο  9.87 · δευτερεύον 6.50 · πράσινο 4.59
   Όλα πάνω από το όριο AA (4.5), και η κάρτα ξεχωρίζει από το φόντο
   ελαφρώς περισσότερο από πριν (1.29 έναντι 1.26).
   ============================================ */
[data-theme="dark"] {
    --text: #ecebe4;
    --text-mid: #b9c4ae;          /* ελαφρώς πράσινη απόχρωση, δένει με τη βάση */
    --text-light: #8b9a80;
    --bg: #152b0b;                /* σελίδα: ΑΚΡΙΒΩΣ το πράσινο του footer */
    --bg-white: #1f3f14;          /* κάρτες: μία σκάλα πάνω από τη σελίδα */
    --border: #35562a;
    --green: #7fb034;             /* τονισμός: ήταν #5c8a2d με αντίθεση 3.98 */
    --green-light: #9bcf48;
    --green-xlight: #24461a;
    --gold: #e0b55a;              /* μόνο για προειδοποιήσεις πλέον */
    --clay: #d08a62;              /* ΤΕΡΑΚΟΤΑ - το δεύτερο χρώμα */
    --clay-soft: #e09b73;
    --shadow-sm: 0 2px 12px rgba(0,0,0,0.45);
    --shadow-md: 0 6px 28px rgba(0,0,0,0.55);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.65);
}

/* ---- Κείμενο ΠΑΝΩ σε πράσινη επιφάνεια ----
   Με το φωτεινό πράσινο του σκούρου θέματος, το λευκό δίνει αντίθεση
   μόλις 2.57 - αδιάβαστο. Το σκούρο πράσινο δίνει 7.00. Είναι το
   συνηθισμένο μοτίβο των σκούρων θεμάτων: φωτεινή επιφάνεια, σκούρο
   γράμμα. (Στο λευκό θέμα δεν αλλάζει τίποτα.) */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .explore-btn,
[data-theme="dark"] .meet-btn,
[data-theme="dark"] .card-tag.organic,
[data-theme="dark"] .card-tag.coop,
[data-theme="dark"] .pr-product-bio,
[data-theme="dark"] .logo-icon,
[data-theme="dark"] .agro-pin,
[data-theme="dark"] .meet-avatar,
[data-theme="dark"] .pr-avatar,
[data-theme="dark"] .producer-avatar,
[data-theme="dark"] .cat-card:hover .cat-icon,
[data-theme="dark"] .cat-card.active .cat-icon,
[data-theme="dark"] .card-add-btn:hover,
[data-theme="dark"] .social-links a:hover,
[data-theme="dark"] .cookie-fab:hover,
[data-theme="dark"] .pm-gmaps:hover,
[data-theme="dark"] .map-popup-gmaps:hover,
[data-theme="dark"] .pr-gmaps:hover,
[data-theme="dark"] .upload-btn.btn-ready:hover { color: #0c1a06; }

/* Στο σκούρο θέμα το hover πάει ΠΙΟ ΦΩΤΕΙΝΑ, όχι πιο σκούρα */
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .explore-btn:hover,
[data-theme="dark"] .meet-btn:hover { background: var(--green-light); color: #0c1a06; }

/* Ενεργό κουμπί μενού: το --green-deeper είναι πλέον σχεδόν ίδιο με το
   φόντο του sidebar, οπότε θα εξαφανιζόταν. */
[data-theme="dark"] .dash-nav-btn.active { background: var(--green); color: #0c1a06; }
[data-theme="dark"] .dash-nav-btn.active i { color: #0c1a06; }

/* ---- Πού εμφανίζεται η τερακότα (μόνο σκούρο θέμα) ---- */
[data-theme="dark"] .page-hero-label,
[data-theme="dark"] .how-tag-line { color: var(--clay); }
[data-theme="dark"] .how-tag-line span { background: var(--clay); }
[data-theme="dark"] .section-tag {
    background: rgba(208,138,98,0.14); color: var(--clay-soft);
}
[data-theme="dark"] .section-tag.light {
    background: rgba(208,138,98,0.20); color: var(--clay-soft);
}
[data-theme="dark"] .footer-col h4 { color: var(--clay-soft); }
[data-theme="dark"] .info-main h2,
[data-theme="dark"] .info-main h3 { color: var(--clay-soft); }
[data-theme="dark"] .pr-tab-count { background: rgba(208,138,98,0.16); color: var(--clay-soft); }
[data-theme="dark"] .meet-chip { background: rgba(208,138,98,0.14); color: var(--clay-soft); }

[data-theme="dark"] #main-header.scrolled .nav-container {
    background: rgba(22, 27, 17, 0.97);
    border-bottom: 1px solid var(--border);
}
[data-theme="dark"] #main-header.scrolled .logo-text,
[data-theme="dark"] #main-header.scrolled .nav-links a { color: var(--text); }
[data-theme="dark"] #main-header.scrolled .nav-links a:hover { color: var(--green-light); }
[data-theme="dark"] #main-header.scrolled .hamburger span { background: var(--text); }

[data-theme="dark"] .search-inner { background: var(--bg-white); }
[data-theme="dark"] .search-inner input { color: var(--text); }

[data-theme="dark"] .form-input:focus { background: var(--bg-white); }
[data-theme="dark"] .modal-close:hover { background: #3a2626; }
[data-theme="dark"] .cart-item-remove:hover { background: #3a2626; }
[data-theme="dark"] .toast { background: #2b3320; }
[data-theme="dark"] .toast.error { background: #7c2d24; }
[data-theme="dark"] .cat-icon { background: var(--bg); }
[data-theme="dark"] .plan-btn.active strong { color: var(--green-light); }
[data-theme="dark"] .role-btn.active, [data-theme="dark"] .role-btn:hover { color: var(--green-light); }
[data-theme="dark"] .cat-card:hover span, [data-theme="dark"] .cat-card.active span { color: var(--green-light); }

/* ============================================
   MAP (Leaflet) - αρχική σελίδα & dashboards
   ============================================ */
.map-section { padding: 90px 60px; background: var(--bg-white); }
/* Στο σκούρο θέμα ΔΕΝ εναλλάσσουμε φόντα ανά ενότητα: παίρνει το έδαφος
   της σελίδας, που πλέον είναι το πράσινο του footer. Μία συνεχής
   επιφάνεια από τα προϊόντα ως το υποσέλιδο. (Λευκό θέμα: αμετάβλητο.) */
[data-theme="dark"] .map-section { background: var(--bg); }
.map-shell { max-width: 1200px; margin: 0 auto; }
#homeMap { height: 480px; }
.leaflet-container {
    font-family: var(--font-body);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: 1;
    background: #dfe8d4;
}
.map-sub { text-align: center; margin-top: 14px; font-size: 13px; color: var(--text-light); }
.map-sub i { color: var(--green); margin-right: 6px; }

/* Πράσινη πινέζα AgroPazari */
.agro-pin {
    width: 32px; height: 32px;
    background: var(--green);
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 6px;
    transform: rotate(-45deg);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}
.agro-pin i { transform: rotate(45deg); color: #fff; font-size: 12px; }

/* Popup πινέζας */
.map-popup { display: flex; flex-direction: column; gap: 5px; min-width: 180px; }
.map-popup img { width: 100%; height: 92px; object-fit: cover; border-radius: 8px; display: block; }
.map-popup strong { font-size: 13.5px; color: #1a1a1a; line-height: 1.3; }
.map-popup small { color: #777; font-size: 11.5px; }
.map-popup-price { color: #5C8A2D; font-weight: 700; font-size: 13px; }
.map-popup-btn { border: none; cursor: pointer; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; justify-content: center; margin-top: 3px; }

@media (max-width: 900px) {
    .map-section { padding: 64px 28px; }
    #homeMap { height: 380px; }
}

/* Dark mode χάρτη */
[data-theme="dark"] .leaflet-tile { filter: brightness(0.72) contrast(1.05) saturate(0.85); }
[data-theme="dark"] .leaflet-container { background: #1a2113; }
[data-theme="dark"] .agro-pin { border-color: var(--bg-white); }
[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip { background: #1f3f14; color: #ecebe4; }
[data-theme="dark"] .map-popup strong { color: #ecebe4; }
[data-theme="dark"] .map-popup small { color: #8d8b7f; }
[data-theme="dark"] .map-popup-price { color: #7FB034; }
[data-theme="dark"] .buyer-info { border-color: var(--green-dark); }


/* ---------- Στοιχεία επιχείρησης στο προϊόν ---------- */
.business-info {
    display: flex; flex-direction: column; gap: 7px;
    padding: 12px 14px; margin: 0 0 14px;
    background: var(--bg); border-radius: var(--radius-sm);
    border-left: 3px solid var(--green);
}
.business-info span {
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; color: var(--text-mid);
}
.business-info i { width: 14px; text-align: center; color: var(--green); font-size: 12px; }
.business-info a { color: var(--green); font-weight: 600; text-decoration: none; word-break: break-all; }
.business-info a:hover { text-decoration: underline; }

/* ---------- Σύνδεσμος προς το προφίλ παραγωγού ---------- */
.producer-link {
    display: flex; align-items: center; gap: 13px; width: 100%;
    background: none; border: none; cursor: pointer; text-align: left;
    font-family: var(--font-body); padding: 0; color: inherit;
    transition: var(--transition);
}
.producer-link:hover strong { color: var(--green); }
.producer-link-cta {
    margin-left: auto; display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; color: var(--green); white-space: nowrap;
}
.producer-link:hover .producer-link-cta { gap: 9px; }

/* ---------- Παράθυρο προφίλ παραγωγού ---------- */
/* ============================================
   ΓΝΩΡΙΣΤΕ ΤΟΥΣ ΠΑΡΑΓΩΓΟΥΣ
   ============================================ */
.meet-btn {
    margin-top: 14px;
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--green); color: #fff; border: none;
    border-radius: 50px; padding: 11px 22px; cursor: pointer;
    font-family: var(--font-body); font-size: 14px; font-weight: 600;
    transition: var(--transition);
}
.meet-btn:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
a.meet-btn { text-decoration: none; }

.modal-head { padding: 28px 30px 16px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-family: var(--font-display); font-size: 25px; color: var(--text); }
.modal-sub { font-size: 13.5px; color: var(--text-mid); margin-top: 5px; line-height: 1.55; }
/* ---------- Σήμανση συνεταιρισμού ----------
   Ξεχωρίζει τον συνεταιρισμό από τον μεμονωμένο παραγωγό, τόσο στη λίστα
   όσο και στο προφίλ. Ο τίτλος της κάρτας είναι ήδη η επωνυμία του
   συνεταιρισμού - το σήμα εξηγεί τι είναι. */
.coop-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(200, 151, 58, 0.14); color: var(--gold);
    border: 1px solid var(--gold);
    font-size: 10px; font-weight: 800; letter-spacing: 0.6px;
    text-transform: uppercase; padding: 3px 9px; border-radius: 20px;
    margin: 5px 0 2px;
}

/* Πλαίσιο γύρω από την αναζήτηση - ίδιο με της αρχικής. Χωρίς αυτό το
   πεδίο έμοιαζε «γυμνό»: το .filter-input είναι σκόπιμα χωρίς περίγραμμα
   και το περίγραμμα το δίνει πάντα το κουτί που το περιβάλλει. */
.meet-search-wrap {
    position: relative;
    background: var(--bg-white); border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); transition: var(--transition);
}
.meet-search-wrap:focus-within {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(92,138,45,0.12);
}
.meet-search-wrap i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-light); font-size: 13px; }
.meet-search-wrap .filter-input { width: 100%; padding: 13px 14px 13px 38px; }

/* Σελίδα λίστας παραγωγών */
.meet-page { max-width: 1200px; margin: 0 auto; }
.meet-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.meet-toolbar .meet-search-wrap { flex: 1 1 320px; max-width: 420px; }
.meet-total { font-size: 13.5px; color: var(--text-light); font-weight: 600; }

/* align-items: start -> η κάρτα παίρνει το ύψος του ΔΙΚΟΥ της περιεχομένου.
   Με stretch, όποια κάρτα είχε μικρότερο κείμενο άφηνε μεγάλο κενό κάτω
   από τον αριθμό των προϊόντων, μέχρι το ύψος της ψηλότερης της σειράς. */
/* Ίδιο μέγεθος για ΟΛΕΣ τις κάρτες: το align-items: stretch (προεπιλογή)
   τις ισώνει στο ύψος της ψηλότερης της σειράς, και το margin-top:auto
   στα κουμπιά τα κολλάει πάντα στο κάτω μέρος - έτσι τα κουμπιά όλων
   των καρτών πέφτουν στην ίδια γραμμή αντί να χοροπηδούν. */
.meet-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 16px; align-items: stretch;
}
.meet-card {
    position: relative; background: var(--bg-white);
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; transition: var(--transition);
    display: flex; flex-direction: column;
}
.meet-card:hover, .meet-card:focus-within {
    border-color: var(--green); box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
/* Ο σύνδεσμος καλύπτει το περιεχόμενο, όχι τα κουμπιά */
.meet-card-link {
    display: block; text-decoration: none; color: inherit;
    position: relative; flex: 1 1 auto;
}
.meet-card-link:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
/* Κουμπιά ενεργειών στο κάτω μέρος της κάρτας */
.meet-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 0 16px 14px; margin-top: auto;
}
.meet-actions .btn-outline {
    flex: 1 1 auto; justify-content: center; text-decoration: none;
    font-size: 12px; padding: 8px 12px; white-space: nowrap;
}
.meet-cover { height: 66px; background: var(--green-xlight); overflow: hidden; }
.meet-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meet-avatar {
    position: absolute; top: 40px; left: 16px;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--green); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px; overflow: hidden;
    box-shadow: 0 0 0 3px var(--bg-white);
}
.meet-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meet-body { padding: 22px 16px 14px; }
.meet-body h4 { font-family: var(--font-display); font-size: 15.5px; color: var(--text); margin-bottom: 2px; line-height: 1.3; }
.meet-place { display: block; font-size: 12px; color: var(--text-light); margin-bottom: 7px; }
.meet-place i { color: var(--green); margin-right: 4px; }
.meet-bio {
    font-size: 12.5px; color: var(--text-mid); line-height: 1.5; margin-bottom: 9px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.meet-cats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.meet-chip {
    background: var(--green-xlight); color: var(--green-dark);
    font-size: 10.5px; font-weight: 600; border-radius: 20px; padding: 3px 9px;
}
[data-theme="dark"] .meet-chip { color: var(--green-light); }
.meet-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    border-top: 1px solid var(--border); padding-top: 9px;
}
.meet-count { font-size: 12px; color: var(--text-light); }
.meet-count i { color: var(--green); margin-right: 5px; }
.meet-loading, .pr-loading {
    padding: 60px 20px; text-align: center; color: var(--text-light); font-size: 14px;
}
.pr-loading i { font-size: 26px; color: var(--green); }
@media (max-width: 560px) {
    .modal-head { padding: 22px 20px 14px; }
    .meet-grid { grid-template-columns: 1fr; }
    .meet-toolbar .meet-search-wrap { max-width: none; }
}

/* ============================================
   ΣΕΛΙΔΑ ΠΡΟΦΙΛ ΠΑΡΑΓΩΓΟΥ (producer.html)
   ============================================ */

/* Εξώφυλλο: πλήρες πλάτος, αμέσως κάτω από το header */
.pr-cover {
    height: 320px; overflow: hidden; position: relative;
    background: linear-gradient(135deg, var(--green-xlight), var(--green-light));
}
.pr-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Απαλό σκούρεμα στο κάτω μέρος ώστε να «κάθεται» ομαλά το avatar */
.pr-cover::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 45%;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.28));
    pointer-events: none;
}

.pr-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px 70px; }

/* Ταυτότητα: avatar ΑΡΙΣΤΕΡΑ, όνομα δίπλα, ενέργειες δεξιά */
.pr-identity {
    display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap;
    margin-top: -58px; position: relative; z-index: 2; margin-bottom: 26px;
}
.pr-avatar {
    width: 132px; height: 132px; border-radius: 50%; flex-shrink: 0;
    background: var(--green); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 42px; font-weight: 700;
    overflow: hidden; box-shadow: 0 0 0 6px var(--bg-white), var(--shadow-md);
}
.pr-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-identity-text { flex: 1 1 240px; padding-bottom: 8px; }
.pr-identity-text h1 {
    font-family: var(--font-display); font-size: 34px; font-weight: 700;
    color: var(--text); line-height: 1.15; margin-bottom: 5px;
}
.pr-role { font-size: 14px; color: var(--text-mid); }
.pr-role i { color: var(--green); margin-right: 5px; }
.pr-identity-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; }
.pr-identity-actions .btn-primary,
.pr-identity-actions .btn-outline { text-decoration: none; }

/* Καρτέλες */
.pr-tabs {
    display: flex; gap: 4px; border-bottom: 2px solid var(--border);
    margin-bottom: 28px; overflow-x: auto;
}
.pr-tab {
    display: inline-flex; align-items: center; gap: 9px;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
    color: var(--text-light); padding: 13px 20px; white-space: nowrap;
    border-bottom: 3px solid transparent; margin-bottom: -2px;
    transition: var(--transition);
}
.pr-tab:hover { color: var(--text); }
.pr-tab.active { color: var(--green); border-bottom-color: var(--green); }
.pr-tab-count {
    background: var(--green-xlight); color: var(--green-dark);
    font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 8px;
}
[data-theme="dark"] .pr-tab-count { color: var(--green-light); }

.pr-panel { display: none; }
.pr-panel.active { display: block; animation: prFade 0.3s ease; }
@keyframes prFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pr-panel h2 {
    font-family: var(--font-display); font-size: 24px; color: var(--text); margin-bottom: 16px;
}

/* Σχετικά με εμάς: κείμενο αριστερά, στοιχεία επικοινωνίας δεξιά */
.pr-about-grid { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
.pr-bio { font-size: 15.5px; line-height: 1.85; color: var(--text-mid); white-space: pre-line; }
.pr-muted { color: var(--text-light); font-style: italic; }
.pr-about-side {
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 22px 24px;
}
.pr-about-side h3 {
    font-family: var(--font-display); font-size: 17px; color: var(--text); margin-bottom: 14px;
}
.pr-info { list-style: none; padding: 0; margin: 0; }
.pr-info li {
    display: flex; align-items: flex-start; gap: 11px;
    font-size: 14px; color: var(--text-mid); padding: 9px 0;
    border-bottom: 1px solid var(--border); word-break: break-word;
}
.pr-info li:last-child { border-bottom: none; }
.pr-info i { color: var(--green); width: 16px; text-align: center; margin-top: 3px; flex-shrink: 0; }
.pr-info a { color: var(--green); text-decoration: none; }
.pr-info a:hover { text-decoration: underline; }

/* Χάρτης */
.pr-map-box {
    margin-top: 32px; background: var(--bg-white);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 22px 24px;
}
.pr-map-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.pr-map-head h3 { font-family: var(--font-display); font-size: 18px; color: var(--text); }
.pr-map-head i { color: var(--green); margin-right: 7px; }
.pr-gmaps {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--green-xlight); color: var(--green-dark);
    border-radius: 50px; padding: 9px 18px;
    font-size: 13.5px; font-weight: 600; text-decoration: none;
    transition: var(--transition);
}
.pr-gmaps:hover { background: var(--green); color: #fff; }
.pr-gmaps i { color: inherit; margin: 0; }
[data-theme="dark"] .pr-gmaps { color: var(--green-light); }
[data-theme="dark"] .pr-gmaps:hover { color: #fff; }
#prMap { height: 380px; border-radius: var(--radius-sm); z-index: 1; }

/* Τα προϊόντα μας */
.pr-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.pr-product {
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; transition: var(--transition);
    display: block; text-decoration: none; color: inherit;
    width: 100%; padding: 0; text-align: left; cursor: pointer;
    font-family: var(--font-body);
}
.pr-product:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--green); }
/* Ένδειξη «άνοιγμα» που εμφανίζεται στο πέρασμα του ποντικιού */
.pr-product-view {
    position: absolute; inset: auto 0 0 0;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: rgba(0,0,0,0.62); color: #fff;
    font-size: 12.5px; font-weight: 600; padding: 11px 10px;
    transform: translateY(100%); transition: transform 0.3s var(--ease);
}
.pr-product:hover .pr-product-view,
.pr-product:focus-visible .pr-product-view { transform: translateY(0); }
.pr-product-img { position: relative; height: 190px; overflow: hidden; background: var(--bg); }
.pr-product-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-product-bio {
    position: absolute; top: 12px; left: 12px;
    background: var(--green); color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
    border-radius: 20px; padding: 4px 10px;
}
.pr-product-body { padding: 18px 20px 20px; }
.pr-product-cat {
    display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--green); margin-bottom: 6px;
}
.pr-product-body h4 { font-family: var(--font-display); font-size: 18px; color: var(--text); margin-bottom: 7px; }
.pr-product-body p {
    font-size: 13.5px; color: var(--text-mid); line-height: 1.6; margin-bottom: 14px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pr-product-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 13px;
}
.pr-product-price { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--green); }
.pr-product-price small { font-size: 12px; color: var(--text-light); font-family: var(--font-body); font-weight: 400; }
.pr-product-loc { font-size: 12px; color: var(--text-light); }
.pr-product-loc i { color: var(--green); margin-right: 4px; }

@media (max-width: 940px) {
    .pr-about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .pr-cover { height: 200px; }
    .pr-wrap { padding: 0 20px 50px; }
    /* ΚΙΝΗΤΟ: σε στήλη. Πλάι-πλάι, το όνομα χωρούσε οριακά (σε οθόνη
       412px έμεναν 260px για 26px Playfair) και κατέληγε ΠΑΝΩ στη
       φωτογραφία του εξωφύλλου - λευκό γράμμα πάνω σε ανοιχτόχρωμη
       φωτογραφία - ενώ το avatar έκοβε το πρώτο γράμμα. Κάτω από το
       avatar έχει όλο το πλάτος και καθαρό φόντο. */
    .pr-identity {
        margin-top: -44px; gap: 12px;
        flex-direction: column; align-items: flex-start; flex-wrap: nowrap;
    }
    .pr-avatar { width: 96px; height: 96px; font-size: 32px; box-shadow: 0 0 0 5px var(--bg-white), var(--shadow-md); }
    .pr-identity-text { flex: none; width: 100%; padding-bottom: 0; }
    .pr-identity-text h1 { font-size: 26px; }
    .pr-identity-actions { width: 100%; padding-bottom: 0; }
    .pr-identity-actions .btn-primary, .pr-identity-actions .btn-outline { flex: 1 1 auto; justify-content: center; }
    .pr-products { grid-template-columns: 1fr; }
    #prMap { height: 280px; }
    .pr-tab { padding: 12px 14px; font-size: 13.5px; }
}

.producer-profile { padding: 34px; }

/* Εξώφυλλο: βγαίνει έξω από το padding ώστε να πιάνει όλο το πλάτος του
   παραθύρου, και ο avatar «κάθεται» πάνω του με λευκό δαχτυλίδι. */
.producer-cover {
    margin: -34px -34px 0; height: 172px; overflow: hidden;
    background: var(--green-xlight);
}
.producer-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.producer-profile.has-cover .producer-profile-head {
    margin-top: -44px; position: relative; align-items: flex-end;
}
.producer-profile.has-cover .producer-avatar {
    box-shadow: 0 0 0 4px var(--bg-white), 0 6px 18px rgba(0,0,0,0.22);
}
.producer-profile.has-cover .producer-profile-head > div { padding-bottom: 4px; }
@media (max-width: 560px) {
    .producer-cover { margin: -24px -20px 0; height: 128px; }
    .producer-profile.has-cover .producer-profile-head { margin-top: -34px; }
}
.producer-profile-loading { padding: 60px; text-align: center; color: var(--text-light); font-size: 22px; }
.producer-profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.producer-avatar {
    width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: var(--green); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700;
}
.producer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.producer-profile-head h3 { font-family: var(--font-display); font-size: 26px; color: var(--text); margin-bottom: 3px; }
.producer-profile-role { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-light); }
.producer-profile-role i { color: var(--green); }
.producer-bio {
    font-size: 14.5px; color: var(--text-mid); line-height: 1.7;
    padding: 14px 16px; margin-bottom: 16px;
    background: var(--bg); border-radius: var(--radius-sm); border-left: 3px solid var(--green);
}
.producer-profile-info { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 18px; }
.producer-profile-info span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-mid); }
.producer-profile-info i { color: var(--green); width: 14px; text-align: center; }
.producer-profile-info a { color: var(--green); font-weight: 600; text-decoration: none; }
.producer-profile-info a:hover { text-decoration: underline; }
.producer-profile-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }

.producer-products-title {
    font-family: var(--font-display); font-size: 19px; color: var(--text);
    margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.producer-products-count {
    background: var(--green-xlight); color: var(--green);
    font-family: var(--font-body); font-size: 12px; font-weight: 700;
    padding: 2px 10px; border-radius: 20px;
}
.producer-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.producer-product {
    display: flex; gap: 11px; align-items: center; text-align: left;
    padding: 9px; cursor: pointer;
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-family: var(--font-body);
    transition: var(--transition);
}
.producer-product:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.producer-product img { width: 56px; height: 56px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
.producer-product-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.producer-product strong { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.producer-product small { font-size: 11px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; }
.producer-product em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--green); }
.producer-no-products { grid-column: 1/-1; text-align: center; color: var(--text-light); font-size: 14px; padding: 20px; }
@media (max-width: 560px) { .producer-profile { padding: 24px 20px; } }

/* Σκίαση πίσω από το μήνυμα cookies: το κάνει ορατό βήμα συγκατάθεσης
   χωρίς να μπλοκάρει την ανάγνωση της σελίδας από πίσω. */
/* Το πέπλο ΠΡΕΠΕΙ να δέχεται κλικ: με pointer-events:none τα κλικ περνούσαν
   από πίσω και άνοιγαν κατηγορίες ενώ ο διάλογος ήταν ανοιχτός. */
/* Το πέπλο ήταν 0.42 και η φωτογραφία του ήρωα διαπερνούσε: τα γράμματα
   του παραθύρου πάλευαν με χορτάρι και σύννεφα από πίσω. Πιο πυκνό, με
   ελαφρύ θόλωμα, ώστε το βλέμμα να πάει εκεί που πρέπει να αποφασίσει. */
.cookie-veil {
    position: fixed; inset: 0; z-index: 9400;
    background: rgba(8, 16, 5, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: cookieVeilIn 0.4s var(--ease);
}
@keyframes cookieVeilIn { from { opacity: 0; } to { opacity: 1; } }
.cookie-veil.hide { opacity: 0; transition: opacity 0.35s var(--ease); }

/* Σημείωση στη φόρμα μηνύματος όταν ο αποστολέας είναι συνδεδεμένος */
.msg-known {
    display: flex; align-items: center; gap: 10px;
    background: var(--green-xlight); border: 1px solid var(--green-light);
    border-radius: var(--radius-sm); padding: 12px 15px; margin-bottom: 18px;
    font-size: 13px; color: var(--text-mid);
}
.msg-known i { color: var(--green); }