/*
 * Akcentová barva tenanta (viz web.theme.ShopThemeService). Výchozí hodnoty tady odpovídají
 * Bootstrapí výchozí modré, takže stránky BEZ injektovaného <style> bloku z fragments/layout.html
 * (typicky admin rozhraní) vypadají přesně jako dřív.
 *
 * Bootstrap 5.3.3 v .btn-primary/.btn-outline-primary/.form-check-input:checked barvu natvrdo
 * zapisuje do vlastních lokálních CSS proměnných, NEŘÍDÍ se globálním --bs-primary — proto se
 * musí přepsat explicitně tady, jinde v projektu to Bootstrap řeší samo přes --bs-primary-rgb
 * (.text-primary/.bg-primary/.link-primary).
 */
:root {
    --shop-accent: #0d6efd;
    --shop-accent-rgb: 13, 110, 253;
    --shop-accent-hover: #0b5ed7;
    --shop-accent-active: #0a58ca;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    --bs-primary: var(--shop-accent);
    --bs-primary-rgb: var(--shop-accent-rgb);
}

.btn-primary {
    --bs-btn-bg: var(--shop-accent);
    --bs-btn-border-color: var(--shop-accent);
    --bs-btn-hover-bg: var(--shop-accent-hover);
    --bs-btn-hover-border-color: var(--shop-accent-hover);
    --bs-btn-active-bg: var(--shop-accent-active);
    --bs-btn-active-border-color: var(--shop-accent-active);
    --bs-btn-focus-shadow-rgb: var(--shop-accent-rgb);
    --bs-btn-disabled-bg: var(--shop-accent);
    --bs-btn-disabled-border-color: var(--shop-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--shop-accent);
    --bs-btn-border-color: var(--shop-accent);
    --bs-btn-hover-bg: var(--shop-accent);
    --bs-btn-hover-border-color: var(--shop-accent);
    --bs-btn-active-bg: var(--shop-accent);
    --bs-btn-active-border-color: var(--shop-accent);
    --bs-btn-focus-shadow-rgb: var(--shop-accent-rgb);
    --bs-btn-disabled-color: var(--shop-accent);
    --bs-btn-disabled-border-color: var(--shop-accent);
}

.form-check-input:checked {
    background-color: var(--shop-accent);
    border-color: var(--shop-accent);
}

.footer-link:hover {
    text-decoration: underline !important;
}

main {
    flex: 1;
}

.product-card {
    transition: box-shadow 0.2s ease;
}

.product-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.product-card .card-img-top {
    height: 200px;
    object-fit: cover;
    background-color: #f8f9fa;
}

.product-price {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--shop-accent);
}

/*
 * Sdílená vizuální komponenta pro čtvercové dlaždice s fotkou a popiskem přes spodní okraj —
 * používá se pro Oddělení i Kategorie na homepage (a Kategorie v department-detail.html).
 * Třídy .department-tile/.category-tile zůstávají navíc v markupu jen jako sémantické/hook
 * třídy pro skin-specifické doladění (viz .clean-garden-skin .image-tile níže), samy o sobě
 * už žádné vlastní CSS nenesou.
 */
.image-tile {
    aspect-ratio: 4 / 3;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.image-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.image-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-tile-placeholder {
    background: linear-gradient(135deg, #dee2e6, #adb5bd);
}

/*
 * Skiny (viz web.theme.HomeSkin) — třída na <body> KAŽDÉ veřejné šablony
 * (th:class="${shopTheme.skin.bodyClass}", ne jen homepage). Bootstrap 5.3 u formulářů/
 * tabulek/karet/list-group/alertů/breadcrumb odvozuje barvy z kořenových proměnných
 * (--bs-body-bg, --bs-body-color, --bs-border-color, --bs-secondary-color, --bs-*-bg-subtle
 * atd.) — ověřeno stažením a prohledáním bootstrap.min.css, ne odhadem. Stačí tedy přepsat
 * pár kořenových proměnných na úrovni .{skin}-skin a většina Bootstrap komponent se
 * automaticky přebarví i mimo homepage. Výjimky, které NEODVOZUJÍ (natvrdo v sobě mají
 * hex, viz stejný postup jako u .btn-primary v dokumentaci nahoře): .btn-primary/
 * .btn-outline-primary (řešeno zvlášť, --shop-accent), .table-light, .bg-white — ty se
 * musí přepsat explicitně.
 */

/* Skin BOTANICAL (public/home-botanical.html) — Fraunces/Work Sans se načítají jen pro tenhle skin, viz fragments/layout.html. */
.botanical-skin {
    --bs-body-bg: #FAF6EF;
    --bs-body-color: #3A2E22;
    --bs-body-color-rgb: 58, 46, 34;
    --bs-emphasis-color: #2B241D;
    --bs-border-color: #E4DACA;
    --bs-border-color-translucent: #E4DACA;
    --bs-secondary-color: rgba(58, 46, 34, 0.65);
    --bs-secondary-bg: #F3ECDD;
    --bs-tertiary-bg: #F3ECDD;
    --bs-light-rgb: 243, 236, 221;
    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 1rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: 'Work Sans', sans-serif;
}

.botanical-skin h1, .botanical-skin h2, .botanical-skin h3,
.botanical-skin h4, .botanical-skin h5, .botanical-skin h6 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
}

.botanical-skin .botanical-heading {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    color: #2B241D;
}

.botanical-skin .botanical-subtext {
    color: #5A4E3D;
}

.botanical-hero {
    background: #F3ECDD;
}

.botanical-hero-img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 18px;
}

.botanical-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(135deg, #EFE7D8, #EFE7D8 10px, #E7DCC6 10px, #E7DCC6 20px);
    color: #8A7A5C;
    font-style: italic;
}

