/*
Theme Name: Spice Guild
Theme URI: https://spiceguild.example/
Description: Дочірня тема Kadence для інтернет-магазину крафтових спецій Spice Guild. Власна шапка, власна головна, дизайн за референсом WCM030066.
Author: Spice Guild
Version: 0.3.0
Template: kadence
License: GNU General Public License v2 or later
Text Domain: spice-guild
*/

/* ==========================================================================
   Кольори НЕ задаються тут. Усі — в assets/tokens.css.
   Нижче тільки var(--sg-*). Хардкод #rrggbb — помилка.
   ========================================================================== */

/* ------------------------------------------------------------------- база */

/* Страховка від горизонтального розпирання. Саме clip, не hidden:
   clip не створює scroll-контейнер і не ламає position:sticky навігації. */
html,
body {
	overflow-x: clip;
}

.sg-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 22px;
}

.sg-i {
	flex: none;
	display: inline-block;
	vertical-align: middle;
}

.sg-btn {
	display: inline-block;
	background: var(--sg-accent);
	color: var(--sg-white);
	font-weight: var(--sg-fw-medium);
	font-size: 15px;
	line-height: 1;
	padding: 15px 30px;
	border: 0;
	border-radius: var(--sg-radius);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--sg-transition), color var(--sg-transition);
}

.sg-btn:hover {
	background: var(--sg-accent-dark);
	color: var(--sg-white);
}

.sg-btn-ghost {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--sg-white);
}

.sg-btn-ghost:hover {
	background: var(--sg-white);
	color: var(--sg-ink);
}

.sg-btn-dark {
	background: var(--sg-dark);
}

.sg-btn-dark:hover {
	background: var(--sg-ink);
}

.sg-kicker {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	color: var(--sg-accent);
	font-weight: var(--sg-fw-bold);
	font-size: 14px;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.sg-hero .sg-kicker::after {
	content: "";
	width: 58px;
	height: 1px;
	background: var(--sg-accent);
	opacity: .8;
}

.sg-kicker-dark {
	color: var(--sg-accent-dark);
}

.sg-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--sg-star);
}

.sg-stars .sg-i {
	width: 15px;
	height: 15px;
}

/* ================================================================== ШАПКА */

.sg-header {
	background: var(--sg-white);
}

/* --- службова смуга з перевагами (за референсом) --- */

.sg-usp {
	background: var(--sg-accent-tint);
	border-bottom: 1px solid var(--sg-line);
	font-size: var(--sg-fs-small);
}

.sg-usp .sg-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 40px;
}

.sg-usp-item {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--sg-accent-darker);
	white-space: nowrap;
	min-width: 0;
}

.sg-usp-item .sg-i {
	width: 17px;
	height: 17px;
	color: var(--sg-accent);
}

/* лого-картинка */

/* Специфічність навмисно подвоєна: WooCommerce на сторінках магазину
   дає `.woocommerce img { height: auto }` — один клас + елемент, що б'є
   одиночний .sg-logo-img, і лого розпухало до натуральних 120px. */
.sg-logo .sg-logo-img {
	display: block;
	height: 62px;
	width: auto;
}

/* --- основний ряд: лого + пошук + дії --- */

.sg-mainbar .sg-container {
	display: flex;
	align-items: center;
	gap: 34px;
	padding-top: 15px;
	padding-bottom: 15px;
}

.sg-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex: none;
}

.sg-logo-mark {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--sg-accent);
	color: var(--sg-white);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sg-logo-mark .sg-i {
	width: 26px;
	height: 26px;
}

.sg-logo-text {
	font-size: 26px;
	font-weight: 700;
	color: var(--sg-ink);
	line-height: 1.05;
	letter-spacing: -.01em;
}

.sg-logo-text em {
	font-style: normal;
	color: var(--sg-accent-dark);
}

.sg-logo-text small {
	display: block;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--sg-faint);
	margin-top: 3px;
}

/* Пошук не розтягується на весь вільний простір, а має свою ширину і
   центрується між лого і діями: auto-margins самі схлопуються, коли місця
   бракує, тож адаптив тримається без фіксованих відступів у контейнері. */
.sg-search {
	flex: 0 1 620px;
	margin: 0 auto;
	display: flex;
	border: 1px solid var(--sg-dark-3);
	border-radius: var(--sg-radius-lg);
	overflow: hidden;
	background: var(--sg-white);
}

.sg-search input[type="search"] {
	flex: 1;
	border: 0;
	outline: none;
	padding: 9px 18px;
	font-size: var(--sg-fs-body);
	font-family: var(--sg-font);
	color: var(--sg-body);
	background: transparent;
	min-width: 0;
}

.sg-search button {
	display: flex;
	align-items: center;
	gap: 5px;
	border: 0;
	cursor: pointer;
	background: var(--sg-dark-3);
	color: var(--sg-white);
	font-weight: var(--sg-fw-medium);
	font-size: 14px;
	padding: 0 22px;
	transition: background var(--sg-transition);
}

.sg-search button:hover {
	background: var(--sg-dark);
}

.sg-search button .sg-i {
	width: 18px;
	height: 18px;
}

.sg-actions {
	display: flex;
	align-items: center;
	gap: 26px;
	flex: none;
}

.sg-act {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--sg-body);
	font-size: 12px;
	text-decoration: none;
	line-height: 1;
}

.sg-act:hover {
	color: var(--sg-accent-dark);
}

.sg-act .sg-i {
	width: 24px;
	height: 24px;
}

/* --- перемикач мови --- */

.sg-lang {
	position: relative;
}

.sg-lang-btn {
	display: flex;
	align-items: center;
	gap: 5px;
	border: 1px solid var(--sg-line);
	background: var(--sg-white);
	border-radius: 18px;
	padding: 8px 12px 8px 15px;
	font-family: var(--sg-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--sg-body);
	cursor: pointer;
	transition: border-color var(--sg-transition), color var(--sg-transition);
}

.sg-lang-btn .sg-i {
	width: 13px;
	height: 13px;
}

.sg-lang-btn:hover,
.sg-lang.open .sg-lang-btn {
	border-color: var(--sg-accent);
	color: var(--sg-accent-dark);
}

.sg-lang-drop {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 170px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--sg-white);
	border-radius: var(--sg-radius-lg);
	box-shadow: var(--sg-shadow-hover);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--sg-transition), transform var(--sg-transition), visibility var(--sg-transition);
	z-index: 96;
}

.sg-lang:hover .sg-lang-drop,
.sg-lang.open .sg-lang-drop {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sg-lang-drop button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 10px;
	border: 0;
	background: none;
	padding: 9px 16px;
	font-family: var(--sg-font);
	font-size: 14px;
	color: var(--sg-body);
	text-align: left;
	cursor: pointer;
}

.sg-lang-drop button.current {
	color: var(--sg-accent-dark);
	font-weight: var(--sg-fw-bold);
}

.sg-lang-drop button:disabled {
	color: var(--sg-faint);
	cursor: default;
}

.sg-lang-drop button em {
	font-style: normal;
	font-size: 11px;
	color: var(--sg-faint);
}

.sg-bag {
	position: relative;
	display: inline-flex;
}

.sg-cart-count {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--sg-accent);
	color: var(--sg-white);
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sg-act-cart-txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: flex-start;
}

.sg-act-cart-txt small {
	font-size: 11px;
	color: var(--sg-faint);
}

.sg-act-cart-txt .sg-cart-total {
	font-size: 15px;
	font-weight: 700;
	color: var(--sg-ink);
}

/* --- оливкова навігація --- */

/* Липка навігація.

   Липне лише вузька темна смуга, а не вся шапка: лого з пошуком забирали б
   близько 90px екрана на кожному екрані прокрутки. Смуга лишається в потоці
   (sticky, не fixed), тож контент не стрибає в момент прилипання.

   Тінь з'являється тільки коли смуга справді прилипла — так видно, що вона
   лежить НАД контентом, а не є частиною сторінки. Стан вішає sg.js. */

.sg-navbar {
	background: var(--sg-dark-2);
	position: sticky;
	top: 0;
	z-index: 90;
	transition: box-shadow var(--sg-transition);
}

.sg-navbar.is-stuck {
	box-shadow: 0 4px 18px rgba(0, 0, 0, .16);
}

/* адмінбар WP теж прилипає зверху — не підлазимо під нього */
body.admin-bar .sg-navbar {
	top: 32px;
}

/* ...а на вузьких екранах адмінбар не фіксований, тож і зсув не потрібен */
@media (max-width: 782px) {
	body.admin-bar .sg-navbar {
		top: 0;
	}
}

/* якорі не мають ховатися під смугою */
html {
	scroll-padding-top: 72px;
}

