/**
 * Σκούρο μωβ φόντο σελίδας (canvas) — αίτημα πελάτη 2026-10-01 (χρώματα εφαρμογής Optima).
 *
 * Κανόνας: η σελίδα είναι μωβ (--color-canvas). Ό,τι κάθεται ΑΠΕΥΘΕΙΑΣ στο μωβ
 * (τίτλοι ενοτήτων, hero, εισαγωγικά κείμενα, breadcrumbs) παίρνει ανοιχτά χρώματα
 * (--color-on-canvas*). Κάρτες, φόρμες, πάνελ και μεγάλα κείμενα μένουν λευκά
 * με τα κανονικά χρώματα κειμένου.
 *
 * Φορτώνεται ΤΕΛΕΥΤΑΙΟ (inc/enqueue.php): αλλάζει μόνο tokens/χρώματα των components,
 * όχι διαστάσεις. Χωρίς αυτό το αρχείο (και με το παλιό --color-background) το site
 * γυρίζει στην ανοιχτή εμφάνιση.
 */

/* ==========================================================================
   Τίτλοι ενοτήτων (component section-heading)
   ========================================================================== */

.of-section-heading {
	--sh-title-color: var(--color-on-canvas);
}

.of-section-heading__text {
	color: var(--color-on-canvas-muted);
}

.of-section-heading__link,
.of-section-heading__link:visited {
	color: var(--color-on-canvas);
}

.of-section-heading__link:hover,
.of-section-heading__link:focus {
	color: var(--color-accent);
}

/* Ζώνες ενοτήτων: χωρίς δικό τους φόντο, φαίνεται το μωβ */
.of-section--surface,
.of-section--soft {
	background-color: transparent;
}

/* ==========================================================================
   Hero αρχικής
   ========================================================================== */

.of-hero {
	--hero-bg:
		radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--color-primary) 70%, transparent), transparent 38%),
		radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 28%),
		var(--color-canvas);
	--hero-btn-secondary-border: var(--color-canvas-line);
	--hero-orb-bg: var(--color-canvas-panel);
	--hero-orb-circle-bg: color-mix(in srgb, var(--color-accent) 12%, transparent);
	--hero-eyebrow-dot-ring: 0 0 0 4px color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.of-hero .of-hero__eyebrow {
	background-color: var(--color-canvas-raised);
	color: var(--color-on-canvas);
}

.of-hero .of-hero__title {
	color: var(--color-on-canvas);
}

.of-hero .of-hero__description {
	color: var(--color-on-canvas-muted);
}

.of-hero .of-hero__btn--secondary,
.of-hero .of-hero__btn--secondary:visited {
	border-color: var(--color-canvas-line);
	background-color: transparent;
	color: var(--color-on-canvas);
}

.of-hero .of-hero__btn--secondary:hover,
.of-hero .of-hero__btn--secondary:focus {
	border-color: var(--color-on-canvas);
	background-color: var(--color-canvas-raised);
	color: var(--color-on-canvas);
}

.of-hero .of-hero__trust-item {
	color: var(--color-on-canvas);
}

.of-hero .of-hero__orb {
	border-color: var(--color-canvas-line);
}

/* ==========================================================================
   Focus πληκτρολογίου: πορτοκαλί, ορατό και στο μωβ και στα λευκά πάνελ
   ========================================================================== */

:root {
	--focus-color: var(--color-accent-hover);
}

/* ==========================================================================
   Header: μωβ σε όλο το πλάτος (top bar, κύρια γραμμή, μενού, κινητό)
   Το πεδίο αναζήτησης μένει λευκό· mega menu και μενού κινητού μένουν λευκά πάνελ.
   ========================================================================== */

.of-header .of-mainbar,
.of-header .of-nav,
.of-header .of-mobilebar,
.of-header .of-mobile-search {
	border-bottom-color: var(--color-canvas-line);
	background-color: var(--color-canvas);
}

.of-header .of-topbar {
	background-color: var(--color-canvas-panel);
}

.of-header .of-logo,
.of-header .of-logo:hover,
.of-header .of-logo:focus {
	color: var(--color-on-canvas);
}

