/* Shared functional purchase dialog. Existing desktop shop layout is unchanged. */
.shop-title-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.shop-title-toolbar h2 { min-width: 0; }
.shop-filter-control { display: flex; align-items: center; flex-shrink: 0; border: 1px solid #405572; border-radius: .5rem; padding-left: .5rem; color: #b9d8f6; background: #142238; }
.shop-filter-control svg { width: 1rem; height: 1rem; pointer-events: none; }
.shop-filter-control select { min-height: 44px; border: 0; background: transparent; color: inherit; font: 700 .75rem var(--font-pixel-ui); padding: .375rem; cursor: pointer; max-width: 10rem; }
.shop-filter-control option { color: #e2e8f0; background: #142238; }
.shop-filter-control:focus-within, .shop-filter-control:hover { border-color: #38bdf8; box-shadow: 0 0 .625rem #38bdf822; }
.shop-item-row[data-shop-item-id] { cursor: pointer; }
.shop-item-row[data-shop-item-id]:focus-visible { outline: 2px solid #fbbf24; outline-offset: -2px; }
#shopPurchaseModal .shop-purchase-card { width: min(22rem,calc(100vw - 2rem)); max-width: 22rem; max-height: calc(100dvh - 1.5rem); overflow-y: auto; border-color: #c89932; border-radius: .875rem; background: radial-gradient(ellipse at top,#39301855,transparent 65%),#101a2c; box-shadow: 0 0 2rem #d99a2422,0 1rem 4rem #0009; }
#shopPurchaseModal [hidden] { display: none !important; }
.shop-purchase-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .625rem .875rem; border-bottom: 1px solid #614e2c; }
.shop-purchase-header h2 { font: 800 .85rem var(--font-pixel-ui); color: #ffe29a; }
.shop-purchase-header .btn-close-modal { width: 36px; min-height: 36px; height: 36px; }
.shop-purchase-body { padding: .875rem; }
.shop-purchase-product { display: flex; align-items: center; gap: .75rem; }
#shopPurchaseIcon { display: grid; place-items: center; flex: 0 0 2.75rem; height: 2.75rem; border: 1px solid #4c5268; border-radius: .625rem; background: #1c293b; font-size: 1.65rem; }
#shopPurchaseIcon svg { width: 2rem; height: 2rem; }
.shop-purchase-product h3 { font: 800 1rem var(--font-pixel-ui); color: #f8fafc; overflow-wrap: anywhere; }
.shop-purchase-product p { margin-top: .2rem; font-size: .63rem; color: #e3b85c; }
.shop-purchase-description { margin: .75rem 0; font-size: .74rem; line-height: 1.45; color: #aabbcf; }
.shop-purchase-label { display: block; margin: .875rem 0 .5rem; font-size: .63rem; font-weight: 800; color: #cbd5e1; letter-spacing: .05em; }
.shop-purchase-counter { display: grid; grid-template-columns: 2.75rem minmax(3rem,1fr) 2.75rem 3.5rem; gap: .375rem; }
.shop-purchase-counter :is(button,input) { height: 44px; min-width: 0; padding: .25rem; border: 1px solid #425975; border-radius: .5rem; background: #17283d; color: #e1f2ff; text-align: center; }
.shop-purchase-counter button { cursor: pointer; font-size: 1.25rem; font-weight: 800; }
.shop-purchase-counter input { width: 100%; font-size: 16px; font-weight: 800; }
.shop-purchase-counter #shopPurchaseMax { font-size: .65rem; color: #fbd276; }
.shop-purchase-counter button:disabled { opacity: .35; cursor: default; }
.shop-purchase-limit { margin: .5rem 0 .75rem; color: #8fa5be; font-size: .59rem; }
.shop-purchase-total { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 0; border-top: 1px solid #33445f; color: #aabed5; font-size: .7rem; }
.shop-purchase-total strong { font: 800 1rem var(--font-pixel-ui); color: #ffda79; }
.shop-purchase-message { min-height: .875rem; margin: .125rem 0 .5rem; color: #fda4af; font-size: .65rem; line-height: 1.4; }
.shop-purchase-actions { display: flex; gap: .5rem; }
.shop-purchase-actions button { min-height: 44px; padding: .625rem; border-radius: .5rem; font: 800 .8rem var(--font-pixel-ui); cursor: pointer; }
.shop-purchase-primary { flex: 1; color: #fff4ca; border: 1px solid #fbbf24; background: linear-gradient(135deg,#bd7c12,#805112); box-shadow: inset 0 1px #fff3; }
.shop-purchase-primary:disabled { opacity: .35; cursor: not-allowed; }
.shop-purchase-secondary { color: #cbd5e1; border: 1px solid #425975; background: #1b2a3f; }
.shop-purchase-confirm-prompt { margin: 1rem 0 .625rem; color: #cbd5e1; font-size: .73rem; }
.shop-purchase-summary { display: grid; gap: .625rem; margin-bottom: .875rem; }
.shop-purchase-summary > div { display: flex; justify-content: space-between; gap: .5rem; font-size: .65rem; }
.shop-purchase-summary dt { color: #91a7bf; }
.shop-purchase-summary dd { color: #e1eefc; font-weight: 800; text-align: right; }
@media (prefers-reduced-motion: no-preference) { #shopConfirmStep:not([hidden]),#shopQuantityStep:not([hidden]) { animation: shopStepIn .15s ease-out; } }
@keyframes shopStepIn { from { opacity: 0; transform: translateY(.25rem); } to { opacity: 1; transform: translateY(0); } }

/* Draw focus on the themed wrapper, never as a native white rectangle inside it. */
.shop-filter-control select:focus,.shop-filter-control select:focus-visible { outline:none; box-shadow:none; }

html:not(.battlemon-mobile) #shopScreen .shop-title-toolbar .clean-section-title { font-size:1.85rem; }