/* ==========================================================================
   GlowSkin — layer 3
   --------------------------------------------------------------------------
   Load order: settings.css  -> upstream.css  -> glowskin.css
   settings.css = tokens, fonts, colour schemes
   upstream.css = ported layout engine (grid/stack/card primitives)
   glowskin.css = everything this theme adds on top: gaps the engine does not
                  cover, plus all .gs-* components (header chrome, drawers,
                  homepage sections, shop, PDP, footer).

   Conventions
   - Colour always comes from the scheme tokens (rgb(var(--text-color) / a)).
   - Spacing always comes from the engine's spacing tokens so the vertical
     rhythm matches the source storefront.
   - Breakpoints mirror the engine: 700px / 1000px / 1399px.
   ========================================================================== */


/* ==========================================================================
   1. Primitives the engine does not define
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: rgb(var(--background, 255 255 255));
	color: rgb(var(--text-color, 20 20 20));
	font: var(--text-font-weight) var(--text-base) / var(--text-line-height) var(--text-font-family);
	letter-spacing: var(--text-letter-spacing);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.gs-no-scroll {
	overflow: hidden;
}

/* WordPress / WooCommerce often floats things we template ourselves. */
.gs-main {
	display: block;
	min-height: 50vh;
}

.gs-main > .woocommerce,
.gs-main > .woocommerce-notices-wrapper {
	display: contents;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

a {
	color: inherit;
	text-decoration: none;
}

:focus-visible {
	outline: 2px solid rgb(var(--text-color) / 0.6);
	outline-offset: 2px;
}

/* The engine ships .sr-only but not WP's canonical class. */
.screen-reader-text,
.screen-reader-text:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	white-space: nowrap;
	position: absolute;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	z-index: 999;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.75rem 1.25rem;
	background: rgb(var(--background));
	color: rgb(var(--text-color));
	box-shadow: 0 6px 24px rgb(0 0 0 / 0.16);
}

/* The engine styles .popover__divider only; the source uses a plain .divider. */
.divider {
	background: rgb(var(--border-color));
	border: none;
	width: 100%;
	height: 1px;
	margin: 0;
}

/* Source cards request "natural" aspect: never crop the product shot. */
.aspect-natural {
	aspect-ratio: auto;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	list-style: none;
	margin: 0;
	padding: 0.9rem var(--container-gutter);
	background: rgb(var(--background-secondary));
	border-block-end: 1px solid rgb(var(--border-color));
	font-size: var(--text-sm);
}

.woocommerce-error {
	background: rgb(var(--error-background));
	color: rgb(var(--error-text));
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-inline-start: 0.75rem;
}

/* Reveal-on-scroll must never hide content when JS is unavailable. */
html:not(.gs-js) product-card[reveal-on-scroll="true"] {
	opacity: 1 !important;
}

@media (prefers-reduced-motion: no-preference) {
	html.gs-js product-card[reveal-on-scroll="true"] {
		transition: opacity 0.6s ease, transform 0.6s ease;
	}

	html.gs-js product-card[reveal-on-scroll="true"]:not(.is-visible) {
		opacity: 0;
		transform: translateY(14px);
	}

	/* The engine hides [reveal-on-scroll=true] unconditionally; this wins it back. */
	html.gs-js product-card[reveal-on-scroll="true"].is-visible {
		opacity: 1;
		transform: none;
	}
}

/* Section rhythm. The engine applies padding only via .section-spacing, which
   our templates do not use; each section type declares its own. */
.gs-section {
	position: relative;
}

.gs-section > .color-scheme {
	display: block;
}

.gs-section--slideshow,
.gs-section--banner {
	padding-block: 0;
}

/* Header chrome supplies its own spacing. */
.gs-section.gs-section--header {
	padding-block: 0;
}


/* ==========================================================================
   2. Header group — announcement bar + header
   ========================================================================== */

:root {
	--announcement-bar-height: 36px;
	--header-height: 62px;
	--gs-drawer-max-width: 420px;
}

@media screen and (min-width: 700px) {
	:root {
		--announcement-bar-height: 40px;
		--header-height: 72px;
	}
}

.gs-header-group {
	z-index: 60;
	position: sticky;
	inset-block-start: 0;
}

/* The group owns stickiness, so the inner header must not stick on its own. */
#gs-header-section {
	position: static;
	top: auto;
}

.gs-announce-wrap {
	position: relative;
}

.announcement-bar {
	color: rgb(var(--text-color));
	background: rgb(var(--background));
	font-family: var(--subheading-font-family);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media screen and (min-width: 700px) {
	.announcement-bar {
		font-size: 0.75rem;
	}
}

.announcement-bar__text {
	margin: 0;
}

.header {
	display: grid;
	grid-template-areas: var(--header-grid);
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 0 1rem;
	padding: calc(var(--header-padding-block, 1.4rem) - 0.35rem) var(--container-gutter);
	background: rgb(var(--background));
	border-block-end: 1px solid rgb(var(--border-color));
	color: rgb(var(--text-color));
}

.header__logo {
	grid-area: logo;
	justify-self: center;
	margin: 0;
	line-height: 0;
}

.header__logo a {
	display: block;
}

.header__primary-nav {
	justify-self: start;
	flex-wrap: nowrap;
}

/* The desktop nav row only exists from the md breakpoint up: below it the
 * markup relies on the `md-max:hidden` utility. A bare
 * `.header__primary-nav > ul { display:flex }` has specificity (0,1,1) and
 * silently beat `.md-max\:hidden` (0,1,0) regardless of order, so the desktop
 * nav — and the 664px-wide mega menus inside it — stayed visible on phones and
 * pushed ~340px of horizontal overflow onto every page. */
@media screen and (min-width: 1000px) {
	.header__primary-nav > ul {
		display: flex;
		align-items: center;
		column-gap: 1.5rem;
		margin: 0;
		padding: 0;
		list-style: none;
		white-space: nowrap;
	}
}

.header__primary-nav > ul > li {
	position: relative;
}

.header__primary-nav > ul > li > a {
	padding-block: 0.35rem;
	display: inline-block;
	position: relative;
}

.header__primary-nav > ul > li > a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0.1rem;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: var(--transform-origin-start, left);
	transition: transform 0.25s ease;
}

.header__primary-nav > ul > li > a:hover::after,
.header__primary-nav > ul > li > a[aria-expanded="true"]::after {
	transform: scaleX(1);
}

.header__secondary-nav {
	grid-area: secondary-nav;
	justify-self: end;
	column-gap: 0.75rem;
}

.header__icon-link {
	--tap-area-size: 2.5rem;
	display: grid;
	place-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: none;
	border: none;
	color: rgb(var(--text-color));
	cursor: pointer;
	position: relative;
	transition: opacity 0.2s ease;
}

.header__icon-link:hover {
	opacity: 0.6;
}

.header__icon-link .icon,
.header__icon-link svg {
	width: 20px;
	height: 20px;
}

.header__icon-link--cart {
	position: relative;
}

.gs-cart-count {
	position: absolute;
	inset-block-start: 0.15rem;
	inset-inline-end: 0.05rem;
	min-width: 1rem;
	height: 1rem;
	padding-inline: 0.2rem;
	border-radius: var(--rounded-full);
	background: rgb(var(--button-background-primary));
	color: rgb(var(--button-text-primary));
	font-size: 0.5625rem;
	line-height: 1rem;
	text-align: center;
	font-weight: 500;
}

.gs-cart-count[data-count="0"] {
	display: none;
}

.header__hamburger {
	display: grid;
	row-gap: 5px;
	width: 22px;
}

.header__hamburger span {
	display: block;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.2s ease;
}

.header__search-link {
	display: grid;
	place-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}

.header__search-link svg {
	width: 18px;
	height: 18px;
}


/* ==========================================================================
   3. Mega menu
   ========================================================================== */

header-mega-menu {
	display: block;
}

.mega-menu {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	z-index: 40;
	display: grid;
	gap: 2.5rem;
	padding: 2.5rem var(--container-gutter) 2.75rem;
	background: rgb(var(--background));
	color: rgb(var(--text-color));
	border-block-end: 1px solid rgb(var(--border-color));
	box-shadow: 0 24px 40px -28px rgb(0 0 0 / 0.28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
	pointer-events: none;
}

/* Full-bleed panel: escape the nav <li> so it spans the viewport. */
#gs-header-section .mega-menu {
	inset-inline-start: calc(-1 * var(--container-gutter));
	inset-inline-end: calc(-1 * var(--container-gutter));
}

.mega-menu.justify-between {
	grid-template-columns: minmax(0, 1fr) auto;
}

