/* ============================================================
   Vzhled REDMI Note 17 — MAX ENERGIE
   Načítá se ZA app/dist/app.css, takže jen přebarvuje a doplňuje.
   Sdílené sekce (benefity, prodejci, kroky, formulář, FAQ) zůstávají,
   mění se paleta a hero.
   ============================================================ */

.xps-redmi17 {
    /* Bílý podklad + oranžové akcenty místo krémové/zelené */
    --c-bg: #ffffff;
    --c-bg-soft: #f6f7f9;
    --c-bg-card: #f2f4f7;
    --c-surface: #ffffff;
    --c-line: #e6e8ec;
    --c-line-soft: #f0f1f4;
    --c-green: #ff6a13;
    --c-green-2: #e15a0a;
    --c-green-soft: #ff8442;
    --c-green-tint: #ffe9d9;
    /* Akcent wordmarku (číslo řady) — v předloze růžová */
    --xps-accent: #e6007e;
}

/* ── Banner (hlavička kampaně) ─────────────────────────────
   Stavba dle předlohy: vlevo vizuál, vpravo sloupec bílých karet. */
.xps-banner.xps-stack {
    --xps-wedge: 0px;
}

.xps-banner {
    --xps-wedge: clamp(34px, 5.4vw, 70px);
    /* Klín má barvu navazující sekce → hero je jen šikmo seříznuté. */
    --xps-wedge-color: #f6f7f9;
    /* Oranžová nit po přeponě — díky ní je předěl vidět i vlevo, kde má klín
       nulovou výšku. Vlevo je vlasová, doprava se rozšiřuje až na tuto
       hodnotu (obě vrstvy sdílejí levý dolní roh). 0 = čistý řez bez nitě. */
    --xps-wedge-thread: 12px;
    position: relative;
    background: var(--c-bg);
    /* dolní odsazení počítá s klínem, aby na něj obsah nedosedal */
    padding: 34px 0 calc(30px + var(--xps-wedge) + var(--xps-wedge-thread));
}

/* Klín je spodní hranou hero sekce — další sekce na něj přímo navazuje.
   Vlevo dobíhá do ztracena (1 px), vpravo je vysoký --xps-wedge.
   Na rozcestníku (.xps-stack) pod hero žádná obsahová sekce není, hero tam
   končí patičkou — klín by byl jen pruh navíc, proto se nevykresluje. */
.xps-banner.xps-stack::before,
.xps-banner.xps-stack::after {
    content: none;
}

.xps-banner::before,
.xps-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    /* 1 px přesah pod hero — výška hero bývá zlomková a bez přesahu by na
       hraně zůstal světlý subpixelový šev. */
    bottom: -1px;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    pointer-events: none;
}

/* Nit leží níž a je o kus vyšší, takže po přeponě vykoukne jako linka. */
.xps-banner::before {
    height: calc(var(--xps-wedge) + 1px + var(--xps-wedge-thread));
    background: var(--c-green);
    z-index: 2;
}

/* Klín v barvě navazující sekce leží na niti. */
.xps-banner::after {
    height: calc(var(--xps-wedge) + 1px);
    background: var(--xps-wedge-color);
    z-index: 3;
}

/* Sekce hned pod hero má v základní šabloně vlasovou linku nahoře — ta by
   šikmý řez přeťala rovnou čarou. */
.xps-redmi17 .benefits {
    border-top: 0;
}

.xps-banner-grid {
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    /* Sloupce se nesmí dotýkat — vizuál vlevo potřebuje vzduch. */
    gap: clamp(28px, 5vw, 88px);
    align-items: center;
}

/* Levý vizuál — nadpis MAX ENERGIE NAD telefony.
   Dvojice telefonů stojí blízko sebe: první rovně, druhý mírně natočený. */
/* Detail varianty — napis MAX ENERGIE nahore, vetsi, telefony ho spodni
   casti decentne prekryvaji (pismena zustanou citelna). */
.xps-visual {
    position: relative;
    display: block;
    min-height: 400px;
    padding-top: clamp(30px, 4.4vw, 84px);
}

.xps-visual .xps-max {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
}

.xps-visual .xps-max {
    --xps-max-size: clamp(84px, 12.5vw, 216px);
}

