/*
 * OnlyCat header and footer (ADR 0016).
 *
 * Loaded on pages rendering the theme's chrome (inc/chrome.php) and scoped
 * under .onlycat-header / .onlycat-footer. Two-class selectors throughout so
 * the Elementor kit's element rules cannot reach in while the kit is still
 * loaded on the remaining Elementor pages. Tokens from assets/tokens.css;
 * surfaces as the September 2026 concept has them: white header, deep-navy
 * footer. Breakpoints: 1200, 1050 (menu collapses), 760, 480.
 */

.onlycat-header,
.onlycat-footer {
	--oc-surface-header: #ffffff;
	--oc-surface-footer: #0a1727;
	--oc-footer-muted: #bccbd5;
	--oc-footer-rule: #304255;
	--oc-footer-accent: #74c7f2;
	font-family: var(--oc-sans);
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

.onlycat-header *,
.onlycat-footer * {
	box-sizing: border-box;
}

.onlycat-header .onlycat-icon,
.onlycat-footer .onlycat-icon {
	flex-shrink: 0;
}

.onlycat-shell {
	width: min(100%, var(--oc-shell));
	margin-inline: auto;
	padding-inline: 64px;
}

/* A primary action in the chrome: the same button as the pages. */
.onlycat-header .onlycat-button {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border: 1px solid var(--oc-blue);
	border-radius: var(--oc-radius);
	background: var(--oc-blue);
	color: var(--oc-white);
	font-size: 15px;
	font-weight: 550;
	line-height: 1.35;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s, border-color 0.2s;
}

.onlycat-header .onlycat-button:hover,
.onlycat-header .onlycat-button:focus-visible {
	background: var(--oc-blue-deep);
	border-color: var(--oc-blue-deep);
	color: var(--oc-white);
}

.onlycat-header a:focus-visible,
.onlycat-header button:focus-visible,
.onlycat-header summary:focus-visible,
.onlycat-footer a:focus-visible,
.onlycat-footer summary:focus-visible {
	outline: 3px solid var(--oc-blue-bright);
	outline-offset: 4px;
}

.onlycat-footer a:focus-visible,
.onlycat-footer summary:focus-visible {
	outline-color: var(--oc-footer-accent);
}

/* ---- Brand ------------------------------------------------------------- */

.onlycat-header .onlycat-brand,
.onlycat-footer .onlycat-brand {
	display: inline-flex;
	flex-shrink: 0;
	line-height: 0;
}

.onlycat-header .onlycat-brand__logo,
.onlycat-footer .onlycat-brand__logo {
	display: block;
	width: 185px;
	height: 62px;
	object-fit: contain;
	object-position: left center;
}

/* ---- Header ------------------------------------------------------------ */

.onlycat-header {
	position: relative;
	/* Above page furniture that positions itself: WooCommerce's sale badge is
	   z-index 9 and showed through the open menu on the flap page. */
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 92px;
	padding: 12px 36px;
	background: var(--oc-surface-header);
	color: var(--oc-ink);
	border-bottom: 1px solid #ccd6dc;
	box-shadow: 0 2px 8px rgba(10, 23, 39, 0.024);
}

.onlycat-header .onlycat-header__nav {
	flex: 1;
	min-width: 0;
}

.onlycat-header .onlycat-header__list {
	display: flex;
	align-items: center;
	gap: 27px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.onlycat-header .onlycat-header__list li {
	margin: 0;
	padding: 0;
}

.onlycat-header .onlycat-header__list a {
	display: inline-block;
	padding: 15px 0;
	color: var(--oc-ink);
	text-decoration: none;
	white-space: nowrap;
}

.onlycat-header .onlycat-header__list a:hover {
	color: var(--oc-blue);
}

.onlycat-header .onlycat-header__list .current-menu-item > a,
.onlycat-header .onlycat-header__list .current_page_item > a,
.onlycat-header .onlycat-header__list .current-menu-ancestor > a {
	color: var(--oc-blue);
	box-shadow: 0 2px var(--oc-blue);
}

.onlycat-header .onlycat-header__actions {
	display: flex;
	gap: 18px;
	align-items: center;
	flex-shrink: 0;
}

/* Basket: the trolley, with a red count that appears once the fragments arrive. */
.onlycat-header .onlycat-header__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--oc-ink);
	text-decoration: none;
}

.onlycat-header .onlycat-header__cart:hover {
	color: var(--oc-blue);
}

.onlycat-header .onlycat-header__cart-count {
	position: absolute;
	top: 0;
	right: -2px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--oc-alert);
	color: var(--oc-white);
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
}

.onlycat-header .onlycat-header__cart-count[data-count="0"] {
	display: none;
}

/* The collapsed-menu toggle: hidden until the menu collapses. */
.onlycat-header .onlycat-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--oc-ink);
	cursor: pointer;
}

