/*
Theme Name: LikeOn
Theme URI: https://likeon.com.ua
Description: Child theme for the LikeOn online store. Custom catalog and product templates, cart and checkout, WooCommerce emails, wishlist, one-click order, Ukrainian interface strings.
Author: Seganiko (Serhii Nikolaienko)
Author Email: info@seganiko.com
Author Phone: +33744751248
Author Telegram: @sega_niko
Author Viber: +33744751248
Author WhatsApp: +33744751248
Author Url: https://seganiko.com
Author URI: https://seganiko.com
Author Linkedin profile: https://www.linkedin.com/in/seganiko/
Author X.com (Twitter) profile: https://x.com/sega_niko
Author Youtube profile: https://www.youtube.com/@seganiko
Version: 1.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Template: flatsome
Text Domain: likeon
Domain Path: /languages
Requires at least: 6.0
Requires PHP: 7.4
*/

/**
 * Copyright (c) 2026 Seganiko (Serhii Nikolaienko) - https://seganiko.com
 *
 * Built for the LikeOn online store: https://likeon.com.ua
 * Contact: info@seganiko.com, Telegram @sega_niko, +33744751248
 *
 * This theme is a child theme and runs on top of the Flatsome parent theme.
 * The copyright above covers the code in this directory only.
 */


/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

#formOrderOneClick .button.running,
#formOrderOneClick .button.disabled,
#formOrderOneClick button.disabled,
#formOrderOneClick .button[disabled],
#formOrderOneClick button[disabled]{
	cursor: pointer!important;
	opacity: 1!important;
	padding: 0 1.2em!important;
}

#formOrderOneClick.ld-ext-left.running{
	padding-left: auto!important;
}

#formOrderOneClick .button:active{
	cursor: pointer!important;
	opacity: 1!important;
}

button[name="btnsend"] .ld.ld-ring.ld-cycle{
	display: none!important;
}

.page-template.page-template-page--check .focused-checkout-footer{
	display: none;
}

.lang-block{
	width: 62px;
	margin-top: 15px;
}

.lang-block .switcher{
	width: 100%;
	font-size: 12px;
}

.switcher .selected{
	background: none!important;
}

.switcher .selected a{
	width: 100%!important;
	border: none!important;
	font-size: 0px!important;
}

.switcher .option{
	width: 36px!important;
}

.switcher .option a{
	font-size: 0px!important;
}

#product-search-field-2 {
	width: 90%!important;
}

.widget a:hover {
	color: #000000!important;
    font-weight: 900!important;;
}

.lang-block .widget a:hover{
	font-weight: 300!important;
}

.wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:after{
    /*border: 5px solid #222!important;
	border-top: 0.5em solid #222!transparent;*/
	border-width: 6px;
    top: 12px;
	left: 41px;
}

.off-canvas-center .nav-sidebar.nav-vertical>li .toggle {
	visibility: hidden!important;
}

.product-search-filter-terms .product-search-filter-product_cat.style-inline li, .product-search-filter-terms .product-search-filter-product_tag.style-inline li, .product-search-filter-terms .product-search-filter-attribute.style-inline li {
	display: inline;
}

.product-search-filter-pa_color option {
	visibility: hidden;
}

#billing_email_field label span,
#buyoneclick_form_order textarea.buymessage.buyvalide{
	display: none;
}

.mfp-wrap.mfp-auto-cursor.off-canvas.off-canvas-center.mfp-ready{
	position: fixed!important;
}

ul.mobile-nav.nav.nav-left a span{
	display: block;
	width: 100%;
	clear: both;
	float: none;
	font-weight: 300;
	font-size: 15px;
	margin: 0;
	margin-left: -7px;
}

.products.has-equal-box-heights .box-image{
	/* padding-top: 100%!important; */
}



.mfp-wrap{
	z-index: 9995!important;
}

.off-canvas .sidebar-menu{
	padding-top: 0!important;
}

.off-canvas-center .mfp-content{
    padding-top: 35px!important;
	height: 100vh!important;
	overflow-y: scroll!important;
}

.off-canvas .nav-vertical>li>a{
    padding-top: 8px!important;
    padding-bottom: 8px!important;
}

#formOrderOneClick .button{
    min-width: 125px!important;
}

.product-search-filter-terms-heading.product-search-filter-attribute-heading{
	display: none!important;
}






@media screen and (max-width: 850px){

	.lang-block{
		width: 62px;
		position: absolute;
		margin-top: 29px;
		top: 0;
		right: 60px;
	}
	
	.header-search.header-search-lightbox.has-icon,
	.cart-item.has-icon{
		display: none;
		/* width: 62px!important;
		position: absolute!important;
		margin-top: 26px!important;
		top: 0!important;
		left: 60px!important;
		display: block!important; */
	}
	
	.flex-col.show-for-medium.flex-right .cart-item.has-icon,
	.header-s-block .header-search.header-search-lightbox.has-icon{
		display: block;
	}
	
	.header-s-block{
		width: 44px!important;
		position: absolute!important;
		margin-top: 26px!important;
		top: 0!important;
		left: 60px!important;
		display: block!important;
	}
	
}




@media screen and (max-width: 768px){

	body.woocommerce-cart .page-wrapper{
		padding-top: 5px;
	}
	
	body.woocommerce-cart form.woocommerce-cart-form{
		margin-bottom: 0!important;
	}
	
	body.woocommerce-cart div.cart-sidebar.col-inner.is-well{
		padding: 10px 15px 15px 15px!important;
	}
	
	body.woocommerce-cart div.cart-sidebar.col-inner.is-well tr.cart-subtotal{
		display: none!important;
	}
	
	body.woocommerce-cart nav.breadcrumbs.heading-font.checkout-breadcrumbs{
		padding: 0;
	}
	
	body.woocommerce-cart .page-title-inner{
		padding-top: 12px;
	}
	
	body.woocommerce-cart .container .message-container{
		line-height: 1.1;
		font-size: 14px;
	}
	
	body.woocommerce-cart .continue-shopping.pull-left.text-left .button-continue-shopping.button.primary.is-outline{
		margin-bottom: 0;
	}
	
	body.woocommerce-cart .shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents td.actions{
		padding: 15px 0 4px;
	}
	
	body.woocommerce-cart .cart-sidebar.col-inner.is-well .shop_table.shop_table_responsive{
		margin-bottom: 0;
	}
	
	body.woocommerce-cart .cart_totals .wc-proceed-to-checkout{
		margin: 10px 0 0;
	}
	
}

@media screen and (max-width: 640px){
	#sb_instagram.sbi_col_3 #sbi_images .sbi_item,
	#sb_instagram.sbi_col_4 #sbi_images .sbi_item,
	#sb_instagram.sbi_col_5 #sbi_images .sbi_item,
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item{
		width: 33.33%!important;
	}
	
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(4),
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(5),
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(6){
	/* #sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(11),
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(12),
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(17),
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(18),
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(23),
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(24),
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(29),
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(30),
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(35),
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(36),
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(41),
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(42),
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(47),
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(48),
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(53),
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(54),
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(59),
	#sb_instagram.sbi_col_6 #sbi_images .sbi_item:nth-child(60) */
		display: none!important;
	}

}

a.lmp_button{
	margin-bottom: 13px;
}






/* ==========================================================================
   ПІДВАЛ LIKEON
   Розкладка: колонка бренду (соцмережі + логотип) і три колонки посилань,
   знизу окремий рядок з контактами та копірайтом.
   ========================================================================== */

.likeon-footer {
	background: #f7f6f4;
	color: #1a1a1a;
	border-top: 1px solid #e8e5e0;
}

/* Ширина і бічні поля — такі самі, як у .container теми (блок «ШИРИНА
   КОНТЕЙНЕРА САЙТУ» наприкінці файла), інакше підвал не збігався б по краю
   з шапкою і каталогом. */
.likeon-footer__inner {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 40px;
	max-width: var(--likeon-width);
	margin: 0 auto;
	padding: 64px 15px 56px;
}

/* --- колонка бренду --- */
.likeon-footer__social {
	display: flex;
	gap: 12px;
	margin-bottom: 56px;
}

.likeon-footer__social a {
	width: 44px;
	height: 44px;
	border: 1px solid #d8d4cd;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #1a1a1a;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.likeon-footer__social a:hover {
	background: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
}

.likeon-footer__logo img {
	/* Логотип — коло з прозорим тлом. Квадратний бокс і border-radius тримають
	   форму навіть якщо колись підставлять картинку з полями. */
	width: 120px;
	height: 120px;
	display: block;
	border-radius: 50%;
	object-fit: cover;
}

/* --- колонки посилань --- */
.likeon-footer__title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin: 0 0 24px;
	color: #1a1a1a;
}

.likeon-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.likeon-footer__col li { margin-bottom: 14px; }

.likeon-footer__col a {
	color: #3a3a3a;
	font-size: 15px;
	line-height: 1.5;
	text-decoration: none;
	transition: color .15s ease;
}

.likeon-footer__col a:hover {
	color: #000;
	text-decoration: underline;
}

/* --- нижній рядок --- */
.likeon-footer__bottom {
	border-top: 1px solid #e8e5e0;
}

.likeon-footer__bottom-inner {
	max-width: var(--likeon-width);
	margin: 0 auto;
	padding: 22px 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 14px;
	color: #5a5a5a;
}

.likeon-footer__bottom a { color: #5a5a5a; text-decoration: none; }
.likeon-footer__bottom a:hover { color: #000; text-decoration: underline; }
.likeon-footer__sep { margin: 0 8px; color: #b5b0a8; }

/* --- адаптив --- */
@media (max-width: 992px) {
	.likeon-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 36px 24px;
		padding: 48px 20px 40px;
	}
	.likeon-footer__brand { grid-column: 1 / -1; }
	.likeon-footer__social { margin-bottom: 28px; }
}

@media (max-width: 560px) {
	/* На телефоні підвал був заввишки понад тисячу пікселів: логотип 120 px,
	   соцмережі окремим рядком і всі дванадцять посилань в одну колонку.
	   Тепер логотип і соцмережі — один рядок, розділи — дві колонки. */
	.likeon-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 20px;
		padding: 32px 16px 28px;
	}
	.likeon-footer__brand {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding-bottom: 26px;
		border-bottom: 1px solid #e8e5e0;
	}
	.likeon-footer__logo { order: 1; }
	.likeon-footer__logo img { width: 64px; height: 64px; }
	.likeon-footer__social { order: 2; gap: 10px; margin: 0; }
	.likeon-footer__title { margin-bottom: 8px; font-size: 12px; }
	.likeon-footer__col li { margin: 0; }
	.likeon-footer__col a { display: block; padding: 8px 0; font-size: 15px; line-height: 1.35; }
	/* третій розділ — на всю ширину, посилання тими ж двома колонками: довгі назви не ламаються */
	.likeon-footer__col:last-child { grid-column: 1 / -1; }
	.likeon-footer__col:last-child ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
	.likeon-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		padding: 18px 16px 22px;
	}
	.likeon-footer__bottom-inner a { font-weight: 600; color: #1a1a1a; }
}


/* ==========================================================================
   КАРТКА ТОВАРУ — права колонка
   Спокійна типографіка, багато повітря, тонкі лінії замість жирних рамок.
   ========================================================================== */

.single-product .product-info.summary { padding-left: 8px; }

/* заголовок */
.single-product .product-info .product-title {
	font-size: 23px;
	line-height: 1.3;
	font-weight: 500;
	color: #1a1a1a;
	letter-spacing: -.01em;
	margin: 0 0 6px;
}

/* важкий роздільник Flatsome прибираємо */
.single-product .product-info .is-divider { display: none; }

/* ціна — окремим блоком «ЦІНА» наприкінці файла: там її типографіка спільна
   для картки товару, швидкого перегляду і липкої панелі покупки */

/* короткий опис */
.single-product .product-short-description {
	font-size: 14px;
	line-height: 1.65;
	color: #4a4a4a;
	margin-bottom: 26px;
}
.single-product .product-short-description ul { margin: 0; padding-left: 18px; }
.single-product .product-short-description li { margin-bottom: 5px; }

/* --- вибір розміру: акуратні квадратики --- */
.single-product .variations { margin-bottom: 22px; border: 0; }
.single-product .variations td,
.single-product .variations th { border: 0; padding: 0; background: none; }
.single-product .variations .label label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #1a1a1a;
	margin-bottom: 10px;
	display: block;
}
.single-product .variations td.value { display: flex; flex-wrap: wrap; gap: 8px; }

.single-product .variations td.value label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 10px;
	margin: 0;
	border: 1px solid #dcd8d2;
	border-radius: 2px;
	font-size: 14px;
	line-height: 1;
	color: #1a1a1a;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.single-product .variations td.value label:hover { border-color: #1a1a1a; }
.single-product .variations td.value input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.single-product .variations td.value input[type="radio"]:checked + label,
.single-product .variations td.value label.likeon-checked {
	border-color: #1a1a1a;
	background: #f2efea;
}
.single-product .reset_variations {
	font-size: 12px;
	color: #8a8a8a;
	text-decoration: underline;
}