.xps-visual .xps-max--img img {
    width: clamp(220px, 40vw, 640px);
    max-width: none;
}

.xps-visual .xps-phones {
    position: relative;
    z-index: 1;
}

/* Nadpis MAX / ENERGIE — poměry odečtené z originálního PSD (artboard
   1920x1080, vrstvy „MAX" a „ENERGIE" v MiSansLatin-Heavy):
     · ENERGIE má 0.167x velikost písma MAX,
     · MAX je vodorovně roztažené 1.2204x (transform textového rámce v PSD),
     · mezera mezi inkousty obou slov 0.053x velikosti MAX,
     · obě slova zarovnaná doleva, tracking 0, barva #ff6a13.
   Velikost řídí jediná proměnná --xps-max-size (nastavuje ji kontext). */
.xps-max {
    --xps-max-size: clamp(58px, 8.6vw, 132px);
    --xps-max-stretch: 1.2204;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Roztažení MAX nemění šířku boxu → dorovnáme paddingem, aby šel blok
       poctivě vycentrovat (šířka inkoustu „MAX" je 2.336em). */
    width: max-content;
    max-width: 100%;
    padding-right: calc(var(--xps-max-size) * 2.336 * (var(--xps-max-stretch) - 1));
    line-height: .82;
}

.xps-max-word {
    display: block;
    font-size: var(--xps-max-size);
    line-height: .74;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--c-green);
    transform: scaleX(var(--xps-max-stretch));
    transform-origin: left center;
}

.xps-max-sub {
    display: block;
    font-size: calc(var(--xps-max-size) * .167);
    line-height: .78;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--c-green);
    margin-top: calc(var(--xps-max-size) * .053);
}

/* Telefony — v řadě, blízko sebe */
.xps-phones {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
}

.xps-phone {
    width: auto;
    height: clamp(230px, 27vw, 400px);
    object-fit: contain;
    filter: drop-shadow(0 20px 36px rgba(20, 18, 14, .24));
}

/* První stojí rovně, druhý je mírně natočený a částečně před ním */
.xps-phone:nth-child(2) {
    transform: rotate(6deg);
    margin-left: -5%;
    margin-bottom: 2%;
    z-index: 2;
}

/* Tři a víc (detail varianty s více modely) → o něco menší, ať se vejdou */
.xps-phones[data-count="3"] .xps-phone,
.xps-phones[data-count="4"] .xps-phone {
    height: clamp(170px, 19vw, 280px);
}

.xps-phones[data-count="3"] .xps-phone:nth-child(3),
.xps-phones[data-count="4"] .xps-phone:nth-child(3) {
    transform: rotate(-4deg);
    margin-left: -4%;
}

.xps-phones[data-count="4"] .xps-phone:nth-child(4) {
    transform: rotate(8deg);
    margin-left: -5%;
}

/* Pravý sloupec */
.xps-banner-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

/* Wordmark řady — číslo akcentní barvou, poslední slovo horní index */
.xps-wordmark {
    font-size: clamp(30px, 4.4vw, 54px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--c-ink);
    margin: 0;
}