.onlycat-header .onlycat-header__toggle .onlycat-icon--x,
.onlycat-header.onlycat-header--menu-open .onlycat-header__toggle .onlycat-icon--list {
	display: none;
}

.onlycat-header.onlycat-header--menu-open .onlycat-header__toggle .onlycat-icon--x {
	display: block;
}

/* The collapsed menu itself. */
.onlycat-header .onlycat-header__menu {
	display: none;
}

.onlycat-header .onlycat-header__menu-list,
.onlycat-header .onlycat-header__menu-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.onlycat-header .onlycat-header__menu-list > li > a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 0;
	border-bottom: 1px solid var(--oc-line);
	font-size: 16px;
	color: var(--oc-ink);
	text-decoration: none;
}

.onlycat-header .onlycat-header__menu-list .sub-menu a {
	display: block;
	padding: 10px 0 10px 18px;
	font-size: 14px;
	color: var(--oc-ink-soft);
	text-decoration: none;
}

.onlycat-header .onlycat-header__menu-list .sub-menu {
	border-bottom: 1px solid var(--oc-line);
	padding-bottom: 6px;
}

.onlycat-header .onlycat-header__menu-list a:hover {
	color: var(--oc-blue);
}

/* ---- Language switcher ------------------------------------------------- */

.onlycat-lang {
	position: relative;
	font-size: 13px;
}

.onlycat-lang .onlycat-lang__summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	cursor: pointer;
	color: inherit;
}

.onlycat-lang .onlycat-lang__summary::-webkit-details-marker,
.onlycat-lang .onlycat-lang__summary::marker {
	display: none;
	content: "";
}

.onlycat-lang .onlycat-lang__options {
	position: absolute;
	right: 0;
	top: 100%;
	width: 240px;
	padding: 20px;
	background: var(--oc-surface-header);
	color: var(--oc-ink);
	border: 1px solid var(--oc-line);
	box-shadow: 0 10px 30px rgba(20, 36, 48, 0.125);
	z-index: 12;
}

.onlycat-lang .onlycat-lang__options p {
	font-size: 12px;
	color: var(--oc-ink-soft);
	margin: 0 0 10px;
}

.onlycat-lang .onlycat-lang__options a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	font-size: 14px;
	color: var(--oc-ink);
	text-decoration: none;
}

.onlycat-lang .onlycat-lang__options a:hover,
.onlycat-lang .onlycat-lang__options a[aria-current] {
	color: var(--oc-blue);
}

/* ---- Footer ------------------------------------------------------------ */

.onlycat-footer {
	background: var(--oc-surface-footer);
	color: #edf4f7;
	border-top: 1px solid var(--oc-footer-rule);
}

.onlycat-footer a {
	color: inherit;
	text-decoration: none;
}

.onlycat-footer a:hover {
	color: var(--oc-footer-accent);
}

.onlycat-footer .onlycat-brand__logo {
	filter: brightness(0) invert(1);
}

.onlycat-footer .onlycat-footer__brand {
	display: flex;
	gap: 30px;
	align-items: center;
	padding-top: 55px;
}

.onlycat-footer .onlycat-footer__tagline {
	margin: 0;
	color: var(--oc-footer-muted);
	font-size: 14px;
	line-height: 1.5;
}

.onlycat-footer .onlycat-footer__social {
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 12px;
}

.onlycat-footer .onlycat-footer__social a {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	color: #d4e4ed;
	border: 1px solid var(--oc-footer-rule);
	border-radius: 50%;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.onlycat-footer .onlycat-footer__social a:hover {
	background: #152b40;
	border-color: var(--oc-footer-accent);
	color: var(--oc-footer-accent);
}

.onlycat-footer .onlycat-footer__columns {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1.2fr;
	gap: 55px;
	padding-block: 32px 48px;
}

.onlycat-footer .onlycat-footer__column h3 {
	font-family: var(--oc-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
	margin: 12px 0 22px;
	color: var(--oc-white);
}

.onlycat-footer .onlycat-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.onlycat-footer .onlycat-footer__links li {
	margin: 0 0 5px;
}

.onlycat-footer .onlycat-footer__links a {
	display: flex;
	align-items: center;
	gap: 5px;
	min-height: 36px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--oc-footer-muted);
}

.onlycat-footer .onlycat-footer__links a:hover {
	color: var(--oc-footer-accent);
}

.onlycat-footer .onlycat-lang--footer {
	border-bottom: 1px solid var(--oc-footer-rule);
	margin-bottom: 17px;
	max-width: 220px;
	color: var(--oc-footer-muted);
}

.onlycat-footer .onlycat-lang--footer .onlycat-lang__summary:hover {
	color: var(--oc-footer-accent);
}

.onlycat-footer .onlycat-lang--footer .onlycat-lang__options {
	bottom: 100%;
	top: auto;
	left: 0;
	right: auto;
	background: var(--oc-white);
	border-color: #cbd7df;
}

.onlycat-footer .onlycat-footer__basket {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	font-size: 13px;
	color: var(--oc-footer-muted);
}

.onlycat-footer .onlycat-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	border-top: 1px solid var(--oc-footer-rule);
	padding-block: 20px;
	font-size: 11px;
	line-height: 1.6;
	color: var(--oc-footer-muted);
}

