/* =========================================================
   FEATURE: SHOP / CATEGORY / RELATED-PRODUCTS "ADD TO CART"
   AND "SELECT OPTIONS" BUTTONS
   Astra's own card button carries huge fixed horizontal padding
   (10px 50px) on a card that's often only ~150-180px wide, which
   forces "Select Options" to wrap onto two uneven lines and look
   broken instead of like a considered button. Rebuilt here to
   match the single-product Add to Cart button's brand styling:
   full-width within its card, one line, proper weight.

   Only enqueued when Settings > Digiskyward > Shop Grid Buttons
   is switched on. Deliberately excludes .ast-on-card-button,
   Astra's small hover/quick-add icon variant, which is a
   different (and fine as-is) widget, not this text button.
   ========================================================= */

.woocommerce ul.products li.product .button.add_to_cart_button:not(.ast-on-card-button),
.woocommerce ul.products li.product .astra-shop-summary-wrap > a.button:not(.ast-on-card-button),
.woocommerce ul.products li.product a.added_to_cart {
  /* Elementor's own product-grid widget carries a fixed 38px
     icon-button size for this exact same element on some layouts
     (e.g. the homepage carousel), including an explicit height
     and line-height sized for a small glyph, not a text label.
     Overriding those individually chased its tail (this element's
     "auto" height resolves oddly in that widget's flex/overlay
     context for reasons not worth chasing further) -- a fixed
     height with flex centring sidesteps it outright instead. */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 46px !important;
  box-sizing: border-box !important;
  align-self: flex-start !important;

  border: 0 !important;
  border-radius: var(--bbpb-radius) !important;
  background: var(--bbpb-red) !important;
  color: #FFFFFF !important;

  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  letter-spacing: .01em;
  white-space: nowrap;
  text-align: center;
  text-decoration: none !important;

  padding: 0 10px !important;
  margin-top: 10px !important;

  /* Same flat, no-blur "offset" shadow as the single-product
     buttons (see base.css) -- a smaller 2px lift fits this
     card-scale button without looking oversized next to it. */
  box-shadow: 0 2px 0 var(--bbpb-shadow-red) !important;

  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* Essential Addons' "product overlay" grid style (used on the
   homepage carousel) hides this exact button by default -- opacity:0
   and translateY(20px), revealed only on :hover -- and stays that
   way here on every device, untouched, by design: it's left as a
   desktop-only hover affordance rather than forced visible on touch. */

.woocommerce ul.products li.product .button.add_to_cart_button:not(.ast-on-card-button):hover,
.woocommerce ul.products li.product .astra-shop-summary-wrap > a.button:not(.ast-on-card-button):hover,
.woocommerce ul.products li.product a.added_to_cart:hover {
  background: var(--bbpb-red-dark) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--bbpb-shadow-red) !important;
}

.woocommerce ul.products li.product .button.add_to_cart_button:not(.ast-on-card-button):active,
.woocommerce ul.products li.product .astra-shop-summary-wrap > a.button:not(.ast-on-card-button):active,
.woocommerce ul.products li.product a.added_to_cart:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--bbpb-shadow-red) !important;
}

.woocommerce ul.products li.product .button.add_to_cart_button.loading {
  opacity: .6 !important;
}

@media (max-width: 480px) {
  .woocommerce ul.products li.product .button.add_to_cart_button:not(.ast-on-card-button),
  .woocommerce ul.products li.product .astra-shop-summary-wrap > a.button:not(.ast-on-card-button),
  .woocommerce ul.products li.product a.added_to_cart {
    font-size: 12px !important;
    height: 42px !important;
    padding: 0 6px !important;
  }
}