.xps-wm-num {
    color: var(--xps-accent, #e6007e);
}

/* Značka v lockupu — širší prostrkání a těžší řez než zbytek názvu.
   Přiblížení logotypu; pro 1:1 použij obrázek („Obrázek názvu řady"). */
.xps-wm-brand {
    font-weight: 800;
    letter-spacing: .015em;
    margin-right: .1em;
}

.xps-wordmark {
    font-weight: 500;
}

.xps-wm-sup {
    font-size: .3em;
    font-weight: 600;
    color: var(--c-muted);
    margin-left: 4px;
    vertical-align: super;
}

.xps-claim {
    font-size: clamp(16px, 1.9vw, 24px);
    color: var(--c-ink-2);
    margin: 0;
}

.xps-offer-label {
    font-size: clamp(15px, 1.7vw, 22px);
    font-weight: 700;
    color: var(--c-green-2);
    margin: 0;
}

/* Oranžová pilulka s úsporou */
.xps-savings {
    align-self: center;
    background: var(--c-green);
    color: #fff;
    font-weight: 800;
    font-size: clamp(19px, 2.5vw, 30px);
    line-height: 1.1;
    border-radius: 999px;
    padding: 12px 34px;
    margin: 2px 0 8px;
    text-align: center;
    box-shadow: 0 10px 26px rgba(255, 106, 19, .26);
}

/* Obrázkové varianty nápisu a wordmarku (1:1 grafika od Xiaomi) */
.xps-max--img img {
    width: 100%;
    max-width: clamp(180px, 26vw, 380px);
    height: auto;
    display: block;
}

/* Obrázkový wordmark (SVG z key visualu) — omezená šířka, ať nepřebije layout */
.xps-wordmark--img {
    display: flex;
    justify-content: center;
    width: 100%;
}

.xps-wordmark--img img {
    width: 100%;
    max-width: clamp(260px, 42vw, 520px);
    height: auto;
    display: block;
}

/* Nadpis rozcestníku nad kartami variant */
.xps-variants-lead {
    font-size: clamp(17px, 2vw, 24px);
    font-weight: 700;
    color: var(--c-ink);
    text-align: center;
    margin: 6px 0 2px;
}

/* Bílé zaoblené karty */
.xps-card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: 20px;
    padding: 16px 18px;
    box-shadow: 0 8px 26px rgba(20, 18, 14, .05);
}

/* Karta s dárky — dvě varianty vedle sebe, oddělené linkou (dle předlohy) */
/* Dvě samostatné karty vedle sebe s mezerou — nedeli je cara, ale
   podklad: jedna bila, druha decentne oranzova. */
.xps-gifts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.xps-gifts--single {
    grid-template-columns: 1fr;
}

.xps-gift {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 16px 20px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: 20px;
    text-decoration: none;
    color: inherit;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

/* Kazda druha karta ma jemne oranzovy podklad */
.xps-gift:nth-child(odd) {
    background: rgba(255, 106, 19, .06);
    border-color: var(--c-green-tint);
}

/* Hover dárku: místo obtahování se prosvětlí podklad + nepatrné zvětšení. */
.xps-gift:not(.is-static):hover {
    transform: translateY(-2px) scale(1.012);
    background: rgba(255, 106, 19, .12);
}

.xps-gift:nth-child(odd):not(.is-static):hover {
    background: rgba(255, 106, 19, .16);
}





.xps-gift-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.15;
}

/* „+ za recenzi" a „získáte" — oranžové, tučné */
.xps-gift-lead {
    font-size: clamp(13px, 1.3vw, 16.5px);
    font-weight: 700;
    color: var(--c-green);
    margin-bottom: 2px;
}

.xps-plus {
    color: var(--c-green);
    font-weight: 900;
    font-size: 1.35em;
    line-height: 0;
    margin-right: 5px;
    position: relative;
    top: .1em;
}

/* Modely — velké tmavé řádky, „5G" a energ. třída jako odznaky */
.xps-gift-models {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}

.xps-gm-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: clamp(15px, 1.55vw, 20px);
    font-weight: 700;
    color: var(--c-ink);
    letter-spacing: -.01em;
}

/* Oficiální logotyp modelu v kartě dárku — výška se váže na velikost řádku,
   aby lockup rostl s textem a seděl na účaří vedle spojky a energ. štítku. */
.xps-gm-logo {
    /* Obrázek je oříznutý na dřík písmen, kdežto em je celá velikost písma —
       .72em proto sedí na verzálky okolního textu, ne nad ně. Obě míry jsou
       jen stropy, takže se lockup na úzké kartě zmenší a nepřeteče pod fotku
       dárku; poměr stran si prohlížeč pohlídá sám. */
    height: auto;
    width: auto;
    max-height: .72em;
    max-width: 100%;
    min-width: 0;
    flex: 0 1 auto;
    display: block;
}

.xps-gm-join {
    font-weight: 700;
    color: var(--c-ink);
}

/* Model i se spojkou je jeden celek — zalomí se před „nebo", ne za ním. */
.xps-gm-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
}

/* Odznak sítě (5G / 4G) */
.xps-net {
    font-size: .62em;
    font-weight: 700;
    border: 1.5px solid var(--c-ink);
    border-radius: 5px;
    padding: 1px 4px;
    line-height: 1.15;
}

