/* doporuceni-v9.css — vlastní doporučování (app.barevnapaleta.cz/doporuceni), šablona Rubin.
 * Barvy a styl jako box výhod .bp-benefits: akcent #2ca2c6, rámeček #e6e4f0, pozadí #faf9fd, radius 8 px,
 * karty bílé s rámečkem #eee. Písmo Exo 2 všude (i button, input, a — jinak spadnou do Arialu).
 * Specifičnost: html body .bp-reco … — styly Rubinu na button jinak přebijí barvy (na mobilu bílý text na bílé).
 * Skrývání cizích bloků jen se třídami bp-reco + bp-ab-X na <html> (nastavuje je inline skript v hlavičce). */

/* ── Skrytí cizích bloků (hned při načtení, bez přebliknutí) ─────────────────────────── */
/* Košík: všechny skupiny (A i B mají náš blok, C žádná doporučení). */
html.bp-reco .cart-table [class*="related"],
html.bp-reco .cart-table [class*="Related"],
html.bp-reco .up-cart-header-cart,
html.bp-reco .up-cart-header-cart ~ .up-cart-products,
html.bp-reco .fvDoplnek,
html.bp-reco.bp-page-cart #lb-recommend-element-basket { display: none !important; }
/* Luigi doporučovací boxy (ne vyhledávání a našeptávač): skupina B a C. Podle id bloků — třídu lb-recommender-wrapper
   dává Luigi celému #content-wrapper, skrývat podle ní nelze (zmizela by celá stránka). */
html.bp-ab-B [id^="lb-recommend-element-"], html.bp-ab-C [id^="lb-recommend-element-"],
html.bp-ab-B #lb-detail-rc, html.bp-ab-C #lb-detail-rc,
html.bp-ab-B #lb-rc-basket-popup, html.bp-ab-C #lb-rc-basket-popup,
html.bp-ab-B [id^="lb-"][id$="-rc"], html.bp-ab-C [id^="lb-"][id$="-rc"] { display: none !important; }
/* Kontrolní skupina C: ani záložky Shoptetu Podobné / Související na detailu. */
html.bp-ab-C .shp-tabs [href="#productsAlternative"], html.bp-ab-C .shp-tabs [href="#productsRelated"],
html.bp-ab-C #productsAlternative, html.bp-ab-C #productsRelated { display: none !important; }
/* Okno po přidání: Shoptetí „Související“ v B (místo něj náš blok) a v C; v A zůstává. */
html.bp-ab-B #colorbox .advanced-order #products.products-related,
html.bp-ab-C #colorbox .advanced-order #products.products-related { display: none !important; }
/* Košík: Shoptetí „Objednejte ještě za … a budete mít dopravu ZDARMA“ v Dárky a slevy, když je zobrazená naše lišta. */
html.bp-fs-shown .cart-content .extra.delivery { display: none !important; }
/* Přidání z našeho bloku v košíku: okno „Přidáno do košíku“ se neukáže (JS ho hned zavře). */
html.bp-quiet #colorbox, html.bp-quiet #cboxOverlay { visibility: hidden !important; opacity: 0 !important; }

/* Žlutá záložka „Ověřeno zákazníky“ vlevo na mobilu nepřekrývá obsah (zmenšená a přitisknutá k okraji). */
@media (max-width: 767px) {
    html.bp-reco .bp-reco-badge-small { transform: scale(.62) !important; transform-origin: left bottom !important; opacity: .9; }
}

