/**
 * Prismette base styles.
 *
 * Only rules theme.json cannot express live here. Colours, fonts, sizes,
 * spacing, radius and shadows all come from theme.json variables.
 * Breakpoint: 600px matches settings.viewport.mobile in theme.json.
 */

/* -------------------------------------------------------------------------
 * 1. Size-matched fallback fonts
 * Measured against the real fonts so text barely moves when Manrope and
 * Cormorant Garamond finish loading (fewer layout shifts on slow phones).
 * ---------------------------------------------------------------------- */
@font-face {
	font-family: "Manrope Fallback";
	src: local("Arial"), local("ArialMT");
	font-weight: 200 600;
	size-adjust: 105.42%;
	ascent-override: 101.12%;
	descent-override: 28.46%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Manrope Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 700 800;
	size-adjust: 100.82%;
	ascent-override: 105.73%;
	descent-override: 29.76%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Cormorant Garamond Fallback";
	src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT");
	font-style: normal;
	font-weight: 300 700;
	size-adjust: 92.46%;
	ascent-override: 99.94%;
	descent-override: 31.04%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Cormorant Garamond Fallback";
	src: local("Times New Roman Bold Italic"), local("TimesNewRomanPS-BoldItalicMT");
	font-style: italic;
	font-weight: 300 700;
	size-adjust: 86.84%;
	ascent-override: 106.41%;
	descent-override: 33.05%;
	line-gap-override: 0%;
}

/* -------------------------------------------------------------------------
 * 2. Base
 * ---------------------------------------------------------------------- */
:root {
	--prismette-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7.4 16.6 11.1 24 12C16.6 12.9 12.9 16.6 12 24C11.1 16.6 7.4 12.9 0 12C7.4 11.1 11.1 7.4 12 0Z'/%3E%3C/svg%3E");
	--prismette-star-5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.83 6.1 6.67.62-5.04 4.45 1.47 6.55L12 16.8l-5.93 3.42 1.47-6.55-5.04-4.45 6.67-.62z'/%3E%3C/svg%3E");
	--prismette-focus-color: var(--wp--preset--color--navy);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Cormorant Garamond has old-style figures by default; prices and sizes need lining ones. */
	font-variant-numeric: lining-nums;
}

h1,
h2,
h3,
p {
	text-wrap: pretty;
}

::selection {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--ivory);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* -------------------------------------------------------------------------
 * 3. Keyboard focus: 2px ring, 2px offset. Navy on light, ivory on navy.
 * ---------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--prismette-focus-color);
	outline-offset: var(--wp--custom--focus--offset);
}

.is-style-section-navy,
.has-navy-background-color {
	--prismette-focus-color: var(--wp--preset--color--ivory);
}

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--navy);
	border-radius: var(--wp--preset--border-radius--m);
	color: var(--wp--preset--color--ivory);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.screen-reader-text:not(:focus) {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* -------------------------------------------------------------------------
 * 4. Reduced motion: stop animations (prism shimmer, drawer slide, spinner).
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* -------------------------------------------------------------------------
 * 5. The navy "buy" button.
 * Reserved for Add to cart (and Checkout / Place order, the same action
 * continued). It is not offered as a style in the editor, so no other button
 * on the site can look like it. Every other button uses the white secondary
 * style from theme.json.
 * ---------------------------------------------------------------------- */
.prismette-buy-button > .wp-block-button__link,
a.prismette-buy-button,
button.prismette-buy-button,
.prismette-add-to-cart .single_add_to_cart_button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	align-items: center;
	background-color: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--preset--color--navy);
	border-radius: var(--wp--preset--border-radius--button);
	box-shadow: var(--wp--preset--shadow--button);
	box-sizing: border-box;
	color: var(--wp--preset--color--ivory);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 800;
	gap: 12px;
	justify-content: center;
	letter-spacing: var(--wp--custom--letter-spacing--button);
	line-height: 1;
	min-height: var(--wp--custom--buy-button--height-mobile);
	padding: 0 28px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast);
}

