/* ============================================================
   Single Product (dsc_product) page styles.

   Redesigned Aug 2026: the previous version rendered the image at up to
   half the viewport width with object-fit: cover, which stretched/blurred
   Benjamin Moore's small (~197x193) API images badly. This version uses a
   fixed-width padded "image card" with object-fit: contain -- letterboxed,
   never cropped or stretched beyond its source resolution -- so it looks
   right whether the source is a small API thumbnail or a large uploaded
   photo. The same containment treatment is applied to the "You Might Also
   Like" cards, which had the same oversized/cover-cropped problem.
   ============================================================ */

/* Flexbox, not CSS Grid -- three rounds of grid-track fixes (minmax(0,1fr),
   explicit width/min-width on the media column, dropping position: sticky)
   each shrank the overlap but never fully closed it on Safari, which means
   the bug wasn't in any single property, it's WebKit's track-sizing math
   itself for this "fixed column beside a fluid column" shape. Flexbox's
   flex-basis sizing is a much more heavily-battle-tested cross-browser
   pattern for exactly this layout, so this sidesteps the whole class of
   bug rather than patching it again. */
.dsc-single-product__wrap {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dsc-space-xl);
	padding-block: var(--dsc-space-xl);
}
@media (min-width: 900px) {
	.dsc-single-product__wrap {
		flex-wrap: nowrap;
		align-items: flex-start;
	}
	.dsc-single-product__media {
		flex: 0 0 340px;
		width: 340px;
		max-width: 340px;
	}
	.dsc-single-product__info {
		flex: 1 1 0%;
		min-width: 0;
	}
}

/* ---- Media column: fixed-size image card, not a full-bleed hero ----
   Confirmed (by disabling it directly in Safari's inspector) that THIS
   rule -- media being its own flex container -- was the actual bug, not
   the outer row layout. It currently only wraps a single child (the
   image card), so there's nothing here that needs flex arrangement;
   plain block flow stacks children the same way. If a second child is
   ever added under the image (caption, alt swatch, etc.), give it
   margin-top: var(--dsc-space-md) rather than reintroducing flex/gap
   here. */
.dsc-single-product__media {
	display: block;
}

/* ============================================================
   Available Sheens -- moved out of the narrow 340px sticky media column
   (where 3+ swatches had almost no room to breathe) into its own
   full-width section below the image/info row. Same card language as the
   rest of the page (border, radius, white/cream surfaces), just given the
   space to be a real "pick your finish" moment instead of a squeezed
   row of icons.
   ============================================================ */
.dsc-single-product__sheens {
	padding-block: var(--dsc-space-xl);
	border-top: 1px solid var(--dsc-border);
}
.dsc-single-product__sheens h2 {
	font-size: 1.1rem;
	margin: 0 0 var(--dsc-space-md);
}
.dsc-single-product__swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--dsc-space-md);
}
@media (min-width: 700px) {
	.dsc-single-product__swatches {
		grid-template-columns: repeat(auto-fill, minmax(150px, 200px));
	}
}
.dsc-single-product__swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dsc-space-sm);
	padding: var(--dsc-space-lg) var(--dsc-space-md);
	border: 1px solid var(--dsc-border);
	border-radius: var(--dsc-radius);
	background: var(--dsc-white, #fff);
	cursor: pointer;
	font-family: inherit;
	transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
}
.dsc-single-product__swatch img {
	width: 72px;
	height: 72px;
	object-fit: contain;
}
.dsc-single-product__swatch-placeholder {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--dsc-border);
}
.dsc-single-product__swatch span:last-child {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--dsc-text-muted);
	text-align: center;
	line-height: 1.35;
}
.dsc-single-product__swatch:hover {
	border-color: var(--dsc-primary, var(--dsc-navy));
}
.dsc-single-product__swatch.is-active {
	border: 2px solid var(--dsc-primary, var(--dsc-navy));
	background: var(--dsc-surface-alt, #f5f2ea);
	padding: calc(var(--dsc-space-lg) - 1px) calc(var(--dsc-space-md) - 1px);
	box-shadow: var(--dsc-shadow, 0 2px 8px rgba(0,0,0,0.06));
}
.dsc-single-product__swatch.is-active span:last-child {
	color: var(--dsc-ink);
}

.dsc-single-product__image-card {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dsc-surface-alt, #f5f2ea);
	border: 1px solid var(--dsc-border);
	border-radius: var(--dsc-radius);
	padding: var(--dsc-space-xl) var(--dsc-space-lg);
	aspect-ratio: 1 / 1;
}

.dsc-single-product__main-image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 320px;
	max-height: 320px;
	object-fit: contain;
	/* Never stretched past its own source resolution -- the padded card
	   around it is what fills the column, not the image itself. This is
	   what fixes both the blur on small API thumbnails and the oversized
	   look on larger uploaded photography. */
}
.dsc-single-product__main-image--placeholder {
	width: 60%;
	height: 60%;
	background: var(--dsc-border);
	border-radius: var(--dsc-radius-sm, 6px);
}

