:root {
  --logo_path: url(../img/effegifood.svg);

  --bg-body:#f8f8f8;

  --primary-500: #241f1a;
  --primary-400: #473d33;
  --primary-300: #7b6a58;
  --primary-200: #ac9c8b;
  --primary-100: #ece8e4;

  --grey-100: #e9eaec;
  --grey-200: #d2d4da;
  --grey-300: #b8bac1;
  --grey-400: #999aa1;
  --grey-500: #67696d;
  --grey-600: #525356;
  --grey-700: #333336;
  --grey-800: #1c1c1d;

  --black: var(--grey-800);
  --white: #ffffff;
  --text-color: var(--black);
  --success: #4da149;
  --error: #bb3b3d;
  --warning: #d78222;
  --success-light: #ddefdc;
  --error-light: #f6e4e4;
  --warning-light: #FAEEE0;

  --green:#7EA55C;
  --orange:#E9A11C;
  --red:#DF5865;
  --purple:#C379A2;
  --blue:#2EA1CB;
  --darkblue:#4679c8;

  --title-font: "Plus Jakarta Sans", sans-serif;
  --body-font: "Plus Jakarta Sans", sans-serif;

  --box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  --box-shadow-top: 0px -4px 4px rgba(0, 0, 0, 0.2);

  --swiper-theme-color:var(  --primary-500)
}

.menu > li > a {
 /* color: var(--text-color);*/
  font-weight: 500;
  text-decoration: none;
}

.menu > li > .menu {
  margin-left: var(--p1);
  margin-block: var(--p1);
  font-size: var(--14);
}

.menu > li.active > a {
  color: var(--primary-300);
  font-weight: 700;
}

.menu > li.active > [class^="button-"]{
  color: var(--primary-500);
    font-weight: 500;
    --bgColor: var(--primary-100);
    --borderColor: var(--primary-400);
}
.menu.bg-primary-100 > li.active > [class^="button-"]{
  color: var(--white);
    font-weight: 500;
    --bgColor: var(--grey-800);
    --borderColor: var(--grey-800);
}

.menu.list-arrow-menu {
  gap: 0;
  overflow:clip
}
.menu.list-arrow-menu a {
  display: flex;
  gap: var(--p1);
  align-items: center;
  position: relative;
  width: 100%;
  padding:.8rem;
  border-bottom: 1px solid var(--grey-100);
  font-size: var(--15);
  font-weight: 500;
}
.menu.list-arrow-menu a:after {
  content: "";
  display: block;
  position: absolute;
  right: 1rem;
  width: 1rem;
  height: 1rem;
  background: url(../images/icons/icon-arrow-right.svg) center center no-repeat;
  background-size: contain;
}

.menu.list-arrow-menu a:hover{background-color:var(--grey-100)}
.menu.list-arrow-menu li:last-child a{border:none}
.menu.list-arrow-menu > li.active a{    background: var(--grey-100);  pointer-events: none; color:var(--grey-800)}



@media screen and (min-width:64em){
  .menu.list-arrow-menu a {font-size:var(--12)}
}


