/**
 * ESS Framework — CSS Custom Framework for eShopping Salerno
 *
 * Includes: self-hosted fonts, design tokens, CSS reset, grid system.
 * Zero dependencies. Mobile-first. WCAG 2.2 AA compliant.
 * Editorial/squadrato (border-radius ~0). Palette logo-derived.
 *
 * @version 2.0.0
 */

/* ==========================================================================
   SELF-HOSTED FONTS — GDPR compliant (no Google Fonts CDN)
   Inter Tight (body), DM Serif Display (headings/editorial), JetBrains Mono (meta/eyebrow)
   ========================================================================== */

/* --- Inter Tight (variable, 400-600) --- */
@font-face {
	font-family: 'Inter Tight';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/inter-tight-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter Tight';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/inter-tight-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- DM Serif Display (400 regular) --- */
@font-face {
	font-family: 'DM Serif Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/dm-serif-display-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'DM Serif Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/dm-serif-display-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- DM Serif Display (400 italic) — per enfasi editoriale (es. "*territorio*") --- */
@font-face {
	font-family: 'DM Serif Display';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/dm-serif-display-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'DM Serif Display';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/dm-serif-display-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- JetBrains Mono (variable, 400-500) --- */
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Cormorant Garamond (500-600 + italic) — solo fallback wordmark logo.
     Non precaricato: caricato on-demand quando ess_site_logo() rende fallback testuale.
     In pratica il logo è SVG vectorized dal logo-package, quindi queste
     font-face entrano in gioco solo in assenza di custom_logo + SVG brand. --- */
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 500 600;
	font-display: swap;
	src: url('../fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 500 600;
	font-display: swap;
	src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: italic;
	font-weight: 500 600;
	font-display: swap;
	src: url('../fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: italic;
	font-weight: 500 600;
	font-display: swap;
	src: url('../fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   DESIGN TOKENS — Custom Properties (logo-derived palette)
   ========================================================================== */

:root {
	/* === BRAND — palette "Warm Mediterranean" (brand-guidelines v3) === */
	--ess-ink:          #161512;  /* Inchiostro — testo primario, wordmark logo, bordo sigillo */
	--ess-ink-soft:     #3a362f;  /* Testo secondario */
	--ess-sea:          #0e4d64;  /* Mare — wordmark, accento dominante, hero/seller band */
	--ess-sea-dark:     #083444;  /* Mare profondo — footer */
	--ess-terra:        #c5552d;  /* Terracotta — "Terra" del trinomio (S di Shopping + S di Salerno + claim), CTA primario */
	--ess-terra-dark:   #9e4323;  /* Hover CTA terracotta */
	--ess-limone:       #e8c341;  /* Limone Amalfi — accento caldo, ticker, highlight su fondi scuri */
	--ess-ulivo:        #6b7a3a;  /* Ulivo — terza onda del sigillo, badge IGP/DOP, verde natura */
	--ess-red:          #b33018;  /* Sale/alert più scuro e caldo */

	/* === ALIAS LEGACY (preservati per retrocompat, rimappati al nuovo hex) === */
	--ess-navy:         var(--ess-ink);
	--ess-navy-soft:    var(--ess-ink-soft);
	--ess-wave:         var(--ess-ulivo);    /* l'ex-wave diventa ulivo (ok per badge DOP/IGP) */
	--ess-orange:       var(--ess-terra);
	--ess-orange-dark:  var(--ess-terra-dark);
	--ess-gold:         var(--ess-limone);

	/* === NEUTRI (toni warm) === */
	--ess-muted:        #7a7469;  /* Meta text, labels */
	--ess-line:         #e5dfd1;  /* Hairline su ivory (anche su bianco) */
	--ess-line-strong:  #d6cfbd;  /* Border input/filtri */
	--ess-surface:      #f5f1e8;  /* Background sezioni alternate — tono "carta" chiaro */
	--ess-bg:           #ffffff;  /* Sfondo pagina — BIANCO (decisione utente) */

	/* === FEEDBACK === */
	--ess-ok:           #2f7a3a;  /* Successo (tono warm più verde) */
	--ess-error:        var(--ess-red);

	/* === TONE MAPPING (per placeholder/card in attesa di foto reali) === */
	--ess-tone-sea:       var(--ess-sea);
	--ess-tone-terra:     var(--ess-terra);
	--ess-tone-lemon:     var(--ess-limone);
	--ess-tone-olive:     var(--ess-ulivo);

	/* === ALIAS RETROCOMPATIBILI (mantengono validi i CSS esistenti: components/utilities/woocommerce/dokan/sss-integration) === */
	--ess-color-orange:        var(--ess-terra);
	--ess-color-orange-dark:   var(--ess-terra-dark);
	--ess-color-orange-light:  var(--ess-limone);
	--ess-color-orange-pale:   #faf0e4;
	--ess-color-orange-bg:     #f6e6d4;

	--ess-color-blue:          var(--ess-ink);
	--ess-color-blue-mid:      var(--ess-sea);
	--ess-color-blue-light:    var(--ess-ulivo);
	--ess-color-blue-pale:     #eef3f5;

	--ess-color-primary:       var(--ess-ink);
	--ess-color-primary-hover: var(--ess-sea-dark);
	--ess-color-primary-light: #eef3f5;
	--ess-color-accent:        var(--ess-terra);
	--ess-color-accent-hover:  var(--ess-terra-dark);

	--ess-color-text:          var(--ess-ink);
	--ess-color-text-sec:      var(--ess-ink-soft);
	--ess-color-text-ter:      var(--ess-muted);
	--ess-color-bg:            var(--ess-bg);
	--ess-color-bg-sec:        var(--ess-surface);
	--ess-color-bg-ter:        #ece7d7;
	--ess-color-border:        var(--ess-line);
	--ess-color-border-hover:  var(--ess-line-strong);
	--ess-color-white:         #ffffff;
	--ess-color-black:         #000000;

	--ess-color-neutral-50:    var(--ess-surface);
	--ess-color-neutral-100:   #ece7d7;
	--ess-color-neutral-200:   var(--ess-line);
	--ess-color-neutral-300:   var(--ess-line-strong);
	--ess-color-neutral-400:   var(--ess-muted);
	--ess-color-neutral-500:   #5a5349;
	--ess-color-neutral-600:   var(--ess-ink-soft);
	--ess-color-neutral-700:   #221f1b;
	--ess-color-neutral-800:   var(--ess-ink);
	--ess-color-neutral-900:   #0b0a09;

	--ess-color-success:       var(--ess-ok);
	--ess-color-success-light: #dcf2de;
	--ess-color-error:         var(--ess-red);
	--ess-color-danger:        var(--ess-red);
	--ess-color-error-light:   #fde5de;
	--ess-color-warning:       #c89310;
	--ess-color-warning-light: #fdf2c9;
	--ess-color-info:          var(--ess-ulivo);
	--ess-color-star:          var(--ess-terra);

	--ess-color-body-bg:       var(--ess-bg);
	--ess-color-body-text:     var(--ess-ink);
	--ess-color-heading:       var(--ess-ink);
	--ess-color-link:          var(--ess-ink);
	--ess-color-link-hover:    var(--ess-terra);
	--ess-color-card-bg:       #ffffff;
	--ess-color-input-bg:      #ffffff;
	--ess-color-input-border:  var(--ess-line-strong);
	--ess-color-focus-ring:    var(--ess-terra);

	/* === TIPOGRAFIA === */
	--ess-font-body:     'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--ess-font-serif:    'DM Serif Display', Georgia, serif;
	--ess-font-heading:  var(--ess-font-serif);
	--ess-font-mono:     'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
	--ess-font-wordmark: 'Cormorant Garamond', Cormorant, Garamond, Georgia, serif; /* solo logo wordmark (brand-guidelines) */

	--ess-weight-normal:   400;
	--ess-weight-medium:   500;
	--ess-weight-semibold: 600;
	--ess-weight-bold:     600;  /* Inter Tight max loaded */

	/* Scala tipografica editoriale */
	--ess-text-xs:   0.6875rem; /* 11px — eyebrow, meta mono */
	--ess-text-sm:   0.8125rem; /* 13px — body small */
	--ess-text-base: 0.9375rem; /* 15px — body default */
	--ess-text-md:   1rem;      /* 16px — body large */
	--ess-text-lg:   1.125rem;  /* 18px — H3 card */
	--ess-text-xl:   1.25rem;   /* 20px */
	--ess-text-2xl:  1.5rem;    /* 24px */
	--ess-text-3xl:  1.875rem;  /* 30px — stats hero */
	--ess-text-4xl:  2.5rem;    /* 40px — H2 sezione */
	--ess-text-5xl:  3rem;      /* 48px — H2 large */
	--ess-text-6xl:  4rem;      /* 64px — H1 categoria */
	--ess-text-7xl:  4.75rem;   /* 76px — H1 hero botteghe */

	--ess-leading-tight:      1.05;  /* H1/H2 serif */
	--ess-leading-tight-ui:   1.25;
	--ess-leading-normal:     1.55;  /* body */
	--ess-leading-loose:      1.75;

	--ess-tracking-tight-hero: -2px;   /* H1 hero 76px */
	--ess-tracking-tight:      -1.5px; /* H1 64px */
	--ess-tracking-tight-sm:   -0.8px; /* H2 */
	--ess-tracking-wide:       0.5px;
	--ess-tracking-wider:      1.2px;  /* eyebrow mono */

	/* === SPACING (scala 4px) === */
	--ess-space-0:  0;
	--ess-space-1:  0.25rem;
	--ess-space-2:  0.5rem;
	--ess-space-3:  0.75rem;
	--ess-space-4:  1rem;
	--ess-space-5:  1.25rem;
	--ess-space-6:  1.5rem;
	--ess-space-8:  2rem;
	--ess-space-10: 2.5rem;
	--ess-space-12: 3rem;
	--ess-space-14: 3.5rem;      /* 56px — padding sezione */
	--ess-space-16: 4rem;
	--ess-space-20: 5rem;

	/* === LAYOUT === */
	--ess-container-max:     1440px;
	--ess-container-padding: 1.5rem;  /* 24px mobile */
	--ess-container-padding-lg: 3rem; /* 48px desktop */
	--ess-content-width:     860px;
	--ess-sidebar-width:     280px;
	--ess-grid-gap:          1.125rem; /* 18px gap tra product card */

	/* === BORDER RADIUS (quasi nulla — design editoriale squadrato) === */
	--ess-radius-none: 0;
	--ess-radius-xs:   2px;
	--ess-radius-sm:   2px;       /* legacy alias → squared */
	--ess-radius-md:   2px;       /* legacy alias → squared */
	--ess-radius-lg:   2px;
	--ess-radius-xl:   2px;
	--ess-radius-full: 999px;     /* solo chip filtri + avatar rotondi */

	/* === SHADOWS === */
	--ess-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.05);
	--ess-shadow:       0 1px 3px rgba(0, 0, 0, 0.08);
	--ess-shadow-md:    0 2px 8px rgba(0, 0, 0, 0.08);
	--ess-shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.08);
	--ess-shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	--ess-shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	--ess-shadow-focus: 0 0 0 3px rgba(197, 85, 45, 0.25); /* terra alpha 25% */

	/* === TRANSITIONS === */
	--ess-ease:              cubic-bezier(0.2, 0.7, 0.3, 1);
	--ess-transition-fast:   150ms var(--ess-ease);
	--ess-transition-normal: 250ms var(--ess-ease);
	--ess-transition-slow:   350ms var(--ess-ease);

	/* === Z-index === */
	--ess-z-dropdown: 100;
	--ess-z-sticky:   200;
	--ess-z-overlay:  300;
	--ess-z-modal:    400;
	--ess-z-skip:     9999;
}

/* ==========================================================================
   CSS RESET — Based on Andy Bell + Josh Comeau
   ========================================================================== */

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

html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	line-height: var(--ess-leading-normal);
	font-family: var(--ess-font-body);
	font-size: var(--ess-text-base);
	color: var(--ess-color-body-text);
	background-color: var(--ess-color-body-bg);
	-webkit-font-smoothing: antialiased;
	font-feature-settings: 'ss01', 'cv11';
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
}

h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
	font-family: var(--ess-font-heading);
	font-weight: 400;
	color: var(--ess-color-heading);
	line-height: var(--ess-leading-tight);
	letter-spacing: var(--ess-tracking-tight-sm);
}

h1 { font-size: clamp(2.5rem, 1.75rem + 3.5vw, 4.75rem); letter-spacing: var(--ess-tracking-tight); }    /* 40px → 76px */
h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }                                                       /* 32px → 48px */
h3 { font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem); letter-spacing: -0.4px; }                    /* 22px → 28px */
h4 { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); letter-spacing: -0.3px; }                  /* 18px → 22px */
h5 { font-size: var(--ess-text-lg); letter-spacing: -0.2px; }
h6 { font-size: var(--ess-text-md); letter-spacing: 0; }

