/* The same heraldry and material frames in Market, village labels and visit cards. */
.cosmetic-emblem { display: inline-block; width: 42px; height: 42px; flex: 0 0 auto; vertical-align: middle; filter: drop-shadow(0 2px 2px #33251040); }
.cosmetic-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 7px; border: 1px solid #c4a97f; background: linear-gradient(#fff8e5, #e4d4b5); color: #695131; font-weight: 700; font-size: .8rem; }
.cosmetic-tag svg { width: 21px; height: 21px; flex: 0 0 auto; }
.cosmetic-tag[data-tag="tag_bahcivan"] { color: #466444; background: linear-gradient(#edf3df, #cfddbd); }
.cosmetic-tag[data-tag="tag_seyyah"] { color: #375c72; background: linear-gradient(#e8f3f1, #c6d9dd); }
.cosmetic-tag[data-tag="tag_destekci"] { color: #6a4a14; background: linear-gradient(#fff1c8, #e8c477); }
.cosmetic-tag[data-tag="tag_lig_bakir"] { color: #5a3416; background: linear-gradient(#f3dcc3, #d09a6a); }
.cosmetic-tag[data-tag="tag_lig_gumus"] { color: #33404a; background: linear-gradient(#eef1f3, #c2cad0); }
.cosmetic-tag[data-tag="tag_lig_altin"] { color: #5e4108; background: linear-gradient(#fff1c8, #e3b94f); }
.cosmetic-tag[data-tag="tag_lig_elmas"] { color: #164a5c; background: linear-gradient(#e6f7fb, #a9d7e4); }
.cosmetic-frame[data-frame] { --frame-art: linear-gradient(135deg, #67462e, #dea276 25%, #8a5031 40%, #efbb87 65%, #71402c); border: 4px solid transparent; border-radius: 12px; background: linear-gradient(var(--surface, #fcf4df), var(--surface, #fcf4df)) padding-box, var(--frame-art) border-box; box-shadow: inset 0 0 0 1px #e1cba2, 0 2px 5px #34200f25; }
.cosmetic-frame[data-frame="frame_altin"] { --frame-art: repeating-linear-gradient(45deg, #bd8838 0 3px, #f4d988 3px 6px, #d5a343 6px 12px); }
.cosmetic-frame[data-frame="frame_mermer"] { --frame-art: repeating-linear-gradient(135deg, #ede8dc 0 9px, #b7ac99 10px, #faf7ee 12px 18px); }
.cosmetic-frame[data-frame="frame_gece"] { --frame-art: radial-gradient(circle, #edcf82 0 1px, transparent 2px) 0 0 / 13px 13px, linear-gradient(130deg, #252c51, #626c94, #29365d); }
.cosmetic-frame[data-frame="frame_steam"] { --frame-art: radial-gradient(ellipse at 50% 50%, #ffffffc4 0 2px, #ffffff00 5px) 0 0 / 24px 17px, radial-gradient(ellipse at 50% 50%, #ffffff80 0 1.5px, #ffffff00 4px) 12px 8px / 24px 17px, linear-gradient(135deg, #0d1630, #16213e 35%, #4fa3ff 52%, #16213e 68%, #0d1630); box-shadow: inset 0 0 0 1px #4fa3ff, 0 0 7px #4fa3ffa0, 0 2px 5px #34200f25; } /* navy + blue glow + white steam puffs (frame_gece is violet with gold stars) */
.cosmetic-frame[data-frame="frame_sahil"] { --frame-art: repeating-radial-gradient(ellipse at 0 0, #5a99a6 0 3px, #bbdfd6 4px 6px, #477d8a 7px 10px); }
.cosmetic-frame[data-frame="frame_bogaz_seti"] { --frame-art: linear-gradient(135deg, #f8f5ec, #3f7fae 28%, #f8f5ec 50%, #2d6c9c 74%, #f8f5ec); box-shadow: inset 0 0 0 2px #f8f5ec, inset 0 0 0 3px #5b97c1, 0 2px 5px #34200f25; } /* pearl-white / Bosphorus-blue double border */
.visit-heading.cosmetic-frame { padding: 8px 10px; }
.visit-emblem:has(.cosmetic-emblem) { display: inline-flex; }
.visit-cosmetic-tag:has(.cosmetic-tag) { padding: 0; border: 0; background: none; }
.map-cosmetics .cosmetic-emblem { width: 20px; height: 20px; }
/* Emblem/tag sit beside the title like a crest instead of on a line of their own. */
.map-subline { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.map-subline > .ledger-village-title { margin-top: 0; }
.map-subline > .map-cosmetics { display: inline-flex; align-items: center; gap: 4px; }
.map-cosmetics.cosmetic-frame { border-width: 3px; }
.shop-card-art:has(.cosmetic-emblem) .cosmetic-emblem { width: 52px; height: 52px; } /* fits the 58px .shop-card-art box */
/* The 58px card art shows only the tag's icon; its name is the card title (as a chip it broke letter by letter). */
.shop-card-art .cosmetic-tag { gap: 0; padding: 10px; font-size: 0; }
.shop-card-art .cosmetic-tag svg { width: 28px; height: 28px; }
.shop-frame-swatch { display: grid; place-items: center; box-sizing: border-box; padding: 2px; width: 100%; height: 100%; min-height: 50px; }
.shop-card-art .shop-frame-swatch .cosmetic-emblem { width: 32px; height: 32px; }
.shop-card-art:has(.shop-model-image) { padding: 0; background: #ddd5bf; }
.shop-model-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-postcard:has(.shop-model-image) { height: 220px; }
.shop-postcard-id { display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 16px); }
.shop-postcard-id .cosmetic-emblem { width: 34px; height: 34px; }
@media (max-width: 420px) { .shop-postcard:has(.shop-model-image) { height: 170px; } }

.shop-postcard:has(.shop-model-image)::after { content: none; }
.village-identity { display: block; padding: 5px 8px; }
.map-cosmetics .cosmetic-tag { font-size: 12px; padding: 1px 4px; }
.map-cosmetics .cosmetic-tag svg { width: 14px; height: 14px; }