/* ==========================================================================
   CITYMALL HEADER — light header, ported from the IVONIX child theme and
   re-branded to the Citymall palette (royal blue + orange accent).

   Structure:
     Row 1 (.main-header) : logo | search | call | account | cart
     Row 2 (.col-full-nav): department mega-menu | category links | badges

   The search pill uses a flex form rather than an absolutely-positioned
   button — it survives Shoptimizer's own search markup changes far better.
   ========================================================================== */

:root{
	--ct-blue:#1b6fb3;      /* logo royal blue — primary accent */
	--ct-cyan:#29abe2;      /* logo bright blue */
	--ct-navy:#0e3f6e;      /* department rail / deep chrome */
	--ct-navy2:#0a2f52;
	--ct-orange:#ff6a00;    /* CTA / cart count */
	--ct-hdr-ink:#20242c;
	--ct-hdr-muted:#6b7280;
	--ct-hdr-line:#e4e9f0;
	--ct-hdr-tint:#f3f6fb;
}

/* ---- Whole header white ---- */
.site-header,
body:not(.header-4) .site-header,
.site-header .main-header,
.main-header{
	background-color:#fff !important;
	box-shadow:none !important;
}
.site-header{ border-bottom:1px solid var(--ct-hdr-line); }
.site-header .main-header a{ color:var(--ct-hdr-ink); }

/* ---- Logo: full-colour logo on a white header (no white swap) ---- */
.site-header .custom-logo-link img,
.site-header img.custom-logo,
.site-header .site-branding img{
	width:auto !important;
	height:auto !important;
	max-height:50px;
}

/* ==========================================================================
   SEARCH — rounded pill, grey magnifier left, blue button right
   ========================================================================== */
.site-header .site-search .widget,
.site-header .site-search .widget_product_search{ margin:0; padding:0; }

