/* Testata, barra in basso (telefono), piè di pagina, bottoni e ricerca: la
   "cornice" del sito. File a parte perché la caricano ANCHE le pagine vecchie
   (account, accesso, carrello, segnala, pagamenti) tramite ponte.css, senza
   tirarsi dietro gli altri componenti. */
.contenuto { width: 100%; max-width: var(--largo); margin-inline: auto; padding-inline: var(--margine); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salta { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 10px 14px; border-radius: var(--r-piccolo);
  background: var(--bosco); color: var(--su-bosco); font-weight: 650; text-decoration: none; }
.salta:focus { top: 12px; }

/* ---------- bottoni ---------- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 10px; border: 0;
  font: 650 var(--t-16)/1 var(--f-testo); text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-passaggio), transform var(--t-pressione), color var(--t-passaggio);
}
.bottone:active { transform: scale(.98); }
.bottone--pieno { background: var(--bosco); color: var(--su-bosco); }
.bottone--pieno:hover { background: color-mix(in srgb, var(--bosco) 86%, var(--inchiostro)); }
.bottone--linea { background: var(--superficie); color: var(--inchiostro); box-shadow: inset 0 0 0 1px var(--linea-2); }
.bottone--linea:hover { background: var(--carta); box-shadow: inset 0 0 0 1px var(--inchiostro-3); }
.bottone--piccolo { min-height: 36px; padding: 7px 14px; font-size: var(--t-14); border-radius: 9px; }
.bottone svg { width: 18px; height: 18px; flex: none; }
.link-freccia { font-weight: 650; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.link-freccia::after { content: "→"; transition: transform var(--t-passaggio); }
.link-freccia:hover::after { transform: translateX(3px); }

/* ---------- ricerca ---------- */
.ricerca { position: relative; width: 100%; max-width: 560px; }
.ricerca__campo {
  display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 6px 0 16px;
  border: 1.5px solid var(--inchiostro); border-radius: 14px; background: var(--superficie);
}
.ricerca__campo:focus-within { outline: 2px solid var(--bosco); outline-offset: 2px; }
.ricerca__campo svg { flex: none; width: 20px; height: 20px; color: var(--inchiostro-2); }
.ricerca__campo input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: 500 var(--t-16)/1 var(--f-testo); color: var(--inchiostro);
}
.ricerca__campo input::placeholder { color: var(--inchiostro-3); }
.ricerca__campo input::-webkit-search-cancel-button { display: none; }
.ricerca__campo .bottone { min-height: 44px; }
.ricerca--compatta .ricerca__campo { height: 40px; border-width: 1px; border-color: var(--linea-2); border-radius: 10px; padding-right: 4px; }
.ricerca--compatta .ricerca__campo .bottone { display: none; }
.suggerimenti {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; margin: 0; padding: 6px;
  list-style: none; background: var(--superficie); border: 1px solid var(--linea-2); border-radius: var(--r); box-shadow: var(--ombra-piccola);
  max-height: 60vh; overflow: auto;
}
.suggerimenti a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--r-piccolo);
  color: var(--inchiostro); text-decoration: none; font-size: var(--t-16); }
.suggerimenti a:hover, .suggerimenti a[aria-selected="true"] { background: var(--carta); }
.suggerimenti .prezzo { color: var(--inchiostro-2); font-size: var(--t-14); }

