/* omaggi */

p > .visually-hidden:focus {
  position: static;
}
.offers__footnote :any-link {
  color: var(--color-darkblue);
  font-weight: bolder;
}

.offers {
  .cnt:has(&) {
    --left: auto;
    --right: 0;
    --rotation: 13deg;
    --offset: -50%;

    /* background: linear-gradient(135deg, var(--color-paleorange), var(--color-paleblue)); */
    --x-0: 13%;
    --c-0: hsla(100.00000000000013, 27%, 77%, 0.4);
    --y-0: 82%;
    --x-1: 85%;
    --c-1: hsla(195.00000000000043, 27%, 85%, 1);
    --y-1: 80%;
    --c-2: hsla(40, 53%, 92%, 1);
    --x-2: 60%;
    --y-2: 24%;
    background-color: hsla(358.0000000000001, 0%, 100%, 1);
    background-image: radial-gradient(
        circle at var(--x-0) var(--y-0),
        var(--c-0) var(--s-start-0),
        transparent var(--s-end-0)
      ),
      radial-gradient(
        circle at var(--x-1) var(--y-1),
        var(--c-1) var(--s-start-1),
        transparent var(--s-end-1)
      ),
      radial-gradient(
        circle at var(--x-2) var(--y-2),
        var(--c-2) var(--s-start-2),
        transparent var(--s-end-2)
      );
    animation: hero-gradient-animation2 10s linear infinite alternate-reverse;
    background-blend-mode: normal, normal, normal;
    background: var(--color-promo);
  }

  .cnt:has(&:is(.offers--inverted)) {
    --left: 0;
    --right: auto;
    --rotation: -13deg;
    background: linear-gradient(
      315deg,
      var(--color-palegreen),
      var(--color-paleblue)
    );

    h2 {
      left: auto;
      right: var(--padding);
    }

    .offers__intro {
      justify-content: flex-end;
      text-align: right;
    }
  }

  .offers__intro {
    display: flex;
    flex-direction: column;
    @media (width >= 48rem) {
      p {
        padding-block: 0 3rem;
      }

      p:has(+ ul) {
        padding-block: 0 1.5rem;
      }
    }

    p + ul {
      padding: 0;
      margin: 0;
      list-style-type: none;
      list-style-position: inside;

      li {
        color: var(--color-text);

        &::marker {
          content: "";
        }
      }
    }

    em {
      display: block;
      font-style: normal;
      font-weight: 500;
      /*font-size: 1.5rem;*/
      color: var(--color-lightblue);
    }

    @media (width < 48rem) {
      justify-content: center !important;
      text-align: center !important;
    }
  }

  h3 {
    background: none;
    padding-inline: 0;
    inline-size: 100%;
  }

  .offers__gift {
    inline-size: max(20rem, 40%);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    overflow: visible;
    transform: rotateZ(var(--rotation));
    display: flex;
    justify-content: center;
    align-items: center;
    transition: scale 0.33s 0s;

    &:hover {
      scale: 1.1;
    }

    img {
      max-block-size: 100%;
    }

    @media (width < 48rem) {
      margin: 0 auto 1rem auto;
    }

    img {
      margin: 0 auto;
      display: block;
      aspect-ratio: 1;
      max-inline-size: 100%;
      filter: drop-shadow(0px 0px 5px #333);
    }

    @media (width >= 48rem) {
      margin: 0 auto;
      inline-size: min(20rem, 20vw);
      position: absolute;
      z-index: 1;
      top: -2rem;
      left: var(--left);
      right: 1rem;
      border: unset;
      background: none;
      border-radius: 0;
      overflow: visible;
      transform: translate(0, -25%) rotateZ(var(--rotation));
      animation: shake 10s linear 0s infinite;
    }
  }

  .offers__cta {
    display: flex;
    margin-block-start: var(--padding);
    justify-content: flex-end;
  }

  &.offers--list {
    --right: 2rem;
    --left: auto;

    &.offers--inverted {
      --right: auto;
      --left: 2rem;
    }

    .offers__intro {
      @media (width >= 48rem) {
        margin-block-start: 4rem;
      }
    }
  }

  h2 {
    border: 1px var(--color-border) solid;
    border-radius: 5px;
    /* font-size: 1rem;*/
    background: var(--color-white);

    @media (width < 48rem) {
      position: static !important;
      margin-inline: auto !important;
      text-align: center;
      text-wrap: balance;
      transform: none !important;
    }
  }
}

@media (width >= 48rem) {
  section:has(.offers--list):hover {
    .offers__gift {
      animation-play-state: paused;
    }
  }
}

.allpromo .cnt:target {
  @media (width >= 64rem) {
    scroll-margin-block-start: 12rem !important;
  }
}

@keyframes shake {
  1%,
  3% {
    transform: translate(-3px, -25%) rotateZ(var(--rotation));
  }
  2%,
  4% {
    transform: translate(3px, -25%) rotateZ(var(--rotation));
  }

  5%,
  100% {
    transform: translate(0, -25%) rotateZ(var(--rotation));
  }
}