/*
 * Athlete storefront components. Every value comes from tokens.css.
 * Class names: .st- prefix, BEM (.st-card__title, .st-btn--primary).
 * Sections: buttons · badges · forms · choices · header · nav · drawer/modal/lightbox ·
 * footer · breadcrumbs · price/rating · cards/grid · home blocks · listing · product ·
 * accordion/tabs · gallery · toasts · empty/skeleton · pagination · style guide.
 */

/* =========================================================================
   Buttons
   ========================================================================= */
.st-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--st-space-2);
	min-height: var(--st-control-height);
	padding: 0 var(--st-space-4);
	border: 1px solid transparent;
	border-radius: var(--st-radius-sm);
	background: transparent;
	color: var(--st-ink);
	font-size: var(--st-text-base);
	font-weight: var(--st-weight-semibold);
	line-height: var(--st-leading-ui);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--st-duration-fast) var(--st-ease), border-color var(--st-duration-fast) var(--st-ease), color var(--st-duration-fast) var(--st-ease);
}

.st .st-btn:hover {
	text-decoration: none;
}

.st-btn--primary {
	background: var(--st-primary);
	border-color: var(--st-primary-active);
	color: var(--st-on-primary);
}

.st .st-btn--primary:hover {
	background: var(--st-primary-hover);
	color: var(--st-on-primary);
}

.st-btn--primary:active {
	background: var(--st-primary-active);
}

.st-btn--secondary {
	background: var(--st-ink);
	border-color: var(--st-ink);
	color: var(--st-ink-inverse);
}

.st .st-btn--secondary:hover {
	background: var(--st-gray-700);
	border-color: var(--st-gray-700);
	color: var(--st-ink-inverse);
}

.st-btn--outline {
	border-color: var(--st-ink);
	color: var(--st-ink);
}

.st .st-btn--outline:hover {
	background: var(--st-surface-hover);
	color: var(--st-ink);
}

.st-btn--ghost {
	color: var(--st-ink);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	padding-inline: var(--st-space-2);
}

.st .st-btn--ghost:hover {
	background: var(--st-surface-hover);
	color: var(--st-ink);
}

.st-inverse .st-btn--outline {
	border-color: var(--st-ink-inverse);
	color: var(--st-ink-inverse);
}

.st .st-inverse .st-btn--outline:hover {
	background: var(--st-surface-inverse-raised);
	color: var(--st-ink-inverse);
}

.st-btn--sm {
	min-height: var(--st-control-height-sm);
	padding: 0 var(--st-space-3);
	font-size: var(--st-text-ui);
}

.st-btn--lg {
	min-height: 56px;
	padding: 0 var(--st-space-5);
	font-size: var(--st-text-md);
}

.st-btn--block {
	display: flex;
	width: 100%;
}

.st-btn:disabled,
.st-btn[aria-disabled="true"] {
	background: var(--st-surface-muted);
	border-color: var(--st-border);
	color: var(--st-ink-muted);
	cursor: not-allowed;
}

.st-btn[aria-busy="true"] {
	cursor: progress;
}

.st-btn[aria-busy="true"]::after {
	content: "";
	width: var(--st-icon-sm);
	height: var(--st-icon-sm);
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: var(--st-radius-round);
	animation: st-spin 700ms linear infinite;
}

@keyframes st-spin {
	to { transform: rotate(360deg); }
}

/* Icon-only button: 48px target, 24px icon */
.st-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--st-space-2);
	min-width: var(--st-control-height);
	height: var(--st-control-height);
	padding: 0 var(--st-space-2);
	border: 0;
	border-radius: var(--st-radius-sm);
	background: transparent;
	color: inherit;
	text-decoration: none;
	transition: background-color var(--st-duration-fast) var(--st-ease);
}

.st .st-icon-btn:hover {
	background: var(--st-surface-hover);
	color: inherit;
	text-decoration: none;
}

.st-inverse .st-icon-btn:hover,
.st .st-inverse .st-icon-btn:hover {
	background: var(--st-surface-inverse-raised);
}

.st-icon-btn__label {
	display: none;
	font-size: var(--st-text-ui);
	font-weight: var(--st-weight-medium);
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.st-icon-btn--labelled .st-icon-btn__label {
		display: inline;
	}
}

.st-count {
	position: absolute;
	top: var(--st-space-1);
	right: 0;
	min-width: 20px;
	height: 20px;
	padding: 0 var(--st-space-1);
	border-radius: 10px;
	background: var(--st-ink);
	color: var(--st-ink-inverse);
	font-size: var(--st-text-xs);
	font-weight: var(--st-weight-bold);
	line-height: 20px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Badges and chips
   ========================================================================= */
.st-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--st-space-1);
	padding: var(--st-space-1) var(--st-space-2);
	border-radius: var(--st-radius-sm);
	font-size: var(--st-text-xs);
	font-weight: var(--st-weight-semibold);
	letter-spacing: var(--st-tracking-caps);
	line-height: var(--st-leading-ui);
	text-transform: uppercase;
	white-space: nowrap;
}

.st-badge--ink { background: var(--st-ink); color: var(--st-ink-inverse); }
.st-badge--neutral { background: var(--st-surface); color: var(--st-ink); border: 1px solid var(--st-border-strong); }
.st-badge--sale { background: var(--st-danger-solid); color: var(--st-ink-inverse); }
.st-badge--success { background: var(--st-success-bg); color: var(--st-success-fg); }
.st-badge--warning { background: var(--st-warning-bg); color: var(--st-warning-fg); }
.st-badge--brand { background: var(--st-primary); color: var(--st-on-primary); }

.st-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--st-space-1);
	min-height: var(--st-control-height-sm);
	padding: 0 var(--st-space-2) 0 var(--st-space-3);
	border: 1px solid var(--st-border-control);
	border-radius: var(--st-radius-sm);
	background: var(--st-surface);
	color: var(--st-ink);
	font-size: var(--st-text-ui);
	font-weight: var(--st-weight-medium);
	text-decoration: none;
}

.st .st-chip:hover {
	background: var(--st-surface-hover);
	color: var(--st-ink);
	text-decoration: none;
}

.st-chip .st-icon {
	width: var(--st-icon-sm);
	height: var(--st-icon-sm);
}

/* =========================================================================
   Forms
   ========================================================================= */
.st-field {
	display: flex;
	flex-direction: column;
	gap: var(--st-space-2);
	margin-bottom: var(--st-space-4);
}

.st-label {
	font-size: var(--st-text-ui);
	font-weight: var(--st-weight-semibold);
	line-height: var(--st-leading-ui);
	color: var(--st-ink);
}

.st-required {
	color: var(--st-danger-fg);
}

.st-input {
	width: 100%;
	min-height: var(--st-control-height);
	padding: 0 var(--st-space-3);
	border: 1px solid var(--st-border-control);
	border-radius: var(--st-radius-sm);
	background: var(--st-surface);
	color: var(--st-ink);
	font-size: var(--st-text-base); /* 16px: no iOS zoom on focus */
	line-height: var(--st-leading-ui);
	transition: border-color var(--st-duration-fast) var(--st-ease), box-shadow var(--st-duration-fast) var(--st-ease);
}

.st-input::placeholder {
	color: var(--st-ink-subtle);
}

.st-input:hover {
	border-color: var(--st-ink-muted);
}

.st .st-input:focus-visible,
.st .st-input:focus {
	outline: var(--st-focus-width) solid var(--st-focus-color);
	outline-offset: 0;
	box-shadow: 0 0 0 5px var(--st-focus-halo);
	border-radius: var(--st-radius-sm);
}

.st-input--textarea {
	min-height: 128px;
	padding: var(--st-space-2) var(--st-space-3);
	line-height: var(--st-leading-body);
	resize: vertical;
}

.st-select {
	appearance: none;
	padding-right: var(--st-space-6);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1917' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--st-space-3) center;
	background-size: var(--st-icon-sm);
	cursor: pointer;
}

.st-input[aria-invalid="true"] {
	border-color: var(--st-danger-solid);
}

.st-help {
	margin: 0;
	font-size: var(--st-text-sm);
	line-height: var(--st-leading-ui);
	color: var(--st-ink-muted);
}

.st-error {
	display: flex;
	align-items: flex-start;
	gap: var(--st-space-1);
	margin: 0;
	font-size: var(--st-text-sm);
	font-weight: var(--st-weight-medium);
	line-height: var(--st-leading-ui);
	color: var(--st-danger-fg);
}

.st-error .st-icon {
	margin-top: 1px;
}

.st-field--check {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--st-space-2);
	flex-wrap: wrap;
}

.st-field--check .st-help,
.st-field--check .st-error {
	flex-basis: 100%;
	padding-left: var(--st-space-5);
}

