/* ==============================================================
   BTS-COMPANY.COM — bts-custom.css
   All custom styles, grouped by feature to match bts-custom.js.
   Extracted from the combined layout snippet — no rules changed,
   only reorganized + re-commented for maintainability.
   ============================================================== */


/* ==============================================================
   SECTION 1: GLOBAL LAYOUT / MOBILE GRID FIXES
   ============================================================== */

/* Mobile product grid tweaks */
@media (max-width: 767px) {
.products.wrapper.grid.products-grid .cdz-product-bottom.hover-effect {
    margin-top: 0px !important;
}
.product-item-info{
        height: 642px !important;
}
.product-item-link{
white-space: normal;
}

}

/* Site max-width control */
:root {
  --bts-custom-width: 1450px;
}

.page-main,
.header.content,
.breadcrumbs {
max-width: 1450px !important;
}

.header.panel {
max-width: 1450px !important;
}


/* ==============================================================
   SECTION 3: PRODUCT PAGE GALLERY / SWATCH DROPDOWN BASICS
   ============================================================== */

/* Pomanjšanje slik za katalog, video, STP datoteko na strani artikla */
.slick-slide.slick-active{
transform: scale(65%) !important;
}

.fotorama__stage{
height: 450px !important;
}

/* Dropdown arrow indicator for configurable attribute select */
.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;
}

/* Da se je zbrisal gumb za primerjavo na artiklu */
.product-addto-links{
clear: none !important;
}

/* Da so logoti od dobaviteljev višje */
.block-static-block{
margin-bottom: 0px !important;
}

/* Od tukaj višje je urejal Grega */
.owl-item.cloned {
  pointer-events: none;
}

.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;
 }


/* ==============================================================
   SECTION 5: "CONFIGURABLE PRODUCT" BADGE SYSTEM
   Styling for badges added by the JS detectors in bts-custom.js
   (search popup, category grid, category list contexts)
   ============================================================== */

/* --- SEARCH RESULT PRODUCT TILE (Amasty Search) ------------------------ */
.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: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    transform: none;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0;
    text-align: center;
    background: #efcf38;
    color: #000;
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 999;
    cursor: pointer;
}

.item.product.product-item.js-configurable-product .product-item-info{
border: 3px solid #efcf38 !important;
}

/* CONFIGURABLE DETECTED */
.amsearch-item.product-item.js-configurable-product {
    border: 3px solid #efcf38 !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: #efcf38 !important; /* keep background yellow */
    text-decoration: none !important;
}

/* IMAGE NORMALIZATION */
.amsearch-item.product-item .amasty-result-image,
.amsearch-item.product-item img {
    max-height: 150px !important;     /* search images are smaller */
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

@media (min-width: 768px) {

    /* LIST VIEW EXCLUSIVE */
    .products-list .product-item {
        border: 1px solid #e5e5e5;
        border-radius: 6px;
        position: relative;
        padding: 10px;
        transition: .3s ease;
    }

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

    .products-list .product-item.js-configurable-product:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 20px rgba(239,207,56,.4) !important;
    }

    .products-list .product-item .bts-configurable-badge {
        position: absolute;
        top: 65px;
        right: 15px;
        transform: scale(1.10);
        transform-origin: top right;
        background:#efcf38;
        color:#000;
        padding:7px 16px;
        border-radius:4px;
        font-weight:700;
        text-transform:uppercase;
        z-index:3000;
    }

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

/* GRID VIEW: hover effect + badge placement */
.products-grid .product-item .product-item-info:hover {
    box-shadow: 0 14px 44px #efd11169;
    transform: translateY(-4px);
    border: #efcf38 solid 3px;
}

/* GRID MODE — apply border to the correct box */
.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: #efcf38 !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 .bts-configurable-badge {
    transition: all 0.2s ease-in-out;
}

.products-grid .product-item .product-item-info .bts-configurable-badge {
    border: 2px solid #efcf38;    
    position: absolute;
    margin-left: 50%;
    width: calc(100% - 30px);
    bottom: 15px;
    transform: translateX(-50%);
    max-width: 87%;
    background: white;
    color: #000;
    padding: 12px 19px;
    font-size: 18px;
/*    text-transform: uppercase;*/
    display: block;
    text-align: center;
    border-radius: 30px;
    z-index: 1;
}    

