/*
Theme Name: YK Collection
Theme URI: https://ykcollection.com/
Author: YK Collection
Author URI: https://ykcollection.com/
Description: Child theme of Twenty Twenty-Five for ykcollection.com — the Yrjö Kukkapuro furniture collection. Minimal, generous whitespace, imagery-led.
Template: twentytwentyfive
Version: 0.13.0
Requires at least: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ykcollection
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, translation-ready, wide-blocks, block-styles
*/

/*
 * Design decisions belong in theme.json wherever theme.json can express them.
 * This file is only for what it cannot: pseudo-elements, complex selectors,
 * WooCommerce markup we do not control.
 *
 * Loaded after the parent stylesheet — see functions.php.
 */

/*
 * Shared motion and hairline tokens.
 *
 * theme.json has no vocabulary for either, and every interactive element on the
 * site should ease the same way — a single slow ease-out, never a bounce. The
 * long duration is for image cross-fades, the short one for controls, where
 * anything slower feels unresponsive rather than considered.
 */
:root {
	--yk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--yk-fast: 220ms;
	--yk-slow: 450ms;
	--yk-hairline: rgba(58, 50, 41, 0.14);

	/* Card image plate. Square at four across: a portrait plate that narrow
	   makes a row taller than a screen and the products smaller than the space
	   around them. */
	--yk-tile-ratio: 1 / 1;

	/*
	 * Plate colour. Not a brand colour and not in theme.json on purpose: it is
	 * a surface the product sits on, never a colour anything is set in.
	 *
	 * Third iteration, each rejected by measurement. Beige sat 36 levels off
	 * the page and competed with the product. #F5F4F1 was quiet but warm —
	 * R−B of 4 is enough to read as beige against a white page. A cool tint
	 * (#F4F4F5) and white-with-a-hairline were then rendered side by side, and
	 * the hairline won: two dozen tinted rectangles read as a shop template,
	 * two dozen hairline frames read as a printed catalogue. The boundary now
	 * comes from the line, not from a tint, so there is no tint to misread.
	 */
	--yk-plate: #FFFFFF;
	--yk-plate-line: #EBEBEC;
	--yk-plate-line-hover: #D6D5D3;
}

/*
 * Header navigation (parts/header.html).
 *
 * The dropdown's failure mode was structural: the core submenu inherits the
 * navigation's background, the navigation has none, and so the panel was a
 * transparent rectangle with page content shining through between the rows.
 * It becomes a surface of its own here — white, hairline-edged, floating on
 * a soft shadow — with the same quiet typography as the rest of the site.
 */
.wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	/* 1rem, not the small preset: the top-row links read too small
	 * (katselmointi 31.7.: Pete; 15px oli yhä liian pieni). Dropdown rows
	 * opt back into small below. */
	font-size: 1rem;
	letter-spacing: 0.03em;
	text-decoration: none;
}

/* Design-löytöjä stands out in the top row: brand bronze, not red (Kimmo:
 * huomioväri, mutta ei punainen). Deepened toward ink so the small text
 * keeps AA contrast on white. */
.wp-block-navigation-item.yk-nav-loydot > .wp-block-navigation-item__content {
	color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, var(--wp--preset--color--ink));
	font-weight: 600;
}

.wp-block-navigation-item.yk-nav-loydot > .wp-block-navigation-item__content .wp-block-navigation-item__label {
	background-image: linear-gradient(currentColor, currentColor);
}

/* The label underlines itself in from the left, like the product names. */
.wp-block-navigation .wp-block-navigation-item__label {
	background-image: linear-gradient(var(--wp--preset--color--ink), var(--wp--preset--color--ink));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	padding-bottom: 2px;
	transition: background-size var(--yk-fast) var(--yk-ease);
}

.wp-block-navigation .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
.wp-block-navigation .wp-block-navigation-item__content[aria-current] .wp-block-navigation-item__label {
	background-size: 100% 1px;
}

.wp-block-navigation .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--muted);
}

/*
 * The dropdown panel. Desktop only: below the overlay breakpoint the same
 * markup renders inside the full-screen menu, where a floating white card
 * with a shadow would be a box inside a box.
 */
@media (min-width: 600px) {
	/* Three classes, deliberately: core paints this panel with
	   `background-color: inherit` at (0,3,0), and anything weaker loses the
	   tie and leaves the panel transparent — the original bug. */
	.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		z-index: 40;
		min-width: 15rem;
		padding: 1.3rem 1.1rem 1.1rem;
		border: 1px solid var(--yk-hairline);
		border-radius: 12px;
		background-color: var(--wp--preset--color--base);
		box-shadow: 0 24px 56px rgba(58, 50, 41, 0.14), 0 4px 12px rgba(58, 50, 41, 0.06);
	}

	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		padding: 0.55rem 0.85rem;
		border-radius: 8px;
		font-size: var(--wp--preset--font-size--small);
		letter-spacing: 0.02em;
		transition: background-color var(--yk-fast) var(--yk-ease);
	}

	/* Rows answer with the brand beige; the travelling underline stays a
	   top-level gesture and would double-signal inside a panel. */
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
		background-image: none;
	}

	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		background-color: var(--wp--preset--color--beige);
	}

	/* Sixteen series in one column is a curtain; from thirteen items up the
	   panel folds into two. */
	.wp-block-navigation ul.wp-block-navigation__submenu-container:has(> li:nth-child(11)) {
		display: grid;
		grid-template-columns: repeat(2, minmax(11.5rem, 1fr));
	}

	/* The panel arrives instead of appearing: a short rise with the fade.
	   Core drives visibility and opacity; the transform rides along. */
	.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		transform: translateY(6px);
		transition: transform var(--yk-fast) var(--yk-ease), opacity var(--yk-fast) var(--yk-ease), visibility var(--yk-fast);
	}

	.wp-block-navigation .has-child:hover .wp-block-navigation__submenu-container,
	.wp-block-navigation .has-child:focus-within .wp-block-navigation__submenu-container {
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .wp-block-navigation-item__label,
	.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		transition: none;
		transform: none;
	}
}

/*
 * Header search (parts/header.html).
 *
 * An icon that expands into a field, scoped to products. It exists for the
 * third of the catalogue that nobody browses to: spare parts with exact
 * names and the Moderno model codes — L-28 is typed, not found in a menu.
 */
.yk-header-search .wp-block-search__button {
	margin: 0;
	padding: 0.35rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: opacity var(--yk-fast) var(--yk-ease);
}

.yk-header-search .wp-block-search__button:hover {
	opacity: 0.6;
}

.yk-header-search .wp-block-search__button svg {
	width: 1.2rem;
	height: 1.2rem;
}

.yk-header-search .wp-block-search__input {
	padding: 0.45rem 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
}

.yk-header-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
}

.yk-header-search .wp-block-search__input:focus-visible {
	outline: none;
	border-bottom-width: 2px;
}

/* The always-visible field: an underline, no box. The icon inside is the
   submit button, so the form works exactly the same without JavaScript. */
.yk-header-search .wp-block-search__inside-wrapper {
	border: 0;
	border-bottom: 1px solid var(--yk-hairline);
	padding: 0;
	transition: border-color var(--yk-fast) var(--yk-ease);
}

.yk-header-search .wp-block-search__inside-wrapper:focus-within {
	border-bottom-color: var(--wp--preset--color--ink);
}

/* The cart icon wears the accent, as the account icon (a link, so it got
   the global link color) did before it was removed. The button would
   otherwise inherit ink — and at the stock 24px it disappeared next to
   the search field, so it steps up a size. */
.yk-header-tools .wc-block-mini-cart__button {
	color: var(--wp--preset--color--accent);
}

.yk-header-tools .wc-block-mini-cart__icon {
	width: 1.875rem;
	height: 1.875rem;
}

/* The live-search panel (assets/js/live-search.js): the same surface as the
   navigation dropdowns, hung under the field. */
.yk-header-search {
	position: relative;
}

.yk-live-search {
	position: absolute;
	z-index: 45;
	top: calc(100% + 0.5rem);
	right: 0;
	width: min(26rem, calc(100vw - 2rem));
	max-height: min(30rem, 70vh);
	overflow-y: auto;
	padding: 0.5rem 0;
	border: 1px solid var(--yk-hairline);
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 16px 40px rgba(58, 50, 41, 0.12);
}

.yk-live-search[hidden] {
	display: none;
}

