/**
 * Product detail page styles, from Figma "Product Detail page" (7133:2393).
 *
 * Layers on figma-home.css for tokens, header, footer, newsletter, cards and
 * the benefit/quality sections.
 */

/* Breadcrumb (7133:2459) — 1440x60 ------------------------------------------ */

.fsx-pdp-crumbs {
	padding: 20px 0;
	border-bottom: 1px solid var(--g200);
}

/* .fsx-crumbs also lives in figma-listing.css, which this template does not
   load — restated here rather than pulling in the whole listing stylesheet. */
.fsx-crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 14px;
	line-height: 20px;
	color: var(--g600);
}

.fsx-crumbs a {
	color: var(--g600);
	transition: color 160ms ease;
}

.fsx-crumbs a:hover,
.fsx-crumbs a[aria-current] {
	color: var(--p500);
}

.fsx-crumbs span {
	color: var(--g300);
}

/* Gallery + buy box (7133:2485) — two 592 columns, 136 gutter --------------- */

.fsx-pdp {
	padding: 40px 0 60px;
}

/* The frame's two 592 columns plus a 136 gutter come to 1320, which is wider
   than the 1240 shell — as fixed tracks they could not shrink, so the buy box
   ran off the right edge. Kept to the same proportions, fluid. */
.fsx-pdp__grid {
	display: grid;
	/* Gallery track matches its own cap so the capped image does not leave a
	   dead band before the buy box; the buy box takes what is left. */
	grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
	column-gap: clamp(32px, 6%, 80px);
	row-gap: 40px;
	align-items: start;
}

/* Caps the image so it does not dominate the fold on a wide screen. */
.fsx-gallery {
	max-width: 440px;
}

/* Gallery (7133:2486) */

/* The product shots are 5:4 on their own light-grey backdrop. A square frame
   letterboxed them, and because the frame carried the lavender card tint the
   bands read as a box drawn around the photo. Matching the ratio and filling
   the frame removes both. */
.fsx-gallery__main {
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 4;
	background: #efeeee;
	border: 1px solid var(--p50);
	border-radius: 14px;
	overflow: hidden;
	display: grid;
	place-items: center;
}

.fsx-gallery__main img {
	width: 100%;
	height: 100%;
	/* Grid item: min-height:auto pins this to the image's intrinsic
	   height, which defeats height:100% and makes contain overflow. */
	min-height: 0;
	min-width: 0;
	/* Portrait vial shots: cover would crop the strength band off
	   the bottom, so letterbox them instead. */
	object-fit: contain;
	transition: transform 300ms ease;
}

.fsx-gallery__main.is-zoomed img {
	transform: scale(1.6);
	cursor: zoom-out;
}

/* Zoom affordance at 539,539 in the 592 frame. */
.fsx-gallery__zoom {
	position: absolute;
	right: 17px;
	bottom: 17px;
	width: 36px;
	height: 36px;
	border: 1px solid var(--g200);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	transition: border-color 160ms ease, transform 160ms ease;
}

.fsx-gallery__zoom::before,
.fsx-gallery__zoom::after {
	content: "";
	position: absolute;
	background: var(--g700);
}

.fsx-gallery__zoom::before {
	width: 13px;
	height: 13px;
	border: 1.6px solid var(--g700);
	border-radius: 50%;
	background: none;
	top: 9px;
	left: 9px;
}

.fsx-gallery__zoom::after {
	width: 1.6px;
	height: 7px;
	top: 21px;
	left: 22px;
	transform: rotate(-45deg);
}

.fsx-gallery__zoom:hover {
	border-color: var(--p500);
	transform: scale(1.06);
}

.fsx-gallery__strip {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
}

.fsx-gallery__nav {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border: 1px solid var(--g300);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	position: relative;
	transition: border-color 160ms ease, opacity 160ms ease;
}

.fsx-gallery__nav::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 7px;
	height: 7px;
	border-right: 1.6px solid var(--g700);
	border-bottom: 1.6px solid var(--g700);
	transform: translateX(2px) rotate(-45deg);
}

.fsx-gallery__nav:first-child::before {
	transform: translateX(-2px) rotate(135deg);
}

.fsx-gallery__nav:hover {
	border-color: var(--p500);
}

.fsx-gallery__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.fsx-gallery__thumbs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.fsx-gallery__thumbs::-webkit-scrollbar {
	display: none;
}

.fsx-gallery__thumb {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	padding: 0;
	border: 1px solid var(--g200);
	border-radius: 10px;
	background: #efeeee;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 160ms ease;
}

.fsx-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fsx-gallery__thumb.is-active,
.fsx-gallery__thumb:hover {
	border-color: var(--p500);
}

