/**
 * Global site header.
 *
 * Values matched against the live legacy site's real CSS (top banner) and
 * computed styles where Porto's own header-builder output has no readable
 * source. See docs/architecture.md for the header build breakdown.
 *
 * Row 2/3, the Shop All flyout and the mini-cart panel below were all
 * pulled the same way -- getComputedStyle() against the live legacy site,
 * see docs/header-navigation-spec.md for the confirmed values (brand
 * green, fonts, the flyout's real icon source, the two content bugs found
 * and corrected during the audit).
 */

:root {
	--medimart-green: #589f3c;
	--medimart-green-tint: rgba(88, 159, 60, 0.07);
	--medimart-border: #e4e4e4;
}

/*
 * Top banner (restyled 2026-10-26, option A of five mocked up): a charcoal
 * bar (#222529, the footer's colour) with up to two messages in white,
 * each led by a light-green line icon. Desktop: messages side by side,
 * spaced apart with nothing between them. Phones (991px and below): one
 * message at a time in a sliding track with chevron arrows
 * (assets/js/top-banner.js).
 */
.site-top-banner {
	--top-banner-bg: #222529;
	position: relative;
	z-index: 1001;
	display: flex;
	align-items: center;
	background: var(--top-banner-bg);
	color: #fff;
	font-family: Roboto, sans-serif;
}

.site-top-banner__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.site-top-banner__track {
	display: flex;
	justify-content: center;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-top-banner__item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 9px 28px;
}

.site-top-banner__message {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0.2px;
	text-decoration: none;
	text-transform: capitalize;
}

a.site-top-banner__message .site-top-banner__text {
	transition: color 0.2s ease;
}

a.site-top-banner__message:hover .site-top-banner__text,
a.site-top-banner__message:focus-visible .site-top-banner__text {
	color: #7cc35f;
}

.site-top-banner__icon {
	flex: none;
	color: #7cc35f;
}

.site-top-banner__arrow {
	display: none;
}

@media (max-width: 991px) {
	.site-top-banner__track {
		justify-content: flex-start;
		transition: transform 0.35s ease;
	}

	.site-top-banner__item {
		flex: 0 0 100%;
		padding: 8px 4px;
		text-align: center;
	}

	.site-top-banner__message {
		gap: 6px;
		font-size: 11.5px;
	}

	.site-top-banner--multiple .site-top-banner__arrow {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		align-self: stretch;
		width: 36px;
		padding: 0;
		border: 0;
		background: none;
		color: #fff;
		cursor: pointer;
	}

	.site-top-banner__arrow--next svg {
		transform: scaleX(-1);
	}

	.site-top-banner__arrow:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -4px;
	}
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
	.site-top-banner__track {
		transition: none;
	}
}

/* ==========================================================================
   Row 2 -- branding, search, icons
   ========================================================================== */

/*
 * No position: relative here (removed 2026-09-14) -- it silently broke
 * the mobile sticky nav below: a sticky element's stuck range is bounded
 * by its containing block, and .site-header (branding row + nav row,
 * nothing else) is barely taller than the nav itself, leaving it almost
 * no room to actually stick before its own parent's bottom edge caught
 * up with it. Confirmed nothing else needs this as a positioning
 * reference -- the flyout and mini-cart panel each anchor to their own
 * closer wrapper (.site-nav__menu / .site-header__mini-cart), not this.
 */
.site-header,
.site-header__sticky {
	background: #fff;
}

/*
 * Mobile-only pieces, switched off here and on under 992px further down:
 * the second search row, the panel head (logo / account block / "Main
 * Menu" caption) and the Shop All trigger's own triangle.
 */
.site-header__row--mobile-search,
.site-nav__panel-head,
.site-nav__shop-all-arrow {
	display: none;
}

.site-nav__overlay {
	position: fixed;
	inset: 0;
	z-index: 8999;
	background: rgba(0, 0, 0, 0.5);
}

.site-nav__overlay[hidden] {
	display: none;
}

body.mobile-nav-open {
	overflow: hidden;
}

/*
 * Row 2 and row 3 are each full-width so their border-bottom reaches the
 * true edges (confirmed live: `.header-main` and `.header-bottom` both
 * carry `border-bottom: 1px solid #e4e4e4` on production); the actual
 * content inside each is inset by `.site-container` (main.css), the same
 * width rule the category page uses, kept persistent across the site
 * rather than a one-off number here.
 */
.site-header__row--branding {
	border-bottom: 1px solid var(--medimart-border);
}

.site-header__row-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.site-branding {
	flex: 0 0 auto;
}

/* Confirmed live: the desktop logo renders at 180px wide (46.5px tall). */
.site-branding img {
	display: block;
	width: 180px;
	height: auto;
}

.site-header__search {
	flex: 1 1 auto;
	max-width: 640px;
	margin: 0 auto;
}

/* The dgwt-wcas-* classes below are FiboSearch/ajax-search-for-woocommerce's
   own markup (see [wcas-search-form] in header.php) -- only cosmetic
   overrides live here, never structural ones, so a plugin update doesn't
   silently break the layout. Scoped under .site-header__search-form --
   shared by row 2's desktop copy and the mobile search row -- (not the
   bare class) so this reliably beats the plugin's own bundled CSS, which
   is enqueued after ours and was winning ties on the bare class alone --
   confirmed live: the input rendered with the plugin's own 3px radius and
   the submit button its own dark grey square until this was scoped up. */
/*
 * !important on radius/background only: the plugin's own bundled CSS
 * uses a 3-class-deep selector (higher specificity than a 2-class scope
 * here can reliably beat), confirmed live -- scoping alone wasn't enough
 * even after moving off the bare class.
 */
