/*
 * WonderBaby — новая главная (DRAFT/PREVIEW, page-id 2286).
 * Структура/UX-логика по образцу SHERYSHEFF (image-first, чередование
 * contained/full-bleed секций), айдентика и контент — WonderBaby.
 *
 * БЕЗОПАСНОСТЬ: этот файл подключается ТОЛЬКО на странице page-id-2286
 * (см. functions.php, условный wp_enqueue_scripts по is_page(2286)).
 * Все правила дополнительно скопированы под body.page-id-2286 —
 * двойная защита от случайного влияния на текущую (ID 162) и любые
 * другие страницы сайта.
 */

body.page-id-2286 {
    background: var(--wb-bg);
}

/*
 * 2026-08-17, найдено реальным browser QA: страница рендерится в штатном
 * Storefront-layout'е "контент + правый сайдбар" (класс body.right-sidebar,
 * шаблон page.php вызывает get_sidebar() безусловно) — виден блок "Поиск"
 * + дерево категорий справа от hero на десктопе. ВАЖНО: это НЕ баг,
 * который я внёс — та же самая раскладка уже есть на текущей боевой
 * главной (page 162, проверено прямым скриншотом) и там просто никто
 * не смотрел на него в браузере раньше. page 162 НЕ трогаем. Здесь —
 * убираем сайдбар и растягиваем контент на всю ширину, тем же способом,
 * что Storefront сам использует для класса storefront-full-width-content
 * (см. style.css), только заскоуплено на эту страницу.
 */
body.page-id-2286 #secondary.widget-area {
    display: none;
}
body.page-id-2286 #primary.content-area {
    width: 100%;
    float: none;
    margin-left: 0;
    margin-right: 0;
}

body.page-id-2286 .wbnew {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

body.page-id-2286 section {
    box-sizing: border-box;
}

body.page-id-2286 img {
    max-width: 100%;
    display: block;
}

/* ===== скрываем старый trust-bar на этой странице, показываем promo bar ===== */
body.page-id-2286 .wbmm-trust-bar {
    display: none;
}

.wbnew-promo {
    background: var(--wb-text-primary);
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
    letter-spacing: .01em;
}

/* ===== HERO — временный (портретное фото), split layout ===== */
body.page-id-2286 .wbnew-hero {
    display: flex;
    flex-direction: column-reverse;
    gap: 0;
    background: var(--wb-bg-neutral);
    max-width: none;
    padding: 0;
}
@media (min-width: 900px) {
    body.page-id-2286 .wbnew-hero {
        flex-direction: row;
        min-height: 560px;
    }
}
.wbnew-hero__media {
    position: relative;
    overflow: hidden;
    background: var(--wb-bg-neutral);
}
.wbnew-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    aspect-ratio: 4 / 5;
}
@media (min-width: 900px) {
    .wbnew-hero__media { flex: 0 0 50%; }
    .wbnew-hero__media img { aspect-ratio: auto; }
}
.wbnew-hero__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}
@media (min-width: 900px) {
    .wbnew-hero__content { padding: 40px 56px; text-align: left; align-items: flex-start; }
}
.wbnew-hero__title {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--wb-text-primary);
}
@media (min-width: 900px) {
    .wbnew-hero__title { font-size: 40px; }
}
.wbnew-hero__subtitle {
    font-size: 16px;
    color: var(--wb-text-secondary);
    margin: 0 0 24px;
    max-width: 420px;
}
.wbnew-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
@media (min-width: 900px) {
    .wbnew-hero__ctas { justify-content: flex-start; }
}
/*
 * .entry-content a{text-decoration:underline} в Storefront style.css имеет
 * специфичность (0,1,1) и перебивает наш .wbnew-btn{text-decoration:none}
 * (0,1,0) — реально увидено в browser QA (17.08, подчёркнутый текст внутри
 * чёрных кнопок). Используем .entry-content .wbnew-btn (0,2,0)+тег, чтобы
 * надёжно выиграть специфичность без !important.
 */