/* Buy box (7133:2512) ------------------------------------------------------- */

.fsx-buy__eyebrow {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--p500);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.fsx-buy__title {
	margin: 12px 0 0;
	font-family: "Clash Display", "Public Sans", sans-serif;
	font-weight: 600;
	font-size: 40px;
	line-height: 44px;
	color: var(--g800);
}

.fsx-buy__lede {
	margin-top: 16px;
	font-size: 15px;
	line-height: 24px;
	color: var(--g600);
}

.fsx-buy__points {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fsx-buy__points li {
	position: relative;
	padding-left: 26px;
	font-size: 16px;
	line-height: 24px;
	color: var(--g700);
}

/* Check glyph rather than a bullet, matching the Figma list. */
.fsx-buy__points li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 8px;
	width: 5px;
	height: 9px;
	border: solid var(--p500);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.fsx-buy__points--wide {
	margin-top: 12px;
	margin-bottom: 28px;
}

.fsx-buy__price {
	margin-top: 24px;
	font-family: "Clash Display", "Public Sans", sans-serif;
	font-weight: 600;
	font-size: 32px;
	line-height: 36px;
	color: var(--ink);
}

.fsx-buy__price del {
	color: var(--g500);
	font-size: 22px;
	margin-right: 8px;
}

.fsx-buy__price .woocommerce-Price-amount {
	white-space: nowrap;
}

.fsx-buy__label {
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--g600);
}

/* Strength selector (7133:2549) */

.fsx-strength {
	margin-top: 26px;
}

/* The frame only ever showed four options; live products carry up to seven,
   which overflowed the column. Wrap within the available width instead. */
.fsx-strength__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	max-width: 100%;
}

.fsx-strength__opt {
	flex: 0 0 auto;
}

.fsx-strength__opt {
	min-width: 65px;
	height: 38px;
	padding: 0 16px;
	border: 1px solid var(--g300);
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	color: var(--g700);
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.fsx-strength__opt:hover {
	border-color: var(--p500);
	color: var(--p500);
}

.fsx-strength__opt:focus-visible {
	outline: 2px solid var(--p500);
	outline-offset: 2px;
}

.fsx-strength__opt.is-active {
	background: var(--p500);
	border-color: var(--p500);
	color: #fff;
}

.fsx-strength__opt:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Quantity + stock (7133:2567) */

.fsx-buy__qtyrow {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 26px;
}

.fsx-qty {
	display: flex;
	align-items: center;
	width: 130px;
	height: 42px;
	border: 1px solid var(--g300);
	border-radius: 8px;
	overflow: hidden;
}

.fsx-qty__btn {
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	color: var(--g700);
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

.fsx-qty__btn:hover {
	background: var(--p50);
	color: var(--p500);
}

.fsx-qty__input {
	width: 48px;
	border: 0;
	text-align: center;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	color: var(--g800);
	background: none;
	-moz-appearance: textfield;
}

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

.fsx-stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	line-height: 20px;
	color: var(--g700);
}

.fsx-stock__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #17a34a;
}

.fsx-stock.is-out .fsx-stock__dot {
	background: var(--g500);
}

/* CTAs (7133:2583) — two 290 buttons */

.fsx-buy__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 26px;
}

.fsx-page .fsx-buy__cta {
	width: 100%;
	font-family: inherit;
	cursor: pointer;
}

/* Assurance row (7133:2594) */

.fsx-assure {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--g200);
}

.fsx-assure__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.fsx-assure__item p {
	font-size: 13px;
	line-height: 18px;
}

.fsx-assure__item p:first-child {
	font-weight: 600;
	color: var(--g800);
}

.fsx-assure__item p:last-child {
	color: var(--g500);
}

.fsx-assure__icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	background: var(--p500);
}

/* Simple CSS masks rather than new exported assets, since these three glyphs
   were not available from the design file. */
.fsx-assure__icon--shield {
	clip-path: polygon(50% 0, 100% 22%, 100% 60%, 50% 100%, 0 60%, 0 22%);
}

.fsx-assure__icon--flask {
	clip-path: polygon(38% 0, 62% 0, 62% 38%, 100% 100%, 0 100%, 38% 38%);
}

.fsx-assure__icon--truck {
	clip-path: polygon(0 20%, 62% 20%, 62% 48%, 84% 48%, 100% 68%, 100% 88%, 0 88%);
}

/* Tiered pricing + FBT (7133:2634) — two 648 columns ------------------------ */

.fsx-pdp-cols {
	padding: 0 0 60px;
}

.fsx-pdp-cols__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	align-items: start;
}

.fsx-panel {
	background: #fff;
	border: 1px solid var(--g200);
	border-radius: 14px;
	padding: 26px 24px;
}

