/**
 * eBoots — Pagina Collezione / archivio prodotti
 * ----------------------------------------------
 * Stile del template woocommerce/archive-product.php (override child).
 * Layout = sketch 006 variante C ("Premium denso"), approvata.
 * Caricato solo su archivi prodotto: is_shop() || is_product_taxonomy().
 * Si appoggia ai token (tokens.css) e a .eb-card (base.css); community = players.css.
 *
 * Gutter: NON su .eb-shop (così la community .eb-players resta a banda piena
 * tra le due griglie), ma sui singoli blocchi → box 1200 centrato.
 */

.eb-shop {
	background: var(--bg);
	color: var(--txt);
	font-family: var(--font-ui);
	padding-bottom: var(--space-8);
}

/* Gutter condiviso: box 1200 centrato. */
.eb-shop__hero,
.eb-shop__tabs,
.eb-shop__filters,
.eb-shop__metarow,
.eb-shop__grid,
.eb-shop__empty,
.eb-shop .woocommerce-pagination {
	padding-inline: var(--space-4);
}
.eb-support { margin-inline: var(--space-4); }

@media (min-width: 768px) {
	.eb-shop__hero,
	.eb-shop__tabs,
	.eb-shop__filters,
	.eb-shop__metarow,
	.eb-shop__grid,
	.eb-shop__empty,
	.eb-shop .woocommerce-pagination {
		padding-inline: max(var(--space-8), calc((100% - 1200px) / 2));
	}
	.eb-support { margin-inline: max(var(--space-8), calc((100% - 1200px) / 2)); }
}

/* ------------------------------------------------------------------------
   1. HERO COLLEZIONE — banda piena, boot in evidenza
   ------------------------------------------------------------------------ */
.eb-shop__hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 200px;
	padding-block: var(--space-5);
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 78% 45%, rgba(43, 230, 163, 0.16), transparent 55%),
		radial-gradient(80% 80% at 12% 18%, rgba(199, 247, 63, 0.14), transparent 55%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 20px),
		#070707;
}
.eb-shop__hero-body {
	position: relative;
	z-index: 1; /* titolo sempre sopra la media, anche se i box si sfiorano */
	max-width: 58%;
}
.eb-shop__hero-kicker {
	margin: 0 0 var(--space-2);
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--font-d);
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}
.eb-shop__hero-title {
	margin: 0;
	font-family: var(--font-d);
	font-weight: 800;
	font-size: clamp(2.4rem, 11vw, 4.5rem);
	line-height: 0.88;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--txt);
}
.eb-shop__hero-media {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 42%; /* 58% body + 42% media = 100%: nessuna collisione col titolo */
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
/* Foto hero DEDICATA (campo "Immagine hero" del termine): full-bleed con velo
   scuro sfumato, titolo sopra a sinistra — stesso pattern delle card collezione.
   Senza immagine hero resta il glow (niente più foto card riciclata e ruotata). */
.eb-shop__hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center; /* il soggetto "vive" a destra, il titolo a sinistra */
}
.eb-shop__hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.55) 48%, rgba(0, 0, 0, 0.18) 100%);
}
.eb-shop__hero.has-photo { min-height: 240px; }
.eb-shop__hero-glow {
	width: 80%;
	height: 70%;
	background: radial-gradient(70% 70% at 60% 45%, rgba(199, 247, 63, 0.22), transparent 65%);
}

@media (min-width: 768px) {
	.eb-shop__hero { min-height: 300px; padding-block: var(--space-7); }
	.eb-shop__hero.has-photo { min-height: 340px; }
}

/* ------------------------------------------------------------------------
   2. TAB COLLEZIONI — solo modelli, giustificate a tutta larghezza
   ------------------------------------------------------------------------ */
.eb-shop__tabs {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: 1px solid var(--line);
}
.eb-shop__tabs::-webkit-scrollbar { display: none; }
.eb-shop__tab {
	flex: 0 1 auto;
	padding: var(--space-3) var(--space-1);
	font-family: var(--font-d);
	font-weight: 700;
	font-size: clamp(0.82rem, 3.4vw, 1.05rem);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.eb-shop__tab:hover { color: var(--txt); }
.eb-shop__tab.is-active { color: var(--txt); border-bottom-color: var(--volt); }

/* ------------------------------------------------------------------------
   3. FILTRO TERRENO — FG/AG/SG a tutta larghezza, icona + sottotitolo
   ------------------------------------------------------------------------ */
.eb-shop__filters { margin-top: var(--space-5); }
.eb-shop__filters-label {
	display: block;
	margin-bottom: var(--space-3);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.eb-shop__chips {
	display: flex;
	gap: var(--space-3);
}
.eb-shop__chip {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-width: 0;
	padding: var(--space-3) var(--space-4);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	overflow: hidden; /* contiene la foto full-bleed (variante has-photo) */
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.eb-shop__chip:hover { border-color: var(--line-strong); }
.eb-shop__chip-ico {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	color: var(--muted);
	transition: color 0.15s ease;
}
/* Variante foto (immagine del termine da admin): full-bleed sfumata come le
   card collezione della home (eb-line-card), testo sopra lo scrim. */
.eb-shop__chip-img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center; /* la foto "vive" a destra, il testo a sinistra */
}
.eb-shop__chip-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.16) 100%);
}
.eb-shop__chip-txt,
.eb-shop__chip-ico { position: relative; z-index: 2; }
.eb-shop__chip.has-photo { min-height: 64px; }
.eb-shop__chip-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.eb-shop__chip-abbr {
	font-family: var(--font-d);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.03em;
	color: var(--txt);
}
.eb-shop__chip-desc {
	font-size: 0.66rem;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.eb-shop__chip.has-photo .eb-shop__chip-desc { color: #cfcfcf; }
.eb-shop__chip.is-active { border-color: var(--volt); background: rgba(199, 247, 63, 0.07); }
.eb-shop__chip.is-active .eb-shop__chip-ico,
.eb-shop__chip.is-active .eb-shop__chip-abbr,
.eb-shop__chip.is-active .eb-shop__chip-desc { color: var(--volt); }
/* Attivo con foto: bordo volt + velo volt sopra lo scrim (il testo resta leggibile). */
.eb-shop__chip.has-photo.is-active .eb-shop__chip-scrim {
	background:
		linear-gradient(rgba(199, 247, 63, 0.10), rgba(199, 247, 63, 0.10)),
		linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.16) 100%);
}

