/**
 * Header — netmeds.com layout.
 *
 * Metrics below are the reference's own, read off its stylesheet rather than
 * eyeballed: row 1 is 72px tall with 48px side padding, the search pill is
 * 40px high on a 24px radius, the category bar is 48px, and the whole thing
 * switches to the mobile tree at 992px.
 *
 * The reference ships two separate DOM trees and hides one. We have one tree —
 * Shoptimizer's — so the same two layouts are reached by reordering a single
 * flex row instead. That is the one structural departure, and it is the reason
 * there is no duplicated markup to keep in sync.
 *
 * Colours are split, and the split is not cosmetic. Shoptimizer prints its
 * Customizer (Kirki) CSS inline in wp_head, AFTER this file's <link>, with
 * selectors like `body:not(.header-4) .site-header` — so any background rule
 * written here for those elements loses on both specificity and order, however
 * it is phrased. The three band colours therefore live in
 * Appearance → Customize, and only there:
 *
 *   row 1 background   → Colors → Header → Header background
 *   row 2 band         → Colors → Navigation → Navigation background
 *   drawer (≤992px)    → Colors → Header → Mobile navigation background
 *   row 1 height       → Header → Layout → Header Top/Bottom Padding
 *
 * What stays here is everything Kirki has no field for: layout, the search
 * pill, the icon slots, the category-bar item styling. The foreground custom
 * properties below are read by those rules and must be kept in step with the
 * Customizer values by hand.
 */

/* On body, not :root, so a scheme class on body reaches these (see the
   note at the top of home.css). */
body {
	/* Mirrors of the Customizer values above — used by foreground rules only.
	   Changing these does NOT move the bands; change them in the Customizer. */
	--pct-header-bg: var(--pct-brand);
	--pct-header-fg: #fff;
	--pct-nav-bg: var(--pct-brand-deep);
	--pct-nav-active: var(--pct-brand-ink);
	--pct-search-fg: rgba(0, 0, 0, 0.65);
	--pct-header-h: 64px;
	--pct-nav-h: 40px;
}

/* Breadcrumbs: the parent sets nowrap, so on a phone a deep trail was cut
   off at the edge. One scrollable line instead, scrollbar hidden. */
@media (max-width: 768px) {
	.woocommerce-breadcrumb,
	.pctmart-crumbs-alt {
		display: flex;
		flex-wrap: nowrap;
		max-width: 100%;
		overflow-x: auto;
		white-space: nowrap;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.woocommerce-breadcrumb::-webkit-scrollbar,
	.pctmart-crumbs-alt::-webkit-scrollbar {
		display: none;
	}

	.woocommerce-breadcrumb > *,
	.pctmart-crumbs-alt > * {
		flex: 0 0 auto;
	}

	.pctmart-crumbs-alt {
		gap: 0 14px;
	}
}

/* Search focus dims the page (header.js adds the class and the backdrop). */
.pctmart-search-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(12, 17, 29, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, visibility 0.18s;
}

body.pctmart-search-focus .pctmart-search-backdrop {
	opacity: 1;
	visibility: visible;
}

/* The header sits above the dim; only the page behind it darkens. */
body.pctmart-search-focus .site-header {
	position: relative;
	z-index: 110;
}

/* --------------------------------------------------------------------------
   1. Row 1 — logo · search · account · cart
   -------------------------------------------------------------------------- */

/* .site-header background: Customizer → Colors → Header → Header background. */

.site-header .main-header {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: var(--pct-header-h);
	padding-top: 10px;
	padding-bottom: 10px;
}

.site-header .site-branding {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin: 0;
}

/* Height comes from the Customizer (General → Logo, and General → Mobile
   header), which prints it inline after this file. No cap here, so those
   two sliders stay the only place the logo size is set. */
.site-header .site-branding img {
	width: auto;
}

/* A text-only site title has to read against the teal, since the parent
   colours it for a white header. */
.site-header .site-branding .site-title a,
.site-header .site-branding .beta-logo a {
	color: var(--pct-header-fg);
}

/* The search pill. Fixed at the reference's 395px on desktop rather than
   greedy-flex, which is what keeps the logo and icons where the reference
   puts them instead of drifting with viewport width. */
.site-header .pctmart-search {
	flex: 0 1 395px;
	margin: 0 0 0 auto;
	padding: 0;
}

.pctmart-search-form {
	position: relative;
	display: flex;
	align-items: center;
	height: 40px;
	margin: 0;
}

/* Two classes, because the parent styles input[type="search"] with its own
   border, radius and shadow, and at one class that won: the field drew a
   square box inside the rounded pill. */
.pctmart-search-form .pctmart-search-input {
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 42px 0 44px;
	border: none;
	border-radius: 25rem;
	background: #fff;
	color: var(--pct-search-fg);
	font-size: 14px;
	line-height: 20px;
	box-shadow: none;
}

.pctmart-search-input::placeholder {
	color: var(--pct-search-fg);
	opacity: 1;
}

/* A visible ring matters more here than on a white header — the field sits on
   a saturated background where a default outline disappears. */
.pctmart-search-input:focus {
	outline: 2px solid var(--pct-nav-active);
	outline-offset: 2px;
}

.pctmart-search-icon {
	position: absolute;
	left: 14px;
	display: flex;
	color: var(--pct-search-fg);
	pointer-events: none;
}

.pctmart-search-clear {
	position: absolute;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.08);
	color: var(--pct-search-fg);
	cursor: pointer;
}

