.proso-product-card-action,
.proso-notify-action {
  max-width: 100%;
  min-width: 0;
  text-align: center;
  white-space: normal;
  touch-action: manipulation;
}

.product-item .proso-cart-action.proso-product-card-action {
  width: 10.5rem;
}

/* Long words in list descriptions must not widen a narrow mobile viewport. */
.products-container .list .product-text {
  overflow-wrap: anywhere;
}

/* Keep names and prices equally readable, with the product name as the
   stronger scanning anchor (R-1377). */
.product-item .product-name,
.product-item .price,
.product-item .product-controls > small.d-block {
  text-align: center;
}

.product-item .product-name .h6,
.product-item .price > .h6 {
  font-size: 1.125rem;
  line-height: 1.4;
}

.product-item .product-name .h6 {
  /* Override Frame's Bootstrap font-weight-normal utility on the link. */
  font-weight: 600 !important;
}

.product-item .price > .h6 {
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.product-item .product-controls > small.d-block > .row {
  justify-content: center;
}

.product-item .product-controls > small.d-block > .row > .col {
  flex: 0 1 auto;
  width: auto;
  max-width: calc(100% - 1rem);
}

/* Frame toggles btn-light and btn-danger on card hover. Keep that native
   behaviour, but make the Proso primary action visually stable and legible. */
.product-item .proso-cart-action.btn-cart-add {
  border-color: #2f7a46;
  background-color: #2f7a46;
  color: #fff;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.product-item .proso-cart-action.btn-cart-add:hover {
  border-color: #245e36;
  background-color: #245e36;
  color: #fff;
}

.product-item .proso-cart-action.btn-cart-add:active {
  border-color: #1f512f;
  background-color: #1f512f;
  color: #fff;
}

.product-item .proso-cart-action.btn-cart-add:focus {
  color: #fff;
}

.product-item .proso-cart-action.btn-cart-add [class*="ft-icon"] {
  color: #fff !important;
}

.product-item .proso-notify-action.btn-cart-add {
  border-color: #2f7a46;
  background-color: transparent;
  color: #2f7a46;
}

.product-item .proso-notify-action.btn-cart-add:hover,
.product-item .proso-notify-action.btn-cart-add:focus {
  border-color: #2f7a46;
  background-color: #edf7f0;
  color: #245e36;
}

.proso-stock-notify-label {
  min-width: 0;
  overflow-wrap: break-word;
  white-space: normal;
}

.proso-cart-action:focus-visible,
.proso-notify-action:focus-visible {
  outline: 3px solid rgba(47, 122, 70, .32);
  outline-offset: 2px;
}

/* Frame gallery columns must shrink beside the thumbnail rail. The original
   Frame Bootstrap included this rule; stock Bootstrap 4.6.2 does not. */
@media (min-width: 992px) {
  #product-gallery > .row > .col-lg {
    min-width: 0;
  }
}

/* Long attribute values must stay inside the short-attributes column. */
#content .col.order-lg-2.px-xl-4 .form-row > .col-4 {
  overflow-wrap: anywhere;
}

/* At Frame's narrow three-column breakpoint, put values below labels so
   ordinary words remain readable. The wide and mobile layouts stay native. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #content .col.order-lg-2.px-xl-4 .form-row > .col {
    display: none;
  }

  #content .col.order-lg-2.px-xl-4 .form-row > .col-4 {
    flex-basis: 100%;
    max-width: 100%;
  }
}