/* Energetický štítek — malá stupnice A→G + zelená třída */
.xps-energy {
    display: inline-flex;
    align-items: stretch;
    height: 1.15em;
    font-size: .62em;
    line-height: 1;
}

.xps-energy-scale {
    display: flex;
    align-items: center;
    gap: 1px;
    border: 1.5px solid var(--c-ink);
    border-right: 0;
    border-radius: 4px 0 0 4px;
    padding: 0 3px;
    font-weight: 700;
}

.xps-energy-scale i {
    font-style: normal;
    opacity: .55;
}

.xps-energy-class {
    display: flex;
    align-items: center;
    padding: 0 7px 0 5px;
    background: #1aa74a;
    color: #fff;
    font-weight: 800;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%);
}

/* „xiaomi" + název dárku */
.xps-gift-brand {
    font-size: clamp(15px, 1.55vw, 20px);
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--c-ink);
}

.xps-gift-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: clamp(15px, 1.55vw, 20px);
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--c-ink);
    margin-top: 1px;
}

.xps-unit {
    font-size: .68em;
    font-weight: 700;
    border: 1.5px solid var(--c-ink);
    border-radius: 999px;
    padding: 1px 8px;
}

/* „v hodnotě 1 499 Kč" — oranžové, cena výrazně větší */
.xps-gift-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: clamp(13px, 1.3vw, 16.5px);
    font-weight: 700;
    color: var(--c-green);
    /* Prilepeni dolu - hodnota sedi v obou polovinach ve stejne vysce */
    margin-top: auto;
    padding-top: 8px;
}

.xps-gift-value strong {
    font-size: clamp(21px, 2.25vw, 31px);
    font-weight: 800;
    color: var(--c-green);
    letter-spacing: -.01em;
}

.xps-gift-img {
    flex: 0 0 auto;
    align-self: center;
    width: clamp(90px, 10vw, 140px);
    margin-left: auto;
}

.xps-gift-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Karta se zárukami — dvě položky s červenými ikonami */
.xps-warranty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(10px, 1.6vw, 22px);
    padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 28px);
    margin: clamp(4px, 1vw, 12px) 0;
    border-color: var(--c-green-tint);
}

.xps-warranty-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 8px;
}

.xps-warranty-ico {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    background: #d92d20;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.xps-warranty-ico--screen {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%276%27%20y%3D%272.5%27%20width%3D%2712%27%20height%3D%2719%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M9.5%206.5l5%205m0-5l-5%205%27%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%276%27%20y%3D%272.5%27%20width%3D%2712%27%20height%3D%2719%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M9.5%206.5l5%205m0-5l-5%205%27%2F%3E%3C%2Fsvg%3E");
}

.xps-warranty-ico--battery {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.5%2012a8.5%208.5%200%201%201-2.6-6.1%27%2F%3E%3Cpath%20d%3D%27M20.5%203v4h-4%27%2F%3E%3Cpath%20d%3D%27M12.5%207l-2.5%204.5h3L10.5%2017l4-6h-3z%27%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.5%2012a8.5%208.5%200%201%201-2.6-6.1%27%2F%3E%3Cpath%20d%3D%27M20.5%203v4h-4%27%2F%3E%3Cpath%20d%3D%27M12.5%207l-2.5%204.5h3L10.5%2017l4-6h-3z%27%2F%3E%3C%2Fsvg%3E");
}

.xps-warranty-text {
    font-size: clamp(14px, 1.4vw, 17px);
    line-height: 1.3;
    color: var(--c-ink);
}

/* Karta s benefity: dvě pojmenované skupiny vedle sebe, mezi nimi linka.
   Šířku si skupiny dělí podle počtu položek (--xps-cols), takže dlaždice
   vycházejí stejně velké i při 3 + 2 položkách. */
.xps-services {
    display: flex;
    align-items: stretch;
    gap: clamp(16px, 2.4vw, 40px);
}

.xps-service-group {
    flex: var(--xps-cols, 1) 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.xps-service-group + .xps-service-group {
    padding-left: clamp(16px, 2.4vw, 40px);
    border-left: 1px solid var(--c-line, #e7e8ec);
}

.xps-service-group-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-muted, #8a8f98);
    text-align: center;
}

.xps-service-row {
    display: grid;
    grid-template-columns: repeat(var(--xps-cols, 2), minmax(0, 1fr));
    gap: 10px 20px;
    align-items: center;
    flex: 1;
}

.xps-service {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 6px 4px;
}

/* Pevný box na ikonu: značková loga jsou široká a nízká, servisní ikony malé
   a čtvercové — bez společné výšky by dlaždice v řadě opticky poskakovaly. */
.xps-service-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
}

