/* ============================================================================
   RUHISEN — Homepage refresh (Bewakoof-style clean ecommerce layout)
   Self-contained, homepage-only. Class names match index.php markup.
   Goals: capped centred content, no overflow, no huge empty gaps,
   sharp images with safe aspect ratios, mobile = horizontal scroll / 2-up.
   ========================================================================== */

:root {
  --hp-max: 1440px;
  --hp-pad: clamp(14px, 4vw, 40px);
  --hp-gap: clamp(10px, 1.4vw, 18px);
  --hp-radius: 10px;
}

body { overflow-x: hidden; }

/* Shared centred wrapper for every homepage band -------------------------- */
.home-section-band,
.home-product-container {
  width: 100%;
  max-width: var(--hp-max);
  margin: 0 auto;
  padding: 0 var(--hp-pad);
}

/* ── Section headings ───────────────────────────────────────────────────── */
.home-section-title {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: .03em;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}

.home-section-subtitle {
  margin: 4px 0 18px;
  color: #6b6b6b;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}

/* ── Trending categories ────────────────────────────────────────────────── */
.trend-categories-section {
  background: #fff;
  padding: clamp(28px, 4vw, 56px) 0;
}

.trend-categories-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--hp-gap);
}

.trend-category-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--hp-radius);
  background: #111;
  color: #fff;
  isolation: isolate;
  scroll-snap-align: start;
}

.trend-category-card img,
.home-hero-card img,
.home-feature-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.trend-category-card img { transition: transform .45s ease; }

.trend-category-card:hover img,
.trend-category-card:focus-visible img { transform: scale(1.06); }

.trend-category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.78) 100%);
}

.trend-category-copy {
  position: absolute;
  left: 16px;
  right: 14px;
  bottom: 56px;
  z-index: 2;
}

.trend-category-copy span {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(14px, 1.25vw, 19px);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}

.trend-category-copy i {
  display: block;
  width: 30px;
  height: 3px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--yellow);
}

.trend-category-arrow {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #111;
  font-size: 13px;
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
  transition: transform .2s ease, background .2s ease;
}

.trend-category-card:hover .trend-category-arrow,
.trend-category-card:focus-visible .trend-category-arrow {
  transform: translateX(4px);
  background: var(--yellow);
}

/* ── Hero slider ────────────────────────────────────────────────────────── */
.home-hero-section { background: #fff; padding: 0 0 12px; }

.home-hero-edge {
  width: 100%;
  max-width: var(--hp-max);
  margin: 0 auto;
  padding: 0 var(--hp-pad);
  overflow: hidden;
}

.home-hero-swiper { overflow: hidden; border-radius: var(--hp-radius); }
.home-hero-section .swiper-wrapper { align-items: stretch; }
.home-hero-section .swiper-slide { height: auto; min-height: 0; overflow: visible; }

.home-hero-card {
  position: relative;
  display: block;
  height: clamp(300px, 36vw, 540px);
  overflow: hidden;
  background: #111;
  color: #fff;
  isolation: isolate;
}

.home-hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.06) 30%, rgba(0,0,0,.72) 100%);
}

.home-hero-card img { transition: transform .55s ease; }
.home-hero-card:hover img,
.home-hero-card:focus-visible img { transform: scale(1.04); }

.home-hero-copy {
  position: absolute;
  left: clamp(20px, 4vw, 56px);
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(22px, 4vw, 48px);
  z-index: 2;
  color: #fff;
}

.home-hero-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--yellow);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.home-hero-copy h2 {
  max-width: 92%;
  margin: 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(26px, 3vw, 46px);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.02;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0,0,0,.4);
}

.home-hero-copy p {
  margin: 10px 0 0;
  max-width: 80%;
  color: rgba(255,255,255,.88);
  font-size: 14px;
  line-height: 1.45;
}

.home-hero-pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.home-hero-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 !important;
  border-radius: 999px;
  background: #cfcfcf;
  opacity: 1;
  transition: width .25s ease, background .25s ease;
}

.home-hero-pagination .swiper-pagination-bullet-active {
  width: 28px;
  background: #111;
}

/* ── Promo strip ────────────────────────────────────────────────────────── */
.home-promo-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hp-gap);
  max-width: var(--hp-max);
  margin: 0 auto;
  padding: 10px var(--hp-pad);
  background: #fff;
}

.home-promo-item {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: var(--hp-radius);
  background: #111;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}

.home-promo-item strong {
  font-family: var(--font-heading);
  font-size: clamp(16px, 1.8vw, 24px);
  line-height: 1;
}

.home-promo-item span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
}

.home-promo-item-yellow { background: var(--yellow); color: #111; }

/* ── Feature banner ─────────────────────────────────────────────────────── */
.home-feature-banner {
  max-width: var(--hp-max);
  margin: 0 auto;
  padding: 0 var(--hp-pad) 16px;
  background: #fff;
}

.home-feature-card {
  position: relative;
  display: block;
  height: clamp(240px, 30vw, 460px);
  overflow: hidden;
  border-radius: var(--hp-radius);
  background: #111;
  color: #fff;
  isolation: isolate;
}

.home-feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.7), rgba(0,0,0,.2) 60%, rgba(0,0,0,.04));
}