@layer buttons{
button,
[class^="button-"] {
  font-size: var(--13);
  cursor: pointer;
  --borderColor: var(--primary-500);
  --borderWeight: 0px;
  --textColor: var(--white);
  --bgColor: var(--primary-500);
  --buttonSize: 2.5rem;
  --borderRadius: var(--p3);
  border-radius: var(--borderRadius);
  border-color: var(--borderColor);
  border-style: solid;
  border-width: var(--borderWeight);
  color: var(--textColor);
  background-color: var(--bgColor);
  padding: 0.5rem 1rem;
  line-height: 1;
  text-align: center;
  height: var(--buttonSize);
  min-width:var(--buttonSize);
  align-content: center;
}

@media screen and (max-width:40em){
  button,
[class^="button-"] {
  --buttonSize: 3.125rem;
  --iconSize:1.3rem
}
}

button:hover,
[class^="button-"]:hover {
  --bgColor: var(--primary-400);
}

button.x-small,
[class^="button-"].x-small {
  padding: 0.4rem 0.5rem;
  font-size: var(--10);
  --borderRadius: var(--p1);
  --buttonSize: 1rem;
  --iconSize: .8rem;
}

button.small,
[class^="button-"].small {
  padding: 0.4rem 0.7rem;
  font-size: var(--12);
  --borderRadius: var(--p2);
  --buttonSize: 2rem;
  line-height:1
}
button.medium,
[class^="button-"].medium {
  padding: 0.5rem 0.9rem;
  --buttonSize: 2.2rem;
}
button.large,
[class^="button-"].large {
  padding: 0.8rem 1.5rem;
  font-size: var(--15);
  --buttonSize: 2.8rem;
}

button.dark,
[class^="button-"].dark {
  --bgColor: var(--primary-500);
  --textColor: var(--white);
}
button.white,
[class^="button-"].white {
  --bgColor: var(--white);
  --textColor: var(--primary-500);
}
button.white:hover,
[class^="button-"].white:hover {
  --bgColor: var(--primary-500);
  --textColor: var(--white);
}

button.white:hover:after,
[class^="button-"].white:hover:after {
  filter:brightness(10)
}

button.transparent, [class^="button-"].transparent{--bgColor:transparent; --textColor: var(--primary-500); font-weight:600}
[class^="button-"].transparent:after {
  filter:none
}

[class^="button-"].transparent:hover {
  --bgColor:transparent !important
}

button.transparent:focus,[class^="button-"].transparent:focus{outline:0}

.hover-box-shadow{transition: box-shadow linear .2s}
.hover-box-shadow:hover{box-shadow:0 2px 6px  rgba(0,0,0,.1)}
.box-shadow{box-shadow:var(--box-shadow)}
.box-shadow-top{box-shadow:var(--box-shadow-top)}

[class^="button-"].button-outlined {
  --borderColor: var(--primary-400);
  --borderWeight: 1px;
  --textColor: var(--primary-400);
  --bgColor: transparent;
  font-weight: 500;
}
[class^="button-"].button-outlined:hover {
  --bgColor: var(--bg-body);
  --borderColor:var(--grey-300);
  --textColor: var(--primary-400);
}

.button-outlined.dark {
  --borderColor: var(--primary-500);
  --textColor: var(--primary-500);
}
.button-outlined.white {
  --borderColor: var(--grey-200);
  --textColor: var(--white);
  font-weight: 400;
}

.button-outlined.white:hover {
  --bgColor: var(--white);
  --borderColor: var(--grey-300);
  --textColor: var(--primary-500);
  font-weight: 400;
}

.button-outlined.white:hover:after{filter:none}



[class^="button-"].button-soft {
  --textColor: var(--grey-800);
  --bgColor: var(--primary-100);
  --borderColor: var(--primary-200);
  --borderWeight: 1px;
  font-weight: 500;
}
[class^="button-"].button-soft:hover {
  --textColor: var(--grey-800);
  --bgColor: transparent;
}
[class^="button-"].button-soft:hover:after {
  filter: brightness(0.6);
}

.button-soft.dark {
  --bgColor: var(--primary-200);
  --textColor: var(--primary-500);
  --borderColor: var(--primary-300);
}
.button-soft.dark:hover {
  --bgColor: var(--primary-100);
  --textColor: var(--primary-500);
  --borderColor: var(--primary-200);
}
.button-soft.white {
  --bgColor: var(--grey-100);
  --borderColor: var(--grey-200);
  --textColor: var(--grey-700);
}
.button-soft.white:hover {
  --bgColor: var(--white);
  --borderColor: var(--grey-200);
  --textColor: var(--grey-700);
}
.button-soft.white:after {
  filter: brightness(0.6);
}

[class^="button-"].button-icon-after {
  --iconSize: 1rem;
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
}
[class^="button-"].button-icon-after:after {
  content: "";
  width: var(--iconSize);
  height: var(--iconSize);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  display:inline-block
}


.container-button {container-type:inline-size; container-name:button; min-width:3rem}
@container button (width<6rem){
  .container-button :is(.button-icon-after, .button-icon-before){width: var(--buttonSize);
  height: var(--buttonSize);
  aspect-ratio: 1;
  padding: 0;
  --borderRadius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  gap: 0 !important;}

}

.button-icon-after:not(.button-soft, .button-outlined, .transparent):after {
  filter: saturate(0) brightness(8);
}
.button-icon-after.white:after {
  filter: brightness(1);
}
.button-icon-after:not(.button-soft, .button-outlined, .transparent).white:hover:after {
  filter: saturate(0) brightness(8);
}

.button-icon-after.large:after,
.button-icon-after.medium:after {
  --iconSize: 1rem;
}

[class^="button-"].button-icon-before {
  --iconSize: 1rem;
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  flex-direction: row-reverse;
}
[class^="button-"].button-icon-before:after {
  content: "";
  min-width: var(--iconSize);
  width: var(--iconSize);
  height: var(--iconSize);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  rotate:var(--rotation)
}
.button-icon-before:not(.button-soft, .button-outlined, .transparent):after {
  filter: saturate(0) brightness(8);
}
.button-icon-before.white:after {
  filter: brightness(1);
}
.button-icon-before.white:hover:after {
  filter: saturate(0) brightness(8);
}

.button-icon-before.large:after,
.button-icon-before.medium:after {
  --iconSize: 1rem;
}

[class^="button-"].button-circular {
  width: var(--buttonSize);
  height: var(--buttonSize);
  aspect-ratio: 1;
  padding: 0;
  --borderRadius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  background-color:var(--bgColor)
}
[class^="button-"].button-circular:after {
  content: "";
  display: block;
  width: var(--iconSize, 1rem);
  height:  var(--iconSize, 1rem);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.button-circular:not(.button-soft, .button-outlined, .white, .transparent):after {
  filter: saturate(0) brightness(10);
}
.button-circular.white{--bgColor:var(--white)}
@media screen and (width>22em){
.button-circular.label-visible{display:grid; gap:2px; text-align: center; font-size:10px; font-weight:600 !important; place-items:center}
.button-circular.label-visible:after {order:-1}
}

button[disabled] {
  opacity: 50%;
  pointer-events: none;
}

button.reset-style {
  padding: 0;
  background: none;
}
}
/* FORMS */
.code-input{aspect-ratio:1; font-size:var(--26); text-align:center; font-weight:800}
.input-group {  display: grid;  grid-template-areas: "stack";  justify-items:end;  --size:2.5rem;  align-items:center;}
.input-group > *{grid-area:stack}
.input-group > button{  --buttonSize: calc(var(--size) - 3px); margin-right:1px; position:relative;  }

.input-icon {  --size:2.5rem; position:relative;}
.input-group > input{padding-right:3rem}

.input-icon > input{padding-left:var(--size)}
.input-icon:after{content:""; width:var(--size); height:var(--size); background-position:center center; background-repeat: no-repeat; background-size:1rem; top:0; left:0; position:absolute}


fieldset.tableset {
border:0;
  border-radius: var(--p1);
  background:var(--bg-body)
}
fieldset.tableset > label {
  --borderColor: var(--grey-200);
  padding: var(--p2);
  display: flex;
  gap: var(--p1);
  --text-color: var(--grey-500);
  border:1px solid var(--borderColor);
  border-bottom:0
}

fieldset.tableset > label :is(input[type="radio"], input[type="checkbox"]){    flex: 0 1 16px;}
fieldset.tableset > label .auto{flex:1 1 0px}

fieldset.tableset > label:last-child {
  border-bottom: 1px solid var(--borderColor);
}
fieldset.tableset > label p:not(:last-child) {
  line-height: 1.1;
  margin-bottom: var(--p1);
}
fieldset.tableset > label:first-child {
  border-radius: var(--p1) var(--p1) 0 0;
}
fieldset.tableset > label:last-child {
  border-radius: 0 0 var(--p1) var(--p1);
}
fieldset.tableset label:has(*:checked) {
  background: var(--white);
  --borderColor: var(--grey-400);
  border: 1px solid var(--borderColor);
 --text-color: var(--grey-300);
}

fieldset.tableset > label:first-child:last-child {
    border-radius: var(--p1);
}

fieldset.tableset label:has(*:checked) + label:has(*:checked){
 border-top:1px solid transparent;
}



fieldset.tableset.horizontal{
display:flex;
gap:0
}

fieldset.tableset.horizontal > label{width:max-content;   border-bottom:1px solid var(--borderColor); border-right:0}
fieldset.tableset.horizontal > label:last-child {  border-right: 1px solid var(--borderColor);border-radius: 0  var(--p1) var(--p1) 0;}
fieldset.tableset.horizontal > label:first-child {  border-radius: var(--p1) 0 0 var(--p1);}



/*avatar */

:where(a:hover, button:hover) .comp-avatar {
  transition: linear 0.1s;
  --outline-color: var(--grey-300);
}
@media screen and (max-width:39.9375em){

  .comp-avatar{width:var(--50); height:var(--50)}

}

/* PAGINATION */
.pagination {
  font-size: var(--14);
}
.pagination .disabled,
.pagination .disabled *,
.pagination .disabled *:hover {
  cursor: default;
  opacity: 0;
}

.pagination ul li:hover a * {
  color: var(--primary-500);
  --bgColor: var(--bg-body);

}

.pagination ul li span {
  --size: var(--40);
  --borderColor: transparent;
  width: var(--size);
  height: var(--size);
  display: block;
  background:var(--bgColor);
  align-content: center;
  text-align: center;
  border-radius: 50%;
  transition: linear 0.15s;
}

.pagination ul li.current span{
  color: var(--white);
  --bgColor: var(--primary-200);

}

/* nascondi se troppi rercord */
.pagination ul:has(:nth-child(5)) li{display:none}
.pagination ul:has(:nth-child(5)) li { align-items: baseline;}
.pagination ul:has(:nth-child(5)) li:first-child, .pagination ul:has(:nth-child(5)) li:last-child{display:block}
.pagination ul:has(:nth-child(5)) .current {display:block}
.pagination ul:has(:nth-child(5)) .current + li {
 display:block;
}
.pagination ul:has(:nth-child(5)) .current + li  + li{
display: flex; 
}

.pagination ul:has(:nth-child(5)) li:not(.current):has(+ .current) {
  display:block;
}

.pagination ul:has(:nth-child(5)) li:not(.current):has(+ li + .current) {
display: flex; 
}
.pagination ul:has(:nth-child(5)) li:not(.current):has(+ li + .current):not(:first-child):before{content:"..."; display:inline-block; margin-right:16px}

.pagination ul:has(:nth-child(5)) .current + li  + li:not(:last-child):after{content:"..."; display:inline-block; margin-left:16px}
.pagination ul:has(:nth-child(5)) li:nth-child(2):before{display:none}
.pagination ul:has(:nth-child(5)) li:nth-last-child(-n + 2):after{display:none !important}



/* NOTICE BANNER */
#notice-wrapper{ position: fixed;  width: max-content;  height: max-content;  max-width:22rem;   inset: var(--p1) var(--p1) 0 auto; transition:linear .2s all; display:flex; gap:.5rem;z-index:9999; flex-direction:column}

.notice-banner{flex:1; --bgColor: var(--grey-200); --borderColor:var(--grey-600);   background: var(--grey-800);  padding: var(--p1);  border-radius: var(--p2);  box-shadow: var(--box-shadow);  font-size: var(--13); font-weight:500; color:var(--white);  display: flex;  gap: .8rem;  align-items: center;  }
.notice-banner .message{flex:1}
.notice-banner i{background:var(--borderColor)}

.notice-banner.success{--bgColor: var(--success-light); --borderColor:var(--success)}
.notice-banner.error{--bgColor: var(--error-light); --borderColor:var(--error)}
.notice-banner.waring{--bgColor: var(--warning-light); --borderColor:var(--warning)}

@media screen and (max-width:39.9375em){
  #notice-wrapper{width:100%;  max-width:calc(100% - var(--p2)); inset: var(--p1)var(--p1)  var(--dock-height, var(--p1)) auto   ; flex-direction:column}
}

/* HEADER FOOTER */
.fixed-header{ width:100%;  background:var(--bg-body); z-index:5555; box-shadow: 0 0 3px rgba(0, 0, 0, .1);  transition: ease 0.2s; }
.fixed-header.stucked{border-bottom: 1px solid var(--grey-100); top:0 !important}
#upper-header{width:100%; top:0; z-index:5555;transition: ease 0.2s; }


/*
.logo{aspect-ratio:2.5; width:clamp(5rem,5vw, 10rem);  display:block; background:url(../images/effigifood.svg) left center no-repeat; background-size:contain; font-size:0} */
.logo{aspect-ratio:2; width:clamp(6rem,4.5vw, 10rem);  display:block; background:url(../images/effigifood.svg) left center no-repeat; background-size:contain; font-size:0}
@media screen and (max-width:63.9375em){
.fixed-header .header-content{padding-block:1rem}
}

@media screen and (width>64em){
.header-content-grid{display:grid; grid-template-columns:1fr auto 1fr}
.header-content-grid >:last-child{justify-self:end}
}
#profile-menu{overflow-y:clip;}
.profile-menu-content{display: flex;      flex-direction: column;      height: 100%;      gap: var(--p2);      max-height: calc(100vh - 8rem);}
.profile-menu-content .menu-list-container{flex: 1 1 auto;  overflow-y: auto;  min-height: 0px;     align-content: flex-start;}

@media screen and (min-width:40em){
  #profile-menu{width:min(25rem, 100vw)}
 
}
#docker{z-index:6999;    border-top: 1px solid var(--grey-100);box-shadow: 0 -1px 3px rgba(0, 0, 0, .1);}
#docker ul li :is(a:focus-visible, a:visited, a:hover){--bgColor:transparent}
#docker ul li :is(a:focus-visible, a:visited, a:hover):after{filter:none;}
#docker ul li a:hover{--textColor:var(--text-color)}
#docker ul li a.active{font-size:0;     --bgColor: var(--grey-800);}
#docker ul li a.active:after{ filter: saturate(0) brightness(10);}
/*main{margin-top:calc(var(--mainHeader-height,0) + var(--upperHeader-height,0)); }*/
@media screen and (max-width:24em){
#docker > .px-2{padding-inline:4px}
#docker  .menu{gap:8px}
}

@media screen and (max-width:40em){
footer.main-footer{padding-bottom:4.5rem}
}

.main-footer .section-break{break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;}

@media screen and (max-width:64em){
.search-dropdown-wrapper:has([open]){position:fixed;top:0; transition:linear .2s translate;    left:0; right:0; width:100vw; height:100vh;   overflow-y: auto;    overflow-x: clip;    padding-inline: .5rem;}
 .search-dropdown-wrapper [data-dropdown-content]{max-height:calc(100dvh - 58px); height:100dvh}
 .search-dropdown-wrapper [data-dropdown-content] .add-to-cart-overlay{height:100svh}
 .search-dropdown-wrapper [data-open-dropdown][open]{margin-top:1rem; border-radius:0}
 .search-dropdown-wrapper[data-dropdown-content]{inset:0 !important}

 header:not(.stucked) .search-dropdown-wrapper:has([open]){top:calc(var(--upperHeader-height) * -1);}
 header:not(.stucked) [data-dropdown-content] .add-to-cart-overlay{top: -2rem;  }
 header:not(.stucked) .search-dropdown-wrapper .overlay-content{padding-bottom:2.5rem}

  #profile-menu {width:100vw; inset: 0px -8px 0px auto !important}
  .profile-menu-content{height:calc(100dvh - 8.5rem); }
}


/* ECOMMERCE */


/* LOGIN REGISTER SLIDER */

.login-register .slider-bullet{background:var(--grey-100); height:.7rem; width:.7rem; border-radius:.7rem; display:block; transition:all linear .2s; cursor:pointer}
.login-register  .swiper-pagination { display:flex; gap:var(--p1); flex-wrap:wrap; justify-content:right; padding:var(--p4) var(--p2) var(--p2) var(--p2);  --swiper-pagination-bottom:0} 
.login-register .slider-bullet:hover{background:var(--grey-200)}
.login-register  .slider-bullet.active{width:2rem;background:var(--white);}

.login-register .slide-content{max-width:35rem;}
.login-register  #register > *{max-width:30em}
@media screen and (width>63.9375em){
.slider-container{
    max-width: calc(((100vw - var(--max-width)) / 2 ) + (var(--max-width) / 1.5));
}
}
@media screen and (max-width:63.9375em)
{
  .login-register .slide-content{text-align:center;  max-width:revert; padding:0 var(--20)}
  .login-register .slide-content > div{padding-block:var(--p4) var(--p8); border-radius: var(--30) var(--30) 0 0;  padding-inline:var(--30);background:white; color:var(--grey-800)}
  .login-register  .swiper-pagination{ justify-content:center}
   .login-register .slide-content .checklist{ justify-items:center}
      .login-register .slide-content .checklist li:not(.show-for-medium){display:inline-block; width:100%}
  .login-register .slider-bullet{background:var(--grey-300)}
.login-register  .slider-bullet.active{background:var(--grey-800);}
.login-register  #register{ justify-content:center}

  .login-register .slide-content :is(.font-50, .font-40){font-size:var(--30);}
    .login-register .slide-content .font-28{font-size:var(--20)}
  

}
/* HERO SLIDER */
.hero-slider{height:max(420px,40vh);   min-height:fit-content; width:100%;     overflow-x: visible;  overflow-y: clip;--swiper-scrollbar-size:40px; --swiper-navigation-color:var(--primary-500)}
  .hero-slider .slide-content{max-width:min(50vw, 60em);grid-template-rows: 1fr auto;
    align-items: center; }
.hero-slider .slider-bullet{background:var(--grey-300); height:.7rem; width:.7rem; border-radius:.7rem; display:block; transition:all linear .2s; cursor:pointer}
.hero-slider .slider-bullet:hover{background:var(--grey-500)}
.hero-slider .slider-bullet.active{width:2rem;background:var(--grey-800);}
.hero-slider .swiper-pagination { position:relative; margin-top:var(--p4); display:flex; gap:var(--p1); flex-wrap:wrap; padding-inline:1rem} 
.hero-slider .swiper-button-next{width:2.5rem;  height: 2.5rem;  background: white;  border-radius: 50%; --swiper-navigation-size:var(--13); translate:0 -50%;    box-shadow: var(--box-shadow);}
.hero-slider .swiper-button-next:hover{background:var(--grey-100)}

 .team-slider .swiper-button-next{--swiper-navigation-color: white;width:2.5rem;  height: 2.5rem;  background:var(--grey-800);  border-radius: 50%; --swiper-navigation-size:var(--13);  box-shadow: var(--box-shadow);}
.team-slider .swiper-button-next:hover{background:var(--grey-700)}
 .team-slider .swiper-button-prev{--swiper-navigation-color: white;width:2.5rem;  height: 2.5rem;  background:var(--grey-800);  border-radius: 50%; --swiper-navigation-size:var(--13);     box-shadow: var(--box-shadow);}
.team-slider .swiper-button-prev:hover{background:var(--grey-700)}

@media screen and (max-width:60em){
  .hero-slider{ height:auto; min-height:fit-content}
  .hero-slider *{min-height:fit-content;}
  .hero-slider .swiper-slide{height:auto}
  
  .hero-slider .slide-content{gap:.5rem; padding-inline:1rem; min-height:fit-content; max-width:100%;     --gradient-from-pos: 10%;
    --gradient-to-pos: 110%;}
  .hero-slider .slide-title{font-size:var(--35); line-height:1.2}
  .hero-slider .slide-subtitle{font-size:var(--15); max-width:60vw}
  .hero-slider a{--buttonSize:2.5rem}
}

@media screen and (max-width:39em){
   .hero-slider .slide-title,    .hero-slider .slide-title > *{font-size:var(--28); line-height:1.2}
    .hero-slider{ height:auto;}
}

/* PRODUCT */
.single-product{display:flex; flex-direction:column;     min-width: var(--grid-min-col-size,14rem); position:relative }
.single-product .product-content{ display:flex; flex-direction:column; flex:1}
.single-product .product-info{flex:1;}
.single-product a.product-title:hover{text-decoration: underline;    text-decoration-thickness: 1px;    text-underline-offset: 2px;}
.single-product .product-quantity-group{display:flex; align-items:center}
.single-product .label-container{max-width:calc(100% - 3.5rem)}
.single-product figure{height:100%}
[data-wishlist-button][saved]:after{background-image:url(../images/icons/icon-heart-o.svg)}
[data-wishlist-button][saved]{--bgColor:var(--primary-100)}

.single-product .product-bulkDiscount .bulk-text{display:none}
.add-to-cart-overlay {background:rgb(from var(--black) r g b / 0.7); display:none; opacity:0; position:fixed; inset:0; z-index:6666; height:calc(100dvh - var(--dock-height, 0))}
.add-to-cart-overlay .overlay-content{bottom:0; box-shadow:0 -4px 5px rgba(0,0,0,.1);}
.single-product .add-to-cart-action {display: grid; gap:var(--p1); }

/* add to cart */
.upper-number{    align-content: center;
  translate: 25% -25%;
  position: absolute;
  top: 0;
  right: 0;
  height: 1.3rem;
  width: fit-content;
  padding-inline: 2px;
  min-width: 1.3rem;
  border-radius: var(--p2);
  font-size: .6rem;
  border: 2px solid white;}
.add-to-cart-button{  flex: 1 1 auto;text-align:right}
.add-to-cart-button > div {container-type: inline-size; container-name:cartButton}
.add-to-cart-button :is(button,a){width:100%;}
.loop-product-add-to-cart {  display: flex;  gap: var(--p1);  align-items: center;  justify-content:space-between; }
.loop-product-add-to-cart .product-quantity-group{display:flex; align-items: center;}
.loop-product-add-to-cart input {  width: 3ch;  text-align: center;  border: 0;background:transparent}
.loop-product-add-to-cart span{    white-space: nowrap;}

@container cartButton (width < 180px) {
  .loop-product-add-to-cart  :is(button,a) span{display:none}

}
@container  cartButton (width < 120px) {
  .loop-product-add-to-cart  :is(button,a){ width: var(--buttonSize);    height: var(--buttonSize);aspect-ratio: 1;    padding: 0;--borderRadius: 50% !important;    display: inline-flex; align-items: center;   justify-content: center;    font-size: 0; gap:0; flex: 0 0 0}

}
@media screen and (max-width:40em){
  .single-product > .add-to-cart-action .loop-product-add-to-cart :is(button, a){ --buttonSize:var(--50) !important; font-size:0; gap:0; --iconSize:1.3rem}
  .loop-product-add-to-cart input{width:3ch; font-size:var(--14)}
  .single-product > .add-to-cart-action{   grid-template-columns: auto var(--50);  align-items: center;} 
  .single-product > .add-to-cart-action .product-quantity-group{display:none}
  .single-product{ --borderRadiusBR:var(--p4) ; --borderRadiusBL:var(--p1)}

  
}
.ck-editor__editable :is(p, ul , ol, h2, h3, h4, h5, h6):not(:last-child){margin-bottom:1rem}
.ck-editor__editable :is(a){text-decoration:underline; text-underline-offset: .4ch; font-weight:500}
:is(#archive-description, section#brand, details, .formatted-text) :is(p, ul , ol, h2, h3, h4, h5, h6):not(:last-child){margin-bottom:1rem}

:is(#archive-description, section#brand, .formatted-text) ul  {
  padding-left: 0;
  padding-top:1rem
}
:is(#archive-description, section#brand, .formatted-text) ul li {
  list-style: none;
    padding-left: 1.5rem;
    position: relative;
    margin-bottom:1rem

}
:is(#archive-description, section#brand, .formatted-text) ul li:last-child{margin-bottom:0}
:is(#archive-description, section#brand, .formatted-text) ul li:before {
     content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 1rem;
    height:1rem;
    min-width:1rem;
    min-height:1rem;
    background:url(../images/icons/checklist.svg) center center no-repeat;
    background-size: contain;
}
.formatted-text :where(p,ul,ol) + :is(h2,h3,h4,h5,h6){margin-top:2.5ch}
.formatted-text h1{font-size:var(--30)}
.formatted-text h2{font-size:var(--26)}
.formatted-text h3{font-size:var(--22)}
.formatted-text h4{font-size:var(--20)}
.formatted-text h5{font-size:var(--19)}
.formatted-text :is(ul, ol, p){max-width:75ch}

#descrizione .description-item .testo-html{color:var(--grey-700); font-size: var(--16);  line-height: 1.6;}
#descrizione .description-item:not(:last-child){padding-bottom:var(--p5); border-bottom:1px solid var(--grey-100); margin-bottom:var(--p5)}
#descrizione  :is(p, ul , ol, h2, h3, h4, h5, h6):not(:first-child){margin-top:2ex; }
#descrizione p{max-width: 57ch;    text-wrap: pretty;}
#descrizione :is(b, strong){font-weight:600}

#hero-slider-wrapper .slide-subtitle{
  ul{padding-left:0}
  li {
  list-style: none;
  margin-bottom: var(--p1);
  display:flex;
}
li:last-child{margin-bottom:0}
 li:before {
  content: "";
  display: inline-block;
  margin-right: 0.5rem;
  width: 1rem;
  height: 1rem;
    min-width:1rem;
    min-height:1rem;
  background: url(../images/icons/checklist.svg) center center no-repeat;
  background-size: contain;
  translate: 0 0.4ex;
}

}

@media screen and (width<63.9375em){
.brand-image-single-product{max-height:65vw}
}
@media screen and (width>64em) and (width < 89.9375em){
.brand-image-single-product{max-height:40vw}
}
@media screen and (width > 90em){
  .brand-image-single-product{max-height:30vw}
}


/* ARCHIVE */
.archive-product aside.stucked {height: auto !Important;border-bottom: 1px solid var(--grey-100)}
@media screen and (max-width:40em){
.archive-product aside.stucked .product-count{display:none}

}
/* PRODUCT LIST */
.product-list .bio-label{line-height:2.4ch;     translate: 0 -.25ch}

/* default product list */
.product-list-wrapper  .product-list{

    --grid-max-col-count:5;
    --grid-min-col-size: 14rem;
    --grid-gap:var(--p1);
    /* calculation*/
    --grid-col-size-calc: calc((100% - var(--grid-gap) * (var(--grid-max-col-count) - 1)) / var(--grid-max-col-count));
    --grid-col-min-size-calc: min(max(var(--grid-min-col-size), var(--grid-col-size-calc)), 100%);

    display:grid;
    grid-auto-flow:dense;
    gap:var(--p2) var(--grid-gap);
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-col-min-size-calc), 1fr) );

}

