/* =========================================================
   HERO + MOBILE GLOBAL FIX
   Put this file LAST after all CSS files
   ========================================================= */

*{
  box-sizing:border-box;
}

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
}

img,
video,
picture{
  max-width:100%;
}

/* ===== Hero visible + working ===== */
.carousel{
  position:relative !important;
  width:100% !important;
  height:100svh !important;
  min-height:620px !important;
  overflow:hidden !important;
  margin-top:0 !important;
  isolation:isolate !important;
  background:#050505 !important;
}

.carousel .list,
.carousel .list .item{
  width:100% !important;
  height:100% !important;
}

.carousel .list .item{
  position:absolute !important;
  inset:0 !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .55s ease, visibility .55s ease !important;
  z-index:0 !important;
}

.carousel .list .item.active{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  z-index:2 !important;
}

.carousel .slide-media,
.carousel picture,
.carousel picture img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

.carousel-overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
}

.carousel .content{
  z-index:5 !important;
  pointer-events:auto !important;
}

/* Buttons must be clickable */
.btn-carousel,
.carousel .buttons a{
  position:relative !important;
  z-index:20 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  white-space:nowrap !important;
}

/* ===== Mobile layout cleanup ===== */
@media (max-width:768px){
  body{
    font-size:15px !important;
  }

  .carousel{
    height:auto !important;
    min-height:100svh !important;
    margin-top:0 !important;
  }

  .carousel .content{
    top:96px !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
    max-width:none !important;
    padding:16px !important;
    border-radius:22px !important;
    transform:none !important;
  }

  .carousel .content .author{
    font-size:11px !important;
    line-height:1.2 !important;
  }

  .carousel .content .title{
    font-size:clamp(34px,12vw,56px) !important;
    line-height:.95 !important;
    margin:10px 0 !important;
  }

  .carousel .content .topic{
    font-size:clamp(18px,6vw,28px) !important;
    line-height:1.15 !important;
  }

  .carousel .content .des{
    max-width:100% !important;
    font-size:14px !important;
    line-height:1.65 !important;
  }

  .carousel .buttons{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    align-items:center !important;
  }

  .carousel .btn-carousel{
    width:auto !important;
    max-width:100% !important;
    padding:10px 18px !important;
    font-size:13px !important;
    text-align:center !important;
  }

  .btn-carousel span{
    transform:none !important;
  }

  .hero-products-box{
    width:100% !important;
    max-width:100% !important;
    margin-top:14px !important;
    overflow:hidden !important;
  }

  .hero-products-window{
    width:100% !important;
    overflow:hidden !important;
  }

  .hero-mini-card{
    min-width:120px !important;
    max-width:120px !important;
  }

  .hero-mini-card img{
    height:95px !important;
    object-fit:cover !important;
  }

  .categories,
  .products-section,
  .new-arrivals-section,
  .rtx-theme-section,
  .hero-theme-section{
    padding:42px 12px !important;
  }

  .categories-container,
  .products-section .container,
  .container{
    width:100% !important;
    max-width:100% !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .categories-cards,
  .products-grid,
  .new-products-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .category-card,
  .product-card,
  .product-card-arrival,
  .na-card{
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    transform:none !important;
  }

  .category-card img,
  .category-card video,
  .product-card img,
  .product-card-arrival img,
  .na-card img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:320px !important;
    object-fit:cover !important;
  }
}

@media (max-width:480px){
  .carousel .content{
    top:82px !important;
    padding:14px !important;
  }

  .carousel .content .des{
    font-size:13px !important;
  }

  .hero-mini-card{
    min-width:108px !important;
    max-width:108px !important;
  }
}