/*
Theme Name:   Kevin Noki
Theme URI:    https://kevinnoki.com
Author:       Kevin Noki
Description:  A clean, fast, product-page-style child theme for Twenty Twenty-Five. Built only with core WordPress blocks and WooCommerce blocks. No page builder, no premium plugins.
Template:     twentytwentyfive
Version:      1.12.2
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  kevinnoki
*/

/* ---------- Base ---------- */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

:where(a, button, input, .wp-element-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Header: sticky, translucent, blurred ---------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
}
/* The glass effect lives on a separate layer. Putting backdrop-filter on the
   header itself would trap the mobile menu and cart drawer inside the bar. */
.wp-site-blocks > header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; }
}

.kn-nav {
	max-width: 1024px;
	margin-inline: auto;
	min-height: 48px;
	padding-inline: 22px;
}
.kn-nav .wp-block-site-title {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.02em;
}
.kn-nav .wp-block-site-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.kn-nav .wp-block-navigation { font-size: 13px; gap: 28px; }
.kn-nav .wp-block-navigation a { color: var(--wp--preset--color--contrast); opacity: .8; }
.kn-nav .wp-block-navigation a:hover { opacity: 1; text-decoration: none; }

/* ---------- Sections ("tiles") ---------- */
.wp-site-blocks > main { margin-block-start: 0; }

.kn-tiles {
	display: grid;
	gap: 12px;
	padding: 12px;
}
.kn-tiles > * { margin: 0 !important; }

.kn-row {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}
@media (min-width: 834px) {
	.kn-row { grid-template-columns: 1fr 1fr; }
}

.kn-tile {
	text-align: center;
	padding: 56px 24px 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}
.kn-tile > * { max-width: 680px; margin-inline: auto; }
.kn-tile.is-light { background: var(--wp--preset--color--base); }
.kn-tile.is-dark {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.kn-tile.is-dark .kn-lede { color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent); }
.kn-tile.is-text-only { padding-bottom: 56px; }

/* Hero */
.kn-hero { padding-top: 72px; }
.kn-display {
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.04;
	margin: 0;
}
.kn-title {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin: 0;
}
.kn-lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
	color: var(--wp--preset--color--muted);
	margin-block: 8px 0;
	max-width: 34ch;
}
.kn-tile .wp-block-buttons { margin-block: 20px 0; gap: 14px; }

/* Media inside tiles: bleeds to the bottom edge like a product shot */
.kn-media {
	margin-block: 40px 0 !important;
	max-width: 100% !important;
	width: 100%;
}
.kn-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px 18px 0 0;
}
.kn-hero .kn-media { max-width: 1100px !important; }

/* Small print under a product link, e.g. price */
.kn-meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin-block: 6px 0;
}
.kn-tile.is-dark .kn-meta { color: color-mix(in srgb, var(--wp--preset--color--base) 60%, transparent); }

/* ---------- Buttons ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	background: transparent;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent);
	color: #fff;
}
.kn-tile.is-dark .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}
.kn-tile.is-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* ---------- Footer ---------- */
.kn-footer {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: 12px;
	line-height: 1.4;
	padding: 20px 22px 32px;
}
.kn-footer > * { max-width: 980px; margin-inline: auto; }
.kn-footer a { color: var(--wp--preset--color--contrast); opacity: .8; }
.kn-footer .wp-block-navigation { font-size: 12px; gap: 20px; }
.kn-footer .kn-rule {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	padding-top: 14px;
	margin-top: 14px;
}

/* ---------- WooCommerce: calm, product-page feel ---------- */
.wc-block-components-button,
.wp-block-woocommerce-product-button .wp-block-button__link {
	border-radius: 980px !important;
}
.wc-block-components-product-price,
.wp-block-woocommerce-product-price { font-weight: 400; }
.kn-hide-sale .wc-block-components-product-sale-badge, .kn-hide-sale .onsale { display: none !important; } /* no "SALE!" stickers */
.wc-block-mini-cart__button { padding: 6px; }
.wc-block-mini-cart__amount { display: none; } /* show only the bag icon */

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Logo ---------- */
.kn-logo { margin: 0; line-height: 0; }
.kn-logo img { width: 104px; height: auto; display: block; }
.kn-footer .kn-logo img { width: 88px; opacity: .7; }

/* ---------- Media ratios (keeps any uploaded photo tidy) ---------- */
.kn-media img { aspect-ratio: 16 / 10; object-fit: cover; }
.kn-hero .kn-media img { aspect-ratio: 16 / 9; }

/* ---------- Process strip: sketch → print → wire → finish ---------- */
.kn-strip {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	width: 100%;
	max-width: 1000px !important;
	margin: 40px auto 56px !important;
}
@media (min-width: 834px) {
	.kn-strip { grid-template-columns: repeat(4, 1fr); }
}
.kn-strip > * { margin: 0 !important; }
.kn-strip img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	border-radius: 18px;
	display: block;
}
.kn-strip figcaption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	text-align: left;
	margin-top: 10px;
}

/* ---------- Content pages (Work, About, Downloads) ---------- */
.kn-page-head { text-align: center; padding-block: 72px 24px; }
.kn-page-head .kn-lede { margin-inline: auto; }
.kn-project { padding-block: 64px 0; scroll-margin-top: 72px; }
.kn-project h2 { font-size: var(--wp--preset--font-size--xx-large); letter-spacing: -0.03em; }
.kn-project .kn-strip { margin-top: 28px !important; }
.kn-portrait img { border-radius: 18px; aspect-ratio: 4 / 5; object-fit: cover; }
.kn-press { color: var(--wp--preset--color--muted); }