.product-list-wrapper > button{opacity:0}

.product-list:not(.product-layout-full ) .single-product > .product-content .product-bulkDiscount > ul > li:nth-child(n+2) {display:none}
.product-list:not(.product-layout-full ) .single-product > .product-content .product-bulkDiscount .bulk-text{display:block}
.product-list.product-layout-full .product-title > *{margin-bottom:var(--p2); font-size: var(--15);}

@media screen and (max-width:40em){  
.product-list .single-product > .product-content .product-bulkDiscount > ul > li:nth-child(n+2) {display:none}
.product-list .single-product > .product-content .product-bulkDiscount .bulk-text{display:block}
.product-list-wrapper > .product-list {  --grid-max-col-count:2;--grid-min-col-size: 11rem;}
}

.product-list .banner{grid-column:span 2}
@media screen and (max-width:43.9375em){ 
  .product-list .banner{grid-column:1 / -1}
 #main-loop-results.product-list li.col-span-2{grid-column:1 / -1}

 }






 /* mobile small horizontal if not so small */
@media screen and (min-width:19em) and (max-width:23.45em){
  .product-list-wrapper > .product-list :not(.featured) .single-product{display:grid; grid-template-columns: clamp(100px, 30%, 300px) auto; }
  .product-list-wrapper > .product-list :not(.featured)  .single-product .add-to-cart-action{grid-column: span 2}
  .product-list-wrapper > .product-list :not(.featured)  .single-product figure {height:100%; }
  .product-list-wrapper > .product-list :not(.featured)  .single-product figure img {aspect-ratio: initial;}
  .product-list-wrapper > .product-list :not(.featured)  .single-product .product-info :is(.product-title,.expire-date){max-width:calc(100% - 3.5rem); display:block}
  .single-product .label-container{max-width:100%}
}

 /* PRODUCT LIST SINGLE ROW */
 @media screen and (min-width:40em){
 .product-list-wrapper > .product-list.show-single-row{ --grid-min-col-size: 15rem;}
 }
 @media screen and (min-width:74.2em){
  .product-list-wrapper > .product-list.show-single-row{ grid-template-rows: 1fr 0 0 0 0 0; gap:0 var(--p1); overflow-y:clip; --grid-max-col-count: 6;}
}


