/* ! Reset
------------------------------------------- */
body, html{font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; box-sizing: border-box;margin: 0;padding: 0;}
*,*:before,*:after{ box-sizing: border-box; }
h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0;padding: 0;}
ol,ul{list-style-type: none;}
img{max-width: 100%; height: auto;}
a{text-decoration: none;}
hr{border:none; border-bottom: 1px solid #ddd}

/* ! Fonts
------------------------------------------- */
/* manrope-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/manrope-v15-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/manrope-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/manrope-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* gambarino-regular */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Gambarino';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Gambarino-Regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ! Root
------------------------------------------- */
:root{
  --color-primary: #FFFAE2;
  --color-secondary: #E28127;
  --color-secondary--dark: #BB6C23;
  --color-dark: #29371C;
  --color-grey: #616D38;

  --font-main: "Manrope", sans-serif;
  --font-title: "Gambarino";

  --font-size-0: 4rem;
  --font-size-1: 3rem;
  --font-size-2: 2rem;
  --font-size-3: 1.4rem;
  --font-size-4: 1rem;
  --font-size-5: 0.8rem;

  --max-width: 1440px;
  --max-width--small: 900px;

  @media (max-width: 768px) {
    --font-size-0: 3rem;
    --font-size-1: 2.6rem;
    --font-size-2: 1.8rem;
    --font-size-3: 1.2rem;
    --font-size-4: 1rem;
    --font-size-5: 0.8rem;
  }
}

/* ! Base
------------------------------------------- */
body{background: var(--color-primary); color: var(--color-dark);font-family: var(--font-main);overflow-x: hidden;} 
hr{border-bottom: 1px solid var(--color-dark);}

/* ! Title System
------------------------------------------- */
.text-0{font-size:var(--font-size-0);line-height: 1;}
h1,.text-1{font-size: var(--font-size-1);}
h2,.text-2{font-size: var(--font-size-2);}
h3,.text-3{font-size: var(--font-size-3);}
h4, p,.text-4{font-size: var(--font-size-4);}
small,.text-5{font-size: var(--font-size-5);}

h1,h2,h3,h4,h5{font-family: var(--font-title);font-weight: 400;margin: 0 0 20px 0;line-height: 1;}
p,ol,ul{margin-bottom: 1rem;}

@media (max-width: 768px) {
  .text-0{font-size:4rem;}
}


/* ! Button System
------------------------------------------- */
.button, button{font-size: var(--font-size-4);background: var(--color-dark);color: var(--color-primary) !important;border: 1px solid var(--color-dark); padding:12px 32px;display: inline-block;border-radius: 100px;margin: 0 2px 0 0;transition: all .35s cubic-bezier(.215, .61, .355, 1);}

.button--outline{background: transparent;color: var(--color-dark) !important;}

.button--light{background: var(--color-primary); color: var(--color-dark) !important; border: 1px solid var(--color-primary);}
.button--light.button--outline{background: transparent;color: var(--color-primary) !important;border: 1px solid var(--color-primary);}

.button:hover,
.button:hover{opacity: 0.85;}
.arrow { border: 1px solid var(--color-dark); border-radius: 100px; padding: 16px 32px; }


/* ! Header
------------------------------------------- */
.header{background: transparent; display: flex;justify-content: space-between;position:fixed; padding: 16px; width:100%;top:0;left:0;z-index:99;transition: all .35s cubic-bezier(.215, .61, .355, 1);box-shadow: 0 5px 20px rgba(0,0,0,.05);} 
.scroll-down .header{background: var(--color-primary);}

.header__logo img{height: 64px;width: auto; max-width: 100%; transition: all .2s cubic-bezier(.215, .61, .355, 1); filter: none;} 

@media (max-width: 768px) {
  .header__menu{width: 100%;padding: 4rem 2rem;}
  .header__logo img{height: 64px;}
  .header__menu li a{font-size: var(--font-size-3);}
}

.navigatore{position: fixed;bottom: 50%;right: 0;padding: 16px; transform:translateX(102%);transition: all .2s cubic-bezier(.215, .61, .355, 1);} 
.scroll-down .navigatore{transform: translateX(0);}

@media (max-width: 768px) {
  .navigatore{bottom: 0;}
}

/* ! Components
------------------------------------------- */
.arrow-down{position: absolute;bottom: 5%;right: 5%;}

.logo-matera-inline{height: 36px; vertical-align: middle; margin-right: 8px;}
@media (max-width: 768px){.logo-matera-inline{height: 40px;}}

.logo-matera-inline-small{height: 24px; vertical-align: middle;}
@media (max-width: 768px){.logo-matera-inline{height: 40px;}}

/* ! Cover */
.cover{background:#000;padding:20px;min-height:100vh;display:flex;flex-flow: column;justify-content: center;align-items: center;text-align: center;position: relative;}
/* Optional light variant for specific banners when needed */
.cover--light{background: var(--color-primary);}
.cover__bg{border:1px solid #000;position:absolute;top: 0;left: 0;width:100%;height:100%;background:url(img/bridge.jpg) center center;background-size: cover;z-index:0;}
.cover__bg:after{content:" ";position:absolute;top: 0;left: 0;width:100%;height:100%;background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%);}
.cover__content{max-width: 600px;margin:0 auto;position: relative;z-index:1;}

.cover--image{min-height:600px; color: #fff;justify-content: flex-end;}
.cover--image .cover__content{max-width:1250px;width:100%;text-align:left;}

.map__navigator{position: absolute;top: 60%;left: 40%;}

/* ! Card */
.card{background:transparent;border-radius:30px;border: 1px solid var(--color-dark);}
.card a{color: inherit;}
.card__img{height: 360px;width: 100%;object-fit: cover;border-radius: 30px;transition: all .35s cubic-bezier(.215, .61, .355, 1);} 
@media (max-width: 768px){.card__img{height: 220px;}}
@media (max-width: 480px){.card__img{height: 180px;}}

.card a .card__img:hover{filter: sepia(0.3);}

.card__content,.card__footer{padding: 1rem;}
.card__footer{display: flex;justify-content: space-between;}

.card--product .card__img{height: 200px;}

/* ! Big Numbers */
.numbers{position: relative;}
.numbers img{position: absolute;top: -35%;}
.big-numbers{display: flex;justify-content: space-between;}
.big-numbers p{font-size: 8rem;line-height: 1;}
.big-numbers p span{font-size: var(--font-size-3);display: block;}

@media (max-width: 768px) {
  .numbers.pb-4{padding-bottom: 0 !important;}
  .numbers img{position:static;top: 0;}
  .big-numbers p{font-size: 3rem;}
}

/* ! Modal */
.map-pin{transition: all .35s cubic-bezier(.215, .61, .355, 1);}
.map-pin:hover{transform: scale(1.1);}
.map-pin--1{position: absolute;top: 60%;left: 40%;cursor: pointer;}
.map-pin--2{position: absolute;top: 40%;left: 20%;cursor: pointer;}

.modal-container {
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  opacity: 0;
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.modal-container.modal_container--show {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background-color: var(--color-primary);
  border: 1px solid var(--color-dark);
  border-radius: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  width: 500px;
  max-width: 100%;
  position: relative;
  z-index: 1001;
}
.modal-close{position: absolute; top: 1rem;right: 1rem;cursor: pointer; padding: 0px !important;}

img.modal__img{height: 240px;width: 100%;max-width: 100%; object-fit: cover;border-radius: 30px;}
.modal__content,
.modal__footer{padding: 1rem;}

@media (max-width: 768px) {
  .modal{width: 400px;}
}



/* ! Accordion */
.accordion{border-bottom:1px solid var(--color-dark);padding: 2rem 0;}
.accordion:first-child{border-top: 1px solid var(--color-dark); padding-top: 0;} 
.acc-title{cursor: pointer;margin-bottom: 0;position: relative; display: flex;align-items: center;transform: none;transition: all .35s cubic-bezier(.215, .61, .355, 1); width: 100%; box-sizing: border-box;} 
.accordion .acc-title{justify-content: flex-end; text-align: right; padding: 0 1rem 0 0; gap: 8px;} 
.acc-panel{max-height:0;overflow:hidden;transition: all .35s cubic-bezier(.215, .61, .355, 1);margin-left: 0; padding: 0 1rem 1rem 4.5rem;}

.acc-img{opacity: 1;visibility: visible;transition: all .35s cubic-bezier(.215, .61, .355, 1);} 
.acc-title.acc-title--no-offset{transform: none;}
.accordion .acc-img{filter: none; margin-right: 12px; width: 20px; height: 20px;}
.acc-title--open{transform: none;} 
.acc-title--open .acc-img{opacity: 1;visibility: visible;}

.acc-panel--show{max-height:1200px;}

.acc-doc li{border-bottom: 1px solid var(--color-grey);padding: 1rem 0;}
.acc-doc li:last-child{border-bottom: none;}
.acc-doc li a {font-size: var(--font-size-3); color: inherit;display: flex;align-items: center;justify-content: space-between;padding-right: 3rem;}

@media (max-width: 768px) {
  .acc-panel{padding-left: 1rem;}
}
.acc-content-title{font-size: var(--font-size-2); margin-bottom: 12px; display: block; text-align: left;}

/* ! Pages
------------------------------------------- */
/* ! Single Post */
.single-post-img{height: auto; width: 100%;max-width: 100%; object-fit: cover;border-radius: 40px;}
.single-post-half{height: 400px; width: 100%; max-width: 100%; object-fit: cover;border-radius: 40px;}

/* ! Company / Azienda */
.frame-container{border: 1px solid var(--color-dark);border-radius: 40px;padding: 16px;max-width: var(--max-width--small);margin: 0 auto;position: relative;}
.frame-container:after{content: " ";position: absolute;top: 6px;left: 50%;background: url(icons/close-circle.svg);height: 36px;width: 36px;background-size: 100%;cursor: pointer;}
.frame-container p{margin-bottom: 0;}

/* removed empty ruleset */
.fixed-height{height: 60px;}

/* Accordion title utilities */
.acc-title--fs-4{font-size: var(--font-size-4);} 
.acc-title--fw-400{font-weight: 400;} 

/* Margin-left/right utilities */
.ml-0{margin-left:0 !important;} 
.ml-1{margin-left:1rem !important;} 
.ml-2{margin-left:2rem !important;} 
.ml-3{margin-left:3rem !important;} 
.ml-4{margin-left:4rem !important;} 
.mr-0{margin-right:0 !important;} 
.mr-1{margin-right:1rem !important;} 
.mr-2{margin-right:2rem !important;} 
.mr-3{margin-right:3rem !important;} 
.mr-4{margin-right:4rem !important;}

.frame-nav{position: relative;width: 100%;}
.frame-nav__left,
.frame-nav__right{position: absolute;top: -60px;}
.frame-nav__left{left: 0;}
.frame-nav__right{right: 0;}

.frame-prod-head{display: flex;gap: 16px;}
.frame-prod-head__img{width: 30%;}
.frame-prod-head__content{width: 70%;display: flex;flex-direction: column;gap: 16px;align-items: center;}
.frame-prod-head__img img{max-width: 100%;width: 300px;height: 300px; object-fit: cover;border-radius: 40px;border: 1px solid var(--color-dark);}
.frame-prod-head__content__item{width: 100%;padding: 16px;}
.frame-prod-head__content__item--1{display: flex;}
.frame-prod-head__content__item--1 p:first-child{width: 30%;}
.frame-prod-head__content__item--1 p:last-child{width: 70%;}

@media (max-width: 768px) {
  .frame-nav{margin-bottom: 40px;}
  .frame-nav__left,
  .frame-nav__right{position: absolute;top: 0;}
}

.frame-social{display: flex;justify-content: flex-start;align-items: center;}
.frame-social li{width: 100%;}
.frame-social li img{height: 20px;width: 20px;}

.frame-production-list{display: flex;flex-wrap: wrap; justify-content: end; gap: 10px;margin-top: 16px;}
.frame-production-list li{font-size: var(--font-size-5); position: relative;padding-left: 24px;white-space: nowrap;flex: 0 1 auto;}
.frame-production-list li:before{content: " ";position: absolute;top: 0;left: 0;height: 20px;width: 20px;border-radius: 4px;}
.frame-production-list li:nth-child(1):before{background: var(--color-secondary);border: 1px solid var(--color-secondary);}
.frame-production-list li:nth-child(2):before{background: var(--color-primary);border: 1px solid var(--color-grey);}

.frame-production-type{display: flex;flex-wrap: wrap;justify-content: center;  gap: 8px;padding: 0;margin: 24px 0 0 0;}
.frame-production-type li{font-size: var(--font-size-5); padding: 12px 24px; border: 1px solid var(--color-grey); border-radius: 40px;white-space: nowrap;flex: 0 1 auto;}

.frame-categories{padding: 24px;min-height: 220px;}
.frame-categories ul{margin-top: 16px;}
.frame-categories ul li{border-bottom: 1px solid var(--color-grey);padding: 8px 0;}

.tag{font-size: var(--font-size-5); position: relative; display: inline-block;color: var(--color-primary);border-radius: 40px;padding: 6px 12px 6px 28px !important;text-transform: uppercase;cursor: pointer;}
.tag:before{content: " ";position: absolute;top: 50%;left: 4px; transform: translateY(-50%);background: url(icons/close.svg);height: 18px;width: 18px;background-size: 100%;}
.tag--secondary{background: var(--color-secondary);}
.tag--dark{background: var(--color-dark);}

@media (max-width: 768px) {
  .frame-container{margin: 16px;}
  .tag{text-align: left;}
}


/* ! Product */
.product-gallery .splide__list img{border-radius: 40px;object-fit: cover;height: 220px;max-height: 100%; width: 100%;border-radius: 40px;}
.product-name{position: absolute;top: 0;left: 0;padding: 24px;color: var(--color-primary);font-size: var(--font-size-4);z-index: 2;}

.product-gallery .splide__list:after{content:" ";position: absolute; top: 0;left: 0;width: 100%;height: 100%; background: #616D38;z-index: 1;opacity: 0.5;border-radius: 40px;}
.product-gallery .splide__pagination{bottom: -1em;}
.product-gallery .splide__pagination__page{background: transparent;border: 1px solid var(--color-dark);opacity: 1;}
.product-gallery .splide__pagination__page.is-active{background: var(--color-grey);transform: scale(1);}


/* ! Navigator / Navigatore */
.option-container{position: absolute;bottom: 16px;right: 16px;display: flex;align-items: center;gap: 16px;}
.option__navigator{background: var(--color-primary);padding: 16px 32px;border-radius: 100px;display: flex;justify-content: space-between;align-items: center;}
.option__navigator .tag{display: flex;margin: 4px;}

.option__zoom{background: var(--color-primary);border-radius: 100px; display: flex;flex-direction: column;justify-content: space-between; padding: 16px 8px;height: 90px;}
.option__zoom img{cursor: pointer;}

.option__plus{height: 90px;width: 90px;display: flex;align-items: center;justify-content: center;}
.option__plus img{cursor: pointer;transition: all .35s cubic-bezier(.215, .61, .355, 1);}

.tag-container{padding-left: 24px; transition: all .35s cubic-bezier(.215, .61, .355, 1);}
.option-close.option-container .tag-container{display: none;}
.option-close.option-container .option__navigator{gap: 0; padding: 0;width: 90px;justify-content: center;align-items: center;}

/* ! Footer */
.footer{background:var(--color-dark); color:var(--color-primary); padding-top:30px;}
.footer a{color: var(--color-primary);}

/* ! Animations */
/* ------------------------------------------- */
.fade-in{opacity: 0;transform: translateY(0.3rem);}

.fade-out-down {animation: fade-out-down 2s ease infinite;}

@keyframes fade-out-down {
    0% {
      opacity: 1;
      transform: translateY(0);
  }

  100% {
      opacity: 0;
      transform: translateY(20px);
  }
  }

.scale{transition: all .35s cubic-bezier(.215, .61, .355, 1);}
.scale:hover{transform: scale(1.05);}

.rotate{transition: all .2s cubic-bezier(.215, .61, .355, 1);transform: rotate(45deg);}


/* ! Form */
/* ------------------------------------------- */
.contact-form{border: 1px solid var(--color-grey);border-radius: 40px; padding: 16px; max-width: var(--max-width--small);margin: 0 auto;}

input,
textarea,
select {
  background: transparent;
  color: var(--color-dark);
  font-size: var(--font-size-4);
  width: 100%;
  border: 1px solid var(--color-dark);border-radius: 40px;
  padding: 16px;
  font-family: var(--font-main);
  margin: 5px 0;
}
textarea:focus,
input:focus {
  outline: none;
}
input::placeholder,
textarea::placeholder {
  font-size: var(--font-size-4);
  color: var(--color-grey);
  opacity: 0.8;
}
textarea {
  width: 100% !important;
}
input[type="submit"],
button {
  border: none;
  cursor: pointer;
  width: auto;
}
input[type="checkbox"] {
  width: auto;
  padding: 0;
  margin: 0;
}

/* ! Helpers */
/* ------------------------------------------- */
.spacer{height: 5rem;}
.br{border: 1px solid red;}
.img-res{max-width:100%; height: auto;}
.img-partner{height: 70px;}

.mt-0{margin-top:0 !important;}
.mt-1{margin-top:1rem !important;}
.mt-2{margin-top:2rem !important;}
.mt-3{margin-top:3rem !important;}
.mt-4{margin-top:4rem !important;}

.mb-0{margin-bottom:0 !important;}
.mb-1{margin-bottom:1rem !important;}
.mb-2{margin-bottom:2rem !important;}
.mb-3{margin-bottom:3rem !important;}
.mb-4{margin-bottom:4rem !important;}

.mb-w0{margin-bottom:0rem !important; margin-top: -4rem;}
.mb-w1{margin-bottom:1rem !important; margin-top: -4rem;}
.mb-w2{margin-bottom:2rem !important; margin-top: -4rem;}
.mb-w3{margin-bottom:3rem !important; margin-top: -4rem;}
.mb-w4{margin-bottom:4rem !important; margin-top: -4rem;}
@media (min-width: 1400px){ .mb-w0,.mb-w1,.mb-w2,.mb-w3,.mb-w4{margin-top: 0 !important;} }
@media (max-width: 768px){
  .mb-w0,.mb-w1,.mb-w2,.mb-w3,.mb-w4{margin-top: 0 !important;}
}

.p-0{padding:0 !important;}
.p-1{padding:1rem !important;}
.p-2{padding:2rem !important;}
.p-3{padding:3rem !important;}
.p-4{padding:4rem !important;}

.pt-0{padding-top:0 !important;}
.pt-1{padding-top:1rem !important;}
.pt-2{padding-top:2rem !important;}
.pt-3{padding-top:3rem !important;}
.pt-4{padding-top:4rem !important;}

.pb-0{padding-bottom:0 !important;}
.pb-1{padding-bottom:1rem !important;}
.pb-2{padding-bottom:2rem !important;}
.pb-3{padding-bottom:3rem !important;}
.pb-4{padding-bottom:4rem !important;}

.pl-0{padding-left:0 !important;}
.pl-1{padding-left:1rem !important;}
.pl-2{padding-left:2rem !important;}
.pl-3{padding-left:3rem !important;}
.pl-4{padding-left:4rem !important;}

.pr-0{padding-right:0 !important;}
.pr-1{padding-right:1rem !important;}
.pr-2{padding-right:2rem !important;}
.pr-3{padding-right:3rem !important;}
.pr-4{padding-right:4rem !important;}

.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}

.max-width{max-width: var(--max-width);margin: 0 auto;}
.max-width--small{max-width: var(--max-width--small);margin: 0 auto; line-height: 3rem;}

.height-auto{height: auto !important;}

.bg-secondary{background: var(--color-secondary);color: var(--color-primary);}
.bg-secondary--dark{background: var(--color-secondary--dark);color: var(--color-primary);}
.bg-dark{background:var(--color-dark);}

.border-bottom{border-bottom: 1px solid var(--color-grey);padding-bottom: 8px !important;}
.border-round{border: 1px solid var(--color-dark);border-radius: 40px;}

.icon-small{width:40px;padding:8px;}
.icon-white{filter: invert(1);}

.text-white{color:#fff;}
.text-grey{color: var(--color-grey);}

.font-main{font-family: var(--font-main) !important;}
h1.font-main,h2.font-main,h3.font-main,h4.font-main,h5.font-main{font-weight: 700;}

.font-normal{font-weight:400;}
.none{display:none;}
@media (max-width: 768px) {
  .sma-none{display:none;}
}

/* ! Grid System */
/* ------------------------------------------- */
.grid{display: flex;flex-wrap: wrap;max-width:var(--max-width);margin: 0 auto;}
.grid--small{max-width:var(--max-width--small);}
.grid--center{justify-content:center;align-items: center;}
.grid--full-width{max-width: 100%; padding: 0 1rem; margin: 0;}
footer .grid--full-width{max-width: var(--max-width); margin: 0 auto;}

.v-center{display:flex;justify-content:center;flex-flow: column;}

.col-10{width:10%;margin-left: 10px;}
.col-20{width:20%;}
.col-25{width:25%;}
.col-30{width:30%;}
.col-33{width:33.33%;}
.col-40{width:40%;}
.col-50{width:50%;}
.col-60{width:60%;}
.col-70{width:70%;}
.col-80{width:80%;}
.col-90{width:90%;}
.col-100{width:100%;}

[class*='col-']{padding:10px !important;}
.grid--full-width [class*='col-']{padding:0;}

@media (max-width: 768px) {
  [class*='col-']{width:100%;padding:8px 16px !important;}
  .sma-25{width:25%;}
  .sma-30{width:30%;}
  .sma-33{width:33.33%;}
  .sma-40{width:40%;}
  .sma-50{width:50%;}
  .sma-60{width:60%;}
  .sma-70{width:70%;}
}


/* ! Splide CSS */
/* ------------------------------------------- */
.splide__container {
  box-sizing: border-box;
  position: relative;
}
.splide__list {
  backface-visibility: hidden;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
.splide.is-initialized:not(.is-active) .splide__list {
  display: block;
}
.splide__pagination {
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}
.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto;
}
.splide:not(.is-overflow) .splide__pagination {
  display: none;
}
.splide__progress__bar {
  width: 0;
}
.splide {
  position: relative;
  visibility: hidden;
}
.splide.is-initialized,
.splide.is-rendered {
  visibility: visible;
}
.splide__slide {
  backface-visibility: hidden;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative;
}
.splide__slide img {
  vertical-align: bottom;
}
.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #999;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}
.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.splide__toggle.is-active .splide__toggle__play,
.splide__toggle__pause {
  display: none;
}
.splide__toggle.is-active .splide__toggle__pause {
  display: inline;
}
.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0;
}
@keyframes splide-loading {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.splide__track--fade > .splide__list > .splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0;
}
.splide__track--fade > .splide__list > .splide__slide.is-active {
  opacity: 1;
  z-index: 1;
}
.splide--rtl {
  direction: rtl;
}
.splide__track--ttb > .splide__list {
  display: block;
}
.splide__arrow {
  -ms-flex-align: center;
  align-items: center;
  background: #ccc;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  height: 2em;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: 0.7;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2em;
  z-index: 1;
}
.splide__arrow svg {
  fill: #000;
  height: 1.2em;
  width: 1.2em;
}
.splide__arrow:hover:not(:disabled) {
  opacity: 0.9;
}
.splide__arrow:disabled {
  opacity: 0.3;
}
.splide__arrow:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}
.splide__arrow--prev {
  left: 1em;
}
.splide__arrow--prev svg {
  transform: scaleX(-1);
}
.splide__arrow--next {
  right: 1em;
}
.splide.is-focus-in .splide__arrow:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}
.splide__pagination {
  bottom: 0.5em;
  left: 0;
  padding: 0 1em;
  position: absolute;
  right: 0;
  z-index: 1;
}
.splide__pagination__page {
  background: #ccc;
  border: 0;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  margin: 3px;
  opacity: 0.7;
  padding: 0;
  position: relative;
  transition: transform 0.2s linear;
  width: 8px;
}
.splide__pagination__page.is-active {
  background: #fff;
  transform: scale(1.4);
  z-index: 1;
}
.splide__pagination__page:hover {
  cursor: pointer;
  opacity: 0.9;
}
.splide__pagination__page:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}
.splide.is-focus-in .splide__pagination__page:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}
.splide__progress__bar {
  background: #ccc;
  height: 3px;
}
.splide__slide {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.splide__slide:focus {
  outline: 0;
}
@supports (outline-offset: -3px) {
  .splide__slide:focus-visible {
    outline: 3px solid #0bf;
    outline-offset: -3px;
  }
}
@media screen and (-ms-high-contrast: none) {
  .splide__slide:focus-visible {
    border: 3px solid #0bf;
  }
}
@supports (outline-offset: -3px) {
  .splide.is-focus-in .splide__slide:focus {
    outline: 3px solid #0bf;
    outline-offset: -3px;
  }
}
@media screen and (-ms-high-contrast: none) {
  .splide.is-focus-in .splide__slide:focus {
    border: 3px solid #0bf;
  }
  .splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus {
    border-color: #0bf;
  }
}
.splide__toggle {
  cursor: pointer;
}
.splide__toggle:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}
.splide.is-focus-in .splide__toggle:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}
.splide__track--nav > .splide__list > .splide__slide {
  border: 3px solid transparent;
  cursor: pointer;
}
.splide__track--nav > .splide__list > .splide__slide.is-active {
  border: 3px solid #000;
}
.splide__arrows--rtl .splide__arrow--prev {
  left: auto;
  right: 1em;
}
.splide__arrows--rtl .splide__arrow--prev svg {
  transform: scaleX(1);
}
.splide__arrows--rtl .splide__arrow--next {
  left: 1em;
  right: auto;
}
.splide__arrows--rtl .splide__arrow--next svg {
  transform: scaleX(-1);
}
.splide__arrows--ttb .splide__arrow {
  left: 50%;
  transform: translate(-50%);
}
.splide__arrows--ttb .splide__arrow--prev {
  top: 1em;
}
.splide__arrows--ttb .splide__arrow--prev svg {
  transform: rotate(-90deg);
}
.splide__arrows--ttb .splide__arrow--next {
  bottom: 1em;
  top: auto;
}
.splide__arrows--ttb .splide__arrow--next svg {
  transform: rotate(90deg);
}
.splide__pagination--ttb {
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  left: auto;
  padding: 1em 0;
  right: 0.5em;
  top: 0;
}
/* Home Card Slider */
.home-cards{display:flex; gap: 1.5rem; padding: 0 2rem; margin-top: 8rem !important;}
@media (max-width: 768px){.home-cards{gap: 1rem; padding: 0 1rem; margin-top: 4rem !important;}}
.home-cards .home-card{flex: 1 1 33%;}
.home-card{display:block; width:100%; perspective: 1000px; -webkit-perspective: 1000px;}
.home-card__inner{position: relative; min-height: clamp(320px, 60vh, 560px); border-radius: 40px; overflow: hidden; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform .6s cubic-bezier(.215, .61, .355, 1);} 
.home-card__face{position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s cubic-bezier(.215, .61, .355, 1); will-change: transform;}
.home-card__front{color: var(--color-primary); transform: rotateY(0deg);} 
.home-card--territorio .home-card__front{background: var(--color-secondary--dark);} 
.home-card--cibo .home-card__front{background: var(--color-secondary);} 
.home-card--navigator .home-card__front{background: var(--color-grey);} 
.home-card__jar{max-width: 60%; height: auto;}
.home-card--cibo .home-card__jar{max-width: 75%;}

