/* ============================================
   HLADILNIK.COM - CLEAN CUSTOM CSS
   Created: Apr 3, 2026
   ============================================ */

/* === MATERIAL ICONS FONT === */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* === ROOT VARIABLES === */
:root {
    --lux-bg: #0b0b0f;
    --lux-card: #111218;
    --lux-text: #f5f6fb;
    --lux-muted: #b7bac7;
    --lux-border: rgba(255,255,255,.08);
    --lux-accent: #e83e8c;
    --lux-accent-2: #d63384;
    --lux-grad: linear-gradient(135deg, #e83e8c, #d63384);
}

/* === BUTTONS === */
.btn, .btn-primary {
    background: var(--lux-grad) !important;
    border: none !important;
    border-radius: 25px !important;
    color: #fff !important;
    padding: 10px 20px !important;
    box-shadow: 0 8px 20px rgba(232, 62, 140, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn:hover, .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(232, 62, 140, 0.4);
}

/* === HEADER - 3 TIER LAYOUT === */

/* Tier 1 - Hidden (content moved to tier 2) */
.header-tier-1 {
    display: none !important;
}

/* Tier 2 - Main header with logo, search, contact */
.header-tier-2 {
    background: #1a1a2e !important;
    padding: 15px 0 !important;
}

.tier-2-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

.tier-2-logo img {
    max-height: 50px !important;
    width: auto !important;
}

.tier-2-search {
    flex: 1 !important;
    max-width: 500px !important;
}

.tier-2-search input,
#search_widget input {
    background: #fff !important;
    border: 2px solid #e83e8c !important;
    border-radius: 25px !important;
    padding: 12px 20px !important;
    width: 100% !important;
}

.tier-2-language {
    display: flex !important;
    gap: 8px !important;
}

.tier-2-language img {
    width: 28px !important;
    border-radius: 3px !important;
}

.tier-2-contact {
    color: #fff !important;
}

.tier-2-contact a {
    color: #fff !important;
    font-weight: 600 !important;
}

/* Tier 3 - Navigation */
.header-tier-3 {
    background: var(--lux-grad) !important;
    padding: 0 !important;
}

.tier-3-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.tier-3-menu a,
.header-tier-3 .top-menu a {
    color: #fff !important;
    padding: 15px 20px !important;
    display: inline-block !important;
}

.tier-3-right {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.tier-3-right a {
    color: #fff !important;
}

/* Mobile header - breakpoint updated to 767px for mobile-first */
@media (max-width: 767px) {
    .header-tier-1, .header-tier-2, .header-tier-3 {
        display: none !important;
    }
    .header-mobile {
        display: block !important;
        background: #1a1a2e !important;
    }
}

@media (min-width: 768px) {
    .header-mobile {
        display: none !important;
    }
}

/* === CATEGORY PAGE LAYOUT === */

/* Left sidebar */
#left-column {
    flex: 0 0 260px !important;
    max-width: 260px !important;
}

#content-wrapper {
    flex: 1 !important;
}

/* Reset Bootstrap columns */
.products .js-product,
.products .product {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* === PRODUCT CARDS === */
.product-miniature {
    background: #fff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.product-miniature:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12), 0 0 0 1.5px #e83e8c !important;
}

/* Card container */
.product-miniature .thumbnail-container {
    height: auto !important;
    margin-bottom: 0 !important;
}

/* Image area */
.product-miniature .thumbnail-top {
    background: #f8f9fa !important;
    padding: 20px !important;
    position: relative !important;
    text-align: center !important;
}

/* Product thumbnail - CRITICAL: override theme calc() */
.product-miniature .product-thumbnail {
    display: block !important;
    height: auto !important;
    position: static !important;
}

.product-miniature .product-thumbnail picture {
    display: block !important;
}

/* Product images - MUST BE VISIBLE */
.product-miniature .product-thumbnail img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: 100% !important;
    height: 180px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

/* Wishlist button */
.product-miniature .wishlist-button-add {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 10 !important;
    background: #fff !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* Quick view */
.product-miniature .highlighted-informations {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--lux-grad) !important;
    padding: 10px !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
}

.product-miniature:hover .highlighted-informations {
    opacity: 1 !important;
}

.product-miniature .quick-view {
    color: #fff !important;
}

/* Product description */
.product-miniature .product-description {
    padding: 15px !important;
    background: #fff !important;
}

.product-miniature .product-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 0 8px 0 !important;
    color: #1a1a2e !important;
}

.product-miniature .product-title a {
    color: inherit !important;
    text-decoration: none !important;
}

.product-miniature .product-title a:hover {
    color: #e83e8c !important;
}

/* Price */
.product-miniature .price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #e83e8c !important;
}

/* Out of stock */
.product-miniature .no-stock-label {
    color: #dc3545 !important;
    font-size: 13px !important;
}

/* Watermark overlay */
.product-miniature .thumbnail-container::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: url("https://firebasestorage.googleapis.com/v0/b/foodchainapp-1531482755524.appspot.com/o/hladilnik.com%2Fhladilnik-watermark.png?alt=media&token=17de2b97-fc2a-4160-b129-0b641d0e0937") center / 50% no-repeat !important;
    opacity: 0.15 !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

/* === FILTER SIDEBAR === */

/* Hide duplicate brand list */
#left-column .block-categories {
    display: none !important;
}

/* Filter section title */
#search_filters_wrapper h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #1a1a2e !important;
    margin: 0 0 15px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #e83e8c !important;
}

/* Facet sections */
.facet {
    margin-bottom: 15px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid #eee !important;
}

.facet:last-child {
    border-bottom: none !important;
}

/* Facet title */
.facet .facet-title,
.facet > .title {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: #333 !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

/* Filter list */
.facet ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Filter items - COMPACT */
.facet ul li {
    padding: 6px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

.facet ul li:last-child {
    border-bottom: none !important;
}

.facet ul li label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #444 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

/* Checkbox — pink-fill on checked, same as mobile */
.facet .custom-checkbox input[type="checkbox"] + span {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #d0d3db !important;
    border-radius: 5px !important;
    flex-shrink: 0 !important;
    background: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}

.facet .custom-checkbox input[type="checkbox"]:hover + span {
    border-color: #e83e8c !important;
}

.facet .custom-checkbox input[type="checkbox"]:checked + span {
    background: #e83e8c !important;
    border-color: #e83e8c !important;
}

.facet .custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked,
.facet .custom-checkbox input[type="checkbox"]:checked + span i {
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

/* Count badge */
.facet .magnitude {
    font-size: 11px !important;
    color: #888 !important;
    margin-left: auto !important;
}

/* === RESPONSIVE SIDEBAR === */
@media (max-width: 1199px) {
    #left-column {
        flex: 0 0 220px !important;
        max-width: 220px !important;
    }
}

@media (max-width: 991px) {
    #left-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }
}

/* === RESPONSIVE PRODUCT GRID === */

/* Prevent horizontal overflow on all screens */
body, #wrapper {
    overflow-x: hidden !important;
}

/* Base product grid selectors (all screen sizes) - mobile-first: 1 column */
#js-product-list .products,
.products.row,
.featured-products .products,
.product-accessories .products,
.crossselling-products .products,
section.products .products {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure product cards don't overflow */
.product-miniature {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Portrait phones (< 480px): 1 column */
@media (max-width: 479px) {
    #wrapper .container,
    #content-wrapper .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Add horizontal margin to product grid for mobile */
    #js-product-list,
    .featured-products,
    section.products {
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    #js-product-list .products,
    .products.row,
    .featured-products .products,
    .product-accessories .products,
    .crossselling-products .products,
    section.products .products {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 0 !important;
        margin: 0 auto !important;
        max-width: 400px !important;
    }

    .product-miniature .product-thumbnail img {
        height: 180px !important;
    }
}

/* Landscape phones (480px - 767px): 2 columns */
@media (min-width: 480px) and (max-width: 767px) {
    #wrapper .container,
    #content-wrapper .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #js-product-list .products,
    .products.row,
    .featured-products .products,
    .product-accessories .products,
    .crossselling-products .products,
    section.products .products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .product-miniature .product-thumbnail img {
        height: 150px !important;
    }
}

/* Tablets (768px - 991px): 3 columns */
@media (min-width: 768px) and (max-width: 991px) {
    #js-product-list .products,
    .products.row,
    .featured-products .products,
    .product-accessories .products,
    .crossselling-products .products,
    section.products .products {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
    }

    .product-miniature .product-thumbnail img {
        height: 160px !important;
    }
}

/* Desktop (992px+): 3 columns default, 4 for homepage */
@media (min-width: 992px) {
    #js-product-list .products,
    .products.row,
    .featured-products .products,
    .product-accessories .products,
    .crossselling-products .products,
    section.products .products {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }

    /* Homepage gets 4 columns */
    .page-index .products,
    .page-index .featured-products .products {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .product-miniature .product-thumbnail img {
        height: 180px !important;
    }
}

/* === FOOTER - Minimal Modern === */
#footer {
    background: #1a1a2e !important;
    color: #fff !important;
    padding: 0 !important;
}

/* Newsletter Section */
#footer .block_newsletter {
    background: #f8f9fa !important;
    padding: 40px 20px !important;
}

#footer .block_newsletter > .row {
    max-width: 700px !important;
    margin: 0 auto !important;
    align-items: center !important;
}

#footer .block_newsletter #block-newsletter-label {
    color: #333 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

#footer .block_newsletter .input-wrapper {
    display: flex !important;
    flex: 1 !important;
}

#footer .block_newsletter input[type="email"] {
    flex: 1 !important;
    padding: 12px 18px !important;
    border: 2px solid #e83e8c !important;
    border-radius: 25px 0 0 25px !important;
    font-size: 15px !important;
    outline: none !important;
    background: #fff !important;
}

