/**
 * Header component — utility top bar, main header, mega menu, search panel,
 * mobile drawer, backdrop and toast.
 *
 * Loaded globally. Mobile-first: base rules target small screens, min-width
 * queries scale up to the desktop layout (design breakpoints: 901px search
 * panel, 981px header/drawer switch — literal because CSS media queries cannot
 * read custom properties).
 *
 * Structural sizes (icon dimensions, element widths/heights, sticky offsets)
 * are literal px; colours, spacing, radius, shadow and font-size come from
 * tokens only.
 *
 * @package Bozpo_Custom
 */

/* ---------------------------------------------------------------------------
 * Shared icon + accessibility utilities (header is the first component loaded).
 * ------------------------------------------------------------------------- */
svg.ic {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.skip-link.screen-reader-text {
	left: var(--space-6);
	top: var(--space-6);
	z-index: 100;
}

.skip-link.screen-reader-text:focus {
	position: fixed;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--space-9) var(--space-16);
	clip: auto;
	background: var(--surface);
	color: var(--color-primary);
	border-radius: var(--radius-8);
	box-shadow: var(--shadow);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Utility top bar (desktop only).
 * ------------------------------------------------------------------------- */
.topbar {
	display: none;
	background: var(--surface-soft2);
	border-bottom: 1px solid var(--color-border);
	font-size: var(--text-13);
	color: var(--color-muted);
}

.topbar .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 38px;
}

.topbar a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	padding: 0 var(--space-9);
	color: var(--color-muted);
}

.topbar a:hover {
	color: var(--color-text);
}

.topbar .left {
	font-weight: 600;
	color: var(--color-text);
}

.topbar__nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.topbar__menu {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.topbar .sale,
.topbar__menu li.sale > a {
	color: var(--on-primary);
	background: var(--color-primary);
	font-weight: 700;
	border-radius: var(--radius-6);
	padding: var(--space-2) var(--space-10);
	margin-left: var(--space-6);
}

/* ---------------------------------------------------------------------------
 * Main header.
 * ------------------------------------------------------------------------- */
header.main {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--surface);
	border-bottom: 1px solid var(--color-border);
}

header.main .wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-11) var(--space-12);
	height: auto;
	padding: var(--space-11) var(--wrap-pad);
}

.logo {
	order: 2;
	margin-right: auto;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-26);
	letter-spacing: 0.5px;
	line-height: 1;
	color: var(--color-text);
	white-space: nowrap;
}

.logo b {
	color: var(--color-primary);
}

.logo small {
	display: none;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-8-5);
	letter-spacing: 2px;
	color: var(--color-muted);
}

.custom-logo-link {
	order: 2;
	margin-right: auto;
	display: inline-flex;
	align-items: center;
}

.custom-logo {
	width: auto;
	height: auto;
	max-height: 44px;
}

.cat-btn {
	order: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--space-9);
	padding: var(--space-12) var(--space-13);
	background: var(--color-primary);
	color: var(--on-primary);
	font-weight: 600;
	font-size: var(--text-14);
	border: 0;
	border-radius: var(--radius-9);
	white-space: nowrap;
}

.cat-btn:hover {
	background: var(--color-primary-strong);
}

.cat-btn span,
.cat-btn .chev {
	display: none;
}

.cat-btn .chev {
	width: 16px;
	height: 16px;
	transition: transform 0.2s;
}

.cat-btn[aria-expanded="true"] .chev {
	transform: rotate(180deg);
}

header .search {
	order: 4;
	flex: 1;
	flex-basis: 100%;
	min-width: 100%;
	display: flex;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-8);
	overflow: hidden;
}

header .search:focus-within {
	border-color: var(--color-primary);
}

header .search input {
	flex: 1;
	min-width: 0;
	padding: var(--space-11) var(--space-14);
	border: 0;
	background: transparent;
	font-size: var(--text-14);
	outline: none;
}

