/* =====================================================
   Platform Extras - CSS per nuove funzionalità ISDS
   ===================================================== */

/* ─────────────────────────────────────────────────────
   RICERCA LIVE GLOBALE
   ───────────────────────────────────────────────────── */
.tt-header-search-suggestion {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #2e2e2e;
    border: 1px solid rgba(255,255,255,0.1);
    border-top: none;
    border-radius: 0 0 8px 8px;
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.search-suggestion-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    padding: 12px 18px !important;
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.search-suggestion-item:hover {
    background: rgba(152,138,129,0.08);
    color: #fff;
}

.search-suggestion-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(152,138,129,0.1);
    border-radius: 8px;
    color: #988a81;
    font-size: 14px;
}

.search-suggestion-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.4;
}

.search-suggestion-type {
    flex-shrink: 0;
    font-size: 10px;
    color: #988a81;
    background: rgba(152,138,129,0.1);
    padding: 3px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.search-suggestion-all {
    display: block;
    text-align: center;
    padding: 10px;
    color: #988a81;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    border-top: 1px solid rgba(255,255,255,0.08);
    transition: background 0.15s;
}

.search-suggestion-all:hover {
    background: rgba(152,138,129,0.08);
}

/* ─────────────────────────────────────────────────────
   SALVATI (ex Preferiti)
   ───────────────────────────────────────────────────── */
.btn-favorite-toggle {
    transition: color 0.2s;
}

.btn-favorite-toggle.is-saved {
    color: #988a81 !important;
}

.btn-favorite-toggle.is-saved i {
    color: #988a81;
}

/* ─────────────────────────────────────────────────────
   SHARE OPTIONS ICON FIX
   ───────────────────────────────────────────────────── */
.tt-video-details__heading .right .share-options a,
.tt-video-details__heading .right .share-options a i,
.tt-video-details__heading .right .share-options a i::before {
    color: #ccc !important;
}
.tt-video-details__heading .right .share-options a:hover,
.tt-video-details__heading .right .share-options a:hover i,
.tt-video-details__heading .right .share-options a:hover i::before {
    color: #988a81 !important;
}

/* ─────────────────────────────────────────────────────
   NOTIFICATION POPUP POSITION FIX
   ───────────────────────────────────────────────────── */
.tt-notification-popup {
    right: 60px !important;
}
/* Testata della tendina notifiche allineata al sistema */
.tt-notification-popup__head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tt-notification-popup__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: hsl(var(--gold));
    color: hsl(var(--gold-ink));
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
}
.tt-notification-popup__settings {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--ink-dim);
    font-size: var(--btn-fs-sm);
    font-weight: var(--btn-weight);
    letter-spacing: var(--btn-track);
    text-transform: uppercase;
    transition: color var(--dur-fast) var(--ease-out);
}
.tt-notification-popup__settings:hover { color: hsl(var(--gold)); }
.tt-notification-empty__text { color: var(--ink-dim); font-size: 13px; }

/* Riga notifica: il tema di partenza la tarava su un altro corpo testo e sul
   blu legacy (--ttBlue) all'hover. Qui torna nel sistema: oro e scala tipo
   delle liste. */
.tt-notification-video__text { flex: 1; min-width: 0; }
/* Pastiglia con l'icona della famiglia (Bacheca, Mentor, Assistenza…): dice
   di che natura è la riga prima ancora di leggerne il titolo. I <symbol>
   arrivano dallo sprite in partials/notification-icons.php. */
.tt-notification-video__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-top: 1px;
    border-radius: 50%;
    background: hsla(var(--gold) / 0.1);
    border: 1px solid hsla(var(--gold) / 0.28);
    color: hsl(var(--gold));
}
.tt-notification-video__icon svg { width: 19px; height: 19px; }
.tt-notification-video__icon i { font-size: 17px; line-height: 1; }
/* Anteprima al posto dell'icona (corso, video, comunicazione con copertina):
   stesso ingombro, raggio diverso — vedi bacheca.css per la regola gemella. */
.tt-notification-video__icon--thumb {
    position: relative;
    border-radius: 9px;
    overflow: hidden;
    background: hsl(var(--surface-2));
    border-color: hsl(var(--hairline));
}
.tt-notification-video__icon--thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Con l'icona davanti, i 15px del tema fra le colonne diventano un buco. */
.tt-notification-video { gap: 12px; }
.tt-notification-video__title { font-size: 13.5px; line-height: 1.4; margin-bottom: 4px; }
.tt-notification-video__title a { color: rgba(255, 255, 255, 0.92); text-decoration: none; }
.tt-notification-video__title a:hover { color: hsl(var(--gold)); }
.tt-notification-video__msg {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}
.tt-notification-video__date { color: rgba(255, 255, 255, 0.3); font-size: 11px; }

/* "×" per segnare letta la singola notifica */
.notif-read-btn {
    background: none;
    border: 0;
    padding: 4px;
    line-height: 1;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.3);
    transition: color var(--dur-fast) var(--ease-out);
}
.notif-read-btn:hover { color: hsl(var(--gold)); }
.notif-read-btn i { font-size: 10px; }

/* Pallino sulla campanella: oro, non il rosso acceso del tema di partenza.
   Il position:relative sta qui e non più in JS. */
.tt-notification-popup-toggler { position: relative; }
.notif-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: hsl(var(--gold));
}

/* Piede della tendina: rimanda alla bacheca completa */
.tt-notification-popup__foot {
    padding: 12px 20px;
    border-top: 1px solid hsl(var(--hairline));
    text-align: center;
}
.tt-notification-popup__foot a {
    color: var(--ink-dim);
    font-size: var(--btn-fs-sm);
    font-weight: var(--btn-weight);
    letter-spacing: var(--btn-track);
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
.tt-notification-popup__foot a:hover { color: hsl(var(--gold)); }

/* ─────────────────────────────────────────────────────
   VIDEO DETAILS - SIDEBAR TITLES
   ───────────────────────────────────────────────────── */
.tt-video-details__right-videos .tt-video__title,
.tt-video-details__right .tt-video__title,
.tt-video-horizontal .tt-video__title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
}

.tt-video-details__right .tt-video-horizontal {
    overflow: hidden;
}

.tt-video-details__right .tt-video-horizontal > div:last-child {
    overflow: hidden;
    min-width: 0;
}

/* ─────────────────────────────────────────────────────
   CART DROPDOWN (HEADER)
   ───────────────────────────────────────────────────── */
.tt-cart-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 320px;
    background: #2e2e2e;
    border: 1px solid rgba(152,138,129,0.2);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    z-index: 1000;
    overflow: hidden;
}
.tt-cart-dropdown.is-open {
    display: block;
    animation: cartDropIn 0.2s ease-out;
}
@keyframes cartDropIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.tt-cart-dropdown__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tt-cart-dropdown__header h6 {
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.tt-cart-dropdown__header span {
    color: #988a81;
    font-size: 12px;
}
.tt-cart-dropdown__items {
    max-height: 260px;
    overflow-y: auto;
    padding: 8px 0;
}
.tt-cart-dropdown__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    transition: background 0.15s;
}
.tt-cart-dropdown__item:hover {
    background: rgba(255,255,255,0.03);
}
.tt-cart-dropdown__item img {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.tt-cart-dropdown__item-info {
    flex: 1;
    min-width: 0;
}
.tt-cart-dropdown__item-name {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tt-cart-dropdown__item-meta {
    color: rgba(255,255,255,0.4);
    font-size: 11px;
    margin-top: 2px;
}
.tt-cart-dropdown__item-price {
    color: #988a81;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.tt-cart-dropdown__empty {
    text-align: center;
    padding: 24px 16px;
    color: rgba(255,255,255,0.3);
    font-size: 13px;
}
.tt-cart-dropdown__footer {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 12px 16px;
}
.tt-cart-dropdown__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: rgba(255,255,255,0.6);
    font-size: 13px;
}
.tt-cart-dropdown__total strong {
    color: #fff;
    font-size: 16px;
}
.tt-cart-dropdown__btn {
    display: block;
    text-align: center;
    background: #988a81;
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.tt-cart-dropdown__btn:hover {
    background: #8a7c73;
    color: #fff;
}

/* ─────────────────────────────────────────────────────
   SOCIAL LOGIN BUTTONS
   ───────────────────────────────────────────────────── */
.other-login-options .options .btn-social-login {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s;
    text-decoration: none;
}
.other-login-options .options .btn-social-login:hover {
    background-color: rgba(0, 0, 0, 0.1);
}
.other-login-options .options .btn-social-login img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* ─────────────────────────────────────────────────────
   SETTINGS - DETTAGLI AGGIUNTIVI
   ───────────────────────────────────────────────────── */
.tt-channel-customize-form select {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    appearance: auto;
}

.tt-channel-customize-form select:focus {
    border-color: #988a81;
    outline: none;
}

.tt-channel-customize-form input[type="date"] {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
}

.tt-channel-customize-form input[type="date"]:focus {
    border-color: #988a81;
    outline: none;
}

.tt-channel-customize-form .row input,
.tt-channel-customize-form .row select {
    width: 100%;
}

/* ─────────────────────────────────────────────────────
   FORUM
   ───────────────────────────────────────────────────── */
.forum-topic-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: border-color 0.2s;
}

.forum-topic-card:hover {
    border-color: rgba(152,138,129,0.3);
}

.forum-topic-card__title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 6px;
    display: block;
}

.forum-topic-card__title:hover {
    color: #988a81;
}

.forum-topic-card__meta {
    color: #888;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.forum-topic-card__category {
    background: rgba(152,138,129,0.15);
    color: #988a81;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.forum-reply {
    background: rgba(255,255,255,0.02);
    border-left: 3px solid rgba(255,255,255,0.1);
    padding: 14px 18px;
    margin-bottom: 10px;
    border-radius: 0 6px 6px 0;
}

.forum-reply.is-answer {
    border-left-color: #198754;
    background: rgba(25,135,84,0.05);
}

.forum-reply-locked {
    background: rgba(152,138,129,0.05);
    border: 1px dashed rgba(152,138,129,0.3);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    color: #999;
}

.forum-reply-locked i {
    font-size: 24px;
    color: #988a81;
    display: block;
    margin-bottom: 8px;
}

/* ─────────────────────────────────────────────────────
   TICKETS
   ───────────────────────────────────────────────────── */