/* product list with scrollbar */
.product-list-wrapper .overflow-x-auto .product-list{display:flex; padding:0; flex-direction:row; gap:var(--p1); } 
.product-list-wrapper .overflow-x-auto .product-list > li{flex: 1 1 0px;max-width:min(25rem, 100%)}
.product-list-wrapper .overflow-x-auto .product-list > li > *{min-width:max(var(--grid-min-col-size),calc((var(--max-width)/ var(--grid-max-col-count)) - (var(--p1) * (var(--grid-max-col-count) - 1)))); max-width:min(25rem, 100%); height:100%}
.product-list-wrapper .overflow-x-auto .product-list .order-0{margin-left:var(--p1)}
@media screen and (min-width:64em){ 
  .product-list-wrapper .overflow-x-auto {margin-right:var(--p1)}
 }

@media (pointer: fine) {
  /* Handle not touch device */
  .product-list-wrapper .overflow-x-auto::-webkit-scrollbar {  width: 6px;  height:6px}
  .product-list-wrapper .overflow-x-auto::-webkit-scrollbar-track {  background-color: transparent;  border-radius: 100px;}
  .product-list-wrapper .overflow-x-auto::-webkit-scrollbar-thumb {  border-radius: 100px;    background-clip: content-box;  background-color: var(--primary-400);}

  }
  
