/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ============================================================
   Pagine prodotto: show (hero/galleria/dettagli, classi "pdp-")
   ed elenco esperienze (header/filtri/griglia, classi "xp-").
   Condividono gli stessi design token qui sotto. Tutte le classi
   sono prefissate per non entrare in conflitto con le utility di
   Tailwind (es. .grid, .field).
   ============================================================ */
:root {
  --pdp-ink: #14201a;
  --pdp-ink-soft: #4b594f;
  --pdp-paper: #f6f4ee;
  --pdp-surface: #ffffff;
  --pdp-border: #e2ddcf;
  --pdp-accent: #007635;
  --pdp-accent-deep: #00521f;
  --pdp-accent-soft: #e6f2ea;
  --pdp-amber-bg: #e79933;
  --pdp-shadow: 0 24px 60px -24px rgba(20, 32, 26, .35);
}

.pdp { background: var(--pdp-paper); color: var(--pdp-ink); font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif; }
.pdp h1, .pdp h2, .pdp h3 { font-family: 'Zilla Slab', Georgia, serif; margin: 0; text-wrap: balance; }
.pdp p { margin: 0; }

/* frame: il componente che rende presentabile una foto scarsa tanto quanto una buona */
.pdp-frame {
  position: relative; border-radius: 18px; overflow: hidden;
  box-shadow: var(--pdp-shadow); border: 1px solid color-mix(in srgb, var(--pdp-ink) 8%, transparent);
  background: var(--pdp-surface);
}
.pdp-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* velatura colore di marca: uniforma la resa, ammorbidisce la percezione della grana jpeg */
.pdp-frame .pdp-wash {
  position: absolute; inset: 0;
  background: linear-gradient(155deg, color-mix(in srgb, var(--pdp-accent-deep) 38%, transparent) 0%, transparent 55%, color-mix(in srgb, var(--pdp-amber-bg) 30%, transparent) 100%);
  mix-blend-mode: multiply;
}
/* grana leggera: la morbidezza di una foto compressa si legge come "voluta" invece che come difetto */
.pdp-frame .pdp-grain {
  position: absolute; inset: 0; opacity: .18; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='pdpGrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pdpGrain)'/%3E%3C/svg%3E");
}
.pdp-frame .pdp-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 60px rgba(0,0,0,.18); pointer-events: none; }
.pdp-frame .pdp-cap {
  position: absolute; left: 14px; bottom: 12px; z-index: 2; color: #fff; font-size: 12.5px; font-weight: 600;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

/* icone social nel footer: sono SVG incollati a mano da un admin
   (sanitize_svg_icon strippa l'attributo class per sicurezza, quindi non
   possiamo dimensionarle con una utility Tailwind sull'SVG stesso) e usano
   quasi sempre fill="currentColor" senza width/height propri — senza queste
   regole restano al colore di testo ereditato (spesso nero su sfondo nero,
   invisibili) e alla loro dimensione intrinseca. */
.footer-social-icon svg { width: 100%; height: 100%; display: block; }

/* scrim: oscura leggermente le foto hero a piena larghezza (home, chi siamo,
   contatti, newsletter) così il testo bianco sopra resta leggibile anche su
   foto chiare, senza bisogno di scegliere sempre foto scure apposta. */
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,16,11,.55) 0%, rgba(8,16,11,.28) 45%, rgba(8,16,11,.6) 100%);
}

/* ============================================================
   Chi siamo: stesso impianto "a righe alternate con icona rotonda"
   della vecchia pagina .com (a cui l'utente ha chiesto di restare
   vicini) ma senza le etichette numerate "Capitolo NN", con la foto
   vera di Maria al posto dell'icona generica nella prima riga invece
   che sepolta in fondo, e le icone in un cerchio object-fit:contain
   (sono quadrate, 835×804px — un riquadro rettangolare con cover le
   tagliava ai bordi). Le righe usano reveal_controller.js per un
   fade+risalita all'ingresso in viewport.
   ============================================================ */
.about { background: var(--pdp-paper); }

[data-controller="reveal"].reveal-ready {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}
[data-controller="reveal"].reveal-ready.is-visible { opacity: 1; transform: none; }

.about-story { max-width: 1080px; margin: 0 auto; padding: 76px 24px 20px; display: flex; flex-direction: column; gap: 84px; }
.about-story-row { display: grid; grid-template-columns: 240px 1fr; gap: 52px; align-items: center; }
.about-story-row--reverse { grid-template-columns: 1fr 240px; }
.about-story-row--reverse .about-story-media { order: 2; }

.about-story-badge {
  width: 200px; height: 200px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--pdp-shadow); margin: 0 auto;
}
.about-story-badge--green { background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--pdp-accent) 14%, white), var(--pdp-accent-soft)); }
.about-story-badge--amber { background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--pdp-amber-bg) 24%, white), color-mix(in srgb, var(--pdp-amber-bg) 12%, white)); }
.about-story-badge--red { background: radial-gradient(circle at 34% 28%, color-mix(in srgb, #d5382b 20%, white), color-mix(in srgb, #d5382b 9%, white)); }
.about-story-badge img { width: 60%; height: 60%; object-fit: contain; }

.about-story-photo {
  width: 200px; height: 200px; margin: 0 auto; border-radius: 28px; overflow: hidden;
  box-shadow: var(--pdp-shadow); border: 1px solid color-mix(in srgb, var(--pdp-ink) 8%, transparent);
}
.about-story-photo img { width: 100%; height: 100%; object-fit: cover; }

.about-story-eyebrow {
  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pdp-accent-deep); margin-bottom: 10px;
}
.about-story h3 { font-family: 'Zilla Slab', serif; font-weight: 700; font-size: clamp(1.45rem, 2.3vw, 1.85rem); color: var(--pdp-ink); margin-bottom: 14px; text-wrap: balance; }
.about-story p { color: var(--pdp-ink-soft); font-size: 16.5px; line-height: 1.75; max-width: 54ch; }

@media (max-width: 760px) {
  .about-story-row, .about-story-row--reverse { grid-template-columns: 1fr; text-align: center; gap: 26px; }
  .about-story-row--reverse .about-story-media { order: 0; }
  .about-story-badge, .about-story-photo { width: 156px; height: 156px; }
  .about-story p { margin-left: auto; margin-right: auto; }
}

.about-closing { max-width: 760px; margin: 0 auto; padding: 40px 24px 40px; text-align: center; border-top: 1px solid var(--pdp-border); }
.about-closing-sign { height: 28px; }
.about-closing-cert {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--pdp-accent-deep); text-decoration: none;
  border: 1.5px solid var(--pdp-accent); border-radius: 999px; padding: 11px 24px;
  transition: background-color .2s ease, color .2s ease;
}
.about-closing-cert:hover { background: var(--pdp-accent); color: #fff; }
.about-closing-cert svg { width: 15px; height: 15px; flex: none; }

/* ============================================================
   Newsletter: card di iscrizione centrata, riusa i campi .pdp-field
   già definiti più sotto per il form "Richiedi informazioni" —
   stesso aspetto, uno stile di campo solo per tutto il sito.
   ============================================================ */
.newsletter-wrap { max-width: 560px; margin: 0 auto; padding: 70px 24px 100px; }
.newsletter-card {
  background: var(--pdp-surface); border: 1px solid var(--pdp-border); border-radius: 20px;
  box-shadow: var(--pdp-shadow); padding: 44px 40px;
}
.newsletter-card .pdp-kicker { justify-content: center; }
.newsletter-card h2 { font-family: 'Zilla Slab', serif; font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.1rem); text-align: center; margin-top: 6px; text-wrap: balance; }
.newsletter-card .pdp-lede { text-align: center; margin: 14px auto 0; max-width: 42ch; }
.newsletter-card form { margin-top: 28px; display: grid; gap: 16px; }
.newsletter-note { margin-top: 18px; text-align: center; font-size: 12.5px; color: var(--pdp-ink-soft); }

@media (max-width: 560px) {
  .newsletter-card { padding: 32px 24px; }
}

/* ============================================================
   Contatti: form a sinistra (riusa .pdp-request-card, lo stesso
   componente "card form" della pagina prodotto) + scheda contatti e
   mappa a destra. La mappa usa company_map_controller.js, la stessa
   famiglia di exps_map_controller.js (importLibrary) invece dello
   script <script src=".../maps/api/js?...callback=initMap"> a parte
   che c'era prima — duplicava il bootstrap Maps già caricato una
   volta sola nel layout, causando "initMap is not a function" in
   console ogni volta che si visitava questa pagina.
   ============================================================ */
.contact-wrap { max-width: 1080px; margin: 0 auto; padding: 70px 24px 100px; }
.contact-grid { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }

.contact-info-card { background: var(--pdp-surface); border: 1px solid var(--pdp-border); border-radius: 16px; box-shadow: var(--pdp-shadow); padding: 28px; }
.contact-info-logo { height: 38px; width: auto; margin-bottom: 22px; }
.contact-info-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid var(--pdp-border); }
.contact-info-row:first-of-type { border-top: none; padding-top: 0; }
.contact-info-row svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--pdp-accent-deep); }
.contact-info-row a, .contact-info-row span { font-size: 14px; color: var(--pdp-ink); text-decoration: none; line-height: 1.5; }
.contact-info-row a:hover { color: var(--pdp-accent-deep); }

