/* ==========================================================================
   Ignite Peptides — Storefront
   Shared design language with the research gate: warm neutral field, oxblood
   accent, Inter for interface, Cormorant italic for emphasis.
   ========================================================================== */

:root {
	--ig-oxblood: #7d0600;
	--ig-oxblood-deep: #5c0400;
	--ig-oxblood-soft: #f3e7e5;
	--ig-ink: #16110f;
	--ig-ink-soft: #3d3633;
	--ig-stone: #8a8078;
	--ig-stone-light: #b5aca4;
	--ig-hairline: #e6ded5;
	--ig-warm-white: #fdfbf8;
	--ig-sand: #f6efe6;
	--ig-sand-deep: #efe5d8;
	--ig-gold: #a9853f;
	--ig-green: #2f6b4f;

	--ig-radius-card: 22px;
	--ig-radius-sm: 12px;
	--ig-radius-pill: 999px;

	--ig-shadow-card: 0 1px 2px rgba(22, 17, 15, 0.04),
		0 10px 28px -10px rgba(22, 17, 15, 0.12);

	--ig-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ig-font-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;

	--ig-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ig-max: 1240px;
}

/* ---------- Store shell ---------- */

.ig-store {
	background: var(--ig-warm-white);
	color: var(--ig-ink);
	font-family: var(--ig-font-sans);
	-webkit-font-smoothing: antialiased;
	line-height: 1.55;
}

.ig-store *,
.ig-store *::before,
.ig-store *::after {
	box-sizing: border-box;
}

.ig-wrap {
	width: 100%;
	max-width: var(--ig-max);
	margin: 0 auto;
	padding: 0 clamp(18px, 4vw, 40px);
}

.ig-section {
	padding: clamp(48px, 7vw, 92px) 0;
}

.ig-section--sand {
	background: linear-gradient(178deg, var(--ig-sand) 0%, #f8f2ea 100%);
}

/* ---------- Type ---------- */

.ig-eyebrow {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ig-stone);
}

.ig-h1 {
	margin: 0 0 20px;
	font-size: clamp(34px, 5.6vw, 62px);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: var(--ig-ink);
}

.ig-h1 em,
.ig-h2 em {
	font-family: var(--ig-font-serif);
	font-style: italic;
	font-weight: 500;
	color: var(--ig-oxblood);
	letter-spacing: -0.01em;
}

.ig-h2 {
	margin: 0 0 14px;
	font-size: clamp(26px, 3.6vw, 40px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.025em;
}

.ig-h3 {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.ig-lede {
	margin: 0 0 26px;
	max-width: 56ch;
	font-size: clamp(15.5px, 1.6vw, 17.5px);
	line-height: 1.65;
	color: var(--ig-ink-soft);
	text-wrap: pretty;
}

.ig-small {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ig-stone);
}

/* ---------- Buttons ---------- */

.ig-store .ig-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 15px 30px;
	border: 0 !important;
	border-radius: var(--ig-radius-pill) !important;
	background: var(--ig-ink) !important;
	color: #fff !important;
	font-family: var(--ig-font-sans) !important;
	font-size: 15.5px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	text-decoration: none !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background 0.2s var(--ig-ease), transform 0.2s var(--ig-ease), box-shadow 0.2s var(--ig-ease);
	white-space: nowrap;
}

.ig-store .ig-btn:hover {
	background: var(--ig-oxblood) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 12px 26px -12px rgba(125, 6, 0, 0.6);
}

.ig-store .ig-btn__arrow { transition: transform 0.22s var(--ig-ease); }
.ig-store .ig-btn:hover .ig-btn__arrow { transform: translateX(4px); }

.ig-store .ig-btn--ghost {
	background: transparent !important;
	color: var(--ig-ink) !important;
	border: 1.5px solid var(--ig-hairline) !important;
}

.ig-store .ig-btn--ghost:hover {
	background: var(--ig-sand) !important;
	border-color: var(--ig-stone-light) !important;
	color: var(--ig-ink) !important;
	box-shadow: none;
	transform: none;
}

.ig-store .ig-btn--sm {
	min-height: 44px;
	padding: 11px 22px;
	font-size: 14px !important;
}

/* ---------- Announcement strip ---------- */

.ig-announce {
	background: var(--ig-ink);
	color: #f7f2ec;
	font-size: 12.5px;
	letter-spacing: 0.02em;
}

.ig-announce__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 11px 20px;
	text-align: center;
}

.ig-announce strong { font-weight: 600; color: #fff; }

/* ---------- Header ---------- */

.ig-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(253, 251, 248, 0.92);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--ig-hairline);
}

.ig-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 74px;
}

.ig-logo {
	display: flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	color: var(--ig-ink);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: -0.02em;
	flex: 0 0 auto;
}

.ig-logo img {
	height: 38px;
	width: auto;
	display: block;
}

.ig-logo__mark {
	display: block;
	width: 34px;
	height: 34px;
	border-radius: 6px;
}

@media (max-width: 600px) {
	.ig-logo img { height: 30px; }
}

.ig-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 auto;
	justify-content: center;
}

.ig-nav a {
	padding: 9px 14px;
	border-radius: var(--ig-radius-pill);
	color: var(--ig-ink-soft);
	font-size: 14.5px;
	font-weight: 450;
	text-decoration: none;
	transition: background 0.18s var(--ig-ease), color 0.18s var(--ig-ease);
}

.ig-nav a:hover {
	background: var(--ig-sand);
	color: var(--ig-ink);
}

.ig-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.ig-icon-btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--ig-hairline) !important;
	border-radius: 50%;
	background: #fff !important;
	color: var(--ig-ink) !important;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.18s var(--ig-ease), background 0.18s var(--ig-ease);
}

.ig-icon-btn:hover {
	background: var(--ig-sand) !important;
	border-color: var(--ig-stone-light) !important;
	color: var(--ig-ink) !important;
}

.ig-icon-btn__count {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: var(--ig-radius-pill);
	background: var(--ig-oxblood);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 19px;
	text-align: center;
}

/* ---------- Cart button with reward progress ----------
   The reward ladder rides the cart button so it reads as part of the cart and
   stays in the sticky header while the page scrolls. Compact while the full
   strip is on screen; expands once the strip has scrolled away. */

.ig-cartbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0;
	border: 1px solid var(--ig-hairline);
	border-radius: var(--ig-radius-pill);
	background: #fff;
	color: var(--ig-ink);
	text-decoration: none;
	transition: background 0.18s var(--ig-ease), border-color 0.18s var(--ig-ease), box-shadow 0.3s var(--ig-ease);
}