.yk-live-search__heading {
	margin: 0.6rem 1.25rem 0.3rem;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.5625rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.yk-live-search__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.yk-live-search__option {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.5rem 1.25rem;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	cursor: pointer;
}

/* One highlight for pointer and keyboard alike, as in the dropdowns. */
.yk-live-search__option:hover,
.yk-live-search__option[aria-selected="true"] {
	background-color: var(--wp--preset--color--beige);
}

.yk-live-search__thumb {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border: 1px solid var(--yk-plate-line);
	background: var(--yk-plate);
}

.yk-live-search__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.yk-live-search__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.yk-live-search__price {
	flex: none;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

.yk-live-search__all {
	display: block;
	margin-top: 0.4rem;
	padding: 0.7rem 1.25rem;
	border-top: 1px solid var(--yk-hairline);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	text-decoration: none;
}

.yk-live-search__all:hover,
.yk-live-search__all[aria-selected="true"] {
	background-color: var(--wp--preset--color--beige);
}

.yk-live-search__empty {
	margin: 0;
	padding: 0.8rem 1.25rem;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 781px) {
	.yk-header-search .wp-block-search__inside-wrapper {
		width: 9.5rem !important;
	}
}

/*
 * Six top-level links share the row since the katselmointi additions
 * (Design-löytöjä, Varaosat). On mid-width laptops the search field's
 * desktop luxury width is what pushed the tools onto a second, 198px-tall
 * row — so the field and the gaps give way first, the links never.
 */
/* With Ajankohtaista in the row the full-size header no longer fits the
 * wide column even on a large screen, but there the shortfall is small —
 * a gently reduced tier keeps the links breathing. The harder squeezes
 * below apply only where the viewport itself runs out. */
@media (min-width: 1500px) {
	.yk-header .wp-block-navigation,
	.yk-header .wp-block-navigation__container {
		gap: 1.25rem;
	}

	.yk-header .wp-block-navigation-item__content {
		font-size: 1rem;
	}

	.yk-header-search .wp-block-search__inside-wrapper {
		width: 10rem !important;
	}
}

@media (min-width: 782px) and (max-width: 1499px) {
	.yk-header > .wp-block-group.alignwide {
		gap: 0.8rem;
	}

	.yk-header .wp-block-navigation,
	.yk-header .wp-block-navigation__container {
		gap: 0.7rem;
	}

	.yk-header .wp-block-navigation-item__content {
		font-size: 0.9375rem;
	}

	.yk-header-tools {
		gap: 0.5rem;
	}

	.yk-header-search .wp-block-search__inside-wrapper {
		width: 8rem !important;
	}
}

/* With Ajankohtaista in the row, the narrow half of the squeeze range
 * still wrapped — everything shrinks one more step. */
@media (min-width: 782px) and (max-width: 1199px) {
	.yk-header .wp-block-site-logo img {
		width: 118px;
		height: auto;
	}

	.yk-header .wp-block-navigation,
	.yk-header .wp-block-navigation__container {
		gap: 0.45rem;
	}

	.yk-header .wp-block-navigation-item__content {
		font-size: 0.875rem;
	}

	.yk-lang-switcher a {
		padding: 0.2rem 0.55rem;
		font-size: 0.6875rem;
	}

	.yk-header-search .wp-block-search__inside-wrapper {
		width: 5.25rem !important;
	}
}

/*
 * One header row on a phone. At the overlay breakpoint the row held logo,
 * burger, field and icons at desktop sizes and wrapped to two rows, 170px
 * tall — a fifth of the screen before any content. Everything shrinks a
 * step and the row holds.
 */
@media (max-width: 599px) {
	header.wp-block-group {
		padding-top: var(--wp--preset--spacing--20);
		padding-bottom: var(--wp--preset--spacing--20);
	}

	/* Measured to hold one row at 390px: 63 + 12 + 24 + 12 + 176 = 287
	   against a 311px content row. The desktop gaps alone broke it. */
	header.wp-block-group > .wp-block-group.alignwide {
		gap: 12px;
	}

	header.wp-block-group .wp-block-site-logo img {
		width: auto;
		max-height: 44px;
	}

	.yk-header-tools {
		gap: 0.5rem;
	}

	.yk-header-search .wp-block-search__inside-wrapper {
		width: 7.5rem !important;
	}

	.yk-header-search .wp-block-search__input {
		padding-left: 0.4rem;
		padding-right: 0.4rem;
		font-size: 0.75rem;
	}
}

/*
 * Below 480px even the shrunken row loses by a few pixels, and shaving them
 * clips the placeholder. So the narrowest screens get the arrangement on
 * purpose instead of by accidental wrap: logo and menu on the first line,
 * and the search field full-width on its own line with the icons beside it —
 * the pattern small-screen shops use.
 */
@media (max-width: 480px) {
	.yk-header-tools {
		/* flex-basis alone lets the row size to its content and overflow
		   the screen; the explicit width is what actually pins it. */
		flex-basis: 100%;
		width: 100%;
		max-width: 100%;
	}

	.yk-header-tools .yk-header-search {
		flex: 1;
		/* Flexbox refuses to shrink below the input's intrinsic width
		   without this, and the row overflows the screen. */
		min-width: 0;
	}

	.yk-header-search .wp-block-search__inside-wrapper {
		width: 100% !important;
		min-width: 0;
	}

	.yk-header-search .wp-block-search__input {
		min-width: 0;
	}

	.yk-header-search .wp-block-search__input {
		font-size: 0.875rem;
	}
}

/*
 * Front page hero.
 *
 * The cover block's minHeight attribute only takes a single value + unit, which
 * cannot express a viewport-relative height with sane bounds. Setting it here
 * instead. The photograph must always reach the bottom of the first viewport:
 * an earlier 50rem cap left a white strip of the next section peeking above
 * the fold on tall screens (the client caught it the moment the admin bar's
 * 32px stopped masking it). Viewport minus the header's ~130px; where the
 * header wraps taller the hero merely overshoots the fold, which is invisible.
 * The compound selector outranks core's `.wp-block-cover { min-height: 430px }`.
 */
.wp-block-cover.yk-hero {
	min-height: max(32rem, calc(100svh - 130px));
}

/*
 * The cover's 120px vertical padding is inline in the block markup, hence
 * the !important. On short viewports (a 750px laptop) that padding forced
 * content + padding past the fold-fitted min-height, so the photograph ran
 * 84px under the fold; the padding yields on short screens instead. The
 * content stays vertically centred, so nothing moves while min-height
 * governs — this only stops the overflow.
 */
.wp-block-cover.yk-hero {
	padding-top: min(var(--wp--preset--spacing--60), 7svh) !important;
	padding-bottom: min(var(--wp--preset--spacing--60), 7svh) !important;
}

/*
 * The overlay is no longer a dim but a page: white dissolving into the
 * photograph from the left, the same melt language as the series heroes.
 * The veil was first written at 0.96 fading out by 75%; the client asked for
 * more photograph, and the measurements had room to give it — at 0.85 fading
 * out by 60% the worst point in the text column still reads 8.2:1 at three
 * widths, nearly double the AA floor. The subtitle is ink rather than muted
 * for the same measured reason: muted fails at the worst pixel.
 */
/*
 * The group rides the wide layout line — the same left edge the logo and
 * every section below use — and only its contents are capped to a column.
 * Centred by CSS rather than by the block layout: a hand-written cover
 * lacks the generated wp-container classes that alignwide depends on.
 */
/* The flex cover shrinks a bare inner container to its content; widen it so
   the auto margins below have something to centre within. Important because
   an equal-specificity width wins the tie somewhere in the block styles, and
   the hand-written cover lacks the layout classes that would settle it. */
.yk-hero .wp-block-cover__inner-container {
	width: 100% !important;
}

.yk-hero__text {
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
}

.yk-hero__text > * {
	/* Never wider than the screen: a fixed column would clip the headline on
	   a phone instead of wrapping it. */
	max-width: min(34rem, 100%);
}

.yk-hero__title {
	font-family: var(--wp--preset--font-family--playfair);
	font-size: clamp(2.75rem, 2rem + 4vw, 5rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

@media (max-width: 781px) {
	/*
	 * Stacked screens turn the ramp vertical: text on the veiled top, the
	 * photograph emerging below it. !important is unavoidable here — the
	 * gradient is an inline style on the cover's own span.
	 */
	.yk-hero .wp-block-cover__gradient-background {
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 48%, rgba(255, 255, 255, 0) 76%) !important;
	}

	.wp-block-cover.yk-hero {
		align-items: flex-start;
		/* 42rem pakotti vaakakuvasta kapean pystysiivun — matalampi ikkuna
		   zoomaa vähemmän ja kuvasta näkyy enemmän. */
		min-height: min(34rem, 90svh);
	}

	/* Kapeassa siivussa 65 % alhaalla näytti lähinnä lattiaa; rajaus
	   viritetty niin että Karuselli istuu siivun keskelle. Inline-tyyli
	   kuvassa vaatii importantin. */
	.yk-hero .wp-block-cover__image-background {
		object-position: 66% 28% !important;
	}
}

/*
 * ---------------------------------------------------------------------------
 * Front page
 * ---------------------------------------------------------------------------
 */

/*
 * Hand-placed image plates (inc/product-card.php).
 *
 * The category and series pictures are the same cut-outs on white as the
 * catalogue's, and floated on the page the same way. Same treatment as the
 * cards, opted into from the template.
 */
.yk-plate {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: 0;
	aspect-ratio: 1;
	background-color: var(--yk-plate);
}

.yk-plate a {
	display: block;
	height: 100%;
}

.yk-plate img {
	display: block;
	width: 100%;
	height: 100%;
	/* Contain, not the default fill: a non-square studio shot must scale
	   into the square plate, not stretch to it. Square images are
	   unaffected, and cover-fitted photos declare is-photo themselves. */
	object-fit: contain;
	transition: transform var(--yk-slow) var(--yk-ease);
}

.yk-plate img.is-cutout {
	object-fit: contain;
	mix-blend-mode: multiply;
	transform: scale(var(--yk-s, 0.84)) translate(var(--yk-tx, 0%), var(--yk-ty, 0%));
}

.yk-plate img.is-photo {
	object-fit: cover;
}

.yk-plate a:hover img.is-photo {
	transform: scale(1.03);
}

.yk-plate a:hover img.is-cutout {
	transform: scale(calc(var(--yk-s, 0.84) * 1.03)) translate(var(--yk-tx, 0%), var(--yk-ty, 0%));
}

.yk-plate a:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

/*
 * Front-page section header rows.
 *
 * Each card section opens with its name on the left and, where a landing
 * page exists, the way to the rest of the catalogue on the right. This also
 * repairs the heading order: the card names are h3, and without these h2s
 * the outline jumped straight from the page title to them.
 */
.yk-row-head h2 {
	margin: 0;
}

.yk-row-head__link {
	margin: 0;
}

.yk-row-head__link a {
	/* 44px:n kosketusalue ilman visuaalista muutosta. */
	display: inline-block;
	padding-block: 0.75rem;
	margin-block: -0.75rem;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	text-decoration: none;
	border-bottom: 1px solid var(--yk-hairline);
	transition: border-color var(--yk-fast) var(--yk-ease);
}

.yk-row-head__link a:hover {
	border-bottom-color: var(--wp--preset--color--ink);
}

/*
 * On a phone the stacked full-width cards made the page 6 770px long — seven
 * near-square images in single file. Two across halves the walk, the same
 * rhythm the product archive already uses.
 */
@media (max-width: 781px) {
	.wp-block-columns.yk-card-row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	}

	.yk-card-row > .wp-block-column {
		min-width: 0;
	}

	.yk-card-row h3 {
		font-size: var(--wp--preset--font-size--large);
	}
}

/*
 * Editorial band.
 *
 * A photograph edge to edge with the copy on a beige panel laid over its left
 * side. The text is not set on the picture itself: every interior in this
 * library is a bright white-walled room, and white type over the lightest of
 * them measured 1.2:1 — the scrim needed to fix that would have cost the
 * photograph everything it was picked for.
 *
 * Below the breakpoint the panel stops floating and simply follows the image,
 * which is the only thing that works on a phone.
 */
.yk-band {
	position: relative;
}

.yk-band__image {
	margin: 0;
}

.yk-band__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.yk-band__panel {
	position: relative;
}

/*
 * Muted is the natural colour for a label this quiet, but muted on beige
 * measures 3.79:1 — under AA for text this size. Ink, kept recessive by the
 * size and the tracking instead of by the colour.
 */
.yk-eyebrow {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.16em; /* yhteinen kicker-token kampanjan ja footerin kanssa */
	text-transform: uppercase;
}

@media (min-width: 900px) {
	.yk-band__image img {
		aspect-ratio: 21 / 9;
	}

	.yk-band__panel {
		position: absolute;
		top: 50%;
		left: clamp(2rem, 6vw, 7rem);
		width: min(30rem, 38vw);
		transform: translateY(-50%);
	}
}

/*
 * Split section.
 *
 * Deliberately uneven, and the picture runs to the edge of the screen rather
 * than stopping at the content width — the page needs one place where the grid
 * is broken, or every section reads as another row of cards.
 */
.yk-split__row {
	margin: 0;
}

.yk-split__media {
	align-self: stretch;
}

.yk-split__media figure,
.yk-split__media img {
	display: block;
	height: 100%;
	margin: 0;
}

.yk-split__media img {
	width: 100%;
	object-fit: cover;
}

@media (min-width: 782px) {
	.yk-split__media img {
		aspect-ratio: 4 / 3;
	}

	.yk-split__text {
		max-width: 40rem;
	}
}

/*
 * Archive header (templates/archive-product.html).
 *
 * Type only. The photograph band was tried — three rounds of it — and the
 * conclusion is in the git history: a 5:1 strip suits photographs composed
 * for it, and this catalogue is square studio shots. However the strip was
 * cropped it either cut the products or showed empty wall, so the header now
 * makes its impression the way the reference houses do, with scale and space
 * instead of a decoration that fights its source material.
 */
.yk-archive-head .yk-archive-title,
.yk-series-hero .yk-archive-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair);
	/* A step past the display size: this is the one place the type carries
	   the whole header, so it is allowed to be enormous. */
	font-size: clamp(3rem, 2rem + 5.5vw, 6rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.yk-archive-lead {
	max-width: 60ch;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
}

.yk-archive-lead:empty {
	display: none;
}

/* The search phrase does not deserve headline scale; the count row below
   answers the question the visitor actually has. */
.yk-archive-head .yk-search-title {
	font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
	line-height: 1.2;
}

/*
 * Series and category hero (inc/series-intro.php).
 *
 * One composed block instead of three stacked layers: title, tagline and
 * lead in the left column, the photograph vertically centred beside them.
 * The client's screenshot of the stacked version showed the failure mode —
 * a title floating in a void and the photograph's subject below the fold.
 * Composed, the whole gesture fits one viewport.
 */
.yk-series-hero {
	padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--base);
}

.yk-series-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(1rem, 2vw, 2.5rem);
	align-items: center;
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-right, 2rem);
}

