/**
 * Intrinsic Blue — Single Product Page
 */

/* WooCommerce notices (e.g. "Product added to your cart. View Cart") —
   real dynamic messages, just retheme to match the dark UI instead of
   WooCommerce's default white/green boxes. */
.ib-product-page__notices {
	max-width: var(--ib-container-max);
	margin: var(--ib-space-4) auto 0;
	padding: 0 var(--ib-container-pad);
}

.ib-product-page__notices:empty {
	margin: 0;
	padding: 0;
}

.ib-product-page__notices .woocommerce-message,
.ib-product-page__notices .woocommerce-error,
.ib-product-page__notices .woocommerce-info {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--ib-space-4);
	background: var(--ib-bg-surface);
	border: 1px solid var(--ib-border-subtle);
	border-left: 3px solid var(--ib-accent-solid);
	border-radius: var(--ib-radius-sm);
	color: var(--ib-text-secondary);
	font-size: 14px;
	padding: var(--ib-space-4) var(--ib-space-5);
	list-style: none;
	margin: 0 0 var(--ib-space-4);
}

/* Astra/WooCommerce's default checkmark icon is positioned with CSS
   assumptions (absolute position + padding-left) that our flex layout
   doesn't provide, which was overlapping the icon on top of the text.
   We remove it entirely and rely on the colored left border instead —
   cleaner than fighting two different icon-positioning systems. */
.ib-product-page__notices .woocommerce-message::before,
.ib-product-page__notices .woocommerce-error::before,
.ib-product-page__notices .woocommerce-info::before {
	display: none !important;
	content: none !important;
}

.ib-product-page__notices .woocommerce-error {
	border-left-color: var(--ib-error);
}

/* WooCommerce outputs the "View cart" / "Continue shopping" button
   BEFORE the message text in the HTML. Instead of relying on DOM order
   (which would put the button on the left), we explicitly order it
   last and pin it to the right — text reads first, button always sits
   flush against the right edge, regardless of markup order. */
.ib-product-page__notices .woocommerce-message > *:not(.button),
.ib-product-page__notices .woocommerce-error > *:not(.button),
.ib-product-page__notices .woocommerce-info > *:not(.button) {
	order: 1;
	flex: 1 1 auto;
}

.ib-product-page__notices .button.wc-forward {
	order: 2;
	margin-left: auto;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ib-font-body);
	font-weight: 600;
	font-size: 13px;
	padding: 9px 18px;
	border-radius: var(--ib-radius-sm);
	background: var(--ib-accent-solid);
	color: var(--ib-text-on-accent);
	white-space: nowrap;
}

/* ---------- Astra core CSS override ----------
   Astra's own WooCommerce stylesheet sets div.product div.summary to
   width: 46% (and div.images similarly) starting at 922px viewport
   width — a leftover from Astra's float-based single-product layout.
   That fought our CSS Grid, leaving dead space instead of a true 50/50
   split. Forcing both to 100% here lets our grid (.ib-product-page__top)
   own sizing completely; matches the exact selectors Astra uses so this
   wins regardless of Astra's own specificity/media query. */
@media (min-width: 922px) {
	.woocommerce #content .ast-woocommerce-container div.product div.summary,
	.woocommerce .ast-woocommerce-container div.product div.summary,
	.woocommerce-page #content .ast-woocommerce-container div.product div.summary,
	.woocommerce-page .ast-woocommerce-container div.product div.summary,
	.woocommerce div.product div.images,
	.woocommerce div.product div.summary {
		width: 100% !important;
		float: none !important;
	}
}

.ib-product-page__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--ib-space-10);
	align-items: start;
	max-width: var(--ib-container-max);
	margin: var(--ib-space-8) auto 0;
	padding: 0 var(--ib-container-pad);
}

/* ---------- Gallery ---------- */
.ib-product-page__gallery {
	width: 100%;
	min-width: 0;
}

.ib-product-page__gallery .woocommerce-product-gallery {
	position: relative;
	width: 100% !important;
}

.ib-product-page__gallery .woocommerce-product-gallery__wrapper {
	border-radius: var(--ib-radius-lg);
	overflow: hidden;
	background: var(--ib-bg-surface);
}

/* IMPORTANT: do not force widths on the FlexSlider wrapper/slides.
   WooCommerce calculates those widths inline when a gallery thumbnail is
   selected. An !important width here makes the first image look correct but
   moves later slides outside the viewport, which appears as a blank main
   image. Keep sizing ownership with WooCommerce/FlexSlider. */