.of-header .of-logo__tagline {
	color: var(--color-on-canvas-muted);
}

.of-header .of-search {
	border-color: transparent;
}

.of-header .of-search:focus-within {
	border-color: var(--color-accent);
}

.of-header .of-action,
.of-header .of-action:focus,
.of-header .of-icon-btn,
.of-header .of-icon-btn:focus {
	color: var(--color-on-canvas);
}

.of-header .of-action:hover,
.of-header .of-action:focus-visible,
.of-header .of-icon-btn:hover,
.of-header .of-icon-btn:focus-visible {
	background-color: var(--color-canvas-raised);
	color: var(--color-on-canvas);
}

.of-header {
	--hdr-nav-hover-bg: var(--color-canvas-raised);
}

.of-header .of-nav__link,
.of-header .of-nav__link:focus {
	color: var(--color-on-canvas);
}

.of-header .of-nav__link:hover,
.of-header .of-nav__link[aria-expanded="true"],
.of-header .of-nav__item--highlight .of-nav__link {
	color: var(--color-accent);
}

/* ==========================================================================
   Αρχική: ενότητες με δικό τους ανοιχτό φόντο → μωβ
   ========================================================================== */

/* Σημεία σώματος: οι κάρτες μένουν ανοιχτές */
.of-body-parts {
	background-color: transparent;
}

/* Προϊόντα που αξίζει να δείτε */
.of-discover {
	--dp-bg: transparent;
}

/* Καθημερινή υποστήριξη: και το πάνελ κειμένου γίνεται μωβ */
.of-daily {
	--dl-copy-bg:
		radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 30%),
		var(--color-canvas-panel);

	background-color: transparent;
}

.of-daily .of-daily__panel {
	border-color: var(--color-canvas-line);
	background-color: var(--color-canvas);
}

.of-daily .of-daily__btn--secondary,
.of-daily .of-daily__btn--secondary:visited {
	color: var(--color-on-canvas);
}

.of-daily .of-daily__btn--secondary:hover,
.of-daily .of-daily__btn--secondary:focus {
	color: var(--color-accent);
}

/* Trust strip */
.of-trust {
	--tr-icon-border: var(--color-canvas-line);
	--tr-line: var(--border-width) solid var(--color-canvas-line);

	background-color: transparent;
}

.of-trust .of-trust__icon {
	background-color: var(--color-canvas-raised);
	color: var(--color-accent);
}

.of-trust .of-trust__title {
	color: var(--color-on-canvas);
}

.of-trust .of-trust__text {
	color: var(--color-on-canvas-muted);
}

.of-trust a.of-trust__item:hover .of-trust__icon {
	border-color: var(--color-accent);
}

/* ==========================================================================
   Footer: ίδιο μωβ με τη σελίδα, με λεπτή γραμμή για να ξεχωρίζει
   ========================================================================== */

.of-footer {
	border-top: var(--border-width) solid var(--color-canvas-line);
	background-color: var(--color-canvas);
}

/* ==========================================================================
   Σελίδες με την εμφάνιση του Astra (κατάστημα, προϊόν, καλάθι, ταμείο,
   λογαριασμός) — ΠΡΟΣΩΡΙΝΑ, μέχρι να γίνουν από τα mockups τους.
   Οι σελίδες που έχουν ήδη σχέδιο (body.of-woo-designed, inc/shop.php) εξαιρούνται.
   Τα χρώματα του Astra (global palette) γίνονται ανοιχτά μόνο μέσα στο κύριο
   περιεχόμενο (#primary) των σελίδων WooCommerce, ώστε να μην επηρεαστούν το mini-cart και άλλα λευκά πάνελ.
   ========================================================================== */

.woocommerce-page:not(.of-woo-designed) #primary {
	--ast-global-color-2: var(--color-on-canvas);
	--ast-global-color-3: var(--color-on-canvas-muted);
	--ast-global-color-8: var(--color-on-canvas-muted);

	color: var(--color-on-canvas-muted);
}

.woocommerce-page:not(.of-woo-designed) #primary :where(h1, h2, h3, h4, h5, h6, .entry-title, .page-title, .product_title, legend, th) {
	color: var(--color-on-canvas);
}

