/**
 * Single product page (Figma: Product Detail — Neela Jaal 450:9894), Bricks template 699.
 *
 * Only what Bricks element controls can't reach: WooCommerce markup inside the gallery,
 * reviews and attributes table, and the markup printed by inc/product-page.php shortcodes.
 */

/* Discount badge hidden by product-page.js when the chosen size has no discount. */
#brxe-0vr24f[hidden] {
	display: none !important;
}

/* ---------- Gallery (Figma Gallery 471:10922) ---------- */

/* Zoom chip (Figma 472:13771): always shown, 20px in from the main image's corner. The gallery box
   also holds the thumbs, so the offset is measured from the top of the square image (100cqw tall). */
#brxe-rr1lo6 .woocommerce-product-gallery {
	container-type: inline-size;
}

#brxe-rr1lo6 .woocommerce-product-gallery__trigger {
	top: calc(100cqw - var(--space-20) - var(--icon-trust)) !important;
	bottom: auto !important;
	margin: 0;
	opacity: 1 !important; /* WooCommerce starts it hidden */
}

/* Figma zoom_in glyph instead of WooCommerce's emoji. */
#brxe-rr1lo6 .woocommerce-product-gallery__trigger > * {
	display: none;
}

#brxe-rr1lo6 .woocommerce-product-gallery__trigger::before {
	display: block;
	width: var(--icon-sm);
	height: var(--icon-sm);
	content: "";
	background-color: currentColor;
	-webkit-mask: url("../icons/zoom.svg") center / contain no-repeat;
	mask: url("../icons/zoom.svg") center / contain no-repeat;
}

/* Thumbs: 76px tiles, 20px apart (Figma Frame 2147229305). */
#brxe-rr1lo6 .flex-control-thumbs {
	display: flex;
	gap: var(--space-20);
	margin: 0;
	padding: 0;
}

#brxe-rr1lo6 .flex-control-thumbs li {
	flex: 0 0 var(--gallery-thumb);
	width: var(--gallery-thumb) !important; /* flexslider sets an inline width */
	margin: 0 !important;
}

#brxe-rr1lo6 .flex-control-thumbs img {
	border: var(--hairline) solid transparent;
}

#brxe-rr1lo6 .flex-control-thumbs img.flex-active {
	border-color: var(--color-brand-accent);
	box-shadow: 0 var(--gap-2) var(--space-4) var(--shadow-accent-40);
}

/* ---------- Wishlist hearts on this page (Figma: 18px ink-muted heart in the 41px box / 30px circle) ---------- */

/* YITH keeps a gap for its (empty) text label, which pushes the icon off-centre: icon only. */
#brxe-y4jgfr .yith-wcwl-add-to-wishlist-button,
.brxe-ngk2x1 .yith-wcwl-add-to-wishlist-button {
	gap: 0;
}

#brxe-y4jgfr .yith-wcwl-add-to-wishlist-button__label:empty,
.brxe-ngk2x1 .yith-wcwl-add-to-wishlist-button__label:empty {
	display: none;
}

/* ---------- Rating breakdown (Figma 471:10972) ---------- */

.sng-rating-bars {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sng-rating-bars__row {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	font-family: var(--font-body);
	font-size: var(--text-eyebrow);
	font-weight: 600;
	line-height: var(--lh-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-ink-muted);
}

.sng-rating-bars__label {
	flex: 0 0 auto;
	white-space: nowrap;
}

.sng-rating-bars__track {
	position: relative;
	flex: 0 1 var(--bar-track);
	height: var(--bar-h);
	overflow: hidden;
	background-color: var(--color-surface-sand);
	border-radius: var(--radius-pill);
}

.sng-rating-bars__fill {
	position: absolute;
	inset: 0 auto 0 0;
	background-color: var(--color-star-gold);
	border-radius: inherit;
}

/* ---------- Pincode check (Figma 450:10049) ---------- */

#brxe-uptlqe .form-group label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

#brxe-uptlqe .message {
	flex-basis: 100%;
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: var(--lh-sm);
	color: var(--color-brand-deep);
}

#brxe-uptlqe .message.danger {
	color: var(--color-sale);
}

#brxe-uptlqe .message .text {
	padding: 0;
}

#brxe-uptlqe.brxe-form {
	flex-wrap: wrap !important;
}

#brxe-uptlqe .form-group:not(.submit-button-wrapper) {
	flex: 1 1 0;
	min-width: 0;
}

/* ---------- Description tab (Figma Tabs Section, Default) ---------- */

/* Image fills the pane's right side; its left edge fades into the cream page (Figma blur rect). */
/* Runs the full pane height, through the tab content's 40px padding (Figma image 32 starts at the tab rule).
   Own stacking context so its fade stays under the copy. */
