/* ==========================================================================
   Single Product — sp__
   Herbalissa Design System: Editorial Artisanship
   ========================================================================== */

/* ── Breadcrumb ── */
.sp__breadcrumb {
	padding: var(--space-16) 0 0;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.sp__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	list-style: none;
	padding: 0;
	margin: 0;
}
.sp__breadcrumb-list li {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-family: var(--font-body);
	font-size: var(--text-label-sm);
	line-height: var(--text-label-sm-lh);
	letter-spacing: var(--text-label-sm-tracking);
	font-weight: var(--text-label-sm-weight);
	text-transform: uppercase;
}
.sp__breadcrumb-list li:not(:last-child)::after {
	content: "›";
	color: var(--color-outline);
	opacity: .5;
}
.sp__breadcrumb-list a {
	color: var(--color-on-surface-variant);
	text-decoration: none;
	transition: color var(--duration-normal) var(--ease-default);
}
.sp__breadcrumb-list a:hover {
	color: var(--color-primary);
}
.sp__breadcrumb-list li[aria-current="page"] {
	color: var(--color-on-surface);
}

/* ── Hero section ── */
.sp__hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-12);
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-8) var(--gutter) var(--space-16);
	align-items: start;
}

/* ── Gallery (sticky) ── */
.sp__gallery {
	position: sticky;
	top: calc(var(--space-20) + var(--space-4));
}
.sp__gallery-main {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-surface-container);
	aspect-ratio: 1 / 1.15;
}
.sp__gallery-main img,
.sp__gallery-main .woocommerce-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity var(--duration-slow) var(--ease-default);
}
.sp__gallery-img {
	position: absolute;
	inset: 0;
	opacity: 0;
}
.sp__gallery-img--active {
	position: relative;
	opacity: 1;
}
.sp__badge {
	position: absolute;
	top: var(--space-4);
	left: var(--space-4);
	z-index: 2;
}
.sp__gallery-thumbs {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-4);
}
.sp__gallery-thumb {
	flex: 0 0 auto;
	width: clamp(80px, 12vw, 140px);
	aspect-ratio: 1;
	border-radius: var(--radius-md);
	overflow: hidden;
	cursor: pointer;
	background: var(--color-surface-container);
	opacity: .6;
	transition: opacity var(--duration-normal) var(--ease-default);
	border: none;
	padding: 0;
}
.sp__gallery-thumb:hover,
.sp__gallery-thumb--active {
	opacity: 1;
}
.sp__gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Product info (right side) ── */
.sp__info {
	padding-top: var(--space-4);
}
.sp__title {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 600;
	font-size: var(--text-display-md);
	line-height: var(--text-display-md-lh);
	letter-spacing: var(--text-display-md-tracking);
	color: var(--color-on-surface);
	margin-bottom: var(--space-3);
}
.sp__desc {
	font-size: var(--text-body-lg);
	line-height: var(--text-body-md-lh);
	color: var(--color-on-surface-variant);
	margin-bottom: var(--space-6);
	max-width: 48ch;
}
.sp__price {
	font-family: var(--font-body);
	font-size: var(--text-title-lg);
	line-height: var(--text-title-lg-lh);
	font-weight: 600;
	margin-bottom: var(--space-8);
	color: var(--color-on-surface);
}
.sp__price del {
	color: var(--color-outline);
	font-weight: 400;
	font-size: .65em;
	margin-left: var(--space-2);
	text-decoration: line-through;
}
.sp__price ins {
	text-decoration: none;
}

/* ── Ingredients box ── */
.sp__ingredients {
	background: var(--color-surface-container);
	border-radius: var(--radius-lg);
	padding: var(--space-5) var(--space-6);
	margin-bottom: var(--space-6);
}
.sp__ingredients-title {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: var(--text-label-md-tracking);
	font-family: var(--font-body);
	font-size: var(--text-label-lg);
	font-weight: var(--text-label-md-weight);
	color: var(--color-on-surface);
	margin-bottom: var(--space-4);
}
.sp__ingredients-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
	list-style: none;
	padding: 0;
	margin: 0;
}
.sp__ingredient {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.sp__ingredient-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	color: var(--color-primary);
	opacity: .7;
}
.sp__ingredient-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.sp__ingredient-name {
	font-size: var(--text-body-sm);
	line-height: var(--text-body-sm-lh);
	color: var(--color-on-surface-variant);
}

