/* Custom Css */
.other-attribute-list {
    margin-bottom: 33px;
}
.deatil-tab-content {
    margin-top: 33px;
}
.fotorama__img {
  object-fit: scale-down;
}
.minicart-items-wrapper .product-item .product-image-container .product-image-photo, .product-image-container img{
  object-fit:contain;
}
.page-header .header.links li.wishlist > a:before {
  content: '\2605';
}
.page-header .header.links li.my-account > a:before {
  content: '\1F464';
}
.page-header .header.links li.tool-cabinet-link > a:before {
  content: '\f0ad';
}
.price {
  color: black;
}
.cdz-product-wishlist a.action.towishlist:hover:before {
  color: #efd111;
  content: '\2606';
  font-size: x-large;
}
.cdz-product-wishlist a.action.towishlist:before {
  content: '\2606';
  font-size: x-large;
}

/* category menu effects */
.cdz-menu .groupmenu-drop .item:hover {
  background: #efd111;
  -moz-transition: background 500ms ease;
  -webkit-transition: background 500ms ease;
  -o-transition: background 500ms ease;
  transition: background 500ms ease;
}

@media (min-width: 768px), print{
  .cdz-main-menu .cdz-vertical-menu li.level0>a.menu-link span {
    padding: 20px 20px 20px 20px;
  }
}

@media only screen and (min-width: 767px) {
    .cdz-main-menu .cdz-vertical-menu li.level0 > a.menu-link .menu-icon {
        padding-top: 5px;
    }

    .cdz-menu i.menu-icon.img-icon img {
        max-width: 50px;
    }
}

@media only screen and (min-width: 767px) {
    .filter-options-content-inner {
        max-height: none !important;
    }
}

/* back to top arrow */
#back-top a {
  background: #efd111 !important;
  border-color: #282828 !important;
}

#back-top a:hover {
  background: #ffffff !important;
  color: #282828 !important;
  border-color: #282828 !important;
}

.small-loader,
.small-loader:after {
    border-radius: 50%;
    width: 0.6em;
    height: 0.6em;
}
.small-loader {
    font-size: 0.6em;
    display: inline-block;
    position: relative;
    text-indent: -9999em;
    border-top: 0.9em solid rgba(86,86,86, 0.2);
    border-right: 0.9em solid rgba(86,86,86, 0.2);
    border-bottom: 0.9em solid rgba(86,86,86, 0.2);
    border-left: 0.9em solid #565656;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

.price-loader,
.price-loader:after {
  border-radius: 50%;
  width: 0.6em;
  height: 0.6em;
}
.price-loader {
  font-size: 0.6em;
  display: inline-block;
  position: relative;
  text-indent: -9999em;
  border-top: 0.9em solid rgba(86,86,86, 0.2);
  border-right: 0.9em solid rgba(86,86,86, 0.2);
  border-bottom: 0.9em solid rgba(86,86,86, 0.2);
  border-left: 0.9em solid #565656;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.price-wrapper + .price-loader {
  margin-left: 6px;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.product-options-bottom .price-box .price-container .price, .product-info-price .price-box .price-container .price {
  font-size: 26px;
}
.product-item .price.original-price {
  text-decoration: line-through;
  font-size: 10px;
}
.product-info-price .price-box .price-container .price.original-price {
  text-decoration: line-through;
  font-size: 16px;
}
.original-price + .price {
  margin-left: 4px;
}

/* category page changes*/

.product-item-details .icons {
  display: flex;
  align-items: center;
  height: 42px;
  padding-bottom: 2px;
}
.icons img.icon:not(:last-child) {
  padding-right: 4px;
}
.icon.icon-brands {
  width: auto;
  max-width: 100px;
  max-height: 32px;
  object-fit: scale-down;
}
.product-item-details .name-variant {
  padding-bottom: 5px;
}
.product-item-no {
  color: #ccc;
  font-size: 12px;
}

/* product detail page changes*/

#additional > table > tbody > tr:nth-child(even){
    background: #CCC;
}

#product-options-wrapper > .fieldset > div:first-child:only-of-type{
	width: 100%;
	padding: 0px;
}

#product-options-wrapper > .fieldset > div:first-child{
   width: 25%;
   float: left;
   padding-right:10px;
   padding-left: 0px;
}

#product-options-wrapper > div > div:nth-child(2){
   width: 25%;
   float: left;
   padding-left: 0px;
   padding-right: 10px;
}

#product-options-wrapper > div > div:nth-child(3),
#product-options-wrapper > div > div:nth-child(4){
   width: 25%;
   float: left;
   padding-left: 10px;
}


/*
#product-options-wrapper > div > .configurable {
   width: 25%;
   float: left;
   padding-left: 10px;
}


#product-options-wrapper > div > div:nth-child(even){
   width: 50%;
   float: left;
   padding-left: 10px;
   padding-right: 0px;
}

#product-options-wrapper > div > div:nth-child(odd){
   width: 50%;
   float: left;
   padding-left: 0px;
   padding-right: 10px;
}

*/

.pdp-brand-icon {
  margin-bottom: 10px;
}

.icon-container:after {
  content: '';
  clear: both;
  display: block;
}

.list_icon_img {
  height: 40px;
  width: auto;
}

.pdp-icon-coating {
  margin-top: 10px;
}

@media only screen and (min-width: 767px) {
  .sticky-menu:not(.active) .search-wrapper {
    border: 1px solid black;
  }
}
@media screen and (min-width: 768px) {
  .page-layout-1column .product-info-main {
    width: 49%;
  }
}
@media screen and (min-width: 768px) {
  .page-layout-1column .product.media {
    width: 49%;
  }
}
.icon-container img {
  display: block;
  float: left;
  margin-right: 3px;
}
.catalog-product-view .product-icon-container,
.catalog-product-view .product-keyword-container {
  width: 100%;
  float: left;
  padding-bottom: 10px;
}
.catalog-product-view .product-icon-container {
  width: 100%;
  float: left;
}
.minicart-wrapper .product-image-wrapper img {
  object-fit: contain;
}

body .page-header .logo .main-logo,
body .page-header .logo .small-logo {
  height: auto;
  width: auto;
}
@media (min-width: 768px) {
  body .header-wrapper-content > .header.content {
    padding: 15px 10px 10px;
  }
  body .sticky-menu:not(.active) .header-wrapper-left {
    padding-top: 0;
  }
  body .page-header .minicart-wrapper {
    margin-top: 10px;
  }
  body .cdz-main-menu .cdz-horizontal-menu li.level0 > a.menu-link:visited,
  body .cdz-main-menu .cdz-horizontal-menu li.level0 > a.menu-link {
    color: #fff;
  }
  body .cdz-main-menu .cdz-horizontal-menu li.level0 > a.menu-link:visited:hover,
  body .cdz-main-menu .cdz-horizontal-menu li.level0 > a.menu-link:hover {
    color: #373737;
  }
  body .cdz-main-menu .cdz-vertical-menu li.level0 > a.menu-link,
  body .cdz-main-menu .cdz-vertical-menu li.level0 > a.menu-link:hover {
    color: #373737 !important;
  }
}
@media only screen and (max-width: 767px) {
  .page-header .logo .small-logo {
    height: auto;
    width: auto;
  }
}

/* Order history and details changes */
.order-details-items .col.name {
  padding-top: 20px;
}
.shipment-date.is-confirmed {
  font-weight: bold;
}

.order-item-row .addinfo ul {
  padding-left: 8px;
  list-style: '- ';
}
tr.sales-history-item.offer {
  border: 2px solid #efd111;
}

tr.sales-history-item.offer > td.id,
tr.sales-history-item.offer > td.date,
tr.sales-history-item.offer > td.item-no,
tr.sales-history-item.offer > td.unit,
tr.sales-history-item.offer > td.qty,
tr.sales-history-item.offer > td.price,
tr.sales-history-item.offer > td.total {
  font-weight: bold;
}

button.flat {
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  background: none;
  border: none;
  background: none;
  text-decoration: inherit;
  text-transform: inherit;
  text-align: inherit;
  display: inline;
  margin: 0;
  padding: 0;
  transition: inherit;
}
button.flat:hover {
  text-decoration: underline;
  color: #1d71ab;
}

.sales-history td > .price {
  font-weight: bold;
}
.actions-toolbar {
  margin-bottom: 20px;
}

.application-table {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
}
.application-table .item {
  border: 1px solid #eee;
  width: 80px;
  padding: 3px;
  margin: 3px;
}
.application-table .value {
  text-align: center;
  padding: 3px;
  font-weight: bold;
}
.application-table .value .recommended,
.application-table .value .limited-suitability,
.application-table .value .suitable {
  height: 20px;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
}
.application-table .value .recommended {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.467 8.467' height='32' width='32'%3E%3Ccircle r='3.969' cy='292.767' cx='4.233' fill='%230b0000' stroke='%23000' stroke-width='.529' transform='translate(0 -288.533)'/%3E%3C/svg%3E");
}
.application-table .value .limited-suitability {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 8.4666665 8.4666669' height='32' width='32'%3E%3Cg transform='translate(0,-288.53333)'%3E%3Ccircle r='3.96875' cy='292.76666' cx='4.2333331' style='fill:none;stroke:%23000000;stroke-width:0.5291667' /%3E%3C/g%3E%3C/svg%3E%0A");
}
.application-table .value .suitable {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='svg8' version='1.1' viewBox='0 0 8.4666665 8.4666669' height='32' width='32'%3E%3Cdefs%3E%3CclipPath id='clipPath1025' clipPathUnits='userSpaceOnUse'%3E%3Crect transform='scale(-1)' y='288.53333' x='0' height='8.4666672' width='4.2333336' style='fill:%23000000;stroke:none' /%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(0,-288.53333)'%3E%3Ccircle transform='scale(-1)' r='3.96875' cy='-292.76666' cx='-4.2333331' style='fill:none;stroke:%23000000;stroke-width:0.5291667' /%3E%3Ccircle clip-path='url(%23clipPath1025)' style='fill:%23000000;stroke:%23000000;stroke-width:0.5291667' id='circle1005' cx='-4.2333331' cy='-292.76666' r='3.96875' transform='scale(-1)' /%3E%3C/g%3E%3C/svg%3E%0A");
}
.application-table .material {
  padding: 3px;
  font-size: 14px;
  text-align: center;
  border-bottom-width: 6px;
  border-bottom-style: solid;
  border-bottom-color: #fff;
  height: 80px;
  overflow-wrap: break-word;
  overflow-y: hidden;
}
.application-table .material-steel_lt_700_nmm2,
.application-table .material-steel_lt_1000_nmm2,
.application-table .material-steel_lt_1400_nmm2 {
  border-bottom-color: #0043a4;
}
.application-table .material-inox_ferritmartens,
.application-table .material-inox_austenitic,
.application-table .material-inox_duplex {
  border-bottom-color: #fff851;
}
.application-table .material-cast,
.application-table .material-cast_gggts,
.application-table .material-cast_ggg {
  border-bottom-color: #b40a1b;
}
.application-table .material-alu,
.application-table .material-alu_lt_8_si,
.application-table .material-alu_gt_8_si {
  border-bottom-color: #41b619;
}
.application-table .material-copper,
.application-table .material-copper_cu_alloy {
  border-bottom-color: #ff8232;
}
.application-table .material-titanium,
.application-table .material-titanium_gt_850_nmm2 {
  border-bottom-color: #ffbd45;
}
.application-table .material-hardened_steel,
.application-table .material-hardened_steel_lt_55_hrc,
.application-table .material-hardened_steel_lt_60_hrc,
.application-table .material-hardened_steel_gt_60_hrc {
  border-bottom-color: #d1d3d4;
}
.application-table .material-graphite,
.application-table .material-graphite_gfkcfkduropl {
  border-bottom-color: #231f20;
}
.application-table .material-inox {
  border-bottom-color: #5199ff;
}
.application-table .material-aluminium {
  border-bottom-color: #f1f2f2;
}
.application-table .material-steel {
  border-bottom-color: #414042;
}
.application-table .material-non_ferrous_metal,
.application-table .material-non_ferrous_metal_soft,
.application-table .material-non_ferrous_metal_hard {
  border-bottom-color: #939598;
}
.application-table .material-metal_high_temperature_resistance {
  border-bottom-color: #414042;
}
.application-table .material-plasticfrp {
  border-bottom-color: #ff8232;
}
.application-table .material-ceramic {
  border-bottom-color: #4d8802;
}
.application-table .material-carbide {
  border-bottom-color: #852eba;
}
.application-table .material-wood,
.application-table .material-wood_soft,
.application-table .material-wood_hard {
  border-bottom-color: #916b4b;
}
.application-table .material-colourpaint {
  border-bottom-color: #fbff00;
}
.application-table .material-stone {
  border-bottom-color: #4d8802;
}
.application-table .material-glass {
  border-bottom-color: #e5f0ff;
}
.application-table .material-ferrite {
  border-bottom-color: #b10361;
}
.application-table .material-plasterboard {
  border-bottom-color: #fbe7b5;
}
.application-table .material-trowels {
  border-bottom-color: #ffdfdc;
}
.application-table .material-super_alloy {
  border-bottom-color: #f00;
}
.checkout-index-index .checkout-billing-address, .checkout-index-index .checkout-payment-method .step-title,
.checkout-index-index .payment-method-title.field.choice {
    display: none;
}
.payment-option._collapsible.opc-payment-additional.discount-code{
  padding: 0px 0px 20px 22px;
}

@media (min-width: 768px){
.product-add-form .product-options-wrapper .field:not(.date) > .control
{
	 width: 100% !important;
}
}
.supstock {
    color: #15cd01;
    font: 600 12px/1.35 Poppins, Helvetica Neue, Verdana, Arial, sans-serif;
    text-transform: uppercase;
    padding: 0;
}
.stock {
    color: #15cd01;
    font: 600 12px/1.35 Poppins, Helvetica Neue, Verdana, Arial, sans-serif;
    text-transform: uppercase;
    padding-right: 10px;
}
ul.pagination.custom {
    list-style-type: none;
    margin: 0 auto;
    text-align: center;
    justify-content: space-between;
}
ul.pagination.custom li {
    margin: 2px 4px 2px 0;
    display: inline-block;
}
ul.pagination.custom li a {
    box-sizing: border-box;
    background-color: #fff;
    text-decoration: none;
    font-size: 12px;
    color: #1d71ab;
    border: 1px solid #1d71ab;
    display: inline-block;
    line-height: 3rem;
    letter-spacing: normal;
    padding: 1px 14px;
}
ul.pagination.custom li a:hover {
    background: #efd111;
    border: 1px solid #efd111;
    color: #282828;
}
ul.pagination.custom li a.order-page-no.active {
    background: #efd111;
    border: 1px solid #efd111;
    font-size: 1.2rem;
    line-height: 3rem;
    letter-spacing: normal;
    color: #282828;
    display: inline-block;
    font-weight: 700;
    padding: 1px 14px;
}
.checkout-index-index .new-address-popup {
    display: none;
}
.table-wrapper.order-page-main {
    background-color: #ffffff;
    padding: 20px;
    box-shadow: 0px 0px 1px #8c8686;
    -moz-box-shadow: 0px 0px 1px #8c8686;
    -webkit-box-shadow: 0px 0px 1px #8c8686;
    -o-box-shadow: 0px 0px 1px #8c8686;
    -ms-box-shadow: 0px 0px 1px #8c8686;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    margin-bottom: 20px;
}
.table-wrapper.oder-history-main-pagination {
    background-color: #ffffff;
    padding: 14px;
    box-shadow: 0px 0px 1px #8c8686;
    -moz-box-shadow: 0px 0px 1px #8c8686;
    -webkit-box-shadow: 0px 0px 1px #8c8686;
    -o-box-shadow: 0px 0px 1px #8c8686;
    -ms-box-shadow: 0px 0px 1px #8c8686;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
ul.pagination.custom li.none {
    display: none;
    position: absolute;
}
.show-total-items {
    float: left;
    padding-top: 13px;
}
@media (max-width: 768px)
{
.show-total-items {
    float: none;
}
}
.page-product-configurable .product-info-main .product-info-stock-sku .stock {
    float: left;
}
.product-info-main .stock {
    margin: 0 !important;
}
.cart-discount {
    display: none;
}
.action-next:before {
    content: "\f105";
    font-family: FontAwesome;
    font-size: 17px;
    line-height: 11px;
    padding-top: 3px;
}
.action-previous:before {
    content: "\f104";
    font-family: FontAwesome;
    font-size: 17px;
    line-height: 11px;
    padding-top: 3px;
}
.action-double-right:before {
    content: "\f101";
    font-family: FontAwesome;
    font-size: 17px;
    line-height: 11px;
    padding-top: 3px;
}
.action-double-left:before {
    content: "\f100";
    font-family: FontAwesome;
    font-size: 17px;
    line-height: 11px;
    padding-top: 3px;
}

/* Categories */

.categories {
    margin-top: 40px;
}

.categories-title {
    text-transform: uppercase;
    font-size: 27px;
    color: #373737;
    margin-bottom: 15px;
}

@media (max-width: 576px) {
    .categories-title {
        font-size: 24px;
    }
}

.category-title {
    text-transform: uppercase;
    padding: 3px 10px;
    background-color: #efd111;
    display: block;
    margin-bottom: 20px;
    font-size: 21px;
    font-weight: 600;
    color: #373737;
}

@media (max-width: 576px) {
    .category-title {
        font-size: 19px;
    }
}

.category {
    padding: 10px 0 8px 0;
}

.category__items {
    display: flex;
    flex-wrap: wrap;
}


.category__item {
    width: 15.4%;
    margin-right: 1.5%;
    margin-bottom: 20px;
}

@media (max-width: 992px) {
    .category__item {
        width: 23%;
        margin-right: 2.6%;
    }
    .category__item:nth-of-type(4n) {
        margin-right: 0;
    }
}

@media (max-width: 576px) {
    .category__item {
        width: 48%;
        margin-right: 4%;
    }
    .category__item:nth-of-type(4n) {
        margin-right: 0;
    }
    .category__item:nth-of-type(2n) {
        margin-right: 0;
    }
}

.category__item:last-of-type {
    margin-right: 0;
}

.category__item:hover {
    text-decoration: none;
}

.category__item:hover .item__image {
    border-color: #d8a20f;
    -webkit-box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.2);
    box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.2);
}

.category__item:hover .item__title {
    color: #d8a20f;
}

.item__image {
    background-color: #fff;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    width: 100%;
    padding-bottom: 73%;
    position: relative;
    transition: 0.2s;
    display: block;
}

.item__image img {
    position: absolute;
    max-height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    object-fit: cover;
}

.item__title {
    margin-top: 8px;
    transition: 0.2s;
    color: #373737;
    font-size: 16px;
    line-height: 1.3em;
    display: block;
}

.catalogue-button {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #a4a4a4;
    margin: 55px 0 95px 0;
}

@media (max-width: 576px) {
    .catalogue-button {
        margin: 45px 0 75px 0;
    }
}

.catalogue-button:hover {
    text-decoration: none;
    color: inherit;
}

.catalogue-button__text {
    text-transform: uppercase;
    width: 50%;
    box-sizing: border-box;
    padding: 20px 45px 20px 30px;
    font-size: 27px;
    color: #373737;
    transition: 0.2s;
    border-right: 1px solid #a4a4a4;
    background-image: url('../images/button-arrow.svg');
    background-repeat: no-repeat;
    background-position: right 20px center;
}

.catalogue-button:hover .catalogue-button__text {
    background-position: right 15px center;
}

@media (max-width: 576px) {
    .catalogue-button__text {
        padding: 10px 45px 10px 15px;
        font-size: 22px;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #a4a4a4;
    }
}

.catalogue-button__image {
    width: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

@media (max-width: 576px) {
    .catalogue-button__image {
        width: 100%;
        height: 50px;
    }
}

.slider-wrapper.theme-default.loading {
    min-height: 469px
}

@media (max-width: 1200px) {
    .slider-wrapper.theme-default.loading {
        min-height: 300px
    }
}

@media (max-width: 768px) {
    .slider-wrapper.theme-default.loading {
        min-height: 160px
    }
}

.page-products .toolbar .limiter {
    display: block;
    margin-left: 20px;
}

.block-minicart .block-content > .actions {
    margin-top: 15px;
    margin-bottom: 15px;
}

div.actions > div.secondary > a.action.viewcart > span {
    font-weight: bold;
    color: rgb(55, 55, 55);
    padding: 10px 20px;
}

div.actions > div.secondary > a.action.viewcart:hover > span {
    font-weight: bold;
    color: rgb(55, 55, 55);
    background-color: #efd111;
}

.cart-summary form#shipping-zip-form {
    display: none;
}

.cart-summary tr.totals-tax, .cart-summary tr.totals.sub {
    display: none;
}

.cart-summary .cart-totals {
    border-top: none;
}

form.minisearch {
    position: relative;
}

form.minisearch input {
    width: 100%;
    padding-right: 100px;
}

form.minisearch button {
    width: 100px;
    position: absolute;
    top: 4px;
    right: 4px;
    height: 32px
}

.bts-sorter-placeholder {
    width: 100%;
    margin: 20px 0;
    text-align: right;
}

.bts-sorter {
    margin: 0 0 10px 7px;
    float:none;
}

.bts-sorter .sorter-label {
    width: 100px;
    display: inline-block;
}

.bts-sorter .sorter-options {
    margin: 0 0 0 7px;
}

@media only screen and (min-width: 768px) {
    .cdz-main-menu .cdz-vertical-menu li.item {
        position: initial;
    }
}
.cdz-main-menu .groupmenu-drop {
    min-height: 100%;
    top: 0;
}
.cdz-main-menu .level1.groupmenu-drop {
    min-height: calc(100% + 2px);
    top: -1px;
}
.cdz-main-menu .level2.groupmenu-drop {
    min-height: calc(100% + 2px);
    top: -1px;
}

/* Letak */
.promo {
    max-width: 768px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    margin: 0 auto;
    font-family: "Helvetica Neue", "Verdana", "Arial", sans-serif;
}

.promo * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.promo img {
    max-width: 100%;
}

.promo-header,
.promo-banner {
    width: 100%;
}

.promo-header img {
    width: 100%;
    max-width: 100%;
}

.promo-content {
    padding: 12px 40px;
}

@media only screen and (max-width: 768px) {
    .promo-content {
        padding: 12px 0;
    }
}

.promo-item {
    margin-bottom: 12px;
}

.promo-item__title {
    background-color: #e6e7e9;
    padding: 4px 8px;
    color: #231f20;
    font-size: 18px;
    font-weight: 600;
    border-left: 2px solid #000;
    position: relative;
}

.promo-item__info {
    display: grid;
    grid-template-columns: 1fr 52px 1fr;
    padding: 12px 8px;
    grid-gap: 20px;
}

@media only screen and (max-width: 768px) {
    .promo-item__info {
        grid-template-columns: 1fr;
        padding: 12px 8px;
        grid-gap: 4px;
    }
}

.promo-item__number {
    display: grid;
    grid-template-columns: 124px 1fr;
    grid-gap: 12px;
    font-size: 22px;
}

.promo-item__text {
    font-size: 9px;
    font-weight: 300;
}

.promo-item__text span {
    color: #0154a6;
}

.promo-item__image {
    padding-left: 52px;
    display: grid;
    grid-template-columns: 1fr 72px 110px;
    align-items: end;
}

@media only screen and (max-width: 768px) {
    .promo-item__image {
        padding-left: 0;
        display: block;
    }
}

.promo-item__add-to-cart {
    cursor: pointer;
    transform: translateY(-24px);
    padding-right: 20px;
}

@media only screen and (max-width: 768px) {
    .promo-item__add-to-cart {
        transform: none;
        padding: 0;
        width: 52px;
        display: inline-block;
    }
}

.promo-item__price {
    position: relative;
    transform: translateY(-12px);
    width: 110px;
    height: 110px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 800;
}
@media only screen and (max-width: 768px) {
    .promo-item__price {
        transform: none;
        display: inline-flex;
    }
}

.promo-item__price .strike {
    background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
    position: absolute;
    top: 10px;
    margin: 0 auto;
}

.promo-item__price .price {
    font-size: 33px;
}

.promo-item__price .price span {
    font-size: 20px;
}

.promo-item.secondary .promo-item__info {
    grid-template-columns: 1fr 1fr 140px;
    align-items: end;
}

@media only screen and (max-width: 768px) {
    .promo-item.secondary .promo-item__info {
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }
}

.promo-item.secondary .promo-item__text {
    margin: 20px 0;
}

.promo-item.secondary .promo-item__right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

@media only screen and (max-width: 768px) {
    .promo-item.secondary .promo-item__right {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        grid-column: 1 / 3;
    }
    .promo-item.secondary .promo-item__right .bts-only {
        width: 160px;
        margin-right: auto;
    }
}

.promo-item.secondary .promo-item__add-to-cart {
    width: 52px;
    padding: 0;
    margin-top: 12px;
    transform: translateY(0);
}

.promo-item.secondary .promo-item__price {
    width: 140px;
    height: 140px;
    transform: translateY(0);
    margin-top: 12px;
}

.promo-item.secondary .promo-item__price .strike {
    top: 20px;
}

.small-text {
    font-weight: 200;
    font-size: 10px;
    margin-top: -8px;
}

.promo-item.double .promo-item__title {
    padding-right: 140px;
}

.promo-item.double .promo-item__title:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 130px;
    background-color: #fff;
}

.promo-item.double .promo-item__title img {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    width: 120px;
    bottom: 0;
    margin: auto;
}

.promo-item.double .promo-item__items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px 40px;
    padding: 12px 16px;
}

@media only screen and (max-width: 768px) {
    .promo-item.double .promo-item__items {
        grid-template-columns: 1fr;
        padding: 12px 8px;
    }
}

.promo-item.double .promo-item__single {
    display: grid;
    grid-template-columns: 1fr 110px;
    grid-gap: 0 20px;
}

.promo-item.double .promo-item__single-title {
    color: #231f20;
    font-size: 24px;
    font-weight: 600;
    grid-column: 1 / 3;
}

.promo-item.double .promo-item__text {
    margin-bottom: 12px;
}

.two-items .promo-item__add-to-cart,
.promo-item.double .promo-item__add-to-cart {
    width: 52px;
    padding: 0;
    transform: translateY(0);
}

.two-items .promo-item__price,
.promo-item.double .promo-item__price {
    transform: translateY(0);
    width: 110px;
    height: 110px;
}

.two-items .promo-item__single-right,
.promo-item.double .promo-item__single-right {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: end;
    transform: translateY(-20px);
}

.two-items .promo-item__single-right{
    transform: translateY(0);
    padding-top: 20px;
}

.two-items .promo-item__price .price,
.promo-item.double .promo-item__price .price {
    font-size: 28px;
}

.two-items .promo-item__price .price span,
.promo-item.double .promo-item__price .price span {
    font-size: 16px;
}

.promo .two-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

@media only screen and (max-width: 768px) {
    .promo .two-items {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 20px;
    }
}

.two-items .promo-item__info {
    display: grid;
    grid-template-columns: 1fr 1fr 110px;
    grid-gap: 0;
}

.promo-footer {
    background-color: #3e3e3f;
    padding: 20px 12px 20px 32px;
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-gap: 20px;
    color: #fff;
    font-size: 10px;
    line-height: 1.4;
}

@media only screen and (max-width: 768px) {
    .promo-footer {
        display: grid;
        grid-template-columns: 1fr;
    }
    .promo-footer img {
        max-width: 140px;
    }
}

.promo-footer span {
    color: #efcf12;
}

.promo-footer a {
    text-decoration: none;
    color: #fff;
}
.promo-footer a:hover {
    color: #efcf12;
}

.promo-item__single-right__text {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 10px;
}

.promo-item__single-right__text div {
    color: #c52026;
    font-size: 24px;
}

@media only screen and (max-width: 768px) {
    .promo-item__icon {
        width: 52px;
    }
}

.promo-table {
    margin: 20px 0;
    width: 100%;
    border: 1px solid #3e3e3f;
    border-bottom: none;
    text-align: center;
}

.promo-table td {
    border-right: 1px solid #3e3e3f;
    border-bottom: 1px solid #3e3e3f;
    padding: 2px;
}

