/* ============================================================
   TIBALDI — buybar-mobile.css · barra d'acquisto fissa (pagine prodotto)
   Proprietà: chat grafica (dal 5/9). Il JS (buybar-mobile.js) è invariato
   e fornisce queste classi:
     .mbar.mbar-prod (visibile: .on) > .mb-info > .mb-c · .mb-t
                                     > .mb-price
                                     > button.mb-add (:disabled .soldout .done .tib-notify-btn)
   Grammatica del sistema di design shop (2/9):
   · superficie BLU NOTTE #242E35, testo bianco (13:1).
   · bottone ORO con testo bianco e icona bustina: IDENTICO ad «Aggiungi
     al carrello» in pagina. Non compete con lui: la barra appare solo
     quando quello è uscito dallo schermo (IntersectionObserver su #add).
   · L'icona è in CSS (::before, stessa maschera SVG del bottone in
     pagina) perché il JS riscrive il testo del bottone a ogni update()
     con textContent: un <svg> nel markup sparirebbe al primo cambio.
   Tipografia: Poppins per nome e prezzo, come il prezzo in pagina (che nel
   sorgente è var(--serif) = Poppins): il Cormorant a corpo piccolo con le
   cifre antiche risultava ornato e staccato dal resto. Fondo opaco e filo
   oro sopra: la barra è attaccata alla pagina, non un pannello che galleggia.
   Layout: nome · annata · formato (riga piccola) sopra il prezzo;
   il bottone è un PANNELLO a tutta altezza a destra, senza margini e
   senza raggio: metà barra è il gesto, e scende nella safe-area.
   ============================================================ */
.mbar.mbar-prod{display:none}

@media(max-width:980px){
  .mbar.mbar-prod{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"info add" "price add";
    align-items:center;column-gap:0;row-gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    min-height:64px;
    padding:0;
    background:#242E35;
    border-top:0;
    color:#F9F8F4;
    box-shadow:0 -12px 32px -16px rgba(20,12,10,.45);
    transform:translateY(110%);transition:transform .28s ease;
    pointer-events:none;
  }
  .mbar.mbar-prod.on{transform:none;pointer-events:auto}

  /* riga piccola: nome del vino · annata · formato */
  .mbar.mbar-prod .mb-info{grid-area:info;display:flex;align-items:baseline;gap:8px;min-width:0;line-height:1.2;
    padding:10px 14px 0 18px}
  .mbar.mbar-prod .mb-t{
    order:1;display:block;
    font-family:'Poppins',system-ui,sans-serif;font-size:.74rem;font-weight:500;
    color:#F9F8F4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  }
  .mbar.mbar-prod .mb-c{
    order:2;flex:none;
    font-family:'Alata',system-ui,sans-serif;font-size:.6rem;letter-spacing:.12em;
    text-transform:uppercase;color:#B98D58;font-weight:400;white-space:nowrap;
  }
  .mbar.mbar-prod .mb-c:not(:empty)::before{content:"·";margin-right:8px;color:rgba(249,248,244,.6)}
  .mbar.mbar-prod .mb-c:empty{display:none}

  /* prezzo grande */
  .mbar.mbar-prod .mb-price{
    grid-area:price;
    padding:0 14px calc(10px + env(safe-area-inset-bottom)) 18px;
    font-family:'Poppins',system-ui,sans-serif;font-size:1.3rem;font-weight:700;
    line-height:1.1;white-space:nowrap;letter-spacing:0;color:#F9F8F4;
    font-variant-numeric:tabular-nums;
  }

  /* bottone: lo stesso del bottone principale in pagina */
  .mbar.mbar-prod .mb-add{
    grid-area:add;align-self:stretch;
    font-family:'Poppins',system-ui,sans-serif;font-weight:600;font-size:.78rem;
    letter-spacing:.1em;text-transform:uppercase;
    background:#B98D58;color:#fff;border:0;border-radius:0;
    min-height:64px;min-width:44%;
    padding:0 24px env(safe-area-inset-bottom);
    cursor:pointer;white-space:nowrap;
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    transition:background .2s,color .2s;
  }
  .mbar.mbar-prod .mb-add:active{background:#A07A48}
  .mbar.mbar-prod .mb-add.done{background:#F9F8F4;color:#242E35}
  .mbar.mbar-prod .mb-add:disabled,
  .mbar.mbar-prod .mb-add.soldout{background:transparent;color:rgba(249,248,244,.55);
    border:1px solid rgba(249,248,244,.3);cursor:not-allowed}
  .mbar.mbar-prod .mb-add.tib-notify-btn{background:transparent;color:#F9F8F4;
    border:1px solid #B98D58}

  /* icona bustina: stessa maschera del bottone in pagina; spenta negli
     stati in cui il testo cambia significato */
  .mbar.mbar-prod .mb-add::before{content:"";width:1.05em;height:1.05em;flex:none;
    background-color:currentColor;-webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M6%202%203%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4Z%27%2F%3E%3Cpath%20d%3D%27M3%206h18%27%2F%3E%3Cpath%20d%3D%27M16%2010a4%204%200%200%201-8%200%27%2F%3E%3C%2Fsvg%3E");mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M6%202%203%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4Z%27%2F%3E%3Cpath%20d%3D%27M3%206h18%27%2F%3E%3Cpath%20d%3D%27M16%2010a4%204%200%200%201-8%200%27%2F%3E%3C%2Fsvg%3E");}
  .mbar.mbar-prod .mb-add.done::before,
  .mbar.mbar-prod .mb-add.soldout::before,
  .mbar.mbar-prod .mb-add:disabled::before,
  .mbar.mbar-prod .mb-add.tib-notify-btn::before{display:none}

  /* niente contenuto sotto la barra */
  body.has-mbar footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  body.has-mbar .demoflag{display:none}
}
@media(max-width:360px){
  .mbar.mbar-prod .mb-info{padding-left:14px}
  .mbar.mbar-prod .mb-price{font-size:1.2rem;padding-left:14px}
  .mbar.mbar-prod .mb-add{padding-left:18px;padding-right:18px;min-width:42%}
}
@media (prefers-reduced-motion:reduce){.mbar.mbar-prod{transition:none}}