:root {
  --container: 1200px;
  --accent: #0b7280;
  --muted: #6b7280;
  --card: #ffffff;
  --radius: 14px;
  --product-gap: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: Inter, system-ui, Segoe UI, Roboto, Arial; background: linear-gradient(180deg, #f8fdff, #f3f9fb); color: #0f172a; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

.site-header { background: var(--card); box-shadow: 0 1px 6px rgba(12, 20, 25, 0.04); position: sticky; top: 0; z-index: 80; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; }
.brand a { font-weight: 800; color: var(--accent); text-decoration: none; font-size: 18px; }
.main-nav { display: flex; gap: 18px; }
.main-nav a { color: #0f172a; text-decoration: none; font-weight: 700; }

.hero { display: flex; gap: 28px; align-items: center; padding: 40px 0; }
.hero-left { flex: 0 0 45%; }
.hero-right { flex: 0 0 55%; display: flex; align-items: center; justify-content: center; }
.hero-left h1 { font-size: 40px; margin-bottom: 10px; line-height: 1; }
.lead { color: var(--muted); margin-bottom: 12px; }
.hero-features { list-style: none; color: var(--muted); margin-bottom: 14px; }
.hero-features li { margin: 6px 0; }
.btn { display: inline-block; padding: 10px 14px; border-radius: 12px; text-decoration: none; font-weight: 800; background: linear-gradient(90deg, #8be8ff, #66a6ff); color: #042; }
.btn.ghost { background: transparent; border: 2px solid #e0f4f9; color: #042; }

.slideshow-box { width: 100%; height: 420px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(250, 250, 250, 0.6)); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(9, 30, 40, 0.04); }
.slideshow-img { width: 100%; height: 100%; object-fit: contain; position: absolute; left: 0; top: 0; opacity: 0; transform: translateX(-40px); transition: transform .7s ease, opacity .7s ease; }

.category-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-bottom: 34px; }
.cat-card { background: var(--card); border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 8px 30px rgba(9, 30, 40, 0.04); display: block; }
.cat-media img { width: 100%; height: 220px; object-fit: cover; }
.cat-body { padding: 18px; text-align: center; }

.section-block { padding: 28px 0; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.section-head h2 { font-size: 20px; margin: 0; }
.section-link { color: var(--muted); font-weight: 700; text-decoration: none; }

.scroll-wrapper { position: relative; }

.product-grid { 
  display: flex; 
  gap: var(--product-gap); 
  overflow-x: auto; 
  padding-bottom: 8px; 
  scroll-behavior: smooth;
  flex-wrap: nowrap !important; 
  align-items: stretch;
}

.product-grid.h-grid { 
  flex-wrap: nowrap !important; 
  overflow-x: auto !important;
}

/* scrollbar style */
.product-grid::-webkit-scrollbar { height: 8px; }
.product-grid::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 8px; }
.product-grid::-webkit-scrollbar-track { background: transparent; }

.scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 36px; height: 36px; background: #fff; border-radius: 50%; border: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.scroll-btn.left { left: -18px; }
.scroll-btn.right { right: -18px; }

.product-card {
  min-width: calc((100% - (3 * var(--product-gap))) / 4);
  max-width: calc((100% - (3 * var(--product-gap))) / 4);
  
  flex-shrink: 0; 
  flex-grow: 0;
  
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(9, 30, 40, 0.04);
  display: flex;
  flex-direction: column;
}

.card-media { height: 150px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 12px; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { font-size: 16px; margin: 0 0 6px; font-weight: 800; }
.card-body .desc { color: var(--muted); font-size: 14px; margin: 0 0 10px; flex: 0; }
.price { font-weight: 900; color: #ff5252; margin-bottom: 8px; }
.add-to-cart-btn { background: var(--accent); color: #fff; border: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-weight: 800; }

.site-footer { padding: 24px 0; text-align: center; color: var(--muted); }

@media (max-width: 1024px) { 
  .hero { flex-direction: column; } 
  .hero-left { flex: 1; } 
  .hero-right { width: 100%; min-width: 0; } 
  .slideshow-box { height: 320px; } 
}

@media (max-width: 640px) {
  .hero-left h1 { font-size: 28px; }
  .product-card {
     min-width: calc((100% - var(--product-gap)) / 2);
     max-width: calc((100% - var(--product-gap)) / 2);
  }
}