@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Caveat:wght@500;600;700&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --ink:#15120f;
  --ink-2:#1c1712;
  --ink-text:#f7f1e6;
  --ink-muted:#b3a696;
  --ink-black: #000000;
  --line-dark:#3c342c;

  --paper:#faf6ee;
  --cream:#f3ece0;
  --cream-2:#eadfcd;
  --body-text:#332a21;
  --body-muted:#71624f;
  --line:#cbb89a;

  --blush:#eec9a3;
  --blush-deep:#dba875;

  --g1:linear-gradient(160deg,#dca06a 0%,#8a4a3a 75%);
  --g2:linear-gradient(160deg,#4c5c56 0%,#12181a 78%);
  --g3:linear-gradient(160deg,#c9b48f 0%,#6b5842 78%);
  --g4:linear-gradient(160deg,#7e9092 0%,#293a3d 78%);
  --g5:linear-gradient(160deg,#ba8b72 0%,#3a2822 78%);
  --g6:linear-gradient(160deg,#e6cca3 0%,#a9714a 78%);
}

*{box-sizing:border-box;}
/* Rete di sicurezza: se un elemento sfora comunque in larghezza (bug futuro, contenuto
   lungo), evita lo scroll orizzontale della pagina — che su mobile rompe anche l'header
   sticky (Safari/Chrome smettono di "agganciarla" quando il documento scrolla anche in
   orizzontale). */
html{overflow-x:hidden;}
body{margin:0;background:var(--paper);color:var(--body-text);font-family:'Jost',sans-serif;-webkit-font-smoothing:antialiased;}
img{max-width:100%;}
.svg-icon{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex-shrink:0;}
h1,h2,h3{font-family:'Playfair Display',serif;text-wrap:balance;margin:0;font-weight:600;}
p{margin:0;line-height:1.65;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
.script{font-family:'Caveat',cursive;font-weight:600;line-height:1;}
.overline{font-size:.76rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;display:block;}
.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(1.25rem,4vw,3rem);}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-size:.82rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:.9rem 1.7rem;border-radius:15px;border:1px solid transparent;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;white-space:nowrap;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--blush);color:#241a10;}
.btn-primary:hover{background:var(--blush-deep);}
.btn-outline-dark{border-color:var(--line-dark);color:var(--ink-text);}
.btn-outline-dark:hover{border-color:var(--ink-text);}
.btn-outline-light{border-color:var(--line);color:var(--body-text);}
.btn-outline-light:hover{border-color:var(--body-text);}
.btn-club{background:var(--ink-2);color:var(--ink-text);border-color:var(--line-dark);}
.btn-club:hover{border-color:var(--blush);}
.btn-arrow{font-size:1.05em;transition:transform .2s ease;}
.btn:hover .btn-arrow{transform:translateX(3px);}

/* header */
.site-header{position:sticky;top:0;z-index:80;background:var(--ink);border-bottom:1px solid var(--line-dark);}
.site-header .wrap{display:flex;align-items:center;gap:2rem;height:76px;}
.logo{font-family:'Playfair Display',serif;font-size:1.25rem;letter-spacing:.14em;color:var(--ink-text);white-space:nowrap;}
.main-nav{display:flex;gap:1.7rem;flex:1;}
.main-nav a{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);padding-block:.4rem;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;white-space:nowrap;}
.main-nav a:hover, .main-nav a.active{color:var(--ink-text);}
.main-nav a.active{border-color:var(--blush);}
.header-actions{display:flex;align-items:center;gap:1rem;margin-left:auto;}
.socials{display:flex;gap:.6rem;}
.socials a{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-dark);display:flex;align-items:center;justify-content:center;color:var(--ink-text);font-size:.9rem;}
.socials a:hover{border-color:var(--blush);background:rgba(238,201,163,.1);}
.burger{display:none;background:none;border:0;color:var(--ink-text);font-size:1.4rem;padding:.3rem;}
.main-nav a.nav-cta{display:inline-flex;align-items:center;padding:.5rem 1.15rem;margin-left:.4rem;border:1px solid var(--blush);border-radius:999px;color:var(--blush);}
.main-nav a.nav-cta:hover{background:var(--blush);color:#241a10;}
.main-nav a.user-avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-left:.6rem;border-radius:50%;background:var(--blush);color:#241a10;font-weight:600;font-size:.85rem;padding:0;}
.main-nav a.user-avatar:hover{background:var(--blush-deep);}
.main-nav a.admin-shortcut{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-left:.4rem;border-radius:50%;border:1px solid var(--line-dark);color:var(--ink-muted);padding:0;}
.main-nav a.admin-shortcut:hover{border-color:var(--blush);color:var(--ink-text);}

@media(max-width:980px){
  .site-header .wrap{gap:.75rem;}
  .main-nav{position:fixed;inset:76px 0 0 0;background:var(--ink);flex-direction:column;padding:2rem clamp(1.25rem,4vw,3rem);gap:0;display:none;}
  .main-nav.open{display:flex;}
  .main-nav a{border-bottom:1px solid var(--line-dark);padding:1rem 0;}
  .main-nav a.nav-cta{display:inline-flex;border:1px solid var(--blush);border-radius:999px;padding:.6rem 1.3rem;margin:1rem 0 0;}
  .main-nav a.user-avatar, .main-nav a.admin-shortcut{display:inline-flex;border-bottom:none;margin:.5rem .4rem 0 0;padding:0;}
  .socials{display:none;}
  .header-actions{gap:.5rem;}
  .header-actions .btn-primary, .header-actions .btn-club{padding:.65rem;border-radius:50%;}
  .header-actions .btn-primary .btn-label, .header-actions .btn-club .btn-label{display:none;}
  .burger{display:block;flex-shrink:0;}
}

/* film-frame motif (placeholder finché non carichiamo le foto vere) */
/* z-index:0 (non "auto"): rende .frame un proprio contesto di stacking, altrimenti lo
   z-index:1 di ".frame img" qui sotto "scapperebbe" fuori da .frame e si metterebbe sopra
   a un overlay testuale/di lock che sia un fratello di .frame (es. la citazione sopra la
   foto in Chi Sono, o il lock-overlay dei post a pagamento). */
.frame{position:relative;z-index:0;aspect-ratio:var(--ar,4/5);border-radius:2px;overflow:hidden;background:var(--g,var(--g1));border:1px solid rgba(247,241,230,.16);}
.frame::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 28% 15%,rgba(255,255,255,.16),transparent 58%),radial-gradient(120% 90% at 82% 100%,rgba(0,0,0,.4),transparent 55%);mix-blend-mode:overlay;}
.frame::after{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;background-image:radial-gradient(circle,rgba(255,255,255,.6) 1.6px,transparent 1.8px);background-size:9px 15px;background-position:3px 5px;background-repeat:repeat-y;opacity:.3;}
.frame img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;}
.frame .tag-no{position:absolute;left:.65rem;bottom:.6rem;font-size:.66rem;letter-spacing:.08em;color:rgba(255,255,255,.92);background:rgba(0,0,0,.32);padding:.15rem .5rem;border-radius:2px;z-index:2;}
.frame .tag-cap{position:absolute;right:.7rem;top:.6rem;font-size:.63rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.92);text-align:right;max-width:70%;z-index:2;}
.frame--no-border{ border:none; }

