/* ==========================================================================
   Mokaceramica – Main Stylesheet
   Organisch-minimalistisch · erdige Palette · Raw-Living-inspiriert
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Surfaces */
	--color-bg: #F9F7F4;
	--color-bg-elevated: #FFFFFF;
	--color-bg-soft: #F3EFE9;
	--color-bg-warm: #EDE7DF;
	--color-bg-dark: #2A2826;

	/* Text */
	--color-text: #1A1918;
	--color-text-muted: #6B6560;
	--color-text-soft: #9A948C;
	--color-text-inverse: #F9F7F4;

	/* Accents */
	--color-terracotta: #C4785A;
	--color-terracotta-hover: #B06548;
	--color-sand: #C4B5A0;
	--color-ocean: #4A6B7C;
	--color-earth: #8B7355;
	--color-cream: #E8E0D5;
	--color-border: #E5DFD6;
	--color-border-strong: #D4CCC0;

	/* Typography */
	--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;

	/* Type scale (fluid) */
	--text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
	--text-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
	--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
	--text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
	--text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--text-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	--text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);
	--text-3xl: clamp(2.5rem, 1.75rem + 3vw, 4rem);
	--text-hero: clamp(2.75rem, 2rem + 4vw, 5rem);

	/* Spacing */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;
	--space-3xl: 8rem;
	--space-section: clamp(4rem, 8vw, 8rem);

	/* Layout */
	--container: 1200px;
	--container-narrow: 720px;
	--container-wide: 1400px;
	--header-height: 72px;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	/* Motion */
	--ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--duration: 0.35s;
	--duration-slow: 0.6s;

	/* Shadows */
	--shadow-soft: 0 4px 24px rgba(26, 25, 24, 0.06);
	--shadow-card: 0 8px 40px rgba(26, 25, 24, 0.08);
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

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

body {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: var(--font-weight-regular);
	line-height: 1.7;
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--duration) var(--ease), opacity var(--duration) var(--ease);
}

a:hover {
	color: var(--color-terracotta);
}

button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
	color: inherit;
}

ul,
ol {
	list-style: none;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: var(--font-weight-light);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--color-text);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p {
	margin-bottom: 1em;
}

p:last-child {
	margin-bottom: 0;
}

