/* Circles Price List Animation: folded price menu */
.cpm{--w:clamp(150px,40vw,250px);--h:calc(var(--w)*1.36);position:relative;width:100%;height:calc(var(--h)*1.42);margin:0 auto;perspective:1400px;perspective-origin:50% 28%;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
.cpm:focus-visible{box-shadow:0 0 0 3px #E41E2C;border-radius:14px}
.cpm *{box-sizing:border-box}
.cpm i,.cpm b,.cpm u{display:block;font-style:normal;text-decoration:none}
.cpm-floor{position:absolute;left:50%;top:calc(50% + var(--h)*.5);width:calc(var(--w)*2.1);height:calc(var(--h)*.16);transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(120,20,40,.24),transparent);filter:blur(10px)}
.cpm-stage{position:absolute;inset:0;transform-style:preserve-3d}
.cpm-rig{position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);transform-style:preserve-3d;transform:translate(-50%,-54%) translateX(calc(var(--w)*.5)) rotateX(14deg)}
.cpm-base,.cpm-cover{position:absolute;inset:0;transform-style:preserve-3d}
.cpm-face{position:absolute;inset:0;border-radius:3px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.cpm-cover{transform-origin:0 50%;transform:translateZ(1.5px) rotateY(-180deg)}
.cpm-cover .b{transform:rotateY(180deg)}

/* front cover */
.cpm-cover .f{background:linear-gradient(165deg,#EA2630 0%,#D51A25 60%,#BE1520 100%);box-shadow:inset -10px 0 18px -14px rgba(0,0,0,.35)}
.cpm-cover .f::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 58%);background-size:250% 100%;background-position:120% 0}
.cpm-c1,.cpm-c2{position:absolute;border-radius:50%;background:#FBD6E7}
.cpm-c1{width:118%;aspect-ratio:1;right:-58%;bottom:-40%;opacity:.16}
.cpm-c2{width:46%;aspect-ratio:1;left:-16%;top:-12%;opacity:.12}
.cpm-logo{position:absolute;left:12%;top:10%;width:30%;height:auto;border-radius:50%;box-shadow:0 2px 8px rgba(80,0,10,.25)}
.cpm-ft{position:absolute;left:12%;bottom:19%;color:#FBD6E7;font:700 calc(var(--w)*.16)/.92 "Circular-Bold","Helvetica Neue",Arial,sans-serif;letter-spacing:-.01em}
.cpm-ft b{display:block;color:#fff}
.cpm-fs{position:absolute;left:12%;bottom:10%;color:rgba(251,214,231,.9);font:400 calc(var(--w)*.044)/1 "Eina01-Regular","Helvetica Neue",Arial,sans-serif;letter-spacing:.06em}

/* inside pages */
.cpm-cover .b{background:#FBE4EB;box-shadow:inset 10px 0 18px -14px rgba(0,0,0,.25)}
.cpm-base .f{background:#FFFAF8;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.cpm-in{position:absolute;inset:9% 10% 8%;text-align:left;display:flex;flex-direction:column;font-family:"Eina01-Regular","Helvetica Neue",Arial,sans-serif;color:#2A1620}
.cpm-hd{font:700 calc(var(--w)*.05)/1 "Circular-Bold","Helvetica Neue",Arial,sans-serif;letter-spacing:.22em;color:#E41E2C;padding-bottom:calc(var(--w)*.035);margin-bottom:calc(var(--w)*.035);border-bottom:1px solid rgba(228,30,44,.25)}
.cpm-row{display:flex;align-items:flex-end;gap:calc(var(--w)*.02);font-size:calc(var(--w)*.054);line-height:1;margin-top:calc(var(--w)*.062);white-space:nowrap}
.cpm-row u{flex:1;height:2px;margin-bottom:.18em;background:radial-gradient(circle,rgba(114,0,38,.45) 45%,transparent 50%) 0 50%/5px 2px;background-repeat:space no-repeat}
.cpm-row b{width:.36em;height:.36em;border-radius:50%;background:#E41E2C;margin-bottom:.1em}
.cpm-tier{font-size:calc(var(--w)*.05);line-height:1;margin-top:calc(var(--w)*.056);color:#720026}
.cpm-bar{height:calc(var(--w)*.026);border-radius:9px;margin-top:calc(var(--w)*.018);background:var(--c);width:var(--l);transform-origin:0 50%}
.cpm-note{margin-top:auto;font-size:calc(var(--w)*.036);color:#8a6f78;letter-spacing:.02em}

/* hero timeline (about 3.6 s, then a gentle float) */
.cpm.armed:not(.play){opacity:0}
.cpm-hero.armed:not(.play) .cpm-rig{transform:translate(-50%,-54%) translateY(30px) rotateX(22deg) rotateY(-26deg) rotateZ(-3deg)}
.cpm-hero.armed:not(.play) .cpm-cover{transform:translateZ(1.5px) rotateY(0deg)}
.cpm-hero.play{animation:cpm-fade .6s ease-out both}
.cpm-hero.play .cpm-rig{animation:cpm-rig 2.5s cubic-bezier(.45,0,.2,1) both}
.cpm-hero.play .cpm-cover{animation:cpm-open 1.5s .85s cubic-bezier(.55,0,.25,1) both}
.cpm-hero.play .cpm-cover .f::after{animation:cpm-sheen 1s .3s ease-in-out both}
.cpm.play .cpm-row{animation:cpm-write .55s ease-out both;animation-delay:calc(var(--t0,2.05s) + var(--i)*var(--st,.11s))}
.cpm.play .cpm-bar{animation:cpm-grow .65s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(var(--t1,2.2s) + var(--i)*var(--sb,.1s))}
.cpm.play .cpm-stage{animation:cpm-float 5s ease-in-out infinite;animation-delay:var(--t2,3.6s)}
.cpm-mini{--w:104px;--t0:1.1s;--t1:1.15s;--t2:2.2s;--st:.07s;--sb:.06s;height:calc(var(--h)*1.22)}
.cpm-mini .cpm-rig{transform:translate(-50%,-50%) translateX(calc(var(--w)*.5)) rotateX(10deg)}
.cpm-mini.play .cpm-rig{animation:cpm-rigm 1.35s cubic-bezier(.45,0,.2,1) both}
.cpm-mini.play .cpm-cover{animation:cpm-open .9s .3s cubic-bezier(.55,0,.25,1) both}
.cpm-mini.play .cpm-cover .f::after{animation:cpm-sheen .6s .05s ease-in-out both}
.cpm-mini .cpm-floor{top:calc(50% + var(--h)*.46);filter:blur(6px)}
.cpm-mini .cpm-row u{height:1px;background-size:3px 1px}
@keyframes cpm-fade{from{opacity:0}to{opacity:1}}
@keyframes cpm-rig{
  0%{transform:translate(-50%,-54%) translateX(0) translateY(30px) rotateX(22deg) rotateY(-26deg) rotateZ(-3deg)}
  34%{transform:translate(-50%,-54%) translateX(0) translateY(0) rotateX(18deg) rotateY(-14deg) rotateZ(-1deg)}
  100%{transform:translate(-50%,-54%) translateX(calc(var(--w)*.5)) rotateX(14deg) rotateY(0deg)}}
@keyframes cpm-rigm{
  0%{transform:translate(-50%,-50%) translateX(0) translateY(10px) rotateX(16deg) rotateY(-22deg) rotateZ(-2deg)}
  35%{transform:translate(-50%,-50%) translateX(0) translateY(0) rotateX(12deg) rotateY(-10deg) rotateZ(-1deg)}
  100%{transform:translate(-50%,-50%) translateX(calc(var(--w)*.5)) rotateX(10deg) rotateY(0deg)}}
@keyframes cpm-open{from{transform:translateZ(1.5px) rotateY(0deg)}to{transform:translateZ(1.5px) rotateY(-180deg)}}
@keyframes cpm-sheen{from{background-position:120% 0}to{background-position:-20% 0}}
@keyframes cpm-write{from{clip-path:inset(0 100% 0 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes cpm-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cpm-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* price list header: same panel as the gift card page */
.cxpl-hero:has(.cpm-hero-wrap){display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto auto auto auto 1fr;column-gap:clamp(24px,4vw,64px);align-items:start;
  padding:clamp(28px,4vw,56px) clamp(24px,4vw,64px)!important;border-radius:28px!important;
  background:radial-gradient(70% 90% at 0% 0%,rgba(244,196,184,.45),transparent 70%),radial-gradient(60% 80% at 100% 100%,rgba(200,192,240,.45),transparent 70%),#FBF6F5!important}
.cxpl-hero:has(.cpm-hero-wrap)::before{display:none!important}
.cxpl-hero:has(.cpm-hero-wrap) > *{grid-column:1}
.cxpl-hero:has(.cpm-hero-wrap) > p:empty{display:none}
.cxpl-hero:has(.cpm-hero-wrap) > .cxpl-eyebrow{grid-row:2}
.cxpl-hero:has(.cpm-hero-wrap) > h1{grid-row:3;margin:6px 0 0!important;line-height:1.02!important}
.cxpl-hero:has(.cpm-hero-wrap) > p:not(:empty){grid-row:4;margin-top:26px!important}
.cxpl-hero:has(.cpm-hero-wrap) > .cxpl-acts{grid-row:5}
.cxpl-hero > .cpm-hero-wrap{grid-column:2;grid-row:1 / -1;align-self:center}
@media (max-width:900px){
  .cxpl-hero:has(.cpm-hero-wrap){grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding:30px 18px 26px!important;border-radius:22px!important;text-align:center}
  .cxpl-hero:has(.cpm-hero-wrap) > *{grid-row:auto!important}
  .cxpl-hero:has(.cpm-hero-wrap) .cxpl-acts{order:5;justify-content:center}
  .cxpl-hero > .cpm-hero-wrap{grid-column:1;order:4;margin:0 0 4px}
  .cxpl-hero .cpm-hero{height:calc(var(--h)*1.22)}
}

/* title: words open on a hinge, a dotted leader draws under the <em> word and a price tag swings on */
.cpm-title{perspective:700px}
.cpm-title .cpm-w{display:inline-block;transform-origin:50% 0;backface-visibility:hidden}
.cpm-title .cpm-key{position:relative;display:inline-block}
.cpm-title .cpm-lead{position:absolute;left:.04em;right:.05em;bottom:-.06em;height:.08em;background:radial-gradient(circle,#E41E2C 42%,transparent 48%) 0 50%/.17em .08em;background-repeat:space no-repeat;opacity:.7}
.cpm-title .cpm-tag{position:absolute;right:-.62em;bottom:-.26em;width:.6em;height:.45em;transform-origin:8% 50%}
.cpm-title.armed .cpm-w{opacity:0;transform:rotateX(-92deg)}
.cpm-title.armed .cpm-lead{clip-path:inset(0 100% 0 0)}
.cpm-title.armed .cpm-tag{opacity:0;transform:scale(0) rotate(-30deg)}
.cpm-fadein.armed{opacity:0;filter:blur(6px);transform:translateY(8px)}
.cpm-title.play .cpm-w{animation:cpm-wopen .62s cubic-bezier(.3,1.35,.5,1) both;animation-delay:calc(var(--i)*.1s)}
.cpm-title.play .cpm-lead{animation:cpm-draw .6s .5s cubic-bezier(.65,0,.25,1) both}
.cpm-title.play .cpm-tag{animation:cpm-tagin .9s 1s cubic-bezier(.3,1.4,.5,1) both}
.cpm-fadein.play{animation:cpm-leadin .7s ease-out both;animation-delay:var(--dl,1s)}
@keyframes cpm-wopen{0%{opacity:0;transform:rotateX(-92deg)}35%{opacity:1}100%{opacity:1;transform:rotateX(0)}}
@keyframes cpm-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes cpm-tagin{0%{opacity:0;transform:scale(0) rotate(-30deg)}40%{opacity:1;transform:scale(1) rotate(14deg)}70%{transform:rotate(-6deg)}100%{opacity:1;transform:rotate(0)}}
@keyframes cpm-leadin{from{opacity:0;filter:blur(6px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}

@media (prefers-reduced-motion:reduce){
  .cpm.play,.cpm.play *,.cpm-title *,.cpm-fadein{animation:none!important}
  .cpm.armed:not(.play),.cpm-title .cpm-w,.cpm-fadein,.cpm-title .cpm-tag{opacity:1!important;transform:none!important;filter:none!important}
  .cpm-title .cpm-lead{clip-path:none!important}
  .cpm-hero.armed .cpm-rig{transform:translate(-50%,-54%) translateX(calc(var(--w)*.5)) rotateX(14deg)!important}
  .cpm-hero.armed .cpm-cover{transform:translateZ(1.5px) rotateY(-180deg)!important}
}

/* menu preview (desktop only) */
.cpla-pop{position:fixed;z-index:100000;width:290px;padding:14px 16px 16px;background:#fff;border:1px solid #f3c9d6;border-radius:16px;box-shadow:0 18px 40px -18px rgba(90,10,25,.35);opacity:0;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease;pointer-events:none;text-align:center;font-family:inherit}
.cpla-pop.on{opacity:1;transform:none;pointer-events:auto}
.cpla-pop .cpla-link{display:block;color:inherit;text-decoration:none!important}
.cpla-pop .cpla-t{margin:4px 0 2px;font-weight:700;font-size:15px;color:#2A1620}
.cpla-pop .cpla-s{margin:0 0 10px;font-size:12.5px;color:#6E5A61;line-height:1.45}
.cpla-pop .cpla-b{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 18px;border-radius:999px;background:#E41E2C;color:#fff!important;font-weight:700;font-size:13px;text-decoration:none!important}
.cpla-pop .cpla-b:hover{background:#c51424}

/* v1.0.1: copy sizes and spacing shared by the Gift Card, Price List and Style Me headers */
.cxpl-hero:has(.cpm-hero-wrap):not(#cpla-x){padding:clamp(28px,4vw,56px) clamp(24px,4vw,64px)!important}
.cxpl-hero:has(.cpm-hero-wrap) > h1{line-height:1.02!important}
.cxpl-hero:has(.cpm-hero-wrap) > p:not(:empty){font-size:18px!important;line-height:1.65!important;color:#6B6360!important;max-width:40ch!important;margin-top:22px!important;margin-bottom:0!important}
.cxpl-hero:has(.cpm-hero-wrap) > .cxpl-acts{margin-top:26px!important}
@media (max-width:900px){.cxpl-hero:has(.cpm-hero-wrap):not(#cpla-x){padding:30px 18px 26px!important}.cxpl-hero:has(.cpm-hero-wrap) > p:not(:empty){font-size:16px!important}}

/* 1.x consistency: all menu hover cards share one layout */
.cpla-pop{padding:14px 16px 16px!important}
.cpla-pop .cpla-link{display:flex!important;align-items:center;justify-content:center;height:180px;padding:0!important;overflow:visible}
.cpla-pop .cpla-t{margin:8px 0 2px!important;font-weight:700;font-size:15px;line-height:1.3;color:#2A1620}
.cpla-pop .cpla-s{margin:0 0 12px!important;font-size:12.5px;line-height:1.45;color:#6E5A61}
.cpla-pop .cpla-b{min-height:38px;padding:8px 18px;font-size:13px;font-weight:700;letter-spacing:0;text-transform:none}
.cpla-pop .cpla-s{min-height:calc(1.45em*3)}
