/*
 * Kano Cyprus — the parts block markup can't express.
 *
 * Everything colour/type/spacing related is a theme.json token, referenced
 * here as a CSS custom property. Nothing is hardcoded, so retuning the palette
 * means editing theme.json alone.
 */

/* ---------------------------------------------------------------- primitives */

:root {
	--kano-ink: var(--wp--preset--color--contrast);
	--kano-paper: var(--wp--preset--color--base);
	--kano-accent: var(--wp--preset--color--accent);
	--kano-line: var(--wp--preset--color--line);
	--kano-muted: var(--wp--preset--color--muted);
	--kano-ui: var(--wp--preset--font-family--ui);
	--kano-display: var(--wp--preset--font-family--display);
	--kano-ease: cubic-bezier(.22, .61, .36, 1);

	/* Semantic states, kept separate from the brand accent so "out of stock"
	   never competes visually with a price or a call to action. */
	--kano-ok: #1F6F4A;
	--kano-rust: #9B3B2F;
}

/* Small uppercase label used above product titles and section heads. */
.kano-eyebrow {
	display: block;
	font-family: var(--kano-ui);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kano-muted);
	margin-bottom: .35rem;
}

/* --------------------------------------------------------------------- hero */

.kano-hero {
	position: relative;
	min-height: min(86vh, 820px);
	display: flex;
	align-items: center;
	overflow: hidden;
	background: #14161a;
}

.kano-hero__media,
.kano-hero__media img,
.kano-hero video.wp-block-cover__video-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* The scrim must sit above the footage but below the copy. */
.kano-hero .wp-block-cover__background { z-index: 1; }
.kano-hero .wp-block-cover__inner-container { z-index: 3; }

/* The hero video plays on mobile too, by instruction. It is ~7.8 MB, so the
   loader still defers it until after first paint rather than blocking the copy. */

/* Motion sensitivity: a looping grappling clip is exactly the kind of movement
   people turn this setting on to avoid. */
@media (prefers-reduced-motion: reduce) {
	.kano-hero video.wp-block-cover__video-background { display: none; }
}

/* Legibility scrim. Angled from the left so the headline sits on the darkest
   part of the frame while the right of the photograph stays readable. */
.kano-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	/* Heavy enough on the left for white type to hold, then clearing fast so the
	   footage is actually visible on the right two-thirds of the frame. */
	background: linear-gradient(100deg, rgba(15, 16, 19, .82) 0%, rgba(15, 16, 19, .55) 34%, rgba(15, 16, 19, .12) 68%, rgba(15, 16, 19, 0) 100%);
	pointer-events: none;
}

/* No footage behind the type (mobile, reduced motion, or before the clip
   loads) means the gradient has nothing to sit on — fall back to a solid
   ground so the hero never renders as pale grey text on near-white. */
.kano-hero { background: #14161a; }

.kano-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	color: #fff;
}

/* The cover's inner container is a constrained layout, which gives every child
   `margin-inline:auto` at contentSize — so the headline, subhead and buttons each
   centred at a different width and stepped raggedly across the hero. Everything
   here is deliberately flush left against one edge instead. */
.kano-hero__inner.is-layout-constrained > *,
.kano-hero__inner > .wp-block-group > * {
	max-width: none;
	margin-inline: 0;
}

.kano-hero__eyebrow {
	font-family: var(--kano-ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--kano-accent);
	margin: 0 0 1.1rem;
}

.kano-hero h1,
.kano-hero__title {
	font-family: var(--kano-display);
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 700;
	line-height: .88;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 1.1rem;
	max-width: 15ch;
	text-wrap: balance;
}

.kano-hero__sub {
	font-size: var(--wp--preset--font-size--large);
	color: rgba(255, 255, 255, .84);
	margin: 0 0 2.2rem;
	max-width: 42ch;
}

.kano-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

/* The global button is ink-filled, which disappears against the hero's dark
   photograph. On this one surface the fill inverts to white. */
.kano-hero__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: #fff;
	color: var(--kano-ink);
	border: 1px solid #fff;
}
.kano-hero__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--kano-accent);
	border-color: var(--kano-accent);
	color: #fff;
}
.kano-hero__cta .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: #fff;
	border: 1px solid #fff;
}
.kano-hero__cta .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: #fff;
	color: var(--kano-ink);
}

