/* ==========================================================================
   MMX / PRODUCT DETAILS
   ========================================================================== */

:host {
	--mmx-form__size: var(--sl-product-details__size);
	--sl-product-details__size: 1rem;

	display: block;
}

/* Details Layout
   =========================================== */
[part~="details"],
[part~="detail-content"] {
	display: flex;
	flex-direction: column;
	gap: var(--sl-product-details__size);
}

[part~="detail"] {
	flex-basis: 100%;
	flex-grow: 1;
	min-width: 0;
}

/* Layout Groups
   =========================================== */
[part~="detail-content__side-by-side-group"] {
	flex-direction: row;
}

[part~="detail-content__inline-group"] {
	align-items: baseline;
	display: inline-flex;
	flex-direction: row;
}

[part~="detail-content__inline-group"] > [part~="detail"] {
	flex-basis: auto;
}

/* Detail Styles
   =========================================== */
.sl-product-details mmx-text {
	--mmx-text-margin-bottom: 0;
}

.sl-product-details mmx-button {
	margin-top: unset;
}

[part~="empty"] {
	display: none;
}

[part~="price"] > div {
	margin-bottom: 0;
}

[part~="price-retail"],
[part~="price-base"]{
	--mmx-text__text-decoration: line-through;
}

[part~="discounts"],
[part~="product-charges__discount"] {
	color: var(--mmx-color-red-001);
	font-weight: var(--mmx-font-weight-medium);
}

[part~="inventory-message"],
[part~="fitment"] {
	--mmx-message__margin-bottom: 0;
	--mmx-text-margin-bottom: 0;
}

[part~="button"] {
	display: block;
	width: 100%;
}

[part~="fragment"] mmx-text::part(text__inner) {
	display: block;
}

[part~="add-to-cart-message"] {
	display: block;
	margin-top: var(--sl-product-details__size);
}

[part~="attributes-product-machine"]::part(image-slider),
[part~="attributes-product-machine"]::part(product-name),
[part~="attributes-product-machine"]::part(pricing-discounts),
[part~="attributes-product-machine"]::part(inventory-message),
[part~="attributes-product-machine"]::part(product-description) {
	display: none;
}

[part~="attributes-product-machine"]::part(product-content),
[part~="attributes-product-machine"]::part(product-attributes),
[part~="attributes-product-machine"]::part(product-attribute) {
	margin: 0;
}

[part~="attributes-product-machine"]::part(product-attributes) {
	display: flex;
	flex-direction: column;
	gap: var(--sl-product-details__size);
}

[part~="volume-pricing-table-table"] {
	width: 100%;
}

[part~="volume-pricing-table-th"] {
	font-weight: var(--mmx-font-weight-bold);
}

[part~="volume-pricing-table-th"],
[part~="volume-pricing-table-td"] {
	border-bottom: 1px solid var(--mmx-color-grey-03);
	padding: calc(var(--sl-product-details__size) * 0.5) 0;
	text-align: left;
	width: 50%;
}

.has-read-more {
	max-height: auto;
	overflow-y: hidden;
	position: relative;
}

.has-read-more::after {
	background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
	bottom: 0;
	content: '';
	height: var(--sl-product-details__size);
	position: absolute;
	width: 100%;
}


/* Product Charges
   =========================================== */
[part~="product-charges__amount-total"] {
	font-weight: bold;
}

[part~="product-charges__amount-original"] {
	color: var(--mmx-color-grey-05);
}

[part~="product-charges__group"],
[part~="product-charges__list"] {
	color: var(--mmx-color-grey-06);
	display: grid;
	gap: 0 0.5rem;
	grid-template-columns: repeat(2, auto);
}

[part~="product-charges__group--narrow"] {
	grid-template-columns: minmax(0, max-content) max-content;
}

[part~="product-charges__group"] > [part~="product-charges__list"] {
	display: contents;
}

[part~="product-charges__charge"] {
	display: contents;
}

[part~="product-charges__subtotal"]::before {
	border-top: 1px solid var(--mmx-color-grey-03);
	content: " ";
	grid-column: span 2;
	margin: 0.5rem 0;
}

