/*
Theme Name: GURU-CLOUD-OTC
Theme URI: http://guru-cloud.sk
Author: Marek Uhrina
Author URI: http://guru-cloud.sk
Description: Tema vytvorená pre offtrendclub.com
Version: 1.0
License: GURU-CLOUD - Marek Uhrina
Tags: custom, minimal, responsive
Text Domain: guru-cloud-otc
*/


/*------------------------------------- Font------------------------------------------ */

@font-face {
    font-family: 'MyCustomFont'; 
    src: url('assets/fonts/Aventa-Black.woff2') format('woff2'),
         url('assets/fonts/Aventa-Black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; 
}

body, html {
    font-family: 'Aventa-Black', sans-serif;
}
/*------------------------------------- Header------------------------------------------ */
.header-hl {
    width: 100%;
    position: relative;
}
.header {
    width: 100%;
    background-color: black;
    padding-top: 10px;
    /*padding-bottom: 10px;*/
}
html, body {
    margin: 0;
    padding: 0;
}
.cely-vrch{
   
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    flex-direction: row;
}



.vrch {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* width: calc(100% - 20px); */
    /* margin: 0 10px; */
}¨



.spodok {
    width: 100%;
}
.search-div {
    width: 20%;
}
.logo {
    width: 60%;
    text-align: center;
}
.kosik-div {
    width: 20%;
}
.logo img {
    max-width: 280px;
}
.search-div .fa-solid.fa-magnifying-glass {
    color: white;
  
}


.kosik-div {
    position: relative;
    display: inline-block;
    text-align: right;
    padding-right: 13px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-end;
    justify-self: flex-end;
    justify-items: flex-end;
    justify-content: flex-end;

}

/* Štýly pre bubličku s počtom produktov v košíku */
.cart-count {
    position: absolute;
    top: -8px;      /* Nastavte podľa potreby pre vertikálne umiestnenie */
    right: 6px;     /* Nastavte podľa potreby pre horizontálne umiestnenie */
    background-color: #e74c3c; /* Príklad: červené pozadie */
    color: #fff;    /* Biele písmo */
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
}
.search-div {
    position: relative;
    cursor: pointer;
}

#search-input {
    padding: 6px 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-left: 10px;
}
.text-menu {
    color: white;
}

.mini-cart-coupon-input {
        padding-top: 7px;
    padding-bottom: 7px;
}
.mini-cart-coupon-button {
        background-color: black;
    color: white;
    padding: 7px;
}


/*>>>>>>>>>>>>>>POP UP HEADER>>>>>>>>>>>>>>>>>>*/
#coupon-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: black;
    color: white;
    padding: 16px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    text-align: center;
}

#coupon-toast.toast-show {
    opacity: 1;
    pointer-events: auto;
}

.coupon-toast-success {
    background-color: #2ecc71!important; /* zelená */
}

.coupon-toast-error {
    background-color: #e74c3c!important; /* červená */
}
.ucet-icon,
.kosik-icon,
.search-ikona {
    width: 20px;
    font-size: 20px;
}


/*
.kosik-icon {
    width: 20px;
}
*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>pod header stary kod>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/



.menu1, .menu2, .menu3, .menu4, .menu5 {
  width: 20%;
  height: 60px; /* uprav podľa potreby */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid white;
}

/* Základný stav ikon */
.ikona1, .ikona2, .ikona3, .ikona4, .ikona5 {
  position: absolute;
  opacity: 1;
  transition: opacity 0.4s ease;
  z-index: 1;
}

/* Základný stav textu */
.menu1 .sneakers-text,
.menu2 .sneakers-text,
.menu3 .sneakers-text,
.menu4 .sneakers-text,
.menu5 .sneakers-text {
  position: absolute;
  opacity: 0;
  transition: opacity 0.4s ease;
  color: white;
  font-weight: bold;
  font-size: 16px;
  z-index: 2;
}

/* Hover efekt: skryje ikonu, zobrazí text */
.menu1:hover .ikona1 { opacity: 0; }
.menu2:hover .ikona2 { opacity: 0; }
.menu3:hover .ikona3 { opacity: 0; }
.menu4:hover .ikona4 { opacity: 0; }
.menu5:hover .ikona5 { opacity: 0; }

