/* Site header (template-parts/header/header-wrapper.php), ported from
   pimpmyacc-design/catalog.html. Loaded on every page, so it carries its own
   tokens instead of relying on base.css. */

.pma-header {
	--pma-purple: #7141cc;
	--pma-ink: #282337;
	--pma-muted: #756d83;
	--pma-line: #eae5f0;
	--pma-soft: #f7f4fc;
	background: #fff;
	color: var(--pma-ink);
	font-family: Arial, Helvetica, sans-serif;
}
.pma-header a { color: var(--pma-ink); text-decoration: none; }
.pma-header a:focus-visible,
.pma-header summary:focus-visible { outline: 3px solid var(--pma-purple); outline-offset: 3px; border-radius: 3px; }
.pma-header .pma-icon { width: 1em; height: 1em; flex-shrink: 0; }

/* Top row: logo, cart, checkout */
.pma-header-top {
	max-width: 1110px; margin: 0 auto; padding: 21px 34px; /* lines up with page content */
	display: flex; align-items: center; gap: 20px;
}
.pma-header .pma-header-logo {
	display: flex; align-items: center; gap: 9px;
	font-size: 24px; font-weight: 500; letter-spacing: -1px; line-height: 1;
}
.pma-header .pma-logo-mark { width: 40px; height: 40px; margin: -8px 0 -6px; } /* the crown pokes above the text line */
.pma-header-tools { display: flex; align-items: center; gap: 20px; margin-left: auto; font-size: 12px; }
.pma-header .pma-header-cart { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.pma-header .pma-header-cart:hover { color: var(--pma-purple); }
.pma-header-cart .pma-icon { font-size: 16px; color: var(--pma-purple); }
.pma-header-cart .amount { color: inherit; font-weight: inherit; }
.pma-header .pma-header-checkout {
	padding: 11px 17px; border-radius: 7px;
	background: var(--pma-purple); color: #fff; font-weight: 700; line-height: 1.2;
}
.pma-header .pma-header-checkout:hover { filter: brightness(.93); color: #fff; }

/* Network menu */
.pma-nav {
	display: flex; justify-content: center; flex-wrap: wrap; gap: 0 26px;
	padding: 0 28px;
	background: var(--pma-soft); border-block: 1px solid var(--pma-line);
}
.pma-nav-menu { position: relative; }
.pma-header .pma-nav-item {
	display: flex; align-items: center; gap: 6px;
	padding: 16px 0; list-style: none; cursor: pointer;
	font-size: 12px; line-height: 1.3; color: var(--pma-ink);
}
.pma-nav-item::-webkit-details-marker { display: none; }
.pma-nav-item .pma-icon { font-size: 15px; color: var(--pma-purple); }
.pma-header .pma-nav-item:hover,
.pma-nav-menu[open] > .pma-nav-item,
.pma-header .pma-nav-item.is-current { color: var(--pma-purple); }
.pma-nav-chevron { margin-left: 2px; font-size: 11px; line-height: 1; color: var(--pma-muted); transform: translateY(-3px); }

.pma-nav-dropdown {
	position: absolute; z-index: 40; top: 100%; left: 0;
	min-width: 210px; padding: 6px;
	background: #fff; border: 1px solid var(--pma-line); border-radius: 9px;
	box-shadow: 0 8px 24px #28233712;
}
.pma-nav-dropdown.is-flipped { left: auto; right: 0; }
.pma-header .pma-nav-dropdown a {
	display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: 5px;
	font-size: 12px; line-height: 1.3; white-space: nowrap;
}
.pma-header .pma-nav-dropdown a:hover,
.pma-header .pma-nav-dropdown a[aria-current] { background: var(--pma-soft); color: var(--pma-purple); }
.pma-header .pma-nav-dropdown .pma-nav-all { color: var(--pma-purple); font-weight: 700; }
.pma-nav-dropdown .pma-icon { font-size: 15px; color: var(--pma-purple); }
/* Logos are solid shapes and read larger than the outline icons next to them. */
.pma-header .pma-brand { font-size: 14px; }

@media (max-width: 780px) {
	.pma-header-top { padding: 19px 22px; }
	.pma-nav { gap: 0 17px; padding: 4px 20px; }
	.pma-header .pma-nav-item { padding: 10px 0; }
}

@media (max-width: 600px) {
	.pma-header-cart-label { display: none; }
	.pma-header-tools { gap: 13px; }
	.pma-header .pma-header-logo { font-size: 21px; }
	.pma-nav { justify-content: flex-start; gap: 0 18px; }
	.pma-header .pma-nav-item { font-size: 11px; }
}

@media (max-width: 380px) {
	.pma-header-top { padding: 17px 16px; gap: 8px; }
	.pma-header .pma-header-logo { font-size: 20px; gap: 5px; }
	.pma-header .pma-logo-mark { width: 34px; height: 34px; }
	.pma-header .pma-header-checkout { padding: 10px; font-size: 11px; }
	.pma-nav { gap: 0 13px; padding: 7px 16px; }
}