/* Fix product image sizing */
    .products-grid .product-item .product-item-info img.product-image-photo {
        max-height: 200px;
        width: auto;
        object-fit: contain;
        display: block;
max-height: 160px !important;
    top: 70px;
    }


/* ==============================================================
   SECTION 6: PRODUCT TILE TEXT STYLING (item number, price,
   name-variant ordering, old-price strikethrough)
   ============================================================== */

.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: #373737!important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

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

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

.catalog-product-view  .products-grid .product-item .product-item-info {
height: 500px !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 */
}

.old-price::after {
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    top: 50%;
    height: 3px;
    background: red;
    transform: translateY(-50%);
}

.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;
    color: #1d2eab !important;
}

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

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

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

.product-item-info .icon.icon-brands {
    position: absolute;
    top: -245px;
    left: 14px;
    z-index: 5;
    width: auto;
    height: auto;
}

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

/* name-variant font sizing (base + bold override) */
.name-variant {
  font-size: 0px !important;
}
.name-variant b {
  font-size: 25px !important;
}

/* All sale prices colored red */
.special-price .price-container.price-final_price.tax.weee .price-wrapper .price{
    color: #cf3838 !important;
    font-size: 25px !important;
}


/* ==============================================================
   SECTION 7: LAYERED NAVIGATION / FILTER SIDEBAR
   ============================================================== */

.block-title strong[data-role="title"] {
    color: black !important;
    background-color: white !important;
    padding: 4px !important;
}
.block-title{
background-color: white !important;
}

.block-title.filter-title{
    border: solid 1px #bbbbbb85 !important;
    border-bottom:none !important;
}

.block-title:has(#block-compare-heading) {
    border: 1px solid #dbdbdb;
border-bottom:none;
}

.checkbox-container.swatch-layered.brand .swatch-option{
    left: 20px;
    border: none;
}

.checkbox-container.swatch-layered.brand input[type="checkbox"]{
    right: 40px;
}

.filter-options-content .item>a {
    display: contents !important;
}

.items.am-filter-items-materiali .item:before{
content: none !important;
}

.filter-options input[type='checkbox']+.amshopby-choice{
left: -20px;
}

.filter-options-content a{
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 500;
}

/* Material filter badges (colored letter chips) */
.materiali-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    border-radius: 6px;
    margin-right: 10px;
    flex-shrink: 0;
}

.category-diff {
    font-weight: 700;
    color: rgba(14, 68, 245); 
    text-decoration: underline;
}


/* ==============================================================
   SECTION 8: "FORMAT KATALOG" TAB LABEL HIGHLIGHT
   ============================================================== */

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


/* ==============================================================
   SECTION 9: MOBILE SEARCH PLACEHOLDER STYLING
   ============================================================== */

@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;
    }
}


/* ==============================================================
   SECTION 10: AMASTY SEARCH — RESULT HIGHLIGHT & SIZING
   ============================================================== */

.amsearch-invert {
    font-weight: 700;
    background-color: rgba(14, 68, 245, 0.3); 
}

.amsearch-item-container:not(.recent_searches) .amsearch-highlight {
    color: #000;
    font-weight: 670;
    font-size: 13px;
    text-transform: uppercase; 
}

.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;
}

.sliderBoxImage img {
    width: 100% !important;
    height: auto !important;
}

.sliderBox .item .itemTitle {
    text-align: center;
    margin-top: 15px;
    font-size: 20px;
    font-weight: 500;
}

.navigation a span {
        text-transform: uppercase !important; 
        font-weight: 500;
} 

/* Amasty search bar / result panel width & positioning (post 2.4.7 upgrade fixes) */
.header-wrapper-center {
    margin-left: auto !important;
}

.amsearch-form-block{
    justify-content: normal !important;
}