.menu1:hover .sneakers-text,
.menu2:hover .sneakers-text,
.menu3:hover .sneakers-text,
.menu4:hover .sneakers-text,
.menu5:hover .sneakers-text {
  opacity: 1;
}
.spodok {
    display: flex;
    flex-direction: row;
    margin-top: 5px;
}


.menu1-div, 
.menu2-div, 
.menu3-div, 
.menu4-div, 
.menu5-div {
  display: none;
  width: 100%;
  /* height: 200px; */
  background-color: white;
  position: absolute;
  top: 100%; /* zobrazí sa hneď pod headerom, ak je vo vnútri .header-hl */
  left: 0;
  z-index: 999;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s ease;
  flex-direction: row;
  min-height: 100px; /* minimálna výška*/
}

.menu1-div-left {
width: calc(15% - 10px);
margin-left: 10px;
border-right: 1px solid black;
/* padding-top: 3px; */
}
.menu1-div-center {
width: 15%;
/* padding-top: 3px; */
border-right: 1px solid black;
}
.menu1-div-right {
width: 70%;
/* padding-top: 3px; */
}

.menu-div-nadpis {
width: 100%;
border-bottom: 1px solid black;
padding-top: 3px;
padding-bottom: 3px;
}
.menu-div-nadpis-hl {
text-transform: uppercase;
font-size: 18px;
font-family: "Aventa", sans-serif;
font-weight: 600;

}
.menu-div-nadpis2 {
width: 100%;
border-bottom: 1px solid black;
padding-top: 3px;
padding-bottom: 3px;
}
.menu-div-nadpis-hl2 {
text-transform: uppercase;
font-size: 18px;
font-family: "Aventa", sans-serif;
font-weight: 600;
margin-left: 10px;
}
.menu-div-obsah {
    padding-top: 3px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.menu-div-obsah2 {
    padding-left: 10px;
    padding-top: 3px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.menu-div-obsah20 {
    padding-left: 10px;
    padding-top: 3px;
    gap: 10px;
    display: flex;
    flex-direction: row;
    gap: 12px;
}
.menu-div-obsah21  {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.menu-div-obsah22 {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.menu-div-obsah50 {
    padding-left: 0px;
    padding-top: 3px;
    gap: 10px;
    display: flex;
    flex-direction: row;
    gap: 12px;

}
.menu-div-obsah51  {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.menu-div-obsah52 {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.menu-div-obsah3 {
    padding-left: 10px;
    
}
.menu2-div-left {
    width: calc(15% - 10px);
margin-left: 10px;
border-right: 1px solid black;
}
.menu2-div-center {
width: 15%;
border-right: 1px solid black;
}
.menu2-div-center2 {
width: 20%;
border-right: 1px solid black;
}
.menu2-div-right {
width: 50%;
}


.menu3-div-left {
    width: calc(17% - 10px);
margin-left: 10px;
border-right: 1px solid black;
}
.menu3-div-center {
width: 32%;
border-right: 1px solid black;
}
.menu3-div-right {
width: 60%;
}

.menu4-div-left {
    width: calc(17% - 10px);
margin-left: 10px;
border-right: 1px solid black;
}
.menu4-div-center {
width: 32%;
border-right: 1px solid black;
}
.menu4-div-right {
width: 60%;
}
.menu5-div-left {
width: calc(25% - 10px);
margin-left: 10px;
border-right: 1px solid black;
}
.menu5-div-right {
width: 75%;
}
.custom-text-link {
  position: relative;
  color: black;
  font-weight: normal;
  font-family: "Aventa", sans-serif;
  text-decoration: none;
  transition: color 0.3s ease;
  text-transform: uppercase;
  display: inline-block;
  width: fit-content;
}

.custom-text-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px; /* posun nižšie ak treba */
  width: 0;
  height: 2px;
  background-color: black;
  transition: width 0.3s ease;
}

.custom-text-link:hover::after {
  width: 100%;
}



/*<<<<<<<<<<<<<<<<<<<<<produkty v megamenu>>>>>>>>>>>>>>>>>>>>>>>>>>*/
.produkty-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 produktov na riadok */
  gap: 10px;
}

@media (max-width: 1155px ) {
    .produkty-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    .produkty-grid a:nth-of-type(n+11) {
    display: none !important;
    }

}
    


.produkty-grid2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 6 produktov na riadok */
  gap: 10px;
}

@media (max-width: 1155px ) {
    .produkty-grid2 {
        grid-template-columns: repeat(3, 1fr);
    }
    .produkty-grid2 a:nth-of-type(n+7) {
    display: none !important;
    }

}
    

.produkty-grid3, 
.produkty-grid4 {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 6 produktov na riadok */
  gap: 10px;
}
@media (max-width: 1155px ) {
    .produkty-grid3 {
        grid-template-columns: repeat(4, 1fr);
    }
    .produkty-grid3 a:nth-of-type(n+9) {
    display: none !important;
    }

}
@media (max-width: 1155px ) {
    .produkty-grid4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .produkty-grid4 a:nth-of-type(n+9) {
    display: none !important;
    }

}
    
    

.produkty-grid5 {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 6 produktov na riadok */
  gap: 10px;
}
@media (max-width: 1155px ) {
    .produkty-grid5 {
        grid-template-columns: repeat(6, 1fr);
    }
    .produkty-grid5 a:nth-of-type(n+13) {
    display: none !important;
    }

}

.produkty-grid a img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  transition: transform 0.2s ease;
}
.produkty-grid2 a img {
  width: 90%;
  height: auto;
  display: block;
  border-radius: 4px;
  transition: transform 0.2s ease;
}
.produkty-grid3 a img, 
.produkty-grid4 a img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  transition: transform 0.2s ease;
}
.produkty-grid5 a img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  transition: transform 0.2s ease;
}
.produkty-grid a:hover img, 
.produkty-grid2 a:hover img, 
.produkty-grid3 a:hover img, 
.produkty-grid4 a:hover img,
.produkty-grid4 a:hover img 
   {
  transform: scale(1.05);
}