.fsx-panel__title {
	margin: 0 0 16px;
	font-family: "Clash Display", "Public Sans", sans-serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 30px;
	color: var(--ink);
}

.fsx-panel__note {
	margin-top: 14px;
	font-size: 13px;
	line-height: 18px;
	color: var(--g500);
}

.fsx-tiers,
.fsx-specs {
	width: 100%;
	border-collapse: collapse;
}

.fsx-tiers th {
	text-align: left;
	padding: 0 0 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--g500);
	border-bottom: 1px solid var(--g200);
}

.fsx-tiers td {
	padding: 12px 0;
	font-size: 15px;
	line-height: 22px;
	color: var(--g700);
	border-bottom: 1px solid var(--g100, #f4f4f5);
}

.fsx-tiers tr:last-child td {
	border-bottom: 0;
}

.fsx-tiers td:nth-child(2) {
	font-weight: 600;
	color: var(--g800);
}

.fsx-tiers td:nth-child(3) {
	color: var(--p500);
	font-weight: 500;
}

/* Frequently bought together */

.fsx-fbt {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fsx-fbt__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--g100, #f4f4f5);
}

.fsx-fbt__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.fsx-fbt__media {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background: var(--media);
	overflow: hidden;
	display: grid;
	place-items: center;
}

.fsx-fbt__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fsx-fbt__text {
	flex: 1 1 auto;
	min-width: 0;
}

.fsx-fbt__text a {
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
	color: var(--g800);
}

.fsx-fbt__text a:hover {
	color: var(--p500);
}

.fsx-fbt__text p {
	font-size: 13px;
	line-height: 18px;
	color: var(--g500);
}

.fsx-fbt__price {
	font-weight: 600;
	font-size: 15px;
	color: var(--g800);
	white-space: nowrap;
}

/* Tabs (7133:2826) ---------------------------------------------------------- */

.fsx-pdp-tabs {
	padding: 0 0 60px;
}

.fsx-pdp-tabs__bar {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--g200);
}

.fsx-pdp-tab {
	border: 0;
	background: none;
	padding: 10px 4px 14px;
	margin-right: 20px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	color: var(--g600);
	cursor: pointer;
	position: relative;
	transition: color 160ms ease;
}

.fsx-pdp-tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--p500);
	transform: scaleX(0);
	transition: transform 200ms ease;
}

.fsx-pdp-tab:hover {
	color: var(--p500);
}

.fsx-pdp-tab:focus-visible {
	outline: 2px solid var(--p500);
	outline-offset: 2px;
}

.fsx-pdp-tab.is-active {
	color: var(--p500);
}

.fsx-pdp-tab.is-active::after {
	transform: scaleX(1);
}

.fsx-pdp-tabs__body {
	padding-top: 28px;
}

.fsx-pdp-panel[hidden] {
	display: none;
}

.fsx-pdp-panel:focus {
	outline: none;
}

.fsx-pdp-panel.is-active {
	animation: fsx-panel-in 260ms ease both;
}

@keyframes fsx-panel-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

.fsx-prose {
	max-width: 900px;
	font-size: 15px;
	line-height: 24px;
	color: var(--g600);
}

.fsx-prose p + p {
	margin-top: 14px;
}

/* Imported descriptions carry h2/h3 section headings and bullet lists. Left at
   browser defaults these size off 1em and tower over the body copy, so they are
   pinned to the scale the rest of the page uses. */
.fsx-prose h2 {
	margin: 28px 0 10px;
	font-size: 18px;
	line-height: 26px;
	font-weight: 600;
	color: var(--g800);
}

.fsx-prose h3 {
	margin: 22px 0 8px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: var(--g800);
}

.fsx-prose h4 {
	margin: 18px 0 6px;
	font-size: 15px;
	line-height: 22px;
	font-weight: 600;
	color: var(--g700);
}

.fsx-prose > :first-child {
	margin-top: 0;
}

.fsx-prose ul,
.fsx-prose ol {
	margin: 12px 0;
	padding-left: 20px;
}

.fsx-prose li + li {
	margin-top: 6px;
}

/* The source markdown separates bullets with blank lines, so each <li> wraps its
   text in a <p>; without this the list gains a paragraph gap per item. */
.fsx-prose li p {
	margin: 0;
}

/* Spec and comparison tables rendered by scripts/import-descriptions.py out of
   the source sheet's pipe rows. They arrive with no theme classes of their own,
   so they are matched to .fsx-specs below rather than left at browser defaults
   (which give them no borders, padding or column control at all). */
