/**
 * Page sections (patterns/). Loaded only on pages that use them.
 * Breakpoints: 899px = tablets and phones; 600px = phones.
 */

.prismette-section *,
.prismette-origin * {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Shared
 * ---------------------------------------------------------------------- */
.wp-block-group.prismette-section {
	padding-block: var(--wp--preset--spacing--100);
}

.prismette-section.has-top-rule {
	border-top: 1px solid var(--wp--preset--color--silver);
}

.prismette-section .wp-block-heading em,
.prismette-origin .wp-block-heading em {
	font-style: italic;
	font-weight: 500;
}

.prismette-section .is-style-eyebrow + .wp-block-heading,
.prismette-origin .is-style-eyebrow + .wp-block-heading {
	margin-block-start: 14px;
}

.prismette-section__lead {
	color: var(--wp--preset--color--ink);
	font-size: 15px;
	line-height: 1.55;
}

.prismette-section .wp-block-heading + .prismette-section__lead {
	margin-block-start: 10px;
}

.prismette-footnote {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--tiny);
	line-height: 1.5;
}

.prismette-pill {
	border: 1px solid var(--wp--preset--color--silver);
	border-radius: var(--wp--preset--border-radius--pill);
	color: var(--wp--preset--color--navy);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	padding: 8px 14px;
}

.prismette-rounded-photo,
.prismette-rounded-photo img {
	border-radius: var(--wp--preset--border-radius--l);
	display: block;
	margin: 0;
	width: 100%;
}

.prismette-rounded-photo img {
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
}

.wp-block-columns.prismette-split {
	gap: 56px;
}

.wp-block-group.prismette-divider {
	padding-block: 0;
}

/* -------------------------------------------------------------------------
 * Customer videos
 * ---------------------------------------------------------------------- */
.wp-block-group.prismette-ugc {
	position: relative;
}