.ticket-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.ticket-status {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.ticket-status--open { background: #0d6efd; color: #fff; }
.ticket-status--in_progress { background: #ffc107; color: #2e2e2e; }
.ticket-status--resolved { background: #198754; color: #fff; }
.ticket-status--closed { background: #6c757d; color: #fff; }

/* ─────────────────────────────────────────────────────
   INSPIRATIONS
   ───────────────────────────────────────────────────── */
.inspiration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.inspiration-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s, border-color 0.2s;
}

.inspiration-card:hover {
    transform: translateY(-2px);
    border-color: rgba(152,138,129,0.3);
}

.inspiration-card__img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
}

.inspiration-card__body {
    padding: 16px;
}

.inspiration-card__title {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

.inspiration-card__desc {
    color: #999;
    font-size: 13px;
    line-height: 1.5;
}

/* ─────────────────────────────────────────────────────
   PREMIUM LOCK
   ───────────────────────────────────────────────────── */
.premium-lock-banner {
    background: linear-gradient(135deg, rgba(152,138,129,0.1), rgba(152,138,129,0.02));
    border: 1px dashed rgba(152,138,129,0.3);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    margin: 16px 0;
}

.premium-lock-banner i {
    font-size: 32px;
    color: #988a81;
    display: block;
    margin-bottom: 10px;
}

.premium-lock-banner h5 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 8px;
}

.premium-lock-banner p {
    color: #999;
    font-size: 13px;
    margin-bottom: 14px;
}

.premium-lock-banner a {
    display: inline-block;
    background: #988a81;
    color: #fff;
    padding: 8px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s;
}

.premium-lock-banner a:hover {
    background: #8a7c73;
}

/* ─────────────────────────────────────────────────────
   SIDEBAR - Editorial restructure (rev.2)
   ───────────────────────────────────────────────────── */

/* Section labels (Impara / Network) - compatte */
.tt-sidebar__section {
    padding: 10px 10px 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: hsl(var(--gold));
    line-height: 1;
}
.tt-sidebar__section span { display: inline-block; }

.tt-sidebar__divider {
    height: 1px;
    background: hsl(var(--hairline));
    margin: 8px 12px;
}

/* Coming Soon pill (rivisto su gold) */
.tt-sidebar-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: hsla(var(--gold) / 0.1);
    color: hsl(var(--gold));
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
    margin-left: auto;
    text-align: center;
    /* compensa lo spazio extra sulla destra creato da letter-spacing */
    text-indent: 0.08em;
}

.tt-sidebar-coming-soon { opacity: 0.55; cursor: default; }
/* Gli :hover delle voci del menu valgono solo con un puntatore vero: su
   iPhone il tocco li lascia attaccati e le voci sembrano selezionate. */
@media (hover: hover) {
    .tt-sidebar-coming-soon:hover { opacity: 0.7; }
}

/* Bottom links */
.tt-sidebar-bottom-link {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 8px;
    color: rgba(255,255,255,0.5) !important;
    font-size: 13px;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.15s var(--ease-out);
}
@media (hover: hover) {
    .tt-sidebar-bottom-link:hover {
        color: #fff !important;
        background: rgba(255,255,255,0.04);
    }
}
.tt-sidebar-bottom-link i {
    font-size: 13px; width: 16px; text-align: center;
    color: rgba(255,255,255,0.35);
}
/* Badge conteggio (es. risposte assistenza da leggere) sui link in fondo */
.tt-sidebar-bottom-link__badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: hsl(var(--gold));
    color: hsl(var(--gold-ink));
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
/* Il link «Pannello Admin» con la pill: l'etichetta non va mai a capo; se la pill
   (con versione e commit) non ci sta accanto, scende da sola sotto l'etichetta. */
.tt-sidebar-bottom-link--env {
    flex-wrap: wrap;
    row-gap: 4px;
}
.tt-sidebar-bottom-link--env > span:not(.tt-env-pill) {
    white-space: nowrap;
}
/* La pill d'ambiente (in design-tokens.css) sta in fondo alla riga. */
.tt-sidebar-bottom-link--env .tt-env-pill {
    margin-left: auto;
}
/* Striscia in cima alle pagine di test: stessi colori della pill di test. */
.tt-env-avviso {
    margin: 0 0 12px;
    padding: 6px 12px;
    border-radius: 8px;
    background: hsl(var(--status-pending-bg));
    color: hsl(var(--status-pending));
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

@media (max-width: 991px) {
    .tt-sidebar__section { padding: 10px 14px 4px; }
    .tt-sidebar__divider { margin: 6px 14px; }
}

/* ─────────────────────────────────────────────────────
   HEADER - Hidden on desktop, mobile only
   ───────────────────────────────────────────────────── */
.tt-header--mobile-only { display: none !important; }
@media (max-width: 991px) {
    /* .tt-container__right has overflow:hidden, which kills position:sticky.
       Use position:fixed and reserve space at the top of the content area. */
    .tt-header--mobile-only {
        display: flex !important; align-items: center;
        justify-content: space-between; padding: 10px 16px;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 90;
        background: hsla(var(--surface-1) / 0.92);
        -webkit-backdrop-filter: saturate(180%) blur(10px);
        backdrop-filter: saturate(180%) blur(10px);
        transition: transform 280ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
        will-change: transform;
    }
    .tt-header--mobile-only.is-hidden { transform: translateY(-100%); }
    .tt-header--mobile-only.tt-header { gap: 8px; margin-bottom: 0 !important; padding-bottom: 10px !important; }
    .tt-header--mobile-only .header-logo { height: 32px !important; width: auto !important; }
    /* Reserve vertical space under the fixed mobile topbar */
    .tt-container__right { padding-top: 64px; }
}
.tt-header-icon-btn {
    position: relative;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 36px !important; height: 36px !important; border-radius: 50% !important;
    background: rgba(255,255,255,0.06) !important; border: none !important;
    color: rgba(255,255,255,0.5) !important; font-size: 15px !important;
    cursor: pointer; transition: all 0.2s; text-decoration: none; padding: 0 !important;
}
.tt-header-icon-btn:hover { background: rgba(255,255,255,0.12) !important; color: #fff !important; }
/* Pallino oro sull'hamburger: articoli nel carrello (che su mobile vive nel menu) */
.tt-menu-cart-dot {
    position: absolute; top: 7px; right: 7px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: hsl(var(--gold));
    box-shadow: 0 0 0 2px hsl(var(--surface-1));
    pointer-events: none;
    animation: tt-menu-cart-dot-pulse 2s var(--ease-in-out, ease-in-out) infinite;
}
/* Pulsazione che conserva l'anello di separazione dallo sfondo header */
@keyframes tt-menu-cart-dot-pulse {
    0%   { box-shadow: 0 0 0 2px hsl(var(--surface-1)), 0 0 0 0 hsla(var(--gold) / 0.5); }
    70%  { box-shadow: 0 0 0 2px hsl(var(--surface-1)), 0 0 0 5px hsla(var(--gold) / 0); }
    100% { box-shadow: 0 0 0 2px hsl(var(--surface-1)), 0 0 0 0 hsla(var(--gold) / 0); }
}
@media (prefers-reduced-motion: reduce) {
    .tt-menu-cart-dot,
    .tt-sidebar-util-icon--pill .tt-sidebar-util-icon__badge { animation: none !important; }
}

/* ─────────────────────────────────────────────────────
   SIDEBAR - Utilities row + nav links + Profile bottom
   ───────────────────────────────────────────────────── */
.tt-sidebar {
    display: flex !important; flex-direction: column !important;
    padding: 18px 14px !important;
}
@media (max-width: 991px) {
    .tt-sidebar { padding: 14px 14px calc(14px + env(safe-area-inset-bottom)) !important; }
}
.tt-sidebar__nav { flex: 1 1 auto; overflow-y: auto; padding-right: 2px; }
.tt-sidebar__heading {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px !important;
    padding: 0 4px;
}
.tt-sidebar__heading .header-logo { height: 34px; width: auto; }

/* Utility icons row (desktop + mobile) */
.tt-sidebar__utils {
    display: flex; flex-direction: row; align-items: center;
    justify-content: space-around; gap: 8px;
    padding: 6px 4px 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid hsl(var(--hairline));
}
.tt-sidebar-util-icon {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 999px;
    background: hsla(var(--surface-3) / 0.6);
    border: 1px solid hsl(var(--hairline));
    color: rgba(255,255,255,0.65);
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tt-sidebar-util-icon:focus-visible {
    background: hsla(var(--gold) / 0.12);
    border-color: hsla(var(--gold) / 0.35);
    color: hsl(var(--gold));
    transform: translateY(-1px);
}
@media (hover: hover) {
    .tt-sidebar-util-icon:hover {
        background: hsla(var(--gold) / 0.12);
        border-color: hsla(var(--gold) / 0.35);
        color: hsl(var(--gold));
        transform: translateY(-1px);
    }
}
.tt-sidebar-util-icon:active { transform: translateY(0); }
.tt-sidebar-util-icon i { display: inline-flex; }
.tt-sidebar-util-icon__badge {
    position: absolute; top: -2px; right: -2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: hsl(var(--gold));
    color: hsl(var(--gold-ink));
    font-size: 9px; font-weight: 700;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
}
/* Label testuale della util-icon: visibile solo quando diventa pill (telefono) */
.tt-sidebar-util-icon__label { display: none; }

/* Telefono (≤767px): cerca e notifiche sono nell'header/bottom-nav, quindi
   nella util-row del menu restano solo Salvati e Carrello, che si aprono
   come pill orizzontali riempiendo la riga. */
@media (max-width: 767px) {
    .tt-sidebar-util-icon--hide-phone { display: none !important; }
    .tt-sidebar__utils { gap: 8px; }
    /* Salvati / Carrello = stesse pill delle scorciatoie in home
       (.tt-home-qa__pill): bordo hairline, icona oro, label chiara. */
    .tt-sidebar__utils .tt-sidebar-util-icon--pill {
        flex: 1 1 0;
        width: auto; height: auto;
        gap: 9px;
        padding: 10px 16px;
        border-radius: 999px;
        background: transparent;
        border: 1px solid hsl(var(--hairline));
        color: rgba(255, 255, 255, 0.72);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: none;
    }
    .tt-sidebar__utils .tt-sidebar-util-icon--pill:focus-visible {
        background: hsla(var(--surface-3, 0 0% 14%) / 0.9);
        border-color: hsla(var(--gold) / 0.45);
        color: #fff;
        transform: none;
    }
    @media (hover: hover) {
        .tt-sidebar__utils .tt-sidebar-util-icon--pill:hover {
            background: hsla(var(--surface-3, 0 0% 14%) / 0.9);
            border-color: hsla(var(--gold) / 0.45);
            color: #fff;
            transform: none;
        }
    }
    /* Icona oro (come .tt-home-qa__icon), label eredita il colore chiaro */
    .tt-sidebar-util-icon--pill svg,
    .tt-sidebar-util-icon--pill i { color: hsl(var(--gold)); }
    .tt-sidebar-util-icon--pill svg { width: 19px; height: 19px; }
    .tt-sidebar-util-icon--pill i { font-size: 19px; }
    .tt-sidebar-util-icon--pill .tt-sidebar-util-icon__label { display: inline; }
    /* Badge carrello: più grande, accanto alla label, con pulsazione oro */
    .tt-sidebar-util-icon--pill .tt-sidebar-util-icon__badge {
        position: static;
        margin-left: 4px;
        min-width: 20px; height: 20px;
        padding: 0 6px;
        font-size: 11px;
        animation: tt-cart-badge-pulse 2s var(--ease-in-out, ease-in-out) infinite;
    }
}
/* Alone oro che pulsa attorno al badge carrello / pallino hamburger */
@keyframes tt-cart-badge-pulse {
    0%   { box-shadow: 0 0 0 0 hsla(var(--gold) / 0.5); }
    70%  { box-shadow: 0 0 0 6px hsla(var(--gold) / 0); }
    100% { box-shadow: 0 0 0 0 hsla(var(--gold) / 0); }
}

/* Compact legacy support */
.tt-sidebar-util-btn {
    display: flex; align-items: center; gap: 10px; padding: 6px 10px;
    color: rgba(255,255,255,0.6); font-size: 13px; text-decoration: none;
    background: none; border: none; cursor: pointer; width: 100%; text-align: left;
}
.tt-sidebar-util-btn:hover { color: #fff; background: rgba(255,255,255,0.04); }

/* Nav links - tightened */
.tt-sidebar-nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 12px;
    margin-bottom: 1px;
    border-radius: 8px;
    color: rgba(255,255,255,0.78);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tt-sidebar-nav-link i {
    font-size: 16px;
    width: 20px; text-align: center;
    color: rgba(255,255,255,0.45);
    transition: color var(--dur-fast) var(--ease-out);
}
.tt-sidebar-nav-link svg {
    width: 18px; height: 18px;
    flex-shrink: 0;
    margin: 0 1px;
    color: rgba(255,255,255,0.45);
    transition: color var(--dur-fast) var(--ease-out);
}
.tt-sidebar-nav-link > span:not(.tt-sidebar-pill):not(.tt-sidebar-nav-link__badge) { flex: 1; }

/* Badge conteggio sulle voci di menu (Bacheca: comunicazioni non lette).
   Stessa pastiglia oro dei link in fondo, allineata a destra. */
.tt-sidebar-nav-link__badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: hsl(var(--gold));
    color: hsl(var(--gold-ink));
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
/* Senza questa regola l'attributo `hidden` perde contro il display del badge
   (le regole d'autore battono lo stylesheet dello user agent) e a zero non
   letti resterebbe una pastiglia oro vuota accanto alla voce. */
.tt-sidebar-nav-link__badge[hidden],
.tt-sidebar-bottom-link__badge[hidden] { display: none; }
@media (hover: hover) {
    .tt-sidebar-nav-link:hover {
        background: rgba(255,255,255,0.04);
        color: #fff;
    }
    .tt-sidebar-nav-link:hover i,
    .tt-sidebar-nav-link:hover svg { color: hsl(var(--gold)); }
}
.tt-sidebar-nav-link.active {
    background: hsla(var(--gold) / 0.06);
    color: #fff;
    font-weight: 600;
}
.tt-sidebar-nav-link.active i,
.tt-sidebar-nav-link.active svg { color: hsla(var(--gold) / 0.9); }

/* Home link gets a little extra weight as "primary" */
.tt-sidebar-nav-link--primary {
    font-weight: 600;
}
.tt-sidebar-nav-link--primary:not(.active) {
    color: #fff;
}

.tt-sidebar-close-btn {
    background: hsla(var(--surface-3) / 0.6);
    border: 1px solid hsl(var(--hairline));
    color: rgba(255,255,255,0.7);
    width: 36px; height: 36px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tt-sidebar-close-btn:hover { color: #fff; background: hsla(var(--gold) / 0.15); border-color: hsla(var(--gold) / 0.4); }

/* Profile section (bottom) */
.tt-sidebar__profile {
    padding: 8px 6px 4px;
    margin-top: auto;
    position: relative;
    border-top: 1px solid hsl(var(--hairline));
    margin-top: 10px;
    padding-top: 10px;
}
.tt-sidebar-profile-toggle {
    display: flex; align-items: center; gap: 10px;
    padding: 8px;
    border-radius: 10px;
    background: none; border: 1px solid transparent;
    width: 100%; text-align: left;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tt-sidebar-profile-toggle:hover,
.tt-sidebar-profile-toggle.open {
    background: hsla(var(--surface-3) / 0.7);
    border-color: hsl(var(--hairline));
}
.tt-sidebar-profile__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid hsla(var(--gold) / 0.3); }
.tt-sidebar-profile__name { flex: 1; color: #fff; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-sidebar-profile__arrow { color: rgba(255,255,255,0.4); font-size: 10px; transition: transform var(--dur-fast) var(--ease-out); }
.tt-sidebar-profile-toggle.open .tt-sidebar-profile__arrow { transform: rotate(180deg); }

/* Profile menu — OPAQUE surface (desktop: fixed popup; mobile: inline dropdown) */
.tt-sidebar-profile-menu {
    display: none; position: fixed;
    background: hsl(var(--surface-3));
    border: 1px solid hsl(var(--hairline));
    border-radius: 12px;
    padding: 6px 0;
    z-index: 1000;
    min-width: 220px;
    white-space: nowrap;
    backdrop-filter: none;
}
.tt-sidebar-profile-menu.open { display: block; }

.tt-sidebar-profile-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px;
    color: rgba(255,255,255,0.82);
    font-size: 13px;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tt-sidebar-profile-menu a:hover,
.tt-sidebar-profile-menu a:focus-visible {
    color: #fff;
    background: hsla(var(--gold) / 0.1);
}
.tt-sidebar-profile-menu a i {
    font-size: 13px; width: 16px; text-align: center;
    color: hsla(var(--gold) / 0.7);
}
.tt-sidebar-profile-menu__danger { color: hsl(var(--status-rejected)) !important; }
.tt-sidebar-profile-menu__danger i { color: hsl(var(--status-rejected)) !important; }
.tt-sidebar-profile-menu__danger:hover { background: hsla(var(--status-rejected) / 0.1) !important; }

/* Guest buttons */
.tt-sidebar-profile-guest { display: flex; gap: 8px; }
/* Ruoli: primario e secondario del sistema bottoni, taglia small. */
.tt-sidebar-profile-guest__btn {
    box-sizing: border-box;
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 12px;
    text-align: center; border-radius: var(--btn-radius);
    font-size: var(--btn-fs-sm); font-weight: var(--btn-weight);
    letter-spacing: var(--btn-track); text-transform: uppercase;
    line-height: 1; white-space: nowrap; text-decoration: none;
    background: linear-gradient(180deg, hsl(var(--gold-soft)), hsl(var(--gold)));
    color: hsl(var(--gold-ink)); border: 1px solid hsl(var(--gold));
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.tt-sidebar-profile-guest__btn:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, hsl(var(--gold)), hsl(var(--gold-deep)));
    color: hsl(var(--gold-ink));
}
.tt-sidebar-profile-guest__btn--outline {
    background: transparent;
    border-color: hsla(var(--gold) / 0.55);
    color: hsl(var(--gold));
}
.tt-sidebar-profile-guest__btn--outline:hover {
    background: hsla(var(--gold) / 0.1);
    border-color: hsl(var(--gold));
    color: hsl(var(--gold-soft));
    transform: none;
}

/* MOBILE — fullscreen side offcanvas (slide from left, covers entire viewport width) */
@media (max-width: 991px) {
    .tt-sidebar {
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 1250 !important;
        background: hsl(var(--surface-1)) !important;
        border-right: none !important;
        border-bottom: none !important;
        transform: translateX(-100%);
        transition: transform var(--dur-base) var(--ease-out) !important;
        box-shadow: 20px 0 40px rgba(0,0,0,0.5);
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .tt-sidebar.active { transform: translateX(0) !important; }

    .tt-sidebar__heading { padding: 2px 4px; margin-bottom: 8px !important; }
    .tt-sidebar__utils { padding: 4px 4px 8px; margin-bottom: 6px; }
    .tt-sidebar-util-icon { width: 44px; height: 44px; font-size: 16px; }

    /* Tighter nav on mobile so tutto ci sta senza scrollare */
    .tt-sidebar-nav-link { padding: 9px 12px; font-size: 14px; }
    .tt-sidebar__section { padding: 10px 12px 4px; }

    /* Profile menu inline (not popup) */
    .tt-sidebar-profile-menu {
        position: static !important;
        background: hsla(var(--surface-2) / 0.6) !important;
        border: 1px solid hsl(var(--hairline)) !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        padding: 4px 0 !important;
        margin: 6px 0 0 !important;
        min-width: auto !important;
    }
    .tt-sidebar-profile-menu a {
        padding: 9px 14px !important;
        border-radius: 0;
    }
    /* Nav scrolls internally, profile stays pinned at the very bottom.
       È la nav che scorre, non .tt-sidebar: il contain va qui, altrimenti su
       iPhone a fine lista il gesto passa alla pagina bloccata dietro e la
       lista resta ferma finché quello scroll fantasma non si esaurisce. */
    .tt-sidebar__nav {
        overflow-y: auto !important; flex: 1 1 auto !important;
        overscroll-behavior: contain;
    }
    .tt-sidebar__profile {
        position: static !important;
        margin-top: auto !important;
        flex-shrink: 0;
        padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        border-top: 1px solid hsl(var(--hairline));
    }

    /* Overlay non serve più: la sidebar copre già tutto il viewport */
    .tt-overlay,
    .tt-overlay.active { display: none !important; }
}

/* Notification popup position (desktop) */
@media (min-width: 992px) {
    .tt-notification-popup { right: auto !important; left: 260px !important; top: 80px !important; }
    .tt-notification-popup__handle { display: none; }
}

/* Notification popup — mobile bottom sheet (identical pattern to profile menu) */
.tt-notification-sheet-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1290;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
}
.tt-notification-sheet-backdrop.active { display: block; opacity: 1; }

@media (max-width: 991px) {
    .tt-notification-popup {
        position: fixed !important;
        left: 0 !important; right: 0 !important;
        bottom: 0 !important; top: auto !important;
        width: 100% !important;
        max-width: none !important;
        max-height: 80vh !important;
        background: hsl(var(--surface-2)) !important;
        border-radius: 20px 20px 0 0 !important;
        /* Niente box-shadow: la tendina resta nel DOM parcheggiata a
           translateY(100%) e l'ombra sfonderebbe verso l'alto scurendo il
           fondo di ogni pagina anche a tendina chiusa. */
        padding: 8px 0 calc(14px + env(safe-area-inset-bottom)) !important;
        z-index: 1300 !important;
        transform: translateY(100%);
        transition: transform var(--dur-base) var(--ease-out);
        display: block !important;
        overflow-y: auto;
    }
    .tt-notification-popup.active { transform: translateY(0); }
    .tt-notification-popup__handle {
        display: block;
        width: 40px; height: 4px;
        background: rgba(255,255,255,0.25);
        border-radius: 999px;
        margin: 4px auto 10px;
    }
    .tt-notification-popup__close {
        background: rgba(255,255,255,0.08);
        border: 1px solid hsl(var(--hairline));
        width: 32px; height: 32px; border-radius: 50%;
        color: rgba(255,255,255,0.7);
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 12px; cursor: pointer;
    }
}

/* ─────────────────────────────────────────────────────
   PROFILO - Link rapidi
   ───────────────────────────────────────────────────── */
.tt-profile-quick-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}
.tt-profile-quick-link:hover {
    background: rgba(152,138,129,0.15);
    border-color: rgba(152,138,129,0.3);
    color: #fff;
}
.tt-profile-quick-link i {
    color: #988a81;
    font-size: 14px;
}

/* ─────────────────────────────────────────────────────
   VIDEO DETAILS PAGE - Complete redesign
   ───────────────────────────────────────────────────── */
.tt-vd-page { padding: 20px 0 40px; }
.tt-vd-layout { display: flex; gap: 24px; align-items: flex-start; }
.tt-vd-main { flex: 1; min-width: 0; }
.tt-vd-sidebar { width: 300px; flex-shrink: 0; position: sticky; top: 20px; }

/* Top info */
.tt-vd-topinfo { margin-bottom: 14px; }
.tt-vd-title { color: #fff; font-size: 20px; font-weight: 700; margin: 0 0 6px; line-height: 1.3; }
.tt-vd-desc { color: rgba(255,255,255,0.5); font-size: 13px; line-height: 1.6; margin: 0 0 12px; }

/* Player */
.tt-vd-player {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
    aspect-ratio: 16 / 9;
    background: hsl(var(--surface-2));
}
.tt-vd-player > video,
.tt-vd-player > .plyr,
.tt-vd-player > .plyr video {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
/* Schermo intero su iPhone: Plyr non usa il fullscreen nativo ma un overlay
   fixed e aggiunge viewport-fit=cover, così la barra finisce sotto gli angoli
   arrotondati e l'indicatore home, che tagliano play e schermo intero.
   Le safe area la riportano nella zona visibile; fuori da iOS valgono 0. */
.tt-vd-player > .plyr--fullscreen-fallback .plyr__controls {
    padding-right:  max(var(--plyr-control-spacing, 10px), env(safe-area-inset-right));
    padding-bottom: max(var(--plyr-control-spacing, 10px), env(safe-area-inset-bottom));
    padding-left:   max(var(--plyr-control-spacing, 10px), env(safe-area-inset-left));
}
/* Skeleton shimmer while Plyr is still mounting */
.tt-vd-player::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg,
            hsla(var(--surface-2) / 0) 0%,
            hsla(var(--surface-3) / 1) 50%,
            hsla(var(--surface-2) / 0) 100%);
    background-size: 200% 100%;
    animation: tt-skeleton-shimmer 1.4s linear infinite;
    pointer-events: none;
    opacity: 1;
    transition: opacity 300ms var(--ease-out, ease-out);
}
.tt-vd-player.is-ready::before {
    opacity: 0;
    animation: none;
}
/* Toggle 2× — vive dentro la barra controlli di Plyr, al posto della rotellina.
   Nessuno sfondo: solo il testo "1×/2×", in tinta con gli altri controlli. */
.tt-vd-speed-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-width: 30px;
    padding: 0 6px;
    border: none;
    background: transparent;
    color: var(--plyr-video-control-color, #fff);
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.tt-vd-speed-toggle:hover { opacity: 1; }
.tt-vd-speed-toggle:active { transform: scale(0.92); }
.tt-vd-speed-toggle.is-active { color: hsl(var(--gold)); opacity: 1; }
/* Prima che Plyr sia pronto e lo sposti nella barra, tienilo nascosto per
   evitare un lampo di testo sotto al video. */
.tt-vd-player:not(.is-ready) > .tt-vd-speed-toggle { display: none; }
@keyframes tt-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Outfit */
/* Outfit section — promoted in main column between player and next-video */
.tt-vd-outfit--promoted {
    position: relative;
    margin: 8px 0 20px;
    padding: 22px 22px 18px;
    background: linear-gradient(180deg, hsla(var(--surface-2) / 0.7), hsla(var(--surface-3) / 0.4));
    border: 1px solid hsl(var(--hairline));
    border-radius: 16px;
    isolation: isolate;
}
.tt-vd-outfit--promoted::before {
    content: "";
    position: absolute;
    top: 0; left: 22px; right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, hsla(var(--gold) / 0.55), transparent);
    pointer-events: none;
}
.tt-vd-outfit__grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: hsla(var(--gold) / 0.35) transparent;
}
.tt-vd-outfit__grid::-webkit-scrollbar { height: 6px; }
.tt-vd-outfit__grid::-webkit-scrollbar-track { background: transparent; }
.tt-vd-outfit__grid::-webkit-scrollbar-thumb {
    background: hsla(var(--gold) / 0.3);
    border-radius: 999px;
}
.tt-vd-outfit__item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    width: 260px;
    padding: 8px;
    background: hsla(var(--surface-3) / 0.5);
    border: 1px solid hsl(var(--hairline));
    border-radius: 10px;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dur-base, 200ms) var(--ease-out),
                background var(--dur-base, 200ms) var(--ease-out);
}
.tt-vd-outfit__item:hover {
    border-color: hsla(var(--gold) / 0.45);
    background: hsla(var(--surface-3) / 0.8);
    color: inherit;
}
.tt-vd-outfit__item:hover .tt-vd-outfit__name { color: hsl(var(--gold)); }
.tt-vd-outfit__item-img {
    display: block;
    width: 64px; height: 64px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.tt-vd-outfit__item-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.tt-vd-outfit__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
}
.tt-vd-outfit__name {
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--dur-fast, 160ms) var(--ease-out);
}
.tt-vd-outfit__price {
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.tt-vd-outfit__price .old {
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
    font-size: 11px;
    margin-right: 4px;
}

@media (max-width: 767px) {
    .tt-vd-outfit--promoted { padding: 18px 14px 14px; }
    .tt-vd-outfit--promoted::before { left: 14px; right: 14px; }
    .tt-vd-outfit__item { width: 230px; }
}

/* Discussion tabs */
/* Tab dello sheet: segmented control di sistema (pillola, attivo oro). */
.tt-vd-tabs {
    display: flex;
    gap: 2px;
    padding: 3px;
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    margin-bottom: 14px;
    /* I tab possono scorrere in orizzontale su schermi stretti (overflow-x:auto
       in ui-components.css), ma senza barra di scorrimento visibile. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tt-vd-tabs::-webkit-scrollbar { display: none; }
.tt-vd-tab {
    padding: 6px 14px; background: none; border: none; border-radius: 999px;
    color: var(--ink-muted); font-size: 12.5px; font-weight: 560;
    white-space: nowrap; cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.tt-vd-tab:hover { color: var(--ink); }
.tt-vd-tab.active {
    background: hsl(var(--gold));
    color: hsl(var(--gold-ink));
    font-weight: 640;
}
.tt-vd-tab-content { display: none; }
.tt-vd-tab-content.active { display: block; }

/* Chat */
.tt-vd-chat-form {
    display: flex; align-items: center; gap: 10px; padding: 10px 0; margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.tt-vd-chat-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tt-vd-chat-form input {
    flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px; padding: 8px 14px; color: #fff; font-size: 13px; outline: none;
}
.tt-vd-chat-form input:focus { border-color: hsla(var(--gold) / 0.55); }
.tt-vd-chat-form input::placeholder { color: rgba(255,255,255,0.3); }
/* Invio commento: icona primaria oro del sistema bottoni (azione del form). */
.tt-vd-chat-form button {
    background: linear-gradient(180deg, hsl(var(--gold-soft)), hsl(var(--gold)));
    color: hsl(var(--gold-ink));
    border: 1px solid hsl(var(--gold));
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
    transition: background var(--dur-fast) var(--ease-out);
}
.tt-vd-chat-form button:hover {
    background: linear-gradient(180deg, hsl(var(--gold)), hsl(var(--gold-deep)));
    color: hsl(var(--gold-ink));
}
.tt-vd-chat-messages { display: flex; flex-direction: column; gap: 10px; max-height: 400px; overflow-y: auto; }
.tt-vd-chat-msg { display: flex; gap: 10px; align-items: flex-start; }
.tt-vd-chat-msg > div { flex: 1; min-width: 0; }
.tt-vd-chat-msg__head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.tt-vd-chat-msg__head strong { color: #fff; font-size: 13px; }
.tt-vd-chat-msg__head span { color: rgba(255,255,255,0.3); font-size: 11px; }
/* Badge «Ufficiale» dei commenti a nome dell'azienda (vedi BrandVoice).
   Hairline e testo tenue, niente oro: l'oro marca solo ciò che è premium.
   Il selettore a due classi batte `.tt-vd-chat-msg__head span`. */
.tt-vd-chat-msg__head .brand-badge {
    padding: 1px 7px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    color: rgba(255,255,255,0.62);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
/* Badge «VIP»: l'oro della tessera VIP. Qui l'oro è ammesso perché marca un
   accesso premium. Due classi per battere `.tt-vd-chat-msg__head span`. */
.tt-vd-chat-msg__head .vip-badge {
    padding: 1px 7px;
    border-radius: 999px;
    background: linear-gradient(118deg, #c9ad7c, #e6d3a7 50%, #bf9f6c);
    color: #2b2216;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
/* Interruttore «Commenta come I Segreti dello Stile», solo per gli admin.
   Il form va a capo solo quando c'è: per tutti gli altri resta com'è. */
.tt-vd-chat-form:has(.brand-voice-toggle) { flex-wrap: wrap; }
.brand-voice-toggle {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 50px;   /* allineato al campo: avatar da 40px + gap 10 */
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    cursor: pointer;
}
/* Annulla lo stile pillola che `.tt-vd-chat-form input` dà a ogni input e
   ridisegna la casella per il fondo scuro: style.css toglie l'aspetto nativo
   (appearance: none), quindi senza bordo e sfondo propri resta invisibile. */
.tt-vd-chat-form .brand-voice-toggle input {
    flex: none;
    position: relative;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 4px;
    background: transparent;
}
.tt-vd-chat-form .brand-voice-toggle input:checked {
    border-color: hsl(var(--gold));
    background: hsl(var(--gold));
}
.tt-vd-chat-form .brand-voice-toggle input:checked::after {
    content: "";
    position: absolute;
    left: 4.5px; top: 1.5px;
    width: 4px; height: 8px;
    border: solid #1a1208;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.tt-vd-chat-form .brand-voice-toggle input:focus-visible {
    outline: 2px solid hsl(var(--gold));
    outline-offset: 2px;
}
/* Il wrapper non deve contare nel flex del form: l'avatar dentro resta il
   figlio "vero". */
.brand-voice-avatar { display: contents; }
.brand-voice-avatar[hidden] { display: none; }
.tt-vd-chat-msg p { color: rgba(255,255,255,0.7); font-size: 13px; line-height: 1.5; margin: 0; }

/* Notes */
.tt-vd-notes textarea {
    width: 100%; min-height: 230px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; padding: 14px; color: #fff; font-size: 13px; line-height: 1.6; resize: vertical; outline: none;
}
.tt-vd-notes textarea:focus { border-color: hsla(var(--gold) / 0.4); }
.tt-vd-notes textarea::placeholder { color: rgba(255,255,255,0.25); }
.tt-vd-notes__footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
/* Stato "Salvataggio automatico": caption discreta, non compete col bottone. */
.tt-vd-notes__footer > span {
    font-size: 11px;
    color: var(--ink-dim);
    letter-spacing: 0.04em;
}
/* Salva note: secondario contorno oro, taglia small (l'autosave fa il lavoro). */
.tt-vd-notes__save {
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    height: 32px; padding: 0 14px;
    background: transparent;
    border: 1px solid hsla(var(--gold) / 0.55);
    border-radius: var(--btn-radius);
    color: hsl(var(--gold));
    font-size: var(--btn-fs-sm);
    font-weight: var(--btn-weight);
    letter-spacing: var(--btn-track);
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.tt-vd-notes__save:hover {
    background: hsla(var(--gold) / 0.1);
    border-color: hsl(var(--gold));
    color: hsl(var(--gold-soft));
}

/* Sidebar */
.tt-vd-sidebar-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
    padding: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; color: rgba(255,255,255,0.6); font-size: 13px; text-decoration: none;
    margin-bottom: 16px; transition: all 0.2s;
}
.tt-vd-sidebar-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

.tt-vd-related h6 { color: rgba(255,255,255,0.5); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }

/* Course modules panel on video page — dropped; replaced by .tt-vd-course-panel in ui-components.css */

@media (max-width: 991px) {
    .tt-vd-layout { flex-direction: column; }
    .tt-vd-sidebar { width: 100%; position: static; }
}
@media (max-width: 767px) {
    .tt-vd-title { font-size: 17px; }
    .tt-vd-tab { padding: 6px 10px; font-size: 11.5px; }
}

/* Pulsante Riprendi il corso */
.tt-btn-resume-course {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: #988a81;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.tt-btn-resume-course:hover {
    background: #8a7c73;
    color: #fff;
}
.tt-btn-resume-course i {
    font-size: 12px;
}

@media (max-width: 767px) {
    .tt-video-details__actions {
        gap: 6px;
    }
    .tt-video-action-btn {
        padding: 4px 10px;
        font-size: 12px;
    }
}

/* ─────────────────────────────────────────────────────
   SEARCH MODAL - Full Page
   ───────────────────────────────────────────────────── */
.tt-search-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(30,30,30,0.97);
    backdrop-filter: blur(12px);
    overflow-y: auto;
    padding: 0;
}
.tt-search-modal.is-open {
    display: flex;
    flex-direction: column;
    animation: searchModalIn 0.2s ease-out;
}
@keyframes searchModalIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tt-search-modal__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 32px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.tt-search-modal__input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 12px 18px;
}
.tt-search-modal__input-wrapper i {
    color: rgba(255,255,255,0.3);
    font-size: 18px;
    flex-shrink: 0;
}
.tt-search-modal__input-wrapper input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 16px;
}
.tt-search-modal__input-wrapper input::placeholder {
    color: rgba(255,255,255,0.3);
}

.tt-search-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: 50%;
    color: rgba(255,255,255,0.5);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
}
.tt-search-modal__close:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.tt-search-modal__pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px 32px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
}
.tt-search-modal__pill {
    display: inline-block;
    padding: 5px 14px;
    background: rgba(152,138,129,0.1);
    border: 1px solid rgba(152,138,129,0.15);
    border-radius: 20px;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}
.tt-search-modal__pill:hover {
    background: rgba(152,138,129,0.25);
    color: #fff;
}

.tt-search-modal__results {
    flex: 1;
    padding: 20px 32px;
    overflow-y: auto;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.tt-search-modal__empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255,255,255,0.35);
    font-size: 15px;
}

.tt-search-modal__loading {
    text-align: center;
    padding: 40px;
}

.tt-search-modal__group {
    margin-bottom: 24px;
}
.tt-search-modal__group-title {
    color: rgba(255,255,255,0.4);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tt-search-modal__group-title i {
    font-size: 12px;
    color: #988a81;
}

.tt-search-modal__result {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: #ccc;
    transition: background 0.15s;
}
.tt-search-modal__result:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}
.tt-search-modal__result-img {
    width: 100px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.tt-search-modal__result-icon {
    width: 100px;
    height: 64px;
    border-radius: 8px;
    background: rgba(152,138,129,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #988a81;
    font-size: 18px;
}
.tt-search-modal__result-title {
    flex: 1;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-search-modal__view-all {
    display: block;
    text-align: center;
    padding: 14px;
    color: #988a81;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 8px;
    transition: color 0.2s;
}
.tt-search-modal__view-all:hover {
    color: #fff;
}

/* ─────────────────────────────────────────────────────
   HOME PAGE - Learnn Style
   ───────────────────────────────────────────────────── */
/* Home pills row — pill rounded con icona (cerchio gold) a sinistra e label
   a destra, sviluppate in orizzontale (replica .tt-vd-qa mobile su tutti i
   viewport). Disposte in riga con wrap su desktop, scroll orizzontale su mobile. */
.tt-home-qa {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin: 6px 0 12px;
    padding: 4px 0 6px;
}
.tt-home-qa::-webkit-scrollbar { display: none; }
.tt-home-qa__pill {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: auto;
    padding: 8px 18px 8px 14px;
    background: hsl(var(--surface-3));
    border: 1px solid transparent;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    scroll-snap-align: start;
    transition: background var(--dur-base, 200ms) var(--ease-out),
                border-color var(--dur-base, 200ms) var(--ease-out),
                color var(--dur-base, 200ms) var(--ease-out),
                transform var(--dur-fast, 160ms) var(--ease-out);
}
.tt-home-qa__pill:hover {
    background: hsla(var(--surface-3, 0 0% 14%) / 0.9);
    border-color: hsla(var(--gold) / 0.45);
    color: #fff;
}
.tt-home-qa__pill:active { transform: scale(0.97); }
.tt-home-qa__pill.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
/* Pill "Tutorial": desktop a battere a destra (auto-margin assorbe lo spazio libero);
   mobile in overflow l'auto-margin collassa e la pill resta ultima nello scroll. */
.tt-home-qa__pill--tutorial { margin-left: auto; }
.tt-home-qa__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: hsl(var(--gold));
    font-size: 19px;
    flex-shrink: 0;
}
.tt-home-qa__icon svg { width: 19px; height: 19px; display: block; }
.tt-home-qa__icon i { line-height: 1; }
.tt-home-qa__label {
    display: block;
    text-align: left;
    line-height: 1.2;
    white-space: nowrap;
    color: inherit;
}

/* Mobile: stessa pill inline ma in riga unica con scroll orizzontale e
   fade nero a destra (le pill non entrano tutte nello schermo). */
@media (max-width: 767px) {
    .tt-home-qa {
        flex-wrap: nowrap;
        margin: 4px 0 12px;
        padding: 0 30px 2px 0;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%);
                mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%);
    }
    .tt-home-qa__pill {
        padding: 6px 14px 6px 9px;
        gap: 7px;
    }
    .tt-home-qa__icon {
        width: 20px;
        height: 20px;
        font-size: 16px;
    }
    .tt-home-qa__icon svg { width: 16px; height: 16px; }
    .tt-home-qa__label {
        font-size: 13px;
    }
}

.tt-home-section {
    margin-bottom: 32px;
}

/* Video cards (smaller) */
.tt-home-video-card--sm .tt-home-video-card__thumb {
    aspect-ratio: 16/9;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
}
.tt-home-video-card--sm .tt-home-video-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.tt-home-video-card--sm:hover .tt-home-video-card__thumb img {
    transform: scale(1.03);
}
.tt-home-video-card__time {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}
.tt-home-video-card__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0,0,0,0.5);
}
.tt-home-video-card__progress > div {
    height: 100%;
    border-radius: 0 2px 2px 0;
}
.tt-home-video-card__body {
    padding: 8px 2px 0;
}
.tt-home-video-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
}
.tt-home-video-card__title:hover {
    color: #988a81;
}
.tt-home-video-card__meta {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
}
.tt-home-video-card__meta span + span {
    margin-left: 2px;
}

/* Slider navigation */
.tt-home-slider-nav {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 8px;
}
.tt-home-slider-nav button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tt-home-slider-nav button:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

/* CTA */
.tt-home-cta {
    margin: 32px 0;
    padding: 36px 28px;
    background: linear-gradient(135deg, rgba(152,138,129,0.1), rgba(152,138,129,0.03));
    border: 1px solid rgba(152,138,129,0.15);
    border-radius: 14px;
    text-align: center;
}
.tt-home-cta h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}
.tt-home-cta p {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    max-width: 480px;
    margin: 0 auto 20px;
    line-height: 1.6;
}
.tt-home-cta__btns {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.tt-home-cta__btn {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: opacity 0.2s;
}
.tt-home-cta__btn--primary {
    background: #988a81;
    color: #fff;
}
.tt-home-cta__btn--outline {
    background: transparent;
    color: #988a81;
    border: 1px solid rgba(152,138,129,0.4);
}

/* Blog cards — editorial, allineate al rhythm degli altri home card */
.tt-home-blog-card {
    display: block;
    text-decoration: none;
    transition: opacity 0.25s ease;
}
.tt-home-blog-card:hover {
    opacity: 0.92;
}
.tt-home-blog-card__img {
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--wardrobe-ink-line, rgba(201,169,97,0.12));
    margin-bottom: 12px;
}
.tt-home-blog-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.tt-home-blog-card:hover .tt-home-blog-card__img img {
    transform: scale(1.03);
}
.tt-home-blog-card__body {
    padding: 0 2px;
}
.tt-home-blog-card__title {
    color: var(--wardrobe-ink, #ece4d6);
    font-size: clamp(15px, 0.95vw, 17px);
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}
.tt-home-blog-card:hover .tt-home-blog-card__title {
    color: var(--wardrobe-gold);
}
.tt-home-blog-card__excerpt {
    color: var(--wardrobe-ink-mute, rgba(236,228,214,0.6));
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tt-home-blog-card__date {
    display: inline-block;
    color: var(--wardrobe-ink-mute, rgba(236,228,214,0.45));
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────
   PAGINA SALVATI (Learnn-style)
   ───────────────────────────────────────────────────── */
.tt-salvati-page {
    padding: 0 0 40px;
}
.tt-salvati-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tt-salvati-tab {
    padding: 12px 20px;
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.tt-salvati-tab:hover {
    color: rgba(255,255,255,0.7);
}
.tt-salvati-tab.active {
    color: #fff;
    border-bottom-color: #988a81;
    font-weight: 600;
}

/* Hero card (primo corso in corso) */
.tt-salvati-hero {
    display: flex;
    gap: 24px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    overflow: hidden;
}
.tt-salvati-hero__img {
    flex-shrink: 0;
    width: 320px;
}
.tt-salvati-hero__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tt-salvati-hero__body {
    padding: 24px 24px 24px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tt-salvati-hero__body h4 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}
.tt-salvati-hero__cat {
    color: #988a81;
    font-size: 13px;
    margin-bottom: 6px;
}
.tt-salvati-hero__desc {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
}
.tt-salvati-hero__progress {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tt-salvati-hero__progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    max-width: 200px;
}
.tt-salvati-hero__progress-bar > div {
    height: 100%;
    background: #988a81;
    border-radius: 3px;
}
.tt-salvati-hero__progress span {
    color: rgba(255,255,255,0.4);
    font-size: 12px;
}

/* Grid per video salvati */
.tt-salvati-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

/* Empty state */
.tt-salvati-empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255,255,255,0.4);
}
.tt-salvati-empty i {
    font-size: 40px;
    display: block;
    margin-bottom: 12px;
    opacity: 0.3;
}
.tt-salvati-empty h5 {
    color: rgba(255,255,255,0.6);
    font-size: 16px;
    margin-bottom: 6px;
}
.tt-salvati-empty p {
    font-size: 13px;
    max-width: 300px;
    margin: 0 auto;
}

/* Coming Soon tabs */
.tt-salvati-coming-soon {
    text-align: center;
    padding: 60px 20px;
}
.tt-salvati-coming-soon__icon {
    font-size: 40px;
    margin-bottom: 12px;
}
.tt-salvati-coming-soon h5 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 8px;
}
.tt-salvati-coming-soon p {
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    max-width: 400px;
    margin: 0 auto 16px;
    line-height: 1.6;
}

/* Path card in Salvati */
.tt-salvati-path-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    transition: border-color 0.2s;
}
.tt-salvati-path-card:hover {
    border-color: rgba(152,138,129,0.25);
}
.tt-salvati-path-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}
.tt-salvati-path-card__body {
    flex: 1;
    min-width: 0;
}

