/* Minification failed. Returning unminified contents.
(25,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(30,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(33,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(69,20): run-time error CSS1039: Token not allowed after unary operator: '-card'
(70,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(71,23): run-time error CSS1039: Token not allowed after unary operator: '-radius'
(72,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow'
(127,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(167,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(175,14): run-time error CSS1039: Token not allowed after unary operator: '-star'
(302,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(341,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
 */
.product-carousel {
    padding-bottom: 2.5rem;
    border-top: solid 1px #eee;
    margin-top: 5rem;
    background: #3b3d45;
    overflow: hidden;
}
  .wrap {
  max-width: 1280px;
  margin: 32px auto 80px;
  padding: 0 16px;
}
.products-slider{
  position: relative;
}
.slider-title,
.products-slider .slider-title {
  font: 800 clamp(20px, 2.4vw, 30px) / 1.1 system-ui;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}


.products-slider {
  --brand-yellow: #F6D74D;
  --brand-black: #111;
  --text: #222;
  --muted: #6b7280;
  --star: #f5c518;
  --card: #fff;
  --border: #e5e7eb;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --radius: 3px;
  --gap: 18px;

  margin: 1rem 0;
}

.carousel-header{
  margin: 2rem 0;
  margin-left: 56px;
  color: #fff;
}
.product-swiper,
.products-slider .product-swiper {
  position: relative;
  width: 100%;
  padding: 20px 3%;
}

.products-slider .swiper {
  width: 100%;
  overflow: hidden;
}

.products-slider .swiper-wrapper {
  display: flex !important;
  padding: 4px 0 8px;
}

.products-slider .swiper-slide {
  flex: 0 0 auto;
  height: auto;
}


.product-card,
.products-slider .product-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  height: 100%;
}

.product-media {
 /* aspect-ratio: 16 / 6;*/
  margin: 20px 0;
  background: transparent;
  display: grid;
  place-items: center;
  max-width: 100%;
}

.product-media img,
.products-slider .product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
   max-width: 150px;
}

.product-body,
.products-slider .product-body {
  padding: 8px 16px 8px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.sale-pill,
.products-slider .sale-pill {
    background: red;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 0 8px;
    display: block;
    width: 50px;
    text-align: center; 
}

.price-row,
.products-slider .price-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.price-old,
.products-slider .price-old {
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 700;
  font-size: 16px;
}

.price-new,
.products-slider .price-new {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #000;
}

.product-title,
.products-slider .product-title {
      color: #000;
      font-weight: 600;
      text-align: left;
      text-transform: capitalize;
      padding: 0;
      height: 46px;
      line-height: 15px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      margin-top: 0px;
      margin-left: 0;
      padding-right: 10px;
      font-size: 12px;
}


.rating,
.products-slider .rating {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 600;
}

.rating svg,
.products-slider .rating svg {
  width: 16px;
  height: 16px;
  fill: var(--star);
  flex: none;
}

.nav-btn,
.products-slider .nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  cursor: pointer;
  transition: transform 0.15s ease;
  color: #fd741c;
  background: transparent;
  border: none;           
}

.nav-btn:hover { transform: translateY(-50%) scale(1.04); }
.nav-prev { left: 0; }
.nav-next { right: 0; }

.nav-btn svg,
.products-slider .nav-btn svg {
  width: 47px;
  height: 47px;
  fill: currentColor;     
}

.nav-btn:hover { color: #8F98A0; }
.nav-btn:active { color: #6F7780; }


.tss-cat-section { margin: 8px 0 10px; }

.cat-tabs {
  display: flex;
  gap: 40px;
  margin-top: 14px;
  margin-bottom: 14px;
}

.cat-tab {
    font-size: 14px;
    appearance: none;
    background: none;
    border: 0;
    padding:8px 24px;
    cursor: pointer;
    position: relative;
    color:#fff;
    font-weight: 600;
    text-align: left;
    text-transform: capitalize;
 
}
.cat-section {
  margin-left: 56px;
}
.cat-tabs.swiper .swiper-slide{width:auto;margin-right: 11px;border: solid 1px #fd741c;color:#fff;}
.cat-tab.is-active,.cat-tab:hover { 
  color: #fff; 
  border: solid 1px #fd741c;
  background: #fd741c;
}



.is-hidden { display: none !important; }


@media (max-width: 640px) {
  .product-swiper,
  .products-slider .product-swiper {
    padding: 6px 10px;
  }
  .nav-btn,
  .products-slider .nav-btn {
    display: none;
  }
  #mobile-cat-nav{
    position: relative;
  }
  .btn-wrapper-mobile{
    position: absolute;
    top: -48px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  #mobile-cat-nav .nav-btn {
    display: block;
            transform: none;
            position: relative;
  }
  #mobile-cat-nav .nav-btn svg {
 height: 25px;
 width: 25px;
  }
  #mobile-cat-nav .swiper {
    overflow: visible;
  }
  .product-media {
    aspect-ratio: unset;
  }
  .carousel-header{
    margin: 1rem 0 2rem 0;
    margin-left: 12px;
  }
  .cat-tabs {
    margin-left: 12px;
  }
  .cat-section {
    margin-left: 0px;
  }
}


  .products-slider .swiper-wrapper {
    padding: 4px 0 16px;
  }
@media (min-width: 640px) {
   .btn-wrapper-mobile{
        display: none;
  }

/* .desktop-scrollbar { display: none; } */
  .swiper-scrollbar{
    --swiper-scrollbar-size:14px;
  }
  
  .desktop-scrollbar {
    display: block;
    position: static;          
    height: 14px;               
    margin: 10px 3% 0;         
    background: transparent;
    left: 0 !important;

  }


  .desktop-scrollbar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 3%;
    top: 50%;
    height: 1px;
    background: #cfd3d7;       
    transform: translateY(-50%);
    pointer-events: none;
  }

  .desktop-scrollbar .swiper-scrollbar-drag {
    position: relative;
    height: 8px;
    margin-top: 3px;           
    background: #fd741c;       
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
    cursor: grab;
  }
  .desktop-scrollbar .swiper-scrollbar-drag:active { cursor: grabbing; }
}

  .swiper-scrollbar{
    --swiper-scrollbar-size:14px;
  }
  
  .desktop-scrollbar {
    display: block;
    position: static;          
    height: 14px;               
    margin: 10px 3% 0;         
    background: transparent;
    left: 0 !important;

  }
.desktop-scrollbar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 3%;
    top: 50%;
    height: 1px;
    background: #cfd3d7;       
    transform: translateY(-50%);
    pointer-events: none;
  }

  .desktop-scrollbar .swiper-scrollbar-drag {
    position: relative;
    height: 8px;
    margin-top: 3px;           
    background: #fd741c;       
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
    cursor: grab;
  }