/* cms-product-grid.css v1.0.11 */
/* 1.0.11: no CSS change - version kept in step with flex.json (new Link Label settings). */
/* 1.0.10: button text all caps with 0.05em letter spacing (site button standard, 2026-10-28). */
/* 1.0.9: all colors, fonts and sizes use corsetmaking.css :root tokens (no fallbacks), per CMS Flex Component Standards 2026-10-28.
   Requires corsetmaking.css with Design Tokens Pass 2 (b48) - --btn-gold-*, --price-color, --surface-subtle/-muted, --focus-ring. */

/* ==========================================================================
   CMS Product Grid
   ========================================================================== */

.cms-product-grid {
	box-sizing: border-box;
	width: 100%;
	padding: 30px 0;
}

/* Screen-reader-only text (sale / regular price labels) */
.cms-product-grid__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Section header
   ========================================================================== */

.cms-product-grid__header {
	margin-bottom: 24px;
}

.cms-product-grid__heading {
	margin-top: 0;
	margin-bottom: 10px;
	color: var(--text-body);
}

/* Page Title - Crimson Text 35 (30 mobile) */
.cms-product-grid__heading--xl {
	font-family: var(--font-accent-family);
	font-size: var(--font-size-35);
	font-weight: 400;
	line-height: 1.2;
}

/* Section Title - Crimson Text 25 (20 mobile) */
.cms-product-grid__heading--large {
	font-family: var(--font-accent-family);
	font-size: var(--font-accent-size-md);
	font-weight: 600;
	line-height: 1.25;
}

/* Content Header - Montserrat 20 (18 mobile), matches h2.content-page-header */
.cms-product-grid__heading--medium {
	font-family: var(--font-heading-family);
	font-size: var(--font-heading-size-md);
	font-weight: 600;
	line-height: 1.3;
}