.ig-cartbtn:hover {
	background: var(--ig-sand);
	border-color: var(--ig-stone-light);
}

.ig-cartbtn:focus-visible {
	outline: 2px solid var(--ig-oxblood);
	outline-offset: 3px;
}

.ig-cartbtn__info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	max-width: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	white-space: nowrap;
	transition: max-width 0.45s var(--ig-ease), padding 0.45s var(--ig-ease), opacity 0.25s var(--ig-ease);
}

.ig-header.is-docked .ig-cartbtn__info {
	max-width: 280px;
	padding: 0 6px 0 18px;
	opacity: 1;
	transition-delay: 0s, 0s, 0.12s;
}

.ig-cartbtn__msg {
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1;
	color: var(--ig-ink-soft);
}

.ig-cartbtn__msg b {
	font-weight: 700;
	color: var(--ig-oxblood);
}

.ig-cartbtn.is-complete .ig-cartbtn__msg { color: var(--ig-green); font-weight: 600; }

.ig-cartbtn__segs {
	display: grid;
	grid-template-columns: repeat(var(--rw-cols, 4), minmax(0, 1fr));
	gap: 3px;
	min-width: 168px;
}

.ig-cartbtn__seg {
	height: 4px;
	overflow: hidden;
	border-radius: 2px;
	background: #ece4da;
}

.ig-cartbtn__seg .ig-rw__fill {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: linear-gradient(90deg, #d9b56a 0%, #a9853f 100%);
	transition: width 0.7s var(--ig-ease);
}

.ig-cartbtn__seg.is-done .ig-rw__fill { background: linear-gradient(90deg, #4c8a68 0%, #2f6b4f 100%); }

.ig-cartbtn__icon {
	position: relative;
	display: grid;
	place-items: center;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
}

.ig-cartbtn__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	pointer-events: none;
}

.ig-cartbtn__ring circle {
	fill: none;
	stroke-width: 2.6;
}

.ig-cartbtn__ring-track { stroke: #efe7dd; }

.ig-cartbtn__ring-bar {
	stroke: #a9853f;
	stroke-linecap: round;
	transition: stroke-dasharray 0.8s var(--ig-ease);
}

.ig-cartbtn.is-complete .ig-cartbtn__ring-bar { stroke: var(--ig-green); }

.ig-cartbtn .ig-icon-btn__count { top: -4px; right: -4px; }

/* A nudge when an add-to-cart changes the numbers. */
.ig-cartbtn.is-bumped { animation: ig-cart-bump 0.9s var(--ig-ease); }

@keyframes ig-cart-bump {
	0% { box-shadow: 0 0 0 0 rgba(169, 133, 63, 0.45); }
	100% { box-shadow: 0 0 0 12px rgba(169, 133, 63, 0); }
}

/* The strip hangs from the cart button: a tail under the cart icon. */
.ih-promo__notch {
	position: absolute;
	top: 0;
	left: var(--cart-x, -40px);
	z-index: 2;
	width: 18px;
	height: 9px;
	background: #fdfbf8;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform: translateX(-50%);
	pointer-events: none;
}

.ig-rw__cartlabel {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-right: 9px;
	padding: 2px 9px 2px 7px;
	border-radius: var(--ig-radius-pill);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	vertical-align: 1px;
}

/* Phones: no room in the header row, so once docked the progress drops into a
   slim bar fixed under the header, with a tail pointing at the cart icon. */
@media (max-width: 760px) {
	.ig-cartbtn {
		position: static;
		width: 44px;
		border-radius: 50%;
	}

	.ig-cartbtn__icon { position: relative; }

	.ig-cartbtn__info,
	.ig-header.is-docked .ig-cartbtn__info {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		max-width: none;
		height: 0;
		padding: 0 clamp(18px, 4vw, 40px);
		overflow: visible;
		background: linear-gradient(90deg, #1b0e0c 0%, #2a0d09 50%, #1b0e0c 100%);
		opacity: 0;
		visibility: hidden;
		transition: height 0.3s var(--ig-ease), opacity 0.2s var(--ig-ease), visibility 0s linear 0.3s;
	}

	.ig-header.is-docked .ig-cartbtn__info {
		height: 36px;
		opacity: 1;
		visibility: visible;
		transition: height 0.3s var(--ig-ease), opacity 0.2s var(--ig-ease) 0.08s, visibility 0s;
	}

	.ig-cartbtn__info::before {
		content: "";
		position: absolute;
		top: -6px;
		left: var(--cart-x, 90%);
		width: 14px;
		height: 7px;
		background: #23100c;
		clip-path: polygon(50% 0, 100% 100%, 0 100%);
		transform: translateX(-50%);
	}

	.ig-cartbtn__msg { color: rgba(247, 242, 236, 0.86); font-size: 12px; }
	.ig-cartbtn__msg b { color: #e2c08a; }
	.ig-cartbtn.is-complete .ig-cartbtn__msg { color: #9fd4b4; }

	.ig-cartbtn__segs {
		flex: 0 1 38%;
		min-width: 96px;
	}

	.ig-cartbtn__seg { background: rgba(255, 255, 255, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
	.ig-cartbtn,
	.ig-cartbtn__info,
	.ig-cartbtn__ring-bar,
	.ig-cartbtn__seg .ig-rw__fill { transition: none !important; }
	.ig-cartbtn.is-bumped { animation: none; }
}

/* ---------- Hero ---------- */

.ig-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(52px, 8vw, 104px) 0 clamp(40px, 6vw, 76px);
	background:
		radial-gradient(90% 70% at 15% 0%, #fffdfa 0%, rgba(253, 251, 248, 0) 62%),
		linear-gradient(172deg, #fdfbf8 0%, #f8f2ea 48%, #f4ece1 100%);
}

.ig-hero::after {
	content: "";
	position: absolute;
	top: -18%;
	right: -12%;
	width: 46vw;
	height: 46vw;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(125, 6, 0, 0.07), transparent 68%);
	filter: blur(50px);
	pointer-events: none;
}

.ig-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.ig-hero__copy { max-width: 560px; }

.ig-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.ig-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border: 1px solid var(--ig-hairline);
	border-radius: var(--ig-radius-pill);
	background: rgba(255, 255, 255, 0.72);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ig-ink-soft);
	white-space: nowrap;
}

.ig-chip svg { flex: 0 0 auto; color: var(--ig-oxblood); }

.ig-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 24px;
}

.ig-hero__proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	padding-top: 22px;
	border-top: 1px solid var(--ig-hairline);
	font-size: 13px;
	color: var(--ig-stone);
}

.ig-hero__proof strong {
	display: block;
	font-size: 20px;
	font-weight: 600;
	color: var(--ig-ink);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* Product collage on the right */

.ig-collage {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.ig-collage__item {
	position: relative;
	overflow: hidden;
	border-radius: var(--ig-radius-card);
	background: #fff;
	border: 1px solid var(--ig-hairline);
	box-shadow: var(--ig-shadow-card);
	animation: ig-rise 0.7s var(--ig-ease) both;
}

.ig-collage__item:nth-child(1) { animation-delay: 0.04s; transform: translateY(-14px); }
.ig-collage__item:nth-child(2) { animation-delay: 0.10s; transform: translateY(10px); }
.ig-collage__item:nth-child(3) { animation-delay: 0.16s; transform: translateY(-6px); }
.ig-collage__item:nth-child(4) { animation-delay: 0.22s; transform: translateY(18px); }

.ig-collage__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

@keyframes ig-rise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; }
}

.ig-collage__badge {
	position: absolute;
	bottom: 14px;
	left: 14px;
	right: 14px;
	padding: 9px 12px;
	border-radius: 10px;
	background: rgba(253, 251, 248, 0.94);
	backdrop-filter: blur(6px);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ig-ink);
	box-shadow: 0 6px 16px -8px rgba(22, 17, 15, 0.25);
}

.ig-collage__badge span {
	display: block;
	font-weight: 400;
	font-size: 11px;
	color: var(--ig-stone);
	letter-spacing: 0;
	margin-top: 1px;
}

/* ---------- Trust bar ---------- */

.ig-trust {
	border-top: 1px solid var(--ig-hairline);
	border-bottom: 1px solid var(--ig-hairline);
	background: #fff;
}

.ig-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--ig-hairline);
}

.ig-trust__item {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 24px clamp(14px, 2vw, 26px);
	background: #fff;
}

.ig-trust__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--ig-oxblood-soft);
	color: var(--ig-oxblood);
	flex: 0 0 auto;
}

