/* =====================================================================
   Veeha Pharma — Supplements pages
   Used by: products_supplements.html, supplement-details.html
   Section accent is the Avyra teal (wordmark/logo colour); navy and
   text colours mirror style.css so the pages still sit inside the site.
   ===================================================================== */

:root {
	--sup-primary: #0B6B66; /* Avyra teal: links, headline, active pill, icons */
	--sup-navy: #111f6a;
	--sup-text: #2C2D3F;
	--sup-muted: #6c757d;
	--sup-line: #e3e8ef;
	--sup-stage: #eceaeb; /* matches the backdrop baked into the pack renders */
	--sup-tint: #e9f4f2; /* mint tint under the card text */
	--sup-logo: #0B5652;      /* "Avyra" logo teal, sampled from the pack */
	--sup-teal: #004C4C;      /* wordmark teal */
	--sup-teal-light: #1F8A82;
	--sup-orange: #E09A2E;    /* pack pattern orange */
	--sup-radius: 15px;
	--sup-shadow: 5px 5px 15px rgba(0, 0, 0, 0.10);
	--sup-shadow-hover: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* ---------- shared ---------- */

.sup-section {
	padding: 40px 0 70px;
}

.sup-heading {
	text-align: center;
	margin: 30px 0 10px;
	font-weight: 700;
	background: linear-gradient(90deg, var(--sup-teal), var(--sup-teal-light));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.sup-subheading {
	text-align: center;
	color: var(--sup-muted);
	max-width: 640px;
	margin: 0 auto 40px;
	font-size: 15px;
	line-height: 1.7;
}

/* "Avyra" brand label, set like the logo on the pack: serif, title case, logo teal */
.sup-brand {
	display: inline-block;
	font-family: "Merriweather", Georgia, "Times New Roman", serif;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--sup-logo);
}

/* Two-tone product name, set like the wordmark on the pack:
   "Avy" bold in dark teal, suffix regular in the product colour.
   Colours come from js/supplements-data.js via --sup-wm-prefix / --sup-wm-suffix.
   Merriweather is loaded from Google Fonts in the page <head>. */
.sup-wordmark {
	font-family: "Merriweather", Georgia, "Times New Roman", serif;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.sup-wordmark__prefix {
	font-weight: 700;
	color: var(--sup-wm-prefix, #004C4C);
}

.sup-wordmark__suffix {
	font-weight: 400;
	color: var(--sup-wm-suffix, var(--sup-primary));
}

/* ---------- hero (shared by listing + detail) ----------
   Avyra theme: wordmark teal gradient with the pack's organic cell
   pattern (inline SVG, orange + mint) running along the bottom edge. */
.sup-hero {
	position: relative;
	min-height: 20vh;
	display: flex;
	text-align: center;
	overflow: hidden;
	background: linear-gradient(120deg, var(--sup-teal) 0%, #0b6b66 55%, var(--sup-teal-light) 100%);
}

.sup-hero::before {
	/* pack pattern band */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 150px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22360%22 height=%22180%22 viewBox=%220 0 360 180%22 fill=%22none%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M29.4 135.2 Q19.5 138.6 17.0 129.8 Q14.6 121.0 16.0 112.6 Q17.3 104.2 28.0 104.5 Q38.6 104.7 41.9 111.9 Q45.1 119.0 42.3 125.3 Q39.4 131.7 29.4 135.2Z%22 stroke=%22%237FD1C5%22 stroke-width=%224.0%22/%3E%3Cpath d=%22M68.8 158.1 Q62.2 157.0 63.6 151.3 Q65.1 145.7 69.8 143.0 Q74.4 140.3 81.1 141.7 Q87.7 143.0 90.1 150.3 Q92.5 157.6 84.0 158.4 Q75.5 159.2 68.8 158.1Z%22 stroke=%22%23E09A2E%22 stroke-width=%223.5%22/%3E%3Cpath d=%22M132.8 121.3 Q124.6 130.6 108.0 127.6 Q91.3 124.6 91.9 110.2 Q92.5 95.9 104.3 89.5 Q116.1 83.2 132.6 84.2 Q149.1 85.1 145.1 98.6 Q141.0 112.0 132.8 121.3Z%22 stroke=%22%237FD1C5%22 stroke-width=%224.5%22/%3E%3Cpath d=%22M185.6 158.2 Q176.4 163.4 168.6 161.8 Q160.8 160.1 158.1 154.2 Q155.5 148.3 159.5 142.3 Q163.5 136.4 174.3 135.0 Q185.0 133.6 189.9 143.3 Q194.8 153.0 185.6 158.2Z%22 stroke=%22%23E09A2E%22 stroke-width=%223.5%22/%3E%3Cpath d=%22M223.0 127.6 Q214.6 131.8 207.6 126.8 Q200.7 121.7 199.9 114.3 Q199.1 106.8 207.1 105.6 Q215.2 104.4 220.6 107.1 Q225.9 109.9 228.6 116.6 Q231.3 123.3 223.0 127.6Z%22 stroke=%22%237FD1C5%22 stroke-width=%223.5%22/%3E%3Cpath d=%22M270.8 167.7 Q257.7 170.9 248.6 164.4 Q239.4 158.0 238.5 147.2 Q237.5 136.4 250.0 132.6 Q262.4 128.7 271.3 135.4 Q280.3 142.1 282.1 153.3 Q283.9 164.4 270.8 167.7Z%22 stroke=%22%23E09A2E%22 stroke-width=%224.0%22/%3E%3Cpath d=%22M292.2 115.1 Q292.7 105.6 298.7 98.2 Q304.6 90.9 315.4 93.9 Q326.3 96.9 331.4 106.8 Q336.6 116.7 326.3 123.9 Q315.9 131.1 303.9 127.9 Q291.8 124.7 292.2 115.1Z%22 stroke=%22%237FD1C5%22 stroke-width=%224.0%22/%3E%3Cpath d=%22M349.4 165.2 Q341.6 163.2 336.8 160.1 Q332.0 157.0 333.1 150.7 Q334.3 144.3 341.4 145.4 Q348.5 146.5 353.6 149.7 Q358.7 152.8 357.9 160.0 Q357.2 167.1 349.4 165.2Z%22 stroke=%22%23E09A2E%22 stroke-width=%223.0%22/%3E%3Cpath d=%22M64.5 66.2 Q60.6 71.1 54.0 69.8 Q47.5 68.6 43.7 63.5 Q40.0 58.5 45.4 55.2 Q50.9 51.9 57.0 51.3 Q63.2 50.7 65.7 56.0 Q68.3 61.3 64.5 66.2Z%22 stroke=%22%23E09A2E%22 stroke-width=%223.0%22/%3E%3Cpath d=%22M141.4 63.5 Q136.2 58.8 136.2 51.6 Q136.2 44.4 145.2 41.5 Q154.1 38.7 159.1 44.9 Q164.0 51.2 163.2 57.9 Q162.4 64.5 154.5 66.4 Q146.7 68.2 141.4 63.5Z%22 stroke=%22%237FD1C5%22 stroke-width=%223.0%22/%3E%3Cpath d=%22M253.2 65.8 Q249.1 69.7 242.2 69.6 Q235.4 69.6 233.6 63.8 Q231.7 57.9 236.8 55.2 Q241.9 52.5 246.7 53.0 Q251.6 53.5 254.5 57.7 Q257.3 61.9 253.2 65.8Z%22 stroke=%22%23E09A2E%22 stroke-width=%222.5%22/%3E%3Cpath d=%22M320.0 59.7 Q314.5 56.2 318.7 51.3 Q322.9 46.5 328.9 46.2 Q334.9 46.0 338.0 50.1 Q341.0 54.2 341.0 61.2 Q340.9 68.2 333.2 65.7 Q325.5 63.2 320.0 59.7Z%22 stroke=%22%237FD1C5%22 stroke-width=%223.5%22/%3E%3Cpath d=%22M19.4 170.2 Q16.2 172.8 10.6 172.2 Q5.0 171.6 6.8 167.1 Q8.5 162.7 11.1 159.8 Q13.7 156.9 18.4 158.2 Q23.2 159.6 22.9 163.6 Q22.6 167.6 19.4 170.2Z%22 stroke=%22%23E09A2E%22 stroke-width=%222.5%22/%3E%3Cpath d=%22M185.3 19.7 Q185.4 14.9 190.3 14.2 Q195.2 13.5 198.9 15.1 Q202.5 16.6 202.2 20.1 Q201.9 23.6 198.3 26.7 Q194.6 29.7 190.0 27.1 Q185.3 24.4 185.3 19.7Z%22 stroke=%22%237FD1C5%22 stroke-width=%222.5%22/%3E%3Cpath d=%22M283.6 18.5 Q284.5 15.4 288.3 14.4 Q292.1 13.3 294.9 15.7 Q297.8 18.2 297.4 22.0 Q297.0 25.9 292.2 27.3 Q287.3 28.7 285.0 25.2 Q282.7 21.7 283.6 18.5Z%22 stroke=%22%23E09A2E%22 stroke-width=%222.5%22/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: 360px 180px;
	opacity: 0.45;
	pointer-events: none;
}

.sup-hero::after {
	/* soft vignette so the title area stays clean */
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 35%, rgba(0, 76, 76, 0.55) 0%, rgba(0, 76, 76, 0) 60%);
	pointer-events: none;
}

.sup-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	align-self: center;
	padding: 48px 16px;
}

.sup-hero .breadcrumb {
	background: transparent;
	justify-content: center;
	margin-bottom: 16px;
}

.sup-hero .breadcrumb-item,
.sup-hero .breadcrumb-item a,
.sup-hero .breadcrumb-item + .breadcrumb-item::before {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.sup-hero .breadcrumb-item.active {
	color: #ffffff;
}

.sup-hero__title {
	margin: 0;
	color: #ffffff;
	font-weight: 600;
}

.sup-hero__subtitle {
	margin: 10px 0 0;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 500;
}

.sup-hero__cta {
	display: inline-block;
	margin-top: 22px;
	padding: 10px 28px;
	border-radius: 30px;
	background: #ffffff;
	color: var(--sup-teal);
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.sup-hero__cta:hover,
.sup-hero__cta:focus {
	background: var(--sup-orange);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
	text-decoration: none;
}

/* ---------- listing cards ---------- */

.sup-grid {
	row-gap: 30px;
}

.sup-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #ffffff;
	border: none;
	border-radius: var(--sup-radius);
	box-shadow: var(--sup-shadow);
	overflow: hidden;
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.sup-card::before {
	/* thin accent bar in the pack colour */
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: var(--sup-accent, var(--sup-primary));
	z-index: 2;
}

.sup-card:hover {
	transform: translateY(-10px);
	box-shadow: var(--sup-shadow-hover);
}

.sup-card__media {
	position: relative;
	display: block;
	background: var(--sup-stage);
	padding: 22px 22px 46px;
	text-decoration: none;
}

.sup-card__media img {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: contain;
	transition: transform 0.35s ease;
}

.sup-card:hover .sup-card__media img {
	transform: scale(1.05);
}

.sup-card__more {
	position: absolute;
	right: 20px;
	bottom: 14px;
	font-size: 15px;
	font-weight: 500;
	color: var(--sup-primary);
	text-decoration: none;
	transition: transform 0.3s ease, color 0.3s ease;
}

.sup-card__more i {
	margin-left: 4px;
	transition: transform 0.3s ease;
}

.sup-card:hover .sup-card__more {
	color: var(--sup-navy);
}

.sup-card:hover .sup-card__more i {
	transform: translateX(4px);
}

.sup-card__body {
	flex: 1 1 auto;
	text-align: center;
	padding: 22px 20px 26px;
	background: linear-gradient(180deg, #ffffff 0%, var(--sup-tint) 100%);
}

.sup-card__name {
	margin: 8px 0 6px;
	font-size: 26px;
	line-height: 1.2;
	color: var(--sup-navy);
}

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

.sup-card__composition {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--sup-text);
}

.sup-card__tagline {
	margin: 0;
	font-size: 14px;
	color: var(--sup-muted);
}

/* ---------- detail page ---------- */

.sup-detail {
	padding: 50px 0 30px;
}

.sup-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 24px;
	font-size: 14px;
	font-weight: 500;
	color: var(--sup-primary);
	text-decoration: none;
}

.sup-back:hover {
	color: var(--sup-navy);
	text-decoration: none;
}

.sup-stage {
	position: relative;
	background: var(--sup-stage);
	border-radius: var(--sup-radius);
	box-shadow: var(--sup-shadow);
	padding: 34px 30px 30px;
	perspective: 1400px;
	overflow: hidden;
}

.sup-stage::before {
	/* product-colour bar, same as the listing cards */
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: var(--sup-accent, var(--sup-primary));
	z-index: 2;
}

.sup-stage::after {
	/* light sweep that plays during a flavour reveal */
	content: "";
	position: absolute;
	top: -20%;
	left: -60%;
	width: 40%;
	height: 140%;
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-18deg);
	opacity: 0;
	pointer-events: none;
}

.sup-stage.is-revealing::after {
	animation: supSweep 0.9s ease-out forwards;
}

.sup-stage img {
	display: block;
	width: 100%;
	max-height: 520px;
	object-fit: contain;
	transform-origin: 50% 60%;
	will-change: transform, opacity;
}

.sup-stage img.is-leaving {
	animation: supFoldOut 0.32s ease-in forwards;
}

.sup-stage img.is-entering {
	animation: supUnboxIn 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes supFoldOut {
	to {
		opacity: 0;
		transform: rotateY(-58deg) scale(0.86) translateX(-18px);
	}
}

@keyframes supUnboxIn {
	0% {
		opacity: 0;
		transform: rotateY(48deg) scale(0.72) translateY(26px);
	}
	55% {
		opacity: 1;
	}
	80% {
		transform: rotateY(-4deg) scale(1.03);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes supSweep {
	0% {
		opacity: 0;
		left: -60%;
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		left: 130%;
	}
}

/* flavour selector */

.sup-flavours {
	margin-top: 26px;
}

.sup-flavours__label {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sup-muted);
}

.sup-flavours__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.sup-flavour {
	appearance: none;
	-webkit-appearance: none;
	border: 2px solid var(--sup-line);
	background: #ffffff;
	color: var(--sup-text);
	border-radius: 30px;
	padding: 9px 22px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: all 0.25s ease;
}

.sup-flavour:hover {
	border-color: var(--sup-primary);
	color: var(--sup-primary);
	transform: translateY(-2px);
}

.sup-flavour:focus-visible {
	outline: 3px solid rgba(11, 107, 102, 0.35);
	outline-offset: 2px;
}

.sup-flavour.is-active {
	background: var(--sup-primary);
	border-color: var(--sup-primary);
	color: #ffffff;
	box-shadow: 0 6px 16px rgba(11, 107, 102, 0.3);
}

/* text column */

.sup-info {
	padding-top: 10px;
	padding-left: 40px; /* breathing room between the pack image and the text */
}

.sup-info__name {
	margin: 6px 0 6px;
	font-size: 52px;
	line-height: 1.1;
	color: var(--sup-navy);
}

.sup-info__headline {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--sup-primary);
}

.sup-info__composition {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 600;
	color: var(--sup-navy);
}

.sup-info__description {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.8;
	color: var(--sup-text);
}

.sup-info__tagline {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--sup-navy);
}

.sup-benefits {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
}

.sup-benefits li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sup-text);
}

