/*
 * Jeden spójny system mobilnych nagłówków dla wszystkich widoków aplikacji.
 * Ten plik jest ładowany jako ostatni arkusz każdego renderowalnego widoku.
 */
@media (max-width:700px) {
  body[data-page]:not([data-route="messages"]) .main-area {
    padding-top:var(--topbar-h);
  }

  body[data-page] :is(.page-intro,.tools-page-intro) {
    width:100%;
    min-width:0;
    min-height:0;
    margin:0;
    padding:8px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:var(--bg);
    border:0;
    border-radius:0;
  }

  body[data-page] :is(.page-intro,.tools-page-intro) > :first-child {
    min-width:0;
  }

  body[data-page] :is(.page-intro,.tools-page-intro) .eyebrow {
    display:block;
    margin:0;
    font-size:8px;
    line-height:1.2;
    letter-spacing:.14em;
  }

  body[data-page] :is(.page-intro,.tools-page-intro) h1 {
    max-width:none;
    margin:2px 0 0;
    font-size:clamp(22px,6vw,24px);
    line-height:1.04;
    letter-spacing:-.035em;
  }

  body[data-page] :is(.page-intro,.tools-page-intro) p {
    display:none;
  }

  body[data-page] .page-intro .page-actions {
    width:auto;
    min-width:0;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    flex:0 0 auto;
  }

  body[data-page] .page-intro .page-actions :is(.premium-btn,.outline-btn,.text-btn),
  body[data-page] :is(.tools-page-intro,.referrals-intro) > :is(a,button) {
    width:auto;
    min-width:36px;
    min-height:36px;
    height:36px;
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    white-space:nowrap;
    border-radius:11px;
    font-size:10px;
    line-height:1;
  }

  /* Adding media is already available in the persistent mobile footer. */
  body:is(
    [data-page="feed"],
    [data-page="posts"],
    [data-page="video-listing"],
    [data-page="video-shorts-listing"]
  ) .page-intro .page-actions {
    display:none !important;
  }

  body:is([data-page="feed"],[data-page="posts"]) .feed-filter {
    width:calc(100% - 16px) !important;
    max-width:none !important;
    min-height:0;
    margin:0 8px 6px;
    padding:3px;
    gap:3px;
    border-radius:11px;
  }

  body:is([data-page="feed"],[data-page="posts"]) .feed-filter button {
    min-height:31px;
    padding:0 7px;
    border-radius:8px;
    font-size:9px;
  }

  body[data-page="posts"] .posts-composer {
    margin:0 8px 6px;
    padding:8px 9px;
    grid-template-columns:34px minmax(0,1fr);
    gap:8px;
    border-radius:13px;
  }

  body[data-page="posts"] .posts-composer > img {
    width:34px;
    height:34px;
  }

  body[data-page="posts"] .posts-composer > a {
    min-height:36px;
    padding:0 11px;
    border-radius:11px;
    font-size:10px;
  }

  body[data-page="video-listing"] .yt-video-toolbar {
    margin:0;
    padding:0 12px 7px;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:6px;
  }

  body[data-page="video-listing"] .yt-video-search {
    width:100%;
    min-height:36px;
    padding:0 11px;
    gap:8px;
    border-radius:11px;
  }

  body[data-page="video-listing"] .yt-video-search input {
    height:34px;
    font-size:11px;
  }

  body[data-page="video-listing"] .yt-video-toolbar .yt-filter-row,
  body[data-page="video-shorts-listing"] .yt-shorts-filter-row {
    margin:0;
    padding:0;
    gap:6px;
  }

  body[data-page="video-listing"] .yt-video-toolbar .yt-filter-row button,
  body[data-page="video-shorts-listing"] .yt-shorts-filter-row button {
    min-height:32px;
    padding:0 12px;
    border-radius:10px;
    font-size:10px;
  }

  body[data-page="video-shorts-listing"] .yt-shorts-filter-row {
    padding:0 12px 8px;
  }

  body[data-page="feed-tags"] .feed-tag-page-intro {
    min-height:0;
    margin:0;
    padding:8px 13px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    gap:8px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
  }

  body[data-page="feed-tags"] .feed-tag-back {
    margin:0 0 5px;
    gap:6px;
    font-size:9px;
    line-height:1.2;
  }

  body[data-page="feed-tags"] .feed-tag-page-intro h1 {
    font-size:clamp(22px,6vw,24px);
    line-height:1;
  }

  body[data-page="feed-tags"] .feed-tag-count {
    min-height:32px;
    padding:0 10px;
    gap:7px;
    border-radius:10px;
    font-size:9px;
  }

  body[data-page="search"] .services-page-intro {
    padding-bottom:6px;
  }

  body[data-page="notifications"] .notifications-unread-summary {
    font-size:9px;
  }

  body[data-page="notifications"] .notifications-read-all {
    padding-inline:10px;
  }

  body[data-page="user-profile-settings"] .profile-settings-save-state {
    max-width:42%;
    margin:0;
    font-size:9px;
    text-align:right;
  }

  body[data-page="user-profile-cars"] .page-intro h1 {
    max-width:230px;
  }

  body[data-page^="widgets-"] .tools-page-intro > a {
    width:38px;
    max-width:38px;
    padding:0;
    overflow:hidden;
    font-size:0;
  }

  body[data-page^="widgets-"] .tools-page-intro > a i {
    margin:0;
    font-size:12px;
  }

  body[data-page^="widgets-"] .tools-page-intro > a i:last-child:not(:first-child) {
    display:none;
  }

  /* Directories and notification centres use different class names, but the
     same mobile rhythm as the regular page heading. */
  body[data-page="now-online"] .online-directory-hero,
  body[data-page="company-notifications"] .company-notifications-hero {
    min-height:0;
    margin:0;
    padding:8px 14px;
    align-items:center;
    flex-direction:row;
    gap:10px;
    background:var(--bg);
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  body[data-page="now-online"] .online-directory-hero > div,
  body[data-page="company-notifications"] .company-notifications-hero > div:first-child {
    min-width:0;
  }

  body[data-page="now-online"] .online-directory-hero .eyebrow,
  body[data-page="company-notifications"] .company-notifications-hero .eyebrow {
    font-size:8px;
    line-height:1.2;
    letter-spacing:.14em;
  }

  body[data-page="now-online"] .online-directory-hero h1,
  body[data-page="company-notifications"] .company-notifications-hero h1 {
    margin:2px 0 0;
    font-size:clamp(22px,6vw,24px);
    line-height:1.04;
    letter-spacing:-.035em;
  }

  body[data-page="now-online"] .online-directory-hero p,
  body[data-page="company-notifications"] .company-notifications-hero p {
    display:none;
  }

  body[data-page="now-online"] .online-directory-count {
    min-height:32px;
    padding:0 10px;
    font-size:9px;
  }

  body[data-page="company-notifications"] .company-notifications-back {
    margin:0 0 4px;
    gap:6px;
    font-size:9px;
  }

  body[data-page="company-notifications"] .company-notifications-actions {
    width:auto;
    flex:0 0 auto;
    gap:6px;
  }

  body[data-page="company-notifications"] .company-notifications-actions :is(.soft-btn,.icon-btn) {
    min-height:36px;
    height:36px;
    padding:0 10px;
    border-radius:11px;
    font-size:9px;
  }
}

@media (max-width:700px) {
  :root {
    --su-mobile-heading-x:14px;
    --su-mobile-heading-y:8px;
    --su-mobile-heading-title:clamp(22px,6vw,24px);
    --su-mobile-heading-eyebrow:8px;
  }

  /* Każdy zwykły widok zaczyna się bez pustego pasa pod stałym headerem. */
  body[data-page]:not([data-route="messages"]) .main-area {
    padding-top:var(--topbar-h) !important;
  }

  body[data-page]:not([data-route="messages"]) #viewRoot {
    margin-top:0 !important;
    padding-top:0 !important;
  }

  body[data-page]:not([data-route="messages"]) #viewRoot > :first-child {
    margin-top:0 !important;
  }

  /* Ten sam kompaktowy naglowek jest nadrzedny wobec lokalnych arkuszy widokow. */
  body[data-page] :is(.page-intro,.tools-page-intro) {
    min-height:0 !important;
    margin:0 !important;
    padding:var(--su-mobile-heading-y) var(--su-mobile-heading-x) !important;
    align-items:center !important;
    gap:10px !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  body[data-page] :is(.page-intro,.tools-page-intro) .eyebrow {
    margin:0 !important;
    font-size:var(--su-mobile-heading-eyebrow) !important;
    line-height:1.2 !important;
    letter-spacing:.14em !important;
  }
  body[data-page] :is(.page-intro,.tools-page-intro) h1 {
    margin:2px 0 0 !important;
    font-size:var(--su-mobile-heading-title) !important;
    line-height:1.04 !important;
    letter-spacing:-.035em !important;
  }
  body[data-page] :is(.page-intro,.tools-page-intro) p {
    display:none !important;
  }

  /* Wyszukiwarka ma własny arkusz i dlatego dostaje jawne reguły końcowe. */
  body[data-page="search"] .services-page-intro {
    width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:var(--su-mobile-heading-y) var(--su-mobile-heading-x) 6px !important;
    display:flex;
    align-items:center;
    border:0 !important;
    border-radius:0 !important;
    background:var(--bg) !important;
  }
  html body[data-page="search"]:not([data-route="messages"]) main#appMain.main-area > #viewRoot {
    margin-top:-20px !important;
  }
  html body[data-page="search"]:not([data-route="messages"]) main#appMain.main-area #viewRoot > section.su-search-page:first-child {
    margin-top:-20px !important;
    padding-top:0 !important;
  }
  body[data-page="search"] .services-page-intro[hidden] { display:none !important; }
  body[data-page="search"] .services-page-intro .eyebrow {
    margin:0 !important;
    font-size:var(--su-mobile-heading-eyebrow) !important;
    line-height:1.2 !important;
    letter-spacing:.14em !important;
  }
  body[data-page="search"] .services-page-intro h1 {
    margin:2px 0 0 !important;
    font-size:var(--su-mobile-heading-title) !important;
    line-height:1.04 !important;
    letter-spacing:-.035em !important;
  }
  body[data-page="search"] .services-page-intro p { display:none !important; }
  body[data-page="search"] .su-search-sticky-spacer { margin:0 !important; }

  /* Kreatory, studio publikacji i panel firmy. */
  body[data-page="feed-add"] .feed-studio-hero,
  body:is([data-page="company-profile-create"],[data-page="user-profile-create"]) .profile-create-intro,
  body[data-page="company-dashboard"] :is(.company-admin-hero,.company-dashboard-empty) {
    min-height:0 !important;
    margin:0 !important;
    padding:var(--su-mobile-heading-y) var(--su-mobile-heading-x) !important;
    align-items:center !important;
    gap:10px !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  body[data-page="feed-add"] .feed-studio-hero h1,
  body:is([data-page="company-profile-create"],[data-page="user-profile-create"]) .profile-create-intro h1,
  body[data-page="company-dashboard"] :is(.company-admin-hero,.company-dashboard-empty) h1 {
    margin:2px 0 0 !important;
    font-size:var(--su-mobile-heading-title) !important;
    line-height:1.04 !important;
    letter-spacing:-.035em !important;
  }
  body[data-page="feed-add"] .feed-studio-hero .eyebrow,
  body:is([data-page="company-profile-create"],[data-page="user-profile-create"]) .profile-create-intro .eyebrow,
  body[data-page="company-dashboard"] :is(.company-admin-hero,.company-dashboard-empty) .eyebrow {
    font-size:var(--su-mobile-heading-eyebrow) !important;
    line-height:1.2 !important;
  }
  body[data-page="feed-add"] .feed-studio-hero p,
  body:is([data-page="company-profile-create"],[data-page="user-profile-create"]) .profile-create-intro p,
  body[data-page="company-dashboard"] :is(.company-admin-hero,.company-dashboard-empty) p {
    display:none !important;
  }
  body[data-page="feed-add"] .feed-close-btn {
    min-width:36px;
    width:36px;
    height:36px;
    padding:0;
    justify-content:center;
    border-radius:11px;
  }
  body[data-page="feed-add"] .feed-close-btn span { display:none; }
  body:is([data-page="company-profile-create"],[data-page="user-profile-create"]) .profile-create-saved {
    max-width:38px;
    min-width:38px;
    height:36px;
    padding:0;
    justify-content:center;
    overflow:hidden;
    white-space:nowrap;
    font-size:0;
  }
  body:is([data-page="company-profile-create"],[data-page="user-profile-create"]) .profile-create-saved i {
    margin:0;
    font-size:11px;
  }

  /* Nagłówki informacyjne i prawne. */
  body:is(
    [data-page="contact"],[data-page="faq"],[data-page="privacy"],[data-page="terms"],
    [data-page="cookies"],[data-page="rodo"],[data-page="notice-and-takedown"],[data-page="ads-rules"]
  ) .legal-hero {
    min-height:0 !important;
    margin:0 !important;
    padding:12px var(--su-mobile-heading-x) !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  body:is(
    [data-page="contact"],[data-page="faq"],[data-page="privacy"],[data-page="terms"],
    [data-page="cookies"],[data-page="rodo"],[data-page="notice-and-takedown"],[data-page="ads-rules"]
  ) .legal-hero h1 {
    margin:2px 0 0 !important;
    font-size:var(--su-mobile-heading-title) !important;
    line-height:1.04 !important;
    letter-spacing:-.035em !important;
  }
  body:is([data-page="contact"],[data-page="faq"]) .legal-hero p { display:none !important; }
  body:is([data-page="privacy"],[data-page="terms"],[data-page="cookies"],[data-page="rodo"],[data-page="notice-and-takedown"],[data-page="ads-rules"]) .legal-hero p {
    margin:6px 0 0 !important;
    font-size:10px !important;
    line-height:1.45 !important;
  }
  body:is([data-page="privacy"],[data-page="terms"],[data-page="cookies"],[data-page="rodo"],[data-page="notice-and-takedown"],[data-page="ads-rules"]) .legal-meta {
    margin-top:8px !important;
    gap:7px !important;
    font-size:9px !important;
  }

  /* Dashboard, Discover, start, roadmap i rewards mają własne tła, ale ten sam rytm typografii. */
  body[data-page="dashboard"] .dashboard-welcome,
  body[data-page="discover"] .discover-hero,
  body[data-page="roadmap"] .roadmap-hero,
  body[data-page="points-rewards"] .reward-top {
    margin-top:0 !important;
  }
  body[data-page="dashboard"] .dashboard-welcome { padding:16px 14px !important; }
  body[data-page="dashboard"] .dashboard-welcome h1,
  body[data-page="discover"] .discover-hero h1,
  body[data-page="roadmap"] .roadmap-hero h1,
  body[data-page="points-rewards"] .reward-top h1,
  body[data-page="how-it-works"] .how-hero h1 {
    font-size:clamp(24px,7vw,28px) !important;
    line-height:1.05 !important;
    letter-spacing:-.04em !important;
  }
  body[data-page="dashboard"] .dashboard-welcome .eyebrow,
  body[data-page="discover"] .discover-hero .eyebrow,
  body[data-page="points-rewards"] .reward-top .eyebrow,
  body[data-page="how-it-works"] .how-hero .eyebrow {
    font-size:var(--su-mobile-heading-eyebrow) !important;
  }
  body[data-page="discover"] .discover-hero-copy { padding:18px 14px !important; }
  body[data-page="roadmap"] .roadmap-hero { padding:16px 14px !important; }
  body[data-page="points-rewards"] .reward-top { padding:14px !important; }
  body[data-page="how-it-works"] .how-hero-copy { padding:18px 14px !important; }
  body[data-page="index"] .home-hero-copy { padding:22px 14px !important; }
  body[data-page="index"] .home-hero-copy h1 {
    font-size:clamp(28px,8vw,34px) !important;
    line-height:1.02 !important;
  }

  /* Profile użytkownika i firmy oraz strony lokalizacji. */
  body:is([data-page="user-profile"],[data-page="company-profile"],[data-page="user-profile-followers"],[data-page="user-profile-friends"],[data-page="user-profile-stats"]) .profile-name h1,
  body:is([data-page="car-wash"],[data-page="gas-station"]) .su-place-title h1 {
    font-size:clamp(20px,5.8vw,24px) !important;
    line-height:1.08 !important;
    letter-spacing:-.03em !important;
  }
  body:is([data-page="car-wash"],[data-page="gas-station"]) .su-location-hero {
    margin-top:0 !important;
    padding:14px !important;
  }
  body:is([data-page="car-wash"],[data-page="gas-station"]) .su-location-hero h1 {
    font-size:var(--su-mobile-heading-title) !important;
    line-height:1.05 !important;
  }
  body:is([data-page="car-wash"],[data-page="gas-station"]) .su-location-hero p {
    margin-top:6px !important;
    font-size:10px !important;
    line-height:1.45 !important;
  }

  /* Watch, Short i ShineChat też korzystają ze wspólnej skali nagłówków. */
  body[data-page="video-watch"] .watch-title,
  body[data-page="video-short"] .short-desktop-info h1 {
    font-size:clamp(18px,5vw,22px) !important;
    line-height:1.12 !important;
  }
  body[data-route="messages"] .conversation-title h2,
  body[data-page="m-priv-messages"] .m-chat-details header h2 {
    font-size:22px !important;
    line-height:1.05 !important;
  }

  /* Ekrany systemowe i autoryzacyjne. */
  body[data-page="404"] .system-hero h1,
  body[data-page="maintenance"] .maintenance-content h1,
  body[data-page="guard-pin"] .guard-pin-panel h1,
  body.standalone-auth-body .standalone-auth-visual-copy h1 {
    font-size:clamp(26px,8vw,32px) !important;
    line-height:1.04 !important;
    letter-spacing:-.04em !important;
  }

  body[data-page="company-profile"] .company-empty-page h1,
  body:is([data-page="car-wash"],[data-page="gas-station"]) .su-location-empty h1 {
    margin:0 !important;
    font-size:var(--su-mobile-heading-title) !important;
    line-height:1.05 !important;
    letter-spacing:-.035em !important;
  }
}

@media (min-width:701px) {
  /* Search ma dodatkowy wewnetrzny odstep. Cofamy go na korzeniu widoku,
     aby naglowek zaczynal sie na tej samej osi co Feed. */
  body[data-page="search"] .main-area {
    padding-top:calc(var(--topbar-h) + 24px) !important;
  }
  body[data-page="search"] #viewRoot {
    margin-top:-24px !important;
    padding-top:0 !important;
  }
  body[data-page="search"] .su-search-page {
    margin-top:0 !important;
    padding-top:0 !important;
  }
}