.mega-menu.justify-center {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
}

.mega-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

.mega-menu__navigation {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: 1.75rem 1.5rem;
}

.mega-menu__navigation > .v-stack > span {
	font-family: var(--subheading-font-family);
	font-size: var(--subheading-font-size);
	letter-spacing: var(--subheading-letter-spacing);
	text-transform: uppercase;
}

.mega-menu__linklist {
	margin: 0;
	padding: 0;
	display: grid;
	row-gap: 0.55rem;
	list-style: none;
	font-size: var(--text-sm);
}

.mega-menu__linklist a {
	display: inline-block;
	padding-block: 1px;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size 0.25s ease;
}

.mega-menu__linklist a:hover {
	background-size: 100% 1px;
}

.menu-promo__carousel {
	display: flex;
	column-gap: var(--menu-promo-block-column-gap, 12px);
	overflow-x: auto;
	scrollbar-width: none;
}

.menu-promo__carousel::-webkit-scrollbar {
	display: none;
}

.menu-promo__item {
	flex: 0 0 auto;
	width: 200px;
	scroll-snap-align: start;
}

.menu-promo__item img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.menu-promo__item .body_text {
	margin: 0;
	font-size: var(--text-sm);
}

.gs-carousel-controls--mega {
	position: absolute;
	inset-block-start: -3.25rem;
	inset-inline-end: var(--container-gutter);
	display: flex;
	gap: 0.5rem;
}


/* ==========================================================================
   4. Drawers + overlay
   ========================================================================== */

.gs-overlay {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: rgb(0 0 0 / 0.4);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.gs-overlay.is-open {
	opacity: 1;
}

.gs-overlay[hidden] {
	display: none;
}

.gs-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: block;
}

.gs-drawer[hidden] {
	display: none;
}

.gs-drawer__panel {
	position: absolute;
	inset-block: 0;
	display: flex;
	flex-direction: column;
	width: min(var(--gs-drawer-max-width), 100%);
	background: rgb(var(--background));
	color: rgb(var(--text-color));
	box-shadow: 0 0 60px -20px rgb(0 0 0 / 0.35);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

/* Menu + facets slide from the inline start, cart from the inline end. */
.gs-drawer--menu .gs-drawer__panel,
.gs-drawer--facets .gs-drawer__panel {
	inset-inline-start: 0;
	transform: translateX(-101%);
}

.gs-drawer--cart .gs-drawer__panel {
	inset-inline-end: 0;
	transform: translateX(101%);
}

.gs-drawer--search .gs-drawer__panel {
	inset-block-start: 0;
	inset-inline: 0;
	width: 100%;
	max-height: 60vh;
	transform: translateY(-101%);
}

.gs-drawer.is-open .gs-drawer__panel {
	transform: none;
}

.gs-drawer__header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: 3.5rem;
	padding-inline: 1rem;
	border-block-end: 1px solid rgb(var(--border-color));
	position: sticky;
	inset-block-start: 0;
	background: inherit;
	z-index: 1;
}

.gs-drawer__close {
	grid-column: 1;
	justify-self: start;
	--tap-area-size: 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	display: grid;
	place-content: center;
}

.gs-drawer__close svg {
	width: 18px;
	height: 18px;
}

.gs-drawer__title {
	grid-column: 2;
	font-family: var(--subheading-font-family);
	font-size: var(--subheading-font-size);
	letter-spacing: var(--subheading-letter-spacing);
	text-transform: uppercase;
}

.gs-drawer__body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.5rem 1.25rem 2.5rem;
	display: grid;
	align-content: start;
	row-gap: 1.5rem;
}

.gs-drawer__secondary {
	display: grid;
	row-gap: 0.75rem;
	margin-block-start: 1.5rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid rgb(var(--border-color));
	font-size: var(--text-sm);
}

.gs-drawer__footer {
	display: grid;
	gap: 0.75rem;
	padding: 1rem 1.25rem 1.25rem;
	border-block-start: 1px solid rgb(var(--border-color));
}

.gs-cart-continue {
	text-align: center;
	font-size: var(--text-sm);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gs-cart-checkout {
	width: 100%;
}

/* --- accordion (menu drawer) --- */

.gs-accordion {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-accordion__item + .gs-accordion__item {
	border-block-start: 1px solid rgb(var(--border-color));
}

.gs-accordion__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.gs-accordion__link {
	flex: 1;
	padding-block: 0.9rem;
	font-size: 0.9375rem;
}

.gs-accordion__toggle {
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
}

.gs-accordion__toggle svg {
	width: 14px;
	height: 14px;
	transition: transform 0.25s ease;
}

.gs-accordion__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.gs-accordion__content {
	padding-block-end: 1rem;
}

.gs-accordion__group + .gs-accordion__group {
	margin-block-start: 1.25rem;
}

.gs-accordion__group-title {
	margin: 0 0 0.5rem;
	font-family: var(--subheading-font-family);
	font-size: 0.6875rem;
	letter-spacing: var(--subheading-letter-spacing);
	text-transform: uppercase;
	opacity: 0.7;
}

.gs-accordion__sublist {
	margin: 0;
	padding: 0;
	display: grid;
	row-gap: 0.5rem;
	list-style: none;
	font-size: var(--text-sm);
}

.gs-accordion__promos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-block-start: 1rem;
}

.gs-accordion__promo {
	display: grid;
	row-gap: 0.4rem;
	font-size: 0.75rem;
}

.gs-accordion__promo img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Inline accordion variant used on the PDP for ingredients. */
.gs-accordion--inline {
	border-block: 1px solid rgb(var(--border-color));
}

.gs-accordion__summary {
	cursor: pointer;
	list-style: none;
	padding-block: 0.9rem;
	font-size: var(--text-sm);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

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

.gs-accordion__summary::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}

.gs-accordion--inline[open] .gs-accordion__summary::after {
	transform: rotate(-135deg);
}

.gs-accordion--inline .gs-accordion__content {
	padding-block-end: 1.25rem;
	font-size: var(--text-sm);
}

/* --- search drawer --- */

.gs-search-form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-block-end: 1px solid rgb(var(--text-color));
	padding-block-end: 0.5rem;
}

.gs-search-form input[type="search"] {
	flex: 1;
	background: none;
	border: none;
	outline: none;
	font-size: 1.125rem;
	padding: 0.35rem 0;
}

.gs-search-form__submit {
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
}

.gs-search-form__submit svg {
	width: 20px;
	height: 20px;
}

.gs-search-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.gs-search-suggestions__pill {
	border: 1px solid rgb(var(--border-color));
	border-radius: var(--rounded-full);
	padding: 0.4rem 0.9rem;
	font-size: var(--text-sm);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.gs-search-suggestions__pill:hover {
	border-color: rgb(var(--text-color));
}

/* --- cart drawer --- */

.gs-cart-line {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	gap: 0.9rem;
	align-items: start;
	padding-block: 1rem;
	border-block-end: 1px solid rgb(var(--border-color));
}

.gs-cart-line__media img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	background: rgb(var(--background-secondary));
}

.gs-cart-line__title {
	display: block;
	font-size: var(--text-sm);
	margin-block-end: 0.25rem;
}

.gs-cart-line__price,
.gs-cart-line__qty {
	margin: 0;
	font-size: var(--text-sm);
}

.gs-cart-line__qty {
	opacity: 0.7;
}

.gs-cart-line__remove {
	width: 1.75rem;
	height: 1.75rem;
	display: grid;
	place-content: center;
	opacity: 0.6;
}

.gs-cart-line__remove:hover {
	opacity: 1;
}

.gs-cart-line__remove svg {
	width: 14px;
	height: 14px;
}

.gs-cart-empty,
.gs-cart-empty-note {
	margin: 2rem 0;
	text-align: center;
	font-size: var(--text-sm);
	opacity: 0.75;
}

.gs-cart-promo {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	column-gap: 0.9rem;
	align-items: center;
	margin-block-start: 1.5rem;
	padding: 0.9rem;
	background: rgb(var(--background-secondary));
}

.gs-cart-promo img {
	width: 72px;
	height: 72px;
	object-fit: cover;
}

.gs-cart-promo__text {
	display: grid;
	row-gap: 0.15rem;
	font-size: var(--text-sm);
}

.gs-cart-promo__text strong {
	font-weight: var(--text-font-medium-weight);
}

.gs-cart-promo__text em {
	font-style: normal;
	font-size: 0.75rem;
	opacity: 0.7;
}

