/* ============================================================
   SHOPSTYLE — шапка (Woodmart 7.0.2, Header Builder header_768969)
   Палитра макета. Подключается автоматически inc/enqueue.php (assets/*.css) после style.css.
   ============================================================ */
:root {
	--ss-bg: #FFFFFF;
	--ss-text: #1A1A1F;
	--ss-accent: #8E2DE2;
	--ss-muted: #8B8A93;
	--ss-burger-photo: none; /* [ФОТО: магазин для панели бургера] → url(...) */
}

/* ---------- ряд шапки ---------- */
/* тема красит ряд без фона в #fff — нам нужен тёплый фон макета */
.whb-header .whb-row.whb-color-dark:not(.whb-with-bg) { background-color: var(--ss-bg); }
/* full_width=true в настройках хедера: контейнер 95% → отступы как в макете */
.whb-full-width .whb-row > .container { width: 100%; max-width: none; padding: 0 28px; }
/* липкое состояние (класс whb-sticked ставит JS темы): тонкая линия вместо тени */
.whb-sticked .whb-row { box-shadow: 0 1px 0 rgba(43, 39, 36, .08); }

/* ---------- логотип текстом (header-elements/logo.php) ---------- */
.ss-logo .wd-logo {
	font-family: 'Jost', var(--wd-header-el-font, sans-serif);
	font-weight: 600; /* владелец 26.10.2026: логотип шрифтом «SHOPSTYLE на Wildberries» — Jost полужирный, без разрядки */
	font-size: 31px; /* Benny 07.10: веб +30 % (было 24) */
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--ss-text);
	white-space: nowrap;
}