.ig-trust__label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.ig-trust__sub {
	font-size: 12.5px;
	color: var(--ig-stone);
	line-height: 1.35;
	margin-top: 2px;
}

/* ---------- Section head ---------- */

.ig-sec-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 clamp(26px, 3.5vw, 42px);
}

.ig-sec-head__copy { max-width: 620px; }

.ig-sec-head__link {
	flex: 0 0 auto;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ig-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.ig-sec-head__link:hover { color: var(--ig-oxblood); }

/* ---------- Category cards ---------- */

.ig-cats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.ig-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 240px;
	padding: 24px;
	overflow: hidden;
	border-radius: var(--ig-radius-card);
	background: var(--ig-sand);
	border: 1px solid var(--ig-hairline);
	text-decoration: none;
	color: var(--ig-ink);
	transition: transform 0.28s var(--ig-ease), box-shadow 0.28s var(--ig-ease);
}

.ig-cat:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -20px rgba(22, 17, 15, 0.3);
}

.ig-cat__img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.5;
	transition: transform 0.5s var(--ig-ease), opacity 0.3s var(--ig-ease);
}

.ig-cat:hover .ig-cat__img {
	transform: scale(1.05);
	opacity: 0.62;
}

.ig-cat::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(253, 251, 248, 0.98) 6%, rgba(253, 251, 248, 0.82) 34%, rgba(253, 251, 248, 0.18) 76%, transparent 100%);
}

.ig-cat__body {
	position: relative;
	z-index: 1;
}

.ig-cat__name {
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0 0 3px;
	color: var(--ig-ink) !important;
}

.ig-cat__count {
	font-size: 13px;
	color: var(--ig-stone);
	margin: 0;
	display: block;
}

.ig-cat__arrow {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--ig-ink);
	font-size: 15px;
	transition: background 0.2s var(--ig-ease), transform 0.2s var(--ig-ease);
}

.ig-cat:hover .ig-cat__arrow {
	background: var(--ig-oxblood);
	color: #fff;
	transform: translateX(2px);
}

/* ---------- Product grid ---------- */

.ig-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 22px);
}

.ig-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ig-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ig-hairline);
	border-radius: var(--ig-radius-card);
	background: #fff;
	transition: transform 0.26s var(--ig-ease), box-shadow 0.26s var(--ig-ease), border-color 0.26s var(--ig-ease);
}

.ig-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 44px -22px rgba(22, 17, 15, 0.34);
	border-color: #dcd2c7;
}

.ig-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--ig-sand);
	aspect-ratio: 1 / 1;
}

.ig-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ig-ease);
}

/* Vial cutouts are ~2:1 (368x738 after trimming the template's empty canvas),
   so they must be height-driven and contained. The cover rule above is right for
   flat label renders but crops a tall bottle to a square. */
.ig-card__media img.ig-card__vial {
	width: auto;
	height: 82%;
	max-width: 84%;
	margin: 0 auto;
	object-fit: contain;
	padding: 0;
}

.ig-card:hover .ig-card__media img { transform: scale(1.045); }

/* COA badge and flat label renders: shared by the homepage, the catalog and
   search results, so they live here rather than in the homepage sheet. */
.ig-card__coa {
	position: absolute;
	left: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px 5px 8px;
	border-radius: var(--ig-radius-pill);
	background: rgba(255, 255, 255, 0.93);
	font-size: 11px;
	font-weight: 600;
	color: var(--ig-green);
	letter-spacing: 0.01em;
	box-shadow: 0 2px 10px -3px rgba(22, 17, 15, 0.18);
}

.ig-card__flat {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ig-card__flag {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 11px;
	border-radius: var(--ig-radius-pill);
	background: var(--ig-oxblood);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ig-card__flag--soft {
	background: rgba(253, 251, 248, 0.94);
	color: var(--ig-ink);
	box-shadow: 0 2px 8px rgba(22, 17, 15, 0.12);
}

.ig-card__purity {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 5px 10px;
	border-radius: var(--ig-radius-pill);
	background: rgba(253, 251, 248, 0.94);
	font-size: 11px;
	font-weight: 600;
	color: var(--ig-green);
	letter-spacing: 0.01em;
	box-shadow: 0 2px 8px rgba(22, 17, 15, 0.10);
}

.ig-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 16px 16px 18px;
	gap: 4px;
}

.ig-card__row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ig-card__stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ig-green);
}

.ig-card__stock::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.ig-card__name {
	margin: 2px 0 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var(--ig-ink);
}

.ig-card__name a {
	color: inherit;
	text-decoration: none;
}

.ig-card__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 12px;
}

.ig-card__price {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ig-ink);
}