.contact-map-card { margin-top: 24px; border-radius: 16px; overflow: hidden; box-shadow: var(--pdp-shadow); border: 1px solid var(--pdp-border); }
.contact-map { height: 320px; width: 100%; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Area cliente (i miei ordini, profilo): stessa card .pdp-surface +
   stessi campi .pdp-field del resto del sito, al posto del bianco/
   grigio Tailwind generico che c'era prima. Login e registrazione
   (split foto+form) restano con l'impaginazione che avevano già —
   era già curata — solo i campi passano a .pdp-field per coerenza.
   ============================================================ */
.account-shell { background: var(--pdp-paper); padding: 60px 24px 100px; }
.account-card { max-width: 720px; margin: 0 auto; background: var(--pdp-surface); border: 1px solid var(--pdp-border); border-radius: 20px; box-shadow: var(--pdp-shadow); overflow: hidden; }

.account-header { display: flex; align-items: center; gap: 14px; padding: 26px 32px; background: linear-gradient(135deg, var(--pdp-accent-deep), #04140a); }
.account-avatar {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--pdp-amber-bg); color: #1c1305; font-family: 'Zilla Slab', serif; font-weight: 700; font-size: 15px; flex: none;
}
.account-header-name { font-size: 14px; font-weight: 700; color: #fff; }
.account-header-email { font-size: 12.5px; color: rgba(255,255,255,.62); }

.account-tabs { display: flex; gap: 28px; padding: 0 32px; border-bottom: 1px solid var(--pdp-border); }
.account-tab {
  padding: 16px 0; font-size: 13.5px; font-weight: 700; color: var(--pdp-ink-soft); text-decoration: none;
  border: none; border-bottom: 2px solid transparent; background: none; cursor: pointer; font-family: inherit;
}
.account-tab:hover { color: var(--pdp-ink); }
.account-tab[aria-current="page"] { color: var(--pdp-accent-deep); border-bottom-color: var(--pdp-accent); }

.account-body { padding: 36px 32px 40px; }
.account-body h1 { font-family: 'Zilla Slab', serif; font-weight: 700; font-size: 1.6rem; color: var(--pdp-ink); }
.account-body .pdp-sub { margin-top: 6px; font-size: 13px; color: var(--pdp-ink-soft); }
.account-body form { margin-top: 26px; display: grid; gap: 16px; }

.account-empty { margin-top: 24px; border: 2px dashed var(--pdp-border); border-radius: 14px; padding: 44px 24px; text-align: center; }
.account-empty p { color: var(--pdp-ink-soft); font-size: 14px; margin-bottom: 16px; }

.account-order-list { margin-top: 20px; display: flex; flex-direction: column; }
.account-order-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-top: 1px solid var(--pdp-border); }
.account-order-row:first-child { border-top: none; }
.account-order-title { font-weight: 700; color: var(--pdp-ink); text-decoration: none; font-size: 15px; }
.account-order-title:hover { color: var(--pdp-accent-deep); }
.account-order-meta { font-size: 12.5px; color: var(--pdp-ink-soft); margin-top: 2px; }
.account-order-amount { font-weight: 700; color: var(--pdp-ink); text-align: right; }
.account-order-status { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700; }
.account-order-status.is-paid { color: var(--pdp-accent-deep); }
.account-order-status.is-pending { color: var(--pdp-ink-soft); }

.account-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--pdp-ink-soft); text-decoration: none; }
.account-back:hover { color: var(--pdp-accent-deep); }

