/* ==========================================================================
   CSS Proměnné - hlavní barvy projektu
   ========================================================================== */

:root {
    /* Primární barvy */
    --color-primary: #a5803a;           /* Zlatá/hnědá - hlavní barva */
    --color-primary-dark: #8a6a2f;      /* Tmavší zlatá - hover stavy */
    --color-secondary: #644e25;         /* Tmavě hnědá - top bar, newsletter */
    --color-secondary-light: #8a7245;   /* Střední hnědá - oddělovače */

    /* Neutrální barvy */
    --color-white: #ffffff;
    --color-black: #333333;
    --color-gray-dark: #888888;
    --color-gray: #e5e5e5;
    --color-gray-light: #f0f0f0;
    --color-gray-lighter: #f5f5f5;
}

/* ==========================================================================
   Header - barevnost dle grafického návrhu
   ========================================================================== */

/* Top bar - tmavě hnědá */
#top-block {
    background-color: var(--color-secondary);
}

#top-block a:after,
#top-block span:after {
    background: var(--color-secondary-light);
}

/* Hlavní hlavička - zlatá/hnědá */
#top {
    background-color: var(--color-primary);
}

/* Text v hlavičce - bílý */
#top .subblock-content a,
#top .subblock-content span {
    color: var(--color-white);
}

#top-kosik-ucet .top--subblock .subblock-content a {
    color: var(--color-white);
}

/* Ikony v hlavičce - bílé na zlatém pozadí */
#top-kosik-ucet .top--subblock img {
    filter: brightness(0) invert(1);
}

/* Ikona obálky v newsletter sekci - bílá/žlutá na tmavém pozadí */
#novinky-akce .novinky_in img {
    filter: brightness(0) invert(1);
}

/* ==========================================================================
   Oblíbené kategorie - větší kulaté obrázky
   ========================================================================== */

.top_category .top_category--img {
    width: 130px;
    height: 130px;
}

.top_category a {
    width: calc((100% - 80px) / 9);
    min-width: 130px;
}

/* ==========================================================================
   Filtry - posuvníky ceny (rc-slider)
   ========================================================================== */

.rc-slider-track {
    background-color: var(--color-primary) !important;
}

.rc-slider-handle {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.rc-slider-handle:hover,
.rc-slider-handle:active,
.rc-slider-handle:focus {
    border-color: var(--color-primary-dark) !important;
}

.rc-slider-rail {
    background-color: var(--color-gray) !important;
}

/* ==========================================================================
   Produktové karty - dle grafického návrhu
   ========================================================================== */

/* Ostré rohy */
.index .centerBoxContentsProducts-in,
.centerBoxContentsProducts-in {
    border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -ms-border-radius: 0 !important;
    border: none !important;
}

/* Odsazení produktů od záložek (Nejprodávanější, Novinky...) */
.productListing {
    margin-top: 20px;
}

/* Orámování produktových karet - základní rámeček */
.centerBoxContentsProducts,
.productListing .centerBoxContentsProducts,
#indexProductList .centerBoxContentsProducts {
    border: 1px solid var(--color-gray) !important;
    margin-right: -1px; /* překrytí pravého okraje pro zamezení zdvojení */
    margin-bottom: -1px; /* překrytí spodního okraje pro zamezení zdvojení */
}

/* Wrapper pro produkty - pravý okraj (pouze listing, ne HP) */
.productListing {
    border-right: 1px solid var(--color-gray);
}

/* Tlačítko Přidat do košíku - šedivé pozadí, mírně zakulacené, bez rámečku */
.centerBoxContentsProducts-in .product-button .button-shoping-in {
    background: var(--color-gray-light);
    border: none;
    border-radius: 5px;
}

.centerBoxContentsProducts-in .product-button .button-shoping-in:hover {
    background: var(--color-gray);
}

/* ==========================================================================
   Footer - barevnost dle grafického návrhu
   ========================================================================== */

/* Newsletter sekce - tmavě hnědá */
#bottom-0 {
    background: var(--color-secondary);
}

