/*
Theme Name: Woodmart Child — Sharit
Theme URI: https://sharit.com.ua/
Description: Дочірня тема Woodmart для редизайну sharit.com.ua. Тут живуть токени дизайну, стилі каталогу та перевизначення шаблонів.
Author: Sharit
Template: woodmart
Version: 1.0.0
Text Domain: woodmart-child
*/

/* ==========================================================================
   1. Токени дизайну
   Значення взяті з макета «Каталог ПК».
   ========================================================================== */

:root {
	/* Кольори */
	--sh-ink:          #14203a;  /* заголовки, темні кнопки, активні стани */
	--sh-accent:       #2f6bf3;  /* акцент, посилання при наведенні */
	--sh-text:         #46506a;  /* основний текст, меню */
	--sh-muted:        #8b93a5;  /* лічильники, підписи */
	--sh-faint:        #a4abbb;  /* стрілки, дрібні числа */
	--sh-bg:           #f4f5f7;  /* фон сторінки */
	--sh-surface:      #ffffff;  /* картки, випадайки */
	--sh-brd:          #e4e7ee;  /* межі полів і кнопок */
	--sh-brd-soft:     #e9ecf2;  /* межі карток */
	--sh-brd-faint:    #eef0f5;  /* розділювачі */
	--sh-topbar:       #101a2e;
	--sh-topbar-text:  #cfd8e8;
	--sh-topbar-accent:#6ea8ff;
	--sh-promo-bg:     #eaf1fe;
	--sh-promo-brd:    #d9e2f7;
	--sh-pill-bg:      #f1f4fa;
	--sh-pill-brd:     #e5e9f1;
	--sh-badge-new:    #16a34a;  /* «Новий» — новинка */
	--sh-badge-hit:    #2f6bf3;  /* «Хіт» — популярне */

	/* Шрифти */
	--sh-font:      'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--sh-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Геометрія */
	--sh-container: 1360px;
	--sh-gutter:    40px;
	--sh-r-sm:      10px;  /* дрібні кнопки */
	--sh-r-md:      11px;  /* кнопки, поля */
	--sh-r-lg:      12px;  /* зображення */
	--sh-r-xl:      16px;  /* плитки */
	--sh-r-card:    18px;  /* картки товарів */
	--sh-r-pill:    999px;
	--sh-control-h: 40px;

	/* Тіні */
	--sh-shadow-pop: 0 18px 40px rgba(20, 32, 58, .12);
	--sh-shadow-mega: 0 24px 48px rgba(20, 32, 58, .10);

	/* Кнопки */
	--sh-btn-bg:          var(--sh-ink);
	--sh-btn-bg-hover:    var(--sh-accent);
	--sh-btn-color:       #ffffff;
	--sh-btn-r:           14px;   /* великі кнопки дій */
	--sh-btn-r-sm:        12px;   /* другорядні кнопки й контроли */
	--sh-btn-h:           52px;

	/* Поля */
	--sh-field-h:         46px;
	--sh-field-r:         12px;
	--sh-field-brd:       var(--sh-brd);
	--sh-field-brd-focus: var(--sh-ink);

	/* Стани */
	--sh-ok:              #16a34a;  /* успіх, бонуси, знижка */
	--sh-ok-bg:           #f0fdf4;
	--sh-err:             #e03131;  /* помилки, обов'язкові поля */
	--sh-brd-hover:       #c3cbdb;  /* межа при наведенні */
	--sh-brd-strong:      #d7dce6;  /* межа неактивних кружечків */
}

/* ==========================================================================
   2. Типографіка
   Woodmart успадковує решту гарнітур від --wd-text-font і --wd-title-font,
   тому достатньо перевизначити ці дві змінні.
   ========================================================================== */

/* html:root має вищу специфічність за :root, яким Woodmart
   друкує свої змінні інлайном нижче по документу. */
html:root {
	--wd-text-font:  var(--sh-font);
	--wd-title-font: var(--sh-font);

	/* Кнопки й поля самої теми — щоб сторінки, які ще не переоформлені
	   (блог, статичні, пошук, віджети), теж слухалися наших токенів. */
	--wd-form-height:          var(--sh-field-h);
	--wd-form-brd-radius:      var(--sh-field-r);
	--wd-form-brd-width:       1px;
	--wd-form-brd-color:       var(--sh-field-brd);
	--wd-form-brd-color-focus: var(--sh-field-brd-focus);
	--wd-form-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' fill='none' stroke-width='2' stroke='%2346506a'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

	--btn-accented-bgcolor:       var(--sh-btn-bg);
	--btn-accented-bgcolor-hover: var(--sh-btn-bg-hover);
	--btn-accented-color:         var(--sh-btn-color);
	--btn-accented-color-hover:   var(--sh-btn-color);
	--btn-accented-brd-radius:    var(--sh-btn-r);
	--btn-accented-box-shadow:       none;
	--btn-accented-box-shadow-hover: none;
	--btn-accented-bottom-active:    0px;
	--btn-default-brd-radius: var(--sh-btn-r);
	--btn-default-bgcolor:       var(--sh-surface);
	--btn-default-bgcolor-hover: var(--sh-surface);
	--btn-default-color:         var(--sh-text);
	--btn-default-color-hover:   var(--sh-ink);

	--wd-primary-color:   var(--sh-accent);
	--wd-link-color:      var(--sh-text);
	--wd-link-color-hover:var(--sh-ink);
}

html body,
html button,
html input,
html select,
html textarea {
	font-family: var(--sh-font);
	-webkit-font-smoothing: antialiased;
}

/* Числове набирається моноширинним — характерна риса макета. */
.price,
.woocommerce-Price-amount,
.wd-widget .count,
.wc-layered-nav-term .count,
.sh-mono {
	font-family: var(--sh-font-mono);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   3. Фільтри: згортання довгих списків (перенесено з налаштувань теми)
   ========================================================================== */

.sh-fltr:not(.sh-open) li.sh-hid {
	display: none !important;
}

.sh-more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: none;
	min-height: 0;
	justify-content: flex-start;
	text-transform: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--sh-ink);
	cursor: pointer;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	transition: color .15s;
}

.sh-more:hover {
	color: var(--sh-accent);
}

.sh-more::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s;
}

.sh-fltr.sh-open .sh-more::after {
	transform: rotate(-135deg);
	margin-top: 2px;
}

/* ==========================================================================
   4. Картка товару в каталозі
   ========================================================================== */

/* Сітка: 4 колонки на десктопі замість трьох. */
/* Woodmart друкує --wd-col-lg інлайном на елементі,
   тому перебити можна лише !important. */
@media (min-width: 1025px) {
	.wd-products.wd-grid-g.grid-columns-3 {
		--wd-col-lg: 4 !important;
	}
}

.product-grid-item .wd-product-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	padding: 14px;
	background: var(--sh-surface);
	border: 1px solid var(--sh-brd-soft);
	border-radius: var(--sh-r-card);
	transition: border-color .18s;
}

.product-grid-item .wd-product-wrapper:hover {
	border-color: var(--sh-brd-hover);
}

.product-grid-item .wd-product-thumb {
	margin: 0;
	border-radius: var(--sh-r-lg);
	overflow: hidden;
	background: #f6f7fa;
}

.product-grid-item .wd-product-thumb img {
	aspect-ratio: 4 / 3;
	object-fit: contain;
	width: 100%;
	height: auto;
}

.product-grid-item .wd-entities-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.product-grid-item .wd-entities-title a {
	color: var(--sh-ink);
}

.product-grid-item .wd-product-cats {
	display: none;
}

/* Пілюлі характеристик */
.sh-specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;
	justify-items: start;
}

.sh-spec {
	font-family: var(--sh-font-mono);
	font-size: 10px;
	line-height: 1.4;
	color: var(--sh-text);
	background: var(--sh-pill-bg);
	border: 1px solid var(--sh-pill-brd);
	padding: 3px 7px;
	border-radius: 6px;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Ціна притискається до низу картки */
.product-grid-item .price {
	margin-top: auto;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--sh-ink);
}

/* Бейджі поверх фото */
.sh-badge {
	position: absolute;
	top: 24px;
	left: 24px;
	z-index: 3;
	font-family: var(--sh-font-mono);
	font-size: 10px;
	letter-spacing: .06em;
	color: #fff;
	padding: 4px 8px;
	border-radius: 6px;
	pointer-events: none;
}

.sh-badge-new {
	background: var(--sh-badge-new);
}

.sh-badge-hit {
	background: var(--sh-badge-hit);
}

@media (max-width: 768px) {
	.product-grid-item .wd-product-wrapper {
		padding: 10px;
		gap: 10px;
		border-radius: var(--sh-r-xl);
	}

	.product-grid-item .wd-product-thumb img {
		aspect-ratio: 1 / 1;
	}

	.product-grid-item .wd-entities-title {
		font-size: 13.5px;
	}

	/* У макеті пілюлі і на телефоні у дві колонки. Але картка вужча,
	   і довге значення на кшталт «SSD 1 ТБ + HDD» у половину картки не влазить —
	   тому не жорстка сітка, а перенос: коротке стає по двоє в ряд,
	   довге займає рядок цілком і показується повністю. */
	.sh-specs {
		display: flex;
		flex-wrap: wrap;
	}

	.product-grid-item .price {
		font-size: 16px;
	}

	.sh-badge {
		top: 18px;
		left: 18px;
	}
}

/* Плагін htpc-a11y фарбує ціну в зелений через !important.
   Повертаємо колір з макета. Мітка .sh-price-fix — щоб легко знайти. */
.product-grid-item .price .woocommerce-Price-amount,
.product-grid-item .price .woocommerce-Price-amount bdi,
.product-grid-item .price bdi,
.sh-price-fix {
	color: var(--sh-ink) !important;
}

/* ==========================================================================
   5. Панель фільтрів (розмітку дає плагін htpc, тут лише оформлення)
   Стилі плагіна друкуються інлайном нижче цього файла, тому !important.
   ========================================================================== */

.htpc-filter-chips {
	margin: 0 0 20px !important;
}

.hfc-toprow {
	margin-bottom: 14px !important;
	padding-bottom: 14px !important;
	border-bottom: 1px solid var(--sh-brd-faint) !important;
}

/* Кнопки «Більше фільтрів» і сортування — прямокутні, як у макеті */
.hfc-morebtn,
.hfc-sortbtn {
	height: var(--sh-control-h) !important;
	padding: 0 16px !important;
	border-radius: var(--sh-r-md) !important;
	border: 1px solid var(--sh-brd) !important;
	background: var(--sh-surface) !important;
	font-family: var(--sh-font) !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: var(--sh-ink) !important;
	text-transform: none !important;
}

.hfc-morebtn:hover,
.hfc-sortbtn:hover {
	border-color: var(--sh-ink) !important;
	color: var(--sh-ink) !important;
}

.hfc-sortbtn .chev {
	color: var(--sh-faint) !important;
}

.hfc-sort-pop {
	border: 1px solid var(--sh-brd) !important;
	border-radius: 14px !important;
	box-shadow: var(--sh-shadow-pop) !important;
	padding: 8px !important;
}

.hfc-sort-pop a {
	border-radius: 9px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--sh-ink) !important;
	padding: 9px 10px !important;
}

.hfc-sort-pop a:hover {
	background: var(--sh-bg) !important;
}

.hfc-sort-pop a.is-current {
	color: var(--sh-accent) !important;
	font-weight: 700 !important;
}

/* Підпис рядка */
.hfc-row > span:first-child {
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--sh-muted) !important;
}

/* Чип зі значенням */
.hfc-chip {
	border-radius: var(--sh-r-pill) !important;
	border: 1px solid var(--sh-brd) !important;
	background: var(--sh-surface) !important;
	font-family: var(--sh-font) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--sh-text) !important;
	padding: 7px 13px !important;
	transition: border-color .15s, color .15s, background .15s !important;
}

.hfc-chip:hover {
	border-color: var(--sh-ink) !important;
	color: var(--sh-ink) !important;
}

/* Лічильник — моноширинним */
.hfc-chip .hfc-n {
	font-family: var(--sh-font-mono) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	color: var(--sh-faint) !important;
}

/* Обране значення */
.hfc-chip.on {
	background: var(--sh-ink) !important;
	border-color: var(--sh-ink) !important;
	color: #fff !important;
}

.hfc-chip.on .hfc-n {
	color: rgba(255, 255, 255, .6) !important;
}

/* Рядок активних фільтрів */
.hfc-chip.hfc-sel {
	background: var(--sh-promo-bg) !important;
	border-color: var(--sh-promo-brd) !important;
	color: var(--sh-ink) !important;
	font-weight: 700 !important;
	gap: 8px !important;
}

.hfc-chip.hfc-sel:hover {
	border-color: var(--sh-accent) !important;
}

.hfc-chip.hfc-sel .hfc-x {
	color: #7d8aa5 !important;
	font-size: 14px !important;
}

.hfc-chip.hfc-clear {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--sh-accent) !important;
	font-weight: 700 !important;
	padding-left: 8px !important;
	padding-right: 8px !important;
}

.hfc-chip.hfc-clear:hover {
	background: var(--sh-promo-bg) !important;
	border-color: transparent !important;
	color: var(--sh-accent) !important;
}

/* ==========================================================================
   6. Шапка
   Штатну смугу Woodmart (.whb-top-bar) плагін ховає і замінює своєю
   каруселлю — тому оформлюємо саме її, щоб не задвоїти повідомлення.
   ========================================================================== */

.htpc-carousel {
	background: var(--sh-topbar) !important;
	min-height: 40px !important;
}

.htpc-car-inner,
.htpc-slides {
	height: 40px !important;
	min-height: 40px !important;
}

.htpc-slide {
	height: 40px !important;
	line-height: 40px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: .01em !important;
	color: var(--sh-topbar-text) !important;
}

/* --- основна смуга --- */

.whb-general-header {
	background-color: rgba(255, 255, 255, .86) !important;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--sh-brd) !important;
}

.whb-general-header .container {
	min-height: 68px;
}

/* Header Builder задає рядку 104px — макет просить 68px. */
.whb-general-header .whb-general-header-inner {
	height: 68px !important;
	min-height: 68px !important;
}

/* Логотип нижчий — щоб смуга вклалася в 68px замість 105px */
.whb-general-header .site-logo img {
	max-height: 40px !important;
	width: auto !important;
}

/* --- навігація --- */

.whb-general-header .wd-nav-main > li > a .nav-link-text {
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	color: var(--sh-text) !important;
	letter-spacing: 0 !important;
}

.whb-general-header .wd-nav-main > li > a:hover .nav-link-text,
.whb-general-header .wd-nav-main > li.current-menu-item > a .nav-link-text {
	color: var(--sh-ink) !important;
}

/* Перший пункт «Каталог» — жирніший, як у макеті */
.whb-general-header .wd-nav-main > li:first-child > a .nav-link-text {
	font-weight: 700 !important;
	color: var(--sh-ink) !important;
}

/* --- іконки праворуч --- */

.whb-general-header .wd-header-my-account > a,
.whb-general-header .wd-header-search > a,
.whb-general-header .wd-header-compare > a,
.whb-general-header .wd-header-wishlist > a {
	width: 38px !important;
	height: 38px !important;
	border: 1px solid var(--sh-brd) !important;
	border-radius: var(--sh-r-md) !important;
	background: var(--sh-surface) !important;
	color: var(--sh-text) !important;
	transition: border-color .15s !important;
}

.whb-general-header .wd-header-my-account > a:hover,
.whb-general-header .wd-header-search > a:hover,
.whb-general-header .wd-header-compare > a:hover,
.whb-general-header .wd-header-wishlist > a:hover {
	border-color: var(--sh-brd-hover) !important;
	color: var(--sh-ink) !important;
}

/* Кошик — темна кнопка */
.whb-general-header .wd-header-cart > a {
	height: 38px !important;
	padding: 0 16px !important;
	border: 0 !important;
	border-radius: var(--sh-r-md) !important;
	background: var(--sh-ink) !important;
	color: #fff !important;
	font-weight: 700 !important;
	transition: background .15s !important;
}

.whb-general-header .wd-header-cart > a:hover {
	background: var(--sh-accent) !important;
}

.whb-general-header .wd-header-cart .wd-cart-number {
	background: var(--sh-accent) !important;
	color: #fff !important;
}

/* Панель адміністратора не має перекривати липку шапку. */


/* Плагін htpc-menu-flat фарбує пункти селектором вищої специфічності,
   ніж наш вище. Повторюємо його рівень, щоб віддати меню колір з макета. */
body .whb-general-header .wd-nav.wd-nav-main > li > a .nav-link-text {
	color: var(--sh-text) !important;
}

body .whb-general-header .wd-nav.wd-nav-main > li > a:hover .nav-link-text,
body .whb-general-header .wd-nav.wd-nav-main > li.current-menu-item > a .nav-link-text,
body .whb-general-header .wd-nav.wd-nav-main > li:first-child > a .nav-link-text {
	color: var(--sh-ink) !important;
}

/* ==========================================================================
   7. Мега-меню «Каталог»
   Розмітку дає плагін (.hcm), тут лише оформлення під макет.
   ========================================================================== */

.hcm {
	grid-template-columns: 268px 1fr !important;
	background: var(--sh-surface) !important;
	border: 1px solid var(--sh-brd) !important;
	border-top: 0 !important;
	border-radius: 0 0 var(--sh-r-xl) var(--sh-r-xl) !important;
	box-shadow: var(--sh-shadow-mega) !important;
	color: var(--sh-ink) !important;
}

/* --- ліва колонка --- */

.hcm-rail {
	background: var(--sh-surface) !important;
	border-right: 1px solid var(--sh-brd-faint) !important;
	padding: 18px 20px 20px 22px !important;
}

.hcm-cat {
	gap: 12px !important;
	padding: 8px 12px !important;
	border-radius: var(--sh-r-sm) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--sh-text) !important;
	box-shadow: none !important;
	transition: background .15s, color .15s !important;
}

.hcm-cat:hover {
	background: var(--sh-bg) !important;
	color: var(--sh-ink) !important;
}

.hcm-cat svg {
	opacity: 1 !important;
	color: var(--sh-accent) !important;
}

.hcm-cat em {
	font-family: var(--sh-font-mono) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: var(--sh-faint) !important;
}

.hcm-cat.is-active {
	background: var(--sh-ink) !important;
	color: #fff !important;
	font-weight: 700 !important;
	box-shadow: none !important;
}

.hcm-cat.is-active svg,
.hcm-cat.is-active em {
	color: rgba(255, 255, 255, .6) !important;
}

/* --- промо «Підбір ПК» --- */

.hcm-promo {
	margin-top: 10px !important;
	padding: 11px 12px !important;
	border-radius: 11px !important;
	background: var(--sh-promo-bg) !important;
	border: 1px solid var(--sh-promo-brd) !important;
}

.hcm-promo:hover {
	background: #dfeafd !important;
	border-color: var(--sh-accent) !important;
}

.hcm-promo svg {
	color: var(--sh-accent) !important;
}

.hcm-promo b {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--sh-ink) !important;
}

.hcm-promo i {
	font-size: 11.5px !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	color: #5a6580 !important;
}

/* --- права частина --- */

.hcm-panes {
	padding: 18px 22px 20px !important;
}

.hcm-head {
	margin-bottom: 14px !important;
}

.hcm-head > span {
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: -.01em !important;
	color: var(--sh-ink) !important;
}

.hcm-head a {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--sh-accent) !important;
}

.hcm-links a {
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--sh-text) !important;
	padding: 4px 0 !important;
}

.hcm-links a:hover {
	color: var(--sh-accent) !important;
}

.hcm-links a i {
	font-family: var(--sh-font-mono) !important;
	font-style: normal !important;
	font-size: 11px !important;
	color: var(--sh-faint) !important;
	margin-left: 8px !important;
}

/* Підпис групи — моноширинним капсом, як заголовки колонок у макеті */
.hcm-chips-l {
	font-family: var(--sh-font-mono) !important;
	font-size: 10.5px !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: var(--sh-faint) !important;
	margin-bottom: 10px !important;
}

.hcm-chip {
	border-radius: var(--sh-r-pill) !important;
	border: 1px solid var(--sh-brd) !important;
	background: var(--sh-surface) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--sh-text) !important;
	padding: 6px 12px !important;
	transition: border-color .15s, color .15s !important;
}

.hcm-chip:hover {
	border-color: var(--sh-ink) !important;
	color: var(--sh-ink) !important;
}

/* Правила плагіна мають ту саму специфічність, але друкуються нижче,
   тому для кольорів тексту потрібен додатковий рівень (.hcm перед селектором). */

.hcm .hcm-cat {
	color: var(--sh-text) !important;
}

.hcm .hcm-cat:hover {
	color: var(--sh-ink) !important;
}

.hcm .hcm-cat.is-active {
	color: #fff !important;
}

.hcm .hcm-cat.is-active svg,
.hcm .hcm-cat.is-active em {
	color: rgba(255, 255, 255, .6) !important;
}

.hcm .hcm-links a {
	color: var(--sh-text) !important;
}

.hcm .hcm-links a:hover {
	color: var(--sh-accent) !important;
}

.hcm .hcm-links a i {
	color: var(--sh-faint) !important;
}

.hcm .hcm-chip {
	color: var(--sh-text) !important;
}

.hcm .hcm-chip:hover {
	color: var(--sh-ink) !important;
}

.hcm .hcm-head a {
	color: var(--sh-accent) !important;
}

.hcm .hcm-head > span {
	color: var(--sh-ink) !important;
}

.hcm .hcm-promo b {
	color: var(--sh-ink) !important;
}

.hcm .hcm-promo svg {
	color: var(--sh-accent) !important;
}

/* Список категорій «Периферії» — в одну колонку. */
.hcm .hcm-links.sh-links-1col {
	grid-template-columns: 1fr !important;
	gap: 2px !important;
}

/* Три колонки популярних фільтрів у мега-меню (плагін sharit-megamenu).
   Старі списки плагіна htpc ховаємо — вони дублюють ці колонки. */

.hcm-pane .hcm-links:not(.sh-links-1col),
.hcm-pane .hcm-chips-l,
.hcm-pane .hcm-chips {
	display: none !important;
}

.sh-mm-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.sh-mm-col {
	display: flex;
	flex-direction: column;
	gap: 11px;
	min-width: 0;
}

.sh-mm-h {
	font-family: var(--sh-font-mono);
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sh-faint);
}

.hcm .sh-mm-col a {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--sh-text) !important;
	line-height: 1.3;
}

.hcm .sh-mm-col a:hover {
	color: var(--sh-accent) !important;
}

.hcm .sh-mm-col a i {
	font-family: var(--sh-font-mono);
	font-style: normal;
	font-size: 11px;
	font-weight: 500;
	color: var(--sh-faint) !important;
}

@media (max-width: 1024px) {
	.sh-mm-cols {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   8. Мобільна панель меню
   ========================================================================== */

.mobile-nav {
	width: 316px !important;
}

/* Пошук — компактне поле замість смуги на 70px */
.mobile-nav .wd-search-form {
	padding: 14px 16px 6px !important;
}

.mobile-nav .wd-search-form form {
	position: relative;
}

.mobile-nav .wd-search-form input[type="text"],
.mobile-nav .wd-search-form input[type="search"] {
	height: 42px !important;
	padding: 0 14px !important;
	border: 1px solid var(--sh-brd) !important;
	border-radius: var(--sh-r-lg) !important;
	background: #f7f8fa !important;
	font-family: var(--sh-font) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--sh-ink) !important;
}

/* Пункти першого рівня */
.mobile-nav .wd-nav-mobile > li > a {
	padding: 13px 12px !important;
	margin: 0 8px !important;
	border-radius: var(--sh-r-lg) !important;
	font-family: var(--sh-font) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--sh-text) !important;
	border-bottom: 0 !important;
}

/* background-color, а не background: скорочена властивість скидає
   і background-image, через що іконка зникала при наведенні. */
.mobile-nav .wd-nav-mobile > li > a:hover,
.mobile-nav .wd-nav-mobile > li.current-menu-item > a {
	background-color: var(--sh-bg) !important;
	color: var(--sh-ink) !important;
}

/* Виділяємо саме категорії товарів — вони головні в навігації.
   Сторінки (Контакти, Викуп техніки тощо) лишаються звичайними. */
.mobile-nav .wd-nav-mobile > li > a[href*="/product-category/"],
.mobile-nav .wd-nav-mobile > li > a[href$="/shop/"] {
	font-weight: 700 !important;
	color: var(--sh-ink) !important;
}

/* Підпункти */
.mobile-nav .wd-nav-mobile > li > ul > li > a {
	padding: 10px 12px 10px 24px !important;
	margin: 0 8px !important;
	border-radius: var(--sh-r-sm) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--sh-text) !important;
	text-transform: none !important;
	border-bottom: 0 !important;
}

.mobile-nav .wd-nav-mobile > li > ul > li > a:hover {
	background-color: var(--sh-bg) !important;
	color: var(--sh-accent) !important;
}

/* Стрілка розкриття */
.mobile-nav .wd-nav-opener {
	color: var(--sh-faint) !important;
}

/* Іконки категорій у мобільному меню — ті самі, що в мега-меню.
   Через background-image, щоб не чіпати розмітку меню. */

.mobile-nav .wd-nav-mobile > li > a[href*="/product-category/"],
.mobile-nav .wd-nav-mobile > li > a[href$="/shop/"] {
	padding-left: 42px !important;
	background-repeat: no-repeat;
	background-position: 13px center;
	background-size: 20px 20px;
}

.mobile-nav .wd-nav-mobile > li > a[href*="personalni-kompyutery"] {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%232f6bf3'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'6'%20y%3D'2.5'%20width%3D'12'%20height%3D'19'%20rx%3D'1.5'%2F%3E%3Cpath%20d%3D'M9%206.5h6M9%209.5h6'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'17'%20r%3D'1.3'%2F%3E%3C%2Fsvg%3E");
}

.mobile-nav .wd-nav-mobile > li > a[href*="noutbuky"] {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%232f6bf3'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'4'%20y%3D'5'%20width%3D'16'%20height%3D'10.5'%20rx%3D'1.5'%2F%3E%3Cpath%20d%3D'M2%2019h20'%2F%3E%3C%2Fsvg%3E");
}

.mobile-nav .wd-nav-mobile > li > a[href*="monitory"] {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%232f6bf3'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'4'%20width%3D'18'%20height%3D'12'%20rx%3D'1.5'%2F%3E%3Cpath%20d%3D'M9%2020h6M12%2016v4'%2F%3E%3C%2Fsvg%3E");
}

.mobile-nav .wd-nav-mobile > li > a[href$="/shop/"] {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%232f6bf3'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2'%20y%3D'6'%20width%3D'20'%20height%3D'12'%20rx%3D'2.5'%2F%3E%3Cpath%20d%3D'M6%2010h.01M10%2010h.01M14%2010h.01M18%2010h.01M8%2014h8'%2F%3E%3C%2Fsvg%3E");
}

/* ==========================================================================
   9. Пагінація, хлібні крихти, порожній стан
   У макеті їх немає — зібрані з токенів дизайн-системи.
   ========================================================================== */

/* --- пагінація --- */

.wd-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 34px;
}

.wd-pagination .page-numbers li {
	margin: 0;
}

.wd-pagination a.page-numbers,
.wd-pagination span.page-numbers {
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-width: var(--sh-control-h) !important;
	width: auto !important;
	height: var(--sh-control-h) !important;
	line-height: var(--sh-control-h) !important;
	padding: 0 12px !important;
	border: 1px solid var(--sh-brd) !important;
	border-radius: var(--sh-r-md) !important;
	background: var(--sh-surface) !important;
	font-family: var(--sh-font-mono);
	font-size: 13px !important;
	font-weight: 500;
	color: var(--sh-text) !important;
	transition: border-color .15s, color .15s !important;
}

