/* One interaction source for loops (including shortcodes, related and upsells),
 * WooCommerce blocks, custom cards and WPC recommendations. Cart rows and Slick
 * tracks are deliberately excluded: carousel navigation keeps its own motion.
 */
body:not(.wp-admin) :is(
  ul.products > li.product:not(.product-category),
  .ffehbo-order-list-card,
  .ffehbo-product-card,
  .ff-sidebar-related-product,
  .wc-block-grid__product,
  .wc-block-product-template > .wc-block-product,
  .woofc-suggested .woofc-suggested-product
) {
  --ffehbo-product-card-yellow: var(--e-global-color-primary, var(--cmsmasters-colors-primary));
  --ffehbo-product-image-inset-color: transparent;
  --ffehbo-product-card-cream: color-mix(in srgb, var(--ffehbo-product-card-yellow) 8%, var(--e-global-color-background, var(--cmsmasters-colors-bg)));
  --ffehbo-product-card-button-hover: color-mix(in srgb, var(--ffehbo-product-card-yellow) 94%, var(--e-global-color-secondary, var(--cmsmasters-colors-secondary)));
  /* An inset outline paints the border without adding to the box model, even
   * on recommendations that only have a bottom border or no existing border.
   */
  outline: 1px solid transparent;
  outline-offset: -1px;
  transition: background-color 200ms ease, outline-color 200ms ease !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
}

/* Paint inside the existing rounded image box without changing its white
 * background, border, padding or dimensions. Unlike inset shadows on replaced
 * images, this remains visible above image content. Keep the existing, more
 * specific media-link keyboard-focus outline intact.
 */
body:not(.wp-admin) :is(
  ul.products > li.product:not(.product-category),
  .ffehbo-order-list-card,
  .ffehbo-product-card,
  .ff-sidebar-related-product,
  .wc-block-grid__product,
  .wc-block-product-template > .wc-block-product,
  .woofc-suggested .woofc-suggested-product
) img {
  outline: 1px solid var(--ffehbo-product-image-inset-color);
  outline-offset: -1px;
  transition: outline-color 200ms ease !important;
}

/* Deepen the active yellow without mixing navy into its hue. The color-mix
 * above remains the fallback in browsers without relative-color support.
 */
@supports (color: hsl(from red h s l)) {
  body:not(.wp-admin) :is(
    ul.products > li.product:not(.product-category),
    .ffehbo-order-list-card,
    .ffehbo-product-card,
    .ff-sidebar-related-product,
    .wc-block-grid__product,
    .wc-block-product-template > .wc-block-product,
    .woofc-suggested .woofc-suggested-product
  ) {
    --ffehbo-product-card-button-hover: hsl(from var(--ffehbo-product-card-yellow) h s calc(l - 4));
  }
}

body:not(.wp-admin) :is(
  ul.products > li.product:not(.product-category),
  .ffehbo-order-list-card,
  .ffehbo-product-card,
  .ff-sidebar-related-product,
  .wc-block-grid__product,
  .wc-block-product-template > .wc-block-product,
  .woofc-suggested .woofc-suggested-product
) :is(a, img, button, .button, .ffehbo-button, .price, .woocommerce-loop-product__title, .ffehbo-loop-description, .ffehbo-stock-pill) {
  transform: none !important;
  translate: none !important;
  scale: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body:not(.wp-admin) :is(
    ul.products > li.product:not(.product-category),
    .ffehbo-order-list-card,
    .ffehbo-product-card,
    .ff-sidebar-related-product,
    .wc-block-grid__product,
    .wc-block-product-template > .wc-block-product,
    .woofc-suggested .woofc-suggested-product
  ):hover,
  body:not(.wp-admin) .ffehbo-order-lists--archive ul.products > li.product.ffehbo-order-list-card:hover {
    --ffehbo-product-image-inset-color: color-mix(in srgb, var(--ffehbo-product-card-yellow) 70%, var(--e-global-color-background, var(--cmsmasters-colors-bg)));
    background-image: none !important;
    background-color: var(--ffehbo-product-card-cream) !important;
    outline-color: var(--ffehbo-product-card-yellow);
  }

  /* Use the existing button role and pseudo-element/icon resets. Changing only
   * its color tokens preserves dimensions, loading glyphs and keyboard focus.
   */
  body:not(.wp-admin) :is(
    ul.products > li.product:not(.product-category),
    .ffehbo-order-list-card,
    .ffehbo-product-card,
    .ff-sidebar-related-product,
    .wc-block-grid__product,
    .wc-block-product-template > .wc-block-product,
    .woofc-suggested .woofc-suggested-product
  ):hover .ffehbo-button--primary:not(:disabled, .disabled, .is-disabled, [aria-disabled="true"], .loading, .ffehbo-add-to-cart--loading) {
    --ffehbo-button-background: var(--ffehbo-product-card-button-hover);
    --ffehbo-button-border: var(--ffehbo-product-card-button-hover);
    --ffehbo-button-hover: var(--ffehbo-product-card-button-hover);
  }
}