#novinky-akce {
    background: var(--color-secondary);
}

/* Tlačítko odběru - zlatá/hnědá + centrování textu */
.odber-novinek-bottom .button-odber {
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.odber-novinek-bottom .button-odber:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

/* Hlavní část patičky - bílé pozadí */
#bottom {
    background-color: var(--color-white) !important;
    color: var(--color-black) !important;
}

#bottom a {
    color: var(--color-black) !important;
}

#bottom a:hover {
    color: var(--color-primary) !important;
}

#bottom .container_in {
    background-color: var(--color-white) !important;
}

span.bottom_title {
    color: var(--color-black);
}

.footerbox-full span.bottom_title {
    color: var(--color-black);
}

/* Spodní copyright pruh - světle šedá */
#bottom-2,
#bottom-2 .container_in {
    background: var(--color-gray-lighter);
}

/* Logo v patičce - tmavší hnědá na bílém pozadí */
#bottom .container .footerbox.one img {
    filter: brightness(0) saturate(100%) invert(28%) sepia(30%) saturate(700%) hue-rotate(358deg) brightness(95%) contrast(90%) !important;
}

/* ==========================================================================
   Recenze - úprava spodního odsazení
   ========================================================================== */

.recenze-section {
    margin-bottom: 0;
}

/* ==========================================================================
   Blog sekce na HP
   ========================================================================== */

.blog-section {
    padding: 20px 0 60px 0;
    background: var(--color-white);
}

.blog-section h2.centerBoxHeading {
    text-align: left;
    margin-bottom: 30px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.blog-card {
    background: var(--color-white);
}

.blog-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.blog-card--img {
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 16px;
}

.blog-card--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card a:hover .blog-card--img img {
    transform: scale(1.05);
}

.blog-card--content {
    padding: 0 4px;
}

.blog-card--date {
    display: block;
    font-size: 1.3rem;
    color: var(--color-gray-dark);
    margin-bottom: 8px;
}

.blog-card--title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-black);
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.blog-card--link {
    font-size: 1.4rem;
    color: var(--color-black);
    text-decoration: underline;
}

.blog-card a:hover .blog-card--link {
    color: var(--color-primary);
}

@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Menu Procházet kategorie - hover fix a šířka
   ========================================================================== */

/* Oprava hover mezery - přidáme padding-bottom k header-left pro překlenutí mezery */
#top_bottom .header-left {
    padding-bottom: 15px;
    margin-bottom: -15px;
}

/* Oprava oddělovače - výška musí odpovídat původní výšce bez paddingu */
#top_bottom .header-left::after {
    height: 40px;
    top: 0;
    bottom: auto;
    margin-top: 0;
    margin-bottom: 0;
}

/* Posun dropdown menu nahoru + rozšíření - aby se dotýkalo spodní linky hlavičky */
.index .columnLeft {
    top: 100%;
    margin-top: -10px;
    min-width: 280px;
}

.header-left .categories {
    min-width: 280px;
}

/* Položky menu - větší padding pro lepší čitelnost */
.leftBoxContainer a.category-top,
.leftBoxContainer .category-top.nav-show-more {
    padding: 12px 16px 12px 45px !important;
    position: relative;
    white-space: nowrap;
}

/* Fontové ikony pro položky menu */
.leftBoxContainer a.category-top:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--color-primary);
}

/* Výchozí ikona pro všechny kategorie */
.leftBoxContainer a.category-top:before {
    content: "\f1bb"; /* fa-tree */
}