/*------------------------------------- mini kosik------------------------------------------ */
/*
#mini-cart-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: white;
    width: 30%;
    z-index: 9999;
    height: 100vh;
    transition: all 0.3s ease;
    border: 2px solid black;
    flex-direction: column;
}

#mini-cart-container.open {
    display: flex;
    flex-direction: column;
}*/
#mini-cart-container {
    position: fixed;
    top: 0;
    left: 0;
    background: white;
    width: 30%;
    z-index: 9999;
    height: 100vh;
    border: 2px solid black;
    flex-direction: column;
    transform: translateX(-100%); /* skryté mimo obrazovku */
    transition: transform 0.3s ease;
    display: flex; /* stále "flex", ale ovládané cez transform */
}
@media (max-width: 1070px ) {
   #mini-cart-container {
    width: 40%!important;
   }
}
@media (max-width: 805px ) {
   #mini-cart-container {
    width: 60%!important;
   }
}
@media (max-width: 545px ) {
   #mini-cart-container {
    width: 70%!important;
   }
}
@media (max-width: 405px ) {
   #mini-cart-container {
    width: 90%!important;
   }
}
#mini-cart-container.open {
    transform: translateX(0); /* posunie sa do obrazovky */
}


/* Horná časť s nadpisom */
.mini-cart-sekcia {
    padding-top: 32px;
    border-bottom: 1px solid black;
    background-color: #fff;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
}

/* Wrapper pre vnútro a zarovnanie */
.mini-cart-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Scrollovateľný obsah s produktmi */
.mini-cart-inner-items {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    height: 60%;
    min-height: 65vh;
}

/* Footer je prilepený naspodok */
.mini-cart-footer {
    padding-top: 10px;
    border-top: 1px solid black;
    background-color: #fff;
    flex-shrink: 0;
    margin-top: auto;
    margin-left: 20px;
    margin-right: 20px;
}

/* Štýly pre produkty */
.mini-cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid black;
    margin: 0 10px;
    padding: 10px 0;
    gap: 10px;
}