.section-dark{background:var(--ink);color:var(--ink-text);}
.section-cream{background:var(--cream);color:var(--body-text);}
.section-paper{background:var(--paper);color:var(--body-text);}
.py{padding-block:clamp(3rem,7vw,5.5rem);}

/* home hero */
.hero{background:var(--ink-black);color:var(--ink-text);}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding-block:clamp(2.5rem,6vw,4.5rem);}
.hero .overline{color:var(--ink-muted);margin-bottom:1rem;}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:.01em;line-height:.98;}
.hero .script{font-size:clamp(1.8rem,3.4vw,2.4rem);color:var(--blush);margin-top:1rem;display:block;}
.hero p.tagline{margin-top:1.75rem;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);}
.hero .btn-primary{margin-top:1.75rem;}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;}.hero-frame-wrap{order:-1;}}

/* compact chapter header (sottopagine) */
.page-header{background:var(--ink);color:var(--ink-text);}
.page-header .wrap{padding-block:2.6rem 2.8rem;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;}
.page-header .overline{color:var(--blush);margin-bottom:.6rem;}
.page-header h1{font-size:clamp(1.9rem,4vw,2.8rem);}
.page-header .script{font-size:1.5rem;color:var(--ink-muted);margin-top:.5rem;display:block;}
.page-header .meta{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);text-align:right;}