@media (prefers-reduced-motion: reduce) {
	.sg-navbar {
		transition: none;
	}
}

/* Пошук у прилиплому стані.

   Коли шапка пішла вгору, поле пошуку зникає разом із нею — а в магазині це
   головний спосіб знайти товар. Тому в смузі з'являється лупа, яка повертає
   до поля. Показуємо її тільки в прилиплому стані, щоб не дублювати те,
   що й так видно на екрані. */

.sg-navsearch {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	flex: none;
	border: 0;
	background: none;
	color: var(--sg-on-dark);
	cursor: pointer;
	transition: color var(--sg-transition);
}

.sg-navbar.is-stuck .sg-navsearch {
	display: flex;
}

.sg-navsearch:hover {
	color: var(--sg-accent);
}

.sg-navsearch .sg-i {
	width: 19px;
	height: 19px;
}

.sg-navbar .sg-container {
	display: flex;
	align-items: stretch;
	gap: 0;
	padding-left: 0;
	padding-right: 0;
}

/* «Каталог» — темніший блок ліворуч, відкриває мегаменю */

.sg-allcats {
	position: relative;
	flex: none;
}

.sg-allcats-btn {
	display: flex;
	text-decoration: none;
	align-items: center;
	gap: 12px;
	height: 56px;
	padding: 0 26px;
	border: 0;
	cursor: pointer;
	background: var(--sg-dark-3);
	color: var(--sg-on-dark);
	font-family: var(--sg-font);
	font-size: 15px;
	font-weight: var(--sg-fw-bold);
	min-width: 262px;
}

.sg-allcats-btn .sg-i-menu {
	color: var(--sg-accent);
}

.sg-allcats-btn .sg-i-chev {
	transition: transform var(--sg-transition);
}

.sg-allcats:hover .sg-allcats-btn .sg-i-chev,
.sg-allcats.open .sg-allcats-btn .sg-i-chev {
	transform: rotate(180deg);
}

.sg-allcats.current .sg-allcats-btn,
.sg-allcats:hover .sg-allcats-btn,
.sg-allcats.open .sg-allcats-btn {
	color: var(--sg-accent);
}

.sg-allcats-btn .sg-i-chev {
	margin-left: auto;
	width: 16px;
	height: 16px;
}

/* пункти меню */

.sg-nav {
	flex: 1;
}

.sg-nav > ul {
	display: flex;
	margin: 0;
	padding: 0 8px;
	list-style: none;
	height: 100%;
}

.sg-nav > ul > li {
	position: relative;
	display: flex;
}

.sg-nav > ul > li > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 20px;
	color: var(--sg-on-dark);
	font-size: 15px;
	font-weight: var(--sg-fw-medium);
	text-decoration: none;
	position: relative;
	transition: color var(--sg-transition);
}

.sg-nav > ul > li > a:hover,
.sg-nav > ul > li.current > a {
	background: transparent;
	color: var(--sg-accent);
}

/* активний пункт — помаранчева риска знизу, як у референсі */
.sg-nav > ul > li.current > a::after {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 14px;
	height: 2px;
	background: var(--sg-accent);
}

.sg-nav .sg-i-chev {
	width: 14px;
	height: 14px;
	opacity: .8;
}

/* чіпи SALE / HOT */

.sg-chip {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 3px;
	color: var(--sg-white);
	position: relative;
	top: -8px;
}

.sg-chip-red  { background: var(--sg-sale); }

/* кошик праворуч у навігації */

.sg-navcart {
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 26px;
	background: var(--sg-accent);
	color: var(--sg-white);
	text-decoration: none;
	font-size: 15px;
	font-weight: var(--sg-fw-medium);
}

.sg-navcart:hover {
	background: var(--sg-accent-dark);
	color: var(--sg-white);
}

.sg-navcart .sg-cart-total {
	font-weight: 700;
}

.sg-navcart .sg-cart-total .woocommerce-Price-amount {
	color: var(--sg-white);
}

/* --- мегаменю «Каталог» --- */

.sg-mega {
	position: absolute;
	top: 100%;
	left: 0;
	width: min(1080px, calc(100vw - 60px));
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 0;
	background: var(--sg-white);
	box-shadow: var(--sg-shadow-hover);
	border-top: 3px solid var(--sg-accent);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--sg-transition), transform var(--sg-transition), visibility var(--sg-transition);
	z-index: 95;
}

.sg-allcats:hover .sg-mega,
.sg-allcats.open .sg-mega,
.sg-debug-mega .sg-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sg-mega h4 {
	font-size: 16px;
	font-weight: var(--sg-fw-bold);
	color: var(--sg-ink);
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--sg-line);
}

.sg-mega-cats {
	padding: 28px 32px;
}

.sg-mega-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px 12px;
}

.sg-mega-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	color: var(--sg-body);
	font-size: 13px;
	text-align: center;
}

.sg-mega-cat img {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	border: 1px solid var(--sg-line);
	padding: 4px;
	background: var(--sg-white);
	transition: border-color var(--sg-transition), transform var(--sg-transition);
}

.sg-mega-cat:hover img {
	border-color: var(--sg-accent);
	transform: translateY(-3px);
}

.sg-mega-cat:hover span {
	color: var(--sg-accent-dark);
}

.sg-mega-all {
	display: inline-block;
	margin-top: 20px;
	font-size: 14px;
	font-weight: var(--sg-fw-bold);
	color: var(--sg-accent-dark);
	text-decoration: none;
}

.sg-mega-all:hover {
	color: var(--sg-accent-darker);
}

/* лічильник товарів — щільно під назвою, поза загальним gap сітки */
.sg-mega-cat em {
	margin-top: -6px;
	font-style: normal;
	font-size: 12px;
	color: var(--sg-faint);
}

.sg-mega-top {
	padding: 28px 32px;
	background: var(--sg-card);
}

.sg-mega-prods {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 20px;
}

.sg-mini {
	display: flex;
	gap: 12px;
	align-items: center;
	text-decoration: none;
	background: var(--sg-white);
	border-radius: var(--sg-radius);
	padding: 8px;
	transition: box-shadow var(--sg-transition);
}

.sg-mini:hover {
	box-shadow: var(--sg-shadow-hover);
}

.sg-mini img {
	width: 62px;
	height: 62px;
	object-fit: cover;
	border-radius: var(--sg-radius);
	background: var(--sg-card);
	flex: none;
}

.sg-mini-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.sg-mini-t {
	font-size: 13px;
	line-height: 1.35;
	color: var(--sg-ink);
	font-weight: var(--sg-fw-medium);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sg-mini .star-rating {
	font-size: 11px;
	margin: 0;
}

.sg-mini-p {
	font-size: 13px;
	font-weight: 700;
	color: var(--sg-ink);
}

.sg-mini-p del {
	color: var(--sg-faint);
	font-weight: 400;
	margin-right: 5px;
}

.sg-mini-p ins {
	text-decoration: none;
}

/* --- мобільна панель --- */

.sg-burger {
	display: none;
	border: 0;
	background: var(--sg-accent-dark);
	color: var(--sg-white);
	padding: 0 18px;
	cursor: pointer;
}

/* Нижній app-бар існує тільки на телефоні; на десктопі розмітка
   не повинна рендеритись голим списком — ховаємо в базі,
   мобільний шар (≤767) вмикає його назад через display: grid. */
.sg-bottombar {
	display: none;
}

/* бургер ↔ хрестик */
.sg-burger .sg-i-x {
	display: none;
}

body.sg-mobile-open .sg-burger .sg-i-menu {
	display: none;
}

body.sg-mobile-open .sg-burger .sg-i-x {
	display: inline-block;
}

.sg-mobile-panel {
	background: var(--sg-white);
	border-bottom: 1px solid var(--sg-line);
	box-shadow: var(--sg-shadow);
}

.sg-mobile-panel nav {
	display: flex;
	flex-direction: column;
	padding: 8px 0;
}

.sg-mobile-panel a {
	padding: 11px 22px;
	color: var(--sg-body);
	text-decoration: none;
	font-size: 15px;
	border-bottom: 1px solid var(--sg-surface);
}

.sg-mobile-panel a.sg-mobile-sub {
	padding-left: 40px;
	font-size: 14px;
	color: var(--sg-muted);
}

/* ================================================================ ГОЛОВНА */

.sg-front {
	background: var(--sg-white);
}

.sg-section {
	padding: var(--sg-section-y) 0 0;
}

.sg-section:last-child {
	padding-bottom: var(--sg-section-y);
}

.sg-section-gray {
	background: var(--sg-accent-tint);
	padding-bottom: var(--sg-section-y);
	margin-top: var(--sg-section-y);
}

/* Після героя відступ не потрібен: він відділяв кольорову смугу від білого
   блоку вище, а тут дає порожню білу стрічку між фото й секцією. Дихання
   лишає власний padding-top секції. */
.sg-hero + .sg-section-gray {
	margin-top: 0;
}

.sg-section-gray + .sg-section {
	padding-top: var(--sg-section-y);
}

.sg-section-title {
	text-align: center;
	font-size: 30px;
	font-weight: var(--sg-fw-bold);
	color: var(--sg-ink);
	margin: 0 0 36px;
}

.sg-section-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	background: var(--sg-accent);
	margin: 14px auto 0;
	border-radius: 2px;
}