@media screen and (max-width:39.9375em){
  .product-list-wrapper .overflow-x-auto .product-list {--grid-max-col-count: 1.75;}
}

/* product horizontal */
@media screen and (min-width:20em){
.product-layout-horizontal .single-product{display:grid; grid-template-columns: clamp(100px, 30%, 300px) auto;}
.product-layout-horizontal .single-product .product-image{    grid-row: 1 / 2;}
.product-layout-horizontal .single-product figure {height:100%}
.product-layout-horizontal .single-product figure img {aspect-ratio: initial;object-position: 0 1rem;}
.product-layout-horizontal .single-product .product-info .product-title{max-width:calc(100% - 3.5rem); display:block}
.product-layout-horizontal .single-product{grid-template-columns: clamp(118px, 20%, 300px) auto;--borderRadiusBL: var(--p2);}
.product-layout-horizontal .single-product .label-container{max-width:100%}
.product-list-wrapper > .product-list.product-layout-horizontal  { --grid-min-col-size: 18rem; --grid-max-col-count:3 }
 .product-layout-horizontal .single-product .add-to-cart-action{  grid-column: 1 / -1;}

@media screen and (min-width:40em){
  .product-layout-horizontal .single-product .add-to-cart-action {margin-top:.5rem; align-content: end;  gap:0.5rem  }  
  }
}


