/* ==========================================================================
   Mamman Verkkokauppa – "Vanhan suomalaisen puodin uusi aika"
   Värirunko ja perustyypografia
   ========================================================================== */

:root {
	/* Palette */
	--cream:      #F4EFE4;
	--linen:      #E5D7C2;
	--forest:     #263C31;
	--brown:      #3B2B22;
	--terra:      #A85F43;
	--ochre:      #C49A56;
	--charcoal:   #252522;

	/* Sovellettu (kontrastikalibroitu) */
	--bg:          var(--cream);
	--bg-soft:     var(--linen);
	--text:        var(--charcoal);
	--text-muted:  #4A4338;      /* korkea kontrasti kerman päällä */
	--heading:     var(--forest);
	--accent:      var(--terra);
	--accent-text: #7E412B;     /* terracotta, tummennettu pienelle tekstille (6.84:1 kerman päällä) */
	--line:        #C9BCA3;      /* hieno katalogiviiva */
	--btn-bg:      var(--forest);
	--btn-text:    var(--cream);
	--btn-hover:   #1D2E26;
	--link:        var(--forest);

	/* Typografia */
	--font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
	--font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Mitta */
	--radius:     6px;
	--maxw:       1180px;
	--gutter:     24px;
	--head-space: clamp(48px, 8vw, 88px);
}

/* ==========================================================================
   Reset + perusta
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--btn-hover); }

h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 500;
	color: var(--heading);
	line-height: 1.14;
	margin: 0 0 0.5em;
	text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.22rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }

.site-container {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute !important; word-wrap: normal !important;
}

/* ==========================================================================
   Fokus-näkyvyys
   ========================================================================== */

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ==========================================================================
   Ylätunniste
   ========================================================================== */

.site-header {
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	position: relative;
	z-index: 20;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
}
.site-branding { display: flex; align-items: center; gap: 12px; }

.wordmark {
	font-family: 'Caveat', var(--font-serif);
	font-weight: 600;
	font-size: 2.6rem;
	letter-spacing: -0.005em;
	color: var(--heading);
	text-decoration: none;
	line-height: 1.05;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.wordmark:hover { color: var(--heading); }
.wordmark__sub {
	font-family: var(--font-sans);
	font-size: 0.62rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent-text);
	margin-top: 4px;
}

/* pieni "Mamma" käsinkirjoitusviiva – reunallisuus ilman karkkia */
.wordmark__mark {
	color: var(--accent);
	font-size: 1.15em;
	position: relative;
	display: inline-block;
}

/* Navigaatio */
.main-nav { display: flex; align-items: center; gap: 6px; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; align-items: center; }
.main-nav li a {
	color: var(--text);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.96rem;
	padding: 8px 12px;
	border-radius: var(--radius);
	transition: background-color 0.15s, color 0.15s;
}
.main-nav li a:hover { background: var(--bg-soft); color: var(--heading); }
.main-nav li.current-menu-item a, .main-nav li.current_page_item a { color: var(--heading); }

/* Ostoskori-kuvake */
.cart-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--forest);
	color: var(--cream);
	border-radius: var(--radius);
	padding: 8px 14px;
	text-decoration: none;
	font-weight: 500;
	font-size: 0.92rem;
	transition: background-color 0.15s;
}
.cart-badge:hover { background: var(--btn-hover); color: var(--cream); }
.cart-badge .cart-count {
	background: var(--cream);
	color: var(--forest);
	border-radius: 999px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.78rem;
	font-weight: 600;
}
.cart-badge .cart-count.hidden { display: none; }

/* Mobiilimenu-kytkin */
.nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 10px 12px;
	font-size: 0.95rem;
	color: var(--text);
	cursor: pointer;
	align-items: center;
	gap: 8px;
}
.nav-toggle[aria-expanded="true"] { background: var(--bg-soft); }

/* ==========================================================================
   Katalogi & tuotekortit
   ========================================================================== */

.woocommerce {
	/* Estetään kauppaan liittyvä ylimääräinen ulkoasu */
}
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 34px 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* WooCommerce-clearfix-pseudo vie grid-lapsen ensimmäisellä ruudulla — piilotetaan */
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.product-card, .product-card__media, .product-card img, .product-card svg { max-width: 100%; min-width: 0; }

.product-card__media {
	position: relative;
	display: block;
	background: var(--bg-soft);
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 4/4.6;
}
.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.woocommerce ul.products li.product:hover .product-card__media img { transform: scale(1.02); }

