/*  Generated: 2026-08-07 15:05:47 */
/* ==========================================================================
   TENANT SHARED STYLES
   ==========================================================================
   Shared color/layout rules for all 42 tenants. Uses CSS custom properties
   so each tenant only needs to set variable VALUES in custom-stylesheet.css.

   Load order: stylesheet.css → responsive.css → THIS FILE → custom-stylesheet.css

   VARIABLE SYSTEM (set in tenant custom-stylesheet.css :root):
   Required:  --primary-color    Brand accent color
   Required:  --white-color      White (#fff)
   Required:  --black-color      Black (#000)
   Optional:  --header-bg        #header background (default: --black-color)
   Optional:  --nav-bg           .head_menu a background (default: --black-color)
   Optional:  --hover-accent-bg  Hover backgrounds for search/nav (default: --primary-color)
   Optional:  --hover-accent-stroke  Text-stroke on hover (default: --primary-color)
   Optional:  --search-border-color  Search input/button border (default: --black-color)
   Optional:  --category-border-color  Category nav border (default: --black-color)
   Optional:  --logo-mobile-width     Mobile logo width (default: 100px)
   Note: category TEXT color is NOT in this file — stylesheet.css sets #333 as default.
         Tenants wanting white text add .leftBoxContainer a.category-top { color: var(--white-color); }
   ========================================================================== */