.site-header__search-form .dgwt-wcas-search-input {
	background-color: #f2f2f2 !important;
	border: 1px solid #f2f2f2;
	border-radius: 30px !important;
	color: #777;
	font-size: 14px;
	height: 40px;
	padding: 10px 15px;
	width: 100%;
}

/* FiboSearch italicises its placeholder; plain text here (user, 2026-09-17). */
.site-header__search-form .dgwt-wcas-search-input::placeholder {
	font-style: normal !important;
	color: #777;
	opacity: 1;
}

.site-header__search-form .dgwt-wcas-search-input::-webkit-input-placeholder {
	font-style: normal !important;
}

/*
 * Confirmed live: a true 40px circle with the magnifier centred in it.
 * The plugin's own button is 50px wide with 15px side padding (an oval,
 * not a circle) and draws a dark 8px triangle out of its left edge via
 * ::before -- that "grey notch" is the plugin's default "speech bubble"
 * pointer, not anything the live site shows, so it's hidden here.
 */
.site-header__search-form .dgwt-wcas-search-submit {
	background-color: var(--medimart-green) !important;
	border-radius: 50% !important;
	color: #fff;
	min-width: 40px !important; /* the plugin's min-width: 50px is what made it an oval */
	width: 40px !important;
	height: 40px;
	padding: 0 !important;
}

.site-header__search-form .dgwt-wcas-search-submit::before {
	display: none !important;
}

/*
 * The plugin already centres the magnifier itself (position: absolute,
 * all four offsets 0, margin: auto) -- so only its size is overridden
 * here; forcing margin: 0 would pin it to the top-left corner.
 */
/*
 * Suggestions dropdown: rounded as live (live's Porto custom CSS has
 * `.dgwt-wcas-suggestions-wrapp{border-radius:20px !important}`, checked
 * 2026-10-13). FiboSearch appends the dropdown to <body>, outside the
 * search form, so it can't be scoped under .site-header__search-form.
 */
.dgwt-wcas-suggestions-wrapp {
	border-radius: 20px !important;
}

.site-header__search-form .dgwt-wcas-search-submit svg {
	width: 16px !important;
	max-width: 17px !important;
	height: 18px !important;
	fill: #fff;
}

/*
 * Spacing confirmed live: 10px between the pin and cart circles, then
 * 14px either side of the divider before the account icon (the divider
 * carries the extra 4px each side so the flex gap can stay at 10px).
 */
.site-header__icons {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.site-header__icon-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #000;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

/*
 * Circle background: confirmed live on the pin and cart icons only --
 * the account icon has no circle, distinguished by giving those two
 * their own modifier class instead of styling .site-header__icon-link
 * itself.
 */
.site-header__icon-link--circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--medimart-border);
}

.site-header__icon-divider {
	display: inline-block;
	width: 1px;
	height: 19px;
	margin: 0 4px;
	background: var(--medimart-border);
}

/*
 * The live site's account icon is deliberately lighter than the pin
 * and cart -- Porto's own --porto-header-link-color-regular, #999. The
 * variable name is kept in the fallback form so the value reads the
 * same as the legacy source it was matched against.
 */
.site-header__icon-link--account {
	color: var(--porto-header-link-color-regular, #999);
}

/*
 * The cart icon is a PNG, not a font glyph: the live site hides Porto's
 * bag-2 glyph and paints uploads/2025/07/basket_icon-removebg-preview.png
 * over it as a background image (legacy custom CSS 207298, see
 * docs/header-navigation-spec.md). Same file, copied into the theme as
 * assets/images/basket-icon.png, rendered at the live 29x24 box.
 */
.site-header__icon-link--circle img {
	display: block;
	width: 29px;
	height: 24px;
}

.site-header__cart-count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--medimart-green);
	color: #fff;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
}

.site-header__mini-cart {
	position: relative;
}

/*
 * Mini-cart dropdown, matched to live's computed styles (Porto's
 * .cart-popup) 2026-10-07: a 320px white box with a 1px #81d742 border,
 * 10px corners and a soft shadow, 8px under the icon. Opens on hover on
 * desktop and on tap on phones (header-nav.js); the `hidden` attribute is
 * the closed state (no display rule here overrides it). The ::before strip
 * fills the 8px gap so the pointer can travel from the icon into the box
 * without it closing. Markup is woocommerce/cart/mini-cart.php. The
 * inner rules hang off the panel's id: on shop pages WooCommerce's own
 * widget CSS (`.woocommerce ul.cart_list li img`, `.woocommerce
 * .widget_shopping_cart .total`, 32px floated thumbnails, bold links)
 * otherwise outranks them.
 */
.site-header__mini-cart-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 1000;
	width: 320px;
	max-width: calc(100vw - 32px);
	background: #fff;
	border: 1px solid #81d742;
	border-radius: 10px;
	box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
	padding: 0 15px;
	font-family: "Roboto", sans-serif;
	text-align: left;
}

.site-header__mini-cart-panel::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 9px;
}

/* Head row: "N items" left, "View cart" right. */
#mini-cart-panel .mini-cart-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 10px;
	border-bottom: 1px solid #e7e7e7;
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 19.5px;
	letter-spacing: 0.2px;
	color: #222529;
	text-transform: uppercase;
}

#mini-cart-panel .mini-cart-head__view {
	color: #222529;
	text-decoration: none;
}

#mini-cart-panel .mini-cart-head__view:hover {
	color: #589f3c;
}

