/* INSTROFINE Shop hub, category directory and category-page links (review stage).
   Loaded only when the hub is active (review link or approved). Builds on if-home.css tokens and tiles. */
.if-shophub, .if-dir, .if-subcats, .if-shop-compact {
  --ink: #1D2226; --white: #FFFFFF; --paper: #F7F6F2; --steel: #4A535B; --muted: #5C656D; --subtle: #ECEEEF;
  --control: #7E878F; --line: #D5D9DC; --accent: #E4572E; --accent-text: #A93A16;
  --sans: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --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: var(--sans);
  font-family: var(--sans); color: var(--ink);
}
.if-shophub *, .if-dir *, .if-subcats *, .if-shop-compact * { box-sizing: border-box; }
.if-dir [hidden] { display: none !important; }
.if-shophub :focus-visible, .if-dir :focus-visible, .if-subcats :focus-visible, .if-shop-compact :focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; }
.if-shophub :is(a, button):focus:not(:focus-visible), .if-dir :is(a, button):focus:not(:focus-visible), .if-subcats a:focus:not(:focus-visible) { outline: none !important; }

/* The hub sits inside the theme's shop column, which already provides the side gutters. */
.if-shophub.if-home { background: transparent; }
.if-shophub .if-wrap { max-width: none; padding: 0; }
.if-shophub .if-shophub__section { padding: 0 0 48px; }
.if-shophub [id], #all-categories, #all-products { scroll-margin-top: 96px; }
@media (max-width: 767px) { .if-shophub [id], #all-categories, #all-products { scroll-margin-top: 80px; } }

/* Head: title, intro, search, two jump links */
.if-shophub .if-shophub__head { padding: 8px 0 40px; }
.if-shophub .if-shophub__title .elementor-heading-title { color: var(--ink); font: 600 clamp(30px, 1.6vw + 20px, 44px)/1.15 var(--sans); letter-spacing: -.015em; }
.if-shophub .if-shophub__intro p { max-width: 42em; padding-top: 10px; color: var(--steel); font: 400 17px/27px var(--sans); }
.if-shophub .if-home-search { padding-top: 24px; }
.if-shophub .if-home-search .if-search-field { max-width: 640px; min-height: 52px; padding: 0 20px; }
.if-shophub .if-jump { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 28px; padding-top: 14px; }
.if-shophub .if-jump > .elementor-widget { width: auto; }
.if-shophub .if-jump .if-textlink .elementor-button-text::after { width: 16px; height: 16px; margin-left: 8px; transform: rotate(90deg); }

/* Overview routes */
.if-shophub .if-routes { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; align-items: start; }
.if-shophub .if-routes__col { width: auto; }
.if-shophub .if-routes .if-h2 .elementor-heading-title { font-size: 22px; line-height: 30px; }
.if-shophub .if-routes .if-tiles { padding-top: 16px; }
.if-shophub .if-routes .if-tiles--types { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.if-shophub .if-routes .if-tiles--specialties { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.if-shophub .if-routes .if-tile .elementor-button { min-height: 60px; padding: 14px 16px; font-size: 16px; line-height: 22px; }
.if-shophub .if-routes__note p { padding-top: 12px; color: var(--muted); font: 400 14px/22px var(--sans); }

/* Section headings for the directory and product list */
.if-shophub .if-anchor-head { padding-top: 8px; border-top: 1px solid var(--line); }
.if-shophub .if-anchor-head .elementor-heading-title { padding-top: 32px; color: var(--ink); font: 600 clamp(24px, .8vw + 18px, 30px)/1.2 var(--sans); }
.if-shophub .if-dir-intro p { padding: 8px 0 20px; color: var(--steel); font: 400 16px/26px var(--sans); }

/* ---------- Directory ---------- */
.if-dir__review { margin: 0 0 28px; padding: 16px 20px; border: 1px dashed var(--control); border-radius: 14px; background: var(--paper); }
.if-dir__review-title { margin: 0 0 6px; color: var(--accent-text); font: 600 12px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.if-dir__review ul { margin: 0; padding-left: 18px; color: var(--steel); font: 400 14px/22px var(--sans); }
.if-dir__flag { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--subtle); color: var(--accent-text); font: 500 11px/18px var(--sans); letter-spacing: .02em; vertical-align: 1px; white-space: nowrap; }
.if-dir__tools { margin: 0; }
.if-shophub .if-dir { margin-top: 24px; }
/* Desktop: at most three comfortable columns; parents clearly stronger than children. */
.if-dir__groups { columns: 300px 3; column-gap: 56px; }
.if-dir__group { break-inside: avoid; margin: 0 0 44px; padding: 0; }
.if-dir__title { margin: 0; font: 600 19px/26px var(--sans); }
.if-dir__title a { display: inline-block; min-height: 26px; color: var(--ink); text-decoration: none; }
.if-dir__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.if-dir__meta { margin: 2px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--muted); font: 400 14px/20px var(--sans); }
.if-dir__list { list-style: none; margin: 0; padding: 0; }
.if-dir__list li { margin: 0; padding: 4px 0; font: 400 16px/24px var(--sans); }
.if-dir__list a { display: inline-block; min-height: 24px; color: var(--ink); text-decoration: none; }
.if-dir__list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.if-dir__n { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.if-dir__subtoggle { display: flex; align-items: center; gap: 6px; min-height: 32px; margin: 2px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--steel); font: 500 14px/20px var(--sans); text-decoration: underline; text-underline-offset: 4px; text-transform: none; cursor: pointer; }
.if-dir__subtoggle:hover, .if-dir__subtoggle:focus, .if-dir__subtoggle:active { background: none; color: var(--ink); border: 0; box-shadow: none; }
.if-dir__subtoggle[aria-expanded="true"] .if-dir__chev { transform: rotate(180deg); }
.if-dir__sub { margin: 4px 0 4px 2px; padding-left: 14px; border-left: 1px solid var(--line); }
.if-dir__sub li { padding: 3px 0; font-size: 15px; line-height: 22px; }
/* Main categories without subcategories: one compact list after the groups. */
.if-dir__more { margin: 8px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.if-dir__more-title { margin: 0 0 12px; font: 600 19px/26px var(--sans); color: var(--ink); }
.if-dir__more-list { list-style: none; margin: 0; padding: 0; columns: 300px 3; column-gap: 56px; }
.if-dir__more-list li { break-inside: avoid; margin: 0; padding: 4px 0; font: 400 16px/24px var(--sans); }
.if-dir__more-list a { display: inline-block; min-height: 24px; color: var(--ink); text-decoration: none; }
.if-dir__more-list a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Mobile: labelled one-tap disclosure per group (no JavaScript: everything stays open) */
.if-dir__toggle, .if-dir__expand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 16px; border: 1px solid var(--control); border-radius: 999px; background: var(--white); color: var(--ink); font: 500 15px/20px var(--sans); cursor: pointer; box-shadow: none; text-transform: none; }
.if-dir__toggle:hover, .if-dir__expand:hover, .if-dir__toggle:focus, .if-dir__expand:focus { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.if-dir__chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .16s linear; }
.if-dir__toggle[aria-expanded="true"] .if-dir__chev { transform: rotate(180deg); }
.if-dir.is-collapsible .if-dir__groups { columns: auto; }
.if-dir.is-collapsible .if-dir__tools { margin-bottom: 8px; }
/* Phone row: name and counts on the left, a labelled Show/Hide control on the right, children below. */
.if-dir.is-collapsible .if-dir__group { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.if-dir.is-collapsible .if-dir__group:first-child { border-top: 1px solid var(--line); }
.if-dir.is-collapsible .if-dir__title { grid-column: 1; }
.if-dir.is-collapsible .if-dir__title a { display: inline-flex; align-items: center; min-height: 32px; }
.if-dir.is-collapsible .if-dir__meta { grid-column: 1; margin: 0; }
.if-dir.is-collapsible .if-dir__toggle { grid-column: 2; grid-row: 1 / span 2; padding: 0 14px; }
.if-dir.is-collapsible .if-dir__body { grid-column: 1 / -1; padding-top: 8px; }
.if-dir.is-collapsible .if-dir__group:not(.is-open) .if-dir__body { display: none; }
.if-dir.is-collapsible .if-dir__list > li { padding: 0; }
.if-dir.is-collapsible .if-dir__list a, .if-dir.is-collapsible .if-dir__more-list a { display: inline-flex; align-items: center; min-height: 40px; }
.if-dir.is-collapsible .if-dir__meta { padding-bottom: 0; border-bottom: 0; }
.if-dir.is-collapsible .if-dir__subtoggle { min-height: 44px; }
.if-dir.is-collapsible .if-dir__more-list { columns: auto; }
.if-dir.is-collapsible .if-dir__more-list li { padding: 0; border-bottom: 1px solid var(--line); }

/* ---------- Category pages: child-category links ---------- */
.if-subcats { margin: 8px 0 24px; }
.if-subcats__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin: 0 0 10px; }
.if-subcats__title { margin: 0; color: var(--steel); font: 600 13px/18px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.if-subcats__jump { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink) !important; font: 500 16px/22px var(--sans); text-decoration: underline !important; text-underline-offset: 5px; }
.if-subcats__jump::after { content: "\2193"; text-decoration: none; display: inline-block; }
.if-subcats__list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.if-subcats__list li { margin: 0; }
.if-subcats__list a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--control); border-radius: 999px; background: var(--white); color: var(--ink) !important; text-decoration: none !important; font: 500 15px/20px var(--sans); }
.if-subcats__list a:hover { border-color: var(--ink); background: var(--paper); }
.if-subcats__n { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.if-subcats.is-compact .if-subcats__list li:nth-child(n+7) { display: none; }
.if-subcats__more { display: inline-flex; align-items: center; min-height: 44px; margin: 12px 0 0; padding: 0 18px; border: 1px solid var(--control); border-radius: 999px; background: var(--white); color: var(--ink); font: 500 15px/20px var(--sans); box-shadow: none; text-transform: none; cursor: pointer; }
.if-subcats__more:hover, .if-subcats__more:focus, .if-subcats__more:active { background: var(--paper); border-color: var(--ink); color: var(--ink); box-shadow: none; }
.if-subcats [hidden] { display: none !important; }
.if-products-anchor { display: block; height: 0; scroll-margin-top: 96px; }
@media (max-width: 767px) { .if-products-anchor { scroll-margin-top: 80px; } }

/* ---------- Sorted / paged / search views ---------- */
.if-shop-compact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0 0 24px; }
.if-shop-compact .if-search-field { flex: 1 1 320px; max-width: 560px; min-height: 48px; }
.if-shop-compact__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink) !important; font: 500 16px/22px var(--sans); text-decoration: underline; text-underline-offset: 5px; }
.if-shop-compact .if-search-field:is(:hover, :focus, :active), .if-shophub .if-search-field:is(:hover, :focus, :active) { background-color: var(--white); background-image: none; color: var(--steel); border-color: var(--steel); box-shadow: none; }