/* Specifické ikony pro jednotlivé kategorie */
.leftBoxContainer a.category-top:nth-child(1):before {
    content: "\f1bb"; /* fa-tree - Štípané dřevo */
}
.leftBoxContainer a.category-top:nth-child(2):before {
    content: "\f0c9"; /* fa-bars - Krajiny */
}
.leftBoxContainer a.category-top:nth-child(3):before {
    content: "\f015"; /* fa-home - Střešní latě */
}
.leftBoxContainer a.category-top:nth-child(4):before {
    content: "\f0c8"; /* fa-square - Prkna */
}
.leftBoxContainer a.category-top:nth-child(5):before {
    content: "\f0db"; /* fa-columns - Trámy */
}
.leftBoxContainer a.category-top:nth-child(6):before {
    content: "\f07e"; /* fa-arrows-h - Fošny */
}
.leftBoxContainer a.category-top:nth-child(7):before {
    content: "\f00a"; /* fa-th - Spárovky */
}
.leftBoxContainer a.category-top:nth-child(8):before {
    content: "\f009"; /* fa-th-large - Překližka */
}
.leftBoxContainer a.category-top:nth-child(9):before {
    content: "\f009"; /* fa-th-large - Palubky */
}

@media (min-width: 768px) and (max-width: 1024px) {
    .top_category a:last-child {
        border-left: 0px solid var(--color-gray);
    }
}

/* ==========================================================================
   Produktový detail - HLAVNÍ LAYOUT (galerie + info modul)
   ========================================================================== */

/* TODO: Vyřešit layout 50%/50% - aktuálně ponechán původní float layout */
/* Původní hodnoty: .productDetailLeft 48%, #productDetailRight 48% */

/* ==========================================================================
   Responsivní helper třídy - desktop/mobile zobrazení
   ========================================================================== */

/* Desktop - skrýt mobile-only prvky */
.mobile-only {
    display: none !important;
}

.desktop-only {
    display: block !important;
}

/* Mobil - přepnout zobrazení */
@media (max-width: 992px) {
    .mobile-only {
        display: block !important;
    }

    .desktop-only {
        display: none !important;
    }
}

/* ==========================================================================
   Produktový detail - galerie obrázků dle grafické předlohy
   ========================================================================== */

/* Kontejner pro galerii - flexbox layout */
#productImagesBox {
    display: flex;
    flex-direction: row;
    gap: 15px;
    position: relative;
    align-items: flex-start; /* Zarovnání miniatur nahoru */
}

/* Skrytí clearBoth uvnitř galerie - narušuje flexbox */
#productImagesBox > .clearBoth {
    display: none;
}

/* Miniatury - vlevo, svislý sloupec */
#productAdditionalImages-obal {
    order: 1;
    width: 110px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

#productAdditionalImages {
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
}

#productAdditionalImages ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#productAdditionalImages .productMainImage {
    padding: 0;
    margin: 0;
    float: none;
    width: auto;
}

/* Miniatury - stylování bez zaoblených rohů */
#productAdditionalImages .productMainImage a {
    border: 2px solid var(--color-gray);
    border-radius: 0;
    padding: 3px;
    transition: border-color 0.2s ease;
    display: block;
    float: none;
}

#productAdditionalImages .productMainImage a img {
    border-radius: 0;
    display: block;
    width: 100px;
    height: 100px;
}

/* Aktivní miniatura - zlatý/hnědý rámeček */
#productAdditionalImages .productMainImage.current a,
#productAdditionalImages .productMainImage a:hover {
    border-color: var(--color-primary);
}

/* Skrytí původního spodního zvýraznění (zelená linka) */
#productAdditionalImages .productMainImage a:before {
    display: none;
}

/* Odkaz "+X dalších" - BEZ rámečku */
#productAdditionalImages .morePhotos {
    padding: 0;
    margin: 0;
}

#productAdditionalImages .morePhotos a {
    border: none !important;
    padding: 0;
    background: none;
    color: var(--color-black);
    font-size: 1.3rem;
    display: block;
    text-align: center;
}

#productAdditionalImages .morePhotos a:hover {
    color: var(--color-primary);
}

/* Hlavní fotografie - vpravo, s rámečkem */
#productMainImage {
    order: 2;
    flex: 1;
    float: none;
}

#productMainImage .productDetailSlider {
    border: 2px solid var(--color-gray);
    padding: 4px;
    display: inline-block;
}

