/*
 * K-BEAUTY ROSÉ – šablona vzhledu
 * Jemná růžová + béžová, pro obchod s korejskou kosmetikou.
 * Vkládá se za základní styl obchodu.
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Jost:wght@400;500;600&display=swap');

/* 1. NASTAVENÍ Z MANIFESTU ------------------------------------------------ */
:root {
    --rose:      var(--t-hlavni_barva, #c4848f);
    --beige:     var(--t-bezova, #f8f2ed);
    --rose-soft: var(--t-ruzova_plocha, #f6e3e3);
    --brown:     var(--t-barva_tlacitek, #4a3531);
}

/* 2. PROMĚNNÉ ZÁKLADNÍHO VZHLEDU ------------------------------------------ */
:root {
    --acc:       var(--rose);
    --acc-2:     #a86b76;
    --radius:    18px;
    --font:      'Jost', 'Helvetica Neue', Arial, sans-serif;
    --bg:        var(--beige);
    --surface:   #fffdfb;
    --surface-2: var(--rose-soft);
    --border:    #ecdfd8;
    --text:      #3b2f2d;
    --text-2:    #7b6a66;
    --text-3:    #a8968f;
    --ok:        #6f8f6b;
    --err:       #b85c5c;
}

body {
    background: var(--bg) url('obrazky/pozadi.png') center top / cover no-repeat fixed;
    color: var(--text);
    font-family: var(--font);
    letter-spacing: .01em;
}

/* Obsah na průsvitném panelu, aby text neležel přímo na fotce pozadí. */
.wrap {
    background: rgba(255, 253, 251, .82);
    backdrop-filter: blur(12px);
    padding: 28px 32px 48px;
}
header .wrap, footer .wrap {
    background: transparent;
    backdrop-filter: none;
    border-radius: 0;
    box-shadow: none;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

a { color: var(--acc-2); }
a:hover { color: var(--acc); }

/* 3. HLAVIČKA ------------------------------------------------------------ */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 253, 251, .72);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(236, 223, 216, .8);
}
body.t-barevna_hlavicka header { background: rgba(248, 242, 237, .8); }

header .brand {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 28px;
    letter-spacing: .04em;
    color: var(--text);
}

header .search input {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding-left: 18px;
}
header .search input:focus {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px var(--rose-soft);
    outline: 0;
}

header .cart-link {
    background: var(--brown);
    color: #fff;
    border-radius: 999px;
    padding: 8px 16px;
}

nav.main a {
    color: var(--text-2);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .14em;
    font-weight: 500;
}
nav.main a:hover,
nav.main a.active { color: var(--acc-2); }

/* 4. NADPISY ------------------------------------------------------------- */
body.t-patkove_nadpisy h1,
body.t-patkove_nadpisy h2,
body.t-patkove_nadpisy h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    letter-spacing: .01em;
}
h1 { font-size: 40px; }
h2 { font-size: 30px; }

/* 5. BANNER -------------------------------------------------------------- */
.banner {
    background: var(--rose-soft);
    border-radius: var(--radius);
    border: 0;
    color: var(--text);
}

/* 6. DLAŽDICE ZBOŽÍ ------------------------------------------------------ */
.card {
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(80, 50, 45, .05), 0 8px 24px rgba(80, 50, 45, .06);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(80, 50, 45, .07), 0 16px 36px rgba(80, 50, 45, .10);
}
.card .thumb { background: var(--beige); }
.card .thumb img { transition: transform .3s ease; }
.card:hover .thumb img { transform: scale(1.04); }

.card .name {
    font-weight: 500;
    color: var(--text);
}
.card .price {
    color: var(--acc-2);
    font-weight: 600;
    font-size: 17px;
}
.card .was {
    color: var(--text-3);
}

/* Štítky */
.tag {
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 10px;
    font-weight: 500;
}
.tag-sale { background: var(--rose); color: #fff; }
.tag-new  { background: var(--rose-soft); color: var(--acc-2); }
.soldout  { background: #eee6e1; color: var(--text-2); }

/* 7. TLAČÍTKA ------------------------------------------------------------ */
.btn {
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: .04em;
}
.btn-primary,
.card-buy,
header .cart-link {
    background: var(--brown);
    border-color: var(--brown);
    color: #fff;
    border-radius: 999px;
}
.btn-primary:hover,
.card-buy:hover {
    background: #2f1f1c;
    border-color: #2f1f1c;
}
.btn-lg { padding: 14px 32px; }

/* 8. FILTRY, ŘAZENÍ, STRÁNKOVÁNÍ, HODNOCENÍ ------------------------------ */
.filters,
.toolbar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.pager a {
    border-radius: 999px;
    border-color: var(--border);
}
.pager a.active,
.pager .active {
    background: var(--rose);
    border-color: var(--rose);
    color: #fff;
}
.stars { color: #d9a66b; }
.review {
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

/* 9. PATIČKA ------------------------------------------------------------- */
footer {
    background: rgba(246, 227, 227, .85);
    backdrop-filter: blur(8px);
    border-top: 0;
    color: var(--text-2);
}
footer a { color: var(--text); }
footer .copy { color: var(--text-3); font-size: 12px; }

/* 10. REAKCE NA NASTAVENÍ ------------------------------------------------ */
body.t-sirka_obsahu--uzka   .wrap { max-width: 960px; }
body.t-sirka_obsahu--siroka .wrap { max-width: 1400px; }

/* 11. MOBIL -------------------------------------------------------------- */
@media (max-width: 900px) {
    body { background-attachment: scroll; background-size: auto 100%; }
}

@media (max-width: 700px) {
    header .brand { font-size: 22px; }
    h1 { font-size: 30px; }
    h2 { font-size: 24px; }
    header .top { gap: 10px; }
    .card .price { font-size: 16px; }
}