/* ============================================================
   CIRCLE TEMPLATE — CSS con scope .ks
   Ogni selettore e prefissato con `.ks` per vincere su Oxygen
   per specificita (0,1,1) senza usare !important.
   HTML: avvolgere ogni code block di Oxygen con <div class="ks">...</div>
   ============================================================ */

/* ----------------------------------------------------------------
   FONT — tutti locali, niente Google Fonts CDN.
   - Libel Suit:  display (titoli, KASAURIA)
   - Work Sans:   body (paragrafi, lead, navigazione)
   - AzoSans:     meta (eyebrow, label, sottotitoli)
                  NB: il file fisico AzoSans-*.woff2 contiene attualmente
                  Inter come sostituto temporaneo. Quando arrivera' il
                  font Azo Sans definitivo, basta sovrascrivere i file
                  in /assets/fonts/ mantenendo gli stessi nomi e tutto
                  cambia automaticamente, senza toccare il CSS.
---------------------------------------------------------------- */

@font-face {
    font-family: 'Libel Suit';
    src: url('/wp-content/plugins/circle-template/assets/fonts/LibelSuit-Regular.woff2') format('woff2'),
         url('/wp-content/plugins/circle-template/assets/fonts/LibelSuit-Regular.woff')  format('woff'),
         url('/wp-content/plugins/circle-template/assets/fonts/LibelSuit-Regular.ttf')   format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('/wp-content/plugins/circle-template/assets/fonts/WorkSans-Light.woff2') format('woff2'),
         url('/wp-content/plugins/circle-template/assets/fonts/WorkSans-Light.woff')  format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('/wp-content/plugins/circle-template/assets/fonts/WorkSans-Regular.woff2') format('woff2'),
         url('/wp-content/plugins/circle-template/assets/fonts/WorkSans-Regular.woff')  format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AzoSans';
    src: url('/wp-content/plugins/circle-template/assets/fonts/AzoSans-Light.woff2') format('woff2'),
         url('/wp-content/plugins/circle-template/assets/fonts/AzoSans-Light.woff')  format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AzoSans';
    src: url('/wp-content/plugins/circle-template/assets/fonts/AzoSans-Regular.woff2') format('woff2'),
         url('/wp-content/plugins/circle-template/assets/fonts/AzoSans-Regular.woff')  format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Caveat';
    src: url('/wp-content/plugins/circle-template/assets/fonts/Caveat-Regular.woff2') format('woff2'),
         url('/wp-content/plugins/circle-template/assets/fonts/Caveat-Regular.woff')  format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   KASAURIA — Meat Excellence
   Brand CSS — Unico foglio di stile per tutto il sito
   Palette allineata pixel-perfect al file Adobe XD del designer.
   ============================================================ */
/* ---- RESET & BASE ---- */
.ks *,
.ks *::before,
.ks *::after {
 box-sizing: border-box; margin: 0; padding: 0; }

:root {

  /* PALETTE — valori esatti dal file Adobe XD */
  --rosso:     #E02E2A;   /* rosso brand (CTA, accenti, "scopri") */
  --antracite: #1E1E1E;   /* sfondo scuro principale (sezioni nere) */
  --beige:     #E9DCD1;   /* beige caldo (banda CTA "Hai una richiesta") */
  --oro:       #C18B52;   /* caramello (testo accentato su scuro, banda Azienda) */
  --crema:     #FCF6F0;   /* sfondo principale chiaro (sezioni "card" su crema) */
  --crema-2:   #F0E9E2;   /* crema piu' scuro (sfondo card prodotto Freschi) */
  --bianco:    #FFFFFF;   /* bianco puro (testi su sfondo scuro, card chiare) */
  --nero:      #1E1E1E;   /* nero piu' profondo dell'antracite */
  --bordeaux:  #582127;   /* dark accent (testo su crema, link scuri) */
  --grigio:    #707070;   /* grigio testo secondario */
  --gelo:      #9BE0E0;   /* azzurro polare (badge "Linea Gelo") */
  --avorio:    #FBF6F0;
  --sabbia:    #EFE8E0;

  /* PALETTE prodotti — 3 tonalita' distinte per la sezione "Linea Freschi/Gelo".
     Pixel-pickate dal design del designer. Mantenute separate dai default
     --crema/--crema-2 per evitare conflitti con altri usi del crema nel sito. */
  --prod-fresh: #EFEFEC;  /* sfondo card LINEA FRESCHI - grigino freddo */
  --prod-gelo:  #E5DBC6;  /* sfondo card LINEA GELO - beige caldo piu' scuro */
  --prod-btn:   #E8E2D5;  /* sfondo zona bottone "Scoprili tutti" - intermedio */

  /* FONT — tutti dichiarati come @font-face locali sopra */
  --font-display: 'Libel Suit', sans-serif;        /* titoli, KASAURIA */
  --font-body:    'Work Sans', sans-serif;         /* paragrafi, lead, nav */
  --font-meta:    'AzoSans', 'Work Sans', sans-serif; /* eyebrow, label, sottotitoli */
  --font-script:  'Caveat', cursive;               /* titoli script/handwritten card */

  /* MISURE */
  --nav-h: 80px;
  --radius: 2px;
  --trans: .4s cubic-bezier(.25,.8,.25,1);
  --mid-page: 1440px;
  --max-page: 1920px; /* 1920px; larghezza massima contenuti sito (oltre questa misura il contenuto si centra) */
}

.ks {
 scroll-behavior: smooth; font-size: 16px; }

.ks {
  background: var(--crema);
  color: var(--antracite);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1;
  /* NB: niente overflow-x:hidden a questo livello.
     Faceva diventare il .ks un blocco con scroll interno in alcune
     pagine WordPress (l'altezza del wrapper si bloccava al viewport).
     Il clipping orizzontale viene gestito dentro le singole sezioni
     che ne hanno bisogno (es. .ks-home-hero, .ks-pattern-k). */
}

.ks img {
 display: block; max-width: 100%; }

.ks a {
 color: inherit; text-decoration: none; }

.ks ul {
 list-style: none; }

/* ---- TYPOGRAPHY ---- */
.ks h1,
.ks h2,
.ks h3,
.ks h4 {

  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.ks h1 {
 font-size: clamp(3.5rem, 9vw, 8rem); }

.ks h2 {
 font-size: clamp(2.2rem, 5vw, 4rem); }

.ks h3 {
 font-size: clamp(1.6rem, 3vw, 2.4rem); }

.ks h4 {
 font-size: 1.2rem; letter-spacing: .08em; }

/* ---- PARAGRAFI: line-height base 1.2 per tutti i <p> dentro .ks ----
   Regola globale di partenza. I selettori piu' specifici sotto possono
   sovrascriverla solo se serve una linea piu' alta (es. su paragrafi
   lunghi/descrittivi in cui 1.2 risulta troppo stretto). */
.ks p {
  line-height: 1.2;
}

.ks .eyebrow {

  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 300;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--oro);
  display: block;
  margin-bottom: .75rem;
}

.ks .lead {

  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.8;
  max-width: 640px;
}

/* ---- LAYOUT UTILITIES ---- */
.ks .container {

  width: min(1280px, 92%);
  margin-inline: auto;
}

.ks .section {

  padding-block: clamp(5rem, 10vw, 9rem);
}

.ks .grid-2 {
 display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

.ks .grid-3 {
 display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }

.ks .grid-4 {
 display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }

/* ---- NAVIGATION ---- */
.ks .nav {

  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background var(--trans), box-shadow var(--trans);
}

.ks .nav.scrolled {

  background: var(--antracite);
  box-shadow: 0 2px 40px rgba(0,0,0,.3);
}

.ks .nav__inner {

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(1.5rem, 5vw, 4rem);
}

.ks .nav__logo img {

  height: 52px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .92;
  transition: opacity var(--trans);
}

.ks .nav__logo img:hover {
 opacity: 1; }

.ks .nav__links {

  display: flex;
  gap: 2.5rem;
  align-items: center;
}

.ks .nav__links a {

  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 300;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--beige);
  opacity: .8;
  transition: opacity var(--trans), color var(--trans);
  position: relative;
}

.ks .nav__links a::after {

  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1.5px;
  background: var(--rosso);
  transition: width var(--trans);
}

.ks .nav__links a:hover {
 opacity: 1; }

.ks .nav__links a:hover::after,
.ks .nav__links a.active::after {
 width: 100%; }

.ks .nav__links a.active {
 opacity: 1; color: var(--beige); }

.ks .nav__cta {

  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--rosso);
  color: var(--beige) !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  padding: .65rem 1.4rem;
  opacity: 1 !important;
  transition: background var(--trans), transform var(--trans) !important;
}

.ks .nav__cta::after {
 display: none !important; }

.ks .nav__cta:hover {
 background: #c73229 !important; transform: translateY(-1px); }

/* Hamburger */
.ks .nav__burger {

  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.ks .nav__burger span {

  display: block;
  width: 26px; height: 2px;
  background: var(--beige);
  transition: var(--trans);
}

.ks .nav__burger.open span:nth-child(1) {
 transform: translateY(7px) rotate(45deg); }

.ks .nav__burger.open span:nth-child(2) {
 opacity: 0; }

.ks .nav__burger.open span:nth-child(3) {
 transform: translateY(-7px) rotate(-45deg); }

.ks .nav__mobile {

  display: none;
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: var(--antracite);
  padding: 2rem;
  flex-direction: column;
  gap: 1.5rem;
  z-index: 999;
  border-top: 1px solid rgba(255,255,255,.08);
}

.ks .nav__mobile.open {
 display: flex; }

.ks .nav__mobile a {

  font-size: 1.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--beige);
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ---- HERO ---- */
.ks .hero {

  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--antracite);
}

.ks .hero__bg {

  position: absolute;
  inset: 0;
  background-image: url('https://kasauria.circlestudio.it/wp-content/uploads/2026/04/Header_home.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}

.ks .hero__bg::before {

  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: .5;
  mix-blend-mode: overlay;
}

.ks .hero__bg::after {

  content: '';
  position: absolute;
  top: -10%;
  right: -5%;
  width: 45%;
  height: 140%;
  background: linear-gradient(180deg, rgba(232,69,58,.15) 0%, rgba(184,144,74,.08) 100%);
  transform: skewX(-8deg);
  pointer-events: none;
}

.ks .hero__content {

  position: relative;
  z-index: 2;
  padding: clamp(2rem, 5vw, 6rem) clamp(1.5rem, 5vw, 6rem);
  padding-top: calc(var(--nav-h) + 2rem);
  max-width: 900px;
}

.ks .hero__tag {

  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.ks .hero__tag::before {

  content: '';
  display: block;
  width: 40px; height: 2px;
  background: var(--rosso);
}

.ks .hero__tag span {

  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--oro);
}

.ks .hero h1 {

  color: var(--beige);
  margin-bottom: 1.5rem;
}

.ks .hero h1 em {

  font-style: normal;
  color: var(--rosso);
  display: block;
}

.ks .hero__sub {

  font-size: 1.1rem;
  font-weight: 300;
  color: rgba(228,223,208,.75);
  max-width: 520px;
  margin-bottom: 3rem;
  line-height: 1.8;
}

.ks .hero__actions {

  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  align-items: center;
}

.ks .hero__deco {

  position: absolute;
  right: -2%;
  bottom: 5%;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(8rem, 18vw, 22rem);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(232,69,58,.12);
  letter-spacing: -.04em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* ---- BUTTONS ---- */
.ks .btn {

  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 300;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border: none;
  cursor: pointer;
  transition: all var(--trans);
  position: relative;
  overflow: hidden;
}

.ks .btn::after {

  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.1);
  opacity: 0;
  transition: opacity var(--trans);
}

.ks .btn:hover::after {
 opacity: 1; }

.ks .btn:hover {
 transform: translateY(-2px); }

.ks .btn:active {
 transform: translateY(0); }

.ks .btn--primary {

  background: var(--rosso);
  color: var(--beige);
}

.ks .btn--primary:hover {
 background: #c73229; box-shadow: 0 8px 30px rgba(232,69,58,.4); }

.ks .btn--outline {

  background: transparent;
  color: var(--beige);
  border: 1.5px solid rgba(228,223,208,.35);
}

.ks .btn--outline:hover {
 border-color: var(--beige); }

.ks .btn--dark {

  background: var(--antracite);
  color: var(--beige);
}

.ks .btn--gold {

  background: var(--oro);
  color: var(--beige);
}

.ks .btn .arrow {

  display: inline-block;
  transition: transform var(--trans);
}

.ks .btn:hover .arrow {
 transform: translateX(4px); }

/* ---- SECTION HEADER ---- */
.ks .section-header {

  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.ks .section-header--center {
 text-align: center; }

.ks .section-header--center .lead {
 margin-inline: auto; }

.ks .section-header h2 {
 margin-bottom: 1rem; }

/* ---- CARD ---- */
.ks .card {

  background: var(--bianco);
  overflow: hidden;
  transition: transform var(--trans), box-shadow var(--trans);
}

.ks .card:hover {
 transform: translateY(-6px); box-shadow: 0 20px 60px rgba(45,45,45,.15); }

.ks .card__img {

  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--antracite);
  position: relative;
  overflow: hidden;
}

.ks .card__body {
 padding: 2rem; }

.ks .card__body h3 {
 margin-bottom: .75rem; font-size: 1.5rem; }

.ks .card__body p {
 font-size: .9rem; line-height: 1.2; color: rgba(45,45,45,.7); }

/* ---- TEASER ---- */
.ks .teaser-grid {

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.ks .teaser {

  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
}

.ks .teaser__bg {

  position: absolute;
  inset: 0;
  background: var(--antracite);
  transition: transform var(--trans);
}

.ks .teaser:hover .teaser__bg {
 transform: scale(1.05); }

.ks .teaser__overlay {

  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,26,24,.9) 0%, rgba(26,26,24,.2) 60%, transparent 100%);
  z-index: 1;
  transition: opacity var(--trans);
}

.ks .teaser:hover .teaser__overlay {
 opacity: .8; }

.ks .teaser__num {

  position: absolute;
  top: 1.5rem; left: 1.5rem;
  z-index: 2;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--oro);
}

.ks .teaser__content {

  position: relative;
  z-index: 2;
  padding: 2rem;
}

.ks .teaser__content h3 {

  font-size: 1.8rem;
  color: var(--beige);
  margin-bottom: .5rem;
}

.ks .teaser__content p {

  font-size: .85rem;
  color: rgba(228,223,208,.65);
  line-height: 1.2;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--trans), opacity var(--trans);
  opacity: 0;
}

.ks .teaser:hover .teaser__content p {
 max-height: 5rem; opacity: 1; }

.ks .teaser__arrow {

  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--rosso);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-top: 1rem;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--trans), transform var(--trans);
}

