/* Doplňky tématu Kumho k původním stylům (styles.css, correction.css, responsive.css). */

:root {
    --kh-red: #e42313;
    --kh-dark: #1b1b1b;
}

/* --- menu ----------------------------------------------------------------------------------- */
.kh-menu-toggle { display: none; }
.sidenav .submenu a { font-size: 15px; text-align: left; color: grey; }
.sidenav .submenu a.red, .sidenav a.red { color: var(--kh-red); }

@media (max-width: 991px) {
    .kh-menu-toggle {
        display: flex; align-items: center; gap: .5rem;
        margin: .5rem auto 1rem; padding: .4rem 1.2rem;
        background: var(--kh-red); color: #fff; border: 0; font-weight: 700; text-transform: uppercase;
    }
    .kh-menu { display: none; }
    body.kh-menu-open .kh-menu { display: block; }
}

/* --- obsahové stránky ------------------------------------------------------------------------ */
.kh-page { padding: 0 1rem 2rem; }
.kh-content { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.kh-content img { max-width: 100%; height: auto; }
.kh-content table { color: #fff; margin: 1rem 0; border-collapse: collapse; }
.kh-content td, .kh-content th { border: 1px solid #555; padding: .3rem .6rem; }
.kh-content a { color: #fff; text-decoration: underline; }
.kh-content a.btn { text-decoration: none; }
.kh-tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 0 auto 1.5rem; max-width: 1100px; }
.kh-tabs a { text-decoration: none; }
.container-side .kh-tabs a.active { background: #fff !important; color: var(--kh-red) !important; }
.text-red { color: var(--kh-red); }
.btn-red { background: var(--kh-red); color: #fff; }
.btn-red:hover { color: #fff; filter: brightness(1.1); }

/* --- domovská stránka ----------------------------------------------------------------------- */
.kh-home-body h3 { color: #fff; text-align: center; text-transform: uppercase; margin: 2.5rem 0 1rem; }
.brand-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.5rem; padding: 1rem 2rem; }
.brand-logos img { height: 48px; width: auto; }
.owl-carousel .item > img { width: 100%; }
/* Slider: původní CSS pozicovalo text absolutně a tlačítko záporným okrajem – text pak tlačítko překrýval.
   Obsah snímku je teď v normálním toku: nadpis, zkrácený text, tlačítko pod ním. */
.owl-carousel div .textoverlay { pointer-events: none; }
.owl-carousel div .textslider { display: flex; flex-direction: column; align-items: flex-start; pointer-events: auto; z-index: 3; }
.owl-carousel div .textslider .kh-slide-text { max-width: 600px; padding-left: 18px; max-height: 6.4em; overflow: hidden; line-height: 1.6; }
.owl-carousel div .textslider .kh-slide-text p { position: static; width: auto; padding: 0; margin: 0 0 .3rem; }
.owl-carousel div .textslider .news-vice {
    float: none; width: auto; margin: 1rem 0 0 18px !important; position: relative; z-index: 4;
    display: inline-flex; align-items: center; gap: .4rem; background: var(--kh-red); padding: .35rem 1rem;
}
.owl-carousel div .textslider .news-vice img { width: 1em; height: 1em; }
@media (max-width: 991px) {
    .owl-carousel div .textslider .kh-slide-text { display: none; }
}

@media (max-width: 991px) {
    .kh-home-categories .pneu-item, .kh-home-advisor .col { flex: 0 0 50%; max-width: 50%; }
}

/* --- kategorie a karty produktů ------------------------------------------------------------- */
.kh-pills { margin-top: 1rem; }
.kh-pill { min-width: 150px; margin: .25rem .5rem; }
.kh-pills a { text-decoration: none; }
.kh-cards { margin-left: 0; margin-right: 0; }
.kh-card { flex-grow: 0; }
.kh-card-link { display: flex; flex-direction: column; color: #fff; text-decoration: none; height: 100%; }
.kh-card-link:hover { text-decoration: none; }
.kh-card-link:hover h5 { color: var(--kh-red) !important; }
.kh-card-link .text { flex-grow: 1; }
.kh-detail {
    display: inline-block; margin-left: auto; padding: .2rem 1.5rem .2rem 1rem;
    background: var(--kh-red); color: #fff; font-weight: 700; font-style: italic;
    clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
}
.kh-card .vice { display: flex; }
.kh-card { position: relative; }
.kh-badge-new { position: absolute; top: .6rem; left: .6rem; background: var(--kh-red); color: #fff; font-weight: 700; font-size: .75rem; padding: .1rem .5rem; z-index: 2; }

/* --- detail produktu ------------------------------------------------------------------------ */
.kh-product-image { max-height: 420px; width: auto; }
.kh-product-info { padding: 1rem 1.5rem !important; }
.kh-product-info ul { padding-left: 1.2rem; }
.kh-icons { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.kh-icons img { background: #fff; padding: 2px; border-radius: 2px; }
.kh-ratings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 2rem; margin: 1.5rem 0; }
.kh-rating p { color: #fff; font-weight: 700; margin-bottom: .3rem; }
.kh-rating-bar { display: flex; gap: 3px; }
.kh-rating-bar span { width: 14px; height: 22px; background: #3a3a3a; transform: skewX(-12deg); }
.kh-rating-bar span.on { background: var(--kh-red); }
.kh-back img { border: 0; }
@media (max-width: 575px) { .kh-ratings { grid-template-columns: 1fr; } }

/* --- novinky --------------------------------------------------------------------------------- */
.kh-news-item { display: flex; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid #333; }
.kh-news-item h3 { margin: .2rem 0 .6rem; font-size: 1.4rem; }
.kh-news-item h3 a { color: var(--kh-red); text-decoration: none; }
.kh-news-thumb { flex: 0 0 220px; }
.kh-news-thumb img { width: 220px; height: 140px; object-fit: cover; }
@media (max-width: 767px) { .kh-news-item { flex-direction: column; } .kh-news-thumb img { width: 100%; height: auto; } }

/* --- kontakt --------------------------------------------------------------------------------- */
.kh-contact-form { max-width: 640px; }
.kh-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.kh-alert { max-width: 640px; padding: 1rem 1.25rem; margin: 1rem 0; font-weight: 700; }
.kh-alert-ok { background: #1e5e2f; color: #fff; }
.kh-alert-error { background: var(--kh-red); color: #fff; }
.kh-note { font-size: .9rem; opacity: .85; margin-top: 1rem; }

/* --- prodejci -------------------------------------------------------------------------------- */
.kh-map { width: 100%; height: 500px; margin-bottom: 1.5rem; }
.kh-marker { background: url(/themes/kumho/assets/marker.svg) center/contain no-repeat; }
.kh-marker span { display: block; text-align: center; color: #fff; font-weight: 700; font-size: 15px; line-height: 32px; }
.kh-map .leaflet-popup-content a { color: var(--kh-red); }
.kh-dealer-filter { max-width: 320px; margin-bottom: 1.5rem; }
.kh-region h3 { margin: 1.5rem 0 .75rem; }
.kh-dealers { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.kh-dealer { background: #222; padding: 1rem; cursor: pointer; border-left: 3px solid var(--kh-red); }
.kh-dealer h4 { font-size: 1.05rem; font-weight: 700; }
.kh-dealer p { margin-bottom: .3rem; font-size: .9rem; }
.kh-dealer a { color: #fff; }
.kh-dealer-no { display: inline-block; min-width: 1.6rem; padding: 0 .3rem; background: var(--kh-red); text-align: center; margin-right: .3rem; }

/* --- patička --------------------------------------------------------------------------------- */
.kh-footer-links { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; padding: .5rem 1rem; }
.kh-footer-links h5 { margin: .5rem 1rem; }
.kh-footer-links a { color: #000; text-decoration: none; }
.kh-footer-links i { vertical-align: middle; font-size: 2rem; }

/* --- mobil: původní responsive.css ruší tmavé pozadí, bílý text pak není vidět ---------------- */
@media (max-width: 991px) {
    .container-side.bg-primary { background: #111 url(/themes/kumho/assets/bg-spot2.png) !important; }
    .container-side.bg-primary h1, .container-side.bg-primary h2, .container-side.bg-primary .text-white { color: #fff !important; }
    .kh-card { background: #2b2b2b !important; margin-bottom: .75rem; }
    .kh-pills { display: none; }
    .kh-page h1, .kh-product-title { font-size: 1.8rem; }
    .kh-footer-links { flex-direction: column; align-items: flex-start; }
    .container-side .kontakty { background: #fff !important; }
    .kh-page h1 { text-align: center; }
}