/* copied from ~/vela-shopify/mockup/shop/grstage.css, see gr/grstage.js */
:root{--m-move:cubic-bezier(.4,0,.2,1);--m-settle:cubic-bezier(.22,1,.36,1);--r-card:22px;--r-tag:6px;--t-body:13.5px;--t-card:20px;--t-fine:11px;--t-label:12.5px;--t-lead:15px;--t-section:24px;--t-serif:17px}
.gr-mk{display:block;width:44%;height:auto;fill:currentColor;color:#fff;overflow:hidden}
.gr-mk path,.gr-mk polygon{fill:currentColor}
@keyframes grIn{from{opacity:0;transform:rotate(0) translateY(16px)}to{opacity:1}}
body.gr-locked{overflow:hidden}
.gr-pop{position:fixed;inset:0;z-index:90;visibility:hidden;opacity:0;transition:opacity .45s,visibility 0s .45s;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 40%,#F6F3EE 0%,#ECE8E1 60%,#E2DDD4 100%)}
[data-theme="hours"] .gr-pop{background:radial-gradient(120% 90% at 50% 40%,#2C241D 0%,#1A1511 60%,#0F0C09 100%)}
.gr-pop.open{visibility:visible;opacity:1;transition:opacity .45s}
.gr-room{position:absolute;inset:0}
.gr-floor{position:absolute;left:50%;bottom:6vh;width:60vw;height:10vh;height:10dvh;margin-left:-30vw;border-radius:50%;
  background:radial-gradient(closest-side,rgba(60,45,30,.22),transparent);filter:blur(18px);pointer-events:none;transition:opacity .6s}
.gr-pop[data-mode="focus"] .gr-floor{opacity:.5}
.gr-stage{position:absolute;inset:0;perspective:1800px;pointer-events:none}
.gr-k{position:absolute;left:50%;top:50%;width:400px;height:700px;transform-style:preserve-3d;pointer-events:auto;
  transition:transform 1s var(--m-settle),opacity .7s;transition-delay:calc(var(--d) * .12)}
.gr-pop[data-mode="focus"] .gr-k,.gr-pop[data-mode="air"] .gr-k{transition-delay:0s}
.gr-kf{width:100%;height:100%;transform-style:preserve-3d}
.gr-pop[data-mode="air"] .gr-kf{animation:grFloat var(--t) ease-in-out infinite;animation-delay:calc(var(--d) * -3)}
@keyframes grFloat{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-14px,0) rotate(.8deg)}}
.gr-kh{width:100%;height:100%;transform-style:preserve-3d;cursor:pointer;transition:transform .45s var(--m-settle)}
.gr-pop[data-mode="air"] .gr-kh:hover{transform:translate3d(0,-30px,60px) scale(1.04)}
.gr-k3{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s var(--m-settle)}
.gr-k.flipped .gr-k3{transform:rotateY(180deg)}
.gs-face{position:absolute;inset:0;display:flex;flex-direction:column;padding:22px 24px 20px;background:#FBFAF7;color:#2A211A;border-radius:var(--r-tag);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  box-shadow:0 1px 2px rgba(40,30,20,.1),0 30px 60px -24px rgba(40,30,20,.45)}
.gr-k:not(.focus) .gs-face{box-shadow:0 1px 2px rgba(40,30,20,.1),0 24px 40px -18px rgba(40,30,20,.5)}
.gs-back{transform:rotateY(180deg);gap:14px}
.gr-art{display:flex;align-items:center;justify-content:center;flex:1 1 212px;min-height:212px;max-height:330px;border-radius:2px}
.gs-front .gr-name{margin-top:18px}
.gr-mk.big{width:34%}
.gr-q{margin:18px 0 0;font-family:var(--serif);font-size:var(--t-label);line-height:1.5;color:#2A211A;text-align:justify}
.gr-by{margin-top:10px;font-size:var(--t-fine);color:#5A5047}
.gr-name{display:flex;align-items:flex-end;justify-content:space-between;padding-top:12px}
.gr-name > div{display:flex;flex-direction:column;font-family:var(--serif);font-size:var(--t-section);line-height:1.08}
.gr-name b{font-weight:400}
.gr-turn{display:flex;flex-direction:column;align-items:flex-end;font-style:normal;font-size:var(--t-lead);line-height:1;color:#7A6E62}
.gr-turn small{font-size:7.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.gr-back-top{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid rgba(42,33,26,.12)}
.gr-back-top i{width:22px;height:22px;border-radius:50%;flex:none}
.gr-back-top b{font-family:var(--serif);font-weight:400;font-size:var(--t-card)}
.gr-back-top span{margin-left:auto;font-family:var(--serif);font-size:var(--t-label);color:#7A6E62}
.gr-h{font-size:var(--t-fine);font-weight:600;letter-spacing:.1em;color:#2A211A;margin-bottom:8px}
.gr-h.split{display:flex;justify-content:space-between;gap:12px}
.gr-h.split span:last-child{font-weight:500}
.gr-notes{display:flex;flex-wrap:wrap;gap:6px}
.gr-notes span{height:24px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;font-size:var(--t-fine);font-weight:600;letter-spacing:.08em}
.gr-map{width:100%;height:auto;display:block;overflow:visible}
.gr-oval{fill:none;stroke:#9A8F84;stroke-width:.8}
.gr-grat{fill:none;stroke:#B9B0A6;stroke-width:.45}
.gr-land{fill:none;stroke:#6E655C;stroke-width:.55;stroke-linejoin:round}
.gr-lead{stroke:#2A211A;stroke-width:.8}
.gr-pin{fill:#2A211A;stroke:#FBFAF7;stroke-width:1.2}
.gr-pl{font-family:var(--sans);font-size:var(--t-fine);font-weight:600;fill:#2A211A}
.gr-roast{position:relative;display:flex;justify-content:space-between;font-size:8.5px;font-weight:500;letter-spacing:.08em;color:#7A6E62;padding-bottom:20px}
.gr-roast i{position:absolute;left:3px;right:3px;bottom:8px;height:1px;background:#2A211A}
.gr-roast i::before,.gr-roast i::after{content:'';position:absolute;top:-1.5px;width:4px;height:4px;border-radius:50%;background:#2A211A}
.gr-roast i::before{left:-2px}
.gr-roast i::after{right:-2px}
.gr-roast b{position:absolute;top:-9px;width:18px;height:18px;margin-left:-9px;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.gr-proc{margin:0;font-size:var(--t-fine);line-height:1.6;color:#4A4038;text-align:justify}
.gr-foot{margin-top:auto;display:flex;justify-content:flex-end}
.gr-mk.ink{width:64px;color:#2A211A}
.gr-mk.small{width:44px;display:inline-block;vertical-align:-1px;margin-right:10px}
.gr-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:16px;padding:18px 22px;z-index:50;pointer-events:none}
.gr-top > *{pointer-events:auto}
.gr-kick{display:inline-flex;align-items:center;font-size:var(--t-label);font-weight:500;color:#5A5047}
.gr-say{margin:0 auto;font-family:var(--serif);font-size:var(--t-serif);color:#2A211A;transition:opacity .3s}
.gr-x{width:40px;height:40px;flex:none;border:0;border-radius:50%;background:rgba(255,255,255,.6);color:#2A211A;font-size:var(--t-body);cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 10px rgba(40,30,20,.12)}
[data-theme="hours"] .gr-kick,[data-theme="hours"] .gr-say{color:#EFE6D6}
[data-theme="hours"] .gr-kick .gr-mk{color:#EFE6D6}
.gr-ctl{position:absolute;left:50%;bottom:22px;z-index:50;display:flex;gap:8px;padding:6px;border-radius:999px;background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px -10px rgba(40,30,20,.35);
  transform:translate(-50%,30px);opacity:0;pointer-events:none;transition:transform .5s var(--m-settle),opacity .4s}
.gr-pop[data-mode="focus"] .gr-ctl{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.gr-c{height:40px;min-width:40px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:#2A211A;font:inherit;font-size:var(--t-label);font-weight:500;cursor:pointer}
.gr-c:hover{background:rgba(42,33,26,.08)}
.gr-c.wide{padding:0 18px;background:#2A211A;color:#FBFAF7}
.gr-c.wide:hover{background:#3A2E24}
.gr-c.soft{background:rgba(42,33,26,.08);color:#2A211A}
.gr-c.soft:hover{background:rgba(42,33,26,.14)}
@media (max-width:700px){.gr-top{padding:12px 14px}
.gr-kick{display:none}
.gr-say{margin-left:0;font-size:var(--t-lead)}
.gr-ctl{bottom:14px;gap:4px}
.gr-c.wide{padding:0 13px;font-size:var(--t-label)}}
@media (prefers-reduced-motion:reduce){.gr-k,.gr-k3,.gr-kh,.gr-pop,.gr-ctl{transition:none!important}
.gr-pop[data-mode="air"] .gr-kf{animation:none}}
.gr-k{height:736px}
.gs-face{padding:30px 30px 28px;border-radius:3px;gap:0}
.gs-front .gr-art{flex:none;height:283px;min-height:0;max-height:none;border-radius:0}
.gs-front .gr-mk.big{width:33%}
.gs-front .gr-q{margin:22px 0 0;font-size:var(--t-label);line-height:1.5;color:#2A211A;text-align:justify}
.gs-front .gr-by{margin-top:16px;font-size:var(--t-fine);color:#4A4038}
.gs-front .gr-name{margin-top:auto;padding-top:14px;align-items:flex-end}
.gs-front .gr-name > div{font-size:var(--t-section);line-height:1.12}
.gr-turn{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-style:normal;color:#5A5047}
.gr-turn span{font-size:var(--t-label);line-height:1}
html body .gr-turn small{font-size:5.5px;font-weight:500;line-height:1.35;text-align:right;letter-spacing:.06em!important}
.gs-back{gap:0;padding-top:34px}
.gs-back .gr-block{margin-bottom:24px}
html body .gs-back .gr-h{font-size:var(--t-fine);font-weight:500;letter-spacing:.02em!important;color:#2A211A;margin-bottom:12px}
.gs-back .gr-h.split{margin-bottom:12px}
.gs-back .gr-h.split span:last-child{font-weight:500}
.gs-back .gr-notes{gap:7px}
html body .gs-back .gr-notes span{height:28px;padding:0 15px;font-size:8.6px;font-weight:500;letter-spacing:.03em!important}
.gs-back .gr-map{margin:2px 0 -4px}
html body .gs-back .gr-roast{font-size:8.6px;font-weight:400;letter-spacing:.02em!important;color:#4A4038;padding-bottom:22px}
.gs-back .gr-roast b{width:21px;height:21px;margin-left:-10.5px;top:-10px;box-shadow:none}
.gs-back .gr-proc{font-size:var(--t-fine);line-height:1.5;color:#2A211A}
.gs-back .gr-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between}
.gr-back-name{display:flex;flex-direction:column;font-family:var(--serif);font-size:var(--t-lead);line-height:1.15;color:#7A6E62}
.gs-back .gr-mk.ink{width:72px}
.gr-c{white-space:nowrap}
.gr-mk{width:36%}
.gr-pop,.gr-pop.open{background:none;transition:none;opacity:1}
.gr-pop.open{visibility:visible}
.gr-bg{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--m-settle);
  background:radial-gradient(120% 90% at 50% 40%,#F6F3EE 0%,#ECE8E1 60%,#E2DDD4 100%)}
[data-theme="hours"] .gr-bg{background:radial-gradient(120% 90% at 50% 40%,#2C241D 0%,#1A1511 60%,#0F0C09 100%)}
.gr-pop.lit .gr-bg{opacity:1}
.gr-pop{--gm:28px}
.gr-pop::before{content:"";position:absolute;inset:0;background:rgba(30,22,15,.2);-webkit-backdrop-filter:blur(16px) saturate(.9);backdrop-filter:blur(16px) saturate(.9);opacity:0;transition:opacity .7s}
.gr-pop.lit::before{opacity:1}
.gr-bg{inset:var(--gm);border-radius:var(--r-card);box-shadow:0 40px 120px -30px rgba(20,15,10,.6),0 0 0 1px rgba(255,255,255,.35) inset}
.gr-room{inset:var(--gm);cursor:default}
.gr-dim{inset:var(--gm);border-radius:var(--r-card)}
.gr-top{top:var(--gm);left:var(--gm);right:var(--gm)}
.gr-ctl{bottom:calc(22px + var(--gm))}
.gr-floor{bottom:calc(6vh + var(--gm))}
@media (max-width:699px){.gr-pop{--gm:10px}
.gr-bg,.gr-dim{border-radius:var(--r-card)}
.gr-ctl{bottom:calc(14px + var(--gm))}}
.gr-floor,.gr-top{opacity:0;transition:opacity .6s .2s}
.gr-pop.lit .gr-floor,.gr-pop.lit .gr-top{opacity:1}
.gr-pop.still .gr-k,.gr-pop.still .gr-kh{transition:none!important}
.gr-k{transition:transform 1.05s cubic-bezier(.16,.84,.24,1);transition-delay:0s}
.gr-pop.dealing .gr-k{transition-delay:calc(var(--i, 0) * 1ms)}
.gr-k[data-i="0"]{--i:0}
.gr-k[data-i="1"]{--i:55}
.gr-k[data-i="2"]{--i:110}
.gr-k[data-i="3"]{--i:165}
.gr-k[data-i="4"]{--i:220}
.gr-k[data-i="5"]{--i:275}
.gr-k[data-i="6"]{--i:330}
.gr-k[data-i="7"]{--i:385}
.gr-k[data-i="8"]{--i:440}
.gr-k[data-i="9"]{--i:495}
.gr-pop[data-mode="focus"] .gr-k,.gr-pop[data-mode="air"] .gr-k{transition-delay:0s}
.gr-pop.dealing[data-mode="air"] .gr-k{transition-delay:calc(var(--i, 0) * 1ms)}
.gr-kp{width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s var(--m-settle);
  transform:translate3d(calc(var(--px, 0px) * var(--dz)), calc(var(--py, 0px) * var(--dz)), 0)}
.gr-k.focus .gr-kp{transform:none}
.gr-pop[data-mode="focus"] .gr-k.focus .gr-kh{transform:rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));transition:transform .5s var(--m-settle)}
.gr-k.focus .gs-face{box-shadow:0 1px 2px rgba(40,30,20,.1),0 40px 80px -30px rgba(40,30,20,.5),0 12px 24px -12px rgba(40,30,20,.25)}
.gr-kh.turning{animation:grRise .9s var(--m-settle)}
@keyframes grRise{0%{transform:translateZ(0)}45%{transform:translateZ(90px)}100%{transform:translateZ(0)}}
.gr-k3{transition:transform .9s var(--m-move)}
.gr-k{opacity:1!important}
.gr-dim{position:absolute;inset:0;z-index:30;opacity:0;pointer-events:none;transition:opacity .6s;
  background:rgba(240,236,229,.55);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
[data-theme="hours"] .gr-dim{background:rgba(15,12,9,.55)}
.gr-pop[data-mode="focus"] .gr-dim{opacity:1;pointer-events:auto}
.gr-kh:focus-visible{outline:none}
.gr-kh:focus-visible .gs-front{box-shadow:0 0 0 3px #2A211A,0 24px 40px -18px rgba(40,30,20,.5)}
.gr-pop[data-mode="air"] .gr-kh:hover .gs-face{box-shadow:0 1px 2px rgba(40,30,20,.1),0 40px 60px -20px rgba(40,30,20,.5)}
@media (prefers-reduced-motion:reduce){.gr-kp,.gr-bg,.gr-dim{transition:none}
.gr-kh.turning{animation:none}}
.gr-pop.upright[data-mode="air"] .gr-kf{animation:none}
.gr-pop.upright .gr-kp{transform:none}
.gr-pop.upright[data-mode="air"] .gr-kh:hover{transform:translate3d(0,-6px,0)}
.gr-pop.upright .gs-face{box-shadow:0 1px 2px rgba(40,30,20,.12),0 14px 28px -12px rgba(40,30,20,.38)}
.gr-pop.closing{opacity:0!important;transform:translateY(10px) scale(.985);transition:opacity .4s ease,transform .46s var(--m-move)!important;pointer-events:none}
@media (prefers-reduced-motion:reduce){.gr-pop.closing{transition:none!important}}