.prismette-buy-button > .wp-block-button__link:hover,
a.prismette-buy-button:hover,
button.prismette-buy-button:hover,
.prismette-add-to-cart .single_add_to_cart_button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover {
	background-color: var(--wp--preset--color--navy-hover);
	border-color: var(--wp--preset--color--navy-hover);
	color: var(--wp--preset--color--ivory);
}

@media (min-width: 601px) {
	.prismette-buy-button > .wp-block-button__link,
	a.prismette-buy-button,
	button.prismette-buy-button,
	.prismette-add-to-cart .single_add_to_cart_button,
	.wc-block-components-checkout-place-order-button,
	.wc-block-cart__submit-button {
		font-size: 16px;
		min-height: var(--wp--custom--buy-button--height);
	}
}

/* -------------------------------------------------------------------------
 * 6. Prices: used by the buy box, sticky bar, cart drawer and price check.
 * The compare price is always "pairs x single price", never an invented
 * "was" price, and only appears when a bundle saves money.
 * ---------------------------------------------------------------------- */
.prismette-price {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 800;
	letter-spacing: var(--wp--custom--letter-spacing--price);
	line-height: 1;
}

.prismette-compare-price {
	color: var(--wp--preset--color--slate);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	line-height: 1;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.prismette-save-badge {
	align-items: center;
	background: var(--wp--preset--color--navy);
	border-radius: var(--wp--preset--border-radius--s);
	color: var(--wp--preset--color--ivory);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1;
	padding: 6px 10px;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * 7. Payment badges: every badge identical.
 * 52 x 34 (46 x 30 on phones), white, 1px border, 6px radius, 6px padding.
 * ---------------------------------------------------------------------- */
.prismette-payment-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	list-style: none;
	/* Side margins only: the block layout controls the space above and below. */
	margin-left: 0;
	margin-right: 0;
	padding: 0;
}

.prismette-payment-icons > li {
	align-items: center;
	background: #fff;
	border: 1px solid var(--wp--custom--payment--border);
	border-radius: var(--wp--preset--border-radius--s);
	box-sizing: border-box;
	display: flex;
	height: var(--wp--custom--payment--height);
	justify-content: center;
	margin: 0;
	padding: 6px;
	width: var(--wp--custom--payment--width);
}

.prismette-payment-icons img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

@media (max-width: 600px) {
	.prismette-payment-icons > li {
		height: var(--wp--custom--payment--height-mobile);
		width: var(--wp--custom--payment--width-mobile);
	}
}

/* -------------------------------------------------------------------------
 * 8. Star motif (block styles registered in inc/setup.php)
 * ---------------------------------------------------------------------- */

/* Eyebrow label: small caps line with the logo star in front. */
p.is-style-eyebrow {
	align-items: center;
	color: var(--wp--preset--color--navy);
	display: flex;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 800;
	gap: 8px;
	letter-spacing: var(--wp--custom--letter-spacing--caps-wide);
	line-height: 1;
	text-transform: uppercase;
}

p.is-style-eyebrow.has-text-align-center {
	justify-content: center;
}

p.is-style-eyebrow::before {
	background: currentColor;
	content: "";
	flex: none;
	height: 10px;
	-webkit-mask: var(--prismette-star) center / contain no-repeat;
	mask: var(--prismette-star) center / contain no-repeat;
	width: 10px;
}

/* Star bullets: the benefits list. */
ul.is-style-stars {
	display: grid;
	gap: 12px;
	list-style: none;
	padding-left: 0;
}

ul.is-style-stars > li {
	padding-left: 28px;
	position: relative;
}

ul.is-style-stars > li::before {
	background: var(--wp--preset--color--navy);
	content: "";
	height: 15px;
	left: 4px;
	-webkit-mask: var(--prismette-star) center / contain no-repeat;
	mask: var(--prismette-star) center / contain no-repeat;
	position: absolute;
	top: 0.2em;
	width: 15px;
}

@supports (top: 1lh) {
	ul.is-style-stars > li::before {
		top: calc(0.5lh - 7.5px);
	}
}

/* Section divider: silver line, navy star, silver line. */
hr.wp-block-separator.is-style-star {
	background:
		linear-gradient(currentColor, currentColor) left center / calc(50% - 18px) 1px no-repeat,
		linear-gradient(currentColor, currentColor) right center / calc(50% - 18px) 1px no-repeat;
	border: 0;
	height: 12px;
	overflow: visible;
	position: relative;
	width: 100%;
}

hr.wp-block-separator.is-style-star::after {
	background: var(--wp--preset--color--navy);
	content: "";
	height: 12px;
	left: 50%;
	margin-left: -6px;
	-webkit-mask: var(--prismette-star) center / contain no-repeat;
	mask: var(--prismette-star) center / contain no-repeat;
	position: absolute;
	top: 0;
	width: 12px;
}

/* On navy bands the star motif turns ivory and eyebrow labels turn silver. */
.is-style-section-navy ul.is-style-stars > li::before,
.is-style-section-navy hr.wp-block-separator.is-style-star::after {
	background: var(--wp--preset--color--ivory);
}

.is-style-section-navy p.is-style-eyebrow {
	color: var(--wp--preset--color--silver);
}

/* -------------------------------------------------------------------------
 * 9. Review stars: five champagne stars filled to the rating
 * (--prismette-rating-fill, set by the theme). Decorative colour; the
 * number and the label next to them carry the meaning.
 * ---------------------------------------------------------------------- */
.prismette-stars {
	--prismette-stars-size: 15px;
	background: linear-gradient(90deg, var(--wp--preset--color--champagne) var(--prismette-rating-fill, 100%), rgba(200, 169, 106, 0.3) 0);
	display: inline-block;
	flex: none;
	height: var(--prismette-stars-size);
	-webkit-mask: var(--prismette-star-5) left center / var(--prismette-stars-size) var(--prismette-stars-size) repeat-x;
	mask: var(--prismette-star-5) left center / var(--prismette-stars-size) var(--prismette-stars-size) repeat-x;
	vertical-align: middle;
	width: calc(var(--prismette-stars-size) * 5);
}

.prismette-stars.is-small {
	--prismette-stars-size: 12px;
}

/* -------------------------------------------------------------------------
 * 10. Editor-only placeholder for product blocks in the Site Editor.
 * ---------------------------------------------------------------------- */
.prismette-placeholder {
	background: var(--wp--preset--color--mist);
	border: 1px dashed var(--wp--preset--color--silver);
	border-radius: var(--wp--preset--border-radius--card);
	color: var(--wp--preset--color--slate);
	display: flex;
	flex-direction: column;
	font-size: var(--wp--preset--font-size--small);
	gap: 2px;
	padding: 14px 16px;
}

.prismette-placeholder strong {
	color: var(--wp--preset--color--navy);
}

/* -------------------------------------------------------------------------
 * 11. Shared by the zoom view, cart drawer and Add to cart button.
 * ---------------------------------------------------------------------- */

/* The page behind an open drawer or zoom view does not scroll. */
html.prismette-has-modal {
	overflow: hidden;
}

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

/* -------------------------------------------------------------------------
 * 12. Block styles from the sections, usable on any page.
 * ---------------------------------------------------------------------- */

/* List "Numbered circles": navy numbers in circles, silver lines between. */
ol.is-style-numbered {
	border-top: 1px solid var(--wp--preset--color--silver);
	counter-reset: prismette-step;
	list-style: none;
	padding: 0;
}

ol.is-style-numbered > li {
	border-bottom: 1px solid var(--wp--preset--color--silver);
	color: var(--wp--preset--color--slate);
	counter-increment: prismette-step;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	padding: 16px 0 16px 46px;
	position: relative;
}

ol.is-style-numbered > li strong {
	color: var(--wp--preset--color--navy);
	font-size: 15px;
	font-weight: 800;
}

ol.is-style-numbered > li::before {
	align-items: center;
	background: var(--wp--preset--color--navy);
	border-radius: var(--wp--preset--border-radius--pill);
	color: var(--wp--preset--color--ivory);
	content: counter(prismette-step);
	display: flex;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 800;
	height: 28px;
	justify-content: center;
	left: 0;
	position: absolute;
	top: 17px;
	width: 28px;
}

/* Table "Comparison": the first value column is navy, the rest plain. */
.wp-block-table.is-style-compare {
	margin-inline: auto;
	max-width: 760px;
	overflow-x: auto;
}

.wp-block-table.is-style-compare table {
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
	min-width: 520px;
	width: 100%;
}

.wp-block-table.is-style-compare th,
.wp-block-table.is-style-compare td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--silver);
	color: var(--wp--preset--color--ink);
	padding: 17px 14px;
	text-align: center;
	vertical-align: middle;
}