.ks .teaser:hover .teaser__arrow {
 opacity: 1; transform: translateX(0); }

.ks .teaser:nth-child(1) .teaser__bg {
 background: linear-gradient(135deg, #3d2010 0%, #2d1a0a 100%); }

.ks .teaser:nth-child(2) .teaser__bg {
 background: linear-gradient(135deg, #1e2a1e 0%, #141e14 100%); }

.ks .teaser:nth-child(3) .teaser__bg {
 background: linear-gradient(135deg, #2a1a10 0%, #3d2515 100%); }

.ks .teaser:nth-child(4) .teaser__bg {
 background: linear-gradient(135deg, #1a1a2e 0%, #252535 100%); }

/* ---- STATS ---- */
.ks .stats {

  background: var(--antracite);
  padding-block: clamp(4rem, 8vw, 7rem);
}

.ks .stats__grid {

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.ks .stat__num {

  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 900;
  color: var(--rosso);
  line-height: 1;
  display: block;
}

.ks .stat__label {

  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(228,223,208,.5);
  margin-top: .5rem;
  display: block;
}

.ks .stat__divider {

  width: 30px; height: 2px;
  background: var(--oro);
  margin: .75rem auto;
}

/* ---- INTRO STRIP ---- */
.ks .intro-strip {

  background: var(--antracite);
  padding-block: clamp(5rem, 9vw, 8rem);
  position: relative;
  overflow: hidden;
}

.ks .intro-strip::before {

  content: 'K';
  position: absolute;
  right: -2%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 55vw;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(232,69,58,.06);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.ks .intro-strip h2 {
 color: var(--beige); }

.ks .intro-strip .lead {
 color: rgba(228,223,208,.75); }

.ks .intro-strip .eyebrow {
 color: var(--oro); }

/* ---- PLUS LIST ---- */
.ks .plus-list {

  display: flex;
  flex-direction: column;
  gap: .8rem;
  margin-top: 2rem;
}

.ks .plus-list li {

  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .03em;
}

.ks .plus-list li::before {

  content: '';
  display: block;
  width: 20px; height: 2px;
  background: var(--rosso);
  flex-shrink: 0;
}

/* ---- FEATURE / QUOTE ---- */
.ks .feature-block {

  background: var(--bianco);
  padding: clamp(3rem, 6vw, 5rem);
  position: relative;
}

.ks .feature-block__accent {

  position: absolute;
  top: 0; left: 0;
  width: 5px;
  height: 100%;
  background: var(--rosso);
}

.ks .quote-block {

  border-left: 4px solid var(--oro);
  padding: 1.5rem 2rem;
  background: rgba(184,144,74,.05);
  margin-top: 2.5rem;
}

.ks .quote-block p {

  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  color: var(--antracite);
  line-height: 1.2;
  text-transform: uppercase;
}

/* ---- PROCESS ---- */
.ks .process {

  background: var(--antracite);
  padding-block: clamp(5rem, 10vw, 9rem);
}

.ks .process h2 {
 color: var(--beige); }

.ks .process .eyebrow {
 color: var(--oro); }

.ks .steps {

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 4rem;
  border-top: 1px solid rgba(228,223,208,.1);
}

.ks .step {

  padding: 2.5rem 2rem;
  border-right: 1px solid rgba(228,223,208,.1);
  position: relative;
}

.ks .step:last-child {
 border-right: none; }

.ks .step__num {

  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(232,69,58,.3);
  line-height: 1;
  display: block;
  margin-bottom: 1rem;
}

.ks .step h4 {

  color: var(--beige);
  font-size: 1rem;
  letter-spacing: .12em;
  margin-bottom: .75rem;
}

.ks .step p {

  font-size: .85rem;
  color: rgba(228,223,208,.55);
  line-height: 1.2;
}

/* ---- PRODUCTS ---- */
.ks .products-grid {

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--antracite);
}

.ks .product-block {

  background: var(--bianco);
  padding: clamp(3rem, 5vw, 5rem);
  position: relative;
  overflow: hidden;
}

.ks .product-block__bg-letter {

  position: absolute;
  bottom: -5%;
  right: -3%;
  font-family: var(--font-display);
  font-size: 14rem;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(45,45,45,.05);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.ks .product-block--dark {

  background: var(--antracite);
}

.ks .product-block--dark h3 {
 color: var(--beige); }

.ks .product-block--dark p {
 color: rgba(228,223,208,.65); }

.ks .product-block--dark .product-block__bg-letter {
 -webkit-text-stroke: 1px rgba(232,69,58,.08); }

.ks .product-block .eyebrow {
 margin-bottom: 1rem; }

.ks .product-block h3 {
 margin-bottom: 1.25rem; }

.ks .product-block p {
 font-size: .95rem; line-height: 1.2; color: rgba(45,45,45,.7); }

.ks .tag-list {

  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 2rem;
}

.ks .tag {

  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(232,69,58,.1);
  border: 1px solid rgba(232,69,58,.2);
  color: var(--rosso);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .4rem .9rem;
}

.ks .product-block--dark .tag {

  background: rgba(228,223,208,.08);
  border-color: rgba(228,223,208,.2);
  color: var(--beige);
}

/* ---- PACKAGING ---- */
.ks .packaging {

  padding-block: clamp(5rem, 9vw, 8rem);
  background: var(--beige);
}

.ks .packaging__visual {

  width: 100%;
  aspect-ratio: 16/9;
  background: var(--antracite);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.ks .packaging__label {

  font-family: var(--font-display);
  font-size: 8rem;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(228,223,208,.1);
  text-transform: uppercase;
  letter-spacing: -.02em;
}

/* ---- CONTACT ---- */
.ks .contact {

  background: var(--antracite);
  padding-block: clamp(5rem, 10vw, 9rem);
}

.ks .contact h2 {
 color: var(--beige); }

.ks .contact .eyebrow {
 color: var(--oro); }

.ks .contact p {
 color: rgba(228,223,208,.7); }

.ks .contact-grid {

  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: start;
}

.ks .contact-info {

  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.ks .contact-info__item {

  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.ks .contact-info__icon {

  width: 44px; height: 44px;
  background: rgba(232,69,58,.15);
  border: 1px solid rgba(232,69,58,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--rosso);
  font-size: 1.1rem;
}

.ks .contact-info__text strong {

  display: block;
  color: var(--beige);
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: .25rem;
  font-family: var(--font-body);
  font-weight: 300;
}

.ks .contact-info__text span {

  color: rgba(228,223,208,.65);
  font-size: .95rem;
}

/* ---- FORM ---- */
.ks .form {

  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.ks .form__row {
 display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

.ks .form__field {

  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.ks .form__field label {

  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(228,223,208,.5);
}

.ks .form__field input,
.ks .form__field textarea,
.ks .form__field select {

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--beige);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .95rem;
  padding: .9rem 1.1rem;
  outline: none;
  transition: border-color var(--trans), background var(--trans);
  resize: vertical;
  appearance: none;
}

.ks .form__field input:focus,
.ks .form__field textarea:focus,
.ks .form__field select:focus {

  border-color: var(--rosso);
  background: rgba(232,69,58,.05);
}

.ks .form__field textarea {
 min-height: 120px; }

.ks .form__field select option {
 background: var(--antracite); color: var(--beige); }

/* ---- PAGE HEADER ---- */
.ks .page-header {

  background: var(--antracite);
  padding-block: clamp(7rem, 13vw, 11rem);
  padding-top: calc(var(--nav-h) + clamp(4rem, 8vw, 7rem));
  position: relative;
  overflow: hidden;
}

.ks .page-header__bg-text {

  position: absolute;
  right: -2%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(8rem, 20vw, 22rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(232,69,58,.08);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.ks .page-header h1 {

  color: var(--beige);
  max-width: 14ch;
}

.ks .page-header .lead {

  color: rgba(228,223,208,.65);
  margin-top: 1.5rem;
}

/* ---- LINE SEP ---- */
.ks .line-sep {

  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-block: 3rem;
}

.ks .line-sep::before,
.ks .line-sep::after {

  content: '';
  flex: 1;
  height: 1px;
  background: rgba(45,45,45,.15);
}

.ks .line-sep span {

  width: 8px; height: 8px;
  background: var(--rosso);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ---- FOOTER ---- */
.ks .footer {

  background: var(--nero);
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid rgba(228,223,208,.06);
}

.ks .footer__inner {

  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
}

.ks .footer__logo img {

  height: 48px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .8;
  margin-bottom: 1.25rem;
}

.ks .footer__tagline {

  font-size: .85rem;
  color: rgba(228,223,208,.4);
  line-height: 1.7;
  max-width: 280px;
}

.ks .footer h4 {

  color: var(--beige);
  font-size: .9rem;
  letter-spacing: .25em;
  margin-bottom: 1.25rem;
  font-family: var(--font-body);
  font-weight: 300;
  opacity: .5;
}

.ks .footer ul {

  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.ks .footer ul a {

  font-size: .88rem;
  color: rgba(228,223,208,.45);
  transition: color var(--trans);
}

.ks .footer ul a:hover {
 color: var(--rosso); }

.ks .footer__bottom {

  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(228,223,208,.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ks .footer__bottom p {

  font-size: .88rem;
  color: rgba(228,223,208,.25);
}

.ks .footer__social {

  display: flex;
  gap: 1rem;
}

.ks .footer__social a {

  width: 36px; height: 36px;
  border: 1px solid rgba(228,223,208,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(228,223,208,.4);
  font-size: .85rem;
  transition: all var(--trans);
}

.ks .footer__social a:hover {

  background: var(--rosso);
  border-color: var(--rosso);
  color: var(--beige);
}

/* ---- ANIMATIONS ---- */
@keyframes fadeUp {
from {
 opacity: 0; transform: translateY(30px); }

to {
 opacity: 1; transform: translateY(0); }

}
@keyframes fadeIn {
from {
 opacity: 0; }

to {
 opacity: 1; }

}
@keyframes slideRight {
from {
 transform: scaleX(0); transform-origin: left; }

to {
 transform: scaleX(1); transform-origin: left; }

}
.ks .anim-up {
 animation: fadeUp .8s cubic-bezier(.25,.8,.25,1) both; }

.ks .anim-up--d1 {
 animation-delay: .15s; }

.ks .anim-up--d2 {
 animation-delay: .3s; }

.ks .anim-up--d3 {
 animation-delay: .45s; }

.ks .reveal {

  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
}

.ks .reveal.revealed {
 opacity: 1; transform: none; }

.ks .reveal--d1 {
 transition-delay: .1s; }

.ks .reveal--d2 {
 transition-delay: .2s; }

.ks .reveal--d3 {
 transition-delay: .3s; }

.ks .reveal--d4 {
 transition-delay: .4s; }

/* ---- PRODOTTI CARDS ---- */
.ks .prod-card {

  background: var(--bianco);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--trans), box-shadow var(--trans);
}

.ks .prod-card:hover {
 transform: translateY(-8px); box-shadow: 0 24px 60px rgba(45,45,45,.15); }

.ks .prod-card__header {

  padding: 3rem 2.5rem 2rem;
  position: relative;
  overflow: hidden;
}

.ks .prod-card__header--rosso {
 background: var(--rosso); }

.ks .prod-card__header--antracite {
 background: var(--antracite); }

.ks .prod-card__deco {

  position: absolute;
  right: -10px; bottom: -20px;
  font-family: var(--font-display);
  font-size: 9rem;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.1);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.ks .prod-card__badge {

  display: inline-block;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--beige);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .35rem .8rem;
  margin-bottom: 1.25rem;
}

.ks .prod-card__header h3 {

  color: var(--beige);
  font-size: 2.8rem;
  position: relative;
  z-index: 1;
}

.ks .prod-card__body {

  padding: 2.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ks .prod-card__body p {

  font-size: .95rem;
  line-height: 1.2;
  color: rgba(45,45,45,.7);
}

.ks .quality-badge {

  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: rgba(232,69,58,.05);
  border: 1px solid rgba(232,69,58,.12);
}

.ks .quality-badge__icon {

  font-size: 1.8rem;
  flex-shrink: 0;
}

.ks .quality-badge__text strong {

  display: block;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rosso);
  margin-bottom: .2rem;
}

.ks .quality-badge__text span {

  font-size: .85rem;
  color: rgba(45,45,45,.6);
}

.ks .pack-item {

  background: var(--bianco);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-bottom: 3px solid transparent;
  transition: border-color var(--trans), transform var(--trans);
}

.ks .pack-item:hover {

  border-color: var(--rosso);
  transform: translateY(-4px);
}

.ks .pack-item__icon {

  font-size: 3rem;
  margin-bottom: .5rem;
}

.ks .pack-item h4 {

  font-size: 1.1rem;
  margin-bottom: .5rem;
}

.ks .pack-item p {

  font-size: .88rem;
  color: rgba(45,45,45,.65);
  line-height: 1.2;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1100px) {
.ks .grid-4,
.ks .stats__grid,
.ks .steps {
 grid-template-columns: repeat(2, 1fr); }

.ks .teaser-grid {
 grid-template-columns: repeat(2, 1fr); }

.ks .footer__inner {
 grid-template-columns: 1fr 1fr; gap: 2.5rem; }

.ks .steps .step {
 border-right: none; border-bottom: 1px solid rgba(228,223,208,.1); }

}
@media (max-width: 860px) {
.ks .grid-2 {
 grid-template-columns: 1fr; gap: 2.5rem; }

.ks .grid-3 {
 grid-template-columns: 1fr; }

.ks .contact-grid {
 grid-template-columns: 1fr; gap: 3rem; }

.ks .products-grid {
 grid-template-columns: 1fr; gap: 2px; }

.ks .form__row {
 grid-template-columns: 1fr; }

.ks .nav__links {
 display: none; }

.ks .nav__burger {
 display: flex; }

}
@media (max-width: 600px) {
.ks .teaser-grid {
 grid-template-columns: 1fr 1fr; }

.ks .stats__grid {
 grid-template-columns: 1fr 1fr; }

.ks .steps {
 grid-template-columns: 1fr; }

.ks .footer__inner {
 grid-template-columns: 1fr; }

.ks .footer__bottom {
 flex-direction: column; gap: 1.5rem; text-align: center; }

.ks .hero__actions {
 flex-direction: column; align-items: flex-start; }

.ks .hero__deco {
 display: none; }

}

/* ============================================================
   STEP 1 — NAVBAR + FOOTER (restyling completo)
   Classi nuove con prefisso .ks-nav__ e .ks-footer__
   Le vecchie classi .nav__* e .footer__* restano momentaneamente
   per non rompere builder Oxygen, andranno rimosse nello step pulizia.
   ============================================================ */

/* ---------- NAVBAR ---------- */
.ks .ks-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* Stato di default = navbar IN CIMA: piu' alta, padding interno 60/60.
     Niente height fisso: l'altezza naturale e' determinata dal contenuto
     (logo K 80px) + padding verticale. */
  padding: 60px 0;
  background: transparent;
  transition: background var(--trans), border-color var(--trans),
              padding var(--trans), backdrop-filter var(--trans);
}
/* Stato SCROLLATA o is-dark: navbar piu' compatta + sfondo semi-trasparente
   con effetto frosted glass (backdrop blur). Le dimensioni dei loghi e il
   padding tornano a quelli compatti tramite regole piu' specifiche sotto. */
.ks .ks-nav.is-scrolled,
.ks .ks-nav.is-dark {
  padding: 1.25rem 0; /* 20px top/bottom -> con logo 40px = ~80px totali, come prima */
  /* Sfondo semi-trasparente con blur retrostante (frosted glass) */
  background: rgba(30, 30, 30, .65);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Reset container Oxygen attorno alla nav: se Oxygen ha inserito un
   wrapper <section> o <div> con sfondo proprio, lo neutralizziamo
   tramite il :has selector (sui browser moderni). Cosi' la "meta'
   colorata" che si vede dietro la nav fissa sparisce. */
.ks:has(> .ks-nav) {
  background: transparent !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.ks .ks-nav__inner {
  max-width: var(--mid-page);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 10vw, 10rem);
}

/* Logo K (sx) */
.ks .ks-nav__brand {
  display: inline-flex;
  align-items: center;
  color: var(--beige);
  transition: color var(--trans);
}
.ks .ks-nav__brand-svg {
  /* Default = navbar in cima: K alta 80px (piu' grande) */
  height: 80px;
  width: auto;
  display: block;
  transition: height var(--trans);
}
/* Stato scrolled / is-dark: K torna compatta a 40px */
.ks .ks-nav.is-scrolled .ks-nav__brand-svg,
.ks .ks-nav.is-dark .ks-nav__brand-svg {
  height: 40px;
}
.ks .ks-nav__brand:hover {
  color: var(--oro);
}

/* Lista link (centro) */
.ks .ks-nav__list {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
.ks .ks-nav__link {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: .1rem;
  text-transform: uppercase;
  color: var(--beige);
  padding: .5rem 0;
  position: relative;
  transition: color var(--trans);
  white-space: nowrap;
}
.ks .ks-nav__link:hover,
.ks .ks-nav__link.is-active {
  color: var(--oro);
}
/* .ks .ks-nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--oro);
} */

/* Pecora (dx) - sempre oro indipendentemente dal color del parent */
.ks .ks-nav__mark {
  display: inline-flex;
  align-items: center;
  color: var(--oro);
  transition: opacity var(--trans);
  justify-content: end;
}
.ks .ks-nav__mark-svg {
  /* Default = navbar in cima: pecora alta 64px (piu' grande) */
  height: 64px;
  width: auto;
  display: block;
  transition: height var(--trans);
}
/* Stato scrolled / is-dark: pecora torna compatta a 32px */
.ks .ks-nav.is-scrolled .ks-nav__mark-svg,
.ks .ks-nav.is-dark .ks-nav__mark-svg {
  height: 32px;
}
.ks .ks-nav__mark:hover { opacity: .7; }

/* Burger (mobile only) */
.ks .ks-nav__burger {
  display: none;
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  justify-self: end;
}
.ks .ks-nav__burger span {
  display: block;
  position: absolute;
  left: 4px; right: 4px;
  height: 2px;
  background: var(--bianco);
  transition: var(--trans);
}
.ks .ks-nav__burger span:nth-child(1) { top: 9px; }
.ks .ks-nav__burger span:nth-child(2) { top: 15px; }
.ks .ks-nav__burger span:nth-child(3) { top: 21px; }
.ks .ks-nav__burger.is-open span:nth-child(1) {
  top: 15px; transform: rotate(45deg);
}
.ks .ks-nav__burger.is-open span:nth-child(2) {
  opacity: 0;
}
.ks .ks-nav__burger.is-open span:nth-child(3) {
  top: 15px; transform: rotate(-45deg);
}

/* Mobile menu (slide top) */
.ks .ks-nav__mobile {
  /* Nascosto di default. Si mostra solo quando il burger viene cliccato
     (toggle classe .is-open via JS). Uso display:none invece di transform
     per evitare che lo sfondo antracite resti visibile quando il menu
     non e' aperto (capitato in alcuni contesti Oxygen). */
  display: none;
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  overflow-y: auto;   
  background: rgba(30, 30, 30, .65);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 2rem clamp(1.25rem, 4vw, 2.5rem) 3rem;
  z-index: 99;
  border-bottom: 1px solid rgba(255,255,255,.06);
  animation: ksMobileMenuSlide .35s cubic-bezier(.25,.8,.25,1);
  align-items: center;
}
.ks .ks-nav__mobile.is-open {
  display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
@keyframes ksMobileMenuSlide {
  from { transform: translateY(-15%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.ks .ks-nav__mobile ul {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.ks .ks-nav__mlink {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  text-transform: uppercase;
  color: var(--beige);
  letter-spacing: .02em;
  line-height: 1;
}
.ks .ks-nav__mlink.is-active {
  color: var(--oro);
}

/* Social icons desktop — dentro .ks-nav__right */
.ks .ks-nav__right {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(.75rem, 1.5vw, 1.25rem);
}

.ks .ks-nav__social {
    display: flex;
    align-items: center;
    gap: .65rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ks .ks-nav__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--beige);
    opacity: .6;
    transition: opacity var(--trans), color var(--trans);
}
.ks .ks-nav__social a:hover {
    opacity: 1;
    color: var(--oro);
}

/* Social mobile — in fondo al menu */
.ks .ks-nav__mobile-social {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 2rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(255,255,255,.08);
}

.ks .ks-nav__mobile-social a {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-display);
    font-size: 1.2rem;
    text-transform: uppercase;
    color: var(--beige);
    opacity: .7;
    letter-spacing: .04em;
    transition: opacity var(--trans), color var(--trans);
}
.ks .ks-nav__mobile-social a:hover {
    opacity: 1;
    color: var(--oro);
}

/* Su mobile nascondi i social desktop */
@media (max-width: 900px) {
    .ks .ks-nav__social {
        display: none;
    }
    /* Il right diventa solo il wrapper del burger, già gestito */
    .ks .ks-nav__right {
        display: none;
    }
}


/* ---------- FOOTER ---------- */
.ks .ks-footer {
  background: var(--antracite);
  color: var(--beige);
  /* padding-top piu' grande per fare spazio al timbro della banda CTA che sfora
     dalla sezione precedente (sulla home). Su altre pagine il padding maggiore
     resta innocuo (semplicemente piu' aria sopra). */
  padding: 3rem 0;
}
.ks .ks-footer__inner {
  max-width: var(--mid-page);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  /* 5 colonne come da design del designer:
     1) wordmark grande - LARGHEZZA RISERVATA ESPLICITA (non auto)
        per impedire alle colonne fr successive di strozzarla
     2) tagline
     3) col1 Naviga (link da circle_get_menu_voci)
     4) col2 Linee
     5) col3 Contatti */
  grid-template-columns: clamp(220px, 18vw, 280px) 1.3fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

/* Wordmark — pi'u grande del default, come da design */
.ks .ks-footer__brand {
  flex-shrink: 0;
  min-width: 0;
}
.ks .ks-footer__wordmark {
  display: block;
  /* width esplicita (non 100%): il SVG ha dimensioni proprie chiare, senza
     dipendere dal calcolo del parent grid. Stesso valore della prima colonna grid
     del footer, così riempie tutta la colonna riservata senza ambiguità. */
  width: clamp(220px, 18vw, 250px);
  height: auto;
  /* NB: i colori del wordmark (KASAURIA crema + script in oro) sono
     hardcoded nel file SVG del designer. Non si controllano via CSS. */
  margin: 0 auto;
}

/* Tagline — colonna a se' affiancata al logo */
.ks .ks-footer__tagline-col {
  padding-top: .25rem;
}
.ks .ks-footer__tagline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .85rem;
  line-height: 1.7;
  color: var(--beige);
  margin: 0;
}

/* Colonne link — niente titoli (come da design) */
.ks .ks-footer__col {
  padding-top: .25rem;
}
.ks .ks-footer__list {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.ks .ks-footer__list a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .9rem;
  color: var(--beige);
  transition: color var(--trans);
}
.ks .ks-footer__list a:hover {
  color: var(--oro);
}

/* Bottom bar — copyright centrato + social a destra, separatore oro */
.ks .ks-footer__bottom {
  position: relative;
  max-width: var(--mid-page);
  margin: 0 auto;
  padding: 1.75rem clamp(1.25rem, 3vw, 2.5rem) 0;
  border-top: 1px solid var(--oro);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}
.ks .ks-footer__copy {
  grid-column: 2;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .82rem;
  color: var(--beige);
  text-align: center;
  margin: 0;
}
.ks .ks-footer__social {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 1rem;
}
.ks .ks-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  color: var(--beige);
  transition: color var(--trans);
}
.ks .ks-footer__social a:hover {
  color: var(--oro);
}

/* ---------- RESPONSIVE NAV/FOOTER ---------- */
@media (max-width: 900px) {
  .ks .ks-nav__list,
  .ks .ks-nav__mark {
    display: none;
  }
  .ks .ks-nav__burger {
    display: block;
  }
  .ks .ks-nav__inner {
    grid-template-columns: auto auto;
  }

  /* Tablet: logo+tagline in alto, 3 colonne sotto */
  .ks .ks-footer__inner {
    grid-template-columns: auto 1.2fr;
    gap: 2.5rem;
  }
  .ks .ks-footer__brand {
    grid-column: 1;
  }
  .ks .ks-footer__tagline-col {
    grid-column: 2;
  }
  .ks .ks-footer__col {
    grid-column: span 1;
  }
  .ks .ks-footer__col:nth-of-type(3) {
    grid-column: 1;
    grid-row: 2;
  }
  .ks .ks-footer__col:nth-of-type(4) {
    grid-column: 2;
    grid-row: 2;
  }
  .ks .ks-footer__col:nth-of-type(5) {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

@media (max-width: 600px) {
  .ks .ks-footer__inner {
    grid-template-columns: 1fr;
  }
  .ks .ks-footer__brand,
  .ks .ks-footer__tagline-col,
  .ks .ks-footer__col {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .ks .ks-footer__bottom {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1rem;
  }
  .ks .ks-footer__copy {
    grid-column: 1;
  }
  .ks .ks-footer__social {
    grid-column: 1;
    justify-self: center;
  }
}


/* ============================================================
   STEP 2 — HOME PAGE
   Sezioni: hero, stats (con pattern K), teaser grid,
   claim (con pattern K), prodotti card, banda CTA rossa.
   ============================================================ */

/* ---------- Pattern K: sfondo decorativo riutilizzabile ---------- */
/* Usato nelle bande nere (stats + claim). Pattern di K ripetute,
   trasparenza dosata per essere visibili ma non invadenti, con
   diverse rotazioni per dare movimento. */
.ks .ks-pattern-k {
  position: relative;
  background-color: var(--antracite);
 /* background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'><g fill='%23FCF6F0' fill-opacity='0.08'><path d='M35.413,36.45,14.38,81.933V36.45H0L9.053,158.835H14.38V92.718l23.8,66.117h13.09L26.572,86.468,49.391,36.45Z' transform='translate(15 15) scale(0.85) rotate(-15 25 100)'/><path d='M35.413,36.45,14.38,81.933V36.45H0L9.053,158.835H14.38V92.718l23.8,66.117h13.09L26.572,86.468,49.391,36.45Z' transform='translate(160 50) scale(0.7) rotate(20 25 100)'/><path d='M35.413,36.45,14.38,81.933V36.45H0L9.053,158.835H14.38V92.718l23.8,66.117h13.09L26.572,86.468,49.391,36.45Z' transform='translate(80 160) scale(0.95) rotate(-8 25 100)'/><path d='M35.413,36.45,14.38,81.933V36.45H0L9.053,158.835H14.38V92.718l23.8,66.117h13.09L26.572,86.468,49.391,36.45Z' transform='translate(210 180) scale(0.6) rotate(35 25 100)'/></g></svg>");*/
  background-image: url("https://kasauria.circlestudio.it/wp-content/uploads/2026/05/bg-k.png");
  background-repeat: repeat;
  /*background-size: 280px 280px;*/
  overflow: hidden;
  background-attachment: fixed;
}
/* Variante: pattern visibile SOLO come fascia in basso (sovrascrive repeat + position) */
.ks .ks-pattern-k--bottom {
  background-repeat: repeat-x;
  background-position: center bottom;
}

/* ---------- BUTTONS riutilizzabili ---------- */
.ks .ks-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-meta);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 1rem 2.25rem;
  border: 1px solid;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--trans);
  background: transparent;
}

/* Variante "ghost" su sfondo chiaro: testo rosso, sfondo intermedio */
.ks .ks-btn--ghost {
  background: var(--beige);
  color: var(--rosso);
  border-color: transparent;
  padding: 1rem 3.5rem;
  letter-spacing: .16em;
}
.ks .ks-btn--ghost:hover {
  background: var(--rosso);
  color: var(--beige);
}

/* Variante "cta": pieno bianco con testo nero, inverte in hover */
.ks .ks-btn--cta {
  background: var(--bianco);
  color: var(--nero);
  border-color: var(--beige);
  padding: 1rem 3rem;
}
.ks .ks-btn--cta:hover {
  background: var(--nero);
  color: var(--beige);
}

/* Variante "outline": bordo bianco trasparente, testo bianco, riempimento
   on hover (vecchio comportamento di .ks-btn--cta).
   Usata nelle pagine Home e Produzione, dove il bottone si appoggia su
   banda rossa o sfondi gia' molto colorati e l'outline e' piu' elegante
   del pieno bianco. Le altre pagine (Azienda/Materie Prime) hanno gia'
   override propri tramite .ks-home-cta--oro / --antracite. */
.ks .ks-btn--outline {
  background: var(--bianco);
  color: var(--rosso);
  border-color: var(--beige);
  padding: 1rem 3rem;
}
.ks .ks-btn--outline:hover {
  background: transparent;
  color: var(--beige);
}
/* Variante oro (pagina Azienda): bottone con sfondo crema pieno e testo oro */
.ks .ks-home-cta--oro .ks-btn--cta {
  background: var(--crema);
  color: var(--oro);
  border-color: var(--crema);
}
.ks .ks-home-cta--oro .ks-btn--cta:hover {
  background: transparent;
  color: var(--crema);
  border-color: var(--crema);
}
/* Variante antracite (pagina Materie Prime): bottone con sfondo rosso pieno
   e testo bianco */
.ks .ks-home-cta--antracite .ks-btn--cta {
  background: var(--rosso);
  color: var(--beige);
  border-color: var(--rosso);
}
.ks .ks-home-cta--antracite .ks-btn--cta:hover {
  background: transparent;
  color: var(--beige);
  border-color: var(--beige);
}

/* ---------- 1. HERO ---------- */
.ks .ks-home-hero {
  position: relative;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--antracite);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* NB: niente padding-top. La nav e' position:fixed e galleggia sopra
     l'hero da sola; la foto deve poter andare fin sotto la nav (visibile
     attraverso la nav trasparente). */
  color: var(--beige);
  overflow: hidden;
  background-attachment: fixed;
}
/* Overlay scuro per esaltare il logo (piu' marcato che prima) */
.ks .ks-home-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.65) 100%);
  pointer-events: none;
}
.ks .ks-home-hero__content {
  position: relative;
  text-align: center;
  z-index: 2;
  max-width: min(90vw, var(--max-page));
}
/* Title-row: contiene wordmark CENTRATO (non flex con timbro a fianco).
   Il timbro e' un elemento assoluto separato sovrapposto in posizione
   precisa (in alto a destra del wordmark). */
.ks .ks-home-hero__title-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ks .ks-home-hero__title {
  margin: 0;
  font-size: 0; /* la dimensione la dà l'SVG */
  line-height: 1;
}
.ks .ks-home-hero__wordmark {
  display: block;
  width: clamp(280px, 38vw, 420px);
  height: auto;
}

/* ============================================================
   ANIMAZIONE TIMBRO ROTANTE
   Tutti i marchi/timbri (logo-stamp.svg) hanno il gruppo esterno
   "Raggruppa 1099" che contiene il testo curvo "KASAURIA". Lo
   facciamo girare lentamente di 360° in 8s, all'infinito, con
   timing lineare per un movimento costante.
   Il gruppo interno "Raggruppa 1098" (cerchio + pecora + testo
   centrale ARROSTICINI MEAT QUALITY) resta fermo.

   IMPORTANTE: uso [data-name="Raggruppa 1099"] invece di #id perche'
   nella stessa pagina possono coesistere PIU' timbri (es. home: hero
   stamp + CTA stamp). Lo SVG viene inlinato dal PHP helper, e gli ID
   vengono duplicati nel DOM. Il selettore via data-name funziona su
   TUTTI i gruppi senza problemi di duplicate IDs.
   ============================================================ */
.ks [class*="__stamp"] svg [data-name="Raggruppa 1099"] {
  transform-box: fill-box;
  transform-origin: center;
  animation: circle-stamp-spin 12s infinite linear;
}
@keyframes circle-stamp-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Timbro: posizione assoluta sovrapposto in alto a destra del wordmark */
.ks .ks-home-hero__stamp {
  position: absolute;
  top: -30%;
  right: -30%;
  width: 100%;
  max-width: 190px;
  color: var(--rosso);
  pointer-events: none;
}
.ks .ks-home-hero__stamp svg {
  width: 100%;
  height: auto;
  display: block;
}
/* Freccia scroll giu' */
.ks .ks-home-hero__arrow {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--beige);
  transition: transform var(--trans), opacity var(--trans);
  animation: ksHomeArrowBounce 2.4s ease-in-out infinite;
}
.ks .ks-home-hero__arrow:hover {
  opacity: .7;
}
@keyframes ksHomeArrowBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}

/* "Screen-reader-only" testo per accessibilita' */
.ks .screen-reader-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- 2. STATS ---------- */
.ks .ks-home-stats {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  /* Importante: nessun padding-top extra, il pattern K parte dal bordo */
  position: relative;
}
/* Layer scuro semitrasparente sopra il pattern K, sotto i numeri,
   per far risaltare meglio il contenuto. */
.ks .ks-home-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  pointer-events: none;
  z-index: 1;
}
.ks .ks-home-stats__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.ks .ks-home-stats__item {
  color: var(--beige);
  /* Stato iniziale per animazione di entrata: invisibile e leggermente
     piu' in basso, poi sale e appare con .reveal--in (vedi JS). */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.ks .ks-home-stats__item.reveal--in {
  opacity: 1;
  transform: translateY(0);
}
/* Delay scaglionato per dare un effetto a cascata sui 3 item */
.ks .ks-home-stats__item:nth-child(1) { transition-delay: 0s; }
.ks .ks-home-stats__item:nth-child(2) { transition-delay: .15s; }
.ks .ks-home-stats__item:nth-child(3) { transition-delay: .3s; }

.ks .ks-home-stats__number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--oro);
  line-height: 1;
  margin-bottom: .5rem;
  font-weight: 400;
  /* font-feature: numeri tabulari per evitare salti di larghezza
     durante l'animazione count-up */
  font-variant-numeric: tabular-nums;
}
.ks .ks-home-stats__label {
  font-family: var(--font-meta);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--beige);
}

/* ---------- 3. TEASER GRID ---------- */
.ks .ks-home-teaser {
  background: var(--crema);
}
.ks .ks-home-teaser__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.ks .ks-home-teaser__item {
  position: relative;
  aspect-ratio: 1 / 1.15;
  overflow: hidden;
  display: block;
  cursor: pointer;
}
.ks .ks-home-teaser__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.25,.8,.25,1);
}
.ks .ks-home-teaser__img--placeholder {
  background: linear-gradient(135deg, var(--antracite), var(--bordeaux));
}
.ks .ks-home-teaser__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}
.ks .ks-home-teaser__label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.6vw, 2.2rem);
  letter-spacing: .04em;
  color: var(--beige);
  text-transform: uppercase;
  z-index: 2;
  width: 90%;
  line-height: 1.1;
  font-weight: 400;
}
.ks .ks-home-teaser__item:hover .ks-home-teaser__img {
  transform: scale(1.06);
}
.ks .ks-home-teaser__item:hover .ks-home-teaser__overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.15) 30%, rgba(0,0,0,.8) 100%);
}

/* ---------- 4. CLAIM ---------- */
.ks .ks-home-claim {
  padding: clamp(4rem, 9vw, 7rem) 0;
}
.ks .ks-home-claim__text {
  position: relative;
  z-index: 2;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 3.2rem);
  line-height: 0.9;
  letter-spacing: .02em;
  color: var(--beige);
  text-transform: uppercase;
  font-weight: 400;
  max-width: min(90vw, var(--max-page));
  margin-inline: auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

/* ---------- 5. PRODOTTI ---------- */
.ks .ks-home-prodotti {
  /* Sfondo a 2 metà: bianco a sinistra (per la card Linea Freschi),
     sabbia/EFE8E0 a destra (per la card Linea Gelo).
     Le card ora hanno bg trasparente e ricevono il colore dallo sfondo
     della sezione: vantaggio = quando la sezione si stringe sotto 1920px,
     non c'e' rischio di rottura del 50/50. */
  background: #FFFFFF;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(239, 232, 224, 1) 50%,
    rgba(239, 232, 224, 1) 100%);
  /* Cappa la sezione a 1920px su monitor molto larghi (4K, ultrawide):
     oltre, il contenuto e il suo background si fermano e ai lati si vede
     il colore body. Sotto 1920px nessun effetto. */
  margin-inline: auto;
}
.ks .ks-home-prodotti__grid {
  /* Split-screen 50/50 a tutta larghezza, nessun max-width, nessun padding */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: var(--max-page);
  margin: 0 auto;
}

/* Card prodotto - tutta-larghezza, senza bordo.
   overflow:hidden contiene immagini grandi che escono dallo slot media.
   Layout flex COLUMN: due righe verticali dentro la card:
   - riga 1: .ks-prod-card__content (flex-row con testo 35% + immagine 65%)
   - riga 2: .ks-prod-card__tags (full-width, tag allineati a sinistra) */
.ks .ks-prod-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px;
  gap: 20px;
  overflow: hidden;
}
.ks .ks-prod-card--bg-crema {
  /* trasparente: il colore (bianco) arriva dal gradient della section */
  background: transparent;
}
.ks .ks-prod-card--bg-crema-2 {
  /* trasparente: il colore (sabbia EFE8E0) arriva dal gradient della section */
  background: transparent;
}
/* Riga 1 della card: contiene testo a sinistra (35%) e immagine a destra
   (65%). e' un flex-row che occupa tutta la larghezza della card. */
.ks .ks-prod-card__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: clamp(1rem, 2vw, 2rem);
  position: relative;
  z-index: 2; /* il testo sta sopra le immagini in caso di sovrapposizione */
}
.ks .ks-prod-card__text {
  flex: 0 0 35%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 2;
}
.ks .ks-prod-card__eyebrow {
  font-family: var(--font-meta);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0;
}
.ks .ks-prod-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: .02em;
  color: var(--antracite);
  text-transform: uppercase;
  line-height: 0.9;
  margin: 0;
  font-weight: 400;
}

/* Riga 2 della card: tag pill su una loro riga full-width, allineati
   a sinistra. flex-wrap permette il wrap se i tag sono molti. */
.ks .ks-prod-card__tags {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ks .ks-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .65rem 1.1rem;
  font-family: var(--font-meta);
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: none;
  /* Toni soft come da design: bordo + testo oro tenue, no rosso brand */
  border: 1px solid rgba(193, 139, 82, .35);
  color: rgba(193, 139, 82, .75);
  border-radius: 3px;
  background: transparent;
  white-space: nowrap;
  flex: 0 1 auto;
}

/* Media: immagine grande, occupa ~65% della larghezza dentro la riga 1
   (__content). Img a 100% riempie lo slot. */
.ks .ks-prod-card__media {
  flex: 0 0 80%;
  margin-left: -15%;
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.ks .ks-prod-card__media img {
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
  display: block;
  object-fit: contain;
}
.ks .ks-prod-card__media--placeholder {
  width: 100%;
  height: 280px;
  background: linear-gradient(135deg, rgba(193,139,82,.05), rgba(88,33,39,.05));
}

/* Bottone "Scoprili tutti" - sotto le card, sfondo della section parent */
.ks .ks-home-prodotti__btn-wrap {
  text-align: center;
  padding: clamp(2rem, 4vw, 3rem) 1rem clamp(2.5rem, 5vw, 4rem);
  background-color: var(--avorio);
}

/* ---------- 6. BANDA CTA ROSSA ---------- */
.ks .ks-home-cta {
  position: relative;
  background: var(--rosso);
  color: var(--beige);
  /* padding-top piu' grande per ospitare il packaging che sfora sopra */
  padding: 0 0 clamp(3rem, 6vw, 5rem);
  /* overflow visible per permettere ai due elementi di sforare:
     packaging sopra, timbro sotto. */
  overflow: visible;
}
/* Variante oro per future pagine (Azienda) */
.ks .ks-home-cta--oro {
  background: var(--oro);
}
/* Variante oro: timbro sfora in ALTO a DESTRA invece che in basso a sinistra,
   come da design pagina Azienda. Alzato di più (-65%) così sta quasi
   interamente sopra la galleria (sfondo uniforme), non a metà tra le due zone. */
.ks .ks-home-cta--oro .ks-home-cta__stamp {
  left: auto;
  right: clamp(1rem, 4vw, 4rem);
  bottom: auto;
  top: 7%;
  transform: translateY(-65%);
}
/* Variante antracite per future pagine (Materie Prime) */
.ks .ks-home-cta--antracite {
  background: var(--antracite);
}
/* Variante antracite: timbro sfora in ALTO a SINISTRA (stesso pattern di
   --oro Azienda ma a sinistra invece che a destra), colore ROSSO per
   contrasto sull'antracite. Alzato di -65% per stare quasi interamente
   sopra la sezione precedente (sfondo uniforme).
   Dimensione ridotta rispetto al base (clamp 150-240px) e posizione
   leggermente più a destra del bordo sinistro, come da design. */
.ks .ks-home-cta--antracite .ks-home-cta__stamp {
  left: clamp(2rem, 20vw, 15rem);
  right: auto;
  bottom: auto;
  top: 7%;
  transform: translateY(-65%);
  width: clamp(120px, 12vw, 180px);
  color: var(--rosso);
}
/* Variante antracite: paragrafo a piena larghezza per stare su una riga
   (riusa stessa logica della variante oro). */
.ks .ks-home-cta--antracite .ks-home-cta__text {
  max-width: none;
}
/* Variante antracite: packaging sfora di più nella sezione sopra (stessa
   logica della variante oro, valori identici per coerenza visiva). */
.ks .ks-home-cta--antracite .ks-home-cta__media {
  margin-top: -100px;
}

/* Timbro grande decorativo: in basso a sinistra, parte sopra parte fuori
   verso il footer scuro.
   POSIZIONAMENTO ANCORATO A 1920: invece di "left: X dal bordo viewport"
   uso "centro section + offset costante" cosi' su monitor >1920 il timbro
   resta ancorato al bordo virtuale di un container 1920 invece di seguire
   il bordo dello schermo. */
.ks .ks-home-cta__stamp {
  position: absolute;
  /* su schermi <=1920 si comporta come prima (left ~= 0 + offset).
     su schermi >1920 il timbro resta a max-page/2 dal centro, simulando
     il bordo sinistro di un container 1920px centrato. */
  left: max(clamp(1rem, 4vw, 4rem), calc(50% - var(--max-page) / 2 + clamp(1rem, 4vw, 4rem)));
  bottom: 0;
  /* sfora sotto del 35% verso il footer (ridotto rispetto a 40% originale) */
  transform: translateY(-75%);
  /* Dimensione standardizzata per tutti i marchi del sito */
  width: clamp(150px, 12vw, 240px);
  color: var(--beige);  /* timbro in crema brillante per contrastare rosso/scuro */
  z-index: 3; /* sopra il footer */
  pointer-events: none;
}
.ks .ks-home-cta__stamp svg {
  width: 100%;
  height: auto;
  display: block;
}

.ks .ks-home-cta__inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

/* Packaging: sfora sopra la banda CTA, galleggia metà sopra metà sotto */
.ks .ks-home-cta__media {
  display: flex;
  justify-content: center;
  /* Margin-top molto negativo: il packaging sale fin sopra al bordo della banda
     in modo che la sua meta' superiore sia gia' nella sezione precedente. */
  margin-top: clamp(-9rem, -13vw, -12rem);
  margin-bottom: 0;
  z-index: 4;
  position: relative;
}
.ks .ks-home-cta__media img {
  /* Packaging piu' grande come da design del designer (~340-420px) */
  max-width: 100%;
  max-height: clamp(160px, 28vw, 280px);
  width: auto;
  height: auto;
  display: block;
  /* Ombra morbida sotto il packaging galleggiante */
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.3));
}

