:root{
    --paper:#FBF9F2;
    --surface:#E8DFC7;
    --ink:#22271B;
    --ink-soft:#5F6354;
    --line:#DAD2B8;
    --green:#324427;
    --green-deep:#232F1B;
    --gold:#FFC60B;
    --white:#FFFFFF;

    --font:'IBM Plex Sans Arabic', sans-serif;
    --container:1240px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--font);
    background:var(--paper);
    color:var(--ink);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    font-weight:400;
  }
  img{max-width:100%; display:block; width:100%; height:100%; object-fit:cover;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit; cursor:pointer; border:none; background:none;}
  .wrap{max-width:var(--container); margin:0 auto; padding:0 28px;}
  h1,h2,h3,h4{font-weight:700; line-height:1.3;}

  /* promo bar */
  .promo-bar{background:var(--green); color:var(--white); text-align:center; font-size:.78rem; letter-spacing:0; padding:9px 12px;}

  /* header */
  header{position:sticky; top:0; z-index:100; background:rgba(251,249,242,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
  .nav-row{display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:20px;}
  .logo{font-size:1.35rem; font-weight:700; letter-spacing:.01em; white-space:nowrap;}
  .logo span{color:var(--green);}
  nav.primary ul{display:flex; gap:32px; font-size:.92rem; font-weight:500;}
  nav.primary li{position:relative;}
  nav.primary a{display:block; padding:8px 0;}
  nav.primary a:hover{color:var(--green);}
  .has-mega:hover .mega{display:grid;}
  .has-mega > a::after{content:"˅"; font-size:.7rem; margin-inline-start:4px; opacity:.6;}
  .mega{display:none; position:absolute; top:100%; right:0; background:var(--white); border:1px solid var(--line); box-shadow:0 20px 40px rgba(0,0,0,.08); padding:22px; grid-template-columns:190px; gap:2px; z-index:10;}
  .mega a{font-size:.86rem; font-weight:400; padding:8px 10px; color:var(--ink-soft); border-radius:2px; display:flex; align-items:center; justify-content:space-between;}
  .mega a:hover{color:var(--green); background:var(--paper);}
  .mega .soon{font-size:.66rem; background:var(--surface); color:var(--ink-soft); padding:2px 7px; border-radius:10px;}
  .nav-actions{display:flex; align-items:center; gap:20px;}
  .icon-btn{width:20px; height:20px; position:relative; display:flex; align-items:center; justify-content:center;}
  .icon-btn svg{width:19px; height:19px; stroke:var(--ink); fill:none; stroke-width:1.6;}
  .cart-count{position:absolute; top:-8px; left:-9px; background:var(--green); color:var(--white); font-size:.6rem; font-weight:700; width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
  .menu-toggle{display:none;}

  /* hero carousel */
  .hero{position:relative; height:78vh; min-height:480px; max-height:620px; overflow:hidden; color:var(--white);}
  .hero-slide{position:absolute; inset:0; opacity:0; transition:opacity .7s ease; display:flex; align-items:flex-end;}
  .hero-slide.active{opacity:1; z-index:2;}
  .hero-slide img{position:absolute; inset:0; z-index:0;}
  .hero-slide::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,20,14,.82) 0%, rgba(20,20,14,.25) 55%, rgba(20,20,14,.05) 100%); z-index:0;}
  .hero-content{position:relative; z-index:1; padding-bottom:64px; max-width:600px;}
  .hero-eyebrow{display:flex; align-items:center; gap:9px; font-size:.78rem; letter-spacing:0; font-weight:600; margin-bottom:16px; color:var(--gold);}
  .mark-icon{width:17px; height:13px; flex-shrink:0; color:inherit;}
  .hero h1{font-size:clamp(1.9rem,3.6vw,2.9rem); margin-bottom:16px;}
  .hero p{font-size:1rem; color:#EDEAE0; margin-bottom:24px; max-width:460px; font-weight:300;}
  .hero-dots{position:absolute; bottom:24px; left:28px; z-index:3; display:flex; gap:9px;}
  .hero-dot{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.4); transition:.2s;}
  .hero-dot.active{background:var(--gold); width:22px; border-radius:5px;}

  .btn{display:inline-block; padding:13px 30px; background:var(--white); color:var(--ink); font-size:.9rem; font-weight:600; border-radius:2px; transition:.2s;}
  .btn:hover{background:var(--green); color:var(--white);}
  .btn.solid{background:var(--green); color:var(--white);}
  .btn.solid:hover{background:var(--green-deep);}

  .section{padding:64px 0;}
  .section.alt{background:var(--surface);}
  .section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:34px; gap:20px; flex-wrap:wrap;}
  .eyebrow-sm{display:flex; align-items:center; gap:8px; font-size:.74rem; font-weight:600; letter-spacing:0; color:var(--green); margin-bottom:10px;}
  .section-head h2{font-size:1.7rem;}
  .see-all{font-size:.86rem; font-weight:600; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:2px; white-space:nowrap;}
  .see-all:hover{color:var(--green); border-color:var(--green);}

  .book-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
  .book-card{cursor:pointer;}
  .book-frame{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--surface); border:1px solid var(--line); margin-bottom:16px;}
  .book-frame img{transition:opacity .35s ease; position:absolute; inset:0;}
  .book-frame img.secondary{opacity:0;}
  .book-card:hover .book-frame img.primary{opacity:0;}
  .book-card:hover .book-frame img.secondary{opacity:1;}
  .badge{position:absolute; top:10px; right:10px; z-index:2; background:var(--gold); color:var(--ink); font-size:.66rem; font-weight:700; letter-spacing:0; padding:5px 10px; border-radius:1px;}
  .book-meta .author{font-size:.78rem; color:var(--ink-soft); margin-bottom:3px;}
  .book-meta .title{font-weight:600; font-size:.98rem; margin-bottom:8px; line-height:1.4;}
  .price-row{display:flex; align-items:center; justify-content:space-between;}
  .price{font-weight:600; font-size:.9rem; color:var(--ink);}
  .price small{display:block; font-size:.68rem; color:var(--ink-soft); font-weight:400;}
  .add-btn{font-size:.74rem; font-weight:600; border:1px solid var(--ink); padding:6px 13px; border-radius:1px; transition:.2s;}
  .add-btn:hover{background:var(--ink); color:var(--white);}

  .featured-article{display:grid; grid-template-columns:1.15fr 1fr; gap:52px; align-items:center;}
  .featured-visual{aspect-ratio:4/3; overflow:hidden; position:relative; border:1px solid var(--line);}
  .featured-copy h3{font-size:1.8rem; margin-bottom:16px;}
  .featured-copy p{color:var(--ink-soft); margin-bottom:22px; max-width:480px; font-weight:300;}
  .read-link{font-weight:600; color:var(--green); border-bottom:1px solid var(--green); padding-bottom:2px;}
  .featured-copy .meta{font-size:.82rem; color:var(--ink-soft); margin-top:22px;}

  .article-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
  .article-card .thumb{aspect-ratio:4/3; overflow:hidden; margin-bottom:16px; border:1px solid var(--line);}
  .article-card h4{font-size:1.08rem; margin-bottom:8px; line-height:1.45; font-weight:600;}
  .article-card p{font-size:.88rem; color:var(--ink-soft); margin-bottom:10px; font-weight:300;}
  .article-card .date{font-size:.76rem; color:var(--ink-soft); opacity:.8;}

  /* community teaser */
  .community{display:grid; grid-template-columns:1fr 1.1fr; gap:52px; align-items:center;}
  .community-visual{aspect-ratio:4/3; overflow:hidden; position:relative; border:1px solid var(--line);}
  .pin-badge{display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:600; background:var(--white); border:1px solid var(--line); padding:6px 12px; border-radius:20px; margin-bottom:16px;}
  .community-copy h3{font-size:1.7rem; margin-bottom:14px;}
  .community-copy p{color:var(--ink-soft); margin-bottom:22px; max-width:460px; font-weight:300;}

  .newsletter{background:var(--green); color:var(--white); width:100%;}
  .newsletter-inner{display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:380px;}
  .newsletter-copy{padding:70px 56px; display:flex; flex-direction:column; justify-content:center;}
  .newsletter-visual{position:relative; overflow:hidden; background:var(--green-deep); display:flex; align-items:center; justify-content:center;}
  .newsletter-visual img{object-fit:contain; padding:24px;}
  .badge-pill{display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:0; background:var(--gold); color:var(--ink); padding:7px 18px; border-radius:2px; margin-bottom:20px; width:fit-content;}
  .newsletter h2{font-size:1.9rem; margin-bottom:14px;}
  .newsletter p{color:#DDE3D4; max-width:440px; margin-bottom:30px; font-weight:300;}
  .sub-form{display:flex; max-width:440px; border:1px solid rgba(255,255,255,.3); border-radius:2px; overflow:hidden;}
  .sub-form input{flex:1; padding:15px 16px; background:transparent; color:var(--white); font-family:inherit; font-size:.92rem;}
  .sub-form input::placeholder{color:#B9C2AC;}
  .sub-form button{padding:15px 24px; background:var(--gold); color:var(--ink); font-weight:700; font-size:.86rem; white-space:nowrap;}
  .sub-form button:hover{background:#E6B200;}
  .newsletter .fine{font-size:.76rem; color:#B9C2AC; margin-top:14px;}

  footer{background:var(--surface); border-top:1px solid var(--line); padding-top:56px;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:44px; border-bottom:1px solid var(--line);}
  .footer-brand p{font-size:.85rem; color:var(--ink-soft); max-width:280px; margin:14px 0 20px; font-weight:300;}
  .footer-social{display:flex; gap:14px;}
  .footer-social a svg{width:17px; height:17px; stroke:var(--ink-soft); fill:none; stroke-width:1.6; transition:.2s;}
  .footer-social a:hover svg{stroke:var(--green);}
  .footer-col h5{font-size:.82rem; font-weight:700; margin-bottom:16px;}
  .footer-col ul li{margin-bottom:10px;}
  .footer-col a, .footer-col span{font-size:.85rem; color:var(--ink-soft);}
  .footer-col a:hover{color:var(--green);}
  .tel-num{direction:ltr; unicode-bidi:isolate; display:inline-block;}
  .footer-bottom{display:flex; align-items:center; justify-content:space-between; padding:20px 0 32px; font-size:.78rem; color:var(--ink-soft); flex-wrap:wrap; gap:10px;}

  @media (max-width:980px){
    .hero{height:64vh;}
    .book-grid{grid-template-columns:repeat(2,1fr);}
    .featured-article{grid-template-columns:1fr;}
    .article-grid{grid-template-columns:1fr;}
    .community{grid-template-columns:1fr;}
    .newsletter-inner{grid-template-columns:1fr;}
    .newsletter-visual{min-height:220px; order:-1;}
    .footer-grid{grid-template-columns:1fr 1fr; gap:30px;}
    nav.primary{display:none;}
    .menu-toggle{display:flex; width:20px; height:20px; align-items:center; justify-content:center;}
    .menu-toggle svg{width:20px; height:20px; stroke:var(--ink); fill:none; stroke-width:1.6;}
  }
  @media (max-width:560px){
    .book-grid{grid-template-columns:1fr; gap:22px; max-width:320px; margin:0 auto;}
    .sub-form{flex-direction:column; border:none; gap:10px;}
    .sub-form input, .sub-form button{border:1px solid rgba(255,255,255,.3); border-radius:2px;}
    .section-head{flex-direction:column; align-items:flex-start;}
    .footer-grid{grid-template-columns:1fr;}
    .newsletter-copy{padding:48px 24px;}
  }

.shop-card{display:block}