/* Shared product-image interaction across theme cards and WooCommerce loops. */
.nd-product-card,
.nd-difference-card,
.nd-woocommerce-content ul.products li.product {
  transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease, border-color .32s ease;
}

.nd-product-image,
.nd-product-image-frame,
.nd-difference-image,
.nd-product-aside-thumb,
.nd-woocommerce-content div.product div.images .woocommerce-product-gallery__image,
.nd-woocommerce-content div.product div.images .flex-control-thumbs li {
  overflow: hidden;
}

.nd-product-image img,
.nd-product-image-frame img,
.nd-difference-image img,
.nd-product-aside-thumb img,
.nd-woocommerce-content div.product div.images .woocommerce-product-gallery__image img,
.nd-woocommerce-content div.product div.images .flex-control-thumbs img {
  transform-origin: center;
  transition: transform .42s cubic-bezier(.2,.7,.2,1), filter .3s ease, opacity .3s ease;
}

.nd-product-image-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f4f1eb;
  overflow: hidden;
}

.nd-woocommerce-content ul.products li.product a .nd-product-image-frame {
  margin: 0 0 14px;
}

.nd-woocommerce-content ul.products li.product .nd-product-image-frame > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  margin: 0 !important;
  padding: 0;
}

.nd-product-image .nd-product-image-secondary,
.nd-product-image-frame .nd-product-image-secondary {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}

.nd-product-image[data-nd-product-swap],
.nd-product-image-frame[data-nd-product-swap] {
  touch-action: pan-y;
}

.nd-product-image[data-nd-product-swap].is-secondary-active .nd-product-image-secondary,
.nd-product-image-frame[data-nd-product-swap].is-secondary-active .nd-product-image-secondary {
  opacity: 1;
}

/* Keep dip-product packaging fully visible in smaller related-product tiles. */
.nd-woocommerce-content div.product .related .nd-product-image-frame > img,
.nd-woocommerce-content div.product .upsells .nd-product-image-frame > img {
  object-fit: contain;
  padding: 4px;
  background: #f5f2ec;
}

@media (hover: hover) and (pointer: fine) {
  .nd-product-card:hover,
  .nd-difference-card:hover,
  .nd-woocommerce-content ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(39, 44, 34, .09);
    border-color: rgba(48, 57, 45, .25);
  }

  .nd-product-card:hover .nd-product-image img,
  .nd-difference-card:hover .nd-difference-image img,
  .nd-product-aside-item:hover .nd-product-aside-thumb img,
  .nd-woocommerce-content ul.products li.product:hover .nd-product-image-frame img,
  .nd-woocommerce-content ul.products li.product:hover a > img,
  .nd-woocommerce-content div.product div.images .woocommerce-product-gallery__image:hover img,
  .nd-woocommerce-content div.product div.images .flex-control-thumbs li:hover img {
    transform: scale(1.04);
  }

  .nd-product-card:hover .nd-product-image img,
  .nd-woocommerce-content ul.products li.product:hover .nd-product-image-frame img {
    filter: saturate(.86);
  }

  .nd-product-image[data-nd-product-swap]:hover .nd-product-image-secondary,
  .nd-product-image-frame[data-nd-product-swap]:hover .nd-product-image-secondary {
    opacity: 1;
    transition-delay: .2s;
  }

  .nd-woocommerce-content div.product .related ul.products li.product:hover,
  .nd-woocommerce-content div.product .upsells ul.products li.product:hover {
    transform: translateY(-3px) !important;
  }
}

