.sketchup-variations {
  margin-top: var(--adebeo-spacing-gap);
  display: flex;
  gap: var(--adebeo-spacing-inner);
}

.sketchup-variation {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-basis: 33.33%;
  gap: var(--adebeo-spacing-s);
}

.sketchup-variation .clear {
  display: none;
}

.sketchup-variation {
  border-radius: var(--adebeo-border-radius-xs);
  border: 2px solid var(--adebeo-color-primary);
  padding: var(--adebeo-spacing-m) var(--adebeo-spacing-xm);
}

/* price */
.sketchup-variation .sketchup-variation__price {
  font-size: var(--adebeo-font-size-h2);
  color: var(--adebeo-color-primary);
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.sketchup-variation .sketchup-variation__price:has(del) {
  color: var(--adebeo-accent-color);
}

.sketchup-variation .sketchup-variation__price:not(:has(del))::before {
  content: 'Prix :';
  width: 100%;
  display: block;
  font-size: 80%;
  line-height: 1.1;
  color: transparent;
}

.sketchup-variation .screen-reader-text {
  position: fixed !important;
}

.sketchup-variation .sketchup-variation__price del {
  display: block;
  font-size: 80%;
  line-height: 1.1;
  font-weight: 400;
  color: var(--adebeo-color-primary);
}

.sketchup-variation .sketchup-variation__price:has(del) ins {
  text-decoration: none;
}

.sketchup-variation__actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

/*  MOTIF */

/* Pseudo-élément pour le motif SVG blanc */
.sketchup-variation::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/wp-content/themes/adebeo6/assets/images/pack.svg') center/cover no-repeat;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.3s;
}

/* Pseudo-élément pour le motif SVG coloré, masqué par défaut */
.sketchup-variation::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('/wp-content/themes/adebeo6/assets/images/pack_hover.svg') center/cover no-repeat;
  opacity: 0;
  pointer-events: none;
  mask-image: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    white 0%,
    white calc(var(--r, 0%) - 5%),
    rgba(255, 255, 255, 0.5) var(--r, 0%),
    transparent calc(var(--r, 0%) + 8%)
  );
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  transition: opacity 0.3s;
}

.sketchup-variation:hover::after {
  opacity: 1;
}

/* Avantages */

.sketchup-variation__avantages {
  margin: var(--adebeo-spacing-xs) 0 0 0;
  padding: 0;
  width: 100%;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.sketchup-variation__avantages li {
  position: relative;
  padding-left: 25px;
  display: flex;
  gap: var(--adebeo-spacing-xs);
  justify-content: space-between;
}

.sketchup-variation__avantages li:before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  display: block;
  width: 8px;
  height: 14px;
  border-bottom: 2px solid var(--adebeo-color-primary);
  border-right: 2px solid var(--adebeo-color-primary);
  transform: rotate(45deg);
}

.sketchup-variation__image img {
  max-width: 45vw;
  height: auto !important;
  object-fit: contain;
}

@media (min-width: 1024px) {
  .sketchup-variation__avantages {
    margin: var(--adebeo-spacing-s) 0 0 0;
  }
  :is(body.page, body.home) .sketchup-variations {
    width: 1350px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  :is(body.page, body.home) .sketchup-variation .sketchup-variation__price {
    font-size: clamp(20px, 1.6vw, 3rem);
  }
  :is(body.page, body.home) .sketchup-variation__typologie {
    font-size: clamp(20px, 1.4vw, 3rem);
  }
}

@media (min-width: 768px) {
  .sketchup-variation__image img {
    max-width: 100%;
  }
}

@media (max-width: 1023px) {
  .sketchup-variations .sketchup-variation {
    flex-basis: 80vw;
    min-width: 80vw;
  }

  .sketchup-variation {
    padding: var(--adebeo-spacing-s) var(--adebeo-spacing-xs);
    gap: var(--adebeo-spacing-xs);
  }
  .sketchup-variation__avantages {
    gap: 4px;
    font-size: var(--adebeo-font-size-text-sm);
  }
}

@media (max-width: 1023px) and (min-width: 520px) {
  .sketchup-variations .sketchup-variation {
    flex-basis: 400px;
    min-width: 400px;
  }
}