/**
 * Single product page (Appendix A.9).
 *
 * Values copied from the reference `product_style.scss.css` (1rem = 10px).
 * The white card, buttons, alerts and the product card come from nest.css;
 * the `.nest-qty*` stepper base comes from shop.css — this sheet only sets the
 * product-page sizes (30×40 / 50×40) on top of it.
 *
 * The gallery is Flatsome's `product-image-vertical.php` (kept for its
 * flickity slider, thumbnail sync and photoswipe lightbox) restyled into the
 * reference geometry: main image `calc(100% - 130px)` with a 119px thumbnail
 * column on its left; below 768px the column becomes a horizontal strip.
 */

/* --------------------------------------------------------------------------
   Shell (.layout-product / .details-product .bg-shadow)
   -------------------------------------------------------------------------- */
.nest-pdp {
	padding-bottom: 20px;
}

.nest-pdp__card {
	margin-bottom: 20px;
}

.nest-pdp__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.nest-pdp__gallery .row {
	margin: 0;
	position: relative;
}

.nest-pdp__gallery .col {
	padding: 0;
	margin: 0;
}

.nest-pdp__gallery .product-images {
	margin-bottom: 0;
}

.nest-pdp__gallery .woocommerce-product-gallery__wrapper {
	margin-bottom: 10px;
}

.nest-pdp__gallery .product-gallery-slider .slide,
.nest-pdp__gallery .woocommerce-product-gallery__image {
	aspect-ratio: 1;
	position: relative;
	display: block;
	background: #fff;
}

.nest-pdp__gallery .product-gallery-slider .slide a,
.nest-pdp__gallery .woocommerce-product-gallery__image a {
	display: block;
	height: 100%;
}

.nest-pdp__gallery .product-gallery-slider img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-width: 99%;
	max-height: 100%;
	width: auto;
	height: auto;
}

/* Thumbnails (.gallery-thumbs) */
.nest-pdp__gallery .product-thumbnails {
	margin: 10px 0 0;
}

.nest-pdp__gallery .product-thumbnails .col a {
	display: block;
	position: relative;
	aspect-ratio: 1;
	border: 1px solid #ebebeb;
	background: #fff;
	overflow: hidden;
	cursor: pointer;
}

.nest-pdp__gallery .product-thumbnails .col img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

.nest-pdp__gallery .product-thumbnails .col a:hover,
.nest-pdp__gallery .product-thumbnails .is-nav-selected a {
	border-color: var(--mainColor);
}

/* Up/down arrows added by assets/js/product.js. They sit over the thumbnail
   column (which is `position:absolute` inside the gallery row), so `left` is
   half the column width at each breakpoint. Hidden below 768px, where the
   column becomes a horizontal strip. */
.nest-gallery__arrow {
	position: absolute;
	display: none;
	left: 59px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: var(--mainColor);
	color: #fff;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 2px 2px rgba(0, 0, 0, .04);
	cursor: pointer;
	z-index: 2;
	overflow: hidden;
}

.nest-gallery__arrow::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	right: 2px;
	bottom: 2px;
	border: 1px solid #fff;
	opacity: .5;
	transition: opacity .3s cubic-bezier(.37, .01, 0, .98);
	z-index: 10;
}

.nest-gallery__arrow svg {
	width: 10px;
	height: 10px;
	fill: currentColor;
}

.nest-gallery__arrow--prev {
	top: 0;
	transform: translate(-50%, 0) rotate(-90deg);
}

.nest-gallery__arrow--next {
	bottom: 0;
	transform: translate(-50%, 0) rotate(90deg);
}

.nest-gallery__arrow:hover {
	background: var(--subColor);
}

@media (min-width: 768px) {
	.nest-gallery__arrow {
		display: flex;
	}
}