::selection {
	background: var(--color-terracotta);
	color: var(--color-text-inverse);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 10000;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	margin: 0;
	overflow: visible;
	clip: auto;
	background: var(--color-text);
	color: var(--color-text-inverse);
	border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.container--narrow {
	max-width: var(--container-narrow);
}

.container--wide {
	max-width: var(--container-wide);
}

.site-main {
	min-height: 50vh;
}

.section {
	padding-block: var(--space-section);
}

.section--soft {
	background: var(--color-bg-soft);
}

.section--warm {
	background: var(--color-bg-warm);
}

.section--dark {
	background: var(--color-bg-dark);
	color: var(--color-text-inverse);
}

.section--dark h2,
.section--dark h3,
.section--dark .section-title {
	color: var(--color-text-inverse);
}

.section-header {
	text-align: center;
	max-width: 36rem;
	margin-inline: auto;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-label {
	display: block;
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-terracotta);
	margin-bottom: var(--space-sm);
}

.section-title {
	font-size: var(--text-2xl);
	font-weight: var(--font-weight-light);
	margin-bottom: var(--space-md);
}

.section-lead {
	font-size: var(--text-md);
	color: var(--color-text-muted);
	line-height: 1.75;
}

.section--dark .section-lead {
	color: rgba(249, 247, 244, 0.7);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.95rem 2rem;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.04em;
	line-height: 1.2;
	border-radius: var(--radius-pill);
	border: 1.5px solid transparent;
	transition:
		background var(--duration) var(--ease),
		color var(--duration) var(--ease),
		border-color var(--duration) var(--ease),
		transform var(--duration) var(--ease),
		box-shadow var(--duration) var(--ease);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

.btn:hover {
	transform: translateY(-1px);
	color: inherit;
}

.btn--primary {
	background: var(--color-text);
	color: var(--color-text-inverse);
	border-color: var(--color-text);
}

.btn--primary:hover {
	background: var(--color-terracotta);
	border-color: var(--color-terracotta);
	color: var(--color-text-inverse);
	box-shadow: var(--shadow-soft);
}

.btn--secondary {
	background: transparent;
	color: var(--color-text);
	border-color: var(--color-border-strong);
}

.btn--secondary:hover {
	border-color: var(--color-text);
	color: var(--color-text);
}

.btn--light {
	background: var(--color-bg);
	color: var(--color-text);
	border-color: var(--color-bg);
}

.btn--light:hover {
	background: var(--color-cream);
	border-color: var(--color-cream);
	color: var(--color-text);
}

.btn--outline-light {
	background: transparent;
	color: var(--color-text-inverse);
	border-color: rgba(249, 247, 244, 0.4);
}

.btn--outline-light:hover {
	background: var(--color-text-inverse);
	color: var(--color-text);
	border-color: var(--color-text-inverse);
}

.btn--sm {
	padding: 0.7rem 1.4rem;
	font-size: var(--text-xs);
}

.btn--full {
	width: 100%;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	height: var(--header-height);
	background: rgba(249, 247, 244, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.site-header.is-scrolled {
	border-bottom-color: var(--color-border);
	box-shadow: 0 1px 0 rgba(26, 25, 24, 0.03);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-height);
	gap: var(--space-md);
}

.header-logo {
	flex-shrink: 0;
	z-index: 1001;
}

.logo-text {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	text-decoration: none;
	color: var(--color-text);
}

.logo-text:hover {
	color: var(--color-text);
	opacity: 0.8;
}

.logo-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 1.5px solid var(--color-text);
	border-radius: 50%;
	font-size: 0.75rem;
	font-weight: var(--font-weight-medium);
	letter-spacing: 0;
}

.logo-name {
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.primary-nav {
	display: none;
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.nav-menu a {
	font-size: var(--text-sm);
	font-weight: var(--font-weight-regular);
	letter-spacing: 0.02em;
	color: var(--color-text);
	position: relative;
	padding-block: 0.25rem;
}

.nav-menu a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--color-terracotta);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--duration) var(--ease);
}

.nav-menu a:hover::after,
.nav-menu .current-menu-item > a::after {
	transform: scaleX(1);
	transform-origin: left;
}

.nav-menu a:hover {
	color: var(--color-text);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	z-index: 1001;
}

.cart-link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--color-text);
}

.cart-link:hover {
	color: var(--color-terracotta);
}

.cart-count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 1.1rem;
	height: 1.1rem;
	padding-inline: 0.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.65rem;
	font-weight: var(--font-weight-medium);
	background: var(--color-terracotta);
	color: white;
	border-radius: var(--radius-pill);
	opacity: 0;
	transform: scale(0.5);
	transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.cart-count.has-items {
	opacity: 1;
	transform: scale(1);
}

.menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0.5rem;
}

