/* Shop: "The front counter".
   A real counter with the signboard, the chalkboard menu and whatever is on offer standing on it.
   Tap an item and it is picked up. Nothing is sold here: every Buy button leaves for Stripe.
   Warm paper and oak, with purple and lime as small accents. No drop shadows. */

.pap-shop,dialog.sh-pick{--paper:#F6F1E7;--paper2:#EFE6D4;--ink2:#2A2230}
.pap-shop{background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:clip}
dialog.sh-pick{font-family:var(--sans)}
.pap-shop em{font-style:normal;color:var(--purple)}

/* ---------- buttons ---------- */
.pap-shop .sh-b,.sh-pick .sh-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;
  font:800 clamp(14px,1.05vw,15.5px)/1 var(--sans);letter-spacing:-.01em;padding:14px 22px;border:0;cursor:pointer;white-space:nowrap;
  text-decoration:none;transition:transform .25s var(--ease),background .25s,color .25s}
.pap-shop .sh-b:hover,.sh-pick .sh-b:hover{transform:translateY(-2px)}
.sh-b svg{width:14px;height:14px}
.pap-shop .sh-b-ink,.sh-pick .sh-b-ink{background:var(--ink);color:#fff}
.pap-shop .sh-b-ink:hover,.sh-pick .sh-b-ink:hover{background:var(--lime);color:var(--ink)}
.pap-shop .sh-b-line,.sh-pick .sh-b-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.pap-shop .sh-b-line:hover,.sh-pick .sh-b-line:hover{background:var(--ink);color:#fff}
.pap-shop .sh-b-lime{background:var(--lime);color:var(--ink)}
.pap-shop .sh-b-lime:hover{background:#fff;color:var(--purple)}
.pap-shop .sh-b-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.pap-shop .sh-b-ghost:hover{background:#fff;color:var(--ink)}

/* ============================================================ the counter */
/* the photo is never cropped, so every overlay stays exactly on its object */
.sh-top{position:relative;isolation:isolate;container-type:inline-size;background:#cdb597}
.sh-ph{display:block;width:100%;aspect-ratio:1.791}
.sh-ph img{width:100%;height:100%;object-fit:cover;display:block}

/* the sign board and the chalkboard menu on the brick */
.sh-sign{position:absolute;z-index:2;left:30.4%;top:24.5%;width:23.7%;height:23.4%;margin:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;pointer-events:none}
.sh-sign-a{font:800 7.4cqw/.9 var(--sans);letter-spacing:-.05em;color:#3a2412;mix-blend-mode:multiply}
.sh-sign-b{margin-top:.9cqw;font:800 1cqw/1 var(--sans);letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;color:var(--purple)}
.sh-chalk{position:absolute;z-index:2;left:59.1%;top:26%;width:13%;height:31.9%;padding:.7cqw .75cqw;overflow:hidden;
  color:#f1ece0;pointer-events:none}
.sh-chalk-h{margin:0 0 .6cqw;font:800 .85cqw/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#dcea6c}
.sh-chalk ul{list-style:none;margin:0;padding:0}
.sh-chalk li{display:flex;justify-content:space-between;gap:.6cqw;padding:.38cqw 0;border-bottom:1px dashed rgba(241,236,224,.28);
  font:600 .92cqw/1.25 var(--sans)}
.sh-chalk li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-chalk li b{flex:none;font-weight:800;color:#dcea6c}
.sh-chalk-s{margin:.4cqw 0 0;font:600 1cqw/1.45 var(--sans);color:rgba(241,236,224,.85)}

/* the brass bell: it only rings when you tap it */
.sh-bell{position:absolute;z-index:3;left:15.2%;top:72.8%;width:7.2%;height:10.2%;
  border:0;background:transparent;padding:0;cursor:pointer;border-radius:50% 50% 24% 24%}
.sh-bell span{position:absolute;inset:0;border-radius:inherit;background:rgba(255,246,214,0);transition:background .25s}
.sh-bell:hover span{background:rgba(255,246,214,.2)}
.sh-bell:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.sh-bell.is-rung{animation:shDing .6s var(--ease)}
@keyframes shDing{0%,100%{transform:translate(0,0) rotate(0)}18%{transform:translate(-1.5%,0) rotate(-3deg)}
  42%{transform:translate(1.5%,0) rotate(2.4deg)}68%{transform:translate(-.7%,0) rotate(-1.2deg)}}

/* what is on offer, standing on the counter */
.sh-it{position:absolute;z-index:3;left:var(--cx);bottom:var(--by);width:var(--iw);transform:translateX(-50%);
  border:0;background:transparent;padding:0;cursor:pointer;
  transition:transform .3s var(--ease)}
.sh-it img{display:block;width:100%;height:auto}
.sh-it.is-prop{width:calc(var(--iw) * .6)}
.sh-it.is-frame img{border:.45cqw solid #fff;border-radius:.35cqw;aspect-ratio:4/3;object-fit:cover;background:#fff}
.sh-it:hover,.sh-it:focus-visible{transform:translateX(-50%) translateY(-3.5%)}
.sh-it:focus-visible{outline:3px solid var(--lime);outline-offset:4px;border-radius:8px}
.sh-tag{position:absolute;right:-9%;top:-5%;border-radius:.4cqw;padding:.4cqw .65cqw;background:var(--paper);color:var(--ink);
  font:800 .9cqw/1 var(--sans);letter-spacing:-.01em;transform:rotate(6deg)}
.sh-name{position:absolute;left:50%;bottom:calc(100% + .5cqw);transform:translateX(-50%);max-width:22cqw;overflow:hidden;text-overflow:ellipsis;
  background:rgba(26,15,18,.94);color:#fff;border-radius:999px;padding:.55cqw 1cqw;font:700 .95cqw/1 var(--sans);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s}
.sh-it:hover .sh-name,.sh-it:focus-visible .sh-name{opacity:1}
/* they are set down one by one when you reach the counter */
.pap-js .sh-it{opacity:0;transform:translateX(-50%) translateY(-45%)}
.pap-js .sh-top.is-in .sh-it{opacity:1;transform:translateX(-50%);
  transition:opacity .3s ease var(--d),transform .65s cubic-bezier(.34,1.5,.64,1) var(--d)}
.pap-js .sh-top.is-in.is-set .sh-it{transition-delay:0s}
.pap-js .sh-top.is-in .sh-it:hover,.pap-js .sh-top.is-in .sh-it:focus-visible{transform:translateX(-50%) translateY(-3.5%)}

/* ============================================================ sections */
.pap-shop .sh-sec{padding:clamp(52px,6.5vw,92px) clamp(16px,4vw,48px);background:var(--paper)}
.sh-intro{max-width:760px;margin:0 auto;text-align:center}
.pap-shop .sh-h2{margin:0;font-weight:800;font-size:clamp(26px,3.6vw,44px);line-height:1.05;letter-spacing:-.035em;color:var(--ink)}
.pap-shop .sh-lede{max-width:50ch;margin:16px auto 0;font-size:clamp(15.5px,1.25vw,18px);line-height:1.6;color:var(--ink2)}
.pap-shop .sh-note{max-width:620px;margin:clamp(22px,2.4vw,32px) auto 0;text-align:center;font-size:14px;line-height:1.6;color:#6b5f73}
.pap-shop .sh-empty{max-width:620px;margin:18px auto 0;text-align:center;font-size:clamp(15px,1.25vw,17.5px);line-height:1.65;color:var(--ink2)}
.pap-shop .sh-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:clamp(24px,2.6vw,32px) 0 0}

/* ---------- the items ---------- */
.pap-shop .sh-items{list-style:none;margin:clamp(28px,3.2vw,44px) auto 0;padding:0;max-width:1180px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.sh-item{display:flex;flex-direction:column;background:#fff;color:var(--ink);border-radius:16px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(42,34,48,.09)}
.sh-pic{position:relative;aspect-ratio:1.34;background:radial-gradient(60% 70% at 50% 58%,#fff 0%,var(--paper2) 100%)}
.sh-pic img{width:100%;height:100%;display:block;object-fit:contain;padding:8%}
.sh-pic.is-frame img{object-fit:cover;padding:0}
.sh-badge{position:absolute;left:12px;top:12px;background:var(--lime);color:var(--ink);border-radius:999px;
  padding:6px 13px;font:800 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.sh-body{display:flex;flex-direction:column;flex:1;padding:clamp(18px,1.7vw,24px)}
.pap-shop .sh-cat,.sh-pick .sh-cat{margin:0 0 8px;font:800 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--purple)}
.pap-shop .sh-item h3{font-weight:800;font-size:clamp(18px,1.55vw,21px);line-height:1.15;letter-spacing:-.03em;margin:0;color:var(--ink)}
.pap-shop .sh-blurb{margin:9px 0 0;font-size:14.5px;line-height:1.5;color:#5c5165}
.pap-shop .sh-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:auto 0 0;padding-top:18px}
.sh-price{font:800 clamp(19px,1.7vw,23px)/1 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.sh-foot .sh-b{margin-left:auto}

/* ---------- picking one up ---------- */
dialog.sh-pick{width:min(860px,94vw);max-width:none;max-height:92vh;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
dialog.sh-pick::backdrop{background:rgba(26,15,18,.74)}
.sh-pk{position:relative;display:grid;grid-template-columns:1fr 1fr;border-radius:18px;overflow:hidden;background:var(--paper);max-height:92vh}
@media (prefers-reduced-motion:no-preference){
  dialog.sh-pick[open] .sh-pk{animation:shOpen .38s var(--ease) both}
  @keyframes shOpen{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
}
.sh-pk-pic{position:relative;display:grid;place-items:center;min-height:300px;background:radial-gradient(60% 62% at 50% 56%,#fff 0%,var(--paper2) 100%)}
.sh-pk-pic img{width:84%;height:auto;max-height:420px;object-fit:contain;display:block}
.sh-pk-pic.is-frame img{width:100%;height:100%;max-height:none;object-fit:cover}
.sh-pk-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(26px,3vw,44px)}
.sh-pick h2{margin:0;font-weight:800;font-size:clamp(24px,2.6vw,34px);line-height:1.05;letter-spacing:-.04em;color:var(--ink)}
.sh-pk-blurb{margin:14px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink2)}
.sh-pk-price{margin:18px 0 0;font:800 clamp(28px,3vw,38px)/1 var(--sans);letter-spacing:-.04em;color:var(--ink)}
.sh-pk-act{margin:20px 0 0}
.sh-pk-note{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:#6b5f73}
.sh-pk-x{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(42,34,48,.1);color:var(--ink);display:grid;place-items:center;transition:background .2s,color .2s}
.sh-pk-x:hover{background:var(--ink);color:#fff}
.sh-pk-x svg{width:16px;height:16px}

/* ---------- everything else ---------- */
.sh-end{padding:clamp(52px,6.5vw,92px) clamp(16px,4vw,48px);background:var(--ink);color:#fff}
.sh-end-in{max-width:720px;margin:0 auto;text-align:center}
.pap-shop .sh-end .sh-h2{color:#fff}
.pap-shop .sh-end em{color:var(--lime)}
.pap-shop .sh-end-in p{margin:16px 0 0;font-size:clamp(15px,1.25vw,17.5px);line-height:1.65;color:rgba(255,255,255,.8)}
.pap-shop .sh-end .sh-cta{margin-top:clamp(24px,2.6vw,32px)}
.pap-shop .sh-small{font-size:13.5px!important;color:rgba(255,255,255,.6)!important;margin-top:22px!important}
.sh-small a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}

/* ============================================================ narrow screens */
@media (max-width:1020px){
  .pap-shop .sh-items{grid-template-columns:repeat(2,1fr);max-width:760px}
}
@media (max-width:899px){
  /* the counter is a banner on a phone: the cards below carry the words and the buttons */
  .sh-chalk,.sh-sign-b,.sh-tag,.sh-name{display:none}
  .sh-it{pointer-events:none}
  .pap-js .sh-it{opacity:1;transform:translateX(-50%)}
  .sh-pk{grid-template-columns:1fr}
  .sh-pk-pic{min-height:0;aspect-ratio:1.5}
  .sh-pk-pic img{max-height:220px}
  .sh-pk-pic.is-frame img{max-height:none}
}
@media (max-width:640px){
  .pap-shop .sh-items{grid-template-columns:1fr;max-width:420px}
  .pap-shop .sh-cta .sh-b{flex:1 1 100%}
  .pap-shop .sh-foot{padding-top:16px}
  .sh-foot .sh-b{margin-left:0;flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  .pap-shop *,.pap-shop *::before,.pap-shop *::after{transition-duration:.01ms!important;animation:none!important}
  .pap-js .sh-it{opacity:1!important;transform:translateX(-50%)!important}
}

/* v2.16.32: every product picture box is the same size */
.pap-shop .sh-items{align-items:stretch}
.pap-shop .sh-pic,.pap-shop .sh-pic.is-frame{aspect-ratio:1.34!important;height:auto!important;flex:none;overflow:hidden}
.pap-shop .sh-pic img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:contain;padding:8%}
.pap-shop .sh-pic.is-frame img{object-fit:cover;padding:0}

/* v2.16.37 the chalkboard: something cute written on it, on every screen size */
.sh-chalk{display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.5cqw;transform:rotate(-1.5deg)}
.sh-chalk p{margin:0}
.sh-chalk-k{font:600 .8cqw/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(241,236,224,.7)}
.sh-chalk-big{font:italic 300 2.05cqw/1.02 var(--sans);letter-spacing:-.02em;color:#f1ece0;text-shadow:0 0 .12cqw rgba(255,255,255,.55),.05cqw .05cqw 0 rgba(255,255,255,.18)}
.sh-chalk-big span{display:block;font-weight:800;font-style:normal;color:#dcea6c}
.sh-chalk-doo{font-size:1.5cqw;line-height:1;color:#f1ece0;opacity:.85}
.sh-chalk-doo i{font-style:normal;font-size:.8em;color:#e9a6ef}
.sh-chalk-doo b{display:inline-block;animation:chalkBob 1.8s ease-in-out infinite}
@keyframes chalkBob{50%{transform:translateY(.3cqw)}}
@media (prefers-reduced-motion:reduce){.sh-chalk-doo b{animation:none}}
@media(max-width:899px){.sh-chalk-k{display:none}.sh-chalk-big{font-size:2.9cqw}.sh-chalk-doo{font-size:2.2cqw}}