.wd-pagination a.page-numbers:hover {
	border-color: var(--sh-ink) !important;
	color: var(--sh-ink) !important;
	background: var(--sh-surface) !important;
}

.wd-pagination span.page-numbers.current {
	background: var(--sh-ink) !important;
	border-color: var(--sh-ink) !important;
	color: #fff !important;
	font-weight: 700;
}

.wd-pagination .page-numbers.dots {
	border-color: transparent !important;
	background: none !important;
}

/* --- хлібні крихти --- */

.woocommerce-breadcrumb,
.wd-breadcrumbs {
	font-family: var(--sh-font) !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	color: var(--sh-muted) !important;
}

.woocommerce-breadcrumb a,
.wd-breadcrumbs a {
	color: var(--sh-muted) !important;
	transition: color .15s;
}

.woocommerce-breadcrumb a:hover,
.wd-breadcrumbs a:hover {
	color: var(--sh-accent) !important;
}

/* --- порожній стан --- */

p.htpc-noresults {
	display: block;
	margin: 24px 0 0;
	padding: 44px 24px;
	border: 1px solid var(--sh-brd-soft);
	border-radius: var(--sh-r-card);
	background: var(--sh-surface);
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--sh-text) !important;
}

/* ==========================================================================
   10. Плитки категорій і шапка сторінки каталогу
   ========================================================================== */

/* Смуга була чорною (#0a0a0a) — у макеті світла */
.wd-page-title,
.wd-page-title .wd-page-title-bg {
	background-color: var(--sh-bg) !important;
	background-image: none !important;
}

.wd-page-title .entry-title {
	font-size: 40px !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	letter-spacing: -.035em !important;
	color: var(--sh-ink) !important;
	text-wrap: pretty;
}

/* Заголовок ліворуч, як у макеті (тема центрує) */
.wd-page-title .wd-title-wrapp {
	text-align: left !important;
	justify-content: flex-start !important;
}

.wd-page-title .entry-title {
	text-align: left !important;
	/* 720px змушував довгий SEO-заголовок ламатись на два рядки.
	   На повній ширині він вкладається в один і блок стає компактнішим. */
	max-width: 100%;
}

.wd-page-title .wd-back-btn,
.wd-page-title .wd-btn-show-cat,
.wd-page-title .wd-btn-show-cat a {
	color: var(--sh-text) !important;
}

/* Плитки перед заголовком, як у макеті */
.wd-page-title > .container {
	display: flex;
	flex-direction: column;
	align-items: stretch !important;
	gap: 22px;
}

.wd-page-title .wd-title-wrapp {
	width: 100% !important;
	margin: 0 !important;
}

.wd-page-title .wd-nav-product-cat {
	order: -1;
}

/* --- сітка плиток --- */

.wd-nav-product-cat {
	display: grid !important;
	grid-template-columns: repeat(8, 1fr) !important;
	gap: 10px !important;
	margin: 0 !important;
}

.wd-nav-product-cat > li {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

.wd-nav-product-cat > li > a {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 100%;
	min-height: 130px !important;
	padding: 20px 12px !important;
	/* Рамка прозора, щоб при наведенні вона зʼявлялась без стрибка розмірів.
	   !important потрібен: у теми є .wd-nav > li > a тієї ж специфічності,
	   і її інлайнові стилі друкуються нижче по документу. */
	border: 1px solid transparent !important;
	border-radius: 18px !important;
	background: var(--sh-surface) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	text-align: center;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--sh-ink) !important;
	transition: border-color .15s, background .15s !important;
}

.wd-nav-product-cat > li > a:hover {
	border-color: var(--sh-ink) !important;
	background: var(--sh-surface) !important;
}

/* Іконка. mask дає колір через background-color — на активній плитці стане білою. */
.wd-nav-product-cat > li > a::before {
	content: "";
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	background-color: var(--sh-accent);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Активна категорія */
.wd-nav-product-cat > li.wd-active > a {
	background: var(--sh-ink) !important;
	border-color: var(--sh-ink) !important;
	border-radius: 18px;
	color: #fff !important;
}

.wd-nav-product-cat > li.wd-active > a::before {
	background-color: #fff;
}

/* Лічильники в макеті на плитках не показані */
.wd-nav-product-cat .nav-link-count {
	display: none !important;
}

.wd-nav-product-cat > li.cat-item-16 > a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'4'%20y%3D'5'%20width%3D'16'%20height%3D'10.5'%20rx%3D'1.5'%2F%3E%3Cpath%20d%3D'M2%2019h20'%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'4'%20y%3D'5'%20width%3D'16'%20height%3D'10.5'%20rx%3D'1.5'%2F%3E%3Cpath%20d%3D'M2%2019h20'%2F%3E%3C%2Fsvg%3E");
}

.wd-nav-product-cat > li.cat-item-18 > a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'4'%20width%3D'18'%20height%3D'12'%20rx%3D'1.5'%2F%3E%3Cpath%20d%3D'M9%2020h6M12%2016v4'%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'4'%20width%3D'18'%20height%3D'12'%20rx%3D'1.5'%2F%3E%3Cpath%20d%3D'M9%2020h6M12%2016v4'%2F%3E%3C%2Fsvg%3E");
}

.wd-nav-product-cat > li.cat-item-26 > a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2'%20y%3D'6'%20width%3D'20'%20height%3D'12'%20rx%3D'2.5'%2F%3E%3Cpath%20d%3D'M6%2010h.01M10%2010h.01M14%2010h.01M18%2010h.01M8%2014h8'%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2'%20y%3D'6'%20width%3D'20'%20height%3D'12'%20rx%3D'2.5'%2F%3E%3Cpath%20d%3D'M6%2010h.01M10%2010h.01M14%2010h.01M18%2010h.01M8%2014h8'%2F%3E%3C%2Fsvg%3E");
}

.wd-nav-product-cat > li.cat-item-27 > a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'8'%20y%3D'2.5'%20width%3D'8'%20height%3D'19'%20rx%3D'4'%2F%3E%3Cpath%20d%3D'M12%206.5v3'%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'8'%20y%3D'2.5'%20width%3D'8'%20height%3D'19'%20rx%3D'4'%2F%3E%3Cpath%20d%3D'M12%206.5v3'%2F%3E%3C%2Fsvg%3E");
}

.wd-nav-product-cat > li.cat-item-28 > a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2014v-2a8%208%200%200%201%2016%200v2'%2F%3E%3Crect%20x%3D'2.5'%20y%3D'13.5'%20width%3D'4.5'%20height%3D'7.5'%20rx%3D'2'%2F%3E%3Crect%20x%3D'17'%20y%3D'13.5'%20width%3D'4.5'%20height%3D'7.5'%20rx%3D'2'%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2014v-2a8%208%200%200%201%2016%200v2'%2F%3E%3Crect%20x%3D'2.5'%20y%3D'13.5'%20width%3D'4.5'%20height%3D'7.5'%20rx%3D'2'%2F%3E%3Crect%20x%3D'17'%20y%3D'13.5'%20width%3D'4.5'%20height%3D'7.5'%20rx%3D'2'%2F%3E%3C%2Fsvg%3E");
}

.wd-nav-product-cat > li.cat-item-70 > a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2'%20y%3D'7'%20width%3D'20'%20height%3D'10'%20rx%3D'2.5'%2F%3E%3Ccircle%20cx%3D'17'%20cy%3D'12'%20r%3D'1.2'%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2'%20y%3D'7'%20width%3D'20'%20height%3D'10'%20rx%3D'2.5'%2F%3E%3Ccircle%20cx%3D'17'%20cy%3D'12'%20r%3D'1.2'%2F%3E%3C%2Fsvg%3E");
}

.wd-nav-product-cat > li.cat-item-71 > a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'6'%20cy%3D'12'%20r%3D'1.7'%20fill%3D'%23000'%20stroke%3D'none'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'1.7'%20fill%3D'%23000'%20stroke%3D'none'%2F%3E%3Ccircle%20cx%3D'18'%20cy%3D'12'%20r%3D'1.7'%20fill%3D'%23000'%20stroke%3D'none'%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'6'%20cy%3D'12'%20r%3D'1.7'%20fill%3D'%23000'%20stroke%3D'none'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'1.7'%20fill%3D'%23000'%20stroke%3D'none'%2F%3E%3Ccircle%20cx%3D'18'%20cy%3D'12'%20r%3D'1.7'%20fill%3D'%23000'%20stroke%3D'none'%2F%3E%3C%2Fsvg%3E");
}

.wd-nav-product-cat > li.cat-item-341 > a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'6'%20y%3D'2.5'%20width%3D'12'%20height%3D'19'%20rx%3D'1.5'%2F%3E%3Cpath%20d%3D'M9%206.5h6M9%209.5h6'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'17'%20r%3D'1.3'%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'6'%20y%3D'2.5'%20width%3D'12'%20height%3D'19'%20rx%3D'1.5'%2F%3E%3Cpath%20d%3D'M9%206.5h6M9%209.5h6'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'17'%20r%3D'1.3'%2F%3E%3C%2Fsvg%3E");
}

@media (max-width: 1200px) {
	.wd-nav-product-cat {
		grid-template-columns: repeat(4, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.wd-nav-product-cat {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	.wd-page-title .entry-title {
		font-size: 25px !important;
	}
}

/* Тема малює під підписом зелену смужку 2px кольором --wd-primary-color
   (клас wd-style-underline на списку). У макеті її немає — прибираємо,
   стан плитки показує фон і рамка. */
.wd-nav-product-cat .nav-link-text::after,
.wd-nav-product-cat > li > a .nav-link-text::after {
	content: none !important;
	display: none !important;
}

/* ==========================================================================
   11. Фон сайту і компактніша шапка каталогу
   ========================================================================== */

/* Сірий фон сторінки з макета — білими лишаються картки та блоки контенту */
html body,
.wd-page-wrapper,
.wd-page-content {
	background-color: var(--sh-bg) !important;
}

/* Шапка каталогу: було 60px згори і знизу, разом 304px */
.wd-page-title {
	padding: 26px 0 16px !important;
}

.wd-page-title > .container {
	gap: 18px !important;
}

.wd-page-title .entry-title {
	line-height: 1.05 !important;
}

/* Крихти лежать нижче блока — прибираємо зайвий відступ між ними */
.wd-page-content > .container > .woocommerce-breadcrumb,
.woocommerce-breadcrumb {
	margin-bottom: 10px !important;
}

@media (max-width: 768px) {
	.wd-page-title {
		padding: 18px 0 20px !important;
	}

	.wd-page-title > .container {
		gap: 14px !important;
	}
}

/* ==========================================================================
   12. Акцентний колір: зелений -> синій
   Woodmart тримає акцент у змінних, плагін htpc додатково зашив темно-зелений
   літералом з !important. Перекриваємо обидва джерела.
   ========================================================================== */

/* Старий блок прив'язки прибрано: кнопки теми тепер задаються один раз
   у html:root на початку файлу, разом з рештою токенів. */

/* --- літерали плагіна --- */

/* Ціни скрізь темні, як у макеті */
html body .woocommerce-Price-amount,
html body .woocommerce-Price-amount bdi,
html body .price .woocommerce-Price-amount,
html body .price bdi {
	color: var(--sh-ink) !important;
}

/* Ціна в кнопці кошика лишається білою */
html body .wd-header-cart .woocommerce-Price-amount,
html body .wd-header-cart .woocommerce-Price-amount bdi {
	color: #fff !important;
}

html body .wd-nav > li.current-menu-item > a,
html body .wd-nav > li.current-menu-item > a .nav-link-text {
	color: var(--sh-ink) !important;
}

html body .wd-nav.wd-nav-main > li:hover > a .nav-link-text {
	color: var(--sh-accent) !important;
}

html body li.htpc-cat > a {
	background: var(--sh-accent) !important;
}

html body .btn-accent,
html body a.btn.btn-accent,
html body .button.btn-accent,
html body .wp-block-woocommerce-product-filter-clear-button .wp-block-button__link {
	background-color: var(--sh-accent) !important;
	border-color: var(--sh-accent) !important;
}

html body .htpc-upsell a:hover,
html body .htpc-bonus-note a {
	color: var(--sh-accent) !important;
}

/* ==========================================================================
   13. Панель фільтрів: кнопки-випадайки (плагін sharit-filterbar)
   ========================================================================== */

.sh-fbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 4px;
}

.sh-fdd {
	position: relative;
}

.sh-fdd-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* Тема має власні стилі кнопок з !important — перебиваємо всі властивості */
	height: 44px !important;
	min-height: 0 !important;
	padding: 0 18px !important;
	border: 1px solid var(--sh-brd) !important;
	border-radius: var(--sh-btn-r-sm) !important;
	background: var(--sh-surface) !important;
	font-family: var(--sh-font) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--sh-ink) !important;
	cursor: pointer;
	white-space: nowrap;
	/* тема робить кнопки капсом */
	text-transform: none !important;
	letter-spacing: 0 !important;
	transition: border-color .15s, color .15s;
}

.sh-fdd-btn:hover,
.sh-fdd.is-open .sh-fdd-btn {
	border-color: var(--sh-ink) !important;
	color: var(--sh-ink) !important;
}

/* стрілка */
/* суцільний трикутник, як у макеті */
.sh-fdd-btn i {
	width: 0;
	height: 0;
	margin-left: 2px;
	border-left: 4.5px solid transparent;
	border-right: 4.5px solid transparent;
	border-top: 5px solid var(--sh-faint);
	transition: transform .2s;
}

.sh-fdd.is-open .sh-fdd-btn i {
	transform: rotate(180deg);
}

/* лічильник обраного */
.sh-fdd-btn em {
	font-family: var(--sh-font-mono);
	font-style: normal;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	background: var(--sh-accent);
	border-radius: 6px;
	padding: 1px 6px;
}

.sh-fdd.has-chosen .sh-fdd-btn {
	border-color: var(--sh-ink);
	color: var(--sh-ink);
}

/* --- випадайка --- */

.sh-fdd-pop {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 40;
	min-width: 240px;
	max-width: 320px;
	padding: 8px;
	background: var(--sh-surface);
	border: 1px solid var(--sh-brd);
	border-radius: 14px;
	box-shadow: var(--sh-shadow-pop);
}

.sh-fdd.is-open .sh-fdd-pop {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Показуємо 6 пунктів, далі прокрутка. Пошук лишається над списком. */
.sh-fdd-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 216px;
	overflow-y: auto;
}

/* Пункти не стискаються: інакше flex ужимає їх під max-height списку
   і довгі назви обрізаються. */
.sh-fdd-list .hfc-chip {
	flex: 0 0 auto;
}

.sh-fdd-list .hfc-chip[hidden] {
	display: none !important;
}

/* Усі значення вже у списку з прокруткою — кнопка «Ще N» від плагіна зайва.
   Вага селектора вища за загальне правило пункту нижче — інакше не переб’є. */
.sh-fdd-pop .hfc-chip.hfc-more-btn {
	display: none !important;
}

/* Значення поза «топом» плагін фарбує синім. У списку вони рівноправні. */
.sh-fdd-pop .hfc-chip.hfc-more,
.sh-fdd-pop .hfc-chip.hfc-more .hfc-v {
	color: var(--sh-ink) !important;
}

/* Скрипт додає пошук, рахуючи і приховану кнопку «Ще N». Якщо реальних
   значень 6 або менше — список не прокручується, пошук ні до чого. */
.sh-fdd-pop:not(:has(.sh-fdd-list > a.hfc-chip:nth-of-type(7))) .sh-fdd-search {
	display: none;
}

.sh-fdd-search input {
	width: 100%;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--sh-brd);
	border-radius: 9px;
	background: var(--sh-surface);
	font-family: var(--sh-font);
	font-size: 13.5px;
	color: var(--sh-ink);
}

.sh-fdd-search input:focus {
	outline: 0;
	border-color: var(--sh-accent);
}

.sh-fdd-empty {
	padding: 6px 10px 2px;
	font-size: 13px;
	color: var(--sh-muted);
}

/* пункти всередині — рядками з чекбоксом, а не пігулками */
.sh-fdd-pop .hfc-chip {
	display: flex !important;
	align-items: flex-start;
	height: auto !important;
	gap: 10px;
	width: 100%;
	min-height: 0 !important;
	padding: 8px 10px !important;
	line-height: 1.35 !important;
	border: 0 !important;
	border-radius: 9px !important;
	background: transparent !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--sh-ink) !important;
	white-space: normal;
}

.sh-fdd-pop .hfc-chip:hover {
	background: var(--sh-bg) !important;
	color: var(--sh-ink) !important;
}

/* квадратик-чекбокс */
.sh-fdd-pop .hfc-chip::before {
	content: "";
	flex-shrink: 0;
	margin-top: 1px;
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--sh-brd);
	border-radius: 4px;
	background: var(--sh-surface);
}