/* =====================================================================
 * v1.1 — full-bleed hero with text on the photo, edge-to-edge tile images
 * ================================================================== */

/* Home wrapper: hero touches both screen edges; tiles keep 12px gutters */
.kn-home { margin: 0 !important; padding: 0 !important; }
.kn-home > * { margin: 0 !important; }
.kn-home > .kn-tiles { padding-top: 12px; }

/* Fix: side-by-side tiles now start at exactly the same height */
.kn-row > * { margin: 0 !important; }

/* Hero */
.kn-hero-cover {
	min-height: clamp(560px, 56.25vw, 920px) !important;
	padding: clamp(48px, 6vw, 88px) 24px 24px !important;
	margin: 0 !important;
	width: 100%;
	max-width: none !important;
	background: #000;
}
.kn-hero-cover .wp-block-cover__image-background {
	object-fit: cover;
	object-position: center 60%; /* change to move the photo up/down */
}
/* Soft dark fade behind the text so white type is always readable */
.kn-hero-cover .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 30%, rgba(0,0,0,0) 55%) !important;
	opacity: 1 !important;
}
.kn-hero-cover .wp-block-cover__inner-container {
	color: #fff;
	max-width: 760px;
	margin-inline: auto;
}
.kn-hero-cover .kn-display { color: #fff; }
.kn-hero-cover .kn-lede {
	color: rgba(255,255,255,.88);
	margin-inline: auto;
	text-shadow: 0 1px 12px rgba(0,0,0,.25);
}
.kn-hero-cover .wp-block-buttons { margin-top: 22px; gap: 14px; }
.kn-hero-cover .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: #fff;
	color: #fff;
	background: rgba(255,255,255,.08);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.kn-hero-cover .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--contrast);
}
/* For a photo with a light top: add the class "is-light-photo" to the Cover block */
.kn-hero-cover.is-light-photo .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 50%) !important;
}
.kn-hero-cover.is-light-photo .wp-block-cover__inner-container,
.kn-hero-cover.is-light-photo .kn-display { color: var(--wp--preset--color--contrast); }
.kn-hero-cover.is-light-photo .kn-lede { color: var(--wp--preset--color--muted); text-shadow: none; }

/* Tile photos: edge to edge at the bottom of each tile, no rounded box */
.kn-tile { padding-inline: 0; }
.kn-tile > :not(.kn-media):not(.kn-strip) { padding-inline: 24px; }
.kn-tile .kn-media {
	margin-top: 40px !important;
	max-width: none !important;
	width: 100% !important;
}
.kn-tile .kn-media img { border-radius: 0; aspect-ratio: 4 / 3; }
.kn-tile .kn-strip { padding-inline: 24px; box-sizing: border-box; }

@media (max-width: 600px) {
	.kn-hero-cover { min-height: 78vh !important; padding-top: 56px !important; }
	.kn-hero-cover .wp-block-button__link { white-space: nowrap; font-size: 15px; padding: 9px 18px; }
}

/* v1.3 — homepage is now a normal Page using the "Home" template */
.kn-home-main, .kn-home-main > .kn-home { margin: 0 !important; padding: 0 !important; max-width: none !important; }

/* v1.4 — full-screen mobile menu, Apple-style large links */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	padding: 72px 32px 32px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 18px !important;
	align-items: flex-start !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
	opacity: 1 !important;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
	padding: 6px;
}

/* =====================================================================
 * v1.6 — rounded corners everywhere
 * Change the three values below to make everything rounder or sharper.
 * ================================================================== */
:root {
	--kn-radius-card: 28px;   /* tiles, hero, product cards, panels */
	--kn-radius-media: 18px;  /* photos, videos, embeds */
	--kn-radius-small: 12px;  /* inputs, notices, code, small elements */
}
@media (max-width: 600px) {
	:root { --kn-radius-card: 22px; --kn-radius-media: 14px; }
}

/* Cards / tiles */
.kn-tile {
	border-radius: var(--kn-radius-card);
	overflow: hidden;
	isolation: isolate; /* keeps corners clean in Safari */
}

/* Hero: sits inside the same 12px gutter as the tiles, rounded */
.kn-home > .kn-hero-cover {
	margin: 12px 12px 0 !important;
	width: auto;
	border-radius: var(--kn-radius-card);
	overflow: hidden;
	isolation: isolate;
}

/* Photos, videos and embeds anywhere on the site */
.wp-block-image img,
.wp-block-cover:not(.kn-hero-cover),
.wp-block-gallery .wp-block-image img,
.wp-block-media-text__media img,
.wp-block-media-text__media video,
.wp-block-video video,
.wp-block-embed iframe,
.wp-block-post-featured-image img,
.wp-block-post-featured-image a {
	border-radius: var(--kn-radius-media);
}
.wp-block-cover:not(.kn-hero-cover) { overflow: hidden; }

/* Photos at the bottom of a tile follow the tile's own corners */
.kn-tile .kn-media img { border-radius: 0; }

/* Logo stays exactly as designed */
.kn-logo img { border-radius: 0 !important; }

/* Small elements */
pre, code:not(pre code),
.wp-block-code,
.wp-block-preformatted,
.wp-block-details,
.wp-block-search__input,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], input[type="url"], select, textarea {
	border-radius: var(--kn-radius-small);
}
.wp-block-pullquote, .wp-block-quote.is-style-plain { border-radius: var(--kn-radius-card); }

