/* ==================================================================
   BeOrganic.sk – CSS opravy (10. 5. 2026)
   Selektory ověřené přímo na živém webu (DevTools inspect).

   KAM VLOŽIT:
   Admin ClickEshop → CSS soubory → přidat NOVÝ soubor např.
   `custom_fixes_2026_05.css` a vložit tam obsah.
   (Nebo přidat na konec existujícího custom CSS,
    např. `visual_fixes.css` – bude se aplikovat společně.)

   POŘADÍ NAČTENÍ: tento soubor musí být načten POZDĚJI než
   `visual_fixes.css` a `mobile_complete_fix.css`, aby pravidla
   přepsala existující styly (proto !important u většiny pravidel).
   ================================================================== */


/* ╔════════════════════════════════════════════════════════════════╗
   ║ BOD 4 – Seborea v sekci „Riešenia pre problémy pleti"          ║
   ║                                                                ║
   ║ Příčina: v HTML je Seborea zapsaná takto:                      ║
   ║   <div class="bo-skin-box active-hover">                       ║
   ║ Třída `active-hover` přidává:                                  ║
   ║   – transform: translateY(-4px)   → posun nahoru               ║
   ║   – výrazný zelený box-shadow      → vysvícení / glow          ║
   ║                                                                ║
   ║ NEJLEPŠÍ ŘEŠENÍ: odstranit `active-hover` z HTML v admin       ║
   ║ panelu (CMS → blok „Riešenia pre problémy pleti").             ║
   ║                                                                ║
   ║ CSS níže je záloha, pokud HTML nemůžeš upravit. OTESTOVÁNO     ║
   ║ live na webu – funguje, Seborea se zarovná s ostatními.        ║
   ╚════════════════════════════════════════════════════════════════╝ */

.bo-skin-box.active-hover {
    transform: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

/* Stejný efekt zachovat jen při skutečném hoveru, ne staticky */
.bo-skin-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 20px rgba(115, 134, 113, 0.35);
    transition: all 0.25s ease;
}


/* ╔════════════════════════════════════════════════════════════════╗
   ║ BOD 6 – úklid mobilního menu                                   ║
   ║                                                                ║
   ║ Duplicitní položky v <nav id="ce_menu">:                       ║
   ║   /kosik/m5                  – Košík (neprehodí nikam)         ║
   ║   /vyhodne-balenia/m6        – Výhodné balenia (duplikát)      ║
   ║   /vyhodne-balenia/.../m7    – Výhodné balenia (duplikát)      ║
   ║   /oblubene/m8               – Obľúbené (duplikát)             ║
   ║   /oblubene/m9               – Obľúbené (duplikát)             ║
   ║                                                                ║
   ║ NEJLEPŠÍ ŘEŠENÍ: smazat položky v admin → Vzhľad → Menu.       ║
   ║ CSS níže je záloha.                                            ║
   ╚════════════════════════════════════════════════════════════════╝ */

/* Skryje celý <li> s odkazem (funguje díky :has() ve všech moderních
   prohlížečích od 2023 – Chrome, Safari, Firefox, Edge) */
#ce_menu li:has(> a[href="/kosik/m5"]),
#ce_menu li:has(> a[href="/vyhodne-balenia/m6"]),
#ce_menu li:has(> a[href="/vyhodne-balenia/vyhodne-balenia/m7"]),
#ce_menu li:has(> a[href="/oblubene/m8"]),
#ce_menu li:has(> a[href="/oblubene/m9"]) {
    display: none !important;
}

/* Fallback pro starší prohlížeče – skryje aspoň odkaz */
#ce_menu a[href="/kosik/m5"],
#ce_menu a[href="/vyhodne-balenia/m6"],
#ce_menu a[href="/vyhodne-balenia/vyhodne-balenia/m7"],
#ce_menu a[href="/oblubene/m8"],
#ce_menu a[href="/oblubene/m9"] {
    display: none !important;
}