.gs-cart-promo__cta {
	grid-column: 2;
	font-size: 0.75rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- facets drawer --- */

.gs-facets__active {
	margin: 0;
	font-size: var(--text-sm);
}

.gs-facets__group + .gs-facets__group {
	margin-block-start: 1.5rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid rgb(var(--border-color));
}

.gs-facets__group-title {
	margin: 0 0 0.75rem;
	font-family: var(--subheading-font-family);
	font-size: var(--subheading-font-size);
	letter-spacing: var(--subheading-letter-spacing);
	text-transform: uppercase;
}

.gs-facets__list {
	margin: 0;
	padding: 0;
	display: grid;
	row-gap: 0.6rem;
	list-style: none;
}

.gs-facets__option {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-sm);
}

.gs-facets__dot {
	width: 0.9rem;
	height: 0.9rem;
	border: 1px solid rgb(var(--text-color) / 0.5);
	border-radius: var(--rounded-full);
	flex: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gs-facets__option.is-active .gs-facets__dot,
.gs-facets__option:hover .gs-facets__dot {
	border-color: rgb(var(--text-color));
	box-shadow: inset 0 0 0 3px rgb(var(--background)), inset 0 0 0 6px rgb(var(--text-color));
}

.gs-facets__option.is-active {
	font-weight: var(--text-font-medium-weight);
}


/* ==========================================================================
   5. Homepage — shared
   ========================================================================== */

.gs-section--featured-collections,
.gs-section--faq-chat,
.gs-section--media-blocks,
.gs-section--multi-column,
.gs-section--related-products,
.gs-section--blog-posts,
.gs-section--benefits-list,
.gs-section--clinicals,
.gs-section--text-with-icons,
.gs-section--image-text,
.gs-section--reviews,
.gs-section--archive,
.gs-section--page,
.gs-section--single,
.gs-section--404 {
	padding-block: var(--section-vertical-spacing);
}

/* Sections built on .section-split already pad their own columns. */
.gs-section--image-text:has(.section-split) {
	padding-block: 0;
}

.gs-section--testimonials .section-split {
	align-items: stretch;
}

.gs-section--shop-main {
	padding-block-end: var(--section-vertical-spacing);
}

.gs-section--shop-seo {
	padding-block: var(--section-vertical-spacing);
}

.gs-section--trust-icons {
	padding-block: 0;
}

.gs-section > .color-scheme,
.gs-section > .gs-banner {
	background: rgb(var(--background));
	color: rgb(var(--text-color));
}

.gs-section {
	background: rgb(var(--background, 255 255 255));
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--heading-font-family);
	font-weight: var(--heading-font-weight);
	letter-spacing: var(--heading-letter-spacing);
	line-height: var(--heading-line-height);
	text-transform: var(--heading-text-transform);
	margin: 0;
}

.gs-slide__heading,
.gs-image-text__heading,
.gs-media-blocks__heading,
.gs-banner__quote,
.gs-faq-chat__heading,
.gs-review-strip__heading,
.gs-related__heading,
.gs-articles__heading,
.gs-split-block__heading,
.gs-ingredients__heading,
.gs-multi-column__title,
.gs-shop-seo__heading,
.gs-shop-banner__title,
.gs-archive__title,
.gs-page__title,
.gs-404__title {
	font-size: var(--text-h4);
}

.gs-carousel-next,
.gs-carousel-prev {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 3;
}

.gs-carousel-prev {
	inset-inline-start: 0.5rem;
}

.gs-carousel-next {
	inset-inline-end: 0.5rem;
}

.gs-carousel-next[hidden],
.gs-carousel-prev[hidden] {
	display: none;
}

