/* ==========================================================================
   Header Styles — Figma-exact overrides for Blocksy Customizer gaps
   Task: 86evcm56n
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
	--header-announcement-bg: #F4F4F4;
	--header-nav-bg: #56C5FF;
	--header-category-bg: #C2E9FF;
	--header-search-border: #CACACA;
	--header-search-icon: #06A1F1;
	--header-divider: #85B8CE;
	--header-text: rgba(29, 29, 31, 0.9);
	--header-section-text: #363636;
	/* Shadows removed — user decision: zero shadows on all header elements */
}

/* ---------- Global Header ---------- */
header[data-id="type-1"] {
	box-shadow: none;
	border-bottom: 1px solid #F4F4F4;
}

/* ---------- Top Row (Announcement Bar) ---------- */
header[data-id="type-1"] [data-row="top"] {
	background: var(--header-announcement-bg) !important;
	min-height: 60px;
}

/* Override Blocksy #header [data-row] > div { min-height: var(--height) } which uses --height:50px.
   Need !important to beat #header ID specificity (1,1,1 > 0,4,1). */
header.ct-header[data-id="type-1"] [data-row*="top"] .ct-container {
	min-height: 60px !important;
	align-items: center;
}

header[data-id="type-1"] [data-row="top"] [data-column] {
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
	align-items: center;
}

/* Announcement bar content wrapper */
.header-announcement {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: 'Rubik', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.714;
	color: var(--header-text);
}

.header-announcement svg,
.header-announcement img {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}

.header-announcement .announcement-icon {
	color: #BCBCBC;
}

/* ---------- Testimonial Carousel ---------- */
.header-testimonial-carousel {
	display: flex;
	align-items: center;
	gap: 20px;
	font-family: 'Rubik', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.714;
	color: var(--header-text);
}

.header-testimonial-carousel .carousel-prev,
.header-testimonial-carousel .carousel-next {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Carousel arrow SVGs — Figma: 12x12 chevrons */
.header-testimonial-carousel .carousel-prev svg,
.header-testimonial-carousel .carousel-next svg {
	width: 12px;
	height: 12px;
	color: var(--header-text);
}

/* Legacy img fallback */
.header-testimonial-carousel .carousel-prev img,
.header-testimonial-carousel .carousel-next img {
	width: 12px;
	height: 12px;
	opacity: 0.9;
}

.header-testimonial-carousel .carousel-text {
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 450px;
}

.header-testimonial-carousel .carousel-text a {
	color: var(--header-text);
	text-decoration: none;
}

.header-testimonial-carousel .carousel-text a:hover {
	text-decoration: underline;
}

/* ---------- Search Bar (Top Row) ---------- */
header[data-id="type-1"] [data-row="top"] .dgwt-wcas-search-wrapp {
	max-width: 308px;
}

header[data-id="type-1"] [data-row="top"] .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp {
	background: transparent !important;
	border-radius: 6px;
	padding: 0 !important;
}

header[data-id="type-1"] [data-row="top"] .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	height: 48px;
	background: #FFFFFF !important;
	border: 1px solid #CACACA;
	border-radius: 6px;
	font-family: 'Rubik', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #030712;
	padding: 0 12px 0 40px;
}

header[data-id="type-1"] [data-row="top"] .dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier,
header[data-id="type-1"] [data-row="top"] .dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier-handler {
	color: var(--header-search-icon);
	fill: var(--header-search-icon);
}

header[data-id="type-1"] [data-row="top"] .dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier svg,
header[data-id="type-1"] [data-row="top"] .dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier-handler svg {
	width: 20px;
	height: 20px;
}

/* ---------- Middle Row (Main Navigation) ---------- */
header.ct-header[data-id="type-1"] [data-row*="middle"] {
	min-height: 80px;
}

/* Logo sizing */
header[data-id="type-1"] [data-row="middle"] .site-logo-container img {
	max-width: 236px;
	max-height: 34px;
	width: auto;
	height: auto;
}

/* Nav menu typography */
header[data-id="type-1"] [data-row="middle"] [data-id="menu"] > .menu > li > a {
	font-family: 'Rubik', sans-serif;
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
	color: var(--header-text);
	padding: 12px;
	border-radius: 8px;
	transition: background 0.2s;
}

header[data-id="type-1"] [data-row="middle"] [data-id="menu"] > .menu > li > a:hover {
	color: #1246D5;
}

/* Active state — top-level current-menu-item and current-menu-ancestor: #363636 (Task: 86ew3xnvk) */
header[data-id="type-1"] [data-row="middle"] [data-id="menu"] > .menu > li.current-menu-item > a,
header[data-id="type-1"] [data-row="middle"] [data-id="menu"] > .menu > li.current-menu-ancestor > a {
	color: #363636;
}

/* Active arrow — top-level: fill #363636 to match link color (Task: 86ew3xnvk) */
header[data-id="type-1"] [data-row="middle"] [data-id="menu"] > .menu > li.current-menu-item > a .ct-toggle-dropdown-desktop svg,
header[data-id="type-1"] [data-row="middle"] [data-id="menu"] > .menu > li.current-menu-ancestor > a .ct-toggle-dropdown-desktop svg {
	fill: #363636;
}