/* saatavuuspiste */
.stock-indicator {
	position: absolute;
	top: 12px; left: 12px;
	background: rgba(244,239,228,0.92);
	backdrop-filter: blur(2px);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 3px 10px;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text);
}
.stock-indicator.sold { background: rgba(37,37,34,0.85); color: var(--cream); border-color: transparent; }

.product-card__body {
	padding: 14px 2px 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}
.product-card__cat {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-text);
	font-weight: 600;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-serif);
	font-size: 1.08rem;
	color: var(--heading);
	margin: 0 0 2px;
	line-height: 1.3;
}
.woocommerce ul.products li.product .price {
	color: var(--text);
	font-weight: 600;
	font-size: 0.98rem;
	margin-top: auto;
	padding-top: 8px;
}
.woocommerce ul.products li.product .price .amount { color: var(--text); }
.woocommerce ul.products li.product .price .mamma-alv,
.product-summary .price .mamma-alv {
	display: block;
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--text-muted);
	margin-top: 3px;
}
.woocommerce ul.products li.product .price del { color: var(--text-muted); font-weight: 400; margin-right: 6px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* painikkeet korteissa */
.product-card__actions { margin-top: 10px; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--btn-bg);
	color: var(--btn-text);
	border-radius: var(--radius);
	padding: 10px 16px;
	font-weight: 500;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background-color 0.15s;
	width: 100%;
}
.woocommerce ul.products li.product .button:hover { background: var(--btn-hover); color: var(--btn-text); }
.woocommerce ul.products li.product .button.disabled, .woocommerce ul.products li.product .button:disabled {
	background: var(--bg-soft);
	color: var(--text-muted);
	cursor: not-allowed;
	border: 1px solid var(--line);
}
.woocommerce ul.products li.product a.added_to_cart {
	background: transparent;
	color: var(--forest);
	border: 1px solid var(--forest);
	margin-top: 8px;
}

/* Loppumyynti-kortti: ei painiketta, "Myyty"-merkki */
.product-card--sold .product-card__actions { display: none; }

/* ==========================================================================
   Katalogin ylätila (otsikko + suodatin)
   ========================================================================== */

.shop-banner {
	padding-top: 28px;
	padding-bottom: 8px;
}
.shop-banner h1 { margin-bottom: 0.2em; }
.mamma-catnav { margin-top: 4px; }
.shop-banner .subtitle { color: var(--text-muted); font-size: 1.05rem; max-width: 60ch; }

.woocommerce-breadcrumb { color: var(--text-muted); font-size: 0.86rem; margin-bottom: 8px; }
.woocommerce-breadcrumb a { color: var(--link); }

/* Kategoria-kokonaisuudet (archives) */
.term-description { color: var(--text-muted); max-width: 70ch; }

/* ==========================================================================
   Tuotesivu
   ========================================================================== */

.product-single { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 60px); padding-top: var(--head-space); }

/* Galleria */
.product-gallery { min-width: 0; width: 100%; }
.woocommerce-product-gallery {
	position: relative;
	background: var(--bg-soft);
	border-radius: var(--radius);
	overflow: hidden;
	align-self: start;
	min-width: 0;
}
.woocommerce-product-gallery img, .woocommerce-product-gallery svg, .product-gallery .flex-active-slide img, .product-gallery .flex-active-slide svg { width: 100%; height: auto; }
.flex-active-slide { min-width: 0; }
.woocommerce-product-gallery .flex-viewport { border-radius: var(--radius); min-width: 0; }
.woocommerce-product-gallery__wrapper { min-width: 0; }
.woocommerce-product-gallery svg { display: block; }
.woocommerce-product-gallery .mm-placeholder, .product-gallery svg { max-width: 100%; }
.woocommerce-product-gallery ol.flex-control-thumbs {
	list-style: none; margin: 0; padding: 10px; display: flex; gap: 10px; flex-wrap: wrap;
}
.woocommerce-product-gallery ol.flex-control-thumbs li { width: 72px; cursor: pointer; }
.woocommerce-product-gallery ol.flex-control-thumbs img {
	aspect-ratio: 1/1; object-fit: cover; border-radius: 4px; border: 2px solid transparent;
}
.woocommerce-product-gallery ol.flex-control-thumbs img.flex-active { border-color: var(--forest); }

/* Yhteenveto */
.product-summary h1.product_title { margin-bottom: 0.15em; }
.product-summary .woocommerce-product-details__short-description { color: var(--text-muted); }

.product-summary .price {
	font-family: var(--font-serif);
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--heading);
	margin: 14px 0;
}
.product-summary .price del { color: var(--text-muted); font-size: 1.1rem; margin-right: 8px; }
.product-summary .price ins { text-decoration: none; }

