/* The machine is drawn with CSS; products use the app's existing local artwork. */
#shop-panel { margin: 38px auto; }
.vending-machine { width: min(940px, 100%); margin: 22px auto 0; padding-top: 105px; position: relative; }
.vending-sign { position: absolute; top: 0; left: 50%; translate: -50% 0; width: 170px; aspect-ratio: 1; border: 9px solid #25383a; border-radius: 50%; background: linear-gradient(#ef344b 0 46%, #172a32 46% 55%, #e7edf0 55%); box-shadow: 0 0 0 3px #73edc7, 0 0 26px #54efba50, inset 0 6px 10px #ffffff55; z-index: 2; }
.vending-sign span { position: absolute; width: 64px; aspect-ratio: 1; border: 9px solid #172a32; border-radius: 50%; background: #d9e8ec; left: 50%; top: 50%; translate: -50% -50%; box-shadow: inset 0 0 0 5px #a8bcc4; }
.vending-body { position: relative; border: 3px solid #78ebc3; border-radius: 46px 46px 30px 30px; padding: 68px 28px 22px; background: linear-gradient(115deg, #ece7d9, #d8d4c7 70%, #c2c6bc); color: #203936; box-shadow: 0 0 22px #5effbd22, inset 6px 0 5px #ffffff88, inset -8px 0 6px #3c514333, 0 25px 50px #0006; }
.vending-marquee { display: flex; gap: 9px; align-items: center; margin: 0 8px 16px; font-size: 12px; letter-spacing: 2px; font-weight: bold; text-align: left; }
.vending-marquee > span:last-child { margin-left: auto; font-size: 9px; letter-spacing: 1px; }
.vending-dot { width: 7px; height: 7px; background: #148a64; border-radius: 50%; box-shadow: 0 0 8px #18c48c; }
.vending-console { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 18px; }
.vending-screen { min-width: 0; background: linear-gradient(145deg, #132c36, #091721); color: #e8fff7; border: 7px solid #223a3d; border-radius: 14px; padding: 18px; box-shadow: inset 0 0 30px #0006, 0 2px 0 #fff7; }
.vending-screen-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; font-size: 14px; }
#shop-wallet { white-space: nowrap; color: #f4da8a; font-size: 12px; }
.vending-tabs { display: flex; gap: 6px; margin-top: 20px; }
.vending-tabs button { flex: 1; padding: 10px 6px; margin: 0; background: #ffffff08; color: #a8c1c5; border: 1px solid #56717b; border-radius: 7px; font-size: 12px; }
.vending-tabs button[aria-pressed="true"] { color: #c1ffe6; border-color: #72e6bb; background: #2b796040; }
.vending-rotation { color: #91acae; font-size: 11px; font-variant-numeric: tabular-nums; margin: 14px 0; }
.vending-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vending-product { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 12px 8px; margin: 0; min-width: 0; color: #e3ede9; background: #ffffff06; border: 1px solid #8ba7a333; border-radius: 8px; font-size: 11px; }
.vending-product:hover { background: #76e6bc12; }
.vending-product[aria-pressed="true"] { border-color: #84f1cd; background: #73edbf14; box-shadow: 0 0 12px #64edbc18; }
.vending-product img { width: 100%; height: 135px; object-fit: contain; filter: drop-shadow(0 6px 5px #0005); }
.vending-product strong { font-size: 12px; }
.vending-product .vending-price { color: #eed28c; font-size: 12px; }
.vending-code { align-self: flex-start; font-size: 9px; color: #8da6a9; }
.vending-screen-note { font-size: 9px; color: #769699; margin: 18px 0 0; }
.vending-controls { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; min-width: 0; }
.vending-reader { background: #162d2b; color: #8dedc5; border: 2px solid #69dfb1; border-radius: 10px; width: 66px; padding: 12px 0; font-size: 11px; line-height: 1.8; box-shadow: 0 0 8px #43d6ac55; }
#shop-selected-image { width: 100%; height: 150px; object-fit: contain; margin-top: 20px; filter: drop-shadow(0 7px 5px #0003); }
#shop-selected-name { font-size: 16px; line-height: 1.4; margin: 16px 0 6px; }
.vending-controls .note { font-size: 11px; color: #435951; margin: 4px 0 12px; }
#shop-buy { width: 100%; padding: 13px 8px; margin: 8px 0; background: #174b3b; border: 1px solid #0e3b2d; border-radius: 9px; color: #d3ffe9; font-size: 14px; }
#shop-buy:hover { background: #216147; }
#shop-buy:disabled { opacity: .5; cursor: default; }
.vending-hatch { margin: 24px auto 12px; padding: 16px; max-width: 570px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; color: #c5f4df; border: 3px solid #5ce9af; border-radius: 10px; background: linear-gradient(#071812, #142b22); box-shadow: inset 0 6px 12px #000b, 0 0 6px #2dd99b66; }
.vending-hatch > span:last-child { font-size: 10px; color: #83a994; }
#shop-status { color: #204b38; font-size: 12px; }
.vending-footnote { font-size: 10px; color: #657268; margin: 14px 0 0; }
.vending-plinth { height: 22px; margin: 0 26px; background: linear-gradient(#263b36, #101b18); border-radius: 0 0 7px 7px; box-shadow: 0 14px 20px #0005; }
@media(max-width: 650px) {
 .vending-machine { padding-top: 78px; }
 .vending-sign { width: 132px; border-width: 7px; }
 .vending-sign span { width: 50px; border-width: 7px; }
 .vending-body { padding: 60px 12px 18px; border-radius: 32px 32px 22px 22px; }
 .vending-console { grid-template-columns: minmax(0, 1fr); gap: 12px; }
 .vending-screen { padding: 12px; border-width: 5px; }
 .vending-screen-header { font-size: 12px; flex-wrap: wrap; }
 .vending-product img { height: 130px; }
 .vending-controls { display: grid; grid-template-columns: 85px minmax(0, 1fr); column-gap: 12px; }
 .vending-reader { display: none; }
 #shop-selected-image { grid-column: 1; grid-row: 1 / 5; width: 85px; height: 150px; margin: 0; }
 #shop-selected-name, #shop-selected-details, #shop-buy, #shop-buy-help { grid-column: 2; margin: 4px 0; }
 .vending-marquee { font-size: 10px; letter-spacing: 1px; }
 .vending-hatch { margin-top: 12px; }
}
@media(prefers-reduced-motion: no-preference) {
 .vending-product { transition: border-color 160ms, background 160ms; }
 .vending-body[data-dispensing="true"] .vending-hatch { animation: vending-delivery 650ms ease-out; }
 @keyframes vending-delivery { 50% { box-shadow: inset 0 6px 12px #000b, 0 0 24px #28f1aa; border-color: #c1ffe7; } }
}


.vending-footnote a { color: #245f49; }

.vending-stock { font-size: 12px; color: #235741; font-weight: 700; }

.vending-product-visual { position: relative; display: block; width: 100%; }
.vending-product-visual img { display: block; }
.vending-sold-out { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); background: #080b0ef2; color: #fff; padding: 5px 3px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-align: center; pointer-events: none; }

.vending-hatch { flex-wrap: wrap; }
.vending-pickup-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.vending-pickup-items:empty { display: none; }
.vending-hatch .vending-pickup { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 0; padding: 8px 12px; border: 1px solid #80e7bf55; border-radius: 7px; color: #c6f9e1; background: #ffffff08; font-size: 11px; }
.vending-pickup img { width: 85px; height: 95px; object-fit: contain; }
.vending-hatch .vending-pickup:hover { background: #64edbf22; }

.vending-hatch { position: relative; }
.vending-hatch #shop-pickup-all { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); margin: 0; padding: 10px 12px; border: 1px solid #72efb5; border-radius: 8px; background: #258452; color: #fff; font-size: 12px; font-weight: 700; }
.vending-hatch #shop-pickup-all:hover { background: #319b65; }
.vending-pickup-items { padding: 0 110px; box-sizing: border-box; }
@media(max-width:600px) {
 .vending-hatch #shop-pickup-all { position: static; transform: none; margin-left: auto; }
 .vending-pickup-items { padding: 0; }
}