/* 5 videos in a row on computers, 3.5 on tablets, 2.2 on phones. */
.wp-block-group.prismette-ugc__track {
	--prismette-ugc-gap: 12px;
	--prismette-ugc-per-row: 5;
	display: flex;
	gap: var(--prismette-ugc-gap);
	margin-top: 28px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding-bottom: 18px; /* room for the card shadow, which the scroll row would cut off */
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.prismette-ugc__track::-webkit-scrollbar {
	display: none;
}

/* min-width: 0 stops the one-line product name from stretching the card. */
.wp-block-group.prismette-ugc__card {
	display: flex;
	flex: 0 0 calc((100% - (var(--prismette-ugc-per-row) - 1) * var(--prismette-ugc-gap)) / var(--prismette-ugc-per-row));
	flex-direction: column;
	gap: 8px;
	margin: 0;
	min-width: 0;
	scroll-snap-align: start;
}

.wp-block-group.prismette-ugc__card > * {
	margin: 0;
}

.prismette-ugc__video {
	aspect-ratio: 9 / 16;
	background: var(--wp--preset--color--mist);
	border-radius: var(--wp--preset--border-radius--card);
	box-shadow: var(--wp--preset--shadow--card);
	margin: 0;
	overflow: hidden;
	position: relative;
}

/* More specific than WordPress's own ".wp-block-video video { height: auto }". */
.wp-block-video.prismette-ugc__video video {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.prismette-ugc__video figcaption {
	background: linear-gradient(transparent, rgba(14, 21, 38, 0.72));
	bottom: 0;
	color: var(--wp--preset--color--ivory);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	left: 0;
	line-height: 1.3;
	margin: 0;
	padding: 36px 10px 10px;
	pointer-events: none;
	position: absolute;
	right: 0;
	text-align: left;
}

.prismette-ugc__sound {
	align-items: center;
	background: var(--wp--preset--color--navy);
	border: 0;
	border-radius: var(--wp--preset--border-radius--pill);
	color: var(--wp--preset--color--ivory);
	cursor: pointer;
	display: flex;
	height: 32px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 8px;
	top: 8px;
	width: 32px;
}

/* Shown only when the phone blocks playing by itself (Low Power Mode). */
.prismette-ugc__play {
	align-items: center;
	background: rgba(14, 21, 38, 0.72);
	border: 0;
	border-radius: var(--wp--preset--border-radius--pill);
	color: var(--wp--preset--color--ivory);
	cursor: pointer;
	display: flex;
	height: 56px;
	justify-content: center;
	left: 50%;
	padding: 0 0 0 3px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
}

.prismette-ugc__play[hidden] {
	display: none;
}

/* While a video waits for data: a small ring, so it never looks frozen. */
.prismette-ugc__video.is-loading::after {
	animation: prismette-ugc-spin 0.9s linear infinite;
	border: 3px solid rgba(247, 244, 238, 0.35);
	border-radius: 50%;
	border-top-color: var(--wp--preset--color--ivory);
	content: "";
	height: 34px;
	left: 50%;
	margin: -17px 0 0 -17px;
	pointer-events: none;
	position: absolute;
	top: 50%;
	width: 34px;
}

@keyframes prismette-ugc-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.prismette-ugc__video.is-loading::after {
		animation-duration: 2.4s;
	}
}

/* Just the videos: no customer name and no product card under them
   (older saved templates still carry both). */
.prismette-ugc__name,
.prismette-ugc .prismette-product-mini {
	display: none;
}

.prismette-ugc__arrow {
	align-items: center;
	background: var(--wp--preset--color--base);
	border: 0;
	border-radius: var(--wp--preset--border-radius--pill);
	box-shadow: var(--wp--preset--shadow--float);
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	display: flex;
	height: 44px;
	justify-content: center;
	padding: 0;
	position: absolute;
	top: 50%;
	width: 44px;
	z-index: 2;
}

.prismette-ugc__arrow.is-prev {
	left: max(12px, calc((100% - var(--wp--style--global--wide-size)) / 2 - 22px));
}

.prismette-ugc__arrow.is-next {
	right: max(12px, calc((100% - var(--wp--style--global--wide-size)) / 2 - 22px));
}

.prismette-ugc__arrow.is-next svg {
	transform: scaleX(-1);
}

/* Small product card under each video. */
.prismette-product-mini {
	align-items: center;
	border: 1px solid var(--wp--preset--color--silver);
	border-radius: 10px;
	color: var(--wp--preset--color--navy);
	display: flex;
	gap: 12px;
	padding: 8px 10px;
	text-decoration: none;
}

.prismette-product-mini:hover {
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
}

.prismette-product-mini .prismette-product-mini__image {
	background: var(--wp--preset--color--mist);
	border-radius: 6px;
	flex: none;
	height: 40px;
	object-fit: cover;
	width: 40px;
}

.prismette-product-mini__text {
	display: flex;
	flex-direction: column;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	line-height: 1.3;
	min-width: 0;
}

.prismette-product-mini__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.prismette-product-mini__price {
	font-weight: 800;
}

/* -------------------------------------------------------------------------
 * Benefits strip
 * ---------------------------------------------------------------------- */
.wp-block-group.prismette-benefits-strip {
	padding-block: 28px;
}

.wp-block-group.prismette-benefits-strip__grid {
	display: grid;
	gap: 20px 24px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wp-block-group.prismette-benefit {
	align-items: center;
	display: flex;
	gap: 14px;
	margin: 0;
}

.wp-block-group.prismette-benefit > * {
	margin: 0;
}

.prismette-benefit__icon img {
	display: block;
	height: 28px;
	width: 28px;
}

.prismette-benefit__text {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--tiny);
	line-height: 1.4;
}

.prismette-benefit__text strong {
	color: var(--wp--preset--color--navy);
	font-size: 14px;
	font-weight: 800;
}

/* -------------------------------------------------------------------------
 * What's in the box
 * ---------------------------------------------------------------------- */
.prismette-box ol.is-style-numbered {
	margin-block-start: 24px;
}

/* -------------------------------------------------------------------------
 * Size guide
 * ---------------------------------------------------------------------- */
.prismette-size-guide .prismette-size {
	margin-block-start: 24px;
	max-width: 400px;
}

.prismette-size-guide .prismette-pill {
	margin-block-start: 16px;
}

.wp-block-group.prismette-photo-stack {
	padding: 0 0 72px 64px;
	position: relative;
}

.prismette-photo-stack figure {
	margin: 0;
	position: relative;
}

.prismette-photo-stack img {
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.prismette-photo-stack__main img {
	aspect-ratio: 4 / 5;
}

.wp-block-image.prismette-photo-stack__small {
	border: 6px solid var(--wp--preset--color--base);
	bottom: 0;
	left: 0;
	position: absolute;
	width: 46%;
}

.prismette-photo-stack figcaption {
	bottom: 10px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	left: 12px;
	margin: 0;
	position: absolute;
}

.prismette-photo-stack__main figcaption {
	left: auto;
	right: 14px;
}

/* -------------------------------------------------------------------------
 * Specifications
 * ---------------------------------------------------------------------- */
.wp-block-group.prismette-section__head-row {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	justify-content: space-between;
}

.wp-block-group.prismette-section__head-row > * {
	margin: 0;
}

.prismette-section__aside {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--tiny);
	line-height: 1.5;
	max-width: 260px;
}

.wp-block-group.prismette-specs__grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-block-start: 32px;
}

