/**
 * Single Product Page — gallery, purchase panel, tabs, reviews, related products
 *
 * Breakpoints: >=1400 desktop, 1200-1399 laptop, 1024-1199 mini laptop,
 * 768-1023 tablet, <=767 mobile.
 *
 * @package Affrosonic
 */

.as-product-page {
	background: var(--as-page-bg);
	padding-block: var(--space-8);
	min-height: 80vh;
}

.as-product-breadcrumb {
	margin-bottom: var(--space-6);
}

/* ==========================================
   1. PRODUCT CARD SHELL
   ========================================== */
.as-product-single-card {
	background: var(--as-white);
	border: 1px solid var(--as-border-light);
	border-radius: var(--as-radius-xl);
	padding: var(--space-8);
	box-shadow: var(--as-shadow-md);
	margin-bottom: var(--space-10);
	position: relative;
	overflow: hidden;
}

.as-product-single-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--as-blue-600), var(--as-success));
}

.as-product-single-grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: var(--space-10);
	align-items: start;
}

/* ==========================================
   2. GALLERY
   ========================================== */
.as-product-gallery-container {
	position: sticky;
	top: 100px;
}

.woocommerce-product-gallery {
	position: relative;
}

.woocommerce-product-gallery .onsale {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	background: var(--as-danger);
	color: var(--as-white);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 6px 14px;
	border-radius: var(--as-radius-pill);
	box-shadow: var(--as-shadow-sm);
}

.woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
	border-radius: var(--as-radius-lg);
	overflow: hidden;
	background: var(--as-gray-50);
	border: 1px solid var(--as-border-light);
}

.woocommerce-product-gallery__image {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.woocommerce-product-gallery__image a,
.woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--as-white);
	box-shadow: var(--as-shadow-sm);
	display: grid;
	place-items: center;
}

.flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.flex-control-thumbs li {
	width: 76px;
	height: 76px;
}

.flex-control-thumbs img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--as-white);
	border: 2px solid var(--as-border-light);
	border-radius: var(--as-radius-sm);
	padding: 6px;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.flex-control-thumbs img:hover {
	border-color: var(--as-blue-500);
}

.flex-control-thumbs .flex-active img {
	border-color: var(--as-blue-600);
	box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.15);
}

/* ==========================================
   3. PURCHASE PANEL
   ========================================== */
.as-product-purchase-panel {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.as-product-meta-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--as-border-light);
	padding-bottom: 12px;
}

.as-product-brand {
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--as-blue-600);
	letter-spacing: 0.05em;
}

.as-product-title {
	font-size: var(--fs-2xl);
	font-weight: 800;
	color: var(--as-navy-950);
	margin: 0;
	line-height: 1.25;
	text-wrap: balance;
}

.as-product-rating-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	flex-wrap: wrap;
}

.as-product-rating-text {
	font-weight: 600;
	color: var(--as-gray-700);
}

.as-product-rating-empty {
	color: var(--as-gray-400);
}

.as-product-meta-divider {
	color: var(--as-gray-300);
}

.as-product-sku strong {
	color: var(--as-gray-900);
}

.as-product-price-box {
	background: linear-gradient(135deg, var(--as-blue-100), var(--as-gray-50));
	border-radius: var(--as-radius-md);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border: 1px solid var(--as-border-light);
}

.as-product-price-html {
	font-size: 28px;
	font-weight: 800;
	color: var(--as-navy-950);
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.as-product-price-html del {
	font-size: 16px;
	font-weight: 600;
	color: var(--as-gray-500);
	opacity: 1;
}

.as-product-price-html ins {
	text-decoration: none;
}

.as-product-save-badge {
	font-size: 12px;
	font-weight: 800;
	color: var(--as-white);
	background: var(--as-danger);
	padding: 3px 10px;
	border-radius: var(--as-radius-pill);
	vertical-align: middle;
}

.as-product-genuine-badge {
	font-size: 12px;
	color: var(--as-success);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 4px;
}

.as-product-short-desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--as-gray-700);
	margin: 0;
}

.as-product-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-block: 6px;
}