#productMainImage .productDetailSlider a {
    display: block;
}

#productMainImage .productDetailSlider img {
    display: block;
}

/* 24h ikona - pozice */
#productImagesBox .product-list-24h {
    position: absolute;
    top: 10px;
    left: 130px;
    z-index: 10;
}

/* YouTube video ikona - pozice */
#productImagesBox .youtube-video {
    position: absolute;
    bottom: 20px;
    left: 130px;
    z-index: 10;
}

/* Skrytí navigačních šipek v galerii */
#productMainImage .owl-nav,
#productMainImage .owl-prev,
#productMainImage .owl-next,
.productDetailSlider .owl-nav {
    display: none !important;
}

/* ==========================================================================
   Produktový detail - INFO MODUL (pravá strana)
   ========================================================================== */

/* Detail-blok - flexbox pro změnu pořadí */
#detail-blok {
    display: flex !important;
    flex-direction: column !important;
}

/* Pořadí prvků dle designu: Název → Popis → Dostupnost → Cena → Tlačítka */
#detail-blok > .name_and_logo { order: 1 !important; }
#detail-blok > .right-description { order: 2 !important; margin-bottom: 15px !important; }
#detail-blok > .detail-blok-in { order: 3 !important; }
#detail-blok > .ikony { order: 10 !important; display: none !important; } /* Skrýt ikony */
#detail-blok > .clearBoth { display: none !important; }

/* Detail-blok-in - pořadí: Dostupnost → Cena → Tlačítka → Box firemní */
.detail-blok-in {
    display: flex !important;
    flex-direction: column !important;
}

.detail-blok-in > .expedice_text { order: 1 !important; }
.detail-blok-in > .ceny-obal-out { order: 2 !important; }
.detail-blok-in > form { order: 3 !important; }
.detail-blok-in > #cartAdd-out { order: 3 !important; }
.detail-blok-in > .firemni-box { order: 4 !important; }
.detail-blok-in > .clearBoth { display: none !important; }

/* Dostupnost - zelené checkmarky */
.productDetail .expedice_text_in {
    color: #4CAF50;
}

.productDetail .expedice_text_in:before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 6px;
}

/* Cena s kuponem - zelený pruh */
.productDetail .ceny-coupon-obal-product {
    background: #4CAF50;
    color: white;
    padding: 12px 15px;
    margin-bottom: 10px;
}

.productDetail .coupon-price-wrapper {
    display: block;
}

.productDetail .coupon-price-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: white;
}

.productDetail .coupon-code-badge {
    display: block;
    font-size: 1.2rem;
    margin-top: 5px;
    color: white;
}

.productDetail .coupon-code-badge strong {
    background: rgba(255,255,255,0.2);
    padding: 2px 6px;
    border-radius: 3px;
}

.productDetail .coupon-buy-link {
    display: none; /* Skryjeme, tlačítko bude níže */
}

.productDetail .coupon-tab {
    display: none; /* Skryjeme původní tab */
}

/* Hlavní cena */
.productDetail .nase-cena-hodnota {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-black);
}

.productDetail .nase-cena-hodnota strong {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--color-gray-dark);
}

/* Přeškrtnutá původní cena */
.productDetail .doporucena-cena span {
    text-decoration: line-through;
    color: var(--color-gray-dark);
    font-size: 1.4rem;
}

.productDetail .sleva-hodnota {
    color: #d32f2f;
    font-size: 1.3rem;
}

/* ==========================================================================
   Produktový detail - TLAČÍTKO KOŠÍKU
   ========================================================================== */

/* Kontejner pro tlačítko a množství */
.productDetail #cartAdd-out {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0;
}

.productDetail #cartAdd {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

/* Hlavní tlačítko "Přidat do košíku" - zelené */
.productDetail .kosik-button button,
.productDetail .kosik-button input[type="submit"] {
    background: #4CAF50 !important;
    border: none !important;
    color: white !important;
    padding: 12px 25px !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background 0.2s ease;
    text-transform: uppercase;
}