/* Nav menu item gap */
header[data-id="type-1"] [data-row="middle"] [data-id="menu"] > .menu {
	gap: 4px;
}

/* Dropdown indicator (chevron) — use Blocksy's native SVG, just size it.
   Hide the ghost button to prevent duplicate arrows. */

/* Hide the ghost button that Blocksy adds after the <a> link (prevents duplicate arrows) */
header[data-id="type-1"] [data-row="middle"] [data-id="menu"] > .menu > li.menu-item-has-children > .ct-toggle-dropdown-desktop-ghost {
	display: none !important;
}

/* Size Blocksy's native dropdown chevron SVG */
header[data-id="type-1"] [data-row="middle"] [data-id="menu"] > .menu > li.menu-item-has-children > a .ct-toggle-dropdown-desktop svg {
	width: 14px;
	height: 14px;
}

/* ---------- Header Icon Area (Figma-exact: 44px tall, 24px gap) ---------- */
header[data-id="type-1"] [data-row="middle"] [data-column="end"] {
	gap: 0;
	align-items: center;
}

/* Override Blocksy's default margin on the text element wrapper.
   The internal .header-icon-divider has margin-right: 11.25px, which together with the
   1.5px divider width + 11.25px margin-left = 24px total gap to the next sibling (account). */
header[data-id="type-1"] [data-row="middle"] .ct-header-text[data-id="ico001"] {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Custom icons container: info | user | (then cart via Blocksy) */
.header-icons-custom {
	display: flex;
	align-items: center;
	gap: 0;
	height: 44px;
}

/* All icon links — 44x44 touch targets centered */
.header-icons-custom a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
}

/* SVG icons inside links */
.header-icons-custom a svg {
	color: var(--header-text);
	flex-shrink: 0;
}

/* Info icon SVG — Figma: 29.33x29.33 visible content. Centered in 44x44 touch target via flex parent. */
.header-icons-custom .info-icon-svg {
	width: 29px;
	height: 29px;
}

/* User icon SVG — 21x24 per Figma */
.header-icons-custom .header-icon-user svg {
	width: 21px;
	height: 24px;
}

/* Info icon wrapper for dropdown positioning */
.header-icon-info-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

/* Info icon — NO hover/active background */
.header-icons-custom .header-icon-info {
	background: none !important;
	border-radius: 0;
	transition: none;
}
.header-icons-custom .header-icon-info:hover,
.header-icons-custom .header-icon-info:active,
.header-icons-custom .header-icon-info:focus {
	background: none !important;
}

/* Vertical divider between icons — Figma: 1px stroke, 21px tall, #CACACA, centered in 24px gap */
.header-icon-divider {
	width: 1px;
	height: 21px;
	background: #CACACA;
	margin: 0 11.5px;
	flex-shrink: 0;
	border: none;
}

/* Info dropdown panel */
.info-dropdown-panel {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 125px;
	max-width: 173px;
	background: #FFFFFF;
	border-radius: 8px;
	box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);
	padding: 24px;
	z-index: 100;
	flex-direction: column;
	gap: 0;
}

/* Click-only toggle — JS adds/removes .info-open class */
.header-icon-info-wrap.info-open .info-dropdown-panel {
	display: flex;
}

.info-dropdown-panel a {
	display: block;
	width: auto !important;
	height: auto !important;
	padding: 6px 0;
	font-family: 'Rubik', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5em;
	color: #363636;
	text-decoration: none;
	border-radius: 6px;
}

.info-dropdown-panel a:hover {
	background: rgba(0, 0, 0, 0.04);
}

/* ---------- Account Element (Blocksy native — login modal + dropdown) ---------- */
/* Override Blocksy's default 10px margin.
   Right margin = 11.25px to create gap between account's ::after divider and cart icon.
   Total gap: 11.25px (margin from account edge to divider) + 1.5px (divider) + 11.25px (margin from divider to cart) = 24px */
header[data-id="type-1"] [data-row="middle"] [data-id="account"] {
	margin: 0 !important;
	margin-right: 24px !important;
	position: relative;
}

/* Account link — 44x44 touch target, centered */
header[data-id="type-1"] [data-row="middle"] [data-id="account"] .ct-account-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
}

/* Account SVG icon — Figma: 21x24 person outline, stroke-based.
   viewBox is 0 0 24 26, scaled to 21x24 to match Figma. Centered in 44x44 touch target. */
header[data-id="type-1"] [data-row="middle"] [data-id="account"] .ct-icon {
	width: 21px !important;
	height: 24px !important;
	color: var(--header-text);
	fill: none;
}

/* Hide label on all viewports (icon only per Figma) */
header[data-id="type-1"] [data-row="middle"] [data-id="account"] .ct-label {
	display: none !important;
}

/* Divider after account (between account and cart) — Figma: 1px, 21px, #CACACA.
   Centered in the 24px margin-right gap: positioned at 11.5px from account's right edge */
header[data-id="type-1"] [data-row="middle"] [data-id="account"]::after {
	content: "";
	position: absolute;
	right: -12.5px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 21px;
	background: #CACACA;
}

/* Cart element — sits after account's divider pseudo-element.
   Left margin accounts for the 1px divider + spacing */