#footer .block_newsletter input[type="submit"] {
    padding: 12px 24px !important;
    background: linear-gradient(135deg, #e83e8c 0%, #d63384 100%) !important;
    border: none !important;
    border-radius: 0 25px 25px 0 !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    text-transform: uppercase !important;
}

#footer .block_newsletter input[type="submit"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(232, 62, 140, 0.4) !important;
}

#footer .block_newsletter .col-xs-12 > p {
    color: #888 !important;
    font-size: 12px !important;
    margin: 10px 0 0 !important;
}

/* Footer Links Container */
.footer-container {
    background: #1a1a2e !important;
    padding: 40px 0 20px !important;
}

.footer-container > .container {
    max-width: 100% !important;
    padding: 0 40px !important;
}

.footer-container > .container > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}

.footer-container .links {
    flex: 1 !important;
    max-width: none !important;
    width: auto !important;
}

.footer-container .links > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
}

.footer-container .links .wrapper {
    flex: 1 1 180px !important;
    min-width: 150px !important;
    padding: 0 !important;
}

/* Section Headers - Desktop only */
.footer-container .links p.h3.hidden-sm-down {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 18px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #e83e8c !important;
}

@media (max-width: 767px) {
    .footer-container .links p.h3.hidden-sm-down {
        display: none !important;
    }
}

/* Section Headers - Mobile Toggle */
.footer-container .links .title.hidden-md-up {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.footer-container .links .title .h3 {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Footer Links */
.footer-container .links ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-container .links li {
    margin-bottom: 8px !important;
}

.footer-container .links a {
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    transition: color 0.2s ease !important;
}

.footer-container .links a:hover {
    color: #e83e8c !important;
}

/* Footer toggle icons */
.footer-container .collapse-icons .material-icons {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 20px !important;
}

/* Copyright */
#footer .footer-container + div,
.footer-container ~ .row {
    background: #12121f !important;
    padding: 15px 0 !important;
    text-align: center !important;
}

/* Mobile Footer */
@media (max-width: 767px) {
    #footer .block_newsletter {
        padding: 25px 15px !important;
        text-align: center !important;
    }

    #footer .block_newsletter #block-newsletter-label {
        font-size: 16px !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    #footer .block_newsletter .input-wrapper {
        margin-bottom: 10px !important;
    }

    #footer .block_newsletter input[type="email"] {
        border-radius: 25px !important;
        border: 2px solid #e83e8c !important;
        text-align: center !important;
        width: 100% !important;
    }

    #footer .block_newsletter input[type="submit"].hidden-xs-down {
        display: none !important;
    }

    #footer .block_newsletter input[type="submit"].hidden-sm-up {
        display: block !important;
        border-radius: 25px !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

    .footer-container {
        padding: 20px 0 10px !important;
    }

    /* Kill the 40px desktop column gap on mobile — accordions need to stack tight */
    .footer-container .links > .row {
        gap: 0 !important;
        display: block !important;
    }

    .footer-container .links .wrapper {
        flex: none !important;
        width: 100% !important;
        padding: 0 15px !important;
        margin: 0 !important;
    }

    /* Accordion trigger row — flex-align title + chevron */
    .footer-container .links .title.hidden-md-up {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 14px 0 !important;
        cursor: pointer !important;
        margin: 0 !important;
    }

    .footer-container .links .title .h3 {
        flex: 1 1 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        color: #fff !important;
        font-weight: 700 !important;
    }

    .footer-container .links .title .collapse-icons .material-icons {
        color: #fff !important;
    }

    .footer-container .links .title .float-xs-right {
        float: none !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
    }

    .footer-container .links .title .collapse-icons {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        height: 24px !important;
    }

    .footer-container .links ul.collapse {
        padding: 6px 0 12px 4px !important;
    }

    .footer-container .links ul.collapse li {
        margin-bottom: 6px !important;
    }

    .footer-container .links ul.collapse a {
        display: block !important;
        padding: 6px 0 !important;
        font-size: 13px !important;
    }
}

/* === MISC === */
#search_widget .material-icons {
    display: none !important;
}

#_desktop_currency_selector {
    display: none !important;
}

/* Hide Quick View on product cards */
.product-miniature .quick-view,
.product-miniature .js-quick-view {
    display: none !important;
}

/* Hide duplicate search box in tier-3 navigation */
.header-tier-3 #search_widget,
.header-tier-3 .search-widget,
.header-nav .search-widget {
    display: none !important;
}

/* Fix submenu dropdown - dark text on white background */
.header-tier-3 .menu .collapse,
.header-tier-3 .menu ul.collapse,
.header-tier-3 ul.top-menu li ul.collapse,
.top-menu .sub-menu,
.top-menu .collapse {
    background: #fff !important;
}
.header-tier-3 .menu .collapse a,
.header-tier-3 ul.top-menu li ul a,
.top-menu .sub-menu a,
.top-menu .collapse a {
    color: #333 !important;
}
.header-tier-3 .menu .collapse a:hover,
.top-menu .sub-menu a:hover,
.top-menu .collapse a:hover {
    color: #e83e8c !important;
    background: #f5f5f5 !important;
}

/* Style cart button */
.header-tier-3 .blockcart,
.header-tier-3 .cart-preview {
    background: #fff !important;
    border-radius: 20px !important;
    padding: 5px 15px !important;
}
.header-tier-3 .blockcart a,
.header-tier-3 .cart-preview a {
    color: #333 !important;
    text-decoration: none !important;
}
.header-tier-3 .blockcart .cart-products-count {
    background: #e83e8c !important;
    color: #fff !important;
}

/* Better submenu mega-menu styling */
.top-menu .sub-menu,
.top-menu .collapse,
.top-menu [data-depth="1"] {
    background: #fff !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    border-radius: 8px !important;
    padding: 20px !important;
}
.top-menu .sub-menu a,
.top-menu .collapse a,
.top-menu [data-depth="1"] a {
    color: #333 !important;
    padding: 8px 15px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    transition: all 0.2s !important;
}
.top-menu .sub-menu a:hover,
.top-menu .collapse a:hover,
.top-menu [data-depth="1"] a:hover {
    color: #e83e8c !important;
    background: #fef0f5 !important;
}

/* Clean cart button - no border, just text */
.header-tier-3 .blockcart,
.header-tier-3 .cart-preview,
#_desktop_cart .blockcart {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.header-tier-3 .blockcart a,
#_desktop_cart .blockcart a,
#_desktop_cart a.cart-preview {
    color: #fff !important;
    background: transparent !important;
    border: none !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.header-tier-3 .blockcart .material-icons,
#_desktop_cart .material-icons {
    color: #fff !important;
}
.header-tier-3 .cart-products-count,
#_desktop_cart .cart-products-count {
    background: #fff !important;
    color: #e83e8c !important;
    font-weight: bold !important;
    border-radius: 50% !important;
    min-width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* SIMPLE submenu - reset all fancy styles */
.top-menu .sub-menu,
.top-menu .collapse,
.top-menu [data-depth="1"],
.top-menu .sub-menu a,
.top-menu .collapse a,
.top-menu [data-depth="1"] a {
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.top-menu .sub-menu,
.top-menu .collapse {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    padding: 15px !important;
}
.top-menu .sub-menu a,
.top-menu .collapse a {
    color: #333 !important;
    padding: 8px 12px !important;
    display: block !important;
    font-size: 14px !important;
}
.top-menu .sub-menu a:hover,
.top-menu .collapse a:hover {
    color: #e83e8c !important;
    background: #f8f8f8 !important;
}

/* Simple cart - white text only */
#_desktop_cart,
#_desktop_cart .blockcart,
#_desktop_cart a {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#_desktop_cart a {
    color: #fff !important;
}
#_desktop_cart .cart-products-count {
    background: #fff !important;
    color: #e83e8c !important;
    border-radius: 50% !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
    margin-left: 3px !important;
}

/* Stylish mega menu */
.top-menu .sub-menu,
.top-menu .collapse,
.top-menu .popover {
    background: #fafafa !important;
    border-top: 3px solid #e83e8c !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important;
    padding: 20px 25px !important;
}
.top-menu .sub-menu a,
.top-menu .collapse a {
    color: #444 !important;
    padding: 10px 15px !important;
    border-left: 3px solid transparent !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
}
.top-menu .sub-menu a:hover,
.top-menu .collapse a:hover {
    color: #e83e8c !important;
    background: #fff !important;
    border-left-color: #e83e8c !important;
}

/* Cart button - visible white text */
#_desktop_cart .blockcart a,
.header-tier-3 .blockcart a {
    color: #fff !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}
#_desktop_cart .blockcart a span,
.header-tier-3 .blockcart span {
    color: #fff !important;
}

/* Fix cart clickable */
#_desktop_cart,
#_desktop_cart .blockcart,
#_desktop_cart .blockcart a {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1000 !important;
    cursor: pointer !important;
}

