/*
 * Busya: стили шаблона templates/busya-shop.php (пакет 8г, Е.15; раньше — блок <style> в HTML страницы).
 * Подключается в Busya::enqueue_assets() после busya-site.css, когда выбран этот шаблон (Busya::remember_template()).
 */

.busya-single-shop-layout {
    width: 100%;
    max-width: var(--busya-w, 1000px);
    margin: 20px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 24px;
    font-family: system-ui, -apple-system, sans-serif;
    align-items: start;
    box-sizing: border-box;
}

/* Две колонки-обёртки — прямые дети грида. Каждая колонка раскладывает
   свои блоки обычным потоком, поэтому высоты колонок независимы и в
   сайдбаре не появляется «дыра» между карточками. */
.busya-col-main { grid-column: 1; min-width: 0; }
.busya-col-side { grid-column: 2; align-self: start; }

/* Блоки левой колонки */
.busya-block-shop-head,
.busya-block-coupons,
.busya-block-expired,
.busya-block-seo,
.busya-block-about {
    min-width: 0;
    width: 100%;
}

/* Тексты под поиск (includes/shop-seo.php) */
.busya-seo-intro { margin: -6px 0 18px; color: #334155; font-size: 15px; line-height: 1.6; }
.busya-seo-intro p { margin: 0 0 8px; }
.busya-seo-intro p:last-child { margin-bottom: 0; }
.busya-block-seo { margin-top: 8px; }
.busya-seo-block { line-height: 1.65; color: #334155; font-size: 15px; }
.busya-seo-block h2 { font-size: 22px; font-weight: 700; color: #1e293b; margin: 0 0 14px; line-height: 1.3; }
.busya-seo-block p { margin: 10px 0 0; }
.busya-seo-steps, .busya-seo-reasons { margin: 0; padding-left: 22px; }
.busya-seo-steps li, .busya-seo-reasons li { margin: 0 0 8px; }
.busya-seo-steps li:last-child, .busya-seo-reasons li:last-child { margin-bottom: 0; }
.busya-seo-faq-item + .busya-seo-faq-item { margin-top: 16px; padding-top: 16px; border-top: 1px solid #f1f5f9; }
.busya-seo-faq-item h3 { font-size: 16px; font-weight: 700; color: #1e293b; margin: 0 0 6px; line-height: 1.4; }
.busya-seo-faq-item p { margin: 0; }
.busya-seo-block a { color: var(--busya-accent, #3b82f6); }
.busya-seo-related { list-style: none; margin: 0; padding: 0; }
.busya-seo-related li + li { margin-top: 12px; }
.busya-seo-related a { font-weight: 600; text-decoration: none; }
.busya-seo-related a:hover { text-decoration: underline; }
.busya-seo-related span { display: block; font-size: 14px; color: #64748b; margin-top: 2px; }
.busya-seo-also { margin-top: 16px; font-size: 12px; color: #94a3b8; line-height: 1.5; }
.busya-seo-also span { font-weight: 600; }

/* Карточки сайдбара стопкой: «Похожие» сразу под инфо-виджетом */
.busya-block-sidebar-info,
.busya-block-sidebar-similar { width: 100%; }
.busya-block-sidebar-similar { margin-top: 20px; }

.busya-plaque-container {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px 0;
    padding: 20px;
    font-family: system-ui, -apple-system, sans-serif;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

/* Шапка магазина в основной колонке */
.busya-shop-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.busya-shop-head .bsh-logo {
    width: 112px;
    height: 70px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border-radius: 10px;
    padding: 6px;
    box-sizing: border-box;
}

.busya-shop-head .bsh-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    .busya-shop-head .bsh-logo { width: 80px; }
}

.busya-shop-head h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #1e293b;
    line-height: 1.2;
}

.busya-shop-head .bsh-sub {
    font-size: 14px;
    color: #64748b;
}

/* Вкладки типов */
.busya-shop-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.busya-tab {
    border: none;
    background: #f1f5f9;
    color: #334155;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.busya-tab span {
    font-size: 12px;
    opacity: 0.7;
}

.busya-tab:hover {
    background: #e2e8f0;
}

.busya-tab.active {
    background: #3b82f6;
    color: #fff;
}

.busya-tab.active span {
    opacity: 0.85;
}

/* Карточки купонов внутри плашки */
.busya-plaque-container .busya-coupon-card .bcc-link {
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    transform: none !important;
    min-height: auto !important;
}

.busya-plaque-container.busya-compact {
    padding: 10px 20px;
    margin-bottom: 15px;
}

.busya-compact .bcc-content {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 3px;
}

.busya-compact .bcc-info {
    padding: 5px 15px !important;
    justify-content: center;
    min-width: 0 !important;
}

.busya-compact .bcc-excerpt {
    margin: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    display: block !important;
    max-width: 100%;
    line-height: 1.4;
}

.busya-compact .bcc-link {
    min-height: 50px !important;
}

.busya-compact .bcc-discount {
    padding: 5px !important;
}

.busya-compact .bcc-discount img {
    max-height: 40px !important;
    width: auto !important;
    object-fit: contain !important;
}

.busya-plaque-container .busya-coupon-card .bcc-link:hover .bcc-excerpt {
    color: #3b82f6 !important;
    transition: color 0.2s;
}

/* САЙДБАР */
.busya-sidebar-plaque {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.shop-info-widget {
    text-align: center;
}

.shop-logo-wrapper {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: #f8fafc;
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;
}

.shop-logo-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.shop-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #1e293b;
}

.shop-desc {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: left;
}

/* «Информация о промокодах {shop}» — цифры магазина (пакет 7, K5) */
.shop-promo-info {
    margin: 0 0 20px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    text-align: left;
}

.shop-promo-info h3 {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px;
    line-height: 1.35;
}

.shop-promo-info dl { margin: 0; font-size: 13px; line-height: 1.4; }

.shop-promo-info .spi-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid #eef2f7;
}

.shop-promo-info .spi-row:first-child { border-top: none; }
.shop-promo-info dt { color: #64748b; margin: 0; font-weight: 400; }
.shop-promo-info dd { color: #1e293b; margin: 0; font-weight: 600; white-space: nowrap; text-align: right; }
.shop-promo-info .spi-best dd { color: #10b981; }

.shop-link-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: #3b82f6;
    color: #fff;
    text-align: center;
    border-radius: var(--busya-radius-btn, 8px);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s;
    box-sizing: border-box;
}

.shop-link-btn:hover {
    background: #2563eb;
    color: #fff;
}

.cats-widget-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #1e293b;
}

.cats-vertical-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cat-vertical-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #334155;
    font-size: 15px;
    padding: 8px 0;
    transition: color 0.2s;
    border-bottom: 1px solid #f1f5f9;
    box-sizing: border-box;
}

.cat-vertical-item:last-child {
    border-bottom: none;
}

.cat-vertical-item:hover {
    color: #3b82f6;
}

.cat-vertical-icon {
    width: 48px;
    height: 40px;
    flex-shrink: 0;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-vertical-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cat-bullet {
    color: #cbd5e1;
    font-size: 20px;
    margin-right: 12px;
}

/* Блок истёкших купонов */
.busya-expired-head {
    margin: 28px 0 12px;
}

.busya-expired-head h2 {
    font-size: 20px;
    font-weight: 700;
    color: #475569;
    margin: 0 0 4px;
}

.busya-expired-head .busya-expired-note {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.4;
}

/* Приглушённый фон карточек истёкших купонов */
.busya-coupon-row.is-expired {
    background-color: #f1f5f9;
    opacity: 0.85;
}

.busya-coupon-row.is-expired .bcc-expires {
    color: #ef4444;
    font-weight: 600;
}

/* «Начнёт действовать 19.10» — купон ещё не стартовал (показываем, кнопку не блокируем) */
.busya-coupon-card .bcc-starts {
    color: #b45309;
    font-weight: 600;
}

/* «Ещё N запасных кода» — под сроком действия */
.busya-compact .bcc-alt-note { margin-top: 2px; }

/* Квадрат скидки не должен «светиться» белым на сером фоне истёкшей карточки */
.busya-coupon-row.is-expired .bcc-discount {
    background: transparent;
}

/* Кнопка «Показать ещё» под списком предложений */
.busya-more-wrap { text-align: center; margin: 4px 0 20px; }
/* Кнопка всегда белая: тема Astra красит button:focus/:active в свой цвет,
   поэтому перечисляем состояния явно — специфичности хватает без !important. */
.busya-more-btn,
.busya-more-btn:hover,
.busya-more-btn:focus,
.busya-more-btn:focus-visible,
.busya-more-btn:active { display: inline-block; padding: 12px 28px;
    border: 1px solid var(--busya-border, #e2e8f0); background: #fff;
    color: var(--busya-accent, #3b82f6); border-radius: var(--busya-radius-btn, 8px);
    font: 600 15px/1.2 var(--busya-font, system-ui, sans-serif); cursor: pointer;
    box-shadow: none; transition: border-color 0.15s; }
.busya-more-btn:hover,
.busya-more-btn:focus-visible { border-color: var(--busya-accent, #3b82f6); }
.busya-more-btn[hidden] { display: none; }
@media (max-width: 768px) {
    .busya-more-btn { width: 100%; }
}

@media (max-width: 1100px) {
    .busya-single-shop-layout {
        grid-template-columns: 1fr;
    }

    /* Растворяем обёртки колонок — их дети снова становятся элементами
       грида, и порядок блоков задаём через order (чередуем лево/сайдбар). */
    .busya-col-main,
    .busya-col-side { display: contents; }

    .busya-block-shop-head,
    .busya-block-coupons,
    .busya-block-expired,
    .busya-block-seo,
    .busya-block-about,
    .busya-block-sidebar-info,
    .busya-block-sidebar-similar {
        grid-column: 1;
    }

    /* Отступы между карточками сайдбара в одноколоночном режиме */
    .busya-block-sidebar-info    { margin-bottom: 20px; }
    .busya-block-sidebar-similar { margin-top: 0; margin-bottom: 20px; }

    /* Порядок: шапка+вкладки → купоны → истёкшие → лого/кнопка → как применить/FAQ →
       похожие → о магазине */
    .busya-block-shop-head       { order: 1; }
    .busya-block-coupons         { order: 2; }
    .busya-block-expired         { order: 3; }
    .busya-block-sidebar-info    { order: 4; }
    .busya-block-seo             { order: 5; margin-top: 0; }
    .busya-block-sidebar-similar { order: 6; }
    .busya-block-about           { order: 7; }
}