/* ---------- WooCommerce ---------- */

/* Product photos (shop, product page, cart, mini cart, checkout) */
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img,
.wc-block-grid__product-image img,
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img,
.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img,
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery .flex-control-thumbs img,
.wp-block-woocommerce-product-image-gallery img {
	border-radius: var(--kn-radius-media);
}

/* Product cards on the Downloads page */
.woocommerce ul.products li.product,
.wc-block-grid__product,
.wc-block-product {
	background: var(--wp--preset--color--surface);
	border-radius: var(--kn-radius-card);
	padding: 14px 14px 22px !important;
	overflow: hidden;
	box-sizing: border-box;
	text-align: center;
}
.woocommerce ul.products li.product a img { margin-bottom: 14px; }

/* Cart / checkout panels, notices and form fields */
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-components-sidebar,
.wc-block-components-notice-banner,
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-radius: var(--kn-radius-small);
}
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-quantity-selector,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce .quantity .qty {
	border-radius: var(--kn-radius-small) !important;
}
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border-radius: var(--kn-radius-small);
}

/* =====================================================================
 * v1.7 — designed inner pages
 * ================================================================== */

/* Small coloured label above headings */
.kn-eyebrow {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--wp--preset--color--accent);
	margin: 0 0 10px !important;
}
.kn-tile.is-dark .kn-eyebrow { color: #2997ff; }

/* Page intro tiles */
.kn-intro { padding-top: clamp(64px, 8vw, 110px); }
.kn-intro.is-text-only { padding-bottom: clamp(56px, 7vw, 96px); }

/* Jump-link chips */
.kn-chips { gap: 10px !important; margin-top: 28px !important; flex-wrap: wrap; }
.kn-chips .wp-block-button__link { font-size: 14px; padding: 7px 16px; }

/* Three-column grid of cards */
.kn-grid-3 {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
	width: 100%;
	max-width: 1100px !important;
	box-sizing: border-box;
}
@media (min-width: 834px) { .kn-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.kn-grid-3 > * { margin: 0 !important; }
.kn-tile .kn-grid-3 { margin: 40px auto 0 !important; padding-inline: 24px; }
.kn-tile.kn-tile-pad { padding: 12px !important; background: transparent; }
.kn-tile.kn-tile-pad.is-light { background: var(--wp--preset--color--base); }
.kn-tile .kn-grid-3.kn-tile { padding: 12px; }

.kn-card {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border-radius: var(--kn-radius-card);
	padding: 32px 28px !important;
	text-align: left;
	display: flex;
	flex-direction: column;
}
.kn-card.is-light { background: var(--wp--preset--color--base); }
.kn-tile.is-light .kn-card:not(.is-light) { background: var(--wp--preset--color--surface); }
.kn-tile:not(.is-light):not(.is-dark) .kn-card.is-light { background: var(--wp--preset--color--base); }
.kn-card h3 { font-size: var(--wp--preset--font-size--large); margin: 0 0 8px !important; }
.kn-card p:not(.kn-eyebrow) { color: var(--wp--preset--color--muted); margin: 0 !important; }
.kn-card .wp-block-buttons { margin-top: auto !important; padding-top: 22px; }
.kn-card .wp-block-button__link { font-size: 15px; padding: 9px 18px; }

/* Stats row in the Portable 64 tile */
.kn-stats { max-width: 820px !important; }
.kn-stat { text-align: center; padding: 8px; }
.kn-stat-value {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	margin: 0 !important;
}
.kn-stat-label { color: var(--wp--preset--color--muted); margin: 8px 0 0 !important; font-size: 15px; }
.kn-tile.is-dark .kn-stat-label { color: rgba(255,255,255,.62); }
.kn-tile.is-dark .kn-stat, .kn-tile.is-dark .kn-stat-value { text-align: center; }

/* Portrait + text (About) */
.kn-split {
	display: grid;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	width: 100%;
	max-width: 1040px !important;
	padding: 0 24px;
	box-sizing: border-box;
	text-align: left;
}
@media (min-width: 834px) { .kn-split { grid-template-columns: 5fr 6fr; } }
.kn-split > * { margin: 0 !important; }
.kn-split .kn-portrait img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.kn-split-text .kn-lede { max-width: none; }
.kn-split-text .kn-display { font-size: var(--wp--preset--font-size--xx-large); }
.kn-tile.kn-intro:has(.kn-split) { padding-bottom: clamp(48px, 6vw, 88px); }

/* Press names */
.kn-press-names {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 48px;
	margin: 28px auto 4px !important;
}
.kn-press-name {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--contrast);
	opacity: .85;
	margin: 0 !important;
}

/* FAQ (Details blocks) */
.kn-faq {
	width: 100%;
	max-width: 760px !important;
	margin: 36px auto 0 !important;
	padding-inline: 24px;
	box-sizing: border-box;
	text-align: left;
}
.kn-faq > * { margin: 0 !important; }
.kn-faq details {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	padding: 0;
}
.kn-faq details:first-child { border-top: 1px solid var(--wp--preset--color--accent-6); }
.kn-faq summary {
	list-style: none;
	cursor: pointer;
	font-size: 19px;
	font-weight: 600;
	padding: 22px 40px 22px 0;
	position: relative;
}
.kn-faq summary::-webkit-details-marker { display: none; }
.kn-faq summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 26px;
	font-weight: 300;
	color: var(--wp--preset--color--muted);
	transition: transform .2s ease;
}
.kn-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.kn-faq details p { color: var(--wp--preset--color--muted); margin: 0 0 22px !important; max-width: 62ch; }

