@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Barlow+Condensed:wght@700;800&family=Inter:wght@300;400;500;600&display=swap');
/* ============================================================================
 * CHILD THEME: gsbike_theme
 * File: /var/www/gsbike-photo.com/themes/gsbike_theme/assets/css/gsbike-theme.css
 * ----------------------------------------------------------------------------
 * Foglio di stile globale. Caricato DOPO classic (priority 200) -> vince per
 * cascata senza !important salvo dove Bootstrap di classic e troppo specifico.
 *
 * INDICE
 *   1.  Variabili (palette brand + type scale + spacing)
 *   2.  Reset minimale e base tipografica
 *   3.  Container 1200px
 *   4.  Divisore firma oro -> blu
 *   5.  Titoli sezione bicolore
 *   6.  Header sticky + nav + hamburger mobile
 *   7.  Slider full-width (override ps_imageslider)
 *   8.  Sezione mappa eventi (intro)
 *   9.  Sezione prodotti recenti + bottone "vedi tutte"
 *   10. Card prodotto
 *   11. Footer
 *   12. Bottoni brand
 *   13. Responsive / mobile-first refinements
 *   14. Accessibilita (focus, reduced-motion)
 * ========================================================================== */

/* === 1. VARIABILI ========================================================= */
:root {
    /* Palette brand (allineata al logo ufficiale) */
    --blu-logo:     #263675;   /* blu del logo - testi, UI, header */
    --oro-logo:     #AF9A67;   /* oro del logo - accenti, bordi, hover */
    --bianco-caldo: #FAFAFA;   /* sfondo base full-width */

    /* Tinte derivate (interazione) */
    --blu-medio:    #3D4FA0;   /* hover/interattivo */
    --blu-muted:    #7A82B8;   /* testi secondari */
    --oro-scuro:    #978152;   /* hover oro */
    --grigio-bordo: #ECECEA;   /* hairline su fondo chiaro */
    --bianco-puro:  #FFFFFF;   /* card body */

    /* Font */
    --font-brand:   'Rajdhani', 'Barlow Condensed', sans-serif;
    --font-display: 'Barlow Condensed', sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;

    /* Type scale */
    --fs-section-title: clamp(1.9rem, 4vw, 2.6rem); /* "MAPPA DEGLI EVENTI" */
    --fs-eyebrow:       0.82rem;
    --fs-body:          1rem;
    --fs-small:         0.875rem;

    /* Layout */
    --container-max: 1200px;
    --gutter:        1.25rem;
    --header-h:      72px;

    /* Raggi e ombre */
    --radius-card:   16px;
    --radius-pill:   999px;
    --shadow-card:   0 6px 22px rgba(38, 54, 117, 0.08);
    --shadow-card-hover: 0 12px 34px rgba(38, 54, 117, 0.16);

    /* Transizioni */
    --t-fast:  150ms ease;
    --t-med:   260ms cubic-bezier(.22,.61,.36,1);
}

/* === 2. RESET MINIMALE E BASE TIPOGRAFICA ================================= */
body {
    background-color: var(--bianco-caldo);
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--blu-logo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

.gsbike-theme h1, .gsbike-theme h2, .gsbike-theme h3,
.gsbike-section h1, .gsbike-section h2, .gsbike-section h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--blu-logo);
}

a {
    color: var(--blu-logo);
    transition: color var(--t-fast);
}
a:hover { color: var(--oro-logo); text-decoration: none; }

/* === 3. CONTAINER 1200px ================================================== */
/* full-width esterno, contenuto centrato a max 1200px. */
.gsbike-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Le sezioni della home: full-width verticale, respiro coerente */
.gsbike-section {
    padding-block: clamp(2.5rem, 6vw, 4rem);
}

/* Full-bleed: sfonda il container ristretto del layout e va edge-to-edge.
   Usata dallo slider, che deve toccare i bordi del viewport. Tecnica:
   50% della larghezza viewport meno 50% della larghezza elemento, come
   margine negativo a sinistra e destra. overflow-x:hidden sul body evita
   la barra di scorrimento orizzontale dovuta a 100vw + scrollbar. */
.gsbike-fullbleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
}