.kano-btn {
	display: inline-block;
	font-family: var(--kano-ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 1.05rem 2.1rem;
	border: 1px solid #fff;
	background: #fff;
	color: var(--kano-ink);
	transition: background .18s var(--kano-ease), color .18s var(--kano-ease), border-color .18s var(--kano-ease);
}
.kano-btn:hover { background: var(--kano-accent); border-color: var(--kano-accent); color: #fff; }

.kano-btn--ghost { background: transparent; color: #fff; }
.kano-btn--ghost:hover { background: #fff; border-color: #fff; color: var(--kano-ink); }

/* ------------------------------------------------------------------ header */

/* The global button style is a heavy filled block — right for "Add to cart",
   wrong for a search affordance sitting in the header. */
.wp-block-search__button {
	background: transparent !important;
	color: var(--kano-ink) !important;
	border: 0 !important;
	padding: .4rem !important;
	min-width: 0;
}
.wp-block-search__button svg { fill: currentColor; width: 22px; height: 22px; }
.wp-block-search__button:hover { color: var(--kano-accent) !important; background: transparent !important; }

/* WooCommerce injects its own customer-account and mini-cart blocks into the
   header. Both land orphaned mid-nav, and the mini-cart duplicates the cart
   button this theme already renders — so both are suppressed here. My Account
   stays reachable from the footer. */
header .wp-block-woocommerce-customer-account,
header .wp-block-woocommerce-mini-cart,
header .wc-block-mini-cart { display: none !important; }

.kano-cart {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-family: var(--kano-ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--kano-ink);
	color: #fff !important;
	padding: .7rem 1.15rem;
	transition: background .18s var(--kano-ease);
}
.kano-cart:hover { background: var(--kano-accent); color: #fff !important; }
.kano-cart__count { font-variant-numeric: tabular-nums; }

/* Mobile header.
 *
 * The search block carries a fixed 220px width and the header row is laid out
 * `nowrap`, so on a phone the search field plus cart pushed the whole document
 * ~200px wider than the viewport and the page scrolled sideways. In button-only
 * mode the field needs no reserved width at all. */
@media (max-width: 781px) {
	header .wp-block-search,
	header .wp-block-search__button-only,
	header .wp-block-search__inside-wrapper {
		width: auto !important;
		min-width: 0 !important;
		max-width: none;
	}
	header .wp-block-search__input { width: 0; padding: 0; border: 0; }

	header .wp-block-group.is-nowrap { flex-wrap: nowrap !important; min-width: 0; }
	header .wp-block-group { min-width: 0; }

	.kano-cart { padding: .6rem .85rem; font-size: 11px; letter-spacing: .06em; gap: .3rem; }

	.wp-block-site-title { font-size: .95rem !important; }
}

/* Very narrow phones: tighten rather than swap in an icon — an emoji cart would
   render differently on every platform and sit oddly against Jost. */
@media (max-width: 400px) {
	.kano-cart { padding: .55rem .7rem; letter-spacing: .04em; }
	.wp-block-site-title { font-size: .85rem !important; }
}

/* Touch targets.
 *
 * Footer and section-head links were 17–20px tall — fine for a mouse, below the
 * 24px WCAG 2.5.8 minimum for a fingertip. Padding rather than font-size, so the
 * typographic scale is unaffected. */
@media (max-width: 781px) {
	.kano-footer-list li { margin-bottom: .35rem; }
	.kano-footer-list a,
	.kano-section-head a {
		display: inline-block;
		padding-block: .35rem;
	}
	.kano-section-head { flex-wrap: wrap; row-gap: .35rem; }
}

/* ------------------------------------------------------------- promise bar */

.kano-marquee {
	background: var(--kano-ink);
	color: #fff;
	overflow: hidden;
	padding: .85rem 0;
	font-family: var(--kano-ui);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.kano-marquee__track {
	display: flex;
	width: max-content;
	animation: kano-scroll 38s linear infinite;
}

.kano-marquee__set {
	display: flex;
	align-items: center;
	gap: 3.5rem;
	margin: 0;
	padding: 0 1.75rem 0 0;
	list-style: none;
}
.kano-marquee__set li { white-space: nowrap; display: flex; align-items: center; gap: 3.5rem; }
/* Diamond separates items; the last one is trimmed so the loop seam is clean. */
.kano-marquee__set li::after { content: "\25C6"; color: var(--kano-accent); font-size: .68em; }

@keyframes kano-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Static and evenly spaced when motion is unwelcome — the content still reads,
   and the duplicated set is removed so nothing is announced twice. */
@media (prefers-reduced-motion: reduce) {
	.kano-marquee__track { animation: none; width: 100%; }
	.kano-marquee__set { width: 100%; justify-content: space-around; flex-wrap: wrap; padding-right: 0; }
	.kano-marquee__set[aria-hidden="true"] { display: none; }
	.kano-marquee__set li:last-child::after { content: none; }
}

/* ------------------------------------------------------------- brand split */

.kano-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.kano-split--three { grid-template-columns: repeat(3, 1fr); }

/* Three portrait panels do not survive a phone: stack them. The middle
   breakpoint keeps all three side by side down to tablet, where they are still
   wide enough for the headline to sit on one or two lines. */
@media (max-width: 900px) { .kano-split--three { grid-template-columns: 1fr; } }
@media (max-width: 780px) { .kano-split { grid-template-columns: 1fr; } }

.kano-split__panel {
	position: relative;
	min-height: 480px;
	display: flex;
	align-items: flex-end;
	padding: var(--wp--preset--spacing--40);
	overflow: hidden;
	background: var(--kano-ink);
	color: #fff;
}
.kano-split__panel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--kano-ease);
}
.kano-split__panel:hover img { transform: scale(1.045); }
.kano-split__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15, 16, 19, .88) 0%, rgba(15, 16, 19, .25) 55%, rgba(15, 16, 19, .05) 100%);
}
.kano-split__body { position: relative; z-index: 2; }
.kano-split__body h2 {
	font-family: var(--kano-display);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	text-transform: uppercase;
	line-height: .95;
	margin: 0 0 .5rem;
	color: #fff;
}
.kano-split__body p { color: rgba(255, 255, 255, .82); margin: 0 0 1.4rem; max-width: 34ch; }

/* "Kano Kimonos Women" at the two-panel size wraps to three lines in a third of
   the viewport. The vw term has to shrink with the column, not the window. */
.kano-split--three .kano-split__body h2 { font-size: clamp(1.6rem, 1.1rem + 1.3vw, 2.4rem); }
.kano-split--three .kano-split__body p { font-size: .9375rem; max-width: 28ch; }

/* ---------------------------------------------------------------- manifesto */

/* The band was a flat contrast-coloured group before it gained a photograph.
   Core's cover default of min-height:430px would fight the section's own
   vertical rhythm, so the padding stays in charge of the height. */
.kano-manifesto { min-height: 0; }
.kano-manifesto .wp-block-cover__image-background { filter: grayscale(.35); }

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

/* Woo's shortcode wrapper carries a max-width from whatever layout it lands in;
   the grid needs the full width of its section to reach four columns. */
.woocommerce.columns-1,
.woocommerce.columns-2,
.woocommerce.columns-3,
.woocommerce.columns-4,
.woocommerce.columns-5,
.woocommerce.columns-6 { max-width: none; }

.woocommerce ul.products,
.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: none;
}

