/**
 * Page-scoped styles for the product detail page, lifted from the two inline
 * <style> blocks in sleektap-theme/product-detail.php (lines 55-131 and
 * 897-975).
 *
 * WHY THIS IS NOT IN sleektap-cascade.css. WordPress emitted these rules only
 * on this one template, and several names are generic enough to collide:
 * `.tab-btn` and `.product-thumb` in particular are the kind of name another
 * template could reasonably reuse. Loading them globally would restyle pages
 * that never had them, so the product page links this sheet itself.
 *
 * RELATIONSHIP TO sleektap-2026.css. The 2026 design layer ALREADY overrides
 * much of what is here — `.product-thumbs`, `.product-thumb`, `.tab-btn`,
 * `.design-tabs`, `.sleektap-setup .setup-*` and `.product-options .option`
 * are all re-stated there with `!important` (sleektap-2026.css:623-830). Those
 * overrides were written against THESE base rules and only change selected
 * properties, so the base declarations still have to exist: the 2026 layer
 * never sets `.product-thumb { overflow: hidden; cursor: pointer }` or the
 * `.product-thumb img` object-fit, and without them a thumbnail would show an
 * un-cropped image spilling past its rounded corner. The rules are therefore
 * kept verbatim and simply lose the fight where 2026 takes over, which is the
 * same cascade order the WordPress page had (header.php loaded sleektap-2026
 * last, and this template's <style> block came after it — see the ONE
 * DEVIATION note below).
 *
 * ONE DEVIATION, stated plainly: in WordPress this <style> block sat in the
 * BODY, so it won the cascade over sleektap-2026.css for equal-specificity
 * rules that 2026 did not mark `!important`. React hoists <link> elements into
 * <head>, so here 2026 wins those. In practice this changes nothing visible —
 * every property 2026 cares about it already marks `!important`, precisely
 * because it was written to beat this block.
 */

/* ---- from the first <style> block (product-detail.php:55-131) ---- */

.tab-btn {
	padding: 10px 20px;
	cursor: pointer;
	border: 1px solid #5C3694;
	background: #5C3694;
	border-radius: 10px;
	color: #fff;
	margin: 10px 2px 0px 0px;
}

.tab-btn.active {
	/* Pure black sits outside the palette; --st-ink is the site's darkest
	   ink and keeps the active pill on-brand at the same contrast. */
	background: #1A202C;
	color: #fff;
	border: 1px solid #1A202C;
}

.product-main-image-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
}

.product-main-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.product-thumb {
	flex: 0 0 calc(20% - 7px);
	aspect-ratio: 1 / 1;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.2s;
}

.product-thumb.active {
	border-color: #178d72;
}

.product-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-main-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	z-index: 2;
}

.product-main-nav.prev { left: 10px; }
.product-main-nav.next { right: 10px; }

/* ---- from the second <style> block (product-detail.php:897-975) ---- */

.uc-tab>.uc-active>a{
		font-size: 24px;
		font-weight: 600;
}

.sleektap-setup {
	position: relative;
	/* Full-bleed band rather than an inset rounded card, so it reads as
	   a section of the page like the other alternating bands instead of
	   a floating panel. The negative inline margin breaks it out of the
	   container it sits in; --body-scroll-width is set by app.js and
	   keeps the bleed off the scrollbar, which a flat 100vw would not. */
	margin-block: 2rem;
	margin-inline: calc(50% - 50vw + (var(--body-scroll-width, 0px) / 2));
	padding: 4.5rem 1.25rem;
	background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important;
	border-radius: 0;
	overflow: hidden;
}
.sleektap-setup .setup-inner {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
}
.sleektap-setup .setup-heading {
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.2;
	margin: 0 0 1rem;
}
.sleektap-setup .setup-heading span {
	color: #5C3694;
	font-weight: 700;
}
.sleektap-setup .setup-text {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #3f526a;
	max-width: 720px;
	margin: 0 auto;
}
.sleektap-setup .setup-step {
	position: relative;
	padding-top: 2rem;
}
.sleektap-setup .setup-num {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #5C3694;
	color: #000;
	font-weight: 800;
	font-size: 1.15rem;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	letter-spacing: -0.02em;
}
.sleektap-setup .setup-num::before {
	content: '';
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 1px solid rgba(92, 54, 148, 1);
}
.sleektap-setup .setup-card {
	background: #fff;
	border: 1px solid rgba(11, 29, 57, 0.08);
	border-radius: 14px;
	padding: 3rem 1.5rem 1.5rem;
	text-align: center;
	box-shadow: 0 6px 20px rgba(8, 10, 12, 0.04);
	transition: transform .3s ease, box-shadow .3s ease;
	height: 100%;
}
.sleektap-setup .setup-card:hover {
	transform: translateY(-6px);
}
.sleektap-setup .setup-card h3 {
	color: #0b1d39;
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 .5rem;
	line-height: 1.25;
}
.sleektap-setup .setup-card p {
	font-size: .95rem;
	line-height: 1.65;
	color: #3f526a;
	margin: 0;
}
@media (max-width: 767.98px) {
	.sleektap-setup {
		padding: 3rem 1rem;
		margin-block: 1.25rem;
	}
	.sleektap-setup .setup-num {
		width: 48px;
		height: 48px;
		font-size: 1rem;
	}
	.sleektap-setup .setup-card {
		padding: 2.5rem 1.25rem 1.25rem;
	}
}