/* Shared catalog product card — used on category + homepage launches */

:root {
  --wm-wishlist-icon-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  --wm-wishlist-icon-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='none'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  --wm-wishlist-btn-size: 30px;
  --wm-wishlist-icon-size: 17px;
  --wm-wishlist-btn-radius: 7px;
}

.wm-cat-card {
  --wm-cat-tag-radius: var(--wm-radius);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  border-radius: var(--wm-radius-md);
  border: 1px solid var(--wm-border-light);
  background: var(--wm-surface-base);
  overflow: hidden;
  transition: border-color var(--wm-duration) var(--wm-ease), box-shadow var(--wm-duration) var(--wm-ease);
}

.wm-cat-card:hover {
  border-color: var(--wm-accent-blue);
  box-shadow: var(--wm-shadow-md);
}

.wm-cat-card--direct {
  border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
}

.wm-cat-card--direct:hover {
  border-color: var(--wm-success);
}

.wm-cat-card__media {
  position: relative;
  height: 9rem;
  overflow: hidden;
  padding: 0;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  isolation: isolate;
}

@media (min-width: 576px) {
  .wm-cat-card__media {
    height: 11rem;
  }
}

/* Image area: 10px top/bottom padding inside fixed frontend media height */
.wm-cat-card__media .wm-cat-card__image-link {
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 10px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  background: #fff;
}

.wm-cat-card__media img {
  position: relative;
  inset: auto;
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  opacity: 1;
  filter: none;
  transition: transform 0.28s var(--wm-ease), opacity 0.28s var(--wm-ease);
}

.wm-cat-card:hover .wm-cat-card__media img {
  transform: scale(1.2);
  opacity: 1;
  filter: none;
}

.wm-cat-card__badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  max-width: 70%;
  padding: 0.15rem 0.45rem;
  border-radius: var(--wm-cat-tag-radius);
  border: 1px solid var(--wm-border-light);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wm-accent-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s var(--wm-ease);
}

.wm-cat-card:hover .wm-cat-card__badge,
.wm-cat-card__media--qv:focus-within .wm-cat-card__badge {
  opacity: 0;
}

.wm-cat-card--direct .wm-cat-card__badge {
  color: var(--wm-success);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
}

.wm-cat-card__body {
  padding: 0.65rem 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: var(--wm-space-1);
  flex: 1;
  min-width: 0;
  position: relative;
}

.wm-cat-card__media > .wm-cat-card__brand,
.wm-cat-card__body > .wm-cat-card__brand:first-child {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  z-index: 4;
  max-width: 70%;
  margin: 0;
  padding: 0.15rem 0.45rem;
  border-radius: var(--wm-cat-tag-radius);
  border: 1px solid var(--wm-border-light);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  box-shadow: none;
  backdrop-filter: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s var(--wm-ease);
}

.wm-cat-card__body > .wm-cat-card__brand:first-child {
  left: 0.75rem;
  bottom: auto;
  top: 0;
  transform: translateY(calc(-100% - 0.5rem));
}

.wm-cat-card:hover .wm-cat-card__media > .wm-cat-card__brand,
.wm-cat-card:hover .wm-cat-card__body > .wm-cat-card__brand:first-child,
.wm-cat-card__media--qv:focus-within .wm-cat-card__brand {
  opacity: 0;
}

.wm-cat-card__brand {
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--wm-text-muted);
}

.wm-cat-card__name {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--wm-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}

/* Title equal-height is applied per .wm-products section via JS (main.js) */

.wm-cat-card__name a {
  color: inherit;
  text-decoration: none;
}

.wm-cat-card__name a:hover {
  color: var(--wm-accent-blue);
}

.wm-cat-card__rating {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--wm-primary);
}

.wm-cat-card__rating span {
  color: var(--wm-text-muted);
  font-family: inherit;
  font-weight: 500;
}

.wm-cat-card__stock {
  display: block;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--wm-success);
}

.wm-cat-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wm-space-1);
}

.wm-cat-card__specs span {
  padding: 0.1rem 0.35rem;
  border-radius: var(--wm-cat-tag-radius);
  background: var(--wm-surface-muted);
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--wm-text-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wm-cat-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wm-space-1);
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--wm-surface-muted);
}