/* Woo puts columns-N on the wrapper for the shortcode but on the <ul> itself for
   archives — so both need targeting, or the shop page free-flows to 5 columns
   while the homepage sits at 4. */
@media (min-width: 1024px) {
	.woocommerce.columns-3 ul.products,
	ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
	.woocommerce.columns-4 ul.products,
	ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
}

ul.products li.product,
.wc-block-product {
	position: relative;
	background: #fff;
	border: 1px solid var(--kano-line);
	padding: 0 0 1.1rem;
	transition: border-color .18s var(--kano-ease), box-shadow .18s var(--kano-ease), transform .18s var(--kano-ease);
	/* Column layout so the button can be pinned to the bottom of every card.
	   Grid already stretches cards to equal height; without this the slack
	   collects under the button and the row's buttons sit at different heights. */
	display: flex;
	flex-direction: column;
}

/* The link wraps image, eyebrow, title and price — it needs to be a column too
   so the title can reserve its space inside it. */
ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
}

/* Reserve two lines for the title. One- and two-line names then start their
   price at the same y, so prices line up across the row instead of stepping. */
ul.products li.product .woocommerce-loop-product__title {
	min-height: calc(1.15em * 2);
}

/* Card content is centred. */
ul.products li.product { text-align: center; }
ul.products li.product > a.woocommerce-LoopProduct-link { align-items: center; }

