/* ==========================================================================
   Shop Garage – porovnání produktů (F6-32): stránka /porovnani-produktu/ a spodní lišta.
   Vše s prefixem .esh-por (stránka je uvnitř kořene .esh a dědí jeho proměnné; lišta je
   mimo .esh, proto má vlastní proměnné). Zarovnání řádků = jedna tabulka, fotky v rámu 4:5.
   ========================================================================== */

.esh.esh-por {
    --esh-por-popis: 118px;
    --esh-por-col: 172px;
    --esh-por-top: 0px;
    --esh-por-nejlepsi: #eaf5ed;
    --esh-por-rozdil: var(--esh-red);
}

@media (min-width: 900px) {
    .esh.esh-por {
        --esh-por-popis: 210px;
        --esh-por-col: 230px;
    }
}

.esh.esh-por .esh-obal {
    max-width: 1880px;
}

/* ---------- Hlavička ---------- */
.esh .esh-por__hlavicka {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 32px;
    padding: 26px 0 22px;
}

.esh h1.esh-por__nadpis {
    margin: 0;
    color: var(--esh-ink);
    font-family: inherit;
    font-size: clamp(28px, 3.2vw, 48px);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.08;
    text-transform: none;
}

.esh .esh-por__podnadpis {
    margin: 10px 0 0;
    color: var(--esh-muted);
    font-size: calc(14px + 14 * var(--esh-s));
}

.esh .esh-por__nastroje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.esh .esh-por__nastroj {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid var(--esh-line);
    border-radius: 999px;
    color: var(--esh-ink);
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .18s var(--esh-ease), background-color .18s var(--esh-ease);
}

@media (hover: hover) {
    .esh .esh-por__nastroj:hover {
        border-color: var(--esh-ink);
        background: var(--esh-paper);
    }
}

.esh .esh-por__nastroj svg,
.esh .esh-por__tip-pridat svg,
.esh .esh-por__odebrat svg,
.esh .esh-por__veta-ikona svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* přepínač „Jen rozdíly“ */
.esh label.esh-por__prepinac {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    margin: 0;
    padding: 6px 16px 6px 8px;
    border: 1px solid var(--esh-ink);
    border-radius: 999px;
    color: var(--esh-ink);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
}

.esh .esh-por__prepinac input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.esh .esh-por__prepinac-kolejnice {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--esh-line-strong);
    transition: background-color .2s var(--esh-ease);
}

.esh .esh-por__prepinac-kolejnice::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .2s var(--esh-ease);
}

.esh .esh-por__prepinac input:checked + .esh-por__prepinac-kolejnice {
    background: var(--esh-red);
}

.esh .esh-por__prepinac input:checked + .esh-por__prepinac-kolejnice::after {
    transform: translateX(16px);
}

.esh .esh-por__prepinac input:focus-visible + .esh-por__prepinac-kolejnice {
    outline: 3px solid var(--esh-focus);
    outline-offset: 3px;
}

/* ---------- Chytré shrnutí ---------- */
.esh .esh-por__shrnuti {
    margin: 0 0 26px;
    padding: 20px 22px 22px;
    border-left: 4px solid var(--esh-red);
    background: var(--esh-paper);
}

.esh .esh-por__shrnuti-hlava {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin: 0 0 12px;
}

.esh h2.esh-por__shrnuti-nadpis {
    margin: 0;
    color: var(--esh-ink);
    font-family: inherit;
    font-size: calc(18px + 18 * var(--esh-s));
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
}

.esh .esh-por__shrnuti-pozn {
    margin: 0;
    color: var(--esh-muted);
    font-size: 12px;
}