/* varastotila */
.woocommerce-product-details__stock-label { font-size: 0.85rem; margin-bottom: 8px; }
.in-stock { color: var(--forest); font-weight: 600; }
.out-of-stock { color: var(--brown); font-weight: 600; }

/* osto-ohjaus */
.woocommerce-variation-add-to-cart, form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
}
.woocommerce .quantity .qty {
	width: 74px;
	height: 46px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--text);
	padding: 0 10px;
	font-size: 1rem;
}
.single_add_to_cart_button, .woocommerce #respond input#submit, .woocommerce button.button.alt {
	background: var(--btn-bg);
	color: var(--btn-text);
	border: none;
	border-radius: var(--radius);
	padding: 13px 24px;
	font-weight: 600;
	font-size: 0.98rem;
	cursor: pointer;
	transition: background-color 0.15s;
	font-family: var(--font-sans);
}
.single_add_to_cart_button:hover, .woocommerce #respond input#submit:hover, .woocommerce button.button.alt:hover {
	background: var(--btn-hover);
	color: var(--btn-text);
}

/* Myyty: ei ostopainiketta */
.woocommerce .button.disabled, .single_add_to_cart_button.disabled { display: none; }

/* attribuutit (Lisätiedot-tyyli) */
.woocommerce-product-attributes {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.92rem;
}
.woocommerce-product-attributes th, .woocommerce-product-attributes td {
	border-bottom: 1px solid var(--line);
	padding: 8px 12px 8px 0;
	text-align: left;
	vertical-align: top;
}
.woocommerce-product-attributes th { font-weight: 600; color: var(--heading); width: 34%; white-space: nowrap; }

/* Tiedot-osiot tuotesivulla */
.product-mamman-tiedot {
	margin-top: 40px;
	border-top: 1px solid var(--line);
	padding-top: 28px;
	display: grid;
	gap: 26px;
}
.product-mamman-tiedot h3 { font-size: 1.05rem; margin-bottom: 4px; color: var(--heading); }
.product-mamman-tiedot .tiedot-block p { color: var(--text-muted); margin: 0; }

.reviews-section { margin-top: 44px; }

/* ==========================================================================
   Ostoskori
   ========================================================================== */

.cart-page { padding-top: var(--head-space); }
.cart-page h1 { margin-bottom: 0.4em; }
.woocommerce-cart-form { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }

.woocommerce table.shop_table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.95rem;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
	border: none;
	border-bottom: 1px solid var(--line);
	padding: 14px 10px 14px 0;
	text-align: left;
	vertical-align: middle;
}
.woocommerce table.shop_table th { font-weight: 600; color: var(--heading); font-size: 0.82rem; letter-spacing: 0.03em; }
.woocommerce table.shop_table td.product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; }
.woocommerce table.shop_table td.product-name a { font-weight: 600; color: var(--heading); text-decoration: none; }
.woocommerce table.shop_table td.product-remove a { color: var(--text-muted); text-decoration: none; font-size: 1.1rem; }
.woocommerce table.shop_table td.product-remove a:hover { color: var(--terra); }

.woocommerce .quantity .qty { height: 40px; }

/* Yhteenveto */
.cart-collaterals { padding: 0; }
.cart_totals h2 { font-size: 1.3rem; }
.woocommerce .cart_totals table.shop_table { border: 1px solid var(--line); border-radius: var(--radius); }
.woocommerce .cart_totals table.shop_table td, .woocommerce .cart_totals table.shop_table th { padding: 12px; }
.woocommerce .cart_totals .order-total .amount { font-family: var(--font-serif); font-size: 1.2rem; color: var(--heading); }

.woocommerce .cart_totals .wc-proceed-to-checkout a {
	background: var(--btn-bg);
	color: var(--btn-text);
	display: block;
	text-align: center;
	padding: 14px 20px;
	border-radius: var(--radius);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
}
.woocommerce .cart_totals .wc-proceed-to-checkout a:hover { background: var(--btn-hover); color: var(--btn-text); }

/* kuponki */
.woocommerce form.coupon { display: flex; gap: 10px; }
.woocommerce form.coupon .input-text { flex: 1; }

/* ==========================================================================
   Kassa
   ========================================================================== */

.checkout-page { padding-top: var(--head-space); }
.checkout-page h1 { margin-bottom: 0.4em; }

