/* ==========================================================================
   Product Card
   Shared WooCommerce product card molecule for product collections, related
   products, and search result list cards.
   ========================================================================== */

/* WooCommerce frontend block styles are unlayered, so product-template
   component rules must also stay unlayered to beat Woo/global block defaults. */
.wc-block-product-template.wc-block-product-template__responsive,
.wc-block-product-template.is-flex-container,
.wc-block-product-template.is-layout-flex,
.wc-block-product-template.is-layout-grid {
  gap: var(--wp--custom--primitive--space--0);
  grid-gap: var(--wp--custom--primitive--space--0);
}

/* Homepage recent-products is a horizontal organism. Woo outputs unlayered
   flex/grid product-template CSS, so this contextual override is unlayered. */
.section-products__collection .wc-block-product-template.is-flex-container,
.section-products__collection .wc-block-product-template.is-layout-flex,
.section-products__collection .wc-block-product-template.is-layout-grid,
.section-products__collection .wc-block-product-template.wc-block-product-template__responsive {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--wp--custom--semantic--spacing--component--product-carousel-card-gap);
  grid-gap: var(--wp--custom--semantic--spacing--component--product-carousel-card-gap);
  grid-template-columns: none;
  overflow-x: auto;
  /* padding: 0 0 var(--wp--custom--semantic--spacing--inset--sm); */
  padding: 0 !important;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.section-products__collection .wc-block-product-template.is-flex-container > li,
.section-products__collection .wc-block-product-template.is-layout-flex > li,
.section-products__collection .wc-block-product-template.is-layout-grid > li,
.section-products__collection .wc-block-product-template.wc-block-product-template__responsive > li {
  flex: 0 0 var(--wp--custom--semantic--size--component--product-carousel-card, 313px);
  inline-size: auto;
  max-inline-size: none;
  scroll-snap-align: start;
}

.product-card .product-card__body,
.product-card .product-card__body.is-layout-flex {
  gap: var(--wp--custom--semantic--spacing--component--product-card-content-gap);
}

/* WordPress emits a generic :root :where(.is-layout-flex) gap. Product-card
   flex containers own their component rhythm explicitly so the global layout
   fallback cannot leak into the card. */