.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;}
.feature-card{text-align:center;}
.feature-card .icon{font-size:1.5rem;margin-bottom:.6rem;}
.feature-card .label{font-size:.85rem;font-weight:500;}
@media(max-width:760px){.feature-grid{grid-template-columns:repeat(2,1fr);}}

.thumbs-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-top:1.3rem;}

.site-footer{background:var(--ink);color:var(--ink-text);border-top:1px solid var(--line-dark);}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-block:2.2rem;border-bottom:1px solid var(--line-dark);}
.footer-title{font-size:2.4rem;color:var(--blush);}
.footer-socials{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-block:2.2rem;}
.fs-card{border:1px solid var(--line-dark);border-radius:6px;padding:1.3rem 1.4rem;display:flex;align-items:center;gap:1.1rem;transition:border-color .2s ease,background .2s ease;}
.fs-card:hover{border-color:var(--blush);background:rgba(238,201,163,.08);}
.fs-card .ic{font-size:2.3rem;line-height:0;color:var(--blush);flex-shrink:0;}
.fs-card .t{font-weight:500;font-size:.95rem;}
.fs-card .d{font-size:.76rem;color:var(--ink-muted);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-block:1.6rem;font-size:.8rem;color:var(--ink-muted);}
.footer-bottom .legal{display:flex;gap:1.4rem;flex-wrap:wrap;}
@media(max-width:900px){.footer-socials{grid-template-columns:repeat(2,1fr);}}

/* form fields (contatti / checkout) */
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem;}
.field label{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--body-muted);}
.field input,.field select,.field textarea{font-family:inherit;font-size:.95rem;padding:.8rem .9rem;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--body-text);width:100%;}
.field textarea{resize:vertical;min-height:110px;}
.field .field-error{color:#b3402f;font-size:.78rem;}
.checkline{display:flex;align-items:flex-start;gap:.6rem;font-size:.82rem;color:var(--body-muted);margin-bottom:1.4rem;}

.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;background:none;border:0;display:flex;justify-content:space-between;align-items:center;padding:1.1rem 0;text-align:left;font-size:.98rem;font-weight:500;color:var(--body-text);}
.faq-q .plus{transition:transform .2s ease;font-size:1.1rem;color:var(--body-muted);}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-a p{padding-bottom:1.1rem;color:var(--body-muted);font-size:.9rem;max-width:60ch;}
.faq-item.open .faq-a{max-height:220px;}

/* Layout generico a due colonne (Checkout riepilogo, Contatti): --cols permette di passare
   una proporzione diversa da 1fr 1fr via style inline (es. "--cols:1.15fr .85fr"), la
   media query di collasso resta comunque quella della classe. */
.two-col{display:grid;grid-template-columns:var(--cols,1fr 1fr);gap:clamp(2rem,4vw,3.5rem);}
@media(max-width:900px){.two-col{grid-template-columns:1fr;}}

/* Coppie di campi form affiancati (Nome/Cognome, Città/CAP, ecc.) */
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;}
@media(max-width:480px){.form-row-2{grid-template-columns:1fr;}}

/* Chi sono: testo + foto orizzontale a tutta altezza, affiancati senza gap (bleed) */
.about-intro{display:grid;grid-template-columns:1.1fr .9fr;}
@media(max-width:900px){.about-intro{grid-template-columns:1fr;}}

/* Home: banner "Entra nel mio mondo" (foto + testo + bottone) */
.club-cta{display:grid;grid-template-columns:.9fr 1.4fr auto;gap:clamp(1.5rem,4vw,3rem);align-items:center;}
@media(max-width:900px){.club-cta{grid-template-columns:1fr;text-align:center;}.club-cta .btn{justify-self:center;}.club-cta p{max-width:none;}}

