/* IPDO Collezioni Shop v1.10.1 — fascia card categoria mobile */

/* impedisce il loop dello scroll anchoring quando la barra cambia altezza */
html:has(.ipdo-colz){ overflow-anchor:none }

/* overflow:hidden — la fascia si accorcia in altezza mentre le card scalano:
   ritaglia lo spazio che il riquadro dello scorritore lascia vuoto sotto.
   E' sicuro perche' la scala e' sempre <= 1 (il contenuto non deborda mai). */
.ipdo-colz{ display:none; position:relative; z-index:80; background:#fff; overflow:hidden; transition:box-shadow .55s cubic-bezier(.25,.1,.25,1); margin:0 -15px 14px; width:auto; min-width:0; flex:none }
/* aggancio in alto via JS (position:fixed): position:sticky non funziona qui
   perché i contenitori del tema hanno overflow impostato */
.ipdo-colz.ipdo-fixed{ position:fixed; left:0; right:0; top:var(--ipdo-top,0px); margin:0 }
.ipdo-colz-spacer{ display:none }
.ipdo-colz-spacer.ipdo-on{ display:block }
/* durante il cambio categoria via fetch: i vecchi prodotti restano visibili, attenuati */
.ipdo-caricamento > :not(.ipdo-colz):not(.ipdo-colz-spacer){ opacity:.45; transition:opacity .2s ease }
@media (max-width:767px){ .ipdo-colz{ display:block } }
.ipdo-colz.ipdo-colz-desktop{ display:block }
.ipdo-colz.ipdo-fixed{ box-shadow:0 6px 16px rgba(40,28,8,.18) }

.ipdo-colz-title{ display:flex; justify-content:space-between; align-items:baseline; padding:12px 16px 8px }
.ipdo-colz-title h3{ font-size:17px; font-weight:700; color:#212121; margin:0; line-height:1.2 }

/* Lo SCORRITORE non cambia mai: mantiene dimensione, ritaglio e scorrimento
   nativo. NIENTE scroll-snap (il browser ri-aggancerebbe da solo dopo un cambio
   di layout) e overflow-anchor:none (lo scroll anchoring riaggiusterebbe
   scrollLeft dopo le nostre scritture). */
.ipdo-colz-scroll{ overflow-x:auto; overflow-anchor:none; scrollbar-width:none; -webkit-overflow-scrolling:touch }
.ipdo-colz-scroll::-webkit-scrollbar{ display:none }

/* Il LAYOUT delle card NON cambia MAI: restano alla misura piena per
   sempre. Tutto il rimpicciolimento e' un transform sul NASTRO, fatto dalla GPU.
   Perche' (misurato il 23/08, due tracce reali dal telefono):
   - ricalcolare le larghezze a ogni frame faceva sforare i 20ms al 20% dei
     fotogrammi, con punte di 35ms — era la "fluidita' pessima";
   - riscrivere lo scorrimento per ricentrare la selezionata costringeva la
     fascia a 525px di corsa ogni 49px di dito (amplificazione 11x) — era la
     "spazzata sinistra-destra";
   - cambiare il layout a fine corsa faceva ri-disegnare 45 immagini — era il
     "ricaricamento del nastro";
   - e ingrandire un layout mini oltre il proprio riquadro tagliava le card
     mentre si risaliva. Con la scala sempre <= 1 non puo' piu' accadere.
   Il JS imposta transform, transform-origin e margin-right; il margine destro
   negativo accorcia la corsa di scorrimento in proporzione alla scala, cosi'
   a fascia ridotta il dito muove comunque le card 1:1. */
/* ⚠️ Queste tre misure — larghezza card, gap, padding orizzontale del nastro —
   sono lo SPECCHIO delle costanti CARD_W, GAP e PAD in collezioni.js: il JS
   calcola con l'aritmetica dove sta ogni card senza leggere il layout, quindi
   se si cambiano qui vanno cambiate anche li', altrimenti la centratura sbaglia. */
.ipdo-colz-track{ display:flex; gap:12px; padding:8px 16px 12px; width:max-content; transform-origin:0 0; will-change:transform }
.ipdo-colz-track>*{ flex:none }

/* 24/08: ridotta SOLO la larghezza a 3/4 (216 -> 162). Altezza, spazi, raggi e
   testi restano quelli di prima: le card sono piu' strette, non piu' piccole. */
.ipdo-card{ width:162px; height:150px; border-radius:16px; position:relative; overflow:hidden; box-shadow:0 4px 14px rgba(40,28,8,.14); text-decoration:none; display:block }
.ipdo-imgs{ display:flex; height:100%; gap:2px; background:#fff }
.ipdo-main{ flex:1 1 auto; min-width:0; display:block }
.ipdo-main img{ width:100%; height:100%; object-fit:cover; filter:brightness(.95); display:block }
.ipdo-side{ flex:0 0 38.5%; min-width:0; display:flex; flex-direction:column; gap:2px; overflow:hidden }
.ipdo-side img{ width:100%; height:50%; object-fit:cover; filter:brightness(.95); display:block }
.ipdo-label{ position:absolute; left:0; right:0; bottom:0; padding:26px 10px 11px; background:linear-gradient(transparent,rgba(12,9,4,.88)); color:#F3E9CF; font-size:14px; font-weight:600; letter-spacing:.02em; line-height:1.22 }
.ipdo-label small{ display:block; font-size:11px; color:#C9A24B; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-top:2px }

/* Quando la fascia è agganciata in alto, l'header del tema si nasconde del
   tutto (qualunque sia il suo meccanismo sticky): non può mai coprire le card.
   Riappare da solo risalendo sopra la fascia. */
@media (max-width:767px){
	#header{ transition:opacity .18s ease }
	html.ipdo-agganciata #header{ opacity:0 !important; pointer-events:none !important }
}

/* indicatore "ti trovi qui": anello di luce che percorre il bordo */
@property --ipdo-a { syntax:'<angle>'; initial-value:0deg; inherits:false }
.ipdo-card.ipdo-current::before{
	content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
	background:conic-gradient(from var(--ipdo-a),
		transparent 0deg, transparent 250deg,
		rgba(232,201,126,.65) 290deg, #FFF3D6 315deg, rgba(232,201,126,.65) 340deg,
		transparent 360deg),
		linear-gradient(rgba(201,162,75,.38), rgba(201,162,75,.38));
	-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite:exclude; z-index:3; pointer-events:none;
	animation:ipdo-giro 6.5s linear infinite;
}
@keyframes ipdo-giro{ to{ --ipdo-a:360deg } }
.ipdo-card.ipdo-current .ipdo-label{ color:#FFF7E2 }

/* categoria in evidenza: riflesso + alone; i bagliori li disegna il canvas */
.ipdo-card.ipdo-featured{ animation:ipdo-halo 4.2s ease-in-out infinite alternate }
.ipdo-card.ipdo-featured::after{
	content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
	background:linear-gradient(115deg, transparent 42%, rgba(255,246,222,.34) 50%, transparent 58%);
	background-size:260% 100%; background-position:120% 0;
	animation:ipdo-riflesso 5.2s ease-in-out infinite;
}
@keyframes ipdo-riflesso{ 0%,55%{background-position:130% 0} 85%,100%{background-position:-40% 0} }
@keyframes ipdo-halo{ from{box-shadow:0 4px 14px rgba(40,28,8,.14)} to{box-shadow:0 5px 22px rgba(198,158,62,.42)} }
.ipdo-card.ipdo-featured .ipdo-label small{ color:#F0D9A0 }

.ipdo-flare-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none }

@media (prefers-reduced-motion: reduce){
	.ipdo-colz, .ipdo-colz-title, .ipdo-colz-scroll, .ipdo-card, .ipdo-side, .ipdo-label{ transition:none }
	.ipdo-card.ipdo-current::before, .ipdo-card.ipdo-featured, .ipdo-card.ipdo-featured::after{ animation:none }
	.ipdo-card.ipdo-current::before{ background:linear-gradient(rgba(201,162,75,.7), rgba(201,162,75,.7)) }
	.ipdo-flare-canvas{ display:none }
}