/* === 4. DIVISORE FIRMA ORO -> BLU ========================================= */
/* Elemento-firma del sito: linea 2px sfumata, contenuta nel container. */
.gsbike-divider {
    height: 2px;
    border: 0;
    max-width: var(--container-max);
    margin: clamp(1.5rem, 4vw, 2.5rem) auto;
    background: linear-gradient(90deg, var(--oro-logo), var(--blu-logo));
}

/* === 5. TITOLI SEZIONE BICOLORE =========================================== */
.gsbike-section-head {
    text-align: center;
    margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

/* eyebrow es. "DOVE SIAMO STATI" / "APPENA PUBBLICATE" */
.gsbike-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5ch;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-eyebrow);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--oro-logo);
    margin-bottom: .6rem;
}
.gsbike-eyebrow svg,
.gsbike-eyebrow i { color: var(--oro-logo); }

/* titolo grande bicolore */
.gsbike-section-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-section-title);
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0;
}
.gsbike-section-title .is-blu { color: var(--blu-logo); }
.gsbike-section-title .is-oro { color: var(--oro-logo); }

.gsbike-section-sub {
    margin-top: .75rem;
    color: var(--blu-muted);
    font-size: var(--fs-body);
}

/* === 6. HEADER STICKY + NAV + HAMBURGER =================================== */
#header.gsbike-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bianco-caldo);
    border-bottom: 1px solid var(--grigio-bordo);
    box-shadow: 0 2px 10px rgba(38, 54, 117, 0.04);
}
.gsbike-header__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--header-h);
}

/* logo + lockup testo */
.gsbike-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex: 0 0 auto;
}
.gsbike-brand__logo {
    height: 46px;
    width: auto;
    display: block;
}
.gsbike-brand__lockup {
    font-family: var(--font-brand);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1;
    display: flex;
    flex-direction: column;
}
.gsbike-brand__lockup .gs { color: var(--blu-logo); }
.gsbike-brand__lockup .ph { color: var(--oro-logo); }

/* nav desktop */
.gsbike-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1.75rem;
}
.gsbike-nav__link {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--blu-logo);
    display: inline-flex;
    align-items: center;
    gap: .45ch;
    position: relative;
}
.gsbike-nav__link::after {
    content: "";
    position: absolute;
    left: 0; bottom: -6px;
    width: 0; height: 2px;
    background: var(--oro-logo);
    transition: width var(--t-med);
}
.gsbike-nav__link:hover { color: var(--oro-logo); }
.gsbike-nav__link:hover::after { width: 100%; }

/* language switcher IT | EN */
.gsbike-lang {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
}
.gsbike-lang a, .gsbike-lang span { color: var(--blu-muted); padding: .15rem .35rem; }
.gsbike-lang .is-active {
    color: var(--blu-logo);
    background: rgba(38,54,117,.07);
    border-radius: 6px;
}
.gsbike-lang .sep { color: var(--grigio-bordo); padding: 0; }

/* bottone login header */
.gsbike-login {
    display: inline-flex;
    align-items: center;
    gap: .5ch;
    background: var(--blu-logo);
    color: var(--bianco-caldo);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .6rem 1.15rem;
    border-radius: var(--radius-pill);
    transition: background var(--t-fast), transform var(--t-fast);
}
.gsbike-login:hover { background: var(--blu-medio); color: var(--bianco-caldo); transform: translateY(-1px); }

/* hamburger (nascosto su desktop) */
.gsbike-burger {
    display: none;
    margin-left: auto;
    width: 44px; height: 44px;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 10px;
}
.gsbike-burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--blu-logo);
    transition: transform var(--t-med), opacity var(--t-fast);
}
.gsbike-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gsbike-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gsbike-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* === 7. SLIDER FULL-WIDTH (override ps_imageslider) ======================= */
.gsbike-slider {
    width: 100%;
    position: relative;
}
/* ps_imageslider annida la slide dentro un proprio .container Bootstrap
   (max-width ~1140px, centrato): questo impediva al full-bleed di riempire
   tutta la larghezza, lasciando spazio vuoto a destra. Qui neutralizziamo
   ogni container/row interno cosi la slide occupa il 100% del viewport. */