/* Push the action to the bottom of the card, whatever the content above, and
   centre it on the card's axis. */
ul.products li.product .button {
	margin-top: auto !important;
	align-self: center;
}

/* Woo clears its float layout with ::before/::after on ul.products. Pseudo-
   elements are grid items too, so those two swallow the first and last cells —
   which is why the opening cell sat empty and the last card wrapped alone. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { content: none !important; display: none !important; }

/* Woo styles the loop for a float grid: percentage widths, margins, and
   clear:both on .first / .last. Inside a CSS grid those leave the opening cell
   empty and wrap the last card onto a row of its own — so they are reset here. */
ul.products li.product,
ul.products li.product.first,
ul.products li.product.last {
	width: auto !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	grid-column: auto !important;
}
ul.products li.product:hover,
.wc-block-product:hover {
	border-color: var(--kano-ink);
	box-shadow: var(--wp--preset--shadow--card);
	transform: translateY(-3px);
}

ul.products li.product a img,
.wc-block-product img {
	margin: 0 0 .9rem;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}

ul.products li.product .kano-eyebrow,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price,
ul.products li.product .button { margin-inline: 1.1rem; }

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--kano-display) !important;
	font-size: 1.05rem !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1.15;
	padding: 0 !important;
	margin-bottom: .35rem;
}

ul.products li.product .price {
	display: block;
	font-family: var(--kano-ui);
	font-size: 1rem;
	font-weight: 500;
	color: var(--kano-ink);
	margin-bottom: .9rem;
}
ul.products li.product .price del { color: var(--kano-muted); font-weight: 400; margin-right: .4rem; }
ul.products li.product .price ins { text-decoration: none; color: var(--kano-accent); }

/* Badges ---------------------------------------------------------------- */

.kano-badge,
ul.products li.product .onsale {
	position: absolute;
	top: .8rem;
	left: .8rem;
	z-index: 3;
	font-family: var(--kano-ui);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .32rem .6rem;
	border-radius: 0;
	background: var(--kano-accent);
	color: #fff;
	margin: 0;
	min-height: 0;
	min-width: 0;
	line-height: 1.5;
}

/* The in-store badge is the differentiator, so it gets the ink, not the red —
   red is reserved for price/sale so the two never compete. */
.kano-badge--store { background: var(--kano-ink); }

.kano-instore {
	font-family: var(--kano-ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	border-left: 3px solid var(--kano-accent);
	padding: .55rem .9rem;
	background: var(--wp--preset--color--surface);
	margin: 0 0 1.2rem;
}

/* ---------------------------------------------------------- single product */

.woocommerce div.product .product_title {
	font-family: var(--kano-display);
	text-transform: uppercase;
	line-height: .96;
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
	margin-bottom: .4rem;
}

.woocommerce div.product p.price {
	font-family: var(--kano-ui);
	font-weight: 500;
	font-size: 1.6rem;
	color: var(--kano-ink);
}

.woocommerce div.product form.cart .button {
	width: 100%;
	padding: 1.15rem 2rem;
	font-family: var(--kano-ui);
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--kano-ink);
	color: #fff;
	border-radius: 0;
}
.woocommerce div.product form.cart .button:hover { background: var(--kano-accent); color: #fff; }

/* Before a size is chosen Woo disables the button and leaves it browser-grey,
   which reads as broken rather than "pick a size first". */
.woocommerce div.product form.cart .button:disabled,
.woocommerce div.product form.cart .button.disabled,
.woocommerce div.product form.cart .button[disabled] {
	background: var(--wp--preset--color--surface) !important;
	color: var(--kano-muted) !important;
	border: 1px solid var(--kano-line);
	cursor: not-allowed;
	opacity: 1;
}

/* ------------------------------------------------------- variation swatches */

/* The select still drives everything; it is only hidden from sight. Not
   display:none — some browsers skip validation and change events on fully
   removed controls, and Woo still needs it to behave like a live form field. */
/* Geometry is !important throughout: WooCommerce sizes `.variations select`
   with a more specific selector, which left this 952px wide and pushed the
   whole document into horizontal scroll on desktop. A visually-hidden utility
   has to win outright or it is not hidden. */
.kano-select-hidden {
	position: absolute !important;
	width: 1px !important;
	min-width: 0 !important;
	max-width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0 !important;
	left: 0;
	top: 0;
}

.kano-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: .1rem 0 .25rem;
}

