/**
 * Furniland — сторінка товару.
 * Блоковий шаблон WooCommerce + вузли з inc/woocommerce/single-product.php.
 * Токени: --fl-*.
 */

/* ------------------------------------------------------- Верхні колонки --- */

/* Галерея має домінувати: у дефолтному розкладі колонка покупки виходила
   ширшою за фото, і блок читався перекошеним. Плюс стеля на ширину тексту —
   рядок довжиною 800px і кнопка на всю цю ширину виглядають незграбно. */
/* Перший екран не розтягуємо: фото фізично не більше ~600–800px, і на 2560px
   між ним і карточкою покупки зяяла діра пів екрана. Колонки стають одна біля
   одної від лівого краю — в одну лінію з крихтами, табами й підбірками. */
.single-product .wp-block-columns.alignwide {
	gap: clamp(24px, 3vw, 52px);
	align-items: flex-start;
	justify-content: flex-start;
}

/* СТАЛА розкладка: обидві колонки мають фіксовану міру, що НЕ залежить від
   розміру фото товару. Інакше кожна картка мала свою ширину колонок (оригінали
   фото — від 300px до 1280px), і при переході між товарами інтерфейс «скакав».
   !important — редактор пише ширину колонки інлайновим flex-basis. */
.single-product .wp-block-columns.alignwide > .wp-block-column:first-child {
	flex: 0 1 clamp(420px, 50%, 780px) !important;
	max-width: clamp(420px, 50%, 780px);
	min-width: 0;
}

/* Колонка покупки має фіксовану комфортну міру, а решту простору забирає
   фото — так на широкому екрані нічого не розтягується на пів метра. */
/* Уся колонка покупки — одна карточка. Раніше рамка була лише на формі, і її
   внутрішній padding зсував кнопки на 20px відносно назви, ціни й чипів —
   збоку це читалось як «ступеньки». */
