/* wp-nav.css — styling for partials/nav.html.
   Extracted from inline <style> blocks so the ~26 KB is fetched once per
   visitor instead of re-downloaded with every HTML response. Blocks appear in
   their original document order; the ONE Jinja guard that was in here
   (brand_is_regional) is now the `body.wpc-regional` class set by base.html.

   The tiny critical block that hides .wpc-typebar-panel / .wpc-hm-panel
   deliberately STAYS inline in nav.html — it has to apply before this file
   lands or the dropdowns flash unstyled.

   Linked from partials/head.html — bump its ?v= whenever this file changes. */

/* ── desktop top type-strip (colored tiles + "⋯" overflow dropdown) ─────────────────────────────────── */
      /* Kill the 1px stripe at the very top above the colored strip:
         comes from a combination of (a) inherited margins on body/header,
         (b) wp-main.css `.menu-item { border-bottom: 1px solid #f2f2f2 }`,
         (c) `.menu-item.menu-item-top { border-color: #F19725 }` painting
         the SAME border in the type's color. We zero it on the parent
         <nav> + the <ul>, and force `border:0` on every cell at the
         highest specificity that wp-main.css has. */
      nav.navgation { border: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; }
      nav.navgation::before, nav.navgation::after { display: none !important; }
      nav.navgation ul.navbar-nav { margin: 0 !important; padding: 0 !important; border: 0 !important; }

      /* Continuous black band behind the cells fills the empty space
         to the right of "Discover".  align-items: stretch (NOT the legacy
         "baseline" default that wp-main.css inherits) so every tile —
         colored type tiles AND the black flat tiles — fills the full
         row height. Without this, the multi-line type tiles (Free SVG,
         Coloring Pages, Become a Creator) baseline-aligned to a single-
         line tile and the rest of the row showed the page background
         (white), creating the "split-row" look the user reported. */
      nav.navgation ul.navbar-nav.d-lg-flex {
        background: #000;
        align-items: stretch !important;
        /* Single line — when narrow, scroll horizontally instead of
           wrapping a second line of black tiles below the colored ones
           (which left dangling black above + below the wrap and looked
           "weird" at intermediate widths). */
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
      }
      nav.navgation ul.navbar-nav.d-lg-flex::-webkit-scrollbar {
        display: none;
      }
      nav.navgation ul.navbar-nav.d-lg-flex > li.menu-item.wpc-h-type,
      nav.navgation ul.navbar-nav.d-lg-flex > li.menu-item.wpc-h-flat {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;   /* keep tile widths fixed; row scrolls */
      }

      /* ── Overflow "⋯" tile (black, matches the flat tiles). Hidden until
            JS detects the strip overflows; then trailing flat tiles collapse
            into #wpc-strip-more-menu. ── */
      nav.navgation ul.navbar-nav.d-lg-flex > li.wpc-strip-more {
        display: none;                 /* JS adds .is-shown to reveal */
        position: relative;
        flex-shrink: 0;
        background: #000 !important;
        border: 0 !important;
        border-left: 1px solid rgba(255,255,255,.14) !important;
        margin: 0 !important;
        align-items: stretch;
      }
      nav.navgation ul.navbar-nav.d-lg-flex > li.wpc-strip-more.is-shown { display: flex !important; }
      .wpc-strip-more-btn {
        background: none; border: 0; cursor: pointer; color: #fff;
        display: flex; align-items: center; height: 100%;
        padding: 0 1.05rem;
      }
      .wpc-strip-more-btn .wpc-h-icon { width: 22px; height: 22px; stroke: #fff; fill: none; }
      .wpc-strip-more-btn:hover { background: #2a2a2a; }
      /* position: fixed so the dropdown escapes the strip's overflow:hidden
         clip (the strip clips for its horizontal-scroll fallback). Top/right
         are set by JS from the "⋯" button rect on open. */
      .wpc-strip-more-menu {
        position: fixed; z-index: 10050;
        min-width: 210px; margin: 0; padding: .4rem;
        list-style: none; background: #fff;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 16px 32px -12px rgba(0,0,0,.4);
      }
      /* Collapsed tiles, restyled as plain dropdown rows (the strip's tile
         selectors no longer match once the li is inside this menu). */
      .wpc-strip-more-menu > li { display: block; background: transparent !important; border: 0 !important; }
      .wpc-strip-more-menu > li .menu-title { display: block; }
      .wpc-strip-more-menu > li .menu-title > a {
        display: flex; align-items: center; gap: .6rem;
        padding: .6rem .7rem; border-radius: 7px;
        color: #1f2937 !important; font-weight: 700; font-size: .98rem;
        text-decoration: none; white-space: nowrap;
      }
      .wpc-strip-more-menu > li .menu-title > a:hover { background: #f1f5f9; }
      .wpc-strip-more-menu > li .wpc-h-icon { width: 19px; height: 19px; stroke: #1f2937; fill: none; flex: 0 0 auto; }
      /* Collapsed colored type tiles drop their ▾ toggle + keyword submenu;
         in the dropdown they read as plain section links. */
      .wpc-strip-more-menu > li .toggle,
      .wpc-strip-more-menu > li .submenu { display: none !important; }

      /* Each cell — colored background, no border anywhere; only a thin
         vertical separator. Highest specificity to overrule the legacy
         `nav.navgation ul.navbar-nav > .menu-item.menu-item-top { border-color: #F19725 }`
         rule that paints the colored top stripe. */
      nav.navgation ul.navbar-nav.d-lg-flex > li.menu-item.wpc-h-type,
      nav.navgation ul.navbar-nav.d-lg-flex > li.menu-item.wpc-h-flat {
        background: var(--type-color, #1E3A8A) !important;
        border: 0 !important;
        border-right: 1px solid rgba(255,255,255,.14) !important;
        margin: 0 !important;
      }
      /* Compact the height — original padding was ~14px; tightened another
         4px (~0.25rem each side, now ~0.1rem vertical). */
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item.wpc-h-type > .menu-title,
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item.wpc-h-flat > .menu-title {
        padding: .1rem .85rem !important;
        line-height: 1.2 !important;
      }
      /* White text on every colored ground (yellow tile gone, all current
         colours pass WCAG AA on white). */
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item.wpc-h-type > .menu-title > a,
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item.wpc-h-flat > .menu-title > a {
        color: #fff !important;
        text-decoration: none !important;
      }
      /* Hover — only a color shift on the cell ground (no triangle, no
         underline, no glow). Type tiles deepen their own colour; black
         flat tiles lift to a charcoal so the change is perceptible. */
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item.wpc-h-type:hover {
        filter: brightness(0.88);
      }
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item.wpc-h-flat:hover {
        background: #2a2a2a !important;
      }
      /* Active-page indicator — when on a type page, the label gets a
         stippled (dotted) white underline directly under the text. No
         triangle / notch. */
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item.is-active-type > .menu-title > a,
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item.is-active-flat  > .menu-title > a {
        text-decoration: underline dotted rgba(255,255,255,.95) !important;
        text-underline-offset: 4px !important;
        text-decoration-thickness: 2px !important;
      }

      /* Caret + emoji icons → kill them in the top strip. */
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item.wpc-h-type .toggle,
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item.wpc-h-flat .toggle {
        display: none !important;
      }
      /* Kill EVERY ::after / ::before pseudo-element on top-strip cells —
         the legacy green chevron, the SVG-mask down-caret from wp-main.css
         (which renders as a small diamond on tiles with children, e.g.
         Backgrounds), hover arrows, anything else inherited. Wide selectors
         with !important + content:none so no specificity surprise wins. */
      nav.navgation ul.navbar-nav.d-lg-flex .menu-title a::after,
      nav.navgation ul.navbar-nav.d-lg-flex .menu-title a::before,
      nav.navgation ul.navbar-nav.d-lg-flex .menu-title::after,
      nav.navgation ul.navbar-nav.d-lg-flex .menu-title::before,
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item > a::after,
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item > a::before,
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item::after,
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item::before,
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item.menu-item-has-children > a::after,
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item.menu-item-has-children > a::before,
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item.menu-item-has-children .menu-title > a::after,
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item.menu-item-has-children .menu-title > a::before,
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item:hover .menu-title > a::after,
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item:hover .menu-title > a::before {
        display: none !important;
        content: none !important;
        background: none !important;
        -webkit-mask: none !important;
        mask: none !important;
      }

      /* Disable mouseover dropdowns site-wide for top-strip cells. */
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item.wpc-h-type .submenu,
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item.wpc-h-type:hover .submenu,
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item.wpc-h-flat .submenu {
        display: none !important;
      }

      /* Hide Login + Join Free from the colored top strip. */
      nav.navgation ul.navbar-nav.d-lg-flex > .menu-item.justify-content-end {
        display: none !important;
      }

      /* White-bordered SVG icons next to Image Tools / Guides / Become a
         Creator (replaces emoji 🛠 📖 ⭐). 16px, currentColor inherits
         the white text. */
      .wpc-h-icon { width: 16px; height: 16px; vertical-align: -3px;
        margin-right: .35rem; stroke: currentColor; stroke-width: 2;
        fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ── mobile inline search pill ─────────────────────────────────── */
  /* (Mobile header + hamburger CSS moved to /static/css/mobile-nav.css —
     loaded in <head> so it applies at first paint and avoids CLS.) */
  /* Mobile inline search — single uniform grey pill with the branded
     "[colorwheel] Search [Wallpapers.com]" overlay centered (same UX as
     the original live site). The overlay shows when input is empty +
     unfocused, hidden once the user types. The colorwheel sits as the
     FIRST child of the overlay, directly to the left of the word "Search". */
  .m-search-mobile { display: none; }
  .m-search-mobile {
    flex: 1 1 auto; min-width: 0;
    position: relative;
    background: #f3f4f6 !important;
    background-color: #f3f4f6 !important;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    height: 40px;
    padding: 0 .25rem 0 .85rem;
    align-items: center;
    gap: .15rem;
  }
  /* Every immediate descendant of the form must be background-transparent
     so the form's grey is the ONLY paint inside. Prevents any browser-
     default backgrounds (input, button, picture) from creating a
     lighter/darker patch inside the pill. */
  .m-search-mobile > * { background: transparent !important; }
  /* Input must visually fully blend with the form's grey. Several browser
     defaults paint the input differently when focused / autofilled —
     override every angle so the entire search box reads as ONE uniform
     grey regardless of state. */
  .m-search-mobile input.header-search {
    flex: 1 1 auto; min-width: 0;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: .92rem; color: #1f2937;
    height: 100%;
    padding: 0;
    -webkit-appearance: none;
            appearance: none;
  }
  .m-search-mobile input.header-search:focus,
  .m-search-mobile input.header-search:focus-visible,
  .m-search-mobile input.header-search:hover,
  .m-search-mobile input.header-search:active {
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
  }
  /* Kill Chrome's autofill yellow/blue tint — Chrome ignores `background`
     on -webkit-autofill, so we paint the form's grey via an inset shadow. */
  .m-search-mobile input.header-search:-webkit-autofill,
  .m-search-mobile input.header-search:-webkit-autofill:hover,
  .m-search-mobile input.header-search:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #f3f4f6 inset !important;
            box-shadow: 0 0 0 1000px #f3f4f6 inset !important;
    -webkit-text-fill-color: #1f2937 !important;
    transition: background-color 9999s ease-in-out 0s;
  }
  .m-search-mobile input.header-search::placeholder { color: transparent; }
  /* The branded overlay sits OVER the input. Background matches the form
     so the input is visually masked when the overlay is showing. Cluster
     is centered both horizontally (justify-content: center, buffer hidden)
     and vertically (every descendant aligned to center, no baseline). */
  .m-search-mobile .search-images {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 36px;
    padding: 0 .65rem;
    background: transparent;
    border-radius: 0;
    display: none;                          /* hidden by default */
    align-items: center !important;         /* vertical-center the cluster */
    justify-content: flex-start !important; /* cluster pinned to left edge */
    z-index: 1;
    pointer-events: none;
  }
  /* Visible only when the inline JS adds `.active` (input empty + unfocused).
     Focus / typing strips `.active` and the cluster gets out of the way. */
  .m-search-mobile .search-images.active { display: flex !important; }
  .m-search-mobile .search-images .search-logo-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem;
    line-height: 1;
    height: 100%;            /* fill the overlay so flex centers vertically */
  }
  .m-search-mobile .search-images .m-search-colorwheel {
    width: 22px !important; height: 22px !important;
    display: block !important;
    flex: 0 0 22px;
    vertical-align: middle;
    align-self: center;
  }
  .m-search-mobile .search-images .search-text {
    margin: 0 !important; padding: 0 !important;
    color: #1f2937; font-size: 1rem; font-weight: 500;
    line-height: 1;
    display: inline-flex; align-items: center;
    align-self: center;
  }
  .m-search-mobile .search-images .search-logo {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center;
    line-height: 1;
  }
  .m-search-mobile .search-images .search-logo img {
    height: 16px !important; width: auto !important;
    display: block !important;
    vertical-align: middle;
  }
  /* ccTLD wordmark (tighter viewBox). The cropped viewBox is ~6:1, so keep the
     mobile height modest — 26px rendered ~155px wide and overflowed the search
     overlay. 18px ≈ 107px wide: a touch bigger than the 16px .com default but
     no longer dominating the mobile search box.
     Was inline under a brand_is_regional guard; now scoped to the body class
     base.html sets for regional brands, so this file can stay static. */
  body.wpc-regional .m-search-mobile .search-images .search-logo img { height: 18px !important; }
  body.wpc-regional .search-logo img { height: 18px !important; width: auto !important; }
  .m-search-mobile .search-images .search-buffer { display: none; }
  .m-search-mobile button {
    flex: 0 0 auto; background: transparent; border: none;
    width: 36px; height: 36px; display: inline-flex;
    align-items: center; justify-content: center; cursor: pointer;
    color: #1f2937; padding: 0;
    position: relative; z-index: 2;
  }
  .m-search-mobile button:hover { color: #2464c4; }

/* ── sticky header layering ─────────────────────────────────── */
  header.new-sticky { position: sticky; top: 0; z-index: 1020; }
  @media (max-width: 768px) {
    header.new-sticky {
      top: 0;
      transition: transform .18s ease;
      will-change: transform;
    }
    body.wpc-top-ad-hidden nav.navgation {
      padding-top: 50px !important;
    }
    body.wpc-top-ad-hidden header.new-sticky {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      z-index: 1020;
    }
  }

/* ── "Go Premium" CTA (shimmer + star pulse) ─────────────────────────────────── */
          .nav-go-premium {
            background: #fef9c3;            /* very light yellow */
            border: 2px solid #f59e0b;      /* darker yellow border */
            color: #111 !important;          /* black text, important to beat .btn defaults */
            position: relative;
            overflow: hidden;
          }
          .nav-go-premium:hover { background: #fef08a; color: #000 !important; }
          /* Subtle shimmer sweep across the button — runs once every 3s */
          .nav-go-premium::after {
            content: ""; position: absolute; top: 0; left: -75%;
            width: 50%; height: 100%;
            background: linear-gradient(120deg,
              transparent 0%,
              rgba(255,255,255,.55) 50%,
              transparent 100%);
            transform: skewX(-20deg);
            animation: gpShimmer 3.2s ease-in-out infinite;
            pointer-events: none;
          }
          @keyframes gpShimmer {
            0%   { left: -75%; }
            55%  { left: 125%; }
            100% { left: 125%; }
          }
          /* Star pulse: scale + glow alternation, in sync-ish with shimmer */
          .nav-gp-star { animation: gpStarPulse 1.6s ease-in-out infinite; transform-origin: center; }
          @keyframes gpStarPulse {
            0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(245,158,11,0)); }
            50%      { transform: scale(1.15); filter: drop-shadow(0 0 4px rgba(245,158,11,.85)); }
          }
          @media (prefers-reduced-motion: reduce) {
            .nav-go-premium::after, .nav-gp-star { animation: none; }
          }

/* ── signed-in account dropdown ─────────────────────────────────── */
          .wpc-acc-dropdown {
            position: absolute; top: calc(100% + 4px); right: 0; min-width: 220px;
            background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
            box-shadow: 0 10px 28px rgba(0,0,0,.10);
            padding: .35rem 0; z-index: 1100;
            opacity: 0; visibility: hidden; transform: translateY(-4px);
            transition: opacity .12s ease, transform .12s ease, visibility .12s;
          }
          .wpc-acc-dropdown a {
            display: block; padding: .55rem .9rem; color: #1f2937;
            font-size: .9rem; text-decoration: none; line-height: 1.3;
          }
          .wpc-acc-dropdown a:hover { background: #f3f4f6; color: #111; }
          .wpc-acc-divider {
            height: 1px; background: #e5e7eb; margin: .35rem 0;
          }
          .wpc-acc-logout { color: #b91c1c !important; }
          .wpc-acc-logout:hover { background: #fef2f2 !important; }
          /* Desktop: hover anywhere on the wrapper opens the menu */
          @media (hover: hover) {
            .wpc-acc-menu:hover .wpc-acc-dropdown,
            .wpc-acc-menu:focus-within .wpc-acc-dropdown {
              opacity: 1; visibility: visible; transform: translateY(0);
            }
          }
          /* Touch / no-hover: the caret label toggles the hidden checkbox */
          .wpc-acc-toggle:checked ~ .wpc-acc-dropdown {
            opacity: 1; visibility: visible; transform: translateY(0);
          }
          .wpc-acc-caret:hover { background: #f3f4f6; }

/* ── confirm-account card + desktop type-bar pills ─────────────────────────────────── */
  .wpc-confirm-account-card {
    align-items: center; justify-content: center; gap: .75rem;
    box-sizing: border-box;
    width: calc(100% - 2rem); max-width: none;
    margin: .45rem 1rem .55rem;
    padding: .6rem .85rem; border: 1.5px solid #86efac; border-radius: 8px;
    background: #f0fdf4; color: #14532d;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .86rem; line-height: 1.25; font-weight: 700;
    text-align: center;
  }
  .wpc-confirm-account-card a {
    display: inline-flex; align-items: center; justify-content: center; gap: .28rem;
    min-height: 28px; padding: .32rem .75rem; border-radius: 5px;
    background: #16a34a; color: #fff !important; font-weight: 800;
    text-decoration: none !important; white-space: nowrap;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.18);
  }
  .menu-item-browse-all .treat-link,
  .menu-item-az .treat-link,
  .wpc-h-sublink.browse-all {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
  }
  .wpc-confirm-account-card a svg,
  .wpc-arrow-icon {
    width: 15px; height: 15px; fill: none; stroke: currentColor;
    stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    flex: 0 0 auto;
  }
  .wpc-confirm-account-card a .wpc-email-icon {
    width: 15px; height: 15px; fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    flex: 0 0 auto;
  }
  .wpc-confirm-account-card a:hover { background: #15803d; }
  .wpc-confirm-account-card--desktop { display: flex; }
  @media (max-width: 767px) {
    .wpc-confirm-account-card--desktop { display: none; }
  }
  @media (min-width: 768px) and (max-width: 1199px) {
    .wpc-confirm-account-card {
      width: calc(100% - 1.5rem);
      margin-left: .75rem;
      margin-right: .75rem;
    }
  }

  /* ── Desktop type-bar pills ──────────────────────────────────────── */
  .wpc-typebar {
    gap: .4rem; width: 100%;
    padding: .25rem 1rem .35rem;
    box-sizing: border-box; background: #fff;
    position: sticky;
    top: var(--sticky-typebar-top, 0px);
    z-index: 1015;
  }
  .wpc-typebar-pill {
    flex: 1; position: relative; display: flex; align-items: center;
    background: var(--type-color); border-radius: 6px; overflow: visible;
  }
  /* When hovered/open, lift the entire pill (and therefore its absolute
     dropdown panel) above any sticky filter-rows / cascade z-index stacks
     downstream on the page. */
  .wpc-typebar-pill:hover,
  .wpc-typebar-pill.is-open { z-index: 9000; }
  .wpc-typebar-link {
    flex: 1; padding: .45rem .85rem;
    color: #fff; font-weight: 700; font-size: .95rem;
    text-decoration: none; text-align: center;
    line-height: 1.1;
  }
  .wpc-typebar-link:hover { color: #fff; opacity: .92; }
  .wpc-typebar-caret {
    background: rgba(255,255,255,.15); border: 0;
    border-left: 1px solid rgba(255,255,255,.25);
    color: #fff; padding: 0 .65rem; height: 100%;
    border-radius: 0 6px 6px 0;
    cursor: pointer; display: inline-flex; align-items: center;
    transition: background .15s;
  }
  .wpc-typebar-caret:hover,
  .wpc-typebar-pill:hover .wpc-typebar-caret { background: rgba(0,0,0,.18); }
  .wpc-typebar-caret svg { transition: transform .15s; }
  .wpc-typebar-pill.is-open .wpc-typebar-caret svg { transform: rotate(180deg); }

  /* Dropdown panel — anchored to the pill, opens downward */
  .wpc-typebar-panel {
    position: absolute; top: 100%; left: 0;
    min-width: 100%; max-width: 540px; width: max-content;
    background: #fff; border: 1px solid #e5e7eb;
    border-top: 3px solid var(--type-color);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,.14);
    padding: .85rem 1rem 1rem;
    margin-top: 4px;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
    z-index: 9001;          /* above sticky filter-row (510) + any cascade */
  }
  .wpc-typebar-pill:hover .wpc-typebar-panel,
  .wpc-typebar-pill.is-open .wpc-typebar-panel,
  .wpc-typebar-panel:hover {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .wpc-typebar-panel-head {
    padding-bottom: .55rem; margin-bottom: .55rem;
    border-bottom: 1px solid #f3f4f6;
  }
  .wpc-typebar-browse-all {
    display: inline-flex; align-items: center; gap: .28rem;
    color: var(--type-color); font-weight: 800; font-size: .85rem;
    text-decoration: none;
    text-transform: uppercase; letter-spacing: .04em;
  }
  .wpc-typebar-browse-all:hover { color: var(--type-color); text-decoration: underline; }
  .wpc-typebar-kwlist {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: .25rem .85rem;
    grid-template-columns: 1fr 1fr;
    min-width: 360px;
  }
  .wpc-typebar-kwlist li a {
    display: block; padding: .35rem .25rem;
    color: #1f2937; font-size: .88rem; text-decoration: none;
    border-radius: 4px; line-height: 1.2;
  }
  .wpc-typebar-kwlist li a:hover {
    background: #f9fafb; color: var(--type-color);
  }

  /* Right-anchor the last two pills' dropdowns so they don't overflow viewport */
  .wpc-typebar-pill:nth-last-child(-n+2) .wpc-typebar-panel {
    left: auto; right: 0;
  }

  /* (mobile pill strip removed — hamburger now owns type navigation) */

/* ── search autocomplete popover ─────────────────────────────────── */
  .wpc-ac-pop {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    background: #fff !important; background-color: #fff !important;
    opacity: 1 !important; backdrop-filter: none !important;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 14px 36px rgba(0,0,0,.18);
    max-height: 360px; overflow-y: auto; z-index: 12000;
    isolation: isolate; display: none;
  }
  .wpc-ac-pop.show { display: block; }
  .wpc-ac-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .9rem; cursor: pointer;
    color: #1f2937; text-decoration: none !important;
    font-size: .92rem; border-bottom: 1px solid #f3f4f6;
  }
  .wpc-ac-item:last-child { border-bottom: none; }
  .wpc-ac-item.active, .wpc-ac-item:hover { background: #f3f7ff; color: #1e40af; }
  .wpc-ac-item .ac-icon { color: #9ca3af; font-size: .9rem; }
  .wpc-ac-item .ac-flag { margin-left: auto; font-size: 1rem; line-height: 1;
    flex: 0 0 auto; padding-left: .5rem; }
  .wpc-ac-item mark { background: #fef9c3; color: #1f2937; padding: 0; }