/* =========================================================================
   iSupply Displays — site header

   Two desktop rows inside the Kadence block header (post 2871): a navy
   utility bar and a white main row that goes sticky on scroll. The Shop item
   in the main row owns a full-width drawer.

   Kadence prints its per-row CSS in the document head *after* this sheet, at
   two classes (.wp-block-kadence-header-rowXXX .kadence-header-row-inner).
   Rules here that fight one of those are written with the row class repeated
   — .wp-block-kadence-header-row.wp-block-kadence-header-row.… — which wins on
   specificity without reaching for !important. Rules that don't collide are
   left plain.

   Below 1025px Kadence hides .wp-block-kadence-header-desktop and renders its
   tablet container plus the child-theme mobile menu in Kadence's off-canvas.
   ====================================================================== */

:root {
	/* Palette — sampled from the reference mockups. ------------------- */
	--isd-h-navy:        #0a315f; /* utility bar, headings              */
	--isd-h-navy-deep:   #0f2c50; /* promo banner                       */
	--isd-h-gold-bright: #f5a524; /* phone number on navy               */
	--isd-h-accent:       var(--opt1-blue, #1769ff);
	--isd-h-accent-hover: var(--opt1-blue-dark, #084fcc);
	--isd-h-divider:     rgba(255, 255, 255, .28);

	--isd-h-field-bg:     #f7f8fb;
	--isd-h-field-border: #e1e6ee;
	--isd-h-placeholder:  #6d788c;

	--isd-h-rule:    #e8ecf2;
	--isd-h-badge:   #f3f6fa;
	--isd-h-sublink: #5a6880;

	/* Metrics.

	   Both mockups are 2000px wide and put the header content across 1904 of
	   them — 95.2% of the viewport. That ratio is the one scale-invariant fact
	   in the images, and it says the header is full-bleed with a narrow edge
	   gutter, not capped at the 1290px content width the page body uses. At a
	   1440px design viewport the images resolve to a 1.389x scale and a ~34px
	   gutter, which is what everything below is derived from.

	   The cap keeps the row sane on very wide screens; below 1600px the header
	   is edge-to-edge exactly as drawn. The header therefore sits wider than
	   page content by design — that is what the reference shows. */
	--isd-h-max-w:  1600px;
	--isd-h-edge:   34px;

	--isd-h-topbar-h: 50px;
	--isd-h-main-h:   109px;
	--isd-h-logo-w:       292px; /* 284px of visible mark / 0.974 file ratio */
	--isd-h-logo-box-h:   56px;
	--isd-h-nav-gap:  42px;
	--isd-h-nav-size: 16px;
	--isd-h-search-w: 240px;
	--isd-h-field-h:  49px;
	--isd-h-btn-w:    199px;
	--isd-h-btn-h:    51px;
	--isd-h-action-gap: 18px;
	--isd-h-icon-control: 48px;
	--isd-h-cart-control: 52px;
	--isd-h-commerce-gap: 14px;

	--isd-h-shadow: 0 18px 40px rgba(10, 49, 95, .13);
}

/* =========================================================================
   1 — Row chrome
   ====================================================================== */

/* The rows ship with block padding; height is controlled here instead so the
   two rows can be sized independently of Kadence's spacing scale. */
.wp-block-kadence-header-row.wp-block-kadence-header-row.wp-block-kadence-header-row-top .kadence-header-row-inner,
.wp-block-kadence-header-row.wp-block-kadence-header-row.wp-block-kadence-header-row-center .kadence-header-row-inner {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: var(--isd-h-edge);
	padding-right: var(--isd-h-edge);
	max-width: var(--isd-h-max-w);
}

/* Top row: one full-width band.

   Kadence will not render a row whose header-columns are all empty
   (Kadence_Blocks_Header_Row_Block::are_innerblocks_empty), so the bar lives
   in the left column and the unused sections are folded away here rather than
   with the row's own "single" layout config — which hides every column inside
   the first section, including the one holding the content. */
.wp-block-kadence-header-row.wp-block-kadence-header-row.wp-block-kadence-header-row-top .kadence-header-row-inner {
	display: flex;
	align-items: center;
	min-height: var(--isd-h-topbar-h);
}

/* Kadence only wraps a column in a div when its location is one of the
   center- or tablet- positions
   (Kadence_Blocks_Header_Column_Block::build_html returns bare $content for
   any other location), so there is no .wp-block-kadence-header-column-left or
   -right element to style — that content sits directly in the section. Layout
   for those two therefore has to hang off the section. */
.wp-block-kadence-header-row-top .kadence-header-row-inner > .wp-block-kadence-header-section:first-of-type {
	flex: 1 1 auto;
	min-width: 0;
	gap: 0;
}

/* Empty columns and the unused right section would otherwise take a share of
   the row: Kadence flags empty ones with .no-content. */
.wp-block-kadence-header-row-top .wp-block-kadence-header-column.no-content,
.wp-block-kadence-header-row-top .kadence-header-row-inner > .wp-block-kadence-header-section:last-of-type,
.wp-block-kadence-header-row-center .wp-block-kadence-header-column.no-content {
	display: none;
}

/* Main row: logo | nav | actions.

   Kadence lays the row out as a grid (1fr minmax(0,auto) 1fr, collapsing to
   `auto auto` when the centre column is empty), which centres the nav on the
   row. The reference centres it on the gap *between the logo and the search
   field* instead, so the row becomes a flex line and the nav column takes the
   slack. */
.wp-block-kadence-header-row.wp-block-kadence-header-row.wp-block-kadence-header-row-center .kadence-header-row-inner {
	display: flex;
	align-items: center;
	min-height: var(--isd-h-main-h);
}

.wp-block-kadence-header-row-center .kadence-header-row-inner > .wp-block-kadence-header-section:first-of-type {
	flex: 1 1 auto;
	min-width: 0;
	gap: 0;
}

.wp-block-kadence-header-row-center .kadence-header-row-inner > .wp-block-kadence-header-section:last-of-type {
	flex: 0 0 auto;
	gap: var(--isd-h-action-gap); /* search field -> grouped header actions */
}

/* Kadence gives this column flex-end; the nav belongs in the middle. */
.wp-block-kadence-header-row-center .wp-block-kadence-header-column-center-left {
	flex: 1 1 auto;
	justify-content: center;
	min-width: 0;
}

/* The main row is the sticky one, and the drawer is positioned against its
   bottom edge, so it must not clip its own children. */
.wp-block-kadence-header-row-center,
.wp-block-kadence-header-row-center .kadence-header-row-inner {
	overflow: visible;
}

/* Logo.

   Isupply-Logo.png is 1200x675 but its artwork occupies only 1169x166 of
   that, centred on transparent bands — so sizing the <img> to the width the
   design wants (~270px, giving the 263px of visible mark measured in the
   mockup) would make the element 152px tall inside a 98px row.

   The link becomes a window the size of the visible mark and the image is
   centred on the artwork's own midpoint rather than the file's. The 47.2%
   is that midpoint: the ink spans y 236-401 of 675, so its centre sits at
   0.4719 of the image height. Expressed as a ratio it survives any change to
   --isd-h-logo-w; it only needs revisiting if the logo file is replaced. */
.wp-block-kadence-header-row-center .kb-identity-layout-container {
	position: relative;
	display: block;
	width: var(--isd-h-logo-w);
	height: var(--isd-h-logo-box-h);
	overflow: hidden;
}

.wp-block-kadence-header-row-center .kb-identity img,
.wp-block-kadence-header-row-center .custom-logo {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	max-width: none;
	height: auto;
	transform: translateY(-47.2%);
}

.wp-block-kadence-header-row-center .wp-block-site-logo {
	margin: 0;
}

/* Sticky positioning.

   Kadence's JS does everything except pin the row: on scroll it adds
   .item-is-fixed/.item-is-stuck and reserves the vacated space by setting a
   height on the .kb-header-placeholder-wrapper it injects. The rule that
   actually fixes the element — .item-is-fixed{position:fixed;left:0;right:0}
   — ships in the parent theme's assets/css/header.min.css, and that sheet is
   only enqueued for the *classic* header. This site runs a block header, so
   the sheet is absent and without the declaration below the row keeps its
   classes, reserves its space, and then scrolls away regardless.

   !important is load-bearing here and is the one place in this sheet that
   needs it: Kadence's reset path writes "position: initial; width: initial;
   left: initial; top: initial" as an *inline* style on the row and never
   clears it, so no stylesheet rule of any specificity can win. Confirmed by
   reading the row's style.cssText while stuck.

   top tracks the admin bar, which is itself fixed and would otherwise sit on
   top of the pinned row for logged-in users. Kadence's own inline top is
   always "initial" on this header (reveal-on-scroll-up is off and a single
   row is pinned), so overriding it costs nothing. */
.wp-block-kadence-header .item-is-fixed {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
	top: var(--wp-admin--admin-bar--height, 0px) !important;
	z-index: 1200;
}

/* A hairline under the main row, and a shadow once it lifts off the page. */
.wp-block-kadence-header-row-center {
	border-bottom: 1px solid var(--isd-h-rule);
	transition: box-shadow .18s ease;
}

.kb-header-sticky-wrapper.item-is-stuck .wp-block-kadence-header-row-center,
.kb-header-sticky-wrapper.item-is-stuck.wp-block-kadence-header-row-center {
	box-shadow: 0 6px 18px rgba(10, 49, 95, .10);
}

/* =========================================================================
   2 — Utility bar
   ====================================================================== */

.isd-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	min-height: var(--isd-h-topbar-h);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.2;
}

.isd-topbar__promise {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	min-width: 0;
}

.isd-topbar__promise span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.isd-topbar__icon {
	flex: none;
	opacity: .95;
}

.isd-topbar__links {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The pipes between the three entries are drawn, not typed, so they stay put
   when an entry is hidden at a narrow width. */
.isd-topbar__item + .isd-topbar__item {
	border-left: 1px solid var(--isd-h-divider);
	margin-left: 22px;
	padding-left: 22px;
}

.isd-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

a.isd-topbar__link:hover,
a.isd-topbar__link:focus-visible {
	color: var(--isd-h-gold-bright);
}

.isd-topbar__link--accent,
a.isd-topbar__link--accent {
	color: var(--isd-h-gold-bright);
}

a.isd-topbar__link--accent:hover,
a.isd-topbar__link--accent:focus-visible {
	color: #fff;
}

/* =========================================================================
   3 — Primary navigation
   ====================================================================== */

.isd-nav {
	min-width: 0;
}

.isd-nav__list {
	display: flex;
	align-items: center;
	gap: var(--isd-h-nav-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.isd-nav__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2px;
}

.isd-nav__link {
	position: relative;
	display: inline-block;
	padding: 6px 0;
	color: var(--isd-h-navy);
	font-size: var(--isd-h-nav-size);
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

/* The underline is the width of the word, sits 13px below it, and animates
   out from the centre on hover. The active item keeps it permanently. */
.isd-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -13px;
	height: 3px;
	background: var(--isd-h-accent);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .18s ease;
}

.isd-nav__link:hover::after,
.isd-nav__link:focus-visible::after,
.isd-nav__link.is-current::after,
.isd-nav__item--has-drawer.is-open .isd-nav__link::after {
	transform: scaleX(1);
}

.isd-nav__link:hover,
.isd-nav__link:focus-visible {
	color: var(--isd-h-navy);
}

/* One marker at a time.

   The underline belongs to the current page, but hovering another item — or
   opening the Shop drawer — moves it there instead of showing two. Reference
   image 1 has HOME marked on the home page; image 2, same page with the
   drawer open, has the marker on SHOP and HOME bare. */
.isd-nav__list:hover .isd-nav__link.is-current:not(:hover)::after,
.isd-nav.is-drawer-open .isd-nav__link.is-current::after {
	transform: scaleX(0);
}

.isd-nav.is-drawer-open .isd-nav__item--has-drawer .isd-nav__link::after {
	transform: scaleX(1);
}


/* Opening the drawer is a control of its own so the Shop link keeps working
   with JavaScript off. */
.isd-nav__disclosure {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 0;
	margin: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	color: var(--isd-h-navy);
	cursor: pointer;
	line-height: 0;
}

.isd-nav__disclosure:hover,
.isd-nav__disclosure:focus-visible {
	background: none;
	color: var(--isd-h-accent);
}

.isd-nav__chevron {
	transition: transform .2s ease;
}

.isd-nav__item--has-drawer.is-open .isd-nav__chevron {
	transform: rotate(180deg);
}

/* With no JavaScript the disclosure cannot do anything, so it is not offered.
   The Shop link beside it still reaches the shop archive. */
.no-js .isd-nav__disclosure {
	display: none;
}

/* =========================================================================
   4 — Search field, account, cart and Request Quote
   ====================================================================== */

.isd-lucide-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.isd-lucide-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.isd-search {
	position: relative;
	display: flex;
	align-items: center;
	width: var(--isd-h-search-w);
	height: var(--isd-h-field-h);
	padding: 0 14px 0 44px;
	border: 1px solid var(--isd-h-field-border);
	border-radius: 10px;
	background: var(--isd-h-field-bg);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.isd-search:focus-within {
	border-color: var(--isd-h-navy);
	box-shadow: 0 0 0 3px rgba(10, 49, 95, .10);
}

.isd-search__icon {
	position: absolute;
	left: 15px;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 100%;
	line-height: 0;
	color: var(--isd-h-navy);
	pointer-events: none;
}

.isd-search__input,
.isd-search input[type="search"].isd-search__input {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--isd-h-navy);
	font-size: 14px;
	line-height: calc(var(--isd-h-field-h) - 2px);
}

.isd-search__input:focus {
	outline: none;
	box-shadow: none;
}

.isd-search__input::placeholder {
	color: var(--isd-h-placeholder);
	opacity: 1;
}

/* The submit control is the whole field's Enter key; the visible affordance
   is the icon. Kept in the DOM so the form submits without JavaScript. */
.isd-search__submit {
	position: absolute;
	inset: 0;
	width: 44px;
	right: auto;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.isd-search__submit:hover,
.isd-search__submit:focus-visible {
	background: none;
}

.isd-header-actions {
	display: inline-flex;
	align-items: center;
	gap: var(--isd-h-commerce-gap);
	flex: 0 0 auto;
}

.isd-header-account,
.isd-header-cart {
	color: var(--isd-h-navy);
	text-decoration: none;
}

.isd-header-account--desktop,
.isd-header-cart--desktop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--isd-h-icon-control);
	border-radius: 12px;
	transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.isd-header-account--desktop {
	width: var(--isd-h-icon-control);
}

.isd-header-cart--desktop {
	position: relative;
	width: var(--isd-h-cart-control);
	background: var(--isd-h-field-bg);
	box-shadow: inset 0 0 0 1px rgba(10, 49, 95, .025);
}

.isd-header-account--desktop:hover,
.isd-header-account--desktop:focus-visible,
.isd-header-cart--desktop:hover,
.isd-header-cart--desktop:focus-visible {
	color: var(--isd-h-accent);
	background: var(--isd-h-badge);
}

.isd-header-account--desktop:focus-visible,
.isd-header-cart--desktop:focus-visible,
.isd-header-cta:focus-visible {
	outline: 2px solid var(--isd-h-accent);
	outline-offset: 3px;
}

.isd-header-account__icon {
	width: 27px;
	height: 27px;
}

.isd-header-cart__icon {
	width: 28px;
	height: 28px;
}

.isd-header-cart__count {
	position: absolute;
	top: -10px;
	right: -8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 23px;
	height: 23px;
	padding: 0 6px;
	border: 2px solid #fff;
	border-radius: 999px;
	background: var(--isd-h-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	box-sizing: border-box;
}

.isd-header-cta,
.wp-block-kadence-header-row-center a.isd-header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: var(--isd-h-btn-w);
	height: var(--isd-h-btn-h);
	padding: 0 22px;
	border-radius: 10px;
	background: var(--isd-h-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease;
}

.isd-header-cta__arrow {
	width: 18px;
	height: 18px;
}

.wp-block-kadence-header-row-center a.isd-header-cta:hover,
.wp-block-kadence-header-row-center a.isd-header-cta:focus-visible {
	background: var(--isd-h-accent-hover);
	color: #fff;
}

/* =========================================================================
   5 — Shop drawer
   ====================================================================== */

/* Fixed rather than absolute: the main row is lifted into Kadence's sticky
   wrapper on scroll, and the drawer has to keep hanging off its bottom edge
   wherever that lands. JS writes --isd-drawer-top on every open and on
   scroll. Kadence's sticky code sets position/top and never a transform, so
   a fixed child is not trapped in a containing block. */
.isd-drawer {
	position: fixed;
	top: var(--isd-drawer-top, var(--kb-header-height, 144px));
	left: 0;
	right: 0;
	z-index: 99;
	background: #fff;
	border-top: 1px solid var(--isd-h-rule);
	box-shadow: var(--isd-h-shadow);
	max-height: calc(100vh - var(--isd-drawer-top, 144px));
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .16s ease, transform .16s ease;
}

.isd-drawer.is-open {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.isd-drawer,
	.isd-nav__link::after,
	.isd-nav__chevron {
		transition: none;
	}
}

.isd-drawer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 27%);
	gap: 30px;
	max-width: var(--isd-h-max-w);
	margin: 0 auto;
	padding: 26px var(--isd-h-edge) 30px;
}

.isd-drawer__main {
	min-width: 0;
}

/* 5.1 — Heading row ------------------------------------------------- */

.isd-drawer__head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 22px;
}

.isd-drawer__title {
	margin: 0;
	color: var(--isd-h-navy);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.isd-drawer__rule {
	flex: 1 1 auto;
	height: 1px;
	background: var(--isd-h-rule);
}

.isd-drawer__all {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--isd-h-accent);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.isd-drawer__all:hover,
.isd-drawer__all:focus-visible {
	color: var(--isd-h-accent-hover);
}

/* 5.2 — Category grid ------------------------------------------------ */

.isd-drawer__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	align-items: start;
}

.isd-drawer__col {
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}

/* The badge lives in a gutter beside the text column rather than in the text
   flow. In the reference it is 37px tall but overhangs the title's 17.5px
   line box in both directions, so the sub-links start directly under the
   title — laying it out as a flex row instead pushes every sub-list down by
   the badge's full height and makes the drawer half as tall again. */
.isd-drawer__group {
	position: relative;
	padding-left: 50px;
}

.isd-drawer__group-head {
	display: block;
}

.isd-drawer__badge {
	position: absolute;
	left: 0;
	top: -10px; /* centres the badge on the title's line box */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 37px;
	height: 37px;
	border-radius: 50%;
	background: var(--isd-h-badge);
	color: var(--isd-h-navy);
}

.isd-drawer__group-title {
	display: block;
	color: var(--isd-h-navy);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.isd-drawer__group-title:hover,
.isd-drawer__group-title:focus-visible {
	color: var(--isd-h-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Sub-links hang under the title, aligned to it rather than to the badge.

   The rhythm is carried entirely by line-height — the reference sets its
   sub-links on a ~19.5px pitch, and any per-item gap or inherited list margin
   overshoots that and makes the drawer half as tall again. Kadence gives
   list items a bottom margin, so it is zeroed here rather than worked around
   with a smaller gap. */
.isd-drawer__sublist {
	margin: 7px 0 0;
	padding: 0;
	list-style: none;
	display: block;
}

.isd-drawer__sublist li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.isd-drawer__sublink {
	display: block;
	color: var(--isd-h-sublink);
	font-size: 13.5px;
	line-height: 1.5;
	text-decoration: none;
}

.isd-drawer__sublink:hover,
.isd-drawer__sublink:focus-visible {
	color: var(--isd-h-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 5.3 — Rail --------------------------------------------------------- */

.isd-drawer__rail {
	min-width: 0;
	padding-left: 30px;
	border-left: 1px solid var(--isd-h-rule);
}

.isd-rail {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.isd-rail__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.isd-rail__card-media {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 6px;
	overflow: hidden;
	background: var(--isd-h-badge);
}

.isd-rail__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Until the real artwork is supplied the media box is a neutral panel rather
   than a broken image. */
.isd-rail__card-media.is-placeholder,
.isd-rail__banner.is-placeholder {
	background:
		repeating-linear-gradient(
			-45deg,
			#eef1f7 0 10px,
			#e7ebf3 10px 20px
		);
}

.isd-rail__card-title {
	margin: 10px 0 0;
	color: var(--isd-h-navy);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.isd-rail__card-text {
	margin: 4px 0 0;
	color: var(--isd-h-sublink);
	font-size: 13px;
	line-height: 1.4;
}

.isd-rail__card-cta,
.isd-rail__banner-cta,
.isd-rail__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	color: var(--isd-h-accent);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.isd-rail__card-cta:hover,
.isd-rail__banner-cta:hover,
.isd-rail__all:hover,
.isd-rail__card-cta:focus-visible,
.isd-rail__banner-cta:focus-visible,
.isd-rail__all:focus-visible {
	color: var(--isd-h-accent-hover);
}

.isd-rail__banner {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	background: var(--isd-h-navy-deep);
	min-height: 132px;
	display: flex;
}

.isd-rail__banner-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.isd-rail__banner-body {
	position: relative;
	padding: 16px 18px;
	color: #fff;
}

.isd-rail__banner.is-placeholder .isd-rail__banner-body {
	color: var(--isd-h-navy);
}

.isd-rail__banner-kicker {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.2;
}

.isd-rail__banner-title {
	margin: 2px 0 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.2;
}

.isd-rail__banner-text {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.4;
	opacity: .9;
}

.isd-rail__banner-cta {
	width: fit-content;
	padding: 8px 12px;
	border-radius: 4px;
	background: var(--isd-h-accent);
	color: var(--opt1-white, #fff);
	text-decoration: none;
}

.isd-rail__banner.is-placeholder .isd-rail__banner-cta {
	color: var(--opt1-white, #fff);
	background: var(--isd-h-accent);
}

.isd-rail__banner-cta:hover,
.isd-rail__banner-cta:focus-visible,
.isd-rail__banner.is-placeholder .isd-rail__banner-cta:hover,
.isd-rail__banner.is-placeholder .isd-rail__banner-cta:focus-visible {
	color: var(--opt1-white, #fff);
	background: var(--isd-h-accent-hover);
}

/* 5.4 — Rail preview state ------------------------------------------- */

.isd-rail__eyebrow {
	margin: 0;
	color: var(--isd-h-navy);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.isd-rail__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.isd-rail__tile {
	display: block;
	text-decoration: none;
}

.isd-rail__thumb {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 6px;
	overflow: hidden;
	background: var(--isd-h-badge);
}

.isd-rail__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.isd-rail__tile-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 8px;
	color: var(--isd-h-navy);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

.isd-rail__tile:hover .isd-rail__tile-title,
.isd-rail__tile:focus-visible .isd-rail__tile-title {
	color: var(--isd-h-accent);
}

.isd-rail__cats {
	margin: 0;
	padding: 0;
	list-style: none;
}

.isd-rail__cats li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.isd-rail__cat {
	display: block;
	line-height: 1.5;
}

.isd-rail__cat {
	color: var(--isd-h-sublink);
	font-size: 13.5px;
	text-decoration: none;
}

.isd-rail__cat:hover,
.isd-rail__cat:focus-visible {
	color: var(--isd-h-accent);
	text-decoration: underline;
}

.isd-rail__empty {
	margin: 0;
	color: var(--isd-h-sublink);
	font-size: 13px;
	line-height: 1.5;
}

.isd-rail__all {
	margin-top: auto;
}

/* Swapping between promo and preview must not make the drawer jump. */
.isd-drawer__rail {
	min-height: 340px;
}

/* Keep the full desktop header clear of the navigation just before the main
   narrow-desktop step. This range only needs a modest proportional reduction. */
@media (max-width: 1400px) {
	:root {
		--isd-h-edge: 30px;
		--isd-h-logo-w: 270px;
		--isd-h-logo-box-h: 52px;
		--isd-h-nav-gap: 36px;
		--isd-h-search-w: 210px;
		--isd-h-btn-w: 190px;
		--isd-h-action-gap: 8px;
		--isd-h-commerce-gap: 10px;
	}
}

/* =========================================================================
   6 — Narrow desktop (1025–1290px)

   At 1025px the row has ~977px of content width, which the full-size logo,
   nav, field and button overflow. Everything steps down; nothing is dropped.
   ====================================================================== */

@media (max-width: 1290px) {
	:root {
		--isd-h-edge:     26px;
		--isd-h-topbar-h: 44px;
		--isd-h-main-h:   88px;
		--isd-h-logo-w:     222px;
		--isd-h-logo-box-h: 44px;
		--isd-h-nav-gap:  26px;
		--isd-h-nav-size: 15px;
		--isd-h-search-w: 185px;
		--isd-h-field-h:  44px;
		--isd-h-btn-w:    166px;
		--isd-h-btn-h:    44px;
		--isd-h-action-gap: 14px;
		--isd-h-icon-control: 44px;
		--isd-h-cart-control: 48px;
		--isd-h-commerce-gap: 10px;
	}

	.isd-header-cta,
	.wp-block-kadence-header-row-center a.isd-header-cta {
		font-size: 14px;
		padding: 0 16px;
	}

	.isd-drawer__inner {
		gap: 22px;
	}

	.isd-drawer__grid {
		gap: 20px;
	}

	.isd-drawer__rail {
		padding-left: 22px;
	}
}

/* At 1025px — the narrowest width this header is ever shown at, since Kadence
   swaps to its tablet container below that — the logo, navigation, search,
   two icon controls and quote button all step down without being dropped.
   Only the decorative promise text is hidden. */
@media (max-width: 1140px) {
	:root {
		--isd-h-edge:     20px;
		--isd-h-logo-w:     185px;
		--isd-h-logo-box-h: 40px;
		--isd-h-nav-gap:  18px;
		--isd-h-nav-size: 14px;
		--isd-h-search-w: 145px;
		--isd-h-btn-w:    145px;
		--isd-h-action-gap: 10px;
		--isd-h-commerce-gap: 8px;
	}

	.isd-topbar__promise span {
		display: none;
	}

	.isd-drawer__grid {
		gap: 14px;
	}
}

/* =========================================================================
   7 — Tablet / mobile off-canvas navigation

   The active Kadence block header owns the overlay, right-side transition,
   focus trap, Escape key and trigger focus restoration. These rules only
   style the child-theme menu placed inside that off-canvas.
   ====================================================================== */

@media (max-width: 1024px) {
	.isd-mobile-offcanvas .kb-off-canvas-inner-wrap {
		width: min(100vw, 440px);
		max-width: 100vw;
		background: var(--isd-surface, #fff);
		color: var(--isd-h-navy);
		overscroll-behavior: contain;
	}

	.isd-mobile-offcanvas .kb-off-canvas-inner {
		min-height: 100%;
		padding: 0;
	}

	.isd-mobile-offcanvas .kb-off-canvas-close {
		top: 14px;
		right: 14px;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 10px;
		border-radius: 50%;
		color: var(--isd-h-navy);
	}

	.isd-mobile-offcanvas .kb-off-canvas-close:hover,
	.isd-mobile-offcanvas .kb-off-canvas-close:focus-visible {
		background: var(--isd-h-badge);
		color: var(--isd-h-navy);
	}

	.isd-mobile-menu {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-height: 100%;
		padding-top: 16px;
		background: var(--isd-surface, #fff);
		color: var(--isd-h-navy);
		font-family: inherit;
	}

	.isd-mobile-menu__title {
		min-height: 56px;
		margin: 0;
		padding: 17px 72px 17px 24px;
		border-bottom: 1px solid var(--isd-h-rule);
		color: var(--isd-h-navy);
		font-size: 18px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: .01em;
	}

	.isd-mobile-menu ul,
	.isd-mobile-menu li {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.isd-mobile-menu__row {
		display: flex;
		align-items: stretch;
		border-bottom: 1px solid var(--isd-h-rule);
		background: var(--isd-surface, #fff);
	}

	.isd-mobile-menu__link {
		color: var(--isd-h-navy);
		text-decoration: none;
	}

	.isd-mobile-menu__link:hover,
	.isd-mobile-menu__link:focus-visible,
	.isd-mobile-menu__link.is-current {
		color: var(--isd-h-accent);
	}

	.isd-mobile-menu__link:focus-visible,
	.isd-mobile-menu__toggle:focus-visible,
	.isd-mobile-menu__all:focus-visible,
	.isd-mobile-menu__commerce-link:focus-visible,
	.isd-mobile-menu__help:focus-visible,
	.isd-mobile-menu__cta:focus-visible {
		outline: 2px solid var(--isd-h-accent);
		outline-offset: -3px;
	}

	.isd-mobile-menu__link--primary {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		min-width: 0;
		min-height: 64px;
		padding: 17px 12px 17px 24px;
		font-size: 20px;
		font-weight: 700;
		line-height: 1.25;
	}

	.isd-mobile-menu__toggle {
		display: inline-flex;
		flex: 0 0 56px;
		align-items: center;
		justify-content: center;
		width: 56px;
		min-height: 56px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: var(--isd-h-navy);
		cursor: pointer;
	}

	.isd-mobile-menu__toggle[hidden],
	.isd-mobile-menu__shop[hidden],
	.isd-mobile-menu__children[hidden] {
		display: none;
	}

	.isd-mobile-menu__toggle:hover {
		background: var(--isd-h-badge);
		color: var(--isd-h-accent);
	}

	.isd-mobile-menu__toggle .kadence-svg-iconset {
		display: inline-flex;
		transition: transform .18s ease;
		transform: rotate(180deg);
	}

	.isd-mobile-menu__toggle .kadence-svg-icon {
		width: 19px;
		height: 19px;
	}

	.isd-mobile-menu__toggle[aria-expanded="true"] .kadence-svg-iconset {
		transform: rotate(0deg);
	}

	.isd-mobile-menu__shop {
		border-bottom: 1px solid var(--isd-h-rule);
		background: var(--isd-ground, #f7fafc);
	}

	.isd-mobile-menu__shop-head {
		padding: 20px 24px 14px;
		border-bottom: 1px solid var(--isd-h-rule);
	}

	.isd-mobile-menu__shop-title {
		margin: 0 0 7px;
		color: var(--isd-h-navy);
		font-size: 15px;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: .05em;
		text-transform: uppercase;
	}

	.isd-mobile-menu__all {
		color: var(--isd-h-accent);
		font-size: 14px;
		font-weight: 700;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.isd-mobile-menu__all:hover,
	.isd-mobile-menu__all:focus-visible {
		color: var(--isd-h-accent-hover);
	}

	.isd-mobile-menu__row--category {
		background: var(--isd-surface, #fff);
	}

	.isd-mobile-menu__link--category {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		min-width: 0;
		min-height: 58px;
		padding: 14px 10px 14px 32px;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.35;
	}

	.isd-mobile-menu__category.is-current-branch > .isd-mobile-menu__row--category {
		box-shadow: inset 3px 0 0 var(--isd-h-accent);
	}

	.isd-mobile-menu__children {
		padding: 5px 0 7px;
		border-bottom: 1px solid var(--isd-h-rule);
		background: #f2f4f7;
	}

	.isd-mobile-menu__children li + li {
		border-top: 1px solid rgba(10, 49, 95, .08);
	}

	.isd-mobile-menu__link--child {
		display: flex;
		align-items: center;
		min-height: 50px;
		padding: 11px 24px 11px 48px;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.35;
	}

	.isd-mobile-menu__link--child.is-current {
		font-weight: 700;
	}

	.isd-mobile-menu__footer {
		display: grid;
		gap: 12px;
		margin-top: auto;
		padding: 24px;
		border-top: 1px solid var(--isd-h-rule);
		background: var(--isd-surface, #fff);
	}

	.isd-mobile-menu__commerce {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.isd-mobile-menu__commerce-link {
		display: flex;
		align-items: center;
		gap: 10px;
		min-width: 0;
		min-height: 50px;
		padding: 10px 12px;
		border: 1px solid var(--isd-h-field-border);
		border-radius: 9px;
		background: var(--isd-h-field-bg);
		color: var(--isd-h-navy);
		font-size: 14px;
		font-weight: 700;
		line-height: 1.2;
		text-decoration: none;
	}

	.isd-mobile-menu__commerce-link:hover,
	.isd-mobile-menu__commerce-link:focus-visible {
		border-color: var(--isd-h-accent);
		color: var(--isd-h-accent);
	}

	.isd-mobile-menu__commerce-link .isd-lucide-icon {
		width: 22px;
		height: 22px;
	}

	.isd-mobile-menu__commerce-label {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.isd-header-cart--mobile .isd-header-cart__count {
		position: static;
		min-width: 24px;
		height: 24px;
		margin-left: auto;
		border-width: 0;
	}

	.isd-mobile-menu__help {
		color: var(--isd-h-navy);
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
	}

	.isd-mobile-menu__help:hover,
	.isd-mobile-menu__help:focus-visible {
		color: var(--isd-h-accent);
	}

	.isd-mobile-menu__cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		padding: 12px 18px;
		border-radius: 6px;
		background: var(--isd-h-accent);
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		text-decoration: none;
	}

	.isd-mobile-menu__cta:hover,
	.isd-mobile-menu__cta:focus-visible {
		background: var(--isd-h-accent-hover);
		color: #fff;
	}
}

@media (max-width: 719px) {
	.isd-mobile-offcanvas .kb-off-canvas-inner-wrap {
		width: min(100vw, 420px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.isd-mobile-menu__toggle .kadence-svg-iconset {
		transition: none;
	}
}