/* product horizontal minimal */
@media screen and (min-width:20em){
  .product-layout-horizontal-minimal{gap:var(--p2); display:grid}
.product-layout-horizontal-minimal .single-product{display:grid;  grid-template-columns: clamp(118px, 20%, 300px) 1fr auto; --borderRadiusBL: var(--p2);}
.product-layout-horizontal-minimal .single-product figure {height:100%}
.product-layout-horizontal-minimal .single-product > .product-image figure img {aspect-ratio: initial;}
.product-layout-horizontal-minimal .single-product .label-container{max-width:100%}



@media screen and (min-width:40em){
  .product-layout-horizontal-minimal .single-product .add-to-cart-action {margin-top:.5rem; align-content: end;  gap:0.5rem  }  
  }
}

/* PRODUCT FULL */

.product-list.product-layout-full .single-product .product-image .bottom-0{bottom:var(--p1)}
@media screen and (min-width:20em){

.product-list.product-layout-full{grid-template-columns:1fr;}
.product-list.product-layout-full  .product-image{grid-row: span 2;}
.product-list.product-layout-full .single-product{display:grid; grid-template-columns: clamp(100px, 30%, 300px) auto;  --borderRadiusBL: var(--p2); column-gap:var(--p2)}
.product-list.product-layout-full .single-product figure {height:100%}
.product-list.product-layout-full .single-product .product-info .product-title{max-width:calc(100% - 3.5rem); display:block; font-size:var(--18)}
.product-list.product-layout-full .single-product  .label-container{max-width:100%}
}