.sh-fdd-pop .hfc-chip.on::before {
	border-color: var(--sh-accent);
	background: var(--sh-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E") no-repeat center / 11px 11px;
}

/* Довга назва переноситься повністю, лічильник не стискається. */
.sh-fdd-pop .hfc-chip .hfc-v {
	display: block !important;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 !important;
	background: none !important;
}

.sh-fdd-pop .hfc-chip .hfc-n {
	flex-shrink: 0;
	margin-left: auto;
	padding: 0 !important;
	background: none !important;
	font-family: var(--sh-font-mono) !important;
	font-size: 11.5px !important;
	color: var(--sh-faint) !important;
}

/* --- сортування праворуч --- */

.sh-fbar-sort {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.sh-fbar-sort::before {
	content: "Сортувати:";
	font-size: 13.5px;
	font-weight: 500;
	color: var(--sh-muted);
	white-space: nowrap;
}

/* --- «Більше фільтрів» лише на мобільній --- */

@media (min-width: 1025px) {
	/* Без !important, але з достатньою вагою: інакше страхувальна анімація
	   нижче не змогла б показати кнопку. */
	.htpc-filter-chips .hfc-morebtn {
		display: none;
	}

	.hfc-toprow {
		margin: 0 !important;
		padding: 0 !important;
		border-bottom: 0 !important;
	}
}

@media (max-width: 1024px) {
	/* Ховаємо лише випадайки. Сортування має лишитись поруч
	   з «Більше фільтрів», інакше на мобільній його не буде взагалі. */
	.sh-fbar .sh-fdd {
		display: none !important;
	}

	.htpc-filter-chips {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
	}

	.hfc-toprow {
		flex: 0 0 auto;
		margin: 0 !important;
		padding: 0 !important;
		border-bottom: 0 !important;
	}

	.sh-fbar {
		flex: 1 1 auto;
		margin: 0;
		min-width: 0;
	}

	.sh-fbar-sort {
		margin-left: auto;
	}

	.sh-fbar-sort::before {
		display: none;
	}

	.hfc-row.hfc-active {
		flex: 1 0 100%;
	}
}

/* «ЩЕ N» всередині випадайки — як звичайне посилання */
.sh-fdd-pop .hfc-chip.hfc-more,
.sh-fdd-pop .hfc-chip:not(.hfc-cnt) {
	color: var(--sh-accent) !important;
	font-weight: 700 !important;
}

.sh-fdd-pop .hfc-chip:not(.hfc-cnt)::before {
	display: none;
}

/* Сортування: підпис сірий, кнопка з темним жирним текстом */
.sh-fbar-sort::before {
	font-size: 14px;
}

.sh-fbar-sort .hfc-sortbtn {
	height: 44px !important;
	padding: 0 18px !important;
	border-radius: var(--sh-btn-r-sm) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--sh-ink) !important;
}

/* На мобільній Woodmart перетворює список категорій на висувну панель
   і додає їй темну підкладку rgba(0,0,0,.4) — через неї плитки лежали
   на сірому прямокутнику. Прибираємо підкладку мобільної панелі. */
@media (max-width: 1024px) {
	.wd-nav-product-cat,
	.wd-nav-product-cat.wd-mobile-accordion {
		background: transparent !important;
		padding: 0 !important;
		box-shadow: none !important;
	}
}

/* Кнопка «Категорії» зайва: список категорій тепер завжди видно сіткою.
   До того ж її текст лишався світлим і зливався зі світлим фоном. */
.wd-page-title .wd-btn-show-cat {
	display: none !important;
}

/* Розрив між шапкою каталогу і крихтами був 40px — це padding-top
   у main.wd-content-layout. Прибираємо його на сторінках каталогу,
   де вище вже стоїть блок з плитками. */
body.archive .wd-content-layout,
body.post-type-archive-product .wd-content-layout,
body.woocommerce-shop .wd-content-layout {
	padding-top: 12px !important;
}

body.archive .woocommerce-breadcrumb,
body.post-type-archive-product .woocommerce-breadcrumb,
body.woocommerce-shop .woocommerce-breadcrumb {
	margin-bottom: 12px !important;
}

@media (max-width: 768px) {
	.wd-page-title {
		padding: 18px 0 12px !important;
	}

	body.archive .wd-content-layout {
		padding-top: 8px !important;
	}
}

/* Блок з крихтами мав 48px висоти при 20px самих крихт — зайве повітря
   перед панеллю фільтрів. */
body.archive .wd-shop-tools,
body.post-type-archive-product .wd-shop-tools,
body.woocommerce-shop .wd-shop-tools {
	min-height: 0 !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

body.archive .woocommerce-breadcrumb,
body.post-type-archive-product .woocommerce-breadcrumb,
body.woocommerce-shop .woocommerce-breadcrumb {
	margin-bottom: 0 !important;
}

body.archive .htpc-filter-chips,
body.woocommerce-shop .htpc-filter-chips {
	margin-top: 14px !important;
}

/* Старий вигляд фільтрів (рядки пігулок) не має зʼявлятись ніде — навіть
   на мить під час завантаження. Панель збирає скрипт уже після розмітки,
   тому сирі рядки ховаємо стилями одразу: клас sh-fbar-on ставить PHP,
   отже правило діє ще до першого малювання. */
body.sh-fbar-on .htpc-filter-chips .hfc-row:not(.hfc-active) {
	display: none !important;
}

/* Сортування переїжджає в панель праворуч. Поки воно ще у верхньому рядку —
   ховаємо, інакше видно стрибок. Після переїзду селектор уже не діє. */
body.sh-fbar-on .htpc-filter-chips > .hfc-toprow .hfc-sortwrap {
	display: none !important;
}

/* Резервуємо висоту панелі, щоб сторінка не смикалась, коли зʼявляться кнопки.
   Значення дорівнюють висоті вже зібраної панелі. */
body.sh-fbar-on .htpc-filter-chips {
	min-height: 57px;
}

@media (min-width: 1025px) {
	body.sh-fbar-on .htpc-filter-chips {
		min-height: 61px;
	}
}

/* Рядок «Обрано:» показуємо тільки коли в ньому справді щось є. */
.htpc-filter-chips .hfc-row.hfc-active:not(:has(.hfc-chip)) {
	display: none !important;
}

/* --- Підвал картки: ціна і кнопки дій в один рядок, як у макеті --- */

.product-grid-item .sh-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}

.product-grid-item .sh-foot .price {
	margin: 0 !important;
	white-space: nowrap;
}

/* Обгортка кнопок над фото лишилась порожньою. */
.product-grid-item .wrapp-buttons {
	display: none !important;
}

.product-grid-item .sh-foot .wd-buttons {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.product-grid-item .sh-foot .wd-action-btn {
	display: flex !important;
	margin: 0 !important;
	order: 2;
}

.product-grid-item .sh-foot .wd-compare-btn {
	order: 1;
}

.product-grid-item .sh-foot .wd-add-btn {
	order: 3;
}

/* Швидкий перегляд не показуємо. Правило має іти після загального
   для .wd-action-btn — вага однакова, виграє нижнє. */
.product-grid-item .sh-foot .wd-quick-view-btn {
	display: none !important;
}

/* Сердечко живе в правому верхньому куті картки, а не в підвалі.
   Прив’язка — до .wd-product-wrapper, він position: relative. */
.product-grid-item .sh-foot .wd-wishlist-btn {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 3;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
}

.product-grid-item .sh-foot .wd-wishlist-btn > a,
.product-grid-item .sh-foot .wd-compare-btn > a {
	background: var(--sh-surface) !important;
	border: 1px solid var(--sh-brd) !important;
	box-shadow: 0 1px 3px rgba(20, 32, 58, .08);
}

.product-grid-item .sh-foot .wd-action-btn > a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: #eef1f7 !important;
	color: var(--sh-text) !important;
}

/* Лишається тільки іконка — підпис у макеті не показують. */
.product-grid-item .sh-foot .wd-action-text {
	display: none !important;
}

.product-grid-item .sh-foot .wd-action-icon::before {
	margin: 0 !important;
	font-size: 17px !important;
	width: 17px !important;
	height: 17px !important;
}

.product-grid-item .sh-foot .wd-action-btn > a:hover {
	background: var(--sh-ink) !important;
	color: #fff !important;
}


/* На телефоні мітка «Новинка» вище — тримаємо сердечко на одній лінії з нею.
   Блок стоїть у кінці файлу: те саме правило вище має однакову вагу. */
@media (max-width: 768px) {
	.product-grid-item .sh-foot .wd-wishlist-btn {
		top: 10px;
		right: 10px;
	}
}

/* На телефоні плитки категорій не переносяться в три ряди (це 410px висоти),
   а їдуть в один ряд свайпом. Видно 3,5 плитки — обрізана підказує, що є ще. */
@media (max-width: 768px) {
	.wd-nav-product-cat {
		display: flex !important;
		flex-wrap: nowrap !important;
		/* Тема центрує ряд. При переповненні це зсуває початок за лівий край,
		   і до перших плиток не догорнути. */
		justify-content: flex-start !important;
		gap: 10px !important;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.wd-nav-product-cat::-webkit-scrollbar {
		display: none;
	}

	.wd-nav-product-cat > li {
		flex: 0 0 calc((100% - 30px) / 3.5) !important;
		/* Без цього плитка не стає вужчою за найдовше слово («Персональні»)
		   і четверта не визирає з краю. */
		min-width: 0 !important;
	}

	/* Вужчі поля і трохи дрібніший підпис, щоб слово вміщалось у 90px. */
	.wd-nav-product-cat > li > a {
		padding: 16px 8px !important;
	}

	.wd-nav-product-cat .nav-link-text {
		font-size: 11px !important;
		line-height: 1.25 !important;
	}
}

/* --- Бічне меню телефона: блок акаунта, швидкі дії, картка підбору --- */

.sh-mm-head {
	position: relative;
	background: var(--sh-ink);
	color: #fff;
	padding: 26px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sh-mm-user {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sh-mm-ava {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: rgba(255, 255, 255, .12);
}

.sh-mm-txt {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	min-width: 0;
}

.sh-mm-txt b {
	font-size: 15px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sh-mm-txt i {
	font-style: normal;
	font-size: 12px;
	color: rgba(255, 255, 255, .6);
}

.sh-mm-btns {
	display: flex;
	gap: 8px;
}

.sh-mm-btn {
	flex: 1;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	font-size: 13px;
	font-weight: 700;
	color: #fff !important;
}

.sh-mm-fill {
	background: var(--sh-accent);
}

.sh-mm-ghost {
	border: 1px solid rgba(255, 255, 255, .25);
}

.sh-mm-acts {
	display: flex;
	align-items: center;
	padding: 14px 16px;
	border-bottom: 1px solid var(--sh-brd-faint);
}

.sh-mm-act {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 600;
	color: var(--sh-text) !important;
}

.sh-mm-act:hover {
	color: var(--sh-accent) !important;
}

/* «Підбір ПК» в кінці списку — не рядок, а картка, як у макеті. */
.mobile-nav li.sh-mm-promo > a {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start !important;
	gap: 3px;
	margin: 12px 12px 0 !important;
	padding: 14px !important;
	border-radius: 14px !important;
	background: var(--sh-promo-bg) !important;
	border: 1px solid #d9e2f7 !important;
	background-image: none !important;
}

.mobile-nav li.sh-mm-promo .nav-link-text {
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: var(--sh-ink) !important;
}

.sh-mm-promo-sub {
	font-size: 12px;
	font-weight: 500;
	color: #5a6580;
	line-height: 1.45;
}

/* Активний пункт лишався зеленим: плагін htpc-a11y фарбує саме .nav-link-text,
   а не саме посилання, тож колір посилання його не перекривав. */
.mobile-nav .wd-nav-mobile > li > a .nav-link-text {
	color: inherit !important;
}

/* Правило плагіна має п’ять класів і !important, тож переб’є його лише
   довший селектор. Звідси подвоєні класи контейнерів. */
html body .mobile-nav.wd-side-hidden .wd-nav-mobile.wd-nav > li.current-menu-item > a .nav-link-text {
	color: var(--sh-ink) !important;
}

/* Woodmart сам додає в мобільне меню пункт акаунта — «Вхід / Реєстрація»
   гостю і «Мій кабінет» тому, хто увійшов. Обидва дублюють блок акаунта
   зверху, тож ховаємо за класом, а не за текстом: назва залежить від мови
   й від того, чи людина увійшла. */
.mobile-nav .menu-item-account {
	display: none !important;
}

/* Рамка в 1px при масштабуванні сторінки стає дробовою (0.8px) і на закруглених
   кутах браузер її не домальовує — виходять світлі зазубрини. Внутрішня тінь
   повторює радіус точно і таких артефактів не дає. */
.mobile-nav .wd-search-form input[type="text"],
.mobile-nav .wd-search-form input[type="search"],
.mobile-nav .wd-search-form input.s {
	border: 0 !important;
	box-shadow: inset 0 0 0 1px var(--sh-brd) !important;
	background-clip: padding-box !important;
}

/* Тінь тема вішає на саму форму, а вона прямокутна і без скруглення.
   Навколо поля виходив сірий ореол, а всередині прямокутника лишалась біла
   підкладка — її кути й було видно за закругленнями поля. */
.mobile-nav .wd-search-form form.searchform {
	box-shadow: none !important;
}

/* Вихід — іконкою в правому верхньому куті блока акаунта. */
/* Кнопка вирівняна по верхньому краю разом з аватаром — обидва на
   однаковій відстані від межі блока. */
.sh-mm-exit {
	flex-shrink: 0;
	align-self: flex-start;
	margin-left: auto;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: rgba(255, 255, 255, .12);
	color: #fff !important;
}

.sh-mm-exit:hover {
	background: rgba(255, 255, 255, .22);
	color: #fff !important;
}

.sh-mm-bonus {
	color: rgba(255, 255, 255, .75) !important;
	border-bottom: 1px dashed rgba(255, 255, 255, .3);
}

.sh-mm-bonus:hover {
	color: #fff !important;
}

/* Картка підбору закріплена внизу панелі. Панель робимо колонкою, список
   забирає вільну висоту. Розкладку самого списку не чіпаємо: варто
   зробити його flex — і пункти теми ламаються. */
.mobile-nav {
	display: flex !important;
	flex-direction: column;
}

.mobile-nav > .sh-mm-head,
.mobile-nav > .wd-search-form,
.mobile-nav > .sh-mm-acts,
.mobile-nav > .sh-mm-foot {
	flex: 0 0 auto;
}

.mobile-nav > ul.mobile-pages-menu:not(.sh-mm-foot) {
	flex: 1 1 auto;
	overflow-y: auto;
}

.mobile-nav > .sh-mm-foot {
	margin: 0 !important;
	padding: 0 0 12px !important;
}

/* Іконки сторінкам меню — за тим самим принципом, що й категоріям. */
.mobile-nav .wd-nav-mobile > li > a[href*="/kontakty/"],
.mobile-nav .wd-nav-mobile > li > a[href*="/vykup-tehniky/"],
.mobile-nav .wd-nav-mobile > li > a[href*="/oplata-chastynamy/"] {
	padding-left: 42px !important;
	background-repeat: no-repeat;
	background-position: 13px center;
	background-size: 20px 20px;
}

.mobile-nav .wd-nav-mobile > li > a[href*="/kontakty/"] {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232f6bf3'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6.5%203.5h3l1.5%204-2%201.2a12%2012%200%200%200%206.3%206.3l1.2-2%204%201.5v3a2%202%200%200%201-2.2%202A17%2017%200%200%201%204.5%205.7%202%202%200%200%201%206.5%203.5Z'%2F%3E%3C%2Fsvg%3E");
}

.mobile-nav .wd-nav-mobile > li > a[href*="/vykup-tehniky/"] {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232f6bf3'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%208.5V7a2%202%200%200%200-2-2H5.5A2.5%202.5%200%200%200%203%207.5v9A2.5%202.5%200%200%200%205.5%2019H18a2%202%200%200%200%202-2v-1.5'%2F%3E%3Cpath%20d='M13.5%2012H21'%2F%3E%3Cpath%20d='M18%209.5%2020.5%2012%2018%2014.5'%2F%3E%3C%2Fsvg%3E");
}

.mobile-nav .wd-nav-mobile > li > a[href*="/oplata-chastynamy/"] {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232f6bf3'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2.5'%20y='5'%20width='19'%20height='14'%20rx='2.5'%2F%3E%3Cpath%20d='M2.5%2010h19'%2F%3E%3Cpath%20d='M6%2014.5h4'%2F%3E%3C%2Fsvg%3E");
}

/* Замість поля пошуку — рядок з трьох іконок. Саме поле лишається в панелі
   (воно робоче), але показується лише після натискання «Пошук». */
.mobile-nav .wd-search-form {
	display: none !important;
}

.mobile-nav.sh-search-on .wd-search-form {
	display: block !important;
}

.mobile-nav > .sh-mm-acts {
	padding: 16px 16px 14px !important;
}

/* === Картка товару: стан «додано в кошик» ==========================
   WooCommerce після AJAX-додавання вставляє поруч із кнопкою посилання
   «Переглянути кошик». У картці воно ламає ряд: кнопка стискається до 17px,
   а текст вилазить за межі картки. Прибираємо — індикатором лишається
   синя позначка .wd-check-icon на самій кнопці. */
.product-grid-item .sh-foot .wd-action-btn > a.added_to_cart {
	display: none !important;
}

/* Стан «уже в кошику / в обраному»: штатна галочка теми дуже дрібна,
   тому додатково фарбуємо саму іконку акцентом. */
.product-grid-item .wd-action-btn > a.added {
	background-color: #e4ecff !important;
}

.product-grid-item .wd-action-btn > a.added,
.product-grid-item .wd-action-btn > a.added .wd-action-icon,
.product-grid-item .wd-action-btn > a.added .wd-action-icon::before {
	color: var(--sh-accent) !important;
}

/* Порівняння — тим самим стовпчиком під сердечком.
   Відступи 15/10px = внутрішнє поле картки, тому кнопки стоять на однаковій
   відстані від країв, що й кошик знизу. */
.product-grid-item .sh-foot .wd-compare-btn {
	position: absolute;
	top: 59px;
	right: 15px;
	z-index: 3;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
}

@media (max-width: 768px) {
	.product-grid-item .sh-foot .wd-compare-btn {
		top: 54px;
		right: 10px;
	}
}

/* =====================================================================
   Сторінка товару за макетом «Картка товару.dc.html».
   Розмітку перебудовує плагін sharit-product, тут — тільки вигляд.
   ===================================================================== */

/* Дві колонки: галерея тягнеться, картки покупки — фіксовані 460px. */
@media (min-width: 1025px) {
	body.sh-pdp-on .product-image-summary-inner {
		grid-template-columns: minmax(0, 1fr) 460px !important;
		gap: 24px !important;
		align-items: start;
	}

	body.sh-pdp-on .product-image-summary-inner > .product-images,
	body.sh-pdp-on .product-image-summary-inner > .summary {
		grid-column: auto !important;
		max-width: none !important;
	}

	body.sh-pdp-on .sh-pdp-side {
		position: sticky;
		top: 20px;
	}
}

/* Шапка: назва ліворуч, код і кнопки праворуч. */
.sh-pdp-titlerow {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

body.sh-pdp-on .htpc-prod-head h1 {
	margin: 0;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.025em;
	max-width: 660px;
	text-wrap: pretty;
}

.sh-pdp-tools {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.sh-pdp-sku {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12.5px;
	color: var(--sh-muted);
	white-space: nowrap;
}

.sh-pdp-tools .wd-action-btn > a {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--sh-brd);
	border-radius: 11px;
	background: var(--sh-surface);
	color: var(--sh-text);
}

.sh-pdp-tools .wd-action-btn > a:hover {
	border-color: var(--sh-ink);
	color: var(--sh-ink);
}

.sh-pdp-tools .wd-action-text {
	display: none;
}

/* Картки правої колонки. */
.sh-pdp-side {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sh-pdp-card {
	background: var(--sh-surface);
	border: 1px solid var(--sh-brd-soft);
	border-radius: 20px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sh-pdp-h {
	font-size: 14px;
	font-weight: 800;
	color: var(--sh-ink);
}

.sh-pdp-note {
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--sh-muted);
}

/* Ціна, наявність, бонуси. */
body.sh-pdp-on .sh-pdp-buy p.price {
	margin: 0;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--sh-ink);
}

body.sh-pdp-on .sh-pdp-buy p.price del {
	font-size: 15px;
	font-weight: 600;
	color: var(--sh-faint);
	margin-right: 10px;
}

body.sh-pdp-on .sh-pdp-buy p.stock {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sh-ok);
}

body.sh-pdp-on .sh-pdp-buy p.stock::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

body.sh-pdp-on .sh-pdp-buy .htpc-bonus-note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 11px 13px;
	border: 1px solid #d9e2f7;
	border-radius: 12px;
	background: #eaf1fe;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sh-ink);
}

body.sh-pdp-on .sh-pdp-buy .htpc-bonus-note a {
	margin-left: auto;
	font-weight: 700;
	white-space: nowrap;
}

/* Ряд дій: кількість, «в кошик», «в 1 клік». */
.sh-pdp-acts {
	display: flex;
	align-items: center;
	gap: 10px;
}

body.sh-pdp-on .sh-pdp-acts form.cart {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	margin: 0;
}

body.sh-pdp-on .sh-pdp-acts .single_add_to_cart_button {
	flex: 1 1 auto;
	height: var(--sh-btn-h);
	padding: 0 16px;
	border: 0;
	border-radius: 13px;
	background: var(--sh-btn-bg);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

body.sh-pdp-on .sh-pdp-acts .single_add_to_cart_button::before {
	content: '';
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1.2 12.2a1 1 0 0 1-1 .8H8.2a1 1 0 0 1-1-.8L6 7Z'/%3E%3Cpath d='M9 7V5.5a3 3 0 0 1 6 0V7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1.2 12.2a1 1 0 0 1-1 .8H8.2a1 1 0 0 1-1-.8L6 7Z'/%3E%3Cpath d='M9 7V5.5a3 3 0 0 1 6 0V7'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.sh-pdp-on .sh-pdp-acts .single_add_to_cart_button:hover {
	background: var(--sh-accent);
}

body.sh-pdp-on .sh-qty {
	display: flex;
	align-items: center;
	gap: 2px;
	height: 52px;
	padding: 0 6px;
	border: 1px solid var(--sh-brd);
	border-radius: var(--sh-btn-r-sm);
	flex-shrink: 0;
}

.sh-qty-btn {
	width: 34px;
	height: 40px;
	border: 0;
	background: transparent;
	font-size: 18px;
	color: var(--sh-text);
	cursor: pointer;
}

body.sh-pdp-on .sh-qty input.qty {
	width: 34px;
	min-width: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	padding: 0;
}

body.sh-pdp-on .htpc-1c {
	position: relative;
	margin: 0;
	flex-shrink: 0;
}

body.sh-pdp-on .htpc-1c-open {
	height: 52px;
	padding: 0 20px;
	border: 0;
	border-radius: 13px;
	background: #f97316;
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	white-space: nowrap;
}

body.sh-pdp-on .htpc-1c-open:hover {
	background: #ea6a08;
}

body.sh-pdp-on .htpc-1c-form {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 6;
	width: 280px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	border: 1px solid var(--sh-brd);
	border-radius: 14px;
	background: var(--sh-surface);
	box-shadow: 0 12px 30px rgba(20, 32, 58, .14);
}

body.sh-pdp-on .htpc-1c-form[hidden] {
	display: none;
}

/* Розстрочка. */
.sh-pdp-parts {
	gap: 10px;
}

.sh-parts-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.sh-parts-sum {
	font-size: 13px;
	font-weight: 700;
	color: var(--sh-ok);
}

.sh-parts-how {
	margin-left: auto;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
}

.sh-parts-btn {
	height: 52px;
	border-radius: 13px;
	background: var(--sh-ok);
	color: #fff !important;
	font-size: 15px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.sh-parts-btn:hover {
	background: #128a3e;
}

/* Гарантії. */
.sh-pdp-trust {
	gap: 14px;
	padding: 18px 20px;
}

.sh-trust-row {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

.sh-trust-row .sh-ic {
	flex-shrink: 0;
	margin-top: 1px;
}

.sh-trust-txt {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--sh-ink);
}

/* Кнопка запитання. */
body.sh-pdp-on .htpc-ask {
	margin: 0;
}

body.sh-pdp-on .htpc-ask .ha-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 46px;
	border: 1px solid var(--sh-brd);
	border-radius: 13px;
	background: var(--sh-surface);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sh-ink);
}

body.sh-pdp-on .htpc-ask .ha-toggle:hover {
	border-color: var(--sh-ink);
}

/* Плитки характеристик під галереєю. */
.sh-pdp-specs {
	gap: 12px;
	padding: 18px 20px;
	margin-top: 14px;
}

.sh-specs-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.sh-spec-tile {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 12px 13px;
	border: 1px solid var(--sh-brd-soft);
	border-radius: 13px;
}

.sh-spec-k {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--sh-faint);
}

.sh-spec-v {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sh-ink);
}

@media (max-width: 768px) {
	.sh-specs-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sh-pdp-titlerow {
		flex-direction: column;
		gap: 12px;
	}

	.sh-pdp-acts {
		flex-wrap: wrap;
	}

	body.sh-pdp-on .htpc-1c,
	body.sh-pdp-on .htpc-1c-open {
		width: 100%;
	}

	body.sh-pdp-on .htpc-1c-form {
		position: static;
		width: auto;
		box-shadow: none;
	}
}

/* Галерея — біле полотно зі скругленням, як у макеті. */
body.sh-pdp-on .woocommerce-product-gallery {
	background: var(--sh-surface);
	border-radius: 16px;
	overflow: hidden;
}

/* Зайве в правій колонці: хлібні крихти дублюються згори, артикул уже
   в шапці, короткий опис повторює вкладку «Опис». */
body.sh-pdp-on .summary-inner > .single-breadcrumbs-wrapper nav.wd-breadcrumbs,
body.sh-pdp-on .summary-inner > .product_meta {
	display: none;
}

/* Вкладки та блок питань — картками, питання після вкладок. */
body.sh-pdp-on .product-tabs-inner {
	display: flex;
	flex-direction: column;
}

body.sh-pdp-on .product-tabs-inner > .woocommerce-tabs {
	order: 1;
}

body.sh-pdp-on .product-tabs-inner > .htpc-pfaq {
	order: 2;
	margin-top: 28px;
}

/* Вкладки — карткою, ряд ліворуч, активна підкреслена. */
body.sh-pdp-on .woocommerce-tabs {
	background: var(--sh-surface);
	border: 1px solid var(--sh-brd-soft);
	border-radius: 20px;
	padding: 0 26px 26px;
}

body.sh-pdp-on .woocommerce-tabs .wd-nav-tabs-wrapper {
	text-align: left;
	border-bottom: 1px solid var(--sh-brd-faint);
	margin-bottom: 22px;
}

body.sh-pdp-on .woocommerce-tabs ul.wd-nav-tabs {
	justify-content: flex-start;
	column-gap: 26px;
}

body.sh-pdp-on .woocommerce-tabs ul.wd-nav-tabs > li > a {
	padding: 16px 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--sh-muted);
}

body.sh-pdp-on .woocommerce-tabs ul.wd-nav-tabs > li.active > a {
	color: var(--sh-ink);
	box-shadow: inset 0 -2px 0 var(--sh-ink);
}

body.sh-pdp-on .woocommerce-tabs .wd-accordion-content {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--sh-text);
}

/* Питання та відповіді — картками на всю ширину. */
body.sh-pdp-on .htpc-pfaq {
	max-width: none;
	margin: 28px 0 40px;
	align-self: stretch;
}

body.sh-pdp-on .htpc-pfaq h3 {
	margin: 0 0 14px;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

body.sh-pdp-on .htpc-pfaq details {
	border: 1px solid var(--sh-brd-soft);
	border-radius: 16px;
	padding: 18px 20px;
	margin: 0 0 14px;
	background: var(--sh-surface);
}

body.sh-pdp-on .htpc-pfaq summary {
	font-size: 15px;
	font-weight: 800;
	color: var(--sh-ink);
}

/* Апсел і кнопки поділитися в правій колонці. */
body.sh-pdp-on .htpc-upsell {
	margin: 0;
	padding: 16px 20px;
	border: 1px solid var(--sh-brd-soft);
	border-radius: 20px;
	background: var(--sh-surface);
}

body.sh-pdp-on .sh-pdp-side > .wd-social-icons {
	margin: 0;
}

/* Бейдж над галереєю. */
body.sh-pdp-on .product-images {
	position: relative;
}

.sh-pdp-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 4;
	pointer-events: none;
}

/* Одне фото в галереї: тема вмикає «центрований» режим каруселі й зсуває
   стрічку на -100%. Коли слайд один, компенсуючий відступ не спрацьовує —
   і єдине фото їде за межу видимого. Для одного слайда зсув знімаємо. */
.woocommerce-product-gallery .wd-carousel[data-center_mode="yes"] .wd-carousel-wrap:not([style]):has(> .wd-carousel-item:first-child:last-child) {
	transform: none;
}

/* Більше повітря між шапкою сайту та хлібними крихтами товару. */
@media (min-width: 1025px) {
	body.single-product main.wd-content-layout {
    padding-top: 0;
  }

  body.single-product .htpc-prod-head {
    padding-top: 16px;
  }
}

/* Фото не повинно займати весь екран: на десктопі обмежуємо висоту так,
   щоб на найменшому моніторі разом із фото було видно ціну й кнопки.
   38vw — приблизно пропорція 4:3 від колонки, 52vh — стеля за висотою екрана. */
@media (min-width: 1025px) {
	/* Фото займає всю ширину колонки — так картка з фото і смуга
	   характеристик під нею завжди однакові й тягнуться за екраном. */
	body.sh-pdp-on .woocommerce-product-gallery {
		max-width: none;
	}

	body.sh-pdp-on .woocommerce-product-gallery img {
		width: 100%;
		object-fit: contain;
		/* На невисокому екрані фото стискається так, щоб разом зі смугою
		   характеристик уміститися в 95% висоти вікна. 175px — сама смуга
		   та відступ під фото. Ширина картки при цьому не міняється. */
		max-height: calc(95vh - 175px);
	}
}

/* Апсел і кнопки «поділіться» на сторінці товару не показуємо. */
body.sh-pdp-on .sh-pdp-side > .htpc-upsell,
body.sh-pdp-on .sh-pdp-side > .wd-social-icons {
	display: none;
}

/* Конфігурація з короткого опису — блоком на початку вкладки «Опис». */
body.sh-pdp-on .sh-pdp-config {
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid var(--sh-brd-soft);
	border-radius: 14px;
	background: #f8f9fc;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--sh-ink);
}

/* Тести ігор — карткою праворуч від опису. */
@media (min-width: 1025px) {
	body.sh-pdp-on #tab-description.sh-desc-split {
		display: grid;
		grid-template-columns: 1.35fr 1fr;
		gap: 40px;
		align-items: start;
	}

	/* Текст і конфігурація — ліворуч стовпчиком, картка FPS — праворуч зверху. */
	body.sh-pdp-on #tab-description.sh-desc-split > :not(.sh-fps) {
		grid-column: 1;
	}

	body.sh-pdp-on #tab-description.sh-desc-split > .sh-fps {
		grid-column: 2;
		grid-row: 1;
	}
}

.sh-fps {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 20px;
	border: 1px solid var(--sh-brd-soft);
	border-radius: 16px;
}

.sh-fps-h {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--sh-ink);
}

.sh-fps-rows {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.sh-fps-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sh-fps-top {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sh-text);
}

.sh-fps-val {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	color: var(--sh-ink);
	white-space: nowrap;
}

.sh-fps-bar {
	height: 6px;
	border-radius: 4px;
	background: #eef1f7;
	overflow: hidden;
}

.sh-fps-fill {
	display: block;
	height: 6px;
	border-radius: 4px;
	background: var(--sh-accent);
}

@media (max-width: 1024px) {
	.sh-fps {
		margin-top: 20px;
	}
}

/* Вкладки: жодних сторонніх ліній. Тема малює синю смужку над активною
   вкладкою (клас wd-style-underline-reverse) і роздільник над усім блоком —
   прибираємо обидві. Підкреслення лишається тільки знизу: і при наведенні,
   і на активній вкладці. */
body.sh-pdp-on .woocommerce-tabs ul.wd-nav-tabs .nav-link-text::after {
	content: none;
	display: none;
}

body.sh-pdp-on .product-tabs-wrapper {
  border-top: 0;
  padding-top: 16px;
}

/* Прибираємо зайвий провал між плитками характеристик і вкладками. */
body.sh-pdp-on .container:has(> .product-image-summary-wrap) {
  margin-bottom: 0 !important;
}

body.sh-pdp-on .woocommerce-tabs ul.wd-nav-tabs > li > a:hover {
	color: var(--sh-ink);
	box-shadow: inset 0 -2px 0 var(--sh-ink);
}

/* Підкреслення вкладок */
/* Тема перебиває колір і тінь посилання власними правилами (частина її CSS
   підвантажується окремим файлом уже після нашого), тому тут потрібен !important. */
body.sh-pdp-on .woocommerce-tabs ul.wd-nav-tabs > li > a {
	color: var(--sh-muted) !important;
	box-shadow: none !important;
}

body.sh-pdp-on .woocommerce-tabs ul.wd-nav-tabs > li.active > a,
body.sh-pdp-on .woocommerce-tabs ul.wd-nav-tabs > li > a:hover {
	color: var(--sh-ink) !important;
	box-shadow: inset 0 -2px 0 var(--sh-ink) !important;
}

/* Праву колонку збирає скрипт. Щоб відвідувач не побачив спершу «сиру»
   верстку теми, ховаємо її до готовності: клас sh-pdp-boot ставить сервер,
   sh-pdp-on додає скрипт, коли все зібрано.
   Страховка: якщо скрипт не спрацював, через 2.5 с анімація повертає
   видимість. На visibility анімації працюють — на відміну від display: none,
   де такий запобіжник свого часу не запустився. */
@keyframes sh-pdp-reveal {
	to {
		visibility: visible;
	}
}

body.sh-pdp-boot:not(.sh-pdp-on) .summary-inner {
	visibility: hidden;
	animation: sh-pdp-reveal 1ms 2.5s forwards;
}

/* Міняємо оформлення місцями: сам опис — карткою, а конфігурація
   з короткого опису — простим текстом під ним. */
body.sh-pdp-on #tab-description .wc-tab-inner {
	padding: 18px 20px;
	border: 1px solid var(--sh-brd-soft);
	border-radius: 14px;
	background: #f8f9fc;
}

body.sh-pdp-on .sh-pdp-config {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--sh-text);
}

/* «З цим товаром також беруть» — під блоком питань. Порядок у колонці:
   вкладки (1), питання (2), крос-сел (3). */
body.sh-pdp-on .product-tabs-inner > .htpc-cross {
	order: 3;
	margin-top: 28px;
}

/* Тема витягує ряд вкладок за межу картки (margin-top: -41px) — повертаємо
   всередину. Відступ згори дає власний padding посилань. */
body.sh-pdp-on .woocommerce-tabs .wd-nav-tabs-wrapper {
	margin-top: 0 !important;
}

/* Характеристики: до 5 рядків — один стовпчик, від 6 — рівно навпіл на два.
   Багатоколонковий режим заповнює зверху вниз: спершу лівий стовпчик. */
body.sh-pdp-on .woocommerce-tabs table.shop_attributes {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	border: 0;
}

body.sh-pdp-on .woocommerce-tabs table.shop_attributes tbody {
	display: block;
	column-gap: 44px;
}

@media (min-width: 1025px) {
	body.sh-pdp-on .woocommerce-tabs table.shop_attributes tbody:has(tr:nth-child(6)) {
		columns: 2;
	}

	/* Коротких списків не розтягуємо на всю ширину — лишаємо ліву половину. */
	body.sh-pdp-on .woocommerce-tabs table.shop_attributes tbody:not(:has(tr:nth-child(6))) {
		max-width: calc(50% - 22px);
	}
}

body.sh-pdp-on .woocommerce-tabs table.shop_attributes tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 11px 0;
	border-bottom: 1px solid #f1f3f7;
	break-inside: avoid;
}

body.sh-pdp-on .woocommerce-tabs table.shop_attributes th,
body.sh-pdp-on .woocommerce-tabs table.shop_attributes td {
	display: block;
	padding: 0;
	border: 0;
	font-size: 13.5px;
	line-height: 1.4;
}

body.sh-pdp-on .woocommerce-tabs table.shop_attributes th {
	color: var(--sh-muted);
	font-weight: 600;
	text-align: left;
}

body.sh-pdp-on .woocommerce-tabs table.shop_attributes td {
	color: var(--sh-ink);
	font-weight: 700;
	text-align: right;
}

body.sh-pdp-on .woocommerce-tabs table.shop_attributes td p {
	margin: 0;
}

body.sh-pdp-on .woocommerce-tabs table.shop_attributes td a {
	color: inherit;
	text-decoration: none;
}

body.sh-pdp-on .woocommerce-tabs table.shop_attributes td a:hover {
	color: var(--sh-accent);
}

/* Галерея: круглі стрілки з тінню, як у макеті. */
body.sh-pdp-on .wd-gallery-images {
	position: relative;
}

body.sh-pdp-on .wd-gallery-images .wd-btn-arrow {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--sh-brd-soft);
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 4px 14px rgba(20, 32, 58, .12);
	color: var(--sh-ink);
}

body.sh-pdp-on .wd-gallery-images .wd-btn-arrow:hover {
	background: #fff;
	border-color: var(--sh-brd-hover);
}

/* Одне фото — гортати нічого. */
body.sh-pdp-on .wd-gallery-images .wd-btn-arrow.wd-lock,
body.sh-pdp-on .wd-gallery-images .wd-btn-arrow.wd-disabled {
	display: none;
}

/* Крапки: скільки фото і яке зараз відкрите. */
.sh-gal-dots {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 7px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 4px 14px rgba(20, 32, 58, .10);
}

.sh-gal-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #c8cedb;
	cursor: pointer;
	transition: width .15s ease, background .15s ease;
}

.sh-gal-dot.sh-on {
	width: 20px;
	background: var(--sh-ink);
}

/* Тема виносить стрілки за межі фото (translateX(-30px)) — ставимо всередину,
   по 14px від краю, як у макеті. */
body.sh-pdp-on .wd-gallery-images .wd-btn-arrow {
	top: 50%;
	transform: translateY(-50%);
}

body.sh-pdp-on .wd-gallery-images .wd-prev {
	left: 14px;
	right: auto;
}

body.sh-pdp-on .wd-gallery-images .wd-next {
	right: 14px;
	left: auto;
}

