/* CityShirt Ingrosso — catalogo DGA */

.csi{
	--bd:#e2e5ea; --mut:#6b7280; --txt:#111827; --acc:#e11d48; --ok:#047857;
	max-width:1180px; margin:0 auto; font-size:15px; color:var(--txt);
}
.csi *{box-sizing:border-box}

/* ── Intro */
.csi-intro{border:1px solid var(--bd);border-radius:14px;padding:18px 20px;margin-bottom:20px;background:#fbfcfd}
.csi-intro__t{margin:0 0 10px;font-size:1rem;line-height:1.6}
.csi-intro__l{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;
	font-size:.88rem;color:#4b5563}
.csi-intro__l li{position:relative;padding-left:15px;line-height:1.5}
.csi-intro__l li::before{content:"·";position:absolute;left:4px;color:var(--acc);font-weight:900}

/* ── Filtri e categorie */
.csi-filtri{display:flex;gap:8px;margin-bottom:14px}
.csi-filtri input{flex:1;min-width:0;border:1px solid var(--bd);border-radius:10px;
	padding:11px 14px;font:inherit;font-size:.95rem}
.csi-filtri input:focus{outline:2px solid var(--txt);outline-offset:-1px}
.csi-filtri button{border:0;background:var(--txt);color:#fff;border-radius:10px;
	padding:11px 22px;font:inherit;font-weight:700;cursor:pointer}
.csi-filtri button:hover{background:#000}

.csi-cats{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.csi-cat{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bd);
	border-radius:999px;padding:7px 14px;font-size:.86rem;text-decoration:none;color:#374151;
	background:#fff;transition:border-color .15s,background .15s,color .15s;line-height:1.2}
.csi-cat:hover{border-color:#b9bec7;text-decoration:none;color:#111}
.csi-cat.is-on{background:var(--txt);border-color:var(--txt);color:#fff}
.csi-cat span{font-size:.75rem;opacity:.65;font-weight:700}

.csi-conteggio{font-size:.85rem;color:var(--mut);margin:0 0 12px}
.csi-vuoto{padding:28px;text-align:center;color:var(--mut);border:1px dashed var(--bd);border-radius:14px}

/* ── Griglia catalogo */
.csi-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.csi-card{display:flex;flex-direction:column;border:1px solid var(--bd);border-radius:14px;
	padding:12px;background:#fff;text-decoration:none;color:inherit;
	transition:border-color .16s,transform .16s,box-shadow .16s}
.csi-card:hover,.csi-card:focus-visible{border-color:var(--acc);transform:translateY(-2px);
	text-decoration:none;color:inherit;box-shadow:0 14px 30px -20px rgba(225,29,72,.5)}
.csi-card__img{display:block;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#f4f5f7;margin-bottom:10px}
.csi-card__img img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
.csi-card__n{font-size:.92rem;font-weight:700;line-height:1.35}
.csi-card__m{font-size:.76rem;color:var(--mut);margin-top:2px}
.csi-card__p{margin-top:auto;padding-top:9px;font-size:.84rem;color:#4b5563}
.csi-card__p strong{font-size:1.06rem;color:var(--acc);font-weight:800}
.csi-card__p small{font-size:.7rem;color:var(--mut);margin-left:3px}

/* ── Paginazione */
.csi-pag{display:flex;flex-wrap:wrap;gap:6px;margin:22px 0 0;justify-content:center}
.csi-pag__n{min-width:38px;text-align:center;border:1px solid var(--bd);border-radius:9px;
	padding:8px 10px;font-size:.88rem;text-decoration:none;color:#374151;background:#fff}
.csi-pag__n:hover{border-color:#b9bec7;text-decoration:none}
.csi-pag__n.is-on{background:var(--txt);border-color:var(--txt);color:#fff;font-weight:700}

/* ── Scheda */
.csi-breadcrumb{margin:0 0 14px;font-size:.87rem}
.csi-breadcrumb a{color:var(--mut);text-decoration:none}
.csi-breadcrumb a:hover{color:var(--txt)}

.csi-top{display:grid;grid-template-columns:260px 1fr;gap:24px;margin-bottom:26px;align-items:start}
.csi-foto{border:1px solid var(--bd);border-radius:14px;overflow:hidden;background:#f8f9fb;aspect-ratio:1/1}
.csi-foto img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
.csi-marca{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.csi-prezzo{margin:8px 0 0;font-size:1rem;color:#4b5563}
.csi-prezzo strong{font-size:1.9rem;color:var(--acc);font-weight:800;letter-spacing:-.02em}
.csi-prezzo small{font-size:.8rem;color:var(--mut)}
.csi-disp{margin:8px 0 0;font-size:.9rem;color:#4b5563}
.csi-nota{margin:12px 0 0;font-size:.85rem;line-height:1.6;color:var(--mut)}

.csi-blocco{margin-bottom:26px}
.csi-blocco h2{font-size:1.12rem;font-weight:800;margin:0 0 10px;letter-spacing:-.01em}
.csi-hint{font-size:.87rem;color:var(--mut);margin:0 0 12px;line-height:1.55}

/* ── Stampa */
.csi-stampa{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:9px}
.csi-opt{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--bd);border-radius:12px;
	padding:13px 14px;cursor:pointer;background:#fff;transition:border-color .15s}
.csi-opt:hover{border-color:#b9bec7}
.csi-opt input{margin-top:3px;flex:0 0 auto}
.csi-opt strong{display:block;font-size:.93rem;line-height:1.3}
.csi-opt small{display:block;font-size:.77rem;color:var(--mut);margin-top:3px;line-height:1.45}

.csi-lati{margin-top:12px;border:1px solid var(--bd);border-radius:12px;padding:14px 16px;background:#fbfcfd}
.csi-lati__t{margin:0 0 9px;font-size:.9rem;font-weight:700}
.csi-chk{display:flex;gap:9px;align-items:flex-start;padding:5px 0;cursor:pointer}
.csi-chk small{display:block;font-size:.77rem;color:var(--mut)}
.csi-lati__n{margin:10px 0 0;font-size:.8rem;color:var(--mut);line-height:1.5}

/* ── Griglia colore × taglia */
.csi-grid-wrap{overflow-x:auto;border:1px solid var(--bd);border-radius:12px;background:#fff}
.csi-grid{border-collapse:collapse;width:100%;min-width:560px;font-size:.86rem}
.csi-grid th,.csi-grid td{border-bottom:1px solid #f0f2f5;padding:7px 8px;text-align:center}
.csi-grid thead th{position:sticky;top:0;background:#f8f9fb;font-size:.78rem;font-weight:800;
	letter-spacing:.03em;color:#4b5563;padding:10px 8px;z-index:1}
.csi-colore{text-align:left!important;white-space:nowrap;font-weight:600;font-size:.84rem;
	position:sticky;left:0;background:#fff;z-index:2;min-width:150px}
.csi-swatch{display:inline-block;width:15px;height:15px;border-radius:50%;
	border:1px solid rgba(0,0,0,.18);vertical-align:-3px;margin-right:7px}
.csi-cell{min-width:64px}
.csi-cell.is-out{background:#fafbfc}
.csi-cell__x{color:#d1d5db}
.csi-qty{width:52px;border:1px solid var(--bd);border-radius:7px;padding:5px 4px;
	text-align:center;font:inherit;font-size:.86rem;-moz-appearance:textfield}
.csi-qty::-webkit-outer-spin-button,.csi-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.csi-qty:focus{outline:2px solid var(--txt);outline-offset:-1px}
.csi-cell__p{display:block;font-size:.72rem;color:var(--acc);font-weight:700;margin-top:3px}
.csi-cell__s{display:block;font-size:.66rem;color:var(--mut)}

/* ── Barra totale: resta visibile mentre si compila la griglia, che è lunga */
.csi-barra{position:sticky;bottom:0;z-index:20;display:flex;flex-wrap:wrap;gap:12px;
	align-items:center;justify-content:space-between;margin-top:18px;padding:14px 18px;
	border:1px solid var(--bd);border-radius:14px;background:rgba(255,255,255,.97);
	backdrop-filter:blur(6px);box-shadow:0 -6px 24px -18px rgba(0,0,0,.35)}
.csi-barra__d{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 12px;min-width:0}
.csi-barra__d span{font-size:.88rem;color:var(--mut)}
.csi-barra__d strong{font-size:1.45rem;font-weight:800;color:var(--txt);letter-spacing:-.02em}
.csi-barra__d small{font-size:.76rem;color:var(--mut)}
.csi-add{border:0;background:var(--acc);color:#fff;border-radius:11px;padding:13px 26px;
	font:inherit;font-size:1rem;font-weight:800;cursor:pointer;transition:background .15s}
.csi-add:hover:not(:disabled){background:#be123c}
.csi-add:disabled{background:#d1d5db;cursor:not-allowed}

.csi-errore{margin:12px 0 0;padding:12px 15px;border:1px solid #f5c2c2;background:#fff5f5;
	border-radius:11px;color:#9b1c1c;font-size:.87rem;line-height:1.55}

/* La sticky bar di Porto coprirebbe la nostra barra del totale. */
.csi-page .sticky-product,.csi-page .product-sticky-bar,.csi-page .sticky-product-wrap{display:none!important}

@media (max-width:760px){
	.csi-top{grid-template-columns:1fr;gap:16px}
	.csi-foto{max-width:220px}
	.csi-prezzo strong{font-size:1.6rem}
}
@media (max-width:520px){
	.csi-griglia{grid-template-columns:repeat(2,1fr);gap:10px}
	.csi-card{padding:10px}
	.csi-barra{padding:12px 14px}
	.csi-barra__d strong{font-size:1.25rem}
	.csi-add{width:100%}
	.csi-intro__l{flex-direction:column;gap:4px}
}

/* ── Filtro colore (griglie con molti colori) */
.csi-cerca-colore{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.csi-cerca-colore input{flex:1;min-width:200px;border:1px solid var(--bd);border-radius:10px;
	padding:9px 13px;font:inherit;font-size:.9rem}
.csi-cerca-colore input:focus{outline:2px solid var(--txt);outline-offset:-1px}
.csi-link{border:0;background:none;padding:0;font:inherit;font-size:.85rem;font-weight:700;
	color:var(--acc);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.csi-link:hover{color:#be123c}

/* ── Celle "su ordinazione" (stock -1): vendibili, ma non a magazzino.
   Distinguerle è necessario: il cliente deve sapere che quella taglia arriva in 5-7 giorni
   invece che in 24/48h, prima di ordinare — non dopo. */
.csi-cell.is-order{ background:#fffdf7 }
.csi-cell.is-order .csi-cell__s{ color:#a16207; font-weight:600 }
.csi-cell.is-order .csi-cell__s abbr{ text-decoration:none; border-bottom:1px dotted #d6ab4a; cursor:help }
.csi-cell.is-order .csi-qty{ border-color:#e8d9a8 }

/* ══ Vetrina categorie ═══════════════════════════════════════════════════
   Sei card con la foto del capo più rappresentativo. La foto fa il lavoro che
   una pastiglia di testo non può fare: far riconoscere la categoria a colpo d'occhio. */
.csi-vetrina{
	display:grid;
	/* 6 colonne fisse su schermo largo: con auto-fit l'ultima card finiva da sola
	   su una seconda riga, e una fila spaiata sembra un errore di caricamento. */
	grid-template-columns:repeat(6,1fr);
	gap:12px;
	margin:0 0 22px;
}
@media (max-width:1100px){ .csi-vetrina{ grid-template-columns:repeat(3,1fr) } }
.csi-vcard{
	display:flex; flex-direction:column;
	border:1px solid var(--bd); border-radius:16px;
	overflow:hidden; background:#fff; text-decoration:none; color:inherit;
	transition:border-color .18s, transform .18s, box-shadow .18s;
}
.csi-vcard:hover,.csi-vcard:focus-visible{
	border-color:var(--acc); transform:translateY(-3px); text-decoration:none; color:inherit;
	box-shadow:0 18px 34px -24px rgba(17,24,39,.45);
}
.csi-vcard__img{
	display:block; aspect-ratio:4/3; overflow:hidden;
	background:#f4f5f7; border-bottom:1px solid var(--bd);
}
.csi-vcard__img img{
	width:100%; height:100%; object-fit:cover; display:block;
	transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.csi-vcard:hover .csi-vcard__img img{ transform:scale(1.045) }
@media (prefers-reduced-motion:reduce){
	.csi-vcard,.csi-vcard__img img{ transition:none }
	.csi-vcard:hover{ transform:none }
	.csi-vcard:hover .csi-vcard__img img{ transform:none }
}
.csi-vcard__t{
	padding:12px 14px 0; font-size:1.02rem; font-weight:800;
	letter-spacing:-.015em; line-height:1.25;
}
.csi-vcard__m{
	padding:3px 14px 13px; font-size:.79rem; color:var(--mut); line-height:1.45;
}

@media (max-width:520px){
	.csi-vetrina{ grid-template-columns:repeat(2,1fr); gap:10px }
	.csi-vcard__t{ font-size:.94rem; padding:10px 11px 0 }
	.csi-vcard__m{ padding:2px 11px 11px; font-size:.74rem }
}

/* ── Scaglioni di prezzo: campionatura vs rivenditore.
   Due riquadri affiancati, con quello conveniente evidenziato: il confronto dev'essere
   immediato, non una nota da leggere. */
.csi-scaglioni{ display:flex; gap:10px; margin:14px 0 0; flex-wrap:wrap }
.csi-sc{
	flex:1 1 150px; border:1px solid var(--bd); border-radius:12px;
	padding:11px 13px; background:#fff; min-width:0;
}
.csi-sc.is-on{ border-color:var(--acc); background:#fff5f7 }
.csi-sc__q{ display:block; font-size:.76rem; font-weight:700; color:var(--mut);
	text-transform:uppercase; letter-spacing:.04em }
.csi-sc__p{ display:block; font-size:1.3rem; font-weight:800; color:var(--txt);
	letter-spacing:-.02em; margin-top:3px; line-height:1.15 }
.csi-sc.is-on .csi-sc__p{ color:var(--acc) }
.csi-sc__e{ display:block; font-size:.74rem; color:var(--mut); margin-top:2px; line-height:1.4 }
.csi-sc.is-on .csi-sc__e{ color:#9f1239; font-weight:600 }
@media (max-width:560px){ .csi-sc__p{ font-size:1.15rem } }