.wp-block-group.prismette-spec {
	border: 1px solid var(--wp--preset--color--silver);
	border-radius: var(--wp--preset--border-radius--card);
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 16px 18px 18px;
}

.wp-block-group.prismette-spec > * {
	margin: 0;
}

.prismette-spec__label {
	color: var(--wp--preset--color--slate);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.prismette-spec__value {
	color: var(--wp--preset--color--navy);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

/* -------------------------------------------------------------------------
 * Care and quality
 * ---------------------------------------------------------------------- */
.wp-block-group.prismette-care__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-block-start: 32px;
}

.wp-block-group.prismette-care__card {
	background: var(--wp--preset--color--mist);
	border-radius: var(--wp--preset--border-radius--card-l);
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 22px;
}

.wp-block-group.prismette-care__card > * {
	margin: 0;
}

.prismette-care__icon img {
	display: block;
	height: 44px;
	width: 44px;
}

.prismette-care__text {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.prismette-care__text strong {
	color: var(--wp--preset--color--navy);
	display: inline-block;
	font-size: 15px;
	font-weight: 800;
	margin-bottom: 4px;
}

ul.is-style-stars.prismette-care__tips {
	border: 1px solid var(--wp--preset--color--silver);
	border-radius: var(--wp--preset--border-radius--card);
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	gap: 10px 32px;
	justify-content: center;
	margin-block-start: 16px;
	padding: 14px 20px;
}

/* -------------------------------------------------------------------------
 * Price check
 * ---------------------------------------------------------------------- */
.wp-block-group.prismette-compare-rows {
	border-top: 1px solid var(--wp--preset--color--silver);
	margin-block-start: 20px;
}

.wp-block-group.prismette-compare-row {
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--silver);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin: 0;
	padding: 18px 0;
}

.wp-block-group.prismette-compare-row > * {
	margin: 0;
}

.prismette-compare-row__label {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--tiny);
	line-height: 1.45;
}

.prismette-compare-row__label strong {
	color: var(--wp--preset--color--navy);
	font-size: 14px;
	font-weight: 800;
}

.prismette-compare-row__price {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--heading-s);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.wp-block-group.prismette-price-card {
	border-radius: var(--wp--preset--border-radius--card-l);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 36px 40px;
	position: relative;
}

.wp-block-group.prismette-price-card > * {
	margin: 0;
}

