/* ==========================================================
   1. NAVBAR LOGO — CENTER ON DESKTOP
   ========================================================== */

   @media (min-width: 1120px) {
	.navbar-primary .navbar {
		position: relative;
	}
	.navbar-primary .navbar .navbar-brand {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
		padding: 0;
		z-index: 10;
	}
}


/* ==========================================================
   2. ATTRIBUTE SWATCHES
   ========================================================== */

.csco-swatches-active .variations select {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
	overflow: hidden;
}

.woocommerce div.product form.cart table.variations {
	width: 100%;
	border: none;
	border-collapse: collapse;
	margin-bottom: 0;
}
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th {
	padding: 0 0 0.5rem 0;
	border: none;
	vertical-align: middle;
	background: transparent;
}
.woocommerce div.product form.cart table.variations .label {
	width: auto;
	padding-right: 1rem;
	white-space: nowrap;
}
.woocommerce div.product form.cart table.variations .label label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #999;
	margin: 0;
}

.csco-swatch-container {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin-top: 6px;
}

.csco-swatch-item.csco-swatch-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid #e2e2e2;
	border-radius: 2px;
	cursor: pointer;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	background: #fff;
	color: #222;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
	user-select: none;
	white-space: nowrap;
	line-height: 1;
}
.csco-swatch-item.csco-swatch-text:hover { border-color: #222; }
.csco-swatch-item.csco-swatch-text.selected {
	background: #222;
	color: #fff;
	border-color: #222;
}

.csco-swatch-item.csco-swatch-image {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 2px;
	border: 1px solid #e2e2e2;
	border-radius: 2px;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.15s;
	user-select: none;
}
.csco-swatch-item.csco-swatch-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.csco-swatch-item.csco-swatch-image:hover { border-color: #222; }
.csco-swatch-item.csco-swatch-image.selected {
	border-color: #222;
	box-shadow: 0 0 0 1px #222;
}

.csco-swatch-item.disabled {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

/* Hide selected value label under swatches */
.csco-swatch-selected-label {
	display: none !important;
}

/* Hide native WooCommerce selected value text */
.woocommerce div.product form.cart table.variations td.value > .csco-swatch-selected-label,
.woocommerce div.product form.cart table.variations .woocommerce-variation-add-to-cart-enabled ~ *,
p.woocommerce-variation-availability + * {
	display: none !important;
}

/* Hide Clear / reset_variations link */
.woocommerce div.product form.cart .reset_variations {
	display: none !important;
}


/* ==========================================================
   3. HOMEPAGE — ограничение ширины контента
   ========================================================== */

.home .entry-content {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}


/* ==========================================================
   4. PRODUCT GALLERY — MOBILE
   ========================================================== */

/* Desktop: no zoom icon (click image opens gallery) */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	display: none !important;
}

@media (max-width: 767px) {

	/* Галерея — полная ширина; WC ставит opacity:0 до init flexslider — на мобиле
	   показываем Owl, поэтому принудительно делаем контейнер видимым. */
	.woocommerce div.product .woocommerce-product-gallery {
		width: 100% !important;
		float: none !important;
		margin-bottom: 0 !important;
		position: relative;
		overflow: hidden;
		opacity: 1 !important;
		visibility: visible !important;
	}

	/* ВАЖНО: Owl (.product-gallery-wrapper) рендерится ВНУТРИ __wrapper
	   (хук woocommerce_product_thumbnails в product-image.php).
	   Нельзя скрывать весь __wrapper — иначе на мобиле пропадает вся галерея. */
	.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
		display: block !important;
		width: 100% !important;
	}

	.woocommerce div.product div.images {
		width: 100% !important;
		float: none !important;
		margin-bottom: 1rem !important;
	}

	/* Описание — под галереей */
	.woocommerce div.product .summary {
		width: 100% !important;
		float: none !important;
		clear: both;
	}

	/* Скрываем все фото в стандартном WC-враппере:
	   на мобиле галерею показывает Owl carousel (product-gallery-wrapper),
	   который теперь содержит главное фото + все фото галереи. */
	.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
		display: none !important;
	}

	/* Скрываем flex-viewport (WC стандартный слайдер) на мобиле */
	.woocommerce-product-gallery .flex-viewport {
		display: none !important;
	}

	/* Скрываем стандартные миниатюры WC (ol.flex-control-nav) на мобиле */
	.woocommerce-product-gallery .flex-control-nav {
		display: none !important;
	}

	/* Убираем zoom иконку на мобиле */
	.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
		display: none !important;
	}

	/* Owl carousel — единственный видимый блок галереи на мобиле */
	.woocommerce-product-gallery__wrapper .product-gallery-wrapper {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: 100% !important;
		margin-top: 0 !important;
		overflow: hidden;
		min-height: 1px;
	}

	.product-gallery-wrapper .owl-carousel {
		width: 100% !important;
		display: block !important;
		/* Не перехватываем вертикальный скролл */
		touch-action: pan-y !important;
	}

	/* Stage-outer — только overflow/ширина. НЕ трогаем .owl-stage (float + transform
	   из style.css) — display:flex и transition на stage ломают расчёт ширины Owl
	   и после refresh страницы слайды становятся невидимыми. */
	.product-gallery-wrapper .owl-stage-outer {
		overflow: hidden !important;
		width: 100% !important;
	}

	/* Картинка — на всю ширину слайда */
	.product-gallery-wrapper .owl-item img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		display: block !important;
	}

	/* Dots навигация */
	.product-gallery-wrapper .owl-dots {
		display: flex !important;
		justify-content: center !important;
		gap: 8px !important;
		margin-top: 14px !important;
		margin-bottom: 4px !important;
	}

	.product-gallery-wrapper .owl-dots .owl-dot {
		display: flex !important;
		padding: 4px !important;
	}

	.product-gallery-wrapper .owl-dots .owl-dot span {
		display: block !important;
		width: 7px !important;
		height: 7px !important;
		border-radius: 50% !important;
		background: #ccc !important;
		transition: background 0.2s !important;
	}

	.product-gallery-wrapper .owl-dots .owl-dot.active span {
		background: #222 !important;
	}

	/* Стрелки на мобиле не нужны */
	.product-gallery-wrapper .owl-nav {
		display: none !important;
	}

}

/* Десктоп: подсветка выбранной миниатюры в нижней галерее */
@media (min-width: 768px) {

	/* Dots навигация: больше отступ от миниатюр (только десктоп) */
	.woocommerce .product-gallery-wrapper .owl-dots {
		margin-top: 22px !important;
		margin-bottom: 10px !important;
	}

	.woocommerce .product-gallery-wrapper .owl-item.csco-thumb-active .woocommerce-product-gallery__image img {
		opacity: 1;
		outline: 2px solid #111;
		outline-offset: -2px;
	}

	.woocommerce .product-gallery-wrapper .owl-item:not(.csco-thumb-active) .woocommerce-product-gallery__image img {
		opacity: 0.72;
	}

	.woocommerce .product-gallery-wrapper .owl-item .woocommerce-product-gallery__image img {
		transition: opacity 0.2s ease, outline 0.2s ease;
	}

}

/* SALE badge — якорь на блоке изображений */
.woocommerce div.product div.images {
	position: relative;
}

.woocommerce div.product div.images span.onsale {
	z-index: 20;
	left: 0.75rem;
	top: 0.75rem;
	margin: 0;
}