/* INSTROFINE header — refined live v1 (Xpro template, Elementor containers).
   Scoped to .if-hdr and the header dialogs. Brand: Graphite / White / Paper, restrained Vermilion, IBM Plex. */
.if-hdr, .if-search, .if-drawer, .if-scrim {
  --if-ink: #1D2226; --if-white: #FFFFFF; --if-paper: #F7F6F2; --if-steel: #4A535B; --if-muted: #5C656D;
  --if-subtle: #ECEEEF; --if-control: #7E878F; --if-line: #D5D9DC; --if-accent: #E4572E;
  --if-sans: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif; --if-mono: "IBM Plex Mono", Consolas, Menlo, monospace;
  --if-bar-h: 80px; --if-gutter: 24px; --if-max: 1200px; --if-top: var(--wp-admin--admin-bar--height, 0px);
  font-family: var(--if-sans); color: var(--if-ink);
}
@media (max-width: 767px) { .if-hdr, .if-search, .if-drawer, .if-scrim { --if-bar-h: 64px; --if-gutter: 16px; } }
@media (max-width: 600px) { .if-hdr, .if-search, .if-drawer, .if-scrim { --if-top: 0px; } }

.if-hdr *, .if-search *, .if-drawer * { box-sizing: border-box; }
.if-hdr [hidden], .if-search[hidden], .if-search [hidden], .if-drawer[hidden], .if-drawer [hidden], .if-scrim[hidden] { display: none !important; }
.if-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.if-ic { width: 20px; height: 20px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.if-hdr :focus-visible, .if-search :focus-visible, .if-drawer :focus-visible { outline: 2px solid var(--if-accent) !important; outline-offset: 2px; box-shadow: none; }

/* ---------- Header shell ---------- */
/* Neutralise Elementor container defaults (padding/gap) inside the header; components set their own spacing. */
.if-hdr, .if-hdr .e-con { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; --container-widget-width: auto; }
.if-hdr.e-con, .if-hdr .e-con { padding: 0; gap: 0; min-height: 0; }
.if-hdr .if-hdr__dialogs { display: none !important; }
.if-hdr .elementor-button-content-wrapper { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }
.if-hdr { position: relative; z-index: 999; background: var(--if-white); border-bottom: 1px solid var(--if-line); transition: box-shadow .16s linear; }
.if-hdr.is-scrolled { box-shadow: 0 2px 10px rgba(29, 34, 38, .07); }
/* Desktop/tablet: the whole bar stays at the top. If the Xpro/Elementor wrapper is only as tall as the header, JS marks it as the sticky host. */
@media (min-width: 768px) and (min-height: 481px) {
  .if-hdr { position: sticky; top: var(--if-top); }
  .if-sticky-host { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 999; }
  .if-sticky-host .if-hdr { position: relative; top: auto; }
}
/* Phones: only the 64px bar (with search, cart and menu) pins; the search row scrolls away. JS keeps the header's height, so nothing jumps. */
@media (max-width: 767px) {
  .if-hdr.is-pinned .if-hdr__bar { position: fixed !important; top: var(--if-top); left: 0; right: 0; z-index: 1000; background: var(--if-white); border-bottom: 1px solid var(--if-line); box-shadow: 0 2px 10px rgba(29, 34, 38, .07); }
}
.if-hdr .if-hdr__bar { max-width: var(--if-max); margin: 0 auto; min-height: var(--if-bar-h); padding: 0 var(--if-gutter) !important; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 24px; }
.if-hdr .if-hdr__bar > .e-con-inner { display: contents; }
.if-hdr .if-hdr__brand { flex: 0 0 auto; width: auto; padding: 0 !important; }
.if-logo { display: block; width: 210px; margin-left: -7px; line-height: 0; }
.if-logo svg { display: block; width: 100%; height: auto; }
.if-hdr .if-hdr__nav { flex: 0 1 auto; width: auto; margin-left: auto; display: flex; flex-direction: row; align-items: center; gap: 4px; padding: 0 !important; }
.if-hdr .if-hdr__tools { flex: 0 0 auto; width: auto; display: flex; flex-direction: row; align-items: center; gap: 2px; padding: 0 0 0 16px !important; margin-left: 12px; border-left: 1px solid var(--if-line); }
.if-hdr .elementor-widget { margin: 0 !important; width: auto; }
.if-hdr .elementor-widget-container { margin: 0; padding: 0; }

/* Nav toggles (Elementor Button widgets with class .if-toggle) */
.if-hdr .if-toggle .elementor-button-wrapper { line-height: 1; }
.if-hdr .if-toggle .elementor-button,
.if-hdr .if-toggle .elementor-button:hover,
.if-hdr .if-toggle .elementor-button:focus { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; background: transparent !important; border: 0; border-radius: 0; box-shadow: none; color: var(--if-ink) !important; fill: var(--if-ink); font: 500 15px/20px var(--if-sans); letter-spacing: 0; text-transform: none; text-decoration: none; }
.if-hdr .if-toggle .elementor-button::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; background: var(--if-accent); transform: scaleX(0); transform-origin: left center; transition: transform .16s cubic-bezier(.2, 0, 0, 1); }
.if-hdr .if-toggle .elementor-button:hover::after,
.if-hdr .if-toggle .elementor-button[aria-expanded="true"]::after,
.if-hdr .if-toggle .elementor-button.is-current::after { transform: scaleX(1); }
.if-hdr .if-toggle .if-chev { width: 12px; height: 12px; transition: transform .16s cubic-bezier(.2, 0, 0, 1); }
.if-hdr .if-toggle [aria-expanded="true"] .if-chev { transform: rotate(180deg); }

