/* Keyframes для анимированных иконок продуктов. Портированы из галереи. */
@keyframes floaty   { 0%,100% { transform: translateY(0); }                            50% { transform: translateY(-3.5px); } }
@keyframes breathe  { 0%,100% { transform: scale(1); }                                 50% { transform: scale(1.045); } }
@keyframes kenburns { 0%,100% { transform: scale(1) translate(0,0); }                  50% { transform: scale(1.1) translate(-1.5%,-1%); } }
@keyframes drift    { 0%,100% { transform: translate(0,0); }                           50% { transform: translate(2.5px,-2.5px); } }
@keyframes twinkle  { 0%,100% { opacity: .18; transform: scale(.75); }                 50% { opacity: .85; transform: scale(1.12); } }
@keyframes spinslow { 0%   { transform: rotate(0); }                                   100% { transform: rotate(360deg); } }
@keyframes sway     { 0%,100% { transform: rotate(-3.5deg); }                          50% { transform: rotate(3.5deg); } }
@keyframes glint    { 0%,100% { opacity: .1; }                                         50% { opacity: .9; } }
@keyframes beam     { 0%,100% { opacity: .35; transform: scaleX(.92); }                50% { opacity: .8; transform: scaleX(1.04); } }
@keyframes rise     { 0%,100% { transform: translateY(2px); }                          50% { transform: translateY(-4px); } }

/* Плитка иконки продукта — background-size: cover-подобное поведение.
   viewBox иконки = 0 0 120 120 с собственными полями внутри, поэтому
   масштабируем SVG × 1.7, чтобы центральная композиция заполняла весь тайл. */
.product-icon-tile {
    background: linear-gradient(135deg, var(--pp-t1, #EEF4FF), var(--pp-t2, #DCE7FA));
    position: relative;
    overflow: hidden;
    display: block;
}
.product-icon-tile svg {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
    /* contain: SVG виден целиком, поля вокруг иконки видны */
}
.product-icon-tile::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35) 0%, transparent 55%);
    pointer-events: none;
    z-index: 1;
}

/* Категорийные плитки: .cat-tile-bg — position:absolute inset:0 внутри .cat-tile.
   Не даём product-icon-tile перекрыть эти правила. */
.cat-tile-bg.product-icon-tile {
    position: absolute !important;
    inset: 0 !important;
}
.hero-wide-photo.product-icon-tile {
    position: relative;
    width: 100%;
    height: 100%;
}