body.page-id-2286 .hentry .entry-content .wbnew-btn,
.entry-content .wbnew-btn,
.wbnew-btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    min-height: 44px;
    box-sizing: border-box;
    line-height: 1.4;
}
.wbnew-btn--primary {
    background: var(--wb-accent);
    color: var(--wb-accent-contrast);
}
.wbnew-btn--primary:hover { opacity: .85; }
.wbnew-btn--ghost {
    background: transparent;
    color: var(--wb-text-primary);
    border: 1px solid var(--wb-border);
}
.wbnew-btn--ghost:hover { border-color: var(--wb-text-primary); }

/* ===== секция-обёртка с заголовком ===== */
.wbnew-section {
    padding: 48px 0;
}
.wbnew-section--tight { padding: 32px 0; }
.wbnew-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
}
.wbnew-section__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: var(--wb-text-primary);
}
@media (min-width: 900px) {
    .wbnew-section__title { font-size: 26px; }
}
body.page-id-2286 .hentry .entry-content .wbnew-section__link,
.entry-content .wbnew-section__link,
.wbnew-section__link {
    /* touch-target: видимая подпись маленькая, но кликабельная область
     * растянута через padding+отрицательный margin (компенсирует сдвиг
     * визуальной позиции) до полноценных ~44px для мобильного тача.
     * .entry-content-версия селектора — та же причина, что у .wbnew-btn
     * выше: перебить .entry-content a{text-decoration:underline} из
     * Storefront, иначе к нашему border-bottom добавлялось ещё и
     * браузерное подчёркивание ("двойная линия"). */
    display: inline-block;
    padding: 10px 2px;
    margin: -10px -2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--wb-text-primary);
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 1px solid var(--wb-text-primary);
}

/* ===== LEVEL 1 — Мальчикам / Девочкам ===== */
.wbnew-gender-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
body.page-id-2286 .hentry .entry-content .wbnew-tile,
.entry-content .wbnew-tile,
.wbnew-tile {
    /* та же причина, что у .wbnew-btn: .entry-content a{text-decoration:
     * underline} из Storefront реально подчёркивал подписи "Мальчикам"/
     * "Девочкам"/категории поверх фото — увидено в browser QA. */
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    background: var(--wb-bg-neutral);
    aspect-ratio: 3 / 4;
}
.wbnew-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    transition: transform .35s ease;
}
.wbnew-tile:hover img { transform: scale(1.04); }
.wbnew-tile__label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 20px 16px 16px;
    background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .01em;
}
@media (min-width: 900px) {
    .wbnew-tile__label { font-size: 22px; padding: 28px 24px 20px; }
}
.wbnew-tile__meta {
    display: block;
    font-weight: 400;
    font-size: 13px;
    opacity: .85;
    margin-top: 2px;
}

/* ===== LEVEL 2 — товарные категории, плотнее ===== */
.wbnew-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 700px) {
    .wbnew-cat-grid { grid-template-columns: repeat(4, 1fr); }
}
.wbnew-cat-grid .wbnew-tile {
    aspect-ratio: 3 / 4;
}
.wbnew-cat-grid .wbnew-tile__label {
    font-size: 14px;
    padding: 14px 12px 12px;
}
@media (min-width: 900px) {
    .wbnew-cat-grid .wbnew-tile__label { font-size: 16px; }
}