.wp-block-table.is-style-compare thead th {
	border-bottom: 0;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 800;
	letter-spacing: var(--wp--custom--letter-spacing--caps);
	text-transform: uppercase;
}

.wp-block-table.is-style-compare th:first-child,
.wp-block-table.is-style-compare td:first-child {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	text-align: left;
}

/* The corner cell is named for screen readers but stays blank on screen. */
.wp-block-table.is-style-compare thead th:first-child {
	font-size: 0;
}

.wp-block-table.is-style-compare th:nth-child(2),
.wp-block-table.is-style-compare td:nth-child(2) {
	background: var(--wp--preset--color--navy);
	border-bottom-color: var(--wp--preset--color--navy-line);
	color: var(--wp--preset--color--ivory);
	font-weight: 800;
}

.wp-block-table.is-style-compare thead th:nth-child(2) {
	border-radius: var(--wp--preset--border-radius--card) var(--wp--preset--border-radius--card) 0 0;
	color: var(--wp--preset--color--ivory);
}

.wp-block-table.is-style-compare thead th:nth-child(2)::before {
	background: currentColor;
	content: "";
	display: inline-block;
	height: 9px;
	margin-right: 8px;
	-webkit-mask: var(--prismette-star) center / contain no-repeat;
	mask: var(--prismette-star) center / contain no-repeat;
	width: 9px;
}

