@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --bg: #f7f5ef !important;
  --bg-2: #ffffff !important;
  --sidebar: #164566 !important;
  --sidebar-alt: #1c587f !important;
  --card: #ffffff !important;
  --card-2: #f1f6f7 !important;
  --card-hi: #e7f2f5 !important;
  --border: #d8e3e5 !important;
  --border-hi: #a9c6cc !important;
  --text: #17324d !important;
  --text-dim: #587084 !important;
  --text-mute: #8295a0 !important;
  --blue: #155eef !important;
  --blue-hi: #3878f5 !important;
  --gold: #d49324 !important;
  --gold-hi: #b87510 !important;
  --gold-deep: #915800 !important;
  --green: #138a72 !important;
  --red: #db594d !important;
  --amber: #e49b27 !important;
  --purple: #7457c8 !important;
  --shadow: 0 16px 36px rgba(30, 68, 86, .10) !important;
  --shadow-strong: 0 20px 46px rgba(30, 68, 86, .16) !important;
  --radius: 12px !important;
  --radius-sm: 8px !important;
}

html { background: var(--bg); }
body {
  background-color: var(--bg) !important;
  background-image: linear-gradient(135deg, rgba(21, 94, 239, .035) 25%, transparent 25%, transparent 50%, rgba(21, 94, 239, .035) 50%, rgba(21, 94, 239, .035) 75%, transparent 75%) !important;
  background-size: 28px 28px !important;
  color: var(--text) !important;
  font-family: 'DM Sans', 'Avenir Next', sans-serif !important;
  letter-spacing: 0 !important;
}
h1, h2, h3, h4, .brand-text, .brand-name, .page-head h1, .product-info h4 { font-family: 'Space Grotesk', 'Avenir Next', sans-serif !important; }