/* ===== ХИТЫ — горизонтальный скролл без JS-библиотек ===== */
.wbnew-hits {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.wbnew-hits::-webkit-scrollbar { height: 6px; }
.wbnew-hits::-webkit-scrollbar-thumb { background: var(--wb-border); border-radius: 3px; }

/* карточка товара WooCommerce внутри блока хитов — упрощаем визуально */
body.page-id-2286 .wbnew-hits ul.products {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.page-id-2286 .wbnew-hits ul.products li.product {
    scroll-snap-align: start;
    flex: 0 0 200px;
    border: none;
    padding: 0;
    box-shadow: none;
}
@media (min-width: 900px) {
    body.page-id-2286 .wbnew-hits ul.products li.product { flex-basis: 260px; }
}
body.page-id-2286 .wbnew-hits ul.products li.product a img {
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    margin-bottom: 10px;
}
body.page-id-2286 .wbnew-hits ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--wb-text-primary);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.page-id-2286 .wbnew-hits ul.products li.product .price {
    font-size: 15px;
}
body.page-id-2286 .wbnew-hits ul.products li.product .button {
    display: none; /* по брифу: только фото/имя/цена/бейдж — без лишнего шума */
}

/* ===== SEASONAL FULL-BLEED BANNER ===== */
body.page-id-2286 .hentry .entry-content .wbnew-banner,
.entry-content .wbnew-banner,
.wbnew-banner {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    aspect-ratio: 16 / 7;
    min-height: 260px;
    overflow: hidden;
    text-decoration: none;
    display: block;
}
.wbnew-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}
.wbnew-banner__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 60%);
    color: #fff;
}
@media (min-width: 900px) {
    .wbnew-banner__content { padding: 0 0 0 64px; }
}
.wbnew-banner__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
}
@media (min-width: 900px) {
    .wbnew-banner__title { font-size: 32px; }
}
.wbnew-banner__cta {
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
}

/* ===== BRAND STORY ===== */
.wbnew-brand {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}
@media (min-width: 900px) {
    .wbnew-brand { flex-direction: row; gap: 56px; }
}
.wbnew-brand__media {
    flex: 0 0 auto;
    width: 100%;
    max-width: 360px;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.wbnew-brand__media img {
    width: 100%; height: 100%; object-fit: cover;
}
.wbnew-brand__text { flex: 1; }
.wbnew-brand__title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 12px;
}
.wbnew-brand__body {
    font-size: 15px;
    color: var(--wb-text-secondary);
    line-height: 1.6;
    margin: 0 0 8px;
}

/* ===== REVIEWS ===== */
.wbnew-reviews {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}
.wbnew-review-card {
    scroll-snap-align: start;
    flex: 0 0 260px;
    background: var(--wb-bg-neutral);
    border-radius: 12px;
    padding: 18px;
    box-sizing: border-box;
}
@media (min-width: 900px) {
    .wbnew-review-card { flex-basis: 300px; }
}
.wbnew-review-card__stars {
    color: var(--wb-accent-warm);
    font-size: 14px;
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.wbnew-review-card__text {
    font-size: 14px;
    color: var(--wb-text-primary);
    line-height: 1.5;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wbnew-review-card__meta {
    font-size: 12px;
    color: var(--wb-text-secondary);
}
.wbnew-review-card__meta strong { color: var(--wb-text-primary); }
.wbnew-reviews-summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--wb-text-secondary);
}
.wbnew-reviews-summary strong {
    font-size: 20px;
    color: var(--wb-text-primary);
}

/* ===== BONUS — компактный ===== */
.wbnew-bonus {
    background: var(--wb-accent-warm-soft);
    border-radius: 16px;
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
}
@media (min-width: 900px) {
    .wbnew-bonus { flex-direction: row; justify-content: space-between; text-align: left; padding: 32px 48px; }
}
.wbnew-bonus__stats {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    justify-content: center;
}
.wbnew-bonus__stat-num {
    font-size: 28px;
    font-weight: 700;
    color: var(--wb-text-primary);
    display: block;
}
.wbnew-bonus__stat-label {
    font-size: 13px;
    color: var(--wb-text-secondary);
}

/* ===== SERVICES ===== */
.wbnew-services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (min-width: 700px) {
    .wbnew-services { grid-template-columns: repeat(4, 1fr); }
}
.wbnew-service {
    text-align: center;
    padding: 20px 12px;
}
.wbnew-service__icon { font-size: 24px; margin-bottom: 8px; }
.wbnew-service__title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.wbnew-service__body { font-size: 13px; color: var(--wb-text-secondary); line-height: 1.4; }
.wbnew-service__body a { color: var(--wb-text-secondary); text-decoration: underline; }

/* ===== badges (реиспользуем существующий .wbcro-badge движок — только доп. позиционирование внутри узкой карточки хитов) ===== */
body.page-id-2286 .wbnew-hits .wbcro-badge {
    z-index: 2;
}