/* Sanctus Select public styles. Scoped under .ssx-; brand accents come through CSS variables
   that Phase 4 configuration sets per brand area. Themes can override any token. */
:root {
	--ssx-accent: #9a4126;
	--ssx-text: #1f2328;
	--ssx-muted: #646970;
	--ssx-border: #e0e0e0;
	--ssx-surface: #ffffff;
	--ssx-radius: 8px;
	--ssx-gap: 20px;
}

.ssx-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--ssx-gap);
	list-style: none;
	margin: 0 0 var(--ssx-gap);
	padding: 0;
}

.ssx-card {
	background: var(--ssx-surface);
	border: 1px solid var(--ssx-border);
	border-radius: var(--ssx-radius);
	overflow: hidden;
}

.ssx-card-link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px;
	color: var(--ssx-text);
	text-decoration: none;
	height: 100%;
}

.ssx-card-link:focus-visible {
	outline: 3px solid var(--ssx-accent);
	outline-offset: -3px;
}

.ssx-card-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: calc(var(--ssx-radius) - 4px);
	background: #f3f3f3;
}

.ssx-card-title {
	font-size: 1.05rem;
	margin: 6px 0 0;
}

.ssx-card-text,
.ssx-card-brand,
.ssx-card-meta,
.ssx-price-note,
.ssx-purchase-note,
.ssx-seller {
	color: var(--ssx-muted);
	font-size: 0.9rem;
}

.ssx-card-price {
	font-weight: 600;
}

.ssx-unavailable .ssx-card-image {
	opacity: 0.6;
}

.ssx-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
}

.ssx-badge-muted {
	background: #eef0f2;
	color: var(--ssx-muted);
}

.ssx-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--ssx-gap);
	margin: var(--ssx-gap) 0;
}

.ssx-product-gallery {
	display: grid;
	gap: 10px;
}

.ssx-gallery-image {
	width: 100%;
	border-radius: var(--ssx-radius);
	border: 1px solid var(--ssx-border);
}

.ssx-gallery-image + .ssx-gallery-image {
	max-width: 48%;
	display: inline-block;
}

.ssx-price-value {
	font-size: 1.4rem;
	font-weight: 700;
}

.ssx-options dt {
	font-weight: 600;
	margin-top: 8px;
}

.ssx-options dd {
	margin: 0 0 4px;
	color: var(--ssx-muted);
}