.yk-series-hero .yk-archive-title {
	margin-bottom: clamp(1.2rem, 2.5vw, 2.2rem);
}

.yk-series-hero__tagline {
	margin: 0 0 1.2rem;
	font-family: var(--wp--preset--font-family--playfair);
	font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.3;
}

.yk-series-hero__lead {
	margin: 0;
	max-width: 36rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.85;
}

/*
 * The photograph is not a box beside the text; it melts into it. Its left
 * edge dissolves to transparent with a mask, so there is no hard line where
 * it meets the text, and the text column overhangs the dissolved zone
 * slightly, interlocking the two. Its right edge sits on the layout's own
 * boundary, aligned with everything below.
 *
 * The overhang is bounded by measurement, not taste: text may reach only the
 * first 8% of the image, where the mask is still fully transparent, so ink
 * always sits on pure page white and AA cannot be lost. From 8% the mask
 * ramps to opaque at 26%.
 *
 * The crop to 5:4 keeps the hero at text height; the focal point keeps the
 * furniture, which sits low-centre in the client's photographs.
 */
/*
 * The photograph ends on the layout's own right edge — the same line the
 * folio bar and the product grid end on below it. A full viewport bleed was
 * tried and rejected by the client: on a wide screen the picture ran into
 * no-man's-land past the content column and read as a mistake. The melt
 * lives entirely on the left edge, where the image meets the text.
 */
.yk-series-hero__media {
	margin: 0;
	justify-self: stretch;
}