.woocommerce form.checkout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
.woocommerce form.checkout #customer_details { margin: 0; }
.woocommerce form.checkout .col-1, .woocommerce form.checkout .col-2 { float: none; width: auto; }

.woocommerce form .form-row { margin-bottom: 18px; }
.woocommerce form .form-row label {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
	font-size: 0.9rem;
	color: var(--heading);
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select,
.woocommerce form .form-row .select2-container .select2-selection {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	padding: 12px 14px;
	font-size: 1rem;
	color: var(--text);
	line-height: 1.4;
}
.woocommerce form .form-row .select2-container--default .select2-selection--single { height: auto; }
.woocommerce form .form-row textarea { min-height: 90px; }
.woocommerce form .form-row input:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { border-color: var(--forest); }

.woocommerce form .form-row .required { color: var(--terra); text-decoration: none; }

/* maksutavat */
.woocommerce #payment { background: var(--bg-soft); border-radius: var(--radius); padding: 20px; }
.woocommerce #payment ul.payment_methods { list-style: none; padding: 0; margin: 0; }
.woocommerce #payment ul.payment_methods li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.woocommerce #payment ul.payment_methods li:last-child { border-bottom: none; }
.woocommerce #payment ul.payment_methods label { font-weight: 600; color: var(--heading); }
.woocommerce #payment div.payment_box {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-top: 10px; padding: 12px;
	font-size: 0.88rem; color: var(--text-muted);
}
.woocommerce #payment #place_order { margin-top: 16px; width: 100%; font-size: 1.05rem; }

/* kassa-yhteenveto */
.woocommerce .checkout .order-review h3 { margin-bottom: 10px; }

/* ==========================================================================
   Kassa/ostoskori – virheet ja huomautukset
   ========================================================================== */

.woocommerce-error, .woocommerce-info, .woocommerce-message {
	border-left: 4px solid;
	border-radius: var(--radius);
	padding: 14px 18px;
	margin: 0 0 20px;
	list-style: none;
	font-size: 0.94rem;
	background: var(--bg-soft);
}
.woocommerce-error { border-color: var(--terra); }
.woocommerce-message { border-color: var(--forest); }
.woocommerce-info { border-color: var(--ochre); }
.woocommerce-error li, .woocommerce-message li, .woocommerce-info li { list-style: none; }
.woocommerce .return-to-shop a.button { margin-top: 8px; }

/* ==========================================================================
   Tilauksen vahvistus
   ========================================================================== */

.order-received { padding-top: var(--head-space); }
.order-received h1 { margin-bottom: 0.3em; }
.order-received .woocommerce-thankyou-order-received { color: var(--forest); font-weight: 600; font-size: 1.1rem; }

.order-summary-box { background: var(--bg-soft); border-radius: var(--radius); padding: 22px; margin: 20px 0; }
.woocommerce ul.order_details {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px;
	list-style: none; margin: 0; padding: 0; font-size: 0.9rem;
}
.woocommerce ul.order_details li { border-left: none; padding: 0; float: none; }
.woocommerce ul.order_details li strong { color: var(--heading); font-weight: 600; display: block; margin-top: 2px; }

.woocommerce .woocommerce-order-details table.shop_table, .woocommerce .woocommerce-customer-details {
	border: 1px solid var(--line); border-radius: var(--radius); padding: 4px;
}
.woocommerce .woocommerce-customer-details address { font-style: normal; color: var(--text); }

/* ==========================================================================
   My account
   ========================================================================== */

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation ul li { margin-bottom: 4px; }
.woocommerce-MyAccount-navigation ul li a {
	display: block; padding: 10px 14px; border-radius: var(--radius);
	color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.95rem;
}
.woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-MyAccount-navigation ul li a:hover { background: var(--bg-soft); color: var(--heading); }

/* ==========================================================================
   Etusivu
   ========================================================================== */

/* Hero */
.hero {
	position: relative;
	padding: clamp(56px, 8vw, 120px) 0;
	overflow: hidden;
}
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* tumma, hienovarainen vasemmalta: parantaa tekstin luettavuutta kuvan päällä */
	background: linear-gradient(90deg, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.42) 42%, rgba(10,10,10,0.15) 72%, rgba(10,10,10,0.05) 100%);
}
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px,5vw,72px); align-items: center; }
.hero__content { min-width: 0; }
.hero__eyebrow {
	font-size: 0.76rem; letter-spacing: 0.24em; text-transform: uppercase;
	color: var(--accent-text); font-weight: 600; margin-bottom: 14px;
}
.hero h1 { margin-bottom: 0.35em; }
.hero__lead { font-size: 1.12rem; color: var(--text-muted); max-width: 48ch; }
.hero__actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