.nest-gallery__arrow[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   Info column (.details-pro)
   -------------------------------------------------------------------------- */
.nest-pdp__title {
	font-size: 25px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 5px;
	text-transform: none;
	color: var(--textColor);
}

.nest-pdp__top {
	display: flex;
	flex-wrap: wrap;
}

.nest-pdp__sku {
	font-size: 14px;
	display: flex;
	gap: 4px;
	margin-right: 15px;
}

.nest-pdp__sku-value {
	color: var(--mainColor);
}

.nest-pdp__meta {
	font-size: 14px;
	border-bottom: 1px solid #dde1ef;
	padding-bottom: 12px;
	margin-bottom: 12px;
}

.nest-pdp__meta-value {
	color: var(--mainColor);
}

.nest-pdp__summary {
	margin-bottom: 20px;
	font-size: 14px;
}

.nest-pdp__summary p {
	margin-bottom: 0;
}

.nest-pdp__summary img {
	display: none;
}

.nest-pdp__summary .rte ul {
	list-style: initial;
	padding-left: 20px;
	margin-bottom: 0;
}

.nest-pdp__info .stock {
	font-size: 14px;
	margin-bottom: 8px;
}

/* Price box (.form-inline .price-box) */
.nest-pdp__info .nest-price {
	padding-bottom: 10px;
	margin: 0;
	display: block;
	line-height: 1.4;
}

.nest-price__special {
	font-size: 23px;
	font-weight: 700;
	color: var(--price);
}

.nest-price__old {
	color: #acacac;
	font-size: 16px;
	margin-left: 4px;
}

.nest-price__old del {
	color: #acacac;
	text-decoration: line-through;
	font-weight: 400;
}

.nest-price__badge {
	color: #fff;
	position: relative;
	bottom: 1px;
	background: #b11111;
	padding: 2px 4px;
	border-radius: 3px;
	font-size: 12px;
	min-width: 20px;
	margin-left: 15px;
	display: inline-block;
}

.nest-price__badge::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -4px;
	transform: translate(0, -50%);
	border-right: 6px solid #b11111;
	border-bottom: 6px solid transparent;
	border-top: 6px solid transparent;
}

.nest-price__old[hidden],
.nest-price__badge[hidden] {
	display: none;
}

/* Variation swatches (.select-swatch .swatch) */
.nest-pdp__form .variations,
.nest-pdp__form .variations tbody,
.nest-pdp__form .variations tr,
.nest-pdp__form .variations td.value {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	margin: 0;
	background: none;
}

.nest-pdp__form .variations th.label,
.nest-pdp__form .variations select,
.nest-pdp__form .woocommerce-variation-price {
	display: none;
}

.nest-swatch-group {
	margin-bottom: 20px;
	font-size: 14px;
}

.nest-swatch-group__label {
	margin-bottom: 8px;
	font-size: 16px;
	color: #444b52;
	display: flex;
	align-items: center;
}

.nest-swatch-group__value {
	font-weight: 600;
	color: var(--mainColor);
	margin-left: 5px;
}

.nest-swatch {
	min-width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ddd;
	background: #fff;
	cursor: pointer;
	white-space: nowrap;
	padding: 0 5px;
	position: relative;
	margin: 0 8px 8px 0;
	text-align: center;
	border-radius: 0;
	line-height: 30px;
	font-size: 13px;
	color: var(--textColor);
}

.nest-swatch.is-active {
	background: var(--mainColor);
	border-color: #ddd;
	color: #fff;
}

/* Gift box (.block-promotion) */
.nest-promo-box {
	padding: 8px;
	border: 1px dashed #b11111;
	background: #fff3f3;
	margin-bottom: 20px;
}

.nest-promo-box__title {
	display: inline-flex;
	align-items: center;
	color: #b11111;
	font-weight: 600;
	margin-bottom: 12px;
	position: relative;
}

.nest-promo-box__title::before {
	content: "";
	width: calc(100% - 28px);
	height: 2px;
	background: #b11111;
	position: absolute;
	top: 100%;
	left: 28px;
}

.nest-promo-box__title svg {
	width: 24px;
	height: 24px;
	margin-right: 6px;
	position: relative;
	top: 4px;
	fill: #b11111;
}

.nest-promo-box__content {
	font-size: 14px;
	font-weight: 500;
}

.nest-promo-box__content p {
	margin: 3px;
}

.nest-promo-box__content ul {
	counter-reset: css-counter 0;
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nest-promo-box__content li {
	padding-left: 20px;
	position: relative;
	counter-increment: css-counter 1;
	margin: 0;
	list-style: none;
}

.nest-promo-box__content li::before {
	content: counter(css-counter) "";
	display: block;
	width: 14px;
	height: 14px;
	background: #b11111;
	color: #fff;
	font-size: 10px;
	line-height: 14px;
	border-radius: 20px;
	text-align: center;
	position: absolute;
	top: 4px;
	left: 0;
}

/* Quantity + CTA row (.boz-form .flex-quantity) */
.nest-pdp__form {
	margin-bottom: 20px;
}

.nest-pdp__qty-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
}

