deg na konkrétním obrázku) */
.st-tilt {
--tilt: -6deg;
transform: rotate(var(--tilt));
}
/* CTA prvek — výrazný odkaz na kalkulačku krmné dávky (nebo jiný CTA) */
.st-cta {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
background: #8dd5fa;
color: #000;
border-radius: 10px;
padding: 20px 24px;
margin: 24px 0;
}
.st-cta__text {
font-size: 16px;
font-weight: 600;
line-height: 1.5;
margin: 0;
}
.st-cta__text strong {
font-weight: 700;
}
.st-cta a.st-btn {
display: inline-block;
flex-shrink: 0;
background: #c7b390;
color: #000;
border: 1px solid #c7b390;
border-radius: 50px;
padding: 10px 22px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.2s, color 0.2s;
}
.st-cta a.st-btn:hover {
background: transparent;
color: #000;
}
@media (max-width: 480px) {
.st-cta {
flex-direction: column;
align-items: flex-start;
}
}
/* Zobrazení tlačítka přihlášení i na mobilu (Samba ho defaultně
v úzké hlavičce skrývá). */
@media (max-width: 991px) {
.top-nav-button-login {
display: inline-flex !important;
}
}
/* Základní strukturální CSS pro Owl Carousel (.dogvote-carousel a další
owlCarousel slidery v bibi-global2-js2.js) — pro jistotu, kdyby se
knihovní CSS z nějakého důvodu nenačetla. Zabraňuje horizontálnímu
přetečení auto-posuvného slideru s hodnocením. */
.owl-carousel {
display: block;
width: 100%;
}
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
width: 100%;
}
.owl-carousel .owl-stage {
display: flex;
}
.owl-carousel .owl-item {
flex: 0 0 auto;
min-width: 0;
}
/* Tvrdé ořezání slideru s hodnocením (.dogvote-carousel) - jistota proti
horizontálnímu přetečení bez ohledu na to, co uvnitř (obsah se navíc
dotahuje přes AJAX z /hodnoceni-new/, mimo naše CSS/JS soubory). */
.dogvote-carousel {
overflow-x: hidden;
max-width: 100%;
}
.dog-vote-wrap,
.dog-vote-wrap .right-block {
max-width: 100%;
box-sizing: border-box;
}
.rating-car-item .citate,
.rating-car-item .citate p {
overflow-wrap: break-word;
word-break: break-word;
}
/* SKUTEČNÁ příčina přetečení na mobilu: .dog-vote-wrap je flex řádek,
.left-block (obrázek 670x420) a .right-block (Bootstrap .container)
jsou flex položky, které se defaultně nesmí zmenšit pod velikost
svého obsahu (min-width:auto). Obrázek tak natáhl celý řádek přes
šířku obrazovky. Ověřeno 2026-07-28. */
.dog-vote-wrap {
max-width: 100%;
}
.dog-vote-wrap.container,
.dog-vote-wrap .right-block.container {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.dog-vote-wrap > .left-block,
.dog-vote-wrap > .right-block {
min-width: 0;
}
.dog-vote-wrap .left-block img {
max-width: 100%;
height: auto;
}
/* ============================================================
MOBIL: 2 bannery vedle sebe (.next-to-carousel-banners) a
2 produkty vedle sebe v homepage slidérech (.product-slider),
místo výchozí 1 položky na mobilu.
============================================================ */
@media (max-width: 767px) {
.next-to-carousel-banners {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 10px;
}
.next-to-carousel-banners .banner-wrapper {
width: 50%;
flex: 0 0 50%;
}
/* .product-slider .products-block .product {width:50%!important;}
ODSTRANĚNO — % se počítalo vůči .products-block (pás se všemi
produkty za sebou, řádově tisíce px), ne vůči viditelnému oknu,
takže položky byly obrovské a rozbily layout. Slider řídí JS podle
atributu data-columns-mobile="1" na kontejneru — správná oprava je
buď tenhle atribut změnit na "2" v administraci (pokud to widget
"Produkty" nabízí), nebo zásah do JS, ne čisté CSS. Ověřeno 2026-08-28. */
}
/* ============================================================
MOBIL: větší písmo u běžného textu (popisky produktů, kategorií,
blog, FAQ). Samba má na spoustě těchto textů (např. .p-desc u
popisků produktů) vlastní tříděné selektory s vyšší specificitou
než obyčejné p/li, které by jinak náš zápis přebily — proto
!important. Řádkové prvky (strong/b/span) dřív spoléhaly na
dědění velikosti po , ale to někde přebíjelo jiné pravidlo —
proto mají teď vlastní stejnou velikost explicitně. Ověřeno 2026-09-09.
============================================================ */
@media (max-width: 767px) {
p, li, strong, b {
font-size: 18px !important;
line-height: 1.6 !important;
}
/* span je použitý po celém webu i pro drobné UI prvky (ceny, ikony,
štítky) - proto ho omezujeme jen na kontejnery s běžným textem
(popisky produktů, kategorií, blogu, FAQ, naše šablona popisků). */
.p-desc,
.p-desc span,
.description-inner,
.description-inner span,
.extended-description,
.extended-description span,
.category-perex,
.category-perex span,
.category__secondDescription,
.category__secondDescription span,
.o-nas-text-block,
.o-nas-text-block span,
.news-item-detail,
.news-item-detail span,
.faq-block-content,
.faq-block-content span,
.st-media-block__text,
.st-media-block__text span,
.st-info-box__text,
.st-cta__text {
font-size: 18px !important;
line-height: 1.6 !important;
}
}
/* Univerzální oprava (všechny šířky obrazovky): / uvnitř
běžného textu měly odjinud vynucenou vlastní velikost místo
zdědění po rodiči - opraveno zpět na "inherit", ať vždy odpovídá
okolnímu textu bez ohledu na to, jak velký text zrovna je. */
p strong, p b, li strong, li b {
font-size: inherit !important;
}
/* Benefity na homepage (benefitBanner) - na mobilu 2x2 místo 4 pod sebou */
@media (max-width: 767px) {
.benefitBanner.position--benefitHomepage {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.benefitBanner.position--benefitHomepage .benefitBanner__item {
flex: 0 0 calc(50% - 8px);
width: calc(50% - 8px);
}
}
/* Text popisu kategorie - blok useknutý 10 % šířky stránky z každé
strany (vystředěný), text uvnitř zarovnaný doleva. */
.category-perex,
.category__secondDescription {
max-width: 80% !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: left !important;
}
/* Pozadí patičky - přesunuto sem z inline