.menu-toggle__bar {
	display: block;
	width: 100%;
	height: 1.5px;
	background: var(--color-text);
	transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
	transform-origin: center;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-child {
	transform: translateY(3.75px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:last-child {
	transform: translateY(-3.75px) rotate(-45deg);
}

/* Mobile nav */
@media (max-width: 899px) {
	.primary-nav {
		position: fixed;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--color-bg);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity var(--duration-slow) var(--ease), visibility var(--duration-slow) var(--ease);
		z-index: 999;
	}

	.primary-nav.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.nav-menu {
		flex-direction: column;
		gap: 2rem;
		text-align: center;
	}

	.nav-menu a {
		font-size: var(--text-xl);
		font-weight: var(--font-weight-light);
	}
}

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

	.menu-toggle {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   6. Placeholders (styled mock product photography)
   -------------------------------------------------------------------------- */
.placeholder {
	position: relative;
	width: 100%;
	background:
		radial-gradient(ellipse 80% 60% at 50% 42%, rgba(255, 255, 255, 0.55) 0%, transparent 65%),
		linear-gradient(165deg, rgba(255, 255, 255, 0.35) 0%, var(--ph-bg, var(--color-bg-soft)) 48%, var(--ph-bg, var(--color-bg-soft)) 100%);
	color: var(--ph-fg, var(--color-sand));
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.placeholder--hero {
	aspect-ratio: 16 / 10;
	min-height: min(88vh, 820px);
	height: 100%;
}

.placeholder--portrait {
	aspect-ratio: 4 / 5;
}

.placeholder--square {
	aspect-ratio: 1;
}

.placeholder--wide {
	aspect-ratio: 16 / 9;
}

.placeholder--video {
	aspect-ratio: 16 / 9;
}

.placeholder--tall {
	aspect-ratio: 3 / 4;
	min-height: 360px;
}

/* Real photos / videos inside placeholder frames */
.placeholder--photo {
	padding: 0;
	background: var(--color-bg-soft);
}

.placeholder--photo::before,
.placeholder--photo::after {
	display: none;
}

.placeholder__img,
.media-video,
.hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.placeholder--photo {
	overflow: hidden;
}

.placeholder--photo .placeholder__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.placeholder--photo {
	position: relative;
}

.video-placeholder--real {
	position: relative;
	overflow: hidden;
	background: var(--color-bg-soft);
	width: 100%;
}

.video-placeholder--real .media-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-placeholder--real.placeholder--video {
	aspect-ratio: 16 / 9;
}

.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-card__image .placeholder--photo {
	min-height: 0;
}

.placeholder__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	padding: 1.75rem;
	text-align: center;
	max-width: 90%;
}

.placeholder__icon {
	width: clamp(72px, 14vw, 120px);
	height: auto;
	opacity: 0.88;
	filter: drop-shadow(0 18px 28px rgba(26, 25, 24, 0.12));
}

.placeholder__label {
	font-size: var(--text-xs);
	line-height: 1.55;
	color: var(--color-text-muted);
	opacity: 0.75;
	max-width: 22rem;
	background: rgba(249, 247, 244, 0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 0.55rem 0.85rem;
	border-radius: var(--radius-md);
	border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Soft vignette + grain */
.placeholder::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 0;
}

.placeholder::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, transparent 40%, rgba(26, 25, 24, 0.06) 100%);
	pointer-events: none;
	z-index: 0;
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
	position: relative;
	min-height: calc(100vh - var(--header-height));
	min-height: calc(100svh - var(--header-height));
	display: grid;
	align-items: stretch;
	overflow: hidden;
	background: var(--color-bg-soft);
}

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

.hero__media .placeholder {
	width: 100%;
	height: 100%;
	min-height: 100%;
	aspect-ratio: auto;
}

.hero__media .placeholder__icon {
	width: clamp(100px, 18vw, 180px);
}

.hero__media .placeholder__label {
	max-width: 28rem;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(249, 247, 244, 0.97) 0%,
		rgba(249, 247, 244, 0.72) 28%,
		rgba(249, 247, 244, 0.25) 55%,
		rgba(249, 247, 244, 0.08) 100%
	);
	z-index: 1;
	pointer-events: none;
}

.hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-block: var(--space-2xl) clamp(2.5rem, 6vw, 4.5rem);
	max-width: 42rem;
}

.hero__eyebrow {
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-terracotta);
	margin-bottom: var(--space-md);
}

.hero__title {
	font-size: var(--text-hero);
	font-weight: var(--font-weight-light);
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin-bottom: var(--space-md);
	color: var(--color-text);
}

.hero__text {
	font-size: var(--text-md);
	color: var(--color-text-muted);
	line-height: 1.75;
	margin-bottom: var(--space-lg);
	max-width: 28rem;
}

/* --------------------------------------------------------------------------
   8. Split sections (Die Form, Handgegossen)
   -------------------------------------------------------------------------- */
.split {
	display: grid;
	gap: var(--space-xl);
	align-items: center;
}

@media (min-width: 800px) {
	.split {
		grid-template-columns: 1fr 1fr;
		gap: clamp(2.5rem, 6vw, 5rem);
	}

	.split--reverse .split__media {
		order: 2;
	}

	.split--reverse .split__content {
		order: 1;
	}
}

.split__content {
	max-width: 32rem;
}

.split__media {
	position: relative;
}

.split__media-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.split__media-grid .placeholder:first-child {
	grid-column: 1 / -1;
}

.video-placeholder {
	position: relative;
	cursor: default;
}

.video-placeholder .play-btn {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: rgba(249, 247, 244, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-soft);
	pointer-events: none;
	transition: transform var(--duration) var(--ease);
}