/* Product image white background */
.product-miniature .thumbnail-container,
.product-miniature .product-thumbnail,
.product-miniature .thumbnail-top {
    background: #fff !important;
}
.product-miniature .product-thumbnail img {
    background: #fff !important;
    mix-blend-mode: multiply;
}

/* Fix add to cart button clickable */
.add-to-cart,
button.add-to-cart,
.btn.add-to-cart,
.product-add-to-cart button,
.product-add-to-cart .add-to-cart {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 100 !important;
    cursor: pointer !important;
}

/* Style phone/service in header */
.header-tier-2 .contact-link,
.header-tier-2 [class*="contact"],
.header-tier-2 a[href*="tel:"] {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #fff !important;
    text-decoration: none !important;
}
.header-tier-2 .contact-link i,
.header-tier-2 .material-icons.phone {
    background: #e83e8c !important;
    color: #fff !important;
    padding: 8px !important;
    border-radius: 50% !important;
    font-size: 18px !important;
}
.header-tier-2 .contact-info {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.3 !important;
}
.header-tier-2 .contact-label {
    font-size: 11px !important;
    opacity: 0.7 !important;
    text-transform: uppercase !important;
}
.header-tier-2 .contact-number {
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

/* Phone number styling in header */
.phone-number {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.phone-number > i.material-icons {
    background: linear-gradient(135deg, #e83e8c 0%, #d63384 100%) !important;
    color: #fff !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
}
.phone-text {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.2 !important;
}
.phone-label {
    font-size: 11px !important;
    color: rgba(255,255,255,0.6) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
.phone-text a {
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    letter-spacing: 0.5px !important;
}
.phone-text a:hover {
    color: #e83e8c !important;
}

/* Cart with products - make it stand out */
.blockcart.cart-preview {
    transition: all 0.3s ease !important;
}
.blockcart .cart-products-count {
    background: #fff !important;
    color: #e83e8c !important;
    font-weight: 700 !important;
    min-width: 22px !important;
    height: 22px !important;
    border-radius: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    margin-left: 5px !important;
}
/* When cart has items - highlight it (use ID selector to beat #_desktop_cart specificity) */
#_desktop_cart .blockcart.cart-preview.active,
#_desktop_cart .blockcart.cart-preview:not([data-cart-products-count="0"]) {
    background: #fff !important;
    padding: 8px 15px !important;
    border-radius: 25px !important;
}
#_desktop_cart .blockcart.cart-preview.active a,
#_desktop_cart .blockcart.cart-preview:not([data-cart-products-count="0"]) a {
    color: #e83e8c !important;
}
#_desktop_cart .blockcart.cart-preview.active a i,
#_desktop_cart .blockcart.cart-preview.active a span,
#_desktop_cart .blockcart.cart-preview:not([data-cart-products-count="0"]) a i,
#_desktop_cart .blockcart.cart-preview:not([data-cart-products-count="0"]) a span {
    color: #e83e8c !important;
}
#_desktop_cart .blockcart.cart-preview.active .cart-products-count,
#_desktop_cart .blockcart.cart-preview:not([data-cart-products-count="0"]) .cart-products-count {
    background: #e83e8c !important;
    color: #fff !important;
    animation: pulse 2s infinite !important;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Hide duplicate no quantity text - OUT-OF-STOCK badge is enough */
.no-stock-label,
.product-miniature .no-stock-label {
    display: none !important;
}

/* ================================================================
   Product flags — subtle corner badges (desktop + mobile)
   Replaces PS Classic's aggressive full-width banner with a
   compact chip positioned in the top-left of the card.
   ================================================================ */

.product-miniature .product-flags {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 3 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    pointer-events: none !important;
    max-width: calc(100% - 20px) !important;
}

.product-miniature .product-flag,
.product-flag {
    position: static !important;
    display: inline-block !important;
    background: #fff !important;
    color: #1a1a2e !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    padding: 4px 9px !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
    margin: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: auto !important;
}

/* Out of stock — muted charcoal */
.product-miniature .product-flag.out_of_stock,
.product-flag.out_of_stock {
    background: #3a3d45 !important;
    color: #fff !important;
}

/* Discount — pink */
.product-miniature .product-flag.discount,
.product-miniature .product-flag.on-sale,
.product-flag.discount,
.product-flag.on-sale {
    background: linear-gradient(135deg, #e83e8c 0%, #d63384 100%) !important;
    color: #fff !important;
}

/* New — fresh green */
.product-miniature .product-flag.new,
.product-flag.new {
    background: #2ea46b !important;
    color: #fff !important;
}

/* Mobile: a touch smaller */
@media (max-width: 767px) {
    .product-miniature .product-flags {
        top: 8px !important;
        left: 8px !important;
        max-width: calc(100% - 16px) !important;
    }
    .product-miniature .product-flag,
    .product-flag {
        font-size: 9px !important;
        padding: 3px 7px !important;
        letter-spacing: 0.3px !important;
    }
}

/* Also hide the "Изчерпано" duplicate text under the price — the badge says it */
.product-miniature .product-availability,
.product-miniature .comments_note,
.product-miniature .product-quantity-info.out-of-stock {
    /* keep visible but subtle — don't hide outright, just mute */
}

/* ============================================
   MOBILE HEADER - Phase 1
   ============================================ */

@media (max-width: 767px) {
    /* Mobile header container - D-05, D-06 */
    .header-mobile {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 60px !important;
        background: #1a1a2e !important;
        z-index: 1050 !important;
        padding: 0 15px !important;
    }

    /* Flex layout for header content - D-04 */
    .header-mobile .container {
        height: 100% !important;
        padding: 0 !important;
        max-width: none !important;
    }

    .mobile-header-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        gap: 8px !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    /* Ensure all mobile header elements are clickable */
    .mobile-header-content > * {
        pointer-events: auto !important;
    }

    /* Remove any blocking pseudo-elements */
    .header-mobile::before,
    .header-mobile::after,
    .mobile-header-content::before,
    .mobile-header-content::after {
        pointer-events: none !important;
    }

    /* Hamburger icon touch target - 44x44px minimum */
    #menu-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        color: #fff !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        order: 0 !important; /* First in flexbox */
    }

    #menu-icon .material-icons {
        font-size: 28px !important;
        color: #fff !important;
        transition: transform 0.3s ease-out !important;
        transform: rotate(0deg) !important;
    }

    /* Logo centered - flex: 1 */
    .mobile-logo,
    #_mobile_logo {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 10px !important;
        min-width: 0 !important; /* Prevent flex item from overflowing */
        overflow: hidden !important;
        order: 1 !important; /* Second in flexbox, between hamburger and icons */
    }

    /* Fallback text logo when image not loaded */
    #_mobile_logo:empty::before {
        content: "hladilnik.com" !important;
        color: #e83e8c !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .mobile-logo img,
    #_mobile_logo img {
        max-height: 40px !important;
        width: auto !important;
    }

    /* Hide fallback when logo image is present */
    #_mobile_logo:not(:empty)::before {
        display: none !important;
    }

    /* Search icon touch target */
    .mobile-search-icon,
    #_mobile_search_icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        color: #fff !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: 2 !important; /* Ensure order in flexbox */
    }

    .mobile-search-icon .material-icons,
    #_mobile_search_icon .material-icons {
        font-size: 24px !important;
        color: #fff !important;
        display: inline-block !important;
        visibility: visible !important;
    }

    /* Cart icon touch target */
    .mobile-cart,
    #_mobile_cart {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        position: relative !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: 3 !important;
        z-index: 9999 !important;
        pointer-events: all !important;
        cursor: pointer !important;
    }

    /* Mobile cart link - MUST be clickable */
    .mobile-cart > a,
    #_mobile_cart > a,
    .mobile-cart a,
    #_mobile_cart a {
        background: transparent !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        visibility: visible !important;
        pointer-events: all !important;
        cursor: pointer !important;
        z-index: 10000 !important;
        position: relative !important;
    }

    .mobile-cart .blockcart,
    #_mobile_cart .blockcart {
        background: transparent !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        visibility: visible !important;
        pointer-events: all !important;
        cursor: pointer !important;
        z-index: 10000 !important;
    }

    .mobile-cart .material-icons,
    #_mobile_cart .material-icons,
    .mobile-cart .blockcart .material-icons,
    #_mobile_cart .blockcart .material-icons,
    .mobile-cart > a .material-icons,
    #_mobile_cart > a .material-icons,
    .mobile-cart a i,
    #_mobile_cart a i {
        font-size: 24px !important;
        color: #fff !important;
        pointer-events: none !important;
    }

    /* Cart product count should not block clicks */
    .mobile-cart .cart-products-count,
    #_mobile_cart .cart-products-count {
        pointer-events: none !important;
    }

    /* Hide default search bar - will show on expand */
    .mobile-search,
    #_mobile_search {
        display: none !important;
    }

    /* Body offset for fixed header */
    body {
        padding-top: 60px !important;
    }

    /* Also offset wrapper if body doesn't work */
    #wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

@media (min-width: 768px) {
    .header-mobile {
        display: none !important;
    }

    body {
        padding-top: 0 !important;
    }
}

/* ============================================
   MOBILE NAVIGATION DRAWER - Phase 1
   ============================================ */

