/* Print shop: product mockups rendered from the couple's own photos */
.shop,.cart{position:fixed;inset:0;z-index:70;background:rgba(18,15,12,.55);display:none}
.shop.open,.cart.open{display:block}
.shop-in{position:absolute;inset:clamp(0px,3vw,40px);background:var(--paper);display:grid;grid-template-rows:auto 1fr;overflow:auto}
.shop-top{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line)}
.shop-eyebrow{font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold)}
.shop-body{display:grid;grid-template-columns:1.5fr 1fr;min-height:0}
.stage{position:relative;min-height:440px;overflow:hidden}

/* room: plaster wall lit from a window on the left, oak floor, a console */
.room{position:absolute;inset:0;display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 18% 20%,rgba(255,248,232,.85),rgba(255,248,232,0) 60%),
    linear-gradient(180deg,#e6ddcd 0%,#ddd2bf 78%,#cbbfa9 78.2%,#b49d7d 100%)}
.room::before{content:"";position:absolute;inset:0 0 22% 0;opacity:.35;
  background-image:repeating-radial-gradient(circle at 30% 40%,rgba(0,0,0,.025) 0 1px,transparent 1px 3px)}
.room::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;
  background:repeating-linear-gradient(90deg,rgba(60,40,20,.10) 0 1px,transparent 1px 90px),linear-gradient(180deg,#a88d6a,#8f7556)}
.console{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);width:58%;height:5.5%;z-index:2;
  background:linear-gradient(180deg,#5b4330,#3d2c1f);box-shadow:0 14px 22px rgba(30,20,10,.35)}
.console::before,.console::after{content:"";position:absolute;top:100%;width:5%;height:240%;background:#3a2a1d}
.console::before{left:6%}.console::after{right:6%}
.vase{position:absolute;bottom:23.5%;left:calc(50% + 20%);width:5.5%;aspect-ratio:.55;z-index:3;border-radius:40% 40% 30% 30%;
  background:linear-gradient(90deg,#d9d2c4,#f4f0e8 45%,#c9c0b0)}
.vase::after{content:"";position:absolute;left:50%;bottom:92%;width:2px;height:120%;background:#6f7a52;transform:rotate(-8deg);box-shadow:6px -4px 0 -0px #6f7a52}
.hang{position:relative;z-index:1;margin-bottom:9%}
.studio{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,#f7f2e9,#ddd3c2)}

/* frames: moulding, inner lip, bevelled mat, glass */
.frame{--fw:20px;position:relative;padding:var(--fw);box-shadow:0 34px 60px -14px rgba(30,20,10,.55),0 6px 14px rgba(30,20,10,.25)}
.frame .lip{padding:0;box-shadow:inset 0 3px 6px rgba(0,0,0,.45);background:#fbf9f4}
.frame .mat{background:#fbf9f4;padding:11%;height:100%;box-shadow:inset 0 2px 5px rgba(0,0,0,.18)}
.frame .bevel{height:100%;padding:3px;background:linear-gradient(135deg,#fff,#efe9de);box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame::after{content:"";position:absolute;inset:var(--fw);pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.05) 28%,rgba(255,255,255,0) 42%,rgba(255,255,255,.07) 78%,rgba(255,255,255,0))}
.f-black{background:linear-gradient(135deg,#34302c,#121110 45%,#2c2926 55%,#0e0d0c);box-shadow:0 34px 60px -14px rgba(30,20,10,.55),0 6px 14px rgba(30,20,10,.25),inset 2px 2px 0 rgba(255,255,255,.13),inset -2px -2px 0 rgba(0,0,0,.6)}
.f-walnut{--fw:24px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 1px,transparent 1px 5px,rgba(255,255,255,.04) 5px 6px,transparent 6px 11px),linear-gradient(135deg,#7a5639,#4a3221 50%,#6b4a31)}
.f-oak{--fw:24px;background:repeating-linear-gradient(90deg,rgba(80,50,20,.12) 0 1px,transparent 1px 6px,rgba(255,255,255,.06) 6px 7px,transparent 7px 13px),linear-gradient(135deg,#d2ac7e,#a97f53 50%,#c79e70)}
.f-white{background:linear-gradient(135deg,#fbfaf6,#e7e2d8 50%,#f5f2ec);box-shadow:0 34px 60px -14px rgba(30,20,10,.45),0 6px 14px rgba(30,20,10,.2),inset 2px 2px 0 #fff,inset -2px -2px 0 rgba(0,0,0,.12)}
.f-gold{--fw:30px;background:
  linear-gradient(135deg,transparent 0 46%,rgba(0,0,0,.18) 50%,transparent 54%),
  repeating-linear-gradient(45deg,rgba(255,255,255,.10) 0 2px,transparent 2px 6px),
  linear-gradient(135deg,#f5e2a4,#b88a3a 22%,#f8e7b0 44%,#9c7029 64%,#ecd38f 84%,#b3863a);
  box-shadow:0 34px 60px -14px rgba(30,20,10,.55),0 6px 14px rgba(30,20,10,.25),inset 0 0 0 5px rgba(120,84,30,.35),inset 0 0 0 8px rgba(255,240,200,.35)}
.f-floater{--fw:12px;background:linear-gradient(135deg,#2e2a26,#141210)}
.f-floater .mat{background:#141210;padding:5%}
.f-floater .bevel{background:none;padding:0;box-shadow:0 10px 18px rgba(0,0,0,.6)}
.land .frame,.frame.land{width:min(46vw,520px);aspect-ratio:1.3}
.port .frame,.frame.port{height:min(52vh,470px);aspect-ratio:.78}

/* other products */
.m-print{background:#fff;padding:4%;box-shadow:0 18px 40px rgba(40,30,20,.28)}
.m-print.land{width:min(44vw,500px);aspect-ratio:1.4}.m-print.port{height:min(52vh,460px);aspect-ratio:.72}
.m-print img,.m-canvas img,.trio img,.page img{width:100%;height:100%;object-fit:cover;display:block}
.m-canvas{position:relative;transform:perspective(1300px) rotateY(-18deg);transform-style:preserve-3d}
.m-canvas.land{width:min(42vw,480px);aspect-ratio:1.5}.m-canvas.port{height:min(50vh,450px);aspect-ratio:.68}
.m-canvas .face{position:absolute;inset:0;box-shadow:26px 28px 44px rgba(30,20,10,.38)}
.m-canvas .edge{position:absolute;top:0;bottom:0;right:-26px;width:26px;transform-origin:left;transform:rotateY(90deg);background-size:cover;background-position:right;filter:brightness(.62)}
.trio{display:flex;align-items:center;gap:22px}
.trio .frame{--fw:12px}
.trio .t1,.trio .t3{width:min(12vw,150px);aspect-ratio:.8}
.trio .t2{width:min(22vw,270px);aspect-ratio:.8}
.trio .frame .mat{padding:9%}
.album{position:relative;display:flex;width:min(48vw,560px);aspect-ratio:2;padding:10px;background:linear-gradient(135deg,#d8cfc0,#bdb1a0);border-radius:4px;box-shadow:0 28px 50px -10px rgba(30,20,10,.5);transform:perspective(1600px) rotateX(24deg)}
.page{flex:1;background:#fbf9f4;padding:7%;position:relative}
.page:first-child{box-shadow:inset -18px 0 22px -12px rgba(0,0,0,.28)}
.page:last-child{box-shadow:inset 18px 0 22px -12px rgba(0,0,0,.28)}
.acrylic{position:relative;width:min(30vw,340px);aspect-ratio:.8;padding:0;border-radius:6px;background:rgba(255,255,255,.25);
  box-shadow:0 30px 40px -12px rgba(30,20,10,.5),inset 0 0 0 1px rgba(255,255,255,.7),inset 6px 6px 12px rgba(255,255,255,.5),inset -8px -8px 14px rgba(120,140,140,.25)}
.acrylic img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:cover;border-radius:2px}
.acrylic::after{content:"";position:absolute;inset:0;border-radius:6px;background:linear-gradient(120deg,rgba(255,255,255,.45),rgba(255,255,255,0) 35%,rgba(255,255,255,0) 70%,rgba(255,255,255,.18))}
.m-tee{position:relative;width:min(34vw,380px)}
.m-tee svg{width:100%;filter:drop-shadow(0 18px 28px rgba(30,20,10,.25))}
.m-tee .chest{position:absolute;left:31%;top:27%;width:38%;aspect-ratio:1;overflow:hidden;opacity:.93;mix-blend-mode:multiply}
.m-tee .chest img{width:100%;height:100%;object-fit:cover}
.m-mug{position:relative;width:min(22vw,280px);aspect-ratio:.9}
.m-mug .body{position:absolute;inset:0;border-radius:6px 6px 18px 18px;overflow:hidden;background:#fff;box-shadow:inset -26px 0 30px rgba(0,0,0,.18),inset 20px 0 24px rgba(255,255,255,.5),0 20px 30px rgba(30,20,10,.25)}
.m-mug .body img{width:84%;height:70%;margin:15% auto 0;border-radius:4px;object-fit:cover;display:block}
.m-mug .handle{position:absolute;right:-24%;top:22%;width:32%;height:46%;border:14px solid #f4f2ee;border-left:0;border-radius:0 50% 50% 0;box-shadow:6px 8px 14px rgba(30,20,10,.2)}

/* panel */
.panel{padding:26px clamp(18px,3vw,40px);display:flex;flex-direction:column;gap:14px}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tabs button,.chips button{border:1px solid var(--line);padding:9px 12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:#fff}
.tabs button.on,.chips button.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.tabs button .new{color:var(--gold);margin-left:6px}
.panel h3{font-family:var(--serif);font-weight:400;font-size:34px;margin-top:6px}
.pnote{color:var(--soft);font-size:14px;margin-top:-8px;line-height:1.5}
.opt label{display:block;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--soft);margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.swatch{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px;vertical-align:-1px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.price{font-family:var(--serif);font-size:32px}
.add{background:var(--olive);color:#f6f1e8;padding:16px;font-size:12px;letter-spacing:.3em;text-transform:uppercase}
.add:disabled{opacity:.55;cursor:default}
.fine{font-size:12px;color:var(--soft)}
.cart-in{position:absolute;right:0;top:0;bottom:0;width:min(440px,100%);background:var(--paper);display:flex;flex-direction:column;gap:14px;padding-bottom:24px;overflow:auto}
.cart-in>#cartList,.cart-in>.cart-total,.cart-in>.add{margin:0 24px}
.ci{display:grid;grid-template-columns:64px 1fr auto auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.ci img{width:64px;height:64px;object-fit:cover}.ci b{display:block;font-weight:400}.ci span{font-size:12px;color:var(--soft)}
.ci em{font-style:normal;font-family:var(--serif);font-size:20px}
.cart-total{font-family:var(--serif);font-size:26px;text-align:right}
.empty{color:var(--soft);padding:20px 0}
@media (max-width:800px){
  .shop-body{grid-template-columns:1fr}.stage{min-height:360px}
  .land .frame,.frame.land{width:78vw}.port .frame,.frame.port{height:46vh}
  .m-print.land,.m-canvas.land{width:72vw}.album{width:86vw}.acrylic{width:56vw}.m-tee{width:64vw}.m-mug{width:42vw}
  .trio .t1,.trio .t3{width:20vw}.trio .t2{width:36vw}
}

/* split canvas: one photo cut across panels */
.split{display:flex;gap:2.2%;width:min(52vw,600px);aspect-ratio:1.6;align-items:center}
.split .pn{position:relative;height:100%;flex:1;background-repeat:no-repeat;background-color:#d9cfbd;box-shadow:16px 20px 30px rgba(30,20,10,.38),inset -3px 0 0 rgba(0,0,0,.12)}
.split.stagger .pn:nth-child(odd){height:84%}
@media (max-width:800px){.split{width:84vw}}
.sthumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sthumbs button{aspect-ratio:1.5;overflow:hidden;outline:1px solid var(--line)}
.sthumbs button.on{outline:2px solid var(--ink);outline-offset:1px}
.sthumbs img{width:100%;height:100%;object-fit:cover}
.chips button:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}

/* engraved plate + gift */
.frame.has-plate .mat{padding-bottom:20%;position:relative}
.frame.has-plate .bevel{height:auto;aspect-ratio:var(--ar,1.33)}
.plate{position:absolute;left:50%;bottom:5.5%;transform:translateX(-50%);min-width:34%;max-width:70%;padding:5px 14px;text-align:center;
  background:linear-gradient(180deg,var(--p1),var(--p2));color:var(--pt);border-radius:2px;
  box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.2);font-family:var(--serif);line-height:1.15}
.plate b{display:block;font-weight:500;font-size:clamp(9px,1.1vw,14px);letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.plate span{display:block;font-size:clamp(7px,.8vw,10px);letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.trio .plate{min-width:60%;padding:3px 8px}
.fields{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.fields input,.fields textarea{font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);background:#fff;color:var(--ink);resize:vertical}
.opt label input[type=checkbox]{accent-color:var(--olive);margin-right:8px;vertical-align:-1px}
.opt > label{cursor:pointer;text-transform:none;letter-spacing:.02em;font-size:14px;color:var(--ink)}
.plus{font-style:normal;color:var(--gold);margin-left:6px}
.ci span{display:block}


/* Framed canvas: canvas set inside a floater frame with a shadow gap */
.m-fcan{position:relative;display:inline-block;padding:14px;border-radius:2px;
  box-shadow:0 18px 40px rgba(0,0,0,.34),0 2px 6px rgba(0,0,0,.26)}
.m-fcan .gap{padding:10px;background:#0d0c0b;box-shadow:inset 0 0 18px rgba(0,0,0,.65)}
.m-fcan .m-canvas{box-shadow:0 2px 10px rgba(0,0,0,.5)}
.m-fcan.f-black{background:linear-gradient(145deg,#2a2724,#141210)}
.m-fcan.f-oak{background:linear-gradient(145deg,#d8ab77,#b4834f)}
.m-fcan.f-white{background:linear-gradient(145deg,#fbf8f1,#e6e0d4)}
.m-fcan.f-white .gap{background:#1a1917}