.fa-stock-limit-alert {
  position: fixed;
  z-index: 10050;
  top: 148px;
  left: 50%;
  display: flex;
  width: min(560px, calc(100vw - 32px));
  flex-direction: column;
  gap: 3px;
  padding: 15px 18px;
  border: 1px solid #b42318;
  border-radius: 10px;
  background: #d92d20;
  box-shadow: 0 16px 36px rgba(110, 25, 17, .26);
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -12px);
  transition: opacity .2s ease, transform .2s ease;
}

.fa-stock-limit-alert strong {
  font-family: var(--sans, sans-serif);
  font-size: 15px;
}

.fa-stock-limit-alert.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 640px) {
  .fa-stock-limit-alert {
    top: 104px;
  }
}

/* Cart page: hide the raw native stock error ("Solo puedes comprar N ...")
   that PrestaShop prints above the title. We replace it with an inline note on
   the affected line and a friendly dialog shown when the customer tries to
   check out (see cart-page.js). */
.page-cart #notifications .alert-danger {
  display: none !important;
}

/* Affected cart line: soft flag so the customer sees which item is the problem. */
.page-cart .product-line.fa-stock-line-flag {
  border-radius: 12px;
  outline: 2px solid rgba(180, 35, 24, .55);
  outline-offset: 3px;
}

.fa-cart-stock-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  color: #a3271c;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
}

.fa-cart-stock-note::before {
  content: "\26A0";
  font-weight: 700;
  line-height: 1.2;
}

/* Friendly checkout-block dialog. */
.fa-stock-modal {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 27, 45, .55);
  opacity: 0;
  transition: opacity .2s ease;
}

.fa-stock-modal.is-visible {
  opacity: 1;
}

.fa-stock-modal__card {
  width: min(460px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 26px 26px 22px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 27, 45, .30);
  transform: translateY(10px);
  transition: transform .2s ease;
}

.fa-stock-modal.is-visible .fa-stock-modal__card {
  transform: translateY(0);
}

.fa-stock-modal__title {
  margin: 0 0 12px;
  color: var(--dark, #0f1b2d);
  font-family: var(--sans, sans-serif);
  font-size: 22px;
  line-height: 1.2;
}

.fa-stock-modal__intro {
  margin: 0 0 16px;
  color: #3f4a5a;
  font-size: 15px;
  line-height: 1.5;
}

.fa-stock-modal__list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.fa-stock-modal__list li {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid rgba(180, 35, 24, .20);
  border-left: 4px solid #b42318;
  border-radius: 10px;
  background: #fdf1f0;
}

.fa-stock-modal__name {
  color: var(--dark, #0f1b2d);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
}

.fa-stock-modal__detail {
  color: #7a241b;
  font-size: 13px;
  line-height: 1.35;
}

.fa-stock-modal__hint {
  margin: 0 0 20px;
  color: #3f4a5a;
  font-size: 14px;
  line-height: 1.5;
}

.fa-stock-modal__actions {
  display: flex;
  justify-content: flex-end;
}

.fa-stock-modal__btn {
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  background: var(--accent, #004996);
  color: #fff;
  font-family: var(--sans, sans-serif);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.fa-stock-modal__btn:hover {
  filter: brightness(1.06);
}