header[data-id="type-1"] [data-row="middle"] [data-id="cart"],
header[data-id="type-1"] [data-row="middle"] .ct-header-cart {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Cart link — 44x44 touch target */
header[data-id="type-1"] [data-row="middle"] [data-id="cart"] .ct-cart-item {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

/* Cart icon container */
header[data-id="type-1"] [data-row="middle"] [data-id="cart"] .ct-icon-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Cart SVG — Figma: 24x22 stroke-based icon. viewBox cropped to content bounds.
   Centered in 44x44 touch target via flex container. */
header[data-id="type-1"] [data-row="middle"] [data-id="cart"] .ct-icon-container svg {
	color: var(--header-text);
	fill: none;
	width: 24px;
	height: 22px;
}

/* Cart badge — Figma: blue circle at upper-right of visible cart strokes.
   Cart SVG is 44x44 viewBox but visible strokes span ~x:10-24, y:11-33.
   Badge should overlap the top-right of the visible icon content, not the container edge.
   Position: top:0 right:0 places it at the 44x44 container edge,
   which aligns with the upper-right of the visible cart strokes. */
header[data-id="type-1"] [data-row="middle"] [data-id="cart"] .ct-icon-container {
	position: relative;
}
header[data-id="type-1"] [data-row="middle"] [data-id="cart"] .ct-dynamic-count-cart {
	position: absolute !important;
	top: -4px !important;
	right: -8px !important;
	left: auto !important;
	bottom: auto !important;
	min-width: 18px;
	height: 18px;
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	border-radius: 50%;
	background: #06A1F1;
	color: #FFFFFF;
	padding: 0 4px;
	box-sizing: border-box;
}

/* Hide cart price text — Figma shows icon only */
header[data-id="type-1"] [data-row="middle"] [data-id="cart"] .ct-label {
	display: none !important;
}

/* Hide screen-reader-text from visual layout */
header[data-id="type-1"] [data-row="middle"] [data-id="cart"] .screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ---------- Account Login Modal ---------- */
/* Blocksy body[data-panel]::before overlay is z-index:9999 — modal must be ABOVE it.
   Same pattern as #offcanvas fix (line 764). Without this, overlay blocks all clicks. */
#account-modal {
	z-index: 10000 !important;
}

/* Hide the top panel-actions bar entirely — close button moves inside modal via JS */
#account-modal .ct-panel-actions {
	display: none !important;
}

/* White modal box — relative positioning context for close button */
#account-modal .ct-account-modal {
	position: relative;
}

/* =============================================
   MEGA MENU DROPDOWN STYLES
   ============================================= */

