/* =========================================================
   Materassi e Dintorni - Stili globali
   ========================================================= */

@font-face {
  font-family: "Arimo";
  src: url("/fonts/arimo-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif";
  src: url("/fonts/noto-serif-w33-latino-regulat.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --md-primary: #0d6efd;
  --md-dark: #212529;
  --md-light: #f8f9fa;
  --md-muted: #6c757d;
  --md-border: #dee2e6;
  --md-radius: 1rem;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Arimo", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  color: var(--md-dark);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

a,
button {
  touch-action: manipulation;
}

.font-serif {
  font-family: "Noto Serif", Georgia, "Times New Roman", serif;
}

.main-navbar {
  padding-top: .8rem;
  padding-bottom: .8rem;
}

.navbar-brand {
  margin-right: .75rem;
}

.navbar-brand img {
  display: block;
  width: auto;
  height: 48px;
}

.navbar-nav .nav-link {
  font-weight: 500;
}

.navbar-nav .nav-link.active {
  color: var(--md-primary);
  font-weight: 700;
}

.navbar-toggler {
  padding: .4rem .55rem;
  border-color: rgba(0, 0, 0, .15);
}

.section-spacing {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.section-title {
  font-weight: 700;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

footer a {
  text-decoration: none;
}

footer a:hover,
footer a:focus {
  text-decoration: underline;
}

.footer-logo-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
  margin-bottom: .75rem;
}

.footer-logo-wrapper img {
  width: auto;
  height: auto;
  max-width: 145px;
  max-height: 56px;
  object-fit: contain;
}

.footer-contact-list li {
  margin-bottom: .55rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.product-card,
.why-card {
  border-radius: var(--md-radius);
}

.product-card {
  overflow: hidden;
}

.product-card .card-img-top {
  display: block;
  width: 100%;
  height: auto;
}

.product-card .card-body {
  padding: 1.25rem;
}

.why-card li {
  line-height: 1.4;
}

.info-links .btn {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: .7rem .75rem;
  line-height: 1.25;
  white-space: normal;
}

@media (max-width: 575.98px) {
  body {
    font-size: .94rem;
  }

  .container {
    padding-right: .8rem;
    padding-left: .8rem;
  }

  .main-navbar {
    padding-top: .55rem;
    padding-bottom: .55rem;
  }

  .navbar-brand img {
    height: 38px;
  }

  .navbar-collapse {
    padding-top: .75rem;
  }

  .navbar-nav .nav-link {
    padding: .55rem .25rem;
  }

  .navbar-nav .btn {
    width: 100%;
    margin-top: .35rem;
    padding-top: .55rem;
    padding-bottom: .55rem;
  }

  .section-spacing {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .section-title,
  .section-spacing h2 {
    font-size: 1.4rem;
  }

  .footer-logo-wrapper img {
    max-width: 120px;
    max-height: 48px;
  }
}

@media (min-width: 992px) {
  .main-navbar {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* Homepage styles migrated from index.html */
/* Font locali: nessuna richiesta a Google Fonts */
    @font-face {
      font-family: "Arimo";
      src: url("/fonts/arimo-regular.woff2") format("woff2");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Noto Serif";
      src: url("/fonts/noto-serif-w33-latino-regulat.woff2") format("woff2");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --md-primary: #0d6efd;
      --md-dark: #212529;
      --md-light: #f8f9fa;
      --md-radius: 1rem;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      overflow-x: hidden;
      font-family: "Arimo", system-ui, -apple-system, BlinkMacSystemFont,
                   "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
      color: var(--md-dark);
      background-color: #fff;
      -webkit-font-smoothing: antialiased;
    }

    img {
      max-width: 100%;
    }

    a,
    button {
      touch-action: manipulation;
    }

    footer a {
      text-decoration: none;
    }

    footer a:hover,
    footer a:focus {
      text-decoration: underline;
    }

    .font-serif {
      font-family: "Noto Serif", Georgia, "Times New Roman", serif;
    }

    /* Navbar */
    .main-navbar {
      padding-top: .8rem;
      padding-bottom: .8rem;
    }

    .navbar-brand {
      margin-right: .75rem;
    }

    .navbar-brand img {
      display: block;
      width: auto;
      height: 48px;
    }

    .navbar-nav .nav-link {
      font-weight: 500;
    }

    .navbar-nav .nav-link.active {
      color: var(--md-primary);
      font-weight: 700;
    }

    .navbar-toggler {
      padding: .4rem .55rem;
      border-color: rgba(0, 0, 0, .15);
    }

    /* Hero */
    .hero {
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
      background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
    }

    /*
      Il contenitore NON ha altezza fissa.
      L'altezza viene determinata automaticamente dall'immagine.
    */
    .hero-slider {
      position: relative;
      width: 100%;
      height: auto;
      overflow: hidden;

      border-radius: var(--md-radius);
      background-color: #222;
      box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12);
    }

    #heroCarousel {
      width: 100%;
      height: auto;
    }

    #heroCarousel .carousel-inner {
      width: 100%;
      height: auto;
    }

    #heroCarousel .carousel-item {
      position: relative;
      width: 100%;
      height: auto;
    }

    /*
      Parametri richiesti:
      width: 100%;
      height: auto;
    */
    #heroCarousel .carousel-item img {
      display: block;
      width: 100%;
      height: auto;
      max-width: 100%;
      object-fit: initial;
      object-position: initial;
    }

    /* Leggera ombra sull'immagine per rendere leggibile il testo */
    #heroCarousel .carousel-item::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 35%,
        rgba(0, 0, 0, .45) 100%
      );
    }

    /* Didascalie */
    #heroCarousel .carousel-caption {
      right: 6%;
      bottom: 2.2rem;
      left: 6%;
      z-index: 2;
      padding: 0;
      color: #fff;
      text-align: left;
      background: transparent;
      border: 0;
      border-radius: 0;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      text-shadow: 0 2px 5px rgba(0, 0, 0, .85);
    }

    #heroCarousel .carousel-caption.text-end {
      text-align: right;
    }

    #heroCarousel .carousel-caption h2 {
      margin-bottom: .3rem;
      font-size: clamp(1.2rem, 3.2vw, 2.5rem);
      line-height: 1.15;
    }

    #heroCarousel .carousel-caption p {
      margin-bottom: .55rem;
      font-size: clamp(.85rem, 1.7vw, 1.15rem);
      line-height: 1.3;
    }

    #heroCarousel .carousel-caption p:last-child {
      margin-bottom: 0;
    }

    #heroCarousel .carousel-caption .btn {
      padding: .5rem 1rem;
      font-size: clamp(.78rem, 1.4vw, 1rem);
      font-weight: 600;
      line-height: 1.2;
      border-radius: .5rem;
    }

    /* Indicatori */
    #heroCarousel .carousel-indicators {
      bottom: .45rem;
      z-index: 3;
      margin-bottom: 0;
    }

    #heroCarousel .carousel-indicators [data-bs-target] {
      width: 22px;
      height: 3px;
      margin-right: 3px;
      margin-left: 3px;
      border: 0;
      border-radius: 999px;
    }

    /* Frecce */
    #heroCarousel .carousel-control-prev,
    #heroCarousel .carousel-control-next {
      z-index: 3;
      width: 8%;
      opacity: .8;
    }

    #heroCarousel .carousel-control-prev-icon,
    #heroCarousel .carousel-control-next-icon {
      width: 1.4rem;
      height: 1.4rem;
      padding: .8rem;
      background-size: 65%;
      background-color: rgba(0, 0, 0, .35);
      border-radius: 50%;
    }

    /* Sezioni */
    .section-spacing {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }

    .section-title {
      font-weight: 700;
    }

    /* Link informativi */
    .info-links .btn {
      display: flex;
      min-height: 48px;
      align-items: center;
      justify-content: center;
      padding: .7rem .75rem;
      line-height: 1.25;
      white-space: normal;
    }

    /* Card prodotti */
    .product-card {
      overflow: hidden;
      border-radius: var(--md-radius);
    }

    .product-card .card-img-top {
      display: block;
      width: 100%;
      height: auto;
    }

    .product-card .card-body {
      padding: 1.25rem;
    }

    .why-card {
      border-radius: var(--md-radius);
    }

    .why-card li {
      line-height: 1.4;
    }

    .why-card svg {
      margin-top: .1rem;
      color: var(--md-primary);
    }

    /* Animazioni */
    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .55s ease, transform .55s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: none;
    }

    /* Footer */
    .footer-logo-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: .65rem;
      align-items: center;
      margin-bottom: .75rem;
    }

    .footer-logo-wrapper img {
      width: auto;
      height: auto;
      max-width: 145px;
      max-height: 56px;
      object-fit: contain;
    }

    .footer-contact-list li {
      margin-bottom: .55rem;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }

    /* Smartphone */
    @media (max-width: 575.98px) {
      body {
        font-size: .94rem;
      }

      .container {
        padding-right: .8rem;
        padding-left: .8rem;
      }

      .main-navbar {
        padding-top: .55rem;
        padding-bottom: .55rem;
      }

      .navbar-brand img {
        width: auto;
        height: 38px;
      }

      .navbar-collapse {
        padding-top: .75rem;
      }

      .navbar-nav .nav-link {
        padding: .55rem .25rem;
      }

      .navbar-nav .btn {
        width: 100%;
        margin-top: .35rem;
        padding-top: .55rem;
        padding-bottom: .55rem;
      }

      .hero {
        padding-top: .7rem;
        padding-bottom: .7rem;
      }

      .hero .container {
        padding-right: .45rem;
        padding-left: .45rem;
      }

      .hero-slider {
        width: 100%;
        height: auto;
        border-radius: .65rem;
      }

      #heroCarousel,
      #heroCarousel .carousel-inner,
      #heroCarousel .carousel-item {
        width: 100%;
        height: auto;
      }

      #heroCarousel .carousel-item img {
        display: block;
        width: 100%;
        height: auto;
      }

      #heroCarousel .carousel-caption {
        right: 2.6rem;
        bottom: 1.15rem;
        left: 2.6rem;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        text-shadow: 0 2px 4px rgba(0, 0, 0, .9);
      }

      #heroCarousel .carousel-caption.text-end {
        text-align: left !important;
      }

      #heroCarousel .carousel-caption h2 {
        margin-bottom: .16rem;
        font-size: .88rem;
        line-height: 1.08;
      }

      #heroCarousel .carousel-caption p {
        margin-bottom: .25rem;
        font-size: .62rem;
        line-height: 1.15;
      }

      #heroCarousel .carousel-caption .btn {
        min-height: 27px;
        padding: .2rem .45rem;
        font-size: .58rem;
        line-height: 1.05;
      }

      #heroCarousel .carousel-indicators {
        bottom: .2rem;
      }

      #heroCarousel .carousel-indicators [data-bs-target] {
        width: 14px;
        height: 2px;
        margin-right: 2px;
        margin-left: 2px;
      }

      #heroCarousel .carousel-control-prev,
      #heroCarousel .carousel-control-next {
        width: 9%;
      }

      #heroCarousel .carousel-control-prev-icon,
      #heroCarousel .carousel-control-next-icon {
        width: .9rem;
        height: .9rem;
        padding: .5rem;
      }

      .section-spacing {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
      }

      .section-title,
      .section-spacing h2 {
        font-size: 1.4rem;
      }

      .footer-logo-wrapper img {
        width: auto;
        height: auto;
        max-width: 120px;
        max-height: 48px;
      }
    }

    /* Smartphone molto piccoli */
    @media (max-width: 380px) {
      .navbar-brand img {
        height: 34px;
      }

      #heroCarousel .carousel-caption {
        right: 2.3rem;
        bottom: .95rem;
        left: 2.3rem;
        padding: 0;
      }

      #heroCarousel .carousel-caption h2 {
        font-size: .78rem;
      }

      #heroCarousel .carousel-caption p {
        font-size: .55rem;
      }

      #heroCarousel .carousel-caption .btn {
        min-height: 24px;
        padding: .17rem .38rem;
        font-size: .52rem;
      }
    }

    /* Tablet e desktop */
    @media (min-width: 576px) {
      #heroCarousel .carousel-caption {
        max-width: 610px;
      }

      #heroCarousel .carousel-caption.text-end {
        right: 6%;
        left: auto;
      }
    }

    @media (min-width: 992px) {
      .main-navbar {
        padding-top: 1rem;
        padding-bottom: 1rem;
      }

      .hero {
        padding-top: 2rem;
        padding-bottom: 2.5rem;
      }

      #heroCarousel .carousel-caption {
        right: auto;
        bottom: 3rem;
        left: 7%;
        padding: 1.1rem 1.35rem;
      }

      #heroCarousel .carousel-caption.text-end {
        right: 7%;
        left: auto;
      }

      #heroCarousel .carousel-control-prev,
      #heroCarousel .carousel-control-next {
        width: 7%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      .reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }

      .carousel-item {
        transition: none;
      }
    }