/* FiboSearch fills the whole search bar (full width). */
header .search .dgwt-wcas-search-wrapp {
	flex: 1;
	width: 100%;
	min-width: 0;
}

header .search .dgwt-wcas-sf-wrapp {
	border: 0;
}

/* Hide FiboSearch's own submit button + magnifier icon — no magnifier wanted. */
header .search .dgwt-wcas-search-submit,
header .search .dgwt-wcas-ico-magnifier,
header .search .dgwt-wcas-search-icon {
	display: none;
}

/* Full-width input — reclaim the space the submit button used to occupy. */
header .search .dgwt-wcas-search-input {
	width: 100%;
	box-sizing: border-box;
	padding-right: var(--space-14);
}

.h-actions {
	order: 3;
	display: flex;
	align-items: center;
	gap: var(--space-6);
}

.icon-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-8);
	border: 0;
	background: transparent;
	border-radius: var(--radius-8);
	font-size: var(--text-13);
	font-weight: 500;
	color: var(--color-text);
}

.icon-btn:hover {
	background: var(--surface-soft);
}

.icon-btn span {
	display: none;
}

.icon-btn .badge {
	min-width: 18px;
	height: 18px;
	padding: 0 var(--space-5);
	display: grid;
	place-items: center;
	background: var(--color-primary);
	color: var(--on-primary);
	font-size: var(--text-11);
	font-weight: 700;
	border-radius: var(--radius-pill);
}

.icon-btn .badge[hidden] {
	display: none;
}

/* Wooptima minicart button slot in the header actions. The app root ships an
 * inline width:100% which we neutralise so the button sizes to its content. */
.h-minicart {
	display: inline-flex;
	align-items: center;
}

.h-minicart #wooptima-minicart {
	width: auto !important;
}

/* ---------------------------------------------------------------------------
 * Backdrop shared by mega, drawer and search panel.
 * ------------------------------------------------------------------------- */
.backdrop {
	position: fixed;
	inset: 0;
	z-index: 38;
	background: var(--overlay);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s;
}

.backdrop.show {
	opacity: 1;
	visibility: visible;
}

/* ---------------------------------------------------------------------------
 * Search suggestions panel. Base = mobile (single column).
 * ------------------------------------------------------------------------- */
.search-panel {
	position: fixed;
	top: var(--header-h, 106px);
	left: 0;
	width: 100%;
	max-height: 62vh;
	overflow-y: auto;
	z-index: 46;
	background: var(--surface);
	border-top: 1px solid var(--color-border);
	box-shadow: var(--shadow-panel);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}

.search-panel.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sp-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
	padding: var(--space-44) var(--space-18) var(--space-24);
}

.sp-side {
	display: none;
}

.sp-main {
	order: 1;
}

.sp-cats {
	order: 2;
	margin-top: var(--space-6);
	padding-top: var(--space-18);
	border-top: 1px solid var(--color-border);
}

.sp-side h5,
.sp-main h5,
.sp-cats h5 {
	margin: 0 0 var(--space-9);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-12);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-muted);
}

.sp-side h5.mt {
	margin-top: var(--space-16);
}

.sp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
}

.sp-chip {
	padding: var(--space-5) var(--space-11);
	background: var(--surface-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-size: var(--text-12-5);
	font-weight: 600;
	color: var(--color-text);
}

.sp-chip:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.sp-brands {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-brands li {
	padding: var(--space-3) 0;
}

.sp-brands a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--text-13-5);
	font-weight: 600;
	color: var(--color-text);
}

.sp-brands a svg {
	width: 13px;
	height: 13px;
	color: var(--color-primary);
}

.sp-brands a:hover {
	color: var(--color-primary);
}

.sp-prod {
	display: flex;
	flex-direction: column;
}

