/* Circles Style Me Animation: instant-print mood board */
.csp{--w:clamp(130px,26vw,236px);position:relative;width:calc(var(--w)*2.25);max-width:100%;height:calc(var(--w)*1.72);margin:0 auto;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
.csp:focus-visible{box-shadow:0 0 0 3px #E41E2C;border-radius:14px}
.csp *{box-sizing:border-box}
.csp i,.csp b{display:block;font-style:normal}
.csp-pr{position:absolute;width:var(--w)}
.csp-ej{position:relative;padding:calc(var(--w)*.055) calc(var(--w)*.055) calc(var(--w)*.2);background:#fffdfb;border-radius:2px;
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 calc(var(--w)*.05) calc(var(--w)*.1) calc(var(--w)*-.03) rgba(70,20,35,.32)}
.csp-p0{left:0;top:7%;--r:-7deg;z-index:1}
.csp-p1{right:0;top:0;--r:6deg;z-index:2}
.csp-p2{left:22%;top:41%;--r:-2deg;z-index:3}
.csp-ph{position:relative;width:100%;aspect-ratio:768/526;background:#e9dde0 center/cover no-repeat;background-image:var(--img);overflow:hidden}
.csp-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,#4a3a3c,#2a2022);opacity:0}
.csp-play{position:absolute;right:5%;top:7%;width:calc(var(--w)*.13);height:calc(var(--w)*.13);border-radius:50%;background:rgba(255,255,255,.9);z-index:1}
.csp-play::after{content:"";position:absolute;left:40%;top:28%;border-style:solid;border-width:calc(var(--w)*.032) 0 calc(var(--w)*.032) calc(var(--w)*.05);border-color:transparent transparent transparent #E41E2C}
.csp-cap{position:absolute;left:0;right:0;top:calc(100% + var(--w)*.05);text-align:center;font:600 calc(var(--w)*.085)/1 "Caveat","Segoe Print","Bradley Hand",cursive;color:#7a1830;transform:rotate(-1.5deg)}
.csp-tape{position:absolute;left:50%;top:calc(var(--w)*-.115);width:calc(var(--w)*.36);height:calc(var(--w)*.11);margin-left:calc(var(--w)*-.18);z-index:2;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 4px,transparent 4px 9px),rgba(246,179,198,.82);transform:rotate(var(--tr,-4deg));box-shadow:0 1px 2px rgba(0,0,0,.08)}
.csp-p1 .csp-tape{--tr:5deg}
.csp-p2 .csp-tape{--tr:-2deg}
.csp-tape::before,.csp-tape::after{content:"";position:absolute;top:0;bottom:0;width:4px;background:inherit}
.csp-in{position:relative;width:100%;height:100%}

/* instant camera (Polaroid Now, 3/4 view; prints eject from the front slot in perspective, matrices set by JS) */
.csp-cam{position:absolute;left:calc(var(--w)*.375);top:calc(var(--w)*.05);width:calc(var(--w)*1.5);z-index:0;opacity:0;pointer-events:none}
.csp-cam img{display:block;width:100%;height:auto;filter:drop-shadow(0 calc(var(--w)*.04) calc(var(--w)*.05) rgba(90,20,40,.28))}
.csp-cam::after{content:"";position:absolute;left:43%;top:42%;width:calc(var(--w)*1.3);height:calc(var(--w)*1.3);margin:calc(var(--w)*-.65) 0 0 calc(var(--w)*-.65);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));opacity:0}
.csp-pr{transform-origin:0 0;transform:translate(50%,50%) rotate(var(--r)) translate(-50%,-50%)}
.csp-p0{z-index:4}.csp-p1{z-index:5}.csp-p2{z-index:6}

/* hero timeline (about 4.8 s, then a gentle float) */
.csp{--t0:.45s;--st:1.05s;--fl:1.7s;--dv:1s}
.csp-pr{--s:calc(var(--t0) + var(--i)*var(--st))}
.csp.armed:not(.play) .csp-pr{opacity:0}
.csp.armed:not(.play) .csp-ph::after{opacity:.95}
.csp.play .csp-cam{animation:csp-camin .45s cubic-bezier(.3,1.4,.5,1) both,csp-camout .5s ease-in forwards;animation-delay:0s,calc(var(--t0) + 2*var(--st) + var(--fl)*.56)}
.csp.play .csp-cam img{animation:csp-kick var(--st) ease-out 3;animation-delay:var(--t0)}
.csp.play .csp-cam::after{animation:csp-flash var(--st) ease-out 3;animation-delay:var(--t0)}
.csp.play.fit .csp-pr{animation:csp-ejp var(--fl) both;animation-delay:var(--s)}
.csp.play.fit .csp-ej{animation:csp-ejc var(--fl) both;animation-delay:var(--s)}
.csp.play:not(.fit) .csp-pr{animation:csp-drop .75s cubic-bezier(.3,1.3,.5,1) both;animation-delay:var(--s)}
.csp.play .csp-ph::after{animation:csp-dev var(--dv) ease-out both;animation-delay:calc(var(--s) + var(--fl) - .2s)}
.csp.play .csp-tape{animation:csp-tape .35s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--s) + var(--fl) + .25s)}
.csp.play .csp-cap{animation:csp-write .5s ease-out both;animation-delay:calc(var(--s) + var(--fl) + .7s)}
.csp.play .csp-in{animation:csp-float 5.5s ease-in-out infinite;animation-delay:calc(var(--t0) + 2*var(--st) + var(--fl) + 1.4s + var(--i)*.5s)}
.csp-mini{--w:96px;--t0:.2s;--st:.6s;--fl:1s;--dv:.55s}
@keyframes csp-camin{0%{opacity:0;transform:translateY(8%) scale(.9)}100%{opacity:1;transform:none}}
@keyframes csp-camout{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(-6%,-8%) scale(.92)}}
@keyframes csp-kick{0%{transform:none}10%{transform:translateY(2px) scale(.988)}30%{transform:none}}
@keyframes csp-flash{0%{opacity:0}6%{opacity:.85}35%{opacity:0}100%{opacity:0}}
@keyframes csp-ejp{
  0%,52%{opacity:1;transform:var(--H);clip-path:inset(0 -60% -60% -60%);animation-timing-function:cubic-bezier(.35,0,.25,1.1)}
  60%{clip-path:inset(-40% -60% -60% -60%)}
  100%{opacity:1;transform:translate(50%,50%) rotate(var(--r)) translate(-50%,-50%);clip-path:inset(-40% -60% -60% -60%)}}