/* Зсув стрілок тема задає власним transform — перебиваємо разом із висотою. */
body.sh-pdp-on .wd-gallery-images .wd-nav-arrows .wd-btn-arrow {
	top: 50% !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
}

/* Тема має власні стилі для button (40x42, сірий фон, без скруглення) —
   для крапок їх треба перебити повністю. */
.sh-gal-dots .sh-gal-dot {
	width: 8px !important;
	height: 8px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #c8cedb !important;
	box-shadow: none !important;
	line-height: 0 !important;
	flex: 0 0 auto;
}

.sh-gal-dots .sh-gal-dot:hover {
	background: var(--sh-muted) !important;
}

.sh-gal-dots .sh-gal-dot.sh-on {
	width: 20px !important;
	background: var(--sh-ink) !important;
}

/* ===== Відгуки за макетом ===== */
.sh-rev-wrap {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media (min-width: 1025px) {
	.sh-rev-wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: start;
	}

	.sh-rev-side {
		position: sticky;
		top: 20px;
	}
}

.sh-rev-main {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

/* Зведення: середня оцінка і розподіл. */
.sh-rev-sum {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 13px 16px;
	border: 1px solid var(--sh-brd-soft);
	border-radius: 14px;
	background: #fafbfd;
}

.sh-rev-avg {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
	padding-right: 18px;
	border-right: 1px solid var(--sh-brd-soft);
}

.sh-rev-num {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--sh-ink);
}

.sh-rev-stars {
	color: #f59e0b;
	font-size: 13px;
	letter-spacing: 1px;
}

.sh-rev-cnt {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--sh-muted);
	white-space: nowrap;
}

.sh-rev-bars {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
}

.sh-rev-bar {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sh-rev-bl {
	width: 26px;
	flex-shrink: 0;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11.5px;
	color: var(--sh-muted);
}

.sh-rev-track {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: var(--sh-brd-soft);
	overflow: hidden;
}

.sh-rev-fill {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: #f59e0b;
}

.sh-rev-bn {
	width: 18px;
	flex-shrink: 0;
	text-align: right;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11.5px;
	color: var(--sh-faint);
}

/* Сортування. */
.sh-rev-sort {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.sh-rev-sortl {
	margin-right: 2px;
	font-size: 12px;
	font-weight: 700;
	color: var(--sh-muted);
}

.sh-rev-sort .sh-rev-sortb {
	height: 34px !important;
	min-height: 0 !important;
	padding: 0 14px !important;
	border: 1px solid var(--sh-brd) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--sh-text) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
}

.sh-rev-sort .sh-rev-sortb.sh-on {
	border-color: var(--sh-ink) !important;
	background: var(--sh-ink) !important;
	color: #fff !important;
}

/* Картки відгуків. */
body.sh-pdp-on #tab-reviews .commentlist {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.sh-pdp-on #tab-reviews .commentlist > li {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--sh-brd-soft);
	border-radius: 14px;
	background: #fff;
}

body.sh-pdp-on #tab-reviews .comment_container {
	display: flex;
	gap: 11px;
	align-items: flex-start;
}

body.sh-pdp-on #tab-reviews .comment-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.sh-rev-ava {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 15px;
	font-weight: 800;
	color: #fff;
	background: var(--sh-accent);
}

body.sh-pdp-on #tab-reviews .commentlist > li:nth-child(5n+2) .sh-rev-ava { background: var(--sh-ok); }
body.sh-pdp-on #tab-reviews .commentlist > li:nth-child(5n+3) .sh-rev-ava { background: #f97316; }
body.sh-pdp-on #tab-reviews .commentlist > li:nth-child(5n+4) .sh-rev-ava { background: #7c3aed; }
body.sh-pdp-on #tab-reviews .commentlist > li:nth-child(5n+5) .sh-rev-ava { background: #0891b2; }

.sh-rev-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

body.sh-pdp-on #tab-reviews .sh-rev-head .woocommerce-review__author {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--sh-ink);
}

body.sh-pdp-on #tab-reviews .sh-rev-head .woocommerce-review__verified {
	padding: 2px 7px;
	border-radius: 999px;
	background: #eaf7ee;
	color: var(--sh-ok);
	font-size: 10.5px;
	font-weight: 700;
}

body.sh-pdp-on #tab-reviews .sh-rev-head .star-rating {
	margin-left: auto;
	float: none;
	font-size: 12px;
}

body.sh-pdp-on #tab-reviews .description {
	font-size: 13px;
	line-height: 1.55;
	color: var(--sh-text);
}

body.sh-pdp-on #tab-reviews .description p {
	margin: 0;
}

body.sh-pdp-on #tab-reviews p.meta {
	margin: 0;
}

.sh-rev-foot {
	display: flex;
	align-items: center;
	gap: 12px;
}

body.sh-pdp-on #tab-reviews .sh-rev-foot time {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11.5px;
	color: var(--sh-faint);
}

/* Сторінки. */
.sh-rev-pager {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.sh-rev-pager .sh-rev-page {
	min-width: 36px !important;
	height: 36px !important;
	min-height: 0 !important;
	padding: 0 10px !important;
	border: 1px solid var(--sh-brd) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--sh-text) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
}

.sh-rev-pager .sh-rev-page.sh-on {
	border-color: var(--sh-ink) !important;
	background: var(--sh-ink) !important;
	color: #fff !important;
}

.sh-rev-range {
	margin-left: 6px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11.5px;
	color: var(--sh-faint);
}

/* Форма відгуку — карткою праворуч. */
body.sh-pdp-on .sh-rev-side #review_form_wrapper {
	padding: 16px;
	border: 1px solid var(--sh-brd-soft);
	border-radius: 16px;
	background: #fafbfd;
}

body.sh-pdp-on .sh-rev-side #reply-title {
	display: block;
	margin: 0 0 11px;
	font-size: 14px;
	font-weight: 800;
	color: var(--sh-ink);
}

body.sh-pdp-on .sh-rev-side textarea {
	border: 1px solid var(--sh-brd);
	border-radius: var(--sh-field-r);
	background: #fff;
	font-size: 13.5px;
	line-height: 1.5;
}

body.sh-pdp-on .sh-rev-side .form-submit input[type="submit"],
body.sh-pdp-on .sh-rev-side .submit {
	width: 100%;
	height: 44px;
	border: 0;
	border-radius: var(--sh-field-r);
	background: var(--sh-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
}

body.sh-pdp-on .sh-rev-side .form-submit input[type="submit"]:hover {
	background: #0d1730;
}

/* Старий заголовок і порожня обгортка теми більше не потрібні. */
body.sh-pdp-on #tab-reviews:has(.sh-rev-wrap) .wd-reviews-heading,
body.sh-pdp-on #tab-reviews:has(.sh-rev-wrap) .wd-reviews-content {
	display: none;
}

/* Оцінка товару в шапці, поруч із кодом. */
.sh-pdp-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	white-space: nowrap;
}

.sh-pdp-rating .star-rating {
	float: none;
	margin: 0;
	font-size: 13px;
	color: #f59e0b;
}

.sh-pdp-rating .woocommerce-review-link {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sh-muted);
}

.sh-pdp-rating .woocommerce-review-link:hover {
	color: var(--sh-accent);
}

/* Плашка про бонус за відгук — над заголовком форми. Клас у неї той самий,
   що й у бонусів у картці покупки, тому те правило звужене до .sh-pdp-buy. */
body.sh-pdp-on .sh-rev-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 11px;
	padding: 11px 12px;
	border: 1px solid #dde5f6;
	border-radius: 12px;
	background: #eff4fe;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.55;
	color: var(--sh-text);
}

body.sh-pdp-on .sh-rev-note .sh-ic {
	flex-shrink: 0;
	margin-top: 2px;
}

body.sh-pdp-on .sh-rev-note b {
	color: var(--sh-accent);
	font-weight: 800;
	white-space: nowrap;
}

body.sh-pdp-on .sh-rev-note a {
	color: var(--sh-accent);
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.sh-pdp-on .sh-rev-note a:hover {
	color: var(--sh-ink);
}

/* Гостю замість форми — запрошення увійти. */
.sh-rev-guest {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.sh-rev-bonus {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 13px 14px;
	border: 1px solid #d7ead9;
	border-radius: 12px;
	background: #f2faf4;
}

.sh-rev-bonus-h {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 800;
	color: var(--sh-ink);
}

body.sh-pdp-on .sh-rev-bonus p {
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.55;
	color: var(--sh-text);
}

body.sh-pdp-on .sh-rev-login,
body.sh-pdp-on .sh-rev-reg {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 800;
}

body.sh-pdp-on .sh-rev-login {
	background: var(--sh-ink);
	color: #fff;
}

body.sh-pdp-on .sh-rev-login:hover {
	background: #0d1730;
	color: #fff;
}

body.sh-pdp-on .sh-rev-reg {
	border: 1px solid var(--sh-brd-strong);
	background: #fff;
	color: var(--sh-ink);
}

body.sh-pdp-on .sh-rev-reg:hover {
	border-color: var(--sh-ink);
}

.sh-rev-mod {
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--sh-faint);
}

/* Немає жодного відгуку — замість зведення проста картка. */
.sh-rev-empty {
	padding: 14px 16px;
	border: 1px dashed var(--sh-brd-strong);
	border-radius: 14px;
	background: #fafbfd;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.55;
	color: var(--sh-muted);
}

/* ===== Доставка та оплата: три картки ===== */
.sh-del-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	align-items: start;
}

@media (max-width: 1024px) {
	.sh-del-grid {
		grid-template-columns: 1fr;
	}
}

.sh-del-card {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 16px 18px;
	border: 1px solid var(--sh-brd-soft);
	border-radius: 16px;
	background: var(--sh-surface);
}

.sh-del-head {
	display: flex;
	align-items: center;
	gap: 9px;
}

.sh-del-ic {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
}

.sh-del-t {
	font-size: 14px;
	font-weight: 800;
	color: var(--sh-ink);
}

body.sh-pdp-on .sh-del-card ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.sh-pdp-on .sh-del-card li {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--sh-text);
}

body.sh-pdp-on .sh-del-card li::before {
	content: '•';
	flex-shrink: 0;
	color: var(--sh-brd-hover);
}

.sh-del-more {
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--sh-muted);
}

/* ── Рейтинг у картці товару: бейдж на фото (макет 2c) ───────────── */

.wd-product .wd-product-thumb,
.wd-product .wd-product-img-link {
  position: relative;
}

.wd-product .star-rating {
  display: none !important;
}

.sh-rate {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(20, 32, 58, 0.9);
  color: #fff;
  pointer-events: none;
  white-space: nowrap;
}

.sh-rate-star {
  color: #fbbf24;
  font-size: 12px;
  line-height: 1;
}

.sh-rate-num {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
}

.sh-rate-sep {
  width: 1px;
  height: 11px;
  background: rgba(255, 255, 255, 0.3);
}

.sh-rate-cnt {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.85;
}

/* На вузьких картках бейдж стискаємо, щоб довге «12 відгуків» не вилазило. */
@media (max-width: 575px) {
  .sh-rate {
    gap: 5px;
    padding: 4px 8px;
  }

  .sh-rate-cnt {
    font-size: 10px;
  }
}

/* Єдиний відступ 8px від краю фото для всіх позначок картки:
   бейдж «Новинка», бейдж рейтингу, обране та порівняння. */

.wd-product .sh-badge {
  top: 8px !important;
  left: 8px !important;
}

.wd-product .wd-wishlist-btn,
.wd-product .wd-compare-btn {
  right: 23px !important;
}

.wd-product .wd-wishlist-btn {
  top: 23px !important;
}

.wd-product .wd-compare-btn {
  top: 67px !important;
}

@media (max-width: 768px) {
  .wd-product .wd-wishlist-btn,
  .wd-product .wd-compare-btn {
    right: 18px !important;
  }

  .wd-product .wd-wishlist-btn {
    top: 18px !important;
  }

  .wd-product .wd-compare-btn {
    top: 62px !important;
  }
}

/* Ті самі позначки на великому фото картки товару: рейтинг зліва знизу,
   обране та порівняння справа зверху — усі у 8px від краю. */

.woocommerce-product-gallery.sh-gal-tools {
  position: relative;
}

.woocommerce-product-gallery.sh-gal-tools > .sh-rate {
  left: 8px;
  bottom: 8px;
}

.sh-gal-btn {
  position: absolute !important;
  right: 8px !important;
  left: auto !important;
  z-index: 5;
}

.wd-wishlist-btn.sh-gal-btn {
  top: 8px !important;
  bottom: auto !important;
}

.wd-compare-btn.sh-gal-btn {
  top: 54px !important;
  bottom: auto !important;
}

.sh-pdp-rating.sh-hidden {
  display: none !important;
}

/* На фото кнопки мають бути круглими іконками, без текстових підписів. */

.sh-gal-btn .wd-action-text {
  display: none !important;
}

.sh-gal-btn > a {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 8px rgba(20, 32, 58, 0.14);
  color: var(--sh-text);
}

.sh-gal-btn > a:hover {
  color: var(--sh-ink);
  background: #fff;
}

/* ── Кошик за макетом «Кошик.dc.html» ──────────────────────────── */

/* Кроки: нумеровані кружечки */
body.woocommerce-page .wd-checkout-steps {
  display: flex;
  align-items: center;
  gap: 0;
  counter-reset: sh-step;
  margin-bottom: 22px;
}

body.woocommerce-page .wd-checkout-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sh-faint) !important;
  counter-increment: sh-step;
}

body.woocommerce-page .wd-checkout-steps li a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit !important;
  font-weight: inherit;
}

body.woocommerce-page .wd-checkout-steps li::before {
  content: counter(sh-step);
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1px solid var(--sh-brd-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
}

body.woocommerce-page .wd-checkout-steps li::after {
  content: "";
  width: 26px;
  height: 1px;
  margin: 0 10px;
  background: var(--sh-brd-strong);
}

body.woocommerce-page .wd-checkout-steps li:last-child::after {
  display: none;
}

body.woocommerce-page .wd-checkout-steps li.step-active {
  color: var(--sh-ink) !important;
  font-weight: 700;
}

body.woocommerce-page .wd-checkout-steps li.step-active::before {
  background: var(--sh-ink);
  border-color: var(--sh-ink);
  color: #fff;
}

/* Лічильник біля заголовка */
.sh-cart-count {
  margin-left: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 400;
  color: var(--sh-muted);
}

/* Дві колонки */
body.woocommerce-cart .cart-content-wrapper {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px !important;
  align-items: start;
}

body.woocommerce-cart .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart_totals {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}

.sh-cart-side {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

body.woocommerce-cart .coupon.sh-coupon-real {
  display: none !important;
}

.sh-cart-promo-row {
  display: flex;
  gap: 8px;
}

.sh-cart-promo-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--sh-brd);
  border-radius: var(--sh-field-r);
  background: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sh-ink);
}

.sh-cart-promo-input:focus {
  outline: 0;
  border-color: var(--sh-accent);
}

.sh-cart-promo-btn {
  height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--sh-btn-r-sm);
  background: #eef3fe;
  color: var(--sh-accent);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.sh-cart-promo-btn:hover {
  background: var(--sh-accent);
  color: #fff;
}

.sh-cart-promo-note:not(:empty) {
  font-size: 12px;
  font-weight: 600;
  color: var(--sh-err);
}

/* Картка зі списком товарів */
body.woocommerce-cart .woocommerce-cart-form {
  grid-column: 1;
  background: var(--sh-surface);
  border: 1px solid var(--sh-brd-soft);
  border-radius: 20px;
  padding: 8px 22px 12px;
}

body.woocommerce-cart table.cart,
body.woocommerce-cart table.cart tbody {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
}

body.woocommerce-cart table.cart thead {
  display: none;
}

body.woocommerce-cart tr.cart_item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0 16px;
  border-top: 1px solid var(--sh-brd-faint);
}

body.woocommerce-cart tr.cart_item:first-child {
  border-top: 0;
}

body.woocommerce-cart table.cart td {
  display: block;
  padding: 0 !important;
  border: 0 !important;
}

body.woocommerce-cart td.product-thumbnail {
  order: 1;
  flex-shrink: 0;
}

body.woocommerce-cart td.product-thumbnail img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid var(--sh-brd-faint);
  background: #fff;
}

body.woocommerce-cart td.product-name {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 6px;
}

body.woocommerce-cart td.product-name a {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--sh-ink);
  text-decoration: none !important;
}

body.woocommerce-cart td.product-name a:hover {
  color: var(--sh-accent);
}

.sh-ci-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--sh-muted);
}

.sh-ci-in { color: var(--sh-ok); }
.sh-ci-last { color: #e08a00; }
.sh-ci-out { color: var(--sh-err); }

body.woocommerce-cart td.product-price {
  display: none !important;
}

body.woocommerce-cart td.product-quantity {
  order: 3;
  flex-shrink: 0;
}

body.woocommerce-cart .cart_item .quantity {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 38px;
  padding: 0 4px;
  border: 1px solid var(--sh-brd);
  border-radius: 11px;
  background: #fff;
}

body.woocommerce-cart .cart_item .quantity .btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sh-text);
  font-size: 16px;
  cursor: pointer;
}

body.woocommerce-cart .cart_item .quantity .btn:hover {
  background: var(--sh-bg);
}

body.woocommerce-cart .cart_item .quantity input.qty {
  width: 34px;
  min-width: 0;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--sh-ink);
}

body.woocommerce-cart td.product-subtotal {
  order: 4;
  width: 130px;
  flex-shrink: 0;
  text-align: right;
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
}

body.woocommerce-cart td.product-subtotal .amount {
  font-family: Manrope, sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sh-ink);
  white-space: nowrap;
}

.sh-ci-calc {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--sh-faint);
  white-space: nowrap;
}

body.woocommerce-cart td.product-remove {
  order: 5;
  flex-shrink: 0;
}

body.woocommerce-cart td.product-remove a.remove {
  width: 34px;
  height: 34px;
  line-height: 34px;
  border-radius: 10px;
  font-size: 0 !important;
  color: var(--sh-brd-hover);
  background: transparent;
}

body.woocommerce-cart td.product-remove a.remove::before {
  font-size: 15px;
}

body.woocommerce-cart td.product-remove a.remove:hover {
  color: var(--sh-err);
  background: #fff5f5;
}

/* Рядок дій під карткою */
.sh-cart-acts {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px;
  flex-wrap: wrap;
}

.sh-cart-back {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sh-text) !important;
  text-decoration: none !important;
}

.sh-cart-back::before {
  content: "\2190";
  margin-right: 8px;
}

.sh-cart-back:hover {
  color: var(--sh-ink) !important;
}

.sh-cart-clear {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--sh-brd);
  border-radius: 11px;
  background: #fff;
  color: var(--sh-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.sh-cart-clear:hover {
  border-color: var(--sh-err);
  color: var(--sh-err);
}

/* Промокод */
.sh-cart-promo {
  background: var(--sh-surface);
  border: 1px solid var(--sh-brd-soft);
  border-radius: 20px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.sh-cart-promo-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--sh-ink);
}

.sh-cart-promo .coupon {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.sh-cart-promo .coupon input.input-text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--sh-brd);
  border-radius: var(--sh-field-r);
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
}

.sh-cart-promo .coupon .button {
  height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--sh-btn-r-sm);
  background: #eef3fe !important;
  color: var(--sh-accent) !important;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

.sh-cart-promo .coupon .button:hover {
  background: var(--sh-accent) !important;
  color: #fff !important;
}

/* Підсумок */
body.woocommerce-cart .cart-totals-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--sh-surface);
  border: 1px solid var(--sh-brd-soft);
  border-radius: 20px !important;
  border-top: 1px solid var(--sh-brd-soft) !important;
  padding: 20px 22px;
}

body.woocommerce-cart .cart-totals-inner > h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sh-ink);
  text-transform: none;
}

body.woocommerce-cart .cart_totals table {
  width: 100%;
  margin: 0;
  border: 0;
}

body.woocommerce-cart .cart_totals tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 9px;
}

body.woocommerce-cart .cart_totals th,
body.woocommerce-cart .cart_totals td {
  padding: 0 !important;
  border: 0 !important;
  font-size: 13.5px;
}

body.woocommerce-cart .cart_totals th {
  font-weight: 600;
  color: var(--sh-text);
  text-align: left;
}

body.woocommerce-cart .cart_totals td {
  font-weight: 700;
  color: var(--sh-ink);
  text-align: right;
}

body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals {
  display: none !important;
}

.sh-cart-discount-sum {
  color: var(--sh-faint);
}

.sh-cart-discount-sum.sh-has {
  color: var(--sh-ok);
}

body.woocommerce-cart .cart_totals tr.order-total {
  padding: 14px 0 0;
  border-top: 1px solid var(--sh-brd-faint);
}

body.woocommerce-cart .cart_totals tr.order-total th {
  font-size: 14px;
  font-weight: 800;
  color: var(--sh-ink);
}

body.woocommerce-cart .cart_totals tr.order-total td .amount {
  font-family: Manrope, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

body.woocommerce-cart .wc-proceed-to-checkout {
  margin: 0;
  padding: 0;
}

body.woocommerce-cart .checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--sh-btn-r);
  background: var(--sh-btn-bg);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

body.woocommerce-cart .checkout-button:hover {
  background: var(--sh-accent);
  color: #fff;
}

.sh-cart-bonus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--sh-ok-bg);
  font-size: 12.5px;
  font-weight: 700;
  color: #14532d;
}

.sh-cart-bonus-sum {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  color: var(--sh-ok);
}

@media (max-width: 1024px) {
  body.woocommerce-cart .cart-content-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }

  .sh-cart-side,
  body.woocommerce-cart .woocommerce-cart-form,
  .sh-cart-acts {
    grid-column: 1;
    grid-row: auto;
  }

  .sh-cart-side {
    position: static;
    grid-row: auto;
  }
}


/* ── Мобільна версія за макетом «Кошик - мобільний» ─────────────── */

@media (max-width: 768px) {
  /* Кожен товар — окрема картка */
  body.woocommerce-cart .woocommerce-cart-form {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  body.woocommerce-cart tr.cart_item {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--sh-brd-soft);
    border-top: 1px solid var(--sh-brd-soft);
    border-radius: 16px;
    background: var(--sh-surface);
  }

  body.woocommerce-cart table.cart td {
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
  }

  body.woocommerce-cart table.cart td::before {
    display: none !important;
  }

  body.woocommerce-cart td.product-thumbnail {
    grid-column: 1;
    grid-row: 1;
    position: static !important;
    align-self: start;
  }

  body.woocommerce-cart td.product-thumbnail img {
    width: 72px;
    height: 72px;
    border-radius: 12px;
  }

  body.woocommerce-cart td.product-name {
    grid-column: 2;
    grid-row: 1;
    padding-right: 34px !important;
    align-self: start;
    gap: 5px;
  }

  body.woocommerce-cart td.product-name a {
    font-size: 13.5px;
    line-height: 1.3;
  }

  .sh-ci-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 10.5px;
  }

  body.woocommerce-cart td.product-remove {
    position: absolute !important;
    top: 10px !important;
    right: 8px !important;
    left: auto !important;
  }

  body.woocommerce-cart td.product-remove a.remove {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 9px;
  }

  body.woocommerce-cart td.product-quantity {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: start;
  }

  body.woocommerce-cart .cart_item .quantity {
    height: 40px;
  }

  body.woocommerce-cart td.product-subtotal {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: end;
    align-items: flex-end;
    text-align: right !important;
  }

  .sh-ci-calc {
    display: none;
  }

  /* Картки праворуч стають частиною стрічки */
  .sh-cart-promo,
  body.woocommerce-cart .cart-totals-inner {
    border-radius: 16px;
    padding: 14px;
  }

  /* Дії: очистити зверху, «продовжити покупки» — по центру знизу */
  .sh-cart-acts {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
  }

  .sh-cart-back {
    text-align: center;
  }
}

/* ── Порожній кошик за макетом ──────────────────────────────────── */

body.woocommerce-cart h2.cart-empty,
body.woocommerce-cart p.wd-empty-block-text,
body.woocommerce-cart p.return-to-shop,
body.woocommerce-cart .wd-empty-block-icon {
  display: none !important;
}

.sh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 56px 40px;
  border: 1px solid var(--sh-brd-soft);
  border-radius: 20px;
  background: var(--sh-surface);
  text-align: center;
}

.sh-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 26px;
  background: var(--sh-bg);
  color: var(--sh-brd-hover);
}

.sh-empty-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--sh-ink);
}

.sh-empty-text {
  max-width: 460px;
  margin-top: -10px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--sh-muted);
  text-wrap: pretty;
}

.sh-empty-acts {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.sh-empty-go,
.sh-empty-fav {
  display: inline-flex;
  align-items: center;
  height: 48px;
  border-radius: var(--sh-btn-r);
  font-weight: 800;
  text-decoration: none !important;
}

.sh-empty-go {
  padding: 0 26px;
  background: var(--sh-ink);
  color: #fff !important;
  font-size: 14.5px;
}

.sh-empty-go:hover {
  background: var(--sh-accent);
}

.sh-empty-fav {
  padding: 0 22px;
  border: 1px solid var(--sh-brd);
  background: #fff;
  color: var(--sh-ink) !important;
  font-size: 14px;
  font-weight: 700;
}

.sh-empty-fav:hover {
  border-color: var(--sh-ink);
}

.sh-empty-pop {
  margin-top: 20px;
}

.sh-empty-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.sh-empty-pop-head > span {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sh-ink);
}

.sh-empty-pop-head > a {
  font-size: 13px;
  font-weight: 700;
  color: var(--sh-accent) !important;
  text-decoration: none !important;
}

.sh-empty-pop-head > a:hover {
  color: var(--sh-ink) !important;
}