.xps-service-logo img {
    max-height: 26px;
    max-width: min(130px, 100%);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.xps-service-text {
    display: flex;
    flex-direction: column;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--c-muted);
}

.xps-service-text strong {
    color: var(--c-ink);
    font-size: 13px;
}

.xps-infoline {
    font-size: 14px;
    color: var(--c-ink-2);
    margin: 4px 0 0;
    text-align: center;
}

/* Věta o platnosti a pod ní další texty s vlastní platností od–do. */
.xps-validity-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: clamp(14px, 1.8vw, 26px) 0 0;
}

.xps-validity {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--c-muted);
    margin: 0;
}

/* Stejny design jako tlacitka na rozcestniku: oranzove, vyrazne, pulzujici.
   Stin je tesny, aby nepadal na fotku telefonu vedle. */
.xps-cta.cta,
.xps-cta.cta.dark {
    width: 100%;
    background: var(--c-green);
    color: #fff;
    font-weight: 800;
    font-size: clamp(15px, 1.6vw, 19px);
    border-radius: 999px;
    padding: 16px 34px;
    box-shadow: 0 6px 16px rgba(255, 106, 19, .28);
    animation: xps-cta-pulse 2.1s cubic-bezier(.4, 0, .6, 1) infinite;
}

.xps-cta.cta:hover,
.xps-cta.cta.dark:hover {
    background: var(--c-green-2);
    box-shadow: 0 6px 16px rgba(255, 106, 19, .32);
    transform: none;
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .xps-cta.cta,
    .xps-cta.cta.dark {
        animation: none;
    }
}

/* ── Mobil ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .xps-banner-grid {
        grid-template-columns: 1fr;
    }

    .xps-visual {
        min-height: 300px;
        order: -1;
    }

    .xps-visual {
        min-height: 0;
        gap: 10px;
    }

    .xps-max {
        --xps-max-size: clamp(56px, 17vw, 110px);
    }

    .xps-phone {
        height: clamp(190px, 44vw, 300px);
    }

    .xps-gift + .xps-gift {
        border-left: 0;
        border-top: 1px solid var(--c-line-soft);
        padding-top: 12px;
    }
}

/* ── Přebarvení sdílených sekcí ────────────────────────────── */
.xps-redmi17 .benefits,
.xps-redmi17 .home-gifts {
    background: var(--c-bg-soft);
}

.xps-redmi17 .eyebrow,
.xps-redmi17 .gift-card-label,
.xps-redmi17 .plus-mark {
    color: var(--c-green-2);
}

/* Karty variant na landing — bílé s oranžovým rámečkem místo skla */
.xps-redmi17 .gift-card {
    background: #fff;
    border: 1px solid var(--c-line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 10px 30px rgba(20, 18, 14, .07);
}

.xps-redmi17 .gift-card:hover {
    border-color: var(--c-green);
    background: #fff;
}

/* Hodnota dárku na kartě varianty */
.gift-card-value {
    display: block;
    font-size: 14px;
    color: var(--c-muted);
    margin-top: 4px;
}

.gift-card-value strong {
    color: var(--c-green-2);
}

/* Zelené prvky formuláře a nabídky přebarvíme na oranžovou */
.xps-redmi17 .offer-row.gift {
    background: var(--c-green);
}

.xps-redmi17 .step-ico {
    background: var(--c-green-tint);
    color: var(--c-green-2);
}

/* ── Mobil ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .xps-hero-grid {
        grid-template-columns: 1fr;
    }

    .xps-hero-visual {
        min-height: 300px;
        order: -1;
    }

    .xps-max {
        --xps-max-size: clamp(70px, 22vw, 130px);
    }

    .xps-hero-phone {
        max-width: 48%;
    }
}

/* ── Rozvržení „na sloup": název → telefony → dárky ──────── */
.xps-stack {
    padding: 30px 0 44px;
}

.xps-stack .container {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vw, 26px);
}

