/*
 * SHOPTET CUSTOM CSS – BiosImport
 * GitHub: https://github.com/Softema/biosimport
 */

/* ============================================================
   GLOBÁLNÍ PROMĚNNÉ
   ============================================================ */

:root {
    --color-primary:        #f5a623 !important;
    --color-primary-hover:  #d4891a !important;
    --color-secondary:      #f5a623 !important;
    --color-tertiary:       #f5a623 !important;
}

/* ============================================================
   ZÁKLADNÍ TYPOGRAFIE
   ============================================================ */

body {
    font-family: 'Source Sans 3', sans-serif !important;
    color: #333333 !important;
    background-color: #ffffff !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

/* ============================================================
   HORNÍ INFO LIŠTA
   ============================================================ */

.top-navigation-bar {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    font-size: 13px !important;
}

.top-navigation-bar a,
.top-navigation-bar .project-phone,
.top-navigation-bar .top-navigation-contacts,
.top-navigation-bar .top-navigation-menu a {
    color: #ffffff !important;
}

.top-navigation-bar a:hover {
    color: #f5a623 !important;
}

.top-nav-button-login {
    background-color: #f5a623 !important;
    border-color: #f5a623 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 6px 16px !important;
}

/* ============================================================
   HEADER
   ============================================================ */

#header {
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
}

/* ============================================================
   NAVIGACE
   ============================================================ */

.navigation-in {
    background-color: #ffffff !important;
}

.navigation-in > ul > li > a,
.navigation-in > ul > li > a b {
    color: #1a1a1a !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

.navigation-in > ul > li > a:hover,
.navigation-in > ul > li.open > a {
    color: #f5a623 !important;
    background-color: transparent !important;
}

.navigation-in > ul > li.active > a {
    color: #f5a623 !important;
    border-bottom: 3px solid #f5a623 !important;
}

/* ============================================================
   TLAČÍTKA – zaoblení 10px, černý text
   ============================================================ */

.btn-cart,
.add-to-cart-button,
.btn-conversion,
.btn-primary,
button[type="submit"],
input[type="submit"] {
    background-color: #f5a623 !important;
    border-color: #f5a623 !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 13px !important;
}

.btn-cart:hover,
.add-to-cart-button:hover,
.btn-conversion:hover,
.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: #d4891a !important;
    border-color: #d4891a !important;
    color: #1a1a1a !important;
}

/* Vyhledávání tlačítko */
.search-form .btn-default,
.search .btn-default,
.search-form .btn,
.search .btn {
    background-color: #f5a623 !important;
    border-color: #f5a623 !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    border-radius: 0 10px 10px 0 !important;
    text-transform: uppercase !important;
}

.search-form .btn-default:hover,
.search .btn-default:hover {
    background-color: #d4891a !important;
    border-color: #d4891a !important;
}

/* Pobočky stránka – černý text */
.branch-detail a.btn,
.branch-detail .btn,
[class*="branch"] a.btn,
[class*="branch"] .btn {
    color: #1a1a1a !important;
}

/* ============================================================
   VYHLEDÁVÁNÍ – input bez border artefaktů
   ============================================================ */

.search-input,
.query-input,
input[type="search"] {
    border-radius: 10px 0 0 10px !important;
    border-color: #dddddd !important;
    border-right: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
}

.search-input:focus,
.query-input:focus,
input[type="search"]:focus {
    border-color: #f5a623 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ============================================================
   PRODUKTOVÉ KARTY
   ============================================================ */

.product {
    border: 1px solid #eeeeee !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
    background-color: #ffffff !important;
}

.product:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.10) !important;
    transform: translateY(-2px) !important;
}

.product .name,
.product .name span {
    color: #1a1a1a !important;
    font-weight: 600 !important;
}

.product .name:hover,
.product .name:hover span {
    color: #f5a623 !important;
}

.price-final strong,
.price.price-final {
    color: #f5a623 !important;
    font-weight: 700 !important;
    font-size: 1.2em !important;
}

.flag-tip {
    background-color: #f5a623 !important;
    color: #1a1a1a !important;
}

