.flip-clock { --flap-height: clamp(64px, 9vw, 112px); --flap-width: calc(var(--flap-height) * .65); color: var(--colour-paper,#fff8ee); font-family: var(--font-body,Arial,sans-serif); display: inline-block; max-width: 100%; }
.flip-clock--hero { display:block; width: min(100%,900px); margin: 32px auto; padding: clamp(14px,3vw,30px); box-sizing:border-box; border:1px solid #76604a; border-radius:12px; background:linear-gradient(115deg,#4b4035,#211f1c 35%,#35302a 80%,#5e4b38); box-shadow:0 12px 24px #0003,inset 0 1px #dbc5a266,inset 0 -3px #0009; }
.flip-clock__face { display:flex; justify-content:center; gap:clamp(10px,2.5vw,28px); }
.flip-clock__group { display:flex; flex-direction:column; align-items:center; gap:14px; }
.flip-clock__group[hidden] { display:none; }
.flip-clock__digits { display:flex; gap:4px; }
.flip-clock__digit { position:relative; display:block; width:var(--flap-width); height:var(--flap-height); perspective:500px; border-radius:4px; box-shadow:0 2px 1px #000,inset 0 0 0 1px #ffffff1a; font:var(--font-weight-display,900) calc(var(--flap-height) * .82)/var(--flap-height) var(--font-display,Impact,sans-serif); font-variant-numeric:tabular-nums; text-align:center; }
.flip-clock__digit::after { content:''; position:absolute; top:calc(50% - 1px); left:-1px; right:-1px; height:2px; background:#080908; box-shadow:0 1px #ffffff17; z-index:5; border-left:3px solid #b6a085; border-right:3px solid #b6a085; }
.flip-clock__top,.flip-clock__bottom,.flip-clock__fall,.flip-clock__rise { position:absolute; left:0; right:0; height:50%; overflow:hidden; backface-visibility:hidden; background:linear-gradient(#33332f,#20211f); border-radius:4px 4px 0 0; }
.flip-clock__top,.flip-clock__fall { top:0; transform-origin:bottom; }
.flip-clock__bottom,.flip-clock__rise { top:50%; transform-origin:top; background:linear-gradient(#191a18,#2c2d29); border-radius:0 0 4px 4px; }
.flip-clock__digit span span { display:block; height:var(--flap-height); }
.flip-clock__bottom span,.flip-clock__rise span { transform:translateY(-50%); }
.flip-clock__fall { z-index:3; }
.flip-clock__rise { z-index:4; transform:rotateX(90deg); }
.is-flipping .flip-clock__fall { animation:flap-fall 230ms cubic-bezier(.45,.02,.8,.55) forwards; }
.is-flipping .flip-clock__rise { animation:flap-rise 340ms 225ms cubic-bezier(.16,.65,.35,1) forwards; }
@keyframes flap-fall { to { transform:rotateX(-90deg); filter:brightness(.5); } }
@keyframes flap-rise { 0% {transform:rotateX(90deg);filter:brightness(.55)} 75% {transform:rotateX(-7deg)} 100% {transform:rotateX(0);filter:brightness(1)} }
.flip-clock__label { font:700 12px/1.3 var(--font-body,Arial,sans-serif); letter-spacing:.13em; color:#d9c9b3; }
.flip-clock--mini { --flap-height:26px; vertical-align:middle; flex-shrink:0; }
/* Host rules such as .sale-strip span must not space or restyle flap layers. */
.flip-clock.flip-clock--mini span { margin:0; padding:0; }
.flip-clock--mini .flip-clock__face { display:flex; gap:7px; }
.flip-clock--mini .flip-clock__digits { display:flex; gap:2px; }
.flip-clock--mini .flip-clock__group { display:flex; gap:4px; }
.flip-clock--mini .flip-clock__group[hidden] { display:none; }
.flip-clock--mini .flip-clock__label { font:700 9px/1.3 var(--font-body,Arial,sans-serif); letter-spacing:0; color:inherit; }
.flip-clock--mini .flip-clock__digit { flex:0 0 var(--flap-width); color:var(--colour-paper,#fff8ee); border-radius:2px; font:var(--font-weight-display,900) calc(var(--flap-height) * .82)/var(--flap-height) var(--font-display,Impact,sans-serif); letter-spacing:0; }
.flip-clock--mini .flip-clock__digit > span,
.flip-clock--mini .flip-clock__digit > span > span { font:inherit; letter-spacing:inherit; }
/* The hinge is a hairline at 112px. At 26px its 2px bar, 1px highlight and 3px pins cover a fifth
   of the glyph, splitting one digit into what reads as two stacked glyphs. Scale it with the card. */
.flip-clock--mini .flip-clock__digit::after { top:calc(50% - .5px); height:1px; border-left-width:1px; border-right-width:1px; box-shadow:none; }
.flip-clock-badge { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:10px 12px; border:1px solid #4c522944; border-radius:6px; color:var(--colour-olive,#4c5229); font:700 12px/1.5 var(--font-body,Arial,sans-serif); width:fit-content; max-width:100%; box-sizing:border-box; }
.flip-clock-badge--sold-out { color:#655e55; border-color:#655e5533; }
.flip-clock--last-day .flip-clock__group:nth-child(n+3) { display:none; }
.flip-clock__accessible { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.is-paused *, .is-paused *::after { animation-play-state:paused!important; }
@media(max-width:540px) { .flip-clock--hero { --flap-height:80px; } .flip-clock--hero .flip-clock__face { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 12px; } }
@media(prefers-reduced-motion:reduce) { .flip-clock * { animation:none!important; } }