/* =========================================================================
   APC UPS Shop Kenya — top bar, header, primary nav, footer
   -------------------------------------------------------------------------
   Structure (Shoptimizer):
     .topbar-wrapper > .top-bar > .col-full > .top-bar-{left,center,right}
     header#masthead.site-header > .main-header.col-full
       .site-branding · .site-search · nav.secondary-navigation
       · nav.site-header-cart
     .shoptimizer-primary-navigation.col-full > .col-full-nav
       > nav.primary-navigation > ul.menu  (+ .apc-badge items)

   Layout rules are scoped to >=992px so the theme's native mobile header and
   drawer are left intact.
   ========================================================================= */

:root {
	--apc-icon-search: 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%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
	--apc-icon-truck: 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%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpath d='M16 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
	--apc-icon-card: 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%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cpath d='M1 10h22'/%3E%3C/svg%3E");
	--apc-icon-phone: 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='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	--apc-icon-user: 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 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
	--apc-icon-bars: 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'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E");
	--apc-icon-chev: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   Top bar
   ---------------------------------------------------------------------- */

body .top-bar {
	background: var(--apc-ink);
	color: rgba(255, 255, 255, .82);
	font-size: 13px;
	line-height: 1.5;
}

body .top-bar a {
	color: #fff;
	text-decoration: none;
}

body .top-bar a:hover {
	color: var(--apc-red);
}

body .top-bar p {
	margin: 0;
}

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

body .site-header {
	background: #fff;
	border-bottom: 1px solid var(--apc-line);
}

/* Kirki prints `.site-header .custom-logo-link img { height: 38px }` inline and
   late, so this has to set `height` too — a max-height can't override it.

   The uploaded logo is a 500x500 square with a lot of empty margin baked into
   the artwork, so the wordmark only fills part of whatever height is set. The
   real fix is a tightly-cropped logo file; until then this over-sizes the box
   to compensate. */
body .site-header .custom-logo-link img,
body .site-header .custom-logo {
	height: 72px;
	max-height: none;
	width: auto;
	object-fit: contain;
}

/* -------------------------------------------------------------------------
   Search — rounded field with a solid brand submit button, per the mockup
   ---------------------------------------------------------------------- */

body .site-search .woocommerce-product-search {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	background: #fff;
	border: 1.5px solid var(--apc-line-strong);
	border-radius: var(--apc-radius);
	overflow: hidden;
	transition: border-color .16s ease, box-shadow .16s ease;
}

body .site-search .woocommerce-product-search:focus-within {
	border-color: var(--apc-ink);
	box-shadow: 0 0 0 3px rgba(228, 0, 43, .12);
}

body .site-search .woocommerce-product-search .search-field {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 15px;
	color: var(--apc-ink);
}

body .site-search .woocommerce-product-search .search-field::placeholder {
	color: var(--apc-muted);
	opacity: 1;
}

body .site-search .woocommerce-product-search .search-field:focus {
	outline: none;
	box-shadow: none;
}

/* Replace the button's text with a magnifier without hiding it from
   screen readers.

   Shoptimizer visually hides this button with
   `clip: rect(1px 1px 1px 1px); position: absolute !important`, so the
   position and clip both have to be unwound before it will show at all.

   Scoped to desktop because the inline search bar is a desktop treatment —
   below 992px Shoptimizer collapses search into a toggle/modal with its own
   styling, which this rule has no business touching. */
@media (min-width: 992px) {
	body .site-search .woocommerce-product-search button[type="submit"] {
		position: relative !important;
		clip: auto;
		clip-path: none;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 64px;
		height: 48px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: var(--apc-red);
		color: transparent;
		font-size: 0;
		line-height: 0;
		cursor: pointer;
		transition: background-color .16s ease;
	}

	body .site-search .woocommerce-product-search button[type="submit"]::before {
		content: "";
		display: block;
		width: 21px;
		height: 21px;
		margin: 0 auto;
		background: #fff;
		-webkit-mask: var(--apc-icon-search) center / contain no-repeat;
		mask: var(--apc-icon-search) center / contain no-repeat;
	}

	body .site-search .woocommerce-product-search button[type="submit"]:hover {
		background: var(--apc-red-dark);
	}
}

/* -------------------------------------------------------------------------
   Contact / account cluster (printed by apc_header_actions)
   ---------------------------------------------------------------------- */

body .apc-header-actions {
	display: none; /* desktop only — enabled in the >=992px block below */
	align-items: center;
	gap: 26px;
}

body .apc-header-actions .apc-haction {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	color: var(--apc-ink);
	text-decoration: none;
	white-space: nowrap;
}

body .apc-header-actions .apc-haction__icon {
	display: block;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--apc-red-tint);
	position: relative;
}