.amsearch-wrapper-block,
.amsearch-form-block,
.amsearch-input-wrapper {
    width: 584px !important;
    min-width: 584px !important;
    max-width: 584px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

.amsearch-result-section {
    width: 1000px !important;
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
    z-index: 9999 !important;
}

.amsearch-input{
    width: 75% !important;
}

.amsearch-button{
left: 15px;
}

.amsearch-input-wrapper .amsearch-button.-close{
    position: relative;
}

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

.amsearch-form-block {
    position: relative !important;
    align: center !important;
}

.amsearch-input{
    background: white !important;
    border-radius: 7px !important; 
}

.header-wrapper-content.sticky-menu.active .amsearch-button{
display: none;
}

/* Second round of search-bar width overrides (later addition — supersedes the fixed
   584px width above for these specific elements) */
.amsearch-wrapper-block.search-wrapper,
.amsearch-form-block.block-search,
.amsearch-input-wrapper.actions{
width: unset !important;
min-width: unset !important;
max-width: unset !important;
}

.amsearch-input{
width: 450px !important;
}

.amsearch-button.-close.-clear.-icon.action{
left: 0px;
}

.amsearch-button.-loupe.-clear.-icon.action.search{
left: -50px;
}


/* ==============================================================
   SECTION 11: CART / INQUIRY BUTTON VISIBILITY IN CATEGORY GRID
   ============================================================== */

.products.wrapper.grid.products-grid 
.cdz-product-bottom.hover-effect{
    margin-top: 350px;
}

.action.tocart.primary.show-tooltip{
        border-color: white;
        color: #000000 !important;
        background-color: white;
}

form[data-role="tocart-form"] {
    background-color: white !important;
}

#product-sendinquiry-button{
    font-size: 18px;
    font-weight: 500;
}

.cdz-product-bottom,
.cdz-product-bottom .cdz-buttons-container,
.cdz-product-bottom .cdz-buttons-inner {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}


/* ==============================================================
   SECTION 12: CDZ MEGA-MENU BEHAVIOR + "NOVO"/glow badges
   Styling paired with the hold-open/no-slide script in bts-custom.js
   ============================================================== */

/* Desktop only */
@media (min-width: 992px) {

  /* 0) Kill the sliding: keep theme's transitions but make them effectively instant */
  .cdz-main-menu.left-navigation .groupmenu-drop,
  .cdz-main-menu.left-navigation #lefmenu-mobile,
  .cdz-main-menu.left-navigation .navigation,
  .cdz-main-menu.left-navigation .cdz-menu-content,
  .cdz-main-menu.left-navigation .cdz-menu-wrap,
  .cdz-main-menu.left-navigation .cdz-menu,
  .cdz-main-menu.left-navigation .cdz-vertical-menu {
    transition: opacity 999999s ease, transform 999999s ease, visibility 999999s linear 0s !important;
  }

  /* 1) When force-hover is active, ensure dropdown is visible */
  .cdz-main-menu.left-navigation.force-hover .cdz-vertical-menu,
  .cdz-main-menu.left-navigation.force-hover .cdz-menu,
  .cdz-main-menu.left-navigation.force-hover .cdz-menu-wrap,
  .cdz-main-menu.left-navigation.force-hover .cdz-menu-content,
  .cdz-main-menu.left-navigation.force-hover .cdz-menu-dropdown,
  .cdz-main-menu.left-navigation.force-hover .cdz-menu-popup,
  .cdz-main-menu.left-navigation.force-hover .leftmenu,
  .cdz-main-menu.left-navigation.force-hover .leftmenu-mobile,
  .cdz-main-menu.left-navigation.force-hover #lefmenu-mobile,
  .cdz-main-menu.left-navigation.force-hover .navigation {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    max-height: none !important;
  }

  /* 2) If a submenu LI is marked "hold open", keep its direct dropdown visible */
  .cdz-main-menu .left-navigation li.cdz-hold-open > ul.groupmenu-drop,
  .cdz-main-menu .left-navigation li.cdz-hold-open > ul.cat-tree.groupmenu-drop,
  .cdz-main-menu .left-navigation li.cdz-hold-open > ul.level2.groupmenu-drop,
  .cdz-main-menu .left-navigation li.cdz-hold-open > ul.level3.groupmenu-drop,
  .cdz-main-menu .left-navigation li.cdz-hold-open > ul.level4.groupmenu-drop,
  .cdz-main-menu .left-navigation li.cdz-hold-open > ul.level5.groupmenu-drop {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* 3) Menu aim (2026-10-01): once bts-custom.js runs (it sets .bts-menu-aim), a flyout opens only
     through cdz-hold-open, not through the theme's li:hover - otherwise every sibling crossed on the
     diagonal way to an open flyout would replace it at once */
  .cdz-main-menu.left-navigation.bts-menu-aim li.item:not(.cdz-hold-open):hover > .groupmenu-drop,
  .cdz-main-menu.bts-menu-aim .left-navigation li.item:not(.cdz-hold-open):hover > .groupmenu-drop {
    display: none !important;
  }

  /* 4) The invisible box under an open flyout (2026-10-01, the user's idea): from the flyout's bottom
     down to the bottom of the list its item sits in, as wide as the flyout. It belongs to the flyout,
     so hovering it keeps the flyout open - the pointer can go right first and then up. The height
     (--bts-aim-h) is measured by bts-custom.js when the flyout opens. */
  .cdz-main-menu.left-navigation.bts-menu-aim li.cdz-hold-open > .groupmenu-drop::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: var(--bts-aim-h, 0px);
    background: transparent;
  }
}