.kano-swatch {
	/* 48px min in both directions — comfortably above the 44px touch guideline,
	   which is the whole point on a phone in a gym. */
	min-width: 48px;
	min-height: 48px;
	padding: 0 .85rem;
	font-family: var(--kano-ui);
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--kano-ink);
	background: #fff;
	border: 1px solid var(--kano-line);
	border-radius: 0;
	cursor: pointer;
	transition: border-color .14s var(--kano-ease), background .14s var(--kano-ease), color .14s var(--kano-ease);
	-webkit-tap-highlight-color: transparent;
}

.kano-swatch:hover:not([disabled]) { border-color: var(--kano-ink); }

.kano-swatch.is-selected {
	background: var(--kano-ink);
	border-color: var(--kano-ink);
	color: #fff;
}

/* Unavailable in the chosen combination. Struck through and dimmed so it is
   obviously a real size that cannot be had, not a rendering glitch. */
.kano-swatch[disabled] {
	color: var(--kano-muted);
	background: var(--wp--preset--color--surface);
	border-color: var(--kano-line);
	cursor: not-allowed;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	opacity: .65;
}

.kano-swatch:focus-visible {
	outline: 2px solid var(--kano-accent);
	outline-offset: 2px;
}

/* The variations table is a <table> in Woo's markup; on a phone it needs to
   stack, or the label column squeezes the swatches into a narrow strip. */
.woocommerce div.product form.cart .variations { margin-bottom: 1.2rem; width: 100%; }
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	display: block;
	width: auto;
	padding-left: 0;
	padding-right: 0;
	text-align: left;
	border: 0;
}
.woocommerce div.product form.cart .variations td.label { padding-bottom: .3rem; }
.woocommerce div.product form.cart .variations td.value { padding-bottom: .9rem; }

/* Woo's "Clear" link sits under the swatches. */
.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	font-family: var(--kano-ui);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--kano-muted);
	padding: .4rem 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.woocommerce div.product form.cart .reset_variations:hover { color: var(--kano-accent); }

/* Any select this theme has not swatched (a shipping or sorting dropdown). */
.woocommerce div.product form.cart .variations select:not(.kano-select-hidden) {
	font-family: var(--kano-ui);
	font-size: .95rem;
	padding: .75rem .9rem;
	border: 1px solid var(--kano-line);
	border-radius: 0;
	background: #fff;
	min-width: 200px;
	max-width: 100%;
}
.woocommerce div.product .product_meta {
	font-family: var(--kano-ui);
	font-size: var(--wp--preset--font-size--small);
	color: var(--kano-muted);
	border-top: 1px solid var(--kano-line);
	padding-top: 1rem;
	margin-top: 1.5rem;
}
/* Woo runs SKU / Category / Tags together on one line with no separation. */
.woocommerce div.product .product_meta > span { display: block; margin-bottom: .25rem; }

/* Woo's default tabs are lavender pills with rounded corners and drop shadows —
   nothing to do with this design. Flattened to a simple underlined row. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 1.5rem;
	border-bottom: 1px solid var(--kano-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 1.5rem 0 0;
	padding: 0;
	box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: .7rem 0;
	font-family: var(--kano-ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--kano-muted);
	border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--kano-ink);
	border-bottom-color: var(--kano-accent);
}

/* The variation panel reserves space for a description most products do not
   have, leaving a tall empty gap between the swatches and the stock line. */
