/* Basic style, blue & white theme */
:root{
  --blue: #1e72d2;
  --blue-2: #1661b0;
  --white: #ffffff;
  --muted: #6b7280;
  --radius: 10px;
  --max-width: 1100px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;color:#0f1724;background:#f8fbff}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem}
.site-header{background:linear-gradient(90deg,var(--white),#f1f7ff);position:sticky;top:0;z-index:40;box-shadow:0 1px 0 rgba(16,24,40,.04)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.6rem}
.brand { display:flex; align-items:center; gap:0.6rem; }
.brand-link { display:inline-flex; align-items:center; gap:0.6rem; text-decoration:none; }
.brand-logo {
  height:40px;
  width:auto;
  display:block;
}
.brand small{color:var(--muted)}
.nav{display:flex;gap:0.75rem;align-items:center}
.nav a{color:var(--blue);text-decoration:none;padding:0.4rem 0.6rem;border-radius:6px}
.nav a:hover{background:rgba(30,114,210,.06)}
.btn-primary{background:var(--blue);color:var(--white);padding:0.6rem 1rem;border-radius:8px;text-decoration:none;display:inline-block}
.btn-outline{border:1px solid var(--blue);color:var(--blue);padding:0.5rem 0.85rem;border-radius:8px;text-decoration:none;background:transparent}
.header-inner .nav .btn-outline{margin-left:8px}
#mobile-nav-toggle{display:none}

.hero{padding:3rem 0}
.hero-inner{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center}
.hero h2{font-size:2rem;color:var(--blue);margin:0 0 0.5rem}
.hero p{color:var(--muted);margin:0 0 1rem}
.hero-image img{width:100%;border-radius:12px;box-shadow:0 6px 18px rgba(17,24,39,.08)}
.cards{display:flex;gap:1rem;margin-top:1rem}
.card{background:var(--white);padding:1rem;border-radius:12px;flex:1;text-align:center;border:1px solid rgba(16,24,40,.04)}
.card i{color:var(--blue);margin-bottom:0.5rem}

.section{padding:2rem 0}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-top:1rem}
.product{background:var(--white);padding:0.8rem;border-radius:10px;display:flex;flex-direction:column;gap:0.6rem;align-items:center;box-shadow:0 6px 18px rgba(17,24,39,.04);border:1px solid rgba(16,24,40,.03)}
.product img{width:100%;height:140px;object-fit:cover;border-radius:8px}
.product .price{font-weight:700;color:var(--blue)}
.product .btn-outline{margin-top:auto;width:100%;text-align:center}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0.75rem;margin-top:1rem}
.gallery-item{position:relative;overflow:hidden;border-radius:8px}
.gallery-item img{width:100%;height:140px;object-fit:cover;display:block;transition:transform .35s ease}
.gallery-item:hover img{transform:scale(1.06)}

/* Lightbox */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(10,15,25,.8);z-index:60;padding:1rem}
.lightbox img{max-width:95%;max-height:85%;border-radius:8px}
.lightbox.show{display:flex}
.lightbox-close{position:absolute;top:1rem;right:1rem;background:transparent;color:white;border:0;font-size:2rem}

/* Comments */
.comment-form{display:flex;flex-direction:column;gap:0.5rem}
.comment-form input,.comment-form textarea{padding:0.6rem;border-radius:8px;border:1px solid rgba(15,23,42,.08)}
.comments-list{margin-top:1rem;display:flex;flex-direction:column;gap:0.6rem}
.comment{background:var(--white);padding:0.7rem;border-radius:8px;border:1px solid rgba(15,23,42,.04)}

/* Footer */
footer{background:#f1f5f9;padding:1.2rem 0;margin-top:2rem}
.footer-inner{display:flex;gap:2rem;justify-content:space-between;flex-wrap:wrap}
.footer-col h4{margin:0 0 0.5rem}
.socials a{margin-right:0.5rem;color:var(--blue)}
.muted{color:var(--muted)}

/* Admin */
.admin-wrap{padding:2rem}
.admin-form{display:flex;flex-direction:column;gap:0.5rem;max-width:600px}
.admin-list{margin-top:0.8rem;display:flex;flex-direction:column;gap:0.5rem}
.admin-item{display:flex;align-items:center;gap:0.8rem;background:var(--white);padding:0.5rem;border-radius:8px;border:1px solid rgba(15,23,42,.04)}
.admin-item img{width:60px;height:40px;object-fit:cover;border-radius:6px}

/* Cursor */
.cursor{position:fixed;top:0;left:0;width:18px;height:18px;border-radius:50%;pointer-events:none;background:rgba(30,114,210,.95);transform:translate(-50%,-50%);z-index:9999;mix-blend-mode:normal;transition:transform .12s ease, width .12s ease, height .12s ease, background .12s ease}

/* responsive */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:1rem}
  #mobile-nav-toggle{display:inline-block}
  .nav{display:none}
  body.nav-open .nav{display:flex;position:absolute;top:64px;left:0;right:0;background:var(--white);flex-direction:column;padding:1rem;box-shadow:0 6px 18px rgba(17,24,39,.08)}
}