/**
 * Single product page styles
 *
 * @package PersiaCopy
 */

/* ── Layout ── */

.single-product {
	padding-block: var(--space-6) var(--space-12);
}

.single-product__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	margin-bottom: var(--space-8);
}

.single-product__summary-col {
	position: relative;
}

.single-product__summary {
	position: sticky;
	top: calc(var(--header-height, 72px) + var(--space-4));
}

.single-product__badge {
	margin-bottom: var(--space-3);
}

.single-product__title {
	font-size: var(--text-3xl);
	line-height: var(--leading-tight);
	margin-bottom: var(--space-4);
}

.single-product__meta-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.single-product__meta-label {
	color: var(--color-text);
	font-weight: var(--font-semibold);
	margin-inline-end: var(--space-1);
}

.single-product__price {
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
	color: var(--color-primary);
	margin-bottom: var(--space-5);
}

.single-product__features {
	margin: 0 0 var(--space-6);
	padding: 0;
	list-style: none;
}

.single-product__features li {
	position: relative;
	padding-inline-start: var(--space-5);
	margin-bottom: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.single-product__features li::before {
	content: "•";
	position: absolute;
	inset-inline-start: 0;
	color: var(--color-primary);
	font-weight: var(--font-bold);
}

.single-product__excerpt {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-6);
}

.single-product__contact-card {
	padding: var(--space-6);
	margin-top: var(--space-2);
	transition: box-shadow var(--transition-fast);
}

.single-product__contact-card.is-highlight {
	box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / 25%);
}

.single-product__contact-title {
	font-size: var(--text-lg);
	margin-bottom: var(--space-2);
}

.single-product__contact-text {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-5);
}

.contact-actions--product {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.contact-actions--product .btn {
	flex: 1 1 auto;
	min-width: 8rem;
	justify-content: center;
}

/* ── Gallery ── */

.product-gallery {
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
}

.product-gallery__stage {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface);
	cursor: zoom-in;
}

.product-gallery__main {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform var(--transition-slow);
	transform-origin: center center;
}

.product-gallery__stage.is-zoomed .product-gallery__main {
	transform: scale(1.35);
	cursor: zoom-out;
}

.product-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-3);
	list-style: none;
	border-top: 1px solid var(--color-border);
	background: var(--color-surface);
}

.product-gallery__thumb {
	display: block;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: none;
	cursor: pointer;
	transition: border-color var(--transition-fast);
}

.product-gallery__thumb.is-active,
.product-gallery__thumb:hover {
	border-color: var(--color-primary);
}

.product-gallery__thumb-image {
	display: block;
	width: 4rem;
	height: 4rem;
	object-fit: cover;
}

/* ── Advantages ── */

.single-product__advantages {
	margin-bottom: var(--space-10);
}

.product-advantages {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-5);
	list-style: none;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

.product-advantages__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
}

.product-advantages__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--radius-full);
	background: rgb(var(--color-primary-rgb) / 12%);
	color: var(--color-primary);
	font-size: var(--text-xs);
	flex-shrink: 0;
}

/* ── Tabs ── */

.product-tabs {
	margin-bottom: var(--space-12);
}

.product-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.product-tabs__trigger {
	padding: var(--space-2) var(--space-4);
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-text-muted);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.product-tabs__trigger:hover {
	color: var(--color-primary);
}

.product-tabs__trigger.is-active {
	color: var(--color-primary);
	background: rgb(var(--color-primary-rgb) / 8%);
	border-color: rgb(var(--color-primary-rgb) / 20%);
}

.product-tabs__panel {
	display: none;
}

.product-tabs__panel.is-active {
	display: block;
}

.product-tabs__faq-more {
	margin-top: var(--space-6);
	font-size: var(--text-sm);
}

/* ── Specs & features ── */

.product-specs,
.product-features {
	margin-bottom: var(--space-8);
}

.product-specs__title,
.product-features__title,
.product-downloads__title {
	font-size: var(--text-lg);
	margin-bottom: var(--space-4);
}

.product-specs__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.product-specs__table th,
.product-specs__table td {
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	text-align: start;
	vertical-align: top;
}

.product-specs__table th {
	width: 35%;
	background: var(--color-bg-alt);
	font-weight: var(--font-semibold);
	color: var(--color-text);
}