.site-header .site-search form.woocommerce-product-search{
	display:flex !important; align-items:stretch;
	position:relative;
	width:100%; height:50px;
	margin:0;
	background:#fff;
	border:1.5px solid #d9dce6;
	border-radius:28px;
	overflow:hidden;
}
.site-header .site-search form.woocommerce-product-search:focus-within{
	border-color:var(--ct-blue);
	box-shadow:0 0 0 3px rgba(27,111,179,.14);
}
.site-header .site-search input[type="search"],
.site-header .site-search input.search-field{
	flex:1 1 auto !important; width:auto !important;
	height:100% !important; min-height:0 !important;
	margin:0 !important; padding:0 16px 0 46px !important;
	border:0 !important; border-radius:0 !important;
	background:#fff !important; color:var(--ct-hdr-ink) !important;
	font-size:15px; box-shadow:none !important; outline:0 !important;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0ac' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") !important;
	background-repeat:no-repeat !important;
	background-position:17px center !important;
	background-size:18px !important;
}
.site-header .site-search input.search-field::placeholder{ color:#9aa0ac; }

.site-header .site-search form.woocommerce-product-search button,
.site-header .site-search form.woocommerce-product-search button[type="submit"]{
	flex:0 0 96px !important; width:96px !important; height:100% !important;
	position:static !important;
	margin:0 !important; padding:0 !important;
	border:0 !important; border-radius:0 !important;
	background-color:var(--ct-blue) !important; color:#fff !important;
	font-size:0 !important; line-height:0 !important;
	text-indent:-9999px; white-space:nowrap; overflow:hidden;
	cursor:pointer; box-shadow:none !important;
	visibility:visible !important; opacity:1 !important;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") !important;
	background-repeat:no-repeat !important;
	background-position:center !important;
	background-size:20px !important;
}
.site-header .site-search form.woocommerce-product-search button:hover{ background-color:var(--ct-navy) !important; }
/* Neutralise any theme search-icon pseudo-element that would overlap the field */
.site-header .site-search:before,
.site-header .site-search form.woocommerce-product-search:before{ content:none !important; }

/* ==========================================================================
   "CALL US NOW" BLOCK
   ========================================================================== */
.ct-header-call{ display:flex; align-items:center; gap:11px; white-space:nowrap; text-decoration:none; }
.ct-call-ic{
	display:flex; align-items:center; justify-content:center; flex:0 0 auto;
	width:42px; height:42px; border-radius:50%;
	background:rgba(27,111,179,.09); color:var(--ct-blue);
}
.ct-call-ic svg{ width:20px; height:20px; }
.ct-call-txt{ display:flex; flex-direction:column; line-height:1.15; }
.ct-call-txt small{ font-size:11px; color:var(--ct-hdr-muted); font-weight:500; }
.ct-call-txt strong{ font-size:16px; color:var(--ct-blue); font-weight:800; letter-spacing:-.2px; }
.ct-header-call:hover .ct-call-ic{ background:rgba(27,111,179,.16); }

/* ==========================================================================
   ACCOUNT BLOCK
   ========================================================================== */
.ct-header-account{ display:flex; align-items:center; gap:20px; white-space:nowrap; }
.ct-header-account .ct-acc-link{ display:flex; align-items:center; gap:9px; color:var(--ct-hdr-ink) !important; line-height:1.15; text-decoration:none; }
.ct-header-account .ct-acc-link:hover{ color:var(--ct-blue) !important; }
.ct-header-account .ct-acc-icon{ stroke:var(--ct-blue); flex:0 0 auto; }
.ct-header-account .ct-acc-text{ display:flex; flex-direction:column; }
.ct-header-account .ct-acc-text small{ font-size:11px; color:var(--ct-hdr-muted); font-weight:500; }
.ct-header-account .ct-acc-text strong{ font-size:14px; font-weight:700; color:var(--ct-hdr-ink); }

/* ==========================================================================
   CART — dark text, blue icon, orange count
   ========================================================================== */
.site-header .site-header-cart,
.site-header .shoptimizer-cart{ background:transparent !important; }
.shoptimizer-cart .cart-contents,
.shoptimizer-cart .cart-contents .amount,
.shoptimizer-cart .woocommerce-Price-amount{ color:var(--ct-hdr-ink) !important; }
.shoptimizer-cart-icon i{ color:var(--ct-blue) !important; }
.shoptimizer-cart-icon svg{ stroke:var(--ct-blue) !important; }
.site-header a.cart-contents .count{
	background-color:var(--ct-orange) !important;
	color:#fff !important;
	border:0 !important;
}
.site-header a.cart-contents .count:after{ content:none !important; }

/* ==========================================================================
   NAV ROW — badges
   ========================================================================== */
.ct-nav-badges{ display:flex; align-items:center; gap:10px; list-style:none; margin:0; padding:0; }
.ct-badge{
	display:inline-flex; align-items:center; gap:8px;
	padding:7px 14px; border-radius:22px;
	background:var(--ct-hdr-tint); border:1px solid var(--ct-hdr-line);
	font-size:13px; font-weight:600; color:var(--ct-hdr-ink); white-space:nowrap;
}
.ct-badge svg{ width:17px; height:17px; color:var(--ct-blue); flex:0 0 auto; }

/* ==========================================================================
   DESKTOP LAYOUT (>= 993px)
   ========================================================================== */
@media (min-width:993px){
	/* top row as a flex bar: logo | search | phone | account | cart */
	.main-header.col-full{
		display:flex !important;
		flex-wrap:nowrap !important;
		align-items:center;
		gap:24px;
		padding-top:14px !important;
		padding-bottom:14px !important;
	}
	/* the theme's mobile account toggle has no place on the desktop bar */
	.main-header .shoptimizer-myaccount,
	.site-header .menu-toggle,
	.site-header .mobile-search-toggle{ display:none !important; }

	.main-header .site-branding{ order:0; flex:0 0 auto; margin:0; padding:0; height:auto !important; display:flex; align-items:center; }
	.main-header .site-search{ order:1; flex:1 1 auto; max-width:640px; margin:0; padding:0 !important; }
	.main-header .ct-header-call{ order:2; flex:0 0 auto; margin-left:auto; }
	.main-header .ct-header-account{ order:3; flex:0 0 auto; }
	.main-header .site-header-cart{ order:4; flex:0 0 auto; display:flex !important; align-items:center; margin:0; height:auto !important; }

	/* nav row: white with a divider; hide the duplicate search + cart */
	.col-full-nav{ background-color:#fff !important; border-bottom:1px solid var(--ct-hdr-line); }
	.col-full-nav .site-search{ display:none !important; }
	.col-full-nav .site-header-cart{ display:none !important; }

	/* lay the nav out as a flex row so badges can sit hard-right.
	   Shoptimizer centres this row and lets it wrap; both have to go, or the
	   nine category links break onto a second line and shove the badge rail
	   off the right edge. */
	.col-full-nav .menu-primary-menu-container > ul,
	.col-full-nav .shoptimizer-primary-navigation ul.menu{
		display:flex !important; align-items:center; gap:4px; margin:0; padding:0;
		flex-wrap:nowrap !important;
		justify-content:flex-start !important;
		width:100%;
	}
	/* each top-level item keeps its natural width and never breaks mid-label */
	.col-full-nav .menu-primary-menu-container > ul > li{ flex:0 0 auto; }
	.col-full-nav .menu-primary-menu-container > ul > li > a,
	.col-full-nav .menu-primary-menu-container > ul > li.nolink > span{ white-space:nowrap; }
	/* tighten the link padding so nine items + the rail fit at 1520px */
	.col-full-nav .menu-primary-menu-container > ul > li > a{ padding-left:11px; padding-right:11px; }

	/* badge rail: pinned right, laid out inline, never wrapped or clipped */
	.ct-nav-badges{
		margin-left:auto; flex:0 0 auto;
		display:flex; align-items:center; gap:10px;
	}
	.ct-nav-badges .ct-badge{ white-space:nowrap; }

	/* category links dark on white */
	.menu-primary-menu-container > ul > li > a,
	.menu-primary-menu-container > ul > li.nolink > span{ color:var(--ct-hdr-ink) !important; font-weight:600; }
	.menu-primary-menu-container > ul > li > a:hover{ color:var(--ct-blue) !important; }

	/* sticky header keeps the white skin */
	.is_stuck .site-header,
	.is_stuck .main-header{ background:#fff !important; }
}

/* Between tablet and a wide desktop there is room for the nav OR the badges,
   not both. The category links are navigation and win; the badges are
   reassurance copy and drop out. */
@media (min-width:993px) and (max-width:1439px){
	.ct-nav-badges{ display:none !important; }
}

/* ==========================================================================
   MOBILE ( <= 992px )
   ========================================================================== */
@media (max-width:992px){
	/* keep mobile clean: hide the text account + phone blocks and nav badges */
	.ct-header-account,
	.ct-header-call,
	.ct-nav-badges{ display:none !important; }

	/* logo fits the compact mobile bar */
	.site-header .custom-logo-link img,
	.site-header img.custom-logo,
	.site-header .site-branding img{ max-height:34px; }

	/* mobile search: shorter field, compact blue button */
	.site-header .site-search form.woocommerce-product-search{ height:44px; }
	.site-header .site-search form.woocommerce-product-search button,
	.site-header .site-search form.woocommerce-product-search button[type="submit"]{ flex:0 0 48px !important; width:48px !important; }

	/* hamburger bars + label dark on the white bar */
	.site-header .menu-toggle,
	.site-header .site-branding button.menu-toggle,
	.site-header .site-branding button.menu-toggle:hover{
		background-color:transparent !important; box-shadow:none !important;
	}
	.menu-toggle .bar,
	.menu-toggle:hover .bar{ background-color:var(--ct-blue) !important; }
	.menu-toggle .bar-text,
	.menu-toggle:hover .bar-text{ color:var(--ct-hdr-ink) !important; }

	/* mobile search + account toggle icons blue */
	.mobile-search-toggle svg,
	.shoptimizer-myaccount svg{ stroke:var(--ct-blue) !important; }

	/* below-header search sits on the white bar */
	.m-search-bh .site-header .site-search,
	.m-search-toggled .site-header .site-search{
		background:#fff !important; box-shadow:none !important; padding:0 12px 10px !important;
	}
}