:root {
--bx-primary:     #2B5F8E;
--bx-primary-dk:  #1e4a70;
--bx-accent:      #C41C7F;
--bx-bg:          #ffffff;
--bx-bg-alt:      #f4f6f9;
--bx-bg-alt2:     #edf0f5;
--bx-border:      #dde2e9;
--bx-text:        #1a1a2e;
--bx-text-muted:  #6b7280;
--bx-radius:      10px;
--bx-radius-sm:   6px;
--bx-transition:  0.18s ease;
--bx-shadow:      0 2px 12px rgba(43,95,142,.10);
--bx-shadow-lg:   0 8px 32px rgba(0,0,0,.14);
--bx-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
} .bx-layout {
display: grid;
gap: 28px;
align-items: start;
font-family: var(--bx-font);
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.bx-layout.bx-sidebar-left  { grid-template-columns: 272px minmax(0, 1fr); }
.bx-layout.bx-sidebar-right { grid-template-columns: minmax(0, 1fr) 272px; }
.bx-layout.bx-sidebar-right .bx-sidebar-desktop { order: 2; }
.bx-layout.bx-sidebar-right .bx-content         { order: 1; } .bx-content,
.bx-results-wrap,
.bx-products-grid {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
} .bx-sidebar-desktop {
position: sticky;
top: 24px;
align-self: start; max-height: calc(100vh - 48px);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--bx-border) transparent;
}
.bx-sidebar-desktop::-webkit-scrollbar       { width: 4px; }
.bx-sidebar-desktop::-webkit-scrollbar-track { background: transparent; }
.bx-sidebar-desktop::-webkit-scrollbar-thumb { background: var(--bx-border); border-radius: 4px; } .elementor-widget-bx_ajax_filters,
.elementor-widget-bx_ajax_filters .elementor-widget-container {
overflow: visible !important;
}
.elementor-widget-bx_ajax_filters {
align-self: start !important;
} .bx-filters-panel {
background: var(--bx-bg);
border: 1px solid var(--bx-border);
border-radius: var(--bx-radius);
box-shadow: var(--bx-shadow);
overflow: hidden;
font-family: var(--bx-font);
font-size: 13.5px;
color: var(--bx-text);
} .bx-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 18px;
background: linear-gradient(135deg, var(--bx-primary) 0%, var(--bx-primary-dk) 100%);
color: #fff;
}
.bx-panel-title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 14px;
letter-spacing: .02em;
}
.bx-panel-title svg { opacity: .85; }
.bx-panel-close {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.2);
border-radius: 50%;
color: #fff;
cursor: pointer;
transition: background var(--bx-transition);
}
.bx-panel-close:hover { background: rgba(255,255,255,.25); }
.bx-panel-close svg   { width: 16px; height: 16px; } .bx-active-filters {
padding: 10px 14px;
border-bottom: 1px solid var(--bx-border);
background: var(--bx-bg-alt);
} .bx-active-filters-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 12px 16px;
margin-bottom: 16px;
background: var(--bx-bg-alt);
border: 1px solid var(--bx-border);
border-radius: var(--bx-radius);
}
.bx-active-filters-bar .bx-active-tags {
margin-bottom: 0;
flex: 1;
}
.bx-active-filters-bar .bx-reset-all {
flex-shrink: 0;
white-space: nowrap;
}
.bx-active-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 8px;
}
.bx-active-tag {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--bx-primary);
color: #fff;
font-size: 11.5px;
font-weight: 500;
padding: 3px 6px 3px 10px;
border-radius: 100px;
line-height: 1.4;
}
.bx-active-tag button {
display: flex;
align-items: center;
background: rgba(255,255,255,.25);
border: none;
border-radius: 50%;
color: #fff;
cursor: pointer;
padding: 1px;
transition: background var(--bx-transition);
line-height: 0;
}
.bx-active-tag button:hover { background: rgba(255,255,255,.45); }
.bx-reset-all {
display: inline-flex;
align-items: center;
gap: 5px;
background: none;
border: none;
color: var(--bx-accent);
font-size: 12px;
font-weight: 500;
cursor: pointer;
padding: 0;
font-family: var(--bx-font);
transition: opacity var(--bx-transition);
}
.bx-reset-all:hover { opacity: .7; } .bx-filter-section {
border-bottom: 1px solid var(--bx-border);
}
.bx-filter-section:last-child { border-bottom: none; } .bx-section-header {
padding: 13px 16px 8px;
}
.bx-section-title {
display: block;
font-family: var(--bx-font);
font-size: 11px;
font-weight: 800;
color: var(--bx-text);
text-transform: uppercase;
letter-spacing: .08em;
}
.bx-section-body { padding: 0 16px 14px; } .bx-cat-list, .bx-brand-list, .bx-subcats {
list-style: none;
margin: 0;
padding: 0;
}
.bx-cat-item > label,
.bx-brand-item > label {
display: flex;
align-items: center;
gap: 9px;
padding: 5px 0;
cursor: pointer;
line-height: 1.35;
border-radius: var(--bx-radius-sm);
transition: background var(--bx-transition); text-decoration: none !important;
color: inherit !important;
}
.bx-cat-item > label:hover,
.bx-brand-item > label:hover { background: var(--bx-bg-alt); margin: 0 -6px; padding-left: 6px; padding-right: 6px; } .bx-subcats li label {
display: flex;
align-items: center;
gap: 9px;
padding: 5px 0;
cursor: pointer;
line-height: 1.35;
text-decoration: none !important;
color: inherit !important;
}
.bx-cat-item.has-children > label { padding-right: 4px; }
.bx-filter-check {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.bx-check-custom {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: 2px solid var(--bx-border);
border-radius: 5px;
background: #fff;
transition: border-color var(--bx-transition), background var(--bx-transition), box-shadow var(--bx-transition);
}
label:hover .bx-check-custom {
border-color: var(--bx-primary);
box-shadow: 0 0 0 3px rgba(43,95,142,.08);
}
.bx-filter-check:checked + .bx-check-custom {
background: var(--bx-primary);
border-color: var(--bx-primary);
box-shadow: none;
}
.bx-filter-check:checked + .bx-check-custom::after {
content: '';
display: block;
width: 10px;
height: 6px;
border-left: 2.5px solid #fff;
border-bottom: 2.5px solid #fff;
transform: translateY(-1px) rotate(-45deg);
}
.bx-filter-check:focus-visible + .bx-check-custom {
outline: 2px solid var(--bx-primary);
outline-offset: 2px;
}
.bx-label {
flex: 1;
font-size: 13.5px;
color: var(--bx-text);
}
.bx-count {
font-size: 11px;
color: var(--bx-text-muted);
background: var(--bx-bg-alt2);
padding: 1px 6px;
border-radius: 100px;
} .bx-cat-item { position: relative; }
.bx-subcats {
padding-left: 24px;
display: block;
border-left: 2px solid var(--bx-bg-alt2);
margin-left: 8px;
margin-top: 2px;
} .bx-price-display {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 700;
color: var(--bx-primary);
margin-bottom: 18px;
letter-spacing: -.01em;
}
.bx-price-sep { color: var(--bx-border); font-weight: 300; font-size: 18px; } .bx-price-slider.noUi-target {
height: 5px;
background: var(--bx-bg-alt2);
border: none;
box-shadow: none;
border-radius: 100px;
margin: 14px 11px 28px;
}
.bx-price-slider .noUi-connect {
background: linear-gradient(90deg, var(--bx-primary), #4a8fc0);
border-radius: 100px;
} .bx-price-slider .noUi-handle {
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
border: 3px solid var(--bx-primary);
box-shadow: 0 2px 8px rgba(43,95,142,.25);
cursor: grab;
top: 50%; transform: translate(50%, -50%);
transition: transform var(--bx-transition), box-shadow var(--bx-transition);
}
.bx-price-slider .noUi-handle:hover {
transform: translate(50%, -50%) scale(1.18);
box-shadow: 0 3px 12px rgba(43,95,142,.35);
}
.bx-price-slider .noUi-handle:active {
cursor: grabbing;
transform: translate(50%, -50%) scale(1.1);
}
.bx-price-slider .noUi-handle::before,
.bx-price-slider .noUi-handle::after { display: none; } .bx-brand-search-wrap {
position: relative;
margin-bottom: 10px;
}
.bx-search-ico {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
color: var(--bx-text-muted);
pointer-events: none;
}
.bx-brand-search {
width: 100%;
box-sizing: border-box;
padding: 8px 32px 8px 30px;
border: 1.5px solid var(--bx-border);
border-radius: var(--bx-radius-sm);
font-size: 13px;
font-family: var(--bx-font);
color: var(--bx-text);
background: var(--bx-bg-alt);
transition: border-color var(--bx-transition), box-shadow var(--bx-transition), background var(--bx-transition);
}
.bx-brand-search:focus {
outline: none;
border-color: var(--bx-primary);
background: #fff;
box-shadow: 0 0 0 3px rgba(43,95,142,.1);
}
.bx-brand-search::placeholder { color: var(--bx-text-muted); }
.bx-brand-search-clear {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
display: flex;
background: var(--bx-bg-alt2);
border: none;
border-radius: 50%;
cursor: pointer;
color: var(--bx-text-muted);
padding: 2px;
transition: background var(--bx-transition), color var(--bx-transition);
}
.bx-brand-search-clear:hover { background: var(--bx-border); color: var(--bx-text); }
.bx-brand-search-clear svg   { width: 12px; height: 12px; display: block; }
.bx-scrollable {
max-height: 210px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--bx-border) transparent;
}
.bx-scrollable::-webkit-scrollbar       { width: 4px; }
.bx-scrollable::-webkit-scrollbar-track { background: transparent; }
.bx-scrollable::-webkit-scrollbar-thumb { background: var(--bx-border); border-radius: 100px; }
.bx-brand-empty,
.bx-brand-no-results {
color: var(--bx-text-muted);
font-size: 12.5px;
padding: 8px 2px;
font-style: italic;
} .bx-panel-footer {
display: flex;
gap: 10px;
padding: 14px 16px;
border-top: 1px solid var(--bx-border);
background: var(--bx-bg-alt);
position: sticky;
bottom: 0;
}
.bx-btn-ghost {
flex: 1;
padding: 10px 14px;
border: 1.5px solid var(--bx-border);
border-radius: var(--bx-radius-sm);
background: #fff;
color: var(--bx-text-muted);
font-family: var(--bx-font);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: border-color var(--bx-transition), color var(--bx-transition);
}
.bx-btn-ghost:hover { border-color: var(--bx-text-muted); color: var(--bx-text); }
.bx-btn-primary {
flex: 2;
padding: 10px 14px;
border: none;
border-radius: var(--bx-radius-sm);
background: linear-gradient(135deg, var(--bx-primary) 0%, var(--bx-primary-dk) 100%);
color: #fff;
font-family: var(--bx-font);
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
box-shadow: 0 2px 8px rgba(43,95,142,.30);
transition: filter var(--bx-transition), box-shadow var(--bx-transition);
}
.bx-btn-primary:hover { filter: brightness(1.08); box-shadow: 0 4px 14px rgba(43,95,142,.40); } .bx-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
margin-bottom: 20px;
background: var(--bx-bg-alt);
border: 1px solid var(--bx-border);
border-radius: var(--bx-radius);
gap: 10px;
flex-wrap: wrap;
}
.bx-found-count {
font-size: 13px;
color: var(--bx-text-muted);
white-space: nowrap;
}
.bx-found-number {
font-weight: 700;
color: var(--bx-primary);
font-size: 15px;
margin-right: 1px;
}
.bx-toolbar-right {
display: flex;
align-items: center;
gap: 8px;
} .bx-orderby {
appearance: none;
-webkit-appearance: none;
padding: 7px 26px 7px 10px;
height: 34px;
border: 1.5px solid var(--bx-border);
border-radius: var(--bx-radius-sm);
font-size: 12.5px;
font-family: var(--bx-font);
color: var(--bx-text);
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 6px center / 13px;
cursor: pointer;
transition: border-color var(--bx-transition);
}
.bx-orderby:focus {
outline: none;
border-color: var(--bx-primary);
box-shadow: 0 0 0 3px rgba(43,95,142,.1);
} .bx-results-wrap { position: relative; }
.bx-loader-overlay {
position: absolute;
inset: 0;
background: rgba(255,255,255,.82);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
border-radius: var(--bx-radius);
min-height: 120px;
} .bx-spinner {
position: relative;
width: 30px;
height: 30px;
animation: bx-hourglass-flip 1.6s ease-in-out infinite;
}
.bx-spinner::before,
.bx-spinner::after {
content: '';
position: absolute;
left: 3px;
right: 3px;
height: 11px;
border: 2.5px solid var(--bx-primary);
}
.bx-spinner::before {
top: 0;
border-bottom: none;
border-radius: 3px 3px 0 0;
clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0);
}
.bx-spinner::after {
bottom: 0;
border-top: none;
border-radius: 0 0 3px 3px;
clip-path: polygon(50% 0, 100% 100%, 0 100%, 50% 0);
}
@keyframes bx-hourglass-flip {
0%, 35%  { transform: rotate(0deg); }
50%, 85% { transform: rotate(180deg); }
100%     { transform: rotate(180deg); }
} .bx-global-loader {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.35);
backdrop-filter: blur(1px);
pointer-events: none;
}
.bx-global-loader.is-active { display: flex; }
.bx-global-loader-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 22px 28px;
background: #fff;
border-radius: 14px;
box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.bx-global-loader-hourglass {
position: relative;
width: 34px;
height: 34px;
animation: bx-hourglass-flip 1.6s ease-in-out infinite;
}
.bx-global-loader-hourglass::before,
.bx-global-loader-hourglass::after {
content: '';
position: absolute;
left: 3px;
right: 3px;
height: 13px;
border: 3px solid var(--bx-primary);
}
.bx-global-loader-hourglass::before {
top: 0;
border-bottom: none;
border-radius: 3px 3px 0 0;
clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0);
}
.bx-global-loader-hourglass::after {
bottom: 0;
border-top: none;
border-radius: 0 0 3px 3px;
clip-path: polygon(50% 0, 100% 100%, 0 100%, 50% 0);
}
.bx-global-loader-text {
font-family: var(--bx-font);
font-size: 12.5px;
font-weight: 600;
color: var(--bx-text-muted);
letter-spacing: .02em;
} .bx-no-results {
text-align: center;
padding: 52px 24px;
color: var(--bx-text-muted);
font-size: 15px;
width: 100%;
box-sizing: border-box;
} .bx-products-grid { transition: opacity .18s ease; }   .bx-products-grid ul.products li.product,
.bx-products-grid ul.products.columns-1 li.product,
.bx-products-grid ul.products.columns-2 li.product,
.bx-products-grid ul.products.columns-3 li.product,
.bx-products-grid ul.products.columns-4 li.product,
.bx-products-grid ul.products.columns-5 li.product,
.bx-products-grid ul.products.columns-6 li.product {
float: none !important;
clear: none !important;
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
} .bx-products-grid ul.products > .product-wapper,
.bx-products-grid ul.products > .products-entry,
.bx-products-grid ul.products > [class*="product"] {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
overflow: hidden;
} .bx-products-grid ul.products::before,
.bx-products-grid ul.products::after {
display: none !important;
content: none !important;
} .bx-products-grid ul.products,
.bx-products-grid ul.products.columns-1,
.bx-products-grid ul.products.columns-2,
.bx-products-grid ul.products.columns-3,
.bx-products-grid ul.products.columns-4,
.bx-products-grid ul.products.columns-5,
.bx-products-grid ul.products.columns-6 {
display: grid !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
gap: 20px !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
} .bx-products-grid ul.products li.product > *,
.bx-products-grid ul.products li.product img,
.bx-products-grid ul.products > .product-wapper > *,
.bx-products-grid ul.products > .products-entry > * {
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box;
}
.bx-products-grid ul.products li.product img,
.bx-products-grid ul.products > .product-wapper img,
.bx-products-grid ul.products > .products-entry img {
max-width: 100% !important;
height: auto;
}
.bx-products-grid ul.products li.product a,
.bx-products-grid ul.products li.product .woocommerce-loop-product__title,
.bx-products-grid ul.products li.product .product-title,
.bx-products-grid ul.products > .product-wapper .product-title,
.bx-products-grid ul.products > .products-entry .product-title,
.bx-products-grid ul.products > .product-wapper .product-title a,
.bx-products-grid ul.products > .products-entry .product-title a {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
box-sizing: border-box;
}
.bx-products-grid ul.products > .product-wapper .products-content,
.bx-products-grid ul.products > .product-wapper .contents,
.bx-products-grid ul.products > .products-entry .products-content,
.bx-products-grid ul.products > .products-entry .contents {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box;
} .bx-products-grid .products-thumb,
.bx-products-grid .woocommerce-loop-product__link {
position: relative;
}
.bx-products-grid .products-thumb {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.bx-products-grid .products-thumb .onsale,
.bx-products-grid li.product .onsale {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
bottom: auto !important;
z-index: 6 !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: auto !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: calc(100% - 20px) !important;
margin: 0 !important;
padding: 6px 10px !important;
border: 1px solid rgba(255, 255, 255, .45) !important;
border-radius: 999px !important;
background: #8d8a20 !important;
color: #fff !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, .18) !important;
font-family: var(--bx-font) !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
letter-spacing: .01em;
text-align: center !important;
text-transform: none !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
.bx-products-grid .products-thumb .onsale::before,
.bx-products-grid .products-thumb .onsale::after,
.bx-products-grid li.product .onsale::before,
.bx-products-grid li.product .onsale::after {
display: none !important;
content: none !important;
} .bx-products-grid.bx-cols-1 ul.products,
.bx-products-grid.bx-cols-1 ul.products.columns-1,
.bx-products-grid.bx-cols-1 ul.products.columns-2,
.bx-products-grid.bx-cols-1 ul.products.columns-3,
.bx-products-grid.bx-cols-1 ul.products.columns-4 {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.bx-products-grid.bx-cols-2 ul.products,
.bx-products-grid.bx-cols-2 ul.products.columns-1,
.bx-products-grid.bx-cols-2 ul.products.columns-2,
.bx-products-grid.bx-cols-2 ul.products.columns-3,
.bx-products-grid.bx-cols-2 ul.products.columns-4 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.bx-products-grid.bx-cols-3 ul.products,
.bx-products-grid.bx-cols-3 ul.products.columns-1,
.bx-products-grid.bx-cols-3 ul.products.columns-2,
.bx-products-grid.bx-cols-3 ul.products.columns-3,
.bx-products-grid.bx-cols-3 ul.products.columns-4 {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.bx-products-grid.bx-cols-4 ul.products,
.bx-products-grid.bx-cols-4 ul.products.columns-1,
.bx-products-grid.bx-cols-4 ul.products.columns-2,
.bx-products-grid.bx-cols-4 ul.products.columns-3,
.bx-products-grid.bx-cols-4 ul.products.columns-4 {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.bx-products-grid.bx-cols-5 ul.products,
.bx-products-grid.bx-cols-5 ul.products.columns-1,
.bx-products-grid.bx-cols-5 ul.products.columns-2,
.bx-products-grid.bx-cols-5 ul.products.columns-3,
.bx-products-grid.bx-cols-5 ul.products.columns-4 {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
} .bx-products-grid.bx-view-list ul.products,
.bx-products-grid.bx-view-list ul.products.columns-1,
.bx-products-grid.bx-view-list ul.products.columns-2,
.bx-products-grid.bx-view-list ul.products.columns-3,
.bx-products-grid.bx-view-list ul.products.columns-4 {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.bx-products-grid.bx-view-list ul.products li.product {
display: grid !important;
grid-template-columns: 150px 1fr !important;
gap: 16px !important;
align-items: start !important;
border: 1px solid var(--bx-border) !important;
border-radius: var(--bx-radius) !important;
padding: 14px !important;
}
.bx-products-grid.bx-view-list ul.products li.product img {
width: 100% !important;
height: auto !important;
border-radius: var(--bx-radius-sm) !important;
} .bx-pagination {
margin-top: 32px;
display: flex;
justify-content: center;
}
.bx-pagination a.page-numbers,
.bx-pagination span.page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin: 0 3px;
border-radius: var(--bx-radius-sm);
font-size: 13px;
font-weight: 500;
text-decoration: none;
border: 1.5px solid var(--bx-border);
color: var(--bx-text);
background: #fff;
transition: all var(--bx-transition);
font-family: var(--bx-font);
}
.bx-pagination a.page-numbers:hover { border-color: var(--bx-primary); color: var(--bx-primary); background: rgba(43,95,142,.04); }
.bx-pagination span.current         { background: var(--bx-primary); border-color: var(--bx-primary); color: #fff; }
.bx-pagination span.dots            { border-color: transparent; background: none; color: var(--bx-text-muted); } .bx-loadmore-wrap {
margin-top: 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.bx-loadmore-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 36px;
border: 2px solid var(--bx-primary);
border-radius: 100px;
background: none;
color: var(--bx-primary);
font-family: var(--bx-font);
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: background var(--bx-transition), color var(--bx-transition), box-shadow var(--bx-transition);
}
.bx-loadmore-btn:hover {
background: var(--bx-primary);
color: #fff;
box-shadow: 0 4px 14px rgba(43,95,142,.3);
}
.bx-loadmore-btn:disabled { opacity: .5; cursor: default; pointer-events: none; }
.bx-loadmore-btn .bx-spinner-sm {
width: 15px;
height: 15px;
border: 2px solid rgba(255,255,255,.35);
border-top-color: currentColor;
border-radius: 50%;
animation: bx-spin .65s linear infinite;
display: none;
}
.bx-loadmore-btn.loading .bx-spinner-sm { display: block; }
.bx-loadmore-progress { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bx-loadmore-progress-bar {
width: 220px;
height: 4px;
background: var(--bx-bg-alt2);
border-radius: 100px;
overflow: hidden;
}
.bx-loadmore-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--bx-primary), #4a8fc0);
border-radius: 100px;
transition: width .4s ease;
}
.bx-loadmore-progress-text {
font-size: 12px;
color: var(--bx-text-muted);
} .bx-offcanvas-trigger {
display: none;
align-items: center;
gap: 8px;
padding: 9px 16px;
height: 38px;
border: 1.5px solid var(--bx-border);
border-radius: var(--bx-radius-sm);
background: #fff;
font-family: var(--bx-font);
font-size: 13.5px;
font-weight: 500;
color: var(--bx-text);
cursor: pointer;
box-shadow: var(--bx-shadow);
transition: border-color var(--bx-transition), box-shadow var(--bx-transition), color var(--bx-transition);
}
.bx-offcanvas-trigger:hover {
border-color: var(--bx-primary);
color: var(--bx-primary);
box-shadow: 0 2px 10px rgba(43,95,142,.15);
}
.bx-offcanvas-trigger svg { width: 18px; height: 18px; }
.bx-active-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--bx-accent);
color: #fff;
border-radius: 100px;
font-size: 10.5px;
font-weight: 700;
} .bx-offcanvas-backdrop {
position: fixed;
inset: 0;
background: rgba(10,20,40,.5);
z-index: 9998;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
body.bx-offcanvas-open .bx-offcanvas-backdrop {
opacity: 1;
pointer-events: all;
}
.bx-offcanvas-drawer {
position: fixed;
top: 0;
left: 0;
width: min(340px, 88vw);
height: 100dvh;
background: #fff;
z-index: 9999;
transform: translateX(-100%);
transition: transform .3s cubic-bezier(.4, 0, .2, 1);
display: flex;
flex-direction: column;
box-shadow: var(--bx-shadow-lg);
overflow: hidden;
}
body.bx-offcanvas-open .bx-offcanvas-drawer { transform: translateX(0); }
.bx-offcanvas-drawer .bx-filters-panel {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
border: none;
border-radius: 0;
box-shadow: none;
}
.bx-mobile-bar { display: none; margin-bottom: 14px; } @media (max-width: 980px) {
.bx-layout.bx-sidebar-left,
.bx-layout.bx-sidebar-right { grid-template-columns: minmax(0, 1fr); }
.bx-layout.bx-sidebar-right .bx-sidebar-desktop,
.bx-layout.bx-sidebar-right .bx-content { order: unset; }
.bx-sidebar-desktop   { display: none; }
.bx-mobile-bar        { display: flex; align-items: center; gap: 12px; }
.bx-offcanvas-trigger { display: inline-flex; }
}
@media (max-width: 480px) {
.bx-toolbar           { flex-direction: column; align-items: flex-start; }
.bx-toolbar-right     { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.bx-products-grid ul.products { gap: 12px !important; }
.bx-products-grid .products-thumb .onsale,
.bx-products-grid li.product .onsale {
top: 7px !important;
left: 7px !important;
max-width: calc(100% - 14px) !important;
padding: 5px 8px !important;
font-size: 10px !important;
}
.bx-products-grid.bx-view-list ul.products li.product { grid-template-columns: 90px 1fr !important; }
} @media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}