.yk-series-hero__media img {
	display: block;
	width: 100%;
	height: clamp(420px, 33vw, 600px);
	object-fit: cover;
	object-position: center 62%;
	-webkit-mask-image: linear-gradient(to right, transparent 8%, #000 26%);
	mask-image: linear-gradient(to right, transparent 8%, #000 26%);
}
/* The interlock: the text layer overhangs the transparent zone. */
.yk-series-hero__text {
	position: relative;
	z-index: 2;
	margin-right: -3rem;
}

/*
 * Specimens are already made of page white and need none of this — a mask
 * would eat the product itself.
 */
.yk-series-hero__media.is-specimen {
	margin-right: 0;
	justify-self: end;
	max-width: 34rem;
}

.yk-series-hero__media.is-specimen img {
	aspect-ratio: auto;
	object-fit: unset;
	-webkit-mask-image: none;
	mask-image: none;
}

@media (max-width: 781px) {
	.yk-series-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Stacked, the dissolve reads as a printing error: plain image, no bleed. */
	.yk-series-hero__text {
		margin-right: 0;
	}

	.yk-series-hero__media {
		justify-self: start;
		margin-right: 0;
		max-width: 30rem;
	}

	.yk-series-hero__media img {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

.yk-series-story {
	margin-top: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--beige);
}

/* Ink on beige (10.6:1); muted would fail here, so the block stays in ink. */
.yk-series-story__inner {
	max-width: 46rem;
	margin-inline: auto;
}

.yk-series-story__inner p {
	margin: 0;
	line-height: 1.85;
}

.yk-series-story__inner p + p {
	margin-top: 1.4rem;
}

/*
 * Results count and sorting.
 *
 * WooCommerce ships a bare browser <select> here, which is the single most
 * obvious tell that a shop was assembled rather than designed. Stripped back to
 * a hairline and a chevron.
 */
/*
 * Ruled above and below, so the count-and-sorting row reads as a catalogue's
 * folio line between the headline and the plates. Tried with the top rule off;
 * without it the row floats between two open spaces.
 */
.yk-archive-bar {
	border-top: 1px solid var(--yk-hairline);
	border-bottom: 1px solid var(--yk-hairline);
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
}

.yk-archive-bar .woocommerce-ordering,
.yk-archive-bar .wc-block-catalog-sorting {
	margin: 0;
}

.yk-archive-bar select {
	appearance: none;
	padding: 0.35rem 1.7rem 0.35rem 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	/* Chevron, ink at 60%, drawn rather than shipped as an asset. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%233A3229' stroke-width='1.3' stroke-opacity='.6'/%3E%3C/svg%3E");
	background-position: right center;
	background-repeat: no-repeat;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: opacity var(--yk-fast) var(--yk-ease);
}

.yk-archive-bar select:hover {
	opacity: 0.7;
}

.yk-archive-bar select:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 4px;
}

/*
 * Product card image plate (inc/product-card.php).
 *
 * One fixed portrait shape for every product, so the grid keeps its rhythm
 * whatever the source photograph was. Cut-outs are inset and multiplied onto
 * the plate, which turns their white sweep into exactly the plate colour;
 * photographs cover the plate untouched. See the module for why.
 */
.yk-tile {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: 0;
	aspect-ratio: var(--yk-tile-ratio);
	background-color: var(--yk-plate);
}

/*
 * The hairline is an overlay rather than a border or an inset shadow on the
 * tile itself: a cover-fitted photograph paints edge to edge and would bury
 * either. Its darkening is the hover cue, alongside the cross-fade — a frame
 * waking up, not an effect.
 */
.yk-tile::after,
.yk-plate::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	box-shadow: inset 0 0 0 1px var(--yk-plate-line);
	pointer-events: none;
	transition: box-shadow var(--yk-fast) var(--yk-ease);
}

.yk-tile:hover::after,
.yk-plate:hover::after {
	box-shadow: inset 0 0 0 1px var(--yk-plate-line-hover);
}

.yk-tile__link {
	position: absolute;
	inset: 0;
	display: block;
}

.yk-tile .yk-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	/* Core's `.wp-block-post-featured-image img { height: auto }` is more
	   specific than a single class, and would leave a non-square photograph
	   sitting at the top of the plate with beige under it. */
	height: 100%;
	transition: opacity var(--yk-slow) var(--yk-ease), transform var(--yk-slow) var(--yk-ease);
}

/*
 * Cut-outs are normalised, not merely contained. The fixed inset used to be
 * 9% for everyone, but the photographs disagree about how much of the frame
 * the product occupies (0.62–0.97 measured across the catalogue), so a fixed
 * inset showed a Junior chair edge to edge and floated an Ateljee armchair in
 * the middle of its plate. The measured transform (inc/product-card.php) puts
 * every product at the same optical size and centres it.
 */
.yk-tile .yk-tile__img.is-cutout {
	object-fit: contain;
	mix-blend-mode: multiply;
	transform: scale(var(--yk-s, 0.82)) translate(var(--yk-tx, 0%), var(--yk-ty, 0%));
}

.yk-tile .yk-tile__img.is-photo {
	object-fit: cover;
}

.yk-tile__img--alt {
	opacity: 0;
}

.yk-tile__link:hover .yk-tile__img.is-photo,
.yk-tile__link:focus-visible .yk-tile__img.is-photo {
	transform: scale(1.03);
}

.yk-tile__link:hover .yk-tile__img.is-cutout,
.yk-tile__link:focus-visible .yk-tile__img.is-cutout {
	transform: scale(calc(var(--yk-s, 0.82) * 1.03)) translate(var(--yk-tx, 0%), var(--yk-ty, 0%));
}

.yk-tile.has-alt .yk-tile__link:hover .yk-tile__img--alt,
.yk-tile.has-alt .yk-tile__link:focus-visible .yk-tile__img--alt {
	opacity: 1;
}

.yk-tile.has-alt .yk-tile__link:hover .yk-tile__img:not(.yk-tile__img--alt),
.yk-tile.has-alt .yk-tile__link:focus-visible .yk-tile__img:not(.yk-tile__img--alt) {
	opacity: 0;
}

.yk-tile__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

/*
 * The grid itself.
 *
 * WooCommerce already lays the template out as a grid, but as
 * `repeat(auto-fill, minmax(max(150px, 25% - .9375em), 1fr))` — a formula that
 * holds four columns from 1440px all the way down to about 620px, where it
 * jumps straight to two. There is no tablet step in it, and no way to ask for
 * one, because the column count is a consequence of the arithmetic rather than
 * a decision. Replaced with explicit breakpoints.
 *
 * Two columns on a phone, three on a tablet, four on a desktop. The column gap
 * stays tight and the row gap stays generous: at this size the air wants to be
 * vertical, or the rows run together.
 *
 * Woo's selectors carry two classes, so `.yk-product-grid` in front is enough
 * to outrank them.
 */
.yk-product-grid ul.wc-block-product-template__responsive {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 2vw, 2rem);
	/* Still twice the column gap at every width, which is what makes the rows
	   read as rows — but one step down from the old three-column grid, where
	   80px between rows was pushing the second row off a laptop screen. */
	row-gap: var(--wp--preset--spacing--40);
}

@media (min-width: 700px) {
	.yk-product-grid ul.wc-block-product-template__responsive {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.yk-product-grid ul.wc-block-product-template__responsive {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Related products stay at three: the collection returns three items, and a
 * fourth column would only ever be an empty cell.
 */
@media (min-width: 1100px) {
	.yk-related .yk-product-grid ul.wc-block-product-template__responsive {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * Card text.
 *
 * Series, then name, then price, each on its own line with room between them.
 * Sized for a quarter-width card: the type was drawn for a third-width one and
 * at four across it read as a headline on a thumbnail.
 */
.yk-product-grid .yk-product-kicker {
	/* Metadata, not a headline: smaller and wider-tracked than before, but the
	   colour stays at muted — #7F7566 on white is 4.53:1, already the floor
	   for AA, so the quietness has to come from size and tracking. */
	margin: 1.5rem 0 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.5625rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.yk-product-grid .yk-product-kicker a {
	color: inherit;
	text-decoration: none;
}

/* Products with no series: keep the card rhythm intact. */
.yk-product-grid .yk-product-kicker:empty {
	display: none;
}

.yk-product-grid .yk-product-name {
	margin: 0.6rem 0 0;
	font-family: var(--wp--preset--font-family--playfair);
	font-size: clamp(1.0625rem, 1vw, 1.1875rem);
	font-weight: 400;
	line-height: 1.35;
}

.yk-product-grid .yk-product-name a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	background-image: linear-gradient(var(--wp--preset--color--ink), var(--wp--preset--color--ink));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size var(--yk-fast) var(--yk-ease);
}

.yk-product-grid .yk-product-name a:hover {
	background-size: 100% 1px;
}

/* The name carries the card in serif; the price answers in ink sans — a
   different voice, but no longer a whisper. Only a struck original stays
   muted. */
.yk-product-grid .yk-product-price {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	font-weight: 500;
}

.yk-product-grid .yk-product-price del {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.yk-product-grid .yk-card-swatches {
	margin-top: 1rem;
}

/* A hint about what the model comes in — smaller chips, more air between
   them, so the row whispers instead of waving. */
.yk-product-grid .yk-card-swatches__list {
	gap: 7px;
}

.yk-product-grid .yk-card-swatch {
	width: 0.5625rem;
	height: 0.5625rem;
}

.yk-product-grid .yk-card-swatches__more {
	font-size: 0.625rem;
}

/*
 * ---------------------------------------------------------------------------
 * Product page
 * ---------------------------------------------------------------------------
 */

/*
 * Gallery (inc/product-gallery.php).
 *
 * Same plate as the cards, one size larger. The product page follows the grid
 * rather than the other way round: arriving from a card, the plate must not
 * change colour under the same chair.
 */
/*
 * WooCommerce caps its own gallery block at `max-width: 512px`, sized for the
 * narrow product column its default templates use. Here the column is wider
 * than that, so the cap left the gallery stranded beside 160px of nothing.
 */
.yk-product-main .wp-block-woocommerce-product-image-gallery {
	max-width: none;
}

.yk-product-main div.yk-gallery.images {
	float: none;
	margin: 0;
}

.yk-gallery .woocommerce-product-gallery__image {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	aspect-ratio: 1;
	background-color: var(--yk-plate);
}

.yk-gallery .woocommerce-product-gallery__image > a {
	position: absolute;
	inset: 0;
	display: block;
}

/* The flexslider track lays every slide side by side; on narrow screens
 * it can render before (or without) the overflow-hidden viewport and drag
 * the whole page sideways. The gallery clips itself instead. */
.yk-gallery.woocommerce-product-gallery {
	overflow: hidden;
}

.yk-gallery .yk-gallery__img {
	position: absolute;
	inset: 0;
	width: 100%;
	/* As on the cards: WooCommerce's own `.woocommerce div.product div.images
	   img { height: auto }` (0,2,3) out-weighs a plain class pair, so the
	   flag is required — without it a non-square photograph keeps its own
	   height and the square frame crops it from the bottom. */
	height: 100% !important;
	/* Nothing resets an img to border-box here, so without this the
	   is-cutout padding grows the element past the frame and the picture's
	   right and bottom edges are clipped by overflow. */
	box-sizing: border-box;
}

.yk-gallery .yk-gallery__img.is-cutout {
	padding: 7%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.yk-gallery .yk-gallery__img.is-photo {
	object-fit: cover;
}

/* Portrait photographs fit inside the square frame — cover would crop the
 * subject out (inc/product-gallery.php marks them is-tall). */
.yk-gallery .yk-gallery__img.is-photo.is-tall {
	object-fit: contain;
}

/*
 * Thumbnails. Every product photograph in the catalogue is square, so contain
 * and cover agree here and the blend can be applied to all of them: at this
 * size the warm cast it puts on the handful of non-white shots is invisible,
 * and the alternative is a row of white boxes on the plate.
 */
.yk-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

/*
 * The plate colour belongs on the item, not on the image: mix-blend-mode
 * blends an element with what is behind it, so an image carrying its own
 * background would be multiplied against the white list instead and every
 * white sweep would stay white.
 */
.yk-gallery ol.flex-control-thumbs li {
	flex: 0 0 calc((100% - 50px) / 6);
	float: none;
	width: auto;
	margin: 0;
	background-color: var(--yk-plate);
}

.yk-gallery .flex-control-thumbs img {
	display: block;
	width: 100%;
	padding: 8%;
	aspect-ratio: 1;
	object-fit: contain;
	mix-blend-mode: multiply;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity var(--yk-fast) var(--yk-ease);
}

.yk-gallery .flex-control-thumbs img:hover,
.yk-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
}

/* The lightbox handle. Present, findable, and not a floating magnifier. */
.yk-gallery .woocommerce-product-gallery__trigger {
	position: absolute;
	z-index: 2;
	top: 1rem;
	right: 1rem;
	width: 2.4rem;
	height: 2.4rem;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.85);
	color: var(--wp--preset--color--ink);
	font-size: 0.9rem;
	line-height: 2.4rem;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--yk-fast) var(--yk-ease);
}

.yk-gallery .woocommerce-product-gallery__trigger:hover {
	background-color: var(--wp--preset--color--base);
}

/*
 * Right-hand column.
 *
 * The block editor's own gaps put every element the same distance apart, which
 * reads as a form. The rhythm here is deliberate: the series and the name
 * belong together, the price stands apart, and the buying controls stand
 * further apart still.
 */
.yk-product-summary > * {
	margin-block: 0;
}

.yk-product-summary .yk-product-heading {
	margin-top: 0.9rem;
	font-family: var(--wp--preset--font-family--playfair);
	font-size: clamp(2rem, 2.6vw, 2.9rem);
	font-weight: 400;
	line-height: 1.15;
}

.yk-product-summary .yk-product-figure {
	margin-top: 1.7rem;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1.375rem;
}

.yk-product-summary .yk-product-lead {
	margin-top: 2rem;
	max-width: 34rem;
	line-height: 1.75;
}

.yk-product-summary .wp-block-add-to-cart-form,
.yk-product-summary form.cart {
	margin-top: var(--wp--preset--spacing--40);
}

.yk-product-summary .yk-product-facts {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--yk-hairline);
	color: var(--wp--preset--color--muted);
}

/*
 * Variation chooser.
 *
 * WooCommerce lays the attributes out as a two-column table, label beside
 * control. In a column this narrow that squeezes both. The table carries
 * role="presentation", so restacking it costs nothing semantically.
 */
.yk-product-summary table.variations,
.yk-product-summary table.variations tbody,
.yk-product-summary table.variations tr,
.yk-product-summary table.variations th,
.yk-product-summary table.variations td {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: left;
}

.yk-product-summary table.variations tr + tr {
	margin-top: var(--wp--preset--spacing--30);
}

.yk-product-summary table.variations th.label label {
	display: block;
	margin-bottom: 0.7rem;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Attributes with no swatch configured fall back to a select; make it match. */
.yk-product-summary table.variations select {
	appearance: none;
	width: 100%;
	max-width: 22rem;
	padding: 0.75rem 2rem 0.75rem 0.9rem;
	border: 1px solid var(--yk-hairline);
	border-radius: 0;
	background-color: var(--wp--preset--color--base);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%233A3229' stroke-width='1.3' stroke-opacity='.6'/%3E%3C/svg%3E");
	background-position: right 0.9rem center;
	background-repeat: no-repeat;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--medium);
	cursor: pointer;
	transition: border-color var(--yk-fast) var(--yk-ease);
}

.yk-product-summary table.variations select:hover {
	border-color: rgba(58, 50, 41, 0.4);
}

.yk-product-summary table.variations select:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.yk-product-summary a.reset_variations {
	display: inline-block;
	margin-top: 0.9rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	border-bottom: 1px solid var(--yk-hairline);
}

.yk-product-summary a.reset_variations:hover {
	color: var(--wp--preset--color--ink);
	border-bottom-color: currentColor;
}

.yk-product-summary .woocommerce-variation-price {
	margin: var(--wp--preset--spacing--30) 0 0;
}

.yk-product-summary .woocommerce-variation-price .price {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1.375rem;
}

.yk-product-summary .woocommerce-variation-availability {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Quantity and the buy button on one line, matched in height. */
.yk-product-summary .woocommerce-variation-add-to-cart,
.yk-product-summary form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	align-items: stretch;
	margin-top: var(--wp--preset--spacing--30);
}

.yk-product-summary .quantity input.qty {
	width: 4.5rem;
	height: 100%;
	min-height: 3.4rem;
	padding: 0.6rem;
	border: 1px solid var(--yk-hairline);
	border-radius: 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--medium);
	text-align: center;
}

.yk-product-summary .quantity input.qty:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.yk-product-summary .single_add_to_cart_button {
	min-height: 3.4rem;
	padding: 0 2.8rem;
	border: 0;
	border-radius: 0;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--yk-fast) var(--yk-ease);
}

.yk-product-summary .single_add_to_cart_button:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 80%, #fff);
}

.yk-product-summary .single_add_to_cart_button:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

.yk-product-summary .single_add_to_cart_button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/*
 * Description and the rest, as sections rather than tabs.
 *
 * Two tabs — one of them empty of reviews — is a control that does nothing but
 * hide the only text on the page. Panels are unstacked and separated by a rule
 * instead. Woo's script sets display:none inline on the inactive panel, which
 * is why the override has to be marked important.
 */
.yk-product-sections .wc-tabs,
.yk-product-sections .wc-tabs-wrapper > .panel + .panel:empty {
	display: none;
}

.yk-product-sections .wc-tab {
	display: block !important;
	max-width: 46rem;
	padding: var(--wp--preset--spacing--50) 0 0;
	margin: 0;
}

.yk-product-sections .woocommerce-tabs {
	border-top: 1px solid var(--yk-hairline);
}

.yk-product-sections .wc-tab + .wc-tab {
	border-top: 1px solid var(--yk-hairline);
	margin-top: var(--wp--preset--spacing--50);
}

.yk-product-sections .wc-tab h2 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--playfair);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
}

