/* Ohoskin - Galleria prodotto v2 (snippet WPCode 659, HTML nella testata).
   Il markup viene dallo shortcode [custom_product_gallery] dello snippet 657.
   Il tema dà ai <button> bordo, angoli, padding e sfondo propri: ogni pulsante della
   galleria (.ohg-b) parte da zero e le regole usano !important dove il tema interferisce.
   Versione precedente: docs/procedure/snippets/backup-galleria-2026-11-10/. */
/* la v1 (se ancora attiva) dà a .custom-gallery display:flex, gap e padding propri */
.custom-gallery.ohg { display: block !important; gap: 0 !important; flex-direction: initial !important; align-items: initial !important; }
.ohg { --ohg-ease: cubic-bezier(.22, 1, .36, 1); --ohg-stage: #f6f6f6; --ohg-r: 16px; --ohg-gap: 12px; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.ohg *, .ohg-visore * { box-sizing: border-box; }
button.ohg-b { all: unset !important; box-sizing: border-box !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; }
button.ohg-b:focus-visible { outline: 2px solid #566c5e !important; outline-offset: 3px !important; }
.ohg img { border-radius: 0 !important; box-shadow: none !important; }

/* Mosaico */
.ohg-wrap { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; column-gap: var(--ohg-gap); }
.ohg-mosaico { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: 1fr 1fr; gap: var(--ohg-gap); height: max(150px, min(640px, calc(100svh - var(--ohg-top, 160px) - 66px))); }
.ohg-princ { position: relative; grid-column: 1; grid-row: 1 / 3; min-height: 0; }
.ohg-mosaico button.ohg-b.ohg-grande, .ohg-mosaico button.ohg-b.ohg-tile { position: relative !important; display: block !important; overflow: hidden !important; border-radius: var(--ohg-r) !important; background: var(--ohg-stage) !important; min-height: 0 !important; }
.ohg-mosaico button.ohg-b.ohg-grande { position: absolute !important; inset: 0 !important; cursor: zoom-in !important; touch-action: pan-y pinch-zoom !important; }
.ohg-mosaico button.ohg-b.ohg-tile[hidden] { display: none !important; }
.ohg-mosaico img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform .8s var(--ohg-ease), opacity .4s var(--ohg-ease); }
.ohg-mosaico picture { display: contents; }
.ohg-mosaico button.ohg-b:hover img { transform: scale(1.03); }
.ohg-mosaico img.ohg-sfuma { opacity: 0; }
.ohg-mosaico img.ohg-sfuma.on { opacity: 1; }
.ohg-mosaico img.ohg-iride { animation: ohg-iride 1.1s var(--ohg-ease) both; }
@keyframes ohg-iride { from { clip-path: circle(0% at var(--cx) var(--cy)); } to { clip-path: circle(300% at var(--cx) var(--cy)); } }
.ohg-anello { position: absolute; left: var(--cx); top: var(--cy); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 1.5px solid var(--colore); pointer-events: none; opacity: 0; z-index: 2; }
.ohg-anello.va { animation: ohg-anello 1.1s var(--ohg-ease) both; }
@keyframes ohg-anello { from { transform: scale(1); opacity: 1; } to { transform: scale(260); opacity: 0; } }
.ohg-mosaico button.ohg-tile::after { content: ""; position: absolute; inset: 0; border-radius: var(--ohg-r); box-shadow: inset 0 0 0 3px #3d4d43; opacity: 0; transition: opacity .25s; pointer-events: none; }
.ohg-mosaico button.ohg-tile[aria-current="true"]::after { opacity: 1; }
/* casella vuota nell'ultima pagina: resta al suo posto, così il mosaico non cambia forma */
.ohg-mosaico button.ohg-b.ohg-tile.ohg-vuota { cursor: default !important; pointer-events: none !important; }
.ohg-mosaico button.ohg-tile.ohg-vuota::after { display: none; }
/* con una sola pagina e meno di 4 miniature: riempiono la colonna */
.ohg-mosaico[data-n="1"] .ohg-tile:not([hidden]) { grid-column: 2 / 4; grid-row: 1 / 3; }
.ohg-mosaico[data-n="2"] .ohg-tile:not([hidden]) { grid-column: 2 / 4; }
.ohg-mosaico[data-n="3"] .ohg-tile:not([hidden]):first-of-type { grid-column: 2 / 4; }

/* Frecce e contatore sulla foto grande */
button.ohg-b.ohg-p-btn { cursor: pointer !important; position: absolute !important; top: 50% !important; translate: 0 -50% !important; z-index: 3 !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; background: rgba(255,255,255,.94) !important; color: #111 !important; box-shadow: 0 2px 10px rgba(17,17,17,.12) !important; display: grid !important; place-items: center !important; opacity: 0 !important; transition: opacity .25s, transform .25s var(--ohg-ease) !important; }
button.ohg-b.ohg-p-btn svg, .ohg-pagine svg, .ohg-v-btn svg { width: 18px; height: 18px; display: block; }
button.ohg-b.ohg-p-prec { left: 14px !important; }
button.ohg-b.ohg-p-succ { right: 14px !important; }
.ohg-princ:hover button.ohg-b.ohg-p-btn, button.ohg-b.ohg-p-btn:focus-visible { opacity: 1 !important; }
button.ohg-b.ohg-p-btn:hover { transform: scale(1.06) !important; }
.ohg-p-conta { position: absolute; right: 14px; bottom: 12px; z-index: 3; font: 13px/1 Raleway, sans-serif; color: #111; background: rgba(255,255,255,.92); padding: 6px 10px; border-radius: 999px; pointer-events: none; }
@media (hover: none) { button.ohg-b.ohg-p-btn { opacity: 1 !important; width: 40px !important; height: 40px !important; } }

/* Pulsanti di pagina delle miniature */
.ohg-pagine { display: flex; gap: 8px; justify-content: flex-end; z-index: 3; }
.ohg-pagine[hidden] { display: none !important; }
.ohg-pagine button.ohg-b { width: 44px !important; height: 44px !important; border-radius: 8px !important; background: #fff !important; color: #111 !important; box-shadow: inset 0 0 0 1px #111 !important; display: grid !important; place-items: center !important; transition: background .2s, color .2s, opacity .2s !important; }
.ohg-pagine button.ohg-b:disabled { opacity: .3 !important; cursor: default !important; box-shadow: inset 0 0 0 1px #9aa09c !important; }
@media (hover: hover) { .ohg-pagine button.ohg-b:hover:not(:disabled) { background: #111 !important; color: #fff !important; } }

/* Colori */
.ohg-colori { grid-column: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 0 2px 0 4px; min-height: 44px; }
.ohg-nome { font: 13px/1.3 Raleway, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #5d625f; margin: 0 !important; }
.ohg-nome b { display: block; font-weight: 600; font-size: 16px; letter-spacing: 0; text-transform: none; color: #111; margin-top: 3px; }
.ohg-campioni { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.ohg-campioni button.ohg-b { position: relative !important; display: block !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; background: transparent !important; }
.ohg-campioni button.ohg-b span { display: block; position: absolute; inset: 8px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); transition: inset .3s var(--ohg-ease); }
.ohg-campioni button.ohg-b span.ohg-foto { background: var(--foto) center / cover, var(--c); }
.ohg-campioni button.ohg-b::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid #111; opacity: 0; transform: scale(.85); transition: opacity .3s, transform .3s var(--ohg-ease); }
.ohg-campioni button.ohg-b[aria-pressed="true"]::after { opacity: 1; transform: scale(1); }
.ohg-campioni button.ohg-b[aria-pressed="true"] span { inset: 9px; }
@media (hover: hover) { .ohg-campioni button.ohg-b:hover::after { opacity: .3; transform: scale(1); } }
.ohg-nascosto { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
.ohg-colori-form { margin: 0 0 16px; }
.ohg-colori-form .ohg-nome { margin: 0 0 4px !important; }
.ohg-colori-form .ohg-nome b { display: inline; font-size: 15px; margin: 0 0 0 6px; }
.ohg-colori-form .ohg-campioni { margin-left: -6px; }
form.variations_form.ohg-con-colori table.variations, form.variations_form.ohg-con-colori table.variations tr, form.variations_form.ohg-con-colori table.variations td, form.variations_form.ohg-con-colori table.variations th { background: transparent !important; border: 0 !important; padding: 0 !important; }

/* Visore a tutto schermo */
dialog.ohg-visore { --ohg-ease: cubic-bezier(.22, 1, .36, 1); width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; overflow: hidden; }
dialog.ohg-visore::backdrop { background: transparent; }
.ohg-v-palco { position: absolute; inset: 64px 96px 104px 96px; overflow: hidden; touch-action: none; }
.ohg-v-palco.trascina { overflow: visible; }
.ohg-v-palco img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; border-radius: 0 !important; box-shadow: none !important; transition: transform .45s var(--ohg-ease); cursor: zoom-in; }
.ohg-v-palco.zoom img { transform: scale(2.4); cursor: zoom-out; }
.ohg-v-conta { position: absolute; top: 22px; left: 24px; font: 15px/20px Raleway, sans-serif; color: #111; letter-spacing: .04em; }
button.ohg-b.ohg-v-btn { position: absolute !important; z-index: 2 !important; width: 48px !important; height: 48px !important; border-radius: 50% !important; background: #fff !important; color: #111 !important; box-shadow: 0 0 0 1px rgba(17,17,17,.14), 0 4px 14px rgba(17,17,17,.08) !important; display: grid !important; place-items: center !important; transition: transform .25s var(--ohg-ease), box-shadow .25s !important; }
button.ohg-b.ohg-v-btn:hover { transform: scale(1.06) !important; }
button.ohg-b.ohg-v-chiudi { top: 8px !important; right: 16px !important; left: auto !important; }
button.ohg-b.ohg-v-prec, button.ohg-b.ohg-v-succ { top: calc(64px + (100% - 168px) / 2 - 24px) !important; }
button.ohg-b.ohg-v-prec { left: 24px !important; right: auto !important; }
button.ohg-b.ohg-v-succ { right: 24px !important; left: auto !important; }
.ohg-v-strip { position: absolute; left: 0; right: 0; bottom: 0; height: 104px; display: flex; gap: 10px; justify-content: center; align-items: center; padding: 0 16px; overflow-x: auto; }
.ohg-v-strip button.ohg-b { position: relative !important; flex: 0 0 64px !important; width: 64px !important; height: 64px !important; border-radius: 8px !important; overflow: hidden !important; background: #f6f6f6 !important; opacity: .5 !important; transition: opacity .25s !important; }
.ohg-v-strip button.ohg-b::after { content: ""; position: absolute; inset: 0; border-radius: 8px; box-shadow: inset 0 0 0 2px #111; opacity: 0; transition: opacity .25s; }
.ohg-v-strip button.ohg-b:hover, .ohg-v-strip button.ohg-b[aria-current="true"] { opacity: 1 !important; }
.ohg-v-strip button.ohg-b[aria-current="true"]::after { opacity: 1; }
.ohg-v-strip img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 !important; }

/* Desktop e telefoni in orizzontale: pulsanti di pagina sotto l'ultima miniatura a destra */
@media not ((max-width: 560px) or ((orientation: portrait) and (max-width: 1100px))) {
  .ohg-pagine { position: absolute; right: 0; top: calc(100% + 12px); }
}
/* Telefoni e tablet in verticale: tutto fino ai colori dentro il primo schermo */
@media (max-width: 560px), (orientation: portrait) and (max-width: 1100px) {
  .ohg { --ohg-gap: 6px; --ohg-r: 12px; padding: 0 8px; }
  .ohg-wrap { display: flex; flex-direction: column; height: max(300px, calc(100svh - var(--ohg-top, 90px) - 8px)); }
  .ohg.ohg-una .ohg-wrap { height: auto; }
  .ohg.ohg-una .ohg-mosaico { height: auto; aspect-ratio: 1; flex: none; }
  .ohg-mosaico { flex: 1 1 auto; min-height: 0; height: auto; grid-template-columns: repeat(var(--ohg-cols, 2), 1fr); grid-template-rows: minmax(0, 1fr) clamp(56px, 16svh, 140px); }
  .ohg-princ { grid-column: 1 / -1; grid-row: 1; }
  .ohg-mosaico[data-n] .ohg-tile:not([hidden]) { grid-column: auto; grid-row: 2; }
  .ohg-colori { flex: 0 0 auto; margin-top: 8px; padding: 0; }
  .ohg-nome b { font-size: 15px; }
  .ohg-campioni { gap: 0; }
  .ohg-pagine { position: absolute; right: 6px; bottom: 6px; gap: 6px; }
  .ohg-pagine button.ohg-b { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: rgba(255,255,255,.94) !important; box-shadow: 0 2px 8px rgba(17,17,17,.15) !important; }
  .ohg-pagine button.ohg-b:disabled { opacity: .45 !important; box-shadow: 0 2px 8px rgba(17,17,17,.1) !important; }
  .ohg-v-palco { inset: 64px 0 96px 0; }
  .ohg-v-strip { height: 96px; justify-content: flex-start; }
  .ohg-v-strip button.ohg-b { flex-basis: 56px !important; width: 56px !important; height: 56px !important; }
  button.ohg-b.ohg-v-prec, button.ohg-b.ohg-v-succ { display: none !important; }
}
/* Schermi bassi (telefono in orizzontale): più spazio alla foto nel visore */
@media (max-height: 500px) {
  .ohg-v-palco { inset: 8px 72px 64px 72px !important; }
  .ohg-v-strip { height: 64px; }
  .ohg-v-strip button.ohg-b { flex-basis: 44px !important; width: 44px !important; height: 44px !important; }
  .ohg-v-conta { top: 14px; }
}
/* Prodotto con una sola foto */
.ohg.ohg-una .ohg-mosaico { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ohg.ohg-una .ohg-princ { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) { .ohg-mosaico img.ohg-iride, .ohg-anello.va { animation: none; } .ohg-mosaico img { transition: none; } }

/* ---------- Colore della barra e della miniatura selezionata (sottobosco) ----------
   --ohg-g: verde; --ohg-t: trasparenza del velo; --ohg-l: luminosità della foto dietro
   la barra (la scurisce); --ohg-a: verde denso per i browser senza effetto vetro.
   Contrasto del nome su una foto bianca (caso peggiore): 6,4:1 (AA). */
.ohg { --ohg-g: 36, 48, 42; --ohg-t: .40; --ohg-l: .50; --ohg-a: .80; }

/* miniatura selezionata: bordo sottile nello stesso verde */
.ohg-mosaico button.ohg-tile::after { box-shadow: inset 0 0 0 2px rgb(var(--ohg-g)) !important; }

/* ---------- Barra con produttore e nome in fondo alla foto grande ----------
   Alta quanto lo spazio sotto il contatore + contatore + lo stesso spazio sopra (49 px). */
.ohg-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 49px; z-index: 2; pointer-events: none;
  display: flex; align-items: center; padding: 0 96px 0 16px; border-radius: 0 0 var(--ohg-r) var(--ohg-r);
  color: #fff; font: 13px/1.25 Raleway, sans-serif; letter-spacing: .01em; background: rgba(var(--ohg-g), var(--ohg-a)); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ohg-barra { background: rgba(var(--ohg-g), var(--ohg-t));
    -webkit-backdrop-filter: blur(14px) saturate(1.2) brightness(var(--ohg-l)); backdrop-filter: blur(14px) saturate(1.2) brightness(var(--ohg-l)); }
}
.ohg-barra .ohg-barra-testo { overflow: hidden; min-width: 0; }
.ohg-barra .m { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ohg-barra .t { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* contatore dentro la barra: velo scuro, contrasto oltre 7:1 */
.ohg-princ .ohg-p-conta { background: rgba(0, 0, 0, .18) !important; color: #fff !important; }

/* ---------- Marchio Ohoskin impresso su fondo salvia: è lo sfondo di ogni casella e della foto grande ----------
   Le foto stanno sopra: si vede quando una casella non ha foto, mentre una foto scorre via o si carica.
   Sul desktop la 3ª e la 4ª casella vuote diventano un'unica casella larga. */
.ohg-mosaico button.ohg-b.ohg-tile, .ohg-mosaico button.ohg-b.ohg-grande { background: #e1e6e3 !important; }
.ohg-mosaico button.ohg-b img { z-index: 1; }
.ohg-sp { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* centrato in assoluto: alto il 53% della casella (al massimo 220 px), uguale in ogni casella */
.ohg-sp svg { position: absolute; top: 50%; left: 50%; height: 53%; max-height: 220px; width: auto; aspect-ratio: 1; transform: translate(-50%, -50%); overflow: visible; }
.ohg-sp-segno { stroke: #d4dbd7; }
/* Casella larga: uno strato sopra la 3ª e la 4ª casella quando sono vuote (sul desktop).
   Le caselle sotto non cambiano mai forma: lo strato compare con un'animazione propria. */
.ohg-unione { position: absolute; right: 0; bottom: 0; width: 50%; height: calc(50% - var(--ohg-gap) / 2); z-index: 3; pointer-events: none; border-radius: var(--ohg-r); background: #e1e6e3; overflow: hidden; visibility: hidden; transition: background-color 380ms cubic-bezier(.22, 1, .36, 1); }
.ohg-unione.on { visibility: visible; }
.ohg-unione-ponte { position: absolute; top: 0; bottom: 0; left: 50%; width: calc(var(--ohg-gap) + 2 * var(--ohg-r)); background: #e1e6e3; transform: translateX(-50%) scaleY(0); transition: transform 380ms cubic-bezier(.22, 1, .36, 1); }
.ohg-unione.fusione-ponte { background-color: transparent; }
.ohg-unione.fusione-ponte .ohg-unione-ponte { transform: translateX(-50%) scaleY(1); }
.ohg-unione.fusione-ponte .ohg-sp { opacity: 0; transition: opacity 380ms cubic-bezier(.22, 1, .36, 1); }
.ohg-unione.fusione-ponte.fusione-piena { background-color: #e1e6e3; }
.ohg-unione.fusione-ponte.fusione-piena .ohg-sp { opacity: 1; }
@media (max-width: 560px), (orientation: portrait) and (max-width: 1100px) { .ohg-unione { display: none; } }
/* pulsante pausa del cambio pagina automatico (accanto ai pulsanti di pagina) */
.ohg-pagine button.ohg-b.ohg-pg-pausa svg { width: 16px; height: 16px; }
/* il bordo della miniatura selezionata sta sopra la foto */
.ohg-mosaico button.ohg-tile::after { z-index: 2; }

/* ---------- Ingresso delle foto al primo caricamento ----------
   Le foto partono nascoste (stesso taglio iniziale del cambio pagina, da sinistra) finché lo script
   le fa entrare e toglie la classe ohg-ingresso. Se lo script non partisse, compaiono dopo 3 s. */
@media (prefers-reduced-motion: no-preference) {
  .ohg.ohg-ingresso .ohg-mosaico .ohg-tile img { clip-path: polygon(-30% 0, 0 0, -30% 100%, -30% 100%); transform: translateX(-10%); animation: ohg-svela 0s linear 3s forwards; }
}
@keyframes ohg-svela { to { clip-path: none; transform: none; } }

/* Testo alternativo invisibile mentre la foto si carica (sopra il segnaposto); resta per screen reader */
.ohg-mosaico img, dialog.ohg-visore img { color: transparent; }