:root{
  --black:#000; --red:#e30613; --white:#fff;
  --gray-50:#fcfcfd; --gray-100:#f7f7f8; --gray-200:#efefef; --gray-600:#6b7280; --gray-800:#1f2937;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.06); --container:1200px;
}

/* ===== Reset & Base ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--black); background:var(--white);
  font:400 16px/1.7 ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, "Noto Kufi Arabic", "Cairo", "IBM Plex Sans Arabic", sans-serif;
}
img{max-width:100%; height:auto; display:block}
a{text-decoration:none; color:inherit}
.container{max-width:var(--container); margin-inline:auto; padding-inline:20px}
.section{padding:56px 0}
.grid{display:grid; gap:20px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.grid.cols-4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.grid.cols-4,.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

/* ===== Header ===== */
.header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.95);
  border-bottom:2px solid var(--red); backdrop-filter:saturate(120%) blur(6px);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{font-weight:900; font-size:22px}
.logo span{color:var(--red)}
.menu a{margin-inline-start:12px; padding:8px 12px; border-radius:10px; font-weight:600}
.menu a:hover{background:var(--gray-100)}
.lang-switch{margin-inline-start:12px; border:1px solid var(--black); padding:8px 12px; border-radius:10px; cursor:pointer; background:transparent}

/* ===== Buttons ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--black); padding:10px 14px; border-radius:10px; font-weight:800; background:var(--white); cursor:pointer}
.btn-primary{display:inline-block; background:var(--red); color:var(--white); padding:12px 20px; border-radius:10px; font-weight:800; border:1px solid var(--red)}
.btn-primary:hover{filter:saturate(115%) brightness(1.05)}

/* ===== Hero ===== */
.hero{background:var(--black); color:var(--white); padding:60px 20px}
.hero-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:30px}
.hero-text{flex:1}
.hero-text h1{font-size:36px; font-weight:900; margin:0 0 20px; color:var(--red)}
.hero-text p{font-size:18px; margin:0 0 24px}
.hero-img img{border-radius:12px; max-width:420px; width:100%; box-shadow:0 10px 25px rgba(0,0,0,.2)}

/* ===== Products Intro ===== */
.products-intro{background:var(--gray-100); text-align:center; padding:70px 20px 60px; border-bottom:2px solid var(--red)}
.section-title{font-size:32px; font-weight:900; margin:0 0 12px}
.section-sub{font-size:18px; max-width:720px; margin:0 auto 26px}

/* ===== Product Gallery ===== */
#gallery{scroll-margin-top:90px}
.card{background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:.22s}
.card:hover{transform:translateY(-4px)}
.card .cover{aspect-ratio:3/4; object-fit:cover; width:100%}
.card-body{padding:14px}
.book-title{font-weight:900; margin:8px 0 6px}
.price{font-weight:800; color:var(--black); margin-bottom:10px}
.actions{display:flex; gap:10px; flex-wrap:wrap}
.btn-buy{background:var(--red); border-color:var(--red); color:var(--white)}
.badge{display:inline-block; background:var(--black); color:var(--white); padding:6px 10px; border-radius:999px; font-size:12px}

/* ===== CTA after gallery ===== */
.after-gallery{background:var(--black); color:var(--white); text-align:center; padding:80px 20px; margin-top:40px; border-top:3px solid var(--red)}
.cta-title{font-size:30px; font-weight:900; margin:0 0 18px; color:var(--red)}
.cta-sub{font-size:18px; max-width:720px; margin:0 auto 26px}

/* ===== Pre-checkout info ===== */
.pre-checkout{margin:34px 0 18px}
.pre-grid{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.pre-grid{grid-template-columns:1fr}}
.pre-block{background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px}
.pre-title{margin:0 0 10px; font-weight:900; font-size:18px}
.steps{margin:0 0 12px; padding-inline-start:22px}
.steps li{margin:6px 0}
.bullets{margin:0 0 10px; padding-inline-start:18px}
.bullets li{margin:6px 0}
.progress{height:8px; background:var(--gray-200); border-radius:999px; overflow:hidden; margin:6px 0 4px}
.progress-bar{height:100%; background:var(--red)}
.pay-badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}

/* ===== Checkout form (demo) ===== */
.checkout{background:var(--gray-50); border-top:1px solid var(--gray-200); padding:40px 0}
.form{display:grid; gap:14px; grid-template-columns:repeat(2,1fr)}
.form .full{grid-column:1/-1}
.input, input, select, textarea{width:100%; border:1px solid var(--gray-200); border-radius:12px; padding:12px 14px; outline:none}
input:focus, select:focus, textarea:focus{border-color:var(--black); box-shadow:0 0 0 3px rgba(227,6,19,.12)}
label{font-weight:800; font-size:14px}

/* ===== FAQ ===== */
.faq-section{background:var(--gray-100); padding:60px 20px; border-top:3px solid var(--red); margin-top:30px}
.faq-title{text-align:center; font-size:28px; font-weight:900; margin-bottom:30px}
.faq-item{background:var(--white); border:1px solid var(--gray-200); border-radius:12px; padding:18px 20px; margin-bottom:16px; box-shadow:var(--shadow)}
.faq-item h3{margin:0 0 8px; font-size:18px; color:var(--red)}
.faq-item p{margin:0; font-size:15px}

/* ===== Trust strip (above footer) ===== */
.trust-strip{background:var(--black); color:var(--white); padding:60px 20px; border-top:3px solid var(--red)}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1100px; margin:0 auto 50px}
.trust-item{text-align:center; padding:15px}
.trust-item .icon{font-size:32px; display:block; margin-bottom:8px}
.trust-item h4{margin:8px 0; font-size:18px; color:var(--red); font-weight:800}
.trust-item p{margin:0; font-size:15px; color:#ddd}
.newsletter{text-align:center; max-width:600px; margin:0 auto}
.newsletter h3{margin:0 0 10px; font-size:24px; font-weight:900; color:var(--red)}
.newsletter p{margin:0 0 20px; color:#ccc}
.newsletter-form{display:flex; justify-content:center; gap:10px; flex-wrap:wrap}
.newsletter-form input{flex:1; min-width:220px; padding:12px 14px; border:none; border-radius:8px; outline:none}
.newsletter-form button{background:var(--red); color:var(--white); border:none; padding:12px 22px; border-radius:8px; font-weight:700; cursor:pointer}
.newsletter-form button:hover{filter:saturate(115%) brightness(1.05)}

/* ===== Bottom footer ===== */
.bottom-footer{background:var(--black); color:#bbb; font-size:14px; padding:16px 20px; border-top:1px solid #333}
.bottom-inner{max-width:var(--container); margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.bottom-footer .brand{color:var(--red); font-weight:700}
.bottom-footer .links a{margin-inline-start:18px; color:#bbb}
.bottom-footer .links a:hover{color:var(--red)}

/* ===== Utilities ===== */
.center{text-align:center}
.muted{color:var(--gray-600)}
.hr{height:1px; background:var(--gray-200); margin:24px 0}

/* ===== RTL/LTR tweaks ===== */
[dir="ltr"] .steps, [dir="ltr"] .bullets{padding-inline-start:22px}