/* Home top, desktop only (2026-10-01).
   The owner asked for a cleaner, calmer top on the desktop home page. Phones are
   approved as they are, so EVERYTHING here sits inside min-width:1025px and is
   scoped to the home page (#app has <main class="home-main">) - inner pages,
   tablets and phones are untouched. Remove this file + its <link> to revert.

   What changes (before -> after, measured at 1440):
   - top bar: 3 competing messages on a 5-stop gradient -> one centred line on solid brand purple
   - header row 88px -> 64px, tagline hidden (the search box says what the site is)
   - nav row 45px -> 36px, sits in the same band as the header (no rule between)
   - header + tabs + search share ONE soft lavender band instead of white header + strong purple glow
   - tabs: four purple gradient words with icons -> ink words, one violet active tab with underline
   - search box 1100px -> 880px wide; popular-search chips removed from the fold
   - welcome strip: bordered chips that overflowed off-screen -> grey band, 18px greeting,
     three plain links split by thin rules
   - first content row starts ~150px higher */
@media (min-width: 1025px) {
  /* ---- ONE block from the very top to below the search (v2, owner 10-01) ----
     A single background on #app: a vertical brand-purple wash that is deepest
     behind the top bar and fades to white just under the search box, plus one
     glow centred under the tabs + search (never in a corner - a corner glow
     made the logo unreadable before). Every piece above the welcome band is
     transparent and borderless, so nothing steps or rules between them. The
     grey welcome band (opaque) is the break. */
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) {
    background:
      radial-gradient(760px 300px at 50% 250px, rgba(120, 113, 251, .30), rgba(120, 113, 251, 0) 72%),
      linear-gradient(180deg, #d9d4ff 0, #e7e3ff 32px, #efedff 110px, #f2f0ff 230px, #f6f5ff 330px, #fff 400px);
    background-repeat: no-repeat;
  }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) header,
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) header .head-main,
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) header .main-nav {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) > .search-hero {
    background: transparent;
    padding: 6px 0 30px;
  }

  /* ---- top bar: same wash, no fill of its own, so it flows into the block ---- */
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) > .announcement {
    background: transparent;
    height: 32px;
    justify-content: center;
    gap: 0;
    border: 0;
    box-shadow: none;
  }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) > .announcement > span:first-child,
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) > .announcement > .local-label { display: none; }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) > .announcement > span:nth-child(2) { font-size: 12px; letter-spacing: 0; color: var(--deep); font-weight: 500; }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) > .announcement a { font-size: 12px; color: var(--violet); font-weight: 650; }

  /* ---- header row ---- */
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .head-main { height: 64px; min-height: 64px; }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .brand-note { display: none; }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .brand img { height: 28px; width: auto; }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .brand > span { font-size: 23px; }

  /* ---- nav row ---- */
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .main-nav { height: 36px; min-height: 36px; border: 0; }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .main-nav a,
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .main-nav button { font-size: 13px; color: #3a3a44; }

  /* ---- tabs: ink words, one violet active tab ---- */
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .search-hero .search-tabs {
    gap: 40px;
    margin: 0 auto 16px;
    justify-content: center;
  }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .search-hero .search-tabs > a {
    position: relative;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -0.2px;
    word-spacing: 7px;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: var(--ink);
    color: var(--ink);
    padding: 4px 0 8px;
  }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .search-hero .search-tabs > a span {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: inherit;
  }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .search-hero .search-tabs > a .icon { display: none; }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .search-hero .search-tabs > a:first-child { display: inline-flex; align-items: flex-start; }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .search-hero .search-tabs > a:first-child .icon {
    display: inline-block; width: 15px; height: 15px; color: var(--violet); -webkit-text-fill-color: var(--violet);
    order: 2; margin: 2px 0 0 3px;
  }
  /* thin rule after AI Mode: it is a different kind of thing from the three catalog tabs */
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .search-hero .search-tabs > a:first-child::before {
    content: ""; position: absolute; right: -21px; top: 14px; width: 1px; height: 24px; background: #d6d4e6;
  }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .search-hero .search-tabs > a.active,
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .search-hero .search-tabs > a.active span {
    -webkit-text-fill-color: var(--violet);
    color: var(--violet);
  }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .search-hero .search-tabs > a.active::after {
    display: block; content: ""; position: absolute; left: 50%; bottom: 0;
    width: 44px; height: 3px; margin-left: -22px; border-radius: 3px; background: var(--violet);
  }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .search-hero .search-tabs > a:hover { -webkit-text-fill-color: var(--violet); color: var(--violet); }

  /* ---- search box: narrower, slightly shorter ---- */
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .search-hero .search-box {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 14px 12px;
  }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .search-hero .search-bottom { padding-top: 6px; }
  /* popular searches already surface in the dropdown on focus */
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .search-hero .trending { display: none; }

  /* ---- welcome strip: grey band, real greeting, plain links ---- */
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .welcome-strip { background: var(--canvas); border: 0; }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .welcome-strip-inner {
    max-width: 1640px; min-height: 68px; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .welcome-strip-hi { font-size: 18px; font-weight: 650; color: var(--ink); margin: 0; white-space: nowrap; }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .welcome-strip-links { gap: 0; overflow: visible; flex-wrap: nowrap; }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .welcome-strip-links > a {
    border: 0; background: none; box-shadow: none; border-radius: 0;
    padding: 4px 22px; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; min-height: 0;
  }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .welcome-strip-links > a + a { border-left: 1px solid #d9d9e3; }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .welcome-strip-links > a:last-child { padding-right: 0; }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .welcome-strip-links > a:hover span { color: var(--violet); }

  /* the floating tool dock sat on top of the welcome links at 1440; on the
     home page it now waits in the bottom-right corner instead of mid-screen */
  body:has(main.home-main) .side-dock { top: auto; bottom: 24px; transform: none; }

  /* ---- first content row closer to the search ---- */
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) > main.home-main { padding-top: 0; }
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .home-panels { margin-top: 24px; }
}
/* below 1250px .wrap drops to 24px gutters; keep the welcome strip on the same edge */
@media (min-width: 1025px) and (max-width: 1250px) {
  #app:has(> main.home-main):has(> .search-hero:not(.country-search-hero)) .welcome-strip-inner { width: calc(100% - 48px); }
}