/* Product-card geometry ---------------------------------------------------
   This layer owns only layout stability for product tiles. Visual styling stays
   in catalog.css/product-grids.css/product-actions.css. Keep media and loading
   placeholders on the exact geometry used by the final cards so images/AJAX
   content can fill reserved space without moving the surrounding page. */

/* Classic PHP product cards --------------------------------------------- */
.product-card__media {
  aspect-ratio: var(--batya-product-media-ratio);
  min-height: 0;
}

.product-card__media > a {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: inherit;
}

.product-card__media > a > img,
.product-card__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
}

.product-card__content {
  min-width: 0;
  min-height: 0;
}

.product-card__actions {
  flex: 0 0 auto;
}

/* Woo product-block cards ------------------------------------------------
   Geometry applies to every product-tile block, not only our five-column
   normalized collections. Column count remains owned by product-grids.css;
   this layer only reserves the 3:4 media stage before the image is decoded. */
.wc-block-grid .wc-block-grid__product-image,
.wc-block-product-template .wp-block-woocommerce-product-image,
.wc-block-product-template .wc-block-components-product-image {
  width: 100%;
  min-height: 0;
  aspect-ratio: var(--batya-product-media-ratio);
  overflow: hidden;
}

.wc-block-grid .wc-block-grid__product-image > a,
.wc-block-product-template .wp-block-woocommerce-product-image > a,
.wc-block-product-template .wc-block-components-product-image > a {
  display: block;
  width: 100%;
  height: 100%;
}

.wc-block-grid .wc-block-grid__product-image img,
.wc-block-product-template .wp-block-woocommerce-product-image img,
.wc-block-product-template .wc-block-components-product-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain;
  object-position: center;
}

/* Related-products AJAX skeleton ----------------------------------------
   The old skeleton stopped after the price and was roughly one control-row
   shorter than the real product card, so the footer jumped down when AJAX
   inserted metadata/chips/action buttons. Reuse the final card shell geometry:
   3:4 media, metadata, three title lines, a chip row, price and a real-size CTA. */
.single-related-skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  height: 100%;
  padding: 6px;
  box-sizing: border-box;
  border-radius: var(--batya-radius-card);
  background: var(--batya-card);
  overflow: hidden;
}

.single-related-skeleton-card__media,
.single-related-skeleton-card__line,
.single-related-skeleton-card__price,
.single-related-skeleton-card::before,
.single-related-skeleton-card::after {
  flex: 0 0 auto;
  box-sizing: border-box;
  border-radius: var(--batya-radius);
  background: linear-gradient(90deg, #f6f1eb 0%, #e9e0d7 50%, #f6f1eb 100%);
  background-size: 200% 100%;
  animation: batyaSkeleton 1.35s linear infinite;
}

.single-related-skeleton-card__media {
  order: 1;
  width: 100%;
  margin: 0;
  aspect-ratio: var(--batya-product-media-ratio);
  border-radius: var(--batya-radius-card);
}

/* Stock/SKU row. */
.single-related-skeleton-card__line.is-short {
  order: 2;
  width: 62%;
  height: 24px;
  margin: 0;
  border-radius: var(--batya-radius-pill);
}

/* Reserve the same three-line title envelope used by .product-card__title. */
.single-related-skeleton-card__line:not(.is-short) {
  order: 3;
  width: 100%;
  height: 14px;
  margin: 0;
}

.single-related-skeleton-card__line:nth-child(4) {
  height: 34px;
  background:
    linear-gradient(#eee7df, #eee7df) 0 0 / 100% 14px no-repeat,
    linear-gradient(#eee7df, #eee7df) 0 20px / 82% 14px no-repeat;
  animation: none;
}

/* Attribute-chip row. Pseudo-elements let the existing PHP skeleton markup
   reserve the missing rows without adding another template-only structure. */
.single-related-skeleton-card::before {
  content: "";
  order: 4;
  width: 72%;
  height: 24px;
  border-radius: var(--batya-radius-pill);
}

.single-related-skeleton-card__price {
  order: 5;
  width: 42%;
  height: 20px;
  margin: auto 0 0;
}

.single-related-skeleton-card::after {
  content: "";
  order: 6;
  width: 100%;
  height: var(--batya-control-compact);
  min-height: var(--batya-control-compact);
  border-radius: var(--batya-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .single-related-skeleton-card__media,
  .single-related-skeleton-card__line,
  .single-related-skeleton-card__price,
  .single-related-skeleton-card::before,
  .single-related-skeleton-card::after {
    animation: none;
    background-position: 0 0;
  }
}