/* 1) Hlavička kampaně — nápis, wordmark, claim; vše na střed */
.xps-stack-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    margin-bottom: clamp(8px, 1.8vw, 26px);
}

.xps-stack-head .xps-max {
    margin-inline: auto;
}

.xps-stack-head .xps-max {
    --xps-max-size: clamp(52px, 7.5vw, 116px);
}

.xps-stack .xps-wordmark,
.xps-stack .xps-claim {
    text-align: center;
}

/* Nápis MAX ENERGIE jako podklad — nahoře v kontejneru, na celou šířku,
   takže vizuálně zaštiťuje OBĚ skupiny modelů. Telefony ho spodní částí
   překrývají (jako v key visualu). */
.xps-phones-row {
    position: relative;
    padding-top: clamp(34px, 5vw, 96px);
    margin-bottom: clamp(20px, 3.6vw, 48px);
}

.xps-phones-row .xps-max {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    margin-inline: auto;
    pointer-events: none;
}

.xps-phones-row .xps-max {
    --xps-max-size: clamp(86px, 13vw, 224px);
    /* Roztažení jde na obě strany od osy → box nemusí nic dorovnávat. */
    padding-right: 0;
}

.xps-phones-row .xps-max-word {
    transform-origin: center;
}

.xps-phones-row .xps-max-sub {
    margin-inline: auto;
}

.xps-phones-row .xps-max--img img {
    width: clamp(240px, 46vw, 760px);
    max-width: none;
}

/* Telefony leží nad nápisem a zabírají celou šířku pod ním */
.xps-phones-row .xps-groups {
    position: relative;
    z-index: 1;
    width: 100%;
}

@media (max-width: 860px) {
    /* Skupiny jsou pod sebou, takže telefony stojí přesně tam, kde je nápis.
       Odsazení proto musí být o něco vyšší než celý blok MAX + ENERGIE,
       jinak se slovo ENERGIE schová za první telefon. */
    .xps-phones-row {
        padding-top: clamp(66px, 21vw, 142px);
    }

    .xps-phones-row .xps-max {
        --xps-max-size: clamp(64px, 20vw, 134px);
    }

}

/* 2) Telefony po variantách — v každé dlaždici 2 telefony mírně přes sebe,
      pod nimi názvy modelů a odkaz na registraci. */
.xps-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

/* Bez rámečku a podkladu — telefony „stojí" přímo na ploše */
.xps-group-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 8px;
    gap: 10px;
    background: transparent;
    border: 0;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease;
}

.xps-group-tile:hover {
    transform: translateY(-3px) scale(1.02);
}

/* Telefony přes sebe */
.xps-group-phones {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: clamp(180px, 21vw, 300px);
}

.xps-group-phones img {
    height: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 16px 30px rgba(20, 18, 14, .22));
}

/* Druhý telefon je vždy natočený do plusového úhlu a jde mírně přes první.
   Zrcadlená dlaždice mění jen POŘADÍ fotek, náklon zůstává stejný. */
.xps-group-phones img + img {
    margin-left: -18%;
    transform: rotate(6deg);
    z-index: 2;
}

.xps-group-phones img:nth-child(3) {
    margin-left: -16%;
    transform: rotate(9deg);
    z-index: 3;
}

/* Názvy modelů pod telefony */
.xps-group-models {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
}

.xps-group-model {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-ink);
    line-height: 1.25;
}

.xps-group-model + .xps-group-model::before {
    content: "·";
    color: var(--c-muted);
    margin-right: 8px;
    font-weight: 400;
}

/* Logotyp modelu pod kartou — stropy v em, aby seděl na verzálky popisku
   a na úzké kartě se zmenšil místo přetečení. */