@media (max-width: 767px) {
    /* Drawer container positioning - D-01 */
    #mobile_top_menu_wrapper {
        display: block !important;
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        width: 80% !important;
        max-width: 320px !important;
        height: calc(100vh - 60px) !important;
        height: calc(100dvh - 60px) !important;
        background: #fff !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-out !important;
        will-change: transform !important;
        z-index: 1200 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 !important;
        box-shadow: 2px 0 15px rgba(0,0,0,0.1) !important;
    }

    /* Drawer open state - triggered by existing toggleMobileMenu() */
    #header.is-open #mobile_top_menu_wrapper,
    #mobile_top_menu_wrapper.is-open {
        transform: translateX(0) !important;
    }

    /* FORCE content visibility - PrestaShop JS hides these but doesn't restore */
    #notifications,
    #wrapper,
    #footer,
    #content-wrapper,
    #js-product-list,
    .products {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Restore grid display for products specifically */
    #js-product-list .products,
    .products.row,
    .featured-products .products {
        display: grid !important;
    }

    /* Hamburger icon rotation when drawer open */
    #header.is-open #menu-icon .material-icons,
    #menu-icon.is-open .material-icons {
        transform: rotate(90deg) !important;
        transition: transform 0.3s ease-out !important;
    }

    /* Overlay backdrop — real element (click-to-close).
       Previously used #header.is-open::after but pseudo-elements are
       unreliable for event dispatch; moved to a real <div>. */
    .mobile-drawer-overlay {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 1100 !important;
        display: none !important;
        cursor: pointer !important;
        opacity: 0 !important;
        transition: opacity 0.25s ease-out !important;
    }

    #header.is-open .mobile-drawer-overlay,
    .mobile-drawer-overlay.is-visible {
        display: block !important;
        opacity: 1 !important;
    }

    /* ============================================
       MOBILE MENU CONTENT STYLING - Phase 1
       ============================================ */

    /* Menu wrapper inner content */
    #mobile_top_menu_wrapper .js-top-menu,
    #mobile_top_menu_wrapper #_mobile_top_menu {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Top level menu items - D-12 categories */
    #mobile_top_menu_wrapper .top-menu,
    #mobile_top_menu_wrapper ul[data-depth="0"] {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #mobile_top_menu_wrapper .top-menu > li,
    #mobile_top_menu_wrapper ul[data-depth="0"] > li {
        border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    }

    /* Menu item links - 44px touch target */
    #mobile_top_menu_wrapper .top-menu a,
    #mobile_top_menu_wrapper [data-depth="0"] > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
        padding: 12px 15px !important;
        color: #333 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        background: #fff !important;
        transition: background 0.2s ease !important;
    }

    #mobile_top_menu_wrapper .top-menu a:hover,
    #mobile_top_menu_wrapper .top-menu a:active {
        background: #f8f8f8 !important;
        color: #e83e8c !important;
    }

    /* Home menu item — prepend a house icon (Material Icons "home") */
    #mobile_top_menu_wrapper #lnk-nacalo > a::before,
    #mobile_top_menu_wrapper .top-menu > li.link:first-child > a::before {
        content: '\e88a' !important;
        font-family: 'Material Icons' !important;
        font-weight: normal !important;
        font-style: normal !important;
        font-size: 20px !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: 10px !important;
        color: #e83e8c !important;
        -webkit-font-feature-settings: 'liga' !important;
        -webkit-font-smoothing: antialiased !important;
        text-transform: none !important;
        vertical-align: middle !important;
    }

    /* Accordion toggle button - D-13 */
    #mobile_top_menu_wrapper .navbar-toggler,
    #mobile_top_menu_wrapper .collapse-icons {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin-left: auto !important;
    }

    #mobile_top_menu_wrapper .collapse-icons .material-icons {
        font-size: 24px !important;
        color: #666 !important;
        transition: transform 0.2s ease !important;
    }

    /* Hide/show expand/collapse icons */
    #mobile_top_menu_wrapper .collapse-icons .add {
        display: block !important;
    }

    #mobile_top_menu_wrapper .collapse-icons .remove {
        display: none !important;
    }

    #mobile_top_menu_wrapper .collapse-icons[aria-expanded="true"] .add,
    #mobile_top_menu_wrapper .collapse-icons.collapsed .remove {
        display: none !important;
    }

    #mobile_top_menu_wrapper .collapse-icons[aria-expanded="true"] .remove {
        display: block !important;
    }

    /* Subcategory items - indented */
    #mobile_top_menu_wrapper ul[data-depth="1"],
    #mobile_top_menu_wrapper .sub-menu {
        background: #f9f9f9 !important;
        padding-left: 0 !important;
        margin: 0 !important;
    }

    #mobile_top_menu_wrapper ul[data-depth="1"] li a,
    #mobile_top_menu_wrapper .sub-menu a {
        padding-left: 30px !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #555 !important;
        min-height: 40px !important;
    }

    #mobile_top_menu_wrapper ul[data-depth="1"] li a:hover,
    #mobile_top_menu_wrapper .sub-menu a:hover {
        color: #e83e8c !important;
        background: #f0f0f0 !important;
    }

    /* Divider before bottom section - D-12 */
    #mobile_top_menu_wrapper .js-top-menu-bottom {
        border-top: 1px solid rgba(0,0,0,0.1) !important;
        margin-top: 10px !important;
        padding-top: 10px !important;
    }

    /* Hide contact phone in mobile menu - D-14 */
    #mobile_top_menu_wrapper .phone-number,
    #mobile_top_menu_wrapper .contact-link[href*="tel:"],
    #mobile_top_menu_wrapper a[href*="contact"] {
        display: none !important;
    }

    /* ============================================
       MOBILE CART BADGE - Phase 1
       ============================================ */

    /* Mobile cart badge styling - D-07 */
    .mobile-cart .cart-products-count,
    #_mobile_cart .cart-products-count {
        position: absolute !important;
        top: 2px !important;
        right: 2px !important;
        background: #e83e8c !important;
        color: #fff !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        min-width: 18px !important;
        height: 18px !important;
        border-radius: 9px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 4px !important;
        line-height: 1 !important;
    }

    /* Pulse animation when cart has items - reuses existing @keyframes pulse from line 788 */
    .mobile-cart .blockcart.active .cart-products-count,
    #_mobile_cart .blockcart.active .cart-products-count,
    .mobile-cart .blockcart:not([data-cart-products-count="0"]) .cart-products-count,
    #_mobile_cart .blockcart:not([data-cart-products-count="0"]) .cart-products-count {
        animation: pulse 2s infinite !important;
    }

    /* Hide badge when cart is empty */
    .mobile-cart .blockcart:not(.active) .cart-products-count,
    #_mobile_cart .blockcart:not(.active) .cart-products-count,
    .mobile-cart .blockcart[data-cart-products-count="0"] .cart-products-count,
    #_mobile_cart .blockcart[data-cart-products-count="0"] .cart-products-count {
        display: none !important;
    }

    /* Hide cart text label on mobile - icon only */
    .mobile-cart .cart-preview span:not(.cart-products-count),
    #_mobile_cart .cart-preview span:not(.cart-products-count) {
        display: none !important;
    }

    /* ============================================
       MOBILE SEARCH EXPAND/COLLAPSE - Phase 1
       ============================================ */

    /* Default state: search icon visible, input hidden */
    .mobile-search-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        color: #fff !important;
        flex-shrink: 0 !important;
        order: 2 !important;
    }

    .mobile-search-icon .material-icons {
        font-size: 24px !important;
        color: #fff !important;
    }

    /* Mobile search bar - hidden by default */
    .header-mobile .mobile-search,
    .header-mobile #search_widget {
        display: none !important;
    }

    /* ===== EXPANDED STATE ===== */

    /* Keep header fixed when search expanded, position context comes from container */
    .header-mobile.search-expanded {
        position: fixed !important;
    }

    .header-mobile.search-expanded > .container {
        position: relative !important;
    }

    /* Position search bar absolutely within header when expanded */
    .header-mobile.search-expanded .mobile-search {
        display: block !important;
        position: absolute !important;
        top: 10px !important;
        bottom: 10px !important;
        left: 54px !important;  /* After menu icon (44px + 10px gap) */
        right: 54px !important; /* Before cart icon */
        z-index: 100 !important;
    }

    .header-mobile.search-expanded .mobile-search #search_widget {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    .header-mobile.search-expanded .mobile-search #search_widget form {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Hide logo when search expanded - D-09 */
    .header-mobile.search-expanded .mobile-logo,
    .header-mobile.search-expanded #_mobile_logo {
        display: none !important;
    }

    /* Hide search icon when expanded (replaced by input) */
    .header-mobile.search-expanded .mobile-search-icon {
        display: none !important;
    }

    /* Hamburger becomes back arrow - D-10 */
    .header-mobile.search-expanded #menu-icon .material-icons {
        font-family: 'Material Icons' !important;
    }

    /* Using CSS to change icon content */
    .header-mobile.search-expanded #menu-icon .material-icons::before {
        content: "" !important;
    }

    /* Alternative: Add data attribute styling */
    .header-mobile.search-expanded #menu-icon[data-search-back="true"] .material-icons {
        font-family: 'Material Icons' !important;
    }

    /* Search input styling */
    .header-mobile .mobile-search input,
    .header-mobile #search_widget input {
        width: 100% !important;
        height: 40px !important;
        border: 2px solid rgba(255,255,255,0.3) !important;
        border-radius: 20px !important;
        padding: 0 15px !important;
        font-size: 16px !important; /* Prevent iOS zoom */
        background: rgba(255,255,255,0.1) !important;
        color: #fff !important;
        outline: none !important;
        transition: border-color 0.2s ease !important;
    }

    .header-mobile .mobile-search input::placeholder,
    .header-mobile #search_widget input::placeholder {
        color: rgba(255,255,255,0.6) !important;
    }

    .header-mobile .mobile-search input:focus,
    .header-mobile #search_widget input:focus {
        border-color: #e83e8c !important;
        background: rgba(255,255,255,0.15) !important;
    }

    /* Hide search button - just use input + enter */
    .header-mobile .mobile-search button,
    .header-mobile #search_widget button {
        display: none !important;
    }

    /* Cart remains visible when search expanded - D-09 */
    .header-mobile.search-expanded .mobile-cart,
    .header-mobile.search-expanded #_mobile_cart {
        display: flex !important;
        position: absolute !important;
        right: 5px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 200 !important;
    }

    /* Ensure proper flex order in expanded state */
    .header-mobile.search-expanded .mobile-header-content {
        justify-content: flex-start !important;
    }

    .header-mobile.search-expanded #menu-icon {
        order: 1 !important;
    }

    .header-mobile.search-expanded .mobile-search,
    .header-mobile.search-expanded #search_widget {
        order: 2 !important;
    }

    /* Back arrow visual for hamburger when search expanded */
    .header-mobile.search-expanded #menu-icon {
        position: absolute !important;
        left: 5px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 200 !important;
    }

    /* Create back arrow using CSS (since we can't easily swap Material Icon) */
    .header-mobile.search-expanded #menu-icon .material-icons {
        color: transparent !important;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E") center no-repeat !important;
        background-size: 24px 24px !important;
    }

    /* Mobile search autocomplete dropdown */
    .mobile-search .ui-autocomplete {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        background: #fff !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
        z-index: 9999 !important; /* Above all header elements (z-index 200) */
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .mobile-search .ui-autocomplete li {
        border-bottom: 1px solid #eee !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .mobile-search .ui-autocomplete li:last-child {
        border-bottom: none !important;
    }

    .mobile-search .ui-autocomplete li a {
        display: flex !important;
        align-items: center !important;
        padding: 12px 15px !important;
        text-decoration: none !important;
        color: #333 !important;
        gap: 12px !important;
    }

    .mobile-search .ui-autocomplete li a:hover,
    .mobile-search .ui-autocomplete li.ui-state-focus a {
        background: #f8f9fa !important;
    }

    .mobile-search .ui-autocomplete .autocomplete-thumbnail {
        width: 50px !important;
        height: 50px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
        border-radius: 4px !important;
        background: #f5f5f5 !important;
    }

    .mobile-search .ui-autocomplete .product {
        flex: 1 !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
        color: #333 !important;
    }
}

