/* Nastro: striscia semitrasparente, un po' storta, con le estremità
strappate (clip-path a zig-zag). Il colore dalla variabile. */
:root {--dec-nastro-giallo: rgba(255, 214, 102, 0.78); --dec-nastro-azzurro: rgba(150, 196, 214, 0.8);}
/* Spilli: immagini dei Media (WebP trasparenti con l'ombra dentro). Se un file sparisce dai Media sparisce lo spillo, senza avvisi. */
:root {--dec-spillo-blu: url("/wp-content/uploads/2026/10/puntina-spillo-blu.webp"); --dec-spillo-rosso: url("/wp-content/uploads/2026/10/puntina-spillo-rosso.webp"); --dec-spillo-giallo: url("/wp-content/uploads/2026/10/spillo-giallo.webp"); --dec-spillo-verde: url("/wp-content/uploads/2026/10/spillo-verde.webp");}
#incamk-2 .env-loop-item:first-child::after, #i6nj3t .env-loop-item:first-child::after, #i1hmls::after, #id4kuh .env-loop-item:first-child #ixu8::after, #env-home-stagioni-loop .env-loop-item #i52g::after {content: ""; position: absolute; z-index: 3; top: -12px; left: 50%; width: 96px; height: 26px; margin-left: -48px; background: var(--dec-nastro, var(--dec-nastro-giallo)); box-shadow: 0 1px 2px rgba(60, 40, 10, 0.12); transform: rotate(-3deg); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 2%, 88% 2%, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 98%, 12% 98%, 8% 90%, 4% 100%, 0 92%); pointer-events: none;}

/* Spillo: la testa sporge 15px sopra il bordo, l'ago entra nella cornice. Il colore da --dec-spillo (rosso se non scelto). */
#incamk-2 .env-loop-item:not(:first-child)::after, #i6nj3t .env-loop-item:not(:first-child)::after, #id4kuh .env-loop-item:not(:first-child) #ixu8::after {content: ""; position: absolute; z-index: 3; top: -15px; left: 50%; width: 38px; height: 50px; margin-left: -19px; background: var(--dec-spillo, var(--dec-spillo-rosso)) no-repeat center / contain; pointer-events: none;}

/* I riquadri diventano il riferimento della decorazione. */
#incamk-2 .env-loop-item, #i6nj3t .env-loop-item, #i1hmls, #id4kuh #ixu8, #env-home-stagioni-loop #i52g {position: relative;}

/* Card in evidenza: nastro azzurro sull'angolo in alto a sinistra, come
la foto attaccata nella moodboard. */
#incamk-2 .env-loop-item:first-child::after, #i6nj3t .env-loop-item:first-child::after {--dec-nastro: var(--dec-nastro-azzurro); left: 18px; margin-left: 0; transform: rotate(-8deg);}
/* Spilli: blu, rosso, giallo, verde a giro; "Ricette" e "Dove mangiare" partono da un altro colore per non ripetere "Ultimi articoli". */
#incamk-2 .env-loop-item:nth-child(4n+2)::after, #i6nj3t .env-loop-item:nth-child(4n+2)::after, #id4kuh .env-loop-item:nth-child(4n+2) #ixu8::after {--dec-spillo: var(--dec-spillo-blu);}
#incamk-2 .env-loop-item:nth-child(4n+3)::after, #i6nj3t .env-loop-item:nth-child(4n+3)::after, #id4kuh .env-loop-item:nth-child(4n+3) #ixu8::after {--dec-spillo: var(--dec-spillo-rosso);}
#incamk-2 .env-loop-item:nth-child(4n)::after, #i6nj3t .env-loop-item:nth-child(4n)::after, #id4kuh .env-loop-item:nth-child(4n) #ixu8::after {--dec-spillo: var(--dec-spillo-giallo);}
#incamk-2 .env-loop-item:nth-child(4n+1)::after, #i6nj3t .env-loop-item:nth-child(4n+1)::after, #id4kuh .env-loop-item:nth-child(4n+1) #ixu8::after {--dec-spillo: var(--dec-spillo-verde);}
#i6nj3t .env-loop-item:nth-child(2)::after {--dec-spillo: var(--dec-spillo-giallo);}
#i6nj3t .env-loop-item:nth-child(3)::after {--dec-spillo: var(--dec-spillo-verde);}
#id4kuh .env-loop-item:nth-child(2) #ixu8::after {--dec-spillo: var(--dec-spillo-rosso);}
/* Stagioni: un nastro giallo e uno azzurro, storti in versi diversi. */
#env-home-stagioni-loop .env-loop-item:nth-child(even) #i52g::after {--dec-nastro: var(--dec-nastro-azzurro); transform: rotate(3deg);}

