/* v1.4.1: Clearer, more pronounced shadows on all cards/tiles (desktop, tablet, mobile).
   Loaded last so it overrides earlier shadow rules. */
html body {
  --hf-card-shadow: 0 2px 6px rgba(13, 40, 70, .08), 0 12px 28px rgba(13, 40, 70, .16);
  --hf-card-shadow-hover: 0 4px 10px rgba(13, 40, 70, .10), 0 20px 40px rgba(13, 40, 70, .24);
}

/* Category tiles (mobile/tablet smart grid + desktop) */
html body .hfsmart-tile,
html body .hf-products-v1 .hfsmart-tile,
html body .hf-main-category-card,
html body .hf-products-v1 .hf-main-category-card,
/* Subcategory cards */
html body .hf-subcategory-card,
html body .hf-products-v1 .hf-subcategory-card,
/* Product cards */
html body .hf-product-card-v1,
html body .hf-products-v1 .hf-product-card-v1,
html body .hf-mobile-bestseller-card,
html body .hf-products-v1 .hf-mobile-bestseller-card,
html body .hf-products-welcome-product,
html body .hf-products-v1 .hf-products-welcome-product,
html body .hf-products-welcome-category,
html body .hf-products-v1 .hf-products-welcome-category,
html body .hf-pro-search-popular-card {
  box-shadow: var(--hf-card-shadow) !important;
  border-color: #dde8f0 !important;
}

html body .hfsmart-tile:hover,
html body .hfsmart-tile:focus-visible,
html body .hf-main-category-card:hover,
html body .hf-subcategory-card:hover,
html body .hf-product-card-v1:hover,
html body .hf-mobile-bestseller-card:hover,
html body .hf-products-welcome-product:hover,
html body .hf-products-welcome-category:hover,
html body .hf-pro-search-popular-card:hover {
  box-shadow: var(--hf-card-shadow-hover) !important;
}

/* Active (selected) category/subcategory keeps its orange accent on top of the shadow */
html body .hf-main-category-card.is-active,
html body .hf-subcategory-card.is-active {
  box-shadow: 0 0 0 2px rgba(255, 107, 0, .22), var(--hf-card-shadow-hover) !important;
}

/* Give horizontal carousels room so the shadow is not cut off at the bottom */
html body .hf-subcategory-row,
html body .hf-mobile-bestsellers-set,
html body .hf-products-welcome-product-set {
  padding-top: 4px !important;
  padding-bottom: 16px !important;
}