.account-summary { margin-top: 28px; border-top: 1px solid var(--pdp-border); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.account-summary-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.account-summary-row dt { color: var(--pdp-ink-soft); margin: 0; }
.account-summary-row dd { font-weight: 700; color: var(--pdp-ink); margin: 0; }

.account-danger { margin-top: 32px; border-top: 1px solid var(--pdp-border); padding-top: 20px; }
.account-danger p { font-size: 13px; color: var(--pdp-ink-soft); }
.account-danger button { margin-top: 6px; font-size: 13px; font-weight: 700; color: #b3261e; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.account-danger button:hover { text-decoration: underline; }

/* conferma ordine pubblica (/orders/:order_number, dopo il pagamento Nexi):
   stessa card di .account-card ma centrata, niente tab account (l'ospite
   può non avere un login). */
.order-confirm-card .account-body { text-align: center; }
.order-status-icon { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.order-status-icon svg { width: 30px; height: 30px; }
.order-status-icon.is-paid { background: var(--pdp-accent-soft); color: var(--pdp-accent-deep); }
.order-status-icon.is-pending { background: color-mix(in srgb, var(--pdp-amber-bg) 20%, white); color: #8a5a00; }
.order-status-icon.is-failed { background: #fbe4e1; color: #b3261e; }
.order-confirm-summary { text-align: left; }
.order-confirm-actions { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* header: niente foto a piena larghezza, il testo guida. La cover (galleria
   o foto singola) sta sempre sopra, a piena larghezza: qui resta solo testo. */
.pdp-header { max-width: 1180px; margin: 0 auto; padding: 40px 24px 20px; }
/* foto singola (senza galleria) come cover statica: stesso .pdp-bento-1
   della galleria (mai oltre 760px, niente grana), niente lightbox perché
   non c'è nulla da sfogliare. */
.pdp-cover-lead .pdp-frame { cursor: default; }
.pdp-kicker {
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pdp-accent-deep); display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
}
.pdp-kicker::before { content: ""; width: 18px; height: 2px; background: var(--pdp-amber-bg); flex: none; }
.pdp-header-grid h1 { font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 700; line-height: 1.08; }

.pdp-facts { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.pdp-fact {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--pdp-accent-deep); background: var(--pdp-accent-soft); border-radius: 999px; padding: 7px 13px;
}
.pdp-fact svg { width: 13px; height: 13px; flex: none; }

.pdp-cta-row { margin-top: 30px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
/* da desktop il bottone si affianca al titolo invece di stare su una riga
   propria sotto le chip: accorcia l'header e riporta le tab sotto
   (Informazioni/Mappa/Scheda) più in alto, come prima di questo giro di
   modifiche. Sotto i 641px resta il flusso naturale (kicker, h1, chip,
   bottone, descrizione) perché qui .pdp-header-text non è una grid. */
@media (min-width: 641px) {
  .pdp-header-text {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 24px;
    grid-template-areas:
      "kicker kicker"
      "title  cta"
      "facts  facts";
  }
  .pdp-header-text .pdp-kicker { grid-area: kicker; }
  .pdp-header-text h1 { grid-area: title; align-self: center; }
  .pdp-header-text .pdp-cta-row { grid-area: cta; margin-top: 0; align-self: center; justify-self: end; }
  .pdp-header-text .pdp-facts { grid-area: facts; }
  /* "Prenota ora"/"Richiedi informazioni" qui in alto puntano allo stesso
     widget (prenotazione o form) già visibile accanto alle tab da desktop,
     senza scorrere: sarebbe un doppione dello stesso bottone. Resta utile
     solo da mobile, dove il widget sta molto più in basso. Selettore
     composto (non solo .pdp-cta-mobile-only) apposta: stessa specificità di
     .pdp-cta dichiarata più sotto vorrebbe dire che il suo
     display:inline-block vince per ordine nel file, come già capitato con
     .pdp-gallery-lead. */
  .pdp-cta.pdp-cta-mobile-only { display: none; }
}
.pdp-cta {
  background: var(--pdp-accent); color: #fff; font-weight: 700; font-size: 15px; padding: 15px 28px;
  border-radius: 12px; border: none; cursor: pointer; text-decoration: none; display: inline-block;
}
.pdp-cta-block { display: block; width: 100%; text-align: center; border-radius: 999px; margin-top: 18px; }
.pdp-price .pdp-from { font-size: 11px; color: var(--pdp-ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.pdp-price .pdp-amount { font-family: 'Zilla Slab', serif; font-weight: 700; font-size: 23px; }

/* galleria: tessere modeste, mai a piena larghezza */
.pdp-gallery { max-width: 1180px; margin: 0 auto; padding: 40px 24px 90px; }
/* in apertura pagina (solo quando esiste): un filo meno di padding perché
   segue subito i breadcrumb, non un'altra sezione. Selettore composto
   (non solo .pdp-gallery-lead) apposta: stessa specificità di .pdp-gallery
   qui sopra vorrebbe dire che vince chi sta più in basso nel file, fragile
   — già capitato che questa regola restasse così silenziosamente ignorata. */
.pdp-gallery.pdp-gallery-lead { padding-top: 20px; padding-bottom: 36px; }
.pdp-gallery-head { margin-bottom: 24px; }
.pdp-gallery-head h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
/* bento: 1 foto grande + 2 impilate, la terza scurita con "+N foto" se ce
   ne sono altre — su mobile lo stesso contenitore diventa un carosello
   scorrevole (scroll-snap) con tutte le foto, una a piena larghezza per
   volta con i puntini sotto, come Instagram, invece del semplice
   impilamento verticale che avrebbe forzato desktop e mobile nello stesso
   layout. Le foto oltre la terza restano sempre nel DOM (solo nascoste su
   desktop): il lightbox ne ha bisogno per la navigazione prev/next su
   tutta la galleria, non solo sulle 3 visibili. */
.pdp-bento { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: 560px; }
.pdp-bento .pdp-frame { cursor: zoom-in; }
.pdp-bento .pdp-frame.is-big { grid-row: 1 / 3; }
.pdp-bento .pdp-frame.is-hidden-desktop { display: none; }
/* con 1 o 2 foto in tutto il bento a 4 celle lascerebbe spazio vuoto:
   1 foto = un solo riquadro a piena larghezza, 2 foto = due riquadri
   affiancati a piena altezza, invece di uno impilato su metà colonna
   vuota. Da 3 foto in su resta il bento con 1 grande + 2 impilate. */
/* con una sola foto niente più bento (2 o 3 riquadri) a farle da contorno:
   la foto nitida resta comunque mai ingrandita oltre la sua risoluzione
   reale (cover_fit_controller.js), ma il riquadro non è più contenuto a
   760px — ora è a piena larghezza come le altre gallerie, riempito da
   .pdp-cover-backdrop (la stessa foto sfocata e ingrandita) dietro la foto
   nitida invece di lasciare vuoto lo sfondo della pagina: sembra grande e
   piena quanto le altre sezioni, senza sgranare nulla di visibile. */
.pdp-bento.pdp-bento-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; height: 480px; position: relative; overflow: hidden; border-radius: 18px; }
.pdp-cover-backdrop { position: absolute; inset: 0; overflow: hidden; }
/* cover_fit_controller.js restringe questi custom property quando la foto
   sorgente è più piccola del riquadro, per non ingrandirla oltre la sua
   risoluzione reale; margin:auto la centra nello spazio che resta, sopra
   il backdrop (z-index) con un'ombra più marcata per "staccarla". */
.pdp-bento-1 .pdp-frame { width: var(--pdp-cover-w, 100%); height: var(--pdp-cover-h, 100%); margin: auto; position: relative; z-index: 1; box-shadow: 0 30px 70px -20px rgba(0,0,0,.5); }
/* stessa foto della cover, sfocata e ingrandita, dietro il riquadro
   nitido — riusata anche per riempire i margini del carosello mobile
   quando object-fit:contain lascia spazio vuoto in un .pdp-frame
   qualunque (non solo la cover singola), invece del semplice
   sfondo/velatura piatti di prima. */
.pdp-cover-backdrop img, .pdp-frame-backdrop img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(30px) brightness(.72) saturate(1.05);
  transform: scale(1.15);
}
.pdp-cover-backdrop::after, .pdp-frame-backdrop::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.32));
}
.pdp-frame-backdrop { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.pdp-bento.pdp-bento-2 .pdp-frame:nth-child(2) { grid-row: 1 / 3; }
.pdp-bento .pdp-cap { opacity: 0; transform: translateY(6px); transition: all .2s ease; }
.pdp-bento .pdp-frame:hover .pdp-cap { opacity: 1; transform: translateY(0); }
.pdp-bento .pdp-frame:hover img { transform: scale(1.045); }
.pdp-bento img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }

.pdp-bento-scrim { position: absolute; inset: 0; background: rgba(10,15,11,.55); z-index: 1; }
.pdp-bento-more-label {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: 'Zilla Slab', serif; font-weight: 700; font-size: 22px;
}

.pdp-bento-dots { display: none; justify-content: center; gap: 6px; margin-top: 14px; }
.pdp-bento-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--pdp-border); transition: width .2s ease, background .2s ease; }
.pdp-bento-dot.is-active { width: 16px; background: var(--pdp-accent); }

@media (max-width: 760px) {
  .pdp-bento {
    display: flex; height: auto; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -24px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .pdp-bento::-webkit-scrollbar { display: none; }
  .pdp-bento .pdp-frame { flex: 0 0 100%; aspect-ratio: 4/5; scroll-snap-align: start; border-radius: 0; border-left: none; border-right: none; }
  /* Foto intera nel carosello mobile invece di tagliata ai lati: le foto
     del sito sono di formato incoerente (spesso panoramiche), il riquadro
     4/5 verticale con cover ne tagliava via una parte importante.
     object-fit:contain invece di cover; .pdp-frame ha già
     background:var(--pdp-surface) per il bordo, sembra una scelta voluta
     (un passe-partout) invece di un ritaglio sbagliato. */
  .pdp-bento .pdp-frame img { object-fit: contain; }
  .pdp-bento .pdp-frame.is-hidden-desktop { display: block; }
  .pdp-bento-scrim, .pdp-bento-more-label { display: none; }
  .pdp-bento-dots { display: flex; }
}

/* lightbox: dimensione contenuta apposta, stesso trattamento foto del resto della pagina */
.pdp-lightbox {
  display: none; position: fixed; inset: 0; z-index: 100; background: rgba(8,12,9,.94);
  align-items: center; justify-content: center; flex-direction: column;
}
.pdp-lightbox:not(.hidden) { display: flex; }
.pdp-lightbox-stage { position: relative; width: min(640px, 84vw); aspect-ratio: 4/5; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.pdp-lightbox-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdp-lightbox .pdp-close, .pdp-lightbox .pdp-nav {
  position: absolute; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25);
  color: #fff; border-radius: 999px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(6px); z-index: 3;
}
.pdp-lightbox .pdp-close { top: -56px; right: 0; }
.pdp-lightbox .pdp-nav.pdp-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.pdp-lightbox .pdp-nav.pdp-next { right: 10px; top: 50%; transform: translateY(-50%); }

/* dettagli: tab informazioni/mappa/pdf + richiesta informazioni */
.pdp-details { max-width: 1180px; margin: 0 auto; padding: 0 24px 100px; }
.pdp-details-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 48px; align-items: start; }

.pdp-tabs-nav { display: flex; border-bottom: 1px solid var(--pdp-border); margin-bottom: 26px; flex-wrap: wrap; }
.pdp-tabs-nav a {
  font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 14px; text-decoration: none;
  color: var(--pdp-ink-soft); padding: 12px 4px; margin-right: 26px; position: relative; cursor: pointer;
}
.pdp-tabs-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--pdp-accent); transform: scaleX(0); transition: transform .2s ease;
}
.pdp-tabs-nav a[aria-current="page"] { color: var(--pdp-ink); }
.pdp-tabs-nav a[aria-current="page"]::after { transform: scaleX(1); }