.woocommerce div.product .woocommerce-variation { margin: 0; }
.woocommerce div.product .woocommerce-variation-description:empty,
.woocommerce div.product .woocommerce-variation-price:empty,
.woocommerce div.product .woocommerce-variation-availability:empty { display: none; }
.woocommerce div.product .woocommerce-variation-description p:last-child { margin-bottom: .5rem; }
.woocommerce div.product .woocommerce-variation-availability p { margin: 0 0 .35rem; }
.woocommerce div.product .woocommerce-variation-availability .stock {
	font-family: var(--kano-ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	margin: 0;
}
.woocommerce div.product .woocommerce-variation-availability .stock.in-stock { color: var(--kano-ok); }
.woocommerce div.product .woocommerce-variation-availability .stock.out-of-stock { color: var(--kano-rust); }

/* Size swatches instead of a select, where the theme can reach them. */
.woocommerce div.product form.cart .variations td.label label {
	font-family: var(--kano-ui);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kano-muted);
}

/* ------------------------------------------------- single product, mobile */

@media (max-width: 781px) {
	/* Gallery and summary stack; Woo's 48%/48% float split is unusable narrow. */
	.woocommerce div.product div.images,
	.woocommerce div.product div.summary {
		width: 100% !important;
		float: none !important;
		margin: 0 0 1.5rem !important;
	}

	.woocommerce div.product .product_title { font-size: 1.75rem; }
	.woocommerce div.product p.price { font-size: 1.4rem; }

	/* Quantity and add-to-cart on one row, the button taking the space it
	   deserves — it is the only thing on this page that matters.
	   On a variable product Woo nests both inside .woocommerce-variation-add-to-cart,
	   so the flex row has to be applied there as well as on form.cart itself. */
	.woocommerce div.product form.cart,
	.woocommerce div.product .woocommerce-variation-add-to-cart {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 10px;
	}
	/* .single_variation_wrap is the real flex child — it wraps both the variation
	   panel and the add-to-cart row. Without it the button sizes to its text
	   instead of filling the row. */
	.woocommerce div.product form.cart .variations,
	.woocommerce div.product form.cart .single_variation_wrap,
	.woocommerce div.product form.cart .woocommerce-variation,
	.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
	.woocommerce div.product form.cart .reset_variations { flex: 0 0 100%; width: 100%; }

	.woocommerce div.product form.cart div.quantity {
		flex: 0 0 84px;
		width: 84px;
		margin: 0;
		max-width: 84px;
	}
	.woocommerce div.product form.cart div.quantity input.qty {
		width: 100%;
		height: 56px;
		padding: 0;
		font-size: 1rem;
		line-height: 56px;
		text-align: center;
		border: 1px solid var(--kano-line);
		border-radius: 0;
		box-sizing: border-box;
	}
	.woocommerce div.product form.cart .single_add_to_cart_button {
		flex: 1 1 0;
		min-width: 0;
		min-height: 56px;
		margin: 0;
		padding: 0 1rem;
		font-size: .95rem;
	}

	/* Thumbnails: a scrollable strip beats a cramped 4-up grid. */
	.woocommerce div.product div.images .flex-control-thumbs {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: .35rem;
	}
	.woocommerce div.product div.images .flex-control-thumbs li {
		flex: 0 0 78px;
		width: 78px !important;
		margin: 0;
		scroll-snap-align: start;
	}

	/* Tabs: same flat underlined row as desktop, just allowed to wrap. Boxing
	   them here would reintroduce exactly the pill look the desktop rule removes. */
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		display: flex;
		flex-wrap: wrap;
		column-gap: 1.25rem;
		row-gap: 0;
		padding: 0;
		margin: 0 0 1.25rem;
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; }
	.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: .6rem 0; }

	/* Tighten the space the variation panel leaves above add-to-cart. */
	.woocommerce div.product form.cart .reset_variations { padding: .2rem 0; }
	.woocommerce div.product .woocommerce-variation-availability { margin-top: .25rem; }

	/* Related products: two up rather than one, so the row still reads as a row. */
	.woocommerce div.product .related ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------ breadcrumbs */

.woocommerce .woocommerce-breadcrumb {
	font-family: var(--kano-ui);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kano-muted);
	margin-bottom: 1.6rem;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--kano-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--kano-accent); }

/* --------------------------------------------------- content page furniture */

/* Simple two-column label/value table used on Visit, Delivery, Size guide and
   the blog. Scrolls rather than breaking the page on a narrow screen. */
