/**
 * Shanelle Product Summary Component
 */

.product-summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.product-summary__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-1-5);
}

.product-summary__brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
}

.product-summary__brand-value {
	color: var(--color-text-muted);
	font-style: italic;
}

.product-summary__title {
	margin: 0;
	font-family: var(--font-family-heading);
	font-size: clamp(1.5rem, 2.8vw, 2.125rem);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text);
}

.product-summary__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-5);
	margin: 0;
}

.product-summary__meta-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
}

.product-summary__meta-label {
	margin: 0;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
}

.product-summary__meta-value {
	margin: 0;
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
}

.product-summary__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
}

.product-summary__rating .star-rating {
	font-size: var(--font-size-sm);
	color: var(--color-rating);
}

.product-summary__rating .star-rating::before {
	color: var(--color-rating-empty);
}

.product-summary__rating .star-rating span::before {
	color: var(--color-rating);
}

.product-summary__review-link {
	color: var(--color-text-muted);
	text-decoration: none;
	transition: var(--transition-colors);
}

.product-summary__review-link:hover,
.product-summary__review-link:focus-visible {
	color: var(--color-brand-600);
	text-decoration: underline;
}

.product-summary__commerce {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-block: var(--space-3) 0;
	border-block: 0;
	border-top: 0;
}

.product-summary__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2) var(--space-3);
}

.product-summary__price-current {
	margin: 0;
	font-family: var(--font-family-heading);
	font-size: clamp(1.75rem, 1.5rem + 1vw, 2.375rem);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-tight);
	line-height: var(--line-height-tight);
	color: var(--color-text);
}

.product-summary__price--on-sale .product-summary__price-current {
	color: var(--color-brand-700);
}

.product-summary__price-regular {
	margin: 0;
}

.product-summary__price-value--regular {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	text-decoration: line-through;
}

.product-summary__price-savings {
	margin: 0;
}

.product-summary__stock {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}

.product-summary__stock-indicator {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--radius-full);
	background: currentColor;
}

.product-summary__stock--instock {
	color: var(--color-success-text);
}

.product-summary__stock--outofstock {
	color: var(--color-danger-text);
}

.product-summary__stock--onbackorder {
	color: var(--color-warning-text);
}

.product-summary__stock--lowstock {
	color: var(--color-warning-text);
}

.product-summary__description {
	font-size: var(--font-size-base);
	line-height: var(--line-height-loose);
	color: var(--color-text-secondary);
}

/* Keep CMS headings inside the excerpt from looking like a second product title. */
.product-summary__description :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 var(--space-2);
	font-family: var(--font-family-body);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
	letter-spacing: normal;
	color: var(--color-text);
}

.product-summary__description p {
	margin: 0 0 var(--space-3);
}

.product-summary__description ul,
.product-summary__description ol {
	margin: 0 0 var(--space-3);
	padding-left: var(--space-5);
}

.product-summary__description li {
	margin-bottom: var(--space-1);
}

.product-summary__description li::marker {
	color: var(--color-brand-400);
}

.product-summary__description strong {
	color: var(--color-text);
	font-weight: var(--font-weight-semibold);
}

.product-summary__description p:first-child {
	margin-top: 0;
}

.product-summary__description p:last-child {
	margin-bottom: 0;
}

.product-summary__highlights {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.product-summary__highlights-title {
	margin: 0;
	color: var(--color-text);
}

.product-summary__highlights-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-summary__highlights-item {
	position: relative;
	padding-left: var(--space-4);
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
}

.product-summary__highlights-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: var(--radius-full);
	background: var(--color-brand-300);
}

.product-summary__highlights-item--placeholder {
	color: var(--color-text-muted);
	font-style: italic;
}

.product-summary__highlights-item--placeholder::before {
	background: var(--color-neutral-300);
}

@media (min-width: 48rem) {
	.product-summary {
		gap: var(--space-7);
	}

	.product-summary__commerce {
		padding-block: var(--space-6);
	}
}