@media (hover: none), (pointer: coarse) {
  /* Prevent a tapped card from getting stuck in a desktop hover state. */
  .nd-product-card:hover,
  .nd-difference-card:hover,
  .nd-woocommerce-content ul.products li.product:hover,
  .nd-woocommerce-content div.product .related ul.products li.product:hover,
  .nd-woocommerce-content div.product .upsells ul.products li.product:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: rgba(48, 57, 45, .12) !important;
  }

  .nd-product-card:hover .nd-product-image img,
  .nd-difference-card:hover .nd-difference-image img,
  .nd-product-aside-item:hover .nd-product-aside-thumb img,
  .nd-woocommerce-content ul.products li.product:hover .nd-product-image-frame img,
  .nd-woocommerce-content ul.products li.product:hover a > img,
  .nd-woocommerce-content div.product div.images .woocommerce-product-gallery__image:hover img,
  .nd-woocommerce-content div.product div.images .flex-control-thumbs li:hover img {
    transform: none !important;
    filter: none;
  }

  .nd-product-image[data-nd-product-swap]:hover .nd-product-image-secondary,
  .nd-product-image-frame[data-nd-product-swap]:hover .nd-product-image-secondary {
    opacity: 0;
  }

  .nd-product-card:active,
  .nd-difference-card:active,
  .nd-woocommerce-content ul.products li.product:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(39, 44, 34, .08) !important;
  }

  .nd-product-card:active .nd-product-image img,
  .nd-difference-card:active .nd-difference-image img,
  .nd-product-aside-item:active .nd-product-aside-thumb img,
  .nd-woocommerce-content ul.products li.product:active .nd-product-image-frame img,
  .nd-woocommerce-content ul.products li.product:active a > img,
  .nd-woocommerce-content div.product div.images .woocommerce-product-gallery__image:active img {
    transform: scale(1.015);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nd-product-card,
  .nd-difference-card,
  .nd-woocommerce-content ul.products li.product,
  .nd-product-image img,
  .nd-product-image-frame img,
  .nd-difference-image img,
  .nd-product-aside-thumb img,
  .nd-woocommerce-content div.product div.images .woocommerce-product-gallery__image img,
  .nd-woocommerce-content div.product div.images .flex-control-thumbs img {
    transition: none !important;
  }

  .nd-product-card:hover,
  .nd-difference-card:hover,
  .nd-woocommerce-content ul.products li.product:hover,
  .nd-product-card:active,
  .nd-difference-card:active,
  .nd-woocommerce-content ul.products li.product:active {
    transform: none !important;
  }

  .nd-product-card:hover .nd-product-image img,
  .nd-difference-card:hover .nd-difference-image img,
  .nd-product-aside-item:hover .nd-product-aside-thumb img,
  .nd-woocommerce-content ul.products li.product:hover img,
  .nd-woocommerce-content div.product div.images .woocommerce-product-gallery__image:hover img,
  .nd-woocommerce-content div.product div.images .flex-control-thumbs li:hover img,
  .nd-product-card:active .nd-product-image img,
  .nd-difference-card:active .nd-difference-image img,
  .nd-product-aside-item:active .nd-product-aside-thumb img,
  .nd-woocommerce-content ul.products li.product:active img,
  .nd-woocommerce-content div.product div.images .woocommerce-product-gallery__image:active img {
    transform: none !important;
  }
}

/* Also cover product results, cart thumbnails, and WooCommerce product blocks. */
.nd-editorial-card.type-product .nd-editorial-image,
.woocommerce-cart table.shop_table.cart td.product-thumbnail a,
.wc-block-grid__product-image,
.wc-block-components-product-image {
  overflow: hidden;
}

.nd-editorial-card.type-product .nd-editorial-image img,
.woocommerce-cart table.shop_table.cart td.product-thumbnail img,
.wc-block-grid__product-image img,
.wc-block-components-product-image img {
  transform-origin: center;
  transition: transform .42s cubic-bezier(.2,.7,.2,1);
}

.wc-block-grid__products .wc-block-grid__product,
.wc-block-components-product-template > li {
  transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease;
}

@media (hover: hover) and (pointer: fine) {
  .nd-editorial-card.type-product:hover .nd-editorial-image img,
  .woocommerce-cart table.shop_table.cart td.product-thumbnail a:hover img,
  .wc-block-grid__product:hover .wc-block-grid__product-image img,
  .wc-block-components-product-template > li:hover .wc-block-components-product-image img {
    transform: scale(1.04);
  }

  .wc-block-grid__products .wc-block-grid__product:hover,
  .wc-block-components-product-template > li:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(39, 44, 34, .09);
  }
}

@media (hover: none), (pointer: coarse) {
  .nd-editorial-card.type-product:hover .nd-editorial-image img,
  .woocommerce-cart table.shop_table.cart td.product-thumbnail a:hover img,
  .wc-block-grid__product:hover .wc-block-grid__product-image img,
  .wc-block-components-product-template > li:hover .wc-block-components-product-image img {
    transform: none !important;
  }

  .nd-editorial-card.type-product:active .nd-editorial-image img,
  .woocommerce-cart table.shop_table.cart td.product-thumbnail a:active img,
  .wc-block-grid__product:active .wc-block-grid__product-image img,
  .wc-block-components-product-template > li:active .wc-block-components-product-image img {
    transform: scale(1.015);
  }

  .wc-block-grid__products .wc-block-grid__product:hover,
  .wc-block-components-product-template > li:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nd-editorial-card.type-product .nd-editorial-image img,
  .woocommerce-cart table.shop_table.cart td.product-thumbnail img,
  .wc-block-grid__product-image img,
  .wc-block-components-product-image img,
  .wc-block-grid__products .wc-block-grid__product,
  .wc-block-components-product-template > li {
    transition: none !important;
  }
}
