:root {
    --theme-color: #363635;
    --theme-color2: #0073B4;
}

section.about-page .container a {
    text-decoration: underline;
    color: var(--theme-color2);
}

html, body {
    height: 100%;
    margin: 0;
}


a {
    color: var(--theme-color2);
}

.breadcrumb-section {
    background-color: rgba(255, 255, 255, 0.3);
}

.product-detail .details {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    padding-left: 30px;
    background-color: var(--theme-color2);
    color: white;
}

.cycle-box .product-detail .details li {
    color: white
}

.product-detail h4 {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1.4; /* trochu viac, aby sa text lepšie čítal */

    /* obmedzenie na 3 riadky */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* počet riadkov */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(3 * 1.4em)
}


.page .longDescription {
    padding: 5px;
    overflow: hidden;
    font-size: 16px;
    line-height: 23px;
    text-align: center;
}

.page .longDescription ul, .page .longDescription ol {
    margin: 0 0 0 0px;
    padding: 0;
    margin-left: 15px
}

.page .longDescription li {
    margin: 8px 0;
    padding: 0;
    border-left: 0;
}

.page .longDescription p {
    padding-bottom: 10px;
}

.page .longDescription h2 {
    color: #0073B4;
    text-align: center;
}

#page1 .longDescription h2 {
    color: black;
    background-color: #E5E6E7;
    font-size: 16px;
    padding: 10px;
}

#page1 .longDescription h2.red {
    color: white;
    background-color: #0073B4;
    font-size: 16px;
    padding: 10px;
}

#page1 .longDescription ul {
    list-style: none;
}

#page1 .longDescription ul li {
    background-color: #DDECEE;
    padding: 8px;
    margin: 5px 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: block
}

.cart-section tfoot tr td:first-child, .wishlist-section tfoot tr td:first-child {
    width: 75%;
}

.home-slider .slick-prev:before, .home-slider .slick-next:before, .center-slider .slick-prev:before, .center-slider .slick-next:before {
    background-color: var(--theme-color2);
    color: white
}

.slick-prev:before, .slick-next:before {
    color: var(--theme-color2) !important;
    font-size: 40px;
}

.slick-next {
    right: -40px;
}

.slick-prev {
    left: -45px;
}

.border-portfolio span.page-title {
    left: 0px;
    bottom: 10px;
    font-size: 16px;
    color: white;
    background-color: #0073B4;
    padding: 5px 10px;
    width: 90%;
    position: absolute;
}

.border-portfolio span.page-title h2 {
    font-size: 16px;
    padding-left: 10px;
    margin: 0;
    color: white;
}

#sub-menu .active > a {
    background-color: #0073B4;
    color: white;
}

.ratio_square .img-wrapper {
    width: 275px;
    height: 275px;
    background-color: #fff; /* biele pozadie */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* nič nepretŕča */
}

.category-m .category-wrapper h4 {
    height: 100px;
}

.ratio_square .img-wrapper img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important; /* zachová pomer strán a dorovná na bielom pozadí */
    background-color: #fff !important; /* ak má transparentné okraje */
    display: block !important;
}

.qty-box .input-group {
    justify-content: left
}

.pixelstrap .sm-nowrap > li > a, .pixelstrap .sm-nowrap > li > :not(ul) a {
    white-space: break-spaces;
    border-bottom: 1px dashed gray;
}

.color_pick {
    width: 20px;
    height: 20px;
    margin: 1px;
    display: inline-block;
}

.color_pick.cerna {
    background-color: #1C1C1C;
}

.color_pick.svetlemodra {
    background-color: #A0C8E6;
}

.color_pick.svetle_modra {
    background-color: #A0C8E6;
}

.color_pick.azurova {
    background-color: #00A5E1;
}

.color_pick.zelenkova {
    background-color: #AAD250;
}

.color_pick.modra {
    background-color: #3250A0;
}

.color_pick.zelena {
    background-color: #008246;
}

.color_pick.zluta {
    background-color: #FFE600;
}

.color_pick.fialova {
    background-color: #6E4682;
}

.color_pick.oranzova {
    background-color: #F59100;
}

.color_pick.bezova {
    background-color: #BE965A;
}

.color_pick.ruzova {
    background-color: #FAC8DC;
}

.color_pick.zlta {
    background-color: #FFE600;
}

.color_pick.purpurova {
    background-color: #C81478;
}

.color_pick.bila {
    background-color: #EBEBEB;
}

.color_pick.cervena {
    background-color: #BE0A0A;
}

@media (max-width: 480px) {
    .home-slider .home {
        height: 22vh;
        width: 100%;
    }
}