/* Desktop product thumbnails only. No changes to resource detail carousels. */
#recommended[data-height-fill="pending"] .post-list > .list-item:nth-of-type(n+13) { display: none !important; }
html[data-icon-hover="on"] .ih-icon-target {
  position: relative;
  display: inline-block;
  z-index: 0;
  transform: perspective(760px) rotateX(var(--ih-rx, 0deg)) rotateY(var(--ih-ry, 0deg)) translate3d(var(--ih-tx, 0px), var(--ih-ty, 0px), var(--ih-lift, 0px));
  transform-origin: center;
  transform-style: preserve-3d;
  will-change: transform;
}
html[data-icon-hover="on"] .ih-icon-target > img {
  transform: translateZ(8px);
}
html[data-icon-hover="on"] .ih-icon-target::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 16%;
  right: 16%;
  bottom: -6%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(12,20,36,.38) 0%, rgba(12,20,36,.2) 42%, transparent 76%);
  filter: blur(8px);
  opacity: 0;
  transform: translate3d(var(--ih-shadow-x, 0px), var(--ih-shadow-counter, 0px), -8px) scaleX(.88);
  transition: opacity .16s ease;
  pointer-events: none;
}
html[data-icon-hover="on"] .ih-icon-active { z-index: 3; }
html[data-icon-hover="on"] .ih-icon-active::before { opacity: .9; }
/* Temporarily let the hovered thumbnail escape its card's paint box. */
html[data-icon-hover="on"] .ih-icon-overflow { overflow: visible !important; }
/* Bootstrap's .media uses overflow:hidden to contain its floated icon.
   When overflow is opened for the tilt, keep that same height via clearfix. */
html[data-icon-hover="on"] .media.ih-icon-overflow::after {
  content: "";
  display: table;
  clear: both;
}
html[data-icon-hover="on"] .ih-icon-layer { position: relative; z-index: 30; }
/* Product cards on the homepage use compact Bootstrap media/column rows;
   lift only the active card, leaving whole grid rows in normal flow. */
html[data-icon-hover="on"] .ih-icon-grid-layer { position: relative; z-index: 40; }
html[data-icon-hover="on"] .ih-icon-active { z-index: 50; }
/* In title-triggered cards, keep the thumbnail link/frame fixed and animate only its image. */
html[data-icon-hover="on"] .ih-icon-title-mode { transform: none !important; }
html[data-icon-hover="on"] .ih-icon-title-mode > img {
  transform: perspective(760px) rotateX(var(--ih-rx, 0deg)) rotateY(var(--ih-ry, 0deg)) translate3d(var(--ih-tx, 0px), var(--ih-ty, 0px), var(--ih-lift, 0px)) translateZ(8px);
  transform-origin: center;
  transform-style: preserve-3d;
}
/* Keep the recommendation grid's original float layout and thumbnail frame. */
html[data-icon-hover="on"] #recommended .ih-icon-target {
  display: block !important;
  transform: none !important;
}
html[data-icon-hover="on"] #recommended .ih-icon-target > img {
  transform: perspective(760px) rotateX(var(--ih-rx, 0deg)) rotateY(var(--ih-ry, 0deg)) translate3d(var(--ih-tx, 0px), var(--ih-ty, 0px), var(--ih-lift, 0px)) translateZ(8px);
  transform-origin: center;
  transform-style: preserve-3d;
}
html[data-icon-hover="on"] #recommended .ih-icon-target::before {
  width: 65px;
  left: 50%;
  right: auto;
  margin-left: -32.5px;
}
html[data-icon-hover="on"] #recommended .ih-icon-target::after {
  inset: auto;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: 65px;
  height: 65px;
  transform: translate(-50%, -50%);
}
html[data-icon-hover="on"] .ih-icon-target::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: var(--ih-reflect, 0);
  background:
    radial-gradient(ellipse at var(--ih-light-x, 50%) var(--ih-light-y, 50%), rgba(255,255,255,.46), rgba(115,225,255,.2) 24%, transparent 59%),
    linear-gradient(132deg, transparent 22%, rgba(255,255,255,.2) 38%, rgba(100,221,255,.3) 45%, rgba(242,128,255,.18) 52%, transparent 67%);
  mix-blend-mode: screen;
}
html[data-icon-hover="off"] .ih-icon-target { transform: none !important; }
html[data-icon-hover="off"] .ih-icon-target::before,
html[data-icon-hover="off"] .ih-icon-target::after { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-icon-hover] .ih-icon-target { transform: none !important; }
  html[data-icon-hover] .ih-icon-target::before,
  html[data-icon-hover] .ih-icon-target::after { opacity: 0 !important; }
}