.sup-benefits li i {
	position: absolute;
	left: 0;
	top: 3px;
	font-size: 17px;
	color: var(--sup-primary);
}

/* composition strip */

.sup-composition {
	margin: 40px 0 10px;
}

.sup-composition__title {
	margin-bottom: 16px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sup-muted);
}

/* 3-column grid: each ingredient centred in its cell, a vertical divider
   between columns (never after the last column), rows evenly spaced. */
.sup-composition__strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	row-gap: 34px;
	padding: 40px 16px;
	margin: 0;
	list-style: none;
	background: #ffffff;
	border-radius: 30px;
	box-shadow: var(--sup-shadow);
}

.sup-composition__strip li {
	padding: 4px 16px;
	font-size: 17px;
	line-height: 1.4;
	text-align: center;
	color: var(--sup-navy);
	border-right: 1px solid var(--sup-line);
	overflow-wrap: anywhere;
}

.sup-composition__strip li:nth-child(3n) {
	border-right: none;
}

/* related products strip */

.sup-related {
	padding: 40px 0 70px;
}

.sup-related__title {
	margin-bottom: 26px;
	font-size: 22px;
	font-weight: 700;
	color: var(--sup-navy);
}

/* not-found panel (unknown ?product=) */

.sup-notfound {
	text-align: center;
	padding: 60px 20px;
	background: var(--sup-stage);
	border-radius: var(--sup-radius);
}