.xps-group-model {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.xps-group-logo {
    height: auto;
    width: auto;
    max-height: .78em;
    max-width: 100%;
    min-width: 0;
}

/* Tlačítko registrace — výrazné, v Xiaomi oranžové a pulzující,
   aby na rozcestníku táhlo pozornost. */
.xps-model-cta {
    font-size: clamp(15px, 1.6vw, 19px);
    font-weight: 800;
    letter-spacing: .01em;
    color: #fff;
    background: var(--c-green);
    border-radius: 999px;
    padding: 15px 34px;
    margin-top: clamp(6px, 1vw, 14px);
    animation: xps-cta-pulse 2.1s cubic-bezier(.4, 0, .6, 1) infinite;
    will-change: transform;
}

@keyframes xps-cta-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 20px rgba(255, 106, 19, .32), 0 0 0 0 rgba(255, 106, 19, .5);
    }

    50% {
        transform: scale(1.045);
        box-shadow: 0 12px 26px rgba(255, 106, 19, .42), 0 0 0 14px rgba(255, 106, 19, 0);
    }
}

.xps-group-tile:hover .xps-model-cta {
    background: var(--c-green-2);
    animation-play-state: paused;
    transform: scale(1.05);
}

/* Uživatelé s omezením animací pulzování nedostanou */
@media (prefers-reduced-motion: reduce) {
    .xps-model-cta {
        animation: none;
        box-shadow: 0 8px 20px rgba(255, 106, 19, .32);
    }
}

/* 3) Karty dárků a služeb ve sloupu jdou přes celou šířku */
.xps-stack .xps-gifts,
.xps-stack .xps-services {
    margin-top: 4px;
}

@media (max-width: 600px) {
    .xps-groups {
        grid-template-columns: 1fr;
    }

    .xps-group-phones {
        height: clamp(150px, 40vw, 230px);
    }
}

/* ── Ikony a odznaky vytažené z kampaňového key visualu ──── */
/* Výška je vázaná na velikost textu (em), aby odznaky rostly s nadpisem */
.xps-net-img {
    height: .78em;
    width: auto;
    display: inline-block;
    vertical-align: -.02em;
}

.xps-energy-img {
    height: .82em;
    width: auto;
    display: inline-block;
    vertical-align: -.04em;
}

.xps-unit-img {
    height: .95em;
    width: auto;
    display: inline-block;
    vertical-align: -.18em;
}

.xps-plus-img {
    height: 1.15em;
    width: auto;
    display: inline-block;
    vertical-align: -.22em;
    margin-right: 6px;
}

/* Ikony záruky (výměna obrazovky / baterie) */
.xps-warranty-img {
    flex: 0 0 auto;
    width: clamp(38px, 3.4vw, 52px);
    height: auto;
    display: block;
}

/* ── Přepínač variant (modely + dárek) ─────────────────────────────────
   V hlavičce detailu i nad formulářem: aktivní varianta je zvýrazněná,
   ostatní vedou na svoji podstránku. */
.xps-switch {
    margin: clamp(16px, 2.2vw, 30px) 0 clamp(10px, 1.4vw, 18px);
}

.xps-switch-lead {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-muted);
    text-align: center;
}

/* V úzkém sloupci hlavičky stojí varianty pod sebou — vedle sebe se název
   telefonu i dárku lámal na dva řádky. Nad formulářem je místa dost. */
.xps-switch-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.xps-switch--form .xps-switch-items {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.xps-switch-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--c-line);
    border-radius: 14px;
    background: var(--c-surface);
    text-decoration: none;
    color: inherit;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

a.xps-switch-item:hover {
    background: rgba(255, 106, 19, .12);
    transform: translateY(-2px) scale(1.012);
}

.xps-switch-item.is-active {
    border-color: var(--c-green);
    background: rgba(255, 106, 19, .1);
    cursor: default;
}

.xps-switch-img {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
}

.xps-switch-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.xps-switch-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    text-align: left;
}

/* Telefon = drobný potlačený řádek, dárek = tučný s oranžovým plusem.
   Rozdíl musí být znát na první pohled, ne až po přečtení. */
.xps-switch-models {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--c-muted);
    line-height: 1.3;
    /* Vždy jeden řádek — zalomený název modelu se plete s názvem dárku. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xps-switch-gift {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--c-ink);
}

.xps-switch-plus {
    flex: 0 0 auto;
    width: .72em;
    height: .72em;
    object-fit: contain;
    transform: translateY(.04em);
}

.xps-switch-plus--txt {
    width: auto;
    height: auto;
    color: var(--c-green);
    font-weight: 800;
}

/* Nad formulářem stojí přepínač samostatně — dostane šířku obsahu stránky. */
.xps-switch--form {
    max-width: 760px;
    margin: 0 auto clamp(14px, 2vw, 24px);
}

