/* ============================================================
   OPAC Browser — CSS completo
   - GRID: 3 colonne fisse + crop sopra+sotto centrato
   - MASONRY: colonnato
   - DETAIL: stile "pagina singola" come screenshot (hero + meta + sidebar + altre foto)
   ============================================================ */

.opac-browser{
  --opac-gap: 22px;
  --opac-pad: 28px;
  --opac-muted: rgba(0,0,0,.65);
  --opac-line: rgba(0,0,0,.12);

  --opac-grid-thumb-h: 360px;
  --opac-cols: 3;

  --opac-detail-max: 1180px;
  --opac-detail-side: 320px;
}

/* Full width */
.opac-browser.opac-fullwidth{
  width:100vw;
  max-width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow:hidden;
}

/* Layout base */
.opac-browser .opac-main{
  display:flex;
  gap: var(--opac-gap);
  align-items:flex-start;
  padding: 0 var(--opac-pad);
}

.opac-browser .opac-gallery{
  flex:1;
  min-width:0;
}

.opac-browser .opac-tree{
  width: var(--opac-tree-w);
  min-width: var(--opac-tree-w);
  background:#fff;
  border:1px solid var(--opac-line);
}

/* Toolbar */
.opac-browser .opac-toolbar{
  padding:14px 14px 10px 14px;
  border-bottom:1px solid var(--opac-line);
  background:#fff;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
}

.opac-browser .opac-title{
  font-weight:900;
  font-size:22px;
  line-height:1;
}

.opac-browser .opac-sub{
  font-size:12px;
  font-weight:800;
  color:var(--opac-muted);
  text-align:right;
  white-space:nowrap;
}

/* Grid container */
.opac-browser .opac-grid{
  padding:18px 0 28px 0;
}

/* Card base: niente riquadri */
.opac-browser .opac-card{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:hidden;
  cursor:pointer;
}

.opac-browser .opac-card.is-empty{
  cursor:default;
  opacity:.75;
}

.opac-browser .opac-card.is-empty img{
  filter:grayscale(1);
  opacity:.35;
}

/* wrapper immagine */
.opac-browser .opac-media{
  width:100%;
  overflow:hidden;
  background:#fff;
}

/* immagine: mai tagliare larghezza */
.opac-browser .opac-card img{
  width:100%;
  height:auto;
  display:block;
}

/* caption */
.opac-browser .opac-card .cap{
  padding:8px 0 0 0;
  font-size:16px;
  font-weight:500;   /* <-- niente bold pesante */
  line-height:1.25;
  color: rgba(0,0,0,.85);
}
/* ============================================================
   GRID regolare — scacchiera precisa (3 colonne)
   ============================================================ */
.opac-browser.layout-grid .opac-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:22px;
  align-items:start;
}

.opac-browser.layout-grid .opac-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Crop sopra+sotto: immagine centrata verticalmente */
.opac-browser.layout-grid .opac-media{
  height: var(--opac-grid-thumb-h);
  position: relative;
  overflow: hidden;
}

.opac-browser.layout-grid .opac-media img{
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width:100%;
  height:auto;
  display:block;
}

/* caption a altezza costante (2 righe) */
.opac-browser.layout-grid .opac-card .cap{
  min-height: 68px;
  max-height: 68px;
  margin-top: -10px;
  overflow:hidden;
}

/* ============================================================
   MASONRY
   ============================================================ */
.opac-browser.layout-masonry .opac-grid{
  column-count: var(--opac-cols);
  column-gap: 22px;
}

.opac-browser.layout-masonry .opac-card{
  display:inline-block;
  width:100%;
  margin:0 0 22px 0;
  break-inside: avoid;
}

.opac-browser.layout-masonry .opac-media{
  height:auto;
  position: static;
  overflow: visible;
}

.opac-browser.layout-masonry .opac-media img{
  position: static;
  transform:none;
  width:100%;
  height:auto;
}