/* Products grid on Downloads */
.kn-products { width: 100%; max-width: 1100px !important; margin: 36px auto 0 !important; padding-inline: 12px; box-sizing: border-box; }
.kn-products .woocommerce ul.products,
.kn-products ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.kn-products ul.products::before, .kn-products ul.products::after { display: none !important; }
.kn-products ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; }
.kn-products ul.products li.product .woocommerce-loop-product__title { font-size: 19px; font-weight: 700; padding: 0 !important; }
.kn-products ul.products li.product .price { color: var(--wp--preset--color--muted) !important; font-size: 15px; }
.kn-products ul.products li.product .button { border-radius: 980px; margin-top: 12px; }
.kn-products .woocommerce-info { text-align: center; }

/* Default page template (Impressum, Privacy, new pages) */
.kn-page { display: grid; gap: 12px; padding: 12px !important; margin: 0 !important; }
.kn-page > * { margin: 0 !important; }
.kn-page-title { padding: clamp(56px, 7vw, 96px) 24px clamp(40px, 5vw, 64px) !important; }
.kn-page-title .wp-block-post-title { font-size: var(--wp--preset--font-size--xx-large); }
.kn-prose { display: block; text-align: left; padding: clamp(40px, 6vw, 72px) 24px !important; }
.kn-prose h2 { font-size: var(--wp--preset--font-size--large); margin-top: 2em; }
.kn-prose h2:first-child, .kn-prose .kn-note + h2 { margin-top: 0; }
.kn-note {
	background: #fff4d6;
	color: #5c4400;
	border-radius: var(--kn-radius-small);
	padding: 14px 18px;
	font-size: 15px;
	margin-bottom: 2em !important;
}

/* Card rows that sit directly between tiles (About facts, Contact options):
   full width, equal heights, grey cards */
.kn-grid-3.kn-tile-pad {
	display: grid !important;
	align-items: stretch;
	max-width: none !important;
	width: 100%;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border-radius: 0;
	overflow: visible;
}
.kn-grid-3.kn-tile-pad > .kn-card,
.kn-grid-3.kn-tile-pad > .kn-card.is-light {
	background: var(--wp--preset--color--surface) !important;
	max-width: none;
	width: auto;
	margin: 0 !important;
	padding: 40px 32px !important;
}
.kn-products ul.products li.product a { color: var(--wp--preset--color--contrast); text-decoration: none; }

/* =====================================================================
 * v1.7.1 — designed store (WooCommerce shop and category pages)
 * ================================================================== */
.kn-store { padding-top: 28px !important; }
.kn-collection { width: 100%; max-width: 1100px !important; margin: 0 auto !important; padding-inline: 12px; box-sizing: border-box; }
.kn-collection .wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.kn-collection .wc-block-product-template > li { width: auto !important; margin: 0 !important; max-width: none !important; }
.kn-collection .wc-block-product { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kn-collection .wc-block-product > * { margin: 0 !important; }
.kn-collection .wc-block-components-product-image { margin-bottom: 10px !important; width: 100%; }
.kn-collection .wc-block-components-product-image img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.kn-collection .wp-block-post-title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.kn-collection .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.kn-collection .wc-block-components-product-price { color: var(--wp--preset--color--muted); font-size: 15px; }
.kn-collection .wp-block-button__link,
.kn-collection .wc-block-components-product-button__button {
	margin-top: 8px;
	font-size: 15px !important;
	padding: 9px 18px !important;
	border-radius: 980px !important;
	background: var(--wp--preset--color--accent) !important;
	color: #fff !important;
	border: 0 !important;
}
.kn-collection .wp-block-query-pagination { margin-top: 32px !important; gap: 8px; font-size: 15px; }
.kn-collection .wp-block-query-pagination a { color: var(--wp--preset--color--contrast); }
.kn-store .wc-block-product-collection__no-results,
.kn-store .woocommerce-info { text-align: center; color: var(--wp--preset--color--muted); }

/* v1.7.3 — hero: square top corners, rounded bottom corners only */
.kn-home > .kn-hero-cover {
	border-radius: 0 0 var(--kn-radius-card) var(--kn-radius-card);
}

/* =====================================================================
 * v1.7.4 — motion: mobile menu and FAQ
 * ================================================================== */
@media (prefers-reduced-motion: no-preference) {

	/* Menu opens: glass background fades and slides in, links follow one by one */
	.wp-block-navigation__responsive-container.is-menu-open {
		background: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent) !important;
		-webkit-backdrop-filter: saturate(180%) blur(24px);
		backdrop-filter: saturate(180%) blur(24px);
		animation: kn-menu-in .38s cubic-bezier(.2,.8,.2,1) both !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		animation: kn-item-in .5s cubic-bezier(.2,.8,.2,1) both;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { animation-delay: .06s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: .10s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: .14s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: .18s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: .22s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+6) { animation-delay: .26s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
		animation: kn-x-in .4s cubic-bezier(.2,.8,.2,1) both;
	}

	/* Menu closes (the theme script adds .kn-closing first) */
	.wp-block-navigation__responsive-container.is-menu-open.kn-closing {
		animation: kn-menu-out .24s ease-in both !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open.kn-closing .wp-block-navigation-item {
		animation: kn-item-out .2s ease-in both;
	}

	/* Tap feedback on the menu buttons and links */
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close,
	.wp-block-navigation__responsive-container .wp-block-navigation-item__content {
		transition: transform .15s ease, opacity .15s ease;
	}
	.wp-block-navigation__responsive-container-open:active,
	.wp-block-navigation__responsive-container-close:active,
	.wp-block-navigation__responsive-container .wp-block-navigation-item__content:active {
		transform: scale(.94);
		opacity: .7;
	}

	/* FAQ: the + turns into × smoothly, and back when closing */
	.kn-faq summary::after { transition: transform .32s cubic-bezier(.2,.8,.2,1); }
	.kn-faq details.kn-closing summary::after { transform: translateY(-50%) rotate(0deg); }
	.kn-faq summary { transition: color .2s ease; }
	.kn-faq summary:hover { color: var(--wp--preset--color--accent); }
}

@keyframes kn-menu-in  { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes kn-menu-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px); } }
@keyframes kn-item-in  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes kn-item-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }
@keyframes kn-x-in     { from { opacity: 0; transform: rotate(-90deg) scale(.6); } to { opacity: 1; transform: none; } }

