#wrapper {overflow:visible !important;}

/*Topp med kategoriinfo*/
.category-info-contaioner{
    width:100%;
    margin-bottom:40px;
    
        /* Example background image with subtle dark overlay for readable text */
        background-image: url("/upload/assets/sv/cenor_mark_light.svg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* fallback color while image loads or if missing */
        background-color: #184e8e;
        /* ensure there is space to show the image */
        min-height: 70px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #fff; /* assumes text will be placed on top of the image */
}

.category-info-contaioner .category-title
{
    text-align:center;    
    color: #fff;
    padding-top: 0px;
    margin-bottom: 0px;
}
.category-info-contaioner  .category-description
{
    text-align:center;
    padding-bottom:60px;

}



/* Tvåkolumnslayout */
.products-layout {
    padding-bottom:40px;
    display: flex;
    align-items: flex-start;
    gap: 30px; /* avstånd mellan spalter */
}

/* Vänster meny */

.category-aside {position:sticky; top: 200px;}

.category-sidebar { background-color: #fff; border: 1px solid #ddd; padding: 15px; margin-bottom: 1rem; border-radius: 10px; width: 250px; box-sizing: border-box; }


.root-categories {
    text-align: center;
    flex-direction: column;
    /*justify-content: center;*/
    align-items: center;
}
    .root-categories h1 {
        display: block;
    }
        .root-categories .cat-grid {
            flex-wrap: wrap;
            justify-content: space-between;
        }
            .root-categories .cat-grid .cat-card {
                max-width: 19%;
                min-width: 200px;
                width: auto;
            }   



.category-sidebar h2{
margin:0;
font-size:1.2rem;
margin-bottom:0.8rem;
}

/* Höger innehåll */
.product-content {
    flex: 1;
}

/* Nivå 1 - huvudkategori */
.category-menu .lvl-1 > a {
    font-weight: bold;
    padding: 0;
    color: #222;
}

.item.lvl-0 {
position: absolute;        /* anchor inside its parent */
  top: 0;                    /* stick to the top of parent */
  left: 50%;                 /* center horizontally */
  transform: translateX(-50%);
  background: #fff;          /* optional, keeps it readable */
  z-index: 1000;             /* ensures it sits above siblings */
    /*justify-self: anchor-center; */
}
.category-sidebar .item.lvl-0 { background: transparent; }
/* Nivå 2 - underkategori */
.category-menu .lvl-2 {
    grid-row: 2;
    margin-left: 15px; /* indrag för barnkategorier */
    padding-left: 2rem;
    padding-top:3rem;
    margin-top: 25px;
}

    .category-menu .lvl-2 a {
        font-size: 0.9em;
        color: #555;
    }


/* Hover-effekt för båda */
.category-menu a:hover {
    background-color: transparent;
}

/* Gör huvudkategorierna lite separerade */
.category-menu .lvl-1 {
    margin-bottom: 8px;
}

/* Gör toppmenyn horisontell – korrekt för CategoryTopMenu */
/* --- TOPPMENY DESKTOP --- */
.category-topmenu-container .category-menu {
  /*  display: grid;
    grid-template-rows: auto 1fr; */
    display: flex; 
    flex-wrap: wrap; /* Bryt rad på desktop */
    gap: 5px;
    margin-bottom:2rem !important;
    justify-content: center; 

}

.category-topmenu-container .category-menu.overflow{
    justify-content: flex-start;
}


    .category-topmenu-container .category-menu .item.lvl-1,
    .category-topmenu-container .category-menu .item.lvl-2,
    .category-topmenu-container .category-menu .item.lvl-3 {    
        margin: 0;
        padding: 1px;
    }

    .category-topmenu-container .category-menu .item { flex: 0 0 auto; }
    .category-topmenu-container .category-menu .item:has(.back-link) {
        width:100%; position: static; background-color: transparent; transform: unset; z-index:5;
    }
    
    .category-topmenu-container .category-menu .item .text { 
    margin-bottom: 0px; border: 1px solid;
    padding: 0.5rem 1rem;
    border-radius: 50rem;
    border-color: #0e1f3240;
    min-width:110px;
    border:none;
    font-weight:400;
    background-color: #f5f7fa;
    }

    .category-topmenu-container .category-menu .item:has(.back-link) .text{
    border:none !important;
    background:transparent;
    }

/* --- SIDEMENU --- */
.category-sidebar .category-menu .item {
text-align: left;
align-items: start;
margin:0px;
}

.category-sidebar .category-menu .text{
    font-size:14px;
    font-weight:normal;
}

.current-category-title {
    font-weight: 600;
    font-size: 15px;
    color: #0e1f32;
    margin-top:0.8rem;
}

.category-sidebar .category-menu .lvl-2{
    padding:0px;
    padding-left: 0.5rem;
}

.category-sidebar .category-menu .lvl-1 > a, .category-sidebar .category-menu .lvl-2 > a, .category-sidebar .category-menu .lvl-3 > a{
    padding: 5px 0px;
}

.category-sidebar .category-menu .text{
    margin-top:0px;
}

.category-sidebar .item.lvl-0 {
    position: relative;
    justify-self: left;
}


    /* --- ITEMS --- */
.category-menu .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    justify-content: center;
}

/* Ikonbild */
.category-menu-icon {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #0c6564; /* samma gröna som era ikoner */
    margin-bottom: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    place-self: center;
}

/* Hover-effekt */
.category-menu .item:hover .category-menu-icon {
    transform: scale(1.08);
    box-shadow: 0 6px 14px rgba(0,0,0,0.1);
}

/* Länk-text */
.category-menu .text {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-drkblue);
    text-decoration: none;
    display: block;
    margin-top: 5px;
    line-height: 1.3;
    
}

    .category-menu .text:hover {
        text-decoration: underline;
    }