@keyframes csp-ejc{
  0%{transform:translateY(-100%);animation-timing-function:cubic-bezier(.3,.1,.6,1)}
  45%,52%{transform:translateY(-12%);animation-timing-function:cubic-bezier(.35,0,.25,1)}
  100%{transform:none}}
@keyframes csp-drop{0%{opacity:0;transform:translateY(-50px) translate(50%,50%) rotate(calc(var(--r) - 14deg)) translate(-50%,-50%)}55%{opacity:1}100%{opacity:1;transform:translate(50%,50%) rotate(var(--r)) translate(-50%,-50%)}}
@keyframes csp-tape{from{opacity:0;transform:rotate(var(--tr,-4deg)) scale(.3)}to{opacity:1;transform:rotate(var(--tr,-4deg)) scale(1)}}
@keyframes csp-dev{0%{opacity:.95}100%{opacity:0}}
@keyframes csp-write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes csp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* style me header: same panel as the gift card page */
.csm-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:clamp(24px,4vw,64px);align-items:start;text-align:left;
  margin:8px 0 10px;padding:clamp(28px,4vw,56px) clamp(24px,4vw,64px);border-radius:28px;
  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}
.csm-head > *{grid-column:1}
.csm-head > h1{grid-row:2;margin:0 0 .12em!important;text-align:left!important;line-height:1.02!important}
.csm-head > p{grid-row:3;margin:24px 0 0!important;text-align:left!important;max-width:40ch}
.csm-head > a.btn{grid-row:4;justify-self:start;margin:26px 0 0!important}
.csm-head > .csm-hero-wrap{grid-column:2;grid-row:1 / -1;align-self:center;padding:calc(var(--w,0px)*.1) 0}
section.csm-emptied{display:none!important}
@media (max-width:900px){
  .csm-head{grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding:30px 18px 26px;border-radius:22px;text-align:center}
  .csm-head > *{grid-row:auto!important}
  .csm-head > h1,.csm-head > p{text-align:center!important;margin-left:auto!important;margin-right:auto!important}
  .csm-head > h1.csm-title{justify-self:center}
  .csm-head > a.btn{justify-self:center;order:5}
  .csm-head > .csm-hero-wrap{grid-column:1;order:4;margin:22px 0 4px}
  .csm-head .csp-hero{--w:clamp(120px,38vw,180px)}
}
html.csm-pending section.page-title .title,html.csm-pending section.page-title + section .content{opacity:0}


