/* ========================================================================
   BLITZ — PRODUCT PAGES v2
   YOOtheme Pro 5.0.36
   ======================================================================== */

.blitz-products-page {
  position: relative;
}

/* ------------------------------------------------------------------------
   1. HERO + CATEGORY SWITCHER
   ------------------------------------------------------------------------ */
.blitz-products-hero {
  position: relative;
  min-height: clamp(430px, 48vw, 610px);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(180deg, #2d5dce 0%, #0b276d 100%) !important;
}

.blitz-products-hero > .uk-container {
  position: relative;
  z-index: 2;
}

.blitz-products-hero-title {
  color: #fff !important;
  font-family: var(--blitz-font-display, Impact, sans-serif) !important;
}

.blitz-product-switcher {
  position: relative;
  z-index: 10;
  width: min(100%, 720px);
  height: 74px;
  margin: clamp(38px, 5vw, 68px) auto 0 !important;
}
.blitz-product-switcher .el-item:nth-child(1) a {
  font-size: 40px;
  padding: 10px 15px
}
.blitz-product-switcher .el-item:nth-child(2) a span {
  font-size: 35px;
}
.blitz-product-switcher .el-item:nth-child(2) a {
  line-height: 20px;
  padding: 6px 50px;
}
.blitz-product-switcher.state-energy  .el-item:nth-child(2) a, 
.blitz-product-switcher.state-zero .el-item:nth-child(1) a {
  width: 260px;
  opacity: .5;
}
.blitz-product-switcher.state-energy  .el-item:nth-child(2) a:hover, 
.blitz-product-switcher.state-energy  .el-item:nth-child(2) a:active, 
.blitz-product-switcher.state-energy  .el-item:nth-child(2) a:focus, 
.blitz-product-switcher.state-zero .el-item:nth-child(1) a:hover, 
.blitz-product-switcher.state-zero .el-item:nth-child(1) a:active, 
.blitz-product-switcher.state-zero .el-item:nth-child(1) a:focus {
  opacity: 1;
}
.blitz-product-switcher.state-energy .el-item:nth-child(1) a {
    transform: scale(1.4);
}
.blitz-product-switcher.state-zero .el-item:nth-child(2) a {
    transform: scale(1.4);
}
.blitz-product-switcher > .uk-button {
  position: absolute;
  top: 0;
  box-sizing: border-box;
  width: 250px;
  min-height: 58px;
  padding: 8px 18px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #0a2a68 !important;
  background: rgba(255,255,255,.55) !important;
  font-family: var(--blitz-font-display, Impact, sans-serif) !important;
  font-size: 28px !important;
  font-style: italic;
  font-weight: 900;
  line-height: .82 !important;
  opacity: .62;
  text-transform: uppercase;
  transition:
    left .6s cubic-bezier(.2,.75,.25,1),
    transform .6s cubic-bezier(.2,.75,.25,1),
    opacity .35s ease,
    background-color .35s ease;
}
.blitz-product-switcher .uk-button:active {
    color: #1838ab;
}
.blitz-product-switcher > .uk-button small {
  display: block;
  font-size: .47em;
  line-height: .85;
}

.blitz-product-switcher.state-energy > .uk-button:nth-of-type(1),
.blitz-product-switcher.state-zero > .uk-button:nth-of-type(2) {
  left: 50%;
  z-index: 2;
  background: #fff !important;
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.blitz-product-switcher.state-energy > .uk-button:nth-of-type(2) {
  left: calc(50% + 255px);
  transform: translateX(-50%) scale(.88);
}

.blitz-product-switcher.state-zero > .uk-button:nth-of-type(1) {
  left: calc(50% - 255px);
  transform: translateX(-50%) scale(.88);
}

@media (min-width: 1200px) {
    .blitz-product-switcher .uk-grid-column-large {
        margin-left: -90px;
    }
	.blitz-product-switcher .uk-grid-column-large > * {
        padding-left: 90px;
    }
}

/* ------------------------------------------------------------------------
   2. PRODUCT BAND — BUILDER STRUCTURE
   Section: .blitz-product-panel
   Row:     .blitz-product-inner
   Column:  .blitz-product-copy / .blitz-product-visual
   ------------------------------------------------------------------------ */
.blitz-product-panel {
  --product-bg-a: #ef2d39;
  --product-bg-b: #a90012;
  --product-glow: rgba(255,255,255,.42);
  --product-copy: #fff;
  --product-dark: rgba(2,16,47,.82);

  /* Animazione più rapida, laterale ed esplosiva. */
  --product-motion-duration: .52s;
  --product-copy-duration: .42s;
  --product-explosion-duration: .46s;
  --product-motion-ease: cubic-bezier(.16, 1, .3, 1);
  --product-explosion-ease: cubic-bezier(.12, 1.4, .22, 1);

  position: relative;
  min-height: clamp(590px, 49vw, 760px);
  padding: 0 !important;
  overflow: hidden;
  isolation: isolate;
  color: var(--product-copy);
  background:
    radial-gradient(circle at 50% 47%, var(--product-glow) 0%, transparent 34%),
    linear-gradient(110deg, var(--product-bg-a) 0%, var(--product-bg-b) 100%) !important;
}

.blitz-product-panel::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0;
  transition: opacity .32s ease;
}

.blitz-layout-right::before {
  background: linear-gradient(90deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.08) 43%, transparent 62%);
}

.blitz-layout-left::before {
  background: linear-gradient(270deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.08) 43%, transparent 62%);
}

.blitz-product-panel > .uk-container,
.blitz-product-panel > .uk-container-expand {
  /* width: 100% !important;
  max-width: none !important;*/
  padding: 0 !important;
}

.blitz-product-inner {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: center;
  width: min(1480px, 100%) !important;
  min-height: clamp(590px, 49vw, 760px);
  margin: 0 auto !important;
  padding: 42px clamp(34px, 5vw, 86px);
}

.blitz-product-inner > * {
  box-sizing: border-box;
  width: auto !important;
  min-width: 0;
  padding-left: 0 !important;
}

/* Copy hidden at rest; opens from the centre outwards. */
.blitz-product-copy {
  position: relative;
  z-index: 5;
  max-width: 610px;
  opacity: 0;
  clip-path: inset(0 50% 0 50%);
  transition:
    opacity .18s ease,
    clip-path var(--product-copy-duration) var(--product-motion-ease),
    transform var(--product-copy-duration) var(--product-motion-ease);
}

