/* Premium bento polish — local assets, no empty frames */
body {
  background: #e8e8ea !important;
}

.container {
  width: min(100% - 40px, 1240px) !important;
}

.site-header { padding: 14px 0 6px !important; }
.header-inner {
  background: #fff !important;
  border: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.05) !important;
  min-height: 58px !important;
}

.btn-lime {
  background: #c6ff00 !important;
  color: #111 !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
.btn-lime:hover { background: #b8f000 !important; }

.home-wrap { padding: 8px 0 20px !important; }

.home-banner {
  border-radius: 36px !important;
  min-height: 340px !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08) !important;
}

.home-banner-title {
  font-size: clamp(28px, 3.8vw, 44px) !important;
  font-weight: 800 !important;
}

.home-banner-badge {
  background: rgba(255,255,255,0.65) !important;
}

.bento {
  display: grid !important;
  grid-template-columns: 1.55fr 0.72fr 0.72fr !important;
  grid-template-rows: 120px minmax(280px, 1fr) 170px !important;
  gap: 14px !important;
}

.bento-hero {
  background: #fff !important;
  border: none !important;
  border-radius: 36px !important;
  min-height: 500px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.05) !important;
  padding: 28px 26px 20px !important;
}

.hero-title {
  font-size: clamp(28px, 3vw, 42px) !important;
  font-weight: 800 !important;
  color: #111 !important;
}

.hero-visual img {
  width: min(320px, 65%) !important;
  object-fit: contain !important;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 28px 40px rgba(37,99,235,0.28)) !important;
}

.bento-banner,
.bento-xbud,
.bento-featured,
.bento-more,
.bento-stats,
.bento-popular {
  background: #fff !important;
  border: none !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.045) !important;
}

.bento-banner { border-radius: 28px !important; padding: 0 !important; }
.bento-banner img { border-radius: 28px !important; }
.bento-xbud { border-radius: 28px !important; padding: 10px !important; height: 100% !important; aspect-ratio: auto !important; }
.bento-xbud img { border-radius: 20px !important; width: 100%; height: 100%; object-fit: cover; }
.bento-xbud .corner-btn,
.bento-featured .corner-btn {
  background: #fff !important;
  color: #111 !important;
  border: none !important;
}

.bento-featured {
  border-radius: 32px !important;
  grid-template-columns: 36% 64% !important;
  min-height: 0 !important;
}
.bento-featured-info h3 { font-size: 18px !important; font-weight: 800 !important; color: #111 !important; }
.bento-featured-media img { object-fit: cover !important; width: 100%; height: 100%; }

.bento-more { border-radius: 28px !important; }
.bento-more h3 { font-size: 24px !important; font-weight: 800 !important; }
.thumb-row img {
  width: 60px !important; height: 60px !important;
  border-radius: 14px !important; object-fit: cover !important; border: none !important;
}

.bento-stats { border-radius: 28px !important; }
.stats-circle {
  background: linear-gradient(145deg, #3b82f6, #1d4ed8) !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  aspect-ratio: auto !important;
  flex: 1 !important;
  min-height: 105px !important;
}

.bento-popular { border-radius: 28px !important; }
.bento-popular h4 { font-size: 14px !important; font-weight: 800 !important; color: #111 !important; margin-top: 26px !important; }
.bento-popular-media img { height: 76px !important; object-fit: cover !important; border-radius: 14px !important; }

.section { padding: 32px 0 !important; }
.section-title { font-size: clamp(22px, 2.2vw, 30px) !important; }
.section-head { margin-bottom: 18px !important; }

.product-card,
.cat-card,
.why-card,
.review-card,
.brand-card,
.app-banner,
.newsletter,
.footer-grid {
  border: none !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.045) !important;
  background: #fff !important;
}

.product-card { border-radius: 24px !important; }
.product-card-media {
  background: linear-gradient(180deg, #f7f7f8, #efeff1) !important;
}
.product-card-media img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

.cat-card { border-radius: 22px !important; padding: 20px 14px !important; }
.cat-card-icon {
  width: 64px !important; height: 64px !important;
  border-radius: 18px !important; overflow: hidden !important;
  border: none !important; background: #f3f3f4 !important;
}
.cat-card-icon img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.deal-banner { border-radius: 32px !important; }
.video-banner {
  border-radius: 32px !important;
  border: none !important;
  width: 100% !important;
  max-width: 100% !important;
}
.video-banner img {
  object-fit: cover !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  display: block !important;
}
.ig-grid a { border: none !important; border-radius: 18px !important; overflow: hidden; }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; }

img { background: #f0f0f2; }

@media (max-width: 1100px) {
  .bento {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
  }
  .bento-hero { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 420px !important; }
  .bento-featured { grid-column: 1 / -1 !important; }
  .home-banner { min-height: 300px !important; }
}

@media (max-width: 768px) {
  .container { width: min(100% - 24px, 1240px) !important; }
  .header-inner {
    flex-wrap: wrap !important;
    border-radius: 22px !important;
    min-height: auto !important;
  }
  .bento { grid-template-columns: 1fr !important; }
  .bento-banner, .bento-xbud, .bento-featured, .bento-more, .bento-stats, .bento-popular {
    grid-column: 1 !important;
  }
  .bento-featured { grid-template-columns: 1fr !important; }
  .hero-desc { position: static !important; text-align: left !important; max-width: none !important; margin: 10px 0 !important; }
  .home-banner {
    min-height: 300px !important;
    border-radius: 24px !important;
  }
  .section { padding: 28px 0 !important; }
  .product-grid { gap: 10px !important; }
}

@media (max-width: 480px) {
  .home-banner { min-height: 340px !important; border-radius: 20px !important; }
  .product-grid,
  .cat-grid {
    grid-template-columns: 1fr !important;
  }
}