/* Back-knapp och current category ska INTE visa bild */
.category-menu .back-link + .category-menu-icon,
.category-menu .current-link + .category-menu-icon {
    display: none !important;
}



.category-topmenu-container {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        position:relative;
    }

        .category-topmenu-container .category-menu {
          flex-wrap: wrap; /* ❗ Ingen radbrytning */
          overflow-x: auto;
          white-space: nowrap;
          display: flex;
         /* -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
          -webkit-mask-repeat: no-repeat;
          -webkit-mask-size: 100% 100%;
          mask-image: linear-gradient(to right, black 90%, transparent 100%);
          mask-repeat: no-repeat;
          mask-size: 100% 100%;*/
        }

            .category-topmenu-container .category-menu .item {
                flex: 0 0 auto; /* ❗ Viktigt för att scroll ska fungera */
            }
            


/* --- MOBIL: SCROLLA SIDLEDES --- */
@media (max-width: 768px) {
    .category-topmenu-container {
        /*overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
            */
    }

        

    .category-menu-icon {
        margin: auto;
    }

    .category-menu .text {
        font-size: 14px;
    }
}





.category-info{
    padding-left: 15px;
}
.category-info .image{
    overflow: hidden;
}
.category-info .category-image{
    max-width: 100%;

}
.category-image img {
    padding: 0.5rem;
    background-color: #fff;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    box-shadow: 0px 5px 5px #0000001c;
}
.category-info .sub-categories-wrapper{
    margin: 20px 0;
}
.category-info .sub-category-links-toggle{
    display: none;
}
.category-info .sub-category-link{
    border: 1px solid #ddd;
    display: inline-block;
    margin: 5px 10px 5px 0;
    padding: 5px 10px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
}
.category-info .product-list-controls{
    padding: 10px 0px 20px;
    overflow: hidden;
    font-size: 15px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    margin-bottom:1rem;
    align-items:center;
    overflow:visible;
    flex-wrap: wrap; 
    justify-content: center; 
    gap:5px;
    position: sticky;
    top: 192px;
    z-index:100;
    background:#fff;
    margin-inline: -10px;
}
.category-info .product-list-controls .label{
    font-weight: 700;
}
.category-info .product-list-control{
    float: left;
    margin-right: 2px;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding-top: 16px;
    height: min-content;
}