.gsbike-slider .container,
.gsbike-slider .container-fluid,
.gsbike-slider .row,
.gsbike-slider [class*="col-"] {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 100% !important;
}
/* L'immagine slide (1920x730) si deve vedere SEMPRE INTERA, mai ritagliata.
   Niente altezza fissa + object-fit:cover (quello tagliava i lati su schermi
   piu stretti di 1920px, mostrando solo il centro). L'immagine e responsive:
   larghezza 100%, altezza automatica -> mantiene il rapporto 1920:730 e si
   vede tutta. Su viewport molto larghi il rapporto regge perche la slide e
   full-bleed (100vw). */
.gsbike-slider .carousel,
.gsbike-slider .carousel-inner,
.gsbike-slider .carousel-item {
    width: 100%;
    height: auto !important;
}
.gsbike-slider .carousel-item img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    display: block;
    /* nessun object-fit: con height:auto l'immagine mantiene il suo rapporto
       nativo (1920x730) e si vede SEMPRE INTERA, a tutta larghezza. Il !important
       neutralizza eventuali altezze fisse imposte da Bootstrap o dal modulo
       ps_imageslider che causavano il crop (visualizzazione della sola fascia
       centrale). */
    object-fit: fill;
}
/* frecce tonde */
.gsbike-slider .carousel-control-prev,
.gsbike-slider .carousel-control-next {
    width: auto;
    opacity: 1;
}
.gsbike-slider .carousel-control-prev-icon,
.gsbike-slider .carousel-control-next-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    background-color: rgba(38, 54, 117, .55);
    background-size: 40%;
    backdrop-filter: blur(2px);
    transition: background-color var(--t-fast);
}
.gsbike-slider .carousel-control-prev:hover .carousel-control-prev-icon,
.gsbike-slider .carousel-control-next:hover .carousel-control-next-icon {
    background-color: var(--blu-logo);
}
/* indicatori */
.gsbike-slider .carousel-indicators li,
.gsbike-slider .carousel-indicators button {
    background-color: rgba(255,255,255,.6);
}
.gsbike-slider .carousel-indicators .active {
    background-color: var(--oro-logo);
}

/* === 8. SEZIONE MAPPA (intro) ============================================ */
.gsbike-map-section { padding-bottom: 0; }

/* === 9. SEZIONE PRODOTTI RECENTI ========================================= */
.gsbike-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: .5rem;
}
.gsbike-products-cta {
    text-align: center;
    margin-top: clamp(2rem, 5vw, 3rem);
}

/* === 10. CARD PRODOTTO =================================================== */
.gsbike-card {
    background: var(--bianco-puro);
    border: 1.5px solid var(--oro-logo);
    border-radius: var(--radius-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
    transition: transform var(--t-med), box-shadow var(--t-med);
}
.gsbike-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

/* area immagine con prezzo + acquista in overlay */
.gsbike-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.gsbike-card__img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--t-med);
}
.gsbike-card:hover .gsbike-card__img { transform: scale(1.04); }

/* gradiente per leggibilita di prezzo/bottone sull'immagine */
.gsbike-card__media::after {
    content: "";
    position: absolute; inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
    pointer-events: none;
}
.gsbike-card__price {
    position: absolute;
    left: 1rem; bottom: 3.4rem;
    z-index: 2;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--bianco-caldo);
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.gsbike-card__buy {
    position: absolute;
    left: 1rem; bottom: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .55ch;
    background: var(--oro-logo);
    color: var(--bianco-caldo);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .95rem;
    padding: .55rem 1.1rem;
    border-radius: var(--radius-pill);
    border: 0;
    cursor: pointer;
    transition: background var(--t-fast), transform var(--t-fast);
}
.gsbike-card__buy:hover { background: var(--oro-scuro); color: var(--bianco-caldo); transform: translateY(-1px); }

/* corpo descrittivo */
.gsbike-card__body {
    padding: 1rem 1.15rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.gsbike-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.15;
    color: var(--blu-logo);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5ch;
}
.gsbike-card__meta {
    display: flex;
    align-items: center;
    gap: .5ch;
    font-size: var(--fs-small);
    color: var(--blu-muted);
}
.gsbike-card__meta svg,
.gsbike-card__meta i { color: var(--oro-logo); flex: 0 0 auto; }
.gsbike-card__title a { color: var(--blu-logo); }
.gsbike-card__title a:hover { color: var(--oro-logo); }

