/* DrivCars — App styles (custom on top of Tailwind CDN)
 * Pattern: Editorial Grid + Bento. Mobile-first.
 */

/* ---------- Reset / base ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    color: var(--color-ink);
    background: var(--color-bg);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--brand-100); color: var(--brand-800); }

/* ---------- Typography utility classes ---------- */
.font-display { font-family: var(--font-display); }
.font-sans    { font-family: var(--font-sans); }

.text-display {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.5rem, 6vw, 4rem);  /* 40 -> 64 */
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.text-h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
}
.text-h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.625rem, 3.5vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.text-h3 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.3;
}
.text-h4 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.4;
}
.text-lead {
    font-size: clamp(1.125rem, 1.6vw, 1.25rem);
    line-height: 1.6;
    color: var(--color-ink-soft);
}
.text-eyebrow {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}
.text-mono-tabular {
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
}

/* ---------- Layout container ---------- */
.container-x {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 1rem;
}
@media (min-width: 640px) { .container-x { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .container-x { padding-inline: 2rem; } }
@media (min-width: 1280px) { .container-x { padding-inline: 3rem; } }

.section-y {
    padding-block: 4rem;
}
@media (min-width: 768px) { .section-y { padding-block: 6rem; } }
@media (min-width: 1280px) { .section-y { padding-block: 7.5rem; } }

/* ---------- FAQ accordion (editorial) ---------- */
.faq-section { background: var(--color-surface-alt); }
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--t-base), box-shadow var(--t-base);
    /* Abilita l'animazione tra 0 e auto per il <details>. Chrome 129+, Safari 18.4+, FF 138+ */
    interpolate-size: allow-keywords;
}
.faq-item[open] { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
/* Anima l'apertura/chiusura del contenuto del <details>. Fallback silenzioso su browser vecchi. */
.faq-item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 350ms ease, content-visibility 350ms allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }
.faq-item__q {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.125rem 1.25rem;
    font-weight: 600; font-size: 1rem; color: var(--color-ink);
    cursor: pointer;
    list-style: none;
    line-height: 1.4;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { background: var(--color-surface-alt); }
.faq-item__icon {
    flex-shrink: 0; color: var(--color-ink-soft);
    transition: transform var(--t-base);
}
.faq-item[open] .faq-item__icon { transform: rotate(45deg); }
.faq-item__a {
    padding: 0.5rem 1.25rem 1.25rem 1.25rem;
    color: var(--color-ink-soft); line-height: 1.65;
}
.faq-item__a p { margin: 0; }

/* ---------- Skip link ---------- */
.skip-link {
    position: absolute;
    top: -40px; left: 16px;
    background: var(--color-ink);
    color: white;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    z-index: 9999;
    text-decoration: none;
    font-weight: 600;
}
.skip-link:focus { top: 16px; outline: 2px solid var(--brand-300); }

/* ---------- Button ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--btn-font-family);
    font-weight: var(--btn-font-weight);
    font-size: var(--btn-font-size);
    letter-spacing: var(--btn-letter-spacing);
    text-transform: var(--btn-text-transform);
    line-height: 1;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    min-height: var(--btn-height);
    border-radius: var(--btn-radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t-base), color var(--t-base),
                border-color var(--t-base), transform var(--t-fast),
                box-shadow var(--t-base);
    white-space: nowrap;
}
.btn:focus-visible {
    outline: var(--btn-focus-outline);
    outline-offset: -1px;
    box-shadow: var(--btn-focus-shadow);
}
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

.btn-primary {
    background: var(--brand-600);
    color: #fff;
}
.btn-primary:hover { background: var(--brand-700); }
.btn-primary:active { background: var(--brand-800); transform: scale(.98); }

.btn-secondary {
    background: #fff;
    color: var(--color-ink);
    border-color: rgba(15,23,42,.15);
}
.btn-secondary:hover { background: var(--color-surface-alt); border-color: rgba(15,23,42,.25); }

.btn-ghost {
    background: transparent;
    color: var(--brand-600);
    padding-inline: 0.5rem;
    min-height: 44px;
}
.btn-ghost:hover { text-decoration: underline; text-underline-offset: 4px; }

.btn-sm { min-height: 40px; padding: 0.625rem 1rem; font-size: 0.875rem; }

/* WhatsApp pill */
.btn-whatsapp {
    background: #fff;
    color: var(--color-ink);
    border-color: rgba(15,23,42,.15);
}
.btn-whatsapp:hover { background: var(--color-surface-alt); }
.btn-whatsapp svg { color: var(--color-whatsapp); }

/* ---------- Inputs ---------- */
.field-label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-ink);
    margin-bottom: 0.375rem;
}
/* ===== Form fields — token-driven, unificati per stati ===== */
.field-input,
.field-select,
.field-textarea {
    display: block;
    width: 100%;
    min-height: var(--field-height);
    padding: var(--field-padding-y) var(--field-padding-x);
    font-family: var(--field-font-family);
    font-weight: var(--field-font-weight);
    font-size: var(--field-font-size);
    line-height: 1.5;
    color: var(--field-color);
    background: var(--field-bg);
    border: var(--field-border-width) solid var(--field-border-color);
    border-radius: var(--field-radius);
    box-shadow: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Placeholder uniforme */
.field-input::placeholder,
.field-textarea::placeholder { color: var(--field-placeholder); opacity: 1; }

/* Hover */
.field-input:hover:not(:disabled),
.field-select:hover:not(:disabled),
.field-textarea:hover:not(:disabled) {
    border-color: var(--field-hover-border);
}

/* Focus: outline (editorial) o box-shadow ring (bold) — tramite var */
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
    outline: none;
    border-color: var(--field-focus-border);
    box-shadow: var(--field-focus-shadow);
}
.field-input:focus-visible,
.field-select:focus-visible,
.field-textarea:focus-visible {
    outline: var(--field-focus-outline);
    outline-offset: var(--field-focus-outline-offset);
    border-color: var(--field-focus-border);
    box-shadow: var(--field-focus-shadow);
}