.home-card__title{position: absolute; left: 24px; bottom: 24px; font-size: var(--font-size-2);} 
.home-card__back{color: var(--color-primary); transform: rotateY(180deg); background-size: cover; background-position: center;} 
.home-card--territorio .home-card__back{background-image: linear-gradient(0deg, rgba(187,108,35,0.8), rgba(187,108,35,0.8)), var(--bg-image);} 
.home-card--cibo .home-card__back{background-image: linear-gradient(0deg, rgba(226,129,39,0.8), rgba(226,129,39,0.8)), var(--bg-image);} 
.home-card--navigator .home-card__back{background-image: linear-gradient(0deg, rgba(97,109,56,0.8), rgba(97,109,56,0.8)), var(--bg-image);} 
.home-card__content{max-width: 60%; text-align: center; display: flex; flex-direction: column; gap: 12px;} 
@media (max-width: 768px){.home-card__content{max-width: 80%;}}
.home-card.is-active .home-card__front{transform: rotateY(180deg);} 
.home-card.is-active .home-card__back{transform: rotateY(0deg);} 
@media (hover: hover){ .home-card:hover .home-card__front{transform: rotateY(180deg);} .home-card:hover .home-card__back{transform: rotateY(0deg);} }
@media (max-width: 1200px) { .home-cards{flex-wrap: wrap;} .home-cards .home-card{flex: 1 1 48%;} }
@media (max-width: 900px) { .home-cards .home-card{flex: 1 1 100%;} }
@media (max-width: 768px) { .home-card__inner{min-height: clamp(240px, 52vh, 420px);} .home-card__jar{max-width: 50%;} .home-cards{gap: 1rem; padding: 0; margin-top: 5.5rem !important;} }
@media (max-width: 480px) { .home-card__inner{min-height: clamp(200px, 48vh, 360px);} }
/* Header search icon */
.header__search{display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; border: 0; border-radius: 0; margin-left: 12px; background: transparent;} 
.header__search img{width: 36px; height: 36px;}
/* Search Modal */
.search-modal.modal-container{background-color: rgba(0,0,0,0.6); z-index: 9999;} 
.search-modal .modal{background: transparent; border: none; box-shadow: none; width: 80vw; max-width: 900px; z-index: 10000; margin: auto;} 
.search-form{display: flex; align-items: center; justify-content: center; padding: 32px;} 
.search-bar{position: relative; width: 100%; border-radius: 100px; padding: 16px 56px; border: 2px solid rgba(255,255,255,0.8);} 
.search-bar:after{content:""; position: absolute; inset: 6px; border-radius: 100px; border: 2px solid rgba(255,255,255,0.6);} 
.search-icon{position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; filter: invert(1);} 
.search-bar input{background: transparent; border: 0; color: var(--color-primary); font-size: var(--font-size-3); width: 100%; outline: none;}

