/* ================================================================
  PASTILLI | Responsive globale v3 — 3 novembre 2026
  CSS aggiuntivo: non altera le immagini o i dati gestiti da Pages CMS.
  Per monitor grandi usa un layout fluido; per tablet e telefoni riorganizza
  griglie, testi, navigazione e schede prodotti.
  ================================================================ */
:root {
  --content: 2160px;
  --fluid-gutter: clamp(32px, 6vw, 180px);
}
html { scroll-padding-top: 115px; }
body { font-size: clamp(15px, .54vw + 8px, 20px); }
.container,
.gallery-section-heading,
.product-subheading,
.photo-product-grid,
.product-sheet-grid,
.product-sheet-section .product-subheading {
  width: min(var(--content), calc(100% - var(--fluid-gutter)));
  max-width: none;
  margin-inline: auto;
}
:where(.intro-grid, .audience-grid, .contact-grid, .catalog-hero-inner, .footer-main, .feature-section, .territory-inner) > * {
  min-width: 0;
}
/* Intestazione: logo e navigazione crescono senza rimanere bloccati a 1180px */
.topline { font-size: clamp(10px, .68vw, 13px); }
.topline-inner { min-height: clamp(33px, 2.6vw, 44px); }
.site-header .nav-wrap {
  width: min(var(--content), calc(100% - var(--fluid-gutter)));
  max-width: none;
  min-height: clamp(88px, 6.4vw, 128px);
  gap: clamp(20px, 2.1vw, 46px);
}
.site-header .brand { width: clamp(188px, 14.5vw, 282px); flex-shrink: 0; }
.site-header .primary-nav {
  margin-left: auto;
  gap: clamp(13px, 1.5vw, 31px);
  font-size: clamp(13px, .96vw, 17px);
  font-weight: 600;
}
.site-header .nav-cta { padding: clamp(12px, .95vw, 17px) clamp(15px, 1.4vw, 27px); }
/* Hero e testo: adattamento fluido, senza zoom forzato della pagina */
.hero { min-height: clamp(580px, 44vw, 880px); }
.hero-photo { inset: 0 0 0 35%; background-position: center 46%; }
.hero-wash {
  background: linear-gradient(90deg, rgba(251,244,237,1) 0%, rgba(251,244,237,.99) 25%, rgba(251,244,237,.84) 39%, rgba(251,244,237,.16) 68%, rgba(48,24,22,.03) 100%);
}
.hero-content { padding-block: clamp(65px, 5.8vw, 150px); }
.hero-content > * { max-width: min(840px, 54vw); }
.hero h1 {
  max-width: min(875px, 56vw);
  font-size: clamp(48px, 4.55vw, 98px);
  line-height: 1.065;
  margin-bottom: clamp(19px, 1.6vw, 34px);
}
.hero-copy { max-width: min(690px, 49vw); font-size: clamp(15px, 1.12vw, 22px); line-height: 1.75; }
.eyebrow { font-size: clamp(10px, .72vw, 14px); }
.hero-note { font-size: clamp(11px, .72vw, 14px); margin-top: clamp(34px, 4vw, 72px); }
.hero-note strong { font-size: clamp(11px, .74vw, 15px); }
.button { font-size: clamp(13px, .92vw, 17px); min-height: clamp(48px, 3.2vw, 62px); padding-inline: clamp(19px, 1.45vw, 31px); }
.text-link { font-size: clamp(13px, .92vw, 17px); }
/* Sezioni e griglie della homepage */
.section-pad { padding-block: clamp(64px, 6vw, 146px); }
.proof-grid { padding-block: clamp(21px, 2vw, 41px); }
.proof-item { gap: clamp(12px, 1.2vw, 25px); padding-inline: clamp(13px, 1.5vw, 31px); }
.proof-item strong { font-size: clamp(15px, 1.13vw, 23px); }
.proof-item small { font-size: clamp(11px, .84vw, 17px); line-height: 1.45; }
.line-icon { width: clamp(35px, 2.6vw, 52px); height: clamp(35px, 2.6vw, 52px); font-size: clamp(19px, 1.45vw, 27px); }
.intro-grid, .audience-grid, .contact-grid { gap: clamp(40px, 5.8vw, 132px); }
.intro-image-wrap img { height: clamp(400px, 34vw, 710px); }
.intro-copy h2, .section-heading h2, .feature-panel h2, .contact-copy h2 {
  font-size: clamp(37px, 3.45vw, 79px);
  line-height: 1.13;
}
.intro-copy > p:not(.eyebrow),
.section-heading.centered > p:last-child,
.feature-panel > p:not(.eyebrow),
.audience-heading > p:not(.eyebrow),
.audience-list p,
.territory-inner > p,
.contact-copy > p:not(.eyebrow),
.catalog-hero-inner p:not(.eyebrow),
.gallery-section-heading > p:last-child {
  font-size: clamp(15px, .96vw, 20px);
  line-height: 1.8;
}
.intro-copy > p:not(.eyebrow) { max-width: 730px; }
.section-heading.centered { max-width: 870px; }
.section-heading.centered > p:last-child { max-width: 700px; }
.category-grid-four { grid-auto-rows: clamp(255px, 21.5vw, 485px); gap: clamp(14px, 1.15vw, 30px); }
.category-label { left: clamp(17px, 1.5vw, 34px); right: clamp(14px, 1.4vw, 30px); bottom: clamp(17px, 1.45vw, 33px); }
.category-label strong { font-size: clamp(23px, 2vw, 43px); }
.category-label small { font-size: clamp(11px, .77vw, 16px); }
.feature-section { min-height: clamp(480px, 36vw, 800px); }
.feature-image { min-height: clamp(480px, 36vw, 800px); }
.feature-panel { padding: clamp(50px, 6vw, 148px) clamp(36px, 6vw, 150px); }
.audience-list article { padding-block: clamp(21px, 1.8vw, 38px); }
.audience-list h3 { font-size: clamp(22px, 1.65vw, 33px); }
.territory-band { padding-block: clamp(52px, 4.5vw, 96px); }
.territory-inner h2 { font-size: clamp(32px, 3.2vw, 67px); }
.contact-form { padding: clamp(26px, 3vw, 68px); }
.contact-form label { font-size: clamp(12px, .88vw, 17px); }
.contact-form input:not([type="checkbox"]),
.contact-form select, .contact-form textarea { font-size: clamp(14px, .94vw, 18px); padding: clamp(12px, .8vw, 17px); }
.form-title h3 { font-size: clamp(22px, 1.6vw, 33px); }
.privacy-note, .form-status { font-size: clamp(11px, .78vw, 15px); }
.address-card { max-width: min(100%, 520px); }
.address-card strong { font-size: clamp(19px, 1.5vw, 29px); }
.address-card small, .address-card a { font-size: clamp(12px, .9vw, 16px); }
.footer-main { gap: clamp(24px, 3vw, 72px); }
.footer-tagline { font-size: clamp(20px, 1.4vw, 31px); }
.footer-links { font-size: clamp(12px, .85vw, 17px); }
.footer-bottom { font-size: clamp(10px, .71vw, 14px); }
/* Catalogo: le schede crescono con il monitor, senza perdere leggibilità */
.catalog-hero-inner { min-height: clamp(390px, 29vw, 640px); gap: clamp(35px, 5vw, 125px); }
.catalog-hero h1 { font-size: clamp(44px, 4.5vw, 92px); }
.catalog-tools h2, .gallery-section-heading h2 { font-size: clamp(34px, 3.2vw, 66px); }
.product-sheet-grid { grid-template-columns: repeat(3,minmax(0, 1fr)); gap: clamp(20px, 1.6vw, 38px); }
.product-sheet-content { padding: clamp(20px, 1.35vw, 34px); }
.product-sheet-title-row h3 { font-size: clamp(22px, 1.55vw, 32px); }
/* Le etichette lunghe non devono allargare le card sui telefoni più stretti. */
.product-sheet-title-row { flex-wrap: wrap; }
.product-sheet-title-row h3 { min-width: 0; overflow-wrap: anywhere; }
.product-extra-tag { flex: 0 1 auto; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.product-sheet-description { font-size: clamp(14px, .94vw, 18px); }
.product-detail-row { grid-template-columns: minmax(95px, 30%) minmax(0,1fr); }
.product-detail-row dt, .product-detail-row dd,
.product-ingredients-toggle summary, .product-ingredients p {
  font-size: clamp(12px, .83vw, 17px);
}
.product-ingredients strong { font-size: clamp(12px, .78vw, 16px); }
.gallery-jump-nav a { font-size: clamp(12px, .9vw, 17px); }
.product-subheading, .product-sheet-section .product-subheading { font-size: clamp(26px, 2vw, 42px); }
.photo-product-card h3 { font-size: clamp(17px, 1.15vw, 26px); }
.photo-product-grid { gap: clamp(18px, 1.4vw, 31px); }
.catalog-contact-inner h2 { font-size: clamp(30px, 3.3vw, 65px); }
@media (min-width: 2100px) {
  .photo-product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .product-sheet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Laptop: il menu può ripiegarsi prima che le voci si tocchino */
@media (max-width: 1399px) {
  .site-header .nav-wrap { min-height: 84px; }
  .site-header .brand { width: clamp(170px, 18vw, 220px); }
  .site-header .primary-nav { font-size: 15px; }
  .gallery-jump-nav { top: 84px; }
}
@media (max-width: 1050px) {
  .product-sheet-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .category-grid-four { grid-template-columns: repeat(2,minmax(0, 1fr)); grid-auto-rows: clamp(235px, 28vw, 360px); }
  .hero { min-height: 580px; }
  .hero h1 { font-size: clamp(45px, 5.1vw, 64px); }
}
@media (max-width: 900px) {
  .intro-grid, .audience-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .intro-image-wrap img { height: clamp(340px, 52vw, 530px); }
  .footer-main { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .territory-inner { grid-template-columns: 1fr auto; gap: 20px; }
  .territory-inner > p { grid-column: 1 / -1; }
  .feature-section { grid-template-columns: 1fr; }
  .feature-image { min-height: 300px; max-height: 460px; }
  .catalog-hero-inner { grid-template-columns: 1fr; min-height: 0; }
  .catalog-hero-image { min-height: clamp(230px, 40vw, 370px); }
  .photo-product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 780px) {
  :root { --fluid-gutter: 36px; }
  .site-header .nav-wrap { width: calc(100% - 36px); min-height: 78px; }
  .site-header .brand { width: 174px; }
  .topline-inner { justify-content: center; text-align: center; }
  .hero { min-height: 680px; align-items: flex-end; }
  .hero-photo { inset: 0; background-position: center 31%; }
  .hero-wash { background: linear-gradient(0deg, rgba(251,244,237,1) 0%, rgba(251,244,237,.98) 29%, rgba(251,244,237,.75) 52%, rgba(251,244,237,.08) 82%); }
  .hero-content { padding-top: 290px; padding-bottom: 56px; }
  .hero-content > * { max-width: 100%; }
  .hero h1 { max-width: min(100%, 710px); font-size: clamp(39px, 7.8vw, 60px); }
  .hero-copy { max-width: 610px; font-size: clamp(15px, 2vw, 17px); }
  .hero-note { display: none; }
  .section-pad { padding-block: 65px; }
  .proof-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .proof-item strong { font-size: 16px; }
  .proof-item small { font-size: 12px; }
  .intro-copy h2, .section-heading h2, .feature-panel h2, .contact-copy h2 { font-size: clamp(35px, 5.9vw, 47px); }
  .category-grid-four { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: clamp(205px, 31vw, 275px); }
  .category-label strong { font-size: clamp(22px, 3.7vw, 28px); }
  .contact-form { padding: 24px; }
  .product-sheet-grid, .photo-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gallery-jump-nav { top: 78px; }
  .footer-main { gap: 30px; }
}
@media (max-width: 650px) {
  .site-header .nav-wrap { min-height: 74px; }
  .site-header .brand { width: 158px; }
  .gallery-jump-nav { top: 74px; }
  .hero { min-height: 675px; }
  .hero-content { padding-top: 260px; padding-bottom: 45px; }
  .hero h1 { font-size: clamp(35px, 8.8vw, 47px); }
  .hero-actions { gap: 12px; flex-wrap: wrap; }
  .proof-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .proof-item { gap: 9px; padding-inline: 8px; }
  .line-icon { width: 32px; height: 32px; font-size: 17px; }
  .intro-image-wrap img { height: 340px; }
  .category-grid-four { grid-auto-rows: 215px; }
  .product-sheet-grid { grid-template-columns: 1fr; }
  .catalog-hero-inner { padding-block: 32px; gap: 22px; }
  .footer-main { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 480px) {
  :root { --fluid-gutter: 32px; }
  html { scroll-padding-top: 85px; }
  .topline { font-size: 9px; letter-spacing: .08em; }
  .site-header .nav-wrap { width: calc(100% - 32px); }
  .hero { min-height: 700px; }
  .hero-content { padding-top: 250px; padding-bottom: 43px; }
  .hero h1 { font-size: clamp(35px, 9vw, 42px); }
  .hero-copy { font-size: 15px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .proof-grid { grid-template-columns: 1fr; padding-block: 10px; }
  .proof-item, .proof-item:nth-child(odd), .proof-item:nth-child(-n+2) { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.22); padding: 12px 0; }
  .proof-item:last-child { border-bottom: 0; }
  .line-icon { width: 35px; height: 35px; }
  .section-pad { padding-block: 56px; }
  .category-grid-four { grid-template-columns: 1fr; grid-auto-rows: 225px; }
  .category-grid-four .category-card, .category-grid-four .category-card:first-child { grid-column: 1 / -1; }
  .intro-copy h2, .section-heading h2, .feature-panel h2, .contact-copy h2 { font-size: clamp(33px, 8vw, 39px); }
  .footer-main { grid-template-columns: 1fr; }
  .catalog-hero h1 { font-size: 42px; }
  .photo-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px 10px; }
  .photo-product-card h3 { font-size: 15px; }
  .product-detail-row { grid-template-columns: 95px minmax(0,1fr); }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 33px; }
  .hero { min-height: 680px; }
  .photo-product-grid { grid-template-columns: 1fr; }
}