/* Sanctus Select Site Pages: palette C, "Atelier". Ivory paper, ink text, Fraunces serif headings
   in plum (the Sanctus Solutions magenta, darkened, so the family link stays), copper for eyebrows
   and arrow links, white cards with a warm hairline. Chosen over the parent site's black and neon
   so brand accents and product photography read as intended. Scoped to body.ssel-site and .ssel so
   the header and footer from WP Custom Layout and the editor are untouched. */

body.ssel-site {
	--ssel-bg: #f6f1e8;
	--ssel-bg-2: #efe8dc;
	--ssel-text: #1d1b22;
	--ssel-muted: #5f5a66;
	--ssel-plum: #4a1d5e;
	--ssel-plum-2: #5e2a76;
	--ssel-plum-soft: rgba(74, 29, 94, 0.22);
	--ssel-plum-tint: rgba(74, 29, 94, 0.1);
	--ssel-copper: #a1471f;
	--ssel-copper-2: #8a3a17;
	--ssel-green: #2f855a;
	--ssel-card: #ffffff;
	--ssel-line: #e3dccf;
	--ssel-radius: 12px;
	--ssel-serif: "Fraunces", Georgia, "Times New Roman", serif;
	--ssel-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Sanctus Select Core's own tokens, so its grids, forms and baskets follow the theme. */
	--ssx-accent: var(--ssel-plum);
	--ssx-accent-text: #f6f1e8;
	--ssx-text: var(--ssel-text);
	--ssx-muted: var(--ssel-muted);
	--ssx-border: var(--ssel-line);
	--ssx-surface: var(--ssel-card);
	--ssx-radius: var(--ssel-radius);

	margin: 0;
	background: var(--ssel-bg);
	color: var(--ssel-text);
	font-family: var(--ssel-sans);
}

.ssel {
	display: block;
	width: 100%;
	font-size: 17px;
	line-height: 1.7;
	overflow-x: clip;
}

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

.ssel :where(h1, h2, h3, p, ul, ol) { margin: 0; }
.ssel :where(h1, h2) { font-family: var(--ssel-serif); color: var(--ssel-text); letter-spacing: -0.015em; line-height: 1.12; font-weight: 700; }
.ssel h3 { font-family: var(--ssel-sans); color: var(--ssel-text); font-weight: 700; letter-spacing: 0; }
.ssel a { color: var(--ssel-plum); text-underline-offset: 3px; }
.ssel a:hover { color: var(--ssel-copper); }
.ssel a:focus-visible,
.ssel button:focus-visible,
.ssel summary:focus-visible { outline: 3px solid var(--ssel-copper); outline-offset: 3px; }
.ssel img { display: block; max-width: 100%; height: auto; }

.ssel-wrap { width: min(1120px, 100% - 3rem); margin-inline: auto; }

/* Sections */
.ssel-section { padding: 5rem 0; }
.ssel-section--alt { background: var(--ssel-bg-2); }
.ssel-section--band {
	background:
		radial-gradient(60% 90% at 15% 50%, rgba(74, 29, 94, 0.12), transparent 65%),
		radial-gradient(50% 80% at 90% 40%, rgba(161, 71, 31, 0.1), transparent 65%),
		var(--ssel-bg-2);
	border-top: 1px solid var(--ssel-line);
	text-align: center;
}
.ssel-section--band .ssel-section__sub { margin-inline: auto; }
.ssel-section--band .ssel-buttons { justify-content: center; }
.ssel-section__title { font-size: clamp(1.85rem, 1.4rem + 1.6vw, 2.6rem); margin-bottom: 0.75rem; }
.ssel-section__sub { color: var(--ssel-muted); font-size: 1.1rem; max-width: 60ch; margin-bottom: 2.25rem; }
.ssel-section__title + .ssel-grid,
.ssel-section__title + .ssel-faq,
.ssel-section__title + .ssel-core { margin-top: 2.25rem; }

/* Eyebrow */
.ssel-eyebrow {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ssel-copper);
	margin-bottom: 1rem;
}

/* Hero */
.ssel-hero {
	position: relative;
	padding: 6rem 0 5rem;
	background:
		radial-gradient(55% 75% at 18% 25%, rgba(74, 29, 94, 0.14), transparent 62%),
		radial-gradient(45% 65% at 85% 20%, rgba(161, 71, 31, 0.12), transparent 62%),
		var(--ssel-bg);
	border-bottom: 1px solid var(--ssel-line);
}
.ssel-hero--plain { padding: 4.5rem 0 3.5rem; }
.ssel-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.ssel-hero--split .ssel-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ssel-hero__title {
	font-size: clamp(2.3rem, 1.6rem + 3vw, 3.6rem);
	color: var(--ssel-plum);
	margin-bottom: 1.25rem;
	max-width: 18ch;
}
.ssel-hero--plain .ssel-hero__title { max-width: 24ch; }
.ssel-hero__intro { font-size: 1.2rem; color: var(--ssel-text); max-width: 58ch; margin-bottom: 2rem; }
.ssel .ssel-hero__intro a { color: var(--ssel-plum); font-weight: 600; }

