/* =========================================================================
   EJ ART Store — home.css
   Stile editoriale / swiss. Bianco + nero + monospace per i dettagli tecnici.
   Font: Archivo (display/body) · Space Mono (label/prezzi/index)
   ========================================================================= */

:root {
	--ej-ink:        #111111;   /* nero testo */
	--ej-paper:      #ffffff;   /* bianco */
	--ej-mute:       #6b6b6b;   /* grigio testo secondario */
	--ej-line:       #e4e4e4;   /* linee/bordi sottili */
	--ej-line-strong:#111111;   /* bordi marcati */
	--ej-panel:      #f4f4f3;   /* grigino pannello hero/placeholder */
	--ej-black:      #0d0d0d;   /* blocco B2B */
	--ej-accent-y:   #ffe600;   /* giallo logo */
	--ej-accent-b:   #2b59ff;   /* blu logo */
	--ej-accent-g:   #34c759;   /* verde logo */

	--ej-wrap:       1240px;
	--ej-gap:        clamp(16px, 3vw, 40px);

	--ej-sans:       "Archivo", system-ui, sans-serif;
	--ej-mono:       "Space Mono", ui-monospace, monospace;
}

/* ---- reset leggero solo dentro la home -------------------------------- */
#ejart-home * { box-sizing: border-box; }

#ejart-home {
	font-family: var(--ej-sans);
	color: var(--ej-ink);
	background: var(--ej-paper);
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

#ejart-home .ej-wrap {
	max-width: var(--ej-wrap);
	margin-inline: auto;
	padding-inline: var(--ej-gap);
}

/* etichette monospace ricorrenti */
#ejart-home .ej-mono-label,
#ejart-home .ej-mono-index,
#ejart-home .ej-mono-link {
	font-family: var(--ej-mono);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ej-mute);
}
#ejart-home .ej-mono-link {
	color: var(--ej-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--ej-ink);
	padding-bottom: 2px;
	white-space: nowrap;
}
#ejart-home .ej-mono-link:hover { opacity: .6; }

/* ============================ TOPBAR ================================== */
.ej-topbar {
	background: var(--ej-ink);
	color: #fff;
}
.ej-topbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 34px;
	font-family: var(--ej-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.ej-topbar__inner span:last-child { color: #b9b9b9; }

/* ============================ HERO =================================== */
.ej-hero { border-bottom: 1px solid var(--ej-line); }
.ej-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 0;
	align-items: stretch;
}
.ej-hero__left  { padding: 56px 56px 56px 0; }
.ej-hero__feature {
	background: var(--ej-panel);
	padding: 40px;
	margin-right: calc( (100vw - var(--ej-wrap)) / -2 );  /* il pannello arriva a filo destro */
	padding-right: max(40px, calc( (100vw - var(--ej-wrap)) / 2 ));
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ej-eyebrow {
	display: flex;
	justify-content: space-between;
	font-family: var(--ej-mono);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ej-mute);
	margin-bottom: 36px;
}
.ej-eyebrow--rule { position: relative; }
.ej-eyebrow--rule::after { /* lineetta tra i due testi */
	content: "";
	position: absolute;
	left: 230px; right: 120px; top: 50%;
	height: 1px; background: var(--ej-line);
}

.ej-hero__title {
	font-family: var(--ej-sans);
	font-weight: 800;
	font-size: clamp(48px, 7vw, 104px);
	line-height: .92;
	letter-spacing: -0.02em;
	margin: 0 0 28px;
}
.ej-hero__title em {
	font-style: italic;
	font-weight: 800;
	color: var(--ej-mute);
}

.ej-hero__lead {
	font-size: 18px;
	max-width: 460px;
	color: #2b2b2b;
	margin: 0 0 40px;
}

.ej-hero__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.ej-hero__stats {
	display: flex;
	gap: 40px;
	margin-left: auto;
}
.ej-hero__stats div { display: flex; flex-direction: column; }
.ej-hero__stats strong { font-size: 26px; font-weight: 800; }
.ej-hero__stats span {
	font-family: var(--ej-mono);
	font-size: 11px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ej-mute);
}