.wm-cat-card__price {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-cta-text);
}

.wm-cat-card__price s {
  margin-left: 0.25rem;
  font-size: 0.625rem;
  color: var(--wm-text-muted);
  font-weight: 500;
}

.wm-cat-card__cta,
a.wm-cat-card__cta,
button.wm-cat-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-sizing: border-box;
  width: var(--wm-action-size);
  min-width: var(--wm-action-size);
  max-width: var(--wm-action-size);
  height: var(--wm-action-size);
  min-height: var(--wm-action-size);
  max-height: var(--wm-action-size);
  padding: 0;
  border: 0;
  border-radius: var(--wm-action-radius);
  background: var(--wm-secondary-btn);
  color: #fff;
  font-family: inherit;
  font-size: 0;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 var(--wm-action-size);
}

.wm-cat-card__cta--amber,
a.wm-cat-card__cta--amber,
button.wm-cat-card__cta--amber {
  background: var(--wm-primary-btn);
  color: #fff;
}

.wm-cat-card__cta.wm-cat-deal__cta,
a.wm-cat-card__cta.wm-cat-deal__cta,
button.wm-cat-card__cta.wm-cat-deal__cta {
  color: #fff;
}

.wm-cat-card--direct .wm-cat-card__cta {
  background: var(--wm-success-btn);
  color: #fff;
}

.wm-cat-card__cta .wm-icon,
.wm-cat-card__cta svg {
  width: var(--wm-action-icon);
  height: var(--wm-action-icon);
  flex-shrink: 0;
  display: block;
  color: inherit;
  stroke: currentColor;
}

.wm-cat-card__cta span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wm-cat-card__foot-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--wm-space-1);
  flex-shrink: 0;
}