/* VAT label next to price */
.product-miniature .price-vat-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #e83e8c !important;
    margin-left: 5px !important;
}

/* Quantity info row */
.product-miniature .product-quantity-info {
    margin-top: 5px !important;
    font-size: 13px !important;
    text-align: center !important;
}

.product-miniature .qty-available {
    color: #28a745 !important;
    font-weight: 500 !important;
}

.product-miniature .qty-out-of-stock {
    color: #dc3545 !important;
    font-weight: 500 !important;
}

/* Watermark on product detail page main image */
.product-cover {
    position: relative !important;
}

.product-cover::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: url("https://firebasestorage.googleapis.com/v0/b/foodchainapp-1531482755524.appspot.com/o/hladilnik.com%2Fhladilnik-watermark.png?alt=media&token=17de2b97-fc2a-4160-b129-0b641d0e0937") center / 40% no-repeat !important;
    opacity: 0.15 !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

/* Watermark on product zoom modal */
#product-modal .modal-body figure {
    position: relative !important;
}

#product-modal .modal-body figure::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: url("https://firebasestorage.googleapis.com/v0/b/foodchainapp-1531482755524.appspot.com/o/hladilnik.com%2Fhladilnik-watermark.png?alt=media&token=17de2b97-fc2a-4160-b129-0b641d0e0937") center / 35% no-repeat !important;
    opacity: 0.15 !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

/* Login to see price message on product page */
.login-to-see-price {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border: 2px dashed #e83e8c !important;
    border-radius: 12px !important;
    padding: 25px !important;
    text-align: center !important;
    margin: 15px 0 !important;
}

.login-to-see-price-icon {
    margin-bottom: 15px !important;
}

.login-to-see-price-icon .material-icons {
    font-size: 48px !important;
    color: #e83e8c !important;
    opacity: 0.8 !important;
}

.login-to-see-price-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 15px !important;
}

.login-to-see-price-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.login-to-see-price-actions .btn {
    padding: 10px 25px !important;
    font-weight: 600 !important;
    border-radius: 25px !important;
    text-transform: none !important;
}

.login-to-see-price-actions .btn-primary {
    background: linear-gradient(135deg, #e83e8c 0%, #d63384 100%) !important;
    border: none !important;
    color: #fff !important;
}

.login-to-see-price-actions .btn-primary:hover {
    background: linear-gradient(135deg, #d63384 0%, #c22d76 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(232, 62, 140, 0.4) !important;
}

.login-to-see-price-actions .btn-outline-primary {
    background: transparent !important;
    border: 2px solid #e83e8c !important;
    color: #e83e8c !important;
}

.login-to-see-price-actions .btn-outline-primary:hover {
    background: #e83e8c !important;
    color: #fff !important;
}

.login-to-see-price-separator {
    color: #666 !important;
    font-size: 14px !important;
}

/* Header Login/Register style */
.header-login-register {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #fff !important;
}

.header-login-register .material-icons {
    font-size: 20px !important;
    margin-right: 6px !important;
}

.header-login-link,
.header-register-link {
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

.header-login-link:hover,
.header-register-link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
}

.header-login-separator {
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 0 2px !important;
}

/* Hide brands filter block on category pages */
#search_filters_brands {
    display: none !important;
}

/* Fix submenu z-index - tier-2 stays above dropdown */
.header-tier-2 {
    position: relative !important;
    z-index: 100 !important;
}
.header-tier-3 {
    position: relative !important;
    z-index: 99 !important;
}

/* Push submenu dropdown below the pink nav bar */
.top-menu .sub-menu,
.top-menu .collapse,
#top-menu .sub-menu {
    margin-top: 50px !important;
}

/* === MOBILE HEADER FIXES === */

/* Mobile logo must be clickable */
#_mobile_logo {
    cursor: pointer !important;
    pointer-events: auto !important;
}

#_mobile_logo a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: auto !important;
}

/* Mobile search autocomplete z-index fix (ensure above header) */
.mobile-search .ui-autocomplete,
.header-mobile .ui-autocomplete {
    z-index: 9999 !important;
}

/* === MOBILE MENU IS-OPEN STATE FIX === */

/* Override the theme.js behavior that hides wrapper/footer */
#header.is-open ~ #notifications,
#header.is-open ~ #wrapper,
#header.is-open ~ #footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure mobile menu wrapper shows correctly */
@media (max-width: 767px) {
    #mobile_top_menu_wrapper.is-open {
        display: block !important;
        transform: translateX(0) !important;
    }
}

/* Desktop search autocomplete fix */
.tier-2-search .ui-autocomplete,
#search_widget .ui-autocomplete {
    z-index: 9999 !important;
    position: absolute !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    margin-top: 5px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

.tier-2-search .ui-autocomplete li,
#search_widget .ui-autocomplete li {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    border-bottom: 1px solid #eee !important;
}

.tier-2-search .ui-autocomplete li:last-child,
#search_widget .ui-autocomplete li:last-child {
    border-bottom: none !important;
}

.tier-2-search .ui-autocomplete a,
#search_widget .ui-autocomplete a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 15px !important;
    text-decoration: none !important;
    color: #333 !important;
    gap: 10px !important;
}

.tier-2-search .ui-autocomplete a:hover,
#search_widget .ui-autocomplete a:hover,
.tier-2-search .ui-autocomplete .ui-state-focus a,
#search_widget .ui-autocomplete .ui-state-focus a {
    background: #f5f5f5 !important;
}

.tier-2-search .autocomplete-thumbnail,
#search_widget .autocomplete-thumbnail {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

.tier-2-search .ui-autocomplete .product,
#search_widget .ui-autocomplete .product {
    flex: 1 !important;
    font-size: 14px !important;
}

/* === SEARCH AUTOCOMPLETE STYLING === */

/* Style jQuery UI autocomplete dropdown - do NOT force display:block, let jQuery UI manage visibility */
.ui-autocomplete,
.searchbar-autocomplete,
.ui-menu {
    z-index: 99999 !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}

.ui-autocomplete li,
.searchbar-autocomplete li,
.ui-menu-item {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #eee !important;
    list-style: none !important;
}

.ui-autocomplete li a,
.searchbar-autocomplete li a,
.ui-menu-item a,
.ui-menu-item-wrapper {
    display: flex !important;
    align-items: center !important;
    padding: 10px 15px !important;
    text-decoration: none !important;
    color: #333 !important;
    gap: 10px !important;
    cursor: pointer !important;
}