/* === 11. FOOTER ========================================================== */
.gsbike-footer {
    background: var(--bianco-caldo);
    border-top: 1px solid var(--grigio-bordo);
    padding-block: clamp(2.5rem, 6vw, 3.5rem);
    margin-top: 2rem;
}
.gsbike-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    align-items: start;
}
.gsbike-footer__brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.9rem;
    letter-spacing: .04em;
    color: var(--blu-logo);
    line-height: 1;
    margin-bottom: .9rem;
}
.gsbike-footer__tagline {
    color: var(--blu-muted);
    font-size: var(--fs-small);
    max-width: 32ch;
}
.gsbike-footer__col h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--oro-logo);
    margin: 0 0 1rem;
}
.gsbike-footer__col ul { list-style: none; margin: 0; padding: 0; }
.gsbike-footer__col li { margin-bottom: .65rem; }
.gsbike-footer__col a { color: var(--blu-muted); font-size: var(--fs-small); }
.gsbike-footer__col a:hover { color: var(--oro-logo); }

.gsbike-footer__social { display: flex; gap: .75rem; }
.gsbike-footer__social a {
    width: 42px; height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(38,54,117,.07);
    color: var(--blu-logo);
    transition: background var(--t-fast), color var(--t-fast);
}
.gsbike-footer__social a:hover { background: var(--oro-logo); color: var(--bianco-caldo); }

.gsbike-footer__bottom {
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--grigio-bordo);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: var(--fs-small);
    color: var(--blu-muted);
}
.gsbike-footer__bottom strong { color: var(--oro-logo); font-weight: 600; }

/* === 12. BOTTONI BRAND =================================================== */
.gsbike-btn {
    display: inline-flex;
    align-items: center;
    gap: .6ch;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    padding: .8rem 1.75rem;
    border: 0;
    cursor: pointer;
    transition: background var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.gsbike-btn--primary { background: var(--blu-logo); color: var(--bianco-caldo); }
.gsbike-btn--primary:hover { background: var(--blu-medio); color: var(--bianco-caldo); transform: translateY(-2px); }
.gsbike-btn--gold { background: var(--oro-logo); color: var(--bianco-caldo); }
.gsbike-btn--gold:hover { background: var(--oro-scuro); color: var(--bianco-caldo); transform: translateY(-2px); }
.gsbike-btn--ghost {
    background: transparent;
    color: var(--blu-logo);
    border: 1.5px solid var(--oro-logo);
}
.gsbike-btn--ghost:hover { background: var(--oro-logo); color: var(--bianco-caldo); }

/* === 13. RESPONSIVE / MOBILE-FIRST ====================================== */
@media (max-width: 992px) {
    .gsbike-products-grid { grid-template-columns: repeat(2, 1fr); }
    .gsbike-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    /* header: mostra hamburger, nav diventa drawer */
    .gsbike-burger { display: flex; }
    .gsbike-nav {
        position: fixed;
        top: var(--header-h);
        right: 0;
        width: min(82vw, 340px);
        height: calc(100dvh - var(--header-h));
        background: var(--bianco-caldo);
        border-left: 1px solid var(--grigio-bordo);
        box-shadow: -12px 0 30px rgba(38,54,117,.12);
        flex-direction: column;
        align-items: flex-start;
        gap: 1.4rem;
        padding: 2rem 1.5rem;
        margin-left: 0;
        transform: translateX(100%);
        transition: transform var(--t-med);
        overflow-y: auto;
    }
    .gsbike-nav.is-open { transform: translateX(0); }
    .gsbike-nav__link::after { display: none; }

    /* Su mobile l'immagine resta intera e responsive (aspect-ratio 1920:730),
       nessuna altezza fissa che la ritaglierebbe. */

    .gsbike-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .gsbike-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .gsbike-products-grid { grid-template-columns: 1fr; }
    .gsbike-brand__lockup { font-size: 1.2rem; }
    .gsbike-brand__logo { height: 40px; }
}

/* backdrop drawer mobile */
.gsbike-nav-backdrop {
    display: none;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: rgba(38,54,117,.28);
    z-index: 999;
}
.gsbike-nav-backdrop.is-open { display: block; }

/* === 14. ACCESSIBILITA ================================================== */
:where(a, button, input, select, .gsbike-nav__link):focus-visible {
    outline: 3px solid var(--oro-logo);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}
#content-wrapper > section.gsbike-slider.gsbike-fullbleed {
	width: 150.00em !important;
}