/* Disabled */
.field-input:disabled,
.field-select:disabled,
.field-textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--color-surface-alt);
}

/* Invalid */
.field-input[aria-invalid="true"],
.field-select[aria-invalid="true"],
.field-textarea[aria-invalid="true"] {
    border-color: var(--color-danger);
}
.field-input[aria-invalid="true"]:focus,
.field-select[aria-invalid="true"]:focus,
.field-textarea[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(185,28,28,.20);
}

/* Chevron su select (colore dinamico via var brand-focus) */
.field-select {
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 16px;
    cursor: pointer;
}
.field-select::-ms-expand { display: none; }

/* Textarea specifica */
.field-textarea { min-height: 8rem; resize: vertical; }

/* Rimuovi spinner nativi input[type=number] per uniformità visiva */
input[type="number"].field-input::-webkit-outer-spin-button,
input[type="number"].field-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
input[type="number"].field-input { -moz-appearance: textfield; appearance: textfield; }

/* Helper text */
.field-help  { font-size: 0.8125rem; color: var(--color-ink-soft); margin-top: 0.375rem; }
.field-error { font-size: 0.8125rem; color: var(--color-danger);   margin-top: 0.375rem; }

/* ---------- Chip / Badge ---------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    line-height: 1.3;
}
.chip-neutral { background: var(--color-surface-alt); color: var(--color-ink-soft); }
.chip-brand   { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.chip-success { background: var(--color-success-bg); color: var(--color-success); }
.chip-featured{ background: var(--brand-600); color: #fff; }
.chip svg { width: 14px; height: 14px; }

/* ---------- Card ---------- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.card-hover:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
}

/* ---------- VehicleCard ---------- */
/* Editorial: spigolo vivo, coerente con CTA (--btn-radius:0) e input/select (--field-radius:0).
   Bold override in styles/bold.css riporta --radius-xl per l'identità più morbida. */
.vc {
    display: flex; flex-direction: column;
    position: relative;
    text-decoration: none; color: inherit;
    border-radius: 0;
}
.vc__media {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--color-surface-alt);
}
.vc__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 400ms ease-out;
}
.vc:hover .vc__media img { transform: scale(1.04); }
.vc__featured {
    position: absolute; top: 12px; left: 12px;
    z-index: 2;
}
.vc__counter {
    position: absolute; bottom: 12px; right: 12px;
    background: rgba(0,0,0,.6); color: #fff;
    padding: 4px 10px; border-radius: var(--radius-full);
    font-size: 0.75rem; font-weight: 500;
    backdrop-filter: blur(4px);
}
.vc { height: 100%; }
.vc__body {
    padding: 1.25rem;
    display: flex; flex-direction: column;
    gap: 0.75rem;
    flex: 1;   /* riempie la card fino in fondo */
}
.vc__title {
    font-weight: 600; font-size: 1.125rem; line-height: 1.3;
    color: var(--color-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.3em);   /* riserva sempre 2 righe */
}
.vc__chips {
    display: flex; flex-wrap: wrap; gap: 0.375rem;
    min-height: calc(2 * (14px + 0.6rem));   /* riserva ~2 righe di chip */
    align-content: flex-start;
}
.vc__price {
    display: flex; align-items: baseline; justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    margin-top: auto;   /* pusha in fondo sempre */
}
.vc__price-value {
    font-size: 1.25rem; font-weight: 700;
    color: var(--brand-600);
    font-variant-numeric: tabular-nums;
}
.vc__price-cta {
    font-size: 0.875rem; font-weight: 600;
    color: var(--color-ink-soft);
    display: inline-flex; align-items: center; gap: 0.25rem;
    transition: color var(--t-fast);
}
.vc:hover .vc__price-cta { color: var(--brand-600); }
.vc:hover .vc__price-cta svg { transform: translateX(2px); }
.vc__price-cta svg { width: 16px; height: 16px; transition: transform var(--t-fast); }

/* ---------- Navbar ---------- */
.navbar {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 50;
    transition: background var(--t-base), backdrop-filter var(--t-base), border-color var(--t-base);
    border-bottom: 1px solid transparent;
}
.navbar--scrolled {
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom-color: var(--color-border);
}
.navbar__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px;
}
@media (min-width: 768px) { .navbar__inner { height: 72px; } }
.navbar__brand {
    display: inline-flex; align-items: center; gap: 0.625rem;
    text-decoration: none; color: var(--color-ink);
    font-family: var(--font-display); font-weight: 600; font-size: 1.125rem;
    letter-spacing: -0.01em;
}
.navbar__brand img { display: block; width: 36px; height: 36px; }
.navbar__nav { display: none; gap: 0.5rem; align-items: center; }
@media (min-width: 768px) { .navbar__nav { display: flex; } }
.navbar__link {
    color: var(--color-ink); text-decoration: none;
    font-size: 0.9375rem; font-weight: 500;
    padding: 0.625rem 0.875rem; border-radius: var(--radius-sm);
    transition: color var(--t-fast), background var(--t-fast);
    position: relative;
}
.navbar__link:hover { color: var(--brand-600); }
.navbar__link[aria-current="page"] { color: var(--brand-600); }
.navbar__link[aria-current="page"]::after {
    content: ''; position: absolute; left: 0.875rem; right: 0.875rem; bottom: 4px;
    height: 2px; background: var(--brand-600); border-radius: 1px;
}

.hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: transparent; border: 0; cursor: pointer;
    color: var(--color-ink);
}
@media (min-width: 768px) { .hamburger { display: none; } }
.hamburger svg { width: 24px; height: 24px; }

/* Mobile overlay */
.mobile-menu {
    position: fixed; inset: 0;
    background: var(--color-bg);
    z-index: 60;
    display: none; flex-direction: column;
    padding: 1.25rem;
}
.mobile-menu[data-open="true"] { display: flex; }
.mobile-menu__header { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__nav {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    gap: 1.5rem; padding-block: 2rem;
}
.mobile-menu__link {
    font-family: var(--font-display);
    font-size: 2rem; font-weight: 600; color: var(--color-ink);
    text-decoration: none; line-height: 1.1;
}
.mobile-menu__link:hover { color: var(--brand-600); }
.mobile-menu__cta { margin-top: auto; }

/* ---------- Footer ---------- */
.footer {
    background: var(--color-ink-deep);
    color: rgba(255,255,255,.7);
}
.footer__inner {
    display: grid; gap: 2.5rem;
    grid-template-columns: 1fr;
    padding-block: 4rem 1.5rem;
}
@media (min-width: 768px) { .footer__inner { grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; } }
.footer__title {
    color: #fff; font-weight: 600; font-size: 0.8125rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    margin-bottom: 1rem;
}
.footer__brand-name {
    color: #fff; font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 600;
}
.footer__list { display: flex; flex-direction: column; gap: 0.75rem; }
.footer__list a, .footer__list span {
    color: rgba(255,255,255,.7); text-decoration: none;
    transition: color var(--t-fast);
}
.footer__list a:hover { color: #fff; }
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-block: 1.25rem;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
    font-size: 0.8125rem;
}

/* ---------- Hero (home) ---------- */
.hero {
    position: relative; overflow: hidden;
    padding-top: 6rem;
    padding-bottom: 4rem;
}
@media (min-width: 768px) { .hero { padding-top: 8rem; padding-bottom: 6rem; } }
.hero__grid {
    display: grid; gap: 3rem;
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.1fr 1fr; gap: 5rem; } }
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--color-ink-soft); font-size: 0.8125rem; font-weight: 500;
}
.hero__eyebrow::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 3px rgba(4,120,87,.18);
}
.hero__h1 { margin-top: 1.25rem; }
.hero__h1 .accent { color: var(--brand-600); display: block; }
.hero__lead { margin-top: 1.5rem; max-width: 34rem; }
.hero__ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero__visual {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-50) 0%, var(--color-surface-alt) 100%);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}
.hero__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero__scroll {
    margin-top: 3rem;
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--color-ink-muted);
    font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.hero__scroll svg { width: 16px; height: 16px; animation: scroll-bounce 1.6s ease-in-out infinite; }
@keyframes scroll-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(4px); opacity: 1; }
}

/* ---------- Trust strip (bento) ---------- */
.trust-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.trust-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.trust-item__icon {
    width: 44px; height: 44px; border-radius: var(--radius-md);
    background: var(--brand-50); color: var(--brand-700);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 0.5rem;
}
.trust-item__icon svg { width: 22px; height: 22px; }
.trust-item__title { font-weight: 600; color: var(--color-ink); }
.trust-item__desc  { font-size: 0.875rem; color: var(--color-ink-soft); line-height: 1.5; }

/* ---------- Section header (eyebrow + title + link) ---------- */
.section-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 1rem; margin-bottom: 2.5rem;
}
.section-head__title-group { max-width: 42rem; }
.section-head__eyebrow { color: var(--color-ink-soft); margin-bottom: 0.75rem; }
.section-head__title { color: var(--color-ink); }