.sp-row {
	display: grid;
	grid-template-columns: 50px 1fr auto;
	grid-template-areas:
		"ph info info"
		"ph pp add";
	gap: var(--space-6) var(--space-12);
	align-items: center;
	padding: var(--space-8) 0;
	border-top: 1px solid var(--color-border);
}

.sp-row:first-child {
	border-top: 0;
	padding-top: 0;
}

.sp-row .ph {
	grid-area: ph;
	align-self: start;
	width: 40px;
	height: 40px;
	padding: var(--space-5);
	display: grid;
	place-items: center;
	background: var(--surface-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-9);
	flex: none;
}

.sp-row .ph svg {
	width: 100%;
	height: 100%;
}

.sp-row .info {
	grid-area: info;
	min-width: 0;
}

.sp-row .info .nm {
	font-size: var(--text-13-5);
	font-weight: 600;
	line-height: var(--leading-tight);
}

.sp-row .info .meta {
	margin-top: var(--space-1);
	font-size: var(--text-12);
	color: var(--color-muted);
}

.sp-row .pp {
	grid-area: pp;
	justify-self: start;
	font-size: var(--text-14);
	font-weight: 700;
	color: var(--color-primary);
	white-space: nowrap;
}

.sp-row .miniadd {
	grid-area: add;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: var(--space-5);
	padding: var(--space-6) var(--space-11);
	border: 1.5px solid var(--color-primary);
	background: var(--surface);
	color: var(--color-primary);
	font-size: var(--text-12);
	font-weight: 700;
	border-radius: var(--radius-8);
	flex: none;
}

.sp-row .miniadd svg {
	width: 15px;
	height: 15px;
}

.sp-row .miniadd:hover {
	background: var(--color-primary);
	color: var(--on-primary);
}

.sp-all {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	margin-top: var(--space-12);
	color: var(--color-primary);
	font-size: var(--text-13-5);
	font-weight: 600;
}

.sp-all svg {
	width: 15px;
	height: 15px;
}

.sp-all:hover {
	text-decoration: underline;
}

.sp-cats-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.sp-x {
	position: absolute;
	top: var(--space-12);
	right: var(--space-16);
	z-index: 3;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 0;
	background: var(--surface-soft);
	color: var(--color-text);
	border-radius: var(--radius-9);
	flex: none;
}

.sp-x:hover {
	background: var(--color-border);
}

.sp-catlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-catlist a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-8) 0;
	border-bottom: 1px solid var(--color-border);
	font-size: var(--text-13-5);
	font-weight: 600;
	color: var(--color-text);
}

.sp-catlist a:hover {
	color: var(--color-primary);
}

.sp-catlist .cnt {
	font-size: var(--text-12-5);
	font-weight: 500;
	color: var(--color-muted);
}

@media (min-width: 901px) {
	.search-panel {
		max-height: 50vh;
	}

	.sp-grid {
		grid-template-columns: 210px minmax(0, 1fr) 230px;
		gap: var(--space-26);
		padding: var(--space-16) var(--space-22) var(--space-18);
	}

	.sp-side {
		display: block;
	}

	.sp-cats {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.sp-row {
		display: flex;
		grid-template-columns: none;
		grid-template-areas: none;
		gap: var(--space-12);
	}

	.sp-row .ph {
		align-self: center;
	}

	.sp-x {
		position: static;
	}
}

/* ---------------------------------------------------------------------------
 * Mega menu (desktop full-screen overlay).
 * ------------------------------------------------------------------------- */
.mega {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	z-index: 60;
	overflow-y: auto;
	background: var(--surface);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0.2s;
}

.mega.show {
	opacity: 1;
	visibility: visible;
}

.mega::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 24 24' fill='none' stroke='%23e8491d' stroke-width='1'%3E%3Cpath d='M12 2 L20 5 V11 C20 16 16 19 12 22 C8 19 4 16 4 11 V5 Z'/%3E%3C/svg%3E");
	background-size: 52px 52px;
	opacity: 0.035;
	pointer-events: none;
}

