@charset "UTF-8";

:root{
	--border-primary-active-1px: 1px solid rgba(var(--primary-color-rgb),0.9);
	--color-blue: #3367b1;
	--color-blue-hover: #2b5999;
	--color-yellow: #f7c435;
	--color-yellow-hover: #f8cf5d;
	--color-yellow-border: #f6bd1c;
	--color-gray: #f0f1f2;
	--color-gray-hover: #ebebeb;
	--footer-padding: 16px;
}

.search-core,.select-shell,.search-btn{height: 45px}
.search-combo {
	display: flex;
	align-items: stretch;
	gap: 0;
}
.search-core{
	display:flex;
	align-items:stretch;
	flex:1 1 auto;
	min-width:0;
	overflow:hidden;
	border-radius:20px
}
@supports (selector(:has(*))) {
  .search-core:has(.search-input:focus){
    box-shadow:0 0 0 .2rem rgba(13,110,253,.15);
  }
}
.select-shell{
	position:relative;
	display:inline-flex;
	align-items:center;
	background:#f1f2f0;
	border:0;
	border-right:1px solid #ced4da;
	border-radius:0;
	padding: 0 2.25rem 0 1rem;
	box-sizing:border-box;
	height:45px;
	flex:0 1 auto;
	width:max-content;
	max-width:min(33%, 320px);
}
@supports not (width: max-content) {
  .select-shell{width:auto;}
}
@supports (selector(:has(*))) {
  .select-shell:has(#deptSelect:focus){
    box-shadow: inset 0 0 0 2px #86b7fe;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
  }
}
.select-shell.is-select-focus{
	box-shadow: inset 0 0 0 2px #86b7fe;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}
.select-shell:hover{background:#eceeed;}
#deptSelect:focus{outline: none;}
.search-core.is-input-focus{
	box-shadow:0 0 0 .2rem rgba(13,110,253,.15);
}
.select-display {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 100%;
	font-size:var(--medium-font-size);
	line-height: 1;
}
.select-shell::after {
	content: "\25BE"; 
	position: absolute;
	right: .6rem;
	font-size: .9em;
	line-height: 1;
	pointer-events: none;
	color: #6c757d;
}
#deptSelect {
	position: absolute;
	inset: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.search-input{
	flex:1 1 auto;
	min-width:0;
	border:0;
	border-radius:0;
	height:45px;
	font-size:var(--medium-font-size);
}
.search-input:focus{
	outline: none;
	box-shadow: none;
}
.search-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:45px;
	padding:0 18px;
	flex:0 0 auto;
	white-space:nowrap;
	border:0;
	border-radius:0;
	cursor:pointer;
	user-select:none;
	font-size: var(--large-font-size);
	font-weight:600;
	line-height:1;
	color:#fff;
	background: #5488cb;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
	transition: background-color .15s ease, box-shadow .15s ease;
}
.search-btn:hover{background: #4976b1;}
.search-btn:active{
	background: #5488cb;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
}
.search-btn:focus,.search-btn.is-btn-focus{
	outline: none;
	box-shadow: inset 0 0 0 2px #86b7fe;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
}
.search-btn:disabled{
	opacity:.6;
	cursor:not-allowed;
}
@media (forced-colors: active){
	.search-core,.select-shell,.search-btn{forced-color-adjust: auto;}
	.search-btn:focus,.search-btn.is-btn-focus{outline:2px solid Highlight;outline-offset:-2px;box-shadow:none;}
	.select-shell:has(#deptSelect:focus),.select-shell.is-select-focus{outline:2px solid Highlight;outline-offset:-2px;box-shadow:none;}
	.search-core:has(.search-input:focus),.search-core.is-input-focus{outline:2px solid Highlight;outline-offset:2px;box-shadow:none;}
}
.product-card > .product-image.ar-4x3{height:auto;aspect-ratio:4 / 3;}
.product-grid .product-card > .product-image.ar-4x3 img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}
@supports not (aspect-ratio: 1 / 1) {
  .product-card > .product-image.ar-4x3{position:relative;height:auto;}
  .product-card > .product-image.ar-4x3::before{content: "";display:block;padding-top:75%;}
  .product-card > .product-image.ar-4x3 > img {position: absolute;inset: 0;margin: auto;max-height: 100%;width: 100%;height: 100%;object-fit: contain;}
}

.product-card>.product-info{
	justify-content: space-between;
	min-height:0;
	padding:5px 15px 15px;
	flex: 1 1 auto;
}

.stock-indicator-label{
	padding: .3rem .5rem;
    font-size: .8rem;
    display: inline-block;
	margin-bottom:10px;
}
.stock-indicator-label.stock-in{
	background: #e3efe5;
}
.stock-indicator-label.stock-in>i{
	color: #679d6d;
}
.stock-indicator-label>span{
	margin-left:2px;
	font-weight:500;
}
.stock-indicator-label.stock-out{
	padding-left: 0;
	font-style:italic;
	color:#777;
}
.product-number{font-size:var(--small-font-size);color:var(--dark-gray-color);margin-top:5px;line-height:1;}
.product-card>.product-info h2{margin-top:10px}
.product-info-actions>.list-unstyled{margin-bottom:0;}

.round-button {
	display: inline-block;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	vertical-align: middle;
	box-sizing: border-box;
	position: relative;
	text-align: center;
	white-space: nowrap;
	padding: .5rem 1.25rem;
	margin: 0;
	font: inherit;
	font-size: .8rem;
	color: inherit;
	line-height: 1;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	background: none;
	border: 1px solid transparent;
	border-radius: 9999px;
	border-radius: 50vw;
	-webkit-appearance: none;
	appearance: none;
}

.round-button-lg {
	font-size: 1rem;
    padding: .75rem 1.25rem;
}

.w-100{
	width:100%;
}

a.round-button {
	text-decoration: none;
	color:inherit;
}
.round-button:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.round-button:focus:not(:focus-visible) {
	outline: none;
}
.round-button:disabled,
.round-button[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.5;
}
@media (forced-colors: active) {
	.round-button {
		border-color: ButtonText;
  }
	.round-button:focus {
	outline-color: Highlight;
  }
}

.button-blue{
	color: var(--white-color);
	background: var(--color-blue);
	border: 2px solid var(--color-blue);
}
.button-blue:hover{
	background: var(--color-blue-hover);
    border-color: var(--color-blue-hover);
}
.button-yellow{
    border: 2px solid var(--color-yellow);
    border-right: 2px solid var(--color-yellow-border);
    border-bottom: 2px solid var(--color-yellow-border);
    background: var(--color-yellow);
}
.button-yellow:hover{
	background: var(--color-yellow-hover);
    border-color: var(--color-yellow-hover);
}
.button-gray{
    border: 2px solid var(--color-gray);
    border-right: 2px solid var(--color-gray-hover);
    border-bottom: 2px solid var(--color-gray-hover);
    background: var(--color-gray);
}
.button-gray>span{margin-left:5px;}
.button-gray:hover{
	background: var(--color-gray-hover);
	border-color: var(--color-gray-hover);
}
.product-actions{display: flex;gap:8px;margin-top:10px;}
@media (max-width: 399px){
  .product-actions{flex-direction: column;}
}
.button-small,button.see-similar, button.search-quick-view{
	display: inline-flex;
	flex: 1 1 0;
	min-width: 0;
	align-items: center;
	justify-content: center;
	gap: .2rem;
	padding: .35rem .7rem;
    border: 1px solid #ddd;
    border-radius: 50vw;
    margin: 0;
    font-size: var(--small-font-size);
	color:var(--primary-color);
	background:none;
	cursor:pointer;
	text-decoration:none;
}
button.see-similar:hover, button.search-quick-view:hover{
	background:var(--light-gray);
}

.instock{display: inline-block;padding: .25rem .5rem;border: 3px solid #679d6d;border-radius: 1rem;background: #f3f8f4;margin-top:10px;font-size: .8rem;box-shadow: inset 0px 0px 1px rgba(0, 0, 0, .25);}
.instock>.fa-in-stock{color:#679d6d}
.instock>.fa-in-stock::before {text-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 0 0px rgba(0, 0, 0, .5);}
.instock>span{color:#213423;font-weight:500;}

.product-card.skeleton{border-color:var(--light-gray);pointer-events:none;user-select:none;}
.product-card.skeleton .product-info{min-height:120px;}
.skel-surface {
  position: relative;
  background: rgba(var(--light-gray-rgb), 0.85);
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  overflow: hidden;
}
.product-card.skeleton > .product-info .skel-surface{border-radius:6px;}
.skel-surface::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
	animation: sk-shimmer 1.2s ease-in-out infinite;
}
.skel-price{height:32px;width:150px;margin:10px 0 4px;}
.skel-title{height:14px;width:80%;margin:4px 0 2px;}
.skel-line{width:60%;height:12px;margin:8px 0 12px;}
.skel-img{width:100%;height:100%;}
@keyframes sk-shimmer{100% {transform: translateX(100%);}}
@media (prefers-reduced-motion: reduce) {.skel-surface::after {animation: none;}}
@media (forced-colors: active) {.skel-surface{forced-color-adjust: none;}.skel-surface::after{display:none;}}

.pagination{border-radius: 8px;}
.pagination>li>a, .pagination>li>span, .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {color:var(--primary-color);font-size: var(--medium-font-size);padding: 10px 16px;text-decoration: none;}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{background-color: var(--dark-blue-color);border-color: var(--dark-blue-color);color:var(--white-color);}
.pagination>li:first-child>a, .pagination>li:first-child>span {border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
.pagination>li:last-child>a, .pagination>li:last-child>span {border-top-right-radius: 8px;border-bottom-right-radius: 8px;}

@media (max-width:767px){
	.pagination>li>a, .pagination>li>span, .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {font-size: var(--small-font-size);}
	.pagination span.page-prev-next-text{display:none}
}

.product-header{max-width:1500px;margin:0 auto;padding:15px 0 0;position:relative;}
.product-container{display:flex;width:100%;max-width:1500px;margin:0 auto;align-items:start;gap:15px;position:relative;min-height:1px;padding:30px 0;}
.search-result-container{display: flex;flex-direction:column;gap:15px;flex:1 1 auto;width:100%;overflow:hidden;}
@media (min-width: 992px) and (max-width: 1099px) {
    .search-result-container .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#filterCountBadge{margin-left:.5rem;padding:0 .5rem;min-width:1.5em;height:1.5em;line-height:1.5em;border-radius:999px;font-size:.75em;font-weight:600;background:#d9534f;color:#fff;text-align:center;}
.search-chip-container{display:flex;min-width: 0;}
.search-chip{
	display: flex;
	width:auto;
	max-width: 100%;
	box-sizing: border-box;
	font-size: var(--small-font-size);
	padding-right: 1.25em;
	color: var(--primary-color);
	text-decoration: none;
	background-color: rgba(var(--light-gray-rgb), 0.5);
	border-radius: 50vw;
	height: 3em;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border: var(--border-primary-active-1px);
}
.search-chip>button.search-chip-close{
	flex: 0 0 auto;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.469em 0 0.938em;
	background: none;
	border: 0;
	cursor: pointer;
	font-weight: bold;
	font-size: var(--primary-font-size);
	margin: 0;
	border-top-left-radius: 50vw;
	border-bottom-left-radius: 50vw;
}
.search-chip>span.search-chip-text{
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap; 
}
.search-chip>span.search-chip-text>span.search-chip-text-label{font-weight:500}

button.sidebar-close{display: none}	
.sidebar { 
	/* Base: let Bootstrap Offcanvas control mobile positioning */
	overflow:hidden;
	display:flex;
	flex-direction:column;
}

/* Desktop sidebar layout (md+) */
@media (min-width: 768px){
	.sidebar{
		position: sticky;
		top: 15px !important;
		left: auto !important;
		bottom: auto !important;
		width: 275px !important;
		border-right: none !important;
		max-height:calc(100vh - 30px);
		flex-grow: 0;
		flex-shrink: 0;
		transform:none !important;
		visibility:visible;
		z-index: 2;
	}
}

/* Mobile Offcanvas: full width */
@media (max-width: 767px){
	#filterSidebar.offcanvas{
		--bs-offcanvas-width: 100vw;
	}
}
.sidebar-filter{display:flex;flex-direction:column;flex: 1 1 auto;list-style: none;padding:0;margin:0;width:100%;border:var(--border-gray-1px);border-radius:8px;background-color:var(--white-color);overflow:hidden;overflow-y:auto;}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1;background-color:var(--white-color);}
.sidebar-header h3{font-size:var(--large-font-size);font-weight:500;margin:0;}
.sidebar-filter > li{border-bottom:var(--border-gray-1px);padding:15px;}
.sidebar-filter > li:last-child{border-bottom:none}
.sidebar-filter>li>a {text-decoration:none;display:flex;align-items:center;justify-content:space-between;width:100%;font-weight:600;cursor:pointer;color:var(--primary-color);}
.sidebar-option {list-style:none;overflow:hidden;max-height:0;padding:0;transition:max-height.5s ease;}
.sidebar-option.sidebar-option-open{max-height:300px;overflow-y:auto;transition:max-height .5s ease;}	

a:has(+ .sidebar-option) .fa-angle-right{transition:transform 0.3s ease;}
a:has(+ .sidebar-option.sidebar-option-open) .fa-angle-right{transform:rotate(90deg);}
.sidebar-option>li{margin:4px 0;}
.sidebar-option>li:first-child{margin-top:10px}
.sidebar-option>li>a{color:var(--primary-text);text-decoration:none}	
.sidebar-option a>.fa-regular.fa-square{font-weight:300}

.sidebar-actionbar{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	background: var(--white-color);
	border-top: var(--border-gray-1px);
	box-shadow: 0 -8px 20px rgba(0,0,0,.06);
	padding: var(--footer-padding) var(--footer-padding);
}

.sidebar-actionbar .btn-clear,
.sidebar-actionbar .btn-apply{
	height: 44px;
	border-radius: 999px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sidebar-actionbar .btn-clear{
	background: transparent;
	border: var(--border-gray-1px);
	color: var(--primary-color);
}
.sidebar-actionbar .btn-apply{
	background: var(--dark-blue-color);
	color: var(--white-color);
	border: none;
	font-weight: 600;
}
@media (max-width: 360px){
  .sidebar-actionbar{ grid-template-columns: 1fr; }
}

@media (max-width:767px){
	@supports (height: 100dvh){
		#filterSidebar.offcanvas{ height: 100dvh; }
	}
	.sidebar-option.sidebar-option-open{max-height:200px;}
	#filterSidebar.offcanvas .sidebar-filter{border-radius:0;border:none;overflow-y: auto;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));}
	.sidebar-actionbar{
		position: sticky;
		bottom: 0;
		padding-bottom: calc(var(--footer-padding) + env(safe-area-inset-bottom));
	}
	button.sidebar-close {display:block;background: none;border: none;font-size: var(--xlarge-font-size);cursor: pointer;color: var(--primary-color);line-height:1;padding-right:0;}
	.product-container{flex-direction:column;}
}

@media (min-width: 768px){
  .sidebar-actionbar{ display: none; }
}

/* Prevent any scroll chaining from the drawer to the page */
#filterSidebar.offcanvas,
#filterSidebar.offcanvas .sidebar-filter{
	overscroll-behavior: contain;   /* Safari 16+, Chrome, etc. */
}

/* Applied to <html> and/or <body> when the drawer is open */
.scroll-lock {
	overflow: hidden;   /* desktop browsers */
	height: 100%;
}

/* Make the component a 2-row grid:
   row 1 = the rail (fixed height), row 2 = the price text (auto) */
.price-slider{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 28px auto;
}

/* Put the rail pieces in row 1 and stack them */
.price-slider .track,
.price-slider input[type=range]{
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: center;        /* vertical centering within the rail row */
}

/* Visual bar */
.price-slider .track{
  position: relative;
  height: 6px;
  background: #d8dee4;
  border-radius: 999px;
  z-index: 1;
}
.price-slider .track .fill{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;                   /* set by JS/inline style */
  background: #3367b1;
  border-radius: inherit;
}

/* Range inputs (overlaid on the bar) */
.price-slider input[type=range]{
  position: relative;         /* to allow z-index stacking */
  z-index: 2;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  pointer-events: none;       /* only the thumbs are interactive */
  -webkit-appearance: none;
  appearance: none;
}

/* WebKit/Blink (Chrome/Edge/Safari) */
.price-slider input[type=range]::-webkit-slider-runnable-track{
  height: 100%;
  background: transparent;
}
.price-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2f66ad;
  border: 2px solid #f0f3f7;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  margin-top: 0;              /* perfectly centered—no negative offset */
  pointer-events: auto;
  cursor: pointer;
}

/* Firefox */
.price-slider input[type=range]::-moz-range-track{
  height: 100%;
  background: transparent;
}
.price-slider input[type=range]::-moz-range-thumb{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2f66ad;
  border: 2px solid #f0f3f7;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  pointer-events: auto;
  cursor: pointer;
}

/* Values row (row 2) */
.price-slider .price-values{
  grid-row: 2;
  margin: 0;
  font-weight: 600;
}

/* Optional: ensure the top handle wins hit-testing when overlapped */
#priceMin { z-index: 3; }
#priceMax { z-index: 4; }

@supports not (display: grid){
  .price-slider{
    position: relative;
    padding-top: calc(28px + 8px);   /* rail height + gap */
  }
  .price-slider .track{
    position: absolute; left: 0; right: 0;
    top: 11px;                        /* (28 - 6)/2 */
    height: 6px;
  }
  .price-slider input[type=range]{
    position: absolute; left: 0; right: 0; top: 0;
    height: 28px; background: transparent; margin: 0;
    pointer-events: none; -webkit-appearance: none; appearance: none;
  }
  .price-slider input[type=range]::-webkit-slider-runnable-track{ height:100%; background:transparent; }
  .price-slider input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
    background:#2f66ad; border:2px solid #f0f3f7; box-shadow:0 2px 6px rgba(0,0,0,.2);
    margin-top:0; pointer-events:auto; cursor:pointer;
  }
  .price-slider input[type=range]::-moz-range-track{ height:100%; background:transparent; }
  .price-slider input[type=range]::-moz-range-thumb{
    width:20px; height:20px; border-radius:50%;
    background:#2f66ad; border:2px solid #f0f3f7; box-shadow:0 2px 6px rgba(0,0,0,.2);
    pointer-events:auto; cursor:pointer;
  }
}

.price-chips .chip{display:inline-block;font-size:var(--medium-font-size);color:var(--primary-color); margin:.25rem .5rem .25rem 0; padding:.3rem .6rem; border:var(--border-gray-1px); border-radius:var(--primary-font-size);text-decoration:none;}
.price-chips .chip:hover{background-color:var(--light-gray);}
.price-chips .chip.active,.price-chips .chip.active:hover {
	background-color: var(--dark-blue-color);
    color: var(--white-color);
    border: var(--border-dark-1px);
}

.advantage-price-dollar{letter-spacing:0;}