/* Contenuto testuale centrato */
.ks .ks-home-cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.ks .ks-home-cta__eyebrow {
  font-family: var(--font-meta);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--beige);
  margin: 0;
}
.ks .ks-home-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: .02em;
  margin: 0;
  font-weight: 400;
}
.ks .ks-home-cta__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--beige);
  margin: 0;
}
/* Variante oro: paragrafo a piena larghezza del container per stare su una riga */
.ks .ks-home-cta--oro .ks-home-cta__text {
  max-width: none;
}
/* Variante oro: packaging sfora di più nella galleria sopra (come da design).
   Margin-top più negativo: la box entra ~50% nella sezione galleria precedente. */
.ks .ks-home-cta--oro .ks-home-cta__media {    
  margin-top: -50px;
}
/* Modificatore Produzione: packaging sfora MOLTO sopra (la sua punta
   superiore esce visibilmente nella sezione Tunnel crema, come da design).
   Valore piu' negativo rispetto a oro/antracite perche' il design vuole
   uno sforamento piu' marcato qui. */
.ks .ks-home-cta--pr-overflow .ks-home-cta__media {
  margin-top: -50px;
}
/* Modificatore Home (--rosso): la box deve sforare di POCO sopra la banda
   rossa, mostrando solo la sua punta superiore nella sezione bianca/chiara
   sovrastante.
   Calcolo: la sezione .ks-home-cta ha padding-top clamp(5rem, 9vw, 8rem)
   = ~80-128px. Per far sforare la box di ~30-60px sopra il bordo della
   banda, il margin-top deve essere -padding-top-sezione - sforamento.
   Quindi ~-7rem desktop (-112 - 30 sforamento ≈ -150px su valore alto). */