/* ---------- Base Dropdown Panel ---------- */
@media (min-width: 1000px) {
	[data-id="menu"] > .menu > li.menu-item-has-children > .sub-menu {
		background: #FFFFFF !important;
		border-radius: 8px !important;
		box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12) !important;
		padding: 36px !important;
		border: none !important;
		min-width: 280px;
		list-style: none;
	}

	/* Dropdown link items base style */
	[data-id="menu"] > .menu > li.menu-item-has-children > .sub-menu > li {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	[data-id="menu"] > .menu > li.menu-item-has-children > .sub-menu > li > a {
		display: block;
		padding: 12px 0;
		width: 239px;
		font-family: 'Rubik', sans-serif;
		font-weight: 500;
		font-size: 16px;
		line-height: 0.875em;
		color: var(--header-text);
		text-decoration: none;
		border-radius: 6px;
		transition: background 0.15s;
		white-space: nowrap;
	}

	[data-id="menu"] > .menu > li.menu-item-has-children > .sub-menu > li > a:hover {
		background: rgba(0, 0, 0, 0.04);
	}

	/* Active state — desktop submenu items (Task: 86ew3xnvk) */
	[data-id="menu"] > .menu > li.menu-item-has-children > .sub-menu > li.current-menu-item > a,
	[data-id="menu"] > .menu > li.menu-item-has-children > .sub-menu > li.current-menu-ancestor > a {
		color: #1246D5;
	}

	/* ---------- Section Headers via CSS classes ---------- */
	/* Items with mega-section-header class get a ::before with section title */
	/* flex-wrap ensures the ::before takes full row and link wraps below */

	[data-id="menu"] .sub-menu > li[class*="mega-section-header"] {
		display: flex;
		flex-wrap: wrap;
	}

	/* Section header anchor — hide empty link, keep span label visible (Task: 86ewqx5r5) */
	[data-id="menu"] > .menu > li.menu-item-has-children > .sub-menu > li.mega-section-header > a {
		display: none;
	}

	/* ---------- Section Title Spans (from PHP walker filter) ---------- */
	.mega-section-title {
		display: block;
		width: 100%;
		font-family: 'Rubik', sans-serif;
		font-weight: 300;
		font-size: 14px;
		line-height: 1em;
		text-transform: uppercase;
		color: var(--header-section-text);
		letter-spacing: 0.02em;
		padding: 0 0 12px;
		white-space: nowrap;
	}

	/* Section header items that start a new group get top margin.
	   Specificity must exceed base li rule (0,5,1) — using > .menu > li > .sub-menu > li = 0,5,1 + class */
	[data-id="menu"] > .menu > li > .sub-menu > li.mega-section-header-2,
	[data-id="menu"] > .menu > li > .sub-menu > li.mega-section-header-3,
	[data-id="menu"] > .menu > li > .sub-menu > li.mega-section-header-4 {
		margin-top: 36px;
	}

	/* ---- SOFTWARE Dropdown (single column) ---- */
	/* Specificity must match/exceed base rule [data-id="menu"] > .menu > li.menu-item-has-children > .sub-menu (0,4,1) */
	[data-id="menu"] > .menu > li.mega-software > .sub-menu {
		min-width: 310px;
		left: 50%;
		transform: translateX(-50%);
	}

	/* ---- FREE SOFTWARE TRIALS Dropdown (single column) ---- */
	/* Figma: single column layout with 2 section groups stacked vertically, gap 36px between groups */
	[data-id="menu"] > .menu > li.mega-free-trials > .sub-menu {
		min-width: 362px;
		left: 50%;
		transform: translateX(-50%);
	}

	[data-id="menu"] > .menu > li.mega-free-trials > .sub-menu > li {
		width: auto;
	}

	[data-id="menu"] > .menu > li.mega-free-trials > .sub-menu > li > a {
		width: auto;
	}

	/* ---- SUPPLIES Dropdown (2 columns) ---- */
	/* Col 1 (5 items, grid): Dmax Inkjet Inks section (header+3) + Head Cleaners section (header+1)
	   Col 2 (3 items, absolute): Film Supplies (header+1) + Inkjet Accessories (header+2)
	   Col2 absolutely positioned at left:260px (36px padding + 164px col1 + 60px gap)
	   top values measured: header h=65px, link h=39px, padding-top=36px */
	[data-id="menu"] > .menu > li.mega-supplies > .sub-menu {
		display: grid !important;
		grid-template-columns: 164px;
		min-width: 441px;
		left: 50%;
		transform: translateX(-50%);
	}

	[data-id="menu"] > .menu > li.mega-supplies > .sub-menu > li {
		width: 164px;
	}

	[data-id="menu"] > .menu > li.mega-supplies > .sub-menu > li > a {
		width: 164px;
	}

	/* Col 2 items — absolutely positioned for independent column heights */
	[data-id="menu"] > .menu > li.mega-supplies > .sub-menu > li.mega-section-header-3,
	[data-id="menu"] > .menu > li.mega-supplies > .sub-menu > li.mega-section-header-3 ~ li {
		position: absolute;
		left: 260px;
		width: 145px;
		margin-top: 0 !important;
	}

	[data-id="menu"] > .menu > li.mega-supplies > .sub-menu > li.mega-section-header-3 > a,
	[data-id="menu"] > .menu > li.mega-supplies > .sub-menu > li.mega-section-header-3 ~ li > a {
		width: 145px;
	}

	/* Col 2 vertical positions (padding-top=36px, header h=65px, link h=39px) */
	[data-id="menu"] > .menu > li.mega-supplies > .sub-menu > li.mega-section-header-3 {
		top: 36px;
	}

	[data-id="menu"] > .menu > li.mega-supplies > .sub-menu > li.mega-section-header-4 {
		top: 137px; /* 36 + 65 + 36 */
	}

	[data-id="menu"] > .menu > li.mega-supplies > .sub-menu > li:nth-child(7) {
		top: 202px; /* 36 + 65 + 36 + 65 */
	}

	/* ---- SUPPORT Dropdown (2 columns) ---- */
	/* Column 1: "Support, Self-Help, and Education" section (header + 8 links)
	   Column 2: "Knowledge Base" section (header + 8 links)
	   max-height forces wrap after column 1's last item */
	[data-id="menu"] > .menu > li.mega-support > .sub-menu {
		display: flex !important;
		flex-direction: column;
		flex-wrap: wrap;
		align-content: center;
		gap: 0 60px;
		min-width: 597px;
		max-height: 502px;
		left: 50%;
		transform: translateX(-50%);
	}

	[data-id="menu"] > .menu > li.mega-support > .sub-menu > li {
		width: 265px;
	}

	[data-id="menu"] > .menu > li.mega-support > .sub-menu > li > a {
		width: 265px;
	}

	/* Column 2 items — narrower width to match text content for visual centering */
	[data-id="menu"] > .menu > li.mega-support > .sub-menu > li.mega-section-header-2,
	[data-id="menu"] > .menu > li.mega-support > .sub-menu > li.mega-section-header-2 ~ li {
		width: 200px;
	}

	[data-id="menu"] > .menu > li.mega-support > .sub-menu > li.mega-section-header-2 > a,
	[data-id="menu"] > .menu > li.mega-support > .sub-menu > li.mega-section-header-2 ~ li > a {
		width: 200px;
	}

	/* Column 2 start — reset margin for flex-wrap alignment */
	[data-id="menu"] > .menu > li.mega-support > .sub-menu > li.mega-section-header-2 {
		margin-top: 0 !important;
	}

}

/* =============================================
   DEVICE CONTAINER SWAP (1000px - 1099px)
   At 1000-1099px Blocksy shows desktop container but the nav is too cramped.
   Override Blocksy's main.min.css to show tablet (mobile) layout instead.
   ============================================= */
@media (min-width: 1000px) and (max-width: 1099px) {
	#header [data-device="desktop"] { display: none !important; }
	#header [data-device="mobile"] { display: block !important; }
	#offcanvas [data-device="desktop"] { display: none !important; }
	#offcanvas [data-device="mobile"] { display: block !important; }
}