.as-product-chip.as-badge {
	position: static;
	top: auto;
	right: auto;
	height: 28px;
	padding-inline: 12px;
	border-radius: var(--as-radius-pill);
	font-weight: 600;
	background: var(--as-blue-100);
	color: var(--as-blue-700);
	border: 1px solid rgba(0, 102, 255, 0.15);
}

.as-product-info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	font-size: 13px;
	border-top: 1px solid var(--as-border-light);
	border-bottom: 1px solid var(--as-border-light);
	padding-block: var(--space-4);
}

.as-product-info-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.as-product-info-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	flex-shrink: 0;
}

.as-product-info-icon--blue {
	background: var(--as-blue-100);
	color: var(--as-blue-600);
}

.as-product-info-icon--green {
	background: rgba(18, 183, 106, 0.1);
	color: var(--as-success-dark);
}

.as-product-info-label {
	font-weight: 700;
	color: var(--as-navy-950);
}

.as-product-info-value {
	color: var(--as-gray-600);
}

.as-product-cta-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.as-product-cta-row .as-native-add-to-cart {
	flex: 1 1 240px;
}

.as-product-whatsapp-btn {
	flex: 1 1 200px;
	height: 46px;
	justify-content: center;
	font-weight: 700;
	gap: 8px;
}

.as-product-cta-row--stacked {
	flex-direction: column;
}

.as-product-sold-out-btn {
	height: 46px;
	background: var(--as-gray-50);
	color: var(--as-gray-400);
	border-color: var(--as-gray-200);
	cursor: not-allowed;
	font-weight: 700;
}

.as-product-secure-row {
	border-top: 1px solid var(--as-border-light);
	padding-top: 16px;
	margin-top: 6px;
	font-size: 11px;
	color: var(--as-gray-500);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}

.as-product-secure-badge {
	display: flex;
	gap: 4px;
	font-weight: 700;
	color: var(--as-success);
}

.as-product-datasheet-row {
	border-top: 1px solid var(--as-border-light);
	padding-top: 14px;
}

.as-product-datasheet-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--as-blue-700);
	font-weight: 700;
	text-decoration: none;
}

.as-product-datasheet-link:hover {
	text-decoration: underline;
}

/* ==========================================
   4. TABS (Description / Additional info / Reviews)
   ========================================== */
.as-product-tabs-wrapper {
	margin-bottom: var(--space-12);
}

.woocommerce-tabs.wc-tabs-wrapper,
.woocommerce-tabs {
	background: var(--as-white);
	border: 1px solid var(--as-border-light);
	border-radius: var(--as-radius-lg);
	padding: var(--space-8);
	box-shadow: var(--as-shadow-sm);
}

ul.tabs.wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0 0 var(--space-4);
	border-bottom: 1px solid var(--as-border-light);
}

ul.tabs.wc-tabs li {
	margin: 0;
}

ul.tabs.wc-tabs li a {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 20px;
	border-radius: var(--as-radius-pill);
	font-size: 13px;
	font-weight: 700;
	color: var(--as-gray-600);
	text-decoration: none;
	background: var(--as-gray-50);
	border: 1px solid var(--as-border-light);
	transition: all 0.2s ease;
}

ul.tabs.wc-tabs li a:hover {
	color: var(--as-blue-600);
	border-color: var(--as-blue-500);
}

ul.tabs.wc-tabs li.active a {
	background: var(--as-blue-600);
	border-color: var(--as-blue-600);
	color: var(--as-white);
}

.woocommerce-Tabs-panel {
	font-size: 14px;
	line-height: 1.7;
	color: var(--as-gray-700);
}

.woocommerce-Tabs-panel h2 {
	font-size: 18px;
	font-weight: 800;
	color: var(--as-navy-950);
	margin-top: 0;
}

.woocommerce-Tabs-panel table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.woocommerce-Tabs-panel table.shop_attributes th,
.woocommerce-Tabs-panel table.shop_attributes td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--as-border-light);
	text-align: left;
}

.woocommerce-Tabs-panel table.shop_attributes th {
	width: 220px;
	font-weight: 700;
	color: var(--as-navy-950);
	background: var(--as-gray-50);
}