.promo-table td:last-of-type {
    border-right: none;
}
.icon {
  height: 40px;
  width: auto;
}
.lac-notification-close-link {
	display: none;
}
.dropdown-inner{
  display: none;
}
.product.attribute.description{
  font-size: 14px;
}
.amsearch-item .product-item-link{
  font-weight: bold;
}
.amsearch-results .amsearch-item{
  text-transform: none;
}
.product.description.product-item-description{
  margin-top: 5px;
  font-size: 15px;
  font-weight: bold;
}
.amsearch-form-container.-large .amsearch-wrapper-content .price-label {
  font-weight: bold;
  font-size: 16px !important;
}
.amsearch-form-container.-large .amsearch-wrapper-content .price{
  font-size: 14px;
}

.action.edit, .action.action-edit{
  display: none !important;
}

/* END Letak */

@media print {
    .table-wrapper table {
        width: 100%;
         table-layout: auto;
    }
}

.super-attribute-select {
    position: relative;
    display: inline-block;
    width: 100%;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
}

.super-attribute-selected {
    padding: 10px;
    font-size: 16px;
    color: #333;
}

.super-attribute-dropdown-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #ccc;
    border-top: none;
    background-color: #fff;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.super-attribute-dropdown-options div {
    padding: 10px;
    font-size: 16px;
    color: #333;
    transition: background-color 0.3s ease;
    display: flex;
    alignment-baseline: center;
    align-items: center;
}

.super-attribute-dropdown-options div:hover {
    background-color: #f1f1f1;
}

.super-attribute-select.active .super-attribute-dropdown-options {
    display: block;
}

.super-attribute-select .super-attribute-dropdown-options:empty {
    pointer-events: none;
    background-color: #e0e0e0;
    color: #999;
    cursor: not-allowed;
}

.super-attribute-select:not(:has(.super-attribute-dropdown-options > *)) .super-attribute-selected {
    background-color: #e0e0e0;
    color: #999;
    cursor: not-allowed;
}
/* ==========================================================================
   BTS REVAMP — visual skin pass (live preview on b2b-copy)
   Added by design refresh — see design canvas for full target direction.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bts-ink:#0c0c0d;
  --bts-ink-2:#17181b;
  /* pass 134: THE house yellow. Same value as the Codazon theme
     options (variables/button/btn_primary_background etc.) and as the
     CSS in Content > Design > HTML Head > Scripts and Style Sheets,
     so the whole store now has exactly one yellow. */
  --bts-yellow:#efd111;
  --bts-yellow-ink:#1c1a08;
  --bts-line:#e7e5df;
  --bts-red:#c8371f;
  --bts-green:#2f9e5b;
  --bts-radius-lg:16px;
  --bts-radius-md:12px;
  --bts-radius-sm:8px;
}

body, .page-wrapper, input, select, textarea, button {
  font-family: 'Manrope', 'Poppins', Helvetica Neue, Arial, sans-serif !important;
}
h1, h2, h3, h4, .page-title, .block-title, .product-item-name, .page-header .logo {
  font-family: 'Space Grotesk', 'Poppins', Helvetica Neue, Arial, sans-serif !important;
}