body .apc-header-actions .apc-haction__icon::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 20px;
	height: 20px;
	background: var(--apc-red);
}

body .apc-header-actions .apc-haction--phone .apc-haction__icon::before {
	-webkit-mask: var(--apc-icon-phone) center / contain no-repeat;
	mask: var(--apc-icon-phone) center / contain no-repeat;
}

body .apc-header-actions .apc-haction--account .apc-haction__icon::before {
	-webkit-mask: var(--apc-icon-user) center / contain no-repeat;
	mask: var(--apc-icon-user) center / contain no-repeat;
}

body .apc-header-actions .apc-haction__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

body .apc-header-actions .apc-haction__text small {
	font-size: 12px;
	font-weight: 500;
	color: var(--apc-muted);
}

body .apc-header-actions .apc-haction__text strong {
	font-size: 15px;
	font-weight: 700;
	color: var(--apc-ink);
}

body .apc-header-actions .apc-haction:hover .apc-haction__text strong {
	color: var(--apc-red);
}

/* -------------------------------------------------------------------------
   Cart
   ---------------------------------------------------------------------- */

body .site-header-cart .cart-contents {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--apc-ink);
	font-weight: 600;
	text-decoration: none;
}

body .site-header-cart .cart-contents:hover {
	color: var(--apc-red);
}

body .site-header-cart .cart-contents .count {
	background: var(--apc-red);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   Primary navigation row
   ---------------------------------------------------------------------- */

/* .col-full-nav is the full-bleed wrapper; .shoptimizer-primary-navigation is
   the centred col-full inside it. Both need the light background, or the
   wrapper's dark Kirki default shows as black bars either side of the menu. */
body .col-full-nav {
	background: #fff;
	border-bottom: 1px solid var(--apc-line);
}

body .shoptimizer-primary-navigation {
	background: transparent;
}

body .primary-navigation ul.menu > li.menu-item > a {
	color: var(--apc-ink);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.005em;
}

body .primary-navigation ul.menu > li.menu-item > a:hover,
body .primary-navigation ul.menu > li.current-menu-item > a {
	color: var(--apc-red);
}

/* Trust badges appended to the primary menu by apc_nav_badges(). They are
   labels, not links, so they get no hover affordance. */
body .primary-navigation ul.menu > li.apc-badge {
	display: flex;
	align-items: center;
	pointer-events: none;
}

body .primary-navigation ul.menu > li.apc-badge > span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px;
	border-radius: var(--apc-radius-pill);
	background: var(--apc-red-tint);
	color: var(--apc-red-dark);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

body .primary-navigation ul.menu > li.apc-badge > span::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: none;
	background: currentColor;
}

body .primary-navigation ul.menu > li.apc-badge--delivery > span::before {
	-webkit-mask: var(--apc-icon-truck) center / contain no-repeat;
	mask: var(--apc-icon-truck) center / contain no-repeat;
}

body .primary-navigation ul.menu > li.apc-badge--pay > span::before {
	-webkit-mask: var(--apc-icon-card) center / contain no-repeat;
	mask: var(--apc-icon-card) center / contain no-repeat;
}

/* -------------------------------------------------------------------------
   Desktop layout only
   ---------------------------------------------------------------------- */

@media (min-width: 992px) {
	body .main-header.col-full {
		display: flex;
		align-items: center;
		gap: 26px;
		padding-top: 18px;
		padding-bottom: 18px;
	}

	body .main-header .site-branding {
		flex: none;
	}

	/* The search bar takes the slack, but capped so the contact/account/cart
	   cluster keeps its room. */
	body .main-header .site-search {
		flex: 1 1 auto;
		max-width: 620px;
		margin: 0;
	}

	/* The secondary menu location renders an empty <nav>; it would otherwise
	   eat a gap in the flex row. */
	body .main-header .secondary-navigation:empty {
		display: none;
	}

	body .apc-header-actions {
		display: flex;
		flex: none;
		margin-left: auto;
	}

	/* Shoptimizer renders the cart twice — once in .main-header and again in
	   .col-full-nav for the sticky bar — and absolutely positions the first
	   (`.site-header .site-header-cart { position: absolute; right: 15px }`).
	   Put the header one back in the flex flow so it ends the top row, as in
	   the mockup. */
	body .main-header .site-header-cart {
		position: static;
		display: block;
		flex: none;
		margin: 0;
		right: auto;
	}

	body .main-header .site-header-cart .cart-contents {
		gap: 10px;
		font-size: 15px;
		font-weight: 700;
	}

	/* Shoptimizer's nav row (.col-full-nav) is position:sticky, so on scroll
	   row 1 leaves and this bar sticks to the top. The theme keeps its own
	   cart copy in that bar; with our cart already in the row-1 cluster, that
	   copy reappeared on scroll and read as a duplicate. Hide it outright so
	   the cart lives only in the top cluster. */
	body .col-full-nav .site-header-cart {
		display: none;
	}

	body .primary-navigation ul.menu {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
	}

	/* Without this the nav items shrink and their labels break onto two
	   lines once the pill and badges are competing for the row. */
	body .primary-navigation ul.menu > li {
		flex: none;
	}

	body .primary-navigation ul.menu > li > a {
		white-space: nowrap;
	}

	/* Badges sit at the far right of the nav row. */
	body .primary-navigation ul.menu > li.apc-badge--delivery {
		margin-left: auto;
	}

	body .primary-navigation ul.menu > li.apc-badge--pay {
		margin-left: 8px;
	}
}

