@font-face { font-family: 'Roboto-Regular'; src: url('fonts/roboto/Roboto-Regular.ttf'); font-display: swap; }
@font-face { font-family: 'Roboto-Condensed'; src: url('fonts/roboto/Roboto-Condensed.ttf'); font-display: swap; }
html, body { width: 100%; margin: 0; padding: 0; background: #fcfcfc; font-family: 'Arial', 'Roboto-Regular', sans-serif; }
html, body { width: 100%; max-width: 1500px; margin: 0 auto; }



.page-container { float: left; width: 100%; max-width: 1200px; margin: 0 auto; }
.section { margin-bottom: 10px; }
.section-title { font-size: 32px; color: #333; margin-bottom: 20px; text-align: center; }

/* Category Tabs */
.category-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 0px; width: 100%; box-sizing: border-box; padding: 0 10px; }
.category-tab { box-sizing: border-box; width: calc(25% - 12.5px); padding: 12px 24px; background: #dedede; border: none; border-radius: 10px; font-size: 16px; font-weight: 500; color: #666; cursor: pointer; transition: all 0.3s ease; border: 3px solid #b1eb0000; text-transform: uppercase; font-weight: 600; }
.category-tab:hover { background: #f8f8f8; transform: translateY(-2px); border: 3px solid #b1eb00; }
.category-tab.active { background: #fff; color: #000; border: 3px solid #b1eb00; }
@media (max-width: 768px) { .category-tab { width: calc(25% - 13.333px); font-size: 14px; padding: 10px 16px; } }
@media (max-width: 600px) { .category-tab { width: calc(50% - 15px); font-size: 12px; padding: 8px 12px; } }
@media (max-width: 400px) { .category-tab { width: calc(50% - 20px); font-size: 11px; padding: 6px 10px; } }

/* Carousel Styles */
.carousel-container { width: calc(100% - 40px); position: relative; padding: 0 20px 15px 20px; margin-bottom: 0px; overflow: hidden; }
.carousel-header { text-align: center; margin-bottom: 30px; }

.e h3 { float: left; width: auto; padding: 0 0px; font-size: 1.2em; font-weight: 900; text-transform: uppercase; }
#category-container a.all { float: right; width: auto; height: 30px; margin: 15px 0px 0 15px; padding: 0 8px; line-height: 26px; background: #b1eb00; color: #000; border: 2px solid #b1eb00; border-radius: 5px; text-align: center; font-weight: 600; font-size: 0.9em; box-sizing: border-box; }


.carousel-header p { color: #000; font-size: 16px; }
.carousel-track { display: flex; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; cursor: grab; user-select: none; touch-action: pan-y; }
.carousel-track.dragging { cursor: grabbing; transition: none; }
.carousel-arrow, .sm-ac-prev, .sm-ac-next { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: white; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; z-index: 10; }
.carousel-arrow:hover, .sm-ac-prev:hover, .sm-ac-next:hover { background: #f8f8f8; transform: translateY(-50%) scale(1.1); }
.carousel-arrow:active, .sm-ac-prev:active, .sm-ac-next:active { transform: translateY(-50%) scale(0.95); }
.carousel-arrow.prev, .sm-ac-prev.prev { left: 10px; }
.carousel-arrow.next, .sm-ac-next.next { right: 10px; }
.carousel-arrow svg, .sm-ac-prev svg, .sm-ac-next svg { width: 20px; height: 20px; stroke: #333; stroke-width: 2; fill: none; }



/* Category Carousel Wrapper */
.category-carousel-wrapper { position: relative; }
.category-carousel { display: none; }
.category-carousel.active { display: block; }

/* Product Card Styles - keeping my original design with your critical elements */
.product-card { flex: 0 0 calc(33.333% - 20px); margin: 10px 10px 0 10px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease; cursor: pointer; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); }
.product-card:hover .product-image { transform: scale(1.05); }

.product-link { text-decoration: none; color: inherit; display: block; }

/* Critical element from your CSS - product image sizing */
.product-image { position: relative; width: 100%; min-height: 110px; max-height: 110px; object-fit: scale-down; display: inline-block; bottom: 0; margin: 20px 0 0 0; padding: 0; transition: transform 0.3s ease; }

.product-info { padding: 10px; text-align: center; }

/* Critical element from your CSS - title styling */
.product-title { margin: 5px 0 0 0; text-transform: uppercase; font-size: 0.6em; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.2em; min-height: 3.6em; max-height: 3.6em; text-align: center; }

/* Critical element from your CSS - rating styling */
.product-rating { position: relative; display: inline-block; width: 100%; min-height: 15px; margin: 0 auto; padding: 3px 0; color: #000; font-weight: 900; text-align: center; height: 15px; }
.rating-stars { position: relative; display: inline-block; width: 100%; min-height: 15px; margin: 0 auto; padding: 3px 0; color: #000; font-weight: 900; text-align: center; height: 15px; }
.rating-stars::before { content: "★★★★★"; font-size: 15px; color: transparent; background: linear-gradient(to right, #b1eb00 var(--rating-percentage), #ccc var(--rating-percentage)); -webkit-background-clip: text; background-clip: text; line-height: 1; display: inline-block; width: 75px; margin: 0 auto; }
.rating-stars::after { content: attr(data-reviews) " Reviews"; margin: -3px 0 30px 0; color: #212529; font-size: 0.64em; font-weight: 300; text-transform: none; display: block; text-align: center; }
.r .rating-stars { text-align: center; }
.r .rating-stars::after { display: none; }
.rating-stars[data-rating="0"]::before { --rating-percentage: 0%; }
.rating-stars[data-rating="0.5"]::before { --rating-percentage: 10%; }
.rating-stars[data-rating="1"]::before { --rating-percentage: 20%; }
.rating-stars[data-rating="1.5"]::before { --rating-percentage: 30%; }
.rating-stars[data-rating="2"]::before { --rating-percentage: 40%; }
.rating-stars[data-rating="2.5"]::before { --rating-percentage: 50%; }
.rating-stars[data-rating="3"]::before { --rating-percentage: 60%; }
.rating-stars[data-rating="3.5"]::before { --rating-percentage: 70%; }
.rating-stars[data-rating="4"]::before { --rating-percentage: 80%; }
.rating-stars[data-rating="4.5"]::before { --rating-percentage: 90%; }
.rating-stars[data-rating="5"]::before { --rating-percentage: 100%; }

/* Critical element from your CSS - price styling */
.product-price-sale { display: inline-block; clear: left; margin: 20px 0 0 0; font-size: 0.92em; color: #f00; line-height: 1em; font-weight: 600; text-align: center; }
.product-old-price { text-decoration: line-through; font-size: 0.75em; color: #222; font-weight: 100; text-align: center; }

/* Double Row Carousel */
.carousel-slide { flex: 0 0 calc(33.333% - 20px); margin: 0 10px; display: flex; flex-direction: column; }
.carousel-slide .product-card { flex: 1; margin: 0 0 20px 0; }
.carousel-slide .product-card:last-child { margin-bottom: 0; }


.carousel-slide .product-title { margin-bottom: 6px; }

.carousel-slide .product-old-price { margin-left: 6px; }

@media only screen and (min-width: 1500px) and (max-width: 4000px) {
.product-card { flex: 0 0 calc(16.666% - 20px); margin: 10px; } 
.carousel-slide { flex: 0 0 calc(16.666% - 20px); margin: 10px; }
.product-image { min-height: 180px; max-height: 180px; }
.product-title { margin: 0; font-size: 1em; }
.rating-stars::before { font-size: 20px; width: 100px; margin: 0 auto; }
.rating-stars::after { margin: 0; font-size: 0.9em; }
.product-price-sale { font-size: 1.5em; }
.product-old-price { font-size: 0.9em; }
}
@media only screen and (min-width: 1100px) and (max-width: 1499.99px) {
.product-card { flex: 0 0 calc(20% - 20px); margin: 10px; } 
.carousel-slide { flex: 0 0 calc(20% - 20px); margin: 10px; }
.product-image { min-height: 180px; max-height: 180px; }
.product-title { margin: 0; font-size: 1em; }
.rating-stars::before { font-size: 20px; width: 100px; margin: 0 auto; }
.rating-stars::after { margin: 0; font-size: 0.9em; }
.product-price-sale { font-size: 1.5em; }
.product-old-price { font-size: 0.9em; }
}
@media only screen and (min-width: 850px) and (max-width: 1099.99px) {
.product-card { flex: 0 0 calc(25% - 20px); margin: 10px; } 
.carousel-slide { flex: 0 0 calc(25% - 20px); margin: 10px; }
.product-image { min-height: 170px; max-height: 170px; }
.product-title { margin: 0; font-size: 0.9em; }
.rating-stars::before { font-size: 20px; width: 100px; margin: 0 auto; }
.rating-stars::after { margin: 0; font-size: 0.8em; }
.product-price-sale { font-size: 1.4em; }
.product-old-price { font-size: 0.8em; }
}
@media only screen and (min-width: 650px) and (max-width: 849.99px) {
.product-card { flex: 0 0 calc(33.333% - 20px); margin: 10px; } 
.carousel-slide { flex: 0 0 calc(33.333% - 20px); margin: 10px; }
.product-image { min-height: 160px; max-height: 160px; }
.product-title { margin: 0; font-size: 0.8em; }
.rating-stars::before { font-size: 20px; width: 100px; margin: 0 auto; }
.rating-stars::after { margin: 0; font-size: 0.7em; }
.product-price-sale { font-size: 1.2em; }
.product-old-price { font-size: 0.7em; }
}
@media only screen and (min-width: 500px) and (max-width: 649.99px) {
.product-card { flex: 0 0 calc(33.333% - 20px); margin: 10px; } 
.carousel-slide { flex: 0 0 calc(33.333% - 20px); margin: 10px; }
.product-image { min-height: 150px; max-height: 150px; }
.product-title { margin: 0; font-size: 0.8em; }
.rating-stars::before { font-size: 18px; width: 90px; margin: 0 auto; }
.rating-stars::after { margin: 0; font-size: 0.6em; }
.product-price-sale { font-size: 0.9em; }
.product-old-price { font-size: 0.6em; }
}
@media only screen and (min-width: 350px) and (max-width: 499.99px) {
.product-card { flex: 0 0 calc(50% - 20px); margin: 10px; } 
.carousel-slide { flex: 0 0 calc(50% - 20px); margin: 10px; }
.product-image { min-height: 150px; max-height: 150px; }
.product-title { margin: 0; font-size: 0.8em; }
.rating-stars::before { font-size: 18px; width: 90px; margin: 0 auto; }
.rating-stars::after { margin: 0; font-size: 0.6em; }
.product-price-sale { font-size: 0.9em; }
.product-old-price { font-size: 0.6em; }
}
@media only screen and (min-width: 1px) and (max-width: 349.99px) {
.product-card { flex: 0 0 calc(100% - 20px); margin: 10px; } 
.carousel-slide { flex: 0 0 calc(100% - 20px); margin: 10px; }
.product-image { min-height: 150px; max-height: 150px; }
.product-title { margin: 0; font-size: 0.8em; }
.rating-stars::before { font-size: 18px; width: 90px; margin: 0 auto; }
.rating-stars::after { margin: 0; font-size: 0.6em; }
.product-price-sale { font-size: 0.9em; }
.product-old-price { font-size: 0.6em; }
}










.smwl { fill: #fff; }.smbt { fill: #000; }
.smgl { fill: #b1eb00; }.smwt { fill: #fff; }
/* Neon #b1eb00 | Yellow #c7e52b */


/* Top Bar */
.top { float: left; width: 100%; height: 20px; background: #fff; color: #000; font-size: 0.5em; font-weight: 100; }

/* Menu Container */
.menu { float: left; display: inline-block; width: 100%; margin: 0 auto 10px 0; background: #b1eb00; border-radius: 0 0 30px 30px; }
.menu-wrap { float: left; width: 100%; max-width: 800px; margin: 0 auto; padding: 4% 0 2% 0; }
.search { clear: left; float: left; width: 100%; height: 100%; text-align: center; }

.top-shipping { float: left; width: 48%; margin: 0 0 0 2%; font-size: 1.2em; font-weight: 600; text-transform: uppercase; overflow: hidden; height: 20px; line-height: 20px; position: relative; }
.top-shipping svg, .top-links svg { float: left; width: 16px; margin: 0px 5px 0 0; }
.fact-slider { display: flex; flex-direction: column; line-height: 20px; animation: slide-up 6s infinite; }
.cars-w { stroke: #000; }
.cars-g { stroke: #b1eb00; }
.fact { height: 20px; display: flex; align-items: center; }
@keyframes slide-up {
0%, 45% { transform: translateY(0); }
50%, 95% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
.top-links { float: right; width: 48%; margin: 0 2% 0 0; text-align: right; font-size: 1.2em; text-transform: uppercase; height: 1.5em; }
.top-links a { display: inline-block; margin: 0 0 0 10px; line-height: 20px; color: #000; text-decoration: none; text-transform: uppercase; font-weight: 600; }
.top-rewards svg { margin: 2px 5px 0 0; stroke: #000; }

.menu-wrap img { width: 25px; }
.menu-burger { float: left; width: 6%; margin: 6px 0 6px 5%; }
.menu-logo { float: left; width: 47%; margin: 0 5%; }
.menu-logo img, .menu-logo svg { float: left; width: 100%; height: auto; max-height: 35px; object-fit: scale-down; }
.menu-logo svg { padding: 0; }
.menu-stores { width: 100%; height: 22px; padding: 0; fill: #b1eb00; stroke: #000; }
.mm-size, .menu-locations svg { width: 100%; height: 22px; }
.mm-stores { fill: #b1eb00; stroke: #000; }
.st0{fill:#fff;}
.menu-locations { float: left; width: 30%; margin: 8px 0 0 0; text-align: center; }
.menu-locations a { float: left; display: inline-block; width: 20%; margin: 0 2%; }

.search-wrap { width: 90%; height: auto; margin: 2% auto 2% auto; padding: 0; background: #f2f2f2; font-size: 0.9em; border-radius: 50px; border-top: none; overflow: hidden; }
.search input { float: left; width: calc(85% - 24px); margin: 0; padding: 12px; background: #f2f2f2; font-size: 0.9em; border: none; outline: none; overflow: hidden; }
.search input:focus { border-color: #000; }
.search input::placeholder { color: #888; }
.search-wrap svg { float: right; display: inline-block; width: 20px; margin: 0; padding: 10px; }
.search-wrap, .search input { box-sizing: border-box; }
.mm .search-wrap input { font-size: 12px; }



a { text-decoration: none; text-transform: uppercase; color: #000; }
.a, .b, .c, .d, .e, .f, .g, .h, .i, .j, .k { float: left; clear: both; width: 100%; }
.a { background: #f2f2f2; }
.b { float: left; width: 100%; }
.ba a { padding: 10px; display: inline-block; font-size: 0.8em; font-weight: bold; text-align: center; color: #000; }

/* Mobile Menu */
.mm { position: relative; font-size: 0.8em; }
.mm .mm-content { position: fixed; top: 0; left: -75%; width: 75%; max-width: 800px; height: 100vh; margin: 0 auto; background: #f9f9f9; overflow-y: auto; z-index: 1000; }

.mm input[type="checkbox"] { display: none; }
.mm input[type="checkbox"]:checked ~ .mm-content { left: 0; }
.mm .mm-toggle { position: relative; top: 0; left: 5px; padding: 0; z-index: 1001; cursor: pointer; }
.mm input[type="checkbox"]:checked + .mm-toggle { display: none; }
.mm .close-btn { position: absolute; top: 15px; right: 20px; background: none; color: #000; padding: 5px 10px; cursor: pointer; font-size: 25px; text-align: center; text-decoration: none; z-index: 1002; }
.mm .mm-content > *:not(.close-btn) { margin-top: 0; }
.mm .menu { background: none; }
.mm .top-bar { float: left; position: relative; z-index: 1001; width: 97%; height: auto; margin: 0 0 20px 0; padding: 10px 1.5%; background: #b1eb00; font-size: 1.5em; }

/* Menu Styling with Vertical Lines */
.mm ul { list-style: none; padding: 0; margin: 40px 0 0 0; }
.mm li { position: relative; margin-left: 0; }
.mm li > ul > li { border-left: 3px solid #f2f2f2; }
.mm label, .mm .link a { display: block; padding: 15px 15px 15px 10px; text-decoration: none; color: #000; font-weight: 600; }
.mm li a { color: #000; }

.mm .menu img { width: auto; }
ul svg { float: left; width: 30px; height: 30px; margin: -6px 10px 0 0; padding: 0; fill: #000; }
.mm label:hover, .mm .link a:hover { background: #f2f2f2; }
.mm .mm-toggle:hover { background: none; }
.mm .close-btn:hover { background: none; color: #000; }

/* Submenu Styling */
.mm .submenu { display: none; list-style: none; margin: 0 0 0 15px; padding: 0; }
.mm .dropdown input[type="checkbox"]:checked ~ .submenu { display: block; }
.mm .submenu li { border-left: 3px solid #f2f2f2; }
.mm .submenu .submenu li { border-left: 3px solid #f2f2f2; margin-left: 0; padding: 10px 15px 10px 10px; }
.mm .submenu .submenu label { padding: 0 15px 0 10px; }
.mm .submenu .submenu .submenu li { padding: 10px 15px 10px 10px; }
.mm .dropdown label::after { content: '⌄'; float: right; position: relative; margin: -10px 0 0 0; padding: 0; font-size: 1.7em; line-height: 1em; top: 0; font-weight: 100; }
.mm .dropdown input[type="checkbox"]:checked + label { background: #f2f2f2; color: #000; }
.submenu img { margin: 0 10px 0 0; }

/* Email Link */
.email { background: #b1eb00; }

/* Backdrop */
.mm .backdrop { display: none; position: fixed; top: 0; left: 75%; width: 25%; height: 100vh; background: #000a; z-index: 999; cursor: pointer; }
.mm input[type="checkbox"]:checked ~ .backdrop { display: block; visibility: visible; opacity: 1; }
.mm .backdrop:hover { background: #000a; }

.scrolling-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;position:relative;width:100%;height:68px;margin:0;-ms-overflow-style:none;scrollbar-width:none;background: #b1eb00; }
.scrolling-wrapper::-webkit-scrollbar{display:none;}
.inner-wrapper{display:inline-flex;}
.card{flex: 0 0 auto;width:55px;height:55px;margin: 0 10px 0 0;}
.card a{overflow:hidden;display:inline-block;width:100%;height:100%;margin:0;padding:0;border-radius:50%;}
.card img{width:100%;height:auto;opacity:0.9;}
.lined-circle { border-radius: 50%; background: repeating-linear-gradient( to bottom, #000 0, #000 2px, transparent 2px, transparent 5px ); mask-image: radial-gradient(circle, #000 100%, transparent 100%); -webkit-mask-image: radial-gradient(circle, #000 100%, transparent 100%); }

.d { float: left; width: 100%; overflow: hidden; }
.slider { width: 500%; margin: 0; overflow: hidden; }
.slides { width: 100%; margin: 0; transition: transform 0.5s ease-in-out; }
.slides img { float: left; width: 20%; height: 100%; aspect-ratio: 2/1; display: inline-block; margin: 0; padding: 0; animation: slide 25s infinite; }
@keyframes slide {
0% { transform: translateX(0); }
20% { transform: translateX(0); }
25% { transform: translateX(-100%); }
45% { transform: translateX(-100%); }
50% { transform: translateX(-200%); }
70% { transform: translateX(-200%); }
75% { transform: translateX(-300%); }
95% { transform: translateX(-300%); }
100% { transform: translateX(0); }
}
img.desktop { aspect-ratio: 25/6; display: none; }
.warehouse img.desktop { aspect-ratio: 72/7; }

h2 { font-size: 1em; text-transform: uppercase; font-weight: 900; }

section { float: left; position: relative; width: 100%; height: auto; }
.e { float: left; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }
.ea { float: left; position: relative; width: 96%; height: 100%; margin: 0 2%; }
.e h2 { float: left; width: auto; padding: 0 20px; font-size: 1.2em; font-weight: 900; }
section p { float: left; width: 96%; margin: 0 2% 5% 2%; font-size: 0.75em; }
.ea svg { width: calc(100% - 18px); fill: #000; background: none; padding: 0; border-radius: 5px; }
a.all { float: right; width: auto; height: 30px; margin: 15px 20px 0 15px; padding: 0 8px; line-height: 26px; background: #b1eb00; color: #000; border: 2px solid #b1eb00; border-radius: 5px; text-align: center; font-weight: 600; font-size: 0.67em; box-sizing: border-box; }
.buttons { float: left; position: absolute; display: inline-block; top: 50%; z-index: 100; width: 100%; height: 100%; margin: 0; padding: 0; line-height: 20px; color: #000; text-align: center; font-weight: 900; font-size: 1em; }
.ea button { all: unset; position: absolute; display: inline-block; z-index: 110; top: 48%; width: 30px; height: 30px; margin: 0; padding: 0 8px 5px 8px; line-height: 1em; color: #0005; border-radius: 50%; text-align: center; font-weight: 900; font-size: 1.7em; box-sizing: border-box; outline: none; border: none; background: #fff; box-shadow: 0 0 10px #0005; cursor: pointer;overflow: visible; }
#prev-new, #next-new, #prev-bundles, #next-bundles { top: 50px; }
#next-products, #prev-products { top: 50px; }
.static { overflow: visible; }
button.left { float: left; left: -1.5%; background: linear-gradient(to left, #fff0, #fff); }
button.right { float: right; right: -1.5%; background: linear-gradient(to left, #fff, #fff0); }
article { float: left; position: relative; width: calc(31% - 4px); margin: 1%; border: 2px solid #fff0; transition: opacity 0.3s ease; }
article a { margin: 0; padding: 0; }
article.split { float: left; width: calc(31% - 4px); margin: 1% 0; padding: 0 1.5%; border-image: linear-gradient(to bottom, transparent, #dcdcdc44, transparent) 1; border-width: 2px; border-style: solid; }
article img { float: left; position: relative; width: 100%; min-height: 110px; max-height: 110px; object-fit: scale-down; display: inline-block; bottom: 0; margin: 0; padding: 0; }
section.info { position: relative; display: inline-block; padding: 0; text-align: center; }
article h3 { margin: 5px 0 0 0; text-transform: uppercase; font-size: 0.6em; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.2em; min-height: 3.6em; max-height: 3.6em; }

.rating { position: relative; display: block; width: 100%; min-height: 15px; margin: 0 auto; padding: 3px 0; color: #000; font-weight: 900; text-align: center; height: 15px; }
.rating::before { content: "★★★★★"; font-size: 15px; color: transparent; background: linear-gradient(to right, #b1eb00 var(--rating-percentage), #ccc var(--rating-percentage)); -webkit-background-clip: text; background-clip: text; line-height: 1; display: inline-block; width: 75px; margin: 0 auto; }
.rating::after { content: attr(data-reviews) " Reviews"; margin: -3px 0 30px 0; color: #212529; font-size: 0.64em; font-weight: 300; text-transform: none; display: block; text-align: center; }
.r .rating { text-align: left; }
.r .rating::after { display: none; }
.rating[data-rating="0"]::before { --rating-percentage: 0%; }
.rating[data-rating="0.5"]::before { --rating-percentage: 10%; }
.rating[data-rating="1"]::before { --rating-percentage: 20%; }
.rating[data-rating="1.5"]::before { --rating-percentage: 30%; }
.rating[data-rating="2"]::before { --rating-percentage: 40%; }
.rating[data-rating="2.5"]::before { --rating-percentage: 50%; }
.rating[data-rating="3"]::before { --rating-percentage: 60%; }
.rating[data-rating="3.5"]::before { --rating-percentage: 70%; }
.rating[data-rating="4"]::before { --rating-percentage: 80%; }
.rating[data-rating="4.5"]::before { --rating-percentage: 90%; }
.rating[data-rating="5"]::before { --rating-percentage: 100%; }

.sale, .was { display: inline-block; clear: left; margin: 20px 0 0 0; font-size: 0.92em; color: #f00; line-height: 1em; font-weight: 600; }
.was { text-decoration: line-through; font-size: 0.75em; color: #222; font-weight: 100; }

.landed { margin: 0; background: #efefef; border-radius: 5px; }
.dark { background: #efefef; }
.green { background: #b1eb00; color: #fff; }
.green svg { fill: #b1eb00; }

#payments { float: left; background: #fff; }
.f { float: left; width: 97%; padding: 0 1.5%; background: #f2f2f2; }


.menu-container { display: flex; width: 100%; margin: 0; padding: 0; background: #efefef; justify-content: center; }
.menu-menu { display: flex; flex-wrap: wrap; width: 90%; margin: 0 auto; padding: 0; list-style: none; justify-content: space-between; }
.menu-item { width: 22%; margin: 0 1.5% 10px; padding: 5px 12px; border: 2px solid #b1eb0000; background: #dedede; color: #000; font-size: 0.7em; cursor: pointer; text-transform: uppercase; border-radius: 5px; text-align: center; height: auto; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.menu-active { width: 22%; margin: 0 1.5% 10px; padding: 5px 12px; border: 2px solid #b1eb00; background: #fff; color: #000; font-weight: bold; border-radius: 5px; text-align: center; height: auto; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.menu-btn { display: inline-block; padding: 0; border: none; background: none; color: inherit; font-size: inherit; font-weight: inherit; text-transform: uppercase; cursor: pointer; }
.category-section { display: flex; margin: 0; padding: 0; border: none; align-items: center; justify-content: center; transition: height 0.3s ease; }
.category-description { display: block; margin: 0 0 0 5%; font-size: 0.8em; color: #000; flex-grow: 1; transition: opacity 0.3s ease; text-align: left; text-transform: uppercase; }
.shop-all-btn { float: right; width: auto; height: 30px; margin: 0 20px 0 15px; padding: 0 8px; line-height: 26px; background: #b1eb00; color: #000; border: 2px solid #b1eb00; border-radius: 5px; text-align: center; font-weight: 600; font-size: 0.67em; box-sizing: border-box; white-space: nowrap; }
.product-container { display: block; width: 100%; margin: 0; padding: 0; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; white-space: nowrap; transition: opacity 0.3s ease; }
.product-container::-webkit-scrollbar { display: none; }
.product-menu { display: inline-flex; margin: 0; padding: 0; list-style: none; }
/*
.product-item .sale { display: block; margin: 20px 0 0 0; font-size: 0.85em; font-weight: 600; line-height: 1em; text-align: center; }
.product-item .was { display: block; margin: 20px 0 0 0; font-size: 0.75em; font-weight: 100; line-height: 1em; text-decoration: line-through; text-align: center; }
*/
/*
.product-container .e.joy article { float: left; display: block; width: calc(31% - 4px); margin: 1%; }
.product-container article .rating, .product-container article .sale, .product-container article .was { float: none; display: block; margin: 50px auto; text-align: center; }
.product-container article .was { margin-top: 20px; }
*/
.category-products { display: none; }
.category-products.active { display: block; }

/* CAROUSEL */
.carousel-wrapper { overflow: hidden; position: relative; width: 100%; }
.carousel-track { display: flex; width: 100%; transition: transform 0.5s ease-in-out; }
.e.joy, .e.dark.joy { flex: 0 0 100%; /* Each group takes full width */ display: flex; justify-content: center; }
.left, .right { cursor: pointer; padding: 10px; border: none; background: #333; color: #fff; font-size: 24px; }

.carousel-bundle { flex: 0 0 100%; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px; box-sizing: border-box; }
.carousel-bundle article { flex: 0 0 auto; }


/* SLIDER */
/* base container styles */
#scroller-wrap-2 { width: 100%; overflow: hidden; user-select: none; }
/* scrollers base styles */
#scroller-2 { display: flex; align-items: center; will-change: transform; transform: translate3d(0,0,0); touch-action: pan-y; cursor: grab; }
#scroller-2.dragging { cursor: grabbing; }
/* scroller 2 */
#scroller-wrap-2 { overflow: hidden; width: 100%; padding: 7px 0 14px 0; background: #efefef; user-select: none; }
/* Scroller track */
#scroller-2 { display: flex; align-items: center; will-change: transform; transform: translate3d(0,0,0); touch-action: pan-y; cursor: grab; }
#scroller-2.dragging { cursor: grabbing; }
/* Circle scroller items */
#scroller-wrap-2 .scri { position: relative; display: flex; flex: 0 0 60px; justify-content: center; align-items: center; box-sizing: border-box; width: 60px; height: 60px; margin-right: 12px; margin-top: 6px; padding: 9px 14px; border: 2px solid #fff; border-radius: 50%;box-shadow: 0 0 10px #0005; text-align: center; overflow: hidden; color: #000; font-weight: 600; font-size: 13px; user-select: none; -webkit-user-drag: none; }
#scroller-wrap-2 .scri a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 0; padding: 0; border-radius: 50%; background: #b1eb00; text-align: center; font-size: 0.7em; font-weight: 600; color: inherit; box-sizing: border-box; word-break: break-word; white-space: normal; overflow-wrap: break-word; }
#scroller-wrap-2 .scri.small-text a { font-size: 0.6em; }
#scroller-wrap-2 .scri.clearance-text a { font-size: 0.65em; }
span.smaller-text { float: none; display: inline; font-size: 0.8em; }
#scroller-wrap-2 .scri a.green { background: #b1eb00; color: #000; }


/* WAREHOUSE */
.warehouse { float: left; clear: left; width: 100%; margin: 15px 0 5px 0; padding: 0; overflow: hidden; }
.warehouse img { float: left; display: inline-block; width: 100%; height: auto; aspect-ratio: 36/7; margin: 0; padding: 0; }
.warehouse img.desktop { aspect-ratio: 72/7; }

/* SECTIONS */
#bestseller-container, #new-container, #brands-container, #category-container, #supplementmart-container, #guarnatees, #payments, #sm-about-carousel, #faq { float: left; position: relative; width: 100%; height: auto; padding: 0; overflow: hidden; background: #fff; }
#brands-container, #category-container, #reviews-container, #guarantees, #faq { background: #efefef; }
#brands-container { margin: 5px 0 0 0; }

.p { float: left; position: relative; z-index: 9; width: 94%; height: auto; margin: 0; padding: 1% 3% 0 3%; overflow: hidden; }
.p a { float: left; position: relative; width: calc(28.333% - 6px); height: auto; margin: 0% 2.5% 4.5% 2.5%; padding: 0; overflow: hidden; z-index: 100; background: #fff; border: 3px solid #fff; box-shadow: 1px 1px 5px #0005; border-radius: 5px; }
.p a img { float: left; display: inline-block; width: 90%; height: auto; aspect-ratio: 3/1; object-fit: scale-down; margin: 0; padding: 5%; }


.enchantedGallery { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 0 1% 0; position: relative; z-index: 9; }
.enchantedGallery a { display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(20% - 46px); margin: 10px; padding: 15px 10px; background: #fff; border: 3px solid #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.3); border-radius: 5px; text-align: center; text-decoration: none; color: inherit; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.enchantedGallery a:hover { transform: translateY(-5px); box-shadow: 2px 5px 15px rgba(0,0,0,0.4); }
.enchantedGallery a img { width: 90%; height: auto; aspect-ratio: 3/1; object-fit: contain; margin-bottom: 10px; }
.enchantedGallery a .text { display: block; width: 100%; text-align: center; font-size: 14px; line-height: 1.3; font-weight: 600; color: #333; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 1024px) { .enchantedGallery a { width: calc(25% - 46px); } }
@media (max-width: 768px) { .enchantedGallery a { width: calc(33.333% - 46px); margin: 8px; padding: 12px 8px; } .enchantedGallery a img { margin-bottom: 8px; } .enchantedGallery a .text { font-size: 12px; } }
@media (max-width: 480px) { .enchantedGallery a { width: calc(50% - 46px); margin: 6px; padding: 10px 6px; } .enchantedGallery a img { margin-bottom: 6px; } .enchantedGallery a .text { font-size: 11px; } }




/* LIFESTYLE */
.sr-container { float: left; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; }
.sr-category { position: relative; width: 100%; height: auto; text-align: center; color: #fff; margin: 10px; box-sizing: border-box; flex: 1 1 calc(33.33% - 20px); max-width: calc(33.33% - 20px); aspect-ratio: 3/4; overflow: hidden; border-radius: 15px; }
.sr-category::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0116; z-index: 1; }
.sr-category img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top; }
.sr-title { position: absolute; top: 48%; left: 50%; height: 3em; width: 100%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; font-size: 1.2em; line-height: 1em; font-weight: 900; text-shadow: 0 2px 5px rgba(0,0,0,0.5); z-index: 2; }
.sr-button { position: absolute; top: 62%; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #b1eb00; color: #000; border: none; padding: 10px 20px; font-size: 0.8em; font-weight: bold; border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }

.tree { float: left; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; }
.apple { position: relative; width: 100%; height: auto; text-align: center; color: #fff; margin: 10px; box-sizing: border-box; flex: 1 1 calc(33.33% - 20px); max-width: calc(33.33% - 20px); aspect-ratio: 3/2; overflow: hidden; border-radius: 15px; background: #f00 }
.apple::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0116; z-index: 1; }
.apple img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }



.sr2-container { float: left; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; height: auto; box-sizing: border-box; }
.sr2-category { position: relative; width: 100%; height: 10vh; text-align: center; color: #fff; margin: 10px; box-sizing: border-box; flex: 1 1 calc(50% - 20px); max-width: calc(50% - 20px); overflow: hidden; border-radius: 15px; }
.sr2-category img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sr2-category::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0119; z-index: 1; }
.sr2-title { position: absolute; top: 48%; left: 50%; height: 3em; width: 100%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; font-family: 'Arial'; font-size: 1.2em; line-height: 1em; font-weight: 900; text-shadow: 0 2px 5px rgba(0,0,0,0.5); z-index: 2; }
.sr2-button { position: absolute; top: 63%; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #b1eb00; color: #000; border: none; padding: 5px 10px; font-size: 0.8em; font-weight: bold; border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }

@media only screen and (min-width: 800px) and (max-width: 999px) {
.sr2-category { flex: 1 1 calc(33.33% - 20px); max-width: calc(33.33% - 20px); }
.sr2-title { font-size: 1.1em; }
}

@media only screen and (min-width: 1000px) {
.sr2-category { flex: 1 1 calc(25% - 20px); max-width: calc(25% - 20px); }
.sr2-title { font-size: 1.3em; }
}

@media only screen and (min-width: 1500px) {
.sr2-title { font-size: 1.5em; }
}





/* NAV BUNDLES */
.navbundles { float: left; width: 100%; }
.buried-treasure li .navbundles > a { float: left; width: calc(22% - 6px); height: 160px; margin: 1.5%; padding: 15px 0 0 0; text-align: center; background: #fff; border: 3px solid #fff; box-shadow: 1px 1px 5px #0005; border-radius: 30px; font-size: 1.3em; font-weight: 900; }
.buried-treasure li .navbundles > a img { float: left; position: relative; width: 60%; max-width: 60%; min-height: 110px; max-height: 110px; object-fit: scale-down; display: inline-block; bottom: 0; margin: 10px 20% 0 20%; padding: 0; }





/* STORES */
.stores { float: left; clear: left; width: 100%; margin: 0; padding: 0; overflow: hidden; }
.stores img.mobile { float: left; display: inline-block; width: auto; height: 494px; aspect-ratio: 120/59; margin: 0; padding: 0; }
.stores img.desktop { float: left; display: inline-block; width: auto; height: 494px; aspect-ratio: 1/1; margin: 0; padding: 0; }

/* CATEGORY */
#category-container .e .p a { height: 60px; padding: 0 0 3% 0; border-color: #efefef00; background: #fefefe; text-align: center; font-weight: 600; font-size: 0.6em; }
#category-container .p a img { float: left; display: inline-block; width: 90%; height: auto; aspect-ratio: 3/1; margin: 0; padding: 5%; }

/* BANNER */
.banner { float: left; width: 98%; padding: 0 1%; overflow: hidden; background: #efefef; }
.banner img { float: left; display: inline-block; width: 48%; margin: 0 1%; }


.review-card { flex: 0 0 calc(33.333% - 20px); margin: 10px; background: #fff; border: 3px solid #fff; box-shadow: 0 0 5px 0 #0005; border-radius: 10px; height: auto; padding: 20px 20px 10px 20px; color: #000; box-sizing: border-box; }
.review-card img, .review-card svg { float: right; width: 33%; height: auto; max-height: 60px; object-fit: scale-down; margin: 0 0 10px 2%; padding: 0; }
.review-card svg { fill: #b1eb00; stroke: #b1eb00; }
.review-content { float: none; width: 65%; margin: 0; }
.review-card h4 { clear: none; display: block; width: 100%; height: 1.6em; margin: 0 0 5px 0; padding: 0; text-align: left; text-transform: uppercase; font-size: 0.8em; }
.review-card .rating { position: relative; display: block; width: 100%; min-height: 15px; margin: 0 0 5px 0; padding: 3px 0; color: #000; font-weight: 900; text-align: left; height: 15px; }
.review-card .rating::before { float: left; content: "★★★★★"; font-size: 15px; color: transparent; background: linear-gradient(to right, #b1eb00 var(--rating-percentage), #ccc var(--rating-percentage)); -webkit-background-clip: text; background-clip: text; line-height: 1; display: inline-block; width: 75px; margin: 0; }
.review-card .rating::after { float: left; content: attr(data-reviews) " Reviews"; margin: -3px 0 30px 0; color: #212529; font-size: 0.64em; font-weight: 300; text-transform: none; display: block; text-align: left; }
.review-card .rating[data-rating="0"]::before { --rating-percentage: 0%; }
.review-card .rating[data-rating="0.5"]::before { --rating-percentage: 10%; }
.review-card .rating[data-rating="1"]::before { --rating-percentage: 20%; }
.review-card .rating[data-rating="1.5"]::before { --rating-percentage: 30%; }
.review-card .rating[data-rating="2"]::before { --rating-percentage: 40%; }
.review-card .rating[data-rating="2.5"]::before { --rating-percentage: 50%; }
.review-card .rating[data-rating="3"]::before { --rating-percentage: 60%; }
.review-card .rating[data-rating="3.5"]::before { --rating-percentage: 70%; }
.review-card .rating[data-rating="4"]::before { --rating-percentage: 80%; }
.review-card .rating[data-rating="4.5"]::before { --rating-percentage: 90%; }
.review-card .rating[data-rating="5"]::before { --rating-percentage: 100%; }
.review-card p { clear: none; width: 100%; padding: 0; font-size: .6em; line-height: 1.1em; text-transform: none; }
.review-card h4.reviewperson, .review-card h4.reviewverified { clear: none; display: inline-block; width: 50%; margin: 10px 0 0 0; padding: 0; text-transform: none; font-size: 0.6em; }
.review-card h4.reviewperson { margin: 10px 0; }
.review-card .reviews-stores { fill: #fff; stroke: #b1eb00; }
/* Media queries for review cards */
@media only screen and (min-width: 1500px) and (max-width: 4000px) { .review-card { flex: 0 0 calc(25% - 20px); } .review-card img, .review-card svg { max-height: 90px; } .review-card .rating::before { font-size: 25px; width: 125px; } .review-card .rating::after { font-size: 1em; margin: 0 0 10px 0; } .review-card h4 { font-size: 1.4em; margin: 0 0 15px 0; } .review-card h4.reviewperson, .review-card h4.reviewverified { font-size: 1em; } .review-card p { font-size: 1.1em; } }
@media only screen and (min-width: 1000px) and (max-width: 1499px) { .review-card { flex: 0 0 calc(33.33% - 20px); } .review-card img, .review-card svg { max-height: 80px; } .review-card .rating::before { font-size: 22px; width: 110px; } .review-card .rating::after { font-size: 0.95em; margin: 0 0 10px 0; } .review-card h4 { font-size: 1.3em; margin: 0 0 15px 0; } .review-card h4.reviewperson, .review-card h4.reviewverified { font-size: 0.95em; } .review-card p { font-size: 1em; } }

@media only screen and (min-width: 650px) and (max-width: 999px) { .review-card { flex: 0 0 calc(50% - 20px); } .review-card img, .review-card svg { max-height: 70px; } .review-card .rating::before { font-size: 20px; width: 100px; } .review-card .rating::after { font-size: 0.9em; margin: 0 0 10px 0; } .review-card h4 { font-size: 1.2em; margin: 0 0 12px 0; } .review-card h4.reviewperson, .review-card h4.reviewverified { font-size: 0.9em; } .review-card p { font-size: 0.95em; } }

@media only screen and (min-width: 400px) and (max-width: 649px) { .review-card { flex: 0 0 calc(100% - 20px); } .review-card img, .review-card svg { max-height: 70px; } .review-card .rating::before { font-size: 18px; width: 90px; } .review-card .rating::after { font-size: 0.85em; margin: 0 0 8px 0; } .review-card h4 { font-size: 1.1em; margin: 0 0 10px 0; } .review-card h4.reviewperson, .review-card h4.reviewverified { font-size: 0.85em; } .review-card p { font-size: 0.9em; } }

@media only screen and (min-width: 1px) and (max-width: 399px) { .review-card { flex: 0 0 calc(100% - 20px); } .review-card img, .review-card svg { max-height: 70px; } .review-card .rating::before { font-size: 16px; width: 80px; } .review-card .rating::after { font-size: 0.8em; margin: 0 0 8px 0; } .review-card h4 { font-size: 1em; margin: 0 0 8px 0; } .review-card h4.reviewperson, .review-card h4.reviewverified { font-size: 0.8em; } .review-card p { font-size: 0.85em; } }

/* Review Carousel Container - Fixed containment */
.carousel-container[data-products="reviews"] { width: 100%; position: relative; margin: 0 auto; padding: 0 20px 15px 20px; overflow: hidden; box-sizing: border-box; max-width: 1500px; }
.carousel-container[data-products="reviews"] .carousel-track { display: flex; justify-content: flex-start; overflow: visible; width: 100%; box-sizing: border-box; }






/* SIGNUP FORM */
.signup-box { float: left; width: calc(100% - 40px); text-align: center; margin: 0 auto; padding: 20px; background: #b1eb00; }
.signup-box h2 { width: 90%; margin: 0 5% 15px 5%; font-size: 1.2em; color: #000; font-weight: bold; }
.signup-box form { display: flex; flex-direction: column; align-items: center; }
.signup-box input[type="email"], .signup-box select { padding: 10px; width: 100%; max-width: 300px; margin-bottom: 10px; border: 1px solid #fff; background: #fff; color: #000; border-radius: 50px; box-sizing: border-box; }
.signup-box select { width: 70px; margin-right: 10px; padding: 10px; background: #fff; border-radius: 50px 0 0 50px; }
.signup-box .phone-group { display: flex; align-items: center; width: 100%; max-width: 300px; margin-bottom: 10px; }
.signup-box input[type="tel"] { flex: 1; margin: -10px 0 0 0; padding: 11px 10px; border: 1px solid #fff; background: #fff; color: #000; border-radius: 0 50px 50px 0; }
.signup-box button { padding: 10px 20px; background: #b1eb00; color: #000; border: 3px solid #000; border-radius: 50px; cursor: pointer; width: 100%; max-width: 300px; }
.signup-box button:hover { background: #000; color: #fff }
.signup-box p { width: 80%; margin: 10px 10% 0 10%; font-size: 0.6em; color: #555; text-align: center; }
.signup-box p a { color: #555; text-transform: lowercase; text-decoration: underline; }

.signup-box input[type="email"], .signup-box input[type="tel"], .signup-box select { font-size: 16px; } /*prevents iphone zoom*/
.signup-box input[type="email"]:focus, .signup-box input[type="tel"]:focus, .signup-box select:focus { outline: none; }


/* ABOUT */
.about-image { float: left; display: none; width: 35%; }
.about-image img { float: left; display: inline-block; width: 100%; margin: 20px; border-radius: 15px 50%; filter: contrast(130%); }
.sm-ac { float: left; position: relative; width: 100%; height: auto; margin: 0; padding: 0; }
.sm-ac svg { width: 54%; margin: 20px 23% 10px 23%; padding: 0; text-align: center; font-size: 1.5em; font-weight: 900; }
.sm-ac-st { width: auto; margin: 0px 0 0 0; padding: 0; text-align: center; font-size: 1em; font-weight: 900; }
.sm-ac-p { width: 80%; margin: 10px 10%; font-size: 0.9em; text-align: center; }

.sm-ac-w { float: left; position: relative; width: 100%; overflow: hidden; }
.sm-ac-i { float: left; display: flex; width: 900%; transition: transform 0.5s ease; }

.sm-ac-item { float: left; width: 100%; padding: 10px; margin: 10px 1.3% 5px 1.3%; box-shadow: 0 0 10px #0005; border-radius: 10px; text-align: center; }

.sm-ac-item h3 { width: 100%; margin: 0; padding: 10px 0; font-size: 1em; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.2em; }
.sm-ac-item h1 { width: 100%; margin: -10px 0 0 0; padding: 0 0 10px 0; font-size: 1em; font-weight: 500;  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.2em; }
.sm-ac-item p { float: left; width: 96%; margin: 0 2% 0 2%; font-size: 0.75em; line-height: 1.5em; font-weight: 100; }
.sm-ac-item a { text-transform: lowercase; text-decoration: underline; font-weight: 500; }

/*.sm-ac-prev, .sm-ac-next { all: unset; position: absolute; display: inline-block; z-index: 110; top: 50px; width: 30px; height: 30px; margin: 0; padding: 0 8px 5px 8px; line-height: 1em; color: #0005; border-radius: 50%; text-align: center; font-weight: 900; font-size: 1.7em; box-sizing: border-box; background: linear-gradient(to left, #fff0, #fff); box-shadow: 0 0 10px #0005; cursor: pointer; overflow: visible; }
.sm-ac-prev { float: left; left: 0.5%; }
.sm-ac-next { float: right; right: 0.5%; background: linear-gradient(to left, #fff, #fff0); }*/
.sm-ac-dots { float: left; width: 100%; margin: 0 0 20px 0; text-align: center; }
.sm-ac-dot { display: inline-block; width: 0.625rem; height: 0.625rem; margin: 0 0.3125rem; background: #bbb; border-radius: 50%; cursor: pointer; }
.sm-ac-dot-a { background: #b1eb00; }

/* FAQ */
.sm-about-faq-item { float: left; display: inline-block; position: relative; width: 86%; margin: 0 8% 2% 8%; border-bottom: 1px solid #0001; }
.sm-about-faq-header { float: left; position: relative; width: 100%; padding: 5px 50px 10px 1px; background: transparent; border: none; text-align: left; font-size: 0.7em; font-weight: 500; cursor: pointer; transition: background 0.3s; text-transform: uppercase; color: #222; }
.sm-about-faq-arrow { position: absolute; right: 0; top: 35%; transform: translateY(-50%); width: 0; height: 0; border-left: 0.375rem solid transparent; border-right: 0.375rem solid transparent; border-top: 0.375rem solid #0005; transition: transform 0.3s; }
.sm-about-faq-header.active .sm-about-faq-arrow { transform: translateY(-50%) rotate(180deg); }
.sm-about-faq-content { display: none; padding: 1rem; }
.sm-about-faq-content-active { display: block; }
.sm-about-faq-item p { float: left; width: auto; margin: 0 0 7px 5px; padding: 0 10px; border-left: 1px solid #0001; color: #333; line-height: 1.3em; }
.sm-about-faq-item p a { text-decoration: underline; text-transform: lowercase; }
@media (min-width: 768px) { .sm-about-faq-item { width: 42%; margin: 0 3% 2% 3%; } }


/* GUARANTEES */
#guarantees { float: left; padding: 0; }
.guarantee svg { width: 30%; height: auto; max-height: 30px; object-fit: scale-down; margin: 5px 0 0 0; padding: 0; }
.guarantee h4 { margin: 0 0 5px 0; font-size: 0.7em; }
.guarantee p { font-size: 0.6em; }

/* PAYMENTS */
#payments svg { float: left; display: inline-block; width: 14.28%; height: auto; aspect-ratio: 2/1; margin: 0; padding: 2% 0; }

/* FOOTER */
.footer { float: left; width: 100%; padding: 0; background: #333; font-weight: 500; }
.footerwrap { float: left; width: 96%; padding: 0 2%; }

.fll, .flg { float: left; display: inline-block; width: 100%; }
.fll { float: left; margin: 0; }
.fll h3 { float: left; width: 100%; margin: 30px 0 1% 0; padding: 0; font-weight: 600; font-size: 1.1em; line-height: 1.1em; color: #dedede; text-transform: uppercase; text-align: center; }
.fll a, .flm a, .frm a, .frr a { display: inline-block; width: 98%; margin: 0%; padding: 4% 0; font-weight: 100; font-size: 0.7em; text-transform: capitalize; color: #cdcdcd; text-align: center; }
.fll svg { width: 80%; padding: 25px 10% 0 10%; }
.fll img { width: 10%; fill: #fff; }

.flm, .frm, .frr { float: left; display: inline-block; width: 50%; height: auto; margin: 0 0 20px 0; padding: 0; }
.flm svg { float: left; position: relative; top: 40%; }
.flm h3 { float: left; width: 100%; margin: 30px 0 1% 0; padding: 0 0 10px 0; font-weight: 600; font-size: 1.1em; line-height: 1.1em; color: #dedede; text-transform: uppercase; text-align: center; }
.flm p { float: left; width: 90%; margin: 20px 5% 0 5%; padding: 0; font-weight: 600; font-size: 0.7em; line-height: 2em; color: #dedede; text-transform: none; text-align: center; }

.fllreview { float: left; width: 90%; margin: 20px 5% 0 5%; }
.fllreview span { float: left; width: auto; margin: 0; padding: 20px 15px 0 0; font-size: 3.2em; font-weight: 600; text-align: right; color: #dedede; }
.fllreview svg { float: left; width: 25px; margin: 30px 0 0 0; padding: 0; fill: #b1eb00; }
.fllreview p { float: left; width: 50%; margin: 0; padding: 0; font-size: 0.8em; font-weight: 600; color: #fff; }

.fcust { float: left; width: 100%; margin: 10px 0 0 0; text-align: center; }
.fllcustomer { width: 100%; margin: 0; padding: 0; color: #fff; text-align: center; }
.fllcustomer svg { display: inline-block; width: 23px; margin: 10px 5px 0 5px; padding: 0; vertical-align: middle; fill: #b1eb00; }
.fllcustomer span { display: inline-block; width: auto; font-size: 1.0em; line-height: 1.2em; vertical-align: middle; }
.fllcustomer a { display: inline-block; width: auto; margin: 1% 0; text-transform: lowercase; font-weight: 600; font-size: 1.0em; color: #fff; vertical-align: middle; }
a.fllemail { font-size: 0.8em; }

.fllsocials { float: left; width: 100%; margin: 20px 0 0 0; text-align: center; }
.fllsocials h3 { width: 100%; margin: 0; padding: 20px 0 0 0; }
.fllsocials a { float: none; clear: none; display: inline-block; width: 8%; margin: 12px 1% 0 1%; }
.fllsocials svg { width: 60%; margin: 0; padding: 20%; fill: #000; border-radius: 50%; background: #b1eb00; }


.frr { margin: 0 0 30px 0; }

.flg a { float: right; margin: 0 25px 10px 10px; padding: 10px; border-radius: 7px; background: #b1eb00; color: #000; font-size: 0.8em; }

.footerwrapbot { float: left; width: 100%; padding: 10px 0; background: #333; color: #fff; text-align: center; font-size: 0.7em; }

.e, .fcust, .fllsocials, .flm, .footerwrapbot { border-image: linear-gradient(to right, transparent, #dcdcdc44, transparent) 1; border-width: 2px; border-style: solid; border-right: none; border-bottom: none; border-left: none; }

.joy { padding: 0; border-top: none; }

h2, .buttons, .ea button, section.image .button, h3, .rating, .was, .sale, .menu-btn, #scroller-wrap-2 .scri a, .desktop-nav { font-family: 'Roboto-Regular'; }
.scr .scri, .r h4, #supplementmart-container h1, .guarantee h4, .sub, .fll h3, .flm h3, .frm h3, .frr h3, .flg a, .buried-treasure li .navbundles > a { font-family: 'Roboto-Condensed'; }
.top-shipping, .top-links a { font-family: 'Arial'; }




@media only screen and (min-width: 800px) and (max-width: 4000px) {

.top-links { float: right; width: 48%; margin: 0 2% 0 0; text-align: right; font-size: 1.2em; text-transform: uppercase; height: 1.5em; }
.top-links a { display: inline-block; margin: 0 0 0 10px; line-height: 20px; color: #000; text-decoration: none; text-transform: uppercase; font-weight: 600; }
.top-rewards svg { margin: 2px 5px 0 0; stroke: #000; }

.mm { display: none; }

.menu { float: left; display: inline-block; width: 100%; margin: 0 auto; background: #b1eb00; border-radius: 0 0 30px 30px; }
.menu-wrap { float: left; width: 100%; max-width: 1920px; margin: 0 auto; padding: 1% 0 2% 0; }
.search { clear: none; float: left; width: 37%; height: 100%; margin: 0 0 0 5%; }

.mm-size, .menu-locations svg { width: 100%; height: 42px; }
.mm-toggle { margin-top: 10px; }
.menu-wrap img { width: 25px; }
.menu-burger { float: left; width: 0%; margin: 6px 0; }
.menu-logo { float: left; width: 22%; margin: 0 0 0 4%; }
.menu-logo svg { width: 100%; height: auto; max-height: 70px; object-fit: scale-down; }
.menu-stores { width: 100%; height: 22px; padding: 0; fill: #b1eb00; stroke: #000; }
.bottom-stores { fill: #b1eb0000; stroke: #b1eb00; }
.menu-locations { float: right; right: 0; width: auto; margin: 15px 0 0 0; text-align: right; }
.menu-locations a { float: none; text-align: right; display: inline-block; width: 15%; margin: 0 15% 0 0; }

.search-wrap { clear: none; float: left; width: 100%; height: auto; margin: 15px auto; padding: 0; background: #f2f2f2; font-size: 0.9em; border-radius: 50px; border-top: none; overflow: hidden; }
.search input { float: left; width: calc(85% - 24px); margin: 0; padding: 12px; font-size: 0.9em; border: none; outline: none; overflow: hidden; }
.search-wrap svg { float: right; display: inline-block; width: 20px; margin: 0; padding: 10px; }


#scroller-wrap-2 { overflow: hidden; width: 100%; padding: 7px 0 14px 0; user-select: none; }
/* Scroller track */
#scroller-2 { display: flex; align-items: center; will-change: transform; transform: translate3d(0,0,0); touch-action: pan-y; cursor: grab; }
#scroller-2.dragging { cursor: grabbing; }
/* Circle scroller items */
#scroller-wrap-2 .scri { position: relative; display: flex; flex: 0 0 100px; justify-content: center; align-items: center; box-sizing: border-box; width: 100px; height: 100px; margin-right: 12px; margin-top: 6px; padding: 9px 14px; border: 2px solid #fff; border-radius: 50%;box-shadow: 0 0 10px #0005; text-align: center; overflow: hidden; color: #000; font-weight: 500; font-size: 23px; user-select: none; -webkit-user-drag: none; }
#scroller-wrap-2 .scri a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 0; padding: 0; border-radius: 50%; background: #b1eb00; text-align: center; font-size: 0.7em; font-weight: 600; color: inherit; box-sizing: border-box; word-break: break-word; white-space: normal; overflow-wrap: break-word; }
#scroller-wrap-2 .scri.small-text a { font-size: 0.6em; }
#scroller-wrap-2 .scri.clearance-text a { font-size: 0.65em; }
span.smaller-text { float: none; display: inline; font-size: 0.8em; }
#scroller-wrap-2 .scri a.green { background: #b1eb00; color: #000; }



/* BANNERS */
img.mobile { display: none; }
img.desktop { display: block; }

/* BEST SELLERS - image size */
article img { width: 100%; min-height: 210px; max-height: 210px; }

/* BRANDS */
.p { float: left; position: relative; z-index: 9; width: 94%; height: auto; margin: 0; padding: 1% 3% 0 3%; overflow: hidden; }
.p a { float: left; position: relative; width: calc(17.5% - 6px); height: auto; margin: 0% 1.25% 2% 1.25%; padding: 0; overflow: hidden; z-index: 100; background: #fff; border: 3px solid #fff; box-shadow: 1px 1px 5px #0005; border-radius: 5px; }
.p a img { float: left; display: inline-block; width: 90%; height: auto; aspect-ratio: 3/1; object-fit: scale-down; margin: 0; padding: 5%; }
}


@media only screen and (min-width: 1500px) and (max-width: 4000px) {	
.top { height: 30px; line-height: 30px; font-size: 0.9em; }
.top-shipping { height: 30px; line-height: 30px; }
.fact { height: 30px; }
@keyframes slide-up {
	0%, 45% { transform: translateY(0); }
	50%, 95% { transform: translateY(-30px); }
	100% { transform: translateY(0); }
	}
.top-shipping svg, .top-links svg { width: 20px; }
.top-rewards svg { margin: 0 5px 0 0; }
img.mobile { display: none; }
img.desktop { display: block; }
.e h2 { font-size: 2em; }
a.all { height: 60px; padding: 0 23px; line-height: 56px; font-size: 1.25em; }


.sr-category { flex: 1 1 calc(16.66% - 20px); max-width: calc(16.66% - 20px); }
.sr-title { font-size: 1.4em; }
.sr-button { padding: 10px 5px; font-size: 0.9em; }


.about-image { display: inline-block; }
.sm-ac { float: left; position: relative; width: 40%; height: auto; margin: 70px 0 0 10%; padding: 0; }
.sm-ac svg { width: 56%; margin: 20px 22% 14px 22%; padding: 0; text-align: center; font-size: 1.5em; font-weight: 900; }
.sm-ac-st { font-size: 1.6em; }
.sm-ac-p { font-size: 1.2em; line-height: 1.5em; }

.sm-ac-w { float: left; position: relative; width: 100%; overflow: hidden; }
.sm-ac-i { float: left; display: flex; width: 900%; transition: transform 0.5s ease; }

.sm-ac-item { float: left; width: 100%; padding: 10px; margin: 10px 1.3% 5px 1.3%; box-shadow: 0 0 10px #0005; border-radius: 10px; text-align: center; }

.sm-ac-item h3 { width: 100%; margin: 0; padding: 10px 0; font-size: 1.5em; font-weight: 500;  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.2em; }
.sm-ac-item h1 { width: 100%; margin: -10px 0 0 0; padding: 0 0 10px 0; font-size: 1.5em; font-weight: 500;  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.2em; }
.sm-ac-item p { float: left; width: 96%; margin: 0 2% 0 2%; font-size: 1.1em; line-height: 1.5em; font-weight: 100; }


.sm-about-faq-item { width: 34%; margin: 0 8% 2% 8%; }
.sm-about-faq-header { font-size: 1em; font-weight: 600; }
.sm-about-faq-arrow { position: absolute; right: 0; top: 35%; transform: translateY(-50%); width: 0; height: 0; border-left: 0.375rem solid transparent; border-right: 0.375rem solid transparent; border-top: 0.375rem solid #0005; transition: transform 0.3s; }
.sm-about-faq-header.active .sm-about-faq-arrow { transform: translateY(-50%) rotate(180deg); }
.sm-about-faq-content { display: none; padding: 1rem; }
.sm-about-faq-content-active { display: block; }
.sm-about-faq-item p { font-size: 1em; line-height: 1.5em; }

.guarantee svg { max-height: 80px; }
.guarantee h4 { font-size: 1.2em; }
.guarantee p { font-size: 1.1em; }
#payments svg { height: 50px; }
.flm, .frm, .frr { width: 25%; }
.fll a, .flm a, .frm a, .frr a { font-size: 1em; }
.flm h3 { font-size: 1.3em; }
.flm p { font-size: 1em; }
.fll h3 { font-size: 1.3em; }
.fcust { width: 50%; }
.fllcustomer svg { display: inline-block; width: 50px; margin: 15px 5px 0 5px; }
.fllcustomer a { margin: 0; }
a.fllemail { font-size: 1.2em; }
.fllsocials { width: 50%; }
.fllsocials a { width: 8%; margin: 0 1% 0 1%; }
.fllsocials svg { border-radius: 15px; }
.footerwrapbot { font-size: 1em; }
}

/* next two media queries for about image only */
@media only screen and (min-width: 1250px) and (max-width: 1499.99px) {
.about-image { display: inline-block; }
.about-image { width: 40%; }
.sm-ac { float: left; position: relative; width: 45%; height: auto; margin: 70px 0 0 5%; padding: 0; }
.sm-ac svg { width: 56%; margin: 20px 22% 14px 22%; padding: 0; text-align: center; font-size: 1.5em; font-weight: 900; }
.sm-ac-st { font-size: 1.6em; }
.sm-ac-p { font-size: 1.2em; line-height: 1.5em; }

.sm-ac-w { float: left; position: relative; width: 100%; overflow: hidden; }
.sm-ac-i { float: left; display: flex; width: 900%; transition: transform 0.5s ease; }

.sm-ac-item { float: left; width: 100%; padding: 10px; margin: 10px 1.3% 5px 1.3%; box-shadow: 0 0 10px #0005; border-radius: 10px; text-align: center; }

.sm-ac-item h3 { width: 100%; margin: 0; padding: 10px 0; font-size: 1.5em; font-weight: 500;  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.2em; }
.sm-ac-item h1 { width: 100%; margin: -10px 0 0 0; padding: 0 0 10px 0; font-size: 1.5em; font-weight: 500;  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.2em; }
.sm-ac-item p { float: left; width: 96%; margin: 0 2% 0 2%; font-size: 1.1em; line-height: 1.5em; font-weight: 100; }
}
@media only screen and (min-width: 1000px) and (max-width: 1499.99px) {
.menu-locations { float: right; right: 0; width: 25%; margin: 15px 0 0 0; text-align: right; }
.menu-locations a { float: none; text-align: right; display: inline-block; width: 10%; margin: 0 20% 0 0; }	
img.mobile { display: none; }
img.desktop { display: block; }
.e h2 { font-size: 1.7em; }
a.all { height: 50px; padding: 0 20px; line-height: 46px; font-size: 1.2em; }

.sr-category { flex: 1 1 calc(16.66% - 20px); max-width: calc(16.66% - 20px); }
.sr-title { font-size: 1.2em; }
.sr-button { padding: 10px 5px; font-size: 0.8em; }
}
/* previous two */


@media only screen and (min-width: 1000px) and (max-width: 1249.99px) {
.about-image { display: inline-block; }
.about-image { width: 50%; }
.sm-ac { float: left; position: relative; width: 45%; height: auto; margin: 70px 0 0 2%; padding: 0; }
.sm-ac svg { width: 56%; margin: 20px 22% 14px 22%; padding: 0; text-align: center; font-size: 1.5em; font-weight: 900; }
.sm-ac-st { font-size: 1.6em; }
.sm-ac-p { font-size: 1.2em; line-height: 1.5em; }

.sm-ac-w { float: left; position: relative; width: 100%; overflow: hidden; }
.sm-ac-i { float: left; display: flex; width: 900%; transition: transform 0.5s ease; }

.sm-ac-item { float: left; width: 100%; padding: 10px; margin: 10px 1.3% 5px 1.3%; box-shadow: 0 0 10px #0005; border-radius: 10px; text-align: center; }

.sm-ac-item h3 { width: 100%; margin: 0; padding: 10px 0; font-size: 1.5em; font-weight: 500;  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.2em; }
.sm-ac-item h1 { width: 100%; margin: -10px 0 0 0; padding: 0 0 10px 0; font-size: 1.5em; font-weight: 500;  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.2em; }
.sm-ac-item p { float: left; width: 96%; margin: 0 2% 0 2%; font-size: 1.1em; line-height: 1.5em; font-weight: 100; }
}

@media only screen and (min-width: 1000px) and (max-width: 1499.99px) {
.menu-locations { float: right; right: 0; width: 25%; margin: 15px 0 0 0; text-align: right; }
.menu-locations a { float: none; text-align: right; display: inline-block; width: 10%; margin: 0 20% 0 0; }	
img.mobile { display: none; }
img.desktop { display: block; }
.e h2 { font-size: 1.7em; }
a.all { height: 50px; padding: 0 20px; line-height: 46px; font-size: 1.2em; }

.sr-category { flex: 1 1 calc(16.66% - 20px); max-width: calc(16.66% - 20px); }
.sr-title { font-size: 1.2em; }
.sr-button { padding: 10px 5px; font-size: 0.8em; }

.guarantee svg { max-height: 80px; }
.guarantee h4 { font-size: 1.2em; }
.guarantee p { font-size: 1.1em; }
#payments svg { height: 50px; }
.flm, .frm, .frr { width: 25%; }
.fll a, .flm a, .frm a, .frr a { font-size: 1em; }
.flm h3 { font-size: 1.3em; }
.flm p { font-size: 1em; }
.fll h3 { font-size: 1.3em; }
.fcust { width: 50%; }
.fllcustomer svg { display: inline-block; width: 50px; margin: 15px 5px 0 5px; }
.fllcustomer a { margin: 0; }
a.fllemail { font-size: 1.2em; }
.fllsocials { width: 50%; }
.fllsocials a { width: 8%; margin: 0 1% 0 1%; }
.fllsocials svg { border-radius: 15px; }
.footerwrapbot { font-size: 1em; }
}



@media only screen and (min-width: 800px) and (max-width: 999.99px) {
.menu-locations { float: right; right: 0; width: 25%; margin: 15px 0 0 0; text-align: right; }
.menu-locations a { float: none; text-align: right; display: inline-block; width: 13%; margin: 0 17% 0 0; }	
img.mobile { display: none; }
img.desktop { display: block; }
.e h2 { font-size: 1.5em; }
a.all { height: 40px; padding: 0 18px; line-height: 36px; font-size: 1.1em; }

.sr-category { flex: 1 1 calc(16.66% - 20px); max-width: calc(16.66% - 20px); }
.sr-title { font-size: 1em; }
.sr-button { padding: 10px 5px; font-size: 0.7em; }
}


@media only screen and (min-width: 650px) and (max-width: 799.99px) {
nav { display: none; }
img.desktop { display: none; }
.e h2 { font-size: 1.4em; }
a.all { height: 40px; margin: 12px 20px 0 15px; padding: 0 18px; line-height: 36px; font-size: 1em; }

.sr-category { aspect-ratio: 3/3; }
}


@media only screen and (min-width: 450px) and (max-width: 649.99px) {
nav { display: none; }
img.desktop { display: none; }
.e h2 { font-size: 1.3em; }
a.all { height: 34px; margin: 12px 20px 0 15px; padding: 0 16px; line-height: 32px; font-size: 0.8em; }

.sr-category { flex: 1 1 calc(33.333% - 20px); max-width: calc(33.333% - 20px); }
.sr-title { font-size: 1em; }
.sr-button { padding: 10px 5px; font-size: 0.7em; }
.apple { flex: 1 1 calc(80% - 20px); max-width: calc(50% - 20px); }
.enchantedGallery a { font-size: 0.9em; }
}


@media only screen and (min-width: 300px) and (max-width: 449.99px) {
nav { display: none; }
img.desktop { display: none; }
.e h2 { width: calc(100% - 10px); font-size: 1.1em; padding: 0 5px; text-align: center; }
a.all { width: 50%; height: 28px; margin: -5px 25% 5px 25%; padding: 0; line-height: 24px; font-size: 0.7em; text-align: center; }
.e h3 { width: calc(100% - 10px); margin: 10px 0; font-size: 1em; }
#category-container a.all { width: 50%; margin: 0 25%; padding: 0; font-size: 0.8em; }
.carousel-container { padding: 5px 20px 15px 20px; }

.sr-category { flex: 1 1 calc(50% - 20px); max-width: calc(50% - 20px); aspect-ratio: 3/3; }
.sr-title { font-size: 0.9em; }
.sr-button { padding: 10px 5px; font-size: 0.6em; }
.apple { flex: 1 1 calc(80% - 20px); max-width: calc(80% - 20px); }
.enchantedGallery a { font-size: 0.9em; }
}


@media only screen and (min-width: 1px) and (max-width: 299.99px) {
nav { display: none; }
img.desktop { display: none; }
.e h2 { width: calc(100% - 10px); font-size: 1.1em; padding: 0 5px; text-align: center; }
a.all { width: 50%; height: 28px; margin: -5px 25% 5px 25%; padding: 0; line-height: 24px; font-size: 0.7em; text-align: center; }
.e h3 { width: calc(100% - 10px); margin: 10px 0; font-size: 1em; }
#category-container a.all { width: 50%; margin: 0 25%; padding: 0; font-size: 0.8em; }
.carousel-container { padding: 5px 20px 15px 20px; }

.sr-category { flex: 1 1 calc(50% - 20px); max-width: calc(50% - 20px); }
.sr-title { font-size: 0.9em; }
.sr-button { padding: 10px 5px; font-size: 0.6em; }
.apple { flex: 1 1 calc(94% - 20px); max-width: calc(94% - 20px); }
.enchantedGallery a { font-size: 0.7em; }
}