:root{
  --bg:#fff;
  --text:#0f172a;
  --muted:#6b7280;
  --border:#e5e7eb;
  --danger:#b91c1c;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--text); background:var(--bg);}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

.site-header{position:sticky; top:0; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--border); z-index:10}
.header-inner{display:flex;gap:16px;align-items:center; justify-content:space-between; padding:14px 0}
.brand{margin:0;font-size:1.25rem;letter-spacing:.5px}

.nav{display:flex;gap:14px;align-items:center}
.nav-link{color:var(--text);text-decoration:none;font-weight:500;opacity:.8}
.nav-link:hover{opacity:1;text-decoration:underline}

.actions{display:flex;align-items:center;gap:10px}
.search{border:1px solid var(--border); padding:8px 10px; border-radius:8px; min-width:220px}
.cart-btn{position:relative;border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 12px;font-size:18px;cursor:pointer}
.cart-count{position:absolute; top:-8px; right:-8px; background:#111827;color:#fff;border-radius:999px;padding:0 6px;font-size:12px;line-height:18px}

.hero{padding:38px 0 24px;border-bottom:1px solid var(--border); text-align:center}
.hero h2{margin:0 0 6px;font-size:2rem}
.hero p{margin:0;color:var(--muted)}

.grid{display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:18px; padding:28px 0}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.grid{grid-template-columns:repeat(3,1fr)}}

.card{border:1px solid var(--border); border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column}
.card-img{aspect-ratio: 4/3; object-fit:cover; width:100%}
.card-body{padding:14px; display:flex; flex-direction:column; gap:10px}
.card-title{margin:0;font-size:1rem;display:flex;align-items:center;gap:8px}
.badge{font-size:.7rem;border:1px solid var(--border); border-radius:6px; padding:2px 6px; color:#111827}
.badge.danger{border-color:#fca5a5; color:var(--danger)}

.price{font-weight:700}
.muted{color:var(--muted)}
.small{font-size:.85rem}

.pill{border:1px solid var(--border); padding:6px 8px; border-radius:999px; font-size:.85rem}
.btn{cursor:pointer; border:none; border-radius:10px; padding:10px 12px; background:#111827; color:#fff; font-weight:600}
.btn.secondary{background:#fff; color:#111827; border:1px solid var(--border)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.select, .qty{border:1px solid var(--border); border-radius:8px; padding:8px}

.site-footer{border-top:1px solid var(--border); padding:26px 0; margin-top:20px}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px}
.footer-inner p{margin:0}

.cart{position:fixed; top:0; right:-420px; width:360px; max-width:92vw; height:100%; background:#fff; border-left:1px solid var(--border); transition:right .25s ease; z-index:100; display:flex; flex-direction:column}
.cart.open{right:0}
.cart-header{display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--border)}
.cart-items{padding:12px; overflow:auto; flex:1}
.cart-item{display:grid; grid-template-columns:64px 1fr auto; gap:10px; padding:10px 0; border-bottom:1px solid var(--border)}
.cart-item img{width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--border)}
.cart-footer{border-top:1px solid var(--border); padding:16px; display:flex; flex-direction:column; gap:10px}
.checkout{padding:12px; border-radius:10px; background:#111827; color:#fff; border:none; cursor:pointer}

.modal{position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:90; padding:20px}
.modal.open{display:flex}
.modal-content{background:#fff; border-radius:14px; max-width:900px; width:100%; padding:16px; position:relative}
.modal .close, .close{border:none;background:#fff; font-size:24px; cursor:pointer}
.product-detail{display:grid; grid-template-columns:1fr; gap:20px; padding:10px}
.product-detail img{width:100%; border-radius:12px; border:1px solid var(--border)}
@media(min-width:860px){ .product-detail{ grid-template-columns: 1.2fr 1fr } }
.gallery{display:flex; gap:10px; margin-top:10px}
.gallery img{width:80px; height:80px; object-fit:cover; border:1px solid var(--border); border-radius:8px; cursor:pointer}

.age-content{max-width:520px; margin:0 auto}