/* ============================================================
   Single product page
   ============================================================ */

.gs-product-main {
	display: grid;
	grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	gap: var(--gs-grid-gap);
	padding-top: 30px;
	padding-bottom: 60px;
	align-items: start;
}

/* Gallery */
.gs-gallery {
	position: sticky;
	top: calc(var(--gs-announce-h) + var(--gs-header-h) + 10px);
}

.gs-gallery__main {
	border-radius: var(--gs-radius-card);
	overflow: hidden;
	background: #fff;
	position: relative;
	aspect-ratio: 1;
}

.gs-gallery__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.gs-gallery__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.gs-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gs-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 10px;
	margin-top: 12px;
}

.gs-gallery__thumb-btn {
	border-radius: 14px;
	overflow: hidden;
	border: 2px solid transparent;
	background: #fff;
	aspect-ratio: 1;
}

.gs-gallery__thumb-btn.is-active {
	border-color: var(--gs-teal);
}

.gs-gallery__thumb-btn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Carousel arrows flanking the thumb strip. Hidden on desktop, where the
   thumbs are an 8-column grid and nothing overflows. */
.gs-gallery__thumb-nav {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gs-ink);
	cursor: pointer;
	border-radius: 50%;
	-webkit-tap-highlight-color: transparent;
}

.gs-gallery__thumb-nav:hover {
	color: var(--gs-teal);
}

.gs-gallery__thumb-nav[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}

.gs-gallery__thumb-nav .gs-thumb-nav-icon {
	display: block;
	width: 12px;
	height: auto;
}

/* Dawn's .slider-button--prev rotates the caret +90deg, --next -90deg. */
.gs-gallery__thumb-nav--prev .gs-thumb-nav-icon {
	transform: rotate(90deg);
}

.gs-gallery__thumb-nav--next .gs-thumb-nav-icon {
	transform: rotate(-90deg);
}

/* ── Thumb carousel (mobile + tablet) ─────────────────────────────────
   源站不是换行网格，而是 Dawn 的 .thumbnail-list.slider 横滑条，实测
   breakpoint 与尺寸（custom.css 覆盖 Dawn 默认值，1rem=10px）：
     ≤749px   item = calc(19% - 6px)，条宽上限 310px 居中 → 5 个可见
     750–989px item = calc(25% - 8px)，条宽 90% 居中      → 4 个可见
     箭头 data-step="3" → 每点一次走 3 项
   照抄即可让「可见个数 / 缩略图尺寸」与源站一致。≥990px 的桌面保持本
   主题既有的 8 列网格（源站桌面是 90px 一行的滑条，与 8 列网格的
   89px 基本等宽，故桌面观感不受影响）。 */