/* Kotvy z menu nesmí zmizet pod lepivou hlavičkou (72 px). */
#benefits,
#how,
#partners,
#register,
#rules,
#akce {
    scroll-margin-top: 86px;
}

/* Na mobilu názvy modelů pod sebou — oddělovací tečka by se jinak zalomila
   na začátek druhého řádku. Musí stát až za základními pravidly výše. */
@media (max-width: 860px) {
    /* Skupiny benefitů pod sebe; dělicí linka se překlopí nad druhou z nich. */
    .xps-services {
        flex-direction: column;
        gap: 18px;
    }

    .xps-service-group + .xps-service-group {
        padding-left: 0;
        padding-top: 18px;
        border-left: 0;
        border-top: 1px solid var(--c-line, #e7e8ec);
    }

    .xps-group-models {
        flex-direction: column;
        gap: 2px;
    }

    .xps-group-model + .xps-group-model::before {
        content: none;
    }
}

/* ── Disclaimer ────────────────────────────────────────────────────────
   Základní šablona ho kreslí jako plný oranžový pás s bílým textem a
   jednotlivé lišty na sebe dosedají. Pro tuhle kampaň je to moc tvrdé —
   měkký oranžový podklad, tmavý text a mezera mezi jednotlivými pravidly. */
.xps-redmi17 .r3-disclaimer-bar {
    background: transparent;
    color: inherit;
}

.xps-redmi17 .r3-disclaimer-bar .container {
    padding-top: clamp(5px, .8vw, 9px);
    padding-bottom: clamp(5px, .8vw, 9px);
}

.xps-redmi17 .r3-disclaimer-text {
    margin: 0;
    padding: clamp(12px, 1.6vw, 18px) clamp(14px, 1.8vw, 22px);
    background: rgba(255, 106, 19, .07);
    border-left: 3px solid var(--c-green);
    border-radius: 12px;
    color: var(--c-ink);
    font-size: 13.5px;
    line-height: 1.7;
    font-weight: 500;
    white-space: pre-line;
}

/* Kroky a benefity: nadpisy vyvážené, odstavce bez sirotků; dělení slov
   necháme na pevných mezerách v obsahu, ne na prohlížeči. */
.step h3, .step h4, .benefit p strong, .faq-list summary {
    text-wrap: balance;
}
.step p, .benefit p {
    text-wrap: pretty;
    hyphens: manual;
}

/* ── Loga prodejců: jednotný rámeček 150×50 ────────────────────────────
   Soubory jsou oříznuté na obsah a vycentrované (scripts/normalize-logos.mjs),
   takže stačí pevný box; object-fit drží poměr, kdyby přišlo nové logo. */
/* Základní CSS drží odkaz na 120 px s vnitřním odsazením — proto se dřív
   změna velikosti obrázku neprojevila. Box i obrázek tu mají stejný rozměr. */
.xps-redmi17 .partner-logo {
    width: 150px;
    height: 50px;
    padding: 0;
    flex: 0 0 150px;
}

.xps-redmi17 .partner-logo img {
    width: 150px;
    height: 50px;
    max-width: 150px;
    max-height: none;
    min-width: 0;
    object-fit: contain;
}

/* E-mailové adresy tučně jen do váhy 600 — Bold řez má nečitelný zavináč. */
.xps-redmi17 a[href^="mailto:"] {
    font-weight: 600;
}

/* Na telefonu se položky nevejdou vedle sebe — tři loga v řádku se překrývala
   a popisky se lámaly po jednom slově. Jdou proto pod sebe, každá jako na
   desktopu: logo nahoře, text pod ním, vše na střed. Logo vedle textu se
   nevyplatilo — sloupec s logem ukradl místo popisku a ten se lámal. */
@media (max-width: 640px) {
    .xps-service-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .xps-service {
        padding: 0;
    }
}

@media (max-width: 560px) {
    .xps-redmi17 .partner-logo {
        width: 114px;
        height: 38px;
        flex-basis: 114px;
    }

    .xps-redmi17 .partner-logo img {
        width: 114px;
        height: 38px;
        max-width: 114px;
    }
}