.productDetail .kosik-button button:hover,
.productDetail .kosik-button input[type="submit"]:hover {
    background: #43A047 !important;
}

/* Quantity input - pole pro množství */
.productDetail .kosik-ks {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-gray);
    background: white;
}

.productDetail .kosik-ks .kosik-input {
    width: 50px;
    text-align: center;
    border: none;
    padding: 10px 5px;
    font-size: 1.4rem;
    -moz-appearance: textfield;
}

.productDetail .kosik-ks .kosik-input::-webkit-outer-spin-button,
.productDetail .kosik-ks .kosik-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.productDetail .kosik-ks .quantity-buttons {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--color-gray);
}

.productDetail .kosik-ks .quantity-plus,
.productDetail .kosik-ks .quantity-minus {
    padding: 5px 10px;
    cursor: pointer;
    font-size: 1rem;
    color: var(--color-gray-dark);
    transition: background 0.2s ease;
}

.productDetail .kosik-ks .quantity-plus:hover,
.productDetail .kosik-ks .quantity-minus:hover {
    background: var(--color-gray-light);
}

.productDetail .kosik-ks span {
    padding: 0 8px;
    font-size: 1.3rem;
    color: var(--color-gray-dark);
}

/* Tlačítko oblíbené - srdíčko */
.productDetail .iko-oblibene.top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-gray);
    background: white;
    color: var(--color-gray-dark);
    font-size: 1.6rem;
    transition: all 0.2s ease;
}

.productDetail .iko-oblibene.top:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.productDetail .iko-oblibene.top .text {
    display: none;
}

/* Badge slevy na hlavním obrázku - zelený obdélník */
#productImagesBox .sleva_big {
    position: absolute;
    top: 15px;
    left: 125px;
    z-index: 10;
    background: #4CAF50;
    color: white;
    padding: 8px 12px;
    font-size: 1.4rem;
    font-weight: 700;
    border-radius: 0; /* ostré rohy */
}

/* Badge expedice 24h - skrýt pokud existuje sleva (badge slevy má prioritu) */
#productImagesBox .product-list-24h {
    position: absolute;
    top: 15px;
    left: 125px;
    z-index: 9; /* nižší z-index než sleva */
}

/* Pokud je sleva, posunout badge expedice pod ni */
#productImagesBox .sleva_big ~ .product-list-24h,
#productImagesBox .product-list-24h:has(~ .sleva_big) {
    top: 55px;
}

/* ==========================================================================
   Produktový detail - BANNERY POD GALERIÍ
   ========================================================================== */

/* Wrapper jako grid kontejner */
.bannery-pod-galerií {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin: 30px 0 !important;
    width: 100% !important;
    clear: both !important;
}

/* Všechny přímé children - display contents aby "zmizely" z layoutu */
.bannery-pod-galerií > * {
    display: contents !important;
}

/* Jednotlivé bannery (odkazy s obrázky) */
.bannery-pod-galerií a {
    display: block !important;
}

.bannery-pod-galerií img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Responsivita */
@media (max-width: 768px) {
    .bannery-pod-galerií {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   Produktový detail - BOX FIREMNÍ ODBĚRATELÉ
   ========================================================================== */

/* Box firemní - jednoduchý styl */
.productDetail .firemni-box {
    background: #f5f5f5;
    border: 1px solid var(--color-gray);
    padding: 15px;
    margin-top: 20px;
}

.productDetail .firemni-box .firemni-img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.productDetail .firemni-box .firemni-title {
    font-weight: 600;
    font-size: 1.3rem;
    margin-bottom: 8px;
    color: var(--color-black);
}

.productDetail .firemni-box .firemni-text {
    font-size: 1.2rem;
    color: var(--color-gray-dark);
    line-height: 1.4;
    margin-bottom: 10px;
}

.productDetail .firemni-box .firemni-link {
    color: var(--color-primary);
    text-decoration: underline;
}