/* =========================
   Base (template)
   ========================= */
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

code {
    color: #c02d76;
}

/* =========================
   TV fullscreen / kiosk
   ========================= */
html, body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: #000;
}

#app {
    width: 100%;
    height: 100%;
}

/* TV não usa padding do template */
.content {
    padding: 0 !important;
}

/* =========================
   TV Root
   ========================= */
.tv-root {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh; /* fallback */
    min-height: 100svh; /* viewport estável quando fullscreen não abre */
    min-height: 100dvh; /* mobile moderno */
    overflow: hidden;
    background: #0b0f14;
    color: #fff;
    font-family: var(--tv-font, system-ui);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    --tv-pad: clamp(12px, 3.5vmin, 60px);
    --tv-gap: clamp(10px, 2.2vmin, 28px);
}

/* =========================
   TV Strict mode (safe area + stage fixa 16:9)
   ========================= */
.tv-root.tv-mode-strict {
    --tv-safe-x: clamp(0px, 0.15vw, 4px);
    --tv-safe-y: clamp(0px, 0.15vh, 4px);
    --tv-safe-area: clamp(0px, 0.2vmin, 4px);
    --tv-stage-width: 1920px;
    --tv-stage-height: 1080px;
    --tv-stage-scale: min(calc(100vw / var(--tv-stage-width)), calc(100dvh / var(--tv-stage-height)));
    --tv-stage-width: min(100vw, calc(100dvh * (16 / 9)));
    --tv-stage-height: min(100dvh, calc(100vw * (9 / 16)));
    display: grid;
    place-items: center;
    padding: calc(env(safe-area-inset-top) + var(--tv-safe-y)) calc(env(safe-area-inset-right) + var(--tv-safe-x)) calc(env(safe-area-inset-bottom) + var(--tv-safe-y)) calc(env(safe-area-inset-left) + var(--tv-safe-x));
    background: #050505;
}

.tv-root.tv-mode-strict > * {
    width: var(--tv-stage-width);
    height: var(--tv-stage-height);
    transform: scale(var(--tv-stage-scale));
    transform-origin: center center;
    max-width: 100%;
    max-height: 100%;
}

@supports not (height: 100dvh) {
    .tv-root.tv-mode-strict {
        --tv-stage-scale: min(calc(100vw / var(--tv-stage-width)), calc(100vh / var(--tv-stage-height)));
        --tv-stage-width: min(100vw, calc(100vh * (16 / 9)));
        --tv-stage-height: min(100vh, calc(100vw * (9 / 16)));
    }
}

.tv-root.tv-mode-strict .tv-product,
.tv-root.tv-mode-strict .tv-table,
.tv-root.tv-mode-strict .tv-media {
    border-radius: clamp(4px, 0.75vmin, 10px);
    overflow: hidden;
}

.tv-root.tv-mode-strict .tv-product,
.tv-root.tv-mode-strict .tv-table {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.tv-root.tv-mode-strict .tv-product {
    padding: var(--tv-safe-area);
}

.tv-root.tv-mode-strict .tv-product-content {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.tv-root.tv-mode-strict .tv-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

.tv-root.tv-mode-strict img.tv-media {
    object-fit: cover;
    object-position: center center;
}

.tv-root.tv-mode-strict video.tv-media {
    object-fit: cover;
}

@supports not (height: 100dvh) {
    .tv-root.tv-mode-strict .tv-product,
    .tv-root.tv-mode-strict .tv-table {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }
}

.tv-center {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    opacity: .9;
}

.tv-display-shell {
    width: 100%;
    height: 100%;
}

.tv-display-shell.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 28%);
    gap: clamp(10px, 1.2vmin, 20px);
}

.tv-main-pane {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.tv-main-pane > .tv-product,
.tv-main-pane > .tv-table,
.tv-main-pane > .tv-media {
    width: 100%;
    height: 100%;
}

.tv-weather-pane {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(10px, 1.4vmin, 18px);
    padding: clamp(14px, 1.6vmin, 24px);
    background: linear-gradient(180deg, rgba(6, 19, 42, .96), rgba(7, 29, 59, .94));
    border-radius: clamp(8px, 1vmin, 16px);
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .35);
    overflow: hidden;
    position: relative;
}

.tv-weather-pane::before {
    content: "";
    position: absolute;
    inset: -30% -15% auto;
    height: 45%;
    background: radial-gradient(circle at center, rgba(115, 195, 255, .2), transparent 68%);
    pointer-events: none;
    animation: tvWeatherGlow 8s ease-in-out infinite;
}

.tv-weather-clock {
    text-align: center;
    padding: clamp(8px, 1vmin, 14px);
    border: 1px solid rgba(138, 198, 255, .22);
    border-radius: clamp(9px, 1vmin, 14px);
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}

.tv-weather-clock-label {
    font-size: clamp(10px, .95vmin, 14px);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #98c5ec;
}

.tv-weather-clock-time {
    font-size: clamp(44px, 6.4vmin, 88px);
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 0 18px rgba(126, 205, 255, .3);
}

.tv-weather-clock-date {
    margin-top: 2px;
    color: #bddaf5;
    font-size: clamp(11px, 1.1vmin, 16px);
}

.tv-weather-title {
    font-size: clamp(22px, 2.4vmin, 40px);
    font-weight: 700;
    text-align: center;
}

.tv-weather-sub {
    margin-top: 2px;
    color: #c7d8ed;
    font-size: clamp(12px, 1.2vmin, 18px);
    text-align: center;
}

.tv-weather-temp {
    font-size: clamp(48px, 6vmin, 96px);
    font-weight: 800;
    line-height: 1;
}