/* --- кнопки --- */
.single-product .product-info .single_add_to_cart_button.button.alt {
	display: block;
	width: 100%;
	margin: 0 0 10px;
	padding: 17px 20px;
	background: #1a1a1a;
	border: 1px solid #1a1a1a;
	border-radius: 2px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	box-shadow: none;
	transition: background-color .18s ease;
}
.single-product .product-info .single_add_to_cart_button.button.alt:hover { background: #333; border-color: #333; }

.single-product .product-info .single_add_to_cart_button.clickBuyButton {
	display: block;
	width: 100%;
	margin: 0;
	padding: 17px 20px;
	background: #fff;
	border: 1px solid #1a1a1a;
	border-radius: 2px;
	color: #1a1a1a;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	box-shadow: none;
	transition: background-color .18s ease, color .18s ease;
}
.single-product .product-info .single_add_to_cart_button.clickBuyButton:hover { background: #1a1a1a; color: #fff; }

/* кількість ховаємо — на картці вона лише плутає, міняється у кошику */
.single-product .product-info form.cart .quantity { display: none; }

/* --- рядок про доставку --- */
.likeon-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 18px 0 0;
	font-size: 13.5px;
	color: #5a5a5a;
	text-align: center;
}
.likeon-note svg { flex: 0 0 auto; color: #1a1a1a; }

/* --- акордеони --- */
.likeon-acc { margin-top: 28px; border-top: 1px solid #e8e5e0; }
.likeon-acc__item { border-bottom: 1px solid #e8e5e0; }
.likeon-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 18px 2px;
	margin: 0;
	background: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #1a1a1a;
	line-height: 1.3;
	text-align: left;
}
.likeon-acc__head:hover { color: #000; background: none; }

/* знак «+», що перетворюється на «−» */
.likeon-acc__sign { position: relative; width: 14px; height: 14px; flex: 0 0 auto; }
.likeon-acc__sign::before,
.likeon-acc__sign::after {
	content: "";
	position: absolute;
	background: #1a1a1a;
	transition: transform .2s ease, opacity .2s ease;
}
.likeon-acc__sign::before { left: 0; top: 6px; width: 14px; height: 1.5px; }
.likeon-acc__sign::after  { left: 6px; top: 0; width: 1.5px; height: 14px; }
.likeon-acc__head[aria-expanded="true"] .likeon-acc__sign::after { transform: scaleY(0); opacity: 0; }

.likeon-acc__body {
	padding: 0 2px 22px;
	font-size: 14px;
	line-height: 1.7;
	color: #4a4a4a;
}
.likeon-acc__body p:last-child { margin-bottom: 0; }
.likeon-acc__body table { width: 100%; font-size: 14px; margin: 0; }
.likeon-acc__body table th,
.likeon-acc__body table td { padding: 8px 0; border: 0; border-bottom: 1px solid #f0ede8; text-align: left; }
.likeon-acc__body table th { font-weight: 600; color: #1a1a1a; width: 42%; }

/* ==========================================================================
   СХОЖІ ТОВАРИ — слайдер
   ========================================================================== */

.related.related-products-wrapper { padding-top: 56px; }

.related .product-section-title {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	color: #1a1a1a;
	margin-bottom: 28px;
	border: 0;
}

/* картка: без рамок і тіней, тільки фото і три рядки тексту */
.related .product-small .box-image { border-radius: 2px; overflow: hidden; }
.related .product-small .box-text { padding: 14px 2px 0; text-align: left; }
.related .product-small .product-title a {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #1a1a1a;
	line-height: 1.4;
}
.related .product-small .category { font-size: 13px; color: #9a9a9a; text-transform: none; letter-spacing: 0; }
.related .product-small .price { font-size: 20px; font-weight: 700; color: #1a1a1a; line-height: 1.25; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.related .product-small .price del { color: #6f6a64; font-size: .7em; font-weight: 500; margin-right: 10px; }
.related .product-small .star-rating { display: none; }

/* круглі стрілки слайдера */
.related .flickity-prev-next-button {
	width: 46px;
	height: 46px;
	background: rgba(255,255,255,.92);
	border: 1px solid #e2ded8;
	border-radius: 50%;
	box-shadow: none;
}
.related .flickity-prev-next-button:hover { background: #fff; border-color: #1a1a1a; }
.related .flickity-prev-next-button svg { width: 36%; height: 36%; }
.related .flickity-prev-next-button .arrow { fill: #1a1a1a; }

@media (max-width: 849px) {
	.single-product .product-info .product-title { font-size: 24px; }
	/* 15 px, а не 0: на телефоні праву колонку вирівнюємо по тому ж полю, що
	   й решту сторінки, інакше назва і ціна лізли впритул до краю екрана. */
	.single-product .product-info.summary { padding-left: 15px; }
}

/* --- перебиваємо inline-стилі теми ---
   Flatsome друкує свій inline-CSS уже після цього файлу і ставить там
   !important на колір кнопок. Специфічність його не бере, тому тут
   !important виправданий — інакше кнопки лишаються фірмово-червоними. */

.single-product .product-info .single_add_to_cart_button.button.alt,
.single-product .product-info .single_add_to_cart_button.button.alt:focus {
	background-color: #1a1a1a !important;
	border-color: #1a1a1a !important;
	color: #fff !important;
}
.single-product .product-info .single_add_to_cart_button.button.alt:hover {
	background-color: #333 !important;
	border-color: #333 !important;
}

.single-product .product-info .single_add_to_cart_button.clickBuyButton,
.single-product .product-info .single_add_to_cart_button.clickBuyButton:focus {
	background-color: #fff !important;
	border-color: #1a1a1a !important;
	color: #1a1a1a !important;
}
.single-product .product-info .single_add_to_cart_button.clickBuyButton:hover {
	background-color: #1a1a1a !important;
	color: #fff !important;
}



/* підпис розміру — над квадратиками, а не збоку */
.single-product .variations,
.single-product .variations tbody,
.single-product .variations tr,
.single-product .variations th,
.single-product .variations td { display: block; width: auto; }
.single-product .variations tr + tr { margin-top: 16px; }

/* «Очистити» окремим рядком під розмірами, без накладання на опис */
.single-product .variations .reset_variations {
	display: inline-block;
	position: static !important;
	margin-top: 10px;
	float: none;
}

/* пунктирний роздільник під варіантами прибираємо */
.single-product .product-info .single_variation_wrap::before,
.single-product .product-info .woocommerce-variation-add-to-cart::before { display: none; }
.single-product .product-info form.cart { border: 0; }
.single-product .product-info .single_variation_wrap { border-top: 0; }

/* Кнопка «в один клік» має ті самі класи button.alt, що й основна,
   тому потрібна вища специфічність, інакше вона теж стає чорною. */
.single-product .product-info .single_add_to_cart_button.clickBuyButton.button.alt,
.single-product .product-info .single_add_to_cart_button.clickBuyButton.button.alt:focus {
	background-color: #fff !important;
	border-color: #1a1a1a !important;
	color: #1a1a1a !important;
}
.single-product .product-info .single_add_to_cart_button.clickBuyButton.button.alt:hover {
	background-color: #1a1a1a !important;
	color: #fff !important;
}

/* пунктирні лінії навколо блоку варіантів */
.single-product .product-info .variations tr,
.single-product .product-info .woocommerce-variation-price,
.single-product .product-info .woocommerce-variation {
	border: 0 !important;
}
.single-product .product-info .woocommerce-variation-price { margin: 0; padding: 0; }



/* ==========================================================================
   ШАПКА — один рядок, зафіксована зверху
   Логотип ліворуч, меню по центру, іконки праворуч.

   Важливо про будову: у головному рядку Flatsome є лише групи «ліворуч» і
   «праворуч», центральної немає. Тому меню кладемо в ліву групу (вона має
   flex-grow) і центруємо вже тут. Блоки .lang-block і .header-s-block
   вписані в батьківську тему і порожні — ховаємо, щоб не ламали ряд.
   ========================================================================== */

/* Липкість робить сама тема (клас .stuck + position:fixed).
   Свій position:sticky тут НЕ ставимо: липкий елемент тримається лише в межах
   батька, а #header має висоту рядка (78px) — шапка одразу їхала б угору.
   До того ж sticky перебивав fixed від теми і ламав її механізм. */
#header .header-wrapper {
	background: #fff;
	border-bottom: 1px solid #ececec;
}
#header .header-wrapper.stuck { box-shadow: 0 2px 12px rgba(0,0,0,.06); }

#header .header-top,
#header .header-bottom,
#header .top-divider { display: none !important; }

#header .lang-block,
#header .header-s-block { display: none !important; }

#header .header-main { min-height: 78px; }

#header .header-inner {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	min-height: 78px;
}
#header .header-inner > .flex-col { align-self: center !important; }

#header .header-inner > .flex-col.logo { flex: 0 0 auto; margin: 0 24px 0 0; }
#header .header-inner > .flex-col.logo img { max-height: 54px; width: auto; }

/* ліва група тримає меню — розтягуємо і центруємо вміст */
#header .header-inner > .flex-col.hide-for-medium.flex-left { flex: 1 1 auto; }
#header .header-inner > .flex-col.hide-for-medium.flex-left > .nav {
	justify-content: center;
	flex-wrap: nowrap;
}

#header .header-inner > .flex-col.hide-for-medium.flex-right { flex: 0 0 auto; margin-left: auto; }

/* меню */
#header .header-nav-main > li > a {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #1a1a1a;
	padding: 10px 14px;
}
#header .header-nav-main > li > a:hover { color: #000; }
#header .nav-dropdown {
	border-radius: 2px;
	border: 1px solid #ececec;
	box-shadow: 0 10px 30px rgba(0,0,0,.07);
}

/* іконки праворуч — однакові кружечки */
#header .nav-right > li { margin-left: 2px; }
#header .nav-right > li > a,
#header .nav-right .likeon-wl-head {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 42px;
	height: 42px;
	padding: 0;
	color: #1a1a1a;
	border-radius: 50%;
	transition: background-color .15s ease;
}
/* лише колір тла: скорочене background на наведенні стирало намальовану фоном іконку кабінету — лишалася сіра пляма */
#header .nav-right > li > a:hover,
#header .nav-right .likeon-wl-head:hover { background-color: #f4f2ef; color: #000; }

/* підписи біля іконок прибираємо — лишаються самі значки */
#header .nav-right .header-cart-title,
#header .nav-right .account-login-title { display: none !important; }

/* лічильник кошика */
#header .nav-right .cart-item .cart-icon strong {
	position: absolute;
	top: 1px; right: 0;
	width: 17px; height: 17px;
	border: 0;
	background: #1a1a1a;
	color: #fff;
	font-size: 10.5px;
	line-height: 17px;
	font-weight: 600;
}

/* пошук у шапці — лише іконка, без поля */
#header .nav-right .header-search-form .search-form { margin: 0; }

@media (max-width: 849px) {
	#header .header-main,
	#header .header-inner { min-height: 62px; }
	#header .header-inner > .flex-col.logo { margin-right: 12px; }
	#header .header-inner > .flex-col.logo img { max-height: 40px; }
	#header .nav-right > li > a,
	#header .nav-right .likeon-wl-head { width: 38px; height: 38px; }
}

/* Шапка завжди «липка» (клас .stuck стоїть у розмітці, див. header.php).
   Порожня смуга під нею на телефоні: #header запам'ятовував висоту звичайного рядка
   (86 px на телефоні, 78 на планшеті), а «липкий» рядок — 64 px, і різниця лишалася
   порожнечею над першим екраном. Тепер рядок однаковий, а місце під шапку — рівно
   її висота (рядок + 1 px рамки), хоч би що тема записала в style. */
@media (max-width: 849px) {
	#header .header-main { height: 64px !important; transition: none !important; }
	#header.has-sticky { height: 65px !important; }
}
@media (min-width: 850px) {
	#header.has-sticky { height: 79px !important; }
}
/* у адміністраторів шапка стоїть під адмін-панеллю, а не ховається за нею */
@media (min-width: 601px) {
	.admin-bar #header .header-wrapper.stuck { top: 46px; }
}
@media (min-width: 783px) {
	.admin-bar #header .header-wrapper.stuck { top: 32px; }
}

/* Права група розкладалася стовпчиком, а пункти меню переносилися на два
   рядки. Робимо обидва списки горизонтальними і забороняємо перенос. */
#header .header-nav-main,
#header .nav-right {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
}
#header .nav-right > li,
#header .header-wishlist {
	display: flex !important;
	align-items: center;
	margin: 0 0 0 2px;
	float: none;
}
#header .header-nav-main > li > a {
	white-space: nowrap;
	padding: 10px 11px;
	letter-spacing: .07em;
}
#header .header-nav-main > li { float: none; }

/* Пункти меню переносилися на два рядки, а «Увійти» лишався текстом. */
#header .header-nav-main > li,
#header .header-nav-main > li > a,
#header .header-nav-main > li > a > span { white-space: nowrap !important; }
#header .header-nav-main > li > a { padding: 10px 10px; font-size: 12px; }

/* акаунт — лише іконка, як і решта */
#header .nav-right .account-item .account-login-title { display: none !important; }
/* підпис «Увійти» ховаємо лише з очей — для читалок екрана посилання не лишається безіменним */
#header .nav-right .account-item > a > span {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
#header .nav-right .account-item > a::before { content: none; }

/* У посилання акаунта всередині лише текст, без значка. Тому текст ховаємо,
   а іконку користувача малюємо псевдоелементом — інакше лишалася порожнеча. */
#header .nav-right .account-item > a {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='1.6'%3E%3Ccircle cx='12' cy='8.2' r='3.6'/%3E%3Cpath d='M5.2 19.4a6.8 6.8 0 0 1 13.6 0'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 21px 21px;
}


/* ==========================================================================
   КАРТКА ТОВАРУ: прибираємо порожню бічну колонку
   Колонка з інформацією має col-fit (flex: 1 1 0), тож звільнене місце
   вона забирає сама — окремо ширину задавати не треба.
   ========================================================================== */

.single-product #product-sidebar.product-sidebar-small { display: none !important; }

/* трохи більше повітря між галереєю та описом */
.single-product .product-info.summary { padding-left: 40px; }

@media (max-width: 849px) {
	.single-product .product-info.summary { padding-left: 15px; }
}

/* ==========================================================================
   ХЛІБНІ КРИХТИ — дрібні й неяскраві, щоб не сперечалися із заголовком
   ========================================================================== */

.woocommerce-breadcrumb.breadcrumbs,
.likeon-crumbs .woocommerce-breadcrumb.breadcrumbs {
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: .01em;
	text-transform: none;
	color: #9a9a9a;
	margin-bottom: 18px;
	padding: 0;
}
/* Усі ланки одного світлого тону, зокрема остання: так ланцюжок не сперечається
   із заголовком сторінки. Розділювачі — з широкими відступами, щоб дихало. */