/* ---- Buttons ---- */
.action.primary,
.products.list .action.tocart,
.product-item .action.tocart,
button.action.primary {
  background: var(--bts-ink) !important;
  border: none !important;
  color: var(--bts-yellow) !important;
  border-radius: var(--bts-radius-sm) !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.action.primary:hover,
.products.list .action.tocart:hover,
.product-item .action.tocart:hover {
  background: #000 !important;
  color: var(--bts-yellow) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.action.primary:focus { box-shadow: none !important; }

/* ---- Header / search ---- */
.block-search input,
.amsearch-input {
  border-radius: var(--bts-radius-sm) !important;
}
.block-search .action.search,
.amsearch-button.-loupe {
  border-radius: 0 var(--bts-radius-sm) var(--bts-radius-sm) 0 !important;
  background: var(--bts-yellow) !important;
}
.amsearch-wrapper-block, .amsearch-form-block {
  border-radius: var(--bts-radius-sm) !important;
  overflow: hidden;
}

/* ---- Category / menu ---- */
.cdz-menu .groupmenu-drop .item:hover {
  background: var(--bts-yellow) !important;
}
.cdz-main-menu .cdz-vertical-menu li.level0 > a.menu-link,
.cdz-menu.cdz-horizontal-menu > ul > li > a {
  border-radius: var(--bts-radius-sm);
}

/* ---- Product grid cards ---- */
.products.list.items.product-items .product-item-info,
.products-grid .product-item-info {
  background: #ffffff !important;
  border: 1px solid var(--bts-line) !important;
  border-radius: var(--bts-radius-lg) !important;
  padding: 14px !important;
  transition: box-shadow .2s ease, transform .2s ease;
}
.products.list.items.product-items .product-item-info:hover,
.products-grid .product-item-info:hover {
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  transform: translateY(-2px);
}
.product-item-photo {
  border-radius: var(--bts-radius-md) !important;
  overflow: hidden;
  background: linear-gradient(135deg,#eceae4,#f7f6f3);
}
.product-item-name, .product.name.product-item-name {
  font-weight: 700 !important;
}
.product-item .price-box .price-final_price .price,
.product-item .price-box .special-price .price {
  color: var(--bts-red) !important;
  font-weight: 800 !important;
  font-size: 1.25em !important;
}
.product-item .price-box .old-price .price {
  color: #9a9a9d !important;
  text-decoration: line-through;
}
.product-item .price-box {
  border-top: 1px solid var(--bts-line);
  padding-top: 10px;
  margin-top: 8px;
}

/* stock / label badges */
.product-item .cdz-product-label,
.product-item .stock.available,
.product-item .stock.unavailable {
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  letter-spacing: .3px;
}
.product-item .stock.available {
  background: #e7f6ec !important;
  color: var(--bts-green) !important;
  border: none !important;
}

/* qty stepper + add to cart row */
.product-item .box-tocart .field.qty .control {
  border-radius: var(--bts-radius-sm) !important;
  overflow: hidden;
  border: 1px solid var(--bts-line) !important;
}
.product-item .box-tocart .actions-primary {
  border-radius: var(--bts-radius-sm) !important;
}

/* trust / info tiles reused across pages */
.block-static-block .trust-row,
.homestore .trust-row {
  border-radius: var(--bts-radius-lg);
}

/* toolbar */
.toolbar-products .sorter select,
.toolbar-products .limiter select {
  border-radius: var(--bts-radius-sm) !important;
}

/* back to top + misc rounding already present, keep radius consistent */
#back-top a { border-radius: 999px !important; }

/* ---- BTS savings badge + sale label restyle ---- */
.special-price .price-label {
  display: inline-block !important;
  background: var(--bts-yellow, #efd111) !important;
  color: var(--bts-yellow-ink, #1c1a08) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: .3px;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.old-price .price-label {
  display: none !important;
}
.old-price .price {
  color: #9a9a9d !important;
  text-decoration: line-through;
  font-weight: 400 !important;
}
.bts-savings-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--bts-red, #c8371f);
  background: #fdeceb;
  padding: 3px 8px;
  border-radius: 6px;
}

/* ==========================================================================
   BTS REVAMP — pass 2: qty stepper, filter sidebar, PDP polish
   ========================================================================== */

/* ---- qty stepper (category cards + PDP) ---- */
.field.qty .control {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid var(--bts-line) !important;
  border-radius: var(--bts-radius-sm) !important;
  overflow: hidden;
}
.field.qty .control .btn-qty,
.field.qty .control a.btn-qty {
  width: 36px;
  height: 36px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: var(--bts-ink);
  text-decoration: none !important;
}
.field.qty .control .btn-qty:hover {
  background: var(--bts-line);
}
.field.qty .control input.qty {
  border: none !important;
  text-align: center;
  width: 44px !important;
  font-weight: 700;
}
#product-addtocart-button, #product-sendinquiry-button {
  border-radius: var(--bts-radius-sm) !important;
}

/* ---- filter sidebar (category page) ---- */
.sidebar.sidebar-main {
  background: #ffffff;
  border: 1px solid var(--bts-line);
  border-radius: var(--bts-radius-lg);
  padding: 18px;
}
.sidebar.sidebar-main .filter-options-item {
  border-bottom: 1px solid var(--bts-line);
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.sidebar.sidebar-main .filter-options-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.sidebar.sidebar-main .filter-options-title {
  font-family: 'Space Grotesk', 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--bts-ink);
}
.sidebar.sidebar-main .amshopby-choice {
  border-radius: 6px !important;
}

/* ---- PDP tidy-up ---- */
.product-info-price .price-box {
  background: #ffffff;
  /* BTS REVAMP - pass 140: no frame around the price. The box on the product
     page is <div class="price-box price-erp_price">, the only price box inside
     .product-info-price, and the white plate on the white page carries it
     without a line around it. Kept as "border: 0" rather than deleted so a
     theme rule on .price-box cannot put one back. */
  border: 0;
  border-radius: var(--bts-radius-lg);
  padding: 18px;
}
.product-info-main .page-title {
  font-family: 'Space Grotesk', sans-serif !important;
}
.product.data.items > .item.title > .switch,
.product.data.items > .item.title.active > .switch {
  border-radius: var(--bts-radius-sm) var(--bts-radius-sm) 0 0 !important;
}

/* ---- toolbar / pagination ---- */
.pages .item .page,
.pages .action {
  border-radius: var(--bts-radius-sm) !important;
}

/* ==========================================================================
   BTS REVAMP — pass 3: full dark header re-skin
   ========================================================================== */

/* ---- utility bar (phone / delivery info / login) ---- */
.panel.wrapper {
  background: #000 !important;
}
.panel.wrapper .panel.header,
.panel.wrapper .header.links,
.panel.wrapper .header.links a,
.panel.wrapper a,
.panel.wrapper span {
  color: #b9b9bc !important;
}
.panel.wrapper .header.links a:hover {
  color: var(--bts-yellow, #efd111) !important;
}
.panel.wrapper .switcher-trigger strong span,
.panel.wrapper .switcher-label span {
  color: #b9b9bc !important;
}

/* ---- main header row: logo / search / cart ---- */
.header.content {
  background: var(--bts-ink, #0c0c0d) !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
.header-wrapper-left .logo-left .logo {
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: var(--bts-radius-sm, 8px);
}
.header-wrapper-left .logo-left .logo img.main-logo {
  /* pass 86: logo width 300px (was 200px) */
  width: 300px !important;
  height: auto !important;
}
.header-wrapper-left .action.nav-toggle {
  color: #fff !important;
}
.header-wrapper-center .amsearch-form-block,
.header-wrapper-center .amsearch-wrapper-block {
  border-radius: var(--bts-radius-sm, 8px) !important;
  overflow: hidden;
}
.header-wrapper-center .amsearch-input {
  height: 48px !important;
}
.header-wrapper-right .minicart-wrapper .action.showcart .text,
.header-wrapper-right .minicart-wrapper .action.showcart .price-label,
.header-wrapper-right .minicart-wrapper .action.showcart {
  color: #fff !important;
}
.header-wrapper-right .minicart-wrapper .action.showcart:before {
  color: var(--bts-yellow, #efd111) !important;
}
.header-wrapper-right .minicart-wrapper .counter.qty {
  background: var(--bts-yellow, #efd111) !important;
  color: var(--bts-yellow-ink, #1c1a08) !important;
}

/* ---- categories + horizontal nav bar ---- */
.header-wrapper-bottom {
  background: var(--bts-ink-2, #17181b) !important;
}
.header-wrapper-bottom .header.content {
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.header-wrapper-bottom .menu-title {
  background: var(--bts-yellow, #efd111) !important;
  color: var(--bts-yellow-ink, #1c1a08) !important;
  font-weight: 800 !important;
  border-radius: var(--bts-radius-sm, 8px);
  padding: 12px 18px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}
.header-wrapper-bottom .cdz-menu.cdz-horizontal-menu > .groupmenu > li > a.menu-link {
  color: #fff !important;
  font-weight: 600 !important;
}
.header-wrapper-bottom .cdz-menu.cdz-horizontal-menu > .groupmenu > li > a.menu-link:hover,
.header-wrapper-bottom .cdz-menu.cdz-horizontal-menu > .groupmenu > li.active > a.menu-link {
  color: var(--bts-yellow, #efd111) !important;
}
/* pass 61: menu flyouts go from near-black to #373737.
   BTS REVAMP - pass 147: this was written for every flyout in the bottom header
   bar, which is also where the category panel hangs. It now covers only the
   promo menu (Super promocije / Promo katalogi / Katalogi ...), whose small
   dropdowns sit on the dark bar and are meant to stay dark; the category panel
   is light again. */
.header-wrapper-bottom .header-bottom-center .cdz-menu .groupmenu-drop {
  background: #373737 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.header-wrapper-bottom .header-bottom-center .cdz-menu .groupmenu-drop a,
.header-wrapper-bottom .header-bottom-center .cdz-menu .groupmenu-drop span {
  color: #d8d8da !important;
}
.header-wrapper-bottom .cdz-menu .groupmenu-drop .item:hover > a {
  color: var(--bts-yellow-ink, #1c1a08) !important;
}

/* BTS REVAMP - pass 147: the dark plate behind the category tree is gone; only
   the yellow hover below stays. */
.cdz-main-menu.left-navigation .cdz-vertical-menu > li:hover > a.menu-link {
  background: var(--bts-yellow, #efd111) !important;
  color: var(--bts-yellow-ink, #1c1a08) !important;
}

/* ==========================================================================
   BTS REVAMP — pass 4: product card + CTA button stronger restyle
   ========================================================================== */

.products-grid .product-item,
.products.list.items.product-items .product-item {
  padding: 6px !important;
}
.product-item-info {
  border: 1px solid var(--bts-line, #e7e5df) !important;
  box-shadow: none !important;
}
.product-item-info .product-image-photo,
.product-item-photo img {
  mix-blend-mode: multiply;
}

/* choose-option / send-inquiry pill buttons */
.product-item .action.choose,
.product-item a.action.tocart,
.product-item .action.towishlist,
.product-item .actions-primary a,
.product-item .actions-primary button {
  border-radius: 999px !important;
}
.product-item .action.primary,
.products-grid .action.primary {
  background: var(--bts-ink, #0c0c0d) !important;
  color: var(--bts-yellow, #efd111) !important;
  border: none !important;
}

/* sale badge (-45%, -%) restyle to brand yellow/red system */
.product-item .cdz-product-label-percent,
.product-item [class*="label"][class*="percent"],
.product-item .sale-label,
span.label.sale {
  background: var(--bts-red, #c8371f) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
}

/* brand logo strip on product card */
.product-item .product-item-brand img,
.product-item-info .brand-logo img {
  max-height: 24px;
}

/* category page header */
.category-view .category-title,
.page-title-wrapper .page-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
}

/* footer */
.page-footer {
  background: var(--bts-ink, #0c0c0d) !important;
}
.page-footer,
.page-footer a,
.page-footer .footer-title,
.page-footer span {
  color: #d8d8da !important;
}
.page-footer a:hover {
  color: var(--bts-yellow, #efd111) !important;
}
.page-footer .footer-title,
.page-footer h4 {
  color: #fff !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 13px !important;
  letter-spacing: .4px;
}

/* ==========================================================================
   BTS REVAMP — pass 5: kill legacy hover-border overlay, unify product labels
   ========================================================================== */

/* the original theme draws a colored 2px border via an absolutely
   positioned :before overlay on top of every product card — neutralize it
   completely so our own card styling (pass 1) is what's actually visible */
.product-item-info:before,
.product-item:hover .product-item-info:before,
.products-grid .product-item-info:before,
.products.list.items.product-items .product-item-info:before {
  border-color: transparent !important;
  content: none !important;
  display: none !important;
}

/* unify "new / sale / hot" product ribbon labels to the brand palette */
ul.cdz-product-labels li.label-item {
  background: var(--bts-ink, #0c0c0d) !important;
  color: var(--bts-yellow, #efd111) !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
}
ul.cdz-product-labels li.label-item.sale {
  background: var(--bts-red, #c8371f) !important;
  color: #fff !important;
}
ul.cdz-product-labels li.label-item.hot {
  background: var(--bts-yellow, #efd111) !important;
  color: var(--bts-yellow-ink, #1c1a08) !important;
}

/* re-assert our own product card border (in case cascade order shifted) */
.products-grid .product-item-info,
.products.list.items.product-items .product-item-info {
  border: 1px solid var(--bts-line, #e7e5df) !important;
  border-radius: var(--bts-radius-lg, 16px) !important;
}

/* ==========================================================================
   BTS REVAMP — pass 6: card breathing room + configurable "choose size" CTA
   ========================================================================== */

.products-grid {
  gap: 20px !important;
}
/* pass 76: the product list itself gets no gap (spacing between cards comes
   from the .product-item padding), on request */
.products.list.items.product-items {
  gap: 0px !important;
}
.products-grid .product-item,
.products.list.items.product-items .product-item {
  padding: 8px !important;
}
.product-item-info {
  padding: 18px !important;
  gap: 10px;
}
.product-image-container {
  width: 100% !important;
}
.product-item-photo {
  padding: 10px !important;
  margin-bottom: 8px !important;
}
.product-item-name,
.product.name.product-item-name {
  font-size: 15px !important;
  line-height: 1.35 !important;
  margin: 8px 0 4px !important;
}
.product-item .price-box .price-final_price .price {
  font-size: 1.4em !important;
}

/* the "choose dimension" CTA that JS injects on configurable (from-price) items */
.bts-configurable-badge {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--bts-ink, #0c0c0d) !important;
  color: var(--bts-yellow, #efd111) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: .3px;
  text-transform: uppercase;
  border-radius: 999px !important;
  height: 42px !important;
  margin-top: 10px;
  text-decoration: none !important;
  transition: background .15s ease;
}
.bts-configurable-badge:hover {
  background: #000 !important;
  color: var(--bts-yellow, #efd111) !important;
}

/* keep the compare/wishlist icon row compact under the CTA, not overlapping */
.product-item .product-item-actions {
  margin-top: 10px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 7: tidy leftover inline-styled red link in header
   ========================================================================== */
.header-phone,
.header-phone a,
.header-phone a[style] {
  color: #b9b9bc !important;
}
.header-phone a:hover {
  color: var(--bts-yellow, #efd111) !important;
}
.header-phone .fa-truck {
  color: var(--bts-yellow, #efd111) !important;
}

/* ==========================================================================
   BTS REVAMP — pass 8: structural follow-up (badges row, bigger images)
   ========================================================================== */

.bts-card-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}
.bts-card-badges > * {
  pointer-events: auto;
}
.bts-card-badges .cdz-product-wishlist {
  order: 2;
  margin-left: auto;
}
.bts-card-badges ul.cdz-product-labels {
  position: static !important;
  order: 1;
}

/* bigger, consistent product image area */
.product-item-photo {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1;
  border-radius: var(--bts-radius-md, 12px);
  background: #fdfdfc;
  overflow: hidden;
  position: relative;
}
.product-item-photo .main-image,
.product-item-photo .hover-image {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.product-item-photo .main-image img,
.product-item-photo .hover-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}
.cdz-product-top {
  position: relative;
}

/* footer rows (name-variant / spec icons) tidy separation */
.name-variant {
  /* BTS REVAMP - pass 157: 12px was hard to read on the category listing, where
     this line ("Ø mm: 3,0 - 14,0") is the one thing that tells two otherwise
     identical cards apart. The template writes style="font-size: 18px" inline,
     which this rule has been overriding all along because of the !important -
     so the size is set here. Pass 158 put it at 16px on request. */
  font-size: 16px !important;
  color: var(--bts-ink-text-lo, #6b6b6e);
  margin-top: 6px;
}
.name-variant b {
  color: var(--bts-ink, #26262a);
}
.icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--bts-line, #e7e5df);
}
.icons img.icon {
  height: 22px;
  width: auto;
  border-radius: 4px;
}

/* ==========================================================================
   BTS REVAMP — pass 9: tone down the "configurable product" yellow border
   (existing feature — kept, just aligned with the new palette/weight)
   ========================================================================== */

.products-grid .product-item.js-configurable-product .product-item-info,
.products.list.items.product-items .product-item.js-configurable-product .product-item-info,
.item.product.product-item.js-configurable-product .product-item-info {
  /* BTS REVAMP - pass 161: no frame at all on a configurable card.
     This rule - not the admin field - was the one actually drawing it: the
     middle selector counts seven classes, which beat the six of the override
     added in pass 160, so that override never took effect. Switched off here,
     at the source, instead of stacking another one on top. */
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--bts-radius-lg, 16px) !important;
}
.products-list .product-item.js-configurable-product {
  border: 1.5px solid var(--bts-yellow, #efd111) !important;
  box-shadow: none !important;
}

/* ==========================================================================
   BTS REVAMP — pass 10: homepage hero + category tiles (replaces slideshow)
   ========================================================================== */

.bts-hero-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.bts-hero {
  background: var(--bts-ink-2, #17181b);
  border-radius: 24px;
  padding: 48px;
  display: flex;
}
.bts-hero-text {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bts-hero-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--bts-yellow, #efd111);
}
.bts-hero h1 {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 38px;
  line-height: 1.15;
  color: #f5f4f1;
  font-weight: 700;
}
.bts-hero h1 span {
  color: var(--bts-yellow, #efd111);
}
.bts-hero-sub {
  font-size: 15px;
  color: #9a9a9d;
}
.bts-hero-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin-top: 4px;
}
.bts-hero-features div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f5f4f1;
  font-size: 14px;
}
.bts-hero-features div:before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bts-yellow, #efd111);
  flex-shrink: 0;
}
.bts-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bts-yellow, #efd111) !important;
  color: var(--bts-yellow-ink, #1c1a08) !important;
  font-weight: 800;
  font-size: 14px;
  height: 48px;
  padding: 0 26px;
  border-radius: 12px;
  text-decoration: none !important;
  width: fit-content;
  margin-top: 8px;
}
.bts-hero-cta:hover {
  background: #fae132 !important;
}

.bts-cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.bts-cat-tile {
  background: #ffffff;
  border: 1px solid var(--bts-line, #e7e5df);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
  transition: box-shadow .2s ease, transform .2s ease;
}
.bts-cat-tile:hover {
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
  transform: translateY(-2px);
}
.bts-cat-tile img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.bts-cat-tile span {
  font-size: 13px;
  font-weight: 700;
  color: var(--bts-ink, #0c0c0d);
  text-align: center;
}

@media (max-width: 900px) {
  .bts-hero { padding: 28px; }
  .bts-hero h1 { font-size: 26px; }
  .bts-hero-features { grid-template-columns: 1fr; }
  .bts-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .bts-cat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   BTS REVAMP — pass 12: bottom footer strip + sticky header clone darkening
   ========================================================================== */

#bottomfooter.bottom-footer-wrapper {
  background: #000 !important;
}
#bottomfooter.bottom-footer-wrapper,
#bottomfooter.bottom-footer-wrapper a,
#bottomfooter .copyright,
#bottomfooter .copyright span {
  color: #9a9a9d !important;
}

/* make sure every header wrapper layer (incl. the sticky clone) is dark,
   with no visible white seam between them */
.header-wrapper-content,
.header-wrapper-content.sticky-menu,
.header-wrapper-top {
  background: var(--bts-ink, #0c0c0d) !important;
}
.panel.wrapper,
.header.content,
.header-wrapper-bottom {
  border: none !important;
}

/* ==========================================================================
   BTS REVAMP — pass 13: replace pure black with #373737 across our changes
   ========================================================================== */

:root {
  --bts-ink: #373737;
}

.action.primary:hover,
.products.list .action.tocart:hover,
.product-item .action.tocart:hover {
  background: #373737 !important;
}
.panel.wrapper {
  background: #373737 !important;
}
.bts-configurable-badge:hover {
  background: #373737 !important;
}
#bottomfooter.bottom-footer-wrapper {
  background: #373737 !important;
}
.header-wrapper-left .logo-left .logo {
  background: #373737 !important;
}

/* ==========================================================================
   BTS REVAMP — pass 14: header-wrapper-bottom to #373737 too
   ========================================================================== */
.header-wrapper-bottom {
  background: #373737 !important;
}

/* ==========================================================================
   BTS REVAMP — pass 15: top nav items styled as standalone buttons
   ========================================================================== */

.header-wrapper-bottom .cdz-menu.cdz-horizontal-menu > .groupmenu {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.header-wrapper-bottom .cdz-menu.cdz-horizontal-menu > .groupmenu > li.item.level0 {
  position: relative;
}
.header-wrapper-bottom .cdz-menu.cdz-horizontal-menu > .groupmenu > li.level0 > a.menu-link {
  display: inline-flex !important;
  align-items: center;
  background: #4a4a4a !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  transition: background .15s ease, color .15s ease;
}
.header-wrapper-bottom .cdz-menu.cdz-horizontal-menu > .groupmenu > li.level0 > a.menu-link:hover {
  background: var(--bts-yellow, #efd111) !important;
  color: var(--bts-yellow-ink, #1c1a08) !important;
}
.header-wrapper-bottom .cdz-menu.cdz-horizontal-menu > .groupmenu > li.level0.parent > a.menu-link:after {
  content: '';
  margin-left: 8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
}

/* "NOVO" badge on top of a button — keep it as a corner accent, not overlapping text */
.header-wrapper-bottom .novo-znacka {
  position: absolute;
  top: -9px;
  right: -6px;
  background: var(--bts-red, #c8371f);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: .3px;
  z-index: 2;
  pointer-events: none;
}

/* the animated "glow" label already exists — keep the glow, ensure it stays legible on the new button bg */
.header-wrapper-bottom .blink-glow {
  color: inherit;
}

/* FORMAT KATALOG already has its own accent color — give it a matching button too */
.header-wrapper-bottom .format-katalog {
  color: inherit !important;
}

/* ==========================================================================
   BTS REVAMP — pass 16: nav buttons match "Vse kategorije" size + clean search
   ========================================================================== */

/* nav buttons — same padding/weight as the "Vse kategorije" trigger */
.header-wrapper-bottom .cdz-menu.cdz-horizontal-menu > .groupmenu > li.level0 > a.menu-link {
  padding: 12px 20px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  border-radius: 8px !important;
}
.header-wrapper-bottom .cdz-menu.cdz-horizontal-menu > .groupmenu {
  gap: 10px;
}

/* ---- clean up the search bar: remove the legacy double-box (yellow outer
   frame + white inner box) and make it one clean rounded pill ---- */
.search-wrapper {
  border: none !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
}
.header-wrapper-center .amsearch-wrapper-block,
.header-wrapper-center .amsearch-form-block {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: none !important;
}
.header-wrapper-center .amsearch-input-wrapper {
  border-radius: 12px !important;
}
.header-wrapper-center .amsearch-input {
  height: 50px !important;
  padding: 0 18px !important;
  font-size: 15px !important;
  border: none !important;
  background: transparent !important;
}
.header-wrapper-center .amsearch-button.-loupe {
  width: 56px !important;
  height: 50px !important;
  border-radius: 0 12px 12px 0 !important;
  background: var(--bts-yellow, #efd111) !important;
}
.header-wrapper-center .amsearch-button.-loupe:before {
  color: var(--bts-yellow-ink, #1c1a08) !important;
}

/* ==========================================================================
   BTS REVAMP — pass 17: taller nav buttons + search input starts from left
   ========================================================================== */

.header-wrapper-bottom .cdz-menu.cdz-horizontal-menu > .groupmenu > li.level0 > a.menu-link {
  padding: 21px 20px !important;
}

/* the Amasty search input keeps a small JS-calculated inline width, leaving
   it stranded inside our wider white pill — force it to fill the pill so
   typed/placeholder text starts at the left edge, not floating on the right */
.header-wrapper-center .amsearch-input-wrapper {
  width: 100% !important;
  display: flex !important;
}
.header-wrapper-center .amsearch-input {
  width: 100% !important;
  flex: 1 1 auto !important;
  text-align: left !important;
  direction: ltr !important;
}

/* ==========================================================================
   BTS REVAMP — pass 18: undo risky flex/width override on Amasty search
   (it broke the live-results overlay positioning, hiding typed text)
   ========================================================================== */

.header-wrapper-center .amsearch-input-wrapper {
  width: auto !important;
  display: block !important;
}
.header-wrapper-center .amsearch-input {
  width: 100% !important;
  flex: none !important;
}

/* ==========================================================================
   BTS REVAMP — pass 19: definitive search bar fix (both idle and -typed state)
   ========================================================================== */

.header-wrapper-center .amsearch-form-block {
  justify-content: flex-start !important;
}
.header-wrapper-center .amsearch-input-wrapper {
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  width: auto !important;
  max-width: 100% !important;
}

/* same padding whether idle or actively typing (-typed), so nothing jumps */
.header-wrapper-center .amsearch-input,
.header-wrapper-center .amsearch-input-wrapper.-typed .amsearch-input {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 50px !important;
  padding: 0 70px 0 18px !important;
  border: none !important;
  background: transparent !important;
  font-size: 15px !important;
  text-align: left !important;
}

/* the loupe button always stays put on the right, in both states */
.header-wrapper-center .amsearch-button.-loupe,
.header-wrapper-center .amsearch-input-wrapper.-typed .amsearch-button.-loupe {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  width: 56px !important;
  height: 50px !important;
  border-radius: 0 12px 12px 0 !important;
  background: var(--bts-yellow, #efd111) !important;
}
.header-wrapper-center .amsearch-button.-loupe:before {
  color: var(--bts-yellow-ink, #1c1a08) !important;
}

/* the little clear (x) button, when present, sits just left of the loupe */
.header-wrapper-center .amsearch-button.-close {
  right: 64px !important;
  left: auto !important;
}

/* ==========================================================================
   BTS REVAMP — pass 20: neutralize JS-driven inline width on focus/typing
   ========================================================================== */
.header-wrapper-center .amsearch-form-block {
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important;
  transform: none !important;
}
.header-wrapper-center.-opened,
.header-wrapper-center .amsearch-wrapper-block {
  width: 100% !important;
  position: relative !important;
  left: auto !important;
}

/* ==========================================================================
   BTS REVAMP — pass 21: re-enable the live search results dropdown
   (an earlier pass set overflow:hidden on the search pill, clipping it)
   ========================================================================== */
.header-wrapper-center .amsearch-form-block,
.header-wrapper-center .amsearch-wrapper-block {
  overflow: visible !important;
}
.header-wrapper-center .amsearch-result-section {
  z-index: 999 !important;
}

/* ==========================================================================
   BTS REVAMP — pass 22: dark theme + wider layout for search results dropdown
   ========================================================================== */

.header-wrapper-center .amsearch-result-section {
  width: 1100px !important;
  max-width: 92vw !important;
  left: 0 !important;
  right: auto !important;
}

.amsearch-result-block,
.amsearch-wrapper-inner,
.amsearch-items-section,
.amsearch-category-tab,
.amsearch-products-section,
.amsearch-products-list {
  background: var(--bts-ink-2, #17181b) !important;
}
.amsearch-result-section {
  background: var(--bts-ink-2, #17181b) !important;
  border-radius: var(--bts-radius-lg, 16px) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

.amsearch-title,
.amsearch-block-header,
.amsearch-count,
.amsearch-description,
.amsearch-text {
  color: #e8e8ea !important;
}
.amsearch-link {
  color: #e8e8ea !important;
}
.amsearch-link:hover {
  color: var(--bts-yellow, #efd111) !important;
}
.amsearch-category-tab .amsearch-item .am-item-link {
  color: #d8d8da !important;
}
.amsearch-category-tab .amsearch-item .am-item-link:hover {
  color: var(--bts-yellow, #efd111) !important;
}

/* the little "related terms" pills */
.amsearch-related-terms > .amsearch-item {
  background: #2a2b2f !important;
  color: #e8e8ea !important;
}
.amsearch-related-terms > .amsearch-item:hover {
  background: var(--bts-yellow, #efd111) !important;
  color: var(--bts-yellow-ink, #1c1a08) !important;
}
.amsearch-related-terms .amsearch-count {
  color: #9a9a9d !important;
}

/* product cards inside the dropdown — give them room to breathe (3 per row
   instead of 4-5) and swap the light hover tint for the dark theme */
.amsearch-products-section.-grid:not(.-slider) .amsearch-item {
  max-width: 33.333% !important;
}
.amsearch-products-section .amsearch-item:hover {
  background: var(--bts-ink, #373737) !important;
}
.amsearch-products-section .product-item-description {
  color: #9a9a9d !important;
}
.amsearch-products-section .product-item-info,
.amsearch-item.product-item .product-item-info {
  background: #ffffff !important;
}

/* borders between columns/sections should read on dark, not disappear */
.amsearch-products-section:not(:first-child) {
  border-color: rgba(255,255,255,.12) !important;
}
.amsearch-products-section {
  border-top-color: rgba(255,255,255,.12) !important;
}

/* ==========================================================================
   BTS REVAMP — pass 23: shorter cards, no black price box, softer hover
   ========================================================================== */

/* the global 1:1 aspect-ratio photo box (meant for the category grid) makes
   these narrower search-result cards very tall — give this context a much
   shorter, fixed-height image area instead */
.amsearch-item .product-item-photo {
  aspect-ratio: auto !important;
  height: 110px !important;
  margin-bottom: 6px !important;
}
.amsearch-item .product-item-photo .main-image,
.amsearch-item .product-item-photo .hover-image {
  padding: 6px !important;
}
.amsearch-item .product-item-info {
  padding: 10px !important;
  gap: 4px;
}
.amsearch-item .product-item-name {
  font-size: 12.5px !important;
  margin: 4px 0 !important;
}

/* remove the black background band sitting behind the price */
.amsearch-item [data-role="priceBox"],
.amsearch-item .price-box,
.amsearch-item .price-final_price {
  background: transparent !important;
  border: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;
}

/* softer, lower-contrast hover on the result cell */
.amsearch-products-section .amsearch-item:hover {
  background: #232427 !important;
}

/* ==========================================================================
   BTS REVAMP — pass 24: fix the oversized/offset configurable badge in search
   (existing code scales it 1.3x and offsets it — combined with our badge
   styling that produced the big black band over the price)
   ========================================================================== */

.amsearch-item.product-item .bts-configurable-badge {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin-top: 6px !important;
  width: 100%;
}

.amsearch-item.product-item img {
  max-height: 90px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 25: paint the whole search-result card white (defensive)
   ========================================================================== */
.amsearch-item.product-item {
  background: #ffffff !important;
}

/* ==========================================================================
   BTS REVAMP — pass 26: real fix using the actual rendered markup
   ========================================================================== */

/* undo our own mistake: this wrapper sits directly around the price box —
   it should stay transparent (white card shows through), not dark */
.amsearch-item .amsearch-wrapper-inner {
  background: transparent !important;
}

/* each product ships its own inline <style> forcing a 100% padding-bottom
   (square) image box at ~320px — override the stable wrapper classes with
   higher specificity + !important to force a short, fixed-height image */
.amsearch-item .amsearch-product-image-container {
  width: 100% !important;
}
.amsearch-item .amsearch-product-image-container span.product-image-wrapper,
.amsearch-item span.product-image-wrapper {
  padding-bottom: 0 !important;
  height: 90px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.amsearch-item .product-image-photo {
  position: static !important;
  max-height: 90px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* softer hover, applied to the real card element */
.amsearch-item.product-item:hover {
  background: #f5f4f1 !important;
}

/* ==========================================================================
   BTS REVAMP — pass 27: pin "Izberi dimenzijo" to the bottom of the card
   ========================================================================== */
.amsearch-item.product-item {
  display: flex !important;
  flex-direction: column !important;
}
.amsearch-item.product-item .bts-configurable-badge {
  margin-top: auto !important;
}

/* ==========================================================================
   BTS REVAMP — pass 28: product name/spec text readable on the white card
   ========================================================================== */
.amsearch-item.product-item .amsearch-link,
.amsearch-item.product-item .product-item-description,
.amsearch-item.product-item .amsearch-description {
  color: #17181a !important;
}
.amsearch-item.product-item .amsearch-link:hover {
  color: var(--bts-red, #c8371f) !important;
}

/* ==========================================================================
   BTS REVAMP — pass 29: cap "Vse kategorije" button width (sticky header
   was letting it grow and wrap the nav buttons onto a second row)
   ========================================================================== */
.header-wrapper-bottom .menu-title {
  width: 200px !important;
  max-width: 200px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* ==========================================================================
   BTS REVAMP — pass 30: the sticky header has its own min-width:280px rule
   on this button, which always beats max-width in CSS — override min-width
   directly, matching the same selector.
   ========================================================================== */
.header-wrapper-content.sticky-menu.active .left-navigation .navigation .menu-title,
.header-wrapper-bottom .menu-title {
  min-width: 0 !important;
  width: 200px !important;
  max-width: 200px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 31: shift the search bar ~500px to the right
   ========================================================================== */
.header-wrapper-center {
  margin-left: 500px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 32: keep the logo visible in the sticky/scrolled header
   (the theme's own rule sets display:none on it when sticky)
   ========================================================================== */
.header-wrapper-content.sticky-menu.active .logo {
  display: inline-flex !important;
  position: absolute !important;
  left: 10px !important;
  top: 7px !important;
  width: auto !important;
  height: 40px !important;
  align-items: center;
  padding: 6px 10px !important;
}
.header-wrapper-content.sticky-menu.active .logo img.main-logo {
  width: auto !important;
  height: 28px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 33: sticky logo should match the normal header size
   ========================================================================== */
.header-wrapper-content.sticky-menu.active .logo {
  height: auto !important;
  padding: 8px 14px !important;
}
.header-wrapper-content.sticky-menu.active .logo img.main-logo,
.header-wrapper-content.sticky-menu.active .logo img.small-logo {
  /* pass 86: the scrolled ("active") header keeps the same 300px logo.
     This also has to beat the earlier pass-32 rule above, which forces
     height:28px in the sticky state - hence height:auto here. */
  width: 300px !important;
  height: auto !important;
  max-height: none !important;
}

/* ==========================================================================
   BTS REVAMP — pass 34: search shift only applies in the sticky/scrolled state
   ========================================================================== */
.header-wrapper-center {
  margin-left: 0 !important;
}
.header-wrapper-content.sticky-menu.active .header-wrapper-center {
  margin-left: 500px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 35: keep phone/website info visible in sticky header too
   (theme rule sets display:none on .header-phone when sticky is active)
   ========================================================================== */
.header-wrapper-content.sticky-menu.active .block-static-block.widget .header-phone,
.header-wrapper-content.sticky-menu.active .block-static-block.widget .header-help {
  display: block !important;
}

/* ==========================================================================
   BTS REVAMP — pass 36: shift phone/website info block 60px right
   ========================================================================== */
.header-phone {
  margin-left: 60px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 37: apply the 60px shift explicitly in sticky state too
   ========================================================================== */
.header-wrapper-content.sticky-menu.active .header-phone {
  margin-left: 60px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 38: explicit .active + .pull-left targeting
   ========================================================================== */
.header-wrapper-content.sticky-menu.active .header-phone.pull-left {
  margin-left: 60px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 39: center the phone/website line under the search bar
   ========================================================================== */
.header-wrapper-center-content {
  text-align: center !important;
}
.header-phone.pull-left,
.header-phone {
  float: none !important;
  display: inline-block !important;
}

/* ==========================================================================
   BTS REVAMP — pass 40: fine-align phone/website text under search bar center
   ========================================================================== */
.header-wrapper-center-content {
  position: relative !important;
  left: -33px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 41: align phone/website text under search in sticky too
   (search bar shifts +500px in sticky state, so this needs the same shift
   applied on top of the normal-state -33px alignment)
   ========================================================================== */
.header-wrapper-content.sticky-menu.active .header-wrapper-center-content {
  left: 467px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 42: corrected sticky-state alignment (measured from screenshot)
   ========================================================================== */
.header-wrapper-content.sticky-menu.active .header-wrapper-center-content {
  left: 27px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 43: fine-tune sticky alignment (still ~62px too far right)
   ========================================================================== */
.header-wrapper-content.sticky-menu.active .header-wrapper-center-content {
  left: -35px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 52: shift the nav panel (#store.menu) down 9px.
   Runtime DOM (supplied by the user) shows this menu lives in
   .nav-sections-item-content#store.menu with the wrapper carrying
   "cdz-main-menu cdz-fix-left" — earlier attempts scoped to
   .header-wrapper-bottom / plain .cdz-main-menu never matched it.
   Targeted by ID (dot escaped) and kept to margin only, so no stacking or
   dropdown-positioning side effects.
   ========================================================================== */
#store\.menu.nav-sections-item-content {
  margin-top: 9px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 54: keep the "Vse kategorije" button identical in the
   sticky/scrolled state. The theme has its own higher-specificity rule
   (.sticky-menu.active .left-navigation .navigation .menu-title with
   padding:11px 20px; min-height:44px; min-width:280px), so the normal-state
   styling is re-asserted here for .active as well.
   ========================================================================== */
.header-wrapper-content.sticky-menu.active .header-wrapper-bottom .menu-title,
.header-wrapper-content.sticky-menu.active .left-navigation .navigation .menu-title {
  background: var(--bts-yellow, #efd111) !important;
  color: var(--bts-yellow-ink, #1c1a08) !important;
  font-weight: 800 !important;
  border-radius: var(--bts-radius-sm, 8px) !important;
  padding: 19px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 10px 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 200px !important;
  max-width: 200px !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   BTS REVAMP — pass 56: the always-visible category column on the homepage
   (.slideshow-wrapper > .row > .col-sm-6 > .cdz-main-menu.left-navigation.hidden-xs)
   is hidden. Categories are reachable only by clicking "VSE KATEGORIJE" in the
   header, which opens the header's own panel (#lefmenu-mobile).
   Scoped to .slideshow-wrapper on purpose: the header nav and the mobile
   off-canvas drawer (.nav-sections) are NOT touched.
   ========================================================================== */
.slideshow-wrapper .cdz-main-menu.left-navigation.hidden-xs {
  display: none !important;
}

/* bts-savings.js (pass 56) tags the emptied grid column and its row, so the
   column collapse and the slideshow widening always happen together. */
.row.bts-cats-collapsed > .bts-cat-col-hidden {
  display: none !important;
}
.row.bts-cats-collapsed > .col-sm-18 {
  /* pass 57: back to 75% (= the original col-sm-18 width) instead of full width */
  width: 75% !important;
  max-width: 75% !important;
  flex: 0 0 75% !important;
}

/* ==========================================================================
   BTS REVAMP — pass 58: "Priljubljene kategorije" shortcut row, rendered from
   the home CMS page content directly above the Amasty brand slider.
   ========================================================================== */
.bts-cat-shortcuts {
  margin: 6px 0 26px;
}
.bts-cat-shortcuts-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.bts-cat-shortcuts-title {
  position: relative;
  padding-left: 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bts-ink, #373737);
}
.bts-cat-shortcuts-title:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--bts-yellow, #efd111);
}
.bts-cat-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.bts-cat-shortcut {
  display: flex !important;
  align-items: center;
  gap: 14px;
  min-height: 110px;
  padding: 14px 16px;
  background: #26262a;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--bts-radius-lg, 16px);
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.bts-cat-shortcut:hover,
.bts-cat-shortcut:focus {
  background: #303036;
  border-color: var(--bts-yellow, #efd111);
  transform: translateY(-2px);
  text-decoration: none !important;
}
.bts-cat-shortcut-img {
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
}
.bts-cat-shortcut-img img {
  max-width: 68px;
  max-height: 68px;
  width: auto;
  height: auto;
  display: block;
}
.bts-cat-shortcut-body {
  flex: 1 1 auto;
  min-width: 0;
}
.bts-cat-shortcut-name {
  display: block;
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.bts-cat-shortcut-meta {
  display: block;
  margin-top: 4px;
  color: #9a9aa2;
  font-size: 12.5px;
  line-height: 1.2;
}
.bts-cat-shortcut-arrow {
  flex: 0 0 auto;
  color: #8d8d95;
  font-size: 22px;
  line-height: 1;
  transition: color .18s ease, transform .18s ease;
}
.bts-cat-shortcut:hover .bts-cat-shortcut-arrow {
  color: var(--bts-yellow, #efd111);
  transform: translateX(3px);
}

@media (max-width: 1199px) {
  .bts-cat-shortcuts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .bts-cat-shortcuts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .bts-cat-shortcuts-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BTS REVAMP — pass 60: first level of the "VSE KATEGORIJE" panel goes dark
   (#373737), so it matches the already-dark second level.
   Scoped to #lefmenu-mobile = the header panel only; the mobile off-canvas
   drawer (.nav-sections) and the horizontal nav are untouched.
   ========================================================================== */
/* BTS REVAMP - pass 147: the dark panel is switched off again on request -
   it is left here, commented out, because it is the whole of pass 60 and the
   only thing that made the categories black. The rows are painted by the theme
   again, together with the "color: #373737" this file already sets for them.
   The yellow hover below is kept: it is the highlight, not the background.

#lefmenu-mobile,
#lefmenu-mobile > .cdz-menu,
#lefmenu-mobile > .cdz-menu > ul.groupmenu,
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0,
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link {
  background: #373737 !important;
}
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 {
  border-color: rgba(255, 255, 255, .10) !important;
}
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link,
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link:visited,
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link span {
  color: #ffffff !important;
}
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0.parent > a.menu-link:after,
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0.parent > a.menu-link:before {
  color: #ffffff !important;
  border-color: #ffffff !important;
}
*/
/* the thumbnail cell still must not carry a plate of its own */
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link .menu-icon {
  background: transparent !important;
}
/* keep the existing yellow highlight on hover / open branch, with dark text */
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0:hover > a.menu-link,
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0.cdz-hold-open > a.menu-link,
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0.active > a.menu-link {
  background: var(--bts-yellow, #efd111) !important;
}
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0:hover > a.menu-link,
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0:hover > a.menu-link span,
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0.cdz-hold-open > a.menu-link,
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0.cdz-hold-open > a.menu-link span,
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0.active > a.menu-link,
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0.active > a.menu-link span {
  color: var(--bts-yellow-ink, #1c1a08) !important;
}

/* ==========================================================================
   BTS REVAMP — pass 63: product card brought in line with the approved design
   reference (primer_izgleda_artikla.png). Works together with the list.phtml
   restructure of the same pass.
   ========================================================================== */

/* --- brand line ------------------------------------------------------- */
.product-item .bts-card-brand {
  margin: 2px 0 3px;
  color: #2f6fd0;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --- SKU on its own line, name below it ------------------------------- */
.product-item .product-item-name .product-item-link {
  white-space: normal !important;
}
.product-item .product-item-name .product-item-no {
  display: block !important;
  margin: 0 0 4px !important;
  color: #1b1b1d !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
.product-item .bts-card-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #5f6368 !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

/* --- stock pill over the image ---------------------------------------- */
.product-item .bts-card-badges .cdz-product-wishlist {
  order: 1 !important;
  margin-left: 0 !important;
}
.product-item .bts-card-badges ul.cdz-product-labels {
  order: 2 !important;
  margin-left: 8px;
}
/* pass 79: the stock pill was removed on request - stock is already shown in
   the qty line further down the card. */

/* --- price block ------------------------------------------------------- */
.product-item .price-box .special-price .price,
.product-item .price-box .price-final_price .price {
  font-size: 22px !important;
  line-height: 1.15 !important;
}
.product-item .price-box .old-price .price {
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* --- savings badge (server-side) + excl. tax note --------------------- */
.product-item .bts-card-saving {
  display: inline-block;
  margin: 6px 0 0;
  padding: 4px 9px;
  border: 1px solid #f6d2cc;
  border-radius: 8px;
  background: #fdecec;
  color: var(--bts-red, #c8371f);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.product-item .bts-card-vat {
  margin: 5px 0 6px;
  color: #9a9a9d;
  font-size: 11px;
  line-height: 1.2;
}

/* --- add to cart: yellow, like the reference -------------------------- */
.product-item .cdz-product-bottom .action.tocart.primary,
.product-item .cdz-buttons-inner button.action.tocart.primary {
  background: var(--bts-yellow, #efd111) !important;
  color: #1c1a08 !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.product-item .cdz-product-bottom .action.tocart.primary:hover,
.product-item .cdz-buttons-inner button.action.tocart.primary:hover {
  background: #e2b115 !important;
  color: #1c1a08 !important;
}

/* --- bottom action row ------------------------------------------------ */
.product-item .bts-card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--bts-line, #e7e5df);
}
.product-item .bts-card-action {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 2px 4px;
  border-left: 1px solid var(--bts-line, #e7e5df);
  color: #5f6368 !important;
  text-align: center;
  text-decoration: none !important;
}
.product-item .bts-card-action:first-child {
  border-left: none;
}
.product-item .bts-card-action:hover {
  color: #1b1b1d !important;
  text-decoration: none !important;
}
.product-item .bts-card-action-ico {
  display: inline-flex;
  color: #8a8a8f;
}
.product-item .bts-card-action:hover .bts-card-action-ico {
  color: var(--bts-ink, #373737);
}
.product-item .bts-card-action-label {
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --- attribute / brand icon strip ------------------------------------- */
.product-item .icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}
.product-item .icons img.icon {
  max-height: 22px;
  width: auto;
}

/* ==========================================================================
   BTS REVAMP — pass 64: the page carries an inline rule that pins the mobile
   card to a fixed 642px height. With the pass-63 additions (brand, savings,
   excl-tax note, action row) that would clip content, so the height becomes a
   minimum instead of a hard cap.
   ========================================================================== */
@media (max-width: 767px) {
  .products-grid .product-item-info,
  .products.list.items.product-items .product-item-info {
    height: auto !important;
    min-height: 642px;
  }
}

/* ==========================================================================
   BTS REVAMP — pass 65: one single price block (price + discount + savings).

   The page carries an inline rule set that turns .product-item-details into a
   flex column and pins .price-box to "order: 2", while the new elements
   defaulted to order 0 - that is why the price ended up below the action row.
   The price box now sits inside .bts-price-group, so that inline order rule no
   longer moves it, and the whole group is ordered explicitly.
   ========================================================================== */
.product-item .product-item-details .bts-price-group {
  order: 2 !important;
  margin: 8px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--bts-line, #e7e5df);
}
.product-item .product-item-details .cdz-product-bottom {
  order: 4 !important;
}
.product-item .product-item-details .bts-card-actions {
  order: 5 !important;
}

/* the price box itself no longer needs its own separator (the group has one) */
.product-item .bts-price-group .price-box {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* our own "Akcijska cena" flag - the theme's .price-label renders as an empty
   yellow stub here, so it is hidden and replaced by this one */
.product-item .bts-price-group .price-box .price-label {
  display: none !important;
}
.product-item .bts-price-flag {
  display: inline-block;
  margin: 0 0 6px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--bts-yellow, #efd111);
  color: var(--bts-yellow-ink, #1c1a08);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* keep price and struck-through price on one line, savings right underneath */
.product-item .bts-price-group .price-box {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.product-item .bts-price-group .price-box .special-price,
.product-item .bts-price-group .price-box .old-price {
  margin: 0 !important;
}
/* the page's own .old-price::after draws a red bar; drop the extra
   line-through we used to add so the old price is struck only once */
.product-item .bts-price-group .old-price .price {
  text-decoration: none !important;
}
.product-item .bts-card-saving {
  margin: 8px 0 0 !important;
}
.product-item .bts-card-vat {
  margin: 6px 0 0 !important;
}

/* ==========================================================================
   BTS REVAMP — pass 68 (replaces the pass-66 full switch-off): the icon strip
   is back, but only the brand icon is shown. The template still renders all of
   them (icon_brands / icon_material / icon_type / icon_coating), so bringing
   another one back is a matter of adding it to the last selector.
   ========================================================================== */
/* the whole .icons strip stays off - the brand logo is now rendered in the
   badge row at the top of the card (see list.phtml, pass 70) */
.product-item .product-item-details .icons {
  display: none !important;
}

/* ==========================================================================
   BTS REVAMP — pass 70: brand logo top-left, as a normal flex child of the
   badge row. Absolute positioning was unreliable here: .product-item-details
   is itself positioned by the theme, so "top: 10px" resolved against the
   details column (bottom half of the card) instead of the card itself.
   Size is capped with max-width / max-height only, so the aspect ratio of the
   (mostly 600x600) logo files is preserved automatically.
   ========================================================================== */
.product-item .bts-card-badges .bts-brand-badge {
  order: 0;
  margin-right: auto;
  max-width: 130px !important;
  max-height: 60px !important;
  width: auto !important;
  height: auto !important;
  display: block;
}

/* ==========================================================================
   BTS REVAMP — pass 67: square corners on the wishlist action inside product
   cards (overrides the pass-4 pill rule that set border-radius: 999px).
   ========================================================================== */
.product-item .action.towishlist {
  border-radius: 0px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 71: swap the qty/add-to-cart block and the action row.

   This could not be done with "order" alone: the theme positions
   .cdz-product-bottom absolutely (:not(.non-hover)) and the page then places
   it by hand with margin-top:350px, while .product-item-details is pinned to
   height:331px. The cart block was therefore outside the flow, below the
   details box, and the action row (in flow) always ended up above it.
   The cart block is put back into the normal flow and the fixed height becomes
   a minimum, so both blocks are ordinary flex children and can be ordered.
   ========================================================================== */
.products-grid .product-item .product-item-info .product-item-details {
  height: auto !important;
  min-height: 331px;
}
.product-item .product-item-details .cdz-product-bottom {
  position: static !important;
  top: auto !important;
  left: auto !important;
  margin-top: 10px !important;
  order: 4 !important;
}
.product-item .product-item-details .bts-card-actions {
  order: 5 !important;
  margin-top: 12px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 72: equal card heights per row.

   The theme lays the grid out with floats (.products-grid .product-item
   {display:inline-block; float:left}) and the "same-height" class is only
   flex under .product-style22, which this theme does not use - so a card with
   a savings badge / qty stepper ended up taller than its neighbours.
   The list becomes a flex row with align-items:stretch, and the details column
   grows, so every card in a row is exactly as tall as the tallest one.
   Widths still come from the theme's desktop_/tablet_/mobile_ column classes.
   ========================================================================== */
.products-grid .products.list.items.product-items {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}
.products-grid .products.list.items.product-items > .product-item {
  float: none !important;
  display: flex !important;
  flex: 0 0 auto;
}
.products-grid .products.list.items.product-items > .product-item > .product-item-info {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
}
.products-grid .products.list.items.product-items > .product-item .product-item-details {
  flex: 1 1 auto !important;
}

/* ==========================================================================
   BTS REVAMP — pass 73: bottom blocks aligned across a row.

   .cdz-product-bottom (qty + add to cart) is pushed to the bottom of the flex
   column, and the action row follows it, so both line up in every card.

   Configurable products are a special case: the page's own script detects them
   by the "Že od" price label, adds .js-configurable-product to the <li> and
   injects <a class="bts-configurable-badge">Izberi dimenzijo</a> into
   .product-item-info, absolutely positioned at bottom:15px. Those cards get
   bottom padding so the action row does not slide underneath that button.
   ========================================================================== */
.products-grid .product-item .product-item-details .cdz-product-bottom {
  margin-top: auto !important;
}
.products-grid .product-item.js-configurable-product .product-item-details {
  padding-bottom: 72px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 74: centre the injected "Izberi dimenzijo" button.

   The page styles it with "margin-left:50%; transform:translateX(-50%)" but
   without a left/right offset, so it relies on its static position. Since
   pass 72 turned .product-item-info into a flex container, the static position
   of an absolutely positioned child is the content-box start corner, which
   shifted the button off centre. Anchoring it with left:50% makes the centring
   independent of the layout mode.
   ========================================================================== */
.products-grid .product-item .product-item-info .bts-configurable-badge {
  left: 50% !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
}

/* ==========================================================================
   BTS REVAMP — pass 75: fix for 3 instead of 4 cards per row (regression from
   pass 72).

   Flex items default to min-width:auto, so they cannot become narrower than
   their content's min-content width. The action row labels ("DODAJ NA SEZNAM
   ŽELJA") pushed each card past the 25% that .desktop_4 assigns, so the fourth
   card wrapped. Floats did not have that behaviour, which is why it only
   appeared after the flex change. min-width:0 restores strict 25% widths.
   ========================================================================== */
.products-grid .products.list.items.product-items > .product-item {
  min-width: 0 !important;
}
.products-grid .products.list.items.product-items > .product-item > .product-item-info,
.products-grid .products.list.items.product-items > .product-item .product-item-details {
  min-width: 0 !important;
}

/* ==========================================================================
   BTS REVAMP — pass 77: the wishlist star in the top badge row is dropped -
   the same action is now available as "Dodaj na seznam želja" in the action
   row at the bottom of the card. The top row keeps the brand logo (left) and
   the stock pill (right).
   The markup stays in list.phtml, so this is one line to undo.
   ========================================================================== */
.product-item .bts-card-badges .cdz-product-wishlist {
  display: none !important;
}

/* ==========================================================================
   BTS REVAMP — pass 80: configurable / grouped / bundle products keep their
   "Že od" label, which pass 65 had hidden together with the "Akcijska cena"
   one. Without it the cheapest variant price looked like a fixed price.
   ========================================================================== */
.product-item .bts-price-group.is-range .price-box .price-label {
  display: inline-block !important;
  margin: 0 8px 0 0 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: #ececef !important;
  color: #4a4a4f !important;
  /* pass 81: bigger text and lifted, so the flag reads as inline with the
     22px price instead of hanging on its baseline */
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
  position: relative !important;
  top: -3px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 82: the stock line gets the pill look that the removed
   badge (pass 63/79) had. The text inside .product-item-inner is a bare text
   node, so the wrapper itself becomes the pill and .green_dot / .orange_dot /
   .red_dot become the leading dot.
   The pill is applied only when one of those dots is present, so the empty
   .product-item-inner that guests get (no stock permission) stays invisible.
   ========================================================================== */
.product-item .product-item-details .product-item-inner:has(.green_dot),
.product-item .product-item-details .product-item-inner:has(.orange_dot),
.product-item .product-item-details .product-item-inner:has(.red_dot) {
  display: inline-flex !important;
  align-items: center;
  /* pass 83: centred in the card instead of left aligned */
  align-self: center;
  gap: 6px;
  width: auto !important;
  margin: 6px auto 0 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: #e7f6ec;
  color: #1f7a44;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.product-item .product-item-details .product-item-inner:has(.orange_dot) {
  background: #fff4e0;
  color: #8a5a00;
}
.product-item .product-item-details .product-item-inner:has(.red_dot) {
  background: #fdecec;
  color: var(--bts-red, #c8371f);
}
.product-item .product-item-inner .green_dot,
.product-item .product-item-inner .orange_dot,
.product-item .product-item-inner .red_dot {
  display: inline-block;
  flex: 0 0 7px;
  width: 7px !important;
  height: 7px !important;
  margin: 0 !important;
  border-radius: 50% !important;
}
.product-item .product-item-inner .green_dot  { background: #2f9e5b !important; }
.product-item .product-item-inner .orange_dot { background: #e39b1a !important; }
.product-item .product-item-inner .red_dot    { background: #c8371f !important; }

/* ==========================================================================
   BTS REVAMP — pass 84: keep the action labels inside their column.
   "PODROBNOSTI" is a single long word, so it could not wrap and spilled over
   the divider into the next cell. Three things are combined here: the row uses
   the full card width, the cells may shrink (min-width:0), and the label may
   break as a last resort so it can never leave its column again.
   ========================================================================== */
.product-item .bts-card-actions {
  margin-left: -4px !important;
  margin-right: -4px !important;
}
.product-item .bts-card-action {
  min-width: 0 !important;
  padding: 2px 3px !important;
  overflow: hidden;
}
.product-item .bts-card-action-label {
  max-width: 100% !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* ==========================================================================
   BTS REVAMP — pass 85: action row stretched to the full card width so each
   label fits on one line, instead of shrinking the font.

   Budget per card (desktop_4, ~197px item):
     item content            181px   (.product-item padding 8px, pass 6)
     - .product-item-info    -36px   (padding 18px, pass 6)
     - .product-item-details -20px   (padding 10px, set explicitly below)
     = row content           125px   -> only ~41px per column before
   The row is pulled out by exactly those 28px per side, which lands on the
   card's border box (no clipping), giving ~60px per column. Equal 1fr columns
   are replaced by auto tracks, so "PODROBNOSTI" takes the width it needs while
   the multi-word wishlist label wraps.
   ========================================================================== */
.products-grid .product-item .product-item-details {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.product-item .bts-card-actions {
  grid-template-columns: auto auto auto !important;
  margin-left: -28px !important;
  margin-right: -28px !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}
.product-item .bts-card-action {
  padding: 2px 5px !important;
}
.product-item .bts-card-action-label {
  font-size: 9.5px !important;
  letter-spacing: 0 !important;
}

/* ==========================================================================
   BTS REVAMP — pass 87: compact page-header (~55px shorter, all three rows).
   The logo stays at the 300px the user asked for in pass 86, so the height
   comes out of the padding around it, the search field and the nav bar.
   Every value below replaces an earlier !important rule of ours, so the
   selectors are repeated verbatim where needed to keep specificity.
   ========================================================================== */

/* --- top utility bar (theme default .panel.header{padding:10px 20px}) --- */
.panel.wrapper .panel.header {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* --- main row (logo / search / cart): pass 3 had 18px top+bottom --- */
.header.content {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* --- white logo plate: pass 3 had 10px 16px, pass 33 (sticky) 8px 14px --- */
.header-wrapper-left .logo-left .logo,
.header-wrapper-content.sticky-menu.active .logo {
  padding: 6px 12px !important;
}

/* --- search pill: pass 16 had 50px --- */
.header-wrapper-center .amsearch-input,
.header-wrapper-center .amsearch-button.-loupe {
  height: 44px !important;
}

/* --- nav bar: pass 17 had 21px vertical padding --- */
.header-wrapper-bottom .cdz-menu.cdz-horizontal-menu > .groupmenu > li.level0 > a.menu-link {
  padding: 15px 20px !important;
}
/* "Vse kategorije" trigger keeps its 2px-taller-than-the-nav look:
   normal state had 12px padding + 10px margin, sticky (pass 54) 19px. */
.header-wrapper-bottom .menu-title {
  padding: 10px 18px !important;
  margin: 6px 0 !important;
}
.header-wrapper-content.sticky-menu.active .header-wrapper-bottom .menu-title,
.header-wrapper-content.sticky-menu.active .left-navigation .navigation .menu-title {
  padding: 13px 18px !important;
  margin: 6px 0 !important;
}

/* ==========================================================================
   BTS REVAMP — pass 89: attribute filters as a horizontal bar above the
   product listing (desktop), per the supplied reference screenshot.

   Structure comes from Amasty itself, not from CSS moves:
   every filter's "Show in the Block" setting was switched from Sidebar to Top
   (amasty_amshopby_filter_setting.block_position = 1), so Amasty renders the
   filters inside its own container .catalog-topnav.amasty-catalog-topnav,
   which is the FIRST element of .column.main - i.e. exactly at the top of the
   listing. Its ajax filtering, the mobile fallback (it clones the block into
   the sidebar under 768px) and the "clear all" links all keep working.

   Two things stay in .sidebar.sidebar-main and must not be removed from the
   DOM (amShopbyAjax.js hard-codes '.sidebar.sidebar-main .block.filter'):
   the "Zdaj nakupuje po" chips and the "Počisti vse" link. So the sidebar is
   not hidden - it is turned into a full-width row above the products.
   ========================================================================== */

@media all { /* pass 104: was min-width:768px */

/* ---------- A. page layout: no left column any more ---------- */
.page-with-filter .columns {
  display: flex !important;
  flex-wrap: wrap !important;
}
.page-with-filter.page-layout-2columns-left .columns > .column.main {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  order: 2 !important;
}
.page-with-filter.page-layout-2columns-left .columns > .sidebar.sidebar-main {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  order: 1 !important;
  /* drop the white card look of pass 4 - this is a plain row now */
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* the compare block would otherwise end up as a stray 25% box under the grid */
.page-with-filter.page-layout-2columns-left .columns > .sidebar.sidebar-additional {
  display: none !important;
}

/* ---------- B. the pill bar ---------- */
.catalog-topnav.amasty-catalog-topnav {
  display: block !important;
  position: relative !important;
  z-index: 500 !important;          /* dropdowns must clear the product cards */
  margin: 0 0 16px !important;
}
.catalog-topnav .block.filter {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
/* the big "Kupujte po" heading is redundant in both rows */
.catalog-topnav .block.filter > .block-title.filter-title,
.page-with-filter .sidebar-main .block.filter > .block-title.filter-title {
  display: none !important;
}
.catalog-topnav .block.filter > .block-content.filter-content {
  padding: 0 !important;
}
/* small grey label above the pills (the theme hides it inside the topnav) */
.catalog-topnav.amasty-catalog-topnav .filter-subtitle {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  overflow: visible !important;
  border: 0 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: #8a8a8f !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.catalog-topnav .filter-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.catalog-topnav .filter-options > .filter-options-item {
  position: relative !important;
  display: block !important;
  float: none !important;
  width: auto !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.catalog-topnav .filter-options > .filter-options-item > .filter-options-title {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 340px !important;
  margin: 0 !important;
  padding: 9px 14px !important;
  border: 1px solid var(--bts-line, #e7e5df) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--bts-ink, #373737) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  cursor: pointer !important;
}
.catalog-topnav .filter-options > .filter-options-item > .filter-options-title:after {
  margin: 0 0 0 8px !important;
  font-size: 12px !important;
  color: #8a8a8f !important;
}
.catalog-topnav .filter-options > .filter-options-item > .filter-options-title:hover {
  border-color: #b4b4b8 !important;
  background: #fafaf9 !important;
}
.catalog-topnav .filter-options > .filter-options-item.active > .filter-options-title {
  border-color: var(--bts-ink, #373737) !important;
  background: #ffffff !important;
}
/* a pill whose filter is currently applied gets the yellow accent.
   The category filter is excluded: its radio for the CURRENT category is
   always checked, so it would always look active. */
.catalog-topnav .filter-options > .filter-options-item:has(input:checked):not(:has([data-amshopby-filter="category_ids"])) > .filter-options-title {
  border-color: var(--bts-yellow, #efd111) !important;
  box-shadow: inset 0 0 0 1px var(--bts-yellow, #efd111) !important;
}

/* ---------- C. dropdown panel ---------- */
.catalog-topnav .filter-options .filter-options-content {
  top: calc(100% + 6px) !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  min-width: 290px !important;
  max-width: 460px !important;
  max-height: 62vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #ffffff !important;
  border: 1px solid var(--bts-line, #e7e5df) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .13) !important;
}
/* the last pill of a long row opens leftwards so it stays on screen */
.catalog-topnav .filter-options > .filter-options-item:nth-child(n+4):last-child .filter-options-content {
  left: auto !important;
  right: 0 !important;
}
.catalog-topnav .filter-options-content .items > .item,
.catalog-topnav .filter-options-content ol.items > li,
.catalog-topnav .filter-options-content ul.items > li {
  margin: 0 !important;
  padding: 3px 0 !important;
}
.catalog-topnav .filter-options-content .item a {
  color: #4a4a4f !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}
.catalog-topnav .filter-options-content .item a:hover {
  color: var(--bts-ink, #373737) !important;
}
.catalog-topnav .filter-options-content .count {
  color: #9a9a9d !important;
}

/* the category filter is navigation, not an attribute: dark pill, wider panel */
.catalog-topnav .filter-options > .filter-options-item:has([data-amshopby-filter="category_ids"]) > .filter-options-title {
  background: var(--bts-ink, #373737) !important;
  border-color: var(--bts-ink, #373737) !important;
  color: #ffffff !important;
}
.catalog-topnav .filter-options > .filter-options-item:has([data-amshopby-filter="category_ids"]) > .filter-options-title:after {
  color: #ffffff !important;
}
.catalog-topnav .filter-options > .filter-options-item:has([data-amshopby-filter="category_ids"]) .filter-options-content {
  min-width: 360px !important;
}

/* ---------- D. active-filter chips row ("Zdaj nakupuje po") ---------- */
.page-with-filter .sidebar-main .block.filter {
  margin: 0 !important;
}
.page-with-filter .sidebar-main .block.filter > .block-content.filter-content {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 12px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}
.page-with-filter .sidebar-main .filter-current {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.page-with-filter .sidebar-main .filter-current .filter-current-subtitle {
  margin: 0 !important;
  padding: 0 !important;
  color: #8a8a8f !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.page-with-filter .sidebar-main .filter-current .amshopby-items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.page-with-filter .sidebar-main .filter-current .amshopby-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  border: 1px solid var(--bts-line, #e7e5df) !important;
  border-radius: 999px !important;
  background: #f5f4f1 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}
.page-with-filter .sidebar-main .filter-current .amshopby-filter-name {
  color: #8a8a8f !important;
  font-weight: 700 !important;
}
.page-with-filter .sidebar-main .filter-current .amshopby-filter-value {
  display: inline !important;
  color: var(--bts-ink, #373737) !important;
  font-weight: 700 !important;
}
.page-with-filter .sidebar-main .filter-current .amshopby-button-wrap {
  display: none !important;
}
.page-with-filter .sidebar-main .block-actions.filter-actions {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.page-with-filter .sidebar-main .block-actions.filter-actions .action.clear {
  color: var(--bts-red, #c8371f) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

}

/* ==========================================================================
   BTS REVAMP — pass 91: the "›" in the filter dropdowns belongs on the same
   line as the value it points at.

   Why it was broken: the theme draws the arrow as a FontAwesome ::before on
   the <li class="item"> ...
       .filter-options-content .item:before { content: '\f105'; display: inline-block }
   ... while Amasty turns the value link into a block element ...
       .filter-options-content .item > a { display: block }
   ... so the block link always started a new line under the arrow.

   Fix: drop the arrow on the <li> and render it as the first inline content
   INSIDE the link, where it can never be pushed onto its own line. Scoped to
   the horizontal filter bar, so the mobile drawer keeps the theme's look.
   ========================================================================== */
@media all { /* pass 104: was min-width:768px */

.catalog-topnav .filter-options-content .item:before {
  display: none !important;
}
.catalog-topnav .filter-options-content .item > a:before {
  content: '\f105';
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  margin-right: 7px;
  color: #b0b0b4;
}
.catalog-topnav .filter-options-content .item > a:hover:before {
  color: var(--bts-ink, #373737);
}

}

/* ==========================================================================
   BTS REVAMP — pass 92: guard for the (now empty) sidebar filter block.

   Pass 89 turns .sidebar.sidebar-main into a full-width row above the products,
   because Amasty keeps the "Zdaj nakupuje po" chips + "Počisti vse" there and
   its ajax code hard-codes that container. That is fine as long as the sidebar
   holds ONLY those chips.

   For logged-in customers it did not: LunaLabs_FilterInStock added its "Zaloga"
   filter to the sidebar list only, so a whole filter accordion appeared inside
   a row that is styled as a flex chip strip. The root cause is fixed in
   LunaLabs\FilterInStock\Model\Plugin\FilterList (the stock filter now goes to
   the top list), and these rules make the layout survive it anyway - e.g. when
   someone sets a single filter back to "Sidebar" in the admin.
   ========================================================================== */

@media (min-width: 768px) {

/* A. a sidebar block that carries a real filter list must not be laid out as
      the horizontal chips strip. The block Amasty CLONES into the sidebar under
      768px (.amshopby-all-top-filters-append-left) is explicitly excluded - it
      is a copy of the top bar, not a real sidebar filter list (pass 103). */
.page-with-filter .sidebar-main .block.filter:not(.amshopby-all-top-filters-append-left) > .block-content.filter-content:has(#narrow-by-list) {
  display: block !important;
  margin: 0 !important;
}
/* ... and its heading is useful again in that case */
.page-with-filter .sidebar-main .block.filter:not(.amshopby-all-top-filters-append-left):has(#narrow-by-list) > .block-title.filter-title {
  display: block !important;
}

/* B. in that case fall back to the classic left column instead of a full-width
      row, so the filters read as a filter card and the grid keeps its shape */
.page-with-filter.page-layout-2columns-left .columns:has(.sidebar.sidebar-main .block.filter:not(.amshopby-all-top-filters-append-left) #narrow-by-list) > .sidebar.sidebar-main {
  width: 22.3% !important;
  max-width: 22.3% !important;
  margin: 0 0 20px !important;
  padding: 18px !important;
  background: #ffffff !important;
  border: 1px solid var(--bts-line, #e7e5df) !important;
  border-radius: var(--bts-radius-lg, 16px) !important;
}
.page-with-filter.page-layout-2columns-left .columns:has(.sidebar.sidebar-main .block.filter:not(.amshopby-all-top-filters-append-left) #narrow-by-list) > .column.main {
  width: 77.7% !important;
  max-width: 77.7% !important;
}

}

/* ==========================================================================
   BTS REVAMP — pass 93: filter dropdowns start closed.

   Companion to web/js/bts-filter-scroll.js (which forces options.active = false
   for every collapsible inside .catalog-topnav). This rule closes the panels
   for the split second before the widget initialises, so a page load never
   flashes three open dropdowns over the product grid.

   Deliberately without !important: once the widget opens a panel it writes
   display:block into the style attribute, and an inline style beats this rule.
   ========================================================================== */
@media all { /* pass 104: was min-width:768px */
  .catalog-topnav .filter-options .filter-options-content {
    display: none;
  }
}

/* ==========================================================================
   BTS REVAMP — pass 94: the filter dropdowns are open only while WE say so.

   Pass 93 (options.active = false) did not stop it: Kategorija / Material /
   Brand still came up expanded. Rather than keep hunting for whoever expands
   them, visibility is taken over here - a panel is shown only while the item
   carries .bts-open, and that class is set exclusively by a real click or
   keypress (web/js/bts-filter-scroll.js).

   Everything is gated behind .bts-topfilters-js, which that JS puts on <html>:
   if the file ever fails to load, these rules do nothing and Amasty keeps full
   control, so the filters can never be stuck closed.
   ========================================================================== */
@media all { /* pass 104: was min-width:768px */

.bts-topfilters-js .catalog-topnav .filter-options .filter-options-content {
  display: none !important;
}
.bts-topfilters-js .catalog-topnav .filter-options .filter-options-item.bts-open > .filter-options-content {
  display: block !important;
}

/* caret + highlighted pill follow our state, not the widget's */
.bts-topfilters-js .catalog-topnav .filter-options > .filter-options-item > .filter-options-title:after {
  content: '\e622' !important;
}
.bts-topfilters-js .catalog-topnav .filter-options > .filter-options-item.bts-open > .filter-options-title:after {
  content: '\e621' !important;
}
.bts-topfilters-js .catalog-topnav .filter-options > .filter-options-item.bts-open > .filter-options-title {
  border-color: var(--bts-ink, #373737) !important;
  background: #ffffff !important;
}

}

/* ==========================================================================
   BTS REVAMP — pass 96: no brand name in the card, all card text flush left.

   The centring came from the theme: .products-grid .product-item-info
   { text-align: center }, inherited by everything inside .product-item-details.
   It is overridden on .product-item-details only, so the product photo above it
   stays centred, and elements that carry their own text-align (the three action
   buttons, the "Izberi dimenzijo" button) keep theirs.
   ========================================================================== */

/* the blue brand line (pass 63) is no longer wanted - the brand logo at the top
   left of the card already says it */
.product-item .bts-card-brand {
  display: none !important;
}

/* SKU, name, dimension line, price, "Brez davka", stock - all left */
.products-grid .product-item .product-item-info .product-item-details {
  text-align: left !important;
}

/* the stock pill was centred in pass 83; it starts at the left edge now */
.product-item .product-item-details .product-item-inner:has(.green_dot),
.product-item .product-item-details .product-item-inner:has(.orange_dot),
.product-item .product-item-details .product-item-inner:has(.red_dot) {
  align-self: flex-start !important;
  margin: 6px 0 0 !important;
}

/* ==========================================================================
   BTS REVAMP — pass 97: SKU line 17px -> 20px (pass 63 set the 17px).
   ========================================================================== */
.product-item .product-item-name .product-item-no {
  font-size: 20px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 98: the stock pill moves to the top right of the card.

   .product-item-inner keeps its pill look from pass 82, but it is lifted out
   of the details flow and anchored to .product-item-info, which the page's own
   CSS already sets to position:relative. The font is one step smaller so the
   longest label ("Zaloga dobavitelja: 1295") clears the brand logo in the top
   left corner; z-index 6 keeps it above that logo (the page gives it z-index 5).
   ========================================================================== */
.product-item .product-item-details .product-item-inner:has(.green_dot),
.product-item .product-item-details .product-item-inner:has(.orange_dot),
.product-item .product-item-details .product-item-inner:has(.red_dot) {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 6 !important;
  margin: 0 !important;
  padding: 3px 9px !important;
  font-size: 10px !important;
  letter-spacing: .02em !important;
}

/* ==========================================================================
   BTS REVAMP — pass 99: the stock badge lives in the card's top row.

   list.phtml now prints it as .bts-stock-badge inside .bts-card-badges - the
   absolutely positioned row at the top of the card (top/left/right: 10px) that
   already holds the brand logo. The row is a flex box and the logo carries
   margin-right:auto, so margin-left:auto parks the badge hard right, next to
   the logo. This replaces the pass-98 attempt, which anchored the pill to
   .product-item-details (the theme gives that box position:relative, so it
   could never leave the text area).
   ========================================================================== */

.product-item .bts-card-badges .bts-stock-badge {
  order: 9;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e7f6ec;
  color: #1f7a44;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: right;
}
/* supplier stock = amber, no stock = red (the dots come from the template) */
.product-item .bts-card-badges .bts-stock-badge:has(.orange_dot) {
  background: #fff4e0;
  color: #8a5a00;
}
.product-item .bts-card-badges .bts-stock-badge:has(.red_dot) {
  background: #fdecec;
  color: #c8371f;
}
.product-item .bts-card-badges .bts-stock-badge .green_dot,
.product-item .bts-card-badges .bts-stock-badge .orange_dot,
.product-item .bts-card-badges .bts-stock-badge .red_dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2f9e5b;
}
.product-item .bts-card-badges .bts-stock-badge .orange_dot { background: #e39b1a; }
.product-item .bts-card-badges .bts-stock-badge .red_dot { background: #c8371f; }

/* .product-item-inner is empty now - drop the pill look and the pass-98
   positioning so it cannot leave an empty bubble behind */
.product-item .product-item-details .product-item-inner {
  position: static !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   BTS REVAMP — pass 100: on simple products the icon row comes first and the
   qty + add-to-cart row goes to the bottom of the card.

   Passes 65/71/73 had it the other way round (cart row order 4 with
   margin-top:auto, icon row order 5). The "margin-top: auto" moves with it, so
   the pair still sits flush at the bottom and the cards stay aligned.

   Scoped with :not(.js-configurable-product): configurable cards have no cart
   form, their yellow "Izberi dimenzijo" button is positioned absolutely at the
   bottom (pass 74) and their layout must not move.
   ========================================================================== */

.products-grid .product-item:not(.js-configurable-product) .product-item-details .bts-card-actions {
  order: 4 !important;
  margin-top: auto !important;
}
.products-grid .product-item:not(.js-configurable-product) .product-item-details .cdz-product-bottom {
  order: 5 !important;
  margin-top: 10px !important;
}

/* ==========================================================================
   BTS REVAMP — pass 101: add-to-cart button gets the "Izberi dimenzijo" look.

   Target style (the effective one for .bts-configurable-badge): dark #373737
   pill, 2px #efcf38 border, yellow text, 800/12px uppercase, height 42px,
   fully rounded, inverted on hover.

   The theme renders this button as a 35x35 icon square with font-size:0 (which
   is what hid the "Dodaj v košarico" label) and a FontAwesome basket in
   ::before. The label is brought back and the icon dropped, so the button reads
   like the dimension button; it also stretches to fill the row next to the qty
   stepper.
   ========================================================================== */

/* the row: qty stepper keeps its width, the button takes the rest */
.products-grid .product-item .cdz-buttons-inner form[data-role="tocart-form"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.products-grid .product-item .cdz-buttons-container button.action.tocart.primary,
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bts-ink, #373737) !important;
  color: var(--bts-yellow, #efd111) !important;
  border: 2px solid #efcf38 !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .3px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transition: all .2s ease-in-out !important;
}
/* the label is back (theme set font-size:0 on the button) ... */
.products-grid .product-item .cdz-buttons-container button.action.tocart.primary > span,
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary > span {
  font-size: 12px !important;
  line-height: 1 !important;
}
/* ... and the basket glyph goes, exactly like the dimension button has none */
.products-grid .product-item .cdz-buttons-container button.action.tocart.primary:before,
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary:before {
  display: none !important;
  content: none !important;
}
/* inverted on hover, like .bts-configurable-badge:hover */
.products-grid .product-item .cdz-buttons-container button.action.tocart.primary:hover,
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary:hover {
  background: #efcf38 !important;
  border-color: #efcf38 !important;
  color: #1c1a08 !important;
}

/* ==========================================================================
   BTS REVAMP — pass 102: on simple products the qty + cart row is pinned to
   the bottom of the card, exactly like the "Izberi dimenzijo" button.

   That button is appended by the page's own script to .product-item-info (grid
   mode) and positioned absolutely at bottom:15px, so it sits in the strip below
   the text block. The cart row lives inside .product-item-details, and the
   theme gives that box position:relative - which is why it could never leave
   the text block. For simple cards the box goes back to position:static (the
   dimension badge is not inside it, so nothing else depends on it) and the row
   anchors to .product-item-info instead.

   The 72px bottom padding is the same reservation pass 73 makes on configurable
   cards, so the icon row above cannot collide with the pinned row.
   ========================================================================== */

.products-grid .product-item:not(.js-configurable-product) .product-item-info .product-item-details {
  position: static !important;
  padding-bottom: 72px !important;
}
.products-grid .product-item:not(.js-configurable-product) .product-item-info .cdz-product-bottom {
  position: absolute !important;
  left: 15px !important;
  right: 15px !important;
  bottom: 15px !important;
  top: auto !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 2 !important;
}
.products-grid .product-item:not(.js-configurable-product) .product-item-info .cdz-product-bottom .cdz-buttons-container,
.products-grid .product-item:not(.js-configurable-product) .product-item-info .cdz-product-bottom .cdz-buttons-inner {
  width: 100% !important;
  margin: 0 !important;
}


/* ==========================================================================
   BTS REVAMP — pass 103: only ONE filter UI at a time on narrow screens.

   Amasty's own responsive helper (Amasty_Shopby/js/amShopbyResponsive.js) runs
       mediaCheck({ media: '(max-width: 768px)', entry: moveTopFiltersToSidebar })
   which CLONES .catalog-topnav #layered-filter-block into .sidebar.sidebar-main
   and marks the copy with .amshopby-all-top-filters-append-left.

   Magento's own breakpoint is min-width: 768px, so at exactly 768px BOTH match:
   the theme shows .catalog-topnav (our pill bar) and Amasty appends the clone to
   the sidebar - the filters appear twice, on top and on the left. On top of that
   the clone drags a #narrow-by-list into the sidebar, which triggered the pass 92
   fallback and gave the empty sidebar a 22.3% column again.

   Fix: wherever the pill bar is on screen (>= 768px), the clone is hidden and it
   no longer counts as a "real" sidebar filter list (see the :not() added to the
   pass 92 selectors). Below 768px nothing changes - the pill bar is hidden by the
   theme there and Amasty's mobile drawer stays the single filter UI.
   ========================================================================== */
@media all { /* pass 104: was min-width:768px */

/* the whole cloned block ... */
.page-with-filter .sidebar.sidebar-main .block.filter.amshopby-all-top-filters-append-left,
.page-with-filter .sidebar.sidebar-main #layered-filter-block.amshopby-all-top-filters-append-left {
  display: none !important;
}
/* ... and the single-item variant Amasty uses when the sidebar already has a
      filter list of its own */
.page-with-filter .sidebar.sidebar-main .filter-options-item.amshopby-filter-top {
  display: none !important;
}

/* the clone hides the top bar's "Počisti vse" with an inline style
   (topFilterActions.hide()); the chips row in the sidebar keeps ours, so this
   only makes sure the top bar's own actions are not left half-hidden */
.catalog-topnav .block-actions.filter-actions {
  display: none !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 104: the pill bar is the filter UI on phones too.

   Pass 103 removed the duplicate at 768px, but below 768px the theme hides
   .catalog-topnav (styles-m: .catalog-topnav{display:none}) while Amasty keeps
   cloning the filter list into .sidebar.sidebar-main - and that sidebar is
   rendered AFTER .column.main in the DOM, so on a phone the filters ended up as
   a long stack UNDER the product grid.

   So every filter-bar pass (89, 91, 92, 93, 94, 103) had its
   "@media (min-width: 768px)" gate opened to "@media all": the horizontal pill
   bar, the applied-filter chips row above it and the "closed unless clicked"
   behaviour now work at every width, and the cloned sidebar block is hidden at
   every width as well. Only the geometry of the dropdown panels needs to differ
   on a narrow screen, which is what this pass adds.

   Safe by construction: the pill bar is the SAME Amasty block that already
   worked on desktop (ajax filtering, "Počisti vse", swatches). The theme's
   full-screen mobile filter overlay (.filter.active / body.filter-active) is
   never triggered, because its trigger - .block-title.filter-title - stays
   hidden (pass 89) and the block-level collapsible is left collapsed.
   ========================================================================== */
@media (max-width: 767px) {

/* the label above the pills may be a little tighter */
.catalog-topnav.amasty-catalog-topnav {
  margin: 0 0 12px !important;
}
.catalog-topnav.amasty-catalog-topnav .filter-subtitle {
  margin: 0 0 6px !important;
}
.catalog-topnav .filter-options {
  gap: 6px !important;
  /* the dropdown is positioned against the whole bar, not against one pill,
     so a panel can never stick out of the viewport */
  position: relative !important;
}
.catalog-topnav .filter-options > .filter-options-item {
  position: static !important;
}
.catalog-topnav .filter-options > .filter-options-item > .filter-options-title {
  max-width: calc(100vw - 40px) !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
}

/* full-width dropdown under the bar (three rules, one per pass-89/C selector,
   so the specificity matches and mobile really wins) */
.catalog-topnav .filter-options .filter-options-content,
.catalog-topnav .filter-options > .filter-options-item:nth-child(n+4):last-child .filter-options-content,
.catalog-topnav .filter-options > .filter-options-item:has([data-amshopby-filter="category_ids"]) .filter-options-content {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: 58vh !important;
  z-index: 9999 !important;
}

/* the chips row ("Zdaj nakupuje po") is a plain row above the bar here */
.page-with-filter .sidebar-main .block.filter > .block-content.filter-content {
  gap: 6px 10px !important;
  margin: 0 0 10px !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 105: product cards stop floating above the whole page.

   Amasty_Label (app/code/Amasty/Label/view/base/web/js/label.js, line 76) does
   this on every label init:

       /*fix issue with hover on product grid*/
       $('.product-item-info').css('zIndex', '2000');

   i.e. it writes an INLINE z-index: 2000 on every product card. That is why the
   filter dropdowns disappeared behind the cards (the pill bar is z-index 500)
   and why a card could also slide over the sticky header (z-index 889).

   The value is set on ALL cards at once, so every card had the same 2000 and
   their order among themselves was decided by DOM order anyway. Forcing them to
   1 therefore changes nothing between the cards - it only puts them back below
   the rest of the page. Labels keep working: they are z-index 995 INSIDE the
   card, so they stay above the image (a child's z-index only competes inside
   its own stacking context).

   !important is required: a plain rule cannot beat an inline style.
   ========================================================================== */
.product-item .product-item-info,
.products-grid .product-item-info,
.products-list .product-item-info,
.amsearch-item.product-item .product-item-info {
  z-index: 1 !important;
}

/* the filter bar keeps a comfortable margin above the grid, but stays BELOW the
   sticky header (889) so a scrolled page never has a dropdown over the menu */
.catalog-topnav.amasty-catalog-topnav {
  z-index: 600 !important;
}


/* ==========================================================================
   BTS REVAMP — pass 106: the open dropdown wins over everything on the page.

   Pass 105 pushed the product cards back down to z-index 1, but the dropdown
   still ended up behind them: several modules (Amasty_Label being the one we
   found, label.js line 76) hand out their own inline z-index values at runtime,
   so any fixed number we pick for the bar is a bet against code we do not own.

   web/js/bts-filter-scroll.js now marks the bar with .bts-bar-open AND writes an
   inline "z-index: 99990 !important" while a panel is open, and removes it on
   close. This block is the CSS half: the same lift for browsers/paths where the
   class is set, plus "overflow: visible" on every wrapper between the bar and
   the panel, so the panel can never be clipped either.
   ========================================================================== */
.catalog-topnav.amasty-catalog-topnav.bts-bar-open {
  z-index: 99990 !important;
}
.catalog-topnav.amasty-catalog-topnav,
.catalog-topnav .block.filter,
.catalog-topnav .block.filter > .block-content.filter-content,
.catalog-topnav .filter-options,
.catalog-topnav .filter-options > .filter-options-item {
  overflow: visible !important;
}


/* ==========================================================================
   BTS REVAMP — pass 107: the real BTS logo on mobile too.

   The theme prints TWO logo images and swaps them by width:
       styles-m.css: .page-header .logo .main-logo  { display: none }
                     .page-header .logo .small-logo { display: inline-block }
   ... and the logo template rewrites the second one with its own script:
       var logoSrc = ".../logo/stores/3/bts_logo.png";
       imageName = logoSrc-without-extension + "-small" + extension;
       $('.small-logo').attr('src', imageName);

   So on a phone the header asked for /media/logo/stores/3/bts_logo-small.png,
   which did not exist (only store 1 ever got such a file) - Magento's media
   fallback answered with a 1.7 kB placeholder JPEG instead of the logo.

   Two things were done: the missing "-small" copies were created for every
   store that has its own logo (stores 2, 3, 4, 5), so the theme's own mechanism
   is correct again; and, so that a stale placeholder in someone's browser cache
   cannot show up either, the mobile header now simply uses the SAME image as
   the desktop header - .main-logo - sized to fit next to the menu button.
   ========================================================================== */
@media (max-width: 768px) { /* pass 109: was 767px */

.page-header .logo .main-logo {
  display: inline-block !important;
}
.page-header .logo .small-logo {
  display: none !important;
}
/* the dark plate hugs the logo instead of stretching across the header */
.header-wrapper-left .logo-left .logo,
.page-header .logo {
  width: auto !important;
  max-width: calc(100% - 150px) !important;
  min-height: 0 !important;
  text-align: left !important;
}
.header-wrapper-left .logo-left .logo {
  padding: 5px 10px !important;
}
.header-wrapper-left .logo-left .logo img.main-logo {
  width: 150px !important;
  height: auto !important;
  max-height: none !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 108: the mobile logo roughly doubles in size.

   Pass 107 kept the theme's reserved gutters (margin: 0 90px 10px 50px on
   .page-header .logo) and could therefore only give the image 150px. Those
   gutters are legacy: the grid columns of the header (.col-sm-7 / -11 / -6) get
   their widths only inside "@media (min-width: 768px)", so below that every
   header column is a full-width row of its own - the logo row is shared with
   nothing except the hamburger, which is absolutely positioned at left: 15px
   and is 26px wide (ends at 41px).

   So the right gutter is released and only ~46px is kept on the left for the
   hamburger: the logo now takes the whole row up to 340px (vs 150px), i.e.
   about 2.3x on a normal phone, and it scales down by itself on narrow screens
   because the image keeps max-width: 100%.

   The theme's ".logo img { max-height: 54px }" has to go with it, otherwise the
   1050x234 logo would be clamped back to ~240px of width.
   ========================================================================== */
@media (max-width: 768px) { /* pass 109: was 767px */

.header-wrapper-left .logo-left .logo {
  margin: 0 10px 8px 46px !important;
  max-width: calc(100% - 56px) !important;
  padding: 6px 10px !important;
}
.header-wrapper-left .logo-left .logo img.main-logo,
.page-header .logo img.main-logo {
  width: 340px !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
}
/* nothing in the row may clip the now taller plate */
.header-wrapper-left,
.header-wrapper-left .logo-left {
  min-height: 0 !important;
  overflow: visible !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 109: the logo was still tiny at 768px.

   The theme does not use 767px as its mobile boundary - every header rule is
   written as

       @media only screen and (max-width: 768px)   /* mobile  */
       @media all and (min-width: 769px)           /* desktop */

   so 768px (the width the screenshot was taken at, and the width of a portrait
   tablet) still counts as MOBILE for the theme, while passes 107/108 stopped at
   767px. At 768px the theme therefore had the last word:

       .page-header .logo { width: calc(100% - 140px); margin: 0 90px 10px 50px }

   and because the grid columns already have their desktop widths at 768px
   (.col-sm-7 = 29.17%), the logo box was (218px - 140px) = 78px wide, minus the
   plate padding => a ~50px logo. Hence "komaj se ga vidi".

   Both blocks now end at 768px, and the sizing below is the authoritative one:
   the 140px reserve is dropped (only ~46px is kept on the left for the
   hamburger, which is absolutely positioned at left: 15px and visible up to
   768px), the image asks for 340px and keeps max-width: 100%, so it takes
   whatever the row really offers - about 142px inside the narrow 768px column
   (~2.8x what it was) and up to 340px on a phone, where the header columns are
   full-width rows.
   ========================================================================== */
@media (max-width: 768px) {

/* one image, the same one as on the desktop header */
.page-header .logo .main-logo {
  display: inline-block !important;
}
.page-header .logo .small-logo {
  display: none !important;
}

/* the plate hugs the logo and gives up the theme's 90px right reserve */
.header-wrapper-left .logo-left .logo,
.page-header .logo {
  width: auto !important;
  max-width: calc(100% - 56px) !important;
  min-height: 0 !important;
  margin: 0 10px 8px 46px !important;
  padding: 6px 10px !important;
  text-align: left !important;
}

/* as big as the row allows, up to 340px - both classes, so it does not matter
   which of the two images the theme decides to show */
.header-wrapper-left .logo-left .logo img.main-logo,
.header-wrapper-left .logo-left .logo img.small-logo,
.page-header .logo img.main-logo,
.page-header .logo img.small-logo {
  width: 340px !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

.header-wrapper-left,
.header-wrapper-left .logo-left {
  min-height: 0 !important;
  overflow: visible !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 110: give the logo room on tablet widths (768-991px).

   Pass 109 removed the theme's 140px reserve, but at 768-991px the logo still
   lives in a 29.17% grid column (.col-sm-7), which leaves ~197px of content
   width - so the plate could not grow past ~140px no matter what the image
   asked for. Below 768px the same columns have no width at all (their rules
   start at min-width: 768px) and each becomes a full-width row, which is why a
   phone already shows a 340px logo.

   The three header columns are rebalanced for that band only: the logo column
   goes 29.17% -> 42% and the search column 45.83% -> 33%, the cart column keeps
   its 25%. The search field stays ~225px wide, and the logo gets ~220px.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {

.header-wrapper-content .header.content > .row > .col-sm-7 {
  width: 42% !important;
}
.header-wrapper-content .header.content > .row > .col-sm-11 {
  width: 33% !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 111: phone + website on ONE line under the search bar.

   The line comes from the CMS block "fastest-fdl-header-delivery-information"
   (cms_block 45, store 3). It used to be one long text node plus a
   <span style="font-size: 14pt"> for the address, so as soon as its column got
   narrow - which is exactly what happens between 768px and 1199px, where the
   header's centre column is a fraction of the row - it broke into two lines
   ("+386 (1) 5841-500 Podatki o dostavi" / "www.bts-company.com") and looked
   like two unrelated pieces.

   The block content is now structured (.bts-hp-phone / .bts-hp-label /
   .bts-hp-sep / .bts-hp-web) with no inline font-size or colour, and this pass
   lays it out as a single nowrap row. In the narrow band the descriptive label
   "Podatki o dostavi" steps aside so the phone number and the address always
   stay side by side, and the leftovers of passes 36/40 (margin-left: 60px,
   left: -33px), which were measured for the wide header, are neutralised there.
   ========================================================================== */
.header-phone.bts-hp {
  display: inline-flex !important;
  align-items: baseline;
  justify-content: center;
  /* wrapping stays allowed on the wide header, where the whole line fits
     anyway - it is only forbidden in the narrow band below, where the label
     is dropped instead of breaking the line */
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
}
.header-phone.bts-hp .bts-hp-item,
.header-phone.bts-hp .bts-hp-web {
  white-space: nowrap;
}
.header-phone.bts-hp .bts-hp-phone {
  font-weight: 700;
}
.header-phone.bts-hp .bts-hp-sep {
  color: #6f6f73;
}
/* the address keeps the size it had from its old inline style (14pt) */
.header-phone.bts-hp .bts-hp-web {
  font-size: 18.5px;
  line-height: 1.2;
}
.header-phone.bts-hp .bts-hp-web a {
  color: #b9b9bc !important;
  text-decoration: none;
}
.header-phone.bts-hp .bts-hp-web a:hover {
  color: var(--bts-yellow, #efd111) !important;
}

/* 768-1199px: the centre column is narrow, so shed the label and the offsets */
@media (min-width: 768px) and (max-width: 1199px) {

.header-phone.bts-hp {
  flex-wrap: nowrap !important;
  white-space: nowrap;
  gap: 8px;
  font-size: 11.5px;
  margin-left: 0 !important;
  padding-top: 4px !important;
}
.header-phone.bts-hp .bts-hp-label {
  display: none !important;
}
.header-phone.bts-hp .bts-hp-web {
  font-size: 13px !important;
}
.header-wrapper-center-content,
.header-wrapper-content.sticky-menu.active .header-wrapper-center-content {
  left: 0 !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 112: MOBILE ONLY - the search dropdown becomes two halves,
   categories on the left, products on the right.

   Why it looked broken: pass 22 gave the dropdown
       .header-wrapper-center .amsearch-result-section { width: 1100px;
                                                        max-width: 92vw;
                                                        left: 0; right: auto }
   which is right for the wide header, but on a phone/tablet the search sits in
   a narrow header column, so the panel started at that column's left edge and
   ran ~340px off the right side of the screen. On top of that Amasty adds the
   class "-small" to the panel whenever the input is narrower than 700px, and
   -small means

       .amsearch-result-section { flex-wrap: wrap }        (Amasty _results.less)

   so the two <section>s of results/wrapper.html - .amsearch-items-section
   (categories, popular searches) and .amsearch-products-section (products) -
   were stacked on top of each other instead of sitting side by side.

   Fix, all inside @media (max-width: 768px) - the theme's own mobile boundary:
     1. the search column becomes a full-width row of its own, so the input and
        its dropdown have the whole header width to work with (below 768px this
        is already the case - the header's grid columns only get their widths
        from min-width: 768px - so in practice this only changes 768px itself);
     2. the panel is clamped to that width instead of 1100px;
     3. flex-wrap: nowrap beats "-small", and the two sections get 42% / 58%
        with their own scrollbars;
     4. product cards go one per row (pass 22's 33% would leave ~140px here);
     5. the highlighted search term gets the yellow accent - on the dark panel
        of pass 22 its default colour was almost invisible ("SVEDER" in the
        screenshot).
   ========================================================================== */
@media (max-width: 768px) {

/* --- 1. the search gets the full header width ------------------------- */
.header-wrapper-content .header.content > .row > .col-sm-11 {
  width: 100% !important;
  float: none !important;
  clear: both !important;
}
/* with the room back, the delivery line may show its label again */
.header-phone.bts-hp .bts-hp-label {
  display: inline !important;
}

/* --- 2. the panel stays on screen ------------------------------------- */
.header-wrapper-center .amsearch-result-section,
.page-header .amsearch-result-section {
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: 78vh !important;
  overflow: hidden !important;
}

/* --- 3. two halves, side by side, each scrolling on its own ----------- */
.amsearch-result-section,
.amsearch-result-section.-small {
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}
.amsearch-result-section > .amsearch-items-section {
  flex: 0 0 42% !important;
  width: 42% !important;
  max-width: 42% !important;
  padding: 14px 12px !important;
  border-right: 1px solid rgba(255, 255, 255, .12) !important;
  overflow-y: auto !important;
  max-height: 78vh !important;
}
.amsearch-result-section > .amsearch-products-section {
  flex: 1 1 58% !important;
  width: 58% !important;
  max-width: 58% !important;
  padding: 14px 12px !important;
  border-top: none !important;
  border-left: none !important;
  overflow-y: auto !important;
  max-height: 78vh !important;
}

/* --- 4. one product per row in the right half ------------------------- */
.amsearch-products-section.-grid:not(.-slider) .amsearch-item,
.amsearch-products-section .amsearch-product-list > .amsearch-item {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}
/* keep the little product rows compact: image left, text right */
.amsearch-products-section .amsearch-product-list > .amsearch-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
.amsearch-products-section.-grid .amsearch-image {
  flex: 0 0 64px !important;
  width: 64px !important;
  padding: 0 !important;
}
.amsearch-products-section.-grid .amsearch-image .amsearch-product-image-container {
  width: 64px !important;
}
.amsearch-products-section .amsearch-description {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.amsearch-products-section .amsearch-link.product-item-link {
  font-size: 11.5px !important;
  line-height: 1.3 !important;
}
.amsearch-products-section .product-item-description {
  font-size: 11px !important;
}

/* --- 5. the search term must be readable on the dark panel ------------ */
.amsearch-result-section .amsearch-highlight {
  color: var(--bts-yellow, #efd111) !important;
  background: transparent !important;
  font-weight: 700 !important;
}

/* headers of the two halves a bit tighter */
.amsearch-result-section .amsearch-block-header {
  margin: 0 0 8px !important;
  font-size: 13px !important;
}
.amsearch-result-section .amsearch-item {
  font-size: 12px !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 113: MOBILE ONLY - bigger thumbnails and text in the
   search dropdown, and the struck-through price stops drawing a red line
   across the whole card.

   The red line is not a text-decoration: the page's own inline CSS
   (design/head/includes) draws it as a pseudo element -

       .old-price          { position: relative; display: inline-block }
       .old-price::after   { content: ""; position: absolute;
                             left: -4px; right: -4px; top: 50%;
                             height: 3px; background: red }

   - which only works while .old-price hugs its text. Inside the search results
   Amasty lays the price box out with block-level children, so .old-price became
   full width (the head-includes rule has no !important) and the bar ran to the
   right edge of the card. Forcing the old price and its two inner wrappers back
   to inline-block puts the bar back on the number itself.
   ========================================================================== */
@media (max-width: 768px) {

/* --- bigger product thumbnail (was 64px) ------------------------------ */
.amsearch-products-section.-grid .amsearch-image {
  flex: 0 0 100px !important;
  width: 100px !important;
}
.amsearch-products-section.-grid .amsearch-image .amsearch-product-image-container {
  width: 100px !important;
  max-width: 100px !important;
}
.amsearch-products-section.-grid .amsearch-image .product-image-photo {
  width: 100% !important;
  height: auto !important;
}

/* --- bigger text ------------------------------------------------------ */
.amsearch-products-section .amsearch-link.product-item-link {
  font-size: 13.5px !important;
  line-height: 1.35 !important;
}
.amsearch-products-section .product-item-description {
  font-size: 12px !important;
}
.amsearch-products-section .price-box .price {
  font-size: 20px !important;
}
.amsearch-products-section .price-box .price-label {
  font-size: 11px !important;
}
.amsearch-result-section .amsearch-item {
  font-size: 13px !important;
}
.amsearch-result-section .amsearch-block-header,
.amsearch-result-section .amsearch-title {
  font-size: 14.5px !important;
}

/* --- the struck price keeps the red bar on the number ----------------- */
.amsearch-result-section .old-price,
.amsearch-result-section .old-price .price-container,
.amsearch-result-section .old-price .price-wrapper {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
}
.amsearch-result-section .old-price {
  margin-top: 2px !important;
}
.amsearch-result-section .old-price .price {
  font-size: 12.5px !important;
  color: #8a8a8f !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 114: MOBILE ONLY - no red bar over the old price in the
   search, just a plain strike-through.

   Pass 113 tried to keep the head-includes bar (.old-price::after, a 3px red
   absolute element) on the number by forcing .old-price back to inline-block,
   but in the search markup the price box is nested differently again, so the
   bar kept spanning the card. As agreed, the bar is simply dropped here and the
   old price is struck the normal way instead.

   Covered contexts: the dropdown (.amsearch-result-section), the search results
   page (body.catalogsearch-result-index, .amsearch-search-page) and any
   .amsearch-item card, so it does not matter which of them a card comes from.
   ========================================================================== */
@media (max-width: 768px) {

.amsearch-result-section .old-price::after,
.amsearch-result-section .old-price::before,
.amsearch-item .old-price::after,
.amsearch-item .old-price::before,
.amsearch-search-page .old-price::after,
.amsearch-search-page .old-price::before,
.catalogsearch-result-index .old-price::after,
.catalogsearch-result-index .old-price::before {
  content: none !important;
  display: none !important;
  background: none !important;
  height: 0 !important;
  width: 0 !important;
}

/* the old price still has to READ as an old price */
.amsearch-result-section .old-price .price,
.amsearch-item .old-price .price,
.amsearch-search-page .old-price .price,
.catalogsearch-result-index .old-price .price {
  text-decoration: line-through !important;
  text-decoration-color: #b0b0b4 !important;
  color: #8a8a8f !important;
  font-size: 12.5px !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 115: MOBILE ONLY - the "Dodaj v košarico" button is back
   in the product grid.

   It was not our layout at all: the theme switches it off on purpose below its
   mobile breakpoint (pub/static .../css/styles-m.css):

       @media only screen and (max-width: 768px) {
           .products-grid .product-item .product-item-info .cdz-buttons-container {
               padding-bottom: 10px;
               display: none;                 <-- here
           }
       }

   The markup was always there (form[data-role="tocart-form"] with the qty
   stepper and button.action.tocart.primary), it was simply display: none, which
   is why the card showed an empty strip where pass 102 had reserved room.

   Re-shown here, plus two adjustments that the narrow mobile card needs:
     - the block goes back INTO the flow instead of being pinned to the bottom
       (pass 102 reserves 72px there, which is not enough once the qty row and
       the button sit on two lines), so the card simply grows;
     - the form is allowed to wrap: the qty stepper keeps its size and the
       button takes the rest of the line, or the whole next line when the card
       is too narrow for both.
   ========================================================================== */
@media (max-width: 768px) {

/* 1. undo the theme's display: none */
.products-grid .product-item .product-item-info .cdz-buttons-container {
  display: block !important;
  padding-bottom: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}

/* 2. in the flow, not absolutely pinned to the card bottom */
.products-grid .product-item .product-item-info .cdz-product-bottom,
.products-grid .product-item:not(.js-configurable-product) .product-item-info .cdz-product-bottom {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  margin: 10px 0 0 !important;
  order: 5 !important;
}
.products-grid .product-item .product-item-info .product-item-details,
.products-grid .product-item:not(.js-configurable-product) .product-item-info .product-item-details {
  padding-bottom: 12px !important;
}

/* 3. qty + button share the line, or wrap when the card is too narrow */
.products-grid .product-item .cdz-buttons-inner form[data-role="tocart-form"] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary {
  flex: 1 1 130px !important;
  height: 40px !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  font-size: 11.5px !important;
}
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary span {
  font-size: 11.5px !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 116: MOBILE ONLY - category menu opens on tap.

   CSS half of web/js/bts-mobile-menu.js (loaded through the theme's
   requirejs-config.js "deps"). The JS puts .bts-mobilemenu-js on <html> and
   .bts-open on the tapped item; here the submenu of an open item is rendered as
   a plain indented block instead of Codazon's hover dropdown, which on a touch
   screen was unreachable (its widget only switches to its own mobile mode BELOW
   768px - `responsive: {768: 'mobile'}` - so at 768px the menu was still the
   desktop hover version).

   Everything is gated behind .bts-mobilemenu-js: if the JS ever fails to load,
   these rules do nothing and Codazon keeps full control, so the menu can never
   end up permanently closed.
   ========================================================================== */
@media (max-width: 768px) {

/* submenus are closed unless WE opened them (.open is Codazon's own class,
   honoured so its below-768px toggle keeps working as well) */
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu .groupmenu-drop,
.bts-mobilemenu-js .nav-sections .cdz-menu .groupmenu-drop {
  display: none !important;
}
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu li.item.bts-open > .groupmenu-drop,
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu li.item.open > .groupmenu-drop,
.bts-mobilemenu-js .nav-sections .cdz-menu li.item.bts-open > .groupmenu-drop,
.bts-mobilemenu-js .nav-sections .cdz-menu li.item.open > .groupmenu-drop {
  display: block !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 0 0 14px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: rgba(0, 0, 0, .12) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  overflow: visible !important;
}

/* the widget's separate little arrow target is not needed - the whole row
   is the toggle now */
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu .dropdown-toggle,
.bts-mobilemenu-js .nav-sections .cdz-menu .dropdown-toggle {
  display: none !important;
}

/* a comfortable tap target and a caret that flips when the branch is open */
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu li.item.parent > a.menu-link,
.bts-mobilemenu-js .nav-sections .cdz-menu li.item.parent > a.menu-link {
  position: relative !important;
  padding-right: 38px !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
}
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu li.item.parent > a.menu-link:after,
.bts-mobilemenu-js .nav-sections .cdz-menu li.item.parent > a.menu-link:after {
  content: '\e622' !important;
  font-family: 'luma-icons' !important;
  font-size: 16px !important;
  line-height: 1 !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  opacity: .75;
}
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu li.item.parent.bts-open > a.menu-link:after,
.bts-mobilemenu-js .nav-sections .cdz-menu li.item.parent.bts-open > a.menu-link:after {
  content: '\e621' !important;
  opacity: 1;
}

/* nested rows stay legible one level down */
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu .groupmenu-drop .item > a.menu-link,
.bts-mobilemenu-js .nav-sections .cdz-menu .groupmenu-drop .item > a.menu-link {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  font-size: 12.5px !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 117: MOBILE ONLY - every category level opens, not just
   the second one.

   The vertical panel mixes two link classes per level:

       li.item.level0.parent            > a.menu-link        + ul.groupmenu-drop
       li.item.level1.parent.cat-tree   > a.groupdrop-title   + ul.cat-tree.groupmenu-drop
       li.level2.item.parent            > a.menu-link        + ul.level2.groupmenu-drop
       li.level3.item.parent            > a.menu-link        + ul.level3.groupmenu-drop
       ...

   Pass 116 only knew about a.menu-link, so the level 1 rows of the mega panel
   ("OBDELAVA PO MATERIALIH" and friends) were not treated as toggles at all:
   the first tap opened the second layer and there it stopped. The JS now also
   listens on a.groupdrop-title, and the tap target / caret rules below cover
   both classes, at any depth.
   ========================================================================== */
@media (max-width: 768px) {

.bts-mobilemenu-js #lefmenu-mobile .cdz-menu li.item.parent > a.menu-link,
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu li.item.parent > a.groupdrop-title,
.bts-mobilemenu-js .nav-sections .cdz-menu li.item.parent > a.menu-link,
.bts-mobilemenu-js .nav-sections .cdz-menu li.item.parent > a.groupdrop-title {
  position: relative !important;
  padding-right: 38px !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
}
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu li.item.parent > a.groupdrop-title:after,
.bts-mobilemenu-js .nav-sections .cdz-menu li.item.parent > a.groupdrop-title:after {
  content: '\e622' !important;
  font-family: 'luma-icons' !important;
  font-size: 16px !important;
  line-height: 1 !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  opacity: .75;
}
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu li.item.parent.bts-open > a.groupdrop-title:after,
.bts-mobilemenu-js .nav-sections .cdz-menu li.item.parent.bts-open > a.groupdrop-title:after {
  content: '\e621' !important;
  opacity: 1;
}

/* the deeper trees (ul.cat-tree.groupmenu-drop, ul.level2/3/4.groupmenu-drop)
   are the same block-level accordion, one indent per level */
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu li.item.bts-open > ul.cat-tree.groupmenu-drop,
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu li.item.open > ul.cat-tree.groupmenu-drop,
.bts-mobilemenu-js .nav-sections .cdz-menu li.item.bts-open > ul.cat-tree.groupmenu-drop,
.bts-mobilemenu-js .nav-sections .cdz-menu li.item.open > ul.cat-tree.groupmenu-drop {
  display: block !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 0 0 14px !important;
  border: none !important;
  box-shadow: none !important;
  background: rgba(0, 0, 0, .12) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* deep rows: readable, and never the multi-column mega layout */
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu .groupmenu-drop,
.bts-mobilemenu-js .nav-sections .cdz-menu .groupmenu-drop {
  column-count: auto !important;
  columns: auto !important;
}
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu .groupmenu-drop > li.item,
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu .groupmenu-drop > li,
.bts-mobilemenu-js .nav-sections .cdz-menu .groupmenu-drop > li.item,
.bts-mobilemenu-js .nav-sections .cdz-menu .groupmenu-drop > li {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 118: MOBILE ONLY - the search dropdown keeps its two
   halves under ~760px as well.

   Root cause was in Amasty's own logic, not in the layout: see
   web/js/bts-search-horizontal.js - below 768px isNeedHorizontalView() is false
   and _parseSearchData() then pushes the PRODUCTS into searchItems, i.e. inside
   .amsearch-items-section, instead of rendering them as the second <section>.
   Pass 112 pins that section to 42%, so categories and products both ended up
   in the left half. The mixin makes the markup horizontal at every width, and
   these rules add what CSS still has to do:

     - the form block must not keep the inline width: 700px that knockout writes
       while typing ("style: {width: resized() ? data.width + 'px' : ''}"),
       which on a 400px screen pushed the input and the panel off screen;
     - a safety net for the case where the mixin is not loaded: an items section
       that still contains a products block takes the full width instead of
       squeezing everything into 42%.
   ========================================================================== */
@media (max-width: 768px) {

/* 1. the search field stays inside the screen while typing */
.page-header .amsearch-form-block,
.header-wrapper-center .amsearch-form-block,
.page-header .amsearch-wrapper-block {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* 2. safety net: products still inside the left section -> full width, stacked */
.amsearch-result-section > .amsearch-items-section:has(> .amsearch-products-section) {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  border-right: none !important;
}
.amsearch-result-section > .amsearch-items-section > .amsearch-products-section {
  width: 100% !important;
  max-width: 100% !important;
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
  padding-top: 12px !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 119: MOBILE ONLY - "Vse kategorije" becomes a ☰ icon to
   the left of the theme's hamburger, in the logo row.

   The button (div.menu-title[data-cdz-toggle="#lefmenu-mobile"]) sits in
   .header-wrapper-bottom > nav#left-nav, i.e. in a different header row than
   the logo, so CSS alone cannot put it next to the logo - the re-parenting is
   done by web/js/bts-mobile-menu.js (pass 119), which moves it into
   .header-wrapper-left .logo-left on mobile and back on desktop, and marks it
   with .bts-cat-toggle-moved. Only the button moves; the panel it toggles stays
   where it is and still opens as a full-width block under the header.

   The label is dropped (font-size: 0) and replaced by FontAwesome's \f0c9 -
   three horizontal lines, the same shape as the theme's .nav-toggle, which is
   shifted right so both icons fit before the logo.
   ========================================================================== */
@media (max-width: 768px) {

/* --- the categories button as an icon --------------------------------- */
.header-wrapper-left .logo-left > .menu-title[data-cdz-toggle="#lefmenu-mobile"] {
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 15 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  font-size: 0 !important;
  line-height: 34px !important;
  text-align: center !important;
  cursor: pointer !important;
  display: block !important;
}
.header-wrapper-left .logo-left > .menu-title[data-cdz-toggle="#lefmenu-mobile"]:before {
  content: '\f0c9';
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 34px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  color: #ffffff;
}
.header-wrapper-left .logo-left > .menu-title[data-cdz-toggle="#lefmenu-mobile"]:hover:before,
.header-wrapper-left .logo-left > .menu-title[data-cdz-toggle="#lefmenu-mobile"]:active:before {
  color: var(--bts-yellow, #efd111);
}
/* whatever the theme drew after the label is not wanted on an icon */
.header-wrapper-left .logo-left > .menu-title[data-cdz-toggle="#lefmenu-mobile"]:after {
  display: none !important;
  content: none !important;
}

/* --- room for the two icons in front of the logo ---------------------- */
.header-wrapper-left .logo-left {
  position: relative !important;
}
.header-wrapper-left .action.nav-toggle {
  left: 48px !important;
}
.header-wrapper-left .logo-left .logo {
  margin-left: 84px !important;
  max-width: calc(100% - 94px) !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 120: MOBILE ONLY - only the open category chain is yellow,
   not the whole branch.

   Cause: an earlier pass highlights menu rows with

       .cdz-menu .groupmenu-drop .item:hover { background: var(--bts-yellow) !important }

   On a mouse that is one row at a time. On a touch screen the tapped element
   keeps its :hover state AND so does every ANCESTOR <li> of it - and an
   ancestor <li> is not a row, it is the whole subtree box. Tapping down to
   "Negativne ploščice" therefore painted Rezilno orodje > Obdelava po
   materialih > Obdelava aluminija > Struženje as four nested yellow blocks,
   i.e. the entire open branch went yellow.

   So on mobile the hover fill is switched off for the <li> and the highlight is
   attached to the ROW instead - the <a> of an item that carries .bts-open, the
   class our JS sets on exactly the open chain. Result: Rezilno orodje,
   Obdelava po materialih, Obdelava aluminija and Struženje are yellow, their
   children and siblings stay dark.
   ========================================================================== */
@media (max-width: 768px) {

/* 1. no yellow box on the <li> (sticky :hover on ancestors) */
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu .groupmenu-drop .item:hover,
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu .groupmenu-drop .item:focus,
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu .groupmenu-drop .item:active,
.bts-mobilemenu-js .nav-sections .cdz-menu .groupmenu-drop .item:hover,
.bts-mobilemenu-js .nav-sections .cdz-menu .groupmenu-drop .item:focus,
.bts-mobilemenu-js .nav-sections .cdz-menu .groupmenu-drop .item:active {
  background: transparent !important;
}
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu .groupmenu-drop .item:hover > a,
.bts-mobilemenu-js .nav-sections .cdz-menu .groupmenu-drop .item:hover > a {
  color: #ffffff !important;
}

/* 2. the open chain is the highlight, one row per level */
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu li.item.bts-open > a.menu-link,
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu li.item.bts-open > a.groupdrop-title,
.bts-mobilemenu-js .nav-sections .cdz-menu li.item.bts-open > a.menu-link,
.bts-mobilemenu-js .nav-sections .cdz-menu li.item.bts-open > a.groupdrop-title {
  background: var(--bts-yellow, #efd111) !important;
  color: var(--bts-yellow-ink, #1c1a08) !important;
}
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu li.item.bts-open > a.menu-link span,
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu li.item.bts-open > a.groupdrop-title span,
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu li.item.bts-open > a.menu-link:after,
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu li.item.bts-open > a.groupdrop-title:after,
.bts-mobilemenu-js .nav-sections .cdz-menu li.item.bts-open > a.menu-link span,
.bts-mobilemenu-js .nav-sections .cdz-menu li.item.bts-open > a.groupdrop-title span,
.bts-mobilemenu-js .nav-sections .cdz-menu li.item.bts-open > a.menu-link:after,
.bts-mobilemenu-js .nav-sections .cdz-menu li.item.bts-open > a.groupdrop-title:after {
  color: var(--bts-yellow-ink, #1c1a08) !important;
  opacity: 1 !important;
}

/* 3. a plain tap on a row (leaf or not) only gets a soft tint, never a block */
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu li.item:not(.bts-open) > a.menu-link:hover,
.bts-mobilemenu-js #lefmenu-mobile .cdz-menu li.item:not(.bts-open) > a.groupdrop-title:hover,
.bts-mobilemenu-js .nav-sections .cdz-menu li.item:not(.bts-open) > a.menu-link:hover,
.bts-mobilemenu-js .nav-sections .cdz-menu li.item:not(.bts-open) > a.groupdrop-title:hover {
  background: rgba(255, 255, 255, .07) !important;
  color: #ffffff !important;
}

/* 4. the level 0 row follows the same rule, so an open top category is yellow
      even before it is hovered */
.bts-mobilemenu-js #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0.bts-open > a.menu-link,
.bts-mobilemenu-js #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0.bts-open > a.menu-link span {
  background-color: var(--bts-yellow, #efd111) !important;
  color: var(--bts-yellow-ink, #1c1a08) !important;
}
.bts-mobilemenu-js #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0.bts-open > a.menu-link span {
  background: transparent !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 121: MOBILE ONLY - sticky bottom bar (Domov / Košarica /
   Račun-Prijava), styled after the supplied proposal.

   Markup is built by web/js/bts-mobile-bottombar.js and appended to <body>;
   the login state and the cart counter come from the customer sections, so they
   are correct behind the full page cache. <html> carries .bts-has-bottombar
   while the bar exists, which is what reserves the space at the bottom of the
   page so the last row of content is never hidden under it.

   The bar is only visible up to 768px; on desktop it is display: none, and no
   bottom padding is reserved.
   ========================================================================== */
.bts-bottombar {
  display: none;
}

@media (max-width: 768px) {

.bts-bottombar {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background: #1b1c1f;
  border-top: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .28);
}
.bts-bottombar .bts-bb-item {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  color: #cfcfd3 !important;
  text-decoration: none !important;
  border-radius: 10px;
}
.bts-bottombar .bts-bb-item:hover,
.bts-bottombar .bts-bb-item:focus {
  color: #ffffff !important;
  text-decoration: none !important;
}
.bts-bottombar .bts-bb-item.is-active {
  color: var(--bts-yellow, #efd111) !important;
}
.bts-bottombar .bts-bb-ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.bts-bottombar .bts-bb-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}
.bts-bottombar .bts-bb-count {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--bts-yellow, #efd111);
  color: var(--bts-yellow-ink, #1c1a08);
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

/* room for the bar, so nothing is stuck underneath it */
.bts-has-bottombar .page-wrapper,
.bts-has-bottombar .page-footer {
  padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
}
/* the chat bubble sits above the bar, not behind it */
.bts-has-bottombar #tidio-chat iframe,
.bts-has-bottombar .tidio-chat,
.bts-has-bottombar [id*="chat-widget"] {
  bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 122: MOBILE ONLY - the header cart is gone, the bottom bar
   carries the real minicart.

   web/js/bts-mobile-bottombar.js does not copy the cart, it MOVES the whole
   div[data-block="minicart"] out of the header into the bar (and back on
   desktop), so the counter, the dropdown, "Pojdi na košarico", the item list and
   the remove buttons are literally the same widget as before - nothing is
   reimplemented, nothing can drift out of sync.

   Two things have to be re-declared here, because the theme styles the trigger
   through .page-header:
     - the cart glyph (Pe-icon-7-stroke '\e66e') was an absolutely positioned
       53px circle; in the bar it is a normal 24px icon in the current colour;
     - the dropdown panel is anchored to the trigger with top: 100%, which at
       the bottom of the screen would open below the fold, so it now opens
       UPWARDS and is as wide as the viewport allows.
   ========================================================================== */
@media (max-width: 768px) {

/* --- the moved minicart behaves like one of our bar items ------------- */
.bts-bottombar .bts-bb-cart .minicart-wrapper {
  position: static !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
.bts-bottombar .bts-bb-cart .action.showcart {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 24px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
/* the theme's circle becomes a plain glyph */
.bts-bottombar .bts-bb-cart .action.showcart:before {
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 25px !important;
  line-height: 24px !important;
}
/* labels the theme prints inside the trigger are replaced by our own */
.bts-bottombar .bts-bb-cart .action.showcart .text,
.bts-bottombar .bts-bb-cart .action.showcart .price-label,
.bts-bottombar .bts-bb-cart .action.showcart .subtotal {
  display: none !important;
}
/* the counter becomes the same badge as everywhere else in the bar */
.bts-bottombar .bts-bb-cart .action.showcart .counter.qty {
  position: absolute !important;
  top: -7px !important;
  right: -12px !important;
  left: auto !important;
  min-width: 16px !important;
  width: auto !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--bts-yellow, #efd111) !important;
  color: var(--bts-yellow-ink, #1c1a08) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 16px !important;
  text-align: center !important;
}
.bts-bottombar .bts-bb-cart .action.showcart .counter.qty.empty {
  display: none !important;
}
.bts-bottombar .bts-bb-cart .counter-label {
  display: none !important;
}

/* our own fallback link is only for pages without a minicart block */
.bts-bottombar.has-minicart .bts-bb-fallback {
  display: none !important;
}
.bts-bottombar:not(.has-minicart) .bts-bb-slot {
  display: none !important;
}
.bts-bottombar .bts-bb-fallback {
  display: inline-flex !important;
  color: inherit !important;
  text-decoration: none !important;
}

/* --- the dropdown opens upwards, not off the bottom of the screen ----- */
.bts-bottombar .minicart-wrapper .ui-dialog .block-minicart,
.bts-bottombar .minicart-wrapper .block-minicart {
  position: fixed !important;
  top: auto !important;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  left: 8px !important;
  right: 8px !important;
  width: auto !important;
  max-width: none !important;
  max-height: 68vh !important;
  overflow-y: auto !important;
  padding: 16px !important;
  border-radius: 12px !important;
  box-shadow: 0 -8px 26px rgba(0, 0, 0, .3) !important;
}
/* the little arrow of the panel pointed at the header trigger */
.bts-bottombar .minicart-wrapper .block-minicart:before,
.bts-bottombar .minicart-wrapper .block-minicart:after {
  display: none !important;
}

/* --- nothing cart-shaped is left in the header ------------------------ */
.header-wrapper-right .minicart-wrapper:empty,
.page-header .minicart-wrapper:empty {
  display: none !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 124: MOBILE ONLY - the minicart thumbnail is a thumbnail
   again, and the panel is taller.

   Why the picture was huge: knockout renders the minicart image as

       <span class="product-image-container" style="width: 55px">
         <span class="product-image-wrapper" style="padding-bottom: 100%">
           <img class="product-image-photo" style="width: auto; height: auto">

   i.e. the box is sized by the padding-bottom trick and the image is expected to
   fill it. The theme then undoes exactly that:

       .minicart-items .product-image-wrapper { height: auto; padding: 0 !important }
       .minicart-items .product-image-wrapper .product-image-photo { position: static }

   With the padding gone and the photo back in the flow, "width: auto" means the
   image is drawn at its NATURAL size (several hundred px) - the <span> around it
   is inline, so the inline width: 55px cannot hold it back.

   Fixed by sizing the image itself to 64px (with !important, since the inline
   style has to be beaten) and keeping its aspect ratio with object-fit. The
   panel gets more room at the same time: 82vh instead of 68vh, and the item list
   scrolls at 52vh instead of the theme's fixed 300px.
   ========================================================================== */
@media (max-width: 768px) {

/* --- thumbnail ------------------------------------------------------- */
.block-minicart .minicart-items .product-item-photo,
.block-minicart .minicart-items .product-image-container,
.block-minicart .minicart-items .product-image-wrapper {
  display: block !important;
  width: 64px !important;
  min-width: 0 !important;
  max-width: 64px !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.block-minicart .minicart-items .product-image-photo {
  position: static !important;
  width: 64px !important;
  height: auto !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  margin: 0 !important;
}
/* the text next to it takes the rest of the row */
.block-minicart .minicart-items .product-item-details {
  padding-left: 76px !important;
}

/* --- taller panel ---------------------------------------------------- */
.bts-bottombar .minicart-wrapper .ui-dialog .block-minicart,
.bts-bottombar .minicart-wrapper .block-minicart {
  max-height: 82vh !important;
}
.block-minicart .minicart-items-wrapper {
  max-height: 52vh !important;
  padding: 12px 15px !important;
  overflow-y: auto !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 125: MOBILE ONLY - nothing in the minicart can scroll out
   of sight any more.

   Pass 122/124 left TWO scroll areas inside each other: the panel itself
   (max-height 82vh, overflow-y: auto) and Magento's own item list
   (.minicart-items-wrapper). Scrolling the outer one pushed the part that
   matters - the number of items, the subtotal and "Na blagajno", which Magento
   prints ABOVE the item list - off the top, and left an empty white area at the
   bottom (the screenshot).

   Now only the item list scrolls: the panel is overflow: hidden and its height
   follows its content, so the totals and the buttons are always on screen, and
   the list itself is capped at 44vh so there is always room for them.
   ========================================================================== */
@media (max-width: 768px) {

.bts-bottombar .minicart-wrapper .ui-dialog .block-minicart,
.bts-bottombar .minicart-wrapper .block-minicart {
  height: auto !important;
  max-height: 82vh !important;
  overflow: hidden !important;
}
.bts-bottombar .minicart-wrapper .block-minicart #minicart-content-wrapper,
.bts-bottombar .minicart-wrapper .block-minicart .block-content {
  max-height: none !important;
  overflow: visible !important;
}
/* the only scrolling area */
.block-minicart .minicart-items-wrapper {
  max-height: 44vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}
/* totals + checkout button stay put, no stray gap under the panel */
.bts-bottombar .minicart-wrapper .block-minicart .block-content > .actions,
.bts-bottombar .minicart-wrapper .block-minicart .subtotal,
.bts-bottombar .minicart-wrapper .block-minicart .items-total {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}
.bts-bottombar .minicart-wrapper .block-minicart .block-content > .actions:last-child {
  margin-bottom: 4px !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 126: MOBILE ONLY - the cart icon is back, the counter sits
   on its top right.

   Cause: the glyph is not part of the minicart's own styling, it is attached
   through the HEADER selector

       .page-header .minicart-wrapper .action.showcart:before {
           content: '\e66e'; font-family: 'Pe-icon-7-stroke'; ...
       }

   while the plain, header-independent rule prints NOTHING but an old sprite:

       .minicart-wrapper .action.showcart:before {
           content: ''; background-image: url("../images/icon.png"); ...
       }

   Pass 122 moves the real minicart out of .page-header and into the bottom bar,
   so from that moment only the second rule applied - no glyph, and the counter
   badge was the only thing left to see (hence "just a number").

   The glyph is therefore declared here for the moved trigger, in the same
   Pe-icon-7-stroke shape the desktop header uses, and the counter is anchored to
   the icon's top right corner - shown only when the cart is not empty (Magento
   marks an empty counter with .empty).
   ========================================================================== */
@media (max-width: 768px) {

.bts-bottombar .bts-bb-cart .action.showcart {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 27px !important;
  height: 27px !important;
  overflow: visible !important;
}
.bts-bottombar .bts-bb-cart .action.showcart:before {
  content: '\e66e' !important;
  font-family: 'Pe-icon-7-stroke' !important;
  font-style: normal !important;
  font-weight: normal !important;
  speak: none !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  display: block !important;
  position: static !important;
  width: 27px !important;
  height: 27px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  color: inherit !important;
  font-size: 28px !important;
  line-height: 27px !important;
  text-align: center !important;
}

/* the counter: small yellow badge on the icon's top right, and nothing at all
   while the cart is empty */
.bts-bottombar .bts-bb-cart .action.showcart .counter.qty {
  position: absolute !important;
  top: -6px !important;
  right: -10px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 2 !important;
}
.bts-bottombar .bts-bb-cart .action.showcart .counter.qty.empty,
.bts-bottombar .bts-bb-cart .action.showcart .counter.qty:empty {
  display: none !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 127: MOBILE ONLY - the home slideshow goes edge to edge.

   The slider is not a page block, it sits inside the home CMS grid:

       .col-sm-18 > .row > .col-sm-16 > .cdz-slideshow

   Those column widths come from "@media (min-width: 768px)", so from 768px up
   .col-sm-16 is 66.67% OF .col-sm-18 (75%) = about half of the row - which is
   exactly the small, left-aligned slider with white space beside it. Below 768px
   the columns have no width at all, but the slider was still limited by the page
   padding.

   Both cases are handled here for every width up to 991px (phone and small
   tablet): the grid around the slider collapses to a single column, and the
   slider is pulled out to the full viewport width with the "full bleed" trick
   margin-left/right: calc(50% - 50vw), which cancels whatever padding the page
   has without needing to know it. The images then scale with the container, so
   it works at any screen size.

   The order is safe: the CSS is in force before Codazon's owl carousel measures
   the container at DOM ready, so the slides are computed at the full width; a
   later device rotation is handled by owl's own resize handling.
   ========================================================================== */
@media (max-width: 991px) {

/* 1. the CMS grid around the slider becomes one column (page content only -
      .page-main keeps the header's own grid out of this) */
.cms-index-index .page-main .col-sm-18,
.cms-index-index .page-main .col-sm-16,
.cms-index-index .page-main .col-sm-8 {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* 2. full bleed */
.cms-index-index .cdz-slideshow {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
}
.cms-index-index .cdz-slideshow .slider-wrapper,
.cms-index-index .cdz-slideshow .owl-carousel,
.cms-index-index .cdz-slideshow .owl-stage-outer {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.cms-index-index .cdz-slideshow .slider-item,
.cms-index-index .cdz-slideshow .owl-item {
  width: auto;
}
.cms-index-index .cdz-slideshow .owl-item img,
.cms-index-index .cdz-slideshow .slider-item img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* 3. the dots sit just inside the picture */
.cms-index-index .cdz-slideshow .owl-dots {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 8px !important;
  margin: 0 !important;
  text-align: center !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 128: MOBILE ONLY - the bottom header strip
   (.header-wrapper-bottom) is gone.

   That block is NOT only a strip: it is also the host of the two panels the
   mobile header needs, so it may not simply be display:none-d.

     .header-wrapper-bottom
       .col-sm-6  > .header-bottom-left  > .cdz-main-menu.left-navigation
                    > nav#left-nav.navigation.page-footer
                        > div#lefmenu-mobile.showhide      <- CATEGORIES panel
                          (theme: .page-footer .showhide{height:0;visibility:
                           hidden;opacity:0} and .active reopens it - it is an
                           in-flow accordion, so an ancestor display:none would
                           permanently kill the "hamburger" icon we moved next
                           to the logo in pass 119)
                        > nav.navigation > ul#ui-id-4      <- empty leftover
       .col-sm-18 > .header-bottom-center > .header-main-menu
                    > .nav-sections                        <- the off-canvas
                          drawer (theme: position:fixed; left:calc(-1*(100% -
                           54px))), so it takes no room here, but it too would
                           be killed by an ancestor display:none

   Therefore everything that PAINTS or takes space is removed, and the two
   panels are left untouched: the wrapper stays in the flow with a zero
   footprint (the closed accordion is height:0), and reopens on its own the
   moment the categories panel gets .active.
   ========================================================================== */
@media (max-width: 768px) {

/* 1. the dark #373737 plate and every bit of box space around it */
.page-header .header-wrapper-bottom,
.header-wrapper-content .header-wrapper-bottom,
.page-header .header-wrapper-bottom .header-wrapper-bottom-content {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
.page-header .header-wrapper-bottom .header.content {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
.header-wrapper-bottom .header.content > .row {
  margin: 0 !important;
}
.header-wrapper-bottom .header-wrapper-bottom-content > [class*="col-sm-"],
.header-wrapper-bottom .header-bottom-left,
.header-wrapper-bottom .header-bottom-center,
.header-wrapper-bottom .header-main-menu,
.header-wrapper-bottom .cdz-main-menu.left-navigation,
.header-wrapper-bottom .cdz-main-menu.left-navigation > .widget,
.header-wrapper-bottom nav#left-nav {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
}

/* 2. the empty <nav class="navigation"><ul id="ui-id-4"> shell that the
      megamenu widget always prints beside the real menu - the theme forces it
      visible with .left-navigation .navigation{display:block !important} */
.header-wrapper-bottom nav#left-nav > nav.navigation {
  display: none !important;
}

/* 3. the old in-strip "VSE KATEGORIJE" title; the real toggle was moved into
      the logo row by bts-mobile-menu.js (pass 119), and if that move has not
      run yet this keeps the duplicate out of the way */
.header-wrapper-bottom .menu-title[data-cdz-toggle="#lefmenu-mobile"] {
  display: none !important;
}

/* 4. the categories panel keeps its own dark plate when it opens (pass 60
      already paints #lefmenu-mobile), so losing the wrapper background does
      not make it transparent */
.header-wrapper-bottom #lefmenu-mobile.active {
  min-height: 0 !important;
}

}


/* ==========================================================================
   BTS REVAMP — pass 130: DESKTOP - the minicart panel is bigger and the
   picture/text proportion is fixed.

   Same root cause as pass 124 fixed for mobile, still in force above 768px.
   Knockout renders the row as

       <a class="product-item-photo">            <- theme: float: left, NO width
         <span class="product-image-container" style="width: 55px">
           <span class="product-image-wrapper" style="padding-bottom: 100%">
             <img class="product-image-photo" style="width: auto; height: auto">

   and the theme then removes exactly the box that was supposed to size it:

       .minicart-items .product-image-wrapper { height: auto; padding: 0 !important }
       .minicart-items .product-image-wrapper .product-image-photo { position: static }

   The photo is back in the flow at its NATURAL size (several hundred px), the
   floated <a> has no width to hold it, so it takes the whole panel and the name
   is pushed underneath it - while .minicart-items .product-item-details still
   reserves padding-left: 120px for a thumbnail that is no longer there. That is
   the screenshot: one giant image, tiny grey name below it, one of four items
   visible.

   Fixed by giving the float a real width (88px), sizing the image itself with
   !important (the inline style has to be beaten) and keeping its aspect ratio
   with object-fit. The panel grows from the theme's 340px to 420px and the item
   list from 300px to 420px, so several rows are readable at once; only the list
   scrolls, the totals and "Nadaljujte na plačilo" stay put.
   ========================================================================== */
@media (min-width: 769px) {

/* --- 1. a roomier panel ---------------------------------------------- */
.page-header .minicart-wrapper .ui-dialog .block-minicart,
.minicart-wrapper .ui-dialog .block-minicart,
.minicart-wrapper .block-minicart {
  width: 420px !important;
  max-width: calc(100vw - 40px) !important;
}

/* --- 2. the thumbnail is a thumbnail again --------------------------- */
.block-minicart .minicart-items .product > .product-item-photo,
.block-minicart .minicart-items .product > .product-image-container {
  width: 88px !important;
  min-width: 0 !important;
  max-width: 88px !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.block-minicart .minicart-items .product-image-container,
.block-minicart .minicart-items .product-image-wrapper {
  display: block !important;
  width: 88px !important;
  min-width: 0 !important;
  max-width: 88px !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.block-minicart .minicart-items .product-image-photo {
  position: static !important;
  display: block !important;
  width: 88px !important;
  height: auto !important;
  max-width: 88px !important;
  max-height: 88px !important;
  object-fit: contain !important;
  margin: 0 !important;
}

/* --- 3. the text takes the rest of the row -------------------------- */
.block-minicart .minicart-items .product-item-details {
  padding-left: 104px !important;
  min-height: 88px;
}
/* the floated photo must not bleed into the next row */
.block-minicart .minicart-items .product {
  overflow: hidden;
}
.block-minicart .minicart-items li.product-item {
  padding: 14px 0 !important;
  border-bottom: 1px solid #ececec;
}
.block-minicart .minicart-items li.product-item:first-child {
  padding-top: 0 !important;
}
.block-minicart .minicart-items li.product-item:last-child {
  border-bottom: 0;
  padding-bottom: 0 !important;
}

/* --- 4. readable name, then price, then quantity -------------------- */
.block-minicart .minicart-items .product-item-name {
  margin: 0 0 8px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}
.block-minicart .minicart-items .product-item-name > a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #282828 !important;
}
.block-minicart .minicart-items .product-item-pricing {
  font-size: 12.5px;
}
.block-minicart .minicart-items .product-item-details .price {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #282828 !important;
}
.block-minicart .minicart-items .product-item-pricing .label {
  width: auto !important;
  margin-right: 6px;
}
/* edit / remove icons to the right of the row */
.block-minicart .minicart-items .product-item-details .actions {
  float: right;
  margin-top: -2px;
}

/* --- 5. only the item list scrolls ---------------------------------- */
.block-minicart .minicart-items-wrapper {
  max-height: 420px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 15px 20px !important;
}

}


/* ==========================================================================
   BTS REVAMP - pass 132: BRAND PAGE - the logo is a logo again.

   /{brand} (here /3m) is an Amasty "Shop by Brand" page: it reuses the category
   layout, so this theme's

       <move element="category.view.container" destination="content" before="-"/>

   drops the brand image straight into the top of the product list, and
   Amasty_ShopbyBrand::brand/image.phtml prints a bare

       <div class="category-image"><img class="image" src="...">

   with no width, no height, no resize. The stored file is the full-size logo
   (akv300090.jpg = 892x469 px), Magento only caps it with max-width: 100%, so
   it filled the whole content column and pushed the products a screen down.

   Treated as a logo instead: intrinsic ratio kept, height capped, left
   aligned. Scoped to the brand handle (body.ambrand-index-index) so category
   banner images keep rendering the way they do now.
   ========================================================================== */
.ambrand-index-index .category-view {
  margin: 0 0 16px !important;
}
.ambrand-index-index .category-view .category-image {
  margin: 0 !important;
  text-align: left;
}
.ambrand-index-index .category-view .category-image .image {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  max-width: 240px !important;
  max-height: 72px !important;
  object-fit: contain;
}

@media (max-width: 768px) {
  .ambrand-index-index .category-view .category-image .image {
    max-width: 160px !important;
    max-height: 52px !important;
  }
}


/* ==========================================================================
   BTS REVAMP - pass 133: the brand slideshow now reads as the same component
   family as "Priljubljene kategorije" (pass 58).

   What it looked like: Amasty's own styling
   (Amasty/ShopbyBrand/.../components/_brands-slider.less) puts the strip in a
   #fbfbfb box with

       .ambrands-slider { padding: 1.25rem 40px 4rem 40px; }
       .ambrands-splide-brand { margin-bottom: 1.875rem; }

   i.e. 64 px + 30 px of dead space under a 130 px row of logos, and paints the
   Splide arrows as 40 px round @color-blue2 (#1979c2) circles - the only blue
   in the whole design.

   What it looks like now: one card per brand, same geometry as the category
   shortcuts (16 px radius, 1 px border, hover lifts 2 px and the border turns
   BTS yellow, 14 px gutters, 6 per row = the same rhythm as the six category
   cards above), and the arrows become the dark rounded squares used elsewhere.

   The one deliberate difference: the category cards are dark (#26262a), these
   are white. The brand logos are JPEGs with a baked-in white background, so on
   a dark card every one of them would show as a white rectangle. Same shape,
   same border, same hover, light fill.

   The heading above the strip is markup in CMS page 22 ("Prva stran") and
   reuses .bts-cat-shortcuts-title, so both headings are literally the same
   style; rename the text there if "Blagovne znamke" is not the wording you
   want.
   ========================================================================== */

/* heading row, same as .bts-cat-shortcuts-head */
.bts-brand-strip-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
}

/* --- 1. drop the grey box and the dead space ------------------------- */
.am-widget-brand-slider {
  margin: 0 0 26px;
}
.am-widget-brand-slider .ambrands-slider-container {
  background: transparent !important;
  padding: 0 !important;
  /* pre-init placeholder height: keep it equal to the card so the strip does
     not jump when Splide takes over (inline widget style sets 130px) */
  --am-brand-slider-height: 100px !important;
}
.am-widget-brand-slider .ambrands-slider-container .splide {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 46px !important;   /* the arrows live in this gutter */
}
.am-widget-brand-slider .ambrands-slider-container .ambrands-slider {
  margin-top: 0 !important;
  padding: 0 !important;
}
.am-widget-brand-slider .ambrands-slider-container .ambrands-slider.ambrands-slider-hidden {
  height: 100px !important;
}

/* --- 2. one card per brand ------------------------------------------- */
.am-widget-brand-slider .brand-splide-slide {
  height: auto !important;
  padding: 0 7px !important;    /* = 14px gutter, like the category grid */
  box-sizing: border-box !important;
}
.am-widget-brand-slider .ambrands-slide-link {
  height: 100px !important;
  padding: 12px 14px !important;
  background: #fff;
  border: 1px solid #e4e4e8;
  border-radius: var(--bts-radius-lg, 16px);
  box-sizing: border-box;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.am-widget-brand-slider .ambrands-slide-link:hover,
.am-widget-brand-slider .ambrands-slide-link:focus {
  border-color: var(--bts-yellow, #efd111);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
  text-decoration: none !important;
}
.am-widget-brand-slider .ambrands-splide-brand {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: center !important;
}
.am-widget-brand-slider .ambrands-image-block {
  max-width: 100% !important;
  max-height: 100% !important;
}
.am-widget-brand-slider .ambrands-image {
  width: auto !important;
  height: auto !important;
  max-width: 130px !important;
  max-height: 48px !important;
  object-fit: contain;
}

/* --- 3. arrows in the house style ------------------------------------ */
.am-widget-brand-slider .am-brand-splide-arrow {
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  background: #26262a !important;
  border-radius: 10px !important;
  opacity: 1 !important;
}
.am-widget-brand-slider .am-brand-splide-arrow svg {
  width: 14px !important;
  height: 14px !important;
  fill: #fff !important;
}
.am-widget-brand-slider .am-brand-splide-arrow:hover {
  background: var(--bts-yellow, #efd111) !important;
}
.am-widget-brand-slider .am-brand-splide-arrow:hover svg {
  fill: #26262a !important;
}
.am-widget-brand-slider .am-brand-splide-arrow-prev {
  left: 0 !important;
}
.am-widget-brand-slider .am-brand-splide-arrow-next {
  right: 0 !important;
}

/* --- 4. mobile -------------------------------------------------------- */
@media (max-width: 768px) {
  .am-widget-brand-slider .ambrands-slider-container {
    --am-brand-slider-height: 84px !important;
  }
  .am-widget-brand-slider .ambrands-slider-container .ambrands-slider.ambrands-slider-hidden {
    height: 84px !important;
  }
  .am-widget-brand-slider .ambrands-slider-container .splide {
    padding: 0 38px !important;
  }
  .am-widget-brand-slider .ambrands-slide-link {
    height: 84px !important;
    padding: 10px 12px !important;
  }
  .am-widget-brand-slider .ambrands-image {
    max-height: 40px !important;
  }
  .am-widget-brand-slider .am-brand-splide-arrow {
    width: 32px !important;
    height: 32px !important;
  }
}

/* ==========================================================================
   BTS REVAMP - pass 136: DESKTOP - the home slideshow is centred on the page
   and capped at the real width of its own pictures.

   The same grid as in pass 127, this time from the desktop side. The home
   page CMS block ("fastest-fdl-main-content-top-slideshow", one per store
   view) builds

       .col-sm-18 > .row > .col-sm-16 > .cdz-slideshow   (the big slider)
                          + .col-sm-8                    (small side banners)

   From 992px up those columns are floated, so the slider keeps its 66.67% and
   sticks to the left edge of the content column. The column beside it holds
   the "home-slideshow-blok-*" widgets, and every one of them is is_active = 0
   in cdz_slideshow, so it renders as a whitespace-only block - which is why
   the slider looked pushed against the left border with a wide empty strip on
   its right.

   Two things are needed, and the first attempt only did half of it:

   1. that column has to leave the row. It carries an inline
      style="display: flex", and an inline style beats a plain stylesheet
      rule, so display:none only bites when it is marked !important. Without
      that the column kept its third of the row and the slider stayed left.
   2. the slider then spans the full content column, so it is capped at 880px
      and centred with automatic margins. 880px is not a guess: the slideshow
      pictures really are 880x469 (both the originals under
      pub/media/codazon/slideshow/ and the cache/880x469 copies), so anything
      wider would be scaled up and go soft.

   The layout heals itself: the ":has(*)" rules hand the row back its two
   columns the moment a side banner is switched on again, so there is nothing
   here that has to be undone later. In a browser without :has() the column
   simply stays hidden - which is what the data says it should be today.

   Below 992px pass 127 is in charge (slider goes full bleed) and none of this
   applies.
   ========================================================================== */
@media (min-width: 992px) {

/* --- 1. the empty banner column stops reserving a third of the row ----- */
.cms-index-index .page-main .col-sm-18 > .row:first-child > .col-sm-8 {
  display: none !important;
}
.cms-index-index .page-main .col-sm-18 > .row:first-child > .col-sm-8:has(*) {
  display: flex !important;
}

/* --- 2. the slider column takes the row, the slider itself is centred
          and never wider than its 880px source images -------------------- */
.cms-index-index .page-main .col-sm-18 > .row:first-child > .col-sm-16 {
  width: 100%;
}
.cms-index-index .page-main .col-sm-18 > .row:first-child > .col-sm-16 > .cdz-slideshow {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* --- 3. ... unless the side banners come back, then it is 2/3 again ---- */
.cms-index-index .page-main .col-sm-18 > .row:first-child > .col-sm-16:has(+ .col-sm-8 > *) {
  width: 66.66667%;
}
.cms-index-index .page-main .col-sm-18 > .row:first-child > .col-sm-16:has(+ .col-sm-8 > *) > .cdz-slideshow {
  max-width: none;
}

/* --- 4. the whole page width, not the left three quarters of it -------
   The outer row of the slideshow block is

       .slideshow-wrapper > .row > .col-sm-6   (category column, hidden in
                                                pass 56)
                                 + .col-sm-18  (everything else)

   bts-savings.js marks that row .bts-cats-collapsed once the category
   column is really gone, and pass 57 then pinned .col-sm-18 to its original
   75%. That leaves a quarter of the page empty on the right, so a slider
   centred inside .col-sm-18 still sits left of the middle of the page -
   measured on the screenshot: 94px of air on its left, 456px on its right.

   Letting that column use the full width moves the centre of .col-sm-18 onto
   the centre of the page, and the 880px slider lands in the middle, in line
   with "Priljubljene kategorije" and "Blagovne znamke" below it. Only the
   collapsed row is touched, i.e. only when the category column has really
   been taken out; if it ever comes back, pass 57 keeps the 75% as before.
   The second row inside .col-sm-18 holds only inactive
   home-slideshow-blok-* widgets, so nothing else changes width. ---------- */
.cms-index-index .page-main .slideshow-wrapper > .row.bts-cats-collapsed > .col-sm-18 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 137: MOBILE ONLY - the promo buttons sit inside the
   categories panel.

   web/js/bts-menu-promo.js moves the header's promo menu

       .header-bottom-center > ... > .cdz-main-menu
           (Super promocije / Akcijska ponudba / Promo katalogi / Katalogi /
            Teh. pomocnik / FORMAT KATALOG)

   into #lefmenu-mobile, wrapped in .bts-menu-promo, as the panel's first
   child. On mobile that menu was otherwise unreachable: it lives in
   .nav-sections, the theme's off-canvas drawer, and the drawer's own toggle
   is not on screen in this header.

   So tapping the hamburger next to the logo now opens: the promo buttons
   first, the category tree below them - which is what was asked for.

   The menu keeps its own markup (it is moved, not rebuilt), so everything
   below level 0 is already handled by pass 116/117: the sub-lists of
   "Promo katalogi" and "Katalogi" are closed until the row is tapped. Only
   the six top rows are restyled here, into two columns of buttons, so they
   read as shortcuts and not as another set of categories.

   Everything is scoped to .bts-menu-promo, i.e. to the wrapper the script
   creates: if the script does not load, none of this applies and the header
   stays exactly as it was.
   ========================================================================== */
@media (max-width: 768px) {

/* --- 1. the block itself --------------------------------------------- */
.bts-menu-promo {
  padding: 10px 10px 12px !important;
  background: #373737 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
  box-sizing: border-box !important;
}
.bts-menu-promo .cdz-main-menu,
.bts-menu-promo .cdz-menu,
.bts-menu-promo .cdz-menu > ul.groupmenu {
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-height: 0 !important;
  float: none !important;
  position: static !important;
}

/* --- 2. two columns of buttons --------------------------------------- */
.bts-menu-promo .cdz-menu > ul.groupmenu {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
}
.bts-menu-promo .cdz-menu > ul.groupmenu > li.item.level0 {
  flex: 1 1 calc(50% - 4px) !important;
  max-width: calc(50% - 4px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  float: none !important;
  position: relative !important;
}
/* an open branch needs the whole row for its list */
.bts-menu-promo .cdz-menu > ul.groupmenu > li.item.level0.bts-open,
.bts-menu-promo .cdz-menu > ul.groupmenu > li.item.level0.open {
  flex-basis: 100% !important;
  max-width: 100% !important;
}

/* --- 3. the button ---------------------------------------------------- */
.bts-menu-promo .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 46px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  background: #26262a !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  color: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: normal !important;
}
.bts-menu-promo .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link span {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}
/* room for the caret pass 116 draws on a row that has children */
.bts-menu-promo .cdz-menu > ul.groupmenu > li.item.level0.parent > a.menu-link {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-right: 30px !important;
}
.bts-menu-promo .cdz-menu > ul.groupmenu > li.item.level0.parent > a.menu-link:after {
  right: 10px !important;
  font-size: 14px !important;
}
.bts-menu-promo .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link:hover,
.bts-menu-promo .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link:active,
.bts-menu-promo .cdz-menu > ul.groupmenu > li.item.level0.bts-open > a.menu-link,
.bts-menu-promo .cdz-menu > ul.groupmenu > li.item.level0.open > a.menu-link {
  background: #303036 !important;
  border-color: var(--bts-yellow, #efd111) !important;
  color: var(--bts-yellow, #efd111) !important;
}
/* the promo menu carries no pictures - an empty icon cell only adds space */
.bts-menu-promo .cdz-menu .menu-icon:empty {
  display: none !important;
}

/* --- 4. an opened list, one step in --------------------------------- */
.bts-menu-promo .cdz-menu li.item.bts-open > .groupmenu-drop,
.bts-menu-promo .cdz-menu li.item.open > .groupmenu-drop {
  margin: 6px 0 0 !important;
  padding: 4px 0 4px 12px !important;
  background: rgba(0, 0, 0, .20) !important;
  border-radius: 10px !important;
}
.bts-menu-promo .cdz-menu .groupmenu-drop .item > a.menu-link,
.bts-menu-promo .cdz-menu .groupmenu-drop .item > a.groupdrop-title {
  color: #ffffff !important;
  font-size: 12.5px !important;
  text-transform: none !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 138: MOBILE ONLY - the categories panel takes the whole
   screen width.

   The theme loads its grid from styles-l.css with

       media="screen and (min-width: 768px)"

   while every mobile rule here is written as "max-width: 768px". At exactly
   768px - the width this store is being checked at - BOTH are in force: the
   bottom header row is still a real 6/18 grid, so .col-sm-6 keeps its 25%
   and everything inside it (nav#left-nav > #lefmenu-mobile, and since pass
   137 the promo buttons too) is squeezed into a quarter of the screen.

   Pass 128 already stripped the padding, margins and background off those
   columns for mobile but left their widths alone, so this adds the missing
   half: on mobile the two columns are full width and stacked, which is what
   they already are below 768px, where the grid does not apply at all.

   With the panel full width the promo buttons get real room, so from 560px
   up the six of them are laid out three to a row instead of two.
   ========================================================================== */
@media (max-width: 768px) {

.header-wrapper-bottom .header-wrapper-bottom-content > [class*="col-sm-"],
.header-wrapper-bottom .header-bottom-left,
.header-wrapper-bottom .cdz-main-menu.left-navigation,
.header-wrapper-bottom .cdz-main-menu.left-navigation > .widget,
.header-wrapper-bottom nav#left-nav,
.header-wrapper-bottom #lefmenu-mobile {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  box-sizing: border-box !important;
}

}

@media (min-width: 560px) and (max-width: 768px) {

.bts-menu-promo .cdz-menu > ul.groupmenu > li.item.level0 {
  flex-basis: calc(33.3333% - 6px) !important;
  max-width: calc(33.3333% - 6px) !important;
}
.bts-menu-promo .cdz-menu > ul.groupmenu > li.item.level0.bts-open,
.bts-menu-promo .cdz-menu > ul.groupmenu > li.item.level0.open {
  flex-basis: 100% !important;
  max-width: 100% !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 141: the qty stepper on the product page loses its outer
   frame.

   The box around

       .field.qty > .control > .qty-minus + .qty-input + .qty-plus

   comes from pass 2, which styles ".field.qty .control" for every qty stepper
   in the shop - the product page and the product cards alike. Only the product
   page is meant to lose the line, so the rule is switched off here for the
   stepper inside the add-to-cart form and nowhere else; the cards keep theirs.

   Only the outer border goes. The rounding, the inline-flex row and the inner
   parts stay as they are - the input already carries "border: none" from
   pass 2, and the -/+ buttons never had one.
   ========================================================================== */
.product-info-main .product-add-form .box-tocart .field.qty > .control {
  border: 0 !important;
}

/* ==========================================================================
   BTS REVAMP - pass 142: the qty stepper on the product page becomes a real
   control.

       .field.qty > .control > .qty-minus + .qty-input(input#qty) + .qty-plus

   Pass 141 took the frame off and that left three loose parts floating on the
   page. What actually made it look poor, though, was never the frame:

   1. the field is <input type="number">, and no rule in the shop ever turned
      off the browser's own spin buttons - so next to the "-" and "+" that do
      the same job there was a second, tiny pair of arrows, and in Firefox they
      only appear on hover, which made the width jump;
   2. the theme gives every input[type=number] "height: 32px; width: 100%",
      while pass 2 sizes the -/+ buttons 36x36 - so the number sat 4px shorter
      than the buttons beside it.

   Both are fixed here, and the three parts are put back together as one
   segmented control: a light tray with the two buttons as white keys and the
   number between them, 44px high, sized to its content. Hover paints a key in
   the house yellow, the pressed key sinks by a pixel, and the input keeps a
   visible focus ring for keyboard use.

   Scoped to the add-to-cart form on the product page, exactly like pass 141,
   so the steppers on the product cards keep the look they have. The one thing
   done for every stepper in the shop is hiding the native spin buttons - with
   a "-" and a "+" next to them they are redundant everywhere.
   ========================================================================== */

/* --- 1. no native spin buttons, anywhere there is a -/+ pair ---------- */
.field.qty .control input.qty::-webkit-outer-spin-button,
.field.qty .control input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.field.qty .control input.qty {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* --- 2. the tray ------------------------------------------------------ */
.product-info-main .product-add-form .box-tocart .field.qty > .control {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  width: auto !important;
  padding: 3px !important;
  background: #f2f2f4 !important;
  border: 0 !important;
  border-radius: 12px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* --- 3. the two keys -------------------------------------------------- */
.product-info-main .product-add-form .box-tocart .field.qty > .control .qty-minus,
.product-info-main .product-add-form .box-tocart .field.qty > .control .qty-plus {
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
}
.product-info-main .product-add-form .box-tocart .field.qty > .control a.btn-qty {
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
  border-radius: 9px !important;
  box-sizing: border-box !important;
  color: var(--bts-ink, #26262a) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  user-select: none !important;
  transition: background-color .15s ease, color .15s ease, transform .08s ease;
}
.product-info-main .product-add-form .box-tocart .field.qty > .control a.btn-qty:hover,
.product-info-main .product-add-form .box-tocart .field.qty > .control a.btn-qty:focus {
  background: var(--bts-yellow, #efd111) !important;
  border-color: var(--bts-yellow, #efd111) !important;
  color: var(--bts-yellow-ink, #1c1a08) !important;
}
.product-info-main .product-add-form .box-tocart .field.qty > .control a.btn-qty:active {
  transform: translateY(1px);
}

/* --- 4. the number ---------------------------------------------------- */
.product-info-main .product-add-form .box-tocart .field.qty > .control .qty-input {
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
}
.product-info-main .product-add-form .box-tocart .field.qty > .control input.qty {
  width: 62px !important;
  height: 38px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  color: var(--bts-ink, #26262a) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 38px !important;
  text-align: center !important;
}
.product-info-main .product-add-form .box-tocart .field.qty > .control input.qty:focus {
  background: #ffffff !important;
  outline: 0 !important;
  box-shadow: 0 0 0 2px var(--bts-yellow, #efd111) !important;
}

/* --- 5. the label above it ------------------------------------------- */
.product-info-main .product-add-form .box-tocart .field.qty > .label {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  opacity: .75;
}

/* ==========================================================================
   BTS REVAMP - pass 143: the product page stops showing empty rows and
   messages that carry no information.

   1. EMPTY BLOCKS
   Between the item number and the price the page prints a fixed set of
   containers that the AJAX of Fdl_Custom/js/product-detail-change.js fills in
   later. Before a variant is chosen - and on a simple product that has no
   supplier stock, no keywords and no substitutes - they are rendered empty and
   every one of them still carries its margin:

       .product-keyword-container > .product-keyword-wrapper > <span></span>
       #sub-wrapper
       .stock    > <span></span>
       .supstock > <span></span>

   They are folded away while they are really empty and come back on their own
   the moment the AJAX puts something in them, so nothing has to be undone when
   a variant is picked. The float clearer above them keeps clearing but stops
   taking a line of height.

   2. "ADD TO ..." LINKS WAIT FOR A VARIANT
   Since pass 139 the main button appears only once a dimension is chosen. The
   two links beside it did not, and "Add to myprojects" answered a click with
   alert('Najprej je potrebno izbrati dimenzijo.'). They now follow the same
   rule: the template marks the row .bts-needs-variant on a configurable, and
   product-detail-change.js takes the class off when a variant answers.

   The row is laid out from here instead of from an inline style, because
   jQuery .show() (which that same file calls) would otherwise overwrite an
   inline "display: flex" with "display: block" and stack the two links.
   ========================================================================== */

/* --- 1. empty blocks fold away --------------------------------------- */
.product-info-main .product-keyword-container:has(> .product-keyword-wrapper > span:empty),
.product-info-main .product-info-stock-sku .stock:has(> span:empty),
.product-info-main .product-info-stock-sku .supstock:has(> span:empty),
.product-info-main .product-icon-container > .icon-container:not(:has(*)),
.product-info-main .product-icon-container > .pdp-icon-coating:not(:has(*)),
.product-info-main #sub-wrapper:not(:has(*)) {
  display: none !important;
}
/* the clearer still clears, it just stops being a blank line */
.product-info-main .product-info-stock-sku > div[style*="clear"] {
  height: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* --- 3. the "add to ..." row ----------------------------------------- */
.product-info-main .box-tocart .product-addto-links.bts-addto-links {
  display: flex !important;
  gap: 12px;
  margin-bottom: 30px;
}
.product-info-main .box-tocart .product-addto-links.bts-addto-links.bts-needs-variant {
  display: none !important;
}

/* ==========================================================================
   BTS REVAMP - pass 144: the shop's own CSS comes out of the admin field.

   "Content > Design > Configuration > HTML Head > Scripts and Style Sheets"
   held one hand written block per store view - 21 to 47 KB each, 169 distinct
   CSS rules over the five of them, inline in the <head> of every single page
   and outside the repository. A good part of it was the same rule copied five
   times, and it is exactly that part which is moved here: 44 rules that

     * every one of the five store views had, and
     * had byte for byte identical, and
     * whose selectors are not used by any rule that stays behind, so moving
       them out of the <head> (where they came after custom.css) to the end of
       custom.css cannot change which rule wins.

   Nothing else was touched: the per-store variants, every <script> block and
   the Google tag stay in the admin field, because those genuinely differ from
   store view to store view and picking a winner is a decision about how the
   shops should look, not a refactoring.

   The rules are kept in the order and the wording store 3 (sl_SI) had them in,
   so a diff against the old field is readable.
   ========================================================================== */

.slick-slide.slick-active{

transform: scale(65%) !important;

}

.fotorama__stage{

height: 450px !important;

}

.super-attribute-selected {

  position: relative;

  padding-right: 20px; /* Add space for the arrow */

  cursor: pointer;

}

.super-attribute-selected::after {

  content: '▼'; /* Unicode down arrow */

  position: absolute;

  right: 8px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 12px;

  color: #555;

  pointer-events: none;

}

.product-item-description{

font-size: 0px !important;

}

.product-addto-links{

clear: none !important;

}

.block-static-block{

margin-bottom: 0px !important;

}

.custom-megamenu-icon-item {
   padding-left: 5px !important;
   padding-right: 5px !important;
   padding-top: 5px !important;
   padding-bottom: 5px !important;
 }

.custom-megamenu-icon-item a {
   display: table-row;
 }

.custom-megamenu-icon-item a i {
   display: table-cell !important;
   vertical-align: middle !important;
 }

.custom-megamenu-icon-item a span {
   display: table-cell !important;
   vertical-align: middle !important;
   padding-left: 10px; !important;
 }

.custom-megamenu-iconless-item {
   padding-left: 15px !important;
   padding-right: 8px !important;
   padding-top: 8px !important;
   padding-bottom: 8px !important;
 }

.amsearch-item.product-item {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    transition: .3s ease;
    position: relative;
    overflow: hidden;           /* keep image inside */
    padding: 10px;
    background: #fff;
}

.amsearch-item.product-item .bts-configurable-badge {
    position: relative;
    top: 7px;
    left: 19px;
    transform: scale(1.3);
    transform-origin: top right;
    background: #efd111;
    color: #000;
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 999;
    cursor: pointer;
}

.amsearch-item.product-item.js-configurable-product {
    border: 3px solid #efd111 !important;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(239,207,56,0.3) !important;
}

.bts-configurable-badge:hover {
    color: #000 !important;        /* keep text black */
    background: #efd111 !important; /* keep background yellow */
    text-decoration: none !important;
}

.products-grid .product-item .product-item-info {
    border: 3px solid transparent;
    box-shadow: 0 2px 12px rgba(239,207,56,0.25);
    border-radius: 20px;
    padding-top: 10px;
    padding-bottom: 15px;
    position: relative;
    transition: 0.2s ease;
    /* overflow: visible;  <-- this is what currently lets the badge escape */
    overflow: hidden;          /* keep everything inside the border */
    margin-top: 10px;
}

.products-grid .product-item .product-item-info .bts-configurable-badge:hover {
    background: #efd111 !important;       /* invert background */
    color: #9796b6 !important;         /* invert text color */
    cursor: pointer !important;        /* optional: makes it feel clickable */
    font-weight: 700;

}

.products-grid .product-item .product-item-info img.product-image-photo {
        max-height: 200px;
        width: auto;
        object-fit: contain;
        display: block;
    }

.product-item-no {
    color: #1d2eab  !important;
    font-size: 23px  !important;
    font-weight: 700  !important;
}

.price-box.price-final_price .price-label {
    color: #000 !important;         /* change color */
    font-size: 16px !important;     /* change size */
    font-weight: 601 !important;  
    text-transform: uppercase !important;
}

.price-box.price-final_price .price {
color: #1d2eab !important;
    font-size: 24px !important;
    font-weight: 700 !important;
}

.product-item-details .icons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    max-width: 100%;
}

.products-grid .product-item-info .product-item-details {
height: 331px !important;
}

.price-wrapper[data-price-type="oldPrice"] .price {
    line-height: 1;
    text-decoration-thickness: 3px;
    text-decoration-skip-ink: none;
}

.old-price .price-wrapper {
    text-decoration: none !important;
}

.old-price {
    position: relative;
    display: inline-block; /* important */
}

.product-item-details {
    display: flex !important;
    flex-direction: column !important;
}

.product-item-details .price-box {
    order: 2 !important;
}

.product-item-details .name-variant {
    order: 1 !important;
}

.product-item-details .icons {
    order: 3 !important;
}

.product-item-details .product-item-inner {
    order: 3 !important;
}

.product-item-info {
    position: relative !important;
}

.price-label{
    padding-right: 6px !important;
    position: relative !important;
}

.format-katalog {
    color: #efd111 !important;
    font-weight: 500;
    font-style: italic;
}

.menu-link:hover .format-katalog{
    color: black !important;
}

@media only screen and (max-width: 767px) {

    input[type="text"][name="q"]::placeholder,
    input[type="search"][name="q"]::placeholder,
    input[name="q"]::placeholder {
        color: black !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        opacity: 1 !important;
        text-transform: uppercase !important;
    }
}

.amsearch-results .amsearch-item-container:not(.recent_searches) .amsearch-item .item-name {
    text-decoration: underline;
    cursor: pointer;
    color: black !important;
    font-size: 13px;
    font-weight: 670; 
    /* text-decoration: none; */
    text-transform: uppercase;
}

.slick-slide {
    width: 280px !important;   /* increase to whatever size you want */
}

.slick-slide .item {
    transform: scale(1.15);    /* makes the whole item larger */
    transform-origin: center;
}

.block-title{
background-color: white !important;
}

/* ==========================================================================
   BTS REVAMP - pass 146: DESKTOP - the "VSE KATEGORIJE" panel stays on the
   screen.

       nav#left-nav > #lefmenu-mobile > .cdz-menu.cdz-vertical-menu
         > ul.groupmenu > li.item.level0        <- 14 categories
             > ul.groupmenu-drop                <- the subcategories, opened
                 > li.item.level1                  on hover, anchored to the
                     > ul.cat-tree.groupmenu-drop  panel because an older rule
                                                   sets li.item{position:initial}

   Neither column had a height limit, so with 14 categories on the left and up
   to 15 subcategories on the right both ran off the bottom of the window and
   the rows down there could not be reached at all - the panel lives in the
   header, which does not scroll with the page.

   Three things are done, in this order of effect:

   1. the rows get tighter (10px instead of 17px of padding, a smaller
      thumbnail, line-height 1.25), so a good deal more fits before anything
      has to scroll at all;
   2. the category column is capped at the window height and scrolls on its
      own. The flyouts are NOT clipped by that: li.item is position:initial,
      so their containing block is the panel, which sits above the scrolling
      <ul> - an absolutely positioned box is only clipped by ancestors between
      itself and its containing block. #lefmenu-mobile is pinned as that
      containing block here so it cannot depend on which element happens to be
      positioned higher up;
   3. a long subcategory list is capped at the same height and wraps into a
      second (and third) column instead of growing downwards. Wrapping is used
      rather than a scrollbar on purpose: the flyout is the containing block
      for the level 2 flyouts, so giving it overflow would cut those off.
      The flex rules are attached to the hover state, because the theme opens
      and closes these lists with display:none/block and a permanent
      display:flex would leave them open.

   Mobile is untouched - there the same panel is an accordion (pass 116/117),
   which is a different layout altogether.
   ========================================================================== */
@media (min-width: 992px) {

/* --- 1. tighter rows -------------------------------------------------- */
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link {
  /* pass 148: NOT display:flex - the theme draws the "has children" caret with
     a :before, and as a flex item it jumped from its own place to the front of
     the row. The row is tightened with padding alone. */
  min-height: 0 !important;
  padding: 0 !important;
}
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link span {
  padding: 9px 22px 9px 8px !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
}
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link .menu-icon {
  min-width: 34px !important;
  padding: 4px 0 4px 6px !important;
}
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link .menu-icon img {
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: contain;
}

/* --- 2. the category column scrolls, the flyouts do not get clipped --- */
.header-wrapper-bottom #lefmenu-mobile {
  position: relative !important;
}
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu {
  position: static !important;
}
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu {
  /* pass 153: the height cap and the scrollbar are gone. They were a safety
     net from pass 146, when a row was still 46px tall and thirteen categories
     came to some 600px. Since pass 151/152 a row is about 30px, the column is
     around 400px and fits under the header on its own, so the scrollbar only
     sat there taking up space.

     "position: static" stays: it is what keeps the flyouts anchored to
     #lefmenu-mobile instead of to this list. */
  position: static !important;
}

/* --- 3. pass 151: the column wrapping is gone again. It worked, but the
       flex box would not grow its own width to hold the extra columns, and
       forcing a width from the item count was worse than the problem. The
       lists are made to fit by shortening the rows instead - see pass 151 at
       the end of this file. ------------------------------------------- */

}

/* ==========================================================================
   BTS REVAMP - pass 148: DESKTOP - the open category panel no longer stretches
   the header.

   #lefmenu-mobile is an in-flow accordion inside the bottom header bar. When
   it opens, that bar grows to the height of the whole category list - and the
   bar is dark, so the page turned into a black band the height of the menu
   with a small light panel in its left quarter.

   The panel is therefore taken out of the flow on desktop and hung under its
   own button: nav#left-nav becomes the anchor, the panel is absolute at
   top:100%, full width of the column, above the page. The header keeps the
   height it has when the menu is closed, and the panel floats over the page
   exactly like any other dropdown.

   The flyouts still work: pass 146 pinned #lefmenu-mobile as their containing
   block, and an absolutely positioned box is a containing block just as a
   relative one is.

   Below 992px nothing changes - there the same panel is the mobile accordion
   and it is meant to push the page down.
   ========================================================================== */
@media (min-width: 992px) {

.header-wrapper-bottom nav#left-nav {
  position: relative !important;
}
.header-wrapper-bottom #lefmenu-mobile {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 200 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

/* the labels carry the panel now that it is light - give them real contrast */
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link,
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link:visited,
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link span {
  color: #26262a !important;
  font-weight: 700 !important;
}
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0:hover > a.menu-link,
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0:hover > a.menu-link span {
  color: var(--bts-yellow-ink, #1c1a08) !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 149: the second and third column of the category menu are
   held on the screen too.

   Pass 146 capped the flyout and told it to wrap into a second column, but two
   things kept it growing past the bottom of the window:

   1. an older rule, ".cdz-main-menu .groupmenu-drop { min-height: 100% }",
      stretches every flyout to the full height of the panel - and in CSS
      min-height beats max-height, so the cap was simply ignored whenever the
      panel was the taller of the two;
   2. only the first flyout was capped at all. The third column
      (ul.cat-tree.groupmenu-drop, the one that opens off a subcategory) had no
      limit, so that one ran off the bottom on its own.

   Both are handled here, and the cap itself is lowered from 100vh-140px to
   100vh-230px because the panel no longer starts at the top of the window -
   since pass 148 it hangs under its button, roughly 180-200px down.

   Wrapping is still used instead of a scrollbar: each of these lists is the
   containing block for the next level, and giving one of them overflow would
   cut the next column off.
   ========================================================================== */
@media (min-width: 992px) {

/* 1. the cap is the authority, not the inherited min-height */
.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop {
  min-height: 0 !important;
}

/* 2. pass 151: the wrapping for the deeper lists is gone with the rest. */

}

/* ==========================================================================
   BTS REVAMP - pass 151: the category menu fits because its rows are small,
   not because it is folded into columns.

   Everything that tried to break a long list into several columns is taken
   back out (pass 146 part 3, pass 149 part 2, pass 150 in full). What is left
   is the thing that actually costs the height: the rows themselves.

   The subcategory rows are .custom-megamenu-icon-item, a 5px padded box around
   a table-row whose height is set by its thumbnail - and the theme allows that
   thumbnail to be 50px, so a row was some 60px tall and nineteen of them made
   a list of over 1100px. With a 22px thumbnail and 3px of padding a row is
   about 30px, so the longest list in the shop (Ročno orodje, 19 entries) comes
   to roughly 570px and fits under the panel.

   The first column is treated the same way: 22px thumbnail instead of 28px,
   6px of padding instead of 9px, which takes the thirteen categories from
   about 600px down to about 440px.

   The height cap and the scrollbar on the first column stay as a safety net
   for short screens; the flyouts are free to be as tall as they need to be,
   which is now considerably less than the window.
   ========================================================================== */
@media (min-width: 992px) {

/* --- the categories ---------------------------------------------------- */
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link span {
  padding: 6px 22px 6px 8px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link .menu-icon {
  min-width: 28px !important;
  padding: 2px 0 2px 6px !important;
}
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link .menu-icon img {
  max-width: 22px !important;
  max-height: 22px !important;
  object-fit: contain;
}

/* --- the subcategories, at every depth --------------------------------- */
.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop li.item {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop li.item > a {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  line-height: 1.2 !important;
}
.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop li.item > a span {
  padding-left: 8px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}
.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop li.item > a .menu-icon img,
.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop i.menu-icon.img-icon img {
  max-width: 22px !important;
  max-height: 22px !important;
  object-fit: contain;
}

}

/* ==========================================================================
   BTS REVAMP - pass 152: a category row is one row again.

   The rows were uneven because the theme sizes the label with

       .cdz-vertical-menu .item.level0.parent > a.menu-link > .menu-icon + span
           { max-width: calc(100% - 15px) }

   - 100% of the whole row minus 15px. Both the thumbnail and the label are
   inline-blocks, so as soon as a label needed more than the 15px that were
   left over ("VPENJALNO ORODJE: TRNI, PRIMEŽI, IZSTRUŽEVANJE, STRUŽNE GLAVE",
   "EL. ROČNO ORODJE, PNEVMATSKO ORODJE") it did not fit beside the picture and
   dropped underneath it, doubling that row's height.

   The row is laid out as a flex line instead: picture, label, and the label
   takes whatever is left. Every row is then the height of its picture, no
   matter how long the text is.

   The caret needs one extra rule. The theme draws it as a FontAwesome "\f105"
   on a :before with float:right - and a float is ignored on a flex item, which
   is why pass 146 sent it to the front of the row. It is pinned to the right
   edge here, which is where it was meant to be.
   ========================================================================== */
@media (min-width: 992px) {

.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  padding-right: 22px !important;
}
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link > .menu-icon {
  flex: 0 0 auto !important;
}
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link > span {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  padding-right: 0 !important;
}
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0.parent > a.menu-link:before {
  position: absolute !important;
  right: 7px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  float: none !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

/* the same thing one level down - those rows are a table-row from the admin
   CSS, so they already keep the picture and the label side by side, but the
   label there may not be capped either */
.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop li.item > a span {
  max-width: none !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 154: the subcategories are readable too, and the phone
   keeps its dark menu.

   DESKTOP. Only the first level ever got a colour of its own (pass 148). The
   deeper lists had none, so they fell back to the theme's own
   "a.menu-link { color: #fff }" - white text, which was invisible from the
   moment the panel turned light in pass 147. They are given the same ink as
   the first level here.

   MOBILE. Pass 147 switched off the whole of pass 60, which was not scoped to
   a breakpoint, so the phone lost the dark plate behind its category accordion
   as well - while the rules that write on it (pass 116/117, and the promo
   block of pass 137, which paints itself #373737) still expect it. The plate
   is put back for phones only, together with the white text that belongs on
   it. Desktop stays light.
   ========================================================================== */
@media (min-width: 992px) {

.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop a,
.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop a:visited,
.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop a span,
.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop a.groupdrop-title,
.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop a.groupdrop-title span {
  color: #26262a !important;
}
/* the caret on a row that has children must follow the text */
.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop .item.parent > a:before,
.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop .item.parent > a:after {
  color: #26262a !important;
  border-color: #26262a !important;
}
/* the yellow highlight keeps its dark ink */
.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop .item:hover > a,
.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop .item:hover > a span {
  color: var(--bts-yellow-ink, #1c1a08) !important;
}

}

@media (max-width: 768px) {

#lefmenu-mobile,
#lefmenu-mobile > .cdz-menu,
#lefmenu-mobile > .cdz-menu > ul.groupmenu,
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0,
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link {
  background: #373737 !important;
}
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 {
  border-color: rgba(255, 255, 255, .10) !important;
}
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link,
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link:visited,
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link span {
  color: #ffffff !important;
}
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0.parent > a.menu-link:after,
#lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0.parent > a.menu-link:before {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 155: a hairline between the rows.

   The theme draws a full 1px #dfdfdf frame around every category and pulls the
   next one up by a pixel (margin-bottom: -1px) so the frames share an edge.
   On the light panel that frame all but disappears, and the rows ran into one
   another.

   It is replaced by a single, deliberately faint separator under each row -
   rgba(0,0,0,.09), which is about #e8e8e8 on white: visible enough to tell two
   rows apart, quiet enough not to turn the panel into a table. The last row in
   each list has none, so the list does not end in a stray line, and the same
   treatment one shade lighter is used inside the subcategory lists.

   Desktop only - on a phone the panel is dark and has its own borders from
   pass 154.
   ========================================================================== */
@media (min-width: 992px) {

.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 {
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, .09) !important;
  margin-bottom: 0 !important;
}
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0:last-child {
  border-bottom: 0 !important;
}

.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop > li.item {
  border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
}
.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop > li.item:last-child {
  border-bottom: 0 !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 156: the categories get a little of their size back.

   Pass 151 cut the rows hard because the list did not fit; since the layout
   was fixed in pass 152 there is room to spare, so the first level goes back
   up a step - thumbnail 22 -> 28px, text 11 -> 12px, padding 6 -> 9px. That
   puts a row at roughly 36px instead of 28px, and the thirteen categories at
   about 470px, which still sits comfortably under the header.

   Only the first level. The subcategory lists are left as they are: the
   longest of them (Ročno orodje, 19 entries) is already about 570px, and
   growing those rows too would push it off the bottom again.
   ========================================================================== */
@media (min-width: 992px) {

.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link span {
  padding: 9px 24px 9px 10px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link .menu-icon {
  min-width: 34px !important;
  padding: 3px 0 3px 8px !important;
}
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link .menu-icon img {
  max-width: 28px !important;
  max-height: 28px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 159: the promo pages.

   /promotions/ and /akcijska-ponudba were a flat run of <p> elements, while
   the admin head include of store 3 already held a finished two column
   layout for them - a grid nothing on the page ever used. The pages are
   rewritten into .promo-grid > .promo-item > .promo-card (every link, image
   and {{media}} directive carried over untouched) and that stylesheet is
   moved here, out of the admin field, with the house styling added under it.
   ========================================================================== */

.cms-promotions .columns,
.cms-akcijska-ponudba .columns {
  background-color: #f8f8f8;
  -webkit-box-shadow: none;
}

.cms-promotions .promo-date,
.cms-akcijska-ponudba .promo-date{
    font-size: 16px;
    float: right;
    padding: 5px;

}


.cms-promotions .promo-grid,
.cms-akcijska-ponudba .promo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0;
}

.cms-promotions .promo-item,
.cms-akcijska-ponudba .promo-item {
  padding: 0 30px 30px 30px;
  box-sizing: border-box;
}

.cms-promotions .promo-card,
.cms-akcijska-ponudba .promo-card {
  background: #ffffff;
  box-shadow: 3px 3px 11px 3px #80808091;
  border: solid #80808091 1px;
  border-radius: 7px;
  overflow: hidden;
}

.cms-promotions .promo-card p,
.cms-akcijska-ponudba .promo-card p {
  margin: 0;
}

.cms-promotions .promo-title,
.cms-akcijska-ponudba .promo-title {
  margin-left: 10px !important;
  padding: 10px 10px 10px 0;
  font-size: 16px;
}

.cms-promotions .promo-card a,
.cms-akcijska-ponudba .promo-card a {
  display: block;
}

.cms-promotions .promo-card img,
.cms-akcijska-ponudba .promo-card img {
  width: 100% !important;
  height: auto;
  display: block;
}

/* Optional: keeps last single item aligned left nicely */
.cms-promotions .promo-item.full-width,
.cms-akcijska-ponudba .promo-item.full-width {
  grid-column: 1 / 2;
}

@media (max-width: 768px) {
  .cms-promotions .promo-grid,
  .cms-akcijska-ponudba .promo-grid {
    grid-template-columns: 1fr;
  }

  .cms-promotions .promo-item,
  .cms-akcijska-ponudba .promo-item {
    padding: 0 15px 20px 15px;
  }

  .cms-promotions .promo-item.full-width,
  .cms-akcijska-ponudba .promo-item.full-width {
    grid-column: auto;
  }
}

/* --- pass 159 additions: the house polish on top of the grid above ----- */
.cms-promotions .promo-grid,
.cms-akcijska-ponudba .promo-grid {
  gap: 26px;
  padding: 4px 0 8px;
}
.cms-promotions .promo-item,
.cms-akcijska-ponudba .promo-item {
  padding: 0 !important;
}
.cms-promotions .promo-card,
.cms-akcijska-ponudba .promo-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--bts-line, #e7e5df) !important;
  border-radius: var(--bts-radius-lg, 16px) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05) !important;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.cms-promotions .promo-card:hover,
.cms-akcijska-ponudba .promo-card:hover {
  border-color: var(--bts-yellow, #efd111) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .10) !important;
  transform: translateY(-2px);
}
.cms-promotions .promo-media,
.cms-akcijska-ponudba .promo-media {
  order: 1;
}
.cms-promotions .promo-media img,
.cms-akcijska-ponudba .promo-media img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* the line above the picture: a quiet kicker, not a heading */
.cms-promotions .promo-kicker {
  order: 0;
  margin: 0 !important;
  padding: 11px 14px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bts-yellow-ink, #1c1a08);
  background: var(--bts-yellow, #efd111);
}

/* the product name on /akcijska-ponudba */
.cms-akcijska-ponudba .promo-title {
  order: 0;
  margin: 0 !important;
  padding: 13px 16px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.25;
  color: var(--bts-ink, #26262a);
  border-bottom: 1px solid var(--bts-line, #e7e5df);
}

/* the small print under the picture - it used to be pushed across with
   padding-left: 400px, which is why it sat in the middle of nowhere */
.cms-promotions .promo-note,
.cms-akcijska-ponudba .promo-note {
  order: 2;
  margin: 0 !important;
  padding: 10px 14px !important;
  font-size: 11.5px !important;
  line-height: 1.35;
  color: var(--bts-ink-text-lo, #6b6b6e);
  background: #fafafa;
  border-top: 1px solid var(--bts-line, #e7e5df);
}

@media (max-width: 768px) {
  .cms-promotions .promo-grid,
  .cms-akcijska-ponudba .promo-grid {
    gap: 16px;
  }
}

/* ==========================================================================
   BTS REVAMP - pass 160: a configurable product is not framed in yellow.

   The frame comes from the admin head include, under the heading "POVEČANA
   VIDLJIVOST CONF. ARTIKLOV":

       .item.product.product-item.js-configurable-product .product-item-info
           { border: 3px solid #efd111 !important }          <- grid
       .products-list .product-item.js-configurable-product
           { border: 4px solid #efd111 !important;
             box-shadow: 0 3px 12px rgba(239,207,56,.3) }    <- list

   That field is rendered after custom.css, so the rules cannot be beaten on
   order - they are beaten on specificity instead: five classes there, six
   here. The card simply gets the same 1px line every other card has.

   What stays is the "Izberi dimenzijo" button itself: that is the thing that
   tells a customer this article has variants, and it does the job without
   painting a frame around the whole tile. Since pass 135 the configurables
   also come first in the search results, so the frame had little left to do.

   The tile in the Amasty search drop-down keeps its frame for now - different
   surface, not part of this request.
   ========================================================================== */

/* pass 161: border: none, and with a selector that wins - see the pass 9
   block earlier in this file, which is where the frame really came from. */
.products-grid .item.product.product-item.js-configurable-product .product-item-info,
.products.list.items.product-items .item.product.product-item.js-configurable-product .product-item-info {
  border: none !important;
}

/* list mode: the frame is on the <li> itself, from the admin field */
.products-list .item.product.product-item.js-configurable-product,
.products-list .item.product.product-item.js-configurable-product:hover {
  border: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   BTS REVAMP - pass 162: the "Povzetek narocila" list in the checkout.

   Magento renders each row from summary/item/details.html as

       .product-item
         span.product-image-container[style="width:55px;height:55px"]
           span.product-image-wrapper > img[width=110]
         .product-item-details
           .product-item-inner
             .product-item-name-block  >  strong.product-item-name + .details-qty
             .subtotal                 >  .cart-price > .price

   The thumbnail size comes from view.xml (mini_cart_product_thumbnail 110px,
   halved inline by the template), which is a lot of room for a row that only
   has to say what the article is and what it costs - with 18 items in the
   basket the list turned into a column of pictures with the text squeezed
   beside it.

   The picture goes down to 44px, the row becomes one flex line (picture -
   name and quantity - price), and the type is sized so the name can take two
   lines without the price moving. The inline width on the container has to be
   overridden with !important, because the template writes it into the element.

   Scoped to .opc-block-summary, so the header mini cart (pass 130) and the
   cart page keep what they have.
   ========================================================================== */

/* --- the row ---------------------------------------------------------- */
.opc-block-summary .minicart-items .product-item {
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--bts-line, #e7e5df);
}
.opc-block-summary .minicart-items .product-item:last-child {
  border-bottom: 0;
}
.opc-block-summary .minicart-items .product {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

/* --- the picture ------------------------------------------------------- */
.opc-block-summary .minicart-items .product-image-container {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
}
.opc-block-summary .minicart-items .product-image-wrapper {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 1px solid var(--bts-line, #e7e5df);
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}
.opc-block-summary .minicart-items .product-image-photo,
.opc-block-summary .minicart-items .product-image-wrapper img {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
}

/* --- name, quantity, price on one line -------------------------------- */
.opc-block-summary .minicart-items .product-item-details {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}
.opc-block-summary .minicart-items .product-item-inner {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 !important;
}
.opc-block-summary .minicart-items .product-item-name-block {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
}
.opc-block-summary .minicart-items .product-item-name {
  display: block !important;
  margin: 0 0 3px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--bts-ink, #26262a) !important;
}
.opc-block-summary .minicart-items .details-qty {
  margin: 0 !important;
  font-size: 11.5px !important;
  line-height: 1.3 !important;
  color: var(--bts-ink-text-lo, #6b6b6e) !important;
}
.opc-block-summary .minicart-items .details-qty .label,
.opc-block-summary .minicart-items .details-qty .value {
  display: inline !important;
  font-size: inherit !important;
  color: inherit !important;
}
.opc-block-summary .minicart-items .details-qty .label:after {
  content: ': ';
}
.opc-block-summary .minicart-items .subtotal {
  flex: 0 0 auto !important;
  margin: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
}
.opc-block-summary .minicart-items .subtotal .price {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--bts-ink, #26262a) !important;
}

/* --- a little more of the list visible before it scrolls -------------- */
.opc-block-summary .minicart-items-wrapper {
  max-height: 420px !important;
  padding: 0 !important;
}

/* ==========================================================================
   BTS REVAMP - pass 163: the checkout summary gets more room. DESKTOP ONLY.

   Pass 162 made the "Povzetek narocila" list compact so that a long basket
   would fit; with a normal basket that turned out to be too small to read
   comfortably. This pass keeps the row shape from pass 162 and scales it
   back up by about 30%, and gives the panel itself a wider column to sit in:

       .opc-wrapper (the form)    66.66% -> 60%
       .opc-sidebar (the summary) 33.33% -> 40%

   Those two widths come from the base theme (styles-l.css) and are what
   decides how wide the white "Povzetek narocila" card is - the card itself
   has no width of its own, it just fills the sidebar column.

   Everything is inside @media (min-width: 992px), the breakpoint the rest of
   this file uses for "desktop", so the phone and the tablet keep pass 162
   untouched - on a phone the summary is a full-width modal anyway and 30%
   larger rows would only push the totals further below the fold.
   ========================================================================== */

@media (min-width: 992px) {

  /* --- the column: the summary card is as wide as the sidebar --------- */
  .checkout-index-index .opc-wrapper {
    width: 60% !important;
  }
  .checkout-index-index .opc-sidebar {
    width: 40% !important;
  }

  /* --- the panel: a little more air inside the card ------------------- */
  .checkout-index-index .opc-block-summary {
    padding: 26px !important;
  }
  .checkout-index-index .opc-block-summary > .title {
    font-size: 21px !important;
    line-height: 1.25 !important;
  }

  /* --- the row: pass 162 sizes x 1.3 ---------------------------------- */
  .opc-block-summary .minicart-items .product-item {
    padding: 13px 0 !important;      /* 10px  */
  }
  .opc-block-summary .minicart-items .product {
    gap: 13px !important;            /* 10px  */
  }

  /* the picture: 44px -> 57px (the inline width/height on the container
     still has to be beaten with !important, the template writes it) */
  .opc-block-summary .minicart-items .product-image-container {
    width: 57px !important;
    height: 57px !important;
    flex: 0 0 57px !important;
  }
  .opc-block-summary .minicart-items .product-image-wrapper {
    width: 57px !important;
    height: 57px !important;
    border-radius: 10px;
  }

  /* name, quantity and price */
  .opc-block-summary .minicart-items .product-item-inner {
    gap: 13px !important;            /* 10px  */
  }
  .opc-block-summary .minicart-items .product-item-name {
    margin: 0 0 4px !important;      /* 3px   */
    font-size: 16px !important;      /* 12.5px */
  }
  .opc-block-summary .minicart-items .details-qty {
    font-size: 15px !important;      /* 11.5px */
  }
  .opc-block-summary .minicart-items .subtotal .price {
    font-size: 17px !important;      /* 13px  */
  }

  /* --- the scroll box grows with the rows, so the same number of
         articles is visible before the list starts to scroll ---------- */
  .opc-block-summary .minicart-items-wrapper {
    max-height: 546px !important;    /* 420px */
  }
}

/* ==========================================================================
   BTS REVAMP - pass 164: one line per article in the cart. DESKTOP ONLY.

   A single row on /checkout/cart/ was about 460px tall: a square picture the
   full width of the "ELEMENT" column (~280px), the name underneath it, then
   the Komentar / STRM Comment / bin row below that.

   The picture is that big because of the product-card rules earlier in this
   file, which were never scoped to the grid:

       .product-image-container            { width: 100% !important }
       .product-item-photo                 { width: 100% !important;
                                             aspect-ratio: 1 / 1; ... }

   The cart uses the same class names, so the card styling leaks in and beats
   the theme's own ".cart.table-wrapper .item-info .product-item-photo
   .product-image-container { width: 70px !important }".

   This pass gives the cart back its own row: the "ELEMENT" cell becomes a
   flex line - a 84px thumbnail on the left, name and Sifra beside it - and
   the actions sit on one compact line under it, with the bin pushed to the
   right edge. The thumbnail gets the same white plate with a hairline border
   and rounded corner as the checkout summary (pass 162/163), so the two
   lists match.

   Everything is inside @media (min-width: 992px). On a phone the cart is a
   stacked layout where .product-item-photo is absolutely positioned and
   capped at 65px, so it was never affected by the leak and is left alone.
   ========================================================================== */

@media (min-width: 992px) {

  /* --- the "ELEMENT" cell is one horizontal line --------------------- */
  .checkout-cart-index .cart.table-wrapper .item-info > .col.item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  /* --- the thumbnail: 84px, not the width of the column -------------- */
  .checkout-cart-index .cart.table-wrapper .item-info .product-item-photo {
    display: block !important;
    width: 84px !important;
    height: 84px !important;
    flex: 0 0 84px !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--bts-line, #e7e5df);
    border-radius: 10px;
    overflow: hidden;
  }
  /* the per-product <style> block the template prints writes
     ".product-image-container-<id> { width: 165px }" - hence !important */
  .checkout-cart-index .cart.table-wrapper .item-info .product-item-photo .product-image-container,
  .checkout-cart-index .cart.table-wrapper .item-info .product-item-photo .product-image-wrapper {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .checkout-cart-index .cart.table-wrapper .item-info .product-item-photo .product-image-photo {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    margin: 0 !important;
  }

  /* --- name and Sifra beside the picture ----------------------------- */
  .checkout-cart-index .cart.table-wrapper .item-info .product-item-details {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  .checkout-cart-index .cart.table-wrapper .item-info .product-item-name {
    display: block !important;
    margin: 0 0 4px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
  .checkout-cart-index .cart.table-wrapper .item-info .product-item-details .cart_extra:empty {
    display: none !important;
  }

  /* --- the row itself: top aligned, no more column-high padding ------ */
  .checkout-cart-index .cart.table-wrapper .cart.item .item-info > td {
    padding-top: 14px !important;
    padding-bottom: 6px !important;
    vertical-align: top !important;
  }

  /* --- Komentar / STRM Comment / bin on one line --------------------- */
  .checkout-cart-index .cart.table-wrapper .item-actions td {
    padding: 0 0 14px !important;
  }
  .checkout-cart-index .cart.table-wrapper .item-actions .actions-toolbar {
    display: flex !important;
    align-items: center !important;
    position: static !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .checkout-cart-index .cart.table-wrapper .item-actions .actions-toolbar > a {
    /* the template writes style="margin-right: 25px" on Komentar */
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0 20px 0 0 !important;
    font-size: 12.5px !important;
  }
  .checkout-cart-index .cart.table-wrapper .item-actions .actions-toolbar > .gift-options-cart-item {
    margin: 0 !important;
  }
  .checkout-cart-index .cart.table-wrapper .item-actions .actions-toolbar > .action-delete {
    /* the bin is printed before Komentar in the markup */
    order: 9 !important;
    margin: 0 0 0 auto !important;
  }
}