/* --- Variable Defaults --- */
:root {
    /* Base colors (tenants override these; fallbacks for tenants that don't) */
    --white-color: #fff;
    --black-color: #000;

    /* Derived defaults (override in tenant file to customize) */
    --header-bg: var(--black-color, #000);
    --nav-bg: var(--black-color, #000);
    --hover-accent-bg: var(--primary-color, #00c4ed);
    --hover-accent-stroke: var(--primary-color, #00c4ed);
    --search-border-color: var(--black-color, #000);
    --category-border-color: var(--black-color, #000);
    --logo-mobile-width: 100px;
}

/* --- 1. Primary Color: Text --- */
a:hover,
.index #indexDefaultMainContent h1,
.top_category a:hover h3,
.index #top_znacky a.arrow:hover,
.jssora21l:hover,
.jssora21r:hover,
#top-block a.last.first,
#top-search-menu .top-block a:hover,
#top-block a:hover,
#top-block a.active,
#top-kosik span.kosik-price a:hover,
#top-mujucet a:hover,
.services .services--in h3,
.block-doprava--in > div h3,
.prodejny .block-doprava--in > div a,
.oblast_abecedy a.pismena,
.oblast_vyrobcu h2,
#nejprodavanejsi-button a:hover,
.centerBoxContentsProducts-in .product_znacka a:hover,
.itemTitle a:hover,
.categorie-list ul li a:hover,
.categorie-list ul li a:hover:before,
#go-top a:hover,
#frm-filter-filtr .filtr-column .filtr-input .filtr-text span:after,
#frm-filter-filtr .filtr-column .filtr-input .filtr-text a:after,
#frm-filter-filtr .filtr-column .filtr-input .filtr-text a:hover,
#frm-filter-filtr .filtr-column .filtr-input .filtr-text .ajax-listing.active,
#frm-filter-filtr .filtr-column .filtr-input .filtr-text .ajax-listing:hover,
.filtr-kategorie a:hover,
.filtr-kategorie a.active,
.filtr-kategorie span,
a#backToTop:hover span,
.product-info-detail-row a:hover,
.product-description .param_slozeni strong,
.best-buy .best-buy-price h3 a:hover,
ul.detail-box-links li.selected a,
ul.detail-box-links li.active a,
#top_bottom .top-block a:hover,
#top_bottom .top-block.right a:hover,
#bottom .container li a:hover,
.odber-novinek-bottom .button-odber,
.copyright a:hover,
.header-left .leftBoxContainer a.category-top:hover,
.header-left .leftBoxContainer a.category-top.selected,
.leftBoxContainer .category-top.nav-show-more:hover,
#bottom-0 .banner_bottom_out a.banner_bottom_a:hover {
    color: var(--primary-color);
}

/* --- 2. Primary Color: Background --- */
.nav-tabs-out h3:before,
#top_categoriesContent .categories .categoriesContent,
#top_categoriesContent .categories .categoriesContent::after,
#top-kosik span.total-item,
.compare_heart span.total-item,
#stranka .categories .categoriesContent,
.kontakt-map a:hover::after,
.centerBoxContentsProducts-in .product-button .button-shoping-in:hover,
.services div a:hover,
#next-listing a,
.modal-button-filtr:hover,
.filter-letter:hover,
.filter-letter.active,
#productAdditionalImages .productMainImage a:before,
.best_button a:hover,
.product-button a.button-shoping-in:hover,
.rc-slider-track,
.rc-slider-handle,
.sleva_big,
#obsah_bottom span,
.categories,
.ikony div.extra-sleva,
.centeredContent .sleva {
    background: var(--primary-color);
}

/* --- 3. Primary Color: Border --- */
ul.nav-tabs li a:hover,
ul.nav-tabs li.active a,
#top_categoriesContent .categories .categoriesContent::after,
#obsah-kosiku,
.categorie-list ul li a:hover,
ul.detail-box-links li.selected a,
ul.detail-box-links li.active a,
ul.detail-box-links li.selected span,
ul.detail-box-links li:hover a,
ul.sorter-box li.selected a,
ul.sorter-box li.active a,
ul.sorter-box li.selected span,
ul.sorter-box li:hover a,
.barevne_varianty a.active,
.barevne_varianty a:hover,
.icon a:hover {
    border-color: var(--primary-color);
}

/* --- 4. Text Stroke --- */
.top-search-button span {
    -webkit-text-stroke: 1px var(--search-border-color);
}

/* --- 5. Header & Navigation (variable-driven) --- */
#header {
    background: var(--header-bg);
}

.head_menu a {
    background: var(--nav-bg);
}

.top-search-button {
    background: var(--nav-bg);
    border-color: var(--search-border-color);
}

.top-search-input {
    border-color: var(--search-border-color);
    border-width: 1px;
}

.top-search-button:hover {
    background: var(--hover-accent-bg);
}

.top-search-button:hover span {
    -webkit-text-stroke: 1px var(--hover-accent-stroke);
}

#novinky-akce,
#next-listing a:hover {
    background: var(--header-bg);
}

/* --- 6. Utility Colors --- */
.odber-novinek-bottom .button-odber:hover,
.leftBoxContainer .category-top.nav-show-more,
.leftBoxContainer a.category-top {
    color: var(--black-color);
}

#top_bottom .top-block.right a {
    color: var(--black-color);
    padding-top: 0;
}

.leftBoxContainer a.category-top {
    border-bottom: 1px dashed var(--category-border-color);
}

/* --- 7. Layout Overrides (identical across all tenants) --- */
.header-left .categories {
    border-width: 0;
    padding: 2px 14px;
}

.index .head_menu a {
    padding-left: 25px;
    justify-content: left;
}

#top_bottom .top-block.right a:hover {
    background: var(--white-color);
}
/* NOTE: #top-block background NOT set here — stylesheet.css default is #f1f1f1.
   Tenants wanting white top-block set it in their custom-stylesheet.css. */

/* --- 8. Grayscale Brand Logos on Homepage --- */
.index #top_znacky a img {
    filter: grayscale(100%);
}

/* --- 9. Mobile Logo Width --- */
@media (max-width: 1024px) {
    .linkHomePage a img {
        width: var(--logo-mobile-width);
    }
}

/* --- 10. Beneo brand: bold ikony badge text (core default neutral) --- */
.ikony div {
    font-weight: bold;
}

/* --- 11. Beneo brand: zlato-béžová ikona v 'Proč si vybrat' bloku --- */
:root {
    --proc-block-icon-color: #cda971;
}