.mini-cart-image {
    order: 1;
}

.mini-cart-info {
    font-: "Aventa", sans-serif;
    text-transform: uppercase;
    color: black;
    order: 2;
    flex: 1;
}

.mini-cart-remove {
    order: 3;
}

.mini-cart-name {
    font-size: 13px;
}
.mini-cart-name a {
    color: black;
    text-decoration: none;
}
.mini-cart-quantity {
    font-size: 13px;
}
.mini-cart-variant {
    padding-top: 10px;
    font-size: 11px;
}

/* Ostatné */
.close-mini-cart {
    cursor: pointer;
}
.mini-cart-nadpis {
    padding-top: 5px;
    padding-bottom: 5px;
}


/* Štýly pre header, aby sa predišlo konfliktom */
.header {
    position: relative;
}


.mini-cart-item.no-border {
    border-bottom: none;
}


.mini-cart-total-final {
    margin-top: 10px;
    border-top: 1px solid black;
    padding-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.mini-cart-coupon-wrapper {
    display: flex;
}
.mini-cart-discount {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 3px;
}
.mini-cart-total {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.mini-cart-nadpis-close.close-mini-cart  {
    font-size: 24px;
}
/*------------------------------------- Shop Page------------------------------------------ */

/* Upravujeme rodičovský kontajner pre produkty */
.products-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    gap: 5px;
    
}
/* Každý produkt bude zaberať 25% šírky nadradeného kontajnera */
.custom-product {
    box-sizing: border-box;
    flex: 0 0 calc((100% - 15px) / 4); /* 3x 5px gap medzi 4 položkami */
    max-width: calc((100% - 15px) / 4);
    margin: 0;
    border: 1px solid black;
}
.product-image img {
    width: 100%;
    height: auto;
    border-radius: 3px;
}
.product-price {
    padding-left: 10px;
    padding-bottom: 10px;
}
/* Paginácia */
.woocommerce-pagination {
    text-align: center;
    margin-top: 20px;
}
/* Hlavné rozloženie obchodu */
.main-container-obchod {
    display: flex;
    flex-direction: row;
    /* padding-bottom: 10px; */
    border-left: 1px solid black;
}
.container-filter {
    width: 100%;
}
.custom-filter-wrapper {
    width: 20%;
    border-right: 1px solid black;
}
.produkt-loop {
    width: 80%;
}
.vrch-obchod {
    display: flex;
    flex-direction: row;
    /* margin-bottom: 10px; */
}
.vrch-filter {
    text-align: left;
    width: 20%;
    border: 1px solid black;
    
   
    margin-right: -2px;
    display: flex;
    justify-content: space-between;
    padding-top: 5px;
    padding-bottom: 5px;
}
.vysledky {
    text-align: center;
    width: 65%;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
 
    
}
.zoradenie {
    text-align: right;
    width: 15%;
    border: 1px solid black;
  
}
.nadpis-filtrov {
    text-transform: uppercase;
    width: auto;
    padding-left: 10px;
}
body.post-type-archive-product .woocommerce-breadcrumb {
    display: none;
}



.product-inner {
        height: 100%;
    display: flex
;
    flex-direction: column;
    justify-content: space-between;
}

/*-facetwp-*/
.facetwp-facet.facetwp-facet-sort_.facetwp-type-sort {
    width: 100%;
    height: 100%;
    display: flex;         /* zabezpečí prispôsobenie obsahu */
    align-items: center;   /* vertikálne zarovnanie */
}

.facetwp-facet.facetwp-facet-sort_.facetwp-type-sort select {
    width: 100%;
    height: 100%;
    box-sizing: border-box; /* aby padding neprekročil rámček */
    padding: 8px;
    font-size: 16px;
}


.facetwp-facet {
    margin-bottom: 0px!important;
}
.facetwp-counter {
  display: none;
}
.load-more-wrapper {
    padding-top: 15px;
    padding-bottom: 15px;
        border: 1px solid black;
    justify-content: center;
    display: flex;
    width: calc(100% - 2px);
}
.facetwp-load-more {
    background-color: black;
    font-family: "Aventa", sans-serif;
    color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 15px;
    font-weight: 500;
}
/* Tieto selektory zacielia len na SIZE facety */
.facetwp-facet-detska_velkost .facetwp-checkbox,
.facetwp-facet-velkost_normal .facetwp-checkbox,
.facetwp-facet-velkost_oblecenia .facetwp-checkbox {
    background: none !important;
    background-size: 0 !important;
    display: inline-block;
    margin: 5px;
    padding: 5px 10px;
    background-color: white;
    border: 1px solid #D0D0D0;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    min-width: 45px;
    text-align: center;
    font-size: 15px;
    border-radius: 4px;
}

/* Hover efekt */
.facetwp-facet-detska_velkost .facetwp-checkbox:hover,
.facetwp-facet-velkost_normal .facetwp-checkbox:hover,
.facetwp-facet-velkost_oblecenia .facetwp-checkbox:hover {
    background-color: #e0e0e0;
}

/* Aktívny stav */
.facetwp-facet-detska_velkost .facetwp-checkbox.checked,
.facetwp-facet-velkost_normal .facetwp-checkbox.checked,
.facetwp-facet-velkost_oblecenia .facetwp-checkbox.checked {
    background-color: black !important;
    color: white;
    border-color: black;
}

/* Predvolený stav – filtre sú skryté, kým nie sú pripravené */
.filter-wrapper {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Keď JS doplní triedu .filter-ready, všetko sa zobrazí */
.filter-ready .filter-wrapper {
  visibility: visible;
  opacity: 1;
}

/* Skrytie konkrétnych wrapperov bez checkboxov */
.hidden-filter {
  display: none !important;
}

/* Inicializovaný spinner */
#facetwp-inline-spinner {
  width: 32px;
  height: 32px;
  border: 4px solid #ccc;
  border-top: 4px solid #000;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 20px auto;
  display: none;
}

.spinner-visible {
  display: block !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/*------------------------------------- Product Page----------------------------------------- */
.product-page-div {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-self: stretch;  
}
.product-page-div-left {
    width: 80%;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}
.product-page-div-right {
    width: 20%;
    border-bottom: 1px solid black;
}
.custom-product-title {
 color: black;
 font-size: 40px;
 font-weight: 400;
 text-align: center;
 margin-top: 30px;
}
.custom-product-add-to-cart {

}
.sku {
    color: #CECECE;
    font-size: 20px;
    text-align: center;
}
#cart-buttons {
    width: 92%;
    text-align: center;
    justify-self: center;
}

@media (max-width: 1000px) {
        .product-page-div {
            flex-direction: column;
        }
        .product-page-div-left {
            width: 100%;
        }
        .product-page-div-right {
            width: 100%;
        }
}

.custom-toggle-box {
    border-top: 1px solid black;
    border-right: 1px solid black;
}
.custom-toggle-box2 {
    border-bottom: 1px solid black;
}

.custom-toggle-header {
    padding: 20px 16px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
}

.custom-toggle-content {
    background-color: #fff;
    border-top: 1px solid #ddd;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;

}

.custom-toggle-content-inner {
    padding: 14px 16px; /* Pridaj padding aj horizontálne pre konzistentnosť */
}

.custom-toggle-arrow {
    transition: transform 0.3s ease;
}

.custom-toggle-box.open .custom-toggle-arrow {
    transform: rotate(180deg);
}

/*------------------------------------- Vyber variantov------------------------------------------ */
#size-selector {
    font-family: "Aventa", sans-serif;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

#size-selection-container {
    /* padding-bottom: 20px; */
    position: relative;
    margin-top: 40px;
}

