/*
 * Shared storefront product-card contract.
 *
 * Every WooCommerce loop card receives .storefront-product-card on the server.
 * Native loop markup and the category structural adapter therefore share one
 * owner for media, badges, title, price, actions, stock states and responsive
 * geometry. Route-specific styles must not redefine these internals.
 */
.storefront-product-card {
  --storefront-product-card-font: var(--storefront-font-ui, "Montserrat", Arial, sans-serif);
  --storefront-product-card-accent: var(--storefront-color-ink, #232323);
  --storefront-product-card-ink: var(--storefront-color-ink, #232323);
  --storefront-product-card-surface: var(--storefront-color-surface, #fff);
  box-sizing: border-box;
  color: var(--storefront-product-card-ink);
  font-family: var(--storefront-product-card-font);
}

/* Keep the product surface flat, including its media and action layers. */
:is(
  .storefront-product-card,
  .storefront-product-card > .product-inner,
  .storefront-product-card > .storefront-category-card__inner,
  .storefront-product-card .product-image,
  .storefront-product-card .storefront-category-card__media,
  .storefront-product-card .product-image > a,
  .storefront-product-card .storefront-category-card__image-link,
  .storefront-product-card .add-links-wrap,
  .storefront-product-card .storefront-category-card__action
) {
  box-shadow: none !important;
  filter: none !important;
}

:is(
  .storefront-product-card .product-image,
  .storefront-product-card .storefront-category-card__media
) {
  border-radius: 0 !important;
}

:is(
  .storefront-product-card,
  .storefront-product-card > .product-inner,
  .storefront-product-card > .storefront-category-card__inner
) {
  border-radius: 0 !important;
}

:is(
  .storefront-product-card:hover,
  .storefront-product-card > .product-inner:hover,
  .storefront-product-card > .storefront-category-card__inner:hover,
  .storefront-product-card:hover .product-image,
  .storefront-product-card:hover .storefront-category-card__media
) {
  box-shadow: none !important;
  filter: none !important;
}

:is(
  .storefront-product-card > .product-inner,
  .storefront-product-card > .storefront-category-card__inner
) {
  background: var(--storefront-product-card-surface);
  border: 0 solid var(--storefront-product-card-ink);
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  min-width: 0;
  padding: 1px;
  position: relative;
  text-align: center;
  width: 100%;
}

.storefront-product-card .product-content,
.storefront-product-card .storefront-category-card__content {
  display: contents;
  text-align: center;
}

:is(
  .storefront-product-card .product-image,
  .storefront-product-card .storefront-category-card__media
) {
  aspect-ratio: 1 / 1;
  background: var(--storefront-product-card-surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  min-height: 0;
  min-width: 0;
  outline: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

:is(
  .storefront-product-card .product-image > a,
  .storefront-product-card .storefront-category-card__image-link
) {
  align-items: center;
  color: var(--storefront-product-card-accent);
  display: flex;
  height: 100%;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transition: var(--storefront-button-transition) !important;
  width: 100%;
}

:is(
  .storefront-product-card .product-image .inner,
  .storefront-product-card .storefront-category-card__image-link .inner,
  .storefront-product-card .storefront-category-card__image-link picture
) {
  align-items: center;
  display: flex;
  height: 100%;
  inset: 0;
  justify-content: center;
  position: absolute;
  width: 100%;
}

:is(
  .storefront-product-card .product-image img,
  .storefront-product-card .storefront-category-card__image-link img
) {
  display: block;
  height: 100%;
  inset: 0;
  margin: 0 auto;
  max-height: 100%;
  max-width: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center center;
  position: absolute;
  transform: scale(1) !important;
  transform-origin: center center !important;
  transition: none !important;
  width: 100%;
}

/* Match the media hover contract. The component cross-fades the
 * first and second image over 0.8s while the secondary image scales from 1 to
 * 1.05 over 2s. Keeping the transition on both steady states makes mouse-leave
 * use the same native reverse transition without JavaScript. */
:is(
  .storefront-product-card .product-image .inner,
  .storefront-product-card .product-image > a,
  .storefront-product-card .storefront-category-card__image-link .inner,
  .storefront-product-card .storefront-category-card__image-link
) > img:first-of-type:not(:only-of-type) {
  opacity: 1 !important;
  transform: scale(1) !important;
}

:is(
  .storefront-product-card .product-image .inner,
  .storefront-product-card .product-image > a,
  .storefront-product-card .storefront-category-card__image-link .inner,
  .storefront-product-card .storefront-category-card__image-link
) > img + img,
:is(
  .storefront-product-card .product-image img.storefront-product-card__hover-image,
  .storefront-product-card .storefront-category-card__image-link img.storefront-product-card__hover-image,
  .storefront-product-card .product-image img.hover-image,
  .storefront-product-card .storefront-category-card__image-link img.hover-image
) {
  opacity: 0 !important;
  transform: scale(1) !important;
}

/* CSS is parsed after Porto. Keep the initial rest state transition-free
 * until the footer controller has forced one layout read. This prevents a
 * background tab from retaining Porto's previous opacity/transform as an
 * interrupted transition. The ready state then restores the configured motion. */
body.storefront-product-card-transitions-ready
:is(
  .storefront-product-card .product-image img,
  .storefront-product-card .storefront-category-card__image-link img
) {
  transition: all 0.8s ease !important;
}

/* Mouse preview remains native, but only where the primary input genuinely
 * supports hover. Touch devices use the explicit preview state below so a tap
 * never has to spend its first activation on a synthetic :hover state. */
@media (hover: hover) and (pointer: fine) {
  html:not(.storefront-product-card-touch-input) .storefront-product-card:not(:where([data-storefront-product-media="zoom"])):has(
    .product-image:hover,
    > .product-inner > .product-content > .add-links-wrap:hover,
    .storefront-category-card__media:hover,
    > .storefront-category-card__inner > .storefront-category-card__action:hover,
    > .storefront-category-card__inner > .storefront-category-card__media > .storefront-category-card__action:hover
  )
  :is(
    .product-image .inner,
    .product-image > a,
    .storefront-category-card__image-link .inner,
    .storefront-category-card__image-link
  ) > img:first-of-type:not(:only-of-type) {
    opacity: 0 !important;
  }

  html:not(.storefront-product-card-touch-input) .storefront-product-card:not(:where([data-storefront-product-media="zoom"])):has(
    .product-image:hover,
    > .product-inner > .product-content > .add-links-wrap:hover,
    .storefront-category-card__media:hover,
    > .storefront-category-card__inner > .storefront-category-card__action:hover,
    > .storefront-category-card__inner > .storefront-category-card__media > .storefront-category-card__action:hover
  )
  :is(
    .product-image .inner,
    .product-image > a,
    .storefront-category-card__image-link .inner,
    .storefront-category-card__image-link
  ) > img + img,
  html:not(.storefront-product-card-touch-input) .storefront-product-card:not(:where([data-storefront-product-media="zoom"])):has(
    .product-image:hover,
    > .product-inner > .product-content > .add-links-wrap:hover,
    .storefront-category-card__media:hover,
    > .storefront-category-card__inner > .storefront-category-card__action:hover,
    > .storefront-category-card__inner > .storefront-category-card__media > .storefront-category-card__action:hover
  )
  :is(
    .product-image img.storefront-product-card__hover-image,
    .storefront-category-card__image-link img.storefront-product-card__hover-image,
    .product-image img.hover-image,
    .storefront-category-card__image-link img.hover-image
  ) {
    opacity: 1 !important;
    transform: scale(1.05) !important;
  }

  html:not(.storefront-product-card-touch-input)
  body.storefront-product-card-transitions-ready
  .storefront-product-card:not(:where([data-storefront-product-media="zoom"])):has(
    .product-image:hover,
    > .product-inner > .product-content > .add-links-wrap:hover,
    .storefront-category-card__media:hover,
    > .storefront-category-card__inner > .storefront-category-card__action:hover,
    > .storefront-category-card__inner > .storefront-category-card__media > .storefront-category-card__action:hover
  )
  :is(
    .product-image .inner,
    .product-image > a,
    .storefront-category-card__image-link .inner,
    .storefront-category-card__image-link
  ) > img + img,
  html:not(.storefront-product-card-touch-input)
  body.storefront-product-card-transitions-ready
  .storefront-product-card:not(:where([data-storefront-product-media="zoom"])):has(
    .product-image:hover,
    > .product-inner > .product-content > .add-links-wrap:hover,
    .storefront-category-card__media:hover,
    > .storefront-category-card__inner > .storefront-category-card__action:hover,
    > .storefront-category-card__inner > .storefront-category-card__media > .storefront-category-card__action:hover
  )
  :is(
    .product-image img.storefront-product-card__hover-image,
    .storefront-category-card__image-link img.storefront-product-card__hover-image,
    .product-image img.hover-image,
    .storefront-category-card__image-link img.hover-image
  ) {
    transition: opacity 0.5s ease, transform 2s cubic-bezier(0, 0, 0.44, 1.18) !important;
  }
}

/* Touch preview reuses the exact same image states and transitions as desktop
 * hover. JavaScript owns only this state class; it never intercepts navigation
 * or scrolling. */
.storefront-product-card:not(:where([data-storefront-product-media="zoom"])).storefront-product-card--touch-preview
:is(
  .product-image .inner,
  .product-image > a,
  .storefront-category-card__image-link .inner,
  .storefront-category-card__image-link
) > img:first-of-type:not(:only-of-type) {
  opacity: 0 !important;
}

.storefront-product-card:not(:where([data-storefront-product-media="zoom"])).storefront-product-card--touch-preview
:is(
  .product-image .inner,
  .product-image > a,
  .storefront-category-card__image-link .inner,
  .storefront-category-card__image-link
) > img + img,
.storefront-product-card:not(:where([data-storefront-product-media="zoom"])).storefront-product-card--touch-preview
:is(
  .product-image img.storefront-product-card__hover-image,
  .storefront-category-card__image-link img.storefront-product-card__hover-image,
  .product-image img.hover-image,
  .storefront-category-card__image-link img.hover-image
) {
  opacity: 1 !important;
  transform: scale(1.05) !important;
}

body.storefront-product-card-transitions-ready
.storefront-product-card:not(:where([data-storefront-product-media="zoom"])).storefront-product-card--touch-preview
:is(
  .product-image .inner,
  .product-image > a,
  .storefront-category-card__image-link .inner,
  .storefront-category-card__image-link
) > img + img,
body.storefront-product-card-transitions-ready
.storefront-product-card:not(:where([data-storefront-product-media="zoom"])).storefront-product-card--touch-preview
:is(
  .product-image img.storefront-product-card__hover-image,
  .storefront-category-card__image-link img.storefront-product-card__hover-image,
  .product-image img.hover-image,
  .storefront-category-card__image-link img.hover-image
) {
  transition: opacity 0.5s ease, transform 2s cubic-bezier(0, 0, 0.44, 1.18) !important;
}

:is(
  .storefront-product-card .labels,
  .storefront-product-card .storefront-category-card__badges
) {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 5px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: auto;
  top: 0;
  z-index: 5;
}

:is(
  .storefront-product-card .labels .onsale,
  .storefront-product-card .storefront-category-card__badge--sale
) {
  align-items: center;
  background: rgb(232, 83, 66);
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  color: #fff;
  display: inline-flex;
  font: 400 16px/22px var(--storefront-product-card-font);
  height: 24px;
  justify-content: center;
  margin: 0;
  min-width: 0;
  padding: 1px 7px;
  text-transform: none;
  white-space: nowrap;
}

:is(
  .storefront-product-card .labels .stock,
  .storefront-product-card .storefront-category-card__badge--stock,
  .storefront-product-card:not(.storefront-category-card) .product-image .stock.out-of-stock
) {
  align-items: center;
  background: rgb(193, 193, 193);
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  color: #fff;
  display: inline-flex;
  font: 400 12px/20px var(--storefront-product-card-font);
  height: 20px;
  justify-content: center;
  letter-spacing: .02em;
  margin: 0;
  min-width: 0;
  padding: 0 8px;
  text-transform: capitalize;
  white-space: nowrap;
}

.storefront-product-card:not(.storefront-category-card) .product-image .stock.out-of-stock {
  bottom: auto;
  cursor: auto;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: auto;
  top: 0;
  transform: none;
  width: auto;
  z-index: 5;
}

.storefront-product-card:not(.storefront-category-card) .product-image:has(.labels .onsale) .stock.out-of-stock {
  top: 29px;
}

:is(
  .storefront-product-card .product-loop-title,
  .storefront-product-card .product-loop-title .woocommerce-loop-product__title,
  .storefront-product-card .storefront-category-card__title
) {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--storefront-product-card-ink);
  display: -webkit-box;
  font: 400 16px/22px var(--storefront-product-card-font);
  letter-spacing: .02em;
  max-height: 44px;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: normal;
}

:is(
  .storefront-product-card .product-loop-title,
  .storefront-product-card .storefront-category-card__title
) {
  grid-column: 1;
  grid-row: 2;
  margin: 15px 0 8px;
  position: relative;
  transition: all 0.3s ease !important;
}

.storefront-product-card .product-loop-title .woocommerce-loop-product__title {
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
}

:is(
  .storefront-product-card .product-loop-title,
  .storefront-product-card .storefront-category-card__title
):hover {
  color: var(--storefront-product-card-accent);
}

:is(
  .storefront-product-card .product-image > a,
  .storefront-product-card .product-loop-title,
  .storefront-product-card .storefront-category-card__image-link,
  .storefront-product-card .storefront-category-card__title
):focus-visible {
  outline: 1px auto -webkit-focus-ring-color;
  outline-offset: 0;
}

:is(
  .storefront-product-card .rating-wrap:has(.star-rating > span[style*="width:0"]),
  .storefront-product-card .storefront-category-card__rating:has(.star-rating > span[style*="width:0"])
) {
  display: none;
}

:is(
  .storefront-product-card .price,
  .storefront-product-card .storefront-category-card__price
) {
  align-items: baseline;
  color: var(--storefront-product-card-ink);
  display: flex;
  flex-wrap: wrap;
  font: 700 13px/22px var(--storefront-product-card-font);
  gap: 0;
  grid-column: 1;
  grid-row: 3;
  height: auto;
  justify-content: center;
  line-height: 22px;
  margin: 0 0 13px;
  min-height: 23px;
  padding: 0;
  text-align: center;
}

:is(
  .storefront-product-card .price,
  .storefront-product-card .storefront-category-card__price
) :is(.woocommerce-Price-amount, bdi) {
  color: inherit;
  font: inherit;
  font-weight: 700;
}

:is(
  .storefront-product-card .price,
  .storefront-product-card .storefront-category-card__price
) .storefront-price-from {
  align-items: baseline;
  display: inline-flex;
  gap: 13px;
  justify-content: center;
}

:is(
  .storefront-product-card .price,
  .storefront-product-card .storefront-category-card__price
) .storefront-price-from__label {
  color: rgb(150, 150, 150);
  font: 400 16px/22px var(--storefront-product-card-font);
}

:is(
  .storefront-product-card .price,
  .storefront-product-card .storefront-category-card__price
) del {
  color: rgb(150, 150, 150);
  display: inline;
  font: 400 16px/22px var(--storefront-product-card-font);
  margin-right: 7px;
  opacity: 1;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

:is(
  .storefront-product-card .price,
  .storefront-product-card .storefront-category-card__price
) ins {
  background: transparent;
  color: var(--storefront-color-price-sale);
  display: inline;
  font: 700 16px/22px var(--storefront-product-card-font);
  text-decoration: none;
}

:is(
  .storefront-product-card > .product-inner > .product-content > .add-links-wrap,
  .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__action,
  .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__media > .storefront-category-card__action
) {
  align-self: end !important;
  background: transparent !important;
  box-sizing: border-box !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: 42px !important;
  justify-self: stretch !important;
  margin: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  pointer-events: none !important;
  position: relative !important;
  transform: translate3d(0, 15px, 0) !important;
  transition: none !important;
  visibility: hidden !important;
  width: 100% !important;
  z-index: 10 !important;
}

body.storefront-product-card-transitions-ready
:is(
  .storefront-product-card > .product-inner > .product-content > .add-links-wrap,
  .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__action,
  .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__media > .storefront-category-card__action
) {
  transition: transform 0.5s ease, opacity 0.35s ease !important;
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  html:not(.storefront-product-card-touch-input) :is(
    .storefront-product-card > .product-inner:hover > .product-content > .add-links-wrap,
    .storefront-product-card > .storefront-category-card__inner:hover > .storefront-category-card__action,
    .storefront-product-card > .storefront-category-card__inner:hover > .storefront-category-card__media > .storefront-category-card__action
  ) {
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
  }
}

/* Keyboard focus stays independent from touch focus. A normal tap can focus a
 * link, but only :focus-visible is allowed to reveal desktop-only actions. */
:is(
  .storefront-product-card > .product-inner:has(:focus-visible) > .product-content > .add-links-wrap,
  .storefront-product-card > .storefront-category-card__inner:has(:focus-visible) > .storefront-category-card__action,
  .storefront-product-card > .storefront-category-card__inner:has(:focus-visible) > .storefront-category-card__media > .storefront-category-card__action
) {
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
  visibility: visible !important;
}

:is(
  .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links,
  .storefront-product-card .storefront-category-card__action > .add-links-wrap,
  .storefront-product-card .storefront-category-card__action > .add-links-wrap > .add-links,
  .storefront-product-card .storefront-category-card__action > .add-links
) {
  background: transparent !important;
  box-sizing: border-box !important;
  display: block !important;
  height: 100% !important;
  margin: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  opacity: 1 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
  transition: none !important;
  visibility: inherit !important;
  width: 100% !important;
}

:is(
  .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links > .button,
  .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links > .added_to_cart,
  .storefront-product-card .storefront-category-card__action > a.button,
  .storefront-product-card .storefront-category-card__action > .added_to_cart,
  .storefront-product-card .storefront-category-card__action > .add-links > .button,
  .storefront-product-card .storefront-category-card__action > .add-links > .added_to_cart,
  .storefront-product-card .storefront-category-card__action > .add-links-wrap > .add-links > .button,
  .storefront-product-card .storefront-category-card__action > .add-links-wrap > .add-links > .added_to_cart
) {
  align-items: center !important;
  background: var(--storefront-color-primary) !important;
  background-color: var(--storefront-color-primary) !important;
  border: var(--storefront-button-border-width, 0) solid var(--storefront-color-primary-border) !important;
  border-color: var(--storefront-color-primary-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  color: var(--storefront-color-action-text) !important;
  display: flex !important;
  font: 700 14px/22px var(--storefront-product-card-font) !important;
  height: 42px !important;
  justify-content: center !important;
  letter-spacing: .05em !important;
  margin: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  opacity: 1 !important;
  padding: 10px 15px !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition-delay: 0s !important;
  transition-duration: 0.5s !important;
  transition-property: color, background, background-color, border !important;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  visibility: inherit !important;
  width: 100% !important;
}

:is(
  .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links > .button,
  .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links > .added_to_cart,
  .storefront-product-card .storefront-category-card__action > a.button,
  .storefront-product-card .storefront-category-card__action > .added_to_cart,
  .storefront-product-card .storefront-category-card__action > .add-links > .button,
  .storefront-product-card .storefront-category-card__action > .add-links > .added_to_cart,
  .storefront-product-card .storefront-category-card__action > .add-links-wrap > .add-links > .button,
  .storefront-product-card .storefront-category-card__action > .add-links-wrap > .add-links > .added_to_cart
):hover,
:is(
  .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links > .button,
  .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links > .added_to_cart,
  .storefront-product-card .storefront-category-card__action > a.button,
  .storefront-product-card .storefront-category-card__action > .added_to_cart,
  .storefront-product-card .storefront-category-card__action > .add-links > .button,
  .storefront-product-card .storefront-category-card__action > .add-links > .added_to_cart,
  .storefront-product-card .storefront-category-card__action > .add-links-wrap > .add-links > .button,
  .storefront-product-card .storefront-category-card__action > .add-links-wrap > .add-links > .added_to_cart
):focus-visible {
  background: var(--storefront-color-primary-hover) !important;
  background-color: var(--storefront-color-primary-hover) !important;
  border-color: var(--storefront-color-primary-border) !important;
  color: var(--storefront-color-action-hover-text) !important;
  outline: none !important;
}

:is(
  .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links > .button,
  .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__action .button
)::before,
:is(
  .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links > .button,
  .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__action .button
)::after {
  content: none !important;
  display: none !important;
}

/* Keep the disabled button at the configured opacity. These selectors are
 * intentionally more specific than the shared :is() button rule above; the
 * specificity of :is() is inherited from its most-specific branch. */
.storefront-product-card.outofstock
> .product-inner
> .product-content
> .add-links-wrap
> .add-links
> .button,
.storefront-product-card.outofstock
> .product-inner
> .product-content
> .add-links-wrap
> .add-links
> .added_to_cart,
.storefront-product-card.storefront-category-card--out-of-stock
> .storefront-category-card__inner
> .storefront-category-card__action
> a.button.storefront-category-card__out-of-stock-action,
.storefront-product-card.storefront-category-card--out-of-stock
> .storefront-category-card__inner
> .storefront-category-card__media
> .storefront-category-card__action
> a.button.storefront-category-card__out-of-stock-action {
  opacity: 0.6 !important;
  pointer-events: none !important;
  text-transform: uppercase !important;
}

.storefront-product-card .storefront-category-card__action .loading {
  opacity: 0.65 !important;
}

/* The loading state replaces the label with a four-colour 20px spinner while an
 * available product is being added. WooCommerce supplies the loading and
 * product-adding classes; keep this state in the shared card layer so every
 * product surface has the same feedback. */
:is(
  .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links > .button.loading,
  .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links > .button.product-adding,
  .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links > .button.is-loading,
  .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__action .button.loading,
  .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__action .button.product-adding,
  .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__action .button.is-loading
) {
  font-size: 0 !important;
  position: relative !important;
  transition: none !important;
}

:is(
  .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links > .button.loading,
  .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links > .button.product-adding,
  .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links > .button.is-loading,
  .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__action .button.loading,
  .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__action .button.product-adding,
  .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__action .button.is-loading
)::before {
  animation: storefront-product-card-spin 1.4s linear infinite !important;
  border: 2px solid #f6f6f6 !important;
  border-bottom-color: #f00 !important;
  border-left-color: #f6f6f6 !important;
  border-radius: 50% !important;
  border-right-color: #4dd4c6 !important;
  border-top-color: #fc0 !important;
  content: "" !important;
  display: inline-block !important;
  height: 20px !important;
  left: 46% !important;
  position: absolute !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  width: 20px !important;
}

@keyframes storefront-product-card-spin {
  0% {
    transform: translateY(-50%) rotate(0);
  }

  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}


/* The desktop action is positioned at bottom:-1px. In the shared grid
 * contract the action is a row-one grid item, so a 1px relative offset gives
 * the same final geometry without changing the document flow. */
@media (min-width: 1025px) {
  :is(
    .storefront-product-card > .product-inner > .product-content > .add-links-wrap,
    .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__action
  ) {
    top: 1px !important;
  }
}

/* Support the deployed category markup where the action is still inside the media block. */
@media (min-width: 1025px) {
  .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__media > .storefront-category-card__action {
    bottom: -1px !important;
    left: 0 !important;
    position: absolute !important;
    right: 0 !important;
  }
}

@media (max-width: 1024px) {
  .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__media:has(> .storefront-category-card__action) {
    margin-bottom: 47px;
    overflow: visible;
  }
}

@media (max-width: 551px) {
  .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__media:has(> .storefront-category-card__action) {
    margin-bottom: 41px;
  }
}

@media (max-width: 1024px) {
  :is(
    .storefront-product-card > .product-inner,
    .storefront-product-card > .storefront-category-card__inner
  ) {
    grid-template-rows: auto auto auto auto;
  }

  :is(
    .storefront-product-card > .product-inner > .product-content > .add-links-wrap,
    .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__action,
    .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__media > .storefront-category-card__action
  ) {
    align-self: start !important;
    bottom: auto !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    height: 47px !important;
    left: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    padding: 0 0 5px !important;
    pointer-events: auto !important;
    position: relative !important;
    right: auto !important;
    transform: translate3d(0, 10px, 0) !important;
    visibility: visible !important;
    width: 100% !important;
  }

  :is(
    .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links,
    .storefront-product-card .storefront-category-card__action > .add-links-wrap,
    .storefront-product-card .storefront-category-card__action > .add-links-wrap > .add-links,
    .storefront-product-card .storefront-category-card__action > .add-links
  ) {
    height: 100% !important;
  }

  :is(
    .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links > .button,
    .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links > .added_to_cart,
    .storefront-product-card .storefront-category-card__action > a.button,
    .storefront-product-card .storefront-category-card__action > .added_to_cart,
    .storefront-product-card .storefront-category-card__action > .add-links > .button,
    .storefront-product-card .storefront-category-card__action > .add-links > .added_to_cart,
    .storefront-product-card .storefront-category-card__action > .add-links-wrap > .add-links > .button,
    .storefront-product-card .storefront-category-card__action > .add-links-wrap > .add-links > .added_to_cart
  ) {
    height: 42px !important;
    padding: 10px 15px !important;
  }

  :is(
    .storefront-product-card .product-loop-title,
    .storefront-product-card .storefront-category-card__title
  ) {
    grid-row: 3;
    margin: 15px 0 8px;
  }

  :is(
    .storefront-product-card .price,
    .storefront-product-card .storefront-category-card__price
  ) {
    grid-row: 4;
  }
}

@media (max-width: 551px) {
  :is(
    .storefront-product-card > .product-inner > .product-content > .add-links-wrap,
    .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__action,
    .storefront-product-card > .storefront-category-card__inner > .storefront-category-card__media > .storefront-category-card__action
  ) {
    height: 41px !important;
    padding: 0 0 5px !important;
    transform: translate3d(0, 10px, 0) !important;
  }

  :is(
    .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links > .button,
    .storefront-product-card > .product-inner > .product-content > .add-links-wrap > .add-links > .added_to_cart,
    .storefront-product-card .storefront-category-card__action > a.button,
    .storefront-product-card .storefront-category-card__action > .added_to_cart,
    .storefront-product-card .storefront-category-card__action > .add-links > .button,
    .storefront-product-card .storefront-category-card__action > .add-links > .added_to_cart,
    .storefront-product-card .storefront-category-card__action > .add-links-wrap > .add-links > .button,
    .storefront-product-card .storefront-category-card__action > .add-links-wrap > .add-links > .added_to_cart
  ) {
    height: 36px !important;
    min-height: 36px !important;
    padding: 7px 15px !important;
  }

  :is(
    .storefront-product-card .product-loop-title,
    .storefront-product-card .storefront-category-card__title
  ) {
    margin: 8px 0 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .storefront-product-card > .product-inner > .product-content > .add-links-wrap,
    .storefront-product-card .storefront-category-card__action,
    .storefront-product-card .add-links .button,
    .storefront-product-card .storefront-category-card__action .button
  ) {
    transition-duration: 0.01ms !important;
  }

  /* Product images carry motion-reduce, whose effective contract is no
   * transition when the operating system requests reduced motion. */
  :is(
    .storefront-product-card .product-image img,
    .storefront-product-card .storefront-category-card__image-link img
  ) {
    transition: none !important;
  }
}

/* Variations stay on the product page. Actions retain the shared reveal above. */
:is(
  .storefront-product-card .storefront-category-card__swatches,
  .storefront-product-card .variations,
  .storefront-product-card .filter-item-list
) {
  display: none !important;
}

@media (min-width: 1025px) {
  :is(
    .storefront-product-card > .product-inner,
    .storefront-product-card > .storefront-category-card__inner
  ) {
    grid-template-rows: auto auto auto !important;
  }
}

:is(
  .storefront-product-card .product-image,
  .storefront-product-card .storefront-category-card__media
) {
  margin: 0 !important;
}

:is(
  .storefront-product-card .product-loop-title,
  .storefront-product-card .storefront-category-card__title
) {
  color: var(--storefront-product-card-ink) !important;
}

@media (min-width: 1025px) {
  :is(
    .storefront-product-card .product-loop-title,
    .storefront-product-card .storefront-category-card__title
  ) {
    grid-row: 2 !important;
    margin: 15px 0 8px !important;
  }
}

:is(
  .storefront-product-card .product-loop-title,
  .storefront-product-card .storefront-category-card__title
):hover {
  color: var(--storefront-product-card-ink) !important;
}

/* The title link underlines only while the title itself is hovered or
 * keyboard-focused. Keep this in the shared card layer so home, archives,
 * search and product rails expose the same state. */
.storefront-product-card .product-loop-title:hover .woocommerce-loop-product__title,
.storefront-product-card .product-loop-title:focus-visible .woocommerce-loop-product__title,
.storefront-product-card .storefront-category-card__title:hover,
.storefront-product-card .storefront-category-card__title:focus-visible {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

:is(
  .storefront-product-card .price,
  .storefront-product-card .storefront-category-card__price
) {
  display: flex !important;
  font-family: var(--storefront-product-card-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  line-height: 22px !important;
  margin: 0 0 13px !important;
  min-height: 23px !important;
}

@media (min-width: 1025px) {
  :is(
    .storefront-product-card .price,
    .storefront-product-card .storefront-category-card__price
  ) {
    grid-row: 3 !important;
  }
}

:is(
  .storefront-product-card .price,
  .storefront-product-card .storefront-category-card__price
) .storefront-price-from {
  gap: 0 !important;
}

:is(
  .storefront-product-card .price,
  .storefront-product-card .storefront-category-card__price
) .storefront-price-from__label {
  display: inline-block !important;
  margin: -2px 10px 0 0 !important;
}

:is(
  .storefront-product-card .price,
  .storefront-product-card .storefront-category-card__price
) :is(.woocommerce-Price-amount, bdi) {
  font-family: var(--storefront-product-card-font) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  line-height: 22px !important;
}

:is(
  .storefront-product-card .price,
  .storefront-product-card .storefront-category-card__price
) :is(del, del .woocommerce-Price-amount, del bdi) {
  color: rgb(150, 150, 150) !important;
}

:is(
  .storefront-product-card .price,
  .storefront-product-card .storefront-category-card__price
) :is(ins, ins .woocommerce-Price-amount, ins bdi) {
  color: var(--storefront-color-price-sale) !important;
}

@media (max-width: 550px) {
  :is(
    .storefront-product-card .product-loop-title,
    .storefront-product-card .storefront-category-card__title
  ) {
    margin: 8px 0 !important;
  }
}

@media (max-width: 400px) {
  :is(
    .storefront-product-card .price,
    .storefront-product-card .storefront-category-card__price
  ) {
    margin-top: 0 !important;
  }
}

/* Home product grid does not expose purchase-action controls in the configured design. */
body.home .storefront-home-products-section .add-links {
  display: none !important;
}