/* =========================================================
   Pagina letti contenitore / galleria letti
   ========================================================= */

.crumbs a {
  text-decoration: none;
}

.hero-image {
  overflow: hidden;
  border-radius: var(--md-radius);
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12);
}

.hero-image img {
  display: block;
  width: 100%;
  height: auto;
}

.local-badge {
  display: inline-flex;
  align-items: center;
  padding: .42rem .7rem;
  color: #0a58ca;
  background: #eaf3ff;
  border: 1px solid #cfe2ff;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
}

.seo-intro {
  max-width: 930px;
  margin-inline: auto;
}

.filter-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.filter-btns .btn[aria-pressed="true"] {
  color: #fff;
  background-color: var(--md-primary);
  border-color: var(--md-primary);
}

.gallery-card {
  overflow: hidden;
  border: 0;
  border-radius: var(--md-radius);
  transition: transform .2s ease, box-shadow .2s ease;
}

.gallery-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .12) !important;
}

.gallery-card .card-img-top {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
}

.gallery-card .card-title {
  color: #212529;
}

.benefit-card,
.store-card,
.faq-card {
  border-radius: var(--md-radius);
}

.store-card address {
  margin-bottom: 0;
}

.internal-links a {
  text-decoration: none;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .hero.hero-compact {
    padding-top: 1.2rem !important;
    padding-bottom: 2rem !important;
  }

  .hero.hero-compact h1 {
    font-size: 1.95rem;
    line-height: 1.08;
  }

  .hero.hero-compact .lead {
    font-size: 1rem;
  }

  .filter-btns {
    width: 100%;
  }

  .filter-btns .btn {
    flex: 1 1 calc(50% - .4rem);
    white-space: normal;
  }

  .gallery-card .card-img-top {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-card {
    transition: none;
  }
}


/* =========================================================
   Pagine informative / azienda / contatti / servizi
   ========================================================= */

.hero-figure {
  overflow: hidden;
  border-radius: var(--md-radius);
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12);
}

