.fochavailability {
  clear: both;
  margin: 1rem 0;
}

.fochavailability__badge {
  align-items: center;
  background: #263dbf;
  color: #fff;
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 700;
  gap: 0.45rem;
  line-height: 1.25;
  max-width: 100%;
  padding: 0.65rem 0.9rem;
}

.fochavailability__badge--out-of-stock {
  background: #ff6b63;
}

.fochavailability__badge--in-stock {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #198754 !important;
  padding: 0 !important;
}

.fochavailability--catalog {
  text-align: center !important;
}

.fochavailability__icon {
  flex: 0 0 auto;
  font-size: 1.05rem;
  line-height: 1;
}

.fochavailability__date {
  color: #555;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}

/* Keep product copy readable without changing its formatting. The selectors
 * cover native PrestaShop markup and the Warehouse theme's product tabs. */
.product-description-short,
.product-description-short :where(p, span, li, strong, b, em, i, a),
.product-description,
.product-description :where(p, span, li, strong, b, em, i, a, h1, h2, h3, h4, h5, h6, td, th),
#description .rte,
#description .rte :where(p, span, li, strong, b, em, i, a, h1, h2, h3, h4, h5, h6, td, th),
.product-information .product-description,
.product-information .product-description :where(p, span, li, strong, b, em, i, a, h1, h2, h3, h4, h5, h6, td, th) {
  color: #000 !important;
}

@media (max-width: 767px) {
  .fochavailability__badge {
    width: 100%;
  }
}