@media (max-width: 767px) {
    .tt-salvati-hero {
        flex-direction: column;
    }
    .tt-salvati-hero__img {
        width: 100%;
        aspect-ratio: 16/9;
    }
    .tt-salvati-hero__body {
        padding: 16px;
    }
    .tt-salvati-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
    .tt-salvati-tab {
        padding: 10px 14px;
        font-size: 13px;
    }
}

/* Mobile full-screen */
@media (max-width: 767px) {
    .tt-search-modal__header {
        padding: 12px 16px;
    }
    .tt-search-modal__input-wrapper {
        padding: 10px 14px;
    }
    .tt-search-modal__input-wrapper input {
        font-size: 15px;
    }
    .tt-search-modal__pills {
        padding: 12px 16px;
        gap: 6px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .tt-search-modal__results {
        padding: 16px;
    }
    .tt-search-modal__result-img {
        width: 72px;
        height: 48px;
    }
    .tt-search-modal__result-title {
        font-size: 14px;
    }
}


/* ─────────────────────────────────────────────────────
   RISORSE PAGE
   ───────────────────────────────────────────────────── */
.tt-risorse-page {
    padding: 0 0 40px;
}
.tt-risorse-title {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 6px;
}
.tt-risorse-subtitle {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    margin-bottom: 20px;
}
.tt-risorse-categories {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.tt-risorse-cat-pill {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}
.tt-risorse-cat-pill:hover {
    background: rgba(152,138,129,0.15);
    color: #fff;
}
.tt-risorse-cat-pill.active {
    background: rgba(152,138,129,0.2);
    border-color: rgba(152,138,129,0.4);
    color: #fff;
    font-weight: 600;
}

.tt-risorse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.tt-risorse-card {
    display: block;
    text-decoration: none;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}
.tt-risorse-card:hover {
    border-color: rgba(152,138,129,0.25);
    transform: translateY(-2px);
}
.tt-risorse-card__img {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.tt-risorse-card__format {
    position: absolute;
    top: 12px;
    right: 12px;
    background: hsl(var(--gold));
    color: hsl(var(--gold-ink));
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.tt-risorse-card__format small {
    font-size: 10px;
    opacity: 0.8;
}
.tt-risorse-card__cta {
    display: inline-block;
    margin-top: 10px;
    color: var(--wardrobe-gold);
    font-weight: 600;
    font-size: 13px;
}
.tt-risorse-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.tt-risorse-card:hover .tt-risorse-card__img img {
    transform: scale(1.03);
}
.tt-risorse-card__body {
    padding: 16px;
}
.tt-risorse-card__cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: hsl(var(--gold));
    margin-bottom: 6px;
}
.tt-risorse-card__body h5 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tt-risorse-card__body p {
    color: rgba(255,255,255,0.4);
    font-size: 13px;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tt-risorse-card__meta {
    color: rgba(255,255,255,0.3);
    font-size: 11px;
}

/* Split body: contenuto a sx + cerchietto Scarica a dx (stile card "Riprendi" home) */
.tt-risorse-card__body--split {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
}
.tt-risorse-card__body-main { flex: 1; min-width: 0; }
.tt-risorse-card__body-aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.tt-risorse-card__dl-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(180deg, hsl(var(--gold-soft)), hsl(var(--gold)));
    color: hsl(var(--gold-ink));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s, box-shadow .2s;
}
.tt-risorse-card:hover .tt-risorse-card__dl-circle {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(180, 140, 60, 0.35);
}
.tt-risorse-card__dl-label {
    font-size: var(--btn-fs-sm);
    font-weight: var(--btn-weight);
    color: hsl(var(--gold));
    text-transform: uppercase;
    letter-spacing: var(--btn-track);
}

@media (max-width: 767px) {
    .tt-risorse-categories {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .tt-risorse-cat-pill {
        padding: 8px 16px;
        font-size: 13px;
    }
    .tt-risorse-grid {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────
   CONSULENZE PAGE
   ───────────────────────────────────────────────────── */
.tt-consulenze-page {
    padding: 0 0 40px;
}
.tt-consulenze-header {
    text-align: center;
    padding: 32px 20px 24px;
}
.tt-consulenze-header h1 {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}
.tt-consulenze-header p {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    max-width: 500px;
    margin: 0 auto;
}

.tt-consulenze-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.tt-consulenza-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 28px 24px;
    text-align: center;
    position: relative;
    transition: border-color 0.2s;
}
.tt-consulenza-card:hover {
    border-color: rgba(152,138,129,0.25);
}
.tt-consulenza-card--premium {
    border-color: rgba(152,138,129,0.3);
    background: linear-gradient(135deg, rgba(152,138,129,0.06), rgba(152,138,129,0.02));
}
.tt-consulenza-card__premium-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #988a81;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tt-consulenza-card__icon {
    margin-bottom: 16px;
}
.tt-consulenza-card h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}
.tt-consulenza-card > p {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 16px;
}
.tt-consulenza-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    text-align: left;
}
.tt-consulenza-card__features li {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    padding: 4px 0;
    padding-left: 20px;
    position: relative;
}
.tt-consulenza-card__features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #988a81;
    font-weight: 700;
}

/* ─────────────────────────────────────────────────────
   PARTNER PAGE
   ───────────────────────────────────────────────────── */
.tt-partner-page {
    padding: 0 0 40px;
}

/* Section head shared tra mappa e online */
.tt-partner-section-head {
    margin-bottom: 20px;
}
.tt-partner-section-head h2 {
    font-family: var(--font-display, "Fraunces", serif);
    color: #fff;
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 4px 0 6px;
}
.tt-partner-section-head p {
    color: hsla(var(--fg) / 0.55);
    font-size: 14px;
    margin: 0;
    max-width: 60ch;
}

/* Marquee loghi in alto */
.tt-partner-marquee {
    position: relative;
    overflow: hidden;
    margin: 8px 0 32px;
    padding: 22px 0;
    border-top: 1px solid hsl(var(--hairline));
    border-bottom: 1px solid hsl(var(--hairline));
    background: #fff;
}
.tt-partner-marquee__track {
    display: flex;
    align-items: center;
    gap: 56px;
    width: max-content;
    animation: ttPartnerMarquee 40s linear infinite;
}
.tt-partner-marquee:hover .tt-partner-marquee__track {
    animation-play-state: paused;
}
.tt-partner-marquee__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 56px;
    padding: 0 6px;
    opacity: 0.88;
    transition: opacity var(--dur-base, 0.25s) var(--ease-out, ease), transform var(--dur-base, 0.25s) var(--ease-out, ease);
    text-decoration: none;
    color: inherit;
}
.tt-partner-marquee__item:hover {
    opacity: 1;
    transform: translateY(-1px);
}
.tt-partner-marquee__item img {
    max-height: 100%;
    max-width: 150px;
    object-fit: contain;
    display: block;
}
.tt-partner-marquee__item--text {
    padding: 0 18px;
}
.tt-partner-marquee__wordmark {
    font-family: var(--font-display, "Fraunces", serif);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: hsl(var(--surface-1));
    white-space: nowrap;
    line-height: 1;
}
@keyframes ttPartnerMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .tt-partner-marquee__track { animation: none; }
}