.sup-notfound h3 {
	color: var(--sup-navy);
	margin-bottom: 10px;
}

.sup-notfound a {
	color: var(--sup-primary);
}

/* ---------- responsive ---------- */

@media (max-width: 991px) {
	.sup-info {
		padding-top: 34px;
		padding-left: 0; /* columns stack, so no side gap needed */
	}

	.sup-info__name {
		font-size: 40px;
	}

	.sup-stage img {
		max-height: 420px;
	}
}

@media (max-width: 767px) {
	/* tablet: two columns, divider only after the first column */
	.sup-composition__strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 26px;
		padding: 30px 12px;
	}

	.sup-composition__strip li {
		font-size: 16px;
		border-right: 1px solid var(--sup-line);
	}

	.sup-composition__strip li:nth-child(3n) {
		border-right: 1px solid var(--sup-line);
	}

	.sup-composition__strip li:nth-child(2n) {
		border-right: none;
	}
}

@media (max-width: 575px) {
	.sup-card__media img {
		height: 200px;
	}

	.sup-info__name {
		font-size: 34px;
	}

	.sup-card__name {
		font-size: 22px;
	}

	.sup-info__headline {
		font-size: 18px;
	}

	/* phone: single column, horizontal separators instead */
	.sup-composition__strip {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
		padding: 12px 8px;
		border-radius: var(--sup-radius);
	}

	.sup-composition__strip li,
	.sup-composition__strip li:nth-child(2n),
	.sup-composition__strip li:nth-child(3n) {
		border-right: none;
		border-bottom: 1px solid var(--sup-line);
		padding: 12px 10px;
	}

	.sup-composition__strip li:last-child {
		border-bottom: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sup-card,
	.sup-card__media img,
	.sup-flavour {
		transition: none;
	}

	.sup-stage img.is-leaving,
	.sup-stage img.is-entering,
	.sup-stage.is-revealing::after {
		animation-duration: 0.01s;
	}
}