.botanical-product-card {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #E4DACA;
}

/* Skin CLEAN_GARDEN (public/home-clean-garden.html) — Manrope, bílá, ostré hrany, jeden akcent. */
.clean-garden-skin {
    --bs-body-bg: #FFFFFF;
    --bs-body-color: #1F2421;
    --bs-body-color-rgb: 31, 36, 33;
    --bs-emphasis-color: #1F2421;
    --bs-border-color: #E7E5DF;
    --bs-border-color-translucent: #E7E5DF;
    --bs-secondary-color: rgba(31, 36, 33, 0.6);
    --bs-secondary-bg: #F1F0EC;
    --bs-tertiary-bg: #F1F0EC;
    --bs-light-rgb: 241, 240, 236;
    --bs-border-radius: 0.25rem;
    --bs-border-radius-sm: 0.2rem;
    --bs-border-radius-lg: 0.3rem;
    background: var(--bs-body-bg);
    font-family: 'Manrope', sans-serif;
    color: var(--bs-body-color);
}

.clean-garden-skin h1, .clean-garden-skin h2, .clean-garden-skin h3,
.clean-garden-skin h4, .clean-garden-skin h5, .clean-garden-skin h6 {
    font-weight: 800;
}

.clean-garden-skin .image-tile {
    border-radius: 4px;
}

.clean-garden-skin .cg-utility-bar {
    background: #F1F0EC;
    color: #4A4740;
    text-align: center;
    padding: 0.55rem 1rem;
    font-size: 0.8rem;
}

.clean-garden-skin .cg-hero {
    border-bottom: 1px solid #E7E5DF;
}

.clean-garden-skin .cg-hero-img {
    width: 100%;
    height: 420px;
    object-fit: cover;
}

.clean-garden-skin .cg-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F1F0EC;
    color: #8B8880;
    font-style: italic;
}

.clean-garden-skin .cg-eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--shop-accent);
}

.clean-garden-skin .product-card {
    border: 1px solid #E7E5DF;
    border-radius: 4px;
}

/* Skin DARK_ELEGANCE (public/home-dark.html) — Sora, tmavé pozadí, výrazný akcent. */
.dark-skin {
    --bs-body-bg: #15171B;
    --bs-body-color: #EDEBE6;
    --bs-body-color-rgb: 237, 235, 230;
    --bs-emphasis-color: #FFFFFF;
    --bs-border-color: #2A2E35;
    --bs-border-color-translucent: #2A2E35;
    --bs-secondary-color: rgba(237, 235, 230, 0.6);
    --bs-secondary-bg: #1C1F24;
    --bs-tertiary-bg: #1C1F24;
    --bs-light-rgb: 28, 31, 36;
    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 1rem;
    /* .alert-* čte tyhle proměnné přímo (ověřeno v bootstrap.min.css) — nemusí se přepisovat .alert-info/.alert-success/... zvlášť. */
    --bs-info-bg-subtle: #122A33; --bs-info-text-emphasis: #8FD0E8; --bs-info-border-subtle: #1D4552;
    --bs-success-bg-subtle: #132A1B; --bs-success-text-emphasis: #8FD9A6; --bs-success-border-subtle: #1E4A2C;
    --bs-warning-bg-subtle: #332A11; --bs-warning-text-emphasis: #E8C978; --bs-warning-border-subtle: #5A491D;
    --bs-danger-bg-subtle: #331414; --bs-danger-text-emphasis: #E89B9B; --bs-danger-border-subtle: #5A1F1F;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: 'Sora', sans-serif;
}

.dark-skin h1, .dark-skin h2, .dark-skin h3,
.dark-skin h4, .dark-skin h5, .dark-skin h6 {
    font-weight: 700;
}

/* Výjimky, co v Bootstrapu neodvozují z kořenových proměnných (natvrdo hex/bílá), viz komentář nahoře. */
.dark-skin .table-light,
.dark-skin thead.table-light {
    --bs-table-bg: #20242A;
    --bs-table-color: #EDEBE6;
    --bs-table-border-color: #2A2E35;
}

.dark-skin .bg-white {
    background-color: #1C1F24 !important;
}

.dark-skin .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.dark-skin .btn-outline-secondary {
    --bs-btn-color: #EDEBE6;
    --bs-btn-border-color: #3A3F47;
    --bs-btn-hover-bg: #2A2E35;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: #3A3F47;
    --bs-btn-disabled-color: #6E6A62;
}

.dark-skin .btn-outline-danger {
    --bs-btn-color: #E89B9B;
    --bs-btn-border-color: #5A1F1F;
    --bs-btn-hover-bg: #5A1F1F;
    --bs-btn-hover-color: #fff;
}

.dark-skin .navbar,
.dark-skin footer {
    background: #0E1013 !important;
}

.dark-skin .de-heading {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #FFFFFF;
}

.dark-skin .de-subtext {
    color: #ABA79E;
}

.dark-skin .de-hero {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
}

.dark-skin .de-hero-img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    filter: brightness(0.55);
}

.dark-skin .de-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(135deg, #1E2126, #1E2126 10px, #24272D 10px, #24272D 20px);
    color: #6E6A62;
    font-style: italic;
}

.dark-skin .de-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
}

.dark-skin .card,
.dark-skin .product-card {
    background: #1C1F24;
    border: 1px solid #2A2E35;
    color: #EDEBE6;
}

.dark-skin .card-title a,
.dark-skin .text-dark {
    color: #EDEBE6 !important;
}

.image-tile-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 1rem 0.6rem;
    color: #fff;
    font-weight: 600;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
}
