/* Trova in libreria · Lista acquisti · Amici e regali
   Gettoni di D1 (app.css) con valori di riserva; stati sempre colore + pallino + testo; bersagli ≥ 44px. */
:root {
  --fd-pin-ok: #2F6B4F; --fd-pin-order: #A8621B; --fd-pin-no: #8E3226; --fd-pin-unk: #7C6F63;
  --fd-me: #2C4A6B;
  --fd-map-bg: #EAE3D3; --fd-map-ring: rgb(35 26 20 / .07); --fd-map-ink: rgb(35 26 20 / .55);
  --fd-map-road: rgb(255 253 248 / .95); --fd-map-park: rgb(47 107 79 / .12);
  /* piastrelle OSM con una velatura calda (carta) senza perdere contrasto */
  --fd-tile-filter: sepia(.2) saturate(.78) brightness(1.01) contrast(.97);
  --fd-unk-bg: var(--pergamena, #EDE4D3); --fd-unk-ink: var(--seppia, #5E5248);
  --fd-band: #F1E4C4; --fd-band-ink: #4A350B; --fd-band-ico: #7A5612;
  --fr-wants: var(--albicocca, #F2B98C); --fr-wants-ink: #3B2219;
  /* percorso: inchiostro blu con un bordo carta, leggibile sopra le piastrelle velate */
  --fd-route: #2C4A6B; --fd-route-case: #FFFDF8; --fd-best: #F1E4C4; --fd-best-ink: #4A350B;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fd-pin-ok: #5DAF86; --fd-pin-order: #E0A35A; --fd-pin-no: #E47C68; --fd-pin-unk: #A89A8B; --fd-me: #8DB4E2;
    --fd-map-bg: #241E19; --fd-map-ring: rgb(243 235 221 / .06); --fd-map-ink: rgb(243 235 221 / .6);
    --fd-map-road: rgb(243 235 221 / .12); --fd-map-park: rgb(93 175 134 / .12);
    --fd-tile-filter: invert(.9) hue-rotate(180deg) sepia(.25) saturate(.6) brightness(.9) contrast(.88);
    --fd-band: #34291A; --fd-band-ink: #F1DDB2; --fd-band-ico: #E9C27A;
    --fd-route: #8DB4E2; --fd-route-case: #16120E; --fd-best: #34291A; --fd-best-ink: #F1DDB2;
  }
}
:root[data-theme="dark"] {
  --fd-pin-ok: #5DAF86; --fd-pin-order: #E0A35A; --fd-pin-no: #E47C68; --fd-pin-unk: #A89A8B; --fd-me: #8DB4E2;
  --fd-map-bg: #241E19; --fd-map-ring: rgb(243 235 221 / .06); --fd-map-ink: rgb(243 235 221 / .6);
  --fd-map-road: rgb(243 235 221 / .12); --fd-map-park: rgb(93 175 134 / .12);
  --fd-tile-filter: invert(.9) hue-rotate(180deg) sepia(.25) saturate(.6) brightness(.9) contrast(.88);
  --fd-band: #34291A; --fd-band-ink: #F1DDB2; --fd-band-ico: #E9C27A;
  --fd-route: #8DB4E2; --fd-route-case: #16120E; --fd-best: #34291A; --fd-best-ink: #F1DDB2;
}

/* --- testata comune -------------------------------------------------------------------- */
.fd-page, .sh-page, .fr-page { max-width: 1180px; margin-inline: auto; }
.fd-head h1, .fr-head h1 { margin: 2px 0 0; font-size: clamp(1.9rem, 7.6vw, 2.6rem); line-height: 1; }
.fd-where { margin: 0; font: 600 .8125rem/1.3 var(--sans, system-ui); color: var(--seppia, #5E5248); }
.fd-honest { display: flex; gap: 8px; align-items: flex-start; margin: 20px 0 0; max-width: 70ch; }
.fd-honest .icon { margin-top: 2px; }
.fd-msg { margin: 6px 0 0; }
.fd-sec { margin-top: 18px; }
.fd-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0 0 10px; }
.fd-sec-head h2 { margin: 0; font-size: 1.35rem; flex: 1 1 auto; min-width: 0; }

/* --- libro selezionato ------------------------------------------------------------------- */
.fd-book { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 10px; border-radius: 18px; background: var(--avorio, #FFFDF8);
  border: 1px solid var(--line, rgb(35 26 20 / .06)); box-shadow: var(--shadow); width: 100%; text-align: left; color: var(--inchiostro, #231A14); font: inherit; }
.fd-book .cover, .fd-book .cover-wrap { width: 36px; height: 54px; }
.fd-book-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.fd-book-txt b { font-size: .9375rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.fd-book-txt small { font-size: .75rem; line-height: 1.35; color: var(--seppia, #5E5248); overflow-wrap: anywhere; }
button.fd-book-change { width: 44px; min-height: 44px; height: 44px; border-radius: var(--r-ctl, 14px); flex: none; }
button.fd-book.empty { min-height: 74px; cursor: pointer; }
button.fd-book.empty:hover { background: var(--avorio, #FFFDF8); border-color: color-mix(in srgb, var(--inchiostro, #231A14) 25%, transparent); }
.fd-book-ph { width: 36px; height: 54px; border-radius: 3px 7px 7px 3px; background: var(--pergamena, #EDE4D3); display: grid; place-items: center; color: var(--seppia, #5E5248); flex: none; }

/* --- griglia: cartina + elenco (affiancati da 1024px: cartina a sinistra, elenco a destra) ---------- */
.fd-grid { display: grid; gap: 0 28px; grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
@media (min-width: 1024px) {
  .fd-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: start; }
  .fd-col-map { position: sticky; top: 24px; }
}

/* --- cartina vera (static/js/map.js): piastrelle OSM via il nostro server ---------------------------- */
.fd-map.card-l { position: relative; padding: 0; overflow: hidden; border-radius: 24px; background: var(--fd-map-bg); border: 1px solid var(--line, transparent);
  box-shadow: 0 1px 0 rgb(35 26 20 / .04), 0 14px 30px -24px rgb(35 26 20 / .55); isolation: isolate; }
.fd-mapbox { position: relative; height: clamp(250px, 38dvh, 340px); }
@media (min-width: 1024px) { .fd-mapbox { height: clamp(420px, calc(100dvh - 370px), 700px); } }
.mp { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; outline: none;
  background: var(--fd-map-bg); -webkit-tap-highlight-color: transparent; }
.mp.mp-dragging { cursor: grabbing; }
.mp:focus-visible { box-shadow: inset 0 0 0 3px var(--inchiostro, #231A14); }
.mp-tiles { position: absolute; inset: 0; filter: var(--fd-tile-filter); }
img.mp-tile { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; transform-origin: 0 0; opacity: 0; transition: opacity .28s ease;
  pointer-events: none; -webkit-user-drag: none; image-rendering: auto; }
img.mp-tile.ok { opacity: 1; }
img.mp-tile.err { visibility: hidden; }
.mp-markers { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.mp-marker { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.mp-marker > * { pointer-events: auto; }
.mp-marker.mp-out { visibility: hidden; }
.mp-acc { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none !important;
  background: color-mix(in srgb, var(--fd-me) 13%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fd-me) 45%, transparent); }
/* controlli: + / − uniti, «centra su di me» sotto; tutti 44px */
.mp-ctrl { position: absolute; top: 10px; right: 10px; z-index: 6; display: grid; gap: 0; }
button.mp-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 0; background: var(--avorio, #FFFDF8); color: var(--inchiostro, #231A14);
  font: 700 1.5rem/1 var(--sans, system-ui); box-shadow: 0 1px 0 var(--line, rgb(35 26 20 / .1)); }
button.mp-btn:hover { background: var(--pergamena, #EDE4D3); }
button.mp-btn:disabled { opacity: 1; color: color-mix(in srgb, var(--inchiostro, #231A14) 30%, transparent); }
button.mp-zin { border-radius: 14px 14px 0 0; }
button.mp-zout { border-radius: 0 0 14px 14px; box-shadow: 0 8px 18px -10px rgb(35 26 20 / .55); border-top: 1px solid var(--line, rgb(35 26 20 / .1)); }
button.mp-loc { margin-top: 8px; border-radius: 14px; color: var(--fd-me); box-shadow: 0 8px 18px -10px rgb(35 26 20 / .55); }
button.mp-loc .icon { width: 22px; height: 22px; }
.mp-ctrl button.mp-zin { box-shadow: 0 -2px 14px -10px rgb(35 26 20 / .5); }
.mp-attrib { position: absolute; right: 0; bottom: 0; z-index: 6; padding: 4px 9px 4px 10px; border-top-left-radius: 10px; font: 600 .75rem/1.3 var(--sans, system-ui);
  color: var(--seppia, #5E5248); background: color-mix(in srgb, var(--avorio, #FFFDF8) 88%, transparent); }
.mp-attrib a { color: var(--inchiostro, #231A14); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px;
  display: inline-block; padding: 3px 0; }
/* cartina non disponibile (offline, quota, server): avviso gentile, i segnaposti restano */
.mp-off { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 5; width: max-content; max-width: calc(100% - 120px); display: flex; gap: 8px; align-items: center;
  padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--avorio, #FFFDF8) 94%, transparent); color: var(--seppia, #5E5248);
  font: 700 .8125rem/1.35 var(--sans, system-ui); box-shadow: 0 8px 20px -14px rgb(35 26 20 / .6); pointer-events: none; }
.mp-off[hidden] { display: none; }
.mp-off .icon { width: 18px; height: 18px; flex: none; }
.mp.mp-is-off { background-color: var(--fd-map-bg);
  background-image: linear-gradient(var(--fd-map-ring) 1px, transparent 1px), linear-gradient(90deg, var(--fd-map-ring) 1px, transparent 1px); background-size: 48px 48px; }

/* spilli delle librerie: goccia nel colore dello stato + libro; area di tocco 44px */
button.fd-pin { position: absolute; left: -22px; top: -42px; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 0; background: transparent; box-shadow: none;
  display: block; cursor: pointer; transition: none; }
button.fd-pin:hover, button.fd-pin:active { background: transparent; transform: none; }
.fd-pin-body { position: absolute; left: 8px; top: 2px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg);
  transform-origin: 0 100%; background: var(--fd-pin-unk); color: #FFFDF8; border: 2.5px solid var(--avorio, #FFFDF8);
  box-shadow: -2px 4px 8px -2px rgb(35 26 20 / .5); transition: transform .2s var(--ease, ease); }
.fd-pin-body .icon { width: 14px; height: 14px; transform: rotate(45deg); }
.fd-pin.ok .fd-pin-body { background: var(--fd-pin-ok); }
.fd-pin.order .fd-pin-body { background: var(--fd-pin-order); }
.fd-pin.no .fd-pin-body { background: var(--fd-pin-no); }
button.fd-pin:hover .fd-pin-body, .fd-pin.hl .fd-pin-body, .fd-pin.sel .fd-pin-body { transform: rotate(-45deg) scale(1.2); }
.fd-pin.sel .fd-pin-body { border-color: var(--inchiostro, #231A14); }
button.fd-pin:focus-visible { outline: none; }
button.fd-pin:focus-visible .fd-pin-body { box-shadow: 0 0 0 3px var(--avorio, #FFFDF8), 0 0 0 6px var(--inchiostro, #231A14); }
/* etichetta dello spillo scelto: nome · distanza · stato */
.fd-pin-tag { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); display: grid; gap: 1px; width: max-content; max-width: 210px;
  padding: 7px 11px 8px; border-radius: 12px; background: var(--verde, #1E4434); color: var(--verde-ink, #F6EFE4); text-align: center; pointer-events: none;
  box-shadow: 0 10px 22px -12px rgb(18 48 36 / .9); }
.fd-pin-tag::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--verde, #1E4434); }
.fd-pin-tag b { font: 800 .8125rem/1.25 var(--sans, system-ui); overflow-wrap: anywhere; }
.fd-pin-tag small { font: 700 .75rem/1.25 var(--sans, system-ui); opacity: .85; white-space: nowrap; }
/* laFeltrinelli (dati del sito): quadrotto viola con la F e il pallino della disponibilità */
.fd-pin.felt .fd-pin-body { left: 8px; top: 0; width: 28px; height: 28px; border-radius: 9px; transform: none; transform-origin: 50% 100%; background: var(--fz); color: #FFFDF8; }
.fd-pin.felt .fd-pin-body::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--avorio, #FFFDF8); margin-top: 1px; }
.fd-pin.felt .fd-pin-body b { font: 400 17px/1 var(--serif, Georgia); }   /* è il marchio (un'icona), non testo: non cresce con «Testo grande» */
button.fd-pin.felt:hover .fd-pin-body, .fd-pin.felt.hl .fd-pin-body, .fd-pin.felt.sel .fd-pin-body { transform: scale(1.18); }
.fd-pin-dot { position: absolute; right: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--fd-pin-unk); border: 2px solid var(--avorio, #FFFDF8); }
.fd-pin.felt.ok .fd-pin-dot { background: #3FA36B; } .fd-pin.felt.order .fd-pin-dot { background: #E39A3B; } .fd-pin.felt.no .fd-pin-dot { background: #D2604B; }
.fd-pin.felt.no { opacity: .7; }
/* tu (punto blu con alone) e il centro della zona scelta (CAP/città) */
.fd-me-pin { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--fd-me); border: 3.5px solid #FFFDF8;
  box-shadow: 0 0 0 1px rgb(35 26 20 / .18), 0 3px 8px rgb(35 26 20 / .35); pointer-events: none !important; }
.fd-me-pin i { position: absolute; inset: -9px; border-radius: 50%; background: var(--fd-me); opacity: 0; animation: fd-ping 2.4s ease-out infinite; }
@keyframes fd-ping { 0% { transform: scale(.4); opacity: .35; } 100% { transform: scale(1.6); opacity: 0; } }
.fd-zone-pin { position: absolute; left: 0; bottom: 6px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: 180px;
  padding: 5px 11px 5px 8px; border-radius: 99px; background: var(--inchiostro, #231A14); color: var(--carta, #F5EFE4); font: 800 .75rem/1.2 var(--sans, system-ui);
  box-shadow: 0 8px 16px -10px rgb(35 26 20 / .8); pointer-events: none !important; }
.fd-zone-pin b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-zone-pin .icon { width: 14px; height: 14px; flex: none; color: var(--albicocca, #F2B98C); }
.fd-zone-pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; margin: 2px 0 0 -4px; border-radius: 50%; background: var(--inchiostro, #231A14);
  box-shadow: 0 0 0 2px var(--avorio, #FFFDF8); }

/* stato sopra la cartina (ricerca in corso, nessun risultato…) */
.fd-map-msg { position: absolute; left: 10px; bottom: 34px; z-index: 6; max-width: calc(100% - 76px); margin: 0; padding: 7px 11px; border-radius: 12px;
  font: 700 .7812rem/1.35 var(--sans, system-ui); color: var(--inchiostro, #231A14); background: color-mix(in srgb, var(--avorio, #FFFDF8) 94%, transparent);
  box-shadow: 0 8px 18px -12px rgb(35 26 20 / .6); pointer-events: none; }
.fd-map-msg[hidden] { display: none; }
/* telefono: la cartina si può ripiegare per lasciare spazio all'elenco */
button.fd-map-toggle { position: absolute; top: 10px; left: 10px; z-index: 6; min-height: 44px; padding: 6px 12px 6px 9px; gap: 5px; border-radius: 14px;
  background: color-mix(in srgb, var(--avorio, #FFFDF8) 90%, transparent); color: var(--inchiostro, #231A14); font: 800 .7812rem var(--sans, system-ui);
  box-shadow: 0 8px 18px -10px rgb(35 26 20 / .55); }
button.fd-map-toggle .icon { width: 16px; height: 16px; }
button.fd-map-show { display: none; width: 100%; min-height: 52px; gap: 8px; border-radius: 0; background: var(--avorio, #FFFDF8); color: var(--inchiostro, #231A14); font: 800 .875rem var(--sans, system-ui); }
button.fd-map-show .icon { color: var(--verde, #1E4434); }
.fd-map.collapsed .fd-mapbox, .fd-map.collapsed .fd-map-toggle, .fd-map.collapsed .fd-map-msg { display: none; }
.fd-map.collapsed button.fd-map-show { display: inline-flex; }
@media (min-width: 1024px) {
  button.fd-map-toggle, .fd-map.collapsed button.fd-map-show { display: none; }
  .fd-map.collapsed .fd-mapbox { display: block; }
  .fd-map.collapsed .fd-map-msg:not([hidden]) { display: block; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button.fd-map-show .icon { color: var(--albicocca, #F2B98C); } }
:root[data-theme="dark"] button.fd-map-show .icon { color: var(--albicocca, #F2B98C); }

/* nessuna posizione ancora: un foglio con strade appena accennate (decorativo) */
.fd-map-empty { position: relative; display: grid; place-items: center; align-content: center; gap: 12px; min-height: 240px; padding: 22px 20px; text-align: center; }
@media (min-width: 1024px) { .fd-map-empty { min-height: 440px; } }
.fd-map-paper { position: absolute; inset: 0; opacity: .9;
  background:
    linear-gradient(28deg, transparent 47%, var(--fd-map-road) 47.5%, var(--fd-map-road) 50.5%, transparent 51%),
    linear-gradient(-58deg, transparent 58%, var(--fd-map-road) 58.4%, var(--fd-map-road) 60.4%, transparent 60.8%),
    linear-gradient(95deg, transparent 22%, var(--fd-map-road) 22.3%, var(--fd-map-road) 23.6%, transparent 24%),
    radial-gradient(ellipse 30% 22% at 78% 24%, var(--fd-map-park) 98%, transparent 100%),
    linear-gradient(var(--fd-map-ring) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--fd-map-ring) 1px, transparent 1px) 0 0 / 44px 44px; }
.fd-map-paper-pin { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--avorio, #FFFDF8); color: var(--terracotta-text, #B4532A); box-shadow: 0 10px 22px -12px rgb(35 26 20 / .7); }
.fd-map-paper-pin .icon { width: 22px; height: 22px; }
.fd-map-empty p { position: relative; margin: 72px 0 0; max-width: 34ch; font: 700 .8438rem/1.4 var(--sans, system-ui); color: var(--inchiostro, #231A14);
  background: color-mix(in srgb, var(--fd-map-bg) 80%, transparent); border-radius: 12px; padding: 6px 10px; }

@media (prefers-reduced-motion: reduce) {
  .fd-me-pin i { animation: none; }
  .fd-pin-body, img.mp-tile { transition: none; }
}

/* --- posizione -------------------------------------------------------------------------------- */
.fd-loc { display: grid; gap: 10px; margin-top: 12px; }
.fd-geo { width: 100%; }
.fd-city { display: flex; gap: 8px; }
.fd-city input { flex: 1; min-width: 0; min-height: 48px; }
.fd-loc select { min-height: 48px; }
.fd-loc-bar { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 48px; padding: 4px 4px 4px 12px; border-radius: 16px; background: var(--avorio, #FFFDF8);
  border: 1px solid var(--line, rgb(35 26 20 / .06)); }
.fd-loc-bar > .icon { color: var(--verde, #1E4434); }
.fd-loc-label { flex: 1; min-width: 0; font-weight: 700; font-size: .875rem; line-height: 1.3; overflow-wrap: anywhere; }
select.fd-radius { flex: none; min-height: 44px; width: auto; min-width: 0; padding: 6px 30px 6px 10px; font-size: .875rem; border-color: transparent; background-color: var(--pergamena, #EDE4D3); }
.fd-loc-bar button { flex: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fd-loc-bar > .icon { color: var(--albicocca, #F2B98C); } }
:root[data-theme="dark"] .fd-loc-bar > .icon { color: var(--albicocca, #F2B98C); }
.fd-privacy { display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.fd-privacy .icon { flex: none; margin-top: 2px; }

/* --- filtri ---------------------------------------------------------------------------------------- */
.fd-filters { display: flex; gap: 8px; overflow-x: auto; padding: 14px 2px 2px; scrollbar-width: none; }
.fd-filters::-webkit-scrollbar { display: none; }
.fd-filters .chip { flex: none; min-height: 44px; }
.fd-filters .chip[aria-pressed="true"] { background: var(--inchiostro, #231A14); color: var(--carta, #F5EFE4); }

/* --- righe negozio ---------------------------------------------------------------------------------- */
.fd-list { display: grid; gap: 8px; }
.fd-store { display: flex; align-items: stretch; border-radius: 20px; background: var(--avorio, #FFFDF8); border: 1px solid var(--line, rgb(35 26 20 / .06)); overflow: hidden;
  transition: border-color .2s, box-shadow .2s; }
.fd-store:hover { border-color: color-mix(in srgb, var(--inchiostro, #231A14) 20%, transparent); }
.fd-store.sel { border-color: var(--verde, #1E4434); box-shadow: 0 0 0 2px color-mix(in srgb, var(--verde, #1E4434) 25%, transparent); }
button.fd-store-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px; background: transparent; border-radius: 0; text-align: left;
  font: inherit; color: var(--inchiostro, #231A14); min-height: 72px; box-shadow: none; }
button.fd-store-main:hover { background: transparent; }
.fd-mono { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font: 800 1rem var(--sans, system-ui); color: #FFFDF8; flex: none; background: var(--fd-pin-unk); }
.fd-mono.ok { background: var(--fd-pin-ok); } .fd-mono.order { background: var(--fd-pin-order); } .fd-mono.no { background: var(--fd-pin-no); }
.fd-mono.web { background: var(--pergamena, #EDE4D3); color: var(--inchiostro, #231A14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fd-mono:not(.web) { color: #16120E; } }
:root[data-theme="dark"] .fd-mono:not(.web) { color: #16120E; }
.fd-store-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.fd-store-txt > b { font-size: .875rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.fd-store-txt > small { font-size: .75rem; line-height: 1.35; color: var(--seppia, #5E5248); font-weight: 500; overflow-wrap: anywhere; }
.fd-store-st { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
.fd-upd { font-size: .75rem; color: var(--seppia, #5E5248); font-weight: 600; }
.fd-price { font: 800 .9375rem var(--sans, system-ui); white-space: nowrap; flex: none; }
.fd-price.none { color: var(--seppia, #5E5248); font-weight: 600; }
.fd-chev { display: grid; place-items: center; width: 36px; color: var(--seppia, #5E5248); flex: none; }
a.fd-go { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px; padding: 0 10px; text-decoration: none;
  font: 800 .75rem var(--sans, system-ui); color: var(--verde, #1E4434); border-left: 1px solid var(--line, rgb(35 26 20 / .08)); }
a.fd-go:hover { background: var(--pergamena, #EDE4D3); color: var(--verde, #1E4434); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a.fd-go { color: var(--albicocca, #F2B98C); } }
:root[data-theme="dark"] a.fd-go { color: var(--albicocca, #F2B98C); }

/* stato "da verificare": neutro, sempre pallino + testo */
.status.fd-status.unk { background: var(--fd-unk-bg); color: var(--fd-unk-ink); }

/* --- scheda nota -------------------------------------------------------------------------------- */
.fd-note h3 { margin: 16px 0 4px; font-size: 1.15rem; }
.fd-note-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.fd-status-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 12px; }
button.fd-status-opt { min-height: 48px; justify-content: flex-start; gap: 8px; font-size: .875rem; background: var(--fd-unk-bg); color: var(--fd-unk-ink); box-shadow: inset 0 0 0 2px transparent; }
button.fd-status-opt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
button.fd-status-opt.ok { background: var(--ok-bg, #DCE7DD); color: var(--ok-ink, #1F4F38); }
button.fd-status-opt.order { background: var(--order-bg, #F6E6CF); color: var(--order-ink, #7A4410); }
button.fd-status-opt.no { background: var(--no-bg, #F4DFDA); color: var(--no-ink, #7E2A1F); }
button.fd-status-opt[aria-checked="true"] { box-shadow: inset 0 0 0 2px currentColor; }
button.fd-status-opt[aria-checked="true"]::after { content: "✓"; margin-left: auto; font-weight: 800; }

/* --- ricerca libro ------------------------------------------------------------------------------- */
.fd-results { display: grid; gap: 6px; margin-top: 10px; max-height: 50dvh; overflow: auto; }
button.fd-result { display: flex; align-items: center; gap: 12px; justify-content: flex-start; text-align: left; background: var(--avorio, #FFFDF8);
  border: 1px solid var(--line, rgb(35 26 20 / .08)); border-radius: 16px; padding: 8px 10px; font-weight: 500; }
button.fd-result .cover, button.fd-result .cover-wrap { width: 34px; height: 50px; }
.fd-result-txt { flex: 1; min-width: 0; display: grid; }
.fd-result-txt b { font-weight: 800; }
.fd-result-txt small { font-size: .75rem; }
.fd-store-prefs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.fd-store-prefs li { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; background: var(--carta, #F5EFE4); border-radius: 14px; }
.fd-store-prefs input { width: 22px; height: 22px; min-height: 0; flex: none; accent-color: var(--verde, #1E4434); }
.fd-store-prefs label { flex: 1; display: grid; min-height: 44px; align-content: center; cursor: pointer; }
.fd-store-prefs small { color: var(--seppia, #5E5248); font-size: .75rem; }

/* --- fascia "salva nella lista acquisti" ------------------------------------------------------------ */
.fd-save-band { display: flex; gap: 12px; align-items: center; margin-top: 18px; padding: 14px 14px 14px 16px; border-radius: 20px; background: var(--fd-band); color: var(--fd-band-ink); }
.fd-save-band > .icon { width: 22px; height: 22px; color: var(--fd-band-ico); flex: none; }
.fd-save-band p { flex: 1; margin: 0; display: grid; gap: 1px; font-size: .8125rem; font-weight: 600; line-height: 1.35; }
.fd-save-band p b { font-size: .875rem; font-weight: 800; }
.fd-save-band button.action { min-height: 48px; padding-inline: 20px; flex: none; }

/* --- lista acquisti ------------------------------------------------------------------------------------ */
.sh-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 1024px) { .sh-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sh-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 20px; background: var(--avorio, #FFFDF8); border: 1px solid var(--line, rgb(35 26 20 / .06)); }
.sh-cover { flex: none; border-radius: 3px 7px 7px 3px; }
.sh-cover .cover, .sh-cover .cover-wrap { width: 46px; height: 69px; }
.sh-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sh-txt > b { font-size: .9375rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.sh-txt > small { font-size: .75rem; line-height: 1.35; color: var(--seppia, #5E5248); overflow-wrap: anywhere; }
.sh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
.sh-where { font: 800 .75rem var(--sans, system-ui); }
.sh-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
button.sh-bell { width: 44px; height: 44px; min-height: 44px; border-radius: 14px; background: transparent; color: var(--seppia, #5E5248); box-shadow: inset 0 0 0 1px var(--line, rgb(35 26 20 / .12)); }
button.sh-bell.on { background: var(--q-wheat, #F1E4C4); color: var(--q-wheat-ink, #7A5612); box-shadow: none; }
button.sh-bell.on .icon { fill: currentColor; fill-opacity: .25; }
button.sh-bought { min-height: 44px; padding-inline: 12px; font-size: .8125rem; }
.sh-empty .button { margin-top: 10px; }
@media (max-width: 380px) { button.sh-bought { padding-inline: 10px; } }

/* --- amici e regali ------------------------------------------------------------------------------------------ */
.fr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
button.fr-add { width: 46px; height: 46px; min-height: 46px; border-radius: 16px; flex: none; }
.fr-grid { display: grid; gap: 0 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .fr-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } .fr-col + .fr-col { padding-top: 18px; } }
.fr-row { list-style: none; margin: 0; padding: 18px 2px 4px; display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; }
.fr-row::-webkit-scrollbar { display: none; }
.fr-row li { flex: none; }
button.fr-friend { display: flex; flex-direction: column; align-items: center; gap: 4px; background: transparent; padding: 2px; min-width: 66px; min-height: 0; box-shadow: none; color: var(--inchiostro, #231A14); }
button.fr-friend:hover { background: transparent; }
button.fr-friend:hover .fr-av { box-shadow: 0 0 0 3px var(--carta, #F5EFE4), 0 0 0 5px var(--terracotta, #C25A2E); }
button.fr-friend:disabled { opacity: 1; cursor: default; }
button.fr-friend b { font-size: .8125rem; font-weight: 800; margin-top: 2px; }
button.fr-friend small { font-size: .75rem; color: var(--seppia, #5E5248); font-weight: 600; margin-top: -3px; }
.fr-av { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font: 800 1.25rem var(--sans, system-ui); box-shadow: 0 0 0 3px var(--carta, #F5EFE4); flex: none; transition: box-shadow .2s; }
.fr-av.t-peach { background: var(--q-peach, #F3DED0); color: var(--q-peach-ink, #A8481F); }
.fr-av.t-sky { background: var(--q-sky, #DDE3EA); color: var(--q-sky-ink, #2C4A6B); }
.fr-av.t-apricot { background: var(--albicocca, #F2B98C); color: var(--albicocca-ink, #3B2219); }
.fr-av.t-sage { background: var(--q-sage, #DCE7DD); color: var(--q-sage-ink, #1E4434); }
.fr-av.t-rose { background: var(--q-rose, #F4DFDA); color: var(--q-rose-ink, #7E2A1F); }
.fr-av.t-wheat { background: var(--q-wheat, #F1E4C4); color: var(--q-wheat-ink, #7A5612); }
.fr-av.t-ghost { background: var(--pergamena, #EDE4D3); color: var(--seppia, #5E5248); }

/* verifica regalo: card verde scuro */
.fr-gift { position: relative; overflow: hidden; margin-top: 16px; padding: 18px; border-radius: 26px; background: var(--verde, #1E4434); color: var(--verde-ink, #F6EFE4); box-shadow: var(--shadow-verde, none); }
.fr-gift-ring { position: absolute; right: -50px; top: -60px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgb(246 239 228 / .1); pointer-events: none; }
.fr-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 .75rem/1.2 var(--sans, system-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--albicocca, #F2B98C); }
.fr-eyebrow .icon, h2.fr-eyebrow .icon { width: 16px; height: 16px; color: var(--albicocca, #F2B98C); }
.fr-gift-search { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 12px; height: 50px; padding: 0 14px; border-radius: 16px; background: rgb(246 239 228 / .1); }
.fr-gift-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--verde-ink, #F6EFE4); font: 700 .9375rem var(--sans, system-ui); min-height: 44px; padding: 0; box-shadow: none; }
.fr-gift-search input::placeholder { color: rgb(246 239 228 / .65); }
.fr-gift-search:focus-within { box-shadow: 0 0 0 2px var(--albicocca, #F2B98C); }
.fr-gift-search input:focus-visible { outline: none; box-shadow: none; }
.fr-gift-hint, .fr-gift-note { margin: 14px 0 0; font-size: .875rem; line-height: 1.45; color: rgb(246 239 228 / .85); }
.fr-gift-note { font-size: .75rem; color: rgb(246 239 228 / .72); }
.fr-ideas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
button.fr-idea { min-height: 44px; background: rgb(246 239 228 / .1); color: var(--verde-ink, #F6EFE4); font-size: .8125rem; padding: 8px 12px; border-radius: 14px; }
button.fr-idea:hover { background: rgb(246 239 228 / .18); color: var(--verde-ink, #F6EFE4); }
button.fr-idea .icon { color: var(--albicocca, #F2B98C); }
button.fr-idea small { font-weight: 600; opacity: .8; }
.fr-gift-results { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.fr-gift-results button { width: 100%; justify-content: space-between; text-align: left; background: rgb(246 239 228 / .08); color: var(--verde-ink, #F6EFE4); font-weight: 500; border-radius: 14px; }
.fr-gift-results button:hover { background: rgb(246 239 228 / .16); color: var(--verde-ink, #F6EFE4); }
.fr-gift-results span { display: grid; }
.fr-gift-results b { font-weight: 800; }
.fr-gift-results small { opacity: .8; font-size: .75rem; }
.fr-gift-book { display: flex; gap: 14px; align-items: center; margin-top: 16px; }
.fr-gift-book .cover, .fr-gift-book .cover-wrap { width: 58px; height: 86px; }
.fr-gift-title { margin: 0; font: 400 1.375rem/1.05 var(--serif, Georgia); }
.fr-gift-auth { margin: 2px 0 0; font-size: .8125rem; opacity: .8; }
.fr-people { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.fr-person { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: rgb(246 239 228 / .08); font-size: .875rem; font-weight: 600; }
.fr-person .fr-av { width: 34px; height: 34px; font-size: .875rem; box-shadow: none; }
.fr-person .fr-av.on-light { background: #FFFDF8; color: var(--fr-wants-ink); }  /* sempre su albicocca: colori fissi */
.fr-person-txt { flex: 1; min-width: 0; }
.fr-person-txt b { font-weight: 800; }
.fr-unk { font-weight: 500; opacity: .85; }
.fr-mark { display: grid; place-items: center; width: 24px; font-weight: 800; }
.fr-mark .icon { width: 20px; height: 20px; stroke-width: 2; }
.fr-person.unknown { background: transparent; box-shadow: inset 0 0 0 1px rgb(246 239 228 / .14); }
.fr-person.wants { background: var(--fr-wants); color: var(--fr-wants-ink); font-weight: 700; }
.fr-perfect { font: 800 .75rem var(--sans, system-ui); padding: 5px 9px; border-radius: 9px; background: var(--fr-wants-ink); color: #F6EFE4; }
.fr-person-act { flex-basis: 100%; display: flex; justify-content: flex-end; }
button.fr-btn-dark { background: var(--fr-wants-ink); color: #F6EFE4; }
button.fr-btn-dark:hover { background: #24140F; color: #F6EFE4; }
button.fr-btn-light { background: rgb(255 253 248 / .6); color: var(--fr-wants-ink); }
.fr-taken { font-size: .75rem; font-weight: 700; opacity: .85; }

/* prestiti e condivisioni */
.fr-sec { margin-top: 26px; }
.fr-count { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; min-width: 44px; padding: 0 4px; white-space: nowrap; font: 700 .8125rem var(--sans, system-ui); color: var(--seppia, #5E5248); text-decoration: none; }
.fr-loans, .fr-shares, .fr-wishes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fr-loans a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 20px; background: var(--avorio, #FFFDF8); border: 1px solid var(--line, rgb(35 26 20 / .06));
  color: var(--inchiostro, #231A14); text-decoration: none; }
.fr-loans a:hover { border-color: color-mix(in srgb, var(--inchiostro, #231A14) 20%, transparent); color: var(--inchiostro, #231A14); }
.fr-loans .cover, .fr-loans .cover-wrap { width: 40px; height: 60px; }
.fr-loan-txt { flex: 1 1 9rem; min-width: 0; display: grid; gap: 1px; }   /* lo stato va a capo prima che il titolo si spezzi */
.fr-loan-txt b { font-size: .9375rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.fr-loan-txt small { font-size: .75rem; color: var(--seppia, #5E5248); }
.fr-bar { display: block; height: 5px; border-radius: 5px; background: var(--pergamena, #EDE4D3); margin-top: 8px; overflow: hidden; }
.fr-bar i { display: block; height: 100%; background: var(--verde, #1E4434); border-radius: 5px; }
.fr-bar.soon i, .fr-bar.late i { background: var(--terracotta, #C25A2E); }
.fr-due { font: 800 .75rem/1.2 var(--sans, system-ui); color: var(--seppia, #5E5248); text-align: right; max-width: 92px; }
.fr-due.soon, .fr-due.late { color: var(--terracotta-text, #A8481F); }
.fr-shares li { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 18px; background: var(--avorio, #FFFDF8); border: 1px solid var(--line, rgb(35 26 20 / .06)); }
.fr-share-txt { flex: 1; min-width: 0; display: grid; }
.fr-share-txt b { font-weight: 800; overflow-wrap: anywhere; }
.fr-share-txt small { font-size: .75rem; color: var(--seppia, #5E5248); overflow-wrap: anywhere; }
.fr-optin { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 14px; border-radius: 18px; background: var(--pergamena, #EDE4D3); }
.fr-optin input { width: 22px; height: 22px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--verde, #1E4434); }
.fr-optin label { display: grid; gap: 2px; cursor: pointer; }
.fr-optin small { font-size: .75rem; color: var(--seppia, #5E5248); line-height: 1.4; }
.fr-wishes li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: var(--carta, #F5EFE4); }
.fr-wishes .cover, .fr-wishes .cover-wrap { width: 36px; height: 54px; }
.fr-wish-txt { flex: 1; min-width: 140px; display: grid; gap: 2px; }
.fr-wish-txt b { font-weight: 800; }
.fr-wish-txt small { font-size: .75rem; }
.offline-note { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--q-wheat, #F1E4C4); color: var(--q-wheat-ink, #7A5612); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .fd-store, .fr-av { transition: none; } }

/* --- laFeltrinelli: dati REALI del sito (sperimentale) — stile diverso dalle note annotate da te -------- */
:root { --fz: #3E3A8F; --fz-soft: #E8E6F6; --fz-ink: #2C2870; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fz: #A9A4F0; --fz-soft: #26233F; --fz-ink: #CFCBFA; } }
:root[data-theme="dark"] { --fz: #A9A4F0; --fz-soft: #26233F; --fz-ink: #CFCBFA; }
.fz-src { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: var(--fz-soft); color: var(--fz-ink);
  font: 700 .75rem/1.25 var(--sans, system-ui); text-align: right; }
.fz-src .icon { width: 13px; height: 13px; flex: none; }
.fz-card { border-radius: 20px; background: var(--avorio, #FFFDF8); border: 1px solid var(--line, rgb(35 26 20 / .06)); border-left: 5px solid var(--fz);
  padding: 14px 14px 12px; display: grid; gap: 10px; }
.fz-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.fz-now { font: 800 1.5rem/1 var(--sans, system-ui); color: var(--inchiostro, #231A14); }
.fz-list { font: 600 .9375rem var(--sans, system-ui); color: var(--seppia, #5E5248); }
.fz-disc { font: 800 .75rem var(--sans, system-ui); padding: 3px 8px; border-radius: 99px; background: var(--fz-soft); color: var(--fz-ink); }
.fz-price-note { flex-basis: 100%; font-size: .75rem; color: var(--seppia, #5E5248); font-weight: 600; }
.fz-shops { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.fz-shop { display: flex; align-items: center; gap: 12px; padding: 10px 8px; margin-inline: -8px; border-top: 1px solid var(--line, rgb(35 26 20 / .08)); }
.fz-shop:first-child { border-top: 0; }
.fz-shop.sel { border-radius: 12px; border-top-color: transparent; background: color-mix(in srgb, var(--fz) 10%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fz) 45%, transparent); }
.fz-mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--fz); color: var(--avorio, #FFFDF8);
  font: 800 .9375rem var(--serif, Georgia); }
.fz-shop.off .fz-mark { opacity: .45; }
.fz-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font: 700 .75rem/1.3 var(--sans, system-ui);
  background: var(--fd-unk-bg); color: var(--fd-unk-ink); box-shadow: inset 0 0 0 1px currentColor; }
.fz-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.fz-status.ok { background: var(--ok-bg, #DCE7DD); color: var(--ok-ink, #1F4F38); }
.fz-status.order { background: var(--order-bg, #F6E6CF); color: var(--order-ink, #7A4410); }
.fz-status.no { background: var(--no-bg, #F4DFDA); color: var(--no-ink, #7E2A1F); }
button.fz-more { justify-self: start; min-height: 44px; }
a.fz-go { justify-self: stretch; min-height: 48px; justify-content: center; gap: 8px; background: var(--fz); color: #FFFDF8; border-color: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a.fz-go { color: #16120E; } }
:root[data-theme="dark"] a.fz-go { color: #16120E; }
.fz-honest { margin: 0; font-size: .75rem; }
a.fz-go:hover { background: color-mix(in srgb, var(--fz) 85%, #000); color: #FFFDF8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a.fz-go:hover { background: color-mix(in srgb, var(--fz) 85%, #fff); color: #16120E; } }
:root[data-theme="dark"] a.fz-go:hover { background: color-mix(in srgb, var(--fz) 85%, #fff); color: #16120E; }
.fz-sec { margin-top: 18px; }
.fz-sec[hidden] { display: none; }

/* --- Amici: tre schede ------------------------------------------------------------------------------------ */
.fr-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 4px; padding: 5px; border-radius: 18px; background: var(--pergamena, #EDE4D3); }
.fr-tabs::-webkit-scrollbar { display: none; }
.fr-tab { flex: 1 1 auto; min-height: 44px; padding: 8px 12px; border-radius: 14px; background: transparent; color: var(--seppia, #5E5248); font: 800 .8438rem/1.2 var(--sans, system-ui); gap: 6px; white-space: normal; text-align: center; }
.fr-tab .icon { width: 17px; height: 17px; }
.fr-tab[aria-selected="true"] { background: var(--avorio, #FFFDF8); color: var(--inchiostro, #231A14); box-shadow: 0 1px 0 rgb(35 26 20 / .04), 0 6px 14px -10px rgb(35 26 20 / .5); }
.fr-tab[aria-selected="true"] .icon { color: var(--terracotta-text, #B4532A); }
@media (max-width: 420px) { .fr-tab .icon { display: none; } .fr-tab { padding: 8px 8px; font-size: .8125rem; } }
.fr-panel { outline: 0; }
.fr-panel > .fr-row { margin-top: 14px; }
.fr-panel-regali > .fr-gift { margin-top: 18px; }
@media (min-width: 1024px) {
  .fr-panel-condivise, .fr-panel-prestiti, .fr-panel-regali { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 32px; align-items: start; }
  .fr-panel-condivise > .fr-row { grid-column: 1 / -1; }
  .fr-panel-regali > .fr-gift { margin-top: 26px; }
}
.fr-lists { display: grid; gap: 10px; }
.fr-list-card { padding: 14px; border-radius: 20px; background: var(--avorio, #FFFDF8); border: 1px solid var(--line, rgb(35 26 20 / .06)); }
.fr-list-card header { display: flex; align-items: center; gap: 12px; }
.fr-list-card header > .fr-lc-txt { flex: 1; min-width: 0; display: grid; }
.fr-list-card header b { font-weight: 800; }
.fr-list-card header small { font-size: .75rem; color: var(--seppia, #5E5248); }
.fr-list-card .fr-av { width: 40px; height: 40px; font-size: .9375rem; box-shadow: none; }
.fr-mini { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.fr-mini li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line, rgb(35 26 20 / .06)); font-size: .875rem; }
.fr-mini-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fr-secret { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; }
.fr-secret .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.fr-taken { font: 700 .7812rem var(--sans, system-ui); color: var(--seppia, #5E5248); padding: 6px 10px; border-radius: 10px; background: var(--pergamena, #EDE4D3); }
.fr-loan-btn { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: 100%; padding: 12px; border-radius: 20px; background: var(--avorio, #FFFDF8); border: 1px solid var(--line, rgb(35 26 20 / .06));
  color: var(--inchiostro, #231A14); text-align: left; font-weight: 500; justify-content: flex-start; min-height: 0; }
.fr-loan-btn:hover { border-color: color-mix(in srgb, var(--inchiostro, #231A14) 20%, transparent); background: var(--avorio, #FFFDF8); }
.fr-loan-btn .cover, .fr-loan-btn .cover-wrap { width: 40px; height: 60px; flex: none; }
.fr-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fr-hist li { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--line, rgb(35 26 20 / .06)); }
.fr-hist-ico { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--q-peach, #F3DED0); color: var(--q-peach-ink, #A8481F); }
.fr-hist li.return .fr-hist-ico { background: var(--q-sage, #DCE7DD); color: var(--q-sage-ink, #1E4434); }
.fr-hist-ico .icon { width: 16px; height: 16px; }
.fr-hist-txt { flex: 1; min-width: 0; display: grid; }
.fr-hist-txt b { font-size: .875rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.fr-hist-txt small { font-size: .75rem; color: var(--seppia, #5E5248); }
.fr-hist time { font: 700 .75rem var(--sans, system-ui); color: var(--seppia, #5E5248); }

/* --- Trova: fonte · ultimo controllo · stato, preferite, ordinamento ---------------------------------------- */
.fd-filters { flex-wrap: wrap; align-items: center; overflow: visible; }
.fd-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1 1 100%; min-width: 0; padding-bottom: 2px; }
.fd-chips::-webkit-scrollbar { display: none; }
.fd-chips .chip { flex: none; min-height: 44px; gap: 6px; }
.fd-chips .chip .icon { width: 15px; height: 15px; }
.fd-chips .chip[aria-pressed="true"] { background: var(--inchiostro, #231A14); color: var(--carta, #F5EFE4); }
.fd-sort-l { display: inline-flex; align-items: center; gap: 8px; font: 700 .8125rem var(--sans, system-ui); color: var(--seppia, #5E5248); margin-left: auto; }
.fd-sort-l .icon { width: 16px; height: 16px; }
.fd-sort { min-height: 44px; width: auto; padding: 6px 30px 6px 12px; border-radius: 12px; font: 700 .8438rem var(--sans, system-ui); }
.fd-near-note { flex: 1 1 100%; margin: 0; }
.fd-src { gap: 4px 8px; }
.fd-src .fd-upd { font-size: .75rem; }
button.fd-fav { width: 44px; min-height: 44px; height: auto; flex: none; align-self: stretch; border-radius: 0; background: transparent; color: var(--seppia, #5E5248); padding: 0; }
button.fd-fav:hover { background: var(--pergamena, #EDE4D3); }
button.fd-fav.on { color: var(--terracotta-text, #B4532A); }
button.fd-fav .icon { width: 19px; height: 19px; }
.fz-shop { position: relative; }
.fz-shop button.fd-fav { align-self: center; border-radius: 12px; height: 44px; }
.sh-facts { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 5px; font-size: .7812rem; color: var(--inchiostro, #231A14); }
.sh-facts > span { display: inline-flex; align-items: center; gap: 4px; }
.sh-facts .icon { width: 14px; height: 14px; color: var(--seppia, #5E5248); }
.sh-reason { margin: 6px 0 0; font: italic 500 .8125rem/1.4 var(--sans, system-ui); color: var(--seppia, #5E5248); overflow-wrap: anywhere; }
button.sh-edit { width: 44px; height: 44px; min-height: 44px; border-radius: 14px; background: transparent; color: var(--seppia, #5E5248); box-shadow: inset 0 0 0 1px var(--line, rgb(35 26 20 / .12)); }
.sh-acts { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; max-width: 150px; }
.sh-dlg textarea { width: 100%; }
@media (max-width: 520px) { .fd-hide-s { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.fd-loc-label { min-width: 5.5em; }
.fd-loc-label::first-letter { text-transform: uppercase; }
.fd-src .status { font-size: .75rem; padding-block: 2px; }
.fd-store button.fd-fav { width: 44px; }
.sh-row { flex-wrap: wrap; align-items: flex-start; }
.sh-acts { flex: 1 1 100%; max-width: none; flex-direction: row; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line, rgb(35 26 20 / .06)); }
@media (min-width: 1024px) { .fd-chips { flex-wrap: wrap; overflow: visible; } }

/* --- posizione dal dispositivo: precisione e GPS preciso ---------------------------------------------- */
.fd-geo-top { width: 100%; }
.fd-acc-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 10px; padding: 0 2px 0 12px; }
.fd-acc { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font: 700 .7812rem/1.3 var(--sans, system-ui); color: var(--seppia, #5E5248); }
.fd-acc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fd-me); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fd-me) 22%, transparent); flex: none; }
.fd-hiacc { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: auto; cursor: pointer; font: 700 .7812rem/1.2 var(--sans, system-ui); white-space: nowrap; }
.fd-hiacc input.switch { transform: scale(.85); transform-origin: right center; }
.fd-hiacc input.switch { flex: none; }

/* Admin › Email e fonti dati › Cartina di «Trova in libreria» */
dl.tile-facts { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 8px 14px; margin: 8px 0 4px; }
dl.tile-facts dt { font: 800 .75rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--seppia); padding-top: 3px; }
dl.tile-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
dl.tile-facts code { font-size: .8125rem; background: var(--pergamena); padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; }
@media (max-width: 520px) { dl.tile-facts { grid-template-columns: 1fr; gap: 2px; } dl.tile-facts dd { margin-bottom: 8px; } }


/* --- percorso ------------------------------------------------------------------------------------ */
.mp-route { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: visible; }
.mp-route polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mp-route-case { stroke: var(--fd-route-case); stroke-width: 9; opacity: .9; }
.mp-route-line { stroke: var(--fd-route); stroke-width: 5; }
.mp-route.est .mp-route-line { stroke-dasharray: 1 9; stroke-width: 6; }
.fd-pin.dest .fd-pin-body { box-shadow: 0 0 0 4px var(--fd-route-case), 0 0 0 7px var(--fd-route); }
.fd-pin.best:not(.dest) .fd-pin-body { box-shadow: 0 0 0 3px var(--fd-route-case), 0 0 0 5px var(--fd-pin-ok); }
.icon.glyph { stroke-width: 1.7; }

.fd-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 12px; }
.fd-head-row > div { min-width: 0; flex: 1 1 auto; }
button.fd-near-set { min-height: 44px; min-width: 44px; flex: none; gap: 6px; }

.fd-route-slot:empty { display: none; }
.fd-route-slot { margin-top: 10px; }
.fd-pick { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 16px; background: var(--avorio, #FFFDF8);
  border: 1px solid var(--line, rgb(35 26 20 / .06)); box-shadow: var(--shadow); }
.fd-pick-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.fd-pick-txt b { font-size: .9375rem; line-height: 1.25; overflow-wrap: break-word; }
.fd-pick-txt small { font-size: .75rem; line-height: 1.35; color: var(--seppia, #5E5248); overflow-wrap: break-word; }
button.fd-route-go, button.fd-best-go { min-height: 44px; flex: none; gap: 6px; margin-left: auto; }

.fd-route { padding: 12px 14px 12px; border-radius: 20px; background: var(--avorio, #FFFDF8); border: 1px solid var(--line, rgb(35 26 20 / .06)); box-shadow: var(--shadow);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.fd-route-head { display: flex; align-items: center; gap: 8px; }
.fd-route-head h2 { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.2rem; line-height: 1.2; }
.fd-route-head h2 > span:last-child { min-width: 0; overflow-wrap: break-word; }   /* il nome della libreria va a capo, mai tagliato */
.fd-route-head h2 .icon { width: 22px; height: 22px; color: var(--fd-route); flex: none; }
button.fd-route-x { width: 44px; height: 44px; min-height: 44px; flex: none; border-radius: var(--r-ctl, 14px); }
.fd-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 15px; background: var(--pergamena, #EDE4D3); }
button.fd-mode { min-height: 44px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; line-height: 1.2; border-radius: 11px; background: transparent;
  color: var(--seppia, #5E5248); box-shadow: none; font: 700 .875rem/1.2 var(--sans, system-ui); }
button.fd-mode .icon { width: 20px; height: 20px; }
button.fd-mode[aria-checked="true"] { background: var(--avorio, #FFFDF8); color: var(--inchiostro, #231A14); box-shadow: 0 6px 14px -10px rgb(35 26 20 / .55); }
button.fd-mode:hover { color: var(--inchiostro, #231A14); }
.fd-route-sum { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .9375rem; }
.fd-route-sum > .icon { width: 22px; height: 22px; color: var(--fd-route); }
.fd-route-sum b { font: 400 1.5rem/1.1 var(--serif, Georgia); }
.fd-route-dot { color: var(--seppia, #5E5248); }
.fd-est { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 8px; border-radius: 99px; background: var(--order-bg, #F6E6CF); color: var(--order-ink, #7A4410);
  font: 800 .75rem/1.2 var(--sans, system-ui); letter-spacing: .04em; text-transform: uppercase; margin-left: 6px; }
.fd-route-note { margin: -4px 0 0; }
.fd-route-msg { margin: 0; display: flex; gap: 8px; align-items: center; font-weight: 700; }
.fd-route-msg.off { color: var(--seppia, #5E5248); }
button.fd-route-again { justify-self: start; min-height: 44px; gap: 6px; }
.fd-steps, .fd-open { border-radius: 14px; background: color-mix(in srgb, var(--pergamena, #EDE4D3) 55%, transparent); }
.fd-steps summary, .fd-open summary { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 14px; cursor: pointer; font-weight: 800; font-size: .875rem; list-style: none; }
.fd-steps summary::-webkit-details-marker, .fd-open summary::-webkit-details-marker { display: none; }
.fd-steps summary::after, .fd-open summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease); }
.fd-steps[open] summary::after, .fd-open[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.fd-steps ol { margin: 0; padding: 0 14px 10px; list-style: none; display: grid; gap: 2px; }
.fd-steps li { padding: 7px 0; border-top: 1px solid var(--line, rgb(35 26 20 / .08)); display: flex; justify-content: space-between; gap: 12px; font-size: .875rem; line-height: 1.4; }
.fd-steps li > span { min-width: 0; overflow-wrap: break-word; }
.fd-steps li small { color: var(--seppia, #5E5248); white-space: nowrap; font-weight: 700; font-size: .8125rem; flex: none; }
.fd-route-foot { display: grid; gap: 6px; }
.fd-open ul { margin: 0; padding: 0 8px 4px; list-style: none; display: grid; gap: 2px; }
.fd-open li a { display: flex; align-items: center; min-height: 44px; padding: 0 8px; border-radius: 10px; font-weight: 700; color: var(--link, #1E4434); }
.fd-open li a:hover { background: var(--avorio, #FFFDF8); }
.fd-open p { margin: 0; padding: 0 14px 12px; display: flex; gap: 6px; align-items: flex-start; min-width: 0; }
.fd-route-src { font-size: .75rem; }
.fd-route-src:empty { display: none; }

/* il più vicino che ce l'ha */
.fd-best-slot:empty { display: none; }
.fd-best-slot { margin: 14px 0 4px; }
.fd-best { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 10px 10px 12px; border-radius: 18px; background: var(--fd-best); color: var(--fd-best-ink); }
.fd-best.loading { font-weight: 700; min-height: 64px; }
.fd-best.loading .icon { width: 22px; height: 22px; }
.fd-best-ico { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--avorio, #FFFDF8); color: var(--fd-route); flex: none; }
.fd-best-ico .icon { width: 24px; height: 24px; }
.fd-best-txt { flex: 1 1 10rem; min-width: 0; margin: 0; display: grid; gap: 1px; }
.fd-best-txt small { font: 800 .75rem/1.3 var(--sans, system-ui); letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.fd-best-txt b { font-weight: 800; }
.fd-best-note { margin: 6px 4px 0; }

/* avviso di vicinanza (in tutta l'app, sopra la barra in basso) */
.nr-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar, 72px) + var(--tabbar-gap, 22px) + 18px + env(safe-area-inset-bottom));
  z-index: 250; width: min(560px, calc(100vw - 32px)); display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start;
  padding: 12px 12px 12px 14px; border-radius: 20px; background: var(--inchiostro, #231A14); color: var(--carta, #F5EFE4);
  box-shadow: 0 22px 40px -18px rgb(35 26 20 / .7); animation: nr-in .35s var(--ease, ease-out); }
.nr-banner[hidden] { display: none; }
.nr-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--albicocca, #F2B98C); color: var(--albicocca-ink, #3B2219); }
.nr-txt { margin: 0; font-size: .875rem; line-height: 1.4; align-self: center; }
.nr-txt b { font-weight: 800; }
.nr-acts { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
.nr-acts button { min-height: 44px; gap: 6px; }
.nr-banner button.nr-later { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px rgb(245 239 228 / .4); }
.nr-banner button.nr-route { background: var(--albicocca, #F2B98C); color: var(--albicocca-ink, #3B2219); }
@keyframes nr-in { from { opacity: 0; transform: translate(-50%, 16px); } }
@media (min-width: 1024px) { .nr-banner { bottom: 28px; left: calc(50% + var(--side-w, 248px) / 2); } }
@media (prefers-reduced-motion: reduce) { .nr-banner { animation: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nr-banner { background: #F3EBDD; color: #231A14; }
  :root:not([data-theme="light"]) .nr-banner button.nr-later { box-shadow: inset 0 0 0 2px rgb(35 26 20 / .35); } }
:root[data-theme="dark"] .nr-banner { background: #F3EBDD; color: #231A14; }
:root[data-theme="dark"] .nr-banner button.nr-later { box-shadow: inset 0 0 0 2px rgb(35 26 20 / .35); }
.nr-dlg { display: grid; gap: 12px; }
.nr-notif p { margin: 0 0 6px; }
.fd-best button.fd-best-go { background: var(--avorio, #FFFDF8); color: var(--inchiostro, #231A14); }

/* Amministrazione › Percorsi di Trova: un indirizzo per modalità */
.router-form .router-mode { padding: 12px 0 2px; border-top: 1px solid var(--line); }
.router-form .router-mode:first-of-type { border-top: 0; }
.router-mode-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 6px; }
.router-form input { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .9375rem; }

/* righe delle librerie strette (telefono, testo grande, colonna accanto alla cartina): il prezzo scende sotto il
   nome invece di schiacciarlo (container query sulla riga: vale anche nella colonna stretta del computer) */
.fd-list { container: fdlist / inline-size; }
@container fdlist (max-width: 30rem) {
  .fd-chev { display: none; }   /* freccina decorativa: lo spazio va al nome della libreria */
  button.fd-store-main { flex-wrap: wrap; row-gap: 6px; }
  button.fd-store-main .fd-store-txt { flex: 1 1 calc(100% - 56px); }
  button.fd-store-main .fd-price { margin-left: 56px; }
}