/* =========================================================
   BLACK STUDIO — HOME PRODUCT SLIDER
   ========================================================= */

.product-section {
  width: 100%;
  margin: 55px 0;
  position: relative;
}

.product-section-header {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.product-section-title {
  margin: 0;
  color: #fff;
  font-size: 30px;
  font-weight: 800;
}

.product-section-subtitle {
  margin: 6px 0 0;
  color: #888;
  font-size: 14px;
}

.product-view-all {
  color: #ff3b30;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.product-slider-wrapper {
  position: relative;
  width: 100%;
  overflow: visible;
}

#hot-products,
#new-products {
  width: 100%;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;

  gap: 14px;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  padding: 4px 2px 14px;

  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;

  scrollbar-width: none;

  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;

  overscroll-behavior-x: contain;

  box-sizing: border-box;

  cursor: grab;
}

#hot-products::-webkit-scrollbar,
#new-products::-webkit-scrollbar {
  display: none;
}

#hot-products.is-dragging,
#new-products.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.home-product-card {
  flex: 0 0 calc(
    (100% - 42px) / 4
  ) !important;

  width: calc(
    (100% - 42px) / 4
  ) !important;

  min-width: 0 !important;
  max-width: none !important;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background: #101010;

  border: 1px solid #292929;
  border-radius: 18px;

  color: #fff;
  text-decoration: none;

  scroll-snap-align: start;

  box-sizing: border-box;

  transition:
    transform .2s ease,
    border-color .2s ease;
}

.home-product-card:hover {
  transform: translateY(-4px);
  border-color: #ff3b30;
}

.home-product-image {
  width: 100%;
  aspect-ratio: 1 / 1;

  display: grid;
  place-items: center;

  background: #151515;

  overflow: hidden;
}

.home-product-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  padding: 14px;

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.home-product-info {
  padding: 14px;
  min-width: 0;
}

.home-product-info h3 {
  margin: 0 0 9px;

  color: #fff;

  font-size: 15px;
  line-height: 1.35;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-product-price {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.home-product-price strong {
  color: #fff;
  font-size: 17px;
}

.home-product-price del {
  color: #777;
  font-size: 12px;
}

.product-slider-btn {
  position: absolute;

  top: 50%;
  transform: translateY(-50%);

  z-index: 20;

  width: 44px;
  height: 44px;

  border-radius: 50%;

  border: 1px solid #444;

  background: rgba(12, 12, 12, .92);

  color: #fff;

  font-size: 31px;
  line-height: 1;

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

  cursor: pointer;

  padding: 0;

  transition:
    background .2s ease,
    opacity .2s ease;
}

.product-slider-btn:hover {
  background: #ff3b30;
}

.product-slider-btn:disabled {
  opacity: .25;
  cursor: default;
}

.product-slider-prev {
  left: -12px;
}

.product-slider-next {
  right: -12px;
}

.products-empty,
.products-error {
  flex: 1 0 100%;
  min-height: 140px;

  display: grid;
  place-items: center;

  color: #888;
}

@media (max-width: 900px) {

  .product-section {
    margin: 45px 0;
  }

  .home-product-card {
    flex-basis: calc(
      (100% - 28px) / 3
    ) !important;

    width: calc(
      (100% - 28px) / 3
    ) !important;
  }

}

@media (max-width: 600px) {

  .product-section {
    margin: 38px 0;
  }

  .product-section-header {
    align-items: center;
    margin-bottom: 18px;
  }

  .product-section-title {
    font-size: 24px;
  }

  .product-section-subtitle {
    font-size: 12px;
  }

  /*
    EXACT MOBILE LAYOUT:
    2 full cards + half of third card.
  */
  #hot-products,
  #new-products {
    gap: 12px;
    padding-left: 2px;
    padding-right: 2px;
  }

  .home-product-card {
    flex: 0 0 calc(
      (100% - 24px) / 2.5
    ) !important;

    width: calc(
      (100% - 24px) / 2.5
    ) !important;

    border-radius: 15px;
  }

  .home-product-image {
    aspect-ratio: 1 / 1;
  }

  .home-product-info {
    padding: 10px;
  }

  .home-product-info h3 {
    font-size: 13px;
  }

  .home-product-price strong {
    font-size: 15px;
  }

  .home-product-price del {
    font-size: 10px;
  }

  .product-slider-btn {
    width: 38px;
    height: 38px;
    font-size: 27px;
  }

  .product-slider-prev {
    left: 2px;
  }

  .product-slider-next {
    right: 2px;
  }
}

@media (max-width: 380px) {

  .home-product-card {
    flex-basis: calc(
      (100% - 24px) / 2.5
    ) !important;

    width: calc(
      (100% - 24px) / 2.5
    ) !important;
  }

}


/* =========================================================
   BLACK STUDIO — FINAL VISIBILITY & MOBILE TOUCH POLISH
   ========================================================= */

#hot-products,
#new-products {
  /* Let the browser decide vertical vs horizontal gesture naturally.
     Horizontal gestures scroll the product rail; vertical gestures
     continue scrolling the page. */
  touch-action: auto;
  overscroll-behavior-x: contain;
}

