:root{--ink:#07140f;--forest:#0b2419;--green:#174f38;--emerald:#287458;--sage:#b9cbb8;--mist:#edf2eb;--ivory:#f7f4ea;--gold:#c5a56a;--white:#fff;--muted:#64716a;--line:rgba(7,20,15,.12);--shadow:0 24px 80px rgba(7,20,15,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--ivory);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{width:min(1180px,calc(100% - 40px));margin:auto}.site-header{position:fixed;z-index:50;top:0;left:0;right:0;color:#fff;background:linear-gradient(180deg,rgba(4,16,11,.72),rgba(4,16,11,.08));backdrop-filter:blur(12px);transition:.35s}.site-header.scrolled{background:rgba(7,27,18,.9);box-shadow:0 10px 40px rgba(0,0,0,.16)}.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand img{width:104px;height:auto}.navlinks{display:flex;gap:30px;align-items:center;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.navlinks a{opacity:.9}.navlinks a:hover{opacity:1;color:#dcebd8}.nav-actions{display:flex;align-items:center;gap:12px}.pill{border:1px solid rgba(255,255,255,.25);padding:10px 16px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.08em}.cart-count{min-width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;background:#fff;color:var(--forest);font-size:10px}.menu{display:none;background:none;border:0;color:#fff;font-size:22px}.hero{min-height:780px;color:#fff;display:flex;align-items:center;position:relative;overflow:hidden;background:#1c4b39}.hero:after{content:"";position:absolute;inset:auto 0 0;height:160px;background:linear-gradient(transparent,var(--ivory))}.hero-inner{padding-top:90px;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;position:relative;z-index:2}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:var(--gold);font-weight:800}.hero h1{font-family:Georgia,serif;font-size:clamp(50px,7vw,75px);line-height:.92;letter-spacing:-.055em;margin:18px 0}.hero p{max-width:620px;color:rgba(255,255,255,.78);font-size:17px}.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:999px;background:var(--forest);color:#fff;border:1px solid var(--forest);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;transition:.3s}.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(7,20,15,.2)}.btn.light{background:#fff;color:var(--forest);border-color:#fff}.btn.ghost{background:transparent;color:inherit;border-color:rgba(255,255,255,.35)}.hero-books{display:flex;justify-content:center;align-items:flex-end;gap:12px;transform:rotate(-2deg)}.hero-books img{width:clamp(90px,11vw,145px);filter:drop-shadow(0 28px 22px rgba(0,0,0,.4));transition:.5s}.hero-books img:nth-child(2){transform:translateY(-32px)}.hero-books img:nth-child(3){transform:translateY(-60px)}.hero-books img:nth-child(4){transform:translateY(-20px)}.hero-books:hover img{transform:translateY(-8px) rotate(1deg)}.hero-books:hover img:nth-child(2){transform:translateY(-48px) rotate(-1deg)}.hero-books:hover img:nth-child(3){transform:translateY(-78px) rotate(2deg)}.section{padding:110px 0}.section.dark{background:var(--forest);color:#fff}.section.mist{background:var(--mist)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:46px}.kicker{font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--emerald);font-weight:900}.section.dark .kicker{color:#9ccdb3}.section h2{font-family:Georgia,serif;font-size:clamp(38px,5vw,64px);line-height:1;margin:8px 0;letter-spacing:-.04em}.section-head p{max-width:450px;color:var(--muted)}.dark .section-head p{color:rgba(255,255,255,.68)}.poetry{display:grid;grid-template-columns:1fr 1fr;gap:20px}.poem{background:#fff;border:1px solid var(--line);padding:44px 48px;box-shadow:var(--shadow);min-height:390px}.poem h3{font-family:Georgia,serif;font-size:30px;margin:0 0 22px}.poem p{white-space:pre-line;text-align:center;max-width:410px;margin:auto;font-family:Georgia,serif;color:#37433d}.poem .sig{margin-top:24px;font-style:italic;font-size:13px}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.product-card{background:#fff;border:1px solid var(--line);padding:16px;position:relative;transition:.35s}.product-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}.product-card .image{aspect-ratio:4/5;display:grid;place-items:center;background:linear-gradient(145deg,#f1f1eb,#e2e9e0);overflow:hidden}.product-card img{height:300px;width:100%;object-fit:contain;transition:.45s}.product-card:hover img{transform:scale(1.04)}.product-card h3{font-size:14px;line-height:1.25;margin:16px 0 7px}.price{font-weight:900;color:var(--green)}.card-actions{display:flex;gap:8px;margin-top:14px}.card-actions .btn{flex:1;padding:11px 10px;font-size:10px}.feature{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.feature.reverse{grid-template-columns:1.2fr .8fr}.feature-image{position:relative}.feature-copy h2{font-size:clamp(40px,5vw,66px)}.feature-copy p{font-size:17px;color:var(--muted);max-width:650px}.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.quote{background:#fff;border:1px solid var(--line);padding:28px;box-shadow:0 10px 30px rgba(0,0,0,.06)}.quote p{font-family:Georgia,serif;font-size:17px}.quote span{font-size:12px;color:var(--muted)}.forest-band{background:linear-gradient(90deg, rgb(7 31 20 / 38%), rgba(7, 31, 20, .6)),url('assets/images/sheikh_alawi.png') center/cover;color:#fff}.dark-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.dark-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);padding:30px;border-radius:18px}.dark-card h3{font-family:Georgia,serif;font-size:24px}.dark-card p{color:rgba(255,255,255,.7)}.newsletter{background:#162a20;color:#fff;border-radius:26px;padding:50px;box-shadow:var(--shadow);max-width:900px;margin:auto}.newsletter form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.newsletter textarea,.newsletter input{width:100%;padding:14px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff}.newsletter textarea{grid-column:1/-1;min-height:120px}.newsletter button{grid-column:1/-1}.site-footer{background:#07150f;color:#fff;padding:70px 0 20px}.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:50px}.site-footer h3{font-family:Georgia,serif;font-size:25px}.site-footer p,.site-footer a{color:rgba(255,255,255,.65);font-size:13px}.copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:50px;padding-top:18px;text-align:center;color:rgba(255,255,255,.45);font-size:11px}.page-hero{min-height:430px;background:linear-gradient(90deg,rgba(4,22,14,.88),rgba(4,22,14,.5)),url('assets/2025/07/Soothing-nature-backgrounds-2.png') center/cover;color:#fff;display:grid;place-items:center;text-align:center;padding-top:80px}.page-hero h1{font-family:Georgia,serif;font-size:clamp(48px,7vw,84px);margin:12px 0}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.article-card{background:#fff;border:1px solid var(--line);overflow:hidden;transition:.35s}.article-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.article-card img{width:100%;aspect-ratio:4/3;object-fit:cover}.article-card .body{padding:24px}.article-card h3{font-family:Georgia,serif;font-size:22px;line-height:1.15}.article-card p{color:var(--muted);font-size:14px}.article{max-width:850px;margin:auto}.article .cover{width:100%;max-height:620px;object-fit:cover;margin-bottom:45px}.article h1{font-family:Georgia,serif;font-size:clamp(42px,6vw,74px);line-height:1;margin:0 0 20px}.article .meta{color:var(--muted);font-size:13px;margin-bottom:45px}.article-body p{font-family:Georgia,serif;font-size:19px;line-height:1.85;color:#26352e;margin:0 0 24px}.shop-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:35px;gap:20px}.shop-toolbar select{padding:12px 14px;border-radius:999px;border:1px solid var(--line);background:#fff}.shop-grid{grid-template-columns:repeat(3,1fr)}.product-page{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}.product-gallery{background:linear-gradient(145deg,#eef2eb,#dce6de);padding:50px;position:sticky;top:100px}.product-gallery img{max-height:720px;width:100%;object-fit:contain}.product-info h1{font-family:Georgia,serif;font-size:clamp(42px,5vw,68px);line-height:1.02;margin:0 0 18px}.product-info .price{font-size:24px;margin-bottom:24px}.product-info .desc{color:var(--muted);font-size:16px;line-height:1.75;white-space:pre-line}.buybox{border-top:1px solid var(--line);margin-top:30px;padding-top:25px;display:flex;gap:12px;flex-wrap:wrap}.cart-page,.checkout-page{max-width:900px;margin:auto}.cart-item{display:grid;grid-template-columns:100px 1fr auto;gap:20px;align-items:center;background:#fff;padding:16px;border:1px solid var(--line);margin-bottom:12px}.cart-item img{width:100px;height:120px;object-fit:contain;background:#edf2eb}.qty{display:flex;align-items:center;gap:10px}.qty button{border:1px solid var(--line);background:#fff;border-radius:50%;width:28px;height:28px}.totals{margin-top:30px;padding:30px;background:#e8eee7}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field input,.field textarea,.field select{padding:14px;border:1px solid var(--line);border-radius:10px;background:#fff}.notice{padding:18px;background:#e7eee7;border-left:3px solid var(--emerald);margin-bottom:25px}.empty{text-align:center;padding:100px 20px;color:var(--muted)}.reveal{opacity:0;transform:translateY(24px);transition:.8s}.reveal.visible{opacity:1;transform:none}.mobile-only{display:none}
@media(max-width:900px){.navlinks{display:none}.menu{display:block}.mobile-only{display:block}.nav{height:66px}.hero{min-height:720px}.hero-inner{grid-template-columns:1fr;padding-top:100px}.hero-books{margin-top:20px}.product-grid{grid-template-columns:repeat(2,1fr)}.feature,.feature.reverse{grid-template-columns:1fr;gap:30px}.feature.reverse .feature-image{order:-1}.quote-grid,.dark-card-grid,.article-grid{grid-template-columns:1fr}.product-page{grid-template-columns:1fr;gap:35px}.product-gallery{position:relative;top:auto}.shop-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr}.poetry{grid-template-columns:1fr}.newsletter form{grid-template-columns:1fr}.newsletter textarea,.newsletter button{grid-column:auto}}
@media(max-width:560px){.container{width:min(100% - 28px,1180px)}.hero h1{font-size:54px}.hero p{font-size:15px}.hero-books img{width:74px}.product-grid,.shop-grid{grid-template-columns:1fr}.section{padding:75px 0}.section-head{display:block}.poem{padding:30px 20px}.product-page .product-gallery{padding:25px}.cart-item{grid-template-columns:70px 1fr}.cart-item img{width:70px;height:90px}.cart-item .card-actions{grid-column:1/-1}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}}