/* --- герой --- */

.sg-hero {
	/* фото: темний сланець зліва (зона тексту), спеції праворуч */
	background:
		linear-gradient(90deg, rgba(16, 13, 10, .93) 0%, rgba(16, 13, 10, .60) 38%, rgba(16, 13, 10, .21) 68%, rgba(16, 13, 10, .12) 100%),
		url("assets/img/hero-bg.jpg") center / cover no-repeat var(--sg-dark);
	position: relative;
	color: var(--sg-white);
	overflow: hidden;
}

/* на фото вже є композиція зі спеціями — намальовані миски зайві */
.sg-hero-media .sg-bowl {
	display: none;
}

.sg-hero-grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 30px;
	align-items: center;
}

.sg-hero-inner {
	position: relative;
	max-width: 620px;
	padding: 84px 0 88px;
	/* Затемнення фото зліва навмисно неглибоке, тож під текстом трапляються
	   світлі плями спецій. Тінь тримає читабельність, не притемнюючи кадр. */
	text-shadow: 0 1px 4px rgba(16, 13, 10, .6);
}

/* у кнопок свій суцільний фон — тінь там зайва */
.sg-hero-inner .sg-btn {
	text-shadow: none;
}

.sg-hero-facts {
	display: flex;
	gap: 38px;
	list-style: none;
	margin: 40px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.sg-hero-facts li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sg-hero-facts b {
	font-size: 38px;
	font-weight: 700;
	color: var(--sg-accent);
	line-height: 1;
}

.sg-hero-facts span {
	font-size: 12px;
	line-height: 1.35;
	color: var(--sg-white);
	opacity: .75;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* композиція з мисок — фото щільно кадруються колом */

.sg-hero-media {
	position: relative;
	height: 480px;
}

.sg-bowl {
	position: absolute;
	border-radius: 50%;
	background-position: center;
	background-size: 118%;
	background-repeat: no-repeat;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.sg-bowl-1 {
	width: 330px;
	height: 330px;
	right: 60px;
	top: 62px;
	outline: 10px solid rgba(255, 255, 255, .06);
}

.sg-bowl-2 {
	width: 168px;
	height: 168px;
	right: 366px;
	top: 20px;
	outline: 7px solid rgba(255, 255, 255, .06);
}

.sg-bowl-3 {
	width: 196px;
	height: 196px;
	right: 328px;
	bottom: 28px;
	outline: 7px solid rgba(255, 255, 255, .06);
}

.sg-hero h1 em {
	font-style: normal;
	color: var(--sg-accent);
}

.sg-hero h1 {
	font-size: 52px;
	line-height: 1.12;
	font-weight: 700;
	color: var(--sg-white);
	margin: 0 0 18px;
	letter-spacing: -.01em;
}

.sg-hero p {
	font-size: 17px;
	line-height: 1.65;
	color: var(--sg-white);
	opacity: .88;
	margin: 0 0 30px;
}

.sg-hero-cta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* --- переваги --- */

/* Блок переваг — останній перед футером, одразу під розсилкою. Ні відступу,
   ні межі: світла смуга затиснута між двома темними блоками, і будь-який
   зазор читався б як дірка у верстці. */
.sg-features {
	background: var(--sg-accent-tint);
}

.sg-feature > .sg-i {
	background: var(--sg-white);
	border-radius: 50%;
	padding: 9px;
	box-shadow: var(--sg-shadow);
	box-sizing: content-box;
}

.sg-features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	padding: 30px 0;
}

.sg-feature {
	display: flex;
	align-items: center;
	gap: 16px;
}

.sg-feature > .sg-i {
	width: 42px;
	height: 42px;
	color: var(--sg-accent-dark);
	stroke-width: 1.5;
}

.sg-feature h4 {
	margin: 0 0 3px;
	font-size: 15px;
	font-weight: var(--sg-fw-bold);
	color: var(--sg-ink);
}

.sg-feature p {
	margin: 0;
	font-size: 13px;
	color: var(--sg-muted);
}

/* --- категорії кружечками --- */

.sg-cats-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 18px 10px;
}

.sg-cat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	text-align: center;
}

.sg-cat-img {
	display: block;
	border-radius: 50%;
	border: 1px solid var(--sg-line);
	padding: 7px;
	background: var(--sg-white);
	transition: border-color var(--sg-transition), transform var(--sg-transition), box-shadow var(--sg-transition);
}

.sg-cat-img img {
	display: block;
	width: 118px;
	height: 118px;
	border-radius: 50%;
	object-fit: cover;
}

.sg-cat-card:hover .sg-cat-img {
	border-color: var(--sg-accent);
	transform: translateY(-4px);
	box-shadow: var(--sg-shadow-hover);
}

.sg-cat-name {
	font-size: 14px;
	font-weight: var(--sg-fw-medium);
	color: var(--sg-ink);
	line-height: 1.3;
}

.sg-cat-card:hover .sg-cat-name {
	color: var(--sg-accent-dark);
}

.sg-cat-count {
	font-size: 12px;
	color: var(--sg-faint);
	margin-top: -5px;
}

/* Вітрина: кола категорій працюють як фільтр сітки під ними.
   Активна категорія тримає той самий вигляд, що й наведення, але без
   підйому — інакше активний стан «стрибав» би при відведенні миші. */

.sg-cat-card.is-active .sg-cat-img {
	border-color: var(--sg-accent);
	box-shadow: 0 0 0 3px var(--sg-accent-soft);
}

.sg-cat-card.is-active .sg-cat-name {
	color: var(--sg-accent-dark);
	font-weight: var(--sg-fw-bold);
}

.sg-shop-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 30px 0 22px;
	min-height: 24px;
}

.sg-shop-state {
	margin: 0;
	font-size: 14px;
	color: var(--sg-muted);
}

.sg-shop-reset {
	border: 1px solid var(--sg-line);
	background: var(--sg-white);
	border-radius: 20px;
	padding: 5px 14px;
	font-family: var(--sg-font);
	font-size: 13px;
	color: var(--sg-body);
	cursor: pointer;
	transition: border-color var(--sg-transition), color var(--sg-transition);
}

.sg-shop-reset:hover {
	border-color: var(--sg-accent);
	color: var(--sg-accent-dark);
}

/* під час запиту сітка бліда й не клікається — але висоту тримає,
   тож сторінка не стрибає, поки їдуть нові картки */
.sg-shop-grid.is-loading {
	opacity: .45;
	pointer-events: none;
	transition: opacity .15s ease;
}

.sg-shop-empty {
	text-align: center;
	color: var(--sg-muted);
	padding: 30px 0;
}

/* --- пагінація вітрини --- */

.sg-pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 30px;
}

.sg-pager button {
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--sg-line);
	background: var(--sg-white);
	border-radius: 50px;
	font-family: var(--sg-font);
	font-size: 14px;
	font-weight: var(--sg-fw-medium);
	color: var(--sg-body);
	cursor: pointer;
	transition: border-color var(--sg-transition), background var(--sg-transition), color var(--sg-transition);
}

.sg-pager button:hover:not(:disabled) {
	border-color: var(--sg-accent);
	color: var(--sg-accent-dark);
}

.sg-pager button.current {
	background: var(--sg-accent);
	border-color: var(--sg-accent);
	color: var(--sg-white);
}

.sg-pager button:disabled {
	opacity: .4;
	cursor: default;
}

.sg-pager-arrow {
	font-size: 18px;
	line-height: 1;
}

/* --- банери --- */

.sg-banners-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sg-gap);
}

.sg-banner {
	display: block;
	overflow: hidden;
	border-radius: var(--sg-radius-lg);
}

.sg-banner {
	position: relative;
}

.sg-banner img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .5s ease;
}

.sg-banner:hover img {
	transform: scale(1.04);
}

.sg-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(18, 17, 13, .68) 0%, rgba(18, 17, 13, .28) 55%, transparent 80%);
	z-index: 1;
}

.sg-banner-txt {
	position: absolute;
	left: 34px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--sg-white);
}

.sg-banner-txt em {
	font-style: normal;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sg-accent);
}

.sg-banner-txt b {
	font-size: 26px;
	line-height: 1.2;
	font-weight: 700;
}