/* Open mobile menu: links aligned left, like Apple */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left;
	width: 100%;
}
.kn-clean-focus.kn-pointer .wp-block-navigation__responsive-container :focus-visible, .kn-pointer .kn-clean-focus .wp-block-navigation__responsive-container :focus-visible { outline: none; }
.kn-clean-focus .wp-block-navigation__responsive-container a:focus:not(:focus-visible) { outline: none !important; }

/* =====================================================================
 * v1.7.5 — no boxes on tap or click (keyboard users still get an outline)
 * ================================================================== */
.kn-clean-focus, .kn-clean-focus * { -webkit-tap-highlight-color: transparent; }

/* Remove the outline after a mouse click or finger tap, everywhere */
.kn-clean-focus *:focus:not(:focus-visible) { outline: none !important; box-shadow: none; }

/* Keep a clear outline for keyboard navigation (Tab key) */
:where(a, button, summary, input, select, textarea, .wp-element-button, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent) !important;
	outline-offset: 3px;
	border-radius: 6px;
}

/* Tapping quickly on a question or button no longer selects its text */
summary,
.wp-block-button__link,
.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
summary { cursor: pointer; }

/* =====================================================================
 * v1.7.6 — logo stays visible above the open mobile menu
 * ================================================================== */
.kn-logo-over-menu .kn-nav .kn-logo {
	position: relative;
	z-index: 100001; /* the open menu layer is 100000 */
}
/* Close button sits in the same row as the logo; links start below it */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 0 22px 32px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0 !important;
	right: 0 !important;
	height: 48px;
	display: flex;
	align-items: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 72px !important;
}
/* Hide the ☰ button (and bag) behind the glass while the menu is open */
.has-modal-open .kn-nav .wp-block-navigation__responsive-container-open,
.has-modal-open .kn-nav .wc-block-mini-cart { visibility: hidden; }

/* =====================================================================
 * v1.8.0 — Theme settings (Appearance > Kevin Noki Settings)
 * Each block below is switched on by a body class from the settings page.
 * ================================================================== */

/* Phones: bag icon left of the menu icon (default), or right of it */
@media (max-width: 599px) {
	body:not(.kn-cart-after) .kn-nav .wc-block-mini-cart { order: 1; }
	body:not(.kn-cart-after) .kn-nav .wp-block-navigation { order: 2; }
}

/* Bag icon off */
.kn-cart-hidden .kn-nav .wc-block-mini-cart { display: none !important; }

/* Glass effect off: solid header and menu */
.kn-no-glass .wp-site-blocks > header.wp-block-template-part::before {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: var(--wp--preset--color--base);
}
.kn-no-glass .wp-block-navigation__responsive-container.is-menu-open {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	background: var(--wp--preset--color--base) !important;
}

/* Rounded corners off */
body.kn-square { --kn-radius-card: 0px; --kn-radius-media: 0px; --kn-radius-small: 0px; }

/* Hero corners */
.kn-hero-all .kn-home > .kn-hero-cover { border-radius: var(--kn-radius-card); }
.kn-hero-square .kn-home > .kn-hero-cover { border-radius: 0; }

/* Menu animations off */
.kn-no-menu-motion .wp-block-navigation__responsive-container.is-menu-open,
.kn-no-menu-motion .wp-block-navigation__responsive-container.is-menu-open * {
	animation: none !important;
}

/* Logo setting off: hide the logo completely while the mobile menu is open */
.has-modal-open body:not(.kn-logo-over-menu) .kn-nav .kn-logo { visibility: hidden; }

/* v1.9.0 — small about tile on the homepage */
.kn-split-small { max-width: 900px !important; }
@media (min-width: 834px) { .kn-split-small { grid-template-columns: 2fr 3fr; } }
.kn-split-small .kn-portrait img { aspect-ratio: 1 / 1; }
.kn-tile:has(.kn-split-small) { padding-bottom: clamp(40px, 5vw, 64px); }

/* =====================================================================
 * v1.9.1 — store: breadcrumbs off, pill-shaped quantity box
 * ================================================================== */
body:not(.kn-show-breadcrumbs) .woocommerce-breadcrumb { display: none; }