.size-tabs {
    display: flex;
    justify-content: space-between;
}

.size-tab {
    flex: 1;
    padding: 5px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    background: white;
    cursor: pointer;
    border: 1px solid black;
}

.size-tab.active {
    background: black;
    color: white;
}

#choose-size {
    width: 100%;
    background: black;
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 15px;
    border: none;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    z-index: 2;
}

.choose-size-text {
    opacity: 1;
    transition: opacity 0.3s ease;
    font-size: 12px;
}

.arrow {
    position: absolute;
    left: 10px;
    transition: transform 0.3s ease, left 0.3s ease;
}

/* Kontajner s fixnou výškou 200px a scrollovaním */
#dropdown-container {
    height: 200px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

/* Dropdown obsah s animáciou opacity */
#size-dropdown {
    opacity: 0;
    transition: opacity 0.3s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
/* Trieda pre otvorený stav */
#dropdown-container.open #size-dropdown {
    opacity: 1;
}

.size-row {
    display: flex;
    border-bottom: 1px solid black;
    font-family: "Aventa", sans-serif;
}

.size-column,
.price-column {
    width: 50%;
    padding: 2px;
}

.size-column {
    text-align: left;
    padding-left: 5px;
}

.price-column {
    text-align: center;
}

.size-header {
    font-size: 10px;
    font-family: "Aventa", sans-serif;
    font-weight: bold;
}

