/* Site header v2 (Todor 05.11.2026; mock-ups redesign-couk/mockup/final-header-desktop.jpg, final-header-phone.jpg,
   phone-menu-final.jpg). Navy like the footer. Desktop: two rows - logo, search box, basket / the two shops left, help links
   right. Phone (up to 767px, the theme's own break): menu button, logo, basket / search box / the two shops. Loaded on every
   page while the new header is on (cw_header_v2_active() in cw-redesign-preview.php). */

/* ---- the green delivery bar above (Code Snippet "Geo Green Delivery Bar") + a truck: light green, dark green text, only the
   key words bold - "<strong>2 days tracked delivery</strong> to the <strong>UK</strong>", the wording lives in the snippets
   (Todor 05.11.2026: soft green "not that visible", deep green "too much" -> option C colours + option 2 bold, "yes put it
   live"; mockup/top-line-new-text-*.jpg, top-line-com-countries-*.jpg) ---- */
body.cwh-on #cw-geo-bar {
	background: #bfead2;
	color: #064e2b;
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	min-height: 40px;
	padding: 8px 12px;
}
body.cwh-on #cw-geo-bar a {
	color: #064e2b;
	font-weight: 500;
	margin-left: 4px;
}
body.cwh-on #cw-geo-bar strong {
	font-weight: 700;
}
body.cwh-on #cw-geo-bar .cw-txt::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	vertical-align: -4px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23064e2b' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v8H3zM14 10h4l3 3v2h-7z'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---- header ---- */
.cwh {
	position: relative;
	z-index: 1000;
	width: 100%;
	margin: 0 0 20px;
	background: #0e2f57;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	line-height: 1.2;
}
.home .cwh {
	margin-bottom: 0;
}
.cwh *,
.cwh-menu * {
	box-sizing: border-box;
}
.cwh a,
.cwh-menu a {
	text-decoration: none;
}
.cwh-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.cwh-in {
	max-width: 1220px;
	margin: 0 auto;
	padding: 0 20px;
}
.cwh-top {
	display: flex;
	align-items: center;
	gap: 48px;
	height: 78px;
}
.cwh-ico {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
}
.cwh-ico svg {
	width: 26px;
	height: 26px;
}
.cwh-burger {
	display: none;
}
.cwh-brand {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	font-size: 0;
	line-height: 0;
}
.cwh-logo {
	display: block;
	line-height: 0;
}
.cwh-logo img {
	display: block;
	width: 210px;
	max-width: none;
	height: auto;
}
.cwh-search {
	position: relative;
	flex: 1 1 auto;
	max-width: 560px;
	margin: 0;
}
.cwh-field {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 8px 0 18px;
	border-radius: 22px;
	background: #fff;
	color: #5b6b7f;
}
.cwh-field:focus-within {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .45);
}
.cwh-field > svg {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
}
.cwh-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 !important; /* the theme's ".woocommerce input" (style.css): a blue line under every box on shop pages, !important */
	border: 0 !important;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: 0;
	line-height: normal !important;
	transition: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #0e2f57;
	-webkit-appearance: none;
	appearance: none;
}
.cwh-search input[type="search"]::placeholder {
	color: #5b6b7f;
	font-weight: 400;
	opacity: 1;
}
.cwh-search input[type="search"]::-webkit-search-cancel-button,
.cwh-search input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}
.cwh-clear {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #e8ecf1;
	color: #0e2f57;
	cursor: pointer;
}
.cwh-clear[hidden] {
	display: none;
}
.cwh-clear svg {
	width: 13px;
	height: 13px;
}
.cwh-cart {
	margin-left: auto;
}
.cwh-count {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 10px;
	background: #f42147;
	color: #fff;
	font: 700 11px/19px 'Montserrat', sans-serif;
	text-align: center;
}
.cwh-count[hidden] {
	display: none;
}
.cwh-row2 {
	display: flex;
	align-items: center;
	height: 50px;
	border-top: 1px solid rgba(255, 255, 255, .18);
}
.cwh-shops {
	display: flex;
	align-items: center;
	gap: 40px;
}
.cwh-shops a {
	position: relative;
	padding: 8px 0;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
}
.cwh-shops a.on::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}
.cwh-help {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-left: auto;
}
.cwh-help a {
	padding: 8px 0;
	color: #c9d8ea;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}
.cwh-shops a:hover,
.cwh-help a:hover {
	color: #fff;
	text-decoration: underline;
}
.cwh a:focus-visible,
.cwh button:focus-visible,
.cwh-menu a:focus-visible,
.cwh-menu button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ---- the list under the search box ---- */
.cwh-sugg {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	z-index: 5;
	overflow: hidden;
	border: 1px solid #e3e7ec;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 14px 36px rgba(14, 47, 87, .22);
	text-align: left;
}
.cwh-sugg[hidden] {
	display: none;
}
.cwh-opt {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	border-bottom: 1px solid #eef1f5;
	color: #0e2f57;
}
.cwh-opt:hover,
.cwh-opt.on {
	background: #f5f7fa;
}
.cwh-opt-img {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	overflow: hidden;
	border-radius: 8px;
	background: #f5f7fa;
}
.cwh-opt-img img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.cwh-opt-t {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.cwh-opt-n {
	color: #0e2f57;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}
.cwh-opt-n b {
	font-weight: 700;
}
.cwh-opt-p {
	color: #f42147;
	font-size: 13px;
	font-weight: 600;
}
.cwh-opt-p s {
	margin-left: 6px;
	color: #8a96a6;
	font-weight: 500;
}
.cwh-all {
	display: block;
	padding: 12px 14px;
	color: #004681;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline !important;
}
.cwh-all.on,
.cwh-all:hover {
	background: #f5f7fa;
}
.cwh-none {
	padding: 14px;
	color: #5b6b7f;
	font-size: 14px;
	line-height: 1.4;
}

/* ---- phone menu: a navy drawer from the left (Todor 05.11.2026, "C in navy", brighter boxes, names only) ---- */
.cwh-menu {
	position: fixed;
	inset: 0;
	z-index: 100001; /* above the delivery bar (100000), below CookieYes and CheckoutWC's side cart */
	font-family: 'Montserrat', sans-serif;
}
.cwh-menu[hidden] {
	display: none;
}
.cwh-dim {
	position: absolute;
	inset: 0;
	background: rgba(10, 36, 66, .55);
	opacity: 0;
	transition: opacity .2s ease;
}
.cwh-drawer {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: 86%;
	max-width: 340px;
	overflow-y: auto;
	background: #0e2f57;
	color: #fff;
	box-shadow: 8px 0 30px rgba(0, 0, 0, .35);
	transform: translateX(-100%);
	transition: transform .22s ease;
}
.cwh-menu.open .cwh-dim {
	opacity: 1;
}
.cwh-menu.open .cwh-drawer {
	transform: none;
}
.cwh-dtop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 60px;
	height: 60px;
	padding: 0 6px 0 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.cwh-dlogo {
	display: block;
	line-height: 0;
}
.cwh-dlogo img {
	display: block;
	width: 150px;
	max-width: none;
	height: auto;
}
.cwh-x svg {
	width: 22px;
	height: 22px;
}
.cwh-dshops {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 14px 8px;
}
.cwh-dcard {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 12px 10px 10px;
	border-radius: 12px;
	background: #164073;
	color: #fff;
}
.cwh-dpic {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: 10px;
	background: #e6f0fb;
}
.cwh-dpic img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.cwh-dcard b {
	flex: 1 1 auto;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
}
.cwh-dcard svg,
.cwh-dhelp svg {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	color: #c9d8ea;
}
.cwh-dhelp {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.cwh-dhelp li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: none;
}
.cwh-dhelp a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .10);
	color: #dfe8f3;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.25;
}
body.cwh-lock {
	overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
	.cwh-dim,
	.cwh-drawer {
		transition: none;
	}
}

/* ---- tablets: the same two rows, a little tighter ---- */
@media (max-width: 1023px) {
	.cwh-top {
		gap: 28px;
	}
	.cwh-logo img {
		width: 180px;
	}
	.cwh-shops {
		gap: 28px;
	}
	.cwh-help {
		gap: 18px;
	}
}

/* ---- phones: menu button, logo, basket / search box / the two shops (the help links are in the menu) ---- */
@media (max-width: 767px) {
	body.cwh-on #cw-geo-bar {
		font-size: 14px;
	}
	.cwh-in {
		padding: 0;
	}
	.cwh-top {
		display: grid;
		grid-template-columns: 88px 1fr 88px;
		grid-template-rows: 56px auto;
		grid-template-areas: "b l c" "s s s";
		gap: 0;
		height: auto;
		padding: 0 6px;
	}
	.cwh-burger {
		display: flex;
		grid-area: b;
	}
	.cwh-brand {
		grid-area: l;
		justify-self: center;
	}
	.cwh-logo img {
		width: 168px;
	}
	.cwh-cart {
		grid-area: c;
		justify-self: end;
		margin: 0;
	}
	.cwh-search {
		grid-area: s;
		max-width: none;
		margin: 0 4px 10px;
	}
	.cwh-field {
		height: 42px;
		padding: 0 6px 0 16px;
		border-radius: 21px;
	}
	.cwh-search input[type="search"] {
		height: 42px;
		font-size: 16px; /* 16px: iPhones zoom the page into smaller text boxes */
	}
	.cwh-sugg {
		top: calc(100% + 6px);
	}
	.cwh-row2 {
		justify-content: center;
		height: 40px;
		padding: 0 10px;
	}
	.cwh-shops {
		gap: 22px;
	}
	.cwh-shops a {
		font-size: 13px;
	}
	.cwh-help {
		display: none;
	}
}
@media (max-width: 374px) {
	.cwh-shops {
		gap: 16px;
	}
	.cwh-shops a {
		font-size: 12.5px;
	}
}
/* very small screens, 320-359px (iPhone SE 1st gen, iPhone mini / SE with Display Zoom): the 168px logo and the 88px side
   columns needed 356px - the basket went off screen and the page slid sideways (Todor 05.11.2026, a real ad visitor in
   The Hague at 320px, recording 4091810974139858517; fix "A": full shop names, smaller). header.js shortens the search
   placeholder to "Search products" here. */
@media (max-width: 359px) {
	.cwh-top {
		grid-template-columns: 48px 1fr 48px;
		padding: 0 4px;
	}
	.cwh-logo img {
		width: 140px;
	}
	.cwh-search {
		margin: 0 6px 10px;
	}
	.cwh-field {
		gap: 8px;
		padding: 0 6px 0 12px;
	}
	.cwh-shops {
		gap: 12px;
	}
	.cwh-shops a {
		font-size: 11px;
	}
}
@media (min-width: 768px) {
	.cwh-menu {
		display: none;
	}
}

/* ---- the results page: the shops under the cards ---- */
.cwsr-more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	clear: both;
	margin: 28px 0 40px;
	padding: 18px 20px;
	border-radius: 12px;
	background: #f5f7fa;
	font-family: 'Montserrat', sans-serif;
}
.cwsr-more p {
	margin: 0;
	padding: 0;
	color: #0e2f57;
	font-size: 15px;
	font-weight: 600;
}
.cwsr-more a {
	color: #004681;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
}
