/*
 * alterbadge — front styles
 *
 * Tokens Figma:
 *   - Tag primary:  bg grey-700 #202020 / text grey-100 #ededf3
 *   - Tag accent:   bg papaya  #ffefd0 / text grey-900 #0f0f0f
 *   - Tag ghost:    transparent / border 2px grey-900
 *   - Radius small: 3px
 *   - Font:         Brockmann Medium 15px (inherited from theme)
 *
 * Reuses theme variables (--as-*) with safe literal fallbacks.
 * Zero !important, no Bootstrap coupling.
 */

.ab-wrapper {
  --ab-badge-radius:      3px;
  --ab-badge-pad-x:       10px;
  --ab-badge-pad-y:       2px;
  --ab-badge-font-size:   15px;
  --ab-badge-font-weight: 500;
  --ab-badge-line-height: 1.5;
  --ab-badge-gap:         8px;

  --ab-primary-bg: var(--as-grey-700, #202020);
  --ab-primary-fg: var(--as-grey-100, #ededf3);

  --ab-accent-bg:  var(--as-papaya,   #ffefd0);
  --ab-accent-fg:  var(--as-grey-900, #0f0f0f);

  --ab-ghost-fg:   var(--as-grey-900, #0f0f0f);
}

/* ------------------------------------------------------------
 * Layout zones
 * ------------------------------------------------------------ */

.product-badges-info.ab-wrapper,
.product-extra-features.ab-wrapper,
.ab-cart-line-badges.ab-wrapper,
.ab-cart-modal-badges.ab-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ab-badge-gap);
  margin-top: 8px;
  /* V29-B-9-c ABD-10: isolate layout/paint so neighbour theme blocks can't
   * trigger reflow when the badge count changes (mitigates CSS scope leak
   * risk flagged by silent-failure-hunter on max-budget toggles). */
  contain: layout paint;
}

/* V29-B-9-c ABD-10: product header icons (SVG pictograms) keep the flex
 * flow naturel — no more absolute positioning. The legacy
 * `position: absolute; top: 0; right: 32px;` hack on the second column
 * forced the icons to overlay the breadcrumb row, which broke on theme
 * variants + mobile viewports + RTL contexts. We hand the placement
 * responsibility back to the theme (which already has a dedicated slot
 * via the displayAbProductHeaderIcons hook). */
.product-advantages-icons.ab-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  contain: layout paint;
}

.product-advantages-icons .ab-icon {
  display: inline-block;
  height: 32px;
  width: auto;
}

/* ------------------------------------------------------------
 * Badge
 * ------------------------------------------------------------ */

.ab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ab-badge-pad-y, 2px) var(--ab-badge-pad-x, 10px);
  border-radius: var(--ab-badge-radius, 3px);
  font-size: var(--ab-badge-font-size, 15px);
  font-weight: var(--ab-badge-font-weight, 500);
  line-height: var(--ab-badge-line-height, 1.5);
  letter-spacing: -0.01em;
  white-space: nowrap;
  border: 0;
}

/* Variants */
.ab-badge--primary {
  background: var(--ab-primary-bg, #202020);
  color:      var(--ab-primary-fg, #ededf3);
}

.ab-badge--accent,
.ab-badge--adv { /* --adv kept as legacy alias */
  background: var(--ab-accent-bg, #ffefd0);
  color:      var(--ab-accent-fg, #0f0f0f);
}

.ab-badge--ghost {
  background: transparent;
  color:      var(--ab-ghost-fg, #0f0f0f);
  border: 2px solid currentColor;
}

/* Dark-context flip: use on dark miniature cards / dark surfaces */
.product-miniature--dark .ab-badge--primary,
[data-ab-scheme="dark"] .ab-badge--primary {
  background: var(--as-grey-100, #ededf3);
  color:      var(--as-grey-900, #0f0f0f);
}

/* ------------------------------------------------------------
 * Info block (under short description)
 * ------------------------------------------------------------ */

.ab-info-block {
  background: var(--as-grey-200, #dde1e3);
  color:      var(--as-grey-900, #0f0f0f);
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 12px;
}

.ab-info-block__title {
  font-weight: 600;
  margin: 0 0 6px 0;
}

.ab-info-block--grand-format .ab-info-block__title {
  font-size: 18px;
  line-height: 1.3;
}

.ab-info-block--grand-format .ab-info-block__content {
  font-size: 15px;
  line-height: 1.45;
}

.ab-info-block--grand-format-link {
  padding: 10px 12px;
}

.ab-info-block--grand-format-link .ab-badge {
  margin: 0;
}

/* ------------------------------------------------------------
 * Badge rows (stacked primary / accent in cart & modal)
 * ------------------------------------------------------------ */

.ab-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ab-badge-gap, 8px);
}

/* ------------------------------------------------------------
 * Utilities
 * ------------------------------------------------------------ */

.ab-hidden { display: none !important; }

/* ------------------------------------------------------------
 * Responsive — V29-B-9-c ABD-10
 *
 * Tighter density on tablet/mobile so the badge row doesn't push the
 * price/CTA below the fold or overflow the miniature card. Tokens stay
 * authoritative; only `padding` + `gap` + `font-size` shrink.
 * ------------------------------------------------------------ */

@media (max-width: 768px) {
  .ab-wrapper {
    --ab-badge-pad-x:     8px;
    --ab-badge-pad-y:     2px;
    --ab-badge-font-size: 13px;
    --ab-badge-gap:       6px;
  }

  .product-advantages-icons .ab-icon {
    height: 28px;
  }
}

@media (max-width: 425px) {
  .ab-wrapper {
    --ab-badge-pad-x:     7px;
    --ab-badge-pad-y:     1px;
    --ab-badge-font-size: 12px;
    --ab-badge-gap:       4px;
  }

  .product-advantages-icons.ab-wrapper {
    gap: 10px;
  }

  .product-advantages-icons .ab-icon {
    height: 24px;
  }
}