/* Set padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* ============================================================
   Sport Garage – Sezione categorie auto (Nuove / Usate / KM0)
   ============================================================ */

html { scroll-behavior: smooth; }

/* --- Pillole di navigazione categoria --- */
.sg-cat-pills {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    padding: 30px 0 0;
}

.sg-cat-pill {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 9px;
    padding: 14px 34px;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.65);
    border: 2px solid rgba(255,255,255,0.18);
    background: transparent;
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
}

.sg-cat-pill i { font-size: 14px; }

.sg-cat-pill:hover {
    color: #fff;
    text-decoration: none;
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
    -webkit-box-shadow: 0 8px 22px rgba(0,0,0,0.4);
            box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}

.sg-pill-nuovo:hover { border-color: #e74c3c; background: rgba(231,76,60,0.18); }
.sg-pill-usato:hover { border-color: #2471a3; background: rgba(36,113,163,0.18); }
.sg-pill-km0:hover   { border-color: #1e8449; background: rgba(30,132,73,0.18); }

/* --- Bande header per ogni sezione categoria --- */
.sg-cat-header { padding: 22px 0; }

.sg-header-nuovo { background: -webkit-linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
                   background:         linear-gradient(135deg, #c0392b 0%, #e74c3c 100%); }
.sg-header-usato { background: -webkit-linear-gradient(135deg, #1a5276 0%, #2471a3 100%);
                   background:         linear-gradient(135deg, #1a5276 0%, #2471a3 100%); }
.sg-header-km0   { background: -webkit-linear-gradient(135deg, #145a32 0%, #1e8449 100%);
                   background:         linear-gradient(135deg, #145a32 0%, #1e8449 100%); }

.sg-cat-icon {
    font-size: 38px;
    color: rgba(255,255,255,0.85);
    margin-right: 14px;
}

.sg-cat-title {
    color: #fff;
    margin: 0 0 4px;
    font-size: 1.5rem;
}

.sg-cat-subtitle {
    color: rgba(255,255,255,0.72);
    margin: 0;
    font-size: 0.9rem;
}

/* Sfondo alternato per la sezione usate */
.sg-sec-usate { background: #f7f7f7; }

/* --- Badge colorato su ogni card auto --- */
.de-item .d-img { position: relative; overflow: hidden; }

.sg-car-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    z-index: 9;
    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.sg-badge-nuovo { background: #e74c3c; }
.sg-badge-usato { background: #2471a3; }
.sg-badge-km0   { background: #1e8449; }

/* --- Responsive --- */
@media (max-width: 576px) {
    .sg-cat-pill   { padding: 11px 20px; font-size: 0.75rem; }
    .sg-cat-icon   { font-size: 26px; margin-right: 10px; }
    .sg-cat-title  { font-size: 1.2rem; }
}

/* ============================================================
   Modern Car Cards – senza icone
   ============================================================ */

/* Override del de-item del template */
.de-item.sg-car-card {
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #fff !important;
    -webkit-box-shadow: 0 4px 28px rgba(0,0,0,0.09) !important;
            box-shadow: 0 4px 28px rgba(0,0,0,0.09) !important;
    -webkit-transition: -webkit-box-shadow 0.32s ease, -webkit-transform 0.32s ease;
            transition: box-shadow 0.32s ease, transform 0.32s ease;
    border: 1px solid #ebebeb !important;
    padding: 0 !important;
    margin-bottom: 24px;
}

.de-item.sg-car-card:hover {
    -webkit-box-shadow: 0 14px 44px rgba(0,0,0,0.15) !important;
            box-shadow: 0 14px 44px rgba(0,0,0,0.15) !important;
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
}

/* Foto fissa con object-fit */
.sg-card-img {
    position: relative;
    overflow: hidden;
    height: 215px;
}

.sg-card-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    -webkit-transition: -webkit-transform 0.45s ease;
            transition: transform 0.45s ease;
}

.de-item.sg-car-card:hover .sg-card-img img {
    -webkit-transform: scale(1.06);
            transform: scale(1.06);
}

/* Corpo card */
.sg-card-body {
    padding: 18px 20px 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 13px;
}

/* Riga modello + carburante */
.sg-card-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 8px;
}

.sg-car-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111;
    margin: 0;
    line-height: 1.3;
}

/* Pill carburante – solo testo */
.sg-fuel-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #f0f0f0;
    color: #555;
    white-space: nowrap;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-top: 3px;
}

/* Chip attributi – niente icone */
.sg-car-attrs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid #f2f2f2;
}

.sg-car-attrs span {
    font-size: 0.73rem;
    color: #555;
    background: #f5f5f5;
    padding: 4px 13px;
    border-radius: 6px;
    font-weight: 500;
}

/* Footer: prezzo + bottone */
.sg-card-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top: 12px;
    border-top: 1px solid #f2f2f2;
}

.sg-price-block { line-height: 1; }

.sg-price-label {
    display: block;
    font-size: 0.67rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #bbb;
    margin-bottom: 5px;
}

.sg-price-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: #111;
}

/* Bottone Dettagli */
a.btn-main.sg-btn-details {
    padding: 10px 22px !important;
    border-radius: 8px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
}

/* ============================================================
   Enhanced Section Cars – Navigazione, intestazioni, strip CTA
   ============================================================ */

/* --- Barra di navigazione rapida sticky --- */
.sg-section-nav-wrap {
    background: #111;
    border-bottom: 2px solid rgba(255,255,255,0.08);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 90;
}

.sg-section-nav-wrap .sg-cat-pills {
    padding: 14px 0;
    gap: 20px;
}

/* Stato attivo delle pill */
.sg-pill-nuovo.sg-pill-active { border-color: #e74c3c; background: rgba(231,76,60,0.28); color: #fff; }
.sg-pill-usato.sg-pill-active { border-color: #2471a3; background: rgba(36,113,163,0.28); color: #fff; }
.sg-pill-km0.sg-pill-active   { border-color: #1e8449; background: rgba(30,132,73,0.28);  color: #fff; }

/* --- Wrapper sezione car --- */
.sg-car-section { position: relative; overflow: hidden; }

/* --- Ghost text decorativo nell'intestazione --- */
.sg-ghost-text {
    position: absolute;
    top: 50%;
    right: 4%;
    -webkit-transform: translateY(-55%);
            transform: translateY(-55%);
    font-size: 120px;
    font-size: -webkit-clamp(60px, 12vw, 160px);
    font-size: clamp(60px, 12vw, 160px);
    font-weight: 900;
    text-transform: uppercase;
    color: rgba(255,255,255,0.065);
    letter-spacing: -4px;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    line-height: 1;
    white-space: nowrap;
    z-index: 0;
}

/* --- Intestazione categoria potenziata --- */
.sg-cat-header {
    padding: 46px 0 84px !important;
    position: relative;
    overflow: hidden;
}

/* Il container reale deve stare sopra il ghost text */
.sg-header-content {
    position: relative;
    z-index: 2;
}

/* --- Overline sopra il titolo --- */
.sg-header-overline {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3.5px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 6px;
}

/* --- Cerchio icona --- */
.sg-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 34px;
    color: #fff;
    margin-right: 12px;
    -webkit-transition: -webkit-transform 0.4s ease;
            transition: transform 0.4s ease;
    -webkit-box-shadow: 0 8px 28px rgba(0,0,0,0.28);
            box-shadow: 0 8px 28px rgba(0,0,0,0.28);
}

.sg-icon-circle:hover {
    -webkit-transform: rotate(15deg) scale(1.12);
            transform: rotate(15deg) scale(1.12);
}

.sg-icon-circle-nuovo,
.sg-icon-circle-usato,
.sg-icon-circle-km0 {
    background: rgba(255,255,255,0.18);
    border: 2px solid rgba(255,255,255,0.35);
}

/* --- Badge "disponibili ora" --- */
.sg-header-badge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 40px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.32);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}

/* --- Wave SVG di transizione in fondo all'header --- */
.sg-wave-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 0;
    overflow: hidden;
    z-index: 1;
}

.sg-wave-bottom svg {
    display: block;
    width: 100%;
    height: 56px;
}

/* --- Area carousel con pattern puntinato --- */
.sg-carousel-area {
    position: relative;
    background: #fff;
    padding-bottom: 4px;
}

.sg-carousel-area-gray { background: #f7f7f7; }

.sg-carousel-area::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: -webkit-radial-gradient(circle, rgba(0,0,0,0.032) 1px, transparent 1px);
    background-image:         radial-gradient(circle, rgba(0,0,0,0.032) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

.sg-carousel-area > * {
    position: relative;
    z-index: 1;
}

/* --- Strip CTA colorata --- */
.sg-cta-strip { padding: 30px 0; }

.sg-cta-nuovo {
    background: -webkit-linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
    background:         linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
}
.sg-cta-usato {
    background: -webkit-linear-gradient(135deg, #1a5276 0%, #2471a3 100%);
    background:         linear-gradient(135deg, #1a5276 0%, #2471a3 100%);
}
.sg-cta-km0 {
    background: -webkit-linear-gradient(135deg, #145a32 0%, #1e8449 100%);
    background:         linear-gradient(135deg, #145a32 0%, #1e8449 100%);
}

.sg-cta-eyebrow {
    display: block;
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 5px;
}

p.sg-cta-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

.sg-cta-inner { gap: 16px; }

.sg-cta-btn {
    white-space: nowrap;
    background: #fff !important;
    color: #111 !important;
    border-radius: 50px !important;
    padding: 14px 34px !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px !important;
    -webkit-box-shadow: 0 6px 22px rgba(0,0,0,0.28) !important;
            box-shadow: 0 6px 22px rgba(0,0,0,0.28) !important;
    -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease !important;
            transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.sg-cta-btn:hover {
    -webkit-transform: translateY(-3px) !important;
            transform: translateY(-3px) !important;
    -webkit-box-shadow: 0 14px 32px rgba(0,0,0,0.36) !important;
            box-shadow: 0 14px 32px rgba(0,0,0,0.36) !important;
    color: #111 !important;
    text-decoration: none !important;
}

/* --- Frecce Owl Carousel (car-home-carousel) più grandi e stilizzate --- */
.car-home-carousel.owl-carousel .owl-nav .owl-prev,
.car-home-carousel.owl-carousel .owl-nav .owl-next {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: #111 !important;
    color: #fff !important;
    -webkit-box-shadow: 0 4px 20px rgba(0,0,0,0.22) !important;
            box-shadow: 0 4px 20px rgba(0,0,0,0.22) !important;
    -webkit-transition: background 0.3s ease, -webkit-transform 0.3s ease !important;
            transition: background 0.3s ease, transform 0.3s ease !important;
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
}

.car-home-carousel.owl-carousel .owl-nav .owl-prev:hover,
.car-home-carousel.owl-carousel .owl-nav .owl-next:hover {
    -webkit-transform: scale(1.12) !important;
            transform: scale(1.12) !important;
}

#sec-nuove .car-home-carousel.owl-carousel .owl-nav .owl-prev:hover,
#sec-nuove .car-home-carousel.owl-carousel .owl-nav .owl-next:hover {
    background: #e74c3c !important;
}

#sec-usate .car-home-carousel.owl-carousel .owl-nav .owl-prev:hover,
#sec-usate .car-home-carousel.owl-carousel .owl-nav .owl-next:hover {
    background: #2471a3 !important;
}

#sec-km0 .car-home-carousel.owl-carousel .owl-nav .owl-prev:hover,
#sec-km0 .car-home-carousel.owl-carousel .owl-nav .owl-next:hover {
    background: #1e8449 !important;
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .sg-ghost-text { right: 2%; }
    .sg-icon-circle { width: 68px; height: 68px; font-size: 28px; }
}

@media (max-width: 767px) {
    .sg-ghost-text { display: none; }
    .sg-cat-header { padding: 30px 0 72px !important; }
    .sg-cta-inner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        text-align: center;
    }
    p.sg-cta-title { font-size: 1rem; }
    .sg-cta-btn { width: 100%; text-align: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; }
}

@media (max-width: 480px) {
    .sg-section-nav-wrap .sg-cat-pills { gap: 10px; }
    .sg-cat-pill { padding: 10px 18px; font-size: 0.73rem; }
    .sg-icon-circle { width: 58px; height: 58px; font-size: 24px; }
}

/* ============================================================
   Effetti avanzati – intestazioni, card, prezzi, bottoni
   ============================================================ */

/* --- Titolo sezione più grande e con ombra --- */
h3.sg-cat-title {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    text-shadow: 0 3px 14px rgba(0,0,0,0.25) !important;
    letter-spacing: -0.5px !important;
}

/* --- Strisce diagonali racing sull'header (pseudo-elementi) --- */
.sg-cat-header::before,
.sg-cat-header::after {
    content: '';
    position: absolute;
    top: -30%;
    height: 200%;
    -webkit-transform: skewX(-14deg);
            transform: skewX(-14deg);
    pointer-events: none;
    z-index: 0;
}

.sg-cat-header::before {
    right: 20%;
    width: 130px;
    background: rgba(255,255,255,0.06);
}

.sg-cat-header::after {
    right: 27%;
    width: 55px;
    background: rgba(255,255,255,0.045);
}

/* --- Top accent bar sulla card (appare on hover) --- */
.de-item.sg-car-card {
    border-top: 3px solid transparent !important;
    -webkit-transition:
        border-color 0.3s ease,
        -webkit-box-shadow 0.32s ease,
        -webkit-transform 0.32s ease !important;
            transition:
        border-color 0.3s ease,
        box-shadow 0.32s ease,
        transform 0.32s ease !important;
}

#sec-nuove .de-item.sg-car-card:hover { border-top-color: #e74c3c !important; -webkit-box-shadow: 0 18px 52px rgba(231,76,60,0.18) !important; box-shadow: 0 18px 52px rgba(231,76,60,0.18) !important; }
#sec-usate .de-item.sg-car-card:hover { border-top-color: #2471a3 !important; -webkit-box-shadow: 0 18px 52px rgba(36,113,163,0.18) !important; box-shadow: 0 18px 52px rgba(36,113,163,0.18) !important; }
#sec-km0   .de-item.sg-car-card:hover { border-top-color: #1e8449 !important; -webkit-box-shadow: 0 18px 52px rgba(30,132,73,0.18)  !important; box-shadow: 0 18px 52px rgba(30,132,73,0.18)  !important; }

/* --- Overlay colore sull'immagine al hover (tinta categoria) --- */
.sg-card-img::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.4s ease;
            transition: opacity 0.4s ease;
    z-index: 2;
}

#sec-nuove .sg-card-img::after { background: -webkit-linear-gradient(135deg, rgba(231,76,60,0.28) 0%, transparent 55%); background: linear-gradient(135deg, rgba(231,76,60,0.28) 0%, transparent 55%); }
#sec-usate .sg-card-img::after { background: -webkit-linear-gradient(135deg, rgba(36,113,163,0.28) 0%, transparent 55%); background: linear-gradient(135deg, rgba(36,113,163,0.28) 0%, transparent 55%); }
#sec-km0   .sg-card-img::after { background: -webkit-linear-gradient(135deg, rgba(30,132,73,0.28) 0%, transparent 55%);  background: linear-gradient(135deg, rgba(30,132,73,0.28) 0%, transparent 55%);  }

.de-item.sg-car-card:hover .sg-card-img::after { opacity: 1; }

/* --- Badge immagine entra in scena al load con fade-up --- */
.sg-car-badge {
    -webkit-animation: badgePop 0.5s ease both;
            animation: badgePop 0.5s ease both;
}
@-webkit-keyframes badgePop {
    from { -webkit-transform: scale(0.6) translateY(6px); transform: scale(0.6) translateY(6px); opacity: 0; }
    to   { -webkit-transform: scale(1) translateY(0);     transform: scale(1) translateY(0);     opacity: 1; }
}
@keyframes badgePop {
    from { transform: scale(0.6) translateY(6px); opacity: 0; }
    to   { transform: scale(1) translateY(0);     opacity: 1; }
}

/* --- Prezzo colorato per categoria --- */
#sec-nuove .sg-price-value { color: #e74c3c !important; }
#sec-usate .sg-price-value { color: #2471a3 !important; }
#sec-km0   .sg-price-value { color: #1e8449 !important; }

/* --- Bottone Dettagli colorato per categoria --- */
#sec-nuove a.btn-main.sg-btn-details { background: #e74c3c !important; border-color: #e74c3c !important; color: #fff !important; }
#sec-usate a.btn-main.sg-btn-details { background: #2471a3 !important; border-color: #2471a3 !important; color: #fff !important; }
#sec-km0   a.btn-main.sg-btn-details { background: #1e8449 !important; border-color: #1e8449 !important; color: #fff !important; }

#sec-nuove a.btn-main.sg-btn-details:hover { background: #c0392b !important; border-color: #c0392b !important; }
#sec-usate a.btn-main.sg-btn-details:hover { background: #1a5276 !important; border-color: #1a5276 !important; }
#sec-km0   a.btn-main.sg-btn-details:hover { background: #145a32 !important; border-color: #145a32 !important; }

/* --- Fuel pill colorata per categoria --- */
#sec-nuove .sg-fuel-pill { background: rgba(231,76,60,0.12); color: #c0392b; font-weight: 700; }
#sec-usate .sg-fuel-pill { background: rgba(36,113,163,0.12); color: #1a5276; font-weight: 700; }
#sec-km0   .sg-fuel-pill { background: rgba(30,132,73,0.12);  color: #145a32; font-weight: 700; }

/* --- Attributi card con dot colorato per categoria --- */
#sec-nuove .sg-car-attrs span { border-left: 3px solid #e74c3c; }
#sec-usate .sg-car-attrs span { border-left: 3px solid #2471a3; }
#sec-km0   .sg-car-attrs span { border-left: 3px solid #1e8449; }

/* --- Header sottotitolo più visibile --- */
.sg-cat-subtitle {
    color: rgba(255,255,255,0.82) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
}

/* --- Prezzo label maiuscoletto tracciante --- */
.sg-price-label {
    letter-spacing: 2px !important;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #aaa !important;
}

/* --- sg-car-name più grande --- */
.sg-car-name {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.25 !important;
}

/* --- Pill nav strip più alta e visibile --- */
.sg-section-nav-wrap { border-bottom: none !important; }
.sg-section-nav-wrap .sg-cat-pill {
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    padding: 14px 34px !important;
}

/* --- Badge pill numerica su ogni pill --- (rimosso ::before per evitare conflitto con l'icona fa) */

/* ============================================================
   Pagine listing (Usato / Nuovo / KM0)
   ============================================================ */

/* --- Hero subheader potenziato --- */
.sg-page-hero {
    position: relative;
    min-height: 420px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow: hidden;
}

.sg-hero-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
    z-index: 1;
}

.sg-hero-usato .sg-hero-overlay { background: -webkit-linear-gradient(135deg, rgba(26,82,118,0.84) 0%, rgba(36,113,163,0.6) 100%);  background: linear-gradient(135deg, rgba(26,82,118,0.84) 0%, rgba(36,113,163,0.6) 100%);  }
.sg-hero-nuovo .sg-hero-overlay { background: -webkit-linear-gradient(135deg, rgba(192,57,43,0.84) 0%, rgba(231,76,60,0.6) 100%);  background: linear-gradient(135deg, rgba(192,57,43,0.84) 0%, rgba(231,76,60,0.6) 100%);  }
.sg-hero-km0   .sg-hero-overlay { background: -webkit-linear-gradient(135deg, rgba(20,90,50,0.84) 0%, rgba(30,132,73,0.6) 100%);   background: linear-gradient(135deg, rgba(20,90,50,0.84) 0%, rgba(30,132,73,0.6) 100%);   }

.sg-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 90px 0 110px;
}

.sg-hero-overline {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 14px;
}

.sg-hero-title {
    font-size: 3.6rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.05;
    margin-bottom: 18px;
    text-shadow: 0 4px 22px rgba(0,0,0,0.3);
    letter-spacing: -1px;
}

.sg-hero-highlight {
    display: block;
    opacity: 0.78;
    font-size: 2.4rem;
}

.sg-hero-sub {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.75);
    margin-bottom: 30px;
    font-weight: 400;
}

.sg-hero-stats {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 14px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.sg-stat-pill {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    padding: 12px 26px;
    border-radius: 40px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}

.sg-stat-pill i { font-size: 13px; opacity: 0.8; }

/* --- Sezione listing --- */
.sg-listing-section {
    padding: 52px 0 90px;
}

.sg-listing-usato { background: #f5f5f5; }
.sg-listing-nuovo { background: #fff; }
.sg-listing-km0   { background: #fff; }

/* Listing header con overline, titolo e contatore */
.sg-listing-header {
    padding-bottom: 30px;
    border-bottom: 2px solid #e8e8e8;
    margin-bottom: 40px;
}

.sg-listing-header-inner { gap: 14px; }

.sg-listing-overline {
    display: block;
    font-size: 0.63rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3.5px;
    color: #bbb;
    margin-bottom: 4px;
}

.sg-listing-title {
    font-size: 1.9rem;
    font-weight: 900;
    color: #111;
    margin: 0;
    letter-spacing: -0.5px;
}

.sg-listing-count {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 40px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sg-listing-usato .sg-listing-count { background: rgba(36,113,163,0.1);  color: #1a5276; }
.sg-listing-nuovo .sg-listing-count { background: rgba(231,76,60,0.1);   color: #c0392b; }
.sg-listing-km0   .sg-listing-count { background: rgba(30,132,73,0.1);   color: #145a32; }

/* --- Anno badge in sovrimpressione sull'immagine --- */
.sg-card-year-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 5px 12px;
    border-radius: 6px;
    background: rgba(0,0,0,0.68);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    z-index: 3;
}

/* --- Griglia specs nella card --- */
.sg-car-specs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 10px 8px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
}

.sg-spec-item {
    width: calc(33.33% - 6px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.sg-spec-label {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #c0c0c0;
    line-height: 1;
    margin-bottom: 3px;
}

.sg-spec-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Empty state --- */
.sg-empty-state {
    text-align: center;
    padding: 90px 20px;
}

.sg-empty-icon {
    font-size: 72px;
    color: #ddd;
    margin-bottom: 22px;
}

.sg-empty-state h4 {
    font-size: 1.5rem;
    color: #555;
    margin-bottom: 12px;
}

.sg-empty-state p {
    color: #888;
    max-width: 420px;
    margin: 0 auto 28px;
    font-size: 0.95rem;
}

/* --- Stili card specifici per pagina listing --- */

/* Fix: padding e flex sul corpo card (la regola template .de-item .d-info ha
   specificità più alta, quindi serve un selettore più specifico) */
.de-item.sg-car-card .d-info.sg-card-body {
    padding: 16px 18px 12px !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    gap: 0 !important;
}

/* Fix: riga prezzo come flexbox, con padding orizzontale coerente al corpo card.
   Il template usa .de-item .d-price { position: relative } e mette il btn-main
   in position:absolute, quindi lo sovrascriviamo esplicitamente */
.de-item.sg-car-card .d-price.sg-price-row {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
            justify-content: space-between !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
    padding: 14px 18px 18px !important;
    margin-top: 0 !important;
    border-top: 1px solid #ebebeb;
}

/* Annulla il position:absolute sul btn-main dentro .d-price (regola template) */
.de-item.sg-car-card .d-price.sg-price-row .btn-main {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    padding: 10px 22px !important;
}

/* Fuel pill a margine inferiore consistente */
.de-item.sg-car-card .sg-fuel-pill {
    display: inline-block;
    margin-bottom: 8px;
}

/* Car name dentro la card listing */
.de-item.sg-car-card .sg-car-name {
    margin-bottom: 0;
}

.sg-listing-usato .de-item.sg-car-card:hover { border-top-color: #2471a3 !important; -webkit-box-shadow: 0 18px 52px rgba(36,113,163,0.18) !important; box-shadow: 0 18px 52px rgba(36,113,163,0.18) !important; }
.sg-listing-nuovo .de-item.sg-car-card:hover { border-top-color: #e74c3c !important; -webkit-box-shadow: 0 18px 52px rgba(231,76,60,0.18)  !important; box-shadow: 0 18px 52px rgba(231,76,60,0.18)  !important; }
.sg-listing-km0   .de-item.sg-car-card:hover { border-top-color: #1e8449 !important; -webkit-box-shadow: 0 18px 52px rgba(30,132,73,0.18)   !important; box-shadow: 0 18px 52px rgba(30,132,73,0.18)   !important; }

.sg-listing-usato .sg-price-value { color: #2471a3 !important; }
.sg-listing-nuovo .sg-price-value { color: #e74c3c !important; }
.sg-listing-km0   .sg-price-value { color: #1e8449 !important; }

.sg-listing-usato a.btn-main.sg-btn-details { background: #2471a3 !important; border-color: #2471a3 !important; color: #fff !important; }
.sg-listing-nuovo a.btn-main.sg-btn-details { background: #e74c3c !important; border-color: #e74c3c !important; color: #fff !important; }
.sg-listing-km0   a.btn-main.sg-btn-details { background: #1e8449 !important; border-color: #1e8449 !important; color: #fff !important; }

.sg-listing-usato a.btn-main.sg-btn-details:hover { background: #1a5276 !important; border-color: #1a5276 !important; }
.sg-listing-nuovo a.btn-main.sg-btn-details:hover { background: #c0392b !important; border-color: #c0392b !important; }
.sg-listing-km0   a.btn-main.sg-btn-details:hover { background: #145a32 !important; border-color: #145a32 !important; }

.sg-listing-usato .sg-fuel-pill { background: rgba(36,113,163,0.12); color: #1a5276; font-weight: 700; }
.sg-listing-nuovo .sg-fuel-pill { background: rgba(231,76,60,0.12);  color: #c0392b; font-weight: 700; }
.sg-listing-km0   .sg-fuel-pill { background: rgba(30,132,73,0.12);  color: #145a32; font-weight: 700; }

.sg-listing-usato .sg-card-img::after { background: -webkit-linear-gradient(135deg, rgba(36,113,163,0.28) 0%, transparent 55%); background: linear-gradient(135deg, rgba(36,113,163,0.28) 0%, transparent 55%); }
.sg-listing-nuovo .sg-card-img::after { background: -webkit-linear-gradient(135deg, rgba(231,76,60,0.28)  0%, transparent 55%); background: linear-gradient(135deg, rgba(231,76,60,0.28)  0%, transparent 55%); }
.sg-listing-km0   .sg-card-img::after { background: -webkit-linear-gradient(135deg, rgba(30,132,73,0.28)  0%, transparent 55%); background: linear-gradient(135deg, rgba(30,132,73,0.28)  0%, transparent 55%); }

/* --- Responsive listing --- */
@media (max-width: 991px) {
    .sg-hero-title { font-size: 2.6rem; }
    .sg-hero-highlight { font-size: 1.9rem; }
    .sg-hero-content { padding: 70px 0 90px; }
}

@media (max-width: 767px) {
    .sg-page-hero { min-height: 340px; }
    .sg-hero-title { font-size: 2rem; }
    .sg-hero-highlight { font-size: 1.5rem; }
    .sg-hero-content { padding: 55px 0 75px; }
    .sg-spec-item { width: calc(50% - 4px); }
}

@media (max-width: 480px) {
    .sg-stat-pill { padding: 10px 18px; font-size: 0.78rem; }
    .sg-hero-title { font-size: 1.7rem; }
}