.blitz-layout-right .blitz-product-copy {
  grid-column: 1;
  grid-row: 1;
  transform: translateX(42px);
}

.blitz-layout-left .blitz-product-copy {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  transform: translateX(-42px);
}

/* Product visual starts in the middle and moves to its final side. */
.blitz-product-visual {
  position: relative;
  z-index: 4;
  display: grid;
  min-height: 520px;
  place-items: center;
  cursor: pointer;
  outline: none;
  transition:
    transform var(--product-motion-duration) var(--product-motion-ease),
    filter .28s ease;
  will-change: transform;
}

.blitz-layout-right .blitz-product-visual {
  grid-column: 2;
  grid-row: 1;
  transform: translateX(-50%) scale(1.04);
}

.blitz-layout-left .blitz-product-visual {
  grid-column: 1;
  grid-row: 1;
  transform: translateX(50%) scale(1.04);
}

.blitz-product-main {
  position: relative !important;
  z-index: 4;
  width: min(610px, 46vw);
  max-width: none !important;
  margin: 0 !important;
  filter: drop-shadow(0 28px 34px rgba(0,0,0,.22));
  transition: transform .48s var(--product-motion-ease);
}

.blitz-product-main picture,
.blitz-product-main img {
  display: block;
  width: 100% !important;
  height: auto !important;
}

/* Fruit / ice elements editable as normal Builder Image elements. */
.blitz-product-decor {
  position: absolute !important;
  z-index: 2;
  width: min(270px, 20vw);
  max-width: none !important;
  margin: 0 !important;
  opacity: .82;
  transform: scale(.70);
  transition:
    transform var(--product-explosion-duration) var(--product-explosion-ease),
    opacity .14s ease;
  pointer-events: none;
}

.blitz-product-decor picture,
.blitz-product-decor img {
  display: block;
  width: 100% !important;
  height: auto !important;
}

.blitz-product-decor--1 { top: 14%; left: 9%; }
.blitz-product-decor--2 { right: 7%; bottom: 9%; }
.blitz-product-decor--3 { left: 4%; bottom: 4%; }

/* Hover/focus/open states. */
@media (hover: hover) and (min-width: 960px) {
  .blitz-product-panel:hover::before,
  .blitz-product-panel:focus-within::before,
  .blitz-product-panel.is-open::before {
    opacity: 1;
  }

  .blitz-product-panel:hover .blitz-product-copy,
  .blitz-product-panel:focus-within .blitz-product-copy,
  .blitz-product-panel.is-open .blitz-product-copy {
    opacity: 1;
    clip-path: inset(0);
    transform: translateX(0);
  }

  .blitz-layout-right:hover .blitz-product-visual,
  .blitz-layout-right:focus-within .blitz-product-visual,
  .blitz-layout-right.is-open .blitz-product-visual {
    transform: translateX(12%) scale(.93);
  }

  .blitz-layout-left:hover .blitz-product-visual,
  .blitz-layout-left:focus-within .blitz-product-visual,
  .blitz-layout-left.is-open .blitz-product-visual {
    transform: translateX(-12%) scale(.93);
  }

  .blitz-product-panel:hover .blitz-product-main,
  .blitz-product-panel:focus-within .blitz-product-main,
  .blitz-product-panel.is-open .blitz-product-main {
    transform: rotate(var(--product-rotation, -5deg)) scale(1.04);
  }

  .blitz-product-panel:hover .blitz-product-decor,
  .blitz-product-panel:focus-within .blitz-product-decor,
  .blitz-product-panel.is-open .blitz-product-decor {
    opacity: 1;
    transform: scale(1.05);
    width: min(250px, 19vw);
  }
}

/* Scroll entrance; full content reveal remains hover/focus driven. */
.blitz-product-panel:not(.is-in-view) .blitz-product-main {
  opacity: 0;
  transform: translateY(50px) scale(.88);
}

.blitz-product-panel.is-in-view .blitz-product-main {
  opacity: 1;
}

/* ------------------------------------------------------------------------
   3. TYPOGRAPHY / FORMATS / ACCORDION
   ------------------------------------------------------------------------ */
.blitz-product-title {
  margin: 0 0 8px !important;
  color: inherit !important;
  font-family: var(--blitz-font-display, Impact, sans-serif) !important;
  font-style: italic;
  font-weight: 900;
  line-height: .84 !important;
  text-transform: uppercase;
}

.blitz-product-format {
  margin: 0 0 18px !important;
  color: inherit !important;
  font-family: var(--blitz-font-condensed, Arial, sans-serif) !important;
  line-height: 1.05 !important;
}

.blitz-product-format-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.blitz-product-format-line span:not(.blitz-product-format-label) {
  display: inline-block;
  padding: 3px 8px 1px;
  color: #153b99;
  background: #fff;
  line-height: 1;
}

.blitz-product-description {
  margin: 0 0 26px !important;
  color: inherit !important;
  font-family: var(--blitz-font-condensed, Arial, sans-serif) !important;
}

.blitz-product-description p {
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
}

.blitz-product-accordion {
  margin-top: 28px !important;
}

.blitz-product-accordion .uk-accordion-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 45px;
  color: inherit !important;
  font-family: var(--blitz-font-display, Impact, sans-serif) !important;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.blitz-product-accordion .uk-accordion-title::before {
  box-sizing: border-box;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  margin-left: auto;
  border: 0;
  background-color: #fff;
  background-position: center;
  background-size: 18px;
}


/* ------------------------------------------------------------------------
   4. PRODUCT COLOURS
   ------------------------------------------------------------------------ */
.blitz-product--original {
  --product-bg-a: #f42c3d;
  --product-bg-b: #a50010;
  --product-glow: rgba(255,255,255,.46);
  --product-copy: #fff;
  --product-rotation: 7deg;
}

.blitz-product--watermelon {
  --product-bg-a: #61ff00;
  --product-bg-b: #169b00;
  --product-glow: rgba(225,255,60,.76);
  --product-copy: #fff;
  --product-rotation: -7deg;
}

.blitz-product--peach {
  --product-bg-a: #f12aaa;
  --product-bg-b: #8c006a;
  --product-glow: rgba(255,168,215,.66);
  --product-copy: #fff;
  --product-rotation: 8deg;
}

/* ==========================================================
   ANGURIA — ESPLOSIONE FRUTTI DA DIETRO LA LATTINA
   ========================================================== */

/* La lattina deve restare davanti */
.blitz-product--watermelon .blitz-product-main {
  position: relative;
  z-index: 4;
}

