/* Food stays still; only the subtle heat and cooling details move. */
.food-art { overflow: visible; transition: filter .3s ease, opacity .3s ease; }
.heat-steam { color: #b6a38a; }
.steam-wisp { opacity: 0; animation: steam-rise 4.8s ease-in-out infinite; filter: blur(1.3px); }
.steam-wisp:nth-child(2) { animation-delay: -1.6s; }
.steam-wisp:nth-child(3) { animation-delay: -3.2s; }
.tv-screen .heat-steam, .login-story .heat-steam, .mini-tv .heat-steam { color: #fff0d8; }
.cold-halo { transform-origin: 40px 55px; animation: cold-breathe 6s ease-in-out infinite; }
.frost-stars { color: #83bfd2; }
.tv-screen .frost-stars { color: #d4f4ff; }
.frost-star { opacity: .65; animation: frost-glimmer 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.frost-star:nth-child(2) { animation-delay: -1.6s; }
.frost-star:nth-child(3) { animation-delay: -3.3s; }
.cold-drop { opacity: .7; animation: condensation 6s ease-in-out infinite; }
.cold-drop:nth-child(2) { animation-delay: -3s; }
.cold-drop:nth-child(3) { animation-delay: -1.4s; }
.cold-drop:nth-child(4) { animation-delay: -4.5s; }
@keyframes steam-rise {
  0% { opacity: 0; transform: translate(0, 12px) scaleX(.88); }
  25% { opacity: .38; }
  65% { opacity: .27; }
  100% { opacity: 0; transform: translate(8px, -21px) scaleX(1.08); }
}
@keyframes cold-breathe { 0%, 100% { opacity: .65; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes frost-glimmer { 0%, 100% { opacity: .25; transform: scale(.85); } 50% { opacity: .85; transform: scale(1.05); } }
@keyframes condensation { 0%, 15% { opacity: .1; transform: translateY(-2px); } 45% { opacity: .7; } 100% { opacity: 0; transform: translateY(9px); } }

/* Unavailable products have one consistent treatment in the panel and on TV. */
.unavailable .food-art, .sold-out .food-art,
.unavailable .product-art > .burger-art, .unavailable .product-art > .drink-art {
  filter: grayscale(1); opacity: .42;
}
.unavailable .thermal-effects, .sold-out .thermal-effects { display: none; }
.unavailable .thermal-effects *, .sold-out .thermal-effects * { animation: none; }
.product-card.unavailable .product-art { background: #e9ebe6; }
.product-card.unavailable .product-title strong { color: #93998e; }
.stock-label { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid #ffffff39; border-radius: 50px; background: #f1f0e7f0; color: #536053; box-shadow: 0 5px 20px #13281e1c; white-space: nowrap; }
.stock-label > .icon { width: 23px; height: 23px; color: #8b9685; }
.stock-label strong { display: block; color: #4f5c50; font-family: 'Manrope', sans-serif; font-size: 13px; line-height: 1.25; font-weight: 800; }
.stock-label small { display: block; color: #8b9685; font-size: 9px; margin: 4px 0 0; letter-spacing: .5px; }
.stock-label.compact { gap: 5px; padding: 6px 10px; box-shadow: none; }
.stock-label.compact > .icon { width: 13px; height: 13px; }
.stock-label.compact strong { font-size: 9px; }
.product-art > .stock-label { position: absolute; left: 12px; bottom: 12px; z-index: 1; }
.product-art .edit-product { z-index: 2; }
.product-art .burger-art { height: 150px; }
.product-art .drink-art { height: 120px; }

.display-settings { margin: 19px 0; padding-top: 15px; border-top: 1px solid var(--line); }
.display-settings > label { margin: 0 0 10px; font-size: 10px; }
.layout-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.layout-choices button { display: flex; flex-direction: column; align-items: center; gap: 7px; background: #f8f9f5; color: #99a08f; border: 1px solid #e6ebdf; border-radius: 8px; padding: 10px 4px; font-size: 9px; }
.layout-choices button.active { border-color: #91a980; color: #526d42; background: #edf3e6; }
.layout-symbol { display: block; width: 21px; height: 14px; border: 1.5px solid currentColor; border-radius: 3px; margin: 4px 0; }
.layout-symbol.portrait { width: 12px; height: 22px; margin: 0; }
.layout-symbol.auto { width: 18px; height: 18px; margin: 2px 0; border-style: dashed; }
.display-settings > p { margin: 9px 0 0; color: #9ba48f; font-size: 9px; line-height: 1.7; }
.mini-burgers .mini-product { width: 33.333%; min-width: 0; }
.mini-burgers .mini-product > .burger-art { width: 100%; }
.mini-tv.is-portrait { width: 142px; min-height: 245px; margin-left: auto; margin-right: auto; padding: 15px 12px 9px; }
.mini-tv.is-portrait > strong { font-size: 17px; }
.mini-tv.is-portrait .mini-burgers { flex-direction: column; align-items: center; gap: 2px; margin: 8px 0; }
.mini-tv.is-portrait .mini-product { width: 65%; }
.mini-tv.is-portrait .mini-product .burger-art { height: 49px; width: 100%; }
.mini-tv.is-portrait .mini-tv-foot { font-size: 4px; }

/* Both layouts use the actual screen dimensions, including a portrait TV at 1080×1920. */
.tv-screen { --unit: min(1vw, 1.77778vh); padding: calc(1.8 * var(--unit)) calc(3.5 * var(--unit)) calc(1.2 * var(--unit)); min-height: 100vh; min-height: 100svh; }
.tv-screen .tv-header { padding-bottom: calc(1.1 * var(--unit)); }
.tv-screen .tv-logo { font-size: clamp(16px, calc(1.5 * var(--unit)), 38px); }
.tv-screen .tv-header > span { font-size: clamp(10px, calc(.85 * var(--unit)), 24px); }
.tv-screen .tv-title { padding: calc(1.7 * var(--unit)) 0 calc(.6 * var(--unit)); }
.tv-screen .tv-title > div > span { font-size: clamp(7px, calc(.65 * var(--unit)), 17px); letter-spacing: calc(.14 * var(--unit)); }
.tv-screen .tv-title h1 { font-size: clamp(27px, calc(3.5 * var(--unit)), 94px); line-height: 1.2; max-width: none; margin-top: calc(.6 * var(--unit)); }
.tv-screen .tv-title em { display: inline; }
.tv-screen .tv-stamp { width: calc(5.6 * var(--unit)); height: calc(5.6 * var(--unit)); min-width: 50px; min-height: 50px; font-size: clamp(17px, calc(1.8 * var(--unit)), 45px); }
.tv-screen .tv-stamp small { font-size: clamp(6px, calc(.5 * var(--unit)), 13px); }
.tv-screen .tv-burgers { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: calc(2.8 * var(--unit)); margin: calc(.5 * var(--unit)) 0 calc(1.8 * var(--unit)); }
.tv-screen .tv-burger { display: flex; flex-direction: column; padding: 0 0 calc(.5 * var(--unit)); min-width: 0; border: 0; }
.tv-screen .food-visual { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; margin: 0 0 calc(.6 * var(--unit)); }
.tv-screen .food-visual > .burger-art { height: calc(21 * var(--unit)); max-height: 33vh; width: 100%; }
.food-visual > .stock-label { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); z-index: 1; }
.tv-screen .food-visual > .stock-label { padding: calc(.65 * var(--unit)) calc(1.2 * var(--unit)); gap: calc(.6 * var(--unit)); }
.tv-screen .food-visual .stock-label strong { font-size: clamp(10px, calc(1 * var(--unit)), 26px); }
.tv-screen .food-visual .stock-label small { font-size: clamp(7px, calc(.65 * var(--unit)), 17px); }
.tv-screen .food-visual .stock-label > .icon { width: calc(1.5 * var(--unit)); height: calc(1.5 * var(--unit)); min-width: 15px; min-height: 15px; }
.tv-screen .tv-item-title { flex-direction: row; gap: calc(.7 * var(--unit)); align-items: start; }
.tv-screen .tv-item-title h2 { font-size: clamp(17px, calc(1.65 * var(--unit)), 46px); overflow-wrap: anywhere; }
.tv-screen .tv-item-title > strong { font-size: clamp(16px, calc(1.6 * var(--unit)), 42px); }
.tv-screen .tv-burger > p { font-size: clamp(10px, calc(.85 * var(--unit)), 23px); line-height: 1.65; max-width: 97%; margin-top: calc(.65 * var(--unit)); }
.tv-temperature { display: flex; align-items: center; gap: 7px; margin-top: calc(.8 * var(--unit)); font-size: clamp(7px, calc(.57 * var(--unit)), 16px); letter-spacing: calc(.08 * var(--unit)); color: #b8c99f; }
.tv-temperature.hot { color: #dfb47d; }
.tv-temperature > i { width: 5px; height: 5px; border-radius: 50%; background: #dc9f60; box-shadow: 0 0 10px #e2a96740; }
.tv-temperature.out { color: #8e9c88; }
.tv-screen .tv-burger.sold-out h2 { text-decoration: none; color: #b0b8aa; }
.tv-screen .sold-out .tv-item-title > strong { color: #919b8b; }
.tv-screen .tv-burger.sold-out > p { color: #85977c; }
.tv-screen .tv-drinks { flex-direction: row; gap: calc(2 * var(--unit)); padding: calc(1.7 * var(--unit)) 0; align-items: center; }
.tv-screen .tv-drinks-heading { min-width: calc(13 * var(--unit)); }
.tv-screen .tv-drinks-heading > span { font-size: clamp(6px, calc(.52 * var(--unit)), 14px); letter-spacing: calc(.09 * var(--unit)); }
.tv-screen .tv-drinks-heading h2 { font-size: clamp(18px, calc(1.6 * var(--unit)), 42px); margin: calc(.5 * var(--unit)) 0; }
.tv-screen .tv-drinks-heading .cold-caption { color: #8fb9bd; font-size: clamp(6px, calc(.45 * var(--unit)), 13px); letter-spacing: calc(.08 * var(--unit)); }
.tv-screen .tv-drinks-list { width: auto; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(1.2 * var(--unit)); }
.tv-screen .tv-drink { gap: calc(.4 * var(--unit)); min-width: 0; }
.tv-screen .drink-visual { width: calc(4 * var(--unit)); min-width: 36px; flex-shrink: 0; }
.tv-screen .drink-visual > .drink-art { width: 100%; height: auto; }
.tv-screen .tv-drink h3 { font-size: clamp(10px, calc(.85 * var(--unit)), 23px); overflow-wrap: anywhere; }
.tv-screen .tv-drink small { font-size: clamp(7px, calc(.52 * var(--unit)), 15px); line-height: 1.4; margin: calc(.4 * var(--unit)) 0; }
.tv-screen .tv-drink strong { font-size: clamp(11px, calc(.85 * var(--unit)), 25px); }
.tv-screen .tv-drink.sold-out { opacity: 1; }
.tv-screen .tv-drink.sold-out h3 { color: #a0af95; }
.tv-screen .tv-drink .stock-label.compact { background: #e7ecdf15; border-color: #e7ecdf25; padding: calc(.3 * var(--unit)) calc(.5 * var(--unit)); margin-top: 4px; }
.tv-screen .tv-drink .stock-label strong { color: #b6c1ac; font-size: clamp(7px, calc(.56 * var(--unit)), 16px); }
.tv-screen .tv-drink .stock-label > .icon { color: #b6c1ac; width: clamp(10px, calc(.7 * var(--unit)), 19px); height: clamp(10px, calc(.7 * var(--unit)), 19px); }
.tv-screen .tv-footer { flex-wrap: nowrap; padding-top: calc(1.2 * var(--unit)); font-size: clamp(7px, calc(.55 * var(--unit)), 16px); gap: calc(1.1 * var(--unit)); }
.tv-screen .tv-footer > span:first-child { width: auto; }

/* Portrait is chosen automatically by screen ratio, or explicitly from the panel. */
.tv-screen.is-portrait { --unit: min(1vw, .5625vh); width: min(100%, 56.25vh); max-width: none; margin: auto; padding: calc(4 * var(--unit)) calc(5 * var(--unit)) calc(3 * var(--unit)); }
.tv-screen.is-portrait .tv-header { padding-bottom: calc(2.5 * var(--unit)); }
.tv-screen.is-portrait .tv-logo { font-size: clamp(16px, calc(2.7 * var(--unit)), 34px); }
.tv-screen.is-portrait .tv-logo > .icon { width: calc(3.5 * var(--unit)); min-width: 21px; }
.tv-screen.is-portrait .tv-header > span { font-size: clamp(9px, calc(1.4 * var(--unit)), 19px); gap: 10px; }
.tv-screen.is-portrait .tv-title { padding: calc(4.5 * var(--unit)) 0 calc(2 * var(--unit)); }
.tv-screen.is-portrait .tv-title > div > span { font-size: clamp(6px, calc(1 * var(--unit)), 14px); }
.tv-screen.is-portrait .tv-title h1 { font-size: clamp(29px, calc(5.8 * var(--unit)), 70px); margin-top: calc(1.5 * var(--unit)); }
.tv-screen.is-portrait .tv-title em { display: block; }
.tv-screen.is-portrait .tv-stamp { width: calc(11 * var(--unit)); height: calc(11 * var(--unit)); font-size: clamp(18px, calc(3.7 * var(--unit)), 46px); }
.tv-screen.is-portrait .tv-stamp small { font-size: clamp(6px, calc(1 * var(--unit)), 13px); }
.tv-screen.is-portrait .tv-burgers { grid-template-columns: minmax(0, 1fr); gap: calc(2 * var(--unit)); margin: 0 0 calc(3 * var(--unit)); align-content: space-evenly; }
.tv-screen.is-portrait .tv-burger { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); grid-template-rows: auto auto auto; gap: 0 calc(3 * var(--unit)); border-bottom: 1px solid #e7ecdf16; padding: calc(2 * var(--unit)) 0 calc(3 * var(--unit)); align-content: center; }
.tv-screen.is-portrait .tv-burger:last-child { border-bottom: 0; }
.tv-screen.is-portrait .food-visual { grid-row: 1 / 4; align-self: center; margin: 0; }
.tv-screen.is-portrait .food-visual > .burger-art { height: calc(24 * var(--unit)); max-height: none; }
.tv-screen.is-portrait .tv-item-title { display: block; }
.tv-screen.is-portrait .tv-item-title h2 { font-size: clamp(18px, calc(3.2 * var(--unit)), 42px); }
.tv-screen.is-portrait .tv-item-title > strong { display: block; font-size: clamp(18px, calc(3.2 * var(--unit)), 40px); margin-top: calc(1 * var(--unit)); }
.tv-screen.is-portrait .tv-burger > p { font-size: clamp(9px, calc(1.7 * var(--unit)), 22px); margin-top: calc(1.5 * var(--unit)); max-width: 100%; }
.tv-screen.is-portrait .tv-temperature { font-size: clamp(6px, calc(1 * var(--unit)), 13px); margin-top: calc(1.7 * var(--unit)); line-height: 1.5; }
.tv-screen.is-portrait .food-visual > .stock-label { padding: calc(1.3 * var(--unit)) calc(1.7 * var(--unit)); gap: calc(1 * var(--unit)); }
.tv-screen.is-portrait .food-visual .stock-label strong { font-size: clamp(9px, calc(1.7 * var(--unit)), 22px); }
.tv-screen.is-portrait .food-visual .stock-label small { font-size: clamp(6px, calc(1.1 * var(--unit)), 15px); }
.tv-screen.is-portrait .food-visual .stock-label > .icon { width: calc(2.7 * var(--unit)); height: calc(2.7 * var(--unit)); }
.tv-screen.is-portrait .tv-drinks { flex-direction: column; align-items: stretch; gap: calc(2.5 * var(--unit)); padding: calc(3 * var(--unit)) 0; }
.tv-screen.is-portrait .tv-drinks-heading { display: block; }
.tv-screen.is-portrait .tv-drinks-heading > span { font-size: clamp(7px, calc(.9 * var(--unit)), 13px); }
.tv-screen.is-portrait .tv-drinks-heading h2 { font-size: clamp(22px, calc(3.2 * var(--unit)), 40px); margin: calc(.8 * var(--unit)) 0; }
.tv-screen.is-portrait .tv-drinks-heading .cold-caption { font-size: clamp(6px, calc(.85 * var(--unit)), 12px); }
.tv-screen.is-portrait .tv-drinks-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(2 * var(--unit)); }
.tv-screen.is-portrait .tv-drink { gap: calc(.8 * var(--unit)); align-items: center; }
.tv-screen.is-portrait .drink-visual { width: calc(7 * var(--unit)); min-width: 29px; }
.tv-screen.is-portrait .tv-drink h3 { font-size: clamp(9px, calc(1.5 * var(--unit)), 21px); }
.tv-screen.is-portrait .tv-drink small { font-size: clamp(7px, calc(.9 * var(--unit)), 13px); }
.tv-screen.is-portrait .tv-drink strong { font-size: clamp(11px, calc(1.65 * var(--unit)), 23px); }
.tv-screen.is-portrait .tv-drink .stock-label strong { font-size: clamp(7px, calc(1.1 * var(--unit)), 15px); }
.tv-screen.is-portrait .tv-drink .stock-label.compact { padding: calc(.6 * var(--unit)) calc(.9 * var(--unit)); gap: 4px; }
.tv-screen.is-portrait .tv-footer { flex-wrap: wrap; gap: calc(1.5 * var(--unit)); padding-top: calc(3 * var(--unit)); font-size: clamp(7px, calc(.9 * var(--unit)), 13px); }
.tv-screen.is-portrait .tv-footer > span:first-child { width: 100%; }

@media (max-width: 650px) {
  .product-art .burger-art { height: 123px; }
  .product-art .drink-art { height: 101px; }
  .stock-label.compact { padding: 5px 8px; }
  .stock-label.compact strong { font-size: 8px; }
  .product-art > .stock-label { left: 9px; bottom: 9px; }
  .tv-screen.is-portrait .tv-drinks-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 12px; }
  .tv-screen.is-portrait .tv-drink h3 { font-size: 11px; }
  .tv-screen.is-portrait .drink-visual { width: 40px; }
  .tv-screen.is-portrait .tv-burger { padding: 15px 0 20px; }
  .tv-screen.is-portrait .tv-drinks { padding: 20px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .steam-wisp, .cold-halo, .frost-star, .cold-drop { animation: none; }
  .steam-wisp { opacity: .22; }
  .food-art { transition: none; }
}