.video-placeholder:hover .play-btn {
	transform: scale(1.06);
}

.play-btn svg {
	margin-left: 3px;
	color: var(--color-text);
}

/* --------------------------------------------------------------------------
   9. Product Grid
   -------------------------------------------------------------------------- */
.product-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 560px) {
	.product-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.product-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.product-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.product-card {
	display: flex;
	flex-direction: column;
}

.product-card__image {
	position: relative;
	overflow: hidden;
	margin-bottom: var(--space-md);
	background: var(--color-bg-soft);
	border-radius: 2px;
}

.product-card__image .placeholder,
.product-card__image img {
	width: 100%;
	transition: transform var(--duration-slow) var(--ease-out);
}

.product-card__image .placeholder__icon {
	width: clamp(56px, 10vw, 88px);
}

.product-card__image .placeholder__label {
	font-size: 0.65rem;
	max-width: 14rem;
	opacity: 0.65;
}

.product-card:hover .product-card__image .placeholder,
.product-card:hover .product-card__image img {
	transform: scale(1.03);
}

.product-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1;
}

.product-card__texture {
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-soft);
}

.product-card__name {
	font-size: var(--text-md);
	font-weight: var(--font-weight-regular);
	letter-spacing: -0.01em;
}

.product-card__name a:hover {
	color: var(--color-terracotta);
}

.product-card__price {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-top: 0.25rem;
}

.product-card__desc {
	font-size: var(--text-sm);
	color: var(--color-text-soft);
	line-height: 1.6;
	margin-top: 0.35rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-card__cta {
	margin-top: auto;
	padding-top: var(--space-sm);
}

/* WooCommerce product loop overrides */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 560px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(3, 1fr);
	}

	.woocommerce ul.products.columns-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	padding: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--text-md);
	font-weight: var(--font-weight-regular);
	padding: 0;
	margin: 0.35rem 0;
}

.woocommerce ul.products li.product .price {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	font-weight: var(--font-weight-regular);
}

.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1.4rem;
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.04em;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-text);
	border: 1.5px solid var(--color-border-strong);
	transition: all var(--duration) var(--ease);
}

.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--color-text);
	color: var(--color-text-inverse);
	border-color: var(--color-text);
}

.woocommerce span.onsale {
	background: var(--color-terracotta);
	color: white;
	border-radius: var(--radius-pill);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	min-height: auto;
	line-height: 1;
	padding: 0.4rem 0.75rem;
}

/* --------------------------------------------------------------------------
   10. Textures section (interactive)
   -------------------------------------------------------------------------- */
.textures {
	overflow: hidden;
}

.textures__layout {
	display: grid;
	gap: var(--space-xl);
	align-items: center;
}

@media (min-width: 800px) {
	.textures__layout {
		grid-template-columns: 1.1fr 0.9fr;
		gap: var(--space-2xl);
	}
}