/* ---------- главное меню ---------- */
.whb-header .wd-nav[class*="wd-style-"] {
	--nav-color: var(--ss-text);
	--nav-color-hover: var(--ss-accent);
	--nav-color-active: var(--ss-text);
	--nav-chevron-color: var(--ss-muted);
}
.whb-header .wd-nav-main > li > a {
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
/* SALE — единственное цветное место меню (класс пункта ss-sale) */
.whb-header .wd-nav-main > li.ss-sale > a { --nav-color: var(--ss-accent); --nav-color-active: var(--ss-accent); }

/* ---------- иконки (бургер, поиск, аккаунт, избранное, корзина) ---------- */
.whb-header .wd-tools-element > a { color: var(--ss-text); }
.whb-header .wd-tools-element .wd-tools-icon:before { font-size: 18px; }
.whb-header .wd-header-mobile-nav .wd-tools-icon:before { font-size: 22px; }
.whb-header .wd-header-cart .wd-cart-number { top: -6px; right: -8px; background-color: var(--ss-accent); }

/* ---------- ГЛАВНАЯ ----------
   26.10.2026 (владелец: «должно быть нативно понятно, как в приложении WB»): шапка на главной обычная, с фоном и тёмным
   логотипом — без прозрачной шапки поверх фото (белый логотип терялся на светлых кадрах). */
body.home .whb-header { margin-bottom: 0; }

/* ---------- МЕГА-МЕНЮ «Одежда» ----------
   Пункт 1-го уровня с классом ss-mega и _menu_item_design=full-width. Дети (категории)
   рендерятся темой как li.col-auto → раскладываем в 2 колонки. Фото справа — миниатюра
   (featured image) пункта «Одежда»: тема отдаёт её как --wd-dropdown-bg-img. */
.wd-nav-main > li.ss-mega > .wd-dropdown-menu {
	min-height: 480px;
	padding: 36px 0 0;
	background: var(--ss-bg); /* фото — в ::before (правый блок 40%, cover) */
	box-shadow: 0 1px 0 rgba(43, 39, 36, .08);
}
.wd-nav-main > li.ss-mega > .wd-dropdown-menu > .container { position: static; width: 62%; max-width: none; margin: 0; padding: 6px 28px 40px; }
/* градиент под белый промо-текст справа (виден и когда фото ещё нет) */
.wd-nav-main > li.ss-mega > .wd-dropdown-menu::before {
	content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40%; pointer-events: none;
	background: linear-gradient(to top, rgba(43, 39, 36, .55), rgba(43, 39, 36, 0) 55%), var(--wd-dropdown-bg-img, none) center / cover no-repeat;
}
.ss-mega .wd-sub-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 0 28px; margin: 0; padding: 0; background: transparent; box-shadow: none; } /* Woodmart 8: ul без .row (flex через [class*=wd-grid-f]) и с тенью .wd-sub-accented — убираем */
.ss-mega .wd-sub-menu > li { width: auto; margin: 0; padding: 0; }
.ss-mega .wd-sub-menu > li > a {
	--sub-menu-color: var(--ss-text);
	--sub-menu-color-hover: var(--ss-accent);
	padding: 9px 0;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.3;
	text-transform: none;
}
/* строка внизу: «Смотреть все» (класс ss-mega-links) + его дети — служебные ссылки */
.ss-mega .wd-sub-menu > li.ss-mega-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 22px; margin-top: 36px; }
.ss-mega .wd-sub-menu > li.ss-mega-links > a { padding: 0; font-size: 14px; text-decoration: underline; text-underline-offset: 6px; }
.ss-mega li.ss-mega-links > .sub-sub-menu { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 0; padding: 0; list-style: none; }
.ss-mega li.ss-mega-links .sub-sub-menu a { padding: 0; font-size: 13px; color: var(--ss-muted); }
.ss-mega li.ss-mega-links .sub-sub-menu a:hover { color: var(--ss-text); }
/* промо-подпись поверх фото (пункт с классом ss-mega-promo) */
.ss-mega .wd-sub-menu > li.ss-mega-promo { position: absolute; left: 80%; bottom: 36px; transform: translateX(-50%); width: auto; text-align: center; }
.ss-mega .wd-sub-menu > li.ss-mega-promo > a {
	--sub-menu-color: #fff;
	--sub-menu-color-hover: #fff;
	display: block;
	padding: 0;
	font-weight: 300;
	font-size: 26px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.ss-mega .wd-sub-menu > li.ss-mega-promo > a:after {
	content: "Смотреть все";
	display: block;
	margin-top: 6px;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* ---------- ПАНЕЛЬ БУРГЕРА / мобильное меню ----------
   Тема выводит одну off-canvas панель .mobile-nav (локация mobile-menu) — она же открывается
   бургером на десктопе. Классы пунктов: ss-m-cat (категории), ss-m-page (страницы), ss-m-service. */
.mobile-nav.wd-side-hidden { background-color: var(--ss-bg); padding-bottom: 40px; }
.mobile-nav .wd-heading { padding: 12px 28px 0; }
.mobile-nav .wd-nav-mobile li a { min-height: 0; border: 0; background: none; }
.mobile-nav .wd-nav-mobile li:active > a { background: none; }
.mobile-nav .wd-nav-mobile > li.ss-m-cat > a,
.mobile-nav .wd-nav-mobile > li.ss-m-page > a {
	padding: 13px 28px;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ss-text);
}
.mobile-nav .wd-nav-mobile > li.ss-sale > a { color: var(--ss-accent); }
/* служебные ссылки + пункты аккаунт/избранное, которые тема добавляет в конец меню */
.mobile-nav .wd-nav-mobile > li.ss-m-service > a,
.mobile-nav .wd-nav-mobile > li.menu-item-account > a,
.mobile-nav .wd-nav-mobile > li.menu-item-wishlist > a { padding: 6px 28px; font-size: 14px; color: var(--ss-muted); }
.mobile-nav .wd-nav-mobile > li.ss-m-page + li.ss-m-service { margin-top: 36px; }
.mobile-nav .wd-nav-mobile .wd-with-icon > a:before { color: var(--ss-muted); }

@media (min-width: 1025px) {
	/* десктоп: панель на половину экрана, категории не дублируем (они в главном меню), поиск не нужен */
	.mobile-nav.wd-side-hidden { width: min(50vw, 720px) !important; }
	.mobile-nav .wd-nav-mobile > li.ss-m-cat,
	.mobile-nav .searchform { display: none; }
	.mobile-nav .wd-nav-mobile > li.ss-m-cat + li.ss-m-page { margin-top: 24px; }
	/* фото магазина справа от списка — когда появится картинка, задать --ss-burger-photo */
	.mobile-nav.wd-side-hidden:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40%; background: var(--ss-burger-photo) center / cover no-repeat; pointer-events: none; }
}