.yk-product-sections .wc-tab p {
	line-height: 1.8;
}

/* Related products sit on white so the beige plates keep their edge. */
.yk-related {
	border-top: 1px solid var(--yk-hairline);
}

/*
 * "Lataa lisää" (assets/js/load-more.js).
 *
 * The numbered pagination is hidden only once the script has taken over —
 * the class is set from JS, so without it the links stay visible and usable.
 */
.yk-product-grid.yk-loadmore-on .wp-block-query-pagination {
	display: none;
}

.yk-loadmore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--50);
}

/*
 * Outline rather than the solid gold of the hero CTA: this is a utility
 * control, and the gold should stay reserved for the primary action.
 */
.yk-loadmore__button {
	padding: 1.1rem 2.5rem;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.yk-loadmore__button:hover {
	background-color: var(--wp--preset--color--beige);
	border-color: var(--wp--preset--color--ink);
}

.yk-loadmore__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

.yk-loadmore__button[disabled] {
	cursor: default;
	opacity: 0.55;
}

.yk-loadmore__status,
.yk-loadmore__done {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.yk-loadmore__status:empty {
	display: none;
}

/* Focus lands on the first newly appended product; don't draw a ring on it. */
.yk-product-grid li.wc-block-product:focus {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.yk-loadmore__button {
		transition: none;
	}
}

/*
 * Product page swatches (inc/swatch-frontend.php, assets/js/swatches.js).
 *
 * The <select> stays in the form and keeps working; it is only taken out of
 * sight. Not display:none — Woo's script reads and writes it, and a clipped
 * element behaves more predictably if anything ever calls focus() on it.
 */
.yk-swatches-hidden-select {
	position: absolute !important;
	/* !important, koska Woon .variations select { width:100% } voittaa
	   muuten ja 375 px leveä näkymätön valitsin leventää sivua mobiilissa. */
	width: 1px !important;
	height: 1px !important;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Yksi otsikkorivi per valinta: attribuutin nimi musteella ja valittu arvo
 * (tai "Valitse"-kehote) samalla rivillä. Woon oma pieni harmaa
 * taulukko-otsikko piilotetaan nappirivien kohdalta — kaksi otsikkoa
 * samalle asialle hämärsi, kumpaa pitäisi katsoa.
 */
.yk-product-summary table.variations tr:has(.yk-swatches) th.label {
	display: none;
}

.yk-swatches__label {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0 0 0.7rem;
}

.yk-swatches__name {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.yk-swatches__value {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.yk-swatches__value:not(:empty)::before {
	content: '— ';
}

.yk-swatches.has-selection .yk-swatches__value {
	color: var(--wp--preset--color--ink);
}

.yk-swatches__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/*
 * Square, sharp-cornered chips. The selected state is a ring drawn outside the
 * chip rather than a border on it, so the swatch never changes size and the
 * row cannot reflow as the customer clicks through shades.
 */
.yk-swatch {
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid rgba(58, 50, 41, 0.25);
	border-radius: 0;
	background: none;
	cursor: pointer;
	transition: box-shadow 150ms ease, border-color 150ms ease;
}

.yk-swatch--color {
	background-color: var(--yk-swatch-color, transparent);
}

.yk-swatch--image {
	background-image: var(--yk-swatch-image);
	background-size: cover;
	background-position: center;
}

/* Values with no swatch stay readable as a labelled chip. */
.yk-swatch--text {
	width: auto;
	min-width: 2.5rem;
	padding: 0 0.9rem;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	line-height: 2.4rem;
}

.yk-swatch--color .yk-swatch__name,
.yk-swatch--image .yk-swatch__name {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Two options can share one colour — black fabric next to black leather.
 * The chip alone cannot separate them, so a colliding option becomes a
 * pill: the colour as a small square, the material spelled out beside it
 * (inc/swatch-frontend.php adds the class). */
.yk-swatch--labeled {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	width: auto;
	padding: 0 0.9rem 0 0.55rem;
	background-color: var(--wp--preset--color--base);
	line-height: 2.4rem;
}

.yk-swatch--labeled::before {
	content: "";
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	border: 1px solid rgba(58, 50, 41, 0.25);
	background-color: var(--yk-swatch-color, transparent);
}

.yk-swatch--labeled .yk-swatch__name {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

.yk-swatch:hover:not(.is-unavailable) {
	border-color: var(--wp--preset--color--ink);
}

.yk-swatch.is-selected {
	border-color: var(--wp--preset--color--ink);
	box-shadow: 0 0 0 2px var(--wp--preset--color--base), 0 0 0 3px var(--wp--preset--color--ink);
}

.yk-swatch:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/*
 * Unavailable in the current combination. Kept in place rather than hidden so
 * the palette does not reshuffle under the cursor, and struck through so the
 * state does not rely on dimming alone.
 */
.yk-swatch.is-unavailable {
	cursor: default;
	opacity: 0.35;
}

.yk-swatch.is-unavailable::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top left,
		transparent calc(50% - 1px),
		var(--wp--preset--color--ink) calc(50% - 1px),
		var(--wp--preset--color--ink) calc(50% + 1px),
		transparent calc(50% + 1px)
	);
}

@media (prefers-reduced-motion: reduce) {
	.yk-swatch {
		transition: none;
	}
}

/*
 * Archive card swatch row (inc/swatch-archive.php).
 *
 * Smaller and quieter than the product page chips — this is a hint about what
 * the model comes in, not a control. The chips carry aria-hidden and a
 * visually hidden sentence says the same thing, so they add no tab stops.
 */
.yk-card-swatches {
	margin: 0.5rem 0 0;
}

.yk-card-swatches__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
}

.yk-card-swatch {
	display: block;
	width: 1rem;
	height: 1rem;
	border: 1px solid rgba(58, 50, 41, 0.2);
	background-size: cover;
	background-position: center;
}

.yk-card-swatches__more {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.75rem;
	line-height: 1;
}

/*
 * Footer (parts/footer.html).
 *
 * The link list carries no bullets and no gold: in a block of six statutory
 * links the accent colour would shout, so they stay muted and only underline
 * on hover.
 */
.yk-footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.yk-footer-links a,
.wp-block-group > footer a,
footer.wp-block-group a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.yk-footer-links a:hover,
footer.wp-block-group a:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/*
 * Order-only products (inc/quote-request.php).
 *
 * The price stays exactly as it is; only the button changes. The note is
 * deliberately quiet — it explains, it does not warn.
 */
.yk-quote {
	margin-top: var(--wp--preset--spacing--30);
}

.yk-quote__note {
	margin: 0 0 0.8rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Same voice as the series kicker: both are metadata, so they match. */
.yk-quote__tag {
	margin: 0.6rem 0 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.5625rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

/* Outline, like the load-more control: gold stays with the real buy button. */
.yk-quote__button,
a.yk-quote__button {
	display: inline-block;
	padding: 1.1rem 2.5rem;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 200ms ease;
}

.yk-quote__button:hover,
a.yk-quote__button:hover {
	background-color: var(--wp--preset--color--beige);
	color: var(--wp--preset--color--ink);
}

.yk-quote__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

/*
 * Contact and quote forms (Contact Form 7).
 *
 * CF7 ships almost no styling of its own, so the fields are given the same
 * sharp-cornered, quiet treatment as the rest of the site.
 */
.wpcf7 {
	max-width: 34rem;
}

.wpcf7 label {
	display: block;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	margin-top: 0.35rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid rgba(58, 50, 41, 0.3);
	border-radius: 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--medium);
}

.wpcf7 textarea {
	min-height: 9rem;
}

.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

.wpcf7 input[type="submit"] {
	padding: 1.1rem 2.5rem;
	border: 0;
	border-radius: 0;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 78%, #fff);
}

.wpcf7-not-valid-tip,
.wpcf7 .wpcf7-response-output {
	font-size: var(--wp--preset--font-size--small);
}

.wpcf7 .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.8rem 1rem;
	border: 1px solid rgba(58, 50, 41, 0.3);
}

/*
 * ---------------------------------------------------------------------------
 * WooCommerce defaults
 * ---------------------------------------------------------------------------
 *
 * Whatever the shop is configured to show later, none of it should arrive in
 * WooCommerce's own colours. These are the pieces that appear without being
 * asked for.
 */

/*
 * Sale badge. Kept — hiding a discount from a customer is not a design
 * decision — but as a quiet chip in the palette rather than a red circle.
 */
.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
	position: absolute;
	z-index: 2;
	top: 0.9rem;
	left: 0.9rem;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 0.4rem 0.75rem;
	border: 0;
	border-radius: 0;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

/*
 * Star ratings. Nothing on the site asks for them, but WooCommerce prints them
 * from several places once a review exists, and a row of gold stars is the one
 * thing that would make this catalogue look like a marketplace listing.
 */
.woocommerce .star-rating,
.woocommerce .woocommerce-product-rating,
.wc-block-components-product-rating {
	display: none;
}

/* Store notices — cart messages, coupon errors — in the palette, not Woo's. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	border: 0;
	border-left: 2px solid var(--wp--preset--color--accent);
	border-radius: 0;
	background-color: var(--wp--preset--color--beige);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce-error {
	border-left-color: var(--wp--preset--color--ink);
}

/*
 * Anything WooCommerce renders as a button and the theme has not already
 * caught: sharp corners, the site's type, the site's gold.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	padding: 1rem 2.2rem;
	border-radius: 0;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background-color var(--yk-fast) var(--yk-ease);
}

/*
 * ---------------------------------------------------------------------------
 * Motion and focus
 * ---------------------------------------------------------------------------
 */

/* One easing and one duration for every control on the site. */
a,
button,
.wp-element-button,
.wp-block-button__link {
	transition: background-color var(--yk-fast) var(--yk-ease),
		border-color var(--yk-fast) var(--yk-ease),
		color var(--yk-fast) var(--yk-ease),
		opacity var(--yk-fast) var(--yk-ease);
}

/*
 * A visible focus ring on everything keyboard-reachable. Several of the
 * controls above are drawn on beige and several on gold, so the ring is ink
 * with an offset rather than a colour that only works on one of them.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

/*
 * Reduced motion.
 *
 * The image cross-fade stays: a change of opacity is not movement, and without
 * it the second photograph would appear with no indication that anything
 * happened. Everything that actually moves or scales is switched off.
 */
@media (prefers-reduced-motion: reduce) {
	.yk-quote__button,
	.yk-tile .yk-tile__img,
	.yk-plate img {
		transition: none;
	}

	/* The fit transform is layout, not motion: only the hover delta goes. */
	.yk-tile__link:hover .yk-tile__img.is-photo,
	.yk-tile__link:focus-visible .yk-tile__img.is-photo,
	.yk-plate a:hover img.is-photo {
		transform: none;
	}

	.yk-tile__link:hover .yk-tile__img.is-cutout,
	.yk-tile__link:focus-visible .yk-tile__img.is-cutout,
	.yk-plate a:hover img.is-cutout {
		transform: scale(var(--yk-s, 0.82)) translate(var(--yk-tx, 0%), var(--yk-ty, 0%));
	}

	.yk-tile.has-alt .yk-tile__link:hover .yk-tile__img--alt,
	.yk-tile.has-alt .yk-tile__link:focus-visible .yk-tile__img--alt,
	.yk-tile.has-alt .yk-tile__link:hover .yk-tile__img:not(.yk-tile__img--alt),
	.yk-tile.has-alt .yk-tile__link:focus-visible .yk-tile__img:not(.yk-tile__img--alt) {
		transition: opacity var(--yk-fast) linear;
	}
}

/* --------------------------------------------------------------------------
 * Motion layer (assets/js/motion.js adds .yk-reveal/.is-visible/.is-condensed)
 *
 * Without JavaScript none of these classes appear and everything renders
 * static; reduced-motion users are excluded in the script AND here.
 * -------------------------------------------------------------------------- */

.yk-reveal {
	opacity: 0;
	translate: 0 22px;
	transition: opacity 0.65s var(--yk-ease), translate 0.65s var(--yk-ease);
}

.yk-reveal.is-visible {
	opacity: 1;
	translate: 0 0;
}

/* Hero: a near-subliminal 26 s zoom keeps the opening image alive. */
.yk-hero {
	overflow: hidden;
}

.yk-hero .wp-block-cover__image-background {
	animation: yk-hero-zoom 26s var(--yk-ease) forwards;
}

/* Puhelimella kuva on jo tiukassa rajauksessa — lisäzoomaus vain pahentaa. */
@media (max-width: 781px) {
	.yk-hero .wp-block-cover__image-background {
		animation: none;
	}
}

@keyframes yk-hero-zoom {
	from { scale: 1; }
	to { scale: 1.06; }
}

/* Condensing header: sticky on desktop, shrinks past 60 px of scroll into a
 * translucent blurred bar. Sticky stays desktop-only — on phones the compact
 * two-row header would eat too much of the viewport. */
.yk-header {
	transition:
		padding-top 0.28s var(--yk-ease),
		padding-bottom 0.28s var(--yk-ease),
		background-color 0.28s var(--yk-ease),
		box-shadow 0.28s var(--yk-ease);
}

@media (min-width: 782px) {
	/* The template part renders inside a wrapper exactly its own height, so
	 * sticky must sit on the wrapper — on .yk-header itself it has no room
	 * to travel. */
	header.wp-block-template-part:has(> .yk-header) {
		position: sticky;
		top: 0;
		z-index: 90;
	}

	body.admin-bar header.wp-block-template-part:has(> .yk-header) {
		top: var(--wp-admin--admin-bar--height, 32px);
	}

	.yk-header .wp-block-site-logo img {
		transition: width 0.28s var(--yk-ease);
	}

	.yk-header.is-condensed {
		padding-top: 0.6rem !important;
		padding-bottom: 0.6rem !important;
		background-color: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent) !important;
		-webkit-backdrop-filter: blur(14px) saturate(1.4);
		backdrop-filter: blur(14px) saturate(1.4);
		box-shadow: 0 1px 0 var(--yk-hairline);
	}

	.yk-header.is-condensed .wp-block-site-logo img {
		width: 96px;
		height: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yk-hero .wp-block-cover__image-background {
		animation: none;
	}

	.yk-reveal {
		opacity: 1;
		translate: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * Product page editorial layer (inc/product-specs.php)
 * -------------------------------------------------------------------------- */

/* Sticky purchase column: the gallery scrolls, the decision stays put.
 * Desktop only — below 782px the columns stack. */
@media (min-width: 782px) {
	/* Core's layout support prints ".wp-block-columns { align-items:
	 * normal !important }", so matching it needs both the compound
	 * selector and the flag. */
	.wp-block-columns.yk-product-main {
		align-items: flex-start !important;
	}

	/* The summary column is the taller one, so the GALLERY sticks: the
	 * product photo stays in view while options are picked below. */
	.yk-product-main > .wp-block-column:first-child {
		position: sticky;
		top: 116px; /* condensed header ~85px + breathing room */
	}
}

/* Description: comfortable measure and a lede paragraph. */
.yk-product-sections {
	max-width: 46rem;
}

.yk-product-sections p:first-of-type {
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.65;
}

.yk-product-sections p {
	line-height: 1.7;
}

/* Heritage callout: the museum sentence, elevated in place. */
.yk-heritage {
	margin: var(--wp--preset--spacing--50, 2rem) 0;
	padding: var(--wp--preset--spacing--40, 1.5rem) var(--wp--preset--spacing--50, 2rem);
	background-color: var(--wp--preset--color--beige, #F3EADB);
	border-left: 2px solid var(--wp--preset--color--accent, #B89968);
}

.yk-heritage p {
	margin: 0;
	font-family: var(--wp--preset--font-family--playfair, "Playfair Display", serif);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	line-height: 1.55;
	color: var(--wp--preset--color--ink, #3A3229);
}

/* Trust row under the add-to-cart form. */
.yk-trust {
	list-style: none;
	margin: var(--wp--preset--spacing--40, 1.5rem) 0 0;
	padding: var(--wp--preset--spacing--30, 1rem) 0 0;
	border-top: 1px solid var(--yk-hairline);
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.yk-trust li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted, #7F7566);
}

.yk-trust svg {
	flex: none;
	opacity: 0.75;
}

/* Spec table: quiet two-column sheet under the description. */
.yk-specs {
	margin-top: var(--wp--preset--spacing--70, 4rem);
}

.yk-specs__title {
	font-size: var(--wp--preset--font-size--x-large, 1.75rem);
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}

.yk-specs__list {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--70, 4rem);
}

.yk-specs__row {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--yk-hairline);
}

.yk-specs__row dt {
	flex: none;
	color: var(--wp--preset--color--muted, #7F7566);
	font-size: 0.875rem;
}

.yk-specs__row dd {
	margin: 0;
	text-align: right;
	font-size: 0.9375rem;
}

@media (max-width: 781px) {
	.yk-specs__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
 * Card badges (inc/outlet-badges.php): discount, scarcity, sold.
 * -------------------------------------------------------------------------- */

.yk-tile {
	position: relative;
}

.yk-tile__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	pointer-events: none;
}

.yk-badge {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	padding: 0.35rem 0.55rem;
}

.yk-badge--sale {
	background-color: var(--wp--preset--color--ink, #3A3229);
	color: var(--wp--preset--color--base, #FFFFFF);
}

.yk-badge--scarce {
	background-color: var(--wp--preset--color--beige, #F3EADB);
	color: var(--wp--preset--color--ink, #3A3229);
}

.yk-badge--sold {
	background-color: var(--wp--preset--color--base, #FFFFFF);
	color: var(--wp--preset--color--muted, #7F7566);
	box-shadow: inset 0 0 0 1px var(--yk-hairline);
}

/* Product page availability line, now carrying the scarcity wording. */
.single-product p.stock {
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink, #3A3229);
}

.yk-badge--order {
	background-color: var(--wp--preset--color--base, #FFFFFF);
	color: var(--wp--preset--color--ink, #3A3229);
	box-shadow: inset 0 0 0 1px var(--yk-hairline);
}

/* The old shop's UUTUUS sticker, in the site's own accent gold. */
.yk-badge--uutuus {
	background-color: var(--wp--preset--color--accent, #A8853C);
	color: var(--wp--preset--color--base, #FFFFFF);
}

/* --------------------------------------------------------------------------
 * Dropdown refinements (approved mockup) and the lowered header.
 * -------------------------------------------------------------------------- */

@media (min-width: 782px) {
	/* Header: same anatomy, moderately lower — 203px -> ~135px. The inline
	 * preset padding needs the flag to lose. */
	.yk-header {
		padding-top: 1.55rem !important;
		padding-bottom: 1.55rem !important;
	}

	.yk-header .wp-block-site-logo img {
		width: 122px;
		height: auto;
	}

	/* Kicker heading inside the panel, per menu: category list vs series.
	 * As a grid item it spans both columns. */
	.wp-block-navigation ul.wp-block-navigation__submenu-container:has(a[href*="tuote-osasto"])::before {
		content: "Kategoriat";
	}

	.wp-block-navigation ul.wp-block-navigation__submenu-container:has(a[href*="tuote-avainsana"])::before {
		content: "Tuotesarjat";
	}

	.wp-block-navigation ul.wp-block-navigation__submenu-container::before {
		grid-column: 1 / -1;
		display: block;
		padding: 0 0.85rem 0.7rem;
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--wp--preset--color--muted);
	}

	/* Design-löytöjä carries a small ALE chip; Varaosat steps back. */
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content[href*="design-loytoja"]::after {
		content: "ALE";
		display: inline-block;
		margin-left: 0.5rem;
		padding: 0.2rem 0.45rem;
		font-size: 0.625rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		line-height: 1;
		background-color: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--base);
		vertical-align: 1px;
	}

	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content[href*="varaosat"] {
		color: var(--wp--preset--color--muted);
	}

	/* "Kaikki tuotteet" closes the category panel on its own separated row. */
	.wp-block-navigation .wp-block-navigation__submenu-container li:has(> a[href$="/kauppa/"]) {
		grid-column: 1 / -1;
		margin-top: 0.6rem;
		padding-top: 0.6rem;
		border-top: 1px solid var(--yk-hairline);
	}

	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content[href$="/kauppa/"] {
		color: var(--wp--preset--color--accent);
		font-weight: 500;
	}
}

/* --------------------------------------------------------------------------
 * Front page: Design-löytöjä showcase under the hero.
 * -------------------------------------------------------------------------- */

@media (min-width: 782px) {
	/* Core prints align-items with the flag on columns; matching it. */
	.wp-block-columns.yk-loydot__row {
		align-items: center !important;
	}
}

.yk-loydot .yk-product-grid {
	margin: 0;
}

/* --------------------------------------------------------------------------
 * Front page: rotating campaign spot (parts/kampanja.html).
 *
 * Two looks, one slot. The default is the calm news style below. For a
 * limited-time special-price campaign, add the class "yk-kampanja--teho" to
 * the section (Site Editor -> Advanced -> Additional CSS classes) and the
 * spot flips to the loud ink-dark treatment — nothing else to change.
 * -------------------------------------------------------------------------- */

.yk-kampanja__kicker {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

@media (min-width: 782px) {
	/* Core prints align-items with the flag on columns; matching it. */
	.wp-block-columns.yk-kampanja__row {
		align-items: center !important;
	}
}

.yk-kampanja__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Loud variant for special-price campaigns. */
.yk-kampanja.yk-kampanja--teho {
	background-color: var(--wp--preset--color--ink) !important;
}

.yk-kampanja--teho h2,
.yk-kampanja--teho p {
	color: var(--wp--preset--color--base) !important;
}

.yk-kampanja--teho .yk-kampanja__kicker {
	color: var(--wp--preset--color--accent) !important;
}

.yk-kampanja--teho .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}

/* The showcase is a browsable strip (katselmointi 31.7.: Peten
 * karuselli-idea): nine random finds on a scroll-snap track, three in view
 * on desktop, a card and a peek of the next on phones. The arrows come
 * from assets/js/loydot-carousel.js; the track scrolls without them. */
.yk-loydot .yk-product-grid ul.wc-block-product-template__responsive {
	display: flex;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.yk-loydot .yk-product-grid ul.wc-block-product-template__responsive::-webkit-scrollbar {
	display: none;
}

.yk-loydot .yk-product-grid li.product {
	/* Positioned so the cards' absolutely positioned screen-reader spans
	 * resolve against the card, not the page — unanchored, they escaped
	 * the scroller and stretched the document sideways. */
	position: relative;
	flex: 0 0 min(78%, 20rem);
	scroll-snap-align: start;
}

@media (min-width: 782px) {
	.yk-loydot .yk-product-grid li.product {
		flex-basis: calc((100% - 2 * var(--wp--preset--spacing--40, 1.5rem)) / 3);
	}
}

.yk-loydot__nav {
	display: flex;
	justify-content: flex-end;
	gap: 0.6rem;
	margin-top: var(--wp--preset--spacing--30);
}

.yk-loydot__navbtn {
	width: 44px;
	height: 44px;
	border: 1px solid var(--yk-hairline);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color var(--yk-fast) var(--yk-ease),
		color var(--yk-fast) var(--yk-ease),
		opacity var(--yk-fast) var(--yk-ease);
}

.yk-loydot__navbtn:hover:not([disabled]),
.yk-loydot__navbtn:focus-visible:not([disabled]) {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.yk-loydot__navbtn[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* --------------------------------------------------------------------------
 * Front page polish round (audit findings).
 * -------------------------------------------------------------------------- */

/* Sale price must read as the price: the struck original stays muted, the
 * selling price steps up to ink. On the beige showcase muted-on-beige
 * measured 3.8:1 — the discount lived on the corner badge alone. */
.yk-product-grid .yk-product-price ins {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	text-decoration: none;
}

/* Prices sit on a shared baseline: the card is a column and the price is
 * pushed to its floor, so a two-line and a three-line title read as one row. */
.yk-product-grid li.product {
	display: flex;
	flex-direction: column;
}

.yk-product-grid .yk-product-price {
	margin-top: auto;
}

/* Kukkapuro split: favour the striped Remmi chairs over the loud artwork. */
.yk-split__media img {
	object-position: 50% 70%;
}

/* Series cards advertise their clickability quietly. */
.yk-series-row h3 a::after {
	content: " \2192";
	color: var(--wp--preset--color--muted);
	transition: color var(--yk-fast) var(--yk-ease);
}

.yk-series-row h3 a:hover::after {
	color: var(--wp--preset--color--accent);
}

/* "Katso kaikki tuotteet" backs up the small header link on phones only.
 * Compound selector: core's layout support prints .is-layout-flex
 * { display: flex } after this sheet and wins a specificity tie. */
.wp-block-buttons.yk-row-more {
	display: none;
}

@media (max-width: 781px) {
	.wp-block-buttons.yk-row-more {
		display: flex;
	}

	/* Three cards in a two-column grid strand an orphan against an empty
	 * cell; the odd last card spans the row at a calmer ratio instead. */
	.yk-card-row > .wp-block-column:nth-child(odd):last-child {
		grid-column: 1 / -1;
	}

	.yk-card-row > .wp-block-column:nth-child(odd):last-child .yk-plate {
		aspect-ratio: 3 / 2;
	}
}

@media (max-width: 699px) {
	.yk-loydot .yk-product-grid ul.wc-block-product-template__responsive > li:nth-child(odd):last-child {
		grid-column: 1 / -1;
	}

	.yk-loydot .yk-product-grid ul.wc-block-product-template__responsive > li:nth-child(odd):last-child .yk-tile {
		--yk-tile-ratio: 3 / 2;
	}

	/* Badges took half of a ~165px tile; smaller chips, same message. */
	.yk-tile__badges {
		top: 6px;
		left: 6px;
		gap: 4px;
	}

	.yk-badge {
		font-size: 0.625rem;
		padding: 0.25rem 0.4rem;
	}
}

/* --------------------------------------------------------------------------
 * Footer: ink-dark close for the page (parts/footer.html).
 * Every claim on the USP row is real: shipping is the only configured rate,
 * the 14-day return comes from /tuotteen-palauttaminen/, Paytrail is the
 * live payment provider.
 * -------------------------------------------------------------------------- */

.yk-footer {
	--yk-footer-hairline: rgba(243, 234, 219, 0.22);
}

.yk-footer a {
	color: var(--wp--preset--color--base);
	transition: color var(--yk-fast) var(--yk-ease);
}

.yk-footer a:hover,
.yk-footer a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.yk-footer .yk-footer-kicker {
	margin: 0;
	color: var(--wp--preset--color--beige);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.yk-footer .yk-footer-links {
	list-style: none;
	padding-left: 0;
}

.yk-footer__usp {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--yk-footer-hairline);
	gap: 0.75rem 3rem;
}

.yk-footer__usp p {
	margin: 0;
	color: var(--wp--preset--color--base);
}

.yk-footer__bottom {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--yk-footer-hairline);
}

/* --------------------------------------------------------------------------
 * Front page: Varaosat spotlight (katselmointi 31.7.: oma iso nosto).
 * -------------------------------------------------------------------------- */

.yk-varaosat__lead {
	max-width: 52ch;
}

/* --------------------------------------------------------------------------
 * Delivery time line and VAT toggle (inc/delivery-and-tax.php).
 * -------------------------------------------------------------------------- */

.yk-delivery {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
}

/* The old site's yellow-green availability dot. */
.yk-delivery__dot {
	flex: none;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #a9b83e;
}

.yk-price-vat {
	margin-left: 0.4rem;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--wp--preset--color--muted);
}

.yk-tax-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}

.yk-tax-toggle input {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	accent-color: var(--wp--preset--color--ink);
}

/* --------------------------------------------------------------------------
 * Product page: description and spec table side by side
 * (inc/product-specs.php wraps them in .yk-details-row).
 * -------------------------------------------------------------------------- */

/* The block's template margin moves onto the wrapper — left inside the
 * description column it would start the two columns at different heights. */
.yk-details-row {
	margin-top: var(--wp--preset--spacing--70, 4rem);
}

.yk-details-row .yk-product-sections {
	margin-top: 0 !important;
}

/* WooCommerce hands the block's classless inner wrapper a ~160px top
 * margin of its own; inside the grid it would sink the description below
 * the spec column's start line. */
.yk-details-row .yk-product-sections > div {
	margin-top: 0 !important;
}

@media (min-width: 1024px) {
	.yk-details-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
		column-gap: var(--wp--preset--spacing--70, 4rem);
		align-items: start;
	}

	/* The right column mirrors the description section's top hairline so
	 * the two read as one row; the title sits flush under it exactly as
	 * the "Kuvaus" heading does on the left. */
	.yk-details-row__specs {
		border-top: 1px solid var(--yk-hairline);
	}

	.yk-details-row__specs .yk-specs {
		margin-top: 0;
	}

	/* One column of rows in the narrow panel; the two-column split is for
	 * the old full-width placement. */
	.yk-details-row__specs .yk-specs__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.yk-details-row__specs .yk-specs__title {
		margin-top: 0;
	}
}

/* --------------------------------------------------------------------------
 * Language switcher in the header (Polylang block, parts/header.html).
 * -------------------------------------------------------------------------- */

/* A small segmented pill: hairline capsule, the active language filled in
 * ink — the same chip language as the badges and the dropdown's ALE tag. */
.yk-lang-switcher {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 3px;
	list-style: none;
	border: 1px solid var(--yk-hairline);
	border-radius: 999px;
}

.yk-lang-switcher li {
	display: flex;
}

.yk-lang-switcher a {
	display: block;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition:
		background-color var(--yk-fast) var(--yk-ease),
		color var(--yk-fast) var(--yk-ease);
}

.yk-lang-switcher a:hover,
.yk-lang-switcher a:focus-visible {
	background-color: var(--wp--preset--color--beige);
	color: var(--wp--preset--color--ink);
}

.yk-lang-switcher .current-lang a {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
 * English side: the few strings that live in CSS content (inc/i18n-en.php
 * translates the markup; these pseudo-elements are out of its reach).
 * -------------------------------------------------------------------------- */

html:lang(en) .wp-block-navigation ul.wp-block-navigation__submenu-container:has(a[href*="tuote-osasto"])::before {
	content: "Categories";
}

html:lang(en) .wp-block-navigation ul.wp-block-navigation__submenu-container:has(a[href*="tuote-avainsana"])::before {
	content: "Product Series";
}

html:lang(en) .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content[href*="design-loytoja"]::after {
	content: "SALE";
}

/* The main column's block gap shows as a white sliver only where two
 * full-bleed painted sections meet: Varaosat (beige) against the Karuselli
 * band. Close that one seam. */
.wp-block-group.yk-varaosat + .yk-band {
	margin-block-start: 0 !important;
}

/* Same seam at the very bottom of the front page: the beige Kukkapuro split
 * is main's last section, and the root block gap leaves a white strip
 * between it and the dark footer. Everywhere else the page ends on white,
 * so the gap is invisible and can stay. */
body.home footer.wp-block-template-part {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
 * Quote-only band on the product page ("Kysy lisää tuotteesta").
 * -------------------------------------------------------------------------- */

.yk-quote__band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	margin-top: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--beige);
}

.yk-quote__ask {
	margin: 0;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
 * Mobile overlay menu.
 *
 * The overlay inherits the desktop row's right-justification and unrolls
 * every submenu into one long ragged list. Reordered here: top levels as
 * left-aligned serif headings, child lists in two quiet columns below them.
 * -------------------------------------------------------------------------- */
@media (max-width: 599px) {
	.yk-header .wp-block-navigation__responsive-container.is-menu-open {
		padding: 4.75rem 1.75rem 2.5rem;
		overflow-x: hidden;
	}

	.yk-header .is-menu-open .wp-block-navigation__responsive-container-content,
	.yk-header .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		align-items: flex-start !important;
		gap: 1.4rem;
		width: 100%;
	}

	.yk-header .is-menu-open .wp-block-navigation-item {
		width: 100%;
		/* Avattu päätaso on pystyflex (linkki + alavalikko): vaaka-akseli on
		   align-items, jonka core asettaa oikealle — ei justify-content. */
		align-items: flex-start !important;
		justify-content: flex-start !important;
		text-align: left !important;
	}

	/* Kosketusklikin jälkeinen fokusreunus vain näppäimistölle. */
	.yk-header .is-menu-open .wp-block-navigation-item__content:focus:not(:focus-visible) {
		outline: none;
	}

	.yk-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--playfair);
		font-size: 1.5rem;
		line-height: 1.2;
		color: var(--wp--preset--color--ink);
	}

	/* Haitari: lapsilista on piilossa, kunnes päätasoa napautetaan
	   (assets/js/mobile-nav.js kytkee is-sub-open-luokan). */
	.yk-header .is-menu-open .wp-block-navigation__submenu-container {
		display: none;
		columns: 2;
		column-gap: 1.5rem;
		width: 100% !important;
		max-width: 100%;
		margin-top: 0.6rem;
		padding-left: 0;
	}

	.yk-header .is-menu-open .wp-block-navigation-item.is-sub-open > .wp-block-navigation__submenu-container {
		display: block;
	}

	/* Nuoli näkyviin päätason viereen ja kääntymään auki-tilassa. */
	.yk-header .is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
		display: inline-flex;
		align-self: center;
		margin-left: 0.4rem;
		transition: rotate 0.2s var(--yk-ease);
	}

	.yk-header .is-menu-open .wp-block-navigation-item.is-sub-open > .wp-block-navigation__submenu-icon {
		rotate: 180deg;
	}

	/* Avattava päätaso rivinä: linkki ja nuoli vierekkäin, lista alle. */
	.yk-header .is-menu-open .wp-block-navigation__container > .has-child {
		flex-direction: row !important;
		flex-wrap: wrap;
		align-items: center !important;
	}

	.yk-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		break-inside: avoid;
		margin: 0 0 0.6rem;
		width: auto;
	}

	.yk-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 0.9375rem;
		color: var(--wp--preset--color--ink);
		padding: 0;
	}
}

/* A bare long URL in running text (the terms pages link payment and
 * courier policies) must break rather than push the page sideways. */
.wp-block-post-content a {
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
 * Checkout polish (templates/page-checkout.html, parts/checkout-header.html).
 * -------------------------------------------------------------------------- */

.yk-checkout-header {
	border-bottom: 1px solid var(--yk-hairline);
}

.yk-checkout-header__edit a {
	text-decoration: none;
}

.yk-checkout-header__edit a:hover {
	text-decoration: underline;
}

/* The serif step titles sat at body size and drowned among the fields.
   Woo scopes its own rules under the block wrappers, so match them. */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title,
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title {
	font-size: 1.375rem;
	line-height: 1.3;
}

.wc-block-components-checkout-step {
	margin-bottom: var(--wp--preset--spacing--40);
}

.yk-checkout-footer {
	border-top: 1px solid var(--yk-hairline);
}

.yk-checkout-footer a {
	color: inherit;
}

/* --------------------------------------------------------------------------
 * Ajankohtaista: feature + two-column news grid
 * (templates/page-ajankohtaista.html, page-news.html).
 * -------------------------------------------------------------------------- */

.yk-news-grid {
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) !important;
}

/* The newest article leads the page at full width. */
.yk-news-grid > li:first-child {
	grid-column: 1 / -1;
}

.yk-news-grid > li:first-child .wp-block-post-title {
	font-size: var(--wp--preset--font-size--x-large);
}

.yk-news-grid .wp-block-post-title {
	font-weight: 600;
	line-height: 1.25;
}

.yk-news-grid .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.yk-news-grid .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Grid cards keep to a three-line teaser; the feature may run longer. */
.yk-news-grid > li:not(:first-child) .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.yk-news-grid .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 0.35rem;
}

@media (max-width: 781px) {
	.yk-news-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Paytrail provider wall: tie each expanded list visually to its group
 * and make the raw logo tiles a uniform grid in the site's frame
 * language — selected state matches the swatch chips. */
.payment_method_paytrail .paytrail-provider-group {
	cursor: pointer;
}

.payment_method_paytrail .provider-list {
	margin: 0 0 0.75rem;
	padding: 0.75rem;
	border: 1px solid var(--yk-hairline);
	border-top: 0;
	background-color: var(--wp--preset--color--base, #FFFFFF);
}

/* A collapsed group keeps an empty list in the DOM — no frame for those. */
.payment_method_paytrail .provider-list:not(:has(.paytrail-woocommerce-payment-fields--list-item)) {
	display: none;
}

.payment_method_paytrail .paytrail-woocommerce-payment-fields {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The plugin's own blocks.css loads after the theme and sizes the tiles
 * as 28 %-wide inline blocks with a forced 5em logo height — inside our
 * grid that reads as squashed vertical strips. Matched or out-weighed
 * rule by rule. */
.payment_method_paytrail .paytrail-woocommerce-payment-fields--list-item {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	border: 1px solid var(--yk-hairline);
	background: var(--yk-plate);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* The radio input is the state, the tile is the control. */
.payment_method_paytrail .paytrail-woocommerce-payment-fields--list-item--input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.payment_method_paytrail .paytrail-woocommerce-payment-fields--list-item:hover {
	border-color: var(--wp--preset--color--ink);
}

.payment_method_paytrail .paytrail-woocommerce-payment-fields--list-item.selected {
	border-color: var(--wp--preset--color--ink);
	box-shadow: 0 0 0 2px var(--wp--preset--color--base), 0 0 0 3px var(--wp--preset--color--ink);
}

/* The plugin's markup is <label><input><div class="--wrapper"><img>: the
 * inline label shrink-wraps and the logo gets squashed upright, so the
 * label becomes the tile surface and the logo keeps its own ratio. */
.payment_method_paytrail .paytrail-woocommerce-payment-fields--list-item label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 8px;
	cursor: pointer;
}

.payment_method_paytrail .paytrail-woocommerce-payment-fields--list-item--wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	padding: 0;
	/* The selected/hover state lives on our li frame, not the plugin's
	   teal wrapper border. */
	border: 0 !important;
}

.payment_method_paytrail .paytrail-woocommerce-payment-fields--list-item--img {
	width: auto !important;
	height: auto !important;
	max-width: 110px !important;
	max-height: 34px !important;
	min-height: 0 !important;
	padding: 0 !important;
	object-fit: contain;
}

/* International-orders note under the country field (checkout-note.js). */
.yk-intl-note {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}