.texture-preview {
	position: relative;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.texture-preview .placeholder {
	min-height: 360px;
	transition: background var(--duration-slow) var(--ease), color var(--duration-slow) var(--ease);
}

.texture-swatches {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.texture-swatch {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: flex-start;
	padding: 1rem 1.15rem;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	text-align: left;
	transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
	cursor: pointer;
	width: 100%;
}

.texture-swatch:hover,
.texture-swatch.is-active {
	background: var(--color-bg-elevated);
	border-color: var(--color-border);
}

.texture-swatch.is-active {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-soft);
}

.texture-swatch__dot {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 0.1rem;
	border: 2px solid rgba(255, 255, 255, 0.5);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.texture-swatch__name {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	margin-bottom: 0.25rem;
}

.texture-swatch__desc {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   11. Newsletter
   -------------------------------------------------------------------------- */
.newsletter {
	text-align: center;
}

.newsletter__inner {
	max-width: 32rem;
	margin-inline: auto;
}

.newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: var(--space-lg);
}

@media (min-width: 560px) {
	.newsletter-form {
		flex-direction: row;
	}
}

.newsletter-form input[type="email"] {
	flex: 1;
	padding: 0.95rem 1.25rem;
	font-family: inherit;
	font-size: var(--text-sm);
	border: 1.5px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: var(--color-bg-elevated);
	color: var(--color-text);
	outline: none;
	transition: border-color var(--duration) var(--ease);
}

.newsletter-form input[type="email"]:focus {
	border-color: var(--color-text);
}

.newsletter-form input[type="email"]::placeholder {
	color: var(--color-text-soft);
}

.newsletter-note {
	font-size: var(--text-xs);
	color: var(--color-text-soft);
	margin-top: var(--space-sm);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.site-footer {
	background: var(--color-bg-soft);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-2xl);
	margin-top: 0;
}

.footer-main {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	padding-bottom: var(--space-xl);
}

@media (min-width: 600px) {
	.footer-main {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 900px) {
	.footer-main {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: var(--space-lg);
	}
}

.footer-tagline {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.7;
	margin-top: var(--space-md);
	max-width: 18rem;
}

.social-links {
	display: flex;
	gap: 0.75rem;
	margin-top: var(--space-md);
}

.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1px solid var(--color-border-strong);
	color: var(--color-text-muted);
	transition: all var(--duration) var(--ease);
}

.social-link:hover {
	border-color: var(--color-text);
	color: var(--color-text);
}

.footer-heading {
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: var(--space-md);
	color: var(--color-text);
}

.footer-menu {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.footer-menu a {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.footer-menu a:hover {
	color: var(--color-terracotta);
}

.footer-bottom {
	border-top: 1px solid var(--color-border);
	padding-block: var(--space-md);
}

.copyright {
	font-size: var(--text-xs);
	color: var(--color-text-soft);
	margin: 0;
}

/* --------------------------------------------------------------------------
   13. Page headers
   -------------------------------------------------------------------------- */
.page-header {
	padding-block: var(--space-xl) var(--space-lg);
	text-align: center;
}

.page-title {
	font-size: var(--text-2xl);
	font-weight: var(--font-weight-light);
}

.page-subtitle {
	font-size: var(--text-md);
	color: var(--color-text-muted);
	margin-top: var(--space-sm);
	max-width: 32rem;
	margin-inline: auto;
}

.content-area {
	padding-bottom: var(--space-2xl);
}

.entry-content {
	max-width: var(--container-narrow);
	margin-inline: auto;
}

.entry-content p {
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   14. Shop page
   -------------------------------------------------------------------------- */
.shop-layout {
	display: grid;
	gap: var(--space-xl);
	padding-bottom: var(--space-2xl);
}

@media (min-width: 960px) {
	.shop-layout {
		grid-template-columns: 240px 1fr;
		gap: var(--space-2xl);
		align-items: start;
	}
}

.shop-filters {
	position: sticky;
	top: calc(var(--header-height) + 1.5rem);
}

.shop-filters__title {
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--color-border);
}

.filter-group {
	margin-bottom: var(--space-lg);
}

.filter-group__label {
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	margin-bottom: var(--space-sm);
}

.filter-options {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.filter-option {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	cursor: pointer;
	padding: 0.25rem 0;
	transition: color var(--duration) var(--ease);
}

.filter-option:hover {
	color: var(--color-text);
}

.filter-option input {
	accent-color: var(--color-terracotta);
	width: 1rem;
	height: 1rem;
}

.filter-swatch {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.1);
	flex-shrink: 0;
}

.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-border);
}

.shop-count {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.shop-sort select {
	font-family: inherit;
	font-size: var(--text-sm);
	padding: 0.5rem 2rem 0.5rem 0.75rem;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-bg-elevated);
	color: var(--color-text);
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6560' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.65rem center;
}

/* Mobile filter toggle */
.filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--text-sm);
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
}

@media (min-width: 960px) {
	.filters-toggle {
		display: none;
	}
}

@media (max-width: 959px) {
	.shop-filters {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 1100;
		background: var(--color-bg);
		padding: var(--space-lg);
		overflow-y: auto;
		top: 0;
	}

	.shop-filters.is-open {
		display: block;
	}

	.shop-filters__close {
		display: flex;
		justify-content: flex-end;
		margin-bottom: var(--space-md);
	}
}