.ks .ks-home-cta--rosso .ks-home-cta__media {
  margin-top: -50px;
}

/* ---------- RESPONSIVE HOME ---------- */
@media (max-width: 1024px) {
  /* Teaser: 2 colonne su tablet */
  .ks .ks-home-teaser__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Prodotti: 1 colonna */
  .ks .ks-home-prodotti__grid {
    grid-template-columns: 1fr;
  }
  /* Cambio strategia per il responsive: il gradient della section a 90deg
     era pensato per il layout 2 colonne. Sotto 1024px (stack verticale)
     il gradient si vede male / sgranato, quindi:
     1) la section perde il gradient (background trasparente)
     2) ogni card riprende il suo colore pieno individuale (come prima del
        passaggio al gradient).
     Risultato: linea Freschi su bianco, linea Gelo su sabbia, con stacco
     netto verticale fra le due card. */
  .ks .ks-home-prodotti {
    background: none;
  }
  .ks .ks-prod-card--bg-crema {
    background: var(--bianco);
  }
  .ks .ks-prod-card--bg-crema-2 {
    background: var(--sabbia);
  }
  /* Banda CTA: timbro piu' piccolo */
  .ks .ks-home-cta__stamp {
    width: clamp(140px, 18vw, 220px);
    transform: translateY(50%);
    left: clamp(.5rem, 3vw, 2rem);
  }
}

