/* ====== Variables ====== */
:root{
  --bg:#0e0f12;
  --panel:#13151a;
  --ink:#f5f7fb;
  --muted:#c9cdd6;
  --accent:#b2f0e7;
  --accent-2:#6dd5ed;
  --border:#252a33;
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.35);
}

/* ====== Base ====== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body.theme-dark{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Tahoma', sans-serif;
  background-color:var(--bg);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
}
.container{width:92%;max-width:1100px;margin:auto}

/* ====== Header ====== */
.site-header{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.15)), var(--panel);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1000;
  backdrop-filter: blur(6px);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding:1rem 0;
}
.logo-area{
  display:flex;align-items:center;gap:.8rem;
}
.main-logo{
  height:70px; width:70px; object-fit:cover; border-radius:50%;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.brand-name{
  font-size:2rem;font-weight:800;color:var(--accent);letter-spacing:.5px;line-height:1
}

.top-nav{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.top-nav input[type="search"]{
  padding:.6rem .9rem;border-radius:12px;border:1px solid var(--border);outline:none;
  background:#0b0c0f;color:var(--ink);min-width:230px;max-width:340px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

/* ====== Buttons ====== */
.add-to-cart,
.checkout-btn{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#001018;
  border:none;
  padding:.6rem 1rem;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,0.28), inset 0 -2px 0 rgba(255,255,255,.15);
}
.add-to-cart:hover,
.checkout-btn:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 22px rgba(0,0,0,0.35), inset 0 -2px 0 rgba(255,255,255,.2);
}

/* Cart FAB */
.cart-btn{
  background: linear-gradient(135deg, #6dd5ed, #2193b0);
  color:#fff;border:none;padding:.75rem;border-radius:50%;
  cursor:pointer;position:relative;width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cart-btn:hover{transform: translateY(-2px) scale(1.05); box-shadow:0 14px 28px rgba(0,0,0,.4)}
.cart-count{
  background:#ff3b3b;color:#fff;border-radius:50%;padding:0 7px;font-size:.8rem;
  position:absolute;top:-6px;right:-6px;box-shadow:0 2px 6px rgba(0,0,0,.35);
}

/* ====== HERO section ====== */
.hero{
  position: relative;
  min-height: 42vh;
  display:flex;
  align-items:center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-overlay{
  position:absolute;inset:0;
  background: radial-gradient(1200px 200px at -50% -50%, rgba(178,240,231,0.07), transparent 40%),
              linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
}
.hero-content{
  position:relative;
  padding: 2.2rem 0;
}
.hero-title{
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height:1.15;
  color: var(--ink);
  text-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.hero-subtitle{
  margin-top:.5rem;
  color: var(--muted);
  font-size: clamp(.95rem, 2.2vw, 1.1rem);
}

/* ====== Products area ====== */
.products-area{padding:1.2rem 0 2rem}

.products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px,1fr));
  gap:1rem;
}

.product{
  background: radial-gradient(1200px 200px at -100% -100%, rgba(178,240,231,0.05), transparent 40%), var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
  transition:transform .2s, box-shadow .2s, border-color .2s;
  padding:.7rem;display:flex;flex-direction:column;gap:.6rem;
}
.product:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,0,0,.38);border-color:#2f3640}

.product img{width:100%;height:165px;object-fit:cover;border-radius:12px}
.product h3{font-size:1rem;margin-top:.1rem}
.product-desc{
  font-size:.86rem;color:#cfd3dc;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.2em
}
.product-price{font-weight:800;color:var(--accent);font-size:.98rem}
.add-to-cart{margin-top:auto}

/* ====== Bottom Sheet Cart ====== */
.floating-cart.bottom-sheet{
  position:fixed;left:0;right:0;bottom:-100%;
  height:70vh; max-height:90vh;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18)), var(--panel);
  border-top:1px solid var(--border);
  box-shadow:0 -10px 24px rgba(0,0,0,.5);
  display:flex;flex-direction:column;transition:bottom .3s ease;z-index:2000;
  border-top-left-radius:22px;border-top-right-radius:22px;
  backdrop-filter: blur(6px);
}
.floating-cart.bottom-sheet.active{bottom:0}

.cart-header,.cart-footer{padding:1rem 1rem;border-bottom:1px solid var(--border)}
.cart-header{
  display:flex;justify-content:space-between;align-items:center
}
.cart-header h3{font-size:1.1rem;color:var(--accent)}
.cart-items{flex:1;overflow-y:auto;list-style:none;padding:1rem}
.cart-items li{margin-bottom:1rem;border-bottom:1px dashed var(--border);padding-bottom:.6rem}
.cart-items img{width:46px;height:46px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.total{font-weight:800;margin-bottom:.5rem}
.checkout-btn{width:100%}

/* ====== Footer ====== */
.site-footer{
  background:var(--panel);padding:1rem;margin-top:2rem;border-top:1px solid var(--border)
}
.footer-flex{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap
}
.footer-brand{display:flex;align-items:center;gap:.7rem}
.footer-logo{height:34px;width:34px;object-fit:cover;border-radius:8px;opacity:.9}
.site-footer p{margin-bottom:.4rem}

/* ====== Responsive ====== */
@media (max-width:992px){
  .container{width:94%}
  .main-logo{height:64px;width:64px}
  .product img{height:160px}
  .hero{min-height: 38vh}
}
@media (max-width:600px){
  .top-nav input[type="search"]{min-width:170px;max-width:210px}
  .products-grid{grid-template-columns:repeat(auto-fill, minmax(160px,1fr));gap:.8rem}
  .product{padding:.6rem}
  .product img{height:145px}
  .main-logo{height:56px;width:56px}
  .hero{min-height: 34vh}
}