.ig-card__price del {
	margin-right: 7px;
	font-size: 13px;
	font-weight: 400;
	color: var(--ig-stone-light);
}

.ig-card__unit {
	font-size: 11.5px;
	color: var(--ig-stone);
}

.ig-card__cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 40px;
	margin-top: 12px;
	padding: 10px 16px;
	border: 1.5px solid var(--ig-ink) !important;
	border-radius: var(--ig-radius-pill) !important;
	background: transparent !important;
	color: var(--ig-ink) !important;
	font-family: var(--ig-font-sans) !important;
	font-size: 13.5px !important;
	font-weight: 550 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background 0.2s var(--ig-ease), color 0.2s var(--ig-ease), border-color 0.2s var(--ig-ease);
}

.ig-card__cart:hover {
	background: var(--ig-ink) !important;
	color: #fff !important;
}

.ig-card__cart--added {
	background: var(--ig-green) !important;
	border-color: var(--ig-green) !important;
	color: #fff !important;
}

/* ---------- Why Ignite ---------- */

.ig-feats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(18px, 3vw, 34px);
}

.ig-feat {
	padding: 28px 26px;
	border-radius: var(--ig-radius-card);
	background: #fff;
	border: 1px solid var(--ig-hairline);
}

.ig-feat__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 18px;
	border-radius: 13px;
	background: var(--ig-oxblood-soft);
	color: var(--ig-oxblood);
}

.ig-feat__title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.ig-feat__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ig-ink-soft);
}

/* ---------- COA band ---------- */

.ig-coa {
	position: relative;
	overflow: hidden;
	border-radius: var(--ig-radius-card);
	background: linear-gradient(135deg, var(--ig-ink) 0%, #2a2320 100%);
	color: #f7f2ec;
	padding: clamp(34px, 5vw, 60px);
}

.ig-coa::after {
	content: "";
	position: absolute;
	right: -40px;
	bottom: -60px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(125, 6, 0, 0.55), transparent 70%);
	filter: blur(30px);
}

.ig-coa__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 34px;
	align-items: center;
}

.ig-coa .ig-h2 { color: #fff; }
.ig-coa .ig-h2 em { color: #e8b9b4; }
.ig-coa__text {
	margin: 0 0 24px;
	max-width: 52ch;
	font-size: 15.5px;
	line-height: 1.65;
	color: rgba(247, 242, 236, 0.82);
}

.ig-coa__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	padding: 24px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.ig-coa__stat strong {
	display: block;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: #fff;
}

.ig-coa__stat span {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	letter-spacing: 0.03em;
	color: rgba(247, 242, 236, 0.62);
}

.ig-store .ig-coa .ig-btn {
	background: #fff !important;
	color: var(--ig-ink) !important;
}

.ig-store .ig-coa .ig-btn:hover {
	background: var(--ig-oxblood) !important;
	color: #fff !important;
}

/* ---------- Shop layout ---------- */

.ig-shop-head {
	padding: clamp(36px, 5vw, 64px) 0 clamp(24px, 3vw, 36px);
	background: linear-gradient(180deg, var(--ig-sand) 0%, var(--ig-warm-white) 100%);
	border-bottom: 1px solid var(--ig-hairline);
}

.ig-shop-head__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.ig-shop-layout {
	display: grid;
	grid-template-columns: 244px minmax(0, 1fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
	padding: clamp(28px, 4vw, 44px) 0 clamp(60px, 8vw, 100px);
}

.ig-filters {
	position: sticky;
	top: 92px;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.ig-filter__title {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ig-stone);
}

.ig-filter__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ig-filter__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 9px;
	color: var(--ig-ink-soft);
	font-size: 14.5px;
	text-decoration: none;
	transition: background 0.16s var(--ig-ease), color 0.16s var(--ig-ease);
}

.ig-filter__link:hover {
	background: var(--ig-sand);
	color: var(--ig-ink);
}

.ig-filter__link[aria-current="page"] {
	background: var(--ig-ink);
	color: #fff;
	font-weight: 550;
}

.ig-filter__count {
	font-size: 12.5px;
	color: var(--ig-stone-light);
}

.ig-filter__link[aria-current="page"] .ig-filter__count { color: rgba(255, 255, 255, 0.6); }

.ig-sort {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--ig-stone);
}

.ig-sort select {
	min-height: 44px;
	padding: 10px 34px 10px 14px;
	border: 1.5px solid var(--ig-hairline) !important;
	border-radius: var(--ig-radius-pill) !important;
	background: #fff !important;
	color: var(--ig-ink) !important;
	font-family: var(--ig-font-sans) !important;
	font-size: 14px !important;
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2316110f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 12px !important;
}

.ig-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}

.ig-result-count {
	font-size: 13.5px;
	color: var(--ig-stone);
}

/* ---------- Empty state ---------- */

.ig-empty {
	padding: 60px 24px;
	border: 1px dashed var(--ig-hairline);
	border-radius: var(--ig-radius-card);
	text-align: center;
	background: var(--ig-sand);
}

.ig-empty__title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 600;
}

.ig-empty__text {
	margin: 0 0 20px;
	color: var(--ig-stone);
	font-size: 14.5px;
}

/* ---------- Footer ---------- */

.ig-foot {
	margin-top: 20px;
	padding: clamp(40px, 5vw, 64px) 0 26px;
	background: var(--ig-ink);
	color: rgba(247, 242, 236, 0.72);
	font-size: 14px;
}

.ig-foot a {
	color: rgba(247, 242, 236, 0.82);
	text-decoration: none;
	transition: color 0.16s var(--ig-ease);
}

.ig-foot a:hover { color: #fff; }

.ig-foot__grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: 34px;
	padding-bottom: 34px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ig-foot__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: -0.02em;
}

.ig-foot__brand .ig-logo__mark {
	width: 30px;
	height: 30px;
	border-radius: 5px;
}

.ig-foot__about {
	margin: 0 0 16px;
	max-width: 34ch;
	font-size: 13.5px;
	line-height: 1.6;
}

.ig-foot__title {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(247, 242, 236, 0.5);
}

.ig-foot__list {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
}

.ig-foot__ruo {
	padding: 18px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 11.5px;
	line-height: 1.65;
	color: rgba(247, 242, 236, 0.5);
	letter-spacing: 0.02em;
}

.ig-foot__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-top: 20px;
	font-size: 12.5px;
	color: rgba(247, 242, 236, 0.45);
	flex-wrap: wrap;
}

/* ---------- Product detail ---------- */

.ig-pdp {
	padding-bottom: 0;
}