p {
	overflow-wrap: break-word;
}

a {
	color: var(--ess-color-link);
	text-decoration-skip-ink: auto;
	transition: color var(--ess-transition-fast);
}

a:hover {
	color: var(--ess-color-link-hover);
}

a:focus-visible {
	outline: 2px solid var(--ess-orange);
	outline-offset: 2px;
	border-radius: 2px;
}

ul, ol {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   EDITORIAL TYPOGRAPHY HELPERS
   ========================================================================== */

/* Eyebrow — etichetta mono UPPERCASE sopra i titoli di sezione */
.ess-eyebrow {
	font-family: var(--ess-font-mono);
	font-size: var(--ess-text-xs);
	font-weight: 400;
	letter-spacing: var(--ess-tracking-wider);
	text-transform: uppercase;
	color: var(--ess-orange);
	display: inline-block;
	margin-bottom: var(--ess-space-2);
}

.ess-eyebrow--muted { color: var(--ess-muted); }
.ess-eyebrow--navy  { color: var(--ess-navy); }
.ess-eyebrow--white { color: #ffffff; opacity: 0.85; }

/* Serif italic emphasis — per "territorio", "sola", "online" nei titoli hero */
.ess-italic-sea    { font-style: italic; color: var(--ess-sea); }
.ess-italic-orange { font-style: italic; color: var(--ess-orange); }
.ess-italic        { font-style: italic; }

/* Meta mono — riga secondaria sotto card/title, sempre uppercase */
.ess-meta-mono {
	font-family: var(--ess-font-mono);
	font-size: var(--ess-text-xs);
	letter-spacing: var(--ess-tracking-wide);
	text-transform: uppercase;
	color: var(--ess-muted);
}

/* Serif display utility (per prezzi grandi, numeri stat) */
.ess-serif { font-family: var(--ess-font-serif); font-weight: 400; }

/* ==========================================================================
   BUTTONS — variants dal design handoff
   ========================================================================== */

.ess-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ess-space-2);
	padding: 14px 24px;
	font-family: var(--ess-font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--ess-radius-none);
	cursor: pointer;
	transition: background var(--ess-transition-fast), color var(--ess-transition-fast), border-color var(--ess-transition-fast);
	line-height: 1;
}