.pdp-tab-panel .pdp-body-copy { color: var(--pdp-ink-soft); font-size: 15.5px; line-height: 1.7; max-width: 62ch; }
.pdp-tab-panel .pdp-body-copy p + p { margin-top: 14px; }
.pdp-tab-panel .pdp-body-copy figure { margin: 20px 0; }
.pdp-tab-panel .pdp-body-copy img { display: block; max-width: 100%; height: auto; border-radius: 12px; margin: 0 auto; }
.pdp-tab-panel .pdp-body-copy figcaption { margin-top: 6px; text-align: center; font-size: 12px; color: var(--pdp-ink-soft); }
.pdp-tab-panel .pdp-body-copy .video-container { position: relative; padding-top: 56.25%; margin: 20px 0; border-radius: 12px; overflow: hidden; }
.pdp-tab-panel .pdp-body-copy .video-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pdp-price-line { margin-top: 22px; font-family: 'Zilla Slab', serif; font-weight: 700; font-size: 21px; }
.pdp-price-line span { font-family: 'Work Sans', sans-serif; font-weight: 400; font-size: 13px; color: var(--pdp-ink-soft); }
.pdp-buy-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  background: var(--pdp-accent); color: #fff; font-weight: 700; font-size: 14px;
  padding: 12px 22px; border-radius: 10px; text-decoration: none;
}

.pdp-map-card { border: 1px solid var(--pdp-border); border-radius: 14px; overflow: hidden; }

.pdp-pdf-card { border: 1px dashed var(--pdp-border); border-radius: 14px; padding: 48px 24px; text-align: center; }
.pdp-pdf-card svg { width: 48px; height: 48px; margin: 0 auto 16px; color: var(--pdp-accent-deep); }
.pdp-pdf-card a { display: inline-flex; flex-direction: column; align-items: center; color: var(--pdp-ink); font-weight: 600; text-decoration: none; }
.pdp-pdf-card a span { border-bottom: 1px solid var(--pdp-border); padding-bottom: 2px; }
.pdp-pdf-card a:hover span { border-color: var(--pdp-accent); }

/* sidebar: prenota online e/o richiedi informazioni — entrambe le card
   possono essere presenti insieme (prodotto prenotabile ma con dubbi),
   quindi la sticky sta sul contenitore e non sulla singola card, altrimenti
   due elementi sticky impilati si accavallerebbero sullo stesso top:20px. */
.pdp-sidebar-stack { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 20px; }
.pdp-request-card {
  border: 1px solid var(--pdp-border); border-radius: 16px;
  background: var(--pdp-surface); padding: 28px; box-shadow: var(--pdp-shadow);
}
.pdp-request-card h3 { font-size: 1.2rem; }
.pdp-request-card .pdp-sub { margin-top: 6px; font-size: 13px; color: var(--pdp-ink-soft); }
.pdp-request-card form { margin-top: 22px; display: grid; gap: 14px; }
.pdp-field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .02em; margin-bottom: 6px; color: var(--pdp-ink); }
.pdp-field input, .pdp-field textarea {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--pdp-ink);
  background: var(--pdp-paper); border: 1px solid var(--pdp-border); border-radius: 9px;
  padding: 10px 12px; outline: none; box-sizing: border-box;
}
.pdp-field input:focus, .pdp-field textarea:focus { border-color: var(--pdp-accent); }
.pdp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pdp-field textarea { resize: vertical; min-height: 76px; }
/* .pdp-request-card form ha già display:grid+gap: fuori da quel contesto
   (login, registrazione…) i campi vanno spaziati esplicitamente. */
