/* Inventory panels use the same stone, bronze and gold palette as the game shell. */
.shop-browser {
    box-sizing: border-box;
    color: #e3dcc8;
    font-family: Verdana, Arial, sans-serif;
    padding: 18px;
    background: repeating-linear-gradient(135deg, #ffffff02 0, #ffffff02 1px, transparent 1px, transparent 5px), #20292a;
    border: 3px ridge #7c7762;
    box-shadow: inset 0 0 22px #080d0d, 0 2px 7px #0008;
    text-shadow: 0 1px 1px #000;
}
.shop-browser * { box-sizing: border-box; }
.shop-browser .shop-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 8px 0 20px; border-bottom: 1px solid #746044; }
.shop-browser .shop-eyebrow { color: #c1aa74; font-size: 11px; letter-spacing: 4px; }
.shop-browser h1 { font: bold 32px/1.15 Georgia, serif; margin: 5px 0 7px; color: #edce85; text-shadow: 0 2px 2px #000; }
.shop-browser .shop-header-caption { margin: 0; color: #b9b5a5; font-size: 11px; }
.shop-browser .shop-account { flex-shrink: 0; text-align: right; }
.shop-browser .shop-account strong { display: block; color: #f1cc68; font-size: 20px; }
.shop-browser .shop-account small { color: #c5c0ac; }
.shop-browser .shop-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 18px 0 10px; }
.shop-browser [role="tab"] { font: bold 11px/1.4 Verdana, sans-serif; color: #cfc5ad; background: linear-gradient(#3e4641, #252d2c); border: 2px ridge #746d55; padding: 10px 4px; border-radius: 2px; box-shadow: inset 0 1px #ffffff12, 0 2px 2px #0008; cursor: pointer; }
.shop-browser [role="tab"][aria-selected="true"] { color: #ffe29a; border-color: #c8a45c; background: linear-gradient(#655638, #403520); box-shadow: inset 0 0 9px #c89f3826, 0 2px 2px #0008; }
.shop-browser [role="tab"]:hover { color: #ffe29a; border-color: #b19c6c; }
.shop-browser [role="tab"]:focus-visible, .shop-browser [role="tabpanel"]:focus-visible, .shop-browser summary:focus-visible { outline: 2px solid #ffe19b; outline-offset: 3px; }
.shop-browser [hidden] { display: none; }
.shop-browser .shop-category-header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 16px 0 14px; }
.shop-browser h2 { font: bold 20px/1.4 Georgia, serif; margin: 0; color: #e2c582; }
.shop-browser .shop-category-header span { color: #b9b5a5; font-size: 10px; }
.shop-browser .shop-inventory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.shop-browser .shop-item { border: 2px ridge #6a6550; background: linear-gradient(135deg, #313a36, #222a29 70%); box-shadow: inset 0 0 16px #0005, 0 3px 4px #0005; }
.shop-browser .shop-item:hover { border-color: #a68d53; }
.shop-browser .shop-item[open] { border-color: #c2a25c; }
.shop-browser .shop-item summary { list-style: none; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 13px 13px; cursor: pointer; }
.shop-browser .shop-item summary::-webkit-details-marker { display: none; }
.shop-browser .shop-item-icons { display: flex; align-items: center; justify-content: center; gap: 4px; height: 100px; width: 100%; max-width: 156px; align-self: center; background: radial-gradient(ellipse at center, #3d473b, #111918 75%); border: 3px ridge #77745b; box-shadow: inset 0 3px 12px #000, 0 1px #ffffff12; }
.shop-browser .shop-item-icons img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 2px #0009); }
.shop-browser .shop-item-name { display: flex; align-items: center; justify-content: center; min-height: 42px; text-align: center; color: #e6d7ab; font-size: 13px; line-height: 1.5; margin-bottom: 7px; overflow-wrap: anywhere; }
.shop-browser .shop-item-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; color: #bebdaf; font-size: 11px; line-height: 18px; text-align: center; }
.shop-browser .shop-price { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 5px; text-align: center; }
.shop-browser .shop-price strong { color: #f2cc61; font-size: 20px; font-variant-numeric: tabular-nums; }
.shop-browser .shop-price small { color: #c7b17b; font-size: 11px; }
.shop-browser .shop-details-label { display: block; width: 100%; margin-top: 7px; border: 2px ridge #c7ac63; border-radius: 2px; padding: 8px 10px; color: #ffe6a7; background: linear-gradient(#685636, #3c301c); font: bold 11px/1.3 Verdana, sans-serif; text-transform: uppercase; letter-spacing: 1px; box-shadow: inset 0 1px #ffffff18, 0 2px 3px #0006; }
.shop-browser summary:hover .shop-details-label { background: linear-gradient(#816940, #514023); }
.shop-browser .shop-details-label::after { content: ' +'; }
.shop-browser details[open] .shop-details-label::after { content: ' −'; }
.shop-browser .shop-item-detail { margin: 0 10px 12px; padding: 12px; color: #d9d6c4; background: #111b18; border: 1px solid #857248; box-shadow: inset 0 0 9px #0008; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.shop-browser .shop-item-detail h3 { font: bold 14px/1.5 Georgia, serif; color: #ebce88; margin: 0 0 9px; padding-bottom: 6px; border-bottom: 1px solid #4f4e37; }
.shop-browser .shop-item-detail p { margin: 0 0 12px; white-space: pre-line; }
.shop-browser .shop-item-detail p:last-child { margin-bottom: 0; color: #c5ba9d; }
.shop-browser .shop-item-detail form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; }
.shop-browser .shop-item-detail select { width: 100%; height: auto; min-height: 36px; }
.shop-browser .shop-footer { border-top: 1px solid #625940; margin-top: 20px; padding-top: 14px; color: #b9b5a5; text-align: center; font-size: 11px; line-height: 1.6; }
.shop-browser .shop-footer a { color: #e8c77e; }
@media (max-width: 600px) {
    .shop-browser { max-width: calc(100vw - 60px); padding: 12px; }
    .shop-browser h1 { font-size: 25px; }
    .shop-browser .shop-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-browser .shop-inventory { grid-template-columns: minmax(0, 1fr); }
    .shop-browser .shop-category-header { flex-wrap: wrap; gap: 4px; }
    .shop-browser .shop-item-name { min-height: 0; }
}