.tv-weather-current {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.2vmin, 16px);
}

.tv-weather-icon {
    font-size: clamp(26px, 3vmin, 54px);
    line-height: 1;
}

.tv-weather-desc {
    font-size: clamp(16px, 1.8vmin, 30px);
    text-align: center;
}

.tv-weather-wind,
.tv-weather-humidity,
.tv-weather-time,
.tv-weather-loading,
.tv-weather-error {
    font-size: clamp(12px, 1.25vmin, 20px);
    color: #dbe9f8;
}

.tv-weather-metrics {
    display: grid;
    gap: 4px;
    justify-items: center;
}

.tv-weather-error {
    color: #ffd0d0;
}

.tv-feed-pane {
    margin-top: clamp(8px, 1vmin, 14px);
    min-height: 46%;
    border: 1px solid rgba(126, 184, 255, .28);
    border-radius: clamp(8px, .9vmin, 14px);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(82, 152, 255, .16), transparent 60%),
        linear-gradient(180deg, rgba(3, 26, 60, .95), rgba(1, 20, 48, .92));
    padding: clamp(10px, 1.2vmin, 16px);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.tv-feed-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.tv-feed-title {
    font-size: clamp(13px, 1.28vmin, 20px);
    color: #eaf4ff;
    font-weight: 700;
    line-height: 1.2;
}

.tv-feed-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
}

@keyframes tvWeatherGlow {
    0%,
    100% {
        opacity: .45;
        transform: translateY(0);
    }
    50% {
        opacity: .9;
        transform: translateY(-4%);
    }
}

.tv-feed-list li {
    display: grid;
    gap: clamp(3px, .3vmin, 6px);
    padding: clamp(6px, .7vmin, 10px) clamp(8px, .8vmin, 12px);
    border-bottom: 1px dashed rgba(194, 221, 252, .25);
    border-radius: clamp(6px, .6vmin, 10px);
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
}

.tv-feed-list li:last-child {
    border-bottom: none;
}

.tv-feed-line {
    color: #ffffff;
    font-size: clamp(12px, 1.18vmin, 17px);
    font-weight: 600;
    line-height: 1.25;
}

.tv-feed-list li.compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tv-feed-meta {
    color: #a8c9eb;
    font-size: clamp(10px, 1.02vmin, 14px);
}

.tv-feed-matchup {
    display: flex;
    align-items: center;
    gap: clamp(5px, .5vmin, 10px);
    flex-wrap: wrap;
}

.tv-team-chip {
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, .45vmin, 8px);
    min-width: 0;
}

.tv-team-logo,
.tv-team-fallback {
    width: clamp(18px, 1.7vmin, 30px);
    height: clamp(18px, 1.7vmin, 30px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(9, 33, 67, .75);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
    flex-shrink: 0;
}

.tv-team-logo {
    object-fit: contain;
    background: #ffffff;
    padding: 2px;
}

.tv-team-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d9ecff;
    font-weight: 700;
    letter-spacing: .04em;
    font-size: clamp(8px, .85vmin, 12px);
}

.tv-team-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14ch;
}

.tv-feed-versus,
.tv-feed-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 1px 8px;
    background: rgba(22, 90, 168, .35);
    color: #d9ecff;
    font-weight: 700;
    font-size: clamp(10px, .95vmin, 13px);
    letter-spacing: .02em;
}

.tv-feed-empty,
.tv-feed-headline {
    color: #d7e9fb;
    font-size: clamp(12px, 1.16vmin, 16px);
    line-height: 1.35;
}

/* =========================
   Produto (fullscreen)
   ========================= */
.tv-product {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--tv-pad);
    gap: var(--tv-gap);
    position: relative;
    overflow: hidden;
    background: #000;
}

.tv-product::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--tv-bg, none);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}

.tv-display-shell.split .tv-product::before {
    background-size: cover;
    background-position: center center;
}

.tv-product::after {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    opacity: .35;
    z-index: 1;
    pointer-events: none;
}

.tv-product-name {
    max-width: min(1200px, 92vw);
    text-align: center;
    font-weight: 800;
    line-height: 1.05;
    color: var(--tv-name, #fff);
    font-size: var(--tv-name-size, 60px);
    font-size: clamp(24px, min(var(--tv-name-size, 60px), 10vmin), 96px);
}

.tv-price-row {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: center;
}
.tv-price-promo-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(8px, 1.4vmin, 16px);
}