.size-option:hover {
    background: #f0f0f0;
    cursor: pointer;
}

#cart-buttons {
    display: flex;
    justify-content: space-between;
    /* border: 1px solid black; */
    /* border-top: 1px solid black; */
    border-right: 1px solid black;
    width: calc(100% - 1px);

}

#sell-btn,
#buy-btn {
    flex: 1;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

#sell-btn {
    background: #f0f0f0;
    color: #ccc;
}

#buy-btn {
    background: #4CAF50;
    color: white;
}

#buy-btn:disabled {
    background: gray;
    cursor: not-allowed;
}

.size-option {
    font-size: 18px;
    font-family: "Aventa", sans-serif;
}


/*------------------------------------- Domov------------------------------------------ */

.fotka-home {
    width: 100%;
}
.fotka-home img {
    width: 100%;
}
.trending {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
}
.trending-vrch, 
.last-vrch
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid black;
    padding-bottom: 3px;
    
}
.trending-left {}
.trending-right {}
.trending-home {}
.nadpis-home {
    text-transform: uppercase;
    font-size: 20px;
    color: black;
}
.view-all {
    text-transform: uppercase;
    font-size: 20px;
    cursor: pointer;
    text-decoration: underline;
    color: black;
}
.trending-spodok {}

.products-wrapper-home {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    gap: 10px; /* Medzera medzi produktmi */
}

.custom-product-home {
    box-sizing: border-box;
    flex: 0 0 calc((100% - 20px) / 3);
    max-width: calc((100% - 20px) / 3);
    border: 1px solid black;
}

@media (max-width: 479px) {
    .custom-product-home {
      flex: 0 0 calc((100% - 10px) / 2);
      max-width: calc((100% - 10px) / 2);
    }
  }
  @media (max-width: 479px) {
    .custom-product-home:nth-child(n+5) {
      display: none;
    }
  }
  
.news-vrch {
    display: flex;
    margin-top: 20px;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid black;
    margin-bottom: 10px;
    padding-bottom: 3px;
}
.news {
    margin-right: 10px;
    margin-left: 10px;
}
.news-spodok2 {
    margin-left: 10px;
    margin-right: 10px;
}
.product-inner-home {
    text-decoration: none;
}
/*--last added-*/
.last-add {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;

} 
.last-spodok {
    margin-top: 20px;
    border: 1px solid black;
}
.products-wrapper-last {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    gap: 10px; /* Medzera medzi produktmi */
}

#last-products-wrapper {
    padding-left: 10px;
    padding-right: 10px;
}
.custom-product-last {
    box-sizing: border-box;
    flex: 0 0 calc((100% - 70px) / 8);
    max-width: calc((100% - 70px) / 8);
}

@media (max-width: 1200px) {
    .custom-product-last {
      flex: 0 0 calc((100% - 60px) / 7);
      max-width: calc((100% - 60px) / 7);
    }
  }
     @media (max-width: 1200px) {
    .custom-product-last:nth-child(n+22) {
      display: none;
    }
  } 

@media (max-width: 900px) {
    .custom-product-last {
      flex: 0 0 calc((100% - 50px) / 6);
      max-width: calc((100% - 50px) / 6);
    }
  }
     @media (max-width: 900px) {
    .custom-product-last:nth-child(n+19) {
      display: none;
    }
  } 
  