.pctmart-search-clear[hidden] {
	display: none;
}

/* Cart and account, hard right of the search, on the reference's 8px gap.
   Both need un-picking from the parent first: it positions them absolutely for
   its own mobile header, and it renders the cart twice — hiding the row-1 copy
   above 993px in favour of one in the category bar. We drop the category-bar
   copy in inc/header.php and bring this one back at every width, because the
   reference keeps a single cart beside the search. */
.site-header .shoptimizer-myaccount,
.site-header .site-header-cart {
	position: static;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	width: auto;
	height: auto;
	margin: 0 0 0 8px;
}

/* Beats `@media (min-width:993px) .site-header .site-header-cart {display:none}`
   on load order — this file is linked after the parent's stylesheet. */
.site-header .shoptimizer-cart {
	display: flex;
	align-items: center;
}

/* The parent hides the account control while it is the branding's next
   sibling. Hooking it at priority 55 already moves it out of that position;
   this keeps it visible if anything ever puts it back. */
.site-header .site-branding + .shoptimizer-myaccount {
	display: flex;
}

.site-header .shoptimizer-myaccount {
	margin-left: 8px;
}

/* Both controls take the bottom bar's shape — icon over a small label — so the
   header and the mobile nav read as one language.

   The cart keeps the parent's markup deliberately: its AJAX fragment replaces
   `div.shoptimizer-cart` wholesale on add-to-cart, so any markup we rendered
   inside it would be reverted the first time someone added something. That
   makes the subtotal the label line rather than the word "Cart" — it is the
   text the parent gives us, and it is the more useful of the two here. */
.site-header .site-header-cart a.cart-contents,
.site-header .pctmart-account > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 62px;
	padding: 4px 6px;
	color: var(--pct-header-fg);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}

.site-header .pctmart-cart-icon,
.pctmart-account-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	order: 1;
}

.site-header .pctmart-cart-icon svg,
.pctmart-account-icon svg {
	display: block;
	width: 22px;
	height: 22px;
	stroke: currentColor;
}

.site-header .pctmart-cart-label,
.pctmart-account-label {
	order: 2;
	font-size: 11px;
	font-weight: 500;
}

/* The count rides the icon, as it does in the bottom bar. */
.site-header .pctmart-cart-count {
	position: absolute;
	top: -6px;
	left: 12px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border: 0;
	border-radius: 8px;
	background: var(--pct-nav-active);
	color: var(--pct-header-fg);
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
}

/* An empty cart gets no badge, as in the bottom bar. */
.site-header .pctmart-cart-count.is-empty {
	display: none;
}

/* Child combinators on the account control from here on: its dropdown links
   sit inside the same wrapper, and a descendant selector painted them white
   on the panel's white background. */
.site-header .shoptimizer-myaccount > a,
.site-header .site-header-cart a {
	display: flex;
	align-items: center;
	color: var(--pct-header-fg);
}

.site-header .site-header-cart .count,
.site-header .site-header-cart .cart-contents-count {
	background: var(--pct-nav-active);
	color: var(--pct-header-fg);
}

/* --------------------------------------------------------------------------
   2. Row 2 — category bar
   The reference caps this row at 1230px and centres it, independently of the
   full-width tinted band behind it.
   -------------------------------------------------------------------------- */

/* Band colour: Customizer → Colors → Navigation → Navigation background.
   The bar is lifted off the page by a soft shadow and finished with a brand
   red rule, which is what separates a white bar from the white page. */
.col-full-nav {
	border: 0;
	border-bottom: 3px solid var(--pct-brand);
	box-shadow: 0 2px 10px rgba(16, 24, 40, 0.1);
}

.col-full-nav .main-navigation,
.col-full-nav .primary-navigation {
	max-width: 1230px;
	margin: 0 auto;
}