@media (min-width: 960px) {
	.shop-filters__close {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   15. Single Product
   -------------------------------------------------------------------------- */
.product-single {
	padding-bottom: var(--space-2xl);
}

.product-single__grid {
	display: grid;
	gap: var(--space-xl);
	align-items: start;
}

@media (min-width: 900px) {
	.product-single__grid {
		grid-template-columns: 1.15fr 0.85fr;
		gap: var(--space-2xl);
	}
}

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

.product-gallery__main {
	position: relative;
	overflow: hidden;
	background: var(--color-bg-soft);
}

.product-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
}

.product-gallery__thumb {
	cursor: pointer;
	border: 1.5px solid transparent;
	overflow: hidden;
	transition: border-color var(--duration) var(--ease);
	padding: 0;
	background: none;
}

.product-gallery__thumb.is-active,
.product-gallery__thumb:hover {
	border-color: var(--color-text);
}

.product-gallery__thumb .placeholder {
	pointer-events: none;
}

.product-video-embed {
	margin-top: 0.75rem;
}

.product-info__texture {
	font-size: var(--text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-terracotta);
	margin-bottom: var(--space-sm);
}

.product-info__title {
	font-size: var(--text-2xl);
	font-weight: var(--font-weight-light);
	margin-bottom: var(--space-sm);
}

.product-info__price {
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	margin-bottom: var(--space-md);
}

.product-info__excerpt {
	font-size: var(--text-md);
	color: var(--color-text-muted);
	line-height: 1.75;
	margin-bottom: var(--space-lg);
}

.product-options {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
}

.option-label {
	display: block;
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.65rem;
}

.size-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.size-option {
	min-width: 3.25rem;
	padding: 0.65rem 1rem;
	font-size: var(--text-sm);
	border: 1.5px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: transparent;
	transition: all var(--duration) var(--ease);
	cursor: pointer;
}

.size-option:hover,
.size-option.is-active {
	border-color: var(--color-text);
	background: var(--color-text);
	color: var(--color-text-inverse);
}

.product-meta-notes {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: var(--space-lg);
}

.product-meta-notes li {
	font-size: var(--text-sm);
	color: var(--color-text-soft);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.product-meta-notes li::before {
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-terracotta);
	flex-shrink: 0;
}

.product-description {
	padding-block: var(--space-2xl);
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-2xl);
}

.product-description__inner {
	max-width: var(--container-narrow);
	margin-inline: auto;
}

.product-description h2 {
	font-size: var(--text-xl);
	margin-bottom: var(--space-md);
}

.product-description p {
	color: var(--color-text-muted);
	margin-bottom: 1.25em;
}

.related-products {
	padding-block: var(--space-2xl);
	border-top: 1px solid var(--color-border);
}

/* WooCommerce single product overrides */
.woocommerce div.product {
	margin-bottom: 0;
}

.woocommerce div.product form.cart {
	margin-bottom: var(--space-md);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.woocommerce div.product form.cart .quantity {
	margin: 0;
}

.woocommerce div.product form.cart .quantity .qty {
	width: 4rem;
	padding: 0.85rem;
	font-family: inherit;
	font-size: var(--text-sm);
	border: 1.5px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	text-align: center;
	background: var(--color-bg-elevated);
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1;
	min-width: 12rem;
	padding: 0.95rem 2rem;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.04em;
	border-radius: var(--radius-pill);
	background: var(--color-text) !important;
	color: var(--color-text-inverse) !important;
	border: none !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	background: var(--color-terracotta) !important;
}

.woocommerce div.product .woocommerce-tabs {
	margin-top: var(--space-xl);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--color-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 var(--space-md);
	border: none;
	display: flex;
	gap: 1.5rem;
	list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border: none;
	background: none;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	padding: 0.5rem 0;
	border-bottom: 1.5px solid transparent;
	color: var(--color-text-muted);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--color-text);
	border-bottom-color: var(--color-text);
}

.woocommerce div.product .woocommerce-tabs .panel {
	padding: 0;
	margin: 0;
	border: none;
	box-shadow: none;
	background: none;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	display: none;
}

.woocommerce div.product .woocommerce-tabs .panel p {
	color: var(--color-text-muted);
	line-height: 1.75;
}

/* --------------------------------------------------------------------------
   16. About page
   -------------------------------------------------------------------------- */
.about-hero {
	padding-block: var(--space-xl) 0;
}

.about-story {
	padding-block: var(--space-2xl);
}

.about-values {
	display: grid;
	gap: var(--space-lg);
	padding-block: var(--space-2xl);
}