/* ---------- Featured grid ---------- */
.featured-grid {
    display: grid; gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .featured-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

/* Uniformità altezze card: forza i wrapper a stretchare fino in fondo */
/* Ogni figlio della grid stretcha in altezza (comportamento default grid),
   il .vc dentro un eventuale wrapper .reveal riempie il wrapper. */
.featured-grid > *, .featured-grid > .reveal { display: flex; flex-direction: column; }
.featured-grid .vc { flex: 1; }

/* ---------- Services teaser (bento asymmetric) ---------- */
.services-grid {
    display: grid; gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) { .services-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.service-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    display: flex; flex-direction: column;
    transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.service-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
}
.service-card__number {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-size: 0.8125rem; letter-spacing: 0.08em;
    color: var(--brand-600); font-weight: 600;
}
.service-card__title {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.5rem; line-height: 1.2; margin-top: 0.75rem; color: var(--color-ink);
}
.service-card__desc { color: var(--color-ink-soft); margin-top: 0.75rem; line-height: 1.65; }
.service-card__bullets {
    margin-top: 1.25rem; padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
    display: flex; flex-direction: column; gap: 0.5rem;
    list-style: none; padding-left: 0;
}
.service-card__bullets li {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.9375rem; color: var(--color-ink-soft);
}
.service-card__bullets li svg { width: 16px; height: 16px; color: var(--color-success); flex-shrink: 0; }
.service-card__footer {
    margin-top: auto; padding-top: 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.service-card__stat {
    display: flex; flex-direction: column;
}
.service-card__stat-value {
    font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; color: var(--brand-600); line-height: 1;
}
.service-card__stat-label { font-size: 0.75rem; color: var(--color-ink-muted); letter-spacing: 0.04em; }

/* ---------- Why us grid (bento) ---------- */
.why-grid {
    display: grid; gap: 1rem; margin-top: 4rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
.why-item {
    background: var(--color-surface-alt);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: border-color var(--t-base), background var(--t-base);
}
.why-item:hover { background: #fff; border-color: var(--color-border); }
.why-item__icon {
    width: 36px; height: 36px; border-radius: var(--radius-md);
    background: #fff; border: 1px solid var(--color-border);
    color: var(--brand-600);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 0.875rem;
}
.why-item__icon svg { width: 18px; height: 18px; }
.why-item__title { font-weight: 600; color: var(--color-ink); margin-bottom: 0.375rem; }
.why-item__desc  { font-size: 0.875rem; color: var(--color-ink-soft); line-height: 1.5; }

/* ---------- Filter sidebar / sheet ---------- */
.filter-panel { display: flex; flex-direction: column; }

/* filter-group può essere <div> o <fieldset> — reset del fieldset */
.filter-group {
    display: flex; flex-direction: column;
    padding: 0;
    margin: 0;
    border: 0;
}
.filter-group + .filter-group { margin-top: 1.5rem; }

/* Label uniforme (label / legend / span) — margin-bottom esplicito perché il gap
   flex non funziona in modo affidabile con <legend> in un <fieldset>. */
.filter-group__label,
.filter-group legend.filter-group__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
    padding: 0;
    display: block;
    margin: 0 0 0.75rem 0;
}

/* Actions box in fondo — usa il border-bottom dell'ultimo filter-group come unico separatore */
.filter-actions {
    display: flex; flex-direction: column; gap: 0.5rem;
    margin-top: 1.5rem;
}
.filter-group__label {
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--color-ink-soft);
}
.filter-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.filter-pill {
    position: relative;
    display: inline-flex; align-items: center;
    padding: 0.4375rem 0.75rem;
    border-radius: var(--field-radius);
    border: 1px solid var(--color-border);
    background: #fff; color: var(--color-ink);
    font-size: 0.8125rem; font-weight: 500;
    text-decoration: none;
    transition: all var(--t-fast);
    min-height: 36px;
    cursor: pointer;
}
.filter-pill input {
    position: absolute; opacity: 0; pointer-events: none;
    width: 0; height: 0;
}
.filter-pill:hover { border-color: var(--color-border-strong); background: var(--color-surface-alt); }
.filter-pill:has(input:checked),
.filter-pill[aria-pressed="true"] {
    background: var(--brand-600); color: #fff; border-color: var(--brand-600);
}
.filter-pill:focus-within { box-shadow: var(--shadow-focus); }
.filter-range-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
/* Input range (dal/al, min/max) usano gli stessi token dei field standard — nessun override */

/* ---------- Results toolbar (count + sort) ---------- */
.results-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}
.results-toolbar__count {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-ink);
    letter-spacing: 0.01em;
}
.results-toolbar__sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.results-toolbar__label {
    font-size: 0.8125rem;
    color: var(--color-ink-soft);
    white-space: nowrap;
}
.results-toolbar__sort .field-select {
    min-width: 190px;
    height: auto;
    padding-block: 0.5rem;
    font-size: 0.875rem;
}
@media (max-width: 480px) {
    .results-toolbar__sort { width: 100%; }
    .results-toolbar__sort .field-select { flex: 1; min-width: 0; }
}

/* ---------- Mobile filter bar ---------- */
.mobile-filter-bar {
    position: sticky;
    bottom: 1rem;
    z-index: 30;
    display: flex; justify-content: center;
    margin-top: 1.5rem;
}
@media (min-width: 1024px) { .mobile-filter-bar { display: none; } }

/* Sheet overlay */
.sheet {
    position: fixed; inset: 0; z-index: 70;
    display: none;
}
.sheet[data-open="true"] { display: flex; flex-direction: column; }
.sheet__backdrop {
    position: absolute; inset: 0;
    background: rgba(15,23,42,.5);
    backdrop-filter: blur(2px);
}
.sheet__panel {
    position: relative;
    margin-top: auto;
    background: var(--color-bg);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 90vh; overflow-y: auto;
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
}

/* ---------- Filter badges ---------- */
.filter-badges {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
    margin-bottom: 1.5rem;
}
.filter-badge {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.3125rem 0.5rem 0.3125rem 0.75rem;
    background: var(--brand-50); color: var(--brand-700);
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: background var(--t-fast);
}
.filter-badge:hover { background: var(--brand-100); }
.filter-badge__x {
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(123,30,35,.15);
    display: inline-flex; align-items: center; justify-content: center;
}
.filter-badge__x svg { width: 12px; height: 12px; }

/* ---------- Detail page gallery ---------- */
.gallery {
    display: flex; flex-direction: column; gap: 0.75rem;
}
.gallery__main {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.9); color: var(--color-ink);
    border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--t-fast);
    backdrop-filter: blur(4px);
}
.gallery__nav:hover { background: #fff; }
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }
.gallery__counter {
    position: absolute; bottom: 12px; left: 12px;
    background: rgba(0,0,0,.6); color: #fff;
    padding: 4px 10px; border-radius: var(--radius-full);
    font-size: 0.75rem;
}
.gallery__fullscreen {
    position: absolute; bottom: 12px; right: 12px;
    width: 36px; height: 36px; border-radius: var(--radius-sm);
    background: rgba(0,0,0,.6); color: #fff; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.gallery__thumbs {
    display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: thin;
}
.gallery__thumb {
    flex: 0 0 80px; height: 60px; border-radius: var(--radius-sm);
    overflow: hidden; cursor: pointer;
    border: 2px solid transparent; background: var(--color-surface-alt);
    padding: 0;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-current="true"] { border-color: var(--color-ink); }

/* Lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(0,0,0,.95);
    display: none;
    align-items: center; justify-content: center;
}
.lightbox[data-open="true"] { display: flex; }
.lightbox img {
    max-width: 95vw; max-height: 90vh; object-fit: contain;
    transform-origin: center center;
    transition: transform 180ms ease-out;
    will-change: transform;
    user-select: none; -webkit-user-drag: none;
    touch-action: none;
    cursor: default;
}
/* Cursor grab quando zoomato (settato via JS con class .is-zoomed) */
.lightbox img.is-zoomed { cursor: grab; }
.lightbox img.is-zoomed.is-panning { cursor: grabbing; transition: none; }
.lightbox__close, .lightbox__nav {
    position: absolute;
    background: rgba(255,255,255,.1); color: #fff;
    border: 0; cursor: pointer;
    width: 48px; height: 48px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__counter {
    position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: 0.875rem;
}
/* Zoom bar (top-right sotto il close, verticale) */
.lightbox__zoom-bar {
    position: absolute; top: 5rem; right: 1rem;
    display: flex; flex-direction: column; gap: 0.5rem;
    background: rgba(0,0,0,.4);
    padding: 0.375rem;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.lightbox__zoom-btn {
    width: 44px; height: 44px;
    background: rgba(255,255,255,.1);
    color: #fff; border: 0; cursor: pointer;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em;
    transition: background 150ms ease, transform 100ms ease;
}
.lightbox__zoom-btn:hover:not(:disabled) { background: rgba(255,255,255,.22); }
.lightbox__zoom-btn:active:not(:disabled) { transform: scale(0.94); }
.lightbox__zoom-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.lightbox__zoom-btn--reset { min-width: 52px; padding-inline: 0.5rem; }
.lightbox__zoom-btn--reset span { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    /* Su mobile la zoom bar va bottom-center per pollici comodi */
    .lightbox__zoom-bar {
        top: auto; right: 50%;
        bottom: 3rem;
        transform: translateX(50%);
        flex-direction: row;
    }
}

/* ---------- Detail page price box ---------- */
.price-box {
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
}
.price-box__label {
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--brand-700);
}
.price-box__value {
    font-family: var(--font-display);
    font-size: 2.25rem; font-weight: 700;
    color: var(--brand-600); line-height: 1.1;
    margin-top: 0.25rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Specs list ---------- */
.specs {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
}
.specs__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9375rem;
}
.specs__row:last-child { border-bottom: 0; }
.specs__label {
    display: inline-flex; align-items: center; gap: 0.625rem;
    color: var(--color-ink-soft);
}
.specs__label svg { width: 18px; height: 18px; color: var(--color-ink-muted); }
.specs__value { color: var(--color-ink); font-weight: 500; text-align: right; }

/* ---------- Breadcrumb ---------- */
.crumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem;
    font-size: 0.875rem; color: var(--color-ink-soft);
    padding-block: 1rem;
}
.crumb a { color: var(--color-ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--brand-600); }
.crumb svg { width: 14px; height: 14px; color: var(--color-ink-muted); }
.crumb [aria-current="page"] { color: var(--color-ink); font-weight: 500; }

/* ---------- Services page ---------- */
.service-row {
    display: grid; gap: 2rem;
    grid-template-columns: 1fr;
    padding-block: 3rem;
    border-bottom: 1px solid var(--color-border);
}
@media (min-width: 1024px) { .service-row {
    grid-template-columns: 220px 1fr 280px;
    gap: 4rem; padding-block: 5rem; align-items: start;
} }
.service-row:last-child { border-bottom: 0; }
.service-row__side {
    display: flex; flex-direction: column; gap: 0.75rem;
}
.service-row__num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.875rem; color: var(--color-ink-muted); letter-spacing: 0.08em;
}
.service-row__title {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.15;
}
.service-row__body p { line-height: 1.7; color: var(--color-ink-soft); }
.service-row__body p + p { margin-top: 1rem; }
.service-row__visual {
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--brand-50), var(--color-surface-alt));
    border: 1px solid var(--color-border);
    display: none;
}
@media (min-width: 1024px) { .service-row__visual { display: block; } }

/* ---------- Admin layout ---------- */

/* Mobile topbar: visibile solo <1024px */
.admin-topbar {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: var(--color-ink-deep); color: #fff;
    position: sticky; top: 0; z-index: 45;
}
.admin-topbar__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: transparent; color: #fff;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
}
.admin-topbar__toggle:hover { background: rgba(255,255,255,.08); }
.admin-topbar__brand {
    color: #fff; text-decoration: none;
    font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem;
    letter-spacing: -0.01em;
}
@media (min-width: 1024px) { .admin-topbar { display: none; } }

.admin-shell {
    display: grid; gap: 0;
    grid-template-columns: 1fr;
    min-height: 100vh;
    background: var(--color-bg);
    position: relative;   /* per backdrop + sidebar drawer */
}
@media (min-width: 1024px) { .admin-shell { grid-template-columns: 240px 1fr; } }

/* Backdrop (visibile quando drawer aperto su mobile) */
.admin-shell__backdrop {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.5);
    z-index: 55; opacity: 0; pointer-events: none;
    transition: opacity var(--t-base);
}
.admin-shell.is-menu-open .admin-shell__backdrop { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) {
    .admin-shell__backdrop { display: none; }
}

