/* ============================================================
   RIGHT RAIL v1.0
   Specchio del rail sinistro (nav header). Visibile solo ≥1900px.
   Contiene widget orientati all'utente: RFQ, configurazioni, etc.

   Due stati:
   – VUOTO  : presenza minima, zero peso visivo
   – PIENO  : card glass emerge progressivamente con contenuto
   ============================================================ */

/* ── Base: invisibile su tutti i breakpoint ───────────────── */
#ds-right-rail{
  display: none;
}

/* ── Compact + Wide ≥1400px: rail fisso a destra ──────────────
   sess.46: esteso da ≥1850 a ≥1400 per portare rail dx anche nella
   fascia compact desktop (laptop 14-15", desktop monitor 24" ridotto).
   In compact (1400-1849) il rail è più stretto (token responsive
   --ds-rail-lane-wide = clamp 228-266) e l'RFQ box è nascosto (resta
   inline via #rfq-cta). Le 4 shortcut cards (DL/Photo/DMX/Portfolio)
   restano visibili. Vedi sub-block 1400-1849.98 a fondo file.
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 1400px){

  /* Token simetria — specchia la colonna sinistra */
  :root{
    /* Inset identico per entrambi i lati: rail + gap */
    --ds-content-inset: calc(var(--ds-rail-lane-wide, 312px) + 76px);

    /* Margine intelligente: cresce in ultrawide per centrare il contenuto
       anche quando supera --ds-page-max-wide                              */
    --ds-content-margin: max(
      var(--ds-content-inset),
      calc(50% - var(--ds-page-max-wide, 1760px) / 2)
    );
  }

  /* ── RIGHT RAIL: invisibile a riposo, appare quando sticky ─── */
  /* Specchia il comportamento del nav sinistro:
     – a top:  nascosto fuori dal viewport a destra (opacity 0 + translateX)
     – sticky: scivola nel rail, bordo superiore = fondo di header+pb pill  */

  #ds-right-rail{
    display: block;
    position: fixed;
    /* Posizione base (non sticky) — stessa logica del nav pill left */
    top: calc(
      var(--ds-header-sticky-top, 8px)
      + var(--ds-header-sticky-h, 58px)
      + var(--ds-rail-stack-gap, 10px)
    );
    right: var(--ds-rail-left, 24px);
    width: var(--ds-rail-lane-wide, 312px);
    bottom: 24px;
    z-index: 90;
    pointer-events: none;
    overflow: hidden;

    /* Stato iniziale: invisibile, leggermente off-screen a destra */
    opacity: 0;
    transform: translateX(22px);

    /* Transizioni: top per allineamento, opacity+transform per apparizione */
    transition:
      top     0.22s ease,
      opacity 0.30s ease 0.08s,
      transform 0.30s cubic-bezier(0.22, 0.61, 0.36, 1) 0.08s;
  }

  /* Wrapper interno — non interattivo finché nascosto */
  #ds-rfq-rail{
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;               /* gap tra launcher cards */
    pointer-events: none;  /* disattivato a riposo, attivato con sticky */
  }

  /* ── Stato sticky: specchia il nav pill sinistro ─────────────── */
  /* Il nav pill (E) è a top: 8px; il rail dx deve avere lo stesso
     bordo superiore per simmetria visiva sx/dx.
     La pb pill centrale sta a 74px — rail e nav "abbracciano" la pill. */
  body.is-page-sticky #ds-right-rail{
    opacity: 1;
    transform: translateX(0);
    top: var(--ds-header-sticky-top, 8px);
  }

  body.is-page-sticky #ds-rfq-rail{
    pointer-events: auto;
  }

  /* ── DOWNLOADS SHORTCUT CARD ────────────────────────────── */
  .rail-dl-card{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 17px 10px 13px;   /* sess.49: pad-right per accento brand DESTRO (rail = colonna dx) */
    border-radius: 12px;
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(0,0,0,.07);
    box-shadow:
      inset 0 1px rgba(255,255,255,.90),
      0 3px 10px rgba(0,0,0,.07);
    text-decoration: none;
    color: rgba(0,0,0,.78);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
      background 150ms ease,
      box-shadow 150ms ease,
      transform 120ms ease;
    margin-top: 0;
  }
  /* sess.49: accento brand DESTRO (rail = colonna dx → regola accent logica) */
  .rail-dl-card::before{
    content: "";
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 3px;
    background: #F4B532;
    border-radius: 0 12px 12px 0;
    opacity: .65;
    transition: opacity 150ms ease;
  }
  .rail-dl-card::after{
    content: "";
    position: absolute;
    right: 4px; top: 0; bottom: 0;
    width: 1.5px;
    background: #F3E955;
    opacity: .40;
    transition: opacity 150ms ease;
  }
  .rail-dl-card:hover{
    background: rgba(255,255,255,.90);
    box-shadow:
      inset 0 1px rgba(255,255,255,.95),
      0 6px 18px rgba(0,0,0,.10);
    transform: translateY(-1px);
  }
  .rail-dl-card:hover::before{ opacity: .90; }
  .rail-dl-card:hover::after { opacity: .65; }
  .rail-dl-card:active{ transform: translateY(0); }
  .rail-dl-card:focus-visible{
    outline: 2px solid var(--ds-c-accent, #F4B532);
    outline-offset: 2px;
  }

  .rail-dl-card__icon{
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(0,0,0,.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0,0,0,.55);
  }
  .rail-dl-card:hover .rail-dl-card__icon{
    background: rgba(0,0,0,.08);
    color: rgba(0,0,0,.70);
  }

  .rail-dl-card__body{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .rail-dl-card__label{
    display: block;
    font: 700 10.5px/1 "Oswald", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: rgba(0,0,0,.75);
  }
  .rail-dl-card__sub{
    display: block;
    font: 400 9px/1.3 system-ui, sans-serif;
    color: rgba(0,0,0,.42);
    letter-spacing: .02em;
  }

  .rail-dl-card__arrow{
    flex-shrink: 0;
    color: rgba(0,0,0,.28);
    transition: transform 150ms ease, color 150ms ease;
  }
  .rail-dl-card:hover .rail-dl-card__arrow{
    transform: translateX(2px);
    color: rgba(0,0,0,.50);
  }

  /* ── RFQ CTA PERMANENTE ──────────────────────────────────── */
  /* Sovrascrive ds-btn--primary per il contesto rail stretto */
  .rail-rfq-cta{
    width: 100%;
    height: 44px;               /* leggermente più alto del --lg standard (40px) */
    border-radius: 10px;        /* meno pill, più card-like nel contesto rail */
    margin-top: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    /* Freccia destra: pseudo-elemento → aggiunto via CSS, non serve html */
    justify-content: space-between;
    padding-inline: 14px 12px;
  }
  /* Icona sinistra */
  .rail-rfq-cta__icon{
    flex-shrink: 0;
    opacity: .85;
  }
  /* Freccia → destra */
  .rail-rfq-cta::after{
    content: "→";
    font-family: system-ui, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 150ms ease;
  }
  .rail-rfq-cta:hover::after{
    transform: translateX(3px);
  }
  /* Press: freccia si schiaccia insieme al bottone */
  .rail-rfq-cta:active::after{
    transform: translateY(2px);
  }

  /* ── [hidden] override globale nel rail — display:flex/block sovrascrive l'attributo HTML ── */
  .rfq-rail-empty[hidden],
  .rfq-rail-items[hidden]{ display: none !important; }

  /* ── STATO VUOTO ─────────────────────────────────────────── */
  .rfq-rail-empty{
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 18px 16px 20px;
    border-radius: 16px;
    border: 1.5px dashed rgba(0,0,0,.12);
    background: transparent;
    color: rgba(0,0,0,.26);
    text-align: center;
    cursor: pointer;
    transition:
      background 200ms ease,
      border-color 200ms ease,
      color 200ms ease;
    margin-top: 4px;
  }
  .rfq-rail-empty:hover{
    background: rgba(0,0,0,.025);
    border-color: rgba(0,0,0,.22);
    color: rgba(0,0,0,.42);
  }
  .rfq-rail-empty:focus-visible{
    outline: 2px solid var(--ds-c-accent, #F4B532);
    outline-offset: 2px;
  }

  .rfq-rail-empty__icon{
    width: 28px;
    height: 28px;
    opacity: .40;
    flex-shrink: 0;
    transition: opacity 200ms ease;
  }
  .rfq-rail-empty:hover .rfq-rail-empty__icon{
    opacity: .65;
  }

  .rfq-rail-empty__label{
    font: 600 10px/1.2 "Oswald", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .10em;
    margin: 0;
  }
  .rfq-rail-empty__sub{
    font: 400 9.5px/1.3 system-ui, sans-serif;
    letter-spacing: .02em;
    opacity: .70;
    margin: 0;
  }

  /* ── STATO PIENO ─────────────────────────────────────────── */
  .rfq-rail-items{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.76);
    border: 1px solid rgba(0,0,0,.07);
    box-shadow:
      inset 0 1px rgba(255,255,255,.90),
      0 8px 28px rgba(0,0,0,.10);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    margin-top: 0;
    overflow: visible;   /* non scrolla la card — è la lista interna che scrolla */
  }
  .rfq-rail-items::-webkit-scrollbar{
    width: 4px;
  }
  .rfq-rail-items::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.12);
    border-radius: 2px;
  }

  /* Header della card RFQ */
  .rfq-rail-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    margin-bottom: 2px;
  }
  .rfq-rail-head__title{
    font: 700 10px/1 "Oswald", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: rgba(0,0,0,.55);
  }
  /* Badges wrapper */
  .rfq-rail-head__badges{
    display: flex;
    align-items: center;
    gap: 4px;
  }
  /* Badge configurazioni (giallo segnale pieno) */
  .rfq-rail-head__count{
    font: 600 10px/1 "Oswald", system-ui, sans-serif;
    padding: 3px 8px;
    border-radius: 999px;
    background: #F4B532;
    color: #1A1714;
    letter-spacing: .04em;
  }
  /* Pezzi totali — testo bold discreto */
  .rfq-rail-head__qty{
    font: 700 9px/1 "Oswald", system-ui, sans-serif;
    color: rgba(0,0,0,.38);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Lista items: max-height fisso + scroll interno + fade-out in basso */
  #rfq-rail-list{
    max-height: 78px;       /* ~2 items visibili */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.10) transparent;
    /* Fade bottom che segnala scroll disponibile */
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 6px;    /* respiro prima del fade */
  }
  #rfq-rail-list::-webkit-scrollbar{ width: 3px; }
  #rfq-rail-list::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.10);
    border-radius: 2px;
  }

  /* Singolo item nella lista RFQ */
  .rfq-rail-item{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,.60);
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: inset 0 1px rgba(255,255,255,.80);
    flex-shrink: 0;
  }
  .rfq-rail-item__name{
    font: 700 10.5px/1.2 "Oswald", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: rgba(0,0,0,.82);
  }
  .rfq-rail-item__sub{
    font: 400 9px/1.3 system-ui, sans-serif;
    color: rgba(0,0,0,.44);
  }

  /* Span range abbreviazione — gestito da main.js */
  /* display:inline-block + max-width:0/overflow:hidden invece di display:none:
     – nessun reflow verticale quando il range appare/scompare (no layout shift)
     – max-width:0 → larghezza zero quando vuoto, invisibile senza cambiare flow  */
  .rfq-range-abbrev{
    display: inline-block;
    overflow: hidden;
    max-width: 0;
    vertical-align: baseline;
  }
  .rfq-range-abbrev:not(:empty){
    max-width: 60px;   /* sufficiente per "VW+C" e simili */
    margin-left: 2px;  /* gap compatto: evita l'effetto doppio-spazio */
  }

  /* CTA apri configuratore — override contestuali */
  .rfq-rail-open{
    width: 100%;
    border-radius: 10px;
    margin-top: 6px;
  }

  /* Link "Vai al carrello" — ghost discreto, dentro il box pieno */
  .rfq-rail-cart-link{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    font: 600 9.5px/1 "Oswald", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(0,0,0,.50);
    text-decoration: none;
    border: 1px solid rgba(0,0,0,.08);
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  }
  .rfq-rail-cart-link:hover{
    background: rgba(0,0,0,.04);
    color: rgba(0,0,0,.72);
    border-color: rgba(0,0,0,.14);
  }

  /* Separatore tra sezione RFQ e launcher */
  .rail-section-sep{
    height: 1px;
    background: rgba(0,0,0,.07);
    margin: 8px 2px;
    flex-shrink: 0;
  }

  /* Box RFQ: rimosso extra margin-top (ora è in cima) */
  .rfq-rail-items{
    margin-top: 0;
  }

  /* dark: link carrello */
  body.ds-dark #ds-right-rail .rfq-rail-cart-link{
    color: rgba(200,196,188,.48);
    border-color: rgba(255,255,255,.08);
  }
  body.ds-dark #ds-right-rail .rfq-rail-cart-link:hover{
    background: rgba(255,255,255,.05);
    color: rgba(218,214,206,.75);
    border-color: rgba(255,255,255,.14);
  }

  body.ds-dark #ds-right-rail .rail-section-sep{
    background: rgba(255,255,255,.07);
  }

  /* ── DARK MODE ───────────────────────────────────────────── */

  /* Downloads card — dark */
  body.ds-dark #ds-right-rail .rail-dl-card{
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.09);
    color: rgba(218,214,206,.80);
    box-shadow:
      inset 0 1px rgba(255,255,255,.05),
      0 3px 10px rgba(0,0,0,.30);
  }
  body.ds-dark #ds-right-rail .rail-dl-card:hover{
    background: rgba(255,255,255,.12);
    box-shadow:
      inset 0 1px rgba(255,255,255,.07),
      0 6px 18px rgba(0,0,0,.44);
  }
  body.ds-dark #ds-right-rail .rail-dl-card__icon{
    background: rgba(255,255,255,.08);
    color: rgba(218,214,206,.55);
  }
  body.ds-dark #ds-right-rail .rail-dl-card__label{
    color: rgba(228,224,216,.85);
  }
  body.ds-dark #ds-right-rail .rail-dl-card__sub{
    color: rgba(200,196,188,.42);
  }
  body.ds-dark #ds-right-rail .rail-dl-card__arrow{
    color: rgba(200,196,188,.28);
  }
  /* Accent bars — dark: stessa logica light ma opacità ridotta */
  body.ds-dark #ds-right-rail .rail-dl-card::before{
    opacity: .50;
  }
  body.ds-dark #ds-right-rail .rail-dl-card::after{
    opacity: .28;
  }
  body.ds-dark #ds-right-rail .rail-dl-card:hover::before{ opacity: .80; }
  body.ds-dark #ds-right-rail .rail-dl-card:hover::after { opacity: .55; }

  /* RFQ CTA — dark (accent stays yellow, slightly muted) */
  body.ds-dark #ds-right-rail .rail-rfq-cta{
    background: rgba(244,181,50,.86);
  }

  body.ds-dark #ds-right-rail .rfq-rail-empty{
    border-color: rgba(255,255,255,.12);
    color: rgba(218,214,206,.24);
  }
  body.ds-dark #ds-right-rail .rfq-rail-empty:hover{
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.22);
    color: rgba(218,214,206,.44);
  }

  body.ds-dark #ds-right-rail .rfq-rail-items{
    background: rgba(24,20,14,.80);
    border-color: rgba(255,255,255,.09);
    box-shadow:
      inset 0 1px rgba(255,255,255,.06),
      0 8px 28px rgba(0,0,0,.44);
  }
  body.ds-dark #ds-right-rail .rfq-rail-head{
    border-bottom-color: rgba(255,255,255,.07);
  }
  body.ds-dark #ds-right-rail .rfq-rail-head__title{
    color: rgba(200,196,188,.55);
  }
  body.ds-dark #ds-right-rail .rfq-rail-head__count{
    background: rgba(255,209,0,.80);
  }
  body.ds-dark #ds-right-rail .rfq-rail-head__qty{
    color: rgba(200,196,188,.38);
  }
  body.ds-dark #ds-right-rail .rfq-rail-item{
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.07);
  }
  body.ds-dark #ds-right-rail .rfq-rail-item__name{
    color: rgba(228,224,216,.88);
  }
  body.ds-dark #ds-right-rail .rfq-rail-item__sub{
    color: rgba(200,196,188,.44);
  }

  /* ── AMBIENT GLOW — opzione A ────────────────────────────── */
  /* Aura ambientale calda sul lato rail dx: come luce emessa dal display
     in quella zona. Non un bordo, non un pannello — una qualità spaziale. */
  /* Glow sinistro — specchia il destro (stessa intensità) */
  body::before{
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 460px;
    height: 100%;
    background:
      radial-gradient(ellipse 70% 50% at 0% 25%,
        rgba(255,215,60,.14) 0%,
        transparent 70%),
      radial-gradient(ellipse 55% 55% at 0% 72%,
        rgba(244,181,50,.09) 0%,
        transparent 65%);
    pointer-events: none;
    z-index: 89;
    transition: opacity .4s ease;
  }
  body.ds-dark::before{
    background:
      radial-gradient(ellipse 70% 50% at 0% 25%,
        rgba(255,200,40,.09) 0%,
        transparent 70%),
      radial-gradient(ellipse 55% 55% at 0% 72%,
        rgba(244,181,50,.05) 0%,
        transparent 65%);
  }

  body::after{
    content: "";
    position: fixed;
    right: 0;
    top: 0;
    width: 460px;
    height: 100%;
    background:
      radial-gradient(ellipse 70% 50% at 100% 25%,
        rgba(255,215,60,.14) 0%,
        transparent 70%),
      radial-gradient(ellipse 55% 55% at 100% 72%,
        rgba(244,181,50,.09) 0%,
        transparent 65%);
    pointer-events: none;
    z-index: 89;  /* sotto il rail (z-index 90), sopra il contenuto */
    transition: opacity .4s ease;
  }
  body.ds-dark::after{
    background:
      radial-gradient(ellipse 70% 50% at 100% 25%,
        rgba(255,200,40,.09) 0%,
        transparent 70%),
      radial-gradient(ellipse 55% 55% at 100% 72%,
        rgba(244,181,50,.05) 0%,
        transparent 65%);
  }

}/* END @media (min-width: 1400px) — rail dx visible compact+wide */