.hero-figure img,
.store-card img,
.content-card img {
  display: block;
  width: 100%;
  height: auto;
}

/* 02-azienda: evita l'effetto verticale/allungato delle foto */
.hero-figure img {
  aspect-ratio: 754 / 366;
  object-fit: cover;
  object-position: center;
}

.store-card img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.content-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.icon-bullet {
  width: 20px;
  height: 20px;
  margin-right: .5rem;
  color: var(--md-primary);
  flex: 0 0 auto;
}

.feature-card,
.content-card,
.contact-card {
  border-radius: var(--md-radius);
}

.contact-card .list-inline {
  margin-bottom: .5rem;
}

.post-excerpt {
  min-height: 3.5rem;
}

.sidebar-sticky {
  position: sticky;
  top: 2rem;
}

.service-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.badge-pay {
  background: #f1f3f5;
}

.note {
  font-size: .9rem;
  color: #6c757d;
}

.download-cover {
  width: min(100%, 220px);
  height: auto;
}

.paypal-step-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem auto;
}

.legacy-content-card {
  border-radius: var(--md-radius);
}

@media (max-width: 575.98px) {
  .hero .btn {
    width: 100%;
  }

  .sidebar-sticky {
    position: static;
  }
}


/* =========================================================
   Pagine 03 - guide materiali
   ========================================================= */