.nest-pdp__qty {
	display: flex;
	align-items: center;
}

.nest-pdp__qty-label {
	margin-right: 8px;
	font-weight: 600;
	font-size: 14px;
}

.nest-pdp .nest-qty {
	display: inline-flex;
	vertical-align: top;
	white-space: nowrap;
	margin: 0;
}

/* Three classes so these win over the unscoped cart/popup base in shop.css,
   which is enqueued after product.css. */
.nest-pdp .nest-qty .nest-qty__btn {
	padding: 0 5px;
	min-width: 30px;
	width: 30px;
	height: 40px;
	min-height: 40px;
	line-height: 38px;
	border: 1px solid #ddd;
	background: #f3f3f3;
	box-shadow: none;
	font-size: 18px;
	color: var(--textColor);
	border-radius: 0;
}

.nest-pdp .nest-qty .nest-qty__btn:hover {
	background: var(--mainColor);
	color: #fff;
	border-color: var(--mainColor);
}

.nest-pdp .nest-qty .nest-qty__input {
	width: 50px;
	max-width: 50px;
	height: 40px;
	border: 1px solid #ddd;
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	text-align: center;
	font-size: 14px;
	color: var(--textColor);
	background: #fff;
	min-height: 40px;
}

.nest-pdp__actions {
	display: flex;
	align-items: center;
	width: auto;
	gap: 12px;
}

.nest-pdp__actions .nest-btn {
	font-size: 16px;
	padding: 0 24px;
	text-align: center;
}

.nest-buy-now:hover {
	background: var(--hover);
	color: #fff;
}

.nest-buy-now:hover::before {
	border-color: #fff;
}

.nest-add-cart:hover {
	background: var(--hover);
	color: #fff;
}

.nest-add-cart:hover::before {
	border-color: #fff;
}

.nest-pdp__actions .nest-btn[disabled],
.nest-pdp__actions .nest-btn.disabled {
	background: #787878;
	color: #fff;
	border: 0;
	cursor: not-allowed;
}

/* Share + wishlist row (.bottom-product) */
.nest-pdp__bottom {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin-top: 30px;
	margin-bottom: 20px;
}