@media (min-width: 700px) {
	.about-values {
		grid-template-columns: repeat(3, 1fr);
	}
}

.value-card {
	text-align: center;
	padding: var(--space-lg) var(--space-md);
}

.value-card__icon {
	width: 2.5rem;
	height: 2.5rem;
	margin-inline: auto;
	margin-bottom: var(--space-md);
	color: var(--color-terracotta);
}

.value-card h3 {
	font-size: var(--text-md);
	font-weight: var(--font-weight-regular);
	margin-bottom: var(--space-sm);
}

.value-card p {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.7;
}

.workshop-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

@media (min-width: 700px) {
	.workshop-gallery {
		grid-template-columns: repeat(3, 1fr);
	}

	.workshop-gallery .placeholder:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}
}

/* --------------------------------------------------------------------------
   17. Contact & FAQ
   -------------------------------------------------------------------------- */
.contact-layout {
	display: grid;
	gap: var(--space-2xl);
	padding-bottom: var(--space-2xl);
}

@media (min-width: 800px) {
	.contact-layout {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-2xl);
	}
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.form-group label {
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.form-group input,
.form-group textarea,
.form-group select {
	font-family: inherit;
	font-size: var(--text-sm);
	padding: 0.9rem 1.1rem;
	border: 1.5px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-bg-elevated);
	color: var(--color-text);
	outline: none;
	transition: border-color var(--duration) var(--ease);
	width: 100%;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
	border-color: var(--color-text);
}

.form-group textarea {
	min-height: 140px;
	resize: vertical;
}

.contact-details {
	padding: var(--space-lg);
	background: var(--color-bg-soft);
	border-radius: var(--radius-md);
	height: fit-content;
}

.contact-details h3 {
	font-size: var(--text-md);
	margin-bottom: var(--space-md);
}

.contact-details p {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-sm);
}

.contact-details a {
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* FAQ Accordion */
.faq-section {
	padding-block: var(--space-2xl);
	border-top: 1px solid var(--color-border);
}

.faq-list {
	max-width: 40rem;
	margin-inline: auto;
}

.faq-item {
	border-bottom: 1px solid var(--color-border);
}

.faq-question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.35rem 0;
	font-size: var(--text-md);
	font-weight: var(--font-weight-regular);
	text-align: left;
	color: var(--color-text);
	cursor: pointer;
}

.faq-question:hover {
	color: var(--color-terracotta);
}

.faq-icon {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	position: relative;
}

.faq-icon::before,
.faq-icon::after {
	content: '';
	position: absolute;
	background: currentColor;
	transition: transform var(--duration) var(--ease);
}

.faq-icon::before {
	width: 100%;
	height: 1.5px;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.faq-icon::after {
	width: 1.5px;
	height: 100%;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
}

.faq-item.is-open .faq-icon::after {
	transform: translateX(-50%) rotate(90deg);
	opacity: 0;
}

.faq-answer {
	display: none;
	padding-bottom: 1.35rem;
}

.faq-item.is-open .faq-answer {
	display: block;
}

.faq-answer p {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.75;
}

/* --------------------------------------------------------------------------
   18. Animations
   -------------------------------------------------------------------------- */
/* Visible by default (no FOUC / no blank page without JS).
   When JS runs it adds .js to <html> and animates .fade-up in. */
.fade-up {
	opacity: 1;
	transform: none;
}

html.js .fade-up {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

html.js .fade-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   19. WooCommerce Cart / Checkout polish
   -------------------------------------------------------------------------- */
.content-area--wide {
	max-width: var(--container);
}

.entry-content--woocommerce {
	max-width: none;
	margin-inline: 0;
}

.woocommerce-cart .entry-content--woocommerce,
.woocommerce-checkout .entry-content--woocommerce,
.woocommerce-account .entry-content--woocommerce {
	padding-bottom: var(--space-2xl);
}

.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
	padding-block: 0 var(--space-lg);
	max-width: none;
}

/* Empty cart */
.woocommerce-cart .cart-empty.woocommerce-info,
.woocommerce .cart-empty {
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--color-terracotta);
	border-radius: var(--radius-md);
	padding: 1.5rem 1.75rem;
	color: var(--color-text-muted);
	font-size: var(--text-md);
}

