/* SECTION / regulatory strip
   Desktop (Figma 1243:6291, content column 1440 => px / 19.2):
     1440x56.19 = 16/64 padding on #fafaf8, items 24 apart, right aligned;
     label 14/24 600, rating square 24x24 with a 16px degree centred.
   Mobile (Figma 665:5309, project convention => px / 3.75):
     402x87.19 = 16 padding on #ffffff, the same parts wrapped — the two
     rating groups share row 1, the web_site line gets row 2. */

.mlegal {
  background: #fafaf8;
}

.mlegal__row {
  display: flex;
  align-items: center;
  gap: 1.25vw; /* 24 */
  padding: 0.8333vw 3.3333vw; /* 16 / 64 */
}

.mlegal__group {
  display: flex;
  align-items: center;
  gap: 0.2083vw; /* 4 */
  flex-shrink: 0;
}

/* The two rating groups are the spec-sheet trigger. A <button> is what makes
   it reachable by keyboard and announced as a control, so the UA chrome is
   stripped back and it carries the 24 gap the row used to put between the two
   groups — the strip therefore draws exactly as the Figma does. */
.mlegal__trigger {
  display: flex;
  align-items: center;
  gap: 1.25vw; /* 24 */
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* The only affordance: the strip looks identical otherwise, but with nothing
   at all it is an invisible control — and on touch there is no hover to fall
   back on, so the hint has to be permanent. The rating squares stay clean. */
.mlegal__trigger .mlegal__label {
  text-decoration: underline;
  text-underline-offset: 0.1563vw; /* 3 */
}

.mlegal__trigger:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

.mlegal__label,
.mlegal__note {
  margin: 0;
  font-family: var(--f-semibold);
  font-weight: 600;
  font-size: 0.7292vw; /* 14 */
  line-height: 1.7143; /* 24 */
  color: #000;
  white-space: nowrap;
}

/* .safety-container / .pollution-container are locked in style.css
   (inline-flex + direction:ltr) — only the gap is added here, so the squares
   read left-to-right the way the Figma draws them. */
.mlegal__scale {
  gap: 0.2083vw; /* 4 */
}

.mlegal__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25vw; /* 24 */
  height: 1.25vw;
  font-family: var(--f-regular);
  font-weight: 400;
  font-size: 0.8333vw; /* 16 */
  line-height: 1;
  color: #000;
}

.mlegal__box--safety {
  color: #fff;
}

/* the grow-to-fill box: in RTL its start edge is the right one, which is the
   side the Figma has the sentence hugging */
.mlegal__note {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}


/* ============================== MOBILE ============================== */
@media (max-width: 768px) {

  .mlegal,
  .mobile .mlegal {
    background: #fff;
  }

  .mlegal__row,
  .mobile .mlegal__row {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.8667vw 2.1333vw; /* 7 / 8 */
    padding: 4.2667vw var(--gutter); /* 16 */
  }

  .mlegal__group,
  .mobile .mlegal__group {
    gap: 1.0667vw; /* 4 */
  }

  /* same wrap behaviour the row itself has, so a narrow phone can still break
     the two groups onto separate lines instead of overflowing the gutter */
  .mlegal__trigger,
  .mobile .mlegal__trigger {
    flex-wrap: wrap;
    gap: 1.8667vw 2.1333vw; /* 7 / 8 */
  }

  .mlegal__trigger .mlegal__label,
  .mobile .mlegal__trigger .mlegal__label {
    text-underline-offset: 0.5333vw; /* 2 */
  }

  .mlegal__label,
  .mlegal__note,
  .mobile .mlegal__label,
  .mobile .mlegal__note {
    font-size: 3.7333vw; /* 14 */
  }

  .mlegal__scale,
  .mobile .mlegal__scale {
    gap: 1.0667vw; /* 4 */
  }

  .mlegal__box,
  .mobile .mlegal__box {
    width: 6.4vw; /* 24 */
    height: 6.4vw;
    font-size: 4.2667vw; /* 16 */
  }

  /* the Figma wraps the sentence onto its own row under the two groups */
  .mlegal__note,
  .mobile .mlegal__note {
    flex: 1 0 100%;
  }
}