/* ---------- testata ---------- */
.testata {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--superficie); border-bottom: 1px solid var(--linea);
  transition: transform var(--t-comparsa) var(--curva);
}
.testata__riga { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.marchio { display: inline-flex; align-items: center; gap: 8px; color: var(--inchiostro); text-decoration: none; font: 800 20px/1 var(--f-testo); letter-spacing: -.025em; }
.marchio__segno { width: 34px; height: 34px; flex: none; object-fit: contain; }
.marchio b { color: var(--bosco); font-weight: 800; }
.menu { display: flex; align-items: center; gap: 2px; }
.menu__link { display: inline-flex; align-items: center; gap: 4px; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent;
  color: var(--inchiostro-2); text-decoration: none; font: 650 var(--t-16)/1.2 var(--f-testo); white-space: nowrap; }
.menu__link svg { width: 16px; height: 16px; flex: none; max-width: none; transition: transform var(--t-passaggio); }
.menu__link:hover { color: var(--inchiostro); background: var(--carta); }
.menu__link[aria-current="page"], .menu__apri[data-qui] { color: var(--inchiostro); box-shadow: inset 0 -2px 0 var(--bosco); border-radius: 0; }
.menu__apri[aria-expanded="true"] { color: var(--inchiostro); background: var(--carta); box-shadow: none; border-radius: 9px; }
.menu__apri[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu__gruppo { position: relative; }
.tendina {
  position: absolute; top: calc(100% + 10px); left: -8px; z-index: 60; width: 380px; padding: 14px;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-grande); box-shadow: var(--ombra-piccola);
}
.tendina__frase { padding: 2px 10px 10px; color: var(--inchiostro-2); font-size: var(--t-14); }
.tendina ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tendina__voce { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border-radius: var(--r);
  color: var(--inchiostro); text-decoration: none; }
.tendina__voce svg { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--bosco-tenue); color: var(--bosco-testo); }
.tendina__voce strong { display: block; font-weight: 700; line-height: 1.3; }
.tendina__voce small { display: block; margin-top: 2px; color: var(--inchiostro-2); font-size: var(--t-14); line-height: 1.4; }
.tendina__voce:hover, .tendina__voce[aria-current="page"] { background: var(--carta); }
.tendina__tutto { margin: 8px 10px 2px; font-size: var(--t-14); }
.testata__spazio { flex: 1; }
.testata, .piede, .barra-basso { width: 100%; align-self: stretch; }
.testata .ricerca { flex: 0 1 240px; min-width: 150px; }
.testata .ricerca { max-width: 240px; }
.bottone--icona { width: 40px; min-height: 40px; padding: 0; flex: none; }
.testata .marchio, .testata .bottone, .testata .profilo, .menu { flex: none; }
.bottone--icona svg { width: 20px; height: 20px; }
.bottone--icona[aria-current="page"] { box-shadow: inset 0 0 0 1.5px var(--bosco); color: var(--bosco); }
.testata__menu { display: none; }
.profilo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--inchiostro); font-weight: 650; }
.profilo__iniziale { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bosco); color: var(--su-bosco); font: 750 15px/1 var(--f-testo); }
.testata--stretta { transform: translateY(-100%); }
@media (max-width: 1120px) { .testata .ricerca { display: none; } }
@media (max-width: 900px) {
  .menu { display: none; }
  .testata__menu { display: inline-flex; }
  .testata__riga { min-height: 60px; gap: 10px; }
}

/* ---------- menu a tutto schermo (telefono) ---------- */
.foglio { position: fixed; inset: 60px 0 0; z-index: 55; overflow: auto; background: var(--carta); border-top: 1px solid var(--linea); }
.foglio__dentro { display: grid; gap: 22px; padding-block: 20px calc(96px + env(safe-area-inset-bottom, 0px)); }
.foglio h2 { font: 700 var(--t-14)/1.3 var(--f-testo); color: var(--inchiostro-2); letter-spacing: 0; margin-bottom: 8px; }
.foglio ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foglio a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border-radius: var(--r); background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--linea); color: var(--inchiostro); text-decoration: none; font-weight: 650; }
.foglio a svg { width: 22px; height: 22px; color: var(--bosco); flex: none; }
.foglio a[aria-current="page"] { box-shadow: inset 0 0 0 1.5px var(--bosco); }
.foglio__altro { grid-template-columns: 1fr 1fr; }
.foglio__altro a { min-height: 44px; font-weight: 550; }
html.foglio-aperto { overflow: hidden; }
@media (min-width: 901px) { .foglio { display: none !important; } }