.sng-description-media {
	position: absolute;
	inset: calc(-1 * var(--space-40)) 0 calc(-1 * var(--space-40)) auto;
	z-index: 0;
	width: var(--tab-media-w);
	max-width: 53%;
}

.sng-description-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top; /* Figma shows the image's top (headboard) */
}

.sng-description-media::before {
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 1;
	width: var(--tab-media-fade);
	content: "";
	/* Figma: 233px cream rect with a 54px layer blur → solid for ~110px, clear by ~219px. */
	background: linear-gradient(90deg, var(--color-surface-cream) 47%, var(--color-surface-cream-0) 94%);
}

/* ---------- Additional information (Figma Variant2 472:13060) ---------- */

#brxe-28sug5 table.shop_attributes {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

#brxe-28sug5 .shop_attributes tr {
	border-bottom: var(--hairline) solid var(--color-border-subtle);
}

#brxe-28sug5 .shop_attributes th,
#brxe-28sug5 .shop_attributes td {
	padding: var(--space-10) 0;
	font-family: var(--font-body);
	font-size: var(--text-md);
	font-weight: 400;
	font-style: normal;
	line-height: var(--lh-md);
	text-align: left;
	vertical-align: top;
	background: none;
	border: 0;
}

#brxe-28sug5 .shop_attributes th {
	width: var(--attr-label-w);
	padding-right: var(--space-24);
	color: var(--color-ink);
}

#brxe-28sug5 .shop_attributes td {
	color: var(--color-ink-muted);
}

#brxe-28sug5 .shop_attributes td p {
	max-width: var(--attr-value-max);
	margin: 0;
	padding: 0;
}

/* ---------- Reviews (Figma Tabs Section, Reviews) ---------- */

#brxe-6alp8h .woocommerce-Reviews-title {
	margin: 0 0 var(--space-24);
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: 600;
	line-height: var(--lh-h4);
	color: var(--color-ink);
}

#brxe-6alp8h .commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

#brxe-6alp8h .commentlist li.review {
	margin: 0;
	padding: var(--space-20) 0;
	border-bottom: var(--hairline) solid var(--color-border-subtle);
}

/* Figma order: stars, review, then avatar + name. */
#brxe-6alp8h .comment_container {
	display: grid;
	grid-template-columns: var(--avatar-sm) 1fr;
	grid-template-areas:
		"stars stars"
		"text text"
		"avatar meta";
	gap: var(--space-10);
	align-items: center;
}

#brxe-6alp8h .comment_container .avatar {
	grid-area: avatar;
	position: static;
	width: var(--avatar-sm);
	height: var(--avatar-sm);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
}

#brxe-6alp8h .comment-text {
	display: contents;
}

#brxe-6alp8h .comment-text .star-rating,
#brxe-6alp8h .comment-text .description {
	grid-column: 1 / -1;
}

#brxe-6alp8h .comment-text .star-rating {
	grid-area: stars;
	position: relative; /* Bricks: absolute; WooCommerce positions the filled stars inside it */
	float: none;
	margin: 0;
	font-size: var(--text-eyebrow);
	color: var(--color-star-gold);
}

/* Figma: gold stars, empty ones as gold outlines (WooCommerce icon font: e021 = outline, e020 = filled, as in its review form).
   Bricks sizes this box for 15px stars and colours the layers the other way round. */
#brxe-6alp8h .comment-text .star-rating {
	width: 5.4em; /* WooCommerce default; its star glyph is wider than 1em */
	height: 1em;
	line-height: 1;
}

#brxe-6alp8h .comment-text .star-rating::before {
	content: "\e021\e021\e021\e021\e021";
	left: 0;
	right: auto;
	color: var(--color-star-gold);
}

#brxe-6alp8h .comment-text .star-rating span::before {
	content: "\e020\e020\e020\e020\e020";
	color: var(--color-star-gold);
}

#brxe-6alp8h .comment-text .description {
	grid-area: text;
	margin: 0; /* Bricks: top margin, bottom rule and padding */
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	max-width: var(--faq-max);
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: var(--lh-sm);
	color: var(--color-ink-muted);
}

#brxe-6alp8h .comment-text .description p {
	margin: 0;
}

#brxe-6alp8h .comment-text .meta {
	grid-area: meta;
	display: flex;
	flex-direction: column;
	gap: var(--gap-2);
	margin: 0;
	font-size: var(--text-eyebrow);
	font-weight: 600;
	line-height: var(--lh-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-ink-muted);
}

#brxe-6alp8h .comment-text .meta .woocommerce-review__author {
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: var(--lh-sm);
	letter-spacing: 0;
}

#brxe-6alp8h .comment-text .meta .woocommerce-review__dash {
	display: none;
}

#brxe-6alp8h .woocommerce-noreviews {
	margin: 0 0 var(--space-15);
}

#brxe-6alp8h .must-log-in {
	margin: var(--space-24) 0 0;
}

