/**
 * TheSouke — component styles.
 *
 * Design tokens all come from theme.json (--wp--preset--*). This file only
 * carries the composition that block markup cannot express on its own:
 * the navbar, the rotated hero collage, the card scrims and the footer panel.
 *
 * Geometry is transcribed from the Figma frame "Landing Page" (15:2), which is
 * authored on a 1728px canvas with 80px gutters. Fixed pixel values from the
 * design are converted to ratios so they hold at every viewport.
 */

:root {
	--thesouke-gutter: clamp(1.25rem, 4.63vw, 5rem);
	--thesouke-max: 1568px;
	--thesouke-radius-card: var(--wp--custom--radius--card, 24px);
	--thesouke-radius-pill: var(--wp--custom--radius--pill, 50px);
	--thesouke-transition: var(--wp--custom--transition, 180ms cubic-bezier(0.4, 0, 0.2, 1));
}

/*
 * Design canvas is 1728 wide; the hero art bleeds past both gutters.
 *
 * 100vw counts the vertical scrollbar, so a plain 100vw bleed is wider than the
 * page and adds a horizontal scrollbar. --thesouke-scrollbar is measured in
 * assets/js/interactions.js and subtracted here; the clip on .wp-site-blocks is
 * the belt-and-braces for the moment before that runs, and for anything else
 * that pokes past the edge.
 */
.thesouke-bleed {
	margin-inline: calc(50% - 50vw + var(--thesouke-scrollbar, 0px) / 2);
	max-width: none;
	width: calc(100vw - var(--thesouke-scrollbar, 0px));
}

.wp-site-blocks {
	overflow-x: clip;
}

/* ---------------------------------------------------------------------------
 * 1. Promo bar
 * ------------------------------------------------------------------------- */

.thesouke-promo-bar {
	background: var(--wp--preset--color--success-200);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1;
	padding-block: 1.5rem;
	padding-inline: var(--thesouke-gutter);
	text-align: center;
}

.thesouke-promo-bar p {
	margin: 0;
}

.thesouke-promo-bar a {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.thesouke-promo-bar a:hover,
.thesouke-promo-bar a:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * 2. Navigation bar
 * ------------------------------------------------------------------------- */

.thesouke-navbar {
	align-items: center;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: auto 1fr auto;
	margin-inline: auto;
	max-width: calc(var(--thesouke-max) + 2 * var(--thesouke-gutter));
	padding-block: 2.5rem 0;
	padding-inline: var(--thesouke-gutter);
	width: 100%;
}

/* Logo — designed box is 146.14 x 64. */
.thesouke-navbar .wp-block-site-logo img,
.thesouke-navbar__logo img {
	height: 64px;
	object-fit: contain;
	object-position: left center;
	width: auto;
}

.thesouke-navbar .wp-block-navigation {
	justify-content: center;
}

.thesouke-navbar .wp-block-navigation .wp-block-navigation__container {
	gap: clamp(1.25rem, 2.4vw, 2.5625rem); /* 41px at the design width */
}

.thesouke-navbar .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1;
	padding-block: 0.25rem;
}

.thesouke-navbar__actions {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-self: end;
}

.thesouke-navbar__icons {
	align-items: center;
	display: flex;
	gap: 1rem;
}

/* 48px white circular control — shared by search, account and cart. */
.thesouke-icon-btn {
	align-items: center;
	background: var(--wp--preset--color--base);
	border: 0;
	border-radius: var(--wp--custom--radius--control, 40px);
	color: var(--wp--preset--color--primary-950);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	height: 48px;
	justify-content: center;
	padding: 0;
	position: relative;
	transition: background-color var(--thesouke-transition), transform var(--thesouke-transition);
	width: 48px;
}

.thesouke-icon-btn:hover,
.thesouke-icon-btn:focus-visible {
	background: var(--wp--preset--color--neutral-50);
	transform: translateY(-1px);
}

.thesouke-icon-btn svg {
	display: block;
	height: 24px;
	width: 24px;
}

