/* mobile-nav.css — critical mobile header + hamburger styles.
 *
 * Loaded in <head> (NOT inline in body) so the browser applies these rules
 * during initial parse — eliminates the "header shifts downward after load"
 * CLS that happens when these rules live in body-inline <style>.
 *
 * Scope: ≤991.98px viewport — must match the hamburger markup's `d-lg-none`
 * visibility (Bootstrap `lg` = 992px). If this stays at 768px, the 769–991px
 * band (e.g. a phone in landscape) still RENDERS the hamburger but leaves it
 * unstyled. Desktop nav (`d-lg-flex`) only appears ≥992px, so no overlap.
 */

@media (max-width: 991.98px) {

  /* ── Header row geometry — reserve a fixed slot so nothing shifts.
        Tighter top padding + line-height so the logo sits centered with
        the search box, not pushed below it. ── */
  header.new-sticky {
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: 50px;
    box-sizing: border-box;
    line-height: 1;            /* prevents inline-block descender push-down */
    transition: transform .18s ease;
    will-change: transform;
  }
  body.wpc-top-ad-hidden header.new-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
  body.wpc-top-ad-hidden nav.navgation {
    padding-top: 50px !important;
  }
  header.new-sticky > div {
    padding: .25rem .55rem !important;
    min-height: 50px;
    box-sizing: border-box;
  }
  header.new-sticky > div > .d-flex {
    min-height: 40px;
    align-items: center !important;   /* logo + search + hamburger all centered */
  }
  /* Standalone logo-block is hidden on mobile — the colorwheel is rendered
     INSIDE the search box instead (see .m-search-logo below). */
  header.new-sticky .logo-block { display: none !important; }
  header.new-sticky .m-nav { margin-left: 0 !important; flex-shrink: 0; }

  /* Search form: detailed styling lives in the body-inline <style> in
     partials/nav.html (single source of truth, loads after this file).
     We only need to ensure the form is visible/laid out at first paint. */
  header.new-sticky .m-search-mobile {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
  }

  /* Suppress the desktop scope-row search form from the FIRST paint —
     this is the main CLS source: it renders briefly visible (taking ~80px
     of vertical space) before the body-inline CSS applies. */
  header.new-sticky form.search-block:not(.m-search-mobile) {
    display: none !important;
  }
  /* Show the mobile inline search */
  header.new-sticky .m-search-mobile {
    display: flex !important;
  }

  /* Hamburger button — 44×44 tap target, flush right */
  header.new-sticky .m-nav .navbar-switch {
    padding: 0 !important; margin: 0 !important;
    width: 44px; height: 44px; display: inline-flex;
    align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    border: none; outline: none; background: transparent;
    position: relative;
  }

  /* Animated ☰ ↔ ✕ icon (3 spans inside the button) */
  .navbar-switch .m-burger {
    position: relative; width: 22px; height: 16px; display: block;
  }
  .navbar-switch .m-burger span {
    position: absolute; left: 0; right: 0; height: 2px;
    background: #1f2937; border-radius: 2px;
    transition: transform .25s, top .15s .15s, opacity .15s;
  }
  .navbar-switch .m-burger span:nth-child(1) { top: 0; }
  .navbar-switch .m-burger span:nth-child(2) { top: 7px; }
  .navbar-switch .m-burger span:nth-child(3) { top: 14px; }
  body.menu-open .navbar-switch .m-burger span:nth-child(1) {
    top: 7px; transform: rotate(45deg);
    transition: top .15s, transform .25s .15s;
  }
  body.menu-open .navbar-switch .m-burger span:nth-child(2) { opacity: 0; }
  body.menu-open .navbar-switch .m-burger span:nth-child(3) {
    top: 7px; transform: rotate(-45deg);
    transition: top .15s, transform .25s .15s;
  }

  /* Keep the CLOSED mobile menu hidden across the whole hamburger range.
     wp-main.css/wp-extras.css carry `@media (min-width:800px){ nav.navgation
     .navbar{ display:flex } }` — a DESKTOP rule meant to reveal the horizontal
     nav strip. But the strip is `d-lg-flex` (≥992px) and the mobile menu body
     `.wpc-hm` is `d-lg-none` (<992px), so in the 800–991px band (a phone in
     landscape) that `display:flex` instead renders the mobile menu EXPANDED
     inline at the top of the page. Force the non-open menu hidden here so only
     `.navbar.show` (tapped open) ever displays. `:not(.show)` + !important beats
     the legacy min-800 rule; scoped ≤991.98px so desktop (≥992) is untouched. */
  nav.navgation .navbar:not(.show) { display: none !important; }

  /* Mobile menu, fullscreen overlay below the header.
     Use the dynamic-viewport unit (dvh) so the iOS URL bar collapse/
     expand does not visually push the footer off-screen. 100vh on iOS
     measures the LARGEST possible viewport (URL bar collapsed), so on
     first paint the bottom 50-60px were cut off until the user scrolled. */
  nav.navgation .navbar.show {
    position: fixed !important;
    top: var(--wpc-mobile-menu-top, 50px);
    left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: calc(100dvh - var(--wpc-mobile-menu-top, 50px));
    max-height: calc(100dvh - var(--wpc-mobile-menu-top, 50px));
    padding: 0 !important;
    background: #fff;
    overflow: hidden;
    overscroll-behavior: contain;
    z-index: 10010;
    display: flex !important;
    flex-direction: column;
  }
  /* Fallback for browsers without dvh (older Android WebView). 100vh is
     close enough there since they don't have the URL bar dance. */
  @supports not (height: 100dvh) {
    nav.navgation .navbar.show {
      height: calc(100vh - var(--wpc-mobile-menu-top, 50px));
      max-height: calc(100vh - var(--wpc-mobile-menu-top, 50px));
    }
  }
  body.wpc-top-ad-hidden nav.navgation .navbar.show {
    top: var(--wpc-mobile-menu-top, 50px);
    max-height: calc(100dvh - var(--wpc-mobile-menu-top, 50px));
  }
  body.menu-open main.single .filter-row {
    display: none !important;
  }
  body.menu-open { overflow: hidden; }
  body.menu-open #wpc-corner-card {
    display: none !important;
    pointer-events: none !important;
  }
  body.menu-open header.new-sticky {
    z-index: 10020;
  }

  /* ── Two-panel hamburger menu ─────────────────────────────────── */
  .wpc-hm {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  /* ── Left rail — icon tab strip ── */
  .wpc-hm-rail {
    flex: 0 0 62px;
    width: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: .65rem .35rem .85rem;
    background: #f1f5f9;
    border-right: 1px solid #e2e8f0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .wpc-hm-rail::-webkit-scrollbar { display: none; }
  .wpc-hm-rail-spacer { flex: 1; min-height: 8px; }

  .wpc-hm-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    min-height: 52px;
    padding: 4px 2px 3px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s;
    position: relative;
  }
  .wpc-hm-tab:active { transform: scale(.95); }
  /* Active state — use the tab's OWN color as the border/ring so the
     active cue matches the colored icon tile. No drop shadow. */
  .wpc-hm-tab.is-active {
    border-color: var(--tab-color);
    box-shadow: 0 0 0 2px var(--tab-color);
    background: #fff;
  }
  /* The selected cue is the tab's OWN colour (border + ring above). Suppress
     the browser's default focus outline — on tap it inherits the macOS system
     accent colour (often yellow/gold), which painted a yellow ring over every
     selected tab regardless of type. Keyboard focus still gets a visible ring,
     also in the tab colour, for accessibility. */
  .wpc-hm-tab:focus { outline: none; }
  .wpc-hm-tab:focus-visible {
    outline: 2px solid var(--tab-color);
    outline-offset: 2px;
  }

  .wpc-hm-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--tab-color);
    color: #fff;
    line-height: 1;
  }
  .wpc-hm-tab-icon svg { display: block; }
  .wpc-hm-tab-label {
    display: block;
    margin-top: 2px;
    font-size: .56rem;
    font-weight: 800;
    color: #475569;
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 48px;
  }
  .wpc-hm-tab.is-active .wpc-hm-tab-label {
    color: var(--tab-color);
    font-weight: 900;
  }

  /* ── Right column wrapper — scrollable panel area + fixed footer ── */
  .wpc-hm-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  /* ── Right main panel ── */
  .wpc-hm-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: .75rem .85rem 1rem;
    background: #fff;
  }

  /* ── Fixed bottom action bar (Premium / Join / Login) ── */
  .wpc-hm-footer {
    flex: 0 0 auto;
    display: flex;
    gap: .4rem;
    padding: .55rem .65rem;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 12px -8px rgba(15,23,42,.15);
  }
  .wpc-hm-footer > a {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-height: 38px;
    padding: 0 .55rem;
    border-radius: 7px;
    font-weight: 800;
    font-size: .85rem;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
  }
  .wpc-hm-footer-premium {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    color: #92400e !important;
    position: relative;
    overflow: hidden;
  }
  .wpc-hm-footer-premium::after {
    content: "";
    position: absolute; top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: gpShimmer 3.2s ease-in-out infinite;
    pointer-events: none;
  }
  .wpc-hm-footer-join {
    background: #2464c4;
    border: 1px solid #2464c4;
    color: #fff !important;
  }
  .wpc-hm-footer-login {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #1f2937 !important;
  }
  .wpc-hm-footer > a:active { filter: brightness(.95); }

  /* When the hamburger drawer is open, hide the viewport-anchored sticky
     footer ad — it sits on top of the drawer's fixed Premium / Account /
     Join / Login bar and blocks those taps. Ascend fills the ot-name div in
     place, so collapsing it removes the overlay. */
  body.menu-open [ot-name="Sticky_Footer"],
  body.menu-open [ot-name="RichMedia"] { display: none !important; }

  /* Account panel — user summary block */
  .wpc-hm-acc-summary {
    padding: .55rem .75rem;
    border-radius: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    margin-bottom: .55rem;
  }
  .wpc-hm-acc-name {
    font-size: .95rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: .25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wpc-hm-acc-pill {
    display: inline-flex;
    align-items: center;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #d1d5db;
    color: #475569;
    font-size: .72rem;
    font-weight: 700;
  }
  .wpc-hm-acc-pill--premium {
    background: #fef3c7;
    border-color: #fbbf24;
    color: #92400e;
  }
  .wpc-hm-panel { display: none; }
  .wpc-hm-panel.is-active { display: block; }

  .wpc-hm-panel-head {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .65rem;
    font-size: 1.05rem;
    font-weight: 900;
    color: #111827;
  }
  .wpc-hm-panel-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .wpc-hm-browse-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .75rem;
    margin-bottom: .55rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--tab-color) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--tab-color) 25%, #e5e7eb);
    color: #111827 !important;
    text-decoration: none !important;
    font-weight: 900;
    font-size: .92rem;
    -webkit-tap-highlight-color: transparent;
  }
  .wpc-hm-browse-all:active { filter: brightness(.95); }
  .wpc-hm-browse-all svg {
    color: var(--tab-color);
    flex-shrink: 0;
  }

  /* Keyword grid — type panels use a 6-row horizontal scroller (3 cols
     visible per swipe; swipe right for the rest). Tiles are PLAIN text
     links (no grey box) arranged into compact columns. Browse + Account
     panels still use the original 2-col stacked grid
     (.wpc-hm-kw-grid--stack). With 6 rows, the merged ~35-keyword pool
     spreads into ~6 columns total. */
  .wpc-hm-kw-grid {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    /* 3 rows per UX call. Was 6, which doubled the panel height before
       the tools row even came into view. With 3 rows the merged ~24
       keywords spread into ~8 columns scrolled horizontally. */
    grid-template-rows: repeat(3, auto);
    /* Three columns visible at a time (~32% each, with the 4th column
       peeking under the fade so users know to swipe). The keywords are
       short single words; 48% wasted half each column, 32% packs three
       in and shows ~50% more keywords per view. */
    grid-auto-columns: 32%;
    column-gap: .25rem;
    row-gap: .25rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 22px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
  }
  .wpc-hm-kw-grid::-webkit-scrollbar { display: none; }
  /* Show left fade once the user has scrolled rightwards (toggled by JS). */
  .wpc-hm-kw-grid.is-scrolled-x {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent);
  }
  .wpc-hm-kw-grid--stack {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    column-gap: .4rem;
    row-gap: .4rem;
    overflow-x: visible;
    padding-right: 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* Tools panel: the full tools grid IS the panel's main content (no
     quick-links / top-thumbs / discover rows below it like the type
     panels have), so flow it VERTICALLY into 2 columns that fill the
     panel — an 8-row horizontal scroller left most of the panel blank. */
  .wpc-hm-kw-grid--tools {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    column-gap: .5rem;
    row-gap: .25rem;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-right: 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* Tool tile: thumbnail (when the tool has poster art) + human name. */
  .wpc-hm-toolrow {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 40px;
    padding: .25rem .35rem;
    border-radius: 8px;
    color: #374151 !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  .wpc-hm-toolrow:active { background: #eef2ff; }
  .wpc-hm-toolrow-img {
    flex: 0 0 34px;
    width: 34px; height: 34px;
    border-radius: 7px;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
  }
  .wpc-hm-toolrow-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Name-only tiles align their text with the thumbnailed ones' text. */
  .wpc-hm-toolrow:not(.has-img) { padding-left: .5rem; }
  .wpc-hm-toolrow-name {
    min-width: 0;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wpc-hm-kw {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: .2rem .35rem;
    background: transparent;       /* PLAIN text columns, no grey box */
    border: 0;
    border-radius: 0;
    color: #374151 !important;
    text-decoration: none !important;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
  }
  /* Stacked (Account / Tools) panels keep a soft pill so they read as
     actionable links, not text. */
  .wpc-hm-kw-grid--stack .wpc-hm-kw {
    padding: .4rem .6rem;
    min-height: 38px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
  }
  .wpc-hm-kw:active { color: #2464c4 !important; }
  .wpc-hm-kw-grid--stack .wpc-hm-kw:active { background: #eef2ff; border-color: #c7d2fe; }
  /* Visually hide the type suffix ("Wallpapers", "Background", "SVG", …)
     inside keyword tiles — saves horizontal space in the cramped 6-col
     scroller — but keep it in the DOM so Googlebot + screen readers see
     the full phrase ("Halloween SVG", "Aesthetic Background"). */
  .wpc-hm-kw-type, .wpc-hm-kw-type-d {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  .wpc-hm-kw--az {
    color: #2464c4 !important;
    font-size: .78rem;
    font-weight: 700;
    justify-content: flex-start;
  }
  .wpc-hm-kw-grid--stack .wpc-hm-kw--az {
    grid-column: 1 / -1;
    justify-content: center;
  }
  .wpc-hm-kw--primary {
    background: #2464c4;
    border-color: #2464c4;
    color: #fff !important;
    font-weight: 800;
  }

  /* ── Featured tools row — horizontal poster strip above Discover-more.
        Right fade by default; once scrolled right, a left fade appears too
        so the user knows they can scroll back. The .is-scrolled-x class is
        toggled by the inline JS at the bottom of nav.html. ── */
  .wpc-hm-tools-row {
    position: relative;
    margin-top: 1rem;
  }
  .wpc-hm-tools-scroll {
    display: flex;
    gap: .55rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: .1rem 22px .25rem 0;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .wpc-hm-tools-scroll.is-scrolled-x {
    padding-left: 22px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  }
  .wpc-hm-tools-scroll::-webkit-scrollbar { display: none; }
  .wpc-hm-tool {
    flex: 0 0 88px;
    width: 88px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-decoration: none !important;
    color: #1f2937 !important;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
  }
  .wpc-hm-tool-img {
    display: block;
    width: 88px; height: 88px;
    border-radius: 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    overflow: hidden;
  }
  .wpc-hm-tool-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .wpc-hm-tool-name {
    margin-top: .3rem;
    font-size: .72rem;
    font-weight: 700;
    color: #475569;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .wpc-h-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: .35rem;
    min-width: 34px;
    height: 18px;
    padding: 0 .35rem;
    border-radius: 999px;
    background: #fbbf24;
    color: #111827;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .04em;
  }

  /* ── Quick-links row (Discover / Latest / Top / Daily) ── */
  .wpc-hm-quick-row {
    display: flex;
    gap: .35rem;
    margin-top: .8rem;
    padding: 0;
  }
  .wpc-hm-quick {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1 / 1;          /* square tile */
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  .wpc-hm-quick:active { filter: brightness(.95); }
  /* Illustration fills the ENTIRE tile. */
  .wpc-hm-quick picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%; height: 100%;
  }
  .wpc-hm-quick picture img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Label sits ON TOP of the illustration, anchored to the bottom, with a
     white outline (text-shadow halo) so it stays readable over any art. */
  .wpc-hm-quick > span {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: .3rem .15rem .35rem;
    text-align: center;
    color: #111827 !important;
    font-size: .8rem;
    font-weight: 800;
    line-height: 1.1;
    text-shadow:
      -1.5px -1.5px 0 #fff,  1.5px -1.5px 0 #fff,
      -1.5px  1.5px 0 #fff,  1.5px  1.5px 0 #fff,
       0 0 4px #fff, 0 0 4px #fff;
  }

  /* ── Article list inside the Discover panel ── */
  .wpc-hm-articles {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-top: .6rem;
  }
  .wpc-hm-article {
    display: flex;
    gap: .65rem;
    padding: .5rem .25rem;
    color: #111827 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f1f5f9;
    -webkit-tap-highlight-color: transparent;
  }
  .wpc-hm-article:last-child { border-bottom: 0; }
  .wpc-hm-article-thumb {
    flex: 0 0 64px;
    width: 64px; height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
  }
  .wpc-hm-article-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .wpc-hm-article-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .wpc-hm-article-title {
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.25;
    color: #111827;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .wpc-hm-article-desc {
    margin-top: .15rem;
    font-size: .78rem;
    color: #6b7280;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* ── Top wallpapers strip — TWO-row thumbnail grid that scrolls right ── */
  .wpc-hm-toppix-row {
    position: relative;
    margin-top: .85rem;
  }
  .wpc-hm-toppix-scroll {
    /* Grid with 2 fixed rows + auto columns flowing rightwards = two stacked
       thumbnail rows that scroll horizontally together. */
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 72px);
    grid-auto-columns: 72px;
    gap: .35rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: .15rem 20px .15rem 0;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  .wpc-hm-toppix-scroll::-webkit-scrollbar { display: none; }
  .wpc-hm-toppix {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    -webkit-tap-highlight-color: transparent;
    scroll-snap-align: start;
  }
  .wpc-hm-toppix img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ── Creator-recruit card (shared partial across all type panels) ── */
  .wpc-hm-recruit {
    display: block;
    margin-top: 1rem;
    padding: 1rem .9rem;
    border-radius: 12px;
    border: 1px solid #1f2937;
    background: #fff;
    text-decoration: none !important;
    color: #1f2937 !important;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
  }
  .wpc-hm-recruit:active { background: #f9fafb; }
  .wpc-hm-recruit-head { margin-bottom: .65rem; }
  .wpc-hm-recruit-badge {
    display: inline-block;
    background: #f3f4f6; color: #6b7280;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .6rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em;
  }
  .wpc-hm-recruit-title {
    font-size: 1rem; font-weight: 800; line-height: 1.25;
    color: #1f2937 !important;
    margin: .4rem 0 0;
  }
  .wpc-hm-recruit-list {
    list-style: none; margin: 0 0 .8rem; padding: 0;
    text-align: left;
    font-size: .82rem; line-height: 1.6;
    color: #374151;
  }
  .wpc-hm-recruit-list li::before {
    content: '✓'; color: #10b981; font-weight: 800; margin-right: .4rem;
  }
  .wpc-hm-recruit-cta {
    display: inline-block;
    background: #1f2937; color: #fff !important;
    padding: .55rem 1.1rem; border-radius: 8px;
    font-weight: 800; font-size: .85rem;
  }
  .wpc-hm-recruit:active .wpc-hm-recruit-cta { background: #111827; }

  /* ── Sister-site cross-promo ── */
  .wpc-hm-sister {
    margin-top: 1rem;
  }
  .wpc-hm-sister-title {
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #94a3b8;
    margin-bottom: .5rem;
  }
  .wpc-hm-sister-links {
    display: flex;
    flex-direction: column;
    gap: .35rem;
  }
  .wpc-hm-sister-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .7rem;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #1f2937 !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  .wpc-hm-sister-link:active { background: #eef2ff; }
  .wpc-hm-sister-name {
    flex: 0 0 auto;
    font-size: .92rem;
    font-weight: 800;
    color: #111827;
  }
  .wpc-hm-sister-blurb {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .78rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wpc-hm-sister-arrow {
    flex: 0 0 14px;
    color: #94a3b8;
  }

  /* ── Discovery rows at the bottom of each type panel ── */
  .wpc-hm-discover {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 0;                  /* grey line removed */
  }
  .wpc-hm-discover-title {
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #94a3b8;
    margin-bottom: .55rem;
  }
  .wpc-hm-discover-row {
    margin-bottom: .55rem;
  }
  .wpc-hm-discover-row:last-child { margin-bottom: 0; }
  .wpc-hm-discover-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: .3rem;
    vertical-align: middle;
  }
  .wpc-hm-discover-type {
    font-size: .78rem;
    font-weight: 800;
    color: #475569;
    vertical-align: middle;
  }
  .wpc-hm-discover-kws {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .3rem;
  }
  .wpc-hm-discover-kws a {
    display: inline-flex;
    align-items: center;
    padding: .25rem .55rem;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569 !important;
    text-decoration: none !important;
    font-size: .82rem;
    font-weight: 500;        /* not bold */
  }
  .wpc-hm-discover-kws a:active { background: #e2e8f0; }

  /* ── Premium CTA inside account panel ── */
  .wpc-hm-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 42px;
    padding: 0 1rem;
    margin-bottom: .5rem;
    border-radius: 8px;
    background: #fef9c3;
    border: 2px solid #f59e0b;
    color: #1f2937 !important;
    text-decoration: none !important;
    font-weight: 800;
    font-size: .95rem;
    position: relative;
    overflow: hidden;
  }
  .wpc-hm-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%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .wpc-hm-premium::after { animation: none !important; }
  }

  /* Hide the legacy desktop navbar-nav on mobile so we never render
     duplicate menu items inside the open hamburger. */
  nav.navgation .navbar.show > ul.d-none.d-lg-flex { display: none !important; }
}

/* On desktop (≥1024px), the new mobile-only block stays out of the way */
@media (min-width: 1024px) {
  .wpc-h-mobile-only { display: none !important; }
}

/* Tighter related-pills row, applies to BOTH detail + keyword pages,
   desktop AND mobile. The wp-main.css default uses column-gap:1em which
   reads as standalone buttons; pulling pills closer makes the row feel
   like a tag set. */
main .filter-row .tag-container ul.related-tag {
  column-gap: .4rem;
  /* Hide horizontal scrollbar on every browser, the row is touch-swipeable
     so a visible scrollbar reads as visual debris. */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge legacy */
}
main .filter-row .tag-container ul.related-tag::-webkit-scrollbar {
  display: none;                  /* Chrome / Safari / new Edge */
  width: 0 !important;
  height: 0 !important;
  background: transparent;
}
main .filter-row .tag-container ul.related-tag .image-tag {
  padding: 4px 10px;
}
@media (max-width: 767px) {
  main .filter-row .tag-container ul.related-tag {
    column-gap: .3rem;
    padding: 0 .35rem;
  }
  main .filter-row .tag-container ul.related-tag .image-tag {
    padding: 3px 8px;
    font-size: .82rem;
    line-height: 1.2;
  }
  main .filter-row .tag-container ul.related-tag .image-tag a {
    font-size: .82rem;
  }
  /* The filter-row reserves ~50-60px above the grid on listing pages
     (Latest/Top/Discover/Daily) even when there are no contextual pills,
     so the page reads as if its hero strip got cut off. Collapse the
     row entirely on mobile when the pills container has no children. */
  main .filter-row:not(:has(.related-tag > *)) { display: none; }
  main .filter-row:has(.related-tag:empty) { display: none; }
}

/* Breadcrumb fix: the home icon partial wraps a span/svg which on mobile
   inherits the breadcrumb item's larger gap, leaving an awkward blank
   between the home and the slash. Tighten the gap on the first item. */
@media (max-width: 767px) {
  main nav.nav-breadcrumbs ol.breadcrumb > li.breadcrumb-item:first-child {
    padding-right: 0;
    margin-right: 0;
  }
  main nav.nav-breadcrumbs ol.breadcrumb > li.breadcrumb-item:first-child a {
    padding-right: 0;
    margin-right: 0;
  }
  main nav.nav-breadcrumbs ol.breadcrumb > li.breadcrumb-item + li.breadcrumb-item {
    padding-left: .25rem;
    margin-left: 0;
  }
}
