/*
 * RMS Shop: header cart link and "Shop online" links.
 * Agent Orange Design. Brand: navy #002B59, orange #FF6702, orange hover #E05A00.
 *
 * Contents
 * 1. Cart link (every header)
 * 2. "Shop online" menu item: hidden in the desktop and sticky menus (the top bar pill does that job),
 *    shown as an orange button at the top of the phone and tablet menu
 * 3. Phone and tablet header bar
 * 4. Top bar cart and search icons
 */

/* 1. Cart link ------------------------------------------------------------------------------- */

.rms-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; /* minimum touch target */
	height: 44px;
	/* No colour here on purpose: the icon takes the theme's colour and hover for header widget links,
	   so it matches the search icon next to it. */
	text-decoration: none;
	border-radius: 50%;
}

.rms-cart-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.rms-cart-link__icon {
	display: block;
	width: 24px;
	height: 24px;
}

/*
 * Count badge: navy text on orange (contrast 4.8 : 1, passes WCAG AA for text).
 * White on this orange would only reach 2.9 : 1.
 */
.rms-cart-link__count {
	position: absolute;
	top: 1px;
	right: -2px;
	box-sizing: border-box;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: #ff6702;
	box-shadow: 0 0 0 2px #002b59;
	color: #002b59;
	font-family: Lato, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.rms-cart-link__count.is-empty {
	display: none;
}

/*
 * Sticky header (desktop, after scrolling): its widget area holds only the cart link.
 * The general site CSS hides every header widget area ("#qodef-page-header .qodef-widget-holder
 * { display: none }") to hide the theme's side-area opener, which has been taken out of the sticky
 * area instead. This shows the sticky area again; the main header's widget areas stay hidden.
 */
#qodef-page-header .qodef-header-sticky .qodef-widget-holder {
	display: flex;
	align-items: center;
	margin-left: 16px;
}

/* In the sticky header the icon matches the white menu text next to it; hover in brand orange. */
#qodef-page-header .qodef-header-sticky .rms-cart-link {
	color: #fff;
}

#qodef-page-header .qodef-header-sticky .rms-cart-link:hover,
#qodef-page-header .qodef-header-sticky .rms-cart-link:focus-visible {
	color: #ff6702;
}

/* 2. "Shop online" menu item ----------------------------------------------------------------- */

.qodef-header-navigation li.rms-menu-shop {
	display: none;
}

#qodef-page-mobile-header .qodef-mobile-header-navigation li.rms-menu-shop {
	display: block;
}

#qodef-page-mobile-header .qodef-mobile-header-navigation li.rms-menu-shop > a {
	display: block;
	margin: 12px 0 8px;
	padding: 12px 20px;
	border-radius: 60px;
	background: #ff6702;
	color: #fff;
	font-weight: 700;
	text-align: center;
}

#qodef-page-mobile-header .qodef-mobile-header-navigation li.rms-menu-shop > a:hover,
#qodef-page-mobile-header .qodef-mobile-header-navigation li.rms-menu-shop > a:focus-visible {
	background: #e05a00;
	color: #fff;
}

/* 3. Phone and tablet header bar (the theme's mobile header, shown up to 1200 px) ------------ */

/* The widget area sits between the logo and the search and menu buttons. */
#qodef-page-mobile-header .qodef-widget-holder {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	margin-left: auto;
	padding-left: 12px; /* never closer than 12 px to the logo (Paula, 6 Oct 2026) */
}

/* White like the search and menu icons next to it; hover in brand orange. */
#qodef-page-mobile-header .rms-cart-link {
	color: #fff;
}

#qodef-page-mobile-header .rms-cart-link:hover,
#qodef-page-mobile-header .rms-cart-link:focus-visible {
	color: #ff6702;
}

/* 4. Top bar cart and search icons (desktop, 1201 px and wider) ------------------------------ */

/*
 * White, like the menu text, instead of the theme's light grey (#C1C1C1), which disappeared over the pale parts of
 * the home page photos (Brandon and Paula, 24 Oct 2026). A soft shadow keeps both icons readable over any photo.
 * Hover in brand orange, as in the sticky and phone headers.
 */
#qodef-top-area .rms-cart-link,
#qodef-top-area .qodef-opener-icon {
	color: #fff !important;
}

#qodef-top-area .rms-cart-link:hover,
#qodef-top-area .rms-cart-link:focus-visible,
#qodef-top-area .qodef-opener-icon:hover,
#qodef-top-area .qodef-opener-icon:focus-visible {
	color: #ff6702 !important;
}

#qodef-top-area .rms-cart-link__icon,
#qodef-top-area .qodef-opener-icon svg,
#qodef-page-mobile-header .rms-cart-link__icon,
#qodef-page-mobile-header .qodef-opener-icon svg {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}