.ib-product-page__gallery .flex-viewport {
	width: 100%;
	border-radius: var(--ib-radius-lg);
	overflow: hidden;
	background: var(--ib-bg-surface);
}

.ib-product-page__gallery .woocommerce-product-gallery__image a {
	display: block;
	width: 100%;
}

.ib-product-page__gallery img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	display: block;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

.ib-product-page__gallery .flex-control-thumbs {
	display: flex;
	gap: var(--ib-space-3);
	margin: var(--ib-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.ib-product-page__gallery .flex-control-thumbs li {
	width: 80px;
	height: 80px;
}

.ib-product-page__gallery .flex-control-thumbs img {
	width: 100%;
	height: 100%;
	border-radius: var(--ib-radius-sm);
	border: 2px solid transparent;
	cursor: pointer;
	opacity: 0.7;
	transition: all var(--ib-transition-fast);
}

.ib-product-page__gallery .flex-control-thumbs img.flex-active,
.ib-product-page__gallery .flex-control-thumbs img:hover {
	border-color: var(--ib-accent-solid);
	opacity: 1;
}

.ib-product-page__gallery a.woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--ib-space-3);
	right: var(--ib-space-3);
	width: 36px;
	height: 36px;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

/* ---------- Summary ---------- */
.ib-product-page__summary {
	min-width: 0;
}

.ib-product-page__eyebrow-row {
	display: flex;
	align-items: center;
	gap: var(--ib-space-2);
	margin-bottom: var(--ib-space-3);
	font-size: 12px;
}

.ib-product-page__limited {
	color: var(--ib-accent-end);
}

.ib-product-page__origin {
	color: #f0b64c;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ib-product-page__eyebrow-dot {
	color: var(--ib-text-muted);
}

.ib-product-page__title {
	margin-bottom: var(--ib-space-3);
}

.ib-product-page__rating-row {
	display: flex;
	align-items: center;
	gap: var(--ib-space-3);
	margin-bottom: var(--ib-space-4);
	font-size: 14px;
}

.ib-product-page__rating .star-rating {
	font-size: 14px;
	color: var(--ib-star-filled);
	display: inline-block;
	vertical-align: middle;
}

.ib-product-page__rating .star-rating span:before {
	color: var(--ib-star-filled);
}

.ib-product-page__divider {
	color: var(--ib-border-strong);
}

.ib-product-page__stock .stock {
	margin: 0;
	font-size: 14px;
}

.ib-product-page__stock .stock.in-stock {
	color: var(--ib-success);
}

.ib-product-page__stock .stock.out-of-stock {
	color: var(--ib-error);
}

.ib-product-page__price {
	margin-bottom: var(--ib-space-5);
}

.ib-product-page__price .price {
	font-size: 34px;
	font-weight: 700;
	color: var(--ib-text-primary);
}

.ib-product-page__price .price ins {
	text-decoration: none;
}

.ib-product-page__price .price del {
	font-size: 20px;
	font-weight: 400;
	color: var(--ib-text-strike);
	margin-left: var(--ib-space-3);
	opacity: 1;
}

.ib-product-page__excerpt {
	color: var(--ib-text-secondary);
	font-size: 15px;
	line-height: 1.7;
	margin-bottom: var(--ib-space-5);
}

.ib-product-page__excerpt p {
	margin: 0;
}

.ib-product-page__trust-box {
	display: flex;
	align-items: flex-start;
	gap: var(--ib-space-3);
	background: var(--ib-bg-surface);
	border: 1px solid var(--ib-border-subtle);
	border-radius: var(--ib-radius-md);
	padding: var(--ib-space-4);
	margin-bottom: var(--ib-space-6);
}

.ib-product-page__trust-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(106, 99, 241, 0.15);
	color: var(--ib-accent-end);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ib-product-page__trust-heading {
	display: block;
	color: var(--ib-text-primary);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 2px;
}

.ib-product-page__trust-text {
	display: block;
	color: var(--ib-text-muted);
	font-size: 13px;
	line-height: 1.6;
}

.ib-product-page__cart-row {
	display: flex;
	align-items: center;
	gap: var(--ib-space-3);
}

.ib-product-page__cart-row form.cart {
	display: flex;
	align-items: center;
	gap: var(--ib-space-3);
}

.ib-product-page__cart-row .quantity {
	margin: 0;
}

.ib-product-page__cart-row button.single_add_to_cart_button {
	flex: 1;
	padding: 15px 32px;
	font-size: 15px;
}

/* ---------- Tabs ---------- */
.ib-product-page__tabs {
	max-width: var(--ib-container-max);
	margin: var(--ib-space-10) auto 0;
	padding: var(--ib-space-6) var(--ib-container-pad) 0;
}

/* Reset Astra/WooCommerce core's own default tab borders first — they
   were rendering as a bright/white line instead of our subtle one.
   High specificity + !important here is intentional: this is fighting
   a conflicting theme default, not general layout styling. */
.woocommerce-tabs,
.woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.tabs li a,
.woocommerce-tabs .panel,
.woocommerce-tabs .woocommerce-Tabs-panel {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--ib-space-8);
	list-style: none;
	margin: 0 0 var(--ib-space-6);
	padding: 0;
	border-bottom: 1px solid var(--ib-border-subtle) !important;
}

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

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: var(--ib-space-3) 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--ib-text-muted);
	border-bottom: 2px solid transparent !important;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--ib-accent-end);
	border-bottom: 2px solid var(--ib-accent-end) !important;
}

.woocommerce-tabs .woocommerce-Tabs-panel {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--ib-space-10);
}

.woocommerce-tabs #tab-description h1,
.woocommerce-tabs #tab-description h2,
.woocommerce-tabs #tab-description h3 {
	font-family: var(--ib-font-display);
	font-style: italic;
	font-weight: 500;
	color: var(--ib-text-primary);
	font-size: 26px;
	margin: 0 0 var(--ib-space-3);
}

.woocommerce-tabs #tab-description p {
	color: var(--ib-text-secondary);
	font-size: 15px;
	line-height: 1.75;
}

/* Specifications table (WooCommerce's real "Additional information" attributes table) */
.woocommerce-tabs table.shop_attributes,
.woocommerce-tabs #tab-additional_information table {
	width: 100%;
	border-collapse: collapse;
	background: var(--ib-bg-surface);
	border-radius: var(--ib-radius-md);
	overflow: hidden;
}

.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td {
	padding: var(--ib-space-3) var(--ib-space-4);
	border-bottom: 1px solid var(--ib-border-subtle);
	text-align: left;
	font-size: 14px;
}

.woocommerce-tabs table.shop_attributes th {
	color: var(--ib-text-muted);
	font-weight: 400;
	width: 45%;
}

.woocommerce-tabs table.shop_attributes td {
	color: var(--ib-text-primary);
	font-weight: 600;
	text-align: right;
}

.woocommerce-tabs table.shop_attributes tr:last-child th,
.woocommerce-tabs table.shop_attributes tr:last-child td {
	border-bottom: none;
}

/* Reviews tab keeps WooCommerce's default review markup — only retheme colors */
.woocommerce-tabs #comments,
.woocommerce-tabs .comment-reply-title,
.woocommerce-tabs .comment-text p {
	color: var(--ib-text-secondary);
}

/* ---------- Related products ("You May Also Like") ---------- */
.ib-product-page__related {
	max-width: var(--ib-container-max);
	margin: var(--ib-space-16) auto 0;
	padding: 0 var(--ib-container-pad) var(--ib-space-16);
}

.ib-product-page__related .related.products > h2 {
	font-family: var(--ib-font-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(24px, 3vw, 32px);
	color: var(--ib-text-primary);
	text-align: center;
	margin: 0 0 var(--ib-space-8);
}

.ib-product-page__related ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ib-space-5);
	max-width: none;
	margin: 0 !important;
	padding: 0;
	list-style: none;
}

@media (max-width: 991px) {
	.ib-product-page__top {
		grid-template-columns: 1fr;
	}

	.woocommerce-tabs .woocommerce-Tabs-panel {
		grid-template-columns: 1fr;
	}

	.ib-product-page__related ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.ib-product-page__cart-row form.cart {
		flex-direction: column;
		align-items: stretch;
	}

	.ib-product-page__related ul.products {
		grid-template-columns: 1fr;
	}

	.woocommerce-tabs ul.tabs {
		gap: var(--ib-space-5);
		overflow-x: auto;
	}
}