.flip-card{border:1px solid var(--line);border-radius:12px;padding:18px;background:linear-gradient(135deg,#d8b68710,transparent);min-width:0;perspective:1400px}.flip-stage{display:grid;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1)}.flip-front,.flip-back{grid-area:1/1;min-width:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}.flip-front{transform:rotateY(0deg)}.flip-back{transform:rotateY(180deg);padding:24px 12px;background:var(--ink);color:var(--paper);border-radius:6px}.flip-back p,.flip-back li{font-size:.95rem;line-height:1.7}.flip-back li{margin-bottom:12px}.flip-back ul{padding-left:20px}.flip-back h3,.flip-front h3{font-family:Lora,Georgia,serif;font-size:1.6rem;font-weight:500;line-height:1.3}.is-flipped .flip-stage{transform:rotateY(180deg)}.flip-card .case-photo{border-radius:6px;aspect-ratio:1.6}.flip-actions{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;margin-top:18px}.flip-toggle{background:var(--gold);color:var(--ink);border:0;padding:12px 18px;border-radius:4px;font-weight:700}.flip-actions a{font-size:.85rem}.flip-back[aria-hidden=true]{visibility:hidden}.is-flipped .flip-front{visibility:hidden}.flip-front,.flip-back{transition:visibility 0s .2s}@media(max-width:700px){.flip-card{padding:14px}.flip-back{padding:12px 3px}.flip-back h3,.flip-front h3{font-size:1.3rem}}@media(prefers-reduced-motion:reduce){.flip-stage,.flip-front,.flip-back{transition:none!important;transform:none!important}.is-flipped .flip-stage{transform:none!important}}
.flip-card .case-photo[role=button],.flip-card .flip-back{cursor:pointer}
.flip-card .case-photo[role=button]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
/* Zoom stays inside the photograph; the flip stage is independent. */
.flip-card .case-photo{overflow:hidden}
.flip-card .case-photo img{transform:scale(1);transform-origin:center;transition:transform .8s cubic-bezier(.2,.65,.25,1)}
@media(hover:hover) and (pointer:fine){.flip-card:not(.is-flipped) .case-photo:hover img{transform:scale(1.08)}}
.flip-card:not(.is-flipped) .case-photo:focus-visible img{transform:scale(1.08)}
@media(prefers-reduced-motion:reduce){.flip-card .case-photo img{transition:none!important;transform:none!important}}