/* =====================================================================
   EDICOLA POP - SKINS VETRINA PUBBLICA
   =====================================================================
   3 skin di colore + 3 layout di disposizione, indipendenti tra loro.
   Selezione: Settings::get('vetrina_skin') / Settings::get('vetrina_layout')
   Applicate via classe sul <body>: em-skin-* + em-layout-*
   ===================================================================== */


/* ============================================================
   SKIN 1 — EDICOLA (verde scuro + giallo + bianco)
   ============================================================ */
body.em-skin-edicola {
  --em-rosso: #0E5F3E;
  --em-bordeaux: #094329;
  --em-antracite: #1F2933;
  --em-bg: #FFFCF2;
  --em-bg-2: #F5F2E5;
  --em-white: #ffffff;
  --em-border: #E8E2C8;
  --em-text: #1F2933;
  --em-text-muted: #6B6B72;
  --em-success: #1F7A3A;
  --em-info: #0B5394;
  --em-warning: #F5C518;
  --em-danger: #B0001F;
}
body.em-skin-edicola .em-header {
  background: #0E5F3E;
  border-bottom: 4px solid #F5C518;
}
body.em-skin-edicola .em-header__logo,
body.em-skin-edicola .em-header__nav a,
body.em-skin-edicola .em-header__toggle {
  color: #FFFCF2;
}
body.em-skin-edicola .em-header__nav a:hover { color: #F5C518; }
body.em-skin-edicola .em-btn--primary {
  background: var(--em-rosso);
  color: #FFFCF2;
  border: 2px solid var(--em-rosso);
}
body.em-skin-edicola .em-btn--primary:hover {
  background: var(--em-bordeaux);
  border-color: var(--em-bordeaux);
}
body.em-skin-edicola .em-product-card__price { color: var(--em-rosso); }
body.em-skin-edicola .em-section__title,
body.em-skin-edicola .em-hero h1,
body.em-skin-edicola h1, body.em-skin-edicola h2 { color: var(--em-rosso); }
body.em-skin-edicola .em-hero {
  background: linear-gradient(135deg, #0E5F3E 0%, #094329 100%);
  color: #FFFCF2;
}
body.em-skin-edicola .em-hero h1 { color: #F5C518; }
body.em-skin-edicola .em-product-card__badge--new { background: #F5C518; color: #1F2933; }
body.em-skin-edicola .em-footer {
  background: var(--em-rosso);
  color: #FFFCF2;
}
body.em-skin-edicola .em-footer a,
body.em-skin-edicola .em-footer__col a { color: #F5C518; }


/* ============================================================
   SKIN 2 — CARTA & INCHIOSTRO (beige + nero + rosso magazine)
   IMPORTANTE: header chiaro -> link e logo SCURI, non bianchi
   ============================================================ */
body.em-skin-carta {
  --em-rosso: #C8102E;
  --em-bordeaux: #8B0029;
  --em-antracite: #1A1815;
  --em-bg: #F5F0E6;
  --em-bg-2: #EDE6D6;
  --em-white: #FAF6EC;
  --em-border: #D8CFB8;
  --em-text: #1A1815;
  --em-text-muted: #6B5A4A;
  --em-success: #2E5C3A;
  --em-info: #2C5F8B;
  --em-warning: #B5832A;
  --em-danger: #8B0029;
}
body.em-skin-carta { font-family: Georgia, 'Times New Roman', serif; }

body.em-skin-carta .em-header {
  background: #FAF6EC;
  border-bottom: 3px double #1A1815;
}
body.em-skin-carta .em-header__logo {
  font-family: Georgia, serif;
  font-style: italic;
  color: #1A1815;
}
body.em-skin-carta .em-header__logo span { color: #C8102E; }
body.em-skin-carta .em-header__nav a { color: #1A1815; }
body.em-skin-carta .em-header__nav a:hover { color: #C8102E; }
body.em-skin-carta .em-header__toggle { color: #1A1815; }
body.em-skin-carta .em-header__toggle:hover { background: rgba(0,0,0,0.06); }

body.em-skin-carta .em-header__search input[type="search"] {
  border: 1px solid #D8CFB8;
  background: #ffffff;
  color: #1A1815;
}
body.em-skin-carta .em-header__search input[type="search"]::placeholder { color: #8B7B68; }
body.em-skin-carta .em-header__search input[type="search"]:focus {
  background: #ffffff;
  border-color: #C8102E;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18);
}
body.em-skin-carta .em-header__search button { color: #6B5A4A; }
body.em-skin-carta .em-header__search button:hover {
  color: #1A1815;
  background: rgba(0,0,0,0.05);
}

body.em-skin-carta .em-btn--primary {
  background: var(--em-antracite);
  color: var(--em-white);
  border: 2px solid var(--em-antracite);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
body.em-skin-carta .em-btn--primary:hover {
  background: var(--em-rosso);
  border-color: var(--em-rosso);
}
body.em-skin-carta .em-product-card {
  border: 1px solid var(--em-border);
  border-radius: 0;
  background: var(--em-white);
}
body.em-skin-carta .em-product-card__title {
  font-family: Georgia, serif;
  color: var(--em-antracite);
}
body.em-skin-carta .em-product-card__cat { color: var(--em-rosso); }
body.em-skin-carta .em-product-card__price {
  color: var(--em-rosso);
  font-family: Georgia, serif;
  font-weight: 700;
}
body.em-skin-carta .em-section__title {
  font-family: Georgia, serif;
  color: var(--em-antracite);
  border-bottom: 2px solid var(--em-rosso);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 6px;
}
body.em-skin-carta .em-section__link { color: var(--em-rosso); }
body.em-skin-carta .em-hero {
  background: var(--em-bg);
  color: var(--em-antracite);
  border-bottom: 1px solid var(--em-border);
}
body.em-skin-carta .em-hero h1 {
  color: var(--em-antracite);
  font-family: Georgia, serif;
  font-style: italic;
}
body.em-skin-carta .em-cat-tile {
  background: var(--em-white);
  color: var(--em-antracite);
  border: 1px solid var(--em-border);
  border-radius: 0;
}
body.em-skin-carta .em-cat-tile:hover { border-color: var(--em-rosso); color: var(--em-rosso); }
body.em-skin-carta .em-cat-tile__count { color: var(--em-text-muted); }

body.em-skin-carta .em-footer {
  background: var(--em-antracite);
  color: var(--em-bg);
}
body.em-skin-carta .em-footer a,
body.em-skin-carta .em-footer__col a { color: var(--em-bg); }
body.em-skin-carta .em-footer__col h4 { color: var(--em-bg); }


/* ============================================================
   SKIN 3 — MATTINO (celeste polvere + arancio mattone + bianco)
   IMPORTANTE: header chiaro -> link e logo SCURI, non bianchi
   ============================================================ */
body.em-skin-mattino {
  --em-rosso: #C66B3D;
  --em-bordeaux: #9B4F2C;
  --em-antracite: #2C3E50;
  --em-bg: #F4F8FB;
  --em-bg-2: #DDE7EE;
  --em-white: #ffffff;
  --em-border: #C8D6E0;
  --em-text: #2C3E50;
  --em-text-muted: #6B7C8B;
  --em-success: #2E7D5F;
  --em-info: #4A90B8;
  --em-warning: #D69E2E;
  --em-danger: #C53030;
}
body.em-skin-mattino .em-header {
  background: #ffffff;
  border-bottom: 1px solid var(--em-border);
  box-shadow: 0 2px 8px rgba(74, 144, 184, 0.08);
}
body.em-skin-mattino .em-header__logo { color: var(--em-antracite); }
body.em-skin-mattino .em-header__logo span { color: var(--em-rosso); }
body.em-skin-mattino .em-header__nav a { color: var(--em-antracite); }
body.em-skin-mattino .em-header__nav a:hover { color: var(--em-rosso); }
body.em-skin-mattino .em-header__toggle { color: var(--em-antracite); }
body.em-skin-mattino .em-header__toggle:hover { background: rgba(44, 62, 80, 0.08); }

body.em-skin-mattino .em-header__search input[type="search"] {
  border: 1px solid var(--em-border);
  background: #ffffff;
  color: var(--em-antracite);
}
body.em-skin-mattino .em-header__search input[type="search"]::placeholder { color: var(--em-text-muted); }
body.em-skin-mattino .em-header__search input[type="search"]:focus {
  background: #ffffff;
  border-color: var(--em-rosso);
  box-shadow: 0 0 0 3px rgba(198, 107, 61, 0.20);
}
body.em-skin-mattino .em-header__search button { color: var(--em-text-muted); }
body.em-skin-mattino .em-header__search button:hover {
  color: var(--em-antracite);
  background: rgba(44, 62, 80, 0.05);
}

body.em-skin-mattino .em-btn--primary {
  background: var(--em-rosso);
  color: #ffffff;
  border: 2px solid var(--em-rosso);
  border-radius: 100px;
}
body.em-skin-mattino .em-btn--primary:hover {
  background: var(--em-bordeaux);
  border-color: var(--em-bordeaux);
}
body.em-skin-mattino .em-product-card {
  border: 1px solid var(--em-border);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(74, 144, 184, 0.06);
  background: #ffffff;
}
body.em-skin-mattino .em-product-card:hover {
  box-shadow: 0 6px 20px rgba(74, 144, 184, 0.18);
  transform: translateY(-2px);
  transition: all 0.2s ease;
  border-color: var(--em-rosso);
}
body.em-skin-mattino .em-product-card__title { color: var(--em-antracite); }
body.em-skin-mattino .em-product-card__cat { color: var(--em-rosso); }
body.em-skin-mattino .em-product-card__price { color: var(--em-rosso); }
body.em-skin-mattino .em-section__title {
  color: var(--em-antracite);
  border-bottom: 3px solid var(--em-rosso);
  display: inline-block;
  padding-bottom: 4px;
}
body.em-skin-mattino .em-section__link { color: var(--em-rosso); }
body.em-skin-mattino .em-hero {
  background: linear-gradient(135deg, #DDE7EE 0%, #F4F8FB 100%);
  color: var(--em-antracite);
}
body.em-skin-mattino .em-hero h1 { color: var(--em-antracite); }
body.em-skin-mattino .em-cat-tile {
  background: #ffffff;
  color: var(--em-antracite);
  border: 1px solid var(--em-border);
  border-radius: 14px;
}
body.em-skin-mattino .em-cat-tile:hover {
  border-color: var(--em-rosso);
  color: var(--em-rosso);
  box-shadow: 0 4px 14px rgba(198, 107, 61, 0.15);
}
body.em-skin-mattino .em-cat-tile__count { color: var(--em-text-muted); }

body.em-skin-mattino .em-footer {
  background: var(--em-antracite);
  color: var(--em-bg);
}
body.em-skin-mattino .em-footer a,
body.em-skin-mattino .em-footer__col a { color: var(--em-bg); }
body.em-skin-mattino .em-footer__col h4 { color: var(--em-bg); }


/* ============================================================
   LAYOUTS — disposizione card prodotti in homepage e categoria
   ============================================================ */

/* COMPACT GRID — 4-5 colonne, card piccole, focus volume */
body.em-layout-compact .em-product-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
body.em-layout-compact .em-product-card__body { padding: 10px; }
body.em-layout-compact .em-product-card__title {
  font-size: 14px;
  line-height: 1.3;
}
body.em-layout-compact .em-product-card__price { font-size: 16px; }

/* MAGAZINE — prima card grande, altre alternate piccole */
body.em-layout-magazine .em-product-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
body.em-layout-magazine .em-product-grid > .em-product-card:first-child {
  grid-column: span 4;
  grid-row: span 2;
}
body.em-layout-magazine .em-product-grid > .em-product-card:first-child .em-product-card__media {
  aspect-ratio: 16 / 10;
}
body.em-layout-magazine .em-product-grid > .em-product-card:first-child .em-product-card__title {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}
body.em-layout-magazine .em-product-grid > .em-product-card:not(:first-child) {
  grid-column: span 2;
}
@media (max-width: 800px) {
  body.em-layout-magazine .em-product-grid {
    grid-template-columns: 1fr 1fr;
  }
  body.em-layout-magazine .em-product-grid > .em-product-card:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }
  body.em-layout-magazine .em-product-grid > .em-product-card:not(:first-child) {
    grid-column: span 1;
  }
}