.article-body,
.article {
  font-size: 1.05rem;
  line-height: 1.75;
}

.article-body h2,
.article h2 {
  margin-top: 2.25rem;
  scroll-margin-top: 1.5rem;
}

.article-body figure img,
.article figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: .75rem;
}

.benefit-card,
.sidebar-card,
.related-card {
  border-radius: var(--md-radius);
}

.sidebar-card {
  position: sticky;
  top: 1.5rem;
}

.sidebar-card a {
  text-decoration: none;
}

.tip {
  background: #eef6ff;
  border: 1px solid #cfe2ff;
  border-radius: var(--md-radius);
}

.note {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: var(--md-radius);
}

.related-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: .75rem;
}

.slider-ratio {
  --bs-aspect-ratio: 42.857%;
}

.slider-ratio > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.brand-logos img {
  max-height: 100px;
  width: auto;
}

.aside .list-unstyled li + li {
  margin-top: .25rem;
}

@media (min-width: 576px) {
  .slider-ratio {
    --bs-aspect-ratio: 56.25%;
  }
}

@media (min-width: 992px) {
  .slider-ratio {
    --bs-aspect-ratio: 42.857%;
  }
}

@media (max-width: 991.98px) {
  .sidebar-card {
    position: static;
  }
}

@media (max-width: 575.98px) {
  .article-body,
  .article {
    font-size: 1rem;
    line-height: 1.65;
  }
}


