:root{
  --bg:#0b0b0b; --bg2:#111; --card:#171717; --text:#fff;
  --muted:rgba(255,255,255,.72); --brand:#ff6a00; --stroke:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Arial;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--stroke)}
.header__wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.logo{font-weight:900;letter-spacing:.6px}
.logo span{color:var(--brand)}
.menu{display:flex;gap:10px;flex-wrap:wrap}
.menu__link{padding:10px 12px;border-radius:12px;border:1px solid transparent;color:rgba(255,255,255,.86);transition:.2s}
.menu__link:hover{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04)}

.hero{border-bottom:1px solid var(--stroke);background:
  radial-gradient(900px 340px at 30% 0%, rgba(255,106,0,.22), transparent 60%),
  radial-gradient(700px 340px at 80% 10%, rgba(255,255,255,.08), transparent 60%),
  linear-gradient(180deg,rgba(255,255,255,.02),transparent 40%)}
.hero-inner{padding:40px 0 26px}
.hero h1{margin:0 0 10px;font-size:34px;letter-spacing:-.6px}
.muted{color:var(--muted);font-size:13px;line-height:1.35}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(255,106,0,.14);border:1px solid rgba(255,106,0,.25);color:#ffb07a;font-size:12px}

.btn{display:inline-flex;gap:10px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12);background:transparent;color:#fff;
  padding:12px 16px;border-radius:14px;transition:.2s;cursor:pointer}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,106,0,.55);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.btn.brand{background:linear-gradient(135deg,#ff6a00,#ff8a00);border-color:transparent;color:#0b0b0b;font-weight:900}

.grid{display:grid;gap:14px}
.grid.products{grid-template-columns:repeat(1,minmax(0,1fr))}

@media(min-width:560px){
  .grid.products{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(min-width:900px){
  .grid.products{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.07);border-radius:18px;overflow:hidden;transition:.2s}
.card:hover{transform:translateY(-2px);border-color:rgba(255,106,0,.28);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.thumb{aspect-ratio:1/1;background:#0f0f0f;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.06)}
.body{padding:12px}
.title{font-weight:900;line-height:1.25}
.price{font-weight:900;margin-top:10px}

.footer{margin-top:48px;border-top:1px solid var(--stroke);background:rgba(255,255,255,.02)}
.footer__wrap{padding:26px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer__brand{font-weight:900;letter-spacing:.6px}
.footer__brand span{color:var(--brand)}
.footer__links{display:flex;gap:10px;flex-wrap:wrap}
.link{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);display:inline-flex}
.flash{padding:12px 14px;border-radius:14px;border:1px solid var(--stroke);margin:12px 0}
.flash--error{background:rgba(255,0,0,.08);border-color:rgba(255,0,0,.18)}
.flash--success{background:rgba(0,255,120,.08);border-color:rgba(0,255,120,.18)}

.filters{padding:14px}
.filters__row{display:flex;gap:10px;flex-wrap:wrap}
input,select{background:#0f0f0f;color:#fff;border:1px solid rgba(255,255,255,.10);padding:12px 12px;border-radius:14px;outline:none}
input:focus,select:focus{border-color:rgba(255,106,0,.45);box-shadow:0 0 0 4px rgba(255,106,0,.12)}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.right{text-align:right}
.badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-size:12px}
.row{display:grid;gap:16px}
@media(min-width:900px){.row.cols2{grid-template-columns:1.2fr .8fr}}

html, body { overflow-x: hidden; }

.header__wrap{
  flex-wrap: wrap;
}

@media (max-width: 720px){
  .header__wrap{ padding: 10px 0; }
  .menu{
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
  }
  .menu__link{
    padding: 10px 10px;
    font-size: 13px;
  }
  .hero-inner{ padding: 26px 0 18px; }
  .hero h1{ font-size: clamp(24px, 7vw, 34px); }
}
@media (hover: none){
  .card:hover{ transform:none; box-shadow:none; }
}

/* ========== MENU HAMBURGUER (MOBILE) ========== */
.burger{
  display:none;
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
}
.burger span{
  display:block;
  width:18px;
  height:2px;
  background:#fff;
  border-radius:999px;
  transition:.2s;
}
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 720px){
  .burger{ display:inline-flex; }

  /* deixa header quebrar bem */
  .header__wrap{ flex-wrap:wrap; }

  /* menu vira dropdown */
  .menu{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:6px;

    margin-top:10px;
    padding:0;
    max-height:0;
    overflow:hidden;

    border:1px solid transparent;
    border-radius:16px;
    background:rgba(15,15,15,.92);
    transition:max-height .25s ease, padding .25s ease, border-color .25s ease;
  }
  .menu.is-open{
    padding:10px;
    max-height:320px;
    border-color:rgba(255,255,255,.10);
  }
  .menu__link{
    width:100%;
    justify-content:flex-start;
  }
}

/* =======================
   Banner Slider (Home)
======================= */
.bannerSlider{
  position: relative;
  margin: 14px auto 18px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

.bannerSlider__viewport{
  overflow: hidden;
}

.bannerSlider__track{
  display: flex;
  transition: transform .45s ease;
  will-change: transform;
}

.bannerSlider__slide{
  min-width: 100%;
  display: block;
  background: #0a0a0a;
}

.bannerSlider__slide img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

@media (max-width: 720px){
  .bannerSlider{
    border-radius: 18px;
  }
  .bannerSlider__slide img{
    height: 520px; /* ajusta se seu banner mobile for mais “alto” */
  }
}

.bannerSlider__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .2s;
  z-index: 3;
}
.bannerSlider__nav:hover{
  background: rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.18);
}
.bannerSlider__prev{ left: 12px; }
.bannerSlider__next{ right: 12px; }

@media (max-width: 720px){
  .bannerSlider__nav{ display: none; } /* no mobile fica só swipe + dots */
}

.bannerSlider__dots{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.bannerSlider__dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.35);
  cursor: pointer;
}
.bannerSlider__dot.is-active{
  background: #ff7a00; /* laranja iUrban */
  box-shadow: 0 0 0 3px rgba(255,122,0,.22);
}
/* ===== Product Card: trava mídia no grid (anti imagem gigante) ===== */
.grid.products{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1024px){
  .grid.products{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .grid.products{ grid-template-columns: 1fr; }
}

.product-card{
  display:block;
  overflow:hidden;               /* impede “vazar” */
  border-radius: 18px;
}

.product-media{
  width:100%;
  aspect-ratio: 4/3;             /* altura consistente */
  overflow:hidden;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
}

.product-img{
  width:100%;
  height:100%;
  object-fit: cover;   
    object-position: center center;          /* corta sem distorcer */
  display:block;
  transform: scale(1);
  transition: transform .25s ease;
}

.product-card:hover .product-img{
  transform: scale(1.03);
}

.product-media__placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-weight:700;
  color: rgba(255,255,255,.65);
}