/* =============================================
   TABLET STYLES (up to 1099px)
   ============================================= */
@media (max-width: 1099px) {
	/* Category navigation bar — Figma: full-width evenly spaced, #C2E9FF bg */
	.header-category-nav {
		display: flex;
		align-items: stretch;
		gap: 16px;
		background: var(--header-category-bg);
		padding: 0 16px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		white-space: nowrap;
	}

	.header-category-nav::-webkit-scrollbar {
		display: none;
	}

	/* Category nav links — fill width evenly, centered text, no border */
	.header-category-nav a {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		font-family: 'Rubik', sans-serif;
		font-weight: 500;
		font-size: 14px;
		color: var(--header-text);
		padding: 8px;
		border: none;
		border-radius: 0;
		text-decoration: none;
		white-space: nowrap;
		text-align: center;
		transition: background 0.15s;
	}

	.header-category-nav a:hover,
	.header-category-nav a:active {
		background: rgba(29, 29, 31, 0.08);
	}

	/* FREE TRIALS dropdown trigger — chevron indicator (Task: 86ewpc7z9) */
	.header-category-nav a.cat-nav-dropdown-trigger::after {
		content: '';
		display: inline-block;
		width: 8px;
		height: 5px;
		margin-left: 4px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='rgba(29%2C29%2C31%2C0.9)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		transition: transform 0.2s ease;
		flex-shrink: 0;
	}

	.header-category-nav a.cat-nav-dropdown-trigger.is-active::after {
		transform: rotate(180deg);
	}

	/* Category dividers — Figma: 1px stroke, 22px tall, #85B8CE */
	.header-category-nav .category-divider {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		font-size: 0;
		color: transparent;
		padding: 0;
		width: 1px;
		background: var(--header-divider);
		align-self: center;
		height: 22px;
	}

	/* Search bar row — Figma: 70px total height, padding 11px 16px, search 48px */
	.header-search-row {
		background: var(--header-announcement-bg);
		padding: 11px 16px;
	}

	.header-search-row .dgwt-wcas-search-wrapp {
		max-width: 100%;
		width: 100%;
	}

	.header-search-row .dgwt-wcas-search-wrapp input[type="search"].dgwt-wcas-search-input {
		height: 48px;
		border: 1px solid var(--header-search-border);
		border-radius: 6px;
		font-family: 'Rubik', sans-serif;
		font-weight: 400;
		font-size: 14px;
		color: #030712;
		background: #FFFFFF;
	}

	/* Tablet header row — height/bg set via Blocksy customizer */
	header[data-id="type-1"] [data-row="middle"],
	header.ct-header[data-id="type-1"] [data-row*="middle"] {
		min-height: 80px;
	}

	/* Logo vertical centering — Blocksy sets .site-logo-container height: 50px via customizer,
	   but the actual logo image is shorter (34px tablet, 22px mobile). Flex centering ensures
	   the image sits at the vertical center of its container, matching Figma alignItems: center. */
	header[data-id="type-1"] [data-row="middle"] .site-logo-container {
		display: flex !important;
		align-items: center !important;
	}

	/* Logo stays at full size on tablet */
	header[data-id="type-1"] [data-row="middle"] .site-logo-container img {
		max-width: 236px;
		max-height: 34px;
	}

	/* Icon gap on tablet */
	header[data-id="type-1"] [data-row="middle"] [data-column="end"] {
		gap: 0;
	}

	/* Hide info dropdown on tablet/mobile (it's in offcanvas) */
	.info-dropdown-panel {
		display: none !important;
	}
	.header-icon-info-wrap:hover .info-dropdown-panel {
		display: none !important;
	}

	/* Hide mega menus on tablet */
	.mega-menu-columns {
		display: none;
	}

	/* Hide Blocksy's default bottom-row search toggle
	   (replaced by custom .header-search-row with full FiboSearch input) */
	[data-device="mobile"] [data-row="bottom"] {
		display: none !important;
	}
}

/* ---- Category Nav FREE TRIALS Dropdown Panel (Task: 86ewpc7z9) ----
   Panel appended to body via JS (position:fixed) — sidesteps
   .header-category-nav overflow:auto clipping. */
.cat-nav-dropdown-panel {
	display: none;
	position: fixed;
	background: #ffffff;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	z-index: 10000;
	overflow: hidden;
	padding: 8px 0 12px;
}

.cat-nav-dropdown-panel.is-open {
	display: block;
	animation: catNavSlideDown 200ms ease-out;
}

