/*
Theme Name: AUTO DASPOL s.r.o.
Author: Pavel Hulva
Author URI:
Description: Společnost AUTO DASPOL s.r.o.je autorizovaným prodejcem a opravcem vozů Kia od roku 2023.
Version: 1.0
*/
/* Fonty (Google Poppins + Adobe Typekit) jsou načítány přes wp_enqueue_style ve functions.php. */
body {
font-family: "Poppins", sans-serif!important;
}
img.bob-model-detail {
max-height: 30px!important;
}
/* --- Btns --- */
.btn-light {
color: #000!important;
border-radius: 0px!important;
font-family: "Manop", sans-serif!important;
font-weight: 400!important;
font-size: 1.2rem!important;
padding-left: 40px!important;
padding-right: 40px!important;
padding-top: 9px!important;
padding-bottom: 9px!important;
}
.btn-light-big {
color: #000!important;
border-radius: 0px!important;
background-color: #FFF!important;
box-shadow: none!important;
font-family: "Manop", sans-serif!important;
font-weight: 400!important;
font-size: 1.4rem!important;
padding-left: 40px!important;
padding-right: 40px!important;
padding-top: 9px!important;
padding-bottom: 9px!important;
}
@media (max-width: 991.98px) {
.btn-light-big {
font-size: 1rem!important;
}}
@media (max-width: 767.98px) {
.btn-light-big {
font-size: 0.7rem!important;
padding-left: 20px!important;
padding-right: 20px!important;
padding-top: 5px!important;
padding-bottom: 5px!important;
}}
.btn-light-big:hover {
background-color: #ececec!important;
}
@media (max-width: 991.98px) {
.btn-light {
font-size: 1.2rem!important;
}}
@media (max-width: 600px) {
.btn-light {
font-size: 0.9rem!important;
}}
.btn-outline-dark {
color: #000!important;
border-radius: 0px!important;
font-family: "Manop", sans-serif!important;
font-weight: 400!important;
font-size: 1.1rem!important;
padding-top: 10px!important;
padding-bottom: 10px!important;
padding-left: 30px!important;
padding-right: 30px!important;
background-color: #FFF!important;
}
@media (max-width: 991.98px) {
.btn-outline-dark {
font-size: 0.9rem!important;
padding-top: 5px!important;
padding-bottom: 5px!important;
padding-left: 15px!important;
padding-right: 15px!important;
}}
.btn-outline-dark:hover {
color: #FFF!important;
background-color: #000!important;
}
.bob-landing {
background-color: #fff!important;
overflow: hidden!important;
padding-bottom: 60px!important;
}
.bob-logo {
margin: 0 auto 40px!important;
}
/* --- Galerie karet --- */
.bob-gallery {
display: flex!important;
justify-content: center!important;
align-items: stretch!important;
gap: 24px!important; /* mezery mezi kartami */
height: 75vh!important;
min-height: 520px!important;
}
.bob-card {
flex: 1!important;
position: relative!important;
border-radius: 0px!important;
overflow: hidden!important;
background-size: cover!important;
background-position: center!important;
transition: all 0.6s ease!important;
cursor: pointer!important;
display: flex!important;
align-items: flex-end!important;
justify-content: center!important;
}
/* Efekt při hoveru – pouze na desktopu */
@media (min-width: 992px) {
.bob-card {
filter: brightness(0.6)!important;
}
.bob-card.active {
flex: 2.3!important;
filter: brightness(1)!important;
}
.bob-card:not(.active) {
filter: brightness(0.4)!important;
}
}
/* Overlay s textem */
.bob-overlay {
position: absolute!important;
bottom: 0!important;
left: 0!important;
right: 0!important;
padding: 40px 20px!important;
color: #fff!important;
text-align: center!important;
opacity: 0!important;
transition: opacity 0.5s ease!important;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%)!important;
}
.bob-card.active .bob-overlay {
opacity: 1!important;
}
/* --- Responsivita --- */
@media (max-width: 991.98px) {
.bob-gallery {
flex-direction: column!important;
height: auto!important;
gap: 16px!important;
}
.bob-card {
width: 100%!important;
aspect-ratio: 1 / 1!important; /* čtverec */
flex: 1 !important;
filter: none !important;
position: relative!important;
}
/* čistý vzhled bez overlaye přes celou plochu */
.bob-overlay {
position: absolute!important;
bottom: 0!important;
left: 0!important;
right: 0!important;
padding: 20px!important;
background: none!important;
color: #fff!important;
text-align: center!important;
opacity: 1!important;
display: flex!important;
flex-direction: column!important;
align-items: center!important;
justify-content: flex-end!important; /* posune tlačítko dolů */
}
.bob-overlay .btn {
background-color: #fff!important;
color: #000!important;
border: none!important;
padding: 7px 20px!important;
border-radius: 0px!important;
font-weight: 500!important;
box-shadow: 0 2px 8px rgba(0,0,0,0.15)!important;
}
.bob-overlay .btn:hover {
background-color: #000!important;
color: #fff!important;
}
}
/* --- Logos --- */
.bob-logos {
background-color: #fff!important;
padding-top: 20px!important;
padding-bottom: 20px!important;
}
.bob-logo-row {
display: flex!important;
justify-content: space-between!important; /* rovnoměrně rozložená loga */
align-items: center!important;
flex-wrap: nowrap!important;
max-width: 100%!important; /* drží se uvnitř containeru */
}
.brand-logo {
opacity: 0.45!important;
filter: grayscale(100%)!important;
transition: all 0.3s ease!important;
cursor: pointer!important;
flex-shrink: 0!important;
}
.brand-logo:hover {
opacity: 1!important;
filter: grayscale(0%)!important;
transform: scale(1.05)!important;
}
.brand-logo-kia {
opacity: 0.45!important;
filter: grayscale(100%)!important;
transition: all 0.3s ease!important;
cursor: pointer!important;
flex-shrink: 0!important;
}
.brand-logo-kia:hover {
opacity: 1!important;
filter: grayscale(0%)!important;
}
/* Divider – plná šířka stránky */
.bob-divider {
width: 100%!important;
height: 1px!important;
background-color: rgba(0,0,0,1)!important;
margin-top: 50px!important;
}
/* --- Sekce novinek --- */
h2 {
font-size: 2.2rem!important;
font-weight: 600!important;
font-family: "Poppins", sans-serif!important;
}
.bob-news {
background-color: #fff!important;
}
.news-card {
border: 1px solid #e5e7eb!important;
border-radius: 10px!important;
overflow: hidden!important;
transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1)!important;
background-color: #EFEFEF!important;
margin-bottom: 10px!important;
}
.news-body {
padding: 20px!important;
text-align: left!important;
}
.news-body > h3 {
font-size: 1.3rem!important;
font-weight: 600!important;
font-family: "Poppins", sans-serif!important;
}
.news-body > p {
font-size: 0.95rem!important;
font-family: "Poppins", sans-serif!important;
font-weight: 300!important;
color: #000!important;
}
.read-more {
color: #000!important;
font-weight: 500!important;
text-decoration: none!important;
transition: color 0.3s ease!important;
font-family: "Poppins", sans-serif!important!important;
}
.read-more:hover {
color: #444!important;
}
/* --- Responsivita --- */
@media (max-width: 767.98px) {
.news-body {
padding: 16px!important;
}
.news-body > h3 {
font-size: 1.3rem!important;
font-weight: 600!important;
font-family: "Poppins", sans-serif!important;
}
}
.badge {
margin-right: 7px!important;
border-radius: 0px!important;
padding-top: 5px!important;
padding-bottom: 5px!important;
padding-left: 10px!important;
padding-right: 10px!important;
}
.bob-footer {
background-color: #000!important;
font-size: 0.95rem!important;
}
.footer-link {
color: #FFF!important;
text-decoration: none!important;
transition: color 0.3s ease!important;
margin-left: 7px!important;
}
.footer-link:hover {
color: #B0B0B0!important;
}
.footer-social {
font-size: 1.25rem!important;
color: #fff!important;
transition: opacity 0.3s ease!important;
}
.footer-social:hover {
opacity: 0.7!important;
}
.footer-divider {
border-color: rgba(255, 255, 255, 0.15)!important;
}
.footer-links {
text-align: right!important;
}
.footer-links a {
white-space: nowrap!important;
}
.footer-content > h3 {
color: #FFF!important;
font-size: 1.3rem!important;
font-weight: 600!important;
}
.footer-content-site > h3 {
color: #FFF!important;
font-size: 1.2rem!important;
font-weight: 600!important;
}
/* --- Responsivita --- */
@media (max-width: 767.98px) {
.bob-footer {
text-align: center!important;
}
.footer-links {
justify-content: center!important;
}
.footer-logos {
justify-content: center!important;
}
}
.footer-logos {
display: flex!important;
align-items: center!important;
gap: 32px!important;
}
/* Divider mezi logy */
.footer-logo-divider {
width: 1px!important;
height: 24px!important;
background-color: rgba(255, 255, 255, 0.3)!important;
}
/* --- TABLET I MOBIL (<992px) --- */
@media (max-width: 991.98px) {
.footer-logos {
flex-direction: column!important; /* loga pod sebe */
justify-content: center!important;
align-items: center!important;
gap: 16px!important;
margin-top: 15px!important;
margin-bottom: 15px!important;
}
.footer-logos > img {
margin-top: 10px!important;
margin-bottom: 10px!important;
}
.footer-logo-divider {
display: none!important; /* divider pryč */
}
.footer-links {
justify-content: center!important;
text-align: center!important;
flex-direction: column!important; /* odkazy pod sebou */
gap: 8px!important;
margin-top: 20px!important;
}
.footer-links a {
display: block!important;
}
}
/* --- Navbar --- */
.navbar {
border-bottom: 1px solid rgba(0, 0, 0, 0.05)!important;
}
.navbar-brand img {
vertical-align: middle!important;
transition: opacity 0.3s ease!important;
max-width: 230px!important;
}
.navbar-brand img:hover {
opacity: 0.8!important;
}
/* Divider mezi logy */
.nav-logo-divider {
width: 1px!important;
height: 20px!important;
background-color: rgba(0, 0, 0, 0.2)!important;
}
/* Odkazy */
.navbar-nav .nav-link {
color: #000!important;
font-size: 1rem!important;
letter-spacing: 0.02em!important;
transition: color 0.3s ease!important;
font-family: "Poppins", sans-serif!important;
font-weight: 400!important;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
color: #7B7B7B!important;
}
/* --- Responsivita --- */
@media (max-width: 991.98px) {
.navbar-nav {
gap: 1rem!important;
}
.nav-logo-divider {
display: none!important;
}
}
@media (max-width: 767.98px) {
.navbar-brand img {
height: 18px!important;
}
.navbar {
padding: 0.75rem 0!important;
}
}
/* --- Mobilní menu --- */
@media (max-width: 991.98px) {
.navbar-nav {
padding-left: 1rem!important;
}
.navbar-nav .nav-item {
margin-bottom: 0!important; /* menší mezery mezi odkazy */
text-align: center!important;
}
.navbar-nav .nav-link {
font-size: 0.95rem!important; /* zmenšený text */
font-weight: 500!important;
padding: 0!important; /* méně vertikálního prostoru */
}
.nav-link-start {
margin-top: 20px!important;
}
}
/* Výchozí carousel-caption — kompletně řízeno přes .bob-hero-carousel pravidla níže.
Starý override s top: 10%, left: 12%, font-size: 4.2rem, "Manop" font byl odstraněn
(způsoboval, že titulek byl obří a vlevo nahoře). */
.carousel-caption {
color: #fff !important;
}
.carousel-caption h2 {
font-weight: 600 !important;
color: #fff !important;
}
.carousel-caption p {
color: #fff !important;
font-family: "Poppins", sans-serif !important;
font-weight: 400 !important;
}
.offer-card {
cursor: pointer!important;
transition: transform 0.3s ease!important;
}
.offer-card img {
transition: transform 0.5s ease!important;
}
.offer-card:hover img {
transform: scale(1.05)!important;
}
.offer-overlay {
position: absolute!important;
inset: 0!important;
background: rgba(0, 0, 0, 0.75)!important;
opacity: 0!important;
transition: opacity 0.4s ease!important;
display: flex!important;
align-items: center!important;
justify-content: center!important;
padding: 2rem!important;
text-align: left!important;
}
.offer-card:hover .offer-overlay {
opacity: 1!important;
}
.offer-content {
max-width: 95%!important;
color: #fff!important;
}
.offer-content > h3 {
font-size: 1.15rem!important;
font-weight: 600!important;
padding-bottom: 0.8rem!important;
color: #fff!important;
}
.offer-content > p {
font-size: 0.8rem!important;
font-weight: 300!important;
color: #fff!important;
}
.offer-content > a {
font-size: 0.8rem!important;
font-weight: 600!important;
color: #FFF!important;
}
.offer-title {
position: absolute!important;
bottom: 1rem!important;
left: 1rem!important;
right: 1rem!important;
font-size: 1.15rem!important;
font-weight: 600!important;
text-shadow: 0 1px 3px rgba(0,0,0,0.5)!important;
z-index: 1!important;
transition: opacity 0.3s ease!important;
}
/* Skrytí nadpisu při hoveru */
.offer-card:hover .offer-title {
opacity: 0!important;
}
.stock-card {
transition: all 0.3s ease!important;
background: #fff!important;
border-radius: 4px!important;
overflow: hidden!important;
}
.stock-card:hover {
transform: translateY(-2px)!important;
}
.stock-card img {
transition: transform 0.4s ease!important;
}
.stock-card .bg-light {
background-color: #EFEFEF!important;
}
.stock-detail > h3 {
font-size: 1.2rem!important;
font-weight: 600!important;
}
.badge-stock {
margin-right: 7px!important;
border-radius: 0px!important;
padding-top: 5px!important;
padding-bottom: 5px!important;
padding-left: 10px!important;
padding-right: 10px!important;
background-color: #FFF!important;
font-weight: 500!important;
font-size: 0.75rem!important;
}
.stock-price {
font-size: 1.15rem!important;
font-weight: 600!important;
margin-right: 10px!important;
}
.stock-vat {
font-size: 1rem!important;
font-weight: 300!important;
}
@media (max-width: 991.98px) {
.stock-detail > h3 {
font-size: 1.2rem!important;
font-weight: 600!important;
}
.stock-price {
font-size: 1.2rem!important;
font-weight: 600!important;
margin-right: 10px!important;
}
.stock-vat {
font-size: 0.8rem!important;
font-weight: 300!important;
}}
.service-card {
border-radius: 0px!important;
overflow: hidden!important;
cursor: pointer!important;
transition: transform 0.3s ease, box-shadow 0.3s ease!important;
}
.service-overlay {
position: absolute!important;
inset: 0!important;
display: flex!important;
align-items: flex-end!important;
justify-content: space-between!important;
padding: 1.5rem!important;
}
.service-content {
width: 100%!important;
display: flex!important;
align-items: center!important;
justify-content: space-between!important;
}
.service-content > h2 {
font-size: 1.7rem!important;
color: #FFF!important;
font-weight: 600!important;
}
@media (max-width: 991.98px) {
.service-content > h2 {
font-size: 1.2rem!important;
}}
.fullwidth-image {
position: relative!important;
width: 100%!important;
overflow: hidden!important;
}
.fullwidth-image img {
width: 100%!important;
height: auto!important;
display: block!important;
object-fit: cover!important;
}
/* Volitelně – pro větší výšku na desktopu */
@media (min-width: 992px) {
.fullwidth-image img {
max-height: 420px!important; /* přizpůsob šířce fotky */
}
}
.list-inline-item {
margin-left: 10px!important;
margin-bottom: 10px!important;
}
.list-inline-item > a:hover {
color: #7B7B7B!important;
}
/* Breadcrumb bar */
.bob-breadcrumb{
background:#000!important;
padding:18px 0!important;
}
.bob-breadcrumb .breadcrumb {
--bs-breadcrumb-divider: ">"!important;
font-size: 0.95rem!important;
margin-bottom: 0 !important;
}
.bob-breadcrumb .breadcrumb-item a{
color: rgba(255,255,255,0.85)!important;
text-decoration: none!important;
font-weight: 400!important;
}
.bob-breadcrumb .breadcrumb-item a:hover{
color:#fff!important;
}
.bob-breadcrumb .breadcrumb-item.active{
color:#fff!important;
font-weight: 400!important;
}
/* MOBILNÍ optimalizace drobečkové navigace
Problém: dlouhé názvy (detail vozu) se zalamují do 2+ řádků a "> " inline span má 20px padding.
Řešení: one-line s horizontálním scrollem, menší font, ellipsis na aktivní položce. */
@media (max-width: 767.98px){
.bob-breadcrumb{
padding: 10px 0 !important;
}
.bob-breadcrumb .breadcrumb{
font-size: 0.8rem !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
padding-bottom: 2px !important;
}
.bob-breadcrumb .breadcrumb::-webkit-scrollbar{
display: none; /* Chrome/Safari */
}
.bob-breadcrumb .breadcrumb-item{
white-space: nowrap !important;
flex-shrink: 0;
}
/* Inline "> " span separator: zmenšit 20px padding z PHP na 8px */
.bob-breadcrumb .breadcrumb span[style*="color"]{
padding-left: 8px !important;
padding-right: 8px !important;
flex-shrink: 0;
}
/* Aktuální položka (název stránky) — může být dlouhá; ellipsis drží v rozumných mezích */
.bob-breadcrumb .breadcrumb-item.active{
overflow: hidden;
text-overflow: ellipsis;
max-width: 60vw;
}
}
/* Hero */
.bob-page-hero{
width:100%!important;
overflow:hidden!important;
}
.bob-page-hero__img{
width:100%!important;
display:block!important;
height: clamp(240px, 42vw, 520px)!important;
object-fit: cover!important;
}
/* Intro */
.bob-page-intro{
padding: clamp(28px, 4vw, 56px) 0!important;
}
.bob-page-title{
font-weight: 600!important;
font-size: 2.4rem!important;
letter-spacing: -0.01em!important;
padding-bottom: 20px!important;
}
.bob-page-lead{
font-size: 1.5rem!important;
line-height: 1.45!important;
color:#000!important;
}
/* CTA stack */
.bob-cta-stack{
max-width: 420px!important;
margin-left: auto!important;
display:flex!important;
flex-direction: column!important;
gap: 22px!important;
padding-top: 8px!important;
}
/* Buttons (match screenshot style) */
.bob-btn-primary{
background:#000!important;
color:#fff!important;
border: 1px solid #000!important;
border-radius: 0!important;
padding: 18px 18px!important;
font-weight: 600!important;
}
.bob-btn-primary:hover {
background:#4c4c4c!important;
color:#fff!important;
border-color:#111!important;
}
.bob-btn-outline{
background: #FFF!important;
color:#000!important;
border: 1px solid rgba(0,0,0,0.45)!important;
border-radius: 0!important;
padding: 18px 40px!important;
font-weight: 600!important;
}
.bob-btn-outline:hover{
border-color:#e5e5e5!important;
color:#000!important;
background: #e5e5e5!important;
}
/* Responsive tweaks */
@media (max-width: 991.98px){
.bob-cta-stack{
margin-left: 0!important;
max-width: 520px!important;
}
}
@media (max-width: 575.98px){
.bob-breadcrumb{
padding:14px 0!important;
}
.bob-cta-stack{
gap: 14px!important;
}
.bob-btn-primary,
.bob-btn-outline{
padding: 14px 40px!important;
}
}
.bob-service-grid{
padding: clamp(36px, 5vw, 70px) 0!important;
}
/* spacing mezi částmi */
.bob-service-grid__middle{
margin-top: clamp(26px, 4vw, 52px)!important;
}
.bob-service-grid__bottom{
margin-top: clamp(34px, 5vw, 64px)!important;
}
/* Media blocks */
.bob-media{
overflow: hidden!important;
background: #f3f3f3!important;
}
.bob-media__img{
width: 100%!important;
height: auto!important;
display: block!important;
object-fit: cover!important;
}
/* aby horní fotky působily stejně vysoké (jako ve screenu) */
.bob-service-grid__images .bob-media__img{
height: clamp(220px, 22vw, 360px)!important;
}
/* dole vlevo vyšší fotka */
.bob-media--tall .bob-media__img{
height: clamp(320px, 38vw, 520px)!important;
}
/* Typography – drží styl z předchozí stránky (větší, čisté, bez zbytečných efektů) */
.bob-h3{
font-weight: 600!important;
font-size: 2.2rem!important;
letter-spacing: -0.01em!important;
}
.bob-h4{
font-weight: 600!important;
font-size:1.4rem!important;
letter-spacing: -0.01em!important;
}
.bob-p-lg{
font-size: 1.4rem!important;
line-height: 1.55!important;
}
.bob-p{
font-size: 1.15rem!important;
line-height: 1.7!important;
color: #111!important;
}
/* Right column stacking */
.bob-text-stack{
display: grid!important;
gap: clamp(26px, 3vw, 44px)!important;
}
.bob-text-block{
max-width: 520px!important; /* ať je text čitelný, není přes celou šířku */
}
/* Mobil: ať jsou fotky pořád “hero-like” a texty mají hezký rytmus */
@media (max-width: 575.98px){
.bob-text-block{
max-width: 100%!important;
}
}
.bob-cta-service{
padding: clamp(40px, 6vw, 80px) 0!important;
}
/* Box */
.bob-cta-box{
background: #000!important;
overflow: hidden!important;
}
/* Left content */
.bob-cta-content{
background: linear-gradient(
90deg,
#000 0%,
#000 70%,
rgba(0,0,0,0.85) 100%
)!important;
display: flex!important;
align-items: center!important;
}
.bob-cta-inner{
padding: clamp(28px, 4vw, 56px)!important;
}
.bob-cta-title{
color: #fff!important;
font-weight: 600!important;
font-size: 2.4rem!important;
line-height: 1.25!important;
margin-bottom: 28px!important;
}
/* Right image */
.bob-cta-image{
position: relative!important;
}
.bob-cta-img{
width: 100%!important;
height: 100%!important;
object-fit: cover!important;
min-height: 260px!important;
}
/* Mobile */
@media (max-width: 991.98px){
.bob-cta-content{
background: #000!important;
text-align: center!important;
padding-top: 30px!important;
padding-bottom: 30px!important;
}
.bob-cta-inner{
max-width: 100%!important;
}
.bob-cta-title{
font-size: 2rem!important;
}
.bob-cta-image {
display: none!important;
}
}
/* HERO (models) */
.bob-page-hero--models{
position: relative!important;
height: clamp(240px, 36vw, 420px)!important;
overflow: hidden!important;
}
.bob-page-hero--models .bob-page-hero__bg{
position:absolute; inset:0!important;
background-size: cover!important;
background-position: center!important;
filter: saturate(0.95) contrast(1.05)!important;
transform: scale(1.02)!important;
}
.bob-page-hero--models:before{
content:""!important;
position:absolute; inset:0!important;
background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.20) 100%)!important;
}
.bob-page-hero__content{
position: relative!important;
height: 100%!important;
display:flex!important;
flex-direction: column!important;
justify-content: center!important;
padding: 28px 0!important;
}
/* GROUP */
.bob-model-group{
margin-bottom: clamp(34px, 5vw, 60px)!important;
}
.bob-model-group__card{
position: relative!important;
border-radius: 0!important;
overflow: hidden!important;
background-size: cover!important;
background-position: center!important;
min-height: 220px!important;
}
.bob-model-group__overlay{
position:absolute; inset:0!important;
background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.20) 100%)!important;
}
.bob-model-group__inner{
position: relative!important;
padding: clamp(22px, 3.2vw, 40px)!important;
max-width: 720px!important;
color: #fff!important;
}
.bob-model-group__eyebrow{
letter-spacing: .14em!important;
font-size: .85rem!important;
font-weight: 600!important;
opacity: 1!important;
margin-bottom: .6rem!important;
}
.bob-model-group__title{
font-size: 2rem!important;
font-weight: 600!important;
letter-spacing: -0.01em!important;
margin-bottom: .35rem!important;
}
.bob-model-group__sub{
color: rgba(255,255,255,.78)!important;
font-size: 1rem!important;
line-height: 1.6!important;
}
/* LINKS */
.bob-model-links{
margin-top: 16px!important;
}
.bob-model-link{
display:flex!important;
align-items:center!important;
justify-content: space-between!important;
gap: 12px!important;
padding: 16px 16px!important;
border: 1px solid rgba(0,0,0,.18)!important;
background: #fff!important;
color: #000!important;
text-decoration: none!important;
text-transform: uppercase!important;
font-weight: 600!important;
letter-spacing: .01em!important;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease!important;
}
.bob-model-link:after{
content: ">"!important;
font-weight: 800!important;
opacity: .8!important;
}
.bob-model-link:hover{
border-color: rgba(0,0,0,.35)!important;
color:#000!important;
}
/* responsive */
@media (max-width: 575.98px){
.bob-model-link{
padding: 14px 14px!important;
font-size: .98rem!important;
}
.bob-model-group__title {
font-size: 1.75rem!important;
}
.bob-model-group__card{
min-height: 200px!important;
}
}
/* Mobile hero fix: text do čitelného panelu + rozumné fonty */
@media (max-width: 575.98px){
.bob-page-hero--models{
height: 380px!important; /* stabilní výška, žádné “skákání” */
}
.bob-page-hero--models .bob-page-hero__bg {
background-position: right!important;
}
/* zjemníme overlay, ať fotka není úplně zabitá */
.bob-page-hero--models:before{
background: linear-gradient(
180deg,
rgba(0,0,0,.35) 0%,
rgba(0,0,0,.35) 40%,
rgba(0,0,0,.65) 100%
)!important;
}
/* obsah přesuneme dolů */
.bob-page-hero__content{
justify-content: flex-end!important;
padding: 0 0 14px 0!important;
}
/* vytvoříme "caption panel" – lepší čitelnost, premiovější */
.bob-page-hero__content > *{
max-width: 100%!important;
}
.bob-page-hero__content{
padding-left: 12px!important;
padding-right: 12px!important;
}
.bob-page-hero__content .bob-page-title,
.bob-page-hero__content .bob-page-lead{
display: inline-block!important;
width: 100%!important;
}
.bob-page-hero__content{
/* panel */
background: rgba(0,0,0,.65)!important;
margin: 0px!important;
padding: 14px 14px 16px!important;
border-radius: 0!important; /* držíme tvůj hranatý styl */
}
/* typografie – hlavně lead už nesmí být obří */
.bob-page-hero__content .bob-page-title{
font-size: 2.1rem!important;
line-height: 1.05!important;
margin-bottom: 8px!important;
}
.bob-page-hero__content .bob-page-lead{
font-size: 1.05rem!important;
line-height: 1.35!important;
color: rgba(255,255,255,.86)!important;
}
}
/* HERO */
.bob-model-hero{
position: relative!important;
width: 100%!important;
height: clamp(260px, 42vw, 520px)!important;
overflow: hidden!important;
}
.bob-model-hero__bg{
position: absolute!important;
inset: 0!important;
background-size: cover!important;
background-position: center!important;
transform: scale(1.02)!important;
}
.bob-model-hero__overlay{
position: absolute!important;
inset: 0!important;
background: linear-gradient(
90deg,
rgba(0,0,0,.60) 0%,
rgba(0,0,0,.32) 55%,
rgba(0,0,0,.15) 100%
)!important;
}
.bob-model-hero__content{
position: relative!important;
height: 100%!important;
display: flex!important;
flex-direction: column!important;
justify-content: flex-start!important; /* text nahoře */
padding-top: clamp(44px, 5vw, 78px)!important;
padding-bottom: 24px!important;
}
.bob-model-hero__title{
color: #fff!important;
font-weight: 600!important;
letter-spacing: -0.02em!important;
font-size: clamp(2.1rem, 3.6vw, 3.6rem)!important;
line-height: 1.06!important;
margin: 0 0 12px 0!important;
text-shadow: 0 3px 10px rgba(0,0,0,.25)!important;
}
.bob-model-hero__price{
color: rgba(255,255,255,.82)!important;
font-size: clamp(1.05rem, 1.6vw, 1.5rem)!important;
text-shadow: 0 2px 8px rgba(0,0,0,.20)!important;
}
/* INTRO */
.bob-model-intro{
padding: clamp(30px, 4vw, 56px) 0!important;
}
.bob-model-intro__title{
font-weight: 600!important;
font-size: clamp(1.55rem, 2.1vw, 2.25rem)!important;
letter-spacing: -0.01em!important;
}
.bob-model-intro__lead{
font-size: clamp(1.15rem, 1.35vw, 1.55rem)!important;
line-height: 1.55!important;
color: #000!important;
}
/* CTA stack (reuse style from /servis vibe) */
.bob-cta-stack{
max-width: 420px!important;
margin-left: auto!important;
display: flex!important;
flex-direction: column!important;
gap: 22px!important;
padding-top: 8px!important;
}
.bob-btn-dark{
background:#000!important;
color:#fff!important;
border: 1px solid #000!important;
border-radius: 0!important;
padding: 18px 18px!important;
font-weight: 600!important;
}
.bob-btn-dark:hover{
background:#111!important;
border-color:#111!important;
color:#fff!important;
}
/* Mobile fine-tune */
@media (max-width: 991.98px){
.bob-cta-stack{
margin-left: 0!important;
max-width: 520px!important;
}
}
@media (max-width: 575.98px){
.bob-model-hero{
height: 420px!important;
}
.bob-model-hero__content{
padding-top: 34px!important;
}
.bob-cta-stack{
gap: 14px!important;
}
.bob-btn-dark,
.bob-btn-outline{
padding: 14px 14px!important;
}
}
/* HERO */
.bob-page-hero--finance{
position: relative!important;
height: clamp(260px, 38vw, 440px)!important;
overflow: hidden!important;
}
.bob-page-hero--finance .bob-page-hero__bg{
position:absolute; inset:0!important;
background-size: cover!important;
background-position: center!important;
transform: scale(1.02)!important;
}
.bob-page-hero--finance .bob-page-hero__overlay{
position:absolute; inset:0!important;
background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.20) 100%)!important;
}
.bob-page-hero--finance .bob-page-hero__content{
position: relative!important;
height: 100%!important;
display:flex!important;
flex-direction: column!important;
justify-content: center!important;
padding: 26px 0!important;
}
/* Typography helpers */
.bob-section-title{
font-weight: 600!important;
font-size: clamp(1.55rem, 2.1vw, 2.25rem)!important;
letter-spacing: -0.01em!important;
}
.bob-section-lead{
font-size: clamp(1.05rem, 1.25vw, 1.35rem)!important;
line-height: 1.6!important;
color:#111!important;
}
/* Intro spacing */
.bob-fin-intro{ padding: clamp(30px, 4vw, 56px) 0!important; }
/* Cards */
.bob-fin-benefits{ padding: 10px 0 clamp(28px, 4vw, 52px)!important; }
.bob-info-card{
border: 1px solid rgba(0,0,0,.12)!important;
background:#fff!important;
padding-left: 18px!important;
padding-right: 18px!important;
padding-top: 30px!important;
padding-bottom: 30px!important;
}
.bob-info-card__title{
font-weight: 700!important;
font-size: 1.2rem!important;
margin: 0 0 10px 0!important;
}
.bob-info-card__text{
margin: 0!important;
color:#222!important;
line-height: 1.7!important;
font-size: .98rem!important;
}
/* Options */
.bob-fin-options{ padding: clamp(26px, 4vw, 56px) 0!important; }
.bob-option{
border: 1px solid rgba(0,0,0,.12)!important;
background:#fff!important;
padding: 22px 20px!important;
}
.bob-option__eyebrow{
letter-spacing: .14em!important;
font-size: .78rem!important;
font-weight: 700!important;
opacity: .7!important;
margin-bottom: 8px!important;
text-transform: uppercase!important;
}
.bob-option__title{
font-weight: 700!important;
font-size: 1.5rem!important;
margin: 0 0 10px 0!important;
}
.bob-option__text{
margin: 0 0 14px 0!important;
line-height: 1.7!important;
color:#222!important;
}
/* List */
.bob-list{
padding-left: 1.1rem!important;
margin: 0!important;
}
.bob-list li{
margin-bottom: .45rem!important;
line-height: 1.6!important;
}
/* Steps */
.bob-fin-steps{ padding: clamp(26px, 4vw, 56px) 0!important; }
.bob-step{
border: 1px solid rgba(0,0,0,.12)!important;
background:#fff!important;
padding: 22px 20px!important;
}
.bob-step__num{
width: 44px; height: 44px!important;
display:flex; align-items:center; justify-content:center!important;
background:#000; color:#fff!important;
font-weight: 800!important;
margin-bottom: 12px!important;
}
.bob-step__title{
font-weight: 700!important;
font-size: 1.2rem!important;
margin: 0 0 8px 0!important;
}
.bob-step__text{
margin: 0!important;
color:#222!important;
line-height: 1.7!important;
}
/* Docs */
.bob-fin-docs{ padding: clamp(26px, 4vw, 56px) 0!important; }
.bob-doc-box{
border: 1px solid rgba(0,0,0,.12)!important;
background:#f7f7f7!important;
padding: 18px 18px 16px!important;
}
/* Reuse CTA banner styles you already have */
.bob-cta-service{ padding: clamp(40px, 6vw, 80px) 0!important; }
/* Mobile tweaks */
@media (max-width: 575.98px){
.bob-info-card, .bob-option, .bob-step{ padding: 18px 16px!important; }
}
/* HERO */
.bob-page-hero--buyback{
position: relative!important;
height: clamp(260px, 38vw, 440px)!important;
overflow: hidden!important;
}
.bob-page-hero--buyback .bob-page-hero__bg{
position:absolute; inset:0!important;
background-size: cover!important;
background-position: center!important;
transform: scale(1.02)!important;
}
.bob-page-hero--models .bob-page-hero__overlay{
position:absolute; inset:0!important;
background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.20) 100%)!important;
}
.bob-page-hero--buyback .bob-page-hero__content{
position: relative!important;
height: 100%!important;
display:flex!important;
flex-direction: column!important;
justify-content: center!important;
padding: 26px 0!important;
}
/* Spacing */
.bob-buyback-intro{ padding: clamp(30px, 4vw, 56px) 0!important; }
.bob-buyback-benefits{ padding: 10px 0 clamp(28px, 4vw, 52px)!important; }
.bob-buyback-steps{ padding: clamp(26px, 4vw, 56px) 0!important; }
.bob-buyback-docs{ padding: clamp(26px, 4vw, 56px) 0!important; }
/* HERO */
.bob-page-hero--about{
position: relative!important;
height: clamp(260px, 38vw, 440px)!important;
overflow: hidden!important;
}
.bob-page-hero--about .bob-page-hero__bg{
position:absolute; inset:0!important;
background-size: cover!important;
background-position: center!important;
transform: scale(1.02)!important;
}
.bob-page-hero--about .bob-page-hero__overlay{
position:absolute; inset:0!important;
background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.38) 55%, rgba(0,0,0,.20) 100%)!important;
}
.bob-page-hero--about .bob-page-hero__content{
position: relative!important;
height: 100%!important;
display:flex!important;
flex-direction: column!important;
justify-content: center!important;
padding: 26px 0!important;
}
/* spacing */
.bob-about-intro{ padding: clamp(30px, 4vw, 56px) 0!important; }
.bob-about-timeline{ padding: 10px 0 clamp(28px, 4vw, 52px)!important; }
.bob-about-locations{ padding: clamp(26px, 4vw, 56px) 0!important; }
.bob-about-why{ padding: clamp(26px, 4vw, 56px) 0!important; }
.bob-about-csr{ padding: clamp(26px, 4vw, 56px) 0!important; }
.bob-about-story{ padding: clamp(26px, 4vw, 56px) 0!important; }
/* timeline cards */
.bob-timeline-card{
border: 1px solid rgba(0,0,0,.12)!important;
background:#fff!important;
padding: 22px 20px!important;
}
.bob-timeline-card__year{
font-weight: 700!important;
font-size: 2rem!important;
letter-spacing: -0.02em!important;
margin-bottom: 8px!important;
}
.bob-timeline-card__title{
font-weight: 600!important;
font-size: 1.15rem!important;
margin: 0 0 8px 0!important;
}
.bob-timeline-card__text{
margin: 0!important;
color:#222!important;
line-height: 1.7!important;
}
/* locations */
.bob-location-box{
border: 1px solid rgba(0,0,0,.12)!important;
background:#fff!important;
padding: 22px 20px!important;
}
.bob-location-meta{
display:flex!important;
flex-wrap: wrap!important;
gap: 10px!important;
margin-top: 16px!important;
}
.bob-location-pill{
border: 1px solid rgba(0,0,0,.16)!important;
padding: 8px 10px!important;
font-weight: 700!important;
font-size: .9rem!important;
}
/* feature grid */
.bob-feature-grid{
display:grid!important;
grid-template-columns: repeat(2, minmax(0, 1fr))!important;
gap: 14px!important;
}
.bob-feature{
border: 1px solid rgba(0,0,0,.12)!important;
background:#fff!important;
padding: 16px 16px!important;
}
.bob-feature__title{
font-weight: 700!important;
margin-bottom: 6px!important;
}
.bob-feature__text{
color:#222!important;
line-height: 1.7!important;
margin: 0!important;
}
/* csr */
.bob-csr-list{
display:grid!important;
grid-template-columns: 1fr!important;
gap: 10px!important;
margin-top: 18px!important;
}
.bob-csr-item{
border: 1px solid rgba(0,0,0,.12)!important;
background:#fff!important;
padding: 12px 14px!important;
font-weight: 600!important;
}
.bob-csr-highlight{
border: 1px solid rgba(0,0,0,.12)!important;
background:#000!important;
color:#fff!important;
padding: 26px 22px!important;
}
.bob-csr-highlight__label{
letter-spacing: .14em!important;
font-size: .8rem!important;
font-weight: 700!important;
opacity: .85!important;
margin-bottom: 10px!important;
}
.bob-csr-highlight__amount{
font-size: clamp(2.2rem, 4vw, 3.2rem)!important;
font-weight: 900!important;
letter-spacing: -0.02em!important;
margin-bottom: 10px!important;
}
.bob-csr-highlight__text{
color: rgba(255,255,255,.80)!important;
line-height: 1.7!important;
}
.bob-csr-highlight__link{
display:inline-block!important;
margin-top: 14px!important;
color:#fff!important;
font-weight: 700!important;
text-decoration: none!important;
}
.bob-csr-highlight__link:hover{ text-decoration: underline!important; }
/* story box */
.bob-story-box{
background:#000!important;
border: 1px solid rgba(0,0,0,.12)!important;
display:flex!important;
align-items:center!important;
justify-content: space-between!important;
gap: 18px!important;
padding: 24px 22px!important;
}
.bob-story-box__right{
flex: 0 0 auto!important;
}
.bob-section-lead > a,
.bob-csr-item > a {
font-weight: 700!important;
color: #000!important;
text-decoration: none!important;
}
.bob-section-lead > a:hover,
.bob-csr-item > a:hover {
text-decoration: underline!important;
}
/* responsive */
@media (max-width: 991.98px){
.bob-feature-grid{
grid-template-columns: 1fr!important;
}
.bob-story-box{
flex-direction: column!important;
align-items: flex-start!important;
}
}
@media (max-width: 575.98px){
.bob-timeline-card,
.bob-location-box,
.bob-feature,
.bob-csr-item{
padding: 18px 16px!important;
}
}
.bob-galleries{
padding: clamp(30px, 4vw, 56px) 0!important;
}
/* reusable media wrapper (pokud už máš, nech jen utility výšky) */
.bob-media{
overflow: hidden!important;
background: #f2f2f2!important;
}
/* images */
.bob-media__img{
width: 100%!important;
display: block!important;
object-fit: cover!important;
}
/* layout sizes */
.bob-media__img--wide{
height: clamp(220px, 28vw, 380px)!important;
}
.bob-media__img--square{
height: clamp(200px, 22vw, 300px)!important;
}
/* subtle premium hover (volitelné, můžeš klidně smazat) */
.bob-media__img{
transition: transform .6s ease!important;
}
.bob-media:hover .bob-media__img{
transform: scale(1.04)!important;
}
/* mobile */
@media (max-width: 575.98px){
.bob-media__img--wide{
height: 220px!important;
}
.bob-media__img--square{
height: 200px!important;
}
}
/* HERO */
.bob-page-hero--contact{
position: relative!important;
height: clamp(260px, 38vw, 440px)!important;
overflow: hidden!important;
}
.bob-page-hero--contact .bob-page-hero__bg{
position:absolute; inset:0!important;
background-size: cover!important;
background-position: center!important;
transform: scale(1.02)!important;
}
.bob-page-hero--contact .bob-page-hero__overlay{
position:absolute; inset:0!important;
background: linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.20) 100%)!important;
}
.bob-page-hero--contact .bob-page-hero__content{
position: relative!important;
height: 100%!important;
display:flex!important;
flex-direction: column!important;
justify-content: center!important;
padding: 26px 0!important;
}
/* Map + form */
.bob-contact-map-form{
padding: clamp(30px, 4vw, 56px) 0!important;
}
.bob-map-wrapper{
border: 1px solid rgba(0,0,0,.12)!important;
background: #fff!important;
overflow: hidden!important;
height: 420px!important;
}
.bob-map-wrapper iframe{
width: 100%!important;
height: 100%!important;
border: 0!important;
display: block!important;
}
.bob-map-meta{
margin-top: 14px!important;
border: 1px solid rgba(0,0,0,.12)!important;
padding: 14px 16px!important;
background: #fff!important;
line-height: 1.8!important;
}
.bob-map-meta a{
color:#000!important;
text-decoration: none!important;
font-weight: 600!important;
}
.bob-map-meta a:hover{ text-decoration: underline!important; }
.bob-form-placeholder{
border: 1px solid rgba(0,0,0,.12)!important;
background: #fff!important;
padding: 18px 18px 16px!important;
min-height: 420px!important;
}
.bob-form-placeholder__lead{
color:#222!important;
line-height: 1.7!important;
}
.bob-form-fake{
margin-top: 10px!important;
display: grid!important;
gap: 12px!important;
}
.bob-fake-row{
height: 44px!important;
background: #f2f2f2!important;
border: 1px solid rgba(0,0,0,.08)!important;
}
.bob-fake-row--short{
height: 48px!important;
width: 55%!important;
}
.bob-note{
margin-top: 12px!important;
color:#222!important;
line-height: 1.7!important;
}
.bob-note a{
color:#000!important;
font-weight: 700!important;
text-decoration: none!important;
}
.bob-note a:hover{ text-decoration: underline!important; }
/* Departments */
.bob-contact-departments{
padding: clamp(30px, 4vw, 56px) 0!important;
}
.bob-department{
margin-bottom: clamp(34px, 5vw, 60px)!important;
}
.bob-department__title{
font-weight: 600!important;
font-size: clamp(1.35rem, 2vw, 1.7rem)!important;
margin-bottom: 22px!important;
}
/* Person card */
.bob-person {
padding: 25px!important;
border: 1px solid rgba(0,0,0,.12)!important;
}
.bob-person__photo {
width: 120px!important;
height: 120px!important;
margin-top: 10px!important;
overflow: hidden!important;
border-radius: 0px!important;
}
.bob-person__photo img {
width: 100%!important;
height: 100%!important;
object-fit: cover!important;
display: block!important;
}
.bob-person__name {
font-weight: 600!important;
font-size: 1.1rem!important;
margin-bottom: 5px!important;
}
.bob-person__role {
font-size: 0.8rem!important;
color: #777!important;
margin-bottom: 15px!important;
}
.bob-person__contact a {
text-decoration: none!important;
color: inherit!important;
font-size: 0.95rem!important;
}
.bob-person__contact a:hover {
text-decoration: underline!important;
}
/* Mobile */
@media (max-width: 575.98px){
.bob-map-wrapper{ height: 320px!important; }
.bob-form-placeholder{ min-height: 320px!important; }
.bob-person{ padding: 16px!important; }
}
/* Breadcrumb bar (černý pruh) */
.bob-breadcrumb-bar{
background:#000!important;
padding: 16px 0!important;
}
.bob-breadcrumb-dark{
--bs-breadcrumb-divider-color: rgba(255,255,255,.55)!important;
--bs-breadcrumb-item-active-color: rgba(255,255,255,.85)!important;
font-size: .95rem!important;
}
.bob-breadcrumb-dark .breadcrumb-item a{
color: rgba(255,255,255,.75)!important;
text-decoration: none!important;
}
.bob-breadcrumb-dark .breadcrumb-item a:hover{
color: #fff;
text-decoration: underline!important;
}
.bob-breadcrumb-dark .breadcrumb-item + .breadcrumb-item::before{
color: rgba(255,255,255,.55)!important;
}
/* Article */
.bob-article{
padding: clamp(34px, 4vw, 70px) 0!important;
}
.bob-article__container{
max-width: 980px!important; /* podobně jako v designu */
}
.bob-article__header{
margin-bottom: 26px!important;
}
.bob-article__title{
font-weight: 600!important;
letter-spacing: -0.02em!important;
line-height: 1.15!important;
font-size: clamp(1.6rem, 2.8vw, 2.3rem)!important;
margin-bottom: 16px!important;
}
.bob-article__meta{
font-size: .95rem!important;
color: #111!important;
}
/* Typography */
.bob-article__content p{
font-size: 1.02rem!important;
line-height: 1.9!important;
color: #111!important;
margin-bottom: 22px!important;
}
/* Gallery */
.bob-article__gallery{
margin-top: 26px!important;
}
.bob-media{
overflow: hidden!important;
background: #f2f2f2!important;
}
.bob-media__img{
width: 100%!important;
display: block!important;
object-fit: cover!important;
}
.bob-media__img--article{
height: clamp(240px, 22vw, 360px)!important;
}
/* Mobile fine-tuning */
@media (max-width: 575.98px){
.bob-breadcrumb-bar{ padding: 14px 0!important; }
.bob-breadcrumb-dark{ font-size: .9rem!important; }
.bob-article__content p{
font-size: 1rem!important;
line-height: 1.85!important;
}
.bob-media__img--article{
height: 240px!important;
}
}
/* hero top image */
.bob-hero-wide{
height: clamp(160px, 22vw, 260px)!important;
background-size: cover!important;
background-position: center!important;
}
/* breadcrumb black bar */
.bob-breadcrumb-bar{ background:#000; padding: 14px 0!important; }
.bob-breadcrumb-dark{
--bs-breadcrumb-divider-color: rgba(255,255,255,.55)!important;
--bs-breadcrumb-item-active-color: rgba(255,255,255,.85)!important;
font-size: .95rem!important;
}
.bob-breadcrumb-dark .breadcrumb-item a{
color: rgba(255,255,255,.75)!important;
text-decoration: none!important;
}
.bob-breadcrumb-dark .breadcrumb-item a:hover{ color:#fff!important; text-decoration: underline!important; }
.bob-breadcrumb-dark .breadcrumb-item + .breadcrumb-item::before{ color: rgba(255,255,255,.55)!important; }
/* listing layout */
.bob-listing{ padding: clamp(26px, 4vw, 52px) 0!important; }
.bob-listing__top{
display:flex!important;
align-items:flex-end!important;
justify-content: space-between!important;
gap: 16px!important;
}
.bob-listing__title{
font-weight: 600!important;
letter-spacing: -0.02em!important;
font-size: clamp(1.5rem, 2.2vw, 2rem)!important;
}
.bob-sort__label{ font-size: .85rem!important; font-weight: 700!important; margin-bottom: 6px!important; display:block!important; }
.bob-sort__select{ border-radius: 0!important; }
/* filter box */
.bob-filter{
border: 1px solid rgba(0,0,0,.14)!important;
background:#fff!important;
}
.bob-filter__head{
background:#000!important;
color:#fff!important;
font-weight: 800!important;
padding: 12px 14px!important;
}
.bob-filter__section{
padding: 12px 14px!important;
border-top: 1px solid rgba(0,0,0,.08)!important;
}
.bob-filter__title{
font-weight: 700!important;
font-size: .95rem!important;
margin-bottom: 8px!important;
}
.bob-filter__items{ display:grid!important; gap: 8p!importantx; }
.bob-check{
display:flex; gap: 10px!important;
align-items:flex-start!important;
font-size: .92rem!important;
}
.bob-check input{ margin-top: 3px!important; }
/* cards */
.bob-car-card{
display:flex!important;
flex-direction: column!important;
height: 100%!important;
text-decoration:none!important;
color:#000!important;
border: 1px solid #e5e7eb!important;
border-radius: 10px!important;
overflow: hidden!important;
background:#fff!important;
transition: transform .3s cubic-bezier(0.4,0,0.2,1), box-shadow .3s cubic-bezier(0.4,0,0.2,1)!important;
}
@media (hover: hover){
.bob-car-card:hover{
transform: translateY(-3px)!important;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.04),
0 20px 40px -12px rgba(0, 0, 0, 0.12)!important;
}
}
.bob-car-card_img {
aspect-ratio: 16 / 9!important; /* nebo 4/3, 1/1 – dle designu */
width: 100%!important;
overflow: hidden!important;
border-radius: 14px!important; /* ať sedí s kartou */
background: #f3f3f3!important; /* fallback */
}
.car-card__img img{
width: 100%!important;
height: 100%!important;
object-fit: cover!important; /* klíčové: vyplní a ořízne */
object-position: center!important; /* můžeš dát třeba "center 60%" */
display: block!important;
}
.bob-car-card__body{ padding: 12px 12px 14px; }
.bob-car-card__title{
font-weight: 700!important;
margin-bottom: 10px!important;
line-height: 1.25!important;
display: -webkit-box!important;
-webkit-line-clamp: 2!important;
-webkit-box-orient: vertical!important;
overflow: hidden!important;
}
.bob-car-card__chips{
display:flex!important;
flex-wrap: wrap!important;
gap: 8px!important;
margin-bottom: 12px!important;
}
.bob-car-card__prices{ display:grid!important; gap: 4px!important; margin-top: auto!important; }
.bob-price{ font-weight: 700!important; font-size: 1.1rem!important; }
.bob-price-sub{ font-size: .9rem!important; color:#333!important; }
.bob-listing__more{
display:flex!important;
justify-content:center!important;
margin-top: 26px!important;
}
.bob-empty{
border: 1px solid rgba(0,0,0,.14)!important;
padding: 18px!important;
background:#fff!important;
}
/* responsive */
@media (max-width: 991.98px){
.bob-sort{ min-width: 200px!important; }
}
@media (max-width: 575.98px){
.bob-listing__top{
flex-direction: column!important;
align-items: flex-start!important;
}
.bob-sort{ width: 100%!important; }
}
/* Grid obaluješ už Bootstrapem (col-lg-9), takže jen layout karet */
.facetwp-template,
.facetwp-listing {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr))!important;
gap: 22px!important;
}
@media (max-width: 991.98px) {
.facetwp-template,
.facetwp-listing {
grid-template-columns: 1fr!important;
gap: 18px!important;
}
}
.bob-carcard {
background: #fff!important;
border: 1px solid #e5e7eb!important;
border-radius: 10px!important;
overflow: hidden!important;
margin-bottom: 20px!important;
transition: transform .3s cubic-bezier(0.4,0,0.2,1), box-shadow .3s cubic-bezier(0.4,0,0.2,1)!important;
}
@media (hover: hover){
.bob-carcard:hover {
transform: translateY(-3px)!important;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.04),
0 20px 40px -12px rgba(0, 0, 0, 0.12)!important;
}
}
.bob-carcard__link {
display: block!important;
color: inherit!important;
text-decoration: none!important;
}
.bob-carcard__media {
position: relative!important;
aspect-ratio: 16 / 9!important;
background: #ddd!important;
overflow: hidden!important;
}
.bob-carcard__img {
width: 100%!important;
height: 100%!important;
object-fit: cover!important;
display: block!important;
}
.bob-carcard__ph {
width: 100%!important;
height: 100%!important;
background: linear-gradient(135deg, #cfcfcf, #e7e7e7)!important;
}
.bob-carcard__body {
padding: 14px 14px 16px!important;
}
.bob-carcard__title {
font-size: 16px!important;
line-height: 1.25!important;
font-weight: 700!important;
margin: 0 0 10px!important;
text-transform: uppercase!important;
}
.bob-carcard__chips {
display: flex!important;
flex-wrap: wrap!important;
gap: 8px!important;
margin-bottom: 12px!important;
}
.bob-carcard__prices {
display: grid!important;
gap: 4px!important;
}
.bob-carcard__price {
font-size: 20px!important;
font-weight: 700!important;
}
.bob-carcard__sub {
font-size: 13px!important;
opacity: .85!important;
}
/* hover – decentní, prémiový */
@media (hover:hover) {
.bob-carcard:hover .bob-carcard__img {
transform: scale(1.03)!important;
transition: transform .25s ease!important;
}
.bob-carcard__img {
transition: transform .25s ease!important;
}
}
.facetwp-template {
display: block!important;
}
.facetwp-facet {
margin-bottom: 0px!important;
}
.facetwp-facet-sort_ {
margin-bottom: 20px!important;
}
.bob-listing__top{
display:flex!important;
justify-content:space-between!important;
}
/* .bob-sort starý hack s margin-top: -40px ODSTRANĚN — rozbíjel layout
top-baru (sort byl vytažený nahoru mimo řadu s titlem). Nový styl
viz sekce 8 na konci souboru. */
.facetwp-facet > select {
padding: 10px!important;
}
.bob-home-cars .facetwp-template{
display:block!important;
grid-template-columns: repeat(3, minmax(0, 1fr))!important;
gap: 24px!important;
}
@media (max-width: 991.98px){
.bob-home-cars .facetwp-template{ grid-template-columns: repeat(2, minmax(0, 1fr))!important; }
}
@media (max-width: 575.98px){
.bob-home-cars .facetwp-template{ grid-template-columns: 1fr!important; }
}
/* =========================
VEHICLE DETAIL (bob-vd)
========================= */
.bob-vehicledetail { background: #fff; }
.bob-vd__crumb .breadcrumb-item a { color: #111; text-decoration: none!important; }
.bob-vd__crumb .breadcrumb-item a:hover { text-decoration: underline!important; }
.bob-vd__crumb .breadcrumb-item.active { color: #111!important; }
.bob-vd__top{
display:flex!important;
align-items:flex-start!important;
justify-content:space-between!important;
gap:24px!important;
margin-bottom:22px!important;
}
.bob-vd__title{
font-weight: 600!important;
letter-spacing: -0.02em!important;
font-size: clamp(1.6rem, 5vw, 2.5rem)!important;
line-height: 1.15!important;
margin: 0 0 20px 0!important;
overflow-wrap: break-word!important;
word-break: normal!important;
hyphens: auto!important;
}
.bob-vd__chips{ display:flex!important; flex-wrap:wrap!important; gap:10px!important; }
.bob-chip{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
padding:6px 10px!important;
border:1px solid #EFEFEF!important;
background:#EFEFEF!important;
font-weight:600!important;
font-size:13px!important;
line-height:1!important;
text-transform:uppercase!important;
}
.bob-vd__topRight{ text-align:right; min-width: 320px; }
.bob-vd__priceMain{
font-size: 2.2rem!important;
font-weight:600!important;
letter-spacing:-0.02em!important;
}
.bob-vd__priceSub{
font-size:1.5rem!important;
font-weight:500!important;
margin-top: 0px!important;
}
.bob-vd__vin{
margin-top:10px!important;
font-size:12px!important;
opacity:.75!important;
}
/* Galerie */
.bob-vd__gallery{
display:grid!important;
grid-template-columns: 1.6fr 1fr!important;
gap:18px!important;
}
.bob-vd__main{
cursor:zoom-in!important;
border-radius:2px!important;
overflow:hidden!important;
background:#f2f2f2!important;
min-height: 420px!important;
display:flex!important;
align-items:stretch!important;
}
.bob-vd__mainimg{
width:100%!important;
height:100%!important;
object-fit:cover!important;
display:block!important;
}
.bob-vd__placeholder{
width:100%!important;
height:100%!important;
min-height:420px!important;
background:#e9e9e9!important;
}
.bob-vd__thumbs{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:12px!important;
align-content:start!important;
}
.bob-vd__thumb{
border:0!important;
padding:0!important;
border-radius:2px!important;
overflow:hidden!important;
background:#f2f2f2!important;
cursor:zoom-in!important;
aspect-ratio: 4 / 3!important;
}
.bob-vd__thumb img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
display:block!important;
}
/* Parametry */
.bob-vd__h2{
font-size:26px!important;
font-weight:600!important;
margin:0 0 16px 0!important;
}
.bob-vd__params{
display:grid!important;
grid-template-columns: repeat(4, minmax(0, 1fr))!important;
gap:26px 34px!important;
}
.bob-vd__paramLabel{
font-size:12px!important;
opacity:.7!important;
margin-bottom:4px!important;
}
.bob-vd__paramValue{
font-size:20px!important;
font-weight:400!important;
letter-spacing:-0.01em!important;
}
.bob-vd__cta{ padding-top: 8px!important; }
.bob-vd__divider{
border:0!important;
border-top:1px solid #d9d9d9!important;
margin:38px 0!important;
}
/* Ikonky výbavy */
.bob-vd__icons{
display:grid!important;
grid-template-columns: repeat(8, minmax(0, 1fr))!important;
gap:26px 18px!important;
}
.bob-vd__iconItem{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
text-align:center!important;
gap:10px!important;
}
.bob-vd__iconLabel{
font-size:0.95rem!important;
font-weight:400!important;
text-transform:uppercase!important;
letter-spacing:.04em!important;
line-height:1.15!important;
}
.bob-vd__iconItem.is-active{ color:#000!important; }
.bob-vd__iconItem.is-inactive{ color:#bdbdbd!important; }
/* Další parametry */
.bob-vd__list{
margin:0!important;
padding-left:18px!important;
font-size:14px!important;
line-height:1.9!important;
}
.bob-vd__list li{ margin: 4px 0!important; }
/* Lightbox */
.bob-lightbox{
background:#0b0b0b!important;
border-radius:0!important;
}
.bob-lightbox__body{
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
min-height: 70vh!important;
}
.bob-lightbox__body img{
max-width:100%!important;
max-height: 80vh!important;
object-fit:contain!important;
}
.bob-lightbox__close{
position:absolute!important;
right:14px!important;
top:14px!important;
filter: invert(1)!important;
opacity: .9!important;
}
/* Responsivita */
@media (max-width: 1199.98px){
.bob-vd__icons{ grid-template-columns: repeat(5, minmax(0, 1fr))!important; }
.bob-vd__params{ grid-template-columns: repeat(3, minmax(0, 1fr))!important; }
}
@media (max-width: 991.98px){
.bob-vd__top{ flex-direction:column!important; }
.bob-vd__topRight{ text-align:left; min-width:auto!important; }
.bob-vd__gallery{ grid-template-columns: 1fr!important; }
.bob-vd__main{ min-height: 320px!important; }
.bob-vd__placeholder{ min-height: 320px!important; }
.bob-vd__thumbs{ grid-template-columns: repeat(3, 1fr)!important; }
.bob-vd__params{ grid-template-columns: repeat(2, minmax(0, 1fr))!important; }
.bob-vd__icons{ grid-template-columns: repeat(4, minmax(0, 1fr))!important; }
}
@media (max-width: 575.98px){
/* bob-vd__title už má fluid font-size přes clamp() výše — žádný override zde */
.bob-vd__thumbs{ grid-template-columns: repeat(2, 1fr)!important; }
.bob-vd__params{ grid-template-columns: repeat(2, minmax(0, 1fr))!important; }
.bob-vd__icons{ grid-template-columns: repeat(3, minmax(0, 1fr))!important; }
}
.bob-veh-gallery { margin: 28px 0 10px!important; }
.bob-veh-gallery__grid{
display:grid!important;
grid-template-columns: 1.6fr 1fr!important;
gap: 14px!important;
align-items: stretch!important;
}
/* =========================
LEVÁ – HLAVNÍ FOTKA
========================= */
.bob-veh-gallery__main {
position: relative;
border-radius: 4px;
overflow: hidden;
}
.bob-veh-gallery__main img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* =========================
PRAVÁ – 2x2 GRID
========================= */
.bob-veh-gallery__side {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 14px;
}
.bob-veh-gallery__thumb {
position: relative;
border-radius: 4px;
overflow: hidden;
}
.bob-veh-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* =========================
PLACEHOLDER
========================= */
.bob-veh-gallery__placeholder {
background: #f2f2f2;
}
/* =========================
MOBIL
========================= */
@media (max-width: 991.98px) {
.bob-veh-gallery__grid {
grid-template-columns: 1fr;
}
.bob-veh-gallery__side {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.bob-veh-gallery__main {
min-height: 240px;
}
}
/* HEAD */
.bob-veh-head { padding: 46px 0 22px!important; }
.bob-veh-title { font-weight: 700!important; font-size: clamp(32px, 3.2vw, 56px)!important; line-height: 1.05!important; letter-spacing: -0.02em!important; }
.bob-veh-chips { display:flex!important; flex-wrap:wrap!important; gap:10px!important; margin-top: 6px!important; }
.bob-chip{
display:inline-flex!important; align-items:center!important; justify-content:center!important;
padding: 10px 14px!important;
background:#efefef!important;
font-weight:700!important;
font-size:14px!important;
text-transform: uppercase!important;
letter-spacing: .02em!important;
}
/* RIGHT: ceny + VIN */
.bob-veh-pricewrap { text-align:right; }
.bob-veh-prices{
display:flex!important;
justify-content:flex-end!important;
align-items:baseline!important;
gap:26px!important;
flex-wrap:wrap!important;
}
.bob-veh-price-main{
font-weight:800!important;
font-size: clamp(28px, 2.6vw, 44px)!important;
letter-spacing: -0.01em!important;
white-space: nowrap!important;
}
.bob-veh-price-sub{
font-weight:600!important;
font-size: clamp(16px, 1.2vw, 22px)!important;
color:#111!important;
white-space: nowrap!important;
}
.bob-veh-vin{
margin-top: 10px!important;
font-size: 13px!important;
color:#111!important;
opacity: .8!important;
}
/* Responsive */
@media (max-width: 991.98px){
.bob-veh-pricewrap{ text-align:left!important; }
.bob-veh-prices{ justify-content:flex-start!important; }
}
img.bob-model-detail {
max-height: 120px!important;
margin-top: 20px!important;
margin-bottom: 20px!important;
}
a.facetwp-toggle {
display: none!important;
}
.bob-vd__iconSvg{
width: 80px!important;
height: 80px!important;
display: grid!important;
place-items: center!important;
overflow: hidden!important;
}
.bob-vd__iconSvg svg {
width: 100%!important;
height: 100%!important;
display: block!important;
color: #000!important; /* fallback */
}
.bob-vd__iconItem.is-inactive {
opacity: .5!important;
}
.bob-vd__iconItem.is-active {
opacity: 1!important;
}
/* Responsive */
@media (max-width: 991.98px){
.bob-veh-pricewrap{ text-align:left!important; }
.bob-veh-prices{ justify-content:flex-start!important; }
}
.bob-article__content > p > strong > a {
color: #000!important;
}
a.facetwp-toggle {
color: #000!important;
font-weight: 600!important;
margin-top: 15px!important;
}
/* Button (upravis dle designu webu) */
.btn-testdrive{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
padding:14px 18px!important;
border-radius:0px!important;
text-decoration:none!important;
font-weight:700!important;
border:1px solid rgba(0,0,0,.15)!important;
background:#111!important;
color:#fff!important;
transition:transform .15s ease, opacity .15s ease!important;
}
.btn-testdrive:hover{ opacity:.92!important; transform:translateY(-1px)!important; }
/* Modal base */
.modal{
position:fixed!important;
inset:0!important;
z-index:9999!important;
display:none!important;
}
/* Open state via :target */
.modal:target{
display:block!important;
}
.wpforms-field-label-inline {
display: none!important;
}
#wpforms-396-field_6-description,
#wpforms-402-field_6-description,
#wpforms-406-field_7-description,
#wpforms-409-field_7-description,
#wpforms-412-field_6-description,
#wpforms-415-field_6-description {
margin-top: -17px!important;
margin-left: 30px!important;
}
#wpforms-4032-field_1-container {
padding-top: 0px!important;
}
.wpforms-field-description > a {
color: #000!important;
}
.wpforms-field {
padding-top: 0px!important;
padding-bottom: 10px!important;
}
.wpforms-submit {
padding-bottom: 33px!important;
padding-left: 40px!important;
padding-right: 40px!important;
}
/* Overlay */
.modal__overlay{
position:absolute!important;
inset:0!important;
background:rgba(0,0,0,.55)!important;
backdrop-filter: blur(6px)!important;
}
/* Dialog */
.modal__dialog{
position:relative!important;
width:min(720px, calc(100% - 32px))!important;
margin: clamp(20px, 6vh, 60px) auto!important;
background:#fff!important;
border-radius:0px!important;
box-shadow:0 20px 70px rgba(0,0,0,.35)!important;
overflow:hidden!important;
}
/* Header */
.modal__header{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:12px!important;
padding:18px 0px 14px!important;
border-bottom:1px solid rgba(0,0,0,.08)!important;
}
.modal__title{
margin:0!important;
font-size:22px!important;
line-height:1.2!important;
}
.modal__close{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
width:40px!important;
height:40px!important;
border-radius:0px!important;
text-decoration:none!important;
color:#111!important;
border:1px solid rgba(0,0,0,.12)!important;
background:#fff!important;
}
.modal__close:hover{ background:rgba(0,0,0,.04)!important; }
/* Content */
.modal__content{
padding:18px!important;
}
.modal__lead{
margin:0 0 14px!important;
color:rgba(0,0,0,.72)!important;
font-size:15px!important;
line-height:1.55!important;
}
.modal__note{
margin:14px 0 0!important;
font-size:12px!important;
color:rgba(0,0,0,.55)!important;
line-height:1.45!important;
}
/* Form area */
.modal__form{
padding:14px!important;
border-radius:0px!important;
background:rgba(0,0,0,.03)!important;
border:1px solid rgba(0,0,0,.06)!important;
}
/* WPForms basic cleanup (optional) */
.modal__form .wpforms-container{
margin:0 !important;
}
.modal__form .wpforms-submit{
border-radius:0px !important!important;
}
@media (max-width: 600px){
.navbar-brand .brand-logo-bob,
.brand-logo-bob > img,
img.logo-header-bob {
max-width: 130px!important;
}
.navbar-brand .brand-logo-kia,
.brand-logo-kia > img,
img.logo-header-kia {
max-width: 100px!important;
}}
.floating-actions{
position: fixed!important;
right: 0px!important;
top: 40%!important;
transform: translateY(-50%)!important;
z-index: 9999!important;
display: flex!important;
flex-direction: column!important;
}
.floating-actions__btn{
width: 56px!important;
height: 56px!important;
background: #fff!important;
border: 1px solid rgba(0,0,0,.12)!important;
display: grid!important;
place-items: center!important;
box-shadow: 0 12px 28px rgba(0,0,0,.16)!important;
text-decoration: none!important;
}
/* pokud chceš vzhled "jeden panel" jako na screenu */
.floating-actions__btn + .floating-actions__btn{
border-top: none!important;
}
.floating-actions__btn:first-child{
border-radius: 0px 0px 0 0!important;
}
.floating-actions__btn:last-child{
border-radius: 0 0 0px 0px!important;
}
/* ikony */
.floating-actions__btn img{
width: 45px!important;
height: 45px!important;
object-fit: contain!important;
}
/* hover */
.floating-actions__btn:hover{
background: #f5f5f5!important;
}
/* mobil — floating-actions jsou na mobilu skryté (málo místa, menu pokrývá kontakty) */
@media (max-width: 991.98px){
.floating-actions{
display: none !important;
}
}
/* ==========================================================================
Přeneseno z WP Customizer (Vzhled → Přizpůsobit → Dodatečné CSS)
– Náhledy vozidel, Stock badge, discount chip
Opraveny dva překlepy oproti originálu:
• ".bob-chipbob-chip--discount" → ".bob-chip.bob-chip--discount" (BEM modifikátor)
• "font-size: 01rem" → "font-size: 1rem" (neplatná hodnota)
========================================================================== */
.preview{
aspect-ratio: 4 / 3 !important;
width: 100% !important;
overflow: hidden !important;
position: relative !important;
}
.preview img{
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
.stock-badge{
position: absolute !important;
top: 10px !important;
left: 0 !important;
z-index: 2 !important;
background: #8b0000 !important;
color: #fff !important;
padding: 5px 20px !important;
font-weight: 700 !important;
font-size: 0.8rem !important;
border-radius: 0 !important;
text-transform: none !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
}
.bob-chip.bob-chip--discount{
background: #8b0000 !important;
color: #fff !important;
padding: 6px 20px 5px !important;
font-weight: 700 !important;
font-size: 1rem !important;
border-radius: 0 !important;
text-transform: none !important;
}
.stock-badge--green{
background: #2fa200 !important;
margin-top: 32px !important;
}
/* ==========================================================================
FULLSCREEN MOBILNÍ MENU (var. A — prémiový overlay)
– Aktivní jen < 992 px (Bootstrap lg breakpoint)
– Loga v navbaru zůstávají viditelná i při otevřeném menu
– Toggle přes .js-menu-toggle (logika v assets/js/mobile-menu.js)
========================================================================== */
/* ---- Mobil: navbar vždy v JEDNÉ řadě (loga + hamburger), bez wrapování ---- */
@media (max-width: 767.98px){
.navbar > .container{
flex-wrap: nowrap !important;
gap: 8px;
}
/* Kontejner se dvěma logy — nech ho shrinkovat, loga zmenšit */
.navbar > .container > .d-flex.align-items-center{
flex: 1 1 auto;
min-width: 0;
gap: 4px;
}
.navbar .brand-logo-bob,
.navbar .brand-logo-kia{
flex-shrink: 1;
min-width: 0;
padding: 0;
}
.navbar .logo-header-bob{
max-height: 28px;
width: auto;
}
.navbar .logo-header-kia{
max-height: 22px;
width: auto;
max-width: 100% !important; /* přepíše inline style max-width:70% */
}
.navbar .nav-logo-divider{
margin-right: 8px !important; /* přepíše inline style margin-right:25px */
margin-left: 4px;
}
/* Hamburger musí zůstat v řadě, nikdy se nezalomí */
.navbar-menu{
flex-shrink: 0 !important;
margin-left: auto;
}
}
/* ---- Hamburger button (reset Bootstrap .navbar-menu) ---- */
.navbar-menu{
position: relative;
display: none; /* desktop: skryt */
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
z-index: 1100; /* nad mobile menu overlayem */
}
@media (max-width: 991.98px){
.navbar-menu{ display: inline-flex; align-items: center; justify-content: center; }
}
.navbar-menu__bars{
position: relative;
display: block;
width: 26px;
height: 18px;
}
.navbar-menu__bars span{
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: #000;
border-radius: 2px;
transition: transform .35s ease, opacity .2s ease, top .35s ease, bottom .35s ease, background-color .35s ease;
}
.navbar-menu__bars span:nth-child(1){ top: 0; }
.navbar-menu__bars span:nth-child(2){ top: 50%; transform: translateY(-50%); }
.navbar-menu__bars span:nth-child(3){ bottom: 0; }
/* Otevřený stav — proměna na X + bílá barva (kvůli černému pozadí menu) */
body.is-menu-open .navbar-menu__bars span{ background: #fff; }
body.is-menu-open .navbar-menu__bars span:nth-child(1){
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
body.is-menu-open .navbar-menu__bars span:nth-child(2){ opacity: 0; }
body.is-menu-open .navbar-menu__bars span:nth-child(3){
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
}
/* Navbar při otevřeném menu musí zůstat viditelný a mít vyšší z-index než overlay */
body.is-menu-open .navbar{
position: relative;
z-index: 1050;
background: #000 !important; /* navbar se zčerná, aby loga ladila s černým pozadím */
}
body.is-menu-open .navbar .logo-header-bob{
filter: brightness(0) invert(1); /* černé AUTO DASPOL logo → bílé */
}
/* Druhé logo (B of B Cars) a divider skryjeme — v otevřeném menu není potřeba */
body.is-menu-open .navbar .brand-logo-kia,
body.is-menu-open .navbar .nav-logo-divider{
display: none !important;
}
/* Prevent body scroll when menu is open */
body.is-menu-open{ overflow: hidden; }
/* ---- Mobile menu overlay ---- */
.mobile-menu{
position: fixed;
inset: 0;
z-index: 1040;
background: #000;
color: #fff;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .4s ease, visibility 0s linear .4s;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
body.is-menu-open .mobile-menu{
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity .4s ease;
}
/* Dekorativní gradient efekt v pozadí pro prémiový feel */
.mobile-menu::before{
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at top right, rgba(198, 0, 18, .18), transparent 60%), /* Kia červená */
radial-gradient(ellipse at bottom left, rgba(255,255,255,.05), transparent 60%);
pointer-events: none;
}
.mobile-menu__inner{
position: relative;
min-height: 100%;
padding: calc(80px + env(safe-area-inset-top, 0px)) 2rem 2rem; /* pod navbar */
display: flex;
flex-direction: column;
gap: 2rem;
max-width: 640px;
margin: 0 auto;
}
/* Položky menu — staggered animace */
.mobile-menu__nav ul{
list-style: none;
margin: 0;
padding: 0;
}
.mobile-menu__nav li{
border-bottom: 1px solid rgba(255,255,255,.1);
opacity: 0;
transform: translateY(14px);
transition: opacity .5s ease, transform .5s ease;
transition-delay: calc(var(--i, 0) * 0.06s);
}
body.is-menu-open .mobile-menu__nav li{
opacity: 1;
transform: translateY(0);
}
.mobile-menu__nav a{
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
font-family: "Poppins", sans-serif;
font-size: clamp(1.5rem, 5vw, 2rem);
font-weight: 600;
letter-spacing: -0.01em;
color: #fff;
text-decoration: none;
transition: color .2s ease, transform .2s ease, padding-left .25s ease;
}
.mobile-menu__nav a::after{
content: '→';
font-weight: 300;
opacity: 0;
transform: translateX(-8px);
transition: opacity .2s ease, transform .25s ease;
}
.mobile-menu__nav a:hover,
.mobile-menu__nav a:focus-visible{
color: #fff;
padding-left: 8px;
}
.mobile-menu__nav a:hover::after,
.mobile-menu__nav a:focus-visible::after{
opacity: 1;
transform: translateX(0);
}
/* Rychlé hovory */
.mobile-menu__contacts{
opacity: 0;
transform: translateY(14px);
transition: opacity .5s ease, transform .5s ease;
transition-delay: calc(var(--i, 0) * 0.06s);
}
body.is-menu-open .mobile-menu__contacts{
opacity: 1;
transform: translateY(0);
}
.mobile-menu__contacts-label,
.mobile-menu__social-label{
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(255,255,255,.5);
margin-bottom: 0.75rem;
font-weight: 500;
}
.mobile-menu__contact{
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 0.75rem;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid rgba(255,255,255,.08);
color: #fff;
text-decoration: none;
transition: color .2s ease, border-color .2s ease;
}
.mobile-menu__contact:hover,
.mobile-menu__contact:focus-visible{
color: #fff;
border-color: rgba(255,255,255,.3);
}
.mobile-menu__contact i{
font-size: 1.4rem;
color: #fff;
opacity: 0.75;
}
.mobile-menu__contact-role{
font-size: 0.85rem;
color: rgba(255,255,255,.6);
}
.mobile-menu__contact-num{
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.01em;
}
/* Sociální sítě */
.mobile-menu__social{
opacity: 0;
transform: translateY(14px);
transition: opacity .5s ease, transform .5s ease;
transition-delay: calc(var(--i, 0) * 0.06s);
margin-top: auto; /* přibije na spodek */
padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.is-menu-open .mobile-menu__social{
opacity: 1;
transform: translateY(0);
}
.mobile-menu__social-links{
display: flex;
gap: 0.75rem;
}
.mobile-menu__social-links a{
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.2);
color: #fff;
font-size: 1.4rem;
text-decoration: none;
transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.mobile-menu__social-links a:hover,
.mobile-menu__social-links a:focus-visible{
background: #fff;
color: #000;
border-color: #fff;
transform: translateY(-2px);
}
/* Na desktop (≥ lg) je overlay kompletně vypnutý */
@media (min-width: 992px){
.mobile-menu{ display: none !important; }
}
/* FULLSCREEN MOBILNÍ MENU — end */
/* ==========================================================================
Klikatelné karty (cursor + hover micro-interakce)
– Celý povrch karty je aktivní (logika v assets/js/cards.js).
– .is-clickable přidává JS po inicializaci.
========================================================================== */
.service-card.is-clickable,
.news-card.is-clickable,
.offer-card.is-clickable{
cursor: pointer;
transition: transform .25s ease, box-shadow .25s ease;
}
/* News/Service: moderní multi-layer stín — mekký okraj, decentní hloubka */
.news-card.is-clickable:hover,
.service-card.is-clickable:hover{
transform: translateY(-4px);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.04),
0 20px 40px -12px rgba(0, 0, 0, 0.12);
}
/* Offer-card už má vlastní hover overlay, takže jen cursor bez layoutových změn */
/* Drobný focus-visible ring pro klávesnici (accessibility) */
.service-card.is-clickable:focus-within,
.news-card.is-clickable:focus-within,
.offer-card.is-clickable:focus-within{
outline: 2px solid rgba(0, 0, 0, .25);
outline-offset: 2px;
}
/* Titulky karet vozů — „single-line + ellipsis" override ODSTRANĚN na žádost
uživatele. Nadpis se teď může přirozeně zalomit na víc řádků, karta
nebude přetékat container při dlouhých názvech (např. „Kia EV5 Launch
Edition 160 KW+81,4kWH"). */
/* ==========================================================================
KONZISTENTNÍ BORDER-RADIUS — napříč celým webem (jednotné 10px)
Zachováváme výjimku pro ikonkové kruhy, close tlačítka, stock-badge,
chipy a .bob-breadcrumb kde má zůstat ostré rozhraní.
========================================================================== */
/* --- Tlačítka --- */
.btn:not(.btn-scroll-top):not(.btn-close):not(.mobile-menu__social-links a){
border-radius: 10px !important;
}
/* --- Vstupy formulářů --- */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="date"],
textarea,
select{
border-radius: 10px !important;
}
/* --- Modely: velký banner "Hybridní a spalovací modely" + karty modelů --- */
.bob-model-group,
.bob-model-group__card,
.bob-model-links > div,
.bob-model-link,
.bob-model-detail{
border-radius: 10px !important;
overflow: hidden;
}
/* Banner má background-image — aby byl radius vidět, musí mít overflow:hidden */
.bob-model-group__card{
overflow: hidden !important;
}
/* --- Kontakty: karty osob, oddělení, mapa, "Kde nás najdete" box --- */
.bob-person,
.bob-person__photo,
.bob-department,
.bob-map-wrapper,
.bob-map-wrapper iframe,
.bob-map-wrapper img,
.bob-map-meta{
border-radius: 10px !important;
overflow: hidden;
}
/* "Kde nás najdete" — panel s adresou/kontakty — přidat i padding a jemný border */
.bob-map-meta{
border: 1px solid #e5e7eb !important;
padding: 24px 28px !important;
background: #fff !important;
}
/* --- Filtrace (skladové vozy, nabídka vozů) --- */
.bob-filter,
.bob-filter__head,
.facetwp-facet,
.facetwp-facet input[type="text"],
.facetwp-facet input[type="search"],
.facetwp-facet select,
.facetwp-facet .facetwp-search{
border-radius: 10px !important;
}
/* Filter header (tmavý box "Filtrace") — rounded top only, pokud přechází do body */
.bob-filter__head{
border-radius: 10px 10px 0 0 !important;
}
/* --- Service cards (Prodej vozů / Výkup vozů / Servis / Financování) --- */
.service-card{
border-radius: 10px !important;
overflow: hidden !important;
}
/* --- Offer cards (akční nabídky na homepage i na stránce Akce) --- */
.offer-card{
border-radius: 10px !important;
overflow: hidden !important;
}
/* --- bob-media* — fotky v detailu modelů, servisu, a dalších stránkách --- */
.bob-media,
.bob-media__img,
.bob-media__img--half,
.bob-media__img--wide,
.bob-media__img--tall,
.bob-media--tall,
.bob-model-gallery img,
.bob-model-gallery .bob-media{
border-radius: 10px !important;
overflow: hidden;
}
/* --- CTA sekce --- */
.bob-cta-box,
.bob-cta-img,
.bob-cta-content,
.bob-cta-image,
.bob-cta-image img{
border-radius: 10px !important;
overflow: hidden;
}
/* --- Obrázky v článcích a běžné .img-fluid --- */
.news-card img,
.news-card .wp-post-image,
article .img-fluid,
.bob-article__content img,
.fullwidth-image img{
border-radius: 10px;
}
/* --- Carousel item obrázek (hero slider) --- */
.bob-hero-carousel .carousel-item,
.bob-hero__img{
/* Hero necháme bez radius — full-bleed vypadá prémiově.
Pokud chceš i zde radius, odkomentuj následující: */
/* border-radius: 10px !important; overflow: hidden; */
}
/* --- Odkazy v článcích a obsahu spravovaném přes WP editor — ne modrá --- */
.bob-article__content a,
.bob-article a,
article .the-content a,
.entry-content a,
.news-body p a,
.post-content a{
color: #000 !important;
text-decoration: underline !important;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
font-weight: 500;
transition: color .2s ease;
}
.bob-article__content a:hover,
.bob-article a:hover,
article .the-content a:hover,
.entry-content a:hover,
.news-body p a:hover,
.post-content a:hover{
color: #8b0000 !important; /* Kia červený akcent */
}
/* --- Výjimky: kde radius NESMÍ být (zachovat ostré hrany) --- */
.stock-badge,
.bob-chip,
.bob-breadcrumb,
.bob-breadcrumb-bar,
.navbar,
.bob-footer,
.floating-actions__btn:first-child,
.floating-actions__btn:last-child{
/* tyto prvky mají vlastní styling nebo mají být bez radius */
}
.stock-badge,
.bob-chip{
border-radius: 0 !important;
}
/* ==========================================================================
SCROLL REVEAL + smooth scroll
– Elementy s .js-reveal se při scrollování jemně "vysunou" do pohledu.
– Logika v assets/js/scroll-reveal.js (IntersectionObserver, 0 závislostí).
========================================================================== */
/* Plynulý scroll (pro kotvy i scroll-top tlačítka) */
html.has-smooth-scroll{
scroll-behavior: smooth;
}
/* Výchozí stav — element je trochu níž, průhledný */
.js-reveal{
opacity: 0;
transform: translateY(24px);
transition:
opacity .7s cubic-bezier(0.22, 1, 0.36, 1),
transform .7s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
/* Element je v pohledu — plně viditelný */
.js-reveal.is-revealed{
opacity: 1;
transform: translateY(0);
}
/* Uživatelé s prefers-reduced-motion: okamžitě viditelné, bez animace */
@media (prefers-reduced-motion: reduce){
.js-reveal{
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
html.has-smooth-scroll{ scroll-behavior: auto; }
}
/* ==========================================================================
HERO CAROUSEL — responzivní (desktop vs. mobil)
========================================================================== */
/* Defaultně desktop: obrázek drží aspect ratio 1920/600 (široký hero) */
.bob-hero__img{
display: block;
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
}
/* HERO CAPTION — HORIZONTÁLNĚ do středu, VERTIKÁLNĚ do horní třetiny carouselu
(~28% od shora). #heroCarousel prefix + !important zaručí override. */
#heroCarousel .bob-hero__caption,
.bob-hero-carousel .bob-hero__caption{
position: absolute !important;
left: 50% !important;
right: auto !important;
top: 28% !important;
bottom: auto !important;
transform: translate(-50%, -50%) !important;
max-width: min(90%, 900px) !important;
width: 90% !important;
text-align: center !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
#heroCarousel .bob-hero__caption h2,
.bob-hero-carousel .bob-hero__caption h2{
font-size: clamp(1.4rem, 3vw, 3rem) !important;
line-height: 1.15 !important;
margin-bottom: 0.5rem !important;
max-width: 100% !important;
color: #fff !important;
}
#heroCarousel .bob-hero__caption p,
.bob-hero-carousel .bob-hero__caption p{
font-size: clamp(1rem, 1.3vw, 1.25rem) !important;
margin-bottom: 1rem !important;
}
/* ===== MOBIL (< 768px) — portrétní kompozice + text pod fotkou ===== */
@media (max-width: 767.98px){
/* Na mobilu se použije mobilní varianta obrázku (picture > source) — očekáváme
portrait 3:4. Pokud ještě neexistuje a prohlížeč spadne na desktopovou fotku,
CSS aspect-ratio + object-fit se postará o čistý vzhled. */
.bob-hero__img{
aspect-ratio: 3 / 4;
max-height: 80vh;
}
/* Caption přesunout nad spodek s tmavým gradientem pro čitelnost přes fotku */
.bob-hero-carousel .carousel-item{
position: relative;
}
/* Tmavý gradient zespoda na mobilu ODSTRANĚN na žádost uživatele.
Text caption je teď umístěný v horní polovině fotky, takže kontrast
z gradientu nebyl potřeba. */
.bob-hero-carousel .carousel-item::after{
content: none;
}
.bob-hero-carousel .bob-hero__caption{
top: auto;
left: 50%;
right: auto;
bottom: 8%;
transform: translateX(-50%);
width: 88%;
max-width: none;
z-index: 2;
color: #fff;
text-align: center;
}
.bob-hero-carousel .bob-hero__caption h2{
color: #fff !important;
font-size: clamp(1.6rem, 6.5vw, 2.2rem) !important;
line-height: 1.15;
margin-bottom: 0.5rem !important;
}
.bob-hero-carousel .bob-hero__caption p{
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
margin-bottom: 1.25rem !important;
}
/* Tlačítko — přes celou šířku, bílé pro kontrast */
.bob-hero-carousel .bob-hero__caption .btn-light-big{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.8rem 1.5rem !important;
font-size: 0.95rem !important;
}
/* Skrýt postranní šipky na mobilu — gesty / swipe to řeší lépe */
.bob-hero-carousel .carousel-control-prev,
.bob-hero-carousel .carousel-control-next{
display: none;
}
}
/* =====================================================================
UI POLISH — DASPOL TEMPLATE
Konsolidované úpravy:
- sjednocené border-radius napříč fotkami a kartami
- sjednocení velikostí nadpisů/odstavců napříč celým webem
- FacetWP stock-card souměrnost (podle DOM šablony s .bob-carcard > .bob-carcard__link > .stock-card)
- mobile overflow safety
- WP-editor odkazy v článcích
===================================================================== */
/* ---------- 1) SJEDNOCENÍ VELIKOSTÍ TEXTŮ napříč celým webem ---------- */
/* nadpisy (servis, detail modelů…): bob-h3 = bob-h4 = bob-model-intro__title */
.bob-h3,
.bob-h4,
h2.bob-h3, h3.bob-h3, h4.bob-h3,
h2.bob-h4, h3.bob-h4, h4.bob-h4,
.bob-model-intro__title,
h1.bob-model-intro__title,
h2.bob-model-intro__title{
font-weight: 600 !important;
font-size: 1.4rem !important;
line-height: 1.3 !important;
letter-spacing: -0.01em !important;
}
/* odstavce: bob-p = bob-p-lg = bob-model-intro__lead */
.bob-p,
.bob-p-lg,
p.bob-p,
p.bob-p-lg,
.bob-model-intro__lead,
p.bob-model-intro__lead{
font-size: 1.15rem !important;
line-height: 1.7 !important;
color: #111 !important;
font-weight: 400 !important;
}
/* ---------- 2) BORDER-RADIUS 12px — FOTKY A KARTY ---------- */
.offer-card,
.offer-card img,
.service-card,
.service-card img,
.fullwidth-image,
.fullwidth-image img,
.bob-model-group__card,
.bob-map-wrapper,
.bob-person__photo,
.bob-person__photo img,
.bob-media,
.bob-media__img,
.bob-cta-img,
.bob-cta-image img,
img.bob-model-detail {
border-radius: 12px !important;
overflow: hidden;
}
.news-card{
border-radius: 12px !important;
overflow: hidden !important;
}
.news-card img{
border-radius: 12px 12px 0 0 !important;
}
/* ---------- 3) MODEL LINK (seznam modelů na /modely) ---------- */
/* Bez nowrap, ale s menším fontem/paddingem — dlouhé názvy se vejdou přirozeně */
.bob-model-link{
font-size: .92rem !important;
padding: 14px !important;
line-height: 1.2 !important;
gap: 10px !important;
}
/* ---------- 4) MOBILE OVERFLOW SAFETY ---------- */
html, body{
overflow-x: hidden !important;
}
img{
max-width: 100% !important;
height: auto;
}
/* ---------- 5) WP EDITOR — ODKAZY V ČLÁNCÍCH ---------- */
.bob-article__content a,
.bob-article__content p a,
.bob-article__content li a,
.bob-article__content strong a,
.bob-article__content em a{
color: #000 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
text-decoration-thickness: 1px !important;
}
.bob-article__content a:hover,
.bob-article__content p a:hover,
.bob-article__content li a:hover{
color: #444 !important;
}
/* ---------- 6) FACETWP STOCK-CARD — NADPIS MŮŽE WRAPOVAT -----------------
JS fit-text v /assets/js/cards.js byl deaktivován (způsoboval přetékání
karet). Toto CSS pro jistotu přebíjí INLINE styly, co JS případně
zanechal v DOM (white-space:nowrap, overflow:hidden, text-overflow:ellipsis).
Inline styly JS neměly !important → CSS s !important je spolehlivě přebíjí.
*/
.stock-card .stock-detail > h3,
.bob-carcard .stock-card .stock-detail > h3,
.bob-carcard h3,
[class*="carcard"] h3,
[class*="car-card"] h3{
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
font-size: 1.2rem !important;
line-height: 1.3 !important;
display: block !important;
/* Vždy rezervovat prostor pro 2 řádky nadpisu — i když je krátký.
Tím se cena/VIN u všech karet v řadě zarovnají do stejné výšky. */
min-height: calc(2 * 1.2rem * 1.3) !important;
}
/* Karty vozů — stejně vysoké napříč řádkem (horní i dolní okraj zarovnán).
Natáhne .bob-carcard.h-100 > a.bob-carcard__link > .stock-card
přes celou výšku sloupce, ať spodní okraj karet lícuje. */
.bob-carcard.h-100,
.bob-carcard.h-100 > a.bob-carcard__link,
.bob-carcard.h-100 .stock-card{
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
.bob-carcard.h-100 .stock-card .stock-detail{
flex: 1 1 auto !important;
}
/* ---------- 7) FACETWP PAGER / LOAD MORE — styling ---------- */
/* Obal pageru už má bob-listing__more (justify-content: center).
Toto doladí vzhled samotných prvků uvnitř. */
/* Load More tlačítko (FacetWP pager type = "Load more") */
.facetwp-load-more{
background: #FFF !important;
color: #000 !important;
border: 1px solid rgba(0,0,0,0.45) !important;
border-radius: 0 !important;
padding: 14px 40px !important;
font-weight: 600 !important;
font-size: 1rem !important;
cursor: pointer !important;
transition: background 0.2s ease, border-color 0.2s ease !important;
min-width: 220px !important;
}
.facetwp-load-more:hover{
background: #e5e5e5 !important;
border-color: rgba(0,0,0,0.18) !important;
}
.facetwp-load-more.is-loading,
.facetwp-load-more[disabled]{
opacity: .55 !important;
cursor: wait !important;
}
/* Číselný pager (FacetWP pager type = "Numbers") */
.facetwp-facet-pager,
.facetwp-pager{
display: flex !important;
justify-content: center !important;
gap: 6px !important;
flex-wrap: wrap !important;
}
.facetwp-pager .facetwp-page,
.facetwp-page{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 42px !important;
padding: 10px 14px !important;
background: #FFF !important;
color: #000 !important;
border: 1px solid rgba(0,0,0,0.18) !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: background 0.2s ease, border-color 0.2s ease !important;
}
.facetwp-pager .facetwp-page:hover,
.facetwp-page:hover{
background: #e5e5e5 !important;
border-color: rgba(0,0,0,0.35) !important;
}
.facetwp-pager .facetwp-page.active,
.facetwp-page.active{
background: #000 !important;
color: #FFF !important;
border-color: #000 !important;
}
/* Load More — výraznější tlačítko se zaoblenými rohy */
.bob-listing__more .facetwp-load-more,
.facetwp-load-more{
background: #000 !important;
color: #FFF !important;
border: 2px solid #000 !important;
border-radius: 10px !important; /* zaoblení ladí s dropdownem (8px) */
padding: 16px 48px !important;
font-weight: 700 !important;
font-size: 1rem !important;
letter-spacing: 0.02em !important;
min-width: 240px !important;
transition: background .25s ease, color .25s ease, transform .15s ease !important;
}
.facetwp-load-more:hover{
background: #FFF !important;
color: #000 !important;
}
.facetwp-load-more:active{
transform: translateY(1px) !important;
}
.facetwp-load-more.is-loading,
.facetwp-load-more[disabled]{
opacity: .6 !important;
cursor: wait !important;
}
/* ---------- 8) LISTING TOP — Sort dropdown + Counter VEDLE SEBE ---------- */
/* Odstraněn negativní margin-top: -40px co rozbíjel layout top baru.
Sort dropdown + „1 - 20 z 109 vozidel" counter jsou teď v jednom řádku
vedle sebe (counter vlevo, dropdown vpravo). */
.bob-listing__top{
margin-bottom: 32px !important; /* vzduch mezi dropdown/counter řádkem a kartami */
align-items: center !important; /* vertikálně zarovnat nadpis s dropdownem + counterem */
gap: 20px !important;
}
/* Nadpis v listingu — zrušit Bootstrap mb-4, aby flex center fungoval čistě
(jinak byl nadpis posunutý dolů o 1.5rem) */
.bob-listing__top .bob-listing__title,
.bob-listing__top h1.bob-listing__title.mb-4{
margin-bottom: 0 !important;
}
.bob-sort{
margin-top: 0 !important;
display: flex !important;
flex-direction: row-reverse !important; /* sort vpravo, counter vlevo */
align-items: center !important;
gap: 14px !important;
flex-wrap: wrap !important;
justify-content: flex-end !important;
}
.bob-sort .facetwp-facet-sort_{
margin-bottom: 0 !important;
min-width: 220px !important;
flex-shrink: 0 !important;
}
/* Sort SELECT s vlastní SVG šipkou místo rozbité defaultní */
.bob-sort__select,
.bob-sort select,
.facetwp-facet-sort_ select,
.bob-listing__top select{
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-color: #FFF !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
background-size: 16px 16px !important;
border: 1px solid rgba(0,0,0,.25) !important;
border-radius: 8px !important;
padding: 12px 44px 12px 18px !important;
font-size: 1rem !important;
font-weight: 500 !important;
color: #111 !important;
width: 100% !important;
min-width: 220px !important;
cursor: pointer !important;
}
.bob-sort__select:focus,
.bob-sort select:focus,
.facetwp-facet-sort_ select:focus{
outline: none !important;
border-color: #000 !important;
box-shadow: 0 0 0 2px rgba(0,0,0,.08) !important;
}
/* Counter „1 - 20 z celkového počtu 109 vozidel" — inline vedle dropdownu */
.facetwp-counts,
.bob-sort .facetwp-counts,
.bob-listing__count{
font-size: .92rem !important;
color: #555 !important;
margin: 0 !important;
white-space: nowrap !important;
font-weight: 400 !important;
line-height: 1.4 !important;
}
/* mobil — sort + counter pod sebou, zarovnané doleva */
@media (max-width: 575.98px){
.bob-sort{
flex-direction: column !important;
align-items: flex-start !important;
width: 100% !important;
min-width: 0 !important;
}
.bob-sort .facetwp-facet-sort_{
width: 100% !important;
}
.bob-sort__select,
.bob-sort select,
.facetwp-facet-sort_ select{
width: 100% !important;
}
.facetwp-counts,
.bob-sort .facetwp-counts{
white-space: normal !important;
}
}
/* ---------- 9) CTA „Nenašli jste ten pravý vůz" — mobilní fix ----------
Původní desktop font 2.4rem, mobil 2rem byl na úzkém displeji moc velký
a tvrdé
v nadpisu dělalo nepěkné zalomení. */
.bob-cta-title{
font-size: clamp(1.4rem, 3.2vw, 2.4rem) !important;
line-height: 1.2 !important;
}
@media (max-width: 575.98px){
.bob-cta-title{
font-size: 1.4rem !important;
line-height: 1.35 !important;
margin-bottom: 20px !important;
}
/* Zalomení v šabloně (Nenašli jste ten pravý vůz?
S výběrem…) na mobilu
vypadá ošklivě — text se tam přirozeně zalomí sám. */
.bob-cta-title br{
display: none !important;
}
.bob-cta-inner{
padding: 28px 18px !important;
}
}