.ui-autocomplete li a:hover,
.searchbar-autocomplete li a:hover,
.ui-state-focus,
.ui-state-active {
    background: #f5f5f5 !important;
}

/* Position for tier-2-search */
.tier-2-search {
    position: relative !important;
}

.tier-2-search .ui-autocomplete {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

/* === MOBILE SEARCH FIX === */

@media (max-width: 767px) {
    /* Hide the search icon and clear icon in mobile search - use only input */
    .header-mobile #search_widget i.material-icons,
    .header-mobile #mobile_search_widget i.material-icons,
    #mobile-search-container #search_widget i,
    #mobile-search-container #mobile_search_widget i,
    #mobile-search-container .search,
    #mobile-search-container .clear {
        display: none !important;
    }

    /* Fix form positioning */
    .header-mobile #search_widget form,
    .header-mobile #mobile_search_widget form,
    #mobile-search-container form {
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Mobile search input - clean style */
    #mobile-search-container input[type="text"],
    .header-mobile.search-expanded #search_widget input[type="text"],
    .header-mobile.search-expanded #mobile_search_widget input[type="text"] {
        width: 100% !important;
        height: 40px !important;
        border: 2px solid rgba(255,255,255,0.3) !important;
        border-radius: 20px !important;
        padding: 0 15px !important;
        padding-left: 15px !important;
        font-size: 16px !important;
        background: rgba(255,255,255,0.1) !important;
        color: #fff !important;
        outline: none !important;
        box-sizing: border-box !important;
    }

    #mobile-search-container input[type="text"]:focus,
    .header-mobile.search-expanded input[type="text"]:focus {
        border-color: #e83e8c !important;
        background: rgba(255,255,255,0.2) !important;
    }

    #mobile-search-container input[type="text"]::placeholder {
        color: rgba(255,255,255,0.6) !important;
    }
}

/* === DESKTOP SEARCH AUTOCOMPLETE FIX === */

/* Ensure desktop search container allows overflow */
.tier-2-search {
    position: relative !important;
    overflow: visible !important;
}

.tier-2-search #search_widget {
    overflow: visible !important;
    margin-bottom: 0 !important;
}

/* Desktop autocomplete positioning */
.tier-2-search .ui-autocomplete,
.tier-2-search .searchbar-autocomplete {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    min-width: 300px !important;
    z-index: 99999 !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    margin-top: 5px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Hide out-of-stock badge for non-logged-in visitors */
body:not(.customer-logged-in) .product-flag.out_of_stock {
    display: none !important;
}

/* ================================================================
   MOBILE FILTER PANEL (ps_facetedsearch overlay) — bento cards
   ================================================================ */
@media (max-width: 767px) {
    /* Light grey backdrop for the filter panel */
    #search_filters_wrapper,
    #search_filters {
        background: #f4f5f8 !important;
        padding: 12px 12px 32px !important;
        margin: 0 8px !important;
        border-radius: 10px !important;
    }

    /* Match the same horizontal inset on the parent column so filter aligns
       with .block-category below (which lives in #content-wrapper / col-xs-12) */
    #left-column {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #left-column #search_filters_wrapper,
    #left-column #search_filters {
        margin: 0 !important;
    }

    /* Each facet = elevated rounded card */
    .facet {
        background: #fff !important;
        border: 0 !important;
        border-radius: 14px !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        box-shadow: 0 1px 3px rgba(26,26,46,.06), 0 1px 1px rgba(26,26,46,.04) !important;
        overflow: hidden !important;
        transition: box-shadow .2s ease !important;
    }

    /* Tappable header row */
    .facet > .title {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 18px !important;
        min-height: 56px !important;
        margin: 0 !important;
        border-left: 3px solid transparent !important;
        transition: border-color .2s ease, background .2s ease !important;
    }

    /* Expanded state — pink left accent + soft pink wash */
    .facet > .title[aria-expanded="true"] {
        border-left-color: #e83e8c !important;
        background: linear-gradient(90deg, rgba(232,62,140,.04) 0%, transparent 40%) !important;
    }

    /* Label */
    .facet .title .facet-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: .6px !important;
        text-transform: uppercase !important;
        color: #1a1a2e !important;
        margin: 0 !important;
        flex: 1 !important;
    }

    /* Chevron pill */
    .facet .title .collapse-icons {
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: #f4f5f8 !important;
        transition: background .2s ease, transform .2s ease !important;
        position: relative !important;
    }
    .facet .title[aria-expanded="true"] .collapse-icons {
        background: #e83e8c !important;
        transform: rotate(180deg) !important;
    }
    .facet .title .collapse-icons .material-icons {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 20px !important;
        color: #555 !important;
        line-height: 1 !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .facet .title[aria-expanded="true"] .collapse-icons .material-icons {
        color: #fff !important;
    }

    /* Expanded list */
    .facet ul.collapse.in,
    .facet ul.collapse.show {
        padding: 4px 18px 14px !important;
        border-top: 1px solid #f0f1f4 !important;
    }
    .facet ul li {
        border-bottom: 0 !important;
        padding: 8px 0 !important;
    }
    .facet ul li label {
        font-size: 14px !important;
        color: #222 !important;
    }

    /* Pink-accent checkbox */
    .facet .custom-checkbox input[type="checkbox"] + span {
        width: 20px !important;
        height: 20px !important;
        border: 2px solid #d0d3db !important;
        border-radius: 5px !important;
    }
    .facet .custom-checkbox input[type="checkbox"]:checked + span {
        background: #e83e8c !important;
        border-color: #e83e8c !important;
    }
    .facet .custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked {
        color: #fff !important;
    }

    /* Active filter label */
    .facet .facet-label.active {
        font-weight: 600 !important;
        color: #e83e8c !important;
    }

    /* Count badge next to each filter */
    .facet .magnitude {
        font-size: 12px !important;
        color: #8a8d96 !important;
        background: #f4f5f8 !important;
        padding: 1px 8px !important;
        border-radius: 10px !important;
        margin-left: auto !important;
    }
}

/* ================================================================
   MOBILE DRAWER — bento refinement (language + account sections)
   Extends custom_clean.css §1384-1559 drawer CSS with polished
   treatment for the hardcoded markup added in Plan 01-05.
   ================================================================ */
@media (max-width: 767px) {

    /* Soft divider + padding around the bottom section of the drawer */
    #mobile_top_menu_wrapper .js-top-menu-bottom {
        border-top: 1px solid #f0f1f4 !important;
        margin: 12px 0 0 0 !important;
        padding: 16px 20px 24px !important;
    }

    /* ---- Language section ---- */

    #mobile_top_menu_wrapper .mobile-drawer-language {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin: 0 0 18px 0 !important;
    }

    /* "LANGUAGE" cap label above the flag row */
    #mobile_top_menu_wrapper .mobile-drawer-language::before {
        content: 'Език' !important;
        display: block !important;
        width: 100% !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.8px !important;
        text-transform: uppercase !important;
        color: #8a8d96 !important;
        margin: 0 0 8px 0 !important;
    }

    #mobile_top_menu_wrapper .mobile-drawer-language .lang-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 44px !important;
        padding: 6px 14px !important;
        background: #fff !important;
        border: 2px solid #e6e7ec !important;
        border-radius: 10px !important;
        box-shadow: 0 1px 2px rgba(26,26,46,.04) !important;
        color: #1a1a2e !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: border-color .18s ease, background .18s ease, transform .08s ease !important;
    }

    #mobile_top_menu_wrapper .mobile-drawer-language .lang-btn:hover,
    #mobile_top_menu_wrapper .mobile-drawer-language .lang-btn:focus-visible {
        border-color: #e83e8c !important;
        outline: none !important;
    }

    #mobile_top_menu_wrapper .mobile-drawer-language .lang-btn:active {
        transform: scale(0.98) !important;
    }

    #mobile_top_menu_wrapper .mobile-drawer-language .lang-btn.is-active,
    #mobile_top_menu_wrapper .mobile-drawer-language .lang-btn[aria-current="true"] {
        border-color: #e83e8c !important;
        background: rgba(232,62,140,.05) !important;
        font-weight: 600 !important;
        color: #e83e8c !important;
    }

    #mobile_top_menu_wrapper .mobile-drawer-language .lang-btn img {
        width: 24px !important;
        height: 16px !important;
        border-radius: 2px !important;
        box-shadow: 0 0 0 1px rgba(0,0,0,.06) !important;
        flex-shrink: 0 !important;
    }

    /* ---- Account section ---- */

    #mobile_top_menu_wrapper .mobile-drawer-account {
        margin: 0 !important;
    }

    #mobile_top_menu_wrapper .mobile-drawer-account::before {
        content: 'Акаунт' !important;
        display: block !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.8px !important;
        text-transform: uppercase !important;
        color: #8a8d96 !important;
        margin: 0 0 8px 0 !important;
    }

    #mobile_top_menu_wrapper .mobile-drawer-account .mobile-account-link {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        min-height: 52px !important;
        padding: 8px 12px !important;
        background: #fff !important;
        border: 1px solid #eceef2 !important;
        border-radius: 12px !important;
        color: #1a1a2e !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: border-color .18s ease, background .18s ease !important;
    }

    #mobile_top_menu_wrapper .mobile-drawer-account .mobile-account-link:hover,
    #mobile_top_menu_wrapper .mobile-drawer-account .mobile-account-link:focus-visible {
        border-color: #e83e8c !important;
        background: rgba(232,62,140,.04) !important;
        color: #e83e8c !important;
        outline: none !important;
    }

    /* Icon pill */
    #mobile_top_menu_wrapper .mobile-drawer-account .mobile-account-link .material-icons {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: #f4f5f8 !important;
        color: #555 !important;
        font-size: 22px !important;
        flex-shrink: 0 !important;
        transition: background .18s ease, color .18s ease !important;
    }

    #mobile_top_menu_wrapper .mobile-drawer-account .mobile-account-link:hover .material-icons,
    #mobile_top_menu_wrapper .mobile-drawer-account .mobile-account-link:focus-visible .material-icons {
        background: #e83e8c !important;
        color: #fff !important;
    }

    /* ---- Focus-visible restoration for drawer interactive elements ---- */
    #mobile_top_menu_wrapper a:focus-visible,
    #mobile_top_menu_wrapper button:focus-visible,
    #mobile_top_menu_wrapper .collapse-icons:focus-visible {
        outline: 2px solid #e83e8c !important;
        outline-offset: 2px !important;
    }
}

