/*
==================================================================
FILNAMN: style.css
URL: https://kvartersmenyguiden.se/restaurant_detail/themes/theme16-tv4/style.css
DIR: /home/objdevehl/public_html/node_js_dev/kvartersmenyguiden/kmg-test/public/start/restaurant_detail/themes/theme16-tv4/style.css
VER: 1.1 / 2026-08-22

DESC:
- Mörkt limegrönt TV-tema inspirerat av Björkens kompakta femkolumnsdesign.
- Läser textstorlek, färger, marginaler och transparens från TV-admin.
- Stödjer valbar video, bakgrundsbild, enfärgad bakgrund och externa helskärmslänkar.
- Anpassat för 16:9-skärmar och Android/TV Bro med låg animationsbelastning.
- V1.1 lägger till Matrix-lager, titelglöd, kortsvep och kaskadljus över rätterna.
==================================================================
*/

:root {
    color-scheme: dark;
    font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    background: #050705;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    position: relative;
    min-width: 960px;
    color: var(--text, #f3f6dd);
    background: #050705;
    font-size: 16px;
}

.tv-background,
.tv-video-background,
.tv-shade,
.tv-matrix-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.tv-background {
    z-index: 0;
    background:
        radial-gradient(circle at 50% -12%, rgba(102, 126, 15, .35), transparent 38%),
        linear-gradient(180deg, #0c1209 0%, #050705 72%, #020302 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tv-video-background {
    z-index: 0;
    overflow: hidden;
    background: #050705;
}

.tv-video-background iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-width: 177.78vh;
    min-height: 100vh;
    border: 0;
    opacity: var(--video-opacity, .2);
    filter: saturate(.72) brightness(.52) contrast(1.12);
    transform: translate(-50%, -50%) scale(1.035);
}

.tv-shade {
    z-index: 1;
    background:
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(190, 212, 35, .045) 4px, transparent 5px),
        radial-gradient(circle at 50% -8%, rgba(118, 145, 18, .38), transparent 34%),
        linear-gradient(180deg, rgba(2, 4, 2, .15), rgba(1, 2, 1, .83));
    opacity: max(.18, var(--shade-opacity, .25));
}

.tv-matrix-layer {
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: var(--matrix-opacity, .18);
    mix-blend-mode: screen;
}

.tv-menu-shell,
.tv-image-stage,
.tv-message {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.tv-menu-shell {
    display: grid;
    grid-template-rows: minmax(110px, 13.6vh) minmax(34px, 4.2vh) minmax(0, 1fr) minmax(48px, 5.8vh);
    gap: .45vh;
    padding: var(--outer-padding-y, .7vh) var(--outer-padding-x, 1.25vw);
}

.tv-menu-shell-no-header {
    grid-template-rows: minmax(0, 1fr) minmax(48px, 5.8vh);
}

.tv-header {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(500px, 1.34fr) minmax(230px, 1fr);
    align-items: center;
    gap: 2vw;
    min-height: 0;
}

.tv-brand-lockup,
.tv-grill-badge {
    display: flex;
    align-items: center;
    min-width: 0;
    color: var(--accent, #b6c91d);
}

.tv-brand-lockup {
    justify-content: flex-start;
    gap: .72vw;
}

.tv-logo {
    display: block;
    width: min(7.5vw, 138px);
    height: min(9.8vh, 104px);
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .75));
}

.tv-brand-mark {
    display: grid;
    width: min(4.4vw, 76px);
    aspect-ratio: 1;
    place-items: center;
    border: 2px solid rgba(var(--border-rgb, 182, 201, 29), .82);
    border-radius: 52% 52% 48% 14%;
    background: rgba(var(--panel-rgb, 5, 7, 5), .72);
    transform: rotate(-36deg);
}

.tv-brand-mark svg {
    width: 56%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transform: rotate(36deg);
}

.tv-brand-copy {
    display: grid;
    min-width: 0;
}