.category-info .product-list-control .label{
    font-weight: 300;
    display:block;
}
.category-info .product-list-control .dropdown-control{
    margin: 0 5px 0 0;
    padding: 0 15px 0 5px;
    border: none;
    padding-right: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("/gfx/arrow-down-16.png");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor:pointer;
}
.category-info .sorting-control{
    float: left;
}
.category-info .sorting-control .sotring-dropdown{
    margin: 0 5px;
    padding: 8px;
    border: none;
    padding-right: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("/gfx/arrow-down-16.png");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.category-info .number-of-products-control{
    display: flex;
    padding: 0px 4px 0px;
}
.category-info .number-of-products-control .view-button{
    display: flex;
    justify-content:center;
    align-items:center;
    padding: 5px 5px;
    vertical-align: middle;
    min-width:50px;
    text-align:center;
    margin-right:8px;
}
.category-info .number-of-products-control .view-button.active{
}

#filterAndSortBtn, 
.category-info .number-of-products-control .view-button,
 .category-info .product-list-control {
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.category-info .number-of-products-control .view-button {padding: 12px 14px;}

.product-list {
    overflow: hidden;
    margin: 10px 0px;
    padding: 2px;
}
.product-list .product-item{
    float: left !important;
    aspect-ratio: 2/3;
}

.product-list.list-view .product-item{
    float: none;
    width: auto;
}

.product-list .inner-product-item{
    display: block;
    margin: 10px;
    text-align: left;
    text-decoration: none;
    border-radius: 4px;
    background-color: #ffffff;
}

.product-list .inner-product-item .image{
    width: 100%;
    overflow: hidden;
    position: relative;
}


.product-list .inner-product-item .image img{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    max-width: 110%;
    max-height: 110%;
    display: block;
}
.product-list .inner-product-item .product-title{
    margin: 8px 0px 0;
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 600;
    color: var(--c-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.25em;
}
.product-list .inner-product-item .product-description{
    display: none;
}
.product-list .inner-product-item .product-price{
    color: var(--c-brand);
    font-size: .98rem;
    font-weight: 700;
    position:relative;
    padding-bottom: 10px;
}
.product-list .inner-product-item .original-price{
    display: none;
}
.product-list .campaign .inner-product-item .product-price {
    color: red;
}
.product-list .campaign .inner-product-item .original-price{
    display: block;
    color: #353535;
    font-size: 14px;
    text-decoration:line-through;
    margin-top: -10px;
    position: absolute;
    left: 0;
    right: 0;
}

/*List View*/
.product-list.list-view {
    overflow: visible;
    margin: 0;
    padding: 0;
}
.product-list.list-view .product-item{
    float: none;
    width: auto;
    clear: both;
}
.product-list.list-view .inner-product-item{
    text-align: left;
    position: relative;
    overflow: hidden;
}
.product-list.list-view .inner-product-item .image{
    width: 15%;
    aspect-ratio:1/1;
    margin: 10px 0;
    float: left;
    text-align: center;
}

.product-list.list-view .inner-product-item .product-title{
    padding-left: 10px;
    font-size: 18px;
    margin-bottom: 0;
    font-weight: 700;
    height: auto;
}
.product-list.list-view .inner-product-item .product-description{
    display: block;
    padding-left: 10px;
    font-size: 16px;
    float: left;
}

.product-list.list-view .inner-product-item .product-price{
    position:absolute;
    bottom: 10px; 
    right: 10px;
}

.category-info .pager{
    clear: both;
    text-align: right;
    font-size: 18px;    
    margin: 10px 0 4rem;
}
.category-info .pager a{
    text-decoration: none;
    margin: 2px 0;
    display: inline-block;
    width: 30px;
    text-align: center;
    background-color: #FFF;
    color: #a0a0a0;
    vertical-align: middle;
    padding: 4px 3px;
    box-sizing: content-box;
    border-radius: 4px;
    border: 1px solid #bbb;
}
.category-info .pager .current{
    background-color: var(--c-drkblue);
    border-color: #353535;
    color: #fff;
}

    .topmenuclass{
        display:none;
    }

#filterBtn {
    cursor: pointer;
    margin: 0;
    align-items: center;
    padding-left: 15px;
    display: none;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
    #filterBtn img {display: inline; margin-left: 5px; }

#filterAndSortWrapper.popup,
#filterAndSortWrapper {
    /*z-index: 999999 !important;*/    
    z-index: 1001;
        
    box-sizing: border-box;
    flex-direction: column;
    height: 100%;    
    display: flex;
}
/*
    #filterAndSortWrapper.popup {
        position: fixed;
        right: 0;
        top: 0;
        width: 30%;
        min-width: 450px;        
        box-shadow: 0px 5px 5px #0000001f;
        max-width: 500px;
        background: #fff;
    }
*/
#filterAndSortWrapper.show {
    display: flex;
}

#filterAndSortWrapper #filterHeader { font-size: 28px; font-weight: bold; line-height: 1em; display: flex; justify-content: space-between; align-items: center; margin: 0px;  }
#filterAndSortWrapper.popup #filterHeader { font-size: 28px; font-weight: bold; line-height: 1em; display: flex; justify-content: space-between; align-items: center; margin: 0 0 30px 0; padding: 35px 35px 0 35px; }
#filterAndSortWrapper #filterHeader #closeFilter { display:none; }
#filterAndSortWrapper.popup #filterHeader #closeFilter { display:none;}
    #filterHeader span { font-size: 14px; cursor: pointer; }
    #filterHeader span img {position:relative; top: 5px;}
#filterAndSortWrapper .filterOptions {
    
    padding: 0px; 
    flex:1 1; 
    overflow: visible; 
    
  
}
#filterAndSortWrapper.popup .filterOptions {
    padding: 0 35px 35px 35px; 
    -webkit-mask-image: linear-gradient(to bottom, black 95%, transparent 100%);
  -webkit-mask-repeat: no-repeat;

  mask-image: linear-gradient(to bottom, black 95%, transparent 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}


#filterAndSortWrapper .filterOption { border-bottom: 1px solid #E1E1E1; padding: 10px 0; }
#filterAndSortWrapper .filterOption:last-child { border-bottom: none;  }
    #filterAndSortWrapper .filterOptions .label {display:flex; justify-content:space-between; align-items: center; font-size:14px; font-weight:500; cursor:pointer;}
#filterAndSortWrapper .filterOptions .label .rightLabel { display: flex; justify-content: space-between; align-items: center; font-size: 14px; gap: 10px;}
#filterAndSortWrapper .filterOption .label .filterCount {background:var(--green); color:#000; padding:5px; border-radius:50%; height:20px; width:20px; display:inline-flex; justify-content:center; align-items:center; font-size:16px; line-height:1em;}
#filterAndSortWrapper .filterOption .filter-control { display: none; margin-top: 15px; }
#filterAndSortWrapper .filterOption .filter-control .option { display: flex; align-items: center;  gap: 10px; }
#filterAndSortWrapper .filterOption .filter-control .option > div { }
#filterAndSortWrapper .filterOption.open .label img {transform:rotate(180deg);}

