@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap");

/* ==========================================================================
   GYMPORN

   Vzhled v duchu původního obchodu: krémová tapeta, papírová plocha obsahu,
   patkové nadpisy a klidné dlaždice. Kostra stránky je z E-shopu V2, takže
   se tu jen přebarvuje a přepisuje typografie - žádné nové bloky.

   Barvy a tvary jdou z nastavení šablony (Vzhled → Nastavení), aby si je
   obchodník mohl posunout bez zásahu do souboru.
   ========================================================================== */

:root {
    --papir: var(--t-papir, #FBF8F2);
    --tapeta: var(--t-podklad, #EFE7DA);
    --inkoust: var(--t-hlavni_barva, #2A231C);
    --cihla: var(--t-zvyrazneni, #B4472F);

    --bg: var(--tapeta);
    --surface: var(--papir);
    --surface-2: #F3EDE2;
    --border: #E0D6C5;
    --text: var(--inkoust);
    --text-2: #5C5145;
    --text-3: #8A7E70;
    --acc: var(--inkoust);
    --acc-2: var(--cihla);
    --err: #A8331F;
    --ok: #4C6B43;
    --font: "Manrope", ui-sans-serif, system-ui, sans-serif;
    --radius: 10px;
}

body.t-zaobleni--ostre { --radius: 0; }
body.t-zaobleni--kulate { --radius: 18px; }

body {
    font-family: var(--font);
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Typografie: patkové nadpisy dávají obchodu klid, který měl i původní web.
   -------------------------------------------------------------------------- */

h1, h2, h3, .banner h2 {
    font-family: "Newsreader", Georgia, "Times New Roman", serif;
    font-weight: 600;
    letter-spacing: -0.015em;
}

body.t-nadpisy--bezpatkove h1,
body.t-nadpisy--bezpatkove h2,
body.t-nadpisy--bezpatkove h3,
body.t-nadpisy--bezpatkove .banner h2 {
    font-family: var(--font);
    font-weight: 800;
}

h1 { font-size: 40px; line-height: 1.1; margin: 22px 0 10px; }
h2 { font-size: 27px; line-height: 1.15; margin: 40px 0 16px; }
.lead { font-size: 17px; color: var(--text-2); max-width: 62ch; }

/* --------------------------------------------------------------------------
   Papír nad tapetou. `.wrap` je jediný středový sloupec, takže stačí jemu.
   -------------------------------------------------------------------------- */

.wrap {
    box-shadow: 0 1px 0 rgba(42, 35, 28, .06), 0 18px 50px -30px rgba(42, 35, 28, .45);
}

@media (min-width: 1200px) {
    .wrap { border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
}

/* --------------------------------------------------------------------------
   Hlavička: název velkými, tenká linka, košík jako tmavá pilulka.
   -------------------------------------------------------------------------- */

header {
    background: rgba(251, 248, 242, .94);
    backdrop-filter: saturate(140%) blur(6px);
    border-bottom: 1px solid var(--border);
}

.top { padding-top: 16px; padding-bottom: 16px; }

.brand {
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.search input {
    background: var(--papir);
    border-color: var(--border);
    border-radius: 99px;
    padding: 10px 16px;
}

.search .btn {
    border-radius: 99px;
    border-color: var(--border);
    background: transparent;
}

.contact-phone { font-weight: 700; }

.cart-link {
    background: var(--inkoust);
    color: #FBF8F2;
    border-radius: 99px;
    padding: 10px 18px;
    font-weight: 700;
}

.cart-link .cart-count { background: rgba(251, 248, 242, .22); }

/* --------------------------------------------------------------------------
   Menu: vzdušné, bez podtržítek, aktivní položka cihlově.
   -------------------------------------------------------------------------- */

nav.main { border-top: 1px solid var(--border); background: transparent; }
nav.main a { font-weight: 600; font-size: 14px; padding: 13px 14px; color: var(--text-2); }
nav.main a:hover { color: var(--inkoust); }
nav.main a.active { color: var(--cihla); }

nav.main .sub {
    background: var(--papir);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px -24px rgba(42, 35, 28, .6);
    padding: 8px 0;
}

nav.main .sub a { color: var(--text-2); }
nav.main .sub a:hover { color: var(--inkoust); }
nav.main .sub-sub a { color: var(--text-3); }

/* --------------------------------------------------------------------------
   Proužek s výhodami: bez mřížky, jen tenké oddělovače.
   -------------------------------------------------------------------------- */

.benefits {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    gap: 0;
    overflow: hidden;
    margin: 24px 0;
}

.benefit {
    background: var(--surface-2);
    padding: 20px 22px;
    border-right: 1px solid var(--border);
}

.benefit:last-child { border-right: 0; }
.benefit-title { font-weight: 700; font-size: 15px; }
.benefit-text { color: var(--text-3); }

/* --------------------------------------------------------------------------
   Hlavní banner: tmavý, s patkovým nadpisem přes obrázek.
   -------------------------------------------------------------------------- */

.banner {
    background: var(--inkoust);
    color: #FBF8F2;
    border-radius: var(--radius);
    padding: 46px 34px;
}

.banner h2 { font-size: 34px; }

.banner .btn,
.banner .btn-primary {
    background: #FBF8F2;
    border-color: #FBF8F2;
    color: var(--inkoust);
    border-radius: 99px;
}

/* --------------------------------------------------------------------------
   Dlaždice zboží: světlá plocha pro fotku, název patkově, cena výrazně.
   -------------------------------------------------------------------------- */

.card {
    background: var(--papir);
    border-color: var(--border);
}

.card .thumb { background: var(--surface-2); }
.card .thumb img { object-fit: cover; }

.card .body { padding: 14px 15px 16px; gap: 5px; }

.card .name {
    font-family: "Newsreader", Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
}

body.t-nadpisy--bezpatkove .card .name { font-family: var(--font); font-weight: 700; font-size: 15px; }

.card .brand { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.card .price { font-size: 19px; font-weight: 800; }
.card .was { color: var(--text-3); }

.tag { border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; }
.tag-sale { background: var(--cihla); color: #FBF8F2; }
.tag-new { background: var(--ok); color: #FBF8F2; }
.tag-top { background: var(--inkoust); color: #FBF8F2; }

.stock-in { color: var(--ok); font-weight: 600; }
.stock-out, .soldout { color: var(--text-3); }

/* Dlaždice kategorie drží stejný klid jako zboží. */
.card-category { background: var(--surface-2); }
.card-category .name { font-family: var(--font); font-size: 14px; font-weight: 700; }

/* --------------------------------------------------------------------------
   Tlačítka: tmavá pilulka, sekundární jen obrys.
   -------------------------------------------------------------------------- */

.btn {
    border-radius: 99px;
    border-color: var(--border);
    background: transparent;
    font-weight: 700;
}

.btn:hover { border-color: var(--inkoust); }

.btn-primary {
    background: var(--inkoust);
    border-color: var(--inkoust);
    color: #FBF8F2;
}

.btn-primary:hover { background: #1C1710; }

/* --------------------------------------------------------------------------
   Cesta, filtry a strom kategorií.
   -------------------------------------------------------------------------- */

.crumbs { font-size: 12.5px; letter-spacing: .01em; }
.crumbs a:hover { color: var(--cihla); }

.category-tree h3 { font-family: var(--font); letter-spacing: .1em; color: var(--text-3); }
.category-tree li > a { border-bottom-color: var(--border); }
.category-tree li.current > a { color: var(--cihla); }

/* --------------------------------------------------------------------------
   Patička: tmavá plocha pod papírem, jako podpis na konci stránky.
   -------------------------------------------------------------------------- */

.foot {
    background: var(--inkoust);
    color: #E6DED1;
    padding-top: 40px;
    padding-bottom: 24px;
}

.foot h3 {
    font-family: "Newsreader", Georgia, serif;
    color: #FBF8F2;
    font-size: 17px;
}

.foot a:hover { color: #FBF8F2; }
.foot-text, .foot-contact { color: #B9AE9E; }

.newsletter-form input {
    background: rgba(251, 248, 242, .08);
    border-color: rgba(251, 248, 242, .22);
    border-radius: 99px;
    color: #FBF8F2;
}

.newsletter-form .btn {
    background: #FBF8F2;
    border-color: #FBF8F2;
    color: var(--inkoust);
}

.copy {
    background: var(--inkoust);
    color: #8A7E70;
    font-size: 12px;
    border-top: 1px solid rgba(251, 248, 242, .12);
}

/* --------------------------------------------------------------------------
   Drobnosti na malých obrazovkách.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
    h1 { font-size: 30px; }
    h2 { font-size: 23px; }
    .banner { padding: 32px 22px; }
    .benefit { border-right: 0; border-bottom: 1px solid var(--border); }
}