.ig-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 20px 0 0;
	font-size: 13px;
	color: var(--ig-stone-light);
}

.ig-crumbs a {
	color: var(--ig-stone);
	text-decoration: none;
}

.ig-crumbs a:hover { color: var(--ig-oxblood); }

.ig-crumbs [aria-current="page"] { color: var(--ig-ink); font-weight: 500; }

.ig-pdp__grid {
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	gap: clamp(28px, 5vw, 68px);
	align-items: start;
	padding: clamp(22px, 3.5vw, 40px) 0 clamp(40px, 6vw, 68px);
}

.ig-pdp__media { position: sticky; top: 96px; }

.ig-pdp__frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--ig-radius-card);
	border: 1px solid var(--ig-hairline);
	background: linear-gradient(160deg, #fff 0%, var(--ig-sand) 100%);
	aspect-ratio: 1 / 1;
}

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

/* Vial cutouts are ~2:1, so the frame centres them on a soft stage instead of
   stretching the bottle to fill a square. Flex, not grid: a percentage height
   inside `place-items: center` resolves against the item itself, so the image
   would size from its natural pixels instead of the frame. */
.ig-pdp__frame--vial {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f7f5fd;
}

.ig-pdp__frame--vial img {
	flex: 0 0 auto;
	width: auto;
	height: auto;
	max-width: 62%;
	max-height: calc(100% - 88px);
	object-fit: contain;
	filter: drop-shadow(0 16px 28px rgba(48, 36, 30, 0.10));
}

.ig-pdp__flag {
	position: absolute;
	left: 16px;
	bottom: 16px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: var(--ig-radius-pill);
	background: rgba(253, 251, 248, 0.95);
	backdrop-filter: blur(6px);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--ig-green);
	box-shadow: 0 6px 18px -10px rgba(22, 17, 15, 0.4);
}

.ig-pdp__thumbs {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	flex-wrap: wrap;
}

.ig-pdp__thumb {
	width: 72px;
	height: 72px;
	padding: 0;
	overflow: hidden;
	border: 1.5px solid var(--ig-hairline) !important;
	border-radius: 12px;
	background: #fff !important;
	cursor: pointer;
	transition: border-color 0.18s var(--ig-ease);
}

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

.ig-pdp__thumb.is-active,
.ig-pdp__thumb:hover { border-color: var(--ig-ink) !important; }

.ig-pdp__title {
	margin: 0 0 14px;
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--ig-ink);
}

.ig-pdp__strength {
	display: inline-block;
	margin-left: 4px;
	font-family: var(--ig-font-serif);
	font-style: italic;
	font-weight: 500;
	color: var(--ig-oxblood);
	letter-spacing: -0.01em;
}

.ig-pdp__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--ig-hairline);
}

.ig-pdp__price {
	font-size: 27px;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--ig-ink);
}

.ig-pdp__price del {
	margin-right: 9px;
	font-size: 17px;
	font-weight: 400;
	color: var(--ig-stone-light);
}

.ig-pdp__price ins { text-decoration: none; }

.ig-pdp__stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 550;
}

.ig-pdp__stock::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.ig-pdp__stock.is-in { color: var(--ig-green); }
.ig-pdp__stock.is-out { color: var(--ig-stone); }

.ig-pdp__short {
	margin: 0 0 24px;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ig-ink-soft);
	max-width: 54ch;
}

.ig-pdp__buy {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.ig-qty {
	display: inline-flex;
	align-items: center;
	height: 54px;
	border: 1.5px solid var(--ig-hairline);
	border-radius: var(--ig-radius-pill);
	background: #fff;
	overflow: hidden;
	flex: 0 0 auto;
}

.ig-qty__btn {
	width: 44px;
	height: 100%;
	border: 0 !important;
	background: transparent !important;
	color: var(--ig-ink) !important;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.16s var(--ig-ease);
}

.ig-qty__btn:hover { background: var(--ig-sand) !important; }

.ig-qty__input {
	width: 46px;
	height: 100%;
	border: 0 !important;
	background: transparent !important;
	color: var(--ig-ink) !important;
	font-family: var(--ig-font-sans) !important;
	font-size: 15px !important;
	font-weight: 550 !important;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.ig-qty__input::-webkit-outer-spin-button,
.ig-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ig-store .ig-pdp__add { flex: 1 1 220px; }

.ig-pdp__reassure {
	margin: 0 0 24px;
	font-size: 12.5px;
}

.ig-pdp__points {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.ig-pdp__points li {
	display: flex;
	gap: 11px;
	font-size: 13.8px;
	line-height: 1.55;
	color: var(--ig-ink-soft);
}

.ig-pdp__points svg {
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--ig-oxblood);
}

.ig-pdp__points strong { color: var(--ig-ink); font-weight: 600; }

.ig-pdp__notice {
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--ig-sand);
	border: 1px solid var(--ig-hairline);
	font-size: 11.5px;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: var(--ig-stone);
}

/* Details band */

.ig-pdp__details {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 328px;
	gap: clamp(26px, 4vw, 56px);
	padding: clamp(30px, 4vw, 48px) 0 clamp(52px, 7vw, 84px);
	border-top: 1px solid var(--ig-hairline);
	align-items: start;
}

.ig-prose {
	max-width: 66ch;
	font-size: 15.5px;
	line-height: 1.72;
	color: var(--ig-ink-soft);
}

.ig-prose p { margin: 0 0 16px; }
.ig-prose h2,
.ig-prose h3 { color: var(--ig-ink); letter-spacing: -0.015em; }
.ig-prose ul { padding-left: 20px; }
.ig-prose li { margin-bottom: 6px; }

.ig-pdp__coa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 26px;
	padding: 20px 22px;
	border-radius: 16px;
	background: var(--ig-sand);
	border: 1px solid var(--ig-hairline);
}

.ig-pdp__coa-title {
	margin: 0 0 3px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.ig-pdp__coa-sub {
	margin: 0;
	font-size: 13px;
	color: var(--ig-stone);
}

.ig-pdp__side-title {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ig-stone);
}

.ig-specs {
	margin: 0 0 24px;
	padding: 0;
	border-top: 1px solid var(--ig-hairline);
}

.ig-specs > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--ig-hairline);
}

.ig-specs dt {
	font-size: 13px;
	color: var(--ig-stone);
}

.ig-specs dd {
	margin: 0;
	font-size: 13.5px;
	font-weight: 550;
	color: var(--ig-ink);
	text-align: right;
}

.ig-pdp__help {
	padding: 20px;
	border-radius: 16px;
	background: var(--ig-sand);
	border: 1px solid var(--ig-hairline);
}