@media (max-width: 767px) {
    .custom-product-last {
      flex: 0 0 calc((100% - 40px) / 5);
      max-width: calc((100% - 40px) / 5);
    }
  }
@media (max-width: 767px) {
    .custom-product-last:nth-child(n+16) {
      display: none;
    }
  }  
    
@media (max-width: 574px) {
    .custom-product-last {
      flex: 0 0 calc((100% - 40px) / 4);
      max-width: calc((100% - 40px) / 4);
    }
  }
@media (max-width: 574px) {
    .custom-product-last:nth-child(n+13) {
      display: none;
    }
  }  
    
@media (max-width: 479px) {
    .custom-product-last {
      flex: 0 0 calc((100% - 20px) / 3);
      max-width: calc((100% - 20px) / 3);
    }
  }
  
  @media (max-width: 479px) {
    .custom-product-last:nth-child(n+10) {
      display: none;
    }
  }
  

.product-grids,
.product-grids2, 
.product-grids3 {
    width: 100%;
    display: flex;
    flex-direction: row;
}
@media (max-width: 479px) {
    .product-grids,
.product-grids2, 
.product-grids3 {
    flex-direction: column;
    }
}

.pg-left {
    width: 50%;
    background-color: black;
    
}
.pg-right {
    width: 50%;
}
@media (max-width: 479px) {
    .pg-left,
    .pg-right {
        width: 100%;
    }
}
.pg-image {
    width: 100%;
    height: 100%;
}
.pg-text {
    color: white;
    text-transform: uppercase;
    font-size: 50px;
    padding: 20px;
    display: block;
    
}
@media (max-width: 479px) {
    .pg-text {
        font-size: 20px;
    }
}
.pg-left1, 
.pg-center, 
.pg-right1 {
    width: 33.33%;
}
.pg-center {
    background-color: black;
    text-align: center;
}
.pg-image1 {
    width: 50%;
    height: 50%;
}

@media (max-width: 479px) {
    .pg-right1,
    .pg-center, 
    .pg-left1 {
        width: 100%;
    }
}

/*-----------------------------------swiperjs-----------------------------------------------*/
.swiper {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.swiper-slide {
    display: flex;
    align-items: stretch;
    height: auto;

}

/* Samotný produkt */
.custom-product-news {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    padding: 10px;
    background-color: white;
    box-sizing: border-box;
}


/* Obsah vnútri produktu */
.product-inner-news {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}


.product-title {


    /* height: 40px;              ← garantovaná výška */
    /* line-height: 20px;         ← presne 2 riadky */
   
}






.product-inner-news img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* .product-title {
    font-size: 16px;
    margin: 10px 0 5px;
    padding-left: 10px;
    color: black;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none!important;
} */
.product-title {
    font-size: 16px;
    margin: 10px 0 5px;
    padding-left: 10px;
    color: black;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none !important;
    height: 40px;             /* unify title height for swiper slides */
    line-height: 20px;        /* two lines max */
    overflow: hidden;
}
.custom-product-news {
    text-decoration: none;
}

.product-price {
    font-weight: bold;
    color: #333;
}
.news-spodok {
    margin-bottom: 10px;
}
/*---------------footer---------------------*/
.footer {
    display: flex;
    flex-direction: row;
    background-color: black;
    
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    height: 90px;

}
.footer1 {
    align-self: center;
    justify-self: center;
    width: 16%;
}
.footer2 {
    width: 28%;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
}
.footer2-vrch {
    width: 100%;
    flex-direction: row;
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    gap: 50px;
}
.footer2-vrch-vlavo {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: auto;

}
.footer2-vrch-vpravo {
    display: flex;
    flex-direction: column;   
    text-align: left;
    width: auto;

}
.footer2-spodok {
    color: white;
    font-size: 10px;
    justify-content: flex-end;
    flex-direction: column;
    display: flex;
    text-align: center;
}
.footer3 {
    width: 28%;

}
.footer3-1{}
.footer3-2{}
.footer3-3{}
.footer4 {
    width: 28%;
    flex-direction: row;
    display: flex;


}
.footer4-1{
    display: flex;
    flex-direction: column;
    width: 20%;
}
.footer4-1-vrch{}
.footer4-1-spodok{}
.footer4-2{
    display: flex;
    flex-direction: column;
    width: 60%;
    justify-content: center;
    height: 100%;
    font-size: 18px;
}
.footer4-2-stred{
    color: white;
    text-align: center;
}
.footer4-3{
    display: flex;
    flex-direction: column;
    width: 20%;
}
.footer4-3-vrch, 
.footer4-1-vrch {
    color: white;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    font-size: 30px;
    
}
.footer4-3-spodok{}
.mini-logo {
    width: 90%;
    height: auto;
}
.footer-odkaz {
    color: #707070;
    text-decoration: none;
    font-size: 13px;
}

/*--------------------------------FILTER-------------------------*/
.filter-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0; 
}