/* Buttons */
.ssel-buttons { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 0.5rem; }
/* Scoped under .ssel so these beat the generic `.ssel a` colour rule above. */
.ssel .ssel-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0.85rem 1.75rem;
	border-radius: 8px;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ssel .ssel-btn:hover { transform: translateY(-1px); }
.ssel .ssel-btn--primary { background: var(--ssel-plum); color: #f6f1e8; border: 2px solid var(--ssel-plum); }
.ssel .ssel-btn--primary:hover,
.ssel .ssel-btn--primary:focus-visible { background: var(--ssel-plum-2); border-color: var(--ssel-plum-2); color: #ffffff; }
.ssel .ssel-btn--outline { background: transparent; color: var(--ssel-plum); border: 2px solid var(--ssel-plum); }
.ssel .ssel-btn--outline:hover,
.ssel .ssel-btn--outline:focus-visible { background: var(--ssel-plum-tint); color: var(--ssel-plum); }

/* Arrow links */
.ssel .ssel-link { color: var(--ssel-copper); font-weight: 600; text-decoration: none; }
.ssel .ssel-link::after { content: " \2192"; }
.ssel .ssel-link:hover,
.ssel .ssel-link:focus-visible { color: var(--ssel-copper-2); text-decoration: underline; }
.ssel-more { margin-top: 1.5rem; }

/* Glass cards */
.ssel-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ssel-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ssel-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ssel-card {
	background: var(--ssel-card);
	border: 1px solid var(--ssel-line);
	border-radius: var(--ssel-radius);
	padding: 1.5rem;
	box-shadow: 0 10px 30px rgba(74, 29, 94, 0.06);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	min-width: 0;
}
.ssel-card__title { font-size: 1.15rem; }
.ssel-card__text { color: var(--ssel-muted); flex: 1 1 auto; }
.ssel .ssel-card .ssel-link { margin-top: 0.25rem; }
.ssel-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--ssel-plum-tint);
	color: var(--ssel-plum);
	margin-bottom: 0.35rem;
}
.ssel-badge--num { font-family: var(--ssel-serif); font-weight: 700; font-size: 1.1rem; color: var(--ssel-plum); }
.ssel-panel { gap: 0.9rem; }
.ssel-panel .ssel-card__title { font-family: var(--ssel-serif); font-size: 1.35rem; }

/* Check lists */
.ssel-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.ssel-checks li { position: relative; padding-left: 1.9rem; color: var(--ssel-text); }
.ssel-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3rem;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 999px;
	background: var(--ssel-green);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='black'/%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='black'/%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Split layout */
.ssel-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; align-items: center; }
.ssel-split .ssel-section__sub { margin-bottom: 1.75rem; }

/* FAQ */
.ssel-faq { display: grid; gap: 0.7rem; max-width: 820px; }
.ssel-faq__item {
	background: var(--ssel-card);
	border: 1px solid var(--ssel-line);
	border-radius: 10px;
	padding: 0.9rem 1.2rem;
}
.ssel-faq__item[open] { border-color: var(--ssel-plum-soft); }
.ssel-faq__item summary { cursor: pointer; font-weight: 600; color: var(--ssel-text); list-style: none; position: relative; padding-right: 2rem; }
.ssel-faq__item summary::-webkit-details-marker { display: none; }
.ssel-faq__item summary::after { content: "+"; position: absolute; right: 0; top: 0; color: var(--ssel-copper); font-size: 1.3rem; line-height: 1; }
.ssel-faq__item[open] summary::after { content: "\2212"; }
.ssel-faq__item p { color: var(--ssel-muted); margin-top: 0.6rem; }

/* Sanctus Select Core output inside these pages */
.ssel-core .ssx-empty { color: var(--ssel-muted); font-style: italic; }
.ssel-core .ssx-card,
.ssel-core .ssx-brand-card,
.ssel-core .ssx-collection-card,
.ssel-core .ssx-basket,
.ssel-core .ssx-form-section {
	background: var(--ssel-card);
	border-color: var(--ssel-line);
}
.ssel-core .ssx-button { color: #f6f1e8; font-weight: 600; }
.ssel-core .ssx-button-secondary { background: var(--ssel-plum-tint); color: var(--ssel-plum); }
.ssel-core input:not([type="checkbox"]):not([type="radio"]),
.ssel-core select,
.ssel-core textarea {
	background: #ffffff;
	color: var(--ssel-text);
	border: 1px solid #cfc6b8;
	border-radius: 8px;
}
.ssel-core input::placeholder,
.ssel-core textarea::placeholder { color: #8a8591; }
.ssel-core label { color: var(--ssel-text); }
.ssel-core .ssx-help { color: var(--ssel-muted); }
.ssel-core .ssx-field-error,
.ssel-core .ssx-form-errors p { color: #a12622; }

/* Responsive */
@media (max-width: 960px) {
	.ssel-grid,
	.ssel-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ssel-hero--split .ssel-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.ssel-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.ssel { font-size: 16px; }
	.ssel-section { padding: 3.5rem 0; }
	.ssel-hero { padding: 4rem 0 3rem; }
	.ssel-grid,
	.ssel-grid--2,
	.ssel-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.ssel-buttons .ssel-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.ssel .ssel-btn { transition: none; }
	.ssel .ssel-btn:hover { transform: none; }
}