.mega-head {
	position: sticky;
	top: 0;
	z-index: 3;
	background: var(--surface);
	border-bottom: 1px solid var(--color-border);
}

/* Higher specificity than `.mega .wrap` (defined later) so the head keeps its padding. */
.mega .mega-head .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-16) var(--space-22);
}

.mega-head .logo {
	order: 0;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--text-26);
}

.mega-x {
	width: 50px;
	height: 50px;
	display: grid;
	place-items: center;
	border: 0;
	background: var(--surface-soft);
	color: var(--color-text);
	border-radius: var(--radius-12);
	transition: background 0.15s, color 0.15s, transform 0.2s;
	flex: none;
}

.mega-x svg {
	width: 26px;
	height: 26px;
}

.mega-x:hover {
	background: var(--color-primary);
	color: var(--on-primary);
	transform: rotate(90deg);
}

.mega .wrap {
	position: relative;
	z-index: 1;
	padding: var(--space-30) var(--space-22) var(--space-40);
}

.mega-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-30) var(--space-34);
}

.mblock {
	margin-bottom: var(--space-26);
}

.mblock:last-child {
	margin-bottom: 0;
}

.mblock .badge-tag {
	display: inline-block;
	margin-bottom: var(--space-8);
	padding: var(--space-3) var(--space-9);
	font-size: var(--text-11);
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	border-radius: var(--radius-5);
}

.badge-tag.hot {
	background: var(--c-accent);
	color: var(--on-primary);
}

.badge-tag.rec {
	background: var(--color-primary);
	color: var(--on-primary);
}

.mblock h5 {
	position: relative;
	margin: 0 0 var(--space-12);
	padding-bottom: var(--space-8);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-14);
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--color-primary);
}

.mblock h5::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 42px;
	height: var(--space-2);
	background: var(--color-primary);
	border-radius: var(--radius-2);
}

.mblock ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mblock li {
	margin-bottom: var(--space-9);
}

.mblock a {
	display: flex;
	align-items: center;
	gap: var(--space-9);
	font-size: var(--text-14);
	line-height: 1.3;
	color: var(--c-ink-soft);
}

.mblock a svg {
	width: 14px;
	height: 14px;
	color: var(--c-mega-arrow);
	flex: none;
	transition: color 0.12s, transform 0.12s;
}

.mblock a:hover {
	color: var(--color-primary);
	font-weight: 600;
}

.mblock a:hover svg {
	color: var(--color-primary);
	transform: translateX(2px);
}

.mega-promo {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-26);
	margin-top: var(--space-6);
	padding-top: var(--space-22);
	border-top: 1px solid var(--color-border);
}

.promo-acc {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	padding: var(--space-16) var(--space-18);
	background: var(--surface-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-12);
}

.promo-acc .av {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	background: var(--surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-circle);
	color: var(--color-muted);
	flex: none;
}

.promo-acc .av svg {
	width: 22px;
	height: 22px;
}

.promo-acc b {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-17);
}

.promo-acc p {
	margin: var(--space-2) 0 0;
	max-width: 34ch;
	font-size: var(--text-12-5);
	color: var(--color-muted);
}

.promo-acc .cta {
	margin-left: auto;
	flex: none;
	padding: var(--space-10) var(--space-16);
	background: var(--color-primary);
	color: var(--on-primary);
	border: 0;
	font-size: var(--text-13);
	font-weight: 600;
	border-radius: var(--radius-8);
	white-space: nowrap;
}

.promo-acc .cta:hover {
	background: var(--color-primary-strong);
}

.promo-rec .rec-h {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	margin-bottom: var(--space-12);
	font-size: var(--text-12);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-muted);
}

.promo-rec .rec-h b {
	color: var(--color-text);
	font-weight: 700;
}

.promo-rec .rec-h svg {
	width: 16px;
	height: 16px;
	color: var(--c-accent);
}

