.product-hero{--scene:#f3b9d3;--accent:#84294f;display:block;position:relative;isolation:isolate;background:var(--scene);padding:30px 5% 26px;overflow:hidden;transition:background .55s;color:#351623}
.product-hero[data-flavor=chicken]{--scene:#f5dc65;--accent:#bf3a12}
.ph-heading{text-align:center;position:relative;z-index:2;pointer-events:none}.product-hero .ph-heading h1{font-family:'Golos Text',sans-serif;font-weight:900;font-size:clamp(42px,6.2vw,88px);letter-spacing:-.035em;line-height:.88;margin:16px 0 0;color:var(--accent);transition:color .4s}.product-hero .ph-heading h1 em{font-style:normal;background:none;padding:0;transform:none;font-size:.64em;letter-spacing:-.025em}.ph-heading .eyebrow{font-size:11px;letter-spacing:.12em}
.ph-stage{position:relative;height:410px;max-width:1040px;margin:-8px auto 0}.ph-stage:before{content:'';position:absolute;width:480px;height:390px;background:#fff8da55;left:50%;top:15px;transform:translateX(-50%) rotate(-8deg);border-radius:45% 55% 32% 68% / 40% 40% 60% 60%;z-index:1}
.ph-can{position:absolute;left:50%;top:-18px;width:440px;height:440px;margin-left:-220px;background:transparent;border:0;padding:0;cursor:pointer;filter:drop-shadow(12px 18px 12px #562b3729);animation:can-sway 6s ease-in-out infinite;z-index:2}.ph-can-image{display:block;width:100%;height:100%;background-image:url('assets/packshots-gold-v3.lossless.webp');background-size:200% 200%;background-position:0 0;clip-path:polygon(18% 10%,19% 8%,24% 6%,38% 4.7%,61% 4.7%,76% 6%,82% 8%,83.5% 10%,83.5% 89%,81% 92%,73% 94%,56% 96%,35% 95%,23% 92.8%,17.5% 89%);transition:filter .3s}.product-hero[data-flavor=chicken] .ph-can-image{background-position:0 100%}.product-hero .ph-can[aria-pressed=true] .ph-can-image{background-position:100% 0}.product-hero[data-flavor=chicken] .ph-can[aria-pressed=true] .ph-can-image{background-position:100% 100%}.ph-can.is-switching{animation:can-arrive .55s ease both}
.ph-origin{position:absolute;left:10%;top:52px;border:3px double #23529b;border-radius:50%;width:145px;height:145px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#23529b;transform:rotate(-15deg);gap:8px}.ph-origin strong{font-size:25px;border-block:2px solid;padding:3px 0;letter-spacing:-.04em}.ph-origin span{font-size:9px;font-weight:700;letter-spacing:.06em}.ph-fact{position:absolute;left:7%;top:248px;background:#e6fa87;box-shadow:5px 5px 0 #351623;transform:rotate(-7deg);padding:13px 18px;display:flex;flex-direction:column}.ph-fact strong{font-size:38px;line-height:1}.ph-fact span{font-size:10px;font-weight:700;margin-top:6px}
.ph-medal{position:absolute;right:6%;top:80px;width:185px;height:185px;background:#c79a43;color:#533814;clip-path:polygon(50% 0%,57% 5%,65% 2%,70% 9%,79% 9%,82% 17%,90% 21%,90% 30%,98% 35%,95% 43%,100% 50%,95% 57%,98% 65%,90% 70%,90% 79%,82% 82%,79% 90%,70% 90%,65% 98%,57% 95%,50% 100%,43% 95%,35% 98%,30% 90%,21% 90%,18% 82%,10% 79%,10% 70%,2% 65%,5% 57%,0% 50%,5% 43%,2% 35%,10% 30%,10% 21%,18% 18%,21% 10%,30% 10%,35% 2%,43% 5%);padding:15px;transform:rotate(13deg)}.ph-medal>div{border:3px double #78521e;border-radius:50%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#e7be6e}.ph-medal span{font-size:8px;letter-spacing:.05em;font-weight:700}.ph-medal b{font-size:19px;line-height:1}.ph-medal strong{text-align:center;font-family:Georgia,serif;font-size:19px;line-height:1.04;letter-spacing:.025em}.ph-small-fact{position:absolute;right:8%;top:303px;font-size:13px;font-weight:800;transform:rotate(4deg);line-height:1.25}.ph-turn-hint{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:11px;text-align:center;line-height:1.4;z-index:3}
.ph-bottom{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 40px;position:relative;z-index:4;margin-top:18px}.ph-switch{display:flex;padding:5px;background:#fffaf359;border:1px solid #35162344;border-radius:40px;gap:3px}.ph-switch button{padding:13px 22px;background:transparent;border-radius:30px;font-size:13px}.ph-switch button[aria-pressed=true]{background:#351623;color:#fffaf3}.ph-purchase{display:flex;align-items:center;gap:18px}.ph-price{font-size:12px;white-space:nowrap}.ph-price strong{font-size:18px}.ph-purchase .button{min-height:48px;padding:13px 24px;font-size:14px}.ph-mix{background:none;border-bottom:1px solid;padding:5px 0;font-size:12px}.ph-bottom>p{flex-basis:100%;text-align:center;font-size:11px;min-height:16px}
@keyframes can-sway{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(3deg) translateY(-9px)}}@keyframes can-arrive{from{transform:translateX(45px) rotate(12deg);opacity:.3}to{transform:translateX(0) rotate(-5deg);opacity:1}}
@media(max-width:700px){.product-hero{padding:23px 4% 25px}.ph-heading .eyebrow{font-size:8px;letter-spacing:.06em}.product-hero .ph-heading h1{font-size:43px;line-height:1;margin-top:13px}.product-hero .ph-heading h1 em{font-size:.6em}.ph-stage{height:330px;margin-top:3px}.ph-stage:before{width:280px;height:280px;top:25px}.ph-can{width:320px;height:320px;margin-left:-160px;top:0}.ph-origin{width:86px;height:86px;left:0;top:15px;z-index:3;gap:4px}.ph-origin strong{font-size:15px}.ph-origin span{font-size:6px}.ph-fact{left:0;top:185px;padding:9px 10px;z-index:3}.ph-fact strong{font-size:25px}.ph-fact span{font-size:7px}.ph-medal{width:113px;height:113px;right:-4px;top:100px;padding:10px;z-index:3}.ph-medal strong{font-size:12px}.ph-medal span{font-size:5px}.ph-medal b{font-size:12px}.ph-medal>div{gap:3px}.ph-small-fact{right:0;top:243px;font-size:9px}.ph-turn-hint{font-size:10px;bottom:0}.ph-bottom{gap:15px;margin-top:15px}.ph-switch button{font-size:12px;padding:11px 20px}.ph-purchase{justify-content:center;gap:12px;flex-wrap:wrap;width:100%}.ph-price strong{font-size:17px}.ph-purchase .button{padding:12px 19px}.ph-mix{font-size:11px}.ph-bottom>p{font-size:10px}.ph-switch{order:0}}
@media(min-width:701px) and (max-height:850px){.product-hero{padding-top:18px;padding-bottom:18px}.product-hero .ph-heading h1{font-size:62px;margin-top:10px}.ph-stage{height:300px;max-width:950px;margin-top:0}.ph-can{width:320px;height:320px;margin-left:-160px;top:-13px}.ph-stage:before{width:365px;height:280px;top:5px}.ph-origin{top:20px;width:130px;height:130px}.ph-fact{top:185px}.ph-medal{top:35px;width:170px;height:170px}.ph-small-fact{top:240px}.ph-bottom{margin-top:12px;gap:12px 30px}.ph-turn-hint{bottom:-1px}}
@media(prefers-reduced-motion:reduce){.ph-can,.ph-can.is-switching{animation:none}.product-hero{transition:none}}
.ph-origin span:last-child{font-size:8px;letter-spacing:0}@media(min-width:701px) and (max-height:850px){.ph-can{width:300px;height:300px;margin-left:-150px;top:-12px}}@media(max-width:700px){.ph-origin span:last-child{font-size:5px}}
@media(max-width:700px){.ph-small-fact{display:none}.ph-can{width:290px;height:290px;margin-left:-145px;top:10px}}
.ph-origin{border:0;gap:0;width:164px;height:164px}.ph-origin img,.ph-medal img{display:block;width:100%;height:100%;object-fit:contain}.ph-medal{clip-path:none;background:none;padding:0;width:218px;height:218px;filter:none}@media(min-width:701px) and (max-height:850px){.ph-origin{width:148px;height:148px}.ph-medal{width:192px;height:192px}}@media(max-width:700px){.ph-origin{width:100px;height:100px;left:-5px;top:10px}.ph-medal{width:132px;height:132px;right:-5px;top:118px}}

/* Approved front pork candidate; the remaining three views still use the atlas. */
.ph-can-image{background-image:url('assets/pork-front-v4.lossless.webp');background-size:contain;background-position:center;background-repeat:no-repeat;clip-path:none}
.product-hero[data-flavor=chicken] .ph-can-image,
.product-hero .ph-can[aria-pressed=true] .ph-can-image{background-image:url('assets/packshots-gold-v3.lossless.webp');background-size:200% 200%;background-repeat:no-repeat;clip-path:polygon(18% 10%,19% 8%,24% 6%,38% 4.7%,61% 4.7%,76% 6%,82% 8%,83.5% 10%,83.5% 89%,81% 92%,73% 94%,56% 96%,35% 95%,23% 92.8%,17.5% 89%)}
.product-hero[data-flavor=chicken] .ph-can-image{background-position:0 100%}
.product-hero .ph-can[aria-pressed=true] .ph-can-image{background-position:100% 0}
.product-hero[data-flavor=chicken] .ph-can[aria-pressed=true] .ph-can-image{background-position:100% 100%}
.product-hero[data-flavor=pork] .ph-can[aria-pressed=true] .ph-can-image{background-image:url('assets/pork-back-v4.lossless.webp');background-size:contain;background-position:center;background-repeat:no-repeat;clip-path:none}
.product-hero[data-flavor=chicken] .ph-can-image{background-image:url('assets/chicken-front-v4.lossless.webp');background-size:contain;background-position:center;background-repeat:no-repeat;clip-path:none}
.product-hero[data-flavor=chicken] .ph-can[aria-pressed=true] .ph-can-image{background-image:url('assets/chicken-back-v4.lossless.webp');background-size:contain;background-position:center;background-repeat:no-repeat;clip-path:none}
.ph-tap-hint{position:absolute;left:calc(50% + 95px);top:238px;width:74px;z-index:5;pointer-events:none;transform-origin:28% 4%;animation:tap-hand 2.6s ease-in-out infinite;transition:opacity .25s,transform .25s}.ph-tap-hint img{display:block;width:100%;height:auto}.ph-tap-hint:before,.ph-tap-hint:after{content:'';position:absolute;left:19%;top:-2px;width:17px;height:17px;border:2px solid var(--accent);border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.35);animation:tap-ring 2.6s ease-out infinite}.ph-tap-hint:after{animation-delay:.13s}.ph-tap-hint.is-hidden{opacity:0;transform:translateY(10px) scale(.8);animation:none}.ph-tap-hint.is-hidden:before,.ph-tap-hint.is-hidden:after{animation:none}
@keyframes tap-hand{0%,22%,72%,100%{transform:translate(0,0) rotate(-8deg)}38%,52%{transform:translate(-5px,-9px) rotate(-8deg) scale(.96)}}
@keyframes tap-ring{0%,36%{opacity:0;transform:translate(-50%,-50%) scale(.3)}43%{opacity:.75}65%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}}
@media(max-width:700px){.ph-tap-hint{left:calc(50% + 62px);top:184px;width:72px}}
@media(prefers-reduced-motion:reduce){.ph-tap-hint,.ph-tap-hint:before,.ph-tap-hint:after{animation:none}.ph-tap-hint:before{opacity:.65;transform:translate(-50%,-50%) scale(.8)}}
.ph-rotate-hint{position:absolute;left:calc(50% + 135px);top:292px;z-index:5;width:48px;height:48px;border:2px solid #351623;border-radius:50%;display:grid;place-items:center;background:#d7f63b;color:#351623;box-shadow:4px 4px 0 #351623;font:900 30px/1 'Golos Text',sans-serif;pointer-events:none;animation:rotate-hint 2.4s ease-in-out infinite;transition:opacity .25s,transform .25s}.ph-rotate-hint.is-hidden{opacity:0;transform:scale(.7);animation:none}@keyframes rotate-hint{0%,28%,100%{transform:rotate(-14deg) scale(1)}42%{transform:rotate(18deg) scale(1.08)}56%{transform:rotate(-8deg) scale(1)}}@media(max-width:700px){.ph-rotate-hint{left:calc(50% + 92px);top:236px;width:40px;height:40px;font-size:25px;box-shadow:3px 3px 0 #351623}}@media(prefers-reduced-motion:reduce){.ph-rotate-hint{animation:none}}
.ph-can{z-index:4}.ph-origin,.ph-fact,.ph-medal,.ph-small-fact{z-index:2}@media(max-width:700px){.ph-origin{left:-12px;top:24px}.ph-fact{left:-4px;top:196px}.ph-medal{right:-12px;top:108px}.ph-rotate-hint{z-index:5}}

/* Paired calls to action and slider-dot navigation. */
.ph-bottom{display:grid;grid-template-columns:auto;justify-items:center;gap:12px;margin-top:4px}
.ph-purchase{grid-row:1;display:flex;justify-content:center;align-items:center;gap:9px}
.ph-price{margin-right:7px}
.ph-purchase .button,.ph-mix{min-height:47px;padding:10px 14px 10px 17px;border:2px solid #351623;border-radius:11px;font-size:12px;font-weight:750;display:inline-flex;align-items:center;gap:12px;box-shadow:none}
.ph-purchase .button{background:#351623;color:#fffaf3}
.ph-purchase .button span,.ph-mix span{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;font-size:18px;line-height:1}
.ph-purchase .button span{background:#fffaf3;color:#351623}
.ph-mix{background:transparent;color:#351623;border-bottom:2px solid #351623}
.ph-mix span{background:#351623;color:#fffaf3}
.ph-switch{grid-row:2;padding:5px;background:transparent;border:0;border-radius:0;gap:8px;align-items:center}
.ph-switch button{width:9px;height:9px;min-width:0;padding:0;border:0;border-radius:99px;background:#35162355;font-size:0;overflow:hidden;transition:width .25s,background .25s}
.ph-switch button[aria-pressed=true]{width:28px;background:#351623}
.ph-bottom>p{grid-row:3;margin:0;min-height:14px;font-size:10px}
@media(max-width:700px){.ph-bottom{gap:10px;margin-top:5px}.ph-purchase{width:100%;gap:7px;flex-wrap:wrap}.ph-price{flex-basis:100%;text-align:center;margin:0 0 2px}.ph-purchase .button,.ph-mix{min-height:44px;padding:9px 11px 9px 14px;font-size:11px;gap:9px}.ph-purchase .button span,.ph-mix span{width:20px;height:20px}.ph-switch{order:initial}.ph-bottom>p{font-size:9px}}

/* Clean button glyphs and a horizontal product-swipe transition. */
.ph-button-icon svg{display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.ph-stage{touch-action:pan-y;cursor:grab;user-select:none}
.ph-stage.is-dragging{cursor:grabbing}
.product-hero.is-swiping-next .ph-heading,.product-hero.is-swiping-prev .ph-heading{animation:hero-copy-arrive .8s cubic-bezier(.3,0,.2,1) both}
.product-hero.is-revealing-chicken{background:#f3b9d3}
.product-hero.is-revealing-pork{background:#f5dc65}
.product-hero.is-settling{transition:none}
.product-hero.is-revealing-chicken:after,.product-hero.is-revealing-pork:after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;clip-path:circle(0 at 50% 46%)}
.product-hero.is-swiping-next:after{animation:hero-color-next .86s .08s cubic-bezier(.5,0,.18,1) both}
.product-hero.is-swiping-prev:after{animation:hero-color-prev .86s .08s cubic-bezier(.5,0,.18,1) both}
.product-hero.is-revealing-chicken:after{background:#f5dc65}
.product-hero.is-revealing-pork:after{background:#f3b9d3}
.ph-heading,.ph-stage,.ph-bottom{position:relative}
.ph-old-can{position:absolute;left:50%;top:-18px;width:440px;height:440px;margin-left:-220px;background:transparent center/contain no-repeat;filter:drop-shadow(12px 18px 12px #562b3729);z-index:5;pointer-events:none}
.ph-old-can.next{animation:old-can-next .86s cubic-bezier(.6,0,.4,1) both}.ph-old-can.prev{animation:old-can-prev .86s cubic-bezier(.6,0,.4,1) both}
.ph-can.is-entering-next{animation:new-can-next .86s cubic-bezier(.22,.75,.28,1) both}.ph-can.is-entering-prev{animation:new-can-prev .86s cubic-bezier(.22,.75,.28,1) both}
.product-hero.is-swiping-next .ph-stage:before{animation:new-blob-next .86s cubic-bezier(.22,.75,.28,1) both}.product-hero.is-swiping-prev .ph-stage:before{animation:new-blob-prev .86s cubic-bezier(.22,.75,.28,1) both}
@keyframes old-can-next{from{transform:rotate(-5deg) translateX(0);opacity:1}to{transform:rotate(-10deg) translateX(-75vw);opacity:.25}}
@keyframes old-can-prev{from{transform:rotate(-5deg) translateX(0);opacity:1}to{transform:rotate(10deg) translateX(75vw);opacity:.25}}
@keyframes new-can-next{from{transform:rotate(8deg) translateX(72vw);opacity:1}to{transform:rotate(-5deg) translateX(0);opacity:1}}
@keyframes new-can-prev{from{transform:rotate(-8deg) translateX(-72vw);opacity:1}to{transform:rotate(-5deg) translateX(0);opacity:1}}
@keyframes new-blob-next{from{transform:translateX(calc(-50% + 72vw)) rotate(7deg);opacity:.55}to{transform:translateX(-50%) rotate(-8deg);opacity:1}}
@keyframes new-blob-prev{from{transform:translateX(calc(-50% - 72vw)) rotate(-15deg);opacity:.55}to{transform:translateX(-50%) rotate(-8deg);opacity:1}}
@keyframes hero-color-next{0%,12%{clip-path:circle(0 at 84% 46%)}100%{clip-path:circle(150vmax at 50% 46%)}}
@keyframes hero-color-prev{0%,12%{clip-path:circle(0 at 16% 46%)}100%{clip-path:circle(150vmax at 50% 46%)}}
@keyframes hero-copy-arrive{0%{opacity:.15;transform:translateY(10px)}55%,100%{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.ph-old-can{width:290px;height:290px;margin-left:-145px;top:10px}}
@media(prefers-reduced-motion:reduce){.product-hero.is-swiping-next .ph-heading,.product-hero.is-swiping-prev .ph-heading,.product-hero.is-swiping-next .ph-stage:before,.product-hero.is-swiping-prev .ph-stage:before,.ph-old-can,.ph-can.is-entering-next,.ph-can.is-entering-prev{animation:none}.product-hero.is-revealing-chicken:after,.product-hero.is-revealing-pork:after{animation:none;clip-path:circle(150vmax at 50% 46%)}}


/* Шапка: знак ЯМС слева, навигация по центру, корзина справа. Фон прежний, салатовый. */
.header{grid-template-columns:auto 1fr auto;grid-template-areas:"logo nav basket";gap:28px}
.header .wordmark{grid-area:logo;justify-self:start;display:flex;align-items:center;font-size:0;line-height:0;letter-spacing:normal}
.header .wordmark img{height:44px;width:auto;display:block}
.header nav{grid-area:nav;justify-self:center}
.header .basket-button{grid-area:basket;justify-self:end}
@media(max-width:700px){.header{grid-template-columns:auto 1fr;grid-template-areas:"logo basket";gap:10px}.header:before{content:none}.header .wordmark img{height:32px}}


/* Звёздочки вокруг банки: медленно крутятся, при смене вкуса вылетают из-за банки. */
@keyframes ph-spark-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes ph-spark-burst{0%{transform:translate(var(--bx),var(--by)) scale(.2);opacity:0}20%{opacity:1}100%{transform:translate(0,0) scale(1);opacity:1}}
.ph-spark{position:absolute;z-index:1;pointer-events:none;line-height:0}
.ph-spark img{display:block;width:100%;height:100%;animation:ph-spark-spin 64s linear infinite;will-change:transform}
.ph-spark.s1{left:1%;top:22px;width:46px;height:46px;--bx:472px;--by:160px}
.ph-spark.s1 img{animation-duration:72s}
.ph-spark.s2{left:-3%;top:298px;width:34px;height:34px;--bx:512px;--by:-118px}
.ph-spark.s2 img{animation-duration:88s}
.ph-spark.s3{left:20%;top:-12px;width:24px;height:24px;--bx:282px;--by:206px}
.ph-spark.s3 img{animation-duration:56s}
.ph-spark.s4{right:-1%;top:44px;width:40px;height:40px;--bx:-500px;--by:150px}
.ph-spark.s4 img{animation-duration:80s}
.ph-spark.s5{right:5%;top:322px;width:28px;height:28px;--bx:-448px;--by:-136px}
.ph-spark.s5 img{animation-duration:60s}
.ph-spark.s6{right:23%;top:-6px;width:20px;height:20px;--bx:-244px;--by:200px}
.ph-spark.s6 img{animation-duration:96s}
.product-hero.is-swiping-next .ph-spark,.product-hero.is-swiping-prev .ph-spark{animation:ph-spark-burst .95s cubic-bezier(.16,.84,.3,1) both}
@media(min-width:701px) and (max-height:850px){.ph-spark.s2{top:244px;--by:-92px}.ph-spark.s5{top:262px;--by:-108px}}
@media(max-width:700px){.ph-spark{--bx:0px;--by:0px}.ph-spark.s1{left:-1%;top:14px;width:30px;height:30px;--bx:158px;--by:120px}.ph-spark.s2{display:none}.ph-spark.s3{display:none}.ph-spark.s4{right:-1%;top:30px;width:26px;height:26px;--bx:-166px;--by:112px}.ph-spark.s5{right:2%;top:236px;width:20px;height:20px;--bx:-150px;--by:-84px}.ph-spark.s6{display:none}}


/* Фон первого экрана — стопка цветных слоёв, активный проявляется по data-flavor.
   Раньше цвет перекрашивался на самом блоке, а поверх раскрывался круг clip-path:
   он и давал вспышку на долю секунды. Круг отключён. */
.product-hero{background:none;transition:none}
.ph-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .62s ease}
.ph-bg.is-pork{background:#f3b9d3}
.ph-bg.is-chicken{background:#f5dc65}
.product-hero[data-flavor=pork] .ph-bg.is-pork{opacity:1}
.product-hero[data-flavor=chicken] .ph-bg.is-chicken{opacity:1}
.product-hero.is-revealing-chicken,.product-hero.is-revealing-pork{background:none}
.product-hero.is-revealing-chicken:after,.product-hero.is-revealing-pork:after{content:none}

/* Смена вкуса: весь декор выезжает из-за банки.
   Каждый элемент стартует в центре банки мелким и невидимым и разъезжается
   по своим местам. Банка выше по z-index, поэтому они буквально выходят из-за неё.
   --bx/--by — вектор от места элемента до центра банки, --rot — его собственный наклон. */
@keyframes ph-emerge{
  0%{transform:translate(var(--bx),var(--by)) scale(.3) var(--rot);opacity:0}
  22%{opacity:1}
  100%{transform:translate(0,0) scale(1) var(--rot);opacity:1}
}
.product-hero.is-emerging .ph-origin,
.product-hero.is-emerging .ph-fact,
.product-hero.is-emerging .ph-medal,
.product-hero.is-emerging .ph-small-fact,
.product-hero.is-emerging .ph-spark{
  animation:ph-emerge 1.15s cubic-bezier(.18,.82,.26,1) both;
  will-change:transform,opacity;
}
.ph-origin{--rot:rotate(-15deg);--bx:334px;--by:68px}
.ph-fact{--rot:rotate(-7deg);--bx:372px;--by:-96px}
.ph-medal{--rot:rotate(13deg);--bx:-349px;--by:13px}
.ph-small-fact{--rot:rotate(4deg);--bx:-347px;--by:-121px}
.ph-spark{--rot:rotate(0deg)}
/* лёгкая рассинхронизация, чтобы выезжали не строем */
.product-hero.is-emerging .ph-origin{animation-delay:.05s}
.product-hero.is-emerging .ph-medal{animation-delay:.09s}
.product-hero.is-emerging .ph-fact{animation-delay:.15s}
.product-hero.is-emerging .ph-small-fact{animation-delay:.19s}
.product-hero.is-emerging .ph-spark.s1{animation-delay:.12s}
.product-hero.is-emerging .ph-spark.s2{animation-delay:.22s}
.product-hero.is-emerging .ph-spark.s3{animation-delay:.3s}
.product-hero.is-emerging .ph-spark.s4{animation-delay:.16s}
.product-hero.is-emerging .ph-spark.s5{animation-delay:.26s}
.product-hero.is-emerging .ph-spark.s6{animation-delay:.34s}
@media(min-width:701px) and (max-height:850px){
  .ph-origin{--bx:300px;--by:60px}
  .ph-fact{--bx:336px;--by:-78px}
  .ph-medal{--bx:-314px;--by:12px}
  .ph-small-fact{--bx:-312px;--by:-100px}
}
@media(max-width:700px){
  .ph-origin{--bx:150px;--by:52px}
  .ph-fact{--bx:166px;--by:-62px}
  .ph-medal{--bx:-156px;--by:-4px}
  .ph-small-fact{--bx:-154px;--by:-70px}
  .product-hero.is-emerging .ph-origin,
  .product-hero.is-emerging .ph-fact,
  .product-hero.is-emerging .ph-medal,
  .product-hero.is-emerging .ph-small-fact,
  .product-hero.is-emerging .ph-spark{animation-duration:.95s}
}


/* Планшетная ширина: сцена уже 1040px, медаль сдвигается влево
   и краем задевает подсказку поворота — опускаем подсказку. */
@media(min-width:701px) and (max-width:1100px){.ph-rotate-hint{top:352px}}


/* Телефон: банка в полный размер и ПОВЕРХ наклеек — при покачивании
   она их перекрывает, а не наоборот. Наклейки чуть уменьшены и подвинуты
   внутрь экрана, чтобы не обрезались краем. Слои: наклейки 2, банка 4. */
@media(max-width:700px){
  .ph-stage{height:330px;margin-top:3px}
  .ph-stage:before{width:280px;height:280px;top:25px}
  .ph-can,.ph-old-can{width:290px;height:290px;margin-left:-145px;top:10px}
  .ph-origin,.ph-fact,.ph-medal{z-index:2}
  .ph-origin{left:2px;top:20px;width:86px;height:86px;--bx:134px;--by:98px}
  .ph-medal{right:2px;top:112px;width:114px;height:114px;--bx:-121px;--by:-8px}
  .ph-fact{left:2px;top:198px;--bx:102px;--by:-72px}
  .ph-rotate-hint{left:auto;right:14px;top:246px;width:40px;height:40px}
  .ph-spark.s1{left:3px;top:6px;width:26px;height:26px;--bx:164px;--by:142px}
  .ph-spark.s4{right:3px;top:4px;width:24px;height:24px;--bx:-166px;--by:145px}
  .ph-spark.s5{display:none}
}

/* Плашка с цифрой: мягкая скруглённая наклейка с контуром.
   На курином экране в углу сидит нарисованное филе. */
.ph-fact{border:2px solid #351623;border-radius:16px;box-shadow:6px 6px 0 #351623}
.ph-fact-icon{display:none;position:absolute;right:-30px;top:-32px;width:68px;height:68px;
  background:url('assets/fillet.lossless.webp') center/contain no-repeat;transform:rotate(16deg);
  filter:drop-shadow(2px 2px 0 #35162333);pointer-events:none}
.product-hero[data-flavor=chicken] .ph-fact-icon{display:block}
@media(min-width:701px) and (max-height:850px){.ph-fact-icon{width:58px;height:58px;right:-26px;top:-27px}}
@media(max-width:700px){
  .ph-fact{border-width:2px;border-radius:13px;box-shadow:4px 4px 0 #351623}
  .ph-fact-icon{width:48px;height:48px;right:auto;left:-6px;top:-28px;transform:rotate(-16deg)}
}

/* Телефон: плашка вытянута вертикально и стоит в полосе слева от банки.
   Полоса шире, чем казалось: корпус банки начинается на 0,147 ширины
   её картинки, а не у края рамки — слева свободно 71px на 360 и 85px на 390.
   Кнопка поворота вернулась к банке, справа от неё. Банка и сцена не менялись. */
.ph-fact span b{font-weight:inherit;font-size:inherit;letter-spacing:inherit}
.fact-short{display:none}
@media(max-width:700px){
  .fact-full{display:none}
  .fact-short{display:inline}
  /* Свободная полоса = 46vw - 94px. Оставляем 10px до края экрана
     и 8px до банки, остальное отдаём плашке. */
  .ph-fact{left:10px;top:138px;width:clamp(48px,calc(46vw - 118px),84px);
    padding:9px 6px;text-align:center;align-items:center;
    transform:rotate(-6deg);border-radius:13px;box-shadow:4px 4px 0 #351623;
    --bx:146px;--by:-6px}
  .ph-fact strong{font-size:21px;line-height:1}
  .ph-fact span{font-size:7.2px;line-height:1.3;margin-top:3px;letter-spacing:0;hyphens:manual}
  /* Филе — обычный элемент колонки, целиком внутри плашки над цифрой:
     на границе было непонятно, что это. */
  .ph-fact-icon{position:static;left:auto;right:auto;top:auto;
    width:36px;height:31px;margin:0 auto 5px;transform:rotate(-10deg)}
  /* Стрелка поворота сидит на нижнем правом крае банки, как на десктопе,
     а не отдельно у края экрана. Банка видима как центр ± 125px. */
  .ph-rotate-hint{left:calc(50% + 98px);right:auto;top:232px;width:36px;height:36px;font-size:23px;
    box-shadow:3px 3px 0 #351623}
}
@media(max-width:375px){
  .ph-fact{left:8px;padding:8px 5px}
  .ph-fact strong{font-size:19px}
  .ph-fact span{font-size:6.6px}
  .ph-fact-icon{width:32px;height:27px}
}

/* КБЖУ в плашке: на широком экране в строку, на телефоне столбиком —
   плашка там узкая, в строку три значения не встают. */
.ph-macros{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 10px;
  margin-top:7px;padding-top:6px;border-top:1px solid #35162333;
  font-size:11px;font-weight:700;letter-spacing:.01em;line-height:1.3}
.ph-macros[hidden]{display:none}
@media(min-width:701px) and (max-height:850px){.ph-macros{font-size:10px;margin-top:6px;padding-top:5px}}
@media(max-width:700px){
  .ph-macros{flex-direction:column;align-items:center;gap:1px;
    margin-top:6px;padding-top:5px;font-size:7.6px;line-height:1.4}
}

/* Покачивание банки не останавливается никогда: пауза по наведению
   на телефоне залипала после тапа и банка замирала насовсем. */
.ph-can{animation-play-state:running!important}

/* Third flavor: boneless skinless thigh. */
.product-hero[data-flavor=thigh]{--scene:#df6927;--accent:#48232c}
.ph-bg.is-thigh{background:#df6927}
.product-hero[data-flavor=thigh] .ph-bg.is-thigh{opacity:1}
.product-hero[data-flavor=thigh] .ph-can-image{background-image:url('assets/thigh-front-original.svg');background-size:contain;background-position:center;background-repeat:no-repeat;clip-path:none}
.product-hero[data-flavor=thigh] .ph-can[aria-pressed=true] .ph-can-image{background-image:url('assets/thigh-back-original.svg');background-size:contain;background-position:center;clip-path:none}


/* Quantity offer attached to the box action. */
.ph-box-offer{position:relative;display:inline-flex;margin-top:0}
.ph-box-badge{position:absolute;bottom:calc(100% - 3px);left:50%;transform:translateX(-50%) rotate(-3deg);white-space:nowrap;background:#fff4d9;color:#351623;border:1.5px solid #351623;border-radius:4px;padding:5px 8px;font-size:9px;font-weight:850;letter-spacing:.015em;box-shadow:2px 2px 0 #351623;pointer-events:none}
.ph-purchase{padding-top:18px}
.ph-purchase #hero-add,.ph-box-offer .ph-mix{box-sizing:border-box;height:47px;min-height:47px;padding:10px 14px 10px 17px;justify-content:center}
#hero-feedback:empty{display:none}
@media(max-width:700px){.ph-box-badge{font-size:8px;padding:4px 6px}.ph-box-offer{margin-top:0}.ph-purchase{align-items:center}.ph-purchase #hero-add,.ph-box-offer .ph-mix{height:44px;min-height:44px;padding:9px 11px 9px 14px}}

.cart-flying-can{position:fixed;left:0;top:0;width:76px;height:76px;z-index:10000;pointer-events:none;background-image:url(assets/cart-mini-cans.lossless.webp);background-size:300% 100%;background-repeat:no-repeat;will-change:transform,opacity}

.cart-basket-icon{width:36px;height:36px;object-fit:contain;flex-shrink:0}.basket-button,#mobile-basket button[data-review]{display:inline-flex;align-items:center;justify-content:center;gap:8px}.basket-button{padding-top:5px;padding-bottom:5px}