/* ---------- E.sybox product page ---------- */
.eyebrow{
  display:inline-block;font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue);background:var(--sky);padding:7px 14px;border-radius:999px;margin-bottom:22px;
}
.hero-product .hero-art img{max-height:clamp(320px,46vw,560px)}
.hero-product .price-chip .meta b{margin-bottom:2px}

/* ---------- horizontal showcase ---------- */
.show-sec{overflow:hidden}
.show-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px}
.show-head h2.big{margin-bottom:10px}
.show-ctrl{display:flex;gap:10px;flex:none}
.arrow{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s ease,opacity .25s ease;
}
.arrow:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#C9DCEF}
.arrow[disabled]{opacity:.35;cursor:default;transform:none;box-shadow:var(--shadow-sm)}
.arrow:focus-visible{border-radius:50%}

.rail-wrap{position:relative}
.rail{
  display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
  padding:10px max(24px,calc((100vw - 1200px)/2 + 24px)) 30px;
  scroll-padding:0 max(24px,calc((100vw - 1200px)/2 + 24px));
  cursor:grab;-webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.rail.dragging .slide{pointer-events:none}
.rail:focus-visible{outline:none}
.rail:focus-visible .slide.cur .stage{box-shadow:0 0 0 3px var(--azure),var(--shadow-lg)}

.slide{
  flex:0 0 min(78vw,760px);scroll-snap-align:start;margin:0;
  display:flex;flex-direction:column;gap:16px;
}
.stage{
  position:relative;aspect-ratio:4/3;border-radius:30px;overflow:hidden;
  display:grid;place-items:center;box-shadow:var(--shadow-lg);isolation:isolate;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.stage::before{
  content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;left:19%;top:14%;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);
  z-index:0;
}
.stage::after{
  content:"";position:absolute;left:50%;bottom:9%;width:46%;height:26px;margin-left:-23%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(10,37,64,.22),rgba(10,37,64,0) 70%);z-index:0;
}
.stage img{
  position:absolute;inset:0;margin:auto;z-index:1;max-height:82%;max-width:70%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 30px 34px rgba(10,37,64,.28));user-select:none;-webkit-user-drag:none;
  transform:scale(.94);transition:transform .9s var(--ease);
}
.slide.cur .stage img{transform:scale(1)}
.stage-light .stage{background:linear-gradient(160deg,#fff,var(--mist))}
.stage-sky .stage{background:linear-gradient(160deg,var(--sky),#D6E9F9)}
.stage-dark .stage{background:linear-gradient(160deg,var(--ink-soft),var(--ink))}
.stage-dark .stage::before{background:radial-gradient(circle at 50% 40%,rgba(43,167,228,.42),rgba(43,167,228,0) 70%)}
.stage-dark .stage::after{background:radial-gradient(ellipse,rgba(0,0,0,.5),rgba(0,0,0,0) 70%)}
.stage-ink .stage{background:linear-gradient(150deg,var(--blue),var(--blue-deep))}
.stage-ink .stage::before{background:radial-gradient(circle at 50% 40%,rgba(43,167,228,.5),rgba(43,167,228,0) 70%);left:40%;top:-20%}
.stage-ink .stage::after{display:none}
.stage-text{place-items:stretch;padding:clamp(28px,4vw,48px)}
.stage-text .l{
  position:relative;z-index:1;font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#BFE3F7;margin-bottom:18px;display:block;
}
.stage-text ul{
  position:relative;z-index:1;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px 22px;align-content:start;
}
.stage-text li{
  font-family:var(--display);font-weight:600;color:#fff;font-size:clamp(16px,2vw,21px);letter-spacing:-.01em;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.18);
}
.slide figcaption{display:flex;flex-direction:column;gap:3px;padding:0 6px}
.slide figcaption b{font-family:var(--display);font-weight:700;color:var(--ink);font-size:17px}
.slide figcaption span{font-size:15px;color:var(--slate)}

.dots{display:flex;gap:8px;justify-content:center;margin-top:4px}
.dots button{
  width:9px;height:9px;border-radius:999px;border:none;background:var(--line);padding:0;cursor:pointer;
  transition:width .45s var(--ease),background .3s ease;
}
.dots button.on{width:28px;background:var(--blue)}

/* ---------- buy card ---------- */
.buy{
  display:grid;grid-template-columns:1fr;gap:0;background:#fff;border-radius:34px;
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.buy-art{
  position:relative;display:grid;place-items:center;min-height:320px;padding:36px;
  background:linear-gradient(160deg,#fff,var(--sky));
}
.buy-art .disc{
  position:absolute;width:min(72%,380px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#fff,rgba(255,255,255,0) 70%);
}
.buy-art img{position:relative;max-height:340px;max-width:70%;width:auto;height:auto;filter:drop-shadow(0 30px 34px rgba(10,37,64,.24))}
.buy-body{padding:clamp(32px,4vw,52px)}
.buy-body .hp{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.buy-body h3{font-size:clamp(24px,3vw,32px);font-weight:700;margin:8px 0 22px}
.buy-body .amt{font-family:var(--display);font-weight:800;font-size:clamp(44px,5.6vw,60px);color:var(--ink);letter-spacing:-.035em;line-height:1}
.buy-body .old{margin:10px 0 0;font-size:15px;color:#8698AC}
.buy-body ul{list-style:none;margin:26px 0 30px;padding:26px 0 0;border-top:1px solid var(--line);font-size:16px}
.buy-body ul li{padding:7px 0 7px 26px;position:relative}
.buy-body ul li::before{
  content:"";position:absolute;left:0;top:15px;width:11px;height:11px;border-radius:50%;
  background:var(--sky);box-shadow:inset 0 0 0 3px var(--azure);
}
.buy-cta{display:flex;flex-wrap:wrap;gap:12px}
.buy-foot{margin:22px 0 0;font-size:15px;color:#8698AC}
.buy-foot a{color:var(--ink);text-decoration:none;font-weight:500}
.buy-foot a:hover{color:var(--blue)}

/* ---------- home-page teaser ---------- */
.also{
  display:grid;grid-template-columns:1fr;gap:0;border-radius:32px;overflow:hidden;
  background:linear-gradient(150deg,var(--ink-soft),var(--ink));color:#fff;box-shadow:var(--shadow-lg);
  position:relative;
}
.also::after{
  content:"";position:absolute;width:520px;height:520px;left:-200px;top:-260px;border-radius:50%;
  background:radial-gradient(circle,rgba(43,167,228,.3),transparent 62%);pointer-events:none;
}
.also-art{position:relative;z-index:1;display:grid;place-items:center;padding:36px 28px 0;min-height:260px}
.also-art img{max-height:300px;width:auto;filter:drop-shadow(0 30px 34px rgba(0,0,0,.45));animation:bob 7s ease-in-out infinite}
.also-body{position:relative;z-index:1;padding:clamp(28px,4vw,48px)}
.also-body .hp{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#7EC8F0}
.also-body h3{color:#fff;font-size:clamp(24px,3.2vw,34px);font-weight:700;margin:8px 0 12px}
.also-body p{color:#A9C2DC;margin:0 0 24px;max-width:46ch}
.also-price{display:flex;align-items:baseline;gap:12px;margin-bottom:26px}
.also-price .k{font-family:var(--display);font-weight:800;font-size:38px;letter-spacing:-.03em;line-height:1}
.also-price .m{font-size:14.5px;color:#8FA9C4}

@media(min-width:640px){
  .buy{grid-template-columns:.9fr 1.1fr}
  .also{grid-template-columns:.8fr 1.2fr}
  .also-art{padding:36px 0 36px 36px}
}
@media(max-width:639px){
  .show-head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:24px}
  .slide{flex-basis:84vw}
  .stage{aspect-ratio:1;border-radius:24px}
  .stage-text ul{grid-template-columns:1fr}
  .stage-text li{padding:9px 0;font-size:16px}
  .buy-cta .btn{width:100%}
  .also-art{min-height:220px}
  .also-art img{max-height:220px}
}
@media(prefers-reduced-motion:reduce){
  .rail{scroll-behavior:auto}
  .stage img{transform:none}
}