/* 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: 260px;
}
.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;
  }
}

/* ==========================================================================
   BTS REVAMP - pass 165: the theme's own nav toggle is gone.

       <span data-action="toggle-nav" class="action nav-toggle">
           <span>Preklop navigacije</span>
       </span>

   Magento's hamburger, printed by the theme inside .logo-left, right before
   the logo. The base theme shows it only below 768px (styles-m.css gives it
   display: block, styles-l.css takes it back with display: none), so this
   rule changes nothing on desktop - it only removes the button that stands
   in the mobile header.

   Nothing else is touched: the categories button next to it
   (.menu-title[data-cdz-toggle="#lefmenu-mobile"], moved there by
   web/js/bts-mobile-menu.js in pass 119) and the panel it opens stay exactly
   as they are.
   ========================================================================== */

.header-wrapper-left .action.nav-toggle,
.page-header .action.nav-toggle {
  display: none !important;
}

/* ==========================================================================
   BTS REVAMP - pass 166: the category buttons are 20% bigger. DESKTOP ONLY.

   The first level of the "VSE KATEGORIJE" drawer - li.item.level0 in
   #lefmenu-mobile, i.e. the thirteen rows from "Rezilno orodje" down to
   "Promocijski izdelki". Pass 156 set those sizes; every one of them is
   multiplied by 1.2 here:

       text          12px   -> 14.4px
       row padding   9/24/9/10px -> 10.8/28.8/10.8/12px
       icon column   34px   -> 40.8px  (padding 3/0/3/8 -> 3.6/0/3.6/9.6)
       thumbnail     28px   -> 33.6px

   A row goes from about 36px to about 43px, so the thirteen categories take
   roughly 565px instead of 470px. That is about the same height as the
   longest subcategory list (Rocno orodje, ~570px), which pass 156 already
   accepted, so the panel still fits under the header.

   Only the first level and only from 992px up, exactly like pass 156. The
   subcategory lists and the whole mobile drawer are untouched.
   ========================================================================== */
