:root {
  --ht-green: #355c4a;
  --ht-green-dark: #29483a;
  --ht-mint: #e9f5f2;
  --ht-blue: #a7dfe4;
  --ht-peach: #f7c2b1;
  --ht-pink: #f5d6df;
  --ht-yellow: #f7df79;
  --ht-bg: #fbfcfb;
  --ht-text: #27312c;
}

html { scroll-behavior: smooth; }
body {
  background: var(--ht-bg);
  color: var(--ht-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: var(--ht-green); }

.navbar-brand img { height: 52px; width: auto; }
.navbar { backdrop-filter: blur(8px); }

.btn-ht {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ht-green);
  --bs-btn-border-color: var(--ht-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ht-green-dark);
  --bs-btn-hover-border-color: var(--ht-green-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ht-green-dark);
}

.btn-outline-ht {
  --bs-btn-color: var(--ht-green);
  --bs-btn-border-color: var(--ht-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ht-green);
  --bs-btn-hover-border-color: var(--ht-green);
}

.hero {
  background:
    radial-gradient(circle at 85% 20%, rgba(247,223,121,.35) 0, rgba(247,223,121,0) 22%),
    radial-gradient(circle at 10% 80%, rgba(167,223,228,.42) 0, rgba(167,223,228,0) 26%),
    linear-gradient(135deg, #fff 0%, #f6fbf9 100%);
  border: 1px solid #e7efeb;
  border-radius: 2rem;
  overflow: hidden;
}

.hero-badge { background: var(--ht-mint); color: var(--ht-green-dark); }

.category-card {
  border: 0;
  border-radius: 1.25rem;
  transition: transform .18s ease, box-shadow .18s ease;
  min-height: 132px;
}
.category-card:hover { transform: translateY(-3px); box-shadow: 0 1rem 2rem rgba(42,75,59,.08); }
.category-icon {
  width: 52px; height: 52px; display: inline-grid; place-items: center;
  border-radius: 50%; background: var(--ht-mint); color: var(--ht-green); font-size: 1.35rem;
}

.product-card {
  border: 1px solid #e8eeeb;
  border-radius: 1.35rem;
  overflow: hidden;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
  background: #fff;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 .9rem 2rem rgba(35,62,49,.09); }
.product-image-wrap { aspect-ratio: 4 / 3; background: #f6f8f7; overflow: hidden; position: relative; }
.product-image-wrap img { width: 100%; height: 100%; object-fit: contain; padding: .35rem; }
.product-card .badge { font-weight: 600; }
.price { font-size: 1.35rem; font-weight: 800; color: var(--ht-green-dark); }
.price-note { font-size: .79rem; color: #6c757d; }

.filter-card { border: 1px solid #e7ece9; border-radius: 1.25rem; background: #fff; }

.cart-pill {
  position: absolute; top: -6px; right: -8px; min-width: 21px; height: 21px;
  display: grid; place-items: center; font-size: .72rem; padding: 0 5px;
  border-radius: 50rem; background: #dc3545; color: white; font-weight: 700;
}

.sticky-cart {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1040;
  display: none;
}
.sticky-cart.show { display: block; }
.sticky-cart .inner {
  max-width: 560px; margin: 0 auto; border-radius: 1rem; box-shadow: 0 .8rem 2.4rem rgba(0,0,0,.18);
}

.variant-option {
  border: 2px solid #e6ece8; border-radius: 1rem; padding: .85rem; cursor: pointer; transition: .15s ease;
}
.variant-option:hover, .variant-option.active { border-color: var(--ht-green); background: #f8fcfa; }
.variant-option input { accent-color: var(--ht-green); }

.gallery-main { border: 1px solid #e7ece9; border-radius: 1.25rem; background: #fff; aspect-ratio: 4/3; overflow: hidden; }
.gallery-main img { width:100%; height:100%; object-fit:contain; padding:.5rem; }
.gallery-main .carousel-inner, .gallery-main .carousel-item { height:100%; }
.gallery-main .carousel-control-prev, .gallery-main .carousel-control-next { width:12%; }
.gallery-thumb { width: 74px; height: 74px; border: 2px solid transparent; border-radius: .8rem; overflow: hidden; background:#fff; cursor:pointer; }
.gallery-thumb.active { border-color: var(--ht-green); }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; }

.cart-item { border:1px solid #e8eeeb; border-radius:1rem; background:#fff; }
.cart-item img { width:86px; height:86px; object-fit:contain; border-radius:.8rem; background:#f7f9f8; }
.qty-control { max-width: 122px; }

.info-strip { background: #fff8d9; border: 1px solid #f1df9c; color:#665816; border-radius:1rem; }

footer { background: #eef6f2; }

/* Admin */
.admin-shell { min-height: 100vh; background:#f5f7f6; }
.admin-sidebar { background:#244738; color:#fff; min-height:100vh; }
.admin-sidebar a { color:rgba(255,255,255,.84); text-decoration:none; border-radius:.7rem; }
.admin-sidebar a:hover, .admin-sidebar a.active { color:#fff; background:rgba(255,255,255,.11); }
.admin-card { border:0; border-radius:1.15rem; box-shadow:0 .25rem 1.2rem rgba(24,52,39,.06); }
.admin-table img { width:58px; height:58px; object-fit:contain; background:#f4f6f5; border-radius:.6rem; }
.image-admin-thumb { width:120px; height:95px; object-fit:cover; border-radius:.75rem; border:1px solid #dfe7e3; }

@media (max-width: 767.98px) {
  .hero { border-radius: 1.35rem; }
  .hero h1 { font-size: 2rem; }
  .navbar-brand img { height: 43px; }
  .product-card .card-body { padding: .9rem; }
  .product-card h3 { font-size: 1rem; }
  body.has-sticky-cart { padding-bottom: 76px; }
}