/* Cart count — 12px dot pinned over the basket's top-right. */
.thesouke-icon-btn__count {
	align-items: center;
	background: var(--wp--preset--color--danger);
	border-radius: 12px;
	color: var(--wp--preset--color--base);
	display: flex;
	font-size: 0.5rem;
	font-weight: 400;
	height: 12px;
	inset-block-start: 7px;
	inset-inline-end: 9px;
	justify-content: center;
	line-height: 1;
	min-width: 12px;
	padding: 2px;
	position: absolute;
}

/* The design's primary pill sits next to the icon cluster. */
.thesouke-navbar__cta .wp-block-button__link {
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * 3. Hero
 * ------------------------------------------------------------------------- */

.thesouke-hero {
	padding-block-start: clamp(3rem, 9vw, 9.75rem); /* 264 - 108 - 64 on canvas */
	position: relative;
	text-align: center;
}

.thesouke-hero__title {
	margin-inline: auto;
	max-width: 990px;
}

.thesouke-hero__subtitle {
	margin-block: 1.5rem 0;
	margin-inline: auto;
	max-width: 702px;
}

.thesouke-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center;
	margin-block-start: clamp(2rem, 4.6vw, 3.75rem);
}

/*
 * Hero collage — five photographs, each in its own outline frame, rotated
 * +/-10deg. The Figma export positions a bounding box and rotates an inner
 * element inside it; that structure is preserved here so both the outer box and
 * the inner leaf keep their designed dimensions.
 *
 * The collage box is the 1728 x 708 region starting at canvas y=596.
 */
.thesouke-hero__collage {
	aspect-ratio: 1728 / 708;
	margin-block-start: clamp(2.5rem, 6.5vw, 7rem);
	pointer-events: none;
	position: relative;
	width: 100%;
}

/*
 * One rotated element per card, carrying the outline and the photograph as
 * plain children. Ten separately rotated layers was more than browsers reliably
 * composite, and the opaque outline silhouettes would intermittently paint over
 * the photographs; collapsing each card to a single rotated box makes the paint
 * order structural — outline first, photograph second — and --z orders the
 * cards back to front. patterns/hero.php derives every value below from the
 * Figma bounding boxes.
 *
 * The card box is the photograph's leaf; everything inside is a percentage of
 * it, so the whole collage scales with the viewport.
 */
.thesouke-hero__card {
	height: var(--ch);
	left: var(--cl);
	position: absolute;
	rotate: var(--r);
	top: var(--ct);
	width: var(--cw);
	z-index: var(--z);
}

/* The white sticker silhouette, sized to overflow its leaf as designed. */
.thesouke-hero__frame {
	display: block;
	height: var(--fh);
	left: var(--fl);
	max-width: none;
	position: absolute;
	top: var(--ft);
	width: var(--fw);
}

/*
 * The photograph fills the card exactly: the design's crop window is baked into
 * the *-crop.webp asset, so nothing is scaled or clipped at runtime.
 */
.thesouke-hero__photo {
	display: block;
	height: 100%;
	inset: 0;
	max-width: none;
	position: absolute;
	width: 100%;
}

/*
 * Canvas has a 114px-blurred #FFF5F2 rectangle laid over the lower half of the
 * collage. A gradient reproduces the same fade far more cheaply than a filter.
 */
.thesouke-hero__collage::after {
	background: linear-gradient(
		180deg,
		rgba(255, 245, 242, 0) 0%,
		rgba(255, 245, 242, 0.85) 70%,
		var(--wp--preset--color--canvas) 100%
	);
	content: "";
	/* The rectangle begins at canvas y=1017.5, i.e. 59.5% down the collage. */
	inset: 59.5% 0 -1px;
	pointer-events: none;
	position: absolute;
	z-index: 20; /* Above every layer; --z tops out at 10. */
}

/* ---------------------------------------------------------------------------
 * 4. Sections
 * ------------------------------------------------------------------------- */