/* Sidebar: drawer su mobile, fissa su desktop */
.admin-sidebar {
    background: var(--color-ink-deep); color: rgba(255,255,255,.8);
    padding: 1.5rem 1rem;
    display: flex; flex-direction: column;
    /* mobile: drawer laterale */
    position: fixed; top: 0; left: 0;
    width: 82vw; max-width: 300px; height: 100vh;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--t-base);
    overflow-y: auto;
}
.admin-shell.is-menu-open .admin-sidebar { transform: translateX(0); }
.admin-sidebar__close {
    position: absolute; top: 12px; right: 12px;
    width: 36px; height: 36px;
    background: rgba(255,255,255,.06); color: #fff;
    border: 0; border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.admin-sidebar__close:hover { background: rgba(255,255,255,.12); }
@media (min-width: 1024px) {
    .admin-sidebar {
        position: static; width: auto; max-width: none; height: auto;
        transform: none; z-index: auto;
    }
    .admin-sidebar__close { display: none; }
}
.admin-sidebar__brand {
    color: #fff; font-family: var(--font-display); font-weight: 600;
    font-size: 1.125rem; padding: 0.5rem 0.75rem;
}
.admin-sidebar__nav { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.25rem; }
.admin-sidebar__link {
    color: rgba(255,255,255,.7); text-decoration: none;
    padding: 0.625rem 0.75rem; border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    transition: background var(--t-fast), color var(--t-fast);
    display: flex; align-items: center; gap: 0.5rem;
}
.admin-sidebar__link:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-sidebar__link[aria-current="page"] { background: rgba(255,255,255,.1); color: #fff; }
.admin-main { padding: 1.25rem 1rem; min-width: 0; }
@media (min-width: 640px) { .admin-main { padding: 1.5rem; } }
@media (min-width: 1024px) { .admin-main { padding: 2rem 2.5rem; } }

/* Mobile: WYSIWYG toolbar più compatta e scrollabile in overflow */
@media (max-width: 639px) {
    .wysiwyg__toolbar {
        flex-wrap: nowrap; overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding: 0.375rem;
    }
    .wysiwyg__btn { flex-shrink: 0; min-width: 32px; }
    .wysiwyg__sep { flex-shrink: 0; }
}

/* Mobile: brand picker griglia meno colonne, meno padding */
@media (max-width: 639px) {
    .brand-picker { padding: 0.75rem; }
    .brand-picker__grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
    .brand-picker__item { min-height: 80px; padding: 0.5rem 0.375rem; }
    .brand-picker__item img { width: 36px; height: 36px; }
}

/* Mobile: photo manager grid minmax più piccolo */
@media (max-width: 639px) {
    .photo-mgr__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
    .photo-mgr__drop { padding: 1rem; gap: 0.75rem; }
    .photo-mgr__drop-icon { width: 40px; height: 40px; }
}

/* Mobile: row actions più compatte */
@media (max-width: 639px) {
    .row-actions { gap: 0.125rem; }
    .row-action { width: 30px; height: 30px; }
}

/* Admin form: azioni secondarie (toggle/duplica/elimina) — push right solo su desktop */
@media (min-width: 1024px) {
    .form-actions-secondary { margin-left: auto; }
}
/* Mobile/tablet: i pulsanti azione secondaria stackano naturalmente sotto Salva+Annulla, con full-width */
@media (max-width: 767px) {
    .form-actions-secondary { width: 100%; margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
    .form-actions-secondary .btn { flex: 1 1 calc(50% - 0.25rem); font-size: 0.875rem; padding: 0.625rem 0.75rem; min-height: 44px; }
}

.stat-card {
    background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: 1.25rem;
    display: flex; align-items: flex-start; gap: 0.875rem;
    text-decoration: none;
    transition: box-shadow var(--t-fast), transform var(--t-fast);
}
a.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
@media (min-width: 640px) { .stat-card { padding: 1.5rem; gap: 1rem; } }
.stat-card__icon {
    width: 44px; height: 44px; border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.stat-card__icon--blue   { background: #DBEAFE; color: #1E40AF; }
.stat-card__icon--green  { background: var(--color-success-bg); color: var(--color-success); }
.stat-card__icon--amber  { background: #FEF3C7; color: var(--color-warning); }
.stat-card__value { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1; color: var(--color-ink); }
.stat-card__label { font-size: 0.875rem; color: var(--color-ink-soft); margin-top: 0.25rem; }

/* ---------- Vehicle description (rendering pubblico dal WYSIWYG) ---------- */
.vehicle-desc p           { margin: 0 0 0.75rem; }
.vehicle-desc p:last-child{ margin-bottom: 0; }
.vehicle-desc h3          { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.3; margin: 1.5rem 0 0.5rem; color: var(--color-ink); }
.vehicle-desc ul          { list-style: disc outside; margin: 0 0 0.75rem; padding-left: 1.5rem; }
.vehicle-desc ol          { list-style: decimal outside; margin: 0 0 0.75rem; padding-left: 1.5rem; }
.vehicle-desc li          { margin-bottom: 0.25rem; }
.vehicle-desc ul ul, .vehicle-desc ol ul { list-style: circle outside; margin-top: 0.25rem; }
.vehicle-desc ul ol, .vehicle-desc ol ol { list-style: decimal outside; margin-top: 0.25rem; }
.vehicle-desc strong      { font-weight: 700; color: var(--color-ink); }
.vehicle-desc em          { font-style: italic; }
.vehicle-desc s           { text-decoration: line-through; color: var(--color-ink-muted); }
.vehicle-desc blockquote  {
    margin: 1rem 0; padding: 0.25rem 0 0.25rem 1rem;
    border-left: 3px solid var(--brand-600);
    color: var(--color-ink-soft); font-style: italic;
}
.vehicle-desc hr          { border: 0; border-top: 1px solid var(--color-border); margin: 1.5rem 0; }
.vehicle-desc a           { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }
.vehicle-desc a:hover     { color: var(--brand-700); }

/* ---------- Row actions (admin list) ---------- */
.row-actions {
    display: inline-flex; align-items: center; gap: 0.25rem;
}
.row-actions__form { display: inline-flex; margin: 0; }

.row-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-ink-soft);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.row-action:hover { background: var(--color-surface-alt); color: var(--color-ink); border-color: var(--color-border-strong); }
.row-action:focus-visible { outline: var(--field-focus-outline); outline-offset: -1px; }

/* Stato attivo per ogni azione */
.row-action--publish.is-on {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success);
}
.row-action--featured.is-on {
    background: var(--brand-50);
    border-color: var(--brand-600);
    color: var(--brand-600);
}
.row-action--sold.is-on {
    background: #F3E8FF;
    border-color: #7C3AED;
    color: #7C3AED;
}
.row-action--edit:hover {
    background: var(--color-ink); color: #fff; border-color: var(--color-ink);
}

/* ---------- Brand picker (admin) ---------- */
.brand-picker {
    display: flex; flex-direction: column; gap: 0.75rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.brand-picker__placeholder {
    color: var(--color-ink-muted); font-size: 0.9375rem;
    font-style: italic;
}

.brand-picker__current {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap;
    padding: 0.375rem 0.5rem;
    min-height: 44px;
}
.brand-picker__current-inner {
    display: flex; align-items: center; gap: 0.75rem;
    font-weight: 600; color: var(--color-ink); font-size: 1rem;
}
.brand-picker__current-inner img {
    width: 40px; height: 40px; object-fit: contain;
    background: #fff;
    border-radius: var(--radius-sm); padding: 4px;
    border: 1px solid var(--color-border);
}
.brand-picker__current-icon {
    width: 40px; height: 40px;
    background: #fff; border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-ink-muted); font-weight: 700;
}

.brand-picker__custom-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    background: var(--color-warning); color: #fff;
    border-radius: 999px;
    font-size: 0.6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
}

.brand-picker__clear {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem; font-weight: 600;
    color: var(--color-ink-soft);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.brand-picker__clear:hover { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }

.brand-picker__grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.5rem;
    max-height: 320px; overflow-y: auto;
    padding: 0.25rem;
}

.brand-picker__item {
    display: flex; flex-direction: column; align-items: center; gap: 0.375rem;
    padding: 0.75rem 0.5rem;
    width: 100%;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
    min-height: 92px;
}
.brand-picker__item:hover {
    border-color: var(--brand-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.brand-picker__item img {
    width: 42px; height: 42px; object-fit: contain;
    display: block;
}
.brand-picker__item[aria-selected="true"] {
    border-color: var(--brand-600);
    background: var(--brand-50);
}
.brand-picker__initials {
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-surface-alt);
    color: var(--color-ink-soft);
    font-weight: 700; font-size: 0.9375rem;
    border-radius: var(--radius-sm);
}
.brand-picker__label {
    font-size: 0.75rem; font-weight: 500;
    color: var(--color-ink);
    line-height: 1.2; text-align: center;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brand-picker__empty {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-ink-soft);
    background: #fff;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-sm);
}

/* ---------- Photo manager (admin) ---------- */
.photo-mgr--disabled .photo-mgr__drop { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.photo-mgr__drop {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem 1.5rem;
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
    text-align: left;
}
.photo-mgr__drop:hover { border-color: var(--brand-600); background: #fff; }
.photo-mgr__drop.is-dragover { border-color: var(--brand-600); background: var(--brand-50); }
.photo-mgr__drop-icon {
    width: 48px; height: 48px; border-radius: var(--radius-md);
    background: #fff; color: var(--brand-600);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
}

.photo-mgr__item {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.photo-mgr__item img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
    cursor: zoom-in;
}
.photo-mgr__item.is-cover {
    border-color: var(--brand-600);
    box-shadow: 0 0 0 2px var(--brand-600) inset;
}

/* Pulsante Cover: compatto (solo icona) quando inattivo, esteso (icona + Cover) quando attivo */
.photo-mgr__cover-btn {
    position: absolute;
    top: 8px; left: 8px;
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 5px;
    background: rgba(255,255,255,0.92);
    color: var(--color-ink);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 999px;
    font-size: 0.75rem; font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background var(--t-fast), color var(--t-fast), padding var(--t-fast);
    min-height: 30px;
    min-width: 30px; justify-content: center;
}
.photo-mgr__cover-btn > [data-photo-cover-label] {
    display: none;
    padding-right: 5px;
}
.photo-mgr__cover-btn:hover {
    background: #fff;
    padding-right: 10px;
    padding-left: 8px;
}
.photo-mgr__cover-btn:hover > [data-photo-cover-label] { display: inline; }

.photo-mgr__cover-btn[aria-pressed="true"] {
    background: var(--brand-600); color: #fff; border-color: var(--brand-600);
    cursor: default;
    padding-right: 10px; padding-left: 8px;
}
.photo-mgr__cover-btn[aria-pressed="true"] > [data-photo-cover-label] { display: inline; }
.photo-mgr__cover-btn svg { color: currentColor; flex-shrink: 0; }

.photo-mgr__delete-btn {
    position: absolute;
    top: 8px; right: 8px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6); color: #fff;
    border: 0;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--t-fast);
}
.photo-mgr__delete-btn:hover { background: var(--color-danger); }

/* ---------- Mini WYSIWYG ---------- */
.wysiwyg {
    border: var(--field-border-width) solid var(--field-border-color);
    border-radius: var(--field-radius);
    background: var(--field-bg);
    overflow: hidden;
}
.wysiwyg:focus-within {
    border-color: var(--field-focus-border);
    outline: var(--field-focus-outline);
    outline-offset: var(--field-focus-outline-offset);
    box-shadow: var(--field-focus-shadow);
}
.wysiwyg__toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem;
    padding: 0.5rem;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
}
.wysiwyg__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--color-ink);
    font-size: 0.9375rem;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.wysiwyg__btn:hover { background: #fff; border-color: var(--color-border); }
.wysiwyg__btn.is-active { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.wysiwyg__btn.is-active svg { color: currentColor; }
.wysiwyg__sep {
    display: inline-block; width: 1px; height: 20px; background: var(--color-border); margin: 0 4px;
}
.wysiwyg__editor {
    min-height: 160px;
    padding: 0.875rem 1rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-ink);
    outline: none;
}
.wysiwyg__editor:empty::before {
    content: attr(data-placeholder);
    color: var(--field-placeholder);
    pointer-events: none;
}
.wysiwyg__editor h3 { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; margin: 0.75rem 0 0.375rem; font-weight: 600; }
.wysiwyg__editor p  { margin: 0 0 0.75rem; }
.wysiwyg__editor ul { list-style: disc outside; margin: 0 0 0.75rem; padding-left: 1.5rem; }
.wysiwyg__editor ol { list-style: decimal outside; margin: 0 0 0.75rem; padding-left: 1.5rem; }
.wysiwyg__editor li { margin-bottom: 0.25rem; }
.wysiwyg__editor ul ul, .wysiwyg__editor ol ul { list-style: circle outside; margin-top: 0.25rem; }
.wysiwyg__editor ul ol, .wysiwyg__editor ol ol { list-style: decimal outside; margin-top: 0.25rem; }
.wysiwyg__editor strong { font-weight: 700; }
.wysiwyg__editor em { font-style: italic; }
.wysiwyg__editor u { text-decoration: underline; }
.wysiwyg__editor s { text-decoration: line-through; color: var(--color-ink-muted); }
.wysiwyg__editor blockquote {
    margin: 0.5rem 0 0.75rem; padding: 0.25rem 0 0.25rem 1rem;
    border-left: 3px solid var(--brand-600);
    color: var(--color-ink-soft); font-style: italic;
}
.wysiwyg__editor hr {
    border: 0; border-top: 1px solid var(--color-border);
    margin: 1rem 0;
}
.wysiwyg__editor a {
    color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px;
}

/* Status bar (counter + info) */
.wysiwyg__status {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.375rem 0.75rem;
    background: var(--color-surface-alt);
    border-top: 1px solid var(--color-border);
    font-size: 0.75rem;
    color: var(--color-ink-muted);
}

/* Preview mode: editor diventa non-editable e riceve gli stili pubblici */
.wysiwyg.is-preview .wysiwyg__editor {
    background: var(--color-bg);
    outline: 2px dashed var(--brand-300);
    outline-offset: -2px;
}
.wysiwyg__btn[aria-pressed="true"] { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.wysiwyg__btn[aria-pressed="true"] svg { color: #fff; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease-out, transform 500ms ease-out; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Empty state ---------- */
.empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--color-ink-soft);
}
.empty svg { width: 64px; height: 64px; color: var(--color-ink-muted); margin: 0 auto 1rem; display: block; }
.empty__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--color-ink); margin-bottom: 0.5rem; }

/* ---------- Theme switcher FAB ---------- */
.ts {
    position: fixed;
    right: 1rem; bottom: 1rem;
    z-index: 80;
}
@media (min-width: 640px) { .ts { right: 1.25rem; bottom: 1.25rem; } }

.ts__fab {
    width: 52px; height: 52px;
    border-radius: var(--radius-full);
    background: var(--brand-600); color: #fff;
    border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: transform var(--t-fast), background var(--t-base);
}
.ts__fab:hover { transform: translateY(-2px); background: var(--brand-700); }
.ts__fab:focus-visible { outline: none; box-shadow: var(--shadow-focus), var(--shadow-lg); }
.ts__fab[aria-expanded="true"] { background: var(--brand-700); }

.ts__panel {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    width: min(320px, calc(100vw - 2rem));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1rem;
    transform-origin: bottom right;
    animation: ts-pop .16s ease-out;
}
@keyframes ts-pop {
    from { opacity: 0; transform: scale(.96) translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.ts__panel-head { margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); }

.ts__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }

.ts__item {
    display: flex; align-items: center; gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.5rem;
    background: transparent; border: 0; cursor: pointer;
    border-radius: var(--radius-sm);
    text-align: left;
    transition: background var(--t-fast);
    font-family: var(--font-sans);
    color: var(--color-ink);
}
.ts__item:hover { background: var(--color-surface-alt); }
.ts__item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ts__item[aria-current="true"] { background: var(--color-surface-alt); }

.ts__swatch {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

.ts__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ts__name { font-weight: 600; font-size: 0.9375rem; line-height: 1.2; }
.ts__tag  { font-size: 0.75rem; color: var(--color-ink-soft); line-height: 1.3; }

.ts__layouts { margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--color-border); }
.ts__layouts-grid { display: flex; flex-direction: column; gap: 0.125rem; }
.ts__layout-link {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-ink);
    font-size: 0.875rem; font-weight: 500;
    transition: background var(--t-fast);
}
.ts__layout-link:hover { background: var(--color-surface-alt); }
.ts__layout-link small { color: var(--color-ink-muted); font-weight: 400; }
.ts__layout-dot {
    width: 20px; height: 20px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}

.ts__panel-foot { margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--color-border); }

/* ---------- Background blobs (hero decoration) ---------- */
.hero__blob {
    position: absolute; pointer-events: none;
    width: 480px; height: 480px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    z-index: -1;
}
.hero__blob--1 { top: -100px; right: -100px; background: var(--brand-100); }
.hero__blob--2 { bottom: -150px; left: -120px; background: #DBEAFE; opacity: 0.4; }