/* =====================================================================
   Стили страницы магазина (pages/shops/shop_items.php)
   Используется вместе с глобальным /css/style_main.css, который уже
   определяет .razdel_menu, .podrazdel__list, .podrazdel__item*,
   .see_also, .spoiler_style и т.п.
   ===================================================================== */

/* Иконка «домик» в хлебных крошках */
.bk-shop-home-ico {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23007fff' d='M8 1l-7 6h2v7h3v-4h4v4h3V7h2z'/></svg>") center no-repeat;
}

/* Плашка-«спойлер» с описанием магазина */
.spoiler_bg {
    background: #e6f5d6;
    border: 1px solid #91c474;
    border-radius: 3px;
    padding: 4px 10px;
    margin: 8px 0;
}
.spoiler_bg .spoiler_style {
    cursor: pointer;
    color: #2c5800;
    font: 12px Verdana, Arial, sans-serif;
    font-weight: bold;
    text-align: center;
    user-select: none;
}
.spoiler_bg .spoiler_style:hover { color: #4a7d10; }

/* Серая плашка-заголовок раздела */
.bk-shop-section-bar {
    background: #708090;
    color: #ffffff;
    text-align: center;
    padding: 4px 6px;
    font: bold 12px Verdana, Arial, sans-serif;
}

/* Карточки предметов, как в эталоне */
.bk-shop-grid {
    width: 100%;
    border-collapse: collapse;
    background: #a5a5a5; /* «решётка» между ячейками */
}
.bk-shop-grid td.bk_img_new {
    width: 78px;
    text-align: center;
    vertical-align: middle;
    padding: 6px 4px;
}
.bk-shop-grid td.bk_img_new img {
    border: 0;
    display: inline-block;
    margin: 0 auto;
}
.bk-shop-grid td.bk_descr_new {
    vertical-align: top;
    padding: 6px 8px;
    font: 11px Verdana, Arial, sans-serif;
    line-height: 1.35;
    color: #2d2014;
}
.bk-shop-grid td.bk_descr_new a { color: #0056A3; text-decoration: none; }
.bk-shop-grid td.bk_descr_new a:hover { text-decoration: underline; }

/* Чередование строк */
.bk-shop-grid tr.row-odd  { background: #f3e9ce; }
.bk-shop-grid tr.row-even { background: #fbeabb; }

/* Название предмета */
.bk-shop-grid .thing_txt { font-weight: bold; text-decoration: underline; }
.bk-shop-grid b.thing-line { font-size: 12px; }

/* Уровень после имени, как в bk-стиле */
.bk-shop-grid .level {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    background: #6a6a6a;
    border-radius: 3px;
    vertical-align: middle;
}

/* Цвет рамки редкости (R/VR/ER) */
.bk-shop-grid small.R   { background: #95486D; color: #fff; padding: 0 4px; border-radius: 2px; font-weight: bold; }
.bk-shop-grid small.VR  { background: #B5AE0B; color: #fff; padding: 0 4px; border-radius: 2px; font-weight: bold; }
.bk-shop-grid small.ER  { background: #E0AF29; color: #fff; padding: 0 4px; border-radius: 2px; font-weight: bold; }

/* Метка «для воина / для мага / для лучника» */
.bk-shop-grid i.role3 { color: #803f00; font-style: italic; }
.bk-shop-grid i.role1 { color: #0a3a8c; font-style: italic; }
.bk-shop-grid i.role2 { color: #2c5800; font-style: italic; }

/* Кнопка «купить» — на сайте справочной библиотеки её нет, но если
   нужно отобразить, оставляем стиль на потом, скрытым. */
.bk-shop-grid .buy-row { display: none; }

/* Пустой прилавок */
.bk-shop-grid .empty-row td {
    background: #e2e0e0;
    text-align: center;
    padding: 10px;
    color: #555;
    font-style: italic;
}

/* Сообщение «выберите раздел» */
.bk-shop-empty {
    background: #e2e0e0;
    border: 1px dashed #aaa;
    border-radius: 3px;
    padding: 14px;
    margin: 10px 0;
    text-align: center;
    color: #555;
    font-style: italic;
}

.bk-shop-directory {
    border-collapse: separate;
    border-spacing: 0;
    margin: 10px auto 22px;
    table-layout: fixed;
    width: 100% !important;
    max-width: none !important;
}

.bk-shop-directory + .bk-shop-list-section,
.bk-shop-directory + .bk-shop-list-section + .bk-shop-list-grid,
.bk-shop-list-section,
.bk-shop-list-grid {
    display: none;
}

.bk-shop-directory td {
    padding: 5px;
}

.bk-shop-directory-group {
    background-color: #474a51;
    color: #ffffff;
    font: bold 14px Verdana, Arial, sans-serif !important;
    letter-spacing: 0;
    padding: 8px 10px !important;
    text-align: center;
    vertical-align: middle;
}

/* Плашка с именем магазина над картинкой больше не нужна —
   имя дублируется ниже под картинкой в .house_short_location. */
.bk-shop-directory td.text_0 {
    display: none !important;
}

.bk-shop-directory-cell {
    background: #f5edc7;
    border-bottom: 1px solid #b8a970;
    border-left: 1px solid #d3c28a;
    color: #332711;
    font: 13px Verdana, Arial, sans-serif;
    min-height: 280px;
    padding: 8px 6px !important;
    text-align: center;
    vertical-align: top;
}

.bk-shop-directory-cell.is-empty {
    background: transparent;
    border: 0;
    padding: 0 !important;
}

.bk-shop-directory-image {
    align-items: center;
    display: flex;
    height: 190px;
    justify-content: center;
    margin: 0 auto 6px;
    width: 100%;
    max-width: 100%;
}

.bk-shop-directory-image img {
    border: 0;
    display: block;
    max-height: 190px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Адаптив: чем уже экран, тем меньше картинка магазина —
   чтобы карточки не схлопывались и не «съезжали». */
@media (max-width: 1600px) {
    .bk-shop-directory-image,
    .bk-shop-directory-image img {
        height: 170px;
        max-height: 170px;
    }
    .bk-shop-directory-cell { min-height: 240px; }
}

@media (max-width: 1366px) {
    .bk-shop-directory-image,
    .bk-shop-directory-image img {
        height: 150px;
        max-height: 150px;
    }
    .bk-shop-directory-cell { min-height: 220px; }
}

@media (max-width: 1200px) {
    .bk-shop-directory-image,
    .bk-shop-directory-image img {
        height: 130px;
        max-height: 130px;
    }
    .bk-shop-directory-cell {
        min-height: 200px;
        padding: 6px 4px !important;
    }
    .bk-shop-directory .house_short_location {
        font-size: 12px;
    }
    .bk-shop-directory .house_short_location b {
        font-size: 13px;
    }
}

.bk-shop-directory .house_short_location {
    margin: 6px 0 0;
    line-height: 1.4;
    font-size: 13px;
}

.bk-shop-directory .house_short_location b {
    font-size: 14px;
}

.bk-shop-directory .house_short_location a {
    color: #0056a3;
    text-decoration: none;
}

.bk-shop-directory .house_short_location a:hover {
    text-decoration: underline;
}

.bk-shop-directory .house_short_location span {
    color: #5b4b28;
    font-size: 11px;
}

/* Правая колонка «Отделы магазина» */
.bk-shop-side-head {
    background: #708090;
    color: #fff;
    padding: 4px 8px;
    font: bold 12px Verdana, Arial, sans-serif;
    text-align: center;
}
.bk-shop-side-body { padding: 6px 0 0 0; }
.bk-shop-side-body .podrazdel__list { margin-left: 8px; }

/* Список магазинов на главной странице раздела —
   карточки в стиле «вход в пещеру»: тёмная шапка с названием,
   большая картинка, светлая нижняя плашка с подписью.
   Используем flex с grow=1, чтобы в неполной нижней строке
   карточки растягивались и не оставалось пустых «дыр» сетки. */
.bk-shop-list-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 10px 0 22px;
    width: 100%;
}

.bk-shop-list-grid .bk-shop-list-card {
    flex: 1 1 300px;
    max-width: 460px;
    min-width: 260px;
}

.bk-shop-list-section {
    background: linear-gradient(to bottom, #4a4d3e 0%, #2f322a 100%);
    color: #fff8d0;
    font: bold 14px/1.3 Georgia, "Times New Roman", serif;
    letter-spacing: .3px;
    margin: 14px 0 10px;
    padding: 8px 14px;
    text-align: center;
    border: 1px solid #1c1f18;
    border-radius: 4px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,220,.12),
        inset 0 -1px 0 rgba(0,0,0,.4),
        0 2px 4px rgba(0,0,0,.25);
    text-shadow: 0 1px 0 rgba(0,0,0,.4);
}

.bk-shop-list-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #6b6f60;
    border-radius: 4px;
    color: #2a2410;
    font: 12px Verdana, Arial, sans-serif;
    min-height: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    box-shadow:
        0 2px 6px rgba(40, 30, 8, .22),
        inset 0 0 0 1px rgba(255,255,255,.4);
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}

.bk-shop-list-card:hover {
    border-color: #3e4136;
    transform: translateY(-2px);
    box-shadow:
        0 5px 14px rgba(40, 30, 8, .35),
        inset 0 0 0 1px rgba(255,255,255,.4);
}

/* Тёмная шапка с названием магазина */
.bk-shop-list-card .name {
    display: block;
    padding: 8px 10px;
    background: linear-gradient(to bottom, #4a4d3e 0%, #2f322a 100%);
    color: #fff8d0;
    font: bold 13px/1.3 Georgia, "Times New Roman", serif;
    letter-spacing: .2px;
    text-shadow: 0 1px 0 rgba(0,0,0,.45);
    border-bottom: 1px solid #1c1f18;
    box-shadow:
        inset 0 1px 0 rgba(255,255,220,.12),
        inset 0 -1px 0 rgba(0,0,0,.35);
}

.bk-shop-list-card .name a {
    color: inherit;
    text-decoration: none;
}

/* Большое атмосферное изображение магазина */
.bk-shop-list-image {
    align-items: center;
    display: flex;
    height: 340px;
    justify-content: center;
    margin: 0;
    padding: 14px;
    background: linear-gradient(to bottom, #1a1a16 0%, #2a2a22 100%);
    overflow: hidden;
    box-sizing: border-box;
}

.bk-shop-list-image img {
    border: 0;
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Нижняя пергаментная плашка с мета-инфо */
.bk-shop-list-card .meta {
    display: block;
    padding: 6px 10px;
    background: linear-gradient(to bottom, #faecbc 0%, #ead07a 100%);
    color: #3a2a06;
    font: 11px/1.4 Verdana, Arial, sans-serif;
    border-top: 1px solid #b8932f;
}

.bk-shop-list-card .meta + .meta {
    padding-top: 0;
    border-top: 0;
    color: #5a4a18;
    font-size: 10px;
}

/* Если у карточки нет meta — снизу всё равно есть «подложка»,
   которая визуально завершает рамку. */
.bk-shop-list-card > :last-child {
    margin-bottom: 0;
}

/* Поле поиска */
.bk-shop-search {
    width: 220px;
    border: 1px solid #99b8d9;
    border-radius: 3px;
    padding: 2px 6px;
    font: 11px Verdana, Arial, sans-serif;
}
.bk-shop-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fef9e7;
    border: 1px solid #d8c997;
    padding: 6px 8px;
    margin: 0 0 8px;
    font: 12px Verdana, Arial, sans-serif;
}
.bk-shop-filter label {
    font-weight: bold;
}
.bk-shop-filter select {
    min-width: 120px;
    border: 1px solid #b99f62;
    background: #fffdf2;
    padding: 2px 4px;
    font: 12px Verdana, Arial, sans-serif;
}
.bk-shop-filter a {
    color: #06f;
}

/* Текст ошибки/инфо */
.bk-error {
    background: #f5d6d6;
    border: 1px solid #d29a9a;
    color: #7d2020;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 10px 0;
}

.bk-shop-page {
    background: #f2e5a8;
    color: #000;
    font: 13px Verdana, Arial, sans-serif;
    min-height: 620px;
    padding: 14px 24px;
    width: 100%;
    box-sizing: border-box;
}
.bk-shop-top {
    background: #d7eef8;
    border: 1px solid #1385ff;
    border-top: 2px solid #1385ff;
    padding: 10px 14px;
    margin: 0 0 12px;
}
.bk-shop-breadcrumbs {
    color: #07f;
    font: bold 17px Verdana, Arial, sans-serif;
    line-height: 1.35;
    margin: 0;
}
.bk-shop-breadcrumbs span {
    color: #d00;
}
.bk-shop-breadcrumbs a {
    color: #07f;
    text-decoration: none;
}
.bk-shop-breadcrumbs .bk-shop-crumb-muted {
    color: #07f;
}
.bk-shop-links {
    background: #e9f7ff;
    margin: 10px 24px 0;
    padding: 7px 8px;
}
.bk-shop-top .bk-shop-links {
    display: none;
}
.bk-shop-see {
    color: #080;
    font-size: 12px;
    margin: 0 0 0 24px;
}
.bk-shop-see span {
    color: #d00;
    font-weight: bold;
}
.bk-shop-see a {
    color: #06f;
}
.bk-shop-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 10px;
    align-items: start;
}
.bk-shop-right {
    background: #eee;
    border: 1px solid #aaa;
    padding: 6px;
}
.bk-shop-grid td {
    border: 1px solid #b8ae96;
}
.bk-shop-item-img {
    display: inline-block;
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
}
.bk-shop-item-title {
    color: #9b3f76;
    font-size: 15px;
    font-weight: bold;
}
.bk-shop-item-title a {
    color: #9b3f76;
    text-decoration: none;
}
.bk-shop-item-title a:hover {
    text-decoration: underline;
}
.bk-shop-bound-badge {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 3px;
    border: 0;
    object-fit: contain;
    vertical-align: text-bottom;
}
.bk-shop-magic-effect,
.bk-item-magic-effect {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
    line-height: 23px;
}
.bk-shop-magic-icon,
.bk-item-magic-icon {
    display: inline-block;
    width: 36px;
    height: 23px;
    border: 0;
    object-fit: contain;
    vertical-align: middle;
}
.bk-shop-price,
.bk-shop-block-title {
    font-weight: bold;
}
.bk-shop-grid ul {
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
}
.bk-shop-grid li::before {
    content: "• ";
}
.bk-shop-side-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0 0 0 6px;
}
.bk-shop-side-list li {
    margin: 3px 0;
}
.bk-shop-side-list .podrazdel__item_red {
    font-family: Verdana, Arial, sans-serif;
    color: #7A1808;
    font-size: 12px;
    text-align: left;
    margin: 10px 10px 8px 0;
    list-style-type: none;
    font-weight: bold;
}
.bk-shop-side-list .bk-shop-side-child {
    margin: 0 0 9px 0;
    color: #1c2d3a;
    font: 11px Verdana, Arial, sans-serif;
    white-space: nowrap;
}
.bk-shop-side-list .bk-shop-side-dash {
    color: #1c2d3a;
}
.bk-shop-side-list a {
    color: #1c2d3a;
    font-weight: normal;
    text-decoration: none;
}
.bk-shop-side-list a.active {
    color: #c00;
    text-decoration: none;
}
.bk-shop-side-group {
    color: #8b0000;
    font-weight: bold;
    margin-top: 9px !important;
}
.spoiler_bg {
    background: transparent;
    border: 1px solid #b23b2f;
    border-radius: 0;
    margin: 0 0 20px;
    padding: 4px;
}
.spoiler_bg .spoiler_style {
    background: #a9cf6b;
    color: #fff;
    cursor: pointer;
    font: bold 13px Verdana, Arial, sans-serif;
    padding: 4px 8px;
    text-align: center;
}
.spoiler_bg .spoiler_style:hover {
    color: #fff;
}
.bk-shop-desc {
    background: #f8f1d1;
    border-top: 1px solid #d0bd80;
    margin-top: 6px;
    padding: 10px 14px;
}
/* Порядок элементов внутри карточки: name (тёмная шапка) — image — meta */
.bk-shop-list-card .name { order: 1; }
.bk-shop-list-image      { order: 2; }
.bk-shop-list-card .meta { order: 3; display: block; }
@media (max-width: 900px) {
    .bk-shop-layout {
        grid-template-columns: 1fr;
    }
    .bk-shop-right {
        order: -1;
    }
}