/* title washi: a roll lays tape under the title, tears it off, then a small piece sticks on the corner */
.csm-head > h1.csm-title{justify-self:start;position:relative;display:inline-block}
.csm-title .csm-u{position:absolute;left:-.04em;right:-.08em;bottom:-.16em;height:.2em;pointer-events:none}
.csm-title .csm-strip{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 .045em,transparent .045em .11em),rgba(246,179,198,.82);box-shadow:0 1px 2px rgba(0,0,0,.06);
  -webkit-mask:linear-gradient(#000 0 0) center/calc(100% - .14em) 100% no-repeat,conic-gradient(from -45deg at right,#000 90deg,transparent 0) right/.09em .066em repeat-y,conic-gradient(from 135deg at left,#000 90deg,transparent 0) left/.09em .066em repeat-y;
          mask:linear-gradient(#000 0 0) center/calc(100% - .14em) 100% no-repeat,conic-gradient(from -45deg at right,#000 90deg,transparent 0) right/.09em .066em repeat-y,conic-gradient(from 135deg at left,#000 90deg,transparent 0) left/.09em .066em repeat-y}
.csm-title.armed .csm-strip{clip-path:inset(-1em 100% -1em -1em)}
.csm-title.play .csm-strip{animation:csm-lay .9s .65s cubic-bezier(.5,.1,.3,1) both}
@keyframes csm-lay{from{clip-path:inset(-1em 100% -1em -1em)}to{clip-path:inset(-1em 0 -1em -1em)}}

/* title: words open on a hinge, a strip of tape slaps onto the highlighted word */
.csm-title{perspective:700px}
.csm-title .csm-w{display:inline-block;transform-origin:50% 0;backface-visibility:hidden}
.csm-title .csm-key{position:relative;display:inline-block}
.csm-title .csm-tape{position:absolute;right:-.3em;top:-.1em;width:.72em;height:.22em;background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 .04em,transparent .04em .1em),rgba(246,179,198,.8);transform:rotate(32deg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.csm-title.armed .csm-w{opacity:0;transform:rotateX(-92deg)}
.csm-title.armed .csm-tape{opacity:0;transform:rotate(32deg) scale(0)}
.csm-fadein.armed{opacity:0;filter:blur(6px);transform:translateY(8px)}
.csm-title.play .csm-w{animation:csm-wopen .62s cubic-bezier(.3,1.35,.5,1) both;animation-delay:calc(var(--i)*.1s)}
.csm-title.play .csm-tape{animation:csm-slap .45s 1.65s cubic-bezier(.3,1.6,.5,1) both}
.csm-fadein.play{animation:csm-leadin .7s ease-out both;animation-delay:var(--dl,1s)}
@keyframes csm-wopen{0%{opacity:0;transform:rotateX(-92deg)}35%{opacity:1}100%{opacity:1;transform:rotateX(0)}}
@keyframes csm-slap{0%{opacity:0;transform:rotate(50deg) scale(1.8)}100%{opacity:1;transform:rotate(32deg) scale(1)}}
@keyframes csm-leadin{from{opacity:0;filter:blur(6px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}

@media (prefers-reduced-motion:reduce){
  .csp.play *,.csm-title *,.csm-fadein{animation:none!important}
  .csp-cam{display:none!important}
  .csp.armed .csp-pr,.csm-title .csm-w,.csm-fadein{opacity:1!important;filter:none!important}
  .csp.armed .csp-pr{transform:translate(50%,50%) rotate(var(--r)) translate(-50%,-50%)!important}
  .csm-title .csm-w,.csm-fadein{transform:none!important}
  .csp.armed .csp-ph::after{opacity:0!important}
  .csm-title .csm-tape{opacity:1!important;transform:rotate(32deg)!important}
  .csm-title .csm-strip{clip-path:none!important}
  }

/* menu preview (desktop only) */
.csma-pop{position:fixed;z-index:100000;width:290px;padding:16px 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}
.csma-pop.on{opacity:1;transform:none;pointer-events:auto}
.csma-pop .csma-link{display:block;color:inherit;text-decoration:none!important;padding:6px 0 4px}
.csma-pop .csma-t{margin:8px 0 2px;font-weight:700;font-size:15px;color:#2A1620}
.csma-pop .csma-s{margin:0 0 10px;font-size:12.5px;color:#6E5A61;line-height:1.45}
.csma-pop .csma-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}
.csma-pop .csma-b:hover{background:#c51424}

/* v1.0.3: copy sizes and spacing shared by the Gift Card, Price List and Style Me headers */
.csm-head:not(#csm-x){padding:clamp(28px,4vw,56px) clamp(24px,4vw,64px)}
.csm-head > h1.csm-title:not(#csm-x){line-height:1.02!important}
.csm-head > p:not(#csm-x){font-size:18px!important;line-height:1.65!important;color:#6B6360!important;max-width:40ch!important;margin-top:15px!important}
@media (max-width:900px){.csm-head:not(#csm-x){padding:30px 18px 26px}.csm-head > p:not(#csm-x){font-size:16px!important}}

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