/**
 * PRODUCT DETAIL PAGE
 * Only rules that Bootstrap utilities cannot replace.
 * Layout, spacing, and colour helpers live in the template as BS utilities.
 */

/* ===========================================================================
   GALLERY — sticky offset accounts for dynamic navbar height
   =========================================================================== */

.product-gallery {
	position: sticky;
	top: calc(clamp(4.75rem, 9vw, 6.5rem) + env(safe-area-inset-top, 0px));
}

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

/* Main image container — floated on a soft warm neutral, no frame (LV-style) */
.main-image-container {
	overflow: hidden;
	aspect-ratio: 1 / 1;
	max-height: 65vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f5f3ef;
}

.main-image-container .main-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	padding: 0;
}

/* Thumbnail — gold active/hover border state + Task 3.4: gentle lift */
.thumbnail-container {
	cursor: pointer;
	transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: 2px solid transparent;
	width: 80px;
	height: 80px;
	flex-shrink: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
}

.thumbnail-container:hover {
	border-color: var(--luxury-gold);
	transform: translateY(-2px);
}

.thumbnail-container.active {
	border-color: var(--luxury-gold);
	transform: translateY(0);
}

/* Image transition on gallery swap — Task 3.1: elegant 350ms crossfade */
.main-image {
	transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1),
	            transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.main-image.changing {
	opacity: 0.5;
}

/* ===========================================================================
   SECTION BACKGROUND — subtle warm gradient, not a BS utility
   =========================================================================== */

.product-detail-section {
	background: linear-gradient(180deg, rgba(247,243,238,0.4) 0%, rgba(255,255,255,0) 100%);
}

.product-review-section {
	background: linear-gradient(180deg, rgba(247,243,238,0.55) 0%, rgba(255,255,255,0) 100%);
}

.related-products-section {
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(247,243,238,0.32) 100%);
}

/* ===========================================================================
   BRAND TYPOGRAPHY UTILITIES — letter-spacing + label style used site-wide
   =========================================================================== */

/* Uppercase field label — used on Size and Quantity labels */
.pdp-field-label {
	font-size: var(--text-xs);
	font-weight: var(--weight-semi);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

/* Tabular numerals for price display */
#unitPrice,
#comparePrice {
	font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   SIZE SELECTOR — grid layout + gold checked state
   =========================================================================== */

.product-size-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.75rem;
	text-align: center;
	width: 100%;
	min-height: 100%;
	border-radius: var(--radius-sm);
}

/* High-contrast dark checked state — Creed/LV editorial style */
.btn-check:checked + .product-size-option {
	background-color: var(--color-ink);
	border-color: var(--color-ink);
	color: #fff;
}

/* Hover — subtle dark preview */
.product-size-option:hover {
	border-color: var(--color-ink);
	color: var(--color-ink);
}

@media (max-width: 767.98px) {
	.product-size-option {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
		padding: 0.5rem 1rem;
	}
}

/* ===========================================================================
   QUANTITY INPUT — fixed width, BS doesn't constrain number inputs
   =========================================================================== */

/* Quantity input width constraint */
.qty-input {
	max-width: 60px;
}



/* ===========================================================================
   PDP CTA — charcoal-black primary button, overrides global gold btn-primary
   =========================================================================== */

.product-detail-section .btn-primary,
.product-detail-section .btn-primary:hover,
.product-detail-section .btn-primary:focus-visible {
	background-color: var(--color-ink);
	border-color: var(--color-ink);
	color: #fff;
}

.product-detail-section .btn-primary:hover {
	background-color: #2d2d2d;
	border-color: #2d2d2d;
}

/* ===========================================================================
   TASK 3.3 — Add to Cart button transition & Enhanced CTA style
   =========================================================================== */

.pdp-add-to-cart-btn {
	min-height: 54px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pdp-add-to-cart-btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.pdp-qty-btn, .pdp-qty-input {
	height: 54px;
}

/* ===========================================================================
   EDITORIAL STORY BLOCK — full-width dark section (Creed-style)
   =========================================================================== */

.pdp-editorial-block {
	background-color: var(--color-ink);
	color: rgba(255,255,255,0.85);
	padding: 4rem 0;
}

.pdp-editorial-block .pdp-editorial-label {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest, 0.18em);
	color: var(--luxury-gold);
	font-weight: var(--weight-semi);
	margin-bottom: 0.5rem;
}

.pdp-editorial-block .pdp-editorial-title {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: var(--weight-semi);
	color: #fff;
	line-height: var(--leading-snug, 1.2);
	margin-bottom: 1.25rem;
}

.pdp-editorial-block .pdp-editorial-body {
	font-size: var(--text-md);
	line-height: var(--leading-relaxed, 1.7);
	color: rgba(255,255,255,0.85); /* Increased contrast */
	max-width: 46ch;
}

.pdp-scent-notes {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
}