/* Grid card partner online */
.tt-partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.tt-partner-card {
    position: relative;
    background: hsla(var(--surface-2) / 0.5);
    border: 1px solid hsl(var(--hairline));
    border-radius: 16px;
    padding: 22px 22px 24px;
    transition: border-color var(--dur-base, 0.25s) var(--ease-out, ease), transform var(--dur-base, 0.25s) var(--ease-out, ease), background var(--dur-base, 0.25s) var(--ease-out, ease);
    text-decoration: none;
    color: inherit;
    display: block;
}
.tt-partner-card:hover {
    border-color: hsla(var(--gold) / 0.4);
    background: hsla(var(--surface-2) / 0.7);
}
.tt-partner-card.is-linked:hover {
    transform: translateY(-2px);
}
.tt-partner-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.tt-partner-card__logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
    color: hsl(var(--surface-1));
}
.tt-partner-card__logo--empty {
    background: hsla(var(--gold) / 0.08);
    color: hsl(var(--gold));
}
.tt-partner-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}
.tt-partner-card__type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    background: hsla(var(--gold) / 0.1);
    color: hsl(var(--gold));
    font-weight: 600;
}
.tt-partner-card__type i {
    font-size: 11px;
}
.tt-partner-card__name {
    font-family: var(--font-display, "Fraunces", serif);
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    line-height: 1.2;
}
.tt-partner-card__tag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: hsl(var(--gold));
    margin-bottom: 10px;
    text-transform: lowercase;
}
.tt-partner-card__desc {
    color: hsla(var(--fg) / 0.6);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0;
}
.tt-partner-card__link-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 11.5px;
    color: hsl(var(--gold));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Mappa + lista partner */