.home-flipcard__title{font-size: var(--font-size-3);} 
.video-cover{position: relative;}
.video-play{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 160px; height: 160px; border-radius: 100px; border: 3px solid rgba(255,255,255,0.9); background: rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; cursor: pointer;}
.video-play img{width: 80px; height: 80px; filter: invert(1);} 
.video-modal.modal-container{background-color: rgba(0,0,0,0.6); z-index: 9999;} 
.video-modal .modal{background: transparent; border: none; box-shadow: none; width: 80vw; max-width: 900px; margin: auto;} 
.video-responsive{position: relative; padding-top: 56.25%; border-radius: 20px; overflow: hidden;} 
.video-responsive iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.accordion-img{height: 400px; width: 100%; object-fit: cover; border-radius: 12px;}

@media (max-width: 768px){.pubs-img{height: 180px;}}
.accordion-img{height: 480px; width: 100%; object-fit: cover; border-radius: 12px;}
@media (max-width: 768px){.accordion-img{height: 180px;}}
.image-preview-modal.modal-container{background-color: rgba(0,0,0,0.7); z-index: 9999; display: flex; align-items: center; justify-content: center;} 
.image-preview-modal .modal{background: transparent; border: none; box-shadow: none; width: auto; max-width: 90vw; margin: auto; position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-bottom: 48px;} 
.preview-header{color: var(--color-primary); text-align: center;} 
.preview-body{display: flex; align-items: center; justify-content: center; max-height: 75vh;} 
.preview-image{max-width: 90vw; max-height: 75vh; object-fit: contain; border-radius: 8px; border: 2px solid rgba(255,255,255,0.8);} 
.preview-caption{color: var(--color-primary);} 
.preview-caption-text{margin: 8px 0 0 0;} 
.preview-footer{position: static; margin-top: 16px;}
.preview-download img{width: 28px; height: 28px; filter: invert(1);}
/* Banner Frame */
.banner-frame{display: grid; grid-template-columns: 48px 1fr 48px; gap: 20px; padding: 16px; width: 100%; box-sizing: border-box; align-items: center;}
.banner-side{background: var(--color-secondary); border-radius: 16px; position: relative; height: 100%;}
.banner-side--left{background: var(--color-secondary--dark);} 
.banner-side--right{background: var(--color-grey);} 
.banner-side__label{position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 2rem; font-family: var(--font-title);}
.banner-center{border-radius: 24px; overflow: hidden; position: relative; box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset; width: 100%;}
.page-project .banner-center{box-shadow: none;}
.banner-close{position: absolute; top: 12px; right: 12px; background: transparent; border: none; cursor: pointer; z-index: 1;}
.banner-close img{width: 24px; height: 24px;}
@media (max-width: 768px){
  .banner-frame{grid-template-columns: 16px 1fr 16px; gap: 12px; padding: 8px;}
  .project-banner{padding: 0; min-height: 44vh;}
}
@media (max-width: 480px){
  .project-banner{min-height: 32vh;}
}
/* Ensure banner visible on desktop */
.project-banner{min-height: 68vh; width: 100%;}
/* Project page banner spacing below fixed header */
.page-project .banner-frame{margin-top: 5px;}
.page-project .banner-frame{padding-top: 30px;}
@media (max-width: 768px){
  .page-project .banner-frame{margin-top: 46px;}
  .page-project .banner-frame{padding-top: 30px;}
}
.sponsors-banner{border-radius: 0;}
.sponsor-circle{width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.9); object-fit: cover; margin: 8px auto; display: block;}
@media (max-width: 1024px){.sponsor-circle{width: 96px; height: 96px;}}
@media (max-width: 768px){.sponsor-circle{width: 72px; height: 72px;}}
.page-navigator .header{background: transparent; box-shadow: none;}
.map-marker{position: absolute; width: 28px; height: 28px; border: 2px solid var(--color-dark); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; z-index: 200; pointer-events: auto;} 
.map-marker .marker-icon{width: 14px; height: 14px;}
.marker--product{background: var(--color-primary);} 
.marker--company{background: var(--color-primary);} 
.marker--actor{background: var(--color-primary);} 