/* ── Actions ── */
.sp__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}
.sp__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--text-body-md);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	border: none;
	white-space: nowrap;
	transition:
		background-color var(--duration-normal) var(--ease-default),
		color var(--duration-normal) var(--ease-default),
		transform var(--duration-fast) var(--ease-default),
		filter var(--duration-normal) var(--ease-default);
}
.sp__btn:active {
	transform: scale(0.98);
}
.sp__btn--primary {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-container));
	color: var(--color-on-primary);
}
.sp__btn--primary:hover {
	background: linear-gradient(135deg, var(--color-primary-container), var(--color-primary));
}
.sp__btn--secondary {
	background-color: var(--color-surface-container-highest);
	color: var(--color-primary);
}
.sp__btn--secondary:hover {
	background-color: var(--color-surface-container-high);
}
.sp__btn--loading {
	opacity: .7;
	pointer-events: none;
}
.sp__out-of-stock {
	font-size: var(--text-body-md);
	color: var(--color-error);
	font-weight: 600;
}

/* ── Trust badges ── */
.sp__trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-6);
	list-style: none;
	padding: 0;
	margin: 0;
}
.sp__trust-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-body-sm);
	line-height: var(--text-body-sm-lh);
	color: var(--color-on-surface-variant);
}
.sp__trust-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	display: grid;
	place-items: center;
	color: var(--color-primary);
	opacity: .6;
}

/* ==========================================================================
   Ritual Section — Rounded contained box (not full-bleed)
   ========================================================================== */
.sp__ritual {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.sp__ritual-box {
	background-color: var(--color-surface-container-low);
	border-radius: var(--radius-xl);
	padding: var(--space-16) var(--space-12);
	overflow: visible;
}
.sp__ritual-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-12);
	align-items: center;
}
.sp__ritual-label {
	display: block;
	font-family: var(--font-body);
	font-size: var(--text-label-sm);
	line-height: var(--text-label-sm-lh);
	letter-spacing: var(--text-label-sm-tracking);
	font-weight: var(--text-label-sm-weight);
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
	margin-bottom: var(--space-3);
}
.sp__ritual-headline {
	font-family: var(--font-display);
	font-size: var(--text-display-sm);
	line-height: var(--text-display-sm-lh);
	font-style: italic;
	color: var(--color-on-surface);
	margin-bottom: var(--space-8);
}
.sp__ritual-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
.sp__ritual-step {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
}
.sp__ritual-num {
	flex-shrink: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--text-title-lg);
	color: var(--color-outline);
	opacity: .5;
	line-height: 1.4;
}
.sp__ritual-step-title {
	font-family: var(--font-body);
	font-size: var(--text-title-md);
	font-weight: var(--text-title-sm-weight);
	line-height: var(--text-title-sm-lh);
	color: var(--color-on-surface);
	margin-bottom: var(--space-1);
}
.sp__ritual-step-text {
	font-size: var(--text-body-md);
	line-height: var(--text-body-sm-lh);
	color: var(--color-on-surface-variant);
	max-width: 42ch;
}

/* Ritual visual */
.sp__ritual-visual {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
}
.sp__ritual-image-wrap {
	position: relative;
	width: clamp(260px, 80%, 400px);
	aspect-ratio: 1;
}
.sp__ritual-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-full);
	display: block;
}
.sp__ritual-chips {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.sp__ritual-chip {
	position: absolute;
	pointer-events: auto;
}
.sp__ritual-chip--top-right {
	top: -4%;
	right: 5%;
}
.sp__ritual-chip--bottom-left {
	bottom: 4%;
	left: 5%;
}
.sp__ritual-chip--bottom-center {
	bottom: 4%;
	left: 50%;
	transform: translateX(-50%);
}
.sp__ritual-chip--center-left {
	top: 50%;
	left: -8%;
	transform: translateY(-50%);
}
.sp__ritual-chip--center-right {
	top: 50%;
	right: -8%;
	transform: translateY(-50%);
}
.sp__ritual-cta {
	text-decoration: none;
}

/* ==========================================================================
   Tabs Section
   ========================================================================== */
.sp__tabs-section {
	padding: var(--space-16) 0 var(--space-20);
}
.sp__tabs {
	display: flex;
	gap: var(--space-8);
	margin-bottom: var(--space-8);
	position: relative;
}
.sp__tabs::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--color-outline-variant);
	opacity: .15;
}
.sp__tab {
	padding: var(--space-3) 0;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-on-surface-variant);
	font-family: var(--font-body);
	font-size: var(--text-label-lg);
	line-height: var(--text-label-md-lh);
	letter-spacing: var(--text-label-md-tracking);
	font-weight: var(--text-label-md-weight);
	position: relative;
	transition: color var(--duration-normal) var(--ease-default);
	white-space: nowrap;
}
.sp__tab::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--color-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--duration-slow) var(--ease-default);
	z-index: 1;
}
.sp__tab:hover {
	color: var(--color-on-surface);
}
.sp__tab--active {
	color: var(--color-on-surface);
}
.sp__tab--active::after {
	transform: scaleX(1);
}