.tt-partner-map-section,
.tt-partner-online-section {
    margin-top: 44px;
    padding-top: 32px;
    border-top: 1px solid hsl(var(--hairline));
}
.tt-partner-map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
    gap: 20px;
    align-items: stretch;
}
.tt-partner-map {
    width: 100%;
    height: 480px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid hsl(var(--hairline));
    background: hsla(var(--surface-2) / 0.5);
    z-index: 0;
}
.tt-partner-map .leaflet-tile-pane {
    filter: grayscale(0.4) brightness(0.85) contrast(1.05);
}
.tt-partner-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.tt-partner-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.tt-partner-filters__field {
    position: relative;
    display: flex;
    align-items: center;
    background: hsla(var(--surface-2) / 0.6);
    border: 1px solid hsl(var(--hairline));
    border-radius: 10px;
    transition: border-color var(--dur-base, 0.25s) var(--ease-out, ease);
    min-width: 0;
}
.tt-partner-filters__field:focus-within {
    border-color: hsla(var(--gold) / 0.5);
}
.tt-partner-filters__field--search {
    flex: 1 1 200px;
}
.tt-partner-filters__field i {
    color: hsla(var(--fg) / 0.4);
    font-size: 13px;
    padding-left: 12px;
}
.tt-partner-filters__field input,
.tt-partner-filters__field select {
    background: transparent;
    border: 0;
    color: hsla(var(--fg) / 0.9);
    font: inherit;
    font-size: 13.5px;
    padding: 9px 12px;
    width: 100%;
    outline: none;
    min-width: 0;
}
.tt-partner-filters__field select {
    cursor: pointer;
    padding-right: 30px;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, hsla(var(--fg) / 0.5) 50%), linear-gradient(135deg, hsla(var(--fg) / 0.5) 50%, transparent 50%);
    background-position: calc(100% - 14px) center, calc(100% - 9px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.tt-partner-filters__field select option {
    background: hsl(var(--surface-1));
    color: hsla(var(--fg) / 0.9);
}
.tt-partner-empty {
    color: hsla(var(--fg) / 0.5);
    font-size: 13px;
    text-align: center;
    padding: 20px 10px;
    margin: 0;
}

.tt-partner-locations {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: hsla(var(--gold) / 0.3) transparent;
}
.tt-partner-locations::-webkit-scrollbar { width: 6px; }
.tt-partner-locations::-webkit-scrollbar-thumb { background: hsla(var(--gold) / 0.3); border-radius: 6px; }
.tt-partner-location__btn {
    width: 100%;
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: hsla(var(--surface-2) / 0.5);
    border: 1px solid hsl(var(--hairline));
    border-radius: 12px;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dur-base, 0.25s) var(--ease-out, ease), background var(--dur-base, 0.25s) var(--ease-out, ease), transform var(--dur-base, 0.25s) var(--ease-out, ease);
    font: inherit;
}
.tt-partner-location__btn:hover {
    border-color: hsla(var(--gold) / 0.4);
    background: hsla(var(--gold) / 0.06);
}
.tt-partner-location.is-active .tt-partner-location__btn {
    border-color: hsl(var(--gold));
    background: hsla(var(--gold) / 0.12);
}
.tt-partner-location__logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: hsl(var(--surface-1));
}
.tt-partner-location__logo--empty {
    background: hsla(var(--gold) / 0.1);
    color: hsl(var(--gold));
}
.tt-partner-location__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}
.tt-partner-location__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.tt-partner-location__title-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.tt-partner-location__name {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
}
.tt-partner-location__divider {
    color: hsla(var(--fg) / 0.3);
    flex: 0 0 auto;
    line-height: 1;
}
.tt-partner-location__city {
    color: hsla(var(--fg) / 0.6);
    font-size: 12.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
}
.tt-partner-location__excerpt {
    color: hsla(var(--fg) / 0.55);
    font-size: 12.5px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.tt-partner-location__excerpt--meta {
    color: hsla(var(--fg) / 0.45);
    font-size: 12px;
}
.tt-partner-location__arrow {
    color: hsla(var(--fg) / 0.4);
    font-size: 12px;
    transition: transform var(--dur-base, 0.25s) var(--ease-out, ease), color var(--dur-base, 0.25s) var(--ease-out, ease);
}
.tt-partner-location__btn:hover .tt-partner-location__arrow {
    color: hsl(var(--gold));
    transform: translateX(2px);
}
.tt-partner-location.is-active .tt-partner-location__arrow {
    transform: rotate(90deg);
    color: hsl(var(--gold));
}

.tt-partner-location__details {
    padding: 12px 16px 16px 84px;
    margin-top: -2px;
    border: 1px solid hsl(var(--gold));
    border-top: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background: hsla(var(--gold) / 0.05);
    animation: ttPartnerDetailsIn var(--dur-base, 0.25s) var(--ease-out, ease);
}
.tt-partner-location.is-active .tt-partner-location__btn {
    border-color: hsl(var(--gold));
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: hsla(var(--gold) / 0.1);
}
.tt-partner-location__description {
    color: hsla(var(--fg) / 0.75);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 10px;
}
.tt-partner-location__address {
    display: flex;
    align-items: center;
    gap: 6px;
    color: hsla(var(--fg) / 0.55);
    font-size: 12.5px;
    margin: 0 0 10px;
}
.tt-partner-location__address i {
    color: hsl(var(--gold));
    font-size: 11px;
}
.tt-partner-location__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: hsl(var(--gold));
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}
.tt-partner-location__link:hover {
    text-decoration: underline;
}
@keyframes ttPartnerDetailsIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Leaflet pin custom */
.tt-partner-pin {
    position: relative;
    transform: translate(-50%, -100%);
}
.tt-partner-pin__dot {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: hsl(var(--gold));
    box-shadow: 0 0 0 4px hsla(var(--gold) / 0.25), 0 2px 6px rgba(0,0,0,0.5);
    border: 2px solid #fff;
    margin: 0 auto;
}
.tt-partner-pin__label {
    display: none;
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    background: hsl(var(--surface-1));
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid hsl(var(--hairline));
}
.tt-partner-pin:hover .tt-partner-pin__label { display: block; }