#filterAndSortWrapper .filterOption.open .filter-control { display: block; }
#filterAndSortWrapper .filterOption ul.filter-control {list-style:none; padding: 0; margin:10px 0;}

        #filterAndSortWrapper .filterOption .custom-checkbox,    
        #filterAndSortWrapper .filterOption ul.filter-control li {font-size: 14px; display:flex; justify-content:flex-start; align-items:center; margin: 0 0 0 0; gap:4px;}
        
        #filterAndSortWrapper .filterOption .custom-checkbox:last-child,    
        #filterAndSortWrapper .filterOption ul.filter-control li:last-child {margin: 0;}
        
        #filterAndSortWrapper .filterOption .custom-checkbox input[type="radio"],
        #filterAndSortWrapper .filterOption ul.filter-control li input[type="radio"] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 2px solid var(--green); border-radius: 50%; outline: none; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease; margin: 0 5px 0 0; }
        #filterAndSortWrapper .filterOption .custom-checkbox input[type="radio"]:hover,
        #filterAndSortWrapper .filterOption ul.filter-control li input[type="radio"]:hover { box-shadow: 0 0 5px rgba(0, 103, 73, 0.5); }
        #filterAndSortWrapper .filterOption .custom-checkbox input[type="radio"]:checked,
        #filterAndSortWrapper .filterOption ul.filter-control li input[type="radio"]:checked { 
            background-color: var(--c-brand);
            border-color: var(--c-brand);    
        }
        #filterAndSortWrapper .filterOption .custom-checkbox input[type="radio"]:not(:checked), 
        #filterAndSortWrapper .filterOption .custom-checkbox input[type="radio"]:not(:checked) + label, 
        #filterAndSortWrapper .filterOption ul.filter-control li input[type="radio"]:not(:checked),
        #filterAndSortWrapper .filterOption ul.filter-control li input[type="radio"]:not(:checked) + label {
            cursor:pointer;
        }

        #filterAndSortWrapper .filterOption .custom-checkbox input[type="checkbox"],
        #filterAndSortWrapper .filterOption ul.filter-control li input[type="checkbox"] { 
            appearance: none; -webkit-appearance: none; width: 16px; height: 16px; 
            border: 2px solid var(--c-brand);
            border-radius: 4px; outline: none; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease; }
        #filterAndSortWrapper .filterOption .custom-checkbox input[type="checkbox"]:checked,
        #filterAndSortWrapper .filterOption ul.filter-control li input[type="checkbox"]:checked {            
            background-color: var(--c-brand);
            border-color: var(--c-brand);    
        }
        #filterAndSortWrapper .filterOption .custom-checkbox input[type="checkbox"]:hover,
        #filterAndSortWrapper .filterOption ul.filter-control li input[type="checkbox"]:hover { box-shadow: 0 0 5px rgba(0, 103, 73, 0.5); }
        #filterAndSortWrapper .filterOption .custom-checkbox input[type="checkbox"]:checked::after,
        #filterAndSortWrapper .filterOption ul.filter-control li input[type="checkbox"]:checked::after { content: "✔"; color: white; font-size: 16px; display: flex; justify-content: center; align-items: center; height: 100%; }

        #filterAndSortWrapper .filterOption .filter-control .option > div.productCount {margin-top: 2px;}
        #filterAndSortWrapper .filterOption .filter-control .filter-count { font-size:11px; margin-top: 2px; margin-left:7px; }
        #priceRange { margin: 20px 12px; }
    #priceRange .noUi-handle { height: 24px; width: 24px; top: -5px; right: -12px; border-radius: 50%; cursor:pointer;}
    #priceRange .noUi-connect { background: var(--green); }
    #priceRange .noUi-handle:after, #priceRange .noUi-handle:before {display:none;}
.filterOption .filter-control .currentPriceRanges {display:flex; justify-content:space-between; align-items:center; font-size:14px;}