.pdp-field + .pdp-field, .pdp-field-row + .pdp-field,
.pdp-field + .pdp-field-row, .pdp-field-row + .pdp-field-row { margin-top: 16px; }
/* la regola sopra è pensata per campi impilati verticalmente, ma
   .pdp-field + .pdp-field colpisce anche i due .pdp-field affiancati
   dentro una .pdp-field-row (es. Nome/Cognome): margin-top spingeva in
   basso solo il secondo, disallineando le due colonne. */
.pdp-field-row > .pdp-field + .pdp-field { margin-top: 0; }
.pdp-submit {
  margin-top: 4px; width: 100%; background: var(--pdp-accent); color: #fff; font-weight: 700; font-size: 14px;
  padding: 13px; border-radius: 10px; border: none; cursor: pointer;
}

.pdp-request-card.pdp-purchase { text-align: center; }
.pdp-purchase-price { font-family: 'Zilla Slab', serif; font-weight: 700; font-size: 26px; color: var(--pdp-accent); }

@media (max-width: 860px) {
  .pdp-details-grid { grid-template-columns: 1fr; }
  .pdp-sidebar-stack { position: static; }
}

/* ============================================================
   Elenco esperienze (products#index): header, ricerca, filtri
   a chip, griglia card. Riusa i token e i componenti .pdp-frame/
   .pdp-kicker/.pdp-cta/.pdp-map-card definiti sopra.
   ============================================================ */
.xp-header { max-width: 1180px; margin: 0 auto; padding: 44px 24px 28px; }
.xp-header h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700; }
/* sottotitolo sotto un h1 (categoria, blog) o testo di stato vuoto
   (nessun articolo/esperienza): mancava la regola di base, restava testo
   di default del browser. .newsletter-card .pdp-lede sopra la sovrascrive
   apposta per quel contesto centrato. */
.pdp-lede { margin-top: 14px; max-width: 60ch; color: var(--pdp-ink-soft); font-size: 16px; line-height: 1.6; }
.pdp-lede-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 14px; color: var(--pdp-accent-deep); text-decoration: none;
}
.pdp-lede-more:hover { text-decoration: underline; }

.xp-search { margin-top: 22px; max-width: 420px; position: relative; }
.xp-search-input {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--pdp-ink);
  background: var(--pdp-surface); border: 1px solid var(--pdp-border); border-radius: 999px;
  padding: 12px 46px 12px 18px; outline: none; box-sizing: border-box;
}
.xp-search-input:focus { border-color: var(--pdp-accent); }
.xp-search-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 999px; border: none; background: var(--pdp-accent);
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.xp-search-btn svg { width: 16px; height: 16px; }
.xp-search-results {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; z-index: 20;
  max-height: 320px; overflow-y: auto; background: var(--pdp-surface); border: 1px solid var(--pdp-border);
  border-radius: 12px; box-shadow: var(--pdp-shadow); padding: 4px 0;
}

.xp-layout { max-width: 1180px; margin: 0 auto; padding: 0 24px 30px; display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }

.xp-filter-group + .xp-filter-group { margin-top: 26px; }
.xp-filter-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pdp-ink-soft); margin-bottom: 12px; }
.xp-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
  border-radius: 999px; border: 1px solid var(--pdp-border); background: var(--pdp-surface);
  font-size: 12.5px; font-weight: 600; color: var(--pdp-ink-soft); cursor: pointer; user-select: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.xp-chip:hover { border-color: var(--pdp-accent); color: var(--pdp-ink); }
.xp-chip-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.xp-chip:has(.xp-chip-input:checked) { background: var(--pdp-accent); border-color: var(--pdp-accent); color: #fff; }

.xp-filter-actions { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.xp-filter-reset { text-align: center; font-size: 12.5px; color: var(--pdp-ink-soft); text-decoration: none; }
.xp-filter-reset:hover { color: var(--pdp-accent-deep); text-decoration: underline; }

.xp-mobile-filters { max-width: 1180px; margin: 0 auto; padding: 0 24px 20px; }
.xp-filter-toggle {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--pdp-ink);
  background: var(--pdp-surface); border: 1px solid var(--pdp-border); border-radius: 999px; padding: 10px 16px; cursor: pointer;
}
.xp-filter-toggle svg { width: 15px; height: 15px; }
.xp-mobile-filter-panel { margin-top: 16px; padding: 20px; border: 1px solid var(--pdp-border); border-radius: 14px; background: var(--pdp-surface); }

.xp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.xp-card { display: block; text-decoration: none; color: inherit; }
.xp-card-photo { aspect-ratio: 4 / 3; margin-bottom: 14px; transition: box-shadow .2s ease; }
.xp-card:hover .xp-card-photo { box-shadow: 0 30px 70px -28px rgba(20, 32, 26, .45); }
.xp-card-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(20, 32, 26, .75); color: #fff;
  font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
}
.xp-card-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pdp-accent-deep); margin-bottom: 6px; }
.xp-card-title { font-family: 'Zilla Slab', serif; font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--pdp-ink); }
.xp-card-price { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--pdp-ink); }

.xp-map-canvas { width: 100%; height: 560px; }
.xp-map-empty, .xp-empty-state { padding: 60px 24px; text-align: center; color: var(--pdp-ink-soft); font-size: 14px; border: 1px dashed var(--pdp-border); border-radius: 14px; }
.xp-empty-state p + p { margin-top: 10px; }
.xp-section-head { margin: 56px 0 20px; }
.xp-section-head h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
@media (max-width: 640px) { .xp-map-canvas { height: 380px; } }

.xp-view-toggle { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 24px; background: var(--pdp-surface); border: 1px solid var(--pdp-border); border-radius: 999px; }
.xp-view-toggle a {
  display: inline-flex; align-items: center; gap: 6px; font-family: 'Work Sans', sans-serif;
  font-weight: 600; font-size: 13px; padding: 8px 16px; border-radius: 999px;
  color: var(--pdp-ink-soft); cursor: pointer; text-decoration: none;
}
.xp-view-toggle a svg { width: 15px; height: 15px; flex: none; }
.xp-view-toggle a[aria-current="true"] { background: var(--pdp-ink); color: var(--pdp-paper); }

