/* ==========================================================================
   Single Product Page — Lepapa Theme
   ========================================================================== */

/* Full-page light-grey background on single product (including header) */
body.single-product {
	background-color: var(--color-light-grey);
	overflow-x: hidden;
}

body.single-product .site-header {
	background-color: var(--color-light-grey);
}

body.single-product .site {
	overflow-x: hidden;
}

/* Override .site-main on single product — let .single-product-page handle layout */
body.single-product .site-main {
	max-width: none;
	padding: 0;
}

/* Page wrapper — 40px side padding on desktop (Figma spec) */
.single-product-page {
	padding: 0 40px !important;
	width: 100%;
	overflow-x: hidden;
}

/* Two-column layout
   ========================================================================== */

.single-product__layout {
	display: flex;
	gap: 24px;
	position: relative;
}

/* Gallery — left column
   ========================================================================== */

.single-product__gallery-wrap {
	flex: 1;
	min-width: 0;
}

.single-product__gallery {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.single-product__gallery-item {
	height: 638px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 32px clamp(40px, 21.7%, 221px) 33px clamp(40px, 21.7%, 220px);
}

.single-product__gallery-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.single-product__scroll-indicator {
	display: flex;
	justify-content: center;
	padding: 24px 0;
	color: var(--color-black);
	position: sticky;
	bottom: 24px;
}

/* Gallery slide indicators (mobile only) */
.single-product__gallery-indicators {
	display: none;
}

/* Info panel — right column (sticky)
   ========================================================================== */

.single-product__info {
	width: 322px;
	flex-shrink: 0;
}

.single-product__info-inner {
	position: sticky;
	top: 250px;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

/* Form — wraps product info + button */
.single-product__form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Top block — title row + colors */
.single-product__top-block {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Title row — name/price group + save icon */
.single-product__title-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.single-product__name-price {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 185px;
}

.single-product__title {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	margin: 0;
}

.single-product__save {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--color-text);
	flex-shrink: 0;
	transition: opacity var(--transition-fast);
}

.single-product__save:hover {
	opacity: 1;
}

/* Price */
.single-product__price {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
}

.single-product__price del {
	color: var(--color-dark-grey);
	margin-right: 8px;
}

.single-product__price ins {
	text-decoration: none;
}

/* Size selector
   ========================================================================== */

.single-product__size-select {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

.single-product__size-trigger {
	display: flex;
	height: 17px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	cursor: pointer;
	user-select: none;
}

.single-product__size-divider {
	width: 100%;
	height: 1px;
	background: var(--color-black);
}

.single-product__size-label {
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0;
	line-height: 1;
}

.single-product__size-chevron {
	transition: transform var(--transition-fast);
}

.single-product__size-select[data-open="true"] .single-product__size-chevron {
	transform: rotate(180deg);
}

.single-product__size-options {
	display: none;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-product__size-select[data-open="true"] .single-product__size-options {
	display: flex;
}

.single-product__size-option {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 4px 0;
	color: var(--color-black);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	line-height: 120%;
	cursor: pointer;
}

.single-product__size-option--selected {
	font-weight: 600;
}

.single-product__size-option--oos {
	color: var(--color-dark-grey);
	text-decoration: line-through;
	pointer-events: none;
}

/* Color swatches
   ========================================================================== */

.single-product__colors {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.single-product__color-swatches {
	display: flex;
	gap: 8px;
}

.single-product__color-swatch {
	width: 20px;
	height: 20px;
	border: 1px solid var(--color-border);
	display: inline-block;
	cursor: pointer;
	position: relative;
}

.single-product__color-swatch::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 1px;
	background: var(--color-black);
	opacity: 0;
	transition: opacity var(--transition-fast);
}

.single-product__color-swatch--active::after {
	opacity: 1;
}

.single-product__color-label {
	font-size: var(--font-size-body1);
	color: var(--color-text);
}

/* Add to cart button
   ========================================================================== */

.single-product__add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	background: var(--color-black);
	color: var(--color-white);
	border: 1px solid var(--color-black);
	border-radius: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0;
	cursor: pointer;
	transition: all var(--transition-fast);
}

.single-product__add-btn:hover {
	background: var(--color-white);
	color: var(--color-black);
	border-color: var(--color-black);
}

.woocommerce button.single-product__add-btn.button:active,
.single-product__add-btn:active {
	background: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
}

.single-product__add-btn:disabled {
	background: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
	cursor: default;
}

.single-product__add-btn--error {
	border-color: #B22222;
}

/* Accordions
   ========================================================================== */

.single-product__accordions {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.single-product__accordion-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--color-text);
}

.single-product__accordion-icon {
	display: flex;
	align-items: center;
	line-height: 1;
}

.single-product__accordion-body {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
	padding-top: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--color-text);
}

.single-product__accordion-body p {
	margin: 0;
}

.single-product__accordion[data-open="true"] .single-product__accordion-body {
	opacity: 1;
	padding-top: 12px;
}

.single-product__accordion-icon svg {
	display: block;
}

.single-product__accordion-icon-v {
	transform-origin: 12px 12px;
	transition: transform 0.3s ease;
}

.single-product__accordion[data-open="true"] .single-product__accordion-icon-v {
	transform: rotate(90deg);
}

/* Collection Section
   ========================================================================== */

.single-product__collection {
	margin: 80px -40px 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow: hidden;
}

.single-product__collection-gallery {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	margin: 0;
	padding: 0 40px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.single-product__collection-gallery::-webkit-scrollbar {
	display: none;
}

.single-product__collection-gallery.is-dragging {
	user-select: none;
}

.single-product__collection-photo {
	width: 437px;
	height: 536px;
	flex-shrink: 0;
	background-color: var(--color-white);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.single-product__collection-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	user-drag: none;
}

/* On desktop: gallery first, then header, then desc (source order: header, gallery-wrap, desc) */
.single-product__collection-gallery-wrap {
	display: contents;
}

.single-product__collection-gallery {
	order: -1;
	margin-bottom: 38px;
}

.single-product__collection-indicators {
	display: none;
}

.single-product__collection-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40px;
}

.single-product__collection-title {
	font-size: var(--font-size-h2);
	font-weight: 500;
	margin: 0;
}

.single-product__collection-desc {
	font-size: var(--font-size-body1);
	line-height: var(--line-height-body1);
	color: var(--color-text);
	max-width: 600px;
	margin: 0;
	padding: 0 40px;
}

.single-product__collection-link {
	font-size: var(--font-size-body1);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.single-product__collection-link:hover {
	opacity: 1;
}

/* Desktop: show link below desc, hide link in header */
.single-product__collection-link--desktop {
	align-self: flex-start;
	padding: 0 40px;
}

.single-product__collection-link--mobile {
	display: none;
}

/* Related Products
   ========================================================================== */

.single-product__related {
	margin: 80px -40px 0;
	padding: 0 0 80px;
	overflow: hidden;
}

.single-product__related-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32px;
	padding: 0 40px;
}

.single-product__related-title {
	font-size: var(--font-size-h2);
	font-weight: 500;
	margin: 0;
}

.single-product__related-link {
	font-size: var(--font-size-accent);
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.single-product__related-link:hover {
	opacity: 0.7;
}

.single-product__related-grid {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0 40px;
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.single-product__related-grid::-webkit-scrollbar {
	display: none;
}

/* Related card — simplified product card (image + title + price) */
.related-card {
	display: flex;
	flex-direction: column;
	width: 390px;
	min-width: 390px;
	flex-shrink: 0;
}

.related-card__image {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 390 / 520;
	overflow: hidden;
	background: var(--color-white);
}

.related-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.related-card__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 12px;
}

.related-card__title {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--color-text);
	text-decoration: none;
}

.related-card__price {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--color-text);
}

