.wapf {
	display: none;
}

.page-title p {
    margin: 0;
    font-size: 36px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 120%;
    text-align: left;
    color: #fff;
}

.page-title a,
.page-title a:hover,
.page-title a:visited {
	text-decoration: none;
	color: #fff;
}



.product .container {
	display: block;
}

.product .container .single-product-row {
	display: grid;
	grid-template-columns: 560px 1fr;
	gap: 90px;

	padding-bottom: 50px;
}

.page-title.container {
    display: flex;
    flex-direction: column;
    gap: 17px;
    justify-content: flex-start;
    align-items: flex-start;

    padding-top: 0;
    padding-bottom: 50px !important;
}


.single-product-images {
    display: flex;
    flex-direction: column;

    gap: 16px;
}

.summary {
	display: flex;
	flex-direction: column;
	flex: 1 1 calc(55% - 30px);

	margin: 0;
	padding-right: 6em;
}

.single-product-images .product-breadcrumbs {
	display: none;
}

.product-breadcrumbs .breadcrumb-post-title {
	color: #E30613;
}

.thumbnails-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 15%;
}

.thumbnail-carousel {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    width: 100%;
    /*max-height: 300px;*/
    max-height: unset;
    overflow-y: auto; /* Вертикальне прокручування */
}

.carousel-thumbnail {
	display: flex;
}

.carousel-thumbnail img {
    width: 100%;
    cursor: pointer;
}

.thumb-nav {
	width: 100%;
    background: #FDF7ED;
    border: none;
    cursor: pointer;
    padding: 20px 10px;
    display: none; /* За замовчуванням приховано, буде відображено лише при більшій кількості зображень */
}

.main-image-column {
    flex-basis: calc(85% - 10px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.main-image {
	display: flex;
	width: 100%;
}

.main-image img {
	min-width: 560px;
    width: 100%;
    height: 100%;
    object-fit: cover;

    aspect-ratio: 1/1;
}


/* --- Ваш існуючий код (без змін) --- */
.product-image-carousel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative; 
}
.product-image-carousel-wrapper { width: 100%; }
.carousel-cell {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
}
.carousel-cell img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
}
/* --- Кінець існуючого коду --- */


/* --- ОНОВЛЕНІ СТИЛІ --- */

/* 1. Новий контейнер для кнопок і мініатюр */
.product-image-nav-container {
    display: flex;
    align-items: center;
    justify-content: center; /* Центруємо вміст */
    width: 100%;
    padding: 16px 0;
    box-sizing: border-box;
}

/* 2. Оновлені кнопки "Вліво" / "Вправо" */
.carousel-button {
    /* Розміри, як у мініатюри */
    width: 80px; 
    height: 80px;
    
    /* Забираємо старе позиціонування */
    position: static;
    transform: none;
    
    /* Нові стилі */
    background: #E30613;
    border: none;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
    z-index: 10;
    display: flex; /* Для центрування SVG всередині */
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Щоб кнопки не стискалися */
}

/* 3. Стилі для SVG стрілок (без змін) */
.carousel-button svg {
    width: 30px;
    height: 30px;
    fill: #fff;
}

/* 4. Контейнер для мініатюр (зміни) */
.product-image-nav-wrapper {
    /* Займає вільний простір між кнопками */
    flex: 1; 
    min-width: 0; /* Дозволяє Flickity коректно зменшуватись */
}

/* 5. Комірка мініатюри (без змін) */
.nav-cell {
    width: 80px;
    height: 80px;
    margin: 0;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.nav-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
}

/* 6. Активна мініатюра (без змін) */
/*.nav-cell.is-selected {
    opacity: 1;
    border: 2px solid #E30613;
}*/


.product-tags {
	top: 24px;
	left: 24px;
}

.product-tags .tag {
	padding: 16px;

	font-weight: 700;
	text-transform: uppercase;
}


.product-breadcrumbs, .product-breadcrumbs a {
	font-size: 18px;
	color: #fff;
	text-decoration: none;
}