.ig-pdp__help-title {
	margin: 0 0 5px;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.ig-pdp__help-sub {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ig-stone);
}

.ig-pdp__help-link {
	display: block;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ig-ink);
	text-decoration: none;
	padding: 3px 0;
}

.ig-pdp__help-link:hover { color: var(--ig-oxblood); }

@media (max-width: 1080px) {
	.ig-pdp__grid { grid-template-columns: 1fr; }
	.ig-pdp__media { position: static; max-width: 520px; }
	.ig-pdp__details { grid-template-columns: 1fr; }
}

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

@media (max-width: 1080px) {
	.ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ig-hero__grid { grid-template-columns: 1fr; }
	.ig-collage { max-width: 520px; }
	.ig-coa__inner { grid-template-columns: 1fr; }
	.ig-foot__grid { grid-template-columns: 1fr 1fr; gap: 26px; }
}

@media (max-width: 900px) {
	.ig-nav { display: none; }
	.ig-shop-layout { grid-template-columns: 1fr; }
	.ig-filters {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 18px;
		padding-bottom: 20px;
		border-bottom: 1px solid var(--ig-hairline);
	}
	.ig-filter { min-width: 180px; flex: 1 1 auto; }
	.ig-trust__grid { grid-template-columns: 1fr 1fr; }
	.ig-cats { grid-template-columns: 1fr; }
	.ig-feats { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
	.ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.ig-card__body { padding: 13px 13px 15px; }
	.ig-card__name { font-size: 14px; }
	.ig-card__price { font-size: 15.5px; }
	.ig-sec-head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.ig-hero__proof { gap: 14px; }
	.ig-hero__proof strong { font-size: 17px; }
	.ig-foot__grid { grid-template-columns: 1fr; }
	.ig-trust__grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
	.ig-collage { grid-template-columns: 1fr 1fr; gap: 10px; }
	.ig-hero__cta .ig-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.ig-store *,
	.ig-store *::before,
	.ig-store *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* Theme reset guard: Hello Elementor resets buttons with !important. */
.ig-store button.ig-btn,
.ig-store a.ig-btn,
.ig-store button.ig-card__cart,
.ig-store a.ig-card__cart {
	text-decoration: none !important;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.ig-store :focus-visible {
	outline: 2px solid var(--ig-oxblood);
	outline-offset: 3px;
}

/* Elementor Pro prints its popups (the legacy mobile menu, 17440, and the old
   sign-in popup, 29583) into wp_footer on every page. On the custom templates
   the popup script and CSS are dequeued, so they cannot open — they just render
   inline as ~14,000px of unstyled menu and 2,000px icons under the footer. This
   sheet only prints on the custom templates, so cart/checkout are unaffected. */
.ignite-store-body .elementor-location-popup {
	display: none !important;
}

/* ---------- Catalog (flat toolbar, no sidebar) ---------- */

.ig-catalog {
	padding: clamp(24px, 3vw, 40px) 0 clamp(48px, 7vw, 88px);
}

.ig-catalog-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: clamp(20px, 3vw, 36px);
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ig-hairline);
}

.ig-catalog-count {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--ig-stone);
}

.ig-catalog-cats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.ig-catalog-cat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 14px;
	border-radius: var(--ig-radius-pill);
	border: 1px solid var(--ig-hairline);
	background: #fff;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ig-ink-soft);
	text-decoration: none;
	transition: background 0.2s var(--ig-ease), color 0.2s var(--ig-ease), border-color 0.2s var(--ig-ease);
}

.ig-catalog-cat span {
	font-size: 12px;
	color: var(--ig-stone-light);
}

.ig-catalog-cat:hover {
	background: var(--ig-sand);
	border-color: #d4cabf;
	color: var(--ig-ink);
}

.ig-catalog-cat.is-active {
	background: var(--ig-ink);
	border-color: var(--ig-ink);
	color: #fff;
}

.ig-catalog-cat.is-active span { color: rgba(255,255,255,0.55); }

/* 4-column grid for the catalog */
.ig-grid--4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

@media (max-width: 1024px) { .ig-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .ig-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 400px)  { .ig-grid--4 { grid-template-columns: 1fr; } }


/* ---------- Reward banner (all storefront pages) ---------- */
.ih-promo {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(60% 140% at 12% 50%, rgba(169, 133, 63, 0.22) 0%, rgba(169, 133, 63, 0) 60%),
		linear-gradient(90deg, #1b0e0c 0%, #2a0d09 50%, #1b0e0c 100%);
	color: rgba(247, 242, 236, 0.78);
}

/* Fine speckle, echoing the starfield on the reference without an image. */
.ih-promo::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1px 1px at 8% 30%, rgba(255, 255, 255, 0.5), transparent 60%),
		radial-gradient(1px 1px at 22% 70%, rgba(255, 255, 255, 0.35), transparent 60%),
		radial-gradient(1px 1px at 41% 25%, rgba(255, 255, 255, 0.4), transparent 60%),
		radial-gradient(1px 1px at 63% 80%, rgba(255, 255, 255, 0.35), transparent 60%),
		radial-gradient(1px 1px at 78% 35%, rgba(255, 255, 255, 0.45), transparent 60%),
		radial-gradient(1px 1px at 92% 65%, rgba(255, 255, 255, 0.3), transparent 60%);
	pointer-events: none;
}

.ih-promo__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-height: 52px;
	padding-top: 10px;
	padding-bottom: 11px;
	font-size: 13px;
}

/* Timer rides the right end of the ladder's message row. */
.ih-promo .ig-rw--strip { position: relative; }

.ih-promo .ig-rw--strip .ig-rw__msg { padding-right: 210px; }

.ih-promo__timer {
	position: absolute;
	right: 0;
	top: -2px;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	padding: 4px 12px;
	border-radius: 8px;
	background: #fdfbf8;
	color: var(--ig-ink);
	line-height: 1.15;
}

.ih-promo__timer[hidden] { display: none; }

.ih-promo__timer-label {
	font-size: 9.5px;
	letter-spacing: 0.04em;
	color: var(--ig-stone);
}

.ih-promo__timer-value {
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}


@media (max-width: 640px) {
	.ih-promo__timer {
		position: static;
		align-self: flex-start;
		margin-top: 8px;
	}

	.ih-promo .ig-rw--strip .ig-rw__msg { padding-right: 0; }
}