/* ================================================================
   Product details spec table (Данни за продукта) — Apr 22, 2026
   Replaces stock PS `dl.data-sheet` styling with a compact zebra
   spec sheet that matches the rest of the site's tight aesthetic.
   ================================================================ */

.product-features {
    margin: 24px 0 !important;
    padding: 0 !important;
}

.product-features > .h6,
.product-features > h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    color: #1a1a2e !important;
    margin: 0 0 12px 0 !important;
    padding: 0 0 10px 0 !important;
    border-bottom: 2px solid #e83e8c !important;
    display: inline-block !important;
    padding-right: 16px !important;
}

.product-features .data-sheet {
    display: grid !important;
    grid-template-columns: minmax(140px, 1fr) minmax(120px, 1.2fr) !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid #e83e8c !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fff !important;
}

.product-features .data-sheet dt.name,
.product-features .data-sheet dd.value {
    margin: 0 !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    min-height: auto !important;
    background: transparent !important;
    border: none !important;
    text-transform: none !important;
}

.product-features .data-sheet dt.name {
    color: #6b6e78 !important;
    font-weight: 500 !important;
    border-right: 1px solid #f0f1f4 !important;
}

.product-features .data-sheet dd.value {
    color: #1a1a2e !important;
    font-weight: 600 !important;
    text-align: right !important;
}

/* Zebra rows (alternating pairs of dt+dd) */
.product-features .data-sheet dt.name:nth-of-type(odd),
.product-features .data-sheet dt.name:nth-of-type(odd) + dd.value {
    background: #fafafb !important;
}

.product-features .data-sheet dt.name:nth-of-type(even),
.product-features .data-sheet dt.name:nth-of-type(even) + dd.value {
    background: #fff !important;
}

/* Row separators */
.product-features .data-sheet dt.name:not(:first-of-type),
.product-features .data-sheet dt.name:not(:first-of-type) + dd.value {
    border-top: 1px solid #f0f1f4 !important;
}

/* Mobile: tighten padding, keep two columns */
@media (max-width: 575px) {
    .product-features .data-sheet {
        grid-template-columns: minmax(120px, 1fr) minmax(100px, 1fr) !important;
    }
    .product-features .data-sheet dt.name,
    .product-features .data-sheet dd.value {
        padding: 8px 10px !important;
        font-size: 12.5px !important;
    }
}

/* ================================================================
   Breadcrumb — Apr 22, 2026
   Chevron separators, tighter typography, horizontal scroll
   on mobile instead of wrapping. "Начало" hidden on mobile
   since the logo already serves as the home link.
   ================================================================ */

nav.breadcrumb {
    background: transparent !important;
    padding: 12px 0 !important;
    margin: 0 0 16px 0 !important;
    border-radius: 0 !important;
}

nav.breadcrumb ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 !important;
}

nav.breadcrumb ol li {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #6b6e78 !important;
}

/* Chevron separator — ›  between li elements */
nav.breadcrumb ol li + li::before {
    content: '\203A' !important; /* › */
    display: inline-block !important;
    margin: 0 8px !important;
    color: #e83e8c !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

nav.breadcrumb ol li a {
    color: #6b6e78 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

nav.breadcrumb ol li a:hover {
    color: #e83e8c !important;
    text-decoration: none !important;
}

nav.breadcrumb ol li a span,
nav.breadcrumb ol li > span {
    display: inline !important;
    font-weight: 500 !important;
}

/* Last (current) crumb — no link, bold dark-navy */
nav.breadcrumb ol li:last-child {
    color: #1a1a2e !important;
}

nav.breadcrumb ol li:last-child > span {
    font-weight: 700 !important;
    color: #1a1a2e !important;
}

/* Mobile: hide "Начало" (first crumb), allow horizontal scroll on long chains */
@media (max-width: 575px) {
    nav.breadcrumb {
        padding: 10px 0 !important;
        margin: 0 0 12px 0 !important;
    }

    nav.breadcrumb ol {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 2px !important;
    }

    nav.breadcrumb ol::-webkit-scrollbar {
        display: none !important;
    }

    nav.breadcrumb ol li {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 12.5px !important;
    }

    /* Drop the "Начало" crumb — logo above already links home */
    nav.breadcrumb ol li:first-child {
        display: none !important;
    }

    /* Since first li is hidden, remove the chevron that would precede li #2 */
    nav.breadcrumb ol li:nth-child(2)::before {
        display: none !important;
    }

    nav.breadcrumb ol li + li::before {
        margin: 0 6px !important;
    }
}

/* ================================================================
   Category page header — Apr 22, 2026
   - Title: pink accent underline bar
   - Description: truncate to 3 lines on mobile (clamp)
   - Sort + Filter row: match height + radius, cohesive styling
   ================================================================ */

/* Title with pink underline accent */
.block-category h1.h1 {
    position: relative !important;
    margin: 0 0 16px 0 !important;
    padding: 0 0 12px 0 !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    color: #1a1a2e !important;
}

.block-category h1.h1::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 48px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #e83e8c 0%, #d63384 100%) !important;
    border-radius: 2px !important;
}

/* Description */
#category-description {
    color: #6b6e78 !important;
    line-height: 1.55 !important;
    font-size: 14px !important;
    margin: 0 0 16px 0 !important;
}

#category-description p {
    margin: 0 !important;
}

/* Sort + Filter row — shared styling */
#js-product-list-top {
    align-items: center !important;
    margin: 0 0 16px 0 !important;
}

.products-sort-order .select-title,
#search_filter_toggler {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 22px !important;
    padding: 0 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

/* Sort dropdown — outlined neutral */
.products-sort-order .select-title {
    background: #fff !important;
    color: #1a1a2e !important;
    border-color: #e0e2e8 !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

.products-sort-order .select-title:hover,
.products-sort-order .select-title:focus {
    border-color: #e83e8c !important;
    color: #1a1a2e !important;
}

.products-sort-order .select-title .material-icons,
.products-sort-order .select-title .material-icons.float-xs-right,
.products-sort-order .select-title > i {
    font-size: 18px !important;
    color: #6b6e78 !important;
    float: none !important;
    align-self: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Filter button — solid pink pill */
#search_filter_toggler {
    background: linear-gradient(135deg, #e83e8c 0%, #d63384 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(232, 62, 140, 0.25) !important;
    width: 100% !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#search_filter_toggler:hover,
#search_filter_toggler:focus {
    background: linear-gradient(135deg, #d63384 0%, #b02a6a 100%) !important;
    box-shadow: 0 4px 12px rgba(232, 62, 140, 0.35) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}

/* Count line (mobile "Показани са X от Y") */
#js-product-list-top .showing {
    color: #8a8d96 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 10px 0 0 0 !important;
    margin: 0 !important;
}

/* Mobile-specific: truncate description + tighter spacing */
@media (max-width: 767px) {
    .block-category {
        padding: 16px !important;
        margin-bottom: 16px !important;
    }

    .block-category h1.h1 {
        font-size: 24px !important;
        margin-bottom: 12px !important;
    }

    #category-description {
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        position: relative !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin: 0 0 14px 0 !important;
    }

    /* Subtle fade at the bottom of the clamped text to hint truncation */
    #category-description::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        right: 0 !important;
        width: 60% !important;
        height: 1.5em !important;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 85%) !important;
        pointer-events: none !important;
    }

    /* Allow user to tap to expand (no JS needed) */
    #category-description:focus,
    #category-description:active {
        display: block !important;
        -webkit-line-clamp: unset !important;
    }

    #category-description:focus::after,
    #category-description:active::after {
        display: none !important;
    }
}

/* ================================================================
   Product page: quantity spinner + add-to-cart row — Apr 22, 2026
   Fix jQuery TouchSpin up/down buttons that overflowed into the
   ДОБАВИ button. Wrap the input + buttons in a contained 44px pill
   and stack the arrows inside on the right.
   ================================================================ */

/* Row: qty + add-to-cart + wishlist — strict flex order, heart forced to far right */
.product-quantity,
.product-add-to-cart .product-quantity {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    margin: 12px 0 0 0 !important;
}