@keyframes catNavSlideDown {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.cat-nav-dropdown-section {
	font-family: 'Rubik', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: rgba(29, 29, 31, 0.5);
	text-transform: uppercase;
	padding: 12px 16px 4px;
}

.cat-nav-dropdown-item {
	display: block;
	padding: 10px 16px;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: rgba(29, 29, 31, 0.9) !important;
	text-decoration: none;
	transition: background 150ms ease;
}

.cat-nav-dropdown-item:hover,
.cat-nav-dropdown-item:active {
	background: #c2e9ff;
	text-decoration: none;
}

/* =============================================
   OFF-CANVAS MOBILE/TABLET MENU (Figma-exact)
   ============================================= */
@media (max-width: 1099px) {
	/* Off-canvas panel — sits above Blocksy's body::before overlay (z-index:9999)
	   Blocksy creates body[data-panel]::before { position:fixed; inset:0; z-index:9999; bg:rgba(0,0,0,0.5) }
	   to dim the page. Our panel must be above that so the white bg isn't darkened. */
	[data-header*="type-1"] #offcanvas {
		--side-panel-width: 447px !important;
		--theme-box-shadow: none !important;
		z-index: 10000 !important;
		background-color: transparent !important;
	}

	/* Panel inner container — !important needed to beat Blocksy inline
	   [data-header*="type-1"] #offcanvas .ct-panel-inner { background-color: rgba(18,21,25,0.98) } */
	[data-header*="type-1"] #offcanvas .ct-panel-inner {
		padding: 50px 16px 24px;
		background: #FFFFFF !important;
		background-color: #FFFFFF !important;
		border-radius: 0;
		box-shadow: none;
	}

	/* Panel actions container (holds close button) — Figma: absolute bar at top of panel,
	   width: full, height: 42px, padding: 0 20px 0 0. Must be taken out of document flow
	   so it doesn't push menu content down. Blocksy renders this as static with padding-top:24px
	   which creates a 37px block before the menu content — that's the "big spacing" issue. */
	#offcanvas .ct-panel-actions {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: 42px !important;
		padding: 0 20px 0 0 !important;
		margin: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		background: transparent !important;
		z-index: 1;
		box-sizing: border-box;
		border-bottom: none !important;
	}

	/* Close button — inside the absolute panel-actions bar, no extra positioning needed */
	#offcanvas .ct-toggle-close {
		position: static !important;
		width: auto;
		height: 42px;
		padding: 0 !important;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: none;
		cursor: pointer;
	}

	/* Close button icon — Figma: 24x24, stroke-based x-mark, NOT filled */
	#offcanvas .ct-toggle-close svg {
		width: 24px !important;
		height: 24px !important;
		fill: none !important;
		stroke: #000000;
		stroke-width: 1.5px;
	}

	/* Panel content inner — Figma: no extra padding. The panel-inner already has
	   padding: 50px 16px 24px. Blocksy adds padding: 24px on content-inner which
	   doubles the left/right spacing and adds excess top space below the close bar. */
	#offcanvas .ct-panel-content-inner {
		padding: 0 !important;
		overflow-x: hidden !important;
	}

	/* Fix Blocksy dropdown toggle button negative margin — it has margin-right:-5px
	   which causes 5px content overflow, triggering horizontal scroll on ancestors
	   when Blocksy accordion JS fires scrollIntoView. Resetting to 0 eliminates
	   the overflow at the source. */
	#offcanvas .mobile-menu .ct-toggle-dropdown-mobile {
		margin-right: 0 !important;
	}

	/* Mobile menu items (top-level links) */
	#offcanvas .mobile-menu .ct-menu-link {
		font-family: 'Rubik', sans-serif;
		font-weight: 600;
		font-size: 16px;
		line-height: 1.75em;
		color: rgba(29, 29, 31, 0.9);
	}

	/* Active state — mobile top-level current-menu-item and current-menu-ancestor: #363636 (Task: 86ew3xnvk) */
	#offcanvas .mobile-menu > ul > li.current-menu-item > .ct-sub-menu-parent > .ct-menu-link,
	#offcanvas .mobile-menu > ul > li.current-menu-item > .ct-menu-link,
	#offcanvas .mobile-menu > ul > li.current-menu-ancestor > .ct-sub-menu-parent > .ct-menu-link,
	#offcanvas .mobile-menu > ul > li.current-menu-ancestor > .ct-menu-link {
		color: #363636;
	}

	/* Active expand arrow — mobile top-level: fill #363636 to match link color (Task: 86ew3xnvk) */
	#offcanvas .mobile-menu > ul > li.current-menu-item > .ct-sub-menu-parent > .ct-toggle-dropdown-mobile svg,
	#offcanvas .mobile-menu > ul > li.current-menu-item > .ct-toggle-dropdown-mobile svg,
	#offcanvas .mobile-menu > ul > li.current-menu-ancestor > .ct-sub-menu-parent > .ct-toggle-dropdown-mobile svg,
	#offcanvas .mobile-menu > ul > li.current-menu-ancestor > .ct-toggle-dropdown-mobile svg {
		fill: #363636;
	}

	/* Active state — mobile submenu items (Task: 86ew3xnvk) */
	#offcanvas .mobile-menu .sub-menu li.current-menu-item > .ct-menu-link,
	#offcanvas .mobile-menu .sub-menu li.current-menu-ancestor > .ct-menu-link {
		color: #1246D5;
	}

	/* Accordion toggle chevron button */
	#offcanvas .mobile-menu .ct-toggle-dropdown-mobile {
		color: rgba(29, 29, 31, 0.9);
	}

	#offcanvas .mobile-menu .ct-toggle-dropdown-mobile svg {
		width: 14px;
		height: 14px;
		fill: rgba(29, 29, 31, 0.9);
	}

	/* Full-width clickable accordion rows — entire row opens accordion (Task: 86ew3xnvk) */
	#offcanvas .mobile-menu .menu-item-has-children > .ct-sub-menu-parent {
		cursor: pointer;
		display: flex;
		align-items: center;
		width: 100%;
	}

	#offcanvas .mobile-menu .menu-item-has-children > .ct-sub-menu-parent > .ct-menu-link {
		flex: 1;
		cursor: pointer;
	}

	/* Mobile sub-menu — Figma: NO left indentation, items flush with parent.
	   Blocksy default: padding-left: 30px. Override to 0.
	   Figma: 27px gap between last submenu item and the divider below */
	#offcanvas .mobile-menu .sub-menu {
		padding-left: 0 !important;
		padding-bottom: 18px;
	}

	/* Mobile sub-menu items */
	#offcanvas .mobile-menu .sub-menu .ct-menu-link {
		font-family: 'Rubik', sans-serif;
		font-weight: 500;
		font-size: 16px;
		padding: 12px 0;
		border-radius: 6px;
		color: rgba(29, 29, 31, 0.9);
	}

	/* "All [Category]" first submenu item — Figma: bold, shown only in offcanvas (Task: 86ew3xnvk) */
	#offcanvas .mobile-menu .sub-menu .mobile-all-category-link {
		display: block;
		font-weight: 600;
	}

	/* Hide Blocksy's default sub-menu bullet dots (3x3px ::before) — not in Figma */
	#offcanvas .mobile-menu .sub-menu .ct-menu-link::before {
		display: none !important;
	}

	/* Mobile section titles (from PHP walker filter) */
	#offcanvas .mobile-menu .mega-section-title {
		font-family: 'Rubik', sans-serif;
		font-weight: 300;
		font-size: 14px;
		text-transform: uppercase;
		color: #363636;
		line-height: 1em;
		padding: 16px 0 8px;
	}

	/* Main nav list — Figma: gap 6px between items */
	#offcanvas .mobile-menu > ul {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	/* Divider between nav sections */
	#offcanvas .mobile-menu > ul > li {
		border-bottom: 1px solid #E4E5E7;
	}

	#offcanvas .mobile-menu > ul > li:last-child {
		border-bottom: none;
	}

	/* Off-canvas bottom links (Contact, Downloads, Wishlist)
	   Figma: Divider above is full-width (alignSelf: stretch), gap: 10px between links */
	.offcanvas-bottom-links {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding-top: 24px;
		border-top: 1px solid #E4E5E7;
		margin-top: 24px;
		width: 100%;
		align-self: stretch;
	}

	.offcanvas-bottom-links a {
		font-family: 'Rubik', sans-serif;
		font-weight: 400;
		font-size: 16px;
		line-height: 1.5em;
		color: #363636;
		text-decoration: none;
		padding: 6px 0;
		border-radius: 6px;
	}

	.offcanvas-bottom-links a:hover {
		background: rgba(0, 0, 0, 0.04);
	}

	/* Hide info icon wrap from mobile (dropdown shown via offcanvas bottom links instead) */
	.header-icon-info-wrap {
		display: none;
	}
	/* Also hide the first divider (after info) on mobile */
	.header-icons-custom .header-icon-info-wrap + .header-icon-divider {
		display: none;
	}

	/* Hide account element's ::after divider on mobile/tablet */
	header[data-id="type-1"] [data-row="middle"] [data-id="account"]::after {
		display: none;
	}

	/* Reset account margin on mobile/tablet — no divider, no 24px gap needed */
	header[data-id="type-1"] [data-row="middle"] [data-id="account"] {
		margin-right: 0 !important;
	}

	/* Reset ico001 margin on mobile/tablet — info icon hidden */
	header[data-id="type-1"] [data-row="middle"] .ct-header-text[data-id="ico001"] {
		margin-right: 0 !important;
	}
}