/* ── Společné ──────────────────────────────────────────────────────────────────────── */
html body .bp-reco, html body .bp-reco * { font-family: "Exo 2", sans-serif; box-sizing: border-box; }
html body .bp-reco button, html body .bp-reco input, html body .bp-reco a { font-family: inherit; }
html body .bp-reco { background: #faf9fd; border: 1px solid #e6e4f0; border-radius: 8px; padding: 16px 18px; margin: 16px 0; color: #333; }
html body .bp-reco h2.bp-reco-h { font-size: 17px; font-weight: 600; margin: 0 0 12px; padding: 0; line-height: 1.3; color: #222; text-transform: none; letter-spacing: 0; }
html body .bp-reco-reserve { min-height: 290px; }
/* Bloky nikdy širší než rodič: na mobilu bývají flex položkou (košík) a výchozí min-width: auto by je roztáhl na šířku
   řádku karet — stránka pak přeteče do strany a prohlížeč ji oddálí (mobilní test 26. 10. 2026). Posouvá se jen řádek karet. */
html body .bp-reco { min-width: 0; max-width: 100%; box-sizing: border-box; }
html body .bp-reco .bp-reco-row { min-width: 0; max-width: 100%; }

/* Řada karet: desktop mřížka, mobil vodorovně posuvná (scroll-snap, ~2,5 karty). */
html body .bp-reco .bp-reco-row { display: grid; grid-template-columns: repeat(var(--bp-cols, 4), minmax(0, 1fr)); gap: 10px; }
html body .bp-reco .bp-reco-card { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; min-width: 0; }
html body .bp-reco .bp-reco-img { display: block; height: 90px; margin: 0 auto 8px; text-align: center; }
html body .bp-reco .bp-reco-img img { height: 90px; width: 90px; object-fit: contain; display: inline-block; }
html body .bp-reco a.bp-reco-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 400;
    line-height: 1.35; color: #333; text-decoration: none; min-height: 3.9em; }
html body .bp-reco a.bp-reco-name:hover { color: #2ca2c6; text-decoration: underline; }
html body .bp-reco .bp-reco-var { font-size: 12px; color: #777; margin-top: 2px; min-height: 1.3em; }
html body .bp-reco .bp-reco-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 8px; flex-wrap: wrap; }
html body .bp-reco .bp-reco-price { font-size: 15px; font-weight: 600; color: #2ca2c6; white-space: nowrap; }

/* Tlačítko „+ Přidat“ / „Vybrat“: obrysové, bílé pozadí, rámeček a text #2ca2c6. */
html body .bp-reco button.bp-reco-add, html body .bp-reco a.bp-reco-add {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    background: #fff !important; color: #2ca2c6 !important; border: 1px solid #2ca2c6 !important; border-radius: 999px !important;
    padding: 4px 12px !important; min-height: 30px; font-size: 13px !important; font-weight: 500 !important; line-height: 1.2 !important;
    text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; cursor: pointer; text-decoration: none !important;
    white-space: nowrap; width: auto; height: auto; margin: 0; }
html body .bp-reco button.bp-reco-add:hover, html body .bp-reco a.bp-reco-add:hover { background: #2ca2c6 !important; color: #fff !important; }
html body .bp-reco button.bp-reco-add.bp-done { background: #2ca2c6 !important; color: #fff !important; }
html body .bp-reco button.bp-reco-add[disabled] { opacity: .6; cursor: default; }

/* ── Detail: upsell ────────────────────────────────────────────────────────────────── */
html body a.bp-reco-up { display: flex; align-items: center; gap: 12px; border: 1px dashed #b9b4d6; border-radius: 8px; padding: 8px 12px;
    margin: 0 0 12px; background: #fff; color: #333; text-decoration: none; font-family: "Exo 2", sans-serif; }
html body a.bp-reco-up * { font-family: inherit; }
html body a.bp-reco-up:hover { border-color: #2ca2c6; }
html body a.bp-reco-up img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 44px; }
html body a.bp-reco-up .bp-up-txt { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.35; color: #555; }
html body a.bp-reco-up .bp-up-txt strong { color: #222; font-weight: 600; }
html body a.bp-reco-up .bp-up-diff { display: block; font-size: 13px; color: #777; }
html body a.bp-reco-up .bp-up-price { flex: 0 0 auto; font-weight: 600; color: #2ca2c6; white-space: nowrap; font-size: 14px; }

/* ── Detail: Často kupováno spolu ──────────────────────────────────────────────────── */
/* Desktop: cena vlevo a „+ Přidat“ vpravo na jednom řádku (užší tlačítko); karta užší než ~120 px → cena nad tlačítkem. */
@media (min-width: 992px) {
    html body .bp-reco-fbt { margin-top: 18px; }
    html body .bp-reco-fbt .bp-reco-card { padding: 8px; container-type: inline-size; }
    html body .bp-reco-fbt .bp-reco-foot { flex-wrap: nowrap; gap: 4px; }
    html body .bp-reco-fbt .bp-reco-price { font-size: 14px; }
    html body .bp-reco-fbt button.bp-reco-add, html body .bp-reco-fbt a.bp-reco-add { padding: 3px 8px !important; font-size: 12px !important; min-height: 26px; }
    @container (max-width: 104px) {
        html body .bp-reco-fbt .bp-reco-foot { flex-direction: column; align-items: stretch; }
        html body .bp-reco-fbt button.bp-reco-add, html body .bp-reco-fbt a.bp-reco-add { width: 100%; }
    }
}

/* ── Košík ─────────────────────────────────────────────────────────────────────────── */
/* Na mobilu Shoptet řadí prvky košíku vlastností order (tabulka −5, Doručení −4, souhrn −3, Dárky a slevy −2,
   Bonusový program 0; .cart-content a .col-md-8 mají display: contents) — −5 = hned za tabulkou položek. */
html body .bp-reco-cart { order: -5; }
html body .bp-reco-cart .bp-fs { margin: 0 0 14px; font-size: 14px; color: #444; }
html body .bp-reco-cart .bp-fs strong { color: #2ca2c6; font-weight: 600; }
html body .bp-reco-cart .bp-fs-bar { height: 8px; background: #e6e4f0; border-radius: 999px; margin-top: 6px; overflow: hidden; }
html body .bp-reco-cart .bp-fs-bar span { display: block; height: 100%; background: #2ca2c6; border-radius: 999px; transition: width .3s; }
html body .bp-reco-cart .bp-fs.bp-fs-ok { color: #2a8a3e; font-weight: 600; }
html body .bp-reco-cart .bp-tips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; border-top: 1px solid #e6e4f0; margin-top: 14px; padding-top: 12px; }
html body .bp-reco-cart .bp-tips-label { font-size: 14px; font-weight: 600; color: #333; margin-right: 4px; }
html body .bp-reco button.bp-tip { display: inline-flex; align-items: center; gap: 6px; background: #fff !important; color: #2ca2c6 !important;
    border: 1px solid #2ca2c6 !important; border-radius: 999px !important; padding: 3px 12px 3px 4px !important; font-size: 13px !important;
    font-weight: 500 !important; min-height: 30px; cursor: pointer; box-shadow: none !important; text-transform: none !important; }
html body .bp-reco button.bp-tip.bp-on { background: #2ca2c6 !important; color: #fff !important; }
html body .bp-reco button.bp-tip svg { width: 22px; height: 22px; flex: 0 0 22px; }

/* ── Okno po přidání do košíku ─────────────────────────────────────────────────────── */
html body .bp-reco-modal { margin: 16px 0 0; padding: 14px 14px 10px; }
html body .bp-reco-modal .bp-reco-row { --bp-cols: 6; }
html body .bp-reco-modal .bp-reco-img, html body .bp-reco-modal .bp-reco-img img { height: 76px; }
html body .bp-reco-modal .bp-reco-img img { width: 76px; }

/* ── Posuvník řádku karet: tenká šedá lišta s jezdcem a šipkami (JS ji ukáže jen při přetečení) ── */
html body .bp-reco .bp-reco-scroll { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
html body .bp-reco .bp-scroll-track { position: relative; flex: 1 1 auto; height: 6px; background: #e6e4f0; border-radius: 999px; }
html body .bp-reco .bp-scroll-thumb { position: absolute; top: 0; height: 100%; background: #9e9ab3; border-radius: 999px; }
html body .bp-reco button.bp-scroll-btn { flex: 0 0 auto; width: 24px; height: 24px; padding: 0 !important; border: 0 !important; background: transparent !important;
    color: #777 !important; font-size: 20px !important; line-height: 1 !important; cursor: pointer; box-shadow: none !important; min-height: 0; }
html body .bp-reco button.bp-scroll-btn[disabled] { color: #ccc !important; cursor: default; }
html body .bp-reco .bp-reco-row { scrollbar-width: none; }
html body .bp-reco .bp-reco-row::-webkit-scrollbar { display: none; }

/* ── Mobil / tablet: vodorovně posuvné karty ───────────────────────────────────────── */
@media (max-width: 991px) {
    html body .bp-reco { padding: 14px 12px; }
    html body .bp-reco .bp-reco-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
        gap: 10px; padding-bottom: 2px; }
    html body .bp-reco .bp-reco-card { flex: 0 0 40%; scroll-snap-align: start; }
    html body .bp-reco .bp-reco-foot { flex-direction: column; align-items: stretch; }
    html body .bp-reco .bp-reco-price { text-align: left; }
    html body .bp-reco button.bp-reco-add, html body .bp-reco a.bp-reco-add { width: 100%; }
}
/* Dotyková místa na mobilu: tlačítka a dýško aspoň 40 px na výšku, šipky posuvníku plocha 40 × 40 px (znak stejně malý,
   záporný okraj drží lištu v původní výšce). */
@media (max-width: 767px) {
    html body .bp-reco button.bp-reco-add, html body .bp-reco a.bp-reco-add, html body .bp-reco button.bp-tip { min-height: 40px; }
    html body .bp-reco button.bp-scroll-btn { width: 40px; height: 40px; margin: -8px; }
}
@media (min-width: 992px) {
    html body .bp-reco-modal .bp-reco-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
    html body .bp-reco-modal .bp-reco-card { flex: 0 0 calc((100% - 50px) / 6); scroll-snap-align: start; }
}