.tv-brand-copy strong {
    overflow: hidden;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: clamp(24px, 2.05vw, 42px);
    font-weight: 700;
    letter-spacing: .08em;
    line-height: .95;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    animation: tv4-brand-glow 5s ease-in-out infinite;
}

.tv-brand-copy small {
    margin-top: .65vh;
    color: rgba(235, 239, 222, .72);
    font-size: clamp(10px, .72vw, 15px);
    letter-spacing: .2em;
    text-transform: uppercase;
}

.tv-heading {
    min-width: 0;
    align-self: center;
    text-align: center;
    text-transform: uppercase;
}

.tv-eyebrow {
    display: block;
    margin-bottom: .15vh;
    color: var(--accent, #b6c91d);
    font-family: "Oswald", sans-serif;
    font-size: clamp(12px, 1vw, 20px);
    font-weight: 700;
    letter-spacing: .43em;
    line-height: 1;
    animation: tv4-soft-glow 3.5s ease-in-out infinite;
}

.tv-heading h1 {
    position: relative;
    margin: 0;
    color: #f3f6dd;
    font-family: "Oswald", Impact, sans-serif;
    font-size: var(--header-title-font-size, 6vw);
    font-weight: 700;
    letter-spacing: .025em;
    line-height: .82;
    text-shadow: 0 0 22px rgba(196, 222, 49, .35), 0 5px 9px #000;
    animation: tv4-title-glow 4s ease-in-out infinite;
}

.tv-heading h1::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: transparent;
    background: linear-gradient(180deg, #fff 0%, #e4f85a 26%, var(--accent, #b6c91d) 58%, transparent 100%);
    background-clip: text;
    content: attr(data-text);
    filter: drop-shadow(0 0 14px rgba(220, 244, 70, .78)) drop-shadow(0 0 30px rgba(182, 201, 29, .42));
    opacity: 0;
    pointer-events: none;
    -webkit-background-clip: text;
    animation: tv4-title-scan 14s linear infinite;
}

.tv-heading p {
    display: inline-block;
    max-width: 96%;
    margin: .72vh 0 0;
    padding: .26vh 1.8vw .34vh;
    overflow: hidden;
    color: #071005;
    background: linear-gradient(90deg, #617c0d, var(--accent, #b6c91d) 48%, #617c0d);
    clip-path: polygon(2% 10%, 98% 2%, 100% 82%, 3% 100%, 0 32%);
    font-size: var(--header-subtitle-font-size, 1.38vw);
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
    animation: tv4-subtitle-pulse 4s ease-in-out infinite;
}

.tv-grill-badge {
    justify-content: flex-end;
    gap: .65vw;
    text-align: left;
}

.tv-grill-badge > img {
    display: block;
    width: min(10vw, 180px);
    max-height: 10vh;
    object-fit: contain;
    mix-blend-mode: screen;
}

.tv-grill-badge > svg {
    width: min(2.25vw, 42px);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    animation: tv4-flame-pulse 2.5s ease-in-out infinite;
}

.tv-grill-badge span {
    display: grid;
}

.tv-grill-badge strong {
    font-family: "Oswald", sans-serif;
    font-size: clamp(16px, 1.25vw, 25px);
    letter-spacing: .12em;
    line-height: 1;
}

.tv-grill-badge small {
    margin-top: .45vh;
    color: rgba(235, 239, 222, .72);
    font-size: clamp(9px, .66vw, 14px);
    letter-spacing: .19em;
}

.tv-screen-switcher {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35vw;
    min-height: 0;
}

.tv-screen-switcher a {
    display: inline-flex;
    min-height: 3.35vh;
    align-items: center;
    gap: .38vw;
    padding: .3vh .9vw;
    color: rgba(226, 234, 200, .68);
    border: 1px solid rgba(var(--border-rgb, 182, 201, 29), .34);
    background: rgba(6, 9, 5, .84);
    font-family: "Oswald", sans-serif;
    font-size: clamp(12px, .84vw, 18px);
    font-weight: 700;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase;
}

.tv-screen-switcher a.active {
    color: #071005;
    border-color: var(--accent, #b6c91d);
    background: var(--accent, #b6c91d);
    box-shadow: 0 0 20px rgba(190, 218, 36, .22);
    animation: tv4-active-pulse 3.4s ease-in-out infinite;
}

.tv-screen-switcher small {
    opacity: .58;
    font-size: .74em;
    font-weight: 500;
}

.tv-columns {
    display: grid;
    grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
    align-items: start;
    gap: var(--column-gap, .58vw);
    min-height: 0;
    overflow: hidden;
}

.tv-column {
    display: flex;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    flex-direction: column;
    gap: .72vh;
    overflow: hidden;
}

.tv-section {
    position: relative;
    min-width: 0;
    padding: var(--column-padding-y, .48vh) var(--column-padding-x, .62vw) calc(var(--column-padding-y, .48vh) + .2vh);
    overflow: hidden;
    border: 2px solid rgba(var(--border-rgb, 182, 201, 29), var(--border-opacity, .7));
    border-radius: clamp(10px, .88vw, 18px);
    background:
        linear-gradient(145deg, rgba(var(--panel-rgb, 5, 7, 5), var(--panel-opacity, .76)), rgba(1, 2, 1, var(--panel-opacity, .76)));
    box-shadow: inset 0 0 0 1px rgba(var(--border-rgb, 182, 201, 29), var(--border-soft-opacity, .22)), 0 8px 24px rgba(0, 0, 0, .34);
    isolation: isolate;
    animation: tv4-card-glow 14s ease-out infinite;
    animation-delay: var(--section-delay, 0s);
}

.tv-section::after {
    position: absolute;
    top: 0;
    right: .5vw;
    left: .5vw;
    z-index: 4;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(182, 201, 29, .35), rgba(239, 255, 119, .96), #fff, rgba(239, 255, 119, .96), rgba(182, 201, 29, .35), transparent);
    box-shadow: 0 0 12px rgba(216, 244, 66, .78), 0 0 26px rgba(182, 201, 29, .38);
    content: "";
    opacity: 0;
    pointer-events: none;
    animation: tv4-card-sweep 14s ease-in-out infinite;
    animation-delay: var(--section-delay, 0s);
}

.tv-section h2 {
    position: relative;
    z-index: 0;
    margin: -.05vh 0 .72vh;
    padding: .26vh .4vw .34vh;
    overflow: hidden;
    color: var(--accent, #b6c91d);
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: var(--category-font-size, 2.05vw);
    font-weight: 700;
    letter-spacing: .075em;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(172, 208, 35, .35), 0 2px 2px #000;
    white-space: nowrap;
    animation: tv4-section-flash 14s ease-out infinite;
    animation-delay: var(--section-delay, 0s);
}

.tv-section h2::before {
    position: absolute;
    z-index: -1;
    top: 50%;
    right: 10%;
    left: 10%;
    height: 1.15em;
    background: rgba(var(--border-rgb, 182, 201, 29), var(--heading-bg-opacity, .34));
    clip-path: polygon(2% 20%, 98% 0, 100% 76%, 5% 100%);
    content: "";
    transform: translateY(-50%) rotate(-.6deg);
}

.tv-section-hero {
    display: block;
    width: 100%;
    height: min(17vh, 184px);
    margin: -.2vh 0 .55vh;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: screen;
    filter: drop-shadow(0 7px 11px rgba(0, 0, 0, .72));
}

.tv-category-description {
    margin: 0 0 .55vh;
    color: var(--description, #c8cbbd);
    font-size: var(--description-font-size, .78vw);
    line-height: 1.12;
    text-align: center;
}

.tv-items {
    display: grid;
    gap: .54vh;
}

.tv-item {
    position: relative;
    min-width: 0;
}

.tv-item::after {
    position: absolute;
    top: -1px;
    right: -.4vw;
    left: -.4vw;
    z-index: 3;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(182, 201, 29, .38), rgba(239, 255, 119, .94), #fff, rgba(239, 255, 119, .94), rgba(182, 201, 29, .38), transparent);
    box-shadow: 0 0 8px rgba(216, 244, 66, .68), 0 0 16px rgba(182, 201, 29, .32);
    content: "";
    opacity: 0;
    pointer-events: none;
    animation: tv4-item-sweep 16s ease-out infinite;
    animation-delay: var(--item-delay, 0s);
}

.tv-item-line {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: .28em;
    color: var(--accent, #b6c91d);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: var(--item-font-size, 1.06vw);
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    text-transform: uppercase;
}

.tv-item-title {
    flex: 0 1 auto;
    min-width: 0;
    animation: tv4-item-flash 16s ease-out infinite;
    animation-delay: var(--item-delay, 0s);
}

.tv-item-dots {
    flex: 1 1 auto;
    min-width: .7em;
    height: .5em;
    border-bottom: 2px dotted rgba(var(--border-rgb, 182, 201, 29), var(--border-soft-opacity, .32));
}

.tv-item-price {
    flex: 0 0 auto;
    color: var(--price, #b6c91d);
    white-space: nowrap;
    animation: tv4-price-flash 16s ease-out infinite;
    animation-delay: var(--item-delay, 0s);
}

.tv-item-description {
    margin: .1vh .12vw 0 1.15em;
    overflow: hidden;
    color: var(--description, #c8cbbd);
    font-size: var(--description-font-size, .78vw);
    line-height: 1.08;
    animation: tv4-description-flash 16s ease-out infinite;
    animation-delay: var(--item-delay, 0s);
}

.tv-section-note {
    margin-top: .65vh;
    padding: .46vh .62vw;
    color: rgba(243, 246, 221, .78);
    border: 1px solid rgba(var(--border-rgb, 182, 201, 29), var(--border-soft-opacity, .28));
    border-radius: .55vw;
    background: rgba(var(--panel-rgb, 5, 7, 5), .7);
    font-size: var(--note-font-size, .72vw);
    line-height: 1.12;
    text-align: center;
}

.tv-section-extras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45vw;
    margin-top: .6vh;
}

.tv-section-extra {
    display: grid;
    min-height: 4.8vh;
    align-content: center;
    padding: .28vh .5vw;
    border: 1px solid rgba(var(--border-rgb, 182, 201, 29), var(--border-soft-opacity, .28));
    border-radius: .55vw;
    background: rgba(var(--panel-rgb, 5, 7, 5), .7);
    text-align: center;
}

.tv-section-extra span {
    color: var(--description, #c8cbbd);
    font-size: var(--extra-label-font-size, .75vw);
}

.tv-section-extra strong {
    color: var(--accent, #b6c91d);
    font-size: var(--extra-price-font-size, 1.15vw);
    line-height: 1;
}

.tv-footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    align-items: center;
    min-width: 0;
    overflow: hidden;
    padding: .25vh .75vw;
    border: 1px solid rgba(var(--border-rgb, 182, 201, 29), var(--border-soft-opacity, .32));
    border-radius: .9vw;
    background: rgba(var(--panel-rgb, 5, 7, 5), var(--footer-opacity, .7));
    box-shadow: inset 0 0 18px rgba(0, 0, 0, .35);
}

.tv-footer span {
    display: flex;
    min-width: 0;
    height: 100%;
    align-items: center;
    justify-content: center;
    gap: .8vw;
    overflow: hidden;
    color: rgba(243, 246, 221, .8);
    font-size: var(--footer-font-size, 1.45vw);
    letter-spacing: .085em;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.tv-footer span + span {
    border-left: 1px solid rgba(var(--border-rgb, 182, 201, 29), var(--border-soft-opacity, .32));
}

.tv-footer svg {
    width: 1.55em;
    height: 1.55em;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--accent, #b6c91d);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    animation: tv4-soft-glow 5s ease-in-out infinite;
}

.tv-footer span:nth-child(2) svg {
    animation-delay: -1.6s;
}

.tv-footer span:nth-child(3) svg {
    animation-delay: -3.2s;
}

.tv-screen-2 .tv-section h2 {
    font-size: min(var(--category-font-size, 2.05vw), 1.45vw);
}

.tv-screen-2 .tv-footer span {
    padding: 0 .45vw;
    font-size: var(--footer-screen-two-font-size, 1.02vw);
    white-space: normal;
}

.tv-external-stage {
    position: fixed;
    z-index: 10000;
    inset: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
}

.tv-external-stage iframe {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: #000;
}

.tv-image-stage {
    display: grid;
    place-items: center;
    padding: 0;
    background: #000;
}

.tv-image-stage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tv-message {
    display: grid;
    place-items: center;
    padding: 5vw;
    text-align: center;
}

.tv-message div {
    max-width: 800px;
    padding: 42px 54px;
    border: 2px solid var(--accent, #b6c91d);
    border-radius: 24px;
    background: rgba(0, 0, 0, .82);
}

.tv-message strong {
    color: var(--accent, #b6c91d);
    font-size: clamp(34px, 5vw, 80px);
}

.tv-message p {
    font-size: clamp(20px, 2.2vw, 40px);
}

.tv-message small {
    color: rgba(255, 255, 255, .55);
}

@keyframes tv4-title-scan {
    0%, 70% {
        opacity: 0;
        clip-path: inset(0 0 100% 0);
        transform: translateY(-60%);
    }

    74% {
        opacity: 1;
    }

    82% {
        opacity: .95;
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
    }

    88%, 100% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
        transform: translateY(24%);
    }
}

@keyframes tv4-title-glow {
    0%, 100% {
        text-shadow: 0 0 22px rgba(196, 222, 49, .3), 0 5px 9px #000;
    }

    50% {
        text-shadow: 0 0 48px rgba(204, 232, 54, .68), 0 0 92px rgba(182, 201, 29, .28), 0 5px 9px #000;
    }
}

@keyframes tv4-brand-glow {
    0%, 100% {
        text-shadow: 0 0 9px rgba(214, 230, 40, .22);
    }

    50% {
        text-shadow: 0 0 26px rgba(226, 244, 61, .72), 0 0 5px rgba(255, 255, 255, .32);
    }
}

@keyframes tv4-soft-glow {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(182, 201, 29, .22));
    }

    50% {
        filter: drop-shadow(0 0 16px rgba(216, 240, 52, .78));
    }
}

@keyframes tv4-subtitle-pulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(103, 128, 13, .2);
    }

    50% {
        box-shadow: 0 0 26px rgba(182, 201, 29, .48), 0 0 8px rgba(226, 244, 61, .32);
    }
}

@keyframes tv4-flame-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 7px rgba(211, 237, 37, .24));
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(211, 237, 37, .8)) drop-shadow(0 0 8px rgba(255, 140, 0, .38));
    }
}

@keyframes tv4-active-pulse {
    0%, 100% {
        box-shadow: 0 0 12px rgba(190, 218, 36, .18);
    }

    50% {
        box-shadow: 0 0 28px rgba(214, 239, 55, .55);
    }
}

@keyframes tv4-card-sweep {
    0%, 72% {
        top: 0;
        opacity: 0;
    }

    74% {
        top: 0;
        opacity: .95;
    }

    81% {
        top: 58%;
        opacity: .58;
    }

    87% {
        top: calc(100% - 2px);
        opacity: 0;
    }

    100% {
        top: calc(100% - 2px);
        opacity: 0;
    }
}

@keyframes tv4-card-glow {
    0%, 72%, 100% {
        border-color: rgba(var(--border-rgb, 182, 201, 29), var(--border-opacity, .7));
        box-shadow: inset 0 0 0 1px rgba(var(--border-rgb, 182, 201, 29), var(--border-soft-opacity, .22)), 0 8px 24px rgba(0, 0, 0, .34);
    }

    77% {
        border-color: rgba(229, 250, 77, .94);
        box-shadow: inset 0 0 18px rgba(190, 221, 42, .18), 0 0 26px rgba(197, 229, 45, .42), 0 8px 24px rgba(0, 0, 0, .34);
    }
}

@keyframes tv4-section-flash {
    0%, 72%, 100% {
        color: var(--accent, #b6c91d);
        text-shadow: 0 0 12px rgba(172, 208, 35, .35), 0 2px 2px #000;
    }

    77% {
        color: #f8ffe5;
        text-shadow: 0 0 30px rgba(222, 247, 72, .92), 0 0 58px rgba(182, 201, 29, .58), 0 0 6px #fff;
    }
}

@keyframes tv4-item-sweep {
    0%, 76% {
        top: -1px;
        opacity: 0;
    }

    78% {
        top: -1px;
        opacity: 1;
    }

    84% {
        top: 60%;
        opacity: .5;
    }

    89%, 100% {
        top: 100%;
        opacity: 0;
    }
}

@keyframes tv4-item-flash {
    0%, 76%, 100% {
        color: var(--accent, #b6c91d);
        text-shadow: none;
    }

    80% {
        color: #faffef;
        text-shadow: 0 0 24px rgba(216, 237, 61, .9), 0 0 44px rgba(182, 201, 29, .52), 0 0 4px #fff;
    }

    87% {
        color: #e8f44c;
        text-shadow: 0 0 12px rgba(200, 219, 43, .72);
    }
}

@keyframes tv4-price-flash {
    0%, 76%, 100% {
        color: var(--price, #b6c91d);
        text-shadow: none;
    }

    80% {
        color: #fff;
        text-shadow: 0 0 24px rgba(231, 250, 74, .96), 0 0 42px rgba(182, 201, 29, .55);
    }

    87% {
        color: #efff58;
        text-shadow: 0 0 10px rgba(224, 231, 61, .6);
    }
}

@keyframes tv4-description-flash {
    0%, 76%, 100% {
        color: var(--description, #c8cbbd);
        text-shadow: none;
    }

    81% {
        color: #e6eadb;
        text-shadow: 0 0 12px rgba(200, 219, 43, .52);
    }
}

/* Hörlursknappen visas diskret och tonas bort efter tio sekunder av JavaScript. */
.jb-widget-container,
.jb-launcher {
    opacity: 1;
    transition: opacity .6s ease, transform .28s ease !important;
}

.jb-launcher {
    right: 5px !important;
    bottom: 5px !important;
    transform: scale(.25) !important;
    transform-origin: right bottom !important;
}

body.kmg-tv-ui-hidden .jb-widget-container,
body.kmg-tv-ui-hidden .jb-launcher,
.tv-external-mode .jb-widget-container,
.tv-external-mode .jb-launcher {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.kmg-tv-ui-hidden .jb-widget-container.open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Adminvalet för Matrix stänger även av temats övriga animerade ljussvep. */
.tv-effects-disabled .tv-brand-copy strong,
.tv-effects-disabled .tv-eyebrow,
.tv-effects-disabled .tv-heading h1,
.tv-effects-disabled .tv-heading h1::after,
.tv-effects-disabled .tv-heading p,
.tv-effects-disabled .tv-grill-badge > svg,
.tv-effects-disabled .tv-screen-switcher a.active,
.tv-effects-disabled .tv-section,
.tv-effects-disabled .tv-section::after,
.tv-effects-disabled .tv-section h2,
.tv-effects-disabled .tv-item::after,
.tv-effects-disabled .tv-item-title,
.tv-effects-disabled .tv-item-price,
.tv-effects-disabled .tv-item-description,
.tv-effects-disabled .tv-footer svg {
    animation: none !important;
}

/* TV Bro kan lägga svart yta runt transparenta PNG-filer; screen-blandning döljer den. */
.tv-png-compatibility .tv-header img,
.tv-png-compatibility .tv-section-hero {
    background: transparent !important;
    mix-blend-mode: screen;
}

@media (max-aspect-ratio: 4/3) {
    .tv-header {
        grid-template-columns: minmax(210px, .9fr) minmax(380px, 1.3fr) minmax(190px, .9fr);
        gap: 1vw;
    }

    .tv-brand-copy small {
        display: none;
    }

    .tv-item-description {
        margin-left: .25em;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}