/*
 * --thesouke-max is the design's content row: 1568px between 80px gutters on a
 * 1728px canvas, which is exactly the theme.json wideSize. Sections are placed
 * with alignwide, so the block layout already centres them at that width and
 * supplies the gutters — adding padding here as well would eat 160px out of the
 * row and cost the card grids a column.
 */
.thesouke-section {
	margin-inline: auto;
	max-width: var(--thesouke-max);
	width: 100%;
}

.thesouke-section__title {
	margin-block: 0 clamp(2rem, 4vw, 3.75rem);
}

.thesouke-section__title--center {
	text-align: center;
}

.thesouke-grid {
	display: grid;
	gap: 1.5rem;
}

/*
 * auto-fill rather than auto-fit throughout: auto-fit collapses empty tracks,
 * so an incomplete row stretches its cards to fill the width instead of
 * holding the designed card size.
 */

/* Three across at the design width (507px cards in a 1568px row). */
.thesouke-grid--categories {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
}

/* Four across at the design width (374px cards). */
.thesouke-grid--products {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
}

/*
 * The rail and its prev/next controls. The buttons overlay the leading and
 * trailing edges, centred on the artwork rather than the card so they never sit
 * over the add-to-cart control.
 */
.thesouke-rail {
	position: relative;
}

.thesouke-rail__nav {
	align-items: center;
	background: var(--wp--preset--color--base);
	border: 0;
	border-radius: var(--wp--custom--radius--control, 40px);
	box-shadow: var(--wp--preset--shadow--card-hover);
	color: var(--wp--preset--color--primary-950);
	cursor: pointer;
	display: none;
	height: 48px;
	inset-block-start: 41%; /* the media is 429 of the 525 card, so its centre */
	justify-content: center;
	padding: 0;
	position: absolute;
	transition:
		background-color var(--thesouke-transition),
		opacity var(--thesouke-transition),
		scale var(--thesouke-transition);
	translate: 0 -50%;
	width: 48px;
	z-index: 5;
}

/* Only shown once the script confirms the rail actually overflows. */
.thesouke-rail.is-scrollable .thesouke-rail__nav {
	display: inline-flex;
}

.thesouke-rail__nav--prev {
	inset-inline-start: 0.5rem;
}

.thesouke-rail__nav--next {
	inset-inline-end: 0.5rem;
}

.thesouke-rail__nav svg {
	display: block;
	height: 24px;
	width: 24px;
}

/* One exported arrow glyph, turned to point along the rail. */
.thesouke-rail__nav--prev svg {
	rotate: 90deg;
}

.thesouke-rail__nav--next svg {
	rotate: -90deg;
}

.thesouke-rail__nav:hover:not(:disabled),
.thesouke-rail__nav:focus-visible:not(:disabled) {
	background: var(--wp--preset--color--canvas);
	scale: 1.06;
}

.thesouke-rail__nav:active:not(:disabled) {
	scale: 0.96;
}

.thesouke-rail__nav:disabled {
	cursor: default;
	opacity: 0.35;
}

/*
 * The Highlighted rail is wider than the page by design — three 639px cards
 * start at x=80, 743 and 1406 on a 1568px row, so the third runs off the right
 * edge. That reads as a scroller rather than a grid, so it is built as one.
 */
/*
 * A plain wrapper, deliberately. The scroller is WooCommerce's own <ul> further
 * down; making this a scroller too nested one inside the other, which traps the
 * wheel and leaves the prev/next controls driving the wrong element.
 */
.thesouke-grid--highlight {
	display: block;
}

/* ---------------------------------------------------------------------------
 * 5. Category card — 507 x 700, image bleed + bottom scrim
 * ------------------------------------------------------------------------- */

.thesouke-category-card {
	aspect-ratio: 507 / 700;
	border-radius: var(--thesouke-radius-card);
	color: var(--wp--preset--color--base);
	display: block;
	isolation: isolate;
	overflow: hidden;
	position: relative;
	text-decoration: none;
}

/* The artwork arrives as a core/image block, so the figure wrapper is what
   needs to fill the card. theme.json rounds images by default; inside a card
   the corner radius belongs to the card itself. */