#mini-cart-panel .woocommerce-mini-cart {
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 340px;
	overflow-y: auto;
}

/* Item row: name and "qty x price" left, 80px photo right. */
#mini-cart-panel .woocommerce-mini-cart-item {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin: 0;
	padding: 15px 10px;
	border-bottom: 1px solid #e7e7e7;
}

#mini-cart-panel .woocommerce-mini-cart-item:last-child {
	border-bottom: 0;
}

#mini-cart-panel .mini-cart-item__details {
	flex: 1 1 auto;
	min-width: 0;
}

#mini-cart-panel .mini-cart-item__name {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 19.6px;
	color: #222529;
	text-decoration: none;
}

.site-header__mini-cart-panel a.mini-cart-item__name:hover {
	color: #589f3c;
}

#mini-cart-panel .woocommerce-mini-cart-item .quantity {
	display: block;
	font-size: 13px;
	line-height: 22px;
	color: #696969;
}

#mini-cart-panel .woocommerce-mini-cart-item .quantity .amount {
	color: #696969;
}

#mini-cart-panel .woocommerce-mini-cart-item dl.variation {
	margin: 0 0 4px;
	font-size: 12px;
	color: #696969;
}

#mini-cart-panel .mini-cart-item__image {
	position: relative;
	flex: 0 0 80px;
	width: 80px;
	height: 80px;
}

#mini-cart-panel .mini-cart-item__image img {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: contain;
}

/* Round white remove button over the photo's top-right corner. */
#mini-cart-panel .mini-cart-item__image a.remove {
	position: absolute;
	top: -10px;
	right: -7px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
	color: #222529 !important;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
}

#mini-cart-panel .mini-cart-item__image a.remove:hover {
	background: #222529;
	color: #fff !important;
}

#mini-cart-panel .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	border-top: 0;
	padding: 15px 10px 25px;
	font-size: 13px;
	font-weight: 700;
	color: #222529;
	text-transform: uppercase;
}

#mini-cart-panel .woocommerce-mini-cart__total strong {
	font-weight: 700;
}

#mini-cart-panel .woocommerce-mini-cart__total .amount {
	font-size: 15px;
	font-weight: 700;
	color: #222529;
}

#mini-cart-panel .woocommerce-mini-cart__buttons {
	margin: 0;
	padding: 0 10px 25px;
}

/* One black Checkout button (the View cart button is dropped in functions.php). */
#mini-cart-panel .woocommerce-mini-cart__buttons a.checkout {
	display: block;
	margin: 0;
	padding: 15px 10px;
	border-radius: 2px;
	background: #010204;
	color: #fff;
	font-family: "Oswald", sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.3px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

#mini-cart-panel .woocommerce-mini-cart__buttons a.checkout:hover {
	background: #222529;
}

#mini-cart-panel .woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: 20px 10px;
	font-size: 13px;
	color: #696969;
	text-align: center;
}

/* ==========================================================================
   Row 3 -- main nav, Shop All trigger, phone pill, checkout
   ========================================================================== */

.site-nav {
	border-bottom: 1px solid var(--medimart-border);
}

.site-nav__inner {
	display: flex;
	align-items: center;
	height: 61px;
}

.site-nav__mobile-toggle {
	display: none;
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
	color: #000;
}

/*
 * position: relative -- the Shop All flyout (.shop-all-flyout, further
 * down) is position: absolute against this element, but this rule
 * never actually declared it: it was silently relying on .site-header's
 * own position: relative instead (removed 2026-09-14 for the sticky nav
 * fix), which broke the flyout -- it fell back to the initial containing
 * block and opened down near the page's actual bottom instead of right
 * under the nav row. Confirmed via the DOM this was the only thing that
 * broke (mini-cart, dropdown submenus, cart-count badge each already
 * anchor to their own closer positioned wrapper).
 */
.site-nav__menu {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
}

.site-nav__shop-all-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	border-right: 1px solid var(--medimart-border);
	padding: 0 12px 0 0;
	margin-right: 0;
	font-family: Rubik, sans-serif;
	font-size: 15px;
	color: #000;
	cursor: pointer;
}

.site-nav__list {
	display: flex;
	align-items: center;
}

/*
 * Each top-level item mirrors the live site's Max Mega Menu box: a 40px
 * tall row, text then a 6px gap then the 15px arrow -- confirmed via
 * computed styles. Side padding is 12px rather than the live 15px: the
 * user asked for the items to sit slightly closer together than
 * production. The arrow is a separate button (see header-nav.js) rather
 * than a pseudo-element on the link, so the item itself is the flex row
 * that lines the two up.
 */
.site-nav__list > li {
	position: relative;
	display: flex;
	align-items: center;
	height: 40px;
	padding: 0 12px;
}

.site-nav__list > li > a {
	display: inline-flex;
	align-items: center;
	padding: 0;
	font-family: Rubik, sans-serif;
	font-size: 15px;
	font-weight: 400;
	/* 40px tall as one line, but a label that wraps on a laptop screen
	 * ("Specialist Products") sets its two lines close together, as Shop
	 * All does, rather than 40px apart (2026-10-15). */
	min-height: 40px;
	line-height: 18px;
	color: #000;
	text-transform: capitalize;
}

/*
 * The dropdown arrow -- inserted by header-nav.js as a real button next
 * to each item with children (not a plain visual indicator), because it
 * also has to work as the click target that opens the dropdown. Visible
 * at every breakpoint, not mobile-only: the user asked for click
 * instead of hover everywhere, so the same element does both jobs.
 * Solid triangle at the top level (dashicons-arrow-down on the live
 * site), thin ">" chevron on nested rows -- the SVG itself is chosen in
 * the JS, this only sizes and colours it.
 */