.st-check {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--st-ink);
	cursor: pointer;
}

.st-check__label {
	font-size: var(--st-text-base);
	line-height: var(--st-leading-ui);
	cursor: pointer;
}

.st-inline-form {
	display: flex;
	gap: var(--st-space-2);
}

.st-inline-form .st-input {
	flex: 1 1 auto;
	min-width: 0;
}

/* =========================================================================
   Choices: size pills, colour swatches, quantity
   ========================================================================= */
.st-choice {
	min-width: 0;
	margin: 0 0 var(--st-space-4);
	padding: 0;
	border: 0;
}

.st-choice__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--st-space-3);
	margin-bottom: var(--st-space-2);
}

.st-choice__legend {
	float: left; /* lets the legend sit in a flex row */
	padding: 0;
	font-size: var(--st-text-ui);
	font-weight: var(--st-weight-semibold);
	line-height: var(--st-leading-ui);
}

.st-choice__legend + * {
	margin-left: auto;
}

.st-choice__value {
	font-weight: var(--st-weight-regular);
	color: var(--st-ink-muted);
}

.st-choice__note {
	margin: var(--st-space-2) 0 0;
	font-size: var(--st-text-sm);
	color: var(--st-ink-muted);
}

.st-sizes {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-space-2);
}

.st-size {
	position: relative;
	display: inline-flex;
}

.st-size__input,
.st-swatch__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.st-size__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	height: var(--st-control-height);
	padding: 0 var(--st-space-3);
	border: 1px solid var(--st-border-control);
	border-radius: var(--st-radius-sm);
	background: var(--st-surface);
	font-size: var(--st-text-ui);
	font-weight: var(--st-weight-semibold);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background-color var(--st-duration-fast) var(--st-ease), border-color var(--st-duration-fast) var(--st-ease);
}

.st-size__input:not(:disabled) + .st-size__label:hover {
	border-color: var(--st-ink);
}

.st-size__input:checked + .st-size__label {
	border-color: var(--st-ink);
	background: var(--st-ink);
	color: var(--st-ink-inverse);
}

.st-size__input:focus-visible + .st-size__label {
	outline: var(--st-focus-width) solid var(--st-focus-color);
	outline-offset: var(--st-focus-offset);
}

.st-size__input:disabled + .st-size__label {
	border-color: var(--st-border);
	background: linear-gradient(to top left, transparent calc(50% - 0.5px), var(--st-border-strong) 50%, transparent calc(50% + 0.5px)) var(--st-surface-warm);
	color: var(--st-ink-muted);
	cursor: not-allowed;
	text-decoration: line-through;
}

.st-swatches {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-space-2);
}

.st-swatch {
	position: relative;
	display: inline-flex;
	padding: var(--st-space-1);
	border: 1px solid transparent;
	border-radius: var(--st-radius-round);
	cursor: pointer;
}

.st-swatch__chip {
	display: block;
	width: var(--st-swatch);
	height: var(--st-swatch);
	border-radius: var(--st-radius-round);
	background: var(--st-swatch-color, var(--st-gray-300));
	box-shadow: inset 0 0 0 1px rgba(28, 25, 23, 0.24); /* keeps white and cream swatches visible */
}

.st-swatch__chip--sold {
	background-image: linear-gradient(to top left, transparent calc(50% - 1px), var(--st-gray-0) 50%, transparent calc(50% + 1px));
	opacity: 0.6;
}

.st-swatch:hover {
	border-color: var(--st-border-control);
}

.st-swatch:has(.st-swatch__input:checked) {
	border: 2px solid var(--st-ink);
	padding: 3px; /* optical: keeps the chip still when the ring thickens (1px border + 4px = 2px + 3px) */
}

.st-swatch:has(.st-swatch__input:focus-visible) {
	outline: var(--st-focus-width) solid var(--st-focus-color);
	outline-offset: var(--st-focus-offset);
}

.st-qty {
	display: inline-flex;
	align-items: stretch;
	height: var(--st-control-height);
	border: 1px solid var(--st-border-control);
	border-radius: var(--st-radius-sm);
	background: var(--st-surface);
}

.st-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--st-control-height);
	border: 0;
	background: transparent;
	color: var(--st-ink);
}

.st-qty__btn:hover:not(:disabled) {
	background: var(--st-surface-hover);
}

.st-qty__btn:disabled {
	color: var(--st-ink-disabled);
	cursor: not-allowed;
}

.st-qty__input {
	width: var(--st-control-height);
	border: 0;
	border-inline: 1px solid var(--st-border);
	background: transparent;
	font-size: var(--st-text-base);
	font-weight: var(--st-weight-semibold);
	font-variant-numeric: tabular-nums;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

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

.st .st-qty__input:focus-visible {
	outline-offset: -2px;
}

/* =========================================================================
   Announcement bar and header
   ========================================================================= */
.st-announce {
	background: var(--st-announce-bg, var(--st-surface-inverse));
	color: var(--st-announce-fg, var(--st-ink-inverse));
}

.st-announce__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--st-space-2);
	min-height: 40px;
	padding-block: var(--st-space-2);
}

.st-announce__text {
	margin: 0;
	font-size: var(--st-text-ui);
	font-weight: var(--st-weight-medium);
	line-height: var(--st-leading-ui);
	text-align: center;
}

.st-header {
	position: sticky;
	top: 0;
	z-index: var(--st-z-header);
	background: var(--st-surface);
	border-bottom: 1px solid var(--st-border);
}

.st-header__bar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"menu logo tools"
		"search search search";
	align-items: center;
	column-gap: var(--st-space-1);
	min-height: var(--st-header-height);
}

.st-header__menu { grid-area: menu; margin-left: calc(-1 * var(--st-space-2)); }
.st-header__logo { grid-area: logo; }
.st-header__search { grid-area: search; padding-bottom: var(--st-space-2); }
.st-header__tools { grid-area: tools; }

.st-header__logo {
	display: inline-flex;
	justify-self: start;
	padding: var(--st-space-2) 0;
}

.st-header__logo img {
	width: 128px;
	height: auto;
}

.st-header__tools {
	display: flex;
	align-items: center;
	margin: 0 calc(-1 * var(--st-space-2)) 0 0;
	padding: 0;
	list-style: none;
}

.st-header__account .st-icon-btn--labelled .st-icon-btn__label {
	max-width: 12ch;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 479.98px) {
	.st-header__account {
		display: none; /* account is in the menu on small phones; keeps the bar uncluttered */
	}
}

@media (min-width: 1024px) {
	.st-header__bar {
		grid-template-columns: auto minmax(0, 560px) auto;
		grid-template-areas: "logo search tools";
		justify-content: space-between;
		column-gap: var(--st-space-5);
		min-height: 80px;
	}

	.st-header__menu {
		display: none;
	}

	.st-header__logo img {
		width: 168px;
	}

	.st-header__search {
		padding-bottom: 0;
	}
}

/* Search */
.st-search {
	position: relative;
	display: flex;
}

.st-search__input {
	width: 100%;
	min-height: 44px;
	padding: 0 var(--st-space-6) 0 var(--st-space-3);
	border: 1px solid var(--st-border-control);
	border-radius: var(--st-radius-sm);
	background: var(--st-surface-warm);
	color: var(--st-ink);
	font-size: var(--st-text-base);
	-webkit-appearance: none;
	appearance: none;
}

.st-search__input::placeholder {
	color: var(--st-ink-subtle);
}

.st .st-search__input:focus {
	background: var(--st-surface);
	outline: var(--st-focus-width) solid var(--st-focus-color);
	outline-offset: 0;
	box-shadow: 0 0 0 5px var(--st-focus-halo);
}

.st-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.st-search__submit {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 0 var(--st-radius-sm) var(--st-radius-sm) 0;
	background: transparent;
	color: var(--st-ink);
}

.st-search__submit:hover {
	background: var(--st-surface-hover);
}

/* Disclosure menu (account) */
.st-disclosure {
	position: relative;
}

.st-menu {
	position: absolute;
	top: calc(100% + var(--st-space-1));
	right: 0;
	z-index: var(--st-z-dropdown);
	min-width: 200px;
	margin: 0;
	padding: var(--st-space-2) 0;
	list-style: none;
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-md);
	background: var(--st-surface);
	box-shadow: var(--st-shadow-overlay);
}

.st-menu__link {
	display: block;
	padding: var(--st-space-2) var(--st-space-3);
	color: var(--st-ink);
	font-size: var(--st-text-ui);
	text-decoration: none;
}

.st .st-menu__link:hover {
	background: var(--st-surface-hover);
	text-decoration: none;
}