.rec-item {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	padding: var(--space-7) 0;
}

.rec-item .ph {
	width: 42px;
	height: 42px;
	padding: var(--space-6);
	display: grid;
	place-items: center;
	background: var(--surface-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-8);
	flex: none;
}

.rec-item .ph svg {
	width: 100%;
	height: 100%;
}

.rec-item .nm {
	font-size: var(--text-13-5);
	font-weight: 500;
	line-height: var(--leading-tight);
}

.rec-item .pp {
	font-size: var(--text-12-5);
	font-weight: 700;
	color: var(--color-primary);
}

.rec-item .plus {
	margin-left: auto;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 1px solid var(--color-border);
	background: var(--surface);
	color: var(--color-primary);
	font-size: var(--text-18);
	border-radius: var(--radius-8);
	flex: none;
}

.rec-item .plus:hover {
	background: var(--color-primary);
	color: var(--on-primary);
	border-color: var(--color-primary);
}

@media (min-width: 981px) {
	.mega-cols {
		grid-template-columns: repeat(4, 1fr);
	}

	.mega-promo {
		grid-template-columns: 1.1fr 1fr;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile drawer (off-canvas menu).
 * ------------------------------------------------------------------------- */
.drawer {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 88%;
	max-width: 380px;
	z-index: 60;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	box-shadow: var(--shadow-drawer);
	transform: translateX(-100%);
	transition: transform 0.25s ease;
}

.drawer.show {
	transform: translateX(0);
}

.drawer-head {
	display: flex;
	align-items: center;
	gap: var(--space-14);
	padding: var(--space-14) var(--space-18);
	border-bottom: 1px solid var(--color-border);
}

.drawer-head .logo {
	order: 0;
	margin: 0;
	font-size: var(--text-24);
}

.drawer-head .x {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 0;
	background: var(--surface-soft);
	color: var(--color-text);
	border-radius: var(--radius-9);
}

.drawer-tabs {
	display: flex;
	gap: var(--space-8);
	padding: var(--space-12) var(--space-18);
	border-bottom: 1px solid var(--color-border);
}

.dtab {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	padding: var(--space-9) var(--space-8);
	border: 1px solid var(--color-border);
	background: var(--surface);
	border-radius: var(--radius-10);
	font-size: var(--text-13-5);
	font-weight: 600;
	color: var(--color-muted);
	transition: all 0.15s;
}

.dtab svg {
	width: 18px;
	height: 18px;
}

.dtab.active {
	background: var(--color-primary);
	color: var(--on-primary);
	border-color: var(--color-primary);
}

.drawer-scroll {
	flex: 1;
	overflow-y: auto;
}

.drawer-body {
	padding: var(--space-6) 0 var(--space-24);
}

.drawer-pages {
	display: none;
	padding: var(--space-10) 0 var(--space-24);
}

.drawer.pages-active .drawer-body {
	display: none;
}

.drawer.pages-active .drawer-pages {
	display: block;
}

.dpage {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	padding: var(--space-13) var(--space-18);
	border-bottom: 1px solid var(--color-border);
	font-size: var(--text-14-5);
	font-weight: 600;
	color: var(--color-text);
}

.dpage svg {
	width: 16px;
	height: 16px;
	color: var(--color-muted);
	flex: none;
}

.dpage:active {
	color: var(--color-primary);
}

.dpage.sale,
.dpage.sale svg {
	color: var(--color-primary);
}

.dpages-contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding: var(--space-18);
}

.dpages-contact a,
.dpages-contact div {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	font-size: var(--text-14);
	color: var(--c-ink-soft);
}

.dpages-contact svg {
	width: 16px;
	height: 16px;
	color: var(--color-primary);
	flex: none;
}

.dacc {
	border-bottom: 1px solid var(--color-border);
}

.dacc-head {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--space-10);
	padding: var(--space-15) var(--space-18);
	background: none;
	border: 0;
	font-size: var(--text-15);
	font-weight: 600;
	color: var(--color-text);
	text-align: left;
}