@media (max-width: 900px) {
  .xp-layout { grid-template-columns: 1fr; }
  .xp-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* ============================================================
   Blog (articles#index / #show). Stessa identità delle Esperienze:
   la index riusa .xp-grid/.xp-card così com'è (foto+kicker+titolo,
   senza prezzo); la show riprende .pdp-frame per la foto di
   copertina e .pdp-body-copy per il testo lungo, ma in colonna
   singola centrata invece della griglia testo+foto dei prodotti,
   più adatta a un articolo letto dall'inizio alla fine.
   ============================================================ */
.blog-header { max-width: 760px; margin: 0 auto; padding: 44px 24px 8px; text-align: center; }
.blog-header .pdp-kicker { justify-content: center; }
.blog-header h1 { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.12; margin-top: 6px; }

.blog-hero-photo { max-width: 1000px; margin: 32px auto 48px; aspect-ratio: 21 / 9; }
@media (max-width: 640px) { .blog-hero-photo { aspect-ratio: 4 / 3; } }

.blog-body { max-width: 720px; margin: 0 auto; padding: 0 24px 100px; }
.blog-body .pdp-body-copy { color: var(--pdp-ink-soft); font-size: 16px; line-height: 1.75; }
.blog-body .pdp-body-copy p + p { margin-top: 18px; }
.blog-body .pdp-body-copy h3 { margin-top: 32px; margin-bottom: 4px; font-size: 1.3rem; }
.blog-body .pdp-body-copy figure { margin: 28px 0; }
.blog-body .pdp-body-copy img { display: block; max-width: 100%; height: auto; border-radius: 14px; margin: 0 auto; }
.blog-body .pdp-body-copy figcaption { margin-top: 8px; text-align: center; font-size: 12.5px; color: var(--pdp-ink-soft); }
.blog-body .pdp-body-copy .video-container { position: relative; padding-top: 56.25%; margin: 28px 0; border-radius: 14px; overflow: hidden; }
.blog-body .pdp-body-copy .video-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blog-back { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--pdp-border); }
@media (max-width: 600px) {
  .xp-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Dashboard admin: sistema a parte dal sito pubblico. Un cruscotto
   di lavoro va letto in fretta e denso di dati, non "raccontato" —
   niente serif editoriale, tipografia di sistema, superfici neutre.
   Stesso verde di brand solo sulle azioni primarie, per coerenza.
   Prefisso "adm-" per non entrare in conflitto con pdp-/xp-/Tailwind.
   ============================================================ */
:root {
  --adm-ink: #171d1a; --adm-ink-soft: #5b655e; --adm-ink-faint: #8b948d;
  --adm-paper: #f4f5f3; --adm-surface: #ffffff; --adm-border: #e3e6e1;
  --adm-accent: #007635; --adm-accent-deep: #00521f; --adm-accent-soft: #e6f2ea;
  --adm-danger: #b3261e; --adm-danger-soft: #fbe9e7;
  --adm-warn: #9a5b00; --adm-warn-soft: #fbf0dc;
  --adm-sidebar-bg: #12171b; --adm-sidebar-ink: #b7c1bd; --adm-sidebar-ink-soft: #6f7b76; --adm-sidebar-active: #1c2329;
  --adm-shadow: 0 12px 32px -16px rgba(20, 26, 22, .18);
  --adm-radius: 10px;
}

.adm { background: var(--adm-paper); color: var(--adm-ink); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.adm * { box-sizing: border-box; }

/* ---------- layout shell ---------- */
.adm-shell { display: flex; min-height: 100vh; }
.adm-sidebar {
  width: 264px; flex: none; background: var(--adm-sidebar-bg); color: var(--adm-sidebar-ink);
  display: flex; flex-direction: column; padding: 20px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.adm-sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 8px 10px 22px; }
.adm-sidebar-logo img { height: 28px; width: auto; }
.adm-nav-group { margin-bottom: 20px; }
.adm-nav-title { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--adm-sidebar-ink-soft); padding: 0 10px 8px; }
.adm-nav-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--adm-sidebar-ink); text-decoration: none; margin-bottom: 2px;
}
.adm-nav-link svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.adm-nav-link:hover { background: var(--adm-sidebar-active); color: #fff; }
.adm-nav-link[aria-current="page"] { background: var(--adm-accent); color: #fff; }
.adm-nav-link[aria-current="page"] svg { opacity: 1; }
.adm-sidebar-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); }

.adm-main { flex: 1; min-width: 0; }
.adm-topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px;
  height: 64px; padding: 0 24px; background: var(--adm-surface); border-bottom: 1px solid var(--adm-border);
}
.adm-topbar-search { position: relative; flex: 1; max-width: 360px; }
.adm-topbar-search input {
  width: 100%; font-size: 13.5px; font-family: inherit; color: var(--adm-ink); background: var(--adm-paper);
  border: 1px solid var(--adm-border); border-radius: 999px; padding: 8px 14px 8px 34px; outline: none;
}
.adm-topbar-search input:focus { border-color: var(--adm-accent); background: var(--adm-surface); }
.adm-topbar-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--adm-ink-faint); }
.adm-topbar-user { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--adm-ink-soft); }

/* campanella notifiche (richieste info + messaggi contatti non letti) */
.adm-bell { position: relative; }
.adm-bell-trigger {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; border: none; background: none; color: var(--adm-ink-soft); cursor: pointer;
}
.adm-bell-trigger:hover { background: var(--adm-paper); color: var(--adm-ink); }
.adm-bell-trigger svg { width: 19px; height: 19px; }
.adm-bell-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--adm-danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
}
.adm-bell-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: 340px;
  background: var(--adm-surface); border: 1px solid var(--adm-border); border-radius: 14px; box-shadow: var(--adm-shadow);
  overflow: hidden;
}
.adm-bell-menu-head { padding: 14px 16px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--adm-ink-faint); border-bottom: 1px solid var(--adm-border); }
.adm-bell-item {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 16px; border-bottom: 1px solid var(--adm-border);
  text-decoration: none; color: inherit;
}
.adm-bell-item:hover { background: var(--adm-paper); }
.adm-bell-item-kind { font-size: 11px; font-weight: 700; color: var(--adm-accent-deep); }
.adm-bell-item-title { font-size: 13.5px; font-weight: 600; color: var(--adm-ink); }
.adm-bell-item-time { font-size: 11.5px; color: var(--adm-ink-faint); }
.adm-bell-menu-foot { display: flex; flex-direction: column; padding: 8px 16px; gap: 4px; }
.adm-bell-menu-foot a { font-size: 12.5px; font-weight: 600; color: var(--adm-accent-deep); text-decoration: none; }
.adm-bell-menu-foot a:hover { text-decoration: underline; }
.adm-bell-empty { padding: 24px 16px; text-align: center; font-size: 13px; color: var(--adm-ink-faint); }

.adm-page { padding: 28px 32px 60px; max-width: 1180px; }
.adm-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.adm-page-header h1 { font-size: 22px; font-weight: 700; margin: 0; }
.adm-page-header .adm-sub { margin-top: 4px; font-size: 13.5px; color: var(--adm-ink-soft); }

/* ---------- panels / cards ---------- */
.adm-panel { background: var(--adm-surface); border: 1px solid var(--adm-border); border-radius: 14px; box-shadow: var(--adm-shadow); margin-bottom: 22px; }
.adm-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--adm-border); }
.adm-panel-header h2 { font-size: 15px; font-weight: 700; margin: 0; }
.adm-panel-header .adm-sub { font-size: 12.5px; color: var(--adm-ink-soft); margin-top: 2px; }
.adm-panel-body { padding: 18px 20px; }