.kano-hours {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
	font-size: .95rem;
}
.kano-hours th,
.kano-hours td {
	text-align: left;
	vertical-align: top;
	padding: .7rem .9rem .7rem 0;
	border-bottom: 1px solid var(--kano-line);
}
.kano-hours th {
	font-family: var(--kano-ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: .04em;
	white-space: nowrap;
	width: 34%;
	padding-right: 1.25rem;
}
@media (max-width: 560px) {
	.kano-hours th, .kano-hours td { display: block; width: auto; border-bottom: 0; padding-bottom: .2rem; }
	.kano-hours td { padding-bottom: .9rem; border-bottom: 1px solid var(--kano-line); }
}

/* Visit the store: address card beside the map, stacking on mobile. */
.kano-visit {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) 1.35fr;
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--40);
	align-items: start;
}
@media (max-width: 781px) { .kano-visit { grid-template-columns: 1fr; } }

.kano-visit__card {
	background: #fff;
	border: 1px solid var(--kano-line);
	padding: 1.4rem;
}
.kano-visit__addr { font-size: 1.02rem; line-height: 1.55; margin: 0 0 .8rem; }
.kano-visit__note { font-size: .875rem; color: var(--kano-muted); margin: 0 0 1.1rem; }
.kano-visit__nav { display: flex; flex-direction: column; gap: .5rem; }

.kano-navbtn {
	display: block;
	text-align: center;
	font-family: var(--kano-ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .95rem 1rem;
	min-height: 48px;
	background: var(--kano-ink);
	color: #fff !important;
	border: 1px solid var(--kano-ink);
	transition: background .16s var(--kano-ease), border-color .16s var(--kano-ease);
}
.kano-navbtn:hover { background: var(--kano-accent); border-color: var(--kano-accent); }

/* The embed has no intrinsic height, so the ratio has to be declared. */
.kano-visit__map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--kano-line);
	background: var(--wp--preset--color--surface);
}
@media (max-width: 781px) { .kano-visit__map iframe { aspect-ratio: 1 / 1; } }
.kano-visit__maplink { font-size: .8125rem; margin: .5rem 0 0; }


/* A brand section with nothing in it yet — the IJS line before it launches. */
.kano-empty-brand {
	font-family: var(--kano-ui);
	font-size: var(--wp--preset--font-size--small);
	color: var(--kano-muted);
	padding: 2.5rem 0;
	text-align: center;
	border: 1px dashed var(--kano-line);
}


/* Collections page: brand cards, and Woo's category grid brought into line. */
.kano-brandcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 1rem 0 2rem; }
.kano-brandcard {
	display: flex; flex-direction: column; gap: .35rem;
	padding: 1.5rem; background: #fff; border: 1px solid var(--kano-line);
	color: var(--kano-ink) !important; text-decoration: none;
	transition: border-color .16s var(--kano-ease), transform .16s var(--kano-ease);
}
.kano-brandcard:hover { border-color: var(--kano-ink); transform: translateY(-2px); }
.kano-brandcard strong { font-family: var(--kano-display); text-transform: uppercase; font-size: 1.5rem; line-height: 1.05; }
.kano-brandcard span:last-child { font-size: .9rem; color: var(--kano-muted); }

/* Woo's category grid uses the same li.product markup as the shop loop, so the
   card styling already applies — it just needs the count to read as a caption. */
.woocommerce ul.products li.product-category .count {
	display: block; font-family: var(--kano-ui); font-size: var(--wp--preset--font-size--tiny);
	color: var(--kano-muted); background: none; border: 0; padding: 0; margin-top: .2rem;
}
.woocommerce ul.products li.product-category h2 { min-height: 0 !important; }

/* ---------------------------------------------------------------- utility */

.kano-rule { border: 0; border-top: 1px solid var(--kano-line); margin: 0; }

.kano-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: var(--wp--preset--spacing--30);
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--kano-line);
	/* Match the product grid's width. Inside a constrained group this would sit
	   at contentSize (760px) while the grid runs to wideSize (1360px), leaving
	   the heading and its rule visibly short of the row beneath. */
	max-width: none;
	width: 100%;
}
.kano-section-head h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.kano-section-head a {
	font-family: var(--kano-ui);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Visible focus everywhere — the design is high-contrast, keep it keyboard-safe. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--kano-accent);
	outline-offset: 2px;
}