.dacc-head .dbadge {
	padding: var(--space-2) var(--space-6);
	font-size: var(--text-10);
	font-weight: 700;
	text-transform: uppercase;
	border-radius: var(--radius-4);
	color: var(--on-primary);
}

.dacc-head .dbadge.hot {
	background: var(--c-accent);
}

.dacc-head .dbadge.rec {
	background: var(--color-primary);
}

.dacc-head .chev {
	margin-left: auto;
	color: var(--color-muted);
	transition: transform 0.2s;
}

.dacc.open .dacc-head {
	color: var(--color-primary);
}

.dacc.open .dacc-head .chev {
	transform: rotate(180deg);
}

.dacc-body {
	display: none;
	padding: 0 var(--space-18) var(--space-12);
}

.dacc.open .dacc-body {
	display: block;
}

.dacc-body a {
	display: flex;
	align-items: center;
	gap: var(--space-9);
	padding: var(--space-9) 0 var(--space-9) var(--space-26);
	font-size: var(--text-14);
	color: var(--c-ink-soft);
}

.dacc-body a svg {
	width: 13px;
	height: 13px;
	color: var(--c-accent);
	flex: none;
}

.dacc-body a:active {
	color: var(--color-primary);
}

.drawer-foot {
	display: flex;
	gap: var(--space-10);
	padding: var(--space-14) var(--space-18);
	border-top: 1px solid var(--color-border);
}

.drawer-foot a {
	flex: 1;
	padding: var(--space-11);
	text-align: center;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-9);
	font-size: var(--text-13);
	font-weight: 600;
	color: var(--color-text);
}

.drawer-foot a.prim {
	background: var(--color-primary);
	color: var(--on-primary);
	border-color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
 * Add-to-cart toast.
 * ------------------------------------------------------------------------- */
.toast {
	position: fixed;
	left: 50%;
	bottom: var(--space-26);
	z-index: 90;
	display: flex;
	align-items: center;
	gap: var(--space-10);
	padding: var(--space-13) var(--space-20);
	background: var(--color-text);
	color: var(--on-primary);
	border-radius: var(--radius-10);
	font-size: var(--text-14);
	font-weight: 500;
	box-shadow: var(--shadow-toast);
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) translateY(20px);
	transition: 0.25s;
}

.toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.toast svg {
	width: 18px;
	height: 18px;
	color: var(--c-ok-bright);
}

/* ---------------------------------------------------------------------------
 * Desktop header layout (single row, top bar visible, labels shown).
 * ------------------------------------------------------------------------- */
@media (min-width: 981px) {
	.topbar {
		display: block;
	}

	header.main .wrap {
		flex-wrap: nowrap;
		gap: var(--space-18);
		height: 68px;
		padding: 0 var(--wrap-pad);
	}

	.logo {
		order: 0;
		margin-right: 0;
		font-size: var(--text-30);
		letter-spacing: 0.5px;
	}

	.logo small {
		display: block;
	}

	.custom-logo-link {
		order: 0;
		margin-right: 0;
	}

	.cat-btn {
		order: 0;
		gap: var(--space-9);
		padding: var(--space-11) var(--space-16);
		border-radius: var(--radius-8);
	}

	.cat-btn span {
		display: inline;
	}

	.cat-btn .chev {
		display: block;
	}

	header .search {
		order: 0;
		flex-basis: auto;
		min-width: 0;
	}

	.h-actions {
		order: 0;
	}

	.icon-btn {
		padding: var(--space-9) var(--space-10);
	}

	.icon-btn span {
		display: inline;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mega,
	.drawer,
	.search-panel,
	.backdrop,
	.toast,
	.cat-btn .chev,
	.dacc-head .chev,
	.mega-x {
		transition: none;
	}
}