/* Carousels: horizontal scrollers with snap. */
[data-gs-scroller] {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

[data-gs-scroller]::-webkit-scrollbar {
	display: none;
}


/* ==========================================================================
   6. Homepage — slideshow
   ========================================================================== */

.slideshow,
.gs-slide {
	position: relative;
}

.slideshow--full {
	min-height: min(86vh, 820px);
}

.gs-slide {
	grid-area: 1 / -1;
	display: grid;
	position: relative;
	overflow: hidden;
}

.gs-slide:not(.is-selected) {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	inset: 0;
}

.gs-slide.is-selected {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.6s ease;
}

.gs-slide__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

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

.gs-slide__img--mobile {
	display: block;
}

.gs-slide__img--desktop {
	display: none;
}

@media screen and (min-width: 700px) {
	.gs-slide__img--mobile {
		display: none;
	}

	.gs-slide__img--desktop {
		display: block;
	}
}

.gs-slide__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.gs-slide__container {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	padding: 3rem var(--container-gutter);
	color: rgb(255 255 255);
}

.gs-slide__container--dark {
	color: rgb(255 255 255);
}

.gs-slide__container--light {
	color: rgb(20 20 20);
}

.gs-slide__container--start {
	justify-content: flex-start;
}

.gs-slide__container--end {
	justify-content: flex-end;
}

.gs-slide__box {
	max-width: 34rem;
	display: grid;
	row-gap: 0.9rem;
	justify-items: start;
}

.gs-slide__eyebrow {
	margin: 0;
}

.gs-slide__heading {
	font-size: var(--text-h2);
	margin: 0;
}

.gs-slide__body {
	margin: 0;
	max-width: 30rem;
	font-size: var(--text-base);
}

.gs-slide__cta {
	margin-block-start: 0.5rem;
}

.gs-slideshow__dots {
	position: absolute;
	inset-block-end: 1.25rem;
	inset-inline: 0;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.gs-slideshow__dot {
	width: 26px;
	height: 2px;
	padding: 0;
	border: none;
	background: rgb(255 255 255 / 0.45);
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.gs-slideshow__dot.is-active {
	background: rgb(255 255 255);
}


/* ==========================================================================
   7. Homepage — FAQ chat
   ========================================================================== */

.gs-faq-chat {
	display: grid;
	gap: 1.5rem;
}

.gs-faq-chat__heading {
	margin: 0;
	font-size: var(--text-h5);
	max-width: 40rem;
}

.gs-faq-chat__panel {
	background: rgb(var(--background-secondary));
	border: 1px solid rgb(var(--border-color));
	padding: 1.5rem;
	display: grid;
	row-gap: 1.25rem;
	max-width: 46rem;
}

.gs-faq-chat__text {
	margin: 0;
	font-size: var(--text-sm);
}

.gs-faq-chat__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.gs-faq-chat__chip {
	border: 1px solid rgb(var(--border-color));
	background: rgb(var(--background));
	border-radius: var(--rounded-full);
	padding: 0.45rem 0.95rem;
	font-size: var(--text-sm);
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.gs-faq-chat__chip:hover {
	border-color: rgb(var(--text-color));
}

.gs-faq-chat__form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-block-end: 1px solid rgb(var(--text-color));
	padding-block-end: 0.4rem;
}

.gs-faq-chat__form input {
	flex: 1;
	background: none;
	border: none;
	outline: none;
	padding: 0.4rem 0;
	font-size: var(--text-sm);
}

.gs-faq-chat__submit {
	width: 2rem;
	height: 2rem;
	display: grid;
	place-content: center;
	background: none;
	border: none;
	cursor: pointer;
}

.gs-faq-chat__submit svg {
	width: 18px;
	height: 18px;
}


/* ==========================================================================
   8. Homepage — featured carousel
   ========================================================================== */

.gs-featured {
	padding-inline: var(--container-gutter);
	display: grid;
	row-gap: 1.5rem;
}

.gs-featured__tabs {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.gs-featured__tab {
	background: none;
	border: none;
	padding: 0 0 0.4rem;
	cursor: pointer;
	color: rgb(var(--text-color) / 0.5);
	font-family: var(--heading-font-family);
	font-size: var(--text-h6);
	letter-spacing: var(--heading-letter-spacing);
	position: relative;
	transition: color 0.2s ease;
}

.gs-featured__tab.is-active,
.gs-featured__tab:hover {
	color: rgb(var(--text-color));
}

.gs-featured__tab.is-active::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 1px;
	background: currentColor;
}

.gs-featured__carousel-wrap {
	position: relative;
}

.gs-featured__carousel,
.gs-carousel-block__track,
.gs-review-strip__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 74%;
	column-gap: 1px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

@media screen and (min-width: 700px) {
	.gs-featured__carousel {
		grid-auto-columns: 38%;
	}

	.gs-carousel-block__track,
	.gs-review-strip__track {
		grid-auto-columns: 38%;
	}
}

@media screen and (min-width: 1000px) {
	.gs-featured__carousel {
		grid-auto-columns: 25%;
	}

	.gs-carousel-block__track {
		grid-auto-columns: 25%;
	}

	.gs-review-strip__track {
		grid-auto-columns: 25%;
	}
}

.gs-featured__carousel > *,
.gs-carousel-block__track > *,
.gs-review-strip__track > * {
	scroll-snap-align: start;
}

.gs-featured__progress {
	height: 2px;
	background: rgb(var(--border-color));
	overflow: hidden;
}

.gs-featured__progress-bar {
	display: block;
	height: 100%;
	width: 0;
	background: rgb(var(--text-color));
	transition: width 0.2s ease;
}

.gs-card--promo {
	display: grid;
	align-content: start;
}

.gs-card--promo-cta {
	margin-block-start: 0.5rem;
	pointer-events: none;
}


/* ==========================================================================
   9. Homepage — image + text split, media blocks, multi column, banner
   ========================================================================== */

.section-split {
	display: grid;
	grid-template-columns: var(--section-split-grid-template-columns, minmax(0, 1fr) minmax(0, 1fr));
	align-items: center;
}

.gs-split-block__media img,
.gs-image-text .section-split__column--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gs-image-text__content,
.gs-split-block__content {
	display: grid;
	row-gap: 0.9rem;
	justify-items: start;
	max-width: 34rem;
}

.gs-image-text__eyebrow,
.gs-split-block__eyebrow {
	margin: 0;
}

.gs-image-text__heading,
.gs-split-block__heading,
.gs-ingredients__heading {
	margin: 0;
}

.gs-image-text__body,
.gs-split-block__body,
.gs-split-block__footnote {
	margin: 0;
	font-size: var(--text-base);
}

.gs-split-block__footnote {
	font-size: var(--text-xs);
	opacity: 0.7;
}

.gs-image-text__cta {
	margin-block-start: 0.5rem;
}

/* Media blocks */
.gs-media-blocks {
	display: grid;
	row-gap: 1.5rem;
}

.gs-media-blocks__head {
	padding-inline: var(--container-gutter);
}

.gs-media-blocks__heading {
	margin: 0;
}

.gs-media-blocks__carousel-wrap {
	position: relative;
}

.gs-media-blocks__grid {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	gap: 1px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

@media screen and (min-width: 700px) {
	.gs-media-blocks__grid {
		grid-auto-columns: 45%;
	}
}

@media screen and (min-width: 1000px) {
	.gs-media-blocks__grid {
		grid-auto-columns: 25%;
	}
}

.gs-media-block {
	position: relative;
	display: block;
	scroll-snap-align: start;
	overflow: hidden;
}

.gs-media-block__img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-media-block:hover .gs-media-block__img {
	transform: scale(1.04);
}

.gs-media-block__cta {
	position: absolute;
	inset-block-end: 1.25rem;
	inset-inline-start: 1.25rem;
	padding: 0.6rem 1.15rem;
	background: rgb(255 255 255);
	color: rgb(20 20 20);
	font-family: var(--button-font);
	font-size: var(--button-font-size);
	letter-spacing: var(--button-letter-spacing);
}

/* Multi column */
.gs-multi-column {
	position: relative;
	padding-inline: var(--container-gutter);
}

.gs-multi-column__grid {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	gap: var(--container-gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

@media screen and (min-width: 700px) {
	.gs-multi-column__grid {
		grid-auto-columns: 54%;
	}
}

@media screen and (min-width: 1000px) {
	.gs-multi-column__grid {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		overflow: visible;
	}
}

.gs-multi-column__item {
	display: grid;
	row-gap: 0.75rem;
	align-content: start;
	scroll-snap-align: start;
}

.gs-multi-column__img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.gs-multi-column__title {
	margin: 0;
	font-size: var(--text-h6);
}

.gs-multi-column__body {
	margin: 0;
	font-size: var(--text-sm);
}

.gs-multi-column__link {
	font-size: var(--text-sm);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gs-carousel-controls--multi {
	inset-block-start: -3rem;
	inset-inline-end: var(--container-gutter);
	transform: none;
	display: flex;
	gap: 0.5rem;
}

@media screen and (min-width: 1000px) {
	.gs-carousel-controls--multi {
		display: none;
	}
}

/* Banner */
.gs-banner {
	position: relative;
}

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

.gs-banner__img--mobile {
	display: block;
}

.gs-banner__img--desktop {
	display: none;
}

@media screen and (min-width: 700px) {
	.gs-banner__img--mobile {
		display: none;
	}

	.gs-banner__img--desktop {
		display: block;
	}
}

.gs-banner__card {
	position: absolute;
	inset: 0;
	margin: auto;
	height: max-content;
	max-width: 34rem;
	padding: 2rem;
	text-align: center;
	display: grid;
	row-gap: 1.25rem;
	justify-items: center;
	color: rgb(255 255 255);
}

.gs-banner__quote {
	margin: 0;
	font-size: var(--text-h5);
}


/* ==========================================================================
   10. Homepage — testimonials
   ========================================================================== */

.gs-testimonials__figure {
	position: relative;
}

.gs-testimonials__figure:not(.is-active) {
	display: none;
}

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

.gs-testimonials__product {
	position: absolute;
	inset-block-end: 1.25rem;
	inset-inline-start: 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: rgb(255 255 255);
	color: rgb(20 20 20);
	padding: 0.6rem 0.9rem;
}

.gs-testimonials__product-media img {
	width: 44px;
	height: 44px;
	object-fit: cover;
}

.gs-testimonials__product-text {
	display: grid;
	row-gap: 0.1rem;
}

.gs-testimonials__product-title {
	font-size: var(--text-sm);
	font-weight: var(--text-font-medium-weight);
}

.gs-testimonials__product-price {
	font-style: normal;
	font-size: 0.75rem;
	opacity: 0.7;
}

.gs-testimonials__content {
	display: grid;
	row-gap: 1.25rem;
}

.gs-testimonials__slide:not(.is-active) {
	display: none;
}

.gs-testimonials__author {
	margin: 0;
	font-family: var(--subheading-font-family);
	font-size: var(--subheading-font-size);
	letter-spacing: var(--subheading-letter-spacing);
	text-transform: uppercase;
}

.gs-testimonials__quote {
	margin: 0;
	font-family: var(--heading-font-family);
	font-size: var(--text-h5);
	line-height: 1.3;
	letter-spacing: var(--heading-letter-spacing);
}

.gs-testimonials__controls {
	display: flex;
	gap: 0.5rem;
}

@media screen and (max-width: 999px) {
	.section-split,
	.gs-split-block {
		grid-template-columns: minmax(0, 1fr);
	}

	.gs-image-text .section-split__column--image,
	.gs-split-block__media {
		padding: 0;
	}

	.gs-testimonials .section-split__column--image {
		padding-block: 0;
	}
}


/* ==========================================================================
   11. Shop archive
   ========================================================================== */

.gs-shop-banner {
	padding: var(--section-vertical-spacing) 0 1.25rem;
	text-align: center;
}

.gs-shop-banner__title {
	margin: 0 0 1.5rem;
}

.gs-shop-chips-wrap {
	position: relative;
	padding-inline: var(--container-gutter);
}

.gs-shop-chips {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 80px;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	margin: 0;
	padding-block-end: 0.25rem;
	list-style: none;
}

.gs-shop-chip {
	display: grid;
	row-gap: 0.5rem;
	justify-items: center;
	scroll-snap-align: start;
	text-align: center;
}

.gs-shop-chip__img,
.collection-quick-navigation__item-image img {
	width: 80px;
	height: 80px;
	border-radius: var(--rounded-full);
	object-fit: cover;
	overflow: hidden;
}

.gs-shop-chip .small-body-text {
	opacity: 0.75;
}

.gs-shop-chip.is-active .small-body-text,
.gs-shop-chip:hover .small-body-text {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gs-carousel-controls--chips {
	inset-block-start: 50%;
	transform: translateY(-50%);
}

.collection {
	padding-inline: 0;
}

.collection__toolbar {
	position: sticky;
	inset-block-start: var(--sticky-area-height, var(--header-height));
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem var(--container-gutter);
	background: rgb(var(--background));
	border-block: 1px solid rgb(var(--border-color));
}

.collection__toolbar > .small-body-text:first-child {
	margin-inline-end: auto;
}

.collection__toolbar .gs-facets-mobile-open {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
}

.collection__toolbar .gs-facets-desktop-open {
	display: none;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
}

.collection__toolbar .gs-layout-mobile {
	display: flex;
}

.collection__toolbar .gs-layout-desktop {
	display: none;
}

.collection__layout-selector {
	display: inline-flex;
	align-items: center;
}

.collection__layout-selector label {
	display: grid;
	place-content: center;
	width: 1.75rem;
	height: 1.75rem;
	cursor: pointer;
	opacity: 0.45;
	transition: opacity 0.2s ease;
}

.collection__layout-selector input:checked + label,
.collection__layout-selector label:hover {
	opacity: 1;
}

.collection__layout-selector svg {
	width: 16px;
	height: 16px;
}

.collection__results {
	padding-block-end: 0;
}

@media screen and (min-width: 700px) {
	.collection__toolbar .gs-facets-mobile-open {
		display: none;
	}

	.collection__toolbar .gs-facets-desktop-open {
		display: inline-flex;
	}

	.collection__toolbar .gs-layout-mobile {
		display: none;
	}

	.collection__toolbar .gs-layout-desktop {
		display: flex;
	}
}

/* The engine's product-list already does the grid; these hooks let the
   on-page layout switcher and mobile column count work. */
product-list.product-list {
	--product-list-column-count: 2;
	grid-auto-flow: row dense;
}

@media screen and (min-width: 700px) {
	product-list.product-list {
		--product-list-column-count: 3;
	}
}

@media screen and (min-width: 1000px) {
	product-list.product-list {
		--product-list-column-count: 4;
	}
}

product-list.product-list[data-gs-columns="3"] {
	--product-list-column-count: 3;
}

product-list.product-list[data-gs-layout="thumbnails"] {
	--product-list-column-count: 6;
}

@media screen and (max-width: 999px) {
	product-list.product-list[data-gs-layout="thumbnails"] {
		--product-list-column-count: 3;
	}
}

/* Promo tiles injected into the grid. */
.product-card--editorial {
	grid-column: span 2;
}

@media screen and (max-width: 699px) {
	.product-card--editorial {
		grid-column: span 2;
	}
}

@media screen and (min-width: 1000px) {
	.product-card--editorial {
		grid-column: span 2;
		grid-row: span 2;
	}
}

.product-card--editorial .product-card__image {
	height: 100%;
	object-fit: cover;
}

.product-card--editorial .product-card__info {
	align-content: center;
}

.gs-collection-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 1rem;
	padding: 2.5rem var(--container-gutter) var(--section-vertical-spacing);
}

.gs-load-more[hidden] {
	display: none;
}

.gs-no-results {
	padding: var(--section-vertical-spacing) var(--container-gutter);
	text-align: center;
}

.gs-shop-seo {
	max-width: 60rem;
	margin-inline: auto;
	padding-inline: var(--container-gutter);
	display: grid;
	row-gap: 0.9rem;
}

.gs-shop-seo__heading {
	margin: 0;
	font-size: var(--text-h6);
}

.gs-shop-seo__body p {
	margin: 0;
	font-size: var(--text-sm);
	opacity: 0.85;
}


/* ==========================================================================
   12. Product card refinements
   ========================================================================== */

product-card.product-card {
	background: rgb(var(--background));
	color: rgb(var(--text-color));
}

.product-card--bordered {
	outline: 1px solid rgb(var(--border-color));
	outline-offset: -1px;
}

.product-card__size-selector {
	display: none;
	row-gap: 0.35rem;
}

@media screen and (min-width: 700px) {
	.product-card__size-selector {
		display: flex;
	}
}

.product-card .floating-size-selector__button {
	--button-padding-inline: 0.55rem;
	--button-padding-block: 0.25rem;
	font-size: 0.6875rem;
	border: 1px solid rgb(var(--border-color));
	border-radius: 0;
	background: rgb(var(--background));
	color: rgb(var(--text-color));
	cursor: pointer;
}

.product-card .floating-size-selector__button.is-selected {
	border-color: rgb(var(--text-color));
	background: rgb(var(--background-secondary, 241 240 243));
}

.product-card__quick-buy-mobile {
	margin-block-start: 0.5rem;
}

.prd_card_atc.link {
	background: none;
	border: none;
	padding: 0;
	font-size: var(--text-sm);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.badge-list--column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
}

.badge {
	font-size: 0.5625rem;
	letter-spacing: 0.08em;
	padding: 0.25rem 0.5rem;
}

.badge--bestseller {
	background: rgb(var(--custom-badge-background));
	color: rgb(var(--custom-badge-text));
}

.badge--new {
	background: rgb(var(--custom-badge-background));
	color: rgb(var(--custom-badge-text));
}

.product-title {
	font-size: var(--text-sm);
}

.product-title.medium {
	font-weight: var(--text-font-medium-weight);
}

.price-list {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
}

.line-through {
	text-decoration: line-through;
	opacity: 0.6;
}


/* ==========================================================================
   13. PDP — gallery + buy box
   ========================================================================== */

.gs-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

@media screen and (min-width: 1000px) {
	.gs-product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: var(--container-gutter);
		padding-inline: var(--container-gutter);
		padding-block-start: var(--section-vertical-spacing);
	}
}

.gs-product__gallery {
	display: grid;
	row-gap: 2px;
}

@media screen and (min-width: 1000px) {
	.gs-product__gallery {
		position: sticky;
		inset-block-start: calc(var(--sticky-area-height, var(--header-height)) + 1.5rem);
	}
}

.gs-product__gallery-main {
	background: rgb(var(--background-secondary, 241 240 243));
}

.gs-product__gallery-img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.gs-product__gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px;
}

.gs-product__gallery-cell {
	padding: 0;
	border: none;
	background: rgb(var(--background-secondary, 241 240 243));
	cursor: pointer;
	overflow: hidden;
}

.gs-product__gallery-cell img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gs-product__gallery-cell:hover img {
	transform: scale(1.04);
}

.gs-product__info {
	padding: var(--section-vertical-spacing) var(--container-gutter);
}

@media screen and (min-width: 1000px) {
	.gs-product__info {
		padding-block: 0;
		padding-inline: 0;
	}
}

.product-info__block-list {
	display: grid;
	row-gap: 1rem;
	align-content: start;
}

.gs-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	opacity: 0.7;
}

.gs-breadcrumb a:hover {
	text-decoration: underline;
}

.product-title.h3 {
	font-size: var(--text-h5);
	margin: 0;
}

.gs-product__subtitle {
	margin: 0;
	font-size: var(--text-base);
	opacity: 0.85;
}

.gs-product__rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.gs-stars {
	display: inline-flex;
	gap: 2px;
}

.gs-star svg {
	width: 14px;
	height: 14px;
}

.gs-star {
	color: rgb(var(--text-color) / 0.25);
	display: inline-flex;
}

.gs-star.is-full {
	color: #1c1c1c;
}

.gs-product__reviews-link,
.gs-product__summary-link {
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 0.8;
}

.gs-product__summary-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.gs-product__summary-link svg {
	width: 12px;
	height: 12px;
}

/* Size chips in the buy box */
.variant-picker__option-info {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}

.variant-picker__option-values {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: 0.75rem;
}

.gs-buybox .variant-selector__button {
	--button-padding-inline: 0.85rem;
	--button-padding-block: 0.35rem;
	border: 1px solid rgb(var(--border-color));
	background: rgb(var(--background));
	color: rgb(var(--text-color));
	cursor: pointer;
	border-radius: 0;
}

.gs-buybox .variant-selector__button.is-selected {
	border-color: rgb(var(--text-color));
	background: rgb(var(--background-secondary, 241 240 243));
}

.gs-buybox .variant-selector__button.is-disabled {
	opacity: 0.4;
	text-decoration: line-through;
	pointer-events: none;
}

/* Purchase options */
.gs-buybox__options {
	display: grid;
	row-gap: 0.5rem;
}

.gs-radio {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.65rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid rgb(var(--border-color));
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.gs-radio:has(input:checked) {
	border-color: rgb(var(--text-color));
}

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

.gs-radio__mark {
	width: 1rem;
	height: 1rem;
	border: 1px solid rgb(var(--text-color) / 0.5);
	border-radius: var(--rounded-full);
	position: relative;
	flex: none;
}

.gs-radio:has(input:checked) .gs-radio__mark {
	border-color: rgb(var(--text-color));
}

.gs-radio:has(input:checked) .gs-radio__mark::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: var(--rounded-full);
	background: rgb(var(--text-color));
}

.gs-radio__label {
	font-size: var(--text-sm);
}

.gs-radio__price {
	font-size: var(--text-sm);
	white-space: nowrap;
}

/* Quantity + ATC */
.pdp-atc-row {
	display: flex;
	align-items: stretch;
	gap: 0.75rem;
	margin-block-start: 0.25rem;
}

.quantity-selector {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgb(var(--border-color));
	flex: none;
}

.quantity-selector__button {
	width: 2.4rem;
	min-height: 2.75rem;
	display: grid;
	place-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
}

.quantity-selector__button svg {
	width: 12px;
	height: 12px;
}

.quantity-selector__input {
	width: 2.2rem;
	min-height: 2.75rem;
	border: none;
	background: none;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.quantity-selector__input::-webkit-outer-spin-button,
.quantity-selector__input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.gs-buybox__atc {
	flex: 1;
}

.gs-buybox__trust {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.5rem 0 0;
	opacity: 0.75;
}

.gs-buybox__trust svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.gs-product__meta {
	display: grid;
	row-gap: 0.2rem;
}

.gs-product__tags {
	margin: 0;
	opacity: 0.75;
}

/* Product question box */
.gs-question-box {
	border: 1px solid rgb(var(--border-color));
	padding: 1.25rem;
	display: grid;
	row-gap: 0.85rem;
}

.gs-question-box__title {
	margin: 0;
	font-family: var(--heading-font-family);
	font-size: var(--text-h7);
}

.gs-question-box__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.gs-question-box__chip {
	border: 1px solid rgb(var(--border-color));
	background: none;
	border-radius: var(--rounded-full);
	padding: 0.35rem 0.75rem;
	font-size: var(--text-xs);
	cursor: pointer;
	color: inherit;
}

.gs-question-box__chip:hover {
	border-color: rgb(var(--text-color));
}

.gs-question-box__form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-block-end: 1px solid rgb(var(--text-color));
	padding-block-end: 0.3rem;
}

.gs-question-box__form input {
	flex: 1;
	background: none;
	border: none;
	outline: none;
	padding: 0.3rem 0;
	font-size: var(--text-sm);
}

.gs-question-box__form button {
	width: 1.9rem;
	height: 1.9rem;
	display: grid;
	place-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
}

.gs-question-box__form button svg {
	width: 16px;
	height: 16px;
}

/* "Pairs with" */
.gs-pair {
	border-block-start: 1px solid rgb(var(--border-color));
	padding-block-start: 1rem;
	display: grid;
	row-gap: 0.75rem;
}

.gs-pair__title {
	margin: 0;
	font-family: var(--subheading-font-family);
	font-size: var(--subheading-font-size);
	letter-spacing: var(--subheading-letter-spacing);
	text-transform: uppercase;
}

.gs-pair__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 0.85rem;
	align-items: center;
}

.gs-pair__media img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	background: rgb(var(--background-secondary, 241 240 243));
}

.gs-pair__info {
	display: grid;
	row-gap: 0.15rem;
}

.gs-pair__name {
	font-size: var(--text-sm);
}

.gs-pair__price {
	margin: 0;
	font-size: var(--text-xs);
	opacity: 0.75;
}

.gs-pair__cta {
	font-size: var(--text-xs);
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ==========================================================================
   14. PDP — editorial blocks
   ========================================================================== */

.gs-split-block {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: var(--container-gutter);
	padding-inline: var(--container-gutter);
}

@media screen and (min-width: 1000px) {
	.gs-split-block {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.gs-split-block--flip .gs-split-block__media {
		order: 2;
	}
}

.gs-split-block--benefits,
.gs-split-block--clinicals {
	align-items: center;
}

.gs-check-list {
	margin: 0;
	padding: 0;
	display: grid;
	row-gap: 0.6rem;
	list-style: none;
}

.gs-check-list__item {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: var(--text-sm);
}

.gs-check-list__item svg {
	width: 16px;
	height: 16px;
	flex: none;
	margin-block-start: 0.15rem;
}

.gs-clinicals__legend {
	display: flex;
	justify-content: space-between;
	font-family: var(--subheading-font-family);
	font-size: var(--subheading-font-size);
	letter-spacing: var(--subheading-letter-spacing);
	text-transform: uppercase;
	padding-block-start: 0.6rem;
	opacity: 0.75;
}

.gs-stat-list {
	margin: 0;
	padding: 0;
	display: grid;
	row-gap: 0.9rem;
	list-style: none;
}

.gs-stat-list__item {
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
}

.gs-stat-list__value {
	font-family: var(--heading-font-family);
	font-size: var(--text-h6);
	line-height: 1;
	flex: none;
	min-width: 4rem;
}

.gs-stat-list__text {
	font-size: var(--text-sm);
	opacity: 0.85;
}

/* Ingredients */
.gs-ingredients {
	display: grid;
	row-gap: 1.5rem;
	justify-items: center;
	text-align: center;
	padding-inline: var(--container-gutter);
}

.gs-ingredients .is-centered {
	text-align: center;
	margin: 0;
}

.gs-ingredients__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	width: 100%;
	max-width: 64rem;
}

@media screen and (min-width: 700px) {
	.gs-ingredients__row {
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	}
}

.gs-ingredients__item {
	display: grid;
	row-gap: 0.6rem;
	justify-items: center;
}

.gs-ingredients__icon {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

.gs-ingredients__name {
	margin: 0;
	font-size: var(--text-h7);
}

.gs-ingredients__text {
	margin: 0;
	font-size: var(--text-sm);
	opacity: 0.85;
}

/* Suggested ritual / generic carousel block */
.gs-carousel-block {
	display: grid;
	row-gap: 1.5rem;
	padding-inline: var(--container-gutter);
}

.gs-carousel-block__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.gs-carousel-block__heading {
	margin: 0;
	font-size: var(--text-h5);
}

.gs-carousel-block__wrap {
	position: relative;
}

.gs-carousel-block .gs-carousel-prev,
.gs-carousel-block .gs-carousel-next,
.gs-featured .gs-carousel-prev,
.gs-featured .gs-carousel-next,
.gs-review-strip .gs-carousel-prev,
.gs-review-strip .gs-carousel-next {
	top: 40%;
}

/* Review strip ("Hear what people are saying") */
.gs-review-strip {
	display: grid;
	row-gap: 1.5rem;
	padding-inline: var(--container-gutter);
}

.gs-review-strip__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.gs-review-strip__heading {
	margin: 0;
	font-size: var(--text-h5);
}

.gs-review-strip__wrap {
	position: relative;
}

.gs-review-card {
	display: grid;
	grid-template-rows: auto 1fr;
	background: rgb(var(--background-secondary, 241 240 243));
}

.gs-review-card__media img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.gs-review-card__body {
	padding: 1.15rem;
	display: grid;
	row-gap: 0.4rem;
	align-content: start;
}

.gs-review-card__stars {
	display: inline-flex;
	gap: 2px;
}

.gs-review-card__stars .gs-star,
.gs-review__stars .gs-star {
	color: rgb(var(--text-color) / 0.3);
}

.gs-review-card__title {
	margin: 0;
	font-size: var(--text-h7);
}

.gs-review-card__author,
.gs-review-card__flag {
	margin: 0;
	font-size: var(--text-xs);
	opacity: 0.7;
}

.gs-review-card__text {
	margin: 0;
	font-size: var(--text-sm);
}


/* ==========================================================================
   15. PDP — reviews panel
   ========================================================================== */

.gs-reviews {
	padding: var(--section-vertical-spacing) var(--container-gutter);
	display: grid;
	row-gap: 1.75rem;
	max-width: 64rem;
	margin-inline: auto;
	scroll-margin-block-start: calc(var(--sticky-area-height, var(--header-height)) + 1rem);
}

.gs-reviews__tabs {
	display: flex;
	gap: 1.75rem;
	border-block-end: 1px solid rgb(var(--border-color));
}

.gs-reviews__tab {
	background: none;
	border: none;
	padding: 0 0 0.7rem;
	cursor: pointer;
	font-family: var(--subheading-font-family);
	font-size: var(--subheading-font-size);
	letter-spacing: var(--subheading-letter-spacing);
	text-transform: uppercase;
	color: rgb(var(--text-color) / 0.5);
	position: relative;
}

.gs-reviews__tab.is-active {
	color: rgb(var(--text-color));
}

.gs-reviews__tab.is-active::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -1px;
	height: 1px;
	background: currentColor;
}

.gs-reviews__panel {
	display: grid;
	row-gap: 1.5rem;
}

.gs-reviews__panel[hidden] {
	display: none;
}

.gs-reviews__heading {
	margin: 0;
	font-size: var(--text-h5);
}

.gs-reviews__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.gs-reviews__score {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.gs-reviews__score-value {
	font-family: var(--heading-font-family);
	font-size: var(--text-h5);
	line-height: 1;
}

.gs-reviews__stars {
	display: inline-flex;
	gap: 2px;
}

.gs-reviews__bars {
	display: grid;
	row-gap: 0.4rem;
	max-width: 30rem;
}

.gs-reviews__bar {
	display: grid;
	grid-template-columns: 1rem minmax(0, 1fr) 2.5rem;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-xs);
}

.gs-reviews__bar-track {
	display: block;
	height: 6px;
	background: rgb(var(--border-color));
	overflow: hidden;
}

.gs-reviews__bar-fill {
	display: block;
	height: 100%;
	background: rgb(var(--text-color));
}

.gs-reviews__bar-count {
	text-align: end;
	opacity: 0.7;
}

.gs-reviews__toolbar {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: center;
}

.gs-reviews__search {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.6rem 0.9rem;
	border: 1px solid rgb(var(--border-color));
	background: rgb(var(--background));
	font-size: var(--text-sm);
}

.gs-reviews__sort {
	padding: 0.6rem 0.9rem;
	border: 1px solid rgb(var(--border-color));
	background: rgb(var(--background));
	font-size: var(--text-sm);
	cursor: pointer;
}

.gs-reviews__list {
	margin: 0;
	padding: 0;
	display: grid;
	row-gap: 0;
	list-style: none;
}

.gs-review {
	border-block-start: 1px solid rgb(var(--border-color));
	padding-block: 1.25rem;
	display: grid;
	row-gap: 0.6rem;
}

.gs-review[hidden] {
	display: none;
}

.gs-review__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.75rem;
}

.gs-review__avatar {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--rounded-full);
	background: rgb(var(--background-secondary, 241 240 243));
	display: grid;
	place-content: center;
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
}

.gs-review__ident {
	display: grid;
	row-gap: 0.15rem;
}

.gs-review__name {
	font-size: var(--text-sm);
	font-weight: var(--text-font-medium-weight);
}

.gs-review__stars {
	display: inline-flex;
	gap: 2px;
}

.gs-review__date {
	opacity: 0.6;
}

.gs-review__text {
	margin: 0;
	font-size: var(--text-sm);
}

.gs-review__flag {
	margin: 0;
	opacity: 0.6;
}

.gs-reviews__empty {
	margin: 0;
	opacity: 0.7;
}

.gs-qa__q {
	margin: 0;
	font-size: var(--text-sm);
	font-weight: var(--text-font-medium-weight);
}

.gs-qa__a {
	margin: 0;
	font-size: var(--text-sm);
	opacity: 0.8;
}

/* Review modal */
.gs-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 1.25rem;
	background: rgb(0 0 0 / 0.4);
}

