/**
 * Shared product grid + cards — shop loop, homepage blocks, empty-cart suggestions.
 * One source of truth so home / shop / related stay visually aligned.
 */

/* Grid — only product lists (ul), never section.related.products wrappers */
.woocommerce ul.products,
ul.products,
.sr-product-grid,
.wc-block-product-template,
ul.wc-block-product-template,
ul.wc-block-grid__products {
  list-style: none;
  display: grid !important;
  gap: var(--sr-space-5);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Card shell — classic loop + block product + legacy grid */
.woocommerce ul.products li.product,
ul.products li.product,
.sr-product-card,
.wc-block-product,
.wc-block-grid__product {
  position: relative;
  text-align: left !important;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
  background: #fff;
  border: 1px solid var(--sr-color-line);
  border-radius: 16px;
  overflow: hidden;
  padding: 0 0 var(--sr-space-4);
  box-shadow: var(--sr-shadow, 0 12px 30px -12px rgba(35, 50, 74, 0.18));
}

ul.products li.product > a,
ul.products li.product a.woocommerce-LoopProduct-link,
.sr-product-card > a,
.sr-product-card a.woocommerce-LoopProduct-link,
.sr-product-card .woocommerce-loop-product__title,
.sr-product-card .price,
.sr-product-card .price a,
.sr-product-card .price ins,
.sr-product-card .price .amount,
.wc-block-product a,
.wc-block-product .wp-block-post-title a,
.wc-block-product .wp-block-woocommerce-product-title a,
.wc-block-grid__product a,
.wc-block-grid__product-link {
  text-decoration: none !important;
}

/* Image */
ul.products li.product a img,
.sr-product-card a img,
.wc-block-components-product-image img,
.wc-block-grid__product-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: 0;
  background: #f3f7f5;
  border-radius: 0;
}

.wc-block-components-product-image,
.wc-block-grid__product-image,
.wc-block-components-product-image__inner-container {
  position: relative !important;
  display: block;
}

/* Title — left-aligned (home + shop + related) */
ul.products li.product .woocommerce-loop-product__title,
.sr-product-card .woocommerce-loop-product__title,
.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-title,
.wc-block-product h3,
.wc-block-product .wp-block-woocommerce-product-title,
.wc-block-product .wp-block-woocommerce-product-title a,
.wc-block-grid__product-title,
.wc-block-product .has-text-align-center.wp-block-post-title,
.wc-block-product .has-text-align-center.wp-block-woocommerce-product-title {
  font-family: var(--sr-font-display);
  font-size: 1.15rem !important;
  font-weight: 700;
  line-height: 1.25;
  color: var(--sr-color-ink);
  padding: var(--sr-space-3) var(--sr-space-4) 0.35rem;
  margin: 0 !important;
  display: block;
  text-align: left !important;
}

ul.products li.product .woocommerce-loop-product__title:hover,
ul.products li.product a.woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title,
.sr-product-card .woocommerce-loop-product__title:hover,
.wc-block-product .wp-block-post-title a:hover,
.wc-block-product .wp-block-woocommerce-product-title a:hover,
.wc-block-grid__product-title:hover {
  color: var(--sr-color-accent);
}

/* Price — left-aligned (home + shop + related) */
ul.products li.product .price,
.sr-product-card .price,
.wc-block-components-product-price,
.wc-block-grid__product-price,
.wc-block-components-product-price--align-center,
.wc-block-components-product-price--align-right,
.wc-block-components-product-price--align-left {
  font-family: var(--sr-font-display);
  color: var(--sr-color-accent-hover);
  font-size: 1.2rem !important;
  font-weight: 800;
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start !important;
  gap: 0.45rem;
  margin: 0.35rem var(--sr-space-4) var(--sr-space-4) !important;
  padding: 0 !important;
  text-align: left !important;
}

ul.products li.product .price del,
ul.products li.product .price del .amount,
.sr-product-card .price del,
.sr-product-card .price del .amount,
.wc-block-components-product-price del,
.wc-block-grid__product-price del {
  font-family: var(--sr-font-body);
  font-size: 0.95rem;
  color: var(--sr-color-ink-muted);
  opacity: 0.75;
  font-weight: 600;
  text-decoration: line-through !important;
}

ul.products li.product .price ins,
.sr-product-card .price ins,
.wc-block-components-product-price ins,
.wc-block-grid__product-price ins {
  text-decoration: none;
  font-weight: 800;
}