@media (max-width: 700px) {
  /* Hero: timbro sotto il wordmark */
  .ks .ks-home-hero__title-row {
    flex-direction: column;
    gap: .75rem;
  }
  .ks .ks-home-hero__stamp {
    width: 90px;
    top: -15%;
    right: -15%;
  }
  /* Stats: 1 colonna */
  .ks .ks-home-stats__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  /* Teaser: 1 colonna */
  .ks .ks-home-teaser__grid {
    grid-template-columns: 1fr;
  }
  /* Prodotti: card e content entrambi in colonna (stack verticale):
     text sopra, media sotto, tags ancora in fondo. */
  .ks .ks-prod-card {
    text-align: center;
    padding: 20px 10px;
  }
  .ks .ks-prod-card__content {
    flex-direction: column;
    align-items: center;
  }
  .ks .ks-prod-card__text,
  .ks .ks-prod-card__media {
    flex: auto;
    width: 100%;
    margin-left: 0;
    min-height: auto;
  }
  .ks .ks-prod-card__media img {
    width: 100%;
    max-width: 380px;
  }
  .ks .ks-prod-card__tags {
    justify-content: center;
    flex-wrap: wrap; /* su mobile permettiamo il wrap */
  }
  /* Banda CTA: timbro nascosto su mobile */
  .ks .ks-home-cta__stamp {
    display: none;
  }
}


/* ============================================================
   STEP 3 — PAGINA AZIENDA
   Sezioni: hero, intro (timbro+testo), mission (3 card),
   highlights, gallery, banda CTA oro.
   ============================================================ */

/* ---------- 1. HERO Azienda ---------- */
.ks .ks-az-hero {
  position: relative;
  min-height: 75vh;
  background-size: cover;
  background-position: center bottom 100px;
  background-repeat: no-repeat;
  background-color: var(--antracite);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--beige);
  overflow: hidden;
  background-attachment: fixed;
}
.ks .ks-az-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
  pointer-events: none;
}
/* Container che cappa il contenuto a var(--mid-page) su monitor larghi.
   Su <=1440 occupa 100%; oltre si centra e ci sono bande ai lati.
   Posizionato a sinistra dello schermo via padding-left dentro al container,
   e il content interno mantiene il suo allineamento sinistro tipico hero. */
.ks .ks-az-hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--mid-page);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 4rem);
}
.ks .ks-az-hero__content {
  position: relative;
  max-width: 640px;
  width: 100%;
  margin: 0;
  /* Margine sinistro che cresce con la viewport, MA ora e' rispetto al
     container 1440 (non al viewport), quindi su 4K il content non si
     allontana piu' del dovuto. */
  padding-left: clamp(0rem, 11vw, 160px);
}
.ks .ks-az-hero__eyebrow {
  font-family: var(--font-meta);
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 .75rem;
}
.ks .ks-az-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 4vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--beige);
  margin: 0 0 1rem;
  font-weight: 400;
}
.ks .ks-az-hero__subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .95rem;
  color: var(--beige);
  max-width: 460px;
  margin: 0;
}

/* ---------- 2. INTRO (timbro + paragrafo) ---------- */
.ks .ks-az-intro {
  background-color: var(--antracite);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.ks .ks-az-intro__inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: flex;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  justify-content: center;
}
.ks .ks-az-intro__stamp {
  flex-shrink: 0;
  width: clamp(150px, 12vw, 240px);
  color: var(--oro);
}
.ks .ks-az-intro__stamp svg {
  width: 100%;
  height: auto;
  display: block;
}
.ks .ks-az-intro__text p {
  font-family: var(--font-meta);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--beige);
  margin: 0;
  opacity: 0.7;
  max-width: 550px;
}

/* ---------- 3. MISSION (3 card valori) ---------- */
.ks .ks-az-mission {
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.ks .ks-az-mission__header {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding: 0 1.25rem;
}
.ks .ks-az-mission__eyebrow {
  font-family: var(--font-meta);
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 .75rem;
}
.ks .ks-az-mission__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--beige);
  margin: 0;
  font-weight: 400;
}
.ks .ks-az-mission__grid {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Gap aumentato per dare piu' respiro fra le card come da design */
  gap: clamp(1.5rem, 3vw, 3rem);
}

.ks .ks-az-card {
  position: relative;
  background-color: var(--antracite);
  background-size: cover;
  background-position: center;
  min-height: 360px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(2rem, 3vw, 2.5rem);
  transition: transform var(--trans);
}
.ks .ks-az-card:hover {
  transform: translateY(-4px);
}
/* Overlay piu' scuro come da design, copre meglio l'immagine di sfondo
   per privilegiare la leggibilita' del testo. */
.ks .ks-az-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(30, 30, 30, .72);
  pointer-events: none;
}
.ks .ks-az-card__content {
  position: relative;
  z-index: 2;
  color: var(--beige);
}
/* Titoli card: font display (Libel Suit) come da nuova indicazione.
   NON in uppercase: i nomi vanno in case-sensitive ("Qualità",
   "Innovazione", "Autenticità"). Override esplicito della regola
   globale .ks h1-h4 che forza uppercase. */
.ks .ks-az-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: .02em;
  line-height: 1.1;
  color: var(--oro);
  margin: 0 0 1rem;
  font-weight: 400;
  text-transform: none;
}
.ks .ks-az-card__desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--beige);
  margin: 0;
  max-width: 280px;
}
/* Accent bar verticale lato sinistro card: presente su TUTTE le card
   come da design (prima era solo sulla card 1). Spessore mantenuto a 4px. */
.ks .ks-az-card__accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  /* Tutte le card hanno l'accent rosso come default, eventuali modifier
     possono sovrascrivere (vedi --accent-rosso/--accent-oro sotto). */
  background: var(--rosso);
}
.ks .ks-az-card--accent-rosso .ks-az-card__accent {
  background: var(--rosso);
}
/* Card Qualità: zoom della foto di sfondo per simulare il close-up del design */
.ks .ks-az-card--accent-rosso {
  background-size: 150% auto;
  background-position: center;
}
.ks .ks-az-card--accent-oro .ks-az-card__accent {
  background: var(--oro);
}
.ks .ks-az-card--accent-antracite .ks-az-card__accent {
  /* Nero opacizzato: visibile come ombra scura sopra l'overlay grigio della card */
  background: rgba(0, 0, 0, 0.5);
}

/* ---------- 4. HIGHLIGHTS ---------- */
.ks .ks-az-highlights {
  background: var(--crema);
  padding: clamp(1.5rem, 7vw, 6rem) 0;
}
.ks .ks-az-highlights__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: flex;
  justify-content: center;
  gap: clamp(2rem, 17vw, 11rem);
  align-items: center;
}
.ks .ks-az-highlights__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
}
.ks .ks-az-highlights__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0;
  line-height: 1.1;
  font-weight: 400;
}
.ks .ks-az-highlights__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.ks .ks-az-highlights__list li {
  position: relative;
  padding-left: 1.25rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--antracite);
}
.ks .ks-az-highlights__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--antracite);
  font-size: 1.1rem;
  line-height: 1.4;
}
/* .ks .ks-az-highlights__list li:first-child::before {
  color: var(--rosso);
} */

/* Variante "oro" del bottone: usato in highlights */
.ks .ks-btn--oro {
  background: var(--oro);
  color: var(--beige);
  border-color: var(--oro);
  padding: 1rem 2.5rem;
  letter-spacing: .14em;
}
.ks .ks-btn--oro:hover {
  background: transparent;
  color: var(--oro);
}

/* ---------- 5. GALLERY (split-screen 2 foto) ---------- */
.ks .ks-az-gallery {
  background: var(--antracite);
}
.ks .ks-az-gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.ks .ks-az-gallery__item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--antracite);
}
.ks .ks-az-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Overlay scuro sopra ogni foto (stesso identico della hero) */
.ks .ks-az-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* ================================================================
   PAGINA MATERIE PRIME
   Tutte le classi hanno prefisso ks-mp-* per evitare collisioni
   con i blocchi della Home (ks-home-*) e Azienda (ks-az-*).
   ================================================================ */

/* ---------- 1. HERO (condivisa: Materie Prime + Produzione) ----------
   Blocco hero usato da TUTTE le pagine interne con stessa struttura:
   foto sfondo + overlay scuro + blocco testo top-left + timbro che sfora.
   Pagine che lo usano: Materie Prime, Produzione (e future). */
.ks .ks-page-hero {
  position: relative;
  min-height: 75vh;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: var(--antracite);
  display: flex;
  flex-direction: column;
  /* Centrato verticalmente come la hero di Azienda (.ks-az-hero), cosi'
     il testo si trova alla stessa altezza su MP, Produzione, Contatti
     e Azienda. NB: NON imposto padding-top/bottom verticali, che
     spingerebbero il content fuori centro. */
  justify-content: center;
  color: var(--beige);
  /* overflow visible per permettere al timbro di sforare verso il basso
     sulla sezione antracite sottostante. */
  overflow: visible;
  background-attachment: fixed;
  /* filter: brightness(1.2); */
}
.ks .ks-page-hero__overlay {
  position: absolute;
  inset: 0;
  /* background: rgba(0, 0, 0, 0.4); */
  pointer-events: none;
}
/* Container che cappa il contenuto a var(--mid-page) su monitor larghi.
   Stessa logica di .ks-az-hero__container, applicata alle 3 pagine che
   usano .ks-page-hero (Materie Prime, Produzione, Contatti). */
.ks .ks-page-hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--mid-page);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 4rem);
}
.ks .ks-page-hero__content {
  position: relative;
  max-width: 640px;
  width: 100%;
  margin: 0;
  /* Margine sinistro relativo al container 1440 (no piu' al viewport):
     su monitor grandi il content non si allontana eccessivamente. */
  padding-left: clamp(0rem, 11vw, 160px);
}
.ks .ks-page-hero__eyebrow {
  font-family: var(--font-meta);
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 .75rem;
}
.ks .ks-page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 4vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--beige);
  margin: 0 0 1rem;
  font-weight: 400;
}
.ks .ks-page-hero__subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .95rem;
  color: var(--beige);
  margin: 0;
  max-width: 380px;
}
/* Timbro decorativo: sfora a cavallo tra hero e sezione successiva,
   in basso a destra. Colore crema chiaro per leggibilità su foto scura. */
.ks .ks-page-hero__stamp {
  position: absolute;
  /* Ancorato al bordo destro virtuale di un container 1920 (vedi nota
     su .ks-home-cta__stamp). Su viewport <=1920 si comporta come prima. */
  right: clamp(0rem, 11vw, 160px);
  
  width: clamp(110px, 11vw, 170px);
  color: var(--beige);
  z-index: 3;
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
}
.ks .ks-page-hero__stamp svg {
  width: 100%;
  height: auto;
  display: block;
}
/* Modificatore variante: timbro in ORO (invece che crema) e PIÙ PICCOLO.
   Usato dalla hero Produzione (default Materie Prime resta crema standard). */
.ks .ks-page-hero--stamp-oro .ks-page-hero__stamp {
  color: var(--oro);
  width: clamp(110px, 11vw, 170px);
}

/* ---------- 2. INTRO "Controllo dell'intera filiera" ---------- */
/* Sfondo antracite con pattern K full (eredita .ks-pattern-k senza
   modificatori --bottom). Padding-top maggiore per ospitare il timbro
   della hero che sfora dentro questa sezione. */
.ks .ks-mp-intro {
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.ks .ks-mp-intro__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: flex;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  justify-content: center;
}
.ks .ks-mp-intro__left {
  /* Lascia spazio fisso al titolo, le colonne si dimensionano in base
     al contenuto naturale (titolo display su 3 righe). */
     text-align: right;
}
.ks .ks-mp-intro__eyebrow {
  font-family: var(--font-meta);
  font-size: .55rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rosso);
  margin: 0 0 1rem;
}
.ks .ks-mp-intro__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--beige);
  margin: 0;
  font-weight: 400;
}
.ks .ks-mp-intro__right {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: .5rem; /* allinea il primo paragrafo con l'eyebrow di sx */
  max-width: 550px;
}
.ks .ks-mp-intro__p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .95rem;
  line-height: 1.2;
  color: var(--beige);
  margin: 0;
}