.ssx-button {
	display: inline-block;
	padding: 12px 22px;
	border: 0;
	border-radius: var(--ssx-radius);
	background: var(--ssx-accent);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.ssx-button:focus-visible {
	outline: 3px solid var(--ssx-text);
	outline-offset: 2px;
}

.ssx-button[disabled] {
	background: #c3c4c7;
	cursor: not-allowed;
}

.ssx-purchase {
	margin: 16px 0;
}

.ssx-product-description,
.ssx-variants {
	grid-column: 1 / -1;
}

.ssx-variants {
	width: 100%;
	border-collapse: collapse;
}

.ssx-variants th,
.ssx-variants td {
	text-align: left;
	padding: 8px;
	border-bottom: 1px solid var(--ssx-border);
}

.ssx-empty {
	color: var(--ssx-muted);
	font-style: italic;
}

@media (max-width: 720px) {
	.ssx-product {
		grid-template-columns: 1fr;
	}
}

/* Phase 3: purchase form, baskets, modals */
.ssx-purchase-form .ssx-field { margin: 10px 0; }
.ssx-purchase-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.ssx-purchase-form select,
.ssx-purchase-form input[type="text"],
.ssx-purchase-form input[type="number"],
.ssx-purchase-form textarea,
.ssx-survey-detail { width: 100%; max-width: 420px; padding: 8px 10px; border: 1px solid var(--ssx-border); border-radius: 6px; font: inherit; }
.ssx-qty input { max-width: 90px; }
.ssx-help { color: var(--ssx-muted); font-size: 0.85rem; margin: 4px 0 0; }
.ssx-field-error { color: #a12622; font-size: 0.9rem; margin: 4px 0 0; min-height: 0; }
.ssx-form-errors p { color: #a12622; margin: 6px 0; }
.ssx-live-price { font-size: 1.25rem; font-weight: 700; margin: 8px 0; }
.ssx-addon, .ssx-agreement { border: 1px solid var(--ssx-border); border-radius: var(--ssx-radius); padding: 12px 14px; margin: 14px 0; }
.ssx-addon legend { font-weight: 700; padding: 0 6px; }
.ssx-choice { display: block; font-weight: 400 !important; margin: 6px 0; }
.ssx-strike { text-decoration: line-through; color: var(--ssx-muted); margin-right: 4px; }
.ssx-agreement-text { max-height: 220px; overflow: auto; font-size: 0.9rem; padding: 8px; background: #fafafa; border-radius: 6px; }
.ssx-added { border: 1px solid var(--ssx-accent); border-radius: var(--ssx-radius); padding: 12px 14px; margin-bottom: 12px; }
.ssx-alternative { margin-top: 12px; }
.ssx-button-secondary { background: #eef0f2; color: var(--ssx-text); }
.ssx-button-small { padding: 6px 12px; font-size: 0.85rem; }
.ssx-link { background: none; border: 0; color: var(--ssx-accent); text-decoration: underline; cursor: pointer; padding: 6px; font: inherit; }
.ssx-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.ssx-modal-panel { background: var(--ssx-surface); border-radius: var(--ssx-radius); padding: 22px; max-width: 480px; width: 100%; max-height: 90vh; overflow: auto; }
.ssx-modal-actions { display: flex; gap: 10px; margin-top: 14px; }
.ssx-basket { border: 1px solid var(--ssx-border); border-radius: var(--ssx-radius); padding: 18px; margin: 0 0 var(--ssx-gap); }
.ssx-basket h2 { margin: 0 0 4px; }
.ssx-lines { list-style: none; margin: 12px 0; padding: 0; }
.ssx-line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ssx-border); }
.ssx-line-image { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }
.ssx-line-title { margin: 0 0 4px; }
.ssx-line-attrs { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 4px 0; font-size: 0.85rem; color: var(--ssx-muted); }
.ssx-line-attrs dt { font-weight: 600; }
.ssx-line-attrs dd { margin: 0; }
.ssx-line-controls { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.ssx-line-controls input { width: 70px; padding: 6px; border: 1px solid var(--ssx-border); border-radius: 6px; }
.ssx-line-price { font-weight: 600; margin: 0; }
.ssx-lines-children { grid-column: 1 / -1; margin: 0 0 0 24px; }
.ssx-lines-children .ssx-line { border-top: 1px dashed var(--ssx-border); }
.ssx-basket-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.ssx-subtotal { margin: 0; font-size: 1.1rem; }
.ssx-warning { color: #8a5a00; background: #fff4e5; padding: 8px 10px; border-radius: 6px; }
.ssx-cart-note { color: var(--ssx-muted); font-size: 0.9rem; white-space: pre-line; }

/* Phase 4: brand areas, hero, collections, finder, blocks */
.ssx-brand-area { --ssx-accent-text: #ffffff; font-family: var(--ssx-font, inherit); }
.ssx-brand-area .ssx-grid { grid-template-columns: repeat(auto-fill, minmax(calc(100% / var(--ssx-columns, 4) - var(--ssx-gap)), 1fr)); }
.ssx-brand-area .ssx-button { color: var(--ssx-accent-text); }
.ssx-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ssx-gap); align-items: center; padding: 24px; border-radius: var(--ssx-radius); background: color-mix(in srgb, var(--ssx-accent) 8%, white); margin: var(--ssx-gap) 0; }
.ssx-hero-with-image { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.ssx-hero-logo { max-height: 56px; width: auto; }
.ssx-hero-heading { margin: 0 0 8px; font-size: 1.8rem; }
.ssx-hero-sub { color: var(--ssx-muted); margin: 0 0 14px; }
.ssx-hero-image { width: 100%; border-radius: var(--ssx-radius); }
.ssx-section-title { margin: calc(var(--ssx-gap) * 1.5) 0 12px; }
.ssx-finder { padding: 18px; border: 1px solid var(--ssx-border); border-radius: var(--ssx-radius); margin: var(--ssx-gap) 0; }
.ssx-finder .ssx-section-title { margin-top: 0; }
.ssx-finder-steps { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.ssx-finder-step { display: flex; flex-direction: column; gap: 4px; min-width: 220px; flex: 1; }
.ssx-finder-step select { padding: 8px 10px; border: 1px solid var(--ssx-border); border-radius: 6px; font: inherit; }
.ssx-finder-toggle { display: flex; align-items: center; gap: 6px; }
.ssx-badge-accent { background: var(--ssx-accent); color: var(--ssx-accent-text); margin-right: 4px; }
.ssx-wholesale, .ssx-faq, .ssx-contact { margin: var(--ssx-gap) 0; }
.ssx-faq-item { border-top: 1px solid var(--ssx-border); padding: 10px 0; }
.ssx-faq-item summary { cursor: pointer; font-weight: 600; }
.ssx-faq-answer { padding: 8px 0 4px; }
.ssx-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: var(--ssx-gap) 0; color: var(--ssx-muted); }
.ssx-trust li::before { content: '✓ '; color: var(--ssx-accent); }
.ssx-specs { width: 100%; border-collapse: collapse; grid-column: 1 / -1; }
.ssx-specs th, .ssx-specs td { text-align: left; padding: 8px; border-bottom: 1px solid var(--ssx-border); }
.ssx-specs caption { text-align: left; font-weight: 700; padding: 8px 0; }
.ssx-breadcrumb { font-size: 0.9rem; color: var(--ssx-muted); margin-bottom: 12px; }
.ssx-collection-description { max-width: 70ch; }
.ssx-container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.ssx-gallery-carousel .ssx-product-gallery { display: flex; overflow-x: auto; gap: 10px; scroll-snap-type: x mandatory; }
.ssx-gallery-carousel .ssx-gallery-image { flex: 0 0 80%; scroll-snap-align: start; max-width: none; display: block; }
[data-ssx-preview]::before { content: 'Preview of an unpublished configuration'; display: block; background: #fff4e5; color: #8a5a00; padding: 6px 10px; font-size: 0.85rem; border-radius: 6px; margin-bottom: 10px; }
@media (max-width: 720px) { .ssx-hero-with-image { grid-template-columns: 1fr; } }

/* Phase 5: public forms */
.ssx-form { max-width: 760px; }
.ssx-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 18px; margin: 12px 0; }
.ssx-form .ssx-field label { display: block; font-weight: 600; margin-bottom: 4px; }
.ssx-form input[type="text"], .ssx-form input[type="email"], .ssx-form input[type="tel"], .ssx-form input[type="url"], .ssx-form select, .ssx-form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--ssx-border); border-radius: 6px; font: inherit; }
.ssx-field-wide { grid-column: 1 / -1; }
.ssx-form-section { border: 1px solid var(--ssx-border); border-radius: var(--ssx-radius); padding: 12px 14px; margin: 12px 0; }
.ssx-form-section legend { font-weight: 700; padding: 0 6px; }