/* ---- Info column: short and scannable, not a wall of text ---- */
.dsc-single-product__brand {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--dsc-text-muted);
	margin-bottom: var(--dsc-space-xs);
}
.dsc-single-product__title {
	margin: 0 0 0.6rem;
}
.dsc-single-product__title sup{
    font-size: var(--dsc-fs-xl);
}
.dsc-single-product__sheen-pill {
	display: inline-block;
	font-size: var(--dsc-fs-sm, 0.8rem);
	font-weight: 700;
	color: var(--dsc-primary, var(--dsc-navy));
	background: var(--dsc-cream, var(--dsc-surface-alt, #f5f2ea));
	border-radius: 999px;
	padding: 0.3rem 0.85rem;
	margin: 0 0 var(--dsc-space-md);
}
.dsc-single-product__summary,
.dsc-single-product__description {
	color: var(--dsc-text-muted);
	line-height: 1.6;
	margin: 0 0 var(--dsc-space-md);
}
.dsc-single-product__price {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--dsc-ink);
	margin: 0 0 var(--dsc-space-md);
}
.dsc-single-product__ctas {
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: var(--dsc-space-sm);
	margin-top: var(--dsc-space-sm);
}

/* ============================================================
   Full-width "Product Information" section -- only rendered for synced
   Benjamin Moore products (which have a separate short_description ACF
   field, freeing this space up for the longer Details/Features/Resources
   content instead of cramming it into the narrow info column above).
   Manually-added products keep the simpler original behavior of showing
   the_content() directly in the info column.
   ============================================================ */
.dsc-single-product__long-content {
	padding-block: var(--dsc-space-xl);
	border-top: 1px solid var(--dsc-border);
}
.dsc-single-product__long-content-inner {
	display: flex;
	flex-direction: column;
	gap: var(--dsc-space-lg);
}
.dsc-single-product__long-content-inner > p {
	color: var(--dsc-text-muted);
	line-height: 1.6;
	margin: 0;
}

/* Per-sheen panels (Aug 2026 "Sheen / finish" rebuild) -- one
   .dsc-product-panel per sheen, only one visible at a time (toggled by
   assets/js/single-product-swatches.js). Same outer rhythm as the old
   .dsc-single-product__long-content/-inner it replaces, so switching
   sheens doesn't shift the page's overall layout. */
.dsc-single-product__panels {
	padding-block: var(--dsc-space-xl);
	border-top: 1px solid var(--dsc-border);
}
.dsc-product-panel {
	display: flex;
	flex-direction: column;
	gap: var(--dsc-space-lg);
}
/* Without this, the browser's own default "[hidden]{display:none}" rule
   loses the cascade to the class rule right above it (same specificity,
   author stylesheet wins) -- every sheen's panel stayed visible and
   stacked at once regardless of the JS hidden toggle, which is why
   switching sheens looked like it did nothing. */
.dsc-product-panel[hidden] {
	display: none;
}

/* Shared "panel" look for every content block below (Details + Features,
   Documents & Resources) so the page reads as a set of designed sections
   instead of a plain WYSIWYG text dump directly on the page background --
   the same card language already used for the main product image
   (.dsc-single-product__image-card). */
.dsc-bm-columns,
.dsc-bm-datasheets {
	background: var(--dsc-white, #fff);
	border: 1px solid var(--dsc-border);
	border-radius: var(--dsc-radius);
	padding: var(--dsc-space-lg);
}

/* Section heading: sits inside the panel as a card header, separated from
   the content below it by its own rule rather than just larger top margin. */
.dsc-single-product__long-content-inner h2,
.dsc-product-panel h2 {
	font-size: 1.1rem;
	margin: 0 0 var(--dsc-space-md);
	padding-bottom: var(--dsc-space-sm);
	border-bottom: 1px solid var(--dsc-border);
}

/* Product Details + Features, side by side on desktop, each its own column
   inside the shared panel (a vertical divider keeps them from reading as
   one merged list). Single column below 900px -- two ~440px-wide columns
   don't leave enough room for comfortable line lengths on tablet/mobile. */
.dsc-bm-columns {
	display: grid;
	gap: var(--dsc-space-xl);
}
@media (min-width: 900px) {
	.dsc-bm-columns {
		grid-template-columns: 1fr 1fr;
	}
	.dsc-bm-columns__col:first-child {
		padding-right: var(--dsc-space-xl);
		border-right: 1px solid var(--dsc-border);
	}
}

/* Bullet lists -- scoped to just the Details/Features columns (not every
   <ul> in the long-content area) so this can't end up in a specificity
   fight with the Documents & Resources chip list below, which needs a very
   different (horizontal, no-bullet) layout. */
.dsc-bm-columns__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.dsc-bm-columns__col li {
	position: relative;
	padding-left: 1.1rem;
	color: var(--dsc-text-muted);
	line-height: 1.5;
}
.dsc-bm-columns__col li::marker {
	content: "";
}
.dsc-bm-columns__col li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--dsc-primary, var(--dsc-navy));
}
/* Links that appear inline within a Details/Features bullet (a how-to
   guide, a related landing page, etc.) stay plain inline links -- same
   weight as the surrounding text, just colored -- rather than being
   pulled out into a button. A button-shaped link in the middle of a
   sentence read as a layout bug, not a feature. */