/* Responsive
   ========================================================================== */

@media (max-width: 1200px) {
	.single-product__collection-gallery {
		flex-wrap: wrap;
	}

	.single-product__collection-photo {
		width: calc(50% - 12px);
		height: auto;
		aspect-ratio: 437 / 536;
	}
}

@media (max-width: 1024px) {
	.single-product__layout {
		flex-direction: column;
	}

	.single-product__info {
		width: 100%;
	}

	.single-product__info-inner {
		position: static;
	}

	.single-product__gallery-item {
		height: auto;
		aspect-ratio: 1014 / 638;
	}

	.single-product__related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	/* Full-width page — individual sections handle own padding */
	.single-product-page {
		padding: 0 !important;
	}

	/* Gallery — horizontal slider with snap */
	.single-product__gallery-wrap {
		position: relative;
	}

	.single-product__gallery {
		flex-direction: row;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 0;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.single-product__gallery::-webkit-scrollbar {
		display: none;
	}

	.single-product__gallery-item {
		min-width: 100%;
		width: 100%;
		height: auto;
		aspect-ratio: 440 / 485;
		scroll-snap-align: start;
		flex-shrink: 0;
		padding: 0;
	}

	.single-product__gallery-img {
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		object-fit: cover;
	}

	.single-product__scroll-indicator {
		display: none;
	}

	/* Gallery indicators */
	.single-product__gallery-indicators {
		display: flex;
		justify-content: center;
		gap: 4px;
		position: absolute;
		bottom: 16px;
		left: 0;
		right: 0;
		z-index: 2;
		pointer-events: none;
	}

	.single-product__gallery-indicator {
		width: 24px;
		height: 2px;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 1px;
	}

	.single-product__gallery-indicator--active {
		background: #fff;
	}

	/* Info section */
	.single-product__info {
		padding: 0 24px;
	}

	.single-product__info-inner {
		gap: 24px;
	}

	.single-product__form {
		gap: 16px;
	}

	.single-product__top-block {
		gap: 12px;
	}

	.single-product__name-price {
		width: auto;
		flex: 1;
		min-width: 0;
	}


	/* Accordions */
	.single-product__accordions {
		gap: 16px;
	}

	.single-product__accordion-body {
		padding-top: 8px;
	}


	/* Collection section */
	.single-product__collection {
		margin: 40px 0 0;
		gap: 16px;
	}

	.single-product__collection-header {
		padding: 0 24px;
	}

	.single-product__collection-title {
		font-size: 14px;
	}

	.single-product__collection-link {
		font-size: 12px;
	}

	/* Gallery wrap — block on mobile for indicator positioning */
	.single-product__collection-gallery-wrap {
		display: block;
		position: relative;
	}

	.single-product__collection-gallery {
		flex-direction: row;
		flex-wrap: nowrap;
		order: 0;
		position: static;
		width: 100%;
		left: auto;
		transform: none;
		padding: 0;
		gap: 0;
		margin-bottom: 0;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.single-product__collection-photo {
		width: 100%;
		min-width: 100%;
		flex-shrink: 0;
		height: auto;
		aspect-ratio: 440 / 536;
		scroll-snap-align: start;
	}

	/* Collection slide indicators */
	.single-product__collection-indicators {
		display: flex;
		justify-content: center;
		gap: 4px;
		position: absolute;
		bottom: 16px;
		left: 0;
		right: 0;
		z-index: 2;
		pointer-events: none;
	}

	.single-product__collection-indicator {
		width: 16px;
		height: 2px;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 1px;
		transition: width 0.3s ease, background 0.3s ease;
	}

	.single-product__collection-indicator--active {
		width: 32px;
		background: #fff;
	}

	.single-product__collection-desc {
		font-size: 12px;
		max-width: none;
		padding: 0 24px;
	}

	/* Mobile: show link in header, hide link below desc */
	.single-product__collection-link--mobile {
		display: inline-block;
	}

	.single-product__collection-link--desktop {
		display: none;
	}

	/* Related products — horizontal scroll */
	.single-product__related {
		margin: 40px 0 0;
		padding-bottom: 40px;
	}

	.single-product__related-header {
		padding: 0 24px;
		margin-bottom: 16px;
	}

	.single-product__related-title {
		font-size: 12px;
		font-weight: 600;
	}

	.single-product__related-link {
		font-size: 12px;
	}

	.single-product__related-grid {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 8px;
		padding: 0 10px;
		width: 100%;
		left: auto;
		position: static;
	}

	.single-product__related-grid::-webkit-scrollbar {
		display: none;
	}

	.related-card {
		width: 134px;
		min-width: 134px;
		flex-shrink: 0;
	}

	.related-card__image {
		aspect-ratio: 134 / 193;
	}

	.related-card__meta {
		padding-top: 8px;
	}

	.related-card__title,
	.related-card__price {
		font-size: 10px;
	}
}