.col-full-nav .menu > li > a {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: var(--pct-nav-h);
	padding: 0 14px;
	border-bottom: 3px solid transparent;
	/* The Customizer prints a 60px line-height for these links; the bar is
	   40px now, so the line-height follows the same variable. */
	line-height: var(--pct-nav-h);
	color: var(--pct-nav-fg);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

.col-full-nav .menu > li > a:hover,
.col-full-nav .menu > li.current-menu-item > a,
.col-full-nav .menu > li.current-menu-ancestor > a,
.col-full-nav .menu > li.current-product-ancestor > a {
	border-bottom-color: var(--pct-nav-hover);
	color: var(--pct-nav-hover);
}

.col-full-nav .menu .pctmart-menu-icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

/* One row on desktop.

   The top-level categories are "nolink" items, so the parent renders them as
   spans: the link rule above never reaches them, and they kept the parent's
   15px/600 with a caret each. Nine of those come to about 1,300px against a
   1,170px row, so the last two wrapped onto a line of their own.

   Here the row becomes a single flex line spread edge to edge, the labels
   take the same 14px/500 as the link rule above, and the caret goes: every
   item opens a panel, so it marked nothing. Between 1,100px and about 1,230px
   the type steps down with the viewport so the row still fits; below 1,100px
   (small laptops) it wraps into two centred rows instead of shrinking past
   12px. Under 993px the parent's drawer takes over and none of this applies. */
@media (min-width: 993px) {
	/* The nav is a flex item with auto margins, so it shrink-wraps to its
	   content; once the labels fit, that left them bunched mid-row. */
	.col-full-nav .main-navigation {
		flex: 1 1 auto;
	}

	/* Five items now, so they sit together on the left rather than being
	   spread across the row. */
	.col-full-nav .menu-primary-menu-container > ul.menu {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 4px;
	}

	.col-full-nav .menu-primary-menu-container > ul.menu > li {
		flex: 0 0 auto;
	}

	/* 76 is the width of the nine labels per pixel of font size, plus slack;
	   200px is the row's side padding, the gaps and the scrollbar. */
	.col-full-nav .menu-primary-menu-container > ul.menu > li.nolink > span {
		color: var(--pct-nav-fg);
		font-size: clamp(12px, calc((100vw - 200px) / 76), 14px);
		font-weight: 500;
		white-space: nowrap;
	}

	.col-full-nav .menu-primary-menu-container > ul.menu > li.nolink > span::after {
		content: none;
	}
}

@media (min-width: 993px) and (max-width: 1099px) {
	.col-full-nav .menu-primary-menu-container > ul.menu {
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 20px;
	}
}

/* Mega-menu panel. The reference drops a light card with rounded bottom
   corners straight under the bar. */
.col-full-nav .menu > li .sub-menu-wrapper {
	border-radius: 0 0 16px 16px;
	background: #f5f5f5;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24);
}

.col-full-nav .menu > li .sub-menu a {
	color: var(--pct-search-fg);
	font-size: 14px;
}

.col-full-nav .menu > li .sub-menu a:hover {
	color: var(--pct-nav-active);
}

/* --------------------------------------------------------------------------
   3. Below 992px — the reference's mobile header

   The parent's mobile header is not a flex row and cannot be made into one
   without a fight: .site-branding is width:100% and height:70px, the
   hamburger is absolutely positioned inside it, and the cart and account are
   absolutely positioned over it. Laying our own items into that row either
   overlaps the logo or wraps below the header onto the page.

   So we stop fighting it. Row 1 stays the parent's branding band, cart and
   account move to the bottom bar (inc/mobile-nav.php), and the search becomes
   a real second row instead of the parent's toggle-to-reveal panel.
   -------------------------------------------------------------------------- */

@media (max-width: 992px) {
	.site-header .main-header {
		display: block;
		padding: 0;
	}

	/* The account control lives in the bottom bar at this width. The cart
	   stays in the header as an icon beside the search toggle: it opens the
	   side drawer (parent cart-drawer.js), while the bottom bar's cart goes
	   to the cart page. */
	.site-header .shoptimizer-myaccount {
		display: none;
	}

	.site-header .main-header {
		position: relative;
	}

	/* Same slot geometry as the parent's search toggle (44px wide, the 70px
	   band tall), one slot to its left. */
	/* The parent places the cart at top:21px for its own icon; the extra
	   class outranks it so the slot spans the whole 70px band. */
	.site-header .main-header .site-header-cart {
		position: absolute;
		top: 0;
		right: 50px;
		z-index: 6;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 70px;
		margin: 0;
	}

	.site-header .main-header .site-header-cart a.cart-contents {
		min-width: 0;
		padding: 4px;
	}

	.site-header .main-header .site-header-cart .pctmart-cart-label {
		display: none;
	}

	.site-header .main-header .site-header-cart .pctmart-cart-icon svg {
		width: 24px;
		height: 24px;
	}

	/* The field gets a row of its own under the logo, but only once the search
	   icon is tapped. The icon is the parent's (Customizer → Header → Mobile
	   search position → Toggle); its JS sets body.m-search-toggled, and this
	   keys off the same class. Hidden rather than removed, so the suggestions
	   panel and header.js find the same form either way. */
	/* A band in the header colour under the logo row, so the field reads
	   as part of the header rather than floating over the page. */
	.site-header .site-search.pctmart-search {
		position: relative;
		z-index: 5;
		display: none;
		width: 100%;
		max-width: none;
		height: auto;
		margin: 0;
		padding: 4px 16px 14px;
		background: var(--pct-header-bg);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	}

	/* Suggestions run edge to edge under the band. */
	.site-header .pctmart-search-form .pctmart-suggest {
		top: calc(100% + 14px);
		left: -16px;
		width: 100vw;
		max-height: min(70vh, 520px);
		border-width: 0 0 1px;
		border-radius: 0 0 14px 14px;
	}

	/* An empty thumbnail box is noise on a narrow row. */
	.pctmart-suggest-thumb.is-empty {
		display: none;
	}

	.pctmart-suggest-item {
		padding: 10px 12px;
	}

	body.m-search-toggled .site-header .site-search.pctmart-search {
		display: block;
	}

	/* The parent sits the icon 60px in from the right, leaving room for a cart
	   that lives in the bottom bar here, and colours it for a white header. */
	.site-header .mobile-search-toggle {
		right: 6px;
		width: 44px;
		justify-content: center;
		color: var(--pct-header-fg);
	}

	.site-header .mobile-search-toggle svg {
		width: 24px;
		height: 24px;
	}

	.site-header .pctmart-search-form {
		height: 44px;
	}

	.site-header .pctmart-search-input {
		height: 44px;
		font-size: 16px; /* iOS zooms the page on focus below 16px. */
	}

	/* The hamburger is the parent's, absolutely placed in the branding band;
	   it only needs to read on teal. */
	.site-header .menu-toggle .bar {
		background: var(--pct-header-fg);
	}

	.site-header .menu-toggle .bar-text {
		color: var(--pct-header-fg);
	}

	.site-header .site-branding .site-title a {
		color: var(--pct-header-fg);
	}

	/* Off-canvas drawer: the band colour belongs to the bar, not the drawer,
	   and the drawer is a white sheet in the reference. Set in the Customizer
	   as Colors → Header → Mobile navigation background. */

	.col-full-nav .menu > li > a {
		min-height: 48px;
		border-bottom: 1px solid #ececec;
		color: inherit;
	}

	.col-full-nav .menu > li > a:hover,
	.col-full-nav .menu > li.current-menu-item > a {
		border-bottom-color: #ececec;
		color: var(--pct-nav-bg);
	}

	/* In the drawer the panel is a plain stacked list: there is no room for
	   columns, and the parent already handles the expand/collapse. */
	.col-full-nav .pctmart-mega-list,
	.col-full-nav .sub-menu {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 4px 0 8px 16px;
	}

	.col-full-nav .pctmart-mega-all {
		margin-top: 4px;
	}
}

/* --------------------------------------------------------------------------
   7. Mobile bottom bar

   Rendered on every page and hidden above the breakpoint, because PHP cannot
   see the viewport. Fixed to the bottom, clear of the iOS home indicator.
   -------------------------------------------------------------------------- */

.pctmart-mobile-nav {
	display: none;
}

@media (max-width: 992px) {
	.pctmart-mobile-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 60;
		display: block;
		width: 100%;
		border-top: 1px solid #e4e7ec;
		background: #fff;
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	.pctmart-mobile-nav-list {
		display: flex;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.pctmart-mobile-nav-item {
		flex: 1 1 0;
		margin: 0;
		list-style: none;
	}

	.pctmart-mobile-nav-link {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		/* 56px keeps the whole cell a comfortable target, not just the icon. */
		min-height: 56px;
		padding: 6px 2px;
		color: var(--pct-muted, #667085);
		font-size: 11px;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
	}

	.pctmart-mobile-nav-link.is-current {
		color: var(--pct-nav-bg);
		font-weight: 600;
	}

	.pctmart-mobile-nav-icon {
		position: relative;
		display: flex;
	}

	.pctmart-mobile-nav-count {
		position: absolute;
		top: -6px;
		left: 12px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 8px;
		background: var(--pct-nav-active, var(--pct-brand-ink));
		color: #fff;
		font-size: 10px;
		font-weight: 600;
		line-height: 16px;
		text-align: center;
	}

	.pctmart-mobile-nav-count.is-empty {
		display: none;
	}

	/* Keep the bar off the last of the page, and off anything the parent
	   already sticks to the bottom. */
	body {
		padding-bottom: 56px;
	}

	body .shoptimizer-sticky-add-to-cart {
		bottom: 56px;
	}
}

/* Reduced motion: the parent animates the drawer; honour the preference. */
@media (prefers-reduced-motion: reduce) {
	.col-full-nav,
	.col-full-nav .menu > li .sub-menu-wrapper {
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   4. Account control
   Icon over label on desktop, icon only below 992px where the row is tight —
   the same collapse the reference makes.
   -------------------------------------------------------------------------- */

.site-header .pctmart-account > a {
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

.pctmart-account-icon {
	display: flex;
	flex: 0 0 auto;
}

.pctmart-account-label {
	max-width: 11ch;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   5. Category dropdowns

   The panel markup is the parent's own mega-menu shape, so the parent's
   positioning, hover intent and open/close animation all apply already. These
   rules only style the list inside it.
   -------------------------------------------------------------------------- */

.col-full-nav .pctmart-mega-list,
.col-full-nav .sub-menu {
	display: grid;
	/* auto-fit rather than a fixed four, because a submenu built by hand in
	   Appearance → Menus is usually two or three items, and a fixed grid
	   would strand them across the full width. */
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 4px 24px;
	margin: 0;
	padding: 20px 24px;
	list-style: none;
}

.col-full-nav .pctmart-mega-item,
.col-full-nav .sub-menu > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.col-full-nav .pctmart-mega-item > a,
.col-full-nav .sub-menu > li > a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 10px;
	border-radius: 6px;
	color: var(--pct-search-fg);
	font-size: 14px;
	line-height: 1.35;
	text-decoration: none;
}

.col-full-nav .pctmart-mega-item > a:hover,
.col-full-nav .pctmart-mega-item > a:focus,
.col-full-nav .sub-menu > li > a:hover,
.col-full-nav .sub-menu > li > a:focus {
	background: color-mix(in srgb, var(--pct-brand-deep) 8%, transparent);
	color: var(--pct-nav-active);
}

.pctmart-mega-meta {
	color: var(--pct-muted, #667085);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* A sub-item with a category icon: the icon sits in its own column beside
   the name and count, which stay stacked. */
.col-full-nav .pctmart-mega-item > a:has(.pctmart-mega-icon),
.col-full-nav .sub-menu > li > a:has(.pctmart-mega-icon) {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	column-gap: 10px;
	align-items: center;
}

.col-full-nav .pctmart-mega-icon {
	grid-row: 1 / span 2;
	width: 18px;
	height: 18px;
	color: #111;
}

/* The last row is the way out of the panel, so it reads as an action rather
   than as one more product. */
.col-full-nav .pctmart-mega-all {
	grid-column: 1 / -1;
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid #e4e7ec;
}

.col-full-nav .pctmart-mega-all > a {
	flex-direction: row;
	align-items: center;
	color: var(--pct-nav-bg);
	font-weight: 600;
}

@media (max-width: 992px) {
	/* In the drawer the panel is a plain stacked list: there is no room for
	   columns, and the parent already handles the expand/collapse. */
	.col-full-nav .pctmart-mega-list {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 4px 0 8px 16px;
	}

	.col-full-nav .pctmart-mega-all {
		margin-top: 4px;
	}
}

/* --------------------------------------------------------------------------
   5b. All-categories mega menu (inc/menu-panels.php)

   Three columns: the groups as a vertical list on the left, the open group's
   categories in the middle, popular products on the right. header.js shows
   one pane at a time; without it every pane stacks in the middle column.
   -------------------------------------------------------------------------- */

/* The parent lays a full-width submenu out as a flex row with fixed-width
   columns; the selector here outranks that so the grid wins. */
.main-navigation ul li.full-width.pctmart-megamenu > .sub-menu-wrapper > .container > ul.sub-menu.pctmart-allcats {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr) 320px;
	gap: 0;
	width: auto;
	padding: 0;
	background: #fff;
}

.main-navigation ul li.full-width.pctmart-megamenu > .sub-menu-wrapper > .container > ul.sub-menu > li {
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* Left column: the groups. */
.col-full-nav .pctmart-allcats-nav {
	padding: 18px 0;
	background: #f5f6f8;
	border-right: 1px solid #e4e7ec;
	border-radius: 0 0 0 16px;
}

.col-full-nav .pctmart-allcats-tabs,
.col-full-nav .pctmart-allcats-list,
.col-full-nav .pctmart-allcats-products {
	margin: 0;
	padding: 0;
	list-style: none;
}

.col-full-nav .pctmart-allcats-tabs > li,
.col-full-nav .pctmart-allcats-item,
.col-full-nav .pctmart-allcats-product {
	margin: 0;
	list-style: none;
}

.col-full-nav .pctmart-allcats-tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	padding: 10px 18px 10px 26px;
	border: 0;
	background: transparent;
	color: #1d2327;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

.col-full-nav .pctmart-allcats-tab svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: #98a2b3;
}

.col-full-nav .pctmart-allcats-tab:hover,
.col-full-nav .pctmart-allcats-tab:focus-visible,
.col-full-nav .pctmart-allcats-tab.is-active {
	background: #fff;
	color: var(--pct-brand-deep);
	box-shadow: inset 3px 0 0 var(--pct-brand-deep);
}

.col-full-nav .pctmart-allcats-tab.is-active svg {
	color: var(--pct-brand-deep);
}

/* Middle column: the open group's categories. */
.col-full-nav .pctmart-allcats-panes {
	padding: 28px 32px 32px;
}

.col-full-nav .pctmart-allcats.is-scripted .pctmart-allcats-pane {
	display: none;
}

.col-full-nav .pctmart-allcats.is-scripted .pctmart-allcats-pane.is-active {
	display: block;
}

.col-full-nav .pctmart-allcats-title {
	display: block;
	margin: 0 0 14px;
	color: #0c111d;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.col-full-nav .pctmart-allcats-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 24px;
}

.col-full-nav .pctmart-allcats-item > a {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	align-items: center;
	column-gap: 12px;
	min-height: 52px;
	padding: 6px 10px;
	border-radius: 8px;
	color: #1d2327;
	text-decoration: none;
}

.col-full-nav .pctmart-allcats-item > a:hover,
.col-full-nav .pctmart-allcats-item > a:focus {
	background: #f5f6f8;
	color: var(--pct-brand-deep);
}

/* The icon sits in a small tinted circle, the name and count stack beside. */
.col-full-nav .pctmart-allcats-item .pctmart-mega-icon {
	box-sizing: content-box;
	width: 18px;
	height: 18px;
	padding: 9px;
	border-radius: 50%;
	background: #f2f4f7;
	color: #111;
}

.col-full-nav .pctmart-allcats-item-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.col-full-nav .pctmart-allcats-item-name {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

.col-full-nav .pctmart-allcats-item-count {
	color: #667085;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* Right column: product cards. */
.col-full-nav .pctmart-allcats-popular {
	padding: 28px 28px 30px;
	border-left: 1px solid #e4e7ec;
	background: #fafbfc;
	border-radius: 0 0 16px 0;
}

.col-full-nav .pctmart-allcats-products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.col-full-nav .pctmart-allcats-product > a {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 10px;
	border: 1px solid #e4e7ec;
	border-radius: 10px;
	background: #fff;
	color: #1d2327;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.col-full-nav .pctmart-allcats-product > a:hover,
.col-full-nav .pctmart-allcats-product > a:focus {
	border-color: #111;
	box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
}

.col-full-nav .pctmart-allcats-product-media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 84px;
	margin-bottom: 8px;
}

.col-full-nav .pctmart-allcats-product-img {
	width: 84px;
	height: 84px;
	object-fit: contain;
}

.col-full-nav .pctmart-allcats-product-name {
	display: -webkit-box;
	overflow: hidden;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.col-full-nav .pctmart-allcats-product-price {
	margin-top: 4px;
	color: #344054;
	font-size: 13px;
}

.col-full-nav .pctmart-allcats-product-price del {
	margin-right: 4px;
	color: #98a2b3;
}

.col-full-nav .pctmart-allcats-product-price ins {
	color: var(--pct-brand-deep);
	font-weight: 600;
	text-decoration: none;
}

/* The best seller takes the full width of the column with its badge. */
.col-full-nav .pctmart-allcats-product.is-best {
	grid-column: 1 / -1;
}

.col-full-nav .pctmart-allcats-product.is-best > a {
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.col-full-nav .pctmart-allcats-product.is-best .pctmart-allcats-product-media {
	flex: 0 0 auto;
	margin-bottom: 0;
}

.col-full-nav .pctmart-allcats-product.is-best .pctmart-allcats-product-name {
	font-size: 14px;
}

.col-full-nav .pctmart-allcats-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 2px 8px;
	border-radius: 25rem;
	background: var(--pct-brand-deep);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

@media (max-width: 1230px) and (min-width: 993px) {
	.main-navigation ul li.full-width.pctmart-megamenu > .sub-menu-wrapper > .container > ul.sub-menu.pctmart-allcats {
		grid-template-columns: 200px minmax(0, 1fr) 260px;
	}

	.col-full-nav .pctmart-allcats-list {
		grid-template-columns: 1fr;
	}
}

/* In the drawer the three columns give way to a plain accordion of groups
   (native details/summary, so it needs no script). */
.main-navigation ul li.full-width.pctmart-megamenu > .sub-menu-wrapper > .container > ul.sub-menu > li.pctmart-allcats-mobile {
	display: none;
}

@media (max-width: 992px) {
	.main-navigation ul li.full-width.pctmart-megamenu > .sub-menu-wrapper > .container > ul.sub-menu.pctmart-allcats {
		display: block;
		padding: 0 0 8px;
		background: transparent;
	}

	.main-navigation ul li.full-width.pctmart-megamenu > .sub-menu-wrapper > .container > ul.sub-menu > li.pctmart-allcats-nav,
	.main-navigation ul li.full-width.pctmart-megamenu > .sub-menu-wrapper > .container > ul.sub-menu > li.pctmart-allcats-panes,
	.main-navigation ul li.full-width.pctmart-megamenu > .sub-menu-wrapper > .container > ul.sub-menu > li.pctmart-allcats-popular {
		display: none;
	}

	.main-navigation ul li.full-width.pctmart-megamenu > .sub-menu-wrapper > .container > ul.sub-menu > li.pctmart-allcats-mobile {
		display: block;
	}

	.col-full-nav .pctmart-allcats-mobile details {
		border-bottom: 1px solid #ececec;
	}

	.col-full-nav .pctmart-allcats-mobile summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 48px;
		padding: 8px 0 8px 16px;
		color: #1d2327;
		font-size: 15px;
		font-weight: 500;
		list-style: none;
		cursor: pointer;
	}

	.col-full-nav .pctmart-allcats-mobile summary::-webkit-details-marker {
		display: none;
	}

	.col-full-nav .pctmart-allcats-mobile summary svg {
		flex: 0 0 auto;
		width: 18px;
		height: 18px;
		margin-right: 4px;
		color: #667085;
		transition: transform 0.15s ease;
	}

	.col-full-nav .pctmart-allcats-mobile details[open] > summary svg {
		transform: rotate(90deg);
	}

	.col-full-nav .pctmart-allcats-mobile .pctmart-allcats-list {
		display: block;
		padding: 0 0 8px 16px;
	}

	/* The parent's drawer makes every link a block; these rows are icon
	   beside name, 44px tall, in the drawer's own ink. */
	.main-navigation ul li.full-width.pctmart-megamenu .pctmart-allcats-mobile .pctmart-allcats-item > a {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 44px;
		padding: 4px 0;
		border-radius: 0;
		color: #1d2327;
		font-size: 15px;
	}

	.main-navigation ul li.full-width.pctmart-megamenu .pctmart-allcats-mobile .pctmart-mega-icon {
		box-sizing: content-box;
		flex: 0 0 auto;
		width: 18px;
		height: 18px;
		padding: 7px;
		border-radius: 50%;
		background: #f2f4f7;
	}

	.main-navigation ul li.full-width.pctmart-megamenu .pctmart-allcats-mobile .pctmart-allcats-item-text {
		display: block;
	}
}

/* --------------------------------------------------------------------------
   6. Announcement strip

   Above the header, on a light band so the offer in it is the first thing
   read. The promotion (free shipping, any coupon switched on for the bar) is
   pinned on the left and never rotates; the general messages rotate beside
   it. The track is a scroll-snap row: with JavaScript off it is still
   scrollable and every message is reachable, it simply does not rotate.
   -------------------------------------------------------------------------- */

.pctmart-announce {
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	background: var(--pct-announce-bg);
	color: var(--pct-announce-fg);
}

/* The pinned promotion: bold, in the band's accent, with a truck. */
.pctmart-announce-promo {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	min-width: 0;
	color: var(--pct-announce-promo);
	font-weight: 700;
}

/* Several promotions rotate in a fixed slot; one needs no slot. */
.pctmart-announce-promo.pctmart-slider {
	width: min(360px, 60vw);
}

.pctmart-announce-promo-icon {
	display: flex;
	flex: 0 0 auto;
}

.pctmart-announce-promo-track {
	flex: 1 1 auto;
	min-width: 0;
}

.pctmart-announce-promo .pctmart-announce-slide {
	justify-content: flex-start;
	padding: 6px 0;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
}

.pctmart-announce-promo .pctmart-announce-slide a {
	text-decoration: none;
}

.pctmart-announce-promo .pctmart-announce-slide a:hover,
.pctmart-announce-promo .pctmart-announce-slide a:focus-visible {
	text-decoration: underline;
}

/* A thin rule keeps the pinned offer and the rotating line apart. Basis 0,
   so the rotating messages take only what is left and never squeeze the
   offer (their track is as wide as every message laid side by side). */
.pctmart-announce-promo + .pctmart-announce-slider {
	flex: 1 1 0;
	padding-left: 16px;
	border-left: 1px solid rgba(0, 0, 0, 0.12);
}

/* The rotating messages take the room they need; the shipping note sits at
   the end and does not move, because it is context rather than a message. */
.pctmart-announce-inner {
	box-sizing: content-box;
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 1170px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 2.617924em;
	padding-left: 2.617924em;
}

.pctmart-announce-slider {
	flex: 1 1 auto;
	min-width: 0;
}

.pctmart-announce-ship {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	margin: 0;
	color: inherit;
	font-size: 12px;
	white-space: nowrap;
}

.pctmart-announce-pin {
	display: flex;
}

/* The line links to that country's terms on the shipping page. */
.pctmart-announce-ship-link {
	display: flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	text-decoration: none;
}

.pctmart-announce-ship-link:hover,
.pctmart-announce-ship-link:focus-visible {
	color: var(--pct-announce-promo);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Flags come in their country's own proportions, so height is fixed and
   width follows. The ring keeps a pale flag visible on the light bar. */
.pctmart-announce-flag {
	display: block;
	width: auto;
	height: 13px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Widgets dropped into the bar are paragraphs by default; flatten them so a
   message is one line rather than a block with its own margins. */
.pctmart-announce-slide p {
	margin: 0;
}

.pctmart-announce-slide ul,
.pctmart-announce-slide ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 768px) {
	.pctmart-announce-inner {
		padding-right: 1em;
		padding-left: 1em;
	}

	.pctmart-announce-ship {
		font-size: 11px;
	}

	/* The offer and the shipping line are what fit on a phone; the general
	   messages give way. */
	.pctmart-announce-promo + .pctmart-announce-slider {
		display: none;
	}

	.pctmart-announce-promo {
		flex: 1 1 auto;
		font-size: 13px;
	}

	.pctmart-announce-promo .pctmart-announce-slide {
		white-space: normal;
	}
}

@media (max-width: 420px) {
	/* Only the narrowest screens cannot fit both; the rotating message wins. */
	.pctmart-announce-ship {
		display: none;
	}
}

.pctmart-announce-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.pctmart-announce-track::-webkit-scrollbar {
	display: none;
}

.pctmart-announce-slide {
	display: flex;
	flex: 0 0 100%;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 6px 16px;
	scroll-snap-align: center;
	font-size: 13px;
	line-height: 1.35;
	text-align: center;
}

.pctmart-announce-slide a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   8. Search suggestions

   One panel style for both fields: the header pill and the home hero share
   .pctmart-search-form, so they share this. The form is already
   position:relative, which is what the panel anchors to.
   -------------------------------------------------------------------------- */

.pctmart-suggest {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 120;
	width: 100%;
	max-height: min(70vh, 460px);
	overflow-y: auto;
	padding: 6px;
	border: 1px solid #e4e7ec;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16);
	color: #1d2327;
	text-align: left;
	overscroll-behavior: contain;
}

.pctmart-suggest[hidden] {
	display: none;
}

.pctmart-suggest-group {
	padding: 8px 10px 4px;
	color: #667085;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pctmart-suggest-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	color: inherit;
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none;
}

/* One highlight, driven by JS, so hovering and arrowing cannot disagree. */
.pctmart-suggest-item.is-active {
	background: var(--pct-brand-tint-soft);
	color: inherit;
}

.pctmart-suggest-thumb {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 6px;
	background: #f4f6f8;
	object-fit: cover;
}

.pctmart-suggest-text {
	flex: 1 1 auto;
	min-width: 0;
}

.pctmart-suggest-name {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The matched run, so it is obvious why a row is in the list. */
.pctmart-suggest-name mark {
	padding: 0;
	background: transparent;
	color: var(--pct-brand-deep);
	font-weight: 600;
}

.pctmart-suggest-oos {
	display: block;
	color: #b42318;
	font-size: 11px;
}

.pctmart-suggest-meta {
	flex: 0 0 auto;
	color: #667085;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pctmart-suggest-cat .pctmart-suggest-name {
	font-weight: 500;
}

.pctmart-suggest-empty {
	padding: 16px 10px;
	color: #667085;
	font-size: 14px;
	text-align: center;
}

.pctmart-suggest-all {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 10px;
	border: 0;
	border-top: 1px solid #e4e7ec;
	background: transparent;
	color: var(--pct-brand-deep);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}

.pctmart-suggest-all:hover,
.pctmart-suggest-all:focus {
	color: var(--pct-brand-ink);
}

/* On a narrow screen the header pill is nearly full width, so the panel is
   too; let it use the room rather than sitting in a 16px gutter. */
@media (max-width: 600px) {
	.pctmart-suggest {
		max-height: min(60vh, 380px);
	}

	.pctmart-suggest-meta {
		font-size: 12px;
	}
}

/* --------------------------------------------------------------------------
   9. Account dropdown

   The trigger stays a link to the account page. This is the panel on top of
   it, shown on hover, on focus, and on tap where there is no hover.
   -------------------------------------------------------------------------- */

.pctmart-account.has-menu {
	position: relative;
}

.pctmart-account-menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 130;
	min-width: 190px;
	padding: 6px;
	border: 1px solid #e4e7ec;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 12px 28px rgba(16, 24, 40, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

.pctmart-account.is-open .pctmart-account-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.pctmart-account-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pctmart-account-menu li {
	margin: 0;
	list-style: none;
}

/* Prefixed with .site-header so the parent's header link colours, which
   reach every link in the header, cannot outrank the panel. */
.site-header .pctmart-account-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 6px;
	color: #344054;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
}

.site-header .pctmart-account-menu a:hover,
.site-header .pctmart-account-menu a:focus {
	background: var(--pct-brand-tint-soft);
	color: #1d2327;
}

.pctmart-account-menu-out {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid #e4e7ec;
}

.site-header .pctmart-account-menu-out a {
	color: #b42318;
}

@media (prefers-reduced-motion: reduce) {
	.pctmart-account-menu {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   10. Drawer account links

   Log in, orders, tracking and support at the foot of the mobile drawer
   (inc/mobile-nav.php). Rendered at every width for the same caching reason
   as the bottom bar, and hidden above the breakpoint.
   -------------------------------------------------------------------------- */

.pctmart-drawer-account {
	display: none;
}

@media (max-width: 992px) {
	.pctmart-drawer-account {
		display: block;
		margin-top: 20px;
		padding-top: 16px;
		border-top: 1px solid #ececec;
	}

	.pctmart-drawer-account-title {
		margin: 0 0 4px;
		color: var(--pct-muted, #667085);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.pctmart-drawer-account-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.pctmart-drawer-account-list li {
		margin: 0;
		list-style: none;
	}

	/* Same row height and divider as the category links above. */
	.pctmart-drawer-account-link {
		display: flex;
		align-items: center;
		min-height: 48px;
		border-bottom: 1px solid #ececec;
		color: inherit;
		font-size: 15px;
		text-decoration: none;
	}

	.pctmart-drawer-account-list li:last-child .pctmart-drawer-account-link {
		border-bottom: 0;
	}

	.pctmart-drawer-account-link:hover,
	.pctmart-drawer-account-link:focus {
		color: var(--pct-nav-bg);
	}

	.pctmart-drawer-account-link.is-logout {
		color: #b42318;
	}
}