.ess-btn:focus-visible {
	outline: 2px solid var(--ess-orange);
	outline-offset: 2px;
}

/* Primary: arancio pieno — CTA principale */
.ess-btn--primary {
	background: var(--ess-orange);
	color: #ffffff;
	border-color: var(--ess-orange);
	font-size: 12px;
	letter-spacing: 0.8px;
}
.ess-btn--primary:hover,
.ess-btn--primary:focus-visible {
	background: var(--ess-orange-dark);
	border-color: var(--ess-orange-dark);
	color: #ffffff;
}

/* Dark: navy pieno — CTA secondaria (es. "Esplora le botteghe") */
.ess-btn--dark {
	background: var(--ess-navy);
	color: #ffffff;
	border-color: var(--ess-navy);
}
.ess-btn--dark:hover,
.ess-btn--dark:focus-visible {
	background: #000000;
	border-color: #000000;
	color: #ffffff;
}

/* Outline: solo bordo navy */
.ess-btn--outline {
	background: transparent;
	color: var(--ess-navy);
	border-color: var(--ess-navy);
}
.ess-btn--outline:hover,
.ess-btn--outline:focus-visible {
	background: var(--ess-navy);
	color: #ffffff;
}

/* Ghost: testo arancio senza bordo */
.ess-btn--ghost {
	background: transparent;
	color: var(--ess-orange);
	padding: 10px 0;
	font-family: var(--ess-font-mono);
	letter-spacing: 1px;
}
.ess-btn--ghost:hover {
	color: var(--ess-orange-dark);
}

