.site-content * {
        font-family: "Nunito Sans";
      }
      #distanziatore{
        min-height: 150px;
      }
      #item-container {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        width: 100%;
        margin: 0 auto;
      }
      .zoom-overlay {
        background-color: #faf5e5;
      }
      #image-container {
        flex: 1 1 100%;
        padding-right: 0;
        text-align: center;
      }
      table * {
        border: 0;
      }
      #image-container img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
      }

      #info-container {
        flex: 1 1 100%;
        text-align: left;
        padding: 5px;
      }

      #info-container table {
        width: 100%;
        border-collapse: collapse;
        font-size: 18px;
      }

      #info-container th,
      #info-container td {
        padding: 0px;
      }
      table,
      td,
      th {
        border: 0 !important;
        vertical-align: top;
      }
      #info-container th {
        text-align: left;
        white-space: nowrap;
        width: 150px;
        max-width: max-content;
        overflow: hidden;
      }

      #info-container td {
        text-align: left;
      }

      #description {
        width: 100%;
        text-align: justify;
        margin-top: 20px;
        line-height: 1.6;
        font-size: 16px;
      }

      #item-container2 button {
        display: block;
        margin: 20px auto;
        padding: 10px 20px;
        background-color: transparent !important;
        border: 0;
        color: #bf1818 !important;
        font-weight: 700;
        font-size: 18px;
      }

      #description * {
        font-size: 16px !important;
      }
      .ButtonHover:hover {
        cursor: pointer;
      }

      @media (min-width: 769px) {
        #item-container {
          width: 80%;
        }

        #image-container {
          flex: 1 1 40%;
          padding-right: 20px;
        }

        #info-container {
          flex: 1 1 60%;
        }

        #info-container table {
          width: 100%;
        }

        #description {
          margin-top: 20px;
        }
      }
            /* === Stile scheda (modello scheda corale) === */
      .sf-back { display: inline-block; margin: 0 0 10px 10%; padding: 10px 20px; border-radius: 8px; background: #dca54a; color: #000 !important; font-weight: 500; font-size: 16px; text-decoration: none !important; transition: filter .2s; }
      .sf-back:hover { filter: brightness(.92); }
      .sf-back { position: sticky; top: 20px; z-index: 20; display: table; box-shadow: 0 2px 8px rgba(0,0,0,.15); }

      .sf-inv { text-align: center; margin: 0 0 10px; color: #7a6445; letter-spacing: .05em; text-transform: uppercase; font-size: 13px; font-weight: 600; }
      #info-container table a { text-decoration: none; border-bottom: 1px dotted #b08a3e; }
      #info-container table a::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 5px; vertical-align: -1px; background: #b08a3e;
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><circle cx='10' cy='10' r='7'/><path d='M21 21l-6-6'/></svg>") center/contain no-repeat;
                mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><circle cx='10' cy='10' r='7'/><path d='M21 21l-6-6'/></svg>") center/contain no-repeat; }
      .sf-title { font-style: italic; margin: 0 0 16px; }
      #info-container table { border: 0 !important; font-size: 16px; }
      #info-container th, #info-container td { border: 0 !important; border-bottom: 1px solid rgba(112,66,20,.15) !important; padding: 10px 0 !important; }
      #info-container tr:first-child th, #info-container tr:first-child td { border-top: 1px solid rgba(112,66,20,.15) !important; }
      #info-container th { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #7a6445; padding-right: 20px !important; }
      #info-container td { color: #3a2a14; }
      #description h3, .sf-section h4 { font-size: 18px !important; font-style: normal; margin: 28px 0 8px !important; padding-bottom: 6px; border-bottom: 2px solid rgba(220,165,74,.4); }
      #description hr { display: none; }
      /* === Cornice immagine: pannello crema + zoom === */
      #image-container { position: relative; background: #efe4c8; border-radius: 10px; padding: 18px !important; box-sizing: border-box; overflow: hidden; align-self: flex-start; }
      #image-container img { border-radius: 3px; box-shadow: 0 0 0 1px rgba(112,66,20,.25); transition: transform .4s ease; cursor: zoom-in; }
      #image-container:hover img { transform: scale(1.04); }
      @media (min-width: 769px) { #image-container { margin-right: 24px; } }
      /* === Fotografie dell'opera === */
      #so-foto-box { width: 100%; }
      .so-n { font-weight: 400; color: #7a6445; }
      .so-foto { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
      .so-f { display: block; background: #fff; border: 1px solid rgba(112,66,20,.15); border-radius: 10px; overflow: hidden; text-decoration: none !important; color: #3a2a14 !important; transition: box-shadow .2s; }
      .so-f:hover { box-shadow: 0 0 0 1px #dca54a; }
      .so-f img { display: block; width: 100%; height: 130px; object-fit: cover; }
      .so-f span { display: block; padding: 6px 8px; font-size: 13px; font-style: italic; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .so-altre { display: block; margin: 14px auto 0; border-radius: 8px; }
      .so-altre[hidden] { display: none !important; }
      /* Immagine ferma a sinistra, testo al centro, fotografie ferme a destra */
      @media (min-width: 500px) {
        #item-container { display: grid !important; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr) 300px;
          grid-template-areas: "img info side" "img desc side"; column-gap: 24px; align-items: start;
          width: 100% !important; max-width: 1700px; padding: 10px 24px !important; box-sizing: border-box; }
        #image-container { grid-area: img; width: auto !important; margin-right: 0 !important;
          position: sticky; top: 100px; }
        #image-container img { max-height: calc(100vh - 300px) !important; width: auto; }
        #info-container { grid-area: info; width: auto !important; }
        #description { grid-area: desc; width: auto !important; margin-top: 0 !important; }
        #item-container:not(.sf-orizz) #image-container img { max-height: calc(100vh - 300px) !important; object-fit: contain; }
        .sf-col { grid-area: img; position: sticky; top: 20px; align-self: start; } .sf-col #image-container { position: static !important; } .sf-col .sf-back { margin: 0 0 12px !important; } #item-container.sf-orizz .sf-col { position: static; }
        #so-foto-box { grid-area: side; position: sticky; top: 100px; max-height: calc(100vh - 200px); overflow-y: auto;
          background: rgba(112,66,20,.05); border-left: 1px solid rgba(112,66,20,.18); border-radius: 10px; padding: 18px; box-sizing: border-box; }
        #so-foto-box .sf-section h4 { margin-top: 0 !important; }
        /* nessuna fotografia: immagine ferma a sinistra e testo a destra */
        #item-container:not(.sf-side) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
          grid-template-areas: "img info" "img desc"; }
        #item-container:not(.sf-side) #so-foto-box { display: none; }
        .sf-back { margin-left: 24px !important; }
        /* opera orizzontale: immagine in alto sulle prime due colonne, non ferma */
        #item-container.sf-orizz { grid-template-areas: "img img side" "info info side" "desc desc side"; }
        #item-container.sf-orizz:not(.sf-side) { grid-template-areas: "img img" "info info" "desc desc"; }
        #item-container.sf-orizz #image-container { position: static; }
        #item-container.sf-orizz #image-container img { max-height: 60vh !important; }
      }

/* === Responsive tablet (500–1024 px): 2 colonne, foto dell'opera sotto — 2026-10 === */
@media (min-width: 500px) and (max-width: 1024px) {
  #item-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    grid-template-areas: "img info" "desc desc" "side side";
    padding: 10px 20px !important;
  }
  #image-container { position: static; }
  #image-container img { max-height: 60vh !important; }
}

/* === Header mobile di Astra (sotto 921 px): meno spazio sopra il pulsante "Torna…" — 2026-10 === */
@media (max-width: 921px) {
  #distanziatore { min-height: 20px !important; }
}

@media (min-width: 500px) and (max-width: 1024px) { .sf-col { position: static; } }
.sf-col .sf-back { position: static; }