#brxe-6alp8h .must-log-in a {
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: 500;
	line-height: var(--lh-body);
	color: var(--color-brand-accent);
	text-decoration: underline;
}

/* Add a review (Figma 472:12991): heading, 28px stars, sand fields, accent pill button. */
#brxe-6alp8h #review_form_wrapper {
	max-width: var(--faq-max);
	margin-top: var(--space-24);
}

#brxe-6alp8h .comment-reply-title {
	display: block;
	margin: 0 0 var(--space-15);
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: 600;
	line-height: var(--lh-h4);
	color: var(--color-ink);
}

#brxe-6alp8h .comment-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-15) var(--space-16);
}

#brxe-6alp8h .comment-form > p {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	gap: var(--space-6);
	margin: 0;
}

#brxe-6alp8h .comment-form label {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: var(--lh-sm);
	color: var(--color-ink);
}

#brxe-6alp8h .comment-form .required {
	color: var(--color-sale);
}

#brxe-6alp8h .comment-form input[type="text"],
#brxe-6alp8h .comment-form input[type="email"],
#brxe-6alp8h .comment-form textarea {
	width: 100%;
	padding: var(--space-10) var(--space-15);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: var(--lh-sm);
	color: var(--color-ink);
	background-color: var(--color-surface-sand-50);
	border: var(--hairline) solid var(--color-border-subtle);
	border-radius: var(--radius-card);
	box-shadow: none;
}

#brxe-6alp8h .comment-form textarea {
	height: var(--review-textarea-h); /* WooCommerce prints rows="8" */
	min-height: var(--review-textarea-h);
	resize: vertical;
}

#brxe-6alp8h .comment-form > p.form-submit {
	align-items: flex-start; /* Figma: the button is sized by its padding */
}

#brxe-6alp8h .comment-form input:focus,
#brxe-6alp8h .comment-form textarea:focus {
	border-color: var(--color-brand-accent);
	outline: none;
}

/* Name + Email side by side (guests only). */
#brxe-6alp8h .comment-form > p.comment-form-author,
#brxe-6alp8h .comment-form > p.comment-form-email {
	flex: 1 1 calc(50% - var(--space-8));
}

#brxe-6alp8h .comment-form p.stars {
	margin: 0;
	line-height: 1;
}

#brxe-6alp8h .comment-form p.stars a {
	width: var(--icon-trust);
	height: var(--icon-trust);
	margin-right: var(--space-10);
	font-size: var(--icon-trust);
}

#brxe-6alp8h .comment-form p.stars a::before {
	color: var(--color-border-subtle);
}

#brxe-6alp8h .comment-form p.stars:hover a::before,
#brxe-6alp8h .comment-form p.stars.selected a::before {
	color: var(--color-star-gold);
}

#brxe-6alp8h .comment-form p.stars a:hover ~ a::before,
#brxe-6alp8h .comment-form p.stars.selected a.active ~ a::before {
	color: var(--color-border-subtle);
}

#brxe-6alp8h .comment-form .form-submit .submit {
	padding: var(--space-16) var(--space-26);
	font-family: var(--font-body);
	font-size: var(--text-button);
	font-weight: 600;
	line-height: var(--lh-button);
	color: var(--color-on-accent);
	background-color: var(--color-brand-accent);
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
}

#brxe-6alp8h .comment-form .form-submit .submit:hover {
	background-color: var(--color-brand-deep);
}

/* ---------- Responsive ---------- */

/* Stacked layout (Bricks tablet portrait): the rating summary follows the product details instead of
   sitting between the photos and the title. */
@media (max-width: 991px) {
	#brxe-e261ze {
		display: contents !important; /* Bricks' own #brxe-e261ze { display: flex } prints after this file */
	}

	#brxe-rr1lo6 {
		order: 1;
	}

	#brxe-8is6ex {
		order: 2;
	}

	#brxe-qaousv {
		order: 3;
	}
}

@media (max-width: 767px) {
	/* Four tabs don't fit one line: scroll them sideways instead of wrapping under the active rule. */
	#brxe-dlpzf7 {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scrollbar-width: none;
	}

	#brxe-dlpzf7 > * {
		flex-shrink: 0;
		white-space: nowrap;
	}

	#brxe-rr1lo6 .flex-control-thumbs {
		gap: var(--space-10);
	}

	/* Six thumbs share the row (Figma desktop shows six). */
	#brxe-rr1lo6 .flex-control-thumbs li {
		flex: 1 1 0;
		width: auto !important;
		min-width: 0;
	}

	#brxe-6alp8h .comment-form > p.comment-form-author,
	#brxe-6alp8h .comment-form > p.comment-form-email {
		flex-basis: 100%;
	}

	#brxe-28sug5 .shop_attributes th {
		width: 40%;
		padding-right: var(--space-15);
	}
}