.wp-block-group.prismette-price-card::after {
	background: var(--wp--preset--color--ivory);
	content: "";
	height: 30px;
	-webkit-mask: var(--prismette-star) center / contain no-repeat;
	mask: var(--prismette-star) center / contain no-repeat;
	position: absolute;
	right: 32px;
	top: 32px;
	width: 30px;
}

.prismette-price-card__label {
	color: var(--wp--preset--color--silver);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--caps-wide);
	text-transform: uppercase;
}

.prismette-price-card__size {
	color: var(--wp--preset--color--ivory);
	font-size: 14px;
	font-weight: 600;
}

.prismette-price-card .prismette-product-price.is-display {
	margin-block-start: 22px !important;
}

.prismette-product-price.is-display .prismette-price {
	color: var(--wp--preset--color--ivory);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--jumbo);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.prismette-price-card__note {
	color: var(--wp--preset--color--on-navy-muted);
	font-size: var(--wp--preset--font-size--small);
}

.prismette-price-card .prismette-cta {
	margin-block-start: 18px !important;
}

.prismette-price-check .prismette-footnote {
	margin-block-start: 28px;
}

/* -------------------------------------------------------------------------
 * Moissanite 101
 * ---------------------------------------------------------------------- */
.prismette-101 .wp-block-table.is-style-compare {
	margin-block-start: 36px;
}

/* -------------------------------------------------------------------------
 * Origin story (navy band, photo + text)
 * ---------------------------------------------------------------------- */
.wp-block-group.prismette-origin {
	padding: 0;
}

.wp-block-columns.prismette-origin__columns {
	gap: 0;
	margin: 0;
}

.wp-block-column.prismette-origin__media {
	align-self: stretch;
}

.prismette-origin__media .wp-block-image,
.prismette-origin__media img {
	display: block;
	height: 100%;
	margin: 0;
	min-height: 440px;
	object-fit: cover;
	width: 100%;
}

.wp-block-column.prismette-origin__text {
	padding: 64px max(var(--wp--custom--gutter), calc((100vw - var(--wp--style--global--wide-size)) / 2)) 64px 64px;
}

.prismette-origin__text > * {
	max-width: 440px;
}

p.is-style-eyebrow.prismette-star-mark {
	align-items: flex-start;
	flex-direction: column;
	gap: 22px;
}

p.is-style-eyebrow.prismette-star-mark::before {
	background: var(--wp--preset--color--ivory);
	height: 28px;
	width: 28px;
}

.prismette-origin .prismette-text-link a {
	color: var(--wp--preset--color--ivory);
}

/* -------------------------------------------------------------------------
 * Guarantee band with the large seal
 * ---------------------------------------------------------------------- */
.wp-block-group.prismette-seal {
	align-items: center;
	background: var(--wp--preset--color--navy);
	border-radius: var(--wp--preset--border-radius--pill);
	color: var(--wp--preset--color--ivory);
	display: flex;
	flex-direction: column;
	height: 128px;
	justify-content: center;
	margin-inline: auto !important;
	position: relative;
	width: 128px;
}

.wp-block-group.prismette-seal::before {
	border: 1px dashed rgba(247, 244, 238, 0.55);
	border-radius: 50%;
	content: "";
	inset: 9px;
	position: absolute;
}

.wp-block-group.prismette-seal > * {
	margin: 0;
	position: relative;
}

.prismette-seal__number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 44px;
	font-weight: 600;
	line-height: 1;
}

.prismette-seal__number::before {
	background: currentColor;
	content: "";
	display: block;
	height: 10px;
	margin: 0 auto 4px;
	-webkit-mask: var(--prismette-star) center / contain no-repeat;
	mask: var(--prismette-star) center / contain no-repeat;
	width: 10px;
}