/* ---------- barra in basso (telefono) ---------- */
.barra-basso { display: none; }
@media (max-width: 900px) {
  .barra-basso {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 8px 4px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--superficie); border-top: 1px solid var(--linea);
  }
  .barra-basso a { display: grid; justify-items: center; gap: 4px; min-height: 44px; padding-top: 2px; color: var(--inchiostro-2); text-decoration: none; font: 650 var(--t-12)/1 var(--f-testo); text-align: center; }
  .barra-basso a[aria-current="page"] { color: var(--bosco); }
  .barra-basso svg { width: 22px; height: 22px; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- piè di pagina ---------- */
.piede { margin-top: var(--sezione); border-top: 1px solid var(--linea); background: var(--superficie); }
.piede__griglia { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 28px; padding-block: 48px 32px; }
.piede h2 { font: 750 var(--t-14)/1.3 var(--f-testo); letter-spacing: 0; color: var(--inchiostro); margin-bottom: 12px; }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.piede a { color: var(--inchiostro-2); text-decoration: none; font-size: var(--t-16); }
.piede a:hover { color: var(--inchiostro); text-decoration: underline; }
.piede .marchio { color: var(--inchiostro); font-size: 20px; }
.piede__marchio p { margin-top: 12px; color: var(--inchiostro-2); max-width: 34ch; font-size: var(--t-16); }
.piede__fondo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-block: 18px 28px; border-top: 1px solid var(--linea); font-size: var(--t-14); color: var(--inchiostro-2); }
.piede__fondo a { font-size: var(--t-14); }
.tema { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--carta-2); }
.tema button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-size: var(--t-14); font-weight: 650; color: var(--inchiostro-2); }
.tema button[aria-pressed="true"] { background: var(--superficie); color: var(--inchiostro); box-shadow: var(--ombra-piccola); }
@media (max-width: 1000px) { .piede__griglia { grid-template-columns: 1fr 1fr; } .piede__marchio { grid-column: 1 / -1; } }

/* ---------- account (tendina e menu del telefono) ---------- */
.menu__gruppo.account { flex: none; }
.profilo.menu__apri { padding: 2px; border: 0; background: transparent; border-radius: 50%; box-shadow: none; }
.profilo.menu__apri[aria-expanded="true"] .profilo__iniziale, .profilo.menu__apri[data-qui] .profilo__iniziale { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--bosco); }
.tendina--destra { left: auto; right: 0; width: 300px; }
.tendina__voce--breve { grid-template-columns: 22px minmax(0, 1fr); align-items: center; padding: 9px 10px; }
.tendina__voce--breve svg { width: 22px; height: 22px; padding: 0; background: none; color: var(--bosco); }
.account__testa { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 10px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--linea); }
.account__testa .profilo__iniziale { width: 40px; height: 40px; font-size: 17px; }
.account__testa strong { display: block; font-weight: 750; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account__testa small { display: block; color: var(--inchiostro-2); font-size: var(--t-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account__etichette { display: flex; gap: 6px; margin-top: 6px; }
.account__etichette em { font: 700 var(--t-12)/1 var(--f-testo); font-style: normal; padding: 4px 8px; border-radius: 6px; background: var(--carta-2); color: var(--inchiostro); }
.account__etichette em.pro { background: var(--attenzione-tenue); color: var(--attenzione-testo); }
.account__esci { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 6px; padding: 10px; border: 0; border-top: 1px solid var(--linea); border-radius: 0 0 var(--r) var(--r);
  background: transparent; color: var(--inchiostro-2); font: 650 var(--t-16)/1.2 var(--f-testo); text-align: left; }
.account__esci svg { width: 22px; height: 22px; }
.account__esci:hover { color: var(--inchiostro); background: var(--carta); }
.foglio__account .account__testa { padding: 12px 14px; border: 0; border-radius: var(--r); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); margin-bottom: 6px; }
.foglio__account .account__esci { min-height: 48px; padding: 10px 14px; margin: 0; border: 0; border-radius: var(--r); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); }
.foglio__entra { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.foglio__entra .bottone { width: 100%; }

/* ---------- annuncio dell'amministrazione ---------- */
.annuncio { border-bottom: 1px solid var(--linea); }
.annuncio__riga { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-block: 8px; }
.annuncio p { flex: 1; font-weight: 650; font-size: var(--t-16); line-height: 1.4; }
.annuncio button { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: inherit; }
.annuncio button:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.annuncio button svg { width: 18px; height: 18px; }
.annuncio--info { background: var(--bosco-tenue); color: var(--bosco-testo); }
.annuncio--attenzione { background: var(--attenzione-tenue); color: var(--attenzione-testo); }
.annuncio--promo { background: var(--inchiostro); color: var(--carta); }

/* ---------- il segno (testata.js → segno()) ---------- */
.marchio__segno { overflow: visible; }
.marchio__cestello { fill: var(--logo-cestello); }
.marchio__manico { fill: none; stroke: var(--logo-cestello); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.marchio__spunta { fill: none; stroke: var(--logo-spunta); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }