.shops-view { position: relative; margin-left: clamp(250px, 21vw, 315px); min-width: 0; container-type: inline-size; color: #dcded4; font: 14px/1.4 Arial, sans-serif; }
.shops-view[hidden] { display: none; }
.shop-page-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #686244; }
.shop-page-heading h1 { margin: 0; font: bold 24px/1.2 Arial, sans-serif; color: #e4d0a0; }
.shop-link { color: #a7d2c5; display: inline-block; margin: 8px 0; }
.shop-directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.shop-directory-card { display: block; border: 1px solid #67664b; border-top: 5px solid #7d7250; background: #252e26; color: #ddd6bb; padding: 16px; text-decoration: none; }
.shop-directory-card h2 { margin: 0; font: bold 18px/1.3 Arial, sans-serif; }
.shop-directory-card p { color: #b4bcae; }
.shop-directory-card span { color: #d0bd89; font-size: 12px; }
.shop-directory-card:hover { background: #354032; border-color: #bc9f5c; }
.shop-panel { border: 1px solid #515446; background: #2b302b; }
.shop-panel-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 7px 10px; border-top: 3px solid #62644b; border-bottom: 1px solid #131b17; background: #3c4237; }
.shop-panel-heading h2 { margin: 0; color: #ecdfbd; font: bold 14px/1.4 Arial, sans-serif; }
.shop-test-prices { color: #bec8ac; font-size: 12px; }
.shop-item-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shop-item { display: grid; grid-template-columns: 65px minmax(0, 1fr); align-content: start; gap: 10px; padding: 12px; border-right: 1px solid #424a3f; border-bottom: 1px solid #424a3f; }
.shop-item-mark { display: grid; place-items: center; height: 60px; border: 1px solid #647052; border-top: 5px solid #788063; background: #17221b; color: #b9c3a6; font-size: 12px; font-weight: bold; letter-spacing: .03em; }
.shop-type-medical .shop-item-mark { border-top-color: #71a8a1; color: #8fc0b4; }
.shop-type-weapon .shop-item-mark { border-top-color: #a88251; color: #d0ad76; }
.shop-item-info h3 { font: bold 14px/1.3 Arial, sans-serif; color: #e4dfce; margin: 0 0 4px; overflow-wrap: anywhere; }
.shop-price { font-size: 14px; font-weight: normal; color: #ddc888; display: block; }
.shop-item-type { font-size: 12px; color: #aeb8a8; display: block; }
.shop-buy-form { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 7px; }
.shop-quantity-label { font-size: 12px; color: #b3bba7; display: flex; align-items: center; gap: 6px; }
.shop-quantity { width: 55px; padding: 5px; border: 1px solid #64684f; background: #141e17; color: #e8e4d1; font: 14px Arial, sans-serif; }
.shop-total { color: #c8bf9c; font-size: 12px; }
.shop-buy, .shop-retry { border: 1px solid #88744b; border-top: 3px solid #b19c62; background: #49432c; color: #efddb2; padding: 5px 9px; font: 14px Arial, sans-serif; cursor: pointer; }
.shop-buy { margin-left: auto; }
.shop-buy:disabled { opacity: .5; cursor: not-allowed; }
.shop-status { color: #ddca96; margin: 10px 0; overflow-wrap: anywhere; }
.shop-status:empty { display: none; }
.shop-note { color: #aeb6a6; font-size: 12px; }
.shops-view a:focus-visible, .shops-view button:focus-visible, .shops-view input:focus-visible { outline: 2px solid #dfbd72; outline-offset: 2px; }
@media (max-width: 1050px) { .shops-view { margin: 0; grid-column: 2; } html[data-page=shops] .game-stage { padding-top: 24px; align-content: start; } }
@media (max-width: 720px) { .shops-view { grid-column: 1; } }
@container (max-width: 800px) { .shop-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop-directory { grid-template-columns: 1fr; } }
@container (max-width: 480px) { .shop-item-grid { grid-template-columns: 1fr; } }