.wm-cat-card__wishlist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wm-cat-card__wishlist .wishlist-button-add,
.wm-wishlist-icon-btn,
.wm-cat-row__wishlist .wishlist-button-add,
.wishlist-button-add {
  width: var(--wm-wishlist-btn-size);
  height: var(--wm-wishlist-btn-size);
  min-width: var(--wm-wishlist-btn-size);
  box-shadow: none;
  background: var(--wm-surface-muted);
  border: 0;
  border-radius: var(--wm-wishlist-btn-radius);
  color: var(--wm-text-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
}

.wm-cat-card--upcoming .wm-cat-card__wishlist .wishlist-button-add,
.wm-cat-card--upcoming .wm-wishlist-icon-btn {
  width: var(--wm-wishlist-btn-size, var(--wm-action-size, 30px));
  height: var(--wm-wishlist-btn-size, var(--wm-action-size, 30px));
  min-width: var(--wm-wishlist-btn-size, var(--wm-action-size, 30px));
  min-height: var(--wm-wishlist-btn-size, var(--wm-action-size, 30px));
  border-radius: var(--wm-wishlist-btn-radius, var(--wm-action-radius, 7px));
  background: var(--wm-surface-muted, #f3f4f6);
  color: var(--wm-text-body, inherit);
  box-shadow: none;
  padding: 0;
}

.wm-cat-card--upcoming .wm-cat-card__wishlist .wishlist-button-add i.material-icons,
.wm-cat-card--upcoming .wm-wishlist-icon-btn .wm-icon {
  width: var(--wm-wishlist-icon-size, var(--wm-action-icon, 17px));
  height: var(--wm-wishlist-icon-size, var(--wm-action-icon, 17px));
}

.wm-wishlist-icon-btn .wm-icon {
  width: var(--wm-wishlist-icon-size);
  height: var(--wm-wishlist-icon-size);
  display: block;
}

.wm-tool-link--wish .wm-icon {
  width: var(--wm-wishlist-icon-size);
  height: var(--wm-wishlist-icon-size);
}

.wm-cat-card__wishlist .wishlist-button-add i {
  font-size: 0;
}

/* product.bundle.js may inject an extra mount on listing thumbs — keep a single control. */
.wm-cat-detail .thumbnail-container > .wishlist-button,
.wm-cat-row .thumbnail-container > .wishlist-button,
.js-product-miniature:has(.wishlist-button) .thumbnail-container > .wishlist-button {
  display: none !important;
}

.wm-cat-row__wishlist {
  display: inline-flex;
  align-items: center;
}

.wm-cat-row__wishlist .wishlist-button-add {
  width: var(--wm-wishlist-btn-size);
  height: var(--wm-wishlist-btn-size);
  min-width: var(--wm-wishlist-btn-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wm-wishlist-btn-radius);
}

.wm-cat-row__wishlist .wishlist-button-add i {
  font-size: 0;
}

.wm-cat-card__compare {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 5;
  width: 1.875rem;
  min-width: 1.875rem;
  max-width: 1.875rem;
  height: 1.875rem;
  min-height: 1.875rem !important;
  max-height: 1.875rem;
  padding: 0 !important;
  border-radius: var(--wm-cat-tag-radius);
  background: var(--wm-surface-muted);
  border: 1px solid transparent;
  color: var(--wm-text-body);
  box-shadow: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.wm-cat-card__compare .wm-icon {
  width: 0.8125rem;
  height: 0.8125rem;
}

.wm-cat-card__compare:hover {
  background: var(--wm-border-light);
  color: var(--wm-secondary);
  border-color: transparent;
}

.wm-cat-card__quickview {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  height: max-content;
  max-width: calc(100% - 1rem);
  margin: auto;
  transform: none;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-surface);
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  box-shadow: none;
  transition: opacity 0.2s ease;
  cursor: pointer;
  pointer-events: none;
}

.wm-cat-card__quickview-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0.32rem 0.55rem;
  border-radius: var(--wm-cat-tag-radius, 7px);
  background: color-mix(in srgb, var(--color-text) 82%, transparent);
  color: inherit;
  pointer-events: none;
}

.wm-cat-card__quickview > .wm-icon,
.wm-cat-card__quickview > span:not(.wm-cat-card__quickview-pill) {
  position: relative;
  z-index: 1;
  background: color-mix(in srgb, var(--color-text) 82%, transparent);
  color: inherit;
}

.wm-cat-card__quickview > .wm-icon {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  padding: 0.38rem 0.22rem 0.38rem 0.5rem;
  border-radius: var(--wm-cat-tag-radius, 7px) 0 0 var(--wm-cat-tag-radius, 7px);
  box-sizing: content-box;
}

.wm-cat-card__quickview > span:not(.wm-cat-card__quickview-pill) {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0.38rem 0.55rem 0.38rem 0.18rem;
  border-radius: 0 var(--wm-cat-tag-radius, 7px) var(--wm-cat-tag-radius, 7px) 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 0.75rem;
}

.wm-cat-card__quickview-pill .wm-icon,
.wm-cat-card__quickview-pill span {
  padding: 0;
  border-radius: 0;
  background: transparent;
  line-height: 1;
}

.wm-cat-card__quickview-pill .wm-icon {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
}

.wm-cat-card:hover .wm-cat-card__quickview,
.wm-cat-card__media--qv:focus-within .wm-cat-card__quickview {
  opacity: 1;
  pointer-events: auto;
}

.wm-cat-card:hover .wm-cat-card__media .wm-cat-card__image-link,
.wm-cat-card__media--qv:focus-within .wm-cat-card__image-link {
  pointer-events: none;
}

@media (hover: none) {
  .wm-cat-card__quickview {
    opacity: 1;
    pointer-events: auto;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .wm-cat-card__media--qv .wm-cat-card__image-link {
    pointer-events: none;
  }
}

.wm-products > .wm-cat-card {
  height: 100%;
}

.wm-cat-card--sponsored {
  background: linear-gradient(180deg, var(--wm-secondary), var(--wm-surface-dark));
  border-color: color-mix(in srgb, var(--color-sponsored) 40%, transparent);
  color: var(--wm-text-on-dark);
}

.wm-cat-card--sponsored .wm-cat-card__body,
.wm-cat-card--sponsored .wm-cat-card__name,
.wm-cat-card--sponsored .wm-cat-card__name a {
  color: var(--wm-text-on-dark);
}

.wm-cat-card--sponsored .wm-cat-card__name a:hover {
  color: var(--color-sponsored);
}

.wm-cat-card--sponsored .wm-cat-card__brand,
.wm-cat-card--sponsored .wm-cat-card__brand--amber,
.wm-cat-card--sponsored .wm-cat-card__rating,
.wm-cat-card--sponsored .wm-cat-card__rating span {
  color: var(--wm-text-on-dark-muted);
}

.wm-cat-card--sponsored .wm-cat-card__media > .wm-cat-card__brand,
.wm-cat-card--sponsored .wm-cat-card__body > .wm-cat-card__brand:first-child {
  color: var(--color-cta-text);
}

.wm-cat-card--sponsored .wm-cat-card__price,
.wm-cat-card--sponsored .wm-cat-card__price--amber {
  color: var(--color-sponsored);
}

.wm-cat-card--sponsored .wm-cat-card__price s {
  color: var(--wm-text-on-dark-muted);
}

.wm-cat-card--sponsored .wm-cat-card__specs span {
  background: color-mix(in srgb, var(--color-surface) 16%, transparent);
  color: var(--wm-text-on-dark-muted);
}

.wm-cat-card--sponsored .wm-cat-card__foot {
  border-top-color: color-mix(in srgb, var(--color-surface) 18%, transparent);
}

.wm-cat-card--sponsored .wm-cat-card__cta,
.wm-cat-card--sponsored .wm-cat-card__cta--amber {
  background: var(--color-sponsored);
  color: var(--on-sponsored);
}


/* productcomments → wm-cat-card rating row */
.wm-cat-card .product-list-reviews.wm-cat-card__rating {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-height: 1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--wm-primary);
}

.wm-cat-card .product-list-reviews .wm-cat-card__rating-star {
  line-height: 1;
}

.wm-cat-card .product-list-reviews .grade-stars {
  display: inline-flex;
  margin: 0;
}

.wm-cat-card .product-list-reviews .comments-nb:empty {
  display: none;
}

.wm-cat-card .product-list-reviews:not(.has-reviews):not(.reviews-loading) {
  display: none;
}

.wm-cat-card__image-link {
  position: absolute;
  inset: 0;
  display: block;
}

.wm-cat-empty--direct {
  grid-column: 1 / -1;
  padding: 1.25rem;
  border: 1px dashed var(--wm-border-light);
  border-radius: var(--wm-radius-md);
  background: var(--wm-surface-muted);
}

.wm-cat-empty__hint {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: var(--wm-text-muted);
}

/* productcomments listing row — match frontend ★ 4.9 (1420) */
.wm-cat-card .product-list-reviews.wm-cat-card__rating {
  display: none;
  align-items: center;
  gap: 0.2rem;
  min-height: 1rem;
  line-height: 1.2;
}

.wm-cat-card .js-product-miniature.has-reviews .product-list-reviews.wm-cat-card__rating,
.wm-cat-card .product-list-reviews.wm-cat-card__rating.has-reviews {
  display: inline-flex;
}

.wm-cat-card .product-list-reviews .wm-cat-card__rating-star {
  font-size: 0.6875rem;
  line-height: 1;
  color: var(--wm-primary);
}

.wm-cat-card .product-list-reviews .grade-stars {
  display: inline-flex !important;
  vertical-align: middle;
  margin: 0;
  height: auto !important;
  min-height: 0;
}

.wm-cat-card .product-list-reviews .comments-nb {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--wm-text-muted);
}

.wm-cat-card .product-list-reviews .comments-nb:empty {
  display: none;
}

.wm-cat-card__image-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}

.wm-cat-card__image-link img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* blockwishlist Vue buttons — match header heart icon (#wm-i-8). */
.wishlist-button-add i.material-icons {
  font-size: 0 !important;
  line-height: 0;
  width: var(--wm-wishlist-icon-size);
  height: var(--wm-wishlist-icon-size);
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--wm-wishlist-icon-outline) center / contain no-repeat;
  mask: var(--wm-wishlist-icon-outline) center / contain no-repeat;
}

.wishlist-button[data-checked="true"] .wishlist-button-add i.material-icons {
  -webkit-mask-image: var(--wm-wishlist-icon-filled);
  mask-image: var(--wm-wishlist-icon-filled);
  background-color: var(--color-danger, #e53935);
}

.wm-sponsored__foot-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--wm-space-1);
  flex-shrink: 0;
}

.wm-sponsored__foot-actions .wm-wishlist-icon-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}