.product-info-top {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.product-info-middle {
	display: flex;
}

.product-info-bottom {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.product-title h1 {
	font-size: 36px;
	line-height: 110%;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;

	margin: 0;
}

.product-full-description,
.product-weight {
	font-size: 20px;
	font-weight: 400;
	line-height: 120%;

	color: #fff;
}

.product-full-description p {
	margin: 0;
}

.important-note {
	display: flex;
	flex-direction: column;

	gap: 8px;

	margin-top: 28px;
	margin-bottom: 12px;
}

.note-title {
	display: flex;
	gap: 8px;
	align-items: center;

	font-size: 20px;
	color: #fff;
}

.note-title span {
	font-size: 24px;
	font-weight: 700;
	line-height: 120%;
	color: #fff;

	text-transform: uppercase;
}

.note-value {
	font-size: 20px;
	font-weight: 400;
	line-height: 120%;
	color: #fff;

	display: flex;
	flex-direction: column;
	row-gap: 5px;
}

.single-product-price p {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 35px;
	font-weight: 400;

	margin-top: 35px;
	margin-bottom: 17px;
}

.single-product-price p .amount {
	font-size: 36px;
    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase;
    color: #fff;
}

.single-product-price p span.stock-status {
	font-size: 20px;
	font-weight: 400;
	color: #fff;

	text-transform: lowercase;
}

.product-type-variable.woovr-active .single-product-price .price span.price-html {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
}

.woovr-variations {
	display: flex;
	flex-direction: row;
	gap: 35px;

	justify-content: flex-start;

	margin-bottom: 20px;
}

.woovr-variations .woovr-variation {
	background: #FFFFFF0A;
	border: 1px solid #FFFFFF14;

	transition: border-color 100ms ease-in;

	padding: 8px 12px;

	width: fit-content;
	min-width: 120px;

	margin: 0 !important;
}

.woovr-variation-selector {
	display: none !important;
}

.woovr-variations .woovr-variation:hover, 
.woovr-variations .woovr-variation:focus,
.woovr-variations .woovr-variation.woovr-variation-active {
	border: 1px solid #E30613;
	background-color: #FFFFFF0A !important;
}

.woovr-variations .woovr-variation > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.woovr-variation-name label {
	font-size: 20px;
	font-weight: 400;
    line-height: 120%;
    color: #fff;
}
.woovr-variation-name {
    margin-bottom: 8px;
}

.woovr-variation-price .amount {
	font-size: 24px;
	font-weight: 700;
    line-height: 120%;
    color: #fff;
}


.woovr-variation-radio .woovr-variation-info .woovr-variation-price, .woovr-variation-radio .woovr-variation-info .woovr-variation-availability {
	margin: 0 !important;
}

/* Приховуємо стандартний вигляд радіо-кнопки */
.woovr-variation-selector input[type="radio"] {
    accent-color: #fff;
}

.woocommerce-variation-add-to-cart.variations_button, .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.woocommerce-variation-add-to-cart.variations_button .shoco-btn, .woocommerce-variation-add-to-cart .shoco-btn {
	font-size: 20px;
	text-transform: inherit;
	padding: 12px 24px;
}

.woocommerce-variation-add-to-cart.variations_button .shoco-btn svg, .woocommerce-variation-add-to-cart .shoco-btn svg {
	width: 20px;
	height: 20px;
}

/*	.wapf {
	display: none;
}*/

.image-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;

	background: #FDF7ED;
	padding: 25px 30px;

	max-height: 540px;

	width: calc(15% - 10px);
}

.image-placeholder span {
	writing-mode: sideways-lr;
	text-align: center;

	font-family: Adobe Handwriting Tiffany;
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
	color: #fff;

	text-transform: uppercase;
}





@media (max-width: 767px) {


	.container.product-content {
		flex-direction: column;
		padding: 0;
	}

	.page-title {
		padding: 15px 10px;
	}

	.page-title svg {
		width: 100%;
		height: 20px;
	}

	.page-title p {
		font-size: 36px;
	}

	.product .container .single-product-row {
		padding: 0 15px;

		grid-template-columns: 1fr;
		gap: 35px;
		padding-bottom: 55px;

		padding-left: 0;
		padding-right: 0;
	}
	.page-title.container {
		padding-bottom: 16px !important;
		gap: 9px;

		padding-left: 15px;
		padding-right: 15px;
	}

	.summary .product-breadcrumbs {
		display: none;
	}

	.product-image-nav-container {
		padding: 16px 15px;
	}
	

	.summary {
		padding: 0 15px;
	}

	.single-product-images {
		gap: 10px;
	}

	.single-product-images .product-breadcrumbs {
		display: flex;
		flex-wrap: wrap;
		gap: 3px;
	}

	.single-product-images .product-breadcrumbs, .single-product-images .product-breadcrumbs a  {
		font-size: 11px;
	}

	.nav-cell, .carousel-button {
		width: 56px;
		height: 56px;
	}

	.carousel-button svg {
		width: 18px;
	}

	.product-desc {
		padding-top: 20px;
	}

	.product-tags {
		top: 24px;
		left: 16px;
	}

	.product-info-top {
		gap: 16px;
	}

	.product-info-bottom {
		margin-top: 20px;
	}

	.product-title h1 {
		font-size: 36px;
		font-weight: 700;
	}

	.product-full-description, .product-weight {
		font-size: 20px;
	}

	.single-product-price p {
		margin: 0;
	}

	.product-desc .amount, .product-desc .price {
		font-size: 25px;
	}

	.single-product-price p span.stock-status {
		font-size: 20px;
	}

	.note-value {
		font-size: 20px;
	}

	.woovr-variations {
		gap: 16px;

		flex-direction: column;

		padding: 14px 0 !important;
	}

	.woovr-variations .woovr-variation {
		padding: 15px 10px;

		min-width: unset;
		width: 100%;
	}

	.woovr-variation-name label, .woovr-variation-price .amount {
		display: flex;
		font-size: 15px;
	}

	.woovr-variations .woovr-variation > div {
		padding: 0;
	}
	.woocommerce-variation-add-to-cart.variations_button .shoco-btn, .woocommerce-variation-add-to-cart .shoco-btn {
		font-size: 20px;
		padding: 12px 19px;
	}

	.woocommerce-variation-add-to-cart.variations_button .shoco-btn svg, .woocommerce-variation-add-to-cart .shoco-btn svg {
		width: 9px;
		height: 9px;
	}

	.image-placeholder {
		display: none;
	}

}

/* Оверлей */
.popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5); /* Напівпрозорий фон */
	display: none; /* Сховати оверлей за замовчуванням */
	z-index: 1000;
	overflow: hidden; /* Забороняє скролити основну сторінку */
}