/* Icon controls */
.if-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: 999px; background: transparent; color: var(--if-ink) !important; cursor: pointer; text-decoration: none !important; box-shadow: none; }
.if-icon-btn:hover { background: var(--if-paper); color: var(--if-ink); }
.if-cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; background: var(--if-ink); color: var(--if-white); font: 500 11px/1 var(--if-sans); font-variant-numeric: tabular-nums; border-radius: 999px; }
.if-hdr .if-menu-open { display: none; }

/* Mobile search row (visible at the top of the page on phones) */
.if-hdr .if-hdr__msearch { display: none; padding: 0 var(--if-gutter) 12px !important; }
.if-search-field { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 18px; border: 1px solid var(--if-control); border-radius: 999px; background: var(--if-white); color: var(--if-muted); font: 400 16px/24px var(--if-sans); text-align: left; cursor: pointer; box-shadow: none; }
.if-search-field:hover { border-color: var(--if-steel); color: var(--if-steel); background: var(--if-white); }
.if-search-field .if-ic { color: var(--if-ink); }
.if-text-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--if-ink); font: 500 15px/20px var(--if-sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.if-text-btn:hover { background: none; color: var(--if-ink); text-decoration-thickness: 2px; }

/* ---------- Dropdown panels (Shop / About / Help) ---------- */
.if-hdr .if-panel { display: none; position: absolute !important; left: 0; right: 0; top: 100%; z-index: 998; background: var(--if-white); border-top: 1px solid var(--if-line); border-bottom: 1px solid var(--if-line); box-shadow: 0 16px 28px rgba(29, 34, 38, .07); padding: 0 !important; max-height: calc(100vh - var(--if-bar-h) - var(--if-top)); overflow: auto; overscroll-behavior: contain; }
.if-hdr .if-panel.is-open { display: block; animation: if-drop .16s cubic-bezier(.2, 0, 0, 1) both; }
@keyframes if-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.if-hdr .if-panel__inner { max-width: var(--if-max); margin: 0 auto; padding: 28px var(--if-gutter) 32px !important; display: grid !important; gap: 40px; align-items: start; }
.if-hdr .if-panel__inner > .e-con-inner { display: contents; }
.if-hdr .if-panel--shop .if-panel__inner { grid-template-columns: minmax(0, 300px) minmax(0, 1.3fr) minmax(0, 1fr); }
.if-hdr .if-panel__intro { background: var(--if-paper); padding: 24px !important; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; align-self: stretch; }
.if-hdr .if-panel__col { padding: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.if-hdr .if-panel .elementor-heading-title { margin: 0; color: var(--if-ink); font: 600 13px/18px var(--if-sans); letter-spacing: .06em; text-transform: uppercase; }
.if-hdr .if-panel__intro .elementor-heading-title { font: 600 22px/30px var(--if-sans); letter-spacing: 0; text-transform: none; }
.if-hdr .if-panel .elementor-widget-text-editor, .if-hdr .if-panel .elementor-widget-text-editor p { margin: 0; color: var(--if-steel); font: 400 15px/24px var(--if-sans); }
.if-hdr .if-panel .elementor-icon-list-items { list-style: none; margin: 0; padding: 0; }
.if-hdr .if-types .elementor-icon-list-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.if-hdr .if-panel .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--if-subtle); }
.if-hdr .if-panel .elementor-icon-list-item::after { display: none !important; }
.if-hdr .if-panel .elementor-icon-list-item > a, .if-hdr .if-panel .elementor-icon-list-item > span { display: flex; align-items: center; min-height: 44px; padding: 8px 0; color: var(--if-ink); text-decoration: none; font: 400 15px/22px var(--if-sans); }
.if-hdr .if-panel .elementor-icon-list-item > a:hover .elementor-icon-list-text { text-decoration: underline; text-underline-offset: 4px; }
.if-hdr .if-panel .elementor-icon-list-text { color: inherit; padding: 0; }
.if-hdr .if-panel .elementor-icon-list-icon { display: none; }
.if-hdr .if-panel .elementor-button,
.if-hdr .if-panel .elementor-button:hover { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 22px; background: var(--if-ink); color: var(--if-white) !important; border-radius: 999px; font: 500 15px/20px var(--if-sans); text-decoration: none; box-shadow: none; }
.if-hdr .if-panel .elementor-button:hover { background: var(--if-steel); }
.if-hdr .if-panel--about .if-panel__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.if-hdr .if-panel--about .elementor-heading-title { font: 600 24px/32px var(--if-sans); letter-spacing: 0; text-transform: none; }
.if-hdr .if-panel--about .if-panel__col { gap: 16px; align-items: flex-start; }
.if-hdr .if-panel--help .if-panel__inner { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.if-hdr .if-panel--help .elementor-icon-list-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }

/* ---------- Search dialog ---------- */
.if-scrim { position: fixed; inset: 0; z-index: 997; background: rgba(29, 34, 38, .28); }
.if-search { position: fixed; left: 0; right: 0; top: var(--if-top); z-index: 1001; background: var(--if-white); border-bottom: 1px solid var(--if-line); box-shadow: 0 16px 32px rgba(29, 34, 38, .12); max-height: calc(100vh - var(--if-top)); overflow: auto; overscroll-behavior: contain; animation: if-drop .16s cubic-bezier(.2, 0, 0, 1) both; }
.if-search__inner { max-width: 880px; margin: 0 auto; padding: 16px var(--if-gutter) 28px; }
.if-search__top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.if-search__title { margin: 0; font: 600 13px/18px var(--if-sans) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--if-steel); }
.if-search__form { display: flex; gap: 8px; margin: 4px 0 16px; }
.if-search__field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 8px 0 20px; border: 1px solid var(--if-ink); border-radius: 999px; background: var(--if-white); }
.if-search__field:focus-within { outline: 2px solid var(--if-accent); outline-offset: 2px; }
.if-search__field input[type="search"] { flex: 1; min-width: 0; height: 50px; margin: 0; padding: 0; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent; color: var(--if-ink); font: 400 17px/24px var(--if-sans); }
.if-search__field input::placeholder { color: var(--if-muted); opacity: 1; }
.if-search__field input::-webkit-search-cancel-button { display: none; }
.if-search__clear { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--if-steel); cursor: pointer; }
.if-search__submit { min-height: 52px; padding: 0 26px; border: 1px solid var(--if-ink); border-radius: 999px; background: var(--if-ink); color: var(--if-white); font: 500 16px/22px var(--if-sans); cursor: pointer; }
.if-search__submit:hover { background: var(--if-steel); border-color: var(--if-steel); }
.if-search__hint { margin: 0 0 12px; color: var(--if-steel); font: 400 15px/24px var(--if-sans); }
.if-search__hint em { font-style: normal; font-weight: 500; color: var(--if-ink); }
.if-search__quick ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.if-search__quick a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--if-control); border-radius: 999px; color: var(--if-ink); text-decoration: none; font: 500 14px/20px var(--if-sans); }
.if-search__quick a:hover { border-color: var(--if-ink); background: var(--if-paper); }
.if-search__note { margin: 0 0 8px; color: var(--if-steel); font: 400 15px/22px var(--if-sans); }
.if-search__note b { color: var(--if-ink); font-weight: 600; }
.if-search__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--if-line); }
.if-search__group { margin: 0; padding: 12px 0 4px; font: 500 12px/16px var(--if-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--if-steel); }
.if-opt { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 48px; padding: 8px 12px; border-radius: 12px; cursor: pointer; color: var(--if-ink); font: 400 15px/21px var(--if-sans); }
.if-opt[aria-selected="true"] { background: var(--if-subtle); }
.if-opt.is-text { grid-template-columns: minmax(0, 1fr) auto; }
.if-opt .th { width: 44px; height: 44px; object-fit: contain; background: var(--if-paper); display: block; border-radius: 8px; }
.if-opt .nm { font-weight: 600; overflow-wrap: anywhere; }
.if-opt .nm .typed { font-weight: 400; }
.if-opt .meta { display: block; font: 500 12px/18px var(--if-mono); color: var(--if-steel); }
.if-opt .n { font: 500 12px/18px var(--if-mono); color: var(--if-muted); }
.if-empty { padding: 12px 0 4px; font: 400 15px/22px var(--if-sans); color: var(--if-ink); }