.tv-price-normal {
    font-size: clamp(80px, calc(var(--tv-price-size, 80px) * 0.42), 140px);
    display: inline-block;
    white-space: nowrap;
    text-decoration: line-through;
    color: var(--tv-normal-price, #cbd5e1);
    opacity: .85;
    line-height: 1;
}

.tv-price-promo,
.tv-price-final {
    display: inline-block;
    white-space: nowrap;
    font-weight: 900;
    color: var(--tv-price, #fff);
    /* respeita o profile, mas mantém mínimo e evita exagero em telas pequenas */
    font-size: clamp(22px, var(--tv-price-size, 80px), 600px);
    line-height: 1;
}

.tv-price-promo {
    color: var(--tv-promo-price, #ffd400);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}


/* =========================
   Mídia (img/video)
   ========================= */
.tv-media {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    background: #000;
}


/* =========================
   TV Pair (/pair)
   ========================= */
.pair-root {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: radial-gradient(900px 700px at 20% 10%, rgba(30,139,255,.22), transparent 55%), radial-gradient(800px 600px at 80% 20%, rgba(0,200,255,.16), transparent 55%), #05070c;
    color: #eaf0ff;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.pair-card {
    width: min(520px, 100%);
    border-radius: 18px;
    background: rgba(15, 26, 48, .70);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 60px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
    padding: 18px;
}

.pair-head h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .2px;
}

.pair-head p {
    margin: 8px 0 0;
    opacity: .78;
    font-size: 13px;
}

.pair-form {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.pair-label {
    font-size: 12px;
    opacity: .8;
}

.pair-input {
    width: 100%;
    padding: 14px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(10,16,28,.60);
    color: #fff;
    outline: none;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
}

    .pair-input::placeholder {
        color: rgba(234,240,255,.40);
        letter-spacing: normal;
        text-transform: none;
        font-weight: 700;
    }

    .pair-input:focus {
        border-color: rgba(30,139,255,.70);
        box-shadow: 0 0 0 4px rgba(30,139,255,.18);
    }

.pair-btn {
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(30,139,255,.45);
    background: linear-gradient(135deg,#1e8bff,#00c8ff);
    color: #fff;
    font-weight: 900;
    font-size: 14px;
    cursor: pointer;
    transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}

    .pair-btn:hover {
        filter: brightness(1.08);
        box-shadow: 0 14px 32px rgba(30,139,255,.35);
    }

    .pair-btn:active {
        transform: translateY(1px);
    }

.pair-error {
    border: 1px solid rgba(239,68,68,.45);
    background: rgba(239,68,68,.12);
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 13px;
    color: #ffb4b4;
}

.pair-foot {
    margin-top: 12px;
    font-size: 12px;
    opacity: .65;
}

/* =========================
   Tabela de Preços (DIV GRID) — ÚNICO BLOCO
   ========================= */

.tv-table {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    container-type: size;
    padding: var(--tv-pad, 24px);
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.6vmin, 18px);
    overflow: hidden;
    background: var(--tv-table-bg, #ffffff);
    color: var(--tv-table-text, #111111);
}

.tv-table-title {
    flex: 0 0 auto;
    width: 100%;
    border-radius: clamp(10px, 1.2vmin, 16px);
    padding: clamp(12px, 2.2vmin, 18px) clamp(14px, 2.6vmin, 22px);
    font-size: clamp(20px, 5vmin, 60px);
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--tv-table-title-bg, #b51212);
    color: var(--tv-table-title-color, #ffffff);
}

/* ✅ você quer remover “Página 1/..” do visual */
.tv-table-meta {
    display: none !important;
}

/* Container */
.tv-table-grid {
    flex: 1 1 auto;
    min-height: 0; /* ✅ importantíssimo pra não cortar em telas menores */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: clamp(10px, 1.2vmin, 16px);
    border: 1px solid rgba(0,0,0,.14);
    background: transparent;
    --rows: var(--tv-table-rows, 10);
    --px: clamp(12px, 2.2vmin, 16px);
    --py: clamp(5px, calc(94px / var(--rows)), 12px);
    /* ✅ fonte nunca zera (usa viewport, funciona em modal/preview também) */
    font-size: clamp(12px, calc(56vh / var(--rows)), var(--tv-table-font-size, 34px));
}

/* Browsers modernos: dvh melhora em mobile */
@supports (height: 100dvh) {
    .tv-table-grid {
        font-size: clamp(12px, calc(56dvh / var(--rows)), var(--tv-table-font-size, 34px));
    }
}

/* Em janelas menores (não fullscreen), usa a altura real do container para evitar corte */
@supports (height: 1cqh) {
    .tv-table-grid {
        font-size: clamp(12px, calc(54cqh / var(--rows)), var(--tv-table-font-size, 34px));
        --py: clamp(4px, calc(78cqh / var(--rows)), 10px);
    }
}

/* Cabeçalho */
.tv-table-head {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr minmax(160px, 22%);
    align-items: center;
    padding: var(--py) var(--px);
    background: var(--tv-table-header-bg, #f3f3f3);
    color: var(--tv-table-header-color, #111111);
    font-weight: 900;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(0,0,0,.18);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.10);
}

/* Corpo: ✅ exatamente N linhas */
.tv-table-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
}

/* Linha */
.tv-tr {
    display: grid;
    grid-template-columns: 1fr minmax(160px, 22%);
    align-items: center;
    padding: 0 var(--px);
    overflow: hidden;
    border-bottom: 1px solid rgba(0,0,0,.12);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}

    .tv-tr:last-child {
        border-bottom: none;
        box-shadow: none;
    }

    /* Zebra */
    .tv-tr.even {
        background: var(--tv-table-row-even-bg, #f7cfcf);
    }

/* células */
.tv-th, .tv-td {
    padding: var(--py) 0;
    line-height: 1.05;
    min-width: 0;
}

.tv-right {
    text-align: right;
    white-space: nowrap;
}

.tv-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* filler: mantém altura, não aparece */
.tv-tr.filler {
    opacity: 0;
}


/* =========================
   TV Loading (usado no /player e no index.html)
   ========================= */
.tv-loading {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(900px 700px at 20% 10%, rgba(124,58,237,.22), transparent 55%), radial-gradient(800px 600px at 80% 20%, rgba(34,197,94,.16), transparent 55%), #000;
    color: #eaf0ff;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    z-index: 9999;
}

.tv-loading-card {
    width: min(520px, 92vw);
    border-radius: 18px;
    background: rgba(15, 26, 48, .70);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 60px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
    padding: 18px 18px 16px;
    text-align: center;
}

.tv-spinner {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 6px solid rgba(255,255,255,.18);
    border-top-color: rgba(255,255,255,.9);
    margin: 6px auto 12px;
    animation: tvspin .9s linear infinite;
}

@keyframes tvspin {
    to {
        transform: rotate(360deg);
    }
}

.tv-loading-title {
    font-weight: 900;
    font-size: 20px;
    letter-spacing: .2px;
    margin-top: 4px;
}

.tv-loading-sub {
    margin-top: 6px;
    opacity: .78;
    font-size: 13px;
}

/* =========================
   ADMIN - LOADING (WASM startup)
   ========================= */
html, body {
    height: 100%;
}

#app {
    min-height: 100vh;
}

/* overlay sempre acima e sem “sumir” */
.app-loading {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(1200px 800px at 20% 10%, rgba(124,58,237,.18), transparent 60%), radial-gradient(900px 700px at 80% 20%, rgba(34,197,94,.12), transparent 60%), var(--bg);
    color: var(--text);
}

/* ✅ não bloqueia clique DEPOIS que o app carregou (quando o loader some, não importa)
   mas durante o startup é bom bloquear pra evitar clique “no vazio” */
.app-loading {
    pointer-events: all;
}

/* card */
.app-loading-card {
    width: min(560px, calc(100% - 48px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}

/* spinner */
.loading-progress {
    width: 64px;
    height: 64px;
    display: block;
    filter: drop-shadow(0 10px 28px rgba(0,0,0,.35));
}

    .loading-progress .lp-track {
        fill: none;
        stroke: rgba(255,255,255,.12);
        stroke-width: 10;
    }

    .loading-progress .lp-bar {
        fill: none;
        stroke: rgba(124,58,237,.90);
        stroke-width: 10;
        stroke-linecap: round;
        stroke-dasharray: 251;
        stroke-dashoffset: 160;
        transform-origin: 50% 50%;
        animation: lp-rotate 1.15s linear infinite, lp-dash 1.35s ease-in-out infinite;
    }

@keyframes lp-rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes lp-dash {
    0% {
        stroke-dashoffset: 210;
        opacity: .7;
    }

    50% {
        stroke-dashoffset: 80;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 210;
        opacity: .85;
    }
}

.loading-text {
    text-align: center;
    line-height: 1.2;
}

.loading-title {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .2px;
}

.loading-sub {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(234,240,255,.70);
}

.loading-dots {
    display: inline-flex;
    gap: 6px;
    height: 10px;
    align-items: center;
}

    .loading-dots span {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: rgba(234,240,255,.65);
        animation: dot 1.05s infinite ease-in-out;
    }

        .loading-dots span:nth-child(2) {
            animation-delay: .15s;
            opacity: .85;
        }

        .loading-dots span:nth-child(3) {
            animation-delay: .30s;
            opacity: .75;
        }

@keyframes dot {
    0%,100% {
        transform: translateY(0);
        opacity: .55;
    }

    50% {
        transform: translateY(-5px);
        opacity: 1;
    }
}


/* =========================
   TV Price Animations
   ========================= */
.tv-price-final.anim-pulse,
.tv-price-normal.anim-pulse,
.tv-price-promo.anim-pulse {
    animation: tvPricePulse 1.4s ease-in-out infinite;
}

@keyframes tvPricePulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.035);
        filter: brightness(1.08);
    }
}

.tv-price-final.anim-slideup,
.tv-price-normal.anim-slideup,
.tv-price-promo.anim-slideup {
    animation: tvPriceSlideUp 1.1s cubic-bezier(.2,.8,.2,1) infinite;
}

@keyframes tvPriceSlideUp {
    0%, 100% {
        transform: translateY(0);
        filter: brightness(1);
    }

    50% {
        transform: translateY(-6px);
        filter: brightness(1.08);
    }
}

.tv-price-final.anim-glow,
.tv-price-normal.anim-glow,
.tv-price-promo.anim-glow {
    animation: tvPriceGlow 1.3s ease-in-out infinite;
}

@keyframes tvPriceGlow {
    0%, 100% {
        text-shadow: 0 0 0 rgba(255,255,255,0);
        filter: brightness(1);
    }

    50% {
        text-shadow: 0 0 22px rgba(255,255,255,.45);
        filter: brightness(1.12);
    }
}

/* =========================
   TV Table Animations
   ========================= */

.tv-table.tbl-anim-none {}

/* Slide: container desce/sobe leve */
.tv-table.tbl-anim-slide.out .tv-table-grid,
.tv-table.tbl-anim-slide.out .tv-table-title {
    animation: tblSlideOut .35s ease forwards;
}
.tv-table.tbl-anim-slide.in .tv-table-grid,
.tv-table.tbl-anim-slide.in .tv-table-title {
    animation: tblSlideIn .42s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes tblSlideOut {
    to { transform: translateY(-14px); opacity: 0; }
}
@keyframes tblSlideIn {
    from { transform: translateY(18px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Stagger: linhas entram em cascata com index */
.tv-table.tbl-anim-stagger.in .tv-tr {
    opacity: 0;
    transform: translateY(10px);
    animation: tblRowIn .45s ease forwards;
    animation-delay: calc(var(--row-i, 0) * 55ms);
}

.tv-table.tbl-anim-stagger.out .tv-tr {
    animation: tblRowOut .28s ease forwards;
}

@keyframes tblRowIn {
    from { transform: translateY(10px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes tblRowOut {
    to { transform: translateY(-10px); opacity: 0; }
}

/* Wipe: “cortina” revela/encobre */
.tv-table.tbl-anim-wipe .tv-table-grid {
    overflow: hidden;
    position: relative;
}
.tv-table.tbl-anim-wipe.out .tv-table-grid { animation: tblWipeOut .35s ease forwards; }
.tv-table.tbl-anim-wipe.in  .tv-table-grid { animation: tblWipeIn .45s ease forwards; }

@keyframes tblWipeOut {
    to { clip-path: inset(0 0 100% 0); opacity: .9; }
}
@keyframes tblWipeIn {
    from { clip-path: inset(100% 0 0 0); opacity: .9; }
    to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

.boot-loading {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(90deg, #0f274d 0%, #02162f 50%, #022c2b 100%);
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

.boot-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid rgba(255,255,255,.18);
    border-top-color: #2f8cff;
    border-radius: 50%;
    animation: spin .9s linear infinite;
    margin-bottom: 14px;
}

.boot-text {
    font-size: 18px;
    opacity: .9;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.tv-product {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.tv-product-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: min(100%, 1480px);
    min-height: 100%;
    display: grid;
    grid-template-areas: "copy image";
    grid-template-columns: minmax(0, 1fr) minmax(240px, auto);
    column-gap: clamp(8px, 1.6vw, 24px);
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: clamp(32px, 4vw, 64px);
    box-sizing: border-box;
}

.tv-product-content.no-image {
    grid-template-areas: "copy";
    grid-template-columns: minmax(0, 1fr);
}

.tv-product-main {
    grid-area: copy;
    --tv-safe-width: min(100%, 1080px);
    --tv-safe-height: min(100%, 920px);
    display: flex;
    align-items: center;
    width: var(--tv-safe-width);
    max-width: var(--tv-safe-width);
    min-height: min(78vh, var(--tv-safe-height));
    max-height: min(100%, var(--tv-safe-height));
    background: transparent;
    border-radius: calc(var(--tv-overlay-radius, 22px) + 8px);
    box-shadow: none;
    padding: clamp(24px, 3vw, 56px);
    box-sizing: border-box;
}

.tv-product-copy {
    display: grid;
    grid-template-rows: auto auto;
    align-content: center;
    align-items: flex-start;
    row-gap: clamp(16px, 3vh, 40px);
    min-width: 0;
    min-height: 0;
}

/*
    Keep product title/prices out of top branding bands that are common in custom backgrounds.
    The offset scales with viewport height so 720p/768p screens no longer overlap the top strip.
*/
.tv-product.preset-default .tv-product-copy {
    padding-top: clamp(120px, 16vh, 260px);
    justify-items: start;
    transform: none;
    position: relative;
}

.tv-product.preset-default .tv-product-content {
    max-width: min(100%, 1860px);
    grid-template-columns: minmax(0, 1fr) minmax(280px, min(var(--tv-image-width, 340px), 1200px));
    column-gap: clamp(20px, 3vw, 56px);
    transform: none;
}

.tv-product.preset-default .tv-product-content.no-image .tv-product-copy {
    justify-items: flex-start;
    transform: none;
}

.tv-product.preset-default .tv-product-name-block,
.tv-product.preset-default .tv-product-price-block,
.tv-product.preset-default .tv-price-row {
    justify-content: flex-start;
}


.tv-product.preset-default .tv-product-name {
    font-size: clamp(20px, min(var(--tv-name-size, 60px), 4.6vw), 72px);
}

.tv-product.preset-default .tv-product-name {
    text-align: left;
    max-width: min(100%, 980px);
    line-height: 1.06;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: pretty;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.02;
    display: block;
    white-space: nowrap;
    text-wrap: nowrap;
    overflow: visible;
}

.tv-product-name-block,
.tv-product-price-block {
    width: min(100%, 980px);
}

.tv-product-name-block {
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0;
}

.tv-product-price-block {
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0;
}

.tv-product-name {
    position: static;
    transform: none;
    text-align: center;
    margin: 0;
    max-width: min(100%, 980px);
    text-wrap: balance;
}

.tv-product-content.no-image .tv-product-name {
    text-align: left;
    text-wrap: pretty;
}

.tv-price-row {
    position: static;
    transform: none;
    width: max-content;
    max-width: 100%;
    min-height: inherit;
    justify-content: center;
    align-items: flex-start;
}

.tv-product-content.no-image .tv-price-row {
    justify-content: flex-start;
}

.tv-product-image-box {
    grid-area: image;
    position: relative;
    justify-self: center;
    align-self: center;
    width: min(100%, var(--tv-image-width, 300px));
    max-width: min(var(--tv-image-width, 300px), calc(100vw - clamp(96px, 10vw, 220px)));
    max-height: min(calc(100dvh - clamp(96px, 10vh, 220px)), 100%);
    margin-left: 0;
    aspect-ratio: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    overflow: hidden;
    border: none;
    box-shadow: none;
    background: transparent;
    margin-top: clamp(20px, 4vh, 64px);
}

.tv-product.preset-default .tv-product-image-box {
    justify-self: center;
    width: min(var(--tv-image-width, 300px), 1200px, calc(100vw - clamp(96px, 10vw, 220px)));
    max-width: min(var(--tv-image-width, 300px), 1200px, calc(100vw - clamp(96px, 10vw, 220px)));
    margin-top: 0;
    transform: translate(
        calc((var(--tv-image-x, 72%) - 72%) * .8),
        calc((var(--tv-image-y, 66%) - 66%) * .8)
    );
}

.tv-product.preset-default .tv-product-name-block {
    transform: translate(
        calc((var(--tv-name-x, 18%) - 18%) * .85),
        calc((var(--tv-name-y, 58%) - 58%) * .8)
    );
}

.tv-product.preset-default .tv-product-price-block {
    transform: translate(
        calc((var(--tv-price-x, 20%) - 20%) * .85),
        calc((var(--tv-price-y, 72%) - 72%) * .8)
    );
}

/*
    Sem clima: prioriza layout estável (texto à esquerda e imagem à direita),
    evitando deslocamentos agressivos vindos dos offsets configuráveis.
*/
.tv-product.preset-default:not(.weather-on) .tv-product-content {
    grid-template-columns: minmax(0, 1.08fr) minmax(240px, min(var(--tv-image-width, 300px), 40%));
    column-gap: clamp(18px, 2.6vw, 44px);
}

.tv-product.preset-default:not(.weather-on) .tv-product-copy {
    padding-top: clamp(56px, 9vh, 140px);
    row-gap: clamp(16px, 2.8vh, 34px);
}

.tv-product.preset-default:not(.weather-on) .tv-product-name-block,
.tv-product.preset-default:not(.weather-on) .tv-product-price-block,
.tv-product.preset-default:not(.weather-on) .tv-product-image-box {
    transform: none;
}

.tv-product.preset-default:not(.weather-on) .tv-product-name {
    white-space: normal;
    text-wrap: pretty;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tv-product.preset-default:not(.weather-on) .tv-price-row {
    width: 100%;
    justify-content: flex-start;
}

.tv-product.preset-default:not(.weather-on) .tv-product-image-box {
    justify-self: end;
    width: min(100%, var(--tv-image-width, 320px), 34vw);
    max-width: min(100%, var(--tv-image-width, 320px), 34vw);
    max-height: min(68vh, 720px);
}

.tv-product.weather-on.preset-default .tv-product-copy {
    padding-top: clamp(68px, 9vh, 132px);
    row-gap: clamp(10px, 2.1vh, 28px);
}

.tv-product.weather-on.preset-default .tv-product-content {
    grid-template-columns: minmax(0, 1fr) minmax(210px, min(var(--tv-image-width, 300px), 760px));
    column-gap: clamp(12px, 2vw, 28px);
}

.tv-product.weather-on.preset-default .tv-product-image-box {
    transform: translate(
        calc((var(--tv-image-x, 68%) - 68%) * .55),
        calc((var(--tv-image-y, 62%) - 62%) * .55)
    );
}

/* Layout mais compacto quando o clima está ativo (tela dividida) */
.tv-display-shell.split .tv-product.preset-default .tv-product-content {
    grid-template-columns: minmax(0, 1fr) minmax(180px, min(34%, 360px));
    column-gap: clamp(12px, 1.8vw, 24px);
    padding: clamp(18px, 2.1vh, 30px);
    align-items: center;
}

.tv-display-shell.split .tv-product.preset-default .tv-product-copy {
    padding-top: 0;
    row-gap: clamp(14px, 2vh, 24px);
}

.tv-display-shell.split .tv-product.preset-default .tv-product-name-block,
.tv-display-shell.split .tv-product.preset-default .tv-product-price-block,
.tv-display-shell.split .tv-product.preset-default .tv-product-image-box {
    transform: none;
}

.tv-display-shell.split .tv-product.preset-default .tv-product-name {
    white-space: normal;
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.05;
    max-width: 100%;
}

.tv-display-shell.split .tv-product.preset-default .tv-price-row {
    width: 100%;
    justify-content: flex-start;
}

.tv-display-shell.split .tv-product.preset-default .tv-product-image-box {
    width: min(100%, var(--tv-image-width, 280px), 30vw);
    max-width: min(100%, var(--tv-image-width, 280px), 30vw);
    max-height: min(52vh, 460px);
    justify-self: end;
}

.tv-product-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    object-position: center center;
}

.tv-product.preset-premium-showcase {
    position: relative;
    padding: clamp(28px, 4vw, 56px);
    background: linear-gradient(180deg, rgba(39, 28, 20, 0.9) 0%, rgba(24, 17, 13, 0.94) 100%), radial-gradient(circle at top left, rgba(110, 82, 43, 0.32), transparent 32%), var(--tv-bg, none), linear-gradient(180deg, #2b2018 0%, #17110d 100%);
    background-size: cover, cover, cover, cover;
    background-position: center center, top left, center center, center center;
    background-repeat: no-repeat;
}

    .tv-product.preset-premium-showcase::before {
        content: "";
        position: absolute;
        inset: clamp(16px, 2vw, 34px);
        border: 2px solid rgba(197, 163, 93, 0.65);
        border-radius: 44px;
        pointer-events: none;
    }

    .tv-product.preset-premium-showcase .tv-product-content {
        grid-template-columns: minmax(620px, 1.38fr) minmax(260px, .62fr);
        padding: clamp(42px, 4vw, 72px);
    }

    .tv-product.preset-premium-showcase .tv-product-main {
        --tv-safe-width: min(100%, 100%);
        min-height: min(82vh, 940px);
        padding: 0;
        align-items: stretch;
    }

    .tv-product.preset-premium-showcase .tv-product-copy {
        justify-content: center;
        row-gap: clamp(26px, 4vh, 72px);
        padding: clamp(48px, 5vw, 84px);
        min-width: 0;
        border-radius: 42px;
        border: 2px solid rgba(197, 163, 93, 0.55);
        background: linear-gradient(180deg, rgba(28, 20, 15, 0.94) 0%, rgba(17, 13, 10, 0.96) 100%);
        box-shadow: inset 0 0 0 1px rgba(197, 163, 93, 0.08);
    }

    .tv-product.preset-premium-showcase .tv-product-name-block,
    .tv-product.preset-premium-showcase .tv-product-price-block {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .tv-product.preset-premium-showcase .tv-product-name-block {
        min-height: auto;
        padding-top: 0;
    }

    .tv-product.preset-premium-showcase .tv-product-name::before {
        display: block;
        margin-bottom: clamp(22px, 3vh, 42px);
        color: #d7b25f;
        font-size: clamp(20px, 1.6vw, 34px);
        font-weight: 700;
        letter-spacing: .08em;
    }

.tv-product.preset-premium-showcase .tv-product-name {
        max-width: 100%;
        color: var(--tv-name, #f8f1e3);
        /*
            Fallback first for browsers/TVs that fail on newer units/functions.
            Keep the name from exploding on 720p/1080p signage screens.
        */
        font-size: clamp(24px, min(var(--tv-name-size, 96px), 6.4vw), 132px);
        text-shadow: none;
        line-height: 1.02;
        white-space: normal;
        text-wrap: balance;
        overflow-wrap: anywhere;
    }

    .tv-product.preset-premium-showcase .tv-product-price-block {
        min-height: auto;
        padding-top: 0;
        padding-right: clamp(16px, 1.4vw, 28px);
        box-sizing: border-box;
        container-type: inline-size;
    }

    .tv-product.preset-premium-showcase .tv-price-row {
        min-height: auto;
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

.tv-product.preset-premium-showcase .tv-price-final {
        color: var(--tv-price, #e0bc63);
        /* Fallback for browsers that don't support cqw (ex: alguns browsers de TV). */
        font-size: clamp(26px, min(var(--tv-price-size, 150px), 10.5vw), 150px);
    }

.tv-product.preset-premium-showcase .tv-price-promo {
        color: var(--tv-promo-price, #e0bc63);
        font-size: clamp(26px, min(var(--tv-price-size, 150px), 10.5vw), 150px);
    }

@supports (width: 1cqw) {
    .tv-product.preset-premium-showcase .tv-price-final,
    .tv-product.preset-premium-showcase .tv-price-promo {
        font-size: clamp(26px, min(var(--tv-price-size, 150px), 34cqw), 170px);
    }
}

.tv-product.preset-premium-showcase .tv-price-normal {
        font-size: clamp(18px, min(calc(var(--tv-price-size, 150px) * 0.36), 4.8vw), 56px);
        text-shadow: none;
    }

    .tv-product.preset-premium-showcase .tv-price-normal {
        color: var(--tv-normal-price, rgba(248, 241, 227, 0.72));
    }

    .tv-product.preset-premium-showcase .tv-product-image-box {
        justify-self: end;
        align-self: center;
        width: min(100%, var(--tv-image-width, 540px));
        max-width: min(100%, var(--tv-image-width, 540px), 1200px);
        max-height: min(72vh, 760px);
        aspect-ratio: 1 / 1.08;
        border-radius: 36px;
        border: 2px solid rgba(197, 163, 93, 0.72);
        background: linear-gradient(180deg, rgba(49, 36, 25, 0.92) 0%, rgba(26, 19, 14, 0.95) 100%), radial-gradient(circle at top, rgba(197, 163, 93, 0.18), transparent 58%);
        padding: clamp(18px, 2vw, 30px);
        box-shadow: inset 0 0 0 1px rgba(197, 163, 93, 0.08);
    }

    .tv-product.preset-premium-showcase .tv-product-image {
        object-fit: contain;
    }

@media (max-aspect-ratio: 1/1) {
    .tv-root {
        display: grid;
        place-items: center;
    }

    .tv-product {
        padding: 0;
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
    }

    .tv-product-content {
        width: min(100vw, calc(100dvh * (16 / 9)));
        min-height: auto;
        height: auto;
        aspect-ratio: 16 / 9;
        grid-template-columns: minmax(0, 1.18fr) minmax(120px, .54fr);
        column-gap: clamp(10px, 1.4vw, 18px);
        padding: clamp(14px, 2vw, 28px);
    }

    .tv-product-main {
        min-height: 0;
        max-height: 100%;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .tv-product-copy {
        row-gap: clamp(12px, 2vh, 26px);
    }

    .tv-product.preset-default .tv-product-copy {
        padding-top: clamp(88px, 12vh, 180px);
        transform: none;
    }

    .tv-product-name-block {
        min-height: auto;
        padding-top: 0;
    }

    .tv-product-price-block {
        min-height: auto;
        padding-top: 0;
    }

    .tv-product-name {
        font-size: clamp(18px, min(var(--tv-name-size, 60px), 5.4vw), 52px);
    }

    .tv-price-normal {
        font-size: clamp(16px, calc(var(--tv-price-size, 80px) * 0.2), 42px);
    }

    .tv-price-final,
    .tv-price-promo {
        font-size: clamp(22px, min(var(--tv-price-size, 80px), 8vw), 88px);
    }

    .tv-product-image-box {
        width: min(100%, var(--tv-image-width, 280px), 24vw);
        max-width: min(var(--tv-image-width, 280px), 24vw);
        max-height: min(24vh, 160px);
    }

    .tv-product.preset-default .tv-product-image-box {
        transform: none;
        transform: translate(
            clamp(38px, 6vw, 120px),
            clamp(42px, 6vh, 84px)
        );
    }

    .tv-product.preset-default:not(.weather-on) .tv-product-content {
        grid-template-columns: minmax(0, 1.16fr) minmax(120px, .58fr);
    }

    .tv-product.preset-default:not(.weather-on) .tv-product-copy {
        padding-top: clamp(54px, 8vh, 122px);
    }

    .tv-product.preset-default:not(.weather-on) .tv-product-image-box {
        transform: none;
        width: min(100%, var(--tv-image-width, 280px), 26vw);
        max-width: min(var(--tv-image-width, 280px), 26vw);
        max-height: min(30vh, 220px);
    }

    .tv-product.preset-premium-showcase {
        padding: clamp(10px, 1.8vh, 18px);
    }

        .tv-product.preset-premium-showcase::before {
            inset: clamp(8px, 1.4vh, 14px);
            border-radius: 26px;
        }

        .tv-product.preset-premium-showcase .tv-product-content {
            width: min(100vw, calc(100dvh * (16 / 9)));
            grid-template-columns: minmax(0, 1.24fr) minmax(120px, .5fr);
            padding: clamp(16px, 2vw, 28px);
        }

        .tv-product.preset-premium-showcase .tv-product-copy {
            padding: clamp(20px, 2.6vw, 34px);
            border-radius: 24px;
        }

        .tv-product.preset-premium-showcase .tv-product-name {
            max-width: none;
            font-size: clamp(20px, min(var(--tv-name-size, 96px), 5.2vw), 52px);
        }

        .tv-product.preset-premium-showcase .tv-price-final,
        .tv-product.preset-premium-showcase .tv-price-promo {
            font-size: clamp(24px, min(var(--tv-price-size, 150px), 8.2vw), 82px);
        }

        .tv-product.preset-premium-showcase .tv-product-image-box {
            width: min(100%, var(--tv-image-width, 320px), 26vw);
            max-width: min(100%, var(--tv-image-width, 320px), 26vw);
            max-height: min(28vh, 190px);
            border-radius: 22px;
            padding: clamp(10px, 1.4vw, 16px);
        }
}

/* TVs 720p/1366x768: compact layout to avoid oversized blocks/text on signage players */
@media (min-width: 960px) and (max-width: 1599px) and (min-aspect-ratio: 4/3) {
    .tv-product.preset-premium-showcase {
        padding: clamp(14px, 2vh, 24px);
    }

    .tv-product.preset-premium-showcase::before {
        inset: clamp(10px, 1.5vh, 18px);
        border-radius: 28px;
    }

    .tv-product.preset-premium-showcase .tv-product-content {
        grid-template-columns: minmax(0, 1.22fr) minmax(180px, .54fr);
        column-gap: clamp(14px, 2vw, 30px);
        padding: clamp(18px, 2.2vh, 30px);
    }

    .tv-product.preset-premium-showcase .tv-product-copy {
        padding: clamp(20px, 2.4vw, 34px);
        border-radius: 28px;
        row-gap: clamp(16px, 2.2vh, 28px);
    }

    .tv-product.preset-premium-showcase .tv-product-name {
        font-size: clamp(26px, min(var(--tv-name-size, 96px), 4.8vw), 72px);
    }

    .tv-product.preset-premium-showcase .tv-price-final,
    .tv-product.preset-premium-showcase .tv-price-promo {
        font-size: clamp(34px, min(var(--tv-price-size, 150px), 7.2vw), 98px);
    }

    .tv-product.preset-premium-showcase .tv-price-normal {
        font-size: clamp(18px, min(calc(var(--tv-price-size, 150px) * 0.34), 3.2vw), 42px);
    }

    .tv-product.preset-premium-showcase .tv-product-image-box {
        width: min(100%, var(--tv-image-width, 360px), 24vw);
        max-width: min(100%, var(--tv-image-width, 360px), 24vw);
        max-height: min(48vh, 340px);
        border-radius: 24px;
    }
}

@media (min-aspect-ratio: 16/10) {
    .tv-product-content {
        grid-template-columns: minmax(0, 1.22fr) minmax(280px, auto);
        column-gap: clamp(14px, 2vw, 36px);
    }

    .tv-product-main {
        --tv-safe-width: min(100%, 1180px);
    }

    .tv-product.preset-premium-showcase .tv-product-content {
        grid-template-columns: minmax(680px, 1.42fr) minmax(280px, .58fr);
    }

    .tv-product.preset-premium-showcase .tv-product-image-box {
        max-width: min(100%, var(--tv-image-width, 540px), 1200px);
        max-height: min(74vh, 780px);
    }
}

    @media (min-aspect-ratio: 16/10) {
        .tv-product-content {
            grid-template-columns: minmax(0, 1.22fr) minmax(280px, auto);
            column-gap: clamp(14px, 2vw, 36px);
        }

        .tv-product-main {
            --tv-safe-width: min(100%, 1180px);
        }

        .tv-product.preset-premium-showcase .tv-product-content {
            grid-template-columns: minmax(680px, 1.42fr) minmax(280px, .58fr);
        }

        .tv-product.preset-premium-showcase .tv-product-image-box {
            max-width: min(100%, var(--tv-image-width, 540px), 1200px);
            max-height: min(74vh, 780px);
        }
    }

    /* =========================
   Animação de entrada do produto (vindo da esquerda)
   ========================= */
    .tv-product-content {
        animation: product-enter-left .6s cubic-bezier(.22,.61,.36,1) both;
    }

    .tv-product-main {
        animation: product-enter-left .7s cubic-bezier(.22,.61,.36,1) both;
    }

    .tv-product-image-box {
        animation: product-enter-left .75s cubic-bezier(.22,.61,.36,1) both;
    }

    @keyframes product-enter-left {
        0% {
            opacity: 0;
            transform: translateX(-72px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .tv-product-content,
        .tv-product-main,
        .tv-product-image-box {
            animation: none !important;
        }
    }