.wp-block-table.is-style-compare tbody tr:last-child td:nth-child(2) {
	border-bottom-color: var(--wp--preset--color--navy);
	border-radius: 0 0 var(--wp--preset--border-radius--card) var(--wp--preset--border-radius--card);
}

/* "Diamond wins": a small pill under the figure. */
.wp-block-table.is-style-compare td strong {
	background: var(--wp--preset--color--mist);
	border-radius: var(--wp--preset--border-radius--pill);
	color: var(--wp--preset--color--navy);
	display: inline-block;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.1em;
	margin-top: 6px;
	padding: 3px 8px;
	text-transform: uppercase;
}

.wp-block-table.is-style-compare figcaption {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--tiny);
	margin-top: 14px;
	text-align: left;
}

@media (max-width: 600px) {
	.wp-block-table.is-style-compare table {
		font-size: 12.5px;
		min-width: 0;
	}

	.wp-block-table.is-style-compare th,
	.wp-block-table.is-style-compare td {
		padding: 12px 6px;
	}

	.wp-block-table.is-style-compare th:first-child,
	.wp-block-table.is-style-compare td:first-child {
		padding-left: 0;
	}

	.wp-block-table.is-style-compare thead th {
		font-size: 9px;
		letter-spacing: 0.08em;
	}

	.wp-block-table.is-style-compare thead th:nth-child(2)::before {
		display: block;
		margin: 0 auto 4px;
	}

	.wp-block-table.is-style-compare td strong {
		font-size: 8px;
		letter-spacing: 0.06em;
		padding: 3px 6px;
	}
}

/* Small caps text link with an arrow ("Read our story →"). */
.prismette-text-link a {
	color: inherit;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 800;
	letter-spacing: var(--wp--custom--letter-spacing--caps);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-transform: uppercase;
	text-underline-offset: 6px;
}

.prismette-text-link a::after {
	content: " →";
}