/* prodotto: selettore varianti */
.product-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,3.5rem);align-items:start;}
.badge-limited{display:inline-block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;background:var(--cream-2);border:1px solid var(--line);padding:.4rem .8rem;border-radius:999px;margin-bottom:1.1rem;}
.status-pill{display:inline-block;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;background:var(--cream-2);border:1px solid var(--line);padding:.3rem .7rem;border-radius:999px;white-space:nowrap;}
.feature-list{display:flex;flex-direction:column;gap:.6rem;margin:1.3rem 0 1.6rem;padding:0;}
.feature-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;list-style:none;}
.variant-group{display:flex;flex-direction:column;gap:.7rem;margin:1.3rem 0 1.5rem;}
.variant-option{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid var(--line);border-radius:8px;padding:.9rem 1.1rem;cursor:pointer;background:var(--paper);}
.variant-option:hover{border-color:var(--body-text);}
.variant-option.selected{border-color:var(--blush-deep);background:var(--cream-2);}
.variant-option .left{display:flex;align-items:center;gap:.8rem;}
.variant-option .dot{width:17px;height:17px;border-radius:50%;border:1px solid var(--line);flex:none;position:relative;}
.variant-option.selected .dot{border-color:var(--blush-deep);}
.variant-option.selected .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--blush-deep);}
.variant-option .name{font-weight:500;font-size:.95rem;}
.variant-option .sub{font-size:.78rem;color:var(--body-muted);margin-top:.1rem;}
.variant-option .amt{font-family:'Playfair Display',serif;font-size:1.15rem;white-space:nowrap;}
.dedica-field{max-height:0;overflow:hidden;transition:max-height .25s ease,opacity .2s ease;opacity:0;}
.dedica-field.open{max-height:200px;opacity:1;margin-bottom:1.2rem;}
.dedica-field textarea{width:100%;font-family:inherit;font-size:.92rem;line-height:1.5;padding:.8rem .9rem;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--body-text);resize:none;min-height:100px;transition:border-color .2s ease;}
.dedica-field textarea:focus{outline:none;border-color:var(--blush-deep);}
.dedica-field textarea::placeholder{color:var(--body-muted);}
.qty-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.3rem;}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;}
.stepper button{background:none;border:0;width:38px;height:38px;font-size:1rem;}
.stepper span{min-width:28px;text-align:center;font-variant-numeric:tabular-nums;}
.total-row{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--line);padding-top:1rem;margin-bottom:1.3rem;}
.total-row .t-amt{font-family:'Playfair Display',serif;font-size:1.5rem;}
.cta-stack{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start;}
/* minmax(0,1fr) invece di 1fr: senza, un grid item si rifiuta di restringersi sotto il
   min-content del suo contenuto (icona + testo "PREORDINA..." maiuscolo non spezzabile),
   e i bottoni sforano fuori dalla colonna — portando in overflow orizzontale l'intera
   pagina su mobile (da cui anche l'header sticky che "si rompe", vedi nota su html/body). */
.cta-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.7rem;border-top:1px solid var(--line);padding-top:1.5rem;}
.cta-row .btn-tile{flex-direction:column;justify-content:center;gap:.6rem;white-space:normal;text-align:center;padding:1.6rem 1rem;border-radius:16px;aspect-ratio:3/2;}
.cta-row .btn-tile .svg-icon{width:1.9rem;height:1.9rem;}
.thumbs-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem;margin-top:1.6rem;}
@media(max-width:900px){.product-split{grid-template-columns:1fr;}.thumbs-strip{grid-template-columns:repeat(4,1fr);}}
@media(max-width:480px){.cta-row .btn-tile{padding:1rem .5rem;gap:.4rem;aspect-ratio:auto;font-size:.72rem;}.cta-row .btn-tile .svg-icon{width:1.4rem;height:1.4rem;}}

/* gallery */
.filter-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem;}
.filter-pill{padding:.5rem 1.1rem;border-radius:5px;border:1px solid var(--line);font-size:.8rem;color:var(--body-muted);background:transparent;}
.filter-pill.active{background:var(--ink);color:var(--ink-text);border-color:var(--ink);}
.masonry{columns:4 220px;column-gap:1rem;}
.masonry .frame{width:100%;margin-bottom:1rem;break-inside:avoid;}
.masonry .frame img{cursor:zoom-in;}
@media(max-width:700px){.masonry{columns:2 160px;}}

/* alice club */
.club-tabs-header{display:flex;gap:.8rem;}
.club-tab-tile{background:var(--ink-2);border:1px solid var(--line-dark);border-radius:12px;padding:1rem 1.3rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--ink-muted);font-family:inherit;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;min-width:90px;transition:border-color .2s ease,color .2s ease,background .2s ease;}
.club-tab-tile .svg-icon{width:1.4rem;height:1.4rem;}
.club-tab-tile:hover{border-color:var(--blush);color:var(--ink-text);}
.club-tab-tile.active{background:var(--ink);border-color:var(--blush);color:var(--ink-text);}
@media(max-width:640px){.page-header .wrap{justify-content:flex-start;}.club-tabs-header{width:100%;}.club-tab-tile{flex:1;}}
.club-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;}
.club-card{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:1.4rem;}
.club-card .ic{font-size:1.4rem;margin-bottom:.7rem;}
.club-card .t{font-weight:500;margin-bottom:.3rem;}
.club-card .d{font-size:.85rem;color:var(--body-muted);}
@media(max-width:900px){.club-grid{grid-template-columns:repeat(2,1fr);}}