.woocommerce-cart .return-to-shop {
	margin-top: var(--space-md);
}

.woocommerce-cart .return-to-shop .button,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart button[name="apply_coupon"],
.woocommerce-checkout #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.95rem 2rem;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.04em;
	border-radius: var(--radius-pill);
	background: var(--color-text) !important;
	color: var(--color-text-inverse) !important;
	border: none !important;
	transition: background var(--duration) var(--ease);
}

.woocommerce-cart .return-to-shop .button:hover,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-checkout #place_order:hover {
	background: var(--color-terracotta) !important;
}

.woocommerce-cart button[name="update_cart"],
.woocommerce-cart button[name="apply_coupon"] {
	background: transparent !important;
	color: var(--color-text) !important;
	border: 1.5px solid var(--color-border-strong) !important;
	padding: 0.7rem 1.4rem;
}

.woocommerce-cart button[name="update_cart"]:hover,
.woocommerce-cart button[name="apply_coupon"]:hover {
	border-color: var(--color-text) !important;
	background: var(--color-text) !important;
	color: var(--color-text-inverse) !important;
}

.woocommerce table.shop_table {
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--color-bg-elevated);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--color-border);
	border-top: 1px solid var(--color-border);
	padding: 1rem 1.15rem;
	font-size: var(--text-sm);
	vertical-align: middle;
}

.woocommerce table.shop_table thead th {
	border-top: none;
	background: var(--color-bg-soft);
	font-weight: var(--font-weight-medium);
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.woocommerce table.shop_table .product-remove a {
	color: var(--color-text-soft);
	font-size: 1.25rem;
}

.woocommerce table.shop_table .product-remove a:hover {
	color: var(--color-terracotta);
}

.woocommerce table.shop_table .product-thumbnail img {
	width: 64px;
	height: auto;
	border-radius: var(--radius-sm);
	background: var(--color-bg-soft);
}

.woocommerce table.shop_table .product-name a {
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
}

.woocommerce table.shop_table .quantity .qty {
	width: 4rem;
	padding: 0.5rem;
	border: 1.5px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	text-align: center;
	font-family: inherit;
	background: var(--color-bg);
}

.woocommerce-cart .cart-collaterals {
	margin-top: var(--space-xl);
}

.woocommerce-cart .cart_totals {
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
}

.woocommerce-cart .cart_totals h2 {
	font-size: var(--text-lg);
	font-weight: var(--font-weight-light);
	margin-bottom: var(--space-md);
}

.woocommerce-cart .cart_totals table {
	background: transparent;
	border: none;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	border: none;
	border-bottom: 1px solid var(--color-border);
	padding: 0.75rem 0;
	background: transparent;
}

.woocommerce-cart .wc-proceed-to-checkout {
	padding-top: var(--space-md);
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	width: 100%;
}

/* Coupon row */
.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.woocommerce-cart table.cart td.actions .coupon input {
	padding: 0.7rem 1rem;
	border: 1.5px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	font-family: inherit;
	font-size: var(--text-sm);
	background: var(--color-bg);
}

/* Checkout */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #order_review_heading {
	font-size: var(--text-lg);
	font-weight: var(--font-weight-light);
	margin-bottom: var(--space-md);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	padding: 0.85rem 1rem;
	border: 1.5px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: var(--text-sm);
	background: var(--color-bg-elevated);
	color: var(--color-text);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--color-text);
	outline: none;
}

.woocommerce-checkout #order_review {
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: 3px solid var(--color-terracotta);
	background: var(--color-bg-soft);
	border-radius: var(--radius-md);
	padding: 1rem 1.25rem;
	list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--color-terracotta);
}

.woocommerce-error {
	border-top-color: #b44;
}

/* Cart icon badge always readable */
.cart-count {
	opacity: 1;
	transform: scale(1);
	background: var(--color-border-strong);
	color: var(--color-text);
	min-width: 1.1rem;
}

.cart-count.has-items {
	background: var(--color-terracotta);
	color: #fff;
}

/* --------------------------------------------------------------------------
   20. Utility
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.section-cta {
	text-align: center;
	margin-top: var(--space-xl);
}

/* Sticky body when mobile menu open */
body.nav-open {
	overflow: hidden;
}