/* feature card (prodotto in primo piano) */
.ej-feature__head {
	display: flex; justify-content: space-between; align-items: center;
}
.ej-pill {
	font-family: var(--ej-mono);
	font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
	border: 1px solid var(--ej-ink);
	border-radius: 999px;
	padding: 5px 12px;
	color: var(--ej-ink);
}
.ej-pill--sm { padding: 3px 9px; font-size: 10px; }

.ej-feature__media {
	display: block;
	aspect-ratio: 1 / 1;
	background: #fff;
	border: 1px solid var(--ej-line);
	overflow: hidden;
}
.ej-feature__media img { width: 100%; height: 100%; object-fit: contain; }

.ej-feature__row {
	display: flex; justify-content: space-between; align-items: flex-start;
	gap: 16px; margin-top: 6px;
}
.ej-feature__name {
	font-size: 30px; font-weight: 800; letter-spacing: -.01em; margin: 6px 0 0;
}
.ej-feature__specs {
	font-family: var(--ej-mono);
	font-size: 13px; color: var(--ej-mute); margin: 0;
}

/* prezzo composito */
.ej-cur  { font-family: var(--ej-mono); font-size: 14px; vertical-align: top; }
.ej-int  { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.ej-dec  { font-size: 16px; font-weight: 700; }
.ej-feature__price small,
.ej-card__price small {
	display: block;
	font-family: var(--ej-mono);
	font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--ej-mute); text-align: right; margin-top: 2px;
}

/* ============================ SEZIONI ================================ */
.ej-section { padding: 72px 0; border-bottom: 1px solid var(--ej-line); }

.ej-section__head {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: end;
	column-gap: 18px;
	margin-bottom: 44px;
}
.ej-section__kicker { grid-column: 2; align-self: start; }
.ej-section__title {
	grid-column: 2;
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 800; letter-spacing: -.02em; margin: 6px 0 0;
}
.ej-section__head .ej-mono-index { grid-row: 1 / 3; align-self: end; }
.ej-section__head .ej-mono-link  { grid-column: 3; grid-row: 1 / 3; align-self: end; }

/* placeholder immagine (se manca) */
.ej-ph {
	display: block; width: 100%; height: 100%;
	background:
		repeating-linear-gradient(45deg,#f0f0f0 0 10px,#f7f7f7 10px 20px);
}

/* ---- famiglie di prodotto -------------------------------------------- */
.ej-families__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--ej-line);
}
.ej-family {
	padding: 28px 28px 28px 0;
	border-right: 1px solid var(--ej-line);
	display: flex; flex-direction: column; gap: 14px;
}
.ej-family:first-child { padding-left: 0; }
.ej-family:not(:first-child) { padding-left: 28px; }
.ej-family:last-child { border-right: 0; }
.ej-family__top { display: flex; justify-content: space-between; }
.ej-family__media {
	display: block; aspect-ratio: 4 / 3; background: #fff;
	border: 1px solid var(--ej-line); overflow: hidden;
}
.ej-family__media img { width:100%; height:100%; object-fit: cover; }
.ej-family__name { font-size: 30px; font-weight: 800; margin: 6px 0 0; }
.ej-family__desc { color: var(--ej-mute); margin: 0; }
.ej-family .ej-mono-link { align-self: flex-start; margin-top: 4px; }

