/*
Theme Name: Kidsaround
Theme URI: https://kidsaround.ma
Author: Kidsaround Morocco
Author URI: https://kidsaround.ma
Description: Custom block theme for Kidsaround Morocco — Moroccan franchise of kidsaround.com. Full Site Editing, WooCommerce-ready, MAD currency, French-first.
Version: 1.6.7
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kidsaround
Tags: full-site-editing, block-styles, block-templates, woocommerce, e-commerce
*/

/* Utility: hide a block/section without deleting it (e.g. Ventes Privées banner). */
.ka-hidden {
	display: none !important;
}

.kidsaround-site-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	text-decoration: none;
}

.kidsaround-site-logo img {
	height: 32px;
	width: auto;
	display: block;
}

/* --------------------------------------------------------------------------
   Sticky header — hides on scroll down, reveals (and stays pinned) on scroll up.
   We target the header *template-part wrapper* (a direct child of
   .wp-site-blocks), NOT the inner nav group: position:sticky only holds while
   the element's PARENT is on screen, and only the wrapper's parent spans the
   full page height. JS toggles the classes (see assets/js/header-scroll.js);
   the transform slides it out of view while keeping layout intact (no jump).
   -------------------------------------------------------------------------- */
header.wp-block-template-part {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 100;
	transition: transform 0.35s ease;
	will-change: transform;
}

/* Hidden state: slid up out of view when scrolling down. */
header.wp-block-template-part.ka-header--hidden {
	transform: translateY(-100%);
}

/* A subtle shadow once the header has detached from the top of the page,
   so it reads as a floating bar over the content. */
header.wp-block-template-part.ka-header--stuck {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Respect users who prefer reduced motion — snap instead of slide. */
@media (prefers-reduced-motion: reduce) {
	header.wp-block-template-part {
		transition: none;
	}
}

/* Push the sticky header AND the sticky filter toolbar below the WordPress
   admin bar so they aren't cut off for logged-in users. The admin bar is only
   fixed at >=783px; at <=782px it scrolls away, so no offset is needed there. */
@media screen and (min-width: 783px) {
	.admin-bar header.wp-block-template-part,
	.admin-bar .ka-catbar {
		top: 32px;
	}
}

/* Kill the default block-gap that WordPress inserts between the header
   template part and the page content, so the promo banner sits flush
   against the nav bar (no white strip below the sticky header). */
.wp-site-blocks > main,
.wp-site-blocks > .ka-bc-bar {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   Header search — restyle the core wp:search block (button-inside + icon)
   in parts/header.html into a compact rounded "pill" that matches the
   boutique header: soft field, round ink icon button, blue focus ring.
   -------------------------------------------------------------------------- */
.ka-search {
	margin: 0;
}

.ka-search .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	width: clamp(190px, 20vw, 260px);
	padding: 4px;
	background: var(--wp--preset--color--surface-soft, #fafafa);
	border: 1px solid var(--wp--preset--color--border, #e8e4ef);
	border-radius: 999px;
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.ka-search .wp-block-search__inside-wrapper:focus-within {
	background: #fff;
	border-color: var(--wp--preset--color--ink, #1a1a2e);
	box-shadow: 0 0 0 3px rgba(26, 26, 46, 0.08);
}

.ka-search .wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 34px;
	margin: 0;
	padding: 0 0.5rem 0 1rem;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-search .wp-block-search__input:focus {
	outline: 0;
	box-shadow: none;
}
.ka-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--ink-muted, #5b5b7a);
	opacity: 0.85;
}
/* Hide the browser's native "clear" (×) button on search inputs. */
.ka-search .wp-block-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}
.ka-search .wp-block-search__input::-ms-clear {
	display: none;
}

.ka-search .wp-block-search__button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	min-width: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--ink, #1a1a2e);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.1s;
}
.ka-search .wp-block-search__button:hover,
.ka-search .wp-block-search__button:focus-visible {
	background: #2d2d4a;
}
.ka-search .wp-block-search__button:active {
	transform: scale(0.94);
}
.ka-search .wp-block-search__button svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* --------------------------------------------------------------------------
   Brand strip — infinite scrolling carousel (section 2 of the front page)
   Two identical brand sequences sit side by side in the track; the animation
   slides the track left by exactly one sequence (-50%) and loops, so the join
   is seamless. Spacing lives on the separators (not flex `gap`) so the seam
   matches every internal gap.
   -------------------------------------------------------------------------- */
.ka-marquee {
	width: 100%;
	overflow: hidden;
	/* Fade the brands out toward both edges. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.ka-marquee__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: ka-marquee-scroll 60s linear infinite;
}

/* Pause when a visitor hovers, so they can read a name. */
.ka-marquee:hover .ka-marquee__track {
	animation-play-state: paused;
}

/* Each sequence is a wrapper that disappears from layout (display:contents),
   so its children become direct flex items of the track. */
.ka-marquee__unit {
	display: contents;
}

.ka-brand {
	white-space: nowrap;
	font-family: "Mulish", "Manrope", system-ui, -apple-system, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #111111;
}

.ka-sep {
	margin: 0 1.75rem;
	font-size: 0.7em;
	line-height: 1;
	color: #e2aebc;
}

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

/* Respect users who prefer no motion: stop scrolling and wrap the brands. */
@media (prefers-reduced-motion: reduce) {
	.ka-marquee {
		-webkit-mask-image: none;
		        mask-image: none;
	}
	.ka-marquee__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		row-gap: 0.5rem;
	}
}

/* --------------------------------------------------------------------------
   Hero carousel (section 3 of the front page)
   Slides sit side by side in a flex track; the JS in assets/js/hero-carousel.js
   slides the track with translateX and runs the autoplay / arrows / dots.
   -------------------------------------------------------------------------- */
.ka-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.ka-hero__viewport {
	overflow: hidden;
}

.ka-hero__track {
	display: flex;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.ka-hero__slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 100%;
}

/* The whole image, shown at full width (100vw). Both slides are 1920x800,
   so they share the same height and the carousel never jumps. */
.ka-hero__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Soft scrim so white text stays legible over the image. */
.ka-hero__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.04) 45%, rgba(0, 0, 0, 0.22) 100%);
}

.ka-hero__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	text-align: center;
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.ka-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, "Manrope", sans-serif);
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.ka-hero__tagline {
	margin: 0.5rem 0 1.75rem;
	font-size: clamp(1rem, 2vw, 1.35rem);
	font-weight: 500;
}

.ka-hero__btn {
	display: inline-block;
	background: #fff;
	color: var(--wp--preset--color--ink, #1a1a2e);
	padding: 0.875rem 2.25rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}
.ka-hero__btn:hover,
.ka-hero__btn:focus-visible {
	background: var(--wp--preset--color--ink, #1a1a2e);
	color: #fff;
}

/* Prev / next arrows */
.ka-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.4));
	transition: opacity 0.2s;
}
.ka-hero__arrow:hover { opacity: 0.65; }
.ka-hero__arrow--prev { left: 0.5rem; }
.ka-hero__arrow--next { right: 0.5rem; }