/* ---------- 3. GARANZIE DI QUALITA' (3 card outline) ---------- */
.ks .ks-mp-garanzie {
  background: var(--crema);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.ks .ks-mp-garanzie__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}
.ks .ks-mp-garanzie__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--oro);
  text-align: center;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  font-weight: 400;
}
.ks .ks-mp-garanzie__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
/* Card outline: bordo perimetrale sottile (1px) + bordo sinistro spesso (4px)
   nel colore accent (rosso/oro/antracite per posizione, come da design). */
.ks .ks-mp-card {
  background: transparent;
  border: 2px solid var(--oro);
  border-left-width: 6px;
  /* Padding interno: max 70px sopra/sotto, 30px destra/sinistra (desktop).
     Su mobile si scalano automaticamente verso il basso tramite clamp. */
  padding: clamp(2rem, 5vw, 70px) clamp(1.25rem, 2.5vw, 30px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  justify-content: flex-start;
}
.ks .ks-mp-card--accent-rosso {
  border-left-color: var(--rosso);
}
.ks .ks-mp-card--accent-oro {
  border-left-color: var(--oro);
}
.ks .ks-mp-card--accent-antracite {
  border-left-color: var(--antracite);
}
.ks .ks-mp-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: .02em;
  line-height: 0.9;
  color: var(--oro);
  margin: 0;
  font-weight: 400;
  /* Override esplicito: la regola globale .ks h1-h4 forza uppercase, ma il
     design vuole il titolo case-sensitive ("Allevamenti Certificati", non
     "ALLEVAMENTI CERTIFICATI"). */
  text-transform: none;
  max-width: 200px;
}
.ks .ks-mp-card__desc {
  font-family: var(--font-body);
  font-weight: 400;
  opacity: 0.8;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--antracite);
  margin: 0;
}

/* ---------- 4. PROVENIENZA "Italia ed Europa" ---------- */
/* Sfondo crema (visualmente continuo con Garanzie). Layout 2 colonne:
   testo+bullet a sx, foto a dx. La bullet list NON ha regole CSS qui:
   riusa direttamente .ks-az-highlights__list di Azienda (DRY). */
.ks .ks-mp-prov {
  background: var(--crema);
  padding: 0 0 clamp(5rem, 9vw, 8rem);
}
.ks .ks-mp-prov__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.ks .ks-mp-prov__left {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.ks .ks-mp-prov__eyebrow {
  font-family: var(--font-meta);
  font-size: .8rem;
  text-transform: uppercase;
  color: var(--antracite);
  opacity: .9;
  margin: 0;
}
.ks .ks-mp-prov__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0;
  font-weight: 400;
}
.ks .ks-mp-prov__paragraph {
  font-family: var(--font-body);
  font-weight: 400;
  opacity: 0.8;
  font-size: .95rem;
  line-height: 1.2;
  color: var(--antracite);
  margin: 0;
  max-width: 450px;
}
.ks .ks-mp-prov__right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Overlay scuro sopra l'immagine "Italia ed Europa": rende la foto piu'
   tenue/desaturata per coerenza col tono editoriale del design.
   Lo pseudo-elemento ::after copre tutto il container .ks-mp-prov__right;
   pointer-events:none cosi' non interferisce con eventuali interazioni. */
.ks .ks-mp-prov__right::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 30, 30, .45);
  pointer-events: none;
}
.ks .ks-mp-prov__image {
  width: 100%;
  height: auto;
  /* Forza il formato quadrato come da nuova indicazione design.
     object-fit:cover taglia la foto sorgente non-quadrata senza distorcerla. */
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
}

/* ---------- RESPONSIVE Azienda ---------- */
@media (max-width: 1024px) {
  .ks .ks-az-mission__grid {
    grid-template-columns: 1fr;
  }
  .ks .ks-az-highlights__inner {
    gap: 2.5rem;
        flex-direction: column;
  }
  .ks .ks-az-intro__inner {
    text-align: center;
    justify-items: center;
    flex-direction: column;
  }
}

@media (max-width: 700px) {
  .ks .ks-az-gallery__grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   PAGINA PRODUZIONE
   Tutte le classi hanno prefisso ks-pr-* per evitare collisioni
   con i blocchi della Home (ks-home-*), Azienda (ks-az-*), e
   Materie Prime (ks-mp-*).
   NB: la sezione HERO usa .ks-page-hero condivisa con MP (Strada B).
   ================================================================ */

/* ---------- 2. INTRO "Produzione interamente a Bolognano dal 2003" ----------
   Sfondo antracite + pattern K full (riusa .ks-pattern-k base).
   Layout 1 colonna CENTRATA (diverso da MP intro che è 2 colonne).
   Padding-top maggiore per ospitare il timbro della hero che sfora. */
.ks .ks-pr-intro {
  padding: clamp(5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
}
.ks .ks-pr-intro__inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  text-align: center;
}
.ks .ks-pr-intro__eyebrow {
  font-family: var(--font-meta);
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 1.25rem;
}
.ks .ks-pr-intro__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--beige);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  font-weight: 400;
}
.ks .ks-pr-intro__paragraphs {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.ks .ks-pr-intro__p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--oro);
  margin: 0;
}

/* ---------- 3. PROCESS STEPS (4 card dashed numerate) ---------- */
/* Sfondo crema. Niente titolo di sezione (le card stanno direttamente
   sul fondo come da design). 4 card affiancate con bordo tratteggiato
   oro su tutti i lati, numero "outline/hollow" e contenuto left-align. */
.ks .ks-pr-steps {
  background: var(--crema);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.ks .ks-pr-steps__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}
.ks .ks-pr-steps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
}
/* Card outline tratteggiato DOPPIO (come da design):
   - bordo esterno dashed in antracite (outline + offset) → fisso al box card
   - sfondo crema-2 spostato di +10px a destra e +10px in basso rispetto
     all'outline, realizzato con pseudo-elemento ::before in absolute
     posizionato dietro al contenuto (z-index -1).
   Contenuto left-aligned, NON spostato (resta allineato all'outline). */
.ks .ks-pr-step {
  position: relative;
  background: transparent;
  outline: 2px dashed var(--antracite);
  outline-offset: 5px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  text-align: left;
  /* z-index: 0 crea uno stacking context, cosicché ::before con
     z-index -1 resti DIETRO al contenuto ma sopra al fondo sezione. */
  z-index: 0;
}
.ks .ks-pr-step::before {
  content: "";
  position: absolute;
  /* Offset asimmetrico: top/left 2px (minimo) + right/bottom -10px
     (sfora oltre la card). Risultato: sfondo crema-2 visivamente
     spostato verso il basso-destra rispetto all'outline antracite. */
  top: 2px;
  left: 2px;
  right: -14px;
  bottom: -14px;
  background: var(--crema-2);
  z-index: -1;
  pointer-events: none;
}
/* Numero "outline/hollow": colore trasparente con stroke perimetrale
   in oro. -webkit-text-stroke ha supporto cross-browser moderno
   (Chrome, Safari, Firefox, Edge). Fallback: se non supportato il
   testo appare in colore pieno (color: var(--oro) sotto). */
.ks .ks-pr-step__number {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: .02em;
  font-weight: 400;
  color: var(--oro);
  -webkit-text-stroke: 1px var(--oro);
  -webkit-text-fill-color: transparent;
}
.ks .ks-pr-step__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: .02em;
  line-height: 1.15;
  color: var(--oro);
  margin: 0;
  font-weight: 400;
  /* Override esplicito: la regola globale .ks h1-h4 forza uppercase,
     ma il design vuole il titolo case-sensitive ("Selezione Carni"
     non "SELEZIONE CARNI"). */
  text-transform: none;
}
.ks .ks-pr-step__desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--antracite);
  margin: 0;
}

/* ---------- 4. TUNNEL DI ABBATTIMENTO (testo + foto con overlay) ---------- */
/* Sfondo crema (continuo con Process Steps). Layout 2 colonne 50/50:
   testo+bullet a sx, foto con overlay "-18°C" + timbro a dx. */
.ks .ks-pr-tech {
  background: var(--crema);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(5rem, 9vw, 8rem);
}
.ks .ks-pr-tech__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.ks .ks-pr-tech__left {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.ks .ks-pr-tech__eyebrow {
  font-family: var(--font-meta);
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rosso);
  margin: 0;
}
.ks .ks-pr-tech__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--antracite);
  margin: 0;
  font-weight: 400;
}
.ks .ks-pr-tech__p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--antracite);
  margin: 0;
}
/* Bullet list: pallini in oro (diverso da .ks-az-highlights__list che ha
   il primo rosso e gli altri antracite, qui sono tutti uguali in oro). */
.ks .ks-pr-tech__list {
  list-style: none;
  padding: 0;
  margin: .5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.ks .ks-pr-tech__list li {
  position: relative;
  padding-left: 1.25rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--oro);
}
.ks .ks-pr-tech__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--oro);
  font-size: 1rem;
  line-height: 1.5;
}

/* Colonna destra: wrapper foto con position relative per overlay + timbro */
.ks .ks-pr-tech__right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ks .ks-pr-tech__media {
  position: relative;
  width: 100%;
  display: block;
}
.ks .ks-pr-tech__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
/* Layer scuro semitrasparente sopra l'immagine, sotto l'overlay testo.
   z-index 1 (sopra immagine, sotto overlay z-index 2 e timbro z-index 3). */
.ks .ks-pr-tech__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
  pointer-events: none;
}
/* Overlay "AL CUORE DEL PRODOTTO" + "-18°C" sopra la foto.
   Posizionato in absolute, centrato orizzontalmente e verticalmente. */
.ks .ks-pr-tech__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.ks .ks-pr-tech__overlay-eyebrow {
  font-family: var(--font-meta);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--beige);
  margin-bottom: .5rem;
  opacity: .5;
  /* Leggera ombra per leggibilità sopra foto chiara */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* Testo grande "-18°C" in stile hollow: lettere vuote con contorno bianco.
   Stessa tecnica di .ks-pr-step__number ma molto più grande e con leggera
   opacità per non sovrastare la foto. */
.ks .ks-pr-tech__overlay-text {
  font-family: var(--font-display);
  font-size: clamp(7rem, 16vw, 14rem);
  line-height: 1;
  letter-spacing: .02em;
  font-weight: 400;
  color: var(--beige);
  -webkit-text-stroke: 2px var(--bianco);
  -webkit-text-fill-color: transparent;
  opacity: .5;
}
/* Timbro Kasauria in oro, sfora in basso-destra della foto */
.ks .ks-pr-tech__stamp {
  position: absolute;
  /* Ancorato al bordo destro virtuale di un container 1920. */
  right: max(clamp(1rem, 3vw, 2rem), calc(50% - var(--max-page) / 2 + clamp(1rem, 3vw, 2rem)));
  bottom: 0;
  width: clamp(150px, 12vw, 240px);
  color: var(--oro);
  z-index: 3;
  pointer-events: none;
  transform: translateY(50%);
}
.ks .ks-pr-tech__stamp svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ================================================================
   PAGINA PRODOTTI
   Tutte le classi hanno prefisso ks-prod-* per evitare collisioni
   con i blocchi della Home (ks-home-*), Azienda (ks-az-*),
   Materie Prime (ks-mp-*) e Produzione (ks-pr-*).
   NB: la hero Prodotti e' INDIPENDENTE dalla .ks-page-hero condivisa
   con MP/Produzione, perche' le posizioni di titolo/timbro sono
   diverse e una modifica qui NON deve toccare le altre pagine.
   ================================================================ */

/* ---------- 1. HERO PRODOTTI (dedicata, indipendente da .ks-page-hero) ----------
   Foto arrosticini su piatto. NO overlay scuro (la foto e' a piena
   visibilita'). Titolo posizionato in BASSO-SINISTRA, timbro in
   basso-centro/destra sforante sulla sezione antracite sottostante. */
.ks .ks-prod-hero {
  position: relative;
  min-height: 90vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--antracite);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--beige);
  /* overflow visible per permettere al timbro di sforare verso il basso
     sulla sezione antracite sottostante. */
  overflow: visible;
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
  background-attachment: fixed;
}
.ks .ks-prod-hero__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  width: 100%;
  margin: -50px;
  padding-left: clamp(1.25rem, 17vw, 240px);
}
.ks .ks-prod-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 4.5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--crema);
  margin: 0;
  font-weight: 400;
}
/* Timbro decorativo: sfora a cavallo tra hero e sezione successiva.
   Posizione centro-destra basso come da design Prodotti. */
.ks .ks-prod-hero__stamp {
  position: absolute;
  /* Ancorato al bordo destro virtuale di un container 1920. */
  right: max(clamp(1rem, 20vw, 25rem), calc(50% - var(--max-page) / 2 + clamp(1rem, 20vw, 25rem)));
  /* top: clamp(1rem, 22vw, 25rem); */
  width: clamp(150px, 12vw, 240px);
  color: var(--crema);
  z-index: 3;
  pointer-events: none; 
  margin: -50px;
}
.ks .ks-prod-hero__stamp svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- 2. INTRO "Fresco o surgelato" ----------
   Sfondo antracite + pattern K full (riusa .ks-pattern-k base utility).
   Layout 1 colonna CENTRATA: eyebrow + titolo + paragrafo, tutti
   allineati al centro orizzontalmente. */
.ks .ks-prod-intro {
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.ks .ks-prod-intro__inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  text-align: center;
}
.ks .ks-prod-intro__eyebrow {
  font-family: var(--font-meta);
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--beige);
  margin: 0 0 1.25rem;
}
.ks .ks-prod-intro__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: 1.15;
  letter-spacing: .02em;
  color: var(--oro);
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  /* Override esplicito: la regola globale .ks h1-h4 forza uppercase,
     ma il design vuole il titolo case-sensitive ("Fresco o surgelato:
     la qualità non cambia.") con punteggiatura visibile. */
  text-transform: none;
}
.ks .ks-prod-intro__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--beige);
  margin: 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 3. CARD PRODOTTO (Freschi / Linea Gelo / Specialita') ----------
   Sfondo crema. Grid 3 colonne uguali, ogni card e' uno stack verticale:
   - photo (foto prodotto + tag pill in basso, eventuali badge/fiocco
            in alto a destra)
   - band  (banda titolo colorata sotto la foto: oro / gelo / rosso)
   - desc  (descrizione su sfondo antracite scuro in fondo)

   NB: TUTTE le regole sono scopate sotto .ks-prod-cards .ks-prod-card
   per non collidere con le omonime .ks-prod-card della homepage
   (layout completamente diverso, vedi linee ~2305). Specificita' (0,3,0)
   batte la (0,2,0) della home. */
.ks .ks-prod-cards {
  background: var(--crema);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.ks .ks-prod-cards__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}
.ks .ks-prod-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
}