.opac-browser.layout-masonry .opac-card .cap{
  min-height: unset;
  max-height: unset;
  overflow: visible;
}

/* ============================================================
   TREE
   ============================================================ */
.opac-browser .opac-tree-body{
  padding:10px 10px;
  max-height:78vh;
  overflow:auto;
  background:#fff;
}

.opac-browser .opac-node{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 8px;
  cursor:pointer;
}

.opac-browser .opac-node:hover{
  background: rgba(0,0,0,.045);
}

.opac-browser .opac-node .tw{
  width:16px;
  text-align:center;
  opacity:.7;
  font-weight:900;
}

.opac-browser .opac-badge{
  margin-left:auto;
  font-size:11px;
  opacity:.55;
  font-weight:800;
}

.opac-browser .opac-children{
  margin-left:16px;
  display:none;
}

.opac-browser .open > .opac-children{
  display:block;
}

/* ============================================================
   DETAIL — come screenshot
   - Nasconde l'albero
   - Hero immagine grande
   - Meta: 2 colonne (main + sidebar)
   - Altre foto: grid 3 colonne
   ============================================================ */

.opac-browser.is-detail .opac-tree{
  display:none !important;
}

.opac-browser.is-detail .opac-main{
  padding: 0 var(--opac-pad);
}

/* ✅ FIX CRITICO:
   in dettaglio la .opac-grid NON deve essere né GRID né MASONRY.
   Altrimenti il dettaglio viene “spezzato” in colonne come nel tuo screenshot. */
.opac-browser.is-detail .opac-grid{
  display:block !important;
  grid-template-columns: none !important;
  gap: 0 !important;

  column-count: unset !important;
  column-gap: unset !important;

  padding: 0 0 28px 0;
}

/* evita eventuali float del tema */
.opac-browser.is-detail .opac-grid > *{
  float:none !important;
  width:auto !important;
  max-width:none !important;
}

.opac-detail{
  max-width: var(--opac-detail-max);
  margin: 0 auto;
}

.opac-detail-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}