/* Minor companion tweak to the menu positioning above */
.level1, .level2, .level3, .level4, .groupmenu-drop{
top: -1px !important;
}

.groupmenu .novo-znacka{
    top: -10px !important;
    right: -16px !important;
    z-index: 1 !important;
    font-size: 15px;
}

@keyframes blink-glow {
    0%, 100% {
        text-shadow: 0 0px 6px #efcf38, 0 0px 10px #efcf38, 0 0px 20px #efcf38;
    }
    50% {
        text-shadow: none;
    }
}

.blink-glow {
    animation: blink-glow 2.2s infinite;
}

.minicart-wrapper .product .actions{
margin: -27px 35px 0px;
}


/* ==============================================================
   SECTION 14: KATALOG / NOVOSTI CARD GRID + STICKY CATEGORY NAV
   ============================================================== */

html {
  scroll-behavior: smooth;
}

.cms-novosti .katalog_grid ,
.cms-katalogi .katalog_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px 140px;
    padding-bottom: 50px;
}

.cms-novosti .card,
.cms-katalogi .card {
    border: 2px solid #ddd;
    padding: 10px;
    background: #fff;
    flex: 0 0 220px;
}

.cms-novosti .card img,
.cms-katalogi .card img {
  width: 100%;
  height: auto;
  display: block;
}

.cms-novosti .card p ,
.cms-katalogi .card p {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 600;
    font-family: sans-serif;
}

.cms-katalogi .groupmenu-drop.slidedown {
  margin-top: 60px;
}

.cms-katalogi .category-nav-wrapper {
  position: sticky;
  top: 52px;
  background: #fff;
}

.cms-katalogi .category-nav {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    background: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    scroll-behavior: smooth;
}

.cms-katalogi .cat-btn {
display: inline-block;
    display: inline-block;
    padding: 12px 8px;
    background: #f1f1f1;
    border-radius: 15px;
    border: 2px solid #00000052;
    font-weight: 500;
    font-size: 21px;
}

.cms-katalogi .cat-btn:visited {
  color: inherit;
  text-decoration: none;
}

.cms-katalogi .cat-btn:hover {
  text-decoration: none;
  background: #4444449c;
  color: #efcf38;
  transition: 0.4s;
}

.cms-katalogi .category-section {
  margin-bottom: 60px;
  scroll-margin-top: 220px;
}