.center{text-align:center;}
/* Feed (Area Privata + tab Feed di Alice Club): card "polaroid" compatta — niente più box
   bianco bordato stile app. Il click su una foto o sui commenti apre il dettaglio a tutto
   schermo (.post-detail-dialog, uno per post): la lista commenti completa vive solo lì, ma
   reagire (cuore) si può anche direttamente dalla card, senza aprire nulla. Niente tag da
   nessuna parte (backoffice compreso): restano solo come dato in DB, per ora inutilizzati. */
/* Griglia che va a capo (non più una sola colonna verticale): ogni polaroid ha una larghezza
   fissa, così le righe restano allineate qualunque sia il contenuto. justify-content:center
   centrerebbe anche l'ultima riga incompleta (l'unica card di una riga da sola finirebbe in
   mezzo invece che sotto alla prima colonna) — flex-start allinea sempre a sinistra, come in
   una griglia normale. */
.post-feed{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:2.2rem 1.8rem;}
/* Su mobile c'è quasi sempre una sola polaroid per riga (280px fissi): flex-start la lascia
   attaccata a sinistra con tutto lo spazio vuoto a destra. Il problema del "grid" a più
   colonne (vedi commento sopra) lì non si pone, quindi qui si può centrare senza rischi. */
@media(max-width:640px){.post-feed{justify-content:center;}}
.post-date{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--body-muted);}

