/*
 * 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; }
}

/* --------------------------------------------------------------------------
   DOPLNĚK (říjen 2026) – hlavní menu: čtyři skupiny, „Péče o pleť“ jako
   korejská rutina v krocích 1–7. Kroky čísluje šablona podle pořadí
   položek v menu, Péče o pleť musí být v menu první.
   -------------------------------------------------------------------------- */

nav.main {
    position: relative;
}

nav.main > ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

nav.main > ul > li,
nav.main li.has-sub {
    position: static;
}

nav.main > ul > li > a {
    padding: 14px 18px 12px;
    border-bottom: 2px solid transparent;
    font-size: 12.5px;
    transition: color .15s, border-color .15s;
}

nav.main > ul > li.has-sub > a::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 0 3px 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .55;
}

nav.main > ul > li > a:hover,
nav.main > ul > li:hover > a,
nav.main > ul > li:focus-within > a,
nav.main > ul > li > a.active {
    color: var(--acc-2);
    border-bottom-color: var(--rose);
}

/* Nadpis sloupce v panelu */
nav.main .sub > li > a {
    padding: 0 0 6px;
    color: var(--text);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
}

nav.main .sub-sub {
    display: grid;
    gap: 0;
    padding: 0;
}

nav.main .sub-sub a {
    padding: 3px 0;
    color: var(--text-2);
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

nav.main .sub a:hover,
nav.main .sub-sub a:hover {
    background: none;
    color: var(--acc-2);
}

/* Kroky rutiny: číslo v kroužku před nadpisem */
nav.main > ul > li:first-child > .sub {
    counter-reset: krok;
}

nav.main > ul > li:first-child > .sub > li {
    counter-increment: krok;
}

nav.main > ul > li:first-child > .sub > li::before {
    content: counter(krok);
    position: relative;
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    margin-bottom: 12px;
    border: 1px solid var(--rose);
    border-radius: 50%;
    background: var(--surface);
    color: var(--acc-2);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    font-variant-numeric: lining-nums;
    line-height: 1;
}

nav.main > ul > li:first-child > .sub > li:hover::before {
    background: var(--rose);
    color: #fff;
}

/* Počítač: panel přes celou šířku hlavičky, otevírá se najetím */
@media (min-width: 861px) {
    nav.main .sub {
        left: 0;
        right: 0;
        top: 100%;
        min-width: 0;
        padding: 26px 34px 28px;
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0 0 18px 18px;
        background: var(--surface);
        box-shadow: 0 24px 40px rgba(74, 53, 49, .12);
    }

    nav.main li.has-sub:hover > .sub,
    nav.main li.has-sub:focus-within > .sub {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 220px));
        justify-content: center;
        align-items: start;
        gap: 22px 40px;
    }

    /* Péče o pleť: sedm kroků vedle sebe na jedné lince */
    nav.main > ul > li:first-child:hover > .sub,
    nav.main > ul > li:first-child:focus-within > .sub {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        justify-content: stretch;
        gap: 0 14px;
    }

    nav.main > ul > li:first-child > .sub::before {
        content: "";
        position: absolute;
        left: 48px;
        right: 48px;
        top: 40px;
        height: 1px;
        background: var(--border);
    }
}

@media (min-width: 861px) and (max-width: 1060px) {
    nav.main > ul > li:first-child:hover > .sub,
    nav.main > ul > li:first-child:focus-within > .sub {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 22px 18px;
    }

    nav.main > ul > li:first-child > .sub::before {
        display: none;
    }
}

/* Telefon: menu pod ☰, skupina se rozbalí klepnutím */
@media (max-width: 860px) {
    nav.main {
        background: var(--surface);
    }

    nav.main > ul {
        gap: 0;
        padding: 0;
    }

    nav.main > ul > li > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 18px;
        border-bottom: 1px solid var(--border);
        color: var(--text);
        font-size: 13px;
    }

    nav.main > ul > li > a:hover,
    nav.main > ul > li:hover > a,
    nav.main > ul > li:focus-within > a {
        border-bottom-color: var(--border);
    }

    nav.main > ul > li.open > a {
        color: var(--acc-2);
    }

    nav.main .sub {
        padding: 6px 18px 12px;
        border: 0;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        background: var(--beige);
        box-shadow: none;
    }

    nav.main li.has-sub:focus-within > .sub {
        display: none;
    }

    nav.main li.has-sub.open > .sub {
        display: block;
    }

    nav.main .sub > li {
        padding: 8px 0;
        border-bottom: 1px dashed var(--border);
    }

    nav.main .sub > li:last-child {
        border-bottom: 0;
    }

    nav.main .sub > li > a {
        padding: 0;
        font-family: var(--font);
        font-size: 14.5px;
        font-weight: 500;
    }

    /* Podkategorie v jednom řádku pod nadpisem */
    nav.main .sub-sub {
        display: flex;
        flex-wrap: wrap;
        gap: 0 12px;
        padding: 2px 0 0;
    }

    nav.main .sub-sub a {
        padding: 2px 0;
        font-size: 12.5px;
    }

    /* Kroky rutiny: číslo vlevo, nadpis a podkategorie vedle */
    nav.main > ul > li:first-child > .sub > li {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 0 10px;
        align-items: center;
    }

    nav.main > ul > li:first-child > .sub > li::before {
        width: 24px;
        height: 24px;
        margin: 0;
        font-size: 15px;
    }

    nav.main > ul > li:first-child > .sub .sub-sub {
        grid-column: 2;
    }
}

/* Telefon: ☰, logo, účet a košík v jednom řádku, hledání pod nimi */
@media (max-width: 860px) {
    header .top {
        gap: 10px 8px;
    }

    header .account-link {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 50%;
        background: #fff;
        font-size: 0;
    }

    header .account-link::before {
        content: "";
        width: 18px;
        height: 18px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}

@media (max-width: 700px) {
    .wrap {
        padding-left: 16px;
        padding-right: 16px;
    }

    header .brand {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    header .cart-link {
        padding: 8px 12px;
    }

    header .cart-link .cart-label {
        display: inline-grid;
        font-size: 0;
    }

    header .cart-link .cart-label::before {
        content: "";
        width: 18px;
        height: 18px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}