/* =========================================================================
   Primary navigation and mega menu (desktop, 1024+)
   ========================================================================= */
.st-nav {
	display: none;
	border-top: 1px solid var(--st-border);
}

@media (min-width: 1024px) {
	.st-nav {
		display: block;
	}
}

.st-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--st-space-4);
}

.st-nav__list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 0 calc(-1 * var(--st-space-3));
	padding: 0;
	list-style: none;
}

.st-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--st-space-1);
	height: var(--st-control-height);
	padding: 0 var(--st-space-3);
	border: 0;
	background: transparent;
	color: var(--st-ink);
	font-size: var(--st-text-ui);
	font-weight: var(--st-weight-semibold);
	text-decoration: none;
}

.st .st-nav__link:hover {
	color: var(--st-ink);
	text-decoration: none;
}

.st-nav__link::after {
	content: "";
	position: absolute;
	left: var(--st-space-3);
	right: var(--st-space-3);
	bottom: 0;
	height: 3px;
	background: transparent;
	transition: background-color var(--st-duration-fast) var(--st-ease);
}

.st-nav__link:hover::after,
.st-nav__link[aria-current="page"]::after,
.st-nav__link[data-current]::after,
.st-nav__trigger[aria-expanded="true"]::after {
	background: var(--st-ink);
}

.st-nav__trigger .st-icon {
	transition: transform var(--st-duration-fast) var(--st-ease);
}

.st-nav__trigger[aria-expanded="true"] .st-icon {
	transform: rotate(180deg);
}

.st-nav__since {
	margin: 0;
	font-size: var(--st-text-xs);
	font-weight: var(--st-weight-semibold);
	letter-spacing: var(--st-tracking-caps);
	text-transform: uppercase;
	color: var(--st-ink-muted);
}

.st-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: var(--st-z-dropdown);
	border-top: 1px solid var(--st-border);
	border-bottom: 1px solid var(--st-border);
	background: var(--st-surface);
	box-shadow: var(--st-shadow-overlay);
}

.st-mega__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--st-space-6);
	padding-block: var(--st-space-5) var(--st-space-6);
}

.st-mega__groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: start;
	gap: var(--st-space-4) var(--st-space-5);
}

.st-mega__heading {
	display: inline-block;
	margin-bottom: var(--st-space-2);
	color: var(--st-ink);
	font-size: var(--st-text-base);
	font-weight: var(--st-weight-bold);
	text-decoration: none;
}

.st-mega__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-mega__link {
	display: inline-block;
	padding: var(--st-space-1) 0;
	color: var(--st-ink-muted);
	font-size: var(--st-text-ui);
	text-decoration: none;
}

.st .st-mega__link:hover,
.st .st-mega__heading:hover,
.st-mega__link[aria-current="page"] {
	color: var(--st-ink);
	text-decoration: underline;
}

.st-mega__all {
	grid-column: 1 / -1;
	justify-self: start;
}

.st-mega__tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--st-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-mega__tile {
	display: block;
	color: var(--st-ink);
	font-size: var(--st-text-ui);
	font-weight: var(--st-weight-semibold);
	text-decoration: none;
}

.st-mega__tile img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	margin-bottom: var(--st-space-2);
	border-radius: var(--st-radius-md);
	background: var(--st-surface-muted);
}

.st .st-mega__tile:hover {
	text-decoration: underline;
}

/* =========================================================================
   Drawers, modals and lightbox (native <dialog>)
   ========================================================================= */
.st-drawer,
.st-modal,
.st-lightbox {
	padding: 0;
	border: 0;
	color: var(--st-ink);
	background: var(--st-surface);
}

.st-drawer::backdrop,
.st-modal::backdrop {
	/* ::backdrop does not inherit custom properties in every supported browser:
	   literal copy of --st-backdrop (the one raw colour outside tokens.css). */
	background: rgba(28, 25, 23, 0.56);
}

.st-drawer {
	position: fixed;
	inset: 0 auto 0 0;
	width: min(400px, 88vw);
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.st-drawer:not([open]) {
	display: none;
}

.st-drawer--end {
	inset: 0 0 0 auto;
}

.st-drawer[open] {
	animation: st-drawer-in var(--st-duration-panel) var(--st-ease);
}

.st-drawer--end[open] {
	animation-name: st-drawer-in-end;
}

@keyframes st-drawer-in { from { transform: translateX(-100%); } }
@keyframes st-drawer-in-end { from { transform: translateX(100%); } }

.st-drawer__header,
.st-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--st-space-3);
	padding: var(--st-space-2) var(--st-space-2) var(--st-space-2) var(--st-space-4);
	border-bottom: 1px solid var(--st-border);
}

.st-drawer__title,
.st-modal__title {
	margin: 0;
	font-size: var(--st-text-md);
	line-height: var(--st-leading-snug);
}

.st-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--st-space-2) 0 var(--st-space-5);
}

.st-drawer__footer {
	display: flex;
	gap: var(--st-space-2);
	padding: var(--st-space-3) var(--st-space-4);
	border-top: 1px solid var(--st-border);
	background: var(--st-surface);
}

.st-drawer__footer > * {
	flex: 1 1 0;
}

.st-drawer__note {
	margin: var(--st-space-4) var(--st-space-4) 0;
	font-size: var(--st-text-sm);
	color: var(--st-ink-muted);
}

/* Mobile navigation list (inside the drawer) */
.st-mnav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-mnav--secondary {
	margin-top: var(--st-space-2);
	padding-top: var(--st-space-2);
	border-top: 1px solid var(--st-border);
}

.st-mnav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--st-space-2);
	min-height: var(--st-control-height);
	padding: 0 var(--st-space-4);
	color: var(--st-ink);
	font-size: var(--st-text-base);
	font-weight: var(--st-weight-semibold);
	text-decoration: none;
	cursor: pointer;
	list-style: none;
}

.st-mnav--secondary .st-mnav__link {
	justify-content: flex-start;
	font-weight: var(--st-weight-regular);
}

.st-mnav__link::-webkit-details-marker {
	display: none;
}

.st .st-mnav__link:hover {
	background: var(--st-surface-hover);
	text-decoration: none;
}

.st-mnav__link[aria-current="page"] {
	box-shadow: inset 4px 0 0 var(--st-primary);
	background: var(--st-surface-selected);
}

.st-mnav__details[open] > summary .st-icon {
	transform: rotate(180deg);
}

.st-mnav__panel {
	padding: 0 var(--st-space-4) var(--st-space-3);
}

.st-mnav__all {
	display: block;
	padding: var(--st-space-2) 0;
	font-weight: var(--st-weight-semibold);
}

.st-mnav__group {
	padding: var(--st-space-2) 0;
	border-top: 1px solid var(--st-border);
}

.st-mnav__heading {
	display: block;
	padding: var(--st-space-1) 0;
	color: var(--st-ink);
	font-weight: var(--st-weight-semibold);
	text-decoration: none;
}

.st-mnav__sub {
	margin: 0;
	padding: 0 0 0 var(--st-space-3);
	list-style: none;
}

.st-mnav__sub a {
	display: block;
	padding: var(--st-space-2) 0;
	color: var(--st-ink-muted);
	text-decoration: none;
}

.st-mnav__sub a[aria-current="page"] {
	color: var(--st-ink);
	font-weight: var(--st-weight-semibold);
}

/* Modal */
.st-modal {
	width: min(560px, calc(100vw - 2 * var(--st-space-3)));
	max-height: calc(100vh - 2 * var(--st-space-5));
	border-radius: var(--st-radius-md);
	box-shadow: var(--st-shadow-overlay);
}

.st-modal--lg {
	width: min(880px, calc(100vw - 2 * var(--st-space-3)));
}

.st-modal[open] {
	display: flex;
	flex-direction: column;
	animation: st-fade-up var(--st-duration-panel) var(--st-ease);
}

@keyframes st-fade-up {
	from { opacity: 0; transform: translateY(var(--st-space-3)); }
}

.st-modal__body {
	overflow-y: auto;
	padding: var(--st-space-4);
}

.st-modal__footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--st-space-2);
	padding: var(--st-space-3) var(--st-space-4);
	border-top: 1px solid var(--st-border);
}

@media (max-width: 767.98px) {
	.st-modal {
		width: 100vw;
		max-width: 100vw;
		max-height: 92vh;
		margin: auto 0 0;
		border-radius: var(--st-radius-md) var(--st-radius-md) 0 0;
	}
}

/* Tables inside modals and prose (size charts come from the admin as HTML tables) */
.st-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.st-modal__body table,
.st-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--st-text-ui);
	font-variant-numeric: tabular-nums;
}