/* --- STRUTTURE, LOCALITÀ, BLOG, RECENTI: puntine e nastri. Card con Template: sul riquadro bianco; card predefinita: sulla card del Loop. --- */
/* Un nastro ogni cinque card (1ª, 6ª…: mai in fila con 2 o 3 colonne), spilli a quattro colori sulle altre. */
#env-strutture-loop .env-loop-item:nth-child(5n+1) #i8fh::after, #env-localita-loop .env-loop-item:nth-child(5n+1) #env-card-loc-box::after, #i9dlj9g .env-loop-item:nth-child(5n+1)::after, #env-art-loop .env-loop-item:nth-child(5n+1)::after {content: ""; position: absolute; z-index: 3; top: -12px; left: 50%; width: 96px; height: 26px; margin-left: -48px; background: var(--dec-nastro, var(--dec-nastro-giallo)); box-shadow: 0 1px 2px rgba(60, 40, 10, 0.12); transform: rotate(-3deg); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 2%, 88% 2%, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 98%, 12% 98%, 8% 90%, 4% 100%, 0 92%); pointer-events: none;}
#env-strutture-loop .env-loop-item:not(:nth-child(5n+1)) #i8fh::after, #env-localita-loop .env-loop-item:not(:nth-child(5n+1)) #env-card-loc-box::after, #i9dlj9g .env-loop-item:not(:nth-child(5n+1))::after, #env-art-loop .env-loop-item:not(:nth-child(5n+1))::after {content: ""; position: absolute; z-index: 3; top: -15px; left: 50%; width: 38px; height: 50px; margin-left: -19px; background: var(--dec-spillo, var(--dec-spillo-rosso)) no-repeat center / contain; pointer-events: none;}
#env-strutture-loop #i8fh, #env-localita-loop #env-card-loc-box, #i9dlj9g .env-loop-item, #env-art-loop .env-loop-item {position: relative;}
/* Un nastro su due azzurro e storto dall'altra parte (6ª, 16ª…). */
#env-strutture-loop .env-loop-item:nth-child(10n+6) #i8fh::after, #env-localita-loop .env-loop-item:nth-child(10n+6) #env-card-loc-box::after, #i9dlj9g .env-loop-item:nth-child(10n+6)::after, #env-art-loop .env-loop-item:nth-child(10n+6)::after {--dec-nastro: var(--dec-nastro-azzurro); transform: rotate(3deg);}
#env-strutture-loop .env-loop-item:nth-child(4n+2) #i8fh::after, #env-localita-loop .env-loop-item:nth-child(4n+2) #env-card-loc-box::after, #i9dlj9g .env-loop-item:nth-child(4n+2)::after, #env-art-loop .env-loop-item:nth-child(4n+2)::after {--dec-spillo: var(--dec-spillo-blu);}
#env-strutture-loop .env-loop-item:nth-child(4n+3) #i8fh::after, #env-localita-loop .env-loop-item:nth-child(4n+3) #env-card-loc-box::after, #i9dlj9g .env-loop-item:nth-child(4n+3)::after, #env-art-loop .env-loop-item:nth-child(4n+3)::after {--dec-spillo: var(--dec-spillo-rosso);}
#env-strutture-loop .env-loop-item:nth-child(4n) #i8fh::after, #env-localita-loop .env-loop-item:nth-child(4n) #env-card-loc-box::after, #i9dlj9g .env-loop-item:nth-child(4n)::after, #env-art-loop .env-loop-item:nth-child(4n)::after {--dec-spillo: var(--dec-spillo-giallo);}
#env-strutture-loop .env-loop-item:nth-child(4n+1) #i8fh::after, #env-localita-loop .env-loop-item:nth-child(4n+1) #env-card-loc-box::after, #i9dlj9g .env-loop-item:nth-child(4n+1)::after, #env-art-loop .env-loop-item:nth-child(4n+1)::after {--dec-spillo: var(--dec-spillo-verde);}

/* --- CHI SIAMO (#3009060), "Per chi scriviamo": nastro giallo al centro, spilli blu e rosso ai lati. Id di oggi. --- */
#i2hw92j::after, #inxamb6::after {content: ""; position: absolute; z-index: 3; top: -15px; left: 50%; width: 38px; height: 50px; margin-left: -19px; background: var(--dec-spillo, var(--dec-spillo-rosso)) no-repeat center / contain; pointer-events: none;}
#i2hw92j::after {--dec-spillo: var(--dec-spillo-blu);}
#i6hpsaj::after {content: ""; position: absolute; z-index: 3; top: -12px; left: 50%; width: 96px; height: 26px; margin-left: -48px; background: var(--dec-nastro-giallo); box-shadow: 0 1px 2px rgba(60, 40, 10, 0.12); transform: rotate(-3deg); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 2%, 88% 2%, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 98%, 12% 98%, 8% 90%, 4% 100%, 0 92%); pointer-events: none;}
#i2hw92j, #i6hpsaj, #inxamb6 {position: relative;}

