: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}}


.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: 520px;

      overflow: visible;

      perspective: 1400px;
      perspective-origin: 50% 50%;
    }

    .book-stage {
      position: absolute;

      inset: 0;

      overflow: visible;

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

      transform-style: preserve-3d;
    }

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

      top: 50%;
      left: 50%;

      width: 235px;
      height: auto;
      aspect-ratio: 2 / 3;

      margin: 0;
      padding: 0;

      border: 3.5px solid rgba(255, 255, 255, 0.2);
      border-radius: 14px;

      background: #123a29;

      overflow: hidden;
      cursor: pointer;
      user-select: none;

      transform-origin: center center;
      transform-style: preserve-3d;

      transition:
        transform 0.6s cubic-bezier(0.2, 0.8, 0.25, 1),
        opacity 0.45s ease,
        filter 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;

      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8);

      /* keep the JS-set translate(-50%,-50%) baseline via CSS var */
      transform: translate(-50%, -50%);
    }

    .book-card__cover {
      position: absolute;
      inset: 0;

      display: block;
      width: 100%;
      height: 100%;

      object-fit: cover;
      object-position: center;

      border-radius: 10px;

      pointer-events: none;
    }

    /* =========================================================
       CONCAVE SLOT POSITIONS
    ========================================================= */
    .book-card.slot-center {
      transform: translate(-50%, -50%) translateX(0) translateZ(110px) scale(1.18);
      z-index: 30;
      opacity: 1;
      border-color: #ffffff;
      box-shadow:
        0 35px 70px rgba(0, 0, 0, 0.95),
        0 0 35px rgba(255, 255, 255, 0.35);
      cursor: default;
    }

    .book-card.slot-prev-1 {
      transform: translate(-50%, -50%) translateX(-195px) translateZ(-20px) rotateY(28deg) scale(0.92);
      z-index: 20;
      opacity: 0.88;
      filter: brightness(0.85);
    }

    .book-card.slot-prev-2 {
      transform: translate(-50%, -50%) translateX(-390px) translateZ(-110px) rotateY(42deg) scale(0.78);
      z-index: 10;
      opacity: 0.55;
      filter: brightness(0.65);
    }

    .book-card.slot-next-1 {
      transform: translate(-50%, -50%) translateX(195px) translateZ(-20px) rotateY(-28deg) scale(0.92);
      z-index: 20;
      opacity: 0.88;
      filter: brightness(0.85);
    }

    .book-card.slot-next-2 {
      transform: translate(-50%, -50%) translateX(390px) translateZ(-110px) rotateY(-42deg) scale(0.78);
      z-index: 10;
      opacity: 0.55;
      filter: brightness(0.65);
    }

    .book-card.slot-hidden {
      transform: translate(-50%, -50%) translateX(0) translateZ(-300px) scale(0.5);
      z-index: 0;
      opacity: 0;
      pointer-events: none;
    }

    .book-card.is-active {
      cursor: default;
    }

    .book-card.is-hidden {
      opacity: 0 !important;
      pointer-events: none !important;
    }

    /* =========================================================
       FADE FOR LEFT PANEL
    ========================================================= */
    .book-info {
      transition: opacity 0.28s ease, transform 0.28s ease;
    }

    .book-info.is-fading {
      opacity: 0;
      transform: translateY(8px);
    }

    /* =========================================================
       TABLET
    ========================================================= */
    @media (max-width: 1050px) {
      .book-carousel {
        height: 460px;
      }

      .book-card {
        width: 195px;
      }

      .book-card.slot-center {
        transform: translate(-50%, -50%) translateX(0) translateZ(80px) scale(1.10);
      }
      .book-card.slot-prev-1 {
        transform: translate(-50%, -50%) translateX(-160px) translateZ(-20px) rotateY(28deg) scale(0.85);
      }
      .book-card.slot-prev-2 {
        transform: translate(-50%, -50%) translateX(-300px) translateZ(-90px) rotateY(40deg) scale(0.70);
      }
      .book-card.slot-next-1 {
        transform: translate(-50%, -50%) translateX(160px) translateZ(-20px) rotateY(-28deg) scale(0.85);
      }
      .book-card.slot-next-2 {
        transform: translate(-50%, -50%) translateX(300px) translateZ(-90px) rotateY(-40deg) scale(0.70);
      }
    }

    /* =========================================================
       MOBILE — text above, book below, one book only
    ========================================================= */
    @media (max-width: 700px) {
      .book-carousel {
        height: 360px;
        perspective: 1200px;
      }

      .book-card {
        width: 170px;
      }

      /* JS already applies slot-hidden on non-active, but double-lock it */
      .book-card:not(.slot-center) {
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden;
      }

      .book-card.slot-center {
        opacity: 1 !important;
        visibility: visible;
        transform: translate(-50%, -50%) translateX(0) translateZ(0) scale(1);
      }
    }

    /* =========================================================
       SMALL PHONES
    ========================================================= */
    @media (max-width: 400px) {
      .book-carousel {
        height: 330px;
      }

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

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

    /* =========================================================
       ARROWS — must sit ABOVE the 3D stage
    ========================================================= */
    .book-arrow {
      position: absolute;

      top: 50%;

      /* Sit in the same 3D context as the stage, but way in front */
      z-index: 9999;
      transform-style: preserve-3d;

      width: 20px;
      height: 20px;

      display: grid;
      place-items: center;

      padding: 0;
      margin: 0;

      border: none;
      border-radius: 50%;

      background: #fff;
      color: #00382a;

      font-family: Arial, sans-serif;
      font-size: 16px;
      font-weight: 900;
      line-height: 1;

      cursor: pointer;

      /* Lift the arrow 500px toward the viewer in 3D so nothing
         from the concave stage can ever cover it */
      transform: translateY(-50%) translateZ(500px);

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

      pointer-events: auto !important;

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

    .book-arrow:hover {
      background: #83f2d2;
      transform: translateY(-50%) translateZ(500px) scale(1.08);
    }

    .book-arrow:active {
      transform: translateY(-50%) translateZ(500px) scale(0.96);
    }

    .book-arrow--prev { left: 14px; }
    .book-arrow--next { right: 7px; }



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




    /* =========================================================
       MOBILE — text above, book below, ONE book, arrows clickable
    ========================================================= */
    @media (max-width: 700px) {

      /* --- stack the hero: info first, carousel second --- */
      .book-hero__inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: calc(100% - 30px) !important;
        min-height: auto !important;
        padding: 35px 0 !important;
        gap: 20px !important;
      }

      .book-info {
        order: 1 !important;
        width: 100% !important;
        max-width: none !important;
        padding: 20px 0 0 !important;
      }

      .book-carousel {
        order: 2 !important;

        width: 100% !important;
        height: 380px !important;
        margin-top: 0 !important;

        perspective: 1200px !important;
      }

      /* --- only the active book shows --- */
      .book-card {
        width: 175px !important;
      }

      .book-card:not(.slot-center) {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
      }

      .book-card.slot-center {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(-50%, -50%) translateX(0) translateZ(0) scale(1) !important;
      }

      /* --- arrows: pinned to the carousel edges, always on top --- */
      .book-arrow {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;

        /* full lift + own 3D plane */
        transform: translateY(-50%) translateZ(900px) !important;
        z-index: 9999 !important;

        background: #fff !important;
        color: #00382a !important;

        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
      }

      .book-arrow:hover,
      .book-arrow:active {
        transform: translateY(-50%) translateZ(900px) scale(1.05) !important;
      }

      .book-arrow--prev { left: 5px !important; }
      .book-arrow--next { right: 5px !important; }

      /* --- dots --- */
      .book-dots {
        margin-top: 18px !important;
        gap: 7px !important;
      }

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






/* 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;
    }
}