.filter-content.active {
    max-height: 500px; /
    padding-top: 20px ;
}


.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 10px;


}

.filter-header svg.rotated {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}
.filter-header-top{
  border-bottom: none!important;
}
.rotated/*mozno zbytocne?*/ {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}
.filter-arrow {
    transition: transform 0.3s ease;
}

.filter-top {
    border-top: 1px solid black;
}
.filter-bottom {
    border-bottom: 1px solid black;
}
.load-more {
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid black;
}
.filter-wrapper {
    border-bottom: 1px solid black;
}
#products-container {
    margin-top: 10px;
    margin-left: 10px;
}
.size-button.active {
    background-color: black;
    color: white;
}
.size-button {
border: 1px solid black;
padding: 3px;
cursor: pointer;
}

.filter-content.active {
    margin-bottom: 5px;
}

/*-------pod kategoria loader*/
#products-container.is-loading {
    position: relative;
}

#products-container.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid rgba(0, 0, 0, 0.2);
    border-top-color: #555;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 10;
}

#products-container.is-loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 5;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}







/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 23px;
    margin-right: 6px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #4EDE75;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #4EDE75;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(36px);
    -ms-transform: translateX(36px);
    transform: translateX(36px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

  /* 1) skryť filter-panel keď je filters-off */
.main-container-obchod.filters-off .custom-filter-wrapper {
    display: none;
  }
  
  /* 2) roztiahnuť produkt-loop na plnú šírku */
  .main-container-obchod.filters-off .produkt-loop {
    width: 100%;
  }
  .main-container-obchod.filters-off #products-container {
    margin-left: 0px;
    margin-right: 0px;
}
/*------------------------404------------------------------------------*/
.div404 {
    margin-bottom: 20px;
}

/*---------------------------------------------mobilne css-----------------------------------------------------*/
/*------------------------------HEADER-----------------------------------*/
@media (max-width: 1024px) {
    .spodok {
        display: none;
    }
    .vrch {
        padding-bottom: 10px;
    }
}

@media (max-width: 460px) {
    .logo img {
        max-width: 200px;
    }
}
.burger-menu {
    color: white;
    font-size: 20px;
    padding-right: 10px;
}
@media (min-width: 1025px) {
    .burger-menu {
        display: none!important;
       
    }
}

/*<<<<<css ku mobilne menu>>>>>>>>*/
.burger-div {
    position: fixed;
    top: 0;
    left: -60%;
    width: 60%;
    height: 100vh;
    background-color: #111; /* môžeš si zmeniť */
    transition: left 0.3s ease-in-out;
    z-index: 9999;
    overflow-y: auto;
}

/* Keď sa aktivuje */
.burger-div.active {
    left: 0;
}

/* Custom cart and checkout styles */
.custom-cart-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
}
.custom-cart-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 0;
}
.cart-remove {
    margin-right: 10px;
}
.cart-image img {
    width: 80px;
    height: auto;
}
.cart-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 10px;
}
.cart-name a {
    text-decoration: none;
    color: inherit;
}
.cart-quantity {
    margin: 5px 0;
}
.cart-subtotal {
    font-weight: bold;
}
.checkout-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}