.gs-modal[hidden] {
	display: none;
}

.gs-modal__panel {
	position: relative;
	background: rgb(var(--background));
	color: rgb(var(--text-color));
	width: min(34rem, 100%);
	max-height: 88vh;
	overflow-y: auto;
	padding: 2rem;
	display: grid;
	row-gap: 1rem;
}

.gs-modal__close {
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-end: 0.5rem;
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
}

.gs-modal__title {
	margin: 0;
	font-size: var(--text-h6);
}

.gs-modal__panel .comment-form-comment {
	display: grid;
	row-gap: 0.4rem;
	margin: 0 0 1rem;
	font-size: var(--text-sm);
}

.gs-modal__panel textarea,
.gs-modal__panel input[type="text"],
.gs-modal__panel input[type="email"],
.gs-modal__panel input[type="url"] {
	width: 100%;
	padding: 0.65rem 0.9rem;
	border: 1px solid rgb(var(--border-color));
	background: rgb(var(--input-background, 255 255 255));
	font-size: var(--text-sm);
}

.gs-modal__panel .form-submit {
	margin: 0;
}

.gs-modal__panel .logged-in-as,
.gs-modal__panel .comment-notes,
.gs-modal__panel .comment-form-cookies-consent {
	font-size: var(--text-xs);
	opacity: 0.75;
}