@media screen and (max-width:58.6375em){
.product-list.product-layout-full .banner{grid-column:1 / -1}
    .product-list.product-layout-full  .col-span-2{grid-column:span 1}
}

@media screen and (min-width:58.6375em){

  .product-list.product-layout-full{grid-template-columns: repeat(2,1fr); }
  .product-list.product-layout-full > :not(.banner) {grid-column:span 2}
 /* .product-list.product-layout-full > .featured {grid-column: 1  / -1}*/

 .product-list.product-layout-full .banner-image{--minHeight:0}
  .product-list.product-layout-full .banner-content {    min-height: 0;    padding-block: var(--p2);    background: var(--primary-500);}
    .product-list.product-layout-full .banner-image .absolute{display:none}
}

.product-list:not(.product-layout-full) li:not(.featured) .single-product .product-info .brand-name{display:none}

@media screen and (min-width:50em){
.product-list.product-layout-full .single-product{grid-template-rows: auto minmax(80px, 1fr);--borderRadiusBL: var(--p2);}
.product-list.product-layout-full .single-product .product-info{display: grid;    grid-template-columns:auto clamp(170px, 33%, 470px);    gap: 0 var(--p2);    align-content: start;}
.product-list.product-layout-full .single-product .product-info .brand-name{grid-column: span 2;}
.product-list.product-layout-full .single-product .product-title{grid-column: span 2;}
.product-list.product-layout-full .single-product .product-description{grid-row: span 3; display:block !important}
.product-list.product-layout-full .single-product .price-suggested{ display:block !important}
.product-list.product-layout-full .single-product :is(.product-price, .product-size){grid-column: 2 / -2;}
.product-list.product-layout-full .single-product .add-to-cart-action{display: grid;    grid-template-columns:auto clamp(170px, 33%, 470px); grid-column:revert; align-items: end;}
.product-list.product-layout-full .single-product .add-to-cart-action .loop-product-add-to-cart, .product-list.product-layout-full  .single-product .stock-status {grid-column: 2;}
  
}


/* PRODUCT MINIMAL */

.product-list-wrapper.product-layout-minimal  .product-list{  --grid-max-col-count:6; }
.product-list.product-layout-minimal :is(.product-size,.add-to-cart-action,.product-bulkDiscount,.productPromoInfo){ display:none}
.product-list.product-layout-minimal .product-title >*{margin-bottom:0}
.product-list.product-layout-minimal .product-price {margin-bottom:var(--p1)}
.product-list.product-layout-minimal  .single-product{--borderRadiusBL: var(--p1); --borderRadiusBR: var(--p1);}
.product-list.product-layout-minimal  .single-product figure img{aspect-ratio:1.56}


/* PRODUCT FEATURED */
.featured .single-product figure img{object-fit:cover; aspect-ratio:1.56; height:100%}
.product-list:not(.product-layout-full) .featured .single-product .product-info{display:grid; align-content:center; margin-bottom:var(--p1)}
.product-list:not(.product-layout-full) .featured .single-product .product-title >*{font-size:var(--16); padding-right:50px; --lineN: 3;}
.product-list:not(.product-layout-full) .featured .single-product .product-description {display:block !important; order:4; margin-top:var(--p2); }
.product-list:not(.product-layout-full) .featured .single-product .product-description >  .short-description {display:none}
.product-list:not(.product-layout-full) .featured .single-product .product-description .checklist :nth-child(n+4) {display:none}
.product-list:not(.product-layout-full) .featured .single-product .product-image .absolute.bottom-0{bottom:var(--p1)}
@media screen and (min-width:40em){

 .product-list:not(.product-layout-full)  .featured .single-product { display: grid;   grid-template-columns:1fr 1fr; grid-template-rows: minmax(80px, 1fr) auto;   gap: 0 var(--p2); --borderRadiusBL:var(--p2) }
  .product-list:not(.product-layout-full) .featured .single-product .product-image{grid-row: span 2;}
  .product-list:not(.product-layout-full) .featured .single-product  figure {height:100%}
 }
 

 .featured {grid-column:1 / -1}

 @media screen and (min-width:58.6375em){
   .featured {grid-column:span 2}
}


.tooltip-container{anchor-scope: --tooltip-product;}
.tooltip-container i{ anchor-name: --tooltip-product;}
.tooltip-container .tooltip{ position: absolute;   position-anchor: --tooltip-product;  position-try: 
    top,    bottom,    left,    right; background-color: var(--grey-800);    box-shadow: var(--box-shadow);    border: none;
    color: #fff;
    padding: var(--p1) var(--p2);
    font-size: var(--12);
    z-index: 1000;
    line-height: 1.4;
    text-align: center;
    border-radius: .4rem;
      width: max-content;
    translate: -10% 50%;
    left: anchor(right);
    bottom: anchor(center);
 opacity:0; pointer-events:none; transition: all ease .2s }
 .tooltip-container i:hover + .tooltip{opacity:1; translate:10px 50%;}
 .tooltip-container .tooltip::before{ content: "";

     border-width: 8px;
      border-style: solid;
      border-color: transparent  var(--grey-800) transparent transparent;
       top: 9px;
    left: -14px;
    position: absolute;}



/* BANNER */
.banner-image{--minHeight:min(max(400px,40vh),45vw); min-height:var(--minHeight); min-width:min(180px, 100%);  container-type:inline-size; container-name:bannerContent;}
.banner-image > div { --borderRadiusBR: var(--p4); transition:box-shadow linear .2s}
.banner-image .banner-content{min-height:var(--minHeight);     padding-top: 60%;}

