/* =========================================================
   BLACK STUDIO — CATEGORY SLIDER
   Responsive + Smooth + Swipe
   ========================================================= */

#home-categories {
  width: 100%;
  min-width: 0;
  position: relative;
}


/* =========================================================
   SLIDER WRAPPER
   ========================================================= */

.category-slider {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}


/* =========================================================
   VIEWPORT
   ========================================================= */

.category-viewport {
  width: 100%;
  min-width: 0;
  overflow: hidden;

  cursor: grab;

  /* Vertical gestures stay with the document; horizontal gestures are handled
     by the JS axis-lock below. */
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  user-select: none;

  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.category-viewport.is-dragging {
  cursor: grabbing;
}


/* =========================================================
   TRACK
   ========================================================= */

.category-track {
  display: flex;
  align-items: stretch;

  gap: 12px;

  width: max-content;

  transform: translate3d(0, 0, 0);
  will-change: transform;
  /* Native scrolling is intentionally used for touch so it stays fluid. */
  transition: none;
}


/* =========================================================
   CATEGORY CARD
   ========================================================= */

.category-card {
  flex: 0 0 calc(
    (100vw - 120px) / 5
  );

  max-width: 190px;
  min-width: 0;

  display: block;

  text-decoration: none;

  border-radius: 14px;

  overflow: hidden;

  background: var(--card-bg, #111);

  border: 1px solid
    var(--border-color, rgba(255,255,255,.08));

  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;

  -webkit-tap-highlight-color: transparent;
}


.category-card:hover {
  transform: translateY(-3px);

  border-color:
    rgba(255,255,255,.18);

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.18);
}


/* =========================================================
   IMAGE
   ========================================================= */

.category-image-box {
  width: 100%;

  aspect-ratio: 1 / 0.78;

  overflow: hidden;

  background:
    #181818;

  display: flex;
  align-items: center;
  justify-content: center;
}


.category-image {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  pointer-events: none;

  user-select: none;

  transition:
    transform 350ms ease;
}


.category-card:hover
.category-image {
  transform: scale(1.04);
}


/* =========================================================
   CATEGORY NAME
   ========================================================= */

.category-name {
  padding:
    10px 10px 12px;

  font-size: 14px;

  line-height: 1.25;

  font-weight: 600;

  text-align: center;

  color:
    var(--text-primary, #fff);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}


/* =========================================================
   ARROWS
   ========================================================= */

.category-arrow {
  flex: 0 0 38px;

  width: 38px;
  height: 38px;

  border: 0;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    rgba(255,255,255,.08);

  color:
    var(--text-primary, #fff);

  font-size: 26px;

  line-height: 1;

  cursor: pointer;

  z-index: 5;

  transition:
    background 180ms ease,
    transform 180ms ease;
}


.category-arrow:hover {
  background:
    rgba(255,255,255,.16);

  transform: scale(1.06);
}


.category-arrow:active {
  transform: scale(.94);
}


/* =========================================================
   DOTS
   ========================================================= */

.category-dots {
  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 6px;

  margin-top: 12px;
}


.category-dot {
  width: 6px;
  height: 6px;

  padding: 0;

  border: 0;

  border-radius: 50%;

  background:
    rgba(255,255,255,.25);

  cursor: pointer;

  transition:
    width 200ms ease,
    background 200ms ease;
}


.category-dot.active {
  width: 18px;

  border-radius: 10px;

  background:
    currentColor;
}


/* =========================================================
   EMPTY / ERROR / LOADING
   ========================================================= */

.category-loading,
.category-empty,
.category-error {
  width: 100%;

  min-height: 100px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  opacity: .7;

  font-size: 14px;
}


/* =========================================================
   IMAGE ERROR
   ========================================================= */

.category-image-error {
  min-height: 120px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #181818;
}


.category-image-error::after {
  content: "Image unavailable";

  font-size: 12px;

  opacity: .5;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .category-card {
    flex-basis:
      calc(
        (100vw - 100px) / 4
      );

    max-width: none;
  }

}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 700px) {

  .category-slider {
    gap: 6px;
  }


  .category-arrow {
    flex-basis: 32px;

    width: 32px;
    height: 32px;

    font-size: 22px;
  }


  .category-card {
    flex-basis:
      calc(
        (100vw - 88px) / 3
      );

    border-radius: 11px;
  }


  .category-name {
    padding:
      8px 7px 9px;

    font-size: 12px;
  }


  .category-track {
    gap: 9px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .category-slider {
    gap: 5px;
  }


  .category-arrow {
    flex-basis: 28px;

    width: 28px;
    height: 28px;

    font-size: 20px;
  }


  .category-card {
    flex-basis:
      calc(
        (100vw - 70px) / 2
      );

    border-radius: 10px;
  }


  .category-image-box {
    aspect-ratio: 1 / .72;
  }


  .category-name {
    padding:
      7px 6px 8px;

    font-size: 11px;
  }


  .category-track {
    gap: 8px;
  }


  .category-dots {
    margin-top: 9px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

  .category-card {
    flex-basis:
      calc(
        (100vw - 64px) / 2
      );
  }


  .category-arrow {
    flex-basis: 25px;

    width: 25px;
    height: 25px;

    font-size: 18px;
  }

}

/* =========================================================
   BLACK STUDIO — FINAL CATEGORY VISIBILITY POLISH
   ========================================================= */

.category-card {
  background: #111;
  border-color: rgba(255,255,255,.11);
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}

.category-image-box {
  background:
    radial-gradient(circle at 50% 40%, #242424 0%, #181818 65%, #111 100%);
  padding: 8px;
  box-sizing: border-box;
}

.category-image {
  object-fit: contain;
  padding: 2px;
}

.category-name {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 8px 10px;
  color: #fff;
  font-weight: 750;
  line-height: 1.25;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  text-align: center;
}

@media (max-width: 700px) {
  .category-image-box {
    padding: 7px;
  }

  .category-name {
    min-height: 40px;
    padding: 8px 6px 9px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {

  /* About 2.5 category cards visible, matching the product rails. */
  .category-card {
    flex-basis: calc((100% - 16px) / 2.5);
    max-width: none;
  }

  .category-image-box {
    aspect-ratio: 1 / .88;
    padding: 6px;
  }

  .category-name {
    min-height: 42px;
    font-size: 12px;
    font-weight: 750;
  }
}

@media (max-width: 360px) {
  .category-card {
    flex-basis: calc((100% - 16px) / 2.5);
  }
}

/* =========================================================
   UNIFIED BLACK STUDIO CATEGORY THEME
   ========================================================= */

.category-card {
  padding: 6px;
  border-radius: 18px;
  background: linear-gradient(145deg,#191919 0%,#0d0d0d 100%);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

.category-image-box {
  border-radius: 14px;
  background: radial-gradient(circle at 50% 35%,#252525 0%,#151515 45%,#0d0d0d 100%);
}

.category-image {
  object-fit: contain;
  padding: 10px;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.35));
}

.category-name {
  color: #fff;
  font-weight: 750;
}

.category-card:hover {
  border-color: rgba(255,59,48,.62);
  box-shadow: 0 16px 38px rgba(0,0,0,.34),0 0 24px rgba(255,59,48,.14);
}

/* FINAL MOBILE CATEGORY SIZE FIX — keep cards compact so Hot Products stays visible */
@media (max-width: 600px) {
  #home-categories .category-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  #home-categories .category-track {
    width: max-content;
    transform: none !important;
    transition: none !important;
    gap: 10px;
  }

  #home-categories .category-card {
    flex: 0 0 calc((100vw - 92px) / 2.5);
    width: calc((100vw - 92px) / 2.5);
    max-width: none;
    box-sizing: border-box;
  }

  #home-categories .category-image-box {
    aspect-ratio: 1 / .82;
  }
}



/* Explore-category product rail: same touch feel as Hot/New */
.category-products-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-y;
  scroll-behavior: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.category-products-viewport::-webkit-scrollbar { display: none; }
.home-category-products > .home-product-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
}
.category-products-viewport.is-dragging { cursor: grabbing; }