/** PRODUCTS **/

.ambo-products-section {
  transition: background-color 300ms ease;
}

/* Alcohol (default) */
.ambo-products-section {
  background: #1b2d54;
  color: #f8f8ef;
}

/* Alcohol Free */
.ambo-products-section.is-free {
  background: #d9e3ee;
  color: #1b2d54;
}
.ambo-products-section.is-free h2, 
.ambo-products-section.is-free a.el-title.uk-accordion-title, 
.ambo-products-section.state-free.is-free p {
  color: #1b2d54 !important;
}

.ambo-products-section.is-free .uk-accordion-title .uk-accordion-icon {
  background: #1b2d54 !important;
  color: #f8f8ef !important;
}


/* =========================================================
   PRODUCTS SWITCH BUTTONS
   Richiede sul wrapper:
   .ambo-switcher-buttons.state-alcol
   oppure
   .ambo-switcher-buttons.state-free
   ========================================================= */

.ambo-switcher-buttons {
  position: relative;
  width: 100%;
}

/* il div interno generato da YooTheme/UIkit */
.ambo-switcher-buttons > .uk-grid {
  display: grid;
  grid-template-columns: 33.333% auto 33.333%;
  align-items: center;
  width: min(1280px, 100%);
  margin: 0 auto;
  column-gap: 20px;
}

/* wrapper dei singoli button */
.ambo-switcher-buttons .el-item {
  display: flex;
  align-items: center;
}

/* stile base bottone */
.ambo-switcher-buttons .el-item .uk-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
  white-space: nowrap;
  line-height: 0.82;
  padding: 9px 28px 0px 28px;
  transition:
	font-size 0.28s ease,
	opacity 0.28s ease,
	background-color 0.28s ease,
	color 0.28s ease,
	height 0.28s ease,
	padding 0.28s ease;
  padding-top: 9px !important;
}

/* header switch */
.alcol-drinks-head,
.alcol-free-drinks-head {
  margin: 0 !important;
}

/* stato alcol */
.ambo-products-section.state-alcol .alcol-drinks-head {
  display: block;
}

.ambo-products-section.state-alcol .alcol-free-drinks-head {
  display: none;
}

/* stato free */
.ambo-products-section.state-free .alcol-drinks-head {
  display: none;
}

.ambo-products-section.state-free .alcol-free-drinks-head {
  display: block;
}
.ambo-head-switcher {
  position: relative;
}

.ambo-head-switcher .alcol-drinks-head,
.ambo-head-switcher .alcol-free-drinks-head {
  transition: opacity 0.25s ease;
}

/* stato alcol */
.ambo-products-section.state-alcol .ambo-head-switcher .alcol-drinks-head {
  display: block;
  opacity: 1;
}

.ambo-products-section.state-alcol .ambo-head-switcher .alcol-free-drinks-head {
  display: none;
  opacity: 0;
}

/* stato free */
.ambo-products-section.state-free .ambo-head-switcher .alcol-drinks-head {
  display: none;
  opacity: 0;
}

.ambo-products-section.state-free .ambo-head-switcher .alcol-free-drinks-head {
  display: block;
  opacity: 1;
}

/* =========================
   STATO ALCOL
   ========================= */

.ambo-switcher-buttons.state-alcol .el-item .uk-button {
  background: #f8f8ef;
  color: #1b2d54;
}

.ambo-switcher-buttons.state-alcol .el-item:nth-child(1) {
  grid-column: 2;
  justify-self: center;
  z-index: 2;
}

.ambo-switcher-buttons.state-alcol .el-item:nth-child(1) .uk-button {
  font-size: 55px;
  opacity: 1;
  height: 70px;
  padding: 0 40px;
}

.ambo-switcher-buttons.state-alcol .el-item:nth-child(2) {
  grid-column: 3;
  justify-self: start;
}

.ambo-switcher-buttons.state-alcol .el-item:nth-child(2) .uk-button {
  font-size: 37px;
  opacity: 0.5;
  height: 50px;
  padding: 0 22px;
}

/* =========================
   STATO FREE
   ========================= */

.ambo-switcher-buttons.state-free .el-item .uk-button {
  background: #1b2d54;
  color: #c8dbed;
}
.ambo-switcher-buttons.state-free .el-item .uk-button:hover {
  background: #1b2d54;
  opacity: 0.5;
}

.ambo-switcher-buttons.state-free .el-item:nth-child(1) {
  grid-column: 1;
  justify-self: end;
}

.ambo-switcher-buttons.state-free .el-item:nth-child(1) .uk-button {
  font-size: 40px;
  opacity: 0.5;
  height: 50px;
  padding: 0 22px;
}

.ambo-switcher-buttons.state-free .el-item:nth-child(2) {
  grid-column: 2;
  justify-self: center;
  z-index: 2;
}

.ambo-switcher-buttons.state-free .el-item:nth-child(2) .uk-button {
  font-size: 55px;
  opacity: 1;
  height: 70px;
  padding: 0 40px;
}

/* hover: non alterare l'equilibrio visivo */
.ambo-switcher-buttons .el-item .uk-button:hover,
.ambo-switcher-buttons .el-item .uk-button:focus {
  text-decoration: none;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1199px) {
  .ambo-switcher-buttons > .uk-grid {
	column-gap: 48px;
  }

  .ambo-switcher-buttons.state-alcol .el-item:nth-child(1) .uk-button,
  .ambo-switcher-buttons.state-free .el-item:nth-child(2) .uk-button {
	font-size: 40px;
	height: 92px;
	padding: 0 32px;
  }
  
  .ambo-switcher-buttons.state-alcol .el-item:nth-child(2) .uk-button,
  .ambo-switcher-buttons.state-free .el-item:nth-child(1) .uk-button {
	font-size: 26px;
	height: 60px;
	padding: 0 18px;
  }
}

