/* Köy identity shop: a compact decorative postcard above a practical catalog. */
#panel.shop-wide { width: min(780px, calc(100vw - 24px)); }
.cosmetic-shop { color: var(--ink); overflow-wrap: anywhere; }
.shop-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.shop-header > div:first-child { min-width: 0; }
.shop-header small, .shop-preview-caption small { color: var(--muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: .09em; }
#panel .shop-header h3 { margin: 2px 0 var(--space-1); }
.shop-header p, .shop-earn { font-size: var(--text-sm); line-height: 1.5; margin: var(--space-1) 0 var(--space-3); }
.shop-wallet { flex: 0 0 auto; min-width: 112px; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); text-align: center; }
.shop-wallet span { display: block; font-size: 22px; }
.shop-wallet b { display: block; font-size: var(--text-xl); }
.shop-wallet small { display: block; letter-spacing: 0; }
.shop-earn { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--even); border-radius: var(--radius-sm); background: var(--surface-inset); }
.shop-lock { padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--warning-surface); font-size: var(--text-sm); }
/* Eight records tabs fit as two even rows on a phone, then one row in a wide window. */
.ui-tabs[data-count="8"] { --tab-cols: 4; }
#panel .ui-tabs[data-count="8"] .ui-tab-label { overflow-wrap: anywhere; }
@container panel-body (max-width: 299px) { .ui-tabs[data-count="8"] { --tab-cols: 2; } }
@container panel-body (min-width: 680px) { .ui-tabs[data-count="8"] { --tab-cols: 8; } }
.shop-preview { --shop-sky: #a9d0dc; --shop-roof: #a57455; --shop-wall: #f3e5be; --shop-ground: #7d9b66; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-raised); }
.shop-color-bogaz { --shop-sky: #8dc8dd; --shop-roof: #4384a0; --shop-wall: #f7eed8; --shop-ground: #80a898; }
.shop-color-adalar { --shop-sky: #c8d8e6; --shop-roof: #d7899a; --shop-wall: #f6e9cf; --shop-ground: #8bac79; }
.shop-color-orman { --shop-sky: #a6c5b4; --shop-roof: #476c55; --shop-wall: #d9c69f; --shop-ground: #698959; }
.shop-color-tarihi { --shop-sky: #d9c6aa; --shop-roof: #ad694b; --shop-wall: #e9d3a6; --shop-ground: #a29d75; }
.shop-color-carsi { --shop-sky: #e0cba4; --shop-roof: #b06a4a; --shop-wall: #efe0bb; --shop-ground: #b39a72; }
.shop-color-saray { --shop-sky: #ead9a8; --shop-roof: #b98a2f; --shop-wall: #f4ead0; --shop-ground: #a8a07a; }
.shop-postcard { position: relative; height: 106px; overflow: hidden; background: linear-gradient(var(--shop-sky), #e4e5c8); }
.shop-postcard:is(.shop-frame-bakir, .shop-frame-mermer, .shop-frame-gece, .shop-frame-sahil, .shop-frame-altin) { border: 5px solid var(--shop-frame); }
.shop-frame-bakir { --shop-frame: #ae7044; }
.shop-frame-mermer { --shop-frame: #e5ded2; }
.shop-frame-gece { --shop-frame: #404d70; }
.shop-frame-sahil { --shop-frame: #75aabb; }
.shop-frame-altin { --shop-frame: #d4af37; }
.shop-sun { position: absolute; top: 14px; right: 15%; width: 36px; height: 36px; border-radius: 50%; background: #fff5c6; opacity: .8; }
.shop-ground { position: absolute; inset: 79px 0 0; background: var(--shop-ground); }
.shop-house { position: absolute; z-index: 1; bottom: 15px; width: 68px; height: 45px; background: var(--shop-wall); border: 2px solid #53453850; border-radius: 2px; box-shadow: 0 4px 0 #44351d2b; }
.shop-house::before { content: ''; position: absolute; left: -8px; right: -8px; top: -23px; height: 22px; background: var(--shop-roof); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.shop-house::after { content: ''; position: absolute; bottom: 0; left: 25px; width: 16px; height: 25px; background: #6c593c; border-radius: 7px 7px 0 0; }
.shop-house-left { left: 20%; transform: scale(.86); transform-origin: bottom center; }
.shop-house-right { right: 21%; }
.shop-postcard-id { position: absolute; z-index: 3; left: var(--space-2); bottom: var(--space-2); max-width: calc(100% - 16px); padding: 2px 8px; border-radius: var(--radius-pill); background: #f8f0dccf; color: #48371f; font-size: var(--text-xs); font-weight: 700; box-shadow: 0 1px 4px #38281140; }
.shop-preview-caption { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.shop-preview-icon { font-size: 27px; }
.shop-preview-caption b { display: block; }
.shop-preview-caption p { margin: 0; color: var(--muted); font-size: var(--text-xs); }
.shop-section { margin: var(--space-4) 0; }
.shop-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--border-soft); }
#panel .shop-section-head h4 { margin: 0; }
.shop-section-head small, .shop-section-head > span { color: var(--muted); font-size: var(--text-xs); }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.shop-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-raised); min-width: 0; }
.shop-card.is-preview { border-color: var(--even); box-shadow: inset 0 0 0 1px var(--even); }
.shop-card-art { display: grid; place-items: center; width: 58px; min-height: 58px; border-radius: var(--radius-sm); background: linear-gradient(150deg, var(--shop-sky, #ddc6aa), var(--shop-ground, #af9975)); font-size: 25px; }
.shop-card-body { min-width: 0; }
#panel .shop-card h5 { margin: 0; }
.shop-card p { margin: 2px 0; color: var(--muted); font-size: var(--text-xs); }
.shop-price { display: block; font-size: var(--text-xs); font-weight: 700; }
.shop-card-actions { grid-column: 1 / -1; display: flex; gap: var(--space-2); }
#panel .shop-card-actions button { flex: 1 1 0; min-width: 0; padding-inline: var(--space-1); }
.shop-error { margin: var(--space-2) 0; color: var(--bad); }
.shop-support { margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); }
#panel .shop-support h4 { margin: 0; }
.shop-support p { margin: var(--space-1) 0 var(--space-2); color: var(--muted); font-size: var(--text-sm); }
.shop-supporter-active { color: var(--good); font-weight: 700; }
.shop-support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.shop-support-pul, .shop-support-premium { min-width: 0; }
.shop-support-pul b, .shop-support-premium b { display: block; margin-bottom: var(--space-2); }
.shop-support-presets { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.shop-support-presets button { flex: 1 1 auto; min-width: 0; }
.shop-support-custom { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.shop-support-custom input { flex: 1 1 0; min-width: 0; }
.shop-support-premium p { margin: 0 0 var(--space-2); }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1100px) {
  #panel.shop-wide { width: auto; }
}
@media (max-width: 520px) {
  .shop-header { align-items: stretch; }
  .shop-wallet { min-width: 86px; }
  .shop-grid { grid-template-columns: 1fr; }
  .shop-postcard { height: 86px; }
  .shop-support-grid { grid-template-columns: 1fr; }
}