/* One actions div: qty badge + ATC + Warenkorb anzeigen */
.sr-product-card__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sr-space-2);
  margin: 0 var(--sr-space-4);
  position: relative;
}

.sr-product-card__qty {
  position: absolute;
  top: -0.35rem;
  right: -0.15rem;
  z-index: 2;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--sr-color-ink);
  color: #fff;
  font-family: var(--sr-font-display);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.55rem;
  text-align: center;
  box-shadow: 0 4px 10px -4px rgba(35, 50, 74, 0.45);
}

.sr-product-card__qty[hidden],
.sr-product-card__qty:empty {
  display: none !important;
}

/* ATC — coral pill only (not Warenkorb anzeigen) */
ul.products li.product .sr-product-card__actions .button,
.sr-product-card .sr-product-card__actions .button,
ul.products li.product .button.add_to_cart_button,
.sr-product-card .button.add_to_cart_button,
.wc-block-components-product-button__button,
.wc-block-product .add_to_cart_button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--sr-font-display);
  background: var(--sr-color-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: var(--sr-btn-fs, 1.25rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
  text-decoration: none !important;
  padding: var(--sr-btn-pad-y, 0.55rem) var(--sr-btn-pad-x, 1.25rem) !important;
  border: 0 !important;
  margin: 0 !important;
  min-height: var(--sr-btn-min-h, 2.65rem) !important;
  box-shadow: 0 10px 22px -10px rgba(242, 104, 92, 0.5);
  transition: background-color 0.15s ease, transform 0.15s ease;
  width: 100% !important;
  max-width: none;
}

.wc-block-components-product-button,
.wc-block-grid__product-add-to-cart,
.wp-block-button.wc-block-components-product-button {
  padding: 0 !important;
  text-align: left !important;
  width: 100%;
}

ul.products li.product .sr-product-card__actions .button:hover,
.sr-product-card .sr-product-card__actions .button:hover,
ul.products li.product .button.add_to_cart_button:hover,
.sr-product-card .button.add_to_cart_button:hover,
.wc-block-components-product-button__button:hover,
.wc-block-product .add_to_cart_button:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
  background: var(--sr-color-accent-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

ul.products li.product .button.loading,
.sr-product-card .button.loading {
  opacity: 0.7;
}

/* Warenkorb anzeigen — text link, bigger + darker (home + shop) */
ul.products li.product .added_to_cart,
.sr-product-card .added_to_cart,
.sr-product-card__actions .added_to_cart {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 !important;
  padding: 0.15rem 0 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--sr-font-display);
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-transform: none !important;
  text-decoration: none !important;
  color: var(--sr-color-ink) !important;
  transform: none !important;
}

ul.products li.product .added_to_cart:hover,
.sr-product-card .added_to_cart:hover,
.sr-product-card__actions .added_to_cart:hover {
  background: transparent !important;
  color: var(--sr-color-accent-hover) !important;
  transform: none !important;
}

/* Sale badge — top-left everywhere (shop, home blocks, related, PDP flash) */
.sr-badge--sale,
.woocommerce span.onsale,
.single-product .sr-badge--sale,
.single-product .woocommerce span.onsale,
.wc-block-components-product-sale-badge,
.wc-block-components-product-sale-badge.alignright,
.wc-block-components-product-sale-badge.alignleft,
.wc-block-components-product-sale-badge.aligncenter,
.wc-block-components-product-sale-badge--align-right,
.wc-block-components-product-sale-badge--align-left,
.wc-block-grid__product-onsale {
  position: absolute !important;
  top: var(--sr-space-3) !important;
  left: var(--sr-space-3) !important;
  right: auto !important;
  z-index: 2;
  background: var(--sr-color-accent) !important;
  color: #fff !important;
  border: 0 !important;
  font-family: var(--sr-font-display);
  font-size: var(--sr-fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase !important;
  padding: 0.4rem 0.7rem !important;
  border-radius: 999px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 1.2 !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  inset-inline-end: auto !important;
  inset-inline-start: var(--sr-space-3) !important;
}

@media (min-width: 640px) {
  .woocommerce ul.products,
  ul.products,
  .sr-product-grid,
  .wc-block-product-template,
  ul.wc-block-product-template,
  ul.wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 900px) {
  .woocommerce ul.products,
  ul.products,
  .sr-product-grid,
  .woocommerce ul.products.columns-3,
  .wc-block-product-template,
  ul.wc-block-product-template,
  .wc-block-product-template.columns-3,
  .wc-block-product-template.columns-4,
  .wc-block-product-template.columns-5,
  ul.wc-block-grid__products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}