/* A lit grocery counter, with live products above the photographic set. */
.market-welcome .intro>.market-cover{background:linear-gradient(90deg,#03271ef2 0%,#05281dbd 36%,#05271e35 75%),url('./market-room.jpg') center/cover;min-height:700px;padding:56px 46px;gap:48px}
.market-copy h1{font-size:clamp(50px,6.5vw,92px);text-shadow:0 5px 24px #00150f80}.market-copy .eyebrow{display:inline-block;padding:12px 15px;border:1px solid #c5d8ae55;background:#082d23b8;border-radius:5px}.market-copy>p{max-width:390px;font-size:27px}.market-copy>small{color:#f0eedb}.market-meta{background:#092c22a8;padding:20px;border:1px solid #bed28844;border-radius:12px;backdrop-filter:blur(8px)}
.market-demo{position:relative;background:linear-gradient(140deg,#133f2c70,#05291d30);border-color:#f1dd9e66;box-shadow:0 20px 45px #00160f66,inset 0 1px #fff4c750;padding:24px;backdrop-filter:blur(3px)}
.market-demo header>span{color:#f9f0c8;font-size:10px}.market-demo header small{color:#ede4ca;background:#0c3028c9;border-radius:20px;padding:7px 10px}
.demo-packages{padding:50px 12px 0;gap:22px;perspective:900px;position:relative;border-bottom:14px solid #957044;background:radial-gradient(ellipse at 50% 60%,#ffe4a33b,transparent 70%);box-shadow:0 7px 0 #48301a,0 20px 20px #0008}
.demo-packages>button{position:relative;transition:transform .3s,filter .3s;filter:brightness(.83);padding:0;z-index:1}
.demo-packages>button[aria-pressed=true]{filter:brightness(1.08);transform:translateY(-14px);z-index:2}.demo-packages>button:hover{translate:0 -6px;filter:brightness(1.1)}
.demo-bag{height:230px;max-width:145px;border-radius:14px 10px 5px 7px;border-top:12px ridge #d1ac70;border-bottom:10px ridge #b9955a;background:repeating-linear-gradient(87deg,#ffffff09 0 1px,transparent 1px 4px),linear-gradient(100deg,#896334,#ddbd7b 12%,#f6dfa4 28%,#d5ae68 77%,#8d6738 100%);box-shadow:inset 9px 0 8px #fff3c35c,inset -14px 0 12px #5e411b4d,12px 14px 0 #422d2244,18px 22px 18px #0009;transform:rotate(-7deg) rotateY(12deg);transition:transform .35s}
.demo-bag::before{content:'';position:absolute;inset:20% 8% 22%;background:#153c2e;border:1px solid #efdea3;box-shadow:0 2px 3px #4e391e80;border-radius:45% 45% 5px 5px;z-index:0}.demo-bag>*{position:relative;z-index:1}.demo-bag small{color:#f3e3ad;font-size:8px;margin-top:13px}.demo-bag>b{color:#fff2d0;font-size:20px;margin:10px 0}.demo-bag>span{color:#cce783;font-size:42px}.demo-bag>strong{color:#153c2e;font-size:20px;transform:rotate(-4deg);border:1px solid #bda268}
.demo-bag.bag-0{height:190px;max-width:115px}.demo-bag.bag-2{height:270px;transform:rotate(6deg) rotateY(-12deg)}.demo-packages [aria-pressed=true] .demo-bag{outline:none;transform:rotate(0) rotateY(0);box-shadow:inset 9px 0 8px #fff3c35c,inset -14px 0 12px #5e411b4d,0 0 35px #d1ed7844,14px 22px 20px #0009}
.demo-shelf-label{position:relative;border-radius:3px;padding:10px 18px;margin-top:25px;box-shadow:0 4px 6px #0007;transform:rotate(-3deg);font-size:13px}.demo-packages [aria-pressed=true] .demo-shelf-label::before{content:'✓';margin-right:6px}
.demo-register{position:relative;margin:30px 5px 0;padding:20px 22px;background:linear-gradient(110deg,#fff9e9,#e9e2cb);box-shadow:6px 8px 0 #263e2c99,0 15px 20px #00191066;border-radius:3px;transform:rotate(-1deg);border:0;border-top:7px solid #e0bb77}.demo-register>span{color:#677655;font-size:9px}.demo-register output{font-family:monospace;font-size:26px;letter-spacing:-1px;border-bottom:1px dashed #62755170;padding-bottom:12px}.demo-equation{background:#153c2e;color:#def49b;border:1px solid #a5c06a;font-family:monospace;font-size:15px;box-shadow:inset 0 3px 5px #0005}.demo-tip{color:#fff5da;text-shadow:0 2px 5px #000;font-size:12px}
.market-start-actions button:first-child{box-shadow:0 5px 0 #829a38,0 10px 18px #233d2229}.market-welcome .intro>.setup{border-top:5px solid #b78c50}
@media(max-width:1000px){.market-welcome .intro>.market-cover{padding:35px 26px;gap:28px}.demo-packages{gap:12px;padding-inline:0}.demo-bag>b{font-size:16px}.demo-bag.bag-2{height:240px}.demo-bag{height:210px}.demo-bag.bag-0{height:175px}}
@media(max-width:650px){.market-welcome .intro>.market-cover{padding:30px 16px;background-position:65% center;gap:30px}.market-copy h1{font-size:64px;margin:24px 0}.market-copy>p{font-size:23px}.market-demo{padding:16px 12px}.demo-packages{gap:12px;padding-top:32px}.demo-bag{height:175px}.demo-bag.bag-0{height:150px}.demo-bag.bag-2{height:200px}.demo-bag>b{font-size:13px}.demo-bag small{font-size:6px}.demo-bag>span{font-size:28px}.demo-bag>strong{font-size:14px;padding:5px}.demo-shelf-label{padding:8px 5px;font-size:10px}.demo-register{margin-inline:0;padding:16px 12px}.demo-register output{font-size:23px}.demo-equation{font-size:12px}.market-demo header>span,.market-demo header small{font-size:8px}.market-meta{gap:15px;padding:15px}}
@media(prefers-reduced-motion:reduce){.demo-packages>button,.demo-bag{transition:none}}
/* Anchor each label to the package, independent of its height. */
.demo-packages>button{filter:none}
.demo-bag::before{inset:25% 6% 22%;border-radius:12px}
.demo-bag>small{position:absolute;top:10%;left:0;width:100%;margin:0;color:#153c2e;font-size:10px;font-weight:800;letter-spacing:.06em;line-height:1.2}
.demo-bag>b{position:absolute;top:31%;left:0;width:100%;margin:0;color:#fff9e5;font-size:19px;letter-spacing:.02em;line-height:1.2}
.demo-bag>span{position:absolute;top:48%;left:0;width:100%;font-size:32px;line-height:1}
.demo-bag>strong{position:absolute;bottom:7%;left:10%;width:80%;box-sizing:border-box;margin:0;padding:6px 2px;transform:none;font-size:18px;line-height:1.2}
@media(max-width:1000px){.demo-bag>b{font-size:16px}.demo-bag>small{font-size:9px}}
@media(max-width:650px){.demo-bag>b{font-size:12px}.demo-bag>small{font-size:8px;letter-spacing:0}.demo-bag>span{font-size:26px}.demo-bag>strong{font-size:13px}}