/* ============================================================
   mobile-drawer.css — CHROME MOBILE CONDIVISO (estratto da product.css, sess.49 2026-06-05)
   Drawer left-slide app-style + sub-panel Impostazioni (lingua/unita/tema/font-scale)
   + hide dei controlli util extra dell'header in regime app (vanno nel drawer).
   Page-agnostic: lo caricano product-f7/f10 + family/range (+ pagine future).
   Markup/logica: assets/js/modules/mobile-drawer.js.
   ============================================================ */

/* ============================================================
   START — MOBILE DRAWER + SUB-PANEL SETTINGS (sessione 22 Step 1.5b)
   Drawer left-slide app-style + sub-panel Impostazioni con segmented
   controls per lingua/unità/tema/font-scale. Nasconde inoltre
   controlli extra dell'header in mobile (vanno nel drawer).
   ============================================================ */

/* Drawer + backdrop hidden by default (mounted lazily da JS) */
.ds-mobile-drawer,
.ds-mobile-drawer-backdrop { display: none; }

/* Font-scale: applica scale al root font-size — site-wide */
:root[data-ds-font-scale] {
  font-size: calc(16px * var(--ds-font-scale, 1));
}

@media (max-width: 1399.98px) {

  /* ─── HIDE controlli extra header in mobile (vanno nel drawer) ─── */
  body.ds-vp-app #site-header #header-units-toggle,
  body.ds-vp-app #site-header .textsize-btn,
  body.ds-vp-app #site-header [data-theme-toggle],
  body.ds-vp-app #site-header .lang,
  body.ds-vp-app #site-header #header-rfq-btn {
    display: none !important;
  }

  /* ─── DRAWER BACKDROP ─── */
  body.ds-vp-app .ds-mobile-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    z-index: 8990;
    transition: opacity .25s ease;
  }
  body.ds-vp-app .ds-mobile-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* ─── DRAWER CONTAINER ─── */
  body.ds-vp-app .ds-mobile-drawer {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 85vw);
    max-width: 320px;
    z-index: 9000;
    background: linear-gradient(180deg, #fafafa, #f0f0f0);
    box-shadow: 12px 0 28px rgba(0, 0, 0, .22);
    transform: translateX(-100%);
    transition: transform .25s ease-out;
    overflow: hidden;       /* clip sub-panel */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.ds-vp-app .ds-mobile-drawer.is-open {
    transform: translateX(0);
  }

  /* Lock body scroll quando drawer aperto */
  body.has-mobile-drawer { overflow: hidden; }

  /* ─── DRAWER PANEL (main + settings stack) ─── */
  body.ds-vp-app .ds-mobile-drawer .dmd-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: transform .25s ease-out;
  }

  /* ⚠️ IL FONDO DEI PANNELLI SI DICHIARA, NON SI EREDITA — sess.73.
     Il pannello principale portava dalla sess.22 una classe `is-active` che
     nessuna riga di questo foglio e nessuna riga del modulo leggevano: era
     decorativa. Ma `ds-base.css:263` ha un `.is-active{background:var(--brand)}`
     SENZA scope — vale per qualunque elemento del sito — e quindi dipingeva
     tutto il drawer di #FFD100. In LIGHT: il menu era un rettangolo giallo
     pieno, con la porta del catalogo invisibile perche' gialla su gialla.
     Non si vedeva da mesi perche' il sito parte in DARK, e li' il fondo scuro
     in coda a questo file copriva la perdita: il difetto stava nella
     schermata che nessuno apriva per prima (`principle_default_e_la_realta`
     applicato al contrario — il default NASCONDEVA il caso peggiore).
     ⇒ Due mosse, non una: la classe inutile e' stata tolta dal markup (causa),
     e questa riga dichiara il fondo anche in light (controllo). Senza la
     seconda, la prossima classe di passaggio rifa' lo stesso danno.
     `principle_stessa_fragilita` — servono controlli, non attenzione. */
  body.ds-vp-app .dmd-panel--main {
    transform: translateX(0);
    background: linear-gradient(180deg, #fafafa, #f0f0f0);
  }
  body.ds-vp-app .ds-mobile-drawer.is-settings-open .dmd-panel--main {
    transform: translateX(-30%);
    pointer-events: none;
  }

  body.ds-vp-app .dmd-panel--settings {
    transform: translateX(100%);
    background: linear-gradient(180deg, #fff, #f5f5f5);
  }
  body.ds-vp-app .ds-mobile-drawer.is-settings-open .dmd-panel--settings {
    transform: translateX(0);
  }

  /* ─── DRAWER HEAD — sticky top + brand center (Step 1.5b.4)
     Pattern: logo center + tagline sotto + close right. Bordo bottom amber
     sottile per richiamo brand. Il head sticky resta visibile durante scroll
     del panel (pattern Apple Settings / Twitter side menu). ─── */
  body.ds-vp-app .dmd-head {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 10px;
    padding: 18px 14px;
    border-bottom: 2px solid #F4B532;     /* accent brand amber */
    background: #fff;
  }

  body.ds-vp-app .dmd-head--sub {
    background: #fafafa;
    grid-template-columns: 44px 1fr 44px;
  }

  body.ds-vp-app .dmd-brand {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }

  /* Step 1.5b.6: solo logo (no payoff). Logo 40px centrato.
     Se in futuro torna il payoff, ripristina .dmd-tagline + dmd-brand
     a flex-direction: column. */
  body.ds-vp-app .dmd-logo {
    height: 40px;
    width: auto;
    display: block;
  }

  /* Close va in colonna 3 della grid */
  body.ds-vp-app .dmd-head .dmd-close {
    grid-column: 3;
    justify-self: end;
  }

  body.ds-vp-app .dmd-sub-title {
    flex: 1 1 auto;
    margin: 0;
    text-align: center;
    font: 700 1rem/1 "Oswald", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #111;
  }

  body.ds-vp-app .dmd-close,
  body.ds-vp-app .dmd-back {
    appearance: none;
    background: transparent;
    border: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #111;
    border-radius: 12px;
    transition: background .15s ease;
  }
  body.ds-vp-app .dmd-close:hover,
  body.ds-vp-app .dmd-close:active,
  body.ds-vp-app .dmd-back:hover,
  body.ds-vp-app .dmd-back:active {
    background: rgba(0, 0, 0, .06);
  }

  /* ─── SEARCH BUTTON inline ─── */
  body.ds-vp-app .dmd-search-btn {
    appearance: none;
    margin: 14px 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(17, 17, 17, .55);
    font: 500 .9rem/1 "Oswald", system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
    text-transform: none;
    letter-spacing: .01em;
    box-shadow: inset 0 1px rgba(255, 255, 255, .8);
    transition: background .15s ease;
  }
  body.ds-vp-app .dmd-search-btn:hover,
  body.ds-vp-app .dmd-search-btn:active {
    background: rgba(255, 209, 0, .08);
  }
  body.ds-vp-app .dmd-search-btn svg {
    flex: 0 0 auto;
    color: rgba(17, 17, 17, .45);
  }
  body.ds-vp-app .dmd-search-btn span {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ─── LE DUE PORTE (sess.73) ──────────────────────────────────────────
     Ricerca e catalogo sono le uniche due cose che, sotto i 1400, portano a
     un apparecchio — e sono la stessa natura: aprono un pannello, non
     cambiano pagina. Quindi stanno nello stesso contenitore e si
     assomigliano. Prima «Tutti i prodotti» era la prima riga di un elenco di
     sei voci: la porta del catalogo pesava quanto «Rigging», che e' spenta.
     ⚠️ `.dmd-doors` prende il margine che prima stava sul bottone di ricerca;
     la riga qui sotto lo azzera sul figlio, con specificita' piu' alta. ─── */
  body.ds-vp-app .dmd-doors {
    display: grid;
    gap: 8px;
    padding: 14px 16px 2px;
  }
  body.ds-vp-app .dmd-doors .dmd-search-btn {
    margin: 0;
    width: 100%;
  }

  /* La porta del catalogo: famiglia 3 del design system, outline gold
     (`feedback_button_design_system`). Piu' forte della ricerca — che e'
     neutra — perche' chi non sa il nome del prodotto passa di qui.
     I colori sono token: virano da soli in dark, senza una regola gemella. */
  body.ds-vp-app .dmd-catalog-btn {
    appearance: none;
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--ds-c-accent-border);
    background: var(--ds-c-accent-subtle);
    color: var(--ds-c-text);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 700 .92rem/1 "Oswald", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
  }
  body.ds-vp-app .dmd-catalog-btn span {
    flex: 1 1 auto;
  }
  body.ds-vp-app .dmd-catalog-btn svg:first-child {
    flex: 0 0 auto;
    color: var(--ds-c-accent);
  }
  body.ds-vp-app .dmd-catalog-btn:hover,
  body.ds-vp-app .dmd-catalog-btn:active,
  body.ds-vp-app .dmd-catalog-btn[aria-expanded="true"] {
    background: var(--ds-c-accent-subtle);
    border-color: var(--ds-c-accent);
  }

  /* ─── LA TERZA PORTA: RIGGING (12/09/2026) ───────────────────────────────
     Nell'header RIGGING sta ACCANTO a LIGHTING, non dentro. Sul telefono era
     finito fra le famiglie di apparecchi — David: «rigging e' dentro le
     famiglie di lighting che non esiste come categoria». Qui torna al suo
     livello: stessa forma della porta del catalogo, inchiostro neutro perche'
     la porta primaria resta una sola. */
  body.ds-vp-app .dmd-rigging-btn {
    border-color: var(--ds-c-border);
    background: var(--ds-c-surface-2, rgba(255,255,255,.04));
    text-decoration: none;
  }
  body.ds-vp-app .dmd-rigging-btn svg:first-child {
    color: var(--ds-c-text-secondary);
  }
  body.ds-vp-app .dmd-rigging-btn:hover,
  body.ds-vp-app .dmd-rigging-btn:active {
    border-color: var(--ds-c-text-secondary);
    background: var(--ds-c-surface-2, rgba(255,255,255,.06));
  }

  /* ─── SECTION (Famiglie, Serie e range, De Sisti) ─── */
  body.ds-vp-app .dmd-section {
    padding: 6px 0 6px;
  }

  body.ds-vp-app .dmd-section-title {
    margin: 12px 16px 6px;
    font: 700 .68rem/1 "Oswald", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(17, 17, 17, .55);
  }

  body.ds-vp-app .dmd-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  body.ds-vp-app .dmd-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    color: #111;
    text-decoration: none;
    font: 600 .92rem/1.2 "Oswald", system-ui, sans-serif;
    letter-spacing: .02em;
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    transition: background .15s ease;
    min-height: 44px;
  }
  body.ds-vp-app .dmd-link:hover,
  body.ds-vp-app .dmd-link:active {
    background: rgba(255, 209, 0, .12);
  }

  /* ⚠️ «Tutti i prodotti» e' un <button>, non un <a>: apre il megamenu invece
     di navigare. Prende tutte le regole di .dmd-link qui sopra, ma un bottone
     si dimensiona al contenuto — la riga risultava piu' corta delle altre e il
     chevron finiva attaccato al testo invece che a destra.
     Queste righe azzerano solo i default del bottone: nessuna regola nuova. */
  body.ds-vp-app button.dmd-link {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    background: transparent;
    text-align: left;
    cursor: pointer;
  }
  /* ─── LA PAGINA IN CUI SEI (sess.73) ──────────────────────────────────
     Il drawer non diceva da nessuna parte dove ti trovi: aperto sull'F7 o
     sulla home era identico. Sotto i 1400 e' l'UNICA navigazione, quindi era
     l'unico posto che poteva dirlo e taceva.
     Il segno e' il «bordino container» del design system — inset 3px, .48 in
     light e .32 in dark (`feedback_accent_borders_logical`) — non un colore
     nuovo inventato per l'occasione. Accompagnato da `aria-current="page"`
     nel markup, cosi' lo stato esiste anche per chi non lo vede. ─── */
  body.ds-vp-app .dmd-link.is-current {
    box-shadow: inset 3px 0 0 rgba(244, 181, 50, .48);
    background: var(--ds-c-accent-subtle);
    font-weight: 700;
  }

  body.ds-vp-app .dmd-link.is-disabled {
    color: rgba(17, 17, 17, .35);
    cursor: not-allowed;
    pointer-events: auto;
  }
  body.ds-vp-app .dmd-link.is-disabled:hover {
    background: transparent;
  }
  body.ds-vp-app .dmd-soon {
    font-size: .68rem;
    font-weight: 500;
    color: rgba(17, 17, 17, .42);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 8px;
    background: rgba(0, 0, 0, .05);
    border-radius: 999px;
  }

  /* ─── SETTINGS BUTTON ─── */
  body.ds-vp-app .dmd-settings-btn {
    appearance: none;
    margin: 12px 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    gap: 12px;
    color: #111;
    font: 600 .92rem/1 "Oswald", system-ui, sans-serif;
    cursor: pointer;
    text-transform: none;
    letter-spacing: .02em;
    transition: background .15s ease;
    min-height: 44px;
  }
  body.ds-vp-app .dmd-settings-btn:hover,
  body.ds-vp-app .dmd-settings-btn:active {
    background: rgba(255, 209, 0, .10);
  }
  body.ds-vp-app .dmd-settings-btn span {
    flex: 1 1 auto;
  }
  body.ds-vp-app .dmd-settings-btn svg:first-child {
    color: rgba(17, 17, 17, .65);
  }

  body.ds-vp-app .dmd-foot {
    margin-top: auto;
    padding: 14px 16px;
    text-align: center;
    font-size: .72rem;
    color: rgba(17, 17, 17, .45);
    border-top: 1px solid rgba(0, 0, 0, .06);
  }

  /* ─── SETTINGS BODY ─── */
  body.ds-vp-app .dmd-settings-body {
    padding: 14px 16px;
    flex: 1 1 auto;
  }

  body.ds-vp-app .dmd-setting {
    margin-bottom: 18px;
  }

  body.ds-vp-app .dmd-setting-label {
    display: block;
    margin-bottom: 6px;
    font: 700 .68rem/1 "Oswald", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(17, 17, 17, .55);
  }

  /* ─── SEGMENTED CONTROL ─── */
  body.ds-vp-app .dmd-segmented {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 4px;
    background: rgba(0, 0, 0, .06);
    border-radius: 12px;
  }

  body.ds-vp-app .dmd-segmented button {
    appearance: none;
    border: 0;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 9px;
    background: transparent;
    color: rgba(17, 17, 17, .72);
    font: 700 .82rem/1 "Oswald", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  }
  body.ds-vp-app .dmd-segmented button.is-active {
    background: #fff;
    color: #111;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  }
  body.ds-vp-app .dmd-segmented button:not(.is-active):hover,
  body.ds-vp-app .dmd-segmented button:not(.is-active):active {
    background: rgba(255, 255, 255, .5);
  }

  /* Font-scale chip: A small/medium/large con dimensioni progressive */
  body.ds-vp-app .dmd-segmented--fontscale .fs-aa { font-weight: 700; line-height: 1; }
  body.ds-vp-app .fs-aa--small  { font-size: .82rem; }
  body.ds-vp-app .fs-aa--medium { font-size: 1rem; }
  body.ds-vp-app .fs-aa--large  { font-size: 1.18rem; }
}

/* Dark mode adjustments per drawer — Step 1.5b.1 fix:
   esteso a tutti i sub-elementi (era solo container, sub-panel rimaneva
   light → testo chiaro su bg chiaro = invisibile) */
body.ds-dark.ds-vp-app .ds-mobile-drawer {
  background: linear-gradient(180deg, #1a1a1a, #111);
  color: #f5f5f5;
}
body.ds-dark.ds-vp-app .dmd-panel--main,
body.ds-dark.ds-vp-app .dmd-panel--settings {
  background: linear-gradient(180deg, #1a1a1a, #111);
}
body.ds-dark.ds-vp-app .dmd-head,
body.ds-dark.ds-vp-app .dmd-head--sub,
body.ds-dark.ds-vp-app .dmd-search-btn,
body.ds-dark.ds-vp-app .dmd-settings-btn {
  background: #222;
  border-color: rgba(255, 255, 255, .08);
  color: #f5f5f5;
}
body.ds-dark.ds-vp-app .dmd-search-btn span {
  color: rgba(245, 245, 245, .55);
}
body.ds-dark.ds-vp-app .dmd-search-btn svg,
body.ds-dark.ds-vp-app .dmd-settings-btn svg:first-child {
  color: rgba(245, 245, 245, .65);
}
body.ds-dark.ds-vp-app .dmd-section-title,
body.ds-dark.ds-vp-app .dmd-setting-label {
  color: rgba(245, 245, 245, .55);
}
body.ds-dark.ds-vp-app .dmd-link {
  color: #f5f5f5;
  border-color: rgba(255, 255, 255, .04);
}
body.ds-dark.ds-vp-app .dmd-link:hover,
body.ds-dark.ds-vp-app .dmd-link:active {
  background: rgba(255, 209, 0, .15);
}
body.ds-dark.ds-vp-app .dmd-link.is-disabled { color: rgba(255, 255, 255, .35); }
/* Solo l'opacita' del bordino cambia (.32 in dark): il resto del segno di
   pagina corrente e' gia' su token e vira da solo. */
body.ds-dark.ds-vp-app .dmd-link.is-current {
  box-shadow: inset 3px 0 0 rgba(244, 181, 50, .32);
}
body.ds-dark.ds-vp-app .dmd-soon {
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .45);
}
body.ds-dark.ds-vp-app .dmd-foot {
  color: rgba(245, 245, 245, .35);
  border-color: rgba(255, 255, 255, .06);
}
body.ds-dark.ds-vp-app .dmd-close,
body.ds-dark.ds-vp-app .dmd-back,
body.ds-dark.ds-vp-app .dmd-sub-title {
  color: #f5f5f5;
}
body.ds-dark.ds-vp-app .dmd-close:hover,
body.ds-dark.ds-vp-app .dmd-back:hover {
  background: rgba(255, 255, 255, .08);
}
body.ds-dark.ds-vp-app .dmd-segmented {
  background: rgba(255, 255, 255, .08);
}
body.ds-dark.ds-vp-app .dmd-segmented button {
  color: rgba(245, 245, 245, .72);
}
body.ds-dark.ds-vp-app .dmd-segmented button.is-active {
  background: #2c2c2c;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
body.ds-dark.ds-vp-app .dmd-segmented button:not(.is-active):hover,
body.ds-dark.ds-vp-app .dmd-segmented button:not(.is-active):active {
  background: rgba(255, 255, 255, .04);
}

/* END — MOBILE DRAWER + SUB-PANEL SETTINGS */