/* Leaflet popup dark theme (override default white) */
.tt-partner-map .leaflet-popup-content-wrapper {
    background: hsl(var(--surface-1));
    color: hsla(var(--fg) / 0.85);
    border: 1px solid hsl(var(--hairline));
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.tt-partner-map .leaflet-popup-content {
    margin: 12px 14px;
    font-family: var(--font-inter, "Inter", sans-serif);
}
.tt-partner-map .leaflet-popup-tip {
    background: hsl(var(--surface-1));
    border: 1px solid hsl(var(--hairline));
}
.tt-partner-map .leaflet-popup-close-button {
    color: hsla(var(--fg) / 0.5) !important;
}
.tt-partner-map .leaflet-popup-close-button:hover {
    color: hsl(var(--gold)) !important;
}
.tt-partner-popup {
    min-width: 180px;
}
.tt-partner-popup strong {
    display: block;
    font-family: var(--font-display, "Fraunces", serif);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
}
.tt-partner-popup__where {
    color: hsla(var(--fg) / 0.55);
    font-size: 12px;
    margin-bottom: 8px;
}
.tt-partner-popup__link {
    display: inline-block;
    font-size: 11.5px;
    color: hsl(var(--gold));
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tt-partner-popup__link:hover { text-decoration: underline; }

@media (max-width: 991px) {
    .tt-partner-map-layout {
        grid-template-columns: 1fr;
    }
    .tt-partner-locations {
        max-height: none;
    }
}
@media (max-width: 767px) {
    .tt-partner-map {
        height: 320px;
    }
    .tt-partner-marquee__track { gap: 36px; }
    .tt-partner-marquee__item { height: 40px; }
    .tt-partner-marquee__wordmark { font-size: 18px; }
}

/* ─────────────────────────────────────────────────────
   EVENTI PAGE
   ───────────────────────────────────────────────────── */
.tt-eventi-page {
    padding: 0 0 40px;
}
.tt-eventi-header {
    text-align: center;
    padding: 32px 20px 24px;
}
.tt-eventi-header h1 {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}
.tt-eventi-header p {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    max-width: 500px;
    margin: 0 auto;
}

/* ─────────────────────────────────────────────────────
   MOBILE RESPONSIVENESS FIXES
   ───────────────────────────────────────────────────── */

/* MOBILE BOTTOM NAV — sostituita dal dock fluttuante glass.
   Markup: partials/mobile-nav.php · stile: dock.css · JS: dock.js.
   Anche lo spazio riservato in fondo (padding-bottom) è gestito in dock.css. */

/* Sidebar overlay non serve su mobile (menu copre già tutto) */
@media (max-width: 991px) {
    .tt-overlay,
    .tt-overlay.active { display: none !important; }
    .tt-sidebar {
        z-index: 1250 !important;
    }
}

/* Search modal sopra tutto */
.tt-search-modal {
    z-index: 9999;
}

/* Fix header minimale che non conflitti con vecchi stili */
.tt-header--minimal .tt-header__search-wrapper,
.tt-header--minimal .tt-header__search {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: auto !important;
    left: auto !important;
    right: auto !important;
    box-shadow: none !important;
    display: none !important;
}

/* Home pills scroll su mobile */
@media (max-width: 767px) {
    .tt-home-section {
        margin-bottom: 24px;
    }
}

/* Consulenze cards stack su mobile */
@media (max-width: 767px) {
    .tt-consulenze-grid {
        grid-template-columns: 1fr;
    }
    .tt-partner-grid {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────
   PAGINE LEGALI
   ───────────────────────────────────────────────────── */
.tt-legal-page {
    padding: 8px 0 60px;
    max-width: 820px;
}
.tt-legal-page h1 {
    font-family: var(--font-serif, "Fraunces", serif);
    color: #fff;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
    line-height: 1.15;
}
.tt-legal-page h2 {
    font-family: var(--font-serif, "Fraunces", serif);
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    margin-top: 36px;
    margin-bottom: 14px;
    line-height: 1.3;
}
.tt-legal-page h3 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 10px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
.tt-legal-page h4 {
    color: hsl(var(--gold, 42 42% 60%));
    font-size: 14px;
    font-weight: 600;
    margin-top: 18px;
    margin-bottom: 6px;
}
.tt-legal-page p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 14.5px;
    line-height: 1.75;
    margin-bottom: 12px;
}
.tt-legal-page ul {
    color: rgba(255, 255, 255, 0.65);
    font-size: 14.5px;
    line-height: 1.75;
    padding-left: 22px;
    margin-bottom: 14px;
}
.tt-legal-page li {
    margin-bottom: 6px;
}
.tt-legal-page blockquote {
    margin: 16px 0;
    padding: 4px 0 4px 18px;
    border-left: 2px solid hsl(var(--gold, 42 42% 60%));
}
.tt-legal-page a {
    color: hsl(var(--gold, 42 42% 60%));
    text-decoration: none;
    transition: color var(--dur-base, 200ms) var(--ease-out, ease-out);
}
.tt-legal-page a:hover {
    color: hsl(var(--gold-deep, 38 45% 48%));
    text-decoration: underline;
}
.tt-legal-table {
    overflow-x: auto;
    margin: 16px 0 20px;
    border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
    border-radius: 10px;
}
.tt-legal-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
}
.tt-legal-table th,
.tt-legal-table td {
    padding: 10px 14px;
    border-bottom: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.06);
    text-align: left;
    vertical-align: top;
}
.tt-legal-table tr:last-child td { border-bottom: 0; }
.tt-legal-table th {
    background: hsla(var(--surface-2, 0 0% 10%) / 0.6);
    color: #fff;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────
   HOMEPAGE OVERRIDES - fix template conflicts
   ───────────────────────────────────────────────────── */
/* Section heading fix per dark mode */
.dark-mode .tt-section-heading {
    color: #fff !important;
}
.dark-mode .tt-section-title {
    color: #fff !important;
}
/* .tt-section-heading__btn: definizione unica in ui-components.css
   (link quieto del sistema bottoni). */

/* Forza il search modal nascosto */
.tt-search-modal:not(.is-open) {
    display: none !important;
}

/* Home section spacing */
.tt-home-section .tt-section-heading {
    margin-bottom: 16px !important;
}

/* "Vedi tutto / Tutti i corsi / Leggi tutto": ora è il link quieto
   del sistema bottoni, definito una volta sola in ui-components.css
   (freccia animata inclusa). */

/* Fix Swiper slides per home carousels */
.tt-home-continue-slider .swiper-slide {
    width: auto;
}
/* Videos / courses slider: Swiper calcola width via slidesPerView,
   ma garantiamo height uniforme e box-sizing corretto */
.tt-home-videos-slider .swiper-slide,
.tt-home-courses-slider .swiper-slide {
    height: auto;
    box-sizing: border-box;
}
.tt-home-courses-slider .swiper-slide > .tt-course-poster,
.tt-home-courses-slider .swiper-slide > .tt-course-poster.wardrobe-coming-soon {
    height: 100%;
}
/* Su touch evitiamo callout di selezione testo durante swipe */
.tt-home-videos-slider,
.tt-home-courses-slider {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
}

/* .swiper has overflow:hidden by default (Swiper library). Without inner
   breathing room, a hovered course poster's translateY(-4px) lift and its
   box-shadow get clipped at the slider edges — most visible at the TOP
   where the gold border seems to disappear. Internal padding gives the
   transform room to render; equal negative margin cancels the visual
   shift so neighboring sections don't move. Only courses slider needs
   this (video cards have no lift, only image zoom inside their own thumb
   overflow). */
.tt-home-courses-slider {
    padding: 8px 4px 24px;
    margin: -8px -4px -24px;
}
.tt-home-videos-slider .swiper-wrapper,
.tt-home-courses-slider .swiper-wrapper {
    align-items: stretch;
}

/* Course poster: eyebrow row con barra completamento inline minimal */
.tt-course-poster__eyebrow-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}
.tt-course-poster__progress {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.tt-course-poster__progress-track {
    position: relative;
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    overflow: hidden;
}
.tt-course-poster__progress-fill {
    display: block;
    height: 100%;
    background: hsl(var(--gold));
    border-radius: 999px;
    transition: width 360ms var(--ease-out, ease-out);
}
.tt-course-poster__progress-pct {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: hsl(var(--gold));
    flex-shrink: 0;
    line-height: 1;
}

/* Mobile: card corsi più compatte
   - titolo più piccolo per stare in 2-3 righe
   - meta: solo "N lezioni" (niente minutaggio)
   - barra completamento spostata sotto al titolo, larga tutta la card
   - padding ridotto per recuperare larghezza utile del titolo
   NB: doppia classe per vincere su .tt-course-poster__title in ui-components.css
   (questo file viene caricato prima di ui-components.css). */
@media (max-width: 767px) {
    .tt-course-poster .tt-course-poster__body {
        padding: 14px 14px 14px;
    }
    .tt-course-poster__body .tt-course-poster__title {
        font-size: 1rem;
        line-height: 1.2;
        letter-spacing: 0;
        min-height: 2.4em;
    }
    .tt-course-poster__meta {
        font-size: 11.5px;
        margin-top: 2px;
    }
    .tt-course-poster__meta-sep,
    .tt-course-poster__meta-mins {
        display: none;
    }
    .tt-course-poster__eyebrow-row {
        display: none;
    }
    .tt-course-poster__eyebrow-row:has(.tt-course-poster__progress) {
        display: flex;
        order: 3;
        margin: 6px 0 0;
        min-height: 24px;
        align-items: center;
    }
    .tt-course-poster__eyebrow-row:has(.tt-course-poster__progress) .tt-course-poster__progress {
        width: 100%;
        flex: 1;
    }
}

/* Override video time badge dal template */
.tt-home-video-card__time {
    position: absolute !important;
    bottom: 6px !important;
    right: 6px !important;
    background: rgba(0,0,0,0.75) !important;
    color: #fff !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    z-index: 2;
}

/* ─────────────────────────────────────────────────────
   PROFILO PUBBLICO (/channel/username)
   ───────────────────────────────────────────────────── */
.tt-profile-page {
    padding: 0 0 40px;
}

/* Banner */
.tt-profile-banner {
    height: 180px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, rgba(152,138,129,0.15), rgba(152,138,129,0.05));
    margin-bottom: -50px;
}
.tt-profile-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tt-profile-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.5));
}

/* Info utente */
.tt-profile-info {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 0 16px;
    flex-wrap: wrap;
}
.tt-profile-avatar {
    flex-shrink: 0;
}
.tt-profile-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #2e2e2e;
    object-fit: cover;
    background: #2e2e2e;
}
.tt-profile-details {
    flex: 1;
    min-width: 200px;
    padding-top: 16px;
}
.tt-profile-name {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 2px;
}
.tt-profile-username {
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    display: block;
    margin-bottom: 8px;
}
.tt-profile-bio {
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
    max-width: 500px;
}
.tt-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 8px;
}
.tt-profile-meta i {
    font-size: 12px;
    margin-right: 4px;
    color: #988a81;
}
.tt-profile-meta__link {
    color: #988a81 !important;
    text-decoration: none;
}
.tt-profile-meta__link:hover {
    color: #fff !important;
}
.tt-profile-socials {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.tt-profile-socials a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
}
.tt-profile-socials a:hover {
    background: rgba(152,138,129,0.2);
    color: #fff;
}
.tt-profile-actions {
    padding-top: 20px;
}

/* Statistiche */
.tt-profile-stats {
    display: flex;
    gap: 0;
    margin: 24px 0;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    overflow: hidden;
}
.tt-profile-stat {
    flex: 1;
    text-align: center;
    padding: 16px 12px;
    border-right: 1px solid rgba(255,255,255,0.06);
}
.tt-profile-stat:last-child {
    border-right: none;
}
.tt-profile-stat strong {
    display: block;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}
.tt-profile-stat span {
    color: rgba(255,255,255,0.4);
    font-size: 12px;
}

/* Sezioni */
.tt-profile-section {
    margin-bottom: 28px;
}
.tt-profile-section__title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Badge */
.tt-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.tt-profile-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
}
.tt-profile-badge__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #988a81;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #988a81;
    font-size: 16px;
    flex-shrink: 0;
}
.tt-profile-badge strong {
    display: block;
    color: #fff;
    font-size: 13px;
}
.tt-profile-badge span {
    color: rgba(255,255,255,0.4);
    font-size: 11px;
}

@media (max-width: 767px) {
    .tt-profile-banner {
        height: 120px;
        border-radius: 0;
        margin-left: -15px;
        margin-right: -15px;
    }
    .tt-profile-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .tt-profile-avatar img {
        width: 80px;
        height: 80px;
    }
    .tt-profile-details {
        padding-top: 0;
    }
    .tt-profile-meta {
        justify-content: center;
    }
    .tt-profile-socials {
        justify-content: center;
    }
    .tt-profile-bio {
        max-width: 100%;
    }
    .tt-profile-stats {
        flex-wrap: wrap;
    }
    .tt-profile-stat {
        flex: 1 1 33%;
    }
}

/* ─────────────────────────────────────────────────────
   SIDEBAR LOGO — full vs icon (rev.3)
   ───────────────────────────────────────────────────── */
.tt-sidebar__logo-link { display: flex; align-items: center; justify-content: center; width: 100%; }
.tt-sidebar__logo { display: block; }
.tt-sidebar__logo--full { width: 100%; max-width: 100%; height: auto; }
.tt-sidebar__logo--icon { height: 56px; width: 56px; display: none; }

/* When sidebar is collapsed (desktop collapsed state), show only icon */
.tt-container.sidebar-collapsed .tt-sidebar__logo--full { display: none; }
.tt-container.sidebar-collapsed .tt-sidebar__logo--icon { display: block; }

/* Desktop: let the wordmark breathe — fills the sidebar */
@media (min-width: 992px) {
    .tt-sidebar__heading { justify-content: center !important; padding: 4px 6px !important; margin-bottom: 14px !important; }
    .tt-sidebar__logo--full { max-height: 80px; }
}

/* Mobile: wordmark inside the offcanvas, contenuto e centrato */
@media (max-width: 991px) {
    .tt-sidebar__logo--full { display: block; max-height: 44px; width: auto; max-width: 70%; }
    .tt-sidebar__logo--icon { display: none; }
}

/* Mobile top bar: use icon logo only */
@media (max-width: 991px) {
    .tt-header--mobile-only .header-logo {
        height: 32px !important;
    }
}

/* ─────────────────────────────────────────────────────
   SIDEBAR UTILS — bookmark active state
   ───────────────────────────────────────────────────── */
.tt-sidebar-util-icon.is-active {
    background: hsla(var(--gold) / 0.15);
    border-color: hsla(var(--gold) / 0.45);
    color: hsl(var(--gold));
}
.tt-sidebar-util-icon svg { stroke-width: 2; }

/* ─────────────────────────────────────────────────────
   SIDEBAR — Tightened spacing (desktop + mobile)
   ───────────────────────────────────────────────────── */
@media (min-width: 992px) {
    .tt-sidebar-nav-link { padding: 5px 12px !important; margin-bottom: 3px !important; }
    .tt-sidebar__section { padding: 24px 10px 6px; }
    .tt-sidebar-bottom-link { padding: 6px 8px; font-size: 12.5px; }
}
@media (max-width: 991px) {
    /* Voci menu più grandi e tap-friendly sull'off-canvas mobile */
    .tt-sidebar-nav-link { padding: 9px 12px !important; margin-bottom: 1px !important; font-size: 17px !important; }
    .tt-sidebar-nav-link i { font-size: 20px; width: 23px; }
    .tt-sidebar-nav-link svg { width: 22px; height: 22px; }
    .tt-sidebar-pill { font-size: 10px; padding: 3px 9px; }
    .tt-sidebar__section { padding: 16px 12px 5px; font-size: 11.5px; letter-spacing: 0.12em; }
    .tt-sidebar-bottom-link { padding: 8px 8px; font-size: 15px; }
    .tt-sidebar-bottom-link i { font-size: 15px; }
}

/* ─────────────────────────────────────────────────────
   MOBILE SIDEBAR — full viewport width
   ───────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .tt-sidebar {
        width: 100vw !important;
        max-width: none !important;
    }
}

/* ─────────────────────────────────────────────────────
   MOBILE PROFILE — bottom offcanvas sheet
   ───────────────────────────────────────────────────── */