@media screen and (24em > width < 40em){
.swiper .banner-image .banner-content{padding-top:100%; --gradient-to-pos:65%}
}
.banner-image:has(a:hover) > div {box-shadow: 0 0 4px 1px rgba(0,0,0,.1)}
@media screen and (min-width:40em){.product-list .banner-image{height:100%;--minHeight:300px}.product-list .banner-image .banner-content{ padding-top:var(--p2); }}


.banner-image .banner-content .button-circular.absolute{display:none}

@container bannerContent (width<13em){
  .banner-image .banner-content .text{display:none}
}

@container bannerContent (width<30em){
.banner-image > div{--borderRadiusBR: var(--p2); --borderRadiusTR: var(--p4);} 
.banner-image .banner-content .button-circular.absolute{display:inline-flex; --buttonSize:3.125rem}
.banner-image .banner-content .main-button{display:none}
  
}


/* SINGLE PRODUCT PAGE */
@media screen and (min-width:85em){
.product-summary{   grid-template-columns: auto clamp(300px, 20vw,400px);  grid-template-rows: repeat(3, auto); --xgap:var(--p3)}
.product-price-container{grid-column: 2 / -2;  grid-row: 1 / -1;}
.price-card{ padding: 1rem;  border-radius: 1rem; background-color:white; border:1px solid var(--grey-200)}
}

.product-summary .change-price br{display:none}
.single-product-gallery {z-index:0; position:relative}
.single-product-gallery .swiper-slide{height:auto}
.single-product-page .product-navigation{opacity:0; transition:linear .1s; visibility:hidden }
.single-product-page .product-navigation.stucked{opacity:1;border-bottom:1px solid var(--grey-100); box-shadow:0 0 4px rgba(0,0,0,.1); visibility:visible}

.single-product-gallery .swiper-button-next{width: 50px;  height: 50px;  color:white;background: var(--grey-800);  border-radius: 50%; --swiper-navigation-size:var(--16); translate:0 -50%;    box-shadow: var(--box-shadow);}
.single-product-gallery .swiper-button-next:hover{background:var(--primary-500)}

@media screen and (max-width:39.9375em){
 .single-product-page .product-summary .loop-product-add-to-cart{position: fixed;    bottom: var(--dock-height);    width: 100%;    left: 0;    right: 0;    z-index: 999;
    background: white;    padding: 1rem; border-top:1px solid var(--grey-100)}
}

@media screen and (width<63.9375em){
  #valori-nutrizionali ul li:last-child{border-bottom:0}
  .single-product-gallery figure{background:white}
  .single-product-gallery figure img.thumbnail{object-fit:contain; }
  .single-product-gallery figure img{aspect-ratio:1.4; object-position: center; width: 100%;}
}
.product-short-description  > div p:not(:last-child){margin-bottom:1rem}

/* CHECKOUT */
fieldset.shipping-options-set label .details-button{display:none;}
@media screen and (max-width:64em){
fieldset.shipping-options-set label:has(*:checked) .details-button{display:inline-block}
}


.order-product-details .single-product{display:revert; min-width:initial}
  @media screen and (width < 40em){
   .order-product-details :is(table, tbody) {display:block}
  .order-product-details tr{display:grid; grid-template-columns:80px 4rem 4rem  1fr; gap:0}
  .order-product-details td{padding-inline:0}
  .order-product-details .item-description{grid-column:span 3}
  .order-product-details td.item-add-to-cart{width:auto}
      .order-product-details .shipping-date{grid-column:2 / -1}
    .order-product-details .item-qt{grid-column:2}
         .order-product-details  .loop-product-add-to-cart{ justify-content: end;}  

  }

  @media screen and (width < 28em){
    
       .order-product-details td.item-add-to-cart{grid-column:span 4}

  }

.last-buy-card-table tr:nth-child(n + 7){display:none}
.last-buy-card-table tr:nth-child(6){border-bottom:0}
.last-order-table tr:nth-child(n + 10){display:none}
.last-order-table tr:nth-child(9){border-bottom:0}
    @media screen and (width < 64em){
  .last-buy-card-table tr{display:grid; grid-template-columns:60px auto 50px; gap:0}
   .last-buy-card-table tr .last-product{grid-column:2 / 3; }

    .last-buy-card-table tr .last-date{grid-column:2 / 3; grid-row:2; }
        .last-buy-card-table tr .last-date p{display:inline-block}
     .last-buy-card-table tr .last-action{grid-column:3; grid-row:1 / 3; align-content:center}
    }
  /* FAQ */
  
@media screen and (width<63.9375em){

.faq-menu{
  gap: 0;
  overflow:clip;
  border-radius:var(--p1);
  border:1px solid var(--grey-100);
  background:white;
}
.faq-menu a {
  display: flex;
  gap: var(--p1);
  align-items: center;
  position: relative;
  width: 100%;
  padding:1rem;
  border-bottom: 1px solid var(--grey-100);
  font-size: var(--14);
  font-weight: 500;
}
.faq-menu a:after {
  content: "";
  display: block;
  position: absolute;
  right: 1rem;
  width: 1rem;
  height: 1rem;
  background: url(../images/icons/icon-arrow-right.svg) center center no-repeat;
  background-size: contain;
}
.faq-menu li:last-child a{border:none}

}
.faq-menu a:hover{background-color:var(--grey-100)}



@media screen and (width>64em){

.faq-menu{display:grid; gap:var(--p2); grid-template-columns:repeat(3, 1fr)}
.faq-menu li a{display:flex; align-items:center; gap:1rem; font-size:var(--14); padding:1rem; border-radius:var(--p1);background:white;border:1px solid var(--grey-100);}

}

.faq-content{
details{font-size:var(--15);}
  details a{text-decoration:underline; text-underline-offset: .4ch; font-weight:500}
}

@media screen and (width<40em){
#CookiebotWidget{display:none !important}
}


@media screen and (width<39.9375em){
.small-border-bottom{border-bottom:1px solid var(--grey-100); padding-block:4px 8px; line-height:1; gap:4px}
}