/* =====================
   VARIABLES
===================== */
:root{
  --blue:#0E2A47;
  --orange:#FF7A00;
  --bg:#F6F7FB;
  --text:#0b1320;
  --muted:#6b7280;
  --card:#ffffff;
  --radius:16px;
  --shadow:0 6px 20px rgba(0,0,0,.08);
}

/* =====================
   RESET
===================== */
*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter, system-ui, sans-serif;
  background:var(--bg);
  color:var(--text);
}

img{
  max-width:100%;
  display:block;
}

/* =====================
   LAYOUT
===================== */
.container{
  width:min(1100px,92%);
  margin:auto;
}

/* =====================
   HEADER
===================== */
.header{
  background:#fff;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 1px 6px rgba(0,0,0,.08);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 0;
}

.brand{
  font-weight:800;
  font-size:1.3rem;
  color:var(--blue);
}

.cart-btn{
  background:var(--orange);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:.55rem .9rem;
  font-weight:800;
  min-height:40px;
  cursor:pointer;
}

/* =====================
   TOP BANNER
===================== */
.top-banner{
  background:linear-gradient(135deg,#0b1320,#1f2937);
  color:#fff;
  padding:3.5rem 0;
}

.banner-text{
  max-width:640px;
}

.banner-text h1{
  font-family:Poppins, Inter, sans-serif;
  font-size:clamp(2rem,4.5vw,3rem);
  line-height:1.1;
  margin:0;
}

.banner-text span{
  color:#ff4d4f;
}

.banner-text p{
  margin:1rem 0 1.8rem;
  color:#d1d5db;
  font-size:1.05rem;
}

.banner-actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

.btn-primary{
  background:var(--orange);
  color:#fff;
  padding:.9rem 1.3rem;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
  min-height:44px;
}

.btn-outline{
  background:transparent;
  border:1px solid rgba(255,255,255,.5);
  color:#fff;
  padding:.9rem 1.3rem;
  border-radius:12px;
  font-weight:800;
  min-height:44px;
  cursor:pointer;
}

.btn-outline:hover{
  background:rgba(255,255,255,.08);
}

/* =====================
   SEARCH
===================== */
.search-wrapper{
  margin:2.5rem 0 1.8rem;
}

.search{
  width:100%;
  max-width:420px;
  padding:.85rem 1rem;
  border-radius:14px;
  border:1px solid #d1d5db;
  font-size:1rem;
  outline:none;
}

.search:focus{
  border-color:var(--orange);
}

/* =====================
   PRODUCT GRID
===================== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}

/* =====================
   CARD
===================== */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.card-img{
  aspect-ratio:1/1;
  background:#f2f3f7;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:zoom-in;
}

.card-img img{
  width:85%;
  height:85%;
  object-fit:contain;
  transition:transform .25s ease;
}

.card-img:hover img{
  transform:scale(1.05);
}

.card-body{
  padding:16px;
}

.card-body strong{
  display:block;
  margin-bottom:6px;
}

.card-body div{
  color:var(--muted);
}

.card-body button{
  width:100%;
  margin-top:14px;
  padding:.75rem;
  background:var(--blue);
  color:#fff;
  border:none;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
}

.card-body button:hover{
  opacity:.92;
}

/* =====================
   CART FLOAT
===================== */
.cart-float{
  position:fixed;
  bottom:18px;
  right:18px;
  z-index:60;
  background:var(--orange);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:14px 18px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(255,122,0,.35);
}

/* =====================
   DRAWER CART
===================== */
.drawer{
  position:fixed;
  inset:0;
  display:none;
  z-index:80;
}

.drawer.open{
  display:block;
}

.backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}

.panel{
  position:absolute;
  right:0;
  top:0;
  height:100%;
  width:min(400px,100%);
  background:#fff;
  padding:1rem;
  display:flex;
  flex-direction:column;
}

.panel-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #e5e7eb;
  padding-bottom:.6rem;
}

.cart-list{
  flex:1;
  margin-top:1rem;
  overflow:auto;
}

.cart-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.8rem;
}

.cart-qty{
  display:flex;
  align-items:center;
  gap:6px;
}

.cart-qty button{
  width:28px;
  height:28px;
  border:1px solid #d1d5db;
  background:#fff;
  border-radius:6px;
  font-weight:800;
  cursor:pointer;
}

.total{
  font-weight:800;
  margin-top:.5rem;
}

.btn-wa{
  margin-top:1rem;
  background:#25D366;
  color:#0b2b14;
  border:none;
  border-radius:12px;
  padding:1rem;
  font-weight:800;
  cursor:pointer;
}

/* =====================
   IMAGE MODAL
===================== */
.img-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:none;
  place-items:center;
  z-index:100;
}

.img-modal.show{
  display:grid;
}

.img-modal img{
  max-width:90%;
  max-height:90%;
  border-radius:16px;
}

/* =====================
   FOOTER
===================== */
.footer{
  background:#0E2A47;
  color:#fff;
  margin-top:4rem;
  padding:3rem 0 2rem;
}

.footer-grid{
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
}

.footer p{
  margin:.4rem 0;
  color:#d1d5db;
}

.footer-bottom{
  margin-top:2rem;
  text-align:center;
  font-size:.85rem;
  opacity:.8;
}

/* =====================
   RESPONSIVE
===================== */
@media (max-width:540px){
  .banner-actions{
    flex-direction:column;
  }

  .banner-actions a,
  .banner-actions button{
    width:100%;
    text-align:center;
  }
}