/* ============================================================
   IFAD single product — gemstone detail page.
   ============================================================ */

.ifad-product {
	--navy: #0e0e31;
	--line: #e5e5ea;
	--muted: #6b6b76;
	--media-bg: #f1f1f3;
	--red: #e2401c;
	max-width: 1320px;
	margin: 0 auto;
	padding: 14px 24px 56px;
	box-sizing: border-box;
	color: var(--navy);
}

/* Breadcrumbs — centred above both columns (prod parity). */
.ifad-product .ifad-crumbs { text-align: center; margin: 10px 0 10px; }

/* On mobile, lay the crumbs out with flex (not inline) so the order follows the
   DOM + writing direction instead of the Unicode bidi algorithm: the English
   product title is an LTR island among the Arabic labels, which under RTL
   scrambled the visual order. Keeps it Home → category → title. Aligned to the
   reading start (`flex-start`/`start`): left in English (LTR), right in Arabic (RTL). */
@media (max-width: 767px) {
	.ifad-product .ifad-crumbs {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: baseline;
		text-align: start;
		margin: 15px 0 15px;
	}
	.ifad-product .ifad-crumbs .current { min-width: 0; } /* let a long title wrap, not overflow */
}

/* ---------------- Top: gallery + summary ---------------- */
.ifad-product__top {
	display: grid;
	grid-template-columns: minmax(0, 292px) 1fr;
	gap: 44px;
	align-items: start;
}

/* ---------------- Gallery ---------------- */
.ifad-pgal { min-width: 0; }
.ifad-pgal__tabs { display: flex; align-items: center; gap: 7px; margin: 0; padding-left: 10px; }
/* Tabs share one continuous outline with the stage below: no bottom border,
   pulled down 1px over the box's top edge, painted above it (z-index). */
.ifad-pgal__tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	margin-bottom: -1px;
	z-index: 2;
	background: #fff;
	border: 1px solid var(--line);
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
	color: var(--navy);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.ifad-pgal__tab svg { width: 18px; height: 18px; }