/* Permette ai frutti di uscire senza essere tagliati */
.blitz-product--watermelon .blitz-product-visual {
  overflow: visible;
}

/* Impostazioni condivise */
.blitz-product--watermelon .blitz-product-decor {
  position: absolute !important;
  z-index: 3;
  margin: 0 !important;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;

  transition:
    transform var(--product-explosion-duration) var(--product-explosion-ease),
    opacity .14s ease;

  will-change: transform, opacity;
}

/* ----------------------------------------------------------
   1. FETTA GRANDE — ALTO SINISTRA
   Posizione finale simile alla composizione bianca
   ---------------------------------------------------------- */
.blitz-product--watermelon .blitz-product-decor--1 {
  top: 3%;
  left: -3%;
  width: min(330px, 25vw);

  /* Stato iniziale: dietro il centro della lattina */
  transform:
    translate(115%, 72%)
    rotate(16deg)
    scale(.12) !important;
}

/* ----------------------------------------------------------
   2. FETTA VERTICALE — DESTRA
   ---------------------------------------------------------- */
.blitz-product--watermelon .blitz-product-decor--2 {
  top: 30%;
  right: 9%;
  bottom: auto;
  width: min(260px, 19vw);

  transform:
    translate(-120%, 8%)
    rotate(-20deg)
    scale(.12) !important;
}

/* ----------------------------------------------------------
   3. FETTA BASSA — SINISTRA
   ---------------------------------------------------------- */
.blitz-product--watermelon .blitz-product-decor--3 {
  left: 2%;
  bottom: 1%;
  width: min(310px, 23vw);
  transform:
    translate(90%, -92%)
    rotate(22deg)
    scale(.12) !important;
}

/* ==========================================================
   STATO ESPLOSO
   Desktop hover/focus + mobile .is-open
   ========================================================== */

.blitz-product--watermelon:hover .blitz-product-decor--1,
.blitz-product--watermelon:focus-within .blitz-product-decor--1,
.blitz-product--watermelon.is-open .blitz-product-decor--1 {
  opacity: 1;
  transform: translate(0, 0) rotate(-45deg) scale(.8) !important;
  transition-delay: 0s;
}

.blitz-product--watermelon:hover .blitz-product-decor--2,
.blitz-product--watermelon:focus-within .blitz-product-decor--2,
.blitz-product--watermelon.is-open .blitz-product-decor--2 {
  opacity: 1;

  transform:
    translate(0, 0)
    rotate(9deg)
    scale(1) !important;

  transition-delay: .03s;
}

.blitz-product--watermelon:hover .blitz-product-decor--3,
.blitz-product--watermelon:focus-within .blitz-product-decor--3,
.blitz-product--watermelon.is-open .blitz-product-decor--3 {
  opacity: 1;
  transform:
    translate(0, 0)
    rotate(90deg)
    scale(.9) !important;
  transition-delay: .06s;
}


/* -------------------------------------------------------
 PESCA
 ------------------------------------------------------- */

/* La lattina deve restare davanti ai frutti */
.blitz-product--peach .blitz-product-main {
  position: relative;
  z-index: 4;
}

/* Impostazioni comuni per i frutti */
.blitz-product--peach .blitz-product-decor {
  position: absolute !important;
  z-index: 3;
  margin: 0 !important;
  opacity: 0;
  pointer-events: none;

  transition:
    transform var(--product-explosion-duration) var(--product-explosion-ease),
    opacity .14s ease;

  will-change: transform, opacity;
}

/* -------------------------------------------------------
   PEZZO DI PESCA IN ALTO A SINISTRA

   La posizione finale rimane quella che hai già scelto.
   A riposo viene traslato verso il centro della lattina.
   ------------------------------------------------------- */
.blitz-product--peach .blitz-product-decor--1 {
  top: 3%;
  left: 5%;
  width: min(250px, 19vw);

  transform:
    translate(135%, 90%)
    rotate(-18deg)
    scale(.12) !important;

  transform-origin: center;
}

/* -------------------------------------------------------
   MEZZA PESCA IN BASSO A DESTRA
   ------------------------------------------------------- */
.blitz-product--peach .blitz-product-decor--2 {
  right: 7%;
  bottom: 5%;
  width: min(250px, 19vw);

  transform:
    translate(-110%, -65%)
    rotate(15deg)
    scale(.12) !important;

  transform-origin: center;
}

/* Stato esploso */
.blitz-product--peach:hover .blitz-product-decor--1,
.blitz-product--peach:focus-within .blitz-product-decor--1,
.blitz-product--peach.is-open .blitz-product-decor--1 {
  opacity: 1;

  transform:
    translate(0, 0)
    rotate(-8deg)
    scale(.9) !important;

  transition-delay: 0s;
}

.blitz-product--peach:hover .blitz-product-decor--2,
.blitz-product--peach:focus-within .blitz-product-decor--2,
.blitz-product--peach.is-open .blitz-product-decor--2 {
  opacity: 1;

  transform:
    translate(0, 0)
    rotate(45deg)
    scale(.9) !important;

  transition-delay: .04s;
}

/* ------------------------------------------------------------------------
   5. RETAILERS
   ------------------------------------------------------------------------ */
.blitz-products-retailers {
  padding-block: clamp(54px, 7vw, 100px) !important;
  background: #fff;
}

.blitz-retailers-title {
  color: #244fb9 !important;
  font-family: var(--blitz-font-display, Impact, sans-serif) !important;
  font-size: clamp(52px, 5vw, 84px) !important;
  font-style: italic;
  font-weight: 900;
  line-height: .9 !important;
  text-transform: uppercase;
}

.blitz-products-retailer-grid {
  margin-top: 40px !important;
}

/* ------------------------------------------------------------------------
   6. MOBILE / TOUCH — CLICK TO REVEAL
   ------------------------------------------------------------------------ */
