/** Shopify CDN: Minification failed

Line 865:0 Unexpected "}"

**/
/* Prata auto-ospitato (SIL Open Font License).
   Serve perché l'handle Shopify `prata_n4` non esiste più e viene sostituito
   con Playfair: il vero Prata delle pagine PageFly arrivava da Google Fonts.
   Ospitandolo qui otteniamo lo stesso font senza richiesta a terzi. */
@font-face {
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('prata-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
  Pasticceria Panico — stili delle sezioni custom.
  Sostituiscono le pagine generate da PageFly.
  Scala tipografica e spaziature replicate 1:1 dal CSS PageFly originale.

  Breakpoint (gli stessi che usava PageFly):
    mobile   ≤ 767px
    tablet   768–1024px
    laptop   1025–1199px
    desktop  ≥ 1200px
*/

.panico {
  --panico-container: 1200px;
  --panico-text: rgb(21, 23, 18);
  font-family: var(--font-body-family);
  color: var(--panico-text);
}

.panico * { box-sizing: border-box; }

.panico__container {
  width: 100%;
  max-width: var(--panico-container);
  margin-inline: auto;
  padding-inline: 15px;
}

/* --- Tipografia: scala presa dagli stili globali PageFly --- */
.panico__h1,
.panico__h2 {
  font-family: 'Prata', var(--font-heading-family);
  font-weight: 400;
  color: #000;
  /* spaziatura lettere ereditata dal tema, come sul sito attuale */
}
.panico__h1 { font-size: 50px; margin: 0 0 16px; }
.panico__h2 { font-size: 40px; line-height: var(--panico-h2-lh, 1.25em); margin: 0 0 var(--panico-h2-mb, 8px); }

.panico__body { font-size: 16px; line-height: 1.5em; margin: 16px 0; }
.panico__body > p:first-child { margin-top: 0; }
.panico__body > p:last-child  { margin-bottom: 0; }

.panico__eyebrow {
  font-size: 14px;
  text-transform: uppercase;
  line-height: 1.5em;
  margin: 16px 0;
}

@media (max-width: 1024px) and (min-width: 768px) {
  .panico__h1 { font-size: 40px; }
  .panico__h2 { font-size: 32px; }
}
@media (max-width: 767px) {
  .panico__h1 { font-size: 36px; line-height: 1.3em; }
  .panico__h2 { font-size: 26px; line-height: 1.3em; }
}

/* ============================================================
   Hero di pagina/collezione: titolo centrato + immagine larga
   ============================================================ */
.panico-hero { padding-top: var(--hero-pt, 100px); padding-bottom: 0; }

.panico-hero__text {
  display: flex;
  flex-flow: row nowrap;
  place-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: var(--hero-gap, 100px);
}
.panico-hero__text-inner { max-width: 100%; }
.panico-hero__desc {
  font-size: 18px;
  text-align: center;
  margin: 0;
  line-height: var(--hero-desc-lh, inherit);
  /* interlinea non impostata: eredita quella del tema, come faceva PageFly */
}
.panico-hero__desc > p { margin: 0; }

.panico-hero__media {
  display: flex;
  flex-flow: row nowrap;
  place-content: center;
  align-items: center;
  width: 100%;
}
.panico-hero__media img {
  width: var(--hero-img-w, 1200px);
  max-width: 100%;
  height: var(--hero-img-h, 350px);
  object-fit: cover;
  object-position: center var(--hero-img-focal, 50%);
  display: block;
}

@media (max-width: 1199px) and (min-width: 1025px) {
  .panico-hero { padding-inline: 24px; }
  .panico-hero__text { margin-bottom: var(--hero-gap-lap, 80px); }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .panico-hero { padding-top: var(--hero-pt-tab, 80px); padding-inline: 20px; }
  .panico-hero__text { margin-bottom: var(--hero-gap-tab, 48px); }
  .panico-hero__media img { width: 100%; }
}
@media (max-width: 767px) {
  .panico-hero { padding-top: var(--hero-pt-mob, 64px); }
  .panico-hero__text { margin-bottom: var(--hero-gap-mob, 24px); }
  .panico-hero__text-inner { padding-inline: 16px; }
  .panico-hero__desc { font-size: 16px; }
  .panico-hero__media img { width: 100%; height: var(--hero-img-h-mob, 200px); }
}

/* ============================================================
   Righe testo/immagine alternate
   ============================================================ */
.panico-rows { padding: var(--rows-pt, 140px) 0 var(--rows-pb, 140px); }

.panico-row {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
}
.panico-row__col { display: flex; }
/* l'immagine ad arco è centrata verticalmente, come nell'originale */
.panico-row--arch .panico-row__col--media { align-items: center; }
.panico-row__col > * { width: 100%; }

.panico-row__text {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}
/* alcune colonne dell'originale sono allineate in alto anziché centrate */
.panico-row__text--top { display: block; }

.panico-row__media img {
  width: 100%;
  height: var(--row-img-h, 476px);
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* immagine a destra (testo per primo) */
.panico-row--media-right .panico-row__text  { padding-right: var(--text-inset, 30%); padding-left: var(--text-inset-outer, 0%); }
.panico-row--media-right .panico-row__media { padding-left: var(--media-inset, 15%); }
/* immagine a sinistra (immagine per prima) */
.panico-row--media-left  .panico-row__text  { padding-left: var(--text-inset, 30%); padding-right: var(--text-inset-outer, 0%); }
.panico-row--media-left  .panico-row__media { padding-right: var(--media-inset, 15%); }

/* larghezza colonne: tablet e desktop possono differire, come nell'originale */
@media (min-width: 768px) and (max-width: 1024px) {
  .panico-row__col--text  { flex-basis: calc(100% / 12 * var(--col-text-tab, 6));  max-width: calc(100% / 12 * var(--col-text-tab, 6)); }
  .panico-row__col--media { flex-basis: calc(100% / 12 * var(--col-media-tab, 6)); max-width: calc(100% / 12 * var(--col-media-tab, 6)); }
}
@media (min-width: 1025px) {
  .panico-row__col--text  { flex-basis: calc(100% / 12 * var(--col-text, 6));  max-width: calc(100% / 12 * var(--col-text, 6)); }
  .panico-row__col--media { flex-basis: calc(100% / 12 * var(--col-media, 6)); max-width: calc(100% / 12 * var(--col-media, 6)); }
}

@media (max-width: 1199px) and (min-width: 1025px) {
  .panico-rows { padding-inline: 24px; }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .panico-rows { padding: var(--rows-pt-tab, 80px) 20px var(--rows-pb-tab, 80px); }
  .panico-row { align-items: center; }
  .panico-row + .panico-row { margin-top: var(--row-gap-tab, 48px); }
  .panico-row--media-right .panico-row__text  { padding-right: 68px; padding-left: 0; }
  .panico-row--media-left  .panico-row__text  { padding-left: 68px; padding-right: 0; }
  .panico-row__media { padding: 0 !important; }
  .panico-row__media img { height: var(--row-img-h-tab, 400px); }
}

@media (max-width: 767px) {
  .panico-rows { padding: var(--rows-pt-mob, 40px) 16px var(--rows-pb-mob, 64px); }
  .panico-row { flex-flow: row wrap; }
  .panico-row + .panico-row { margin-top: var(--row-gap-mob, 64px); }
  .panico-row__col { max-width: 100%; flex-basis: 100%; }
  /* su mobile il testo sta sempre sopra l'immagine */
  .panico-row--media-left .panico-row__col--text { order: -1; }
  .panico-row__text { padding: 0 !important; margin-bottom: 24px; }
  .panico-row__media { padding: 0 !important; }
  .panico-row__media img { height: var(--row-img-h-mob, 300px); }
}

/* ============================================================
   Elenco prodotti (griglia a schede oppure riga immagine+titolo)
   ============================================================ */
.panico-plist { padding: var(--plist-pt, 140px) 0 var(--plist-pb, 140px); }

.panico-plist__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 var(--plist-heading-mb, 32px);
}
.panico-plist__heading { text-align: left; margin: 0; }
.panico-plist__headlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-family: var(--font-body-family);
  font-size: 16px;
  color: var(--panico-text);
  text-decoration: none;
}
.panico-plist__headlink:hover { text-decoration: underline; }
.panico-plist__headlink svg { width: 16px; height: 16px; }
@media (max-width: 767px) {
  .panico-plist__head { flex-flow: column; align-items: flex-start; gap: 8px; }
}

.panico-plist__grid {
  list-style: none;
  margin: 0 calc(-1 * var(--plist-gap, 15px));
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.panico-plist__item {
  padding: var(--plist-gap, 15px);
  flex-basis: calc(100% / var(--plist-cols, 4));
  max-width: calc(100% / var(--plist-cols, 4));
}

.panico-plist__link {
  display: block;
  height: 100%;
  padding-bottom: var(--plist-card-pb, 0);
  border-bottom: var(--plist-card-border, none);
  text-align: center;
  color: inherit;
  text-decoration: none;
}
.panico-plist__link:hover .panico-plist__title { text-decoration: underline; }

.panico-plist__media { margin-bottom: var(--plist-media-mb, 24px); width: 100%; overflow: hidden; }
.panico-plist__media img {
  width: 100%;
  height: auto;
  max-height: var(--plist-img-max-h, none);
  object-fit: contain;
  display: block;
  transition: transform .4s ease;
}
.panico-plist__link:hover .panico-plist__media img { transform: scale(1.1); }

.panico-plist__title {
  font-family: 'Prata', var(--font-heading-family);
  font-weight: var(--plist-title-weight, 600);
  font-size: var(--plist-title-fs, 22px);
  line-height: 1.5em;
  color: var(--panico-text);
  margin: 0 0 8px;
  text-align: left;
}
.panico-plist__price {
  display: flex;
  font-family: var(--font-body-family);
  font-size: 16px;
  /* interlinea ereditata dal tema, come sul sito attuale */
}
.panico-plist__desc {
  font-family: var(--font-body-family);
  font-size: 16px;
  /* interlinea ereditata dal tema, come sul sito attuale */
  margin: 0;
  text-align: left;
}
.panico-plist__desc > p { margin: 0; }

/* variante “in riga”: immagine accanto al titolo */
.panico-plist__link--inline {
  display: flex;
  flex-flow: row;
  align-items: center;
  text-align: left;
}
.panico-plist__link--inline .panico-plist__media {
  margin: 0 16px 0 0;
  flex: 0 0 auto;
  width: auto;
}
/* come sul sito attuale l'immagine è vincolata in ALTEZZA, non in larghezza */
.panico-plist__link--inline .panico-plist__media img {
  height: var(--plist-inline-img-h, 100px);
  width: auto;
  max-height: none;
}
.panico-plist__link--inline .panico-plist__title { margin-bottom: 0; }

@media (min-width: 768px) and (max-width: 1024px) {
  .panico-plist { padding: var(--plist-pt-tab, 80px) 20px var(--plist-pb-tab, 80px); }
  .panico-plist__heading { margin-bottom: var(--plist-heading-mb-tab, 40px); }
  .panico-plist__grid { margin: 0 calc(-1 * var(--plist-gap-tab, 15px)); }
  .panico-plist__item {
    padding: var(--plist-gap-tab, 15px);
    flex-basis: calc(100% / var(--plist-cols-tab, 3));
    max-width: calc(100% / var(--plist-cols-tab, 3));
  }
  .panico-plist__media { margin-bottom: 16px; }
  .panico-plist__title { font-weight: 400; font-size: var(--plist-title-fs-tab, 18px); }
}

@media (max-width: 1199px) and (min-width: 1025px) {
  .panico-plist { padding-inline: 24px; }
}

@media (max-width: 767px) {
  .panico-plist { padding: var(--plist-pt-mob, 40px) 16px var(--plist-pb-mob, 64px); }
  .panico-plist__heading { margin-bottom: var(--plist-heading-mb-mob, 8px); }
  .panico-plist__grid { margin: 0 calc(-1 * var(--plist-gap-mob, 8px)); }
  .panico-plist__item {
    padding: var(--plist-gap-mob, 8px);
    flex-basis: calc(100% / var(--plist-cols-mob, 2));
    max-width: calc(100% / var(--plist-cols-mob, 2));
  }
  .panico-plist__media { margin-bottom: 16px; }
  .panico-plist__title {
    font-weight: 400;
    font-size: var(--plist-title-fs-mob, 18px);
    line-height: 22px;
  }
}

/* ============================================================
   Invito all'azione: titolo + bottone
   ============================================================ */
.panico-cta { padding: var(--cta-pt, 0) 0 var(--cta-pb, 0); text-align: center; }
.panico-cta__heading {
  margin: var(--cta-heading-mt, 100px) 0 var(--cta-heading-mb, 72px);
  text-align: center;
}
.panico-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: var(--cta-btn-w, 300px);
  max-width: 100%;
  padding: 16px 20px;
  font-family: var(--font-body-family);
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 40px;
  background-color: var(--panico-text);
  color: #fff;
  transition: background-color .2s ease;
}
.panico-cta__button:hover { background-color: rgb(188, 147, 49); color: #fff; }
.panico-cta__button svg { width: 16px; height: 16px; flex: 0 0 auto; }

@media (min-width: 768px) and (max-width: 1024px) {
  .panico-cta { padding-inline: 20px; }
  .panico-cta__heading { margin-top: var(--cta-heading-mt-tab, 0); margin-bottom: var(--cta-heading-mb-tab, 64px); }
}
@media (max-width: 767px) {
  .panico-cta { padding-inline: 16px; }
  .panico-cta__heading { margin-top: var(--cta-heading-mt-mob, 0); margin-bottom: var(--cta-heading-mb-mob, 32px); }
}

/* ============================================================
   Immagine ad arco con scintille
   ============================================================ */
.panico-arch { position: relative; }
.panico-arch .panico-arch__img {
  width: 100%;
  height: var(--arch-h, 700px);
  object-fit: cover;
  object-position: center center;
  border-top-left-radius: 400px;
  border-top-right-radius: 400px;
  padding: var(--arch-pad, 20px);
  border: 1px solid #000;
  display: block;
}
.panico-arch__star {
  position: absolute;
  top: 35%;
  width: 28px;
  height: auto;
  color: #000;
  z-index: 1;
}
.panico-arch__star--left  { left: var(--star-left, -13px); }
.panico-arch__star--right { right: var(--star-right, -13px); }

@media (min-width: 1025px) and (max-width: 1199px) {
  .panico-arch__star--left  { left: var(--star-left-lap, var(--star-left, -13px)); }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .panico-arch .panico-arch__img { height: var(--arch-h-tab, 430px); padding: var(--arch-pad-tab, 14px); }
  .panico-arch__star--left  { left: var(--star-left-tab, var(--star-left, -13px)); }
  .panico-arch__star--right { right: var(--star-right-tab, -13px); }
}
@media (max-width: 767px) {
  .panico-arch .panico-arch__img { height: var(--arch-h-mob, 420px); padding: var(--arch-pad-mob, 10px); }
  .panico-arch__star--left  { left: -13px; }
  .panico-arch__star--right { right: -13px; }
}

/* ============================================================
   Slideshow
   ============================================================ */
.panico-slideshow { padding: var(--sld-pt, 0) 0 var(--sld-pb, 56px); position: relative; }
.panico-slideshow__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.panico-slideshow__track::-webkit-scrollbar { display: none; }
.panico-slideshow__track { gap: var(--sld-gap, 0); }
.panico-slideshow__slide { flex: 0 0 100%; scroll-snap-align: start; }
.panico-slideshow--multi .panico-slideshow__slide { flex: 0 0 var(--sld-slide-w, 100%); }
.panico-slideshow__slide img { width: 100%; height: var(--sld-img-h, auto); object-fit: cover; display: block; }

.panico-slideshow__nav { position: absolute; bottom: 0; right: 0; display: flex; gap: 8px; }
.panico-slideshow__btn {
  width: 44px;
  height: 44px;
  border: 1px solid #000;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  transition: background-color .2s ease;
}
.panico-slideshow__btn:hover { background: #E1BE64; }
.panico-slideshow__btn svg { width: 18px; height: 18px; }

@media (max-width: 767px) {
  .panico-slideshow { padding-bottom: var(--sld-pb-mob, 24px); }
  /* su mobile ogni immagine occupa tutta la larghezza, come sul sito attuale */
  .panico-slideshow--multi .panico-slideshow__slide { flex: 0 0 100%; }
  .panico-slideshow__track { gap: 0; }
  .panico-slideshow__slide img { height: var(--sld-img-h-mob, 300px); }
  .panico-slideshow__heading { max-width: 100% !important; }
  .panico-slideshow__btn { width: 36px; height: 36px; }
}

/* bottone dentro le righe testo/immagine */
.panico-row__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: flex-start;
  padding: 15px 30px;
  margin-top: var(--row-btn-mt, 0);
  font-family: var(--font-body-family);
  font-size: 14px;
  line-height: 1.5em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 50px;
  background-color: var(--panico-text);
  color: #fff;
  transition: background-color .2s ease;
}
.panico-row__button:hover { background-color: rgb(188, 147, 49); color: #fff; }
.panico-row__button--full { display: flex; width: 100%; align-self: stretch; padding: 16px 20px; border-radius: 40px; }

/* ============================================================
   Pagina contatti
   ============================================================ */
.panico-contact { padding: var(--ct-pt, 100px) 0 var(--ct-pb, 100px); }

.panico-contact__top {
  display: flex;
  flex-flow: row;
  align-items: stretch;
  margin: 0 0 var(--ct-gap, 140px);
}
.panico-contact__col { flex-basis: 50%; max-width: 50%; }
.panico-contact__col--form  .panico-contact__inner { padding-right: var(--ct-form-inset, 10%); }
.panico-contact__col--media .panico-contact__inner { padding-left: var(--ct-media-inset, 10%); }
.panico-contact .panico__h1 { margin-top: 16px; }
.panico-contact__form { margin-top: var(--ct-form-mt, 40px); }

.panico-contact__field { margin-top: 20px; }
.panico-contact__field:first-of-type { margin-top: 0; }
.panico-contact__label {
  display: block;
  font-family: var(--font-body-family);
  font-size: 14px;
  line-height: 1.5em;
  margin-bottom: 8px;
}
.panico-contact__input {
  width: 100%;
  padding: 16px;
  font-family: var(--font-body-family);
  font-size: 16px;
  line-height: 1.5em;
  border: 1px solid #d1d5db;
  border-radius: 0;
  background: #fff;
  color: var(--panico-text);
}
.panico-contact__input:focus-visible { outline: 1px solid var(--panico-text); }
textarea.panico-contact__input { min-height: 154px; resize: vertical; display: block; }

.panico-contact__submit {
  margin-top: 30px;
  padding: 15px 30px;
  font-family: var(--font-body-family);
  font-size: 16px;
  line-height: 1.5em;
  border: 0;
  border-radius: 50px;
  background-color: var(--panico-text);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
}
.panico-contact__submit:hover { background-color: rgb(188, 147, 49); }

.panico-contact__notice { margin: 0 0 16px; font-size: 14px; }
.panico-contact__notice--ok { color: #2f6f3e; }
.panico-contact__notice--ko { color: #b3241c; }

.panico-contact__bottom {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
}
.panico-contact__spacer { min-height: var(--ct-spacer-h, 400px); width: 50%; }
.panico-contact__map {
  display: block;
  width: 50%;
  min-height: var(--ct-spacer-h, 400px);
  align-self: stretch;
  overflow: hidden;
}
.panico-contact__map img {
  width: 100%;
  height: 100%;
  min-height: var(--ct-spacer-h, 400px);
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform .4s ease;
}
.panico-contact__map:hover img { transform: scale(1.05); }
.panico-contact__info { width: 50%; }
.panico-contact__info .panico-contact__inner { padding-left: var(--ct-info-inset, 10%); }
.panico-contact__info-row { display: flex; flex-flow: row; }
.panico-contact__info-col { flex-basis: 50%; max-width: 50%; padding: 15px; }

.panico-contact__eyebrow {
  font-family: var(--font-body-family);
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 14px 0;
}
.panico-contact__text { font-family: var(--font-body-family); font-size: 16px; margin: 0; }

.panico-contact__link {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  padding: 5px 0;
  font-family: var(--font-body-family);
  font-size: 16px;
  color: var(--panico-text);
  text-decoration: underline;
}
.panico-contact__social { display: flex; flex-flow: row; gap: 16px; margin-top: 16px; }
.panico-contact__social a { color: var(--panico-text); display: inline-flex; }
.panico-contact__social svg { width: 24px; height: 24px; }

@media (min-width: 768px) and (max-width: 1024px) {
  .panico-contact { padding: 80px 20px; }
  .panico-contact__top { align-items: center; margin-bottom: 100px; }
  .panico-contact__col--form .panico-contact__inner { padding-right: 5%; }
  .panico-contact__bottom { flex-flow: column; align-items: stretch; }
  .panico-contact__spacer { display: none; }
  .panico-contact__map { width: 100%; min-height: var(--ct-map-h-mob, 300px); }
  .panico-contact__map img { min-height: var(--ct-map-h-mob, 300px); }
  .panico-contact__info { width: 100%; padding-top: 30px; }
  .panico-contact__info .panico-contact__inner { padding-left: 0; }
}
@media (max-width: 767px) {
  .panico-contact { padding: 48px 16px 64px; }
  .panico-contact__top { flex-flow: column-reverse wrap; margin-bottom: 48px; }
  .panico-contact__col { flex-basis: auto; max-width: 100%; }
  .panico-contact__col--form .panico-contact__inner { padding: 0; }
  .panico-contact__col--form { margin-top: 32px; }
  .panico-contact__col--media .panico-contact__inner { padding: 0; }
  .panico-contact__bottom { flex-flow: column; align-items: stretch; }
  .panico-contact__spacer { display: none; }
  .panico-contact__map { width: 100%; min-height: var(--ct-map-h-mob, 300px); margin-bottom: 24px; }
  .panico-contact__map img { min-height: var(--ct-map-h-mob, 300px); }
  .panico-contact__info { width: 100%; }
  .panico-contact__info .panico-contact__inner { padding-left: 0; }
  .panico-contact__info-row { flex-flow: column; }
  .panico-contact__info-col { flex-basis: auto; max-width: 100%; margin-bottom: 24px; text-align: center; }
  .panico-contact__eyebrow, .panico-contact__text { text-align: center; }
  .panico-contact__social { justify-content: center; }
}

/* ============================================================
   Hero a tutta larghezza con immagine di sfondo
   ============================================================ */
.panico-banner {
  position: relative;
  background-size: cover;
  background-position: center center;
  min-height: var(--bn-h, 630px);
  display: flex;
}
.panico-banner__overlay {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: var(--bn-h, 630px);
  background-color: var(--bn-overlay, rgba(21, 23, 18, .3));
  padding: 24px;
}
.panico-banner__title { color: #fff; margin: 0 0 var(--bn-gap, 24px); }
.panico-banner__sub > p { margin: 0; }
.panico-banner__sub {
  color: #fff;
  font-family: var(--font-body-family);
  font-size: var(--bn-sub-fs, 16px);
  margin: 0;
  max-width: 720px;
}
@media (max-width: 767px) {
  .panico-banner, .panico-banner__overlay { min-height: var(--bn-h-mob, 420px); }
}

/* ============================================================
   Collage di immagini con testo affiancato
   ============================================================ */
.panico-collage { padding: var(--cl-pt, 100px) 0 var(--cl-pb, 100px); }
.panico-collage__row { display: flex; flex-flow: row; align-items: flex-start; }
.panico-collage__text {
  flex-basis: 50%;
  max-width: 50%;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.panico-collage__text-inner { padding-right: var(--cl-text-inset, 10%); margin-top: var(--cl-text-offset, 0); }
.panico-collage--text-right .panico-collage__text-inner { padding-right: 0; padding-left: var(--cl-text-inset, 10%); }
.panico-collage__media { flex-basis: 50%; max-width: 50%; display: flex; flex-flow: row; }
.panico-collage__sub { flex-basis: 50%; max-width: 50%; display: flex; flex-flow: column; }
.panico-collage__img { display: block; object-fit: cover; object-position: center center; max-width: 100%; }

@media (max-width: 767px) {
  .panico-collage { padding: var(--cl-pt-mob, 48px) 16px var(--cl-pb-mob, 48px); }
  /* nella Storia i titoli restano a 50px anche su mobile, come sul sito attuale */
  .panico-collage--titolo-grande .panico__h1 { font-size: 50px; line-height: 1.3em; }
  .panico-collage__row { flex-flow: column; }
  .panico-collage__text, .panico-collage__media { flex-basis: auto; max-width: 100%; }
  .panico-collage__text-inner { padding: 0 !important; margin-bottom: 24px; }
  .panico-collage__media { flex-flow: row; align-items: flex-start; gap: 8px; }
  .panico-collage__sub { flex: 1 1 0; min-width: 0; gap: 8px; }
  .panico-collage__img {
    width: 100% !important;
    height: var(--cl-img-h-mob, 250px) !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
  }
}

/* ============================================================
   Schede a tab: pannello immagine + titoli cliccabili
   ============================================================ */
.panico-tabs { padding: var(--tb-pt, 100px) 0 var(--tb-pb, 100px); }
.panico-tabs__row { display: flex; flex-flow: row; align-items: stretch; }
.panico-tabs__panel { flex-basis: 45%; max-width: 45%; }
.panico-tabs__panel img { width: 100%; height: var(--tb-img-h, 782px); object-fit: cover; display: block; }
.panico-tabs__list { flex-basis: 55%; max-width: 55%; display: flex; flex-flow: column; justify-content: center; padding-left: var(--tb-inset, 8%); }
.panico-tabs__btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 var(--tb-gap, 32px);
  text-align: left;
  font-family: var(--font-heading-family);
  font-size: var(--tb-fs, 26px);
  line-height: 1.5em;
  color: rgba(21, 23, 18, .5);
  cursor: pointer;
  transition: color .2s ease;
}
.panico-tabs__btn:last-child { margin-bottom: 0; }
.panico-tabs__btn[aria-selected="true"] { color: rgb(21, 23, 18); }
.panico-tabs__pane { display: none; }
.panico-tabs__pane[data-active] { display: block; }

@media (max-width: 767px) {
  .panico-tabs { padding: var(--tb-pt-mob, 48px) 16px var(--tb-pb-mob, 48px); }
  .panico-tabs__row { flex-flow: column; }
  .panico-tabs__panel, .panico-tabs__list { flex-basis: auto; max-width: 100%; padding-left: 0; }
  .panico-tabs__panel img { height: var(--tb-img-h-mob, 420px); }
  .panico-tabs__list { margin-top: 24px; }
  .panico-tabs__btn { font-size: 20px; margin-bottom: 20px; }
}

/* bottone dentro il banner */
.panico-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: var(--font-body-family);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
}
.panico-banner__btn:hover { text-decoration: underline; }
.panico-banner__btn svg { width: 16px; height: 16px; }

/* ============================================================
   Schede categoria
   ============================================================ */
.panico-cards { padding: var(--cd-pt, 100px) 0 var(--cd-pb, 100px); }
.panico-cards__heading { text-align: left; margin: 0 0 var(--cd-heading-mb, 40px); }
.panico-cards__grid { display: flex; flex-flow: row; gap: var(--cd-gap, 17px); list-style: none; margin: 0; padding: 0; }
.panico-cards__item { flex: 1 1 0; min-width: 0; }
.panico-cards__media { margin-bottom: 16px; display: block; }
.panico-cards--center .panico-cards__item { text-align: center; }
.panico-cards--center .panico-cards__media img { width: var(--cd-img-h, 130px); margin-inline: auto; }
.panico-cards--center .panico-cards__heading { text-align: center; }
.panico-cards__media img { width: 100%; height: var(--cd-img-h, 130px); object-fit: cover; display: block; }
.panico-cards__title {
  font-family: 'Prata', var(--font-heading-family);
  font-weight: 400;
  font-size: var(--cd-title-fs, 24px);
  line-height: 1.3em;
  margin: 0 0 8px;
}
.panico-cards__text { font-family: var(--font-body-family); font-size: 16px; margin: 0 0 16px; }
.panico-cards__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body-family); font-size: 16px;
  color: var(--panico-text); text-decoration: none;
}
.panico-cards__link:hover { text-decoration: underline; }
.panico-cards__link svg { width: 16px; height: 16px; }
@media (max-width: 1024px) { .panico-cards__grid { flex-wrap: wrap; } .panico-cards__item { flex: 0 0 calc(50% - var(--cd-gap, 17px)); } }
@media (max-width: 767px) {
  .panico-cards { padding: var(--cd-pt-mob, 48px) 16px var(--cd-pb-mob, 48px); }
  .panico-cards__item { flex: 0 0 100%; }
  .panico-cards__media img { height: var(--cd-img-h-mob, var(--cd-img-h, 130px)); }
}

/* ============================================================
   Recensioni
   L'arco beige è uno sfondo decorativo (440x544): il testo, più
   largo, ci passa sopra e sborda ai lati — com'è sul sito attuale.
   ============================================================ */
.panico-quotes { padding: var(--qt-pt, 100px) 0 var(--qt-pb, 100px); }
.panico-quotes__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; list-style: none; margin: 0; padding: 0;
}
.panico-quotes__track::-webkit-scrollbar { display: none; }
.panico-quotes__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  position: relative;
  min-height: var(--qt-h, 544px);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* il tema nasconde i div vuoti (div:empty), quindi serve più specificità */
.panico-quotes__slide .panico-quotes__forma {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--qt-w, 440px);
  height: var(--qt-h, 544px);
  background: var(--qt-bg, #F9F6EB);
  border-radius: calc(var(--qt-w, 440px) / 2) calc(var(--qt-w, 440px) / 2) 0 0;
  z-index: 0;
}
.panico-quotes__body {
  position: relative;
  z-index: 1;
  width: var(--qt-testo-w, 702px);
  max-width: 100%;
  text-align: center;
  padding: 0 16px;
}
.panico-quotes__mark { width: 34px; height: auto; margin: 0 auto 20px; display: block; }
.panico-quotes__text {
  font-family: 'Prata', var(--font-heading-family);
  font-weight: 400;
  font-size: var(--qt-fs, 36px);
  line-height: 1.3em;
  margin: 0 0 24px;
}
.panico-quotes__author {
  font-family: var(--font-body-family);
  font-size: 14px; letter-spacing: 3px; text-transform: uppercase; margin: 0;
}
.panico-quotes__nav { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.panico-quotes__btn {
  width: 44px; height: 44px; border: 1px solid #000; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #000;
}
.panico-quotes__btn:hover { background: #E1BE64; }
.panico-quotes__btn svg { width: 18px; height: 18px; }

@media (max-width: 767px) {
  .panico-quotes { padding: var(--qt-pt-mob, 48px) 16px var(--qt-pb-mob, 48px); }
  .panico-quotes__slide { min-height: var(--qt-h-mob, 420px); }
  .panico-quotes__slide .panico-quotes__forma {
    width: 100%;
    height: var(--qt-h-mob, 420px);
    border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  }
  .panico-quotes__body { width: 100%; padding: 0 8px; }
  .panico-quotes__text { font-size: var(--qt-fs-mob, 22px); }
}
}


/* ============================================================
   Animazioni d'ingresso
   Riprese dal sito attuale: durata 1s, si avviano quando
   l'elemento entra nello schermo. Senza JavaScript resta tutto
   visibile; con "riduci movimento" attivo non si animano.
   ============================================================ */
/* solo i contenitori che animano lateralmente nascondono l'eccedenza,
   e solo finché l'animazione non è finita */
.panico-anim-armed[data-panico-anim='fadeInLeft'],
.panico-anim-armed[data-panico-anim='fadeInRight'] { visibility: hidden; }

@keyframes panico-fadeIn      { from { opacity: 0 } to { opacity: 1 } }
@keyframes panico-fadeInUp    { from { opacity: 0; transform: translate3d(0, 100%, 0) } to { opacity: 1; transform: none } }
@keyframes panico-fadeInLeft  { from { opacity: 0; transform: translate3d(-100%, 0, 0) } to { opacity: 1; transform: none } }
@keyframes panico-fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0) } to { opacity: 1; transform: none } }
@keyframes panico-slideInUp   { from { transform: translate3d(0, 100%, 0); visibility: visible } to { transform: translate3d(0, 0, 0) } }

@media (prefers-reduced-motion: no-preference) {
  /* la classe "armata" la mette il JavaScript: senza JS nulla viene nascosto */
  .panico-anim-armed { opacity: 0; }
  .panico-anim-armed[data-panico-anim='slideInUp'] { opacity: 1; }

  .panico-anim-in {
    opacity: 1;
    animation-duration: var(--panico-anim-durata, 1s);
    animation-fill-mode: both;
  }
  .panico-anim-in[data-panico-anim='fadeIn']      { animation-name: panico-fadeIn; }
  .panico-anim-in[data-panico-anim='fadeInUp']    { animation-name: panico-fadeInUp; }
  .panico-anim-in[data-panico-anim='fadeInLeft']  { animation-name: panico-fadeInLeft; }
  .panico-anim-in[data-panico-anim='fadeInRight'] { animation-name: panico-fadeInRight; }
  .panico-anim-in[data-panico-anim='slideInUp']   { animation-name: panico-slideInUp; }
}