.st-modal__body th,
.st-modal__body td,
.st-table th,
.st-table td {
	padding: var(--st-space-2) var(--st-space-3);
	border-bottom: 1px solid var(--st-border);
	text-align: left;
	white-space: nowrap;
}

.st-modal__body tr:first-child td,
.st-modal__body th,
.st-table th {
	background: var(--st-surface-muted);
	font-weight: var(--st-weight-semibold);
}

.st-modal__body img {
	height: auto;
}

/* Lightbox */
.st-lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	background: var(--st-gray-50);
}

.st-lightbox[open] {
	display: grid;
	grid-template-rows: auto 1fr;
}

.st-lightbox::backdrop {
	background: #fafaf9; /* --st-gray-50, literal for the same reason */
}

.st-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--st-space-2) var(--st-space-2) var(--st-space-2) var(--st-space-4);
}

.st-lightbox__count {
	margin: 0;
	font-size: var(--st-text-ui);
	font-variant-numeric: tabular-nums;
	color: var(--st-ink-muted);
}

.st-lightbox__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	margin: 0;
	padding: 0 var(--st-space-3) var(--st-space-3);
}

.st-lightbox__figure img {
	width: auto;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
}

.st-lightbox__nav {
	position: fixed;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--st-control-height);
	height: var(--st-control-height);
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-round);
	background: var(--st-surface);
	color: var(--st-ink);
	transform: translateY(-50%);
}

.st-lightbox__nav:hover {
	background: var(--st-surface-hover);
}

.st-lightbox__nav--prev { left: var(--st-space-3); }
.st-lightbox__nav--next { right: var(--st-space-3); }

/* =========================================================================
   Footer
   ========================================================================= */
.st-footer {
	margin-top: auto;
	padding-block: var(--st-space-6) var(--st-space-5);
	background: var(--st-surface-inverse);
	color: var(--st-ink-inverse-muted);
	font-size: var(--st-text-ui);
}

.st-footer a {
	color: var(--st-ink-inverse);
	text-decoration: none;
}

.st .st-footer a:hover {
	color: var(--st-ink-inverse);
	text-decoration: underline;
}

.st-footer__heading {
	margin: 0 0 var(--st-space-3);
	font-size: var(--st-text-xs);
	font-weight: var(--st-weight-semibold);
	letter-spacing: var(--st-tracking-caps);
	text-transform: uppercase;
	color: var(--st-ink-inverse-muted);
}

.st-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-footer__popular {
	padding-bottom: var(--st-space-5);
	margin-bottom: var(--st-space-5);
	border-bottom: 1px solid var(--st-border-inverse);
}

.st-footer__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-space-2);
}

.st-footer__chips a {
	display: inline-flex;
	align-items: center;
	min-height: var(--st-control-height-sm);
	padding: 0 var(--st-space-3);
	border: 1px solid var(--st-border-inverse);
	border-radius: var(--st-radius-sm);
}

.st .st-footer__chips a:hover {
	background: var(--st-surface-inverse-raised);
	text-decoration: none;
}

.st-footer__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--st-space-5) var(--st-space-4);
}

.st-footer__brand {
	grid-column: 1 / -1;
}

.st-footer__logo img {
	width: 144px;
	filter: invert(1);
}

.st-footer__tagline {
	max-width: 36ch;
	margin: var(--st-space-3) 0;
	line-height: var(--st-leading-body);
}

.st-footer .st-footer__social {
	display: flex;
	gap: var(--st-space-1);
	margin-left: calc(-1 * var(--st-space-2));
}

.st-footer__col li a {
	display: inline-block;
	padding: var(--st-space-1) 0;
}

.st-footer__contact li {
	overflow-wrap: anywhere;
	display: flex;
	align-items: flex-start;
	gap: var(--st-space-2);
	margin-bottom: var(--st-space-2);
}

.st-footer__contact .st-icon {
	margin-top: var(--st-space-1);
}

.st-footer__contact address {
	font-style: normal;
	line-height: var(--st-leading-body);
}

.st-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--st-space-3);
	margin-top: var(--st-space-6);
	padding-top: var(--st-space-4);
	border-top: 1px solid var(--st-border-inverse);
}

.st-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-space-1) var(--st-space-3);
	margin: 0;
	font-size: var(--st-text-sm);
}

.st-footer__pay {
	padding: var(--st-space-1) var(--st-space-2);
	border-radius: var(--st-radius-sm);
	background: var(--st-gray-0);
}

@media (min-width: 768px) {
	.st-footer__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.st-footer {
		padding-block: var(--st-space-7) var(--st-space-5);
	}

	.st-footer__grid {
		grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
	}

	.st-footer__brand {
		grid-column: auto;
	}
}

/* =========================================================================
   Breadcrumbs
   ========================================================================= */
.st-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: var(--st-space-3) 0;
	list-style: none;
	font-size: var(--st-text-sm);
	line-height: var(--st-leading-ui);
	color: var(--st-ink-muted);
}

.st-breadcrumbs li + li::before {
	content: "/";
	margin: 0 var(--st-space-2);
	color: var(--st-ink-subtle);
}

.st-breadcrumbs a {
	color: var(--st-ink-muted);
	text-decoration: none;
}

.st .st-breadcrumbs a:hover {
	color: var(--st-ink);
	text-decoration: underline;
}

.st-breadcrumbs [aria-current="page"] {
	color: var(--st-ink);
	font-weight: var(--st-weight-medium);
}

/* =========================================================================
   Price and rating
   ========================================================================= */
.st-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--st-space-2);
	margin: 0;
	font-variant-numeric: tabular-nums;
	line-height: var(--st-leading-ui);
}

.st-price__now {
	font-size: var(--st-text-base);
	font-weight: var(--st-weight-bold);
	color: var(--st-ink);
}

.st-price__was {
	font-size: var(--st-text-ui);
	color: var(--st-ink-subtle); /* 4.8:1 */
}

.st-price__off {
	font-size: var(--st-text-ui);
	font-weight: var(--st-weight-semibold);
	color: var(--st-success-fg); /* 7.1:1 */
}

.st-price__tax {
	flex-basis: 100%;
	margin-top: var(--st-space-1);
	font-size: var(--st-text-sm);
	color: var(--st-ink-muted);
}

.st-price--lg .st-price__now {
	font-size: var(--st-text-xl);
}

.st-price--lg .st-price__was,
.st-price--lg .st-price__off {
	font-size: var(--st-text-md);
}

.st-rating {
	display: inline-flex;
	align-items: center;
	gap: var(--st-space-1);
	font-size: var(--st-text-sm);
	color: var(--st-ink-muted);
	font-variant-numeric: tabular-nums;
}

.st-rating__stars {
	position: relative;
	display: inline-flex;
	color: var(--st-rating);
}

.st-rating__base,
.st-rating__fill {
	display: inline-flex;
	gap: 2px;
}

.st-rating__base .st-icon {
	stroke-width: 1.5;
}

.st-rating__fill {
	position: absolute;
	inset: 0;
	overflow: hidden;
	width: var(--st-rating-fill, 0%);
	white-space: nowrap;
}

.st-rating .st-icon {
	width: 14px;
	height: 14px;
}

.st-rating--md .st-icon {
	width: 20px;
	height: 20px;
}

.st-rating__value {
	font-weight: var(--st-weight-semibold);
	color: var(--st-ink);
}

/* =========================================================================
   Product card and grid
   ========================================================================= */
.st-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--st-space-5) var(--st-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.st-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--st-space-6) var(--st-space-4);
	}
}

@media (min-width: 1024px) {
	.st-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.st-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.st-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.st-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: var(--st-radius-md);
	background: var(--st-surface-muted);
}

.st-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity var(--st-duration-panel) var(--st-ease), transform 600ms var(--st-ease);
}

.st-card__img--alt {
	opacity: 0;
}

@media (hover: hover) {
	.st-card:hover .st-card__img--alt {
		opacity: 1;
	}

	.st-card:hover .st-card__img:only-child {
		transform: scale(1.03);
	}
}

.st-card--sold .st-card__img {
	opacity: 0.72;
}

.st-card__badges {
	position: absolute;
	top: var(--st-space-2);
	left: var(--st-space-2);
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--st-space-1);
	padding-top: var(--st-space-3);
}

.st-card__title {
	margin: 0;
	font-size: var(--st-text-ui);
	font-weight: var(--st-weight-medium);
	line-height: var(--st-leading-ui);
}

@media (min-width: 768px) {
	.st-card__title {
		font-size: var(--st-text-base);
	}
}

.st-card__link {
	color: var(--st-ink);
	text-decoration: none;
}

.st .st-card__link:hover {
	text-decoration: underline;
}