.filters{position: absolute; bottom: 24px; left: 24px; display: inline-block;}
.filters__row{display: flex; gap: 12px;}
.filters__chips{position: absolute; bottom: calc(100% + 8px); left: 0; display: flex; flex-direction: column; gap: 8px; z-index: 1000;}
.pill{background: var(--color-primary); color: #000 !important; border: 2px solid var(--color-dark); border-radius: 100px; padding: 8px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 150px;}
.pill img{width: 20px; height: 20px;}
.pill:hover img{filter: invert(1);} 
.pill--active{background: var(--color-dark); color: var(--color-primary) !important;}
.pill--active img{filter: invert(1);} 
.chip{background: var(--color-primary); color: #000 !important; border: 2px solid var(--color-dark); border-radius: 100px; padding: 6px 14px; display: inline-flex; align-items: center; justify-content: center;}
.chip{font-size: 0.85rem; padding: 3px 10px;}
.chip--active{background: var(--color-dark); color: var(--color-primary) !important;}

.action-controls{position: absolute; right: 24px; bottom: 96px; display: flex; flex-direction: column; gap: 12px;}
.zoom-controls{position: absolute; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 12px;}
.control-btn{width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--color-dark); background: var(--color-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.2);} 
.control-btn img{width: 22px; height: 22px;}


.marker-modal .marker-card{background: var(--color-primary); border: 1px solid var(--color-dark); border-radius: 16px; padding: 16px; max-width: 360px;}
.marker-card__header{display: flex; justify-content: space-between; align-items: center;}
.page-navigator .header .header__quicklink .button{background: var(--color-primary); color: var(--color-dark) !important; border: 1px solid var(--color-dark);} 
.page-navigator .header .header__quicklink .button.button--outline{background: var(--color-dark); color: var(--color-primary) !important; border: 1px solid var(--color-dark);} 
.modal--card{background: var(--color-primary); border: 2px solid var(--color-dark); border-radius: 16px; padding: 16px; max-width: 380px; width: auto;}
.modal--card .modal__content{padding: 0 0 8px 0;}
.modal--card .modal__footer{padding: 0;}
.modal--card .modal__content p{margin: 4px 0;}
.modal--card .modal__footer .button{background: var(--color-dark); color: var(--color-primary) !important; border: 1px solid var(--color-dark);} 
.modal--card{position: relative;}
.modal--card .modal-close{position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; z-index: 5; display: block;}
.modal.modal--card{width: auto !important; border-radius: 16px !important; border: 2px solid var(--color-dark) !important;}
.cover{position: relative;}
.nav-controls{position: absolute; right: 24px; bottom: 24px; display: flex; align-items: flex-end; gap: 16px;}
.nav-controls .control-btn{background: transparent !important; border: none !important; box-shadow: none !important;}
.nav-controls .control-btn img{display: block;}
.legend-btn{width:64px; height: 64px; border-radius: 50%; border: 2px solid var(--color-dark); background: var(--color-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.2);} 
.legend-btn img{width: 42px; height: 42px;}
.legend-btn:hover{opacity: 1 !important;}
.zoom-stack .control-btn:hover{opacity: 1 !important;}
.zoom-stack{background: var(--color-primary); border: 3px solid var(--color-dark); border-radius: 999px; padding: 16px 12px; width: 64px; display: flex; flex-direction: column; gap: 24px; align-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.2);} 
.zoom-stack .control-btn{background: transparent; border: none; width: auto; height: auto; padding: 0;}
.zoom-stack .control-btn img{width: 28px; height: 28px;}
.nav-controls{z-index: 300;}
/* anchored popup removed: centralized modals in use */
.legend-gallery{position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 1200;}
.legend-gallery--show{display: flex;}
.legend-gallery__backdrop{position: absolute; inset: 0; background: rgba(0,0,0,0.35); animation: fadeIn .25s ease forwards;}
.legend-gallery__stage{position: relative; width: 92vw; max-width: 1400px; height: 82vh; border-radius: 24px; overflow: hidden;}
.legend-gallery__close{position: absolute; top: 12px; right: 12px; background: transparent; border: none; z-index: 2;}
.legend-gallery__images{position: relative; width: 100%; height: 100%;}
.legend-img{position: absolute; object-fit: cover; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.25); opacity: 0; animation: fadeIn .6s ease forwards;}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}