.sg-banner-txt i {
	font-style: normal;
	font-size: 13px;
	font-weight: var(--sg-fw-bold);
	color: var(--sg-white);
	opacity: .9;
	margin-top: 6px;
	transition: opacity var(--sg-transition);
}

.sg-banner:hover .sg-banner-txt i {
	opacity: 1;
	color: var(--sg-accent);
}

/* --- таби --- */

.sg-tabhead {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: -10px 0 30px;
	flex-wrap: wrap;
}

.sg-tabhead button {
	border: 1px solid var(--sg-line);
	background: var(--sg-white);
	color: var(--sg-muted);
	font-family: var(--sg-font);
	font-size: 14px;
	font-weight: var(--sg-fw-medium);
	padding: 10px 22px;
	border-radius: 24px;
	cursor: pointer;
	transition: all var(--sg-transition);
}

.sg-tabhead button:hover {
	border-color: var(--sg-accent);
	color: var(--sg-accent-dark);
}

.sg-tabhead button.active {
	background: var(--sg-accent);
	border-color: var(--sg-accent);
	color: var(--sg-white);
}

.sg-tabpane {
	display: none;
}

.sg-tabpane.active {
	display: block;
}

/* --- пропозиція тижня --- */

.sg-deal {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 48px;
	align-items: center;
	background: var(--sg-card);
	border-radius: var(--sg-radius-lg);
	padding: 44px 48px;
}

.sg-deal-media {
	position: relative;
	text-align: center;
}

.sg-deal-media img {
	max-width: 420px;
	width: 100%;
	height: auto;
	border-radius: var(--sg-radius-lg);
}

.sg-deal-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--sg-sale);
	color: var(--sg-white);
	font-size: 13px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: var(--sg-radius);
	z-index: 2;
}

.sg-deal-body h2 {
	font-size: 30px;
	margin: 4px 0 10px;
}

.sg-deal-body h2 a {
	color: var(--sg-ink);
	text-decoration: none;
}

.sg-deal-price {
	font-size: 24px;
	font-weight: 700;
	color: var(--sg-ink);
	margin: 10px 0;
}

.sg-deal-price del {
	color: var(--sg-faint);
	font-weight: 400;
	font-size: 18px;
	margin-right: 8px;
}

.sg-deal-price ins {
	text-decoration: none;
	color: var(--sg-sale);
}

.sg-deal-text {
	color: var(--sg-muted);
	margin: 0 0 22px;
	max-width: 480px;
}

.sg-deal-count {
	display: flex;
	gap: 12px;
	margin-bottom: 26px;
}

.sg-count-box {
	background: var(--sg-white);
	border-radius: var(--sg-radius);
	box-shadow: var(--sg-shadow);
	min-width: 74px;
	padding: 12px 8px;
	text-align: center;
}

.sg-count-box b {
	display: block;
	font-size: 26px;
	line-height: 1;
	color: var(--sg-sale);
	font-weight: 700;
}

.sg-count-box i {
	display: block;
	font-style: normal;
	font-size: 11px;
	color: var(--sg-faint);
	margin-top: 5px;
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* --- відгуки --- */

.sg-testi-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sg-gap);
}

.sg-testi {
	margin: 0;
	background: var(--sg-white);
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius-lg);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sg-testi blockquote {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--sg-body);
	flex: 1;
}

.sg-testi figcaption {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sg-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--sg-accent);
	color: var(--sg-white);
	font-weight: 700;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.sg-testi figcaption b {
	display: block;
	font-size: 14px;
	color: var(--sg-ink);
}

.sg-testi figcaption i {
	font-style: normal;
	font-size: 12px;
	color: var(--sg-faint);
}

/* --- блог --- */

.sg-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sg-gap);
}

.sg-blog-card {
	background: var(--sg-white);
	border-radius: var(--sg-radius-lg);
	overflow: hidden;
	box-shadow: var(--sg-shadow);
	transition: box-shadow var(--sg-transition), transform var(--sg-transition);
}

.sg-blog-card:hover {
	box-shadow: var(--sg-shadow-hover);
	transform: translateY(-3px);
}

.sg-blog-img {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--sg-card);
}

.sg-blog-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sg-blog-body {
	padding: 20px 22px 24px;
}

.sg-blog-body time {
	font-size: 12px;
	color: var(--sg-faint);
	text-transform: uppercase;
	letter-spacing: .08em;
}

.sg-blog-body h3 {
	font-size: 17px;
	line-height: 1.4;
	margin: 8px 0 10px;
}

.sg-blog-body h3 a {
	color: var(--sg-ink);
	text-decoration: none;
}

.sg-blog-body h3 a:hover {
	color: var(--sg-accent-dark);
}

.sg-blog-body p {
	font-size: 14px;
	color: var(--sg-muted);
	margin: 0 0 12px;
}

.sg-more {
	font-size: 13px;
	font-weight: var(--sg-fw-bold);
	color: var(--sg-accent-dark);
	text-decoration: none;
}

/* --- розсилка --- */

.sg-newsletter {
	background:
		linear-gradient(90deg, rgba(16, 13, 10, .90) 0%, rgba(16, 13, 10, .62) 55%, rgba(16, 13, 10, .32) 100%),
		url("assets/img/newsletter-bg.jpg") center / cover no-repeat var(--sg-dark);
	margin-top: var(--sg-section-y);
}

/* на темному фото темна кнопка губиться — оливкова */
.sg-newsletter .sg-btn-dark {
	background: var(--sg-accent);
}

.sg-newsletter .sg-btn-dark:hover {
	background: var(--sg-accent-dark);
}

.sg-newsletter-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 100px 0;
	flex-wrap: wrap;
}

.sg-newsletter-text h3 {
	color: var(--sg-white);
	font-size: 24px;
	margin: 0 0 6px;
}

.sg-newsletter-text p {
	color: var(--sg-white);
	opacity: .88;
	margin: 0;
	font-size: 14px;
}

.sg-newsletter-text {
	min-width: 0;
	flex: 1 1 280px;
}

.sg-newsletter-form {
	display: flex;
	gap: 10px;
	flex: 1 1 260px;
	max-width: 520px;
	min-width: 0;
}

.sg-newsletter-form input {
	flex: 1;
	border: 0;
	border-radius: var(--sg-radius);
	padding: 14px 18px;
	font-size: 15px;
	font-family: var(--sg-font);
	outline: none;
	min-width: 0;
}

.sg-newsletter-done {
	color: var(--sg-white);
	font-weight: var(--sg-fw-bold);
	margin: 0;
}

/* ====================================================== КАРТКИ ТОВАРІВ */

.woocommerce ul.products {
	margin-bottom: 0;
}

/* Проміжки в сітці: Kadence ставить 40px, від чого картки в чотири колонки
   виглядають розсипаними. 1.1rem збирає сітку докупи — картка стає ширшою,
   а ряди читаються як одна вітрина. */
.woocommerce ul.products.grid-cols {
	column-gap: 1.1rem;
	row-gap: 1.1rem;
}

.woocommerce ul.products li.product,
.wc-block-grid__products .wc-block-grid__product {
	position: relative;
	background: var(--sg-white);
	transition: box-shadow var(--sg-transition), transform var(--sg-transition);
	border-radius: var(--sg-radius-lg);
	overflow: hidden;
}

/* При наведенні картка НЕ рухається: жодних translate/scale — міняється
   лише фото (Kadence показує .secondary-product-image).

   Головний винуватець «деформації» був не наш: Kadence у режимі
   woo-archive-action-on-hover тягне весь блок деталей угору на 2rem
   (.entry-content-wrap = .product-details), звільняючи місце для панелі дій,
   яка одночасно виїжджає знизу. Звідси і «частина їде вверх», і серце, що
   зривається вниз. Глушимо обидва рухи; !important тут потрібен — селектор
   теми на один клас специфічніший. */
.woocommerce ul.products li.product:hover {
	box-shadow: var(--sg-shadow-hover);
	z-index: 2;
}

.woocommerce ul.products li.product:hover .entry-content-wrap,
.woocommerce ul.products li.product:focus-within .entry-content-wrap {
	transform: none !important;
}

.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img {
	background: var(--sg-card);
	border-radius: var(--sg-radius) var(--sg-radius) 0 0;
	margin-bottom: 0;
}