.btn {
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--radius); padding: 13px 22px;
	font-weight: 600; font-size: 0.98rem; text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s;
	cursor: pointer; border: 1px solid transparent;
	font-family: var(--font-sans);
}
.btn--primary { background: var(--btn-bg); color: var(--btn-text); }
.btn--primary:hover { background: var(--btn-hover); color: var(--btn-text); }
.btn--ghost { background: transparent; color: var(--forest); border-color: var(--forest); }
.btn--ghost:hover { background: var(--forest); color: var(--cream); }

/* Hero-kuva (mieluummin oikea työkuva – korvaava paikka kun puuttuu) */
.hero__art {
	border-radius: var(--radius);
	overflow: hidden;
	position: relative;
	aspect-ratio: 5/4;
	background: var(--bg-soft);
}
.hero__art img { width: 100%; height: 100%; object-fit: cover; }

/* Yhteinen osio */
.section { padding: clamp(40px,6vw,72px) 0; }
.section--tint { background: var(--bg-soft); }
.section--line { border-top: 1px solid var(--line); }

.section-head { margin-bottom: 30px; }
.section-head h2 { margin-bottom: 0.15em; }
.section-head .section-kicker {
	font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--accent-text); font-weight: 600; margin-bottom: 8px;
}

/* Tuoteosiot etusivulla */
.shop-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 30px 24px; list-style: none; margin: 0; padding: 0;
}
.shop-grid li { margin: 0; }

/* Kategoriaosio */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 20px; }
.category-card {
	display: block; background: var(--bg-soft); border-radius: var(--radius);
	padding: 26px 24px; text-decoration: none; color: var(--heading);
	border: 1px solid transparent; transition: border-color 0.15s, background-color 0.15s;
}
.category-card:hover { border-color: var(--line); background: var(--bg); color: var(--heading); }
.category-card__name { font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: 4px; }
.category-card__count { color: var(--text-muted); font-size: 0.88rem; margin: 0; }

/* Mamman esittely */
.mamma-intro { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px,5vw,60px); align-items: center; }
.mamma-intro__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/4.2; background: var(--bg-soft); }
.mamma-intro__img img { width: 100%; height: 100%; object-fit: cover; }