/* Whole card clickable through the title link */
.st-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--st-z-raised);
}

.st .st-card__link:focus-visible {
	outline: none;
}

.st .st-card__link:focus-visible::after {
	outline: var(--st-focus-width) solid var(--st-focus-color);
	outline-offset: var(--st-focus-offset);
	border-radius: var(--st-radius-md);
}

.st-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--st-space-1) var(--st-space-3);
	font-size: var(--st-text-sm);
	color: var(--st-ink-muted);
}

.st-card__colours {
	display: inline-flex;
	align-items: center;
	gap: var(--st-space-2);
}

.st-card__dots {
	display: inline-flex;
}

.st-dot {
	width: 12px;
	height: 12px;
	margin-right: -4px;
	border-radius: var(--st-radius-round);
	background: var(--st-dot);
	box-shadow: 0 0 0 1px var(--st-gray-0), inset 0 0 0 1px rgba(28, 25, 23, 0.24);
}

.st-dot:last-child {
	margin-right: 0;
}

/* Wishlist heart */
.st-wish {
	position: absolute;
	top: var(--st-space-1);
	right: var(--st-space-1);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--st-radius-round);
	background: transparent;
	color: var(--st-ink);
}

.st-wish::before {
	content: "";
	position: absolute;
	inset: var(--st-space-1);
	border-radius: var(--st-radius-round);
	background: rgba(255, 255, 255, 0.88);
	transition: background-color var(--st-duration-fast) var(--st-ease);
}

.st-wish:hover::before {
	background: var(--st-gray-0);
}

.st-wish .st-icon {
	position: relative;
	width: 20px;
	height: 20px;
}

.st-wish[aria-pressed="true"] .st-icon {
	fill: currentColor;
}

.st-wish--inline {
	position: static;
	width: var(--st-control-height);
	height: var(--st-control-height);
	border: 1px solid var(--st-border-control);
	border-radius: var(--st-radius-sm);
}

.st-wish--inline::before {
	display: none;
}

.st-wish--inline:hover {
	background: var(--st-surface-hover);
}

/* Horizontal scroller (related products, categories on phones) */
.st-scroller {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(64%, 1fr);
	gap: var(--st-space-3);
	margin: 0 calc(-1 * var(--st-gutter));
	padding: 0 var(--st-gutter) var(--st-space-2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--st-gutter);
	list-style: none;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.st-scroller > * {
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	.st-scroller {
		grid-auto-columns: minmax(30%, 1fr);
	}
}

@media (min-width: 1024px) {
	.st-scroller {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--st-space-6) var(--st-space-4);
		margin: 0;
		padding: 0;
		overflow: visible;
	}
}

/* =========================================================================
   Section heading
   ========================================================================= */
.st-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--st-space-3);
	margin-bottom: var(--st-space-5);
}

.st-section-head__title {
	margin: 0;
}

.st-section-head__text {
	max-width: var(--st-measure);
	margin: var(--st-space-2) 0 0;
	color: var(--st-ink-muted);
}

.st-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--st-space-2);
	min-height: var(--st-control-height-sm);
	font-weight: var(--st-weight-semibold);
}

/* =========================================================================
   Home blocks
   ========================================================================= */
.st-hero {
	background: var(--st-surface-warm);
	border-bottom: 1px solid var(--st-border);
}

.st-hero__inner {
	display: grid;
	gap: var(--st-space-5);
	padding-block: 0 var(--st-space-6);
}

.st-hero__media {
	order: -1;
	margin: 0 calc(-1 * var(--st-gutter));
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--st-surface-muted);
}

.st-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

.st-hero__title {
	margin: 0 0 var(--st-space-3);
	font-size: var(--st-text-2xl);
	line-height: var(--st-leading-tight);
	letter-spacing: var(--st-tracking-tight);
}

.st-hero__text {
	max-width: 46ch;
	margin: 0 0 var(--st-space-4);
	font-size: var(--st-text-md);
	color: var(--st-ink-muted);
}

.st-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-space-2);
}

.st-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-space-2) var(--st-space-4);
	margin: var(--st-space-5) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--st-text-ui);
	font-weight: var(--st-weight-medium);
}

.st-hero__facts li {
	display: inline-flex;
	align-items: center;
	gap: var(--st-space-2);
}

@media (min-width: 768px) {
	.st-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--st-space-6);
		padding-block: var(--st-space-6);
	}

	.st-hero__media {
		order: 0;
		margin: 0;
		aspect-ratio: 4 / 5;
		border-radius: var(--st-radius-md);
	}
}

@media (min-width: 1024px) {
	.st-hero__inner {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		gap: var(--st-space-8);
		padding-block: var(--st-space-7);
	}

	.st-hero__title {
		font-size: var(--st-text-4xl);
		line-height: var(--st-leading-display);
	}

	.st-hero__media {
		aspect-ratio: auto;
		height: min(600px, calc(100vh - 240px));
		min-height: 440px;
	}
}

/* Category tiles */
.st-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--st-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.st-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--st-space-4);
	}
}

.st-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--st-radius-md);
	background: var(--st-surface-muted);
	color: var(--st-ink);
	text-decoration: none;
}

.st-tile img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform 600ms var(--st-ease);
}

.st .st-tile:hover {
	color: var(--st-ink);
	text-decoration: none;
}

@media (hover: hover) {
	.st-tile:hover img {
		transform: scale(1.04);
	}
}

.st-tile__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--st-space-2);
	padding: var(--st-space-3);
	background: var(--st-surface);
	border: 1px solid var(--st-border);
	border-top: 0;
	border-radius: 0 0 var(--st-radius-md) var(--st-radius-md);
	font-weight: var(--st-weight-semibold);
	line-height: var(--st-leading-ui);
}

.st-tile__label small {
	display: block;
	font-size: var(--st-text-sm);
	font-weight: var(--st-weight-regular);
	color: var(--st-ink-muted);
}

/* Campaign banners (existing 1920x600 artwork with text baked in) */
.st-banners {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 88%;
	gap: var(--st-space-3);
	margin: 0 calc(-1 * var(--st-gutter));
	padding: 0 var(--st-gutter) var(--st-space-2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--st-gutter);
	list-style: none;
}

.st-banners > li {
	scroll-snap-align: start;
}

.st-banner {
	display: block;
	overflow: hidden;
	border-radius: var(--st-radius-md);
	background: var(--st-surface-muted);
}

.st-banner img {
	width: 100%;
	aspect-ratio: 16 / 5;
	object-fit: cover;
	transition: transform 600ms var(--st-ease);
}

@media (hover: hover) {
	.st-banner:hover img {
		transform: scale(1.02);
	}
}

@media (min-width: 1024px) {
	.st-banners {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin: 0;
		padding: 0;
		overflow: visible;
		gap: var(--st-space-4);
	}

	.st-banners > li:first-child {
		grid-column: 1 / -1;
	}
}

/* Brand strip (Since 1971 / made in India / up to 5XL) */
.st-brand {
	background: var(--st-surface-inverse);
	color: var(--st-ink-inverse);
}

.st-brand__inner {
	display: grid;
	gap: var(--st-space-5);
	padding-block: var(--st-section);
}

.st-brand__title {
	margin: 0;
	color: var(--st-ink-inverse);
	font-size: var(--st-text-2xl);
	line-height: var(--st-leading-tight);
	letter-spacing: var(--st-tracking-tight);
}

.st-brand__text {
	max-width: var(--st-measure);
	margin: var(--st-space-3) 0 0;
	color: var(--st-ink-inverse-muted);
	font-size: var(--st-text-md);
}

.st-brand__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--st-space-4);
	margin: 0;
}

.st-brand__fact {
	padding-top: var(--st-space-3);
	border-top: 1px solid var(--st-border-inverse);
}

.st-brand__fact dt {
	font-size: var(--st-text-2xl);
	font-weight: var(--st-weight-bold);
	line-height: var(--st-leading-tight);
	color: var(--st-ink-inverse);
}

.st-brand__fact dd {
	margin: var(--st-space-1) 0 0;
	font-size: var(--st-text-ui);
	color: var(--st-ink-inverse-muted);
}

.st-eyebrow--inverse {
	color: var(--st-primary);
}

@media (min-width: 1024px) {
	.st-brand__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: end;
		gap: var(--st-space-8);
	}

	.st-brand__title {
		font-size: var(--st-text-3xl);
	}

	.st-brand__facts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Size inclusivity band */
.st-sizeband {
	display: grid;
	gap: var(--st-space-4);
	align-items: center;
	padding: var(--st-space-5);
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-md);
	background: var(--st-surface-selected);
}

.st-sizeband__title {
	margin: 0 0 var(--st-space-2);
}

