@charset "UTF-8";
/**
 * Prassos Tyres - παλέτα χρωμάτων & κοινοί κανόνες σχεδίασης (design tokens)
 *
 * ΚΑΝΟΝΑΣ: όλα τα χρώματα του theme χρησιμοποιούνται ΜΟΝΟ μέσω αυτών των μεταβλητών,
 * π.χ. color: var(--prassos-red);
 * Αν χρειαστεί νέο χρώμα, δηλώνεται ΠΡΩΤΑ εδώ και μετά χρησιμοποιείται.
 *
 * ΚΑΝΟΝΑΣ: γωνίες, σκιές και εφέ είναι ΙΔΙΑ σε όλο το site και έρχονται ΜΟΝΟ από εδώ:
 * - Κουμπιά:        border-radius: var(--prassos-radius-md);
 *                   hover → transform: var(--prassos-hover-lift); box-shadow: var(--prassos-shadow-md);
 *                           background-image: var(--prassos-darken);  (σκουραίνει οποιοδήποτε χρώμα)
 * - Κυκλικά κουμπιά-εικονίδια: border-radius: var(--prassos-radius-round); ίδιο hover με τα κουμπιά
 * - Πεδία κειμένου: border-radius: var(--prassos-radius-pill); box-shadow: var(--prassos-shadow-sm);
 *                   focus → box-shadow: var(--prassos-shadow-sm), var(--prassos-focus-ring);
 * - Links κειμένου: στο hover αλλάζει ΜΟΝΟ το χρώμα (χωρίς κίνηση)
 * - Dropdown επιλογής: κλάση .prassos-select (components.css) — pill + shadow-sm, ετικέτα γκρι, τιμή έντονη, βελάκι ▾
 * - Μενού πλοήγησης: στο hover κόκκινη γραμμή 2px κάτω από το κείμενο που απλώνει από το κέντρο
 *                   (transform: scaleX(0) → scaleX(1)), χωρίς αλλαγή φόντου
 * - Όλα τα εφέ:     transition: ... var(--prassos-transition);
 */