/* ============================================================================
 * GSBIKE — CARRELLO HEADER (blocco da APPENDERE a gsbike-theme.css)
 * File sorgente: /var/www/gsbike-photo.com/themes/gsbike_theme/assets/css/gsbike-theme.css
 * ----------------------------------------------------------------------------
 * Icona carrello nell'header con badge contatore. Coerente col brand:
 * pill blu, badge oro, hover. Da incollare in fondo al CSS del tema (o vicino
 * alle regole .gsbike-login, sezione 6 HEADER).
 * ========================================================================== */

.gsbike-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(38, 54, 117, .07);
    color: var(--blu-logo);
    flex: 0 0 auto;
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.gsbike-cart:hover {
    background: var(--blu-logo);
    color: var(--bianco-caldo);
    transform: translateY(-1px);
}

/* Badge contatore: pallino oro in alto a destra */
.gsbike-cart__count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--oro-logo);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .72rem;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

/* Su mobile, nel drawer, il carrello resta inline e leggibile */
@media (max-width: 768px) {
    .gsbike-cart {
        width: auto;
        height: auto;
        border-radius: 999px;
        padding: .5rem .9rem;
        gap: .5ch;
    }
    .gsbike-cart::after {
        content: "Carrello";
        font-family: var(--font-display);
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        font-size: 1rem;
    }
    .gsbike-cart__count {
        position: static;
        margin-left: .2rem;
    }
}
/* ============================================================================
 * GSBIKE — PAGINE AUTENTICAZIONE (login, poi registrazione/password/account)
 * Blocco da APPENDERE a gsbike-theme.css. Brand-coerente con la login admin:
 * sfondo blu gradiente, card oro-bordata, campi e bottone brandizzati.
 * ========================================================================== */

.gsw-auth {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    background: linear-gradient(135deg, #1c2a5e 0%, var(--blu-logo) 55%, #2e3d7d 100%);
    border-radius: 20px;
    margin: 1.5rem 0;
}

.gsw-auth__card {
    width: 100%;
    max-width: 440px;
    background: var(--bianco-caldo);
    border-radius: 18px;
    border-top: 4px solid var(--oro-logo);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .35);
    padding: 2.25rem 2rem;
}

/* --- Header card: logo + lockup + titolo --- */
.gsw-auth__head { text-align: center; margin-bottom: 1.75rem; }
.gsw-auth__logo {
    height: 64px; width: auto;
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
    margin-bottom: .8rem;
}
.gsw-auth__lockup {
    display: block;
    font-family: var(--font-brand, 'Rajdhani'), sans-serif;
    font-weight: 700;
    letter-spacing: .12em;
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 1rem;
}
.gsw-auth__lockup .gs { color: var(--blu-logo); }
.gsw-auth__lockup .ph { color: var(--oro-logo); }
.gsw-auth__title {
    font-family: var(--font-display, 'Barlow Condensed'), sans-serif;
    font-weight: 800;
    font-size: 1.9rem;
    color: var(--blu-logo);
    margin: 0 0 .25rem;
}
.gsw-auth__sub {
    color: #7A82B8;
    font-size: .95rem;
    margin: 0;
}