/* Le due foto in alto restano senza: sono <img> (niente ::after) e la loro cella ha già l'::after di Grapely. */

/* "La nostra storia": nastro azzurro sull'angolo del post-it (già storto di -2°: il nastro gira con lui). */
#iqyy52e-2 {position: relative;}
#iqyy52e-2::after {content: ""; position: absolute; z-index: 3; top: -12px; left: 18px; width: 96px; height: 26px; background: var(--dec-nastro-azzurro); box-shadow: 0 1px 2px rgba(60, 40, 10, 0.12); transform: rotate(-8deg); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 2%, 88% 2%, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 98%, 12% 98%, 8% 90%, 4% 100%, 0 92%); pointer-events: none;}

/* "Come scriviamo": spillo blu, nastro giallo, spillo giallo, nastro azzurro storto al contrario. */
#ikwgy, #ihfo1xi, #iy7ld0f, #ilbo3ku {position: relative;}
#ikwgy::after, #iy7ld0f::after {content: ""; position: absolute; z-index: 3; top: -15px; left: 50%; width: 38px; height: 50px; margin-left: -19px; background: var(--dec-spillo, var(--dec-spillo-rosso)) no-repeat center / contain; pointer-events: none;}
#ikwgy::after {--dec-spillo: var(--dec-spillo-blu);}
#iy7ld0f::after {--dec-spillo: var(--dec-spillo-giallo);}
#ihfo1xi::after, #ilbo3ku::after {content: ""; position: absolute; z-index: 3; top: -12px; left: 50%; width: 96px; height: 26px; margin-left: -48px; background: var(--dec-nastro, var(--dec-nastro-giallo)); box-shadow: 0 1px 2px rgba(60, 40, 10, 0.12); transform: rotate(-3deg); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 2%, 88% 2%, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 98%, 12% 98%, 8% 90%, 4% 100%, 0 92%); pointer-events: none;}
#ilbo3ku::after {--dec-nastro: var(--dec-nastro-azzurro); transform: rotate(3deg);}

/* "Hai qualcosa da raccontarci?": spillo giallo sul blu, blu sul giallo, nastro giallo sul bianco. */
#i19j6i6, #ie186gv, #i77r7ht {position: relative;}
#i19j6i6::after, #ie186gv::after {content: ""; position: absolute; z-index: 3; top: -15px; left: 50%; width: 38px; height: 50px; margin-left: -19px; background: var(--dec-spillo, var(--dec-spillo-rosso)) no-repeat center / contain; pointer-events: none;}
#ie186gv::after {--dec-spillo: var(--dec-spillo-blu);}
#i19j6i6::after {--dec-spillo: var(--dec-spillo-giallo);}
#i77r7ht::after {content: ""; position: absolute; z-index: 3; top: -12px; left: 50%; width: 96px; height: 26px; margin-left: -48px; background: var(--dec-nastro-giallo); box-shadow: 0 1px 2px rgba(60, 40, 10, 0.12); transform: rotate(-3deg); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 2%, 88% 2%, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 98%, 12% 98%, 8% 90%, 4% 100%, 0 92%); pointer-events: none;}

/* --- COME FUNZIONA (#3009100). Id di oggi: rifacendo una sezione vanno aggiornati. --- */

/* Foto polaroid in alto: è un <img>, il nastro va sulla sua cella (#iya7v77), grande quanto lei. */
#iya7v77 {position: relative;}
#iya7v77::after {content: ""; position: absolute; z-index: 3; top: -12px; left: 18px; width: 96px; height: 26px; background: var(--dec-nastro-azzurro); box-shadow: 0 1px 2px rgba(60, 40, 10, 0.12); transform: rotate(-8deg); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 2%, 88% 2%, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 98%, 12% 98%, 8% 90%, 4% 100%, 0 92%); pointer-events: none;}

/* "Tre parole, un impegno": spillo blu, nastro giallo, spillo rosso. */
#iiwodey, #i5ofpg2, #iqsodz6 {position: relative;}
#iiwodey::after, #iqsodz6::after {content: ""; position: absolute; z-index: 3; top: -15px; left: 50%; width: 38px; height: 50px; margin-left: -19px; background: var(--dec-spillo, var(--dec-spillo-rosso)) no-repeat center / contain; pointer-events: none;}
#iiwodey::after {--dec-spillo: var(--dec-spillo-blu);}
#i5ofpg2::after {content: ""; position: absolute; z-index: 3; top: -12px; left: 50%; width: 96px; height: 26px; margin-left: -48px; background: var(--dec-nastro-giallo); box-shadow: 0 1px 2px rgba(60, 40, 10, 0.12); transform: rotate(-3deg); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 2%, 88% 2%, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 98%, 12% 98%, 8% 90%, 4% 100%, 0 92%); pointer-events: none;}