/* Collage positions */
.legend-gallery__images .legend-img:nth-child(1){top: 5%; left: 4%; width: 22%; height: 48%;}
.legend-gallery__images .legend-img:nth-child(2){top: 12%; left: 18%; width: 26%; height: 60%;}
.legend-gallery__images .legend-img:nth-child(3){top: 0%; left: 46%; width: 20%; height: 48%;}
.legend-gallery__images .legend-img:nth-child(4){top: 22%; left: 62%; width: 18%; height: 42%;}
.legend-gallery__images .legend-img:nth-child(5){top: 36%; left: 8%; width: 20%; height: 40%;}
.legend-gallery__images .legend-img:nth-child(6){top: 46%; left: 30%; width: 28%; height: 42%;}
.legend-gallery__images .legend-img:nth-child(7){top: 8%; left: 74%; width: 22%; height: 50%;}
.legend-gallery__images .legend-img:nth-child(8){top: 52%; left: 58%; width: 24%; height: 40%;}

.products-overlay.modal-container{background-color: rgba(0,0,0,0.35); z-index: 1200; display: flex; align-items: center; justify-content: center;}
.products-overlay .modal{background: transparent; border: none; box-shadow: none; width: calc(100vw - 60px); max-width: 1400px; height: auto; margin: 0 auto;}
.products-overlay__stage{background: rgba(41,55,28,0.6); border-radius: 24px; padding: 16px; position: relative; width: 100%; height: 80vh; display: flex; flex-direction: column;}
.products-overlay__header{display: flex; align-items: center; justify-content: flex-start; padding: 8px 8px 0 8px;}
.products-overlay__title{color: var(--color-primary);}
.products-list{display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; padding: 16px; height: calc(100% - 64px);}
.product-card{background: var(--color-primary); border: none; border-radius: 24px; width: 320px; min-width: 320px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); position: relative;} 
.product-card__imgwrap{display: flex; align-items: center; justify-content: center; padding: 12px 12px 0 12px;}
.product-card .home-card__jar{max-width: 70%; height: auto;}
.product-card__body{padding: 12px 16px 16px 16px;}
.product-card__body h4{font-size: var(--font-size-2); font-family: var(--font-main);} 
.product-card__badge{background: var(--color-secondary); color: var(--color-primary); border-radius: 999px; padding: 6px 10px; display: inline-block; margin: 8px 0 10px 0; font-size: var(--font-size-5); text-transform: uppercase;}
.product-card__badge.badge--mp{background: var(--color-grey);} 
.product-card__badge.badge--tr{background: var(--color-secondary--dark);} 
.product-card__cta{position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border: 1px solid var(--color-dark); border-radius: 999px; color: var(--color-dark); background: transparent;} 
.product-card__cta img{width: 18px; height: 18px;} 
.products-overlay .modal-close{top: 8px; right: 8px;}
.product-detail-modal.modal-container{background-color: rgba(0,0,0,0.6); z-index: 1200; display: flex; align-items: center; justify-content: center;}
.product-detail-modal .modal{background: transparent; border: none; box-shadow: none; width: 50%; max-width: 50%; margin: auto;}
.product-detail-modal .frame-container{background: var(--color-primary); border: 2px solid var(--color-dark); width: 100%; box-shadow: 0 2px 6px rgba(0,0,0,0.2); margin-top: 24px;} 
.product-detail-modal .frame-container{max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y;}
.product-detail-modal .frame-container::-webkit-scrollbar{width:8px;height:8px;background:transparent}
.product-detail-modal .frame-container::-webkit-scrollbar-track{background:transparent}
.product-detail-modal .frame-container::-webkit-scrollbar-thumb{background:transparent}
.product-detail-modal .frame-container{scrollbar-color: transparent transparent; scrollbar-width: thin;}
.product-detail-modal .modal--transparent {transition: transform 0.5s ease-in-out; transform: translateX(0);}
.product-detail-modal.split-open .modal--transparent {transform: translateX(calc(50vw - 45% - 5vw));}
.pd-frame{padding: 40px;}
.pd-header{display: grid; grid-template-columns: 56px 1fr 56px; grid-template-rows: auto auto; grid-template-areas: "left title right" ". . tag"; align-items: center; gap: 12px; padding-top: 30px; margin-bottom: 10px; border-bottom: 0px solid var(--color-dark); padding-bottom: 6px;}
.pd-header{position: relative;}
.frame-close-hit{position: absolute; top: 7px; left: 50%; width: 35px; height: 35px; background: transparent; border: none; cursor: pointer; z-index: 2;}
.pd-title{text-align: center; font-family: var(--font-title); grid-area: title; justify-self: center;}
.pd-nav-btn{width: 56px; height: 32px; border: 2px solid var(--color-dark); border-radius: 999px; background: transparent; display: flex; align-items: center; justify-content: center;} 
.pd-header .product-detail__back{grid-area: left; justify-self: start; margin-left: 8px;} 
.pd-header .transform-back{grid-area: left; justify-self: start; margin-left: 8px;} 
.pd-header .pd-nav-btn:not(.product-detail__back):not(.transform-back){grid-area: right; justify-self: end;} 
.pd-nav-btn img{width: 20px; height: auto;} 
.pd-tag{margin-left: 8px; background: var(--color-dark); color: var(--color-primary); border-radius: 999px; padding: 6px 12px; font-size: var(--font-size-5); position: relative; padding-left: 26px; grid-area: tag; justify-self: end; margin-top: 8px;}
.pd-tag:before{content:""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); background: url(icons/close.svg) no-repeat center / 100%; width: 12px; height: 12px; filter: invert(1);} 
.pd-section{margin-top: 12px;} 
.pd-section__title{border-top: 1px solid var(--color-grey); padding-top: 10px !important; margin-bottom: 10px !important;} 
.pd-header + .pd-section .pd-section__title{ margin-top: -6px; }
.pd-tech{display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start;} 
.pd-tech__img{position: relative; border-radius: 24px; border: 2px solid var(--color-dark); overflow: hidden; background: var(--color-grey);} 
.pd-tech__img img{display: block; width: 100%; height: auto; object-fit: cover;} 
.pd-tech__img:after{content:""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0, rgba(255,255,255,0.08) 1px, transparent 1px, transparent 24px), repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 24px);} 
.pd-tech__info{display: flex; flex-direction: column; gap: 10px;} 
.pd-tech__info{padding-right: 0px;}

