/* Eight existing haircut photos set inside solid gold coins. */
.coverflow-gallery{--cf-card:clamp(210px,28vw,300px);position:relative;padding:24px 0;background:var(--green-dark,#111f06)}
.coverflow-cards{display:flex;gap:16px;list-style:none;margin:0;padding:40px 24px;overflow-x:auto;scroll-snap-type:x proximity}
.coverflow-cards>li{flex:0 0 var(--cf-card);width:var(--cf-card);height:var(--cf-card);overflow:hidden;border-radius:50%;padding:14px;background:linear-gradient(135deg,#fff0b8,#c58a20 35%,#e4b149 60%,#61310a);box-shadow:0 20px 28px -14px rgba(0,0,0,.55);scroll-snap-align:center}
.coverflow-cards img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;object-position:center 35%;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.coverflow-controls[hidden]{display:none}
.coverflow-gallery.is-enhanced .coverflow-frame{overflow:clip;padding:64px 0;perspective:calc(var(--cf-card)*4);touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;cursor:grab;outline-offset:-3px}
.coverflow-gallery.is-enhanced.is-dragging .coverflow-frame{cursor:grabbing}
.coverflow-gallery.is-enhanced .coverflow-cards{position:relative;display:block;height:var(--cf-card);padding:0;overflow:visible;transform-style:preserve-3d;user-select:none}
.coverflow-gallery.is-enhanced .coverflow-cards>li{position:absolute;left:50%;top:0;will-change:transform;transform-style:preserve-3d;overflow:visible;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.coverflow-controls{display:flex;justify-content:center;gap:12px;padding-top:8px}
.coverflow-controls button{width:44px;height:44px;border:1px solid var(--border-gold,rgba(201,166,53,.3));border-radius:50%;background:var(--green-dark,#111f06);color:var(--gold,#c9a635);font:400 1.7rem 'Inter',sans-serif;line-height:1;cursor:pointer}
.coverflow-controls button:hover{background:var(--green,#1a2e0a)}
.coverflow-frame:focus-visible,.coverflow-controls button:focus-visible{outline:2px solid var(--gold,#c9a635);outline-offset:3px}
.coverflow-gallery.is-enhanced .coverflow-frame:focus-visible{outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.coverflow-gallery *{animation:none!important;transition:none!important}}

/* Only the leaf faces clip and shade; their parent must preserve the full 3D edge. */
.coverflow-gallery .photo-coin-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:repeating-linear-gradient(118deg,rgba(255,250,226,.06) 0 1px,transparent 1px 4px),conic-gradient(from -35deg,#fff0b8,#b87317 17%,#dca137 32%,#f3ca70 43%,#78400c 62%,#c58a20 82%,#fff0b8);border:2px solid #dca33b;box-shadow:inset 1px 1px 0 1px #fff0b8,inset -1px -1px 0 1px #61310a,inset 0 0 0 3px #d69a2d,inset 0 0 0 4px rgba(97,49,10,.7),0 16px 28px rgba(0,0,0,.3)}
.coverflow-gallery .photo-coin-front{transform:translateZ(8px)}
.coverflow-gallery .photo-coin-back{transform:rotateY(180deg) translateZ(8px)}
.coverflow-gallery .photo-coin-face img{position:absolute;left:7%;top:7%;width:86%;height:86%;border:2px solid #78410c;box-shadow:0 0 0 1px rgba(255,240,184,.85),0 -1px 3px 1px rgba(91,66,26,.3);border-radius:50%}
.coverflow-gallery .photo-coin-face::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(130deg,rgba(255,250,226,.07),transparent 34%,transparent 72%,rgba(56,39,12,.08));pointer-events:none}
.coverflow-gallery .photo-coin-edge{position:absolute;left:50%;top:50%;width:var(--coin-edge-width);height:16px;background:linear-gradient(180deg,rgba(255,230,160,.4),transparent 30%,rgba(68,48,16,.3)),repeating-linear-gradient(90deg,#61310a 0 1px,#e9b84f 1px 2px,#b8791b 2px 3px);transform:translate(-50%,-50%) rotateZ(var(--edge-angle)) translateY(calc(-1*var(--coin-radius))) rotateX(90deg);backface-visibility:visible}
.coverflow-gallery .coin-gallery-hint{text-align:center;color:rgba(245,245,240,.7);font-size:.85rem;margin:12px 24px 0;letter-spacing:.02em}

/* Larger, separated foreground coins without rear-face collisions on phones. */
@media (max-width: 599px) {
  .coverflow-gallery { --cf-card: clamp(230px, 67vw, 320px); }
  .coverflow-gallery.is-enhanced .coverflow-frame { padding: 36px 0; }
  .coverflow-gallery.is-enhanced .is-rear > .photo-coin-face,
  .coverflow-gallery.is-enhanced .is-rear > .photo-coin-edge { visibility: hidden; }
}

/* A failed photo remains an explicit branded state, never a mislabeled replacement cut. */
.coverflow-gallery .photo-coin-unavailable{display:none;position:absolute;inset:7%;border-radius:50%;align-items:flex-end;justify-content:center;padding:0 12px 22%;background:#172d0b url('../images/logo-mark.png') center 32%/48% auto no-repeat;color:#ead39a;font-size:12px;text-align:center}
.coverflow-gallery .photo-unavailable .photo-coin-face>img{visibility:hidden}
.coverflow-gallery .photo-unavailable .photo-coin-unavailable{display:flex}