.home-feature-card span {
  position: absolute;
  left: clamp(24px, 7vw, 96px);
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.42);
}

.home-feature-card small {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2.6vw, 38px);
  line-height: .95;
}

.home-feature-card strong {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 116px);
  line-height: .8;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.home-feature-card em {
  margin-top: 14px;
  font-size: clamp(13px, 1.4vw, 18px);
  font-style: normal;
  font-weight: 700;
}

/* ── Product rails ──────────────────────────────────────────────────────────
   Desktop: a real grid so a short list never leaves a huge empty gap.
   Mobile/tablet: horizontal snap scroller (Bewakoof feel).
   The .home-product-rail class is applied to .tab-panel and plain divs.
   ------------------------------------------------------------------------- */
.home-product-section .section-header { margin-bottom: 28px; }

.tab-panel[hidden] { display: none !important; }
.collection-empty {
  grid-column: 1 / -1;
  flex: 1 0 100%;
  padding: 60px 20px;
  text-align: center;
}
.collection-empty i {
  display: block;
  margin-bottom: 14px;
  color: #ddd;
  font-size: 40px;
}
.collection-empty p {
  margin: 0;
  color: #888;
  font-size: 15px;
}

.home-product-rail:not(.tab-panel),
.tab-panel.active.home-product-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--hp-gap);
  overflow: visible;
}

.home-product-rail > .product-card { width: auto; }

/* full-width "empty state" / messages inside a rail */
.home-product-rail > [style*="grid-column"] { grid-column: 1 / -1; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .trend-categories-row { grid-template-columns: repeat(4, 1fr); }
  .home-product-rail:not(.tab-panel),
  .tab-panel.active.home-product-rail { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .home-hero-card { height: clamp(260px, 46vw, 430px); }

  /* Trending categories: 4-column grid on tablet */
  .trend-categories-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow-x: unset;
    overflow-y: unset;
    padding-bottom: 0;
    scroll-snap-type: unset;
    overscroll-behavior-inline: unset;
    -webkit-overflow-scrolling: unset;
    scrollbar-width: unset;
  }
  .trend-categories-row::-webkit-scrollbar { display: revert; }
  .trend-category-card {
    flex: unset;
    min-width: 0;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 768px) {
  .home-section-title { font-size: clamp(18px, 5vw, 24px); }
  .home-section-subtitle { margin-bottom: 14px; }

  .trend-categories-section { padding: 28px 0; }
  /* 2-column grid on mobile — override any flex-basis from above */
  .trend-categories-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .trend-category-card {
    flex-basis: unset;
    aspect-ratio: 1 / 1;
  }

  .home-hero-section { padding: 0 0 12px; }
  .home-hero-edge { padding: 0 12px; }
  .home-hero-card { height: clamp(260px, 64vw, 380px); }
  .home-hero-copy p { font-size: 13px; max-width: 100%; }
  .home-hero-copy h2 { max-width: 100%; }

  .home-promo-strip { grid-template-columns: 1fr; gap: 8px; padding: 8px 12px; }
  .home-promo-item { min-height: 44px; }
  .home-promo-item span { font-size: 11px; }

  .home-feature-banner { padding: 0 12px 12px; }
  .home-feature-card { height: clamp(200px, 56vw, 300px); }

  .home-product-container { padding: 0 12px; }

  /* Products: horizontal snap scroller, ~2.2 cards visible */
  .home-product-rail:not(.tab-panel),
  .tab-panel.active.home-product-rail {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .home-product-rail:not(.tab-panel)::-webkit-scrollbar,
  .tab-panel.active.home-product-rail::-webkit-scrollbar { display: none; }
  .home-product-rail > .product-card {
    flex: 0 0 44vw;
    scroll-snap-align: start;
  }
  .home-product-rail > [style*="grid-column"] { flex: 1 0 100%; }
}

@media (max-width: 480px) {
  /* Keep 2-column grid, tighten gap slightly */
  .trend-categories-row { gap: 8px; }
  .trend-category-card { flex-basis: unset; aspect-ratio: 1 / 1; }
  .home-hero-copy p { display: none; }
  .home-product-rail > .product-card { flex-basis: 56vw; }
}

/* ── QA: reduce mobile scroll fatigue ──────────────────────────────────
   These sections used a fixed 72px desktop padding that was NOT reduced on
   mobile (the trending block sets it via an inline style, so the override
   needs !important). Desktop spacing is unchanged. No layout/JS/hero change. */
@media (max-width: 768px) {
  .trending-section { padding: 36px 0 !important; }
  .combo-section    { padding: 44px 0; }
  .home-product-section .section-header { margin-bottom: 18px; }
  .view-all-wrap    { margin-top: 28px; }
  /* clearer primary CTA tap target on phones */
  .btn-view-all     { padding: 13px 30px; font-size: 13px; }
}