.prismette-seal__word {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.prismette-guarantee-band .prismette-seal + .wp-block-heading {
	margin-block-start: 24px;
}

/* -------------------------------------------------------------------------
 * FAQ
 * ---------------------------------------------------------------------- */
.wp-block-columns.prismette-faq__columns {
	gap: 24px;
	margin-block-start: 32px;
}

.prismette-faq__columns .wp-block-column > * + * {
	margin-block-start: 10px;
}

.wp-block-details.prismette-faq__item {
	background: var(--wp--preset--color--base);
	padding: 0;
}

.prismette-faq__item summary {
	align-items: center;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: flex;
	font-size: 15px;
	font-weight: 600;
	gap: 20px;
	justify-content: space-between;
	line-height: 1.4;
	list-style: none;
	min-height: 60px;
	padding: 16px 20px;
}

.prismette-faq__item summary::-webkit-details-marker {
	display: none;
}

.prismette-faq__item summary::after {
	color: var(--wp--preset--color--navy);
	content: "+";
	flex: none;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
}

.prismette-faq__item[open] summary::after {
	content: "−";
}

.prismette-faq__item p {
	color: var(--wp--preset--color--slate);
	font-size: 14px;
	line-height: 1.65;
	margin: 0;
	padding: 0 48px 18px 20px;
}

/* -------------------------------------------------------------------------
 * Final call to action (navy band)
 * ---------------------------------------------------------------------- */
.wp-block-group.prismette-final-cta {
	padding-block: var(--wp--preset--spacing--120);
}

.prismette-final-cta .wp-block-heading {
	font-weight: 500;
	line-height: 1;
}

.prismette-final-cta .wp-block-heading::before {
	background: var(--wp--preset--color--ivory);
	content: "";
	display: block;
	height: 36px;
	margin: 0 auto 26px;
	-webkit-mask: var(--prismette-star) center / contain no-repeat;
	mask: var(--prismette-star) center / contain no-repeat;
	width: 36px;
}

.prismette-final-cta .prismette-cta {
	margin-block-start: 30px;
}

.prismette-final-cta__note {
	color: var(--wp--preset--color--silver);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * Email signup, gift and proof video
 * ---------------------------------------------------------------------- */
.wp-block-group.prismette-signup-section {
	padding-block: 72px;
}

.prismette-gift .prismette-arrival {
	margin-block-start: 18px;
}

.prismette-proof__video {
	border-radius: var(--wp--preset--border-radius--l);
	margin-block-start: 28px;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Tablets and phones
 * ---------------------------------------------------------------------- */
@media (max-width: 899px) {
	.wp-block-group.prismette-benefits-strip__grid,
	.wp-block-group.prismette-specs__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-group.prismette-care__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	ul.is-style-stars.prismette-care__tips {
		align-items: flex-start;
		flex-direction: column;
	}

	.prismette-ugc__arrow {
		display: none;
	}

	.wp-block-group.prismette-ugc__track {
		--prismette-ugc-per-row: 3.5;
	}

	.wp-block-group.prismette-photo-stack {
		padding: 0 0 56px 40px;
	}

	.wp-block-group.prismette-price-card {
		padding: 28px 24px;
	}

	.wp-block-column.prismette-origin__text {
		padding: 40px var(--wp--custom--gutter) 48px;
	}

	.prismette-origin__media .wp-block-image,
	.prismette-origin__media img {
		min-height: 260px;
	}
}

@media (max-width: 600px) {
	.wp-block-columns.prismette-split {
		gap: 32px;
	}

	/* The part-shown third card says there is more to swipe. */
	.wp-block-group.prismette-ugc__track {
		--prismette-ugc-gap: 10px;
		--prismette-ugc-per-row: 2.2;
	}

	.wp-block-group.prismette-benefits-strip__grid {
		gap: 18px 14px;
	}

	.wp-block-group.prismette-benefit {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}

	.prismette-compare-row__price {
		font-size: 24px;
	}
}

/* Links that jump to a section stop a little above it. */
#buy,
#reviews,
#size-guide,
#faq {
	scroll-margin-top: 16px;
}