.forest-band{background-attachment: fixed;}

.ion-band{background:linear-gradient(90deg, rgb(7 31 20 / 38%), rgba(7, 31, 20, .6)),url('assets/images/the_path_of_heroes.jpg') center/cover;color:#fff;    background-attachment: fixed;}

.fresh-band{background:linear-gradient(90deg, rgb(7 31 20 / 38%), rgba(7, 31, 20, .6)),url('assets/images/sand_and_hope.jpg') center/cover;color:#fff;    background-attachment: fixed;}

.new-band{background:linear-gradient(90deg, rgb(7 31 20 / 38%), rgba(7, 31, 20, .6)),url('assets/images/new-book.png') center/cover;color:#fff; padding: 152px 0;filter: brightness(0.9);}



@media(max-width:1440px){


.new-band {
    background: linear-gradient(90deg, rgb(7 31 20 / 38%), rgba(7, 31, 20, .6)), url(assets/images/new-book.png) center / cover;
    color: #fff;
    padding: 54px 0;
}

}






.dark-card h3 {
    font-family: Georgia, serif;
    font-size: 24px;
    color: #fff;
}
.dark-card span {
    color: #fff;
}

.feature-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}



.page-hero h1{
    font-size: 50px;
}





/* Hero Carousel */
.hero-carousel {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  overflow: hidden;
  padding: 40px 0 60px;
}

.carousel-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.carousel-track a {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}

.carousel-track img {
  width: clamp(140px, 22vw, 320px);
  filter: drop-shadow(0 28px 22px rgba(0, 0, 0, 0.45));
  transition: transform 0.4s ease;
}

.carousel-track a:hover img {
  transform: translateY(-8px) scale(1.03);
}

/* Arrows */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(7, 27, 18, 0.55);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: 0.3s;
  z-index: 3;
}

.carousel-btn:hover {
  background: rgba(7, 27, 18, 0.9);
  transform: translateY(-50%) scale(1.08);
}

.carousel-btn.prev { left: 0; }
.carousel-btn.next { right: 0; }

/* Dots */
.carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}

