.portrait-preview .detail-screen:has([data-media-key^="breakfast-ricotta-syrniki:"]){display:block;background:#271a11}
.portrait-preview .detail-image[data-media-key^="breakfast-ricotta-syrniki:"]{position:absolute;inset:0;width:100%;height:100%;z-index:-2;background:#271a11;container-type:size}
.portrait-preview .detail-image[data-media-key^="breakfast-ricotta-syrniki:"]>img{content:url('assets/detail-syrniki-portrait-v1.png');object-fit:cover;object-position:50% 50%;width:100%;height:100%}
/* Play the original landscape clip over the portrait scene without enlarging
   it to screen height. Feather only its background edges, not the food. */
.portrait-preview .detail-image[data-media-key^="breakfast-ricotta-syrniki:"]>video{display:block;position:absolute;inset:auto;left:50%;top:34.5%;transform:translateX(-50%);width:max(104%,52cqh);height:auto;aspect-ratio:16/9;object-fit:contain;mask-image:linear-gradient(transparent,#000 8%,#000 89%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 8%,#000 89%,transparent)}
.portrait-preview .detail-screen:has([data-media-key^="breakfast-ricotta-syrniki:"]):after{display:block;background:linear-gradient(180deg,#0003,transparent 30%,transparent 70%,#0002)}
.portrait-preview .detail-screen:has([data-media-key^="breakfast-ricotta-syrniki:"]) .detail-heading{color:#fff}
.portrait-preview .detail-screen:has([data-media-key^="breakfast-ricotta-syrniki:"]) .detail-heading small{color:#ffffffad}
.portrait-preview .detail-screen:has([data-media-key^="breakfast-ricotta-syrniki:"]) .detail-heading .icon-button{background:#241c1840;color:#fff;border-color:#ffffff30}
.portrait-preview .detail-screen:has([data-media-key^="breakfast-ricotta-syrniki:"]) .detail-info{background:#ffffff18;color:#fff;border-color:#ffffff18;margin-top:16px}
.portrait-preview .detail-screen:has([data-media-key^="breakfast-ricotta-syrniki:"]) .detail-bottom{position:absolute}
.portrait-preview .detail-screen:has([data-media-key^="breakfast-ricotta-syrniki:"]) .modifier-tile{background:#a28b736b;border-color:#ffffff15;backdrop-filter:blur(18px)}
.portrait-preview .detail-screen:has([data-media-key^="breakfast-ricotta-syrniki:"]) .inline-sauce-option{background:#8f78628c}
.portrait-preview .detail-screen:has([data-media-key^="breakfast-ricotta-syrniki:"]) .inline-sauce-option:has(input:checked){background:#8f7862b3;border-color:#ffffffb3}
.portrait-preview .detail-screen:has([data-media-key^="breakfast-ricotta-syrniki:"]) .product-footer{background:#9b87726b;border-color:#ffffff24}

/* A fixed-ratio stage keeps each registered video aligned with its backdrop
   at every viewport size. The original clips are never stretched. */
.detail-screen:has(.has-portrait-scene){display:block;background:#171512}
.detail-image.has-portrait-scene{position:absolute;inset:0;width:100%;height:100%;z-index:-2;background:#171512;container-type:size}
.portrait-stage{position:absolute;left:50%;top:50%;width:max(100cqw,50cqh);height:auto;aspect-ratio:1/2;transform:translate(-50%,-50%);isolation:isolate}
.portrait-stage>img{display:block;width:100%;height:100%;object-fit:cover;animation:none}
.portrait-stage>.portrait-backdrop{position:absolute;inset:0;z-index:-1}
.portrait-stage:has(video.playing)>.portrait-poster{mask-image:linear-gradient(#000 calc(var(--clip-top) - 12%),transparent calc(var(--clip-top) - 8%),transparent calc(var(--clip-top) + var(--clip-height) + 8%),#000 calc(var(--clip-top) + var(--clip-height) + 12%));-webkit-mask-image:linear-gradient(#000 calc(var(--clip-top) - 12%),transparent calc(var(--clip-top) - 8%),transparent calc(var(--clip-top) + var(--clip-height) + 8%),#000 calc(var(--clip-top) + var(--clip-height) + 12%))}
.portrait-stage>video{display:block;position:absolute;inset:auto;left:var(--clip-left,0%);top:var(--clip-top,30%);width:var(--clip-width,100%);height:auto;aspect-ratio:16/9;object-fit:contain;transform:none;mask-image:linear-gradient(transparent,#000 5%,#000 94%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 5%,#000 94%,transparent)}
.detail-screen:has(.has-portrait-scene):after{display:block;background:linear-gradient(180deg,#0003,transparent 30%,transparent 70%,#0002)}
.detail-screen:has(.has-portrait-scene) .detail-heading{color:#fff}
.detail-screen:has(.has-portrait-scene) .detail-heading small{color:#ffffffad}
.detail-screen:has(.has-portrait-scene) .detail-heading .icon-button{background:#241c1840;color:#fff;border-color:#ffffff30}
.detail-screen:has(.has-portrait-scene) .detail-info{background:#ffffff18;color:#fff;border-color:#ffffff18;margin-top:16px}
.detail-screen:has(.has-portrait-scene) .detail-bottom{position:absolute}
.detail-screen:has(.has-portrait-scene) .modifier-tile{background:#a28b736b;border-color:#ffffff15;backdrop-filter:blur(18px)}
.detail-screen:has(.has-portrait-scene) .inline-sauce-option{background:#8f78628c}
.detail-screen:has(.has-portrait-scene) .product-footer{background:#9b87726b;border-color:#ffffff24}