/* Dot indicators */
.ka-hero__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.25rem;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 0.6rem;
}
.ka-hero__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
	transition: background-color 0.2s;
}
.ka-hero__dot.is-active { background: #fff; }

/* Reduced motion: drop the slide transition (JS also disables autoplay). */
@media (prefers-reduced-motion: reduce) {
	.ka-hero__track { transition: none; }
}

/* Text panel that fills the row height and centres its content vertically
   (the "maillots" / "essentiels" text + image bands). */
.wp-block-column.ka-vcenter {
	display: flex;
	flex-direction: column;
	justify-content: center;
}


/* "Retrouvez les essentiels" mini product cards */
.ka-essentiels-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.ka-essentiel-card {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex: 1 1 120px;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--wp--preset--color--border, #e8e4ef);
	border-radius: 10px;
	background: #fff;
	text-decoration: none;
	color: var(--wp--preset--color--ink, #1a1a2e);
	transition: border-color 0.2s;
}
.ka-essentiel-card:hover {
	border-color: #a3c293;
}
.ka-essentiel-card img {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 6px;
}
.ka-essentiel-card span {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}


/* Essentiels: the middle image fills the full section height (no top/bottom gaps) */
.ka-essentiels .is-vertically-aligned-stretch {
	display: flex;
}
.ka-essentiels .is-vertically-aligned-stretch > .wp-block-cover {
	flex: 1;
}


/* essentiels image fill override — cover fills the whole stretched column */
.ka-essentiels .is-vertically-aligned-stretch {
	position: relative;
}
.ka-essentiels .is-vertically-aligned-stretch > .wp-block-cover {
	position: absolute;
	inset: 0;
	min-height: 0 !important;
	height: 100%;
	width: 100%;
}


/* Essentiels image = column background (always fills, no gaps) + compact cards */
.ka-essentiels-media {
	min-height: 280px;
	background: url('/wp-content/themes/kidsaround/assets/images/essentiels-marques.jpg') center / cover no-repeat;
}
.ka-essentiels-cards {
	flex-direction: column;
	align-items: flex-start;
}
.ka-essentiel-card {
	flex: 0 0 auto;
}


/* essentiels media force-fill: the image box drives the band height and fills it */
.ka-essentiels {
	min-height: 0 !important;
}
.ka-essentiels-media {
	display: block !important;
	align-self: stretch !important;
	min-height: 300px !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}


/* essentiels zoom crop: source photo has cream margins, so zoom in on the kids */
.ka-essentiels-media {
	min-height: 240px !important;
	background-size: auto 165% !important;
	background-position: center 26% !important;
}


/* ==== Retrouvez les essentiels — recoded (object-fit image, always fills) ==== */
.ka-ess {
	display: flex;
	align-items: stretch;
	min-height: 280px;
	background: #f7f8f2;
	overflow: hidden;
}
.ka-ess__text {
	flex: 0 0 36%;
	display: flex;
	align-items: center;
	padding: 1.5rem clamp(1rem, 3vw, 2.5rem);
}
.ka-ess__text h3 {
	margin: 0;
	color: #a3c293;
	font-family: var(--wp--preset--font-family--display, "Manrope", sans-serif);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.ka-ess__media {
	flex: 0 0 42%;
	min-width: 0;
}
.ka-ess__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}
.ka-ess__cards {
	flex: 1 1 auto;
	align-self: center;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 0 1rem;
}
.ka-ess__card {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--wp--preset--color--border, #e8e4ef);
	border-radius: 10px;
	background: #fff;
	text-decoration: none;
	color: var(--wp--preset--color--ink, #1a1a2e);
	transition: border-color 0.2s;
}
.ka-ess__card:hover { border-color: #a3c293; }
.ka-ess__card img {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 6px;
}
.ka-ess__card span {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
@media (max-width: 781px) {
	.ka-ess { flex-wrap: wrap; }
	.ka-ess__text, .ka-ess__media { flex: 1 1 100%; }
	.ka-ess__media { min-height: 220px; }
	.ka-ess__cards { flex-basis: 100%; flex-direction: row; }
}


/* product cut-outs show whole garment (not cropped) */
.ka-ess__card img { object-fit: contain !important; }


/* ==== Three promo cards (Green Around / Nos marques / Collection) ==== */
.ka-promos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
}
.ka-promo {
	position: relative;
	display: block;
	min-height: 120px;
	padding: 1.25rem clamp(1.25rem, 3vw, 2.5rem);
	color: #fff;
	text-decoration: none;
	overflow: hidden;
}
.ka-promo--orange { background: #e8772f; }
.ka-promo--pink   { background: #ee84b4; }
.ka-promo--blue   { background: #16479e; }
.ka-promo h3 {
	margin: 0;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}
.ka-promo p {
	margin: 0.6rem 0 0;
	max-width: 62%;
	font-size: 0.9rem;
}
.ka-promo__arrow {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 75px;
	height: 40px;
	background: #faf3f0;
	color: #1a1a2e;
	font-size: 1.2rem;
}
@media (max-width: 781px) {
	.ka-promos { grid-template-columns: 1fr; }
	.ka-promo p { max-width: 80%; }
}

/* SEO link cloud (bottom of the front page) — bold, uppercase, ink links. */
.ka-seo-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.9rem 1.5rem;
	max-width: 1000px;
	margin: 0 auto;
}
.ka-seo-links a {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--wp--preset--color--ink, #1a1a2e);
	transition: color 0.15s;
}
.ka-seo-links a:hover {
	color: var(--wp--preset--color--card-orange, #e5733c);
}
/* On phones the centered wrap looks ragged and crowds the edges —
   lay the links out as a tidy, even 2-column grid instead. */
@media (max-width: 600px) {
	/* Keep the intro paragraph off the screen edges too. */
	.ka-about {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
	.ka-seo-links {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.95rem 0.9rem;
		max-width: 460px;
		padding: 0 1rem;
	}
	.ka-seo-links a {
		font-size: 11.5px;
		letter-spacing: 0.02em;
		text-align: center;
	}
}

/* Search results heading (French, custom kidsaround/search-title block). */
.ka-search-title {
	text-align: center;
	margin: var(--wp--preset--spacing--70, 3rem) 0;
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--ink, #1a1a2e);
}


/* ==== Footer trust bar — icons centered above text ==== */
/* Footer brand logo (left of the link columns). Uses logo-footer.svg — the real
   logo with its wordmark turned white (accent colours kept) so it shows on the
   dark footer with no background card. */
.ka-footer-logo {
	display: inline-block;
	line-height: 0;
}
.ka-footer-logo img {
	display: block;
	width: 100%;
	max-width: 240px;
	height: auto;
}

/* NOS MARQUES — flow the brand list into two columns so the footer is shorter. */
.ka-footer-brands {
	column-count: 2;
	column-gap: 1.5rem;
}
.ka-footer-brands p {
	margin: 0 0 0.5rem;
	break-inside: avoid;
}
/* Small "secure payment" badge (Payzone · Visa · Mastercard) in the bottom bar. */
.ka-footer-pay {
	text-align: center;
	margin: 1.5rem 0 0.25rem;
}
.ka-footer-pay img {
	display: inline-block;
	width: 100%;
	max-width: 440px;
	height: auto;
	opacity: 0.9;
	/* The banner is white/coloured artwork on a solid BLACK background. "screen"
	   turns those black pixels into the footer's own navy — the box disappears
	   and only the logos + text remain. */
	mix-blend-mode: screen;
}
@media (max-width: 781px) {
	.ka-footer-logo img {
		max-width: 190px;
	}
}

/* --------------------------------------------------------------------------
   Content / legal pages (Mentions légales, CGV, Données personnelles,
   Livraisons et retours). A clean reading layout that matches the boutique:
   uppercase Manrope headings, comfortable Mulish body, accented title.
   -------------------------------------------------------------------------- */
.ka-page .wp-block-post-title {
	margin: 0 0 1.6rem;
	padding-bottom: 1.1rem;
	border-bottom: 2px solid var(--wp--preset--color--ink, #1a1a2e);
	font-family: var(--wp--preset--font-family--display, "Manrope", sans-serif);
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-page .wp-block-post-content > h2,
.ka-page .wp-block-post-content .wp-block-heading {
	margin: 2.4rem 0 0.5rem;
	font-family: var(--wp--preset--font-family--display, "Manrope", sans-serif);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
/* Small accent bar before each section heading. */
.ka-page .wp-block-post-content > h2::before,
.ka-page .wp-block-post-content .wp-block-heading::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 3px;
	margin-right: 0.6rem;
	vertical-align: middle;
	background: var(--wp--preset--color--promo-pink, #e88aa1);
}
.ka-page .wp-block-post-content p {
	margin: 0 0 1rem;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--wp--preset--color--ink-muted, #5b5b7a);
}
/* Lead / intro paragraph — slightly larger and darker. */
.ka-page .wp-block-post-content p.ka-page__intro {
	margin-bottom: 2rem;
	font-size: 1.08rem;
	font-weight: 500;
	line-height: 1.7;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-page .wp-block-post-content a {
	color: var(--wp--preset--color--card-blue, #1e4bd6);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.ka-page .wp-block-post-content a:hover {
	opacity: 0.8;
}
.ka-page .wp-block-post-content ul,
.ka-page .wp-block-post-content ol {
	margin: 0 0 1.1rem;
	padding-left: 1.3rem;
	line-height: 1.75;
	color: var(--wp--preset--color--ink-muted, #5b5b7a);
}
.ka-page .wp-block-post-content li {
	margin: 0 0 0.35rem;
}

.ka-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}
.ka-trust__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	text-align: center;
}
.ka-trust__icon {
	width: 38px;
	height: 38px;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-trust h4 {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-trust p {
	margin: 0;
	font-size: 0.85rem;
	color: #5b5b7a;
}
@media (max-width: 781px) {
	.ka-trust { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}


/* ==== Footer newsletter (dark band, outlined input) ==== */
.ka-news {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2rem;
}
.ka-news__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.ka-news__sub {
	margin: 0.4rem 0 0;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}
.ka-news__form {
	display: flex;
	align-items: stretch;
	flex: 1 1 380px;
	max-width: 560px;
	border: 1px solid rgba(255, 255, 255, 0.55);
}
.ka-news__form input {
	flex: 1;
	min-width: 0;
	padding: 0.9rem 1.1rem;
	border: 0;
	background: transparent;
	color: #fff;
	font: inherit;
}
.ka-news__form input::placeholder { color: rgba(255, 255, 255, 0.55); }
.ka-news__form input:focus { outline: none; }
.ka-news__form button {
	padding: 0 1.6rem;
	border: 0;
	background: transparent;
	color: #fff;
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background-color 0.2s;
}
.ka-news__form button:hover { background: rgba(255, 255, 255, 0.12); }
@media (max-width: 781px) {
	.ka-news__form { flex-basis: 100%; }
}


/* Footer social icons */
.ka-social {
	display: flex;
	justify-content: flex-end;
	gap: 1.1rem;
}
.ka-social a {
	display: inline-flex;
	color: #fff;
	transition: opacity 0.2s;
}
.ka-social a:hover { opacity: 0.6; }
.ka-social svg { width: 22px; height: 22px; }
/* Social icons placed under the footer logo (left-aligned). */
.ka-social--footer {
	justify-content: flex-start;
	margin-top: 1.25rem;
}
@media (max-width: 781px) {
	.ka-social { justify-content: flex-start; margin-top: 0.5rem; }
}


/* newsletter row 3-part: text | form | socials */
.ka-news__form { flex: 0 1 480px; }
.ka-news .ka-social { flex: 0 0 auto; }


/* newsletter refinements: narrower text, smaller input, brand logo */
.ka-news__text { max-width: 300px; }
.ka-news__form { flex: 0 1 420px; }
.ka-news__logo { display: inline-flex; flex: 0 0 auto; }
.ka-news__logo img { width: 46px; height: 46px; display: block; }
@media (max-width: 781px) {
	.ka-news__text { max-width: none; }
	.ka-news__logo { display: none; }
}


/* newsletter text uniform — 12px Mulish white, both lines the same */
.ka-news__title,
.ka-news__sub {
	margin: 0;
	font-family: "Mulish", "Manrope", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #ffffff;
}
.ka-news__text { max-width: 240px; }


/* newsletter input size */
.ka-news__form input,
.ka-news__form button { font-size: 0.9rem; }


/* --------------------------------------------------------------------------
   Mobile navigation — hamburger + slide-in drawer (≤781px)
   Progressive enhancement: assets/js/mobile-nav.js adds `.ka-has-jsnav` to
   <body>, builds the drawer at body level (so the sticky header's transform
   can't break the drawer's position:fixed), and toggles `.is-open`. Without
   JS, the inline links just wrap and stay usable.
   -------------------------------------------------------------------------- */

/* Hamburger button — hidden by default (desktop, and mobile-without-JS). */
.ka-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink, #1a1a2e);
	cursor: pointer;
}
.ka-nav-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	margin: 0 auto;
	background: currentColor;
	border-radius: 2px;
}

/* Drawer + backdrop are injected into <body> by JS; hidden until mobile. */
.ka-drawer,
.ka-drawer-backdrop {
	display: none;
}

.ka-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.ka-drawer-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.ka-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999;
	flex-direction: column;
	width: 100%;
	height: 100%;
	height: 100dvh;
	padding: 0;
	background: var(--wp--preset--color--surface, #fff);
	box-shadow: -8px 0 28px rgba(0, 0, 0, 0.18);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s;
	overflow-y: auto;
}
.ka-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
}

/* Keep the full-screen drawer clear of the WordPress admin bar (logged-in users
   only — real visitors never see it, so the drawer sits at top:0 for them). The
   admin bar is 46px on phones/tablets and 32px on wide screens. */
body.admin-bar .ka-drawer {
	top: 46px;
	height: calc(100dvh - 46px);
}
@media screen and (min-width: 783px) {
	body.admin-bar .ka-drawer {
		top: 32px;
		height: calc(100dvh - 32px);
	}
}

/* Header row inside the drawer: logo left, close button right. */
.ka-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--border, #e8e4ef);
}
.ka-drawer__logo {
	display: inline-flex;
	align-items: center;
}
.ka-drawer__logo img {
	height: 26px;
	width: auto;
	display: block;
}

.ka-drawer__close {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 2rem;
	line-height: 1;
	color: var(--wp--preset--color--ink, #1a1a2e);
	cursor: pointer;
}

.ka-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0.5rem 1.25rem 2rem;
}
.ka-drawer__item {
	border-bottom: 1px solid var(--wp--preset--color--border, #e8e4ef);
}
/* Top-level row: the category link + its expand chevron. */
.ka-drawer__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ka-drawer__link {
	display: block;
	flex: 1 1 auto;
	padding: 0.95rem 0.25rem;
	color: var(--wp--preset--color--ink, #1a1a2e);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}
.ka-drawer__link:hover,
.ka-drawer__link:focus-visible {
	color: #e88aa1;
}
.ka-drawer__expand {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink, #1a1a2e);
	cursor: pointer;
}
.ka-drawer__expand svg {
	width: 18px;
	height: 18px;
	transition: transform 0.2s ease;
}
.ka-drawer__expand.is-open svg {
	transform: rotate(180deg);
}
/* Expanded sub-categories / brands. */
.ka-drawer__sub {
	list-style: none;
	margin: 0;
	padding: 0.15rem 0 0.7rem;
}
.ka-drawer__sublink {
	display: block;
	padding: 0.5rem 0.25rem 0.5rem 1rem;
	color: var(--wp--preset--color--ink-muted, #5b5b7a);
	font-size: 0.85rem;
	text-decoration: none;
}
.ka-drawer__sublink.is-head {
	padding-left: 0.25rem;
	color: var(--wp--preset--color--ink, #1a1a2e);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.ka-drawer__sublink:hover,
.ka-drawer__sublink:focus-visible {
	color: #e88aa1;
}

/* Lock background scroll while the drawer is open. */
body.ka-drawer-open {
	overflow: hidden;
}

@media (max-width: 781px) {
	/* JS active → swap inline links for the hamburger + drawer. */
	body.ka-has-jsnav .ka-nav {
		display: none;
	}
	body.ka-has-jsnav .ka-nav-toggle {
		display: flex;
	}
	body.ka-has-jsnav .ka-drawer {
		display: flex;
	}
	body.ka-has-jsnav .ka-drawer-backdrop {
		display: block;
	}

	/* No-JS fallback: let the inline links wrap so they stay reachable. */
	.ka-nav {
		flex-wrap: wrap;
		gap: 0.4rem 1rem;
	}

	/* Shrink the logo so [hamburger][logo][icons] never overflows a phone row. */
	.kidsaround-site-logo img {
		height: 26px;
	}

	/* Collapse the search to just its round icon button so the header row
	   stays tight next to the hamburger, logo, account and cart. */
	.ka-search .wp-block-search__inside-wrapper {
		width: auto;
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
	}
	.ka-search .wp-block-search__input {
		display: none;
	}

	/* Tap the icon (mobile-search.js adds .ka-search--open) → the field drops down
	   as ONE flush, edge-to-edge bar. It's absolutely anchored to `top:100%` of
	   the sticky header wrapper (header.wp-block-template-part is position:sticky),
	   so it ALWAYS sits exactly at the header's bottom edge — no JS measurement, no
	   admin-bar gap, and it hides with the header on scroll. The round icon stays
	   put in the header. The block hard-codes a 999px pill radius inline on the
	   input, so the reset needs !important to flatten it into a bar. */
	.ka-search.ka-search--open .wp-block-search__input {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 1rem var(--wp--preset--spacing--30, 1.25rem);
		background: #fff;
		border: 0 !important;
		border-bottom: 1px solid var(--wp--preset--color--border, #e8e4ef) !important;
		border-radius: 0 !important;
		box-shadow: 0 12px 22px rgba( 0, 0, 0, 0.10 );
		font-size: 1rem;
		line-height: 1.3;
		color: var(--wp--preset--color--ink, #1a1a2e);
		z-index: 5;
	}
	/* Highlight the icon while the bar is open so it reads as active. */
	.ka-search.ka-search--open .wp-block-search__button {
		color: var(--wp--preset--color--card-blue, #1e4bd6);
	}
}


/* "Nos looks de printemps" — show the WHOLE photo on a soft tile (like a
   product card), centred, instead of cropping it with object-fit:cover. */
.ka-look {
	display: block;
	text-decoration: none;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-look__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 520px;
	background: #efeeec;
	border-radius: 4px;
	overflow: hidden;
}
.ka-look__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
	transition: transform 0.4s ease;
}
.ka-look:hover .ka-look__tile img {
	transform: scale(1.03);
}
@media (max-width: 781px) {
	.ka-look__tile {
		height: 420px;
	}
}

/* product cards tile — image on a soft cream tile (like the reference grid) */
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image {
	background: #f5f3ee;
	padding: 1rem;
	border-radius: 4px;
	margin-bottom: 0.85rem;
}
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image img {
	mix-blend-mode: multiply;
}
.wp-block-woocommerce-product-collection .wp-block-post-title {
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price {
	font-size: 0.9rem;
	color: #5b5b7a;
}


/* product card brand/type — brand bold, name in a warm gradient (like the reference) */
.ka-prod-brand {
	margin: 0.85rem 0 0;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-prod-brand a { color: inherit; text-decoration: none; }
.ka-prod-type {
	margin: 0.15rem 0 0;
	font-size: 0.88rem;
	font-weight: 500;
}
.ka-prod-type a {
	text-decoration: none;
	background: linear-gradient(90deg, #e8772f 0%, #7a4a2a 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
	        color: transparent;
}


/* softer product-type gradient (muted warm, low contrast) */
.ka-prod-type a {
	background-image: linear-gradient(90deg, #b88240 0%, #936a3a 100%) !important;
}


/* full card cream tile — image + text share one background */
.wp-block-woocommerce-product-collection .wc-block-product {
	background: #f5f3ee;
	padding: 1.25rem;
	border-radius: 4px;
}
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image {
	background: transparent !important;
	padding: 0 !important;
	margin-bottom: 0 !important;
}

/* Hover swap — crossfade to the product's second photo when hovering the card.
   The base photo must fade OUT as the second fades in, otherwise both show at
   once and (with multiply) blend into a double-exposure. */
.wp-block-woocommerce-product-image {
	position: relative;
}
.wp-block-woocommerce-product-image .ka-card__hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Match the base image (object-fit: cover) so the second photo's grey
	   background margin is cropped away instead of showing as a bordered box. */
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.35s ease;
	mix-blend-mode: multiply;
	pointer-events: none;
}
/* Only fade the base out on cards that actually have a second photo. */
.wp-block-woocommerce-product-image:has(.ka-card__hover) img:not(.ka-card__hover) {
	transition: opacity 0.35s ease;
}
.wc-block-product:hover .wp-block-woocommerce-product-image:has(.ka-card__hover) img:not(.ka-card__hover) {
	opacity: 0;
}
.wc-block-product:hover .ka-card__hover {
	opacity: 1;
}

/* Brands landing page (/marques/) — a card grid of the product brands. */
.ka-brands-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1rem;
}
.ka-brand-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 150px;
	padding: 1.5rem;
	background: #f5f3ee;
	border-radius: 4px;
	text-decoration: none;
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ka-brand-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.ka-brand-card__name {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-brand-card__count {
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink-muted, #8a8aa3);
}

/* Brand tabs toolbar (/marques/ + brand archives) — MARQUES (n) + a tab per
   brand, horizontally scrollable, reusing the category tab styling. */
.ka-brandbar {
	border-bottom: 1px solid var(--wp--preset--color--border, #ececec);
	margin-bottom: var(--wp--preset--spacing--50, 2.25rem);
}
.ka-brandbar__tabs {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	overflow-x: auto;
	padding: 0.75rem 0;
	/* Hide the scrollbar — the strip still scrolls by swipe / trackpad. */
	scrollbar-width: none;      /* Firefox */
	-ms-overflow-style: none;   /* old Edge / IE */
	/* Allow the tab strip to shrink and scroll within the flex toolbar row
	   (next to the FILTRES button) instead of overflowing it. */
	min-width: 0;
	flex: 1 1 auto;
}
.ka-brandbar__tabs::-webkit-scrollbar {
	/* Chrome / Safari / Edge — remove the visible scrollbar. */
	display: none;
	width: 0;
	height: 0;
}
.ka-brandbar__tabs .ka-catbar__tab {
	white-space: nowrap;
	flex: 0 0 auto;
}
/* The brand / Soldes strip carries BOTH .ka-catbar__tabs and .ka-brandbar__tabs.
   The base .ka-catbar__tabs sets flex-wrap:wrap (right for a single category
   tab) and, being later in the file, wins — which wraps the long strip onto two
   rows. Force it back to ONE row so it scrolls horizontally (carousel) next to
   the FILTRES button. The compound selector out-specifies the base rule. */
.ka-catbar__tabs.ka-brandbar__tabs {
	flex-wrap: nowrap;
}
/* Keep the FILTRES button + the scrolling strip on the same toolbar row. */
.ka-catbar:has( .ka-brandbar__tabs ) {
	flex-wrap: nowrap;
}
/* Fade hint on the right edge so it's clear the strip scrolls when it overflows. */
.ka-brandbar__tabs {
	-webkit-mask-image: linear-gradient( to right, #000 calc(100% - 28px), transparent );
	mask-image: linear-gradient( to right, #000 calc(100% - 28px), transparent );
	scroll-padding-left: 0;
}

/* --------------------------------------------------------------------------
   Nous contacter — intro text, quick-question chips, and the contact form.
   -------------------------------------------------------------------------- */
.ka-contact {
	max-width: 860px;
	margin: 0 auto;
}
.ka-contact__intro {
	max-width: 680px;
	margin: 0 auto var(--wp--preset--spacing--60, 2.5rem);
	text-align: center;
	color: #000;
	font-size: 0.95rem;
	line-height: 1.75;
}
.ka-contact__intro p { margin: 0 0 1rem; }
.ka-contact__intro a {
	color: var(--wp--preset--color--ink, #1a1a2e);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ka-contact__notice {
	margin: 0 auto 2rem;
	padding: 0.9rem 1.2rem;
	border-radius: 4px;
	font-size: 0.9rem;
	text-align: center;
}
.ka-contact__notice--ok  { background: #eafaf1; color: #1a7f4b; border: 1px solid #b7e6c9; }
.ka-contact__notice--err { background: #fdecec; color: #b3261e; border: 1px solid #f4c3c0; }

.ka-contact__ask { margin-bottom: 2.5rem; }
.ka-contact__ask-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--wp--preset--color--ink, #1a1a2e);
	margin-bottom: 1.1rem;
}
.ka-contact__ask-ic { width: 28px; height: 28px; flex: 0 0 auto; }
.ka-contact__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ka-contact__chip {
	border: 0;
	cursor: pointer;
	background: var(--wp--preset--color--ink, #1a1a2e);
	color: #fff;
	font-family: inherit;
	font-size: 0.8rem;
	line-height: 1.3;
	padding: 0.6rem 1.05rem;
	border-radius: 999px;
	transition: background-color 0.15s ease;
}
.ka-contact__chip:hover { background: var(--wp--preset--color--card-blue, #1e4bd6); }

.ka-contact__form {
	margin-top: 2.75rem;
	border-top: 1px solid var(--wp--preset--color--border, #e8e4ef);
	padding-top: 2.25rem;
}
.ka-contact__civ { display: flex; gap: 2.25rem; margin-bottom: 1.9rem; }
.ka-contact__radio {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink, #1a1a2e);
	cursor: pointer;
}

.ka-field { display: block; margin-bottom: 1.7rem; }
.ka-field__label {
	display: block;
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink-muted, #5b5b7a);
	margin-bottom: 0.45rem;
}
.ka-field input,
.ka-field select {
	width: 100%;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink, #1a1a2e);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border, #e8e4ef);
	padding: 0.55rem 0;
	border-radius: 0;
}
.ka-field textarea {
	width: 100%;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink, #1a1a2e);
	background: transparent;
	border: 1px solid var(--wp--preset--color--border, #e8e4ef);
	border-radius: 4px;
	padding: 0.85rem;
	min-height: 160px;
	resize: vertical;
}
.ka-field input:focus,
.ka-field select:focus,
.ka-field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-field--select select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid var(--wp--preset--color--border, #e8e4ef);
	border-radius: 4px;
	padding: 0.7rem 2.2rem 0.7rem 0.85rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b5b7a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px;
	cursor: pointer;
}
.ka-req { color: var(--wp--preset--color--promo-pink, #e88aa1); }

.ka-contact__submit {
	display: block;
	width: 100%;
	margin-top: 0.75rem;
	border: 0;
	cursor: pointer;
	background: var(--wp--preset--color--ink, #1a1a2e);
	color: #fff;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 1.05rem;
	transition: background-color 0.15s ease;
}
.ka-contact__submit:hover { background: var(--wp--preset--color--card-blue, #1e4bd6); }

.ka-contact__legal {
	margin-top: 1.85rem;
	font-size: 0.72rem;
	line-height: 1.7;
	color: var(--wp--preset--color--ink-muted, #5b5b7a);
	text-align: center;
}
.ka-contact__legal a { color: inherit; text-decoration: underline; }
.ka-contact__req {
	margin-top: 0.85rem;
	font-size: 0.75rem;
	color: var(--wp--preset--color--ink-muted, #5b5b7a);
	text-align: center;
}

@media ( max-width: 600px ) {
	.ka-contact__civ { gap: 1.4rem; }
}

/* --------------------------------------------------------------------------
   Nos boutiques — store-locator intro + grid of store cards.
   -------------------------------------------------------------------------- */
.ka-boutiques { max-width: 1080px; margin: 0 auto; }
.ka-boutiques__intro {
	max-width: 680px;
	margin: 0 auto var(--wp--preset--spacing--60, 2.5rem);
	text-align: center;
	color: #000;
	font-size: 0.95rem;
	line-height: 1.75;
}
.ka-boutiques__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	gap: 1.5rem;
}
.ka-boutique {
	border: 1px solid var(--wp--preset--color--border, #e8e4ef);
	border-radius: 8px;
	background: var(--wp--preset--color--surface-soft, #fafafa);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
}
.ka-boutique__name {
	margin: 0 0 1.1rem;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-boutique__meta { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.ka-boutique__meta li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-muted, #5b5b7a);
	margin-bottom: 0.75rem;
}
.ka-boutique__meta li:last-child { margin-bottom: 0; }
.ka-boutique__meta a { color: inherit; text-decoration: none; }
.ka-boutique__meta a:hover { color: var(--wp--preset--color--ink, #1a1a2e); text-decoration: underline; }
.ka-boutique__ic {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-boutique__map {
	margin-top: auto;
	align-self: flex-start;
	display: inline-block;
	padding: 0.6rem 1.15rem;
	border: 1px solid var(--wp--preset--color--ink, #1a1a2e);
	color: var(--wp--preset--color--ink, #1a1a2e);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.ka-boutique__map:hover {
	background: var(--wp--preset--color--ink, #1a1a2e);
	color: #fff;
}
.ka-boutiques__cta {
	margin: var(--wp--preset--spacing--60, 2.5rem) 0 0;
	text-align: center;
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink-muted, #5b5b7a);
}
.ka-boutiques__cta a {
	color: var(--wp--preset--color--ink, #1a1a2e);
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* "Coming soon" store card. */
.ka-boutique--soon {
	background: #fff;
	border-style: dashed;
}
.ka-boutique__badge {
	display: inline-block;
	margin-bottom: 0.9rem;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	background: var(--wp--preset--color--promo-pink, #e88aa1);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.ka-boutique__text {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted, #5b5b7a);
}

/* --------------------------------------------------------------------------
   Le blog — posts listing (query loop) styled like a clean article grid.
   -------------------------------------------------------------------------- */
.ka-blog .wp-block-post-template.is-layout-grid {
	gap: 2.25rem 1.75rem;
}
.ka-blog .wp-block-post {
	display: flex;
	flex-direction: column;
}
.ka-blog .wp-block-post-featured-image {
	margin: 0 0 0.9rem;
}
.ka-blog .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 6px;
}
.ka-blog .wp-block-post-date {
	color: var(--wp--preset--color--ink-muted, #5b5b7a);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.ka-blog .wp-block-post-title {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 0.35rem 0 0.5rem;
}
.ka-blog .wp-block-post-title a {
	color: var(--wp--preset--color--ink, #1a1a2e);
	text-decoration: none;
}
.ka-blog .wp-block-post-title a:hover {
	color: var(--wp--preset--color--card-blue, #1e4bd6);
}
.ka-blog .wp-block-post-excerpt {
	color: var(--wp--preset--color--ink-muted, #5b5b7a);
	font-size: 0.85rem;
	line-height: 1.6;
}
.ka-blog .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 0.5rem;
	color: var(--wp--preset--color--ink, #1a1a2e);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Green Around — responsible-fashion commitment page.
   -------------------------------------------------------------------------- */
.ka-green { max-width: 1000px; margin: 0 auto; }
.ka-green__hero {
	text-align: center;
	background: #eef7f1;
	border-radius: 12px;
	padding: 2.75rem 2rem;
	margin-bottom: var(--wp--preset--spacing--60, 2.5rem);
}
.ka-green__lead {
	margin: 0 0 0.9rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: #2f7d52;
}
.ka-green__intro {
	max-width: 640px;
	margin: 0 auto;
	color: #123a26;
	font-size: 0.95rem;
	line-height: 1.75;
}
.ka-green__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
	gap: 1.5rem;
}
.ka-green__card {
	border: 1px solid var(--wp--preset--color--border, #e8e4ef);
	border-radius: 10px;
	padding: 1.85rem;
	background: #fff;
}
.ka-green__ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #eef7f1;
	color: #2f7d52;
	margin-bottom: 1.1rem;
}
.ka-green__ic svg { width: 24px; height: 24px; }
.ka-green__title {
	margin: 0 0 0.6rem;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-green__text {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.65;
	color: var(--wp--preset--color--ink-muted, #5b5b7a);
}
.ka-green__cta {
	text-align: center;
	margin-top: var(--wp--preset--spacing--60, 2.5rem);
}
.ka-green__cta p {
	margin: 0 0 1.25rem;
	font-size: 1rem;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-green__btn {
	display: inline-block;
	padding: 0.9rem 2rem;
	background: var(--wp--preset--color--ink, #1a1a2e);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.ka-green__btn:hover { background: #2f7d52; }

/* About / SEO block — "VOIR PLUS" expands the full brand text (CSS-only toggle) */
.ka-seo-more {
	display: none;
	text-align: center;
	color: #000000;
	font-size: 14px;
	line-height: 1.7;
}
.ka-seo-more p {
	margin: 1.1rem 0 0;
}
.ka-seo-toggle:checked ~ .ka-seo-more {
	display: block;
}
.ka-seo-btnwrap {
	display: flex;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--40, 1.5rem);
}
.ka-seo-btn {
	display: inline-block;
	padding: 0.85rem 2rem;
	background: var(--wp--preset--color--ink, #1a1a2e);
	color: var(--wp--preset--color--surface, #ffffff);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	user-select: none;
	transition: opacity 0.2s ease;
}
.ka-seo-btn:hover {
	opacity: 0.88;
}
.ka-seo-btn__less {
	display: none;
}
.ka-seo-toggle:checked ~ .ka-seo-btnwrap .ka-seo-btn__more {
	display: none;
}
.ka-seo-toggle:checked ~ .ka-seo-btnwrap .ka-seo-btn__less {
	display: inline;
}


/* second text plain — 12px Mulish #333333 (per inspector), no gradient */
.ka-prod-type,
.ka-prod-type a {
	background: none !important;
	-webkit-text-fill-color: #333333 !important;
	color: #333333 !important;
	font-family: "Mulish", "Manrope", system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	text-decoration: none;
}
.ka-prod-type { margin: 0 0 8px !important; }


/* single product page — brand line + add-to-cart button */
.ka-single-brand {
	margin: 0 0 0.3rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-single-brand a { color: inherit; text-decoration: none; }
.single_add_to_cart_button.button {
	background: var(--wp--preset--color--ink, #1a1a2e) !important;
	color: #fff !important;
	border-radius: 0 !important;
	padding: 0.9rem 2rem !important;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}


/* product accordions (native <details>) */
.wp-block-details.ka-acc {
	margin: 0;
	padding: 0.9rem 0;
	border-top: 1px solid var(--wp--preset--color--border, #e8e4ef);
}
.wp-block-details.ka-acc:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--border, #e8e4ef);
}
.wp-block-details.ka-acc summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.wp-block-details.ka-acc summary::-webkit-details-marker { display: none; }
.wp-block-details.ka-acc summary::after {
	content: "+";
	position: absolute;
	right: 0;
	font-weight: 400;
}
.wp-block-details.ka-acc[open] summary::after { content: "\2013"; }
.wp-block-details.ka-acc > *:not(summary) {
	margin: 0.6rem 0 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: #5b5b7a;
}





/* single product info column */
.ka-product-info { padding-left: clamp(0px, 2vw, 1.5rem); }
/* Brand — compact label, same ink colour as the rest of the text. */
.ka-product-info .ka-single-brand {
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--ink, #1a1a2e);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.ka-product-info .ka-single-brand a { color: inherit; text-decoration: none; }

/* Title — lighter weight + smaller than the old heavy display style. */
.ka-product-info .wp-block-post-title {
	margin: 0 0 0.85rem;
	font-size: clamp(1.3rem, 2.4vw, 1.8rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--ink, #1a1a2e);
}

/* Hide the WooCommerce "Sale" badge here — the discount shows in the price. */
.ka-product-info .wp-block-woocommerce-product-sale-badge {
	display: none !important;
}

/* Price — force LTR so the MAD symbol (د.م.) can't reorder the line, stack the
   new price big with the old price + discount on a sub-line below. */
.ka-product-info .wc-block-components-product-price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	margin-bottom: 1.25rem;
	direction: ltr;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-product-info .wc-block-components-product-price .woocommerce-Price-amount {
	unicode-bidi: isolate;
}

/* New / current price — the big bold figure. */
.ka-product-info .wc-block-components-product-price ins,
.ka-product-info .wc-block-components-product-price > .woocommerce-Price-amount {
	order: -1;
	text-decoration: none;
	font-size: clamp(1.5rem, 3vw, 1.95rem);
	font-weight: 800;
	line-height: 1.1;
}

/* "À partir de" lead-in for variable products — small grey label ABOVE the
   price (order:-2 so it sits before the big amount in this column layout). */
.ka-product-info .wc-block-components-product-price .ka-price-from {
	order: -2;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--wp--preset--color--ink-muted, #5b5b7a);
}

/* Chosen-variation block (exact price + stock) shown under the colour/size
   boxes. Style the price big & bold, and the availability as a small green
   "En stock" pill so it reads cleanly instead of plain grey text. */
.ka-product-info .single_variation {
	margin: 0.5rem 0 0.25rem;
	direction: ltr;
}
/* The exact price now lives on the ADD TO CART button, so hide the duplicate
   price here — keep only the stock pill below the colour/size boxes. */
.ka-product-info .single_variation .woocommerce-variation-price {
	display: none;
}
.ka-product-info .single_variation .woocommerce-variation-availability {
	display: inline-block;
	margin-top: 0.55rem;
	padding: 0.22rem 0.7rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #2f7a4d;
	background: #e8f5ec;
	border-radius: 999px;
}
.ka-product-info .single_variation .woocommerce-variation-availability p {
	margin: 0;
}

/* Old price — struck, grey, small (bare, or inside the .ka-price-was line that
   product-price.js builds). */
.ka-product-info .wc-block-components-product-price del,
.ka-product-info .ka-price-was del {
	color: #9a9a9a;
	font-size: 0.85rem;
	font-weight: 400;
	text-decoration: line-through;
}

/* "Prix initial : <old> -40%" sub-line (assembled by product-price.js). */
.ka-product-info .ka-price-was {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	font-size: 0.85rem;
}
.ka-product-info .ka-price-was__label { color: #8a8a8a; }
.ka-product-info .ka-price-disc { color: #d6336c; font-weight: 700; }

/* In-stock note — product-price.js moves it onto the brand line, so it renders
   inline as "BOSS · 10 IN STOCK", sharing the brand's small uppercase styling. */
.ka-product-info .ka-single-brand .stock {
	display: inline;
	margin: 0 !important;
	font-size: inherit !important;
	font-weight: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* Product tags — a leading tag icon followed by outlined chips. */
.ka-product-info .ka-single-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 1.25rem 0 1.75rem;
}
/* Tag/label icon (masked SVG so it inherits the ink colour). */
.ka-product-info .ka-single-tags::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-right: 0.15rem;
	background-color: var(--wp--preset--color--ink, #1a1a2e);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Hide the comma separators between tags (the chips stand on their own). */
.ka-product-info .ka-single-tags .wp-block-post-terms__separator,
.ka-product-info .ka-single-tags .wp-block-post-terms__prefix {
	display: none;
}
/* Each tag = an outlined chip. The tag archive links go nowhere useful, so the
   chips are non-interactive (display only). */
.ka-product-info .ka-single-tags a {
	display: inline-block;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--wp--preset--color--border, #e8e4ef);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--ink, #1a1a2e);
	pointer-events: none;
	cursor: default;
}

/* Quantity box + Add-to-cart on one clean row. */
.ka-product-info form.cart {
	display: flex;
	align-items: stretch;
	gap: 0.6rem;
	margin-top: 0.25rem;
	padding: 0;
}
.ka-product-info .quantity {
	margin: 0;
	flex: 0 0 auto;
	display: flex;
}
.ka-product-info .quantity input.qty {
	box-sizing: border-box;
	width: 84px;
	padding: 1rem 0.5rem;
	border: 1px solid var(--wp--preset--color--border, #e8e4ef);
	border-radius: 0;
	background: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	color: var(--wp--preset--color--ink, #1a1a2e);
	transition: border-color 0.2s;
	/* Remove the native number spinners so the value sits truly centered. */
	-moz-appearance: textfield;
	appearance: textfield;
}
.ka-product-info .quantity input.qty::-webkit-outer-spin-button,
.ka-product-info .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.ka-product-info .quantity input.qty:focus {
	outline: none;
	border-color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-product-info .single_add_to_cart_button {
	flex: 1 1 auto;
	width: auto !important;
	background: var(--wp--preset--color--ink, #1a1a2e) !important;
	color: #fff !important;
	border-radius: 0 !important;
	padding: 1rem 2rem !important;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Variable products — custom colour / size picker (assets/js/variation-ui.js
   builds it from, and drives, the native WooCommerce <select> dropdowns).
   -------------------------------------------------------------------------- */
/* Variable form stacks (colour+size row, then the full-width add-to-cart). */
.ka-product-info form.variations_form.cart {
	display: block;
}
.ka-product-info .variations_form .quantity {
	display: none; /* keep it simple — quantity defaults to 1 */
}
.ka-product-info .woocommerce-variation-add-to-cart {
	display: flex;
	gap: 0.6rem;
	margin-top: 0.75rem;
}
.ka-product-info .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	width: 100% !important;
	flex: 1 1 100%;
}
.ka-product-info .single_add_to_cart_button.disabled,
.ka-product-info .single_add_to_cart_button.wc-variation-selection-needed {
	opacity: 0.45;
	cursor: not-allowed;
}

.ka-vui {
	margin: 0.5rem 0 0.25rem;
}
.ka-vui__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.ka-vui__field {
	flex: 1 1 0;
	min-width: 150px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.85rem 1rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border, #e8e4ef);
	font: inherit;
	color: var(--wp--preset--color--ink, #1a1a2e);
	cursor: pointer;
	transition: border-color 0.15s;
}
.ka-vui__field:hover,
.ka-vui__field.is-open {
	border-color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-vui__field-main {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-width: 0;
}
.ka-vui__label {
	font-size: 0.9rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ka-vui__dots {
	display: inline-flex;
	align-items: center;
}
.ka-vui__dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: inline-block;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
	margin-right: -5px;
}
.ka-vui__dots .ka-vui__dot:last-child {
	margin-right: 6px;
}
.ka-vui__dot.is-light {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.ka-vui__chev {
	flex: 0 0 auto;
	font-size: 1.35rem;
	line-height: 1;
	color: #9a9a9a;
	transition: transform 0.2s;
}
.ka-vui__field.is-open .ka-vui__chev {
	transform: rotate(90deg);
}

.ka-vui__panel {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.6rem;
	padding: 0.85rem;
	background: var(--wp--preset--color--surface-soft, #fafafa);
	border: 1px solid var(--wp--preset--color--border, #e8e4ef);
}
.ka-vui__panel[hidden] {
	display: none; /* beat the display:flex above when the panel is collapsed */
}
.ka-vui__opt {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.9rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border, #e8e4ef);
	font: inherit;
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink, #1a1a2e);
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.ka-vui__opt:hover {
	border-color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-vui__opt.is-selected {
	background: var(--wp--preset--color--ink, #1a1a2e);
	border-color: var(--wp--preset--color--ink, #1a1a2e);
	color: #fff;
}
.ka-vui__opt--size {
	min-width: 46px;
	justify-content: center;
}


/* --------------------------------------------------------------------------
   Category cards (FILLE / GARÇON) — white veil on hover
   A translucent white layer fades in over the image while the white text stays
   on top. We add it as a `::after` on each cover and explicitly raise the inner
   container above it, so the stacking is correct regardless of WP core changes.
   -------------------------------------------------------------------------- */
.ka-cat-cards .wp-block-cover {
	overflow: hidden;
	cursor: pointer;
}
.ka-cat-cards .wp-block-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1; /* above the image, below the text (which we raise to z-index 2) */
	background: #ffffff;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.ka-cat-cards .wp-block-cover:hover::after,
.ka-cat-cards .wp-block-cover:focus-within::after {
	opacity: 0.28;
}
.ka-cat-cards .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}


/* single product page padding (left/right, this page only) */
.ka-bc,
.ka-product-top {
	padding-left: clamp(1rem, 4vw, 3rem);
	padding-right: clamp(1rem, 4vw, 3rem);
}


/* gallery cream tile — same bg as the product cards */
.woocommerce-product-gallery__image,
.woocommerce-product-gallery .flex-control-thumbs li {
	background: #f5f3ee;
	border-radius: 4px;
}
.woocommerce-product-gallery__image img:not(.zoomImg),
.woocommerce-product-gallery .flex-control-thumbs img {
	mix-blend-mode: multiply;
}


/* hide gallery sale flash (green Sale! circle) */
.woocommerce-product-gallery .onsale,
.ka-single-main .onsale { display: none !important; }





/* product columns gap (gallery <-> info) */
.ka-product-top.wp-block-columns { gap: 1rem !important; }


/* thumbnails left gutter — slider keeps sizing the main image */
@media (min-width: 768px) {
	.ka-product-top .woocommerce-product-gallery {
		position: relative;
		padding-left: 84px;
	}
	.ka-product-top .woocommerce-product-gallery .flex-control-thumbs {
		position: absolute;
		left: 0;
		top: 0;
		width: 72px;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		list-style: none;
	}
	.ka-product-top .woocommerce-product-gallery .flex-control-thumbs li {
		width: 100% !important;
		margin: 0 !important;
		float: none !important;
	}
	.ka-product-top .woocommerce-product-gallery .flex-control-thumbs img { border-radius: 3px; }
}

/* ---------------------------------------------------------------------------
   Cart / Checkout — WooCommerce's own page templates ship with no horizontal
   padding, so the title and content sit flush against the screen edges. Add
   responsive side gutters that match the rest of the site.
--------------------------------------------------------------------------- */
.woocommerce-cart main.wp-block-group,
.woocommerce-checkout main.wp-block-group {
	padding-left: clamp(1rem, 5vw, 4rem);
	padding-right: clamp(1rem, 5vw, 4rem);
}

/* ---------------------------------------------------------------------------
   Mini-Cart drawer — tone down WooCommerce's oversized "YOUR CART" heading
   so it sits in proportion with the rest of the drawer.
--------------------------------------------------------------------------- */
.wc-block-mini-cart__title,
.wc-block-mini-cart__title h2,
.wc-block-mini-cart__title-text {
	font-size: clamp(1.05rem, 2.4vw, 1.3rem) !important;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

/* The "(items: 2)" count — lighter and a touch smaller than the label. */
.wc-block-mini-cart__title-amount,
.wc-block-mini-cart__title .wc-block-mini-cart__title-amount {
	font-size: 0.82em;
	font-weight: 600;
	opacity: 0.6;
}

/* Give the heading row a little breathing room from the close button. */
.wc-block-mini-cart__title {
	padding-right: 0.5rem;
}

/* The Mini-Cart drawer replaces it, so never show WooCommerce's default
   "View cart" link next to the single add-to-cart button. */
.single-product .added_to_cart {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Checkout address form — the First/Last name fields (and the rows below)
   sit too close together. Give the grid real horizontal + vertical gaps.
--------------------------------------------------------------------------- */
/* Tablet/desktop: comfortable gaps between the side-by-side fields. */
@media (min-width: 601px) {
	.woocommerce-checkout .wc-block-components-address-form {
		column-gap: 1.5rem !important;
		row-gap: 1.25rem !important;
	}
}

/* Mobile: stack every field in one clean column. The key fix is min-width:0 —
   grid/flex items default to min-width:auto, so the text inputs refuse to
   shrink and overflow off the right edge of the screen. */
@media (max-width: 600px) {
	.woocommerce-checkout .wc-block-components-address-form {
		display: grid !important;
		grid-template-columns: 1fr !important;
		row-gap: 1rem !important;
	}
	.woocommerce-checkout .wc-block-components-address-form > * {
		grid-column: 1 / -1 !important;
		min-width: 0 !important;
	}
	.woocommerce-checkout .wc-block-components-text-input,
	.woocommerce-checkout .wc-block-components-text-input input,
	.woocommerce-checkout .wc-block-components-select,
	.woocommerce-checkout .wc-block-components-select select,
	.woocommerce-checkout .wc-block-components-combobox,
	.woocommerce-checkout .wc-block-components-combobox input {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}
}

/* ---------------------------------------------------------------------------
   Product rows — home (SÉLECTION ÉTÉ / ACCESSOIRES) and single-product
   ("Vous aimerez aussi") — even 4-up grid with large card images.
   WooCommerce's flex layout was sizing each card to its (small) image, leaving
   uneven gaps; force a real grid and let the image fill the card so every tile
   matches.
--------------------------------------------------------------------------- */
:is(.home, .single-product, .tax-product_cat, .post-type-archive-product, .search-results) .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template.is-flex-container,
:is(.home, .single-product, .tax-product_cat, .post-type-archive-product, .search-results) .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 0.75rem !important;
}

/* Cancel the flex-item sizing so each card simply fills its grid cell. */
:is(.home, .single-product, .tax-product_cat, .post-type-archive-product, .search-results) .wp-block-woocommerce-product-collection .wc-block-product {
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	flex: initial !important;
}

/* Make the product image fill the card width (large, centered — like the design). */
:is(.home, .single-product, .tax-product_cat, .post-type-archive-product, .search-results) .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image,
:is(.home, .single-product, .tax-product_cat, .post-type-archive-product, .search-results) .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image > a,
:is(.home, .single-product, .tax-product_cat, .post-type-archive-product, .search-results) .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image img {
	width: 100% !important;
	max-width: 100% !important;
	display: block;
}

@media (max-width: 900px) {
	:is(.home, .single-product, .tax-product_cat, .post-type-archive-product, .search-results) .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template.is-flex-container,
	:is(.home, .single-product, .tax-product_cat, .post-type-archive-product, .search-results) .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 560px) {
	:is(.home, .single-product, .tax-product_cat, .post-type-archive-product, .search-results) .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template.is-flex-container,
	:is(.home, .single-product, .tax-product_cat, .post-type-archive-product, .search-results) .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template {
		grid-template-columns: 1fr !important;
	}
}

/* ===========================================================================
   PRIMARY NAV + MEGA-MENU (parts/header.html → kidsaround/primary-nav block)
   Renders the product category tree as hover dropdowns on desktop.
   =========================================================================== */
.ka-menu {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ka-menu__item {
	position: static; /* gender dropdowns span the full header width */
}
.ka-menu__item--mini {
	position: relative; /* the small Soldes dropdown anchors to its own item */
}
.ka-menu__link {
	display: inline-block;
	padding: 0.4rem 0;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--wp--preset--color--ink, #1a1a2e);
	transition: color 0.15s ease;
}
.ka-menu__link--accent {
	color: #e88aa1;
}
.ka-menu__link:hover,
.ka-menu__item:hover > .ka-menu__link {
	color: #e88aa1;
}

/* Full-width dropdown panel — spans the whole navbar (100vw), content centered.
   display:none when closed so the hidden panels add no page scroll. */
.ka-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	display: none;
	z-index: 200;
	background: #fff;
	border-top: 1px solid var(--wp--preset--color--border, #ececec);
	box-shadow: 0 24px 40px rgba(20, 20, 40, 0.12);
}
/* Invisible bridge so the panel stays open while the cursor crosses the gap. */
.ka-mega::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -26px;
	height: 26px;
}
.ka-has-mega:hover > .ka-mega,
.ka-has-mega:focus-within > .ka-mega {
	display: block;
	animation: ka-mega-in 0.18s ease both;
}
@keyframes ka-mega-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.ka-mega__inner {
	display: flex;
	align-items: stretch;
	gap: 2rem;
	max-width: 1480px;
	margin: 0 auto;
	padding: 2rem 3rem;
}

/* Soldes: a compact dropdown anchored under its own item, not full-width. */
.ka-mega--mini {
	left: auto;
	right: 0;
	width: max-content;
	border: 1px solid var(--wp--preset--color--border, #ececec);
	border-radius: 8px;
	box-shadow: 0 18px 44px rgba(20, 20, 40, 0.14);
}
.ka-mega--mini .ka-mega__inner {
	max-width: none;
	margin: 0;
	padding: 1rem 1.25rem;
	gap: 0;
}
/* The category columns sit in their own flex row, with the promo beside them.
   flex:1 + min-width:0 + wrap lets them shrink/reflow instead of overflowing. */
.ka-mega__cols {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: wrap;
	gap: 1.25rem 2.25rem;
}
.ka-mega__col {
	min-width: 132px;
}

/* Promo image panel on the right of the dropdown. */
.ka-mega__promo {
	position: relative;
	flex: 0 0 auto;
	/* Responsive: scales with the screen, never bigger than 440px (≈ 5:3). */
	width: clamp(300px, 28vw, 440px);
	aspect-ratio: 5 / 3;
	align-self: flex-start;
	margin-left: auto;
	overflow: hidden;
	border-radius: 6px;
	background-size: cover;
	background-position: center;
	text-decoration: none;
	display: flex;
	align-items: flex-end;
}
.ka-mega__promo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 55%);
}
.ka-mega__promo-inner {
	position: relative;
	z-index: 1;
	padding: 1.25rem;
	color: #fff;
}
.ka-mega__promo-title {
	display: block;
	margin-bottom: 0.7rem;
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.1;
	text-transform: uppercase;
}
.ka-mega__promo-cta {
	display: inline-block;
	padding: 0.5rem 1.1rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
	border: 1.5px solid #fff;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.ka-mega__promo:hover .ka-mega__promo-cta {
	background: #fff;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-mega__head {
	display: block;
	margin-bottom: 0.65rem;
	padding-bottom: 0.4rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--ink, #1a1a2e);
	border-bottom: 1px solid var(--wp--preset--color--border, #ececec);
}
.ka-mega__head:hover {
	color: #e88aa1;
}
.ka-mega__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ka-mega__list li {
	margin: 0 0 0.4rem;
}
.ka-mega__list a {
	font-size: 0.82rem;
	line-height: 1.4;
	text-decoration: none;
	color: #5b5b7a;
	transition: color 0.15s ease;
}
.ka-mega__list a:hover {
	color: #e88aa1;
}

/* Marques mega-menu: brands laid out over 3 columns (no "Nos marques" head). */
.ka-mega__col--brands {
	flex: 0 1 auto;
}
.ka-mega__list--brands {
	column-count: 3;
	column-gap: 2.5rem;
	max-width: 480px;
}
.ka-mega__list--brands li {
	-webkit-column-break-inside: avoid;
	break-inside: avoid;
	margin-bottom: 0.55rem;
}

/* The mega-menu is desktop-only; the JS drawer handles small screens. */
@media (max-width: 781px) {
	.ka-mega {
		display: none;
	}
}

/* ===========================================================================
   Category (archive) breadcrumb — full-width soft bar, muted links, chevron.
   =========================================================================== */
.ka-bc-bar {
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}
.ka-bc-bar .woocommerce-breadcrumb {
	margin: 0;
	/* The logo SVG has ~17.5u of transparent left padding in its viewBox, so the
	   visible logo sits ~10px right of its box. Nudge the breadcrumb text by the
	   same amount so "Accueil" lines up with the visible logo. */
	padding-left: 10px;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-bc-bar .woocommerce-breadcrumb a {
	color: var(--wp--preset--color--ink-muted, #8a8aa3);
	text-decoration: none;
}
.ka-bc-bar .woocommerce-breadcrumb a:hover {
	color: #e88aa1;
}
.ka-bc__sep {
	color: var(--wp--preset--color--ink-muted, #b9b9c9);
	margin: 0 0.15rem;
}

/* Category / shop pages — ONLY the product grid spans the full width with no
   side space. Everything else (breadcrumb, title, toolbar) stays as it was:
   centred to 1480px. This cancels the <main> padding just for the grid so the
   cards run edge to edge. */
.tax-product_cat .wp-site-blocks > main > .wp-block-woocommerce-product-collection,
.post-type-archive-product .wp-site-blocks > main > .wp-block-woocommerce-product-collection,
.search-results .wp-site-blocks > main > .wp-block-woocommerce-product-collection {
	max-width: none !important;
	/* !important is required to beat the constrained-layout rule that forces
	   margin: 0 auto !important on non-aligned children. */
	margin-left: calc((var(--wp--preset--spacing--30) + 10px) * -1) !important;
	margin-right: calc(var(--wp--preset--spacing--30) * -1) !important;
}

/* ===========================================================================
   Category toolbar — FILTRES button + category/count + quick tabs, under the
   archive title (kidsaround/category-toolbar block).
   =========================================================================== */
.ka-catbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.75rem;
	padding: 0.75rem 0;
	margin-bottom: var(--wp--preset--spacing--50, 2.25rem);
	/* Keep the FILTRES bar pinned to the top while browsing the grid. The white
	   box-shadow + clip-path give it a full-width backing (the cards are
	   full-bleed) without the horizontal-scroll issues of 100vw. z-index sits
	   below the header (100) so the auto-hiding header always wins at the top. */
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 90;
	background: #fff;
	box-shadow: 0 0 0 100vmax #fff;
	clip-path: inset(0 -100vmax);
	/* Divider under the toolbar — separates it from the chips (and from the
	   grid when pinned). Being the bar's own border it always paints above the
	   full-width white backing. */
	border-bottom: 1px solid var(--wp--preset--color--border, #ececec);
}
.ka-catbar__filters {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.6rem 1.15rem;
	border: 0;
	background: var(--wp--preset--color--ink, #1a1a2e);
	color: #fff;
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.ka-catbar__filters:hover {
	background: #2d2d4a;
}
.ka-catbar__filters svg {
	width: 18px;
	height: 18px;
}
.ka-catbar__tabs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.75rem;
}
.ka-catbar__tab {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--wp--preset--color--ink-muted, #8a8aa3);
}
a.ka-catbar__tab:hover {
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-catbar__tab.is-active {
	color: var(--wp--preset--color--ink, #1a1a2e);
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   Product archive pagination (1 2 3 … 7 · Précédent / Suivant). Boutique
   style: square number tiles, current page filled ink, ink prev/next buttons.
   -------------------------------------------------------------------------- */
.ka-pagination {
	margin-top: 3rem;
	gap: 0.45rem;
	align-items: center;
	flex-wrap: wrap;
}
.ka-pagination .wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}
.ka-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 0.55rem;
	border: 1px solid var(--wp--preset--color--border, #e8e4ef);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--ink, #1a1a2e);
	text-decoration: none;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.ka-pagination a.page-numbers:hover {
	border-color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-pagination .page-numbers.current {
	background: var(--wp--preset--color--ink, #1a1a2e);
	border-color: var(--wp--preset--color--ink, #1a1a2e);
	color: #fff;
}
.ka-pagination .page-numbers.dots {
	min-width: auto;
	padding: 0 0.25rem;
	border-color: transparent;
	color: var(--wp--preset--color--ink-muted, #8a8aa3);
}
.ka-pagination .wp-block-query-pagination-previous,
.ka-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 1.1rem;
	border: 1px solid var(--wp--preset--color--ink, #1a1a2e);
	background: var(--wp--preset--color--ink, #1a1a2e);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s, opacity 0.15s;
}
.ka-pagination .wp-block-query-pagination-previous:hover,
.ka-pagination .wp-block-query-pagination-next:hover {
	background: #2d2d4a;
}

/* Active filter chips (below the toolbar) */
.ka-active {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.7rem;
	/* Sits right below the toolbar's divider (which the catbar now owns). */
	margin-top: calc(-1 * var(--wp--preset--spacing--50, 2.25rem));
	padding-top: 1.1rem;
	margin-bottom: 1.5rem;
}
.ka-active__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border, #ececec);
	background: var(--wp--preset--color--surface-soft, #f6f5f2);
	color: var(--wp--preset--color--ink, #1a1a2e);
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color 0.15s ease;
}
.ka-active__chip:hover {
	border-color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-active__x {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}
.ka-active__clear {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink, #1a1a2e);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ka-active__clear:hover {
	color: #e88aa1;
}

/* ===========================================================================
   Filter drawer (FILTRES → slide-in panel on category pages).
   =========================================================================== */
.ka-filter[hidden] {
	display: none;
}
.ka-filter {
	position: fixed;
	inset: 0;
	z-index: 1000;
}
.ka-filter__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	animation: ka-fade-in 0.2s ease;
}
@keyframes ka-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.ka-filter__panel {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: min(420px, 92vw);
	height: 100%;
	background: #fff;
	box-shadow: 2px 0 30px rgba(0, 0, 0, 0.18);
	animation: ka-filter-in 0.25s ease;
}
@keyframes ka-filter-in {
	from { transform: translateX(-100%); }
	to   { transform: translateX(0); }
}
.ka-filter__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border, #ececec);
}
.ka-filter__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1.5px solid var(--wp--preset--color--ink, #1a1a2e);
	border-radius: 50%;
	background: #fff;
	color: var(--wp--preset--color--ink, #1a1a2e);
	cursor: pointer;
}
.ka-filter__close svg {
	width: 18px;
	height: 18px;
}
.ka-filter__title {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-filter__form {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.ka-filter__body {
	flex: 1;
	overflow-y: auto;
}
.ka-filter__sec {
	border-bottom: 1px solid var(--wp--preset--color--border, #ececec);
}
.ka-filter__sec > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 1.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #1a1a2e);
	cursor: pointer;
	list-style: none;
}
.ka-filter__sec > summary::-webkit-details-marker {
	display: none;
}
.ka-filter__chev {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}
.ka-filter__sec[open] > summary .ka-filter__chev {
	transform: rotate(180deg);
}
.ka-filter__opts {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: 0 1.5rem 1.25rem;
}
.ka-filter__opts--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 0.5rem 0.75rem;
}

/* Colour swatch cards */
.ka-filter__colors {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 0.6rem;
	padding: 0 1.5rem 1.25rem;
}
.ka-color {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--wp--preset--color--border, #ececec);
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.72rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #1a1a2e);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ka-color input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.ka-color__sw {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0.18);
}
.ka-color__sw--multi {
	background: conic-gradient(#e2001a, #f5c518, #1f7a5a, #1e50a0, #7a3b9e, #e2001a);
}
.ka-color:hover {
	border-color: var(--wp--preset--color--ink-muted, #8a8aa3);
}
.ka-color:has(input:checked) {
	border-color: var(--wp--preset--color--ink, #1a1a2e);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink, #1a1a2e);
}
.ka-filter__opt {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: #333;
	cursor: pointer;
}
.ka-filter__opt input {
	width: 16px;
	height: 16px;
	accent-color: var(--wp--preset--color--ink, #1a1a2e);
}

/* Size boxes — bordered pills that fill dark when selected */
.ka-filter__sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0 1.5rem 1.25rem;
}
.ka-size {
	position: relative;
	cursor: pointer;
}
.ka-size input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.ka-size__box {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 3.3rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border, #e0e0e0);
	border-radius: 4px;
	background: #fff;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--wp--preset--color--ink, #1a1a2e);
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ka-size:hover .ka-size__box {
	border-color: var(--wp--preset--color--ink, #1a1a2e);
}
.ka-size:has(input:checked) .ka-size__box {
	border-color: var(--wp--preset--color--ink, #1a1a2e);
	background: var(--wp--preset--color--ink, #1a1a2e);
	color: #fff;
}
.ka-filter__link {
	font-size: 0.85rem;
	color: #333;
	text-decoration: none;
}
.ka-filter__link:hover {
	color: #e88aa1;
}
.ka-filter__price {
	flex-direction: row;
	align-items: center;
}
.ka-filter__price input {
	width: 100%;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--wp--preset--color--border, #ececec);
	border-radius: 4px;
	font-size: 0.85rem;
	font-family: inherit;
}
.ka-filter__foot {
	display: flex;
	flex-shrink: 0;
	gap: 0.75rem;
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--wp--preset--color--border, #ececec);
	background: #fff;
}
.ka-filter__clear {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1rem;
	border: 1px solid var(--wp--preset--color--ink, #1a1a2e);
	background: #fff;
	color: var(--wp--preset--color--ink, #1a1a2e);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
}
.ka-filter__apply {
	flex: 1.4;
	padding: 0.85rem 1rem;
	border: 0;
	background: var(--wp--preset--color--ink, #1a1a2e);
	color: #fff;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}
.ka-filter__apply:hover {
	background: #2d2d4a;
}
body.ka-filter-open {
	overflow: hidden;
}