.thesouke-category-card .wp-block-image,
.thesouke-category-card figure {
	inset: 0;
	margin: 0;
	position: absolute;
}

.thesouke-category-card img {
	block-size: 100%;
	border-radius: 0;
	inline-size: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	transition: scale var(--thesouke-transition);
}

.thesouke-category-card:hover img,
.thesouke-category-card:focus-visible img {
	scale: 1.04;
}

.thesouke-category-card__body {
	background: var(--wp--preset--gradient--card-scrim, linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 70%));
	display: flex;
	flex-direction: column;
	gap: 1rem;
	inset-block-end: 0;
	inset-inline: 0;
	padding: 1.5rem 1.5rem 2.5rem;
	position: absolute;
}

.thesouke-category-card__title {
	color: inherit;
	font-family: var(--wp--preset--font-family--clash-display);
	font-size: var(--wp--preset--font-size--display-small);
	font-weight: 600;
	line-height: 1;
	margin: 0;
}

.thesouke-category-card__title a {
	color: inherit;
	text-decoration: none;
}

/*
 * Make the whole card clickable. The pseudo-element is positioned against
 * __body, so it is stretched far past the top edge and clipped by the card's
 * own overflow rather than being given an exact height.
 */
.thesouke-category-card__title a::after {
	content: "";
	inset: -500% 0 0;
	position: absolute;
}

.thesouke-category-card__excerpt {
	color: inherit;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 6. Product card
 * ------------------------------------------------------------------------- */

.thesouke-product-card {
	background: var(--wp--preset--color--base);
	border-radius: var(--thesouke-radius-card);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow var(--thesouke-transition), transform var(--thesouke-transition);
}

.thesouke-product-card:hover {
	box-shadow: var(--wp--preset--shadow--card-hover);
	transform: translateY(-2px);
}

.thesouke-product-card__media {
	aspect-ratio: 374 / 429;
	display: block;
	overflow: hidden;
	position: relative;
}

.thesouke-product-card__media img {
	block-size: 100%;
	inline-size: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
}

.thesouke-product-card__body {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	padding: 1rem;
}

.thesouke-product-card__header {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.thesouke-product-card__title {
	font-family: var(--wp--preset--font-family--clash-display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 400;
	line-height: 1;
	margin: 0;
}

.thesouke-product-card__title a {
	color: inherit;
	text-decoration: none;
}

.thesouke-product-card__price {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1;
	margin: 0;
}

.thesouke-product-card__price del {
	color: var(--wp--preset--color--neutral-500);
	font-weight: 400;
	margin-inline-end: 0.5rem;
}

.thesouke-product-card__price ins {
	text-decoration: none;
}

/* Rating + category chip row */
.thesouke-meta {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}

.thesouke-rating {
	align-items: center;
	display: flex;
	gap: 0.25rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1;
}

.thesouke-rating svg {
	display: block;
	height: 20px;
	width: 20px;
}

.thesouke-chip {
	align-items: center;
	background: var(--wp--preset--color--success-50);
	border-radius: var(--wp--custom--radius--chip, 24px);
	color: var(--wp--preset--color--success);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 500;
	gap: 0.25rem;
	line-height: 1;
	padding: 0.25rem 0.5rem;
}

.thesouke-chip svg {
	display: block;
	height: 12px;
	width: 12px;
}

/* The wide "Highlighted" card uses the primary tint instead of the mint one. */
.thesouke-chip--primary {
	background: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--primary);
}

/* Add-to-cart row: primary pill + 52px favourite control */
.thesouke-cart-row {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}

.thesouke-cart-row .thesouke-add-to-cart {
	flex: 1 0 0;
	min-width: 0;
}

.thesouke-add-to-cart {
	align-items: center;
	background: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--thesouke-radius-pill);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--clash-display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	gap: 0.625rem;
	justify-content: center;
	line-height: 1;
	padding: 1rem 1.5rem;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--thesouke-transition);
}