.gs-modal__panel .comment-form-rating {
	display: grid;
	row-gap: 0.35rem;
}


/* ==========================================================================
   16. PDP — related articles / products, sticky ATC
   ========================================================================== */

.gs-articles {
	display: grid;
	row-gap: 1.5rem;
	padding-inline: var(--container-gutter);
}

.gs-articles__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.gs-articles__heading {
	margin: 0;
	font-size: var(--text-h5);
}

.gs-articles__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}

@media screen and (min-width: 700px) {
	.gs-articles__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.gs-article {
	display: grid;
	row-gap: 0.75rem;
	align-content: start;
}

.gs-article__media img {
	width: 100%;
	aspect-ratio: 5 / 3;
	object-fit: cover;
}

.gs-article__title {
	margin: 0;
	font-size: var(--text-h7);
}

.gs-article__excerpt {
	margin: 0;
	font-size: var(--text-sm);
	opacity: 0.85;
}

.gs-related {
	display: grid;
	row-gap: 1.5rem;
}

.gs-related__heading {
	margin: 0;
	font-size: var(--text-h5);
	padding-inline: var(--container-gutter);
}

.gs-related product-list {
	padding-inline: 0;
}

.gs-sticky-atc {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 55;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.85rem;
	padding: 0.75rem var(--container-gutter);
	background: rgb(var(--background));
	color: rgb(var(--text-color));
	border-block-start: 1px solid rgb(var(--border-color));
	box-shadow: 0 -12px 30px -22px rgb(0 0 0 / 0.4);
	transform: translateY(101%);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.gs-sticky-atc[hidden] {
	display: none;
}

.gs-sticky-atc.is-visible {
	transform: none;
}

.gs-sticky-atc__media img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	background: rgb(var(--background-secondary, 241 240 243));
}

.gs-sticky-atc__info {
	display: grid;
	row-gap: 0.1rem;
	min-width: 0;
}

.gs-sticky-atc__title {
	font-size: var(--text-sm);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gs-sticky-atc__meta,
.gs-sticky-atc__price {
	font-size: var(--text-xs);
	opacity: 0.75;
}

.gs-sticky-atc__cta {
	flex: none;
}


/* ==========================================================================
   17. Footer
   ========================================================================== */

.trust-icons {
	border-block: 1px solid rgb(var(--border-color));
	padding-block: min(2.5rem, var(--section-vertical-spacing));
}

.trust-icons__inner {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	gap: 1.5rem;
	overflow-x: auto;
	padding-inline: var(--container-gutter);
	scroll-snap-type: x mandatory;
}

@media screen and (min-width: 700px) {
	.trust-icons__inner {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: repeat(var(--trust-icons-item-count, 4), minmax(0, 1fr));
		overflow: visible;
		gap: 2rem;
	}
}

.trust-icons__item {
	display: grid;
	row-gap: 0.6rem;
	justify-items: center;
	text-align: center;
	scroll-snap-align: start;
}

.trust-icons__item svg {
	width: 26px;
	height: 26px;
}

.trust-icons__item p {
	margin: 0;
	font-size: var(--text-xs);
	line-height: 1.5;
	max-width: 20rem;
}

.gs-footer__inner {
	padding: var(--section-vertical-spacing) var(--container-gutter) 2rem;
	display: grid;
	row-gap: 2.5rem;
}

.gs-footer__top {
	display: grid;
	gap: 2.5rem;
}

@media screen and (min-width: 1000px) {
	.gs-footer__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: 4rem;
	}
}

.gs-footer__heading {
	margin: 0 0 0.4rem;
	font-size: var(--text-h6);
}

.gs-footer__newsletter-text {
	margin: 0 0 1rem;
	font-size: var(--text-sm);
	opacity: 0.85;
}

.gs-footer__signup-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-block-end: 1px solid rgb(var(--text-color) / 0.6);
	padding-block-end: 0.4rem;
	max-width: 28rem;
}