/* --- Form: campi nativi PS ristilizzati --- */
.gsw-auth__form .form-group { margin-bottom: 1.1rem; }
.gsw-auth__form label,
.gsw-auth__form .form-control-label {
    display: block;
    font-weight: 600;
    color: var(--blu-logo);
    margin-bottom: .4rem;
    font-size: .9rem;
}
.gsw-auth__form .form-control {
    width: 100%;
    border-radius: 10px;
    border: 1.5px solid #e2e2de;
    padding: .75rem .9rem;
    font-size: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.gsw-auth__form .form-control:focus {
    border-color: var(--oro-logo);
    box-shadow: 0 0 0 3px rgba(175, 154, 103, .25);
    outline: none;
}
/* toggle mostra password (icona nativa PS) */
.gsw-auth__form .input-group .input-group-append,
.gsw-auth__form .input-group-btn { align-items: center; }

/* --- Link "password dimenticata" --- */
.gsw-auth__form .forgot-password {
    text-align: right;
    margin-top: -.4rem;
    margin-bottom: 1rem;
}
.gsw-auth__form .forgot-password a {
    color: #3D4FA0;
    font-size: .88rem;
    text-decoration: none;
}
.gsw-auth__form .forgot-password a:hover { color: var(--oro-logo); }

/* --- Bottone accedi --- */
.gsw-auth__form .form-footer { margin-top: .5rem; }
.gsw-auth__form #submit-login,
.gsw-auth__form .btn-primary {
    width: 100%;
    background: var(--blu-logo) !important;
    border: 0 !important;
    border-radius: 999px;
    padding: .9rem 1.5rem;
    font-family: var(--font-display, 'Barlow Condensed'), sans-serif;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 1.05rem;
    color: #fff;
    transition: background .15s ease, transform .15s ease;
}
.gsw-auth__form #submit-login:hover,
.gsw-auth__form .btn-primary:hover {
    background: #3D4FA0 !important;
    transform: translateY(-1px);
}

/* --- Footer card: link registrazione --- */
.gsw-auth__foot {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #ECECEA;
    font-size: .95rem;
    color: #7A82B8;
}
.gsw-auth__foot a {
    color: var(--blu-logo);
    font-weight: 700;
    text-decoration: none;
    margin-left: .3rem;
}
.gsw-auth__foot a:hover { color: var(--oro-logo); }

/* --- Errori form nativi PS --- */
.gsw-auth__form .alert,
.gsw-auth__form .help-block { border-radius: 10px; font-size: .88rem; }

/* --- Mobile --- */
@media (max-width: 480px) {
    .gsw-auth { padding: 1.5rem .75rem; border-radius: 14px; }
    .gsw-auth__card { padding: 1.75rem 1.35rem; }
    .gsw-auth__title { font-size: 1.6rem; }
}

div#content.page-content.card.card-block,
div.gsw-auth  {
	background: #F6F6F6 ! important;
}
div.gsw-auth__card {
	max-width: 100% !important;
}






/* Label sopra il campo, non a fianco (override layout orizzontale PS) */
.gsw-auth__form .form-group.row,
.gsw-auth__form .form-group {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.gsw-auth__form .form-group .col-md-3,
.gsw-auth__form .form-group .col-md-6,
.gsw-auth__form .form-group [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
}
.gsw-auth__form .form-control-label {
    text-align: left !important;
    padding: 0 0 .4rem 0 !important;
}

/* Bottone "Mostra" password nel brand (era grigio di default) */
.gsw-auth__form .input-group-btn button,
.gsw-auth__form button[data-action="show-password"],
.gsw-auth__form .show-password button {
    background: var(--oro-logo) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .04em;
    padding: 0 .9rem !important;
}
.gsw-auth__form .input-group-btn button:hover {
    background: #978152 !important;
}

.gsw-auth__form .form-control,
.gsw-auth__form .input-group { width: 100% !important; }
.gsw-auth__form .input-group .form-control { flex: 1 1 auto; }

/* Colore testo del bottone di login */
#gsbike-primary-nav > a.gsbike-login {
	color: var(--oro-logo) !important;
}

/* ============================================================================
 * GSBIKE — PAGINA CONTATTI (brand-coerente, stesso linguaggio della login)
 * Blocco da APPENDERE a gsbike-theme.css.
 * Targettizza SOLO la pagina contatti via #contact (body id del controller PS8).
 * Nessun override template/modulo: il form arriva dal modulo contactform, qui
 * lo si veste. Elimina il ciano #2fb5d2 di classic, porta tutto nel brand.
 * ========================================================================== */

/* --- Contenitore pagina: card brand su sfondo chiaro --- */
#contact #content-wrapper,
#contact section.contact-form,
#contact .contact-form {
    background: #fff;
    border-radius: 18px;
    border-top: 4px solid var(--oro-logo);
    box-shadow: 0 12px 40px rgba(38, 54, 117, .10);
    padding: 2rem 2rem 2.25rem;
    max-width: 760px;
    margin: 1.5rem auto;
}

