/* The overlay is HTML; product links and gallery controls retain pointer input. */
.dms-pi-media {
  position: relative;
  isolation: isolate;
}
.product__carousel .carousel-inner {
  position: relative;
}
.dms-pi {
  color: #111710;
  font-family: inherit;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-align: left;
}
.dms-pi--list,
.dms-pi--product {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 2.8rem 0.65rem 0.65rem;
  overflow: hidden;
  min-width: 0;
  box-sizing: border-box;
}
.dms-pi__slot {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  min-height: 0;
}
.dms-pi__slot--top {
  justify-content: flex-start;
}
.dms-pi__slot--center {
  justify-content: center;
}
.dms-pi__slot--bottom {
  justify-content: flex-end;
}
.dms-pi__text {
  align-self: flex-start;
  max-width: 100%;
  padding: var(--dms-pi-padding);
  border-radius: var(--dms-pi-radius);
  background: var(--dms-pi-background);
  color: var(--dms-pi-color);
  box-shadow: 0 1px 5px #0002;
  white-space: pre-line;
  font-family: var(--dms-pi-family);
  font-weight: var(--dms-pi-weight);
  font-style: var(--dms-pi-font-style);
  font-size: var(--dms-pi-font-list);
  text-shadow: var(--dms-pi-shadow);
  box-sizing: border-box;
}
.dms-pi--align-left .dms-pi__text {
  align-self: flex-start;
  text-align: left;
}
.dms-pi--align-center .dms-pi__text {
  align-self: center;
  text-align: center;
}
.dms-pi--align-right .dms-pi__text {
  align-self: flex-end;
  text-align: right;
}
.dms-pi__scores {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.85rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 243, 0.97));
  border: 1px solid rgba(60, 95, 53, 0.16);
  border-radius: 0.5rem;
  box-shadow: 0 3px 12px #183e241a, 0 1px 2px #183e2410;
  display: grid;
  gap: 0.6rem;
}
.dms-pi__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
}
.dms-pi__name {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: #243e2a;
}
.dms-pi__value {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  min-width: 0;
}
.dms-pi__bar {
  display: flex;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.dms-pi__segment {
  height: 9px;
  flex: 1;
  min-width: 0;
  background: #dfe6df;
  border-radius: 3px;
}
.dms-pi__segment--filled {
  background: #298451;
}
.dms-pi__number {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--pi-score-tint, #e6f2e9);
  color: var(--pi-score-ink, #24633b);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dms-pi--product {
  padding: 3rem 0.65rem 1rem;
}
.dms-pi--product .dms-pi__text {
  font-size: var(--dms-pi-font-product);
}
.dms-pi--block {
  margin-block: 2rem;
}
.dms-pi--block .dms-pi__scores {
  padding: 1rem;
}
/* The media dimensions come only from the photograph, never from the overlay. */
.dms-pi-media .product-miniature__image-container picture,
.dms-pi-media .product-miniature__image,
.product__carousel .carousel-item picture,
.product__carousel .carousel-item picture > img {
  display: block;
}
@media (max-width: 575px) {
  .dms-pi--list {
    padding: 2.6rem 0.35rem 0.4rem;
    gap: 0.25rem;
  }
  .dms-pi--list .dms-pi__slot {
    gap: 0.25rem;
  }
  .dms-pi--list .dms-pi__scores {
    padding: 0.35rem;
    gap: 0.25rem;
  }
  .dms-pi--list .dms-pi__row {
    gap: 0.3rem;
  }
  .dms-pi--list .dms-pi__name {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dms-pi--list .dms-pi__number {
    font-size: 0.65rem;
  }
  .dms-pi--list .dms-pi__value {
    gap: 0.2rem;
  }
  .dms-pi--list .dms-pi__bar {
    gap: 2px;
  }
  .dms-pi--product {
    padding: 2.8rem 0.65rem 2.8rem;
    gap: 0.25rem;
  }
  .dms-pi--product .dms-pi__scores {
    padding: 0.4rem 0.5rem;
    gap: 0.2rem;
  }
  .dms-pi--product .dms-pi__row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 0.35rem;
  }
  .dms-pi--product .dms-pi__text {
    font-size: var(--dms-pi-font-mobile);
  }
  .dms-pi--product .dms-pi__name {
    font-size: 0.9rem;
  }
}
/* Top means the image's top edge. Native badges flow after the text, never before it. */
.dms-pi--text-top {
  padding-top: 0;
}
.dms-pi .dms-pi__flags {
  position: static;
  inset: auto;
  padding: 0;
  margin: 0;
  width: 100%;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  pointer-events: none;
}
.product-miniature__top:has(.dms-pi--text-top) > .product-flags {
  display: none;
}

/* The panel uses its own 8px margin; overlay padding stays neutral. */
.dms-pi--scores-top {
  padding-top: 0;
}
.dms-pi--scores-bottom {
  padding-bottom: 0;
}
.product-miniature__top:has(.dms-pi--scores-top) > .product-flags {
  display: none;
}

/* Text and characteristics are each inset 8px from their selected edge. */
.dms-pi--text-bottom {
  padding-bottom: 0;
}
.dms-pi--list .dms-pi__slot--top > .dms-pi__text,
.dms-pi--product .dms-pi__slot--top > .dms-pi__text {
  margin-top: 8px;
}
.dms-pi--list .dms-pi__slot--bottom > .dms-pi__text,
.dms-pi--product .dms-pi__slot--bottom > .dms-pi__text {
  margin-bottom: 8px;
}

.dms-pi--scores-top .dms-pi__slot--top > .dms-pi__scores {
  margin-top: 8px;
}
.dms-pi--scores-bottom .dms-pi__slot--bottom > .dms-pi__scores {
  margin-bottom: 8px;
}

/* Five steps from green (low) through yellow to red (high). The number remains explicit. */
.dms-pi__segment--filled:nth-child(2) { background: #80a938; }
.dms-pi__segment--filled:nth-child(3) { background: #e6ba35; }
.dms-pi__segment--filled:nth-child(4) { background: #e78b32; }
.dms-pi__segment--filled:nth-child(5) { background: #d5524a; }
.dms-pi__row[data-score="2"] { --pi-score-tint: #edf2df; --pi-score-ink: #506b21; }
.dms-pi__row[data-score="3"] { --pi-score-tint: #fff3cf; --pi-score-ink: #79590c; }
.dms-pi__row[data-score="4"] { --pi-score-tint: #ffebd8; --pi-score-ink: #8a450e; }
.dms-pi__row[data-score="5"] { --pi-score-tint: #fbe5e2; --pi-score-ink: #9b332d; }
.dms-pi__row + .dms-pi__row {
  border-top: 1px solid rgba(60, 95, 53, 0.1);
  padding-top: 0.5rem;
}
.dms-pi--list .dms-pi__name { font-size: 0.85rem; }
@media (max-width: 575px) {
  .dms-pi--list .dms-pi__name { font-size: 0.75rem; }
  .dms-pi--list .dms-pi__number { padding-inline: 3px; }
  .dms-pi--list .dms-pi__segment { height: 7px; }
  .dms-pi--list .dms-pi__row + .dms-pi__row { padding-top: 0.25rem; }
  .dms-pi--product .dms-pi__scores { padding: 0.6rem 0.65rem; gap: 0.4rem; }
}

/* Independent product profiles: only the matching viewport variant participates in layout/accessibility. */
.dms-pi--viewport-mobile { display: none; }
@media (max-width: 575px) {
  .dms-pi--viewport-desktop { display: none; }
  .dms-pi--viewport-mobile { display: flex; }
}

.product__carousel:has(.dms-pi--text-top:not(.dms-pi--viewport-mobile), .dms-pi--scores-top:not(.dms-pi--viewport-mobile)) > .product-flags { display:none; }
@media (max-width:575px) {
  .product__carousel:has(.dms-pi--viewport-mobile) > .product-flags { display:flex; }
  .product__carousel:has(.dms-pi--viewport-mobile.dms-pi--text-top, .dms-pi--viewport-mobile.dms-pi--scores-top) > .product-flags { display:none; }
}

/* Compact characteristics only on catalogue images (also shared by the BO list preview). */
.dms-pi--list .dms-pi__scores {
  padding: 6px 8px;
  gap: 3px;
}
.dms-pi--list .dms-pi__row {
  gap: 6px;
}
.dms-pi--list .dms-pi__row + .dms-pi__row {
  padding-top: 3px;
}
.dms-pi--list .dms-pi__name {
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dms-pi--list .dms-pi__value { gap: 3px; }
.dms-pi--list .dms-pi__bar { gap: 2px; }
.dms-pi--list .dms-pi__segment { height: 6px; border-radius: 2px; }
.dms-pi--list .dms-pi__number { font-size: 10px; line-height: 1.4; padding: 0 3px; }
@media (max-width: 575px) {
  .dms-pi--list .dms-pi__scores { padding: 4px 5px; gap: 2px; }
  .dms-pi--list .dms-pi__row { gap: 4px; }
  .dms-pi--list .dms-pi__row + .dms-pi__row { padding-top: 2px; }
}

/* Tighten stacked text and scores in catalogue cards, preserving the outer 8px inset. */
.dms-pi--list .dms-pi__slot:has(> .dms-pi__text):has(> .dms-pi__scores) {
  gap: 2px;
}
.dms-pi--list .dms-pi__slot--top:has(> .dms-pi__scores) > .dms-pi__text {
  margin-top: 0;
}
.dms-pi--list .dms-pi__slot--bottom:has(> .dms-pi__text) > .dms-pi__scores {
  margin-bottom: 4px;
}
.dms-pi--list .dms-pi__slot--bottom:has(> .dms-pi__scores) > .dms-pi__text {
  margin-bottom: 0;
}