.product-specs__table tr:nth-child(even) td {
	background: var(--color-bg-alt);
}

.product-features__list {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-features__list li {
	position: relative;
	padding: var(--space-3) var(--space-4);
	padding-inline-start: var(--space-8);
	background: var(--color-bg-alt);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
}

.product-features__list li::before {
	content: "✓";
	position: absolute;
	inset-inline-start: var(--space-3);
	color: var(--color-primary);
	font-weight: var(--font-bold);
}

/* ── Downloads ── */

.product-downloads__video {
	margin-bottom: var(--space-8);
}

.product-downloads__embed {
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--color-bg-alt);
}

.product-downloads__embed--facade {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
}

.product-downloads__play-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-5);
	border: 0;
	border-radius: var(--radius-full);
	background: var(--color-primary);
	color: #fff;
	font: inherit;
	cursor: pointer;
	transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.product-downloads__play-btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.product-downloads__play-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	font-size: 0.875rem;
}

.product-downloads__embed iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.product-downloads__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-downloads__link {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	color: var(--color-text);
	text-decoration: none;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.product-downloads__link:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-sm);
	color: var(--color-primary);
}

.product-downloads__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--space-2);
	border-radius: var(--radius-md);
	background: rgb(var(--color-primary-rgb) / 10%);
	color: var(--color-primary);
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
}

/* ── Related products ── */

.related-products {
	margin-bottom: var(--space-10);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
}

.related-products .section-title {
	margin-bottom: var(--space-6);
}

/* ── Share buttons ── */

.share-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-5);
	background: var(--color-bg-alt);
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-border);
}

.share-buttons__label {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-text-muted);
}

.share-buttons__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.share-buttons__link {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2) var(--space-4);
	font-family: inherit;
	font-size: var(--text-sm);
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--transition-fast), color var(--transition-fast);
}

.share-buttons__link:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.share-buttons__link.is-copied {
	border-color: var(--color-success, #198754);
	color: var(--color-success, #198754);
}

/* ── FAQ accordion in tabs ── */

.product-tabs .faq-item {
	margin-bottom: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface);
}

.product-tabs .faq-item__question {
	padding: var(--space-4);
	font-weight: var(--font-medium);
	cursor: pointer;
	list-style: none;
}

.product-tabs .faq-item__question::-webkit-details-marker {
	display: none;
}

.product-tabs .faq-item__answer {
	padding: 0 var(--space-4) var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* ── Sticky contact bar (mobile) ── */

.sticky-contact-bar {
	display: none;
}

@media (max-width: 767.98px) {
	.single-product__summary {
		position: static;
	}

	.sticky-contact-bar {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-2);
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: var(--z-sticky);
		padding: var(--space-3) var(--space-4);
		padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
		background: var(--color-surface-glass);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-top: 1px solid var(--color-border);
		box-shadow: 0 -4px 16px rgb(15 23 42 / 10%);
	}

	.sticky-contact-bar__btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-1);
		padding: var(--space-2);
		font-family: inherit;
		font-size: var(--text-xs);
		font-weight: var(--font-medium);
		text-align: center;
		text-decoration: none;
		border: none;
		border-radius: var(--radius-lg);
		cursor: pointer;
		transition: opacity var(--transition-fast);
	}

	.sticky-contact-bar__btn--call {
		background: var(--color-primary);
		color: var(--color-on-primary, #fff);
	}

	.sticky-contact-bar__btn--whatsapp {
		background: #25d366;
		color: #fff;
	}

	.sticky-contact-bar__btn--price {
		background: var(--color-bg-alt);
		color: var(--color-text);
		border: 1px solid var(--color-border);
	}

	body.single-product-page {
		padding-bottom: 4.75rem;
	}
}

@media (min-width: 768px) {
	.single-product__layout {
		grid-template-columns: 1.1fr 0.9fr;
		align-items: start;
	}

	.product-advantages {
		grid-template-columns: repeat(4, 1fr);
	}

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

@media (min-width: 992px) {
	.single-product__layout {
		grid-template-columns: 1.2fr 0.8fr;
		gap: var(--space-10);
	}

	.single-product__title {
		font-size: var(--text-4xl);
	}
}