.site-nav__dropdown-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	background: none;
	border: none;
	padding: 0;
	margin-left: 6px;
	color: inherit;
	cursor: pointer;
}

.site-nav__dropdown-toggle svg {
	display: block;
}

/*
 * Brand green on hover and while the item's dropdown is open -- the
 * live site does the same via Max Mega Menu's :hover and .mega-toggle-on
 * rules (both #589f3c). Applied to the whole item so the link and its
 * arrow change together.
 */
.site-nav__list > li:hover > a,
.site-nav__list > li:hover > .site-nav__dropdown-toggle,
.site-nav__list > li.is-open > a,
.site-nav__list > li.is-open > .site-nav__dropdown-toggle {
	color: var(--medimart-green);
}

/*
 * Click-only dropdowns everywhere (Shop All already worked this way;
 * the user asked for the same on Sale/Clearance/Stores/etc instead of
 * hover) -- .is-open is toggled by header-nav.js, nothing opens on
 * :hover or :focus-within at this level.
 *
 * Card styling confirmed live: 250px wide, 10px radius, 1px #ddd border,
 * no shadow, no inner padding; the card sits 65px below the top of the
 * 40px item (so roughly 15px clear of the nav row's bottom border).
 *
 * Width is content-driven rather than the live fixed 250px: the card
 * grows to fit its longest label (e.g. Support > "How To Request A Quote
 * From Medimart", which overflowed a fixed card), up to 360px, after
 * which labels wrap onto a second line instead.
 */
.site-nav__list .sub-menu {
	display: none;
	position: absolute;
	top: 65px;
	left: 0;
	z-index: 1000;
	width: max-content;
	min-width: 250px;
	max-width: 360px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.site-nav__list .menu-item-has-children.is-open > .sub-menu {
	display: block;
}

/*
 * The small white pointer on top of a top-level card, confirmed live:
 * a 20px square rotated 45deg with only its top/left borders drawn,
 * sitting 10px above the card so its lower half covers the card's own
 * top border. --caret-left is set per item by header-nav.js so the
 * point lands centred under the label text (the live site hard-codes
 * 25px, which only happens to line up for short labels).
 *
 * z-index: -1 keeps the square's lower half *behind* the rows: .sub-menu
 * has its own z-index so it is a stacking context, and a negative
 * z-index child paints after the context's own background and border
 * but before its normal-flow children -- so the caret still covers the
 * card's top border, while the first row's hover tint covers the caret
 * instead of being cut through by it.
 */
.site-nav__list > li > .sub-menu::before {
	content: "";
	position: absolute;
	top: -10px;
	left: var(--caret-left, 25px);
	width: 20px;
	height: 20px;
	background: #fff;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	transform: rotate(45deg);
	z-index: -1;
}

/*
 * Each dropdown row is a flex line so a nested item's ">" chevron sits
 * at the far right of the same row as its label, instead of wrapping
 * underneath and leaving a ragged gap between rows -- that wrap was the
 * "inconsistent vertical gaps" bug, caused by the toggle button being
 * inserted after a display: block link.
 */
.site-nav__list .sub-menu > li {
	position: relative;
	display: flex;
	align-items: center;
	border-radius: 10px;
}

/*
 * Live computes 500 with a 5px left inset; the user asked for a regular
 * 400 weight and enough left padding that the text clears the border.
 */
.site-nav__list .sub-menu a {
	display: block;
	flex: 1 1 auto;
	padding: 15px;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	color: #010101;
	text-transform: capitalize;
}

.site-nav__list .sub-menu > li.menu-item-has-children > a {
	padding-right: 0;
}

.site-nav__list .sub-menu > li > .site-nav__dropdown-toggle {
	margin: 0 15px 0 8px;
	color: #010101;
}

/*
 * Row hover confirmed live: a 10% brand-green tint across the whole row
 * with the same 10px radius as the card, text colour unchanged.
 */
.site-nav__list .sub-menu > li:hover,
.site-nav__list .sub-menu > li.is-open {
	background: rgba(88, 159, 60, 0.1);
}

/*
 * Nested flyouts (Stores > South Australia > Brighton...) open to the
 * right of their parent row as a second card of the same styling --
 * confirmed live: 250px wide, aligned to the top of the row that opened
 * it, overlapping the parent card's border by 1px. Opens on hover on
 * pointer devices (as the live site does) and on the chevron click
 * everywhere else, so touch still has a way in.
 */
.site-nav__list .sub-menu .sub-menu {
	top: 0;
	left: calc(100% - 1px);
}

/*
 * Flipped to the other side by header-nav.js (fitSubmenu) when a card
 * would run off the right edge of the viewport: a top-level card aligns
 * to the item's right edge instead of its left, a nested card opens to
 * the left of its parent card.
 */
.site-nav__list .sub-menu.sub-menu--flip {
	left: auto;
	right: 0;
}

.site-nav__list .sub-menu .sub-menu.sub-menu--flip {
	left: auto;
	right: calc(100% - 1px);
}

@media (hover: hover) and (min-width: 992px) {
	.site-nav__list .sub-menu > li.menu-item-has-children:hover > .sub-menu {
		display: block;
	}

	.site-nav__list .sub-menu > li.menu-item-has-children:hover {
		background: rgba(88, 159, 60, 0.1);
	}
}

.site-nav__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}