.gs-footer__email-input {
	flex: 1;
	min-width: 0;
	background: none;
	border: none;
	outline: none;
	color: inherit;
	padding: 0.4rem 0;
	font-size: var(--text-sm);
}

.gs-footer__email-input::placeholder {
	color: rgb(var(--text-color) / 0.6);
}

.gs-footer__subscribe {
	--button-background: var(--button-background-primary);
	--button-text-color: var(--button-text-primary);
	flex: none;
}

.gs-footer__signup-message {
	margin: 0.75rem 0 0;
	font-size: var(--text-xs);
}

.gs-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 2rem 1.5rem;
}

.gs-footer__column-title {
	margin: 0 0 0.85rem;
	font-family: var(--subheading-font-family);
	font-size: var(--subheading-font-size);
	font-weight: 400;
	letter-spacing: var(--subheading-letter-spacing);
	text-transform: uppercase;
}

.gs-footer__linklist {
	margin: 0;
	padding: 0;
	display: grid;
	row-gap: 0.6rem;
	list-style: none;
	font-size: var(--text-sm);
}

.gs-footer__linklist a {
	display: inline-block;
	opacity: 0.9;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size 0.25s ease;
}

.gs-footer__linklist a:hover {
	background-size: 100% 1px;
}

.gs-footer__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid rgb(var(--border-color));
}