.nest-share {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nest-share li {
	margin: 0;
	list-style: none;
	display: flex;
	align-items: center;
}

.nest-share li.title svg {
	width: 20px;
	height: 20px;
	margin-right: 4px;
	position: relative;
	bottom: 1px;
}

.nest-share li a {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	background: var(--mainColor);
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
}

.nest-share li a svg {
	width: 16px;
	height: 16px;
	fill: #fff;
}

.nest-share li a:hover {
	background: var(--subColor);
}

.nest-pdp__line {
	width: 1px;
	height: 20px;
	margin: 0 4px;
	background: #ddd;
}

/* The heart link is a text link here, not the 36px circle from the card. */
.nest-wish-btn--link {
	display: flex;
	align-items: center;
	font-size: 14px;
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	color: var(--textColor);
	padding: 0;
}

.nest-wish-btn--link::before {
	display: none;
}

.nest-wish-btn--link img,
.nest-wish-btn--link:not(.is-active) img {
	width: 24px;
	height: 24px;
	margin-right: 8px;
	position: relative;
	bottom: 1px;
	filter: none;
}

.nest-wish-btn--link:hover,
.nest-wish-btn--link.is-active {
	background: none;
	color: var(--hover);
}

.nest-wish-btn--link:hover:not(.is-active) img,
.nest-wish-btn--link.is-active img {
	filter: none;
}

/* --------------------------------------------------------------------------
   Coupons card (.product-coupons)
   -------------------------------------------------------------------------- */
.nest-pdp-coupons__title {
	font-size: 20px;
	margin-bottom: 10px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Tabs + sidebar card (.product-review-details / .product-sidebar)
   -------------------------------------------------------------------------- */
.nest-pdp__tabs-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.nest-ptabs__bar {
	display: flex;
	background: #f1f1f1;
	padding: 0;
	margin: 0 0 20px;
	border-bottom: 2px solid var(--mainColor);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.nest-ptabs__bar::-webkit-scrollbar {
	display: none;
}

.nest-ptabs__tab {
	cursor: pointer;
	position: relative;
	margin: 0;
	list-style: none;
}

.nest-ptabs__tab h3 {
	color: #757575;
	padding: 8px 16px;
	margin: 0;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	width: auto;
}

.nest-ptabs__tab h3:hover {
	color: var(--mainColor);
}

.nest-ptabs__tab.is-active {
	background: var(--mainColor);
}

.nest-ptabs__tab.is-active h3 {
	color: #fff;
}

.nest-ptabs__panel {
	opacity: 0;
	visibility: hidden;
	height: 0;
	overflow: hidden;
}

.nest-ptabs__panel.is-active {
	opacity: 1;
	visibility: visible;
	height: auto;
	overflow: visible;
}

/* Description clamp (.tab-float .rte) */
.nest-desc {
	position: relative;
}

.nest-desc__body.has-height {
	height: 775px;
	overflow: hidden;
	transition: height .2s;
}

.nest-desc.is-expanded .nest-desc__body {
	height: auto;
	margin-bottom: 30px;
}

.nest-desc__more {
	position: relative;
	text-align: center;
}

.nest-desc__more::before {
	content: "";
	display: block;
	height: 55px;
	margin-top: -55px;
	position: relative;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .91) 50%, #fff 55%);
}

.nest-desc.is-expanded .nest-desc__more::before {
	display: none;
}

.nest-desc.is-expanded .nest-desc__more-text {
	display: none;
}

.nest-desc:not(.is-expanded) .nest-desc__less-text {
	display: none;
}

.nest-desc__toggle svg {
	width: 12px;
	height: 12px;
	margin-left: 6px;
	fill: currentColor;
}

.nest-desc.is-expanded .nest-desc__toggle svg {
	transform: rotate(180deg);
}

.nest-desc img {
	max-width: 100%;
	height: auto;
}

.nest-desc ul,
.nest-guide-tab ul {
	list-style: initial;
	padding-left: 25px;
}

/* Sidebar: specifications + recently viewed */
.nest-specs {
	margin-bottom: 40px;
}

.nest-specs__title {
	font-size: 20px;
	margin: 0 0 10px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--textColor);
}

.nest-specs table {
	border-collapse: collapse;
	width: 100%;
	text-align: left;
	background: #f9f9f9;
	border: 1px solid #eee;
	margin: 0;
}

.nest-specs table tr:nth-child(odd) {
	background-color: #eee;
}

.nest-specs table th,
.nest-specs table td {
	border: 0;
	padding: 6px 10px;
	font-size: 14px;
	text-align: left;
}

.nest-specs table th {
	width: 126px;
	font-weight: 600;
}

.nest-specs table td p {
	margin-bottom: 0;
}

.nest-viewed__list {
	display: block;
}

.nest-viewed__item {
	display: flex;
	padding: 0 0 4px;
	margin-bottom: 4px;
	border-bottom: 1px solid #ededed;
	background: #fff;
	position: relative;
	width: 100%;
}

.nest-viewed__item:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.nest-viewed__thumb {
	width: 80px;
	flex: none;
	display: block;
}

.nest-viewed__thumb img {
	width: 100%;
	height: auto;
}

.nest-viewed__info {
	width: calc(100% - 80px);
	padding-left: 10px;
	margin: 5px 0;
	position: relative;
}

.nest-viewed__name {
	font-size: 14px;
	font-weight: 500;
	margin: 0 0 6px;
	line-height: 1.4;
	text-transform: none;
}

.nest-viewed__name a {
	color: var(--textColor);
}

.nest-viewed__name a:hover {
	color: var(--hover);
}

.nest-viewed__price {
	line-height: 23px;
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--price);
}

.nest-viewed__price del {
	text-decoration: line-through;
	font-size: 14px;
	color: #9e9e9e;
	font-weight: 300;
}