/* ---------- Mobile drawer ---------- */
.if-drawer { position: fixed; inset: 0; z-index: 1002; background: var(--if-white); overflow: auto; overscroll-behavior: contain; animation: if-drop .2s cubic-bezier(.2, 0, 0, 1) both; }
.if-drawer__top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: var(--if-bar-h); padding: 0 8px 0 var(--if-gutter); background: var(--if-white); border-bottom: 1px solid var(--if-line); }
.if-drawer__title { margin: 0; font: 600 16px/22px var(--if-sans) !important; color: var(--if-ink); }
.if-drawer__body { padding: 16px var(--if-gutter) 40px; display: flex; flex-direction: column; gap: 16px; }
.if-drawer__sec > button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0; border: 0; border-bottom: 1px solid var(--if-line); background: none; color: var(--if-ink); font: 500 17px/24px var(--if-sans); text-align: left; cursor: pointer; border-radius: 0; }
.if-drawer__sec > button .if-chev { width: 14px; height: 14px; transition: transform .16s cubic-bezier(.2, 0, 0, 1); }
.if-drawer__sec > button[aria-expanded="true"] .if-chev { transform: rotate(180deg); }
.if-drawer__panel { padding: 4px 0 12px; }
.if-drawer__panel .elementor-heading-title { margin: 12px 0 4px; font: 600 12px/16px var(--if-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--if-steel); }
.if-drawer__panel .elementor-icon-list-items { list-style: none; margin: 0; padding: 0; }
.if-drawer__panel .elementor-icon-list-item > a { display: flex; align-items: center; min-height: 48px; padding: 8px 0; color: var(--if-ink); text-decoration: none; font: 400 16px/22px var(--if-sans); border-bottom: 1px solid var(--if-subtle); }
.if-drawer__panel .elementor-icon-list-icon { display: none; }
.if-drawer__panel p { margin: 0 0 8px; color: var(--if-steel); font: 400 15px/24px var(--if-sans); }
.if-drawer__panel .elementor-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; margin-top: 8px; background: var(--if-ink); color: var(--if-white) !important; border-radius: 999px; font: 500 15px/20px var(--if-sans); text-decoration: none; }
.if-drawer__link { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--if-line); color: var(--if-ink) !important; text-decoration: none; font: 500 17px/24px var(--if-sans); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .if-hdr .if-panel--shop .if-panel__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .if-hdr .if-panel--shop .if-panel__intro { grid-column: 1 / -1; } }
@media (max-width: 767px) {
  .if-hdr .if-hdr__bar { gap: 8px; padding-right: 8px !important; }
  .if-logo { width: 180px; margin-left: -6px; }
  .if-hdr .if-hdr__nav, .if-hdr .if-panel { display: none !important; }
  .if-hdr .if-hdr__tools { border-left: 0; padding-left: 0 !important; margin-left: auto; gap: 0; }
  .if-hdr .if-account { display: none; }
  .if-hdr .if-menu-open { display: inline-flex; }
  .if-hdr .if-hdr__msearch { display: block; }
  .if-search { top: 0; max-height: 100vh; height: 100%; border-bottom: 0; }
  .if-search__inner { padding-top: 8px; }
  .if-search__submit { display: none; }
}
@media (max-width: 359px) { .if-hdr .if-icon-btn { width: 40px; } }
@media (prefers-reduced-motion: reduce) {
  .if-hdr, .if-hdr *, .if-search, .if-search *, .if-drawer, .if-drawer * { animation: none !important; transition: none !important; }
}