/* ── ≥1400 (compact + wide): nasconde RFQ inline (rail dx assolve) ──
   sess.46 step 2 decisione utente: RFQ migra completamente nel rail dx
   anche in compact (era inline-only sess.46 step 1). #rfq-cta closing
   band nascosto cross-fascia 1400+. Replicato pattern wide originale.  */
@media (min-width: 1400px){
  #rfq-cta{
    display: none;
  }
}


/* ── Compact 1400-1849.98: rail dx con cards NARROW + RFQ box ON ────
   sess.46 step 2: card del rail dx ristrette (max-width 188px) e
   centrate nella lane (228-266) per simmetria visiva con rail sx
   pill (anche lui non occupa tutta la lane). Aria fra content end
   e card start ≈ 40px (gap 32 product.css + 20 padding lane).
   RFQ box ATTIVO (clone wide): l'utente ha deciso di migrare RFQ
   dal pulsante in rail sx pb-btn (sess.46 step 1) al box rail dx
   per coerenza con wide ≥1850. */
@media (min-width: 1400px) and (max-width: 1849.98px){
  #ds-right-rail{
    /* width responsive matched al rail sx (header.css:949 clamp
       228, 14.5vw, 324 → 228-266 in compact range) */
    width: var(--ds-rail-lane-wide, 228px);
  }

  /* Cards narrow uniform: max 188 + width 100% + center.
     sess.46 step 3 fix (a) feedback utente: prima le cards avevano width
     content-driven (variavano 166-188) → poco uniformi visivamente.
     Width 100% forza tutte a 188px effettivi (al max). */
  #ds-rfq-rail .rail-dl-card,
  #ds-rfq-rail .rfq-rail-empty,
  #ds-rfq-rail .rfq-rail-items,
  #ds-rfq-rail .rail-rfq-cta{
    max-width: 188px;
    width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
  }

  /* RFQ empty box: ridurre padding interno per altezza ~ DL cards (52-58px).
     Era padding 18px 16px 20px → altezza 78px (24-26px in più). */
  #ds-rfq-rail .rfq-rail-empty{
    padding: 10px 14px 12px;
    gap: 4px;
  }
  #ds-rfq-rail .rfq-rail-empty__icon{
    width: 22px;   /* era 28 */
    height: 22px;
  }

  /* Nasconde shortcut RFQ in product-bar sticky (rail sx). Adesso
     RFQ è solo nel rail dx (no triplicazione visiva). */
  #pb.product-bar.is-sticky .rhs .pb-rfq-btn{
    display: none !important;
  }

  /* Glow ambientale ::before/::after — width ridotta in compact
     per non oscurare il contenuto (rail più stretto, glow proporzionale) */
  body::before,
  body::after{
    width: 320px;  /* era 460 in wide */
  }
}

/* ── V-19 (28/08/2026) ───────────────────────────────────────────────────────
   `.rail-dl-card{display:flex}` e `[hidden]` hanno la STESSA specificita'
   (0,1,0): vince l'ultima scritta, ed e' la classe. ⇒ `el.hidden = true` dal
   JS non nascondeva un bel niente, e la card «… in azione» restava cliccabile
   anche quando la fascia dei progetti non c'era. Misurato dal vivo su F6:
   hidden=true, display=flex.
   E' la terza volta stasera che il CSS batte lo stato del JS
   (banner di bozza, logo del family, questa) ⇒ [[feedback_css_batte_stato_js]]. */
.rail-dl-card[hidden]{ display: none !important; }