.product-card,
.product-card.is-layout-flex {
  gap: var(--wp--custom--semantic--spacing--component--product-card-media-gap);
}

  .product-card {
    background-color: var(--wp--preset--color--surface-raised);
    border: var(--wp--custom--component--product-card--border-width) solid var(--wp--preset--color--surface-sunken);
    border-radius: calc(var(--wp--custom--primitive--radius--control) - 2px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--wp--custom--semantic--spacing--component--product-card-padding);
    position: relative;
    transition: box-shadow var(--wp--custom--motion--duration--base) var(--wp--custom--motion--ease--standard);
  }

  .product-card:hover {
    box-shadow: var(--wp--preset--shadow--md);
  }

  .product-card__image {
    align-items: center;
    aspect-ratio: 9 / 10;
    background-color: var(--wp--preset--color--surface);
    border-radius: calc(var(--wp--custom--primitive--radius--control) - 2px);
    display: flex;
    justify-content: center;
    overflow: hidden;
  }

  .product-card__image a {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
  }

  .product-card__image img {
    height: 100%;
    mix-blend-mode: darken;
    object-fit: contain!important;
    transform: scale(0.95);
    transition: transform var(--wp--custom--motion--duration--slow) var(--wp--custom--motion--ease--standard);
    width: 100%;
  }

  .product-card:hover .product-card__image img {
    transform: scale(1);
  }

  .product-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0;
  }

  .product-card__brand {
    color: var(--wp--preset--color--accent);
    font-family: var(--wp--custom--semantic--typography--tag--family);
    font-size: var(--wp--custom--semantic--typography--body-small--size);
    font-weight: var(--wp--custom--semantic--typography--tag--weight);
    letter-spacing: var(--wp--custom--semantic--typography--tag--letter-spacing);
    line-height: var(--wp--custom--semantic--typography--tag--line-height);
    text-transform: var(--wp--custom--semantic--typography--tag--text-transform);
  }

  .product-card .wp-block-post-terms.product-card__brand {
    font-size: var(--wp--custom--semantic--typography--body-small--size);
  }

  .product-card__brand a {
    color: inherit;
    text-decoration: none;
  }

  .product-card__title {
    color: var(--wp--preset--color--ink);
    font-family: var(--wp--custom--semantic--typography--h-6--family);
    font-size: var(--wp--custom--semantic--typography--h-6--size);
    font-weight: var(--wp--custom--semantic--typography--h-6--weight);
    letter-spacing: var(--wp--custom--semantic--typography--h-6--letter-spacing);
    line-height: var(--wp--custom--semantic--typography--h-6--line-height);
  }

  .product-card .product-card__title a {
    color: inherit;
    text-decoration: none;
  }

  .product-card .product-card__title a::after {
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
  }

  .product-card__excerpt {
    color: var(--wp--preset--color--ink);
    display: -webkit-box;
    flex: 1;
    font-family: var(--wp--custom--semantic--typography--body-mini--family);
    font-size: var(--wp--custom--semantic--typography--body-mini--size);
    font-weight: var(--wp--custom--semantic--typography--body-mini--weight);
    letter-spacing: var(--wp--custom--semantic--typography--body-mini--letter-spacing);
    line-height: var(--wp--custom--semantic--typography--body-mini--line-height);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .product-card__btn {
    align-items: center;
    align-self: flex-start;
    background-color: var(--wp--preset--color--surface-sunken);
    border-radius: var(--wp--custom--primitive--radius--control);
    box-sizing: border-box;
    color: var(--wp--preset--color--ink);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0;
    height: var(--wp--custom--layout--touch-target, 2.375rem);
    justify-content: center;
    overflow: hidden;
    padding: var(--wp--custom--semantic--spacing--component--button-icon-padding);
    position: relative;
    text-decoration: none;
    transition:
      background-color var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--ease--standard),
      color var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--ease--standard);
    width: var(--wp--custom--layout--touch-target, 2.375rem);
    z-index: 2;
  }

  .product-card__btn-label {
    clip: rect(0 0 0 0);
    block-size: 1px;
    border: 0;
    clip-path: inset(50%);
    inline-size: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
  }

  .product-card__btn-clip {
    display: flex;
    height: 11px;
    overflow: hidden;
    width: 15px;
  }

  .product-card:hover .product-card__btn {
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--surface);
  }

  .product-card__btn-track {
    display: flex;
    flex-shrink: 0;
    transition: transform var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--ease--standard);
  }

  .product-card:hover .product-card__btn-track {
    transform: translateX(-15px);
  }

  .product-card__btn-track svg {
    flex-shrink: 0;
    height: 11px;
    width: 15px;
  }

  .product-card--list {
    align-items: center;
    background: var(--wp--preset--color--surface);
    border: var(--wp--custom--component--product-card--list-border-width) solid var(--wp--preset--color--surface);
    border-radius: var(--wp--custom--primitive--radius--control);
    flex-direction: row;
    gap: var(--wp--custom--semantic--spacing--component--product-card-list-gap);
    overflow: visible;
    padding: var(--wp--custom--semantic--spacing--component--product-card-list-padding);
    transition: border-color var(--wp--custom--motion--duration--base) var(--wp--custom--motion--ease--standard);
  }

  .product-card--list::before {
    display: none;
  }

  .product-card--list:hover {
    border-color: var(--wp--preset--color--surface-sunken);
    box-shadow: none;
    transform: none;
  }

  .product-card--list .product-card__image {
    aspect-ratio: unset;
    background-color: transparent;
    flex-shrink: 0;
    height: var(--wp--custom--semantic--size--component--product-card-list-image);
    overflow: visible;
    padding: var(--wp--custom--semantic--spacing--component--product-card-list-image-padding);
    width: var(--wp--custom--semantic--size--component--product-card-list-image);
  }

  .product-card--list .product-card__image img {
    mix-blend-mode: darken;
    padding: 0;
    transition: none;
  }

  .product-card--list .product-card__body {
    gap: var(--wp--custom--semantic--spacing--component--product-card-list-content-gap);
    padding: 0;
  }

  .product-card--list .product-card__brand {
    font-size: var(--wp--custom--semantic--typography--body-small--size);
    letter-spacing: var(--wp--custom--semantic--typography--tag--letter-spacing);
  }

  .product-card--list .product-card__title {
    flex: unset;
    font-size: var(--wp--custom--semantic--typography--h-6--size);
    letter-spacing: var(--wp--custom--semantic--typography--h-6--letter-spacing);
    line-height: var(--wp--custom--semantic--typography--h-6--line-height);
  }

  .product-card--list .product-card__badge,
  .product-card--list .product-card__meta,
  .product-card--list .product-card__sku,
  .product-card--list .product-card__specs,
  .product-card--list .product-card__footer,
  .product-card--list .product-card__excerpt,
  .product-card--list .product-card__btn {
    display: none;
  }

/* Keep the component title on its semantic H6 token when global h2 styles win. */
h2.product-card__title {
  font-size: var(--wp--custom--semantic--typography--h-6--size);
  font-weight: var(--wp--custom--semantic--typography--h-6--weight);
  letter-spacing: var(--wp--custom--semantic--typography--h-6--letter-spacing);
  line-height: var(--wp--custom--semantic--typography--h-6--line-height);
  text-wrap: unset;
}