/* Tablet only: panel border-radius (panel < viewport width, so corners visible) */
@media (min-width: 700px) and (max-width: 1099px) {
	[data-header*="type-1"] #offcanvas .ct-panel-inner {
		border-radius: 0 8px 8px 0;
	}
}

/* =============================================
   MOBILE STYLES (< 700px)
   ============================================= */
@media (max-width: 699px) {
	/* Off-canvas panel width — Figma mobile = 387px */
	[data-header*="type-1"] #offcanvas {
		--side-panel-width: 387px !important;
	}

	/* Logo scaling */
	header[data-id="type-1"] [data-row="middle"] .site-logo-container img {
		max-width: 150px;
		max-height: 22px;
	}

	/* Icon gap reduction on mobile */
	.header-icon-divider {
		margin: 0 5px;
	}

	/* Category bar adjustments — Figma mobile: padding 0 10px, gap 14px */
	.header-category-nav {
		padding: 0 10px;
		gap: 14px;
	}

	.header-category-nav a {
		padding: 8px 0;
		font-size: 13px;
	}

	/* Middle row height — 60px on mobile (Task: 86ewm981c), height set via Blocksy customizer */
	header[data-id="type-1"] [data-row="middle"],
	header.ct-header[data-id="type-1"] [data-row*="middle"] {
		min-height: 60px;
	}

	header.ct-header[data-id="type-1"] [data-row*="middle"] .ct-container {
		min-height: 60px !important;
	}
}

/* =============================================
   DESKTOP ALL (> 1100px)
   ============================================= */