.tt-profile-sheet-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1200;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
}
.tt-profile-sheet-backdrop.active {
    display: block;
    opacity: 1;
}

@media (max-width: 991px) {
    /* Profile menu becomes a bottom sheet */
    .tt-sidebar-profile-menu {
        position: fixed !important;
        left: 0 !important; right: 0 !important;
        bottom: 0 !important; top: auto !important;
        width: 100% !important;
        max-height: 75vh;
        overflow-y: auto;
        background: hsl(var(--surface-2)) !important;
        border: none !important;
        border-top: 1px solid hsl(var(--hairline)) !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 8px 0 calc(14px + env(safe-area-inset-bottom)) !important;
        margin: 0 !important;
        min-width: 0 !important;
        /* Niente box-shadow: vedi sopra, il pannello parcheggiato fuori
           schermo scurirebbe la fascia bassa di ogni pagina. */
        z-index: 1300 !important;
        transform: translateY(100%);
        transition: transform var(--dur-base) var(--ease-out);
        display: block !important;
    }
    .tt-sidebar-profile-menu.open {
        transform: translateY(0);
    }
    .tt-sidebar-profile-menu__handle {
        display: block;
        width: 40px; height: 4px;
        background: rgba(255,255,255,0.25);
        border-radius: 999px;
        margin: 4px auto 10px;
    }
    .tt-sidebar-profile-menu__head {
        display: flex; align-items: center; gap: 12px;
        padding: 4px 16px 14px;
        border-bottom: 1px solid hsl(var(--hairline));
        margin-bottom: 6px;
    }
    .tt-sidebar-profile-menu__head .tt-sidebar-profile__avatar {
        width: 44px; height: 44px;
    }
    .tt-sidebar-profile-menu__name {
        color: #fff; font-size: 14px; font-weight: 600;
    }
    .tt-sidebar-profile-menu__handle-txt {
        color: rgba(255,255,255,0.5); font-size: 12px;
    }
    .tt-sidebar-profile-menu__close {
        margin-left: auto;
        background: rgba(255,255,255,0.08);
        border: 1px solid hsl(var(--hairline));
        width: 32px; height: 32px; border-radius: 50%;
        color: rgba(255,255,255,0.7);
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 12px; cursor: pointer;
    }
    .tt-sidebar-profile-menu a {
        padding: 12px 18px !important;
        font-size: 14px !important;
    }
    .tt-sidebar-profile-menu a i {
        font-size: 14px; width: 20px;
    }
}
@media (min-width: 992px) {
    .tt-sidebar-profile-menu__handle,
    .tt-sidebar-profile-menu__head,
    .tt-sidebar-profile-menu__close { display: none !important; }
}

/* ─────────────────────────────────────────────────────
   FAQ — Contact section (email, telefono)
   ───────────────────────────────────────────────────── */
.tt-faq-contact { margin-bottom: 32px; }
.tt-faq-contact__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.tt-faq-contact__card {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 18px;
    background: hsla(var(--surface-2) / 0.6);
    border: 1px solid hsl(var(--hairline));
    border-radius: 14px;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tt-faq-contact__card:hover {
    background: hsla(var(--gold) / 0.08);
    border-color: hsla(var(--gold) / 0.35);
    color: #fff;
    transform: translateY(-1px);
}
.tt-faq-contact__icon {
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: hsla(var(--gold) / 0.12);
    color: hsl(var(--gold));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.tt-faq-contact__body {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
.tt-faq-contact__title {
    color: #fff; font-size: 14px; font-weight: 600;
}
.tt-faq-contact__value {
    color: rgba(255,255,255,0.65); font-size: 13px;
    overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 991px) {
    .tt-faq-contact__grid { grid-template-columns: 1fr; }
}

/* Sezione "Le tue richieste" sotto il modulo di contatto: distanza contenuta
   dal form (non il grande respiro di .tt-section-spacing). */
.tt-support-tickets { margin-top: 44px; }
/* Pannello che stacca l'elenco conversazioni dal resto della pagina. */
.tt-support-tickets__panel {
    margin-top: 20px;
    padding: 4px 20px;
    background: var(--wardrobe-surface, rgba(255,255,255,0.02));
    border: 1px solid var(--wardrobe-border-strong, rgba(245,242,236,0.14));
    border-radius: 16px;
}
.tt-support-tickets__empty {
    margin: 0;
    padding: 24px 0;
    color: var(--wardrobe-ink-muted, rgba(255,255,255,0.55));
    font-size: 14px;
}
/* Respiro sopra il modulo di contatto, per staccarlo dall'elenco conversazioni. */
.tt-support-form { margin-top: 56px; }
@media (max-width: 640px) {
    .tt-support-tickets__panel { padding: 2px 12px; }
    .tt-support-form { margin-top: 40px; }
}

/* Paginazione front-end (richieste supporto e liste utente) */
.tt-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.tt-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid hsl(var(--hairline, 0 0% 100% / 0.1));
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    text-decoration: none;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.tt-pagination__link:hover {
    color: hsl(var(--gold, 42 42% 60%));
    border-color: hsla(var(--gold, 42 42% 60%) / 0.4);
    background: hsla(var(--gold, 42 42% 60%) / 0.08);
}
.tt-pagination__link--active {
    color: #0d0d0d;
    background: hsl(var(--gold, 42 42% 60%));
    border-color: hsl(var(--gold, 42 42% 60%));
    font-weight: 600;
}
.tt-pagination__link.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}
.tt-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 36px;
    color: rgba(255, 255, 255, 0.4);
}

/* ─────────────────────────────────────────────────────
   SALVATI — new card variants (blog, product, pillola)
   ───────────────────────────────────────────────────── */
.tt-salvati-blog-card,
.tt-salvati-product-card,
.tt-salvati-pillola-card {
    display: flex; flex-direction: column;
    background: hsla(var(--surface-2) / 0.6);
    border: 1px solid hsl(var(--hairline));
    border-radius: 14px;
    overflow: hidden;
    transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tt-salvati-blog-card:hover,
.tt-salvati-product-card:hover,
.tt-salvati-pillola-card:hover {
    border-color: hsla(var(--gold) / 0.35);
    transform: translateY(-2px);
}
.tt-salvati-blog-card__thumb,
.tt-salvati-product-card__thumb,
.tt-salvati-pillola-card__thumb {
    display: block;
    aspect-ratio: 16 / 9;
    background: hsl(var(--surface-3));
    overflow: hidden;
    position: relative;
}
.tt-salvati-blog-card__thumb img,
.tt-salvati-product-card__thumb img,
.tt-salvati-pillola-card__thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--dur-base) var(--ease-out);
}
.tt-salvati-blog-card:hover .tt-salvati-blog-card__thumb img,
.tt-salvati-product-card:hover .tt-salvati-product-card__thumb img,
.tt-salvati-pillola-card:hover .tt-salvati-pillola-card__thumb img {
    transform: scale(1.04);
}
.tt-salvati-product-card__thumb { aspect-ratio: 1 / 1; }

.tt-salvati-blog-card__body,
.tt-salvati-product-card__body,
.tt-salvati-pillola-card__body {
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px 14px 12px;
    flex: 1;
}
.tt-salvati-blog-card__title,
.tt-salvati-product-card__title,
.tt-salvati-pillola-card__q {
    color: #fff; font-size: 15px; font-weight: 600;
    text-decoration: none; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.tt-salvati-blog-card__title:hover,
.tt-salvati-product-card__title:hover { color: hsl(var(--gold)); }

.tt-salvati-blog-card__excerpt,
.tt-salvati-pillola-card__a {
    color: rgba(255,255,255,0.55); font-size: 13px; line-height: 1.5;
    margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.tt-salvati-product-card__price {
    display: flex; align-items: baseline; gap: 8px;
}
.tt-salvati-product-card__sale {
    color: hsl(var(--gold)); font-weight: 700; font-size: 15px;
}
.tt-salvati-product-card__old {
    color: rgba(255,255,255,0.4); font-size: 13px;
    text-decoration: line-through;
}

.tt-salvati-pillola-card__play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 28px;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.45));
    opacity: 0.9;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.tt-salvati-pillola-card:hover .tt-salvati-pillola-card__play { opacity: 1; }

/* Tabs overflow fix for many tabs */
.tt-tabs { overflow-x: auto; scrollbar-width: none; }
.tt-tabs::-webkit-scrollbar { display: none; }

/* ─────────────────────────────────────────────────────
   SHARED — Save-toggle button on cards (bookmark overlay)
   ───────────────────────────────────────────────────── */
.tt-save-toggle {
    position: absolute;
    top: 10px; right: 10px;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(12, 12, 12, 0.72);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tt-save-toggle:hover {
    background: rgba(0,0,0,0.88);
    color: hsl(var(--gold));
    transform: translateY(-1px);
}
.tt-save-toggle.is-saved {
    color: hsl(var(--gold));
    border-color: hsla(var(--gold) / 0.6);
}
.tt-save-toggle svg { display: block; width: 18px; height: 18px; }

/* Blog detail — overlay on featured image */
.ul-blog-details-img { position: relative; }
.tt-save-toggle--hero {
    top: 14px; right: 14px;
    width: 44px; height: 44px;
}
.tt-save-toggle--hero svg { width: 20px; height: 20px; }

/* Blog detail — inline with title (fallback when no image) */
.ul-blog-details-heading {
    position: relative;
    padding-right: 56px;
}
.tt-save-toggle--inline {
    position: absolute;
    top: 0; right: 0;
    background: rgba(255,255,255,0.06);
}

/* Ensure cards are a positioning context for save toggle */
.tt-blog { position: relative; }
.tt-pillole-card { position: relative; }
.tt-product-card { position: relative; }

/* ─────────────────────────────────────────────────────
   AUTH FORMS — login / signup — dark theme aligned
   ───────────────────────────────────────────────────── */
.tt-login {
    background: hsl(var(--surface-2)) !important;
    border: 1px solid hsl(var(--hairline)) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35) !important;
    color: rgba(255, 255, 255, 0.85);
    /* width esplicita: dentro .tt-softnav-region (flex column) i margini
       auto disattivano lo stretch e la card collasserebbe sul contenuto */
    width: 100%;
    max-width: 460px !important;
    margin: 48px auto !important;
    padding: 36px 36px !important;
    border-radius: 16px !important;
    position: relative;
    isolation: isolate;
}
.tt-login::before {
    content: "";
    position: absolute;
    top: 0; left: 24px; right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, hsla(var(--gold) / 0.55), transparent);
    pointer-events: none;
}
.tt-login .heading { margin-bottom: 24px !important; }
.tt-login__title {
    font-family: var(--font-display);
    color: #fff !important;
    font-weight: 500 !important;
    font-size: 1.8rem !important;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 6px !important;
}
.tt-login__subtitle {
    color: rgba(255, 255, 255, 0.55) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    margin: 0 !important;
}

.tt-login-form {
    gap: 14px !important;
    margin-bottom: 20px !important;
}

.tt-login .field-container {
    background: hsla(var(--surface-3) / 0.6) !important;
    border: 1px solid hsl(var(--hairline)) !important;
    border-radius: 10px !important;
    padding: 0 14px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color var(--dur-fast, 160ms) var(--ease-out);
}
.tt-login .field-container:focus-within {
    border-color: hsla(var(--gold) / 0.55) !important;
}
.tt-login .field-container i {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}
.tt-login .field-container input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #fff !important;
    padding: 12px 0 !important;
    font-size: 14px !important;
    width: 100% !important;
    min-width: 0;
}
/* Il 14px !important qui sopra batte il floor anti-zoom di
   design-tokens.css (specificità maggiore): override locale. */
@media (max-width: 767px) {
    .tt-login .field-container input { font-size: 16px !important; }
}
.tt-login .field-container input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Mostra/nascondi password: bottone icona dentro il field-container */
.tt-pw-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: color var(--dur-fast, 160ms) var(--ease-out),
                background-color var(--dur-fast, 160ms) var(--ease-out);
}
.tt-pw-toggle:hover { color: rgba(255, 255, 255, 0.85); }
.tt-pw-toggle:focus-visible {
    outline: 2px solid hsla(var(--gold) / 0.65);
    outline-offset: 2px;
}
.tt-pw-toggle.is-visible { color: hsl(var(--gold)); }
.tt-pw-toggle .tt-pw-toggle__eye-off { display: none; }
.tt-pw-toggle.is-visible .tt-pw-toggle__eye { display: none; }
.tt-pw-toggle.is-visible .tt-pw-toggle__eye-off { display: block; }

/* Conferma di fine step nei flussi auth (link inviato, password reimpostata) */
.tt-login-sent {
    text-align: center;
    padding: 4px 0 20px;
}
.tt-login-sent__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: hsla(var(--gold) / 0.12);
    border: 1px solid hsla(var(--gold) / 0.35);
    color: hsl(var(--gold));
}
.tt-login-sent__icon svg { width: 26px; height: 26px; }
.tt-login-sent__icon--ok {
    background: hsla(var(--status-approved) / 0.12);
    border-color: hsla(var(--status-approved) / 0.4);
    color: hsl(var(--status-approved));
}
.tt-login-sent__address {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    word-break: break-all;
    margin: 0 0 10px;
}
.tt-login-sent__text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
.tt-login-sent__text strong { color: rgba(255, 255, 255, 0.9); font-weight: 600; }
.tt-login-sent__hint {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    line-height: 1.55;
    margin: 12px 0 0;
}

/* Stessa pillola del submit, ma su un link (fine flusso: "Vai all'accesso") */
a.tt-login-form__submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Submit in attesa: testo sostituito + spinner, niente doppio invio.
   Lo spinner è un flex item, così resta agganciato al testo qualunque sia
   la lunghezza dell'etichetta. */
.tt-login-form__submit-btn.is-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0.75;
    cursor: progress;
}
.tt-login-form__submit-btn.is-loading::before {
    content: "";
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: tt-login-spin 620ms linear infinite;
}
@keyframes tt-login-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .tt-login-form__submit-btn.is-loading::before { animation-duration: 1800ms; }
}

.tt-login .sub-actions {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    gap: 12px !important;
}
.tt-login .sub-actions a {
    color: hsl(var(--gold));
    text-decoration: none;
}
.tt-login .sub-actions a:hover { text-decoration: underline; }
.tt-login .sub-actions label {
    cursor: pointer;
    padding-left: 6px;
    color: rgba(255, 255, 255, 0.75);
}
.tt-login .sub-actions input[type="checkbox"] {
    accent-color: hsl(var(--gold));
    width: 16px; height: 16px;
    vertical-align: middle;
}