@media (max-width: 1024px) {
	/* мобайл (ТЗ п.3): меню на весь экран, категории крупным списком, страницы/служебные мельче внизу */
	.mobile-nav.wd-side-hidden { width: 100vw !important; }
	.ss-logo .wd-logo.wd-logo { font-size: 28px; } /* Benny 06.10: «чуть больше» — место дали узкие отступы ряда */
	.whb-full-width .whb-row > .container { padding: 0 18px; } /* было 28px: иначе логотип 28px упирается в корзину на 375px */ /* Benny 06.10.2026: больше и шире; catalog.css ставит 25px — наш файл грузится позже */
	/* Benny 29.09.2026: меню на телефоне компактнее — категории 16px (пункт ~43px, удобно пальцем), страницы 13px */
	.mobile-nav .wd-search-form { display: none; } /* Benny 29.09.2026: поиск в мобильном меню не нужен */
	.mobile-nav .wd-nav-mobile > li:first-child { margin-top: 4px; }
	.mobile-nav .wd-nav-mobile > li.ss-m-cat > a { font-size: 16px; letter-spacing: .08em; padding: 12px 24px; }
	.mobile-nav .wd-nav-mobile > li.ss-m-page > a { font-size: 13px; letter-spacing: .06em; padding: 7px 24px; }
	.mobile-nav .wd-nav-mobile > li.ss-m-service > a,
	.mobile-nav .wd-nav-mobile > li.menu-item-account > a,
	.mobile-nav .wd-nav-mobile > li.menu-item-wishlist > a { font-size: 13px; padding: 6px 24px; }
	.mobile-nav .wd-heading { padding: 10px 24px 0; }
	.mobile-nav .wd-nav-mobile > li.ss-m-cat + li.ss-m-page { margin-top: 20px; }
	.mobile-nav .wd-nav-mobile > li.ss-m-page + li.ss-m-service { margin-top: 16px; }
}

/* ---------- Боковая корзина (видна на всех страницах — правила перенесены из page-cart.css 08.09) ---------- */
.cart-widget-side .widget_shopping_cart_content { background: var(--ss-bg); }
.cart-widget-side .woocommerce-mini-cart-item { padding: 14px 0; border-bottom: 1px solid var(--ss-line); }
.cart-widget-side .woocommerce-mini-cart-item .wd-entities-title { font-size: 14px; font-weight: 400; }
.cart-widget-side .woocommerce-mini-cart-item .quantity,
.cart-widget-side .woocommerce-mini-cart-item .wd-product-sku { color: var(--ss-muted); font-size: 13px; }
.cart-widget-side .woocommerce-mini-cart-item .remove { color: var(--ss-muted); border-color: transparent; }
.cart-widget-side .woocommerce-mini-cart-item .remove:hover { color: var(--ss-accent); }
.cart-widget-side .woocommerce-mini-cart__total { border-top: 1px solid var(--ss-line); padding-top: 14px; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.cart-widget-side .woocommerce-mini-cart__total .amount { font-size: 16px; letter-spacing: 0; }
.cart-widget-side .woocommerce-mini-cart__buttons { display: grid; gap: 8px; }
.cart-widget-side .woocommerce-mini-cart__buttons .button { width: 100%; margin: 0; }
.cart-widget-side .wd-empty-mini-cart { padding: 60px 20px; text-align: center; color: var(--ss-muted); }
.cart-widget-side .wd-empty-mini-cart .empty { font-size: 14px; text-transform: none; letter-spacing: 0; }
.cart-widget-side .wd-empty-mini-cart::before, .cart-widget-side .wd-empty-mini-cart > svg, .cart-widget-side .wd-empty-mini-cart .wd-icon { display: none; }
.cart-widget-side .shopping-cart-widget-body, .cart-widget-side .wd-scroll-content { height: 100%; }
.cart-widget-side .wd-empty-mini-cart { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 140px); padding: 20px; gap: 18px; }
.cart-widget-side .wd-empty-mini-cart .empty { margin: 0; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--ss-text); }

/* правки 14.09: выпадающее меню «Личный кабинет» — одна панель без вложенной рамки */
.wd-header-my-account .wd-dropdown-menu.wd-design-default{--wd-dropdown-padding:10px 0;--wd-dropdown-width:210px}
.wd-header-my-account .wd-dropdown-menu .wd-sub-menu{background:transparent!important;box-shadow:none!important;border:0;margin:0;padding:0}
.wd-header-my-account .wd-dropdown-menu .wd-sub-menu>li{margin:0}
.wd-header-my-account .wd-dropdown-menu .wd-sub-menu>li>a{display:block;padding:9px 24px;font-size:14px;line-height:1.4;color:var(--ss-text)}
.wd-header-my-account .wd-dropdown-menu .wd-sub-menu>li>a:hover{color:var(--ss-accent);background:transparent}

/* ---------- ШАПКА 2026 (Benny 22.10.2026) ----------
   Панель бургера с меню «Бургер 2026»: ul получает класс ss-nav-2026 (меню панели с такими классами), пункты — ss-n-top (NEW/BESTSELLERS/SALE),
   ss-n-head (заголовок группы, не ссылка), ss-n-cat (раздел), ss-n-info (страницы). Десктоп — две колонки, без полосы под фото. */