@media (max-width: 989px) {
	.gs-gallery__thumbs-wrap {
		display: flex;
		align-items: center;
		gap: 2px;
		margin-top: 12px;
	}

	.gs-gallery__thumbs {
		display: flex;
		flex-wrap: nowrap;
		flex: 1 1 auto;
		grid-template-columns: none;
		min-width: 0;
		margin-top: 0;
		padding: 2px 0 4px;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scroll-padding-left: 2px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.gs-gallery__thumbs::-webkit-scrollbar {
		display: none;
	}

	.gs-gallery__thumb-btn {
		flex: 0 0 auto;
		width: calc(19% - 6px);
		scroll-snap-align: start;
	}

	.gs-gallery__thumb-nav {
		display: flex;
		width: 36px;
		height: 36px;
	}
}

/* ≤749px: the whole rail is capped at 310px of thumbs + 2x36px arrows and
   centred — exactly the source's 310px thumbnail strip (5 thumbs visible).
   The strip is flex:1 with no auto margins, so it always fits and never
   overflows the rail (auto margins would keep it at 310px and push the
   arrows out of the container on <390px viewports). */
/* ≤749px: cap the rail at the container width — 310px of strip + arrows
   would need 386px, which is wider than the ~350px column on a 390px phone
   and caused the sideways scroll. The strip is flex:1 min-width:0, so it
   always fits; on a 390px phone it becomes ~274px (≈5.5 thumbs visible). */
@media (max-width: 749px) {
	.gs-gallery__thumbs-wrap {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (min-width: 750px) and (max-width: 989px) {
	.gs-gallery__thumbs-wrap {
		max-width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	.gs-gallery__thumb-btn {
		width: calc(25% - 8px);
	}
}

/* Buy box */
.gs-product-info {
	max-width: 560px;
}

.gs-product-info__title {
	font-family: var(--gs-heading-font);
	font-weight: 400;
	font-size: clamp(38px, 4.4vw, 58px);
	line-height: 1.05;
	color: var(--gs-ink);
	margin-bottom: 6px;
}

.gs-product-info__price {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 18px;
}

.gs-product-info__price del {
	font-weight: 400;
	opacity: 0.55;
	margin-right: 10px;
}

.gs-product-info__price ins {
	text-decoration: none;
}

.gs-product-info__price .gs-badge {
	display: inline-block;
	background: var(--gs-peach);
	color: var(--gs-ink);
	font-size: 12.5px;
	font-weight: 700;
	border-radius: 20px;
	padding: 3px 12px;
	margin-left: 10px;
	vertical-align: middle;
}

/* Size family pills */
.gs-sizes {
	display: flex;
	gap: 12px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.gs-sizes__item {
	display: inline-block;
}

.gs-sizes__circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid rgba(18, 18, 18, 0.4);
	border-radius: var(--gs-radius-btn);
	padding: 9px 24px;
	font-size: 14.5px;
	font-weight: 600;
	transition: all 0.2s ease;
}

.gs-sizes__item:hover .gs-sizes__circle {
	border-color: var(--gs-teal);
	color: var(--gs-teal);
}

.gs-sizes__item.is-selected .gs-sizes__circle {
	background: var(--gs-ink);
	border-color: var(--gs-ink);
	color: #fff;
}

.gs-product-info__rule {
	border: 0;
	border-top: 1px solid rgba(18, 18, 18, 0.9);
	margin: 20px 0;
}

/* Variation form */
.gs-variable-form .gs-swatch-fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 16px;
}

.gs-swatch-legend {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 12px;
	padding: 0;
}

.gs-swatch-legend span {
	font-weight: 400;
	color: rgba(18, 18, 18, 0.7);
}

.gs-swatch-radios {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.gs-swatch-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

label.gs-swatch {
	cursor: pointer;
	border-radius: 50%;
}

label.gs-swatch span {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--swatch--background, #ccc);
	border: 1px solid rgba(18, 18, 18, 0.25);
}

.gs-swatch-radio:checked + label.gs-swatch span {
	box-shadow: 0 0 0 2px var(--gs-cream), 0 0 0 4px var(--gs-teal);
}

.gs-swatch-radio:focus-visible + label.gs-swatch span {
	outline: 2px solid var(--gs-teal);
	outline-offset: 3px;
}

.gs-native-select {
	font-family: var(--gs-body-font);
	font-size: 15px;
	padding: 11px 16px;
	border: 1px solid rgba(18, 18, 18, 0.35);
	border-radius: 14px;
	background: #fff;
	min-width: 220px;
}

.woocommerce-variation {
	font-size: 15px;
	margin-bottom: 14px;
}

.woocommerce-variation .woocommerce-variation-price {
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 8px;
}

.woocommerce-variation .woocommerce-variation-availability {
	font-size: 14px;
	color: rgba(18, 18, 18, 0.7);
}

.single_variation_wrap {
	margin-top: 8px;
}

.gs-btn--block {
	width: 100%;
	padding: 16px 30px;
	font-size: 16px;
}

.single_add_to_cart_button {
	background: var(--gs-teal);
	border: 0;
}

.single_add_to_cart_button:hover {
	background: var(--gs-teal-dark);
	transform: none;
	opacity: 0.94;
}

.single_add_to_cart_button.disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* Stock + shipping lines */
.gs-product-info__stock {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.03em;
	margin: 16px 0 10px;
}

.gs-product-info__stock span {
	font-weight: 500;
	color: rgba(18, 18, 18, 0.75);
}

.gs-product-info__rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.gs-product-info__rating svg {
	height: 20px;
	width: auto;
}

.gs-product-info__rating span {
	font-size: 13.5px;
	color: rgba(18, 18, 18, 0.75);
}

.gs-product-info__freeship {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--gs-teal);
	margin-bottom: 18px;
}

/* Featured review box */
.gs-product-info__review {
	background: rgba(206, 234, 225, 0.5);
	border-radius: 18px;
	padding: 20px 24px;
	text-align: center;
	margin-bottom: 24px;
}

.gs-product-info__review-stars {
	display: flex;
	justify-content: center;
	margin-bottom: 6px;
}

.gs-product-info__review-stars svg {
	height: 17px;
	width: auto;
}

.gs-product-info__review h3 {
	font-size: 16px;
	margin-bottom: 6px;
}

.gs-product-info__review p {
	font-size: 14px;
	line-height: 1.55;
	margin-bottom: 6px;
}

.gs-product-info__review small {
	font-size: 12.5px;
	color: rgba(18, 18, 18, 0.65);
}

/* Accordions */
.gs-product-info__accordions {
	border-top: 1px solid rgba(18, 18, 18, 0.2);
}

.gs-accordion {
	border-bottom: 1px solid rgba(18, 18, 18, 0.2);
}

.gs-accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 2px;
	font-size: 15.5px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.gs-accordion summary::-webkit-details-marker {
	display: none;
}

.gs-accordion summary svg {
	width: 13px;
	height: 9px;
	transition: transform 0.2s ease;
}

.gs-accordion[open] summary svg {
	transform: rotate(180deg);
}

.gs-accordion__body {
	padding: 0 2px 18px;
	font-size: 14.5px;
	line-height: 1.65;
}

.gs-accordion__body ul {
	list-style: disc;
	padding-left: 20px;
	margin-bottom: 10px;
}

.gs-accordion__body li + li {
	margin-top: 4px;
}

/* Feature rows section */
.gs-features {
	background: rgba(206, 234, 225, 0.5);
	padding: 30px 0 46px;
}

.gs-features__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gs-grid-gap);
	align-items: center;
}

.gs-features__media {
	border-radius: var(--gs-radius-card);
	overflow: hidden;
}

.gs-features__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gs-features__rows {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.gs-features__row {
	display: flex;
	align-items: center;
	gap: 18px;
}

.gs-features__icon {
	flex: none;
	width: 72px;
	height: 72px;
}

.gs-features__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.gs-features__row h3 {
	font-size: 18px;
	line-height: 1.35;
	max-width: 420px;
}

/* Related products */
.gs-related {
	/* .gs-grid carries its own 30px bottom padding — keep the total gap to
	   the next band at the original 50px. */
	padding: 40px 0 20px;
}

/* The heading is a child of <section class="related products">, never a
   direct child of .page-width, so the original direct-child selector never
   matched and the h2 fell back to the browser default (small, black, left). */
.gs-related h2,
.gs-related h2.related-products__heading {
	text-align: center;
	color: var(--gs-teal);
	margin-bottom: 30px;
}

/* CleanHub band */
.gs-cleanhub {
	padding: 30px 0 80px;
}

.gs-cleanhub__box {
	background: var(--gs-mint);
	border-radius: var(--gs-radius-card);
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--gs-grid-gap);
	overflow: hidden;
}

.gs-cleanhub__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gs-cleanhub__body {
	padding: 44px 46px 44px 0;
}

.gs-cleanhub__body small {
	font-size: 13px;
	color: rgba(18, 18, 18, 0.7);
}

.gs-cleanhub__body h3 {
	color: var(--gs-teal);
	margin: 6px 0 10px;
}

.gs-cleanhub__body > p {
	font-size: 15.5px;
	max-width: 420px;
}

.gs-cleanhub__txt {
	font-size: 14.5px;
	margin-bottom: 16px;
}

.gs-cleanhub__txt a {
	color: var(--gs-teal);
	text-decoration: underline;
}

.gs-cleanhub__verified {
	font-size: 13px;
	color: rgba(18, 18, 18, 0.7);
}

@media (max-width: 989px) {
	.gs-product-main {
		/* minmax(0,1fr), NOT bare 1fr: bare 1fr = minmax(auto,1fr), so the
		   thumb rail's min-content would expand the track past the viewport
		   and the whole PDP would scroll sideways on mobile. */
		grid-template-columns: minmax(0, 1fr);
		padding-top: 18px;
	}

	.gs-gallery {
		position: static;
	}

	.gs-product-info {
		max-width: 100%;
	}

	.gs-features__grid {
		grid-template-columns: 1fr;
	}

	.gs-cleanhub__box {
		grid-template-columns: 1fr;
	}

	.gs-cleanhub__body {
		padding: 0 26px 30px;
	}
}