/* Keep products visually consistent and readable. */
.home-product-card {
  background: #111;
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
}

.home-product-image {
  aspect-ratio: 1 / 0.92;
  background:
    radial-gradient(circle at 50% 40%, #202020 0%, #151515 62%, #101010 100%);
}

.home-product-image img {
  object-fit: contain;
  padding: 12px;
}

.home-product-info {
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home-product-info h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  min-height: 2.7em;
  margin-bottom: 8px;
}

.home-product-price strong {
  font-weight: 800;
}

.home-product-price del {
  color: #8c8c8c;
}

/* Better mobile visibility: 2 full cards + half of the third. */
@media (max-width: 600px) {

  #hot-products,
  #new-products {
    gap: 12px;
    padding: 4px 1px 12px;
    touch-action: auto;
  }

  .home-product-card {
    flex: 0 0 calc((100% - 12px) / 2.5) !important;
    width: calc((100% - 12px) / 2.5) !important;
    border-radius: 14px;
  }

  .home-product-image {
    aspect-ratio: 1 / 0.96;
  }

  .home-product-image img {
    padding: 8px;
  }

  .home-product-info {
    padding: 9px 9px 11px;
    min-height: 72px;
  }

  .home-product-info h3 {
    font-size: 12.5px;
    line-height: 1.3;
    min-height: 2.6em;
  }

  .home-product-price {
    gap: 5px;
  }

  .home-product-price strong {
    font-size: 15px;
  }

  .home-product-price del {
    font-size: 10px;
  }
}

/* Very small screens: keep the same 2.5-card feel. */
@media (max-width: 380px) {
  .home-product-card {
    flex-basis: calc((100% - 12px) / 2.5) !important;
    width: calc((100% - 12px) / 2.5) !important;
  }

  .home-product-info h3 {
    font-size: 12px;
  }
}

/* Make the section header easier to scan on phones. */
@media (max-width: 600px) {
  .product-section-header {
    margin-bottom: 14px;
  }

  .product-section-title {
    font-size: 21px;
    line-height: 1.15;
  }

  .product-section-subtitle {
    font-size: 11px;
    line-height: 1.4;
  }

  .product-view-all {
    font-size: 12px;
  }
}

/* =========================================================
   UNIFIED BLACK STUDIO PRODUCT THEME
   ========================================================= */

.product-card,
.home-product-card {
  background: linear-gradient(145deg,#171717 0%,#0d0d0d 100%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

.product-card:hover,
.home-product-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);
}