/* Confirmed live: 16px handset SVG, then a 4px gap, then the number. */
.site-nav__phone {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 1px solid var(--medimart-green);
	border-radius: 30px;
	padding: 7px 16px;
	color: var(--medimart-green);
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
}

.site-nav__phone svg {
	display: block;
	flex: 0 0 auto;
}

.site-nav__checkout {
	display: inline-block;
	background: var(--medimart-green);
	color: #fff;
	border-radius: 999px;
	padding: 10px 24px;
	font-size: 15px;
	font-weight: 600;
}

/* ==========================================================================
   Shop All flyout
   ========================================================================== */

/*
 * Fixed-width card, NOT a full-width strip -- confirmed against
 * production: 1100px wide, aligned to the same left edge as the page's
 * own .site-container gutter, 15px inner padding, white, 10px radius.
 * .site-nav__menu (its positioning parent) already lives inside
 * .site-nav__inner (.site-container), so left: 0 here already lines up
 * with the container's own inset -- no extra offset needed.
 *
 * Layout (live): two 268px category columns on the left, then the
 * grey subcategory panel filling the rest, 10px in from the columns.
 */
.shop-all-flyout {
	position: absolute;
	top: calc(100% + 15px);
	left: 0;
	z-index: 999;
	width: 1100px;
	max-width: calc(100vw - 48px);
	background: #fff;
	border: 1px solid var(--medimart-border);
	border-radius: 10px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
	padding: 15px;
}

/*
 * Same white pointer as the dropdown cards (see .sub-menu::before), sat
 * near the top-left corner under the Shop All trigger. The card sits
 * 15px below the nav row to leave room for it -- the same clearance the
 * dropdowns have. Negative z-index for the same reason as there: the
 * flyout has its own z-index, so the pointer paints above the card's
 * border but below its content.
 */
.shop-all-flyout::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 40px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-top: 1px solid var(--medimart-border);
	border-left: 1px solid var(--medimart-border);
	transform: rotate(45deg);
	z-index: -1;
}

.shop-all-flyout__mobile {
	display: none;
}

/*
 * align-items: flex-start so the grey panel on the right is only as tall
 * as its own content -- a category with three subcategories gets a short
 * box, one with twelve gets a tall box -- rather than stretching to match
 * the category columns.
 */
/*
 * No inner scrolling and no height cap (an earlier version had both, the
 * user didn't want them): the whole menu shows, and the page itself still
 * scrolls normally underneath with the menu open. Instead the rows are
 * sized so all 19 categories and the longest subcategory list (Braces &
 * Supports, 10-11 rows plus the quote box) fit under the header on a
 * 900px-tall viewport: 56px category rows (10 per column = 560px) and
 * ~39px subcategory rows.
 */
.shop-all-flyout__desktop {
	display: flex;
	align-items: flex-start;
}

.shop-all-flyout__categories {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 263px);
	grid-auto-flow: column;
	grid-template-rows: repeat(10, auto);
	gap: 0 10px;
}

/*
 * Live `.icon-menu a`: flex row, 10px gap, 15px vertical padding around
 * a 40px icon (70px rows), Roboto 16px, 10px radius. Tightened here to
 * 10px padding around a 36px icon (56px rows) so the full list fits on
 * screen -- see the note on .shop-all-flyout__desktop. Weight is 400 on
 * the user's request (live computes 500). Hover and the selected
 * category share the live 10% green tint.
 */
.shop-all-flyout__category {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	background: none;
	border: none;
	border-radius: 10px;
	padding: 10px 15px 10px 8px;
	cursor: pointer;
	text-align: left;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #010101;
}

.shop-all-flyout__category img {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	object-fit: contain;
}

.shop-all-flyout__category:hover,
.shop-all-flyout__category.is-active {
	background: rgba(88, 159, 60, 0.1);
}

.shop-all-flyout__panel {
	flex: 1 1 auto;
	min-width: 0;
	margin-left: 10px;
}

/*
 * [hidden] is only a browser *default* style (display: none), which any
 * author rule -- including the display: flex two lines down -- silently
 * overrides regardless of specificity, since author CSS always beats the
 * user-agent stylesheet. Without this, every category's panel rendered
 * at once instead of just the active one; confirmed live before this was
 * added.
 */
.shop-all-flyout__subcategories[hidden],
.shop-all-flyout__mobile-panel[hidden] {
	display: none;
}

/*
 * Live `.main-get-cat`: rgba(217,217,217,0.3) on the active category's
 * whole right-side content (title, divider, subcategory list, quote
 * box), 10px radius. Live pads it 15px; 24px here -- more breathing room
 * than live per the user's screenshot brief, trimmed from an earlier 30px
 * so the longest list still fits on screen.
 */
.shop-all-flyout__subcategories {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: rgba(217, 217, 217, 0.3);
	border-radius: 10px;
	padding: 24px;
}

/* Live `.main-cat-title`: 20px under, 20px margin, 1px #ccc rule (15/15 here). */
.shop-all-flyout__panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 1px solid #ccc;
}

/* Live is 16px/600; 18px on the user's request. */
.shop-all-flyout__panel-header h3 {
	margin: 0;
	font-family: Roboto, sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: #010101;
}

.shop-all-flyout__explore-all {
	color: var(--medimart-green);
	font-family: Roboto, sans-serif;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	text-transform: capitalize;
	white-space: nowrap;
}

/*
 * Live rows are 16px/500 on 52px lines; 300 with a little more vertical
 * room per row on the user's request. Hover turns the name green (live).
 */
.shop-all-flyout__subcategory-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-all-flyout__subcategory-list li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #010101;
}