.opac-detail-back{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.opac-btn{
  border:1px solid rgba(0,0,0,.18);
  background:#f39c12;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  font-size:12px;
  font-weight:900;
}

.opac-btn:hover{
  background:#f6f6f6;
}

.opac-detail-title{
  font-weight:900;
  font-size:30px;
  line-height:1.05;
  margin: 0 0 6px 0;
}

.opac-detail-date{
  font-size:14px;
  font-weight:800;
  opacity:.75;
  margin-bottom: 14px;
}

/* HERO */
.opac-detail-hero{
  background:#fff;
  border:1px solid var(--opac-line);
  padding: 10px;
  margin-bottom: 18px;
}

.opac-detail-hero img{
  width:100%;
  height:auto;
  max-height: 520px;
  object-fit:contain;
  display:block;
}

/* META area: 2 colonne */
.opac-detail-meta{
  display:grid;
  grid-template-columns: minmax(0, 1fr) var(--opac-detail-side);
  gap: 22px;
  align-items:start;
}

/* tabella meta (sinistra) */
.opac-meta-table{
  border-top:1px solid var(--opac-line);
}

.opac-meta-row{
  display:grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
  padding: 10px 0;
  border-bottom:1px solid var(--opac-line);
  align-items:start;
}

.opac-meta-k{
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.75;
}

.opac-meta-v{
  font-size:14px;
  font-weight:700;

  /* NO testo verticale */
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;

  /* hard override anti writing-mode del tema */
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

/* sidebar (destra) */
.opac-sidebox{
  border-left:1px solid var(--opac-line);
  padding-left: 18px;
}

.opac-sidebox h4{
  margin: 0 0 10px 0;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:900;
  opacity:.8;
  border-bottom:1px solid var(--opac-line);
  padding-bottom: 8px;
}

.opac-side-line{
  margin: 8px 0;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
}

.opac-side-type{
  font-weight:900;
  margin-right:8px;
  text-transform:uppercase;
  font-size:11px;
  opacity:.75;
}

/* ALTRE FOTO */
.opac-related{
  margin-top: 22px;
  padding-top: 14px;
  border-top:1px solid var(--opac-line);
}

.opac-related h3{
  margin: 0 0 14px 0;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:900;
  opacity:.8;
}

.opac-related-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.opac-related-item{
  cursor:pointer;
  background:#fff;
  border:1px solid var(--opac-line);
  padding: 8px;
}

.opac-related-item img{
  width:100%;
  height:auto;
  display:block;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1200px){
  .opac-browser.layout-grid .opac-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .opac-browser.layout-masonry .opac-grid{
    column-count: 2;
  }
  .opac-detail-meta{
    grid-template-columns: 1fr;
  }
  .opac-sidebox{
    border-left:0;
    padding-left:0;
  }
}

@media (max-width: 980px){
  .opac-browser .opac-main{
    flex-direction:column;
    padding:0 14px;
  }
  .opac-browser .opac-tree{
    width:100%;
    min-width:0;
  }
  .opac-detail-title{
    font-size:24px;
  }
  .opac-meta-row{
    grid-template-columns: 170px minmax(0, 1fr);
  }
}

@media (max-width: 620px){
  .opac-browser.layout-grid .opac-grid{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .opac-browser.layout-masonry .opac-grid{
    column-count: 1;
  }
  .opac-browser .opac-card .cap{
    font-size:18px;
  }
  .opac-related-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .opac-meta-row{
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   LOADING overlay (solo startup)
   ============================================================ */
.opac-browser .opac-gallery{
  position: relative; /* necessario per overlay */
}

.opac-browser .opac-loading{
  position:absolute;
  inset: 0;
  background: rgba(255,255,255,.78);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 50;
}

.opac-browser .opac-loading.hidden{
  display:none !important;
}

.opac-browser .opac-spinner{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.65);
  animation: opacSpin 0.9s linear infinite;
}

@keyframes opacSpin{
  to { transform: rotate(360deg); }
}

/* ============================================================
   Progressive loading: skeleton cards
   ============================================================ */
.opac-browser .opac-skel-card{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.opac-browser .opac-skel-media{
  width:100%;
  height: var(--opac-grid-thumb-h);
  background: rgba(0,0,0,.06);
  position: relative;
  overflow:hidden;
}

.opac-browser .opac-skel-media::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-60%);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  animation: opacShimmer 1.1s linear infinite;
}

.opac-browser .opac-skel-cap{
  margin-top:10px;
  height: 18px;
  width: 70%;
  background: rgba(0,0,0,.08);
}

.opac-browser .opac-skel-cap.small{
  width: 45%;
  height: 14px;
  margin-top:8px;
  background: rgba(0,0,0,.06);
}

@keyframes opacShimmer{
  to { transform: translateX(60%); }
}

/* ============================================================
   TOP SEARCH — banda gialla full-width + contenuto centrato
   SOLO CSS. Incolla IN FONDO al file.
   ============================================================ */

/* 1) Banda gialla a tutta viewport (anche dentro container WP) */
.opac-browser.opac-has-topsearch .opac-topband{
  background:#f2b233 !important;

  width:100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding:18px 20px !important;

  border:0 !important;
  box-shadow:none !important;
}

/* 2) Form centrato come blocco (non “stretch” a sinistra) */
.opac-browser.opac-has-topsearch .opac-topsearch{
  max-width:1200px !important;
  margin:0 auto !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;   /* centra il gruppo */

  gap:14px !important;

  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

/* 3) IMPORTANTISSIMO: l’input NON deve avere flex:1, altrimenti spinge tutto */
.opac-browser.opac-has-topsearch .opac-topsearch-left{
  flex: 0 1 780px !important;          /* larghezza “da screenshot” */
  min-width: 320px !important;
  display:flex !important;
  align-items:center !important;
}

/* input come nello screenshot: lungo, pulito, centrato */
.opac-browser.opac-has-topsearch .opac-topsearch-q{
  width:100% !important;
  height:44px !important;

  background:#fff !important;
  border:0 !important;                 /* nello screenshot è “pulito” */
  border-radius:0 !important;

  padding:0 14px !important;
  margin:0 !important;

  font-size:20px !important;
  font-weight:700 !important;
  color:#f2b233 !important;            /* testo arancio */

  outline:none !important;
  box-shadow:none !important;
}

/* placeholder arancio come screenshot */
.opac-browser.opac-has-topsearch .opac-topsearch-q::placeholder{
  color:#f2b233 !important;
  opacity:1 !important;
}

/* radio group e lato destro: non devono “allargare” */
.opac-browser.opac-has-topsearch .opac-topsearch-mid,
.opac-browser.opac-has-topsearch .opac-topsearch-right{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  white-space:nowrap !important;
}

/* radio label: compatti (senza box del tema) */
.opac-browser.opac-has-topsearch .opac-rb{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;

  margin:0 !important;
  padding:0 !important;

  font-weight:900 !important;
  font-size:13px !important;
  color:#111 !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.opac-browser.opac-has-topsearch .opac-rb input{
  margin:0 !important;
}

/* bottone “lente” stile pulito */
.opac-browser.opac-has-topsearch .opac-topsearch-btn{
  height:44px !important;
  padding:0 14px !important;

  background:transparent !important;
  border:0 !important;

  font-size:0 !important;              /* nasconde testo “Cerca” senza toccare JS */
  line-height:0 !important;
  cursor:pointer !important;
}

/* disegna la lente via CSS (così sembra come screenshot) */
.opac-browser.opac-has-topsearch .opac-topsearch-btn::before{
  content:"\1F50D";
  font-size:22px;
  line-height:1;
  color:#fff;
}

/* spinner (se vuoi vederlo) */
.opac-browser.opac-has-topsearch .opac-topsearch-spin{
  display:none !important;
}
.opac-browser.opac-has-topsearch .opac-topsearch-spin.on{
  display:inline-block !important;
  width:18px !important;
  height:18px !important;
  border-radius:50% !important;
  border:3px solid rgba(255,255,255,.35) !important;
  border-top-color:#fff !important;
  animation: opacTopSpin .8s linear infinite !important;
}
@keyframes opacTopSpin{ to { transform: rotate(360deg); } }

/* responsive: mantiene il “centrato” anche quando va a capo */
@media (max-width: 980px){
  .opac-browser.opac-has-topsearch .opac-topsearch{
    flex-wrap:wrap !important;
    justify-content:center !important;
  }
  .opac-browser.opac-has-topsearch .opac-topsearch-left{
    flex: 1 1 100% !important;
    min-width:0 !important;
  }
  .opac-browser.opac-has-topsearch .opac-topsearch-mid,
  .opac-browser.opac-has-topsearch .opac-topsearch-right{
    width:100% !important;
    justify-content:center !important;
  }
}

.opac-browser .opac-side-a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 800;
}
.opac-browser .opac-side-a:hover{
  opacity: .8;
}

.opac-loading{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.78);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 50;
}
.opac-loading.on{ display:flex; }

.opac-loading-box{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  font-weight:800;
}

.opac-loading-spin{
  width:22px;
  height:22px;
  border-radius:50%;
  border:3px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.65);
  animation: opacSpin 0.9s linear infinite;
}

@keyframes opacSpin{ to { transform: rotate(360deg); } }


/* ==========================
   LAZY SCROLL LISTS (Temi/Luoghi/Persone)
   ========================== */

/* Box Temi */
.opac-filter-body{
  max-height: 320px;
  overflow: auto;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 8px;
  background: #fff;
}

/* Box Luoghi / Persone */
.opac-filter-list{
  max-height: 260px;
  overflow: auto;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 8px;
  background: #fff;
}

/* Children dei topic (per lazy dentro il nodo aperto) */
.opac-topic-children{
  max-height: 220px;
  overflow: auto;
  margin-left: 14px;
  padding-left: 8px;
  border-left: 2px solid rgba(0,0,0,0.08);
}
/* wrapper di elSub + pills */
.opac-sub-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* container pills */
.opac-sub-pills{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* pill base */
.opac-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  line-height:1;
  border:1px solid rgba(0,0,0,0.08);
  background:#d99a1a; /* ocra */
  color:#111;
}

/* testo pill */
.opac-pill-text{
  white-space:nowrap;
}

/* X */
.opac-pill-x{
  width:18px;
  height:18px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-weight:900;
  line-height:18px;
  padding:0;
  background:rgba(0,0,0,0.15);
  color:#111;
}

/* varianti (se vuoi leggermente diverse) */
.opac-pill-temi{ background:#d99a1a; }
.opac-pill-luoghi{ background:#e3a62a; }
.opac-pill-persone{ background:#eab54a; }

.opac-pill-clear{
  background:transparent;
  border:2px solid #d99a1a;
  color:#d99a1a;
  cursor:pointer;
}


/* ============================================================
   OPAC THESAURUS — FIX “RETTANGOLINI” + RIGHE PULITE
   INCOLLA IN FONDO (override definitivo)
   ============================================================ */

/* i facet devono essere RIGHE, non pill */
.opac-browser .opac-facet-item,
.opac-browser .opac-suggest-item,
.opac-browser .opac-topic-row{
  display:flex !important;
  width:100% !important;
  box-sizing:border-box !important;

  /* kill “pill” */
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  /* kill spacing/theme */
  margin:0 !important;
  padding:6px 0 !important;

  font-weight:600 !important;
  font-size:13px !important;
  line-height:1.15 !important;
}

/* se il tema applica bordi SOLO al testo (span/a/strong) li azzeriamo */
.opac-browser .opac-facet-item *,
.opac-browser .opac-suggest-item *,
.opac-browser .opac-topic-row *{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  outline:0 !important;
}

/* separatore leggero (se lo vuoi: altrimenti metto border-bottom:0) */
.opac-browser .opac-facet-item,
.opac-browser .opac-suggest-item,
.opac-browser .opac-topic-row{
  border-bottom:1px solid rgba(0,0,0,.08) !important;
}

/* twisty (triangolino) più grande e “pulito” */
.opac-browser .opac-topic-row .tw{
  width:22px !important;
  min-width:22px !important;
  text-align:center !important;
  font-size:16px !important;
  font-weight:900 !important;
  opacity:.75 !important;
}

/* testo allineato e senza bold aggressivo */
.opac-browser .opac-topic-row .tx{
  flex:1 1 auto !important;
  font-weight:600 !important;
}

/* input ricerca (luoghi/persone) pulito */
.opac-browser #opac_qLuoghi,
.opac-browser #opac_qPersone{
  display:block !important;
  width:100% !important;
  height:34px !important;
  padding:0 10px !important;
  border:1px solid rgba(0,0,0,.14) !important;
  border-radius:10px !important;
  background:#fff !important;
  box-shadow:none !important;
}


/* ============================================================
   OPAC THESAURUS — NO BULLETS (pallini)
   ============================================================ */

/* se il tema usa UL/LI */
.opac-browser .opac-tree ul,
.opac-browser .opac-tree li,
.opac-browser .opac-filter-body ul,
.opac-browser .opac-filter-body li,
.opac-browser .opac-filter-list ul,
.opac-browser .opac-filter-list li{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* sicurezza: niente marker */
.opac-browser .opac-tree li::marker,
.opac-browser .opac-filter-body li::marker,
.opac-browser .opac-filter-list li::marker{
  content: "" !important;
}

/* nel caso siano div ma il tema ci appiccica pseudo "•" */
.opac-browser .opac-facet-item::before,
.opac-browser .opac-suggest-item::before,
.opac-browser .opac-topic-row::before{
  content: none !important;
}


/* ============================================================
   OPAC — RIGHT PANEL: NO ROUND (solo schede/box a destra)
   ============================================================ */

/* contenitori “scheda” a destra */
.opac-browser .opac-tree,
.opac-browser .opac-toolbar,
.opac-browser .opac-tree-body,
.opac-browser .opac-filter-body,
.opac-browser .opac-filter-list,
.opac-browser .opac-topic-children{
  border-radius: 0 !important;
}

/* input/bottoni dentro il pannello destro */
.opac-browser .opac-tree input,
.opac-browser .opac-tree button,
.opac-browser .opac-tree .opac-btn,
.opac-browser .opac-tree .opac-pill,
.opac-browser .opac-tree .opac-pill-x{
  border-radius: 0 !important;
}

/* se il tema WP ti mette radius su label/div interni */
.opac-browser .opac-tree .opac-facet-item,
.opac-browser .opac-tree .opac-suggest-item,
.opac-browser .opac-tree .opac-topic-row,
.opac-browser .opac-tree .opac-topic-node{
  border-radius: 0 !important;
}
.opac-card{ position: relative; }
 
 

/* Bottone add-to-cart */
.opac-buy-btn{
  position: absolute;
  right: 12px;
  bottom: 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 10px;          /* più piccolo */
  border-radius: 999px;       /* pill */
  background: #f39c12;        /* arancio */
  color: #111;

  font-size: 13px;
  line-height: 1;
  font-weight: 400;           /* NO bold */
  text-decoration: none;

  box-shadow: 0 4px 10px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.12);

  max-width: 65%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stato hover/focus solo estetico (non “scompare/compare”) */
.opac-buy-btn:hover,
.opac-buy-btn:focus{
  background: #f1a62a;
  text-decoration: none;
  outline: none;
}
.opac-browser .opac-card{ position: relative; }

.opac-browser .opac-buy-btn{
  position: absolute;
  right: 12px;
  bottom: 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 10px;
  border-radius: 999px;

  background: #f39c12;
  color: #111;

  font-size: 13px;
  line-height: 1;
  font-weight: 400;       /* no bold */
  text-decoration: none;

  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 3px 8px rgba(0,0,0,.16);

  max-width: 35%;         /* <-- come richiesto */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opac-browser .opac-buy-btn:hover,
.opac-browser .opac-buy-btn:focus{
  background: #f1a62a;
  text-decoration: none;
  outline: none;
}

/* Bottone "Aggiungi al carrello" (arancio + icona SVG) */
.opac-browser .opac-buy-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 10px;
  border-radius: 999px;

  background: #f39c12;
  color: #111;

  font-size: 12px;
  line-height: 1;
  font-weight: 500;           /* non bold pesante */
  text-decoration: none;

  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 3px 10px rgba(0,0,0,.12);

  max-width: 35%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* reset tema */
  outline: none;
}

/* Icona carrello (SVG inline via data URI) */
.opac-browser .opac-buy-btn::before{
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;

  /* SVG: carrello, stroke scuro */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E");
}

.opac-browser .opac-buy-btn:hover,
.opac-browser .opac-buy-btn:focus{
  background: #f1a62a;
  text-decoration: none;
}

/* Se è un <button> evita stile browser */
.opac-browser button.opac-buy-btn{
  cursor: pointer;
}

/* ============================================================
   OPAC CARD META: data a sinistra, carrello a destra
   ============================================================ */

.opac-browser .opac-card{
  position: relative;
}

.opac-browser .opac-card .cap{
  padding: 8px 0 0 0;
  margin: 0;
}

/* riga sotto il titolo */
.opac-browser .opac-card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 6px 0 0 0;
  min-height: 34px;
}

/* data foto */
.opac-browser .opac-card-date{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 500;
  color: rgba(0,0,0,.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* carrello NON più assoluto */
.opac-browser .opac-buy-btn{
  position: static !important;
  right: auto !important;
  bottom: auto !important;

  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;
  padding: 0 !important;
  border-radius: 999px;

  background: #f39c12;
  color: #111;

  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 3px 8px rgba(0,0,0,.16);

  max-width: none !important;
  min-width: 34px;
  overflow: hidden;
}

/* icona */
.opac-browser .opac-buy-btn::before{
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E");
}

/* niente testo visibile dentro il bottone */
.opac-browser .opac-buy-btn{
  font-size: 0 !important;
  line-height: 0 !important;
}

.opac-browser .opac-buy-btn:hover,
.opac-browser .opac-buy-btn:focus{
  background: #f1a62a;
  text-decoration: none;
  outline: none;
}

/* ============================================================
   FIX chiusura nodi thesaurus temi
   ============================================================ */

.opac-browser .opac-topic-children{
  display: none;
}

.opac-browser .opac-topic-node.open > .opac-topic-children{
  display: block;
}
 
.opac-browser .opac-q-temi{
  display:block;
  width:100%;
  height:34px;
  padding:0 10px;
  margin:0 0 8px 0;
  border:1px solid rgba(0,0,0,.14);
  border-radius:10px;
  background:#fff;
  box-sizing:border-box;
}

/* ============================================================
   OPAC THESAURUS — search Temi con stessa grafica
   ============================================================ */

.opac-browser .opac-filter-search{
  margin: 0 0 10px 0;
}

.opac-browser .opac-topics-search-input{
  display:block !important;
  width:100% !important;
  height:34px !important;
  padding:0 10px !important;
  border:1px solid rgba(0,0,0,.14) !important;
  border-radius:10px !important;
  background:#fff !important;
  box-shadow:none !important;
  margin:0 !important;
}

.opac-filter-sec input{
  display:block !important;
  width:100% !important;
  height:34px !important;
  padding:0 10px !important;
  border:1px solid rgba(0,0,0,.14) !important;
  border-radius:10px !important;
  background:#fff !important;
  box-shadow:none !important;
  margin:0 !important;
}

.opac-browser .opac-topics-search-results,
.opac-browser .opac-topics-search-results ul,
.opac-browser .opac-topics-search-results li{
  list-style: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
}

.opac-browser .opac-topics-search-results li::marker{
  content: "" !important;
}


/* wrapper input + bottone */
.opac-filter-search{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px 0;
}

/* input dei 3 filtri */
.opac-filter-search input,
.opac-topics-search-input,
#opac_qLuoghi,
#opac_qPersone{
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #cfd6dd;
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.2;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.opac-filter-search input:focus,
.opac-topics-search-input:focus,
#opac_qLuoghi:focus,
#opac_qPersone:focus{
  outline: none;
  border-color: #8aa4c1;
  box-shadow: 0 0 0 3px rgba(60, 110, 180, 0.12);
  background: #fff;
}

/* bottone Cerca: vale per tutti e 3 */
.opac-filter-search-btn{
  appearance: none;
  -webkit-appearance: none;
  min-width: 86px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid #1f2d3d;
  border-radius: 10px;
  background: linear-gradient(180deg, #2f4358 0%, #1f2d3d 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  transition:
    transform .12s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.opac-filter-search-btn:hover{
  background: linear-gradient(180deg, #3a526b 0%, #26384d 100%);
  border-color: #26384d;
  box-shadow: 0 4px 12px rgba(0,0,0,0.14);
}

.opac-filter-search-btn:active{
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.opac-filter-search-btn:focus{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(60, 110, 180, 0.16),
    0 2px 8px rgba(0,0,0,0.10);
}

/* opzionale: piena larghezza del campo, bottone compatto */
.opac-filter-search > input,
.opac-filter-search > .opac-topics-search-input{
  flex: 1 1 auto;
}

.opac-filter-search > .opac-filter-search-btn{
  flex: 0 0 auto;
}

.opac-browser .opac-topics-search-results li::before{
  content: none !important;
}
.opac-section-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0 8px 0;
  padding:0;
  font-size:14px;
  font-weight:800;
  letter-spacing:.02em;
  color:#1f2d3d;
  text-transform:none;
}

.opac-section-title-icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#22364d;
  flex:0 0 18px;
}

.opac-section-title-icon svg{
  width:18px;
  height:18px;
  display:block;
}

.opac-section-title-text{
  line-height:1;
}

.opac-section-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:14px 0 8px 0;
  padding:0;
  color:#22364d;
  font-size:14px;
  font-weight:800;
  line-height:1.2;
}

.opac-section-title-icon{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#22364d;
  flex:0 0 16px;
}

.opac-section-title-icon svg{
  display:block;
  width:24px;
  height:24px;
}

.opac-section-title-text{
  display:inline-block;
}
/* ==========================
   Ricerca sulla mappa
   ========================== */
.opac-map-open{
  border:0;
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
  background:#22364d;
  color:#fff;
  white-space:nowrap;
}

.opac-map-open:hover{
  filter:brightness(1.05);
}

.opac-map-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
}

.opac-map-modal.is-open{
  display:block;
}

.opac-map-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.58);
}

.opac-map-modal-panel{
  position:absolute;
  left:50%;
  top:50%;
  width:min(1180px, calc(100vw - 34px));
  height:min(760px, calc(100vh - 34px));
  transform:translate(-50%, -50%);
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 55px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
}

.opac-map-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 18px;
  background:#f6c800;
  color:#22364d;
}

.opac-map-modal-title{
  font-size:18px;
  font-weight:900;
}

.opac-map-close{
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.85);
  color:#22364d;
  font-size:28px;
  line-height:32px;
  cursor:pointer;
}