.ifad-pgal__tab:hover { border-color: #c3c3ce; }
.ifad-pgal__tab.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
/* Empty media type → tab is shown but not clickable (native disabled). */
.ifad-pgal__tab:disabled { opacity: .38; cursor: default; }
.ifad-pgal__tab:disabled:hover { border-color: var(--line); background: #fff; }

/* Fixed-height box → identical gallery height on every tab (no jump). Holds the
   media area (fills) + the thumbnail strip (image tab only). */
.ifad-pgal__stage {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 330px;
	padding: 8px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 5px;
	overflow: hidden;
}
.ifad-pgal__media {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	border-radius: 5px;
	overflow: hidden;
	background: #ffffff;
}
.ifad-pgal__pane { position: absolute; inset: 0; display: none; }
.ifad-pgal__pane.is-active { display: block; }

.ifad-pgal__slider { position: absolute; inset: 0; }
.ifad-pgal__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity .25s ease;
}
.ifad-pgal__img.is-active { opacity: 1; }
/* Photos fill the frame (cover); scheme/others stay contain so nothing is cropped. */
.ifad-pgal__pane[data-type="image"] .ifad-pgal__img { object-fit: cover; }
/* Scheme (proportion diagram) sits on white, not the grey media bg. */
.ifad-pgal__pane[data-type="scheme"] { background: #fff; }

/* Thumbnail strip — one row, horizontal scroll, capped to the photo width
   (shown only while the image tab is active; prod parity). */
.ifad-pgal__thumbs {
	display: none;             /* image tab only — removed elsewhere so the media fills the box */
	flex: 0 0 auto;
	flex-wrap: nowrap;
	gap: 8px;
	margin-top: 8px;
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	padding-bottom: 2px;
	scrollbar-width: none;         /* scrollable, but hide the bar */
	-ms-overflow-style: none;
}
.ifad-pgal[data-active="image"] .ifad-pgal__thumbs { display: flex; }
.ifad-pgal__thumbs::-webkit-scrollbar { display: none; }
.ifad-pgal__thumb {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: var(--media-bg);
	overflow: hidden;
	cursor: pointer;
	transition: border-color .15s ease;
}
.ifad-pgal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ifad-pgal__thumb:hover { border-color: #c3c3ce; }
.ifad-pgal__thumb.is-active { border-color: var(--navy); }

.ifad-pgal__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid #e5e5ea00;
	border-radius: 50%;
	font-size: 40px;
	line-height: 1;
	color: #d8d8db;
	cursor: pointer;
	transition: background .15s ease;
	z-index: 2;
}
.ifad-pgal__nav:hover { background: none; }
.ifad-pgal__nav--prev { left: 0; }
.ifad-pgal__nav--next { right: 0; }

.ifad-pgal__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #ffffff; border: 0; }
.ifad-pgal__file {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #fff;
	color: var(--navy);
	text-decoration: none;
}
.ifad-pgal__file-tag { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--navy); }
.ifad-pgal__file-label { font-size: 13px; color: var(--muted); }
.ifad-pgal__file:hover .ifad-pgal__file-label { color: var(--navy); }

/* Certificate PDF — first-page preview on white + an overlay open button. */
.ifad-pgal__pdf { position: absolute; inset: 0; background: #fff; }
.ifad-pgal__pdf-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center 50px;
	background: #fff;
	padding: 8px;
	box-sizing: border-box;
}
.ifad-pgal__pdf-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.ifad-pgal__pdf-open {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-width: 190px;
	padding: 7px 22px;
	background: var(--navy);
	color: #fff;
	border-radius: 5px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(14, 14, 49, .22);
	z-index: 2;
}
.ifad-pgal__pdf-open:hover { background: #1b1b4d; }
.ifad-pgal__pdf-open .ifad-pgal__file-tag { color: #fff; }
.ifad-pgal__pdf-ico { width: 25px; height: 25px; flex: 0 0 auto; }

/* Empty media tab (no video / diagram / certificate) — concise placeholder
   instead of falling back to the stone photo. */
.ifad-pgal__empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 20px;
	background: #fff;
	color: var(--muted);
	text-align: center;
}
.ifad-pgal__empty svg { width: 42px; height: 42px; opacity: .4; }
.ifad-pgal__empty-text { max-width: 210px; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* ---------------- Summary ---------------- */
/* Drop the right column by the tab-row height so the title lines up with the top
   of the gallery box (tabs 38px + 10px gap). Reset when the layout stacks. */
.ifad-product__summary { min-width: 0; margin-top: 35px; }
.ifad-product__title {
	margin: 0 0 12px;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--navy);
}
/* Colour + clarity as a lighter second line (prod parity). */
.ifad-product__subtitle { color: rgba(14, 14, 49, .5); font-weight: 500; }
.ifad-product__ship {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--navy);
}
.ifad-product__ship svg { flex: 0 0 auto; margin-top: -2px; }

/* Reserved status line (prod parity: dark-red #9b0303 + hexagon-alert icon). */
.ifad-product__reserved {
	display: flex;
	align-items: center;
	gap: 5px;
	width: 100%;
	margin: 0 0 15px;
	color: #9b0303;
	font-size: 16px;
	font-weight: 500;
}
.ifad-product__reserved svg { flex: 0 0 auto; }

.ifad-product__pricerow {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.ifad-product__price { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
/* Prod price colours/weights: active = indigo #3434a7, struck = navy @50%, per-carat = navy bold. */
.ifad-product__price .ifad-price { font-size: 27px; font-weight: 700; line-height: 1.2; color: var(--navy); }
.ifad-product__price .ifad-price del { font-size: 27px; font-weight: 700; color: var(--navy); opacity: .5; margin-right: 4px; text-decoration: line-through; }
.ifad-product__price .ifad-price ins { text-decoration: none; color: #3434a7; font-weight: 700; }
.ifad-product__price .ifad-price:not(.is-sale):not(.is-broker) ins { color: var(--navy); }
.ifad-product__discount {
	align-self: center;
	padding: 4px 7px;
	background: #e74c3c;
	color: #fff;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}
.ifad-product__percarat { flex: 1 0 100%; margin-top: 0px; font-size: 16px; font-weight: 700; color: var(--navy); }
.ifad-product__sku { font-size: 15px; color: #b6b6c0; white-space: nowrap; }
.ifad-product__sku span { color: #b6b6c0; }

.ifad-product__rule { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

.ifad-product__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.ifad-product__chip {
	padding: 11px 16px;
	background: #f4f4f6;
	border: 1px solid var(--line);
	border-radius: 5px;
	font-size: 14px;
	color: var(--navy);
}
/* Treated stones: the Treatments chip is a red flag (prod parity). Only rendered
   when the value is not "None", so its presence itself signals a treatment. */
.ifad-product__chip--treatment { background: #e54941; border-color: #e54941; color: #fff; }

.ifad-product__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ifad-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	padding: 13px 22px;
	background: #fff;
	border: 1px solid var(--navy);
	border-radius: 5px;
	font-size: 14px;
	color: var(--navy);
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.ifad-btn:hover { background: var(--navy); color: #fff; }
.ifad-btn--primary { background: var(--navy); color: #fff; }
.ifad-btn--primary:hover { background: #1b1b4d; }
.ifad-product__wish {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--navy);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}
.ifad-product__wish:hover { color: var(--red); border-color: var(--red); }
.ifad-product__wish.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------------- Trust badges ---------------- */
.ifad-product__trust {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin: 40px 0 0;
	padding: 30px 0 0;
	list-style: none;
	border-top: 1px solid var(--line);
}
.ifad-product__trust li { display: flex; align-items: flex-start; gap: 14px; }
.ifad-product__trust svg { flex: 0 0 auto; width: 33px; height: 33px; color: var(--navy); background: #f4f4f6; padding: 13px; border-radius: 5px; box-sizing: content-box; }
.ifad-product__trust strong { display: block; margin-bottom: 4px; font-size: 15px; color: var(--navy); }
.ifad-product__trust span { font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ---------------- Specs ---------------- */
.ifad-product__specs { margin: 48px 0 0; }
.ifad-product__specs-title { margin: 0 0 22px; font-size: 26px; font-weight: 600; color: var(--navy); }
.ifad-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 34px; }
.ifad-specs__col { display: flex; flex-direction: column; gap: 0; }
/* Zebra: alternate rows get a full-width grey band (label + value), like prod. */
.ifad-specs__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	border-radius: 5px;
}
.ifad-specs__row:nth-child(odd) { background: #f6f6f8; }
.ifad-specs__label {
	padding: 13px 16px;
	font-size: 14px;
	color: var(--muted);
}
.ifad-specs__value {
	padding: 13px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--navy);
	text-align: right;
}

/* ---------------- Shop with confidence ---------------- */
.ifad-product__confidence { margin: 52px 0 0; }
.ifad-confidence__title {
	display: inline-block;
	margin: 0 0 26px;
	padding-bottom: 8px;
	font-size: 18px;
	font-weight: 600;
	color: var(--navy);
	border-bottom: 2px solid var(--navy);
}
.ifad-confidence__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 60px; }
.ifad-confidence__grid h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: var(--navy); }
.ifad-confidence__grid h3:not(:first-child) { margin-top: 24px; }
.ifad-confidence__grid p { margin: 0; font-size: 15px; line-height: 1.2; color: var(--muted); }

/* Info tabs — the nav shows only with 2+ tabs; a single tab keeps the
   confidence title + 2-col grid exactly as before. */
.ifad-infotabs__nav { display: flex; flex-wrap: wrap; gap: 33px; margin: 0 0 22px; }
.ifad-infotabs__tab { padding: 0 3px 10px; background: none; border: 0; border-bottom: 1px solid transparent; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 18px; color: var(--navy); cursor: pointer; }
.ifad-infotabs__tab.is-active { border-bottom-color: var(--navy); }
.ifad-infotabs__pane { display: none; }
.ifad-infotabs__pane.is-active { display: block; }

/* ---------------- Responsive ---------------- */
@media ( max-width: 900px ) {
	.ifad-product__top { grid-template-columns: 1fr; gap: 28px; }
	.ifad-pgal { max-width: 400px; }
	.ifad-product__summary { margin-top: 0; }
	.ifad-specs { grid-template-columns: 1fr; gap: 6px; }
	.ifad-confidence__grid { grid-template-columns: 1fr; }
	.ifad-product__trust { grid-template-columns: 1fr; gap: 20px; }
}
@media ( max-width: 560px ) {
	.ifad-product__title { font-size: 24px; }
	.ifad-btn { min-width: 0; flex: 1 1 auto; }

	/* Mobile gallery: let the stage grow so the thumbnail strip sits BELOW a full
	   square photo instead of eating into the fixed-height box (desktop keeps the
	   fixed 330px stage). */
	.ifad-pgal { max-width: none; }
	.ifad-pgal__stage { height: auto; }
	.ifad-pgal__media { flex: 0 0 auto; aspect-ratio: 1 / 1; }
}

/* Wishlist heart — filled navy when the stone is saved. */
.ifad-product__wish.is-active { border-color: var(--navy); }
.ifad-product__wish.is-active svg { fill: var(--navy); stroke: var(--navy); }
.ifad-product__wish.is-loading { opacity: .5; pointer-events: none; }