.shop-all-flyout__subcategory-list li a:hover {
	color: var(--medimart-green);
}

.shop-all-flyout__count {
	color: #6b6c6b;
	font-size: 14px;
	font-weight: 400;
	white-space: nowrap;
}

/*
 * Live `.qoute_main`: white card, 10px radius, flex with the text block
 * on the left and the "Go" pill on the far right, vertically centred;
 * soft shadow (0 8px 16px .08 + 0 0 4px .04), 20px above. Sits directly
 * under whatever content is above it (short list = box rides up high),
 * not pinned to the bottom of a fixed-height column -- confirmed live.
 */
.shop-all-flyout__quote-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 15px;
	background: #fff;
	border-radius: 10px;
	padding: 15px 25px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08), 0 0 4px rgba(0, 0, 0, 0.04);
}

.shop-all-flyout__quote-text {
	min-width: 0;
}

.shop-all-flyout__quote-box h4 {
	margin: 0 0 6px;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #010101;
	text-transform: capitalize;
}

.shop-all-flyout__quote-box p {
	margin: 0;
	font-family: Roboto, sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #010101;
	text-transform: capitalize;
}

.shop-all-flyout__quote-link {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 8px;
	background: var(--medimart-green-tint);
	color: #010101;
	border-radius: 10px;
	padding: 12px 15px;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	font-weight: 400;
}

.shop-all-flyout__mobile-item {
	border-bottom: 1px solid var(--medimart-border);
}

.shop-all-flyout__mobile-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	background: none;
	border: none;
	padding: 12px 16px;
	font-family: Roboto, sans-serif;
	font-size: 15px;
	color: #000;
	cursor: pointer;
}

.shop-all-flyout__mobile-toggle img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.shop-all-flyout__mobile-panel {
	padding: 0 16px 16px 16px;
}

/* ==========================================================================
   Mobile (<992px): logo row, its own search row, then the sticky
   hamburger/phone/checkout row; the nav itself is an off-canvas panel
   sliding in from the left (live: Porto's #side-nav-panel, 350px wide),
   with the Shop All categories listed as icon tiles inside it.
   ========================================================================== */