@media (max-width: 768px) {
  .sh-empty {
    padding: 40px 20px;
    border-radius: 16px;
  }

  .sh-empty-go,
  .sh-empty-fav {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ── Спливаючі повідомлення внизу екрана ───────────────────────── */
/* Тему тут доводиться перебивати вагою селектора: її правила для
   .woocommerce-message вантажаться пізніше і йдуть з !important. */

.woocommerce-notices-wrapper:empty {
  display: none !important;
}

body .sh-toasts {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 10050;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

body .sh-toasts .sh-toast {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 15px 46px 15px 18px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--sh-ink) !important;
  color: #fff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  text-align: left !important;
  list-style: none !important;
  box-shadow: 0 10px 30px rgba(20, 32, 58, 0.18) !important;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
}

body .sh-toasts .sh-toast.sh-toast-in {
  opacity: 1;
  transform: none;
}

body .sh-toasts .sh-toast.sh-toast-ok {
  background: var(--sh-ok) !important;
}

body .sh-toasts .sh-toast.sh-toast-err {
  background: var(--sh-err) !important;
}

body .sh-toasts .sh-toast::before,
body .sh-toasts .sh-toast::after {
  content: none !important;
  display: none !important;
}

body .sh-toasts .sh-toast a {
  color: #fff !important;
  text-decoration: underline !important;
}

body .sh-toasts .sh-toast .button {
  display: none !important;
}

body .sh-toasts .sh-toast li {
  list-style: none !important;
  margin: 0 !important;
}

body .sh-toasts .sh-toast .sh-toast-x {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  left: auto !important;
  width: 26px !important;
  min-width: 0 !important;
  height: 26px !important;
  min-height: 0 !important;
  margin: -13px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer;
}

body .sh-toasts .sh-toast .sh-toast-x:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

body .sh-toasts .sh-toast .sh-toast-x::before,
body .sh-toasts .sh-toast .sh-toast-x::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 12px;
  left: 7px;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

body .sh-toasts .sh-toast .sh-toast-x::before {
  transform: rotate(45deg);
}

body .sh-toasts .sh-toast .sh-toast-x::after {
  transform: rotate(-45deg);
}

@media (max-width: 768px) {
  body .sh-toasts {
    bottom: 16px;
    width: calc(100vw - 24px);
  }

  body.woocommerce-cart .sh-toasts {
    bottom: 150px;
  }
}

/* Довгі селектори — тема перебиває порядком завантаження. */

body .sh-cart-side .sh-cart-promo .sh-cart-promo-input {
  height: 42px !important;
  padding: 0 13px !important;
  border: 1px solid var(--sh-brd) !important;
  border-radius: var(--sh-field-r) !important;
  background: #fff !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--sh-ink) !important;
}

body .sh-cart-side .sh-cart-promo .sh-cart-promo-input:focus {
  border-color: var(--sh-accent) !important;
}

body .sh-cart-side .sh-cart-promo .sh-cart-promo-btn {
  height: 42px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: var(--sh-btn-r-sm) !important;
  background: #eef3fe !important;
  color: var(--sh-accent) !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

body .sh-cart-side .sh-cart-promo .sh-cart-promo-btn:hover {
  background: var(--sh-accent) !important;
  color: #fff !important;
}

/* Кнопка «Оновити кошик» — з тінню */
body.woocommerce-cart .woocommerce-cart-form button[name="update_cart"] {
  height: 42px !important;
  padding: 0 20px !important;
  border: 1px solid var(--sh-brd) !important;
  border-radius: var(--sh-btn-r-sm) !important;
  background: #fff !important;
  color: var(--sh-text) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: 0 4px 12px rgba(20, 32, 58, 0.10) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

body.woocommerce-cart .woocommerce-cart-form button[name="update_cart"]:not([disabled]):hover {
  border-color: var(--sh-ink) !important;
  color: var(--sh-ink) !important;
  box-shadow: 0 6px 18px rgba(20, 32, 58, 0.16) !important;
}

body.woocommerce-cart .woocommerce-cart-form button[name="update_cart"][disabled] {
  opacity: 0.6;
  box-shadow: 0 2px 8px rgba(20, 32, 58, 0.08) !important;
}

/* «Разом»: суми в основному шрифті, як у макеті, а не моноширинному */
body.woocommerce-cart .cart_totals tr.cart-subtotal td .amount,
body.woocommerce-cart .cart_totals tr.sh-cart-discount td .amount,
body.woocommerce-cart .cart_totals tr.cart-subtotal td,
body.woocommerce-cart .cart_totals tr.sh-cart-discount td {
  font-family: Manrope, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
}

body.woocommerce-cart .cart_totals tr.sh-cart-discount td .sh-cart-discount-sum,
body.woocommerce-cart .cart_totals tr.sh-cart-discount td .amount {
  color: var(--sh-ok) !important;
}

/* Блок «Продовжити покупки» тепер над списком */
.sh-cart-acts {
  margin-bottom: 12px;
}

/* Права колонка на одному рівні зі списком, менші відступи зверху. */

body.woocommerce-cart main.wd-content-layout {
  padding-top: 12px !important;
}

body.woocommerce-page .wd-checkout-steps {
  margin-bottom: 14px;
}

body.woocommerce-cart .sh-cart-acts {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 10px;
}

body.woocommerce-cart .woocommerce-cart-form {
  grid-column: 1;
  grid-row: 2;
}

body.woocommerce-cart .sh-cart-side {
  grid-column: 2;
  grid-row: 2;
}

@media (max-width: 1024px) {
  body.woocommerce-cart .sh-cart-acts,
  body.woocommerce-cart .woocommerce-cart-form,
  body.woocommerce-cart .sh-cart-side {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 768px) {
  /* У підсумку на мобільному тема ховає th і малює підпис через td::before —
     через це сума злітала на другий рядок. Повертаємо звичайні заголовки. */
  body.woocommerce-cart .cart_totals tr {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  body.woocommerce-cart .cart_totals th {
    display: block !important;
  }

  body.woocommerce-cart .cart_totals td {
    display: block !important;
    text-align: right !important;
  }

  body.woocommerce-cart .cart_totals td::before {
    display: none !important;
    content: none !important;
  }
}

/* ── Панель кошика зверху ──────────────────────────────────────── */

.sh-cartpanel {
  position: fixed;
  inset: 0;
  z-index: 10020;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.sh-cartpanel.is-open {
  visibility: visible;
  opacity: 1;
}

.sh-cartpanel-back {
  position: absolute;
  inset: 0;
  background: rgba(20, 32, 58, 0.35);
}

.sh-cartpanel-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(520px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--sh-surface);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(20, 32, 58, 0.26);
  transform: translate(-50%, -50%) scale(0.97);
  transition: transform 0.22s ease;
  overflow: hidden;
}

.sh-cartpanel.is-open .sh-cartpanel-box {
  transform: translate(-50%, -50%) scale(1);
}

.sh-cartpanel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--sh-brd-faint);
  font-size: 15px;
  font-weight: 800;
  color: var(--sh-ink);
  flex-shrink: 0;
}

.sh-cartpanel-x {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: var(--sh-bg);
  color: var(--sh-text);
  font-size: 0;
  cursor: pointer;
}

.sh-cartpanel-x::before,
.sh-cartpanel-x::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 9px;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.sh-cartpanel-x::before { transform: rotate(45deg); }
.sh-cartpanel-x::after { transform: rotate(-45deg); }
.sh-cartpanel-x:hover { background: var(--sh-brd); }

.sh-cartpanel .widget_shopping_cart_content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.sh-cartpanel ul.woocommerce-mini-cart {
  margin: 0 !important;
  padding: 4px 20px !important;
  list-style: none;
  overflow-y: auto;
  min-height: 0;
}

/* Рядок теми: накладка + хрестик + посилання з фото + .cart-info */
.sh-cartpanel li.woocommerce-mini-cart-item {
  position: relative;
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  padding: 14px 30px 14px 0 !important;
  border-top: 1px solid var(--sh-brd-faint);
  list-style: none;
}

.sh-cartpanel li.woocommerce-mini-cart-item:first-child {
  border-top: 0;
}

.sh-cartpanel li.woocommerce-mini-cart-item a.cart-item-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  font-size: 0 !important;
  color: transparent !important;
}

.sh-cartpanel .cart-item-image {
  display: block;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.sh-cartpanel .cart-item-image img {
  width: 64px !important;
  height: 64px !important;
  margin: 0 !important;
  border: 1px solid var(--sh-brd-faint);
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
}

.sh-cartpanel .cart-info {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  row-gap: 8px;
  column-gap: 10px;
  min-width: 0;
}

.sh-cartpanel .cart-info .wd-entities-title {
  grid-column: 1 / -1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--sh-ink) !important;
}

.sh-cartpanel .cart-info div.quantity {
  position: relative;
  z-index: 2;
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  width: auto !important;
  height: 34px;
  padding: 0 3px;
  border: 1px solid var(--sh-brd);
  border-radius: 10px;
  background: #fff;
}

.sh-cartpanel .cart-info div.quantity .btn,
.sh-cartpanel .cart-info div.quantity button {
  width: 26px !important;
  height: 26px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--sh-text) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.sh-cartpanel .cart-info div.quantity input.qty {
  width: 30px !important;
  min-width: 0 !important;
  height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px !important;
  font-weight: 500;
  color: var(--sh-ink) !important;
}

.sh-cartpanel .cart-info span.quantity {
  justify-self: end;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--sh-muted);
  white-space: nowrap;
}

.sh-cartpanel li.woocommerce-mini-cart-item a.remove {
  z-index: 3;
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  left: auto !important;
  width: 26px !important;
  height: 26px !important;
  margin-top: -13px !important;
  line-height: 26px !important;
  border-radius: 8px;
  font-size: 0 !important;
  color: var(--sh-brd-hover) !important;
  background: transparent !important;
}

.sh-cartpanel li.woocommerce-mini-cart-item a.remove::before {
  font-size: 13px;
}

.sh-cartpanel li.woocommerce-mini-cart-item a.remove:hover {
  color: var(--sh-err) !important;
  background: #fff5f5 !important;
}

.sh-cartpanel .woocommerce-mini-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 !important;
  padding: 14px 20px !important;
  border-top: 1px solid var(--sh-brd-faint);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sh-text);
  flex-shrink: 0;
}

.sh-cartpanel .woocommerce-mini-cart__total .amount {
  font-family: Manrope, sans-serif !important;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sh-ink);
}

.sh-cartpanel .woocommerce-mini-cart__buttons {
  display: flex;
  gap: 10px;
  margin: 0 !important;
  padding: 0 20px 20px !important;
  flex-shrink: 0;
}

.sh-cartpanel .woocommerce-mini-cart__buttons a {
  flex: 1 1 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 12px !important;
  border-radius: var(--sh-btn-r-sm) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.sh-cartpanel .woocommerce-mini-cart__buttons a:first-child {
  border: 1px solid var(--sh-brd) !important;
  background: #fff !important;
  color: var(--sh-ink) !important;
}

.sh-cartpanel .woocommerce-mini-cart__buttons a.checkout {
  border: 0 !important;
  background: var(--sh-btn-bg) !important;
  color: #fff !important;
}

.sh-cartpanel .woocommerce-mini-cart__buttons a.checkout:hover {
  background: var(--sh-accent) !important;
}

.sh-cartpanel .woocommerce-mini-cart__empty-message {
  margin: 0 !important;
  padding: 34px 20px !important;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sh-muted);
}

/* Поки панель відкрита, сторінка під нею не прокручується. */
html.sh-cartpanel-lock,
html.sh-cartpanel-lock body {
  overflow: hidden !important;
}

html.sh-cartpanel-lock body {
  padding-right: var(--sh-scrollbar, 0px);
}

/* Прокрутка списку в панелі не передається сторінці. */
.sh-cartpanel,
.sh-cartpanel ul.woocommerce-mini-cart {
  overscroll-behavior: contain;
}

@media (max-width: 768px) {
  .sh-cartpanel-box {
    width: calc(100vw - 24px);
    max-height: 84vh;
    border-radius: 18px;
  }
}

/* Свій попап теми «Товар додано» не показуємо — замість нього наша панель. */
.mfp-wrap:has(.wd-popup-added-cart),
.mfp-bg.wd-added-cart-popup {
  display: none !important;
}

/* ── Оформлення за макетом «Оформлення.dc.html» ─────────────────────────────
   Розмітку в дві колонки збирає checkout.js (плагін sharit-checkout).
   Тема Woodmart підключає woo-page-checkout.css ПІСЛЯ дочірньої, тому
   селектори тут навмисно довгі — коротким не вистачає ваги.
   ────────────────────────────────────────────────────────────────────────── */

body.woocommerce-checkout main.wd-content-layout {
  padding-top: 12px !important;
}

body.woocommerce-checkout .wd-checkout-steps {
  margin-bottom: 14px;
}

/* Заголовок */
.sh-co-head {
  margin-bottom: 18px;
}

.sh-co-title {
  margin: 0 !important;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--sh-ink);
}

/* Купон і вхід — вузькою смужкою над формою */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
  margin: 0 0 14px !important;
  padding: 12px 16px !important;
  border: 1px solid var(--sh-brd-soft) !important;
  border-radius: 14px !important;
  background: var(--sh-surface) !important;
  color: var(--sh-text) !important;
  font-size: 13px;
  font-weight: 600;
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before {
  display: none !important;
}

body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-checkout form.woocommerce-form-login {
  margin: 0 0 14px !important;
  padding: 16px 18px !important;
  border: 1px solid var(--sh-brd-soft) !important;
  border-radius: 16px !important;
  background: var(--sh-surface) !important;
}

/* Сітка */
#sh-co-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 24px;
  align-items: start;
}

.sh-co-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.sh-co-side {
  position: sticky;
  top: 20px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Порожні залишки форми ховаємо лише тоді, коли сітку справді зібрано. */
#sh-co-grid ~ #customer_details {
  display: none !important;
}

body.woocommerce-checkout .sh-co-card .woocommerce-billing-fields > h3,
body.woocommerce-checkout .sh-co-card .wcus-checkout-fields > h3,
body.woocommerce-checkout .sh-co-card #billing_country_field {
  display: none !important;
}

/* ── Картка кроку ───────────────────────────────────────────────────────── */

.sh-co-card {
  background: var(--sh-surface);
  border: 1px solid var(--sh-brd-soft);
  border-radius: 20px;
  padding: 22px 24px;
}

.sh-co-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.sh-co-num {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--sh-ink);
  color: #fff;
  font-family: var(--sh-font-mono);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sh-co-card-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sh-ink);
}

.sh-co-card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Поля ───────────────────────────────────────────────────────────────── */

body.woocommerce-checkout .sh-co-card .form-row {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.woocommerce-checkout .sh-co-card .form-row > label,
body.woocommerce-checkout .sh-co-card .sh-co-lbl {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sh-text);
}

body.woocommerce-checkout .sh-co-card .form-row .required,
body.woocommerce-checkout .sh-co-card .form-row abbr.required,
body.woocommerce-checkout .sh-co-card .sh-co-lbl .required {
  font-size: inherit;
  line-height: inherit;
  color: var(--sh-err) !important;
  border: 0 !important;
  text-decoration: none !important;
}

body.woocommerce-checkout .sh-co-card .form-row .optional {
  color: var(--sh-faint);
  font-weight: 500;
}

body.woocommerce-checkout .sh-co-card .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}

body.woocommerce-checkout .sh-co-card input[type="text"],
body.woocommerce-checkout .sh-co-card input[type="tel"],
body.woocommerce-checkout .sh-co-card input[type="email"],
body.woocommerce-checkout .sh-co-card input[type="number"],
body.woocommerce-checkout .sh-co-card select,
body.woocommerce-checkout .sh-co-card textarea {
  width: 100%;
  height: var(--sh-field-h);
  min-height: var(--sh-field-h);
  padding: 0 14px !important;
  border: 1px solid var(--sh-brd) !important;
  border-radius: var(--sh-field-r) !important;
  background: #fff !important;
  box-shadow: none !important;
  font-family: var(--sh-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--sh-ink) !important;
}

body.woocommerce-checkout .sh-co-card textarea {
  height: auto;
  min-height: 86px;
  padding: 12px 14px !important;
  line-height: 1.5;
  resize: vertical;
}

body.woocommerce-checkout .sh-co-card input:focus,
body.woocommerce-checkout .sh-co-card select:focus,
body.woocommerce-checkout .sh-co-card textarea:focus {
  border-color: var(--sh-ink) !important;
  outline: none !important;
}

body.woocommerce-checkout .sh-co-card .woocommerce-invalid input.input-text,
body.woocommerce-checkout .sh-co-card .woocommerce-invalid .zen-ui-select {
  border-color: var(--sh-err) !important;
}

/* Крок 1: два стовпчики */
#sh-co-contact .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ── Крок 2: способи доставки ───────────────────────────────────────────── */

#sh-co-shipmethods ul.woocommerce-shipping-methods {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#sh-co-shipmethods li {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--sh-brd);
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.15s ease;
}

#sh-co-shipmethods li::before,
#sh-co-shipmethods li::marker {
  display: none !important;
  content: none !important;
}

#sh-co-shipmethods li:hover {
  border-color: var(--sh-brd-hover);
}

#sh-co-shipmethods li:has(input.shipping_method:checked) {
  border-color: var(--sh-ink);
  box-shadow: inset 0 0 0 1px var(--sh-ink);
}

#sh-co-shipmethods input.shipping_method {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

#sh-co-shipmethods label {
  display: block;
  margin: 0 !important;
  padding: 14px 16px 14px 45px;
  position: relative;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--sh-ink);
}

#sh-co-shipmethods label::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 15px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 1.5px solid var(--sh-brd-strong);
  border-radius: 50%;
}

#sh-co-shipmethods li:has(input.shipping_method:checked) label::before {
  border: 5px solid var(--sh-ink);
}

#sh-co-shipmethods label small {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sh-muted) !important;
}

/* Самовивіз: замість полів адреси — точка видачі. */
#sh-co-pickup {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--sh-pill-brd);
  border-radius: 14px;
  background: var(--sh-pill-bg);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--sh-ink);
}

#sh-co-pickup svg {
  flex-shrink: 0;
  color: var(--sh-accent);
}

#sh-co-ship.sh-co-pickup-on #sh-co-pickup {
  display: flex;
}

#sh-co-ship.sh-co-pickup-on #sh-co-addr,
#sh-co-ship.sh-co-pickup-on .woocommerce-shipping-fields {
  display: none !important;
}

/* Адреса — з'являється лише при самовивозі, інакше блок згортається. */
#sh-co-addr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#sh-co-addr:not(:has(> .form-row:not(.wcus-checkout-field-hidden))) {
  display: none;
}

/* Селекти Нової Пошти */
#sh-co-ship #wcus-billing-fields > div > div,
#sh-co-ship .wcus-checkout-fields > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Половинки фіксовані. У треку 1fr мінімум дорівнює min-content, тож довга
   назва відділення розсовувала свою колонку й з'їдала «Населений пункт» —
   поле стрибало при кожному виборі. minmax(0, …) прибиває пропорцію,
   а min-width: 0 пропускає обрізання, яке вже стоїть на value-text. */
#sh-co-ship .wcus-checkout-fields > div > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 12px;
}

#sh-co-ship .wcus-checkout-fields > div > div > .form-row,
body.woocommerce-checkout #sh-co-ship .zen-ui-select,
body.woocommerce-checkout #sh-co-ship .zen-ui-select__value,
body.woocommerce-checkout #sh-co-ship .zen-ui-select__value-text {
  min-width: 0;
}

body.woocommerce-checkout #sh-co-ship .zen-ui-select {
  height: var(--sh-field-h);
  border: 1px solid var(--sh-brd) !important;
  border-radius: var(--sh-field-r) !important;
  background: #fff !important;
}

body.woocommerce-checkout #sh-co-ship .zen-ui-select__value {
  height: 44px;
  padding: 0 36px 0 14px !important;
  /* Плагін доставки малює свою рамку всередині поля — виходила подвійна. */
  border: 0 !important;
  border-radius: var(--sh-field-r) !important;
  background: #fff !important;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--sh-ink);
}

/* Стрілка в плагіні — чорна заливка 10px; у макеті сіра й більша. */
body.woocommerce-checkout #sh-co-ship .zen-ui-select__value svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  fill: var(--sh-text);
}

body.woocommerce-checkout #sh-co-ship .zen-ui-select__value-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Доставка на іншу адресу — тихий перемикач унизу картки */
body.woocommerce-checkout #sh-co-ship .woocommerce-shipping-fields h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--sh-text) !important;
}

body.woocommerce-checkout #sh-co-ship .woocommerce-shipping-fields h3 label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
  cursor: pointer;
}

body.woocommerce-checkout #sh-co-ship .woocommerce-shipping-fields input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0 !important;
  accent-color: var(--sh-ink);
  flex-shrink: 0;
}

body.woocommerce-checkout #sh-co-ship .shipping_address {
  padding-top: 14px;
}

body.woocommerce-checkout #sh-co-ship .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ── Крок 3: способи оплати ─────────────────────────────────────────────── */

#sh-co-paymethods ul.wc_payment_methods {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#sh-co-paymethods li.wc_payment_method {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--sh-brd);
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.15s ease;
}

#sh-co-paymethods li.wc_payment_method::before,
#sh-co-paymethods li.wc_payment_method::marker {
  display: none !important;
  content: none !important;
}

#sh-co-paymethods li.wc_payment_method:hover {
  border-color: var(--sh-brd-hover);
}

#sh-co-paymethods li.wc_payment_method:has(input.input-radio:checked) {
  border-color: var(--sh-ink);
  box-shadow: inset 0 0 0 1px var(--sh-ink);
}

#sh-co-paymethods input.input-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

#sh-co-paymethods li.wc_payment_method > label {
  display: block;
  margin: 0 !important;
  padding: 15px 16px 15px 45px;
  position: relative;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--sh-ink);
}

#sh-co-paymethods li.wc_payment_method > label::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 16px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 1.5px solid var(--sh-brd-strong);
  border-radius: 50%;
}

#sh-co-paymethods li.wc_payment_method:has(input.input-radio:checked) > label::before {
  border: 5px solid var(--sh-ink);
}

#sh-co-paymethods .sh-co-ps {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sh-muted);
}

#sh-co-paymethods .payment_box {
  margin: 0 !important;
  padding: 0 16px 14px 45px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sh-muted);
}

#sh-co-paymethods .payment_box::before,
#sh-co-paymethods .payment_box::after {
  display: none !important;
  content: none !important;
}

#sh-co-paymethods .payment_box p {
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Права колонка: підсумок ────────────────────────────────────────────── */

.sh-co-side .checkout-order-review {
  background: var(--sh-surface);
  border: 1px solid var(--sh-brd-soft);
  border-radius: 20px;
  padding: 20px 22px;
}

body.woocommerce-checkout .sh-co-side #order_review_heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--sh-ink) !important;
}

body.woocommerce-checkout .sh-co-side #order_review_heading::before,
body.woocommerce-checkout .sh-co-side #order_review_heading::after {
  display: none !important;
  content: none !important;
}

.sh-co-side .sh-co-edit {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sh-accent);
}

.sh-co-side .sh-co-edit:hover {
  color: var(--sh-ink);
}

body.woocommerce-checkout .sh-co-side .wd-table-wrapper {
  overflow: visible !important;
}

body.woocommerce-checkout .sh-co-side table.woocommerce-checkout-review-order-table {
  display: block;
  width: 100%;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.woocommerce-checkout .sh-co-side .woocommerce-checkout-review-order-table thead {
  display: none !important;
}

body.woocommerce-checkout .sh-co-side .woocommerce-checkout-review-order-table tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

body.woocommerce-checkout .sh-co-side .woocommerce-checkout-review-order-table tfoot {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--sh-brd-faint);
}

body.woocommerce-checkout .sh-co-side .woocommerce-checkout-review-order-table tr {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0 !important;
  background: transparent !important;
}

body.woocommerce-checkout .sh-co-side .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .sh-co-side .woocommerce-checkout-review-order-table td {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  vertical-align: middle;
}

/* Рядок товару */
body.woocommerce-checkout .sh-co-side tbody tr.cart_item td.product-name {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-content: center;
}

.sh-co-side .sh-co-thumb {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  width: 52px;
  height: 52px;
  border-radius: 11px;
  overflow: hidden;
  background: var(--sh-brd-faint);
}

.sh-co-side .sh-co-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 !important;
  border-radius: 0 !important;
}

.sh-co-side .sh-co-pname {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sh-ink);
  /* Назви збірок довгі — у підсумку вистачить двох рядків. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sh-co-side .sh-co-qty {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin-top: 3px;
  font-family: var(--sh-font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--sh-faint);
}

body.woocommerce-checkout .sh-co-side tbody tr.cart_item td.product-total {
  flex: 0 0 auto;
  text-align: right;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--sh-ink);
}

/* Підсумки */
body.woocommerce-checkout .sh-co-side tfoot tr {
  justify-content: space-between;
  align-items: baseline;
}

body.woocommerce-checkout .sh-co-side tfoot th {
  text-align: left;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sh-text);
}

body.woocommerce-checkout .sh-co-side tfoot td {
  text-align: right;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sh-ink);
}

.sh-co-side .sh-co-shipval {
  font-weight: 700;
  color: var(--sh-muted);
}

#sh-co-final {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#sh-co-final tr.order-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding-top: 14px;
  border-top: 1px solid var(--sh-brd-faint);
  background: transparent;
}

#sh-co-final tr.order-total th,
#sh-co-final tr.order-total td {
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#sh-co-final tr.order-total th {
  text-align: left;
  font-size: 14px;
  font-weight: 800;
  color: var(--sh-ink);
}

#sh-co-final tr.order-total td,
#sh-co-final tr.order-total td strong,
#sh-co-final tr.order-total td .amount,
#sh-co-final tr.order-total td bdi {
  text-align: right;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--sh-ink);
}

/* Бонуси */
body.woocommerce-checkout .sh-co-side .htpc-bonus-box {
  margin: 14px 0 0 !important;
  padding: 11px 13px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--sh-ok-bg) !important;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #14532d !important;
}

body.woocommerce-checkout .sh-co-side .htpc-bonus-box a {
  color: var(--sh-ok) !important;
  font-weight: 700;
}

/* Згоди й кнопка */
body.woocommerce-checkout .sh-co-side #payment {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.woocommerce-checkout .sh-co-side #payment::before,
body.woocommerce-checkout .sh-co-side #payment::after {
  display: none !important;
  content: none !important;
}

body.woocommerce-checkout .sh-co-side .place-order {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 !important;
  padding: 0 !important;
}

body.woocommerce-checkout .sh-co-side .woocommerce-privacy-policy-text {
  display: none;
}

body.woocommerce-checkout .sh-co-side .woocommerce-terms-and-conditions-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.woocommerce-checkout .sh-co-side .place-order p.form-row {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

/* Прапорець позиціонуємо абсолютно: у підпису є посилання й зірочка,
   а при display:flex кожне з них стало б окремою колонкою. */
body.woocommerce-checkout .sh-co-side .place-order label {
  display: block !important;
  position: relative;
  margin: 0 !important;
  padding: 0 0 0 27px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.5;
  color: var(--sh-text);
  cursor: pointer;
}

body.woocommerce-checkout .sh-co-side .place-order label .required {
  color: var(--sh-err) !important;
  text-decoration: none !important;
}

body.woocommerce-checkout .sh-co-side .place-order p.form-row:not(.htpc-terms) label {
  color: var(--sh-muted);
}

body.woocommerce-checkout .sh-co-side .place-order input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 2px;
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  accent-color: var(--sh-ink);
}

body.woocommerce-checkout .sh-co-side button#place_order {
  width: 100%;
  height: var(--sh-btn-h);
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--sh-btn-r) !important;
  background: var(--sh-btn-bg) !important;
  color: #fff !important;
  font-family: var(--sh-font);
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: var(--sh-btn-h);
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body.woocommerce-checkout .sh-co-side button#place_order:hover {
  background: var(--sh-accent) !important;
}

/* ── Планшет і телефон ──────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  #sh-co-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .sh-co-side {
    position: static;
  }
}

@media (max-width: 768px) {
  .sh-co-title {
    font-size: 21px;
  }

  .sh-co-card {
    padding: 16px;
    border-radius: 16px;
  }

  .sh-co-side .checkout-order-review {
    padding: 16px;
    border-radius: 16px;
  }

  #sh-co-contact .woocommerce-billing-fields__field-wrapper,
  #sh-co-addr,
  #sh-co-shipmethods ul.woocommerce-shipping-methods,
  #sh-co-ship .wcus-checkout-fields > div > div,
  body.woocommerce-checkout #sh-co-ship .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Кабінет за макетом «Обліковий запис.dc.html» ───────────────────────────
   Стартову сторінку малює dashboard.php з плагіна sharit-account.
   На ній бічне меню зайве — розділи винесені в плитки.
   ────────────────────────────────────────────────────────────────────────── */

body.sh-acc-dash .wd-page-title h1.entry-title {
  display: none;
}

body.sh-acc-dash main.wd-content-layout {
  padding-top: 16px !important;
}

body.sh-acc-dash .wd-my-account-wrapper {
  display: block !important;
}

body.sh-acc-dash .wd-my-account-sidebar {
  display: none !important;
}

body.sh-acc-dash .woocommerce-MyAccount-content {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
}