@media (max-width: 900px) { .if-shophub .if-routes { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 767px) {
  /* Phones already show the header's search field directly above; avoid a second one. */
  .if-shophub .if-home-search, .if-shop-compact .if-search-field { display: none; }
  .if-shophub .if-shophub__head { padding-bottom: 28px; }
  .if-shophub .if-jump { flex-direction: column; gap: 0; }
  .if-shophub .if-routes .if-tiles--types, .if-shophub .if-routes .if-tiles--specialties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .if-dir__chev { transition: none; } }

/* Plain link lists for "Browse by instrument type" and "Browse by specialty" (owner decision, 1 Oct 2026):
   no repeated cards and no decorative arrows. The Elementor button widgets stay editable; only their styling changes.
   Remove this block to restore the earlier tiles. */
.if-shophub .if-tiles--types,
.if-shophub .if-tiles--specialties { display: block !important; columns: 2 200px; column-gap: 32px; }
.if-shophub .if-tiles > .elementor-widget { break-inside: avoid; width: auto !important; height: auto !important; margin: 0 !important; }
.if-shophub .if-tile .elementor-button,
.if-shophub .if-tile .elementor-button:hover,
.if-shophub .if-tile .elementor-button:focus { display: inline-block !important; min-height: 0 !important; padding: 7px 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--ink, #1D2226) !important; font-weight: 400 !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.if-shophub .if-tile .elementor-button:hover { text-decoration-thickness: 2px; }
.if-shophub .if-tile .elementor-button::after { display: none !important; }
@media (max-width: 767px) {
  .if-shophub .if-tiles--types,
  .if-shophub .if-tiles--specialties { columns: 2 140px; column-gap: 24px; }
  .if-shophub .if-tile .elementor-button,
  .if-shophub .if-tile .elementor-button:hover,
  .if-shophub .if-tile .elementor-button:focus { padding: 11px 0 !important; } /* links of at least 44 px */
}