/*
Theme Name: CN Garden (Astra Child)
Template: astra
Description: Child theme di Astra per l'ecommerce CN Garden. Design token, scheda prodotto in stile AgriEuro (costruita con hook e template override WooCommerce standard) e campi prodotto compilabili a mano o via import CSV. La struttura delle pagine statiche si costruisce con Elementor free seguendo GUIDA-ELEMENTOR.md.
Author: Loia Digital Agency
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: cngarden-child
*/

/* ==========================================================================
   Design token — copia questi stessi valori anche in Elementor come
   Global Colors / Global Fonts (Site Settings), cosi' tutto il sito li eredita.
   ========================================================================== */
:root {
	--cng-color-ink: #201D1A;          /* testo principale */
	--cng-color-ink-soft: #4A443C;     /* testo secondario */
	--cng-color-muted: #6E675C;        /* etichette, note */
	--cng-color-bg: #F7F4EF;           /* sfondo chiaro */
	--cng-color-surface: #FFFFFF;      /* card e riquadri */
	--cng-color-trust-bg: #EFE9DD;     /* fasce chiare (trust bar, value props) */
	--cng-color-forest: #16281C;       /* verde scuro (header utility, footer CTA) */
	--cng-color-forest-2: #234A32;     /* verde per gradiente hero */
	--cng-color-orange: #E8590C;       /* accento principale, CTA */
	--cng-color-orange-dark: #C74A05;  /* accento in hover */
	--cng-color-accent-light: #F2A65A; /* eyebrow / dettagli su sfondo scuro */
	--cng-color-footer-bg: #131210;    /* footer */
	--cng-color-success: #2F7A45;      /* disponibilita', conferme */
	--cng-color-border: #E2DCCE;       /* bordi chiari */

	--cng-radius-card: 16px;
	--cng-radius-control: 10px;
	--cng-shadow-card: 0 1px 2px rgba(32, 29, 26, 0.04), 0 8px 24px rgba(32, 29, 26, 0.06);

	--cng-space-xs: 6px;
	--cng-space-sm: 12px;
	--cng-space-md: 20px;
	--cng-space-lg: 32px;
	--cng-space-xl: 48px;

	--cng-font-display: 'Fraunces', Georgia, serif;
	--cng-font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   Stili base
   ========================================================================== */
body {
	font-family: var(--cng-font-body);
	color: var(--cng-color-ink);
	background: var(--cng-color-bg);
	line-height: 1.6;
}

h1, h2, h3, .cng-display {
	font-family: var(--cng-font-display);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

/* ==========================================================================
   Classi di utilita' da assegnare ai widget Elementor
   (tab Avanzate > CSS Classes, sul singolo elemento)
   ========================================================================== */
.cng-btn-primary {
	background: var(--cng-color-orange) !important;
	color: #fff !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
}

.cng-btn-secondary {
	background: transparent !important;
	border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
	color: #fff !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
}

.cng-section-trust {
	background: var(--cng-color-trust-bg) !important;
}

.cng-section-dark {
	background: var(--cng-color-ink) !important;
	color: #fff !important;
}

.cng-section-forest {
	background: var(--cng-color-forest) !important;
	color: #fff !important;
}

.cng-card {
	border-radius: var(--cng-radius-card) !important;
	border: 1px solid var(--cng-color-border) !important;
	overflow: hidden !important;
}

.cng-eyebrow {
	color: var(--cng-color-accent-light) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
}

/* Placeholder immagine: da usare finche' non ci sono le foto prodotto */
.cng-image-placeholder {
	background: linear-gradient(135deg, #DCE7D6, #B9CFAE) !important;
	border: 1.5px dashed rgba(0, 0, 0, 0.15) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	/* Senza !important: e' solo l'altezza di ripiego, quella scelta in
	   Elementor sul singolo contenitore deve poter vincere. */
	min-height: 190px;
}

/* ==========================================================================
   Pulsanti del tema (usati da scheda prodotto e griglie)
   ========================================================================== */
.cng-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	border: 1.5px solid transparent;
	border-radius: var(--cng-radius-control);
	font-family: var(--cng-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.cng-button-primary {
	background: var(--cng-color-orange);
	color: #fff;
}

.cng-button-primary:hover,
.cng-button-primary:focus {
	background: var(--cng-color-orange-dark);
	color: #fff;
}

.cng-button-dark {
	background: var(--cng-color-ink);
	color: #fff;
}

.cng-button-dark:hover,
.cng-button-dark:focus {
	background: var(--cng-color-forest);
	color: #fff;
}

.cng-button-ghost {
	background: transparent;
	border-color: var(--cng-color-border);
	color: var(--cng-color-ink);
}

.cng-button-ghost:hover,
.cng-button-ghost:focus {
	border-color: var(--cng-color-ink);
	background: var(--cng-color-surface);
	color: var(--cng-color-ink);
}

/* Accessibilita': la messa a fuoco da tastiera deve restare sempre visibile. */
.cng-button:focus-visible,
.cng-product a:focus-visible,
.cng-product button:focus-visible,
.cng-product input:focus-visible {
	outline: 2px solid var(--cng-color-orange);
	outline-offset: 2px;
}

/* ==========================================================================
   Grafico a barre del livello prodotto (usato in scheda e nelle griglie)
   ========================================================================== */
.cng-level-bars {
	display: inline-flex;
	align-items: flex-end;
	gap: 3px;
	height: 20px;
}

.cng-level-bar {
	display: inline-block;
	width: 6px;
	border-radius: 2px;
	background: #D3CCBC;
}

.cng-level-bar-1 { height: 40%; }
.cng-level-bar-2 { height: 55%; }
.cng-level-bar-3 { height: 70%; }
.cng-level-bar-4 { height: 85%; }
.cng-level-bar-5 { height: 100%; }

.cng-level-bar.is-active {
	background: var(--cng-color-forest);
}

.cng-level-bars-small {
	height: 14px;
	gap: 2px;
}

.cng-level-bars-small .cng-level-bar {
	width: 4px;
}

/* Rispetta chi ha chiesto meno animazioni a livello di sistema operativo. */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}