/* The things in the box. Sizes come from --w (sleeve/record), --pw (postcard), --tw (ticket), --b (box). */

/* ---------- sleeve: cover face over a cream inner sleeve ---------- */
.sleeve{position:relative;width:var(--w);height:var(--w)}
.sl-inner{position:absolute;inset:1.5%;background:var(--grain-soft),linear-gradient(#f4eee2,#e6dcc8);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .55s var(--ease)}
.sleeve.out .sl-inner{transform:translateX(13%)}
.sl-face{position:absolute;inset:0;overflow:hidden;background:#1f1813;box-shadow:4px 6px 14px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.3)}
.sl-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sl-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--grain-soft),linear-gradient(160deg,#efe7d8,#dcd0ba);color:#2b2420}
.sl-empty b{font:400 calc(var(--w) * .16)/1 var(--hand);color:var(--pen)}
.sl-empty span{font:400 calc(var(--w) * .052)/1 var(--mono);letter-spacing:.08em;opacity:.7}
.sl-grain{position:absolute;inset:0;background:var(--grain);mix-blend-mode:overlay;opacity:.5;pointer-events:none;box-shadow:inset 0 0 calc(var(--w) * .12) rgba(0,0,0,.28)}
.sl-sticker{position:absolute;left:6%;bottom:6%;max-width:72%;display:flex;flex-direction:column;padding:4px 7px;background:var(--card);color:var(--ink);
  transform:rotate(-1.5deg);box-shadow:1px 2px 4px rgba(0,0,0,.3);font:400 calc(var(--w) * .042)/1.3 var(--mono)}
.sl-sticker b{font:400 calc(var(--w) * .07)/1.15 var(--hand);color:var(--pen);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-sticker span{opacity:.7;letter-spacing:.05em}

/* ---------- record: groove field + centre label sized by --lr (7" big label, 12" small) ---------- */
.record{position:relative;width:var(--w);height:var(--w);border-radius:50%;filter:drop-shadow(3px 5px 8px rgba(0,0,0,.55))}
.disc{position:absolute;inset:0;border-radius:50%;background:#0c0908}
.grooves{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,transparent 31%,#0a0807 31.5% 33%,transparent 33.5%,transparent 96%,#060504 96.5%),
             repeating-radial-gradient(circle,#191411 0 .8px,#0b0908 .8px 2.2px)}
.rc-label{position:absolute;left:50%;top:50%;width:calc(var(--lr) * 100%);height:calc(var(--lr) * 100%);transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2%;text-align:center;
  box-shadow:0 0 0 calc(var(--w) * .012) #0d0a08,0 0 0 calc(var(--w) * .02) rgba(255,255,255,.05)}
.rc-label.photo img{width:100%;height:100%;object-fit:cover}
.rc-label.solid{background:var(--grain-soft),var(--lc);color:var(--li)}
.rc-label.solid::before{content:"";position:absolute;inset:7%;border-radius:50%;border:1px solid currentColor;opacity:.25}
.rc-label.solid{justify-content:space-between;padding:calc(var(--w) * var(--lr) * .15) 0 calc(var(--w) * var(--lr) * .17)}
.rc-brand{font:700 calc(var(--w) * var(--lr) * .105)/1.08 var(--mono);letter-spacing:.06em}
.rc-s{max-width:80%;font:400 calc(var(--w) * var(--lr) * .068)/1.2 var(--mono);letter-spacing:.08em;opacity:.72;text-transform:uppercase}
.hole{position:absolute;left:50%;top:50%;width:3.2%;height:3.2%;transform:translate(-50%,-50%);border-radius:50%;background:#050403;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 25deg,transparent,rgba(255,238,210,.13) 7%,transparent 15%,transparent 50%,rgba(255,238,210,.09) 57%,transparent 65%)}
.record.spin .disc{animation:spin 1.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* sleeve + record half out (shop detail, cover step) */
.pack{position:relative;height:var(--w)}
.pack .record{position:absolute;top:2%}
.pack .sleeve{position:absolute;left:0;top:0}
.pack .sl-inner{transform:translateX(9%)}
.pack.out .sl-inner{transform:translateX(14%)}

/* ---------- postcard, lying on the opened envelope it came in ---------- */
.postcard{--pw:200px;position:relative;width:var(--pw);height:calc(var(--pw) * .66);color:var(--pen)}
.postcard.big{--pw:min(92vw,460px)}
.pc-envelope{position:absolute;left:8%;top:16%;width:94%;aspect-ratio:100/70;transform:rotate(5deg);transform-origin:30% 70%;filter:drop-shadow(2px 5px 7px rgba(0,0,0,.35))}
.pc-envelope svg{position:absolute;left:0;top:calc(-40 / 70 * 100%);width:100%;height:calc(110 / 70 * 100%);display:block}
.pc-card{position:absolute;inset:0;display:grid;grid-template-columns:68% 32%;padding:calc(var(--pw) * .055);
  background:var(--grain-soft),linear-gradient(#f3eee4,#ebe4d6);box-shadow:3px 5px 12px rgba(0,0,0,.4),inset 0 0 0 calc(var(--pw) * .025) #f3eee4,inset 0 0 0 calc(var(--pw) * .025 + 1px) rgba(40,40,60,.35)}
.pc-msg{position:relative;padding:calc(var(--pw) * .02) calc(var(--pw) * .035) 0 calc(var(--pw) * .015);border-right:1px solid rgba(40,40,60,.35);overflow:hidden}
.pc-msg p,.pc-msg textarea{margin:0;white-space:pre-wrap;word-break:break-word;font:400 calc(var(--pw) * .082 * var(--fk,1))/1.38 var(--pcf);color:var(--pen)}
.pc-side{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:calc(var(--pw) * .01);padding:0 0 calc(var(--pw) * .03) calc(var(--pw) * .045)}
.pc-stamp{position:relative;flex:none;align-self:flex-end;margin-bottom:auto;width:calc(var(--pw) * .145);aspect-ratio:84/104;transform:rotate(2deg);filter:drop-shadow(0 1px 1.5px rgba(40,20,10,.35))}
.pc-stamp svg{display:block;width:100%;height:100%}
.pc-line{display:flex;align-items:flex-end;gap:5px;min-height:calc(var(--pw) * .1);border-bottom:1px solid rgba(40,40,60,.35);overflow:hidden}
.pc-line span{flex:none;font:400 calc(var(--pw) * .036)/1.4 var(--thai);color:#6b6d80}
.pc-line b,.pc-line input{flex:1;min-width:0;height:1.3em;padding:0;-webkit-appearance:none;appearance:none;border-radius:0;font:400 calc(var(--pw) * .07 * var(--nk,1))/1.2 var(--pcf);color:var(--pen);white-space:nowrap;overflow:hidden}

/* ---------- ticket with photo ---------- */
.ticket{--tw:96px;--cut:calc(var(--tw) * .64);position:relative;width:var(--tw);background:var(--grain-soft),linear-gradient(#f6f1e7,#ece4d4);color:#1a1410;
  font-size:calc(var(--tw) * .056);filter:drop-shadow(3px 5px 8px rgba(0,0,0,.4));
  -webkit-mask:radial-gradient(circle calc(var(--tw) * .065) at 0 var(--cut),#0000 98%,#000) ,radial-gradient(circle calc(var(--tw) * .065) at 100% var(--cut),#0000 98%,#000);
  -webkit-mask-composite:source-in;mask:radial-gradient(circle calc(var(--tw) * .065) at 0 var(--cut),#0000 98%,#000),radial-gradient(circle calc(var(--tw) * .065) at 100% var(--cut),#0000 98%,#000);mask-composite:intersect}
.ticket.big{--tw:min(64vw,270px)}
.tk-top{height:var(--cut);padding:7% 8% 0;display:flex;flex-direction:column;overflow:hidden}
.tk-head{display:flex;justify-content:space-between;align-items:baseline;font:400 1em/1 var(--mono)}
.tk-head i{font:italic 400 1.15em/1 Georgia,serif;letter-spacing:.04em}
.tk-mid{display:flex;justify-content:space-between;gap:4%;margin-top:6%;flex:1}
.tk-mid p{margin:0;font:400 .74em/1.45 var(--mono);letter-spacing:.01em}
.tk-big{font:400 3.4em/.8 Georgia,serif;margin-right:-14%;border-left:1px dashed rgba(26,20,16,.4);padding-left:6%}
.tk-no{font:400 .9em/1 var(--mono);padding-bottom:7%}
.tk-perf{height:0;border-top:1.5px dashed rgba(26,20,16,.45);margin:0 9%}
.tk-body{padding:7% 9% 8%;display:flex;flex-direction:column;align-items:center;gap:5%}
.tk-name{align-self:stretch;display:flex;align-items:baseline;gap:5%;padding:2% 4%;border:1px solid rgba(26,20,16,.55)}
.tk-name span{font:italic 400 .95em/1.2 Georgia,serif}
.tk-name b{flex:1;min-width:0;font:400 calc(1.35em * var(--nk,1))/1.1 var(--pcf);color:#1a1410;white-space:nowrap;overflow:hidden}
.tk-vip{font:400 .95em/1.6 var(--mono);letter-spacing:.1em}
.tk-photo{width:84%;aspect-ratio:3/4;border:calc(var(--tw) * .02) solid #1d1916;background:#cfc6b6;display:grid;place-items:center;overflow:hidden}
.tk-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ticket.bw .tk-photo img{filter:grayscale(1) contrast(1.12) brightness(1.02)}
.tk-empty{font:400 1em var(--thai);color:#6b6155}
.tk-foot{align-self:stretch;display:flex;justify-content:space-between;font:400 .7em/1 var(--mono);letter-spacing:.03em;margin-top:3%}

/* ---------- open box from above, lid folded back behind it (box step) ---------- */
.obox{--b:270px;position:relative;width:calc(var(--b) + 16px);padding-top:calc(var(--b) * .26);filter:drop-shadow(0 22px 26px rgba(0,0,0,.55))}
.ob-lid{position:absolute;left:0;right:0;top:0;height:calc(var(--b) * .26 + 8px);border-radius:3px 3px 1px 1px;display:grid;place-items:center;
  overflow:hidden;background:var(--grain-soft),linear-gradient(#8f2d35,#7a252d 72%,#651d25);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2),inset 0 2px 0 rgba(255,190,170,.14)}
.ob-lid::after{content:"";position:absolute;left:3px;right:3px;bottom:7px;height:3px;border-top:1px solid rgba(0,0,0,.28);border-bottom:1px solid rgba(255,190,170,.12)}
.ob-lid .k-stars svg{width:100%;height:100%}
.ob-lid .ftr-sign{position:relative;font-size:calc(var(--b) * .062)}
.ob-tray{position:relative;width:calc(var(--b) + 16px);height:calc(var(--b) + 16px);padding:8px;border-radius:2px;
  background:var(--grain-soft),linear-gradient(160deg,#98323a,#7c262e 60%,#681f27);box-shadow:inset 0 2px 0 rgba(255,190,170,.2),inset 0 -2px 0 rgba(0,0,0,.25),inset 0 0 0 1px rgba(0,0,0,.2)}
.ob-floor{position:relative;width:100%;height:100%;overflow:hidden;border:6px solid;border-color:#3f1015 #6c2129 #8a2c34 #521820;
  background:var(--grain-soft),radial-gradient(120% 120% at 70% 20%,#3b2620,#1e120e)}
.ob-notch{position:absolute;top:50%;width:26px;height:34px;margin-top:-17px;background:#120a07;box-shadow:inset 0 4px 6px rgba(0,0,0,.8)}
.ob-notch.l{left:-6px;border-radius:0 50% 50% 0/0 50% 50% 0}
.ob-notch.r{right:-6px;border-radius:50% 0 0 50%/50% 0 0 50%}
.ob-shade{position:absolute;inset:14px;pointer-events:none;z-index:40;
  box-shadow:inset 0 12px 14px -6px rgba(0,0,0,.55),inset 10px 0 12px -8px rgba(0,0,0,.45),inset -6px 0 10px -8px rgba(0,0,0,.3)}
.obox .k-items{position:absolute;inset:0}

/* ---------- 3D gift box: floor + walls, red lid with skirts, gold stars + sign, sheer ribbons ---------- */
.kbox{--b:270px;--hb:calc(var(--b) * .14);--lh:calc(var(--b) * .1);position:relative;width:var(--b);height:var(--b);transform-style:preserve-3d}
.k-face{position:absolute;transition:opacity .5s}
.k-floor{inset:0;background:var(--grain-soft),radial-gradient(120% 120% at 70% 20%,#3b2620,#1e120e);box-shadow:inset 0 0 0 2px #521820}
.k-wall{background:var(--grain-soft),linear-gradient(var(--c1),var(--c2))}
.k-wall.n{left:0;top:0;width:var(--b);height:var(--hb);transform-origin:50% 0;transform:rotateX(90deg);--c1:#5e1a20;--c2:#4a1419}
.k-wall.s{left:0;bottom:0;width:var(--b);height:var(--hb);transform-origin:50% 100%;transform:rotateX(-90deg);--c1:#8e2b33;--c2:#76232a}
.k-wall.w{left:0;top:0;width:var(--hb);height:var(--b);transform-origin:0 50%;transform:rotateY(-90deg);--c1:#6f2027;--c2:#5a1a20}
.k-wall.e{right:0;top:0;width:var(--hb);height:var(--b);transform-origin:100% 50%;transform:rotateY(90deg);--c1:#9c343b;--c2:#82282f}
.k-lid{position:absolute;inset:-3px;transform-style:preserve-3d;transform:translateZ(calc(var(--hb) + 1px));transition:transform 1.1s cubic-bezier(.45,0,.2,1)}
.k-skirt{background:var(--grain-soft),linear-gradient(var(--c1),var(--c2))}
.k-skirt.n{left:0;top:0;right:0;height:var(--lh);transform-origin:50% 0;transform:rotateX(-90deg);--c1:#5a191f;--c2:#45131a}
.k-skirt.s{left:0;bottom:0;right:0;height:var(--lh);transform-origin:50% 100%;transform:rotateX(90deg);--c1:#93303a;--c2:#7a252d}
.k-skirt.w{left:0;top:0;bottom:0;width:var(--lh);transform-origin:0 50%;transform:rotateY(90deg);--c1:#6b1f26;--c2:#561920}
.k-skirt.e{right:0;top:0;bottom:0;width:var(--lh);transform-origin:100% 50%;transform:rotateY(-90deg);--c1:#a3383f;--c2:#86292f}
.k-top{inset:0;overflow:hidden;border-radius:2px;display:grid;place-items:center;background:var(--grain-soft),radial-gradient(90% 80% at 30% 20%,#9a333b,#80272f 55%,#6a1f27);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2),inset 1px 1px 0 rgba(255,190,170,.18)}
.k-stars{position:absolute;inset:0;pointer-events:none}
.k-stars svg{display:block;width:100%;height:100%;filter:drop-shadow(0 .5px 0 rgba(60,10,15,.5))}
.k-top .ftr-sign{position:relative;font-size:calc(var(--b) * .068)}
.k-rib{position:absolute;background:linear-gradient(90deg,rgba(120,20,30,.55),rgba(190,60,70,.42) 45%,rgba(110,18,28,.55));box-shadow:0 0 0 .5px rgba(255,170,170,.18),0 1px 3px rgba(0,0,0,.25);transition:transform .75s cubic-bezier(.6,0,.3,1)}
.k-rib.v{left:86%;top:0;bottom:0;width:9%;transform:translateX(-50%)}
.k-rib.h{top:88%;left:0;right:0;height:9%;transform:translateY(-50%);background:linear-gradient(rgba(120,20,30,.55),rgba(190,60,70,.42) 45%,rgba(110,18,28,.55))}
.kbox.untie .k-rib.v{transform:translate(-50%,118%)}
.kbox.untie .k-rib.h{transform:translate(118%,-50%)}
/* the same ribbons running on down the lid's sides and the box walls (front-right and front-left faces) */
.k-rs{position:absolute;background:linear-gradient(90deg,rgba(110,18,28,.6),rgba(180,55,65,.48) 45%,rgba(100,16,26,.6));transition:opacity .4s}
.k-rs.v{left:86%;top:0;bottom:0;width:9%;transform:translateX(-50%)}
.k-rs.h{top:88%;left:0;right:0;height:9%;transform:translateY(-50%);background:linear-gradient(rgba(110,18,28,.6),rgba(180,55,65,.48) 45%,rgba(100,16,26,.6))}
.kbox.untie .k-rs{opacity:0}
.kbox.lift .k-lid{transform:translateZ(calc(var(--hb) + var(--lidz,380px)))}
.kbox.gone .k-face{opacity:0}

/* ---------- house sign: dot-matrix name with a script line across it ---------- */
.ftr-sign{display:inline-flex;flex-direction:column;align-items:center;line-height:1;color:var(--sg,#fff8ee);white-space:nowrap}
.ftr-sign b{font:900 1em/1 var(--dot);font-variation-settings:"ROND" 100;letter-spacing:.06em;-webkit-text-stroke:.035em currentColor}
.ftr-sign i{position:relative;margin-top:-.36em;font:400 1.12em/1 var(--script);font-style:normal;letter-spacing:.01em}
.ftr-sign.foil{--sg:#e6c27a;filter:drop-shadow(0 1px 0 rgba(50,8,12,.55))}

/* ---------- price in the dot font, ฿ drawn as a dotted B with its own stroke ---------- */
.dprice{display:inline-flex;align-items:baseline;gap:.14em;font-family:var(--dot);font-variation-settings:"ROND" 100;-webkit-text-stroke:.03em currentColor}
.dprice .baht{position:relative}
.dprice .baht::after{content:"";position:absolute;left:42%;top:-.2em;bottom:-.14em;width:.13em;margin-left:-.065em;
  background:radial-gradient(circle,currentColor 42%,transparent 46%) 50% 0/.13em .13em repeat-y}