/* Pannello bianco (due righe attaccate): nastro giallo sull'angolo della prima (#ikgjk9). */
#ikgjk9 {position: relative;}
#ikgjk9::after {content: ""; position: absolute; z-index: 3; top: -12px; left: 28px; width: 96px; height: 26px; background: var(--dec-nastro-giallo); box-shadow: 0 1px 2px rgba(60, 40, 10, 0.12); transform: rotate(-6deg); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 2%, 88% 2%, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 98%, 12% 98%, 8% 90%, 4% 100%, 0 92%); pointer-events: none;}

/* "Iscriviti": nastro azzurro sul modulo (#ikfc4xw), spillo verde sul
riquadro dei dati (#ixrew3n). */
#ikfc4xw, #ixrew3n {position: relative;}
#ikfc4xw::after {content: ""; position: absolute; z-index: 3; top: -12px; left: 50%; width: 96px; height: 26px; margin-left: -48px; background: var(--dec-nastro-azzurro); box-shadow: 0 1px 2px rgba(60, 40, 10, 0.12); transform: rotate(3deg); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 2%, 88% 2%, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 98%, 12% 98%, 8% 90%, 4% 100%, 0 92%); pointer-events: none;}
#ixrew3n::after {--dec-spillo: var(--dec-spillo-verde); content: ""; position: absolute; z-index: 3; top: -15px; left: 50%; width: 38px; height: 50px; margin-left: -19px; background: var(--dec-spillo, var(--dec-spillo-rosso)) no-repeat center / contain; pointer-events: none;}

/* --- SCHEDE: nastro sulla foto di località e articolo; correlati (#ilvb5, #ipspo) come le griglie. Galleria senza (<img>). --- */
#env-loc-image::after, #env-art-image::after {content: ""; position: absolute; z-index: 3; top: -12px; left: 18px; width: 96px; height: 26px; background: var(--dec-nastro-azzurro); box-shadow: 0 1px 2px rgba(60, 40, 10, 0.12); transform: rotate(-8deg); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 2%, 88% 2%, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 98%, 12% 98%, 8% 90%, 4% 100%, 0 92%); pointer-events: none;}
#ilvb5 .env-carousel-slide, #ipspo .env-carousel-slide {position: relative;}
#ilvb5 .env-carousel-slide:nth-child(5n+1)::after, #ipspo .env-carousel-slide:nth-child(5n+1)::after {content: ""; position: absolute; z-index: 3; top: -12px; left: 50%; width: 96px; height: 26px; margin-left: -48px; background: var(--dec-nastro, var(--dec-nastro-giallo)); box-shadow: 0 1px 2px rgba(60, 40, 10, 0.12); transform: rotate(-3deg); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 2%, 88% 2%, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 98%, 12% 98%, 8% 90%, 4% 100%, 0 92%); pointer-events: none;}
#ilvb5 .env-carousel-slide:not(:nth-child(5n+1))::after, #ipspo .env-carousel-slide:not(:nth-child(5n+1))::after {content: ""; position: absolute; z-index: 3; top: -15px; left: 50%; width: 38px; height: 50px; margin-left: -19px; background: var(--dec-spillo, var(--dec-spillo-rosso)) no-repeat center / contain; pointer-events: none;}
#ilvb5 .env-carousel-slide:nth-child(10n+6)::after, #ipspo .env-carousel-slide:nth-child(10n+6)::after {--dec-nastro: var(--dec-nastro-azzurro); transform: rotate(3deg);}
#ilvb5 .env-carousel-slide:nth-child(4n+2)::after, #ipspo .env-carousel-slide:nth-child(4n+2)::after {--dec-spillo: var(--dec-spillo-blu);}
#ilvb5 .env-carousel-slide:nth-child(4n+3)::after, #ipspo .env-carousel-slide:nth-child(4n+3)::after {--dec-spillo: var(--dec-spillo-rosso);}
#ilvb5 .env-carousel-slide:nth-child(4n)::after, #ipspo .env-carousel-slide:nth-child(4n)::after {--dec-spillo: var(--dec-spillo-giallo);}
#ilvb5 .env-carousel-slide:nth-child(4n+1)::after, #ipspo .env-carousel-slide:nth-child(4n+1)::after {--dec-spillo: var(--dec-spillo-verde);}