.ess-btn--block { width: 100%; }

/* ==========================================================================
   CARD — hover editoriale (squared, translateY -2px)
   ========================================================================== */

.ess-card {
	background: #ffffff;
	border: 1px solid var(--ess-line);
	border-radius: 0;
	transition: transform var(--ess-transition-fast), box-shadow var(--ess-transition-fast);
}
.ess-card:hover,
.ess-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--ess-shadow-card-hover);
}

/* ==========================================================================
   GRID SYSTEM
   ========================================================================== */

.ess-container {
	width: 100%;
	max-width: var(--ess-container-max);
	margin-inline: auto;
	padding-inline: var(--ess-container-padding);
}

@media (min-width: 1024px) {
	.ess-container {
		padding-inline: var(--ess-container-padding-lg);
	}
}

.ess-container--narrow { max-width: var(--ess-content-width); }

.ess-grid {
	display: grid;
	gap: var(--ess-grid-gap);
}

.ess-grid-cols-1,
.ess-grid-cols-2,
.ess-grid-cols-3,
.ess-grid-cols-4,
.ess-grid-cols-5 {
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.ess-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
	.ess-grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
	.ess-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
	.ess-grid-cols-5 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.ess-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
	.ess-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
	.ess-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
}

/* Product grid — 1 / 2 / 4 colonne */
.ess-product-grid {
	display: grid;
	gap: var(--ess-grid-gap);
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .ess-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .ess-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ess-product-grid { grid-template-columns: repeat(4, 1fr); } }