.pdp-scent-note-group {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.pdp-scent-note-group .note-label {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--luxury-gold);
	font-weight: var(--weight-semi);
}

.pdp-scent-note-group .note-value {
	font-size: var(--text-sm);
	color: rgba(255,255,255,0.9); /* Increased contrast */
	font-weight: var(--weight-semi); /* Bolder for readability */
}

.pdp-editorial-divider {
	width: 1px;
	background: rgba(255,255,255,0.1);
	align-self: stretch;
}

/* ===========================================================================
   TRUST RIBBON — full-width brand break, custom layout + divider
   =========================================================================== */

.pdp-trust-ribbon {
	background: var(--color-surface-section);
	border-top: 1px solid var(--color-border-subtle);
	border-bottom: 1px solid var(--color-border-subtle);
	padding: 1.25rem 0;
}

.pdp-trust-ribbon-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	flex-wrap: wrap;
}

/* Vertical rule divider — no BS equivalent */
.pdp-trust-ribbon-divider {
	width: 1px;
	height: 2rem;
	background: var(--color-border-soft);
	flex-shrink: 0;
}

.pdp-trust-ribbon-name {
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	color: var(--color-ink);
}

.pdp-trust-ribbon-phone {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--weight-semi);
	color: var(--color-ink);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.pdp-trust-ribbon-phone:hover {
	color: var(--luxury-gold-dark);
}

/* ===========================================================================
   PDP SOCIAL PROOF — featured review snippet
   =========================================================================== */

.pdp-social-proof {
	background: rgba(197, 163, 90, 0.05);
	border: 1px solid rgba(197, 163, 90, 0.15);
}

/* Initial-based avatar circle instead of photo */
.pdp-review-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--luxury-gold);
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: var(--weight-bold);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pdp-verified-label {
	font-size: 0.65rem;
}

/* ===========================================================================
   TRUST PILLS — longevity + concentration quick-scan icons
   =========================================================================== */

.pdp-trust-pill {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-sm);
	background: var(--color-surface-subtle);
}

.pdp-trust-pill i {
	color: var(--luxury-gold);
	font-size: var(--text-md);
	flex-shrink: 0;
}

.pdp-trust-pill-label {
	display: block;
	font-size: var(--text-xs);
	font-weight: var(--weight-semi);
	color: var(--color-text-primary);
	line-height: 1.2;
}

.pdp-trust-pill-value {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	line-height: 1.2;
}

/* ===========================================================================
   DETAIL STRIP — removed; longevity/concentration live in editorial block only
   =========================================================================== */

/* ===========================================================================
   SIZE BADGE OVERLAY on main image
   =========================================================================== */

.pdp-size-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	background: var(--color-ink);
	color: #fff;
	font-size: var(--text-xs);
	font-weight: var(--weight-semi);
	padding: 0.2rem 0.5rem;
	border-radius: var(--radius-xs);
	z-index: 2;
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
}

@media (max-width: 575.98px) {
	.pdp-trust-ribbon-inner {
		gap: 1rem;
		justify-content: flex-start;
	}

	.pdp-trust-ribbon-divider {
		display: none;
	}

	.pdp-trust-ribbon-inner .btn {
		width: 100%;
		text-align: center;
	}
}

/* ===========================================================================
   TASK 2.2 — Image hover zoom (desktop only, CSS-driven)
   =========================================================================== */

@media (hover: hover) {
	.main-image-container {
		cursor: zoom-in;
	}

	.main-image-container.zoom-active .main-image {
		transform: scale(1.8);
		transform-origin: var(--zoom-x, center) var(--zoom-y, center);
	}
}

/* ===========================================================================
   TASK 3.2 — Size selector checked state transition
   =========================================================================== */

.product-size-option {
	transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-check:checked + .product-size-option {
	transform: scale(1.02);
}

/* ===========================================================================
   TASK 3.5 — Price pulse on size/qty change
   =========================================================================== */

#unitPrice.price-updating {
	opacity: 0.6;
	transition: opacity 300ms ease;
}

/* ===========================================================================
   UTILITY CLASSES
   =========================================================================== */

.pdp-badge-luxury {
	background-color: var(--luxury-gold);
	color: #fff;
}

.pdp-badge-save {
	background-color: var(--luxury-gold);
	color: #fff;
}

.pdp-badge-value {
	background-color: var(--luxury-gold);
	color: #fff;
	font-size: 0.6rem;
}

.pdp-thumbnail-img {
	width: 100%;
	height: 100%;
}

.pdp-editorial-meta-divider {
	border-color: rgba(255, 255, 255, 0.1) !important;
}

/* WhatsApp brand green — kept in CSS, not inline */
.pdp-whatsapp-icon {
	color: #25d366;
}

/* Trust ribbon sublabel letter-spacing */
.pdp-ribbon-sublabel {
	letter-spacing: 0.04em;
}