.st-sizeband__text {
	margin: 0;
	color: var(--st-ink-muted);
}

.st-sizeband__sizes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-sizeband__sizes li {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 40px;
	padding: 0 var(--st-space-2);
	border: 1px solid var(--st-ink);
	border-radius: var(--st-radius-sm);
	background: var(--st-surface);
	font-size: var(--st-text-ui);
	font-weight: var(--st-weight-bold);
}

@media (min-width: 1024px) {
	.st-sizeband {
		grid-template-columns: minmax(0, 1fr) auto auto;
		gap: var(--st-space-5);
		padding: var(--st-space-5) var(--st-space-6);
	}
}

/* Trust row */
.st-trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--st-space-4) var(--st-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-trust li {
	display: flex;
	flex-direction: column;
	gap: var(--st-space-2);
}

.st-trust .st-icon {
	width: 32px;
	height: 32px;
}

.st-trust strong {
	display: block;
	font-size: var(--st-text-base);
	line-height: var(--st-leading-snug);
}

.st-trust span {
	font-size: var(--st-text-ui);
	line-height: var(--st-leading-ui);
	color: var(--st-ink-muted);
}

@media (min-width: 1024px) {
	.st-trust {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--st-space-5);
	}
}

/* Reviews */
.st-reviews {
	display: grid;
	gap: var(--st-space-5);
}

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

.st-review-summary__score {
	display: flex;
	align-items: center;
	gap: var(--st-space-3);
}

.st-review-summary__value {
	font-size: var(--st-text-3xl);
	font-weight: var(--st-weight-bold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.st-review-summary__total {
	margin: var(--st-space-1) 0 0;
	font-size: var(--st-text-ui);
	color: var(--st-ink-muted);
}

.st-bars {
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-bars li {
	display: grid;
	grid-template-columns: 48px 1fr 32px;
	align-items: center;
	gap: var(--st-space-2);
	padding: var(--st-space-1) 0;
	font-size: var(--st-text-sm);
	font-variant-numeric: tabular-nums;
}

.st-bars__track {
	height: 8px;
	border-radius: var(--st-radius-sm);
	background: var(--st-surface-muted);
	overflow: hidden;
}

.st-bars__fill {
	display: block;
	height: 100%;
	background: var(--st-ink);
}

.st-bars li span:last-child {
	text-align: right;
	color: var(--st-ink-muted);
}

.st-review-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-review {
	padding: var(--st-space-4) 0;
	border-bottom: 1px solid var(--st-border);
}

.st-review:first-child {
	padding-top: 0;
}

.st-review__title {
	margin: var(--st-space-2) 0 var(--st-space-1);
	font-size: var(--st-text-base);
}

.st-review__text {
	margin: 0 0 var(--st-space-2);
	max-width: var(--st-measure);
}

.st-review__by {
	margin: 0;
	font-size: var(--st-text-sm);
	color: var(--st-ink-muted);
}

.st-review-cards {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(80%, 1fr);
	gap: var(--st-space-3);
	margin: 0 calc(-1 * var(--st-gutter));
	padding: 0 var(--st-gutter) var(--st-space-2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--st-gutter);
	list-style: none;
}

.st-review-cards > li {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	padding: var(--st-space-4);
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-md);
	background: var(--st-surface);
}

.st-review-cards .st-review__by {
	margin-top: auto;
	padding-top: var(--st-space-3);
}

@media (min-width: 768px) {
	.st-review-cards {
		grid-auto-columns: minmax(40%, 1fr);
	}
}

@media (min-width: 1024px) {
	.st-reviews--home {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
		gap: var(--st-space-6);
	}

	.st-review-cards {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin: 0;
		padding: 0;
		overflow: visible;
	}
}

/* Lookbook teaser */
.st-feature {
	display: grid;
	overflow: hidden;
	border-radius: var(--st-radius-md);
	background: var(--st-surface-inverse);
	color: var(--st-ink-inverse);
}

.st-feature__media img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.st-feature__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: var(--st-space-5) var(--st-space-4);
}

.st-feature__title {
	margin: 0 0 var(--st-space-3);
	color: var(--st-ink-inverse);
}

.st-feature__text {
	margin: 0 0 var(--st-space-4);
	color: var(--st-ink-inverse-muted);
	max-width: 44ch;
}

@media (min-width: 768px) {
	.st-feature {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.st-feature__body {
		padding: var(--st-space-6);
	}
}

/* Newsletter */
.st-newsletter {
	background: var(--st-surface-inverse);
	color: var(--st-ink-inverse);
	border-bottom: 1px solid var(--st-border-inverse);
}

.st-newsletter__inner {
	display: grid;
	gap: var(--st-space-4);
	padding-block: var(--st-space-6);
}

.st-newsletter__title {
	margin: 0 0 var(--st-space-2);
	color: var(--st-ink-inverse);
}

.st-newsletter__text {
	margin: 0;
	color: var(--st-ink-inverse-muted);
}

.st-newsletter .st-label {
	color: var(--st-ink-inverse);
}

.st-newsletter .st-field {
	margin: 0;
}

.st-newsletter__status {
	min-height: 1.4em;
	margin: 0;
	font-size: var(--st-text-ui);
	line-height: var(--st-leading-ui);
	color: var(--st-ink-inverse);
}

.st-newsletter__status[data-tone="danger"] {
	color: #fca5a5; /* 8.9:1 on gray-900: the error tone for dark surfaces */
}

.st-newsletter__status strong {
	display: inline-block;
	margin-left: var(--st-space-1);
	padding: 0 var(--st-space-2);
	border-radius: var(--st-radius-sm);
	background: var(--st-primary);
	color: var(--st-on-primary);
	letter-spacing: var(--st-tracking-caps);
}

.st .st-newsletter .st-input:focus {
	outline-color: var(--st-primary);
}

@media (max-width: 479.98px) {
	.st-newsletter .st-inline-form {
		flex-direction: column;
	}
}

@media (min-width: 1024px) {
	.st-newsletter__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--st-space-8);
		padding-block: var(--st-space-7);
	}
}

/* =========================================================================
   Listing page
   ========================================================================= */
.st-plp-head {
	padding-bottom: var(--st-space-4);
}

.st-plp-head__title {
	margin: 0;
}

.st-plp-head__intro {
	max-width: var(--st-measure);
	margin: var(--st-space-2) 0 0;
	color: var(--st-ink-muted);
}

.st-subnav {
	display: flex;
	gap: var(--st-space-2);
	margin: var(--st-space-4) calc(-1 * var(--st-gutter)) 0;
	padding: 0 var(--st-gutter) var(--st-space-1);
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.st-subnav a {
	white-space: nowrap;
}

.st-subnav [aria-current="page"] {
	background: var(--st-ink);
	border-color: var(--st-ink);
	color: var(--st-ink-inverse);
}

.st-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--st-space-2) var(--st-space-3);
	padding: var(--st-space-2) 0;
	margin-bottom: var(--st-space-4);
	background: var(--st-surface);
	border-bottom: 1px solid var(--st-border);
}

.st-toolbar__count {
	margin: 0;
	font-size: var(--st-text-ui);
	color: var(--st-ink-muted);
	font-variant-numeric: tabular-nums;
}

.st-toolbar__controls {
	display: flex;
	align-items: center;
	gap: var(--st-space-2);
}

.st-sort {
	display: flex;
	align-items: center;
	gap: var(--st-space-2);
}

.st-sort .st-label {
	font-weight: var(--st-weight-regular);
	color: var(--st-ink-muted);
	white-space: nowrap;
}

.st-sort .st-select {
	min-height: var(--st-control-height-sm);
	width: auto;
	font-size: var(--st-text-ui);
}

.st-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--st-space-2);
	margin: 0 0 var(--st-space-4);
	padding: 0;
	list-style: none;
}

.st-plp {
	display: grid;
	gap: var(--st-space-5);
}

.st-filters {
	display: none;
}