/* Layout con sidebar (240px / 280px + main) */
.ess-layout-sidebar {
	display: grid;
	gap: var(--ess-space-8);
	grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
	.ess-layout-sidebar {
		grid-template-columns: var(--ess-sidebar-width) 1fr;
	}
	.ess-layout-sidebar > .ess-sidebar { order: 0; }
	.ess-layout-sidebar > .ess-catalog { order: 1; }
}

/* Flexbox utilities */
.ess-flex { display: flex; }
.ess-flex-col { flex-direction: column; }
.ess-flex-wrap { flex-wrap: wrap; }
.ess-items-center { align-items: center; }
.ess-items-start { align-items: flex-start; }
.ess-items-end { align-items: flex-end; }
.ess-items-baseline { align-items: baseline; }
.ess-justify-center { justify-content: center; }
.ess-justify-between { justify-content: space-between; }
.ess-justify-end { justify-content: flex-end; }
.ess-gap-1 { gap: var(--ess-space-1); }
.ess-gap-2 { gap: var(--ess-space-2); }
.ess-gap-3 { gap: var(--ess-space-3); }
.ess-gap-4 { gap: var(--ess-space-4); }
.ess-gap-6 { gap: var(--ess-space-6); }
.ess-gap-8 { gap: var(--ess-space-8); }

/* Section padding helper (56px desktop / 32px mobile) */
.ess-section {
	padding-block: var(--ess-space-8);
}
@media (min-width: 1024px) {
	.ess-section { padding-block: var(--ess-space-14); }
}