/* Theme inspired by provided banner (red/black/white) */
:root{
  --brand-red:#e53935; /* close to the banner red */
  --brand-dark:#111318;
  --brand-gray:#f5f5f7;
  --text:#141414;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Tajawal', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  direction:rtl;
  color:var(--text);
  background:#fff;
}
.container{width:min(1200px, 92%); margin-inline:auto}
header{
  position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid #eee;
}
.header-inner{display:flex; align-items:center; gap:16px; padding:10px 0}
.logo-crop{
  width:64px; height:64px; border-radius:12px; background:#fff; border:2px solid #eee;
  background-image:url('https://page.gensparksite.com/v1/base64_upload/ce6d6ad7d138104c99be7aa14ef62376');
  background-size:contain; background-repeat:no-repeat; background-position:center;
}
.brand h1{font-size:20px; margin:0; line-height:1}
.brand small{color:#666}
.cta-top{margin-right:auto}
.cta-btn{background:var(--brand-red); color:#fff; border:none; padding:10px 16px; border-radius:12px; font-weight:700; cursor:pointer}
.cta-btn:hover{filter:brightness(0.95)}

/* Hero */
.hero{
  position:relative; overflow:hidden; background:var(--brand-gray);
}
.hero .banner{
  width:100%; height:360px; background-image:url('https://page.gensparksite.com/v1/base64_upload/b18b3b5e367669de8ca0ed8f3d3190d4');
  background-size:cover; background-position:center; border-radius:0 0 var(--radius) var(--radius);
}



/* Badges */
.badges{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:18px 0}
.badge{background:#fff; border:1px solid #eee; border-radius:999px; padding:8px 14px; display:inline-flex; align-items:center; gap:8px}
.badge i{color:var(--brand-red)}

/* Products */
.products{padding:40px 0}
.products h3{font-size:26px; margin:0 0 18px; text-align:center}
.grid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
@media (max-width:1400px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
/* Mobile-first tweaks */
@media (max-width:480px){
  .hero .banner{height:250px}
  .hero h2{font-size:26px}
  .hero p{font-size:15px}
  .header-inner{gap:10px}
  .brand h1{font-size:18px}
  .card .content{padding:12px}
  .card .img{height:180px}
  .cta-btn{padding:10px 14px}
  .form{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr!important}
  .card .title strong{font-size:14px}
  .card .price{font-size:14px}
  .card .note{font-size:11px}
}
.card{background:#fff; border:1px solid #eee; border-radius:16px; overflow:hidden; display:flex; flex-direction:column}
.card .img{height:200px; background-size:80%; background-repeat:no-repeat; background-position:center; background-color:#fff; border-bottom:1px solid #eee}
.card .img-gray{background-image:url('https://page.gensparksite.com/v1/base64_upload/59f56c4cfce285d17ad2daf289dcaef2')}
.card .img-beige{background-image:url('https://page.gensparksite.com/v1/base64_upload/1bbc0e17808a512a9ef852282dd957ad')}
.card .img-black{background-image:url('https://page.gensparksite.com/v1/base64_upload/e36177d41942c760edb27b1167a7490f')}
.card .img-adult{background-image:url('https://page.gensparksite.com/v1/base64_upload/677fc73e5f9ba4083fb974a4261ce8a8'); background-color:#000; background-size:contain}
.card .img-adult2{background-image:url('https://page.gensparksite.com/v1/base64_upload/eb5b07de826f2aba8a71cd3e71fdcc69'); background-color:#f5f5f5; background-size:contain}
.card .img-adult3{background-image:url('https://page.gensparksite.com/v1/base64_upload/3e81430d20123a52deb1e5c50b3b4e3d'); background-color:#f5f5f5; background-size:contain}
.card .content{padding:14px; display:flex; flex-direction:column; gap:6px}
.card .title{display:flex; align-items:center; justify-content:space-between}
.swatch{width:18px; height:18px; border-radius:50%; border:1px solid #ccc}
.swatch.gray{background:linear-gradient(135deg,#eee,#999)}
.swatch.beige{background:#d1bfa6}
.swatch.black{background:#222}
.card .sizes{color:#555; font-size:14px}
.card .actions{margin-top:auto; display:flex; gap:10px}
.card .buy{flex:1; background:var(--brand-red); color:#fff; border:none; padding:10px; border-radius:12px; cursor:pointer; font-weight:700}
.card .buy:hover{filter:brightness(0.95)}
.card .note{font-size:12px; color:#777}
.card .price{font-weight:700; color:var(--brand-red); font-size:16px}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; padding:20px; z-index:2000}
.modal.open{display:flex}
.modal .panel{background:#fff; width:min(560px, 100%); border-radius:16px; overflow:hidden; border:1px solid #eee}
.modal header{position:relative; border-bottom:1px solid #eee}
.modal header h4{margin:0; padding:14px 16px; font-size:20px}
.modal .close{position:absolute; inset-inline-start:10px; inset-block-start:10px; background:transparent; border:none; font-size:22px; cursor:pointer}
.form{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px}
.form .full{grid-column:1/-1}
label{font-size:14px; color:#333}
input, select, textarea{width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:10px; font-family:inherit}
textarea{min-height:80px}
.submit{background:var(--brand-red); color:#fff; border:none; padding:12px 16px; border-radius:12px; font-weight:700; cursor:pointer}
.helper{font-size:12px; color:#777}

/* Footer */
footer{padding:30px 0; text-align:center; color:#555}
footer a{color:var(--brand-red); text-decoration:none}