/*
 * KUNA DETAILING – šablona vzhledu
 * Černá + limetková, výrazné nadpisy, auto v banneru, kuna v patičce.
 * Obrázky jsou ve složce obrazky/ vedle tohoto souboru.
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap');

/* 1. NASTAVENÍ Z MANIFESTU ------------------------------------------------ */

:root {
    --k-lime: var(--t-hlavni_barva, #d4ef2b);
    --k-dark: var(--t-tmava_barva, #0d0e10);
    --k-on-lime: var(--t-text_na_akcentu, #0d0e10);
    --k-sale: var(--t-barva_akce, #e5322d);
    --k-dark-2: #17191c;
    --k-line-dark: rgba(255, 255, 255, .1);
}

/* 2. PROMĚNNÉ ZÁKLADNÍHO VZHLEDU ----------------------------------------- */

:root {
    --acc: var(--k-lime);
    --acc-2: var(--k-dark);
    --radius: 8px;
    --font: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --bg: #f4f5f6;
    --surface: #ffffff;
    --surface-2: #eef0f2;
    --border: #e3e5e8;
    --text: #0d0e10;
    --text-2: #4a4e55;
    --text-3: #868b93;
    --ok: #2f9e44;
    --err: var(--k-sale);
}

body.t-zaobleni--ostre { --radius: 2px; }
body.t-zaobleni--oble  { --radius: 16px; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--text); }
a:hover { color: var(--text); text-decoration-color: var(--k-lime); }

h1, h2, h3 {
    font-family: var(--font);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.05;
    color: var(--text);
    text-wrap: balance;
}

h1 { font-size: clamp(30px, 4.4vw, 52px); }
h2 { font-size: clamp(22px, 2.6vw, 30px); }

body.t-velka_pismena_v_nadpisech h1,
body.t-velka_pismena_v_nadpisech .banner h2 {
    text-transform: uppercase;
    letter-spacing: -.01em;
}

/* Tlapka za nadpisem sekce */
body.t-tlapky h2::after {
    content: '';
    display: inline-block;
    width: .7em;
    height: .7em;
    margin-left: .35em;
    vertical-align: .05em;
    background: url('obrazky/tlapka.png') center / contain no-repeat;
    border-radius: 3px;
}

/* 3. HLAVIČKA ------------------------------------------------------------- */

header {
    background: #fff;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

/* Horní pruh s výhodami */
body.t-horni_pruh header::before {
    content: 'Doprava zdarma od 1 500 Kč     ·     Odesíláme do 24 hodin     ·     Ověřené produkty     ·     Poradíme s výběrem';
    display: block;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    background: var(--surface-2);
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

header .top {
    gap: 24px;
    padding-top: 14px;
    padding-bottom: 14px;
}

header .brand {
    font-family: var(--font);
    font-weight: 900;
    font-size: 30px;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
}

/* Logo KUNA DETAILING jako obrázek (text zůstává pro čtečky a SEO).
   Jen když obchod nemá vlastní logo z administrace (img v .brand) - to má přednost. */
body.t-logo_obrazkem header .brand:not(:has(img)) {
    display: inline-block;
    width: 150px;
    height: 60px;
    background: url('obrazky/logo.png') left center / contain no-repeat;
    color: transparent !important;
    font-size: 0;
    overflow: hidden;
}

body.t-logo_obrazkem header .brand:not(:has(img)) * { visibility: hidden; }

/* Hledání: šedé pole, limetkové tlačítko */
header .search input,
header .search input[type="search"],
header .search input[type="text"] {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 14px;
}

header .search input:focus {
    outline: none;
    border-color: var(--k-dark);
    background: #fff;
}

header .search button {
    background: var(--k-lime);
    color: var(--k-on-lime);
    border: 0;
    border-radius: var(--radius);
}

header .cart-link {
    font-weight: 700;
    color: var(--text);
}

/* Hlavní menu */
nav.main {
    background: #fff;
    border-top: 1px solid var(--border);
}

nav.main a {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color .15s ease;
}

nav.main a:hover,
nav.main a.active,
nav.main a[aria-current] {
    color: var(--text);
    border-bottom-color: var(--k-lime);
}

/* Tmavá hlavička */
body.t-tmava_hlavicka header,
body.t-tmava_hlavicka nav.main {
    background: var(--k-dark);
    border-color: var(--k-line-dark);
}

body.t-tmava_hlavicka header .brand,
body.t-tmava_hlavicka header .cart-link,
body.t-tmava_hlavicka header a,
body.t-tmava_hlavicka nav.main a {
    color: #fff;
}

body.t-tmava_hlavicka header .search input {
    background: var(--k-dark-2);
    border-color: var(--k-line-dark);
    color: #fff;
}

body.t-tmava_hlavicka.t-horni_pruh header::before {
    background: #000;
    color: #fff;
    border-color: var(--k-line-dark);
}

/* Bílé logo na tmavé hlavičce */
body.t-tmava_hlavicka.t-logo_obrazkem header .brand:not(:has(img)) {
    filter: invert(1);
}

/* 4. BANNER (černý hero s autem) ----------------------------------------- */

.banner {
    position: relative;
    background-color: var(--k-dark);
    color: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 56px);
    min-height: 260px;
}

body.t-auto_v_banneru .banner {
    background-image:
        linear-gradient(90deg, var(--k-dark) 0%, var(--k-dark) 32%, rgba(13, 14, 16, .55) 55%, rgba(13, 14, 16, 0) 75%),
        url('obrazky/hero-auto.png');
    background-repeat: no-repeat;
    background-position: center, right center;
    background-size: auto, auto 100%;
    min-height: 340px;
}

.banner h1,
.banner h2,
.banner h3,
.banner p,
.banner a:not(.btn) {
    color: #fff;
    max-width: 560px;
}

.banner h1 strong,
.banner h2 strong,
.banner h1 em,
.banner h2 em {
    color: var(--k-lime);
    font-style: normal;
}

.banner p { font-size: 18px; color: rgba(255, 255, 255, .85); }

/* Druhý banner v pořadí: keramická ochrana */
body.t-auto_v_banneru .banner + .banner,
body.t-auto_v_banneru .banner:nth-of-type(2) {
    background-image:
        linear-gradient(90deg, var(--k-dark) 0%, var(--k-dark) 40%, rgba(13, 14, 16, 0) 70%),
        url('obrazky/banner-keramika.png');
}

/* 5. TLAČÍTKA ------------------------------------------------------------- */

.btn {
    font-family: var(--font);
    font-weight: 700;
    border-radius: var(--radius);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.btn-primary,
.card-buy {
    background: var(--k-lime);
    color: var(--k-on-lime);
    border: 0;
    font-weight: 800;
}

.btn-primary:hover,
.card-buy:hover {
    background: var(--k-lime);
    color: var(--k-on-lime);
    filter: brightness(.94);
    box-shadow: 0 6px 18px -6px var(--k-lime);
}

.btn-lg {
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 16px 26px;
}

.btn-lg::after {
    content: '  →';
    white-space: pre;
}

.banner .btn-primary { box-shadow: none; }

/* 6. VÝPIS ZBOŽÍ ---------------------------------------------------------- */

.grid { gap: 16px; }

.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.card:hover {
    border-color: #cfd2d6;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -14px rgba(13, 14, 16, .25);
}

.card .thumb {
    background: #fff;
}

.card .thumb img {
    object-fit: contain;
    transition: transform .3s ease;
}

.card:hover .thumb img { transform: scale(1.05); }

.card .name {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    color: var(--text);
}

.card .price {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--text);
}

.card .was {
    font-size: 12px;
    color: var(--text-3);
    text-decoration: line-through;
}

/* Cena ve slevě červeně, když je u ní přeškrtnutá */
.card .price:has(+ .was:not(:empty)),
.card .price:has(.was:not(:empty)) {
    color: var(--k-sale);
}

.card-buy {
    border-radius: var(--radius);
    text-transform: none;
}

/* Štítky */
.tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .01em;
    background: var(--k-lime);
    color: var(--k-on-lime);
}

.tag-new  { background: var(--k-dark); color: #fff; }
.tag-sale { background: var(--k-sale); color: #fff; }

.soldout {
    color: var(--text-3);
    font-weight: 600;
}

.stars { color: #f2a516; letter-spacing: 1px; }
.review { border-color: var(--border); }

/* Filtry, řazení, stránkování */
.filters,
.toolbar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.pager a,
.pager span {
    border-radius: var(--radius);
    font-weight: 700;
}

.pager .active,
.pager [aria-current] {
    background: var(--k-lime);
    color: var(--k-on-lime);
    border-color: var(--k-lime);
}

/* 7. KUNA-PORADKYNĚ + PATIČKA ------------------------------------------- */

/* Tři boxy nad patičkou: kuna-poradkyně, výhodné sady, Instagram.
   Patička je mřížka o 12 sloupcích; .foot se "rozpustí" (display: contents),
   takže jeho ::before/::after i sloupce patičky jsou přímo v mřížce. */
body.t-kuna_v_paticce footer {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 0;
    align-items: start;
    padding: 20px max(24px, calc((100% - 1180px) / 2)) 0 !important;
    background: linear-gradient(var(--bg) 0 210px, var(--k-dark) 210px) !important;
}

body.t-kuna_v_paticce footer > * { grid-column: 1 / -1; }
body.t-kuna_v_paticce footer .foot { display: contents !important; }
body.t-kuna_v_paticce footer .foot > * { grid-column: span 3; min-width: 0; }
body.t-kuna_v_paticce footer .copy { grid-column: 1 / -1; width: 100%; margin-top: 32px; }

body.t-kuna_v_paticce footer::before,
body.t-kuna_v_paticce footer .foot::before,
body.t-kuna_v_paticce footer .foot::after {
    grid-row: 1;
    grid-column: span 4;
    height: 170px;
    margin-bottom: 60px;
    box-sizing: border-box;
    white-space: pre-line;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: #fff;
    border: 1px solid var(--border);
    color: var(--k-dark);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
    background-repeat: no-repeat;
}

body.t-kuna_v_paticce footer::before {
    content: 'ODBORNÉ PORADENSTVÍ\ANevíte si rady s výběrem?\AJsme tu pro vás. Napište nám a společně vybereme to nejlepší pro váš vůz.';
    grid-column: 1 / span 4;
    padding: 22px 18px 18px 174px;
    background-image: url('obrazky/kuna.png');
    background-position: left center;
    background-size: auto 100%;
}

body.t-kuna_v_paticce footer::first-line {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
}

body.t-kuna_v_paticce footer .foot::before {
    content: 'VÝHODNÉ SADY\AKompletní péče o váš vůz\APečlivě sestavené sady za zvýhodněné ceny.';
    grid-column: 5 / span 4;
    padding: 22px calc(42% + 12px) 18px 20px;
    background-image: url('obrazky/sady.png');
    background-position: right 10px center;
    background-size: 42% auto;
}

body.t-kuna_v_paticce footer .foot::after {
    content: 'SLEDUJTE NÁS NA INSTAGRAMU\A@kunadetailing.cz';
    grid-column: 9 / span 4;
    padding: 22px 20px 18px;
    background-image: url('obrazky/instagram.png');
    background-position: center bottom 18px;
    background-size: calc(100% - 40px) auto;
}

@media (max-width: 900px) {
    body.t-kuna_v_paticce footer .foot > * { grid-column: span 6; }
}

@media (max-width: 760px) {
    body.t-kuna_v_paticce footer {
        background: linear-gradient(var(--bg) 0 582px, var(--k-dark) 582px) !important;
    }
    body.t-kuna_v_paticce footer::before,
    body.t-kuna_v_paticce footer .foot::before,
    body.t-kuna_v_paticce footer .foot::after { grid-column: 1 / -1; margin-bottom: 16px; }
    body.t-kuna_v_paticce footer .foot::before { grid-row: 2; }
    body.t-kuna_v_paticce footer .foot::after { grid-row: 3; margin-bottom: 60px; }
}

@media (max-width: 520px) {
    body.t-kuna_v_paticce footer .foot > * { grid-column: 1 / -1; }
}

footer {
    background: var(--k-dark);
    color: rgba(255, 255, 255, .78);
    padding-top: 48px;
    border-top: 0;
}

footer a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
}

footer a:hover {
    color: var(--k-lime);
}

footer h2,
footer h3,
footer h4,
footer strong {
    color: #fff;
}

body.t-tlapky footer h2::after { display: none; }

footer .foot {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}

@media (max-width: 900px) {
    footer .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    footer .foot { grid-template-columns: minmax(0, 1fr); }
}

footer .copy {
    border-top: 1px solid var(--k-line-dark);
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
}

body.t-tlapky footer .copy::after {
    content: 'Váš vůz v tlapkách profíka.';
    display: inline-block;
    margin-left: 14px;
    padding-right: 24px;
    color: #fff;
    font-weight: 600;
    background: url('obrazky/tlapka.png') right center / 16px 16px no-repeat;
}

footer input[type="email"],
footer input[type="text"] {
    background: #fff;
    border: 0;
    border-radius: var(--radius);
    font-family: var(--font);
}

footer button,
footer .btn {
    background: var(--k-lime);
    color: var(--k-on-lime);
    border: 0;
}

/* 8. ŠÍŘKA OBSAHU --------------------------------------------------------- */

body.t-sirka_obsahu--uzka .wrap   { max-width: 960px; }
body.t-sirka_obsahu--stredni .wrap { max-width: 1180px; }
body.t-sirka_obsahu--siroka .wrap  { max-width: 1400px; }

/* 9. MOBIL ---------------------------------------------------------------- */

@media (max-width: 700px) {
    header .top { gap: 10px; }

    body.t-horni_pruh header::before {
        content: 'Doprava zdarma od 1 500 Kč  ·  Odesíláme do 24 h';
        font-size: 11px;
    }

    body.t-logo_obrazkem header .brand:not(:has(img)) {
        width: 110px;
        height: 44px;
    }

    /* Logo z administrace: na mobilu menší, ať se košík vejde do řádku */
    header .brand img { max-height: 44px; }

    body.t-auto_v_banneru .banner {
        background-image:
            linear-gradient(180deg, rgba(13, 14, 16, .2) 0%, var(--k-dark) 62%),
            url('obrazky/hero-auto.png');
        background-position: center, center top;
        background-size: auto, 100% auto;
        padding-top: 52%;
        min-height: 0;
    }

    .card .price { font-size: 17px; }

}

/* Tmavě šedá hlavička (žluté logo na bílé zaniká) ------------------------ */

header {
    background: #2b2e33;
    border-color: rgba(255, 255, 255, .1);
}

/* Menu zůstává světlé jako dřív */
header nav.main {
    background: var(--surface);
    border-top: 1px solid var(--border);
}

header .account-link {
    color: #fff;
}

header .search input,
header .search input[type="search"],
header .search input[type="text"] {
    background: #3a3d43;
    border-color: rgba(255, 255, 255, .12);
    color: #fff;
}

header .search input::placeholder { color: #b4b8bf; }