/* Singola card: stack verticale.
   Resetta esplicitamente tutto cio' che la regola omonima della home
   (linee 2305-2314) imposta: display, grid-template-columns, padding,
   min-height, gap. Cosi' siamo blindati anche se in futuro cambia
   l'ordine dei blocchi nel file. */
.ks .ks-prod-cards .ks-prod-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  padding: 0;
  min-height: 0;
  gap: 0;
  overflow: visible;
  grid-template-columns: none;
  flex: 1; /* <-- aggiunto: si allunga per riempire il wrap */
}

/* --- 1. FOTO PRODOTTO (sfondo bianco, immagine cover) ---
   NB: overflow visible (NON hidden) per permettere ai badge della card
   "Specialita'" di sforare sopra il bordo della card come da design.
   L'immagine resta dentro perche' ha width/height 100% del container. */
.ks .ks-prod-cards .ks-prod-card__photo {
  position: relative;
  background: var(--bianco);
  aspect-ratio: 4 / 5;
  overflow: visible;
}
.ks .ks-prod-cards .ks-prod-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
img.ks-prod-card__badge{
  max-width: 100px;
}
/* --- 1b. POSIZIONE INQUADRATURA FOTO (object-position per singola card) ---
   Ogni card ha la sua foto con composizione diversa: questi valori
   spostano l'inquadratura in modo indipendente, senza toccare le altre.
   Sintassi: object-position: <orizzontale> <verticale>
     - 0%   = sinistra / alto
     - 50%  = centro
     - 100% = destra / basso
   Tarare al pixel guardando il design. */
.ks .ks-prod-cards .ks-prod-card--oro   .ks-prod-card__photo img { object-position: 65% 55%; }

/* Card Linea Gelo: l'immagine viene zoomata oltre il container con
   transform:scale. Serve overflow:hidden esplicito sulla __photo --gelo
   (override del visible globale messo per i badge della --rosso) per
   ritagliare il bordo ingrandito. NB: la --gelo non ha badge che
   sforano, solo il fiocco gia' posizionato dentro la foto. */
.ks .ks-prod-cards .ks-prod-card--gelo  .ks-prod-card__photo { overflow: hidden; }

/* Badges card "Specialita'": in alto a destra, SFORANO sopra il bordo
   superiore della card come da design (top negativo). Dimensione ridotta
   rispetto alla versione precedente. */
.ks .ks-prod-cards .ks-prod-card__badges {
  position: absolute;
  top: clamp(-1.75rem, -2vw, -1rem);  
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
    width: 100%;
    justify-content: center;
}
.ks .ks-prod-cards .ks-prod-card__badge {
  width: clamp(48px, 5vw, 68px);
  height: auto;
  display: block;
}

/* Fiocco card "Linea Gelo": in alto a destra dentro la foto */
.ks .ks-prod-cards .ks-prod-card__snowflake {
  position: absolute;
  top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  width: clamp(60px, 8vw, 95px);
  height: auto;
  z-index: 2;
  pointer-events: none;
}
.ks .ks-prod-cards .ks-prod-card__snowflake svg {
  width: 100%;
  height: auto;
  display: block;
}

/* --- 2. TAG PILL: dentro la foto, in basso, allineati a sinistra --- */
.ks .ks-prod-cards .ks-prod-card__tags {
  position: absolute;
  bottom: clamp(.75rem, 1.5vw, 1.25rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.4rem, .8vw, .6rem);
  justify-content: center;
  z-index: 2;
}
.ks .ks-prod-cards .ks-prod-card__tag {
  display: inline-block;
  border: 1px solid rgba(45, 45, 45, .18);
  color: var(--oro);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .85rem;
  letter-spacing: .03em;
  padding: .5rem 1.3rem;
  border-radius: 2px;
  text-transform: none;
}

/* Override card Linea Gelo: i suoi tag sono testualmente piu' lunghi
   ("Shelf life estesa", "-18° al cuore", "Export Ready") rispetto alle
   altre card che hanno parole singole. Con padding orizzontale 1.3rem
   la somma delle larghezze sfora e i tag vanno a capo. Riduco il padding
   orizzontale qui per farli stare tutti su una sola riga. */
.ks .ks-prod-cards .ks-prod-card--gelo .ks-prod-card__tag {
  padding: .5rem .7rem;
}

/* --- 3. BANDA TITOLO COLORATA (sotto la foto, full width card) --- */
.ks .ks-prod-cards .ks-prod-card__band {
  padding: clamp(1rem, 2.2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
  text-align: center;
  width: 100%;
}
.ks .ks-prod-cards .ks-prod-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--bianco);
  margin: 0;
  font-weight: 400;
  /* Override regola globale .ks h1-h4 uppercase: il titolo va
     case-sensitive ("Freschi Linea Classica") nel font script Caveat. */
  text-transform: none;
}
/* Modificatori colore banda */
.ks .ks-prod-cards .ks-prod-card--oro   .ks-prod-card__band { background: var(--oro); }
/* Banda Gelo: il file esterno ghiaccio.svg ha fill="#9be0e0" identico al
   colore --gelo della banda -> invisibile come pattern. Inline qui una
   versione dello stesso fiocco con fill crema semi-trasparente (stessa
   logica del pattern K usato su tutto il sito: tono chiaro su colore
   pieno, opacita' dosata). Non tocca il file ghiaccio.svg perche' viene
   ancora usato per il fiocco grande dentro la foto. */
.ks .ks-prod-cards .ks-prod-card--gelo  .ks-prod-card__band {
  background-color: var(--gelo);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97.242 97.195'><path d='M47.728,23.85c0,.947-.033,1.891-.088,2.834-.016.289-.043.575-.065.864-.051.66-.11,1.318-.187,1.976-.037.322-.079.644-.124.964-.088.658-.194,1.312-.31,1.964-.049.275-.094.55-.147.823-.181.919-.383,1.834-.617,2.742L39.727,32.25a42.161,42.161,0,0,0,.846-8.4,42.63,42.63,0,0,0-.835-8.345L46.2,11.725c.006.024.01.049.016.071.218.844.4,1.695.573,2.549.077.387.141.778.208,1.167.092.526.177,1.055.249,1.583q.085.6.153,1.206c.067.579.118,1.159.163,1.74.026.338.057.676.077,1.017.053.919.084,1.84.086,2.761v.031m-89.239,8.388a41.972,41.972,0,0,1-.846-8.39,42.48,42.48,0,0,1,.835-8.345l-6.465-3.773c-.128.5-.236,1-.348,1.506-.073.324-.151.648-.218.974-.1.491-.181.99-.265,1.487-.073.44-.145.878-.206,1.32s-.118.878-.169,1.32q-.091.834-.153,1.671c-.027.352-.061.7-.081,1.053-.051.917-.084,1.836-.084,2.757,0,.012,0,.022,0,.031,0,.947.035,1.889.088,2.83.018.3.045.6.069.892q.071.957.179,1.913.062.539.136,1.074c.079.564.169,1.125.267,1.687.067.387.13.774.206,1.157.1.522.226,1.041.348,1.557.081.35.153.705.244,1.053Zm62.907.179V15.563L43.013,2.96a48.247,48.247,0,0,0-3.9-6.711L17.6,8.8l-8.6-4.959L3.461,8.9l10.78,6.222V28.462l-26.69-15.4L-.893,6.4,19.249-5.487l-.214.179L31.17-12.663a48.707,48.707,0,0,0-6.752-4.981L2.984-4.628V-24.576c-1.28-.1-2.571-.167-3.877-.167s-2.6.067-3.875.167V-4.628l-21.44-13.013a48.816,48.816,0,0,0-6.748,4.979L-8.215,2.357-19.246,8.72-40.826-3.857a48.6,48.6,0,0,0-3.918,6.7L-23.182,15.4V32.584l-21.454,12.5a48.541,48.541,0,0,0,3.947,6.673l21.668-12.63,8.109,4.674,5.546-5.067-10.662-6.151V19.259l26.69,15.4L-32.919,60.4A48.611,48.611,0,0,0-26.2,65.352L-4.768,52.347V72.283c1.279.1,2.569.169,3.875.169s2.6-.069,3.877-.169V52.347L24.418,65.352a48.808,48.808,0,0,0,6.74-4.971L6.43,45.363l10.935-6.318,21.615,12.6a48.356,48.356,0,0,0,3.932-6.683Z' transform='translate(49.514 24.743)' fill='%23FCF6F0' fill-opacity='0.32'/></svg>");
  background-repeat: repeat;
  background-size: clamp(55px, 6vw, 80px) auto;
  background-position: center;
}
.ks .ks-prod-cards .ks-prod-card--rosso .ks-prod-card__band { background: var(--rosso); }

/* --- 4. DESCRIZIONE (antracite, full width, flex per riempire altezza) --- */
.ks .ks-prod-cards .ks-prod-card__desc {
  background: var(--antracite);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.ks .ks-prod-cards .ks-prod-card__desc p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--beige);
  margin: 0 0 .75rem;
  text-align: left;
}
.ks .ks-prod-cards .ks-prod-card__desc p:last-child {
  margin-bottom: 0;
}
/* ---- FORMATI PRODOTTO — ACCORDION ---- */
.ks .ks-prod-card-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ks .ks-prod-formats {
    background: var(--crema-2);
    border-top: 3px solid var(--oro);
    padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2vw, 1.5rem);
}

.ks .ks-prod-formats__eyebrow {
    font-family: var(--font-meta);
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--oro);
    margin: 0 0 1rem;
}

/* Singolo item accordion */
.ks .ks-prod-formats__item {
    border-bottom: 1px solid rgba(193,139,82,.2);
}
.ks .ks-prod-formats__item:first-of-type {
    border-top: 1px solid rgba(193,139,82,.2);
}

/* Trigger — bottone cliccabile */
.ks .ks-prod-formats__trigger {
    width: 100%;
    background: transparent;
    border: none;
    padding: .85rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    text-align: left;
}

.ks .ks-prod-formats__label {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 400;
    color: var(--antracite);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0;
}

/* Icona + che diventa − */
.ks .ks-prod-formats__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
    color: var(--oro);
}
.ks .ks-prod-formats__icon::before,
.ks .ks-prod-formats__icon::after {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 1px;
    transition: transform .35s ease, opacity .35s ease;
}
/* barra orizzontale */
.ks .ks-prod-formats__icon::before {
    width: 100%; height: 1.5px;
    top: 50%; left: 0;
    transform: translateY(-50%);
}
/* barra verticale */
.ks .ks-prod-formats__icon::after {
    width: 1.5px; height: 100%;
    top: 0; left: 50%;
    transform: translateX(-50%);
}
/* Stato aperto: barra verticale ruota e scompare → rimane solo − */
.ks .ks-prod-formats__item.is-open .ks-prod-formats__icon::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

/* Pannello contenuto — chiuso di default */
.ks .ks-prod-formats__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height .4s cubic-bezier(.25,.8,.25,1);
}
.ks .ks-prod-formats__item.is-open .ks-prod-formats__panel {
    max-height: 600px;
}

/* Lista confezioni */
.ks .ks-prod-formats__confezioni {
    list-style: none;
    margin: 0;
    padding: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.ks .ks-prod-formats__conf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .45rem .75rem;
    background: rgba(255,255,255,.55);
    border-left: 3px solid var(--oro);
}

.ks .ks-prod-formats__conf-nome {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: .8rem;
    color: var(--antracite);
    flex: 1;
    line-height: 1.4;
}

.ks .ks-prod-formats__conf-meta {
    font-family: var(--font-meta);
    font-size: .9rem;
    color: var(--oro);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .ks .ks-prod-formats {
        flex: none;
    }
}
/* ============================================================
   PRODOTTI - Sezione 4: "I NOSTRI ARROSTICINI SONO"
   3 colonne caratteristiche (Succulenti / Morbidi / Digeribili)
   Sfondo antracite + pattern K full (eredita .ks-pattern-k base).
   Centrata verticalmente + orizzontalmente.
   Naming: .ks-prod-traits* (dedicato, no collisioni con altre pagine).
   NB: NON impostare `background:` qui - la shorthand resetta anche il
   background-image del pattern K. .ks-pattern-k fornisce gia' sia il
   colore antracite che il pattern delle K. */
.ks .ks-prod-traits {
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.ks .ks-prod-traits__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  position: relative;
  z-index: 1;
}
/* Header centrato (eyebrow + titolo) */
.ks .ks-prod-traits__header {
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.ks .ks-prod-traits__eyebrow {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .85rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 1.25rem;
}
/* Titolo "I nostri arrosticini sono": font display script Caveat,
   stessa dimensione dei nomi sotto (Succulenti/Morbidi/Digeribili).
   Niente uppercase: il font script richiede case-sensitive. */
.ks .ks-prod-traits__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--beige);
  margin: 0;
  font-weight: 400;
  line-height: 1.1;
}
/* Grid 3 colonne uguali */
.ks .ks-prod-traits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
/* Singola colonna trait: titolo + descrizione, tutto centrato */
.ks .ks-prod-traits__item {
  text-align: center;
  padding: 0 clamp(.5rem, 1.5vw, 1.5rem);
}
/* Titolo trait: font display script in oro (stessa dimensione del title). */
.ks .ks-prod-traits__name {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--oro);
  margin: 0 0 1rem;
  font-weight: 400;
  /* Override globale .ks h1-h4 uppercase: i nomi vanno case-sensitive
     ("Succulenti", "Morbidi", "Digeribili") con font script Caveat. */
  text-transform: none;
}
.ks .ks-prod-traits__desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .85rem;
  line-height: 1.7;
  color: var(--beige);
  margin: 0;
  max-width: 28ch;
  margin-inline: auto;
}


/* ============================================================
   PRODOTTI - Sezione 5: SHOWCASE FOTO (mano con arrosticini)
   Sfondo antracite PURO (no pattern K). Foto in evidenza con
   timbro rosso che sfora in basso a destra.
   Naming: .ks-prod-showcase* (dedicato, no collisioni). */
.ks .ks-prod-showcase {
  background: var(--antracite);
  padding: 0 0 clamp(4rem, 8vw, 7rem); /* padding: clamp(2rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 7rem); */
}
.ks .ks-prod-showcase__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 4rem);
}
/* Wrapper foto: position relative per ancorare il timbro absolute.
   Aspect-ratio 21/9 = banda larga orizzontale come da design.
   Sfondo nero come placeholder se l'utente non ha ancora caricato
   l'immagine; appena l'img copre il container il nero non si vede. */