/* -------------------------------------------------------------------------
   "All Categories" pill + dropdown
   ---------------------------------------------------------------------- */

body .primary-navigation ul.menu > li.apc-allcats {
	position: relative;
	margin-right: 18px;
}

body .primary-navigation ul.menu > li.apc-allcats > a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	border-radius: var(--apc-radius-pill);
	background: var(--apc-red);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .16s ease;
}

body .primary-navigation ul.menu > li.apc-allcats > a:hover {
	background: var(--apc-red-dark);
	color: #fff;
}

body .primary-navigation ul.menu > li.apc-allcats .apc-allcats__bars,
body .primary-navigation ul.menu > li.apc-allcats .apc-allcats__chev {
	display: block;
	flex: none;
	background: currentColor;
}

body .primary-navigation ul.menu > li.apc-allcats .apc-allcats__bars {
	width: 17px;
	height: 17px;
	-webkit-mask: var(--apc-icon-bars) center / contain no-repeat;
	mask: var(--apc-icon-bars) center / contain no-repeat;
}

body .primary-navigation ul.menu > li.apc-allcats .apc-allcats__chev {
	width: 13px;
	height: 13px;
	-webkit-mask: var(--apc-icon-chev) center / contain no-repeat;
	mask: var(--apc-icon-chev) center / contain no-repeat;
}

/* CSS-only dropdown — deliberately independent of the theme's nav JS. */
body .primary-navigation ul.menu > li.apc-allcats .apc-allcats__list {
	position: absolute;
	z-index: 120;
	top: calc(100% + 8px);
	left: 0;
	min-width: 250px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--apc-line);
	border-radius: var(--apc-radius);
	box-shadow: var(--apc-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

body .primary-navigation ul.menu > li.apc-allcats:hover .apc-allcats__list,
body .primary-navigation ul.menu > li.apc-allcats:focus-within .apc-allcats__list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

body .primary-navigation ul.menu > li.apc-allcats .apc-allcats__list li {
	margin: 0;
	list-style: none;
}

body .primary-navigation ul.menu > li.apc-allcats .apc-allcats__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 12px;
	border-radius: var(--apc-radius-sm);
	color: var(--apc-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

body .primary-navigation ul.menu > li.apc-allcats .apc-allcats__list a:hover {
	background: var(--apc-bg-soft);
	color: var(--apc-red);
}

body .primary-navigation ul.menu > li.apc-allcats .apc-allcats__count {
	color: var(--apc-muted);
	font-size: 12px;
	font-weight: 500;
}

@media (max-width: 991px) {
	/* The pill is a desktop nav-row device; the mobile drawer lists categories
	   through the theme's own menu. */
	body .primary-navigation ul.menu > li.apc-allcats {
		display: none;
	}
}

@media (max-width: 991px) {
	/* Badges add noise on a narrow nav drawer. */
	body .primary-navigation ul.menu > li.apc-badge {
		display: none;
	}

	body .site-search .woocommerce-product-search .search-field {
		height: 44px;
		font-size: 14px;
	}
}

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

body .site-footer {
	background: var(--apc-ink);
	color: rgba(255, 255, 255, .72);
}

body .site-footer a {
	color: rgba(255, 255, 255, .88);
	text-decoration: none;
}

body .site-footer a:hover {
	color: var(--apc-red);
}

body .site-footer .widget-title,
body .site-footer h1,
body .site-footer h2,
body .site-footer h3,
body .site-footer h4 {
	color: #fff;
	font-size: 15px;
	letter-spacing: .01em;
}

body .site-footer .col-full {
	border-top: 0;
}