.woocommerce ul.products li.product .product-details,
.wc-block-grid__product {
	text-align: center;
	padding: 16px 14px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* порядок у картці: назва → зірки → ціна; ціна завжди цілим рядком */

.woocommerce ul.products li.product .product-details .woocommerce-loop-product__title { order: 1; }
.woocommerce ul.products li.product .product-details .star-rating { order: 2; }
.woocommerce ul.products li.product .product-details .button { order: 4; }

/* ціна одним рядком по центру — Kadence ламає amount на власний рядок */
.woocommerce ul.products li.product .product-details .price {
	order: 3;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: baseline;
	gap: 6px;
}

.woocommerce ul.products li.product .product-details .price .woocommerce-Price-amount,
.woocommerce ul.products li.product .product-details .price ins,
.woocommerce ul.products li.product .product-details .price del {
	display: inline-flex;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.wc-block-grid__product-title {
	font-size: var(--sg-fs-title);
	font-weight: var(--sg-fw-medium);
	line-height: 1.4;
	color: var(--sg-ink);
	padding: 0;
}

.woocommerce ul.products li.product .star-rating {
	margin: 7px auto 5px;
	color: var(--sg-star);
}

.woocommerce .star-rating span::before,
.wc-block-grid__product-rating .star-rating span::before {
	color: var(--sg-star);
}

.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
	color: var(--sg-ink);
	font-weight: var(--sg-fw-bold);
	font-size: var(--sg-fs-price);
	margin-bottom: 0;
}

.woocommerce ul.products li.product .price del,
.wc-block-grid__product-price del {
	color: var(--sg-faint);
	font-weight: 400;
	opacity: 1;
	margin-right: 6px;
	display: inline-block;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--sg-sale);
}

/* бейдж «Розпродаж» */

.woocommerce span.onsale,
.wc-block-grid__product-onsale {
	background: var(--sg-sale);
	color: var(--sg-white);
	border: 0;
	border-radius: var(--sg-radius);
	font-size: 12px;
	font-weight: var(--sg-fw-medium);
	padding: 3px 10px;
	min-height: auto;
	min-width: auto;
	line-height: 1.8;
	top: 12px;
	left: 12px;
	right: auto;
	margin: 0;
	z-index: 3;
}

/* чіп відліку на картці */

.sg-countchip {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 86px;
	background: var(--sg-white);
	color: var(--sg-sale);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 7px 13px;
	border-radius: 20px;
	box-shadow: var(--sg-shadow-hover);
	white-space: nowrap;
	z-index: 3;
	pointer-events: none;
}

.sg-countchip:empty {
	display: none;
}

/* кнопка в картці */

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	background: var(--sg-accent);
	color: var(--sg-white);
	border-radius: var(--sg-radius);
	font-weight: var(--sg-fw-medium);
	margin-top: 12px;
	transition: background var(--sg-transition);
}

.woocommerce ul.products li.product .button:hover {
	background: var(--sg-accent-dark);
	color: var(--sg-white);
}

/* Дії в картці — лише «в обране», і воно стоїть нерухомо.

   Kadence кладе кнопки у .product-action-wrap і виводить його fade+translate
   на hover — саме звідти й бралося «серце злітає вниз». Тому:
   1) .product-details знімаємо з position:relative, щоб wrapper рахувався від
      самої картки і сів у правий верхній кут фото;
   2) глушимо анімацію теми — кнопка видима завжди;
   3) «Обрати» і «швидкий перегляд» ховаємо: купівля живе у власному блоці
      .sg-card-buy нижче, а CSS плагіна wpclever на сторінці не підключається.
   Іконку малюємо самі через mask — у плагінів її теж немає. */

.woocommerce ul.products li.product .product-details {
	position: static;
}

.woocommerce ul.products li.product .product-action-wrap {
	position: absolute;
	top: 12px !important;
	right: 12px !important;
	left: auto !important;
	bottom: auto !important;
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	display: block;
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	z-index: 4;
}

/* у панелі лишається саме серце */
.woocommerce ul.products li.product .product-action-wrap .button,
.woocommerce ul.products li.product .woosc-btn,
.woocommerce ul.products li.product .woosq-btn,
.woocommerce ul.products li.product .product-action-wrap .screen-reader-text {
	display: none !important;
}

.woocommerce ul.products li.product .woosw-btn,
.woocommerce ul.products li.product .woosc-btn,
.woocommerce ul.products li.product .woosq-btn {
	position: relative;   /* якір для ::before-іконки */
	flex: none;
	background: var(--sg-white);
	color: var(--sg-body);
	border: 1px solid var(--sg-line);
	border-radius: 50%;
	width: 38px;
	height: 38px;
	line-height: 38px;
	text-align: center;
	font-size: 0;
	margin: 0;
	padding: 0;
	transition: background var(--sg-transition), color var(--sg-transition), border-color var(--sg-transition);
}


.woocommerce ul.products li.product .woosw-btn::before,
.woocommerce ul.products li.product .woosc-btn::before,
.woocommerce ul.products li.product .woosq-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 17px;
	height: 17px;
	background: currentColor;
	-webkit-mask: var(--sg-qicon) center / contain no-repeat;
	mask: var(--sg-qicon) center / contain no-repeat;
}

.woocommerce ul.products li.product .woosw-btn {
	--sg-qicon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20.5C7.2 16.3 3.5 13.3 3.5 9.4 3.5 6.7 5.6 4.5 8.2 4.5c1.6 0 3 .8 3.8 2 .8-1.2 2.2-2 3.8-2 2.6 0 4.7 2.2 4.7 4.9 0 3.9-3.7 6.9-8.5 11.1z'/></svg>");
}

.woocommerce ul.products li.product .woosc-btn {
	--sg-qicon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M17 5H7m10 0l-3-3m3 3l-3 3'/><path d='M7 19h10M7 19l3-3m-3 3l3 3'/></svg>");
}

.woocommerce ul.products li.product .woosq-btn {
	--sg-qicon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/><circle cx='12' cy='12' r='3'/></svg>");
}

.woocommerce ul.products li.product .woosw-btn:hover,
.woocommerce ul.products li.product .woosc-btn:hover,
.woocommerce ul.products li.product .woosq-btn:hover {
	background: var(--sg-accent);
	border-color: var(--sg-accent);
	color: var(--sg-white);
}



/* ======================================================== КАТАЛОГ (архів) */

/* Kadence дає контенту великий верхній відступ — притискаємо до навігації */
.content-area {
	margin-top: 1rem;
}

/* Сірої смуги-банера із заголовком немає (вимкнена в темі) —
   натомість тонкий службовий рядок у потоці сторінки: */

.sg-archive-head {
	padding: 6px 0 4px;
}

.sg-archive-head .sg-crumbs {
	font-size: 13px;
	color: var(--sg-faint);
	margin: 0 0 6px;
}

.sg-archive-head .sg-crumbs a {
	color: var(--sg-muted);
	text-decoration: none;
}

.sg-archive-head .sg-crumbs a:hover {
	color: var(--sg-accent-dark);
}

.sg-archive-head h1 {
	font-size: 26px;
	margin: 0;
}

/* страховка: якщо тема колись знову ввімкне свій банер — тримаємо компактним */
.entry-hero .entry-hero-container-inner {
	min-height: 0 !important;
	padding-top: 24px;
	padding-bottom: 24px;
}

.entry-hero .entry-header,
.entry-hero.product-hero-section .entry-header {
	min-height: 0 !important;
	padding: 0;
}

.woocommerce-result-count {
	color: var(--sg-muted);
	font-size: 14px;
}

.woocommerce .woocommerce-ordering select {
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius);
	padding: 8px 12px;
	color: var(--sg-body);
	font-size: 14px;
}

/* --- бічна колонка --- */

.widget-area .widget-title,
.sidebar-inner .widget-title {
	font-size: 16px;
	font-weight: var(--sg-fw-bold);
	color: var(--sg-ink);
	padding-bottom: 12px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--sg-line);
	text-transform: none;
}

.widget_product_categories ul li,
.woocommerce-widget-layered-nav ul li {
	border: 0;
	padding: 5px 0;
	list-style: none;
}

.widget_product_categories ul li a,
.woocommerce-widget-layered-nav ul li a {
	color: var(--sg-muted);
	text-decoration: none;
	transition: color var(--sg-transition);
}

.widget_product_categories ul li a:hover,
.woocommerce-widget-layered-nav ul li.chosen a {
	color: var(--sg-accent-dark);
}

.widget_product_categories ul li .count {
	color: var(--sg-faint);
	font-size: var(--sg-fs-small);
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
	background: var(--sg-accent);
}

.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
	background: var(--sg-line);
}

.woocommerce .widget_price_filter .price_slider_amount .button {
	background: var(--sg-accent);
	color: var(--sg-white);
	border-radius: var(--sg-radius);
}

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

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0 3px;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 40px;
	height: 40px;
	line-height: 40px;
	padding: 0;
	text-align: center;
	border-radius: var(--sg-radius);
	color: var(--sg-body);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--sg-accent);
	color: var(--sg-white);
}

/* ==================================================== СТОРІНКА ТОВАРУ */