.woocommerce-breadcrumb.breadcrumbs a,
.likeon-crumbs .woocommerce-breadcrumb.breadcrumbs a {
	color: #9a9a9a;
	text-transform: none;
	font-weight: 400;
	text-decoration: none;
	border: 0;
}
.woocommerce-breadcrumb.breadcrumbs a:hover,
.likeon-crumbs .woocommerce-breadcrumb.breadcrumbs a:hover { color: #1a1a1a; }

.woocommerce-breadcrumb.breadcrumbs .divider {
	margin: 0 14px;
	color: #d5d0c9;
	font-weight: 400;
}
.woocommerce-breadcrumb.breadcrumbs .divider::before { content: none; }

/* Yoast віддає розділювач звичайним текстом, без span.divider — розріджуємо
   його через word-spacing самого ланцюжка. */
.likeon-crumbs .woocommerce-breadcrumb.breadcrumbs { word-spacing: 9px; }
.likeon-crumbs .woocommerce-breadcrumb.breadcrumbs a,
.likeon-crumbs .woocommerce-breadcrumb.breadcrumbs span { word-spacing: normal; }

.woocommerce-breadcrumb.breadcrumbs .breadcrumb_last,
.likeon-crumbs .woocommerce-breadcrumb.breadcrumbs .breadcrumb_last { color: #9a9a9a; font-weight: 400; }

/* Телефон і планшет: крихти — дрібний рядок, розділювачі ближче. */
@media (max-width: 849px) {
	.woocommerce-breadcrumb.breadcrumbs,
	.likeon-cat-head .woocommerce-breadcrumb.breadcrumbs,
	.likeon-crumbs .woocommerce-breadcrumb.breadcrumbs { font-size: 12px; line-height: 20px; letter-spacing: 0; }
	.woocommerce-breadcrumb.breadcrumbs .divider { margin: 0 6px; }
	.likeon-crumbs .woocommerce-breadcrumb.breadcrumbs { word-spacing: 3px; }

	/* Картка товару: крихти стояли по центру, з 25 px повітря зверху й майже 50 px до фото.
	   Тепер — рядок ліворуч, щільно над галереєю; довгий ланцюжок гортається пальцем. */
	.product-page-title .page-title-inner { min-height: 0; padding-top: 10px; }
	/* !important — у теми .medium-text-center { text-align: center !important } */
	.product-page-title .page-title-inner > .flex-col { padding-top: 0; padding-bottom: 0; text-align: left !important; }
	.product-page-title .woocommerce-breadcrumb.breadcrumbs {
		margin: 0;
		overflow-x: auto;
		white-space: nowrap;
		scrollbar-width: none;
	}
	.product-page-title .woocommerce-breadcrumb.breadcrumbs::-webkit-scrollbar { display: none; }
	.single-product .product-main { padding-top: 10px; }
}

/* На проміжних ширинах (планшет / вузький ноутбук) меню не вміщалося поруч
   із логотипом і чотирма іконками та налазило на вміст сторінки.
   Тут підтискаємо крок і кегль, а також не даємо ряду переповнюватись. */
#header .header-inner { overflow: visible; }
#header .header-inner > .flex-col.hide-for-medium.flex-left { min-width: 0; }
/* НЕ ставимо overflow:hidden — воно обрізало крайні пункти меню.
   Дозволяємо колонці стискатися (min-width:0) і трохи зменшуємо крок. */
#header .header-nav-main { overflow: visible; flex-shrink: 1; min-width: 0; }

@media (min-width: 850px) and (max-width: 1300px) {
	#header .header-nav-main > li > a {
		padding: 10px 7px;
		font-size: 11px;
		letter-spacing: .04em;
	}
	#header .flex-col.logo { margin-right: 10px; }
	#header .flex-col.logo img { max-height: 44px; }
	#header .nav-right > li > a,
	#header .nav-right .likeon-wl-head { width: 36px; height: 36px; }
}

/* Тема вішає на меню клас nav-spacing-xlarge з великими проміжками між
   пунктами — через них ряд не вміщався і крайні пункти лізли під іконки. */
#header .header-nav-main.nav-spacing-xlarge > li { margin: 0 !important; }
#header .header-nav-main > li { margin: 0 !important; }
#header .header-nav-main > li > a { padding: 10px 13px; }

@media (min-width: 850px) and (max-width: 1400px) {
	#header .header-nav-main > li > a { padding: 10px 8px; font-size: 11px; letter-spacing: .03em; }
}

/* Контейнер крихт на звичайних сторінках: вирівнюємо по ширині контенту,
   як це робить WooCommerce на сторінках магазину. */
.likeon-crumbs {
	max-width: var(--likeon-width);
	margin: 0 auto;
	padding: 18px 15px 0;
}
.likeon-crumbs .woocommerce-breadcrumb.breadcrumbs { margin-bottom: 0; }

/* Yoast віддає розділювач звичайним текстом, без span.divider — задаємо колір
   через сам ланцюжок, а посилання лишаємо темнішими за нього. */
.likeon-crumbs .woocommerce-breadcrumb.breadcrumbs { color: #cfcac4; }
.likeon-crumbs .woocommerce-breadcrumb.breadcrumbs a { color: #8a8a8a; }
.likeon-crumbs .woocommerce-breadcrumb.breadcrumbs .breadcrumb_last,
.likeon-crumbs .woocommerce-breadcrumb.breadcrumbs > span > span:last-child { color: #1a1a1a; }

@media (max-width: 849px) {
	.likeon-crumbs { padding: 12px 16px 0; }
}


/* ==========================================================================
   ЗМІСТОВІ СТОРІНКИ (доставка, оплата, про нас, контакти, оферта)
   Текст був світло-сірий і на всю ширину екрана — читати важко.
   Звужуємо колонку до комфортної довжини рядка і підсилюємо контраст.
   Виключаємо сторінки WooCommerce: кошик, оформлення та кабінет мають
   власну верстку, ця колонка їм зашкодила б.
   ========================================================================== */

/* Частина сторінок («Контакти») зібрана на порожньому шаблоні, і її вміст
   лежить поза .page-wrapper — тому спираємось на загальний .content-area.
   Звужуємо ТІЛЬКИ одноколонкові текстові сторінки (ознака — large-12).
   Сторінки з кількома колонками (наприклад «Контакти»: дані + форма)
   лишаємо на повну ширину, інакше макет стискається і ламається. */
.page:not(.woocommerce-page) .content-area > .row > .col.large-12 > .col-inner {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

.page:not(.woocommerce-page) .content-area .col-inner,
.page:not(.woocommerce-page) .content-area .col-inner p,
.page:not(.woocommerce-page) .content-area .col-inner li {
	font-size: 16px;
	line-height: 1.75;
	color: #3a3a3a;
}

.page:not(.woocommerce-page) .content-area .col-inner p { margin: 0 0 18px; }

/* справжній H1 текстових сторінок (замість шорткоду [title] по центру — див. functions.php) */
.page:not(.woocommerce-page) .content-area .col-inner h1.likeon-page-title {
	margin: 10px 0 30px;
	padding: 0;
	color: #1a1a1a;
	font-size: clamp(34px, 4.2vw, 52px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.1;
	text-align: left;
	text-transform: none;
}
@media (max-width: 549px) {
	.page:not(.woocommerce-page) .content-area .col-inner h1.likeon-page-title { margin: 4px 0 22px; font-size: 32px; }
}
/* Сторінки на порожньому шаблоні («Відгуки покупців»): заголовок стоїть просто в #content,
   без колонки — вирівнюємо по стрічці відгуків (930 px по центру). */
.page #content > h1.likeon-page-title {
	max-width: 930px;
	margin: 26px auto 8px;
	padding: 0 15px;
	color: #1a1a1a;
	font-size: clamp(34px, 4.2vw, 52px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.1;
	text-align: left;
	text-transform: none;
}
@media (max-width: 549px) {
	.page #content > h1.likeon-page-title { margin: 16px auto 4px; padding: 0 16px; font-size: 32px; }
}

/* --- заголовки --- */
/* H2 у тексті тема фарбувала в колір акценту тонким накресленням — виглядали як посилання */
.page:not(.woocommerce-page) .content-area .col-inner h2:not([class]) {
	margin: 40px 0 14px;
	color: #1a1a1a;
	font-size: clamp(22px, 2.3vw, 28px);
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.25;
	text-transform: none;
}
.page:not(.woocommerce-page) .content-area .col-inner h2:not([class]) span { color: inherit !important; font-weight: inherit !important; }
.page:not(.woocommerce-page) .content-area .col-inner h3,
.page:not(.woocommerce-page) .content-area .col-inner .section-title-main {
	font-size: 24px;
	font-weight: 500;
	letter-spacing: .01em;
	color: #1a1a1a;
	text-transform: none;
}
.page:not(.woocommerce-page) .content-area .col-inner h4 {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #1a1a1a;
	margin: 36px 0 14px;
	padding-top: 22px;
	border-top: 1px solid #ececec;
}
.page:not(.woocommerce-page) .content-area .col-inner h4:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.page:not(.woocommerce-page) .content-area .col-inner strong { color: #1a1a1a; font-weight: 600; }

/* --- списки: власний маркер замість стандартної крапки --- */
.page:not(.woocommerce-page) .content-area .col-inner ul { list-style: none; margin: 0 0 22px; padding: 0; }
.page:not(.woocommerce-page) .content-area .col-inner ul li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 11px;
}
.page:not(.woocommerce-page) .content-area .col-inner ul li::before {
	content: "";
	position: absolute;
	left: 6px; top: 11px;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: #1a1a1a;
}
.page:not(.woocommerce-page) .content-area .col-inner ol { padding-left: 22px; margin: 0 0 22px; }
.page:not(.woocommerce-page) .content-area .col-inner ol li { margin-bottom: 11px; padding-left: 4px; }

/* --- посилання --- */
/* overflow-wrap: довгі адреси в тексті (політика конфіденційності) розпирали сторінку на телефоні */
.page:not(.woocommerce-page) .content-area .col-inner a { color: #1a1a1a; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.page:not(.woocommerce-page) .content-area .col-inner a:hover { color: #000; }
/* Картки товару на звичайних сторінках (головна, «Обране») — не текст статті:
   підкреслення їм не потрібне ні в назві, ні в панелі дій. */
.page:not(.woocommerce-page) .content-area .col-inner .product-small a { text-decoration: none; }

/* телефон і пошта — помітніше, вони тут головні */
.page:not(.woocommerce-page) .content-area .col-inner a[href^="tel:"],
.page:not(.woocommerce-page) .content-area .col-inner a[href^="mailto:"] {
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	border-bottom: 1px solid #d8d4cd;
}
.page:not(.woocommerce-page) .content-area .col-inner a[href^="tel:"]:hover,
.page:not(.woocommerce-page) .content-area .col-inner a[href^="mailto:"]:hover { border-bottom-color: #1a1a1a; }

/* --- зображення ---
   Лише картинки в тексті. Мініатюри карток товару (.attachment-woocommerce_thumbnail)
   виключено: на звичайних сторінках — головній, «Обраному» — це правило перебивало
   сітку каталогу за вагою, height:auto стискало знімок, і під ним з'являлась сіра смуга. */
.page:not(.woocommerce-page) .content-area .col-inner img:not(.attachment-woocommerce_thumbnail) { border-radius: 4px; height: auto; }

/* --- таблиці, якщо трапляються --- */
.page:not(.woocommerce-page) .content-area .col-inner table { width: 100%; font-size: 15px; border-collapse: collapse; margin: 0 0 22px; }
.page:not(.woocommerce-page) .content-area .col-inner table th,
.page:not(.woocommerce-page) .content-area .col-inner table td {
	padding: 11px 12px; border: 0; border-bottom: 1px solid #ececec; text-align: left;
}
.page:not(.woocommerce-page) .content-area .col-inner table th { font-weight: 600; color: #1a1a1a; }

@media (max-width: 849px) {
	.page:not(.woocommerce-page) .content-area .col-inner { font-size: 15.5px; }
	.page:not(.woocommerce-page) .content-area .col-inner h3,
	.page:not(.woocommerce-page) .content-area .col-inner .section-title-main { font-size: 20px; }
}


/* ==========================================================================
   КАРТКА ТОВАРУ: рядок покупки та фірмовий акцент
   Палітра: чорний #1a1a1a — головна дія, #6d7993 — акцент теми для
   другорядних дій, сірі — допоміжний текст. Раніше тут був різнобій.
   ========================================================================== */

/* --- кількість і дві кнопки в один рядок --- */
.single-product .woocommerce-variation-add-to-cart,
.single-product .product-info form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

.single-product .woocommerce-variation-add-to-cart .quantity {
	flex: 0 0 auto;
	display: flex !important;
	align-items: stretch;
	margin: 0;
	border: 1px solid #d9d4cc;
	border-radius: 0;
	overflow: hidden;
}
.single-product .woocommerce-variation-add-to-cart .quantity .button.is-form {
	width: 42px;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: #fff !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: #1a1a1a !important;
	font-size: 20px;
	font-weight: 300;
	line-height: 1;
	box-shadow: none;
	transition: background-color .15s;
}
.single-product .woocommerce-variation-add-to-cart .quantity .button.is-form:hover { background: #f4f2ef !important; }
.single-product .woocommerce-variation-add-to-cart .quantity input.qty {
	width: 40px;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: #fff;
	color: #1a1a1a;
	text-align: center;
	font-size: 15px;
	font-weight: 500;
	box-shadow: none;
	-moz-appearance: textfield;
}
.single-product .woocommerce-variation-add-to-cart .quantity input.qty::-webkit-inner-spin-button,
.single-product .woocommerce-variation-add-to-cart .quantity input.qty::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

/* кнопки більше не на всю ширину — ділять рядок порівну */
.single-product .product-info .single_add_to_cart_button.button.alt:not(.clickBuyButton),
.single-product .product-info .single_add_to_cart_button.clickBuyButton.button.alt {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	flex: 1 1 180px;
	margin: 0 !important;
	padding: 15px 16px;
	font-size: 12px;
	line-height: 1.25;
	text-align: center;
}

/* другорядна дія — фірмовим кольором, а не чорним */
.single-product .product-info .single_add_to_cart_button.clickBuyButton.button.alt,
.single-product .product-info .single_add_to_cart_button.clickBuyButton.button.alt:focus {
	background-color: #fff !important;
	border-color: #6d7993 !important;
	color: #6d7993 !important;
}
.single-product .product-info .single_add_to_cart_button.clickBuyButton.button.alt:hover {
	background-color: #6d7993 !important;
	border-color: #6d7993 !important;
	color: #fff !important;
}

@media (max-width: 560px) {
	.single-product .product-info .single_add_to_cart_button.button.alt:not(.clickBuyButton),
	.single-product .product-info .single_add_to_cart_button.clickBuyButton.button.alt { flex: 1 1 100%; }
}

/* --- мірки варіанту: акуратна панель замість голого рядка --- */
.single-product .woocommerce-variation-description:not(:empty) {
	margin: 0 0 16px;
	padding: 13px 16px;
	background: #f7f6f4;
	border-left: 3px solid #6d7993;
	border-radius: 2px;
}
.single-product .woocommerce-variation-description p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #3a3a3a;
}

/* --- акцент у дрібницях, щоб палітра була одна --- */
.woocommerce-breadcrumb.breadcrumbs a:hover,
.likeon-crumbs .woocommerce-breadcrumb.breadcrumbs a:hover { color: #6d7993; }
.likeon-acc__head:hover { color: #6d7993; }
.likeon-spec__ico { color: #6d7993; opacity: 1; }


/* ==========================================================================
   КАРТКА ТОВАРУ: прибирання зайвого і компактність
   ========================================================================== */

/* Порожні блоки варіанту WooCommerce друкує завжди, навіть коли в них нічого
   немає — на екрані це була сіра смуга нізвідки. Ховаємо порожні. */
/* Порожні блоки варіанту не отримують ні фону, ні відступів — вони просто
   схлопуються. Не використовуємо :has(): на ньому парсер губив усе правило. */
.woocommerce-variation-description:empty,
.woocommerce-variation-price:empty,
.woocommerce-variation-availability:empty {
	display: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
}

/* Кнопка скидання вибору розміру лише збиває з пантелику. Селектор без
   прив'язки до .single-product — так правило не програє темі. */
.reset_variations,
a.reset_variations,
button.reset_variations { display: none !important; }

/* --- рядок покупки в один рядок: кількість + дві кнопки --- */
.single-product .woocommerce-variation-add-to-cart { gap: 8px; }
.single-product .woocommerce-variation-add-to-cart .quantity { flex: 0 0 auto; color: #1a1a1a; } /* .form-flat теми фарбує поле в currentColor з !important — а це блідий колір тексту */
.single-product .woocommerce-variation-add-to-cart .quantity .button.is-form { width: 32px; }
.single-product .woocommerce-variation-add-to-cart .quantity input.qty { width: 36px; }

.single-product .product-info .single_add_to_cart_button.button.alt:not(.clickBuyButton),
.single-product .product-info .single_add_to_cart_button.clickBuyButton.button.alt {
	flex: 1 1 0;
	min-width: 0;
	padding: 13px 8px;
	font-size: 11px;
	letter-spacing: .05em;
	hyphens: none;
}

@media (max-width: 700px) {
	/* На телефоні кількість стояла сама в окремому рядку над кнопками.
	   Тепер «− 1 +» і «Додати у кошик» — один рядок, «В один клік» — під ними. */
	.single-product .product-info .single_add_to_cart_button.button.alt:not(.clickBuyButton),
	.single-product .product-info .single_add_to_cart_button.clickBuyButton.button.alt {
		flex: 1 1 100%;
		min-height: 50px;
		padding: 15px 12px;
		font-size: 12px;
	}
	.single-product .product-info .woocommerce-variation-add-to-cart .single_add_to_cart_button.button.alt:not(.clickBuyButton) { flex: 1 1 0; }
	.single-product .woocommerce-variation-add-to-cart .quantity .button.is-form { width: 40px; }
	.single-product .woocommerce-variation-add-to-cart .quantity input.qty { width: 34px; }
}

/* --- форма відгуку: була громіздка, стискаємо --- */
.single-product #review_form,
.single-product #review_form_wrapper { max-width: 720px; }
.single-product #review_form .comment-form { padding: 0; }
.single-product #review_form .comment-reply-title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .04em;
	color: #1a1a1a;
	display: block;
	margin-bottom: 14px;
	text-transform: none;
}
.single-product #review_form p { margin-bottom: 12px; }
.single-product #review_form label { font-size: 12px; color: #7a7a7a; margin-bottom: 4px; display: block; }
.single-product #review_form input[type="text"],
.single-product #review_form input[type="email"],
.single-product #review_form textarea {
	padding: 10px 12px;
	font-size: 14px;
	border: 1px solid #dcd8d2;
	border-radius: 2px;
	box-shadow: none;
	margin-bottom: 0;
	min-height: 0;
}
.single-product #review_form textarea { height: 110px; }
/* ім'я та пошта поруч, а не двома рядками */
.single-product #review_form .comment-form-author,
.single-product #review_form .comment-form-email { display: inline-block; width: 48.5%; vertical-align: top; }
.single-product #review_form .comment-form-author { margin-right: 2.5%; }
.single-product #review_form .form-submit input[type="submit"] {
	padding: 13px 30px;
	font-size: 12px;
	letter-spacing: .1em;
	background: #1a1a1a;
	border-color: #1a1a1a;
	border-radius: 2px;
}
.single-product #review_form .comment-form-rating { margin-bottom: 12px; }
.single-product #review_form .stars { margin: 0; }

@media (max-width: 560px) {
	.single-product #review_form .comment-form-author,
	.single-product #review_form .comment-form-email { display: block; width: 100%; margin-right: 0; }
}


/* ==========================================================================
   ШВИДКИЙ ПЕРЕГЛЯД
   Увага: .quick-view — це клас ПОСИЛАННЯ-тригера в каталозі, а не вікна.
   Саме вікно — .product-quick-view-container усередині .product-lightbox.
   Стилі картки товару прив'язані до .single-product і в це вікно не
   потрапляли — тому воно лишалося у старому вигляді теми. Повторюємо тут
   ту саму типографіку й ту саму палітру.
   ========================================================================== */

.product-quick-view-container,
.mfp-content .product-quick-view-container { border-radius: 4px; overflow: hidden; }

.product-quick-view-container .product-info,
.product-quick-view-container .product-title,
.product-quick-view-container .price-wrapper { text-align: left; }

/* заголовок */
.product-quick-view-container h1,
.product-quick-view-container .product-title,
.product-quick-view-container .product-title a {
	font-size: 22px;
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: -.01em;
	color: #1a1a1a;
	text-transform: none;
	margin: 0 0 10px;
}

/* ціна — у спільному блоці «ЦІНА» наприкінці файла */

/* опис */
.product-quick-view-container .product-short-description {
	font-size: 14px;
	line-height: 1.65;
	color: #3a3a3a;
	margin-bottom: 22px;
}
.product-quick-view-container .product-short-description ul { list-style: none; margin: 0 0 14px; padding: 0; }
.product-quick-view-container .product-short-description li { position: relative; padding-left: 18px; margin-bottom: 7px; }
.product-quick-view-container .product-short-description li::before {
	content: "";
	position: absolute;
	left: 2px; top: 9px;
	width: 4px; height: 4px;
	border-radius: 50%;
	background: #6d7993;
}
.product-quick-view-container .product-short-description strong { color: #1a1a1a; font-weight: 600; }

/* кнопка розмірної сітки — дрібніша й фірмовим кольором */
.product-quick-view-container .cptbl-button,
.product-quick-view-container a.cptbl-button,
.product-quick-view-container .product-info .button:not(.single_add_to_cart_button) {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	margin: 0 0 18px;
	background: #fff;
	border: 1px solid #dcd8d2;
	border-radius: 7px;
	color: #6d7993;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: none;
	min-height: 0;
	line-height: 1.2;
}
.product-quick-view-container .product-info .button:not(.single_add_to_cart_button):hover {
	border-color: #6d7993;
	background: #f4f2ef;
}

/* розміри — ті самі квадратики */
.product-quick-view-container .variations { margin-bottom: 18px; border: 0; }
.product-quick-view-container .variations td,
.product-quick-view-container .variations th,
.product-quick-view-container .variations tr { display: block; border: 0; padding: 0; background: none; width: auto; }
.product-quick-view-container .variations .label label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #1a1a1a;
	margin-bottom: 9px;
	display: block;
}
.product-quick-view-container .variations td.value { display: flex; flex-wrap: wrap; gap: 7px; }
.product-quick-view-container .variations td.value label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	margin: 0;
	border: 1px solid #dcd8d2;
	border-radius: 2px;
	font-size: 13px;
	color: #1a1a1a;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.product-quick-view-container .variations td.value label:hover { border-color: #1a1a1a; }
.product-quick-view-container .variations td.value input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.product-quick-view-container .variations td.value input[type="radio"]:checked + label { border-color: #1a1a1a; background: #f2efea; }

/* рядок покупки */
.product-quick-view-container .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
}
.product-quick-view-container .single_add_to_cart_button.button.alt:not(.clickBuyButton) {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 13px 10px;
	background-color: #1a1a1a !important;
	border-color: #1a1a1a !important;
	color: #fff !important;
	border-radius: 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: none;
}
.product-quick-view-container .single_add_to_cart_button.clickBuyButton.button.alt {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 13px 10px;
	background-color: #fff !important;
	border: 1px solid #6d7993 !important;
	color: #6d7993 !important;
	border-radius: 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: none;
}
.product-quick-view-container .single_add_to_cart_button.clickBuyButton.button.alt:hover {
	background-color: #6d7993 !important;
	color: #fff !important;
}

/* дрібне прибирання */
.product-quick-view-container .reset_variations { display: none !important; }
.product-quick-view-container .woocommerce-variation-description:empty,
.product-quick-view-container .woocommerce-variation-price:empty,
.product-quick-view-container .woocommerce-variation-availability:empty { display: none !important; }
.product-quick-view-container .quantity { display: none !important; }
/* підпис-«шильдик» поверх фото у вікні лише заважає */
.product-quick-view-container .image-tools,
.product-quick-view-container .woocommerce-product-gallery__wrapper .caption,
.product-quick-view-container figcaption { display: none !important; }

/* хрестик закриття — помітніший */
.mfp-close,
.product-quick-view-container .mfp-close {
	color: #1a1a1a !important;
	opacity: 1;
	font-size: 30px;
	width: 46px;
	height: 46px;
}
.mfp-close:hover { color: #6d7993 !important; }

/* стрілки галереї у вікні */
.product-quick-view-container .flickity-prev-next-button {
	width: 42px; height: 42px;
	background: rgba(255,255,255,.92);
	border: 1px solid #e2ded8;
	border-radius: 50%;
	box-shadow: none;
}
.product-quick-view-container .flickity-prev-next-button:hover { background: #fff; border-color: #1a1a1a; }
.product-quick-view-container .flickity-prev-next-button .arrow { fill: #1a1a1a; }

@media (max-width: 700px) {
	.product-quick-view-container .single_add_to_cart_button.button.alt:not(.clickBuyButton),
	.product-quick-view-container .single_add_to_cart_button.clickBuyButton.button.alt { flex: 1 1 100%; }
}

/* Мірки варіанту у вікні швидкого перегляду: був сірий рядок без оформлення. */
.product-quick-view-container .woocommerce-variation-description:not(:empty) {
	margin: 0 0 14px;
	padding: 12px 15px;
	background: #f7f6f4;
	border-left: 3px solid #6d7993;
	border-radius: 2px;
}
.product-quick-view-container .woocommerce-variation-description:not(:empty) p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: #3a3a3a;
}

/* Блок характеристик у вікні — трохи щільніший, ніж на сторінці товару. */
.product-quick-view-container .likeon-spec { margin: 14px 0 18px; }
.product-quick-view-container .likeon-spec__row { padding: 8px 2px; }
.product-quick-view-container .likeon-spec__val { font-size: 13.5px; }


/* ==========================================================================
   ФІЛЬТР РОЗМІРІВ: порядок від меншого до більшого
   Плагін фільтрів сортує за id терміна і не слухається ні term_order,
   ні явного списку include — перевірено. Тому задаємо порядок тут:
   у кожного пункту є клас із номером терміна, цього досить.
   ========================================================================== */

.product-search-filter-pa_size.style-inline { display: flex; flex-wrap: wrap; }

.product-search-filter-pa_size .pa_size-item-85  { order: 1; }  /* XS */
.product-search-filter-pa_size .pa_size-item-82  { order: 2; }  /* S */
.product-search-filter-pa_size .pa_size-item-83  { order: 3; }  /* M */
.product-search-filter-pa_size .pa_size-item-84  { order: 4; }  /* L */
.product-search-filter-pa_size .pa_size-item-86  { order: 5; }  /* XL */
.product-search-filter-pa_size .pa_size-item-230 { order: 6; }  /* XXL */
.product-search-filter-pa_size .pa_size-item-226 { order: 7; }  /* XS-S */
.product-search-filter-pa_size .pa_size-item-222 { order: 8; }  /* S-M */
.product-search-filter-pa_size .pa_size-item-227 { order: 9; }  /* M-L */
.product-search-filter-pa_size .pa_size-item-223 { order: 10; } /* L-XL */
.product-search-filter-pa_size .pa_size-item-994 { order: 11; } /* Onesize */


/* ==========================================================================
   ФІЛЬТРИ В БІЧНІЙ КОЛОНЦІ
   Значення — заокруглені «пігулки» з тонкою рамкою, кількість товарів
   сірим поруч, у кольорів — кружечок-зразок.
   ========================================================================== */

#shop-sidebar .widget { margin-bottom: 34px; }
#shop-sidebar .widget-title {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #1a1a1a;
}
#shop-sidebar .widget .is-divider { display: none; }
/* дубль підпису всередині віджета прибираємо — заголовок уже є зверху */
#shop-sidebar .product-search-filter-attribute-heading { display: none; }

#shop-sidebar .product-search-filter-items.style-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
/* «Пігулка» — це весь <li>, а не посилання всередині.
   Раніше рамка була на <a>, а кількість товарів стояла зовні; у вузькій
   колонці довгі назви («СИЗИЙ ГРАФІТ») розпирали пігулку, і «(7)»
   зривалося на наступний рядок. Тепер число всередині рамки і зірватись
   нікуди не може. Клікабельним лишається посилання — воно розтягнуте
   на всю пігулку. */
#shop-sidebar .product-search-filter-items.style-inline li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 9px 14px;
	max-width: 100%;
	border: 1px solid #e0dcd5;
	border-radius: 10px;
	background: #fff;
	transition: border-color .15s ease, background-color .15s ease;
}
#shop-sidebar .product-search-filter-items.style-inline li:hover { border-color: #1a1a1a; }

#shop-sidebar .product-search-filter-items.style-inline li > a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	color: #1a1a1a;
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.25;
	text-decoration: none;
}

/* вибране значення */
#shop-sidebar .product-search-filter-items li.selected,
#shop-sidebar .product-search-filter-items li.term-selected {
	border-color: #1a1a1a;
	background: #f2efea;
}
#shop-sidebar .product-search-filter-items li.selected > a,
#shop-sidebar .product-search-filter-items li.term-selected > a { font-weight: 600; }

/* кількість товарів — тихим сірим, усередині пігулки */
#shop-sidebar .product-search-filter-items .term-count,
#shop-sidebar .product-search-filter-items .count {
	flex: 0 0 auto;
	color: #a8a29a;
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
	margin: 0;
}

/* ==========================================================================
   КРУЖЕЧКИ-ЗРАЗКИ КОЛЬОРІВ
   Плагін не зберігає зразків (у термінів лише order і картинка), тому
   відповідність «назва — колір» задаємо тут, за номерами термінів.
   Якщо додасте новий колір — допишіть рядок, інакше кружечка не буде.
   ========================================================================== */

/* Колір кружечка беремо зі змінної, яку ставимо нижче на сам <li>.
   Через змінну, а не прямим правилом для ::before: селектор базового
   правила має на один тег більше, тож будь-яке правило виду
   `.pa_color-item-N > a::before` програвало б йому за вагою і всі кружечки
   лишалися б сірими. Змінні успадковуються — суперечки ваг тут немає. */
#shop-sidebar .product-search-filter-pa_color li > a::before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--likeon-swatch, #d8d4cd);
	box-shadow: inset 0 0 0 1px var(--likeon-swatch-ring, rgba(0,0,0,.12));
}

#shop-sidebar .pa_color-item-204 { --likeon-swatch: #d9c7ab; } /* Беж */
#shop-sidebar .pa_color-item-178 { --likeon-swatch: #7fb3d5; } /* Блакитний */
#shop-sidebar .pa_color-item-87 { --likeon-swatch: #ffffff; } /* Білий */
#shop-sidebar .pa_color-item-89 { --likeon-swatch: #f3e5c0; } /* Ваніль */
#shop-sidebar .pa_color-item-97 { --likeon-swatch: #c68e17; } /* Вохра */
#shop-sidebar .pa_color-item-77 { --likeon-swatch: #4a4a4a; } /* Графіт */
#shop-sidebar .pa_color-item-154 { --likeon-swatch: #d4b483; } /* Золотий беж */
#shop-sidebar .pa_color-item-119 { --likeon-swatch: #6f4e37; } /* Кава */
#shop-sidebar .pa_color-item-179 { --likeon-swatch: #b491c8; } /* Ліловий */
#shop-sidebar .pa_color-item-169 { --likeon-swatch: #a8d5ba; } /* М'ятний */
#shop-sidebar .pa_color-item-149 { --likeon-swatch: #b03060; } /* Малина */
#shop-sidebar .pa_color-item-88 { --likeon-swatch: #f7f3ea; } /* Молоко */
#shop-sidebar .pa_color-item-94 { --likeon-swatch: #b2b2b2; } /* Попелястий */
#shop-sidebar .pa_color-item-78 { --likeon-swatch: #e8dcc4; } /* Світлий беж */
#shop-sidebar .pa_color-item-157 { --likeon-swatch: #b9a998; } /* Світлий тауп */
#shop-sidebar .pa_color-item-96 { --likeon-swatch: #6b7280; } /* Сизий графіт */
#shop-sidebar .pa_color-item-95 { --likeon-swatch: #8a8f98; } /* Сталь */
#shop-sidebar .pa_color-item-173 { --likeon-swatch: #7b1e2b; } /* Стигла вишня */
#shop-sidebar .pa_color-item-91 { --likeon-swatch: #8b7d6b; } /* Тауп */
#shop-sidebar .pa_color-item-101 { --likeon-swatch: #2f4f3a; } /* Темно-зелений */
#shop-sidebar .pa_color-item-99 { --likeon-swatch: #1f3a5f; } /* Темно-синій */
#shop-sidebar .pa_color-item-103 { --likeon-swatch: #c0392b; } /* Червоний */
#shop-sidebar .pa_color-item-107 { --likeon-swatch: #1a1a1a; } /* Чорний */
#shop-sidebar .pa_color-item-141 { --likeon-swatch: #a0522d; } /* кориця */

/* Кольори, для яких правила бракувало — раніше вони показували сіру заглушку. */
#shop-sidebar .pa_color-item-93 { --likeon-swatch: #a9c9e8; } /* Блакитний (Baby blue) */
#shop-sidebar .pa_color-item-109 { --likeon-swatch: #6d1f2e; } /* Бордо */
#shop-sidebar .pa_color-item-105 { --likeon-swatch: #1f4fd8; } /* Електрик */
#shop-sidebar .pa_color-item-181 { --likeon-swatch: #a89bb0; } /* Запилена лаванда */
#shop-sidebar .pa_color-item-163 { --likeon-swatch: #b7a3d1; } /* Лаванда */
#shop-sidebar .pa_color-item-90 { --likeon-swatch: #f0917a; } /* Лососевий */
#shop-sidebar .pa_color-item-79 { --likeon-swatch: #8a3a42; } /* Марсала */
#shop-sidebar .pa_color-item-102 { --likeon-swatch: #2e8b83; } /* Морська хвиля */
#shop-sidebar .pa_color-item-167 { --likeon-swatch: #eae6de; } /* Перли */
#shop-sidebar .pa_color-item-176 { --likeon-swatch: #dcc9a6; } /* Пісочний */
#shop-sidebar .pa_color-item-76 { --likeon-swatch: #e4b9b4; } /* Рожева пудра */
#shop-sidebar .pa_color-item-108 { --likeon-swatch: #2b4a8b; } /* Синій */
#shop-sidebar .pa_color-item-98 { --likeon-swatch: #8a8b72; } /* Сіра оливка */
#shop-sidebar .pa_color-item-92 { --likeon-swatch: #c9c5bd; } /* Сірі перли */
#shop-sidebar .pa_color-item-171 { --likeon-swatch: #1f7a5a; } /* Смарагд */
#shop-sidebar .pa_color-item-221 { --likeon-swatch: #b5543a; } /* Теракот */
#shop-sidebar .pa_color-item-104 { --likeon-swatch: #6b3fa0; } /* Фіолетовий */
#shop-sidebar .pa_color-item-995 { --likeon-swatch: #b5c98f; } /* Фісташка */
#shop-sidebar .pa_color-item-100 { --likeon-swatch: #7a2f3f; } /* Червона слива */
#shop-sidebar .pa_color-item-182 { --likeon-swatch: #4b3226; } /* Шоколад */

/* Світлим кольорам тонкої тіні замало: білий, молоко і ваніль на світлому
   тлі читалися як «кольору немає». Даємо їм помітніше кільце. */
#shop-sidebar .pa_color-item-87,   /* Білий */
#shop-sidebar .pa_color-item-88,   /* Молоко */
#shop-sidebar .pa_color-item-89,   /* Ваніль */
#shop-sidebar .pa_color-item-78,   /* Світлий беж */
#shop-sidebar .pa_color-item-204,  /* Беж */
#shop-sidebar .pa_color-item-167,  /* Перли */
#shop-sidebar .pa_color-item-176,  /* Пісочний */
#shop-sidebar .pa_color-item-92 {  /* Сірі перли */
	--likeon-swatch-ring: rgba(0,0,0,.34);
}

/* у розмірів кружечок не потрібен */
#shop-sidebar .product-search-filter-pa_size li > a::before { content: none; }

@media (max-width: 849px) {
	#shop-sidebar .product-search-filter-items.style-inline { gap: 8px; }
	#shop-sidebar .product-search-filter-items.style-inline li { padding: 8px 12px; }
}


/* ==========================================================================
   ШИРИНА КОНТЕЙНЕРА САЙТУ
   Тема віддає 1080 px. На ноутбуці 1440 це вузька колонка з майже двома
   сотнями порожніх пікселів обабіч, і магазин виглядає меншим, ніж є.
   Ставимо 1500 px: до 1500 сайт іде від краю до краю, далі поля лишаються,
   але помірні — рядок тексту й далі не перетворюється на простирадло.

   Flatsome тримає ширину в одному правилі flatsome.css і в трьох похідних
   для рядків з різними жолобами — повторюємо ту саму сітку з іншим числом,
   без !important: цей файл підключається після flatsome.css, тож при рівній
   вазі селектора виграє він.

   Поле «Site width» у Налаштуванні теми навмисно лишаємо порожнім: інакше
   джерел правди стане два, а inline-стиль теми друкується після цього файлу
   і мовчки перебив би його. Щоб змінити ширину — правити одне число нижче.
   ========================================================================== */

:root { --likeon-width: 1500px; }

.container-width,
.full-width .ubermenu-nav,
.container,
.row { max-width: var(--likeon-width); }

/* Похідні ширини рядків — ті самі зсуви, що й у теми (1080 / 1050 / 1065 / 1110). */
.row.row-collapse { max-width: calc(var(--likeon-width) - 30px); }
.row.row-small    { max-width: calc(var(--likeon-width) - 15px); }
.row.row-large    { max-width: calc(var(--likeon-width) + 30px); }

/* Каталог з бічною колонкою: у ширшому контейнері дві картки в ряд ставали
   завеликими — фото розтягувалося майже на 550 px. З 1280 px показуємо три:
   картка лишається приблизно такою ж, як була до розширення, просто їх видно
   більше за один екран. Кількість колонок задає тема класом large-columns-2,
   ми міняємо лише частку ширини. */
@media (min-width: 1280px) {
	.products.large-columns-2 > .col,
	.products.large-columns-2 .flickity-slider > .col {
		max-width: 33.3333%;
		flex-basis: 33.3333%;
	}
}

/* Змістові сторінки (доставка, оплата, оферта) лишаються звуженими — їхня
   колонка обмежена окремо, у блоці «ЗМІСТОВІ СТОРІНКИ», і ширший контейнер
   на неї не впливає. Так само навмисно не розтягуємо форму відгуку. */


/* ==========================================================================
   ЦІНА
   Ціна — головний акцент після назви, тож їй крупний кегль і власний ряд.
   Стара ціна приглушена й закреслена, нова темна, поруч — розмір знижки.
   Знак гривні дрібніший і світліший: він не має перебивати саме число.
   Один набір правил на всі місця, де ціна крупна: картка товару, швидкий
   перегляд і липка панель покупки.
   ========================================================================== */

/* Ряд ціни. Підписи для читалок («Original price was…») лежать поза потоком
   (position: absolute), тож гнучкий ряд їх не рахує і зайвих проміжків немає.
   Сюди ж потрапляє .price всередині .woocommerce-variation-price — та, що
   перемальовується при виборі розміру. */
.single-product .product-info .price,
.product-quick-view-container .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0;
	line-height: 1.1;
	font-weight: 700;
	color: #1a1a1a;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.single-product .product-info .price { font-size: 34px; }
.product-quick-view-container .price { font-size: 24px; }

/* ins — це нова ціна. Підкреслення теми прибираємо, кегль успадковуємо.
   Порядок у ряду задаємо флексом: WooCommerce малює спершу стару ціну, а
   читається краще навпаки — велике число зі знижкою, за ним перекреслене
   старе й плашка. Так само зроблено в картках каталогу. */
.single-product .product-info .price ins,
.product-quick-view-container .price ins {
	order: 1;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	text-decoration: none;
	background: none;
}
.single-product .product-info .price del,
.product-quick-view-container .price del { order: 2; }
.single-product .product-info .price .likeon-price__off,
.product-quick-view-container .price .likeon-price__off { order: 3; }
/* Підписи для читалок не мають ставати комірками ряду. */
.single-product .product-info .price .screen-reader-text,
.product-quick-view-container .price .screen-reader-text { position: absolute; }

/* Стара ціна. Була світло-сірою і вдвічі дрібнішою за чинну — власник
   справедливо сказав, що її не видно й уся пара виглядає випадково. Тепер
   співвідношення 30/21 (0,7): стару видно з відстані, але головним лишається
   число зі знижкою. Колір темніший (контраст до білого ~5:1), риска товща. */
.single-product .product-info .price del,
.product-quick-view-container .price del {
	font-size: .7em;
	font-weight: 500;
	color: #6f6a64;
	opacity: 1;
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
}

/* Знак гривні: дрібніший і світліший за число.
   display:inline і vertical-align:baseline обов'язкові — типово знак іде
   inline-block'ом з vertical-align:top, через що «грн» злітало нагору
   степенем, а пробіл перед ним (він усередині span) з'їдався як початковий. */
.single-product .product-info .price .woocommerce-Price-currencySymbol,
.product-quick-view-container .price .woocommerce-Price-currencySymbol,
.likeon-buybar__price .woocommerce-Price-currencySymbol {
	display: inline;
	vertical-align: baseline;
	font-weight: 600;
	color: #8f8a84;
	letter-spacing: 0;
}

.single-product .product-info .price .woocommerce-Price-currencySymbol,
.product-quick-view-container .price .woocommerce-Price-currencySymbol { font-size: .5em; }

/* Усередині перекресленої ціни знак рахується вже від її кегля. Множники
   підібрані так, щоб обидва «грн» — біля старої й біля нової ціни — вийшли
   однакового розміру (0,5 × 30 = 0,72 × 21): рядок перестає бути «драбинкою». */
.single-product .product-info .price del .woocommerce-Price-currencySymbol,
.product-quick-view-container .price del .woocommerce-Price-currencySymbol {
	font-size: .72em;
	color: inherit;
}

/* --- розмір знижки --- */
/* Значок домальовує плагін likeon-product-ux до розмітки WooCommerce, тож
   він з'являється і в каталозі, і при виборі розміру — окремого JS не треба.
   Колір той самий, що й у мітки розпродажу на фото та кутового трикутника в
   каталозі (#6d2c37): раніше плашка була синьо-сірою, і на сторінці товару
   поруч світилися дві різні «знижкові» барви. */
.likeon-price__off {
	display: inline-block;
	vertical-align: middle;
	padding: 4px 8px;
	border-radius: 3px;
	background: #6d2c37;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .01em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.single-product .product-info .likeon-price__off,
.product-quick-view-container .likeon-price__off { align-self: center; }

/* у плитці каталогу та в слайдері схожих — дрібніший, там ціна теж дрібна */
.product-small .likeon-price__off,
.related .likeon-price__off,
.likeon-buybar__price .likeon-price__off {
	font-size: 11px;
	padding: 3px 5px;
	margin-left: 4px;
}

/* --- ціна варіації --- */
/* Woo перемальовує вміст цього блоку при кожній зміні розміру. Стилі не
   злітають, бо прив'язані до .price всередині, а не до самого блоку, який
   перезаписується. Рядок один і тієї ж висоти за будь-якої ціни, тож кнопки
   під ним при перемиканні розмірів не зсуваються. */
.single-product .product-info .woocommerce-variation-price .price { font-size: 26px; }
.single-product .product-info .single_variation_wrap .woocommerce-variation-price:not(:empty) {
	margin: 0 0 14px;
}

/* --- діапазон «від – до» --- */
/* Зайвий знак валюти біля першого числа прибирає плагін. Тут лишається не
   дати числу розірватись переносом: тире між ними — звичайний текстовий
   вузол, і гнучкий ряд сам розсуває його проміжками. */
.single-product .product-info .price .woocommerce-Price-amount,
.product-quick-view-container .price .woocommerce-Price-amount { white-space: nowrap; }

/* --- ціна в липкій панелі покупки --- */
.likeon-buybar__price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; }
.likeon-buybar__price del { order: 2; font-size: .82em; color: #6f6a64; font-weight: 500; opacity: 1; margin-right: 0; }
.likeon-buybar__price ins { order: 1; text-decoration: none; background: none; }
.likeon-buybar__price .likeon-price__off { order: 3; margin-left: 0; }
.likeon-buybar__price .screen-reader-text { position: absolute; }
.likeon-buybar__price .woocommerce-Price-currencySymbol { font-size: .72em; }

/* --- рядок про оплату --- */
/* «В обране» стоїть праворуч плаваючим блоком, тому рядок його обходить. */
.likeon-pay {
	display: flex;
	align-items: center;
	gap: 9px;
	clear: right;
	margin: 10px 0 18px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #5a5a5a;
}
.likeon-pay svg { flex: 0 0 auto; color: #9a958f; }
.likeon-pay a {
	color: #6d7993;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.likeon-pay a:hover { color: #1a1a1a; }

/* у вікні швидкого перегляду місця мало — рядок про оплату там зайвий */
.product-quick-view-container .likeon-pay { display: none; }

/* На картці під ціною одразу йде рядок про оплату — повітря додає він.
   У швидкому перегляді того рядка немає, тож відступ лишається за ціною.

   Про clear: right нижче — через «В обране». */
.single-product .product-info .price-wrapper { margin: 0 0 2px; }

/* «В обране» стоїть праворуч плаваючим блоком. У вузькій колонці (планшет,
   телефон) ряду ціни лишалося 178 px із 315 — і «−31%» падало під ціну
   окремим рядком. Пускаємо ціну з нового рядка: вона нижча на кілька
   пікселів, зате в один рядок. На широкому екрані колонка 695 px, ціна й
   кнопка стоять поруч вільно — там не чіпаємо. */
@media (max-width: 1199px) {
	.single-product .product-info .price-wrapper { clear: right; }
}
.product-quick-view-container .price-wrapper { margin: 0 0 22px; }

/* Коли рядка про оплату немає (сторінку умов зняли з публікації), повітря
   під ціною має лишитись — віддаємо його самій ціні. */
.single-product .product-info .price-wrapper + form.cart,
.single-product .product-info .price-wrapper + .ema-bis-wrap { margin-top: 18px; }

@media (max-width: 849px) {
	.single-product .product-info .price { font-size: 28px; }
	.single-product .product-info .woocommerce-variation-price .price { font-size: 22px; }
	/* Плашка дрібніша — щоб весь ряд ціни вмістився в один рядок навіть на
	   вузькому екрані: перенесений «−31%» під ціну і був тією «кривизною». */
	.single-product .product-info .likeon-price__off { font-size: 12px; padding: 3px 7px; }
	.likeon-pay { margin: 8px 0 14px; font-size: 13px; }
}


/* ==========================================================================
   МІТКА РОЗПРОДАЖУ НА СТОРІНЦІ ТОВАРУ
   У каталозі мітка — кутовий трикутник кольору #6d2c37 (плагін
   likeon-catalog-ux). На самій сторінці товару лишалась штатна мітка теми:
   яскраво-червоний прямокутник «Розпродаж!» на пів-фотографії. Він сперечався
   і з фотографією, і з плашкою «−43 %», яка стоїть поруч із ціною.
   Робимо тиху пігулку в тому самому кольорі, що й трикутник у каталозі.
   ========================================================================== */

/* Фарбується саме контейнер, а не .badge-inner усередині: червоне тло
   тема кладе на .badge-container, а внутрішні шари лишає прозорими.
   !important тут вимушений: у flatsome.css:2063 стоїть
   `body.single-product .badge-container{background:#D73232!important}`,
   і без нього перебити червоний неможливо за жодної ваги селектора. */
.single-product .product-images .badge-container,
.single-product .product-gallery .badge-container {
	margin: 0;
	top: 14px;
	left: 14px;
	right: auto;
	height: auto;
	width: auto;
	background: #6d2c37 !important;
	border-radius: 999px;
	overflow: hidden;
	padding: 0;
}

.single-product .product-images .badge-container .badge,
.single-product .product-gallery .badge-container .badge {
	width: auto;
	height: auto;
	padding: 0;
}

.single-product .product-images .badge-container .badge-inner,
.single-product .product-gallery .badge-container .badge-inner {
	display: inline-block;
	width: auto;
	height: auto;
	min-height: 0;
	padding: 6px 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1;
	text-transform: uppercase;
}

/* Стрілки галереї. Тема показує їх лише при наведенні миші, тому на телефоні
   їх не було видно зовсім. Тепер це круглі білі кнопки, як у вікні швидкого
   перегляду; на сенсорних екранах і вузьких вікнах вони видимі завжди. */
.single-product .product-gallery .flickity-prev-next-button {
	top: 50%;
	bottom: auto;
	width: 42px;
	height: 42px;
	margin-top: -21px;
	border: 1px solid #e2ded8;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: none;
}
.single-product .product-gallery .flickity-prev-next-button.previous { left: 14px; }
.single-product .product-gallery .flickity-prev-next-button.next { right: 14px; }
.single-product .product-gallery .flickity-prev-next-button svg { padding: 30%; }
.single-product .product-gallery .flickity-prev-next-button .arrow,
.single-product .product-gallery .flickity-prev-next-button:hover .arrow { fill: #1a1a1a; }
.single-product .product-gallery .flickity-prev-next-button:hover { background: #fff; border-color: #1a1a1a; }

@media (max-width: 849px), (hover: none) {
	.single-product .product-gallery .flickity-prev-next-button {
		width: 36px;
		height: 36px;
		margin-top: -18px;
		opacity: 1;
		transform: none !important;
	}
	.single-product .product-gallery .flickity-prev-next-button.previous { left: 10px; }
	.single-product .product-gallery .flickity-prev-next-button.next { right: 10px; }
}


/* ==========================================================================
   МОБІЛЬНЕ МЕНЮ — біла панель ліворуч
   Розмітка: template-parts/overlays/overlay-menu.php. Відкриває панель тема
   (Magnific Popup, клас off-canvas-left), тож тут лише вигляд.
   ========================================================================== */

.off-canvas-left .mfp-content {
	width: min(88vw, 390px);
	max-width: none;
	padding: 0;
	background: #fff;
	box-shadow: 24px 0 60px rgba(26, 26, 26, .14);
	transform: translateX(-100%);
	transition: transform .32s cubic-bezier(.2, .7, .2, 1);
}
.off-canvas-left.mfp-ready .mfp-content { transform: none; }
.off-canvas-left.mfp-removing .mfp-content { opacity: 1 !important; transform: translateX(-100%); }

/* хрестик — біле коло в правому верхньому куті панелі */
.mfp-wrap.off-canvas-left .mfp-close {
	top: 12px;
	right: auto;
	left: calc(min(88vw, 390px) - 54px);
	width: 40px;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid #d9d4cc;
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	color: #1a1a1a !important;
	font-family: inherit;
	font-size: 24px;
	font-weight: 300;
	line-height: 38px;
	text-align: center;
	opacity: 1;
	mix-blend-mode: normal;
}
.mfp-wrap.off-canvas-left .mfp-close:hover { border-color: #1a1a1a; background: #1a1a1a; color: #fff !important; }

/* Хрестик у колі — меню, кошик, «в один клік», швидкий перегляд. Раніше це був символ «×»
   шрифту: де саме він стане, вирішують метрики шрифту й міжрядковий інтервал, тож на телефоні
   хрестик з'їжджав з центру, а кнопка-«кнопка» iOS могла витягувати коло. Тепер коло має
   жорсткі 40×40, текст прихований, а хрестик — дві лінії з точним центром. */
html .mfp-wrap.off-canvas-left .mfp-close,
html .mfp-wrap.off-canvas-right .mfp-close,
html .product-lightbox .mfp-close {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 40px;
	min-width: 40px;
	max-width: 40px;
	height: 40px;
	min-height: 40px;
	max-height: 40px;
	padding: 0;
	overflow: hidden;
	font-size: 0 !important;
	line-height: 0 !important;
	letter-spacing: 0;
	text-transform: none;
}
html .mfp-wrap.off-canvas-left .mfp-close::before,
html .mfp-wrap.off-canvas-left .mfp-close::after,
html .mfp-wrap.off-canvas-right .mfp-close::before,
html .mfp-wrap.off-canvas-right .mfp-close::after,
html .product-lightbox .mfp-close::before,
html .product-lightbox .mfp-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 1.5px;
	margin: -.75px 0 0 -8px;
	border-radius: 1px;
	background: currentColor;
	transform: rotate(45deg);
	pointer-events: none;
}
html .mfp-wrap.off-canvas-left .mfp-close::after,
html .mfp-wrap.off-canvas-right .mfp-close::after,
html .product-lightbox .mfp-close::after { transform: rotate(-45deg); }

.likeon-mnav .sidebar-menu { padding: 0 0 34px; text-align: left; }

.likeon-mnav__head { position: sticky; z-index: 3; top: 0; display: flex; align-items: center; height: 64px; padding: 0 70px 0 20px; border-bottom: 1px solid #e8e5e0; background: #fff; }
.likeon-mnav__title { color: #1a1a1a; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }

/* пошук */
.likeon-mnav__search { padding: 16px 20px 6px; }
.likeon-mnav__search .searchform-wrapper,
.likeon-mnav__search .product-search,
.likeon-mnav__search .product-search-form { width: 100% !important; max-width: none; margin: 0; }
.likeon-mnav__search form { position: relative; width: 100%; margin: 0; }
.likeon-mnav__search input[type="text"],
.likeon-mnav__search input[type="search"] {
	width: 100% !important;
	max-width: none;
	height: 48px;
	margin: 0;
	padding: 0 14px 0 44px;
	border: 1px solid #d9d4cc;
	border-radius: 0 !important;
	background: #f7f6f3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8580' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") 14px center / 19px no-repeat;
	box-shadow: none;
	color: #1a1a1a;
	font-size: 15px;
}
.likeon-mnav__search input:focus { border-color: #6d7993; background-color: #fff; outline: 0; box-shadow: 0 0 0 3px rgba(109, 121, 147, .15); }
/* старе правило на початку файла «#product-search-field-2 { width: 90% !important }» (за id) стискало поле в панелі */
#main-menu .likeon-mnav__search input.product-search-field { width: 100% !important; }

/* розділи магазину */
.likeon-mnav .nav-sidebar.nav-vertical { align-items: stretch; width: auto; margin: 6px 0 0 !important; padding: 0 !important; }
/* Flatsome обнуляє відступи першого й останнього пункту горизонтального меню з !important */
.likeon-mnav .nav-sidebar.nav-vertical > li,
.likeon-mnav .nav-sidebar.nav-vertical > li:first-child,
.likeon-mnav .nav-sidebar.nav-vertical > li:last-child { position: relative; width: auto; margin: 0 20px !important; border: 0; border-bottom: 1px solid #efece7; background: none !important; }
.likeon-mnav .nav-sidebar.nav-vertical > li + li { border-top: 0; }
.likeon-mnav .nav-sidebar.nav-vertical > li > a {
	display: block;
	padding: 17px 48px 17px 0 !important;
	color: #1a1a1a;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.35;
	text-transform: uppercase;
}
.likeon-mnav .nav-sidebar.nav-vertical > li.likeon-mnav__shop > a { font-weight: 700; }
.likeon-mnav .nav-sidebar.nav-vertical > li > .toggle {
	position: absolute;
	top: 5px;
	right: -10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 44px;
	margin: 0;
	color: #8a8580;
	opacity: 1;
}
.likeon-mnav .nav-sidebar.nav-vertical > li > .toggle i { font-size: 22px; }
.likeon-mnav .nav-sidebar.nav-vertical > li.active > a { color: #6d7993; }
.likeon-mnav .nav-sidebar .children { margin: -4px 0 12px; padding: 0 0 0 2px; border: 0; }
.likeon-mnav .nav-sidebar .children > li { margin: 0; border: 0; list-style: none; }
.likeon-mnav .nav-sidebar .children > li > a {
	display: block;
	padding: 9px 0 9px 14px !important;
	border-left: 1px solid #e8e5e0;
	color: #4a4a4a;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .06em;
	line-height: 1.4;
	text-transform: uppercase;
}
.likeon-mnav .nav-sidebar .children > li > a:hover,
.likeon-mnav .nav-sidebar .children > li.current-menu-item > a { border-left-color: #1a1a1a; color: #1a1a1a; }
.likeon-mnav .nav-sidebar .children > li.likeon-mnav__all > a { color: #6d7993; font-weight: 600; }

/* кабінет і обране */
.likeon-mnav__links { margin: 14px 20px 0; padding: 0; list-style: none; }
.likeon-mnav__links li { margin: 0; list-style: none; }
.likeon-mnav__links a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 0;
	color: #1a1a1a;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}
.likeon-mnav__links a svg { flex: 0 0 auto; color: #1a1a1a; }
.likeon-mnav__links .likeon-wl-count { position: static; min-width: 22px; height: 22px; margin-left: 2px; padding: 0 7px; border-radius: 11px; font-size: 11.5px; line-height: 22px; }

/* контакти */
.likeon-mnav__contacts { margin: 18px 20px 0; padding: 18px; background: #f7f6f3; }
.likeon-mnav__phone { display: block; color: #1a1a1a; font-size: 17px; font-weight: 600; letter-spacing: 0; }
.likeon-mnav__ig { display: inline-block; margin: 6px 0 0; color: #6b6b6b; font-size: 14px; text-decoration: underline; text-decoration-color: #d9d4cc; text-underline-offset: 3px; }
.likeon-mnav__service { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid #e8e5e0; list-style: none; }
.likeon-mnav__service li { margin: 0; list-style: none; }
.likeon-mnav__service a { color: #4a4a4a; font-size: 13.5px; }
.likeon-mnav__service a:hover,
.likeon-mnav__ig:hover { color: #1a1a1a; }

/* ---- випадне меню розділів на комп'ютері: той самий стриманий стиль ---- */
#header .header-nav-main .nav-dropdown { min-width: 260px; padding: 12px 0; }
#header .header-nav-main .nav-dropdown > li > a {
	padding: 9px 22px;
	color: #4a4a4a;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.4;
	text-transform: uppercase;
	transition: background-color .15s, color .15s;
}
/* Колір під курсором — з !important навмисно. Випадному меню тема дає клас
   nav-dropdown-bold, а для нього у flatsome.css прописано color:#fff !important
   разом із заливкою акцентом. Заливку ми перебиваємо світлою, а білий напис на
   ній ставав невидимим — пункт під курсором просто зникав (власник це помітив
   на «Сукні»). Без !important тут не обійтися: правило теми сильніше. */
#header .header-nav-main .nav-dropdown > li > a:hover,
#header .header-nav-main .nav-dropdown-bold .nav-column li > a:hover { background: #f7f6f3; color: #1a1a1a !important; }


/* ==========================================================================
   БЛОГ — сторінка «Блог», архіви і стаття
   Шаблони home.php, archive.php, single.php і template-parts/likeon/ — у цій темі.
   Мова та сама, що в кабінеті й оформленні: чорнило #1a1a1a, акцент #6d7993,
   теплі тонкі лінії, кремова підкладка, прямі кнопки з дрібним написом.
   ========================================================================== */

.likeon-blog,
.likeon-post {
	--lb-ink: #1a1a1a;
	--lb-text: #2f2f2f;
	--lb-muted: #6b6b6b;
	--lb-soft: #8a8580;
	--lb-accent: #6d7993;
	--lb-line: #e8e5e0;
	--lb-cream: #f7f6f3;
	color: var(--lb-text);
}
.likeon-blog { padding: 26px 0 90px; }

/* --- заголовок сторінки --- */
.likeon-blog__head { max-width: 760px; margin: 0 0 40px; }
.likeon-blog .likeon-blog__title {
	margin: 0;
	color: var(--lb-ink);
	font-size: clamp(34px, 4.2vw, 52px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.1;
	text-transform: none;
}
.likeon-blog__sub { margin: 14px 0 0; color: var(--lb-muted); font-size: 17px; line-height: 1.6; }

/* --- сітка карток --- */
.likeon-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 32px;
}
.likeon-post-card { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.likeon-post-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--lb-cream);
}
.likeon-post-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.likeon-post-card:hover .likeon-post-card__media img { transform: scale(1.035); }
.likeon-post-card__body { display: flex; flex: 1; flex-direction: column; padding-top: 18px; }
.likeon-post-card__date {
	color: var(--lb-soft);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.4;
	text-transform: uppercase;
}
.likeon-blog .likeon-post-card__title,
.likeon-post .likeon-post-card__title {
	margin: 8px 0 0;
	padding: 0;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -.005em;
	line-height: 1.3;
	text-transform: none;
}
.likeon-post-card__title a { color: var(--lb-ink); text-decoration: none; }
.likeon-post-card__title a::after { content: ""; position: absolute; inset: 0; } /* уся картка клікабельна */
.likeon-post-card { position: relative; }
.likeon-post-card__title a:hover { color: var(--lb-ink); text-decoration: underline; text-underline-offset: 3px; }
.likeon-post-card__excerpt {
	display: -webkit-box;
	margin: 10px 0 0;
	overflow: hidden;
	color: var(--lb-muted);
	font-size: 15px;
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
.likeon-post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 16px;
	color: var(--lb-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
}
.likeon-post-card__more::after {
	content: "";
	width: 18px;
	height: 1px;
	background: currentColor;
	transition: width .25s;
}
.likeon-post-card:hover .likeon-post-card__more::after { width: 28px; }

/* --- сторінки --- */
.likeon-blog__pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 64px;
}
.likeon-blog__pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--lb-line);
	color: var(--lb-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.likeon-blog__pager a.page-numbers:hover { border-color: var(--lb-ink); }
.likeon-blog__pager .page-numbers.current { border-color: var(--lb-ink); background: var(--lb-ink); color: #fff; }
.likeon-blog__pager .page-numbers.dots { border-color: transparent; }
.likeon-blog__pager .prev,
.likeon-blog__pager .next { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.likeon-blog__empty { color: var(--lb-muted); font-size: 16px; }

/* --- стаття --- */
.likeon-post { padding: 26px 0 0; }
.likeon-article { margin: 0; padding: 0 15px; }
.likeon-article__head { max-width: 760px; margin: 0 auto; }
.likeon-article__eyebrow {
	display: inline-block;
	margin-bottom: 14px;
	color: var(--lb-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-decoration: none;
	text-transform: uppercase;
}
.likeon-article__eyebrow:hover { color: var(--lb-ink); }
.likeon-post .likeon-article__title {
	margin: 0;
	padding: 0;
	color: var(--lb-ink);
	font-size: clamp(30px, 3.6vw, 46px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.14;
	text-transform: none;
}
.likeon-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 16px 0 0;
	color: var(--lb-soft);
	font-size: 14px;
}
.likeon-article__cover {
	max-width: 1000px;
	margin: 34px auto 0;
	overflow: hidden;
	background: var(--lb-cream);
}
.likeon-article__cover img { display: block; width: 100%; max-height: 620px; height: auto; object-fit: cover; }

/* текст статті */
.likeon-article__content {
	max-width: 760px;
	margin: 42px auto 0;
	color: var(--lb-text);
	font-size: 17px;
	line-height: 1.8;
}
.likeon-article__content::after { content: ""; display: table; clear: both; }
.likeon-article__content p,
.likeon-article__content li { color: var(--lb-text); font-size: inherit; line-height: inherit; }
.likeon-article__content p { margin: 0 0 22px; }
.likeon-article__content span[style*="font-size"] { font-size: inherit !important; }
.likeon-article__content h2,
.likeon-article__content h3,
.likeon-article__content h4 {
	color: var(--lb-ink);
	letter-spacing: -.01em;
	text-transform: none;
}
.likeon-article__content h2 { margin: 48px 0 16px; font-size: clamp(23px, 2.4vw, 28px); font-weight: 700; line-height: 1.25; }
.likeon-article__content h3 { margin: 36px 0 12px; font-size: 21px; font-weight: 600; line-height: 1.3; }
.likeon-article__content h4 { margin: 30px 0 10px; font-size: 18px; font-weight: 600; line-height: 1.35; }
.likeon-article__content > :first-child,
.likeon-article__content > :first-child > :first-child { margin-top: 0; }
.likeon-article__content h2 span,
.likeon-article__content h3 span { font-weight: inherit !important; }
.likeon-article__content strong,
.likeon-article__content b { color: var(--lb-ink); font-weight: 600; }
.likeon-article__content a { color: var(--lb-ink); text-decoration: underline; text-decoration-color: #c9c3ba; text-underline-offset: 3px; }
.likeon-article__content a:hover { text-decoration-color: var(--lb-ink); }
.likeon-article__content ul { margin: 0 0 24px; padding: 0; list-style: none; }
.likeon-article__content ul li { position: relative; margin: 0 0 10px; padding-left: 26px; }
.likeon-article__content ul li::before {
	content: "";
	position: absolute;
	top: .8em;
	left: 6px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--lb-accent);
}
.likeon-article__content ol { margin: 0 0 24px; padding-left: 24px; }
.likeon-article__content ol li { margin: 0 0 10px; padding-left: 4px; }
.likeon-article__content blockquote {
	margin: 32px 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--lb-accent);
	color: var(--lb-ink);
	font-size: 19px;
	font-style: italic;
	line-height: 1.6;
}
.likeon-article__content blockquote p:last-child { margin-bottom: 0; }
.likeon-article__content img { max-width: 100%; height: auto; }
.likeon-article__content .wp-caption { max-width: 100%; margin-bottom: 24px; }
.likeon-article__content .wp-caption img { display: block; width: 100%; }
.likeon-article__content .wp-caption-text {
	margin: 8px 0 0;
	padding: 0;
	background: none;
	color: var(--lb-soft);
	font-size: 13px;
	font-style: normal;
	line-height: 1.45;
	text-align: left;
}
.likeon-article__content .alignright { float: right; max-width: 46%; margin: 6px 0 20px 32px; }
.likeon-article__content .alignleft { float: left; max-width: 46%; margin: 6px 32px 20px 0; }
.likeon-article__content .aligncenter { display: block; margin: 0 auto 24px; }
.likeon-article__content hr { margin: 40px 0; border: 0; border-top: 1px solid var(--lb-line); }
.likeon-article__content table { width: 100%; margin: 0 0 24px; border-collapse: collapse; font-size: 15px; }
.likeon-article__content th,
.likeon-article__content td { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--lb-line); text-align: left; }
/* рядки/колонки Flatsome і банер усередині статті — без зайвих бічних полів */
.likeon-article__content .row { margin-right: 0; margin-left: 0; }
.likeon-article__content .row > .col { padding-right: 0; padding-left: 0; }
.likeon-article__content .banner { margin: 0 0 32px; }
.likeon-article__content .banner h1,
.likeon-article__content .banner h2,
.likeon-article__content .banner h4 { color: inherit; }

/* заклик під статтею */
.likeon-article__foot { max-width: 760px; margin: 48px auto 0; }
.likeon-article__cta {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 6px 32px;
	padding: 28px 32px;
	background: var(--lb-cream);
}
.likeon-article__cta-title { grid-column: 1; margin: 0; color: var(--lb-ink); font-size: 20px; font-weight: 600; line-height: 1.3; }
.likeon-article__cta-text { grid-column: 1; margin: 0; color: var(--lb-muted); font-size: 15px; line-height: 1.55; }
.likeon-post .likeon-article__cta-btn {
	display: inline-flex;
	grid-column: 2;
	grid-row: 1 / span 2;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 28px;
	background: var(--lb-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .13em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .2s;
}
.likeon-post .likeon-article__cta-btn:hover { background: #000; color: #fff; }

/* «Читайте також» */
.likeon-post__more { margin-top: 80px; padding: 64px 0 90px; border-top: 1px solid var(--lb-line); }
.likeon-post__more-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 32px; }
.likeon-post .likeon-post__more-title { width: auto; margin: 0; color: var(--lb-ink); font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.015em; text-transform: none; }
.likeon-post__more-all {
	color: var(--lb-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .13em;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-transform: uppercase;
}
.likeon-post__more-all:hover { color: var(--lb-ink); }

@media (max-width: 849px) {
	.likeon-blog { padding: 18px 0 64px; }
	.likeon-blog__head { margin-bottom: 30px; }
	.likeon-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
	.likeon-post { padding-top: 18px; }
	.likeon-article { padding: 0 16px; }
	.likeon-article__cover { margin: 26px -16px 0; }
	.likeon-article__content { margin-top: 32px; font-size: 16.5px; line-height: 1.75; }
	.likeon-post__more { margin-top: 56px; padding: 48px 0 64px; }
}
@media (max-width: 549px) {
	.likeon-blog .container,
	.likeon-post .container { padding-right: 16px; padding-left: 16px; }
	.likeon-blog__sub { font-size: 15.5px; }
	.likeon-blog__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.likeon-post-card__title { font-size: 19px; }
	.likeon-article__meta { font-size: 13px; }
	.likeon-article__content h2 { margin-top: 38px; }
	.likeon-article__content blockquote { margin: 26px 0; padding-left: 18px; font-size: 17px; }
	.likeon-article__content .alignright,
	.likeon-article__content .alignleft { float: none; max-width: 100%; margin: 0 0 22px; }
	.likeon-article__content .wp-caption { width: 100% !important; }
	.likeon-article__cta { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
	.likeon-post .likeon-article__cta-btn { grid-column: 1; grid-row: auto; margin-top: 14px; }
	.likeon-post__more-head { margin-bottom: 24px; }
}


/* ==========================================================================
   КОНТАКТИ — template-parts/likeon/page-contacts.php
   ========================================================================== */

.likeon-contacts {
	--lc-ink: #1a1a1a;
	--lc-muted: #6b6b6b;
	--lc-soft: #8a8580;
	--lc-accent: #6d7993;
	--lc-line: #e8e5e0;
	--lc-line2: #d9d4cc;
	--lc-cream: #f7f6f3;
	--lc-error: #a1332b;
	--lc-ok: #2f6b45;
	padding: 26px 0 96px;
	color: var(--lc-ink);
}
.likeon-contacts__wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.likeon-contacts__head { max-width: 680px; margin: 0 0 44px; }
.likeon-contacts .likeon-contacts__title {
	margin: 0;
	color: var(--lc-ink);
	font-size: clamp(34px, 4.2vw, 52px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.1;
	text-transform: none;
}
.likeon-contacts__sub { margin: 14px 0 0; color: var(--lc-muted); font-size: 17px; line-height: 1.6; }

.likeon-contacts__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: start;
	gap: 56px;
}

/* картки зв'язку */
.likeon-contacts .likeon-contacts__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.likeon-contacts__cards > li { margin: 0; padding: 0; }
.likeon-ccard {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: center;
	gap: 2px 14px;
	height: 100%;
	padding: 18px 18px;
	border: 1px solid var(--lc-line);
	background: #fff;
	color: var(--lc-ink);
	text-decoration: none;
	transition: border-color .2s, box-shadow .2s;
}
.likeon-ccard:hover { border-color: var(--lc-ink); color: var(--lc-ink); box-shadow: 0 10px 30px rgba(26, 26, 26, .06); }
.likeon-ccard__icon {
	display: inline-flex;
	grid-row: 1 / span 2;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--lc-cream);
	color: var(--lc-ink);
}
.likeon-ccard__label { align-self: end; color: var(--lc-soft); font-size: 12px; font-weight: 600; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase; }
.likeon-ccard__value { align-self: start; overflow-wrap: anywhere; font-size: 17px; font-weight: 600; line-height: 1.35; }
.likeon-contacts__cards > li:nth-child(-n+2) { grid-column: 1 / -1; }
.likeon-contacts__cards > li:first-child .likeon-ccard__value { font-size: 22px; letter-spacing: -.01em; }

.likeon-contacts__city {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin: 24px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--lc-line);
}
.likeon-contacts__city-name { font-size: 16px; font-weight: 600; }
.likeon-contacts__city-note { color: var(--lc-muted); font-size: 15px; }
.likeon-contacts__help { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.likeon-contacts__help a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid var(--lc-line2);
	border-radius: 999px;
	color: var(--lc-ink);
	font-size: 14px;
	text-decoration: none;
}
.likeon-contacts__help a:hover { border-color: var(--lc-ink); color: var(--lc-ink); }

/* форма */
.likeon-contacts__form { padding: 36px 40px 40px; background: var(--lc-cream); }
.likeon-contacts .likeon-contacts__form-title { margin: 0; color: var(--lc-ink); font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; text-transform: none; }
.likeon-contacts__form-sub { margin: 8px 0 24px; color: var(--lc-muted); font-size: 15px; }

.likeon-contacts .wpcf7-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.likeon-contacts .wpcf7-form > .hidden-fields-container { display: none; }
.likeon-contacts .wpcf7-form > .inline-row-field,
.likeon-contacts .wpcf7-form > .row-field { width: auto; margin: 0; padding: 0; }
.likeon-contacts .wpcf7-form > .row-field,
.likeon-contacts .wpcf7-form > .wpcf7-response-output { grid-column: 1 / -1; }

.lct-field { position: relative; display: block; margin: 0; padding: 0; font-weight: 400; }
.lct-field .wpcf7-form-control-wrap { display: block; }
.likeon-contacts .lct-field input,
.likeon-contacts .lct-field textarea {
	display: block;
	width: 100%;
	max-width: none;
	height: 56px;
	margin: 0;
	padding: 23px 15px 7px;
	border: 1px solid var(--lc-line2);
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	color: var(--lc-ink);
	font-size: 15px;
	line-height: 24px;
	transition: border-color .2s, box-shadow .2s;
}
.likeon-contacts .lct-field textarea { height: 160px; min-height: 120px; padding-top: 28px; resize: vertical; }
.likeon-contacts .lct-field input:focus,
.likeon-contacts .lct-field textarea:focus { border-color: var(--lc-accent); outline: 0; box-shadow: 0 0 0 3px rgba(109, 121, 147, .15); }
.lct-field__label {
	position: absolute;
	top: 17px;
	left: 16px;
	max-width: calc(100% - 32px);
	overflow: hidden;
	color: var(--lc-soft);
	font-size: 15px;
	line-height: 22px;
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
	transition: top .15s, font-size .15s, color .15s;
}
.lct-field.is-focused .lct-field__label,
.lct-field.is-filled .lct-field__label { top: 7px; font-size: 11.5px; line-height: 16px; }
.lct-field.is-focused .lct-field__label { color: var(--lc-accent); }
.likeon-contacts .lct-field .wpcf7-not-valid { border-color: var(--lc-error); }
.likeon-contacts .wpcf7-not-valid-tip {
	position: static;
	display: block;
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--lc-error);
	font-size: 12.5px;
	line-height: 1.4;
	opacity: 1;
}
.likeon-contacts .wpcf7-not-valid-tip::after { display: none; } /* у Flatsome це підказка-«хмаринка» зі стрілкою */

.likeon-contacts .wpcf7-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	min-height: 54px;
	margin: 8px 0 0;
	padding: 0 34px;
	border: 0;
	border-radius: 0;
	background: var(--lc-ink) !important;
	box-shadow: none;
	color: #fff !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .13em;
	line-height: 1;
	text-transform: uppercase;
	transition: background-color .2s;
}
.likeon-contacts .wpcf7-form .wpcf7-submit:hover { background: #000 !important; }
.likeon-contacts .wpcf7-form .wpcf7-submit:disabled { opacity: .6; }
.likeon-contacts .wpcf7-spinner { margin: 8px 0 0 14px; vertical-align: middle; }
.likeon-contacts .wpcf7 form .wpcf7-response-output {
	margin: 4px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--lc-line2);
	background: #fff;
	font-size: 14px;
	line-height: 1.5;
}
.likeon-contacts .wpcf7 form.sent .wpcf7-response-output { border-color: var(--lc-ok); color: var(--lc-ok); }
.likeon-contacts .wpcf7 form.invalid .wpcf7-response-output,
.likeon-contacts .wpcf7 form.unaccepted .wpcf7-response-output,
.likeon-contacts .wpcf7 form.failed .wpcf7-response-output,
.likeon-contacts .wpcf7 form.aborted .wpcf7-response-output,
.likeon-contacts .wpcf7 form.spam .wpcf7-response-output { border-color: var(--lc-error); color: var(--lc-error); }

@media (max-width: 849px) {
	.likeon-contacts { padding: 18px 0 64px; }
	.likeon-contacts__head { margin-bottom: 30px; }
	.likeon-contacts__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 549px) {
	.likeon-contacts__sub { font-size: 15.5px; }
	.likeon-contacts .likeon-contacts__cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.likeon-ccard { padding: 14px 16px; }
	.likeon-contacts__cards > li:first-child .likeon-ccard__value { font-size: 20px; }
	.likeon-contacts__form { margin: 0 -16px; padding: 28px 16px 32px; }
	.likeon-contacts .wpcf7-form { grid-template-columns: minmax(0, 1fr); }
	.likeon-contacts .wpcf7-form .wpcf7-submit { width: 100%; }
}


/* ==========================================================================
   ПРО НАС — template-parts/likeon/page-about.php
   ========================================================================== */

.likeon-about {
	--la-ink: #1a1a1a;
	--la-text: #2f2f2f;
	--la-muted: #6b6b6b;
	--la-soft: #8a8580;
	--la-accent: #6d7993;
	--la-line: #e8e5e0;
	--la-cream: #f7f6f3;
	padding: 26px 0 96px;
	color: var(--la-text);
}
.likeon-about__wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

.likeon-about__intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 64px;
}
.likeon-about__eyebrow {
	margin: 0 0 14px;
	color: var(--la-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.likeon-about .likeon-about__title {
	margin: 0 0 26px;
	color: var(--la-ink);
	font-size: clamp(34px, 4.2vw, 52px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.1;
	text-transform: none;
}
.likeon-about__body p { margin: 0 0 18px; color: var(--la-text); font-size: 17px; line-height: 1.75; }
.likeon-about__body p:first-child { color: var(--la-ink); font-size: 20px; line-height: 1.55; }
.likeon-about__body p:last-child { margin-bottom: 0; }
.likeon-about__body strong { color: var(--la-ink); font-weight: 700; }
/* фото лише 640 px завширшки — показуємо в природних пропорціях, без кадрування й розтягування */
.likeon-about__photo { margin: 0; overflow: hidden; background: var(--la-cream); }
.likeon-about__photo img { display: block; width: 100%; height: auto; }

.likeon-about .likeon-about__facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 72px 0 0;
	padding: 0;
	border-top: 1px solid var(--la-line);
	border-bottom: 1px solid var(--la-line);
	list-style: none;
}
.likeon-about__facts li { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 30px 24px; }
.likeon-about__facts li + li { border-left: 1px solid var(--la-line); }
.likeon-about__fact-value { color: var(--la-ink); font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.likeon-about__fact-label { color: var(--la-muted); font-size: 14px; line-height: 1.45; }

.likeon-about__mats { margin-top: 80px; }
.likeon-about .likeon-about__h2 { margin: 0 0 28px; color: var(--la-ink); font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; text-transform: none; }
.likeon-about__mats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.likeon-about__mat { display: flex; flex-direction: column; color: var(--la-text); text-decoration: none; }
a.likeon-about__mat:hover { color: var(--la-text); }
.likeon-about__mat-media { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--la-cream); }
.likeon-about__mat-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
a.likeon-about__mat:hover .likeon-about__mat-media img { transform: scale(1.035); }
.likeon-about__mat-name { margin-top: 14px; color: var(--la-ink); font-size: 18px; font-weight: 700; }
a.likeon-about__mat .likeon-about__mat-name::after { content: " →"; font-weight: 400; }
.likeon-about__mat-desc { margin-top: 6px; color: var(--la-muted); font-size: 14.5px; line-height: 1.55; }

.likeon-about__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 32px;
	margin-top: 80px;
	padding: 34px 40px;
	background: var(--la-cream);
}
.likeon-about__cta-title { margin: 0; color: var(--la-ink); font-size: 22px; font-weight: 600; line-height: 1.3; }
.likeon-about__cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.likeon-about .likeon-about__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 28px;
	border: 1px solid var(--la-ink);
	background: var(--la-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .13em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .2s, color .2s;
}
.likeon-about .likeon-about__btn:hover { background: #000; color: #fff; }
.likeon-about .likeon-about__btn--ghost { background: transparent; color: var(--la-ink); }
.likeon-about .likeon-about__btn--ghost:hover { background: var(--la-ink); color: #fff; }

@media (max-width: 849px) {
	.likeon-about { padding: 18px 0 64px; }
	.likeon-about__intro { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.likeon-about__photo { order: -1; margin: 0 -16px; }
	.likeon-about .likeon-about__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
	.likeon-about__facts li { padding: 22px 16px; }
	.likeon-about__facts li:nth-child(odd) { border-left: 0; padding-left: 0; }
	.likeon-about__facts li:nth-child(n+3) { border-top: 1px solid var(--la-line); }
	.likeon-about__mats { margin-top: 56px; }
	.likeon-about__mats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
	.likeon-about__cta { margin-top: 56px; padding: 26px 20px; }
}
@media (max-width: 549px) {
	.likeon-about__body p { font-size: 16px; }
	.likeon-about__body p:first-child { font-size: 18px; }
	.likeon-about__mat-name { font-size: 16px; }
	.likeon-about__mat-desc { font-size: 13.5px; }
	.likeon-about__cta { margin-left: -16px; margin-right: -16px; }
	.likeon-about__cta-actions,
	.likeon-about .likeon-about__btn { width: 100%; }
}


/* ==========================================================================
   НІЧОГО НЕ ЗНАЙДЕНО — woocommerce/loop/no-products-found.php
   ========================================================================== */

.likeon-search-empty .likeon-cat-head__tools,
.likeon-search-empty .likeon-cat-head__count { display: none !important; }

.likeon-empty {
	max-width: 720px;
	margin: 12px 0 72px;
	padding: 36px 40px 40px;
	background: #f7f6f3;
	color: #1a1a1a;
}
.likeon-empty__title { margin: 0; color: #1a1a1a; font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.likeon-empty__text { margin: 8px 0 0; color: #6b6b6b; font-size: 16px; line-height: 1.6; }
.likeon-empty__search { display: flex; gap: 0; margin: 24px 0 0; }
.likeon-empty .likeon-empty__search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 54px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid #d9d4cc;
	border-right: 0;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	color: #1a1a1a;
	font-size: 16px;
}
.likeon-empty .likeon-empty__search input[type="search"]:focus { border-color: #6d7993; outline: 0; box-shadow: none; }
.likeon-empty .likeon-empty__search button {
	flex: 0 0 auto;
	min-height: 54px;
	margin: 0;
	padding: 0 26px;
	border: 0;
	border-radius: 0;
	background: #1a1a1a;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .13em;
	line-height: 1;
	text-transform: uppercase;
}
.likeon-empty .likeon-empty__search button:hover { background: #000; }
.likeon-empty__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.likeon-empty__cats a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid #d9d4cc;
	border-radius: 999px;
	background: #fff;
	color: #1a1a1a;
	font-size: 14px;
	text-decoration: none;
}
.likeon-empty__cats a:hover { border-color: #1a1a1a; color: #1a1a1a; }

@media (max-width: 549px) {
	.likeon-empty { margin: 4px -16px 48px; padding: 26px 16px 28px; }
	.likeon-empty__title { font-size: 20px; }
	.likeon-empty__text { font-size: 15px; }
	.likeon-empty .likeon-empty__search button { padding: 0 18px; }
}


/* ==========================================================================
   404 — 404.php (поле пошуку й розділи — ті самі, що в «Нічого не знайдено»)
   ========================================================================== */

.likeon-404 { padding: 30px 0 90px; color: #1a1a1a; }
.likeon-404__wrap { max-width: var(--likeon-width); margin: 0 auto; padding: 0 15px; }
.likeon-404__box { max-width: 760px; }
.likeon-404__code {
	margin: 0 0 6px;
	color: #6d7993;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.likeon-404__code::after { content: " · сторінку не знайдено"; letter-spacing: .12em; }
.likeon-404 .likeon-404__title {
	margin: 0;
	color: #1a1a1a;
	font-size: clamp(34px, 4.2vw, 52px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.1;
	text-transform: none;
}
.likeon-404__text { max-width: 620px; margin: 16px 0 0; color: #6b6b6b; font-size: 17px; line-height: 1.6; }
.likeon-404 .likeon-empty__search { max-width: 620px; margin-top: 28px; }
.likeon-404 .likeon-empty__search input[type="search"] {
	flex: 1; min-width: 0; height: 56px; margin: 0; padding: 0 16px;
	border: 1px solid #d9d4cc; border-right: 0; border-radius: 0; background: #fff; box-shadow: none; color: #1a1a1a; font-size: 16px;
}
.likeon-404 .likeon-empty__search input[type="search"]:focus { border-color: #6d7993; outline: 0; box-shadow: none; }
.likeon-404 .likeon-empty__search button {
	flex: 0 0 auto; min-height: 56px; margin: 0; padding: 0 28px; border: 0; border-radius: 0;
	background: #1a1a1a; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .13em; line-height: 1; text-transform: uppercase;
}
.likeon-404 .likeon-empty__search button:hover { background: #000; }
.likeon-404 .likeon-empty__cats a { background: #fff; }

.likeon-404__new { margin-top: 72px; padding-top: 48px; border-top: 1px solid #e8e5e0; }
.likeon-404__new-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
/* сітка Flatsome дає колонкам внутрішній відступ 9.8 px, а рядку — нульові поля: картки вилазили всередину відносно заголовка */
.likeon-404__new .products.row { width: auto; max-width: none; margin-right: -9.8px; margin-left: -9.8px; }
.likeon-404 .likeon-404__h2 { width: auto; margin: 0; color: #1a1a1a; font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.015em; text-transform: none; }
.likeon-404__all { color: #1a1a1a; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-decoration: underline; text-underline-offset: 4px; text-transform: uppercase; }
.likeon-404__all:hover { color: #1a1a1a; }

@media (max-width: 549px) {
	.likeon-404 { padding: 18px 0 56px; }
	.likeon-404__wrap { padding: 0 16px; }
	.likeon-404__text { font-size: 15.5px; }
	.likeon-404 .likeon-empty__search button { padding: 0 18px; }
	.likeon-404__new { margin-top: 48px; padding-top: 36px; }
}


/* ==========================================================================
   РОЗМІРНА СІТКА — таблиці замість картинок із російським текстом
   ========================================================================== */

.likeon-size-table {
	margin: 0 0 18px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #e8e5e0;
}
.page:not(.woocommerce-page) .content-area .col-inner .likeon-size-table table { min-width: 460px; margin: 0; font-size: 15px; }
.page:not(.woocommerce-page) .content-area .col-inner .likeon-size-table th,
.page:not(.woocommerce-page) .content-area .col-inner .likeon-size-table td {
	padding: 12px 14px;
	border-bottom: 1px solid #efece7;
	color: #1a1a1a;
	text-align: center;
	white-space: nowrap;
}
.page:not(.woocommerce-page) .content-area .col-inner .likeon-size-table thead th {
	background: #f7f6f3;
	color: #6b6b6b;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: normal;
}
.page:not(.woocommerce-page) .content-area .col-inner .likeon-size-table tbody th { font-weight: 700; text-align: left; }
.page:not(.woocommerce-page) .content-area .col-inner .likeon-size-table thead th:first-child { text-align: left; }
.page:not(.woocommerce-page) .content-area .col-inner .likeon-size-table tbody tr:last-child th,
.page:not(.woocommerce-page) .content-area .col-inner .likeon-size-table tbody tr:last-child td { border-bottom: 0; }
.page:not(.woocommerce-page) .content-area .col-inner .likeon-size-table tbody tr:hover th,
.page:not(.woocommerce-page) .content-area .col-inner .likeon-size-table tbody tr:hover td { background: #fbfaf8; }
.page:not(.woocommerce-page) .content-area .col-inner img.wp-image-1728 { display: block; max-width: 420px; width: 100%; margin: 8px 0 12px; }
@media (max-width: 549px) {
	/* на телефоні таблиці вміщаються без горизонтальної прокрутки */
	.page:not(.woocommerce-page) .content-area .col-inner .likeon-size-table table { min-width: 0; font-size: 14px; }
	.page:not(.woocommerce-page) .content-area .col-inner .likeon-size-table th,
	.page:not(.woocommerce-page) .content-area .col-inner .likeon-size-table td { padding: 10px 4px; }
	.page:not(.woocommerce-page) .content-area .col-inner .likeon-size-table thead th { padding: 10px 4px; font-size: 10px; letter-spacing: .02em; line-height: 1.3; }
	.page:not(.woocommerce-page) .content-area .col-inner .likeon-size-table th:first-child { padding-left: 10px; white-space: nowrap; }
	.page:not(.woocommerce-page) .content-area .col-inner img.wp-image-1728 { max-width: 100%; }
}


/* ==========================================================================
   ШАПКА: ОДНАКОВІ ІКОНКИ
   Пошук і кошик Flatsome малює кнопками — сині квадрати з білою іконкою-гліфом
   і червоним лічильником, а поруч обране й кабінет — тонкі лінійні іконки в колі.
   Приводимо все до одного вигляду: лінійна іконка 21 px у колі 42 px,
   лічильник — чорний кружечок, як у обраного.
   ========================================================================== */

#header .header-button > a.button.icon,
#header .header-search .header-button > a,
#header .cart-item .header-button > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 42px;
	height: 42px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #1a1a1a !important;
	line-height: 1;
	transition: background-color .15s ease;
}
#header .header-button > a.button.icon:hover,
#header .header-button > a.button.icon:focus-visible { background-color: #f4f2ef !important; color: #000 !important; }

#header .header-button > a.button.icon > i.icon-search,
#header .header-button > a.button.icon > i.icon-shopping-cart {
	position: relative;
	display: block;
	width: 21px;
	height: 21px;
	margin: 0;
	top: 0;
	font-size: 0 !important;
	line-height: 0;
}
#header .header-button > a.button.icon > i.icon-search::before,
#header .header-button > a.button.icon > i.icon-shopping-cart::before {
	content: "";
	display: block;
	width: 21px;
	height: 21px;
	margin: 0;
	background-color: currentColor;
	-webkit-mask: var(--likeon-ico) center / contain no-repeat;
	mask: var(--likeon-ico) center / contain no-repeat;
}
#header i.icon-search { --likeon-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10.6' cy='10.6' r='6.4'/%3E%3Cpath d='m15.4 15.4 4.6 4.6'/%3E%3C/svg%3E"); }
#header i.icon-shopping-cart { --likeon-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M5.4 8.4h13.2l-1.1 12H6.5z'/%3E%3Cpath d='M9 8.4V7a3 3 0 0 1 6 0v1.4' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* лічильник кошика — як у обраного: чорний кружечок угорі праворуч */
#header .header-button > a.button.icon > i.icon-shopping-cart[data-icon-label]::after {
	content: attr(data-icon-label);
	position: absolute;
	top: -11px;
	right: -13px;
	left: auto;
	min-width: 17px;
	height: 17px;
	margin: 0;
	padding: 0 4px;
	border-radius: 9px;
	background: #1a1a1a !important; /* колір «secondary» теми вбудованим стилем фарбував лічильник у помаранчевий */
	box-shadow: none;
	color: #fff !important;
	font-family: inherit;
	font-size: 10.5px;
	font-style: normal;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
	transform: none;
}
#header .header-button > a.button.icon > i.icon-shopping-cart[data-icon-label="0"]::after { display: none; }

@media (max-width: 849px) {
	#header .header-button > a.button.icon,
	#header .header-search .header-button > a,
	#header .cart-item .header-button > a { width: 40px; height: 40px; }
}

/* гамбургер на телефоні був сірим — такого ж кольору, як інші іконки */
#header .nav-icon > a,
#header .nav-icon > a i,
#header [data-open="#main-menu"] { color: #1a1a1a !important; }