:root {
	/* ---------- Χρώματα ---------- */

	/* Brand */
	--prassos-red: #c40d0d;          /* top bar header, ζώνη newsletter footer */
	--prassos-orange: #f38839;       /* αγαπημένα (ενεργό), hover icons προϊόντος */

	/* Σκούρα / φόντα */
	--prassos-black: #000000;        /* κάτω μπάρα footer, κείμενο */
	--prassos-dark: #191919;         /* μενού header, footer */
	--prassos-dark-button: #313537;  /* κουμπί "Σύγκριση" */

	/* Κείμενο σε λευκό φόντο */
	--prassos-text: #333333;
	--prassos-text-alt: #3a3a3a;
	--prassos-muted: #6b6b6b;        /* δευτερεύον κείμενο/ετικέτες σε λευκό φόντο (π.χ. «Επωνυμία» στον λογαριασμό) */

	/* Ανοιχτά */
	--prassos-white: #ffffff;        /* κείμενα μενού header, hover links footer */
	--prassos-light: #ededed;        /* τίτλοι μενού footer */
	--prassos-gray: #bfbfbf;         /* links footer */
	--prassos-bg-light: #f5f5f5;     /* απαλό φόντο ενοτήτων / πάνελ (π.χ. φόρμα επικοινωνίας) */

	/* Ενεργειακή σήμανση ΕΕ ελαστικών (κλίμακα A–E, επίσημα χρώματα) */
	--prassos-eu-a: #00a651;
	--prassos-eu-b: #50b848;
	--prassos-eu-c: #bfd730;
	--prassos-eu-d: #fff200;
	--prassos-eu-e: #fdb913;

	/* Ετικέτα ΕΕ (2020/740): κατανάλωση καυσίμου = πράσινο→κόκκινο, πρόσφυση σε βρεγμένο = σκούρο→ανοιχτό μπλε */
	--prassos-eu-fuel-a: #00a651;
	--prassos-eu-fuel-b: #8cc63f;
	--prassos-eu-fuel-c: #fff200;
	--prassos-eu-fuel-d: #fbb03b;
	--prassos-eu-fuel-e: #ed1c24;
	--prassos-eu-wet-a: #005fad;
	--prassos-eu-wet-b: #0083c9;
	--prassos-eu-wet-c: #3fa0da;
	--prassos-eu-wet-d: #7dbde8;
	--prassos-eu-wet-e: #b3d9f2;

	/* Καταστάσεις (σήματα κατάστασης, π.χ. παραγγελίες): χρώμα κειμένου + απαλό φόντο */
	--prassos-success: #1d7a3a;      /* ολοκληρωμένη / απεσταλμένη */
	--prassos-success-bg: #e8f4ec;
	--prassos-info: #1f5f9e;         /* τιμολογημένη */
	--prassos-info-bg: #e7f0f9;
	--prassos-warning: #b8660b;      /* σε επεξεργασία */
	--prassos-warning-bg: #fdf1e2;
	--prassos-danger-bg: #fbe9e9;    /* ακυρωμένη (κείμενο: --prassos-red) */
	--prassos-highlight-bg: #fff8e8;  /* απαλό τόνισμα γραμμής (π.χ. «διαφέρει» στη σύγκριση) */

	/* Διαφάνειες */
	--prassos-overlay-strong: rgba(0, 0, 0, 0.7);   /* σκούρο φίλτρο πάνω σε φωτογραφίες */
	--prassos-overlay-soft: rgba(0, 0, 0, 0.15);
	--prassos-overlay-medium: rgba(0, 0, 0, 0.45);  /* σκούρο φόντο πίσω από συρτάρια (μενού κινητού) */
	--prassos-border-on-dark: rgba(255, 255, 255, 0.15); /* λεπτές γραμμές/κύκλοι πάνω σε σκούρο φόντο */
	--prassos-overlay-light: rgba(255, 255, 255, 0.88);  /* ημιδιάφανο λευκό κουτί κειμένου πάνω σε φωτογραφίες */

	/* ---------- Γραμματοσειρά ---------- */
	--prassos-font: 'Roboto', Arial, sans-serif;   /* όλο το site (γενικός κανόνας στο header.php) */

	/* ---------- Σχήμα ---------- */
	--prassos-radius-sm: 4px;        /* badges, μικρά στοιχεία */
	--prassos-radius-md: 8px;        /* κουμπιά, κάρτες, social κουμπιά */
	--prassos-radius-pill: 999px;    /* πεδία κειμένου (αναζήτηση, email) */
	--prassos-radius-round: 50%;     /* κυκλικά κουμπιά-εικονίδια */

	/* ---------- Σκιές ---------- */
	--prassos-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);    /* πεδία, κάρτες σε ηρεμία */
	--prassos-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.18);   /* hover κουμπιών/καρτών, dropdowns */
	--prassos-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.25);  /* modals, αναδυόμενα */
	--prassos-focus-ring: 0 0 0 2px var(--prassos-dark);   /* focus σε πεδία */

	/* ---------- Εφέ ---------- */
	--prassos-transition: 0.25s ease;
	--prassos-hover-lift: translateY(-2px);
	--prassos-darken: linear-gradient(var(--prassos-overlay-soft), var(--prassos-overlay-soft));

	/* ---------- Διάταξη ---------- */
	/* Όλες οι ζώνες ξεκινούν από την ίδια κάθετη γραμμή:
	   max-width: var(--prassos-container); padding: 0 var(--prassos-gutter); margin: 0 auto; */
	--prassos-container: 1920px;     /* σχεδόν όλο το πλάτος, όπως στο παλιό site */
	--prassos-gutter: 90px;          /* απόσταση περιεχομένου από τις άκρες */
	--prassos-container-narrow: 1200px; /* στενότερες, κεντραρισμένες ζώνες (π.χ. OC Features) */
	--prassos-reading-width: 780px;  /* στήλη κειμένου σελίδων απλού κειμένου (άνετο διάβασμα) */
	--prassos-section-space: 60px;   /* σταθερή απόσταση ανάμεσα σε ενότητες (blocks) της σελίδας */
	--prassos-home-section-pad: clamp(40px, 5vw, 72px); /* ΑΡΧΙΚΗ: κενό πάνω/κάτω σε κάθε block (2× ανάμεσα σε blocks) — components.css */

	/* Ύψος κύριας γραμμής header σε desktop (από 1024px). Σε κινητό μένει 55px.
	   Όλα τα στοιχεία που εξαρτώνται από το ύψος του header (dropdown, breadcrumb, φίλτρα...)
	   προσαρμόζονται αυτόματα — βλ. τέλος του template-parts/header/site-header.php */
	--prassos-header-h: 117px;           /* logo 97×97 + 10px πάνω/κάτω */
	--prassos-header-h-scrolled: var(--prassos-header-h); /* μετά από scroll: ίδιο ύψος, το header δεν μικραίνει (πριν: 70px) */
}

@media screen and (max-width: 1200px) {
	:root {
		--prassos-gutter: 45px;
	}
}

@media screen and (max-width: 900px) {
	:root {
		--prassos-gutter: 24px;
		--prassos-section-space: 40px;
	}
}