@media (max-width: 991px) {
	/*
	 * flex-wrap/gap belong on .site-header__row-inner -- the actual flex
	 * container (display:flex lives there, not on .site-header__row--
	 * branding) -- confirmed live this was the bug behind the search bar
	 * never wrapping to its own row on mobile and pushing the page into
	 * horizontal overflow instead. .site-header__row-inner already
	 * carries .site-container, which supplies the horizontal gutter, so
	 * this only needs to override the desktop vertical padding.
	 */
	.site-header__row-inner {
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 12px;
		padding-top: 12px;
		padding-bottom: 16px;
	}

	/* No divider on mobile; the three icons sit together top-right. */
	.site-header__icon-divider {
		display: none;
	}

	.site-header__icons {
		gap: 8px;
	}

	.site-header__row--branding {
		border-bottom: none;
	}

	/* Row 2's own search is replaced by the sticky block's copy below. */
	.site-header__search {
		display: none;
	}

	/*
	 * Top padding matters most when this row is stuck to the top of the
	 * screen; the bottom matches the logo row's 16px above it.
	 */
	.site-header__row--mobile-search {
		display: block;
		padding: 12px 0 16px;
		border-bottom: 1px solid var(--medimart-border);
	}

	/*
	 * Confirmed against the live site: the mobile logo is smaller than
	 * desktop's, not just the same image scaled down by its container.
	 */
	.site-branding img {
		width: 160px;
		max-width: 160px;
	}

	/*
	 * Sticky on mobile only -- confirmed against the live site, this
	 * block (search row + hamburger/phone/checkout row) re-appears pinned
	 * to the top when the user scrolls back up, hidden while scrolling
	 * down (header-nav.js toggles .site-header__sticky--hidden). It is a
	 * sibling of <header> so <body> is its containing block -- see the
	 * note in header.php.
	 */
	.site-header__sticky {
		position: sticky;
		top: 0;
		z-index: 999;
		background: #fff;
		transition: transform 0.25s ease;
	}

	/*
	 * -100% alone left the bottom of the block peeking out whenever the
	 * block had a top offset (admin bar); the extra 50px covers any
	 * offset so it always leaves the screen entirely.
	 */
	.site-header__sticky--hidden {
		transform: translateY(calc(-100% - 50px));
	}

	/*
	 * Logged-in admins: sit below WordPress's own toolbar -- but only from
	 * 600px up, where WP makes the toolbar position: fixed. Below that the
	 * toolbar is position: absolute and scrolls away with the page, so an
	 * offset there just left a 46px gap above the sticky block on phones.
	 */
	@media (min-width: 600px) {
		body.admin-bar .site-header__sticky {
			top: 46px;
		}
	}

	@media (min-width: 783px) {
		body.admin-bar .site-header__sticky {
			top: 32px;
		}
	}

	.site-nav__inner {
		height: auto;
		justify-content: space-between;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	/*
	 * Live: Font Awesome `bars` at 24px, black, with only 1px of padding
	 * on its left so the icon sits right on the container gutter.
	 */
	.site-nav__mobile-toggle {
		display: block;
		padding: 0 10px 0 1px;
		line-height: 0;
	}

	/* ----- off-canvas panel ----- */

	.site-nav__menu {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 9001;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 350px;
		max-width: 90vw;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: #fff;
		transform: translateX(-100%);
		transition: transform 0.3s;
		visibility: hidden;
	}

	.site-nav__menu.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.site-nav__panel-head {
		display: block;
	}

	/* Live: a 70px logo row with a 150px logo, no border. */
	.site-nav__panel-logo {
		display: flex;
		align-items: center;
		height: 70px;
		padding: 0 15px;
	}

	.site-nav__panel-logo img {
		display: block;
		width: 150px;
		height: auto;
	}

	/*
	 * Live `.main-avatar`: flex, 10px padding/gap, 7% green tint, 51px
	 * round avatar, Roboto 18px/600 name over a Roboto 13px line.
	 */
	.site-nav__user {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px;
		background: var(--medimart-green-tint);
		color: #010101;
		text-decoration: none;
	}

	.site-nav__user-avatar {
		flex: 0 0 auto;
		width: 51px;
		height: 51px;
		border-radius: 50%;
		object-fit: cover;
	}

	.site-nav__user-avatar--guest {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #d9d9d9;
		color: #fff;
	}

	.site-nav__user-avatar--guest svg {
		width: 30px;
		height: 30px;
	}

	.site-nav__user-text {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.site-nav__user-name {
		font-family: Roboto, sans-serif;
		font-size: 18px;
		font-weight: 600;
		line-height: normal;
	}

	.site-nav__user-meta {
		font-family: Roboto, sans-serif;
		font-size: 13px;
		line-height: normal;
		overflow-wrap: anywhere;
	}

	/* Live `.menu-title`: Roboto 12px, 62% black, 15px inset. */
	.site-nav__panel-title {
		margin: 0;
		padding: 15px 15px 0;
		font-family: Roboto, sans-serif;
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 0.2px;
		color: rgba(1, 1, 1, 0.62);
		text-transform: uppercase;
	}

	/*
	 * Shop All is the first row of the list and styled like every other
	 * top-level row (live: Rubik 16px/600, 60px line, 10px inset, 2px
	 * #e8e8e8 rule underneath) -- its desktop hamburger glyph goes, the
	 * triangle shows in its place at the far right.
	 */
	.site-nav__shop-all-trigger {
		width: 100%;
		padding: 0 10px;
		border-right: none;
		border-bottom: 2px solid #e8e8e8;
		font-family: Rubik, sans-serif;
		font-size: 16px;
		font-weight: 600;
		line-height: 60px;
		color: #010101;
		text-align: left;
	}

	.site-nav__shop-all-trigger > svg {
		display: none;
	}

	.site-nav__shop-all-trigger > span:first-of-type {
		flex: 1 1 auto;
	}

	.site-nav__shop-all-arrow {
		display: inline-flex;
		align-items: center;
		color: #010101;
	}

	.site-nav__shop-all-trigger[aria-expanded="true"],
	.site-nav__shop-all-trigger[aria-expanded="true"] .site-nav__shop-all-arrow {
		color: var(--medimart-green);
	}

	/* ----- the 9 menu items inside the panel ----- */

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
	}

	.site-nav__list > li {
		display: block;
		height: auto;
		padding: 0;
		border-bottom: 2px solid #e8e8e8;
	}

	.site-nav__list > li > a {
		display: block;
		width: 100%;
		padding: 0 40px 0 10px;
		font-family: Rubik, sans-serif;
		font-size: 16px;
		font-weight: 600;
		line-height: 60px;
		color: #010101;
	}

	.site-nav__list > li:hover > a,
	.site-nav__list > li:hover > .site-nav__dropdown-toggle {
		color: #010101;
	}

	.site-nav__list > li.is-open > a,
	.site-nav__list > li.is-open > .site-nav__dropdown-toggle {
		color: var(--medimart-green);
	}

	/* Live indicator: 16px triangle floated right of the 60px row. */
	.site-nav__list > li > .site-nav__dropdown-toggle {
		position: absolute;
		top: 22px;
		right: 10px;
		width: 16px;
		height: 16px;
		margin: 0;
		color: #010101;
	}

	.site-nav__list > li > .site-nav__dropdown-toggle svg {
		width: 16px;
		height: 16px;
	}

	/*
	 * Children: Roboto 14px on a 35px line, same 10px inset, plain white
	 * (live) -- no card, no border, no tint.
	 */
	.site-nav__list .sub-menu {
		display: none;
		position: static;
		width: auto;
		padding: 0 0 10px;
		border: none;
		border-radius: 0;
		background: #fff;
	}

	.site-nav__list > li > .sub-menu::before {
		display: none;
	}

	.site-nav__list .menu-item-has-children.is-open > .sub-menu {
		display: block;
	}

	.site-nav__list .sub-menu > li {
		display: block;
		border-radius: 0;
		background: none;
	}

	.site-nav__list .sub-menu > li:hover,
	.site-nav__list .sub-menu > li.is-open {
		background: none;
	}

	.site-nav__list .sub-menu a {
		padding: 0 40px 0 10px;
		font-size: 14px;
		font-weight: 400;
		line-height: 35px;
		white-space: normal;
	}

	.site-nav__list .sub-menu > li.menu-item-has-children > a {
		padding-right: 40px;
	}

	.site-nav__list .sub-menu > li > .site-nav__dropdown-toggle {
		position: absolute;
		top: 10px;
		right: 10px;
		margin: 0;
	}

	.site-nav__list .sub-menu > li.is-open > .site-nav__dropdown-toggle svg {
		transform: rotate(90deg);
	}

	/* Third level stacks inline, indented one more step. */
	.site-nav__list .sub-menu .sub-menu {
		padding: 0 0 0 10px;
	}

	/* ----- phone / checkout row ----- */

	.site-nav__actions {
		gap: 12px;
	}

	/* Confirmed against the live site's own mobile phone-pill CSS. */
	.site-nav__phone {
		padding: 7px 10px;
		font-size: 0.875rem;
	}

	.site-nav__checkout {
		padding: 8px 18px;
		font-size: 14px;
	}

	/* ----- Shop All inside the panel ----- */

	.shop-all-flyout {
		position: static;
		width: auto;
		max-width: none;
		border: none;
		border-radius: 0;
		box-shadow: none;
		overflow: visible;
	}

	.shop-all-flyout__desktop {
		display: none;
	}

	.shop-all-flyout__mobile {
		display: block;
	}

	.shop-all-flyout__mobile-item {
		border-bottom: 2px solid #e8e8e8;
	}

	/*
	 * Live: a 60px flex row, 10px padding/gap, the category icon inside a
	 * bordered rounded tile, bold Rubik label, triangle at the far right.
	 */
	.shop-all-flyout__mobile-toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		padding: 10px;
		font-family: Rubik, sans-serif;
		font-size: 18px;
		font-weight: 600;
		color: #010101;
	}

	.shop-all-flyout__mobile-toggle img {
		flex: 0 0 auto;
		box-sizing: content-box;
		width: 36px;
		height: 36px;
		padding: 6px;
		border: 1px solid var(--medimart-border);
		border-radius: 8px;
		background: #fff;
		object-fit: contain;
	}

	.shop-all-flyout__mobile-toggle > span:first-of-type {
		flex: 1 1 auto;
		text-align: left;
	}

	.shop-all-flyout__mobile-arrow {
		display: inline-flex;
		align-items: center;
		color: #010101;
	}

	.shop-all-flyout__mobile-toggle[aria-expanded="true"] {
		color: var(--medimart-green);
	}

	/*
	 * The expanded category is the same grey `.main-get-cat` panel as
	 * desktop (live: rgba(217,217,217,0.3), 10px radius, 15px padding);
	 * 20px here so the rows don't crowd the rounded edge. On mobile the
	 * panel markup has no .shop-all-flyout__subcategories wrapper (the
	 * shared medimart_render_shop_all_panel() output sits straight inside
	 * .shop-all-flyout__mobile-panel), so the card styling lives on the
	 * mobile panel itself.
	 */
	.shop-all-flyout__mobile-panel {
		margin: 0 10px 15px;
		background: rgba(217, 217, 217, 0.3);
		border-radius: 10px;
		padding: 20px;
	}

	.shop-all-flyout__mobile-panel .shop-all-flyout__panel-header {
		padding-bottom: 15px;
		margin-bottom: 10px;
	}

	.shop-all-flyout__mobile-panel .shop-all-flyout__panel-header h3 {
		font-family: Rubik, sans-serif;
		font-size: 18px;
	}

	.shop-all-flyout__mobile-panel .shop-all-flyout__explore-all {
		font-family: Rubik, sans-serif;
		font-weight: 600;
	}

	.shop-all-flyout__mobile-panel .shop-all-flyout__subcategory-list li a {
		padding: 12px 5px;
	}

	.shop-all-flyout__mobile-panel .shop-all-flyout__quote-box {
		padding: 15px 20px;
		gap: 12px;
	}

	.shop-all-flyout__mobile-panel .shop-all-flyout__quote-box h4 {
		margin-bottom: 6px;
	}

	.shop-all-flyout__mobile-panel .shop-all-flyout__quote-box p {
		font-size: 12px;
	}
}