.cms-katalogi .category-title {
  margin: 0 0 20px 0;
  font-size: 28px;
  font-weight: 700;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .cms-katalogi .katalog_grid {
    gap: 50px 25px;
  }

.cms-katalogi .card {
        flex: 0 0 150px;
        min-width: 150px;
        max-width: 150px;
}

  .cms-katalogi .cat-toggle {
    display: block;
    width: 100%;
    padding: 12px;
    font-size: 18px;
    font-weight: 700;
    background: #dbdbdb;
    border: 2px solid #00000052;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 10px;
  }

  .cms-katalogi .category-nav-wrapper {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 10px;
    border: 1px solid #ddd;
  }

  .cms-katalogi .category-nav {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-right: 5px;
    margin-bottom: 0;
  }

  .cms-katalogi .category-nav.open {
    display: flex;
  }

  .cms-katalogi .cat-btn {
    width: 100%;
    font-size: 18px;
    box-sizing: border-box;
  }

  .cms-katalogi .category-section {
    scroll-margin-top: 120px;
  }
}

/* "NOVO" ribbon badge for promo cards (separate feature from the mega-menu's own NOVO badge) */
.cms-promotions .promo-card,
.cms-promocije .promo-card,
.cms-akcijska-ponudba .promo-card,
.cms-aktualna_ponudba .promo-card {
  position: relative;
}

.novo-znacka {
position: absolute;
    top: 22px;
    right: 4px;
    background-color: #efcf38;
    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
    width: auto;
    height: auto;
    padding: 4px 10px;
    border-radius: 3px;
    transform: rotate(25deg);
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
    animation: utripanje 2.2s step-start infinite;
    z-index: 1;
}

@keyframes utripanje {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}


/* ==============================================================
   SECTION 15: PROMOTIONS / AKCIJSKA PONUDBA PAGE GRID
   ============================================================== */

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

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

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

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

.cms-promotions .promo-card,
.cms-promocije .promo-card,
.cms-akcijska-ponudba .promo-card,
.cms-aktualna_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-promocije .promo-card p,
.cms-akcijska-ponudba .promo-card p,
.cms-aktualna_ponudba .promo-card p {
  margin: 0;
}

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

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

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

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

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

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

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


/* ==============================================================
   SECTION 16: PRODUCT PAGE MISC (label position, amlabel wrapper offset)
   ============================================================== */

.product-main-content .amlabel-position-wrapper{
right: 70px !important;
}

.product-info-main .product.attibute.overview .title .type{
    display: none;
}


/* ==============================================================
   SECTION 18: CATEGORY-SPECIFIC PRODUCT NAME/NUMBER SPLIT
   Styling paired with the script in bts-custom.js (Section 18)
   ============================================================== */

.cat-reversed .product-item-name-text {
    display: block !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #black !important;
}

.cat-reversed .product-item-no {
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #555 !important;
}

.cat-reversed .ploscica-sumitomo {
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #555 !important;
}

.category-default-category #ui-id-5{
display: none;
}


/* ==============================================================
   SECTION 19: CATEGORY PAGE MISC (brand icon position, category
   image hide, tolerance icon, product page card/tab styling)
   ============================================================== */

.page-products .icon.icon_brands {
    position: absolute;
    top: -240px;
    height: auto;
    max-width: 180px;
    max-height: 60px;
    width: auto;
    z-index: 1;
}

.page-products .category-image{
display: none !important;
}

.products.wrapper.grid.products-grid .icon.icon_tolerance{
    max-height: 100px;
    width: auto;
    display: block;
    margin: auto;
    height: auto;
}

.icons .icon-tolerance {
    height: auto;
    margin: auto;
    position: relative;
    /*bottom: 18px;*/
    max-height: 300%;
}

/* Product page card/tab styling (rounded corners, shadows, tab heights) */
.catalog-product-view .related-upsell-crossell{
border-radius: 0px 0px 20px 20px;
    box-shadow: 2px 3px #dbdbdb !important;
}

.catalog-product-view .block-title{
    border-radius: 20px 20px 0 0 !important;
    border: solid #efcf38 1px !important;
    background-color: #efd111 !important;
}

#product-addtocart-button, #product-sendinquiry-button{
    border-radius: 20px;
}

.btn-qty.plus{
    border-radius: 0px 15px 15px 0px !important;
    border: solid #dbdbdb 1px !important;
}