/* Product details + related products */
.pd-page{max-width:1200px;margin:0 auto;padding:34px 18px 70px}.back-link{color:#aaa;text-decoration:none;display:inline-block;margin-bottom:20px}.product-details{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:32px;background:#101010;border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:24px}.pd-media{min-height:420px;border-radius:18px;background:#171717;display:grid;place-items:center;overflow:hidden}.pd-media img{width:100%;height:100%;max-height:560px;object-fit:contain;padding:25px}.pd-info{padding:18px 8px}.pd-category{color:#ff625a;font-weight:700;margin-bottom:10px}.pd-info h1{font-size:38px;line-height:1.15;margin:0 0 16px;color:#fff}.pd-price{display:flex;gap:12px;align-items:center;margin-bottom:18px}.pd-price strong{font-size:30px;color:#00e6a0}.pd-price del{color:#777}.pd-info>p{color:#aaa;line-height:1.7}.pd-stock{color:#aaa;margin:18px 0}.pd-buy-row{display:flex;gap:12px;align-items:end;margin:24px 0}.pd-buy-row label{color:#aaa;display:grid;gap:7px}.pd-buy-row input{width:90px;background:#151515;border:1px solid #333;color:#fff;border-radius:10px;padding:12px}.pd-cart-btn,.pd-checkout{border:0;border-radius:12px;padding:13px 18px;background:#ff3b30;color:#fff;font-weight:800;text-decoration:none;cursor:pointer}.pd-checkout{display:inline-block;background:#00a878}.pd-empty{padding:60px;text-align:center;color:#999}.related-products-section{margin-top:36px}.related-products-header{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}.related-products-header h2{color:#fff;margin:0}.related-products-header p{color:#888;margin:6px 0 0}.related-products-header a{color:#ff625a;font-weight:800}.related-products-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.related-product-card{color:#fff;text-decoration:none;background:#111;border:1px solid rgba(255,255,255,.09);border-radius:18px;overflow:hidden}.related-product-image{aspect-ratio:1;background:#171717}.related-product-image img{width:100%;height:100%;object-fit:contain;padding:12px}.related-product-info{padding:12px}.related-product-info>span{color:#888;font-size:12px}.related-product-info h3{margin:5px 0 8px;font-size:14px}.related-product-info strong{color:#00e6a0}.related-product-info del{color:#777;font-size:11px}@media(max-width:700px){.product-details{grid-template-columns:1fr;padding:14px}.pd-media{min-height:300px}.pd-info h1{font-size:28px}.related-products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.related-products-header{align-items:center}.pd-buy-row{flex-wrap:wrap}}
.pd-buy-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid rgba(0,255,190,.35);border-radius:10px;background:#00d99a;color:#04120e;font-weight:800;cursor:pointer;margin-left:8px}.pd-buy-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}


/* BLACK STUDIO — PREMIUM PRODUCT DETAIL POLISH */
.pd-page{padding-top:28px}
.back-link{color:#9ba5a2;transition:color .2s ease,transform .2s ease}.back-link:hover{color:#fff;transform:translateX(-2px)}
.product-details{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(16,22,21,.98),rgba(8,11,11,.98));border-color:rgba(255,255,255,.085);box-shadow:0 24px 70px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.035)}
.product-details::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 10%,rgba(0,230,161,.07),transparent 26%),radial-gradient(circle at 90% 80%,rgba(255,59,48,.07),transparent 30%)}
.pd-media{position:relative;z-index:1;background:linear-gradient(145deg,#141c1a,#090d0c);border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.pd-media img{transition:transform .35s ease;filter:drop-shadow(0 22px 30px rgba(0,0,0,.35))}.pd-media:hover img{transform:scale(1.025)}
.pd-info{position:relative;z-index:1;padding:20px 10px}
.pd-category{display:inline-flex;padding:6px 10px;border:1px solid rgba(0,230,161,.18);border-radius:999px;background:rgba(0,230,161,.055);color:#55e5ba;font-size:12px;letter-spacing:.4px}
.pd-info h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.9px;margin-top:12px}.pd-price strong{font-size:34px}.pd-info>p{font-size:15px;color:#aab2b0;max-width:620px}
.pd-stock{display:inline-flex;padding:7px 11px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);font-size:13px}
.pd-buy-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:28px}
.pd-qty-wrap{display:grid;gap:7px}.pd-qty-label{color:#9ba5a2;font-size:12px;font-weight:700}.pd-qty-stepper{display:flex;align-items:center;height:48px;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:#0b0f0e;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.pd-qty-stepper button{width:46px;height:100%;border:0;background:transparent;color:#fff;font-size:25px;font-weight:500;cursor:pointer;transition:background .18s ease,color .18s ease}.pd-qty-stepper button:hover{background:rgba(0,230,161,.11);color:#00e6a1}.pd-qty-stepper input{width:50px;height:100%;border:0;border-left:1px solid rgba(255,255,255,.07);border-right:1px solid rgba(255,255,255,.07);border-radius:0;background:transparent;color:#fff;text-align:center;font-size:16px;font-weight:800;outline:none}.pd-qty-stepper input::-webkit-outer-spin-button,.pd-qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.pd-qty-stepper input{appearance:textfield}
.pd-cart-btn,.pd-buy-btn{min-height:48px;padding:0 18px;border-radius:14px;box-shadow:0 10px 25px rgba(0,0,0,.22);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}.pd-cart-btn{background:linear-gradient(135deg,#ff4036,#ff5a4f);border:1px solid rgba(255,255,255,.10)}.pd-buy-btn{background:linear-gradient(135deg,#00d99a,#00b985);border:1px solid rgba(0,255,190,.25);color:#03110d}.pd-cart-btn:hover,.pd-buy-btn:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 15px 30px rgba(0,0,0,.30)}.pd-checkout{margin-top:2px;background:rgba(0,230,161,.08);border:1px solid rgba(0,230,161,.16);color:#62e9c2;transition:background .2s ease,color .2s ease}.pd-checkout:hover{background:rgba(0,230,161,.15);color:#fff}
.related-products-section{padding-top:8px}.related-products-header{padding:0 2px}.related-products-header a{display:inline-flex;align-items:center;gap:6px}.related-product-card{background:linear-gradient(145deg,#111816,#0a0e0d);border-color:rgba(255,255,255,.07);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.related-product-card:hover{transform:translateY(-4px);border-color:rgba(0,230,161,.22);box-shadow:0 16px 34px rgba(0,0,0,.28)}.related-product-image{background:linear-gradient(145deg,#18201e,#0c1110)}
@media(max-width:700px){.pd-page{padding:22px 12px 55px}.product-details{border-radius:20px}.pd-media{min-height:290px}.pd-media img{padding:18px}.pd-info{padding:16px 5px}.pd-buy-row{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}.pd-qty-wrap{grid-column:1/-1}.pd-cart-btn,.pd-buy-btn{width:100%;margin:0}.related-products-grid{gap:12px}.related-product-card{border-radius:16px}}


/* FINAL ADVANCED QUANTITY STEPPER */
.pd-qty-stepper{height:54px !important;min-width:166px !important;padding:5px !important;gap:4px !important;border-radius:17px !important;background:linear-gradient(145deg,#111816,#080c0b) !important;border:1px solid rgba(0,230,161,.16) !important;box-shadow:0 12px 30px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.045) !important}
.pd-qty-stepper button{width:43px !important;height:43px !important;flex:0 0 43px !important;border:1px solid rgba(255,255,255,.07) !important;border-radius:12px !important;background:rgba(255,255,255,.035) !important;color:#eaf2ef !important;font-size:22px !important;line-height:1 !important;font-weight:700 !important;display:grid !important;place-items:center !important;transition:background .14s ease,color .14s ease,border-color .14s ease,transform .14s ease !important}
.pd-qty-stepper button:hover{background:rgba(0,230,161,.12) !important;color:#00e6a1 !important;border-color:rgba(0,230,161,.22) !important;transform:none !important}
.pd-qty-stepper button:active{transform:scale(.94) !important}
.pd-qty-stepper input{width:64px !important;height:43px !important;flex:1 1 auto !important;border:0 !important;background:transparent !important;color:#fff !important;font-size:18px !important;font-weight:900 !important;letter-spacing:.2px !important}
.pd-qty-label{font-size:11px !important;letter-spacing:.08em !important;text-transform:uppercase !important;color:#7f8a86 !important}
@media(max-width:700px){.pd-qty-stepper{width:100%;height:56px !important}.pd-qty-stepper button{width:45px !important;flex-basis:45px !important;height:44px !important}.pd-qty-stepper input{font-size:18px !important}}