/* ---------- Coverflow ---------- */
.cf-section{background:radial-gradient(ellipse at 50% 55%,var(--glow) 0%,var(--bg) 62%);overflow:hidden}
.cf-title{font-size:clamp(2.6rem,5vw,4.6rem)}
.coverflow{--w:clamp(200px,min(25vw,36vh),360px);position:relative;height:calc(var(--w)*1.25 + 56px);perspective:1400px;cursor:grab;outline:none;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.coverflow.dragging{cursor:grabbing}
.cf-stage{position:absolute;inset:0;transform-style:preserve-3d}
.cf-slide{position:absolute;left:50%;top:10px;width:var(--w);aspect-ratio:4/5;margin:0 0 0 calc(var(--w)/-2);border-radius:6px;transform-style:preserve-3d;will-change:transform;-webkit-box-reflect:below 6px linear-gradient(transparent 72%,rgba(255,255,255,.16))}
.cf-slide img{width:100%;height:100%;object-fit:cover;border-radius:6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);pointer-events:none}
.cf-slide::after{content:"";position:absolute;inset:0;border-radius:6px;background:#0e0a07;opacity:var(--shade,0);pointer-events:none}
.cf-slide.is-active img{box-shadow:0 40px 80px -24px rgba(0,0,0,.9),0 0 0 1px rgba(var(--gold-rgb),.35)}
.cf-ui{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,4vw,3rem);padding:0 1rem;margin-top:.5rem}
.cf-caption{text-align:center;width:min(520px,70vw);min-height:9.5rem}
.cf-count{font-size:.72rem;letter-spacing:.3em;color:var(--muted);margin:0 0 .6rem}
.cf-idx{color:var(--gold)}
.cf-name{font-size:clamp(1.8rem,3vw,2.6rem);font-style:italic}
.cf-desc{color:var(--muted);margin:.5rem 0 .4rem;font-size:.98rem}
.cf-price{font-family:var(--serif);font-size:1.4rem;color:var(--gold2);margin:0}
.cf-arrow{flex:none;width:56px;height:56px;border-radius:50%;border:1px solid rgba(var(--gold-rgb),.5);background:transparent;color:var(--cream);cursor:pointer;display:grid;place-items:center;transition:background .3s,border-color .3s,transform .3s}
.cf-arrow:hover{background:var(--gold);border-color:var(--gold);color:var(--bg);transform:scale(1.06)}
.cf-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.cf-dots{display:flex;justify-content:center;gap:.6rem;margin-top:1.6rem}
.cf-dots button{width:26px;height:2px;padding:0;border:0;background:rgba(243,233,220,.25);cursor:pointer;transition:background .3s,width .3s}
.cf-dots button[aria-selected=true]{background:var(--gold);width:44px}

.cf-note{max-width:44rem;margin:3rem auto 0;padding:0 1.5rem;text-align:center;color:var(--muted);font-size:.9rem}
@media (max-width:760px){
  .coverflow{--w:62vw}
  .cf-arrow{width:44px;height:44px}
  .cf-caption{min-height:11rem}
}

/* ---------- Theme-aware details (dark + light instances) ---------- */
.cf-section{position:relative}
.cf-slide::after{background:rgb(var(--shade-rgb))}
.cf-dots button{background:rgba(var(--ink-rgb),.22)}
.theme-light .cf-section{background:radial-gradient(ellipse 65% 55% at 50% 55%,#fffcf6 0%,var(--bg) 75%)}
.theme-light .cf-slide{-webkit-box-reflect:below 6px linear-gradient(transparent 74%,rgba(255,255,255,.28))}
.theme-light .cf-slide img{box-shadow:0 26px 50px -22px rgba(70,45,20,.45)}
.theme-light .cf-slide.is-active img{box-shadow:0 34px 70px -26px rgba(70,45,20,.55),0 0 0 1px rgba(var(--gold-rgb),.35)}
.theme-light .cf-arrow{border-color:rgba(var(--gold-rgb),.55)}
.theme-light .cf-arrow:hover{color:#fff}
.theme-dark+.theme-light .cf-section{border-top:1px solid rgba(var(--gold-rgb),.15)}
/* side slides are buttons: click / tap / Enter brings them to the front */
.cf-slide:not(.is-active){cursor:pointer;transition:translate .35s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .cf-slide:not(.is-active):hover{translate:0 -8px}
  .cf-slide:not(.is-active):hover::after{opacity:calc(var(--shade,0) * .5)}
}
.cf-slide:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:8px}
.cf-slide:not(.is-active):focus-visible{translate:0 -8px}
.coverflow.dragging .cf-slide{cursor:grabbing;translate:none}
/* hit-testing: side slides sit behind the stage plane (negative translateZ), so the stage must not catch their clicks */
.cf-stage{pointer-events:none}
.cf-slide{pointer-events:auto}