.opac-map-modal-info{
  padding:9px 18px;
  font-size:13px;
  color:#4b5563;
  border-bottom:1px solid #e5e7eb;
}

.opac-map-canvas{
  flex:1 1 auto;
  min-height:420px;
}

.opac-map-info-window{
  min-width:220px;
  max-width:300px;
}

.opac-map-info-window-title{
  font-weight:900;
  margin:0 0 5px 0;
  color:#22364d;
}

.opac-map-info-window-count{
  font-size:13px;
  margin:0 0 10px 0;
}

.opac-map-show-results{
  border:0;
  border-radius:999px;
  padding:8px 12px;
  background:#22364d;
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

body.opac-map-lock{
  overflow:hidden;
}

@media (max-width: 760px){
  .opac-map-open{
    width:100%;
  }

  .opac-map-modal-panel{
    width:100vw;
    height:100vh;
    border-radius:0;
  }
}

/* ============================================================
   FIX: titoli schede gallery su mobile / didascalie lunghe
   - evita taglio laterale del testo
   - consente il ritorno a capo reale
   ============================================================ */
.opac-browser .opac-card .cap{
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 620px){
  .opac-browser.layout-grid .opac-card .cap,
  .opac-browser.layout-masonry .opac-card .cap{
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 0 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .opac-browser .opac-card,
  .opac-browser .opac-media,
  .opac-browser .opac-card img{
    max-width: 100%;
  }
}

/* ============================================================
   FIX MOBILE: card gallery servizio che sfonda/clippa
   - il problema non è solo la didascalia: è la card/wrapper che
     resta più larga del viewport e viene tagliata da overflow hidden
   ============================================================ */
@media (max-width: 620px){
  .opac-browser.opac-fullwidth{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .opac-browser .opac-main{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .opac-browser .opac-gallery,
  .opac-browser .opac-grid,
  .opac-browser .opac-card,
  .opac-browser .opac-media{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .opac-browser.layout-masonry .opac-grid{
    column-count: 1 !important;
    column-width: auto !important;
    column-gap: 0 !important;
  }

  .opac-browser.layout-masonry .opac-card{
    display: block !important;
    overflow: visible !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .opac-browser.layout-masonry .opac-media{
    overflow: hidden !important;
  }

  .opac-browser .opac-card img{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .opac-browser .opac-card .cap{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .opac-browser .opac-card-meta{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}