/* ==========================================================================
   TIC Automotive — Shop B2B
   ========================================================================== */

.shop-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 6.5rem) var(--pad) clamp(3rem, 6vw, 5rem);
}

.shop-hero h1 { margin: 0 0 1.4rem; color: #fff; font-size: clamp(2.2rem, 5.4vw, 4.4rem); line-height: 1.02; }
.shop-hero__lead { max-width: 54ch; margin: 0 0 2.4rem; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.8; }
.shop-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.shop-hero__card {
    padding: clamp(1.5rem, 2.6vw, 2.25rem);
    background: linear-gradient(150deg, rgba(76, 201, 240, 0.12), rgba(76, 201, 240, 0.02));
    border: 1px solid rgba(76, 201, 240, 0.28);
    border-radius: 20px;
}

.shop-hero__card-label { margin: 0; color: var(--accent); font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }
.shop-hero__card-value { margin: 0.35rem 0 1.5rem; color: #fff; font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; }
.shop-hero__card ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.shop-hero__card li { padding: 0.8rem 0; color: var(--muted); font-size: 0.95rem; border-top: 1px solid var(--hair); }

/* ---------- Passaggi ---------- */

.shop-steps { max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 6vw, 5.5rem) var(--pad) 0; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }

.steps li { padding: 2.25rem 1.75rem 2.5rem; background: var(--panel-deep); border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.steps__num { display: block; margin-bottom: 1.5rem; color: var(--accent); font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; }
.steps h3 { margin: 0 0 0.75rem; font-size: 1.5rem; line-height: 1.15; }
.steps p { margin: 0; color: var(--faint); font-size: 0.95rem; line-height: 1.75; }

/* ---------- Linee ---------- */

.shop-catalog { max-width: var(--max); margin: 0 auto; padding: clamp(3.5rem, 7vw, 6rem) var(--pad) clamp(3rem, 6vw, 5rem); }

.shop-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.shop-lines li { border-bottom: 1px solid var(--hair); }
.shop-lines li:nth-child(odd) { border-right: 1px solid var(--hair); }

.shop-lines a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    min-height: 74px;
    padding: 1rem 1.25rem;
    color: var(--text);
    transition: background 260ms ease, padding 300ms var(--ease);
}
.shop-lines a:hover { color: var(--text); background: var(--panel); }

.shop-lines__num { color: rgba(244, 247, 249, 0.3); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; }
.shop-lines__title { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.2; }
.shop-lines__brand { color: var(--faint); font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; text-align: right; }
.shop-lines a:hover .shop-lines__title { color: var(--accent-soft); }

/* ---------- Responsive ---------- */

@media screen and (max-width: 1024px) {
    .shop-hero { grid-template-columns: minmax(0, 1fr); }
    .steps { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 620px) {
    .shop-hero__actions { flex-direction: column; }
    .shop-hero__actions .button { width: 100%; }
    .shop-lines { grid-template-columns: minmax(0, 1fr); }
    .shop-lines li:nth-child(odd) { border-right: 0; }
    .shop-lines a { grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; padding: 1rem 0.25rem; }
    .shop-lines__brand { grid-column: 2; text-align: left; }
    .steps li { padding: 1.75rem 1.25rem 2rem; }
}