/* ---------- Guard against theme button states (Astra styles button:hover/:focus globally) ---------- */
:is(.if-hdr, .if-search, .if-drawer) :is(.if-icon-btn, .if-search__clear, .if-text-btn, .if-sub-toggle, .if-drawer__sec > button),
:is(.if-hdr, .if-search, .if-drawer) :is(.if-icon-btn, .if-search__clear, .if-text-btn, .if-sub-toggle, .if-drawer__sec > button):is(:hover, :focus, :active) {
  background-color: transparent; background-image: none; color: var(--if-ink); border-color: transparent; box-shadow: none; text-shadow: none;
}
:is(.if-hdr, .if-search, .if-drawer) .if-icon-btn.if-icon-btn:hover { background-color: var(--if-paper); }
:is(.if-hdr, .if-drawer) .if-search-field:is(:hover, :focus, :active) { background-color: var(--if-white); color: var(--if-steel); border-color: var(--if-steel); box-shadow: none; }
.if-search .if-search__submit:is(:hover, :focus, :active) { background-color: var(--if-steel); color: var(--if-white); border-color: var(--if-steel); box-shadow: none; }
.if-search .if-search__submit { background-image: none; }

/* Panels are moved next to their toggles at runtime; keep the full-width panel anchored to the header. */
@media (min-width: 768px) { .if-hdr .if-hdr__bar, .if-hdr .if-hdr__nav { position: static !important; } }
/* Elementor editor: show panels inline so their headings, links and buttons can be edited. */
body.elementor-editor-active .if-hdr .if-panel { display: block !important; position: relative !important; box-shadow: none; max-height: none; }

/* Mouse clicks: no focus rectangle (the theme draws a dotted one). Keyboard focus keeps the visible ring above. */
:is(.if-hdr, .if-search, .if-drawer) :is(a, button, [role="button"]):focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }

/* Shop: label links to the Shop page; the arrow button beside it controls the dropdown. */
.if-hdr .if-toggle.has-sub-toggle, .if-hdr .if-toggle.has-sub-toggle > .elementor-widget-container, .if-hdr .if-toggle.has-sub-toggle .elementor-button-wrapper { display: flex; align-items: center; }
.if-hdr .if-toggle.has-sub-toggle .elementor-button, .if-hdr .if-toggle.has-sub-toggle .elementor-button:hover, .if-hdr .if-toggle.has-sub-toggle .elementor-button:focus { padding-right: 2px; }
.if-hdr .if-toggle.has-sub-toggle .elementor-button::after { right: 2px; }
.if-hdr .if-sub-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: 999px; cursor: pointer; }
.if-hdr .if-sub-toggle .if-chev { width: 12px; height: 12px; transition: transform .16s cubic-bezier(.2, 0, 0, 1); }
.if-hdr .if-sub-toggle[aria-expanded="true"] .if-chev { transform: rotate(180deg); }
.if-hdr .if-toggle.is-open .elementor-button::after { transform: scaleX(1); }