/* =========================================================
   Galleria e pagine informative finali
   ========================================================= */

.gal-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--md-radius);
  background: #f8f9fa;
}

.gal-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  transition: transform .5s ease;
}

.gal-card:hover img {
  transform: scale(1.04);
}

.gal-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 100%);
}

.callout {
  padding: 1rem 1.1rem;
  background: #f6f9fc;
  border: 1px solid #dbe7f3;
  border-radius: var(--md-radius);
}

.specs dt {
  font-weight: 700;
}

.badge-nat {
  color: #0f5132;
  background: #e6f4ea;
  border: 1px solid #badbcc;
}

.checklist li::marker {
  color: var(--md-primary);
}

.hp-field {
  position: absolute !important;
  left: -5000px !important;
}

.faq details {
  padding: .75rem 1rem;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: .75rem;
}

.faq details + details {
  margin-top: .75rem;
}

.faq summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary .chev {
  transition: transform .2s ease;
}

.faq details[open] summary .chev {
  transform: rotate(90deg);
}

.faq .answer {
  margin-top: .5rem;
  color: #333;
}

details summary {
  cursor: pointer;
}

.article-intro {
  font-size: 1.05rem;
  line-height: 1.7;
}

@media (max-width: 575.98px) {
  .gal-card img {
    aspect-ratio: 4 / 3;
  }

  .article-intro {
    font-size: 1rem;
    line-height: 1.65;
  }
}