/* ---- best-seller cards ----------------------------------------------- */
.ej-best__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	border-top: 1px solid var(--ej-line);
	padding-top: 32px;
}
.ej-card { display: flex; flex-direction: column; gap: 10px; }
.ej-card__top { display: flex; justify-content: space-between; align-items: center; }
.ej-card__media {
	display: block; aspect-ratio: 1/1; background:#fff;
	border: 1px solid var(--ej-line); overflow: hidden; margin: 4px 0;
}
.ej-card__media img { width:100%; height:100%; object-fit: contain; }
.ej-card__sku { font-size: 11px; }
.ej-card__name { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.ej-card__foot {
	display: flex; justify-content: space-between; align-items: flex-end;
	margin-top: 8px;
}

/* bottone "Aggiungi" del loop WooCommerce */
#ejart-home .ej-card__add,
#ejart-home .ej-card .button {
	font-family: var(--ej-mono);
	font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
	border: 1px solid var(--ej-ink) !important;
	background: transparent !important;
	color: var(--ej-ink) !important;
	border-radius: 0 !important;
	padding: 10px 16px !important;
	transition: .15s;
}
#ejart-home .ej-card__add::after,
#ejart-home .ej-card .button::after { content: " →"; }
#ejart-home .ej-card__add:hover,
#ejart-home .ej-card .button:hover {
	background: var(--ej-ink) !important; color: #fff !important;
}

/* ============================ BOTTONI ================================ */
#ejart-home .ej-btn {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--ej-sans); font-weight: 600; font-size: 15px;
	text-decoration: none; border-radius: 0; padding: 14px 22px;
	transition: .15s; cursor: pointer; border: 1px solid var(--ej-ink);
}
#ejart-home .ej-btn--solid { background: var(--ej-ink); color: #fff; }
#ejart-home .ej-btn--solid:hover { background: #000; }
#ejart-home .ej-btn--ghost { background: transparent; color: var(--ej-ink); }
#ejart-home .ej-btn--ghost:hover { background: var(--ej-ink); color: #fff; }
#ejart-home .ej-btn--invert { background: #fff; color: var(--ej-ink); border-color:#fff; }
#ejart-home .ej-btn--invert:hover { background: var(--ej-accent-y); border-color: var(--ej-accent-y); }

/* ============================ USP (3 colonne) ======================== */
.ej-usp__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 48px; }
.ej-usp__col .ej-mono-index { display:block; margin-bottom: 18px; }
.ej-usp__col h3 { font-size: 27px; font-weight: 800; margin: 0 0 12px; letter-spacing:-.01em; }
.ej-usp__col p  { color: var(--ej-mute); margin: 0; max-width: 34ch; }

/* ============================ B2B (nero) ============================= */
.ej-b2b { background: var(--ej-black); color: #fff; }
.ej-b2b__inner { padding: 72px var(--ej-gap); }
.ej-b2b__head {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 28px;
}
.ej-b2b__head .ej-mono-label { color: #8d8d8d; }
.ej-b2b__title {
	font-size: clamp(40px, 6vw, 78px); font-weight: 800; line-height: .95;
	letter-spacing: -.02em; margin: 0 0 36px;
}
.ej-b2b__title em { font-style: italic; color: #8d8d8d; }
.ej-b2b__foot { display: flex; align-items: baseline; gap: 40px; }
.ej-b2b__foot .ej-mono-label { color: #cfcfcf; white-space: nowrap; }
.ej-b2b__foot p { color: #9a9a9a; margin: 0; max-width: 46ch; }

/* ============================ RESPONSIVE ============================= */
@media (max-width: 1024px) {
	.ej-hero__grid { grid-template-columns: 1fr; }
	.ej-hero__left { padding: 40px 0; }
	.ej-hero__feature { margin-right: 0; padding-right: 32px; }
	.ej-best__grid { grid-template-columns: repeat(2,1fr); }
	.ej-eyebrow--rule::after { display: none; }
}
@media (max-width: 720px) {
	.ej-topbar__inner { font-size: 9px; }
	.ej-topbar__inner span:last-child { display: none; }
	.ej-families__grid { grid-template-columns: 1fr; }
	.ej-family { border-right: 0; border-bottom: 1px solid var(--ej-line); padding: 24px 0; }
	.ej-best__grid { grid-template-columns: 1fr; }
	.ej-usp__grid { grid-template-columns: 1fr; gap: 32px; }
	.ej-section__head { grid-template-columns: 1fr; }
	.ej-section__head .ej-mono-link { grid-column: 1; justify-self: start; margin-top: 8px; }
	.ej-hero__stats { margin-left: 0; width: 100%; margin-top: 16px; }
	.ej-b2b__foot { flex-direction: column; gap: 14px; }
}