.fsx-prose .fs-spec-table,
.fsx-prose .fs-compare-table {
	width: 100%;
	margin: 16px 0;
	border-collapse: collapse;
	table-layout: fixed;
}

.fsx-prose .fs-spec-table th {
	width: 240px;
	text-align: left;
	padding: 12px 16px 12px 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--g700);
	vertical-align: top;
	border-bottom: 1px solid var(--g200);
}

.fsx-prose .fs-spec-table td {
	padding: 12px 0;
	font-size: 15px;
	line-height: 22px;
	color: var(--g600);
	vertical-align: top;
	border-bottom: 1px solid var(--g200);
	word-break: break-word;
}

/* The comparison tables run to four dense columns inside the 900px prose
   column, so they step down a size and tighten their padding to stay readable
   without needing a horizontal scroll wrapper the imported markup lacks. */
.fsx-prose .fs-compare-table th {
	text-align: left;
	padding: 10px 12px 10px 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: var(--g700);
	vertical-align: top;
	border-bottom: 1px solid var(--g300);
}

.fsx-prose .fs-compare-table td {
	padding: 10px 12px 10px 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--g600);
	vertical-align: top;
	border-bottom: 1px solid var(--g200);
	word-break: break-word;
}

.fsx-prose .fs-compare-table td:first-child {
	font-weight: 600;
	color: var(--g800);
}

.fsx-prose .fs-spec-table tr:last-child th,
.fsx-prose .fs-spec-table tr:last-child td,
.fsx-prose .fs-compare-table tr:last-child td {
	border-bottom: 0;
}

.fsx-specs {
	max-width: 900px;
}

.fsx-specs th {
	width: 240px;
	text-align: left;
	padding: 12px 16px 12px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--g700);
	vertical-align: top;
	border-bottom: 1px solid var(--g200);
}

.fsx-specs td {
	padding: 12px 0;
	font-size: 15px;
	line-height: 22px;
	color: var(--g600);
	border-bottom: 1px solid var(--g200);
	word-break: break-word;
}

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

@media (max-width: 1100px) {
	.fsx-pdp__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.fsx-pdp-cols__grid {
		grid-template-columns: 1fr;
	}

	.fsx-buy__title {
		font-size: 32px;
		line-height: 38px;
	}
}

@media (max-width: 640px) {
	.fsx-buy__actions {
		grid-template-columns: 1fr;
	}

	.fsx-assure {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.fsx-specs th,
	.fsx-prose .fs-spec-table th {
		width: 140px;
	}

	.fsx-prose .fs-compare-table th,
	.fsx-prose .fs-compare-table td {
		padding-right: 8px;
		font-size: 13px;
		line-height: 18px;
	}
}

/* Quantity break feedback --------------------------------------------------- */

/* .fsx-page qualified: figma-home.css resets `.fsx-page p { margin: 0 }` above a
   lone class, which would drop this margin. */
.fsx-page .fsx-tiernote {
	margin-top: 8px;
	font-size: 14px;
	line-height: 20px;
	color: var(--g600);
}

.fsx-tiernote[hidden] {
	display: none;
}

.fsx-tiernote s {
	color: var(--g500);
	margin-right: 6px;
}

.fsx-tiernote strong {
	color: var(--ink);
	font-weight: 600;
}

/* The band the current quantity falls in. */
.fsx-tiers tr.is-active td {
	background: var(--p50);
	color: var(--p500);
	font-weight: 600;
}

.fsx-tiers tr.is-active td:first-child {
	border-radius: 6px 0 0 6px;
}

.fsx-tiers tr.is-active td:last-child {
	border-radius: 0 6px 6px 0;
}

.fsx-tiers tr td {
	transition: background-color 160ms ease, color 160ms ease;
}

/* Certificate of Analysis tab -----------------------------------------------
   The certificates published for this product, each linking straight at its
   PDF. Products the previous owner never had tested show the empty note
   instead, which is why the list is not always here. */

.fsx-pdp-coas {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.fsx-pdp-coas__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	border: 1px solid var(--g200);
	border-radius: 12px;
	background: #fff;
}

.fsx-pdp-coas__text {
	min-width: 0;
}

.fsx-page .fsx-pdp-coas__name {
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fsx-page .fsx-pdp-coas__name:hover {
	color: var(--p500);
}

.fsx-page .fsx-pdp-coas__meta {
	margin-top: 4px;
	font-size: 13px;
	line-height: 18px;
	color: var(--g500);
}

.fsx-page .fsx-pdp-coas__none {
	margin-top: 20px;
	font-size: 15px;
	line-height: 22px;
	color: var(--g600);
}

@media (max-width: 560px) {
	.fsx-pdp-coas__item {
		flex-direction: column;
		align-items: flex-start;
	}
}