@media (min-width: 1100px) {
	/* Hide category nav on desktop */
	.header-category-nav {
		display: none;
	}

	/* Hide mobile search row on desktop */
	.header-search-row {
		display: none;
	}
}

/* =============================================
   SMALL DESKTOP (1100px - 1280px) — tighter fit
   ============================================= */
@media (min-width: 1100px) and (max-width: 1280px) {
	/* At small desktop, hero goes full-width — header content should match.
	   Override Blocksy's fixed-width container, use 20px side padding. */
	header[data-id="type-1"] [data-row="top"] .ct-container,
	header[data-id="type-1"] [data-row="middle"] .ct-container {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Scale logo down */
	header[data-id="type-1"] [data-row="middle"] .site-logo-container img {
		max-width: 180px;
		max-height: 26px;
	}

	/* Reduce menu font size */
	header[data-id="type-1"] [data-row="middle"] [data-id="menu"] > .menu > li > a {
		font-size: 13px;
		padding: 10px 8px;
	}

	/* Reduce icon area gap on small desktop — 7px margin each side of divider = 15px total */
	.header-icon-divider {
		margin: 0 7px;
	}

	/* Match reduced gap: account margin-right = total gap (15px = 7 + 1 + 7) for ::after divider. */
	header[data-id="type-1"] [data-row="middle"] [data-id="account"] {
		margin-right: 15px !important;
	}
	header[data-id="type-1"] [data-row="middle"] [data-id="account"]::after {
		right: -8px;
	}

	/* Tighter carousel text */
	.header-testimonial-carousel .carousel-text {
		max-width: 280px;
		font-size: 12px;
	}

	/* Tighter announcement text */
	.header-announcement {
		font-size: 12px;
	}
}

/* =============================================
   DESKTOP WIDE (> 1280px) — Figma padding
   ============================================= */
@media (min-width: 1281px) {
	/* Figma: header content = 1384px wide, must align with hero (max-width: 1384px, centered).
	   Override Blocksy's fixed-width .ct-container to stretch full-row,
	   then use dynamic padding to center a 1384px content area.
	   At 1512px+ viewport → 64px padding (Figma exact).
	   At 1440px viewport → ~28px padding (aligns with hero). */
	header[data-id="type-1"] [data-row="top"] .ct-container,
	header[data-id="type-1"] [data-row="middle"] .ct-container {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: max(20px, calc((100% - 1384px) / 2)) !important;
		padding-right: max(20px, calc((100% - 1384px) / 2)) !important;
	}
}

/* [86ewypnjb] Allow long link text to wrap within 145px col-2 column */
@media (min-width: 1025px) {
	[data-id="menu"] > .menu > li.mega-supplies > .sub-menu > li.mega-section-header-4 > a.ct-menu-link {
		white-space: normal;
	}
}

/* [86ewypnjb] Line height for wrapped T3270 link text */
@media (min-width: 1025px) {
	[data-id="menu"] > .menu > li.mega-supplies > .sub-menu > li.mega-section-header-4 > a.ct-menu-link {
		line-height: 1.4;
	}
}

/* [86ewypnjb] Widen col-2 INKJET link: allows "Dmax Epson T3270" on line 1, "Replacement Chip" on line 2 */
@media (min-width: 1025px) {
	#menu-item-77552,
	#menu-item-77552 > a.ct-menu-link {
		width: 155px;
	}
}

/* [86ewypnjb] Hide anchor for mega-section-header-4 items (span label already visible; base rule only covers mega-section-header) */
@media (min-width: 1025px) {
	[data-id="menu"] > .menu > li.menu-item-has-children > .sub-menu > li.mega-section-header-4 > a.ct-menu-link {
		display: none;
	}
}

/* [86ewypnjb] ID-specific wrap for staging: menu-item-77552 lacks mega-section-header-4 class there */
@media (min-width: 1025px) {
	#menu-item-77552 > a.ct-menu-link {
		white-space: normal;
		line-height: 1.4;
	}
}

/* [86ewypnjb] Override: restore 77552 anchor visibility (class rule hides it on local where 77552 has mega-section-header-4) */
@media (min-width: 1025px) {
	#menu-item-77552 > a.ct-menu-link {
		display: block;
	}
}

/* [86ewypnjb] Collapse ghost sub-header 77527 li entirely on staging (removes gap above Dmax Epson T3270 Replacement Chip) */
@media (min-width: 1025px) {
	#menu-item-77527 {
		display: none;
	}
}

/* [86ewypnjb] v10 — Fix desktop 38px gap + restore mobile INKJET ACCESSORIES heading */

/* Override: 77527 = section heading, show on desktop (reverses display:none above) */
@media (min-width: 1025px) {
	#menu-item-77527 {
		display: block !important;
		margin-top: 0 !important;
		padding-top: 0 !important;
	}
}

/* Override: chip link top — was 202px (assumed 65px heading), now 164px (27px span-only heading) */
@media (min-width: 1000px) {
	[data-id="menu"] > .menu > li.mega-supplies > .sub-menu > li:nth-child(7) {
		top: 164px !important;
	}
}

/* Hide 77527 anchor on ALL breakpoints (desktop: already covered by mega-section-header-4 rule; mobile: explicit) */
#menu-item-77527 > a.ct-menu-link,
.menu-item-77527 > a.ct-menu-link {
	display: none !important;
}