.tt-login-form__submit-btn {
    height: 48px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, hsl(var(--gold-soft, var(--gold))), hsl(var(--gold))) !important;
    color: hsl(var(--gold-ink, 0 0% 10%)) !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter var(--dur-fast, 160ms) var(--ease-out);
}
.tt-login-form__submit-btn:hover { filter: brightness(1.05); }

.other-login-options { text-align: center; margin: 18px 0 0; }
.other-login-options__title { position: relative; }
.other-login-options__title::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    border-top: 1px solid hsl(var(--hairline));
    z-index: 0;
}
.other-login-options__title span {
    position: relative;
    z-index: 1;
    padding: 0 12px;
    background: hsl(var(--surface-2)) !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.other-login-options .options {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
}
.other-login-options .options > * {
    width: 44px; height: 44px;
    background: hsla(var(--surface-3) / 0.7) !important;
    border: 1px solid hsl(var(--hairline)) !important;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color var(--dur-fast, 160ms) var(--ease-out),
                background var(--dur-fast, 160ms) var(--ease-out);
    cursor: pointer;
}
.other-login-options .options > *:hover {
    border-color: hsla(var(--gold) / 0.5) !important;
    background: hsla(var(--surface-3) / 1) !important;
}
.other-login-options .options img {
    width: 20px; height: 20px;
    object-fit: contain;
}

.register-direction {
    text-align: center;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
}
.register-direction a {
    color: hsl(var(--gold));
    text-decoration: none;
    font-weight: 600;
}
.register-direction a:hover { text-decoration: underline; }

@media (max-width: 479px) {
    .tt-login {
        padding: 28px 20px !important;
        margin: 28px auto !important;
    }
    .tt-login__title { font-size: 1.45rem !important; }
    .tt-login::before { left: 14px; right: 14px; }
}

/* ─────────────────────────────────────────────────────
   CTA INVERSO PERCORSI — .tt-path-ref
   ───────────────────────────────────────────────────── */
.tt-path-ref {
    display: block;
    font-size: 12px;
    color: var(--wardrobe-ink-muted);
    margin-top: 4px;
    margin-bottom: 8px;
}
.tt-path-ref a {
    color: var(--wardrobe-gold);
    text-decoration: none;
}
.tt-path-ref a:hover {
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────
   BACK LINK — stile sobrio (uppercase, no background)
   Coerente con outfit-detail__back-link
   ───────────────────────────────────────────────────── */
.tt-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 6px 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--wardrobe-ink-muted, #988a81);
    text-decoration: none;
    transition: color .2s;
}
.tt-back-link:hover { color: #fff; }
.tt-back-link svg {
    display: block;
    transition: transform .2s;
}
.tt-back-link:hover svg { transform: translateX(-2px); }

/* ─────────────────────────────────────────────────────
   BLOG & RISORSE — pill alignment + section spacing
   Riusano .wardrobe-pill (coerenza con wardrobe/outfit).
   ───────────────────────────────────────────────────── */
.tt-blog-pills,
.tt-risorse-pills {
    margin: 0 0 24px;
}
/* /blog: il page-hero ha già border-bottom + margin-bottom: 24px,
   quindi le pill stanno appena sotto e poi la lista parte stretta. */
.tt-blog-list-section { padding: 0 0 56px; }

/* /risorse: stacca la grid scaricabili dalle pill */
.tt-risorse-pills + .tt-risorse-grid { margin-top: 28px; }
/* fallback se la grid arriva direttamente dopo l'empty-state */
.tt-risorse-pills + .tt-empty-state { margin-top: 28px; }

/* ─────────────────────────────────────────────────────
   COMING SOON — feature grid in home
   Layout dinamico in base al numero di item (1, 2, 3, 4),
   con fallback auto-fill per 5+. Vedi coming-soon-grid.php.
   ───────────────────────────────────────────────────── */

.coming-soon-section {
    /* Distacco verso la sezione successiva (es. "Ultimi articoli") */
    margin-bottom: 40px;
}

.cs-feature-section__head {
    margin: 0 0 20px;
}
.cs-feature-section__head h2 {
    margin: 0;
}
.cs-feature-section__head p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--wardrobe-ink-soft, #888);
}

.cs-feature-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 250px;
}
/* 1 item: metà riga, stesse dimensioni della prima card del layout a 2 item */
.cs-feature-grid--n1 > .cs-feature-card { grid-column: 1 / 4; }

/* 2 items: 50/50 sulla stessa riga */
.cs-feature-grid--n2 > .cs-feature-card:nth-child(1) { grid-column: 1 / 4; }
.cs-feature-grid--n2 > .cs-feature-card:nth-child(2) { grid-column: 4 / 7; }

/* 3 items: card alta a sinistra (3 col × 2 righe) + 2 stackate a destra */
.cs-feature-grid--n3 > .cs-feature-card:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; }
.cs-feature-grid--n3 > .cs-feature-card:nth-child(2) { grid-column: 4 / 7; grid-row: 1; }
.cs-feature-grid--n3 > .cs-feature-card:nth-child(3) { grid-column: 4 / 7; grid-row: 2; }

/* 4 items: top 50/50, bottom narrow+wide (2/4) — vedi screenshot di riferimento */
.cs-feature-grid--n4 > .cs-feature-card:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
.cs-feature-grid--n4 > .cs-feature-card:nth-child(2) { grid-column: 4 / 7; grid-row: 1; }
.cs-feature-grid--n4 > .cs-feature-card:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
.cs-feature-grid--n4 > .cs-feature-card:nth-child(4) { grid-column: 3 / 7; grid-row: 2; }

/* 5+ items: fallback grid auto-fill */
.cs-feature-grid:not([class*="cs-feature-grid--n"]) {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ─── Card ──────────────────────────────────────────── */

.cs-feature-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    isolation: isolate;
    background: var(--wardrobe-surface, #1a1a1a);
    border: 1px solid var(--wardrobe-gold-soft);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
    transition: transform 220ms var(--ease-out, ease-out),
                box-shadow 220ms var(--ease-out, ease-out),
                border-color 220ms var(--ease-out, ease-out);
    min-height: 200px;
}
.cs-feature-card.cs-feature-card--linked:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    border-color: var(--wardrobe-gold);
    color: inherit;
}
.cs-feature-card.cs-feature-card--locked {
    cursor: default;
}

.cs-feature-card__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center;
    transition: transform 600ms var(--ease-out, ease-out);
}
.cs-feature-card.cs-feature-card--linked:hover .cs-feature-card__bg {
    transform: scale(1.04);
}

.cs-feature-card__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Banda nera robusta nella metà inferiore per garantire la leggibilità del
       titolo/release/CTA, indipendentemente dalla luminosità della foto. */
    background:
        linear-gradient(to top,
            rgba(0, 0, 0, 0.96) 0%,
            rgba(0, 0, 0, 0.80) 28%,
            rgba(0, 0, 0, 0.45) 55%,
            rgba(0, 0, 0, 0.12) 80%,
            rgba(0, 0, 0, 0) 100%);
}

.cs-feature-card__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.75);
    color: var(--wardrobe-gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid var(--wardrobe-gold-soft);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cs-feature-card__body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 22px 24px 22px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cs-feature-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.4rem, 1.1rem + 0.7vw, 2rem);
    line-height: 1.15;
    color: #fff;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Sulla card grande del layout 3-item (alta, sx) lasciamo più respiro al titolo */
.cs-feature-grid--n3 > .cs-feature-card:nth-child(1) .cs-feature-card__title {
    font-size: clamp(1.6rem, 1.2rem + 0.9vw, 2.2rem);
    -webkit-line-clamp: 3;
}

.cs-feature-card__release {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cs-feature-card__release-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}
.cs-feature-card__release-value {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--wardrobe-gold);
    letter-spacing: 0.4px;
}
.cs-feature-card__release-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.cs-feature-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 4px;
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border: 1px solid var(--wardrobe-gold-soft);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 200ms var(--ease-out, ease-out),
                border-color 200ms var(--ease-out, ease-out),
                gap 200ms var(--ease-out, ease-out);
}
.cs-feature-card__cta svg {
    width: 13px;
    height: 13px;
}
.cs-feature-card.cs-feature-card--linked:hover .cs-feature-card__cta {
    background: var(--wardrobe-gold);
    color: #1a1a1a;
    border-color: var(--wardrobe-gold);
    gap: 12px;
}

/* Tablet: layout asimmetrici collassano in 2 colonne semplici */
@media (max-width: 1023px) and (min-width: 768px) {
    .cs-feature-grid,
    .cs-feature-grid--n2,
    .cs-feature-grid--n3,
    .cs-feature-grid--n4 {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 200px;
    }
    .cs-feature-grid > .cs-feature-card {
        grid-column: auto !important;
        grid-row: auto !important;
    }
    .cs-feature-grid--n1 > .cs-feature-card { grid-column: 1 / -1 !important; }
}

/* Mobile: tutte le card in colonna singola */
@media (max-width: 767px) {
    .cs-feature-grid,
    .cs-feature-grid--n1,
    .cs-feature-grid--n2,
    .cs-feature-grid--n3,
    .cs-feature-grid--n4 {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 14px;
    }
    .cs-feature-grid > .cs-feature-card {
        grid-column: 1 !important;
        grid-row: auto !important;
        min-height: 180px;
        aspect-ratio: 16 / 10;
    }
    .cs-feature-card__body {
        padding: 18px 18px 18px;
        gap: 8px;
    }
    .cs-feature-card__title {
        font-size: 1.25rem;
    }
    .cs-feature-card__release-value {
        font-size: 1rem;
    }
}

/* ---- Banner installazione PWA ------------------------------------------ */
.pwa-install-banner {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    /* Sopra il dock (z-index 100), sotto i modali Bootstrap (1050). */
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(560px, calc(100vw - 24px));
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--wardrobe-surface-2);
    border: 1px solid rgba(245, 242, 236, 0.10);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.pwa-install-banner[hidden] { display: none; }

.pwa-install-banner__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex: 0 0 auto;
}

.pwa-install-banner__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    /* base 0: su telefono (flex-wrap) il testo resta accanto all'icona
       invece di andare a capo sotto di lei; a capo vanno solo i pulsanti. */
    flex: 1 1 0%;
}

.pwa-install-banner__title {
    font-size: 0.875rem;
    color: var(--wardrobe-ink);
}

.pwa-install-banner__text {
    font-size: 0.8125rem;
    color: var(--wardrobe-ink-muted);
}

.pwa-install-banner__actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

/* Sotto i 768px c'è il dock fluttuante: il banner gli sta sopra.
   Valori presi da dock.css — il dock sta a bottom 14px + safe area e
   occupa gli ultimi 84px. */
@media (max-width: 767px) {
    .pwa-install-banner {
        bottom: calc(84px + env(safe-area-inset-bottom));
        flex-wrap: wrap;
    }
    .pwa-install-banner__actions { width: 100%; justify-content: flex-end; }
}

/* Pagine senza dock: il banner può scendere (stessa condizione di dock.css). */
@media (max-width: 767px) {
    body.no-dock .pwa-install-banner {
        bottom: calc(24px + env(safe-area-inset-bottom));
    }
}

/* Icone dei pulsanti del browser dentro il testo (banner e modal). */
.pwa-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    margin: 0 1px;
    padding: 0.2em;
    vertical-align: -0.45em;
    border-radius: 6px;
    background: rgba(245, 242, 236, 0.08);
    color: hsl(var(--gold));
}
.pwa-ico svg { width: 100%; height: 100%; display: block; }

/* Modal istruzioni: sopra a tutto, anche al menu profilo e alla sidebar
   a schermo intero di telefono (z-index 1250-1300), da cui si apre.
   Doppia classe: ui-components.css, caricato dopo, fissa .tt-verify-modal
   a 1080. */
.tt-verify-modal.pwa-install-modal { z-index: 1400; }
.pwa-install-modal .tt-verify-modal__container {
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
}
.pwa-install-modal__icon {
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 14px;
}
.pwa-steps {
    counter-reset: pwa-step;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    text-align: left;
}
/* Il numero sta fuori dal flusso: il testo con le icone resta in riga. */
.pwa-steps li {
    counter-increment: pwa-step;
    position: relative;
    padding-left: 36px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}
.pwa-steps li::before {
    content: counter(pwa-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: hsla(var(--gold) / 0.15);
    color: hsl(var(--gold));
    font-size: 12px;
    font-weight: 600;
}
.pwa-steps__note {
    margin: -8px 0 22px;
    font-size: 12.5px;
    line-height: 1.6;
    text-align: left;
    color: rgba(255, 255, 255, 0.55);
}
.pwa-steps[hidden],
.pwa-steps__note[hidden],
.pwa-install-banner__text[hidden] { display: none; }

/* ---- Pannello permesso notifiche --------------------------------------- */
.push-permission-panel {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    /* Sopra il dock (z-index 100), sotto i modali Bootstrap (1050/1055). */
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(560px, calc(100vw - 24px));
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--wardrobe-surface-2);
    border: 1px solid rgba(245, 242, 236, 0.10);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.push-permission-panel[hidden] { display: none; }

.push-permission-panel__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex: 0 0 auto;
}

.push-permission-panel__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.push-permission-panel__title {
    font-size: 0.875rem;
    color: var(--wardrobe-ink);
}

.push-permission-panel__text {
    font-size: 0.8125rem;
    color: var(--wardrobe-ink-muted);
}

.push-permission-panel__actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

/* Sotto i 768px c'è il dock fluttuante: il pannello gli sta sopra.
   Valori da dock.css: dock a bottom 14px + safe area, contenuto con 84px
   riservati in fondo. */
@media (max-width: 767px) {
    .push-permission-panel {
        bottom: calc(84px + env(safe-area-inset-bottom));
        flex-wrap: wrap;
    }
    .push-permission-panel__actions { width: 100%; justify-content: flex-end; }
}

/* ---- Sezione notifiche nelle impostazioni ------------------------------ */
.push-settings__intro {
    color: var(--wardrobe-ink-muted);
    font-size: 0.875rem;
    margin-bottom: 14px;
}

.push-settings__hint {
    display: block;
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--wardrobe-ink-muted);
    opacity: 0.8;
}

.push-settings__devices {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.push-settings__devices li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--wardrobe-surface-2);
    border: 1px solid rgba(245, 242, 236, 0.08);
}

.push-settings__devices li span {
    font-size: 0.875rem;
    color: var(--wardrobe-ink);
}

.push-settings__devices li small {
    font-size: 0.75rem;
    color: var(--wardrobe-ink-muted);
}

.push-settings__devices li button {
    margin-left: auto;
}