/* Member portal shell */
.sidebar {
  background: linear-gradient(180deg, #164566 0%, #1c587f 100%) !important;
  border-right: 0 !important;
  box-shadow: 8px 0 28px rgba(22, 69, 102, .16) !important;
}
.brand { padding-bottom: 26px !important; }
.brand-mark { background: #f6c85f !important; box-shadow: 0 10px 20px rgba(246, 200, 95, .25) !important; }
.brand-text b, .brand-text span { color: #fff !important; }
.brand-text span { opacity: .72; }
.nav-link { color: rgba(255,255,255,.74) !important; border-radius: 9px !important; }
.nav-link:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.nav-item.active > .nav-link { background: #f6c85f !important; color: #17324d !important; box-shadow: none !important; }
.sub-link { color: rgba(255,255,255,.68) !important; }
.sub-link:hover, .sub-link.active { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.sub-link.active::before { background: #f6c85f !important; }
.nav-toggle { background: #f6c85f !important; border-color: #164566 !important; color: #17324d !important; }
.cart-fab { background: #e35d4a !important; box-shadow: 0 9px 20px rgba(227,93,74,.3) !important; }
.main { background: rgba(247,245,239,.78) !important; }
.topbar { background: rgba(255,255,255,.9) !important; border-bottom: 1px solid var(--border) !important; box-shadow: 0 4px 18px rgba(30,68,86,.05) !important; }
.crumb, .crumb b { color: var(--text) !important; }
.page-wrap { background-image: linear-gradient(90deg, rgba(21,94,239,.025) 1px, transparent 1px), linear-gradient(rgba(21,94,239,.025) 1px, transparent 1px) !important; background-size: 24px 24px !important; }
.page-head h1 { background: none !important; color: var(--text) !important; font-size: 24px !important; }
.page-head p { color: var(--text-dim) !important; }
.card, .profile-card, .product-pick, .modal, .login-card, .dropdown-panel {
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}
.card { background: rgba(255,255,255,.94) !important; }
.card::before { background: #f6c85f !important; opacity: 1 !important; }
.profile-card { background: linear-gradient(145deg, #155eef, #174b9d) !important; border: 0 !important; }
.stat-ic.blue { background: #e7efff !important; color: var(--blue) !important; }
.stat-ic.green { background: #e3f5ef !important; color: var(--green) !important; }
.stat-ic.gold { background: #fff3d8 !important; color: var(--gold-hi) !important; }
.stat-ic.red { background: #ffebe8 !important; color: var(--red) !important; }
.icon-btn { background: #fff !important; border-color: var(--border) !important; color: var(--text-dim) !important; }
.icon-btn:hover { background: var(--card-hi) !important; color: var(--blue) !important; }
.btn.primary { background: var(--blue) !important; color: #fff !important; border-color: var(--blue) !important; box-shadow: 0 8px 16px rgba(21,94,239,.18) !important; }
.btn.success { background: var(--green) !important; color: #fff !important; border-color: var(--green) !important; }
.btn.danger { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }
.btn.ghost { background: #fff !important; color: var(--text) !important; border-color: var(--border) !important; }
.btn:hover { filter: brightness(1.03); transform: translateY(-1px); }
input, select, textarea { background: #fff !important; color: var(--text) !important; border-color: var(--border) !important; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(21,94,239,.13) !important; border-color: var(--blue) !important; }

/* Product catalogue */
.shop-grid { grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)) !important; gap: 18px !important; }
.product-card { background: #fff !important; border: 1px solid #d8e3e5 !important; border-radius: 12px !important; box-shadow: 0 12px 26px rgba(30,68,86,.10) !important; }
.product-card:hover { border-color: #d49324 !important; box-shadow: var(--shadow-strong) !important; transform: translateY(-3px) !important; }
.product-media { height: 230px !important; background: linear-gradient(145deg, #eaf4f7 0%, #fff6df 100%) !important; border-bottom: 1px solid #e1eaeb !important; }
.product-media img { padding: 18px !important; }
.product-media .ribbon { top: 12px !important; left: 12px !important; background: #f6c85f !important; color: #503700 !important; box-shadow: none !important; }
.product-info { padding: 15px 16px 12px !important; gap: 7px !important; }
.product-info .cat { color: var(--blue) !important; }
.product-info h4 { color: var(--text) !important; }
.product-info .pv { color: var(--text-dim) !important; min-height: 32px; }
.product-info .price { color: var(--gold-deep) !important; font-size: 19px !important; }
.product-actions { padding: 0 16px 16px !important; }
.product-actions .btn { min-height: 40px !important; }
.product-pick { background: #fff !important; }
.product-pick.sel { border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(21,94,239,.12) !important; }
.bottle-art { background: linear-gradient(145deg, #eaf4f7, #fff6df) !important; }
.catalog-loading { min-height: 180px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-dim); font-weight: 600; }
.loading-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(21,94,239,.12); animation: catalogPulse 1s ease-in-out infinite; }
@keyframes catalogPulse { 50% { opacity: .35; transform: scale(.75); } }

/* Admin console */
.admin-shell, .app-shell { background: transparent !important; }
.admin-shell .sidebar, body:has(.admin-shell) .sidebar { background: linear-gradient(180deg, #164566 0%, #1c587f 100%) !important; }
.admin-shell .brand-mark { background: #f6c85f !important; }
.admin-shell .nav-item.active, .admin-shell .sub-item.active { background: #f6c85f !important; color: #17324d !important; }
.admin-shell .nav-item:hover, .admin-shell .sub-item:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.admin-shell .main, body:has(.admin-shell) .main { background: rgba(247,245,239,.78) !important; }
.admin-shell .topbar, body:has(.admin-shell) .topbar { background: rgba(255,255,255,.9) !important; border-bottom-color: var(--border) !important; }
.admin-shell .card, .admin-shell .panel, body:has(.admin-shell) .card, body:has(.admin-shell) .panel { background: rgba(255,255,255,.95) !important; border-color: var(--border) !important; box-shadow: var(--shadow) !important; }
.admin-shell .btn.primary, body:has(.admin-shell) .btn.primary { background: var(--blue) !important; }
.admin-shell .btn.success, body:has(.admin-shell) .btn.success { background: var(--green) !important; }

@media (max-width: 760px) {
  .page-wrap { padding: 14px 12px 30px !important; }
  .page-head h1 { font-size: 21px !important; }
  .shop-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
  .product-media { height: 205px !important; }
  .product-actions { flex-direction: row !important; }
  .product-actions .btn { width: auto !important; }
  .stat-card { min-height: 96px; }
  .register-main .card { min-height: auto !important; }
}
@media (max-width: 560px) {
  .topbar { padding: 10px 12px !important; }
  .page-wrap { padding: 12px 10px 24px !important; }
  .card { border-radius: 10px !important; }
  .product-info { padding: 14px 13px 11px !important; }
  .product-actions { padding: 0 13px 13px !important; }
}