.sh-acc {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Вітання ────────────────────────────────────────────────────────────── */

.sh-acc-hello {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 24px;
  border: 1px solid var(--sh-brd-soft);
  border-radius: 20px;
  background: var(--sh-surface);
}

.sh-acc-who {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.sh-acc-ava {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 15px;
  background: var(--sh-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
}

.sh-acc-id {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sh-acc-name {
  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--sh-ink);
}

.sh-acc-contacts {
  font-family: var(--sh-font-mono);
  font-size: 12px;
  color: var(--sh-muted);
  overflow-wrap: anywhere;
}

.sh-acc-acts {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body.woocommerce-account .sh-acc-btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--sh-brd);
  border-radius: var(--sh-btn-r-sm);
  background: #fff;
  color: var(--sh-text) !important;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none !important;
}

body.woocommerce-account .sh-acc-btn:hover {
  border-color: var(--sh-ink);
  color: var(--sh-ink) !important;
}

body.woocommerce-account .sh-acc-btn-dark {
  border-color: var(--sh-ink);
  background: var(--sh-btn-bg);
  color: #fff !important;
}

body.woocommerce-account .sh-acc-btn-dark:hover {
  border-color: var(--sh-accent);
  background: var(--sh-accent);
  color: #fff !important;
}

/* ── Заголовок сторінки кабінету ────────────────────────────────────────── */

.sh-acc-h {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sh-ink);
}

.sh-acc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

body.woocommerce-account .sh-acc-back {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--sh-brd);
  border-radius: var(--sh-btn-r-sm);
  background: var(--sh-surface);
  color: var(--sh-text) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.woocommerce-account .sh-acc-back:hover {
  border-color: var(--sh-ink);
  color: var(--sh-ink) !important;
}

/* ── Бонусна плашка у вітанні ───────────────────────────────────────────── */

.sh-acc-side {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

body.woocommerce-account .sh-acc-bonus {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 12px;
  border: 1px solid #bbf7d0;
  border-radius: var(--sh-btn-r);
  background: var(--sh-ok-bg);
  color: #14532d !important;
  text-decoration: none !important;
}

body.woocommerce-account .sh-acc-bonus:hover {
  border-color: var(--sh-ok);
}

.sh-acc-bonus-ico {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 11px;
  background: #dcfce7;
  color: var(--sh-ok);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sh-acc-bonus-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sh-acc-bonus-cap {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4d7c5a;
}

.sh-acc-bonus-val {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sh-ok);
}

/* ── Дві панелі: замовлення й бонуси ────────────────────────────────────── */

.sh-acc-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px;
  align-items: start;
}

.sh-acc-cols-one {
  grid-template-columns: minmax(0, 1fr);
}

.sh-acc-panel {
  padding: 20px 24px 8px;
  border: 1px solid var(--sh-brd-soft);
  border-radius: 20px;
  background: var(--sh-surface);
}

.sh-acc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
}

.sh-acc-panel-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--sh-ink);
}

body.woocommerce-account .sh-acc-panel-head a,
body.woocommerce-account .sh-acc-odetails {
  font-size: 13px;
  font-weight: 700;
  color: var(--sh-accent) !important;
  text-decoration: none !important;
  white-space: nowrap;
}

body.woocommerce-account .sh-acc-panel-head a:hover,
body.woocommerce-account .sh-acc-odetails:hover {
  color: var(--sh-ink) !important;
}

/* Рядок історії бонусів */
.sh-acc-log {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid var(--sh-brd-faint);
}

.sh-acc-delta {
  flex-shrink: 0;
  font-family: var(--sh-font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--sh-ok);
}

.sh-acc-delta-out {
  color: var(--sh-muted);
}

/* ── Редагування даних ──────────────────────────────────────────────────── */

body.woocommerce-edit-account .wd-page-title,
body.sh-acc-dash .wd-page-title {
  display: none;
}

body.woocommerce-edit-account .wd-my-account-wrapper {
  display: block !important;
}

body.woocommerce-edit-account .wd-my-account-sidebar {
  display: none !important;
}

body.woocommerce-edit-account .woocommerce-MyAccount-content {
  width: 100% !important;
  max-width: 780px;
  margin: 0 auto;
  flex: none !important;
  padding: 0 !important;
}

.sh-acc-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.woocommerce-account .sh-acc-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0 !important;
  padding: 24px 26px !important;
  border: 1px solid var(--sh-brd-soft) !important;
  border-radius: 20px;
  background: var(--sh-surface);
}

body.woocommerce-account .sh-acc-card legend {
  float: none;
  width: auto;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sh-ink);
}

/* Підпис під легендою йде першим елементом — прибираємо подвійний проміжок. */
.sh-acc-hint-top {
  margin-top: -15px;
}

.sh-acc-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

body.woocommerce-account .sh-acc-card .form-row {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

body.woocommerce-account .sh-acc-card .form-row > label {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sh-text);
}

body.woocommerce-account .sh-acc-card .required {
  font-size: inherit;
  line-height: inherit;
  color: var(--sh-err) !important;
  border: 0 !important;
  text-decoration: none !important;
}

.sh-acc-hint {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--sh-muted);
}

body.woocommerce-account .sh-acc-hint em {
  font-style: normal;
}

body.woocommerce-account .sh-acc-card input[type="text"],
body.woocommerce-account .sh-acc-card input[type="email"],
body.woocommerce-account .sh-acc-card input[type="tel"],
body.woocommerce-account .sh-acc-card input[type="password"] {
  width: 100%;
  height: var(--sh-field-h);
  min-height: var(--sh-field-h);
  padding: 0 14px !important;
  border: 1px solid var(--sh-field-brd) !important;
  border-radius: var(--sh-field-r) !important;
  background: var(--sh-surface) !important;
  box-shadow: none !important;
  font-family: var(--sh-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--sh-ink) !important;
}

body.woocommerce-account .sh-acc-card input.sh-acc-mono {
  font-family: var(--sh-font-mono);
  font-size: 13.5px;
  font-weight: 500;
}

body.woocommerce-account .sh-acc-card input:focus {
  border-color: var(--sh-field-brd-focus) !important;
  outline: none !important;
}

/* Поле пароля: кнопка «око» всередині рамки, а не поруч із нею. */
body.woocommerce-account .sh-acc-card .password-input {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--sh-field-h);
  padding: 0 6px 0 14px;
  border: 1px solid var(--sh-field-brd);
  border-radius: var(--sh-field-r);
  background: var(--sh-surface);
}

body.woocommerce-account .sh-acc-card .password-input:focus-within {
  border-color: var(--sh-field-brd-focus);
}

body.woocommerce-account .sh-acc-card .password-input input[type="password"],
body.woocommerce-account .sh-acc-card .password-input input[type="text"] {
  flex: 1;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.woocommerce-account .sh-acc-card .show-password-input {
  position: static;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--sh-muted);
  cursor: pointer;
}

body.woocommerce-account .sh-acc-card .show-password-input:hover {
  background: var(--sh-bg) !important;
  color: var(--sh-ink);
}

.sh-acc-formacts {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

body.woocommerce-account button.sh-acc-save {
  height: 48px;
  padding: 0 24px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: var(--sh-btn-bg) !important;
  color: var(--sh-btn-color) !important;
  font-family: var(--sh-font);
  font-size: 14px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body.woocommerce-account button.sh-acc-save:hover {
  background: var(--sh-btn-bg-hover) !important;
}

body.woocommerce-account .sh-acc-formacts .sh-acc-btn {
  height: 48px;
  padding: 0 22px;
  border-radius: 13px;
}

@media (max-width: 768px) {
  .sh-acc-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .sh-acc-two {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .sh-acc-panel {
    padding: 16px 16px 4px;
    border-radius: 16px;
  }

  body.woocommerce-account .sh-acc-card {
    padding: 16px !important;
    border-radius: 16px;
  }

  .sh-acc-side {
    width: 100%;
  }

  body.woocommerce-account .sh-acc-bonus {
    flex: 1 1 100%;
  }

  .sh-acc-formacts {
    width: 100%;
  }

  body.woocommerce-account button.sh-acc-save,
  body.woocommerce-account .sh-acc-formacts .sh-acc-btn {
    flex: 1 1 0;
    justify-content: center;
  }
}

/* ── Останні замовлення ─────────────────────────────────────────────────── */

.sh-acc-recent {
  padding: 20px 24px 8px;
  border: 1px solid var(--sh-brd-soft);
  border-radius: 20px;
  background: var(--sh-surface);
}

.sh-acc-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
}

.sh-acc-recent-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--sh-ink);
}

body.woocommerce-account .sh-acc-recent-head a,
body.woocommerce-account .sh-acc-odetails {
  font-size: 13px;
  font-weight: 700;
  color: var(--sh-accent) !important;
  text-decoration: none !important;
  white-space: nowrap;
}

body.woocommerce-account .sh-acc-recent-head a:hover,
body.woocommerce-account .sh-acc-odetails:hover {
  color: var(--sh-ink) !important;
}

.sh-acc-order {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 15px 0;
  border-top: 1px solid var(--sh-brd-faint);
}

.sh-acc-onum {
  width: 88px;
  flex-shrink: 0;
  font-family: var(--sh-font-mono);
  font-size: 12.5px;
  color: var(--sh-muted);
}

.sh-acc-oinfo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 180px;
  min-width: 180px;
}

.sh-acc-otitle {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sh-ink);
}

.sh-acc-ometa {
  font-size: 12px;
  font-weight: 500;
  color: var(--sh-muted);
}

.sh-acc-badge {
  flex-shrink: 0;
  padding: 5px 9px;
  border-radius: 7px;
  font-family: var(--sh-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.sh-acc-badge-live {
  background: var(--sh-promo-bg);
  color: var(--sh-accent);
}

.sh-acc-badge-ok {
  background: var(--sh-ok-bg);
  color: var(--sh-ok);
}

.sh-acc-badge-off {
  background: var(--sh-bg);
  color: var(--sh-muted);
}

.sh-acc-ototal {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--sh-ink);
}

.sh-acc-ototal .amount,
.sh-acc-ototal bdi {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.sh-acc-empty {
  padding: 15px 0 22px;
  border-top: 1px solid var(--sh-brd-faint);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sh-muted);
}

@media (max-width: 768px) {
  .sh-acc-hello,
  .sh-acc-recent {
    padding: 16px;
    border-radius: 16px;
  }

  .sh-acc-name {
    font-size: 19px;
  }

  .sh-acc-acts {
    width: 100%;
  }

  body.woocommerce-account .sh-acc-btn {
    flex: 1 1 0;
    justify-content: center;
  }

  .sh-acc-order {
    gap: 10px 14px;
  }

  .sh-acc-onum {
    width: auto;
  }
}

/* ── Списання бонусів у підсумку ────────────────────────────────────────────
   Картку checkout.js вставляє всередину tfoot, між рядком знижки
   й «До оплати» — так, як у макеті. Там уже flex-колонка, тож картка
   стає ще одним елементом списку.
   ────────────────────────────────────────────────────────────────────────── */

body.woocommerce-checkout .sh-co-side .sh-bonus {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 13px 15px;
  border: 1px solid var(--sh-brd);
  border-radius: 14px;
  background: transparent;
}

.sh-bonus-busy {
  opacity: 0.55;
  pointer-events: none;
}

.sh-bonus-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sh-bonus-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.sh-bonus-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sh-ink);
}

.sh-bonus-note {
  font-size: 12px;
  font-weight: 600;
  color: var(--sh-muted);
}

/* Перемикач */
body.woocommerce-checkout .sh-co-side .sh-bonus-switch {
  width: 44px !important;
  /* Тема нав'язує кнопкам висоту 42px — перемикач від цього розпирало. */
  height: 26px !important;
  min-height: 0 !important;
  line-height: 0 !important;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 3px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: var(--sh-brd-strong) !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  transition: background 0.15s ease;
}

body.woocommerce-checkout .sh-co-side .sh-bonus-on .sh-bonus-switch {
  background: var(--sh-ok) !important;
  justify-content: flex-end;
}

.sh-bonus-switch > span {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}

/* Поле суми показуємо лише коли списання ввімкнене */
.sh-bonus-body {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.sh-bonus-on .sh-bonus-body {
  display: flex;
}

.sh-bonus-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sh-bonus-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--sh-brd);
  border-radius: 11px;
  background: #fff;
}

body.woocommerce-checkout .sh-co-side input.sh-bonus-amt {
  width: 100%;
  height: 40px;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--sh-font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--sh-ink) !important;
}

body.woocommerce-checkout .sh-co-side input.sh-bonus-amt:focus {
  outline: none !important;
}

.sh-bonus-field:focus-within {
  border-color: var(--sh-ink);
}

.sh-bonus-cur {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sh-faint);
}

body.woocommerce-checkout .sh-co-side .sh-bonus-max {
  height: 42px;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--sh-brd) !important;
  border-radius: 11px !important;
  background: #fff !important;
  font-family: var(--sh-font);
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 40px;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--sh-ink) !important;
  white-space: nowrap;
  cursor: pointer;
}

body.woocommerce-checkout .sh-co-side .sh-bonus-max:hover {
  border-color: var(--sh-brd-hover) !important;
}

.sh-bonus-hint {
  font-size: 12px;
  font-weight: 600;
  color: var(--sh-muted);
}

/* Рядок знижки в підсумку — зеленим, як у макеті */
body.woocommerce-checkout .sh-co-side tfoot tr.fee td,
body.woocommerce-checkout .sh-co-side tfoot tr.fee td .amount,
body.woocommerce-checkout .sh-co-side tfoot tr.fee td bdi,
body.woocommerce-checkout .sh-co-side tfoot tr.cart-discount td,
body.woocommerce-checkout .sh-co-side tfoot tr.cart-discount td .amount,
body.woocommerce-checkout .sh-co-side tfoot tr.cart-discount td bdi {
  color: var(--sh-ok) !important;
}

/* Меню акаунта, що випадає при наведенні на іконку в шапці — прибрано:
   розділи відкриваються зі сторінки кабінету, а не з шапки. */
body .wd-header-my-account .wd-dropdown-my-account {
  display: none !important;
}

/* Смуга кроків на телефоні не вміщувалась у рядок: три підписи займають
   479px при 345px доступних, і «Замовлення готове» зривалось на другий рядок
   під центр. У мобільному макеті цієї смуги немає взагалі — там у шапці
   «Крок 2 з 3». Лишаємо підпис лише в поточного кроку, решта — самі кружечки:
   вміщується завжди й не залежить від довжини назв. */
@media (max-width: 768px) {
  body.woocommerce-page .wd-checkout-steps {
    flex-wrap: nowrap;
    justify-content: center;
  }

  /* Ховаємо вміст <li>, а не сам <li>: лічильник sh-step рахується саме на
     ньому, і при display: none на кроці активний отримав би чужий номер. */
  body.woocommerce-page .wd-checkout-steps li:not(.step-active) > * {
    display: none;
  }

  body.woocommerce-page .wd-checkout-steps li::after {
    width: 14px;
    margin: 0 7px;
  }
}

/* ── Підвал не залежить від стилів ядра ──────────────────────────────────
   Підвал зібраний блоками Gutenberg (.wp-block-columns), а таблицю ядра
   wp-block-library WordPress підключає не на кожній сторінці: там, де в
   контенті блоків немає (кошик, оформлення), її немає теж. Лишається сам лише
   core-block-supports з `.is-layout-flex { align-items: center }` і
   `flex-wrap: nowrap` на контейнері — і підвал розсипається: на телефоні
   чотири колонки не переносяться, а тиснуться в смужки по 97/68/65/37px,
   на десктопі верхівки колонок з'їжджають по центру замість одного рівня.
   Повторюємо потрібні правила ядра для свого підвалу: дочірня тема
   підключається завжди. Межа 782px — та сама, що в ядра.
   `!important` лише на flex-basis: відсотки стоять інлайном на колонках. */
.htpc-ftr .htf-in {
  align-items: normal;
}

.htpc-ftr .htf-in > .wp-block-column {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 781px) {
  .htpc-ftr .htf-in {
    flex-wrap: wrap;
  }

  .htpc-ftr .htf-in > .wp-block-column {
    flex-basis: 100% !important;
    flex-grow: 1;
  }
}


/* ── Каталог (/shop/): по каруселі на категорію ──────────────────────────────
   Розмітку збирає плагін sharit-catalog, картки друкує штатний шорткод
   WooCommerce, тому всередині треку лежить звичайна сітка Woodmart
   (.products.wd-grid-g, display: grid). Перебиваємо її на рядок flex:
   селектори навмисно довгі й з !important — тема підключається після
   дочірньої й інакше виграє (§4b плану).
   ────────────────────────────────────────────────────────────────────────── */

/* Вивід before_shop_loop тема кладе у flex-рядок .wd-shop-tools — там жили
   лічильник і сортування, які ми зняли. Як flex-елемент хаб із min-width: auto
   роздувався до ширини вмісту (2116px при вікні 1440) і тягнув горизонтальну
   прокрутку всієї сторінки. Та сама пастка, що з полем відділення Нової Пошти. */
body.woocommerce-shop .wd-shop-tools > .sh-cat-hub {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

body.woocommerce-shop .sh-cat-row,
body.woocommerce-shop .sh-cat-track {
  min-width: 0;
}

body.woocommerce-shop .sh-cat-row + .sh-cat-row {
  margin-top: 34px;
}

body.woocommerce-shop .sh-cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

body.woocommerce-shop a.sh-cat-title {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sh-ink);
}

body.woocommerce-shop a.sh-cat-title:hover {
  color: var(--sh-accent);
}

body.woocommerce-shop .sh-cat-count {
  font-family: var(--sh-font-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sh-faint);
}

body.woocommerce-shop .sh-cat-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

body.woocommerce-shop a.sh-cat-all {
  font-size: 13px;
  font-weight: 700;
  color: var(--sh-text);
  white-space: nowrap;
}

body.woocommerce-shop a.sh-cat-all:hover {
  color: var(--sh-accent);
}

/* Тема нав'язує кнопкам height: 42px — звідси !important на розмірах. */
body.woocommerce-shop button.sh-cat-arrow {
  width: 36px !important;
  height: 36px !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sh-brd) !important;
  border-radius: var(--sh-btn-r-sm) !important;
  background: var(--sh-surface) !important;
  color: var(--sh-ink) !important;
  cursor: pointer;
  transition: border-color .15s ease;
}

body.woocommerce-shop button.sh-cat-arrow:hover:not(:disabled) {
  border-color: var(--sh-ink) !important;
}

body.woocommerce-shop button.sh-cat-arrow:disabled {
  opacity: .35;
  cursor: default;
}

/* Сам трек. Прокрутка нативна, тож каруселі робочі й без скрипта. */
body.woocommerce-shop .sh-cat-track {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 6px;
}

body.woocommerce-shop .sh-cat-track::-webkit-scrollbar {
  height: 6px;
}

body.woocommerce-shop .sh-cat-track::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--sh-brd);
}

body.woocommerce-shop .sh-cat-track > .woocommerce {
  width: 100%;
}

