/* EU energy label next to the price (product/energy_label.twig). The class on the arrow must be as large as the price,
   so the sizes follow .et-product-price__current strong (product page) and .et-product-card__price strong (listings). */
.et-energy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  width: 100%;
  margin: 2px 0;
}

.et-energy__arrow {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  color: #fff;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: clamp(28px, 5vw, 38px);
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
}

.et-energy__arrow:focus-visible {
  outline: 3px solid #1d1d1b;
  outline-offset: 3px;
}

/* Range of the classes on this label, top above bottom (as the rescaled labels show it) */
.et-energy__range {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-width: 2.6em;
  padding: 3px 4px;
  border: 1px solid #1d1d1b;
  border-right: 0;
  background: #fff;
  color: #1d1d1b;
  font-size: 0.3em;
  line-height: 1.1;
}

.et-energy__range-arrow {
  flex: 1 1 auto;
  width: 1px;
  min-height: 4px;
  margin: 1px 0;
  background: #1d1d1b;
}

.et-energy__class {
  display: inline-flex;
  align-items: center;
  padding: 0.1em 0.72em 0.1em 0.22em;
  clip-path: polygon(0 0, calc(100% - 0.5em) 0, 100% 50%, calc(100% - 0.5em) 100%, 0 100%);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}

.et-energy__class sup {
  top: -0.55em;
  margin-left: 0.02em;
  font-size: 0.55em;
}

/* Colours of the seven classes of the label (CMYK of Annex III 626/2011 and 811/2013) */
.et-energy__arrow--1 .et-energy__class { background: #00a651; }
.et-energy__arrow--2 .et-energy__class { background: #4cb848; }
.et-energy__arrow--3 .et-energy__class { background: #bed630; }
.et-energy__arrow--4 .et-energy__class { background: #fff200; }
.et-energy__arrow--5 .et-energy__class { background: #fdb913; }
.et-energy__arrow--6 .et-energy__class { background: #f37021; }
.et-energy__arrow--7 .et-energy__class { background: #ed1c24; }

.et-energy__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: #4d4447;
  font-size: 13px;
  line-height: 1.35;
}

.et-energy__fiche {
  font-weight: 600;
  text-decoration: underline;
}

.et-energy--compact {
  gap: 4px 8px;
  margin: 4px 0 0;
}

.et-energy--compact .et-energy__arrow {
  font-size: clamp(18px, 2vw, 22px);
}

.et-energy--compact .et-energy__range {
  min-width: 2.4em;
  padding: 2px 3px;
  font-size: 0.36em;
}

.et-energy--compact .et-energy__text {
  font-size: 12px;
}

/* On the cards only the arrow and the fiche link; the other classes stay on the product page */
.et-energy--compact .et-energy__note {
  display: none;
}

.et-module-products .et-energy--compact .et-energy__arrow {
  font-size: clamp(14px, 1.3vw, 17px);
}

@media (max-width: 767px) {
  .et-energy--compact .et-energy__arrow {
    font-size: clamp(17px, 5vw, 20px);
  }
}

@media (max-width: 390px) {
  .et-energy:not(.et-energy--compact) .et-energy__arrow {
    font-size: clamp(24px, 9vw, 30px);
  }
}

/* The whole label after the first click (eletur-energy-label-20260930.js) */
.et-energy-dialog {
  width: min(92vw, 460px);
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.et-energy-dialog::backdrop {
  background: rgba(20, 16, 18, 0.62);
}

.et-energy-dialog__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid #eee4e6;
  font-weight: 700;
}

.et-energy-dialog__close {
  min-width: 44px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid #d9cdd0;
  border-radius: 6px;
  background: #fff;
  font-weight: 600;
  cursor: pointer;
}

.et-energy-dialog__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(94vh - 60px);
  object-fit: contain;
  /* If the image fails, its alternative text (with the class) shows as large as the price */
  font-size: clamp(28px, 5vw, 38px);
  font-weight: 700;
}

@media print {
  .et-energy__arrow {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}