.ks .ks-prod-showcase__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  background: #000;
  overflow: visible;
}
.ks .ks-prod-showcase__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ancora la cima dell'img sorgente al top del container. Cosi' tutto
     il "taglio" di cover finisce in basso, e in alto si vedono gli
     arrosticini completi senza essere troncati. Con container 21/9 e
     foto sorgente piu' alta, questo equivale a ~200-220px di shift
     verso il basso visivamente. */
  object-position: center top;
  display: block;
}
/* Timbro circolare rosso: il SVG ha fill="currentColor" su tutti i path,
   quindi basta impostare color: var(--rosso) sul wrapper.
   Posizionato in basso a destra, SFORA fuori dalla foto verso il basso
   (~50% del diametro) e leggermente dentro dal lato destro. */
.ks .ks-prod-showcase__stamp {
  position: absolute;
  /* Ancorato al bordo destro virtuale di un container 1920.
     NB: il valore originale puo' essere negativo (-1rem) per far sforare
     il timbro oltre il bordo; il max() preserva questo comportamento. */
  right: max(clamp(-1rem, 10vw, 10rem), calc(50% - var(--max-page) / 2 + clamp(-1rem, 10vw, 10rem)));
  bottom: clamp(-3.5rem, -5vw, -2rem);
  width: clamp(150px, 12vw, 240px);
  color: var(--rosso);
  z-index: 2;
  pointer-events: none;
}
.ks .ks-prod-showcase__stamp svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   PRODOTTI - Sezione 6: DOWNLOAD CATALOGO
   Sfondo antracite (continua dalla 5). 2 colonne: a sinistra
   l'immagine del packaging, a destra eyebrow + titolo + bottone.
   Naming: .ks-prod-download* (dedicato).
   ============================================================ */
.ks .ks-prod-download {
  background: var(--antracite);
    padding: 50px 0;
}
.ks .ks-prod-download__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.ks .ks-prod-download__image img {
  width: 100%;
  height: auto;
  display: block;
}
/* Lato destro: contenuti centrati orizzontalmente nella colonna */
.ks .ks-prod-download__content {
  text-align: center;
}
.ks .ks-prod-download__eyebrow {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .9rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 1.25rem;
}
/* Titolo grande sans-serif uppercase. Override del weight globale h2
   (800 = troppo grosso per questo display) e color esplicito bianco. */
.ks .ks-prod-download__title {
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--beige);
  margin: 0 0 clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.15;
}

/* ============================================================
   PRODOTTI - Sezione 7: CTA FINALE "Hai una richiesta commerciale?"
   Sfondo antracite (continua dalla 6). 1 colonna centrata.
   Eyebrow grigio, titolo grande, paragrafo, bottone oro pieno.
   Naming: .ks-prod-cta* (dedicato).
   ============================================================ */
.ks .ks-prod-cta {
  background: var(--antracite);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(5rem, 9vw, 8rem);
  text-align: center;
}
.ks .ks-prod-cta__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2rem);
}
.ks .ks-prod-cta__eyebrow {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .9rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  /* Bianco/grigio chiaro (NON oro come la sezione 6) per varieta' visiva */
  color: var(--beige);
  margin: 0 0 1.25rem;
}
.ks .ks-prod-cta__title {
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--beige);
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.15;
}
.ks .ks-prod-cta__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--beige);
  margin: 0 0 clamp(1.75rem, 3vw, 2.25rem);
  margin-inline: auto;
}

/* ============================================================
   CONTATTI - Pagina /contatti/
   Naming: .ks-co-* (dedicato, zero collisioni con altre pagine).
   Hero usa .ks-page-hero condivisa (definita sopra).
   ============================================================ */

/* ----- Sezione 2: Contatti (2 colonne info + form) -----
   Sfondo antracite + pattern K. Grid 2 colonne:
   sinistra info testuali, destra form Fluent Form. */
.ks .ks-co-contact {
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.ks .ks-co-contact__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  position: relative;
  z-index: 1;
}

/* Colonna sinistra: info testuali */
.ks .ks-co-contact__eyebrow {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .85rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 1.25rem;
}
.ks .ks-co-contact__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--beige);
  margin: 0 0 1.25rem;
  font-weight: 400;
  /* Override globale h1-h4 uppercase: il titolo va case-sensitive
     ("Parlaci del tuo progetto.") nel font script Caveat. */
  text-transform: none;
}
.ks .ks-co-contact__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--beige);
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  max-width: 52ch;
}

/* Lista info items (Sede / Email / Telefono) con icone SVG inline */
.ks .ks-co-contact__list {
  list-style: none;
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.ks .ks-co-contact__list-item {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.25rem);
}
.ks .ks-co-contact__list-icon {
  flex-shrink: 0;
  width: clamp(36px, 4vw, 44px);
  height: clamp(36px, 4vw, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(232, 223, 200, .15);
  color: var(--oro);
  background: rgba(232, 223, 200, .03);
}
.ks .ks-co-contact__list-icon svg {
  width: 55%;
  height: 55%;
  display: block;
}
.ks .ks-co-contact__list-text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.ks .ks-co-contact__list-label {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro);
}
.ks .ks-co-contact__list-value {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .92rem;
  color: var(--beige);
  line-height: 1.4;
}

/* Box highlight "Disponibili per": bordo oro su fondo trasparente */
.ks .ks-co-contact__highlight {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid rgba(193, 139, 82, .25);
  background: rgba(193, 139, 82, .04);
}
.ks .ks-co-contact__highlight-eyebrow {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 1rem;
}
.ks .ks-co-contact__highlight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.ks .ks-co-contact__highlight-list li {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .9rem;
  color: var(--beige);
  line-height: 1.5;
  padding-left: 1.25rem;
  position: relative;
}
/* Pallino oro davanti a ogni voce della lista */
.ks .ks-co-contact__highlight-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  background: var(--oro);
  border-radius: 50%;
}

/* Colonna destra: form Fluent Form dentro un box semi-trasparente */
.ks .ks-co-contact__form {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.ks .ks-co-contact__form-title {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--beige);
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  text-transform: none;
}
.ks .ks-co-contact__form-placeholder {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .9rem;
  color: var(--beige);
  margin: 0;
  padding: 2rem 0;
  text-align: center;
}

/* ---- Style override per i campi Fluent Form dentro la nostra pagina ----
   Fluent Form genera markup proprio (.frm-fluent-form, .ff-el-input--text,
   ecc). Qui scopiamo gli override SOTTO .ks-co-contact__form-wrap, cosi'
   non tocchiamo eventuali altri form Fluent Form usati altrove sul sito. */
.ks .ks-co-contact__form-wrap .frm-fluent-form label,
.ks .ks-co-contact__form-wrap .ff-el-input--label label {
  font-family: var(--font-body);
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--beige);
  font-weight: 300;
}
.ks .ks-co-contact__form-wrap input[type="text"],
.ks .ks-co-contact__form-wrap input[type="email"],
.ks .ks-co-contact__form-wrap input[type="tel"],
.ks .ks-co-contact__form-wrap input[type="url"],
.ks .ks-co-contact__form-wrap select,
.ks .ks-co-contact__form-wrap textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  color: var(--beige);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .95rem;
  padding: .65rem 0;
  outline: none;
  transition: border-color var(--trans);
  border-radius: 0;
}
.ks .ks-co-contact__form-wrap input:focus,
.ks .ks-co-contact__form-wrap select:focus,
.ks .ks-co-contact__form-wrap textarea:focus {
  border-bottom-color: var(--oro);
}
.ks .ks-co-contact__form-wrap textarea {
  min-height: 100px;
  resize: vertical;
}
.ks .ks-co-contact__form-wrap ::placeholder {
  color: var(--beige);
}
/* Bottone submit Fluent Form: usa lo stile del nostro ks-btn--oro */
.ks .ks-co-contact__form-wrap button[type="submit"],
.ks .ks-co-contact__form-wrap .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--oro);
  color: var(--beige);
  border: 1px solid var(--oro);
  font-family: var(--font-meta);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  cursor: pointer;
  transition: all var(--trans);
  width: 100%;
}
.ks .ks-co-contact__form-wrap button[type="submit"]:hover,
.ks .ks-co-contact__form-wrap .ff-btn-submit:hover {
  background: transparent;
  color: var(--oro);
}

/* ----- Sezione 3: Mappa -----
   2 colonne: iframe Google Maps a sinistra, contenuto a destra. */
.ks .ks-co-map {
  background: var(--antracite);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.ks .ks-co-map__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: stretch;
}
.ks .ks-co-map__embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
}
.ks .ks-co-map__embed iframe {
  width: 100%;
  height: 100%;
  display: block;
  /* Saturazione ridotta + filtro per integrare la mappa Google nel tema
     scuro del sito (Google Maps di default e' chiaro). */
  filter: invert(.92) hue-rotate(180deg) brightness(.95) contrast(.9);
}
.ks .ks-co-map__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--beige);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .9rem;
  text-align: center;
  padding: 1.5rem;
}
.ks .ks-co-map__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ks .ks-co-map__eyebrow {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .9rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 1rem;
}
.ks .ks-co-map__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--beige);
  margin: 0 0 .75rem;
  font-weight: 400;
  text-transform: none;
}
.ks .ks-co-map__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--beige);
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}
/* ============================================================
   PRODOTTI - Sezione Pikkadilly
   Split-screen: immagine a sinistra, contenuto a destra.
   Sfondo antracite con accent rosso. Naming: .ks-prod-pikk*
   ============================================================ */
.ks .ks-prod-pikk {
    overflow: hidden;
    background-color: var(--crema);
}
.ks .ks-prod-pikk__inner {
    display: grid;
    grid-template-columns: 7fr 5fr;
    min-height: clamp(380px, 45vw, 560px);
    max-width: var(--mid-page);
    margin: 0 auto;
}

/* Colonna immagine */
.ks .ks-prod-pikk__media {
    position: relative;
    overflow: hidden;
}
.ks .ks-prod-pikk__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block; 
    padding: 0 70px;
}
.ks .ks-prod-pikk__media-overlay {
    /* position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(30,30,30,0) 60%, rgba(30,30,30,.6) 100%);
    pointer-events: none; */
}

/* Colonna contenuto */
.ks .ks-prod-pikk__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    padding: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 5rem);
    position: relative;
}
/* Accent line verticale sinistra */
.ks .ks-prod-pikk__content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    width: 3px;
    background: var(--rosso);
}

.ks .ks-prod-pikk__eyebrow {
    font-family: var(--font-meta);
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--rosso);
    margin: 0;
}
.ks .ks-prod-pikk__title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--antracite);
    margin: 0;
    font-weight: 400;
}
.ks .ks-prod-pikk__text {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--antracite);
    margin: 0;
    max-width: 42ch;
}

/* Bottone Pikkadilly: outline rosso su scuro */
.ks .ks-btn--pikk {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    align-self: flex-start;
    background: transparent;
    color: var(--rosso);
    border: 1px solid var(--rosso);
    font-family: var(--font-meta);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .9rem 2rem;
    cursor: pointer;
    transition: all var(--trans);
    text-decoration: none;
    margin-top: .5rem;
}
.ks .ks-btn--pikk:hover {
    background: var(--rosso);
    color: var(--beige);
}
.ks .ks-btn--pikk svg {
    transition: transform var(--trans);
}
.ks .ks-btn--pikk:hover svg {
    transform: translateX(4px);
}

/* ============================================================
   CTA FINALE — variante rossa
   ============================================================ */
.ks .ks-prod-cta--rosso {
    background: var(--rosso);
}
/* Su sfondo rosso il testo già usa --beige, funziona.
   Solo il bottone oro va mantenuto, il contrasto è ok. */

/* ---- RESPONSIVE Pikkadilly ---- */
@media (max-width: 900px) {
    .ks .ks-prod-pikk__inner {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .ks .ks-prod-pikk__media {
    }
    .ks .ks-prod-pikk__media-overlay {
        /* background: linear-gradient(180deg, rgba(30,30,30,0) 60%, rgba(30,30,30,.6) 100%); */
    }
    .ks .ks-prod-pikk__media img{
      padding: 20px;
    }
    .ks .ks-prod-pikk__content {
        padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
    }
    .ks .ks-prod-pikk__content::before {
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
    }
    .ks .ks-btn--pikk {
        align-self: flex-start;
    }
}
/* ---------- RESPONSIVE Materie Prime ---------- */
@media (max-width: 1024px) {
  .ks .ks-mp-intro__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .ks .ks-mp-intro__right {
    padding-top: 0;
  }
  .ks .ks-mp-garanzie__grid {
    grid-template-columns: 1fr;
  }
  .ks .ks-mp-prov__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .ks .ks-mp-intro__left{
    text-align: left;
  }
}

/* ---------- RESPONSIVE Produzione ---------- */
@media (max-width: 1024px) {
  .ks .ks-pr-steps__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ks .ks-pr-tech__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
@media (max-width: 700px) {
  .ks .ks-pr-steps__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- RESPONSIVE Prodotti + Contatti ---------- */
@media (max-width: 1024px) {
  .ks .ks-prod-cards .ks-prod-card__photo { aspect-ratio: 3 / 4; }
  .ks .ks-prod-traits__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 420px;
    margin-inline: auto;
  }
  .ks .ks-prod-showcase__photo { aspect-ratio: 16 / 9; }
  .ks .ks-prod-download__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 560px;
  }
  .ks .ks-prod-download__image {
    max-width: 380px;
    margin: 0 auto;
    order: 2;
  }
  .ks-prod-download__content {
    order: 1;
  }

  /* Contatti: 2 colonne -> 1 colonna (info sopra, form sotto) */
  .ks .ks-co-contact__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 640px;
  }
  /* Mappa: 2 colonne -> 1 colonna (mappa sopra, testo sotto) */
  .ks .ks-co-map__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 640px;
  }
  .ks .ks-co-map__embed { aspect-ratio: 16 / 9; }
}
@media (max-width: 768px) {
  .ks .ks-prod-cards__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 480px;
    margin-inline: auto;
  }
  .ks .ks-prod-cards .ks-prod-card__photo { aspect-ratio: 4 / 5; }
  .ks .ks-prod-showcase__photo { aspect-ratio: 4 / 3; }
  .ks .ks-prod-showcase__stamp { width: clamp(90px, 22vw, 130px); }
}

@media (max-width: 900px), (hover: none) {
    .ks .ks-home-hero,
    .ks .ks-az-hero,
    .ks .ks-page-hero,
    .ks .ks-prod-hero,
    .ks .ks-pattern-k {
        background-attachment: scroll;
        background-position: center;
    }
}