#filterFooter { display: none; position: relative;margin-top: auto; bottom: 0; padding: 0 35px 35px 35px; width: 100%; box-sizing: border-box; }
            #filterFooter a {display:block; padding: 10px 20px; width:100%; box-sizing:border-box; font-size:18px; cursor:pointer; text-align:center; margin: 10px 0 0 0; }
            #filterFooter a.showFilterResultsBtn {border: 1px solid var(--green); background:var(--green); color:#333;}
                #filterFooter a.showFilterResultsBtn:hover { border: 1px solid var(--darkGreen); background: var(--darkGreen); color: #000; text-decoration:none; }
                a.clearFilterBtn {border: 1px solid #333; border-radius:8px; font-size: 14px; padding: 0px 6px; position:relative; top: -5px; margin-left: auto; display: none; }
                .popup a.clearFilterBtn {margin-right:1rem;}
                a.clearFilterBtn:hover { border: 1px solid #0063b4; text-decoration:none;  }


.overlay-btn { min-width: 250px; z-index: 200; }
.overlay-btn .filterOption .label {display:flex; justify-content:space-between; align-items: center; font-size:15px; cursor:pointer;}
.overlay-btn .filterOption.open .label img {
    transform: rotate(180deg);
}
.filterOption .label img {display:inline; height: 11px; }
.overlay-btn .overlay-position { position:relative; width: 100%;}
    .overlay-btn .overlay-position .overlay-pane {
        box-shadow: 0px 4px 15px rgba(13,31,50,.3);
        position: absolute;
        background-color: var(--c-def-background);
        width: 100%;
        top: 10px;
        border-radius: 4px;
        padding: 5px;
        display: none;
    }
    .overlay-btn .open .overlay-position .overlay-pane { display: block; }
.overlay-btn .filterOption ul.filter-control li {
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 0 0 0;
    gap: 4px;
}
.overlay-btn .filterOption .custom-checkbox input[type="radio"]:checked, 
.overlay-btn .filterOption ul.filter-control li input[type="radio"]:checked {
    background-color: var(--c-brand);
    border-color: var(--c-brand);
}
.overlay-btn .filterOption .custom-checkbox input[type="radio"], 
.overlay-btn .filterOption ul.filter-control li input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 2px solid var(--green);
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    margin: 0 5px 0 0;
}
    .overlay-btn .filterOption ul.filter-control li label { cursor: pointer; }

.filter-state { display: none; }
/* 
    Productcard for grid.

*/


.product-card {
    border-radius:12px;
    padding: 15px;
    margin-bottom: 5px;
    overflow:visible;
    transition: all 0.3s ease !important;
    
}
.product-card-horizontal .product-card {
    padding: 0px 0px;    
    border-radius:10px;
}
    .product-card .inner-frame {
        box-shadow: 0px 4px 15px rgba(13,31,50,.15);
        transition: box-shadow .2s;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 12px;
        overflow: hidden;
        position: relative;        
        box-shadow:none;
    }
.product-card-horizontal .product-card .inner-frame {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;  
    padding: 10px;
    align-items: unset;
}
.product-card-horizontal .product-card .head {width: auto; flex: 0 1 auto; overflow: clip; }
.product-card-horizontal .product-card .head .image { max-width: 200px; }
.product-card-horizontal .product-card .head .brand { top: 1px; left: 3px; }
    .product-card .inner-frame:hover {
         box-shadow: none;
         overflow:visible;
    }
    .product-card .inner-frame:after {
        content: "";
        background: #004f90;
        width: 100%;
        height: 4px;
        position: absolute;
        left: 0;
        bottom: 0;
        opacity: 0;
        transition: opacity .2s;
    }
    .product-card .inner-frame:hover:after {
        opacity: 1;
    }
    
    .product-card .head {
        width: 100%;
    }

    .head {
    position: relative; 
    display: block;
    }

    .head .brand {
    position: absolute;
    top: 10px;       /* adjust as you like */
    left: 10px;      /* adjust as you like */
    z-index: 10;
    display: inline-block;
    }

    .head .brand img {
    width: 90px;    /* or whatever size you want */
    height: auto;
    }

    .product-card .head .image {
        height: 222px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid #e9e9e9;
        padding: 10px 14px;
        position: relative;
        margin-bottom: 15px;
        height: auto;
        border:none;
        margin-bottom:0;
        border-radius:12px;
        min-width: 120px;
    }

    .product-card-horizontal .product-card .head .image {
        padding: 0px 16px;
    }

        .product-card .head .image img { min-width: 120px; }

    
    .product-card .content h3 {
        font-size:16px;
        margin-top:0;
    }

    .product-card .product-title {  }
    .product-card .brand { margin-block: 3px; }

.product-item__favorite-icon {
    position: absolute;
    bottom: 21px;
    right: 0;
    color: #b6b6b6;
    font-size: 18px;
    width: 32px;
    height: 32px;
    cursor: pointer;
}
.absolute-container .product-item__favorite-icon {
    
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    
    width: 100%;
    height: 100%;
    font-size: 32px;
}
    .absolute-container .product-item__favorite-icon .icon {line-height: 1;}




/*
.product-item__favorite-icon:after {
    position: absolute;
    top: 0;
    right: 0;
    border-right: 25px solid #fff;
    border-bottom: 25px solid transparent;
    content: ''
}
*/
.product-item__favorite-icon .icon {
    position: absolute;
    
    z-index: 11;
}

.is-active.product-item__favorite-icon .icon {
    color: #fc5d62
}


.product-item__favorite-icon a:hover .icon {
    color: #fc5d62;
}


.is-active.product-item__favorite-icon a:hover .icon {
    color: #ccc;
}

.is-hover.product-item__favorite-icon .icon {
    animation: pop 0.25s cubic-bezier(.694, .0482, .335, 1)
}


/* 
    Productcard for list.
*/
.list-view .product-card {
   padding: 0px;
   margin-bottom: 15px;
}

.list-view .product-card .inner-frame {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem; 
}

.list-view .product-card .head { width: auto; flex: 0 1 auto; overflow: hidden;}

.list-view .product-card .content {
    padding: 0px 0px 10px 0px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;    
}

    .list-view .product-card .content .manufacturer-name,
    .list-view .product-card .content .product-title,
    .list-view .product-card .content .brand,
    .list-view .product-card .content .cenor-sku,
    .list-view .product-card .content .brand-sku {grid-column: 1/3;}
    .list-view .product-card .content .product-logged-in-panel {grid-column:3/5 ;grid-row: 1/7;}
    .list-view .product-card .content .brand {grid-row: 1;}
    .list-view .product-card .content .manufacturer-name {grid-row: 3; margin-bottom: 0px;}
    .list-view .product-card .content .product-title {min-height: unset;}

.list-view .product-card .head .image {
    height: clamp(112px, 12vw, 130px);
    min-height: 112px;
}

.product-list .cols-1 .product-status .product-item__favorite-icon,
.product-list .cols-2 .product-status .product-item__favorite-icon,
.product-list .cols-3 .product-status .product-item__favorite-icon,
.product-list .cols-4 .product-status .product-item__favorite-icon,
.product-list .cols-5 .product-status .product-item__favorite-icon,
.product-list .cols-6 .product-status .product-item__favorite-icon { right: 0px; }




    .product-card .head .brand {
        mix-blend-mode: darken;
        position: absolute;
        top: 10px;
        left: 10px;
        display: flex;
    }
        .product-card .head .brand img {
            max-width: 60px;
            max-height: 20px;
            height:auto;
            width:auto;
        }

        
    .product-card .content {        
        padding: 10px 5px;
        padding-bottom: 20px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        flex-direction: column;
    }

    .product-card-horizontal .product-card .content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 7px 12px 7px 12px;
        font-size: 0.9rem;
        flex: 1 1 auto;
    }
    .product-card-horizontal .product-card .content .brand {grid-column:1; grid-row:1; }
    .product-card-horizontal .product-card .content .manufacturer-name {grid-column:2; grid-row:1; margin-block: 3px; justify-self:end;}
    .product-card-horizontal .product-card .content .title {grid-column:1/3; grid-row:2; margin-bottom:4px;}
    .product-card-horizontal .product-card .content .cenor-sku,
    .product-card-horizontal .product-card .content .brand-sku,
    .product-card-horizontal .product-card .content .product-logged-in-panel {grid-column:1/3;}
    .product-card-horizontal .product-card .content .product-logged-in-panel .product-status  {margin-top:5px;}
    .product-card-horizontal .product-card .product-item__favorite-icon {right: 5px; bottom: 7px; }
    
    .product-card .content h3 {
        font-size: 12px;
        line-height: 20px;
        color: #8c8c8c;
        margin-bottom: 5px;
        font-weight: 100;
    }

    .product-card .content .product-name { height:60px;}
    
    
    .product-card .content .sku {
    }
    
    .product-card .content .product-status {
        margin-top: auto;
        margin-bottom: 0;
    }
    .product-card-horizontal .product-card .content .product-status {
        margin-top: 0;
        margin-bottom: auto;
    }

    .add-to-cart-btns .cart,
    .product-card .content .product-status .cart {
        display: flex;            
        transition: opacity .2s;
        flex-grow: 1;
        margin-top:10px;
    }
     
    .add-to-cart-btns .cart .quantity,
    .product-card .content .product-status .cart .quantity {
        width: 110px;        
        display: flex;
        border: 1px solid #e9e9e9;
        border-radius: 4px;
        height: 40px;
        overflow: hidden;
        transition: border .15s ease;
        width: 110px;
    }

    .add-to-cart-btns .cart .quantity label,
    .product-card .content .product-status .cart .quantity label {
        margin: 0;
    }
    

    .product-card .content .product-status .cart .stock-status {
        font-size: 13px;
    }

    .stock-status:before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        background: #00b35d;
        border-radius: 100%;
        margin-right: 8px;
    }


    .stock-status.out-of-stock:before {
        background: #c90909;
    }

    .stock-status.order-item {
        background: #058b16;
        padding: 3px 7px;
        border-radius: 5px;
        color: white;
        font-size: 1.2rem;
    }
    .product-card .stock-status.order-item {        
        font-size: 1em;
    }
    .stock-status.order-item:before {
        content: "";
        display: none;        
    }

    .product-card .content .product-logged-in-panel {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: start;   
        margin-top: auto;
        margin-bottom:0;
    }

    .add-to-cart-btns .cart.out-of-stock,
    .product-card .content .product-status .cart.out-of-stock {
        opacity: 0.3;
    }

    .add-to-cart-btns .cart.out-of-stock button,
    .add-to-cart-btns .cart.out-of-stock input,
    .add-to-cart-btns .cart.out-of-stock a ,
    .product-card .content .product-status .cart.out-of-stock button,
    .product-card .content .product-status .cart.out-of-stock input,
    .product-card .content .product-status .cart.out-of-stock a {
        cursor: not-allowed;
    }
    

    .product-card .content .product-status .cart.fill {
        height:40px;
    }

    .product-card .content .product-status .cart.stock-status::before {
        position: relative;
        top: 1px;
        margin-right: 5px;
    }

    .add-to-cart-btns .cart .quantity button,
    .product-card .content .product-status .cart .quantity button {
        width: 32px;
        background: #fff;
        outline: none;
        border: none;
        color: #184e8e;
        transition: color .2s;
        padding: 0;
        margin: 0;
    }

    .add-to-cart-btns .cart .quantity button.inactive,
    .product-card .content .product-status .cart .quantity button.inactive {
        color: #e9e9e9;
        cursor: not-allowed;
    }

    .add-to-cart-btns .cart .quantity input,
    .product-card .content .product-status .cart .quantity input {
        background: #fff;
        border-radius: 0;
        border: none;
        -moz-appearance: textfield;
        text-align: center;
        width: calc(100% - 64px);
        height: 38px;
        padding: 0;
    }

    .btn-primary {
        font-size: 16px;
        font-weight: bold;
        min-width: 130px;
        display: inline-block;
        border-radius: 4px;
        font-size: 16px;
        line-height: 24px;
        border: none;
        outline: none;
        padding: 13px 32px;
        transition: background .2s,color .2s;
        text-align: center;
        user-select: none;
        background: #184e8e;
        color: #fff;
        cursor: pointer;
    }
        .btn-primary:disabled {
            cursor: not-allowed;
        }


    .add-to-cart-btns .btn-primary,
    .product-card .btn-primary {
        width: 40px;
        height: 40px;
        padding: 0;
        min-width: 0;
        margin-left: 8px;
        flex: 0 0 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .add-to-cart-btns .btn-primary { width: auto; flex: 0 0 auto; padding: 0 1rem;}

    .add-to-cart-btns .btn-primary svg,
    .product-card .btn-primary svg {
        width: 24px;
        height: 24px;
    }
        .add-to-cart-btns .btn-primary .buy-btn-text { margin-left: 7px; }


    .product-images .ribbon.new,
    .product-card .ribbon.new,
    .product-images .ribbon.campaign,
    .product-card .ribbon.campaign,
    .product-images .ribbon.onsale,
    .product-card .ribbon.onsale {
        font-size: 14px;
        text-transform: uppercase;
        margin: 0;
        background: var(--c-sale);
        color: #fff;
        padding: 0;
        position: absolute;
        top: 0;
        right: 0;
        transform: translateX(30%) translateY(0%) rotate(45deg);
        transform-origin: top left;
        pointer-events: none;
    }

    .product-images .ribbon.new,
    .product-images .ribbon.campaign,    
    .product-images .ribbon.onsale { font-size: 21px; }

    .product-images .ribbon.new:before,
    .product-card .ribbon.new:before,
    .product-images .ribbon.campaign:before,
    .product-card .ribbon.campaign:before,
    .product-images .ribbon.onsale:before,
    .product-card .ribbon.onsale:before {
        right: 100%;
    }

    .product-images .ribbon.new:after,
    .product-card .ribbon.new:after,
    .product-images .ribbon.campaign:after,
    .product-card .ribbon.campaign:after,
    .product-images .ribbon.onsale:after,
    .product-card .ribbon.onsale:after {
        left: 100%;
    }

    .product-images .ribbon.new:before,
    .product-images .ribbon.new:after,
    .product-card .ribbon.new:before,
    .product-card .ribbon.new:after,
    
    .product-images .ribbon.campaign:before,
    .product-images .ribbon.campaign:after,
    .product-card .ribbon.campaign:before,
    .product-card .ribbon.campaign:after,

    .product-images .ribbon.onsale:before,
    .product-images .ribbon.onsale:after,
    .product-card .ribbon.onsale:before, 
    .product-card .ribbon.onsale:after {
        content: "";
        position: absolute;
        top: 0;
        margin: 0 -1px;
        width: 100%;
        height: 100%;
        background: #c21f2b;
    }


    .product-images .ribbon.new:before,
    .product-images .ribbon.new:after,
    .product-card .ribbon.new:before,
    .product-card .ribbon.new:after,
    .product-images .ribbon.new,
    .product-card .ribbon.new {background: #edee3d;}

    .product-images .ribbon.campaign:before,
    .product-images .ribbon.campaign:after,
    .product-card .ribbon.campaign:before,
    .product-card .ribbon.campaign:after,
    .product-images .ribbon.campaign,
    .product-card .ribbon.campaign {background: #c17406;}

    .product-card-horizontal .product-images .ribbon,
    .product-card-horizontal .product-card .ribbon {
        top: unset;
        right: unset;
        transform: unset;
        bottom: -50px;
    }

@media only screen and (max-width: 1200px) {
    .category-info{
        padding: 0;
    }
    .product-list {
        margin: 10px 0;
    }
    .category-info .product-list-controls { margin-inline: 0px; }

    .category-aside,
    .category-sidebar{
        /*display:none;*/
        width: 0;
        overflow:hidden;
        position: absolute;
    }
    #filterAndSortWrapper { display: none;}
    #filterAndSortWrapper.popup {
        position: fixed;
        right: 0;
        top: 0;
        width: 30%;
        min-width: 450px;        
        box-shadow: 0px 5px 5px #0000001f;
        max-width: 500px;
        background: #fff;
        display: flex;
    }
    #filterAndSortWrapper.popup #filterHeader #closeFilter { display:block;align-self: start;}
    #filterBtn { display: flex;  }
    .topmenuclass{
        display:block;
    }
}

@media only screen and (max-width: 1050px) {
    .product-card-horizontal .product-card .inner-frame {
        flex-wrap: wrap;
        flex-direction: column;
    }

    .product-card-horizontal .product-images .ribbon,
    .product-card-horizontal .product-card .ribbon {
        top: 0;
        right: 0;
        transform: translateX(30%) translateY(0%) rotate(45deg);
        bottom: unset;
    }

        .product-card-horizontal .product-card .inner-frame .head,
        .product-card-horizontal .product-card .inner-frame .content {
            width: 100%;
        }
        .product-card-horizontal .product-card .head .image, 
        .product-card-horizontal .product-card .head .brand { margin: auto; max-width: 100%; }
        .product-card-horizontal .product-card .head .brand { top: 10px; left: 10px;}
        .product-card-horizontal .product-card .product-item__favorite-icon { right:3px; }
    
}

@media only screen and (max-width: 920px) {
    .product-images .ribbon.new,    
    .product-images .ribbon.campaign,    
    .product-images .ribbon.onsale { font-size: 15px; }
}

@media only screen and (max-width: 768px) {
    .category-info .sub-categories-wrapper{
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 4px;
    }
    .category-info .sub-category-links-toggle{
        display: block;
        margin: 0;
        padding: 8px 10px 4px;
        text-transform: uppercase;
        background-image: url(/gfx/arrow-down-16.png);
        background-position: right 10px center;
        background-repeat: no-repeat;
        cursor: pointer;
    }

    .category-info .sub-category-links{
        display: none;
    }
    .category-info .sub-category-links.expand{
        display: block;
    }

    .category-info .sub-category-link{
        border: none;
        border-radius: 0;
        display: block;
        margin: 5px 10px;
        padding: 8px 0 4px;
    }
}

@media only screen and (max-width: 700px) {
    
    .category-info .product-list-controls > div { flex: 1 1 100%; justify-content: center; }
    .category-info .product-list-controls { top: 135px; }
}

@media only screen and (max-width: 680px) {
    .product-list .product-item{
        width: 50% !important;
    }
    .product-list .inner-product-item .product-title{
        font-size: 16px;
    }
    .product-list .inner-product-item .product-price{
        font-size: 20px;
    }
    .product-list.list-view .inner-product-item .product-price{
        bottom: 10px;
        padding: 0;
    }
    .product-list.list-view .inner-product-item .product-title{
        padding-left: 5px;
        font-size: 16px;
    }
    .product-list.list-view .inner-product-item .product-description{
        padding-left: 5px;
        font-size: 14px;
    }

    .list-view .product-card .content { display: flex; }

    

    .category-info .product-list-control{
        margin: 0;
    }
    .category-info .product-list-control .label{
        font-size: 12px;
    }
    .category-info .product-list-control .dropdown-control{
        font-size: 12px;
        padding: 4px;
        padding-right: 20px;
    }
    .category-info .number-of-products-control {
        padding: 16px 0 0;
    }
}

@media only screen and (max-width: 640px) {
    .product-images .ribbon.new,    
    .product-images .ribbon.campaign,    
    .product-images .ribbon.onsale { font-size: 21px; }
}

@media only screen and (max-width: 540px) {
    .root-categories .cat-grid .cat-card {
        width: 50%;
        min-width: 40%;
        max-width: 46%;
    }
}

@media only screen and (max-width: 500px) {
    #filterAndSortWrapper { width: 100%; min-width: 100%;}
}

@media only screen and (max-width: 400px) {
    .product-list .product-item{
        float: none;
        width: auto;
        margin: 10px 0;
    }
    .product-list .product-item{
        width: 100% !important;
        aspect-ratio: 3/4;
    }
    .category-info .product-list-controls { top: 192px; }

    .product-list.list-view .inner-frame { flex-direction: column; }
    .product-list.list-view .inner-frame .head { text-align:center; }
    .product-list.list-view .inner-frame .head .image { margin-inline: auto; }
    .product-list.list-view .inner-frame .product-logged-in-panel { align-items: center; }
    .product-list.list-view .inner-frame .product-logged-in-panel .product-status { text-align: center; }
    .product-list.list-view .inner-frame .product-logged-in-panel .product-status > * { margin-inline:auto; }

    .product-list.list-view .inner-product-item .product-title{
        font-size: 14px;
    }
    .product-list.list-view .inner-product-item .product-description{
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 80%;
        box-sizing: border-box;
    }
}
@media only screen and (min-width: 769px) {
    .category-info .category-image {
        display: none;
    }
    .category-info .sub-category-link:hover {
        border: 1px solid #666;
        background-color: #666;
        color: #fff;
    }
}

@media only screen and (max-width: 360px) {
    .product-images .ribbon.new,    
    .product-images .ribbon.campaign,    
    .product-images .ribbon.onsale { font-size: 15px; }
}