.btn-qty.minus{
    border-radius: 15px 0px 0px 15px  !important;
    border: solid #dbdbdb 1px !important;
}

.product-addto-links a.action.tocompare > span {
    border-radius: 15px 15px 15px 15px;
    border: 1px solid #dbdbdb;
}

.super-attribute-dropdown-options {
    border-radius: 13px;
    margin-top: 1px;
}

.super-attribute-select {
    border-radius: 15px;
}

.sliderBox .item {
    border-radius: 20px;
}

.product-main-content {
border-radius: 20px;
/*    box-shadow: 2px 3px #dbdbdb !important;*/
    box-shadow: 6px 6px 12px 3px #dbdbdb !important;
}

#tab-label-applicationtab, #tab-label-additional, #tab-label-description, #tab-label-modelviewer {
    border-radius: 20px 20px 0 0 !important;
    border: solid #efcf38 1px !important;
    background-color: #efd111 !important;
    box-shadow: 2px 3px #dbdbdb !important;
}

#tab-label-additional-title, #tab-label-description-title ,#tab-label-modelviewer-title, #tab-label-applicationtab-title{
        background-color: transparent !important;
}

#tab-label-applicationtab, #tab-label-additional, #tab-label-description, .block-title.title{
height: 52px !important;
}
.block-title.title {
    display: flex;
    align-items: center;   /* vertical center */
    box-shadow: 2px 3px #dbdbdb !important;
}

.content[data-role="content"] {
        border-radius: 0px 0px 20px 20px !important;
        border: solid #dbdbdb 1px !important;
        box-shadow: 2px 3px #dbdbdb !important;
}

/* Small icon sizing for specific supplier logo filenames */
img[src$="CN.png"],
img[src$="DN.png"],
img[src$="SN.png"],
img[src$="TN.png"],
img[src$="VN.png"],
img[src$="WN.png"],
img[src$="RN.png"],
img[src$="TRM.png"],
img[src$="KN.png"] {
    width: auto;
    height: 30px;
    position: relative;
    top: 10px;
}


/* ==============================================================
   SECTION 20: RELATED PRODUCTS CAROUSEL — nav arrow position
   ============================================================== */

.block.related .owl-nav{
      right: 10px !important;
      top: -68px  !important;
}


/* ==============================================================
   SECTION 21: DROPDOWN-TO-BUTTON SWATCH CONVERSION
   Styling paired with the script in bts-custom.js (Section 21)
   ============================================================== */

.swatch-buttons-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.swatch-btn {
    width: 70px;
    height: 70px;
    padding: 0;
    border: 2px solid #dbdbdb;
    border-radius: 6px;
    background: #fff;
    color: #000;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    line-height: 1.2;
    text-align: center;
    position: relative;
}

.swatch-btn:hover {
    border-color: #efcf38;
}

.swatch-btn.active {
    border-color: #efcf38;
    background: #efcf38;
    color: #000;
}

.swatch-stock-dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
    border: white solid 2px;
}

/* Remove Codazon dropdown border when swatch buttons present */
.super-attribute-select:has(.swatch-buttons-wrapper) {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.super-attribute-select:has(.swatch-buttons-wrapper) .super-attribute-selected {
    display: none !important;
}

.super-attribute-select:has(.swatch-buttons-wrapper) {
    border: none !important;
}



/* ==============================================================
   SECTION 23: SEARCHABLE COMBOBOX FOR CONFIGURABLE ATTRIBUTE DROPDOWN
   Converts the .super-attribute-select dropdown into a text input
   with type-ahead filtering, arrow-key navigation, and enter-to-select.
   ============================================================== */
.swatch-combobox-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    box-sizing: border-box;
    outline: none;
    border: 1px solid #ccc !important;
    border-radius: 15px  !important;
    cursor: pointer;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;
}

.swatch-combobox-input:focus {
    border-color: #efcf38;


}

.super-attribute-dropdown-options div.swatch-highlight,
.super-attribute-dropdown-options div.swatch-highlight p {
    background-color: #f1f1f1!important;
    color: #000 !important;
}

.super-attribute-select{
border: none;
}