/* ==========================================================================
   AUME – 9) Desktopová sticky lišta na detailu produktu

   Vyjede zespodu, přes celou šířku, podbarvená světle šedou webu.
   Na mobilu se nezobrazuje – tam je lišta ze souboru 02.

   HRANICE 768 px
   02 končí na max-width: 767px, tato začíná na min-width: 768px.
   Mezi nimi není ani mezera, ani překryv – při libovolné šířce okna
   je vidět právě jedna lišta. Když se hranice bude někdy měnit,
   MUSÍ se změnit v obou souborech naráz.
   ========================================================================== */

:root {
    /* Odsazení konce stránky, aby lišta nezakrývala patičku. Skutečnou
       hodnotu sem zapisuje JS z naměřené výšky lišty (mění se s šířkou
       okna – na užším se skrývá podtitulek a náhled). Tohle je jen záloha
       pro okamžik, než JS doběhne. */
    --aume-scd-height: 68px;

    --aume-scd-bg: #F7F5F1;         /* světle šedá webu (--color-bg-light) */
    --aume-scd-border: #E8E1D6;     /* jemná linka v champagne tónu webu */
    --aume-scd-text: #222222;       /* barva textu webu */
    --aume-scd-muted: #6B6B6B;
    --aume-scd-star: #F5A623;       /* stejná žlutá jako badge v hlavičce */

    /* Odsazení bubliny chatu ode dna, když je lišta venku.
       Přesnou hodnotu dopočítá JS z reálné výšky lišty, tohle je jen
       záloha pro případ, že by se bublina nenašla. */
    --aume-scd-chat-lift: 104px;
}

.aume-scd {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;

    /* Zobrazujeme jen na desktopu – viz media query níže */
    display: none;

    background: var(--aume-scd-bg);
    border-top: 1px solid var(--aume-scd-border);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);

    /* Zasunuto mimo obrazovku, .is-visible ji vysune */
    transform: translateY(115%);
    transition: transform .24s ease;
    will-change: transform;
}

.aume-scd.is-visible {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .aume-scd {
        transition: none;
    }
}

/* Web má fluidní .container bez max-width, takže i obsah lišty jde
   přes celou šířku – jen s vlastním odsazením od krajů. */
.aume-scd__in {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 10px 24px;
}

/* --- Hodnocení vlevo ----------------------------------------------------- */
.aume-scd__rev {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--aume-scd-text);
}

.aume-scd__rev:hover,
.aume-scd__rev:focus {
    text-decoration: none;
    color: var(--aume-scd-text);
}

.aume-scd__rev:hover .aume-scd__sub {
    text-decoration: underline;
}

.aume-scd__stars {
    display: inline-flex;
    gap: 2px;
}

.aume-scd__star {
    width: 15px;
    height: 15px;
    fill: var(--aume-scd-star);
}

.aume-scd__revtext {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.aume-scd__pct {
    font-size: 15px;
    font-weight: 700;
}

.aume-scd__sub {
    font-size: 12px;
    color: var(--aume-scd-muted);
    white-space: nowrap;
}

/* --- Produkt uprostřed --------------------------------------------------- */
.aume-scd__prod {
    flex: 1 1 auto;
    min-width: 0;          /* nutné, aby fungovalo zkrácení názvu */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.aume-scd__thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    background: #FFFFFF;
}

.aume-scd__name {
    font-size: 14px;
    color: var(--aume-scd-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Cena a tlačítko vpravo ---------------------------------------------- */
.aume-scd__buy {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
}

.aume-scd__price {
    font-size: 18px;
    font-weight: 700;
    color: var(--aume-scd-text);
    white-space: nowrap;
}

/* Tlačítko dědí konverzní barvu webu z tříd .btn .btn-conversion */
.aume-scd__btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 11px 28px !important;
    font-size: 15px !important;
    margin: 0 !important;
}

/* --- Zobrazení pouze na desktopu ---------------------------------------- */
@media (min-width: 768px) {
    .aume-scd {
        display: block;
    }

    /* Aby lišta nezakrývala konec stránky. Třídu přidává JS už při
       inicializaci, takže nevzniká poskočení layoutu během scrollování. */
    body.aume-scd-ready {
        padding-bottom: var(--aume-scd-height);
    }
}

/* Úzký desktop / tablet na šířku: podtitulek a náhled produktu jdou pryč,
   ať zbyde místo na cenu a tlačítko. Hvězdičky, procento, název, cena
   a tlačítko – to podstatné – zůstávají. */
@media (min-width: 768px) and (max-width: 991px) {
    .aume-scd__in {
        gap: 14px;
        padding: 10px 16px;
    }

    .aume-scd__sub,
    .aume-scd__thumb {
        display: none;
    }

    .aume-scd__buy {
        gap: 12px;
    }

    .aume-scd__price {
        font-size: 16px;
    }

    .aume-scd__btn {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
}

/* --- Bublina chatu Smartsupp nad lištou ---------------------------------- */
/* Posouvá se vlastností bottom, ne transformem – ze stejného důvodu jako
   u mobilní lišty (podrobně v hlavičce 02-sticky-kosik-mobil.js): Smartsupp
   si inline styl obalu při každé změně viewportu přepisuje celý najednou.
   Autorské pravidlo s !important přebije inline zápis bez !important vždy.

   Selektor je dvojí schválně: .aume-scd-chat-lift přidává JS (třídu si
   Smartsupp při přepisu stylu nesmaže), atribut data-testid pokrývá i
   případ, kdy si Smartsupp obal mezitím vyrobí znovu.

   Třídy jsou vlastní (aume-scd-*), ne sdílené se souborem 02 – obě lišty
   totiž existují v DOM na obou šířkách a sdílená proměnná by znamenala,
   že si navzájem přepisují hodnotu. Pravidla jsou navíc ve vzájemně se
   vylučujících media query, takže se nikdy neuplatní obě naráz. */
@media (min-width: 768px) {

    body.aume-scd-ready .aume-scd-chat-lift,
    body.aume-scd-ready div[data-testid="widgetButtonFrame"] {
        transition: bottom .24s ease !important;
    }

    body.aume-scd-visible .aume-scd-chat-lift,
    body.aume-scd-visible div[data-testid="widgetButtonFrame"] {
        bottom: var(--aume-scd-chat-lift, 104px) !important;
    }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
    body.aume-scd-ready .aume-scd-chat-lift,
    body.aume-scd-ready div[data-testid="widgetButtonFrame"] {
        transition: none !important;
    }
}