.pd-aznd{display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start;}
.pd-aznd__info{display: flex; flex-direction: column; gap: 10px; padding-right: 0px;}
.pd-field-description{display: flex; flex-direction: column; gap: 5px; justify-content: space-between; border: 2px solid var(--color-dark); border-radius: 25px; padding: 12px 18px; background: var(--color-primary);} 
.pd-combo-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; }
.pd-field--grow { flex: 1; }
.pd-btn-group { display: flex; flex-shrink: 0; gap: 6px; }
.pd-action-btn { width: 44px; height: 44px; border: 2px solid var(--color-dark); background: var(--color-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s ease; }
.pd-action-btn:hover { transform: scale(1.05); background: #fff; }
.pd-action-btn img { width: 20px; height: 20px; object-fit: contain; }
.prdt-materia-prima { border: 2px solid var(--color-dark); border-radius: 24px; width: 100%; height: 200px; object-fit: cover; background: #fff; }

.pd-field{display: flex; align-items: center; justify-content: space-between; border: 2px solid var(--color-dark); border-radius: 999px; padding: 12px 18px; background: var(--color-primary);} 
.pd-field__label{color: var(--color-grey);} 
.pd-field__value{font-weight: 700;} 
.pd-cta{display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 12px 20px; background: var(--color-secondary); color: var(--color-primary); border: 2px solid var(--color-secondary--dark); width: 100%; font-weight: 500; text-transform:uppercase;} 
.pd-cta img{width: 16px; height: 16px; margin-right: 8px; filter: invert(1);} 
.pd-desc-box{border: 1px solid var(--color-dark); border-radius: 24px; padding: 16px; background: var(--color-primary);} 
.products-overlay .modal{width: calc(100vw - 60px);} 
.products-list::-webkit-scrollbar {
  height: 10px;
  background: rgba(0,0,0,0.08);
}
.products-list::-webkit-scrollbar-track{background: rgba(0,0,0,0.08); border-radius: 999px;}
.products-list::-webkit-scrollbar-thumb{background: var(--color-dark); border-radius: 999px;}
.products-list{scrollbar-color: var(--color-dark) rgba(0,0,0,0.08); scrollbar-width: thin;}
@media (max-width: 768px) {
  .page-navigator .filters{bottom: 96px;}
  .products-overlay .modal{width: calc(100vw - 32px);} 
  .products-overlay__stage{height: 85vh; padding: 12px;}
  .products-list{gap: 12px; padding: 12px;}
  .product-card{width: 280px; min-width: 280px;}
  .product-card .home-card__jar{max-width: 65%;}
  .pd-header{grid-template-columns: 40px 1fr 40px; grid-template-rows: auto auto;}
  .pd-nav-btn{width: 44px; height: 28px;}
  .pd-tech{grid-template-columns: 1fr;}
  .pd-tech__img{margin-bottom: 12px;}
  .pd-tech__img img{height: 200px;}
  .product-detail-modal .frame-container{max-height: 85vh;}
  /* Map controls: two levels on mobile */
  .page-navigator .nav-controls{right: 12px; left: auto; bottom: 8px; align-items: center; gap: 12px;}
  .page-navigator .zoom-stack{flex-direction: row; width: auto; padding: 8px 12px; height: auto;}
  .page-navigator .zoom-stack .control-btn img{width: 24px; height: 24px;}
  .page-navigator .legend-btn{width: 48px; height: 48px;}
  /* Navigator icons responsive */
  .page-navigator .map-marker{width: 24px; height: 24px;}
  .page-navigator .map-marker .marker-icon{width: 12px; height: 12px;}
  .page-navigator .header__search img{width: 28px; height: 28px;}
  /* Map and filters sizing */
  .page-navigator #map{width: 100vw; max-width: 100vw;}
  .page-navigator .filters{left: 12px; right: 12px; width: auto;}
  .page-navigator .filters__row{flex-wrap: wrap; gap: 8px;}
  .page-navigator .pill{min-width: auto; padding: 8px 12px;}

  /* Media Emme */
  .pd-frame{ padding: 20px;}
  .frame-container {margin: 0px;}
  .pd-combo-row { flex-direction: column; }
  .pd-field--grow { width: 100%; }
  .production-panel {width: 0px !important;}
  .production-panel.frame-container.mt-4.mb-4.pd-frame {padding: 10px;}
}
.modal-button-control-mobile{
  display: none;
  justify-content: center;
}
.mobile-panel-close {
  background: var(--color-dark);
  border: none;
  font-size: 16px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: white;
}

.frame-container::after { margin-left: -17.5px; left: 50%; }
.detail-gallery{margin-top: 8px;}
.detail-gallery .splide__slide img{border: 2px solid var(--color-dark); border-radius: 24px; width: 100%; height: 200px; object-fit: cover; background: #fff;}
.detail-gallery .splide__arrow{border: 2px solid var(--color-dark); border-radius: 999px; width: 48px; height: 28px; background: transparent; opacity: 1;}
.detail-gallery .splide__arrow--prev{left: -24px; top: 50%; transform: translateY(-50%);} 
.detail-gallery .splide__arrow--next{right: -24px; top: 50%; transform: translateY(-50%);} 
.detail-gallery .splide__arrow{position: absolute; z-index: 5;}
.detail-gallery .splide__arrow:hover{opacity: 1;}
.detail-gallery .splide__pagination{bottom: -1.2em;}
.pd-cta--years--active{background: var(--color-dark); color: var(--color-primary); border-color: var(--color-dark);} 
.production-panel{display: none;position: absolute; top: 0; left: 0; width: 300px; height: 100%; opacity: 0; pointer-events: none; transition: opacity 0.3s;}
.product-detail-modal.split-open .production-panel{display: block; position: absolute; width: 42%; right: 50%; margin: 3%; z-index: 2;}
.product-detail-modal.split-open .production-panel[aria-hidden="false"] { opacity: 1; pointer-events: all; }
.production-panel .prod-card{background: var(--color-primary); border-radius: 24px; padding: 16px; height: 100%; display: flex; flex-direction: column;}
.production-panel .prod-title{margin-bottom: 8px;}
.production-panel .chart { position: relative; flex: 1; border: 2px solid var(--color-dark); border-radius: 16px; overflow: hidden; background-color: color-mix(in srgb, var(--color-dark), transparent 40%); background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg stroke='rgba(255, 255, 255, 0.3)' stroke-width='1' stroke-dasharray='2 4'%3E%3Cpath d='M0 40h40'/%3E%3Cpath d='M0 0v40'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 30px 30px; }
.production-panel .chart-layer { position: absolute; bottom: 0; left: 0; border-bottom-left-radius: 14px; border-top-right-radius: 16px; opacity: 0.3; transform-origin: bottom left; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); pointer-events: none; }
.production-panel .chart-layer::after { content: attr(data-year); position: absolute; top: 10px; right: 10px; background-color: #fff; color: #333; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.15); white-space: nowrap; pointer-events: none; z-index: 100; }
.production-panel .chart-layer.active { opacity: 1; box-shadow: 0 0 15px rgba(0,0,0,0.1); }
.production-panel .chart-layer[data-year="2022"] { width: 44%; height: 44%; border: 2px solid var(--color-secondary); background: rgba(226, 129, 39, 0.4); z-index: 30; }
.production-panel .chart-layer[data-year="2022"].active { background: rgba(226, 129, 39, 1); }
.production-panel .chart-layer[data-year="2023"] { width: 60%; height: 60%; border: 2px solid rgba(34, 208, 31, 1); background: rgba(42, 226, 39, 0.4); z-index: 20; }
.production-panel .chart-layer[data-year="2023"].active { background: rgba(42, 226, 39, 1); }
.production-panel .chart-layer[data-year="2024"] { width: 85%; height: 85%; border: 2px solid rgba(23, 57, 210, 1); background: rgba(39, 73, 226, 0.4); z-index: 10; }
.production-panel .chart-layer[data-year="2024"].active { background: rgba(39, 73, 226, 1); }
.production-panel .timeline{display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px;}
.production-panel .timeline-chip{color: var(--color-dark) !important; border: 2px solid var(--color-dark); border-radius: 999px; padding: 8px 16px; background: transparent;}
.production-panel .timeline-chip.active{background: var(--color-dark); color: var(--color-primary) !important;} 
.production-panel.frame-container::after { display: none; }
@media (max-width: 768px){
  .product-detail-modal.split-open .modal{top: 2vh; width: 92vw; transform: none;}
  .product-detail-modal.split-open .production-panel{width: 92vw; height: 46vh;}
}
.page-navigator .map-marker, .page-navigator .nav-controls, .page-navigator .filters{z-index: 100;}
.menu-open .nav-controls, .menu-open .map-marker, .menu-open .filters{pointer-events: none;}
.product-detail-modal.modal-container.modal_container--show{animation: fadeIn .25s ease;}
.page-project{padding-top: 0;}
@media (max-width: 768px){
  .page-project{padding-top: 0;}
}

/* Test responsive split modal */
@media (max-width: 991px) {
  .modal-button-control-mobile {
    display: flex; /* Appare solo su schermi piccoli */
  }

  .product-detail-modal.split-open .production-panel{ left: 0px !important;}
  /* 1. Abbassiamo la priorità della Finestra 1 (la modale principale) */
  .product-detail-modal .modal--transparent {
    z-index: 10 !important; /* Un numero basso */
    position: relative;     /* Necessario affinché z-index funzioni */
  }
  .product-detail-modal.split-open .modal--transparent {
    transform: none !important; 
    z-index: 10 !important;
  }



  /* 2. Alziamo la priorità della Finestra 2 (il pannello statistiche) */
  .production-panel {
    z-index: 9999 !important; /* Sempre sopra a tutto */
    position: fixed !important;
    
    /* DEFINIAMO I MARGINI RISPETTO ALLO SCHERMO */
    /* Modifica questi valori (es. 16px o 20px) per farli combaciare esattamente con la finestra sotto */
    top: 10px;    
    bottom: 10px; 
    left: 16px;   
    right: 16px;  
    
    /* Resettiamo width/height perché ora sono gestiti da left/right/top/bottom */
    width: auto !important; 
    height: auto !important;

    background-color: #fff;
    border-radius: 40px; /* Assicuriamo che abbia lo stesso stondamento delle altre finestre */
    
    /* Gestione contenuto */
    padding: 24px;
    padding-top: 60px; /* Spazio per il tasto chiudi */
    overflow-y: auto;  /* Se il contenuto è lungo, scorre dentro il riquadro */
    
    /* Animazione di entrata */
    transform: translateY(20px); 
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease-out;
    
    /* Ombra per staccarlo visivamente dallo sfondo se serve */
    box-shadow: 0 10px 40px rgba(0,0,0,0.2); 
  }

  .product-detail-modal.split-open .production-panel[aria-hidden="false"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }

}
.page-navigator .cover{padding:0;}
.page-navigator #map{min-height:100vh; width:100vw; max-width:100vw;}
.content-area{background: var(--color-primary); width: 100%; margin: 0; padding: 0; display: block; position: relative; z-index: 1;} 
.content-area .grid{width:100%; max-width: none; margin-left:0; margin-right:0; padding: 0 1rem;}
.page-glossario .content-area .grid, .page-contatti .content-area .grid{max-width: var(--max-width); margin-left:auto; margin-right:auto;}
@media (min-width: 1400px){.content-area{max-width: 100%;}}
@media (max-width: 768px){.content-area{padding: 0 16px;}}
.page-glossario .intro.grid, .page-contatti .intro.grid{justify-content: center;}
/* Single Post similar articles section */
#last-news{background: var(--color-primary); border-top: 1px solid var(--color-dark);}