/* Reissukassa -osio */
.reissukassa {
	position: relative;
	background: var(--forest);
	color: var(--cream);
	border-radius: var(--radius);
	padding: clamp(36px,6vw,60px);
	overflow: hidden;
}
.reissukassa::before {
	content: "";
	position: absolute; right: -60px; top: -60px;
	width: 260px; height: 260px; border-radius: 50%;
	background: radial-gradient(circle at center, rgba(195,165,220,0.28), transparent 70%);
}
.reissukassa h2 { color: var(--cream); }
.reissukassa p { color: rgba(244,239,228,0.88); max-width: 58ch; }
.reissukassa .btn--primary { background: var(--cream); color: var(--forest); }
.reissukassa .btn--primary:hover { background: #fff; }

/* ==========================================================================
   Mamman tarina -sivu
   ========================================================================== */

.page-hero { padding: clamp(38px,6vw,70px) 0 8px; }
.page-hero h1 { margin-bottom: 0.25em; }
.page-hero .sub { color: var(--text-muted); font-size: 1.08rem; max-width: 66ch; }

.prose { max-width: 72ch; }
.prose p { font-size: 1.04rem; }
.prose h2 { margin-top: 1.6em; }

/* ==========================================================================
   Yhteys-sivu
   ========================================================================== */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-info a { font-weight: 600; }
.contact-info .detail { margin-bottom: 22px; }
.contact-info h3 { font-size: 1.05rem; margin-bottom: 4px; }

/* ==========================================================================
   Alatunniste
   ========================================================================== */

.site-footer {
	background: var(--forest);
	color: rgba(244,239,228,0.85);
	margin-top: 72px;
}
.site-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
	padding: 48px 0 36px;
}
.site-footer h3, .site-footer .footer-wordmark {
	color: var(--cream);
	font-family: var(--font-serif);
	font-weight: 500;
	margin-bottom: 8px;
}
.site-footer a { color: rgba(244,239,228,0.85); }
.site-footer a:hover { color: var(--cream); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer__bottom {
	border-top: 1px solid rgba(244,239,228,0.18);
	padding: 18px 0;
	font-size: 0.82rem;
	color: rgba(244,239,228,0.6);
	display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.footer-wordmark { font-size: 1.3rem; }
.footer-wordmark__sub { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ochre); }

/* ==========================================================================
   Responsiivisuus
   ========================================================================== */

@media (max-width: 900px) {
	.product-single { grid-template-columns: 1fr; }
	.woocommerce-cart-form { grid-template-columns: 1fr; }
	.woocommerce form.checkout { grid-template-columns: 1fr; }
	.hero__inner { grid-template-columns: 1fr; }
	.mamma-intro { grid-template-columns: 1fr; }
	.contact-grid { grid-template-columns: 1fr; }
	.site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
	:root { --gutter: 18px; }
	.wordmark { font-size: 1.95rem; }
	/* Mobiilimenu */
	.nav-toggle { display: inline-flex; }
	.main-nav {
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: var(--bg);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 18px 30px rgba(0,0,0,0.08);
		flex-direction: column;
		align-items: stretch;
		padding: 10px var(--gutter) 18px;
		display: none;
	}
	.main-nav.open { display: block; }
	.main-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
	.main-nav li a { display: block; padding: 12px; }
	.cart-badge { justify-content: center; margin-top: 8px; width: 100%; }

	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
	.product-card__media { aspect-ratio: 4/4.9; }
	.product-card__cat { font-size: 0.66rem; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.98rem; }
	.woocommerce ul.products li.product .button { padding: 10px 8px; font-size: 0.85rem; }

	.shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
	.category-grid { grid-template-columns: 1fr 1fr; }
	.site-footer__inner { grid-template-columns: 1fr; gap: 30px; }

	/* vaaka-ylivuodot estetään */
	.woocommerce, .product-single, .cart-page, .checkout-page, .site-container { min-width: 0; }
	.woocommerce table.shop_table { font-size: 0.85rem; }
	.woocommerce table.shop_table td.product-thumbnail img { width: 48px; height: 48px; }
}

@media (max-width: 420px) {
	.woocommerce ul.products { grid-template-columns: 1fr 1fr; }
	.product-card__media { aspect-ratio: 4/4.6; }
}

/* ==========================================================================
   Liike (reduced motion)
   ========================================================================== */

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

/* ==========================================================================
   Saavutettavuus: suurennettu teksti
   ========================================================================== */

@media (min-width: 32rem) {
	html.zoomed2x .wordmark, html.zoomed2x .main-nav li a { font-size: auto; }
}

/* ==========================================================================
   Sivut
   ========================================================================== */

.simple-page { padding-top: var(--head-space); max-width: 820px; margin: 0 auto; }
.simple-page h1 { margin-bottom: 0.6em; }
.simple-page .entry-content p { font-size: 1.02rem; }
.simple-page .entry-content h2 { margin-top: 1.4em; }

/* Datan loppumaan: tuotesivun myyty-tila */
p.stock.out-of-stock { color: var(--brown); font-weight: 600; }

/* painike "katso tuotteet" – hero */
.hero__art img.hero-placeholder { object-fit: cover; }
/* Musta ja murrettu liila */
:root{--cream:#eee9f2;--linen:#28232d;--forest:#c3a5dc;--brown:#e0cde9;--terra:#b397cd;--ochre:#bba5cc;--charcoal:#eee9f2;--bg:#141216;--bg-soft:#221e27;--text:#eee9f2;--text-muted:#bcb5c4;--heading:#eee9f2;--accent:#c3a5dc;--accent-text:#c3a5dc;--line:#39323f;--btn-bg:#c3a5dc;--btn-text:#19131e;--btn-hover:#d6bce9;--link:#e4d4f0;--radius:3px}
body{background:var(--bg)}.site-header{background:#141216}.wordmark,.wordmark:hover{color:var(--heading)}.wordmark__sub{color:#aaa1b2;letter-spacing:.12em}.main-nav li a:hover{background:#29232f;color:#fff}.cart-badge{background:#2b2332;color:#e5d2f4;border:1px solid #4d3e59;border-radius:3px}.cart-badge:hover{background:#493551;color:white}.hero{padding:58px 0}.hero__inner{grid-template-columns:1.2fr .8fr;gap:72px}.hero h1{font-size:clamp(56px,7vw,88px);max-width:11ch;font-weight:400;letter-spacing:-.055em}.hero__eyebrow{color:#b5a1c7;letter-spacing:.12em}.hero__lead{max-width:42ch}.hero__art{border-radius:2px;aspect-ratio:1.12;background:#211a28;border:1px solid #41334d}.mamma-note{background:#211a28;align-items:flex-start;text-align:left;padding:44px;color:#e8d8f3}.mamma-note .section-kicker{color:#ac94bf;letter-spacing:.12em}.mamma-note__title{font-size:clamp(34px,3.5vw,48px);font-weight:400;line-height:1.28;margin:28px 0}.mamma-note__line,.mamma-note__signature{display:none}.mamma-note>p:not(.mamma-note__title){color:#b7a7c3;font-size:14px}.btn{border-radius:3px}.btn--primary,.reissukassa .btn--primary{background:#c3a5dc;color:#19131e}.btn--primary:hover,.reissukassa .btn--primary:hover{background:#dbc2ee;color:#19131e}.btn--ghost{border-color:#66556f;color:#e5d4f1}.btn--ghost:hover{background:#34273f;color:#fff;border-color:#a789bc}.product-card__media{border-radius:3px;background:#29222f}.product-card__body a{color:#eee9f2}.product-card__actions .button{border-color:#645270;color:#ddc7ed;border-radius:3px}.product-card__actions .button:hover{background:#c3a5dc;color:#19131e}.stock-indicator{background:#eee8f3;color:#271c2d;border-radius:2px}.stock-indicator.sold{background:#302936;color:#ddd1e5}.section--tint{background:#1c181f}.category-card{background:#211c26;border-color:#42354b;border-radius:3px;color:#eee9f2}.category-card:hover{background:#2d2235;border-color:#9e7eb5;color:white}.mamma-intro{grid-template-columns:.8fr 1.2fr}.mamma-intro__img{border-radius:2px;aspect-ratio:1.45;background:#211a28}.mamma-note--light{background:#211a28;color:#e8d8f3}.mamma-note--light>p:not(.mamma-note__title){color:#b7a7c3}.reissukassa{background:#281f30;border:1px solid #493652;border-radius:3px}.reissukassa h2{color:#eee9f2}.reissukassa p{color:#c9bdcf}.reissukassa .section-kicker{color:#c3a5dc}.site-footer{background:#0d0b10;border-top:1px solid #33283b;color:#bcb0c5}.site-footer a{color:#d4c6df}.site-footer h3,.site-footer .footer-wordmark{color:#eee9f2}.footer-wordmark__sub{color:#b99dcc}.site-footer__bottom{color:#b1a2bc;border-color:#352a3e}.nav-toggle{color:#eee9f2;border-color:#5b4867;border-radius:3px}.nav-toggle[aria-expanded="true"]{background:#31263a}.product-summary .price,.in-stock{color:#ddc7ed}
@media(max-width:900px){.hero__inner{gap:32px;grid-template-columns:1fr 1fr}.hero h1{font-size:64px}.mamma-note{padding:28px}}
@media(max-width:720px){.hero{padding:36px 0 42px}.hero__inner{grid-template-columns:1fr;gap:28px}.hero h1{font-size:64px;line-height:1.03}.hero__art{aspect-ratio:auto;min-height:0}.mamma-note{padding:25px 28px}.mamma-note__title{font-size:29px;margin:15px 0;line-height:1.25}.hero__art .mamma-note__title br{display:none}.hero__art .mamma-note__title{max-width:12ch}.hero__art .mamma-note .section-kicker{font-size:10px}.mamma-intro{grid-template-columns:1fr}.mamma-intro__img{aspect-ratio:auto}.main-nav{background:#19151e}.main-nav li a:hover{color:white}.reissukassa{padding:28px 24px}}
/* Tuoteryhmien selkeä oikealle osoittava nuoli. */
.category-card::after{content:'';width:22px;height:14px;top:34px;right:25px;background:currentColor;clip-path:polygon(0 44%,76% 44%,49% 8%,57% 0,100% 50%,57% 100%,49% 92%,76% 56%,0 56%);transition:transform .18s ease}
.category-card:hover::after,.category-card:focus-visible::after{transform:translateX(4px)}
/* Yhtenäinen tumma ilme myös kaupassa, korissa ja lomakkeissa. */
.woocommerce-sorting .btn[style*="background:var(--forest)"]{color:var(--btn-text)!important}
.woocommerce input,.woocommerce select,.woocommerce textarea,.entry-content input,.entry-content select,.entry-content textarea{background:#211b28;color:#eee9f2;border:1px solid #66556f;border-radius:3px;padding:12px;font:inherit;max-width:100%}
.woocommerce input::placeholder,.entry-content input::placeholder,.entry-content textarea::placeholder{color:#b9adc3}
.woocommerce a.button,.woocommerce button.button,.entry-content button[type="submit"],.entry-content input[type="submit"]{background:var(--btn-bg);color:var(--btn-text);border-radius:3px;border:0;padding:12px 20px;font:inherit;cursor:pointer}
.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--btn-hover);color:var(--btn-text)}
.woocommerce table.shop_table,.woocommerce #payment div.payment_box{background:var(--bg-soft);color:var(--text)}
.woocommerce #payment div.payment_box:before{border-bottom-color:var(--bg-soft)}
.woocommerce .cart_totals .wc-proceed-to-checkout a{color:var(--btn-text)}
.woocommerce .cart_totals .wc-proceed-to-checkout a:hover{color:var(--btn-text)}
.woocommerce form .form-row .select2-container .select2-selection,.select2-dropdown,.select2-search__field{background:#211b28;color:#eee9f2;border-color:#66556f}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:#eee9f2}
.woocommerce ul.products li.product a.added_to_cart{color:#ddc7ed}
.mamma-logo-link{display:block;flex:0 0 auto}.mamma-logo{width:84px;height:84px;object-fit:contain}.site-header__inner{padding-top:12px;padding-bottom:12px}.hero__art.hero__art--logo{border:0;background:transparent;border-radius:0;aspect-ratio:1;min-height:0;max-width:480px;width:100%;justify-self:center;overflow:visible}.hero__art--logo img{width:100%;height:auto;object-fit:contain}@media(max-width:720px){.mamma-logo{width:64px;height:64px}.site-branding{gap:10px;min-width:0}.site-branding .wordmark{font-size:30px}.hero__art.hero__art--logo{max-width:340px}.site-header__inner{gap:10px}.nav-toggle{padding:10px 8px}}
/* Etusivun logo pysyy esittelytekstin vieressä myös kapeassa näkymässä. */
.hero__inner{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center}
.hero__content{min-width:0}.hero__art.hero__art--logo{align-self:center;grid-column:2;grid-row:1}
@media(max-width:720px){
 .hero__inner{grid-template-columns:minmax(0,1fr) minmax(110px,.7fr);gap:18px;align-items:start}
 .hero__content{display:contents}
 .hero__eyebrow{grid-column:1/-1;margin:0;font-size:10px}
 .hero h1{grid-column:1;grid-row:2;font-size:clamp(34px,7.2vw,51px);margin:0;align-self:center}
 .hero__art.hero__art--logo{grid-column:2;grid-row:2/4;align-self:start;max-width:250px}
 .hero__lead{grid-column:1;grid-row:3;font-size:14px;line-height:1.65;margin:0}
 .hero__actions{grid-column:1/-1;grid-row:4;margin-top:4px}
}

/* Hero-otsikko: Caveat-käsiala + teeman sävy, yhdelle riville (vaakaan), mustat reunat */
.hero h1 {
	font-family: 'Caveat', var(--font-serif);
	font-weight: 600;
	color: var(--accent, #c3a5dc);
	letter-spacing: 0.005em;
	white-space: nowrap;
	max-width: none;
	-webkit-text-stroke: 2px #000;
	paint-order: stroke fill;
	text-shadow: 0 2px 4px rgba(0,0,0,0.55);
}
@media (max-width: 720px) {
	.hero h1 { font-weight: 600; }
}

/* "Mamman · Verkkokauppa" -wordmark liilaksi */
.site-branding .wordmark, .wordmark {
	color: var(--accent, #c3a5dc);
}
.site-branding .wordmark:hover, .wordmark:hover { color: var(--accent, #c3a5dc); }

/* Navigaatio (Kauppa / Mamman tarina / Yhteys) liilaksi */
.main-nav li a {
	color: var(--accent, #c3a5dc);
}
.main-nav li a:hover { color: var(--accent, #c3a5dc); }
.main-nav li.current-menu-item a, .main-nav li.current_page_item a { color: var(--accent, #c3a5dc); }

/* Mobiili: wordmark yhdelle riville ja mahtuu yläpalkkiin */
.wordmark__line { display: inline; white-space: nowrap; }
@media (max-width: 720px) {
	.site-branding { gap: 10px; }
	.site-branding .wordmark, .wordmark { font-size: 22px; letter-spacing: 0; }
	.site-branding .wordmark__line { white-space: nowrap; }
	.site-header__inner { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
	.mamma-logo-link .mamma-logo { width: 48px; height: 48px; }
	.nav-toggle { padding: 8px 10px; font-size: 13px; }
}

/* Hero-tekstit: vaalea, hyvin erottuva kuvan päällä */
.hero__lead { color: #F8F5EE; }
.hero__eyebrow { color: #F3E8D8; }