@media (min-width: 992px) {

.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link span {
  padding: 10.8px 28.8px 10.8px 12px !important;
  font-size: 14.4px !important;
}
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link .menu-icon {
  min-width: 40.8px !important;
  padding: 3.6px 0 3.6px 9.6px !important;
}
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link .menu-icon img {
  max-width: 33.6px !important;
  max-height: 33.6px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 167: one text size through the whole category menu.
   DESKTOP ONLY.

   Pass 151 set every row inside a .groupmenu-drop to 11px with

       .header-wrapper-bottom #lefmenu-mobile .groupmenu-drop li.item > a span
           { font-size: 11px }

   That one rule already covers level1 down to level5, so the subcategories
   were the same size as each other - just smaller than the first level,
   which pass 166 took to 14.4px. They are matched to it here, so category
   and subcategory read at the same size no matter how deep the branch goes.

   Only the label. The 22px thumbnails of pass 151 and the row padding stay
   as they are, so a row grows only by the difference in line box: at
   line-height 1.2 that is 13.2px -> 17.3px, i.e. about 3px per row. The
   longest list (Rocno orodje, 19 entries) grows by roughly 13%.

   Same breakpoint as passes 151/156 - the mobile drawer has its own sizes.
   ========================================================================== */
@media (min-width: 992px) {

.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop li.item > a span {
  font-size: 14.4px !important;
}

}
/* ==========================================================================
   BTS REVAMP - pass 168: the size of the whole category menu.
   DESKTOP ONLY.

   This block owns the sizes of the "VSE KATEGORIJE" drawer - the thirteen
   first level rows AND every subcategory level under them. It was written at
   1.2x on top of passes 166/167 and then taken down twice by 10%; the values
   below are the result, so there is one place to change if the size has to
   move again rather than several layers of overrides.

                        pass 151/156    here
       category text        12px        14px
       subcategory text     11px        14px
       category icon        28px        32.66px
       subcategory icon     22px        21.38px

   Category and subcategory read at the same size (pass 167), whatever the
   depth of the branch. The paddings, the icon column and the caret are
   scaled by the same factor as the type, so the rows keep their proportions.

   HEIGHT. A first level row is about 42px, so the thirteen categories take
   roughly 550px; a subcategory row is about 26px, so the longest list
   (Rocno orodje, 19 entries) is roughly 500px. That clears the header on a
   1080p screen and is workable on a 768px high laptop.

   Same breakpoint as passes 151/156/166/167; the mobile drawer is untouched.
   ========================================================================== */
@media (min-width: 992px) {

/* --- first level ------------------------------------------------------ */
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link {
  padding-right: 21.38px !important;
}
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link span {
  padding: 10.49px 27.99px 10.49px 11.66px !important;
  font-size: 14px !important;
}
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link .menu-icon {
  min-width: 39.65px !important;
  padding: 3.5px 0 3.5px 9.33px !important;
}
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0 > a.menu-link .menu-icon img {
  max-width: 32.66px !important;
  max-height: 32.66px !important;
}
/* the caret of pass 151 keeps up with the row */
.header-wrapper-bottom #lefmenu-mobile > .cdz-menu > ul.groupmenu > li.item.level0.parent > a.menu-link:before {
  right: 6.8px !important;
  font-size: 14.58px !important;
}

/* --- every level below it --------------------------------------------- */
.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop li.item {
  padding-top: 1.94px !important;
  padding-bottom: 1.94px !important;
}
.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop li.item > a {
  padding-top: 2.92px !important;
  padding-bottom: 2.92px !important;
}
.header-wrapper-bottom #lefmenu-mobile .groupmenu-drop li.item > a span {
  padding-left: 7.78px !important;
  font-size: 14px !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: 21.38px !important;
  max-height: 21.38px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 169: the cart count sits in the middle of its badge.

   The theme gives the yellow badge on the cart icon

       .page-header .minicart-wrapper .action.showcart .counter.qty
           { height: 22px; line-height: 26px; min-width: 22px }

   a line box 4px taller than the badge itself, and the 1px border of the
   same rule eats two more, so the number is pushed about 3px below centre -
   it reads as sitting on the bottom of the circle.

   Rather than nudging it up by a fixed amount, the badge is made a centring
   flex box: whatever the digit count, the border or the font, the number
   ends up in the middle. line-height is neutralised to 1 so it no longer
   fights the height, and the vertical padding of the theme is dropped for
   the same reason.

   The bottom bar on mobile has its own badge (passes 121/128,
   .bts-bottombar .bts-bb-cart) and is not touched - this rule is scoped to
   the header mini cart.
   ========================================================================== */

.page-header .minicart-wrapper .action.showcart .counter.qty {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ==========================================================================
   BTS REVAMP - pass 170: the filter pill carets sit on the text line.
   MOBILE ONLY (max-width: 767px).

   Every pill in the horizontal filter bar prints its own caret as
   .filter-options-title:after. The base theme only straightens it out for
   the desktop stylesheet:

       styles-l.css
         .amasty-catalog-topnav .filter-options-title:after
             { display: inline-block; margin: 0 0 0 15px;
               position: static; transform: translateY(-2px) }

   styles-m.css has no such rule, so on a phone the caret keeps Magento's
   absolute positioning from the sidebar layout (right/top offsets meant for
   a full width filter title) and ends up hanging below the label, half out
   of the pill.

   The same treatment is given here for the mobile width: the caret is put
   back in the flow. The pill is already display: inline-flex with
   align-items: center (pass 89), so as a static flex item the caret is
   centred against the label by itself - no magic offsets to keep in sync
   with the pill padding.

   Every inset is neutralised, not just the ones the theme happens to set,
   so a leftover right/top/bottom from another rule cannot pull it out again.
   ========================================================================== */
@media (max-width: 767px) {

.catalog-topnav .filter-options > .filter-options-item > .filter-options-title:after {
  position: static !important;
  display: inline-block !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 0 0 8px !important;
  transform: none !important;
  line-height: 1 !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 171: narrower side padding on the pagination strip.

   The theme sets

       styles-m.css
         .pages .pages-items { display: block; padding: 2px 40px 0;
                               position: relative; white-space: normal }

   40px of side padding, which is what the previous/next arrows are absolutely
   positioned into. Half of that is enough, so the row of page numbers is
   given back 40px of width - on a phone that is the difference between the
   numbers fitting on one line and wrapping.

   The rule lives in styles-m.css, which is loaded at every width, so this
   override carries no media query either and applies on desktop and mobile
   alike. Only the padding is restated; display, position and white-space are
   left to the theme.
   ========================================================================== */

.pages .pages-items {
  padding: 2px 20px 0 !important;
}

/* ==========================================================================
   BTS REVAMP - pass 300: card height inside the featured products widget.

   Pass 71 gives every card in a product grid

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

   331px leaves an empty strip under the button on the short cards of the
   featured list. It is taken down to 260px here, but ONLY inside the widget
   (.bts-featured): the same rule also governs the category pages and the
   search results, and those were not asked to change.

   The selector carries one class more than pass 71, so it wins on specificity
   alone; !important is there to match the style of the rule it overrides.
   ========================================================================== */

.bts-featured .products-grid .product-item .product-item-info .product-item-details {
  min-height: 260px !important;
}

/* ==========================================================================
   BTS REVAMP - pass 301: the qty stepper on product cards loses its outer
   frame too.

   Pass 2 draws a box around

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

   for every qty stepper in the shop. Pass 141 switched that box off, but only
   inside the add-to-cart form of the product page, and said in so many words
   that the cards keep theirs. That is what changes here: the cards lose it as
   well, so the stepper reads the same on a category page, in search results
   and in the featured products widget as it does on the product page.

   Scoped to .product-item, which is the card in both grid and list view and
   also inside the owl carousel of the widget (owl wraps the card in
   div.owl-item but does not replace it). The steppers of the mini cart and of
   the cart page are not product cards and keep their own styling.

   Only the outer border goes. The rounding, the inline-flex row and the inner
   parts stay: the input already carries "border: none" from pass 2, and the
   -/+ buttons keep the 1px line the theme gives them in styles-m.css - exactly
   the state the product page has had since pass 141.

   Three classes against the two of pass 2, so it wins on specificity; the
   !important matches the rule it overrides.
   ========================================================================== */

.product-item .field.qty > .control {
  border: 0 !important;
}

/* ==========================================================================
   BTS REVAMP - pass 302: the add-to-cart button on cards gets room to breathe.
   DESKTOP ONLY (min-width: 769px).

   Measured off a screenshot of a card in the featured products widget: the
   yellow pill was 102px wide and the label "DODAJ V KOSARICO" about 97px, so
   the text sat 2-3px from the border on either side and read as touching it.

   The padding pass 102 declares on that button

       .cdz-buttons-inner button.action.tocart.primary
           { flex: 1 1 auto; min-width: 0; padding: 0 14px }

   never shows, because the button is the flexible item of

       form[data-role=tocart-form] = [ qty stepper ] gap [ button ]

   and min-width: 0 lets the flex layout squeeze it below the width of its own
   label. Raising the padding would make that worse, not better - the label is
   centred, so what it needs is width.

   The row is pinned at left:15px / right:15px of the card and must not wrap
   (pass 102 reserves only 72px under the text block, one row's worth), so the
   width has to come from inside the row:

       gap            10px -> 6px    =  4px
       -/+ buttons    36px -> 34px   =  4px  (two of them)
       qty input      44px -> 36px   =  8px
                                       ----
                                       16px

   The button therefore goes from about 102px to about 118px, which leaves
   roughly 10px on each side of the label. The stepper loses 12px of its 116px
   and the label itself is not touched - same font, same size, same spacing.

   Not on mobile: below 769px the row is allowed to wrap and the button already
   has "flex: 1 1 130px" of its own, so it has never been the squeezed one.
   ========================================================================== */
@media (min-width: 769px) {

.products-grid .product-item .cdz-buttons-inner form[data-role="tocart-form"] {
  gap: 6px !important;
}
.products-grid .product-item .cdz-buttons-inner .field.qty .control .btn-qty,
.products-grid .product-item .cdz-buttons-inner .field.qty .control a.btn-qty {
  width: 34px !important;
}
.products-grid .product-item .cdz-buttons-inner .field.qty .control input.qty {
  width: 36px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 303: the add-to-cart button finally fits its label.
   DESKTOP ONLY (min-width: 769px).

   Pass 174 freed 16px inside the row and the button grew from about 102px to
   about 125px - but a screenshot measured pixel by pixel showed the label
   "DODAJ V KOSARICO" is itself about 125px wide at 12px/800/uppercase, so it
   still filled the button edge to edge and spilled a couple of pixels over the
   border on both sides.

   About 20px more are needed for roughly 10px of air on each side. They come
   from three places, none of them the label:

       row gutter     15px -> 10px   = 10px  (both sides of the pinned row)
       -/+ buttons    34px -> 30px   =  8px  (two of them)
       qty input      36px -> 34px   =  2px
       gap             6px ->  5px   =  1px
                                       ----
                                       21px

   Button ends up near 146px against a 125px label. The stepper is down to
   30 + 34 + 30 = 94px from the 116px it had before pass 302 - still a
   comfortable click target with a mouse, and it is the only place left to take
   width from: the button is flex: 1 1 auto, so it already takes everything the
   row does not give to the stepper.

   This is close to the limit of what the row can do. If more air is ever
   wanted, the label has to get shorter ("V KOSARICO") or smaller - the row
   cannot wrap, because pass 102 reserves only 72px under the text block.

   The gutter change moves the pinned row 5px closer to the card edge on both
   sides, so it is now slightly wider than the text block above it. At 5px that
   is not noticeable, and the row is an action strip, not part of the text.
   ========================================================================== */
@media (min-width: 769px) {

.products-grid .product-item:not(.js-configurable-product) .product-item-info .cdz-product-bottom {
  left: 10px !important;
  right: 10px !important;
}
.products-grid .product-item .cdz-buttons-inner form[data-role="tocart-form"] {
  gap: 5px !important;
}
.products-grid .product-item .cdz-buttons-inner .field.qty .control .btn-qty,
.products-grid .product-item .cdz-buttons-inner .field.qty .control a.btn-qty {
  width: 30px !important;
}
.products-grid .product-item .cdz-buttons-inner .field.qty .control input.qty {
  width: 34px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 304: cart button and compare button share one line in the
   related products block on the product page.

   The block "POVEZANI IZDELKI" builds its cards as

       div.block.related
         div.related-upsell-crossell
           div.products.wrapper.grid.products-grid.products-related
             li.item.product.product-item
               div.product-item-info.related-available
                 div.cdz-product-bottom > div.cdz-buttons-container
                   div.cdz-buttons-inner
                     form[data-role=tocart-form] > button.action.tocart.primary
                     a.action.tocompare

   .cdz-buttons-inner is a plain block, so the 42px cart button and the 35px
   yellow compare square stack, and the pair is about 85px tall. Pass 102 pins
   .cdz-product-bottom to the bottom of the card and reserves only 72px above
   it, which is why the compare square ends up sitting on - or below - the card
   border.

   Making that box a flex row puts them side by side: the form takes the space
   that is left, the square keeps its 35px. The row is then one button tall
   (42px) and fits inside the 72px reservation with room to spare.

   The compare square keeps the theme's size and colour and is only centred
   vertically against the taller pill; it is not restyled here.

   Scoped to the related/upsell/crosssell blocks. The cards in categories, in
   search and in the featured products widget put their compare link somewhere
   else entirely (.bts-card-actions), so they are not affected.
   ========================================================================== */

.block.related .cdz-buttons-inner,
.related-upsell-crossell .cdz-buttons-inner {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.block.related .cdz-buttons-inner form[data-role="tocart-form"],
.related-upsell-crossell .cdz-buttons-inner form[data-role="tocart-form"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.block.related .cdz-buttons-inner > .action,
.related-upsell-crossell .cdz-buttons-inner > .action {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* ==========================================================================
   BTS REVAMP - pass 305: the button row of a related product card is pinned to
   the bottom of the card.

   Pass 102 already pins .cdz-product-bottom for cards in grids, but with two
   conditions that do not serve the related block well:

     - it excludes .js-configurable-product, so a related item that shows
       "Ze od ..." keeps its button row floating right under the title while
       its neighbours have theirs at the bottom;
     - it reserves 72px under the text block, which was the height of the old
       two-line row (42px button ABOVE a 35px compare square). Since pass 304
       put those two on one line the row is 42px tall, so 30px of that
       reservation are now an empty band between the text and the buttons.

   This block therefore repeats the pinning for .product-item-info
   .related-available without the exclusion and with the reservation brought
   down to 62px: 42px of row, 10px of bottom offset and 10px of clearance above
   it. .product-item-info is position: relative in the theme
   (styles-m.css: ".product-item-info{max-width:100%;position:relative;...}"),
   so the row anchors to the card itself.

   Same specificity as pass 102 (five classes either way) and later in the
   file, so it wins; the 10px side offset is the one pass 303 set, kept here so
   the two rules cannot drift apart.

   Only the related / upsell / crosssell cards on the product page. The cards in
   categories, in search and in the featured products widget keep pass 102.
   ========================================================================== */

.products-grid .product-item .product-item-info.related-available .product-item-details {
  position: static !important;
  padding-bottom: 62px !important;
}
.products-grid .product-item .product-item-info.related-available .cdz-product-bottom {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  top: auto !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 2 !important;
}
.products-grid .product-item .product-item-info.related-available .cdz-product-bottom .cdz-buttons-container,
.products-grid .product-item .product-item-info.related-available .cdz-product-bottom .cdz-buttons-inner {
  width: 100% !important;
  margin: 0 !important;
}

/* ==========================================================================
   BTS REVAMP - pass 306: the clear (x) button of the header search stays on
   the input line.

   Opening the search and typing one character pushed the x under the field and
   stretched the white pill from 50px to about 83px - the search looked broken.

   Cause: Amasty's own stylesheet is not loaded on this shop at all. None of
   the 23 stylesheets on a page comes from Amasty_Xsearch, so its rule

       .amsearch-input-wrapper .amsearch-button.-close
           { position: absolute; top: 0; bottom: 0; right: 0; margin: auto }

   never applies. The whole look of the search bar is rebuilt by hand in passes
   18/19/20, and pass 19 gives the x only

       .header-wrapper-center .amsearch-button.-close { right: 64px; left: auto }

   which assumes it is already absolutely positioned. It is not: .amsearch-button
   is display: inline-block, the wrapper is display: block (pass 18) and the
   input is width: 100%, so the x is pushed onto a second line and the pill
   grows to hold it. The loupe next to it looks right only because pass 19 does
   give that one "position: absolute".

   So the missing declaration is added here, with the same offset parent the
   loupe already uses - hence no position change on .amsearch-input-wrapper,
   which would move the loupe too.

   top: 9px centres a 32px box in the 50px pill that pass 19 defines
   ((50 - 32) / 2). bottom stays auto so the button cannot be stretched by a
   tall parent when the results dropdown is open underneath.

   right: 64px is pass 19's own value and is kept: the loupe is 56px wide and
   sits at right: 0, so the x lands 8px to its left, inside the 70px of right
   padding the input reserves.
   ========================================================================== */

.header-wrapper-center .amsearch-button.-close {
  position: absolute !important;
  top: 9px !important;
  bottom: auto !important;
  right: 64px !important;
  left: auto !important;
  margin: 0 !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 12px 12px !important;
  z-index: 2 !important;
}

/* ==========================================================================
   BTS REVAMP - pass 172: MOBILE ONLY - the top utility bar is gone.

   .page-header > .panel.wrapper is the black strip above the logo row. It
   carries three things, and on a phone every one of them is either useless or
   already reachable somewhere else:

     - .action.skip.contentarea   "Preskoci na vsebino" (visually hidden anyway)
     - .switcher-store            the store/language picker, which is printed a
                                  second time inside the off-canvas drawer as
                                  #switcher-store-nav
     - ul.header.links            greeting + Primerjaj + Prijava/Registracija;
                                  the login and the account link are on the
                                  sticky bottom bar since pass 121

   On a 390px screen the three columns of .panel.header wrap into three rows,
   so it costs ~90px of the first screen for a duplicate of what the drawer and
   the bottom bar already carry. It is display: none-d and not merely emptied:
   nothing inside it is moved anywhere by our JS (bts-mobile-bottombar.js and
   bts-mobile-menu.js never touch this subtree), so removing the box removes
   nothing that still has to work.

   DESKTOP IS UNTOUCHED - the whole rule sits inside the mobile media query,
   so the utility bar, its dark #373737 plate (pass 3 / pass 13) and the login
   dropdown all stay exactly as they are from 769px up.
   ========================================================================== */
@media (max-width: 768px) {

.page-header > .panel.wrapper,
.page-header .panel.wrapper {
  display: none !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 173: MOBILE ONLY - the search pill is shorter and the
   yellow loupe button fills it from top to bottom.

   Before: the white pill (.amsearch-form-block, painted white by pass 16)
   measured ~53px on a phone while the yellow button was the 44px that pass 87
   gives it, and the button sat at the bottom of the pill - so a ~9px white
   band ran across the top of the button, which is the "bel prostor nad lupo"
   in the screenshot.

   The gap exists because three different boxes were sized by three different
   passes and only two of them agree:

       pass 16  .amsearch-input               height: 50px
       pass 19  .amsearch-button.-loupe       position: absolute; top: 0;
                                              bottom: 0; height: 50px
       pass 87  .amsearch-input,
                .amsearch-button.-loupe       height: 44px

   nothing ever pinned .amsearch-form-block / .amsearch-input-wrapper itself,
   so the pill kept whatever height the theme's flex box gave it and the
   button, whose top/bottom/height are over-constrained, no longer reached
   both edges.

   The fix sizes the whole stack from one number instead of patching the
   offset: the pill, the input wrapper, the input and the button are all
   --bts-msearch-h tall, every bit of vertical padding/margin between them is
   zeroed, and the button gets bottom: auto so its single anchor is top: 0.
   40px instead of 44px is the "malce previsok" the user asked about.

   overflow stays visible (pass 21) - the live results panel hangs out of the
   pill and must not be clipped - and no height is set on
   .amsearch-wrapper-block, which is the element the results section is
   positioned against.

   DESKTOP IS UNTOUCHED: everything is inside @media (max-width: 768px).
   ========================================================================== */
@media (max-width: 768px) {

.header-wrapper-center {
  --bts-msearch-h: 40px;
}

/* the white pill itself: exactly as tall as what is inside it */
.header-wrapper-center .amsearch-form-block {
  height: var(--bts-msearch-h) !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: stretch !important;
}

/* the section that holds the input and the two icon buttons */
.header-wrapper-center .amsearch-input-wrapper {
  position: relative !important;
  height: var(--bts-msearch-h) !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* the text field (idle and while typing - the -typed state changes padding) */
.header-wrapper-center .amsearch-input,
.header-wrapper-center .amsearch-input-wrapper.-typed .amsearch-input {
  height: var(--bts-msearch-h) !important;
  min-height: 0 !important;
  line-height: var(--bts-msearch-h) !important;
  padding: 0 54px 0 14px !important;
  margin: 0 !important;
}

/* the yellow button: one anchor (top), so it can never drift to the bottom */
.header-wrapper-center .amsearch-button.-loupe,
.header-wrapper-center .amsearch-input-wrapper.-typed .amsearch-button.-loupe {
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  right: 0 !important;
  left: auto !important;
  margin: 0 !important;
  width: 48px !important;
  height: var(--bts-msearch-h) !important;
  border-radius: 0 12px 12px 0 !important;
}

/* the clear (x) button keeps its place just left of the loupe */
.header-wrapper-center .amsearch-button.-close {
  position: absolute !important;
  right: 50px !important;
  left: auto !important;
  top: 0 !important;
  bottom: auto !important;
  height: var(--bts-msearch-h) !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 174: no dead space under the header search row.

   The theme sets

       styles-m.css
         .page-header .header-wrapper-middle { padding: 0 15px 15px }

   and styles-l.css never overrides it, so the 15px at the bottom is charged
   at every width. What that padding sits under is empty: .header-wrapper-middle
   holds only .mobile-search-wrapper > #mobile-search-content >
   #mobile-search-form-container, and the theme script that would fill it moves
   $('#search_mini_form') - an element Amasty's search block never prints, so
   the container stays empty and the real search pill lives in
   .header-wrapper-center (see pass 173).

   On desktop styles-l.css additionally does .mobile-search-wrapper{display:none},
   so there the padding is 15px of dark strip under a hidden box.

   Only the padding is restated, exactly as the user gave it; the side 15px are
   kept so the row still lines up with the rest of the header. No media query -
   the rule it replaces has none either, and the space it removes is empty on
   both sides of the 768px boundary.
   ========================================================================== */

.page-header .header-wrapper-middle {
  padding: 0px 15px 0px !important;
}

/* ==========================================================================
   BTS REVAMP - pass 175: MOBILE ONLY - the grey hairline above the search.

   The only ::before inside .header-wrapper-center that paints anything is on
   the search block itself:

       styles-m.css
         .page-header .amsearch-wrapper-block:before
             { background: #ccc; content: ''; height: 1px; position: absolute;
               top: 0; margin: 0 -15px; width: calc(100% + 15px * 2) }

   a 1px #ccc rule bled 15px past both edges of the block, i.e. a light
   separator drawn across the full width of the header, straight over our dark
   #373737 plate. It is already a mobile-only artefact - styles-l.css turns it
   off with .page-header .amsearch-wrapper-block:before{content:none} - and it
   was meant to separate the search from the utility bar that pass 172 removed,
   so on a phone it now sits under nothing.

   Killed with content: none rather than display/background, so the box is
   never generated at all and no leftover margin or width can come back.

   (.amsearch-button.-loupe:before is NOT touched - that one is the FontAwesome
   glyph in the yellow button, see pass 16 / pass 19.)

   DESKTOP IS UNTOUCHED: the rule is inside the mobile media query, and above
   768px styles-l.css already does the same thing.
   ========================================================================== */
@media (max-width: 768px) {

.page-header .amsearch-wrapper-block:before,
.header-wrapper-center .amsearch-wrapper-block:before {
  content: none !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 176: MOBILE ONLY - no gap above the search pill.

   The search block carries both classes on one element:

       <section class="amsearch-wrapper-block search-wrapper">

   and the theme gives it

       styles-m.css
         .amsearch-wrapper-block { margin: 10px 0 0 0; padding: 20px 0; ... }

   styles-l.css resets both to 0 for desktop, so this is a mobile-only offset.
   The 20px of padding is already gone - pass 16 zeroes it through the other
   class (.search-wrapper{padding:0 !important}) - so the 10px margin-top was
   the last bit of empty dark space between the logo row and the white pill,
   and with the hairline of pass 175 removed there is nothing left up there for
   it to make room for.

   Only margin-top is set, exactly as asked; the other three sides are already
   0 in the theme shorthand and are left alone.

   DESKTOP IS UNTOUCHED: inside the mobile media query, and styles-l.css
   already sets margin: 0 above 768px.
   ========================================================================== */
@media (max-width: 768px) {

.page-header .amsearch-wrapper-block.search-wrapper,
.header-wrapper-center .amsearch-wrapper-block {
  margin-top: 0px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 177: MOBILE ONLY - breadcrumbs are back on category pages.

   No markup is added: Magento already prints the trail on every category page,
   and it already sits exactly where it was asked to be -

       </header>
       <div class="wrapper-breadcrums">
         <div class="breadcrumbs"><ul class="items"> ... </ul></div>
       </div>
       <main id="maincontent" class="page-main">
         <div class="page-title-wrapper"><h1 class="page-title"> ...

   i.e. the last thing before <main>, therefore directly above the H1. The only
   reason it was invisible on a phone is one line the theme hides it with:

       styles-m.css, inside @media only screen and (max-width: 768px)
         .breadcrumbs { display: none }

   Nothing in styles-l.css re-enables it, which is why the trail shows on
   desktop only by virtue of that media query not matching there.

   So this pass just turns the box back on for the same width band, and scopes
   it to .catalog-category-view - the category listing the user is on. Product
   and CMS pages keep the theme's behaviour; widening it later is one selector.

   The theme's own .breadcrumbs .items{padding:20px 0 0} is meant for the
   desktop gap under the header; on a phone that is a lot of empty space right
   where pass 172/175/176 just removed some, so the block gets a tighter
   padding and a small gap to the H1 instead.

   DESKTOP IS UNTOUCHED: everything is inside @media (max-width: 768px), where
   the desktop stylesheet does not apply anyway.
   ========================================================================== */
@media (max-width: 768px) {

.catalog-category-view .wrapper-breadcrums .breadcrumbs,
.catalog-category-view .breadcrumbs {
  display: block !important;
}

/* the trail itself: tighter than the desktop 20px, and allowed to wrap onto a
   second line rather than pushing the page wider on a deep category */
.catalog-category-view .wrapper-breadcrums .breadcrumbs .items {
  padding: 10px 0 4px !important;
  line-height: 1.5 !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 178: MOBILE ONLY - breadcrumbs on product pages too.

   Same mechanism as pass 177, one more body class. The product page prints the
   identical block in the identical place - .wrapper-breadcrums > .breadcrumbs
   as the last thing before <main id="maincontent"> - and the theme hides it
   with the same styles-m.css line inside @media only screen and
   (max-width: 768px): .breadcrumbs{display:none}.

   Two differences worth knowing on a PDP:

     - the trail is one level deeper than on a category page, because the
       product itself is the last <li> (Domov > Rezilno orodje > Sveder HSS >
       Sveder HSS MK vpetje ... > SVEDER MK HSS 4XD DIN345 A130 DORMER), so on
       a phone it wraps onto three or four lines. It is left wrapping rather
       than clipped to one scrollable line, so no step of the trail is hidden;
     - .page-title-wrapper is not right under it here - on a 1column PDP the
       H1 sits inside .columns > .column.main - so the trail heads the whole
       page instead of hugging the title. That is where the theme puts it on
       desktop as well.

   DESKTOP IS UNTOUCHED: inside the mobile media query.
   ========================================================================== */
@media (max-width: 768px) {

.catalog-product-view .wrapper-breadcrums .breadcrumbs,
.catalog-product-view .breadcrumbs {
  display: block !important;
}

.catalog-product-view .wrapper-breadcrums .breadcrumbs .items {
  padding: 10px 0 4px !important;
  line-height: 1.5 !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 179: "Dodaj v kosarico" and "Izberi dimenzijo" get the
   look of the supplied mock-up (image (3)). DESKTOP AND MOBILE.

   The mock-up is the revamp design's own CTA; the source is in
   /home/system/bts-revamp-design, e.g. Main.dc.html:

       height:38px; border-radius:9px; background:var(--ink);
       color:var(--yellow); display:flex; align-items:center;
       justify-content:center; gap:8px; font-size:12px; font-weight:800;
       + a 15x15 stroked cart svg

   so: a dark plate with softly rounded corners, yellow bold uppercase label,
   a yellow outline cart next to it - and NO yellow outline around the button.

   What the two buttons looked like before, and why:

     - the cart button was given the dimension button's look by pass 101:
       a 999px pill with a 2px #efcf38 border;
     - the dimension badge gets its border from the page's own inline <style>,
       which is not ours:
           .products-grid .product-item .product-item-info
             .bts-configurable-badge { border: 2px solid #efd111;
                                       background: white; color: #000; ... }
       Our pass 16 already overrides the background and the colour with
       !important but never touched the border, which is why the yellow ring
       survived. It is switched off here explicitly.

   Deliberate departures from the mock-up, both one-liners to change:

     1. the plate is var(--bts-ink) = #373737, not the design file's #0c0c0d.
        The mock-up's own rule says background: var(--ink) - the same token -
        and pass 13 is what set this site's ink to #373737 ("replace pure black
        with #373737 across our changes"). Using the token keeps these two
        buttons the same dark as the header, the footer and the PDP button.
     2. the cart icon goes on the RIGHT of the label, as in the image that was
        sent; every .dc.html in the design folder puts the same svg on the left.

   The icon is the design's own svg, inlined as a mask instead of a background
   image, so it is painted with background-color: currentColor - it turns dark
   together with the label on hover, with no second asset and no hover rule of
   its own. "Izberi dimenzijo" gets no cart: it does not add anything to the
   cart, it opens the product.

   SIZE IS NOT TOUCHED here on purpose - height, font-size and padding stay
   with pass 101 (desktop: 42px / 12px) and pass 115 (mobile: 40px / 11.5px),
   which are later-loaded and width-specific; this pass only restyles the
   surface, so both widths keep the proportions they were given.
   ========================================================================== */

:root {
  --bts-cart-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3Cpath d='M3 4h2l2.2 11.2a2 2 0 0 0 2 1.6h7.6a2 2 0 0 0 2-1.6L21 8H6'/%3E%3C/svg%3E");
}

/* ---- the plate, shared by both buttons ---------------------------------- */
.products-grid .product-item .cdz-buttons-container button.action.tocart.primary,
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary,
.product-item .cdz-buttons-inner button.action.tocart.primary,
.products-grid .product-item .product-item-info .bts-configurable-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--bts-ink, #373737) !important;
  color: var(--bts-yellow, #efd111) !important;
  border: none !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  letter-spacing: .3px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease !important;
}

/* ---- inverted on hover; the icon follows through currentColor ----------- */
.products-grid .product-item .cdz-buttons-container button.action.tocart.primary:hover,
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary:hover,
.product-item .cdz-buttons-inner button.action.tocart.primary:hover,
.products-grid .product-item .product-item-info .bts-configurable-badge:hover,
.products-grid .product-item .product-item-info .bts-configurable-badge:focus {
  background: var(--bts-yellow, #efd111) !important;
  color: var(--bts-yellow-ink, #1c1a08) !important;
  border: none !important;
  text-decoration: none !important;
}

/* @supports guard: where the mask property does not exist the ::after would
   be a plain 15px yellow square, so the icon is only generated where it can
   actually be cut out. */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {

/* ---- the cart, on the cart button only ---------------------------------- */
.products-grid .product-item .cdz-buttons-container button.action.tocart.primary:after,
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary:after,
.product-item .cdz-buttons-inner button.action.tocart.primary:after {
  content: "" !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 15px !important;
  height: 15px !important;
  background-color: currentColor !important;
  -webkit-mask: var(--bts-cart-ico) center / contain no-repeat !important;
          mask: var(--bts-cart-ico) center / contain no-repeat !important;
}

}

@media (max-width: 768px) {

/* the mobile card is narrower and the label is 11.5px there (pass 115) */
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary:after,
.product-item .cdz-buttons-inner button.action.tocart.primary:after {
  width: 13px !important;
  height: 13px !important;
}
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary,
.product-item .cdz-buttons-inner button.action.tocart.primary {
  gap: 6px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 180: the CTA label can no longer run out of its button.

   Measured from the screenshot: the dark plate is 125px wide, the yellow label
   plus the cart is ~140px, and it is centred - so it stuck out ~7px on the left
   and the cart sat just past the right edge.

   Three things line up to produce that, and only the last one is really a bug:

     - the card column is narrow. On a phone the grid is two cards wide, which
       leaves about 125px of content per card; that is the whole width the
       button has, because pass 115 already lets the qty stepper wrap onto its
       own line above it. There is no more width to hand out.
     - pass 101 gave the button "white-space: nowrap" together with
       "min-width: 0", i.e. the label may not break AND the box may shrink below
       the label - so the overflow had nowhere to go but outside.
     - pass 179 then added the 15px cart plus an 8px gap, which is exactly the
       ~23px that pushed a label that used to just fit over the edge.

   The design file solves this by calling the button "V KOŠARICO" (10
   characters); ours says "DODAJ V KOŠARICO" (16), which no 125px box fits on
   one line at a readable size. So the label is allowed to break instead, and
   the button grows downwards rather than sideways:

     white-space: normal + height: auto + min-height (the old fixed height)

   Where the card is wide enough the label still sits on one line and nothing
   changes; the tighter padding and letter-spacing below buy back ~12px, which
   is enough to keep the desktop card on one line.

   min-width: 0 from pass 101/75 is deliberately kept - it is what holds four
   cards in a row - and it is now harmless, because a label that can wrap has
   no min-content width to overflow with.
   ========================================================================== */

.products-grid .product-item .cdz-buttons-container button.action.tocart.primary,
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary,
.product-item .cdz-buttons-inner button.action.tocart.primary,
.products-grid .product-item .product-item-info .bts-configurable-badge {
  height: auto !important;
  min-height: 42px !important;
  padding: 5px 10px !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.2 !important;
  letter-spacing: .2px !important;
  text-align: center !important;
}

/* the theme wraps the label in a <span>; it has to be allowed to break too */
.products-grid .product-item .cdz-buttons-container button.action.tocart.primary > span,
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary > span,
.product-item .cdz-buttons-inner button.action.tocart.primary > span {
  white-space: normal !important;
  line-height: 1.2 !important;
  min-width: 0 !important;
}

@media (max-width: 768px) {

/* pass 115 sizes the phone button 40px/11.5px; keep that as the floor and drop
   the letter-spacing, which on 16 uppercase characters is another ~3px saved */
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary,
.product-item .cdz-buttons-inner button.action.tocart.primary,
.products-grid .product-item .product-item-info .bts-configurable-badge {
  min-height: 40px !important;
  padding: 5px 8px !important;
  letter-spacing: 0 !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 181: a bigger cart on the CTA.

   Pass 179 took the 15px (desktop) / 13px (phone) the design file uses for the
   small card button; this raises it to 18px / 16px, which is the size
   ProductDesktop.dc.html gives the big PDP version of the same button.

   The icon is a flex item with flex: 0 0 auto, so the extra 3px come out of the
   label's share of the line - on a narrow card that can be what tips the label
   onto a second line. That is now harmless: pass 180 lets it wrap and the
   button grows downwards instead of spilling out.

   Only the box is resized; the mask keeps "contain", so the svg scales with it
   and the stroke stays proportional.
   ========================================================================== */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {

.products-grid .product-item .cdz-buttons-container button.action.tocart.primary:after,
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary:after,
.product-item .cdz-buttons-inner button.action.tocart.primary:after {
  width: 18px !important;
  height: 18px !important;
}

}

@media (max-width: 768px) {

.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary:after,
.product-item .cdz-buttons-inner button.action.tocart.primary:after {
  width: 16px !important;
  height: 16px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 182: the cart icon is 25px, at every width.

   The two selectors the user gave are the ones from pass 181's mobile block.
   A third one is added here - the .cdz-buttons-container variant - because
   that is the MORE SPECIFIC of the selectors pass 179/181 use for the same
   button (.products-grid .product-item .cdz-buttons-container button... beats
   .product-item .cdz-buttons-inner button...), so without it the desktop would
   quietly keep the 18px of pass 181 while only the phone went to 25px.

   No media query: one size for desktop and mobile, which is what the two sizes
   before it were split for and are no longer.

   On the narrow phone card (about 125px of button) a 25px cart leaves roughly
   70px for the label, so "DODAJ V KOŠARICO" will sit on two lines there. That
   is contained - pass 180 lets the button grow downwards - but it is the reason
   the button gets taller on a phone, not a second bug.
   ========================================================================== */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {

.products-grid .product-item .cdz-buttons-container button.action.tocart.primary:after,
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary:after,
.product-item .cdz-buttons-inner button.action.tocart.primary:after {
  width: 25px !important;
  height: 25px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 183: MOBILE ONLY - the toolbar keeps its own parts.

   The sorter really does leave the box, and it is one theme rule that sends it:

       styles-m.css, NO media query at all
         .page-products .sorter { position: absolute; right: 10px; top: 0;
                                  z-index: 1 }

       styles-m.css, inside @media all and (min-width: 640px)
         .page-products .sorter { position: static }

   so from 640px up the sorter is back in the flow and everything looks right -
   and below 640px it stays absolutely positioned. What it is positioned
   against is the catch: .toolbar-products is only given position: static at
   >=768px and has no position of its own below that, so the sorter skips the
   toolbar entirely and anchors to the first positioned ancestor it finds, up
   near the page title. That is the "Razvrsti po ... " row sitting above
   "NAKUPOVALNE MOŽNOSTI" in the screenshot, with the direction arrow pushed
   against the right edge by right: 10px.

   Rather than nudging that one element back with offsets - which would only be
   right at one screen width - the toolbar is made to lay itself out:

     - the sorter (and the amount, which the theme also positions absolutely
       and only un-positions for .page-with-filter) go back into the flow;
     - .toolbar-products becomes a wrapping flex row, so its parts sit next to
       each other while there is room and drop onto the next line when there is
       not, at any width;
     - it is also made position: relative, so if any other descendant is left
       absolute by some other stylesheet it can no longer escape past the
       toolbar;
     - every child gets min-width: 0 and max-width: 100%, which is what stops a
       long <select> from pushing the row wider than the screen.

   The count line takes a full row of its own (it is a sentence), the "Prikaži
   N na stran" and "Razvrsti po" controls share the row under it and wrap apart
   when the screen is too narrow for both.

   DESKTOP IS UNTOUCHED: all of it is inside @media (max-width: 768px). Between
   640px and 768px this only repeats the position: static the theme already
   sets there.
   ========================================================================== */
@media (max-width: 768px) {

/* 1. nothing in the toolbar is absolutely positioned any more */
.page-products .toolbar.toolbar-products .sorter,
.page-products .toolbar.toolbar-products .toolbar-sorter,
.page-products .toolbar.toolbar-products .toolbar-amount {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
}

/* 2. the toolbar lays itself out, and contains anything still absolute */
.page-products .toolbar.toolbar-products {
  position: relative !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* 3. no child may be wider than the toolbar */
.page-products .toolbar.toolbar-products > * {
  float: none !important;
  margin: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 4. the count is a sentence - it gets its own line */
.page-products .toolbar.toolbar-products > .toolbar-amount {
  flex: 1 1 100% !important;
  padding: 0 !important;
}

/* 5. the two controls share the next line and wrap apart when it is too narrow */
.page-products .toolbar.toolbar-products > .field.limiter,
.page-products .toolbar.toolbar-products > .toolbar-sorter {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 1 auto !important;
}

/* 6. the selects may shrink instead of pushing the row off screen */
.page-products .toolbar.toolbar-products .sorter-options,
.page-products .toolbar.toolbar-products .limiter-options {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.page-products .toolbar.toolbar-products .sorter-label,
.page-products .toolbar.toolbar-products .limiter .label,
.page-products .toolbar.toolbar-products .limiter-text {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* 7. the direction arrow stays beside its select, not at the screen edge */
.page-products .toolbar.toolbar-products .sorter-action {
  flex: 0 0 auto !important;
  position: static !important;
  margin: 0 !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 184: MOBILE ONLY - no reserved strip above the listing.

   The theme keeps a 60px band at the top of the listing column:

       styles-m.css, no media query
         .page-products .columns { padding-top: 60px; position: relative;
                                   z-index: 1 }
       styles-m.css, @media only screen and (max-width: 767px)
         .page-products .page-main .columns { padding-top: 60px }
         .page-layout-1column.catalog-category-view .columns { padding-top: 60px }
       styles-m.css, @media all and (min-width: 640px)
         .page-products .columns { padding-top: 0 }

   That band is not decoration: it is the room the absolutely positioned
   toolbar parts were meant to sit in, and "position: relative" on this very
   element is what they anchored to - it is the ancestor the sorter escaped to
   in pass 183. With the toolbar laying itself out in the flow, the 60px is
   empty, so it goes.

   position: relative is deliberately NOT removed. Pass 183 relies on nothing
   here, but this element is still the containing block for anything the theme
   or a module positions against the listing column, and dropping it would move
   those to the page instead.
   ========================================================================== */
@media (max-width: 768px) {

.page-products .columns,
.page-products .page-main .columns,
.page-layout-1column.catalog-category-view .columns {
  padding-top: 0px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 185: MOBILE ONLY - the sort <select> fits its own text.

   "Ustreznost" was cut off because of a hard width on phones:

       styles-m.css, @media only screen and (max-width: 639px)
         .toolbar select { width: 100px }

   and the theme draws the drop-down arrow as a background image pinned to the
   right edge (select{appearance:none; background:#fff url(select-bg.svg)
   no-repeat 100% 45%}), so the last characters end up underneath it as well.

   The select goes back to width: auto, which is what .sorter-options asks for
   at every other width - a native select then sizes itself to its longest
   option, so this keeps working when a category offers more sort orders than
   "Ustreznost" (Ime, Cena, Pozicija ...). min-width keeps it from collapsing on
   a short option, max-width: 100% keeps it inside the toolbar row of pass 183,
   and the right padding is the room the arrow needs.

   The limiter select is left at the theme's 100px: it only ever holds 12 / 24 /
   36 and has no fitting problem.
   ========================================================================== */
@media (max-width: 768px) {

.page-products .toolbar.toolbar-products .sorter-options,
.page-products .toolbar.toolbar-products select#sorter {
  width: auto !important;
  min-width: 140px !important;
  max-width: 100% !important;
  padding-right: 28px !important;
  padding-left: 10px !important;
  text-overflow: ellipsis !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 186: MOBILE ONLY - the order of the home page blocks.

   Target order below 768px:

     col-sm-16 (slideshow) > bts-cat-shortcuts > col-sm-24 > col-sm-8
     > bts-brand-strip-head > am-widget-brand-slider

   col-sm-16, col-sm-8 and the four col-sm-24 are siblings in
   div.col-sm-18 > div.row and are sorted here with "order".

   bts-cat-shortcuts is not one of them - it is a child of .column.main, two
   levels up - so web/js/bts-mobile-menu.js (pass 186 block at the end of that
   file) moves that one node into this row on mobile and puts it back above the
   breakpoint. If that script does not run, these rules still leave the row in a
   sensible order; only the shortcuts stay where the theme puts them.

   .bts-brand-strip-head and the <p> holding .am-widget-brand-slider are left
   alone: they are already the last two children of .column.main, in the order
   that was asked for.

   The fifth col-sm-24 (the one under div.cdz-right, outside div.col-sm-18) is
   also left alone - it is in a different container, so it is not part of this
   sequence.

   Only the named columns get an order value. Anything else in the row keeps
   the flex default of 0 and therefore stays ahead of all of them; nothing is
   hidden, so a block added to this row later still shows up.

   DESKTOP IS UNTOUCHED: the whole block is inside the mobile media query, and
   the col-sm-* grid only takes effect from 768px up anyway.
   ========================================================================== */
@media (max-width: 768px) {

.cms-index-index .column.main .col-sm-18 > .row {
  display: flex !important;
  flex-direction: column !important;
}

.cms-index-index .column.main .col-sm-18 > .row > .col-sm-16 {
  order: 1 !important;
}
.cms-index-index .column.main .col-sm-18 > .row > .bts-cat-shortcuts {
  order: 2 !important;
  width: 100% !important;
}
.cms-index-index .column.main .col-sm-18 > .row > .col-sm-24 {
  order: 3 !important;
}
.cms-index-index .column.main .col-sm-18 > .row > .col-sm-8 {
  order: 4 !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 188: MOBILE ONLY - a slightly smaller logo.

   Pass 109 sizes the mobile logo with

       .header-wrapper-left .logo-left .logo img.main-logo, ... {
           width: 340px; max-width: 100%; height: auto }

   On a phone the 340px is never reached: the plate around it is capped at
   calc(100% - 94px) to leave room for the two icons in front of it (pass 119),
   so on a 390px screen the image ends up at about 275px and it is the
   max-width, not the width, that decides. Trimming the width alone would
   therefore change nothing - the cap is what has to come down.

   88% instead of 100% takes roughly 12% off. height stays auto, so the logo
   keeps its proportions; nothing else in the row is touched, and the plate
   still shrink-wraps around the smaller image.

   DESKTOP IS UNTOUCHED: inside the mobile media query. The desktop logo is
   sized separately (pass 86 / pass 87: 300px with 6px 12px of plate padding).
   ========================================================================== */
@media (max-width: 768px) {

.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: 300px !important;
  max-width: 88% !important;
  height: auto !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 189: the qty stepper is as tall as the cart button.

   Measured in the browser before the change:

       button.action.tocart.primary   42px  (desktop) / 40px (mobile), radius 9px
       .field.qty .control            27px, radius 8px
       a.btn-qty                      25x25, radius 15px, background #d9d9d9
       .field.qty.box-tocart          37px  (10px taller than the control)

   so the two controls that share the row were 15px apart in height.

   Three separate authors had a hand in the old size, which is why it did not
   simply follow the button:

     - pass 16 asks for 36x36 buttons, but writes width/height WITHOUT
       !important, so the theme's own 25px wins;
     - the page's inline <style> pills the ends of the stepper with
       "border-radius: 15px 0 0 15px !important" - a radius that only makes
       sense on a 25px-tall box;
     - nothing ever sized .control itself, so it was as tall as its contents.

   Now .control is given the button's height explicitly and the parts inside
   stretch to it, so the two boxes stay level whatever the row does. The 15px
   end pills go: at 42px they would be half-circles, so the rounding is left to
   .control (9px, the same as the button) with overflow: hidden.

   Scoped to the product card - .cdz-buttons-inner - on purpose. The PDP has its
   own stepper with its own sizing (passes around .product-info-main
   .product-add-form .box-tocart) and is deliberately not touched here.
   ========================================================================== */

/* the wrapper adds no height of its own */
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart,
.product-item .cdz-buttons-inner .field.qty.box-tocart {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* the visible box: exactly the button's height and the button's rounding */
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart .control,
.product-item .cdz-buttons-inner .field.qty.box-tocart .control {
  display: inline-flex !important;
  align-items: stretch !important;
  height: 42px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid var(--bts-line, #e3e3e3) !important;
  border-radius: 9px !important;
  overflow: hidden !important;
}

/* the minus / plus cells fill that height; the end pills of the page's own
   inline style are dropped, the rounding now comes from .control */
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart .qty-minus,
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart .qty-plus,
.product-item .cdz-buttons-inner .field.qty.box-tocart .qty-minus,
.product-item .cdz-buttons-inner .field.qty.box-tocart .qty-plus {
  display: flex !important;
  align-items: stretch !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart a.btn-qty,
.product-item .cdz-buttons-inner .field.qty.box-tocart a.btn-qty {
  width: 32px !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

/* the number in the middle stretches too, so there is no seam */
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart .qty-input,
.product-item .cdz-buttons-inner .field.qty.box-tocart .qty-input {
  display: flex !important;
  align-items: stretch !important;
  height: 100% !important;
  margin: 0 !important;
}
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart input.qty,
.product-item .cdz-buttons-inner .field.qty.box-tocart input.qty {
  height: 100% !important;
  min-height: 0 !important;
  width: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center !important;
  font-weight: 700 !important;
}

/* the phone button is 40px (pass 115), so the stepper follows it there */
@media (max-width: 768px) {

.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart .control,
.product-item .cdz-buttons-inner .field.qty.box-tocart .control {
  height: 40px !important;
}
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart a.btn-qty,
.product-item .cdz-buttons-inner .field.qty.box-tocart a.btn-qty {
  width: 28px !important;
}
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart input.qty,
.product-item .cdz-buttons-inner .field.qty.box-tocart input.qty {
  width: 34px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 190: MOBILE ONLY - qty stepper and cart button share one
   row; the button becomes the cart icon alone.

   Measured in the browser before the change - the row inside a card is:

       360px screen   108px
       390px screen   123px
       430px screen   143px

   and what used to be asked of it was about 200px: stepper 92px + 8px gap +
   a button holding the 73px label, the 25px cart, its gap and 16px of padding.
   That is why pass 115 let the row wrap - there was no other way to fit it.

   The label is what gives way (the user's choice, over going to one card per
   row): below 768px the button keeps only the cart, so the row needs

       stepper 70px + 4px gap + button >= 34px  =  108px

   which fits from 360px up, and every pixel above that goes to the button
   because it is the flexible one.

   The label is hidden with the clip technique rather than display: none, so it
   is still read by a screen reader; the button also keeps its
   title="Dodaj v košarico", so nothing about it is silent.

   DESKTOP IS UNTOUCHED - it has room for the label and keeps it.
   ========================================================================== */
@media (max-width: 768px) {

/* 1. one line, no wrapping */
.products-grid .product-item .cdz-buttons-inner form[data-role="tocart-form"],
.product-item .cdz-buttons-inner form[data-role="tocart-form"] {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
}

/* 2. the stepper keeps its height but gives up width */
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart,
.product-item .cdz-buttons-inner .field.qty.box-tocart {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart a.btn-qty,
.product-item .cdz-buttons-inner .field.qty.box-tocart a.btn-qty {
  width: 22px !important;
  font-size: 15px !important;
}
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart input.qty,
.product-item .cdz-buttons-inner .field.qty.box-tocart input.qty {
  width: 24px !important;
  font-size: 12px !important;
}

/* 3. the button is the cart, and takes whatever is left */
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary,
.product-item .cdz-buttons-inner button.action.tocart.primary {
  flex: 1 1 auto !important;
  min-width: 34px !important;
  padding: 0 4px !important;
  gap: 0 !important;
  justify-content: center !important;
}

/* the label stays in the accessibility tree, out of the picture */
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary > span,
.product-item .cdz-buttons-inner button.action.tocart.primary > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 191: the action row sits at the very bottom of the card.
   DESKTOP AND MOBILE.

   Before: the icon row (Podrobnosti / Primerjaj / Dodaj na seznam želja) sat
   ABOVE the qty+cart row on a simple product, and above "Izberi dimenzijo" on
   a configurable one. The two get there differently, which is why one rule is
   not enough:

       .product-item-info            flex column, FIXED height (582-658px)
         .cdz-hover-section          picture
         .product-item-details       flex column
           .product-item-name / .name-variant / .bts-price-group
           .cdz-product-bottom       the qty + cart row
           .bts-card-actions         the icon row
         .bts-configurable-badge     <- NOT inside details; the page's own
                                        script injects it into
                                        .product-item-info and pins it at
                                        bottom: 15px

   Because the badge lives OUTSIDE .product-item-details, no "order" inside
   details can put the icon row below it - "order" only sorts siblings. So the
   bottom of the card is laid out by offsets from .product-item-info, which is
   the box both card types share, and all three pieces are taken out of the
   flow:

       bottom 12px   the icon row          (new)
       bottom 90px   the CTA - cart row or "Izberi dimenzijo"
       above that    the text block, kept clear by details' padding-bottom

   The card has a fixed height, so this is safe: nothing here depends on how
   tall the text happens to be, and taking the icon row and the cart row out of
   the flow gives back exactly the height the reserved strip costs.

   An earlier attempt left the cart row IN the flow with margin-top: auto.
   Measured, that pushed the column past the card's fixed height on desktop and
   the row ended up on top of the icons - hence both CTAs are absolute here.

   The strip has to clear the tallest the icon row gets; measured per width:

       360px 92   390px 92   430px 81   768px 46   1024px 69   1440px 46

   the labels wrap on a narrow card. 90px from 769px up, 113px below it.
   ========================================================================== */

/* 1. the icon row is pinned to the very bottom of the card */
.products-grid .product-item .product-item-details,
.products-grid .product-item:not(.js-configurable-product) .product-item-details,
.products-grid .product-item.js-configurable-product .product-item-details {
  position: static !important;
  padding-bottom: 140px !important;
}
.products-grid .product-item .product-item-info .bts-card-actions {
  position: absolute !important;
  left: 15px !important;
  right: 15px !important;
  bottom: 12px !important;
  margin: 0 !important;
  z-index: 2 !important;
}

/* 2. the CTA sits directly above it - same offset for both card types */
.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: absolute !important;
  left: 15px !important;
  right: 15px !important;
  top: auto !important;
  bottom: 90px !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 2 !important;
}
.products-grid .product-item .product-item-info .bts-configurable-badge {
  bottom: 90px !important;
}

/* 3. a narrow card wraps the icon labels onto three lines */
@media (max-width: 768px) {

.products-grid .product-item .product-item-details,
.products-grid .product-item:not(.js-configurable-product) .product-item-details,
.products-grid .product-item.js-configurable-product .product-item-details {
  padding-bottom: 170px !important;
}
.products-grid .product-item .product-item-info .bts-card-actions {
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
}
.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: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 113px !important;
}
.products-grid .product-item .product-item-info .bts-configurable-badge {
  bottom: 113px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 192: the cart row drops closer to the icon row, so it
   stops covering the "Prihranek" line. DESKTOP.

   Pass 191 pinned the bottom of the card as

       bottom  12px  .bts-card-actions
       bottom  90px  the CTA

   and 90px was chosen to clear the TALLEST the icon row ever gets (69px at
   1024px, where the labels wrap onto two lines). On a wide screen the icon row
   is only 46px, so those 90px left the CTA ~23px higher than it had to be -
   high enough to sit on top of the savings line.

   Measured, on a card that has one (Akcijska cena / Prihranek):

       width   savings line ends   CTA top was   overlap
       1440px  114px from bottom   133px          19px
       1024px  114px from bottom   144px          30px
        768px  144px from bottom   164px          20px
        390px  221px from bottom   164px          none

   From 1200px up the icon row is 46px (its top is 58px from the bottom), so
   the CTA can come down to 68px: that keeps 8px between the two boxes and
   puts the CTA's top at 110px, just under the savings line's 114px.

   Below 1200px it stays at 90px. There the card is shorter (582px instead of
   658px) while the content is the same, and the icon row is 69px tall, so
   there is simply nowhere to go: moving the CTA down would put it on top of
   the icons instead. That width needs a taller card or a shorter price block,
   which is a design decision, not an offset.
   ========================================================================== */
@media (min-width: 1200px) {

.products-grid .product-item .product-item-info .cdz-product-bottom,
.products-grid .product-item:not(.js-configurable-product) .product-item-info .cdz-product-bottom {
  bottom: 70px !important;
}
.products-grid .product-item .product-item-info .bts-configurable-badge {
  bottom: 70px !important;
}

/* the icon row moves 4px closer to the edge, which is where those 4px of
   clearance for the CTA come from */
.products-grid .product-item .product-item-info .bts-card-actions {
  bottom: 8px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 193: "Brez davka" moves onto the price line.
   DESKTOP AND MOBILE.

   .bts-price-group is a plain block, so each of its children takes a row of
   its own. Measured, it comes in three shapes:

       PLAIN      price-box, bts-card-vat
       CONF       price-box ("Že od ..."), bts-card-vat
       DISCOUNT   bts-price-flag, price-box, bts-card-saving, bts-card-vat

   The group becomes a wrapping flex row instead, and the pieces are given the
   rows they should be on:

       row 1   bts-price-flag      ("Akcijska cena")   - full width
       row 2   price-box + bts-card-vat                - side by side
       row 3   bts-card-saving     ("Prihranek: ...")  - full width

   so "Brez davka" is next to the price in all three shapes, not under it.
   .price-box is display: flex and was stretching to the full width of the
   card; width: auto lets it shrink to its content so the caption has
   somewhere to sit.

   align-items: baseline puts the small caption on the price's baseline rather
   than centring it against a much taller box; flex-wrap means that on a narrow
   phone card, where the price and the caption do not fit side by side, the
   caption simply drops to the next line instead of overflowing.

   This also gives the card one row back (~13px), which is space the bottom of
   the card was short of - see pass 192.
   ========================================================================== */

.product-item .bts-price-group {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
}

/* "Akcijska cena" keeps its own row above the price */
.product-item .bts-price-group > .bts-price-flag {
  flex: 1 1 100% !important;
  order: 1 !important;
}

/* the price shrinks to its content instead of filling the row */
.product-item .bts-price-group > .price-box {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  order: 2 !important;
  margin: 0 !important;
}

/* the caption sits right beside it */
.product-item .bts-price-group > .bts-card-vat {
  flex: 0 1 auto !important;
  width: auto !important;
  order: 3 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* "Prihranek" stays on its own row, under both of them */
.product-item .bts-price-group > .bts-card-saving {
  flex: 1 1 100% !important;
  order: 4 !important;
}

/* ==========================================================================
   BTS REVAMP - pass 194: on a simple product the bottom of the card is laid
   out by the flow again, not by offsets. DESKTOP AND MOBILE.

   Pass 191/192 pinned the cart row and the icon row to the bottom of the card
   with absolute offsets. Measuring pass 193 showed why that can never settle:

       the product list runs with .product-items.same-height, and that script
       sizes every card in a row from its FLOW content. Absolutely positioned
       children are out of the flow, so the height it picks does not know about
       them - and .product-item-info is overflow: hidden, so whatever does not
       fit is simply cut.

   The effect was a moving target: pass 193 gave the price block one row back,
   the script promptly made the cards 19px shorter, and the cart row landed on
   "Prihranek" again. Chasing that with a smaller offset would only shrink the
   cards again.

   So for a simple product both rows go back into the flow, where the script
   can see them:

       .product-item-details   flex column, flex: 1
         ...text...
         .cdz-product-bottom   margin-top: auto  -> pushed to the bottom
         .bts-card-actions     order: 6          -> under it, last

   margin-top: auto is what pins the cart row to the bottom of the column
   without taking it out of the flow, so cards in a row still line up and the
   height the script computes is the height the card actually needs.

   Configurable cards keep the offsets of pass 191/192: their "Izberi
   dimenzijo" button is injected into .product-item-info rather than into
   .product-item-details, so it cannot be ordered against the icon row and has
   to be positioned. There the reserve lives in details' padding-bottom, which
   IS part of the flow and therefore IS counted by the script.
   ========================================================================== */

.products-grid .product-item:not(.js-configurable-product) .product-item-details,
.products-grid .product-item:not(.js-configurable-product) .product-item-info .product-item-details {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding-bottom: 12px !important;
}

.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;
  order: 5 !important;
  margin: auto 0 0 0 !important;
}

.products-grid .product-item:not(.js-configurable-product) .product-item-info .bts-card-actions {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  order: 6 !important;
  margin: 10px 0 0 0 !important;
}

/* pass 194b: a little air between the price block and the cart row, which
   margin-top: auto alone cannot guarantee (it only distributes free space) */
.products-grid .product-item:not(.js-configurable-product) .product-item-info .bts-price-group {
  margin-bottom: 10px !important;
}

/* pass 194c: details must actually absorb the free space of the fixed-height
   card, otherwise margin-top: auto on the cart row has nothing to push
   against and the block floats in the middle. flex-basis: 0 makes the growth
   unconditional; min-height: 0 stops the theme's 260px from interfering. */
.products-grid .product-item:not(.js-configurable-product) .product-item-info > .product-item-details {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
}

/* pass 194d: on a narrow card the caption is what tips the price line over, so
   it is a little smaller there and stays beside the price */
@media (max-width: 768px) {
.product-item .bts-price-group > .bts-card-vat {
  font-size: 11px !important;
}
}

/* ==========================================================================
   BTS REVAMP - pass 195: .product-item-details has no padding of its own.

   One exception, and it is structural rather than cosmetic: on a CONFIGURABLE
   card the bottom padding is not decoration, it is the space the absolutely
   positioned "Izberi dimenzijo" button and the icon row sit in (pass 191/194).
   That button is injected into .product-item-info instead of into details, so
   it cannot be ordered into the flow, and its reserve has to stay - zeroing it
   would put the button straight back on top of the price.

   Simple cards keep nothing: their cart row and icon row are in the flow since
   pass 194, so they need no reserve at all.
   ========================================================================== */

.products-grid .product-item .product-item-details,
.products-grid .product-item .product-item-info .product-item-details,
.products-grid .product-item:not(.js-configurable-product) .product-item-details,
.products-grid .product-item:not(.js-configurable-product) .product-item-info .product-item-details {
  padding: 0px !important;
}

/* the configurable card keeps only the bottom reserve */
.products-grid .product-item.js-configurable-product .product-item-details,
.products-grid .product-item.js-configurable-product .product-item-info .product-item-details {
  padding: 0px 0px 140px !important;
}

@media (max-width: 768px) {

.products-grid .product-item.js-configurable-product .product-item-details,
.products-grid .product-item.js-configurable-product .product-item-info .product-item-details {
  padding: 0px 0px 170px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 196: the product card is rebuilt to match primer.png.
   DESKTOP AND MOBILE.

   primer.png comes from this project's own design source - the card is in
   /home/system/bts-revamp-design/CategoryMobile.dc.html (and its desktop twin
   in CategoryDesktop.dc.html), so the values below are read from there rather
   than guessed off the picture:

       --yellow #f4c21e   --yellow-ink #1c1a08   --red #c8371f
       --ink-text #17181a --ink-text-lo #6b6b6e  --line-light #e7e5df

   card        1px #e7e5df, radius 16px, padding 14px, white
   top row     wishlist star left, "NA ZALOGI" pill right
   image       aspect 4/3, radius 10/12px, light diagonal gradient
   brand       11px/800   (blue, as in primer.png; the .dc file has it grey)
   sku         15px/700   #17181a
   desc        10.5/12px  #6b6b6e
   attribute   10/11px    #6b6b6e with a bold value
   price block separated by a top rule, 8/10px above it
     flag      #f4c21e on #1c1a08, 8.5/9.5px, radius 6px
     price     20/24px 800 #c8371f
     old       11/13px #6b6b6e line-through
     saving    10.5/11.5px 700 #c8371f on #fdeceb, radius 5px
     vat       9.5/10.5px #6b6b6e, ON ITS OWN LINE
   qty+cart    34px tall, radius 8px; the CTA is YELLOW with dark text

   Three of these were settled with the user because they reverse something
   from earlier today: the CTA goes from dark-with-yellow-text back to yellow
   (passes 179-182), "Brez davka" leaves the price line and gets its own row
   again (pass 193), and the brand is shown as text instead of as the logo
   image. All three were confirmed against primer.png.

   NOT DONE HERE, because the markup does not carry it: the "NA ZALOGI" pill
   has no stock element in list.phtml. It is drawn from CSS for cards that
   have a real add-to-cart form, which is the one thing in the markup that
   proves the product is salable - so it is never claimed for something that
   is not. Configurable cards have no form and therefore no pill; giving them
   one needs the template, and the template needs a container restart.
   ========================================================================== */

/* ---- the card ---------------------------------------------------------- */
.products-grid .product-item .product-item-info {
  background: #ffffff !important;
  border: 1px solid #e7e5df !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 14px !important;
}

/* ---- top row: star left, stock right ----------------------------------- */
.products-grid .product-item .cdz-hover-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.products-grid .product-item .cdz-hover-section > .bts-card-badges {
  position: static !important;
  order: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.products-grid .product-item .cdz-hover-section > .cdz-product-top {
  order: 2 !important;
}

/* the brand logo gives way to the brand name in the text block */
.products-grid .product-item .bts-card-badges .bts-brand-badge {
  display: none !important;
}

/* the wishlist star comes back as the left icon of that row */
.products-grid .product-item .bts-card-badges .cdz-product-wishlist {
  display: block !important;
  position: static !important;
  margin: 0 !important;
  order: 1 !important;
}
.products-grid .product-item .bts-card-badges .cdz-product-wishlist .action.towishlist {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  color: #c9c6bd !important;
  text-decoration: none !important;
}
.products-grid .product-item .bts-card-badges .cdz-product-wishlist .action.towishlist > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.products-grid .product-item .bts-card-badges .cdz-product-wishlist .action.towishlist:before {
  content: "\f006" !important;          /* FontAwesome outline star */
  font-family: FontAwesome !important;
  font-size: 17px !important;
  line-height: 1 !important;
  color: #c9c6bd !important;
}

/* "NA ZALOGI" - only where the markup proves the product is salable */
.products-grid .product-item:has(form[data-role="tocart-form"]) .bts-card-badges:after {
  content: "NA ZALOGI";
  order: 2;
  background: #e7f6ec;
  color: #2f9e5b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2px;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---- image ------------------------------------------------------------- */
.products-grid .product-item .cdz-product-top {
  background: linear-gradient(135deg, #eceae4, #f7f6f3) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* ---- text block -------------------------------------------------------- */
.products-grid .product-item .bts-card-brand {
  display: block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #1d2eab !important;
  letter-spacing: .2px !important;
  text-transform: uppercase !important;
  margin: 0 0 1px !important;
}
.products-grid .product-item .product-item-no {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #17181a !important;
  letter-spacing: 0 !important;
}
.products-grid .product-item .bts-card-title {
  font-size: 12px !important;
  color: #6b6b6e !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}
.products-grid .product-item .name-variant {
  font-size: 11px !important;
  color: #6b6b6e !important;
  margin: 6px 0 0 !important;
}
.products-grid .product-item .name-variant b {
  color: #17181a !important;
  font-weight: 700 !important;
}

/* ---- price block ------------------------------------------------------- */
.products-grid .product-item .bts-price-group {
  border-top: 1px solid #e7e5df !important;
  padding-top: 10px !important;
  margin-top: 10px !important;
  column-gap: 8px !important;
}
.products-grid .product-item .bts-price-group > .bts-price-flag {
  display: inline-block !important;
  background: #f4c21e !important;
  color: #1c1a08 !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  margin: 0 0 6px !important;
  width: auto !important;
}
.products-grid .product-item .bts-price-group .price-box .price {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #c8371f !important;
  line-height: 1.1 !important;
}
.products-grid .product-item .bts-price-group .old-price .price {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #6b6b6e !important;
  text-decoration: line-through !important;
}
.products-grid .product-item .bts-price-group .bts-card-saving {
  display: inline-block !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #c8371f !important;
  background: #fdeceb !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  margin: 4px 0 0 !important;
  width: auto !important;
}

/* "brez davka" back on a row of its own, under the saving (primer.png) */
.products-grid .product-item .bts-price-group > .bts-card-vat {
  flex: 1 1 100% !important;
  width: 100% !important;
  order: 5 !important;
  font-size: 10.5px !important;
  color: #6b6b6e !important;
  margin: 3px 0 0 !important;
  white-space: normal !important;
}

/* ---- qty stepper + cart ------------------------------------------------ */
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart .control {
  height: 34px !important;
  border: 1px solid #e7e5df !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart a.btn-qty {
  width: 28px !important;
  color: #17181a !important;
  background: transparent !important;
  font-size: 15px !important;
}
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart input.qty {
  width: 26px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #17181a !important;
  background: transparent !important;
}

/* the CTA is yellow with dark text, as in primer.png */
.products-grid .product-item .cdz-buttons-container button.action.tocart.primary,
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary,
.product-item .cdz-buttons-inner button.action.tocart.primary {
  height: 34px !important;
  min-height: 34px !important;
  background: #f4c21e !important;
  color: #1c1a08 !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .3px !important;
}
.products-grid .product-item .cdz-buttons-container button.action.tocart.primary:hover,
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary:hover,
.product-item .cdz-buttons-inner button.action.tocart.primary:hover {
  background: #e0b015 !important;
  color: #1c1a08 !important;
}

/* the dimension button follows the same palette */
.products-grid .product-item .product-item-info .bts-configurable-badge {
  background: #f4c21e !important;
  color: #1c1a08 !important;
  border-radius: 8px !important;
  font-size: 10.5px !important;
  min-height: 34px !important;
}

/* ---- the icon row keeps its place at the bottom, on a rule ------------- */
.products-grid .product-item .bts-card-actions {
  border-top: 1px solid #e7e5df !important;
  padding-top: 10px !important;
}
.products-grid .product-item .bts-card-action-label {
  color: #17181a !important;
}

/* ---- the mobile card is a little tighter (CategoryMobile.dc.html) ------- */
@media (max-width: 768px) {

.products-grid .product-item .cdz-product-top {
  border-radius: 10px !important;
}
.products-grid .product-item .bts-card-title {
  font-size: 10.5px !important;
}
.products-grid .product-item .name-variant {
  font-size: 10px !important;
}
.products-grid .product-item .bts-price-group {
  padding-top: 8px !important;
}
.products-grid .product-item .bts-price-group > .bts-price-flag {
  font-size: 8.5px !important;
  padding: 3px 7px !important;
}
.products-grid .product-item .bts-price-group .price-box .price {
  font-size: 20px !important;
}
.products-grid .product-item .bts-price-group .old-price .price {
  font-size: 11px !important;
}
.products-grid .product-item .bts-price-group .bts-card-saving {
  font-size: 10.5px !important;
}
.products-grid .product-item .bts-price-group > .bts-card-vat {
  font-size: 9.5px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 196b: the five places where the card still read
   differently from primer.png once it was rendered side by side.

   1. the price block goes back to being a plain block. Pass 193 made it a
      flex row so "Brez davka" could sit beside the price; primer.png puts
      that caption back on its own line, so the flex row has no job any more -
      and it was what stretched the "AKCIJSKA CENA" pill across the whole card
      instead of letting it hug its text.
   2. on a phone the price and the old price are stacked, as in
      CategoryMobile.dc.html; side by side is the desktop arrangement.
   3. the picture gets the design's 4/3 box instead of whatever the image
      happens to be.
   4. the icon labels were breaking mid-word ("PODRO BNOSTI") because an
      earlier pass gave the card overflow-wrap: break-word; they are allowed to
      break on spaces only, at the design's 8px.
   5. the star row needs no gap under it when the picture already has one.
   ========================================================================== */

/* 1. price block: block again, so the pills hug their text */
.products-grid .product-item .bts-price-group {
  display: block !important;
}
.products-grid .product-item .bts-price-group > .bts-price-flag,
.products-grid .product-item .bts-price-group > .bts-card-saving {
  width: auto !important;
  max-width: 100% !important;
}
.products-grid .product-item .bts-price-group > .bts-card-vat {
  display: block !important;
  width: auto !important;
}

/* 2. price and old price: stacked on a phone, side by side above it */
.products-grid .product-item .bts-price-group .price-box {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  column-gap: 8px !important;
  width: auto !important;
}
@media (max-width: 768px) {
.products-grid .product-item .bts-price-group .price-box > .special-price,
.products-grid .product-item .bts-price-group .price-box > .old-price {
  flex: 1 1 100% !important;
}
}

/* 3. the picture box */
.products-grid .product-item .cdz-product-top {
  aspect-ratio: 4 / 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.products-grid .product-item .cdz-product-top .product-item-photo,
.products-grid .product-item .cdz-product-top .main-image {
  width: 100% !important;
  height: 100% !important;
}
.products-grid .product-item .cdz-product-top img.product-image-photo {
  max-height: 100% !important;
  object-fit: contain !important;
}

/* 4. the icon labels break on spaces, not inside words */
.products-grid .product-item .bts-card-action-label {
  font-size: 8px !important;
  line-height: 1.25 !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  hyphens: none !important;
}

/* 5. no double gap between the star row and the picture */
.products-grid .product-item .cdz-hover-section > .bts-card-badges {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   BTS REVAMP - pass 196c: the picture fills the 4/3 box instead of being
   cropped by it, and the icon labels stop overflowing their column.

   Magento sizes catalog images with a per-product inline <style> - a square
   .product-image-container with a padding-bottom aspect hack and the <img>
   absolutely positioned inside it. Measured, that container stayed 143x143
   inside the 143x107 box of pass 196b, so overflow: hidden cut the bottom off
   the picture. The hack is neutralised inside the card and the image is told
   to fit the box with object-fit: contain, which is what the design shows.

   The labels: pass 196b forbade breaking inside words to stop "PODRO BNOSTI",
   but on a real phone the card is 143px wide and a column is about 46px, so
   "PODROBNOSTI" cannot fit on one line at any readable size and it overflowed
   instead. primer.png does not hit this because its own card is about 315px
   wide. They are allowed to break again, but only where they have to.
   ========================================================================== */

.products-grid .product-item .cdz-product-top .main-image,
.products-grid .product-item .cdz-product-top .hover-image {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  padding: 0 !important;
  height: auto !important;
}
.products-grid .product-item .cdz-product-top .product-image-container {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.products-grid .product-item .cdz-product-top .product-image-wrapper {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding-bottom: 0 !important;
}
.products-grid .product-item .cdz-product-top img.product-image-photo {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
}

.products-grid .product-item .bts-card-action-label {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* ==========================================================================
   BTS REVAMP - pass 197: the strike on the old price is as wide as the price
   again, not as wide as the card.

   The strike is not a text-decoration. The page's own inline <style> draws it
   as a bar:

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

   which, as pass 114 already noted for the search results, "only works while
   .old-price hugs its text". Pass 196b broke exactly that: to stack the price
   and the old price on a phone it gave both of them flex: 1 1 100%, so
   .old-price became a full-width flex item and the bar grew with it.

   The line break is now made by the element ABOVE it instead: .special-price
   takes the whole row, which pushes .old-price onto the next line, and
   .old-price itself goes back to hugging its content. Same stacking, bar back
   on the number.

   Also restated for the desktop row, where .old-price sits beside the price -
   there it must not grow either.
   ========================================================================== */

.products-grid .product-item .bts-price-group .price-box > .old-price {
  flex: 0 0 auto !important;
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  position: relative !important;
}

@media (max-width: 768px) {

/* the price takes the full row, so the old price starts a new line by itself */
.products-grid .product-item .bts-price-group .price-box > .special-price {
  flex: 1 1 100% !important;
}
.products-grid .product-item .bts-price-group .price-box > .old-price {
  flex: 0 0 auto !important;
  width: auto !important;
}

}

/* pass 197b: above the phone breakpoint the two prices share a line again
   (CategoryDesktop.dc.html) - the price must not claim the whole row there. */
@media (min-width: 769px) {
.products-grid .product-item .bts-price-group .price-box > .special-price {
  flex: 0 1 auto !important;
  width: auto !important;
}
}

/* ==========================================================================
   BTS REVAMP - pass 198: everything in .cdz-buttons-inner is 25% smaller.

   Measured before, identical on desktop and mobile:

       row height        34px      ->  26px
       stepper box       84px      ->  64px
       - / + cell        28px      ->  21px
       qty field         26px      ->  20px
       corner radius      8px      ->   6px
       cart icon         25px      ->  19px
       label            10.5px     ->   8px

   Every number is the old one times 0.75, rounded to the nearest pixel; the
   stepper's 64px is what its three cells plus the 1px border come to, so the
   box still closes exactly around them.

   The row is sized from four different passes (189 set it level with the
   button, 190 squeezed it for the phone, 196 gave it the design's 34px, 182
   set the icon), so each of those is restated here rather than patched - and
   with the same selectors, so specificity is unchanged and only the values
   move.
   ========================================================================== */

/* the row itself */
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart .control,
.product-item .cdz-buttons-inner .field.qty.box-tocart .control {
  height: 26px !important;
  border-radius: 6px !important;
}
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart a.btn-qty,
.product-item .cdz-buttons-inner .field.qty.box-tocart a.btn-qty {
  width: 21px !important;
  font-size: 11px !important;
}
.products-grid .product-item .cdz-buttons-inner .field.qty.box-tocart input.qty,
.product-item .cdz-buttons-inner .field.qty.box-tocart input.qty {
  width: 20px !important;
  font-size: 9px !important;
}

.products-grid .product-item .cdz-buttons-container button.action.tocart.primary,
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary,
.product-item .cdz-buttons-inner button.action.tocart.primary {
  height: 26px !important;
  min-height: 26px !important;
  border-radius: 6px !important;
  font-size: 8px !important;
  padding: 0 8px !important;
  gap: 5px !important;
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {

.products-grid .product-item .cdz-buttons-container button.action.tocart.primary:after,
.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary:after,
.product-item .cdz-buttons-inner button.action.tocart.primary:after {
  width: 19px !important;
  height: 19px !important;
}

}

@media (max-width: 768px) {

.products-grid .product-item .cdz-buttons-inner button.action.tocart.primary,
.product-item .cdz-buttons-inner button.action.tocart.primary {
  min-width: 26px !important;
  padding: 0 3px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 199: the icon row really is at the bottom of the card,
   on a phone as well.

   On desktop it already was (15px off the bottom, which is the card's own
   padding). On a phone it floated: measured, the worst card had 204px of empty
   space under it.

   The cause is not ours. The page's inline <style> contains

       .products.wrapper.grid.products-grid .cdz-product-bottom.hover-effect
           { margin-top: 350px }
       @media (max-width: 767px) { ...same selector... { margin-top: 0 !important } }

   That selector carries six classes, so it outranks the
   ".products-grid .product-item:not(.js-configurable-product)
     .product-item-info .cdz-product-bottom" of pass 194 (five). On desktop its
   350px has no !important and loses, which is why margin-top: auto worked
   there and only there; below 767px the !important version won and the auto
   margin - the thing that pushes the cart row and the icon row to the bottom
   of the column - was switched off.

   Restated here with a selector that outranks it. Nothing else changes: the
   two rows stay in the flow, which is what keeps the same-height script able
   to measure them (pass 194).
   ========================================================================== */

.products.wrapper.grid.products-grid .product-item:not(.js-configurable-product) .product-item-info .cdz-product-bottom.hover-effect,
.products.wrapper.grid.products-grid .product-item:not(.js-configurable-product) .product-item-details .cdz-product-bottom.hover-effect {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

/* if a card has no cart row at all, the icon row takes the job of closing the
   column, so it is pushed down instead */
.products.wrapper.grid.products-grid .product-item:not(.js-configurable-product) .product-item-details > .bts-card-actions {
  margin-top: 10px !important;
}

/* ==========================================================================
   BTS REVAMP - pass 200: the dimension button and the cart row are both glued
   to the bottom of the card, directly above the icon row, and the two are the
   same size.

   web/js/bts-mobile-menu.js (pass 200 block) moves .bts-configurable-badge out
   of .product-item-info and into .product-item-details, so it becomes a
   sibling of the cart row and of the icon row. From there this is the same
   arrangement simple products have had since pass 194:

       order 5   .cdz-product-bottom / .bts-configurable-badge   margin-top: auto
       order 6   .bts-card-actions

   margin-top: auto eats whatever space is left in the column, so both sit
   straight above the icon row whatever the card height or the icon row's own
   height turns out to be - no offsets to keep in sync.

   The page's inline <style> still positions the button absolutely
   (position: absolute; margin-left: 50%; width: calc(100% - 30px);
   max-width: 87%; bottom: 15px) and pass 74 adds left/transform to centre it.
   All of that is undone here, because in the flow it would only push the
   button out of the card.

   Size: the button is given the cart row's width (the full column) and the
   26px height that pass 198 gave the row, so the two are interchangeable.

   The reserve that pass 195 kept in details' padding-bottom for configurable
   cards goes too - it existed only because the button was out of the flow.
   ========================================================================== */

/* the button, now a flow sibling at the bottom of the column */
.products-grid .product-item .product-item-details > .bts-configurable-badge,
.products-grid .product-item .product-item-info .product-item-details > .bts-configurable-badge {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  order: 5 !important;
  margin: auto 0 0 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 26px !important;
  min-height: 26px !important;
  border-radius: 6px !important;
  font-size: 8px !important;
  padding: 0 8px !important;
}

/* the icon row stays last */
.products-grid .product-item .product-item-details > .bts-card-actions {
  order: 6 !important;
}

/* no reserve is needed any more on a configurable card */
.products-grid .product-item.js-configurable-product .product-item-details,
.products-grid .product-item.js-configurable-product .product-item-info .product-item-details {
  padding: 0px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
}

/* and the cart row keeps its own pin on configurable-free cards (pass 199);
   restated for the configurable ones so both card types behave alike */
.products.wrapper.grid.products-grid .product-item .product-item-details > .bts-configurable-badge {
  margin-top: auto !important;
}

/* pass 200b: on a configurable card the icon row was still the absolutely
   positioned one of pass 191 - pass 194 only released it for simple products.
   With the button now in the flow the two were laid out by different rules and
   landed on top of each other (measured: 71px of overlap). Both go in the flow. */
.products-grid .product-item.js-configurable-product .product-item-info .bts-card-actions,
.products.wrapper.grid.products-grid .product-item.js-configurable-product .product-item-info .bts-card-actions {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  order: 6 !important;
  margin: 10px 0 0 0 !important;
}


/* ==========================================================================
   BTS REVAMP - pass 200c: the two CTAs are literally the same box.

   .cdz-buttons-container still carried 10px of padding on a phone, so it
   measured 36px while the button row inside it and the dimension button were
   both 26px. Zeroed, so "same size as .cdz-buttons-container" is true by
   measurement and not only by eye.
   ========================================================================== */

.products-grid .product-item .product-item-info .cdz-product-bottom,
.products-grid .product-item .product-item-info .cdz-buttons-container,
.products-grid .product-item .product-item-info .cdz-buttons-inner {
  padding: 0 !important;
  min-height: 0 !important;
}
.products-grid .product-item .product-item-info .cdz-buttons-container,
.products-grid .product-item .product-item-info .cdz-buttons-inner {
  margin: 0 !important;
}

/* ==========================================================================
   BTS REVAMP - pass 201: the old price goes under the current one at every
   width, not only on a phone.

   Pass 197b kept them side by side from 769px up because that is what
   CategoryDesktop.dc.html does. This overrides that: .special-price takes the
   whole row everywhere, which is what pushes .old-price onto the next line.

   The line break is made by the price ABOVE it on purpose - .old-price itself
   must keep hugging its text, because the strike through it is a bar the
   page's inline <style> draws with .old-price::after (left: -4px; right: -4px),
   so it is exactly as wide as the box. Give .old-price the full row instead
   and the bar runs across the whole card again - that was pass 197.
   ========================================================================== */

.products-grid .product-item .bts-price-group .price-box > .special-price {
  flex: 1 1 100% !important;
  width: 100% !important;
}
.products-grid .product-item .bts-price-group .price-box > .old-price {
  flex: 0 0 auto !important;
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  margin-top: 2px !important;
}

@media (min-width: 769px) {

.products-grid .product-item .bts-price-group .price-box > .special-price {
  flex: 1 1 100% !important;
  width: 100% !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 202: the card is as tall as its contents.

   The empty band in the middle of every card is not a margin - the page's own
   inline <style> pins the box:

       .product-item-info { height: 642px !important }

   642px regardless of what is in it. With the cart row and the icon row glued
   to the bottom (pass 199/200), everything the card does not need shows up as
   one gap between the price and the buttons.

   The height is released here. The product list is still a grid, and grid
   items stretch to the tallest item of their row by default, so cards in a row
   stay level with each other - they just stop being 642px when they do not
   need to be.

   min-height keeps a floor so a card with a very short name does not collapse
   into something odd next to its neighbours.

   The PDP's own ".catalog-product-view ... .product-item-info{height:500px}"
   is left alone; it sizes the upsell row, not this listing.
   ========================================================================== */

.products-grid .product-item .product-item-info,
.products.wrapper.grid.products-grid .product-item .product-item-info {
  height: auto !important;
  min-height: 0 !important;
}

/* ==========================================================================
   BTS REVAMP - pass 203: the dimension button is placed by the layout, not by
   whether a script has run yet.

   Two faults were reported, and they are the same fault seen in its two
   states. Pass 200 asked web/js/bts-mobile-menu.js to move the button from
   .product-item-info down into .product-item-details, and everything - its
   order against the icon row, its position - depended on that move having
   happened:

     - not moved yet: the button kept the page's own absolute positioning
       (bottom: 70/90/113px). Pass 202 then let the card shrink to its content,
       so that offset stopped landing under the price block and started landing
       ON it - the yellow button drawn across "266,40 €".
     - moved: correct.

   And the move can be late or absent - the static files are served from an
   unchanged /static/version... path, so a browser can hold yesterday's
   bts-mobile-menu.js for a long time.

   The dependency is removed instead of the race being narrowed.
   .product-item-details becomes display: contents on a configurable card, so
   its children stop being wrapped in a box of their own and join
   .product-item-info's flex column directly. The button and the icon row are
   then siblings in ONE flex container whether the button sits in info (not
   moved) or in details (moved), and plain "order" puts them in sequence in
   both cases:

       order 0   the picture
       order 0-3 brand / name / attribute / price
       order 5   the dimension button        margin-top: auto
       order 6   the icon row

   The JS move is left in place - it does no harm - but nothing depends on it
   any more.
   ========================================================================== */

/* the details box stops generating a box on configurable cards */
.products-grid .product-item.js-configurable-product .product-item-details,
.products-grid .product-item.js-configurable-product .product-item-info .product-item-details {
  display: contents !important;
}

/* one flex column, explicit sequence */
.products-grid .product-item.js-configurable-product .product-item-info > .cdz-hover-section {
  order: 0 !important;
}
.products-grid .product-item.js-configurable-product .product-item-info .bts-configurable-badge,
.products-grid .product-item.js-configurable-product .product-item-info > .bts-configurable-badge,
.products-grid .product-item.js-configurable-product .product-item-details > .bts-configurable-badge {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  order: 5 !important;
  margin: auto 0 0 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 26px !important;
  min-height: 26px !important;
}
.products-grid .product-item.js-configurable-product .product-item-info .bts-card-actions {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  order: 6 !important;
  margin: 10px 0 0 0 !important;
}

/* ==========================================================================
   BTS REVAMP - pass 204: the two CTAs line up across a row, and "Izberi
   dimenzijo" is set in a larger type.

   Measured, both card types put 10px of margin between the CTA and the icon
   row, yet the real distance was 10px on a simple card and 20px on a
   configurable one - so the dimension button sat 10px higher than the cart row
   beside it, which is the offset in the screenshot.

   The extra 10px is the flex gap. Since pass 203 the configurable card's
   .product-item-details is display: contents, so its children are laid out
   directly by .product-item-info's flex column - and that column has a 10px
   gap of its own, which is added to the margin. A simple card still has its
   children inside details, where that gap does not apply.

   So the margin is dropped on configurable cards and the spacing is left to
   the flex gap alone: 10px on both, and the two buttons share a baseline.

   The label also goes from 8px to 10px. It has the whole card width to itself
   (the cart row shares its width with the qty stepper), so it can afford the
   larger type without wrapping - checked at 390px, where the button is 143px
   wide and the label needs about 95px.
   ========================================================================== */

.products-grid .product-item.js-configurable-product .product-item-info .bts-card-actions {
  margin-top: 0 !important;
}

.products-grid .product-item.js-configurable-product .product-item-info .bts-configurable-badge,
.products-grid .product-item .product-item-info .bts-configurable-badge,
.products-grid .product-item .product-item-details > .bts-configurable-badge {
  font-size: 10px !important;
  letter-spacing: .4px !important;
}

/* ==========================================================================
   BTS REVAMP - pass 204b: the same rule, with a selector that actually wins.

   Pass 200b wrote its margin with a two-selector list whose second member is
   ".products.wrapper.grid.products-grid .product-item.js-configurable-product
     .product-item-info .bts-card-actions" - six classes, against the four of
   pass 204. So the 10px stayed and the buttons were still 10px out of line.
   Restated at the same weight.

   .product-item-info's flex gap is 10px (measured), which is the spacing that
   is left doing the work on both card types.
   ========================================================================== */

.products.wrapper.grid.products-grid .product-item.js-configurable-product .product-item-info .bts-card-actions {
  margin-top: 0 !important;
}

/* ==========================================================================
   BTS REVAMP - pass 205: "Izberi dimenzijo" is set at 12px.

   The narrowest the button ever gets is the phone card, 143px wide at 390px.
   "IZBERI DIMENZIJO" is 16 characters; at 12px/800 uppercase it needs about
   115px, plus the 16px of side padding - so it still holds one line there,
   with a little to spare. Checked by measurement, not by eye: the button stays
   26px tall, which it would not if the label had wrapped.
   ========================================================================== */

.products.wrapper.grid.products-grid .product-item .product-item-info .bts-configurable-badge,
.products-grid .product-item.js-configurable-product .product-item-info .bts-configurable-badge,
.products-grid .product-item .product-item-details > .bts-configurable-badge {
  font-size: 12px !important;
}

/* ==========================================================================
   BTS REVAMP - pass 205b: headroom for the label on the narrowest card.

   At 12px the label needs 113px. On a 360px phone the button is 130px wide and
   the side padding is 2x8px, so the fit was 129px into 130px - one pixel. It
   holds, but a slightly different font rendering would push it onto a second
   line. The padding is halved below 400px, which turns that 1px into 9px.
   ========================================================================== */
@media (max-width: 400px) {

.products.wrapper.grid.products-grid .product-item .product-item-info .bts-configurable-badge,
.products-grid .product-item.js-configurable-product .product-item-info .bts-configurable-badge,
.products-grid .product-item .product-item-details > .bts-configurable-badge {
  padding: 0 4px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 206: all filters behind ONE button, opened in a popup.

   The pill bar of passes 89-106 is replaced by a single "Filtri" button.
   A click opens the filters in a dialog - a centred popup on desktop and a
   full-screen sheet below 768px, so the filters have the whole focus. Inside
   the dialog every filter is one accordion row.

   The markup comes from web/js/bts-filter-modal.js, which moves Amasty's own
   .catalog-topnav .block.filter into the dialog body (ajax filtering keeps
   working, see the comment there). Every rule is gated by .bts-fm-js on
   <html>, which that file sets only once the dialog exists: if it ever fails
   to load, the pill bar of the earlier passes stays as it was.

   Stacking: .columns is position: relative; z-index: 1, i.e. its own stacking
   context, so nothing inside it - the dialog included - could get above the
   sticky header or the mobile bottom bar (z-index 800). While the dialog is
   open, .columns is lifted instead (html.bts-fm-open .columns).

   Specificity: the dialog rules carry ".bts-fm-js .catalog-topnav .bts-fm-body"
   in front of the pass 89/104/170 selectors, so they outrank them by at least
   two classes without having to repeat every one of those selectors.
   ========================================================================== */

/* ---------- A. page: the trigger replaces the pill bar ---------- */
.bts-fm-js .catalog-topnav.amasty-catalog-topnav {
  margin: 0 0 14px !important;
}
.bts-fm-js .catalog-topnav .bts-fm-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  margin: 0;
  padding: 0 18px 0 16px;
  border: 1px solid var(--bts-ink, #373737);
  border-radius: 8px;
  background: var(--bts-ink, #373737);
  color: #ffffff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
}
.bts-fm-js .catalog-topnav .bts-fm-trigger[hidden] {
  display: none;
}
.bts-fm-js .catalog-topnav .bts-fm-trigger:hover,
.bts-fm-js .catalog-topnav .bts-fm-trigger:focus {
  background: #1f1f1f;
  border-color: #1f1f1f;
  color: #ffffff;
}
.bts-fm-js .catalog-topnav .bts-fm-trigger:focus-visible {
  outline: 2px solid var(--bts-yellow, #efd111);
  outline-offset: 2px;
}
.bts-fm-js .catalog-topnav .bts-fm-icon {
  flex: none;
  display: block;
}
.bts-fm-js .catalog-topnav .bts-fm-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bts-yellow, #efd111);
  color: var(--bts-yellow-ink, #1c1a08);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}
.bts-fm-js .catalog-topnav .bts-fm-badge[hidden] {
  display: none;
}

/* ---------- B. the dialog frame ---------- */
.bts-fm-js .catalog-topnav .bts-fm {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.bts-fm-js .catalog-topnav .bts-fm[hidden] {
  display: none !important;
}
html.bts-fm-open .columns {
  z-index: 100000 !important;
}
html.bts-fm-open .catalog-topnav.amasty-catalog-topnav {
  z-index: 100000 !important;
}
html.bts-fm-open,
html.bts-fm-open body {
  overflow: hidden !important;
}
.bts-fm-js .catalog-topnav .bts-fm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 13, .55);
  animation: bts-fm-fade .16s ease-out;
}
.bts-fm-js .catalog-topnav .bts-fm-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: min(86vh, 900px);
  background: #ffffff;
  border-radius: var(--bts-radius-lg, 16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  overflow: hidden;
  animation: bts-fm-pop .18s ease-out;
}
@keyframes bts-fm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bts-fm-pop  { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .bts-fm-js .catalog-topnav .bts-fm-backdrop,
  .bts-fm-js .catalog-topnav .bts-fm-panel {
    animation: none;
  }
}

.bts-fm-js .catalog-topnav .bts-fm-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 16px 24px;
  border-bottom: 1px solid var(--bts-line, #e7e5df);
}
.bts-fm-js .catalog-topnav .bts-fm-title {
  margin: 0;
  color: var(--bts-ink, #373737);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}
.bts-fm-js .catalog-topnav .bts-fm-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--bts-ink, #373737);
  box-shadow: none;
  cursor: pointer;
}
.bts-fm-js .catalog-topnav .bts-fm-close:hover {
  background: #f2f1ee;
}
.bts-fm-js .catalog-topnav .bts-fm-close:focus-visible {
  outline: 2px solid var(--bts-yellow, #efd111);
  outline-offset: 0;
}

.bts-fm-js .catalog-topnav .bts-fm-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 24px 8px;
}

.bts-fm-js .catalog-topnav .bts-fm-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 14px 24px;
  border-top: 1px solid var(--bts-line, #e7e5df);
  background: #ffffff;
}
.bts-fm-js .catalog-topnav .bts-fm-clear {
  margin: 0 auto 0 0;
  padding: 8px 0;
  border: none;
  background: transparent;
  color: var(--bts-red, #c8371f);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  box-shadow: none;
  cursor: pointer;
}
.bts-fm-js .catalog-topnav .bts-fm-clear[hidden] {
  display: none;
}
.bts-fm-js .catalog-topnav .bts-fm-show {
  height: 46px;
  margin: 0;
  padding: 0 26px;
  border: none;
  border-radius: 8px;
  background: var(--bts-yellow, #efd111);
  color: var(--bts-yellow-ink, #1c1a08);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
}
.bts-fm-js .catalog-topnav .bts-fm-show:hover {
  background: #e3c50a;
}
.bts-fm-js .catalog-topnav .bts-fm-show:focus-visible {
  outline: 2px solid var(--bts-ink, #373737);
  outline-offset: 2px;
}
/* while Amasty reloads the results the count is not final yet */
html.bts-fm-loading .catalog-topnav .bts-fm-show {
  opacity: .55;
  cursor: progress;
}

/* ---------- C. Amasty's block inside the dialog ---------- */
/* "Nakupovalne možnosti" - the dialog title says it already */
.bts-fm-js .catalog-topnav .bts-fm-body .filter-subtitle {
  display: none !important;
}
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options {
  display: block !important;
  position: static !important;
}
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options > .filter-options-item {
  position: static !important;
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--bts-line, #e7e5df) !important;
}
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options > .filter-options-item:last-child {
  border-bottom: none !important;
}

/* one accordion row per filter (also neutralises the dark "Kategorija" pill
   and the yellow "applied" pill of pass 89) */
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options > .filter-options-item > .filter-options-title,
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options > .filter-options-item.bts-open > .filter-options-title,
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options > .filter-options-item:has([data-amshopby-filter]) > .filter-options-title {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 16px 2px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bts-ink, #373737) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options > .filter-options-item > .filter-options-title:hover {
  background: transparent !important;
  color: #000000 !important;
}
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options > .filter-options-item > .filter-options-title:focus-visible {
  outline: 2px solid var(--bts-yellow, #efd111) !important;
  outline-offset: -2px !important;
}
/* applied values, right after the filter name: "Brand  SUMITOMO" */
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options > .filter-options-item > .filter-options-title[data-bts-sel]:before {
  content: attr(data-bts-sel);
  order: 2;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fbf3b5;
  color: var(--bts-yellow-ink, #1c1a08);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}
/* caret at the far right; the theme / pass 170 place it in several ways */
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options > .filter-options-item > .filter-options-title:after,
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options > .filter-options-item:has([data-amshopby-filter]) > .filter-options-title:after {
  order: 3 !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: inline-block !important;
  margin: 0 0 0 auto !important;
  padding: 0 0 0 8px !important;
  color: #8a8a8f !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* the options of the open filter: in the flow, no dropdown box any more
   (covers the absolute / min-width / max-height of passes 89/C and 104) */
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options .filter-options-content,
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options > .filter-options-item:nth-child(n) .filter-options-content,
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options > .filter-options-item:has([data-amshopby-filter]) .filter-options-content {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 2px 16px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: auto !important;
}
/* long value lists (Lomilec, Kvaliteta: 60+ values) in two columns */
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content ol.items,
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content ul.items {
  columns: 2;
  column-gap: 28px;
  margin: 0 !important;
  padding: 0 !important;
}
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content ol.items > li,
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content ul.items > li {
  break-inside: avoid;
  padding: 5px 0 !important;
}
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content .item a {
  font-size: 13.5px !important;
}

/* counts as plain grey numbers, not the theme's little bordered boxes */
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content .count {
  display: inline !important;
  margin: 0 0 0 6px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #9a9a9d !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
}
/* multi-select values (Material) draw a checkbox (.amshopby-choice) at the
   left edge of the row: give it its own gutter, and no "›" next to it */
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content .items > li:has(> input[type="checkbox"]) {
  position: relative !important;
  padding-left: 28px !important;
}
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content .items > li > .amshopby-choice {
  top: 50% !important;
  left: 0 !important;
  transform: translateY(-50%) !important;
}
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content .items > li:has(> input[type="checkbox"]) > a:before {
  display: none !important;
}

/* ---------- D. phones: full-screen sheet ---------- */
@media (max-width: 767px) {

.bts-fm-js .catalog-topnav .bts-fm-trigger {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 46px;
  font-size: 14.5px;
}
.bts-fm-js .catalog-topnav .bts-fm {
  padding: 0;
  align-items: stretch;
}
.bts-fm-js .catalog-topnav .bts-fm-panel {
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
  animation-name: bts-fm-slide;
}
@keyframes bts-fm-slide { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.bts-fm-js .catalog-topnav .bts-fm-head {
  padding: 10px 8px 10px 18px;
}
.bts-fm-js .catalog-topnav .bts-fm-body {
  padding: 0 18px 8px;
}
.bts-fm-js .catalog-topnav .bts-fm-foot {
  gap: 12px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .06);
}
.bts-fm-js .catalog-topnav .bts-fm-show {
  flex: 1 1 auto;
  padding: 0 16px;
}
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content ol.items,
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content ul.items {
  columns: 1;
}
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content ol.items > li,
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content ul.items > li {
  padding: 7px 0 !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 207: the Brand filter always lists every brand.

   Amasty folds a filter after its "number of unfolded options" and hides the
   rest behind a "Show (n) more" button: it writes an inline display: none on
   every extra .am-swatch-wrapper. Here the button is dropped and the hidden
   brands are shown again. The !important is needed to beat that inline style.
   Only the Brand filter is affected, the other filters keep Amasty's setting.
   ========================================================================== */
.catalog-topnav .am-filter-items-brand > .am-swatch-wrapper {
  display: block !important;
}
.catalog-topnav .filter-options-content:has(.am-filter-items-brand) .am-show-more {
  display: none !important;
}

/* ==========================================================================
   BTS REVAMP - pass 208: the product card top row loses the CSS "NA ZALOGI"
   pill and the wishlist star.

   - The pill without a quantity was drawn by pass 196 as
     .bts-card-badges:after for every card with an add-to-cart form. For
     logged-in customers it stood next to the real stock badge from list.phtml
     (.bts-stock-badge, "Na zalogi: 25"), so the card said it twice. Only the
     real badge stays.
   - The wishlist star (.cdz-product-wishlist.show-tooltip) is removed from
     every card.
   - For guests nothing is left in that row, so the empty row is collapsed as
     well; otherwise the card would keep the 10px flex gap above the image.
   ========================================================================== */
.products-grid .product-item:has(form[data-role="tocart-form"]) .bts-card-badges:after {
  content: none !important;
  display: none !important;
}
.cdz-product-wishlist.show-tooltip,
.product-item .bts-card-badges .cdz-product-wishlist.show-tooltip,
.products-grid .product-item .bts-card-badges .cdz-product-wishlist.show-tooltip {
  display: none !important;
}
.products-grid .product-item .cdz-hover-section > .bts-card-badges:not(:has(> :not(.cdz-product-wishlist))) {
  display: none !important;
}

/* ==========================================================================
   BTS REVAMP - pass 209: the brand logo (icon_brands) takes the wishlist
   star's place, top left of the card.

   list.phtml already prints it there as img.bts-brand-badge (pass 70); pass
   196 hid it in favour of the brand name. It comes back as the first item of
   the top row, capped to a small height so the row stays compact - the files
   are logos of different proportions, and max-width/max-height keeps each
   one's own aspect ratio. A card whose product has no logo simply has no
   image there (and the row collapses if nothing else is in it, pass 208).
   ========================================================================== */
.products-grid .product-item .bts-card-badges .bts-brand-badge {
  display: block !important;
  order: 0 !important;
  margin: 0 auto 0 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: 140px !important;   /* pass 209d: +10%, +10%, +20% (was 96 x 28) */
  max-height: 41px !important;
  object-fit: contain !important;
}

/* ==========================================================================
   BTS REVAMP - pass 210: the stock filter ("Zaloga") sits next to "Filtri".

   web/js/bts-filter-modal.js moves the stock filter's .filter-options-item
   out of the dialog into .bts-fm-side, which shares a row (.bts-fm-bar) with
   the trigger. It is a small dropdown there, looking like the trigger's
   light sibling. Only logged-in customers with view_stock get this filter,
   so for everybody else the row holds the trigger alone.

   .bts-fm-side has no .filter-options class (see the JS for why), so the
   pill-bar rules of passes 89/94 do not reach it; it gets its own here.
   Opening and closing still goes through bts-filter-scroll.js (.bts-open).
   ========================================================================== */
.bts-fm-js .catalog-topnav .bts-fm-bar {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}
.bts-fm-js .catalog-topnav .bts-fm-side {
  position: relative;
}
.bts-fm-js .catalog-topnav .bts-fm-side[hidden] {
  display: none;
}
.bts-fm-js .catalog-topnav .bts-fm-side > .filter-options-item {
  position: relative !important;
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.bts-fm-js .catalog-topnav .bts-fm-side > .filter-options-item > .filter-options-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 14px 0 16px !important;
  border: 1px solid var(--bts-line, #e7e5df) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--bts-ink, #373737) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.bts-fm-js .catalog-topnav .bts-fm-side > .filter-options-item > .filter-options-title:after {
  content: '\e622' !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: inline-block !important;
  margin: 0 !important;
  font-size: 12px !important;
  color: #8a8a8f !important;
}
.bts-fm-js .catalog-topnav .bts-fm-side > .filter-options-item.bts-open > .filter-options-title {
  border-color: var(--bts-ink, #373737) !important;
}
.bts-fm-js .catalog-topnav .bts-fm-side > .filter-options-item.bts-open > .filter-options-title:after {
  content: '\e621' !important;
}
.bts-fm-js .catalog-topnav .bts-fm-side > .filter-options-item:has(input:checked) > .filter-options-title {
  border-color: var(--bts-yellow, #efd111) !important;
  box-shadow: inset 0 0 0 1px var(--bts-yellow, #efd111) !important;
}

/* the dropdown: closed unless .bts-open, as in pass 94 */
.bts-fm-js .catalog-topnav .bts-fm-side > .filter-options-item > .filter-options-content {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  z-index: 50 !important;
  min-width: 260px !important;
  margin: 0 !important;
  padding: 10px 14px !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;
}
.bts-fm-js .catalog-topnav .bts-fm-side > .filter-options-item.bts-open > .filter-options-content {
  display: block !important;
}
.bts-fm-js .catalog-topnav .bts-fm-side .filter-options-content .items {
  margin: 0 !important;
  padding: 0 !important;
}
.bts-fm-js .catalog-topnav .bts-fm-side .filter-options-content .items > li {
  margin: 0 !important;
  padding: 6px 0 !important;
}
.bts-fm-js .catalog-topnav .bts-fm-side .filter-options-content .item a {
  color: #4a4a4f !important;
  font-size: 13px !important;
}
.bts-fm-js .catalog-topnav .bts-fm-side .filter-options-content .count {
  display: inline !important;
  margin: 0 0 0 6px !important;
  padding: 0 !important;
  border: none !important;
  color: #9a9a9d !important;
  font-size: 12px !important;
}

@media (max-width: 767px) {
  /* "Filtri" keeps most of the width, "Zaloga" takes what it needs */
  .bts-fm-js .catalog-topnav .bts-fm-bar {
    flex-wrap: nowrap;
  }
  .bts-fm-js .catalog-topnav .bts-fm-bar > .bts-fm-trigger {
    flex: 1 1 auto;
    width: auto;
  }
  .bts-fm-js .catalog-topnav .bts-fm-side > .filter-options-item > .filter-options-title {
    height: 46px !important;
    font-size: 14px !important;
  }
  /* the dropdown opens leftwards from the right edge, so it stays on screen */
  .bts-fm-js .catalog-topnav .bts-fm-side > .filter-options-item > .filter-options-content {
    left: auto !important;
    right: 0 !important;
    min-width: 240px !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* ==========================================================================
   BTS REVAMP - pass 211: a tap on a filter value answers immediately.

   On a phone the dialog covers the whole page, so while Amasty reloaded the
   results nothing on screen changed - it looked as if the tap had missed.
   Now, in this order:
     1. pressed   - the row darkens while the finger is on it (:active);
     2. tapped    - bts-filter-modal.js marks the row (.bts-fm-tapped): light
                    yellow with a spinner at its right end;
     3. loading   - html.bts-fm-loading: a running bar under the dialog head,
                    a spinner in "Prikaži izdelke", the list is dimmed and
                    takes no further taps until the new filters are in;
     4. selected  - after the reload an applied value is bold with a yellow
                    marker (and its filter row carries the value chip, 206).
   The value links themselves are display: contents (Amasty), so every state
   is drawn on the row (li / .am-swatch-wrapper) around them.
   ========================================================================== */
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content .items > li,
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content .am-swatch-wrapper,
.bts-fm-js .catalog-topnav .bts-fm-side .filter-options-content .items > li {
  position: relative !important;
  margin: 0 -10px !important;
  padding-left: 10px !important;
  padding-right: 34px !important;
  border-radius: 8px !important;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s ease-out;
}
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content .items > li:has(> input[type="checkbox"]) {
  padding-left: 38px !important;
}
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content .items > li > .amshopby-choice {
  left: 10px !important;
}
/* 1. pressed */
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content .items > li:active,
.bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content .am-swatch-wrapper:active,
.bts-fm-js .catalog-topnav .bts-fm-side .filter-options-content .items > li:active {
  background: #efeee9 !important;
}
@media (hover: hover) {
  .bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content .items > li:hover,
  .bts-fm-js .catalog-topnav .bts-fm-body .filter-options-content .am-swatch-wrapper:hover,
  .bts-fm-js .catalog-topnav .bts-fm-side .filter-options-content .items > li:hover {
    background: #f7f6f3 !important;
  }
}
/* 2. tapped */
.bts-fm-js .catalog-topnav .filter-options-content .bts-fm-tapped,
.bts-fm-js .catalog-topnav .filter-options-content .bts-fm-tapped:hover {
  background: #fbf3b5 !important;
  opacity: 1 !important;
}
.bts-fm-js .catalog-topnav .filter-options-content .bts-fm-tapped:after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  width: 16px !important;
  height: 16px !important;
  margin: -8px 0 0 !important;
  border: 2px solid rgba(28, 26, 8, .2) !important;
  border-top-color: var(--bts-yellow-ink, #1c1a08) !important;
  border-radius: 50% !important;
  background: none !important;
  animation: bts-fm-spin .7s linear infinite !important;
}
@keyframes bts-fm-spin { to { transform: rotate(360deg); } }

/* 3. loading */
.bts-fm-js .catalog-topnav .bts-fm-head {
  position: relative;
}
html.bts-fm-loading .catalog-topnav .bts-fm-head:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0, var(--bts-yellow, #efd111) 30%, var(--bts-yellow, #efd111) 70%, transparent 100%);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: bts-fm-bar 1s ease-in-out infinite;
}
@keyframes bts-fm-bar {
  from { background-position: -40% 0; }
  to   { background-position: 140% 0; }
}
html.bts-fm-loading .catalog-topnav .bts-fm-body .block.filter {
  pointer-events: none;
}
/* everything but the tapped row is dimmed (dimming the whole block would
   fade the tapped row with it) */
html.bts-fm-loading .catalog-topnav .bts-fm-body .filter-options-title,
html.bts-fm-loading .catalog-topnav .bts-fm-body .filter-options-content .items > li:not(.bts-fm-tapped),
html.bts-fm-loading .catalog-topnav .bts-fm-body .filter-options-content .am-swatch-wrapper:not(.bts-fm-tapped) {
  opacity: .45 !important;
  transition: opacity .15s;
}
html.bts-fm-loading .catalog-topnav .bts-fm-show {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
html.bts-fm-loading .catalog-topnav .bts-fm-show:before {
  content: "";
  width: 15px;
  height: 15px;
  border: 2px solid rgba(28, 26, 8, .25);
  border-top-color: var(--bts-yellow-ink, #1c1a08);
  border-radius: 50%;
  animation: bts-fm-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  html.bts-fm-loading .catalog-topnav .bts-fm-head:after {
    animation: none;
    background: var(--bts-yellow, #efd111);
  }
}

/* 4. selected */
.bts-fm-js .catalog-topnav .filter-options-content .items > li:has(> input:checked),
.bts-fm-js .catalog-topnav .filter-options-content .items > li:has(a.amshopby-link-selected),
.bts-fm-js .catalog-topnav .filter-options-content .am-swatch-wrapper:has(.swatch-option.selected) {
  background: #fdf9dc !important;
  box-shadow: inset 3px 0 0 var(--bts-yellow, #efd111) !important;
}
.bts-fm-js .catalog-topnav .filter-options-content .items > li:has(> input:checked) .label,
.bts-fm-js .catalog-topnav .filter-options-content .items > li:has(a.amshopby-link-selected) .label,
.bts-fm-js .catalog-topnav .filter-options-content .am-swatch-wrapper:has(.swatch-option.selected) .label {
  color: var(--bts-ink, #373737) !important;
  font-weight: 800 !important;
}
/* ... but never for the category list: its current-category radio is
   always checked (pass 89) */
.bts-fm-js .catalog-topnav .filter-options-content form[data-amshopby-filter="category_ids"] ul.items > li {
  background: transparent !important;
  box-shadow: none !important;
}
.bts-fm-js .catalog-topnav .filter-options-content form[data-amshopby-filter="category_ids"] ul.items > li.bts-fm-tapped {
  background: #fbf3b5 !important;
}

/* ==========================================================================
   BTS REVAMP - pass 212: MOBILE ONLY - the stock badge goes under the brand
   logo.

   On a phone card (about 145-170px inside) the logo (up to 140px, pass 209d)
   and ".bts-stock-badge" ("Zaloga dobavitelja: 19005") cannot share one row,
   so the top row is stacked there: logo first, badge below it, both flush
   left. The badge may wrap onto a second line instead of running out of the
   card when the number is long.
   ========================================================================== */
@media (max-width: 767px) {

.products-grid .product-item .cdz-hover-section > .bts-card-badges {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 6px !important;
}
.products-grid .product-item .bts-card-badges .bts-stock-badge {
  order: 9 !important;
  margin: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  text-align: left !important;
  /* a tighter pill: a wrapped label in a 999px-round capsule looks swollen */
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 9.5px !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 213: the applied filters, tidied up.

   The "Zdaj nakupuje po" row (Amasty, in .sidebar-main) was a white strip
   with a border that ran into the left edge of the page, its "x" sat on top
   of the filter name, and on a phone it turned into a collapsible box with
   "(2)" and a caret. It is hidden now; web/js/bts-filter-modal.js shows the
   same filters as chips in the row of the "Filtri" button (.bts-fm-chips):
   "Material  JEKLO  x", one chip per value, and "Počisti vse" at the end
   when there is more than one. A chip clicks Amasty's own remove link.

   Only a sidebar block WITHOUT a filter list is hidden, so the pass 92
   fallback (a real filter list set to "Sidebar" in the admin) still shows.
   ========================================================================== */
.bts-fm-js .page-with-filter .sidebar-main .block.filter:not(:has(#narrow-by-list)) {
  display: none !important;
}

.bts-fm-js .catalog-topnav .bts-fm-bar {
  align-items: center;
}
.bts-fm-js .catalog-topnav .bts-fm-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
}
.bts-fm-js .catalog-topnav .bts-fm-chips[hidden] {
  display: none;
}
.bts-fm-js .catalog-topnav .bts-fm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin: 0;
  padding: 0 8px 0 12px;
  border: 1px solid #e9dc8a;
  border-radius: 999px;
  background: #fdf9dc;
  color: var(--bts-ink, #373737);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s, border-color .12s, opacity .12s;
}
.bts-fm-js .catalog-topnav .bts-fm-chip-name {
  color: #7a7760;
  font-weight: 600;
}
.bts-fm-js .catalog-topnav .bts-fm-chip-value {
  font-weight: 800;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bts-fm-js .catalog-topnav .bts-fm-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 2px;
  border-radius: 50%;
  color: #7a7760;
}
.bts-fm-js .catalog-topnav .bts-fm-chip:hover,
.bts-fm-js .catalog-topnav .bts-fm-chip:focus-visible {
  border-color: var(--bts-yellow, #efd111);
  background: #fbf3b5;
}
.bts-fm-js .catalog-topnav .bts-fm-chip:hover .bts-fm-chip-x,
.bts-fm-js .catalog-topnav .bts-fm-chip:focus-visible .bts-fm-chip-x {
  background: var(--bts-yellow-ink, #1c1a08);
  color: #ffffff;
}
.bts-fm-js .catalog-topnav .bts-fm-chip:active {
  background: #f6e98f;
}
.bts-fm-js .catalog-topnav .bts-fm-chip:focus-visible,
.bts-fm-js .catalog-topnav .bts-fm-chip-clear:focus-visible {
  outline: 2px solid var(--bts-ink, #373737);
  outline-offset: 2px;
}
.bts-fm-js .catalog-topnav .bts-fm-chip-clear {
  height: 32px;
  margin: 0;
  padding: 0 6px;
  border: none;
  background: transparent;
  color: var(--bts-red, #c8371f);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
}
/* clicked: the chip fades while Amasty reloads */
.bts-fm-js .catalog-topnav .bts-fm-chip.is-busy,
.bts-fm-js .catalog-topnav .bts-fm-chip-clear.is-busy {
  opacity: .45;
  pointer-events: none;
}

@media (max-width: 767px) {
  /* buttons on the first line, the chips on their own line under them */
  .bts-fm-js .catalog-topnav .bts-fm-bar {
    flex-wrap: wrap;
  }
  .bts-fm-js .catalog-topnav .bts-fm-chips {
    flex: 1 1 100%;
    margin: 2px 0 0;
    gap: 6px;
  }
  .bts-fm-js .catalog-topnav .bts-fm-chip {
    height: 34px;
    font-size: 13px;
  }
  .bts-fm-js .catalog-topnav .bts-fm-chip-value {
    max-width: 150px;
  }
  .bts-fm-js .catalog-topnav .bts-fm-chip-clear {
    padding: 0 2px;
  }
}

/* ==========================================================================
   BTS REVAMP - pass 214: no flash of the old filter bar while the page loads.

   The "Filtri" button, the chips and the stock dropdown are built by
   web/js/bts-filter-modal.js, which arrives at the very end of Magento's
   requirejs chain - measured ~0.8-1.2 s after the first paint. Until then
   the browser painted what the HTML carries: the old pill bar and the old
   "Zdaj nakupuje po" strip, and then they jumped into the new look.

   Now, BEFORE the JS has run (html without .bts-fm-js):
   - the old pill bar and the old chips strip are not shown at all;
   - .catalog-topnav draws a stand-in for the "Filtri" button (::before) with
     the same size, colour, icon and text, so the button is on screen from
     the first paint and nothing moves when the real one takes its place.
   Only pages whose bar really holds filters get the stand-in - on the others
   the JS never builds anything, so there is nothing to stand in for.

   Safety net: if the JS has not arrived after 6 s (blocked, an error), a
   CSS animation hands the old pill bar back and removes the stand-in, so
   the filters can never be lost. Once .bts-fm-js is set none of this
   matches any more.
   ========================================================================== */
@keyframes bts-fm-fallback-show {
  to { visibility: visible; max-height: 5000px; }
}
@keyframes bts-fm-fallback-hide {
  to { visibility: hidden; max-width: 0; max-height: 0; padding: 0; margin: 0; border-width: 0; }
}

/* the old UI, hidden until the JS has run (or the 6 s fallback fires).
   Deliberately WITHOUT !important: an animation cannot override an
   !important declaration, and the fallback below is an animation. Nothing
   else sets visibility / max-height on these blocks, so plain rules win;
   overflow stays visible (pass 106 forces it), which does not matter - a
   hidden block with no height shows nothing and takes no clicks. */
html:not(.bts-fm-js) .catalog-topnav.amasty-catalog-topnav .block.filter,
html:not(.bts-fm-js) .page-with-filter .columns .sidebar-main .block.filter:not(:has(#narrow-by-list)) {
  visibility: hidden;
  max-height: 0;
  animation: bts-fm-fallback-show 0s 6s forwards;
}

/* the stand-in button */
html:not(.bts-fm-js) .catalog-topnav.amasty-catalog-topnav:has(.filter-options-item) {
  margin: 0 0 14px !important;
}
html:not(.bts-fm-js) .catalog-topnav.amasty-catalog-topnav:has(.filter-options-item):before {
  content: "Filtri";
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 42px;
  padding: 0 18px 0 43px;           /* 16px + 18px icon + 9px gap, as the real one */
  border: 1px solid var(--bts-ink, #373737);
  border-radius: 8px;
  background: var(--bts-ink, #373737) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M6 12h12M10 18h4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 16px center / 18px 18px;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  animation: bts-fm-fallback-hide 0s 6s forwards;
}
html[lang^="hr"]:not(.bts-fm-js) .catalog-topnav.amasty-catalog-topnav:has(.filter-options-item):before,
html[lang^="sr"]:not(.bts-fm-js) .catalog-topnav.amasty-catalog-topnav:has(.filter-options-item):before,
html[lang^="bs"]:not(.bts-fm-js) .catalog-topnav.amasty-catalog-topnav:has(.filter-options-item):before {
  content: "Filteri";
}
html[lang^="en"]:not(.bts-fm-js) .catalog-topnav.amasty-catalog-topnav:has(.filter-options-item):before {
  content: "Filters";
}
@media (max-width: 767px) {
  html:not(.bts-fm-js) .catalog-topnav.amasty-catalog-topnav:has(.filter-options-item):before {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 46px;
    padding: 0 0 0 27px;            /* icon + text centred as a pair */
    background-position: calc(50% - 24px) center;
    font-size: 14.5px;
  }
}

/* ==========================================================================
   BTS REVAMP - pass 215: the product toolbars, redesigned (desktop + mobile).

   Magento prints the same .toolbar-products twice: above the grid (count,
   view modes, sorter, limiter) and below it (pagination, limiter). Both were
   a white strip of theme leftovers - blue-bordered page numbers, a yellow
   grid button, luma-icons arrows, labels floating next to plain selects, and
   on a phone the sorter/limiter repeated under the pagination.

   Now they speak the language of the "Filtri" row above them:
   TOP     no strip; the count on the left in grey, on the right one row of
           40px controls with a 1px #e7e5df border and 8px corners:
             [Razvrsti po  Položaj v] [sort direction] [Prikaži  12 v] [grid|list]
           each label sits INSIDE its control (label + select read as one
           pill). On a phone: count on its own line, the controls below it,
           the sorter taking the spare width; view modes stay hidden there.
   BOTTOM  only the pagination, centred: 40px squares, the current page dark
           (like the "Filtri" button), next/previous as chevrons. The limiter
           stays at the right on desktop, the duplicate sorter/limiter are
           gone on a phone.

   Top/bottom are told apart the Magento way: the bottom toolbar is the one
   that follows .products.wrapper. Icons are CSS masks filled with
   currentColor, so they follow the text colour of their button.
   ========================================================================== */

/* ---------- shared: reset the strip ---------- */
.page-products .column.main .toolbar.toolbar-products {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 12px !important;
  position: relative !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
.page-products .column.main .toolbar.toolbar-products > * {
  float: none !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- the count ---------- */
.page-products .column.main .toolbar.toolbar-products .toolbar-amount {
  flex: 1 1 auto !important;
  order: 1 !important;
  line-height: 40px !important;
  color: #8a8a8f !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
.page-products .column.main .toolbar.toolbar-products .toolbar-amount .toolbar-number:last-child {
  color: var(--bts-ink, #373737) !important;
  font-weight: 800 !important;
}

/* ---------- label + select as one pill (sorter, limiter) ---------- */
.page-products .column.main .toolbar.toolbar-products .toolbar-sorter,
.page-products .column.main .toolbar.toolbar-products .field.limiter {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  height: 40px !important;
}
.page-products .column.main .toolbar.toolbar-products .toolbar-sorter { order: 2 !important; }
.page-products .column.main .toolbar.toolbar-products .field.limiter  { order: 4 !important; }
.page-products .column.main .toolbar.toolbar-products .modes          { order: 5 !important; }

.page-products .column.main .toolbar.toolbar-products .sorter-label,
.page-products .column.main .toolbar.toolbar-products .field.limiter > .label {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 4px 0 12px !important;
  border: 1px solid var(--bts-line, #e7e5df) !important;
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
  background: #ffffff !important;
  color: #8a8a8f !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  /* the theme hides this label visually on some widths */
  position: static !important;
  clip: auto !important;
  overflow: visible !important;
}
.page-products .column.main .toolbar.toolbar-products .field.limiter > .control {
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
}
.page-products .column.main .toolbar.toolbar-products select.sorter-options,
.page-products .column.main .toolbar.toolbar-products select.limiter-options {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 34px 0 4px !important;
  border: 1px solid var(--bts-line, #e7e5df) !important;
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23373737' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 14px 14px !important;
  color: var(--bts-ink, #373737) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 38px !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.page-products .column.main .toolbar.toolbar-products select.sorter-options:hover,
.page-products .column.main .toolbar.toolbar-products select.limiter-options:hover {
  background-color: #fafaf9 !important;
}
.page-products .column.main .toolbar.toolbar-products select.sorter-options:focus-visible,
.page-products .column.main .toolbar.toolbar-products select.limiter-options:focus-visible {
  outline: 2px solid var(--bts-yellow, #efd111) !important;
  outline-offset: 1px !important;
}
/* "na stran" - the pill already says "Prikaži 12" */
.page-products .column.main .toolbar.toolbar-products .limiter-text {
  display: none !important;
}

/* ---------- square icon buttons (sort direction, view modes, chevrons) ---------- */
.page-products .column.main .toolbar.toolbar-products .sorter-action {
  order: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 0 0 6px !important;
  padding: 0 !important;
  border: 1px solid var(--bts-line, #e7e5df) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--bts-ink, #373737) !important;
  position: static !important;
  top: auto !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}
.page-products .column.main .toolbar.toolbar-products .sorter-action:hover {
  border-color: #b4b4b8 !important;
}
.page-products .column.main .toolbar.toolbar-products .sorter-action > span,
.page-products .column.main .toolbar.toolbar-products .modes-mode > span,
.page-products .column.main .toolbar.toolbar-products .modes-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}
.page-products .column.main .toolbar.toolbar-products .sorter-action:before,
.page-products .column.main .toolbar.toolbar-products .modes-mode:before,
.page-products .column.main .toolbar.toolbar-products .pages .action:before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  font-family: inherit !important;
  color: inherit !important;           /* the theme colours the old glyph itself */
  background: currentColor !important;
  -webkit-mask: var(--bts-tb-icon) center / contain no-repeat;
  mask: var(--bts-tb-icon) center / contain no-repeat;
}
/* sort direction: bars getting shorter = descending, longer = ascending */
.page-products .column.main .toolbar.toolbar-products .sorter-action.sort-desc {
  --bts-tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h11M4 18h6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.page-products .column.main .toolbar.toolbar-products .sorter-action.sort-asc {
  --bts-tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h6M4 12h11M4 18h16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* view modes: one segmented control */
.page-products .column.main .toolbar.toolbar-products .modes {
  display: inline-flex !important;
  align-items: stretch !important;
  height: 40px !important;
  border: 1px solid var(--bts-line, #e7e5df) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.page-products .column.main .toolbar.toolbar-products .modes-mode {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8a8a8f !important;
  box-shadow: none !important;
  float: none !important;
}
.page-products .column.main .toolbar.toolbar-products .modes-mode + .modes-mode {
  border-left: 1px solid var(--bts-line, #e7e5df) !important;
}
.page-products .column.main .toolbar.toolbar-products a.modes-mode:hover {
  color: var(--bts-ink, #373737) !important;
  background: #fafaf9 !important;
}
.page-products .column.main .toolbar.toolbar-products .modes-mode.active {
  background: var(--bts-ink, #373737) !important;
  color: #ffffff !important;
}
.page-products .column.main .toolbar.toolbar-products .mode-grid {
  --bts-tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3C/svg%3E");
}
.page-products .column.main .toolbar.toolbar-products .mode-list {
  --bts-tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='5' height='5' rx='1.2'/%3E%3Crect x='3' y='15' width='5' height='5' rx='1.2'/%3E%3Crect x='10.5' y='5.5' width='10.5' height='2.2' rx='1.1'/%3E%3Crect x='10.5' y='16.5' width='10.5' height='2.2' rx='1.1'/%3E%3C/svg%3E");
}

/* ---------- pagination ---------- */
.page-products .column.main .toolbar.toolbar-products .pages {
  order: 1 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center !important;
}
.page-products .column.main .toolbar.toolbar-products .pages .pages-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}
.page-products .column.main .toolbar.toolbar-products .pages .pages-items {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: normal !important;
}
.page-products .column.main .toolbar.toolbar-products .pages .item {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}
.page-products .column.main .toolbar.toolbar-products .pages .item .page,
.page-products .column.main .toolbar.toolbar-products .pages .action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  width: auto !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid var(--bts-line, #e7e5df) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--bts-ink, #373737) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  position: static !important;
}
.page-products .column.main .toolbar.toolbar-products .pages a.page:hover,
.page-products .column.main .toolbar.toolbar-products .pages .action:hover {
  border-color: var(--bts-ink, #373737) !important;
}
.page-products .column.main .toolbar.toolbar-products .pages .item.current .page {
  border-color: var(--bts-ink, #373737) !important;
  background: var(--bts-ink, #373737) !important;
  color: #ffffff !important;
}
/* "Stran" / "Trenutno berete stran" / "Naslednja" are for screen readers */
.page-products .column.main .toolbar.toolbar-products .pages .page > .label,
.page-products .column.main .toolbar.toolbar-products .pages .action > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}
.page-products .column.main .toolbar.toolbar-products .pages .action {
  padding: 0 !important;
  width: 40px !important;
}
.page-products .column.main .toolbar.toolbar-products .pages .action.next {
  --bts-tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.page-products .column.main .toolbar.toolbar-products .pages .action.previous {
  --bts-tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.page-products .column.main .toolbar.toolbar-products .pages .action:after {
  display: none !important;
}

/* ---------- top vs bottom ---------- */
/* top: no pagination (the theme already hides it, restated for safety) */
.page-products .column.main .toolbar.toolbar-products:not(.products.wrapper ~ .toolbar-products) .pages {
  display: none !important;
}
/* bottom: pagination (+ limiter on desktop) only */
.page-products .column.main .products.wrapper ~ .toolbar.toolbar-products {
  margin: 24px 0 8px !important;
}
.page-products .column.main .products.wrapper ~ .toolbar.toolbar-products .modes,
.page-products .column.main .products.wrapper ~ .toolbar.toolbar-products .toolbar-amount,
.page-products .column.main .products.wrapper ~ .toolbar.toolbar-products .toolbar-sorter {
  display: none !important;
}

/* ---------- phones ---------- */
@media (max-width: 767px) {

.page-products .column.main .toolbar.toolbar-products {
  gap: 8px !important;
}
/* line 1: the count and "Prikaži 12"; line 2: the sorter, full width */
.page-products .column.main .toolbar.toolbar-products .toolbar-amount {
  flex: 1 1 auto !important;
  order: 1 !important;
  min-width: 0 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}
.page-products .column.main .toolbar.toolbar-products .field.limiter {
  order: 2 !important;
}
.page-products .column.main .toolbar.toolbar-products .toolbar-sorter {
  order: 3 !important;
  flex: 1 1 100% !important;
  min-width: 0 !important;
}
.page-products .column.main .toolbar.toolbar-products .toolbar-sorter select.sorter-options {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.page-products .column.main .toolbar.toolbar-products .field.limiter {
  flex: 0 0 auto !important;
}
.page-products .column.main .toolbar.toolbar-products select.limiter-options {
  width: 64px !important;
  padding-right: 28px !important;
  background-position: right 9px center !important;
}
.page-products .column.main .toolbar.toolbar-products .modes {
  display: none !important;
}
/* bottom toolbar: pagination only */
.page-products .column.main .products.wrapper ~ .toolbar.toolbar-products .field.limiter {
  display: none !important;
}
.page-products .column.main .toolbar.toolbar-products .pages .item .page,
.page-products .column.main .toolbar.toolbar-products .pages .action {
  min-width: 42px !important;
  height: 42px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 216: the list view ("Seznam") gets a real row card.

   list.phtml prints the same card markup in both modes; every card pass so
   far (196 ...) was written for .products-grid, so in .products-list the
   card fell apart: a 40px picture, the brand logo lying over the SKU, the
   cart button squeezed to 35px with its label running down vertically.

   Here the card is one CSS grid. .product-item-details is display: contents,
   so its children (brand, name, attributes, price, cart row, links) become
   grid items of the card itself and can be placed next to the picture:

     desktop   | picture | brand           | price     |
               | + logo  | SKU + title     |           |
               |         | attributes      | qty + cart|
               |         | links           |           |
     phone     | picture | brand / SKU / title / attributes / price |
               | qty + cart ...................................... |
               | links ........................................... |
   ========================================================================== */
.page-products .products.wrapper.products-list .product-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.page-products .products-list .product-item {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.page-products .products-list .product-item .product-item-info {
  display: grid !important;
  grid-template-columns: 200px minmax(0, 1fr) 290px !important;
  grid-template-rows: auto auto auto 1fr !important;
  grid-template-areas:
    "img brand   price"
    "img name    price"
    "img variant buy"
    "img actions buy" !important;
  column-gap: 28px !important;
  row-gap: 4px !important;
  align-content: start !important;
  width: 100% !important;
  height: auto !important;          /* grid-mode heights must not stretch the rows */
  min-height: 0 !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 1px solid #e7e5df !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.page-products .products-list .product-item .product-item-details {
  display: contents !important;
}

/* ---- picture column (logo + stock above, picture below) ---- */
.page-products .products-list .product-item .cdz-hover-section {
  grid-area: img !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  position: relative !important;
}
.page-products .products-list .product-item .cdz-hover-section > .bts-card-badges {
  order: 1 !important;
  position: static !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.page-products .products-list .product-item .bts-card-badges .bts-brand-badge {
  max-width: 120px !important;
  max-height: 34px !important;
  margin: 0 auto 0 0 !important;
}
.page-products .products-list .product-item .bts-card-badges .bts-stock-badge {
  margin: 0 !important;
  white-space: normal !important;
}
.page-products .products-list .product-item .cdz-product-top {
  order: 2 !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #eceae4, #f7f6f3) !important;
  overflow: hidden !important;
}
.page-products .products-list .product-item .cdz-product-top .product-item-photo {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.page-products .products-list .product-item .cdz-product-top .main-image,
.page-products .products-list .product-item .cdz-product-top .hover-image {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
}
.page-products .products-list .product-item .cdz-product-top .product-image-container {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.page-products .products-list .product-item .cdz-product-top .product-image-wrapper {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding-bottom: 0 !important;
}
.page-products .products-list .product-item .cdz-product-top img.product-image-photo {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
}

/* ---- text column ---- */
.page-products .products-list .product-item .bts-card-brand {
  grid-area: brand !important;
  display: block !important;
  margin: 0 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #1d2eab !important;
  letter-spacing: .2px !important;
  text-transform: uppercase !important;
}
.page-products .products-list .product-item .product-item-name {
  grid-area: name !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.page-products .products-list .product-item .product-item-name .product-item-no {
  display: block !important;
  margin: 0 0 3px !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #17181a !important;
  letter-spacing: 0 !important;
}
.page-products .products-list .product-item .product-item-name .bts-card-title {
  display: block !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: #6b6b6e !important;
}
.page-products .products-list .product-item .name-variant {
  grid-area: variant !important;
  margin: 6px 0 0 !important;
  font-size: 12px !important;
  color: #6b6b6e !important;
}
.page-products .products-list .product-item .name-variant b {
  color: #17181a !important;
}
.page-products .products-list .product-item .product-item-inner,
.page-products .products-list .product-item .icons {
  display: none !important;
}

/* links: a quiet row at the bottom of the text column */
.page-products .products-list .product-item .bts-card-actions {
  grid-area: actions !important;
  align-self: end !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 22px !important;
  width: auto !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  border: none !important;
}
.page-products .products-list .product-item .bts-card-action {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 7px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  color: #4a4a4f !important;
}
.page-products .products-list .product-item .bts-card-action:hover {
  color: var(--bts-ink, #373737) !important;
}
.page-products .products-list .product-item .bts-card-action:hover .bts-card-action-label {
  text-decoration: underline !important;
}
.page-products .products-list .product-item .bts-card-action-label {
  font-size: 11px !important;
  line-height: 1 !important;
  color: inherit !important;
  white-space: nowrap !important;
}

/* ---- price + cart column ---- */
.page-products .products-list .product-item .bts-price-group {
  grid-area: price !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.page-products .products-list .product-item .bts-price-group .price-box {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  column-gap: 8px !important;
  margin: 0 !important;
}
.page-products .products-list .product-item .bts-price-group .price-box .price {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #c8371f !important;
  line-height: 1.1 !important;
}
.page-products .products-list .product-item .bts-price-group .old-price .price {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #6b6b6e !important;
}
.page-products .products-list .product-item .bts-price-group > .bts-card-vat {
  display: block !important;
  margin: 3px 0 0 !important;
  font-size: 11px !important;
  color: #6b6b6e !important;
}
.page-products .products-list .product-item .cdz-product-bottom {
  grid-area: buy !important;
  align-self: end !important;
  position: static !important;
  width: auto !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.page-products .products-list .product-item .cdz-buttons-container,
.page-products .products-list .product-item .cdz-buttons-inner {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.page-products .products-list .product-item .cdz-buttons-inner form[data-role="tocart-form"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
}
.page-products .products-list .product-item .cdz-buttons-inner .field.qty.box-tocart {
  flex: 0 0 auto !important;
  display: block !important;
  margin: 0 !important;
}
.page-products .products-list .product-item .cdz-buttons-inner .field.qty.box-tocart .control {
  display: flex !important;
  align-items: center !important;
  height: 42px !important;
  border: 1px solid #e7e5df !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}
.page-products .products-list .product-item .cdz-buttons-inner .field.qty.box-tocart .control a.btn-qty {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 40px !important;
  background: transparent !important;
  color: #17181a !important;
  font-size: 16px !important;
  text-decoration: none !important;
}
.page-products .products-list .product-item .cdz-buttons-inner .field.qty.box-tocart input.qty {
  width: 36px !important;
  height: 40px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #17181a !important;
}
.page-products .products-list .product-item .cdz-buttons-inner button.action.tocart.primary {
  flex: 1 1 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: none !important;
  border-radius: 8px !important;
  background: #f4c21e !important;
  color: #1c1a08 !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;
  writing-mode: horizontal-tb !important;
}
.page-products .products-list .product-item .cdz-buttons-inner button.action.tocart.primary > span {
  display: inline !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.page-products .products-list .product-item .cdz-buttons-inner button.action.tocart.primary:before {
  display: none !important;
  content: none !important;
}
.page-products .products-list .product-item .cdz-buttons-inner button.action.tocart.primary:hover {
  background: #e0b015 !important;
}

/* ---- phones ---- */
@media (max-width: 767px) {

.page-products .products-list .product-item .product-item-info {
  grid-template-columns: 112px minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  grid-template-areas:
    "img brand"
    "img name"
    "img variant"
    "img price"
    "buy buy"
    "actions actions" !important;
  column-gap: 14px !important;
  padding: 14px !important;
}
.page-products .products-list .product-item .cdz-hover-section {
  gap: 8px !important;
  align-self: start !important;
}
.page-products .products-list .product-item .bts-card-badges .bts-brand-badge {
  max-width: 100% !important;
  max-height: 28px !important;
}
.page-products .products-list .product-item .bts-card-badges .bts-stock-badge {
  padding: 3px 6px !important;
  border-radius: 6px !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
}
.page-products .products-list .product-item .product-item-name .product-item-no {
  font-size: 15px !important;
}
.page-products .products-list .product-item .product-item-name .bts-card-title {
  font-size: 11.5px !important;
}
.page-products .products-list .product-item .name-variant {
  font-size: 10.5px !important;
}
.page-products .products-list .product-item .bts-price-group {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border: none !important;
}
.page-products .products-list .product-item .bts-price-group .price-box .price {
  font-size: 20px !important;
}
.page-products .products-list .product-item .cdz-product-bottom {
  margin: 12px 0 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid #e7e5df !important;
}
.page-products .products-list .product-item .bts-card-actions {
  justify-content: space-between !important;
  margin: 10px 0 0 !important;
  gap: 6px 12px !important;
}
.page-products .products-list .product-item .bts-card-action-label {
  font-size: 10.5px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 217: the working-range chart (icon_tolerance) on the card.

   web/js/bts-card-tolerance.js puts the chart into the picture box as a
   thumbnail button (.bts-tol) - only on products that have one, every other
   card is untouched.
   GRID    a thumbnail in the bottom-right corner of the picture (38% wide);
           hover (mouse) or tap/Enter (.is-open) grows it over the whole
           picture box, so the chart can be read; a small x shows how to
           close it on touch.
   LIST    (desktop) the chart is its own column next to the photo, at a
           readable size, no interaction needed. On a phone the list card
           uses the grid behaviour, its picture column is too narrow for two.
   ========================================================================== */
.product-item .cdz-product-top {
  position: relative;
}
.product-item .cdz-product-top .bts-tol {
  position: absolute !important;
  right: 6px !important;
  bottom: 6px !important;
  z-index: 5 !important;
  display: block !important;
  width: 38% !important;
  height: auto !important;
  aspect-ratio: 466 / 405;
  margin: 0 !important;
  padding: 3px !important;
  border: 1px solid #e7e5df !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .1) !important;
  cursor: zoom-in !important;
  overflow: hidden !important;
  -webkit-tap-highlight-color: transparent;
  transition: width .18s ease, height .18s ease, right .18s ease, bottom .18s ease,
              padding .18s ease, border-radius .18s ease, box-shadow .18s ease;
}
.product-item .cdz-product-top .bts-tol-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  pointer-events: none;
}
/* enlarged: the chart covers the whole picture box */
.product-item .cdz-product-top .bts-tol.is-open,
.product-item .cdz-product-top .bts-tol:focus-visible {
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 8px !important;
  border-color: #e7e5df !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  cursor: zoom-out !important;
  z-index: 6 !important;
}
@media (hover: hover) {
  .product-item .cdz-product-top .bts-tol:hover {
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 8px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    cursor: default !important;
    z-index: 6 !important;
  }
}
.product-item .cdz-product-top .bts-tol:focus-visible {
  outline: 2px solid var(--bts-yellow, #efd111) !important;
  outline-offset: -2px !important;
}
/* touch: a close mark while it is open */
.product-item .cdz-product-top .bts-tol.is-open:after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bts-ink, #373737) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
}
@media (prefers-reduced-motion: reduce) {
  .product-item .cdz-product-top .bts-tol {
    transition: none !important;
  }
}

/* LIST view, desktop: photo and chart side by side */
@media (min-width: 768px) {

.page-products .products-list .product-item.bts-has-tol .product-item-info {
  grid-template-columns: 380px minmax(0, 1fr) 290px !important;
}
.page-products .products-list .product-item.bts-has-tol .cdz-product-top {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  aspect-ratio: auto !important;
  background: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.page-products .products-list .product-item.bts-has-tol .cdz-product-top .product-item-photo {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #eceae4, #f7f6f3) !important;
  overflow: hidden !important;
}
.page-products .products-list .product-item.bts-has-tol .cdz-product-top .bts-tol,
.page-products .products-list .product-item.bts-has-tol .cdz-product-top .bts-tol:hover,
.page-products .products-list .product-item.bts-has-tol .cdz-product-top .bts-tol.is-open {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  padding: 6px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  cursor: default !important;
  pointer-events: none !important;
  transition: none !important;
}
.page-products .products-list .product-item.bts-has-tol .cdz-product-top .bts-tol:after {
  display: none !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 218: MOBILE ONLY - the header search pill is lower.

   Pass 173 sizes the whole pill (form, input, loupe button, clear button)
   from one variable, so lowering it is this one line: 40px -> 34px. The
   input keeps its font size - below 16px iOS zooms the page on focus.
   ========================================================================== */
@media (max-width: 768px) {
  .header-wrapper-center {
    --bts-msearch-h: 34px;
  }
}

/* ==========================================================================
   BTS REVAMP - pass 219: MOBILE ONLY - less dead space, top to bottom.

   Measured on a 390px phone (category page) before this pass:
     breadcrumbs    2 lines, 50px, then 20px before the title
     title          24px on 2 lines + 20px under it
     toolbar        2 rows, 88px, + 18px under it
     between cards  ~36px (8+8px item padding + 20px margin)
     in the card    14px padding; the icon-link row 75px tall, because
                    "DODAJ NA SEZNAM ŽELJA" wrapped onto four lines
   What changes:
     - breadcrumbs stay on ONE line and scroll sideways when too long;
     - the title is a bit smaller with tighter margins;
     - "Filtri" 46 -> 44px and closer to the toolbar;
     - the toolbar keeps its count as one small line, and the controls share
       ONE 36px row: [Razvrsti po Položaj v] [direction] [12 v] (the
       "Prikaži" label goes, the select says enough there);
     - cards sit closer together and have less inner padding;
     - the icon links under the card show their icons only (the labels stay
       in the markup for screen readers), one 30px row instead of 75px.
   Nothing here applies above 767px.
   ========================================================================== */
@media (max-width: 767px) {

/* ---- breadcrumbs: one line ---- */
.breadcrumbs {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.breadcrumbs::-webkit-scrollbar {
  display: none;
}
.breadcrumbs .items {
  display: flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 8px 0 !important;
}
.breadcrumbs .items > li {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* ---- title ---- */
.page-products .page-main {
  padding-top: 4px !important;
}
.page-products .page-title-wrapper .page-title {
  margin: 0 0 12px !important;
  font-size: 21px !important;
  line-height: 1.2 !important;
}

/* ---- filter row ---- */
.bts-fm-js .catalog-topnav.amasty-catalog-topnav,
html:not(.bts-fm-js) .catalog-topnav.amasty-catalog-topnav:has(.filter-options-item) {
  margin: 0 0 10px !important;
}
.bts-fm-js .catalog-topnav .bts-fm-trigger,
.bts-fm-js .catalog-topnav .bts-fm-side > .filter-options-item > .filter-options-title {
  height: 44px !important;
}
html:not(.bts-fm-js) .catalog-topnav.amasty-catalog-topnav:has(.filter-options-item):before {
  height: 44px;
}

/* ---- toolbar: count line + one row of controls ---- */
.page-products .column.main .toolbar.toolbar-products {
  gap: 6px 6px !important;
  margin: 0 0 12px !important;
}
.page-products .column.main .toolbar.toolbar-products .toolbar-amount {
  flex: 1 1 100% !important;
  order: 1 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}
.page-products .column.main .toolbar.toolbar-products .toolbar-sorter {
  order: 2 !important;
  flex: 1 1 auto !important;
  height: 36px !important;
}
.page-products .column.main .toolbar.toolbar-products .field.limiter {
  order: 3 !important;
  flex: 0 0 auto !important;
  height: 36px !important;
}
.page-products .column.main .toolbar.toolbar-products .sorter-label,
.page-products .column.main .toolbar.toolbar-products select.sorter-options,
.page-products .column.main .toolbar.toolbar-products select.limiter-options {
  height: 36px !important;
  line-height: 34px !important;
  font-size: 12.5px !important;
}
.page-products .column.main .toolbar.toolbar-products .sorter-action {
  width: 36px !important;
  height: 36px !important;
}
.page-products .column.main .toolbar.toolbar-products .field.limiter > .label {
  display: none !important;
}
.page-products .column.main .toolbar.toolbar-products select.limiter-options {
  width: 60px !important;
  padding: 0 24px 0 12px !important;
  border-left: 1px solid var(--bts-line, #e7e5df) !important;
  border-radius: 8px !important;
  background-position: right 8px center !important;
}
/* the pagination under the grid: a little less air */
.page-products .column.main .products.wrapper ~ .toolbar.toolbar-products {
  margin: 14px 0 0 !important;
}
.page-products .column.main {
  padding-bottom: 16px !important;
}

/* ---- the grid: cards closer together ----
   (the winning theme rules are ".products.list.items.product-items ..." -
   five classes - hence the long selectors) */
.page-products .products-grid .products.list.items.product-items > .product-item,
.page-products .products-grid .product-items > .product-item,
.page-products .products-grid .product-item {
  margin-bottom: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---- inside the card ---- */
.page-products .products-grid .products.list.items.product-items .product-item .product-item-info,
.page-products .products-grid .product-item .product-item-info {
  padding: 10px !important;
}
.page-products .products-grid .product-item .cdz-hover-section {
  gap: 8px !important;
}
.page-products .products-grid .product-item .product-item-name {
  margin: 3px 0 2px !important;
}
.page-products .products-grid .product-item .name-variant {
  margin: 0 !important;
  padding: 0 !important;
}
.page-products .products-grid .product-item .bts-price-group {
  margin: 6px 0 8px !important;
  padding-top: 6px !important;
}
/* icon links: icons only */
.page-products .products-grid .product-item .bts-card-actions {
  margin: 8px 0 0 !important;
  padding: 6px 0 0 !important;
}
.page-products .products-grid .product-item .bts-card-actions .bts-card-action {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  justify-content: center !important;
}
.page-products .products-grid .product-item .bts-card-actions .bts-card-action-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}
.page-products .products-grid .product-item .bts-card-actions .bts-card-action-ico {
  width: 18px !important;
  height: 18px !important;
}
.page-products .products-grid .product-item .bts-card-actions .bts-card-action-ico svg {
  width: 18px !important;
  height: 18px !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 220: DESKTOP - "Priljubljene kategorije" above the
   featured-products carousel.

   web/js/bts-mobile-menu.js (pass 186 block) moves the shortcuts node on the
   home page: below 768px into the slideshow row (as before), from 768px up
   directly in front of the .row that holds .bts-featured - i.e. between the
   hero row and the carousel - and tags it .bts-cat-shortcuts--above-featured.
   Here it only gets the spacing of that spot.
   ========================================================================== */
@media (min-width: 769px) {
  .cms-index-index .bts-cat-shortcuts.bts-cat-shortcuts--above-featured {
    margin: 22px 0 24px !important;
  }
}

/* ==========================================================================
   BTS REVAMP - pass 221: MOBILE ONLY - the whole header is 20% lower.

   Measured on a 390px phone: .header.content was 123px tall -
   10px padding + 68px logo row (the logo plate 60px + 8px under it) + 34px
   search + 10px padding. Target ~98px (-20%). The search pill keeps its 34px
   (pass 218, a comfortable tap target); the height comes out of the logo row
   and the paddings:
     padding       10 -> 5px   top and bottom
     logo image    ~48 -> ~35px tall (width capped at 175px, proportions kept)
     logo plate    padding 6 -> 4px, 8px -> 6px under it
   The hamburger stays centred on the logo row by itself.
   ========================================================================== */
@media (max-width: 768px) {

.page-header .header.content {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
.page-header .header-wrapper-left .logo-left .logo {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  margin-bottom: 6px !important;
}
.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: 175px !important;
  max-width: 100% !important;
  height: auto !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 222: MOBILE ONLY - the search pill another 33% lower,
   34px -> 23px (pass 173 sizes the whole pill from this one variable).
   ========================================================================== */
@media (max-width: 768px) {
  .header-wrapper-center {
    --bts-msearch-h: 23px;
  }
  /* the loupe is a font glyph in ::before with a fixed 40px height and
     line-height, which fell out of the lower button - it follows the pill
     height now and is centred in the button */
  .header-wrapper-center .amsearch-button.-loupe,
  .header-wrapper-center .amsearch-input-wrapper.-typed .amsearch-button.-loupe {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .header-wrapper-center .amsearch-button.-loupe:before {
    height: var(--bts-msearch-h) !important;
    line-height: var(--bts-msearch-h) !important;
    font-size: 15px !important;
    width: auto !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   BTS REVAMP - pass 307: MOBILE ONLY - "Priljubljene kategorije" two per row.

   Up to now the shortcut grid went to one card per row below 480px (pass 58:
   @media (max-width: 479px) { grid-template-columns: 1fr }), so on a phone
   the six categories were six full-width 110px cards stacked on each other.

   Now it keeps the two columns it already has from 480 to 767px. A two-up
   card is ~180px wide, too narrow for the desktop row layout (68px image +
   name + arrow side by side - "ORODJE NA PLOSCICE" would break into three
   lines), so below 480px the card is stacked instead: image on top, name and
   the product count centred underneath, the arrow dropped (the whole card is
   the link anyway). Image 68 -> 56px and smaller padding keep the card about
   as tall as before, so the section is half as long.
   ========================================================================== */
@media (max-width: 479px) {

.bts-cat-shortcuts .bts-cat-shortcuts-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.bts-cat-shortcuts .bts-cat-shortcut {
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 12px 8px !important;
  text-align: center;
}
.bts-cat-shortcuts .bts-cat-shortcut-img {
  flex: 0 0 56px !important;
  width: 56px !important;
  height: 56px !important;
}
.bts-cat-shortcuts .bts-cat-shortcut-img img {
  max-width: 56px !important;
  max-height: 56px !important;
}
.bts-cat-shortcuts .bts-cat-shortcut-body {
  flex: 0 0 auto !important;
  width: 100%;
}
.bts-cat-shortcuts .bts-cat-shortcut-name {
  font-size: 12.5px !important;
}
.bts-cat-shortcuts .bts-cat-shortcut-meta {
  font-size: 11.5px !important;
}
.bts-cat-shortcuts .bts-cat-shortcut-arrow {
  display: none !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 308: the left half of the search dropdown (categories,
   popular searches, recent searches) gets its own graphite grey.
   DESKTOP + MOBILE.

   Until now the whole dropdown was the dark #17181b of pass 22. The left
   .amsearch-items-section now gets a graphite / dark concrete grey (#3a3b3f),
   so the suggestions read as a separate panel next to the product list while
   staying in the dark palette of the header (#373737) and the cards (#26262a).
   (A light concrete grey was tried first and rejected - it fought the dark
   right half and the yellow.)

   Text stays light (#e8e8ea, ~9:1 on the grey). The matched part of a term
   (.amsearch-highlight) is yellow and bold as elsewhere on the site - the
   head-include rule painting it #000 made it black on black on the dark panel.
   The "invert" part keeps its blue tint. Hover goes yellow as in pass 22.

   Only the item containers are coloured, so a products block that ends up
   inside this section (pass 114 safety net) keeps its own styling.
   ========================================================================== */
.amsearch-result-section > .amsearch-items-section {
  background: #3a3b3f !important;
  border-radius: var(--bts-radius-lg, 16px) 0 0 var(--bts-radius-lg, 16px) !important;
  border-right-color: rgba(255, 255, 255, .12) !important;
}
.amsearch-items-section .amsearch-item-container .amsearch-block-header,
.amsearch-items-section .amsearch-item-container .amsearch-title,
.amsearch-items-section .amsearch-item-container .amsearch-link,
.amsearch-items-section .amsearch-item-container .amsearch-invert {
  color: #e8e8ea !important;
}
.amsearch-items-section .amsearch-item-container .amsearch-link:hover {
  color: var(--bts-yellow, #efd111) !important;
}
.amsearch-items-section .amsearch-item-container .amasty-xsearch-num-results {
  color: #a4a5aa !important;
}

/* ==========================================================================
   BTS REVAMP - pass 308b: the search dropdown is back on screen.
   DESKTOP + MOBILE.

   BTS_Custom (view/frontend/web/css/bts-custom.css, in the image since
   2026-09-24) centres the dropdown under the search field:

       .amsearch-result-section { left: 50% !important;
                                  transform: translateX(-50%) !important }

   Pass 22 (desktop) and pass 114 (mobile) anchor it with left: 0 instead,
   which wins for "left" - but the transform still applies, so the panel was
   pulled half its width to the left: x = -120px on a 1440px screen (the
   category column was cut off), x = -165px on a phone (half the panel off
   screen). Dropping only the transform is not enough either: from left: 0 a
   1100px panel runs 90px past the right edge of a 1440px screen.

   So both halves of the centring are applied together: left: 50% +
   translateX(-50%). On desktop the 1100px panel is centred under the 580px
   search field (x 170..1270 at 1440px); on a phone the panel is as wide as
   the field, so centring puts it exactly under it.
   ========================================================================== */
.header-wrapper-center .amsearch-result-section,
.page-header .amsearch-result-section {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

/* ==========================================================================
   BTS REVAMP - pass 308c: the matched word in the grey panel is yellow and
   bold at every width.

   design/head/includes (.amsearch-item-container:not(.recent_searches)
   .amsearch-highlight { color: #000 }) beats the yellow of pass 22 on desktop,
   which left the matched word black on the dark panel. Pinned here, inside
   the left panel only.
   ========================================================================== */
.amsearch-result-section > .amsearch-items-section .amsearch-item-container .amsearch-highlight {
  color: var(--bts-yellow, #efd111) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   BTS REVAMP - pass 309: DESKTOP - the red bar over the old price in the
   search dropdown covers only the number, not the whole card.

   The bar is design/head/includes' .old-price::after (position: absolute;
   left: -4px; right: -4px; top: 50%; 3px red), so it is exactly as wide as
   .old-price. In the dropdown .old-price is a flex item of the row-flex
   .price-box that takes the whole line (235px of a 271px card) so it can sit
   under "ZE OD ..." - for a 44px "75,41 EUR". Sizing .old-price down (pass 113
   style) does not work here: as a flex item it is blockified and stretched.

   So .old-price keeps its box and its line, and the bar moves to the number
   itself: .old-price::after is switched off and the same 3px red bar is drawn
   by .old-price .price::after, with .price as an inline-block anchor. The bar
   is then the price width plus 4px on each side, wherever the card places it.
   Below 768px pass 114 removes the bar anyway (plain line-through), so this
   is limited to desktop.
   ========================================================================== */
@media (min-width: 769px) {

.amsearch-result-section .old-price::after {
  content: none !important;
}
.amsearch-result-section .old-price .price {
  position: relative !important;
  display: inline-block !important;
}
.amsearch-result-section .old-price .price::after {
  content: "" !important;
  position: absolute !important;
  left: -4px !important;
  right: -4px !important;
  top: 50% !important;
  height: 3px !important;
  background: red !important;
  transform: translateY(-50%) !important;
  pointer-events: none;
}

}

/* ==========================================================================
   BTS REVAMP - pass 310: MOBILE ONLY - the live search is a full-screen
   sheet, like the filters (pass 206).

   web/js/bts-search-sheet.js sets .bts-ss-open on <html> while Amasty's
   search is open (body.-amsearch-overlay-opened) on a screen up to 768px, and
   appends two small nodes to <body>: .bts-ss-bar (the close button) and
   .bts-ss-hint (what to type, shown while there are no results yet).

   Amasty's own .amsearch-wrapper-block is pinned to the whole screen, so the
   input, the knockout bindings and the result markup stay Amasty's:

     +------------------------------------------+
     | [x]  [ search field ............ (Q) ]   |  top row, 64px
     +------------------------------------------+
     | Kategorije     chips, wrap                |  graphite (pass 308)
     | Najpogosteje   chips, wrap                |
     +------------------------------------------+
     | Izdelki (N)                   Poglej vse  |  dark
     | [img] SVEDER HM 5XD ...                   |  one product per row:
     |       Ze od 41,20 EUR   75,41             |  72px image left,
     |       [ Izberi dimenzijo ]                |  text and button right
     +------------------------------------------+

   The results scroll on their own (the page behind is locked), the bottom
   bar is hidden while the sheet is open, and the field is 16px so iOS does
   not zoom into it. Closing: the [x], the phone's back button or Escape -
   see the JS. If the JS does not load, .bts-ss-open never appears and the
   search stays the dropdown of passes 113/114.
   ========================================================================== */
.bts-ss-bar,
.bts-ss-hint {
  display: none;
}

@media (max-width: 768px) {

/* ---------- A. lock the page, hide what would sit on top ---------- */
html.bts-ss-open,
html.bts-ss-open body {
  overflow: hidden !important;
}
html.bts-ss-open .bts-bottombar {
  display: none !important;
}

/* ---------- B. the sheet itself ---------- */
html.bts-ss-open .page-header .amsearch-wrapper-block {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bts-ink-2, #17181b) !important;
}
html.bts-ss-open .page-header .amsearch-wrapper-block:before {
  content: none !important;
}

/* top row: [x] + field */
html.bts-ss-open .bts-ss-bar {
  display: block;
  position: fixed;
  top: 10px;
  left: 6px;
  z-index: 10002;
}
html.bts-ss-open .bts-ss-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #e8e8ea;
  box-shadow: none;
}
html.bts-ss-open .bts-ss-close:active {
  background: rgba(255, 255, 255, .1);
}
html.bts-ss-open .page-header .amsearch-form-block {
  position: fixed !important;
  top: 10px !important;
  left: 54px !important;
  right: 12px !important;
  z-index: 10001 !important;
  width: auto !important;
  max-width: none !important;
  height: 44px !important;
  margin: 0 !important;
}
html.bts-ss-open .page-header .amsearch-input-wrapper,
html.bts-ss-open .page-header .amsearch-input-wrapper .amsearch-input {
  height: 44px !important;
}
html.bts-ss-open .page-header .amsearch-input-wrapper .amsearch-input {
  font-size: 16px !important;
  line-height: 44px !important;
  padding: 0 88px 0 16px !important;
  border-radius: 22px !important;
}
html.bts-ss-open .page-header .amsearch-input-wrapper .amsearch-button.-loupe {
  height: 44px !important;
  width: 48px !important;
  top: 0 !important;
  bottom: auto !important;
  border-radius: 0 22px 22px 0 !important;
}
html.bts-ss-open .page-header .amsearch-input-wrapper .amsearch-button.-loupe:before {
  height: 44px !important;
  line-height: 44px !important;
}
html.bts-ss-open .page-header .amsearch-input-wrapper .amsearch-button.-close {
  position: absolute !important;
  right: 52px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* hint while nothing has been found yet */
html.bts-ss-open .bts-ss-hint {
  display: block;
  position: fixed;
  top: 76px;
  left: 20px;
  right: 20px;
  z-index: 10001;
  color: #a4a5aa;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}
html.bts-ss-open:has(.page-header .amsearch-form-block.-opened) .bts-ss-hint {
  display: none;
}

/* ---------- C. the results: below the top row, scroll on their own ---------- */
html.bts-ss-open .page-header .amsearch-result-section {
  position: fixed !important;
  top: 64px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
html.bts-ss-open .page-header .amsearch-result-section > .amsearch-items-section,
html.bts-ss-open .page-header .amsearch-result-section > .amsearch-products-section {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
}

/* ---------- D. categories / popular searches as chips ---------- */
html.bts-ss-open .amsearch-items-section .amsearch-item-container {
  text-align: left !important;
  margin: 0 0 12px !important;
}
html.bts-ss-open .amsearch-items-section .amsearch-item-container:last-child {
  margin-bottom: 0 !important;
}
html.bts-ss-open .amsearch-items-section .amsearch-block-header {
  display: flex !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}
html.bts-ss-open .amsearch-items-section .amsearch-block-header:after {
  content: none !important;
}
/* one swipeable row per block, so the products are visible right away
   instead of 15 category chips filling the first screen */
html.bts-ss-open .amsearch-items-section .amsearch-tab-items {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin: 0 -16px !important;
  padding: 0 16px 2px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
html.bts-ss-open .amsearch-items-section .amsearch-tab-items::-webkit-scrollbar {
  display: none;
}
html.bts-ss-open .amsearch-items-section .amsearch-tab-items > .amsearch-item {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}
html.bts-ss-open .amsearch-items-section .amsearch-tab-items > .amsearch-item .amsearch-link {
  display: inline !important;
  padding: 0 !important;
  width: auto !important;
  text-align: left !important;
  white-space: nowrap !important;
}
html.bts-ss-open .amsearch-items-section .amsearch-tab-items > .amsearch-item {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
html.bts-ss-open .amsearch-items-section .amsearch-tab-items .amsearch-invert {
  background: transparent !important;
}

/* ---------- E. products: one per row, image left ---------- */
html.bts-ss-open .amsearch-products-section .amsearch-block-header {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}
html.bts-ss-open .amsearch-products-section .amsearch-block-header .amsearch-title,
html.bts-ss-open .amsearch-products-section .amsearch-block-header .amsearch-link.-view-all {
  width: auto !important;
  height: auto !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  white-space: nowrap;
}
html.bts-ss-open .amsearch-products-section .amsearch-block-header .amsearch-link.-view-all {
  color: var(--bts-yellow, #efd111) !important;
  font-size: 13px !important;
}
html.bts-ss-open .amsearch-products-section .amsearch-product-list,
html.bts-ss-open .amsearch-products-section ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  column-gap: 12px !important;
  row-gap: 8px !important;
  align-items: start !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  transform: none !important;
  text-align: left !important;
}
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item > .amsearch-image {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 72px !important;
  height: 72px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item > .amsearch-image .amsearch-product-image-container,
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item > .amsearch-image .product-image-wrapper {
  width: 72px !important;
  height: 72px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item > .amsearch-image img {
  position: static !important;
  max-width: 72px !important;
  max-height: 72px !important;
  width: auto !important;
  height: auto !important;
}
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item > .amsearch-description {
  grid-column: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item .amsearch-link.product-item-link {
  font-size: 13px !important;
  line-height: 1.3 !important;
  text-align: left !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}
/* the matched word on the white card: the blue of the desktop dropdown,
   the yellow of pass 22 does not read on white */
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item .amsearch-link.product-item-link .amsearch-highlight {
  color: rgb(14, 68, 245) !important;
}
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item .product-item-description {
  font-size: 12px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  color: #555 !important;
}
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item .amsearch-wrapper-inner,
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item .price-box {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  column-gap: 10px !important;
  row-gap: 2px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item .price-box .normal-price,
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item .price-box .old-price {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
}
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item .price-box .price {
  font-size: 17px !important;
  line-height: 1.2 !important;
}
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item .price-box .price-label {
  font-size: 12px !important;
}
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item .price-box .old-price .price {
  font-size: 12.5px !important;
}
/* the button of configurable products: in the right column, not floating */
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item > .bts-configurable-badge,
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item .bts-configurable-badge {
  grid-column: 2 !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  justify-content: center;
}
/* simple products: the add-to-cart form, if any, in the right column too */
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item > .product-item-actions,
html.bts-ss-open .amsearch-products-section .amsearch-item.product-item .actions-primary {
  grid-column: 2 !important;
  margin: 0 !important;
}

}

/* ==========================================================================
   BTS REVAMP - pass 311: MOBILE ONLY - a progress bar under the chip rows of
   the search sheet, so it shows that they scroll left and right.

   web/js/bts-search-sheet.js puts div.bts-ss-track > span.bts-ss-thumb right
   after each .amsearch-tab-items row (Kategorije, Najpogosteje iskano) and
   moves the thumb with the row's scrollLeft; the thumb is as wide as the
   visible share of the row. A row that fits gets .is-static and no bar.
   Thin grey track, BTS yellow thumb - the same pairing as the progress bar
   under the featured-products carousel.
   ========================================================================== */
.bts-ss-track {
  display: none;
}

@media (max-width: 768px) {

html.bts-ss-open .bts-ss-track {
  display: block;
  position: relative;
  height: 3px;
  margin: 10px 0 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}
html.bts-ss-open .bts-ss-track.is-static {
  display: none;
}
html.bts-ss-open .bts-ss-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  border-radius: 2px;
  background: var(--bts-yellow, #efd111);
  transition: left .08s linear;
}

}

/* ==========================================================================
   BTS REVAMP - pass 312: product page - the link tiles under the gallery
   (.sliderBox: Katalog, Video, 3D pogled STP, Navodila (PDF)) all at once,
   no carousel. DESKTOP + MOBILE.

   The box used to be a slick carousel with 3 tiles in view, so a 4th tile
   (e.g. the new PDF manual) sat behind "Previous / Next". Practically every
   product has at most 4 tiles (1: 25k products, 2: 4.6k, 3: 1k, 4: 30,
   5: 4 - plus the manual), so slick is no longer initialised
   (gallery.phtml, Fdl_Custom product-detail-change.js) and the tiles are a
   centred row: up to 4 per row at the old tile width (max 204px), 2 per row
   on a phone; a 5th tile simply wraps. No !important on display, so the
   inline display:none of an empty box still hides it.
   ========================================================================== */
.catalog-product-view .sliderBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.catalog-product-view .sliderBox > .item {
  flex: 0 1 calc((100% - 3 * 16px) / 4);
  max-width: 204px;
  min-width: 0;
  box-sizing: border-box;
}
.catalog-product-view .sliderBox > .item .itemTitle {
  font-size: 16px;
  line-height: 1.25;
  margin-top: 10px;
}

/* MOBILE: the big square tiles (2 x 2 at ~150 x 180px) filled a whole phone
   screen under the gallery and cut the labels. On a phone every tile becomes
   a compact button instead - small icon left, label right - two per row, so
   4 links take two ~60px rows; an odd last tile spans the full row. */
@media (max-width: 767px) {

.catalog-product-view .sliderBox {
  gap: 8px;
  justify-content: flex-start;
  margin: 14px 0 6px;
}
.catalog-product-view .sliderBox > .item {
  flex: 1 1 calc((100% - 8px) / 2);
  max-width: calc((100% - 8px) / 2);
  height: auto;
  padding: 7px 10px 7px 7px;
  border-radius: 12px;
  background: #fff;
}
/* an odd last tile (1 of 1, 3 of 3) takes the whole row instead of half */
.catalog-product-view .sliderBox > .item:last-child:nth-child(odd) {
  flex-basis: 100%;
  max-width: 100%;
}
.catalog-product-view .sliderBox > .item .sliderBoxLink {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  height: 100%;
  text-decoration: none;
}
.catalog-product-view .sliderBox > .item .sliderBoxImage {
  flex: 0 0 46px;
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 8px;
}
.catalog-product-view .sliderBox > .item .sliderBoxImage img {
  display: block;
  width: 46px !important;
  height: 46px !important;
  object-fit: contain;
}
.catalog-product-view .sliderBox > .item .itemTitle {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left !important;
  overflow-wrap: anywhere;
}

}

/* ==========================================================================
   BTS REVAMP - pass 313: related / upsell / cross-sell cards - price and the
   action ("Dodaj v kosarico" row or "Izberi dimenzijo") sit on the bottom of
   the card, aligned across the whole carousel. DESKTOP + MOBILE.

   The owl items were as tall as their own content, so a card with a one-line
   title had its price and "Izberi dimenzijo" 20px higher than a card with a
   two-line title, and configurable cards (no button row since the items.phtml
   override) did not line up with simple ones at all.

   1. equal heights: .owl-stage becomes a flex row (owl keeps its inline item
      widths and the translate3d on the stage; flex: 0 0 auto stops the items
      from shrinking), each .owl-item a flex column, and the card
      (.product-item-info) grows to the full item height;
   2. pinning, in the card's own box (.product-item-info is position:
      relative): the action is 35px tall at 10px from the bottom and 15px
      from the sides (the text column of the card) - the simple
      card's .cdz-product-bottom already is (pass 305), the configurable
      badge now gets the same box - and the price sits 10px above it
      (bottom: 55px). The text above keeps 100px of room.
   ========================================================================== */
.block.related .owl-stage,
.block.upsell .owl-stage,
.block.crosssell .owl-stage {
  display: flex !important;
}
.block.related .owl-stage > .owl-item,
.block.upsell .owl-stage > .owl-item,
.block.crosssell .owl-stage > .owl-item {
  display: flex !important;
  flex: 0 0 auto !important;
  float: none !important;
  height: auto !important;
}
.block.related .owl-item > .product-item,
.block.upsell .owl-item > .product-item,
.block.crosssell .owl-item > .product-item {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}
.block.related .owl-item > .product-item > .product-item-info,
.block.upsell .owl-item > .product-item > .product-item-info,
.block.crosssell .owl-item > .product-item > .product-item-info {
  flex: 1 1 auto !important;
  height: auto !important;
  box-sizing: border-box !important;
  position: relative !important;
  padding-bottom: 100px !important;
}
.block.related .owl-item .product-item .product-item-info .product-item-details,
.block.upsell .owl-item .product-item .product-item-info .product-item-details,
.block.crosssell .owl-item .product-item .product-item-info .product-item-details {
  padding-bottom: 0 !important;
}
.block.related .owl-item .product-item .product-item-info .price-box,
.block.upsell .owl-item .product-item .product-item-info .price-box,
.block.crosssell .owl-item .product-item .product-item-info .price-box {
  position: absolute !important;
  left: 15px !important;
  right: 15px !important;
  top: auto !important;
  bottom: 55px !important;
  margin: 0 !important;
}
.block.related .owl-item .product-item .product-item-info .cdz-product-bottom,
.block.upsell .owl-item .product-item .product-item-info .cdz-product-bottom,
.block.crosssell .owl-item .product-item .product-item-info .cdz-product-bottom,
.block.related .owl-item .product-item .product-item-info .bts-configurable-badge,
.block.upsell .owl-item .product-item .product-item-info .bts-configurable-badge,
.block.crosssell .owl-item .product-item .product-item-info .bts-configurable-badge {
  position: absolute !important;
  left: 15px !important;
  right: 15px !important;
  top: auto !important;
  bottom: 10px !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 2 !important;
}
.block.related .owl-item .product-item .product-item-info .bts-configurable-badge,
.block.upsell .owl-item .product-item .product-item-info .bts-configurable-badge,
.block.crosssell .owl-item .product-item .product-item-info .bts-configurable-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 35px !important;
  min-height: 35px !important;
  box-sizing: border-box !important;
  transform: none !important;
  max-width: none !important;
}

/* ==========================================================================
   BTS REVAMP — pass 314: footer column headings visible again

   The footer blocks title their columns with <p class="h5"> (KORPORATIVNO,
   Povezave, Podpora, LOKACIJA TRGOVINE). The theme colours those with
   @footer-title__text = #3a3a3a, which suited the old light footer; since the
   revamp the footer is #373737, so the headings were grey on grey
   (58,58,58 on 55,55,55) and could not be seen - on desktop and on mobile,
   where the same headings are the accordion toggles and their chevron
   inherits the colour. They now get the treatment of our other footer titles.
   On mobile the theme also set them italic + capitalize; that is dropped so
   they read the same as on desktop, and each toggle gets a proper tap row.
   ========================================================================== */
.page-footer .footer-box p.h5 {
  color: #fff !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  letter-spacing: .4px;
}

@media (max-width: 767px) {

.page-footer .footer-box p.h5 {
  margin: 0 !important;
  padding: 14px 0 !important;
  line-height: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.page-footer .footer-box p.h5:after {
  color: #b9b9bc;
  margin-top: -2px;
}
.page-footer .footer-box p.h5.expanded:after {
  color: var(--bts-yellow, #efd111);
}

}

/* ==========================================================================
   BTS REVAMP — pass 315: search dropdown - products in an even 3 x 3 grid

   The dropdown shows 9 products, but the list was a wrapping flex row whose
   cards were only capped at 33.333% and otherwise took their content width:
   the "Izberi dimenzijo" cards of configurable products came out ~270px,
   simple ones ~175px, so the rows read 2+1 / 4 / 2 instead of 3 / 3 / 3.
   On desktop the list is now a 3-column grid with equal columns and equal
   row heights (grid-auto-rows: 1fr). Mobile (<=768px, pass 112: one product
   per row in the full-screen sheet) is left as it is.
   ========================================================================== */
@media (min-width: 769px) {

.amsearch-products-section.-grid:not(.-slider) .amsearch-product-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr;
  gap: 8px !important;
  /* line the grid up with the "Izdelki (178)" / "Poglej si vse" header row */
  padding: 0 20px 20px !important;
  box-sizing: border-box !important;
}
.amsearch-products-section.-grid:not(.-slider) .amsearch-product-list > .amsearch-item {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

}

/* ==========================================================================
   BTS REVAMP — pass 316: listing cards - the price block is glued to the
   bottom together with everything under it, so prices share one line per row

   Until now only the CTA (cart row / "Izberi dimenzijo" / "Pošlji
   povpraševanje") and the icon row were pinned to the bottom (passes 194-204);
   the price block (.bts-price-group) followed the name from the top. A card
   with a longer name, or a configurable card with its "ŽE OD" chip, therefore
   had its price 10-20px lower than its neighbour (reported screenshot,
   search "wdawe313": 265px vs 248px).

   Now the free space of the column goes ABOVE the price block
   (margin-top: auto) and the stack under it has one fixed shape on both
   card types:

       price block      min-height 56px (the height with the "ŽE OD" chip)
       20px
       CTA              26px (the enquiry text was 24px)
       10px
       icon row

   A configurable card is one flex column with a 10px gap (pass 203:
   .product-item-details is display: contents) and an empty
   .product-item-inner between price and CTA, i.e. 2 x 10px. A simple card
   lays these out inside .product-item-details, which has no gap, so the same
   20px / 10px are written as margins there. Only the listing grid of category
   and search pages (body.page-products) - related / upsell blocks keep their
   own absolute layout of pass 313.
   ========================================================================== */
.page-products .products.wrapper.grid.products-grid .product-item .bts-price-group {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  min-height: 56px !important;
  box-sizing: border-box !important;
}
/* configurable: the button gives up its auto margin, the flex gap spaces it */
.page-products .products.wrapper.grid.products-grid .product-item.js-configurable-product .product-item-info .bts-configurable-badge {
  margin-top: 0 !important;
}
/* simple: cart row / enquiry row at a fixed distance under the price block */
.page-products .products.wrapper.grid.products-grid .product-item:not(.js-configurable-product) .product-item-info .cdz-product-bottom.hover-effect,
.page-products .products.wrapper.grid.products-grid .product-item:not(.js-configurable-product) .product-item-details .cdz-product-bottom.hover-effect {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  min-height: 26px !important;
}
.page-products .products.wrapper.grid.products-grid .product-item:not(.js-configurable-product) .product-item-details > .bts-card-actions {
  margin-top: 10px !important;
}
/* pass 316b: on a phone the enquiry text (18px) needs ~187px but the card
   column is 136-151px, so it broke into two lines (49px instead of 26px) and
   its card's price sat 23px higher than the neighbour's. One line at 12px
   (~125px) fits even the 360px phone; ellipsis only as a last resort. */
@media (max-width: 767px) {
.page-products .products.wrapper.grid.products-grid .product-item .cdz-product-bottom #product-sendinquiry-button {
  display: block !important;
  font-size: 12px !important;
  line-height: 26px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
}
}
/* pass 316c: inside the price block the rows sit at its bottom, so the price
   line stays on the shared row even when the "ŽE OD" chip and a wide price do
   not fit side by side (360px phone: 57 + 8 + 77px in a 138px column) and the
   chip wraps above it. Below 400px the chip is also a little narrower, which
   keeps chip and price on one line for the usual two-digit prices. */
/* the group is pass 193's wrapping flex ROW (flag / price + caption / saving /
   "brez DDV", each on its row by order) - it stays a row; align-content only
   packs those rows at the bottom of the block */
.page-products .products.wrapper.grid.products-grid .product-item .bts-price-group {
  align-content: flex-end !important;
}
@media (max-width: 400px) {
.page-products .products.wrapper.grid.products-grid .product-item .bts-price-group .price-box {
  column-gap: 6px !important;
}
.page-products .products.wrapper.grid.products-grid .product-item .bts-price-group .price-label {
  padding-left: 6px !important;
  padding-right: 6px !important;
}
}

/* ==========================================================================
   BTS REVAMP — pass 317: search results page - no frame around the product
   list. Amasty Xsearch draws its tab panel (.amsearch-products-tab.data.item
   .content) with a 1px #dbdbdb border and a 2px 3px #dbdbdb shadow, which put
   a grey box around the whole grid of cards. Removed on request.
   ========================================================================== */
.amsearch-products-tab.data.item.content {
  border: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   BTS REVAMP — pass 318: footer - the social column ("Povezave" / "Pratite
   nas") as a row of icon buttons instead of three near-empty list rows.

   The column is a .footer-link list like the others, but its rows hold only
   an icon (no text), so it read as three empty lines with separators. Now:
   one row of 44px rounded buttons (translucent white on the dark footer,
   yellow BTS accent on hover), and a one-line caption under them in the
   store's language. Matched by content (a list holding the Facebook /
   LinkedIn / Instagram links), not by the list id, because the EN footer
   uses #footer-content-2 for other links - and not by "social_*", because
   the location column's map link is .social_googlemaps.
   Mobile: the same row inside the accordion.
   ========================================================================== */
.page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 4px !important;
}
.page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram) > li {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram) :is(a.social_facebook, a.social_linkedin, a.social_Instagram) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #e6e6e8 !important;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram) :is(a.social_facebook, a.social_linkedin, a.social_Instagram):hover,
.page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram) :is(a.social_facebook, a.social_linkedin, a.social_Instagram):focus-visible {
  background: var(--bts-yellow, #efd111) !important;
  color: #1c1a08 !important;
  transform: translateY(-2px);
}
.page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram) :is(a.social_facebook, a.social_linkedin, a.social_Instagram) .fa {
  font-size: 20px !important;
  line-height: 1 !important;
  width: auto !important;
  margin: 0 !important;
}
.page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram) :is(a.social_facebook, a.social_linkedin, a.social_Instagram) .fa:before {
  color: inherit !important;
}
.page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram)::after {
  flex: 1 1 100%;
  font-size: 12px;
  line-height: 1.4;
  color: #9a9a9d;
  margin-top: 2px;
}
html[lang="sl"] .page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram)::after { content: "Novosti, akcije in nasveti za orodja."; }
html[lang="hr"] .page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram)::after,
html[lang="bs"] .page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram)::after { content: "Novosti, akcije i savjeti za alate."; }
html[lang="sr"] .page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram)::after { content: "Novosti, akcije i saveti za alate."; }
html[lang="en"] .page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram)::after { content: "News, offers and tool tips."; }
/* pass 318b: the icon <span> keeps the footer's own "span { color: #d8d8da
   !important }" (the footer rules of the first passes), so on hover it stayed
   light grey on the yellow button and could hardly be seen. The icon gets its
   colour itself, in both states. */
.page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram) :is(a.social_facebook, a.social_linkedin, a.social_Instagram) .fa,
.page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram) :is(a.social_facebook, a.social_linkedin, a.social_Instagram) .fa:before {
  color: #e6e6e8 !important;
}
.page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram) :is(a.social_facebook, a.social_linkedin, a.social_Instagram):is(:hover, :focus-visible) .fa,
.page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram) :is(a.social_facebook, a.social_linkedin, a.social_Instagram):is(:hover, :focus-visible) .fa:before {
  color: #1c1a08 !important;
}
/* pass 318c: the link also holds the block's "&nbsp;" inside the icon span and a
   trailing space, which took width (the icon sat left of centre) and got the
   footer's hover underline - a small line under the icon. The whitespace is
   collapsed (font-size 0 on the link, the icon box clipped to 1em) and no
   underline is drawn in any state. */
.page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram) :is(a.social_facebook, a.social_linkedin, a.social_Instagram),
.page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram) :is(a.social_facebook, a.social_linkedin, a.social_Instagram):is(:hover, :focus, :focus-visible, :active) {
  text-decoration: none !important;
  font-size: 0 !important;
}
.page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram) :is(a.social_facebook, a.social_linkedin, a.social_Instagram) .fa {
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
.page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram) :is(a.social_facebook, a.social_linkedin, a.social_Instagram) .fa:before {
  display: block !important;
  width: 1em !important;
  text-align: center !important;
}
/* pass 318d: on a phone a closed accordion row is 59px; the social one was 73px
   because its list kept pass 318's margin-top: 4px while the theme gives the
   lists -10px. Same -10px while closed, the 4px only once it is open. */
@media (max-width: 767px) {
.page-footer .footer-box ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram) {
  margin-top: -10px !important;
}
.page-footer .footer-box p.h5.expanded + ul.footer-link:has(a.social_facebook, a.social_linkedin, a.social_Instagram) {
  margin-top: 4px !important;
}
}

/* ==========================================================================
   BTS REVAMP — pass 319: footer - calmer separators and a help band

   1) The link rows were split by solid white 1px lines, the brightest thing
      in the footer after the headings - heavy and dated. They become a faint
      rgba(255,255,255,.1) line (desktop; the mobile accordion rows of pass
      314 keep their own .14 line).
   2) The end of every page offered the buyer nothing to do next. The empty
      top footer row (#topfooter, 50px) now holds a help band
      (Magento_Theme::html/bts-footer-cta.phtml): headset icon, "Potrebujete
      pomoč pri izbiri orodja?", one line of text with the working hours, and
      four actions - the store's phone (yellow, tel:), e-mail, Tehnični
      pomočnik and Katalogi. Desktop: one row; phone: text above, actions as a
      2 x 2 grid of 44px tap targets.
   ========================================================================== */
.page-footer .footer-box .footer-link li {
  border-bottom-color: rgba(255, 255, 255, .1) !important;
}
/* the line above the copyright row too */
.page-footer .bottom-footer-wrapper {
  border-top-color: rgba(255, 255, 255, .1) !important;
}

.page-footer .top-footer-wrapper {
  padding: 36px 0 8px !important;
}
.page-footer .top-footer-wrapper .footer-content-top {
  padding-left: 15px;
  padding-right: 15px;
}
.bts-footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 26px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  box-sizing: border-box;
}
.bts-footer-cta-intro {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
}
.bts-footer-cta-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bts-yellow, #efd111);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-footer .bts-footer-cta-icon .fa,
.page-footer .bts-footer-cta-icon .fa:before {
  color: #1c1a08 !important;
  font-size: 22px;
}
.page-footer .bts-footer-cta p.bts-footer-cta-title {
  margin: 0 0 4px !important;
  color: #fff !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
}
.page-footer .bts-footer-cta p.bts-footer-cta-sub {
  margin: 0 !important;
  color: #b9b9bc !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.page-footer .bts-footer-cta .bts-footer-cta-hours {
  display: block;
  margin-top: 2px;
  color: #8e8e92 !important;
  white-space: nowrap;
}
.bts-footer-cta-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: flex-end;
}
/* less dead space between the band and the column headings */
@media (min-width: 768px) {
.page-footer .footer-container-wrapper {
  padding-top: 28px !important;
}
}
.page-footer .bts-footer-cta a.bts-footer-cta-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  color: #f2f2f3 !important;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  box-sizing: border-box;
}
.page-footer .bts-footer-cta a.bts-footer-cta-btn .fa,
.page-footer .bts-footer-cta a.bts-footer-cta-btn .fa:before {
  color: inherit !important;
  font-size: 15px;
}
.page-footer .bts-footer-cta a.bts-footer-cta-btn:hover,
.page-footer .bts-footer-cta a.bts-footer-cta-btn:focus-visible {
  border-color: var(--bts-yellow, #efd111);
  color: var(--bts-yellow, #efd111) !important;
}
.page-footer .bts-footer-cta a.bts-footer-cta-btn.is-primary {
  background: var(--bts-yellow, #efd111);
  border-color: var(--bts-yellow, #efd111);
  color: #1c1a08 !important;
  font-weight: 800;
}
.page-footer .bts-footer-cta a.bts-footer-cta-btn.is-primary:hover,
.page-footer .bts-footer-cta a.bts-footer-cta-btn.is-primary:focus-visible {
  background: #f7de3a;
  color: #1c1a08 !important;
}
.page-footer .bts-footer-cta a.bts-footer-cta-btn.is-ghost {
  border-color: transparent;
  background: rgba(255, 255, 255, .06);
}

@media (max-width: 1199px) {
.bts-footer-cta {
  flex-direction: column;
  align-items: stretch;
}
.bts-footer-cta-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
}
}
@media (max-width: 767px) {
.page-footer .top-footer-wrapper {
  padding: 24px 0 4px !important;
}
.bts-footer-cta {
  padding: 18px 16px;
  gap: 16px;
}
.bts-footer-cta-intro {
  align-items: flex-start;
}
.bts-footer-cta-icon {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
}
.page-footer .bts-footer-cta p.bts-footer-cta-title {
  font-size: 17px !important;
}
.bts-footer-cta-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.page-footer .bts-footer-cta a.bts-footer-cta-btn {
  justify-content: center;
  padding: 0 10px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* phone and e-mail get the full row each - the numbers and addresses are long */
.page-footer .bts-footer-cta a.bts-footer-cta-btn.is-primary,
.page-footer .bts-footer-cta a.bts-footer-cta-btn[href^="mailto:"] {
  grid-column: 1 / -1;
}
}

/* ==========================================================================
   BTS REVAMP — pass 320: the footer on the page's own width, lists without
   separators (DESKTOP, >= 768px)

   The page (header rows, .page-main) is max 1450px with a 10px gutter, so the
   content runs from 10px to 1440px of a 1450px line. The footer kept the
   theme's 1200px box: at 1440 it started 120px further in than everything
   above it, at 1920 125px. Help band, column grid and copyright row now use
   the same 1450px / 10px line, so their left edge meets the slideshow, the
   category tiles and the header logo.

   The link lists lose their row separators (pass 319 had only softened
   them): 11px between rows, 13.5px text in #c6c6c9, yellow on hover - the
   column headings and the spacing carry the structure. The mobile accordion
   rows (< 768px, pass 314) are not touched.
   ========================================================================== */
@media (min-width: 768px) {

.page-footer .top-footer-wrapper .footer-content-top,
.page-footer .footer-container-wrapper,
.page-footer .bottom-footer-wrapper .footer.content {
  max-width: 1450px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  box-sizing: border-box !important;
}
.page-footer .top-footer-wrapper .footer-content-top .bts-footer-cta {
  max-width: none;
}

.page-footer .footer-box .footer-link li {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 11px !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
}
.page-footer .footer-box .footer-link li:last-child {
  margin-bottom: 0 !important;
}
.page-footer .footer-box p.h5 {
  margin: 0 0 20px !important;
}
.page-footer .footer-box ul.footer-link {
  margin-top: 0 !important;
}
.page-footer .footer-box .footer-link li,
.page-footer .footer-box .footer-link li a {
  color: #c6c6c9 !important;
}
.page-footer .footer-box .footer-link li a {
  text-decoration: none !important;
  transition: color .15s ease;
}
.page-footer .footer-box .footer-link li a:hover,
.page-footer .footer-box .footer-link li a:focus-visible {
  color: var(--bts-yellow, #efd111) !important;
}

}