.dsc-bm-columns__col li a {
	color: var(--dsc-primary, var(--dsc-navy));
	text-decoration: underline;
	text-decoration-color: var(--dsc-border);
	text-underline-offset: 2px;
}
.dsc-bm-columns__col li a:hover {
	text-decoration-color: currentColor;
}

/* ============================================================
   Documents & Resources (SDS / TDS / brochures). Each group (SDS, TDS...)
   gets its own small sub-heading, with its links laid out as a tidy grid of
   chips rather than a single long vertical list -- easier to scan when a
   product has a dozen-plus regional/language SDS variants like this one.
   ============================================================ */
.dsc-bm-datasheets__group + .dsc-bm-datasheets__group {
	margin-top: var(--dsc-space-lg);
}
.dsc-bm-datasheets__group h3 {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--dsc-text-muted);
	margin: 0 0 var(--dsc-space-sm);
}
.dsc-bm-datasheets__list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 0.6rem;
	margin: 0;
	padding: 0;
}
.dsc-bm-datasheets__list li {
	margin: 0;
}
.dsc-bm-datasheets__list a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--dsc-surface-alt, #f5f2ea);
	border: 1px solid var(--dsc-border);
	border-radius: var(--dsc-radius-sm, 6px);
	padding: 0.55rem 0.75rem;
	text-decoration: none;
	color: var(--dsc-ink);
	font-size: var(--dsc-fs-sm, 0.85rem);
	font-weight: 600;
	line-height: 1.3;
}
.dsc-bm-datasheets__list a:hover {
	border-color: var(--dsc-primary, var(--dsc-navy));
	background: var(--dsc-white, #fff);
}
.dsc-bm-datasheets__list a::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background-color: var(--dsc-primary, var(--dsc-navy));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6H6zm7 1.5L18.5 9H13V3.5zM8 13h2.5a1.75 1.75 0 1 1 0 3.5H9v2H8v-5.5zm1 1v1.5h1.5a.75.75 0 0 0 0-1.5H9zm4.5-1H15a2 2 0 0 1 2 2v1.5a2 2 0 0 1-2 2h-1.5V13zm1 1v3H15a1 1 0 0 0 1-1V15a1 1 0 0 0-1-1h-.5zM18 13h3v1h-2v1.25h1.75v1H19V18.5h-1V13z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6H6zm7 1.5L18.5 9H13V3.5zM8 13h2.5a1.75 1.75 0 1 1 0 3.5H9v2H8v-5.5zm1 1v1.5h1.5a.75.75 0 0 0 0-1.5H9zm4.5-1H15a2 2 0 0 1 2 2v1.5a2 2 0 0 1-2 2h-1.5V13zm1 1v3H15a1 1 0 0 0 1-1V15a1 1 0 0 0-1-1h-.5zM18 13h3v1h-2v1.25h1.75v1H19V18.5h-1V13z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ============================================================
   Specifications -- same card-panel treatment as Details/Features/
   Documents above, so it reads as another section in a consistent set
   rather than a plain table dropped on the page.
   ============================================================ */
.dsc-single-product__specs {
	padding-block: var(--dsc-space-xl);
	border-top: 1px solid var(--dsc-border);
}
.dsc-single-product__specs-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--dsc-space-md);
	background: var(--dsc-white, #fff);
	border: 1px solid var(--dsc-border);
	border-radius: var(--dsc-radius);
	overflow: hidden;
}
.dsc-single-product__specs-table tr:not(:last-child) {
	border-bottom: 1px solid var(--dsc-border);
}
.dsc-single-product__specs-table tr:nth-child(even) {
	background: var(--dsc-surface-alt, #f5f2ea);
}
.dsc-single-product__specs-table td {
	padding: 0.75rem var(--dsc-space-md);
	vertical-align: top;
}
.dsc-single-product__specs-table td:first-child {
	width: 40%;
	font-weight: 700;
	color: var(--dsc-ink);
}
.dsc-single-product__specs-table td:last-child {
	color: var(--dsc-text-muted);
}

/* ============================================================
   You Might Also Like -- same containment treatment as the Shop grid
   cards (.dsc-shop-card), so an image never gets cropped/stretched beyond
   its own resolution here either.
   ============================================================ */
.dsc-single-product__related {
	padding-block: var(--dsc-space-xl);
	border-top: 1px solid var(--dsc-border);
}
.dsc-single-product__related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--dsc-space-lg);
	margin-top: var(--dsc-space-md);
}
.dsc-related-product {
	display: flex;
	flex-direction: column;
	background: var(--dsc-white, #fff);
	border: 1px solid var(--dsc-border);
	border-radius: var(--dsc-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s, transform 0.2s;
}
.dsc-related-product:hover {
	box-shadow: var(--dsc-shadow-hover, 0 8px 20px rgba(0,0,0,0.08));
	transform: translateY(-2px);
}
.dsc-related-product__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--dsc-surface-alt, #f5f2ea);
}
.dsc-related-product__media img,
.dsc-related-product__placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--dsc-space-sm);
	box-sizing: border-box;
}
.dsc-related-product__placeholder {
	background: var(--dsc-border);
	padding: 0;
}
.dsc-related-product__body {
	padding: var(--dsc-space-sm) var(--dsc-space-md) var(--dsc-space-md);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.dsc-related-product__brand {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--dsc-text-muted);
}
.dsc-related-product__title {
	font-weight: 700;
	color: var(--dsc-ink);
}
.dsc-related-product:hover .dsc-related-product__title {
	color: var(--dsc-navy);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 767px) {
	.dsc-single-product__wrap {
    gap: var(--dsc-space-md);
    padding-block: var(--dsc-space-md);
}   

.dsc-single-product__sheens {
    padding-block: var(--dsc-space-md);
}

.dsc-single-product__panels {
    padding-block: var(--dsc-space-md);
}

.dsc-bm-columns, .dsc-bm-datasheets {
    gap: var(--dsc-space-lg);
    padding: var(--dsc-space-md);
}

.dsc-single-product__related-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--dsc-space-md);
}

.dsc-single-product__media {
    width: 100%;
}

    .dsc-single-product__image-card {
        padding: var(--dsc-space-lg) var(--dsc-space-md);
        width: auto;
        aspect-ratio: auto;
    }
    
    .dsc-single-product__main-image {
    width: auto;
}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 640px) {
	.dsc-single-product__ctas .dsc-btn { width: 100%; text-align: center; }
}