.thesouke-add-to-cart:hover,
.thesouke-add-to-cart:focus-visible {
	background: var(--wp--preset--color--primary-600);
	color: var(--wp--preset--color--base);
}

.thesouke-add-to-cart svg {
	display: block;
	height: 20px;
	width: 20px;
}

.thesouke-favourite {
	align-items: center;
	background: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	height: 52px;
	justify-content: center;
	padding: 0;
	width: 52px;
}

.thesouke-favourite svg {
	display: block;
	height: 52px;
	width: 52px;
}

/*
 * Wide variant used by the "Highlighted" rail: 639 x 525 with the body laid out
 * as a single row and no price.
 */
.thesouke-product-card--wide .thesouke-product-card__media {
	aspect-ratio: 639 / 429;
}

.thesouke-product-card--wide .thesouke-product-card__body {
	align-items: flex-end;
	flex-direction: row;
	gap: 1.5rem;
	justify-content: space-between;
}

.thesouke-product-card--wide .thesouke-cart-row {
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
 * 7. Footer
 * ------------------------------------------------------------------------- */

.thesouke-footer-wrap {
	position: relative;
	padding-block-start: clamp(3rem, 7vw, 7rem);
	padding-inline: var(--thesouke-gutter);
}

/* Blurred product photograph sitting behind the translucent panel. */
/*
 * A heavily blurred wash behind the panel. The source is a wordmark, so it is
 * blurred hard enough that no letterforms survive — it should read as warmth,
 * not as text.
 */
.thesouke-footer-wrap__backdrop {
	filter: blur(48px);
	inset-block: 10% -8%;
	inset-inline: -6%;
	object-fit: cover;
	opacity: 0.12;
	pointer-events: none;
	position: absolute;
	width: 112%;
	z-index: 0;
}

.thesouke-footer {
	background: rgba(255, 255, 255, 0.7);
	border-radius: var(--thesouke-radius-card);
	margin-inline: auto;
	max-width: var(--thesouke-max);
	/* Panel copy starts 90px in from the panel edge on the design canvas. */
	padding: 4rem clamp(1.5rem, 5.7vw, 90px) 2.5rem;
	position: relative;
	z-index: 1;
}

.thesouke-footer__logo {
	margin-block: 0;
	margin-inline: auto;
	max-width: 438px;
	width: 100%;
}

.thesouke-footer__logo img {
	border-radius: 0;
	display: block;
	height: auto;
	width: 100%;
}

.thesouke-footer__divider {
	background: rgba(66, 31, 19, 0.15);
	border: 0;
	height: 1px;
	margin-block: 2.5rem;
}

.thesouke-footer__columns {
	display: grid;
	gap: 2.5rem 4rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.thesouke-footer__tagline {
	font-size: var(--wp--preset--font-size--display-small);
	font-weight: 300;
	line-height: 1.25;
	margin: 0;
	max-width: 372px;
}

.thesouke-footer__contact {
	display: flex;
	flex-direction: column;
	font-size: var(--wp--preset--font-size--large);
	gap: 1.5rem;
	line-height: 1.25;
	margin: 0;
	max-width: 232px;
}

.thesouke-footer__contact a {
	color: inherit;
}

.thesouke-footer__heading {
	font-family: var(--wp--preset--font-family--clash-display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1;
	margin: 0 0 1.25rem;
}

.thesouke-footer__links {
	display: flex;
	flex-direction: column;
	font-size: var(--wp--preset--font-size--small);
	gap: 0.75rem;
	line-height: 1;
	list-style: none;
	margin: 0;
	padding: 0;
}

.thesouke-footer__social {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin-block-start: 3.5rem;
}

.thesouke-footer__social a {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	transition: opacity var(--thesouke-transition);
}

.thesouke-footer__social a:hover,
.thesouke-footer__social a:focus-visible {
	opacity: 0.65;
}

.thesouke-footer__social svg {
	display: block;
	height: 24px;
	width: 24px;
}

.thesouke-colophon {
	align-items: center;
	background: var(--wp--preset--color--base);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--large);
	gap: 1rem;
	justify-content: space-between;
	line-height: 1;
	margin-block-start: clamp(2.5rem, 5vw, 4.25rem);
	padding: 1.5rem var(--thesouke-gutter);
}

.thesouke-colophon p,
.thesouke-colophon ul {
	margin: 0;
}

.thesouke-colophon ul {
	display: flex;
	gap: 0.625rem;
	list-style: none;
	padding: 0;
}

/* ---------------------------------------------------------------------------
 * 8. Block style variations and small utilities
 * ------------------------------------------------------------------------- */

/* core/button — "Explore Collections": white pill, primary label. */
.wp-block-button.is-style-thesouke-ghost > .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-thesouke-ghost > .wp-block-button__link:hover,
.wp-block-button.is-style-thesouke-ghost > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--neutral-50);
	color: var(--wp--preset--color--primary-600);
}