/* ╔════════════════════════════════════════════════════════════════╗
   ║ BOD 7 – „Fotky od zákazníkov" – sjednocení dlaždic             ║
   ║                                                                ║
   ║ HTML struktura (zjištěno z webu):                              ║
   ║   .bo-customers-wrap                                           ║
   ║     > .bo-customers-h2                                         ║
   ║     > .bo-customers-sub                                        ║
   ║     > .bo-customers-content                                    ║
   ║         > .bo-customers-arrow.bo-customers-arrow-prev          ║
   ║         > .bo-customers-grid                                   ║
   ║             > .bo-customers-item  (× 4)                        ║
   ║                 > img                                          ║
   ║         > .bo-customers-arrow.bo-customers-arrow-next          ║
   ║                                                                ║
   ║ Stávající CSS v mobile_complete_fix.css už řeší horizontal     ║
   ║ scroll na mobilu (`flex: 0 0 75%`). Doplníme jen sjednocení    ║
   ║ rozměrů, aby placeholdery a obrázky nebyly různě velké.        ║
   ╚════════════════════════════════════════════════════════════════╝ */

/* Karta s fotkou – pevný poměr stran, aby se dlaždice nelámaly */
.bo-customers-item {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* Obrázek – vyplní celou kartu, ořízne se na střed */
.bo-customers-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 14px;
}

/* Pro grid layout na desktopu – sjednotit šířku všech karet */
@media (min-width: 769px) {
    .bo-customers-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }
    .bo-customers-item {
        flex: unset !important;
        min-width: 0 !important;
    }
}


/* ╔════════════════════════════════════════════════════════════════╗
   ║ BOD 8 – „Vložiť" (slevový kupón) – mobil, text nevycentrován   ║
   ║                                                                ║
   ║ ClickEshop pro slevové kupóny standardně používá:              ║
   ║   <input name="txtb_voucher" ...>                              ║
   ║   <input type="submit" name="btn_voucherAdd" value="Vložiť">   ║
   ║                                                                ║
   ║ Selektor pokrývá obě varianty (input i button) i obecnější     ║
   ║ ClickEshop konvence v košíku/objednávce.                       ║
   ╚════════════════════════════════════════════════════════════════╝ */

@media (max-width: 768px) {

    input[type="submit"][name*="voucher"],
    button[name*="voucher"],
    input[type="submit"][name*="coupon"],
    button[name*="coupon"],
    input[type="submit"][value="Vložiť"],
    input[type="submit"][value="Vlozit"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 0 16px !important;
        height: 38px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
}


/* ╔════════════════════════════════════════════════════════════════╗
   ║ BOD 9 – „Odoslať objednávku s povinnosťou platby" (mobil)      ║
   ║                                                                ║
   ║ ClickEshop standardně používá:                                 ║
   ║   <input type="submit" name="btn_orderSend"                    ║
   ║          value="Odoslať objednávku s povinnosťou platby">      ║
   ║                                                                ║
   ║ Tlačítko je dlouhé a na úzkém displeji se text ořeže zprava.   ║
   ║ Řešení: roztáhnout na 100 % šířky + zmenšit font + povolit     ║
   ║ zalomení.                                                      ║
   ╚════════════════════════════════════════════════════════════════╝ */

@media (max-width: 768px) {

    input[type="submit"][name="btn_orderSend"],
    button[name="btn_orderSend"],
    input[type="submit"][value*="Odosla"],
    button[type="submit"][value*="Odosla"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 14px 12px !important;
        font-size: 0.9rem !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        word-break: keep-all !important;
        text-align: center !important;
        height: auto !important;
        min-height: 48px !important;
    }
}

/* Extra malé telefony (≤ 380 px) – ještě zmenšit písmo */
@media (max-width: 380px) {

    input[type="submit"][name="btn_orderSend"],
    button[name="btn_orderSend"],
    input[type="submit"][value*="Odosla"] {
        font-size: 0.82rem !important;
        padding: 12px 8px !important;
    }
}