/* ---------- BOGO: second unit at no charge ---------- */
.ig-bogo{margin:0 0 20px;padding:14px 18px;border-radius:12px;background:#f3e2c3;color:#3d3633;font-size:14px;line-height:1.5}
.ig-bogo strong{color:#7d0600;margin-right:4px}
.ig-card__bogo{position:absolute;top:12px;left:12px;z-index:2;padding:4px 10px;border-radius:999px;background:#7d0600;color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em}


/* ==========================================================================
   Motion layer
   Recreations of the Amicro / 23rd.dev patterns, in plain CSS:
   glare sweep on primary buttons, a slide-arrow that exits and re-enters,
   headline reveals on scroll, and a footer aurora that stretches up as you
   reach the bottom of the page. Everything here is decorative and every rule
   is disabled under prefers-reduced-motion at the end of this block.
   ========================================================================== */

/* ---------- Glare sweep ---------- */

.ig-store .ig-btn { position: relative; overflow: hidden; }

.ig-store .ig-btn::after {
	content: "";
	position: absolute;
	top: -120%;
	bottom: -120%;
	left: 0;
	width: 26%;
	/* Asymmetric falloff with a bright core: reads as a specular highlight
	   rather than a grey band sliding across the button. */
	background: linear-gradient(
		96deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.06) 34%,
		rgba(255, 255, 255, 0.62) 50%,
		rgba(255, 255, 255, 0.10) 62%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: translateX(-180%) rotate(10deg);
	transition: transform 0.75s var(--ig-ease);
	pointer-events: none;
}

.ig-store .ig-btn:hover::after,
.ig-store .ig-btn:focus-visible::after { transform: translateX(420%) rotate(8deg); }

/* Ghost buttons are light, so the sweep would be invisible on them. */
.ig-store .ig-btn--ghost::after { display: none; }

/* ---------- Slide arrow ---------- */

.ig-store .ig-btn__arrow {
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1.15em;
	overflow: hidden;
	transform: none;
	transition: transform 0.38s var(--ig-ease);
}

/* Sits just outside the window and is carried in as the span slides out. */
.ig-store .ig-btn__arrow::after {
	content: "\2192";
	position: absolute;
	left: 0;
	top: 0;
	transform: translateX(-110%);
}

.ig-store .ig-btn:hover .ig-btn__arrow,
.ig-store .ig-btn:focus-visible .ig-btn__arrow { transform: translateX(110%); }

/* ---------- Headline reveal ---------- */

/* Only hidden once the script confirms it is running, so a JS failure leaves
   the text visible rather than blank. */
.js .ig-rv {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.55s linear, transform 0.75s var(--ig-ease);
}

.js .ig-rv.is-in { opacity: 1; transform: translateY(0); }

/* ---------- Footer aurora ---------- */

.ig-foot { position: relative; overflow: hidden; }

.ig-foot__aurora {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--a-h, 0px);
	background:
		linear-gradient(90deg, rgba(125, 6, 0, 0.55) 0%, rgba(169, 133, 63, 0.5) 28%, rgba(90, 70, 150, 0.45) 58%, rgba(47, 107, 79, 0.45) 100%);
	filter: blur(26px);
	opacity: calc(var(--a, 0) * 0.9);
	transform: scaleY(calc(0.35 + var(--a, 0) * 0.65));
	transform-origin: bottom center;
	pointer-events: none;
	transition: opacity 0.2s linear;
}

.ig-foot__grid,
.ig-foot__bottom,
.ig-foot__ruo { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
	.ig-store .ig-btn::after { display: none; }
	.ig-store .ig-btn__arrow,
	.ig-store .ig-btn:hover .ig-btn__arrow { transform: none; transition: none; }
	.ig-store .ig-btn__arrow::after { display: none; }
	.js .ig-rv { opacity: 1; transform: none; transition: none; }
	.ig-foot__aurora { display: none; }
}


/* The catalog's Add button is outlined, so the slide-arrow only earns its
   place once the button fills on hover. */
.ig-card__cart .ig-btn__arrow {
	position: relative;
	display: inline-block;
	width: 0;
	height: 1.1em;
	margin-left: 0;
	overflow: hidden;
	opacity: 0;
	transition: width 0.3s var(--ig-ease), margin-left 0.3s var(--ig-ease), opacity 0.2s var(--ig-ease), transform 0.38s var(--ig-ease);
}

.ig-card__cart .ig-btn__arrow::after {
	content: "\2192";
	position: absolute;
	left: 0;
	top: 0;
	transform: translateX(-110%);
}

.ig-card__cart:hover .ig-btn__arrow,
.ig-card__cart:focus-visible .ig-btn__arrow {
	width: 1em;
	margin-left: 6px;
	opacity: 1;
}

.ig-card__cart:hover .ig-btn__arrow { transform: translateX(110%); }

@media (prefers-reduced-motion: reduce) {
	.ig-card__cart .ig-btn__arrow { transition: none; }
	.ig-card__cart:hover .ig-btn__arrow,
	.ig-card__cart:focus-visible .ig-btn__arrow { transform: none; }
}


/* ---------- 404 ---------- */

.ig-404 {
	position: relative;
	padding: clamp(44px, 6vw, 84px) 0 clamp(36px, 4vw, 56px);
	background: linear-gradient(180deg, #fbf3e6 0%, #fdfbf8 100%);
	text-align: center;
	overflow: hidden;
}

.ig-404__num {
	margin: 0 0 -0.12em;
	font-size: clamp(96px, 20vw, 220px);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.06em;
	color: transparent;
	background: repeating-linear-gradient(45deg, rgba(125, 6, 0, 0.16) 0 1px, transparent 1px 5px), linear-gradient(180deg, #7d0600 0%, #a9853f 100%);
	-webkit-background-clip: text;
	background-clip: text;
	user-select: none;
}

.ig-404__title {
	margin: 0 0 14px;
	font-size: clamp(28px, 3.6vw, 44px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--ig-ink);
}

.ig-404__title em { font-family: var(--ig-font-serif); font-style: italic; font-weight: 600; color: var(--ig-oxblood); }

.ig-404__lede { max-width: 52ch; margin: 0 auto 26px; font-size: 15.5px; line-height: 1.65; color: var(--ig-ink-soft); }

.ig-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.ig-404__help { margin: 22px 0 0; font-size: 13.5px; color: var(--ig-stone); }

.ig-404__help a { color: var(--ig-ink) !important; text-decoration: underline !important; text-underline-offset: 3px; }

.ig-404__picks { padding: clamp(36px, 4vw, 56px) 0 clamp(48px, 6vw, 80px); background: #fff; }

.ig-404__picks .ig-h2 { margin-bottom: 24px; }


/* ---------- Order tracking ---------- */

.ig-track {
	padding: clamp(36px, 5vw, 64px) 0 clamp(56px, 7vw, 96px);
	background: var(--ig-sand);
}

.ig-track__wrap { max-width: 920px; }

.ig-track__head { margin-bottom: 28px; }

.ig-track__title {
	margin: 6px 0 10px;
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--ig-ink);
}

.ig-track__lede {
	max-width: 560px;
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ig-ink-soft);
}

.ig-track__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

.ig-track__grid--single { grid-template-columns: minmax(0, 560px); }

.ig-track__card,
.ig-track__order {
	padding: clamp(20px, 3vw, 30px);
	border: 1px solid var(--ig-hairline);
	border-radius: var(--ig-radius-card);
	background: #fff;
}

.ig-track__h2 {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--ig-ink);
}

.ig-track__hint {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ig-stone);
}

.ig-track__error {
	margin: 0 0 16px;
	padding: 11px 14px;
	border-radius: var(--ig-radius-sm);
	background: #fbeceb;
	color: #8a1c12;
	font-size: 13.5px;
	line-height: 1.45;
}

.ig-track__form { display: grid; gap: 14px; }

.ig-track__field { display: grid; gap: 6px; }

.ig-track__field span {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ig-ink-soft);
}