.single-product .wp-block-columns.alignwide > .wp-block-column:last-child {
	flex: 0 0 clamp(360px, 46%, 620px);
	max-width: clamp(360px, 46%, 620px);
	min-width: 0;
	/* без border-box padding додавався до заявленої ширини колонки */
	box-sizing: border-box;
	padding: clamp(18px, 1.6vw, 26px);
	border: 1px solid var(--fl-border, #e6e8e6);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 6px 22px rgba(20, 40, 30, 0.06);
}

/* Опис, характеристики й FAQ читаються рядком нормальної довжини, а не на
   всю ширину сторінки. */
/* Ширину нижніх секцій НЕ обмежуємо: constrained-макет WordPress центрує все,
   що має max-width (і робить це через !important), тож блок з'їжджав від лівого
   краю. Довжину рядка тримають уже самі панелі й список FAQ. */

/* Галерея ліпиться при скролі — колонка покупки завжди має фото поруч.
   WooCommerce жорстко ріже блок галереї до 512px; на широкому екрані через це
   між фото й покупкою зяяла діра. Знімаємо стелю, але тримаємо розумну міру
   й центруємо — фото не має розтягуватись на пів екрана. */
.single-product .wp-block-woocommerce-product-image-gallery {
	position: sticky;
	top: 20px;
	/* Фото росте разом з екраном, але не безмежно: на 2560px фіксовані 660px
	   лишали в центрі блока 400px пустоти, а на всю колонку (1068px) знімок
	   виглядав би плакатом. --fl-gallery-max віддає PHP — це власний розмір
	   знімка, щоб слабші фото не розтягувались і не милились. */
	/* Ширину задає колонка — тут лишається просто заповнити її. */
	max-width: 100%;
}

.single-product .woocommerce-product-gallery__image img,
.single-product .wp-block-woocommerce-product-image-gallery img {
	border-radius: 18px;
}

/* Рамка й padding живуть на блоці-обгортці, а не на .woocommerce-product-gallery:
   FlexSlider міряє саму галерею, і будь-який її padding він вираховував удруге —
   кадр ставав вужчим за вікно, а праворуч визирало наступне фото. */
.single-product .wp-block-woocommerce-product-image-gallery {
	border: 1px solid var(--fl-border, #e6e8e6);
	border-radius: 20px;
	padding: 10px;
	background: #fff;
	/* Бейдж знижки лежить саме тут, і без цього він абсолютно позиціонувався
	   від сторінки — на телефоні наїжджав на хлібні крихти. */
	position: relative;
	/* Оверлей зуму (jQuery.zoom) має природний розмір оригіналу (1280px) і на
	   телефоні тягнув горизонтальний скрол — ріжемо на обгортці, а не на самій
	   галереї, щоб не збивати розрахунки слайдера. */
	overflow: hidden;
	/* Флекс, а не авто-марджини: класична верстка WooCommerce лишає галереї
	   float:left зі вищою вагою, і фото тулилось до лівого краю підкладки.
	   Мінімальна висота — щоб підкладка не схлопувалась під дрібним фото і
	   перший екран мав однакову геометрію на кожному товарі. */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: clamp(420px, 40vw, 620px);
}

.single-product .woocommerce-product-gallery .flex-viewport {
	overflow: hidden;
	border-radius: 14px;
}

.single-product .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.single-product .flex-control-thumbs li {
	width: 74px;
	margin: 0;
	float: none;
}

.single-product .flex-control-thumbs li img {
	border-radius: 12px;
	border: 1.5px solid transparent;
	opacity: 1;
	transition: border-color 0.15s ease;
}

.single-product .flex-control-thumbs li img.flex-active,
.single-product .flex-control-thumbs li img:hover {
	border-color: var(--fl-primary, #397063);
}

.single-product .woocommerce-product-gallery__trigger {
	border-radius: 999px;
}

/* Саме фото — у своєму розмірі й по центру підкладки: слабкі знімки (300–600px)
   не розтягуються й не милиться, а карточка все одно тримає ширину колонки.
   Обмежуємо галерею, а не <img>: WooCommerce ставить картинці width:100%, і
   FlexSlider рахує кадр саме від ширини галереї. */
.single-product .woocommerce-product-gallery {
	position: relative;
	max-width: var(--fl-gallery-max, 600px);
	/* float від класичної верстки WooCommerce не давав авто-марджинам
	   центрувати — фото тулилось до лівого краю підкладки */
	float: none;
	margin-inline: auto;
}

.single-product span.onsale.fl-sp-sale {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 3;
	display: grid;
	gap: 1px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 8px 14px;
	border-radius: 12px;
	background: #c0392b;
	color: #fff;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.1;
	text-align: left;
}

.single-product span.onsale.fl-sp-sale i {
	font-style: normal;
	font-size: 0.7rem;
	font-weight: 600;
	opacity: 0.9;
}

/* --------------------------------------------------------- Заголовок ------ */

.single-product .wp-block-post-title {
	font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.05rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: var(--fl-heading, #1b2b27);
	margin: 0 0 8px;
}

/* ---------------------------------------------- Рейтинг / артикул / хіт --- */

.fl-sp-headline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0 0 12px;
	font-size: 0.88rem;
}

.fl-sp-rating {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	color: var(--fl-muted, #6b7280);
}

.fl-sp-rating b {
	color: var(--fl-heading, #1b2b27);
	font-weight: 700;
}

.fl-sp-rating span:last-child {
	border-bottom: 1px dashed currentColor;
}

.fl-sp-rating:hover span:last-child {
	color: var(--fl-primary, #397063);
}

.fl-sp-rating--empty .fl-stars {
	color: #dcdfdc;
}

.fl-sp-sold,
.fl-sp-sku {
	color: var(--fl-muted, #6b7280);
}

.fl-sp-sold {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.fl-sp-sold::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--fl-primary, #397063);
}

/* --------------------------------------------------------- Ціна ----------- */

.single-product .wc-block-components-product-price {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 2px;
}

.single-product .wc-block-components-product-price ins,
.single-product .wc-block-components-product-price > .woocommerce-Price-amount {
	text-decoration: none;
	font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.4rem);
	font-weight: 800;
	color: var(--fl-heading, #1b2b27);
	line-height: 1.1;
}

.single-product .wc-block-components-product-price del {
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--fl-muted, #6b7280);
	opacity: 1;
}

.single-product .wc-block-components-product-price del .woocommerce-Price-amount {
	color: var(--fl-muted, #6b7280);
}

.fl-sp-unit {
	margin: 0 0 10px;
	font-size: 0.88rem;
	color: var(--fl-muted, #6b7280);
}

.fl-sp-unit b {
	color: var(--fl-heading, #1b2b27);
	font-weight: 700;
}

/* -------------------------------------------------- Наявність ------------- */

.fl-sp-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0 0 12px;
}

.fl-sp-stock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.92rem;
	font-weight: 600;
}

.fl-sp-stock__dot {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: currentColor;
}

.fl-sp-stock--in {
	color: #1e8e3e;
}

.fl-sp-stock--out {
	color: #b42318;
}

.fl-sp-left {
	padding: 4px 11px;
	border-radius: 999px;
	background: #fdf3e3;
	color: #b97c1e;
	font-size: 0.8rem;
	font-weight: 700;
}

/* --------------------------------------------------------- Чипи специфік -- */

.fl-sp-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.fl-sp-spec {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1px solid var(--fl-border, #e6e8e6);
	border-radius: 999px;
	font-size: 0.82rem;
	background: #fff;
}

.fl-sp-spec__k {
	color: var(--fl-muted, #6b7280);
}

.fl-sp-spec__v {
	color: var(--fl-heading, #1b2b27);
	font-weight: 600;
}

.fl-sp-spec--all {
	color: var(--fl-primary, #397063);
	font-weight: 700;
	text-decoration: none;
	border-color: color-mix(in srgb, var(--fl-primary, #397063) 35%, #fff);
}

.fl-sp-spec--all:hover {
	background: var(--fl-primary-light, #e9f5ea);
}

/* --------------------------------------------------------- Блок покупки --- */

/* Рамку тримає вся колонка (див. вище), тут лишається тільки відбити блок
   покупки лінією — без власного padding, щоб кнопки стояли на одній
   вертикалі з назвою, ціною та чипами. */
.single-product .wp-block-woocommerce-add-to-cart-form {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--fl-border, #e6e8e6);
}

/* -------------------------------------------------- Форма додавання ------- */

/* Селектор повторює вагу інлайнового правила WooCommerce
   (.wp-block-woocommerce-add-to-cart-form form.cart => min-content auto auto),
   інакше воно лишає третю порожню колонку і кнопка не добирає до краю. */
.single-product .wp-block-woocommerce-add-to-cart-form form.cart,
.single-product form.cart {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px;
	margin: 0 0 4px;
	padding: 0;
}

/* Клірфікс-псевдоелементи форми в гріді стають повноцінними комірками й
   народжують зайву неявну колонку — кнопка через це не добирає до краю. */
.single-product .wp-block-woocommerce-add-to-cart-form form.cart::before,
.single-product .wp-block-woocommerce-add-to-cart-form form.cart::after {
	/* !important — правило приходить інлайном від WooCommerce уже після
	   нашого файла, а без цього кнопка не добирає до правого краю */
	content: none !important;
	display: none !important;
}

/* WooCommerce інлайном ставить формі три колонки й розкладає по них кнопки.
   Не воюємо з цим: тягнемо кнопки до останньої лінії, скільки б їх не було. */
.single-product .wp-block-woocommerce-add-to-cart-form form.cart .quantity {
	grid-column: 1;
	grid-row: 1;
}

.single-product .wp-block-woocommerce-add-to-cart-form form.cart .single_add_to_cart_button {
	grid-column: 2 / -1;
	grid-row: 1;
}

.single-product .wp-block-woocommerce-add-to-cart-form form.cart .fl-buy-now {
	grid-column: 1 / -1;
	grid-row: 2;
}

/* Лічильник кількості (кнопки додає single-product.js). */
.single-product .quantity.fl-qty,
.single-product form.cart .quantity {
	display: inline-flex;
	align-items: center;
	align-self: stretch;
	border: 1px solid var(--fl-border, #e6e8e6);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
}

.fl-qty-btn {
	width: 46px;
	align-self: stretch;
	border: 0;
	background: #fff;
	color: var(--fl-heading, #1b2b27);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.fl-qty-btn:hover {
	background: var(--fl-primary-light, #e9f5ea);
	color: var(--fl-primary, #397063);
}

.single-product form.cart input.qty {
	width: 52px;
	height: 56px;
	border: 0;
	border-inline: 1px solid var(--fl-border, #e6e8e6);
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	color: var(--fl-heading, #1b2b27);
	background: #fff;
	-moz-appearance: textfield;
}

.single-product form.cart input.qty::-webkit-outer-spin-button,
.single-product form.cart input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.single-product form.cart .single_add_to_cart_button {
	width: 100%;
	min-height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--fl-primary, #397063) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 14px !important;
	padding: 16px 24px !important;
	font-size: 1.02rem !important;
	font-weight: 700 !important;
	box-shadow: 0 8px 20px rgba(57, 112, 99, 0.26);
	transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.single-product form.cart .single_add_to_cart_button:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(57, 112, 99, 0.32);
}

.fl-buy-now {
	width: 100%;
	min-height: 52px;
	border: 1.5px solid var(--fl-primary, #397063);
	background: #fff;
	color: var(--fl-primary, #397063);
	border-radius: 14px;
	padding: 14px 24px;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}

.fl-buy-now:hover {
	background: var(--fl-primary-light, #e9f5ea);
}

/* ------------------------------------------------------ Термін доставки --- */

.fl-sp-eta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 16px 0 0;
	padding: 12px 15px;
	border-radius: 12px;
	background: var(--fl-primary-light, #e9f5ea);
	color: #2f5c51;
	font-size: 0.9rem;
	font-weight: 600;
}

.fl-sp-eta__ico {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	color: var(--fl-primary, #397063);
}

.fl-sp-eta b {
	font-weight: 800;
}

/* ------------------------------------------------------------ Довіра ------ */

/* Чотири окремі рамки в вузькій колонці дробили її на клаптики — тепер це
   один список у межах карточки покупки. */
.fl-sp-trust {
	list-style: none;
	margin: 14px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--fl-border, #e6e8e6);
	display: grid;
	gap: 11px;
}

.fl-sp-trust__i {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.84rem;
	line-height: 1.35;
}

.fl-sp-trust__ico {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--fl-primary, #397063);
}

.fl-sp-trust__i b {
	display: block;
	color: var(--fl-heading, #1b2b27);
	font-weight: 700;
}

.fl-sp-trust__i i {
	display: block;
	margin-top: 2px;
	color: var(--fl-muted, #6b7280);
	font-style: normal;
	font-size: 0.79rem;
}

/* --------------------------------------------------------- Допомога ------- */

.fl-sp-help {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 14px 0 0;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--fl-surface, #f5f6f5);
}

.fl-sp-help__body {
	flex: 1 1 180px;
	min-width: 0;
}

.fl-sp-help__title {
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--fl-heading, #1b2b27);
	margin: 0 0 3px;
}

.fl-sp-help__text {
	font-size: 0.85rem;
	color: var(--fl-muted, #6b7280);
	margin: 0;
}

.fl-sp-help__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 17px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--fl-border, #e6e8e6);
	color: var(--fl-heading, #1b2b27);
	font-weight: 700;
	font-size: 0.92rem;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.fl-sp-help__btn:hover {
	border-color: var(--fl-primary, #397063);
	color: var(--fl-primary, #397063);
}

.fl-sp-help__ico {
	width: 16px;
	height: 16px;
	color: var(--fl-primary, #397063);
}

/* ------------------------------------------------------------- Таби ------- */

.single-product .woocommerce-tabs {
	margin-top: clamp(28px, 4vw, 48px);
}

.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 22px;
	padding: 0 0 2px;
	list-style: none;
	border-bottom: 1px solid var(--fl-border, #e6e8e6);
}

.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after,
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after {
	content: none;
	display: none;
}

.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
}

.single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 18px;
	border-bottom: 2px solid transparent;
	color: var(--fl-muted, #6b7280);
	font-weight: 700;
	font-size: 0.98rem;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--fl-primary, #397063);
	border-bottom-color: var(--fl-primary, #397063);
}

.single-product .woocommerce-Tabs-panel {
	color: var(--fl-heading, #1b2b27);
	font-size: 0.97rem;
	line-height: 1.65;
	max-width: 78ch;
}

.single-product .woocommerce-Tabs-panel > h2:first-child {
	margin-top: 0;
	font-size: 1.35rem;
}

.single-product .woocommerce-Tabs-panel img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}

.single-product .woocommerce-Tabs-panel ul {
	padding-left: 20px;
}

.single-product .woocommerce-Tabs-panel li {
	margin: 4px 0;
}

/* Таблиця характеристик. */
.single-product .shop_attributes {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--fl-border, #e6e8e6);
	border-radius: 14px;
	overflow: hidden;
}

.single-product .shop_attributes th,
.single-product .shop_attributes td {
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--fl-border, #e6e8e6);
	text-align: left;
	font-size: 0.93rem;
}

.single-product .shop_attributes th {
	width: 42%;
	color: var(--fl-muted, #6b7280);
	font-weight: 600;
	background: var(--fl-surface, #f5f6f5);
}

.single-product .shop_attributes td p {
	margin: 0;
}

.single-product .shop_attributes tr:last-child th,
.single-product .shop_attributes tr:last-child td {
	border-bottom: 0;
}

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

.single-product #reviews .commentlist {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: grid;
	gap: 12px;
}

.single-product #reviews .comment_container {
	display: flex;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--fl-border, #e6e8e6);
	border-radius: 16px;
	background: #fff;
}

.single-product #reviews .comment_container img.avatar {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	position: static;
	margin: 0;
	padding: 0;
	border: 0;
}

.single-product #reviews .comment-text {
	margin: 0;
	border: 0;
	padding: 0;
	flex: 1;
	min-width: 0;
}

.single-product #reviews .woocommerce-review__author {
	font-weight: 700;
	color: var(--fl-heading, #1b2b27);
}

.single-product #reviews .woocommerce-review__published-date {
	color: var(--fl-muted, #6b7280);
	font-size: 0.85rem;
}

.single-product #reviews .woocommerce-noreviews {
	margin: 0 0 20px;
	padding: 16px 18px;
	border-radius: 14px;
	background: var(--fl-surface, #f5f6f5);
	color: var(--fl-muted, #6b7280);
}

.single-product #review_form_wrapper {
	max-width: 720px;
	padding: 20px 22px;
	border: 1px solid var(--fl-border, #e6e8e6);
	border-radius: 18px;
	background: #fff;
}

.single-product #review_form_wrapper .comment-reply-title {
	display: block;
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--fl-heading, #1b2b27);
	margin-bottom: 14px;
}

.single-product .comment-form .comment-form-rating label,
.single-product .comment-form .comment-form-comment label,
.single-product .comment-form .comment-form-author label,
.single-product .comment-form .comment-form-email label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--fl-heading, #1b2b27);
}

.single-product .comment-form textarea,
.single-product .comment-form input[type="text"],
.single-product .comment-form input[type="email"] {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--fl-border, #e6e8e6);
	border-radius: 12px;
	font: inherit;
	font-size: 0.95rem;
	background: #fff;
}

.single-product .comment-form textarea:focus,
.single-product .comment-form input[type="text"]:focus,
.single-product .comment-form input[type="email"]:focus {
	outline: none;
	border-color: var(--fl-primary, #397063);
}

.single-product .comment-form p.stars a {
	font-size: 1.2rem;
}

.single-product .comment-form .submit {
	margin-top: 6px;
	padding: 14px 28px;
	border: 0;
	border-radius: 12px;
	background: var(--fl-primary, #397063);
	color: #fff;
	font-weight: 700;
	font-size: 0.98rem;
	cursor: pointer;
	transition: background 0.15s ease;
}

.single-product .comment-form .submit:hover {
	background: var(--fl-primary-dark, #2f5c51);
}

/* -------------------------------------------------------------- FAQ ------- */

.fl-sp-faq {
	margin: clamp(28px, 4vw, 44px) 0 0;
}

.fl-sp-faq__title {
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
	font-weight: 800;
	margin: 0 0 18px;
	color: var(--fl-heading, #1b2b27);
}

.fl-sp-faq__list {
	display: grid;
	gap: 10px;
	max-width: 900px;
}

.fl-sp-faq__i {
	border: 1px solid var(--fl-border, #e6e8e6);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
}

.fl-sp-faq__i summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 18px;
	cursor: pointer;
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--fl-heading, #1b2b27);
	list-style: none;
}

.fl-sp-faq__i summary::-webkit-details-marker {
	display: none;
}

.fl-sp-faq__i summary svg {
	flex: 0 0 auto;
	color: var(--fl-muted, #6b7280);
	transition: transform 0.18s ease;
}

.fl-sp-faq__i[open] summary svg {
	transform: rotate(180deg);
	color: var(--fl-primary, #397063);
}

.fl-sp-faq__i p {
	margin: 0;
	padding: 0 18px 18px;
	color: var(--fl-muted, #6b7280);
	font-size: 0.93rem;
	line-height: 1.6;
}

/* ------------------------------------------------------- Липка панель ----- */

.fl-sp-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	padding: 10px clamp(12px, 3vw, 24px);
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--fl-border, #e6e8e6);
	box-shadow: 0 -6px 22px rgba(20, 40, 30, 0.09);
	transform: translateY(110%);
	transition: transform 0.22s ease;
}

.fl-sp-bar.is-on {
	transform: none;
}

.fl-sp-bar[hidden] {
	display: none;
}

.fl-sp-bar__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 1720px;
	margin: 0 auto;
}

.fl-sp-bar__img {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	overflow: hidden;
	flex: 0 0 auto;
	background: var(--fl-surface, #f5f6f5);
}

.fl-sp-bar__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fl-sp-bar__info {
	flex: 1;
	min-width: 0;
	display: grid;
}

.fl-sp-bar__info b {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--fl-heading, #1b2b27);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fl-sp-bar__price {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--fl-heading, #1b2b27);
}

.fl-sp-bar__btn {
	flex: 0 0 auto;
	min-height: 46px;
	padding: 12px 26px;
	border: 0;
	border-radius: 12px;
	background: var(--fl-primary, #397063);
	color: #fff;
	font-weight: 700;
	font-size: 0.98rem;
	cursor: pointer;
}

.fl-sp-bar__btn:hover {
	background: var(--fl-primary-dark, #2f5c51);
}

/* Панель перекриває нижню мобільну навігацію — піднімаємо над нею. */
@media (max-width: 860px) {
	.fl-sp-bar {
		bottom: var(--fl-tabbar-h, 62px);
	}
}

/* --------------------------------------------------------- Адаптив -------- */

@media (max-width: 1100px) {
	.fl-sp-trust {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	.single-product .wp-block-columns.alignwide {
		flex-direction: column;
	}

	/* Колонки стають одна під одною — фіксовані ширини знімаємо, інакше
	   600px галереї вилазять за екран телефона. */
	.single-product .wp-block-columns.alignwide > .wp-block-column:first-child,
	.single-product .wp-block-columns.alignwide > .wp-block-column:last-child {
		flex: 1 1 auto !important;
		max-width: 100%;
	}

	/* На телефоні висоту диктує саме фото — примусові 420px давали порожню
	   смугу під дрібними знімками. */
	.single-product .wp-block-woocommerce-product-image-gallery {
		min-height: 0;
	}

	/* relative, а не static: липкість тут не потрібна, але підкладка мусить
	   лишатись системою координат для бейджа знижки. */
	.single-product .wp-block-woocommerce-product-image-gallery {
		position: relative;
	}

	/* Селектор повторює вагу woocommerce.css (`.woocommerce div.product …`),
	   інакше його overflow перемагає, стрічка не скролиться і розтягує
	   сторінку за екран телефона. */
	/* !important — блокова обгортка product-details ставить свій overflow
	   пізніше за наш файл, стрічка не скролилась і розтягувала сторінку. */
	.single-product .woocommerce-tabs ul.tabs,
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		flex-wrap: nowrap;
		overflow-x: auto !important;
		scrollbar-width: none;
	}

	.single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
		display: none;
	}

	.single-product .woocommerce-tabs ul.tabs li a {
		white-space: nowrap;
		padding: 11px 14px;
	}

	.fl-sp-trust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.single-product .shop_attributes th {
		width: 46%;
	}
}

@media (max-width: 560px) {
	.single-product form.cart {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.fl-sp-trust {
		grid-template-columns: 1fr;
	}

	.fl-sp-help {
		flex-direction: column;
		align-items: stretch;
	}

	.fl-sp-help__btn {
		justify-content: center;
	}

	.fl-sp-bar__info b {
		display: none;
	}
}