/* ---------- riepilogo di sola lettura (dl label/valore) ---------- */
.adm-summary-row { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--adm-border); font-size: 13.5px; }
.adm-summary-row:first-child { border-top: none; }
.adm-summary-row dt { color: var(--adm-ink-soft); font-weight: 600; margin: 0; }
.adm-summary-row dd { margin: 0; color: var(--adm-ink); }
.adm-summary-row dd > div + div { margin-top: 4px; }
.adm-summary-row dd img { max-width: 240px; border-radius: 8px; display: block; margin: 6px 0; }
.adm-summary-row dd figcaption { font-size: 11px; color: var(--adm-ink-faint); }
.adm-summary-row dd a { color: var(--adm-accent-deep); }
.adm-summary-icon { display: inline-flex; width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; color: var(--adm-ink-soft); }

/* ---------- table ---------- */
/* "Tabella" a div, non <table>: un <turbo-frame> per riga dentro un vero
   <tr> viene spostato dal parser fuori dal <table> (HTML hoisting delle
   righe non valide) — coi div il problema semplicemente non esiste. */
.adm-list { font-size: 13.5px; }
.adm-list-head { display: flex; gap: 16px; padding: 0 10px 8px; }
.adm-list-head span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--adm-ink-faint); }
.adm-list-row { display: flex; align-items: center; gap: 16px; padding: 10px; border-top: 1px solid var(--adm-border); }
.adm-list-row:first-child { border-top: none; }
.adm-list-row .adm-cell { flex: 1; min-width: 0; }
.adm-list-row .adm-cell-fixed { flex: none; }
.adm-row-actions { display: flex; gap: 2px; margin-left: auto; flex: none; }
.adm-empty { padding: 28px 10px; text-align: center; color: var(--adm-ink-faint); font-size: 13px; }

/* ---------- buttons ---------- */
.adm-btn {
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-weight: 600; font-size: 13px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
.adm-btn svg { width: 14px; height: 14px; flex: none; }
.adm-btn-primary { background: var(--adm-accent); color: #fff; }
.adm-btn-primary:hover { background: var(--adm-accent-deep); }
.adm-btn-ghost { background: var(--adm-surface); border-color: var(--adm-border); color: var(--adm-ink); }
.adm-btn-ghost:hover { border-color: var(--adm-accent); color: var(--adm-accent-deep); }
.adm-btn-danger-ghost { background: none; border: none; color: var(--adm-danger); padding: 6px; border-radius: 6px; display: inline-flex; cursor: pointer; }
.adm-btn-danger-ghost svg { width: 15px; height: 15px; flex: none; }
.adm-btn-danger-ghost:hover { background: var(--adm-danger-soft); }
.adm-btn-danger { background: var(--adm-danger); color: #fff; }
.adm-btn-danger:hover { background: #8f1f19; }

/* ---------- confirm dialog (sostituisce il confirm() nativo) ---------- */
/* position+transform espliciti: il reset di Tailwind azzera il margin di
   default del browser (normalmente margin:auto), che è quello che
   centrerebbe <dialog> da solo — senza, resta ancorato in alto a sinistra. */
.adm-confirm-dialog, .adm-form-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }
.adm-confirm-dialog { border: none; border-radius: 14px; padding: 22px; box-shadow: var(--adm-shadow); max-width: 360px; font-family: inherit; }
.adm-confirm-dialog::backdrop { background: rgba(10, 14, 12, .5); }
.adm-confirm-dialog p { margin: 0 0 18px; font-size: 14px; color: var(--adm-ink); }
.adm-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* La sidebar (264px, sempre visibile da tablet in su) non fa parte
   dell'area di contenuto: centrare i dialog su tutto il viewport li fa
   sembrare spostati a sinistra rispetto alla pagina che si sta guardando.
   Sotto i 901px la sidebar diventa un overlay (non riduce più l'area di
   contenuto), quindi lì il centro-viewport è di nuovo quello giusto. */
@media (min-width: 901px) {
  .adm-confirm-dialog, .adm-form-dialog { left: calc(50% + 132px); }
}

/* ---------- form dialog (new/edit dentro un turbo-frame, riusabile) ---------- */
.adm-form-dialog { border: none; border-radius: 16px; padding: 0; box-shadow: var(--adm-shadow); width: min(680px, 92vw); max-height: 90vh; font-family: inherit; }
.adm-form-dialog::backdrop { background: rgba(10, 14, 12, .5); }
.adm-form-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--adm-border); }
.adm-form-dialog-head h2 { font-size: 16px; margin: 0; }
.adm-form-dialog turbo-frame { display: block; padding: 20px; overflow-y: auto; max-height: calc(90vh - 60px); }
.adm-form-dialog turbo-frame:empty::before { content: "Caricamento…"; color: var(--adm-ink-faint); font-size: 13px; }

/* ---------- maniglia di trascinamento per il riordino (SortableJS) ---------- */
.adm-drag-handle { cursor: grab; color: var(--adm-ink-faint); display: flex; align-items: center; flex: none; touch-action: none; }
.adm-drag-handle svg { width: 16px; height: 16px; }
.adm-list-row.sortable-ghost { opacity: .4; }
.adm-btn-icon { padding: 6px; border-radius: 6px; background: none; border: none; color: var(--adm-ink-soft); cursor: pointer; display: inline-flex; }
.adm-btn-icon svg { width: 15px; height: 15px; flex: none; }
.adm-btn-icon:hover { background: var(--adm-paper); color: var(--adm-ink); }

/* ---------- forms ---------- */
.adm-field { display: flex; flex-direction: column; gap: 5px; }
.adm-field label { font-size: 12px; font-weight: 700; color: var(--adm-ink); }
.adm-field input, .adm-field select, .adm-field textarea {
  font-family: inherit; font-size: 13.5px; color: var(--adm-ink); background: var(--adm-paper);
  border: 1px solid var(--adm-border); border-radius: 8px; padding: 8px 11px; outline: none;
}
.adm-field input:focus, .adm-field select:focus, .adm-field textarea:focus { border-color: var(--adm-accent); background: var(--adm-surface); }
.adm-inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding-top: 14px; margin-top: 14px; border-top: 1px dashed var(--adm-border); }
.adm-inline-form .adm-field { flex: 1; min-width: 140px; }
.adm-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.adm-form-grid .adm-field-full { grid-column: 1 / -1; }
.adm-trix-wrap trix-editor { min-height: 220px; font-size: 13.5px; border-color: var(--adm-border); border-radius: 8px; }

/* ---------- toggle switch (sostituisce le coppie di radio Sì/No) ---------- */
.adm-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.adm-toggle-row .adm-toggle-label { font-size: 13.5px; font-weight: 600; color: var(--adm-ink); }
.adm-toggle-row .adm-sub { font-size: 12px; color: var(--adm-ink-soft); margin-top: 2px; }
.adm-toggle { position: relative; display: inline-flex; flex: none; width: 42px; height: 24px; }
.adm-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.adm-toggle-track {
  position: absolute; inset: 0; background: var(--adm-border); border-radius: 999px; transition: background .15s ease;
}
.adm-toggle-track::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease;
}
.adm-toggle input:checked + .adm-toggle-track { background: var(--adm-accent); }
.adm-toggle input:checked + .adm-toggle-track::before { transform: translateX(18px); }
.adm-toggle input:focus-visible + .adm-toggle-track { outline: 2px solid var(--adm-accent); outline-offset: 2px; }