.polaroid{position:relative;flex:0 0 280px;width:280px;display:flex;flex-direction:column;background:#fff;border-radius:4px;box-shadow:0 10px 28px rgba(21,18,15,.14);padding:1rem 1rem 0;}
.polaroid:nth-child(odd){transform:rotate(-1.1deg);}
.polaroid:nth-child(even){transform:rotate(.9deg);}
.polaroid-header{margin-bottom:.7rem;}
/* Più di una foto: niente stack "a mazzo" dietro (poco leggibile a distanza) — la card resta
   una polaroid sola e ci si sfoglia dentro con le stesse frecce/pallini del dettaglio,
   ridimensionate qui a un quadrato invece che a tutta altezza. Il quadrato è sempre presente
   (anche come placeholder, sotto) apposta: tutte le polaroid devono restare della stessa
   dimensione, con o senza foto. */
.polaroid-photo-wrap .post-media-carousel{margin-bottom:0;}
.polaroid-photo-wrap .carousel-item{aspect-ratio:1/1;}
.polaroid-photo-wrap .carousel-item img,.polaroid-photo-wrap .carousel-item video{cursor:zoom-in;}
.polaroid-photo-btn{display:block;width:100%;height:100%;padding:0;border:none;background:none;font:inherit;}
.polaroid-photo,.polaroid-photo-placeholder{width:100%;aspect-ratio:1/1;border-radius:2px;overflow:hidden;background:var(--cream-2);}
.polaroid-photo img,.polaroid-photo video{width:100%;height:100%;object-fit:cover;display:block;}
.polaroid-photo-placeholder{display:flex;align-items:center;justify-content:center;color:var(--body-muted);}
.polaroid-photo-placeholder .svg-icon{width:2rem;height:2rem;opacity:.45;}
.polaroid-body{padding:1rem .35rem 1.2rem;display:flex;flex-direction:column;flex:1;}
/* Font normale (non Caveat) e limitata a 2 righe: la Description è testo libero di Alice,
   può essere lunga — il corsivo va bene per un accento breve, non per un paragrafo intero.
   Il testo completo resta comunque leggibile nel dettaglio (.post-detail-desc). min-height
   riserva sempre lo spazio di 2 righe, anche per didascalie corte da una riga sola: altrimenti
   torna a variare l'altezza della card da post a post, esattamente quello che non vogliamo. */
.polaroid-caption{font-size:.92rem;line-height:1.5;min-height:3em;color:var(--body-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;}
.polaroid-meta{display:flex;align-items:center;justify-content:space-between;margin-top:.7rem;}
.polaroid-like-btn{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--body-text);background:none;border:none;padding:0;cursor:pointer;font:inherit;}
.polaroid-like-btn .svg-icon{width:1rem;height:1rem;}
.polaroid-like-btn.active{color:var(--blush-deep);}
.polaroid-comments-btn{background:none;border:none;padding:0;font:inherit;font-size:.78rem;color:var(--body-muted);border-bottom:1px dotted var(--body-muted);cursor:pointer;}

/* Dettaglio post: media a sinistra (stesso .post-media-carousel/wireCarousel della card),
   reazioni e commenti veri a destra. Un <dialog> per post (non condiviso e ricostruito via
   JS come il lightbox della Gallery): i form restano quelli renderizzati dal server, con
   token antiforgery e postId corretti già pronti — react/commenta/elimina passano poi da
   fetch (site.js), non da un submit pieno, per non richiudere il popup ad ogni azione.
   Volutamente NON a tutto schermo (width/height limitate, bordi arrotondati, sfondo scuro
   visibile intorno): dava un effetto troppo "invasivo" e la X si perdeva contro le foto
   chiare — ora la chiusura è sempre leggibile perché è una pillola piena, non trasparente. */
dialog.post-detail-dialog{box-sizing:border-box;border:none;padding:0;width:min(1100px,94vw);height:min(760px,88vh);border-radius:14px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5);}
dialog.post-detail-dialog::backdrop{background:rgba(9,9,9,.88);}
.post-detail-layout{display:flex;width:100%;height:100%;}
.post-detail-media{flex:1;min-width:0;background:#000;position:relative;}
.post-detail-media .post-media-carousel{width:100%;height:100%;margin-bottom:0;}
.post-detail-media .carousel-track{height:100%;}
.post-detail-media .carousel-item{height:100%;}
/* Specificità pari a ".post-media-carousel .carousel-item img" qui sotto: senza il prefisso
   extra ".post-detail-dialog" quella regola (più in basso nel file) vince a parità di
   specificità e l'immagine torna cover invece di contain — bug già preso una volta. */
.post-detail-dialog .post-detail-media .carousel-item img,.post-detail-dialog .post-detail-media .carousel-item video{width:100%;height:100%;object-fit:contain;background:#000;}
.post-detail-media .carousel-nav{width:2.75rem;height:2.75rem;background:rgba(255,255,255,.14);}
/* Lo scroll vive sul pannello intero (non solo su .post-detail-body): con l'header a
   flex-shrink:0 una descrizione lunga lo faceva crescere quanto voleva, spingendo body e
   footer fuori dall'altezza disponibile senza modo di raggiungerli (bug: commenti
   irraggiungibili su mobile). Il footer resta comunque ancorato in basso via sticky. */
.post-detail-panel{width:400px;flex-shrink:0;background:var(--paper);display:flex;flex-direction:column;overflow-y:auto;}
.post-detail-header{padding:1.2rem 1.4rem;border-bottom:1px solid var(--line);}
.post-detail-desc{white-space:pre-wrap;margin-top:.5rem;}
.post-detail-body{padding:1.2rem 1.4rem;}
.post-detail-footer{border-top:1px solid var(--line);padding:1rem 1.4rem;position:sticky;bottom:0;background:var(--paper);}
@media(max-width:860px){
  .post-detail-layout{flex-direction:column;}
  .post-detail-media{height:42vh;flex:none;}
  .post-detail-panel{width:100%;flex:1;min-height:0;}
}

/* Carousel media (una foto/video alla volta) */
.post-media-carousel{position:relative;margin-bottom:1rem;}
.post-media-carousel .carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:2px;}
.post-media-carousel .carousel-track::-webkit-scrollbar{display:none;}
.post-media-carousel .carousel-item{flex:0 0 100%;scroll-snap-align:start;}
.post-media-carousel .carousel-item img,.post-media-carousel .carousel-item video{width:100%;height:100%;object-fit:cover;}
/* z-index:2: le frecce/i pallini sono sopra al media, senza questo finirebbero sotto e non
   riceverebbero mai il click (il tap "passa attraverso"). */
.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:rgba(21,18,15,.55);color:#fff;border:none;border-radius:4px;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.carousel-nav .svg-icon{width:1.1em;height:1.1em;}
.carousel-prev{left:.5rem;}
.carousel-next{right:.5rem;}
.carousel-dots{position:absolute;bottom:.6rem;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:.35rem;}
.carousel-dot{width:.45rem;height:.45rem;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;border:none;padding:0;}
.carousel-dot.active{background:#fff;}
.carousel-counter{position:absolute;top:.6rem;right:.6rem;z-index:2;background:rgba(21,18,15,.55);color:#fff;font-size:.7rem;letter-spacing:.02em;padding:.2rem .55rem;border-radius:999px;}

/* Lightbox foto/video a tutto schermo: stesso markup/JS del carousel della card (frecce,
   pallini, contatore), solo più grande e senza il motivo "frame" — il contenuto viene
   ricostruito via JS ad ogni apertura, vedi site.js. */
/* inset:0 invece di width/height:100vw/100vh: 100vw include la larghezza della scrollbar
   verticale della pagina sotto, quindi il dialog sborda oltre il bordo destro visibile e fa
   comparire una scrollbar orizzontale spuria. inset:0 lo ancora esattamente ai bordi del
   viewport a prescindere da questo; max-width/height:none toglie il calc(100% - 6px) che il
   browser applica di default a un <dialog>, che altrimenti lo staccherebbe dai bordi. */
dialog.lightbox{box-sizing:border-box;border:none;padding:0;margin:0;position:fixed;inset:0;width:auto;height:auto;max-width:none;max-height:none;overflow:hidden;background:#000;}
dialog.lightbox::backdrop{background:rgba(0,0,0,.92);}
dialog.lightbox .post-media-carousel{width:100%;height:100%;margin-bottom:0;}
dialog.lightbox .carousel-track{height:100%;}
dialog.lightbox .carousel-item{height:100%;}
dialog.lightbox .carousel-item img,dialog.lightbox .carousel-item video{width:100%;height:100%;object-fit:contain;background:#000;}
dialog.lightbox .carousel-nav{width:2.75rem;height:2.75rem;background:rgba(255,255,255,.14);}
/* Pillola piena (non il vetro semi-trasparente usato per le frecce): su una foto chiara un
   cerchio bianco al 14% di opacità è praticamente invisibile — qui serve un contrasto
   garantito sempre, non solo su sfondo scuro. */
.lightbox-close{position:absolute;top:.9rem;right:.9rem;z-index:3;background:var(--blush);color:var(--ink);border:none;border-radius:50%;width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 10px rgba(21,18,15,.3);}

/* Dettaglio post: passare al post precedente/successivo senza chiudere la vista fullscreen —
   frecce accanto alla X (site.js le nasconde da sole sul primo/ultimo post) più le stesse
   frecce da tastiera, gestite in site.js sul dialog. */
.post-detail-nav-group{position:absolute;top:.9rem;right:3.6rem;z-index:3;display:flex;gap:.5rem;}
.post-detail-nav{background:rgba(21,18,15,.55);color:#fff;border:none;border-radius:50%;width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.post-detail-nav[hidden]{display:none;}
.lock-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;background:rgba(21,18,15,.4);color:#fff;text-align:center;padding:1rem;}

.reaction-row{display:flex;gap:.5rem;margin:1rem 0;flex-wrap:wrap;}
.reaction-btn{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--line);background:transparent;border-radius:4px;padding:.4rem .9rem;font-size:.85rem;cursor:pointer;}
.reaction-btn.active{background:var(--blush);border-color:var(--blush);}
.comments-area{margin-top:1rem;}
.comment-list{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1rem;}
.comment-item{font-size:.88rem;display:flex;justify-content:space-between;gap:.8rem;align-items:baseline;}
.comment-form{display:flex;gap:.6rem;align-items:flex-start;}
.comment-form textarea{flex:1;min-height:3.2rem;resize:vertical;font:inherit;font-size:.9rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--body-text);}
.comment-form textarea:focus{outline:none;border-color:var(--blush-deep);}
.comment-send-btn{border:1px solid var(--line);background:transparent;border-radius:4px;padding:.5rem 1.1rem;font-size:.82rem;cursor:pointer;white-space:nowrap;}
.comment-send-btn:hover{border-color:var(--body-text);}

.alert-success{background:#e6f0e4;border:1px solid #a8c9a2;color:#345a2c;padding:1rem 1.2rem;border-radius:6px;margin-bottom:1.5rem;}
.alert-info{background:var(--cream-2);border:1px solid var(--line);color:var(--body-text);padding:1rem 1.2rem;border-radius:6px;margin-bottom:1.5rem;}
.alert-error{background:#fbe9e7;border:1px solid #e2a49c;color:#8c2d21;padding:1rem 1.2rem;border-radius:6px;margin-bottom:1.5rem;}

.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--ink-2);color:var(--ink-text);border-top:1px solid var(--line-dark);box-shadow:0 -4px 24px rgba(0,0,0,.25);}
.cookie-banner-inner{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between;padding-block:1.1rem;}
.cookie-banner-inner p{flex:1 1 320px;font-size:.88rem;color:var(--ink-muted);}
.cookie-banner-inner a{text-decoration:underline;color:var(--ink-text);}
.cookie-banner-actions{display:flex;gap:.7rem;flex-shrink:0;}

/* Finché un <dialog> è aperto, blocca lo scroll della pagina sotto (vedi site.js): senza
   questo, su certi browser lo sfondo può scrollare/ridimensionarsi dietro al popup e far
   comparire scrollbar indesiderate. */
html.modal-open{overflow:hidden;}

/* Popup di conferma custom (es. disdetta abbonamento nel profilo) — <dialog> nativo, non window.confirm */
dialog.confirm-dialog{border:none;border-radius:10px;padding:0;max-width:360px;width:calc(100% - 2rem);box-shadow:0 10px 40px rgba(0,0,0,.2);}
dialog.confirm-dialog::backdrop{background:rgba(21,18,15,.5);}

/* Mappa punti di ritiro nel checkout (Leaflet) — <dialog> nativo, stesso pattern di confirm-dialog.
   Corpo diviso in lista (sempre cliccabile) + mappa: con centinaia di punti densi i pin si
   sovrappongono e diventano impossibili da centrare col dito/mouse, la lista resta l'unico
   modo affidabile di raggiungerli tutti. */
dialog.pickup-map-dialog{border:none;border-radius:10px;padding:0;max-width:820px;width:calc(100% - 2rem);box-shadow:0 10px 40px rgba(0,0,0,.2);}
dialog.pickup-map-dialog::backdrop{background:rgba(21,18,15,.5);}
.pickup-map-header{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.1rem;border-bottom:1px solid var(--line);font-weight:600;}
.pickup-map-close{background:none;border:none;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--body-muted);padding:0 .2rem;}
.pickup-map-body{display:flex;height:min(65vh,480px);}
.pickup-map-list{width:260px;flex-shrink:0;overflow-y:auto;border-right:1px solid var(--line);}
#pickupMapContainer{flex:1;height:100%;}
.pickup-map-list-item{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);padding:.6rem .8rem;cursor:pointer;font:inherit;}
.pickup-map-list-item:hover{background:var(--cream-2);}
.pickup-map-list-item.active{background:var(--blush);}
.pickup-map-list-item-name{font-weight:600;font-size:.88rem;}
.pickup-map-list-item-address{font-size:.78rem;color:var(--body-muted);margin-top:.1rem;}
.pickup-map-popup{min-width:180px;}
.pickup-map-popup-title{font-weight:600;margin-bottom:.2rem;}
.pickup-map-popup-address{font-size:.85rem;color:var(--body-muted);}
.pickup-map-popup-hours{font-size:.8rem;color:var(--body-muted);margin-top:.2rem;}
.pickup-map-popup-select{margin-top:.6rem;width:100%;}

@media (max-width:640px){
    .pickup-map-body{flex-direction:column;height:min(80vh,600px);}
    .pickup-map-list{width:100%;max-height:40%;border-right:none;border-bottom:1px solid var(--line);}
    #pickupMapContainer{flex:1;min-height:0;}
}

/* testi legali (Privacy/Cookie/Termini) */
.prose .updated{font-size:.82rem;color:var(--body-muted);margin-bottom:2rem;}
.prose h2{font-size:1.25rem;margin-top:2.2rem;margin-bottom:.6rem;}
.prose h2:first-of-type{margin-top:0;}
.prose p{margin-bottom:1rem;color:var(--body-muted);}
.prose ul{margin:0 0 1rem 1.2rem;padding:0;color:var(--body-muted);}
.prose li{margin-bottom:.4rem;}
.prose strong{color:var(--body-text);}
.prose .placeholder{background:rgba(219,168,117,.18);padding:.05rem .35rem;border-radius:3px;}