@media (min-width: 1024px) {
	.st-plp--filters {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: var(--st-space-6);
		align-items: start;
	}

	.st-filters {
		display: block;
		position: sticky;
		top: calc(80px + var(--st-control-height) + var(--st-space-4));
		max-height: calc(100vh - 80px - var(--st-control-height) - var(--st-space-5));
		overflow-y: auto;
	}

	.st-filter-open {
		display: none;
	}

	.st-plp--filters .st-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1440px) {
	.st-plp--filters .st-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.st-filter-group {
	margin: 0;
	padding: var(--st-space-3) 0;
	border: 0;
	border-bottom: 1px solid var(--st-border);
}

.st-filter-group:first-child {
	padding-top: 0;
}

.st-filter-group__title {
	float: left;
	width: 100%;
	margin-bottom: var(--st-space-2);
	padding: 0;
	font-size: var(--st-text-ui);
	font-weight: var(--st-weight-bold);
}

.st-filter-options {
	clear: both;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-filter-options--sizes {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--st-space-2);
}

.st-filter-option {
	display: flex;
	align-items: center;
	gap: var(--st-space-2);
	min-height: 40px;
	font-size: var(--st-text-ui);
	cursor: pointer;
}

.st-filter-option__count {
	margin-left: auto;
	color: var(--st-ink-muted);
	font-variant-numeric: tabular-nums;
}

.st-filter-option .st-dot {
	width: 16px;
	height: 16px;
	margin: 0;
}

.st-filter-option--size {
	position: relative;
	min-height: 0;
}

.st-filter-option--size input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.st-filter-option--size span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 40px;
	padding: 0 var(--st-space-2);
	border: 1px solid var(--st-border-control);
	border-radius: var(--st-radius-sm);
	font-weight: var(--st-weight-semibold);
	font-variant-numeric: tabular-nums;
}

.st-filter-option--size input:checked + span {
	background: var(--st-ink);
	border-color: var(--st-ink);
	color: var(--st-ink-inverse);
}

.st-filter-option--size input:focus-visible + span {
	outline: var(--st-focus-width) solid var(--st-focus-color);
	outline-offset: var(--st-focus-offset);
}

.st-filter-option--size input:disabled + span {
	color: var(--st-ink-disabled);
	border-color: var(--st-border);
	cursor: not-allowed;
}

.st-filters__actions {
	display: flex;
	gap: var(--st-space-2);
	padding-top: var(--st-space-3);
}

.st-drawer .st-filters__form {
	padding: var(--st-space-3) var(--st-space-4) 0;
}

.st-drawer .st-filters__actions {
	position: sticky;
	bottom: 0;
	margin: 0 calc(-1 * var(--st-space-4));
	padding: var(--st-space-3) var(--st-space-4);
	border-top: 1px solid var(--st-border);
	background: var(--st-surface);
}

.st-load-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--st-space-3);
	margin-top: var(--st-space-6);
	text-align: center;
}

.st-load-more__status {
	margin: 0;
	font-size: var(--st-text-ui);
	color: var(--st-ink-muted);
}

.st-seo-copy {
	padding-top: var(--st-space-6);
	margin-top: var(--st-space-6);
	border-top: 1px solid var(--st-border);
	color: var(--st-ink-muted);
}

.st-seo-copy h2,
.st-seo-copy h3 {
	color: var(--st-ink);
}

/* =========================================================================
   Product page
   ========================================================================= */
.st-pdp {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--st-space-4);
}

@media (min-width: 1024px) {
	.st-pdp {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--st-space-6);
		align-items: start;
	}

	.st-pdp__buy {
		position: sticky;
		top: calc(80px + var(--st-control-height) + var(--st-space-3));
	}
}

@media (max-width: 767.98px) {
	.st-pdp__media {
		margin-inline: calc(-1 * var(--st-gutter));
	}
}

.st-pdp__title {
	margin: 0 0 var(--st-space-1);
	font-size: var(--st-text-xl);
	line-height: var(--st-leading-snug);
}

@media (min-width: 1024px) {
	.st-pdp__title {
		font-size: var(--st-text-2xl);
		line-height: var(--st-leading-tight);
	}
}

.st-pdp__tagline {
	margin: 0 0 var(--st-space-2);
	color: var(--st-ink-muted);
}

.st-pdp__rating {
	display: inline-flex;
	margin-bottom: var(--st-space-3);
	text-decoration: none;
}

.st-pdp__price {
	padding-bottom: var(--st-space-4);
	margin-bottom: var(--st-space-4);
	border-bottom: 1px solid var(--st-border);
}

.st-size-link {
	display: inline-flex;
	align-items: center;
	gap: var(--st-space-1);
	padding: 0;
	border: 0;
	background: none;
	color: var(--st-ink);
	font-size: var(--st-text-ui);
	font-weight: var(--st-weight-medium);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.st-buy {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--st-space-3);
	margin-bottom: var(--st-space-3);
}

.st-buy .st-field {
	margin: 0;
}

.st-buy__cta {
	display: flex;
	gap: var(--st-space-2);
	flex: 1 1 240px;
}

.st-buy__cta .st-btn {
	flex: 1 1 auto;
}

.st-stock {
	display: flex;
	align-items: flex-start;
	gap: var(--st-space-2);
	margin: 0 0 var(--st-space-4);
	font-size: var(--st-text-ui);
	line-height: var(--st-leading-ui);
}

.st-stock--in { color: var(--st-success-fg); }
.st-stock--pre { color: var(--st-warning-fg); }
.st-stock--out { color: var(--st-danger-fg); }

.st-stock .st-icon {
	margin-top: 1px;
}

.st-assure {
	display: grid;
	gap: var(--st-space-3);
	margin: 0 0 var(--st-space-5);
	padding: var(--st-space-4);
	list-style: none;
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-md);
	background: var(--st-surface-warm);
}

.st-assure li {
	display: flex;
	align-items: flex-start;
	gap: var(--st-space-3);
	font-size: var(--st-text-ui);
	line-height: var(--st-leading-ui);
}

.st-assure strong {
	display: block;
	font-size: var(--st-text-base);
}

.st-assure span {
	color: var(--st-ink-muted);
}

.st-specs {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	margin: 0;
	font-size: var(--st-text-ui);
}

.st-specs dt,
.st-specs dd {
	margin: 0;
	padding: var(--st-space-2) 0;
	border-bottom: 1px solid var(--st-border);
}

.st-specs dt {
	padding-right: var(--st-space-3);
	font-weight: var(--st-weight-semibold);
}

/* Sticky add-to-cart bar on phones */
.st-buybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--st-z-sticky);
	display: flex;
	align-items: center;
	gap: var(--st-space-3);
	padding: var(--st-space-2) var(--st-gutter) calc(var(--st-space-2) + env(safe-area-inset-bottom));
	background: var(--st-surface);
	border-top: 1px solid var(--st-border);
	box-shadow: var(--st-shadow-overlay);
	transform: translateY(110%);
	transition: transform var(--st-duration-panel) var(--st-ease);
}

.st-buybar[data-visible] {
	transform: none;
}

.st-buybar__info {
	min-width: 0;
	flex: 1 1 auto;
	font-size: var(--st-text-sm);
	line-height: var(--st-leading-ui);
}

.st-buybar__info strong {
	display: block;
	font-size: var(--st-text-base);
	font-variant-numeric: tabular-nums;
}

.st-buybar .st-btn {
	flex: none;
}

@media (min-width: 1024px) {
	.st-buybar {
		display: none;
	}
}

.st-pdp-more {
	display: grid;
	gap: var(--st-space-6);
}

@media (min-width: 1024px) {
	.st-pdp-more {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--st-space-6);
	}
}

/* =========================================================================
   Accordion and tabs
   ========================================================================= */
.st-accordion {
	border-top: 1px solid var(--st-border);
}

.st-accordion__item {
	border-bottom: 1px solid var(--st-border);
}

.st-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--st-space-3);
	min-height: 56px;
	padding: var(--st-space-2) 0;
	cursor: pointer;
	list-style: none;
}

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

.st-accordion__title {
	margin: 0;
	font-size: var(--st-text-base);
	font-weight: var(--st-weight-semibold);
}

.st-accordion__icon {
	transition: transform var(--st-duration-fast) var(--st-ease);
}

.st-accordion__item[open] .st-accordion__icon {
	transform: rotate(45deg);
}

.st-accordion__body {
	padding: 0 0 var(--st-space-4);
	line-height: var(--st-leading-body);
}

.st-accordion__body > :last-child {
	margin-bottom: 0;
}

.st-tabs__list {
	display: flex;
	gap: var(--st-space-1);
	margin-bottom: var(--st-space-4);
	border-bottom: 1px solid var(--st-border);
	overflow-x: auto;
	scrollbar-width: none;
}

.st-tabs__tab {
	position: relative;
	flex: none;
	min-height: var(--st-control-height);
	padding: 0 var(--st-space-3);
	border: 0;
	background: none;
	color: var(--st-ink-muted);
	font-size: var(--st-text-ui);
	font-weight: var(--st-weight-semibold);
}

.st-tabs__tab:hover {
	color: var(--st-ink);
}

.st-tabs__tab[aria-selected="true"] {
	color: var(--st-ink);
}

.st-tabs__tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	background: var(--st-ink);
}

.st-tabs[data-st-tabs-ready] .st-tabs__panel[data-st-tab-hidden] {
	display: none;
}