.product-quantity .qty {
    flex: 0 0 auto !important;
    order: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.product-quantity .add {
    flex: 1 1 auto !important;
    order: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
}

.product-quantity .wishlist-button-product,
.product-quantity .product-actions,
.product-quantity > .wishlist-button,
.product-quantity > a[class*="wishlist"] {
    flex: 0 0 auto !important;
    order: 3 !important;
    margin-left: auto !important;
}

/* TouchSpin wrapper — the box around input + vertical buttons */
.bootstrap-touchspin,
.product-quantity .input-group.bootstrap-touchspin {
    display: inline-flex !important;
    align-items: stretch !important;
    height: 44px !important;
    width: 108px !important;
    border: 1px solid #e0e2e8 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: none !important;
    padding: 0 !important;
    position: relative !important;
}

/* The input itself — borderless, centered, fills remaining space */
.bootstrap-touchspin input[type="text"],
.bootstrap-touchspin input[type="number"],
.bootstrap-touchspin .form-control,
#quantity_wanted {
    border: none !important;
    background: transparent !important;
    height: 100% !important;
    padding: 0 8px !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    box-shadow: none !important;
    outline: none !important;
    -moz-appearance: textfield !important;
}

.bootstrap-touchspin input::-webkit-outer-spin-button,
.bootstrap-touchspin input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Vertical button column on the right */
.bootstrap-touchspin .input-group-btn-vertical,
.product-quantity .input-group-btn-vertical {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    border-left: 1px solid #f0f1f4 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}

.bootstrap-touchspin .input-group-btn-vertical button,
.bootstrap-touchspin .input-group-btn-vertical .btn,
.product-quantity .input-group-btn-vertical button {
    flex: 1 1 50% !important;
    width: 100% !important;
    height: 50% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff5fa !important;
    border: none !important;
    border-radius: 0 !important;
    color: #e83e8c !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    position: static !important;
    box-shadow: none !important;
}

.bootstrap-touchspin .input-group-btn-vertical button .material-icons,
.bootstrap-touchspin .input-group-btn-vertical .btn .material-icons,
.bootstrap-touchspin .input-group-btn-vertical button i,
.product-quantity .input-group-btn-vertical button .material-icons {
    color: #e83e8c !important;
}

.bootstrap-touchspin .input-group-btn-vertical button:hover,
.bootstrap-touchspin .input-group-btn-vertical .btn:hover {
    background: #ffe8f1 !important;
    color: #d63384 !important;
}

.bootstrap-touchspin .input-group-btn-vertical button:hover .material-icons,
.bootstrap-touchspin .input-group-btn-vertical .btn:hover .material-icons {
    color: #d63384 !important;
}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up,
.bootstrap-touchspin .input-group-btn-vertical button:first-child {
    border-bottom: 1px solid #f0f1f4 !important;
}

/* Hide whatever icon/ligature text the template put inside — we draw our own chevrons below */
.bootstrap-touchspin .input-group-btn-vertical button > *,
.bootstrap-touchspin .input-group-btn-vertical .btn > *,
.bootstrap-touchspin .input-group-btn-vertical button i,
.bootstrap-touchspin .input-group-btn-vertical button .material-icons,
.bootstrap-touchspin .input-group-btn-vertical .touchspin-up,
.bootstrap-touchspin .input-group-btn-vertical .touchspin-down {
    font-size: 0 !important;
    color: transparent !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* CSS-drawn chevrons via border triangles — always render, always pink */
.bootstrap-touchspin .input-group-btn-vertical button::before,
.bootstrap-touchspin .input-group-btn-vertical .btn::before {
    content: '' !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    visibility: visible !important;
}

/* Up button: upward triangle */
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up::before,
.bootstrap-touchspin .input-group-btn-vertical button:first-child::before {
    border-bottom: 6px solid #e83e8c !important;
    border-top: 0 !important;
}

/* Down button: downward triangle */
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down::before,
.bootstrap-touchspin .input-group-btn-vertical button:last-child::before {
    border-top: 6px solid #e83e8c !important;
    border-bottom: 0 !important;
}

/* Hover: deepen the triangle color */
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up:hover::before,
.bootstrap-touchspin .input-group-btn-vertical button:first-child:hover::before {
    border-bottom-color: #d63384 !important;
}
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down:hover::before,
.bootstrap-touchspin .input-group-btn-vertical button:last-child:hover::before {
    border-top-color: #d63384 !important;
}

/* Add-to-cart button in the row — match 44px height */
.product-add-to-cart .add-to-cart,
.product-quantity .add-to-cart,
button.add-to-cart {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 22px !important;
    padding: 0 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
}

.product-add-to-cart .add-to-cart .material-icons,
button.add-to-cart .material-icons {
    font-size: 20px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Wishlist heart — match height, circular */
.product-quantity .wishlist-button-product,
.product-actions .wishlist-button-product {
    flex: 0 0 auto !important;
}

.product-quantity .wishlist-button-product > button,
.product-quantity .wishlist-button-product > a,
.wishlist-button-product .wishlist-button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid #e0e2e8 !important;
    background: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.15s ease !important;
}

.product-quantity .wishlist-button-product > button:hover,
.wishlist-button-product .wishlist-button:hover {
    border-color: #e83e8c !important;
    color: #e83e8c !important;
}

/* ================================================================
   Product page: price + "с ДДС" tax label on one row — Apr 22, 2026
   ================================================================ */

.product-prices,
.product-prices .product-price,
.product-prices .current-price {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
}

.product-prices {
    margin: 8px 0 !important;
}

.product-prices .price,
.product-price .price,
.current-price .price {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
    margin: 0 !important;
}

.product-prices .tax-shipping-delivery-label,
.product-price .tax-shipping-delivery-label,
.product-prices div.tax-shipping-delivery-label {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #8a8d96 !important;
    text-transform: none !important;
    margin: 0 !important;
    padding: 2px 8px !important;
    background: #f4f5f8 !important;
    border-radius: 12px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

/* Regular (pre-discount) striked price — inline, grey */
.product-prices .regular-price {
    font-size: 15px !important;
    color: #a0a3ab !important;
    text-decoration: line-through !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* Discount badge */
.product-prices .discount {
    display: inline-block !important;
    background: #e83e8c !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* ================================================================
   Subtle pink borders on container blocks — Apr 22, 2026
   Single outer 1.5px pink border — same width as product card hover
   ring. Applied only to the outermost container per block; inner
   children have their borders stripped to avoid doubling.
   ================================================================ */

/* Filter sidebar — outer wrapper only */
#search_filters_wrapper {
    border: 1.5px solid #e83e8c !important;
    border-radius: 10px !important;
    background: #fff !important;
    padding: 18px !important;
}

/* Strip borders from the inner .card / section inside the wrapper */
#search_filters_wrapper #search_filters,
#search_filters_wrapper .card,
#search_filters_wrapper > section,
#search_filters.card {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Category page header — single outer border */
.block-category.card.card-block,
.block-category {
    border: 1.5px solid #e83e8c !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
}

/* ================================================================
   Active filters bar — Apr 22, 2026
   Soft pink background, rounded pink filter chips with × remove.
   ================================================================ */

#js-active-search-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px 12px !important;
    background: linear-gradient(135deg, rgba(232, 62, 140, 0.08) 0%, rgba(214, 51, 132, 0.08) 100%) !important;
    border: 1px solid rgba(232, 62, 140, 0.25) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    margin: 0 0 16px 0 !important;
}

#js-active-search-filters.hide,
#js-active-search-filters.d-none {
    display: none !important;
}

/* "Активни филтри" label */
#js-active-search-filters .h6,
#js-active-search-filters > p {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #1a1a2e !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    align-self: center !important;
}

/* Filter chip container */
#js-active-search-filters ul {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* Individual filter chip */
#js-active-search-filters .filter-block,
#js-active-search-filters li {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #fff !important;
    border: 1px solid rgba(232, 62, 140, 0.3) !important;
    border-radius: 6px !important;
    padding: 5px 8px 5px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1a1a2e !important;
    box-shadow: 0 1px 3px rgba(232, 62, 140, 0.08) !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    line-height: 1 !important;
}

#js-active-search-filters .filter-block:hover,
#js-active-search-filters li:hover {
    background: #fff5fa !important;
    border-color: #e83e8c !important;
}

#js-active-search-filters .filter-block .filter-label,
#js-active-search-filters li .filter-label {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    color: #1a1a2e !important;
}

/* × remove link — pink circular button */
#js-active-search-filters .filter-block a,
#js-active-search-filters li a,
#js-active-search-filters .js-search-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    border-radius: 50% !important;
    background: #f4f5f8 !important;
    color: #6b6e78 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
    text-align: center !important;
    position: relative !important;
    top: 0 !important;
    box-sizing: border-box !important;
}

#js-active-search-filters .filter-block a:hover,
#js-active-search-filters li a:hover,
#js-active-search-filters .js-search-link:hover {
    background: #e83e8c !important;
    color: #fff !important;
}

/* Hide icon font artifacts inside the × link if any */
#js-active-search-filters .filter-block a .material-icons {
    font-size: 14px !important;
}

/* Clear all button if present */
#js-active-search-filters .js-search-filters-clear-all {
    margin-left: 8px !important;
    color: #e83e8c !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    font-size: 12px !important;
}