/* core/group — the white rounded surface used by cards and panels. */
.wp-block-group.is-style-thesouke-card {
	background: var(--wp--preset--color--base);
	border-radius: var(--thesouke-radius-card);
	overflow: hidden;
	padding: 1.5rem;
}

.wp-block-group.is-style-thesouke-panel {
	background: rgba(255, 255, 255, 0.7);
	border-radius: var(--thesouke-radius-card);
	padding: 2.5rem;
}

/* core/image */
.wp-block-image.is-style-thesouke-rounded img {
	border-radius: var(--thesouke-radius-card);
}

/* Header lift once the promo bar has scrolled away. */
.thesouke-navbar.is-stuck,
header.is-stuck {
	transition: box-shadow var(--thesouke-transition);
}

/* Product rails rendered by [thesouke_products] wrap WooCommerce's own list. */
.thesouke-products .woocommerce,
.thesouke-products > .woocommerce {
	margin: 0;
}

/* The rail lives on WooCommerce's own <ul>, not on the wrapper. */
/*
 * The scrollbar is hidden, not the scrolling: drag, wheel, trackpad and
 * keyboard all still work. The prev/next buttons carry the affordance the
 * scrollbar used to, and they only appear when the rail actually overflows.
 */
.thesouke-products.thesouke-grid--highlight ul.products {
	display: flex;
	gap: 1.5rem;
	grid-template-columns: none;
	-ms-overflow-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.thesouke-products.thesouke-grid--highlight ul.products::-webkit-scrollbar {
	display: none;
}

.thesouke-products.thesouke-grid--highlight ul.products > li {
	flex: 0 0 min(639px, 84vw);
	scroll-snap-align: start;
}

.thesouke-placeholder {
	background: var(--wp--preset--color--base);
	border-radius: var(--thesouke-radius-card);
	color: var(--wp--preset--color--neutral-500);
	padding: 2.5rem;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * 9. Motion
 *
 * All of it is additive: the page is complete and usable before any of this
 * runs, and the reduced-motion block further down switches it off wholesale.
 * Anything that starts hidden is gated behind .souke-js so it stays visible
 * when JavaScript does not run.
 * ------------------------------------------------------------------------- */

@keyframes thesouke-pop {
	0%   { scale: 1; }
	45%  { scale: 1.35; }
	100% { scale: 1; }
}

@keyframes thesouke-spin {
	to { rotate: 360deg; }
}

@keyframes thesouke-rise {
	from { opacity: 0; translate: 0 24px; }
	to   { opacity: 1; translate: 0 0; }
}

@keyframes thesouke-toast-in {
	from { opacity: 0; translate: 0 16px; scale: 0.96; }
	to   { opacity: 1; translate: 0 0; scale: 1; }
}

/* --- press feedback ------------------------------------------------------ */

.thesouke-add-to-cart:active,
.thesouke-buy-now:active,
.thesouke-icon-btn:active,
.thesouke-stepper__button:active,
.wp-element-button:active,
.wp-block-button__link:active {
	scale: 0.97;
}

.thesouke-stepper__button {
	transition: scale var(--thesouke-transition), opacity var(--thesouke-transition);
}

/* --- add to cart: working, then done -------------------------------------- */

.thesouke-add-to-cart {
	position: relative;
}

/* WooCommerce adds .loading while the AJAX request is in flight. */
.thesouke-add-to-cart.loading {
	color: transparent;
	pointer-events: none;
}

.thesouke-add-to-cart.loading svg,
.thesouke-add-to-cart.loading span {
	opacity: 0;
}

.thesouke-add-to-cart.loading::after {
	animation: thesouke-spin 620ms linear infinite;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-block-start-color: var(--wp--preset--color--base);
	border-radius: 50%;
	content: "";
	height: 18px;
	inset-block-start: calc(50% - 9px);
	inset-inline-start: calc(50% - 9px);
	position: absolute;
	width: 18px;
}

/* ...and .added once it lands. */
.thesouke-add-to-cart.added {
	background: var(--wp--preset--color--success-600);
}

.thesouke-add-to-cart.added svg {
	animation: thesouke-pop 420ms ease;
}

/* The "View cart" link WooCommerce appends after a successful add. */
.thesouke-cart-row .added_to_cart {
	animation: thesouke-rise 260ms ease both;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* --- cart badge ----------------------------------------------------------- */

.thesouke-icon-btn__count.is-bumped,
.wc-block-mini-cart__badge.is-bumped {
	animation: thesouke-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- favourite ------------------------------------------------------------ */

.thesouke-favourite svg path {
	transition: stroke var(--thesouke-transition), fill var(--thesouke-transition);
}

.thesouke-favourite:hover svg path,
.thesouke-favourite:focus-visible svg path {
	fill: var(--wp--preset--color--primary);
	stroke: var(--wp--preset--color--primary);
}

.thesouke-favourite.is-bumped svg {
	animation: thesouke-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- cards ---------------------------------------------------------------- */

.thesouke-product-card {
	transition:
		box-shadow var(--thesouke-transition),
		transform var(--thesouke-transition);
}

.thesouke-product-card__media img {
	transition: scale 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.thesouke-product-card:hover .thesouke-product-card__media img {
	scale: 1.05;
}

.thesouke-category-card__body {
	transition: padding-block-end var(--thesouke-transition);
}

.thesouke-category-card:hover .thesouke-category-card__body {
	padding-block-end: 3rem;
}

/* --- navigation underline ------------------------------------------------- */

.thesouke-navbar .wp-block-navigation-item__content {
	position: relative;
}

.thesouke-navbar .wp-block-navigation-item__content::after {
	background: currentColor;
	block-size: 1px;
	content: "";
	inset-block-end: 0;
	inset-inline-start: 0;
	position: absolute;
	scale: 0 1;
	transform-origin: left center;
	transition: scale var(--thesouke-transition);
	inline-size: 100%;
}

.thesouke-navbar .wp-block-navigation-item__content:hover::after,
.thesouke-navbar .wp-block-navigation-item__content:focus-visible::after {
	scale: 1 1;
}

/* --- reveal on scroll ----------------------------------------------------- */

.souke-js [data-souke-reveal] {
	opacity: 0;
	translate: 0 24px;
	transition:
		opacity 520ms cubic-bezier(0.4, 0, 0.2, 1),
		translate 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.souke-js [data-souke-reveal].is-revealed {
	opacity: 1;
	translate: 0 0;
}

/* Stagger the cards inside a revealed grid. */
.souke-js [data-souke-reveal].is-revealed > .thesouke-grid > *,
.souke-js [data-souke-reveal].is-revealed .products > * {
	animation: thesouke-rise 520ms cubic-bezier(0.4, 0, 0.2, 1) both;
	animation-delay: calc(var(--souke-i, 0) * 60ms);
}

/* The hero collage settles in on load. */
.souke-js .thesouke-hero__card {
	animation: thesouke-rise 720ms cubic-bezier(0.4, 0, 0.2, 1) both;
	animation-delay: calc(var(--z, 1) * 90ms);
}

/*
 * Printing never scrolls, so the observer never fires for anything below the
 * fold. Reveal everything on paper.
 */
@media print {
	.souke-js [data-souke-reveal],
	.souke-js .thesouke-hero__card {
		animation: none !important;
		opacity: 1 !important;
		translate: none !important;
	}

	.thesouke-toast {
		display: none !important;
	}
}

/* --- toast ---------------------------------------------------------------- */

.thesouke-toast {
	align-items: center;
	animation: thesouke-toast-in 260ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
	background: var(--wp--preset--color--primary-950);
	border-radius: var(--thesouke-radius-pill);
	box-shadow: var(--wp--preset--shadow--card-hover);
	color: var(--wp--preset--color--base);
	display: flex;
	font-size: var(--wp--preset--font-size--small);
	gap: 0.75rem;
	inset-block-end: 1.5rem;
	inset-inline-start: 50%;
	line-height: 1;
	padding: 0.875rem 1.25rem;
	position: fixed;
	translate: -50% 0;
	z-index: 999;
}

.thesouke-toast[hidden] {
	display: none;
}

.thesouke-toast svg {
	display: block;
	height: 20px;
	width: 20px;
}

.thesouke-toast a {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.thesouke-toast.is-leaving {
	opacity: 0;
	transition: opacity 200ms ease, translate 200ms ease;
	translate: -50% 12px;
}

/* ---------------------------------------------------------------------------
 * 10. Accessibility
 * ------------------------------------------------------------------------- */

/*
 * Block themes do not inherit core's classic-theme .screen-reader-text rule,
 * so the theme has to ship it for its own visually-hidden labels.
 */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
	word-wrap: normal;
}

.screen-reader-text:focus {
	background: var(--wp--preset--color--base);
	border-radius: var(--thesouke-radius-pill);
	clip-path: none;
	color: var(--wp--preset--color--primary-950);
	height: auto;
	padding: 0.75rem 1.5rem;
	width: auto;
	z-index: 100000;
}

.thesouke-skip-link:focus {
	background: var(--wp--preset--color--base);
	border-radius: var(--thesouke-radius-pill);
	color: var(--wp--preset--color--primary-950);
	inset-block-start: 1rem;
	inset-inline-start: 1rem;
	padding: 0.75rem 1.5rem;
	position: fixed;
	z-index: 100000;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	/*
	 * Anything that animates in from hidden has to be reset outright, not just
	 * sped up — otherwise it would sit at opacity 0 waiting for a transition
	 * that no longer runs.
	 */
	.souke-js [data-souke-reveal],
	.souke-js .thesouke-hero__card {
		animation: none !important;
		opacity: 1 !important;
		translate: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * 11. Responsive
 * ------------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.thesouke-product-card__body {
		gap: 1.5rem;
	}

	.thesouke-product-card--wide .thesouke-product-card__body {
		align-items: flex-start;
		flex-direction: column;
	}

	.thesouke-product-card--wide .thesouke-cart-row {
		align-self: stretch;
	}
}

@media (max-width: 781px) {
	.thesouke-navbar {
		grid-template-columns: auto 1fr;
		padding-block-start: 1.5rem;
	}

	/* Core's responsive navigation moves into the overlay; keep it beside the
	   action cluster rather than letting it claim the middle column. */
	.thesouke-navbar .wp-block-navigation {
		grid-column: 2;
		justify-content: flex-end;
		order: 3;
	}

	.thesouke-navbar__actions {
		grid-column: 2;
		grid-row: 1;
		order: 2;
	}

	.thesouke-navbar__cta {
		display: none;
	}

	.thesouke-hero__collage {
		aspect-ratio: 1728 / 560;
	}

	.thesouke-footer {
		padding-block-start: 2.5rem;
	}

	.thesouke-footer__social {
		margin-block-start: 2rem;
	}

	.thesouke-colophon {
		justify-content: center;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.thesouke-navbar__icons {
		gap: 0.5rem;
	}

	.thesouke-product-card__body {
		gap: 1.25rem;
	}
}