.nest-viewed__price ins {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Related products (.product-swipers)
   -------------------------------------------------------------------------- */
.nest-pdp__related-title {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.4;
}

.nest-pdp__related-title a {
	color: var(--textColor);
}

.nest-pdp__related-title a:hover {
	color: var(--hover);
}

.nest-pdp__related-slider {
	margin: 0 -10px;
}

.nest-pdp__related-slider .col {
	padding: 0 10px 5px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   ≥768 — vertical thumbnail column beside the main image
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.nest-pdp__gallery .col.large-10 {
		width: calc(100% - 130px);
		max-width: none;
		flex-basis: auto;
		margin-left: auto;
	}

	.nest-pdp__gallery .vertical-thumbnails {
		position: absolute;
		left: 0;
		top: 0;
		width: 119px;
		max-width: none;
		flex-basis: auto;
		height: 100%;
		padding: 0 4px;
		overflow-x: hidden;
		overflow-y: auto;
		scrollbar-width: none;
	}

	.nest-pdp__gallery .vertical-thumbnails::-webkit-scrollbar {
		display: none;
	}

	/* Three classes to beat Flatsome's `.row .row-small:not(.row-collapse)`
	   negative gutters, which would push the cells outside the column. */
	.nest-pdp__gallery .vertical-thumbnails .product-thumbnails.row-small {
		margin: 0;
	}

	/* Flatsome stacks the thumbnail cells only from 850px up; the reference
	   switches at 768px, so the same declarations are applied from there. */
	.nest-pdp__gallery .vertical-thumbnails .col {
		position: relative !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 0 !important;
		padding: 0 0 10px !important;
		margin-left: 0;
	}

	.nest-pdp__gallery .vertical-thumbnails .flickity-viewport,
	.nest-pdp__gallery .vertical-thumbnails .flickity-slider {
		height: auto !important;
		overflow: visible !important;
		transform: none !important;
		/* Flickity absolutely positions the slider, which would collapse the
		   column's scroll height and leave the extra thumbnails unreachable. */
		position: relative !important;
	}
}

/* --------------------------------------------------------------------------
   ≥992 — two columns, sticky gallery + sticky sidebar
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
	.nest-pdp__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 20px;
	}

	.nest-pdp__gallery-sticky {
		position: sticky;
		top: 80px;
	}

	.nest-pdp__tabs-row {
		grid-template-columns: 66.6667% minmax(0, 1fr);
		gap: 0;
	}

	.nest-pdp__tabs-row--full {
		grid-template-columns: minmax(0, 1fr);
	}

	.nest-pdp__tabs {
		border-right: 1px solid #eee;
		padding-right: 30px;
	}

	.nest-pdp__tabs-row--full .nest-pdp__tabs {
		border-right: 0;
		padding-right: 0;
	}

	.nest-pdp__side {
		padding-left: 30px;
	}

	.nest-pdp__side-sticky {
		position: sticky;
		top: 60px;
		z-index: 1;
	}
}

/* --------------------------------------------------------------------------
   992–1199 / 768–991 — narrower thumbnail column (reference widths)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
	.nest-pdp__gallery .col.large-10 {
		width: calc(100% - 102px);
	}

	.nest-pdp__gallery .vertical-thumbnails {
		width: 92px;
	}

	.nest-gallery__arrow {
		left: 46px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.nest-pdp__gallery .col.large-10 {
		width: calc(100% - 126px);
	}

	.nest-pdp__gallery .vertical-thumbnails {
		width: 116px;
	}

	.nest-gallery__arrow {
		left: 58px;
	}
}

/* --------------------------------------------------------------------------
   ≤991
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
	.nest-pdp__actions .nest-btn {
		padding: 0 10px;
		font-size: 14px;
	}

	.nest-pdp__bottom {
		gap: 8px;
		justify-content: flex-start;
	}

	.nest-pdp__line {
		height: 24px;
		margin: 0 8px;
	}

	.nest-specs table th {
		width: 145px;
	}
}

/* --------------------------------------------------------------------------
   ≤767 — horizontal thumbnail strip, full-width buttons, scrolling slider
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.nest-pdp__title {
		font-size: 20px;
		line-height: 1.3;
	}

	.nest-pdp__qty-row {
		gap: 12px;
	}

	.nest-pdp__actions {
		width: 100%;
	}

	.nest-pdp__actions .nest-btn {
		width: 50%;
		padding: 0 8px;
	}

	.nest-pdp__gallery .vertical-thumbnails {
		position: static;
		width: 100%;
		height: auto;
		padding: 0;
	}

	.nest-pdp__gallery .product-thumbnails .col {
		padding: 0 5px;
	}

	.nest-pdp__related-slider .col {
		max-width: 60%;
		flex-basis: 60%;
	}

	.nest-pdp-coupons__title,
	.nest-pdp__related-title,
	.nest-specs__title {
		font-size: 18px;
	}
}