.mobile-nav .ss-nav-2026 > li.ss-n-top > a { padding: 9px 28px; font-weight: 500; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--ss-text); }
.mobile-nav .ss-nav-2026 > li.ss-n-top.ss-sale > a { color: var(--ss-accent); }
.mobile-nav .ss-nav-2026 > li.ss-n-head { margin-top: 26px; }
.mobile-nav .ss-nav-2026 > li.ss-n-head > a { padding: 0 28px 8px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ss-muted); pointer-events: none; }
.mobile-nav .ss-nav-2026 > li.ss-n-cat > a { padding: 7px 28px; font-size: 18px; line-height: 1.25; letter-spacing: .01em; text-transform: none; font-weight: 400; color: var(--ss-text); }
.mobile-nav .ss-nav-2026 > li.ss-n-cat > a:hover { color: var(--ss-accent); }
.mobile-nav .ss-nav-2026 > li.ss-n-info > a { padding: 5px 28px; font-size: 14px; text-transform: none; font-weight: 400; color: var(--ss-muted); }
.mobile-nav .ss-nav-2026 > li.menu-item-account > a,
.mobile-nav .ss-nav-2026 > li.menu-item-wishlist > a { padding: 6px 28px; font-size: 14px; color: var(--ss-muted); }
.mobile-nav .ss-nav-2026 > li.ss-n-info + li.menu-item-wishlist { margin-top: 14px; }
@media (min-width: 1025px) {
	.mobile-nav:has(.ss-nav-2026) { width: min(52vw, 760px) !important; }
	.mobile-nav:has(.ss-nav-2026):after { display: none; }
	.mobile-nav .ss-nav-2026 { column-count: 2; column-gap: 8px; padding: 8px 28px 0 0; }
	.mobile-nav .ss-nav-2026 > li { break-inside: avoid; }
	.mobile-nav .ss-nav-2026 > li.ss-n-top:first-child { margin-top: 0; }
}
@media (max-width: 1024px) {
	.mobile-nav .ss-nav-2026 > li.ss-n-top > a { padding: 10px 24px; font-size: 14px; }
	.mobile-nav .ss-nav-2026 > li.ss-n-head { margin-top: 20px; }
	.mobile-nav .ss-nav-2026 > li.ss-n-head > a { padding: 0 24px 6px; }
	.mobile-nav .ss-nav-2026 > li.ss-n-cat > a { padding: 9px 24px; font-size: 16px; }
	.mobile-nav .ss-nav-2026 > li.ss-n-info > a { padding: 6px 24px; font-size: 13px; }
}

/* 26.10.2026: в меню четыре пункта и все видны строкой — на десктопе бургер «Меню» (ss_burger_desktop) лишний; на телефоне остаётся */
@media (min-width: 1025px) { .whb-general-header .wd-header-mobile-nav.wd-style-text { display: none; } }

/* ---------- Меню-бургер: витрина (inc/mobile-toolbar.php, shopstyle_burger_html; владелец 26.10.2026 — «красочнее») ---------- */
.mobile-nav .wd-heading { background: linear-gradient(135deg, #8E2DE2 0%, #CB11AB 100%); padding: 14px 24px; }
.mobile-nav .wd-heading .wd-action-btn > a, .mobile-nav .wd-heading .wd-action-icon:before { color: #fff; }
.ss-bm { padding: 8px 16px 24px; display: grid; gap: 12px; }
.ss-bm-promo { display: block; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #8E2DE2, #CB11AB); color: #fff !important; }
.ss-bm-promo span { display: block; font: 600 20px/1.2 "Cormorant Garamond", serif; }
.ss-bm-promo b { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: #fff; color: #CB11AB; font-size: 12px; font-weight: 600; }
.ss-bm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ss-bm-tile { border-radius: 16px; background: #F6F0FB; overflow: hidden; }
.ss-bm-tile-main { display: block; color: var(--ss-text) !important; }
.ss-bm-tile-main img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ss-bm-tile-main b { display: block; padding: 8px 10px 0; font-size: 14px; font-weight: 600; line-height: 1.2; }
.ss-bm-tile-main span { display: block; padding: 2px 10px 0; font-size: 12px; color: var(--ss-accent); }
.ss-bm-dots { display: flex; gap: 6px; padding: 8px 10px 10px; }
.ss-bm-dots a { display: block; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(142, 45, 226, .35); }
.ss-bm-dots img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ss-bm-perks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ss-bm-perks li { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ss-bm-perks .is-free { background: #E6F7EE; color: #1FA35B; }
.ss-bm-perks .is-try { background: #EFE5FB; color: #8E2DE2; }
.ss-bm-perks .is-back { background: #FDE8F6; color: #CB11AB; }
.ss-bm-call { display: block; padding: 12px 16px; border-radius: 16px; border: 1px solid #EFE5FB; font-weight: 600; color: var(--ss-text) !important; }
.ss-bm-call span { display: block; font-size: 12px; font-weight: 400; color: var(--ss-muted); }
@media (min-width: 1025px) { .ss-bm { max-width: 60%; } }