.woocommerce div.product .product_title {
	color: var(--sg-ink);
	font-size: 30px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--sg-ink);
	font-weight: var(--sg-fw-bold);
	font-size: 24px;
}

.woocommerce div.product p.price del {
	color: var(--sg-faint);
	font-weight: 400;
}

.woocommerce div.product p.price ins {
	text-decoration: none;
	color: var(--sg-sale);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--sg-accent-dark);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--sg-accent);
}

.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	border-radius: var(--sg-radius);
}

.woocommerce div.product form.cart .button {
	background: var(--sg-accent);
	color: var(--sg-white);
	font-weight: var(--sg-fw-medium);
	padding: 14px 32px;
}

/* кількість і кнопка — в один рівний ряд */
.woocommerce div.product form.cart div.quantity {
	margin: 0 10px 0 0;
}

.woocommerce div.product .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) {
	display: flex;
	align-items: stretch;
	gap: 0;
}

.woocommerce div.product .woocommerce-variation-add-to-cart .button,
.woocommerce div.product form.cart .single_add_to_cart_button {
	margin: 0;
}

.woocommerce div.product form.cart .button:hover {
	background: var(--sg-accent-dark);
}

.woocommerce div.product div.images .flex-control-thumbs li img {
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius);
	opacity: 1;
	transition: border-color var(--sg-transition);
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
	border-color: var(--sg-accent);
}

/* ================================================================ ПІДВАЛ */

.site-footer .widget-title,
.site-footer-row .widget-title {
	font-size: 16px;
	font-weight: var(--sg-fw-bold);
	color: var(--sg-ink);
	margin-bottom: 14px;
}

.site-footer a {
	color: var(--sg-muted);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--sg-accent-dark);
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer ul li {
	padding: 4px 0;
}

/* ================================================================ АДАПТИВ */

@media (max-width: 1240px) {
	.sg-cats-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.sg-allcats-btn {
		min-width: 220px;
	}

	/* вужча колонка героя — миски меншають, щоб не наїжджати на текст */
	.sg-hero-media {
		height: 400px;
	}

	.sg-bowl-1 {
		width: 260px;
		height: 260px;
		right: 20px;
		top: 62px;
	}

	.sg-bowl-2 {
		width: 132px;
		height: 132px;
		right: 262px;
		top: 30px;
	}

	.sg-bowl-3 {
		width: 152px;
		height: 152px;
		right: 236px;
		bottom: 40px;
	}
}

@media (max-width: 1024px) {
	:root:root {
		--sg-section-y: 44px;
	}

	.sg-mainbar .sg-container {
		flex-wrap: wrap;
		gap: 16px;
	}

	.sg-search {
		order: 3;
		flex-basis: 100%;
		max-width: none;
	}

	.sg-actions {
		gap: 18px;
	}

	.sg-allcats,
	.sg-nav,
	.sg-navbar.is-stuck .sg-navsearch {
		display: none;
	}

	/* планшет/мобіль: смуга не порожня — бургер зліва, кошик справа */
	.sg-navbar .sg-container {
		justify-content: space-between;
		align-items: center;
	}

	.sg-burger {
		display: flex;
		align-items: center;
		gap: 10px;
		height: 52px;
		font-family: var(--sg-font);
		font-size: 15px;
		font-weight: var(--sg-fw-bold);
		order: -1;
	}

	.sg-burger span {
		display: inline;
	}

	.sg-navcart {
		padding: 0 18px;
	}

	.sg-navcart > span:not(.sg-cart-total) {
		display: none; /* «Мій кошик» — на вузькій смузі досить іконки й суми */
	}

	.sg-features-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sg-hero h1 {
		font-size: 38px;
	}

	.sg-hero-grid {
		grid-template-columns: 1fr;
	}

	.sg-hero-media {
		display: none;
	}

	.sg-deal {
		grid-template-columns: 1fr;
		padding: 28px;
		gap: 24px;
	}

	/* планшет: дві колонки читаються краще за одну розтягнуту */
	.sg-testi-grid,
	.sg-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.sg-topbar-links {
		display: none;
	}

	.sg-act span,
	.sg-act-cart-txt {
		display: none;
	}

	.sg-logo-text {
		font-size: 21px;
	}

	.sg-hero-inner {
		padding: 60px 0 68px;
	}

	.sg-hero h1 {
		font-size: 30px;
	}

	.sg-hero-facts {
		flex-wrap: wrap;
		gap: 18px 26px;
	}

	.sg-hero-facts b {
		font-size: 30px;
	}

	.sg-cats-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sg-banners-2 {
		grid-template-columns: 1fr;
	}

	/* телефон: одна колонка відгуків і блогу */
	.sg-testi-grid,
	.sg-blog-grid {
		grid-template-columns: 1fr;
	}

	.sg-features-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.sg-deal {
		padding: 20px;
	}

	.sg-deal-count {
		flex-wrap: wrap;
		gap: 8px;
	}

	.sg-count-box {
		min-width: 0;
		flex: 1 1 62px;
		padding: 10px 4px;
	}

	.sg-count-box b {
		font-size: 20px;
	}

	.sg-newsletter-inner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		/* у стовпчик блок і так високий — сотня відступів з'їла б пів екрана */
		padding: 56px 0;
	}

	/* у column-режимі flex-basis дітей дає хибну ширину — фіксуємо явно */
	.sg-newsletter-text,
	.sg-newsletter-form {
		width: 100%;
		flex: none;
		max-width: none;
	}

	/* товари на мобілі — 2 колонки, як у референсі (Kadence ставить 1) */
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		width: 100% !important;
		margin: 0 !important;
		float: none !important;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 13px;
	}

	.woocommerce ul.products li.product .price {
		font-size: 14px;
	}

	.sg-countchip {
		font-size: 10px;
		padding: 5px 9px;
		bottom: 8px;
	}

	/* на тачі панель дій показує Kadence; іконки трохи менші */
	.woocommerce ul.products li.product .woosw-btn,
	.woocommerce ul.products li.product .woosq-btn {
		width: 34px;
		height: 34px;
		line-height: 34px;
	}

}

/* ==========================================================================
   МОБІЛЬНА ВЕРСІЯ (≤767) — фінальний шар, свідомо в кінці файлу:
   перекриває базові правила без боротьби зі специфічністю.
   ========================================================================== */

