/* Minimum Quantity — info tooltip ABOVE the quantity field.
   Styled like a help-tip tooltip: a modern dark floating box with white
   text, rounded corners, and a small downward arrow (CSS triangle via a
   rotated square) pointing at the qty box. The raised/floating read comes
   from the floating box + arrow + crisp 1px border edge — never from
   shadow: flat design only, no box-shadow, no backdrop-filter blur.
   Colors come from GLOBAL tokens only: dark background
   --stm-commerce-ink and white-on-dark text --stm-color-on-dark (both
   referenced in modules/storefront/assets/css/design-tokens.css); the
   border edge is the white token mixed toward transparent, so no
   hardcoded color appears here. */
.stm-minqty-notice {
  display: block;
  width: max-content;
  position: relative;
  margin: 0 0 10px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--stm-color-on-dark) 30%, transparent);
  border-radius: 8px;
  background: var(--stm-commerce-ink);
  color: var(--stm-color-on-dark);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.stm-minqty-notice[hidden] {
  display: none;
}
/* Downward arrow, centred at the bottom, pointing at the qty box: a rotated square whose bottom
   half protrudes below the box, carrying the same background and border
   edge so the arrow reads as part of the floating box. */
.stm-minqty-notice::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: var(--stm-commerce-ink);
  border-right: 1px solid color-mix(in srgb, var(--stm-color-on-dark) 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--stm-color-on-dark) 30%, transparent);
  transform: translateX(-50%) rotate(45deg);
}
/* Small "i" in a circle, rendered by CSS/JS — never part of the setting
   text, so the admin's notice text stays clean. */
.stm-minqty-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border: 1px solid var(--stm-color-on-dark);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}