/* Product page quantity box: same height and shape as the button */
.woocommerce .quantity,
.wp-block-add-to-cart-form .quantity {
	display: inline-flex !important;
	align-items: center;
	height: 47px;
	background: var(--wp--preset--color--surface);
	border-radius: 980px;
	padding: 0 4px;
	box-sizing: border-box;
	vertical-align: middle;
	margin-right: 10px !important;
}
.woocommerce .quantity .qty,
.wp-block-add-to-cart-form .quantity .qty {
	border: 0 !important;
	outline: 0;
	background: transparent !important;
	border-radius: 980px !important;
	width: 3.2em !important;
	height: 100%;
	padding: 0 !important;
	text-align: center;
	font: inherit;
	font-size: 17px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	-moz-appearance: textfield;
	appearance: textfield;
	box-shadow: none !important;
}
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kn-step {
	width: 39px;
	height: 39px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, transform .15s ease;
	-webkit-user-select: none;
	user-select: none;
}
.kn-step:hover { background: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent); }
.kn-step:active { transform: scale(.9); }
form.cart:has(.quantity) { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
form.cart .quantity { margin: 0 !important; }

/* Cart & mini-cart quantity selector (WooCommerce blocks) */
.wc-block-components-quantity-selector {
	border: 0 !important;
	border-radius: 980px !important;
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}
.wc-block-components-quantity-selector::after { display: none !important; } /* removes the grey/black frame */
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-weight: 600;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	border-radius: 50% !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* v1.9.2 — products on the homepage */
.kn-home-products .kn-collection { margin-top: 36px !important; }
.kn-home-products .wp-block-buttons { margin-top: 32px !important; }
.kn-home-products .wc-block-product { background: var(--wp--preset--color--surface); }
/* Product grids: centered, whatever the number of products */
.kn-collection .wc-block-product-template {
	grid-template-columns: repeat(auto-fit, minmax(220px, 260px)) !important;
	justify-content: center;
}

/* v1.9.3 — WooCommerce's own − and + buttons: same size and line as ours, inside the pill */
.quantity.wc-block-components-quantity-selector {
	display: inline-flex !important;
	align-items: center !important;
	height: 47px;
	padding: 0 4px;
	background: var(--wp--preset--color--surface);
	border-radius: 980px !important;
	border: 0 !important;
	box-sizing: border-box;
}
.quantity .wc-block-components-quantity-selector__button {
	position: static !important;
	flex: 0 0 39px;
	width: 39px !important;
	height: 39px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
	font: inherit;
	font-size: 20px !important;
	line-height: 1 !important;
	opacity: 1;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: none !important;
	transform: none;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.quantity .wc-block-components-quantity-selector__button:hover { background: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent) !important; }
.quantity .wc-block-components-quantity-selector__button:active { transform: scale(.9); }
.quantity .wc-block-components-quantity-selector__button:disabled { opacity: .3; cursor: default; background: transparent !important; }
.quantity .wc-block-components-quantity-selector__input {
	flex: 0 0 3.2em;
	order: 0;
	height: 100% !important;
	margin: 0 !important;
}
/* Number sits exactly on the same line as − and + */
.quantity .qty,
.quantity input.qty {
	height: 39px !important;
	margin: 0 !important;
	align-self: center;
	line-height: 39px;
	vertical-align: middle;
}
.quantity { align-items: center !important; }
.quantity > button, .quantity > input { align-self: center !important; }

/* =====================================================================
 * v1.10.0 — Videos page: YouTube gallery
 * ================================================================== */
.kn-videos-tile .kn-title { margin-bottom: 36px !important; }
.kn-videos {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding-inline: 12px;
	box-sizing: border-box;
	text-align: left;
}
@media (min-width: 700px)  { .kn-videos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kn-videos { grid-template-columns: repeat(3, 1fr); } }

.kn-video {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface);
	border-radius: var(--kn-radius-card);
	overflow: hidden;
	color: var(--wp--preset--color--contrast) !important;
	text-decoration: none !important;
	isolation: isolate;
	transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.kn-video:hover { transform: translateY(-3px); box-shadow: 0 12px 32px -18px rgba(0,0,0,.35); }
.kn-video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.kn-video-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* also crops the black bars of older thumbnails */
	display: block;
	border-radius: 0 !important;
	transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.kn-video:hover .kn-video-thumb img { transform: scale(1.04); }
.kn-video-play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: rgba(255,255,255,.88);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 6px 24px rgba(0,0,0,.25);
	transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.kn-video-play::after {
	content: "";
	position: absolute;
	left: 26px;
	top: 21px;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent var(--wp--preset--color--contrast);
}
.kn-video:hover .kn-video-play { transform: scale(1.08); }
.kn-video-meta { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px 22px; }
.kn-video-title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.kn-video-date { font-size: 14px; color: var(--wp--preset--color--muted); }
.kn-video .kn-eyebrow { margin: 0 !important; }

/* Newest video: big, across the full width */
@media (min-width: 700px) {
	.kn-video.is-featured { grid-column: 1 / -1; flex-direction: row; }
	.kn-video.is-featured .kn-video-thumb { flex: 0 0 62%; }
	.kn-video.is-featured .kn-video-meta { justify-content: center; padding: 32px 36px; }
	.kn-video.is-featured .kn-video-title { font-size: var(--wp--preset--font-size--x-large); line-height: 1.12; letter-spacing: -0.03em; }
	.kn-video.is-featured .kn-video-play { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
	.kn-video.is-featured .kn-video-play::after { left: 34px; top: 27px; border-width: 15px 0 15px 24px; }
}
.kn-videos-tile .wp-block-buttons { margin-top: 36px !important; }
.kn-videos-empty, .kn-video-note { text-align: center; color: var(--wp--preset--color--muted); font-size: 15px; }
.kn-video-note { margin-top: 18px !important; }

/* On-site player (setting: play it here) */
.kn-player {
	border: 0;
	padding: 0;
	width: min(1100px, 94vw);
	max-width: none;
	background: #000;
	border-radius: var(--kn-radius-card);
	overflow: hidden;
	box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
.kn-player::backdrop { background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.kn-player-frame { aspect-ratio: 16 / 9; width: 100%; }
.kn-player-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.kn-player-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.9);
	color: #1d1d1f;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
	.kn-player[open] { animation: kn-player-in .35s cubic-bezier(.2,.8,.2,1); }
	.kn-player[open]::backdrop { animation: kn-fade-in .35s ease; }
}
@keyframes kn-player-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes kn-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* v1.10.1 — photo strip inside a dark tile: captions readable */
.kn-tile.is-dark .kn-strip figcaption { color: rgba(255,255,255,.62); }
.kn-tile .kn-strip + .kn-media { margin-top: 0 !important; }

/* =====================================================================
 * v1.10.3 — every button the same size, filled or outline
 * ================================================================== */
:root { --kn-btn-h: 46px; --kn-btn-font: 17px; --kn-btn-pad: 22px; }

.wp-block-button__link,
.wp-element-button {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: var(--kn-btn-h);
	padding: 0 var(--kn-btn-pad) !important;
	font-size: var(--kn-btn-font) !important;
	line-height: 1.1 !important;
	font-weight: 400;
	border: 1px solid transparent !important; /* same border width as outline buttons */
	white-space: nowrap;
	text-align: center;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid currentColor !important;
	padding: 0 var(--kn-btn-pad) !important;
}

/* Rows of buttons: all buttons as wide as the widest one */
.wp-block-buttons:not(.kn-chips) {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	width: max-content;
	max-width: 100%;
}
.wp-block-buttons.is-content-justification-center:not(.kn-chips) { margin-inline: auto; }
.wp-block-buttons.is-content-justification-left:not(.kn-chips) { margin-inline: 0 auto; }
.wp-block-buttons:not(.kn-chips) > .wp-block-button { width: 100%; margin: 0 !important; }
.wp-block-buttons:not(.kn-chips) > .wp-block-button > .wp-block-button__link { width: 100%; }

/* Phones: buttons that share a row stack, full width, identical size */
@media (max-width: 599px) {
	.wp-block-buttons:not(.kn-chips) { grid-auto-flow: row; width: min(100%, 320px); }
	.kn-hero-cover .wp-block-button__link { font-size: var(--kn-btn-font) !important; padding: 0 var(--kn-btn-pad) !important; }
}

/* Smaller buttons inside cards: smaller, but still identical to each other */
.kn-card .wp-block-button__link { --kn-btn-h: 40px; --kn-btn-font: 15px; --kn-btn-pad: 18px; }

/* Compact jump-link chips (Work page) keep their own size, but equal among themselves */
.kn-chips .wp-block-button__link { --kn-btn-h: 34px; --kn-btn-font: 14px; --kn-btn-pad: 16px; }

/* Store buttons follow the same system */
.single_add_to_cart_button { min-height: 47px; }
.kn-collection .wc-block-components-product-button__button,
.kn-collection .wp-block-button__link { --kn-btn-h: 40px; --kn-btn-font: 15px; --kn-btn-pad: 18px; }
/* Jump-link chips: equal widths too */
.wp-block-buttons.kn-chips {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
}
.kn-chips > .wp-block-button { width: 100%; margin: 0 !important; }
.kn-chips > .wp-block-button > .wp-block-button__link { width: 100%; }
@media (max-width: 599px) { .kn-chips .wp-block-button__link { white-space: normal; } }

/* =====================================================================
 * v1.11.0 — hero on phones (page sidebar box "Hero on phones")
 * ================================================================== */
.kn-hero-picture { display: contents; }

@media (max-width: 599px) {
	/* Text position */
	.kn-hero-cover.kn-m-text-center { align-items: center !important; }
	.kn-hero-cover.kn-m-text-bottom { align-items: flex-end !important; padding-bottom: 44px !important; }

	/* Fade follows the text position */
	.kn-hero-cover.kn-m-text-center .wp-block-cover__background {
		background: radial-gradient(ellipse at center, rgba(0,0,0,.5) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 80%) !important;
	}
	.kn-hero-cover.kn-m-text-bottom .wp-block-cover__background {
		background: linear-gradient(0deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.3) 32%, rgba(0,0,0,0) 58%) !important;
	}

	/* Darken photo behind text */
	.kn-hero-cover.kn-m-dark-1::after,
	.kn-hero-cover.kn-m-dark-2::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: rgba(0,0,0,.22);
	}
	.kn-hero-cover.kn-m-dark-2::after { background: rgba(0,0,0,.45); }

	/* Photo focus */
	.kn-hero-cover.kn-m-focus-left .wp-block-cover__image-background { object-position: 15% 60% !important; }
	.kn-hero-cover.kn-m-focus-right .wp-block-cover__image-background { object-position: 85% 60% !important; }
}

