/**
 * BR-002 — Layer B: quantity confirmation strip
 *
 * Inline banner rendered just above the variation add-to-cart area when
 * the user tries to add with qty > 1 without confirming. Styled to be
 * impossible to miss without being abrasive; layout mirrors in RTL.
 */

.br002-qty-strip {
  margin: 0 0 12px 0;
  padding: 12px 14px;
  border: 1px solid #f1c40f;
  border-left-width: 4px;
  background: #fffbea;
  color: #222;
  border-radius: 6px;
  font: inherit;
  line-height: 1.4;
}

/* In RTL the accent stripe should sit on the trailing visual edge. */
[dir="rtl"] .br002-qty-strip,
html[dir="rtl"] .br002-qty-strip {
  border-left-width: 1px;
  border-right-width: 4px;
}

.br002-qty-strip__headline {
  margin: 0 0 4px 0;
  font-weight: 600;
  font-size: 1em;
}

.br002-qty-strip__unit {
  margin: 0 0 4px 0;
  font-size: 0.95em;
  color: #444;
}

.br002-qty-strip__sub {
  margin: 0 0 10px 0;
  font-size: 0.9em;
  color: #555;
}

.br002-qty-strip__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

[dir="rtl"] .br002-qty-strip__actions,
html[dir="rtl"] .br002-qty-strip__actions {
  flex-direction: row-reverse;
}

.br002-qty-strip__confirm,
.br002-qty-strip__reset {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid currentColor;
  padding: 8px 14px;
  border-radius: 4px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  min-height: 38px; /* touch-target safety on mobile */
  background: #fff;
  color: #222;
  transition: background 100ms ease, color 100ms ease;
}

.br002-qty-strip__confirm {
  background: #b45309;
  border-color: #b45309;
  color: #fff;
}

.br002-qty-strip__confirm:hover,
.br002-qty-strip__confirm:focus {
  background: #92400e;
  border-color: #92400e;
}

.br002-qty-strip__reset {
  background: transparent;
  color: #444;
  border-color: #bbb;
}

.br002-qty-strip__reset:hover,
.br002-qty-strip__reset:focus {
  background: #f6f6f6;
}

/* Focus ring — high contrast and doesn't vanish under the theme override. */
.br002-qty-strip__confirm:focus-visible,
.br002-qty-strip__reset:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .br002-qty-strip__confirm,
  .br002-qty-strip__reset {
    transition: none;
  }
}