.gs-footer__country {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--text-sm);
	cursor: pointer;
}

.gs-footer__country img {
	width: 20px;
	height: 15px;
	object-fit: cover;
}

.gs-footer__country svg {
	width: 12px;
	height: 12px;
}

.gs-footer__copyright {
	margin: 0;
	font-size: var(--text-xs);
	opacity: 0.8;
}

.gs-footer__social {
	display: flex;
	gap: 0.5rem;
}

.gs-footer__social-link {
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-content: center;
	border-radius: var(--rounded-full);
	transition: background-color 0.2s ease;
}

.gs-footer__social-link:hover {
	background: rgb(var(--text-color) / 0.12);
}

.gs-footer__social-link svg {
	width: 18px;
	height: 18px;
}

.gs-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid rgb(var(--border-color));
}

.gs-footer__legal a {
	font-size: var(--text-xs);
	opacity: 0.75;
}

.gs-footer__legal a:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ==========================================================================
   18. Generic pages, archive, 404
   ========================================================================== */

.gs-page,
.gs-archive,
.gs-404 {
	max-width: 52rem;
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

.gs-page__hero img {
	width: 100%;
	height: auto;
	margin-block-end: 2rem;
}

.gs-page__title,
.gs-archive__title,
.gs-404__title {
	margin: 0 0 1rem;
	font-size: var(--text-h3);
}

.gs-page__meta {
	margin: 0 0 1.5rem;
	opacity: 0.7;
}

.gs-page__content {
	display: grid;
	row-gap: 1rem;
}

.gs-page__content img {
	width: 100%;
	height: auto;
}

.gs-archive {
	max-width: 76rem;
}

.gs-archive__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	margin-block-start: 2rem;
}

@media screen and (min-width: 700px) {
	.gs-archive__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.gs-archive__pagination {
	margin-block-start: 2.5rem;
	display: flex;
	justify-content: center;
}

.gs-archive__pagination .page-numbers {
	display: inline-grid;
	place-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: 0.4rem;
	margin-inline: 0.15rem;
	border: 1px solid rgb(var(--border-color));
	font-size: var(--text-sm);
}

.gs-archive__pagination .page-numbers.current {
	background: rgb(var(--button-background-primary));
	color: rgb(var(--button-text-primary));
	border-color: transparent;
}

.gs-404 {
	text-align: center;
	padding-block: min(6rem, 12vh);
}

.gs-404__text {
	margin: 0 0 1.5rem;
	opacity: 0.8;
}

/* Cart / checkout / account fall back to a plain shell. */
.gs-page-shell {
	padding: var(--section-vertical-spacing) var(--container-gutter);
}

.gs-page-shell__inner {
	max-width: 72rem;
	margin-inline: auto;
}

.gs-page-shell h1 {
	font-size: var(--text-h4);
	margin-block: 0 1.5rem;
}

.gs-page-shell .woocommerce-cart-form__contents,
.gs-page-shell .woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.gs-page-shell table th,
.gs-page-shell table td {
	padding: 0.75rem;
	border-block-end: 1px solid rgb(var(--border-color));
	text-align: start;
}

.gs-page-shell .button,
.gs-page-shell button.button {
	--button-background: var(--button-background-primary);
	--button-text-color: var(--button-text-primary);
	padding: 0.75rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--button-border-radius);
	cursor: pointer;
}

.gs-page-shell input.input-text,
.gs-page-shell select,
.gs-page-shell textarea {
	width: 100%;
	padding: 0.65rem 0.9rem;
	border: 1px solid rgb(var(--border-color));
	background: rgb(var(--input-background, 255 255 255));
	font-size: var(--text-sm);
}

.gs-page-shell .form-row {
	margin-block-end: 1rem;
}

.gs-page-shell label {
	display: block;
	margin-block-end: 0.35rem;
	font-size: var(--text-sm);
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: var(--text-sm);
}

.woocommerce-MyAccount-navigation a {
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ==========================================================================
   19. Small screens
   ========================================================================== */

@media screen and (max-width: 699px) {
	.header {
		padding-block: 0.65rem;
	}

	.header__logo-image {
		width: 34px;
	}

	.gs-slide__container {
		align-items: flex-end;
		padding-block-end: 3.5rem;
	}

	.slideshow--full {
		min-height: 78vh;
	}

	.gs-slide__box {
		max-width: none;
	}

	.gs-faq-chat__panel {
		padding: 1.15rem;
	}

	.gs-reviews__summary {
		align-items: flex-start;
	}

	.gs-sticky-atc {
		grid-template-columns: 40px minmax(0, 1fr) auto;
		gap: 0.6rem;
		padding-block: 0.6rem;
	}

	.gs-sticky-atc__media img {
		width: 40px;
		height: 40px;
	}

	.gs-footer__inner {
		padding-block-start: 2.5rem;
	}
}


/* ==========================================================================
   12. Colour alignment overrides
   --------------------------------------------------------------------------
   The Storefront parent theme prints a customizer stylesheet with its own
   defaults (accent purple #7f54b3, #333 headings, gray buttons). These rules
   re-assert the scheme-driven palette the design actually uses.
   ========================================================================== */

/* Headings inside any colour scheme always follow that scheme's text colour
   (specificity 0-1-1 beats the parent theme's bare element rules). */
.color-scheme :is(h1, h2, h3, h4, h5, h6) {
	color: rgb(var(--text-color));
}

/* Links never inherit the parent-theme accent. */
.gs-main a,
.gs-header-group a,
.gs-footer a,
#gs-section-trust-icons a {
	color: inherit;
}

/* Primary nav links use the theme sans stack (parent theme body font leaks). */
.header__primary-nav a.block {
	font-family: var(--text-font-family);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

/* Header icons inherit the header ink. */
.header .header__icon-link,
.header .header__icon-link svg {
	color: rgb(var(--text-color));
}

/* Footer newsletter controls: scheme-driven, not parent-theme grays. */
.gs-footer__subscribe {
	background: rgb(var(--button-background-primary));
	color: rgb(var(--button-text-primary));
	border: none;
}

.gs-footer__legal a {
	color: rgb(var(--text-color) / 0.85);
}

/* Drawer / mega menu links follow their scheme too. */
.gs-drawer :is(h1, h2, h3, h4, h5, h6),
.mega-menu :is(h1, h2, h3, h4, h5, h6) {
	color: rgb(var(--text-color));
}

/* -------------------------------------------------------------------------
   12.1 Storefront paints every bare <button> white (customizer CSS prints
   after the child stylesheet). Re-assert scheme ink on the theme's UI
   controls; scheme variables make dark-scheme controls stay white.
   ------------------------------------------------------------------------- */
:is(.tap-area,
	.gs-drawer__close,
	.gs-accordion__toggle,
	.circle-button,
	.gs-search-form__submit,
	.gs-faq-chat__submit,
	.gs-faq-chat__chip,
	.gs-question-box__chip,
	.quantity-selector__button,
	.header__icon-link,
	.gs-featured__tab,
	.gs-reviews__tab,
	.floating-size-selector__button) {
	color: rgb(var(--text-color));
}

/* Product-card "Add to Bag" is a text link in the source design. */
.prd_card_atc.link {
	color: rgb(var(--text-color));
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Footer email input: parent theme's input[type=email] rule (0,2,1... 0,1,1)
   beats a single class — re-assert with two. */
.gs-footer .gs-footer__email-input {
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	color: rgb(var(--text-color));
	padding: 0.4rem 0;
}

.gs-footer .gs-footer__email-input::placeholder {
	color: rgb(var(--text-color) / 0.6);
}

/* -------------------------------------------------------------------------
   12.2 Mega menu anchoring + duplicate mobile search
   ------------------------------------------------------------------------- */
/* The nav <li> is position:relative, which turned the absolutely-positioned
   mega panel's containing block into the 48px-wide li itself. Make the li
   static and anchor the panel to the header section instead. */
@media screen and (min-width: 1000px) {
	.header__primary-nav > ul > li {
		position: static;
	}

	.gs-section--header {
		position: relative;
	}
}

/* Full-bleed override becomes unnecessary once the panel anchors to the
   header section; keep it at inset-inline:0 so it cannot overflow. */
#gs-header-section .mega-menu {
	inset-inline: 0;
}

/* .header__search-link{display:grid} (0,1,0) silently beats .md\:hidden
   (0,1,0) because the component sheet loads after the utilities sheet. */
@media screen and (min-width: 700px) {
	.header__search-link.md\:hidden {
		display: none;
	}
}