/* Label / Small - Montserrat 14 uppercase */
.cms-product-grid__heading--small {
	font-family: var(--font-ui-family);
	font-size: var(--font-size-14);
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.cms-product-grid__heading a {
	color: inherit;
	text-decoration: none;
}

.cms-product-grid__heading a:hover,
.cms-product-grid__heading a:focus {
	color: var(--link-hover);
}

/* Intro - body copy 16 */
.cms-product-grid__intro {
	font-family: var(--font-primary);
	font-size: var(--font-size-16);
	color: var(--text-body);
	line-height: 1.7;
}

.cms-product-grid__intro p {
	margin: 0 0 12px;
}

.cms-product-grid__intro a {
	color: var(--link-color);
	text-decoration: underline;
}

.cms-product-grid__intro a:hover,
.cms-product-grid__intro a:focus {
	color: var(--link-hover);
}

/* ==========================================================================
   Grid layout
   ========================================================================== */

.cms-product-grid__grid {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-left: -10px;
	margin-right: -10px;
}

.cms-product-grid--cols-3 .cms-product-grid__card {
	width: calc(33.333% - 20px);
	margin: 0 10px 20px;
}

.cms-product-grid--cols-4 .cms-product-grid__card {
	width: calc(25% - 20px);
	margin: 0 10px 20px;
}

/* ==========================================================================
   Card
   ========================================================================== */

.cms-product-grid__card {
	box-sizing: border-box;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	background-color: var(--color-white);
}

.cms-product-grid__card--border-solid {
	border: 1px solid var(--border-light);
}

.cms-product-grid__card--border-rounded {
	border: 1px solid var(--border-light);
	border-radius: 6px;
	overflow: hidden;
}

/* Card image */
.cms-product-grid__card-image-link {
	display: block;
}

.cms-product-grid__card-image {
	width: 100%;
	background-color: var(--surface-subtle);
	overflow: hidden;
}

.cms-product-grid__card-image img {
	width: 100%;
	height: 240px;
	-o-object-fit: cover;
	object-fit: cover;
	display: block;
	-webkit-transition: opacity 0.2s ease;
	transition: opacity 0.2s ease;
}

.cms-product-grid__card-image-link:hover .cms-product-grid__card-image img {
	opacity: 0.88;
}

.cms-product-grid__card-image-placeholder {
	width: 100%;
	height: 240px;
	background-color: var(--surface-muted);
}

/* ==========================================================================
   Image Ratio variants (1.0.8)
   Default (no modifier class) = Classic: fixed 240px height, object-fit:cover.
   Natural/Square/Landscape/Portrait are opt-in per grid via the Style group.
   Focus point applies as inline object-position on Square/Landscape/Portrait only.
   ========================================================================== */

.cms-product-grid__card-image--natural img {
	height: auto;
	-o-object-fit: initial;
	object-fit: initial;
}

.cms-product-grid__card-image--square img,
.cms-product-grid__card-image--landscape img,
.cms-product-grid__card-image--portrait img {
	height: auto;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center center;
	object-position: center center;
}

.cms-product-grid__card-image--square img {
	aspect-ratio: 1 / 1;
}

.cms-product-grid__card-image--landscape img {
	aspect-ratio: 4 / 3;
}

.cms-product-grid__card-image--portrait img {
	aspect-ratio: 3 / 4;
}

/* Card body */
.cms-product-grid__card-body {
	padding: 14px 14px 16px;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

/* Card name */
.cms-product-grid__card-name {
	font-family: var(--font-ui-family);
	font-size: var(--font-ui-size-md);
	font-weight: 600;
	color: var(--text-body);
	margin: 0 0 8px;
	line-height: 1.4;
}

.cms-product-grid__card-name a {
	color: inherit;
	text-decoration: none;
}

.cms-product-grid__card-name a:hover,
.cms-product-grid__card-name a:focus {
	color: var(--link-hover);
}

/* Subtitle (14 - 13 is retired) */
.cms-product-grid__card-subtitle {
	font-family: var(--font-primary);
	font-size: var(--font-size-14);
	color: var(--text-muted);
	margin: 0 0 10px;
	line-height: 1.5;
}

/* Price - formatted, visitor's price; original price struck through when discounted */
.cms-product-grid__card-price {
	font-family: var(--font-primary);
	font-size: var(--font-size-14);
	margin-bottom: 12px;
}

.cms-product-grid__price-current {
	font-weight: 600;
	color: var(--price-color);
}

.cms-product-grid__price-original {
	margin-left: 8px;
	font-weight: 400;
	color: var(--status-error-text);
	text-decoration: line-through;
}

/* CTA */
.cms-product-grid__card-cta {
	margin-top: auto;
	padding-top: 10px;
}

/* Product button - gold style (--btn-gold-* pair) */
.cms-product-grid__button {
	display: inline-block;
	box-sizing: border-box;
	padding: 8px 18px;
	background-color: var(--btn-gold-bg);
	border: 1px solid var(--btn-gold-bg);
	color: var(--btn-gold-text);
	font-family: var(--font-primary);
	font-size: var(--font-size-14);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	-webkit-transition: background-color 0.2s ease, color 0.2s ease;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cms-product-grid__button:hover,
.cms-product-grid__button:focus {
	background-color: var(--btn-gold-hover-bg);
	border-color: var(--btn-gold-hover-bg);
	color: var(--btn-gold-hover-text);
	text-decoration: none;
}

/* Link card "Browse" - standalone text link using the site link tokens */
.cms-product-grid__button--link {
	padding: 0;
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid currentColor;
	color: var(--link-color);
	text-transform: none;
	letter-spacing: normal;
}

.cms-product-grid__button--link:hover,
.cms-product-grid__button--link:focus {
	background-color: transparent;
	border-color: currentColor;
	color: var(--link-hover);
}

/* Keyboard focus */
.cms-product-grid a:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 979px) {
	.cms-product-grid--cols-4 .cms-product-grid__card {
		width: calc(50% - 20px);
	}
}

@media (max-width: 767px) {
	.cms-product-grid--cols-3 .cms-product-grid__card,
	.cms-product-grid--cols-4 .cms-product-grid__card {
		width: calc(50% - 20px);
	}

	.cms-product-grid__heading--xl {
		font-size: var(--font-size-30);
	}

	.cms-product-grid__heading--large {
		font-size: var(--font-size-20);
	}

	.cms-product-grid__heading--medium {
		font-size: var(--font-heading-size-sm);
	}

	/* 44px tap targets on mobile */
	.cms-product-grid__button:not(.cms-product-grid__button--link) {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		min-height: 44px;
	}

	.cms-product-grid__button--link {
		display: inline-block;
		padding: 12px 0 2px;
	}
}

@media (max-width: 479px) {
	.cms-product-grid--cols-3 .cms-product-grid__card,
	.cms-product-grid--cols-4 .cms-product-grid__card {
		width: calc(100% - 20px);
	}

	.cms-product-grid__card-image:not(.cms-product-grid__card-image--natural):not(.cms-product-grid__card-image--square):not(.cms-product-grid__card-image--landscape):not(.cms-product-grid__card-image--portrait) img,
	.cms-product-grid__card-image-placeholder {
		height: 200px;
	}
}