.st-tabs__panel + .st-tabs__panel {
	margin-top: var(--st-space-5);
}

.st-tabs[data-st-tabs-ready] .st-tabs__panel + .st-tabs__panel {
	margin-top: 0;
}

/* =========================================================================
   Gallery
   ========================================================================= */
.st-gallery__stage {
	position: relative;
}

.st-gallery__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	background: var(--st-surface-muted);
}

.st-gallery__track::-webkit-scrollbar {
	display: none;
}

.st .st-gallery__track:focus-visible {
	outline-offset: -2px;
}

.st-gallery__slide {
	scroll-snap-align: start;
	display: block;
	padding: 0;
	border: 0;
	background: var(--st-surface-muted);
	cursor: zoom-in;
}

.st-gallery__slide img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.st .st-gallery__slide:focus-visible {
	outline-offset: -4px;
}

@media (min-width: 768px) {
	.st-gallery__track {
		border-radius: var(--st-radius-md);
	}
}

.st-gallery__nav {
	position: absolute;
	top: 50%;
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--st-control-height);
	height: var(--st-control-height);
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-round);
	background: var(--st-surface);
	color: var(--st-ink);
	transform: translateY(-50%);
}

.st-gallery__nav:hover {
	background: var(--st-surface-hover);
}

.st-gallery__nav--prev { left: var(--st-space-3); }
.st-gallery__nav--next { right: var(--st-space-3); }

@media (hover: hover) and (min-width: 768px) {
	.st-gallery__nav {
		display: inline-flex;
	}
}

.st-gallery__counter {
	position: absolute;
	right: var(--st-space-3);
	bottom: var(--st-space-3);
	margin: 0;
	padding: 0 var(--st-space-2);
	border-radius: var(--st-radius-sm);
	background: var(--st-surface);
	font-size: var(--st-text-sm);
	font-weight: var(--st-weight-semibold);
	font-variant-numeric: tabular-nums;
}

.st-gallery__zoom {
	position: absolute;
	left: var(--st-space-3);
	bottom: var(--st-space-3);
	display: inline-flex;
	padding: var(--st-space-1);
	border-radius: var(--st-radius-sm);
	background: var(--st-surface);
	pointer-events: none;
}

.st-gallery__thumbs {
	display: flex;
	gap: var(--st-space-2);
	margin: var(--st-space-2) 0 0;
	padding: 0 var(--st-gutter);
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

@media (min-width: 768px) {
	.st-gallery__thumbs {
		padding: 0;
	}
}

.st-gallery__thumb {
	display: block;
	width: 64px;
	padding: 0;
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-sm);
	background: var(--st-surface-muted);
	overflow: hidden;
}

.st-gallery__thumb img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.st-gallery__thumb[aria-current="true"] {
	border: 2px solid var(--st-ink);
}

/* =========================================================================
   Toasts
   ========================================================================= */
.st-toasts {
	position: fixed;
	left: var(--st-space-3);
	right: var(--st-space-3);
	bottom: var(--st-space-3);
	z-index: var(--st-z-toast);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--st-space-2);
	pointer-events: none;
}

@media (min-width: 768px) {
	.st-toasts {
		left: auto;
		right: var(--st-space-4);
		bottom: var(--st-space-4);
		align-items: flex-end;
	}
}

.st-toast {
	display: flex;
	align-items: flex-start;
	gap: var(--st-space-2);
	width: 100%;
	max-width: 400px;
	padding: var(--st-space-3);
	border: 1px solid var(--st-border);
	border-left: 4px solid var(--st-ink);
	border-radius: var(--st-radius-md);
	background: var(--st-surface);
	box-shadow: var(--st-shadow-overlay);
	font-size: var(--st-text-ui);
	line-height: var(--st-leading-ui);
	pointer-events: auto;
	animation: st-fade-up var(--st-duration-panel) var(--st-ease);
}

.st-toast--success { border-left-color: var(--st-success-fg); }
.st-toast--warning { border-left-color: var(--st-warning-fg); }
.st-toast--danger { border-left-color: var(--st-danger-solid); }
.st-toast--info { border-left-color: var(--st-info-fg); }

.st-toast__text {
	flex: 1 1 auto;
	margin: 0;
	padding-top: 2px;
}

.st-toast__close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: -4px -4px 0 0;
	border: 0;
	border-radius: var(--st-radius-sm);
	background: transparent;
}

.st-toast__close:hover {
	background: var(--st-surface-hover);
}

/* =========================================================================
   Empty state and skeleton
   ========================================================================= */
.st-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--st-space-2);
	max-width: 520px;
	margin: 0 auto;
	padding: var(--st-space-7) var(--st-space-3);
	text-align: center;
}

.st-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: var(--st-space-2);
	border-radius: var(--st-radius-round);
	background: var(--st-surface-muted);
}

.st-empty__icon .st-icon {
	width: 32px;
	height: 32px;
}

.st-empty__title {
	margin: 0;
	font-size: var(--st-text-lg);
}

.st-empty__text {
	margin: 0;
	color: var(--st-ink-muted);
}

.st-empty__actions {
	justify-content: center;
	margin-top: var(--st-space-3);
}

.st-skeleton {
	position: relative;
	overflow: hidden;
	border-radius: var(--st-radius-sm);
	background: var(--st-surface-muted);
}

.st-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
	transform: translateX(-100%);
	animation: st-shimmer 1.4s var(--st-ease) infinite;
}

@keyframes st-shimmer {
	to { transform: translateX(100%); }
}

.st-skeleton--media {
	aspect-ratio: 4 / 5;
	border-radius: var(--st-radius-md);
}

.st-skeleton--text {
	height: 16px;
	margin-top: var(--st-space-2);
}

.st-skeleton--short {
	width: 40%;
}

/* =========================================================================
   Pagination
   ========================================================================= */
.st-pagination ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--st-space-1);
	margin: var(--st-space-5) 0 0;
	padding: 0;
	list-style: none;
}

.st-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--st-space-1);
	min-width: var(--st-control-height);
	height: var(--st-control-height);
	padding: 0 var(--st-space-2);
	border: 1px solid transparent;
	border-radius: var(--st-radius-sm);
	color: var(--st-ink);
	font-weight: var(--st-weight-semibold);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.st .st-pagination__link:hover {
	border-color: var(--st-border-control);
	text-decoration: none;
}

.st-pagination__link[aria-current="page"] {
	background: var(--st-ink);
	color: var(--st-ink-inverse);
}

.st-pagination__step {
	padding: 0 var(--st-space-3);
}

.st-pagination__gap {
	padding: 0 var(--st-space-1);
	color: var(--st-ink-muted);
}

/* =========================================================================
   Notice (inline message)
   ========================================================================= */
.st-notice {
	display: flex;
	gap: var(--st-space-2);
	padding: var(--st-space-3);
	border: 1px solid var(--st-info-border);
	border-radius: var(--st-radius-md);
	background: var(--st-info-bg);
	color: var(--st-info-fg);
	font-size: var(--st-text-ui);
}

.st-notice--success { border-color: var(--st-success-border); background: var(--st-success-bg); color: var(--st-success-fg); }
.st-notice--warning { border-color: var(--st-warning-border); background: var(--st-warning-bg); color: var(--st-warning-fg); }
.st-notice--danger { border-color: var(--st-danger-border); background: var(--st-danger-bg); color: var(--st-danger-fg); }

.st-notice p {
	margin: 0;
}

/* Chip list (sub-category links) and "show more" disclosure */
.st-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-more > summary {
	margin-top: var(--st-space-4);
	list-style: none;
}

.st-more > summary::-webkit-details-marker {
	display: none;
}

.st-more[open] > summary {
	display: none;
}

/* =========================================================================
   Style guide page only
   ========================================================================= */
.st-sg-section {
	padding-block: var(--st-space-6);
	border-top: 1px solid var(--st-border);
}

.st-sg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--st-space-3);
}

.st-sg-swatch {
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-md);
	overflow: hidden;
	font-size: var(--st-text-sm);
}

.st-sg-swatch__chip {
	height: 64px;
}

.st-sg-swatch__meta {
	padding: var(--st-space-2);
	line-height: var(--st-leading-ui);
}

.st-sg-swatch__meta code {
	display: block;
	color: var(--st-ink-muted);
}

.st-sg-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--st-space-3);
	margin-bottom: var(--st-space-4);
}

.st-sg-type > * {
	margin: 0 0 var(--st-space-2);
}

.st-sg-space {
	display: flex;
	align-items: center;
	gap: var(--st-space-3);
	font-size: var(--st-text-sm);
}

.st-sg-space span {
	display: block;
	height: 16px;
	background: var(--st-primary);
}