@media (max-width: 959px), (hover: none) {
	
  div#energy-drink.blitz-products-hero, 
  div#drink-senza-zuccheri.blitz-products-hero {
    min-height:70vh !important;
  }
  .blitz-products-hero  .tm-header-placeholder.uk-margin-remove-adjacent {
    height: auto !important;
  }
	
  .blitz-products-hero {
    min-height: 430px;
    padding-top: 72px !important;
  }


  .blitz-product-switcher {
    display: flex;
    gap: 16px;
    width: 100%;
    height: auto;
    margin-top: 38px !important;
	  justify-content: center;
  }

  .blitz-product-switcher > .uk-button,
  .blitz-product-switcher.state-energy > .uk-button:nth-of-type(1),
  .blitz-product-switcher.state-energy > .uk-button:nth-of-type(2),
  .blitz-product-switcher.state-zero > .uk-button:nth-of-type(1),
  .blitz-product-switcher.state-zero > .uk-button:nth-of-type(2) {
    position: relative;
    left: auto;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 48px;
    padding: 7px 8px 3px !important;
    font-size: clamp(17px, 5.2vw, 25px) !important;
    transform: none;
  }

  .blitz-product-switcher.state-energy > .uk-button:nth-of-type(1),
  .blitz-product-switcher.state-zero > .uk-button:nth-of-type(2) {
    background: #fff !important;
    opacity: 1;
  }

  .blitz-product-panel,
  .blitz-product-inner {
    min-height: auto;
  }

  .blitz-product-panel::before,
  .blitz-layout-right::before,
  .blitz-layout-left::before {
    z-index: 2;
    background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(3,16,50,.14) 58%, var(--product-dark) 100%);
    opacity: 0;
    transition: opacity .32s ease;
  }

  .blitz-product-inner {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    padding: 0;
  }

  .blitz-product-visual,
  .blitz-layout-right .blitz-product-visual,
  .blitz-layout-left .blitz-product-visual {
    order: 1;
    width: 100% !important;
    min-height: 520px;
    padding: 30px 10px;
    transform: none;
  }

  .blitz-product-main {
    width: min(540px, 112vw);
    animation: blitz-product-bounce 2.4s ease-in-out infinite;
  }

  .blitz-product-decor {
    width: min(230px, 48vw);
    opacity: 1;
    transform: scale(1);
  }

  .blitz-product-copy,
  .blitz-layout-right .blitz-product-copy,
  .blitz-layout-left .blitz-product-copy {
    position: relative;
    z-index: 4;
    order: 2;
    width: 100% !important;
    max-width: none;
    max-height: 0;
    padding: 0 24px;
    overflow: hidden;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(32px);
    transition:
      max-height .48s cubic-bezier(.2,.75,.25,1),
      padding .3s ease,
      opacity .2s ease,
      clip-path .4s cubic-bezier(.2,.75,.25,1),
      transform .4s cubic-bezier(.2,.75,.25,1);
  }

  .blitz-product-panel.is-open::before {
    opacity: 1;
  }

  .blitz-product-panel.is-open .blitz-product-copy {
    max-height: 1600px;
    padding: 28px 24px 54px;
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }

  .blitz-product-panel.is-open .blitz-product-visual {
    padding-bottom: 0;
  }

  .blitz-product-panel.is-open .blitz-product-main {
    animation: none;
    transform: rotate(var(--product-rotation, -5deg)) scale(.92);
  }

  .blitz-product-panel.is-open .blitz-product-decor {
    transform: scale(1.18);
  }

  .blitz-product-accordion .uk-accordion-content {
    padding-right: 0;
  }
}

@media (max-width: 479px) {
  .blitz-products-hero {
    min-height: 390px;
  }
  div#drink-senza-zuccheri.blitz-products-hero h1.uk-heading-xlarge {
    font-size: 16.8vw;
  }
  .blitz-product-visual,
  .blitz-layout-right .blitz-product-visual,
  .blitz-layout-left .blitz-product-visual {
    min-height: 470px;
  }

  .blitz-product-main {
    width: 120vw;
  }
}

@keyframes blitz-product-bounce {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .blitz-product-copy,
  .blitz-product-main,
  .blitz-product-decor,
  .blitz-product-visual {
    animation: none !important;
    transition: none !important;
  }

  .blitz-product-panel:not(.is-in-view) .blitz-product-main {
    opacity: 1;
    transform: none;
  }
}

/* ========================================================================
   7. PRODOTTI SENZA ZUCCHERI
   Aggiunta per il layout "BLITZ - Prodotti - Drink senza zuccheri".
   ======================================================================== */

/* Colori e inclinazioni delle tre fasce. */
.blitz-product--sugar-free {
  --product-bg-a: #101ba8;
  --product-bg-b: #101682;
  --product-glow: rgba(70, 222, 255, .88);
  --product-copy: #fff;
  --product-rotation: 7deg;
  background:
    radial-gradient(circle at 52% 47%, rgba(67, 224, 255, .96) 0%, rgba(35, 151, 224, .72) 30%, transparent 55%),
    linear-gradient(105deg, #1710ad 0%, #0875c9 46%, #101683 100%) !important;
}

.blitz-product--tropical {
  --product-bg-a: #ff6a00;
  --product-bg-b: #ed2500;
  --product-glow: rgba(255, 235, 41, .94);
  --product-copy: #fff;
  --product-rotation: -7deg;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 239, 51, .98) 0%, rgba(255, 177, 12, .72) 34%, transparent 58%),
    linear-gradient(105deg, #ff5d00 0%, #ff8c00 48%, #ed2100 100%) !important;
}

