/* Sticky section chips under the product breadcrumb. */

body.single-product {
	--ds-pdp-tabs-offset: 0px;
	--ds-pdp-tabs-bar: 46px;
}

/* Under 768px style.css sets overflow-x:hidden on html/body. That scroll
   container stops position:sticky once the product page overflows sideways.
   clip still cuts horizontal overflow and lets the tab bar stick. Wider
   viewports keep their previous overflow behaviour, bar is hidden there. */
@media screen and (max-width: 768px) {
	html:has(body.single-product),
	body.single-product {
		overflow-x: clip !important;
	}
}

body.single-product.admin-bar {
	--ds-pdp-tabs-offset: 32px;
}

@media screen and (max-width: 782px) {
	body.single-product.admin-bar {
		--ds-pdp-tabs-offset: 46px;
	}
}

.ds-pdp-tabs {
	position: sticky;
	top: var(--ds-pdp-tabs-offset);
	z-index: 40;
	background: #fff;
}

@media screen and (min-width: 769px) {
	body.single-product {
		--ds-pdp-tabs-bar: 0px;
	}

	.ds-pdp-tabs {
		display: none;
	}
}

.ds-pdp-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: var(--ds-container-width, 1230px);
	margin: 0 auto;
	padding: 0 15px 12px;
	list-style: none;
}

.ds-pdp-tabs__item {
	margin: 0;
}

.ds-pdp-tabs__link {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 4px 10px;
	border: 1px solid #d0d5dd;
	border-radius: 4px;
	background: #fff;
	color: #3a3a3a;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.ds-pdp-tabs__link:hover,
.ds-pdp-tabs__link:focus-visible {
	border-color: #98a2b3;
	color: #171717;
}

.ds-pdp-tabs__link:focus-visible {
	outline: 2px solid #171717;
	outline-offset: 2px;
}

.ds-pdp-tabs__link.is-active {
	border-color: #8d939c;
	color: #171717;
	font-weight: 600;
}

.ds-pdp-tabs__link.is-disabled {
	border-color: #e6e8ec;
	background: #f7f8fa;
	color: #b0b6c0;
	pointer-events: none;
	cursor: default;
}

#ds-pdp-gallery,
#ds-pdp-expert,
#ds-pdp-description,
#ds-pdp-customer-reviews,
#ds-pdp-comparison,
#ds-pdp-applications,
#ds-pdp-buying-tips,
#ds-pdp-bought-together,
#ds-pdp-similar,
#reviews {
	scroll-margin-top: calc(var(--ds-pdp-tabs-offset) + var(--ds-pdp-tabs-bar));
}

@media screen and (max-width: 768px) {
	.ds-pdp-tabs__list {
		flex-wrap: nowrap;
		gap: 6px;
		padding: 0 16px 10px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.ds-pdp-tabs__list::-webkit-scrollbar {
		display: none;
	}

	.ds-pdp-tabs__link {
		font-size: 12px;
	}

	.ds-pdp-tabs__item:has(.is-disabled) {
		display: none;
	}

	.ds-pdp-tabs:not(:has(.ds-pdp-tabs__link:not(.is-disabled))) {
		display: none;
	}
}