.onlycat-footer .onlycat-footer__bottom > div {
	display: flex;
	align-items: center;
	gap: 22px;
	white-space: nowrap;
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 1200px) {
	.onlycat-header {
		padding-inline: 25px;
		gap: 20px;
	}

	.onlycat-header .onlycat-brand__logo {
		width: 157px;
	}

	.onlycat-header .onlycat-header__list {
		gap: 20px;
		font-size: 13px;
	}

	.onlycat-header .onlycat-header__actions {
		gap: 12px;
	}

	.onlycat-header .onlycat-button {
		padding-inline: 18px;
		font-size: 13px;
	}

	.onlycat-footer .onlycat-footer__columns {
		gap: 35px;
	}
}

@media (max-width: 1050px) {
	.onlycat-header {
		height: 76px;
	}

	.onlycat-header .onlycat-header__nav,
	.onlycat-header .onlycat-header__lang {
		display: none;
	}

	.onlycat-header .onlycat-header__toggle {
		display: flex;
	}

	.onlycat-header .onlycat-header__menu:not([hidden]) {
		display: flex;
		position: absolute;
		top: 76px;
		left: 0;
		right: 0;
		flex-direction: column;
		max-height: calc(100dvh - 76px);
		overflow: auto;
		padding: 20px 30px 30px;
		background: var(--oc-surface-header);
		border-bottom: 1px solid var(--oc-line);
		box-shadow: 0 15px 25px rgba(16, 30, 39, 0.125);
	}

	.onlycat-header .onlycat-lang--menu {
		margin-top: 15px;
	}

	.onlycat-header .onlycat-lang--menu .onlycat-lang__options {
		position: static;
		width: 100%;
		box-shadow: none;
		border: 0;
		padding-left: 0;
	}
}

@media (max-width: 760px) {
	.onlycat-shell {
		padding-inline: 24px;
	}

	.onlycat-footer .onlycat-footer__brand {
		flex-wrap: wrap;
		gap: 10px 20px;
		padding-top: 35px;
	}

	.onlycat-footer .onlycat-brand__logo {
		width: 150px;
		height: 50px;
	}

	.onlycat-footer .onlycat-footer__tagline {
		font-size: 12px;
	}

	.onlycat-footer .onlycat-footer__social {
		margin-left: 0;
		width: 100%;
		gap: 15px;
	}

	.onlycat-footer .onlycat-footer__columns {
		grid-template-columns: 1fr 1fr;
		gap: 25px;
		padding-block: 20px 35px;
	}

	.onlycat-footer .onlycat-footer__column h3 {
		margin-top: 0;
	}

	.onlycat-footer .onlycat-lang--footer {
		max-width: 180px;
	}

	.onlycat-footer .onlycat-lang--footer .onlycat-lang__options {
		left: auto;
		right: 0;
	}

	.onlycat-footer .onlycat-footer__bottom {
		display: block;
		font-size: 10px;
	}

	.onlycat-footer .onlycat-footer__bottom > div {
		margin-top: 12px;
		flex-wrap: wrap;
	}

	/* Room for the homepage's buy bar and Crisp's launcher. */
	body.onlycat-home .onlycat-footer .onlycat-footer__bottom {
		padding-bottom: 100px;
	}
}

@media (max-width: 480px) {
	.onlycat-header {
		height: 68px;
		padding-inline: 20px;
		gap: 10px;
	}

	.onlycat-header .onlycat-brand__logo {
		width: 132px;
		height: 44px;
	}

	.onlycat-header .onlycat-header__actions {
		gap: 5px;
	}

	.onlycat-header .onlycat-button {
		padding: 10px 12px;
		font-size: 11px;
		min-height: 44px;
	}

	.onlycat-header .onlycat-header__menu:not([hidden]) {
		top: 68px;
		max-height: calc(100dvh - 68px);
		padding: 10px 24px 22px;
	}

	.onlycat-header .onlycat-header__menu-list > li > a {
		font-size: 15px;
		padding: 12px 0;
	}

	.onlycat-footer .onlycat-lang--footer .onlycat-lang__options {
		width: 215px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.onlycat-header *,
	.onlycat-footer * {
		transition: none !important;
	}
}

@media print {
	.onlycat-header .onlycat-header__actions,
	.onlycat-footer {
		display: none;
	}
}