/* Product page opened directly (/sports.html, /en/sports.html …) instead of inside the home-page modal.
   The page draws the same modal frame itself, so the product content is the page's own content
   (search engines index it as this URL, not as a copy of the home page).
   html.pm-page is set by an inline head script when the page is the top window; inside the home
   modal's iframe the wrappers below are display:contents and the page renders exactly as before. */
.pm-back,.pm-box,.pm-scroll{display:contents}
.pm-x{display:none}

html.pm-page,html.pm-page body{height:100%;overflow:hidden}
html.pm-page body{background:#0a0a0a}
html.pm-page .pm-back{position:fixed;inset:0;z-index:1080;background:rgba(10,10,10,.95);display:flex;align-items:center;justify-content:center;padding:24px;animation:pmFade .35s ease both}
/* opening: same timing/shape as the modal's pmOpen, drawn with clip-path instead of scale — the page's scripts
   measure text with getBoundingClientRect, which a scale transform would distort (an iframe hid that) */
html.pm-page .pm-box{display:block;background:var(--pm-bg,#cc0000);max-width:none;width:90vw;height:88vh;position:relative;transform:translateZ(0);opacity:0;clip-path:inset(48% 40%);animation:pmOpenClip 1.05s cubic-bezier(.22,1,.36,1) forwards}
/* the box is the page's viewport (as the modal's iframe was): it scrolls, and its transform makes it the
   containing block of the page's position:fixed elements (hero image, image viewers) */
html.pm-page .pm-scroll{display:block;position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;outline:0;z-index:0}
html.pm-page .pm-back.pm-closing .pm-box{clip-path:none;animation:pmClose .85s cubic-bezier(.22,1,.36,1) forwards}
@keyframes pmFade{from{opacity:0}to{opacity:1}}
@keyframes pmClose{
  0%{opacity:1;transform:scaleX(1) scaleY(1)}
  45%{opacity:1;transform:scaleX(.2) scaleY(1)}
  80%{opacity:1;transform:scaleX(.2) scaleY(.04)}
  100%{opacity:0;transform:scaleX(.2) scaleY(.04)}
}
@keyframes pmOpenClip{
  0%{opacity:0;clip-path:inset(48% 40%)}
  22%{opacity:1;clip-path:inset(48% 40%)}
  60%{opacity:1;clip-path:inset(48% 0)}
  100%{opacity:1;clip-path:inset(0)}
}
html.pm-page .pm-x{position:absolute;top:0;right:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#ffffff;color:#ff0000;font:400 26px/1 system-ui;cursor:pointer;z-index:2;text-decoration:none;transition:background .3s ease,color .3s ease}
html.pm-page .pm-x:hover{background:#141414;color:#fff}
.pm-x-g{display:inline-block;font-style:normal;line-height:1;transform-origin:center;transition:transform .5s cubic-bezier(.22,1,.36,1)}
html.pm-page .pm-x:hover .pm-x-g{transform:rotate(360deg) scale(1.3)}
html.pm-page .pm-back.pm-closing .pm-x-g{animation:pmXSpin .7s cubic-bezier(.22,1,.36,1)}
@keyframes pmXSpin{from{transform:rotate(0deg) scale(1)}to{transform:rotate(360deg) scale(1.4)}}
@media (max-width:920px){html.pm-page .pm-back{padding:0}html.pm-page .pm-box{max-width:none;width:100vw;height:100vh;height:100dvh}}

/* sizes that followed the iframe's viewport now follow the box */
html.pm-page .pd-hero-img{height:100%}
/* Bootstrap .container-xl breakpoints as measured on the 90vw box (box ≥1200 / ≥1400px) */
html.pm-page .container-xl{max-width:none}
@media (min-width:1334px){html.pm-page .container-xl{max-width:1140px}}
@media (min-width:1556px){html.pm-page .container-xl{max-width:1320px}}