/* =====================================================================
 * Show a section only on phones, or only on bigger screens.
 * Block > Advanced > Additional CSS class:  kn-only-phone  or  kn-hide-on-phone
 * ================================================================== */
@media (max-width: 599px) { .kn-hide-on-phone { display: none !important; } }
@media (min-width: 600px) { .kn-only-phone { display: none !important; } }
@media (max-width: 599px) {
	.kn-hero-cover .wp-block-cover__inner-container { position: relative; z-index: 2 !important; }
}

/* =====================================================================
 * v1.12.0 — Interest lists ("Notify me")
 * ================================================================== */
.kn-interest { width: 100%; max-width: 520px; margin: 8px 0 0; text-align: left; scroll-margin-top: 90px; }
.kn-interest-block { margin: 28px auto 0; }
.kn-interest-product { font-weight: 700; font-size: 19px; margin: 0 0 10px !important; }
.kn-interest-count {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 15px; font-weight: 600; margin: 0 0 14px !important;
	color: var(--wp--preset--color--contrast);
}
.kn-tile.is-dark .kn-interest-count, .kn-tile.is-dark .kn-interest-product { color: #fff; }
.kn-dot { width: 8px; height: 8px; border-radius: 50%; background: #30d158; box-shadow: 0 0 0 0 rgba(48,209,88,.5); }
@media (prefers-reduced-motion: no-preference) { .kn-dot { animation: kn-pulse 2s infinite; } }
@keyframes kn-pulse { 0% { box-shadow: 0 0 0 0 rgba(48,209,88,.5); } 70% { box-shadow: 0 0 0 8px rgba(48,209,88,0); } 100% { box-shadow: 0 0 0 0 rgba(48,209,88,0); } }

.kn-interest-row { display: flex; gap: 10px; }
.kn-interest-email {
	flex: 1 1 auto; min-width: 0;
	height: var(--kn-btn-h) !important;
	padding: 0 20px !important;
	border: 1px solid var(--wp--preset--color--accent-6) !important;
	border-radius: 980px !important;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit; font-size: 17px;
	box-sizing: border-box;
}
.kn-interest-email:focus { border-color: var(--wp--preset--color--accent) !important; outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent) !important; }
.kn-interest-submit { flex: 0 0 auto; border-radius: 980px !important; background: var(--wp--preset--color--accent) !important; color: #fff !important; cursor: pointer; }
.kn-interest-submit.is-busy { opacity: .6; cursor: progress; }
.kn-interest-consent {
	display: flex; gap: 10px; align-items: flex-start;
	margin-top: 12px; font-size: 13px; line-height: 1.45;
	color: var(--wp--preset--color--muted); cursor: pointer;
}
.kn-interest-consent input { margin: 2px 0 0; width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--wp--preset--color--accent); }
.kn-tile.is-dark .kn-interest-consent { color: rgba(255,255,255,.65); }
.kn-tile.is-dark .kn-interest-consent a { color: #fff; }
.kn-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.kn-interest-msg { border-radius: var(--kn-radius-small); padding: 12px 16px; font-size: 15px; margin: 0 0 12px !important; }
.kn-interest-msg.is-sent, .kn-interest-msg.is-confirmed { background: #e8f8ed; color: #0b5a23; }
.kn-interest-msg.is-removed { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); }
.kn-interest-msg.is-error { background: #fdecec; color: #8a1c1c; }
.kn-coming-soon { font-weight: 600; color: var(--wp--preset--color--accent); }
@media (max-width: 599px) {
	.kn-interest-row { flex-direction: column; }
	.kn-interest-submit { width: 100%; }
}
/* Centered form in tiles */
.kn-tile .kn-interest-block { text-align: left; }
/* Notify-me form: fit the column, normal text weight, centered in tiles */
.kn-interest { max-width: min(520px, 100%); box-sizing: border-box; }
.kn-interest-email, .kn-interest-email::placeholder { font-weight: 400 !important; }
.kn-interest-email::placeholder { color: var(--wp--preset--color--muted); opacity: 1; }
.kn-interest-consent, .kn-interest-consent span { font-weight: 400 !important; }
.kn-interest-block .kn-interest-product,
.kn-interest-block .kn-interest-count { display: flex; justify-content: center; text-align: center; }

/* =====================================================================
 * v1.12.1 — store cards and Notify-me spacing
 * ================================================================== */

/* Product page: breathing room between the text and the form */
.kn-interest-product { margin-top: 36px !important; }
.kn-interest-product .kn-interest-count { margin-bottom: 16px !important; }

/* Cards: price and button always sit at the bottom, on the same line in every card */
.kn-collection .wc-block-product { height: 100%; box-sizing: border-box; }
.kn-collection .wc-block-product > .wp-block-woocommerce-product-price { margin-top: auto !important; }
.kn-collection .wc-block-product > .wp-block-woocommerce-product-button,
.kn-collection .wc-block-product > .kn-interest-card-btn { margin-top: 12px !important; }

/* Every card button identical: Add to bag and Notify me */
.kn-collection .wc-block-components-product-button__button,
.kn-collection .wp-block-button__link,
.kn-interest-card-btn .wp-block-button__link,
.kn-interest-card-btn.button {
	height: 40px !important;
	min-height: 40px !important;
	min-width: 128px !important;
	padding: 0 18px !important;
	margin: 0 !important;
	font-size: 15px !important;
	line-height: 1 !important;
	font-weight: 400 !important;
	border: 1px solid transparent !important;
	border-radius: 980px !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
.kn-collection .wp-block-woocommerce-product-button,
.kn-collection .kn-interest-card-btn { display: flex; justify-content: center; width: 100%; }

/* "Coming soon" looks exactly like a price */
/* Inherit the price style wherever it appears (big on the product page, small in cards) */
.kn-coming-soon {
	font-size: inherit !important;
	line-height: inherit !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--accent) !important;
}