/* ==========================================================================
   Added-to-cart popup (assets/js/added-to-cart-popup.js)
   ========================================================================== */

/*
 * Live's Porto confirmation after a product card's quick add-to-cart,
 * matched to its computed styles 2026-10-07: a 300px white box centred
 * across the page about a third of the way down, a 4px green top border,
 * grey 13px message, the product name in green, and two green buttons
 * side by side. The full-screen overlay is transparent, as live; it only
 * catches the click that closes the box.
 */
.added-to-cart-popup {
	position: fixed;
	inset: 0;
	z-index: 20002;
}

.added-to-cart-popup[hidden] {
	display: none;
}

.added-to-cart-popup__overlay {
	position: absolute;
	inset: 0;
}

.added-to-cart-popup__box {
	position: relative;
	width: 300px;
	max-width: calc(100vw - 32px);
	margin: 35vh auto 0;
	padding: 20px 14px;
	border-top: 4px solid #589f3c;
	background: #fff;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	text-align: center;
	font-family: "Open Sans", sans-serif;
}

.added-to-cart-popup__msg {
	margin: 0;
	font-size: 13px;
	line-height: 18.2px;
	color: #7b858a;
}

.added-to-cart-popup__name {
	margin: 5px 0 20px;
	font-size: 14px;
	line-height: 19.6px;
	color: #589f3c;
}

.added-to-cart-popup__buttons {
	display: flex;
	justify-content: center;
	gap: 4px;
}

.added-to-cart-popup__button {
	flex: 0 0 133px;
	box-sizing: border-box;
	height: 45px;
	margin: 0;
	padding: 8.5px 0;
	border: 1px solid #589f3c;
	border-radius: 0;
	background: #589f3c;
	color: #fff;
	font-family: inherit;
	font-size: 17.6px;
	font-weight: 400;
	line-height: 26.4px;
	text-decoration: none;
	cursor: pointer;
}

.added-to-cart-popup__button:hover,
.added-to-cart-popup__button:focus-visible {
	background: #4a8a32;
	border-color: #4a8a32;
	color: #fff;
}