.ig-store .ig-track__field input {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	border: 1.5px solid var(--ig-hairline) !important;
	border-radius: var(--ig-radius-sm) !important;
	background: #fff !important;
	color: var(--ig-ink);
	font-family: var(--ig-font-sans);
	font-size: 16px;
	box-shadow: none;
}

.ig-store .ig-track__field input:focus {
	border-color: var(--ig-ink) !important;
	outline: none;
	box-shadow: 0 0 0 4px rgba(22, 17, 15, 0.07);
}

.ig-store .ig-track__submit { width: 100%; justify-content: center; margin-top: 4px; }

/* Signed-in order list. */
.ig-track__list {
	display: grid;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.ig-store .ig-track__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 14px;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	border: 1px solid var(--ig-hairline);
	border-radius: 14px;
	color: var(--ig-ink);
	text-decoration: none;
	transition: border-color 0.18s var(--ig-ease), background 0.18s var(--ig-ease);
}

.ig-store .ig-track__row:hover { border-color: var(--ig-stone-light); background: #fdfbf8; }

.ig-track__row-main { display: grid; gap: 3px; min-width: 0; }
.ig-track__row-main strong { font-size: 15px; }
.ig-track__row-main span { font-size: 12.5px; color: var(--ig-stone); }
.ig-track__chev { font-size: 20px; color: var(--ig-stone-light); }

.ig-track__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: var(--ig-radius-pill);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.ig-track__pill::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.ig-track__pill--good { background: #e7f3ec; color: var(--ig-green); }
.ig-track__pill--go { background: #f6eedf; color: #8a6a2c; }
.ig-track__pill--wait { background: #f1ede8; color: var(--ig-stone); }
.ig-track__pill--bad { background: #fbeceb; color: #8a1c12; }

/* Single order. */
.ig-track__status {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 26px;
}

.ig-track__status p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ig-ink);
}

.ig-track__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

/* Rail behind the dots, filled up to the current step. */
.ig-track__steps::before,
.ig-track__steps::after {
	content: "";
	position: absolute;
	top: 9px;
	left: 12.5%;
	height: 3px;
	border-radius: 2px;
}

.ig-track__steps::before { right: 12.5%; background: #ece4da; }

.ig-track__steps::after {
	width: calc(75% * var(--ig-track-done, 0) / 3);
	background: var(--ig-green);
	transition: width 0.8s var(--ig-ease);
}

.ig-track__steps li {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 4px;
	padding: 0 4px;
	text-align: center;
}

.ig-track__dot {
	width: 21px;
	height: 21px;
	margin-bottom: 6px;
	border: 3px solid #ece4da;
	border-radius: 50%;
	background: #fff;
}

.ig-track__steps li.is-done .ig-track__dot { border-color: var(--ig-green); background: var(--ig-green); }

.ig-track__steps li.is-current .ig-track__dot { box-shadow: 0 0 0 5px rgba(47, 107, 79, 0.16); }

.ig-track__steps strong {
	font-size: 13px;
	font-weight: 600;
	color: var(--ig-stone);
}

.ig-track__steps li.is-done strong { color: var(--ig-ink); }

.ig-track__steps li span {
	font-size: 11.5px;
	color: var(--ig-stone);
}

.ig-track__ship {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 22px;
	padding: 16px 18px;
	border-radius: 16px;
	background: var(--ig-sand);
}

.ig-track__ship-info { display: grid; gap: 3px; }

.ig-track__ship-carrier {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ig-stone);
}

.ig-track__ship-num {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ig-ink);
	word-break: break-all;
}

.ig-track__ship-actions { display: flex; align-items: center; gap: 8px; }

.ig-store .ig-track__copy {
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--ig-hairline) !important;
	border-radius: var(--ig-radius-pill) !important;
	background: #fff !important;
	color: var(--ig-ink) !important;
	font-family: var(--ig-font-sans);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}

.ig-store .ig-track__copy:hover { border-color: var(--ig-stone-light) !important; }

.ig-track__summary {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--ig-hairline);
}

.ig-track__summary h3 {
	margin: 0 0 8px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ig-stone);
}

.ig-track__summary h3 + p { margin: 0 0 16px; font-size: 14.5px; color: var(--ig-ink); }

.ig-track__summary ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }

.ig-track__summary li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14.5px;
	color: var(--ig-ink);
}

.ig-track__summary li em { font-style: normal; color: var(--ig-stone); }

.ig-track__again { margin: 18px 0 0; font-size: 14px; }
.ig-store .ig-track__again a { color: var(--ig-ink) !important; text-decoration: underline !important; text-underline-offset: 3px; }

.ig-track__help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 22px;
	padding: 18px 22px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--ig-hairline);
}

.ig-track__help div { display: grid; gap: 2px; }
.ig-track__help strong { font-size: 14.5px; color: var(--ig-ink); }
.ig-track__help span { font-size: 13px; color: var(--ig-stone); }
.ig-store .ig-track__help a { font-size: 14px; font-weight: 600; color: var(--ig-oxblood) !important; }

@media (max-width: 760px) {
	.ig-track__grid { grid-template-columns: minmax(0, 1fr); }
	.ig-track__summary { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.ig-track__steps strong { font-size: 11.5px; }
	.ig-track__steps li span { font-size: 10.5px; }
	.ig-track__ship-actions { width: 100%; }
	.ig-track__ship-actions .ig-track__carrier { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.ig-track__steps::after { transition: none; }
}