/* =========================================================
   MOBILE
   Su mobile restano centrati uno sopra l'altro
   con differenza di gerarchia più contenuta
   ========================================================= */

@media (max-width: 767px) {
  .ambo-switcher-buttons > .uk-grid {
	grid-template-columns: 1fr;
	justify-items: center;
	row-gap: 14px;
	column-gap: 0;
  }

  .ambo-switcher-buttons.state-alcol .el-item:nth-child(1),
  .ambo-switcher-buttons.state-alcol .el-item:nth-child(2),
  .ambo-switcher-buttons.state-free .el-item:nth-child(1),
  .ambo-switcher-buttons.state-free .el-item:nth-child(2) {
	grid-column: 1;
	justify-self: center;
  }

  .ambo-switcher-buttons.state-alcol .el-item:nth-child(1) .uk-button,
  .ambo-switcher-buttons.state-free .el-item:nth-child(2) .uk-button {
	font-size: 28px;
	opacity: 1;
	height: 74px;
	padding: 0 22px;
  }
  
  .ambo-switcher-buttons.state-alcol .el-item:nth-child(2) .uk-button,
  .ambo-switcher-buttons.state-free .el-item:nth-child(1) .uk-button {
	font-size: 18px;
	opacity: 0.5;
	height: 52px;
	padding: 0 16px;
  }

  .ambo-switcher-buttons .el-item .uk-button {
	max-width: 90vw;
	text-align: center;
  }
}




/* =========================================================
   COLOR BANDS
   ========================================================= */

/* wrapper animato da uk-parallax */
.color-band-left,
.color-band-right {
  position: absolute;
  left: 0;
  right: 0;
  top: 50% !important;
  width: auto !important;
  min-height: 0 !important;
  z-index: 0;
  pointer-events: none;
}

/* rettangolo reale */
.color-band-left span,
.color-band-right span {
  display: block;

  height: var(--band-height, 250px);
  transform: translateY(calc(-52% + var(--band-y, 0px)));
}

.color-band-left span {
	margin-left: -250px; 
}
.color-band-right span {
	 margin-right: -250px; 
 }

/* layering */
.uk-position-relative {
  z-index: 1;
}

.color-band-left,
.color-band-right {
  z-index: 0;
}

/* =========================================================
   COLORI
   ========================================================= */

.ambo-orange .color-band-left span,
.ambo-orange-free .color-band-left span {
  background: #f9773e;
}

.ambo-lime .color-band-right span {
  background: #79c67d;
}

.ambo-lemon .color-band-left span,
.ambo-lemon-free .color-band-right span {
  background: #f7bd2d;
}

.ambo-peach .color-band-right span {
  background: #ee836e;
}

/* =========================================================
   DESKTOP / DEFAULT VARIABLES
   ========================================================= */

   .ambo-orange,
   .ambo-orange-free, 
   .ambo-lime, 
   .ambo-lemon, .ambo-lemon-free, 
   .ambo-peach {
	 --band-width: min(50vw, 720px);
	 --band-height: 280px;
	 --band-overhang: 115px;
	 --band-y: 6px;
   }

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 959px) {
	 .ambo-orange,
	 .ambo-orange-free {
	   --band-width: 52vw;
	   --band-height: 150px;
	   --band-overhang: 70px;
	   --band-y: 4px;
	 }
   
	 .ambo-lime,
	 .ambo-lemon-free {
	   --band-width: 56vw;
	   --band-height: 150px;
	   --band-overhang: 85px;
	   --band-y: 10px;
	 }
   
	 .ambo-lemon {
	   --band-width: 50vw;
	   --band-height: 150px;
	   --band-overhang: 70px;
	   --band-y: 6px;
	 }
   
	 .ambo-peach {
	   --band-width: 54vw;
	   --band-height: 150px;
	   --band-overhang: 82px;
	   --band-y: 12px;
	 }
   }
   

   /* =========================================================
	  MOBILE
	  ========================================================= */

   @media (max-width: 600px) {
	 .color-band-left {
        margin-left: 200px; 
        margin-right: -40px;
	 }
	 .color-band-right {
        margin-right: 200px;
        margin-left: -40px;
	  }
	 .ambo-orange,
	 .ambo-orange-free {
	   --band-width: 48vw;
	   --band-height: 150px;
	   --band-overhang: 42px;
	   --band-y: 0px;
	 }
   
	 .ambo-lime,
	 .ambo-lemon-free {
	   --band-width: 50vw;
	   --band-height: 150px;
	   --band-overhang: 55px;
	   --band-y: 8px;
	 }
   
	 .ambo-lemon {
	   --band-width: 47vw;
	   --band-height: 150px;
	   --band-overhang: 42px;
	   --band-y: 2px;
	 }
   
	 .ambo-peach {
	   --band-width: 49vw;
	   --band-height: 150px;
	   --band-overhang: 50px;
	   --band-y: 10px;
	 }
	 
   }
@media (max-width: 500px) { 
  .color-band-left span, 
  .color-band-right span { 
    height: 180px; 
  }
}