@media (max-width: 767px) {

	/* --- компактна шапка --- */

	.sg-mainbar .sg-container {
		padding-top: 10px;
		padding-bottom: 12px;
		gap: 10px;
	}

	.sg-logo-mark {
		width: 38px;
		height: 38px;
	}

	.sg-logo-mark .sg-i {
		width: 21px;
		height: 21px;
	}

	.sg-logo-text {
		font-size: 20px;
	}

	.sg-logo-text small {
		font-size: 8px;
		letter-spacing: .18em;
	}

	/* у шапці лишається тільки мова — кабінет, обране і кошик є в нижньому барі */
	.sg-actions {
		gap: 0;
		margin-left: auto;
	}

	.sg-actions .sg-act {
		display: none;
	}

	.sg-lang-btn {
		padding: 7px 10px 7px 12px;
	}

	.sg-search {
		order: 3;
		flex-basis: 100%;
	}

	.sg-search input[type="search"] {
		padding: 10px 14px;
		font-size: 14px;
	}

	.sg-search button {
		padding: 0 16px;
	}

	.sg-search button span {
		display: none; /* лише лупа */
	}

	.sg-navbar .sg-container {
		padding-left: 6px;
	}

	.sg-burger,
	.sg-navcart {
		height: 48px;
	}

	.sg-burger {
		background: transparent;
	}

	/* --- мобільна панель меню --- */

	.sg-mobile-panel {
		position: fixed;
		top: 48px;
		left: 0;
		right: 0;
		z-index: 120;
		max-height: calc(100dvh - 48px - 58px);
		overflow-y: auto;
		box-shadow: 0 18px 30px rgba(0, 0, 0, .18);
	}

	body.sg-mobile-open {
		overflow: hidden; /* під панеллю сторінка не скролиться */
	}

	.sg-mp-label {
		margin: 14px 20px 6px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--sg-faint);
	}

	.sg-mp-links {
		display: flex;
		flex-direction: column;
	}

	.sg-mp-links a {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 13px 20px;
		font-size: 15px;
		color: var(--sg-body);
		text-decoration: none;
		border-bottom: 1px solid var(--sg-surface);
	}

	.sg-mp-links .sg-i {
		width: 20px;
		height: 20px;
		color: var(--sg-accent-dark);
	}

	.sg-mp-links .sg-chip {
		top: 0;
	}

	.sg-mp-cats {
		display: flex;
		flex-direction: column;
	}

	.sg-mp-cat {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 9px 20px;
		text-decoration: none;
		color: var(--sg-body);
		font-size: 14px;
		border-bottom: 1px solid var(--sg-surface);
	}

	.sg-mp-cat img {
		border-radius: 50%;
		flex: none;
	}

	.sg-mp-cat em {
		margin-left: auto;
		font-style: normal;
		font-size: 12px;
		color: var(--sg-faint);
	}

	.sg-mp-note {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		padding: 14px 20px 16px;
		font-size: 13px;
		color: var(--sg-muted);
		background: var(--sg-accent-soft);
	}

	.sg-mp-note .sg-i {
		width: 16px;
		height: 16px;
		color: var(--sg-accent-dark);
	}

	/* --- нижній app-бар --- */

	body {
		padding-bottom: calc(60px + env(safe-area-inset-bottom));
	}

	.sg-bottombar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 110;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		background: var(--sg-white);
		border-top: 1px solid var(--sg-line);
		box-shadow: 0 -4px 18px rgba(0, 0, 0, .07);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.sg-bottombar > a,
	.sg-bottombar > button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		height: 58px;
		border: 0;
		background: none;
		font-family: var(--sg-font);
		font-size: 10px;
		color: var(--sg-muted);
		text-decoration: none;
		cursor: pointer;
	}

	.sg-bottombar .sg-i {
		width: 22px;
		height: 22px;
	}

	.sg-bottombar > a.current,
	.sg-bottombar > a:active,
	.sg-bottombar > button:active {
		color: var(--sg-accent-dark);
	}

	.sg-bottombar .sg-bag .sg-cart-count {
		top: -5px;
		right: -8px;
	}

	/* --- герой --- */

	.sg-hero-inner {
		padding: 42px 0 48px;
	}

	.sg-hero h1 {
		font-size: 28px;
	}

	.sg-hero p {
		font-size: 15px;
	}

	.sg-hero-cta {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.sg-hero-cta .sg-btn {
		text-align: center;
		padding: 14px 10px;
		font-size: 14px;
	}

	.sg-hero-facts {
		margin-top: 28px;
		padding-top: 20px;
	}

	/* --- ритм секцій --- */

	:root:root {
		--sg-section-y: 36px;
	}

	.sg-section-title {
		font-size: 24px;
		margin-bottom: 24px;
	}

	/* --- категорії: 3 колонки дрібніших кружечків --- */

	.sg-cats-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 14px 8px;
	}

	.sg-cat-img {
		padding: 5px;
	}

	.sg-cat-img img {
		width: 82px;
		height: 82px;
	}

	.sg-cat-name {
		font-size: 12px;
	}

	.sg-cat-count {
		font-size: 10px;
	}

	/* --- таби: рядок з горизонтальним скролом замість переносу --- */

	.sg-tabhead {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-left: -22px;
		margin-right: -22px;
		padding: 0 22px 4px;
	}

	.sg-tabhead::-webkit-scrollbar {
		display: none;
	}

	.sg-tabhead button {
		flex: none;
	}

	/* --- картки: менше дрібних елементів --- */

	.woocommerce ul.products li.product .woosc-btn {
		display: none; /* порівняння на телефоні не потрібне */
	}



	.woocommerce span.onsale {
		font-size: 10px;
		padding: 2px 8px;
		top: 8px;
		left: 8px;
	}

	/* --- пропозиція тижня --- */

	.sg-deal-media img {
		max-width: 260px;
	}

	.sg-deal-body h2 {
		font-size: 22px;
	}

	/* --- каталог: фільтри за кнопкою --- */

	.sg-filters-toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		justify-content: center;
		margin: 0 0 16px;
		padding: 12px;
		border: 1px solid var(--sg-line);
		border-radius: var(--sg-radius);
		background: var(--sg-white);
		font-family: var(--sg-font);
		font-size: 14px;
		font-weight: var(--sg-fw-medium);
		color: var(--sg-body);
		cursor: pointer;
	}

	.sg-filters-toggle.active {
		border-color: var(--sg-accent);
		color: var(--sg-accent-dark);
	}

	body:not(.sg-filters-open) #secondary,
	body:not(.sg-filters-open) aside.primary-sidebar {
		display: none;
	}

	body.sg-filters-open #secondary,
	body.sg-filters-open aside.primary-sidebar {
		display: block;
		width: 100%;
		margin-bottom: 20px;
		padding: 16px;
		border: 1px solid var(--sg-line);
		border-radius: var(--sg-radius-lg);
		background: var(--sg-white);
	}

	/* тулбар каталогу: сортування на всю ширину, лічильник зайвий */

	.woocommerce-result-count {
		display: none;
	}

	.woocommerce .woocommerce-ordering {
		width: 100%;
	}

	.woocommerce .woocommerce-ordering select {
		width: 100%;
	}

	/* смуга заголовка архіву ще компактніша */

	.entry-hero .entry-hero-container-inner {
		padding-top: 18px;
		padding-bottom: 18px;
	}

	.entry-hero h1.page-title {
		font-size: 22px;
	}

	/* --- сторінка товару --- */

	.woocommerce div.product .product_title {
		font-size: 24px;
	}

	.woocommerce div.product p.price,
	.woocommerce div.product span.price {
		font-size: 20px;
	}

	/* кнопки обраного/порівняння під формою — рівним стеком */

	.woocommerce div.product .woosw-btn,
	.woocommerce div.product .woosc-btn {
		display: block;
		width: 100%;
		margin: 8px 0 0;
		text-align: center;
	}

	/* --- підвал щільніше --- */

	.site-footer .widget-title {
		margin-bottom: 8px;
	}
}

/* ==========================================================================
   ФУТЕР — три колонки на темній підкладці:
   бренд+соцмережі+правове · контакти · форма питання
   ========================================================================== */

.sg-footer {
	background: var(--sg-dark);
	color: var(--sg-on-dark);
	/* без margin-top: на головній футер стикується з оливковою розсилкою,
	   на решті сторінок відступ дає нижній padding контенту */
}

.sg-footer-grid {
	display: grid;
	grid-template-columns: 1.1fr .9fr 1.2fr;
	gap: 56px;
	padding-top: 58px;
	padding-bottom: 46px;
}

.sg-f-col h3 {
	color: var(--sg-on-dark);
	font-size: 22px;
	margin: 0 0 8px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* --- бренд --- */

.sg-logo-ondark .sg-logo-text {
	color: var(--sg-on-dark);
}

.sg-logo-ondark .sg-logo-text em {
	color: var(--sg-accent);
}

.sg-footer .sg-logo .sg-logo-img {
	height: 58px;
}

.sg-logo-ondark .sg-logo-text small {
	color: var(--sg-on-dark-muted);
}

.sg-f-tag {
	margin: 14px 0 18px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--sg-on-dark-muted);
	max-width: 320px;
}

.sg-f-social {
	display: flex;
	gap: 12px;
	margin-bottom: 22px;
}

.sg-f-social a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--sg-on-dark-line);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sg-on-dark);
	transition: background var(--sg-transition), border-color var(--sg-transition), color var(--sg-transition);
}

.sg-f-social a:hover {
	background: var(--sg-accent);
	border-color: var(--sg-accent);
	color: var(--sg-white);
}

.sg-f-social .sg-i {
	width: 19px;
	height: 19px;
}

.sg-f-legal {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-bottom: 22px;
}

.sg-f-legal a {
	color: var(--sg-on-dark);
	text-decoration: none;
	font-size: 14px;
	width: fit-content;
	border-bottom: 1px solid transparent;
	transition: color var(--sg-transition);
}

.sg-f-legal a:hover {
	color: var(--sg-accent);
}

.sg-f-copy {
	margin: 0;
	font-size: 13px;
	color: var(--sg-on-dark-muted);
}

/* --- контакти --- */

.sg-f-label {
	margin: 0 0 4px;
	font-size: 14px;
	color: var(--sg-on-dark-muted);
}

.sg-f-value {
	margin: 0 0 22px;
	font-size: 18px;
	font-weight: var(--sg-fw-bold);
}

.sg-f-value a {
	color: var(--sg-on-dark);
	text-decoration: none;
}

.sg-f-value a:hover {
	color: var(--sg-accent);
}

.sg-f-value-plain {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--sg-on-dark);
}

/* --- форма --- */

.sg-f-ask > p {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--sg-on-dark-muted);
}

.sg-f-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sg-f-form input {
	background: transparent;
	border: 1px solid var(--sg-on-dark-line);
	border-radius: var(--sg-radius);
	padding: 13px 15px;
	font-family: var(--sg-font);
	font-size: 14px;
	color: var(--sg-on-dark);
	outline: none;
	transition: border-color var(--sg-transition);
}

.sg-f-form input::placeholder {
	color: var(--sg-on-dark-muted);
}