.carousel-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  transition: 0.3s;
}

.carousel-dots button.active {
  background: #fff;
  transform: scale(1.3);
}

/* Mobile */
@media (max-width: 900px) {
  .hero-carousel {
    max-width: 360px;
    padding: 20px 0 50px;
  }
  .carousel-track img {
    width: 150px;
  }
  .carousel-btn {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}



.reveal.visible{
    background: transparent;
}




















    /* =========================================================
       BOOK HERO (original, no changes)
    ========================================================= */
    .book-hero {
      --hero-bg: #002d22;
      --hero-mint: #83f2d2;
      --hero-white: #f8fbf8;
      --hero-ink: #002d22;

      position: relative;
      width: 100%;
      overflow: hidden;
      isolation: isolate;

      color: var(--hero-white);

      background:
        radial-gradient(ellipse at 75% 40%, rgba(0, 112, 79, 0.40), transparent 48%),
        radial-gradient(ellipse at 20% 85%, rgba(0, 70, 49, 0.28), transparent 50%),
        linear-gradient(110deg, #001b15 0%, #003d2e 100%);

      font-family: Arial, Helvetica, sans-serif;
      padding: 60px 0;
    }

    .book-hero,
    .book-hero * {
      box-sizing: border-box;
    }

    /* =========================================================
       1240PX CONTAINER
    ========================================================= */
    .book-hero__inner {
      width: min(1240px, calc(100% - 40px));
      min-height: 545px;

      margin: 0 auto;
      padding: 32px 0;

      display: grid;

      grid-template-columns: 48% 52%;

      align-items: center;
    }

    /* =========================================================
       LEFT CONTENT
    ========================================================= */
    .book-info {
      position: relative;
      z-index: 20;

      width: 100%;
      max-width: 455px;

      min-width: 0;
      padding-right: 25px;
    }

    .book-author {
      display: inline-flex;
      align-items: center;

      min-height: 27px;

      padding: 5px 13px;
      margin-bottom: 20px;

      border: 1px solid rgba(255, 255, 255, 0.40);
      border-radius: 30px;

      background: rgba(255, 255, 255, 0.10);

      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.3px;
      line-height: 1.3;
    }

    .book-category {
      width: fit-content;
      max-width: 100%;

      margin-bottom: 14px;
      padding: 4px 10px;

      border: 1px solid rgba(131, 242, 210, 0.60);

      background: rgba(131, 242, 210, 0.10);

      color: var(--hero-mint);

      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1px;
      line-height: 1.3;
    }

    .book-heading {
      margin: 0 0 14px;

      color: var(--hero-white);

      font-family: Georgia, "Times New Roman", serif;

      font-size: clamp(31px, 3.2vw, 40px);
      font-weight: 700;

      line-height: 1;
      letter-spacing: -1.5px;

      overflow-wrap: anywhere;
    }

    .book-heading span,
    .book-heading em {
      display: block;
    }

    .book-heading em {
      margin-top: 3px;

      color: var(--hero-mint);

      font-weight: 700;
      font-style: italic;

      text-shadow: 0 3px 15px rgba(0, 0, 0, 0.25);
    }

    .book-description {
      width: 100%;
      max-width: 390px;

      margin: 0 0 23px;

      color: rgba(255, 255, 255, 0.82);

      font-size: 15px;
      font-weight: 400;
      line-height: 1.55;
    }

    .book-purchase {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      gap: 16px;
    }

    .book-price {
      color: #fff;

      font-size: 18px;
      font-weight: 800;

      white-space: nowrap;
    }

    .book-button {
      min-height: 37px;

      padding: 0 21px;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      gap: 9px;

      border-radius: 30px;

      background: #fff;
      color: #12382e;

      text-decoration: none;

      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.35px;

      white-space: nowrap;

      transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

    .book-button:hover {
      background: var(--hero-mint);
      color: #00271d;

      transform: translateY(-2px);
    }

    /* =========================================================
       DOTS
    ========================================================= */
    .book-dots {
      display: flex;
      align-items: center;

      gap: 8px;

      margin-top: 21px;
    }

    .book-dot {
      width: 13px;
      height: 13px;

      padding: 0;

      flex: 0 0 13px;

      border: 1.5px solid rgba(255, 255, 255, 0.62);
      border-radius: 50%;

      background: rgba(255, 255, 255, 0.35);

      cursor: pointer;

      transition: width 0.25s ease, flex-basis 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    }

    .book-dot.is-active {
      border-color: #fff;

      background: #fff;

      box-shadow: 0 0 12px rgba(255, 255, 255, 0.65);
    }

    /* =========================================================
       RIGHT CAROUSEL
    ========================================================= */
    .book-carousel {
      position: relative;

      width: 100%;
      min-width: 0;

      height: 475px;

      overflow: visible;

      perspective: 1400px;
    }

    .book-stage {
      position: absolute;

      inset: 0;

      overflow: visible;

      transform-style: preserve-3d;
    }

    /* =========================================================
       BOOK CARDS
    ========================================================= */
    .book-card {
      position: absolute;

      top: 50%;
      left: 50%;

      width: 175px;
      height: 300px;

      margin: 0;
      padding: 0;

      border: 1px solid rgba(210, 255, 241, 0.20);
      border-radius: 3px;

      background: #06382b;


      /*box-shadow: 0 15px 35px rgba(0, 0, 0, 0.36);*/

      transform-origin: center center;

      transition: transform 0.65s cubic-bezier(0.2, 0.75, 0.25, 1), opacity 0.45s ease, filter 0.45s ease, box-shadow 0.45s ease;

      cursor: pointer;

      overflow: visible;
    }

    .book-card__cover {
      position: absolute;

      inset: 0;

      display: block;

      width: 100%;
      height: 100%;

      object-fit: cover;
      object-position: center;
      padding: 15px;

      border-radius: 2px;

      /*background: linear-gradient(145deg, #152f28, #a16a29);*/
    }

    /*.book-card::after {*/
    /*  content: "";*/

    /*  position: absolute;*/

    /*  top: 1%;*/
    /*  right: -5.5%;*/

    /*  width: 6%;*/
    /*  height: 98%;*/

    /*  border-radius: 0 2px 2px 0;*/

    /*  border: 1px solid rgba(0, 0, 0, 0.35);*/

    /*  background: repeating-linear-gradient(90deg, #eee7d7 0, #fffdf4 2px, #b9b4a8 3px, #f7f0e2 5px);*/

    /*  transform: skewY(2deg);*/

    /*  transform-origin: left center;*/

    /*  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);*/

    /*  pointer-events: none;*/
    /*}*/

    .book-card.is-active {
      z-index: 10;

      border: 2px solid #f4fff9;
      border-radius: 17px;

      /* background: #003b2b; */
      /*background: #000;*/

      /*box-shadow: 0 0 0 1px rgba(131, 242, 210, 0.25), 0 0 23px rgba(131, 242, 210, 0.42), 0 18px 48px rgba(0, 0, 0, 0.45);*/

      cursor: default;
    }

    .book-card.is-active .book-card__cover {
      inset: 10px;

      width: calc(100% - 20px);
      height: calc(100% - 20px);
      padding: 0;

      border-radius: 2px;

      /*box-shadow: 8px 10px 15px rgba(0, 0, 0, 0.25);*/
    }

    .book-card.is-active::after {
      right: 2%;

      width: 5%;

      top: 5%;
      height: 90%;

      transform: translateX(100%) skewY(2deg);
    }

    .book-card:not(.is-active) {
      filter: brightness(0.72) saturate(0.82);
    }

    .book-card.is-hidden {
      opacity: 0 !important;

      pointer-events: none !important;
    }

    /* =========================================================
       ARROWS
    ========================================================= */
    .book-arrow {
      position: absolute;

      top: 50%;

      z-index: 30;

      width: 36px;
      height: 36px;

      display: grid;
      place-items: center;

      padding: 0;

      border: none;
      border-radius: 50%;

      background: #fff;

      color: #00382a;

      font-family: Arial, sans-serif;

      font-size: 22px;
      font-weight: 900;

      cursor: pointer;

      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.13);

      transform: translateY(-50%);

      transition: background 0.2s ease, transform 0.2s ease;
    }

    .book-arrow:hover {
      background: var(--hero-mint);

      transform: translateY(-50%) scale(1.06);
    }

    .book-arrow--prev {
      left: -165px;
    }

    .book-arrow--next {
      right: -165px;
    }

    /* =========================================================
       FOCUS
    ========================================================= */
    .book-dot:focus-visible,
    .book-arrow:focus-visible,
    .book-button:focus-visible,
    .book-card:focus-visible {
      outline: 3px solid var(--hero-mint);
      outline-offset: 4px;
    }

    /* =========================================================
       TABLET (original, no change)
    ========================================================= */
    @media (max-width: 1050px) {
      .book-hero__inner {
        width: min(1240px, calc(100% - 32px));
        grid-template-columns: 42% 58%;
      }

      .book-info {
        padding-right: 15px;
      }

      .book-carousel {
        height: 425px;
      }

      .book-card {
        width: 145px;
        height: 255px;
      }

      .book-arrow {
        width: 48px;
        height: 48px;
        font-size: 18px;
      }

      .book-heading {
        font-size: clamp(29px, 4vw, 40px);
      }

      .book-description {
        font-size: 14px;
      }
    }

    /* =========================================================
       MOBILE — TEXT ABOVE, BOOK BELOW, ONLY ACTIVE BOOK
    ========================================================= */
    @media (max-width: 700px) {

      .book-hero {
        overflow: hidden;
      }

      /* ---- stack everything, text first ---- */
      .book-hero__inner {
        width: calc(100% - 30px);

        min-height: auto;

        display: flex;
        flex-direction: column;

        padding: 35px 0 35px;

        gap: 15px;
      }

      /* ---- text block (order 1) ---- */
      .book-info {
        order: 1;

        width: 100%;
        max-width: none;

        padding-right: 0;
                padding: 40px 20px;
      }

      .book-author {
        margin-bottom: 15px;
      }

      .book-category {
        margin-bottom: 12px;
      }

      .book-heading {
        font-size: clamp(31px, 9vw, 43px);

        line-height: 1.02;

        letter-spacing: -1px;
      }

      .book-description {
        max-width: 100%;

        margin-bottom: 18px;

        font-size: 14px;

        line-height: 1.55;
      }

      .book-purchase {
        gap: 13px;
      }

      /* ---- carousel (order 2) ---- */
      .book-carousel {
        order: 2;

        width: 100%;

        height: 350px;

        margin-top: 5px;

        perspective: 1200px;
      }

      /* ---- only active book visible on mobile ---- */
      .book-card {
        width: 170px;
        height: 295px;
      }

      /* hide all non-active cards */
      .book-card:not(.is-active) {
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden;
      }

      .book-card.is-active {
        opacity: 1 !important;
        visibility: visible;
      }

      .book-arrow {
        width: 43px;
        height: 43px;
        font-size: 16px;
      }

      .book-arrow--prev {
        left: 5px;
      }

      .book-arrow--next {
        right: 5px;
      }

      /* ---- dots ---- */
      .book-dots {
        margin-top: 19px;
        gap: 7px;
      }

      .book-dot {
        width: 11px;
        height: 11px;
        flex-basis: 11px;
      }
    }

    /* =========================================================
       SMALL PHONES (original, no change)
    ========================================================= */
    @media (max-width: 400px) {
      .book-hero__inner {
        width: calc(100% - 24px);
      }

      .book-heading {
        font-size: 30px;
      }

      .book-carousel {
        height: 320px;
      }

      .book-card {
        width: 155px;
        height: 270px;
      }

      .book-arrow {
        width: 38px;
        height: 38px;
      }
    }

    /* =========================================================
       REDUCE MOTION
    ========================================================= */
    @media (prefers-reduced-motion: reduce) {
      .book-card,
      .book-dot,
      .book-button,
      .book-arrow {
        transition: none;
      }
    }









/* Desktop — overflow visible by default */
.site-header {
  overflow-y: visible;
}

/* Mobile only (typically < 768px) */
@media (max-width: 767px) {
    .site-header {
        z-index: 1001;
        position: relative;
 
    }
}




/* Nav panel scrolls internally */
.navlinks {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1400px) {
    .book-arrow--next {
        right: 87px;
    }
}