.flag-new { background-color: #2ecc71 !important; }
.flag-action { background-color: #e74c3c !important; }

/* ============================================================
   NADPISY SEKCÍ na homepage
   ============================================================ */

.homepage-group-title {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 24px !important;
    padding-bottom: 12px !important;
    border-bottom: 3px solid #f5a623 !important;
    display: inline-block !important;
}

/* ============================================================
   BENEFIT BANNER – šedé pozadí + zlaté proužky full-width
   ============================================================ */

/* Shoptet struktura:
   #content-wrapper.container  (max-width, padding)
     .content-wrapper-in
       main#content.wide
         .benefitBanner.position--benefitHomepage  <-- zde
*/

/* Zrušit overflow clip na všech rodičích */
#content-wrapper,
.content-wrapper-in,
#content.wide,
main.content {
    overflow: visible !important;
}

/* Samotný banner – roztáhnout přes celou šířku viewportu */
.benefitBanner {
    background-color: #f8f8f8 !important;
    border-top: 3px solid #f5a623 !important;
    border-bottom: 3px solid #f5a623 !important;
    padding: 20px !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.benefitBanner__item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.benefitBanner__picture {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    flex-shrink: 0 !important;
}

.benefitBanner__picture img,
.benefitBanner__img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
}

.benefitBanner__title {
    font-weight: 700 !important;
    font-size: 0.95em !important;
    color: #1a1a1a !important;
}

.benefitBanner__description,
.benefitBanner__data {
    font-size: 0.85em !important;
    color: #666 !important;
}


/* ============================================================
   FORMULÁŘE – focus
   ============================================================ */

input:focus,
textarea:focus,
select:focus {
    border-color: #f5a623 !important;
    box-shadow: 0 0 0 2px rgba(245,166,35,0.2) !important;
    outline: none !important;
}

/* ============================================================
   STRÁNKOVÁNÍ
   ============================================================ */

.pagination > .active > a,
.pagination > .active > span {
    background-color: #f5a623 !important;
    border-color: #f5a623 !important;
    color: #1a1a1a !important;
}

.pagination > li > a:hover {
    background-color: #f5a623 !important;
    border-color: #f5a623 !important;
    color: #1a1a1a !important;
}

/* ============================================================
   PATIČKA – tmavá (Shoptet výchozí)
   ============================================================ */

#footer {
    background-color: #1a1a1a !important;
    color: #cccccc !important;
    border-top: 3px solid #f5a623 !important;
}

#footer a { color: #cccccc !important; }
#footer a:hover { color: #f5a623 !important; }

/* ============================================================
   KOŠÍK – ikona počítadlo
   ============================================================ */

.cart-count,
.cart-count-number {
    background-color: #f5a623 !important;
    border-color: #f5a623 !important;
    color: #1a1a1a !important;
}

/* ============================================================
   CENOVÝ SLIDER
   ============================================================ */

.ui-slider-range { background-color: #f5a623 !important; }
.ui-slider-handle { border-color: #f5a623 !important; }

/* ============================================================
   OBECNÉ ODKAZY
   ============================================================ */

a { color: #f5a623 !important; }
a:hover, a:focus { color: #d4891a !important; }

.navigation-in a,
.btn-cart,
.btn-conversion,
.btn-primary,
.add-to-cart-button,
.top-navigation-bar a {
    text-decoration: none !important;
}

/* ============================================================
   STRÁNKA POBOČKY – tlačítka s černým textem
   ============================================================ */

.branch-detail .btn,
.branches .btn,
[class*="branch"] .btn,
[class*="pobock"] .btn,
.branch-map-link {
    color: #1a1a1a !important;
    background-color: #f5a623 !important;
    border-color: #f5a623 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

/* ============================================================
   KOŠÍK TLAČÍTKO V HEADERU – text na střed
   ============================================================ */

.header-cart a,
.header-cart .btn,
[class*="header-cart"] a,
[class*="header-cart"] .btn,
[class*="cart"] > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    background-color: #f5a623 !important;
    color: #1a1a1a !important;
    border-color: #f5a623 !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* ============================================================
   BADGE FIRMY.CZ – bílý text (přebití globálního a { color })
   ============================================================ */

#onas-sekce a.badge,
#onas-sekce .badge,
a.badge[href*="firmy.cz"] {
    background-color: #4caf50 !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    padding: 8px 20px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-block !important;
    border: none !important;
}

#onas-sekce a.badge:hover,
a.badge[href*="firmy.cz"]:hover {
    background-color: #388e3c !important;
    color: #ffffff !important;
}