/* Panels */
.sp__panel {
	display: none;
	animation: spPanelIn var(--duration-slow) var(--ease-default);
}
.sp__panel--active {
	display: block;
}
@keyframes spPanelIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
.sp__panel-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-10);
	align-items: start;
}
.sp__panel-prose {
	font-size: var(--text-body-lg);
	line-height: 1.7;
	color: var(--color-on-surface-variant);
}
.sp__panel-prose h3,
.sp__panel-prose h4 {
	color: var(--color-on-surface);
	margin-bottom: var(--space-2);
}
.sp__panel-prose p + p {
	margin-top: var(--space-4);
}

/* Features list (checkmarks) */
.sp__features {
	list-style: none;
	padding: 0;
	margin: var(--space-6) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.sp__feature {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-body-md);
	line-height: var(--text-body-sm-lh);
	color: var(--color-on-surface);
}
.sp__feature-icon {
	flex-shrink: 0;
}

/* Nutrition card */
.sp__nutrition-card {
	background: var(--color-surface-container);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}
.sp__nutrition-title {
	font-family: var(--font-body);
	font-size: var(--text-title-sm);
	font-weight: var(--text-title-sm-weight);
	color: var(--color-on-surface);
	margin-bottom: var(--space-5);
}
.sp__nutrition-list {
	margin: 0;
}
.sp__nutrition-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: var(--space-3) 0;
}
.sp__nutrition-row + .sp__nutrition-row {
	background-image: linear-gradient(to right, var(--color-outline-variant), var(--color-outline-variant));
	background-size: 100% 1px;
	background-position: top;
	background-repeat: no-repeat;
}
.sp__nutrition-row dt {
	font-size: var(--text-body-sm);
	color: var(--color-on-surface-variant);
}
.sp__nutrition-row dd {
	margin: 0;
	font-size: var(--text-body-sm);
	color: var(--color-on-surface);
	font-weight: 600;
	text-align: right;
}

/* Reviews */
.sp__reviews {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}
.sp__review {
	padding-bottom: var(--space-8);
	background-image: linear-gradient(to right, var(--color-outline-variant), transparent);
	background-size: 60% 1px;
	background-position: bottom left;
	background-repeat: no-repeat;
}
.sp__review:last-child {
	background-image: none;
	padding-bottom: 0;
}
.sp__review-header {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	margin-bottom: var(--space-2);
}
.sp__review-author {
	font-family: var(--font-body);
	font-size: var(--text-title-sm);
	font-weight: var(--text-title-sm-weight);
	color: var(--color-on-surface);
}
.sp__review-date {
	font-size: var(--text-body-sm);
	color: var(--color-outline);
}
.sp__review-stars {
	display: flex;
	gap: 2px;
	margin-bottom: var(--space-3);
}
.sp__star {
	fill: var(--color-surface-container-highest);
}
.sp__star--filled {
	fill: var(--color-secondary-container);
	stroke: var(--color-on-secondary-container);
	stroke-width: .3;
}
.sp__review-text {
	font-size: var(--text-body-md);
	line-height: var(--text-body-md-lh);
	color: var(--color-on-surface-variant);
	max-width: 60ch;
}

/* ==========================================================================
   Related / Upsell Products
   ========================================================================== */
.sp__related {
	padding: var(--space-16) 0 var(--space-20);
	background-color: var(--color-surface-container-low);
}
.sp__related-label {
	display: block;
	font-family: var(--font-body);
	font-size: var(--text-label-sm);
	line-height: var(--text-label-sm-lh);
	letter-spacing: var(--text-label-sm-tracking);
	font-weight: var(--text-label-sm-weight);
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
	margin-bottom: var(--space-2);
}
.sp__related-headline {
	font-family: var(--font-display);
	font-size: var(--text-display-sm);
	line-height: var(--text-display-sm-lh);
	font-style: italic;
	color: var(--color-on-surface);
	margin-bottom: var(--space-8);
}
.sp__related-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gutter);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.sp__hero { gap: var(--space-8); }
	.sp__ritual-box { padding: var(--space-12) var(--space-8); }
	.sp__ritual-inner { gap: var(--space-8); }
	.sp__related-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
	.sp__hero {
		grid-template-columns: 1fr;
		gap: var(--space-6);
		padding-bottom: var(--space-10);
	}
	.sp__gallery { position: relative; top: auto; }
	.sp__gallery-main { aspect-ratio: 1 / 1; }
	.sp__ritual-box { padding: var(--space-10) var(--space-6); }
	.sp__ritual-inner { grid-template-columns: 1fr; gap: var(--space-8); }
	.sp__ritual-visual { order: -1; }
	.sp__ritual-image-wrap { width: 70%; max-width: 300px; }
	.sp__panel-grid { grid-template-columns: 1fr; gap: var(--space-6); }
	.sp__tabs {
		gap: var(--space-5);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.sp__tabs::-webkit-scrollbar { display: none; }
	.sp__related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.sp__ingredients-list { grid-template-columns: 1fr; }
	.sp__gallery-thumbs { gap: var(--space-2); }
	.sp__gallery-thumb { width: 70px; }
	.sp__related-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}