[part~="product-charges__name"] {
	text-align: left;
}

[part~="product-charges__amount"] {
	text-align: right;
}

/* Subscription Options (Feature: Subscription Options detail type) */
.sl-product-details__subscription-options-select {
	width: 100%;
	max-width: 420px;
	padding: 10px 12px;
	font-size: 15px;
	border: 1px solid var(--mmx-color-grey-03);
	border-radius: 4px;
	background-color: #ffffff;
	color: inherit;
}

.sl-product-details__subscription-options-cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Term cards wrapper (mmx-text) shrink-wraps its content by default, which
   left-aligns the pills when they don't fill the row. Force it full width and
   centered so justify-content: center below actually has room to work. */
[part~="subscription-options"] {
	display: block;
	width: 100%;
	text-align: center;
}

.sl-product-details__subscription-options-cards[data-style="cards"] {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
}

.sl-product-details__subscription-options-card[data-style="cards"] {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px 30px;
	font-size: 13px;
	font-weight: bold;
	font-family: var(--mmx-font-family-1);
	min-height: var(--mmx-min-target-size);
	border-width: 1px;
	border-style: solid;
	border-radius: 25px;
	border-color: #007DB9;
	background: #ffffff;
	color: #007DB9;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* One-Time Purchase now renders as its own standalone control above the
   Container Styles box (see #renderSubscriptionOptions), not inside the
   cards grid, so it needs its own full-width treatment -- its button/radio
   look still comes from the shared [data-style] rules above/below, keyed
   off the same display style as the real terms. */
.sl-product-details__subscription-options-one-time {
	display: flex;
	width: 100%;
	margin-bottom: 10px;
}

/* One-Time Purchase with a Page Builder button theme applied. Colors,
   border, font, padding and hover all come from the theme class; these rules
   only handle layout, the hidden radio, focus, and the selected checkmark. */
.sl-product-details__subscription-options-one-time--themed {
	position: relative;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	cursor: pointer;
	text-align: center;
}

.sl-product-details__subscription-options-one-time--themed input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sl-product-details__subscription-options-one-time--themed:has(input[type="radio"]:focus-visible) {
	outline: var(--mmx-button-outline--focus, 2px solid #2A8A68);
	outline-offset: 2px;
}

.sl-product-details__subscription-options-one-time-check {
	display: none;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.sl-product-details__subscription-options-one-time--themed:has(input[type="radio"]:checked) .sl-product-details__subscription-options-one-time-check {
	display: inline-block;
}

.sl-product-details__subscription-options-card[data-style="cards"]:hover {
	background: #007DB9;
	border-color: #007DB9;
	color: #ffffff;
}

.sl-product-details__subscription-options-card[data-style="cards"] input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* Selected state mirrors the Secondary button's own hover/active look
   (filled), so a chosen card reads as "pressed" rather than just outlined. */
.sl-product-details__subscription-options-card[data-style="cards"]:has(input[type="radio"]:checked) {
	background: #007DB9;
	border-color: #007DB9;
	color: #ffffff;
}

.sl-product-details__subscription-options-card[data-style="cards"] input[type="radio"]:focus-visible ~ [part~="subscription-options-card-text"] {
	outline: var(--mmx-button-outline--focus, 2px solid #1a73e8);
	outline-offset: 2px;
}

.sl-product-details__subscription-options-card[data-style="radio"] {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.sl-product-details__subscription-options-card[data-style="radio"] input[type="radio"] {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.sl-product-details__subscription-options-card[data-style="radio"] input[type="radio"]:focus-visible {
	outline: var(--mmx-button-outline--focus, 2px solid #1a73e8);
	outline-offset: 2px;
}

.sl-product-details__subscription-options-header,
.sl-product-details__subscription-options-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	margin-bottom: 10px;
}

.sl-product-details__subscription-options-footer {
	margin-bottom: 0;
	margin-top: 10px;
}

/* A bit more breathing room between the header text and the term pills. */
.sl-product-details__subscription-options-header {
	margin-bottom: 18px;
}

.sl-product-details__subscription-options-header-image,
.sl-product-details__subscription-options-footer-image {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}