:root{--bg:#f6f8fb;--card:#fff;--ink:#0f1e3d;--mute:#52607a;--navy:#0b1f4d;--gold:#f5b82e;--teal:#0e7c86;--green:#128a4a;--red:#d0201c;--line:#e0e6ef;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
a{color:var(--teal)}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header{background:var(--navy);position:sticky;top:env(safe-area-inset-top,0px);z-index:10}
header .wrap{display:flex;justify-content:space-between;align-items:center;height:56px}
.brand{color:#fff;font-weight:800;letter-spacing:.14em;text-decoration:none}
.brand b{color:var(--gold)}
header nav a{color:#cfd9ee;text-decoration:none;font-size:14px;margin-left:16px}
.hero{background:var(--navy);color:#fff;text-align:center;padding:44px 0 36px}
.pre{display:inline-block;background:rgba(245,184,46,.15);color:var(--gold);border:1px solid var(--gold);border-radius:99px;padding:6px 18px;font-weight:700;font-size:13px;letter-spacing:.04em}
h1{font-size:clamp(32px,6vw,56px);line-height:1.1;margin:18px auto 14px;max-width:760px;font-weight:800}
h1 em{font-style:normal;color:var(--gold)}
.sub{max-width:680px;margin:0 auto 26px;color:#cfd9ee;font-size:18px}
.hero img{width:100%;max-width:520px;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.buy{margin:26px 0 0;text-align:center}
.price{font-size:22px;margin-bottom:12px}
.price s{color:var(--red);font-weight:700}
.price strong{font-size:52px;color:var(--green);margin-left:10px}
.off{display:inline-block;background:var(--gold);color:#241a00;font-weight:800;border-radius:6px;padding:2px 10px;font-size:14px;margin-left:10px;vertical-align:middle}
.btn{display:block;width:100%;max-width:460px;margin:0 auto;text-align:center;background:var(--gold);color:#241a00;font-weight:800;font-size:24px;padding:20px 32px;border-radius:14px;text-decoration:none;box-shadow:0 7px 0 #b98400;transition:transform .1s}
.btn:active{transform:translateY(4px);box-shadow:0 3px 0 #b98400}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.note{font-size:13px;color:var(--mute);margin-top:12px}
.hero .price strong{color:#5be28f}
.hero .note{color:#aebbd6}
section{padding:48px 0}
h2{font-size:clamp(24px,4vw,34px);text-align:center;margin:0 0 28px;line-height:1.2}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.key{text-align:center}
.key .ic{font-size:36px;display:block;margin-bottom:6px}
.key b{display:block;font-size:17px}
.key span{color:var(--mute);font-size:14px}
.list{max-width:760px;margin:0 auto;display:grid;gap:12px}
.item{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.tick{flex:none;width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:800}
.item b{display:block}
.item span{color:var(--mute);font-size:14.5px}
.slider{max-width:560px;margin:0 auto;position:relative}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:14px;border:1px solid var(--line);background:var(--card)}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;margin:0}
.slide img{width:100%;display:block}
.slide figcaption{text-align:center;padding:10px;font-weight:600;font-size:14px;color:var(--mute)}
.arrow{position:absolute;top:44%;width:42px;height:42px;border-radius:50%;border:0;background:var(--navy);color:#fff;font-size:20px;cursor:pointer;opacity:.9}
.arrow.l{left:-8px}.arrow.r{right:-8px}
.dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:var(--line);padding:0;cursor:pointer}
.dots button.on{background:var(--teal);width:26px;border-radius:6px}
.prod{display:flex;flex-direction:column;gap:6px}
.prod .tag{font-size:12px;font-weight:700;color:var(--teal)}
.prod h3{margin:0;font-size:18px}
.prod p{margin:0;color:var(--mute);font-size:14.5px}
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:10px;max-width:760px;margin-inline:auto}
summary{font-weight:700;cursor:pointer}
details p{margin:10px 0 0;color:var(--mute)}
.band{background:var(--card);border-block:1px solid var(--line)}
footer{background:var(--navy);color:#aebbd6;text-align:center;padding:30px 0;font-size:14px}
footer a{color:#fff;margin:0 10px}
.doc{max-width:760px;margin:0 auto;padding:40px 20px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.doc h2{text-align:left}
.doc h3{margin:24px 0 6px}
.doc p,.doc li{color:var(--mute)}
.view{display:none}.view.on{display:block}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.bk-title{text-align:center;font-size:clamp(20px,3vw,26px);margin:44px 0 22px}
.books{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.book{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 14px 22px;text-align:center;box-shadow:0 8px 24px rgba(15,30,61,.07)}
.book img{width:100%;max-width:200px;height:auto;display:block;margin:0 auto 14px}
.book b{display:block;font-size:16px;line-height:1.3;margin-bottom:4px}
.book span{display:block;color:var(--mute);font-size:13.5px;line-height:1.45}
@media(max-width:860px){.books{grid-template-columns:repeat(2,1fr);gap:12px}.book{padding:16px 10px 18px}.book b{font-size:15px}}
.btn{transition:transform .15s,box-shadow .15s,background .15s}
@media(hover:hover){.btn:hover{background:#ffc94a;transform:translateY(-3px);box-shadow:0 10px 0 #b98400,0 14px 24px rgba(245,184,46,.35)}.btn:hover:active{transform:translateY(4px);box-shadow:0 3px 0 #b98400}}
.books{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.book{flex:0 0 calc(20% - 13px);min-width:0}
@media(max-width:860px){.books{gap:12px}.book{flex:0 0 calc(50% - 6px)}}
img{max-width:100%;height:auto}
.hero img{height:auto;display:block;margin-left:auto;margin-right:auto}

/* Review section: scoped spacing and responsive text wrapping. */
.customer-reviews {
  display: block;
  width: 100%;
  max-width: 1040px;
  min-width: 0;
  margin: 0 auto;
  padding: 32px 20px;
  text-align: left;
}
.customer-reviews .review {
  display: block;
  position: static;
  float: none;
  transform: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 16px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow-wrap: anywhere;
  white-space: normal;
}
.customer-reviews h2,
.customer-reviews h3,
.customer-reviews p,
.customer-reviews strong,
.customer-reviews small {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  text-indent: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.customer-reviews h3 { margin-top: 10px; margin-bottom: 8px; color: var(--navy); }
.customer-reviews p { line-height: 1.65; }
.customer-reviews strong,
.customer-reviews small { display: block; margin-top: 8px; }
.customer-reviews small { color: var(--mute); }
.customer-reviews .review:last-child { margin-bottom: 0; }
@media (max-width: 480px) {
  .customer-reviews { padding: 24px 12px; }
  .customer-reviews .review { padding: 16px; }
}