body.woocommerce-shop .sh-cat-track .products {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ширина картки — частка від видимої ширини треку, а не min-content:
   інакше довга назва товару розсовувала б картку (та сама пастка, що
   з полем відділення Нової Пошти). */
body.woocommerce-shop .sh-cat-track .products > .product-grid-item {
  flex: 0 0 calc((100% - 48px) / 4);
  min-width: 0;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  scroll-snap-align: start;
}

@media (max-width: 1024px) {
  body.woocommerce-shop .sh-cat-track .products > .product-grid-item {
    flex: 0 0 calc((100% - 32px) / 3);
  }
}

@media (max-width: 768px) {
  body.woocommerce-shop .sh-cat-row + .sh-cat-row {
    margin-top: 26px;
  }

  body.woocommerce-shop a.sh-cat-title {
    font-size: 17px;
  }

  /* 2.2 картки — щоб з першого погляду було видно, що ряд прокручується. */
  body.woocommerce-shop .sh-cat-track .products > .product-grid-item {
    flex: 0 0 calc((100% - 16px) / 2.2);
  }
}

/* ── Головна за макетом «Головна.dc.html» ───────────────────────────────────
   Розмітка лежить у самому записі сторінки «Головна» (id 398) — тут лише
   вигляд. Акцент лишили синім: у макеті головної він червоний (#e11d48),
   але решта макетів і вже зроблені сторінки сині, і власник обрав
   один колір на весь сайт. */

/* Герой. У макеті це картка в контейнері з радіусом 26px, а не смуга
   на всю ширину — знімаємо від'ємний відступ, яким її виносили за поля. */
body.home .htpc-hero-car {
  width: auto;
  margin-left: 0;
  margin-right: 0;
  border-radius: 26px;
  overflow: hidden;
}

body.home .htpc-hero-car .hhc-slide {
  min-height: 460px;
}

body.home .htpc-hero-car .hhc-in {
  padding: 52px 56px;
}

body.home .htpc-hero-car .hhc-t {
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

body.home .htpc-hero-car .hhc-in > a {
  height: var(--sh-btn-h);
  padding: 0 28px;
  border-radius: var(--sh-btn-r);
  background: var(--sh-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
}

body.home .htpc-hero-car .hhc-in > a:hover {
  background: #fff;
  color: var(--sh-ink);
}

/* Смуга переваг під героєм: у макеті це чотири картки, а не рядок тексту */
.sh-hm-usp {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.sh-hm-usp > a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  background: var(--sh-surface);
  border: 1px solid var(--sh-brd-soft);
  border-radius: var(--sh-r-xl);
  color: var(--sh-ink);
}

.sh-hm-usp > a:hover {
  border-color: var(--sh-ink);
  color: var(--sh-ink);
}

.sh-hm-usp-i {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--sh-bg);
  color: var(--sh-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sh-hm-usp-t {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sh-hm-usp-t b { font-size: 13.5px; font-weight: 800; }
.sh-hm-usp-t i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--sh-muted); }

/* Шапка секції: надзаголовок, назва і посилання праворуч */
.sh-hm-h {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 44px 0 18px;
}

.sh-hm-h-t {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sh-hm-h-t > span,
.sh-hm-eyebrow {
  font-family: var(--sh-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sh-accent);
}

.sh-hm-h-t h2 {
  margin: 0 !important;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--sh-ink);
}

.sh-hm-more {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

/* Категорії — вісім плиток в один ряд */
.sh-hm-cats {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}

.sh-hm-cats > a {
  min-height: 132px;
  padding: 20px 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  background: var(--sh-surface);
  border: 1px solid var(--sh-brd-soft);
  border-radius: var(--sh-r-card);
  color: var(--sh-ink);
}

.sh-hm-cats > a:hover {
  border-color: var(--sh-ink);
  color: var(--sh-ink);
}

.sh-hm-cats svg { color: var(--sh-accent); flex-shrink: 0; }
.sh-hm-cats span { font-size: 13.5px; font-weight: 700; line-height: 1.3; }

/* Підбір ПК */
.sh-hm-quiz {
  margin-top: 16px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--sh-surface);
  border: 1px solid var(--sh-brd-soft);
  border-radius: 20px;
}

.sh-hm-quiz-i {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--sh-promo-bg);
  color: var(--sh-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sh-hm-quiz-t {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 260px;
}

.sh-hm-quiz-t b { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.sh-hm-quiz-t i { font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--sh-text); }

.sh-hm-quiz-s {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sh-hm-quiz-s i {
  font-style: normal;
  font-family: var(--sh-font-mono);
  font-size: 11.5px;
  color: var(--sh-muted);
}

.sh-hm-quiz > a {
  height: 48px;
  padding: 0 22px;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--sh-btn-bg);
  color: var(--sh-btn-color);
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
}

.sh-hm-quiz > a:hover { background: var(--sh-btn-bg-hover); color: #fff; }

/* Trade-IN */
.sh-hm-trade {
  margin-top: 44px;
  padding: 40px 44px;
  background: var(--sh-ink);
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 36px;
  align-items: center;
}

.sh-hm-trade-l { display: flex; flex-direction: column; gap: 16px; }
.sh-hm-trade-l .sh-hm-eyebrow { color: var(--sh-topbar-accent); }

.sh-hm-trade-l h2 {
  margin: 0 !important;
  font-size: 34px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 22ch;
}

.sh-hm-trade-l p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
  color: #b9c2d4;
  max-width: 52ch;
}

.sh-hm-trade-b { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

.sh-hm-trade-b a {
  height: 50px;
  padding: 0 24px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.sh-hm-trade-b a:hover { border-color: #fff; color: #fff; }

.sh-hm-trade-b a.is-main {
  background: var(--sh-accent);
  border-color: var(--sh-accent);
  font-weight: 800;
}

.sh-hm-trade-b a.is-main:hover { background: #fff; border-color: #fff; color: var(--sh-ink); }

.sh-hm-trade-r { display: flex; flex-direction: column; gap: 10px; }

.sh-hm-trade-r span {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .06);
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: #e6eaf2;
}

.sh-hm-trade-r i {
  font-style: normal;
  font-family: var(--sh-font-mono);
  font-size: 12px;
  color: var(--sh-topbar-accent);
  flex-shrink: 0;
}

/* «Чому ми» і «Доставка» — двома картками поруч */
.sh-hm-two {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sh-hm-card {
  padding: 28px 30px;
  background: var(--sh-surface);
  border: 1px solid var(--sh-brd-soft);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sh-hm-card .sh-hm-h-t h2 { font-size: 24px; }

.sh-hm-why { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.sh-hm-why > div { display: flex; flex-direction: column; gap: 5px; }
.sh-hm-why b { font-size: 14px; font-weight: 800; }
.sh-hm-why i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--sh-text); line-height: 1.5; }

.sh-hm-dlv { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }

.sh-hm-dlv li {
  position: relative;
  margin: 0;
  padding-left: 22px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--sh-text);
  list-style: none;
}

.sh-hm-dlv li::before { position: absolute; left: 0; top: 0; color: var(--sh-ok); }

.sh-hm-ghost {
  height: 46px;
  padding: 0 20px;
  border-radius: 13px;
  border: 1px solid var(--sh-brd);
  color: var(--sh-ink);
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: auto;
}

.sh-hm-ghost:hover { border-color: var(--sh-ink); color: var(--sh-ink); }

@media (max-width: 1024px) {
  .sh-hm-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sh-hm-trade { grid-template-columns: 1fr; padding: 28px 24px; }
  .sh-hm-two { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  body.home .htpc-hero-car { border-radius: 18px; }
  body.home .htpc-hero-car .hhc-in { padding: 28px 22px; }
  body.home .htpc-hero-car .hhc-t { font-size: 30px; }
  .sh-hm-usp { grid-template-columns: 1fr 1fr; }
  .sh-hm-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-hm-h { margin-top: 32px; }
  .sh-hm-h-t h2 { font-size: 24px; }
  .sh-hm-why { grid-template-columns: 1fr; }
  .sh-hm-card { padding: 22px 20px; }
}

/* Правки після першого прогону головної.
   1. Тема підкреслює посилання в контенті — плитки й кнопки це не потрібно.
   2. `.entry-content i` у теми оголошено пізніше за наші правила й з тією ж
      вагою, тому курсив вигравав: додаємо body.home для ваги.
   3. Галочка в списку доставки — символом, а не escape-послідовністю. */
body.home .sh-hm-usp > a,
body.home .sh-hm-cats > a,
body.home .sh-hm-quiz > a,
body.home .sh-hm-trade-b a,
body.home .sh-hm-ghost,
body.home .sh-hm-more {
  text-decoration: none;
}

body.home .sh-hm-usp-t i,
body.home .sh-hm-quiz-t i,
body.home .sh-hm-quiz-s i,
body.home .sh-hm-trade-r i,
body.home .sh-hm-why i {
  font-style: normal;
}

body.home .sh-hm-dlv li {
  padding-left: 24px;
}

body.home .sh-hm-dlv li::before {
  content: "✓";
  font-weight: 700;
}

/* Підкреслення посилань: у теми правило `.entry-content a:not(.btn):not(.button)`
   важить 0,3,1 — двох класів у наших селекторах не вистачало. Додаємо
   .entry-content, щоб виграти вагою, а не !important. */
body.home .entry-content .sh-hm-usp > a,
body.home .entry-content .sh-hm-cats > a,
body.home .entry-content .sh-hm-quiz > a,
body.home .entry-content .sh-hm-trade-b a,
body.home .entry-content .sh-hm-ghost,
body.home .entry-content .sh-hm-more,
body.home .entry-content .htpc-hero-car .hhc-in > a {
  text-decoration: none;
}


/* ==========================================================================
   СТАТИЧНІ СТОРІНКИ — макет «Сторінки - Sharit.dc.html»
   Доставка і оплата (1076), Гарантія (1077), Trade-IN (1078),
   Оплата частинами (1079), Про нас (1330), Контакти (1331)
   Акцент макета #e11d48 замінено на var(--sh-accent) — рішення власника.
   ========================================================================== */

.page-id-1076 .wd-page-title,
.page-id-1077 .wd-page-title,
.page-id-1078 .wd-page-title,
.page-id-1079 .wd-page-title,
.page-id-1330 .wd-page-title,
.page-id-1331 .wd-page-title { display: none; }

.page-id-1076 .site-content,
.page-id-1077 .site-content,
.page-id-1078 .site-content,
.page-id-1079 .site-content,
.page-id-1330 .site-content,
.page-id-1331 .site-content { padding-top: 28px; }

.entry-content .sh-pg { display: flex; flex-direction: column; gap: 14px; font-family: var(--sh-font); color: var(--sh-ink); }
.entry-content .sh-pg * { box-sizing: border-box; }
.entry-content .sh-pg p { margin: 0; }
.entry-content .sh-pg a { text-decoration: none; }

/* --- хлібні крихти --- */
.entry-content .sh-pg-crumbs { font-size: 12.5px; font-weight: 600; color: var(--sh-muted); margin-bottom: 2px; }
.entry-content .sh-pg-crumbs a { color: var(--sh-muted); }
.entry-content .sh-pg-crumbs a:hover { color: var(--sh-ink); }
.entry-content .sh-pg-crumbs i { color: #c3cbdb; font-style: normal; margin: 0 5px; }

/* --- темний блок із заголовком --- */
.entry-content .sh-pg-hero { background: #0d1526; border-radius: 24px; padding: 40px 44px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; }
.entry-content .sh-pg-hero.is-col { display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
.entry-content .sh-pg-hero-t { display: flex; flex-direction: column; gap: 16px; }
.entry-content .sh-pg-badge { align-self: flex-start; background: rgba(47,107,243,.16); border: 1px solid rgba(47,107,243,.45); color: #9dbcff; border-radius: var(--sh-r-pill); padding: 6px 13px; font-size: 12px; font-weight: 700; }
.entry-content .sh-pg-hero h1 { margin: 0; font-size: 42px; line-height: 1.06; font-weight: 800; letter-spacing: -0.035em; color: #fff; text-wrap: pretty; }
.entry-content .sh-pg-lead { font-size: 15.5px; line-height: 1.6; font-weight: 500; color: #b9c2d4; max-width: 56ch; }
.entry-content .sh-pg-lead strong { color: #fff; }
.entry-content .sh-pg-hero ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.55; color: #b9c2d4; font-weight: 500; }
.entry-content .sh-pg-hero ul strong { color: #fff; }

.entry-content .sh-pg-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.entry-content .sh-pg-stat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 16px; }
.entry-content .sh-pg-stat b { display: block; font-family: var(--sh-font-mono); font-size: 20px; font-weight: 500; color: #fff; }
.entry-content .sh-pg-stat span { display: block; font-size: 12px; color: var(--sh-muted); font-weight: 600; margin-top: 4px; }

.entry-content .sh-pg-flow { display: flex; flex-direction: column; gap: 12px; }
.entry-content .sh-pg-flow div { display: flex; gap: 14px; align-items: flex-start; }
.entry-content .sh-pg-flow i { font-family: var(--sh-font-mono); font-size: 13px; font-style: normal; color: var(--sh-accent); width: 26px; flex-shrink: 0; }
.entry-content .sh-pg-flow span { font-size: 14.5px; color: var(--sh-topbar-text); font-weight: 600; line-height: 1.5; }

.entry-content .sh-pg-hero-sep { border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.entry-content .sh-pg-hero-sep b { font-size: 13px; color: #fff; }

.entry-content .sh-pg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.entry-content .sh-pg-hero .sh-pg-chips span { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--sh-r-pill); padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--sh-topbar-text); }

/* --- сітки --- */
.entry-content .sh-pg-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.entry-content .sh-pg-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.entry-content .sh-pg-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start; }
.entry-content .sh-pg-split-w { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
.entry-content .sh-pg-stack { display: flex; flex-direction: column; gap: 14px; }
.entry-content .sh-pg-narrow { max-width: 760px; }

/* --- біла картка --- */
.entry-content .sh-pg-card { background: var(--sh-surface); border: 1px solid var(--sh-brd-soft); border-radius: 20px; padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.entry-content .sh-pg-card h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--sh-ink); }
.entry-content .sh-pg-card p { font-size: 14px; line-height: 1.6; color: var(--sh-text); font-weight: 500; }
.entry-content .sh-pg-card ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; font-size: 14px; line-height: 1.55; color: var(--sh-text); font-weight: 500; }
.entry-content .sh-pg-card li::marker { color: var(--sh-faint); }
.entry-content .sh-pg-card strong { color: var(--sh-ink); }
.entry-content .sh-pg-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--sh-bg); display: flex; align-items: center; justify-content: center; color: var(--sh-accent); flex-shrink: 0; }
.entry-content .sh-pg-h { margin: 26px 0 14px; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--sh-ink); }

/* Квадратні кроки 01…04 */
.entry-content .sh-pg-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.entry-content .sh-pg-steps.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.entry-content .sh-pg-step { background: var(--sh-bg); border-radius: 13px; padding: 16px; }
.entry-content .sh-pg-step i { font-family: var(--sh-font-mono); font-style: normal; font-size: 12px; color: var(--sh-accent); }
.entry-content .sh-pg-step span { display: block; font-size: 13px; font-weight: 700; margin-top: 7px; line-height: 1.4; color: var(--sh-ink); }

/* --- акордеон питань --- */
.entry-content .sh-pg-faq { display: flex; flex-direction: column; gap: 8px; }
.entry-content .sh-pg-faq details { background: var(--sh-surface); border: 1px solid var(--sh-brd-soft); border-radius: var(--sh-r-xl); overflow: hidden; }
.entry-content .sh-pg-faq summary { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--sh-ink); list-style: none; }
.entry-content .sh-pg-faq summary::-webkit-details-marker { display: none; }
.entry-content .sh-pg-faq summary::after { content: '+'; font-family: var(--sh-font-mono); font-size: 20px; line-height: 1; color: var(--sh-accent); transition: transform .18s ease; flex-shrink: 0; }
.entry-content .sh-pg-faq details[open] summary::after { transform: rotate(45deg); }
.entry-content .sh-pg-faq p { padding: 0 22px 20px; font-size: 14px; line-height: 1.65; color: var(--sh-text); font-weight: 500; }

/* --- бічна картка контактів --- */
.entry-content .sh-pg-eyebrow { font-family: var(--sh-font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sh-accent); }
.entry-content .sh-pg-side b { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.entry-content .sh-pg-tel { font-family: var(--sh-font-mono); font-size: 20px; color: var(--sh-ink); }
.entry-content .sh-pg-tel:hover { color: var(--sh-accent); }
.entry-content .sh-pg-side small { font-size: 13.5px; color: var(--sh-text); font-weight: 600; line-height: 1.6; }

/* --- форми та калькулятори --- */
.entry-content .sh-pg-form { background: var(--sh-surface); border: 1px solid var(--sh-brd-soft); border-radius: 24px; padding: 30px 32px; display: flex; flex-direction: column; gap: 16px; }
.entry-content .sh-pg-form h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.025em; }
.entry-content .sh-pg-form .sh-pg-note { font-size: 13px; color: var(--sh-muted); font-weight: 600; line-height: 1.5; }
.entry-content .sh-pg-form a.sh-pg-btn { color: #fff; text-decoration: none; }
.entry-content .sh-pg-form a.sh-pg-btn:hover { opacity: .92; color: #fff; }
.entry-content .sh-pg-field { display: flex; flex-direction: column; gap: 7px; }
.entry-content .sh-pg-field > span { font-size: 12.5px; font-weight: 700; color: var(--sh-text); }
.entry-content .sh-pg-field input, .entry-content .sh-pg-field select, .entry-content .sh-pg-field textarea { width: 100%; padding: 0 12px; height: 46px; border: 1px solid var(--sh-brd); border-radius: 12px; font-family: var(--sh-font); font-size: 14px; font-weight: 600; color: var(--sh-ink); background: var(--sh-surface); outline: none; }
.entry-content .sh-pg-field input[type="number"], .entry-content .sh-pg-field input[type="tel"] { font-family: var(--sh-font-mono); font-size: 16px; }
.entry-content .sh-pg-field input:focus, .entry-content .sh-pg-field select:focus, .entry-content .sh-pg-field textarea:focus { border-color: var(--sh-ink); }
.entry-content .sh-pg-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.entry-content .sh-pg-opts button { height: 40px; padding: 0 15px; border-radius: 11px; font-family: var(--sh-font); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; background: var(--sh-surface); color: var(--sh-text); border: 1px solid var(--sh-brd); }
.entry-content .sh-pg-opts button.is-on { background: var(--sh-ink); color: #fff; border-color: var(--sh-ink); }
.entry-content .sh-pg-btn { height: 50px; border: 0; border-radius: 13px; background: var(--sh-accent); color: #fff; font-family: var(--sh-font); font-size: 15px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 24px; }
.entry-content .sh-pg-btn:hover { background: var(--sh-ink); color: #fff; }
.entry-content .sh-pg-out { background: var(--sh-bg); border: 1px solid var(--sh-brd-soft); border-radius: var(--sh-r-xl); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.entry-content .sh-pg-out b { font-size: 12.5px; font-weight: 700; color: var(--sh-muted); }
.entry-content .sh-pg-out strong { font-family: var(--sh-font-mono); font-size: 24px; font-weight: 500; color: var(--sh-ink); }
.entry-content .sh-pg-out small { font-size: 12.5px; color: var(--sh-muted); font-weight: 600; line-height: 1.5; }
.entry-content .sh-pg-calc-out { background: #0d1526; border-radius: 18px; padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.entry-content .sh-pg-calc-out b { font-size: 12.5px; font-weight: 700; color: var(--sh-muted); }
.entry-content .sh-pg-calc-out strong { font-family: var(--sh-font-mono); font-size: 30px; font-weight: 500; color: #fff; }
.entry-content .sh-pg-calc-out small { font-size: 12.5px; color: var(--sh-muted); font-weight: 600; }
.entry-content .sh-pg-sched { display: flex; flex-direction: column; gap: 8px; }
.entry-content .sh-pg-sched div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--sh-bg); border-radius: 12px; }
.entry-content .sh-pg-sched span { font-size: 13px; font-weight: 700; color: var(--sh-text); }
.entry-content .sh-pg-sched b { font-family: var(--sh-font-mono); font-size: 14px; font-weight: 500; color: var(--sh-ink); }

/* --- карта і зображення --- */
.entry-content .sh-pg-map { height: 260px; border-radius: 14px; overflow: hidden; background: var(--sh-bg); }
.entry-content .sh-pg-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* --- соцмережі --- */
.entry-content .sh-pg-socials { display: flex; flex-wrap: wrap; gap: 8px; }
.entry-content .sh-pg-socials a { border: 1px solid var(--sh-brd); border-radius: var(--sh-r-pill); padding: 8px 15px; font-size: 12.5px; font-weight: 700; color: var(--sh-ink); }
.entry-content .sh-pg-socials a:hover { border-color: var(--sh-ink); color: var(--sh-ink); }

/* --- рядок контактів унизу «Про нас» --- */
.entry-content .sh-pg-bar { background: var(--sh-surface); border: 1px solid var(--sh-brd-soft); border-radius: 20px; padding: 28px 30px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.entry-content .sh-pg-bar div { display: flex; flex-direction: column; gap: 4px; }
.entry-content .sh-pg-bar span { font-size: 12.5px; font-weight: 700; color: var(--sh-muted); }
.entry-content .sh-pg-bar b { font-size: 15px; font-weight: 700; color: var(--sh-ink); }
.entry-content .sh-pg-bar a { font-family: var(--sh-font-mono); font-size: 19px; color: var(--sh-ink); }
.entry-content .sh-pg-bar a:hover { color: var(--sh-accent); }

/* --- нижній заклик --- */
.entry-content .sh-pg-cta { background: var(--sh-accent); border-radius: 24px; padding: 36px 44px; margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.entry-content .sh-pg-cta-t { display: flex; flex-direction: column; gap: 8px; }
.entry-content .sh-pg-cta-t b { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -0.03em; }
.entry-content .sh-pg-cta-t span { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.85); }
.entry-content .sh-pg-cta-b { display: flex; gap: 12px; flex-wrap: wrap; }
.entry-content .sh-pg-cta-b a { height: 52px; padding: 0 26px; border-radius: 13px; background: #fff; color: var(--sh-ink); font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; }
.entry-content .sh-pg-cta-b a:hover { background: var(--sh-ink); color: #fff; }
.entry-content .sh-pg-cta-b a.is-ghost { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; font-weight: 700; font-family: var(--sh-font-mono); }
.entry-content .sh-pg-cta-b a.is-ghost:hover { border-color: #fff; background: transparent; color: #fff; }

/* --- планшет --- */
@media (max-width: 1024px) {
	.entry-content .sh-pg-hero { grid-template-columns: 1fr; gap: 26px; padding: 32px 28px; }
	.entry-content .sh-pg-hero h1 { font-size: 34px; }
	.entry-content .sh-pg-g3, .entry-content .sh-pg-g2, .entry-content .sh-pg-split, .entry-content .sh-pg-split-w { grid-template-columns: 1fr; }
	.entry-content .sh-pg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- телефон --- */
@media (max-width: 767px) {
	.entry-content .sh-pg-hero { padding: 26px 20px; border-radius: 20px; }
	.entry-content .sh-pg-hero h1 { font-size: 28px; }
	.entry-content .sh-pg-card, .entry-content .sh-pg-form { padding: 22px 20px; }
	.entry-content .sh-pg-steps, .entry-content .sh-pg-steps.is-3 { grid-template-columns: 1fr 1fr; }
	.entry-content .sh-pg-cta { padding: 26px 20px; }
	.entry-content .sh-pg-cta-t b { font-size: 22px; }
	.entry-content .sh-pg-bar { gap: 18px; }
	.entry-content .sh-pg-h { font-size: 22px; }
}


/* ==========================================================================
   БЛОГ, СТАТТЯ ТА ВИКУП ТЕХНІКИ — макет «Сторінки - Sharit.dc.html»
   Стрічка блога (1126), запис блога, Викуп техніки (11027)
   ========================================================================== */

.page-id-11027 .wd-page-title,
body.blog .wd-page-title { display: none; }
.page-id-11027 .site-content,
body.blog .site-content { padding-top: 28px; }

/* Кроки 01…05 у білій картці */
.entry-content .sh-pg-flow-light span { color: var(--sh-text); }
.entry-content .sh-pg-flow-light strong { color: var(--sh-ink); }

/* --- смуга пошуку і категорій над стрічкою --- */
.entry-content .sh-pg-blogbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.entry-content .sh-pg-search { display: flex; align-items: center; gap: 9px; height: 46px; flex: 1; min-width: 260px; padding: 0 14px; border: 1px solid var(--sh-brd); background: var(--sh-surface); border-radius: 13px; color: var(--sh-muted); margin: 0; }
.entry-content .sh-pg-search input[type="search"] { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--sh-font); font-size: 14px; font-weight: 600; color: var(--sh-ink); height: 42px; padding: 0; }
.entry-content .sh-pg-blogcats { display: flex; gap: 8px; flex-wrap: wrap; }
.entry-content .sh-pg-blogcats a { height: 40px; padding: 0 15px; border-radius: 11px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; background: var(--sh-surface); color: var(--sh-text); border: 1px solid var(--sh-brd); }
.entry-content .sh-pg-blogcats a:hover { border-color: var(--sh-ink); color: var(--sh-ink); }
.entry-content .sh-pg-blogcats a.is-on { background: var(--sh-ink); color: #fff; border-color: var(--sh-ink); }

/* --- сітка стрічки: картка статті з макета --- */
body.blog .wd-blog-holder,
body.archive.category .wd-blog-holder,
body.search .wd-blog-holder { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }

body.blog .wd-post.blog-post-loop,
body.archive.category .wd-post.blog-post-loop,
body.search .wd-post.blog-post-loop {
	width: auto;
	margin: 0;
	background: var(--sh-surface);
	border: 1px solid var(--sh-brd-soft);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: none;
}
body.blog .wd-post.blog-post-loop:hover,
body.archive.category .wd-post.blog-post-loop:hover,
body.search .wd-post.blog-post-loop:hover { border-color: var(--sh-ink); box-shadow: none; }

.wd-blog-holder .wd-post-inner { display: flex; flex-direction: column; height: 100%; background: transparent; border: 0; box-shadow: none; padding: 0; }
.wd-blog-holder .wd-post-thumb { margin: 0; border-radius: 0; }
.wd-blog-holder .wd-post-img { border-radius: 0; }
.wd-blog-holder .wd-post-img img { display: block; width: 100%; height: 180px; object-fit: cover; border-radius: 0; }
.wd-blog-holder .wd-post-date { display: none; }

.wd-blog-holder .wd-post-content {
	padding: 20px 22px 22px;
	display: grid;
	grid-template-columns: max-content 1fr;
	grid-template-areas: "cat date" "title title" "exc exc" "more more";
	align-items: center;
	gap: 10px 10px;
	flex: 1;
	background: transparent;
}
.wd-blog-holder .wd-post-cat { grid-area: cat; margin: 0; padding: 0; background: none; }
.wd-blog-holder .wd-post-cat a { font-size: 11.5px; font-weight: 700; color: var(--sh-accent); background: none; padding: 0; text-transform: none; letter-spacing: 0; }
.wd-blog-holder .wd-post-meta { grid-area: date; margin: 0; padding: 0; border: 0; justify-content: flex-start; }
.wd-blog-holder .wd-post-meta .wd-post-author,
.wd-blog-holder .wd-post-meta .wd-post-share,
.wd-blog-holder .wd-post-meta .wd-post-comments { display: none; }
.wd-blog-holder .wd-post-meta .wd-modified-date,
.wd-blog-holder .wd-post-meta .wd-post-date-meta { font-family: var(--sh-font-mono); font-size: 11.5px; font-weight: 500; color: var(--sh-muted); }
.wd-blog-holder .wd-post-meta .wd-modified-date::before { content: '· '; color: var(--sh-muted); }
.wd-blog-holder .wd-post-title { grid-area: title; margin: 0; font-size: 16.5px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; text-wrap: pretty; }
.wd-blog-holder .wd-post-title a { color: var(--sh-ink); }
.wd-blog-holder .wd-post-title a:hover { color: var(--sh-accent); }
.wd-blog-holder .wd-post-excerpt { grid-area: exc; margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--sh-text); font-weight: 500; }
.wd-blog-holder .wd-post-read-more { grid-area: more; margin: 0; align-self: end; }
.wd-blog-holder .wd-post-read-more a { font-size: 13px; font-weight: 800; color: var(--sh-accent); border: 0; padding: 0; background: none; }
.wd-blog-holder .wd-post-read-more a::after { content: ' →'; }
.wd-blog-holder .wd-post-read-more a:hover { color: var(--sh-ink); }

/* --- запис блога --- */
body.single-post .post-single-page {
	background: var(--sh-surface);
	border: 1px solid var(--sh-brd-soft);
	border-radius: 24px;
	padding: 36px 44px 44px;
	max-width: 880px;
	margin: 0 auto;
}
body.single-post .wd-single-post-header { margin-bottom: 18px; }
body.single-post .wd-single-post-header .wd-post-cat { margin-bottom: 10px; }
body.single-post .wd-single-post-header .wd-post-cat a { font-size: 12px; font-weight: 700; color: var(--sh-accent); background: none; padding: 0; }
body.single-post .wd-single-post-header h1 { font-size: 38px; line-height: 1.1; font-weight: 800; letter-spacing: -0.035em; color: var(--sh-ink); text-wrap: pretty; margin: 0 0 14px; }
body.single-post .wd-post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 0; border-top: 1px solid var(--sh-brd-faint); border-bottom: 1px solid var(--sh-brd-faint); font-size: 12.5px; font-weight: 600; color: var(--sh-muted); }
body.single-post .wd-post-meta a { color: var(--sh-ink); font-weight: 800; }
body.single-post .wd-post-meta time { font-family: var(--sh-font-mono); font-weight: 500; }
body.single-post .wd-post-meta img.avatar { border-radius: 50%; }

body.single-post .post-single-page .wd-entry-content { font-size: 15.5px; line-height: 1.75; color: #2c3651; font-weight: 500; }
body.single-post .post-single-page .wd-entry-content h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; color: var(--sh-ink); margin: 28px 0 10px; }
body.single-post .post-single-page .wd-entry-content h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--sh-ink); margin: 22px 0 8px; }
body.single-post .post-single-page .wd-entry-content p { margin: 0 0 14px; }
body.single-post .post-single-page .wd-entry-content ul,
body.single-post .post-single-page .wd-entry-content ol { margin: 0 0 16px; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
body.single-post .post-single-page .wd-entry-content li::marker { color: var(--sh-faint); }
body.single-post .post-single-page .wd-entry-content strong { color: var(--sh-ink); }
body.single-post .post-single-page .wd-entry-content img { border-radius: var(--sh-r-lg); }
body.single-post .post-single-page .wd-entry-content table { border-radius: var(--sh-r-xl); overflow: hidden; }
body.single-post .post-single-page .wd-entry-content blockquote { background: var(--sh-bg); border-left: 3px solid var(--sh-accent); border-radius: var(--sh-r-xl); padding: 18px 22px; margin: 0 0 16px; font-size: 15px; }
body.single-post .comments-area { max-width: 880px; margin: 24px auto 0; background: var(--sh-surface); border: 1px solid var(--sh-brd-soft); border-radius: 24px; padding: 28px 32px; }

/* --- планшет і телефон --- */
@media (max-width: 1024px) {
	body.blog .wd-blog-holder,
	body.archive.category .wd-blog-holder,
	body.search .wd-blog-holder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.single-post .post-single-page { padding: 28px 26px 32px; }
	body.single-post .wd-single-post-header h1 { font-size: 30px; }
}
@media (max-width: 767px) {
	body.blog .wd-blog-holder,
	body.archive.category .wd-blog-holder,
	body.search .wd-blog-holder { grid-template-columns: 1fr; }
	.entry-content .sh-pg-blogbar { gap: 10px; }
	body.single-post .post-single-page { padding: 22px 18px 26px; border-radius: 20px; }
	body.single-post .wd-single-post-header h1 { font-size: 25px; }
	body.single-post .comments-area { padding: 20px 18px; }
}


/* Виправлення після перевірки стрічки: тема тягне рубрику на -37px,
   а мета-рядок у циклі містить лише дату зміни й кнопки поділитися. */
body.blog .wd-blog-holder .wd-post-content,
body.archive.category .wd-blog-holder .wd-post-content,
body.search .wd-blog-holder .wd-post-content {
	grid-template-columns: 1fr;
	grid-template-areas: "cat" "title" "exc" "more";
	align-items: start;
	gap: 10px;
}
body.blog .wd-blog-holder .wd-post-cat,
body.archive.category .wd-blog-holder .wd-post-cat,
body.search .wd-blog-holder .wd-post-cat { margin: 0; padding: 0; }
body.blog .wd-blog-holder .wd-post-meta,
body.archive.category .wd-blog-holder .wd-post-meta,
body.search .wd-blog-holder .wd-post-meta { display: none; }

/* Дата — чипом на обкладинці, у форматі «17 Сер» з теми */
body.blog .wd-blog-holder .wd-post-thumb,
body.archive.category .wd-blog-holder .wd-post-thumb,
body.search .wd-blog-holder .wd-post-thumb { position: relative; }
body.blog .wd-blog-holder .wd-post-date.wd-style-with-bg,
body.archive.category .wd-blog-holder .wd-post-date.wd-style-with-bg,
body.search .wd-blog-holder .wd-post-date.wd-style-with-bg {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	width: auto;
	height: auto;
	min-width: 0;
	padding: 5px 11px;
	border: 0;
	border-radius: var(--sh-r-pill);
	background: rgba(13, 21, 38, .82);
	box-shadow: none;
}
body.blog .wd-blog-holder .wd-post-date .post-date-day,
body.blog .wd-blog-holder .wd-post-date .post-date-month,
body.archive.category .wd-blog-holder .wd-post-date .post-date-day,
body.archive.category .wd-blog-holder .wd-post-date .post-date-month,
body.search .wd-blog-holder .wd-post-date .post-date-day,
body.search .wd-blog-holder .wd-post-date .post-date-month {
	font-family: var(--sh-font-mono);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1;
	color: #fff;
	margin: 0;
	padding: 0;
	background: none;
}


/* ==========================================================================
   ОНОВЛЕННЯ МАКЕТА 18.08.2026: смуга розділів з іконками замість хлібних
   крихт, сторінки «Бонуси», «Викуп», заглушки та юридичні тексти
   ========================================================================== */

/* --- смуга розділів (84×84 плитки з іконками) --- */
.entry-content .sh-pg-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.entry-content .sh-pg-tabs a {
	width: 84px; height: 84px; padding: 0 6px;
	border-radius: 14px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
	font-size: 12px; font-weight: 700; line-height: 1.15; text-align: center;
	background: var(--sh-surface); color: var(--sh-text); border: 1px solid var(--sh-brd);
	flex-shrink: 0;
}
.entry-content .sh-pg-tabs a:hover { border-color: var(--sh-ink); color: var(--sh-ink); }
.entry-content .sh-pg-tabs a.is-on { background: var(--sh-ink); color: #fff; border-color: var(--sh-ink); }
.entry-content .sh-pg-tabs svg { flex-shrink: 0; }

/* --- заглушка сторінки без тексту --- */
.entry-content .sh-pg-badge.is-neutral { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: var(--sh-topbar-text); }
.entry-content .sh-pg-empty {
	background: var(--sh-surface);
	border: 1px dashed #d6dbe6;
	border-radius: 20px;
	padding: 44px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--sh-muted);
}

/* --- юридичний текст у білій картці --- */
.entry-content .sh-pg-legal { background: var(--sh-surface); border: 1px solid var(--sh-brd-soft); border-radius: 20px; padding: 32px 36px; max-width: 900px; }
.entry-content .sh-pg-legal h2 { margin: 0 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -0.025em; color: var(--sh-ink); }
.entry-content .sh-pg-legal h3 { margin: 24px 0 8px; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--sh-ink); }
.entry-content .sh-pg-legal p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.7; color: var(--sh-text); font-weight: 500; }
.entry-content .sh-pg-legal ul,
.entry-content .sh-pg-legal ol { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.6; color: var(--sh-text); font-weight: 500; }
.entry-content .sh-pg-legal li::marker { color: var(--sh-faint); }
.entry-content .sh-pg-legal strong { color: var(--sh-ink); }
.entry-content .sh-pg-legal a { color: var(--sh-accent); font-weight: 700; }

/* --- калькулятор бонусів --- */
.entry-content .sh-pg-bonus {
	background: var(--sh-bg);
	border: 1px solid var(--sh-brd-soft);
	border-radius: 20px;
	padding: 28px 30px;
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 30px;
	align-items: center;
}
.entry-content .sh-pg-bonus-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.entry-content .sh-pg-bonus-out div { background: var(--sh-surface); border: 1px solid var(--sh-brd-soft); border-radius: 14px; padding: 16px 18px; }
.entry-content .sh-pg-bonus-out span { display: block; font-size: 12px; font-weight: 700; color: var(--sh-muted); }
.entry-content .sh-pg-bonus-out b { display: block; font-family: var(--sh-font-mono); font-size: 22px; font-weight: 500; margin-top: 5px; color: var(--sh-ink); }
.entry-content .sh-pg-bonus-out b.is-accent { color: var(--sh-accent); }

/* --- форма бота викупу в стилі макета --- */
.entry-content .sh-pg-bbform form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.entry-content .sh-pg-bbform label { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--sh-text); }
.entry-content .sh-pg-bbform input[type="text"],
.entry-content .sh-pg-bbform input[type="tel"],
.entry-content .sh-pg-bbform input[type="number"],
.entry-content .sh-pg-bbform select,
.entry-content .sh-pg-bbform textarea {
	width: 100%;
	height: 50px;
	padding: 0 14px;
	border: 1px solid var(--sh-brd);
	border-radius: 13px;
	background: var(--sh-surface);
	font-family: var(--sh-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--sh-ink);
	outline: none;
}
.entry-content .sh-pg-bbform input[type="tel"],
.entry-content .sh-pg-bbform input[type="number"] { font-family: var(--sh-font-mono); font-size: 15px; font-weight: 500; }
.entry-content .sh-pg-bbform textarea { height: auto; min-height: 92px; padding: 12px 14px; font-weight: 500; resize: vertical; }
.entry-content .sh-pg-bbform input:focus,
.entry-content .sh-pg-bbform select:focus,
.entry-content .sh-pg-bbform textarea:focus { border-color: var(--sh-ink); }
.entry-content .sh-pg-bbform input[type="checkbox"] { width: auto; height: auto; margin-right: 8px; accent-color: var(--sh-accent); }
.entry-content .sh-pg-bbform button[type="submit"],
.entry-content .sh-pg-bbform .button {
	height: 52px;
	border: 0;
	border-radius: 13px;
	background: var(--sh-accent);
	color: #fff;
	font-family: var(--sh-font);
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
}
.entry-content .sh-pg-bbform button[type="submit"]:hover,
.entry-content .sh-pg-bbform .button:hover { background: var(--sh-ink); color: #fff; }

/* --- планшет і телефон --- */
@media (max-width: 1024px) {
	.entry-content .sh-pg-bonus { grid-template-columns: 1fr; gap: 18px; }
	.entry-content .sh-pg-legal { padding: 26px 22px; }
}
@media (max-width: 767px) {
	.entry-content .sh-pg-tabs { gap: 6px; }
	.entry-content .sh-pg-tabs a { width: 76px; height: 76px; font-size: 11px; }
	.entry-content .sh-pg-bonus-out { grid-template-columns: 1fr; }
	.entry-content .sh-pg-empty { padding: 30px 20px; }
}

/* Нові сторінки розділів — заголовок теми ховаємо, H1 у темному блоці */
.page-id-11062 .wd-page-title,
.page-id-11778 .wd-page-title,
.page-id-14 .wd-page-title,
.page-id-3 .wd-page-title { display: none; }
/* Меню розділів іде одразу під шапкою — зайвий відступ прибрано.
   Прив'язка до .sh-pg, а не до id: розділів п'ять, а список id був на чотири. */
.wd-page-content:has(.sh-pg) .wd-page-title { display: none; }
.wd-page-content:has(.sh-pg) .site-content,
.wd-page-content:has(.sh-pg) .wd-content-layout { padding-top: 0; }


/* ── Порожній кошик у панелі — макет «Кошик — порожній» ───────────
   Розмітку дає sharit-cart/mini-cart-empty.php: він підміняє шаблон
   теми тільки тоді, коли в кошику нічого немає. */

/* Клас теми в селекторі — щоб її власні відступи не переважили. */
.wd-empty-mini-cart.sh-cempty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 32px 24px 26px;
  text-align: center;
}

/* Тема малює власну іконку псевдоелементом — вона тут зайва. */
.wd-empty-mini-cart.sh-cempty::before {
  display: none;
}

.sh-cempty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: var(--sh-bg);
  color: var(--sh-brd-hover);
}

.sh-cempty-icon svg {
  width: 40px;
  height: 40px;
}

.sh-cempty-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sh-ink);
}

.sh-cempty .sh-cempty-text {
  max-width: 340px;
  margin: -8px 0 0;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sh-muted);
  text-wrap: pretty;
}

.sh-cempty-acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  margin-top: 2px;
}

.sh-cempty .sh-cempty-acts > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none !important;
}

.sh-cempty .sh-cempty-wish {
  border: 1px solid var(--sh-brd);
  background: #fff;
  color: var(--sh-ink) !important;
}

.sh-cempty .sh-cempty-wish:hover {
  background: var(--sh-bg);
}

.sh-cempty .sh-cempty-shop {
  border: 0;
  background: var(--sh-ink);
  color: #fff !important;
}

.sh-cempty .sh-cempty-shop:hover {
  background: var(--sh-accent);
}

/* Підвал панелі порожній — кнопки вже стоять у самому блоці. */
.sh-cartpanel .shopping-cart-widget-footer.wd-cart-empty {
  display: none;
}

/* Порожній кошик короткий — прокрутка тут зайва. Тема ставить обмеження
   висоти на смугу прокрутки списку товарів; для порожнього стану знімаємо,
   щоб панель просто стиснулась під вміст. */
.sh-cartpanel .shopping-cart-widget-body:has(.sh-cempty),
.sh-cartpanel .wd-scroll-content:has(.sh-cempty) {
  flex: 0 0 auto;
  max-height: none;
  overflow: visible;
}

/* Хрестик: тема дає кнопкам свої padding'и й радіус (виходило 39×41 без
   заокруглення), тож задаємо розмір самі, а риски центруємо трансформом —
   жодних відступів «на око», які й з'їхали на телефоні. */
.sh-cartpanel .sh-cartpanel-head .sh-cartpanel-x {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--sh-brd);
  border-radius: 12px;
  background: #fff;
  color: var(--sh-text);
  font-size: 0;
  line-height: 1;
  cursor: pointer;
}

.sh-cartpanel .sh-cartpanel-head .sh-cartpanel-x::before,
.sh-cartpanel .sh-cartpanel-head .sh-cartpanel-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: 0;
  border-radius: 2px;
  background: currentColor;
}

.sh-cartpanel .sh-cartpanel-head .sh-cartpanel-x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.sh-cartpanel .sh-cartpanel-head .sh-cartpanel-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.sh-cartpanel .sh-cartpanel-head .sh-cartpanel-x:hover {
  border-color: var(--sh-ink);
  background: var(--sh-bg);
}

@media (max-width: 480px) {
  .wd-empty-mini-cart.sh-cempty {
    gap: 14px;
    padding: 24px 18px 20px;
  }

  .sh-cempty-icon {
    width: 72px;
    height: 72px;
  }

  .sh-cempty-icon svg {
    width: 32px;
    height: 32px;
  }

  .sh-cempty-title {
    font-size: 17px;
  }

  .sh-cempty .sh-cempty-text {
    max-width: none;
    font-size: 14px;
  }

  .sh-cempty-acts {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sh-cempty .sh-cempty-acts > a {
    min-height: 48px;
  }

  .sh-cartpanel .sh-cartpanel-head {
    padding: 12px 14px;
  }

  .sh-cartpanel .sh-cartpanel-head .sh-cartpanel-x {
    width: 36px;
    height: 36px;
  }
}

/* Сторінка /cart/ показує той самий стан — тримаємо іконку круглою. */
.sh-empty-icon {
  width: 96px;
  height: 96px;
  border-radius: 999px;
}

/* ── Кнопка кошика в картці на головній ────────────────────────────
   Розмітку дає sharit_home_loop_buy() з functions.php: звичайна кнопка
   WooCommerce у власній обгортці .sh-card-buy. Селектори з класом картки —
   щоб кнопкові стилі теми не переважили. */

.product-grid-item .sh-card-buy {
	margin-top: -2px;
}

.product-grid-item .sh-card-buy .button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 12px;
	background: var(--sh-ink);
	color: #fff;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	text-decoration: none !important;
	transition: background .15s;
}

.product-grid-item .sh-card-buy .button::before {
	content: "";
	flex: none;
	width: 17px;
	height: 17px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='17.5' cy='20' r='1.6'/%3E%3Cpath d='M2 3h2.4l1.2 5'/%3E%3Cpath d='M5.6 8H21l-1.7 7.2H8.2z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='17.5' cy='20' r='1.6'/%3E%3Cpath d='M2 3h2.4l1.2 5'/%3E%3Cpath d='M5.6 8H21l-1.7 7.2H8.2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.product-grid-item .sh-card-buy .button:hover {
	background: var(--sh-accent);
	color: #fff;
}

/* Поки летить ajax-запит — кнопка неактивна, без стрибка розмітки. */
.product-grid-item .sh-card-buy .button.loading {
	opacity: .65;
	pointer-events: none;
}

/* WooCommerce дописує посилання «Переглянути кошик» — у картці воно зайве,
   бо одразу після додавання відкривається панель кошика. */
.product-grid-item .sh-card-buy .added_to_cart {
	display: none;
}

/* На телефоні картка вдвічі вужча, і напис із іконкою впритул не влазив
   у рядок — трохи стискаємо, щоб «Додати в кошик» лишалось одним рядком. */
@media (max-width: 768px) {
	.product-grid-item .sh-card-buy .button {
		gap: 6px;
		min-height: 40px;
		padding: 0 8px;
		font-size: 12px;
		white-space: nowrap;
	}

	.product-grid-item .sh-card-buy .button::before {
		width: 14px;
		height: 14px;
	}
}


/* ── Обране й порівняння в картці на головній ──────────────────────
   Вузли переносить sharit_home_card_actions() з functions.php.
   Координати навмисно не задаємо: їх уже тримає спільне правило
   .wd-product .wd-wishlist-btn / .wd-compare-btn вище — так кут картки
   на головній і в каталозі лишається однаковим. */

.product-grid-item .sh-card-buy .wd-wishlist-btn,
.product-grid-item .sh-card-buy .wd-compare-btn {
	position: absolute;
	z-index: 3;
	display: flex !important;
	width: 36px !important;
	height: 36px !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

.product-grid-item .sh-card-buy .wd-wishlist-btn > a,
.product-grid-item .sh-card-buy .wd-compare-btn > a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--sh-brd) !important;
	border-radius: 10px !important;
	background: var(--sh-surface) !important;
	color: var(--sh-text) !important;
	box-shadow: 0 1px 3px rgba(20, 32, 58, .08);
}

.product-grid-item .sh-card-buy .wd-wishlist-btn > a:hover,
.product-grid-item .sh-card-buy .wd-compare-btn > a:hover {
	background: var(--sh-ink) !important;
	color: #fff !important;
}

/* У кутику лишається сама іконка — підпис у макеті не показують. */
.product-grid-item .sh-card-buy .wd-wishlist-btn .wd-action-text,
.product-grid-item .sh-card-buy .wd-compare-btn .wd-action-text {
	display: none !important;
}

.product-grid-item .sh-card-buy .wd-wishlist-btn .wd-action-icon::before,
.product-grid-item .sh-card-buy .wd-compare-btn .wd-action-icon::before {
	width: 17px !important;
	height: 17px !important;
	margin: 0 !important;
	font-size: 17px !important;
}

/* ========== sh-pdp-buy: сітка картки покупки ==========
   Лічильник має стояти праворуч від ціни, а кнопки — в один ряд під ними.
   Розкладку робимо сіткою на самій картці, а обгортки .sh-pdp-acts і form.cart
   розчиняємо через display:contents: поле кількості мусить лишитися всередині
   форми, інакше кількість не піде в кошик.
   Проміжки задані маргінами, а не row-gap: наявність, бонусний рядок і
   лічильник є не в кожного товару, і порожні ряди інакше дали б зайві відступи. */
body.sh-pdp-on .sh-pdp-buy {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 14px;
	row-gap: 0;
	align-items: center;
}

body.sh-pdp-on .sh-pdp-buy .sh-pdp-acts,
body.sh-pdp-on .sh-pdp-buy form.cart {
	display: contents;
}

body.sh-pdp-on .sh-pdp-buy p.price {
	grid-area: 1 / 1;
}

body.sh-pdp-on .sh-pdp-buy .sh-qty {
	grid-area: 1 / 2;
	justify-self: end;
}

body.sh-pdp-on .sh-pdp-buy p.stock {
	grid-area: 2 / 1;
	margin-top: 12px;
}

body.sh-pdp-on .sh-pdp-buy .htpc-bonus-note {
	grid-area: 3 / 1 / 4 / -1;
	margin-top: 16px;
}

body.sh-pdp-on .sh-pdp-buy .single_add_to_cart_button {
	grid-area: 4 / 1;
	margin-top: 16px;
}

body.sh-pdp-on .sh-pdp-buy .htpc-1c {
	grid-area: 4 / 2;
	margin-top: 16px;
}

/* Дубль лічильника: свої кнопки малює product.js, а тема додає ще свою пару.
   Лишаємо ті, що зі скриптом, тематичні ховаємо. */
body.sh-pdp-on .sh-qty > .btn {
	display: none;
}

/* Кнопка кошика: іконка ліворуч, за нею розділова смужка, далі підпис. */
body.sh-pdp-on .sh-pdp-acts .single_add_to_cart_button {
	position: relative;
	justify-content: center;
	gap: 0;
	padding: 0 16px 0 47px;
	white-space: nowrap;
}

/* Іконка живе в ::after: ::before у теми зайнятий спінером завантаження
   і примусово прозорий, тому іконка в ньому не показувалась.
   Фон замість маски — маска зрізала б і смужку-розділювач. */
body.sh-pdp-on .sh-pdp-acts .single_add_to_cart_button::after {
	content: '';
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	box-sizing: content-box;
	padding-right: 12px;
	border: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 0;
	animation: none;
	opacity: 1;
	visibility: visible;
	mask: none;
	-webkit-mask: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1.2 12.2a1 1 0 0 1-1 .8H8.2a1 1 0 0 1-1-.8L6 7Z'/%3E%3Cpath d='M9 7V5.5a3 3 0 0 1 6 0V7'/%3E%3C/svg%3E") left center / 18px 18px no-repeat;
}

@media (max-width: 768px) {
	/* На вузькому екрані дві кнопки поруч не влазять — ставимо одна під одною
	   на всю ширину картки. Лічильник поруч із ціною лишається. */
	/* Ціна поруч із лічильником має вужчу колонку — інакше «17 000 грн»
	   ламається на два рядки. */
	body.sh-pdp-on .sh-pdp-buy p.price {
		font-size: 27px;
		white-space: nowrap;
	}

	body.sh-pdp-on .sh-pdp-buy .single_add_to_cart_button {
		grid-area: 4 / 1 / 5 / -1;
	}

	body.sh-pdp-on .sh-pdp-buy .htpc-1c {
		grid-area: 5 / 1 / 6 / -1;
		margin-top: 10px;
	}
}

/* ========== Лічильник кількості: свій вигляд ==========
   Тема малює кнопки сірими квадратами через свої правила для .quantity,
   тому селектори тут навмисно довші — щоб перебити її за вагою.
   Символи з розмітки ховаємо (font-size: 0) і малюємо іконки маскою:
   так мінус і плюс мають однакову товщину, незалежно від шрифту. */
body.sh-pdp-on .sh-pdp-buy .sh-qty {
	gap: 2px;
	padding: 5px;
	border-radius: 14px;
	background: var(--sh-surface);
}

body.sh-pdp-on .sh-pdp-buy .sh-qty .sh-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--sh-muted);
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

body.sh-pdp-on .sh-pdp-buy .sh-qty .sh-qty-btn::before {
	content: '';
	width: 14px;
	height: 14px;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Плюс — той, що стоїть після поля; тематичну пару кнопок ми сховали вище. */
body.sh-pdp-on .sh-pdp-buy .sh-qty input.qty ~ .sh-qty-btn::before {
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.sh-pdp-on .sh-pdp-buy .sh-qty .sh-qty-btn:hover {
	background: var(--sh-bg);
	color: var(--sh-ink);
}

body.sh-pdp-on .sh-pdp-buy .sh-qty .sh-qty-btn:active {
	transform: scale(0.92);
}

body.sh-pdp-on .sh-pdp-buy .sh-qty .sh-qty-btn:focus-visible {
	outline: 2px solid var(--sh-accent);
	outline-offset: -2px;
}

body.sh-pdp-on .sh-pdp-buy .sh-qty input.qty {
	width: 40px;
	font-size: 16px;
	font-weight: 800;
	color: var(--sh-ink);
}

/* Кнопка «в 1 клік»: та сама схема, що й у кошика — іконка ліворуч,
   за нею смужка, далі підпис. Емодзі з розмітки прибирає product.js. */
body.sh-pdp-on .sh-pdp-buy .htpc-1c-open {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px 0 47px;
}

body.sh-pdp-on .sh-pdp-buy .htpc-1c-open::after {
	content: '';
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	box-sizing: content-box;
	padding-right: 12px;
	border: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 0;
	animation: none;
	opacity: 1;
	visibility: visible;
	mask: none;
	-webkit-mask: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7l1-8Z'/%3E%3C/svg%3E") left center / 18px 18px no-repeat;
}

/* ── Кабінет: підтвердження пошти ───────────────────────────────────────────
   Значок стоїть праворуч від адреси, заклик — рядком нижче. Стан читає
   плагін sharit-verify з мета-позначки, яку ставить бонусна програма.
   Стилі тут, а не в assets/account.css плагіна: той підключається як
   ?ver=4.1, версія зашита в sharit-account.php, а той файл файрвол не дає
   зберегти (§4b) — тобто скинути кеш css плагіна нічим.
   ────────────────────────────────────────────────────────────────────────── */

body .sh-ac-contacts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

body .sh-ac-verify {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

body .sh-ac-verify.is-on {
  background: rgba(22, 163, 74, .16);
  color: #4ade80;
}

body .sh-ac-verify.is-off {
  background: rgba(245, 158, 11, .18);
  color: #fbbf24;
}

body .sh-ac-verify-cta,
body .sh-ac-verify-done {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #cfd6e4;
}

body button.sh-ac-verify-btn {
  height: 30px !important;
  min-height: 0 !important;
  padding: 0 13px !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

body button.sh-ac-verify-btn:hover {
  border-color: rgba(255, 255, 255, .45) !important;
  background: rgba(255, 255, 255, .16) !important;
}

/* ── Згода на розсилку ──────────────────────────────────────────────────────
   Одна й та сама галочка на реєстрації та в «Моїх даних» (плагін
   sharit-verify). Малюємо карткою, щоб не висіла голим рядком над кнопкою. */

body .sharit-marketing {
  margin: 0 0 18px !important;
  padding: 15px 18px;
  border: 1px solid var(--sh-brd-soft);
  border-radius: 14px;
  background: var(--sh-surface);
}

body .sharit-marketing label {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: 0 !important;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--sh-text);
}

body .sharit-marketing input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 1px 0 0 !important;
  flex-shrink: 0;
  accent-color: var(--sh-ink);
}

/* ── Іконки в шапці: рівні проміжки й однаковий стиль ───────────────────────
   Усі чотири — гліфи шрифта woodmart-font по 20px, але «порівняння» в цьому
   наборі намальоване інакше за акаунт і сердечко: товщі й іншої родини.
   Підміняємо його контурною іконкою через mask — так вона лишається
   currentColor і сама підхоплює наведення й активний стан.
   ────────────────────────────────────────────────────────────────────────── */

body .whb-column:has(> .wd-header-cart) {
  gap: 8px;
}

body .whb-column > .wd-search-form + .wd-tools-element {
  margin-inline-start: 6px;
}

body .wd-header-compare .wd-tools-icon::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOCAzIDQgN2w0IDQiLz48cGF0aCBkPSJNNCA3aDE2Ii8+PHBhdGggZD0iTTE2IDIxbDQtNC00LTQiLz48cGF0aCBkPSJNMjAgMTdINCIvPjwvc3ZnPg==") center / 20px 20px no-repeat;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOCAzIDQgN2w0IDQiLz48cGF0aCBkPSJNNCA3aDE2Ii8+PHBhdGggZD0iTTE2IDIxbDQtNC00LTQiLz48cGF0aCBkPSJNMjAgMTdINCIvPjwvc3ZnPg==") center / 20px 20px no-repeat;
}

/* ── Стрілки головної каруселі (макет «Головна.dc.html») ────────────────────
   Кнопки лежать у розмітці сторінки 398, поведінку дає плагін sharit-hero:
   стрілка натискає відповідну крапку, тобто стан лишається в скрипті htpc.
   ────────────────────────────────────────────────────────────────────────── */

body .htpc-hero-car .sh-hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 44px !important;
  height: 44px !important;
  min-height: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  border-radius: 50% !important;
  background: rgba(13, 21, 38, .5) !important;
  color: #fff !important;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

body .htpc-hero-car .sh-hero-arrow.is-prev {
  left: 18px;
}

body .htpc-hero-car .sh-hero-arrow.is-next {
  right: 18px;
}

body .htpc-hero-car .sh-hero-arrow:hover {
  border-color: #e11d48 !important;
  background: #e11d48 !important;
}

/* На вузьких екранах гортають пальцем — стрілки лише крали б місце. */
@media (max-width: 767px) {
  body .htpc-hero-car .sh-hero-arrow {
    display: none;
  }
}

/* ── Головна карусель під макет «Головна.dc.html» ───────────────────────────
   Акцент у макеті рожевий (#e11d48), у htpc був синій (#1565c0 і #3d9bff).
   Градієнт і плашки-бейджі правлені в розмітці сторінки 398, тут — кольори,
   геометрія крапок і сам бейдж. Селектори довгі й з !important: інлайнові
   стилі htpc з wp_head друкуються після дочірньої теми.
   ────────────────────────────────────────────────────────────────────────── */

body .htpc-hero-car {
  min-height: 460px !important;
}

body .htpc-hero-car .hhc-slide {
  min-height: 460px;
}

/* Плашка над заголовком */
body .htpc-hero-car .hhc-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  padding: 7px 14px;
  border: 1px solid rgba(225, 29, 72, .4);
  border-radius: 999px;
  background: rgba(225, 29, 72, .14);
  color: #ff8199;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .02em;
}

/* Кнопка — рожева, як у макеті */
body .htpc-hero-car .hhc-in a {
  height: 54px !important;
  border-radius: 14px !important;
  background: #e11d48 !important;
  color: #fff !important;
}

body .htpc-hero-car .hhc-in a:hover {
  background: #fff !important;
  color: #14203a !important;
}

/* Опис — приглушений, а не майже білий */
body .htpc-hero-car .hhc-in p {
  color: #b9c2d4 !important;
}

/* Крапки: 8px, активна — рожева смужка 26px */
body .htpc-hero-car .hhc-nav b {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .32) !important;
  transition: width .25s ease, background .25s ease;
}

body .htpc-hero-car .hhc-nav b.on {
  width: 26px !important;
  background: #e11d48 !important;
}

/* ── Шапка: головне меню в один рядок ───────────────────────────────────────
   Меню просить 453px (5 пунктів + проміжки по 21), а колонка давала 439 —
   і воно ламалось на два рядки. Причому **на будь-якій ширині екрана**:
   контейнер шапки впирається в 1192px і далі не росте, тож саме собою це
   ніколи б не полагодилось.
   Звільняємо місце праворуч: сума в кошику зайва (кількість лишається,
   сума є в самому кошику), а поле пошуку робимо плавним. clamp рахує так,
   щоб меню лишалось цілим: при 1025px поле 150px, при 1090 і ширше — 230px.
   ────────────────────────────────────────────────────────────────────────── */

@media (min-width: 1025px) {
  body .whb-column > .wd-search-form {
    width: clamp(150px, calc(100vw - 880px), 230px) !important;
  }

  body .wd-header-cart .wd-tools-text {
    display: none !important;
  }
}

/* Текст слайда починався на 56px, а ліва стрілка займає 18–62px — вони
   налазили одне на одного на 6px, на будь-якій ширині. Відсуваємо текст за
   стрілку; нижче 768px стрілок немає, там відступ лишається макетним. */
@media (min-width: 768px) {
  body .htpc-hero-car .hhc-in {
    padding-left: 80px !important;
  }
}

/* ── Пошук згортається в іконку на вузьких екранах ──────────────────────────
   На 1100px і ширше поле і так має свої 230px. Нижче воно ставало тісним,
   тож там лишаємо тільки іконку, а поле розкривається накладкою поверх
   решти шапки — саме накладкою, а не в потоці: інакше права колонка
   роздувається, центральна вужчає, і меню знову ламається на два рядки.
   Без JavaScript: :focus-within. Клікабельний сам input, розтягнутий на
   всю іконку; кнопку відправки в згорнутому стані вимикаємо, щоб порожній
   пошук не відправлявся випадковим кліком.
   ────────────────────────────────────────────────────────────────────────── */

@media (min-width: 1025px) and (max-width: 1099px) {
  body .whb-col-right {
    position: relative;
  }

  body .whb-col-right > .wd-search-form {
    width: 46px !important;
  }

  body .whb-col-right > .wd-search-form form.searchform {
    width: 46px;
  }

  body .whb-col-right > .wd-search-form input.s {
    cursor: pointer;
    color: transparent;
  }

  body .whb-col-right > .wd-search-form input.s::placeholder {
    color: transparent;
  }

  body .whb-col-right > .wd-search-form .searchsubmit {
    pointer-events: none;
  }

  body .whb-col-right > .wd-search-form:focus-within {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 320px !important;
    z-index: 40;
  }

  body .whb-col-right > .wd-search-form:focus-within form.searchform {
    width: 320px;
  }

  body .whb-col-right > .wd-search-form:focus-within input.s {
    cursor: text;
    color: var(--sh-ink);
    background: var(--sh-surface);
    box-shadow: var(--sh-shadow-pop);
  }

  body .whb-col-right > .wd-search-form:focus-within input.s::placeholder {
    color: var(--sh-faint);
  }

  body .whb-col-right > .wd-search-form:focus-within .searchsubmit {
    pointer-events: auto;
  }
}

/* ── Картки товарів однакової висоти ────────────────────────────────────────
   У ПК є блок характеристик .sh-specs, у периферії його немає — звідси
   різниця рівно в 61px (49 + проміжок 12), і в ряду картки виходили різні,
   а кнопки «Додати в кошик» стрибали по висоті.
   Сітка стояла на align-items: flex-start, тож картки не тягнулись на всю
   висоту ряду. Розтягуємо їх і розкладаємо нутрощі колонкою, а ціну
   притискаємо донизу через margin-top: auto — тоді ціна й кнопка стоять
   на одній лінії незалежно від того, є характеристики чи ні.
   ────────────────────────────────────────────────────────────────────────── */

body .wd-products.wd-grid-g {
  align-items: stretch;
}

body .wd-products .product-grid-item {
  height: 100%;
}

body .wd-products .product-grid-item > .wd-product-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

body .wd-products .product-grid-item .price {
  margin-top: auto;
}

/* ==========================================================================
   ФІКС 22.08.2026: ціна на сторінці товару ламалася на два рядки
   (роздільник тисяч у WooCommerce — звичайний пробіл, а в картці
   «немає в наявності» колонка вужча). Забороняємо перенос і зменшуємо кегль.
   ========================================================================== */

body.sh-pdp-on .sh-pdp-buy p.price,
body.sh-pdp-on .sh-pdp-buy p.price bdi,
body.sh-pdp-on .sh-pdp-buy p.price .woocommerce-Price-amount {
	white-space: nowrap;
}

body.sh-pdp-on .sh-pdp-buy p.price {
	font-size: 26px;
}

@media (max-width: 480px) {
	body.sh-pdp-on .sh-pdp-buy p.price { font-size: 22px; }
}