.esh .esh-por__vety {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 1024px) {
    .esh .esh-por__vety {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.esh .esh-por__veta {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    color: #2c2b28;
    font-size: calc(14.5px + 14.5 * var(--esh-s));
    line-height: 1.5;
}

.esh .esh-por__veta-ikona {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--esh-ink);
    background: #fff;
}

.esh .esh-por__veta--tip {
    font-weight: 700;
}

.esh .esh-por__veta--tip .esh-por__veta-ikona,
.esh .esh-por__veta--sleva .esh-por__veta-ikona {
    color: #fff;
    background: var(--esh-red);
}

.esh .esh-por__veta--sklad .esh-por__veta-ikona {
    color: var(--esh-green);
}

/* ---------- Tabulka ---------- */
.esh .esh-por__posuv {
    position: relative;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.esh .esh-por__posuv:focus-visible {
    outline-offset: -3px;
}

.esh table.esh-por__tabulka {
    width: calc(var(--esh-por-popis) + var(--esh-por-sloupcu) * var(--esh-por-col));
    min-width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: calc(14px + 14 * var(--esh-s));
    line-height: 1.45;
}

.esh .esh-por__col-popis {
    width: var(--esh-por-popis);
}

.esh .esh-por__tabulka th,
.esh .esh-por__tabulka td {
    padding: 13px 14px;
    border: 0;
    border-bottom: 1px solid var(--esh-line);
    color: var(--esh-ink);
    background: #fff;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

/* zamčený první sloupec (mobil: vodorovný posun) */
.esh .esh-por__tabulka th.esh-por__popis,
.esh .esh-por__tabulka th.esh-por__roh {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 1px 0 0 var(--esh-line);
}

.esh .esh-por__tabulka th.esh-por__popis {
    color: var(--esh-muted);
    font-size: calc(12px + 12 * var(--esh-s));
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.esh .esh-por__lisi {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--esh-por-rozdil);
    vertical-align: middle;
}

.esh .esh-por__radek.is-shoda td {
    color: var(--esh-muted);
}

@media (hover: hover) {
    .esh .esh-por__radek:hover td,
    .esh .esh-por__radek:hover th.esh-por__popis {
        background: #faf8f4;
    }
}

.esh .esh-por__tabulka td.is-nejlepsi {
    background: var(--esh-por-nejlepsi);
}

@media (hover: hover) {
    .esh .esh-por__radek:hover td.is-nejlepsi {
        background: var(--esh-por-nejlepsi);
    }
}

.esh .esh-por__tabulka td.is-prazdna {
    color: var(--esh-line-strong);
}

.esh .esh-por__odznak {
    display: inline-block;
    margin: 6px 0 0;
    padding: 3px 7px;
    border-radius: 3px;
    color: #fff;
    background: var(--esh-green);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}

.esh td .esh-por__odznak {
    display: table;
}

.esh .esh-por__skupina th {
    padding: 22px 14px 10px;
    border-bottom: 2px solid var(--esh-ink);
    background: #fff;
}

.esh .esh-por__skupina span {
    position: sticky;
    left: 14px;
    color: var(--esh-ink);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.esh .esh-por.is-jen-rozdily tr[data-esh-por-shoda],
.esh.esh-por.is-jen-rozdily tr[data-esh-por-shoda] {
    display: none;
}

/* hlava tabulky: karta produktu */
.esh .esh-por__tabulka thead th {
    padding-top: 4px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--esh-ink);
    font-weight: 400;
}

.esh .esh-por__roh {
    vertical-align: bottom !important;
}

.esh .esh-por__roh-pocet {
    display: block;
    color: var(--esh-ink);
    font-size: clamp(26px, 2.6vw, 40px);
    font-weight: 800;
    line-height: 1;
}

.esh .esh-por__roh-text {
    display: block;
    margin: 6px 0 12px;
    color: var(--esh-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.esh .esh-por__legenda {
    display: block;
    color: var(--esh-muted);
    font-size: 11px;
    line-height: 1.6;
}

.esh .esh-por__legenda .esh-por__odznak {
    margin: 0 4px 0 0;
}

.esh .esh-por__karta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.esh .esh-por__foto {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    margin: 0 0 6px;
    background: var(--esh-foto);
}

.esh .esh-por__foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .5s var(--esh-ease);
}

@media (hover: hover) {
    .esh .esh-por__karta:hover .esh-por__foto img {
        transform: scale(1.03);
    }
}

.esh .esh-por__bezfoto {
    color: var(--esh-muted);
    font-size: 12px;
}

.esh .esh-por__foto-sleva {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 8px;
    color: #fff;
    background: var(--esh-red);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.2;
}

.esh .esh-por__odebrat {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--esh-line);
    border-radius: 50%;
    color: var(--esh-ink);
    background: rgba(255, 255, 255, .94);
    cursor: pointer;
    transition: background-color .18s var(--esh-ease), color .18s var(--esh-ease);
}

@media (hover: hover) {
    .esh .esh-por__odebrat:hover {
        color: #fff;
        background: var(--esh-red);
        border-color: var(--esh-red);
    }
}

.esh .esh-por__znacka {
    color: var(--esh-muted);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;
}

.esh a.esh-por__nazev {
    display: -webkit-box;
    overflow: hidden;
    color: var(--esh-ink);
    font-size: calc(13.5px + 13.5 * var(--esh-s));
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.35;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@media (hover: hover) {
    .esh a.esh-por__nazev:hover {
        color: var(--esh-red);
    }
}

/* přidat produkt (poslední sloupec) */
.esh .esh-por__pridat-ram {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    aspect-ratio: 4 / 5;
    padding: 14px;
    border: 2px dashed var(--esh-line-strong);
    color: var(--esh-muted);
    text-align: center;
}

.esh .esh-por__pridat-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #fff;
    background: var(--esh-ink);
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
}

.esh label.esh-por__pridat-popisek {
    margin: 0;
    color: var(--esh-ink);
    font-size: 14px;
    font-weight: 800;
}

.esh .esh-por__pridat-tip {
    font-size: 12px;
    line-height: 1.35;
}

.esh .esh-por__naseptavac {
    position: relative;
    width: 100%;
}

.esh .esh-por__hledat {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 16px;
}

.esh .esh-por__navrhy {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    width: max(100%, 280px);
    max-height: 340px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--esh-line-strong);
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(17, 18, 20, .18);
    list-style: none;
    text-align: left;
}

.esh .esh-por__navrhy[hidden] {
    display: none;
}

.esh .esh-por__navrh-nadpis {
    padding: 6px 8px 4px;
    color: var(--esh-muted);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.esh .esh-por__navrh {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 3px;
    color: var(--esh-ink);
    cursor: pointer;
}

.esh .esh-por__navrh.is-aktivni {
    background: var(--esh-paper);
}

@media (hover: hover) {
    .esh .esh-por__navrh:hover {
        background: var(--esh-paper);
    }
}

.esh .esh-por__navrh img {
    width: 40px;
    height: 50px;
    object-fit: contain;
    background: var(--esh-foto);
}

.esh .esh-por__navrh-nazev {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.esh .esh-por__navrh-meta {
    display: block;
    color: var(--esh-muted);
    font-size: 12px;
    line-height: 1.3;
}

/* buňky */
.esh .esh-por__cena {
    display: block;
    font-size: calc(18px + 18 * var(--esh-s));
    line-height: 1.25;
}

.esh .esh-por__bunka .esh-cena-puvodni {
    display: block;
    font-size: 13px;
}

.esh .esh-por__akce-do {
    display: block;
    margin-top: 2px;
    color: var(--esh-red);
    font-size: 12px;
    font-weight: 700;
}

.esh .esh-por__bunka--volna {
    background: transparent;
}

.esh .esh-por__radek--akce td,
.esh .esh-por__radek--akce th {
    border-bottom: 0;
    padding-top: 18px;
}

.esh .esh-por__tlacitka {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.esh .esh-por__koupit {
    width: 100%;
    min-height: 44px;
}

.esh a.esh-por__detail {
    color: var(--esh-ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (hover: hover) {
    .esh a.esh-por__detail:hover {
        color: var(--esh-red);
    }
}

.esh .esh-por__pozn {
    max-width: 90ch;
    margin: 14px 0 0;
    color: var(--esh-muted);
    font-size: 12px;
    line-height: 1.6;
}

/* ---------- Lepící hlavička s fotkami (při posunu dolů) ---------- */
.esh .esh-por__lepici {
    position: fixed;
    top: var(--esh-por-top);
    left: 0;
    right: 0;
    z-index: 890;
    border-bottom: 1px solid var(--esh-line);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 8px 24px rgba(17, 18, 20, .10);
    transform: translateY(-110%);
    transition: transform .22s var(--esh-ease);
}

.esh .esh-por__lepici.is-videt {
    transform: translateY(0);
}

.esh .esh-por__lepici[hidden] {
    display: none;
}

.esh .esh-por__lepici-vnitrek {
    overflow: hidden;
    padding: 0 var(--esh-gutter);
}

.esh .esh-por__lepici-radek {
    display: flex;
}

.esh .esh-por__lepici-roh {
    position: sticky;
    left: 0;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    width: var(--esh-por-popis);
    padding: 8px 14px;
    background: #fff;
    color: var(--esh-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.esh .esh-por__lepici-produkt {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    width: var(--esh-por-col);
    min-width: 0;
    padding: 8px 14px;
}

.esh .esh-por__lepici-produkt img {
    flex: 0 0 auto;
    width: 38px;
    height: 48px;
    object-fit: contain;
    background: var(--esh-foto);
}

.esh .esh-por__lepici-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.esh .esh-por__lepici-nazev {
    overflow: hidden;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.esh .esh-por__lepici-cena {
    color: var(--esh-ink);
    font-size: 13px;
    font-weight: 800;
}

/* ---------- Prázdný stav ---------- */
.esh .esh-por__prazdno {
    max-width: 640px;
    margin: 20px auto 10px;
    padding: 44px 24px;
    border: 1px solid var(--esh-line);
    background: var(--esh-paper);
    text-align: center;
}

.esh .esh-por__prazdno-ikona svg {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    fill: none;
    stroke: var(--esh-red);
    stroke-width: 2;
}

.esh h2.esh-por__prazdno-nadpis {
    margin: 0 0 8px;
    color: var(--esh-ink);
    font-family: inherit;
    font-size: calc(22px + 22 * var(--esh-s));
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.esh .esh-por__prazdno p {
    margin: 0 0 18px;
    color: var(--esh-muted);
}

.esh .esh-por__prazdno .esh-tlacitko {
    margin: 4px;
}

/* ---------- Porovnejte také ---------- */
.esh .esh-por__podobne {
    margin: 52px 0 0;
    padding: 40px 0 0;
    border-top: 1px solid var(--esh-line);
}

.esh h2.esh-por__podobne-nadpis {
    margin: 0 0 22px;
    color: var(--esh-ink);
    font-family: inherit;
    font-size: clamp(22px, 2.2vw, 34px);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.15;
    text-transform: none;
}

.esh .esh-por__mrizka {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 1024px) {
    .esh .esh-por__mrizka {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 36px 24px;
    }
}

.esh .esh-por__tip {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.esh .esh-por__tip-foto {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--esh-foto);
}

.esh .esh-por__tip-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.esh .esh-por__tip-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 5px;
    padding: 12px 2px 0;
}

.esh a.esh-por__tip-nazev {
    color: var(--esh-ink);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.35;
    text-decoration: none;
    text-transform: uppercase;
}

@media (hover: hover) {
    .esh a.esh-por__tip-nazev:hover {
        color: var(--esh-red);
    }
}

.esh .esh-por__tip-cena {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    font-size: 16px;
}

.esh .esh-por__tip-cena .esh-cena-puvodni {
    font-size: 13px;
}

.esh .esh-por__duvod {
    color: var(--esh-green);
    font-size: 12px;
    font-weight: 700;
}

.esh .esh-por__tip-pridat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    margin-top: auto;
    padding: 8px 12px;
    border: 1px solid var(--esh-ink);
    border-radius: 4px;
    color: var(--esh-ink);
    background: #fff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color .18s var(--esh-ease), color .18s var(--esh-ease);
}

.esh .esh-por__tip-pridat.is-aktivni {
    color: #fff;
    background: var(--esh-ink);
}

@media (hover: hover) {
    .esh .esh-por__tip-pridat:hover {
        color: #fff;
        background: var(--esh-ink);
    }
}

@media (min-width: 900px) {
    .esh table.esh-por__tabulka {
        width: 100%;
    }

    .esh .esh-por__tabulka th,
    .esh .esh-por__tabulka td {
        padding: 15px 18px;
    }
}

@media (max-width: 639px) {
    .esh .esh-por__nastroj span {
        display: none;
    }

    .esh .esh-por__nastroj {
        width: 42px;
        padding: 0;
        justify-content: center;
    }

    .esh .esh-por__tabulka th,
    .esh .esh-por__tabulka td {
        padding: 11px 10px;
    }

    .esh .esh-por__tabulka th.esh-por__popis {
        font-size: 10.5px;
        letter-spacing: .02em;
    }

    .esh .esh-por__legenda {
        display: none;
    }

    .esh .esh-por__shrnuti {
        padding: 16px 14px 16px 16px;
    }
}

/* ==========================================================================
   Spodní lišta porovnání (všechny stránky e-shopu) + záložní toast
   Mimo kořen .esh => vlastní proměnné. Vpravo 380 px volných: chat MC má vpravo dole pole zprávy
   a bublinu (~350 px), jinak by zakryl tlačítko Porovnat (Roman 26. 9. 15:00). Tlačítko je proto
   hned za nadpisem vlevo (order), miniatury až za ním.
   ========================================================================== */
.esh-por-lista {
    --esh-por-l-ink: var(--ink, #191a1c);
    --esh-por-l-night: var(--night, #111214);
    --esh-por-l-red: var(--red, #c92d26);

    position: fixed;
    right: 380px;
    bottom: 0;
    left: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 10px 16px;
    border-top: 3px solid var(--esh-por-l-red);
    border-radius: 0 8px 0 0;
    color: #fff;
    background: var(--esh-por-l-night);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .25);
    font-family: Manrope, "Inter", Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.3;
    transform: translateY(0);
    transition: transform .25s cubic-bezier(.2, .65, .25, 1);
}

.esh-por-lista[hidden] {
    display: none;
}

.esh-por-lista.is-schovana {
    transform: translateY(calc(100% + 10px));
}

.esh-por-lista *,
.esh-por-lista *::before,
.esh-por-lista *::after {
    box-sizing: border-box;
}

.esh-por-lista__popis {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    margin: 0;
}

.esh-por-lista__nadpis {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.esh-por-lista__pocet {
    color: #bdb9b2;
    font-size: 12px;
}

.esh-por-lista__sloty {
    display: flex;
    flex: 1 1 auto;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

.esh-por-lista__slot {
    position: relative;
    display: flex;
    flex: 0 1 220px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 52px;
    margin: 0;
    padding: 4px 30px 4px 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .08);
}

.esh-por-lista__slot--volny {
    justify-content: center;
    padding: 4px;
    border: 1px dashed rgba(255, 255, 255, .28);
    background: transparent;
    color: #8f8b84;
    font-size: 12px;
}

.esh-por-lista__slot img {
    flex: 0 0 auto;
    width: 36px;
    height: 44px;
    border-radius: 2px;
    object-fit: contain;
    background: #f1eee8;
}

.esh-por-lista__nazev {
    overflow: hidden;
    min-width: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.esh-por-lista__odebrat {
    position: absolute;
    top: 50%;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: -12px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: transparent;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

@media (hover: hover) {
    .esh-por-lista__odebrat:hover {
        background: var(--esh-por-l-red);
    }
}

.esh-por-lista__popis {
    order: 0;
}

.esh-por-lista__sloty {
    order: 2;
}

.esh-por-lista__akce {
    order: 1;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.esh-por-lista__porovnat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 20px;
    border: 0;
    border-radius: 4px;
    color: #fff;
    background: var(--esh-por-l-red);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

@media (hover: hover) {
    .esh-por-lista__porovnat:hover {
        color: #fff;
        background: #ad211c;
    }
}

.esh-por-lista__porovnat[aria-disabled="true"] {
    background: #4a4a4e;
    cursor: default;
}

.esh-por-lista__mala {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    color: #fff;
    background: transparent;
    font: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

@media (hover: hover) {
    .esh-por-lista__mala:hover {
        border-color: #fff;
    }
}

.esh-por-lista :focus-visible {
    outline: 3px solid #e26438;
    outline-offset: 2px;
}

.esh-por-lista-ouska {
    position: fixed;
    right: 394px;
    bottom: 0;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border: 0;
    border-top: 3px solid var(--red, #c92d26);
    border-radius: 8px 8px 0 0;
    color: #fff;
    background: var(--night, #111214);
    font-family: Manrope, "Inter", Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .2);
}

.esh-por-lista-ouska[hidden] {
    display: none;
}

@media (max-width: 767px) {
    .esh-por-lista {
        right: 0;
        bottom: 0;
        gap: 10px;
        min-height: 64px;
        padding: 8px 84px 8px 12px; /* vpravo bublina chatu MC */
        border-radius: 0;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    .esh-por-lista__popis {
        display: none;
    }

    .esh-por-lista__slot {
        flex: 0 0 44px;
        height: 52px;
        padding: 4px;
        background: transparent;
    }

    .esh-por-lista__slot--volny {
        display: none;
    }

    .esh-por-lista__nazev {
        display: none;
    }

    .esh-por-lista__odebrat {
        top: -2px;
        right: -4px;
        margin: 0;
        width: 20px;
        height: 20px;
        font-size: 13px;
        background: var(--esh-por-l-red);
    }

    .esh-por-lista__porovnat {
        min-height: 44px;
        padding: 8px 14px;
    }

    .esh-por-lista-ouska {
        right: 12px;
    }
}

/* záložní toast (když eshop.js nemá window.eshToast) */
.esh-por-toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    z-index: 950;
    max-width: min(92vw, 460px);
    padding: 12px 18px;
    border-radius: 4px;
    color: #fff;
    background: #111214;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    font-family: Manrope, "Inter", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    transform: translateX(-50%);
}

.esh-por-toast--chyba {
    background: #c92d26;
}

@media (prefers-reduced-motion: reduce) {
    .esh-por-lista,
    .esh .esh-por__lepici,
    .esh .esh-por__foto img {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   R-031: dotykové cíle ≥ 44 px jen pro dotyk (pointer: coarse); na myši beze změny.
   Malá tlačítka dostanou neviditelnou plochu přes ::before, odkazy v textu přes ::after
   nebo padding se zápornou marginou (název má overflow: hidden kvůli zkrácení na 2 řádky).
   --------------------------------------------------------------------------- */
@media (pointer: coarse) {
    .esh .esh-por__nastroj {
        min-width: 44px;
        min-height: 44px;
    }

    /* rám fotky plochu přes ::before ořízne, proto skutečná velikost */
    .esh .esh-por__odebrat {
        width: 44px;
        height: 44px;
    }

    .esh .esh-por__hledat,
    .esh .esh-por__koupit {
        min-height: 44px;
    }

    .esh a.esh-por__nazev {
        padding: 3px 0;
        margin-block: -3px;
    }

    .esh a.esh-por__tip-nazev,
    .esh a.esh-por__detail {
        position: relative;
    }

    .esh a.esh-por__tip-nazev::after {
        content: "";
        position: absolute;
        inset: -4px 0;
    }

    .esh a.esh-por__detail::after {
        content: "";
        position: absolute;
        inset: -9px 0 -17px; /* mezera nad je 10 px ke „Do košíku“, nesmí ho překrýt */
    }

    /* lišta porovnání dole: odebrat 24 px (mobil 20 px) a „schovat“ 40 px */
    .esh-por-lista__odebrat::before {
        content: "";
        position: absolute;
        inset: -10px;
    }

    .esh-por-lista__mala {
        width: 44px;
        height: 44px;
    }
}


@media (pointer: coarse) and (max-width: 639px) {
    .esh-por-lista__odebrat::before {
        inset: -12px;
    }
}

/* R-031: na mobilu je slot jen miniatura 44 × 52 bez jiné akce, proto celý slot = „odebrat“;
   odznak × zůstává vpravo nahoře (kreslí ho ::after), text tlačítka jen pro čtečky */
@media (pointer: coarse) and (max-width: 767px) {
    /* miniatury, které se vedle „Porovnat“ nevejdou, jdou posunout prstem (jinak by byly oříznuté a nedosažitelné) */
    .esh-por-lista__sloty {
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .esh-por-lista__sloty::-webkit-scrollbar {
        display: none;
    }

    .esh-por-lista__odebrat {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: auto;
        border-radius: 4px;
        background: transparent;
        color: transparent;
        font-size: 0;
    }

    .esh-por-lista__odebrat::before {
        content: none;
    }

    .esh-por-lista__odebrat::after {
        content: "\00d7";
        position: absolute;
        top: -2px;
        right: -4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        color: #fff;
        background: var(--esh-por-l-red);
        font-size: 13px;
        line-height: 1;
    }
}

@media print {
    .esh-por-lista,
    .esh-por-lista-ouska,
    .esh .esh-por__lepici,
    .esh .esh-por__nastroje,
    .esh .esh-por__pridat,
    .esh .esh-por__odebrat,
    .esh .esh-por__podobne {
        display: none !important;
    }
}

/* R-080: „Vrátit“ v oznámení o odebrání (dotykový cíl 44 px) */
.esh-por-vratit{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-10px 0 -10px 8px;padding:0 8px;border:0;border-radius:8px;background:none;font:inherit;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.esh-por-vratit:focus-visible{outline:2px solid currentColor;outline-offset:2px;}