body.popup-open {
    overflow: hidden;
}

/* Кнопка закриття поп-апа */
.popup-close {
    position: absolute;
    top: 28px;
    right: 40px;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
}

/* Поп-ап */
.popup-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 85%;
	max-width: 1280px;
	max-height: 80vh; /* Максимальна висота 80% від висоти екрана */
	background: #1D1D1B;
	z-index: 1001;
	padding: 40px 24px;

	display: flex;
	flex-direction: column;

	row-gap: 20px;
}


.popup-container h2 {
	font-size: 24px;
	font-weight: 700;
	color: #fff;

	text-align: center;
	text-transform: uppercase;

	margin: 0;
}

.woo-apf-addon-total-container {
	position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 16px 24px 40px;

    background: linear-gradient(360deg, rgba(29, 29, 27, 0.85) 36%, rgba(29, 29, 27, 0.1) 86.05%);
    backdrop-filter: blur(16px);

    display: flex;
    flex-direction: column;
    gap: 16px;
}


.woo-apf-addon-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: auto;
	grid-row-gap: 58px;
	grid-column-gap: 33px;

    overflow: auto;
    padding-bottom: 140px;
}

.apf-addon-item {
	display: flex;
	flex-direction: column;
	row-gap: 16px;
	justify-content: flex-start;
}

.apf-addon-item img {
	aspect-ratio: 1/1;
	object-fit: cover;
}

.addon-inner-content {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.addon-inner-content h4 {
	margin: 0;

	font-size: 24px;
	font-weight: 700;
	line-height: 120%;
	text-transform: uppercase;
	color: #fff;
}

.addon-inner-content h4 span {
	font-size: 18px;
	font-weight: 500;
	line-height: 100%;

	color: #E30613;

	display: block;
	margin-top: 8px;
}

.addon-inner-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    justify-content: space-between;
}

.woo-apf-addon-total {
	font-size: 20px;
	font-weight: 600;
	line-height: 120%;

	color: #fff;
	text-transform: uppercase;
	text-align: center;
}

.woo-apf-final-btn {
	display: flex;
	justify-content: center;
}

.woo-apf-final-btn .shoco-btn {
    padding: 12px 24px;
    font-size: 20px;
}

.quantity-increase svg, 
.quantity-decrease svg {
    pointer-events: none;
}

@media (max-width:767px) {
	.popup-close {
		top: 10px;
		right: 13px;
	}

	.popup-container {
		width: 100%;
		height: 100%;
		max-height: 100vh;

		padding: 40px 24px;
		row-gap: 20px;
	}

	.woo-apf-addon-list {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 7px;
		row-gap: 24px;
	}

	.woo-apf-addon-total-container {

	}

	.addon-inner-content h4 {
		font-size: 12px;
		font-weight: 400;
	}

	.woo-apf-addon-total {
		font-size: 17px;
	}

	.woo-apf-final-btn .shoco-btn {
	    padding: 12px 35px;
	    font-size: 12px;
	}

	.woo-apf-final-btn .shoco-btn svg {
		width: 11px;
		height: 11px;
	}
}