/* Breadcrumb trail (single-product.html and archive-product.html) */

.softextheme-breadcrumb {
	align-items: center;
	color: var(--wp--preset--color--accent-4);
}

.softextheme-breadcrumb__item {
	margin: 0;
}

.softextheme-breadcrumb__item a {
	color: inherit;
	text-decoration: none;
}

.softextheme-breadcrumb__item a:hover {
	text-decoration: underline;
}

/* A "/" between every item except the first — works regardless of how many
   items the breadcrumb ends up with. */
.softextheme-breadcrumb__item + .softextheme-breadcrumb__item::before {
	content: "/";
	display: inline-block;
	margin: 0 0.5rem;
	opacity: 0.5;
}

.softextheme-breadcrumb__current {
	color: var(--wp--preset--color--contrast);
}

/* Category pill links (archive-product.html, above the flat grid) */

.softextheme-product-categories {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.softextheme-product-categories a {
	display: inline-block;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--accent-6);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.softextheme-product-categories a:hover {
	background: var(--wp--preset--color--accent-5);
	border-color: var(--wp--preset--color--accent-4);
}

/* Catalog grid (archive-product.html) */

.softextheme-products-grid .wp-block-post-template {
	gap: 2rem;
}

.softextheme-product-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.softextheme-product-card:hover {
	transform: translateY( -6px );
	box-shadow: var( --sx-shadow-card-hover );
}

.softextheme-product-card .wp-block-post-featured-image {
	margin-bottom: 1rem;
}

.softextheme-product-card .wp-block-post-featured-image img {
	border-radius: 12px;
}

.softextheme-product-card .wp-block-post-title {
	margin: 0 0 0.5rem;
}

.softextheme-product-tagline {
	color: var(--wp--preset--color--accent-4);
	margin-bottom: 0.75rem;
}

.softextheme-product-price {
	margin-top: auto;
	padding-top: 0.75rem;
	font-weight: 700;
	color: var( --sx-brand-text );
}

/* Single product hero (single-product.html) */

.softextheme-product-eyebrow {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 6px 16px;
	background: rgba( 227, 6, 19, 0.1 );
	color: var( --sx-brand-text );
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

.single-product .softextheme-product-tagline {
	color: var(--wp--preset--color--accent-4);
}

.single-product .softextheme-product-price {
	display: inline-flex;
	margin-top: var(--wp--preset--spacing--30, 20px);
	padding: 10px 22px;
	background: color-mix( in srgb, var(--wp--preset--color--contrast) 5%, transparent );
	border-radius: 12px;
	font-size: 2rem;
	font-weight: 700;
}

.single-product .wp-block-post-featured-image img {
	box-shadow: var( --sx-shadow-screenshot );
}

/* Single product body content */

.single-product .entry-content,
.single-product .wp-block-post-content {
	font-size: 1.05rem;
	line-height: 1.7;
}

.single-product .entry-content h3,
.single-product .wp-block-post-content h3 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 3rem;
	margin-bottom: 1.25rem;
	font-size: 1.4rem;
	font-weight: 700;
}

.single-product .entry-content h3::before,
.single-product .wp-block-post-content h3::before {
	content: '';
	display: inline-block;
	width: 5px;
	height: 1.3rem;
	border-radius: 3px;
	background: var( --softextheme-brand-red );
	flex-shrink: 0;
}

.single-product .entry-content .is-style-checkmark-list li::marker,
.single-product .wp-block-post-content .is-style-checkmark-list li::marker {
	color: var( --sx-brand-text );
}

/* Price / license table */

.single-product .wp-block-table {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba( 20, 25, 35, 0.06 );
	border: 1px solid var(--wp--preset--color--accent-6);
}

.single-product .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.single-product .wp-block-table thead th {
	background: var( --softextheme-brand-red );
	color: var( --sx-white );
	text-align: left;
	padding: 14px 22px;
	font-weight: 700;
}

.single-product .wp-block-table tbody td {
	padding: 12px 22px;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.single-product .wp-block-table tbody tr:last-child td {
	border-bottom: none;
}

.single-product .wp-block-table tbody tr:nth-child(even) {
	background: color-mix( in srgb, var(--wp--preset--color--contrast) 2%, transparent );
}

/* Module accordion, scoped so the shared FAQ styling gets a product-specific accent */

.single-product .softextheme-faq {
	margin-top: 0;
}

.single-product .softextheme-faq__item {
	padding-left: 4px;
}

.single-product .softextheme-faq__question::before {
	content: '📁';
	margin-right: 12px;
	font-size: 1rem;
}

/* ---- Product landing grid ----
   Six curated lines, three across, as the brief's 3x2 layout. Cards are
   deliberately larger than the ones on the homepage. */

.sx-products__lead {
	max-width: 620px;
	margin-top: 16px;
	color: var( --sx-text-secondary );
}

.sx-lines {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 24px;
}

.sx-line {
	display: flex;
	flex-direction: column;
	min-height: 240px;
	padding: 32px;
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
	background: var( --sx-white );
	color: inherit;
	text-decoration: none;
	transition: transform var( --sx-transition-base ) var( --sx-ease ),
		border-color var( --sx-transition-base ) var( --sx-ease ),
		box-shadow var( --sx-transition-base ) var( --sx-ease );
}

.sx-line__title {
	margin: 0 0 12px;
	font-size: 1.5rem;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.sx-line__text {
	margin: 0;
	color: var( --sx-text-secondary );
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* Pushed to the bottom so the arrows line up across a row. */
.sx-line__arrow {
	margin-top: auto;
	padding-top: 24px;
	color: var( --sx-brand-text );
	font-size: 1.25rem;
	transition: transform var( --sx-transition-base ) var( --sx-ease );
}

.sx-line:hover {
	transform: translateY( -4px );
	border-color: var( --sx-brand-200 );
	box-shadow: var( --sx-shadow-card-hover );
}

.sx-line:hover .sx-line__arrow {
	transform: translateX( 4px );
}

.sx-line:focus-visible {
	outline: 3px solid rgba( 242, 47, 42, 0.2 );
	outline-offset: 2px;
}

@media ( max-width: 1023px ) {
	.sx-lines {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 767px ) {
	.sx-lines {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sx-line {
		min-height: 0;
		padding: 24px;
	}
}

/* ---- Product hero ---- */

.sx-product-features {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.sx-product-features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.sx-product-features li + li {
	margin-top: 12px;
}

.sx-product-features .sx-icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var( --sx-brand-text );
}

.sx-product-features .sx-icon svg {
	width: 20px;
	height: 20px;
}

/*
 * The design frames the product screenshot in a laptop. Drawn in CSS rather
 * than shipped as a bezel image: it adapts to any screenshot ratio and costs
 * nothing to load.
 */
.sx-product-shot {
	position: relative;
	padding: 12px 12px 0;
	border-radius: 12px 12px 0 0;
	background: var( --sx-neutral-800 );
	box-shadow: var( --sx-shadow-screenshot );
}

.sx-product-shot img,
.sx-product-shot figure {
	display: block;
	margin: 0;
	border-radius: 6px 6px 0 0;
	overflow: hidden;
}

.sx-product-shot::after {
	content: "";
	display: block;
	height: 14px;
	margin: 0 -28px;
	border-radius: 0 0 10px 10px;
	background: var( --sx-neutral-700 );
}

@media ( max-width: 700px ) {
	.sx-product-shot {
		padding: 8px 8px 0;
	}

	.sx-product-shot::after {
		margin: 0 -14px;
		height: 10px;
	}
}

/* ---- The head of a product category ----
   Title on the left, the brand's mark on the right: the budget page was a
   heading over two grey rows with nothing to say whose products these are. */

.sx-category-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
}

.sx-category-head .sx-page-title {
	min-width: 0;
	margin: 0;
}

/*
 * Height, not width. The three category marks are different shapes — BAS is
 * near-square, KBS is four to one, ESET is a wide wordmark — and matching them
 * on height is what makes them read as the same size. The same rule the
 * mega-menu columns use.
 */
.sx-category-logo {
	flex: none;
	width: auto;
	height: 46px;
	max-width: 100%;
	object-fit: contain;
}

@media ( max-width: 600px ) {
	.sx-category-head {
		gap: 14px;
	}

	.sx-category-logo {
		height: 36px;
	}
}