:root{--navy:#2a4b7a;--teal:#76c3cb;--paper:#f3f2f0;--white:#fff;--stone:#dad9d8;--ar:Tajawal,Montserrat,sans-serif;--en:Montserrat,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--navy);font:16px/1.6 var(--ar)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.2;margin:0 0 8px}
h1{font-size:clamp(28px,5vw,44px);font-weight:800}
h2{font-size:clamp(24px,4vw,32px);font-weight:800}
h2 small{font:600 13px var(--en);margin-inline-start:8px;letter-spacing:.08em;text-transform:uppercase}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.btn{display:inline-block;padding:14px 24px;background:var(--navy);color:var(--white);text-decoration:none;font-weight:700;border:0;cursor:pointer;font-family:inherit;font-size:16px}
.btn:hover{background:#1e3658}
.btn--teal{background:var(--teal);color:var(--navy)}
.btn--block{display:block;width:100%;text-align:center}
.btn[disabled]{opacity:.5;cursor:default}
.num{font-family:var(--en);font-weight:700}
.hdr{background:var(--paper);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--stone)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.hdr__logo img{width:150px}
.hdr nav{display:flex;gap:4px;flex-wrap:wrap}
.hdr nav a{padding:8px 12px;text-decoration:none;font-weight:700;font-size:15px}
.hdr nav a:hover{background:var(--white)}
.hdr__cart{text-decoration:none;font-weight:700;padding:8px 12px;background:var(--navy);color:var(--white)}
.hdr__cart b{font-family:var(--en)}
.announce{background:var(--navy);color:var(--white);text-align:center;padding:8px 16px;font-size:14px;font-weight:700}
.hero{position:relative;min-height:70vh;display:grid;place-items:end start;color:var(--white);background:var(--navy)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(42,75,122,.85),rgba(42,75,122,0) 60%)}
.hero__txt{position:relative;z-index:1;padding:40px 16px;max-width:1200px;margin:0 auto;width:100%}
.hero__kick{font:900 clamp(14px,2vw,18px) var(--en);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0 0 8px}
.hero h1{color:var(--white);margin-bottom:16px}
.tiers{padding:48px 0 16px}
.tiers__grid{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.tier{background:var(--white);padding:24px 16px;text-align:center}
.tier b{display:block;font:900 clamp(28px,5vw,44px)/1 var(--en);color:var(--teal)}
.tier b small{font-size:.4em;color:var(--navy)}
.tier span{display:block;font-weight:700;margin-top:6px}
.tiers__note{text-align:center;margin:16px 0 0;font-weight:700}
.grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{display:block;background:var(--white);text-decoration:none;padding:0 0 16px;text-align:center}
.card__img{aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden;background:var(--white)}
.card__img img{width:100%;height:100%;object-fit:contain}
.card h3{font-size:16px;font-weight:700;margin:12px 12px 2px}
.card p{margin:0;font-family:var(--en);font-weight:700}
.card .sold{color:#b33;font-size:13px}
section.block{padding:40px 0 8px}
.campaign .grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:600px){.campaign .grid{grid-template-columns:1fr}}
.pdp{display:grid;gap:32px;padding:32px 0;grid-template-columns:1fr}
@media(min-width:900px){.pdp{grid-template-columns:1.1fr 1fr;align-items:start}}
.pdp__media{display:grid;gap:8px}
.pdp__media img{background:var(--white);width:100%}
.pdp__price{font:700 28px var(--en);margin:4px 0 16px}
.pdp label{display:block;font-weight:700;margin:16px 0 6px}
.pdp select,.pdp input[type=number],.cart input[type=number]{font:inherit;padding:12px;border:1px solid var(--stone);background:var(--white);width:100%;max-width:280px}
.pdp .btn{margin-top:16px}
.bundle{background:var(--white);padding:16px;margin:24px 0;border-inline-start:4px solid var(--teal)}
.bundle b{font-family:var(--en)}
.rte{max-width:640px}
.cart{padding:32px 0}
.cart table{width:100%;border-collapse:collapse;background:var(--white)}
.cart td,.cart th{padding:12px;border-bottom:1px solid var(--stone);text-align:start;vertical-align:middle}
.cart td img{width:72px}
.cart .qty{max-width:80px}
.cart__foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-top:24px}
.cart__total{font:700 24px var(--en)}
.cart .rm{font-size:13px}
.page{padding:40px 0;max-width:760px}
.search form{display:flex;gap:8px;max-width:520px;margin-bottom:24px}
.search input{flex:1;font:inherit;padding:12px;border:1px solid var(--stone)}
.pw{min-height:80vh;display:grid;place-items:center;text-align:center;padding:24px}
.ftr{margin-top:64px;background:var(--navy);color:var(--white);padding:48px 0 32px}
.ftr .wrap{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:720px){.ftr .wrap{grid-template-columns:1fr 1fr 1fr}}
.ftr img{width:160px}
.ftr a{color:var(--white);text-decoration:none;font-weight:700;display:block;margin-bottom:6px}
.ftr .tag{font:900 14px var(--en);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.ftr .copy{grid-column:1/-1;font:400 12px var(--en);opacity:.7}
@media(min-width:900px){.hero img{object-position:50% 28%}.hero{min-height:78vh}}
@media(max-width:719px){.hdr nav{display:none}.hdr__logo img{width:120px}.hdr .wrap{min-height:60px}}