/* Filtro terreno: su mobile i 3 chip impilati a tutta larghezza (in riga da 3
   la descrizione troncava a "Terren…"); da 640px tornano affiancati. */
.eb-shop__chips--terrain { flex-direction: column; }
.eb-shop__chips--terrain .eb-shop__chip-desc { white-space: normal; }
@media (min-width: 640px) {
	.eb-shop__chips--terrain { flex-direction: row; }
}

/* Chip collezione (Offerte): solo testo, vanno a capo su mobile invece di stringersi. */
.eb-shop__chips--coll { flex-wrap: wrap; }
.eb-shop__chips--coll .eb-shop__chip { flex: 1 1 auto; }
.eb-shop__chip--text { justify-content: center; text-align: center; }
.eb-shop__chip--text .eb-shop__chip-abbr { font-size: 0.9rem; }

/* ------------------------------------------------------------------------
   4. RIGA META — conteggio (sotto le liste)
   ------------------------------------------------------------------------ */
.eb-shop__metarow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-5);
	padding-block: var(--space-4);
	border-bottom: 1px solid var(--line);
}
.eb-shop__count {
	margin: 0;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--txt);
}

/* ------------------------------------------------------------------------
   5. GRIGLIA — aggiunge colonne man mano che cresce lo schermo (2 → 5)
   ------------------------------------------------------------------------ */
/* 2 colonne (mobile) → 4 (desktop). NIENTE 3 o 5: la community è incastrata
   dopo le prime 4 card, quindi 4 deve sempre formare righe COMPLETE (2×2 o 1×4).
   Con 3 o 5 colonne la prima riga resterebbe "monca" e il grande blocco community
   farebbe sembrare che ci siano solo quelle 4 scarpe. */
.eb-shop__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	margin-block: var(--space-5);
}
@media (min-width: 768px) {
	.eb-shop__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
}

/* Community incastrata tra le righe di prodotti: più compatta che sulla home.
   Le card player sono in formato verticale (1:2): a piena larghezza diventano
   altissime e dominano la pagina ("sembra finita"). Qui restano una striscia
   scrollabile di card ~190px così i prodotti riprendono subito sotto.
   Sulla home (.eb-players fuori da .eb-shop) restano invariate. */
.eb-shop .eb-players__title-line { display: inline; } /* titolo su una sola riga (lo spazio tra le due parti viene dal whitespace nel markup) */
.eb-shop .eb-players__join { display: none; } /* niente CTA "Taggaci" nello shop */
@media (min-width: 768px) {
	.eb-shop .eb-players { padding-block: var(--space-6); }
	.eb-shop .eb-players__card { flex: 0 0 190px; }
}

.eb-shop__empty { margin: var(--space-7) 0; color: var(--muted); font-size: 1rem; }

/* ------------------------------------------------------------------------
   Paginazione
   ------------------------------------------------------------------------ */
.eb-shop .woocommerce-pagination { margin-top: var(--space-7); text-align: center; }
.eb-shop .woocommerce-pagination ul {
	display: inline-flex; flex-wrap: wrap; justify-content: center;
	gap: var(--space-2); margin: 0; padding: 0; border: 0; list-style: none;
}
.eb-shop .woocommerce-pagination ul li { margin: 0; border: 0; overflow: visible; }
.eb-shop .woocommerce-pagination ul li .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 0.6em;
	font-family: var(--font-d); font-weight: 700; font-size: 0.95rem;
	color: var(--txt); background: var(--surface);
	border: 1px solid var(--line); border-radius: var(--radius-md);
	text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.eb-shop .woocommerce-pagination ul li a.page-numbers:hover { border-color: var(--line-strong); color: var(--volt); }
.eb-shop .woocommerce-pagination ul li .page-numbers.current { background: var(--volt); border-color: var(--volt); color: var(--bg); }
.eb-shop .woocommerce-pagination ul li .page-numbers.dots { background: transparent; border-color: transparent; color: var(--muted); }

/* ------------------------------------------------------------------------
   7. SUPPORTO PLAYERS
   ------------------------------------------------------------------------ */
.eb-support {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-7);
	padding: var(--space-5) var(--space-6);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}
.eb-support__ico {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; color: var(--volt);
	background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.eb-support__body { flex: 1 1 220px; }
.eb-support__title {
	margin: 0 0 0.25rem;
	font-family: var(--font-d); font-weight: 700; font-size: 1.3rem;
	text-transform: uppercase; color: var(--txt);
}
.eb-support__text { margin: 0; font-size: 0.95rem; color: var(--muted); }
/* Stile pill = utility .eb-btn--volt (base.css); qui solo il layout nella riga flex. */
.eb-support__cta { flex: 0 0 auto; }