/* HappyLHR Homepage Professional Fix V3
   Fixes class collisions where generic .phone/.watch hero objects affected cards/categories.
   Adds cleaner homepage polish without touching backend data.
*/

/* ---------- Hard containment: stop hero objects leaking into lower sections ---------- */
.hero-card,
.hero-visual,
.product-stage{
  isolation:isolate;
}

.hero-card{
  overflow:hidden !important;
}

.hero-visual{
  overflow:hidden !important;
  clip-path:inset(0 round 20px);
}

.product-stage{
  pointer-events:none;
  z-index:1;
}

.hero-copy,
.trust-strip{
  position:relative;
  z-index:3;
}

/* ---------- Reset non-hero elements that accidentally inherit .phone/.watch/.bag styles ---------- */
.cat-art.phone,
.cat-art.watch,
.prod-visual.phone,
.prod-visual.watch,
.auction-img.phone,
.auction-img.watch{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  filter:none !important;
  box-shadow:none !important;
}

.cat-art.phone:before,
.cat-art.phone:after,
.cat-art.watch:before,
.cat-art.watch:after,
.prod-visual.phone:after,
.prod-visual.watch:after,
.auction-img.phone:after,
.auction-img.watch:after{
  content:none !important;
}

/* Rebuild category phone/watch correctly */
.cat-art.phone{
  width:28px !important;
  height:42px !important;
  border-radius:8px !important;
  background:linear-gradient(145deg,#111827,#7c3aed) !important;
}

.cat-art.watch{
  width:34px !important;
  height:42px !important;
  border-radius:15px !important;
  background:#111827 !important;
  border:4px solid #334155 !important;
}

/* Rebuild product card phone/watch correctly */
.prod-visual.phone{
  height:128px !important;
  border-radius:12px !important;
  background:linear-gradient(145deg,#eef4ff,#ffffff) !important;
  overflow:hidden !important;
}

.prod-visual.phone:before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:46px !important;
  height:88px !important;
  border-radius:14px !important;
  background:linear-gradient(145deg,#101827,#8b5cf6) !important;
  box-shadow:0 14px 28px rgba(15,23,42,.18) !important;
}

.prod-visual.watch{
  height:128px !important;
  border-radius:12px !important;
  background:linear-gradient(145deg,#f9fafb,#eef2f7) !important;
  overflow:hidden !important;
}

.prod-visual.watch:before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:54px !important;
  height:64px !important;
  border-radius:22px !important;
  background:#111827 !important;
  box-shadow:0 14px 28px rgba(15,23,42,.18) !important;
}

/* Rebuild auction mini visuals correctly */
.auction-img.phone{
  background:linear-gradient(145deg,#1b2638,#101827) !important;
}

.auction-img.phone:before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:30px !important;
  height:56px !important;
  border-radius:9px !important;
  background:linear-gradient(145deg,#111827,#c084fc) !important;
}

.auction-img.watch{
  background:linear-gradient(145deg,#1b2638,#101827) !important;
}

.auction-img.watch:before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:38px !important;
  height:38px !important;
  border-radius:50% !important;
  border:5px solid #cbd5e1 !important;
  background:#111827 !important;
}

/* Keep hero objects scoped and correct */
.product-stage .phone{
  position:absolute !important;
  width:132px !important;
  height:270px !important;
  right:242px !important;
  bottom:38px !important;
  border-radius:32px !important;
  background:linear-gradient(145deg,#111827,#424b5d) !important;
  filter:drop-shadow(0 22px 28px rgba(15,23,42,.18)) !important;
}

.product-stage .phone:before{
  content:"" !important;
  position:absolute !important;
  top:18px !important;
  left:18px !important;
  width:70px !important;
  height:70px !important;
  border-radius:20px !important;
  background:#0b1220 !important;
  box-shadow:22px 0 0 #0b1220,0 22px 0 #0b1220 !important;
}

.product-stage .watch{
  position:absolute !important;
  right:408px !important;
  bottom:92px !important;
  width:86px !important;
  height:104px !important;
  background:#0b1220 !important;
  border-radius:26px !important;
  border:8px solid #161e2c !important;
  filter:drop-shadow(0 22px 28px rgba(15,23,42,.18)) !important;
}

.product-stage .watch:before,
.product-stage .watch:after{
  content:"" !important;
  position:absolute !important;
  left:25px !important;
  width:22px !important;
  height:82px !important;
  background:#111827 !important;
  border-radius:14px !important;
}

.product-stage .watch:before{top:-84px !important}
.product-stage .watch:after{bottom:-84px !important}

.product-stage .bag{
  position:absolute !important;
  right:72px !important;
  bottom:36px !important;
  width:168px !important;
  height:178px !important;
  border-radius:14px !important;
  background:linear-gradient(135deg,#ff4f0a,#ff7a1a) !important;
  filter:drop-shadow(0 22px 28px rgba(15,23,42,.18)) !important;
}

/* ---------- Modern professional homepage touches ---------- */
body{
  background:#f7f8fb;
}

main{
  background:#f7f8fb;
}

.nav{
  box-shadow:0 12px 34px rgba(3,10,18,.22) !important;
}

.market-tabs .wrap{
  transform:translateY(0);
  background:#fff;
}

.hero{
  padding-top:18px !important;
}

.hero-card{
  border-radius:24px !important;
  border:1px solid #e8edf4 !important;
  box-shadow:0 24px 70px rgba(15,23,42,.10) !important;
  background:
    radial-gradient(circle at 66% 48%,rgba(255,79,10,.20),transparent 0 30%),
    linear-gradient(90deg,#ffffff 0%,#fff9f4 54%,#ffffff 100%) !important;
}

.hero h1{
  color:#101827;
}

.hero h1 span{
  background:linear-gradient(135deg,#ff4f0a,#ff7a1a);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
}

.trust-strip{
  background:rgba(255,255,255,.94) !important;
  backdrop-filter:blur(12px);
}

.trust-item{
  font-size:13px;
  color:#334155;
}

/* Cleaner category cards */
.cat-row{
  gap:12px !important;
}

.cat-card{
  height:104px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#fff,#fafbfc) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.055) !important;
}

.cat-card:hover{
  transform:translateY(-4px);
  border-color:#ffd0bd;
  box-shadow:0 20px 46px rgba(15,23,42,.10) !important;
}

/* Cleaner auction strip */
.auction-strip{
  margin-top:4px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 22px 50px rgba(7,17,28,.26) !important;
}

.auction-card{
  transition:.2s ease;
}

.auction-card:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,#13243a,#0e1b2c) !important;
}

/* Product/deal panels */
.deal-grid{
  align-items:stretch;
}

.panel{
  background:#fff !important;
  border-radius:20px !important;
  box-shadow:0 16px 44px rgba(15,23,42,.08) !important;
}

.retail-products{
  grid-template-columns:repeat(auto-fit,minmax(126px,1fr)) !important;
}

.product-card{
  min-height:220px;
  border-radius:16px !important;
  background:linear-gradient(180deg,#fff,#fbfcfe) !important;
}

.product-card b{
  line-height:1.25;
}

.wholesale{
  background:
    radial-gradient(circle at 86% 34%,rgba(255,79,10,.12),transparent 0 28%),
    linear-gradient(135deg,#fff,#fff7f0) !important;
}

.classified{
  background:
    radial-gradient(circle at 86% 38%,rgba(15,23,42,.08),transparent 0 28%),
    linear-gradient(135deg,#fff,#fbfcfe) !important;
}

/* Seller row */
.seller-row{
  gap:14px !important;
}

.seller-card{
  background:#fff !important;
  border-radius:16px !important;
}

/* Remove ugly fallback overflow artifacts */
body > .phone,
body > .watch,
body > .bag,
body > .headphone{
  display:none !important;
}

/* Mobile polish */
@media(max-width:640px){
  body{
    background:#f7f8fb;
  }

  .hero-card{
    border-radius:22px !important;
  }

  .hero-visual{
    height:220px !important;
  }

  .product-stage{
    transform:scale(.62) !important;
    right:-86px !important;
    bottom:-14px !important;
  }

  .product-stage .phone{
    right:242px !important;
    bottom:38px !important;
  }

  .cat-row{
    display:flex !important;
    overflow:auto !important;
    padding-bottom:6px;
  }

  .cat-card{
    min-width:128px !important;
  }

  .auction-strip{
    border-radius:20px !important;
  }

  .retail-products{
    grid-template-columns:repeat(2,1fr) !important;
  }

  .panel{
    border-radius:20px !important;
  }
}