/* --- Titolo "Contattaci" nel brand --- */
#contact .contact-form h1,
#contact h1.h1,
#contact .page-header h1 {
    font-family: var(--font-display, 'Barlow Condensed'), sans-serif;
    font-weight: 800;
    color: var(--blu-logo);
    letter-spacing: .01em;
    margin-bottom: 1.5rem;
}

/* --- Label sopra i campi (non a fianco): layout verticale mobile-first --- */
#contact .form-group.row,
#contact .form-group {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 1.15rem;
}
#contact .form-group [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
}
#contact .form-control-label,
#contact label {
    display: block;
    text-align: left !important;
    font-weight: 600;
    color: var(--blu-logo);
    margin-bottom: .45rem;
    padding: 0 !important;
    font-size: .92rem;
}

/* --- Campi input / textarea / select: arrotondati, focus oro --- */
#contact .form-control,
#contact input[type="text"],
#contact input[type="email"],
#contact textarea,
#contact select {
    width: 100%;
    border-radius: 10px;
    border: 1.5px solid #e2e2de;
    background: #fff;
    padding: .75rem .9rem;
    font-size: 1rem;
    color: var(--ink, #1a1f3d);
    transition: border-color .15s ease, box-shadow .15s ease;
    box-shadow: none;
}
#contact .form-control:focus,
#contact input:focus,
#contact textarea:focus,
#contact select:focus {
    border-color: var(--oro-logo);
    box-shadow: 0 0 0 3px rgba(175, 154, 103, .25);
    outline: none;
}
#contact textarea { min-height: 130px; resize: vertical; }

/* Select "Argomento": rimuovi lo stile nativo, aggiungi freccia custom */
#contact select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23263675' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    padding-right: 2.4rem;
}

/* --- Upload file: bottone "Scegli file" nel brand (era ciano) --- */
#contact .custom-file,
#contact .form-group .input-group { border-radius: 10px; }
#contact input[type="file"] { color: #7A82B8; }
#contact .btn-file,
#contact label.btn,
#contact .custom-file-label,
#contact .input-group-btn .btn {
    background: var(--oro-logo) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-size: .82rem;
    padding: .6rem 1rem !important;
}
#contact .btn-file:hover,
#contact .input-group-btn .btn:hover { background: #978152 !important; }

/* Testo "opzionale" accanto all'upload */
#contact .form-control-comment { color: #7A82B8; font-size: .85rem; }

/* --- Bottone INVIA: primario blu (era ciano) --- */
#contact .form-footer,
#contact footer.form-footer { text-align: right; margin-top: .5rem; }
#contact .btn-primary,
#contact button[type="submit"],
#contact input[type="submit"] {
    background: var(--blu-logo) !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-family: var(--font-display, 'Barlow Condensed'), sans-serif;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 1rem;
    padding: .85rem 2.25rem !important;
    transition: background .15s ease, transform .15s ease;
}
#contact .btn-primary:hover,
#contact button[type="submit"]:hover {
    background: #3D4FA0 !important;
    transform: translateY(-1px);
}

/* --- Messaggi di esito (successo/errore) nel brand --- */
#contact .alert-success {
    border-radius: 10px; border: 0;
    border-left: 4px solid var(--oro-logo);
    background: rgba(175, 154, 103, .10);
    color: var(--blu-logo);
}
#contact .alert-danger {
    border-radius: 10px; border: 0;
    border-left: 4px solid #c0392b;
}

/* --- Mobile --- */
@media (max-width: 480px) {
    #contact #content-wrapper,
    #contact .contact-form { padding: 1.5rem 1.25rem; border-radius: 14px; }
    #contact .form-footer { text-align: stretch; }
    #contact .btn-primary { width: 100%; }
}

div#content-wrapper.js-content-wrapper.cols-xs-12,
#contact #content-wrapper {
	border-style: none  !important;
	background: #F6F6F6 !important; 
	box-shadow: none !important;
	max-width: 100% !important;
}

#id_contact,
select#id_contact.form-control.form-control-select,
#id-order,
select#id-order.form-control.form-control-select {
	height: 3.0em !important;
}