.sg-f-form input:focus {
	border-color: var(--sg-accent);
}

.sg-f-form .sg-btn {
	align-self: flex-start;
	margin-top: 4px;
}

.sg-f-done {
	margin: 8px 0 0;
	font-weight: var(--sg-fw-bold);
	color: var(--sg-accent);
}

/* --- адаптив футера --- */

@media (max-width: 1024px) {
	.sg-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

	.sg-f-ask {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	.sg-footer-grid {
		grid-template-columns: 1fr;
		gap: 34px;
		padding-top: 40px;
		padding-bottom: 34px;
	}

	.sg-f-form .sg-btn {
		align-self: stretch;
		text-align: center;
	}
}

/* ==========================================================================
   КАРТКА ТОВАРУ v2: селект фасування + жива ціна + кнопка «+кошик».
   Плашка грамажу на фото, серце у верхньому куті. Без зірок, без панелі
   «Обрати», без швидкого перегляду — за макетом користувача.
   ========================================================================== */

/* прибираємо зайве зі старої картки */

.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .product-details .price,
.woocommerce ul.products li.product .woosq-btn,
.woocommerce ul.products li.product .product-action-wrap .button,
.woocommerce ul.products li.product .product-action-wrap .added_to_cart,
.woocommerce ul.products li.product .product-action-wrap .screen-reader-text {
	display: none !important;
}

/* контейнер дій більше не панель — лише прозорий носій серця */

.woocommerce ul.products li.product .product-action-wrap {
	position: static !important;
	opacity: 1 !important;
	transform: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
	display: block;
}

/* серце — верхній правий кут ФОТО. Details у Kadence relative і краде
   якір absolute-елементів — глушимо, щоб рахувалось від картки. */

.woocommerce ul.products li.product .product-details {
	position: static;
}

.woocommerce ul.products li.product .woosw-btn {
	position: absolute !important;
	top: 10px;
	right: 10px;
	z-index: 4;
	width: 36px;
	height: 36px;
	line-height: 36px;
}

/* бейдж «Розпродаж!» не конфліктує з серцем — він зліва */

/* плашка грамажу на фото */

.sg-gram-badge {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 3;
	background: var(--sg-accent);
	color: var(--sg-white);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	padding: 8px 14px;
	border-radius: 4px 14px 4px 14px;
	box-shadow: var(--sg-shadow);
	pointer-events: none;
}

/* чіп відліку тримаємо внизу фото: угорі тепер плашка грамажу зліва
   і «Розпродаж!» справа */
.sg-countchip {
	bottom: 12px;
	top: auto;
	left: 50%;
	transform: translateX(-50%);
}

.woocommerce ul.products li.product span.onsale {
	top: 12px;
	left: auto;
	right: 54px;
}

/* --- блок купівлі --- */

.sg-card-buy {
	width: 100%;
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	order: 5;
}

/* Фасування.

   Нативний <select> не піддається стилізації зсередини: список опцій малює
   операційна система, і він завжди прямокутний. Тому select лишається в DOM
   носієм даних (на ньому висить логіка ціни й кнопки), але ховається, а поверх
   малюється власний список — .sg-sel, який збирає sg.js. Поки скрипт не
   відпрацював, видно нативний елемент, тож він теж має пристойний вигляд. */

.sg-card-var {
	align-self: center;
	min-width: 6.4em;
	appearance: none;
	-webkit-appearance: none;
	background:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f3336' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>")
		right 12px center / 13px no-repeat var(--sg-card);
	border: 1px solid var(--sg-line);
	border-radius: 18px;
	padding: 8px 30px 8px 14px;
	font-family: var(--sg-font);
	font-size: 13px;
	font-weight: var(--sg-fw-medium);
	color: var(--sg-body);
	cursor: pointer;
	outline: none;
	transition: border-color var(--sg-transition);
}

/* --- власний список фасування --- */

/* Список вужчий за картку і стоїть по центру: на всю ширину він важив
   візуально більше за назву товару й ціну.

   Ширину задаємо контейнеру, а не кнопці. Кнопка лишається 100% від нього,
   і випадаючий список (він тягнеться від краю до краю .sg-sel) завжди рівно
   під кнопкою — при width на самій кнопці вони б розійшлися.

   Розмір — в em від власного кегля: 6.4em ≈ 83px при 13px. Це трохи більше
   за найдовший варіант («250 г» зі стрілкою), тож підпис не стрибає при
   виборі, а якщо колись зміниться шрифт — контрол масштабується з ним. */
.sg-sel {
	position: relative;
	align-self: center;
	font-size: 13px;
	min-width: 6.4em;
}

/* нативний лишаємо в DOM, але прибираємо з очей і з фокусу */
.sg-sel .sg-card-var {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.sg-sel-btn {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	background: var(--sg-card);
	border: 1px solid var(--sg-line);
	border-radius: 16px;
	padding: 7px 10px;
	font-family: var(--sg-font);
	font-size: 13px;
	font-weight: var(--sg-fw-medium);
	color: var(--sg-body);
	cursor: pointer;
	outline: none;
	transition: border-color var(--sg-transition), background var(--sg-transition);
}

.sg-sel-btn:hover,
.sg-sel.open .sg-sel-btn {
	border-color: var(--sg-accent);
}

.sg-sel-btn:focus-visible {
	border-color: var(--sg-accent);
	box-shadow: 0 0 0 3px var(--sg-accent-soft);
}

.sg-sel-btn .sg-i {
	width: 14px;
	height: 14px;
	flex: none;
	color: var(--sg-muted);
	transition: transform var(--sg-transition);
}

.sg-sel.open .sg-sel-btn .sg-i {
	transform: rotate(180deg);
}

.sg-sel-list {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	display: none;
	padding: 5px;
	background: var(--sg-white);
	border: 1px solid var(--sg-line);
	border-radius: 16px;
	box-shadow: 0 12px 30px rgba(16, 13, 10, .14);
	z-index: 20;
}

.sg-sel.open .sg-sel-list {
	display: block;
}

.sg-sel-opt {
	display: block;
	width: 100%;
	text-align: center;
	background: none;
	border: 0;
	border-radius: 11px;
	padding: 7px 8px;
	font-family: var(--sg-font);
	font-size: 13px;
	font-weight: var(--sg-fw-medium);
	color: var(--sg-body);
	cursor: pointer;
	transition: background var(--sg-transition), color var(--sg-transition);
}

.sg-sel-opt:hover,
.sg-sel-opt:focus-visible {
	background: var(--sg-accent-soft);
	color: var(--sg-accent-darker);
	outline: none;
}

.sg-sel-opt[aria-selected="true"] {
	background: var(--sg-accent);
	color: var(--sg-white);
}

/* картка обрізає вміст заради скруглення фото — на час відкритого списку
   знімаємо обрізання і піднімаємо картку над сусідніми */
.woocommerce ul.products li.product.sg-sel-host,
.wc-block-grid__product.sg-sel-host {
	overflow: visible;
	z-index: 6;
}

/* дебаг для скріншотів: ?sgdebug=sel розкриває перший список */
body.sg-debug-sel ul.products li.product:first-child {
	overflow: visible;
	z-index: 6;
}

body.sg-debug-sel ul.products li.product:first-child .sg-sel-list {
	display: block;
}

.sg-card-var:focus {
	border-color: var(--sg-accent);
}

.sg-card-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.sg-card-price {
	font-size: 18px;
	font-weight: 700;
	color: var(--sg-ink);
	white-space: nowrap;
}

.sg-card-price small {
	font-size: 14px;
	font-weight: 600;
}

.sg-card-add {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 0;
	cursor: pointer;
	background: var(--sg-accent);
	color: var(--sg-white);
	border-radius: 24px;
	padding: 10px 18px;
	transition: background var(--sg-transition), transform var(--sg-transition);
}

.sg-card-add:hover {
	background: var(--sg-accent-dark);
}

.sg-card-add:active {
	transform: scale(.94);
}

.sg-card-add .sg-card-plus {
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}

.sg-card-add .sg-i {
	width: 20px;
	height: 20px;
}

.sg-card-add.is-added {
	background: var(--sg-accent-dark);
}

@media (max-width: 767px) {
	.sg-card-var,
	.sg-sel-btn {
		padding: 7px 12px;
		font-size: 12.5px;
	}

	.sg-card-var {
		padding-right: 28px;
	}

	.sg-sel-opt {
		font-size: 12.5px;
		padding: 7px 10px;
	}

	.sg-card-price {
		font-size: 15px;
	}

	.sg-card-add {
		padding: 8px 13px;
	}

	.sg-gram-badge {
		font-size: 11px;
		padding: 6px 10px;
		left: 8px;
		top: 8px;
	}
}