.blitz-product--white {
  --product-bg-a: #008acc;
  --product-bg-b: #bcecff;
  --product-glow: rgba(255, 255, 255, .96);
  --product-copy: #fff;
  --product-rotation: 8deg;
  background:
    radial-gradient(circle at 55% 48%, rgba(255, 255, 255, .98) 0%, rgba(207, 243, 255, .84) 34%, transparent 60%),
    linear-gradient(105deg, #007fc9 0%, #35b6e9 49%, #a7ddf5 100%) !important;
}

/* ------------------------------------------------------------------------
   TROPICAL — ESPLOSIONE PAPAYA, PASSION FRUIT E ANANAS
   ------------------------------------------------------------------------ */
.blitz-product--tropical .blitz-product-main {
  position: relative;
  z-index: 4;
}

.blitz-product--tropical .blitz-product-visual {
  overflow: visible;
}

.blitz-product--tropical .blitz-product-decor {
  position: absolute !important;
  z-index: 3;
  margin: 0 !important;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
  transition:
    transform var(--product-explosion-duration) var(--product-explosion-ease),
    opacity .14s ease;
  will-change: transform, opacity;
}

/* Papaya: alto sinistra. */
.blitz-product--tropical .blitz-product-decor--1 {
  top: 9%;
  left: -1%;
  width: min(300px, 22vw) !important;
  transform:
    translate(112%, 78%)
    rotate(18deg)
    scale(.12) !important;
}

/* Passion fruit: destra. */
.blitz-product--tropical .blitz-product-decor--2 {
  top: 29%;
  right: 13%;
  bottom: auto;
  width: min(280px, 21vw) !important;
  transform:
    translate(-115%, 10%)
    rotate(-16deg)
    scale(.12) !important;
}

/* Ananas: basso sinistra. */
.blitz-product--tropical .blitz-product-decor--3 {
  left: -1%;
  bottom: 6%;
  width: min(310px, 23vw) !important;
  transform:
    translate(92%, -88%)
    rotate(24deg)
    scale(.12) !important;
}

.blitz-product--tropical:hover .blitz-product-decor--1,
.blitz-product--tropical:focus-within .blitz-product-decor--1,
.blitz-product--tropical.is-open .blitz-product-decor--1 {
  width: min(300px, 22vw) !important;
  opacity: 1;
  transform: translate(0, 0) rotate(5deg) scale(.9) !important;
  transition-delay: 0s;
}

.blitz-product--tropical:hover .blitz-product-decor--2,
.blitz-product--tropical:focus-within .blitz-product-decor--2,
.blitz-product--tropical.is-open .blitz-product-decor--2 {
  width: min(280px, 21vw) !important;
  opacity: 1;
  transform: translate(0, 0) rotate(8deg) scale(.9) !important;
  transition-delay: .03s;
}

.blitz-product--tropical:hover .blitz-product-decor--3,
.blitz-product--tropical:focus-within .blitz-product-decor--3,
.blitz-product--tropical.is-open .blitz-product-decor--3 {
  width: min(310px, 23vw) !important;
  opacity: 1;
  transform: translate(0, 0) rotate(-45deg) scale(.8) !important;
  transition-delay: .06s;
}

/* ------------------------------------------------------------------------
   WHITE — ESPLOSIONE CUBETTI DI GHIACCIO
   ------------------------------------------------------------------------ */
.blitz-product--white .blitz-product-main {
  position: relative;
  z-index: 4;
}

.blitz-product--white .blitz-product-visual {
  overflow: visible;
}

.blitz-product--white .blitz-product-decor {
  position: absolute !important;
  z-index: 3;
  margin: 0 !important;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
  transition:
    transform .42s var(--product-explosion-ease),
    opacity .12s ease;
  will-change: transform, opacity;
}

.blitz-product--white .blitz-product-decor--1 {
  top: 0%;
  left: 9%;
  width: min(205px, 15vw) !important;
  transform: translate(125%, 100%) rotate(-30deg) scale(.08) !important;
}

.blitz-product--white .blitz-product-decor--2 {
  top: 30%;
  right: 7%;
  bottom: auto;
  width: min(185px, 14vw) !important;
  transform: translate(-135%, 38%) rotate(28deg) scale(.08) !important;
}

.blitz-product--white .blitz-product-decor--3 {
  left: 1%;
  bottom: 13%;
  width: min(195px, 15vw) !important;
  transform: translate(130%, -95%) rotate(38deg) scale(.08) !important;
}

.blitz-product--white .blitz-product-decor--4 {
  right: 25%;
  bottom: 20%;
  width: min(230px, 17vw) !important;
  transform: translate(-115%, -95%) rotate(-36deg) scale(.08) !important;
}

.blitz-product--white:hover .blitz-product-decor--1,
.blitz-product--white:focus-within .blitz-product-decor--1,
.blitz-product--white.is-open .blitz-product-decor--1 {
  width: min(205px, 15vw) !important;
  opacity: 1;
  transform: translate(0, 0) rotate(5deg) scale(.9) !important;
  transition-delay: 0s;
}

.blitz-product--white:hover .blitz-product-decor--2,
.blitz-product--white:focus-within .blitz-product-decor--2,
.blitz-product--white.is-open .blitz-product-decor--2 {
  width: min(185px, 14vw) !important;
  opacity: 1;
  transform: translate(0, 0) rotate(42deg) scale(.7) !important;
  transition-delay: .025s;
}

.blitz-product--white:hover .blitz-product-decor--3,
.blitz-product--white:focus-within .blitz-product-decor--3,
.blitz-product--white.is-open .blitz-product-decor--3 {
  width: min(195px, 15vw) !important;
  opacity: 1;
  transform: translate(0, 0) rotate(-25deg) scale(.96) !important;
  transition-delay: .05s;
}

.blitz-product--white:hover .blitz-product-decor--4,
.blitz-product--white:focus-within .blitz-product-decor--4,
.blitz-product--white.is-open .blitz-product-decor--4 {
  width: min(230px, 17vw) !important;
  opacity: 1;
  transform: translate(0, 0) rotate(5deg) scale(.7) !important;
  transition-delay: .075s;
}



/* ========================================================================
   BLITZ — MOBILE PRODUCTS CLEAN v3
   Sostituisce TUTTI i precedenti blocchi mobile di products.css.
   Mantiene il comportamento già approvato:
   - pannello chiuso compatto;
   - solo lattina visibile;
   - apertura al click tramite .is-open;
   - testo e accordion sotto;
   - frutta/ghiaccio visibili solo da aperto.
   ======================================================================== */

@media (max-width: 959px), (hover: none) {

  /* ----------------------------------------------------------------------
     1. HERO PAGINE PRODOTTI
     ---------------------------------------------------------------------- */

  .blitz-products-hero {
    min-height: 430px;
    padding-top: 72px !important;
  }

  /*
   * YOOtheme inserisce i pulsanti dentro:
   * .blitz-product-switcher > .uk-grid > .el-item > .uk-button
   */
  .blitz-product-switcher {
    width: 100%;
    height: auto;
    margin-top: 38px !important;
  }

  .blitz-product-switcher > .uk-grid,
  .blitz-product-switcher > div {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 !important;
  }

  .blitz-product-switcher .el-item {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
    margin-top: 0 !important;
    padding-left: 0 !important;
  }

  .blitz-product-switcher .uk-button {
    position: relative !important;
    left: auto !important;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    min-height: 38px;
    padding: 7px 8px 3px !important;
    transform: none !important;
  }
	.blitz-product-switcher .el-item:nth-child(2) a span {
    font-size: 25px;
}
	.blitz-product-switcher .el-item:nth-child(2) a small {
    font-size: 15px;
}
	.blitz-product-switcher .el-item:nth-child(1) a {
    font-size: 26px;
    line-height: 26px;
}

  .blitz-product-switcher.state-energy .el-item:nth-child(1) .uk-button,
  .blitz-product-switcher.state-zero .el-item:nth-child(2) .uk-button {
    background: #fff !important;
    opacity: 1;
  }

  .blitz-product-switcher.state-energy .el-item:nth-child(2) .uk-button,
  .blitz-product-switcher.state-zero .el-item:nth-child(1) .uk-button {
    background: rgba(255, 255, 255, .55) !important;
    opacity: .62;
	transform: scale(.8) !important;
	border-color: rgba(255, 255, 255, .55) !important;

  }


  /* ----------------------------------------------------------------------
     2. STRUTTURA GENERALE DELLE FASCE
     ---------------------------------------------------------------------- */

  .blitz-product-panel {
    --blitz-mobile-panel-height: clamp(440px, 110vw, 620px);
    min-height: var(--blitz-mobile-panel-height) !important;
  }

  .blitz-product-panel > .uk-container,
  .blitz-product-panel > .uk-container-expand {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .blitz-product-inner {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    min-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .blitz-product-inner > * {
    width: 100% !important;
    padding-left: 0 !important;
  }

  .blitz-product-visual,
  .blitz-layout-right .blitz-product-visual,
  .blitz-layout-left .blitz-product-visual {
    order: 1;
    width: 100% !important;
    transform: none !important;
  }

  .blitz-product-copy,
  .blitz-layout-right .blitz-product-copy,
  .blitz-layout-left .blitz-product-copy {
    order: 2;
  }

  .blitz-product-visual > .uk-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
    min-height: inherit;
  }


  /* ----------------------------------------------------------------------
     3. STATO CHIUSO
     ---------------------------------------------------------------------- */

  .blitz-product-panel:not(.is-open) > .uk-container,
  .blitz-product-panel:not(.is-open) > .uk-container-expand,
  .blitz-product-panel:not(.is-open) .blitz-product-inner {
    height: var(--blitz-mobile-panel-height) !important;
    min-height: var(--blitz-mobile-panel-height) !important;
  }

  .blitz-product-panel:not(.is-open) .blitz-product-visual,
  .blitz-product-panel:not(.is-open).blitz-layout-right .blitz-product-visual,
  .blitz-product-panel:not(.is-open).blitz-layout-left .blitz-product-visual {
    display: block !important;
    width: 100% !important;
    height: var(--blitz-mobile-panel-height) !important;
    min-height: var(--blitz-mobile-panel-height) !important;
    padding: 0 !important;
    overflow: visible;
    transform: none !important;
  }

  .blitz-product-panel:not(.is-open) .blitz-product-main {
    flex: 0 0 auto;
    width: min(570px, 90vw) !important;
    max-width: none !important;
    margin: 0 !important;
    animation: blitz-product-bounce 2.4s ease-in-out infinite;
  }

  /*
   * Il testo viene rimosso completamente dallo spazio visibile.
   * Questo impedisce ai titoli di spuntare in fondo alla fascia.
   */
  .blitz-product-panel:not(.is-open) .blitz-product-copy,
  .blitz-product-panel:not(.is-open) .blitz-product-copy.uk-grid-margin {
    position: absolute !important;
    overflow: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    clip-path: inset(0 0 100% 0) !important;
    transform: translateY(24px) !important;
    pointer-events: none !important;
  }

  /*
   * Prima del click si vede esclusivamente .blitz-product-main.
   * Frutta e ghiaccio rimangono dietro e invisibili.
   */
  .blitz-product-panel:not(.is-open) .blitz-product-decor {
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: 1px !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(.03) !important;
    transition-delay: 0s !important;
  }


  /* ----------------------------------------------------------------------
     4. STATO APERTO
     ---------------------------------------------------------------------- */

  .blitz-product-panel.is-open,
  .blitz-product-panel.is-open > .uk-container,
  .blitz-product-panel.is-open > .uk-container-expand,
  .blitz-product-panel.is-open .blitz-product-inner {
    height: auto !important;
    min-height: 0 !important;
  }

  .blitz-product-panel.is-open::before {
    z-index: 2;
    opacity: 1 !important;
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        transparent 32%,
        rgba(3, 16, 50, .10) 46%,
        rgba(2, 16, 47, .82) 100%
      ) !important;
  }

  .blitz-product-panel.is-open .blitz-product-visual,
  .blitz-product-panel.is-open.blitz-layout-right .blitz-product-visual,
  .blitz-product-panel.is-open.blitz-layout-left .blitz-product-visual {
    display: block !important;
    width: 100% !important;
    height: clamp(330px, 94vw, 500px) !important;
    min-height: clamp(330px, 94vw, 500px) !important;
    padding: 0 !important;
    overflow: visible;
    transform: none !important;
  }

  .blitz-product-panel.is-open .blitz-product-main {
    width: min(590px, 92vw) !important;
    max-width: none !important;
    margin: 0 !important;
    animation: none !important;
    transform: rotate(var(--product-rotation, -5deg)) scale(.94) !important;
  }

  .blitz-product-panel.is-open .blitz-product-copy,
  .blitz-product-panel.is-open .blitz-product-copy.uk-grid-margin {
    position: relative !important;
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 2000px !important;
    margin: 0 !important;
    padding: 4px 26px 48px !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    clip-path: inset(0) !important;
    transform: none !important;
    pointer-events: auto !important;
    transition:
      max-height .48s cubic-bezier(.2, .75, .25, 1),
      padding .3s ease,
      opacity .2s ease,
      clip-path .4s cubic-bezier(.2, .75, .25, 1),
      transform .4s cubic-bezier(.2, .75, .25, 1);
  }

  .blitz-product-panel.is-open .blitz-product-decor {
    z-index: 3;
    visibility: visible;
    opacity: 1 !important;
  }


  /* ----------------------------------------------------------------------
     5. TIPOGRAFIA E ACCORDION
     ---------------------------------------------------------------------- */

  .blitz-product-title {
    margin-bottom: 8px !important;
    line-height: .86 !important;
  }

  .blitz-product-description {
    margin-bottom: 22px !important;
  }

  .blitz-product-accordion {
    margin-top: 22px !important;
  }

  .blitz-product-accordion .uk-accordion-title {
    min-height: 39px;
  }

  .blitz-product-accordion .uk-accordion-title::before {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    background-size: 15px;
  }

  .blitz-product-accordion .uk-accordion-content {
    max-width: none;
    padding-right: 46px;
  }


  /* ----------------------------------------------------------------------
     6. ANGURIA — POSIZIONI APERTE
     ---------------------------------------------------------------------- */

  .blitz-product--watermelon.is-open .blitz-product-decor--1 {
    top: 7% !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    width: min(230px, 46vw) !important;
    transform: rotate(-45deg) scale(.78) !important;
    transition-delay: 0s !important;
  }

  .blitz-product--watermelon.is-open .blitz-product-decor--2 {
    top: 30% !important;
    right: 2% !important;
    bottom: auto !important;
    left: auto !important;
    width: min(205px, 41vw) !important;
    transform: rotate(9deg) scale(.94) !important;
    transition-delay: .03s !important;
  }

  .blitz-product--watermelon.is-open .blitz-product-decor--3 {
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    left: 1% !important;
    width: min(225px, 45vw) !important;
    transform: rotate(90deg) scale(.82) !important;
    transition-delay: .06s !important;
  }


  /* ----------------------------------------------------------------------
     7. PESCA — POSIZIONI APERTE
     ---------------------------------------------------------------------- */

  .blitz-product--peach.is-open .blitz-product-decor--1 {
    top: 5% !important;
    right: auto !important;
    bottom: auto !important;
    left: 1% !important;
    width: min(225px, 45vw) !important;
    transform: rotate(-8deg) scale(.88) !important;
    transition-delay: 0s !important;
  }

  .blitz-product--peach.is-open .blitz-product-decor--2 {
    top: auto !important;
    right: 1% !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(235px, 47vw) !important;
    transform: rotate(45deg) scale(.88) !important;
    transition-delay: .04s !important;
  }


  /* ----------------------------------------------------------------------
     8. TROPICAL — POSIZIONI APERTE
     ---------------------------------------------------------------------- */

  .blitz-product--tropical.is-open .blitz-product-decor--1 {
    top: 6% !important;
    right: auto !important;
    bottom: auto !important;
    left: -1% !important;
    width: min(230px, 46vw) !important;
    transform: rotate(5deg) scale(.86) !important;
    transition-delay: 0s !important;
  }

  .blitz-product--tropical.is-open .blitz-product-decor--2 {
    top: 29% !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    width: min(215px, 43vw) !important;
    transform: rotate(8deg) scale(.88) !important;
    transition-delay: .03s !important;
  }

  .blitz-product--tropical.is-open .blitz-product-decor--3 {
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    left: -1% !important;
    width: min(235px, 47vw) !important;
    transform: rotate(-45deg) scale(.78) !important;
    transition-delay: .06s !important;
  }


  /* ----------------------------------------------------------------------
     9. WHITE — POSIZIONI APERTE
     ---------------------------------------------------------------------- */

  .blitz-product--white.is-open .blitz-product-decor--1 {
    top: 1% !important;
    right: auto !important;
    bottom: auto !important;
    left: 7% !important;
    width: min(145px, 29vw) !important;
    transform: rotate(5deg) scale(.88) !important;
    transition-delay: 0s !important;
  }

  .blitz-product--white.is-open .blitz-product-decor--2 {
    top: 28% !important;
    right: 1% !important;
    bottom: auto !important;
    left: auto !important;
    width: min(135px, 27vw) !important;
    transform: rotate(42deg) scale(.72) !important;
    transition-delay: .025s !important;
  }

  .blitz-product--white.is-open .blitz-product-decor--3 {
    top: auto !important;
    right: auto !important;
    bottom: 8% !important;
    left: 0 !important;
    width: min(150px, 30vw) !important;
    transform: rotate(-25deg) scale(.92) !important;
    transition-delay: .05s !important;
  }

  .blitz-product--white.is-open .blitz-product-decor--4 {
    top: auto !important;
    right: 11% !important;
    bottom: 4% !important;
    left: auto !important;
    width: min(165px, 33vw) !important;
    transform: rotate(5deg) scale(.76) !important;
    transition-delay: .075s !important;
  }
}


/* ========================================================================
   TELEFONI STRETTI
   ======================================================================== */

@media (max-width: 479px) {

  .blitz-products-hero {
    min-height: 390px;
  }

  .blitz-product-panel {
    --blitz-mobile-panel-height: clamp(420px, 112vw, 500px);
  }

  .blitz-product-panel:not(.is-open) .blitz-product-main {
    width: 92vw !important;
  }

  .blitz-product-panel.is-open .blitz-product-visual {
    height: clamp(320px, 96vw, 400px) !important;
    min-height: clamp(320px, 96vw, 400px) !important;
  }

  .blitz-product-panel.is-open .blitz-product-main {
    width: 94vw !important;
  }

  .blitz-product-panel.is-open .blitz-product-copy {
    padding-right: 22px !important;
    padding-left: 22px !important;
  }
}


/* ========================================================================
   ANIMAZIONE DI INVITO AL CLICK
   ======================================================================== */

@keyframes blitz-product-bounce {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}


/* ========================================================================
   ACCESSIBILITÀ — MOVIMENTO RIDOTTO
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {

  .blitz-product-main,
  .blitz-product-decor,
  .blitz-product-copy,
  .blitz-product-visual {
    animation: none !important;
    transition: none !important;
  }

  .blitz-product-panel:not(.is-in-view) .blitz-product-main {
    opacity: 1;
    transform: none;
  }
}



/* ========================================================================
   8. BLITZ — BACKGROUND PRODOTTI RESPONSIVE v1
   Usa le tavole JPG fornite per ottenere lo stesso gradiente su:
   - desktop;
   - mobile chiuso;
   - mobile aperto (.is-open).

   products.css si trova in /css/
   le immagini vanno in /images/products/backgrounds/
   ======================================================================== */

/* ------------------------------------------------------------------------
   8.1 ASSOCIAZIONE TAVOLE / PRODOTTI
   ------------------------------------------------------------------------ */

.blitz-product--original {
  --blitz-product-bg-desktop:
    url("../images/products/backgrounds/back_bg_01_desktop.jpg");
  --blitz-product-bg-mobile:
    url("../images/products/backgrounds/back_bg_01_mobile.jpg");
  --blitz-product-bg-mobile-open:
    url("../images/products/backgrounds/back_bg_01_mobile-hover.jpg");
  --blitz-product-copy-shade: rgba(90, 0, 5, .38);
}

.blitz-product--watermelon {
  --blitz-product-bg-desktop:
    url("../images/products/backgrounds/back_bg_02_desktop.jpg");
  --blitz-product-bg-mobile:
    url("../images/products/backgrounds/back_bg_02_mobile.jpg");
  --blitz-product-bg-mobile-open:
    url("../images/products/backgrounds/back_bg_02_mobile-hover.jpg");
  --blitz-product-copy-shade: rgba(0, 42, 4, .42);
}

.blitz-product--peach {
  --blitz-product-bg-desktop:
    url("../images/products/backgrounds/back_bg_03_desktop.jpg");
  --blitz-product-bg-mobile:
    url("../images/products/backgrounds/back_bg_03_mobile.jpg");
  --blitz-product-bg-mobile-open:
    url("../images/products/backgrounds/back_bg_03_mobile-hover.jpg");
  --blitz-product-copy-shade: rgba(77, 0, 75, .36);
}

.blitz-product--sugar-free {
  --blitz-product-bg-desktop:
    url("../images/products/backgrounds/back_bg_04_desktop.jpg");
  --blitz-product-bg-mobile:
    url("../images/products/backgrounds/back_bg_04_mobile.jpg");
  --blitz-product-bg-mobile-open:
    url("../images/products/backgrounds/back_bg_04_mobile-hover.jpg");
  --blitz-product-copy-shade: rgba(0, 3, 91, .43);
}

.blitz-product--tropical {
  --blitz-product-bg-desktop:
    url("../images/products/backgrounds/back_bg_05_desktop.jpg");
  --blitz-product-bg-mobile:
    url("../images/products/backgrounds/back_bg_05_mobile.jpg");
  --blitz-product-bg-mobile-open:
    url("../images/products/backgrounds/back_bg_05_mobile-hover.jpg");
  --blitz-product-copy-shade: rgba(137, 46, 0, .36);
}

.blitz-product--white {
  --blitz-product-bg-desktop:
    url("../images/products/backgrounds/back_bg_06_desktop.jpg");
  --blitz-product-bg-mobile:
    url("../images/products/backgrounds/back_bg_06_mobile.jpg");
  --blitz-product-bg-mobile-open:
    url("../images/products/backgrounds/back_bg_06_mobile-hover.jpg");
  --blitz-product-copy-shade: rgba(0, 69, 123, .48);
}


/* ------------------------------------------------------------------------
   8.2 DESKTOP
   La tavola desktop resta uguale sia a riposo sia in hover.
   Il ::before già esistente continua a scurire il lato del testo.
   ------------------------------------------------------------------------ */

.blitz-product--original,
.blitz-product--watermelon,
.blitz-product--peach,
.blitz-product--sugar-free,
.blitz-product--tropical,
.blitz-product--white {
  background-color: var(--product-bg-a) !important;
  background-image: var(--blitz-product-bg-desktop) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}


/* ------------------------------------------------------------------------
   8.3 MOBILE / TOUCH
   - pannello chiuso: tavola *_mobile.jpg;
   - pannello aperto: tavola *_mobile-hover.jpg;
   - ::after esegue il crossfade senza interferire con testo e immagini;
   - ::before applica solo una velatura coerente col colore del prodotto.
   ------------------------------------------------------------------------ */

@media (max-width: 959px), (hover: none) {

  .blitz-product--original,
  .blitz-product--watermelon,
  .blitz-product--peach,
  .blitz-product--sugar-free,
  .blitz-product--tropical,
  .blitz-product--white {
    background-image: var(--blitz-product-bg-mobile) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }

  /*
   * Il pannello usa già ::before per la velatura del testo.
   * ::after viene quindi riservato alla tavola mobile aperta.
   */
  .blitz-product-panel::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    content: "";
    background-color: transparent;
    background-image: var(--blitz-product-bg-mobile-open);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .32s ease;
  }

  .blitz-product-panel.is-open::after {
    opacity: 1;
  }
	
  /* Elementi testuali nascosti prima dell'apertura */
  .blitz-product-copy .blitz-product-title,
  .blitz-product-copy .blitz-product-format,
  .blitz-product-copy .blitz-product-description,
  .blitz-product-copy .blitz-product-accordion {
    opacity: 0;
    transform: translateY(22px);

    transition:
      opacity .28s ease,
      transform .42s cubic-bezier(.2, .75, .25, 1);
  }

  /* Comparsa dal basso verso l'alto */
  .blitz-product-panel.is-open
  .blitz-product-copy .blitz-product-title,
  .blitz-product-panel.is-open
  .blitz-product-copy .blitz-product-format,
  .blitz-product-panel.is-open
  .blitz-product-copy .blitz-product-description,
  .blitz-product-panel.is-open
  .blitz-product-copy .blitz-product-accordion {
    opacity: 1;
    transform: translateY(0);
  }

  /* Piccola sequenza progressiva */
  .blitz-product-panel.is-open
  .blitz-product-copy .blitz-product-title {
    transition-delay: .15s;
  }

  .blitz-product-panel.is-open
  .blitz-product-copy .blitz-product-format {
    transition-delay: .25s;
  }

  .blitz-product-panel.is-open
  .blitz-product-copy .blitz-product-description {
    transition-delay: .35s;
  }

  .blitz-product-panel.is-open
  .blitz-product-copy .blitz-product-accordion {
    transition-delay: .45s;
  }
	
  .blitz-product-panel:not(.is-open)
  .blitz-product-copy .blitz-product-title,
  .blitz-product-panel:not(.is-open)
  .blitz-product-copy .blitz-product-format,
  .blitz-product-panel:not(.is-open)
  .blitz-product-copy .blitz-product-description,
  .blitz-product-panel:not(.is-open)
  .blitz-product-copy .blitz-product-accordion {
    transition-delay: 0s;
  }
	
  .blitz-product-main {
    filter: none !important;
  }

  /*
   * Sostituisce la vecchia velatura blu universale.
   * La parte bassa rimane leggibile, ma conserva il colore del gusto.
   */
  .blitz-product-panel.is-open::before {
    z-index: 1;
    opacity: 1 !important;
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        transparent 44%,
        color-mix(in srgb, var(--blitz-product-copy-shade) 35%, transparent) 62%,
        var(--blitz-product-copy-shade) 100%
      ) !important;
  }

  /*
   * Fallback per browser senza color-mix().
   * La regola successiva viene usata soltanto quando color-mix non è supportato.
   */
  @supports not (color: color-mix(in srgb, red, blue)) {
    .blitz-product-panel.is-open::before {
      background:
        linear-gradient(
          180deg,
          transparent 0%,
          transparent 44%,
          var(--blitz-product-copy-shade) 100%
        ) !important;
    }
  }
}


/* ------------------------------------------------------------------------
   8.4 MOVIMENTO RIDOTTO
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .blitz-product-panel::after {
    transition: none !important;
  }
}