/* ---------- griglia di checkbox "chip" (categorie, zone geografiche) ---------- */
.adm-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.adm-check-chip {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--adm-ink);
  background: var(--adm-paper); border: 1px solid var(--adm-border); border-radius: 8px; padding: 8px 10px; cursor: pointer;
}
.adm-check-chip:has(input:checked) { background: var(--adm-accent-soft); border-color: var(--adm-accent); color: var(--adm-accent-deep); }
.adm-check-chip input { accent-color: var(--adm-accent); flex: none; }

/* ---------- input di ricerca a pillola (index Prodotti) ---------- */
.adm-search { position: relative; max-width: 320px; }
.adm-search input {
  width: 100%; font-size: 13.5px; font-family: inherit; color: var(--adm-ink); background: var(--adm-paper);
  border: 1px solid var(--adm-border); border-radius: 999px; padding: 8px 14px 8px 34px; outline: none;
}
.adm-search input:focus { border-color: var(--adm-accent); background: var(--adm-surface); }
.adm-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--adm-ink-faint); pointer-events: none; }
.adm-search-results {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; z-index: 20;
  max-height: 320px; overflow-y: auto; background: var(--adm-surface); border: 1px solid var(--adm-border);
  border-radius: 10px; box-shadow: var(--adm-shadow); padding: 4px 0;
}

/* ---------- badge di stato (attivo/non disponibile, acquistabile) ---------- */
.adm-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  padding: 3px 9px; border-radius: 999px; background: var(--adm-paper); color: var(--adm-ink-soft);
}
.adm-badge-on { background: var(--adm-accent-soft); color: var(--adm-accent-deep); }
.adm-badge-off { background: var(--adm-danger-soft); color: var(--adm-danger); }
.adm-badge-warn { background: var(--adm-warn-soft); color: var(--adm-warn); }

/* ---------- tabella dati tabellari (Ordini) — niente drag/turbo-frame per riga, quindi <table> vera ---------- */
.adm-table-wrap { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.adm-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--adm-ink-faint); padding: 10px 14px; border-bottom: 1px solid var(--adm-border); white-space: nowrap; }
.adm-table td { padding: 12px 14px; border-bottom: 1px solid var(--adm-border); color: var(--adm-ink); vertical-align: middle; }
.adm-table tbody tr:last-child td { border-bottom: none; }
.adm-table tbody tr:hover { background: var(--adm-paper); }
.adm-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.adm-table .adm-mono { font-size: 12.5px; }

/* ---------- paginazione (elenchi lunghi, es. Iscritti) ---------- */
.adm-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.adm-pagination-status { font-size: 13px; color: var(--adm-ink-faint); }
.adm-btn.is-disabled { opacity: .45; pointer-events: none; }

/* ---------- griglia immagini galleria: drag-to-reorder + elimina in overlay ---------- */
.adm-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.adm-gallery-tile { position: relative; border-radius: 8px; overflow: hidden; }
.adm-gallery-tile img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--adm-border); -webkit-user-drag: none; user-select: none; }
.adm-gallery-tile.sortable-ghost { opacity: .35; }
.adm-gallery-tile-handle {
  position: absolute; top: 6px; left: 6px; display: inline-flex; padding: 5px; border-radius: 6px;
  background: rgba(23, 29, 26, .65); color: #fff; cursor: grab; touch-action: none;
  opacity: 0; transition: opacity .12s ease;
}
.adm-gallery-tile-handle svg { width: 14px; height: 14px; flex: none; }
.adm-gallery-tile:hover .adm-gallery-tile-handle { opacity: 1; }
.adm-gallery-tile-delete {
  position: absolute; top: 6px; right: 6px; display: inline-flex; padding: 5px; border-radius: 6px;
  background: rgba(23, 29, 26, .65); color: #fff; border: none; cursor: pointer;
  opacity: 0; transition: opacity .12s ease;
}
.adm-gallery-tile-delete svg { width: 14px; height: 14px; flex: none; }
.adm-gallery-tile:hover .adm-gallery-tile-delete, .adm-gallery-tile-delete:focus-visible { opacity: 1; }
.adm-gallery-tile-delete:hover { background: var(--adm-danger); }

/* ---------- guida amministratore ---------- */
.adm-guide-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-guide-toc a {
  font-size: 12.5px; font-weight: 600; color: var(--adm-ink-soft); text-decoration: none;
  background: var(--adm-paper); border: 1px solid var(--adm-border); border-radius: 999px; padding: 6px 13px;
}
.adm-guide-toc a:hover { border-color: var(--adm-accent); color: var(--adm-accent-deep); }
.adm-guide-steps { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 13.5px; line-height: 1.55; }
.adm-guide-steps li::marker { color: var(--adm-accent); font-weight: 700; }
.adm-guide-steps ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.adm-guide-fields { margin: 0; font-size: 13.5px; }
.adm-guide-fields dt { font-weight: 700; color: var(--adm-ink); margin-top: 8px; }
.adm-guide-fields dt:first-child { margin-top: 0; }
.adm-guide-fields dd { margin: 2px 0 0; color: var(--adm-ink-soft); }
.adm-guide-note {
  background: var(--adm-accent-soft); border-left: 3px solid var(--adm-accent); color: var(--adm-accent-deep);
  padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: 13px; margin-top: 4px;
}
.adm-guide-warn { background: var(--adm-warn-soft); border-left-color: var(--adm-warn); color: var(--adm-warn); }
.adm-guide-kbd {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12px; background: var(--adm-paper);
  border: 1px solid var(--adm-border); border-radius: 5px; padding: 1px 6px;
}

/* ---------- toast ---------- */
.adm-toast-stack { position: fixed; top: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 10px; width: min(320px, calc(100vw - 40px)); }
.adm-toast {
  display: flex; align-items: center; gap: 10px; background: var(--adm-ink); color: #fff; font-size: 13px; font-weight: 600;
  padding: 12px 14px; border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.35);
  animation: adm-toast-in .18s ease-out;
}
.adm-toast.adm-toast-danger { background: var(--adm-danger); }
.adm-toast svg { width: 16px; height: 16px; flex: none; }
@keyframes adm-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.adm-topbar-burger { display: none; background: none; border: none; padding: 6px; color: var(--adm-ink); cursor: pointer; }
.adm-topbar-burger svg { width: 22px; height: 22px; }
.adm-sidebar-backdrop { position: fixed; inset: 0; z-index: 39; background: rgba(10, 14, 12, .5); }

@media (max-width: 900px) {
  .adm-sidebar {
    position: fixed; z-index: 40; top: 0; left: 0; height: 100vh;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .adm-sidebar.is-open { transform: translateX(0); }
  .adm-topbar-burger { display: inline-flex; }
  .adm-page { padding: 20px 16px 48px; }
}