/* Reviews */
#reviews .comment-reply-title,
#reviews .woocommerce-Reviews-title {
	font-size: 18px;
	font-weight: 800;
	color: var(--as-navy-950);
}

#reviews .commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#reviews .comment_container {
	display: flex;
	gap: 14px;
	padding: 16px;
	background: var(--as-gray-50);
	border: 1px solid var(--as-border-light);
	border-radius: var(--as-radius-md);
}

#reviews .comment-text {
	flex: 1;
}

#reviews .star-rating {
	color: var(--as-warning);
}

#review_form_wrapper .comment-form input,
#review_form_wrapper .comment-form textarea {
	width: 100%;
	border: 1px solid var(--as-border-light);
	border-radius: var(--as-radius-sm);
	padding: 10px 14px;
	font-family: var(--as-font-primary);
}

#review_form_wrapper .comment-form textarea {
	min-height: 120px;
}

#review_form_wrapper .form-submit input {
	height: 46px;
	padding: 0 24px;
	background: var(--as-blue-600);
	border: none;
	border-radius: var(--as-radius-sm);
	color: var(--as-white);
	font-weight: 700;
	cursor: pointer;
}

/* ==========================================
   5. RELATED PRODUCTS
   ========================================== */
.as-related-products {
	margin-bottom: var(--space-12);
}

.as-related-products-grid {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ==========================================
   6. MOBILE STICKY BUY BAR
   ========================================== */
.as-mobile-buybar__price-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.as-mobile-buybar__label {
	font-size: 10px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--as-gray-500);
}

.as-mobile-buybar__price {
	font-size: 16px;
	font-weight: 800;
	color: var(--as-navy-950);
	margin-top: -2px;
}

.as-mobile-buybar__cart-btn {
	height: 42px;
	font-size: 13px;
	font-weight: 700;
	border-radius: var(--as-radius-sm);
	padding-inline: 14px;
}

.as-mobile-buybar__whatsapp-btn {
	height: 42px;
	width: 42px;
	background: var(--as-whatsapp);
	color: var(--as-white);
	border: none;
	border-radius: var(--as-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================
   7. RESPONSIVE BREAKPOINTS
   ========================================== */

/* Laptop: 1200-1399px */
@media (max-width: 1399px) {
	.as-product-single-grid {
		gap: var(--space-8);
	}
}

/* Mini laptop: 1024-1199px */
@media (max-width: 1199px) {
	.as-product-single-card {
		padding: var(--space-6);
	}
	.as-product-title {
		font-size: 22px;
	}
	.as-product-price-html {
		font-size: 24px;
	}
}

/* Tablet: 768-1023px — stack gallery above purchase panel */
@media (max-width: 1023px) {
	.as-product-single-grid {
		grid-template-columns: 1fr;
	}
	.as-product-gallery-container {
		position: static;
		top: auto;
	}
	.woocommerce-product-gallery__wrapper {
		max-width: 480px;
		margin-inline: auto;
	}
	.flex-control-thumbs {
		max-width: 480px;
		margin-inline: auto;
	}
	.as-product-info-grid {
		grid-template-columns: 1fr 1fr;
	}
	ul.tabs.wc-tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
	}
}

/* Mobile: <=767px */
@media (max-width: 767px) {
	.as-product-page {
		padding-block: var(--space-4);
	}
	.as-product-single-card {
		padding: var(--space-4);
		border-radius: var(--as-radius-md);
	}
	.as-product-title {
		font-size: 20px;
	}
	.as-product-price-box {
		padding: 14px 16px;
	}
	.as-product-price-html {
		font-size: 22px;
	}
	.as-product-cta-row {
		flex-direction: column;
	}
	.as-product-cta-row .as-native-add-to-cart,
	.as-product-whatsapp-btn {
		flex-basis: auto;
	}
	.woocommerce-tabs {
		padding: var(--space-4);
	}
	.woocommerce-Tabs-panel table.shop_attributes th {
		width: 140px;
	}
	#reviews .comment_container {
		flex-direction: column;
	}
}

/* Mini mobile: <=374px */
@media (max-width: 374px) {
	.as-product-info-grid {
		grid-template-columns: 1fr;
	}
	.flex-control-thumbs li {
		width: 60px;
		height: 60px;
	}
}