.woocommerce-page:not(.of-woo-designed) #primary :where(label, .woocommerce-result-count, .woocommerce-breadcrumb, .woocommerce-breadcrumb a) {
	color: var(--color-on-canvas-muted);
}

.woocommerce-page:not(.of-woo-designed) #primary .woocommerce-loop-product__title,
.woocommerce-page:not(.of-woo-designed) #primary .woocommerce-LoopProduct-link {
	color: var(--color-on-canvas);
}

.woocommerce-page:not(.of-woo-designed) #primary :where(.price, .amount) {
	color: var(--color-on-canvas);
}

.woocommerce-page:not(.of-woo-designed) #primary a:where(:not(.button, .of-btn, .wp-element-button, .wp-block-button__link)) {
	color: var(--color-on-canvas);
}

.woocommerce-page:not(.of-woo-designed) #primary a:where(:not(.button, .of-btn, .wp-element-button, .wp-block-button__link)):hover {
	color: var(--color-accent);
}

.woocommerce-page:not(.of-woo-designed) #primary :where(table, td, th, tr) {
	border-color: var(--color-canvas-line);
}

/* Σελιδοποίηση */
.woocommerce-page:not(.of-woo-designed) #primary .woocommerce-pagination :where(a, span) {
	border-color: var(--color-canvas-line);
	color: var(--color-on-canvas);
}

/* Κουμπιά του Astra/WooCommerce: πορτοκαλί (μωβ πάνω σε μωβ δεν ξεχωρίζει) */
.woocommerce-page:not(.of-woo-designed) #primary {
	--ast-global-color-0: var(--color-accent);
	--ast-global-color-1: var(--color-accent-hover);
}

/* Ταξινόμηση: λευκό πεδίο */
.woocommerce-page:not(.of-woo-designed) #primary .woocommerce-ordering select {
	background-color: var(--color-surface);
	color: var(--color-text);
}

/* Ετικέτες πάνω στη φωτογραφία (λευκές): σκούρο κείμενο */
.woocommerce-page:not(.of-woo-designed) #primary :where(.ast-onsale-card, .onsale, .ast-shop-product-out-of-stock) {
	color: var(--color-primary);
}

/* ==========================================================================
   Breadcrumbs (component)
   ========================================================================== */

.of-breadcrumbs {
	color: var(--color-on-canvas-muted);
}

.of-breadcrumbs__link:hover,
.of-breadcrumbs__link:focus,
.of-breadcrumbs__current {
	color: var(--color-on-canvas);
}

/* ==========================================================================
   «Η εταιρεία»: τίτλοι/κείμενα στο μωβ, «Σκοπός μας» σε μωβ πάνελ.
   Οι κάρτες «Οι αρχές μας» μένουν λευκές.
   ========================================================================== */

.of-company .of-company__title {
	color: var(--color-on-canvas);
}

.of-company .of-company__text {
	color: var(--color-on-canvas-muted);
}

.of-company .of-company-purpose {
	border: var(--border-width) solid var(--color-canvas-line);
	background-color: var(--color-canvas-panel);
}

/* ==========================================================================
   Σελίδες κειμένου: το κείμενο σε λευκό πάνελ (μεγάλα κείμενα διαβάζονται
   άνετα μόνο σε ανοιχτό φόντο). Πίνακας περιεχομένων: ήδη λευκός.
   ========================================================================== */

.of-text-page .text-page-content {
	box-sizing: border-box;
	padding: var(--tp-toc-padding);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--tp-toc-radius);
	background-color: var(--color-surface);
	box-shadow: var(--tp-toc-shadow);
}

@media (min-width: 768px) {
	.of-text-page .text-page-content {
		padding: var(--space-7);
	}
}

/* ==========================================================================
   «Επικοινωνία»: οι κάρτες στοιχείων/φόρμας μένουν λευκές· ο χάρτης έχει
   τίτλο πάνω στο μωβ.
   ========================================================================== */

.of-contact .of-contact-map .of-contact__title {
	color: var(--color-on-canvas);
}

.of-contact .of-contact-map__address {
	color: var(--color-on-canvas-muted);
}